:root {
  --bg: #03110c;
  --surface: #ffffff;
  --surface-strong: #ffffff;
  --text: #eaf3ee;
  --text-dark: #10221d;
  --muted: #5b6d67;
  --muted-light: #a7c2b8;
  --line: #d9e8e1;
  --primary: #8cff00;
  --primary-soft: #b7ff5a;
  --primary-dark: #4fa500;
  --green: #25d366;
  --green-deep: #189a4a;
  --ink: #03110c;
  --ink-soft: #0d251d;
  --gold: #f2b84b;
  --gold-deep: #d99a2b;
  --shadow: 0 20px 60px rgba(6, 36, 28, 0.18);
  --shadow-soft: 0 12px 34px rgba(6, 36, 28, 0.08);
  --neon-glow: 0 0 0 1px rgba(140, 255, 0, 0.75), 0 0 28px rgba(140, 255, 0, 0.55), 0 0 70px rgba(140, 255, 0, 0.3);
  --neon-glow-soft: 0 0 0 1px rgba(140, 255, 0, 0.45), 0 0 30px rgba(140, 255, 0, 0.28);
  --radius: 14px;
  --radius-sm: 10px;
  --font-display: "Orbitron", "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background:
    linear-gradient(rgba(140, 255, 0, 0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(140, 255, 0, 0.09) 1px, transparent 1px),
    linear-gradient(rgba(140, 255, 0, 0.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(140, 255, 0, 0.16) 1px, transparent 1px),
    var(--bg);
  background-size: 34px 34px, 34px 34px, 204px 204px, 204px 204px, 100% 100%;
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.5;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
}

::selection {
  background: var(--primary);
  color: var(--ink);
}

:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}

/* ---------- header ---------- */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 16px clamp(18px, 4vw, 56px);
  color: #ffffff;
  transition: background 180ms ease, box-shadow 180ms ease, color 180ms ease;
}

.site-header.is-scrolled,
.site-header.is-open {
  background: rgba(2, 15, 10, 0.94);
  box-shadow: 0 10px 30px rgba(2, 15, 10, 0.24);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(140, 255, 0, 0.14);
}

.brand {
  display: inline-flex;
  align-items: center;
  width: min(250px, 46vw);
}

.brand-logo {
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.32));
}

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.4vw, 30px);
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
}

.site-nav a {
  position: relative;
  opacity: 0.88;
  padding-bottom: 2px;
}

.site-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -2px;
  height: 2px;
  background: var(--primary);
  transition: right 200ms ease;
}

.site-nav a:hover {
  opacity: 1;
}

.site-nav a:hover::after {
  right: 0;
}

