/* UNO HUB · "A rede acende" · editorial-industrial dark + brasa */
:root{
  --bg:#070708;
  --bg2:#0c0c0e;
  --panel:#121214;
  --panel2:#17130e;
  --line:rgba(255,255,255,0.09);
  --line-hot:rgba(255,122,26,0.38);
  --ink:#f5f3ef;
  --mut:#a7a29a;
  --dim:#6e6a63;
  --ember:#ff7a1a;
  --amber:#ffb35c;
  --red:#ff4d24;
  --font-d:"Bricolage Grotesque", system-ui, sans-serif;
  --font-b:"Instrument Sans", system-ui, sans-serif;
  --font-m:"Spline Sans Mono", ui-monospace, monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-b); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
.mono{font-family:var(--font-m); font-variant-numeric:tabular-nums; letter-spacing:-0.01em}
.hot{color:var(--ember)}
em{font-style:normal; color:var(--ember)}
::selection{background:var(--ember); color:#160b02}

/* grain */
.grain{position:fixed; inset:0; pointer-events:none; z-index:60; opacity:.05; mix-blend-mode:overlay;
  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='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");}

/* ============ topbar ============ */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; gap:28px;
  padding:14px clamp(18px,4vw,44px);
  background:linear-gradient(rgba(7,7,8,0.82), rgba(7,7,8,0.55) 70%, transparent);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}
.wordmark{
  font-family:var(--font-d); font-weight:800; font-size:19px; letter-spacing:.04em;
  color:var(--ink); text-decoration:none;
}
.wordmark span{color:var(--ember)}
.wordmark.sm{font-size:16px}
.topnav{display:flex; gap:22px; margin-left:auto}
.topnav a{
  color:var(--mut); text-decoration:none; font-size:13.5px; font-weight:500; letter-spacing:.02em;
  transition:color .18s ease;
}
.topnav a:hover{color:var(--ink)}
@media (max-width:760px){ .topnav{display:none} .topbar{gap:12px} .topbar .btn{margin-left:auto} }

/* ============ buttons ============ */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-b); font-weight:600; font-size:15.5px; letter-spacing:.01em;
  padding:15px 26px; border-radius:999px; text-decoration:none; cursor:pointer;
  transition:transform .16s cubic-bezier(.2,.9,.3,1.3), box-shadow .2s ease, background-color .2s ease, border-color .2s ease;
}
.btn:active{transform:scale(.97)}
.btn-solid{
  background:linear-gradient(140deg, var(--amber), var(--ember) 55%, #f2560f);
  color:#180b01; box-shadow:0 6px 28px rgba(255,122,26,.32), inset 0 1px 0 rgba(255,255,255,.35);
}
.btn-solid:hover{box-shadow:0 8px 40px rgba(255,122,26,.5), inset 0 1px 0 rgba(255,255,255,.35); transform:translateY(-1px)}
.btn-ghost{
  color:var(--ink); border:1px solid var(--line); background:rgba(255,255,255,0.02);
}
.btn-ghost:hover{border-color:var(--line-hot); background:rgba(255,122,26,0.05)}
.btn-sm{padding:11px 18px; font-size:13.5px; min-height:44px}
.btn-lg{padding:19px 40px; font-size:17px}
.btn:focus-visible{outline:2px solid var(--amber); outline-offset:3px}
.arr{font-family:var(--font-m)}

/* ============ hero ============ */
.hero{position:relative; min-height:100svh; display:flex; flex-direction:column; justify-content:center; padding:110px clamp(18px,5vw,56px) 30px; isolation:isolate}
#net{position:absolute; inset:0; width:100%; height:100%; z-index:-2}
.hero-fade{position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(120% 90% at 18% 40%, rgba(7,7,8,0.88) 0%, rgba(7,7,8,0.45) 45%, transparent 75%),
    linear-gradient(transparent 62%, var(--bg) 96%);
}
.kicker{font-family:var(--font-m); font-size:12.5px; letter-spacing:.32em; color:var(--amber); margin:0 0 18px}
.hero h1{
  font-family:var(--font-d); font-weight:800; margin:0 0 26px;
  font-size:clamp(44px, 8.2vw, 108px); line-height:.98; letter-spacing:-0.025em;
  text-wrap:balance;
}
.lede{max-width:560px; font-size:clamp(16px,1.6vw,19px); color:var(--mut); margin:0 0 34px}
.lede b, .big-p strong{color:var(--ink); font-weight:600}
.cta-row{display:flex; gap:14px; flex-wrap:wrap}

.hero-stats{
  margin-top:clamp(40px,7vh,84px);
  display:flex; align-items:center; gap:clamp(10px,3vw,30px); flex-wrap:wrap;
  border-top:1px solid var(--line); padding-top:26px; max-width:820px;
}
.hstat{display:flex; flex-direction:column; gap:2px}
.hs-num{font-size:clamp(30px,4.4vw,52px); font-weight:600; line-height:1; color:var(--mut)}
.hs-hot .hs-num{color:var(--ember); text-shadow:0 0 34px rgba(255,122,26,.55)}
.hs-lab{font-size:12.5px; color:var(--dim); letter-spacing:.04em}
.hs-arrow{flex:0 0 clamp(22px,4vw,54px); height:1px; background:linear-gradient(90deg, var(--dim), var(--ember)); position:relative}
.hs-arrow::after{content:""; position:absolute; right:-1px; top:-3.5px; border-left:7px solid var(--ember); border-top:4px solid transparent; border-bottom:4px solid transparent}
.hero-foot{font-size:11.5px; color:var(--dim); letter-spacing:.06em; margin:14px 0 0}
@media (max-width:700px){
  .hero-stats{flex-wrap:nowrap; gap:10px; justify-content:space-between}
  .hstat{flex-shrink:1; min-width:0}
  .hs-num{font-size:26px}
  .hs-lab{font-size:10.5px; letter-spacing:.02em; white-space:nowrap}
  .hs-arrow{flex:0 1 18px; min-width:12px}
}

/* ============ ticker ============ */
.ticker{overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--bg2); padding:15px 0}
.ticker-track{display:flex; gap:34px; white-space:nowrap; width:max-content; animation:tick 36s linear infinite}
.ticker-track span{font-family:var(--font-m); font-size:13px; letter-spacing:.18em; color:var(--mut)}
.ticker-track i{color:var(--ember); font-style:normal; font-size:9px; align-self:center}
@keyframes tick{to{transform:translateX(-50%)}}

