:root{
  --bg:#050b1a; --panel:#0a1530; --panel2:#0d1a3a; --line:rgba(70,130,255,.2);
  --ink:#eaf0ff; --muted:#9db0d6; --blue:#2f7bff; --cyan:#38bdf8;
  --r:20px;
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:72px}
body{font:400 16.5px/1.7 Inter,system-ui,sans-serif;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;overflow-x:hidden}
.wrap{width:min(1120px,100% - 40px);margin-inline:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3,.logo{font-family:"Space Grotesk",Inter,sans-serif;letter-spacing:-.01em;line-height:1.12}
em{font-style:normal;color:var(--blue)}

/* nav */
.nav{position:sticky;top:0;z-index:10;background:rgba(5,11,26,.8);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav-in{display:flex;justify-content:space-between;align-items:center;height:66px}
.logo{font-weight:700;font-size:1.05rem;display:flex;align-items:center;gap:8px}
.logo b{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--cyan),var(--blue))}
.logo span{color:var(--muted);font-weight:500;font-size:.9rem}
nav{display:flex;align-items:center;gap:24px;font-size:.92rem;font-weight:500;color:var(--muted)}
nav a:hover{color:#fff}

/* buttons */
.btn{display:inline-block;padding:13px 26px;border-radius:999px;background:linear-gradient(90deg,var(--blue),#1e5cff);color:#fff!important;font-weight:600;font-size:.93rem;box-shadow:0 0 28px -6px rgba(47,123,255,.8);transition:transform .2s,box-shadow .2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 0 36px -2px rgba(47,123,255,.95)}
.btn-sm{padding:8px 18px}
.btn-ghost{background:transparent;border:1.5px solid var(--line);box-shadow:none}
.btn-ghost:hover{border-color:var(--blue);box-shadow:none}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}

/* hero */
.hero{position:relative;overflow:hidden;padding:clamp(56px,9vw,110px) 0 clamp(56px,8vw,96px)}
.glow{position:absolute;border-radius:50%;filter:blur(90px);z-index:0}
.g1{width:520px;height:520px;background:rgba(47,123,255,.28);right:-140px;top:-120px}
.g2{width:360px;height:360px;background:rgba(56,189,248,.14);left:-120px;bottom:-140px}
.hero-in{position:relative;z-index:1;display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
h1{font-size:clamp(3rem,9vw,6.4rem);font-weight:700;line-height:.98;text-transform:uppercase}
h1 span{display:block;color:#fff}
h1 em{display:block;background:linear-gradient(180deg,#38bdf8,#1e5cff);-webkit-background-clip:text;background-clip:text;color:transparent}
.tag{margin-top:22px;font:600 1.1rem "Space Grotesk",sans-serif;letter-spacing:.04em;color:var(--cyan)}
.tag b{color:var(--ink);margin-right:2px}
.lead{margin-top:18px;color:var(--muted);max-width:48ch;font-size:1.08rem}
.hero-art{position:relative;display:grid;place-items:center;gap:20px}
.hex{width:min(240px,60%);filter:drop-shadow(0 0 28px rgba(47,123,255,.7));animation:float 5s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-10px)}}
.code{width:100%;max-width:420px;background:rgba(10,21,48,.85);border:1px solid var(--line);border-radius:16px;padding:18px 20px;font:13.5px/1.7 Consolas,"Courier New",monospace;color:#cfe0ff;white-space:pre-wrap;box-shadow:0 20px 50px -20px rgba(0,0,0,.7)}
.code i{color:#5d7399;font-style:normal}.code b{color:#c084fc;font-weight:400}.code u{color:var(--cyan);text-decoration:none}.code s{color:#86efac;text-decoration:none}

/* sections */
.sec{padding:clamp(40px,6vw,72px) 0}
.ttl{font-size:clamp(1.4rem,3vw,1.9rem);font-weight:700;margin-bottom:26px;letter-spacing:.01em}
.ttl::after{content:"";display:inline-block;width:34px;height:2px;background:var(--blue);vertical-align:middle;margin-left:14px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.panel{background:linear-gradient(160deg,var(--panel2),var(--panel));border:1px solid var(--line);border-radius:var(--r);padding:clamp(24px,3.5vw,38px)}
.panel p{color:var(--muted)}.panel p+p{margin-top:14px}

.facts{list-style:none;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:26px}
.facts li{border:1px solid var(--line);border-radius:14px;padding:14px 16px;background:rgba(47,123,255,.06)}
.facts b{display:block;font:700 1.9rem "Space Grotesk",sans-serif;color:#fff;line-height:1.1}
.facts span{font-size:.82rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}

.do{list-style:none;padding:0;display:grid;gap:18px}
.do li{display:flex;gap:16px;align-items:flex-start}
.do i{flex:none;display:grid;place-items:center;width:48px;height:48px;border:1px solid var(--line);border-radius:12px;font:700 .85rem Consolas,monospace;color:var(--cyan);font-style:normal;background:rgba(47,123,255,.08)}
.do h3{font-size:1.02rem;color:#fff}.do p{font-size:.92rem;margin-top:2px!important}

/* tech */
.techs{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:14px}
.techs div{display:flex;flex-direction:column;align-items:center;gap:10px;padding:18px 8px 14px;background:var(--panel);border:1px solid var(--line);border-radius:16px;font-size:.84rem;color:var(--muted);text-align:center;transition:transform .2s,border-color .2s}
.techs div:hover{transform:translateY(-4px);border-color:var(--blue);color:#fff}
.techs span{display:grid;place-items:center;width:46px;height:46px;border-radius:12px;background:var(--c);color:#fff;font:700 .95rem "Space Grotesk",sans-serif;box-shadow:0 0 20px -6px var(--c)}

/* timeline */
.timeline{list-style:none;padding:0 0 0 30px;border-left:2px solid var(--line);display:grid;gap:26px}
.timeline li{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:22px 26px}
.timeline li::before{content:"";position:absolute;left:-40px;top:26px;width:14px;height:14px;border-radius:50%;background:var(--bg);border:3px solid var(--blue);box-shadow:0 0 14px var(--blue)}
.dur{display:inline-block;font-size:.78rem;font-weight:600;color:var(--cyan);background:rgba(56,189,248,.1);border:1px solid rgba(56,189,248,.25);padding:3px 12px;border-radius:999px;margin-bottom:10px}
.timeline h3{font-size:1.2rem;color:#fff}
.org{font-weight:600;color:var(--blue);margin:2px 0 8px}
.timeline p:last-child{color:var(--muted);max-width:70ch}

/* empresa com vários cargos */
.group .co{font-size:1.3rem;color:#fff}
.group>.org{color:var(--muted);font-weight:500}
.roles{list-style:none;padding:0 0 0 22px;margin:14px 0 0;border-left:2px solid rgba(47,123,255,.45);display:grid;gap:16px}
.roles li{position:relative;background:rgba(47,123,255,.06);border:1px solid var(--line);border-radius:14px;padding:14px 18px}
.timeline .roles li{overflow:visible;transform:none}
.roles li::after{display:none}
.roles li::before{border:0;animation:none;content:"";position:absolute;left:-30px;top:20px;width:10px;height:10px;border-radius:50%;background:var(--blue);box-shadow:0 0 10px var(--blue)}
.roles h4{font:700 1.05rem "Space Grotesk",sans-serif;color:#fff}
.when{display:block;font-size:.8rem;font-weight:600;color:var(--cyan);margin:2px 0 6px}
.roles p{color:var(--muted);font-size:.95rem;max-width:68ch}
.timeline .group>.roles{margin-top:16px}

/* misc */
.mini{font-size:.95rem;margin:22px 0 12px;color:var(--cyan);text-transform:uppercase;letter-spacing:.08em}
.ttl+.mini,.panel .mini:first-of-type{margin-top:0}
.tags{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.tags li{padding:5px 13px;border-radius:999px;border:1px solid var(--line);background:rgba(47,123,255,.08);color:#cfe0ff;font-size:.85rem}
.edu{list-style:none;padding:0;display:grid;gap:12px;margin-bottom:26px}
.edu li{border:1px solid var(--line);border-radius:14px;padding:14px 18px;background:rgba(47,123,255,.06)}
.edu b{display:block;color:#fff;font-family:"Space Grotesk",sans-serif}
.edu span{color:var(--muted);font-size:.9rem}

.cta{display:grid;grid-template-columns:1.2fr 1fr;gap:32px;align-items:center;background:linear-gradient(135deg,#0d1f4d,#08122b);border:1px solid var(--line);border-radius:28px;padding:clamp(28px,5vw,56px);position:relative;overflow:hidden}
.cta::before{content:"";position:absolute;width:340px;height:340px;border-radius:50%;background:rgba(47,123,255,.25);filter:blur(80px);right:-80px;top:-100px}
.cta>*{position:relative}
.cta p{color:var(--muted)}
.links{list-style:none;padding:0;margin-top:20px;display:grid;gap:8px}
.links a:hover{color:var(--cyan)}
blockquote{font:500 1.35rem/1.45 "Space Grotesk",sans-serif;color:#fff;border-left:3px solid var(--blue);padding-left:20px}
footer{padding:32px 0;text-align:center;color:var(--muted);font-size:.88rem;border-top:1px solid var(--line)}

/* animações */
.progress{position:fixed;top:0;left:0;height:3px;width:100%;transform-origin:left;transform:scaleX(0);background:linear-gradient(90deg,var(--cyan),var(--blue));z-index:20;box-shadow:0 0 12px var(--blue)}
.code{white-space:normal}
.ln{display:block;white-space:pre;opacity:0;transform:translateX(-8px);animation:ln .45s ease forwards;animation-delay:calc(.9s + var(--i)*.28s)}
@keyframes ln{to{opacity:1;transform:none}}
.cur{display:inline-block;width:8px;height:1em;background:var(--cyan);vertical-align:-2px;margin-left:3px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* entrada do hero */
.hero-txt>*,.hero-art>*{opacity:0;animation:up .8s cubic-bezier(.2,.7,.2,1) forwards}
.hero-txt h1{animation-delay:.05s}.tag{animation-delay:.3s!important}.lead{animation-delay:.45s!important}.actions{animation-delay:.6s!important}
.hero-art>*:nth-child(1){animation-delay:.2s}.hero-art>*:nth-child(2){animation-delay:.5s}
@keyframes up{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
h1 em{background-size:100% 200%;animation:shine 4s ease-in-out infinite alternate}
@keyframes shine{from{background-position:0 0}to{background-position:0 100%}}
.hex{animation:float 5s ease-in-out infinite!important;opacity:1}
@keyframes spin{to{transform:rotate(360deg)}}
.glow{animation:drift 14s ease-in-out infinite alternate}
.g2{animation-duration:18s}
@keyframes drift{to{transform:translate(-40px,30px) scale(1.12)}}

.photo-wrap{opacity:1;width:min(230px,62%);margin:16px 0;filter:drop-shadow(0 0 26px rgba(70,130,255,.28));animation:float 5s ease-in-out infinite}
.photo{position:relative;aspect-ratio:4/4.7;padding:0}
.photo::before{content:"";position:absolute;inset:-14px;pointer-events:none;transition:inset .4s;opacity:.55;filter:drop-shadow(0 0 4px rgba(56,189,248,.4));
  background:
    linear-gradient(var(--cyan),var(--cyan)) top left/26px 2px no-repeat,
    linear-gradient(var(--cyan),var(--cyan)) top left/2px 26px no-repeat,
    linear-gradient(var(--cyan),var(--cyan)) top right/26px 2px no-repeat,
    linear-gradient(var(--cyan),var(--cyan)) top right/2px 26px no-repeat,
    linear-gradient(var(--cyan),var(--cyan)) bottom left/26px 2px no-repeat,
    linear-gradient(var(--cyan),var(--cyan)) bottom left/2px 26px no-repeat,
    linear-gradient(var(--cyan),var(--cyan)) bottom right/26px 2px no-repeat,
    linear-gradient(var(--cyan),var(--cyan)) bottom right/2px 26px no-repeat;}
.photo-wrap:hover .photo::before{inset:-6px;opacity:.9}
.photo-in{position:relative;width:100%;height:100%;border-radius:8px;overflow:hidden;border:1px solid rgba(150,185,255,.25);background:radial-gradient(circle at 50% 35%,#1d3768 0%,#101f45 60%,#0a1330 100%)}
.photo-in::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(rgba(150,200,255,.055) 1px,transparent 1px) 0 0/5px 5px,linear-gradient(90deg,rgba(150,200,255,.055) 1px,transparent 1px) 0 0/5px 5px;animation:grid 3s linear infinite}
@keyframes grid{to{background-position:10px 10px,10px 10px}}
.photo-in::after{content:"";position:absolute;left:0;right:0;height:46px;z-index:1;pointer-events:none;background:linear-gradient(transparent,rgba(56,189,248,.07),transparent);animation:scan 8s linear infinite}
@keyframes scan{from{top:-46px}to{top:100%}}
.photo-in img{display:block;width:100%;height:auto;margin:10% 0 0;opacity:.82;filter:saturate(.28) contrast(.95) brightness(.95);transition:opacity .5s,filter .5s}
.photo-wrap:hover .photo-in img{opacity:1;filter:saturate(.85) contrast(.95) brightness(.97)}
.code{position:relative;z-index:2;margin-top:10px}

/* painéis com brilho que segue o mouse */
.panel,.timeline li{position:relative;overflow:hidden}
.panel::after,.timeline li::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%),rgba(56,189,248,.13),transparent 60%)}
.panel:hover::after,.timeline li:hover::after{opacity:1}
.timeline li{transition:transform .3s,border-color .3s}
.timeline li:hover{transform:translateX(6px);border-color:var(--blue)}
.timeline li::before{animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 7px rgba(47,123,255,.12),0 0 18px var(--blue)}}

/* tecnologias em cascata */
.techs div{opacity:0}
.techs.in div{opacity:1;animation:pop .55s cubic-bezier(.2,.8,.3,1.3) backwards;animation-delay:calc(var(--i)*45ms)}
@keyframes pop{from{opacity:0;transform:translateY(16px) scale(.8)}}
.techs span{transition:transform .3s}.techs div:hover span{transform:rotate(-8deg) scale(1.12)}
.tags li{transition:transform .2s,border-color .2s}.tags li:hover{transform:translateY(-2px);border-color:var(--cyan)}
.btn{position:relative;overflow:hidden}
.btn:not(.btn-ghost)::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);animation:sweep 3.5s ease-in-out infinite}
@keyframes sweep{60%,100%{left:130%}}

/* reveal */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s,transform .6s}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}.hex{animation:none}}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .hero-txt>*,.hero-art>*,.ln,.techs div{opacity:1;transform:none}
}
@media(max-width:860px){
  .hero-in,.grid2,.cta{grid-template-columns:1fr}
  nav a:not(.btn){display:none}
  .timeline{padding-left:22px}.timeline li::before{left:-31px}
  body{font-size:16px}
}


/* ícones reais das tecnologias */
.techs span.ic{background:#eef3ff;color:var(--c,#111);box-shadow:0 0 20px -8px #fff}
.techs span.ic img{width:28px;height:28px;object-fit:contain}

/* categorias: colunas de quadrados separadas por linhas verticais */
.tcols{display:flex;justify-content:center;flex-wrap:wrap;gap:22px 0}
.tcol{flex:1 1 0;min-width:112px;padding:0 14px}
.tcol+.tcol{border-left:1px solid rgba(56,189,248,.28)}
.tcol .techs{display:flex;flex-direction:column;gap:14px}
@media(max-width:700px){.tcol{flex:1 1 45%;padding:0 7px}.tcol+.tcol{border-left:0}}