.menu-button {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid currentColor;
  border-radius: var(--radius-sm);
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.menu-button span {
  display: block;
  width: 18px;
  height: 2px;
  margin: 5px auto;
  background: currentColor;
}

/* ---------- hero ---------- */

.hero {
  position: relative;
  min-height: 92vh;
  display: grid;
  align-items: center;
  overflow: hidden;
  background: #020e09;
}

.hero-image,
.hero-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero-image {
  object-fit: cover;
  object-position: center right;
}

.hero-overlay {
  background:
    radial-gradient(1100px 640px at 14% 18%, rgba(140, 255, 0, 0.16), transparent 60%),
    linear-gradient(90deg, rgba(2, 15, 10, 0.95) 0%, rgba(2, 15, 10, 0.72) 40%, rgba(2, 15, 10, 0.1) 74%),
    linear-gradient(0deg, rgba(2, 15, 10, 0.36), rgba(2, 15, 10, 0.02));
}

.hero-content {
  position: relative;
  z-index: 1;
  width: min(670px, calc(100% - 36px));
  margin-left: clamp(18px, 7vw, 96px);
  padding-top: 92px;
  color: #ffffff;
}

.eyebrow {
  margin: 0 0 12px;
  color: #6fce00;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-shadow: 0 0 12px rgba(140, 255, 0, 0.5);
}

.hero .eyebrow,
.intro-band .eyebrow,
.whatsapp-section .eyebrow {
  color: var(--primary-soft);
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
}

h1 {
  max-width: 700px;
  margin-bottom: 18px;
  font-size: clamp(2.35rem, 6vw, 5.4rem);
  line-height: 0.98;
  font-weight: 700;
}

h2 {
  margin-bottom: 14px;
  font-size: clamp(1.9rem, 4vw, 3.3rem);
  line-height: 1.06;
}

h3 {
  margin-bottom: 8px;
  font-size: 1.12rem;
}

.hero-copy {
  max-width: 540px;
  margin-bottom: 28px;
  color: rgba(255, 255, 255, 0.86);
  font-size: 1.15rem;
}

.hero-actions,
.trust-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.button {
  display: inline-flex;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 0;
  border-radius: var(--radius-sm);
  padding: 13px 22px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.98rem;
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.button:hover {
  transform: translateY(-2px);
}

.button.primary {
  background: linear-gradient(135deg, var(--primary-soft), var(--primary-dark));
  color: #03110c;
  box-shadow: 0 0 0 1px rgba(140, 255, 0, 0.5), 0 0 24px rgba(140, 255, 0, 0.5), 0 16px 34px rgba(140, 255, 0, 0.26);
}

.button.primary:hover {
  box-shadow: 0 20px 42px rgba(140, 255, 0, 0.36);
}

.button.secondary {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  outline: 1px solid rgba(255, 255, 255, 0.32);
}

.button.secondary:hover {
  background: rgba(255, 255, 255, 0.18);
}

.whatsapp-button {
  background: linear-gradient(135deg, #34e07f, var(--green-deep));
  color: #062016;
  box-shadow: 0 18px 42px rgba(37, 211, 102, 0.34);
}

.whatsapp-button:hover {
  box-shadow: 0 22px 50px rgba(37, 211, 102, 0.44);
}

.whatsapp-icon {
  display: block;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.trust-row {
  margin-top: 28px;
}

.trust-row span {
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 999px;
  padding: 8px 14px 8px 30px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.86rem;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.05);
}

.trust-row span::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--primary);
  transform: translateY(-50%);
  box-shadow: 0 0 0 3px rgba(140, 255, 0, 0.2);
}

.hero-stat-card {
  position: absolute;
  right: clamp(18px, 5vw, 64px);
  bottom: clamp(28px, 6vw, 64px);
  z-index: 1;
  display: grid;
  gap: 2px;
  padding: 16px 22px;
  border-radius: var(--radius);
  background: rgba(2, 15, 10, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow);
  color: #ffffff;
  text-align: right;
}

.hero-stat-card strong {
  font-family: var(--font-display);
  font-size: 1.7rem;
  color: var(--gold);
  text-shadow: 0 0 14px rgba(242, 184, 75, 0.6);
}

.hero-stat-card span {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.78);
}

/* ---------- sections ---------- */

.section {
  padding: clamp(70px, 9vw, 118px) clamp(18px, 4vw, 56px);
}

.section-inner {
  width: min(1180px, 100%);
  margin: 0 auto;
}

.intro-band {
  position: relative;
  background: var(--ink);
  color: #ffffff;
  overflow: hidden;
}

.intro-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(700px 420px at 88% 8%, rgba(242, 184, 75, 0.1), transparent 65%);
  pointer-events: none;
}

.intro-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(28px, 6vw, 80px);
  align-items: center;
}

.intro-grid p {
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.76);
  font-size: 1.08rem;
}

.check-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.check-list li {
  position: relative;
  padding-left: 26px;
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.95rem;
  font-weight: 600;
}

.check-list li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: rgba(140, 255, 0, 0.16);
  color: var(--primary);
  font-size: 0.72rem;
  font-weight: 900;
}

