/* ===== Tokens ===== */
:root{
  /* Base: royal navy blue — matched to the book cover's gradient
     (a saturated blue, not a near-black navy) */
  --bg:#0e2141;
  --bg-elevated:#122a52;
  --bg-card:#16305c;
  --ink:#f4f1e8;
  --ink-dim:#c3cee6;
  --ink-muted:#8fa0c4;
  /* Single accent identity: warm metallic gold, matched to the book's
     foil title band and ring icon. Used for CTAs, price, highlights only. */
  --accent:#d9a83e;
  --accent-deep:#b3822a;
  --accent-bright:#eec564;
  --accent-dim:#3a2f16;
  --line:#22375f;
  --line-strong:#33487a;
  --serif:"Sora","Inter",ui-sans-serif,system-ui,sans-serif;
  --sans:"Inter",ui-sans-serif,system-ui,sans-serif;
  --radius-sm:8px;
  --radius:14px;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --shadow-sm:0 1px 2px rgba(0,0,0,.35);
  --shadow-md:0 4px 20px rgba(0,0,0,.4);
  --shadow-lg:0 16px 44px rgba(0,0,0,.5);
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--bg);
  line-height:1.5;
  overflow-x:hidden;
  cursor:default;
}
img{max-width:100%;display:block;}
a{text-decoration:none;color:inherit;}
ul{list-style:none;}
::selection{background:var(--accent);color:#0e2141;}

.container{
  max-width:1180px;
  margin:0 auto;
  padding:0 24px;
}
.container-narrow{max-width:760px;}

@media(prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:4px;
}

#conteudo, #beneficios, #depoimentos, #faq{
  scroll-margin-top:88px;
}

/* ===== Grain texture overlay ===== */
.grain{
  position:fixed;
  inset:0;
  z-index:2;
  pointer-events:none;
  opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
  /* Own compositor layer: keeps this fixed, blended overlay off the main
     thread during scroll instead of forcing a full-page repaint per frame. */
  will-change:transform;
  transform:translateZ(0);
}
/* mix-blend-mode forces the browser to repaint the layers beneath it on
   every scroll frame — the costliest kind of overlay on low-power mobile
   GPUs. Drop it there in favour of a plain low-opacity texture. */
@media (max-width:768px){
  .grain{ mix-blend-mode:normal; opacity:.025; }
}

/* ===== Scroll progress ===== */
.scroll-progress{
  position:fixed;
  top:0;left:0;
  height:2px;
  width:0%;
  background:var(--accent);
  z-index:999;
  transition:width .08s linear;
}

/* ===== Reveal ===== */
.reveal{
  opacity:0;
  transform:translateY(28px);
  filter:blur(6px);
  transition:opacity 1s var(--ease-out), transform 1s var(--ease-out), filter 1s var(--ease-out);
}
.reveal.in{opacity:1;transform:translateY(0);filter:blur(0);}

.stagger-parent.in .stagger-item{opacity:1;transform:translateY(0) scale(1);filter:blur(0);}
.stagger-item{
  opacity:0;
  transform:translateY(22px) scale(.98);
  filter:blur(4px);
  transition:opacity .8s var(--ease-out), transform .8s var(--ease-out), filter .8s var(--ease-out);
}
.stagger-item:nth-child(1){transition-delay:.04s;}
.stagger-item:nth-child(2){transition-delay:.12s;}
.stagger-item:nth-child(3){transition-delay:.2s;}
.stagger-item:nth-child(4){transition-delay:.28s;}
.stagger-item:nth-child(5){transition-delay:.36s;}
.stagger-item:nth-child(6){transition-delay:.44s;}

/* ===== Split-text word reveal (hero headline) ===== */
.split-word{
  display:inline-block;
  opacity:0;
  transform:translateY(100%) rotate(3deg);
  animation:word-in .9s var(--ease-out) forwards;
}
@keyframes word-in{
  to{opacity:1;transform:translateY(0) rotate(0);}
}

/* ===== Buttons ===== */
.btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-family:var(--sans);
  font-weight:600;
  font-size:14px;
  letter-spacing:.02em;
  border-radius:999px;
  cursor:pointer;
  border:1px solid transparent;
  transition:transform .4s var(--ease-spring), box-shadow .4s var(--ease-out), background .3s ease, border-color .3s ease;
  overflow:hidden;
  isolation:isolate;
}
.btn-lg{padding:18px 36px;width:100%;max-width:440px;}
.btn-primary{
  background:linear-gradient(100deg, var(--accent-bright) 0%, var(--accent) 100%);
  color:#161005;
  box-shadow:0 0 0 0 rgba(217,168,62,0);
}
.btn-primary::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(115deg, transparent 25%, rgba(255,255,255,.35) 50%, transparent 75%);
  transform:translateX(-130%);
  transition:transform .8s var(--ease-out);
}
.btn-primary:hover{
  transform:translateY(-3px);
  box-shadow:0 20px 40px -12px rgba(217,168,62,.35);
}
.btn-primary:hover::before{transform:translateX(130%);}
.btn-primary:active{transform:translateY(-1px) scale(.98);}
.btn-arrow{transition:transform .3s var(--ease-spring);}
.btn-primary:hover .btn-arrow{transform:translateX(4px);}

