/* =============================================================
   Master Entradinhas · Mônica Guerra
   Paleta: terracota queimado + cream + dourado · Playfair + Inter
============================================================= */

/* -------------------------------------------------------------
   Fallback font metric overrides — eliminates CLS on font swap
   Values match Inter/Playfair Display ascent/descent ratios to
   keep text bounding box identical between fallback + web font.
------------------------------------------------------------- */
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial");
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Playfair Fallback";
  src: local("Georgia");
  size-adjust: 110%;
  ascent-override: 92%;
  descent-override: 25%;
  line-gap-override: 0%;
}

:root {
  /* Brand palette — Master Entradinhas
     Primary: #5B2609 (marrom profundo) · #FFFFFF (branco) · #FFB500 (amarelo) */
  --c-bg-1:        #5B2609;   /* brand brown */
  --c-bg-2:        #4A1E07;   /* darker step */
  --c-bg-3:        #3A1605;   /* deeper */
  --c-bg-deep:     #2A0E03;   /* deepest, near-black brown */
  --c-bg-light:    #7A3815;   /* lighter brown (subtle highlights) */
  --c-glow-1:      #FFB500;   /* brand yellow — primary accent */
  --c-glow-2:      #FFC940;   /* lighter yellow */
  --c-cream:       #FFFBF2;   /* near-white cream */
  --c-cream-2:     #FFF4D6;   /* warm cream (amber-tinted) */
  --c-card:        #FFFFFF;
  --c-ink:         #1F1310;
  --c-ink-2:       #4B3A33;
  --c-ink-3:       #6B5A52;
  --c-gold-1:      #FFB500;   /* alias for brand yellow */
  --c-gold-2:      #E0A000;   /* yellow shade */
  --c-gold-3:      #B07F00;   /* deep amber */
  --c-yellow:      #FFB500;   /* explicit token */
  --c-yellow-soft: #FFD980;   /* soft yellow */
  --c-accent:      #059669;
  --c-danger:      #B91C1C;
  --c-line:        rgba(60, 28, 12, .12);
  --c-line-soft:   rgba(60, 28, 12, .06);
  --c-on-dark:     #FFFFFF;
  --c-on-dark-2:   rgba(255,255,255,.82);
  --c-on-dark-3:   rgba(255,255,255,.55);

  /* Effects */
  --shadow-card:  0 2px 8px rgba(76,19,6,.08), 0 18px 38px -18px rgba(76,19,6,.30);
  --shadow-hover: 0 4px 14px rgba(76,19,6,.14), 0 28px 50px -16px rgba(76,19,6,.40);
  --shadow-warm:  0 18px 40px -18px rgba(76,19,6,.55);
  --shadow-cta:   0 12px 24px -8px rgba(123, 48, 12, .55), 0 24px 48px -16px rgba(0,0,0,.25);

  /* Typography — Fallback font names use metric overrides above to match
     the web font's bounding box. Eliminates layout shift on font swap. */
  --font-display: "Playfair Display", "Playfair Fallback", Georgia, "Times New Roman", serif;
  --font-sans:    "Inter", "Inter Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;

  /* Spacing scale (4pt) */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-7: 32px; --s-8: 40px; --s-9: 48px; --s-10: 64px;
  --s-11: 80px; --s-12: 96px; --s-13: 128px;

  /* Radius */
  --r-sm: 12px; --r-md: 18px; --r-lg: 22px; --r-xl: 28px; --r-pill: 999px;

  /* Container */
  --max-w: 1200px;

  /* Motion */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --t-fast: 160ms;
  --t-base: 220ms;
  --t-slow: 380ms;
}

/* Skip-link — visível só quando recebe foco via Tab, antes do conteúdo */
.skip-link {
  position: absolute;
  top: -100px;
  left: 12px;
  padding: 10px 16px;
  background: var(--c-ink);
  color: #FFF;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  z-index: 9999;
  transition: top var(--t-fast) var(--ease-out);
}
.skip-link:focus { top: 12px; outline: 3px solid var(--c-gold-1); outline-offset: 2px; }

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* Scroll target: lead-form ganha respiro do topo quando #anchor é clicado */
#lead-form { scroll-margin-top: 24px; }
#oferta { scroll-margin-top: 16px; } /* CTAs scrollam pra início da seção da oferta (não pro form direto) */