.stats-band {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin: 56px 0 0;
  padding: 34px 0 0;
  list-style: none;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.stats-band li {
  display: grid;
  gap: 4px;
}

.stats-band strong {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700;
  color: var(--primary);
  text-shadow: 0 0 16px rgba(140, 255, 0, 0.55);
}

.stats-band span {
  font-size: 0.86rem;
  color: rgba(255, 255, 255, 0.6);
}

.section-heading {
  max-width: 680px;
  margin-bottom: 34px;
}

.section-heading p:not(.eyebrow) {
  color: var(--muted-light);
  font-size: 1.08rem;
}

.section-heading.compact {
  margin-bottom: 0;
}

/* ---------- products ---------- */

.product-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
}

.product-card {
  position: relative;
  min-height: 264px;
  border: 1px solid rgba(140, 255, 0, 0.3);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 14px 14px 20px;
  overflow: hidden;
  box-shadow: var(--neon-glow-soft), var(--shadow-soft);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.product-card:hover {
  transform: translateY(-5px);
  border-color: rgba(140, 255, 0, 0.6);
  box-shadow: var(--neon-glow), var(--shadow);
}

.product-card p {
  margin-bottom: 0;
  padding-inline: 6px;
  color: var(--muted);
  font-size: 0.92rem;
}

.product-card h3 {
  padding-inline: 6px;
  font-size: 1.08rem;
  color: var(--text-dark);
}

.product-ribbon {
  position: absolute;
  top: 14px;
  left: -34px;
  z-index: 2;
  width: 140px;
  padding: 5px 0;
  transform: rotate(-45deg);
  background: linear-gradient(135deg, var(--gold), var(--gold-deep));
  color: #2b1a02;
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-align: center;
  text-transform: uppercase;
  box-shadow: 0 8px 18px rgba(217, 154, 43, 0.4);
}

.product-media {
  display: grid;
  width: 100%;
  aspect-ratio: 1.35;
  place-items: center;
  margin-bottom: 18px;
  border-radius: var(--radius-sm);
  background: #03110c;
  overflow: hidden;
}

.product-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.product-media.logo-fit {
  background: #ffffff;
}

.product-media.logo-fit img {
  width: 90%;
  height: 90%;
  object-fit: contain;
  margin: auto;
}

/* ---------- payments ---------- */

.payment-band {
  background: #061d15;
}

.payment-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.8fr);
  gap: clamp(24px, 5vw, 80px);
  align-items: center;
}

.payment-layout p {
  max-width: 600px;
  color: var(--muted-light);
}

.payment-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.payment-list span {
  min-height: 176px;
  min-width: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(140, 255, 0, 0.3);
  border-radius: var(--radius);
  background: #ffffff;
  padding: 18px;
  box-shadow: var(--neon-glow-soft), var(--shadow-soft);
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.payment-list span:hover {
  border-color: rgba(140, 255, 0, 0.6);
  box-shadow: var(--neon-glow), var(--shadow);
  transform: translateY(-3px);
}

.payment-list img {
  width: auto;
  height: 100%;
  max-width: 88%;
  max-height: 108px;
  min-width: 0;
  object-fit: contain;
}

.payment-cards-icon {
  max-width: 96%;
  max-height: 138px;
}

/* ---------- zappy ---------- */

.zappy-section {
  background: var(--ink);
}

.zappy-layout {
  display: grid;
  grid-template-columns: minmax(300px, 0.82fr) minmax(0, 1fr);
  gap: clamp(22px, 5vw, 70px);
  align-items: start;
}

.zappy-panel {
  position: sticky;
  top: 92px;
  border-radius: var(--radius);
  background-color: #0a2a1e;
  border: 1px solid rgba(140, 255, 0, 0.4);
  color: #ffffff;
  padding: clamp(24px, 4vw, 38px);
  box-shadow: var(--neon-glow), var(--shadow);
  overflow: hidden;
  isolation: isolate;
  background-image:
    linear-gradient(var(--primary), var(--primary)),
    linear-gradient(var(--primary), var(--primary)),
    linear-gradient(var(--primary), var(--primary)),
    linear-gradient(var(--primary), var(--primary)),
    linear-gradient(var(--primary), var(--primary)),
    linear-gradient(var(--primary), var(--primary)),
    linear-gradient(var(--primary), var(--primary)),
    linear-gradient(var(--primary), var(--primary));
  background-repeat: no-repeat;
  background-size:
    24px 2px, 2px 24px,
    24px 2px, 2px 24px,
    24px 2px, 2px 24px,
    24px 2px, 2px 24px;
  background-position:
    top 14px left 14px, top 14px left 14px,
    top 14px right 14px, top 14px right 14px,
    bottom 14px left 14px, bottom 14px left 14px,
    bottom 14px right 14px, bottom 14px right 14px;
}

.zappy-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(480px 300px at 100% 0%, rgba(140, 255, 0, 0.14), transparent 65%);
}

