:root{
  --bg:#000; --bg-2:#101010; --ink:#fff; --muted:#9b9b9b; --soft:#d6d6d6; --line:rgba(255,255,255,.14);
  --glass:rgba(0,0,0,.08); --wa:#25d366;
  --f-display:"Titillium Web",system-ui,sans-serif; --f-head:"Syne",system-ui,sans-serif; --f-body:"Work Sans",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:400 19.2px/1.7 var(--f-body);overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}

/* fundo topográfico fixo, como o vídeo de fundo da referência */
.topo{position:fixed;inset:0;z-index:-1;background:#000 url(img/topografia.jpg) center/cover no-repeat;opacity:.55}
.topo::after{content:"";position:absolute;inset:0;background:linear-gradient(203deg,rgba(22,22,22,.2) 0%,#000 100%)}

.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.label{font:500 15.6px/1.4 var(--f-body);letter-spacing:3px;text-transform:uppercase;color:var(--muted);margin:0 0 14px}
.pill{display:inline-flex;align-items:center;gap:10px;border:2px solid var(--ink);border-radius:50px;padding:13px 30px;background:var(--glass);color:var(--ink);font:500 15.6px/1 var(--f-body);letter-spacing:3px;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:background .25s,color .25s}
.pill:hover{background:var(--ink);color:#000}
.pill.solid{background:var(--ink);color:#343434;border-color:var(--ink)}
.pill.solid:hover{background:transparent;color:var(--ink)}

/* topo */
.nav{position:sticky;top:0;z-index:10;background:rgba(0,0,0,.78);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.06)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:76px}
.logo{font:300 36px/1 var(--f-display);letter-spacing:-.5px;text-decoration:none}
.logo b{font-weight:700}
.nav ul{display:flex;gap:30px;list-style:none;margin:0;padding:0}
.nav ul a{font:500 15.6px var(--f-body);letter-spacing:3px;text-transform:uppercase;text-decoration:none;color:var(--soft)}
.nav ul a:hover{color:var(--ink)}

/* hero */
.hero{position:relative;min-height:calc(100vh - 76px);display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:24px}
.hero h1{font:700 clamp(55.2px,8.4vw,100.8px)/1.02 var(--f-display);margin:0 0 22px;letter-spacing:-1px}
.hero p.sub{font-size:21.6px;color:var(--soft);max-width:34ch;margin:0 0 34px}
.hero .ctas{display:flex;gap:14px;flex-wrap:wrap}
.bust{position:relative;align-self:end;justify-self:end;width:min(520px,100%)}
.bust img{width:100%;mask-image:linear-gradient(to bottom,#000 78%,transparent);-webkit-mask-image:linear-gradient(to bottom,#000 78%,transparent)}

/* blocos */
section{padding:110px 0}
h2.big{font:600 clamp(38.4px,5.3vw,52.8px)/1.18 var(--f-head);margin:0 0 22px;max-width:22ch}
.intro{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.intro h5{font:600 28.8px/1.4 var(--f-head);margin:0 0 18px}
.intro p{color:var(--soft);margin:0}

.stats{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:70px}
.stat{padding:34px 24px;border-right:1px solid var(--line)}
.stat:last-child{border-right:0}
.stat b{display:block;font:700 64.8px/1 var(--f-display);margin-bottom:10px}
.stat span{font-size:16.8px;color:var(--muted);line-height:1.5;display:block}

.services{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--line);margin-top:50px}
.svc{padding:34px 28px;border-right:1px solid var(--line);background:rgba(0,0,0,.45);transition:background .3s}
.svc:last-child{border-right:0}
.svc:hover{background:rgba(255,255,255,.04)}
.svc .n{font:500 15.6px var(--f-body);letter-spacing:3px;color:var(--muted)}
.svc h3{font:600 28.8px/1.25 var(--f-head);margin:14px 0 12px}
.svc p{font-size:16.8px;color:var(--soft);margin:0}

/* experiência */
.job{border-top:1px solid var(--line);padding:56px 0 20px}
.job-h{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:8px}
.job h3{font:600 36px/1.2 var(--f-head);margin:0}
.job .org{color:var(--muted);font-weight:500}
.job .when{font:500 15.6px var(--f-body);letter-spacing:3px;text-transform:uppercase;color:var(--muted)}
.job p.lead{color:var(--soft);max-width:70ch;margin:0 0 34px}
.areas{display:grid;grid-template-columns:repeat(3,1fr);gap:36px 40px}
.area h4{font:600 20.4px/1.35 var(--f-head);margin:0 0 10px}
.area ul{margin:0;padding:0;list-style:none}
.area li{position:relative;padding-left:18px;margin:6px 0;font-size:16.8px;color:var(--soft);line-height:1.6}
.area li::before{content:"";position:absolute;left:0;top:.72em;width:8px;height:1px;background:var(--muted)}

/* competências */
.skills{display:grid;grid-template-columns:220px 1fr;gap:0;border-top:1px solid var(--line);margin-top:40px}
.skills dt,.skills dd{border-bottom:1px solid var(--line);padding:20px 0;margin:0}
.skills dt{font:500 15.6px var(--f-body);letter-spacing:3px;text-transform:uppercase;color:var(--muted);padding-top:26px}
.skills dd{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1px solid rgba(255,255,255,.35);border-radius:50px;padding:6px 16px;font-size:16.8px;color:var(--ink)}

/* faixa final */
.band{position:relative;padding:130px 0;text-align:center;background:#000 url(img/ondas.jpg) center/cover no-repeat;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.band::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.6)}
.band .wrap{position:relative}
.band h2{font:600 clamp(43.2px,6.2vw,69.6px)/1.12 var(--f-head);margin:0 auto 18px;max-width:20ch}
.band .label{color:var(--soft);max-width:70ch;margin:0 auto 40px;line-height:1.8}
.principles{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;text-align:left;margin:0 auto 48px;max-width:980px}
.principles div{border:1px solid var(--line);border-radius:18px;padding:24px;background:rgba(0,0,0,.55)}
.principles b{display:block;font:600 22.8px var(--f-head);margin-bottom:6px}
.principles span{font-size:16.8px;color:var(--soft)}

footer{padding:70px 0 40px}
.cols{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:32px}
.cols h6{font:500 15.6px var(--f-body);letter-spacing:3px;text-transform:uppercase;margin:0 0 14px}
.cols p,.cols a{font-size:16.8px;color:var(--muted);margin:0;text-decoration:none;display:block;line-height:1.9}
.cols a:hover{color:var(--ink)}
.copy{border-top:1px solid var(--line);margin-top:50px;padding-top:24px;font-size:15.6px;color:var(--muted)}

.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}

@media (max-width:980px){
  .services{grid-template-columns:1fr 1fr}
  .svc:nth-child(2){border-right:0}
  .svc:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .areas{grid-template-columns:1fr 1fr}
  .cols{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .wrap{padding:0 16px}
  .nav ul{display:none}
  .hero{grid-template-columns:1fr;min-height:auto;padding-top:40px}
  .bust{justify-self:center;width:min(230px,62%);order:-1;margin-bottom:-24px}
  .hero h1{font-size:52.8px}
  section{padding:72px 0}
  .intro{grid-template-columns:1fr;gap:28px}
  .stats{grid-template-columns:1fr 1fr}
  .stat:nth-child(2){border-right:0}
  .stat:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .stat b{font-size:50.4px}
  .services,.areas,.principles{grid-template-columns:1fr}
  .svc{border-right:0;border-bottom:1px solid var(--line)}
  .svc:last-child{border-bottom:0}
  .skills{grid-template-columns:1fr}
  .skills dt{border-bottom:0;padding-bottom:0}
  .job h3{font-size:28.8px}
  .band{padding:84px 0}
}
@media print{
  :root{--bg:#fff;--ink:#000;--muted:#444;--soft:#222;--line:#ccc}
  .topo,.nav,.bust,.ctas,.band .pill{display:none}
  .band{background:none}.band::before{display:none}
  .reveal{opacity:1;transform:none}
  section{padding:24px 0}.hero{min-height:auto;display:block}
  .chip{border-color:#999}.svc,.principles div{background:none}
  .job,.svc{break-inside:avoid}
}

/* página de experiência */
.nav ul a.on{color:var(--ink)}
.toc{display:flex;flex-wrap:wrap;gap:10px;margin-top:34px}
.toc a{border:1px solid rgba(255,255,255,.35);border-radius:50px;padding:8px 18px;font-size:15.6px;text-decoration:none;color:var(--soft);transition:background .25s,color .25s}
.toc a:hover{background:var(--ink);color:#000}
.xp{border-top:1px solid var(--line);padding:84px 0 20px;scroll-margin-top:90px}
.xp-h{display:grid;grid-template-columns:120px 1fr;gap:24px;align-items:start;margin-bottom:40px}
.xp-h .n{font:700 64.8px/1 var(--f-display);color:rgba(255,255,255,.22)}
.xp-h h2{font:600 clamp(31px,4vw,45.6px)/1.15 var(--f-head);margin:0 0 12px}
.xp-h p{color:var(--soft);margin:0;max-width:72ch}
.xp .areas{grid-template-columns:repeat(3,1fr)}
.xp .area{border:1px solid var(--line);border-radius:18px;padding:26px;background:rgba(0,0,0,.5)}
.xp .area p{font-size:16.8px;color:var(--soft);margin:0}
.xp.destaque .area{border-color:rgba(255,255,255,.3)}
.tag{display:inline-block;font:500 13px var(--f-body);letter-spacing:3px;text-transform:uppercase;color:#000;background:var(--ink);border-radius:50px;padding:5px 14px;margin-bottom:16px}
@media (max-width:980px){.xp .areas{grid-template-columns:1fr 1fr}}
@media (max-width:760px){.xp{padding-top:60px}.xp-h{grid-template-columns:1fr;gap:6px}.xp-h .n{font-size:48px}.xp .areas{grid-template-columns:1fr}}
@media print{.toc{display:none}.xp .area{background:none;border-color:#ccc}.tag{border:1px solid #000;background:none;color:#000}}