/* =====================================================================
   PLUX LABS — hero + loader
   Preto domina · azul corta · ciano acende · branco respira.
   ===================================================================== */
:root{
  --black:#020714; --ink:#050A16; --steel:#071426;
  --ice:#F4F8FF; --tech:#A8B6CC; --muted:#6E7C96;
  --cut:#008CFF; --ignite:#00D9FF; --deep:#003BFF;
  --line:rgba(120,160,255,.16); --line2:rgba(120,160,255,.30);
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;
  --pad:clamp(20px,4.5vw,64px);
}
*{margin:0;padding:0;box-sizing:border-box}
html{height:100%; scroll-behavior:smooth}
body{
  background:var(--black); color:var(--ice); font-family:var(--sans);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden; position:relative; min-height:100%; letter-spacing:-.01em;
}

/* ---------- forge bg + grain ---------- */
#bg{position:fixed; inset:0; width:100%; height:100%; display:block; z-index:0; background:radial-gradient(120% 90% at 50% 0%, #081327 0%, #020714 65%)}
.grain{position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.05; mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- monogram ---------- */
.mk{display:block; height:auto}
.mk--brand{width:26px}
.mk--hero{width:100%}
.mk--loader{width:64px; margin:0 auto 26px}
.mk__p{stroke-dasharray:240; stroke-dashoffset:240}
.mk__node{opacity:0}
.js .mk--loader .mk__p{animation:draw 1.5s .2s cubic-bezier(.6,0,.2,1) forwards}
.js .mk--loader .mk__node{animation:pop .5s 1.5s cubic-bezier(.2,1.5,.3,1) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes pop{to{opacity:1}}

/* ---------- loader ---------- */
.loader{position:fixed; inset:0; z-index:40; background:#010509;
  display:grid; place-items:center; transition:clip-path 1s cubic-bezier(.76,0,.24,1);
  clip-path:inset(0 0 0 0)}
.loader.done{clip-path:inset(0 0 100% 0)}
.loader__center{text-align:center; transition:opacity .5s ease, transform .6s cubic-bezier(.76,0,.24,1)}
.loader.done .loader__center{opacity:0; transform:translateY(-14px)}
.loader__word{font-size:15px; font-weight:600; letter-spacing:.42em; text-indent:.42em; color:var(--ice)}
.loader__word em{font-style:normal; color:var(--cut)}
.loader__label{margin-top:14px; font-family:var(--mono); font-size:11px; letter-spacing:.26em; text-transform:uppercase; color:var(--muted)}
.loader__count{position:absolute; right:var(--pad); bottom:calc(var(--pad) - 6px); font-family:var(--mono); font-size:12px; letter-spacing:.2em; color:var(--tech); font-variant-numeric:tabular-nums}
.loader__bar{position:absolute; left:0; bottom:0; width:100%; height:2px; background:rgba(120,160,255,.12)}
.loader__bar i{display:block; height:100%; width:0; background:linear-gradient(90deg,var(--deep),var(--cut) 55%,var(--ignite)); box-shadow:0 0 12px rgba(0,140,255,.6)}

/* ---------- reveal after loader ---------- */
.topbar,.hero{opacity:0}
.revealed .topbar{opacity:1; transition:opacity .8s ease .1s}
.revealed .hero{opacity:1}

/* ---------- topbar ---------- */
.topbar{position:fixed; top:0; left:0; width:100%; z-index:20;
  display:flex; align-items:center; justify-content:space-between;
  padding:clamp(16px,2.6vw,28px) var(--pad)}
.brand{display:inline-flex; align-items:center; text-decoration:none; line-height:0}
.brand__logo{height:clamp(24px,3.2vw,34px); width:auto; display:block; filter:drop-shadow(0 1px 12px rgba(1,4,10,.6))}
.brand:focus-visible{outline:2px solid var(--ignite); outline-offset:5px; border-radius:2px}
.meta{display:flex; align-items:center; gap:14px; font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--tech); text-shadow:0 1px 16px rgba(1,4,10,.6)}
.meta .sep{width:26px; height:1px; background:var(--line2)}
@media(max-width:560px){.meta span:first-child{display:none}}

/* ---------- hero ---------- */
.hero{position:relative; z-index:10; height:100svh; min-height:560px;
  display:grid; align-items:center; padding:0 var(--pad)}
.hero__mark{position:absolute; z-index:-1; right:clamp(-24px,4vw,90px); top:50%;
  width:clamp(230px,42vw,560px); transform:translateY(-52%);
  opacity:.9; will-change:transform; filter:drop-shadow(0 0 60px rgba(0,120,255,.18))}
.hero__body{max-width:min(1180px,100%)}

.eyebrow{display:inline-flex; align-items:center; gap:12px; font-family:var(--mono);
  font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--ice); margin-bottom:clamp(20px,3vh,34px);
  text-shadow:0 1px 18px rgba(1,4,10,.7)}