/* ============ sections ============ */
.sec{
  display:grid; grid-template-columns:minmax(200px,340px) 1fr; gap:clamp(28px,5vw,80px);
  padding:clamp(72px,11vh,130px) clamp(18px,5vw,56px);
  max-width:1280px; margin:0 auto;
}
.sec-tight{padding-top:clamp(56px,8vh,96px)}
@media (max-width:900px){ .sec{grid-template-columns:1fr; gap:34px} }
.sec-head{position:relative}
.sec-num{
  display:block; font-size:12.5px; letter-spacing:.3em; color:var(--ember); margin-bottom:14px;
}
.sec-num::after{content:""; display:block; width:44px; height:1px; background:var(--line-hot); margin-top:14px}
.sec h2{
  font-family:var(--font-d); font-weight:700; font-size:clamp(30px,3.6vw,46px);
  line-height:1.04; letter-spacing:-0.02em; margin:0;
}
.sec-sub{color:var(--dim); font-size:14.5px; margin:14px 0 0}
.sec-sub b{color:var(--mut)}
.sec-body{min-width:0}
.big-p{font-size:clamp(18px,2vw,23px); line-height:1.5; margin:0 0 18px; letter-spacing:-0.01em}
.sec-body > p{color:var(--mut); max-width:640px}

/* pillars */
.pillars{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; margin-top:36px}
.pillar{border:1px solid var(--line); border-radius:18px; padding:22px 20px; background:linear-gradient(170deg, rgba(255,255,255,0.025), transparent 60%); transition:border-color .25s ease, transform .25s ease}
.pillar:hover{border-color:var(--line-hot); transform:translateY(-3px)}
.pillar svg{width:26px; height:26px; color:var(--ember); margin-bottom:14px}
.pillar h3{font-family:var(--font-d); font-size:17px; font-weight:600; margin:0 0 6px}
.pillar p{font-size:14px; color:var(--mut); margin:0}