.zappy-panel p:not(.eyebrow) {
  color: rgba(255, 255, 255, 0.74);
}

.status-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-bottom: 28px;
  border-radius: 999px;
  background: var(--primary-soft);
  box-shadow: 0 0 0 10px rgba(183, 255, 90, 0.14);
  animation: pulse-glow 2.2s ease-in-out infinite;
}

@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 0 0 0 8px rgba(183, 255, 90, 0.14), 0 0 10px rgba(183, 255, 90, 0.5);
  }
  50% {
    box-shadow: 0 0 0 14px rgba(183, 255, 90, 0.06), 0 0 22px rgba(183, 255, 90, 0.8);
  }
}

.steps {
  position: relative;
  display: grid;
  gap: 14px;
}

.steps::before {
  content: "";
  position: absolute;
  left: 42px;
  top: 46px;
  bottom: 46px;
  width: 0;
  border-left: 2px dashed rgba(140, 255, 0, 0.3);
  z-index: 0;
}

.steps article {
  position: relative;
  z-index: 1;
  border: 1px solid rgba(140, 255, 0, 0.3);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 24px 24px 24px 96px;
  overflow: hidden;
  box-shadow: var(--neon-glow-soft), var(--shadow-soft);
  transition: box-shadow 180ms ease, border-color 180ms ease;
}

.steps article:hover {
  border-color: rgba(140, 255, 0, 0.6);
  box-shadow: var(--neon-glow), var(--shadow);
}

.steps article::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--primary), transparent 65%);
  opacity: 0.7;
}

.steps article h3 {
  color: var(--text-dark);
}

.steps span {
  position: absolute;
  left: 20px;
  top: 20px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: var(--surface);
  border: 2px solid var(--primary);
  box-shadow: 0 0 0 5px rgba(140, 255, 0, 0.12), 0 0 16px rgba(140, 255, 0, 0.5);
  animation: pulse-glow-badge 2.4s ease-in-out infinite;
  font-family: var(--font-display);
  color: var(--primary-dark);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

@keyframes pulse-glow-badge {
  0%, 100% {
    box-shadow: 0 0 0 5px rgba(140, 255, 0, 0.12), 0 0 16px rgba(140, 255, 0, 0.5);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(140, 255, 0, 0.05), 0 0 26px rgba(140, 255, 0, 0.85);
  }
}

.steps article:nth-child(1) span {
  animation-delay: 0s;
}

.steps article:nth-child(2) span {
  animation-delay: 0.4s;
}

.steps article:nth-child(3) span {
  animation-delay: 0.8s;
}

.steps article:nth-child(4) span {
  animation-delay: 1.2s;
}

.steps p {
  margin-bottom: 0;
  color: var(--muted);
}

/* ---------- whatsapp cta ---------- */

.whatsapp-section {
  background: var(--ink);
  color: #ffffff;
}

.whatsapp-panel {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) auto;
  gap: clamp(18px, 4vw, 36px);
  align-items: center;
}

