*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--bg:#0a0a0a;--card:#111;--border:#1e1e1e;--border-hi:#2d2d2d;--txt:#c9c9c9;--dim:#555;--accent:#a855f7;--accent2:#c084fc;--accent-bg:rgba(168,85,247,.06);--accent-border:rgba(168,85,247,.15)}
html{scroll-behavior:smooth;scroll-padding-top:60px}
body{font-family:'SF Mono','Fira Code','Cascadia Code','JetBrains Mono',Consolas,'Liberation Mono','Courier New',monospace;background:var(--bg);color:var(--txt);min-height:100vh;overflow-x:hidden}
a{color:inherit;text-decoration:none}
::selection{background:var(--accent);color:#000}

/* ── Particle canvas bg ── */
#particles{position:fixed;inset:0;z-index:0;pointer-events:none}

/* ── Grid overlay ── */
body::before{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.02;background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);background-size:32px 32px}

/* ── Top accent line ── */
body::after{content:'';position:fixed;top:56px;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent 10%,var(--accent) 50%,transparent 90%);opacity:.4;z-index:10}

/* ── Site navigation ── */
.site-nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;gap:0;padding:0 24px;height:56px;background:rgba(10,10,10,.88);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--border)}
.nav-logo{display:flex;align-items:center;gap:10px;margin-right:auto;text-decoration:none}
.nav-logo img{width:28px;height:28px;border-radius:6px}
.nav-logo span{font-size:.8rem;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:#fff}
.nav-links{display:flex;align-items:center;gap:0}
.nav-links a{font-size:.82rem;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:var(--dim);padding:12px 16px;transition:color .25s;border-radius:6px}
.nav-links a:hover{color:#fff}

/* ── Final stacked box ── */
.final-box{border:1px solid rgba(255,255,255,.18);border-radius:12px;width:100%;max-width:1100px;overflow:hidden}
.final-box .term{border:none;border-radius:0;border-bottom:1px solid var(--border)}
.final-box .term:last-child{border-bottom:none}

/* ── Shared entrance animation ── */
@keyframes fadeUp{0%{opacity:0;transform:translateY(20px)}100%{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}

/* ═══════════════════════════════════════════
   HERO — full viewport
   ═══════════════════════════════════════════ */
.hero{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;text-align:center;padding:0 24px;user-select:none}

/* ── Network mesh figure behind title ── */
#hero-mesh{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:min(90vw,800px);height:min(90vw,800px);z-index:0;pointer-events:none;opacity:0;animation:meshIn 1.5s ease .2s forwards}
@keyframes meshIn{0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.hero-content{position:relative;z-index:1}

.hero h1{font-size:clamp(3.5rem,10vw,9rem);font-weight:800;letter-spacing:clamp(4px,1.2vw,16px);text-transform:uppercase;color:#fff;line-height:.95;opacity:0;animation:titleIn .9s cubic-bezier(.16,1,.3,1) .5s forwards,h1pulse 6s ease-in-out 1.6s infinite}
@keyframes titleIn{0%{opacity:0;transform:translateY(16px)}100%{opacity:1;transform:translateY(0)}}
@keyframes h1pulse{0%,100%{text-shadow:0 0 8px rgba(168,85,247,.15),0 0 24px rgba(168,85,247,.06)}50%{text-shadow:0 0 16px rgba(168,85,247,.35),0 0 48px rgba(168,85,247,.12),0 0 80px rgba(168,85,247,.06)}}

/* ── Glitch letters ── */
.glitch-letter{display:inline-block;position:relative;color:inherit}

/* ── Animated A ↔ V (blink + swap) ── */
.letter-av{display:inline-block;position:relative}
.letter-av-a,.letter-av-v{display:inline-block}
.letter-av-v{position:absolute;left:0;top:0;opacity:0}
.letter-av-a{animation:avA 5s ease 2s infinite}
.letter-av-v{animation:avV 5s ease 2s infinite}
/* A: visible → blink blink → visible, hold long */
@keyframes avA{
  0%,75%{opacity:1}
  77%{opacity:0}79%{opacity:1}
  81%{opacity:0}83%{opacity:1}
  85%,100%{opacity:1}
}
@keyframes avV{
  0%,75%{opacity:0}
  77%{opacity:1}79%{opacity:0}
  81%{opacity:1}83%{opacity:0}
  85%,100%{opacity:0}
}

.hero-sub{display:block;font-size:clamp(1.05rem,2.2vw,1.6rem);font-weight:400;color:#bbb;margin-top:clamp(20px,3vw,40px);line-height:1.6;max-width:750px;opacity:0;animation:fadeUp .7s ease .7s forwards}

.hero-tagline{display:block;font-size:clamp(.65rem,1vw,.85rem);letter-spacing:clamp(3px,.6vw,8px);text-transform:uppercase;color:var(--dim);margin-top:clamp(16px,2.5vw,32px);opacity:0;animation:fadeUp .6s ease .9s forwards}

.hero-scroll{position:absolute;bottom:clamp(24px,3vw,48px);left:50%;transform:translateX(-50%);opacity:0;animation:fadeIn .6s ease 1.6s forwards}
.hero-scroll span{display:block;font-size:.65rem;letter-spacing:3px;text-transform:uppercase;color:var(--dim);margin-bottom:8px}
.hero-scroll-line{display:block;width:1px;height:32px;background:linear-gradient(to bottom,var(--accent),transparent);margin:0 auto;animation:scrollPulse 2s ease-in-out infinite}
@keyframes scrollPulse{0%,100%{opacity:.4;transform:scaleY(1)}50%{opacity:1;transform:scaleY(1.3)}}

/* ═══════════════════════════════════════════
   CONTENT WRAPPER
   ═══════════════════════════════════════════ */
.content{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center}

.wrap{width:100%;max-width:1100px;display:flex;flex-direction:column}

/* ═══════════════════════════════════════════
   SCREEN SECTIONS — each takes full viewport
   ═══════════════════════════════════════════ */
.screen{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:80px 24px}

/* ═══════════════════════════════════════════
   TERMINAL CARDS — scaled up
   ═══════════════════════════════════════════ */
.term{background:var(--card);border:1px solid var(--border);overflow:hidden;opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s cubic-bezier(.16,1,.3,1);border-radius:12px;width:100%;max-width:1100px}
.term.vis{opacity:1;transform:translateY(0)}
.term-hdr{display:flex;align-items:center;gap:10px;padding:14px 24px;background:rgba(255,255,255,.015);border-bottom:1px solid var(--border)}
.term-dot{width:10px;height:10px;border-radius:50%;background:var(--border-hi);flex-shrink:0}
.term-title{font-size:.75rem;letter-spacing:3px;text-transform:uppercase;color:var(--dim);margin-left:6px}
.term-body{padding:28px 32px}

/* ── Prompt typing cursor ── */
.prompt{display:flex;align-items:baseline;gap:10px;margin-bottom:16px;font-size:.85rem}
.prompt-sym{color:var(--accent);font-weight:700;flex-shrink:0}
.prompt-cmd{color:var(--dim);letter-spacing:1.5px}
.cursor{display:inline-block;width:9px;height:18px;background:var(--accent);margin-left:3px;animation:blink 1s step-end infinite;vertical-align:text-bottom}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}

/* ── Icons ── */
.ic{width:22px;height:22px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ═══════════════════════════════════════════
   ABOUT section
   ═══════════════════════════════════════════ */
.about-text{font-size:clamp(1rem,1.8vw,1.2rem);color:#bbb;line-height:1.8}
.about-text strong{color:#e0e0e0;font-weight:600}

/* ── Twin panels under about ── */
.about-twins{display:grid;grid-template-columns:1fr 1fr;gap:16px;width:100%;max-width:1100px;margin-top:20px}
.about-panel{background:var(--card);border:1px solid var(--border);border-radius:12px;overflow:hidden;opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s cubic-bezier(.16,1,.3,1)}
.about-panel.vis{opacity:1;transform:translateY(0)}
.about-panel-hdr{display:flex;align-items:center;gap:10px;padding:12px 20px;background:rgba(255,255,255,.015);border-bottom:1px solid var(--border)}
.about-panel-hdr .term-dot{width:8px;height:8px}
.about-panel-title{font-size:.65rem;letter-spacing:2px;text-transform:uppercase;color:var(--dim);margin-left:4px}
.about-panel-body{position:relative;height:220px;overflow:hidden}
.about-panel-body canvas{display:block;width:100%;height:100%}

/* ── Nodes status panel ── */
.nodes-list{list-style:none;padding:16px 20px;display:flex;flex-direction:column;gap:10px}
.node-row{display:flex;align-items:center;gap:12px;font-size:.78rem;letter-spacing:1px;color:var(--dim)}
.node-dot{width:7px;height:7px;border-radius:50%;background:#22c55e;flex-shrink:0;box-shadow:0 0 6px rgba(34,197,94,.5);animation:nodePing 2s ease-in-out infinite}
.node-dot.ping{animation:nodePingFlash .4s ease}
.node-flag{font-style:normal;min-width:22px;text-align:center}
.node-name{color:#bbb;flex:1}
.node-ms{color:var(--accent2);font-variant-numeric:tabular-nums;min-width:48px;text-align:right}
@keyframes nodePing{0%,100%{box-shadow:0 0 4px rgba(34,197,94,.3)}50%{box-shadow:0 0 10px rgba(34,197,94,.7)}}
@keyframes nodePingFlash{0%{transform:scale(1)}40%{transform:scale(1.8);box-shadow:0 0 12px rgba(34,197,94,.8)}100%{transform:scale(1)}}

/* ── Typewriter effect ── */
.typewriter{overflow:hidden}
.typewriter.typing{border-right:2px solid var(--accent);animation:twCursor .7s step-end infinite}
@keyframes twCursor{0%,100%{border-color:var(--accent)}50%{border-color:transparent}}
.typewriter.done{border-right:2px solid transparent}

/* ═══════════════════════════════════════════
   FEATURES LIST — bigger
   ═══════════════════════════════════════════ */
.features{list-style:none;counter-reset:f}
.features li{counter-increment:f;display:flex;align-items:flex-start;gap:16px;padding:16px 0;border-bottom:1px solid var(--border);font-size:1rem;color:#999;line-height:1.7}
.features li:last-child{border-bottom:none}
.features li::before{content:'0' counter(f);min-width:28px;color:var(--accent);font-size:.75rem;font-weight:600;flex-shrink:0;padding-top:3px}
.features li .ic{color:var(--accent2);margin-top:4px}
.feat-txt strong{color:#e0e0e0;font-weight:600}

/* ═══════════════════════════════════════════
   SERVICES GRID — for protocols / referral / convenience
   ═══════════════════════════════════════════ */
.svc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin-top:8px}
.svc{background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:24px 20px;transition:border-color .3s,box-shadow .3s}
.svc:hover{border-color:var(--accent-border);box-shadow:0 0 20px rgba(168,85,247,.06)}
.svc-icon{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.svc-icon .ic{color:var(--accent2)}
.svc-icon strong{font-size:.95rem;color:#e0e0e0}
.svc p{font-size:.88rem;color:#888;line-height:1.6}

/* ═══════════════════════════════════════════
   STATS — full-width, larger
   ═══════════════════════════════════════════ */
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;margin-top:8px}
.stat{background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:clamp(20px,3vw,36px) 16px;text-align:center;transition:border-color .3s,box-shadow .3s}
.stat:hover{border-color:var(--accent-border);box-shadow:0 0 24px rgba(168,85,247,.08)}
.stat-val{font-size:clamp(2rem,3.5vw,3.2rem);font-weight:800;color:var(--accent2);display:block}
.stat-lbl{font-size:clamp(.65rem,1vw,.8rem);color:var(--dim);letter-spacing:2px;text-transform:uppercase;margin-top:8px;display:block}

/* ═══════════════════════════════════════════
   CTA BUTTON — bigger
   ═══════════════════════════════════════════ */
.cta-wrap{display:flex;flex-direction:column;align-items:center;gap:16px;margin-top:8px}
.cta{display:inline-flex;align-items:center;gap:12px;background:var(--accent);color:#fff;border:none;padding:20px 52px;font-size:1.05rem;font-weight:700;cursor:pointer;border-radius:8px;transition:all .2s;letter-spacing:3px;text-transform:uppercase;font-family:inherit;text-decoration:none;position:relative;overflow:hidden}
.cta::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent);transform:translateX(-100%);transition:none}
.cta:hover{filter:brightness(1.15);box-shadow:0 0 40px rgba(168,85,247,.3);transform:translateY(-2px)}
.cta:hover::after{transform:translateX(100%);transition:transform .5s ease}
.cta:active{transform:scale(.97)}
.cta .ic{width:20px;height:20px;stroke-width:2.5}
.cta-hint{font-size:.75rem;color:var(--dim);letter-spacing:1.5px}

/* ── CTA secondary (gray) ── */
.cta.cta-secondary{background:#2a2a2a;color:#e0e0e0}
.cta.cta-secondary:hover{filter:brightness(1.25);box-shadow:0 0 30px rgba(255,255,255,.06)}

/* ── CTA small (tariff cards) ── */
.cta.cta-sm{padding:14px 32px;font-size:.82rem;letter-spacing:2px;width:100%;justify-content:center}

/* ── Hero two-button row ── */
.hero-cta{display:flex;align-items:center;gap:16px;flex-wrap:wrap;justify-content:center;margin-top:clamp(32px,4vw,56px);opacity:0;animation:fadeUp .6s ease 1.1s forwards;position:relative;z-index:10}

/* ── Hero metrics ── */
.hero-metrics{display:flex;align-items:center;gap:clamp(24px,4vw,56px);justify-content:center;margin-top:clamp(28px,3.5vw,48px);opacity:0;animation:fadeUp .6s ease 1.3s forwards}
.hero-metric{text-align:center}
.hero-metric-val{display:block;font-size:clamp(1.4rem,2.5vw,2rem);font-weight:800;color:#fff;letter-spacing:1px}
.hero-metric-lbl{display:block;font-size:clamp(.6rem,.9vw,.75rem);color:var(--dim);letter-spacing:2px;text-transform:uppercase;margin-top:4px}

/* ═══════════════════════════════════════════
   TARIFF CARDS
   ═══════════════════════════════════════════ */
.tariff-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:16px;align-items:center}
.tariff-card{background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:32px 24px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px;transition:border-color .3s,box-shadow .3s,transform .3s;position:relative}
.tariff-card:hover{border-color:var(--accent-border);box-shadow:0 0 24px rgba(168,85,247,.08);transform:translateY(-4px)}
.tariff-popular{border-color:var(--accent-border)}
.tariff-best{border-color:var(--accent);box-shadow:0 0 32px rgba(168,85,247,.1);transform:scale(1.06);z-index:2}
.tariff-best:hover{transform:scale(1.06) translateY(-4px)}
.tariff-badge{position:absolute;top:-10px;left:50%;transform:translateX(-50%);font-size:.68rem;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--accent);background:var(--bg);border:1px solid var(--accent-border);border-radius:20px;padding:3px 14px;white-space:nowrap}
.tariff-duration{font-size:.72rem;letter-spacing:2.5px;text-transform:uppercase;color:var(--dim);margin-top:8px}
.tariff-price{font-size:2rem;font-weight:800;color:#fff;letter-spacing:1px}
.tariff-per{font-size:.75rem;color:var(--dim);letter-spacing:1px}
.tariff-features{list-style:none;margin:16px 0;padding:0;display:flex;flex-direction:column;gap:8px;width:100%}
.tariff-features li{font-size:.82rem;color:#bbb;letter-spacing:.5px;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.04)}
.tariff-features li:last-child{border-bottom:none}
.tariff-note{text-align:center;font-size:.78rem;color:var(--dim);letter-spacing:1px;margin-top:20px}

/* ── Tariff scroll-in animation ── */
.tariff-animate{opacity:0;transform:translateY(32px)}
.tariff-animate.visible{animation:tariffIn .6s ease forwards}
.tariff-animate:nth-child(2).visible{animation-delay:.15s}
.tariff-animate:nth-child(3).visible{animation-delay:.3s}
@keyframes tariffIn{0%{opacity:0;transform:translateY(32px)}100%{opacity:1;transform:translateY(0)}}

/* ── Tariff best glow pulse ── */
.tariff-best{animation:tariffGlow 3s ease-in-out infinite}
.tariff-best.visible{animation:tariffIn .6s ease forwards,tariffGlow 3s ease-in-out .6s infinite}
@keyframes tariffGlow{0%,100%{box-shadow:0 0 24px rgba(168,85,247,.1)}50%{box-shadow:0 0 40px rgba(168,85,247,.2),0 0 60px rgba(168,85,247,.06)}}

/* ── Protocols CTA ── */
.protocols-cta{margin-top:24px;text-align:center}

/* ── CTA dropdown ── */
.cta-dropdown-wrap{position:relative;display:inline-flex}
.cta-dropdown{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%) scale(.95);min-width:220px;background:var(--card);border:1px solid var(--border);border-radius:10px;padding:8px;opacity:0;visibility:hidden;transition:opacity .2s,transform .2s,visibility .2s;z-index:50;box-shadow:0 12px 40px rgba(0,0,0,.5)}
.cta-dropdown.open{opacity:1;visibility:visible;transform:translateX(-50%) scale(1)}
.cta-dropdown-item{display:flex;align-items:center;gap:12px;padding:14px 18px;color:var(--txt);font-size:.85rem;font-weight:600;letter-spacing:1px;border-radius:8px;transition:background .2s,color .2s;text-decoration:none}
.cta-dropdown-item:hover{background:var(--accent-bg);color:#fff}
.cta-dropdown-item .ic{width:20px;height:20px;color:var(--accent2);flex-shrink:0}

/* ── Note ── */
.note{display:flex;gap:14px;align-items:flex-start;font-size:.95rem;color:#999;line-height:1.6;margin-top:6px}
.note .ic{color:var(--dim);width:20px;height:20px;margin-top:2px}

/* ═══════════════════════════════════════════
   RUNNING LINE
   ═══════════════════════════════════════════ */
.runline{position:fixed;top:50%;left:0;width:100%;z-index:1;pointer-events:none;overflow:hidden;opacity:0;transition:opacity 1.5s ease}
.runline.vis{opacity:1}
.runline-inner{display:inline-block;white-space:nowrap;font-size:.7rem;letter-spacing:5px;text-transform:uppercase;color:rgba(168,85,247,.07);animation:scroll 22s linear infinite,rlglow 5s ease-in-out infinite}
@keyframes rlglow{0%,100%{text-shadow:none}50%{text-shadow:0 0 8px rgba(168,85,247,.2),0 0 20px rgba(168,85,247,.08)}}
@keyframes scroll{0%{transform:translateX(100vw)}100%{transform:translateX(-100%)}}

/* ═══════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════ */
footer{position:relative;z-index:2;padding:40px 24px 48px;text-align:center;opacity:0;animation:fadeUp .5s ease 2s forwards}
footer nav{font-size:.75rem;letter-spacing:2px;text-transform:uppercase;color:var(--dim);margin-bottom:12px}
footer nav a{transition:color .2s}
footer nav a:hover{color:var(--accent2)}
footer p{font-size:.65rem;letter-spacing:3px;text-transform:uppercase;color:rgba(255,255,255,.08)}

strong{color:#e0e0e0;font-weight:600}

/* ═══════════════════════════════════════════
   RESPONSIVE — mobile adjustments
   ═══════════════════════════════════════════ */
@media(max-width:768px){
  .site-nav{padding:0 12px}
  .nav-logo span{display:none}
  .nav-links{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .nav-links a{padding:10px 10px;white-space:nowrap;flex-shrink:0}
  .hero{min-height:100svh;padding:0 16px}
  #hero-mesh{width:min(95vw,500px);height:min(95vw,500px)}
  .content{padding:0}
  .screen{min-height:auto;padding:60px 16px}
  .term-body{padding:20px 18px}
  .stat-grid{grid-template-columns:repeat(2,1fr)}
  .cta{padding:18px 36px;font-size:.95rem}
  .hero-cta{flex-direction:column;gap:12px}
  .hero-cta .cta{width:100%;justify-content:center}
  .hero-metrics{gap:20px}
  .tariff-grid{grid-template-columns:1fr}
  .hero-scroll{display:none}
  .about-twins{grid-template-columns:1fr}
  .about-panel-body{height:180px}
  .nodes-list{padding:12px 14px;gap:8px}
}
@media(max-width:480px){
  .hero h1{letter-spacing:3px}
  .screen{padding:40px 14px}
  .term-hdr{padding:12px 16px}
  .term-body{padding:16px 14px}
  .features li{gap:10px;padding:12px 0;font-size:.9rem}
  .svc-grid{grid-template-columns:1fr}
}