.eyebrow__dot{width:6px; height:6px; border-radius:50%; background:var(--ignite); box-shadow:0 0 10px var(--ignite)}

.title{font-weight:800; text-transform:uppercase; line-height:.92;
  font-size:clamp(2.8rem,11.5vw,9rem); letter-spacing:-.045em; text-wrap:balance}
.title .ln{display:block; clip-path:inset(-0.22em -40vw -0.16em -40vw)}
.title .ln__i{display:block; transform:translateY(150%); will-change:transform}
.title .ln--out .ln__i{-webkit-text-fill-color:transparent; -webkit-text-stroke:1.4px rgba(168,182,204,.6); color:transparent}
/* masked rise-in */
.revealed .title .ln__i{transform:translateY(0); transition:transform 1.05s cubic-bezier(.16,1,.3,1)}
.revealed .title .ln:nth-child(1) .ln__i{transition-delay:.05s}
.revealed .title .ln:nth-child(2) .ln__i{transition-delay:.14s}
.revealed .title .ln:nth-child(3) .ln__i{transition-delay:.23s}

.lede{max-width:44ch; margin-top:clamp(22px,3.4vh,38px); color:#D3DEEF;
  font-size:clamp(1rem,1.5vw,1.28rem); line-height:1.5; opacity:0; text-shadow:0 1px 22px rgba(1,4,10,.75)}
.revealed .lede{opacity:1; transition:opacity .9s ease .5s}

.cta{--c:var(--ice); position:relative; display:inline-flex; align-items:center; gap:14px;
  margin-top:clamp(28px,4vh,44px); padding:15px 26px; color:var(--c); text-decoration:none;
  font-size:13px; letter-spacing:.16em; text-transform:uppercase; font-weight:600;
  border:1px solid var(--line2); border-radius:2px; overflow:hidden;
  background:rgba(6,14,28,.4); backdrop-filter:blur(4px);
  opacity:0}
.revealed .cta{opacity:1; transition:opacity .9s ease .62s}
.cta svg{width:24px; transition:transform .4s cubic-bezier(.16,1,.3,1)}
.cta::before{content:""; position:absolute; left:0; top:0; height:100%; width:0;
  background:linear-gradient(90deg,rgba(0,140,255,.18),rgba(0,217,255,.08)); z-index:-1; transition:width .5s cubic-bezier(.16,1,.3,1)}
.cta::after{content:""; position:absolute; left:0; bottom:0; height:2px; width:0;
  background:linear-gradient(90deg,var(--ignite),var(--cut)); box-shadow:0 0 10px rgba(0,140,255,.6); transition:width .5s cubic-bezier(.16,1,.3,1)}
.cta:hover{border-color:transparent}
.cta:hover::before,.cta:hover::after{width:100%}
.cta:hover svg{transform:translateX(5px)}
.cta:focus-visible{outline:2px solid var(--ignite); outline-offset:3px}

/* ---------- hero foot ---------- */
.hero__foot{position:absolute; left:var(--pad); right:var(--pad); bottom:clamp(18px,3vh,30px);
  display:flex; align-items:center; justify-content:space-between; gap:16px}