.whatsapp-panel > img {
  width: 96px;
  height: 96px;
  border-radius: 22px;
  object-fit: cover;
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.3);
}

.whatsapp-panel p:not(.eyebrow) {
  max-width: 620px;
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.74);
}

.whatsapp-main {
  min-height: 64px;
  padding-inline: 26px;
  font-size: 1.05rem;
  white-space: nowrap;
}

.whatsapp-main .whatsapp-icon {
  width: 28px;
  height: 28px;
}

/* ---------- faq ---------- */

.faq-layout {
  display: grid;
  grid-template-columns: minmax(260px, 0.6fr) minmax(0, 1fr);
  gap: clamp(24px, 6vw, 80px);
}

.faq-list {
  display: grid;
  gap: 12px;
}

details {
  position: relative;
  border: 1px solid rgba(140, 255, 0, 0.3);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 18px 20px 18px 28px;
  overflow: hidden;
  box-shadow: var(--neon-glow-soft), var(--shadow-soft);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

details::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  background: var(--line);
  transition: background 160ms ease;
}

details[open] {
  border-color: rgba(140, 255, 0, 0.55);
  box-shadow: var(--neon-glow), var(--shadow-soft);
}

details[open]::before {
  background: var(--primary);
}

summary {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--text-dark);
  list-style: none;
}

summary::-webkit-details-marker {
  display: none;
}

summary::after {
  content: "+";
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: rgba(140, 255, 0, 0.12);
  box-shadow: 0 0 0 3px rgba(140, 255, 0, 0.1), 0 0 12px rgba(140, 255, 0, 0.35);
  color: var(--primary-dark);
  font-size: 1.05rem;
  font-weight: 700;
  transition: transform 160ms ease, background 160ms ease;
}

details[open] summary::after {
  content: "\2212";
  background: var(--primary);
  color: var(--text-dark);
  transform: rotate(180deg);
}

details p {
  margin: 12px 0 0;
  color: var(--muted);
}

/* ---------- footer ---------- */

.site-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 30px clamp(18px, 4vw, 56px);
  background: var(--ink);
  color: #ffffff;
}

.footer-logo {
  width: min(240px, 74vw);
  margin-bottom: 10px;
}

.site-footer p {
  margin: 4px 0 0;
  color: rgba(255, 255, 255, 0.68);
}

.site-footer a {
  font-family: var(--font-display);
  font-weight: 600;
}

/* ---------- floating controls ---------- */

.floating-zappy {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 25;
  display: grid;
  width: 62px;
  height: 62px;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: #051f18;
  color: #ffffff;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.32);
  cursor: pointer;
  overflow: hidden;
}