/* Hero CTA — botão grande que rola pro formulário na oferta */
.hero__cta {
  margin-top: var(--s-5);
  align-self: flex-start;
  text-decoration: none;
  min-height: 56px;
  padding: 16px 28px;
  font-size: 16px;
}
.hero__cta-hint {
  margin: var(--s-3) 0 0;
  font-size: 13.5px;
  color: var(--c-on-dark-2);
  max-width: 480px;
  line-height: 1.5;
}
.hero__cta-hint strong { color: var(--c-gold-1); }

/* Authority line (social proof under lead text) */
.hero__authority {
  margin: var(--s-3) 0 var(--s-5);
  font-size: 13px;
  color: var(--c-on-dark-3);
  letter-spacing: .02em;
}
.hero__authority strong {
  color: var(--c-gold-1);
  font-weight: 600;
}

/* Form dentro da oferta (variant `--offer` herda .lead-form mas inverte cores
   pra contrastar com o background escuro do .offer-card) */
.lead-form--offer {
  margin-top: var(--s-6);
  background: rgba(255, 255, 255, .04);
  border-color: rgba(255, 181, 0, .25);
}
.lead-form__title {
  margin: 0 0 var(--s-2);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 17px;
  color: var(--c-gold-1);
  letter-spacing: .01em;
  text-align: center;
}
body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--c-ink);
  background: var(--c-cream);
  min-height: 100dvh;
  /* `clip` (not `hidden`): clips horizontal overflow WITHOUT turning body
     into a scroll container. `hidden` would silently force overflow-y: auto
     per CSS spec, breaking window.scrollTo() and href="#anchor" smooth-scroll. */
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
button { font: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; }
a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 3px solid var(--c-gold-1);
  outline-offset: 3px;
  border-radius: 6px;
}

.container {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 clamp(var(--s-5), 4vw, var(--s-9));
}

/* ---------- Typography ---------- */
.h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(30px, 7.5vw, 60px);
  line-height: 1.12;
  letter-spacing: -.015em;
  color: var(--c-on-dark);
  margin: 0 0 var(--s-5);
}
.h1 em {
  font-style: italic;
  color: var(--c-gold-1);
  font-weight: 700;
}
.h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 4.2vw, 44px);
  line-height: 1.12;
  letter-spacing: -.01em;
  color: var(--c-ink);
  margin: 0 0 var(--s-7);
}
.h2 em {
  font-style: italic;
  color: #8A5A00;
  font-weight: 700;
}
.h2--center { text-align: center; }
.h2--light { color: var(--c-on-dark); }
.h2--light em { color: var(--c-gold-1); }

.eyebrow {
  margin: 0 0 var(--s-3);
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #8A5A00;
  font-weight: 800;
}
.eyebrow--light { color: var(--c-gold-1); }

.lead {
  margin: 0 0 var(--s-6);
  font-size: clamp(16px, 1.6vw, 17px);
  color: var(--c-on-dark-2);
  max-width: 560px;
  line-height: 1.6;
}
.lead strong { color: var(--c-on-dark); }

.kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin: 0 0 var(--s-4);
  padding: 7px 14px 7px 10px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.20);
  border-radius: var(--r-pill);
  font-size: 12px;
  letter-spacing: .04em;
  font-weight: 700;
  color: #FFFFFF;
  text-transform: uppercase;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kicker .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--c-gold-1);
  box-shadow: 0 0 12px var(--c-gold-1);
  animation: pulse 1.8s ease-in-out infinite;
}
@keyframes pulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50%     { opacity: .55; transform: scale(.85); }
}

