/* ============================================================
   Escobary — Agente de IA · Design tokens & base
   ============================================================ */
:root{
  --bg:#F7F8FC;
  --bg-2:#FFFFFF;
  --bg-3:#EEF1F8;
  --surface:#FFFFFF;
  --surface-2:#F2F4FA;
  --border:rgba(15,23,42,.09);
  --border-strong:rgba(15,23,42,.16);
  --primary:#4F7BFF;
  --secondary:#6D5BFF;
  --accent:#0D9488;
  --glow-blue:#6AA8FF;
  --glow-purple:#8B6CFF;
  --text:#12141C;
  --muted:#5B6472;
  --dim:#78818F;
  --wa:#25D366;

  --grad-brand:linear-gradient(135deg,var(--primary),var(--secondary));
  --grad-accent:linear-gradient(135deg,var(--accent),var(--glow-blue));
  --grad-text:linear-gradient(100deg,var(--text) 10%,var(--primary) 45%,var(--accent) 80%);

  --r-lg:28px; --r-md:18px; --r-sm:12px; --r-xs:8px;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-soft:cubic-bezier(.22,.61,.36,1);
  --container:1180px;
}

*{box-sizing:border-box}
html{background:var(--bg); scroll-behavior:auto}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
h1,h2,h3,h4{font-family:'Space Grotesk',sans-serif; margin:0; letter-spacing:-.02em; text-wrap:balance}
p{margin:0}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
button{font-family:inherit}
::selection{background:var(--accent); color:#fff}

.container{max-width:var(--container); margin:0 auto; padding:0 28px}
@media (max-width:640px){ .container{padding:0 20px} }

.mono{font-family:'Space Grotesk',monospace; font-variant-numeric:tabular-nums}

/* focus */
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible{
  outline:2px solid var(--accent); outline-offset:3px; border-radius:4px;
}

/* reduced motion baseline — exceto o carrossel de logos e o hero 3D
   (movimento puramente decorativo, faz parte da identidade visual,
   não é o tipo de animação grande/brusca que motion sickness evita) */
@media (prefers-reduced-motion: reduce){
  *:not(.marquee-track){animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important}
}

/* ---------------------------------------------------------------
   background fabric — grid + noise + ambient glow, lives behind everything
--------------------------------------------------------------- */
.bg-fabric{position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden}
.bg-fabric .grid{
  position:absolute; inset:-10% -10%;
  background-image:
    linear-gradient(rgba(15,23,42,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,23,42,.045) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 70% 55% at 50% 0%, #000 40%, transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 70% 55% at 50% 0%, #000 40%, transparent 78%);
}
.bg-fabric .glow{position:absolute; border-radius:50%; filter:blur(90px); opacity:.16}
.bg-fabric .glow-a{width:640px; height:640px; top:-220px; left:-160px; background:var(--glow-purple)}
.bg-fabric .glow-b{width:560px; height:560px; top:12%; right:-200px; background:var(--primary); opacity:.13}
.bg-fabric .glow-c{width:520px; height:520px; bottom:-10%; left:22%; background:var(--accent); opacity:.09}
.bg-fabric .noise{
  position:absolute; inset:0; opacity:.02; mix-blend-mode:multiply;
  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.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------
   cursor glow (desktop only, decorative)
--------------------------------------------------------------- */
.cursor-glow{
  position:fixed; width:420px; height:420px; border-radius:50%; z-index:1; pointer-events:none;
  background:radial-gradient(circle, rgba(79,123,255,.10), transparent 70%);
  transform:translate(-50%,-50%); left:0; top:0; will-change:transform; opacity:0; transition:opacity .4s;
}
.cursor-glow.on{opacity:1}
@media (pointer:coarse), (prefers-reduced-motion: reduce){ .cursor-glow{display:none} }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:20px 0; transition:padding .35s var(--ease-out), background .35s, border-color .35s, backdrop-filter .35s;
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  padding:13px 0; background:rgba(247,248,252,.78); backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%); border-bottom-color:var(--border);
}
.nav .container{display:flex; align-items:center; justify-content:space-between; gap:20px}
.brand{display:flex; align-items:center; gap:10px; font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:17px; color:var(--text)}
.brand img{width:28px; height:28px; border-radius:8px}
.brand .sub{color:var(--dim); font-weight:400; font-size:13px; padding-left:9px; margin-left:1px; border-left:1px solid var(--border-strong)}
.nav-links{display:flex; align-items:center; gap:34px; list-style:none; margin:0; padding:0}
.nav-links a{font-size:14px; color:var(--muted); font-weight:500; position:relative; padding:4px 0; transition:color .2s}
.nav-links a::after{content:"";position:absolute; left:0; right:100%; bottom:-2px; height:1px; background:var(--grad-accent); transition:right .28s var(--ease-out)}
.nav-links a:hover{color:var(--text)}
.nav-links a:hover::after{right:0}
.nav-actions{display:flex; align-items:center; gap:14px}
.nav-login{font-size:13.5px; font-weight:600; color:var(--muted); transition:color .2s}
.nav-login:hover{color:var(--text)}
.nav-burger{display:none; width:38px; height:38px; border-radius:10px; border:1px solid var(--border); background:var(--surface); align-items:center; justify-content:center; cursor:pointer}
.nav-burger span, .nav-burger span::before, .nav-burger span::after{content:"";display:block; width:16px; height:1.5px; background:var(--text); position:relative; transition:transform .25s}
.nav-burger span::before{position:absolute; top:-5px}
.nav-burger span::after{position:absolute; top:5px}

.mobile-panel{
  position:fixed; inset:0; z-index:99; background:rgba(255,255,255,.98); backdrop-filter:blur(10px);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:26px;
  opacity:0; pointer-events:none; transition:opacity .3s var(--ease-out);
}
.mobile-panel.open{opacity:1; pointer-events:auto}
.mobile-panel a{font-family:'Space Grotesk',sans-serif; font-size:26px; font-weight:600; color:var(--text)}
.mobile-panel a.muted{font-size:15px; color:var(--muted); font-family:'Inter',sans-serif; font-weight:500}

@media (max-width:900px){
  .nav-links{display:none}
  .nav-login{display:none}
  .nav-burger{display:flex}
  .nav-actions > .btn{display:none}
}
@media (max-width:480px){
  .brand .sub{display:none}
}

/* ============================================================
   BUTTONS / BADGES
   ============================================================ */
.eyebrow{
  display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; color:var(--muted);
  background:var(--surface); border:1px solid var(--border); padding:7px 15px 7px 11px; border-radius:99px;
}
.eyebrow .dot{width:6px; height:6px; border-radius:50%; background:var(--accent); box-shadow:0 0 10px rgba(13,148,136,.4)}

.btn{
  --pad-y:14px; --pad-x:26px;
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-weight:600; font-size:15px; padding:var(--pad-y) var(--pad-x); border-radius:13px;
  border:none; cursor:pointer; overflow:hidden; isolation:isolate; white-space:nowrap;
  transition:transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.btn-primary{color:#fff; background:var(--grad-brand); background-size:180% 180%; box-shadow:0 16px 32px -14px rgba(79,123,255,.55)}
.btn-primary::before{
  content:""; position:absolute; inset:0; z-index:-1; opacity:0; background:var(--grad-accent);
  transition:opacity .35s;
}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 20px 44px -14px rgba(79,123,255,.6)}
.btn-primary:hover::before{opacity:1}
.btn-primary span{position:relative; z-index:1}
.btn-secondary{
  color:var(--text); background:var(--surface); border:1px solid var(--border-strong);
  backdrop-filter:blur(6px);
}
.btn-secondary:hover{background:var(--surface-2); transform:translateY(-2px); border-color:rgba(15,23,42,.28)}
.btn-secondary .ic{display:inline-flex; transition:transform .3s var(--ease-out)}
.btn-secondary:hover .ic{transform:translateX(3px)}
.ic svg{width:15px; height:15px}
.btn-block{width:100%}
.btn-lg{--pad-y:17px; --pad-x:32px; font-size:16px; border-radius:15px}

/* ============================================================
   SECTION SCAFFOLDING
   ============================================================ */
section{position:relative; z-index:1}
.section{padding:120px 0}
@media (max-width:760px){ .section{padding:76px 0} }
.section-head{max-width:640px; margin:0 0 56px}
.section-head.center{margin-left:auto; margin-right:auto; text-align:center}
.section-head h2{font-size:clamp(28px,4vw,44px); font-weight:600; margin:18px 0 16px; line-height:1.12}
.section-head p{color:var(--muted); font-size:16.5px; max-width:52ch}
.section-head.center p{margin-left:auto; margin-right:auto}
.grad-word{background:var(--grad-text); -webkit-background-clip:text; background-clip:text; color:transparent}

/* reveal-on-scroll targets (driven by GSAP; this is the closed/pre-anim state) */
.rv{opacity:0}
.js-off .rv{opacity:1} /* fallback: JS disabled -> just show */

/* ============================================================
   HERO
   ============================================================ */
.hero{padding:168px 0 90px; overflow:visible}
.hero-grid{display:grid; grid-template-columns:1.02fr .98fr; gap:40px; align-items:center; min-height:1px}
.hero-copy .eyebrow{margin-bottom:26px}
.hero h1{font-size:clamp(38px,5.4vw,68px); font-weight:600; line-height:1.04}
.hero h1 .line{display:block; overflow:hidden}
.hero h1 .word{display:inline-block; will-change:transform}
.hero p.lede{margin:26px 0 38px; font-size:18px; color:var(--muted); max-width:46ch}
.hero-ctas{display:flex; align-items:center; gap:18px; flex-wrap:wrap}
.hero-proof{display:flex; align-items:center; gap:16px; margin-top:38px; flex-wrap:wrap}
.hero-proof .avatars{display:flex}
.hero-proof .avatars span{
  width:30px; height:30px; border-radius:50%; margin-left:-9px; border:2px solid var(--bg);
  background:var(--grad-brand); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; color:#fff;
}
.hero-proof .avatars span:first-child{margin-left:0}
.hero-proof small{color:var(--dim); font-size:13px}

.hero-stage{position:relative; aspect-ratio:1/1; max-height:560px}
#hero-canvas{position:absolute; inset:-6%; width:112%; height:112%}
.hero-float{
  position:absolute; display:flex; align-items:center; gap:10px; padding:11px 16px;
  background:rgba(255,255,255,.85); border:1px solid var(--border-strong); border-radius:14px;
  backdrop-filter:blur(14px); font-size:12.5px; font-weight:600; color:var(--text); box-shadow:0 20px 40px -18px rgba(15,23,42,.35);
}
.hero-float .pulse{width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px rgba(13,148,136,.18)}
.hero-float .hf-ic{width:15px; height:15px; flex-shrink:0; color:var(--accent)}
.hero-float.f1{top:6%; left:-4%}
.hero-float.f2{bottom:12%; right:-2%}
.hero-float .num{color:var(--accent); font-family:'Space Grotesk',sans-serif}
@media (max-width:980px){
  .hero{padding:150px 0 60px}
  .hero-grid{grid-template-columns:1fr; text-align:center}
  .hero p.lede{margin-left:auto; margin-right:auto}
  .hero-ctas{justify-content:center}
  .hero-proof{justify-content:center}
  .hero-stage{max-height:400px; margin-top:20px}
  .hero-float{display:none}
}

/* ============================================================
   LOGO MARQUEE
   ============================================================ */
.logos-wrap{padding:52px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border)}
.logos-label{text-align:center; font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--dim); margin-bottom:30px}
.marquee{overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent); mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.marquee-track{display:flex; align-items:center; gap:72px; width:max-content; animation:marquee 22s linear infinite; --marquee-shift:-33.3333%}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes marquee{from{transform:translateX(0)} to{transform:translateX(var(--marquee-shift))}}
.marquee-track span{font-family:'Space Grotesk',sans-serif; font-size:20px; font-weight:600; color:var(--dim); letter-spacing:.02em; opacity:.7; white-space:nowrap}

