/* ======================================================================
   ELENCO — direção ACETERNITY (espacial, interativo, premium)
   Fundo preto-esverdeado, aurora/beams/meteors, spotlight, tilt 3D,
   bordas-gradiente animadas, scroll reveals. Verde da marca: #15a866.
   ====================================================================== */

@font-face{font-family:"Space Grotesk";src:url("fonts/space-grotesk.woff2") format("woff2");font-weight:300 700;font-display:swap;}
@font-face{font-family:"Geist";src:url("fonts/geist.woff2") format("woff2");font-weight:100 900;font-display:swap;}
@font-face{font-family:"Geist Mono";src:url("fonts/geist-mono.woff2") format("woff2");font-weight:100 900;font-display:swap;}

:root{
  /* --- tipografia / geometria (compartilhado entre temas) --- */
  --r:18px;
  --maxw:1180px;
  --disp:"Space Grotesk",-apple-system,BlinkMacSystemFont,sans-serif;
  --body:"Geist",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  /* ============ TEMA DARK (default) ============ */
  --bg:#04070a;
  --bg2:#070d11;
  --ink:#eaf2ee;
  --muted:#8ea59b;
  --faint:#5d706a;
  --line:rgba(120,160,145,.14);
  --line2:rgba(120,160,145,.28);
  --green:#16b673;
  --green-2:#2fe39a;
  --green-deep:#0c7a4d;
  --glass:rgba(10,18,15,.55);

  /* tokens de superfície/efeito (resolvem diferente em cada tema) */
  --card-bg:var(--glass);
  --field-bg:rgba(2,7,5,.5);
  --chip-bg:rgba(255,255,255,.03);
  --on-accent:#03130c;          /* texto sobre verde sólido */
  --bubble-bg:rgba(255,255,255,.03);
  --nav-bg:rgba(5,9,11,.72);
  --frame-bar-bg:rgba(8,14,11,.7);
  --frame-tag-bg:rgba(4,9,7,.7);
  --strip-bg:rgba(6,11,9,.4);
  --eyebrow-text:var(--green-2);
  --brand-word-grad:linear-gradient(180deg,#fff,#cfe0d8);
  --pill-label-grad:linear-gradient(180deg,#eafff5,#bff5dd);
  --title-grad:linear-gradient(120deg,#16b673 0%,#2fe39a 40%,#bff5dd 70%,#fff 100%);
  --accent-grad:linear-gradient(110deg,#16b673,#2fe39a 55%,#bff5dd);
  --selection-bg:rgba(47,227,154,.28);
  --selection-fg:#fff;

  /* intensidade dos efeitos espaciais (dark = vivos) */
  --aurora-opacity:.5;
  --aurora-blend:screen;
  --aurora-1:rgba(22,182,115,.55);
  --aurora-2:rgba(47,227,154,.32);
  --aurora-3:rgba(12,122,77,.34);
  --grid-line:rgba(120,160,145,.05);
  --beam-color:rgba(47,227,154,.5);
  --meteor-color:rgba(47,227,154,.8);
  --spotlight-color:rgba(47,227,154,.10);
  --frame-glow-color:rgba(47,227,154,.35);
  --card-border-color:rgba(47,227,154,.55);
  --tmember-glow:rgba(47,227,154,.12);
  --bg-rad-1:rgba(22,182,115,.10);
  --bg-rad-2:rgba(12,122,77,.08);
  --frame-shadow:0 50px 120px -40px rgba(0,0,0,.9),0 0 0 1px rgba(47,227,154,.06);
  --card-shadow:0 24px 60px -30px rgba(0,0,0,.8);
  --tmember-shadow:0 22px 50px -28px rgba(0,0,0,.85);
  --sv-shadow:0 40px 100px -40px rgba(0,0,0,.9);
}

/* ============ TEMA LIGHT ============ */
:root[data-theme="light"]{
  --bg:#eef3f0;
  --bg2:#ffffff;
  --ink:#0d1c16;
  --muted:#4a5d55;
  --faint:#6f8278;
  --line:rgba(20,70,50,.12);
  --line2:rgba(20,70,50,.22);
  --green:#0e9c5f;
  --green-2:#0c7a4d;          /* mais escuro p/ contraste sobre claro */
  --green-deep:#0a6b43;
  --glass:rgba(255,255,255,.72);

  --card-bg:rgba(255,255,255,.82);
  --field-bg:rgba(245,249,247,.9);
  --chip-bg:rgba(15,90,60,.05);
  --on-accent:#ffffff;          /* texto sobre verde sólido vira branco */
  --bubble-bg:rgba(244,249,246,.92);
  --nav-bg:rgba(255,255,255,.82);
  --frame-bar-bg:rgba(248,251,250,.92);
  --frame-tag-bg:rgba(255,255,255,.86);
  --strip-bg:rgba(255,255,255,.55);
  --eyebrow-text:#0a6b43;
  --brand-word-grad:linear-gradient(180deg,#0d1c16,#2c4a3c);
  --pill-label-grad:linear-gradient(180deg,#ffffff,#eafff5);
  --title-grad:linear-gradient(120deg,#0a6b43 0%,#0e9c5f 45%,#15b673 100%);
  --accent-grad:linear-gradient(110deg,#0a6b43,#0e9c5f 60%,#12a866);
  --selection-bg:rgba(14,156,95,.22);
  --selection-fg:#0d1c16;

  /* efeitos: suaves, viram gradientes/sombras claras — nada de glow forte */
  --aurora-opacity:.28;
  --aurora-blend:multiply;
  --aurora-1:rgba(22,182,115,.20);
  --aurora-2:rgba(110,200,160,.16);
  --aurora-3:rgba(40,150,100,.14);
  --grid-line:rgba(20,70,50,.045);
  --beam-color:rgba(20,120,80,.14);
  --meteor-color:rgba(20,120,80,.22);
  --spotlight-color:rgba(20,150,100,.06);
  --frame-glow-color:rgba(20,140,90,.16);
  --card-border-color:rgba(14,156,95,.32);
  --tmember-glow:rgba(20,150,100,.07);
  --bg-rad-1:rgba(120,200,165,.18);
  --bg-rad-2:rgba(90,180,140,.12);
  --frame-shadow:0 30px 70px -32px rgba(20,50,40,.22),0 0 0 1px rgba(20,70,50,.06);
  --card-shadow:0 20px 44px -26px rgba(20,50,40,.22);
  --tmember-shadow:0 18px 40px -24px rgba(20,50,40,.20);
  --sv-shadow:0 30px 70px -34px rgba(20,50,40,.24);
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  position:relative;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
::selection{background:var(--selection-bg);color:var(--selection-fg);}

/* transição suave ao alternar tema */
html,body{transition:background-color .45s ease,color .45s ease;}
.nav,.card,.builder,.room,.swap-card,.bento-card,.beta,.tmember,.step,
.faq details,.btn-line,.btn-ghost,.chip,.type-box,.waitlist input,.pill,.frame-bar,.frame-tag,.eyebrow,.badge-live,.sk{
  transition:background-color .4s ease,border-color .4s ease,color .4s ease,box-shadow .4s ease;}

/* ---------- FUNDO ESPACIAL GLOBAL ---------- */
.space-bg{position:fixed;inset:0;z-index:-2;overflow:hidden;background:
  radial-gradient(1200px 700px at 50% -10%, var(--bg-rad-1), transparent 60%),
  radial-gradient(900px 600px at 85% 20%, var(--bg-rad-2), transparent 60%),
  var(--bg);}
.aurora{position:absolute;filter:blur(90px);opacity:var(--aurora-opacity);mix-blend-mode:var(--aurora-blend);border-radius:50%;}
.aurora-1{width:48vw;height:48vw;left:-8vw;top:-6vw;background:radial-gradient(circle,var(--aurora-1),transparent 65%);animation:drift1 22s ease-in-out infinite;}
.aurora-2{width:42vw;height:42vw;right:-10vw;top:18vh;background:radial-gradient(circle,var(--aurora-2),transparent 65%);animation:drift2 26s ease-in-out infinite;}
.aurora-3{width:55vw;height:55vw;left:20vw;top:55vh;background:radial-gradient(circle,var(--aurora-3),transparent 65%);animation:drift3 30s ease-in-out infinite;}
@keyframes drift1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(8vw,6vh) scale(1.12)}}
@keyframes drift2{0%,100%{transform:translate(0,0) scale(1.05)}50%{transform:translate(-7vw,4vh) scale(.92)}}
@keyframes drift3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-5vw,-7vh) scale(1.1)}}
.grid-floor{position:absolute;inset:0;background-image:
  linear-gradient(var(--grid-line) 1px,transparent 1px),
  linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(900px 600px at 50% 30%,#000 0%,transparent 75%);
  -webkit-mask-image:radial-gradient(900px 600px at 50% 30%,#000 0%,transparent 75%);}
#stars{position:absolute;inset:0;width:100%;height:100%;}

/* spotlight que segue o mouse */
.spotlight{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .4s;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,30%),var(--spotlight-color),transparent 60%);}
body.has-pointer .spotlight{opacity:1;}

/* ---------- NAV ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;gap:24px;
  padding:16px clamp(18px,5vw,42px);transition:.4s;}
.nav.scrolled{background:var(--nav-bg);backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line);padding-top:12px;padding-bottom:12px;}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--disp);font-weight:700;font-size:19px;letter-spacing:-.02em;}
.brand-mark{display:inline-flex;align-items:flex-end;gap:3px;width:26px;height:26px;padding:5px;
  border-radius:8px;background:linear-gradient(160deg,rgba(22,182,115,.18),rgba(255,255,255,.02));
  border:1px solid var(--line2);}
.brand-mark i{width:4px;border-radius:3px;background:var(--faint);animation:eq 1.4s ease-in-out infinite;}
.brand-mark i:nth-child(1){height:40%;animation-delay:0s;}
.brand-mark i:nth-child(2){height:100%;background:var(--green);box-shadow:0 0 8px rgba(47,227,154,.7);animation-delay:.2s;}
.brand-mark i:nth-child(3){height:64%;background:#b6c4bd;animation-delay:.4s;}
@keyframes eq{0%,100%{transform:scaleY(.7)}50%{transform:scaleY(1)}}
.brand-word{background:var(--brand-word-grad);-webkit-background-clip:text;background-clip:text;color:transparent;}
.nav-links{display:flex;gap:26px;margin-left:auto;font-size:14.5px;color:var(--muted);}
.nav-links a{position:relative;transition:color .25s;}
.nav-links a:hover{color:var(--ink);}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-5px;height:1.5px;width:0;background:var(--green-2);transition:width .3s;}
.nav-links a:hover::after{width:100%;}
.nav-cta{font-size:14px;}

/* ---------- TOGGLE DE TEMA (sol/lua) ---------- */
.theme-toggle{position:relative;flex:none;width:38px;height:38px;border-radius:11px;cursor:pointer;
  display:inline-grid;place-items:center;color:var(--muted);
  background:var(--chip-bg);border:1px solid var(--line2);
  transition:color .25s,border-color .25s,background-color .25s,transform .25s,box-shadow .3s;}
.theme-toggle:hover{color:var(--ink);border-color:var(--green);
  background:rgba(22,182,115,.08);transform:translateY(-1px);
  box-shadow:0 0 22px -8px var(--frame-glow-color);}
.theme-toggle:focus-visible{outline:none;border-color:var(--green-2);box-shadow:0 0 0 3px rgba(22,182,115,.22);}
.theme-toggle svg{position:absolute;width:18px;height:18px;
  transition:opacity .3s,transform .4s cubic-bezier(.2,.8,.2,1);}
/* dark vigente: mostra a lua (clique vai p/ light) */
.theme-toggle .ic-moon{opacity:1;transform:rotate(0) scale(1);}
.theme-toggle .ic-sun{opacity:0;transform:rotate(-60deg) scale(.4);}
/* light vigente: mostra o sol (clique volta p/ dark) */
:root[data-theme="light"] .theme-toggle .ic-moon{opacity:0;transform:rotate(60deg) scale(.4);}
:root[data-theme="light"] .theme-toggle .ic-sun{opacity:1;transform:rotate(0) scale(1);}

/* ---------- BOTÕES ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--body);font-weight:600;font-size:15px;border-radius:12px;cursor:pointer;border:none;
  padding:12px 20px;transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .3s,color .25s;
  will-change:transform;}
.dot-live{width:7px;height:7px;border-radius:50%;background:var(--green-2);box-shadow:0 0 0 0 rgba(47,227,154,.6);
  animation:pulse 2s infinite;display:inline-block;}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(47,227,154,.55)}70%{box-shadow:0 0 0 8px rgba(47,227,154,0)}100%{box-shadow:0 0 0 0 rgba(47,227,154,0)}}

/* moving-border primary (assinatura aceternity) */
.btn-primary{color:var(--on-accent);background:transparent;overflow:hidden;font-weight:700;padding:13px 24px;}
.btn-primary .bm-label{position:relative;z-index:2;background:var(--pill-label-grad);-webkit-background-clip:text;background-clip:text;color:transparent;}
.btn-primary::before{content:"";position:absolute;inset:1.5px;border-radius:10px;z-index:1;
  background:linear-gradient(180deg,var(--green),var(--green-deep));}
.btn-primary .bm-border{position:absolute;inset:0;border-radius:12px;z-index:0;overflow:hidden;}
.btn-primary .bm-border::before{content:"";position:absolute;width:200%;height:200%;left:-50%;top:-50%;
  background:conic-gradient(from 0deg,transparent 0deg,#2fe39a 60deg,#eafff5 90deg,transparent 140deg);
  animation:spin 3.5s linear infinite;}
@keyframes spin{to{transform:rotate(360deg)}}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 40px -8px rgba(22,182,115,.6);}
.btn-block{width:100%;}
.btn-sm{padding:9px 16px;font-size:13.5px;}

.btn-line{color:var(--ink);background:var(--chip-bg);border:1px solid var(--line2);}
.btn-line:hover{border-color:var(--green);background:rgba(22,182,115,.08);transform:translateY(-2px);box-shadow:0 0 24px -6px var(--frame-glow-color);}
.btn-ghost{color:var(--ink);background:var(--chip-bg);border:1px solid var(--line2);}
.btn-ghost:hover{border-color:var(--green);transform:translateY(-1px);}

/* ---------- HERO ---------- */
.hero{position:relative;padding:148px clamp(18px,5vw,42px) 60px;text-align:center;overflow:hidden;}
.beams{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0;}
.beams span{position:absolute;top:-20%;width:1px;height:140%;
  background:linear-gradient(to bottom,transparent,var(--beam-color),transparent);
  animation:beamFall 6s linear infinite;opacity:0;}
.beams span:nth-child(1){left:14%;animation-delay:0s;animation-duration:7s;}
.beams span:nth-child(2){left:32%;animation-delay:1.4s;animation-duration:5.5s;}
.beams span:nth-child(3){left:54%;animation-delay:2.6s;animation-duration:8s;}
.beams span:nth-child(4){left:71%;animation-delay:.8s;animation-duration:6.4s;}
.beams span:nth-child(5){left:88%;animation-delay:3.4s;animation-duration:7.2s;}
@keyframes beamFall{0%{transform:translateY(-30%);opacity:0}10%{opacity:1}90%{opacity:1}100%{transform:translateY(30%);opacity:0}}

.hero-inner{position:relative;z-index:2;max-width:920px;margin:0 auto;}
.pill{position:relative;display:inline-flex;align-items:center;gap:9px;font-size:13.5px;color:var(--muted);
  padding:8px 16px;border-radius:999px;border:1px solid var(--line2);background:var(--glass);backdrop-filter:blur(8px);
  margin-bottom:30px;overflow:hidden;}
.pill .pill-glow{position:absolute;inset:0;border-radius:999px;
  background:radial-gradient(120px circle at var(--px,50%) 50%,var(--frame-glow-color),transparent 70%);opacity:0;transition:opacity .3s;}
.pill:hover .pill-glow{opacity:1;}
.pill:hover{color:var(--ink);border-color:var(--green);}
.pill svg{transition:transform .25s;}
.pill:hover svg{transform:translateX(3px);}

.hero-title{font-family:var(--disp);font-weight:700;letter-spacing:-.035em;line-height:1.02;
  font-size:clamp(40px,7vw,82px);margin-bottom:26px;}
.hero-title .line{display:block;}
.hero-title .grad .w{background:var(--title-grad);
  -webkit-background-clip:text;background-clip:text;color:transparent;}
[data-generate] .w{opacity:0;filter:blur(8px);display:inline-block;transform:translateY(6px);
  transition:opacity .5s,filter .5s,transform .5s;}
[data-generate].lit .w{opacity:1;filter:blur(0);transform:none;}

.hero-sub{max-width:660px;margin:0 auto 34px;font-size:clamp(16px,2vw,19px);color:var(--muted);}
.hero-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:30px;}
.hero-meta{display:flex;gap:18px;justify-content:center;align-items:center;flex-wrap:wrap;
  font-size:13.5px;color:var(--faint);font-family:var(--mono);}
.hero-meta b{color:var(--ink);}
.hero-meta .sep{width:4px;height:4px;border-radius:50%;background:var(--line2);}

/* moldura do app */
.hero-frame{position:relative;z-index:2;max-width:1000px;margin:64px auto 0;border-radius:var(--r);
  border:1px solid var(--line2);background:var(--bg2);overflow:hidden;
  box-shadow:var(--frame-shadow);
  transform-style:preserve-3d;transition:transform .25s ease-out;}
.frame-glow{position:absolute;inset:-2px;border-radius:var(--r);z-index:-1;
  background:conic-gradient(from 120deg,transparent,var(--frame-glow-color),transparent 30%);
  animation:spin 8s linear infinite;filter:blur(14px);opacity:.6;}
.frame-bar{display:flex;align-items:center;gap:8px;padding:11px 16px;border-bottom:1px solid var(--line);
  background:var(--frame-bar-bg);}
.frame-bar .tl{width:11px;height:11px;border-radius:50%;}
.tl-r{background:#ff5f57;}.tl-y{background:#febc2e;}.tl-g{background:#28c840;}
.frame-bar em{margin-left:10px;font-style:normal;font-family:var(--mono);font-size:12.5px;color:var(--faint);}
.hero-frame img,.sv-frame img{width:100%;display:block;}
.frame-tag{position:absolute;left:18px;bottom:18px;font-family:var(--mono);font-size:12px;color:var(--ink);
  background:var(--frame-tag-bg);border:1px solid var(--line2);padding:7px 12px;border-radius:8px;backdrop-filter:blur(6px);}

.scroll-hint{display:flex;align-items:center;gap:10px;justify-content:center;margin-top:44px;
  font-family:var(--mono);font-size:12px;color:var(--faint);text-transform:lowercase;}
.scroll-hint span{width:22px;height:34px;border:1.5px solid var(--line2);border-radius:12px;position:relative;}
.scroll-hint span::after{content:"";position:absolute;left:50%;top:6px;width:3px;height:7px;border-radius:2px;
  background:var(--green-2);transform:translateX(-50%);animation:scrolly 1.8s ease-in-out infinite;}
@keyframes scrolly{0%,100%{opacity:0;transform:translate(-50%,0)}50%{opacity:1;transform:translate(-50%,10px)}}

/* ---------- MARQUEE ---------- */
.strip{padding:34px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:var(--strip-bg);overflow:hidden;position:relative;}
.strip::before,.strip::after{content:"";position:absolute;top:0;bottom:0;width:140px;z-index:2;pointer-events:none;}
.strip::before{left:0;background:linear-gradient(90deg,var(--bg),transparent);}
.strip::after{right:0;background:linear-gradient(-90deg,var(--bg),transparent);}
.marquee{overflow:hidden;}
.track{display:inline-flex;align-items:center;gap:24px;white-space:nowrap;animation:marq 32s linear infinite;
  font-family:var(--disp);font-size:clamp(18px,2.6vw,28px);font-weight:600;color:var(--ink);}
.track i{color:var(--green);font-style:normal;}
.track span{opacity:.55;transition:opacity .3s;}
.strip:hover .track{animation-play-state:paused;}
@keyframes marq{to{transform:translateX(-50%)}}

/* ---------- LAYOUT SEÇÕES ---------- */
.section{max-width:var(--maxw);margin:0 auto;padding:clamp(70px,10vw,120px) clamp(18px,5vw,42px);position:relative;}
.eyebrow{display:inline-block;font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--eyebrow-text);margin-bottom:16px;padding:5px 12px;border:1px solid var(--line2);border-radius:999px;
  background:rgba(22,182,115,.06);}
.head{max-width:760px;margin-bottom:54px;}
.head h2,.split-text h2,.beta h2{font-family:var(--disp);font-weight:700;letter-spacing:-.03em;line-height:1.07;
  font-size:clamp(28px,4.6vw,48px);}
.head p{margin-top:16px;color:var(--muted);font-size:clamp(15px,2vw,18px);max-width:620px;}
.grad{background:var(--accent-grad);-webkit-background-clip:text;background-clip:text;color:transparent;}

/* ---------- CARTÃO BASE + BORDA-GRADIENTE ---------- */
.card,.builder,.room,.swap-card,.bento-card,.beta{position:relative;background:var(--card-bg);
  border:1px solid var(--line);border-radius:var(--r);backdrop-filter:blur(10px);
  transition:transform .25s ease-out,border-color .3s,box-shadow .3s,background-color .4s;will-change:transform;transform-style:preserve-3d;}
.card-border{position:absolute;inset:-1px;border-radius:var(--r);padding:1px;pointer-events:none;
  background:radial-gradient(180px circle at var(--cx,50%) var(--cy,50%),var(--card-border-color),transparent 60%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .3s;}
.card:hover .card-border,.builder:hover .card-border,.room:hover .card-border,
.swap-card:hover .card-border,.bento-card:hover .card-border{opacity:1;}
.card:hover,.bento-card:hover,.swap-card:hover{border-color:var(--line2);box-shadow:var(--card-shadow);}

/* ---------- FRENTES ---------- */
.fronts{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.front{padding:26px 24px 24px;}
.front-ico{width:46px;height:46px;border-radius:12px;margin-bottom:18px;position:relative;
  background:linear-gradient(160deg,rgba(22,182,115,.2),rgba(255,255,255,.02));border:1px solid var(--line2);}
.front-ico::after{content:"";position:absolute;inset:0;background:var(--green-2);
  -webkit-mask:var(--g) center/22px no-repeat;mask:var(--g) center/22px no-repeat;}
.front-ico[data-glyph="empreendedor"]{--g:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M13 2L3 14h7l-1 8 10-12h-7z"/></svg>');}
.front-ico[data-glyph="criador"]{--g:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 19l7-7 3 3-7 7-3-3z"/><path d="M18 13l-1.5-7.5L2 2l3.5 14.5L13 18z"/><path d="M2 2l7.5 7.5"/></svg>');}
.front-ico[data-glyph="marketing"]{--g:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 11l18-5v12L3 14v-3z"/><path d="M11.6 16.8a3 3 0 11-5.8-1.6"/></svg>');}
.front-ico[data-glyph="dev"]{--g:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 18l6-6-6-6"/><path d="M8 6l-6 6 6 6"/></svg>');}
.front-ico[data-glyph="empresa"]{--g:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 21h18"/><path d="M5 21V7l8-4v18"/><path d="M19 21V11l-6-4"/></svg>');}
.front-ico[data-glyph="curioso"]{--g:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M9.1 9a3 3 0 015.8 1c0 2-3 3-3 3"/><path d="M12 17h.01"/></svg>');}
.front h3{font-family:var(--disp);font-size:20px;font-weight:600;letter-spacing:-.02em;margin-bottom:8px;}
.front p{color:var(--muted);font-size:14.5px;}
.front-go{display:inline-block;margin-top:16px;font-family:var(--mono);font-size:12.5px;color:var(--green-2);
  opacity:0;transform:translateX(-6px);transition:.3s;}
.front:hover .front-go{opacity:1;transform:none;}

/* ---------- SPLIT (contratar) ---------- */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;}
.split-text .eyebrow{margin-bottom:18px;}
.lead{margin-top:18px;color:var(--muted);font-size:17px;}
.ticks{list-style:none;margin-top:26px;display:grid;gap:13px;}
.ticks li{display:flex;align-items:flex-start;gap:12px;color:var(--ink);font-size:15px;}
.ticks i{flex:none;width:20px;height:20px;margin-top:2px;border-radius:6px;position:relative;
  background:rgba(22,182,115,.16);border:1px solid var(--line2);}
.ticks i::after{content:"";position:absolute;left:5px;top:8px;width:7px;height:3px;border:1.6px solid var(--green-2);
  border-top:0;border-right:0;transform:rotate(-45deg);}

/* construtor vivo */
.builder{padding:24px;}
.builder-top{display:flex;align-items:center;gap:12px;margin-bottom:20px;}
.avatar,.swap-av,.clone-av,.msg-av{flex:none;width:42px;height:42px;border-radius:11px;display:grid;place-items:center;
  font-family:var(--mono);font-size:14px;font-weight:600;color:var(--on-accent);
  background:linear-gradient(160deg,var(--green-2),var(--green-deep));}
.builder-top strong{display:block;font-family:var(--disp);font-size:16px;font-weight:600;}
.builder-top small{color:var(--faint);font-size:13px;}
.badge-live{margin-left:auto;display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:11.5px;
  color:var(--green-2);background:rgba(22,182,115,.08);border:1px solid var(--line2);padding:5px 10px;border-radius:999px;}
.field{display:block;margin-bottom:18px;}
.field>span{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--faint);margin-bottom:9px;}
.chips{display:flex;gap:8px;flex-wrap:wrap;}
.chip{font-family:var(--body);font-size:13px;color:var(--muted);background:var(--chip-bg);
  border:1px solid var(--line2);border-radius:999px;padding:7px 14px;cursor:pointer;transition:.25s;}
.chip:hover{color:var(--ink);border-color:var(--green);}
.chip.on{color:var(--on-accent);background:linear-gradient(180deg,var(--green),var(--green-deep));border-color:transparent;font-weight:600;}
.type-box{font-family:var(--body);font-size:14.5px;color:var(--ink);background:var(--field-bg);
  border:1px solid var(--line2);border-radius:12px;padding:13px 15px;min-height:74px;}
.caret{display:inline-block;width:2px;height:1.05em;background:var(--green-2);vertical-align:-2px;
  margin-left:1px;animation:blink 1s step-end infinite;}
@keyframes blink{50%{opacity:0}}
.builder-skills{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px;}
.sk{font-family:var(--mono);font-size:11.5px;color:var(--green-2);background:rgba(22,182,115,.08);
  border:1px solid var(--line2);border-radius:7px;padding:5px 9px;}

/* ---------- SALA (conversa) ---------- */
.room{max-width:760px;margin:0 auto;padding:24px;}
.room-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;
  padding-bottom:16px;border-bottom:1px solid var(--line);}
.room-title{font-family:var(--mono);font-size:13px;color:var(--muted);}
.thread{list-style:none;display:grid;gap:14px;}
.thread li{display:grid;grid-template-columns:auto 1fr;gap:13px;align-items:start;opacity:0;transform:translateY(10px);}
.thread li.in{opacity:1;transform:none;transition:opacity .5s,transform .5s;}
.thread li::before{content:attr(data-init);width:38px;height:38px;border-radius:10px;display:grid;place-items:center;
  font-family:var(--mono);font-size:12.5px;font-weight:600;color:var(--on-accent);}
.thread li[data-color="a"]::before{background:linear-gradient(160deg,#2fe39a,#0c7a4d);}
.thread li[data-color="b"]::before{background:linear-gradient(160deg,#5fd3ff,#1a6fa0);}
.thread li[data-color="c"]::before{background:linear-gradient(160deg,#c4a8ff,#6a3fb0);}
.thread li[data-color="d"]::before{background:linear-gradient(160deg,#ffd27a,#b07a1a);}
.thread li[data-who]::after{display:none;}
.thread li > :not(::before){grid-column:2;}
.thread li{position:relative;}
.thread li span.who{font-family:var(--disp);font-size:13.5px;font-weight:600;color:var(--ink);display:block;margin-bottom:3px;}
.thread li p.bubble{background:var(--bubble-bg);border:1px solid var(--line);border-radius:0 12px 12px 12px;
  padding:11px 14px;font-size:14px;color:var(--muted);}

/* ---------- SWAP (clonar/trocar) ---------- */
.swap{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.swap-card{padding:28px 26px;}
.swap-card h3{font-family:var(--disp);font-size:21px;font-weight:600;letter-spacing:-.02em;margin-bottom:8px;}
.swap-card p{color:var(--muted);font-size:14.5px;margin-bottom:22px;}
.clones{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:20px;min-height:42px;align-items:center;}
.clone-av{animation:cloneIn .4s cubic-bezier(.2,1.4,.4,1);}
@keyframes cloneIn{from{transform:scale(0) rotate(-20deg);opacity:0}to{transform:none;opacity:1}}
.swap-stage{display:flex;align-items:center;gap:16px;margin-bottom:20px;}
.swap-av.out{background:linear-gradient(160deg,#a05050,#3a1a1a);}
.swap-av.out.gone{animation:swapOut .5s forwards;}
@keyframes swapOut{to{transform:translateX(-8px) scale(.8);opacity:.2;filter:grayscale(1)}}
.swap-arrow{color:var(--faint);font-size:20px;}
.swap-av.in{background:linear-gradient(160deg,var(--green-2),var(--green-deep));}
.swap-av.in.pop{animation:cloneIn .5s cubic-bezier(.2,1.4,.4,1);}

/* ---------- STICKY (como funciona) ---------- */
.sticky-wrap{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start;}
.sticky-steps{display:grid;gap:18px;}
.step{padding:24px 26px;border:1px solid var(--line);border-radius:var(--r);background:var(--card-bg);
  opacity:.4;transition:opacity .4s,border-color .4s,transform .4s,background-color .4s;}
.step.active{opacity:1;border-color:var(--green);box-shadow:0 0 40px -12px var(--frame-glow-color);transform:translateX(4px);}
.step-n{font-family:var(--mono);font-size:13px;color:var(--green-2);}
.step h3{font-family:var(--disp);font-size:21px;font-weight:600;letter-spacing:-.02em;margin:6px 0 8px;}
.step p{color:var(--muted);font-size:15px;}
.sticky-visual{position:sticky;top:100px;}
.sv-frame{position:relative;border-radius:var(--r);border:1px solid var(--line2);overflow:hidden;background:var(--bg2);
  box-shadow:var(--sv-shadow);transition:transform .25s ease-out;transform-style:preserve-3d;}
.sv-img{position:absolute;inset:0;top:43px;width:100%;opacity:0;transition:opacity .6s;}
.sv-frame{aspect-ratio:16/10;}
.sv-img.on{opacity:1;position:relative;}

/* ---------- EQUIPE ---------- */
.team{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.tmember{position:relative;padding:22px 20px;border:1px solid var(--line);border-radius:16px;background:var(--card-bg);
  transition:transform .25s ease-out,border-color .3s,box-shadow .3s,background-color .4s;will-change:transform;overflow:hidden;}
.tmember:hover{transform:translateY(-4px);border-color:var(--line2);box-shadow:var(--tmember-shadow);}
.tmember .glow{position:absolute;inset:0;opacity:0;transition:opacity .3s;
  background:radial-gradient(160px circle at var(--cx,50%) var(--cy,0%),var(--tmember-glow),transparent 65%);}
.tmember:hover .glow{opacity:1;}
.tmember .tav{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-family:var(--mono);
  font-size:14px;font-weight:600;color:var(--on-accent);margin-bottom:14px;
  background:linear-gradient(160deg,var(--green-2),var(--green-deep));}
.tmember h4{font-family:var(--disp);font-size:16.5px;font-weight:600;letter-spacing:-.02em;position:relative;}
.tmember .role{font-family:var(--mono);font-size:11.5px;color:var(--green-2);text-transform:uppercase;letter-spacing:.04em;
  margin:3px 0 12px;position:relative;}
.tmember .mission{font-size:13px;color:var(--muted);position:relative;}

/* ---------- BENTO / RECURSOS ---------- */
.bento{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;grid-auto-rows:auto;}
.bento-card{padding:28px 26px;overflow:hidden;}
.bento-card.big{grid-column:span 2;grid-row:span 1;}
.bento-card.wide{grid-column:span 2;}
.bento-card h3{font-family:var(--disp);font-size:20px;font-weight:600;letter-spacing:-.02em;margin-bottom:10px;}
.bento-card p{color:var(--muted);font-size:14.5px;}
.mem-bars{display:flex;align-items:flex-end;gap:8px;height:80px;margin-top:22px;}
.mem-bars span{flex:1;height:var(--h);border-radius:5px 5px 0 0;
  background:linear-gradient(180deg,var(--green-2),rgba(22,182,115,.15));transform-origin:bottom;
  animation:grow 1s cubic-bezier(.2,.9,.3,1) both;}
@keyframes grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
/* meteors */
.meteor{position:absolute;top:0;width:1px;height:60px;transform:rotate(215deg);
  background:linear-gradient(to top,transparent,var(--meteor-color));opacity:0;}
.bento-card.big .meteor:nth-child(2){left:30%;animation:meteor 4s linear infinite;}
.bento-card.big .meteor:nth-child(3){left:60%;animation:meteor 5.5s linear infinite 1.5s;}
.bento-card.big .meteor:nth-child(4){left:85%;animation:meteor 4.8s linear infinite 2.6s;}
@keyframes meteor{0%{transform:rotate(215deg) translateX(0);opacity:0;top:-10%;left:var(--l)}
  8%{opacity:1}100%{opacity:0;top:120%;transform:rotate(215deg) translateX(-300px)}}

/* ---------- BETA ---------- */
.beta-sec{max-width:920px;}
.beta{padding:clamp(34px,6vw,64px);text-align:center;overflow:hidden;}
.card-border.strong{background:radial-gradient(300px circle at var(--cx,50%) var(--cy,50%),var(--card-border-color),var(--frame-glow-color) 50%,transparent 70%);opacity:.5;}
.beta:hover .card-border.strong{opacity:1;}
.beta .beams span{background:linear-gradient(to bottom,transparent,var(--beam-color),transparent);}
.beta .eyebrow{margin-bottom:18px;}
.beta p{color:var(--muted);max-width:560px;margin:16px auto 0;font-size:16px;}
.waitlist{display:flex;gap:10px;max-width:480px;margin:30px auto 0;}
.waitlist input{flex:1;background:var(--field-bg);border:1px solid var(--line2);border-radius:12px;
  padding:14px 16px;color:var(--ink);font-family:var(--body);font-size:15px;transition:.25s;}
.waitlist input:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(22,182,115,.15);}
.waitlist input::placeholder{color:var(--faint);}
.beta-fine{font-family:var(--mono);font-size:12.5px;color:var(--faint);margin-top:16px;}
.beta-fine.ok{color:var(--green-2);}

/* ---------- FAQ ---------- */
.faq{display:grid;gap:12px;max-width:840px;}
.faq details{border:1px solid var(--line);border-radius:14px;background:var(--card-bg);overflow:hidden;transition:border-color .3s,background-color .4s;}
.faq details[open]{border-color:var(--line2);}
.faq summary{list-style:none;cursor:pointer;padding:18px 22px;font-family:var(--disp);font-size:16.5px;font-weight:600;
  letter-spacing:-.01em;display:flex;align-items:center;justify-content:space-between;gap:16px;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary i{flex:none;width:20px;height:20px;position:relative;transition:transform .3s;}
.faq summary i::before,.faq summary i::after{content:"";position:absolute;left:50%;top:50%;background:var(--green-2);}
.faq summary i::before{width:12px;height:2px;transform:translate(-50%,-50%);}
.faq summary i::after{width:2px;height:12px;transform:translate(-50%,-50%);transition:transform .3s;}
.faq details[open] summary i::after{transform:translate(-50%,-50%) scaleY(0);}
.faq details p{padding:0 22px 20px;color:var(--muted);font-size:14.5px;max-width:680px;}

/* ---------- FOOTER ---------- */
.footer{border-top:1px solid var(--line);padding:60px clamp(18px,5vw,42px) 36px;max-width:var(--maxw);margin:0 auto;}
.footer-top{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-bottom:42px;}
.footer-tag{color:var(--muted);font-size:15px;}
.footer-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-bottom:40px;}
.footer-cols h4{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-bottom:14px;}
.footer-cols a{display:block;color:var(--muted);font-size:14.5px;padding:4px 0;transition:color .25s;}
.footer-cols a:hover{color:var(--green-2);}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding-top:24px;border-top:1px solid var(--line);font-family:var(--mono);font-size:12.5px;color:var(--faint);}
.footer-status{display:inline-flex;align-items:center;gap:8px;}

/* ---------- REVEAL ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1);}
.reveal.in{opacity:1;transform:none;}

/* ---------- RESPONSIVO ---------- */
@media(max-width:980px){
  .fronts,.team,.bento{grid-template-columns:repeat(2,1fr);}
  .bento-card.big,.bento-card.wide{grid-column:span 2;}
  .split,.sticky-wrap,.swap{grid-template-columns:1fr;gap:30px;}
  .sticky-visual{position:relative;top:0;}
  .nav-links{display:none;}
}
@media(max-width:560px){
  .fronts,.team,.bento{grid-template-columns:1fr;}
  .bento-card.big,.bento-card.wide{grid-column:span 1;}
  .hero{padding-top:120px;}
  .hero-meta{font-size:12px;}
  .waitlist{flex-direction:column;}
}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001s!important;transition-duration:.15s!important;}
  .reveal{opacity:1;transform:none;}
  [data-generate] .w{opacity:1;filter:none;transform:none;}
}