/* =============================================================
   DOBRA 1 — Hero
============================================================= */
.hero {
  position: relative;
  isolation: isolate;
  color: var(--c-on-dark);
  padding: clamp(var(--s-7), 6vw, var(--s-11)) 0 clamp(var(--s-9), 8vw, var(--s-12));
  overflow: hidden;
}
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(70vmin 55vmin at 15% -10%, rgba(255, 181, 0, .22), transparent 70%),
    radial-gradient(75vmin 60vmin at 92% 25%, rgba(255, 181, 0, .12), transparent 70%),
    linear-gradient(180deg, var(--c-bg-light) 0%, var(--c-bg-1) 35%, var(--c-bg-2) 100%);
}
.hero__bg::after {
  content: "";
  position: absolute;
  inset: -10%;
  background:
    radial-gradient(circle, rgba(255,255,255,.04) 0 1px, transparent 1.5px) 0 0/2px 2px;
  opacity: .35;
  mix-blend-mode: overlay;
  pointer-events: none;
}

.hero__inner { display: flex; flex-direction: column; gap: var(--s-9); }

.brand {
  display: inline-flex;
  align-items: center;
  color: var(--c-on-dark);
  align-self: flex-start;
}
.brand__logo {
  /* Logo aspect-ratio 2:1 — reserved BEFORE image load to prevent CLS */
  height: clamp(56px, 12vw, 92px);
  aspect-ratio: 2 / 1;
  width: auto;
  display: block;
  filter: drop-shadow(0 6px 20px rgba(0,0,0,.25));
}

.hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(var(--s-6), 4vw, var(--s-9));
  align-items: center;
}

@media (min-width: 980px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  }
}

.hero__photo {
  margin: 0;
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-warm);
  border: 1px solid rgba(255,255,255,.10);
  transform: rotate(.4deg);
  max-width: 520px;
  width: 100%;
  margin-inline: auto;
}
.hero__photo img {
  width: 100%;
  aspect-ratio: 9/16;
  object-fit: cover;
  object-position: center 35%;
}
@media (min-width: 980px) {
  .hero__photo {
    max-width: 420px;
  }
}
.hero__caption {
  position: absolute;
  left: 10px;
  bottom: 10px;
  padding: 6px 12px;
  background: rgba(20, 8, 4, .72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .03em;
  color: #FFFFFF;
  text-transform: uppercase;
  max-width: calc(100% - 20px);
  width: max-content;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

/* Lead form (hero) */
.lead-form {
  display: grid;
  gap: var(--s-3);
  margin-top: var(--s-5);
  padding: clamp(var(--s-5), 3vw, var(--s-6));
  background: rgba(31, 19, 16, .55);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--r-xl);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
}
.field { display: grid; gap: 6px; }
.field__label {
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 700;
  color: #FFD166;
}
.field input {
  padding: 14px 16px;
  border-radius: var(--r-md);
  border: 1.5px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  color: var(--c-on-dark);
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  transition: border-color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out), box-shadow var(--t-fast);
}
.field input::placeholder { color: rgba(255,255,255,.65); }
.field input:focus {
  outline: none;
  border-color: var(--c-gold-1);
  background: rgba(255,255,255,.14);
  box-shadow: 0 0 0 3px rgba(226, 182, 107, .25);
}
.field--error input {
  border-color: #FCA5A5;
  background: rgba(254, 226, 226, .12);
}
.field__error {
  font-size: 12px;
  color: #FCA5A5;
  font-weight: 600;
  margin-top: 2px;
  min-height: 14px;
}
.lead-form__legal {
  margin: 4px 0 0;
  font-size: 12.5px;
  color: rgba(255,255,255,.78);
  line-height: 1.55;
}