/* ============================================================
   HOW IT WORKS
   ============================================================ */
.steps{position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:22px; counter-reset:step}
.step{position:relative; z-index:1; padding:0 6px}
.step-ic{
  width:76px; height:76px; border-radius:22px; margin:0 auto 24px; position:relative;
  background:var(--surface); border:1px solid var(--border-strong); display:flex; align-items:center; justify-content:center;
  box-shadow:0 20px 40px -22px rgba(79,123,255,.4);
}
.step-ic::before{content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px; background:var(--grad-accent); opacity:.5; -webkit-mask:linear-gradient(#000,#000) content-box, linear-gradient(#000,#000); -webkit-mask-composite:xor; mask-composite:exclude}
.step-ic svg{width:32px; height:32px; stroke:var(--accent); position:relative}
.step-n{font-family:'Space Grotesk',sans-serif; font-size:12px; color:var(--dim); text-align:center; margin-bottom:10px; letter-spacing:.05em}
.step h3{font-size:17px; text-align:center; margin-bottom:8px}
.step p{font-size:14px; color:var(--muted); text-align:center}
@media (max-width:900px){
  .steps{grid-template-columns:1fr 1fr; row-gap:44px}
}
@media (max-width:520px){ .steps{grid-template-columns:1fr} }

/* ============================================================
   DEMO (video)
   ============================================================ */
.video-shell{
  border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--border-strong);
  background:var(--bg-3); box-shadow:0 40px 90px -50px rgba(15,23,42,.28); line-height:0;
}
.demo-video{width:100%; aspect-ratio:16/9; display:block; background:var(--bg-3)}

/* ============================================================
   CONTROL / TEACH SECTION
   ============================================================ */
.control-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; padding-top:6px}
.control-list{list-style:none; margin:26px 0 0; padding:0; display:flex; flex-direction:column; gap:20px}
.control-list li{display:flex; gap:14px; font-size:15px; color:var(--muted)}
.control-list .ico{flex-shrink:0; width:34px; height:34px; border-radius:10px; background:var(--surface-2); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; color:var(--accent)}
.control-list .ico svg{width:17px; height:17px}
.control-card{
  padding:28px; border-radius:var(--r-lg); background:var(--surface); border:1px solid var(--border-strong);
  box-shadow:0 40px 90px -50px rgba(79,123,255,.28);
}
.control-card .cc-label{font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--dim); margin-bottom:6px}
.rule-list{display:flex; flex-direction:column}
.rule-item{display:flex; align-items:center; gap:13px; padding:14px 2px; font-size:14.5px; color:var(--muted); border-top:1px solid var(--border)}
.rule-ic{flex-shrink:0; width:26px; height:26px; border-radius:8px; display:flex; align-items:center; justify-content:center}
.rule-ic svg{width:13px; height:13px}
.rule-ic.ok{background:rgba(13,148,136,.12); color:var(--accent)}
.rule-ic.block{background:rgba(220,38,38,.1); color:#DC2626}
@media (max-width:900px){ .control-grid{grid-template-columns:1fr; gap:36px} }

/* ============================================================
   FEATURES
   ============================================================ */
.features-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:16px}
.feature{
  position:relative; padding:26px 22px; border-radius:var(--r-md); background:var(--surface);
  border:1px solid var(--border); transition:transform .1s linear, border-color .3s, background .3s;
  transform-style:preserve-3d; will-change:transform; overflow:hidden;
}
.feature::before{content:""; position:absolute; inset:0; opacity:0; background:radial-gradient(240px 160px at var(--mx,50%) var(--my,0%), rgba(79,123,255,.10), transparent 60%); transition:opacity .3s; pointer-events:none}
.feature:hover{border-color:var(--border-strong); background:var(--surface-2)}
.feature:hover::before{opacity:1}
.feature .f-ic{width:38px; height:38px; border-radius:10px; background:var(--grad-accent); display:flex; align-items:center; justify-content:center; margin-bottom:16px; color:#fff}
.feature .f-ic svg{width:19px; height:19px}
.feature h4{font-size:14.5px; font-weight:600; margin-bottom:6px; position:relative}
.feature p{font-size:12.8px; color:var(--muted); line-height:1.5; position:relative}

/* ============================================================
   COMPARISON
   ============================================================ */
.compare-wrap{overflow-x:auto; border-radius:var(--r-lg); border:1px solid var(--border-strong)}
table.compare{width:100%; border-collapse:collapse; min-width:640px; background:var(--surface)}
table.compare th, table.compare td{padding:18px 22px; text-align:center; border-bottom:1px solid var(--border); font-size:14px}
table.compare th{font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:14.5px; color:var(--muted); background:rgba(15,23,42,.035)}
table.compare td:first-child, table.compare th:first-child{text-align:left; color:var(--text); font-weight:500}
table.compare tr:last-child td{border-bottom:none}
table.compare .col-hero{background:linear-gradient(180deg, rgba(79,123,255,.10), rgba(109,91,255,.05)); position:relative}
table.compare th.col-hero{color:var(--text); position:relative}
table.compare th.col-hero .tag{display:block; font-size:10.5px; color:var(--accent); letter-spacing:.06em; text-transform:uppercase; margin-top:4px}
.ck{color:var(--accent); display:inline-flex}
.xk{color:var(--dim); display:inline-flex}
.ck svg, .xk svg{width:16px; height:16px}

/* ============================================================
   PRICING
   ============================================================ */
.pricing-card{
  max-width:520px; margin:0 auto; position:relative; padding:2px; border-radius:calc(var(--r-lg) + 2px);
  background:conic-gradient(from 180deg, var(--primary), var(--accent), var(--secondary), var(--primary));
}
.pricing-inner{
  background:var(--bg-2); border-radius:var(--r-lg); padding:44px 40px; text-align:center;
}
.pricing-inner .eyebrow{margin-bottom:22px}
.price-row{display:flex; align-items:baseline; justify-content:center; gap:8px; margin:8px 0 4px}
.price-row .amount{font-family:'Space Grotesk',sans-serif; font-size:56px; font-weight:600}
.price-row .unit{color:var(--muted); font-size:15px}
.price-note{color:var(--dim); font-size:13.5px; margin-bottom:30px}
.price-tiers{display:flex; flex-direction:column; gap:10px; margin:0 0 22px}
.price-tier{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 18px; border-radius:14px; background:var(--surface-2); border:1px solid var(--border);
}
.price-tier.best{background:linear-gradient(135deg, rgba(79,123,255,.08), rgba(13,148,136,.08)); border-color:var(--border-strong)}
.pt-creditos{font-weight:600; font-size:15px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; text-align:left}
.pt-creditos .tag{font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--accent); background:rgba(13,148,136,.12); padding:3px 8px; border-radius:99px}
.pt-valor{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:20px; color:var(--text); flex-shrink:0}
@media (max-width:420px){
  .price-tier{flex-direction:column; align-items:flex-start; gap:6px}
}
.price-list{list-style:none; margin:0 0 32px; padding:0; text-align:left; display:flex; flex-direction:column; gap:13px}
.price-list li{display:flex; align-items:center; gap:11px; font-size:14.5px; color:var(--muted)}
.price-list li b{color:var(--text); font-weight:500}
.price-list .ck{flex-shrink:0}
.price-free{
  display:flex; align-items:center; justify-content:space-between; gap:12px; background:var(--surface-2);
  border:1px solid var(--border-strong); border-radius:14px; padding:14px 18px; margin-bottom:26px; font-size:13.5px;
}
.price-free b{color:var(--accent)}