/* ============ phases ============ */
.phases{display:grid; grid-template-columns:1fr 1fr; gap:16px}
@media (max-width:760px){ .phases{grid-template-columns:1fr} }
.phase{
  border:1px solid var(--line); border-radius:22px; padding:30px 28px;
  background:linear-gradient(165deg, rgba(255,255,255,0.03), transparent 55%);
}
.phase-hot{
  border-color:var(--line-hot);
  background:
    radial-gradient(140% 110% at 85% -10%, rgba(255,122,26,0.14), transparent 55%),
    linear-gradient(165deg, rgba(255,122,26,0.05), transparent 55%);
  box-shadow:0 24px 60px -30px rgba(255,122,26,0.25);
}
.phase-tag{display:inline-block; font-size:11px; letter-spacing:.22em; color:var(--amber); border:1px solid var(--line-hot); border-radius:999px; padding:6px 12px; margin-bottom:18px}
.phase h3{font-family:var(--font-d); font-size:clamp(21px,2.2vw,27px); font-weight:700; line-height:1.1; margin:0 0 22px; letter-spacing:-0.015em}
.rates{list-style:none; margin:0; padding:0}
.rates li{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  padding:13px 0; border-top:1px solid var(--line); font-size:15px; color:var(--mut);
}
.rates b{font-weight:600; font-size:19px; color:var(--ink); white-space:nowrap}
.rates b.hot{font-size:26px; text-shadow:0 0 26px rgba(255,122,26,.45)}
.arr-r{font-style:normal; color:var(--dim); font-weight:400; padding:0 2px}
.phase-note{margin:18px 0 0; font-size:13.5px; color:var(--amber)}

/* ============ calc ============ */
.calc{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; perspective:1200px}
@media (max-width:860px){ .calc{grid-template-columns:1fr} }
.calc-card{
  border:1px solid var(--line); border-radius:22px; padding:26px 24px 22px;
  background:linear-gradient(170deg, rgba(255,255,255,0.03), transparent 60%);
  transform-style:preserve-3d; will-change:transform;
  transition:border-color .25s ease;
}
.calc-card:hover{border-color:rgba(255,255,255,0.18)}
.cc-hot{
  border-color:var(--line-hot);
  background:
    radial-gradient(130% 100% at 50% -20%, rgba(255,122,26,0.16), transparent 60%),
    linear-gradient(170deg, rgba(255,122,26,0.05), transparent 60%);
  box-shadow:0 30px 70px -34px rgba(255,122,26,0.35);
}
.cc-hot:hover{border-color:rgba(255,154,66,0.7)}
.cc-tag{display:block; font-size:11px; letter-spacing:.2em; color:var(--dim); margin-bottom:16px}
.cc-hot .cc-tag{color:var(--amber)}
.cc-val{display:block; font-size:clamp(34px,3.6vw,46px); font-weight:600; line-height:1; margin-bottom:16px}
.cc-hot .cc-val{color:var(--ember); text-shadow:0 0 34px rgba(255,122,26,.5)}
.cc-bar{height:5px; border-radius:99px; background:rgba(255,255,255,0.06); overflow:hidden; margin-bottom:14px}
.cc-bar i{display:block; height:100%; width:var(--w); border-radius:99px;
  background:linear-gradient(90deg, var(--amber), var(--ember));
  transform:scaleX(0); transform-origin:left; transition:transform 1s cubic-bezier(.2,.8,.2,1) .25s}
.in-view .cc-bar i{transform:scaleX(1)}
.cc-sub{font-size:13px; color:var(--mut); margin:0; line-height:1.45}
.calc-punch{margin:34px 0 0; font-family:var(--font-d); font-weight:600; font-size:clamp(19px,2.2vw,26px); letter-spacing:-0.01em; max-width:720px}
.calc-punch b{font-weight:600}

/* ============ goals ============ */
.goals{display:flex; flex-direction:column; gap:12px; margin:30px 0 36px}
.goal{
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  border:1px solid var(--line); border-radius:16px; padding:18px 22px;
  background:linear-gradient(170deg, rgba(255,255,255,0.02), transparent);
}
.g-hot{border-color:var(--line-hot); background:radial-gradient(120% 160% at 90% 0%, rgba(255,122,26,0.12), transparent 55%)}
.g-pct{font-size:24px; font-weight:600; color:var(--mut); min-width:86px}
.g-hot .g-pct{color:var(--ink)}
.g-arrow{flex:0 0 34px; height:1px; background:linear-gradient(90deg, var(--dim), var(--ember))}
.g-bonus{font-size:30px; font-weight:600; color:var(--ember)}
.g-lab{color:var(--mut); font-size:14px}
.example{border:1px solid var(--line); border-radius:22px; padding:26px 26px 20px; background:var(--bg2)}
.ex-tag{display:block; font-size:11px; letter-spacing:.2em; color:var(--amber); margin-bottom:16px}
.ex-table{width:100%; border-collapse:collapse; font-size:15px}
.ex-table th{font-family:var(--font-m); font-weight:500; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); text-align:left; padding:0 10px 10px 0}
.ex-table td{padding:12px 10px 12px 0; border-top:1px solid var(--line); color:var(--mut)}
.ex-hot td{color:var(--ink)}
.ex-hot td:last-child{color:var(--ember); font-weight:600}
.ex-note{font-size:12.5px; color:var(--dim); margin:16px 0 0}