.slogan{font-family:var(--mono); font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--tech); text-shadow:0 1px 16px rgba(1,4,10,.7)}
.scroll{display:flex; align-items:center; gap:10px; font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--ice); text-shadow:0 1px 16px rgba(1,4,10,.7)}
.scroll i{width:1px; height:34px; background:linear-gradient(180deg,var(--ignite),transparent); animation:sc 2s ease-in-out infinite}
@keyframes sc{0%,100%{transform:scaleY(.4); transform-origin:top; opacity:.5}50%{transform:scaleY(1); opacity:1}}
@media(max-width:640px){.slogan{display:none}}

/* ---------- reduced motion ---------- */
.scroll{text-decoration:none}
.scroll:hover i{opacity:1}
.scroll:focus-visible{outline:2px solid var(--ignite); outline-offset:4px; border-radius:2px}

/* topbar legibility scrim over any section */
.topbar::before{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg, rgba(2,6,16,.6), rgba(2,6,16,0))}

/* =====================================================================
   ACTS — content over the living fluid
   ===================================================================== */
.acts{position:relative; z-index:10}
.act{position:relative; z-index:10; padding:clamp(80px,14vh,170px) var(--pad); overflow:hidden}
.act::before{content:""; position:absolute; inset:0; z-index:-1; background:rgba(4,10,22,.85)}
.act--manifesto::before{background:linear-gradient(180deg, rgba(4,10,22,0), rgba(4,10,22,.85) 24%)}
.act--proof::before{background:rgba(4,10,22,.44)}
.act--authorship::before{background:rgba(3,7,16,.9)}
.act--start::before{background:linear-gradient(180deg, rgba(4,10,22,.62), rgba(4,10,22,.42))}
.act--build,.act--protocol,.act--proof,.act--authorship,.act--start{border-top:1px solid var(--line)}
.wrap{max-width:1180px; margin:0 auto; width:100%}
.wrap--proof{max-width:1000px}
.wrap--center{max-width:860px; text-align:center}

/* section kicker */
.kicker{display:flex; align-items:center; gap:14px; font-family:var(--mono); font-size:12px;
  letter-spacing:.24em; text-transform:uppercase; color:var(--tech); margin-bottom:clamp(30px,5vh,56px);
  text-shadow:0 1px 16px rgba(1,4,10,.6)}
.kicker--center{justify-content:center}
.kicker__n{color:var(--ignite); font-variant-numeric:tabular-nums}
.kicker__n::after{content:""; display:inline-block; width:34px; height:1px; background:var(--line2);
  vertical-align:middle; margin-left:14px}

/* reveal system (only when JS is on) */
.js [data-reveal] .r{opacity:0; transform:translateY(26px)}
.js [data-reveal].in .r{opacity:1; transform:none;
  transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1)}
.js [data-reveal].in .statement .r:nth-child(2){transition-delay:.07s}
.js [data-reveal].in .statement .r:nth-child(3){transition-delay:.14s}
.js [data-reveal].in .statement .r:nth-child(4){transition-delay:.21s}
.js [data-reveal].in .index__row:nth-child(2){transition-delay:.06s}
.js [data-reveal].in .index__row:nth-child(3){transition-delay:.12s}
.js [data-reveal].in .index__row:nth-child(4){transition-delay:.18s}
.js [data-reveal].in .index__row:nth-child(5){transition-delay:.24s}
.js [data-reveal].in .index__row:nth-child(6){transition-delay:.30s}
.js [data-reveal].in .proto__step:nth-child(2){transition-delay:.07s}
.js [data-reveal].in .proto__step:nth-child(3){transition-delay:.14s}
.js [data-reveal].in .proto__step:nth-child(4){transition-delay:.21s}
.js [data-reveal].in .proto__step:nth-child(5){transition-delay:.28s}
.js [data-reveal].in .projects__row:nth-child(2){transition-delay:.07s}
.js [data-reveal].in .projects__row:nth-child(3){transition-delay:.14s}
.js [data-reveal].in .projects__row:nth-child(4){transition-delay:.21s}