.floating-whatsapp {
  position: fixed;
  right: 96px;
  bottom: 22px;
  z-index: 25;
  display: grid;
  width: 62px;
  height: 62px;
  place-items: center;
  border-radius: 999px;
  background: linear-gradient(135deg, #34e07f, var(--green-deep));
  box-shadow: 0 18px 48px rgba(37, 211, 102, 0.36);
}

.floating-whatsapp .whatsapp-icon {
  width: 54px;
  height: 54px;
}

.floating-zappy img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mobile-whatsapp-bar {
  position: fixed;
  left: 14px;
  right: 14px;
  bottom: 14px;
  z-index: 24;
  display: none;
  min-height: 58px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, #34e07f, var(--green-deep));
  color: #062016;
  font-family: var(--font-display);
  font-weight: 700;
  box-shadow: 0 16px 40px rgba(6, 32, 22, 0.3);
}

/* ---------- responsive ---------- */

@media (max-width: 1120px) {
  .product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  .site-header {
    padding: 14px 18px;
  }

  .brand {
    width: min(210px, 56vw);
  }

  .menu-button {
    display: block;
  }

  .site-nav {
    position: absolute;
    top: calc(100% + 8px);
    left: 18px;
    right: 18px;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    border: 1px solid rgba(183, 255, 90, 0.22);
    border-radius: var(--radius);
    background: #03110c;
    color: #ffffff;
    box-shadow: var(--shadow);
    overflow: hidden;
  }

  .site-nav.is-open {
    display: flex;
  }

  .site-nav a {
    padding: 15px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .site-nav a:last-child {
    border-bottom: 0;
  }

  .hero {
    min-height: 0;
    overflow: visible;
    align-items: end;
    padding-bottom: 28px;
  }

  .hero-image {
    object-position: 82% center;
  }

  .hero-overlay {
    background:
      radial-gradient(700px 500px at 20% 10%, rgba(140, 255, 0, 0.14), transparent 60%),
      linear-gradient(0deg, rgba(2, 15, 10, 0.97) 0%, rgba(2, 15, 10, 0.82) 48%, rgba(2, 15, 10, 0.1) 100%);
  }

  .hero-content {
    width: calc(100% - 36px);
    margin: 0 auto;
    padding: 120px 0 44px;
  }

  .hero-heading {
    padding: 14px 16px;
    border-radius: var(--radius);
    background: linear-gradient(180deg, rgba(2, 15, 10, 0.78), rgba(2, 15, 10, 0.55));
  }

  .hero-actions {
    margin-top: 34px;
  }

  .hero-stat-card {
    position: static;
    margin: 24px auto 0;
    width: fit-content;
    text-align: left;
  }

  .intro-grid,
  .payment-layout,
  .zappy-layout,
  .faq-layout {
    grid-template-columns: 1fr;
  }

  .stats-band {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }

  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .zappy-panel {
    position: static;
  }

  .whatsapp-panel {
    grid-template-columns: 72px minmax(0, 1fr);
  }

  .whatsapp-panel > img {
    width: 72px;
    height: 72px;
    border-radius: 18px;
  }

  .whatsapp-main {
    grid-column: 1 / -1;
    width: 100%;
  }
}

@media (max-width: 560px) {
  body {
    padding-bottom: 82px;
  }

  .brand {
    width: min(180px, 56vw);
  }

  h1 {
    font-size: 2.3rem;
  }

  h2 {
    font-size: 1.9rem;
  }

  .hero-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .button {
    width: 100%;
  }

  .hero-whatsapp {
    min-height: 60px;
    font-size: 1.03rem;
  }

  .product-grid,
  .payment-list {
    grid-template-columns: 1fr;
  }

  .product-card {
    min-height: 246px;
  }

  .floating-zappy {
    right: 16px;
    bottom: 88px;
    width: 54px;
    height: 54px;
    opacity: 0;
    transform: translateY(16px) scale(0.9);
    pointer-events: none;
    transition: opacity 220ms ease, transform 220ms ease;
  }

  .floating-whatsapp {
    display: none;
  }

  .mobile-whatsapp-bar {
    display: flex;
    opacity: 0;
    transform: translateY(100%);
    pointer-events: none;
    transition: opacity 220ms ease, transform 220ms ease;
  }

  .floating-zappy.is-visible,
  .mobile-whatsapp-bar.is-visible {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }

  .site-footer {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* ---------- product guide pages ---------- */

.breadcrumb-nav {
  width: min(1180px, 100%);
  margin: 0 auto;
  padding: 110px clamp(18px, 4vw, 56px) 0;
  font-size: 0.85rem;
  color: var(--muted-light);
}

.breadcrumb-nav a {
  color: var(--muted-light);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.breadcrumb-nav a:hover {
  color: var(--primary);
}

.price-table {
  display: grid;
  gap: 10px;
  margin-top: 24px;
  padding: 0;
  list-style: none;
}

.price-table li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  background: var(--surface);
  border: 1px solid rgba(140, 255, 0, 0.3);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-soft);
}

.price-table strong {
  color: var(--text-dark);
  font-weight: 600;
}

.price-table .price {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--primary-dark);
  font-size: 1.05rem;
  white-space: nowrap;
}

.product-hero-media {
  display: grid;
  place-items: center;
}

.product-hero-media img {
  width: min(280px, 60%);
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.35));
}