/* ===== Floating nav pill ===== */
.nav-pill{
  position:fixed;
  top:14px;
  left:50%;
  transform:translateX(-50%);
  z-index:500;
  display:flex;
  align-items:center;
  background:rgba(18,42,82,.72);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  border:1px solid rgba(217,168,62,.14);
  border-radius:999px;
  padding:6px 6px 6px 16px;
  box-shadow:0 10px 30px -12px rgba(0,0,0,.5), 0 2px 8px -2px rgba(0,0,0,.3);
  transition:box-shadow .35s ease, background .35s ease, padding .35s ease, top .35s ease, border-color .35s ease;
  max-width:calc(100vw - 24px);
}
/* A fixed element with a strong backdrop-filter is recomputed on every
   scroll frame — one of the most common causes of scroll jank on phones.
   Trim the blur radius there and lean on a more opaque background instead. */
@media (max-width:768px){
  .nav-pill{
    backdrop-filter:blur(8px) saturate(140%);
    -webkit-backdrop-filter:blur(8px) saturate(140%);
    background:rgba(18,42,82,.88);
  }
}
.nav-pill.scrolled{
  top:10px;
  background:rgba(18,42,82,.92);
  border-color:rgba(217,168,62,.22);
  box-shadow:0 16px 40px -14px rgba(0,0,0,.6), 0 4px 14px -4px rgba(0,0,0,.35);
}
.nav-brand{
  display:flex;
  align-items:center;
  gap:9px;
  padding-right:16px;
  margin-right:6px;
  border-right:1px solid rgba(217,168,62,.14);
  font-family:var(--serif);
  font-weight:700;
  font-size:.9rem;
  color:var(--ink);
  white-space:nowrap;
  flex-shrink:0;
}
.nav-mark{
  width:24px;height:24px;
  border-radius:8px;
  background:linear-gradient(135deg, #d9a83e, #9c7422);
  display:grid;
  place-items:center;
  flex-shrink:0;
}
.nav-mark svg{width:13px;height:13px;}

.nav-links{
  display:flex;
  align-items:center;
  gap:1px;
}
.nav-links a{
  padding:9px 14px;
  border-radius:999px;
  font-family:var(--sans);
  font-size:.84rem;
  font-weight:500;
  color:var(--ink-dim);
  white-space:nowrap;
  transition:background .25s ease, color .25s ease;
}
.nav-links a:hover{background:rgba(217,168,62,.12);color:var(--accent-bright);}

.nav-cta{
  margin-left:8px;
  padding:10px 20px;
  border-radius:999px;
  background:linear-gradient(100deg, #d9a83e 0%, #a67c2b 100%);
  color:#fff;
  font-family:var(--sans);
  font-size:.83rem;
  font-weight:600;
  white-space:nowrap;
  flex-shrink:0;
  transition:transform .35s var(--ease-spring), box-shadow .35s ease;
}
.nav-cta:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 28px -10px rgba(127,0,255,.55);
}
.nav-cta-short{display:none;}

@media(max-width:900px){
  .nav-links{display:none;}
  .nav-brand{border-right:none;padding-right:8px;margin-right:0;}
}
@media(max-width:480px){
  .nav-pill{padding:5px 5px 5px 10px;top:10px;}
  .nav-brand{border-right:none;padding-right:4px;margin-right:0;gap:6px;}
  .nav-mark{width:20px;height:20px;}
  .nav-mark svg{width:11px;height:11px;}
  .nav-word{font-size:.78rem;}
  .nav-cta-full{display:none;}
  .nav-cta-short{display:inline;}
  .nav-cta{padding:9px 14px;font-size:.78rem;}
}

/* ===== Header / Hero ===== */
.hero{
  position:relative;
  overflow:hidden;
  /* Static fallback for when the WebGL shader is skipped on low-end
     hardware: a gradient echoing the shader's own palette (navy → mid
     blue → bronze → gold) so the mood still reads without any GPU cost. */
  background:radial-gradient(120% 90% at 15% 15%, #213e71 0%, #16305c 32%, #0e2141 62%, #0e2141 100%);
  color:#f4f2fb;
  isolation:isolate;
  /* extra bottom padding lets the fade-out gradient below breathe
     before the next section's background takes over */
  padding-bottom:1px;
}
.hero-shader{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  z-index:0;
  pointer-events:none;
}
/* Directional scrim: darker at the edges, clearest behind the product so
   the shader reads as ambient light rather than competing content. */
.hero-scrim{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(14,33,65,.55) 0%, rgba(14,33,65,.08) 20%, rgba(14,33,65,.05) 55%, rgba(14,33,65,.82) 92%, var(--bg) 100%);
}
.hero-vignette{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:radial-gradient(60% 55% at 50% 38%, rgba(14,33,65,0) 0%, rgba(14,33,65,.35) 72%, rgba(14,33,65,.75) 100%);
}
/* ---------- Seam fix: soft gold-lit fade from shader into the page body ----------
   The canvas paints all the way to the hero's edge, so a hard color-stop
   would still read as a "cut". This band blends the shader's own tail
   colour toward --bg gradually, with a faint gold glow riding the seam
   so the transition feels designed rather than accidental. */
.hero::after{
  content:"";
  position:absolute;
  left:0;right:0;
  bottom:0;
  height:220px;
  z-index:1;
  pointer-events:none;
  background:
    radial-gradient(60% 100% at 50% 100%, rgba(217,168,62,.10), transparent 70%),
    linear-gradient(180deg, transparent 0%, var(--bg) 100%);
}

.hero-layout{
  position:relative;
  z-index:2;
  max-width:1180px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding-bottom:64px;
}
.hero-stage{
  position:relative;
  max-width:640px;
  margin:0 auto;
  padding:104px 24px 56px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}

/* ---------- Eyebrow pill ---------- */
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--sans);
  font-size:12px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.16em;
  color:var(--accent);
  opacity:0;
  animation:fade-in .6s .1s var(--ease-out) forwards;
}
.eyebrow-line{width:28px;height:1px;background:var(--accent-deep);}
@keyframes fade-in{to{opacity:1;}}

