/* ============================================================
   Homepage hero — "clean premium, arranged" (2026-10-11)
   Built on the site's own v2.css design system: Manrope, glass
   surfaces (--card-bg/--card-border), indigo accent family
   (#6366f1/#8b5cf6, #a5b4fc/#818cf8/#c7d2fe), --ease motion.
   v2: tidied vertical rhythm (shared spacing scale), staggered
   text entrance, "Uptime 99%" badge above the server tile, and
   one shared beat grid (--hh-*) syncing text + visual.
   Transform/opacity/stroke-dashoffset only. No JavaScript.
   ============================================================ */

/* ── choreography tokens (shared beat grid for text + visual) ── */
.home-hero{
  --hh-base:.05s;                 /* first beat */
  --hh-step:.09s;                 /* beat interval — text and visual share it */
  --hh-dur:.62s;                  /* entrance duration */
  --hh-ease:var(--ease,cubic-bezier(.21,1.02,.73,1));
}

/* ── layout ── */
.home-hero{position:relative;max-width:1160px;margin:0 auto;padding:64px 24px 0;
  overflow:hidden}
.hh-grid{position:relative;display:grid;grid-template-columns:minmax(0,10fr) minmax(0,9fr);
  align-items:center;gap:56px;min-width:0}

/* ── left: copy — one consistent vertical rhythm (24/18/32/26) ── */
.hh-copy{position:relative;min-width:0}
.hh-kicker{display:inline-flex;align-items:center;gap:10px;font-size:11px;font-weight:800;
  letter-spacing:2px;text-transform:uppercase;color:#818cf8;
  background:#6366f114;border:1px solid #6366f12e;border-radius:999px;padding:6px 14px;margin:0}
.hh-kicker-line{width:22px;height:2px;border-radius:1px;
  background:linear-gradient(90deg,#6366f1,#8b5cf6);flex:none}
.home-hero h1{margin:24px 0 0;font-size:clamp(32px,4.2vw,52px);line-height:1.12;
  letter-spacing:-1px;font-weight:800;color:var(--text-primary)}
.hh-line{display:block}
.hh-grad{color:transparent;
  background:linear-gradient(120deg,#a5b4fc 0%,#818cf8 45%,#c4b5fd 100%);
  background-size:200% 100%;background-position:0% 0;
  -webkit-background-clip:text;background-clip:text}
.hh-sub{margin:18px 0 0;max-width:46ch;font-size:15px;line-height:1.75;
  color:var(--text-secondary)}
.hh-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:32px 0 0}
.hh-facts{list-style:none;display:flex;flex-wrap:wrap;gap:8px 22px;
  padding:0;margin:26px 0 0;font-size:12.5px;font-weight:700;color:var(--text-secondary)}
.hh-facts li{display:inline-flex;align-items:center;gap:8px}
.hh-facts svg{width:14px;height:14px;color:#a5b4fc;flex:none}

/* ── right: SVG network visual ── */
.hh-visual{position:relative;min-width:0}
.hh-net{display:block;width:100%;height:auto;max-width:560px;aspect-ratio:560/520;
  margin-left:auto}
/* mobile scene is hidden by default (desktop/tablet keep the original art) */
.hh-node-lbl{fill:#818cf8;font-size:10.5px;font-weight:700;letter-spacing:.4px;
  text-anchor:middle;font-family:inherit}
/* solid stroke: a gradient here used objectBoundingBox units, which
   collapses to nothing on perfectly horizontal links (zero-height bbox)
   and made the Server→Desktop line + its pulses render "floating".
   No `transition: d` — hero-live.js owns pipe motion frame-by-frame
   (pipe chase); a CSS d transition would lag against per-frame sets. */
.hh-link{stroke:#818cf8;stroke-width:1.6;stroke-linecap:round;
  stroke-dasharray:3 7;fill:none;opacity:.5}
.hh-links,.hh-nodes,.hh-dots{pointer-events:none}
.hh-dot{fill:#a5b4fc;filter:drop-shadow(0 0 5px #6366f1aa)}
.hh-dot-b{fill:#c4b5fd;filter:drop-shadow(0 0 5px #8b5cf6aa)}
.hh-server rect:first-child{filter:drop-shadow(0 14px 34px #6366f126)}
.hh-node circle:first-child{filter:drop-shadow(0 6px 18px #00000059)}
/* ── multi-server pipeline scene: flag tiles, trunk, masked IPs ── */
.hh-srv-card{filter:drop-shadow(0 8px 22px #6366f121)}
.hh-srv-name{fill:#c7d2fe;font-size:12px;font-weight:800;letter-spacing:.3px;
  font-family:inherit;dominant-baseline:middle}
.hh-ip{fill:#64748b;font-size:9.5px;font-weight:600;letter-spacing:.6px;
  text-anchor:middle;font-family:inherit;font-variant-numeric:tabular-nums}
/* mini server chassis under the flag on each region tile */
.hh-chassis{opacity:.85}
/* subscriber spotlight node: iPhone-style squircle avatar + name + real IP.
   The gradient is painted per-node via inline style --av-a/--av-b (hue from
   the user's name, set by SSR + hero-live.js); gloss + ring keep it iOS. */
.hh-av{filter:drop-shadow(0 2px 6px #00000040)}
.hh-av-sq{fill:var(--av-a,#6366f1);stroke:var(--av-b,#8b5cf6);stroke-width:1.2;
  transition:fill .6s ease,stroke .6s ease}
.hh-av-gloss{fill:url(#hhAvGloss);stroke:none;pointer-events:none}
.hh-av-tx{fill:#ffffff;font-size:12.5px;font-weight:800;text-anchor:middle;
  font-family:inherit;paint-order:stroke;stroke:#00000030;stroke-width:.5}
.hh-av-tx-m{font-size:8.5px}
.hh-node-lbl{fill:#c7d2fe}

/* ── social-proof pill — "300+ active users", same card language as uptime ── */
.hh-users-card{fill:var(--card-bg);stroke:#6366f149;stroke-width:1;
  filter:drop-shadow(0 8px 22px #6366f12b)}
.hh-users-dot{fill:#6ee7b7;filter:drop-shadow(0 0 5px #10b98199)}
.hh-users-tx{fill:var(--text-primary);font-size:11.5px;font-weight:800;
  letter-spacing:.4px;font-family:inherit;dominant-baseline:middle}
.hh-users-tx-m{font-size:9px}

/* ── uptime panel — sits above the server tile, same beat grid as the text ── */
.hh-uptime-card{fill:var(--card-bg);stroke:#6366f149;stroke-width:1;
  filter:drop-shadow(0 8px 22px #6366f12b)}
.hh-uptime-dot{fill:#6ee7b7;filter:drop-shadow(0 0 5px #10b98199)}
.hh-uptime-cap{fill:#818cf8;font-size:9px;font-weight:800;letter-spacing:1.6px;
  font-family:inherit;dominant-baseline:middle}
.hh-uptime-val{fill:var(--text-primary);font-size:19px;font-weight:800;
  letter-spacing:-.2px;font-family:inherit}
.hh-uptime-unit{fill:#6ee7b7;font-size:12px;font-weight:800}
.hh-spark-line{fill:none;stroke:#6ee7b7;stroke-width:1.8;stroke-linecap:round;
  stroke-linejoin:round;filter:drop-shadow(0 0 4px #10b98166)}
.hh-spark-fill{fill:url(#hhSparkFill);stroke:none}

/* ── in-hero offers zone ── */
.hh-offers{position:relative;margin-top:40px;padding:16px 18px;
  background:var(--card-bg);border:1px solid var(--card-border);border-radius:18px;
  backdrop-filter:blur(20px) saturate(130%);
  box-shadow:0 10px 30px var(--shadow-color),inset 0 1px 0 #ffffff0d}
.hh-offers-title{display:flex;align-items:center;gap:8px;margin:0 0 12px;
  font-size:10px;font-weight:800;letter-spacing:2px;text-transform:uppercase;
  color:#818cf8}
a.hh-offers-title-link{color:#818cf8;text-decoration:none}
a.hh-offers-title-link:hover{color:#c7d2fe}
a.hh-offers-title-link:focus-visible{outline:3px solid #a5b4fc;outline-offset:3px;border-radius:8px}
.hh-offers-title .i{width:13px;height:13px;flex:none;color:#a5b4fc}
.hh-offers-line{width:34px;height:1px;flex:none;
  background:linear-gradient(90deg,#6366f155,transparent)}
.hh-offers-row{display:flex;flex-wrap:wrap;gap:9px}
.hh-offers-row a{display:inline-flex;align-items:center;gap:8px;min-height:40px;
  padding:8px 15px;border-radius:999px;border:1px solid var(--card-border);
  background:var(--input-bg);color:var(--text-primary);
  font-size:12.5px;font-weight:700;line-height:1;white-space:nowrap;
  transition:border-color .22s var(--ease),background .22s var(--ease),
    color .22s var(--ease),transform .22s var(--ease)}
.hh-offers-row a:hover{border-color:#6366f16e;background:#6366f10f;color:#c7d2fe;
  transform:translateY(-2px)}
.hh-offers-row a:active{transform:translateY(0)}
.hh-offers-row a:focus-visible{outline:3px solid #a5b4fc;outline-offset:3px}

/* ════════════════════════════════════════════════════════════
   entrance choreography — one beat grid for text AND visual
   (static & fully visible under prefers-reduced-motion below)
   text:   i0 kicker · i1 headline L1 · i2 headline L2 · i3 sub
           i4/i5 CTAs · i6 facts · i8 offers title · i9 offers row
   visual: i2 uptime badge · i3 server tile · links draw i4→
           i4-i7 user nodes · pulses after links finish
   ════════════════════════════════════════════════════════════ */
@media(prefers-reduced-motion:no-preference){
  /* staggered text entrance: fade + rise, shared tokens */
  .hh-rise{animation:hh-rise var(--hh-dur) var(--hh-ease) both;
    animation-delay:calc(var(--hh-base) + var(--hh-i,0)*var(--hh-step))}

  /* headline gradient line: slow tasteful sheen, starts after entrance */
  .hh-grad.hh-rise{animation:hh-rise var(--hh-dur) var(--hh-ease) both,
    hh-shimmer 8s var(--hh-ease) 1.8s infinite alternate}

  /* uptime panel: pops with headline line 2, then floats gently;
     status dot beacons in sync with the server LEDs (2.2s);
     sparkline draws in once and its tip pulses like a heartbeat */
  .hh-uptime{transform-box:fill-box;transform-origin:center;
    animation:hh-pop var(--hh-dur) var(--hh-ease) both,
      hh-float 6s ease-in-out infinite alternate;
    animation-delay:calc(var(--hh-base) + var(--hh-i,0)*var(--hh-step)),1.5s}
  .hh-uptime-dot{animation:hh-beacon 2.2s ease-in-out infinite}
  .hh-spark-line{stroke-dasharray:160;stroke-dashoffset:160;
    animation:hh-draw 1.4s var(--hh-ease) 1.7s both}
  .hh-spark-fill{opacity:0;animation:hh-fadein .8s ease 2.6s both}
  .hh-spark-tip{animation:hh-beacon 1.6s ease-in-out infinite}

  /* server tile pops with the description (beat 3) */
  .hh-server-pop{transform-box:fill-box;transform-origin:center;
    animation:hh-pop var(--hh-dur) var(--hh-ease) both;
    animation-delay:calc(var(--hh-base) + var(--hh-i,0)*var(--hh-step))}
  /* links draw in from the hub after the server lands */
  .hh-link{stroke-dashoffset:400;
    animation:hh-draw 1.1s var(--hh-ease) both;
    animation-delay:calc(var(--hh-base) + 4*var(--hh-step))}

  /* user nodes pop on their own beats */
  .hh-node-pop{transform-box:fill-box;transform-origin:center;
    animation:hh-pop var(--hh-dur) var(--hh-ease) both;
    animation-delay:calc(var(--hh-base) + var(--hh-i,0)*var(--hh-step))}

  /* traveling pulses begin only after the links have drawn */
  .hh-pulses{animation:hh-fadein .45s ease both;animation-delay:1.5s}
}

@keyframes hh-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes hh-pop{0%{opacity:0;transform:scale(.86)}60%{opacity:1}100%{opacity:1;transform:scale(1)}}
@keyframes hh-draw{from{stroke-dashoffset:400}to{stroke-dashoffset:0}}
@keyframes hh-fadein{from{opacity:0}to{opacity:1}}
@keyframes hh-float{from{transform:translateY(0)}to{transform:translateY(-4px)}}
@keyframes hh-beacon{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes hh-shimmer{from{background-position:100% 0}to{background-position:0% 0}}

/* ── responsive ── */
@media(max-width:980px){
  .home-hero{padding:48px 16px 0}
  .hh-grid{grid-template-columns:minmax(0,1fr);gap:36px}
  .hh-visual{order:2;max-width:520px;margin:0 auto;width:100%}
  .hh-net{margin:0 auto}
}
@media(max-width:640px){
  .home-hero{padding:36px 12px 0}
  .hh-grid{gap:28px}
  /* tighten the text stack (kicker → headline → sub → CTAs → facts) */
  .home-hero h1{margin-top:14px;font-size:clamp(27px,7.6vw,34px)}
  .hh-sub{font-size:13.5px;margin-top:10px;line-height:1.65}
  .hh-actions{margin-top:20px;gap:10px}
  .hh-actions .btn{flex:1 1 auto;justify-content:center}
  .hh-facts{gap:6px 16px;margin-top:16px;font-size:11.5px}
  /* text → visual → chips. Same network art as desktop (identical
     composition), just height-capped so the hero stays compact */
  .hh-visual{max-width:none;margin-top:2px}
  .hh-net{margin:0 auto;max-height:60vh;width:auto;max-width:100%}
  .hh-offers{margin-top:22px;padding:14px;border-radius:15px}
  .hh-offers-row{gap:8px}
  .hh-offers-row a{flex:1 1 auto;justify-content:center;min-height:44px}
}

/* ── reduced motion: fully static, everything visible, nothing travels ── */
@media(prefers-reduced-motion:reduce){
  .hh-rise,.hh-server-pop,.hh-node-pop,.hh-uptime,.hh-link,.hh-pulses{
    animation:none!important;opacity:1;transform:none}
  .hh-link{stroke-dashoffset:0}
  .hh-link{transition:none}
  .hh-net *{animation:none!important}
  .hh-net .hh-pulses{display:none}
  .hh-grad{background-position:0% 0}
  .hh-uptime-dot{opacity:1}
  .hh-spark-line{stroke-dashoffset:0}
  .hh-spark-fill,.hh-spark-tip{opacity:1}
  .hh-offers-row a{transition:none}
}