/* Layout: fundo vivo em canvas (aurora + constelação) fixo atrás de tudo; conteúdo em vidro sobre ele. Tema único azul-marinho. */
:root{
  --bg:#030a1f; --fg:#eaf0ff; --muted:#a3b0d0; --line:rgba(143,184,255,.18);
  --accent:#8fb8ff; --accent-fg:#030a1f; --navy:#011343; --glass:rgba(8,20,56,.55);
  --display:"Bricolage Grotesque",system-ui,sans-serif;
  --body:"IBM Plex Sans",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
body{margin:0;background:transparent;color:var(--fg);font:17px/1.6 var(--body);min-height:100vh;overflow-x:hidden;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
#bg{position:fixed;inset:0;width:100%;height:100%;z-index:-1;display:block}
.wrap{max-width:1120px;margin:0 auto;position:relative}
a{color:inherit}
h1,h2,h3{font-family:var(--display);line-height:1.08;margin:0;text-wrap:balance;letter-spacing:-.02em}
h1{font-size:clamp(2.4rem,7vw,4.8rem);font-weight:700}
h2{font-size:clamp(1.8rem,4vw,2.7rem);font-weight:650}
h3{font-size:1.3rem;font-weight:650}
p{margin:0;max-width:65ch}
.eyebrow{font:500 .78rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);display:inline-flex;align-items:center;gap:10px}
.eyebrow:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent);animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(143,184,255,.7)}50%{box-shadow:0 0 0 9px rgba(143,184,255,0)}}