.hero-pill{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:8px 18px 8px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(244,242,251,.05);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  font-family:var(--sans);
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(230,224,255,.78);
  opacity:0;
  animation:fade-in .6s .1s var(--ease-out) forwards;
}
.hero-pill-dot{
  width:5px;height:5px;
  border-radius:50%;
  background:#eec564;
  box-shadow:0 0 10px 3px rgba(201,168,255,.85);
  flex-shrink:0;
}

#heroTitle{
  margin-top:14px;
  font-family:var(--serif);
  font-weight:700;
  font-size:2.1rem;
  line-height:1.14;
  letter-spacing:-.025em;
  overflow:hidden;
  overflow-wrap:break-word;
  color:#fdfcff;
  max-width:min(15ch, 100%);
  text-align:center;
}
#heroTitle em{
  font-style:normal;
  font-weight:800;
  background:linear-gradient(100deg, #eec564 0%, #d9a83e 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* ---------- Ambient sparks (quiet, sparse — not a focal element) ---------- */
.hero-spark{
  position:absolute;
  z-index:1;
  width:4px;height:4px;
  border-radius:50%;
  background:rgba(201,168,255,.8);
  box-shadow:0 0 12px 3px rgba(201,168,255,.5);
  opacity:0;
  animation:spark-in 1.6s var(--ease-out) forwards, spark-drift 7s ease-in-out infinite;
  pointer-events:none;
}
.hero-spark-a{top:16%;left:14%;animation-delay:.4s,.4s;}
.hero-spark-b{top:26%;right:12%;width:3px;height:3px;background:rgba(143,216,255,.85);box-shadow:0 0 10px 3px rgba(143,216,255,.5);animation-delay:.8s,.8s;}
.hero-spark-c{bottom:20%;left:16%;width:3px;height:3px;animation-delay:1.2s,1.2s;}
@keyframes spark-in{to{opacity:1;}}
@keyframes spark-drift{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-10px);}
}
@media(max-width:768px){
  .hero-spark{display:none;}
}

/* ---------- Sub + offer ---------- */
.hero-sub{
  margin-top:14px;
  color:rgba(230,226,247,.72);
  font-size:1.02rem;
  line-height:1.6;
  max-width:min(38ch, 100%);
  opacity:0;
  animation:fade-up .8s .3s var(--ease-out) forwards;
}
@keyframes fade-up{
  from{opacity:0;transform:translateY(12px);}
  to{opacity:1;transform:translateY(0);}
}