/* ============================================================
   FAQ
   ============================================================ */
.faq-list{max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:12px}
.faq-item{border:1px solid var(--border); border-radius:16px; background:var(--surface); overflow:hidden; transition:border-color .25s, background .25s}
.faq-item[open]{border-color:var(--border-strong); background:var(--surface-2)}
.faq-item summary{
  list-style:none; cursor:pointer; padding:20px 24px; display:flex; align-items:center; justify-content:space-between;
  gap:16px; font-family:'Space Grotesk',sans-serif; font-size:15.5px; font-weight:500;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item .plus{flex-shrink:0; width:26px; height:26px; position:relative}
.faq-item .plus::before, .faq-item .plus::after{content:""; position:absolute; background:var(--muted); top:50%; left:50%; transform:translate(-50%,-50%)}
.faq-item .plus::before{width:14px; height:1.5px}
.faq-item .plus::after{width:1.5px; height:14px; transition:transform .3s var(--ease-out)}
.faq-item[open] .plus::after{transform:translate(-50%,-50%) rotate(90deg) scaleY(0)}
.faq-body{padding:0 24px 22px; color:var(--muted); font-size:14.5px; line-height:1.65; max-width:64ch}

/* ============================================================
   FINAL CTA
   ============================================================ */
.final-cta{
  position:relative; border-radius:var(--r-lg); overflow:hidden; padding:70px 48px;
  background:linear-gradient(160deg, var(--bg-3), var(--bg-2) 60%); border:1px solid var(--border-strong);
  display:grid; grid-template-columns:1fr .82fr; gap:48px; align-items:center;
}
.final-cta::before{content:""; position:absolute; width:520px; height:520px; right:-180px; top:-220px; background:radial-gradient(circle, var(--glow-purple), transparent 68%); opacity:.18}
.final-cta::after{content:""; position:absolute; width:420px; height:420px; left:-160px; bottom:-200px; background:radial-gradient(circle, var(--primary), transparent 68%); opacity:.13}
.final-copy{position:relative; z-index:1}
.final-copy h2{font-size:clamp(28px,3.6vw,42px); margin:18px 0 16px}
.final-copy p{color:var(--muted); font-size:16px; max-width:42ch}
.final-note{margin-top:26px; display:flex; align-items:center; gap:10px; font-size:13px; color:var(--dim); flex-wrap:wrap}
.final-note svg{width:14px; height:14px; flex-shrink:0; vertical-align:-2px; color:var(--accent)}

.authbox{position:relative; z-index:1; background:#FFFFFF; border:1px solid var(--border-strong); border-radius:var(--r-md); padding:28px; box-shadow:0 30px 60px -30px rgba(15,23,42,.25)}
.btn-google{
  width:100%; display:flex; align-items:center; justify-content:center; gap:10px;
  background:#fff; color:#1f1f1f; border:1px solid rgba(0,0,0,.14); border-radius:11px;
  padding:12px 0; font:inherit; font-weight:600; font-size:14.5px; cursor:pointer;
  transition:box-shadow .25s, transform .25s;
}
.btn-google:hover{box-shadow:0 10px 24px rgba(0,0,0,.12); transform:translateY(-1px)}
.btn-google svg{width:18px; height:18px}
.auth-divider{display:flex; align-items:center; gap:12px; margin:20px 0; color:var(--dim); font-size:12px}
.auth-divider::before, .auth-divider::after{content:""; flex:1; height:1px; background:var(--border-strong)}
.tabs{display:flex; gap:6px; margin-bottom:20px; background:var(--surface-2); padding:4px; border-radius:99px}
.tab{flex:1; text-align:center; padding:10px 0; border-radius:99px; font-size:13.5px; font-weight:600; cursor:pointer; color:var(--muted); transition:background .25s,color .25s}
.tab.active{background:var(--grad-brand); color:#fff}
.field-label{display:block; font-size:12.5px; font-weight:600; color:var(--muted); margin:14px 0 7px}
.field-label:first-of-type{margin-top:0}
.field-group{overflow:hidden}
.field-group.hidden{display:none}
.authbox input{
  width:100%; background:var(--bg); border:1px solid var(--border-strong); border-radius:11px;
  padding:12px 14px; font:inherit; font-size:14.5px; color:var(--text);
}
.authbox input:focus{outline:none; border-color:var(--accent)}
.authbox input::placeholder{color:var(--dim)}
.authbox .btn{margin-top:22px}
.form-err{color:#DC2626; font-size:13px; margin-top:12px; min-height:16px}

.pw-field{position:relative}
.pw-field input{padding-right:44px}
.eye-btn{
  position:absolute; right:4px; top:50%; transform:translateY(-50%); width:34px; height:34px;
  display:flex; align-items:center; justify-content:center; background:none; border:none; color:var(--dim);
  cursor:pointer; border-radius:8px; transition:color .2s, background .2s;
}
.eye-btn:hover{color:var(--text); background:var(--surface-2)}
.eye-btn svg{width:18px; height:18px}

.pw-strength{margin-top:10px}
.pw-strength-track{height:4px; border-radius:99px; background:var(--surface-2); overflow:hidden}
.pw-strength-bar{height:100%; width:0%; border-radius:99px; background:#ff6b6b; transition:width .25s var(--ease-out), background .25s}
.pw-strength-label{display:block; margin-top:6px; font-size:11.5px; color:var(--dim)}

.pw-match{font-size:12.5px; margin-top:8px; min-height:16px; display:flex; align-items:center; gap:6px}
.pw-match.ok{color:var(--accent)}
.pw-match.bad{color:#DC2626}
.pw-match svg{width:13px; height:13px; flex-shrink:0}
@media (max-width:900px){ .final-cta{grid-template-columns:1fr; padding:44px 26px} }
@media (max-width:480px){
  .final-cta{padding:32px 16px}
  .authbox{padding:20px}
  .pricing-inner{padding:32px 22px}
}

/* ============================================================
   FOOTER
   ============================================================ */
footer{border-top:1px solid var(--border); padding:46px 0 40px}
.foot-row{display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap}
.foot-brand{display:flex; align-items:center; gap:9px; font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:15px}
.foot-brand img{width:22px; height:22px; border-radius:6px}
.foot-links{display:flex; gap:26px; list-style:none; margin:0; padding:0; flex-wrap:wrap}
.foot-links a{font-size:13.5px; color:var(--muted); transition:color .2s}
.foot-links a:hover{color:var(--text)}
.foot-copy{font-size:12.5px; color:var(--dim)}
@media (max-width:640px){ .foot-row{flex-direction:column; align-items:flex-start} }