.product-card > a {
  display: block;
}

/* ---------- hero no mobile: imagem em cima, texto embaixo ---------- */
/* Em telas estreitas o object-fit: cover ampliava tanto a imagem que o rosto
   da Zappy ocupava quase toda a largura, ficando atrás do título. Aqui a
   imagem passa a ocupar só a faixa superior e o texto desce para o fundo. */

@media (max-width: 860px) {
  .hero {
    /* altura da faixa da imagem — o texto usa o mesmo valor, então os dois
       nunca saem de sincronia em telas muito altas ou muito baixas */
    --hero-banner: clamp(260px, 40vh, 380px);
  }

  .hero-image,
  .hero-overlay {
    height: var(--hero-banner);
    bottom: auto;
  }

  .hero-image {
    object-position: 82% center;
  }

  .hero-overlay {
    background: linear-gradient(180deg, rgba(2, 15, 10, 0.1) 45%, rgba(2, 15, 10, 0.85) 82%, #020e09 100%);
  }

  .hero-content {
    padding-top: calc(var(--hero-banner) + 18px);
    text-align: left;
  }

  .hero-heading {
    padding: 0;
    background: none;
  }
}

/* ---------------------------------------------------------------
   Páginas legais (privacidade, termos)
   Texto longo em cartão claro sobre o fundo escuro do site.
   --------------------------------------------------------------- */

.legal-page {
  max-width: 820px;
  margin: 0 auto;
  padding: 140px 22px 90px;
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.75;
}

.legal-page h1 {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 5vw, 2.7rem);
  line-height: 1.15;
  margin: 0 0 8px;
  color: var(--primary);
}

.legal-updated {
  color: var(--muted-light);
  font-size: 0.92rem;
  margin: 0 0 40px;
}

.legal-page h2 {
  font-family: var(--font-display);
  font-size: 1.22rem;
  margin: 46px 0 14px;
  padding-top: 22px;
  border-top: 1px solid rgba(167, 194, 184, 0.18);
  color: var(--text);
}

.legal-page h3 {
  font-size: 1.03rem;
  font-weight: 700;
  margin: 26px 0 10px;
  color: var(--primary-soft);
}

.legal-page p,
.legal-page li {
  color: var(--muted-light);
}

.legal-page ul,
.legal-page ol {
  padding-left: 22px;
  margin: 14px 0;
}

.legal-page li {
  margin-bottom: 9px;
}

.legal-page strong {
  color: var(--text);
}

.legal-page a {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.legal-page a:hover {
  color: var(--primary-soft);
}

.legal-page code {
  background: rgba(140, 255, 0, 0.1);
  border: 1px solid rgba(140, 255, 0, 0.22);
  border-radius: 5px;
  padding: 1px 6px;
  font-size: 0.87em;
  color: var(--primary-soft);
}

@media (max-width: 640px) {
  .legal-page {
    padding: 116px 18px 70px;
  }
}

.footer-legal {
  display: flex;
  gap: 18px;
  align-items: center;
}

.footer-legal a {
  color: var(--muted-light);
  font-size: 0.9rem;
  text-decoration: none;
}

.footer-legal a:hover {
  color: var(--primary);
}

@media (max-width: 640px) {
  .footer-legal {
    justify-content: center;
    margin: 6px 0;
  }
}

/* Preço acima da dobra na página de produto.
   Quem chega de anúncio de "robux barato" veio saber o preço — precisa
   encontrar antes de rolar, senão volta pro Google. */

.check-list li.preco-destaque {
  color: var(--primary);
  font-weight: 600;
}

.check-list li.preco-destaque strong {
  font-family: var(--font-display);
  font-size: 1.12em;
  color: var(--primary);
}