header{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-block:20px;border-bottom:1px solid var(--line)}
.logo{display:block}
.logo img{height:30px;width:auto;display:block;animation:glow 4s ease-in-out infinite}
@keyframes glow{0%,100%{filter:drop-shadow(0 0 0 rgba(143,184,255,0))}50%{filter:drop-shadow(0 0 12px rgba(143,184,255,.65))}}
nav{display:flex;gap:6px;flex-wrap:wrap}
nav a{padding:8px 14px;text-decoration:none;font-size:.95rem;border-radius:99px;transition:background .25s,transform .25s}
nav a:hover{background:rgba(143,184,255,.12);transform:translateY(-2px)}
nav a[aria-current]{background:rgba(143,184,255,.16);outline:1px solid var(--line)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

/* título que sobe palavra por palavra */
.wm{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
.w{display:inline-block;transform:translateY(110%);animation:rise .9s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--i) * 90ms + 150ms)}
@keyframes rise{to{transform:translateY(0)}}
.shine .w{background:linear-gradient(100deg,var(--fg) 20%,var(--accent) 45%,#fff 55%,var(--fg) 80%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:rise .9s cubic-bezier(.2,.8,.2,1) forwards,shine 6s linear infinite;animation-delay:calc(var(--i) * 90ms + 150ms),0s}
@keyframes shine{to{background-position:-250% 0}}
.fade{opacity:0;animation:fadein .9s ease forwards;animation-delay:calc(var(--d,0) * 1ms + 600ms)}
@keyframes fadein{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.btn{display:inline-block;position:relative;overflow:hidden;background:var(--accent);color:var(--accent-fg);padding:14px 26px;border-radius:8px;font-weight:600;text-decoration:none;border:0;font-size:1rem;cursor:pointer;font-family:var(--body);transition:transform .2s,box-shadow .3s}
.btn:hover{transform:translateY(-3px);box-shadow:0 10px 30px -8px rgba(143,184,255,.7)}
.btn:after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);transform:translateX(-120%);animation:sweep 3.6s ease-in-out infinite}
@keyframes sweep{0%,55%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
.btn.ghost{background:transparent;color:var(--fg);outline:1px solid var(--line)}
.btn.ghost:after{display:none}

.hero{padding-block:clamp(56px,10vw,120px) clamp(48px,8vw,90px);display:grid;gap:28px}
.hero p{font-size:1.2rem;color:var(--muted)}
.cta{display:flex;gap:12px;flex-wrap:wrap}
.scale{font:500 .85rem var(--mono);color:var(--muted);border-top:1px solid var(--line);padding-top:14px;margin-top:20px;display:flex;gap:10px 28px;flex-wrap:wrap}
.scale b{color:var(--accent)}

.marquee{overflow:hidden;border-block:1px solid var(--line);padding-block:16px;margin-inline:calc(-1 * max(16px,env(safe-area-inset-left,0px)));background:rgba(3,10,31,.35);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee div{display:flex;width:max-content;animation:marq 28s linear infinite}
.marquee span{font:650 clamp(1.1rem,2.6vw,1.7rem) var(--display);letter-spacing:.04em;text-transform:uppercase;padding-inline:22px;white-space:nowrap;color:var(--fg)}
.marquee span:nth-child(even){color:var(--accent)}
@keyframes marq{to{transform:translateX(-50%)}}

section{padding-block:clamp(48px,7vw,88px);border-top:1px solid var(--line)}
.head{display:grid;gap:14px;margin-bottom:40px}
.grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.card{--mx:50%;--my:0%;position:relative;background:var(--glass);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:12px;padding:28px;display:grid;gap:12px;align-content:start;min-width:0;animation:float 7s ease-in-out infinite;animation-delay:calc(var(--n,0) * -2s);transition:border-color .3s}
.grid .card:nth-child(2){--n:1}.grid .card:nth-child(3){--n:2}.grid .card:nth-child(4){--n:3}
.card:before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(260px circle at var(--mx) var(--my),rgba(143,184,255,.22),transparent 70%)}
.card:hover{border-color:rgba(143,184,255,.55)}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.card p{color:var(--muted)}
.band{background:linear-gradient(180deg,rgba(1,19,67,.55),rgba(1,19,67,.2));margin-inline:calc(-1 * max(16px,env(safe-area-inset-left,0px)));padding-inline:max(16px,env(safe-area-inset-left,0px))}
.steps{display:grid}
.steps div{display:grid;grid-template-columns:56px 1fr;gap:8px 16px;padding:22px 0;border-top:1px solid var(--line);position:relative}
.steps div:after{content:"";position:absolute;top:-1px;left:0;height:1px;width:100%;background:linear-gradient(90deg,transparent,var(--accent),transparent);background-size:40% 100%;background-repeat:no-repeat;animation:scan 5s linear infinite;animation-delay:calc(var(--k,0) * -1.2s)}
.steps div:nth-child(2){--k:1}.steps div:nth-child(3){--k:2}.steps div:nth-child(4){--k:3}
@keyframes scan{from{background-position:-60% 0}to{background-position:160% 0}}
.steps div span{font:500 1.1rem var(--mono);color:var(--accent)}
.steps p{grid-column:2;color:var(--muted)}
.list{display:grid;gap:10px;padding:0;margin:0;list-style:none;color:var(--muted)}
.list li{padding-left:22px;position:relative}
.list li:before{content:"";position:absolute;left:0;top:.7em;width:10px;height:2px;background:var(--accent);animation:dash 2.4s ease-in-out infinite}
@keyframes dash{50%{width:4px}}
form{display:grid;gap:16px;max-width:560px}
label{display:grid;gap:6px;font-weight:500;font-size:.95rem}
input,textarea,select{font:inherit;padding:12px;border:1px solid var(--line);border-radius:8px;background:rgba(3,10,31,.6);color:var(--fg);width:100%;transition:border-color .25s,box-shadow .25s}
input:focus,textarea:focus,select:focus{border-color:var(--accent);box-shadow:0 0 0 4px rgba(143,184,255,.15)}
.note{font:.85rem var(--mono);color:var(--muted)}
footer{border-top:1px solid var(--line);padding-block:32px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--muted);font-size:.9rem}

.ticker{display:flex;align-items:center;gap:12px;font:500 1rem var(--mono);color:var(--fg);min-height:1.6em}
.ticker i{width:10px;height:10px;border-radius:50%;background:#3ddc97;flex:none;animation:gpulse 1.6s ease-in-out infinite}
@keyframes gpulse{0%,100%{box-shadow:0 0 0 0 rgba(61,220,151,.7)}50%{box-shadow:0 0 0 9px rgba(61,220,151,0)}}
#tk{transition:opacity .35s,transform .35s;display:inline-block}
#tk.out{opacity:0;transform:translateY(-8px)}

.showcase{display:grid;gap:28px;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr))}
.demo{display:grid;gap:12px;align-content:start;min-width:0}
.demo p{color:var(--muted)}
.frame{border:1px solid var(--line);border-radius:14px;background:rgba(4,12,38,.75);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);overflow:hidden;box-shadow:0 30px 60px -30px rgba(40,100,230,.55);animation:float 8s ease-in-out infinite}
.demo:nth-child(2) .frame{animation-delay:-3s}
.frame .bar{display:flex;align-items:center;gap:7px;padding:11px 14px;border-bottom:1px solid var(--line);font:.75rem var(--mono);color:var(--muted)}
.frame .bar i{width:10px;height:10px;border-radius:50%;background:rgba(143,184,255,.35)}
.frame .bar span{margin-left:8px}
.screen{padding:18px;display:grid;gap:16px;min-height:340px;align-content:start}
.brandrow{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.brandrow b{font:700 1.1rem var(--display)}.brandrow em{font:.75rem var(--mono);color:var(--muted);font-style:normal}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.kpis div{background:rgba(143,184,255,.08);border:1px solid var(--line);border-radius:10px;padding:10px;min-width:0}
.kpis small,.field small{display:block;font:.7rem var(--mono);color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.kpis strong{font:700 clamp(.9rem,2.2vw,1.15rem) var(--display);font-variant-numeric:tabular-nums;white-space:nowrap}
.up{color:#3ddc97}.down{color:#ff8a8a}
.chart{display:flex;align-items:flex-end;gap:10px;height:110px;border-bottom:1px solid var(--line);padding-inline:6px}
.chart span{flex:1;height:var(--h);border-radius:5px 5px 0 0;background:linear-gradient(180deg,var(--accent),rgba(1,40,140,.6));transform-origin:bottom;animation:bars 4s ease-in-out infinite;animation-delay:calc(var(--k,0) * .25s)}
.chart span:nth-child(2){--k:1}.chart span:nth-child(3){--k:2}.chart span:nth-child(4){--k:3}.chart span:nth-child(5){--k:4}.chart span:nth-child(6){--k:5}
@keyframes bars{0%,100%{transform:scaleY(.55)}50%{transform:scaleY(1)}}
.rows{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.rows li{display:flex;justify-content:space-between;gap:10px;font-size:.88rem;padding:9px 12px;border-radius:8px;background:rgba(143,184,255,.06);animation:slidein .6s ease both}
.rows b{font-family:var(--mono);font-weight:500;white-space:nowrap}
@keyframes slidein{from{opacity:0;transform:translateX(-16px)}to{opacity:1;transform:none}}
.field{display:grid;gap:6px}.field>div{border:1px solid var(--line);border-radius:8px;padding:10px 12px;background:rgba(3,10,31,.55);min-height:42px;font-size:.92rem}
.typed:after{content:"";display:inline-block;width:2px;height:1em;background:var(--accent);margin-left:2px;vertical-align:-2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.clip:before{content:"📎 "}
.pill{padding:4px 10px;border-radius:99px;border:1px solid var(--line);transition:all .4s}
.pill.s1{color:#ffd37a;border-color:#ffd37a}.pill.s2{color:var(--accent);border-color:var(--accent)}.pill.s3{color:#3ddc97;border-color:#3ddc97}
.stepper{list-style:none;margin:6px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.stepper li{font:.78rem var(--mono);color:var(--muted);padding-top:12px;border-top:3px solid var(--line);transition:all .5s}
.stepper li.on{color:var(--fg);border-color:var(--accent)}
.stepper li.done{color:#3ddc97;border-color:#3ddc97}

.shot{margin:0;display:grid;gap:8px}
.shot img{width:100%;height:auto;display:block;border-radius:12px;border:1px solid var(--line);cursor:zoom-in;box-shadow:0 24px 50px -28px rgba(40,100,230,.6);transition:transform .35s,box-shadow .35s}
.shot img:hover{transform:scale(1.02) translateY(-3px);box-shadow:0 30px 60px -24px rgba(90,150,255,.7)}
.shot figcaption{font:.78rem var(--mono);color:var(--muted)}
#lb{position:fixed;inset:0;z-index:50;background:rgba(3,10,31,.92);display:grid;place-items:center;padding:24px;cursor:zoom-out;animation:fadein .3s ease both}
#lb img{max-width:100%;max-height:100%;border-radius:12px;box-shadow:0 0 80px rgba(60,120,230,.5)}