/* =============================================================
   Buttons
============================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: 14px 22px;
  border-radius: var(--r-pill);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .01em;
  transition:
    transform var(--t-base) var(--ease-spring),
    box-shadow var(--t-base) var(--ease-out),
    background var(--t-fast) var(--ease-out),
    filter var(--t-fast);
}
.btn--lg { padding: 17px 28px; font-size: 16px; }
.btn--primary {
  background: linear-gradient(135deg, var(--c-yellow) 0%, #FFC940 50%, var(--c-yellow) 100%);
  background-size: 200% 200%;
  background-position: 0% 50%;
  color: var(--c-bg-deep);
  box-shadow: 0 12px 26px -10px rgba(255, 181, 0, .55), 0 24px 48px -16px rgba(0,0,0,.25);
  border: 1px solid rgba(255, 217, 128, .55);
}
.btn--primary:hover { background-position: 100% 50%; transform: translateY(-2px); box-shadow: 0 14px 30px -8px rgba(255,181,0,.65), 0 28px 52px -16px rgba(0,0,0,.3), 0 0 0 4px rgba(255,181,0,.18); }
.btn--primary:active { transform: translateY(0) scale(.99); }
.btn--gold {
  background: linear-gradient(135deg, #FFD980 0%, var(--c-yellow) 45%, var(--c-gold-2) 100%);
  color: var(--c-bg-deep);
  box-shadow: 0 12px 30px -10px rgba(255, 181, 0, .65), 0 0 0 1px rgba(255,255,255,.30) inset;
}
.btn--gold:hover { transform: translateY(-2px); filter: brightness(1.05); }
.btn__arrow {
  width: 18px; height: 18px;
  transition: transform var(--t-fast);
}
.btn:hover .btn__arrow { transform: translateX(3px); }

.cta-row {
  display: flex;
  justify-content: center;
  margin-top: var(--s-7);
}
.cta-row--start { justify-content: flex-start; }

/* =============================================================
   Sections
============================================================= */
.section {
  padding: clamp(var(--s-9), 6vw, var(--s-12)) 0;
  position: relative;
}
.section--gallery {
  background: linear-gradient(180deg, var(--c-cream) 0%, var(--c-cream-2) 100%);
}
.section--pillars {
  background: var(--c-bg-deep);
  color: var(--c-on-dark);
}
.section--learn {
  background: var(--c-cream);
}
.section--for-you {
  background: linear-gradient(180deg, var(--c-cream-2) 0%, var(--c-cream) 100%);
}
.section--offer {
  background: linear-gradient(160deg, var(--c-bg-1) 0%, var(--c-bg-deep) 100%);
}
.section--about {
  background: var(--c-cream);
}

/* =============================================================
   DOBRA 2 — Gallery
============================================================= */
.gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(var(--s-3), 1.5vw, var(--s-5));
  margin: var(--s-7) 0 var(--s-2);
}
@media (min-width: 720px) {
  .gallery { grid-template-columns: repeat(3, 1fr); }
  .gallery__item--lg { grid-column: span 2; grid-row: span 2; }
}
@media (min-width: 1100px) {
  .gallery { grid-template-columns: repeat(4, 1fr); }
  .gallery__item--lg { grid-column: span 2; grid-row: span 2; }
}

.gallery__item {
  position: relative;
  margin: 0;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  background: #fff;
  transition: transform var(--t-base) var(--ease-spring), box-shadow var(--t-base) var(--ease-out);
}
.gallery__item img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  object-position: center 35%;
  transition: transform .6s var(--ease-out);
}
.gallery__item--lg img { aspect-ratio: auto; }
.gallery__item:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.gallery__item:hover img { transform: scale(1.03); }
.gallery__item figcaption {
  position: absolute;
  left: 12px; right: 12px; bottom: 10px;
  padding: 7px 12px;
  background: rgba(20, 8, 4, .82);
  border-radius: var(--r-pill);
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .01em;
  width: max-content;
  max-width: calc(100% - 24px);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* =============================================================
   DOBRA 3 — Pilares
============================================================= */
.pillars {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(var(--s-5), 3vw, var(--s-7));
}
@media (min-width: 800px) {
  .pillars { grid-template-columns: repeat(3, 1fr); }
}
.pillar {
  position: relative;
  padding: var(--s-7) var(--s-6);
  border-radius: var(--r-xl);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  text-align: center;
}
.pillar__icon {
  display: inline-grid;
  place-items: center;
  width: 56px; height: 56px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(226,182,107,.18), rgba(176,118,42,.20));
  color: var(--c-gold-1);
  margin: 0 auto var(--s-4);
  border: 1px solid rgba(226,182,107,.25);
}
.pillar__icon svg { width: 28px; height: 28px; }
.pillar__title {
  margin: 0 0 var(--s-2);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -.005em;
  color: var(--c-on-dark);
}
.pillar__desc {
  margin: 0;
  color: var(--c-on-dark-2);
  font-size: 15.5px;
  line-height: 1.6;
}
.pillar__desc em { color: var(--c-gold-1); font-style: italic; }