/* ---------- ATO 2 · MANIFESTO ---------- */
.statement{font-weight:700; font-size:clamp(1.85rem,4.8vw,3.7rem); line-height:1.12;
  letter-spacing:-.025em; max-width:20ch; text-wrap:balance}
.statement span{display:block}
.statement em{font-style:normal; color:#fff; position:relative; white-space:nowrap}
.statement em::after{content:""; position:absolute; left:0; right:0; bottom:-.06em; height:3px;
  background:linear-gradient(90deg,var(--ignite),var(--cut)); border-radius:2px; box-shadow:0 0 10px rgba(0,140,255,.5)}
.statement__sub{margin-top:clamp(28px,4.5vh,50px); max-width:58ch; color:var(--tech);
  font-size:clamp(1rem,1.4vw,1.22rem); line-height:1.55}

/* ---------- ATO 3 · O QUE FORJAMOS ---------- */
.index{list-style:none; border-top:1px solid var(--line)}
.index__row{position:relative; display:grid; grid-template-columns:3.4rem 1fr;
  grid-template-areas:"n name" ". desc"; gap:6px 22px; align-items:baseline;
  padding:clamp(20px,3.4vh,34px) 0; border-bottom:1px solid var(--line)}
.index__n{grid-area:n; font-family:var(--mono); color:var(--muted); font-size:14px; padding-top:.55em; transition:color .4s ease}
.index__name{grid-area:name; font-weight:700; letter-spacing:-.02em; color:var(--ice);
  font-size:clamp(1.4rem,3.4vw,2.4rem); line-height:1.05; transition:transform .5s cubic-bezier(.16,1,.3,1)}
.index__desc{grid-area:desc; color:var(--tech); font-size:clamp(.95rem,1.3vw,1.08rem); max-width:54ch}
.index__weld{position:absolute; left:0; bottom:-1px; height:2px; width:0;
  background:linear-gradient(90deg,var(--ignite),var(--cut)); box-shadow:0 0 8px rgba(0,140,255,.6);
  transition:width .5s cubic-bezier(.16,1,.3,1)}
.index__row:hover .index__weld,.index__row:focus-visible .index__weld{width:100%}
.index__row:hover .index__n,.index__row:focus-visible .index__n{color:var(--ignite)}
.index__row:hover .index__name{transform:translateX(8px)}
.index__row:focus-visible{outline:2px solid rgba(0,217,255,.5); outline-offset:8px; border-radius:2px}
.index__foot{margin-top:clamp(22px,4vh,40px); font-family:var(--mono); font-size:12px; letter-spacing:.1em; color:var(--muted)}

/* ---------- ATO 6 · PROJETOS (lista brutalista) ---------- */
.projects{list-style:none; border-top:1px solid var(--line2)}
.projects__row{position:relative; display:grid; grid-template-columns:auto 1fr;
  grid-template-areas:"n name" ". desc"; gap:4px 22px; align-items:baseline;
  padding:clamp(22px,3.6vh,42px) 0; border-bottom:1px solid var(--line2)}
.projects__n{grid-area:n; font-family:var(--mono); color:var(--muted); font-size:14px; padding-top:.6em; transition:color .4s ease}
.projects__name{grid-area:name; font-weight:800; text-transform:uppercase; letter-spacing:-.02em; color:var(--ice);
  font-size:clamp(1.5rem,4.4vw,3.1rem); line-height:1; transition:transform .5s cubic-bezier(.16,1,.3,1)}
.projects__desc{grid-area:desc; color:var(--tech); font-size:clamp(1rem,1.4vw,1.18rem); margin-top:8px; max-width:52ch}
.projects__weld{position:absolute; left:0; bottom:-1px; height:2px; width:0;
  background:linear-gradient(90deg,var(--ignite),var(--cut)); box-shadow:0 0 8px rgba(0,140,255,.6);
  transition:width .55s cubic-bezier(.16,1,.3,1)}
.projects__row:hover .projects__weld,.projects__row:focus-visible .projects__weld{width:100%}
.projects__row:hover .projects__n,.projects__row:focus-visible .projects__n{color:var(--ignite)}
.projects__row:hover .projects__name{transform:translateX(10px)}
.projects__row:focus-visible{outline:2px solid rgba(0,217,255,.5); outline-offset:8px; border-radius:2px}
@media(max-width:640px){.projects__row{grid-template-columns:2.4rem 1fr}}

/* ---------- ATO 4 · PLUX PROTOCOL ---------- */
.proto{list-style:none; position:relative; padding-left:52px; margin-top:8px}
.proto::before{content:""; position:absolute; left:20px; top:.8em; bottom:1.2em; width:2px;
  background:linear-gradient(180deg,var(--ignite),var(--cut) 40%,rgba(120,160,255,.14))}
.proto__step{position:relative; display:flex; gap:18px; align-items:baseline; padding:clamp(16px,2.8vh,28px) 0}
.proto__step::before{content:""; position:absolute; left:-37px; top:calc(.75em + 4px); width:12px; height:12px;
  border-radius:50%; background:#050b18; border:2px solid var(--ignite); box-shadow:0 0 10px rgba(0,140,255,.5)}
.proto__n{font-family:var(--mono); color:var(--ignite); font-size:13px; min-width:2ch}
.proto__step h3{font-size:clamp(1.15rem,2.5vw,1.8rem); font-weight:700; letter-spacing:-.015em}
.proto__step p{color:var(--tech); font-size:clamp(.95rem,1.3vw,1.1rem); margin-top:6px; max-width:52ch; line-height:1.5}

/* ---------- ATO 5 · PROVA ---------- */
.proof__title{font-weight:800; text-transform:uppercase; font-size:clamp(2.2rem,7vw,5rem);
  letter-spacing:-.04em; line-height:.94}
.proof__lede{margin-top:clamp(20px,3vh,34px); max-width:58ch; color:#D3DEEF;
  font-size:clamp(1.05rem,1.6vw,1.35rem); line-height:1.5; text-shadow:0 1px 22px rgba(1,4,10,.6)}
.proof__lede em{font-style:normal; color:#fff}
.proof__meter{margin-top:clamp(34px,5vh,58px); display:flex; align-items:center; gap:clamp(22px,4vw,56px); flex-wrap:wrap}
.meter{display:flex; align-items:baseline; gap:12px}
.meter__val{font-family:var(--mono); font-weight:700; font-size:clamp(3rem,9vw,6rem); color:#fff;
  font-variant-numeric:tabular-nums; line-height:1; text-shadow:0 0 34px rgba(0,180,255,.4)}
.meter__unit{font-family:var(--mono); font-size:13px; letter-spacing:.2em; text-transform:uppercase; color:var(--ignite)}
.proof__hint{font-family:var(--mono); font-size:12px; letter-spacing:.1em; color:var(--tech); max-width:26ch; line-height:1.7}

/* ---------- ATO 6 · AUTORIA ---------- */
.wrap--center{margin-inline:auto}
.author__line{font-weight:700; font-size:clamp(1.5rem,3.8vw,2.9rem); line-height:1.16;
  letter-spacing:-.02em; text-wrap:balance; margin-bottom:clamp(34px,5vh,60px)}
.seal{display:inline-block; background:#F4F8FF; border-radius:10px;
  padding:clamp(14px,2.4vw,26px) clamp(22px,4vw,46px); box-shadow:0 24px 70px rgba(0,24,70,.55)}
.seal img{display:block; width:clamp(220px,32vw,360px); height:auto}
.colophon{margin-top:clamp(30px,4.5vh,54px); font-family:var(--mono); font-size:10.5px;
  line-height:1.95; letter-spacing:.06em; color:var(--muted); opacity:.82}
.colophon b{color:var(--tech); font-weight:500}

/* ---------- ATO 7 · CTA ---------- */
.start__title{font-weight:800; text-transform:uppercase; font-size:clamp(2.6rem,10vw,7rem);
  line-height:.9; letter-spacing:-.045em}
.start__title .ln{display:block}
.start__title .ln__i{display:inline-block}
.start__title .ln--out .ln__i{-webkit-text-fill-color:transparent; -webkit-text-stroke:1.4px rgba(168,182,204,.6); color:transparent}
.start__lede{margin-top:clamp(20px,3vh,32px); color:var(--tech); font-size:clamp(1.1rem,1.7vw,1.5rem)}
.cta--lg{margin-top:clamp(28px,4vh,44px); padding:18px 34px; font-size:14px}
.contacts{list-style:none; display:flex; gap:clamp(20px,5vw,56px); flex-wrap:wrap; margin-top:clamp(34px,5vh,56px)}
.contacts li{display:flex; flex-direction:column; gap:7px}
.contacts__k{font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--tech)}
.contacts__v{color:var(--ice); font-size:15px; text-decoration:none; border-bottom:1px solid var(--line2); padding-bottom:2px; transition:color .3s ease, border-color .3s ease; align-self:flex-start}
.contacts__v:hover{color:var(--ignite); border-color:var(--ignite)}
.contacts__v:focus-visible{outline:2px solid var(--ignite); outline-offset:3px; border-radius:2px}
.ph{color:var(--muted); font-size:15px; font-style:italic; display:inline-flex; align-items:center; gap:8px}
.ph::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--muted); animation:phpulse 2.4s ease-in-out infinite}
@keyframes phpulse{0%,100%{opacity:.35}50%{opacity:1}}
.start__foot{margin-top:clamp(52px,8vh,92px); display:flex; justify-content:space-between; align-items:center;
  gap:16px; flex-wrap:wrap; border-top:1px solid var(--line); padding-top:24px}
