/* Hero: blueprint grid, network canvas, copy, preloader, cursor, static fallback */
.hero{position:relative;min-height:calc(100vh - 72px);min-height:calc(100svh - 72px);overflow:hidden}
.has-cursor .hero{cursor:none}
.hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.075) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.075) 1px,transparent 1px);background-size:40px 40px,40px 40px,200px 200px,200px 200px;-webkit-mask-image:radial-gradient(ellipse 80% 70% at 68% 50%,#000 15%,transparent 76%);mask-image:radial-gradient(ellipse 80% 70% at 68% 50%,#000 15%,transparent 76%)}
.hero-glow{position:absolute;width:760px;height:760px;border-radius:50%;left:calc(68% - 380px);top:calc(50% - 380px);background:radial-gradient(circle,rgba(255,46,61,.2),transparent 62%);filter:blur(10px)}
#gl{position:absolute;inset:0;width:100%;height:100%;display:block}
.is-static #gl{display:none}

/* static fallback network (SVG) */
#hero-fallback{display:block;position:absolute;right:2%;top:50%;transform:translateY(-52%);width:min(62%,880px);height:auto}
.is-live #hero-fallback{display:none}
.is-static #hero-fallback,.no-js #hero-fallback{display:block}
#hero-fallback text{font-family:var(--font-mono);font-size:20px;letter-spacing:.14em;text-transform:uppercase;fill:var(--text)}

.nlabel{position:absolute;left:0;top:0;z-index:3;pointer-events:none;display:flex;align-items:center;gap:8px;color:var(--text);font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;will-change:transform;opacity:0;transition:opacity .6s}
.nlabel::before{content:"";width:22px;height:1px;background:linear-gradient(90deg,var(--accent),transparent)}
.ready .nlabel{opacity:1}

.corner{position:absolute;width:18px;height:18px;border:1px solid #4a4a55}
.tl{top:20px;left:24px;border-right:0;border-bottom:0}.tr{top:20px;right:24px;border-left:0;border-bottom:0}
.bl{bottom:24px;left:24px;border-right:0;border-top:0}.br{bottom:24px;right:24px;border-left:0;border-top:0}
.coord{position:absolute;color:#7b7b86;top:28px;left:52px}
.stat{position:absolute;right:48px;top:64px;z-index:4;color:#7b7b86;text-align:right;line-height:1.9}
.stat b{color:var(--text);font-weight:500;font-variant-numeric:tabular-nums}
.hint{position:absolute;right:48px;bottom:56px;z-index:4;color:#7b7b86;text-align:right}
.is-static .stat,.is-static .hint,.no-js .stat,.no-js .hint{display:none}

.hero-copy{position:absolute;z-index:4;left:48px;bottom:56px;max-width:780px}
.eyebrow{display:inline-flex;align-items:center;gap:10px;color:var(--muted);border:1px solid var(--line);padding:8px 14px;border-radius:999px;background:rgba(7,7,10,.55);backdrop-filter:blur(8px);animation:rth-rise .9s var(--ease) .1s both}
.dot{width:7px;height:7px;border-radius:50%;background:var(--accent);animation:rth-pulse 2s infinite}
@keyframes rth-pulse{0%{box-shadow:0 0 0 0 rgba(255,46,61,.7)}70%{box-shadow:0 0 0 10px rgba(255,46,61,0)}100%{box-shadow:0 0 0 0 rgba(255,46,61,0)}}
.hero h1{font-size:clamp(2.8rem,6.2vw,5.8rem);line-height:.96;font-weight:800;letter-spacing:-.045em;margin:24px 0 20px}
.hero h1 .line{display:block;overflow:hidden;padding-bottom:.08em}
.hero h1 .line>span{display:inline-block;animation:rth-rise .9s var(--ease) both}
.hero h1 .line:nth-child(2)>span{animation-delay:.1s}
.hero .lede{color:var(--muted);font-size:1.1rem;max-width:30em;animation:rth-rise .9s var(--ease) .2s both}
.hero .cta{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap;animation:rth-rise .9s var(--ease) .3s both}

/* entrance: transform-only, so the text is painted (and counts for LCP) from the first frame */
@keyframes rth-rise{from{transform:translateY(.45em)}to{transform:none}}

/* custom cursor (added by ui.js on fine pointers) */
.cur,.ring{position:fixed;left:0;top:0;pointer-events:none;z-index:90;opacity:0}
.cur{width:12px;height:12px;border-radius:50%;background:var(--accent);mix-blend-mode:screen}
.ring{width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,46,61,.6);transition:width .3s var(--ease),height .3s var(--ease),background .3s}
.ring.big{width:84px;height:84px;background:rgba(255,46,61,.08)}

@media (max-width:820px){
  .hero{min-height:calc(100svh - 72px);min-height:640px}
  .hero-copy{left:24px;right:24px;bottom:40px}
  .hero-glow{left:50%;margin-left:-380px;top:18%}
  .hint,.stat{display:none}
  .nlabel{font-size:9px}.nlabel::before{width:12px}
  .coord{display:none}
  #hero-fallback{width:100%;right:0;top:34%}
}
@media (prefers-reduced-motion:reduce){
}