/* =============================================================
   DOBRA 4 — O que vai aprender
============================================================= */
.learn-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
  margin-top: var(--s-7);
}
@media (min-width: 800px) {
  .learn-grid { grid-template-columns: repeat(3, 1fr); }
  .learn-card--feature { grid-column: span 3; }
}
@media (min-width: 1100px) {
  .learn-grid { grid-template-columns: repeat(4, 1fr); }
  .learn-card--feature { grid-column: span 4; }
}

.learn-card {
  background: #fff;
  border-radius: var(--r-xl);
  padding: var(--s-6);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--c-line-soft);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-3);
}
.learn-card__icon {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--c-cream-2), var(--c-yellow-soft));
  color: var(--c-bg-1);
}
.learn-card__icon svg { width: 22px; height: 22px; }
.learn-card__count {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 56px;
  line-height: 1;
  color: var(--c-bg-1);
  margin-right: var(--s-4);
}
.learn-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -.005em;
  color: var(--c-ink);
}
.learn-card__desc {
  margin: 0;
  color: var(--c-ink-2);
  font-size: 15.5px;
  line-height: 1.6;
}

.learn-card--feature {
  flex-direction: row;
  align-items: center;
  padding: var(--s-7);
  gap: var(--s-6);
  background:
    linear-gradient(135deg, #FFF 0%, #FFF8EE 100%);
}
@media (max-width: 720px) {
  .learn-card--feature {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    padding: var(--s-6);
  }
  .learn-card__count {
    font-size: 64px;
  }
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: var(--s-3) 0 0;
  padding: 0;
}
.chips__item {
  padding: 6px 12px;
  background: var(--c-cream-2);
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 600;
  color: var(--c-bg-1);
  border: 1px solid rgba(255, 181, 0, .35);
}

/* =============================================================
   DOBRA 5 — Para quem é
============================================================= */
.for-list {
  list-style: none;
  padding: 0;
  margin: var(--s-7) 0 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-3);
  max-width: 760px;
}
@media (min-width: 800px) {
  .for-list { grid-template-columns: repeat(2, 1fr); }
}
.for-list__item {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  background: #FFF;
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--c-line-soft);
  font-size: 16px;
  line-height: 1.55;
  color: var(--c-ink);
}
.for-list__item strong { color: var(--c-bg-1); font-weight: 700; }
.check {
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: 999px;
  background: linear-gradient(135deg, #A7F3D0, #34D399);
  color: #052E1E;
  flex-shrink: 0;
}
.check svg { width: 16px; height: 16px; }

/* =============================================================
   DOBRA 6 — Oferta
============================================================= */
.offer-card {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(var(--s-7), 4vw, var(--s-10));
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
  border: 1px solid rgba(226, 182, 107, .25);
  border-radius: var(--r-xl);
  box-shadow: 0 24px 56px -16px rgba(0,0,0,.45);
  text-align: center;
  color: var(--c-on-dark);
}
.offer-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: var(--r-xl);
  padding: 1px;
  background: linear-gradient(135deg, var(--c-gold-1), transparent 50%, var(--c-gold-2));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  opacity: .55;
}
.offer-card__head { margin-bottom: var(--s-6); }
.offer-card .h2 { margin-bottom: 0; }

.offer-list {
  list-style: none;
  padding: 0;
  margin: var(--s-6) 0;
  display: grid;
  gap: var(--s-3);
  text-align: left;
  font-size: 15.5px;
  color: var(--c-on-dark);
}
.offer-list li {
  display: flex;
  gap: var(--s-3);
  padding: 12px 16px;
  background: rgba(255,255,255,.06);
  border-radius: var(--r-md);
  border: 1px solid rgba(255,255,255,.08);
}
.offer-list strong { color: var(--c-gold-1); font-weight: 700; }
.offer-list__mark {
  flex-shrink: 0;
  font-weight: 700;
  color: var(--c-gold-1);
  font-size: 16px;
  line-height: 1.4;
}