.hero-offer{
  margin-top:22px;
  display:flex;
  flex-direction:column;
  align-items:center;
  opacity:0;
  animation:fade-up .8s .7s var(--ease-out) forwards;
}
.hero-offer .hero-cta:first-child{
  margin-top:0;
}
.hero-offer-price{
  display:flex;
  align-items:baseline;
  gap:12px;
}
.hero-price-old{
  font-size:1rem;
  color:rgba(230,226,247,.4);
  text-decoration:line-through;
}
.hero-price-new{
  font-family:var(--serif);
  font-weight:800;
  font-size:2.5rem;
  letter-spacing:-.02em;
  background:linear-gradient(100deg, #f4f1e8 10%, #eec564 35%, #fff2cf 50%, #eec564 65%, #f4f1e8 90%);
  background-size:220% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:price-shimmer 5s ease-in-out 1.4s infinite;
}
@keyframes price-shimmer{
  0%,100%{background-position:0% 0;}
  50%{background-position:100% 0;}
}
@media(prefers-reduced-motion: reduce){
  .hero-price-new{animation:none;}
}

.hero-cta{
  margin-top:16px;
  width:auto;
  max-width:none;
  padding:17px 34px;
  font-size:1rem;
  color:#161005;
  background:linear-gradient(100deg, #eec564 0%, #d9a83e 100%);
  box-shadow:0 22px 48px -16px rgba(217,168,62,.55);
  position:relative;
  animation:cta-breathe 3.2s ease-in-out .9s infinite;
}
@keyframes cta-breathe{
  0%,100%{box-shadow:0 22px 48px -16px rgba(217,168,62,.55);}
  50%{box-shadow:0 24px 56px -14px rgba(217,168,62,.85);}
}
@media(prefers-reduced-motion: reduce){
  .hero-cta{animation:none;}
}
.hero-cta::after{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(100deg, rgba(255,255,255,.5), transparent 40%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none;
}
.hero-cta:hover{
  box-shadow:0 28px 60px -14px rgba(127,0,255,.78);
}

.hero-trust{
  margin-top:18px;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px 18px;
}
.hero-trust li{
  position:relative;
  padding-left:16px;
  font-size:.82rem;
  color:rgba(230,226,247,.6);
}
.hero-trust li::before{
  content:"";
  position:absolute;
  left:0;top:50%;
  width:7px;height:7px;
  transform:translateY(-50%);
  border-radius:50%;
  background:rgba(143,216,255,.5);
  box-shadow:0 0 6px 1px rgba(143,216,255,.4);
}

.hero-timer-note{
  margin-top:14px;
  font-size:.78rem;
  color:rgba(230,226,247,.45);
}
.timer-inline{
  font-variant-numeric:tabular-nums;
  font-weight:700;
  color:rgba(230,226,247,.75);
  letter-spacing:.01em;
}
.timer-inline span.tick{animation:tick-pulse .4s var(--ease-spring);display:inline-block;}

/* ---------- Social proof: same readers as the testimonials below ---------- */
.hero-social{
  margin-top:24px;
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding:8px 8px 8px 8px;
  border-radius:999px;
  opacity:0;
  transition:background .3s ease;
  animation:fade-up .8s .85s var(--ease-out) forwards;
}
.hero-social:hover{background:rgba(244,242,251,.05);}
.hero-avatars{
  display:flex;
}
.hero-avatar{
  width:26px;height:26px;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-family:var(--sans);
  font-size:.62rem;
  font-weight:700;
  color:#fff;
  border:2px solid #0e2141;
  margin-left:-8px;
}
.hero-avatar:first-child{margin-left:0;}
.hero-social-text{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:.8rem;
  color:rgba(230,226,247,.62);
}
.hero-stars{color:#eec564;letter-spacing:1px;font-size:.7rem;}

@media(max-width:480px){
  .hero-layout{padding-top:84px;padding-bottom:40px;}
  #heroTitle{font-size:1.8rem;max-width:14ch;}
  .hero-sub{margin-top:12px;font-size:.96rem;}
  .hero-offer{margin-top:18px;}
  .hero-trust{margin-top:14px;gap:6px 14px;}
  .hero-timer-note{margin-top:10px;}
  .hero-social{margin-top:16px;}
  .hero-social-text{flex-direction:column;align-items:flex-start;gap:2px;}
  .offer-card{padding:32px 20px;}
  .price-new{font-size:2.6rem;}
  .timer-box{padding:10px 16px;min-width:70px;}
  .timer-box span{font-size:1.7rem;}
  .secure-row{gap:8px 14px;}
  .offer-timer-label{margin-top:14px;}
  .timer{margin:12px 0 20px;}
  .price-label{margin-top:8px;}
  .price-new{margin-top:2px;}
  .price-detail{margin:12px 0 22px;}
  .secure-row{margin-top:18px;}
}

/* ---------- Hero visual: the book, staged inside the design ----------
   The cover is a cutout PNG/WebP, but it never reads as a "pasted"
   image: a radial gold glow ties it to the shader behind it, a soft
   contact shadow grounds it, a thin orbiting ring echoes the book's
   own circular icon, and a slow float + tilt keeps it alive rather
   than static. Sizes are fixed px (not %/aspect-ratio) so the stack
   stays put across renderers. */
.hero-visual{
  position:relative;
  width:260px;
  height:300px;
  max-width:100%;
  margin:0 auto;
}
.hero-visual-glow{
  position:absolute;
  top:-10px;
  left:50%;
  width:280px;
  height:280px;
  margin-left:-140px;
  border-radius:50%;
  background:radial-gradient(closest-side, rgba(217,168,62,.32), rgba(217,168,62,.1) 55%, transparent 78%);
  filter:blur(6px);
  pointer-events:none;
  z-index:0;
  opacity:0;
  animation:fade-in 1.4s .3s var(--ease-out) forwards;
}
.hero-visual-ring{
  position:absolute;
  top:50%;
  left:50%;
  width:200px;
  height:200px;
  margin:-100px 0 0 -100px;
  border-radius:50%;
  border:1px solid rgba(217,168,62,.22);
  pointer-events:none;
  z-index:0;
  animation:ring-spin 30s linear infinite;
}
.hero-visual-ring::before{
  content:"";
  position:absolute;
  top:-2.5px;
  left:50%;
  width:5px;height:5px;
  margin-left:-2.5px;
  border-radius:50%;
  background:#eec564;
  box-shadow:0 0 10px 3px rgba(238,197,100,.7);
}
@keyframes ring-spin{to{transform:translate(0,0) rotate(360deg);}}

.hero-book{
  position:absolute;
  top:50%;
  left:50%;
  z-index:1;
  width:210px;
  height:auto;
  margin-left:-105px;
  margin-top:-160px;
  filter:drop-shadow(0 30px 40px rgba(0,0,0,.45)) drop-shadow(0 4px 14px rgba(217,168,62,.18));
  opacity:0;
  animation:book-in 1s .5s var(--ease-out) forwards, book-float 6s 1.5s ease-in-out infinite;
  transform-origin:50% 85%;
}
@keyframes book-in{
  from{opacity:0;transform:translateY(24px) rotate(-1.1deg);}
  to{opacity:1;transform:translateY(0) rotate(-1.1deg);}
}
@keyframes book-float{
  0%,100%{transform:translateY(0) rotate(-1.1deg);}
  50%{transform:translateY(-7px) rotate(-.2deg);}
}
@media(max-width:639px){
  @keyframes book-float{
    0%,100%{transform:translateY(0) rotate(-1.1deg);}
    50%{transform:translateY(-4px) rotate(-.6deg);}
  }
}
.hero-visual-shadow{
  position:absolute;
  bottom:6px;
  left:50%;
  width:150px;
  height:22px;
  margin-left:-75px;
  background:radial-gradient(closest-side, rgba(0,0,0,.55), transparent 75%);
  filter:blur(3px);
  z-index:0;
  animation:shadow-pulse 6s ease-in-out infinite;
}
@keyframes shadow-pulse{
  0%,100%{opacity:1;transform:scale(1);}
  50%{opacity:.72;transform:scale(.88);}
}
.hero-visual-badge{
  position:absolute;
  bottom:36px;
  right:-6px;
  z-index:2;
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:9px 14px 9px 11px;
  border-radius:999px;
  background:rgba(18,42,82,.85);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(217,168,62,.3);
  box-shadow:0 12px 28px -10px rgba(0,0,0,.5);
  font-family:var(--sans);
  font-size:.7rem;
  font-weight:600;
  color:var(--ink);
  white-space:nowrap;
  animation:badge-in .7s 1.4s var(--ease-spring) both, book-float 6s ease-in-out infinite;
}
.hero-visual-badge svg{width:14px;height:14px;color:#eec564;flex-shrink:0;}
@keyframes badge-in{
  from{opacity:0;transform:scale(.7) translateY(8px);}
  to{opacity:1;transform:scale(1) translateY(0);}
}
/* Compact book sizing for the reordered mobile layout (book placed
   inline after the headline, see .hero-stage display:contents above).
   Placed here, after the base .hero-visual/.hero-book rules, so it
   actually wins the cascade at this width instead of being silently
   overridden by them. */
@media(max-width:759px){
  .hero-visual{width:190px;height:220px;}
  .hero-visual-glow{width:220px;height:220px;margin-left:-110px;top:-4px;}
  .hero-visual-ring{width:150px;height:150px;margin:-75px 0 0 -75px;}
  .hero-book{width:150px;margin-left:-75px;margin-top:-118px;}
  .hero-visual-shadow{width:110px;margin-left:-55px;bottom:6px;}
  .hero-visual-badge{font-size:.6rem;padding:7px 11px 7px 9px;bottom:16px;right:-4px;}
  .hero-visual-badge svg{width:11px;height:11px;}
}
@media(max-width:374px){
  .hero-visual{width:150px;height:175px;}
  .hero-book{width:120px;margin-left:-60px;margin-top:-94px;}
  .hero-visual-glow{width:170px;height:170px;margin-left:-85px;}
  .hero-visual-ring{width:118px;height:118px;margin:-59px 0 0 -59px;}
  .hero-visual-badge{font-size:.54rem;padding:6px 9px 6px 7px;right:-6px;bottom:10px;}
  .hero-visual-badge svg{width:10px;height:10px;}
}
@media(prefers-reduced-motion: reduce){
  .hero-book{animation:book-in 1s .5s var(--ease-out) forwards;}
  .hero-visual-badge{animation:badge-in .7s 1.4s var(--ease-spring) both;}
  .hero-visual-shadow,.hero-visual-ring{animation:none;}
}
/* Trim the continuous float/spin/pulse loops on mobile to cut down on the
   animation stack running alongside the shader and marquee — but keep each
   element's entrance animation (book-in, badge-in), or the element sits at
   opacity:0 forever since that's the animation that fades it in. */
@media(max-width:768px){
  .hero-book{animation:book-in 1s .5s var(--ease-out) forwards;}
  .hero-visual-badge{animation:badge-in .7s 1.4s var(--ease-spring) both;}
  .hero-visual-shadow,.hero-visual-ring{animation:none;}
}

/* ---------- Focus & motion ---------- */
.hero-cta:focus-visible{
  outline:2px solid #eec564;
  outline-offset:3px;
}

@media(min-width:640px){
  .hero-stage{padding:132px 24px 60px;}
  #heroTitle{font-size:2.85rem;max-width:17ch;}
  .hero-price-new{font-size:2.9rem;}
}
@media(min-width:760px){
  .hero-layout{
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:center;
    gap:20px;
    text-align:left;
    padding:0 24px 0;
  }
  .hero-stage{
    width:auto;
    flex:1 1 380px;
    max-width:460px;
    margin:0;
    padding:96px 0 48px 0;
    align-items:flex-start;
    text-align:left;
  }
  #heroTitle{font-size:2.15rem;max-width:14ch;text-align:left;}
  .hero-sub{font-size:.95rem;text-align:left;max-width:34ch;}
  .hero-offer{align-items:flex-start;}
  .hero-trust{justify-content:flex-start;}
  .hero-social{margin-left:0;}
  .hero-cta{padding:15px 28px;font-size:.92rem;}
  .hero-visual{
    width:230px;
    height:280px;
    flex:0 0 230px;
    margin:70px 0 0 0;
  }
  .hero-visual-glow{width:280px;height:280px;margin-left:-140px;top:0;}
  .hero-visual-ring{width:190px;height:190px;margin:-95px 0 0 -95px;}
  .hero-book{width:190px;margin-left:-95px;top:50%;margin-top:-148px;}
  .hero-visual-shadow{width:140px;margin-left:-70px;bottom:10px;}
  .hero-visual-badge{font-size:.64rem;padding:8px 12px 8px 10px;bottom:26px;}
  .hero-visual-badge svg{width:12px;height:12px;}
}
@media(min-width:960px){
  .hero-layout{
    gap:24px;
  }
  .hero-stage{
    width:600px;
    flex:0 0 600px;
    max-width:600px;
    padding:110px 0 60px 0;
    align-items:flex-start;
  }
  #heroTitle{font-size:2.7rem;max-width:15ch;}
  .hero-sub{font-size:1.05rem;max-width:none;}
  .hero-cta{padding:17px 34px;font-size:1rem;}
  .hero-visual{
    width:320px;
    height:420px;
    flex:0 0 320px;
    margin:100px 0 0 0;
  }
  .hero-visual-glow{width:400px;height:400px;margin-left:-200px;top:10px;}
  .hero-visual-ring{width:250px;height:250px;margin:-125px 0 0 -125px;}
  .hero-book{width:260px;margin-left:-130px;top:50%;margin-top:-198px;}
  .hero-visual-shadow{width:180px;margin-left:-90px;bottom:20px;}
  .hero-visual-badge{font-size:.7rem;padding:9px 14px 9px 11px;bottom:36px;}
  .hero-visual-badge svg{width:14px;height:14px;}
}


/* ===== Sections ===== */
.section{padding:96px 0;}
.section-alt{background:var(--bg-elevated);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.section-head{margin-bottom:56px;text-align:center;}
.section-head .eyebrow{animation:none;opacity:1;}
.section-head h2{
  margin-top:16px;
  font-family:var(--serif);
  font-weight:600;
  font-size:2rem;
  line-height:1.15;
  letter-spacing:-.01em;
  max-width:640px;
  margin-left:auto;
  margin-right:auto;
}
@media(min-width:768px){
  .section-head h2{font-size:2.6rem;}
}
@media(min-width:768px){
  .section-head{text-align:left;}
  .section-head h2{margin-left:0;margin-right:0;}
}
@media(max-width:480px){
  .section{padding:72px 0 64px;}
  .section-head{margin-bottom:32px;}
}
@media(min-width:640px) and (max-width:1023px){
  .section{padding:76px 0;}
}

/* ===== Feature Cards ===== */
.grid-2{
  display:grid;
  gap:1px;
  grid-template-columns:1fr;
  background:var(--line);
  border:1px solid var(--line);
}
@media(min-width:640px){
  .grid-2{grid-template-columns:1fr 1fr;}
}
.feature-card{
  background:var(--bg);
  padding:40px 36px;
  transition:background .4s ease;
  position:relative;
}
.feature-card:hover{background:var(--bg-card);}
.feature-index{
  font-family:var(--serif);
  font-size:.85rem;
  color:var(--accent);
  letter-spacing:.05em;
}
.feature-card h3{
  margin-top:18px;
  font-family:var(--serif);
  font-size:1.4rem;
  font-weight:600;
  letter-spacing:-.005em;
}
.feature-card p{margin-top:10px;color:var(--ink-dim);font-size:.95rem;line-height:1.6;}
.feature-highlight{color:var(--ink);font-weight:600;margin-top:14px;font-size:.95rem;}
.feature-note{margin-top:6px;}
.tag-row{margin-top:20px;display:flex;flex-wrap:wrap;gap:8px;}
.tag{
  border:1px solid var(--line-strong);
  color:var(--ink-dim);
  font-size:.72rem;
  font-weight:500;
  padding:6px 13px;
  border-radius:999px;
  transition:border-color .25s ease, color .25s ease;
}
.tag:hover{border-color:var(--accent-deep);color:var(--accent);}
.dot-list{margin-top:14px;}
.dot-list li{
  position:relative;
  padding-left:20px;
  color:var(--ink-dim);
  font-size:.92rem;
  margin-bottom:8px;
}
.dot-list li::before{
  content:"";
  position:absolute;left:0;top:9px;
  width:5px;height:5px;
  border-radius:50%;
  background:var(--accent);
}

/* ===== Benefit Cards ===== */
.grid-3{
  display:grid;
  gap:1px;
  grid-template-columns:1fr;
  background:var(--line);
  border:1px solid var(--line);
}
@media(min-width:640px){
  .grid-3{grid-template-columns:repeat(3,1fr);}
}
.benefit-grid-full{
  margin-top:40px;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:8px;
}
@media(min-width:420px){
  .benefit-grid-full{gap:10px;}
}
@media(min-width:560px){
  .benefit-grid-full{grid-template-columns:repeat(2,1fr);gap:14px;margin-top:56px;}
}
@media(min-width:820px){
  .benefit-grid-full{grid-template-columns:repeat(3,1fr);gap:16px;}
}
.benefit-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:10px;
  padding:14px;
  background:var(--bg-card);
  border:1px solid var(--line);
  border-left:2px solid var(--accent-deep);
  border-radius:12px;
  transition:border-color .3s ease, transform .3s var(--ease-out), background .3s ease;
}
@media(min-width:560px){
  .benefit-item{flex-direction:row;align-items:center;text-align:left;gap:16px;padding:20px 22px;border-radius:14px;}
}
.benefit-item:hover{
  border-color:var(--accent-deep);
  border-left-color:var(--accent-bright);
  background:var(--bg-elevated);
  transform:translateY(-2px);
}
.benefit-icon{
  flex-shrink:0;
  width:32px;height:32px;
  display:grid;
  place-items:center;
  border-radius:9px;
  background:linear-gradient(145deg, var(--accent-bright), var(--accent-deep));
  color:#161005;
}
@media(min-width:560px){
  .benefit-icon{width:42px;height:42px;border-radius:10px;}
}
.benefit-icon svg{display:block;width:15px;height:15px;}
@media(min-width:560px){
  .benefit-icon svg{width:20px;height:20px;}
}
.benefit-item p{
  font-size:.82rem;
  font-weight:500;
  color:var(--ink);
  line-height:1.3;
}
@media(min-width:560px){
  .benefit-item p{font-size:.92rem;}
}

.quote{
  margin-top:64px;
  font-family:"Playfair Display",Georgia,serif;
  font-style:italic;
  font-size:1.55rem;
  font-weight:600;
  line-height:1.5;
  color:var(--ink);
  max-width:720px;
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}

/* ===== Offer ===== */
.offer-section{background:var(--bg);position:relative;overflow:hidden;padding-bottom:56px;}
.offer-glow{
  position:absolute;
  top:50%;left:50%;
  width:800px;height:800px;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(217,168,62,.08), transparent 65%);
  pointer-events:none;
}
.offer-card{
  max-width:520px;
  margin:0 auto;
  text-align:center;
  background:var(--bg-card);
  border:1px solid var(--line-strong);
  border-radius:20px;
  padding:56px 32px;
  position:relative;
  box-shadow:var(--shadow-lg);
}
.offer-card .eyebrow{justify-content:center;opacity:1;animation:none;}
.offer-timer-label{margin-top:24px;color:var(--ink-muted);font-size:.88rem;}
.timer{
  display:flex;
  justify-content:center;
  gap:14px;
  margin:20px 0 32px;
}
.timer-box{
  background:var(--bg-elevated);
  border:1px solid var(--line-strong);
  border-radius:10px;
  padding:16px 24px;
  min-width:84px;
}
.timer-box span{
  display:block;font-family:var(--serif);font-size:2.1rem;font-weight:600;color:var(--accent);
  font-variant-numeric:tabular-nums;
  transition:transform .3s var(--ease-spring);
}
.timer-box span.tick{animation:tick-pulse .4s var(--ease-spring);}
@keyframes tick-pulse{
  0%{transform:scale(1);}
  45%{transform:scale(1.15);}
  100%{transform:scale(1);}
}
.timer-box small{font-size:.68rem;color:var(--ink-muted);text-transform:uppercase;letter-spacing:.08em;}
#depoimentos{padding-top:56px;}
.price-old{color:var(--ink-muted);font-size:1rem;}
.price-old span{text-decoration:line-through;}
.price-label{margin-top:12px;font-size:.88rem;color:var(--ink-dim);}
.price-new{
  font-family:var(--serif);
  font-size:3.4rem;font-weight:600;color:var(--accent);margin-top:6px;
  letter-spacing:-.01em;
}
.price-detail{margin:18px 0 32px;color:var(--ink-dim);font-size:.85rem;line-height:1.6;}
.secure-row{
  margin-top:28px;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:20px;
  font-size:.78rem;
  color:var(--ink-muted);
}

/* ===== Testimonials ===== */
.testimonial-card{
  display:flex;
  flex-direction:column;
  background:var(--bg-elevated);
  padding:32px 28px;
  transition:background .35s ease, transform .3s ease, box-shadow .3s ease;
  flex-shrink:0;
  width:340px;
  max-width:82vw;
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
}
@media(max-width:480px){
  .testimonial-card{width:280px;max-width:78vw;padding:26px 22px;}
  .testimonial-text{font-size:.95rem;}
}
.testimonial-card:hover{background:var(--bg-card);transform:translateY(-2px);box-shadow:var(--shadow-md);}
.testimonial-text{
  font-family:var(--serif);
  color:var(--ink);
  font-size:1.05rem;
  font-style:italic;
  line-height:1.55;
  flex:1;
  display:-webkit-box;
  -webkit-line-clamp:4;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.testimonial-foot{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:24px;
  padding-top:18px;
  border-top:1px solid var(--line);
}
.avatar{
  width:38px;height:38px;
  border-radius:50%;
  object-fit:cover;
  flex-shrink:0;
  filter:grayscale(1);
  transition:filter .3s ease;
}
.testimonial-card:hover .avatar{filter:grayscale(0);}
.avatar-initials{
  display:grid;
  place-items:center;
  font-family:var(--sans);
  font-weight:700;
  font-size:.8rem;
  color:#ffffff;
  filter:none;
}
.testimonial-card:hover .avatar-initials{filter:none;}
.stars{color:var(--accent);letter-spacing:1px;font-size:.75rem;margin-top:2px;}
.testimonial-name{font-weight:600;font-size:.85rem;}

/* ===== Testimonial Marquee ===== */
.marquee-wrap{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:20px;
  overflow:hidden;
}
.marquee-row{
  overflow:hidden;
}
.marquee-track{
  display:flex;
  gap:20px;
  width:max-content;
  /* Plain CSS animation: always scrolling at the same slow speed, never
     paused or sped up by hover/touch. This runs on the compositor thread
     (GPU), which is cheaper than driving translateX from JS every frame. */
  animation:marquee-scroll 42s linear infinite;
  will-change:transform;
}
.marquee-track.marquee-reverse{
  animation-direction:reverse;
}
@media(max-width:768px){
  .marquee-track{animation-duration:62s;}
}
@keyframes marquee-scroll{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}
@media(prefers-reduced-motion: reduce){
  .marquee-track{animation:none;}
}
.marquee-fade{
  position:absolute;
  top:0;bottom:0;
  width:6%;
  min-width:16px;
  max-width:40px;
  pointer-events:none;
  z-index:2;
}
@media(max-width:480px){
  .marquee-fade{width:4%;min-width:10px;max-width:18px;}
}
.marquee-fade-left{
  left:0;
  background:linear-gradient(90deg, var(--bg) 0%, transparent 100%);
}
.marquee-fade-right{
  right:0;
  background:linear-gradient(270deg, var(--bg) 0%, transparent 100%);
}

/* ===== Guarantee ===== */
.guarantee-card{
  max-width:680px;
  padding:0;
}
.guarantee-ico{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:52px;height:52px;
  border-radius:50%;
  border:1px solid var(--accent-deep);
  color:var(--accent);
  margin-bottom:24px;
}
.guarantee-card h2{
  font-family:var(--serif);
  font-size:1.9rem;font-weight:600;margin-bottom:18px;letter-spacing:-.01em;
}
.guarantee-card p{color:var(--ink-dim);font-size:1rem;line-height:1.65;}
.guarantee-strong{margin-top:16px;font-weight:600;color:var(--ink);font-size:1.05rem;}

/* ===== FAQ Accordion ===== */
.accordion{display:flex;flex-direction:column;}
.accordion-item{
  border-bottom:1px solid var(--line);
  transition:background .3s ease;
}
.accordion-item:first-child{border-top:1px solid var(--line);}
.accordion-item.open{background:var(--bg-elevated);}
.accordion-trigger{
  width:100%;
  background:none;
  border:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:24px 4px;
  font-family:var(--serif);
  font-size:1.1rem;
  font-weight:500;
  text-align:left;
  cursor:pointer;
  color:var(--ink);
}
.chevron{
  flex-shrink:0;
  width:28px;height:28px;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:1px solid var(--line-strong);
  transition:transform .4s var(--ease-spring), border-color .3s ease, background .3s ease;
  font-family:var(--sans);
  color:var(--ink-dim);
}
.accordion-item.open .chevron{transform:rotate(135deg);border-color:var(--accent);background:var(--accent);color:#161005;}
.accordion-content{
  max-height:0;
  overflow:hidden;
  transition:max-height .45s var(--ease-out);
}
.accordion-content p{
  padding:0 4px 26px;
  color:var(--ink-dim);
  font-size:.95rem;
  line-height:1.65;
  max-width:640px;
}
.faq-cta{margin-top:52px;}

/* ===== Footer ===== */
.footer{
  background:var(--bg);
  color:var(--ink-muted);
  padding:56px 0 28px;
  border-top:1px solid var(--line);
}
.footer-grid{
  display:flex;
  flex-direction:column;
  gap:28px;
  justify-content:space-between;
  align-items:flex-start;
}
.footer-grid h3{font-family:var(--serif);color:var(--ink);font-size:1.2rem;font-weight:600;}
.footer-grid p{font-size:.85rem;margin-top:6px;}
.footer-author{color:var(--accent);}
.footer-links{display:flex;gap:24px;flex-wrap:wrap;font-size:.85rem;}
.footer-links a{position:relative;transition:color .25s ease;}
.footer-links a::after{
  content:"";
  position:absolute;left:0;bottom:-3px;
  width:0;height:1px;
  background:var(--accent);
  transition:width .3s var(--ease-out);
}
.footer-links a:hover{color:var(--ink);}
.footer-links a:hover::after{width:100%;}
.footer-copy{
  font-size:.75rem;
  color:var(--ink-muted);
  margin-top:40px;
  padding-top:24px;
  border-top:1px solid var(--line);
}
@media(min-width:640px){
  .footer-grid{flex-direction:row;}
}
/* ===== Mobile hero reorder (kept at end of file on purpose) =====
   Places the book between the headline and subtitle instead of after
   the whole text block. Declared last so it always wins the cascade
   against the base .hero-stage / .hero-sub / .hero-pill rules earlier
   in this file — those rules are unscoped, so an earlier media query
   with equal specificity would otherwise lose to them. */
@media(max-width:759px){
  .hero-stage{
    display:contents;
  }
  .hero-layout{padding-top:104px;padding-bottom:56px;}
  .hero-pill{order:1;}
  #heroTitle{order:2;max-width:none;width:100%;box-sizing:border-box;padding:0 24px;}
  .hero-visual{order:3;margin-top:28px;}
  .hero-sub{order:4;max-width:none;width:100%;box-sizing:border-box;padding:0 24px;margin-top:24px;}
  .hero-offer{order:5;width:100%;box-sizing:border-box;padding:0 24px;margin-top:22px;}
  .hero-social{order:6;}
}