.copy{font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--muted)}

/* ---------- ASSINATURA (banda final dedicada) ---------- */
.sign{position:relative; z-index:10; overflow:hidden; text-align:center;
  padding:clamp(72px,12vh,150px) var(--pad) clamp(56px,9vh,104px); border-top:1px solid var(--line2)}
.sign::before{content:""; position:absolute; inset:0; z-index:-1; background:rgba(3,7,16,.92)}
.sign__wrap{max-width:860px; margin:0 auto}
.sign__line{font-weight:700; font-size:clamp(1.3rem,3vw,2.3rem); line-height:1.22; letter-spacing:-.02em;
  text-wrap:balance; color:var(--ice); margin-bottom:clamp(36px,5.5vh,62px); text-shadow:0 1px 20px rgba(1,4,10,.6)}
.sign__img{width:clamp(240px,44vw,470px); height:auto; display:block; margin:0 auto;
  filter:drop-shadow(0 6px 28px rgba(0,70,160,.3))}
.sign .colophon{margin-top:clamp(32px,4.5vh,54px)}
.sign .copy{display:block; margin-top:16px}

@media(max-width:640px){
  .index__row{grid-template-columns:2.6rem 1fr}
  .proto{padding-left:42px}
  .proto__step::before{left:-31px}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .mk--loader .mk__p{animation:none; stroke-dashoffset:0}
  .mk--loader .mk__node{animation:none; opacity:1}
  .loader,.loader__center{transition:none}
  .title .ln__i{transform:none}
  .revealed .title .ln__i,.revealed .lede,.revealed .cta,.revealed .topbar,.revealed .hero{transition:none}
  .scroll i{animation:none}
  .cta svg{transition:none}
  .js [data-reveal] .r{opacity:1; transform:none}
  .js [data-reveal].in .r{transition:none}
  .index__name,.index__weld,.index__n{transition:none}
  .projects__name,.projects__weld,.projects__n{transition:none}
  .ph::before{animation:none}
}