.price {
  margin: var(--s-8) 0 var(--s-7);
}
.price__from {
  margin: 0 0 var(--s-2);
  font-size: 14px;
  color: var(--c-on-dark-2);
}
.price__from s { color: rgba(255,255,255,.70); }
.price__amount {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(48px, 11vw, 84px);
  line-height: 1;
  letter-spacing: -.01em;
  color: var(--c-gold-1);
  text-shadow: 0 2px 30px rgba(226,182,107,.4);
}
.price__hidden {
  display: inline-block;
  letter-spacing: -.04em;
  filter: drop-shadow(0 2px 12px rgba(226,182,107,.6));
}
.price__hint {
  margin: var(--s-4) auto 0;
  max-width: 360px;
  font-size: 13.5px;
  color: var(--c-on-dark-2);
}

/* =============================================================
   DOBRA 7 — Sobre
============================================================= */
.about {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(var(--s-7), 4vw, var(--s-10));
  align-items: center;
}
@media (min-width: 920px) {
  .about { grid-template-columns: minmax(0, 360px) minmax(0, 1fr); }
}
.about__photo {
  position: relative;
  margin: 0 auto;
  width: clamp(220px, 36vw, 320px);
  aspect-ratio: 1/1;
  border-radius: 50%;
  overflow: hidden;
  isolation: isolate;
}
.about__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 50%;
  position: relative;
  z-index: 1;
}
.about__photo-ring {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background: conic-gradient(from 200deg, var(--c-gold-1), #F4D38B, var(--c-gold-2), #F8B26A, var(--c-gold-1));
  z-index: 0;
}
.about__photo::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: var(--c-cream);
  z-index: 0;
}
.about__copy p {
  margin: 0 0 var(--s-3);
  color: var(--c-ink-2);
  font-size: 16px;
  line-height: 1.7;
}
.about__copy strong { color: var(--c-bg-1); font-weight: 700; }
.about__copy em { font-style: italic; color: var(--c-bg-1); font-weight: 500; }

/* =============================================================
   Footer
============================================================= */
.footer {
  background: var(--c-bg-deep);
  color: var(--c-on-dark-2);
  padding: var(--s-7) 0;
}
.footer__inner {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  align-items: center;
  text-align: center;
}
.footer__brand {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 16px;
  color: var(--c-on-dark);
}
.footer__copy {
  margin: 0;
  font-size: 12.5px;
  color: rgba(255,255,255,.70);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--c-on-dark-3);
}

/* =============================================================
   Sticky CTA (mobile)
============================================================= */
.sticky-cta {
  position: fixed;
  bottom: calc(12px + env(safe-area-inset-bottom));
  left: 12px;
  right: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--s-2);
  padding: 16px 22px;
  min-height: 54px;
  background: linear-gradient(135deg, var(--c-yellow), #FFC940);
  color: var(--c-bg-deep);
  border-radius: var(--r-pill);
  font-weight: 800;
  font-size: 15.5px;
  letter-spacing: .005em;
  box-shadow: 0 18px 30px -10px rgba(255,181,0,.55), 0 0 0 1px rgba(255,255,255,.30) inset;
  z-index: 50;
  transform: translateY(140%);
  opacity: 0;
  transition: transform .35s var(--ease-spring), opacity .25s var(--ease-out);
}
.sticky-cta svg { width: 18px; height: 18px; }
.sticky-cta.is-visible {
  transform: translateY(0);
  opacity: 1;
}
@media (min-width: 980px) {
  .sticky-cta { display: none; }
}

