:root{--b:#2B6BFF;--b2:#1F55E0;--acc:#5B9BFF;--sky:#7DB1FF;--ice:#070C1C;--bg2:#0A1228;--surf:#0E1936;--tx:#EAF0FF;--ink:#0B0D12;--mut:#9AA9CC;--line:#1C2B58;--navy:#0A1228;
--r:22px;--sh:0 24px 40px -24px rgba(37,99,235,.45);color-scheme:dark}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
html{background:var(--ice)}
body{margin:0;background:transparent;color:var(--tx);font:400 17px/1.65 Manrope,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{font-family:Montserrat,Manrope,sans-serif;letter-spacing:-.025em;margin:0 0 .5em;line-height:1.08}
h1{font-size:clamp(40px,7vw,76px);font-weight:800}
h1 em,.hero em{font-style:normal;color:var(--acc)}
h2{font-size:clamp(28px,4.2vw,46px);font-weight:800}
h3{font-size:20px;font-weight:700}
p{margin:0 0 1em}
a{color:inherit}
.wrap{width:min(1160px,100% - 48px);margin:0 auto}
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;background:#fff;padding:8px 14px;z-index:99}
:focus-visible{outline:3px solid var(--acc);outline-offset:3px}
.eyebrow{font:600 13px/1.6 Montserrat,sans-serif;letter-spacing:.22em;text-transform:uppercase;color:var(--acc);margin-bottom:18px}
.eyebrow.light{color:var(--sky)}.center{text-align:center}
.lead{font-size:clamp(17px,2vw,20px);color:var(--mut);max-width:52ch}.lead.sm{font-size:17px;margin-bottom:34px}

/* botões */
.btn{display:inline-block;background:var(--b);color:#fff;border:2px solid var(--b);padding:14px 28px;border-radius:999px;font:600 15px Montserrat,sans-serif;text-decoration:none;cursor:pointer;transition:transform .2s,box-shadow .2s,background .2s}
.btn:hover{background:var(--b2);border-color:var(--b2);transform:translateY(-2px);box-shadow:0 14px 24px -12px rgba(37,99,235,.7)}
.btn.ghost{background:transparent;color:var(--acc);border-color:var(--b)}.btn.ghost:hover{background:var(--b);color:#fff}
.btn.sm{padding:10px 20px;font-size:14px}
.cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}

/* header */
.top{position:sticky;top:0;z-index:50;background:rgba(7,12,28,.82);backdrop-filter:blur(14px);border-bottom:1px solid transparent;padding-top:env(safe-area-inset-top,0)}
.top.stuck{border-color:var(--line)}
.bar{display:flex;align-items:center;justify-content:space-between;height:72px}
.brand img{width:128px}
nav{display:flex;align-items:center;gap:30px;font:600 14px Montserrat,sans-serif}
nav a:not(.btn){text-decoration:none;position:relative}
nav a:not(.btn)::after{content:"";position:absolute;left:0;bottom:-6px;height:2px;width:0;background:var(--acc);transition:width .25s}
nav a:not(.btn):hover::after{width:100%}
.burger{display:none;background:none;border:0;width:44px;height:44px;position:relative;cursor:pointer}
.burger span{position:absolute;left:10px;right:10px;height:2px;background:var(--tx);transition:.25s}
.burger span:first-child{top:17px}.burger span:last-child{top:25px}
.burger[aria-expanded=true] span:first-child{top:21px;transform:rotate(45deg)}.burger[aria-expanded=true] span:last-child{top:21px;transform:rotate(-45deg)}

/* hero */
.hero{position:relative;isolation:isolate;overflow:hidden;padding:clamp(48px,9vh,110px) 0 clamp(60px,10vh,120px)}
.hero::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 55% 70% at 90% 85%,rgba(43,107,255,.3),transparent 70%),linear-gradient(180deg,rgba(7,12,28,.1),rgba(7,12,28,.25) 100%);z-index:-1}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.term{background:var(--navy);border-radius:18px;box-shadow:0 34px 50px -26px rgba(37,99,235,.8);overflow:hidden;color:#BFD4FF}
.term-bar{display:flex;align-items:center;gap:7px;padding:12px 16px;background:#18244F;font:12px ui-monospace,Menlo,monospace}
.term-bar i{width:11px;height:11px;border-radius:50%;background:#3B4A82}.term-bar i:first-child{background:var(--sky)}
.term-bar span{margin-left:10px;opacity:.7}
.term pre{margin:0;padding:22px;min-height:290px;font:14px/1.85 ui-monospace,Menlo,Consolas,monospace;white-space:pre-wrap}
.term .c{color:#6C7FB8}.term .k{color:var(--sky)}.term .s{color:#fff}
.term .cur{display:inline-block;width:8px;height:1.1em;background:var(--sky);vertical-align:-3px;animation:bl 1s steps(1) infinite}
@keyframes bl{50%{opacity:0}}

/* sobre */
.sobre{padding:96px 0;background:rgba(7,12,28,.5)}
.sobre-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.mark{width:56px;margin-bottom:18px;border-radius:14px}
.sobre p{color:var(--mut)}.sobre strong{color:var(--tx)}
.steps{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.steps div{background:rgba(14,25,54,.72);backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:var(--r);padding:24px}
.steps b{font:800 28px Montserrat,sans-serif;color:var(--acc)}.steps h3{margin:6px 0 4px;font-size:18px}.steps p{font-size:15px;margin:0}

/* cards */
.servicos{padding:96px 0}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin:44px 0}
.cards.three{grid-template-columns:repeat(3,1fr)}
.card{background:rgba(14,25,54,.72);backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:var(--r);padding:30px 26px;transition:transform .25s,box-shadow .25s}
.card:hover{transform:translateY(-6px);box-shadow:var(--sh)}
.card svg{width:34px;height:34px;stroke:var(--acc);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;margin-bottom:14px}
.card p{color:var(--mut);font-size:15.5px;margin:0}

/* portfólio */
.portfolio{padding:96px 0;background:rgba(7,12,28,.5)}
.proj{background:rgba(14,25,54,.72);backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:var(--r);padding:18px 18px 22px}
.proj h3{margin:18px 6px 4px}.proj p{margin:0 6px;color:var(--mut);font-size:14px}
.shot{aspect-ratio:16/10;border-radius:14px;background:linear-gradient(160deg,#fff,#DCE8FF);border:1px solid var(--line);position:relative;overflow:hidden}
.shot::before{content:"";position:absolute;left:14%;right:14%;top:30%;height:12%;border-radius:8px;background:var(--b);opacity:.9}
.shot::after{content:"";position:absolute;left:14%;right:34%;top:52%;height:7%;border-radius:8px;background:var(--sky);box-shadow:0 22px 0 var(--line)}
.shot i{position:absolute;top:10px;width:7px;height:7px;border-radius:50%;background:#C6D3F0}.shot i:nth-child(1){left:12px}.shot i:nth-child(2){left:24px}.shot i:nth-child(3){left:36px}
.shot.app::before{left:38%;right:38%;top:10%;height:80%;border-radius:14px;background:var(--navy)}.shot.app::after{left:44%;right:44%;top:24%;height:8%;box-shadow:0 20px 0 var(--sky),0 40px 0 var(--sky)}
.shot.dash::before{left:10%;right:60%;top:16%;height:68%;background:var(--navy)}.shot.dash::after{left:44%;right:10%;top:20%;height:14%;background:var(--b);box-shadow:0 34px 0 var(--sky),0 68px 0 var(--line)}

/* fundador */

/* contato */
.contato{padding:100px 0;background:radial-gradient(ellipse 60% 80% at 100% 0,rgba(43,107,255,.45),transparent 70%),rgba(8,21,63,.72);color:#fff}
.c-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.contato p{color:#DCE8FF}
.info{list-style:none;padding:0;margin:30px 0 0;display:grid;gap:14px}
.info span{display:block;font:600 12px Montserrat,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--sky)}
.info a{text-decoration:none;font-weight:600}.info a:hover{text-decoration:underline}
.form{background:#fff;color:#0B0D12;border-radius:28px;padding:34px;display:grid;gap:16px;box-shadow:0 30px 50px -26px rgba(0,0,0,.5)}
.form label{font:600 13px Montserrat,sans-serif;display:grid;gap:6px}
.form input,.form textarea{font:400 16px Manrope,sans-serif;padding:13px 16px;border:1.5px solid #DCE5F8;border-radius:14px;background:#F3F6FD;color:#0B0D12;width:100%;resize:vertical}
.form input:focus,.form textarea:focus{border-color:var(--b);outline:0;background:#fff}
.form .invalid{border-color:#D9363E}
.form small{color:#5C6784;font-size:13px}

footer{background:rgba(7,12,28,.88);color:#fff;padding:44px 0}
.foot{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.foot img{width:150px}.foot p{margin:0;color:#BFD4FF}.foot .small{font-size:14px}
.wpp{position:fixed;right:max(18px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));width:58px;height:58px;border-radius:50%;background:#25D366;display:grid;place-items:center;box-shadow:0 12px 26px -8px rgba(0,0,0,.45);z-index:60;transition:transform .2s}
.wpp:hover{transform:scale(1.08)}.wpp svg{width:30px;fill:#fff}

.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s,transform .7s}.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}.reveal{opacity:1;transform:none}}
@media(max-width:900px){
 .hero-grid,.sobre-grid,.c-grid{grid-template-columns:1fr;gap:40px}
 .cards,.cards.three{grid-template-columns:1fr 1fr}
 .burger{display:block}
 nav{position:absolute;top:72px;left:0;right:0;background:var(--bg2);flex-direction:column;align-items:flex-start;gap:0;padding:8px 24px 22px;border-bottom:1px solid var(--line);display:none}
 nav.open{display:flex}nav a{padding:12px 0;width:100%}nav .btn{width:auto;margin-top:8px}

}
@media(max-width:560px){.cards,.cards.three,.steps{grid-template-columns:1fr}.form{padding:24px}}

/* hero: palco com terminal + celular */
.stage{position:relative;padding:0 0 40px}
.stage .term{width:88%}
.stage .phone{position:absolute;right:-2%;bottom:-6px;width:34%;filter:drop-shadow(0 28px 30px rgba(16,26,58,.35));animation:float 6s ease-in-out infinite}
.chip{position:absolute;background:var(--surf);color:var(--tx);border:1px solid var(--line);border-radius:999px;padding:8px 14px;font:600 12.5px Montserrat,sans-serif;box-shadow:0 14px 24px -12px rgba(37,99,235,.5);animation:float 5s ease-in-out infinite}
.chip.c1{top:-16px;right:12%}.chip.c2{left:-14px;bottom:8px;animation-delay:-2s}
@keyframes float{50%{transform:translateY(-10px)}}
.laptop{width:100%;margin-bottom:18px;filter:drop-shadow(0 22px 24px rgba(37,99,235,.25))}
.stack{background:rgba(10,18,40,.75);padding:22px 0;overflow:hidden}
.marq{mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.track{display:flex;gap:14px;width:max-content;animation:slide 38s linear infinite}
.track span{font:600 14px Montserrat,sans-serif;color:#BFD4FF;border:1px solid #2A3A78;border-radius:999px;padding:8px 20px;white-space:nowrap}
@keyframes slide{to{transform:translateX(-50%)}}
.proj img{width:100%;border-radius:14px;border:1px solid var(--line);transition:transform .4s}
.proj:hover img{transform:scale(1.025)}

.hero .reveal.in:nth-child(2){transition-delay:.15s}

/* por trás dos monitores (faixa compacta) */
.fundador{background:rgba(5,9,23,.82);padding:44px 0;color:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.f-row{display:flex;align-items:center;gap:36px}
.avatar{width:136px;height:136px;border-radius:50%;object-fit:cover;border:2px solid #2A3A78;flex:none}
.mono{font:500 13px/1.4 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--sky);margin:0 0 8px}
.fundador h3{font-size:24px;margin:0 0 8px;color:#fff}
.fundador p{color:#A9B4D0;margin:0;font-size:16.5px}.fundador a{color:var(--sky);font-weight:600}
@media(max-width:600px){.f-row{flex-direction:column;align-items:flex-start;gap:20px}.avatar{width:112px;height:112px}}


/* portfólio com imagens reais */
.shot{position:relative;aspect-ratio:3/2;border-radius:16px;overflow:hidden;border:1px solid var(--line);background:var(--bg2);transform-style:preserve-3d;transition:transform .25s ease-out;will-change:transform}
.shot img{width:100%;height:100%;object-fit:cover;transform:scale(1.05);animation:kb 16s ease-in-out infinite alternate;transition:filter .4s}
@keyframes kb{from{transform:scale(1.05) translate(0,0)}to{transform:scale(1.16) translate(-2.5%,-1.5%)}}
.proj:hover .shot img{filter:brightness(1.12) saturate(1.15)}
.shot::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(120,170,255,.28),transparent 55%),linear-gradient(0deg,rgba(7,12,28,.55),transparent 45%);opacity:.7;transition:opacity .3s;pointer-events:none}
.shot:hover::after{opacity:1}
.scan{position:absolute;top:0;bottom:0;left:-40%;width:30%;background:linear-gradient(100deg,transparent,rgba(140,190,255,.35),transparent);transform:skewX(-18deg);z-index:2;pointer-events:none}
.proj:hover .scan{animation:sweep 1.1s ease-out}
@keyframes sweep{to{left:130%}}
.tagc{position:absolute;left:14px;bottom:12px;z-index:3;font:600 11.5px/1 ui-monospace,Menlo,monospace;letter-spacing:.06em;color:#fff;background:rgba(11,18,40,.7);backdrop-filter:blur(6px);border:1px solid #2A3A78;border-radius:999px;padding:7px 12px}
.proj:hover{box-shadow:0 24px 44px -22px rgba(43,107,255,.6);transform:translateY(-4px)}
@media(prefers-reduced-motion:reduce){.shot img{animation:none}}


.info .note{display:block;margin-top:4px;font-size:13px;color:#BFD4FF;font-weight:400}
.foot .small{text-align:right;line-height:1.6}
@media(max-width:700px){.foot .small{text-align:left}}

/* intro: grade que se desfaz (rápida) */
#intro{display:none}
.intro #intro{display:block;position:fixed;inset:0;z-index:1000;overflow:hidden}
.intro body{overflow:hidden}.intro .reveal{opacity:0}
#tiles{position:absolute;inset:0;display:grid;align-content:start;justify-content:start}
#tiles i{display:block;background-repeat:no-repeat;box-shadow:inset 0 0 0 1px rgba(91,155,255,.2);transition:transform .5s cubic-bezier(.6,0,.3,1),opacity .5s}
#intro.open #tiles i{transform:scale(0);opacity:0}
.hud{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;background:radial-gradient(ellipse 45% 30% at 50% 50%,rgba(43,107,255,.25),transparent);transition:opacity .22s}
#intro.open .hud{opacity:0}
.hud-t{position:absolute;left:24px;top:calc(22px + env(safe-area-inset-top,0px));margin:0;font:500 12px ui-monospace,Menlo,Consolas,monospace;letter-spacing:.14em;color:#7DB1FF}
.logo-wrap{position:relative;width:min(580px,80vw)}
.intro-logo{display:block;width:100%;height:auto;clip-path:inset(0 100% 0 0);animation:rev .65s .2s linear forwards}
@keyframes rev{to{clip-path:inset(0 0 0 0)}}
.beam{position:absolute;top:-14%;bottom:-14%;left:0;width:2px;background:#B7D3FF;box-shadow:0 0 16px 4px #2B6BFF,0 0 42px 12px rgba(43,107,255,.5);opacity:0;animation:bm .65s .2s linear forwards}
@keyframes bm{0%{left:0;opacity:1}99%{left:100%;opacity:1}100%{left:100%;opacity:0}}
.words2{margin:0;font:600 13px Montserrat,sans-serif;letter-spacing:.4em;text-transform:uppercase;color:#BFD4FF;opacity:0;padding-left:.4em;animation:fi .4s .75s ease-out forwards;text-align:center}
@keyframes fi{to{opacity:1}}
.pct{position:absolute;bottom:12%;margin:0;font:600 13px ui-monospace,Menlo,monospace;color:#7DB1FF;letter-spacing:.1em}
#skip{position:absolute;right:22px;bottom:calc(22px + env(safe-area-inset-bottom,0px));z-index:4;background:rgba(10,18,40,.6);border:1px solid #2A3A78;color:#BFD4FF;padding:8px 16px;border-radius:999px;font:600 13px Montserrat,sans-serif;cursor:pointer}
#skip:hover{background:#18244F}

/* fundo global: slides desfocados que trocam de tom */
.bgfx{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:var(--ice)}
.bs{position:absolute;inset:-8%;background:center/cover no-repeat;filter:blur(14px) brightness(.95) saturate(1.35);opacity:0;will-change:opacity,transform;animation:bgs 36s infinite}
.b1{background-image:url(assets/wallpaper.webp)}
.b2{background-image:url(assets/websites.webp);animation-delay:9s}
.b3{background-image:url(assets/app.webp);animation-delay:18s}
.b4{background-image:url(assets/sistemas.webp);animation-delay:27s}
@keyframes bgs{0%{opacity:0;transform:scale(1.08) translateX(2%)}6%,22%{opacity:1}28%{opacity:0}100%{opacity:0;transform:scale(1.22) translateX(-3%)}}
.bgtint{position:absolute;inset:0;mix-blend-mode:color;opacity:.55;animation:tint 28s ease-in-out infinite alternate}
@keyframes tint{0%{background:#1E5BFF}25%{background:#6A3DF2}50%{background:#0EA5E9}75%{background:#3A35C8}100%{background:#1E5BFF}}
.bgfx::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,12,28,.12),rgba(7,12,28,.42))}
@media(prefers-reduced-motion:reduce){.bs,.bgtint{animation:none}.b1{opacity:1}}
.hero .lead,.card p,.sobre p,.portfolio .lead,.proj p{color:#BAC7E6}