/* ============ bens ============ */
.bens{list-style:none; margin:0 0 26px; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:12px}
@media (max-width:760px){ .bens{grid-template-columns:1fr} }
.bens li{
  display:flex; gap:14px; align-items:flex-start;
  border:1px solid var(--line); border-radius:16px; padding:18px 20px;
  font-size:14.5px; color:var(--ink); line-height:1.5;
  background:linear-gradient(170deg, rgba(255,255,255,0.02), transparent);
  transition:border-color .22s ease;
}
.bens li:hover{border-color:var(--line-hot)}
.bens svg{flex:0 0 22px; width:22px; height:22px; color:var(--ember); margin-top:1px}
.warn{
  display:flex; gap:16px; align-items:flex-start;
  border:1px solid rgba(255,179,92,0.35); border-radius:18px; padding:20px 22px;
  background:radial-gradient(120% 200% at 0% 0%, rgba(255,122,26,0.09), transparent 60%);
}
.warn svg{flex:0 0 24px; width:24px; height:24px; color:var(--amber); margin-top:2px}
.warn p{margin:0; font-size:14.5px; color:var(--mut)}
.warn b{color:var(--amber)}

/* ============ faq ============ */
.faq-body{max-width:760px}
details{border-top:1px solid var(--line)}
details:last-of-type{border-bottom:1px solid var(--line)}
summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:20px 4px; font-family:var(--font-d); font-weight:600; font-size:clamp(16px,1.7vw,19px);
  transition:color .18s ease;
}
summary::-webkit-details-marker{display:none}
summary:hover{color:var(--amber)}
summary:focus-visible{outline:2px solid var(--amber); outline-offset:3px; border-radius:6px}
.plus{position:relative; flex:0 0 18px; height:18px}
.plus::before,.plus::after{content:""; position:absolute; background:var(--ember); transition:transform .25s ease}
.plus::before{left:0; right:0; top:8px; height:2px}
.plus::after{top:0; bottom:0; left:8px; width:2px}
details[open] .plus::after{transform:scaleY(0)}
details p{margin:0 0 22px; padding:0 40px 0 4px; color:var(--mut); font-size:15px; max-width:640px}

/* ============ final ============ */
.final{
  position:relative; text-align:center; padding:clamp(90px,14vh,160px) 20px;
  background:
    radial-gradient(60% 55% at 50% 62%, rgba(255,122,26,0.16), transparent 70%),
    radial-gradient(35% 30% at 50% 66%, rgba(255,77,36,0.12), transparent 70%),
    var(--bg);
  overflow:hidden;
}
.final::before{content:""; position:absolute; left:50%; bottom:-160px; transform:translateX(-50%);
  width:640px; height:640px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,122,26,0.16), transparent 62%); filter:blur(10px)}
.final-inner{position:relative; max-width:680px; margin:0 auto}
.final h2{font-family:var(--font-d); font-weight:800; font-size:clamp(44px,7vw,86px); line-height:.98; letter-spacing:-0.025em; margin:0 0 36px}
.steps{list-style:none; margin:0 auto 40px; padding:0; text-align:left; max-width:520px; display:flex; flex-direction:column; gap:14px}
.steps li{display:flex; gap:16px; align-items:baseline; color:var(--mut); font-size:15.5px}
.steps .mono{color:var(--ember); font-size:13px}
.final-note{margin:18px 0 0; font-size:12px; letter-spacing:.22em; color:var(--dim); text-transform:uppercase}

/* ============ footer ============ */
.foot{display:flex; align-items:center; gap:14px; padding:26px clamp(18px,5vw,56px); border-top:1px solid var(--line)}
.foot p{margin:0; color:var(--dim); font-size:13px}

/* ============ reveals ============ */
.reveal{opacity:0; transform:translateY(26px); transition:opacity .8s cubic-bezier(.2,.65,.25,1), transform .8s cubic-bezier(.2,.65,.25,1)}
.reveal.d1{transition-delay:.08s}
.reveal.d2{transition-delay:.16s}
.reveal.d3{transition-delay:.24s}
.reveal.d4{transition-delay:.34s}
.in-view.reveal, .in-view .reveal{opacity:1; transform:none}
.reveal.in-view{opacity:1; transform:none}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1; transform:none; transition:none}
  .ticker-track{animation:none}
  .cc-bar i{transform:scaleX(1); transition:none}
  .btn, .pillar, .calc-card{transition:none}
  #net{display:none}
  .hero{background:radial-gradient(75% 60% at 72% 38%, rgba(255,122,26,0.14), transparent 65%), var(--bg)}
}