/* =============================================================
   Reveal animation
============================================================= */
[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
}
[data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

/* =============================================================
   Modal & Toast
============================================================= */
.modal {
  border: 0;
  padding: 0;
  background: transparent;
  width: min(440px, 92vw);
  max-height: 90vh;
}
.modal::backdrop {
  background: rgba(20,8,4,.55);
  backdrop-filter: blur(6px);
}
.modal__panel {
  background: #FFF;
  border-radius: var(--r-xl);
  padding: var(--s-8) var(--s-6);
  text-align: center;
  box-shadow: 0 30px 60px -10px rgba(0,0,0,.5);
}
.modal__icon {
  display: grid;
  place-items: center;
  width: 64px; height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, #A7F3D0, #34D399);
  color: #052E1E;
  margin: 0 auto var(--s-5);
}
.modal__icon svg { width: 32px; height: 32px; }
.modal__title {
  margin: 0 0 var(--s-3);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 26px;
  color: var(--c-ink);
}
.modal__desc {
  margin: 0 0 var(--s-3);
  color: var(--c-ink-2);
  font-size: 15.5px;
  line-height: 1.55;
}
.modal__hint {
  margin: 0 0 var(--s-6);
  font-size: 13.5px;
  color: var(--c-ink-2);
}
.modal__close { width: 100%; }

.toast {
  position: fixed;
  bottom: calc(80px + env(safe-area-inset-bottom));
  left: 50%;
  transform: translate(-50%, 20px);
  background: var(--c-ink);
  color: #FFF;
  padding: 12px 18px;
  border-radius: var(--r-pill);
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 12px 32px -10px rgba(0,0,0,.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out);
  z-index: 100;
}
.toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* =============================================================
   Mobile-specific polish (≤414px) — readability + spacing
============================================================= */
@media (max-width: 414px) {
  .container { padding: 0 var(--s-4); }

  /* Hero copy denser, more breathing room */
  .hero { padding-top: var(--s-7); }
  .hero__copy .h1 { font-size: 30px; line-height: 1.14; }
  .hero__copy .lead { font-size: 16px; line-height: 1.55; }
  .kicker { font-size: 11.5px; letter-spacing: .03em; }

  /* Form chunkier touch & label clearer */
  .field__label { font-size: 13.5px; }
  .field input { font-size: 16px; padding: 15px 16px; }
  .lead-form { padding: var(--s-5); }
  .lead-form__legal { font-size: 12.5px; }

  /* Section headings — slightly tighter */
  .h2 { font-size: 28px; line-height: 1.15; }
  .eyebrow { font-size: 12.5px; letter-spacing: .1em; }

  /* Pillars — less lateral padding */
  .pillar { padding: var(--s-6) var(--s-5); }
  .pillar__title { font-size: 20px; }
  .pillar__desc { font-size: 15.5px; }

  /* Learn cards — denser */
  .learn-card { padding: var(--s-5); }
  .learn-card--feature { padding: var(--s-5); gap: var(--s-3); }
  .learn-card__count { font-size: 56px; }
  .chips__item { font-size: 12.5px; padding: 6px 11px; }

  /* For-list (Dobra 5) */
  .for-list__item { padding: var(--s-4); gap: var(--s-3); font-size: 15.5px; }
  .check { width: 28px; height: 28px; }

  /* Offer card */
  .offer-card { padding: var(--s-6) var(--s-5); }
  .offer-list li { padding: 11px 14px; font-size: 15px; }
  .price__amount { font-size: 56px; }

  /* About */
  .about__copy p { font-size: 15.5px; line-height: 1.65; }

  /* CTAs */
  .cta-row { padding: 0 var(--s-3); }
  .btn--lg { padding: 16px 22px; font-size: 15.5px; }

  /* Footer */
  .footer__copy { font-size: 12.5px; }
}

/* Extra-narrow mobile — iPhone SE 1st gen, Galaxy Fold front, ~320px */
@media (max-width: 360px) {
  .hero__copy .h1 { font-size: 28px; }
  .h2 { font-size: 26px; }
  .price__amount { font-size: 48px; }
  .chips__item { font-size: 12px; padding: 5px 10px; }
}

/* Make the page content not be hidden behind the sticky mobile CTA */
@media (max-width: 979px) {
  body { padding-bottom: 96px; }
}

/* Survey modal CSS lives in survey-modal.css — lazy-loaded by main.js
   on lead submit. Keeps the critical CSS path small (saves ~7.4KB / 25%
   of original styles.css). */

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}