@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500;700&display=swap');

/* ============================================================
   aimnode — Signal · design system
   ============================================================ */
:root{
  --ink:        #0A0E1A;   /* base background            */
  --obsidian:   #141A2B;   /* surfaces                   */
  --signal:     #3B6EF6;   /* single accent              */
  --aqua:       #4FD1C5;   /* live / status only         */
  --mist:       #EEF2F9;   /* primary text               */
  --slate:      #7C879E;   /* secondary text             */

  --hair:       rgba(255,255,255,0.06);
  --hair-2:     rgba(255,255,255,0.11);
  --nav-h:      64px;

  --sans: 'Inter', system-ui, sans-serif;
  --display: 'Space Grotesk', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
}

*{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; }

body{
  font-family:var(--sans);
  background:var(--ink);
  color:var(--mist);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  line-height:1.5;
  overflow-x:hidden;
  display:flex; flex-direction:column; min-height:100vh;
}

a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
::selection{ background:rgba(59,110,246,0.35); color:#fff; }

.wrap{ width:100%; max-width:1280px; margin:0 auto; padding:0 40px; }

/* subtle page-wide noise / texture overlay (Railway-style depth) */
body::before{
  content:"";
  position:fixed; inset:0; z-index:0; pointer-events:none;
  opacity:0.035;
  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='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; height:var(--nav-h);
  z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 40px;
  background:rgba(10,14,26,0.62);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--hair);
}
.nav-links{
  display:flex; gap:30px;
  position:absolute; left:50%; transform:translateX(-50%);
}
.nav-links a{
  font-size:13.5px; color:var(--slate); font-weight:500;
  transition:color .18s ease;
}
.nav-links a:hover{ color:var(--mist); }
.nav-cta{ display:flex; align-items:center; gap:10px; }

.btn{
  font-size:14px; font-weight:600; border-radius:6px;
  padding:9px 16px; line-height:1;
  transition:box-shadow .22s ease, background .18s ease, border-color .18s ease, transform .12s ease;
  display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
}
.btn-primary{ background:var(--signal); color:#fff; }
.btn-primary:hover{
  box-shadow:0 0 0 1px rgba(59,110,246,0.45), 0 8px 32px rgba(59,110,246,0.28);
}
.btn-primary:active{ transform:translateY(1px); }
.btn-ghost{ background:transparent; color:var(--mist); border:1px solid var(--hair-2); }
.btn-ghost:hover{ border-color:rgba(255,255,255,0.24); background:rgba(255,255,255,0.02); }
.btn-lg{ padding:13px 22px; font-size:15px; }

/* ============================================================
   BRAND LOGO  +  aim reticle (pure CSS lock-on)
   ============================================================ */
.brand-logo{
  font-family:var(--display); font-weight:700; font-size:21px;
  letter-spacing:-0.02em; display:inline-flex; align-items:center;
  position:relative; z-index:2;
}
.brand-aim{
  position:relative; color:var(--mist);
  letter-spacing:0;
  transition:color .25s ease, letter-spacing .25s ease, text-shadow .25s ease;
}
.brand-node{ color:var(--slate); }

.aim-reticle{ position:absolute; inset:-5px -6px; pointer-events:none; }

/* four crosshair lines — slide in from outside */
.aim-reticle .line{
  position:absolute; background:rgba(79,209,197,0.85); opacity:0;
  transition:transform .25s ease, opacity .25s ease;   /* leave state */
}
.line-t,.line-b{ left:18%; right:18%; height:1px; }
.line-l,.line-r{ top:16%; bottom:16%; width:1px; }
.line-t{ top:0;    transform:translateY(-14px); }
.line-b{ bottom:0; transform:translateY(14px); }
.line-l{ left:0;   transform:translateX(-14px); }
.line-r{ right:0;  transform:translateX(14px); }

/* L-shaped corner brackets */
.aim-reticle .bracket{
  position:absolute; width:5px; height:5px; opacity:0;
  transition:opacity .18s ease;                          /* leave state */
}
.br-tl{ top:0; left:0; border-top:1px solid var(--aqua); border-left:1px solid var(--aqua); }
.br-tr{ top:0; right:0; border-top:1px solid var(--aqua); border-right:1px solid var(--aqua); }
.br-bl{ bottom:0; left:0; border-bottom:1px solid var(--aqua); border-left:1px solid var(--aqua); }
.br-br{ bottom:0; right:0; border-bottom:1px solid var(--aqua); border-right:1px solid var(--aqua); }

/* confirmation dot */
.aim-dot{
  position:absolute; left:50%; bottom:-8px; width:2px; height:2px;
  border-radius:50%; background:var(--aqua); box-shadow:0 0 6px var(--aqua);
  opacity:0; transform:translateX(-50%) scale(0);
  transition:opacity .18s ease, transform .18s ease;     /* leave state */
}

/* --- HOVER: lock-on sequence --- */
.brand-aim:hover{
  color:var(--aqua);
  letter-spacing:1px;
  animation:flashLock .5s ease-out;     /* step 5 flash @ ~350ms */
}
.brand-aim:hover .line{
  transform:translate(0,0); opacity:1;
  transition:transform .3s cubic-bezier(.4,0,.2,1) .05s, opacity .2s ease .05s;
}
.brand-aim:hover .bracket{
  opacity:1; transition:opacity .15s ease .2s;
}
.brand-aim:hover .aim-dot{
  opacity:1; transform:translateX(-50%) scale(1);
  transition:opacity .15s ease .3s, transform .15s ease .3s;
}
@keyframes flashLock{
  0%,68%{ text-shadow:0 0 0 rgba(79,209,197,0); }
  70%   { text-shadow:0 0 14px rgba(79,209,197,0.9); }
  86%   { text-shadow:0 0 14px rgba(79,209,197,0.9); }
  100%  { text-shadow:0 0 0 rgba(79,209,197,0); }
}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  min-height:calc(100vh - 132px);
  padding-top:var(--nav-h);
  display:grid; grid-template-columns:45% 55%;
  align-items:center;
  position:relative; z-index:1;
}
.hero-left{ padding:0 40px 0 max(40px, calc((100vw - 1280px)/2 + 40px)); }

.eyebrow{
  font-family:var(--mono); font-size:11px; color:var(--aqua);
  letter-spacing:3px; text-transform:uppercase; margin-bottom:26px;
}
.hero h1{
  font-family:var(--display); font-weight:700;
  font-size:clamp(64px, 7vw, 96px);
  letter-spacing:-0.04em; line-height:0.92; color:#fff;
  margin-bottom:24px;
}
.hero h1 .br{ display:block; }
.hero-sub{
  font-size:16px; color:var(--slate); max-width:360px; margin-bottom:32px;
}
.hero-actions{ display:flex; gap:12px; flex-wrap:wrap; }
.hero-meta{
  font-family:var(--mono); font-size:12px; color:var(--slate);
  margin-top:18px; letter-spacing:.2px;
}
.hero-meta .dot{ color:rgba(124,135,158,0.5); margin:0 6px; }

/* ---- globe column ---- */
.hero-right{
  position:relative; height:100%;
  display:flex; align-items:center; justify-content:center;
}
.globe-stage{
  position:relative;
  width:min(56vw, 600px); aspect-ratio:1/1;
  display:flex; align-items:center; justify-content:center;
}
.atmos{ position:absolute; border-radius:50%; pointer-events:none; top:50%; left:50%; }
.atmos-far{
  width:130%; height:130%; transform:translate(-50%,-50%); opacity:.07;
  background:radial-gradient(circle, #1a3a7a 0%, transparent 70%);
}
.atmos-mid{
  width:115%; height:115%; transform:translate(-50%,-50%); opacity:.11;
  background:radial-gradient(circle, #3B6EF6 0%, transparent 68%);
}
.atmos-near{
  width:100%; height:100%; transform:translate(-50%,-50%); opacity:.17;
  background:radial-gradient(circle, #439ad9 0%, transparent 66%);
}
.globe-svg{ position:relative; width:100%; height:100%; display:block; z-index:1; overflow:visible; }

/* parallels / meridians */
.grid-line{ fill:none; stroke:var(--signal); stroke-opacity:0.10; stroke-width:0.7; }
.globe-rotate{ transform-origin:240px 240px; animation:globeSpin 150s linear infinite; }
@keyframes globeSpin{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }

/* nodes */
.node-ring{
  fill:none; stroke-width:1; transform-box:fill-box; transform-origin:center;
}
.ring-outer{ animation:expand 3s ease-out var(--d,0s) infinite; }
.ring-mid{   animation:expand 3s ease-out calc(var(--d,0s) + 1s) infinite; }
@keyframes expand{ 0%{ r:5; opacity:0.7; } 100%{ r:20; opacity:0; } }

.node-core{
  transform-box:fill-box; transform-origin:center;
  animation:nodeWink var(--wd,5s) ease-in-out var(--d,0s) infinite;
}
/* winking / twinkling nodes — city lights blinking across the network.
   --nb sets each node's baseline brightness so the cluster reads with depth */
@keyframes nodeWink{
  0%,100%{ opacity:var(--nb,1); }
  17%{ opacity:var(--nb,1); } 21%{ opacity:0.12; } 26%{ opacity:var(--nb,1); }
  61%{ opacity:var(--nb,1); } 65%{ opacity:0.12; } 70%{ opacity:var(--nb,1); }
}

.n-aqua  .node-ring{ stroke:var(--aqua); }   .n-aqua  .node-core{ fill:var(--aqua); }
.n-blue  .node-ring{ stroke:var(--signal); } .n-blue  .node-core{ fill:var(--signal); }
.n-slate .node-ring{ stroke:var(--slate); }  .n-slate .node-core{ fill:var(--slate); }

/* faint lat/lon grid — JS projects front-face polylines as the globe turns;
   set SHOW_GRID=false in the script to drop it entirely */
.grid polyline{ fill:none; stroke:var(--signal); vector-effect:non-scaling-stroke; }
.gl-mer{ stroke-opacity:.07; stroke-width:.6; }
.gl-par{ stroke-opacity:.05; stroke-width:.6; }

/* ---- aim-locked: globe reacts as one system ---- */
.aim-locked .node-core{
  animation:nodeWink var(--wd,5s) ease-in-out var(--d,0s) infinite,
            aimCorePulse .45s ease var(--pd,0ms);
}
@keyframes aimCorePulse{ 0%{ transform:scale(1);} 45%{ transform:scale(1.7);} 100%{ transform:scale(1);} }

.aim-locked .node-ring{ animation:aimRingWave .55s ease-out both; }
@keyframes aimRingWave{ 0%{ transform:scale(1); opacity:0.7; } 100%{ transform:scale(3.5); opacity:0; } }

/* Node positions are computed in JS each frame (3D projection onto the spinning
   sphere) — no CSS drift here, which avoids a CSS-vs-inline-transform fight.
   The JS sets each .node group transform (position + depth scale) and its
   opacity (depth fade); the ring/wink pulses below stay pure CSS. */

/* ============================================================
   CROSSHAIR — fixed centre reticle + static HUD frame
   ============================================================ */
/* corner brackets at the rim — static frame, no lines across the sphere */
.hud-frame path{ fill:none; stroke:rgba(124,135,158,0.30); stroke-width:1;
  transition:stroke .3s ease, stroke-width .3s ease; }

/* fixed targeting crosshair — full H+V lines across the sphere crossing at the
   centre, plus a small reticle ring + dot marking the intersection */
.crosshair{ pointer-events:none; }
.crosshair .xh-line{ stroke:var(--aqua); stroke-width:1; stroke-opacity:.26; }
.crosshair .xh-ring{ fill:none; stroke:var(--aqua); stroke-opacity:.5; stroke-width:1.2;
  transform-box:fill-box; transform-origin:center; }
.crosshair .xh-dot{ fill:var(--aqua); stroke:none; opacity:.85;
  filter:drop-shadow(0 0 4px rgba(79,209,197,.6));
  transform-box:fill-box; transform-origin:center; }

/* lock-on burst the instant a node crosses the centre intersection */
.crosshair.lock .xh-line{ animation:xhLine .55s ease; }
.crosshair.lock .xh-ring{ animation:xhRing .55s ease; }
.crosshair.lock .xh-dot{ animation:xhDot .55s ease; }
@keyframes xhLine{ 0%{ stroke-opacity:.26; } 28%{ stroke-opacity:.72; } 100%{ stroke-opacity:.26; } }
@keyframes xhRing{ 0%{ transform:scale(1); stroke-opacity:.5; } 30%{ transform:scale(1.55); stroke-opacity:1; } 100%{ transform:scale(1); stroke-opacity:.5; } }
@keyframes xhDot{ 0%{ transform:scale(1); } 30%{ transform:scale(2.3); } 100%{ transform:scale(1); } }

/* the node under the reticle lights up solid and holds still while locked */
.node.lit .node-core{ animation:none; opacity:1; transform:scale(1.5);
  filter:drop-shadow(0 0 6px currentColor); }
.n-aqua.lit  .node-core{ color:var(--aqua); }
.n-blue.lit  .node-core{ color:var(--signal); }
.n-slate.lit .node-core{ color:var(--slate); }
.node.lit .node-ring{ animation:litPulse .6s ease-out; }
@keyframes litPulse{ 0%{ transform:scale(1); opacity:.8; } 100%{ transform:scale(2.8); opacity:0; } }

/* logo hover: the instrument answers as one system */
.aim-locked .hud-frame path{ stroke:rgba(79,209,197,0.75); stroke-width:1.4; }
.aim-locked .crosshair .xh-line{ animation:xhLine .5s ease; }
.aim-locked .crosshair .xh-ring{ animation:xhRing .5s ease; }
.aim-locked .crosshair .xh-dot{ animation:xhDot .5s ease; }

/* ============================================================
   TICKER
   ============================================================ */
.ticker{
  background:#0C1018; border-top:1px solid var(--hair); border-bottom:1px solid var(--hair);
  height:44px; overflow:hidden; position:relative; z-index:1;
}
.ticker-track{
  display:flex; align-items:center; height:100%; gap:0;
  width:max-content; animation:tickerMove 38s linear infinite;
}
.ticker:hover .ticker-track{ animation-play-state:paused; }
@keyframes tickerMove{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.tick{
  display:inline-flex; align-items:center; gap:9px; padding:0 26px;
  font-family:var(--mono); font-size:12.5px; color:var(--slate);
  border-right:1px solid var(--hair); height:18px;
}
.tick .flag{ font-size:13px; }
.tick .city{ color:var(--mist); }
.tick .ping{ color:var(--aqua); }

/* ============================================================
   SECTION scaffolding
   ============================================================ */
section{ position:relative; z-index:1; }
.section-label{
  font-family:var(--mono); font-size:11px; color:var(--aqua);
  letter-spacing:2.5px; text-transform:uppercase; margin-bottom:14px;
}
.section-head h2{
  font-family:var(--display); font-weight:700; color:var(--mist);
  font-size:clamp(30px,3.6vw,44px); letter-spacing:-0.03em; line-height:1.04;
}
.section-head p{ color:var(--slate); margin-top:14px; max-width:440px; font-size:15px; }

/* ---- STATS ---- */
.stats{ padding:84px 0; }
.stats-row{ display:flex; align-items:center; justify-content:space-between; gap:20px; }
.stat{ flex:1; text-align:center; }
.stat .num{
  font-family:var(--display); font-weight:700; font-size:52px; color:var(--mist);
  letter-spacing:-0.03em; line-height:1;
}
.stat .num .unit{ font-size:30px; color:var(--slate); }
.stat .cap{
  font-family:var(--sans); font-size:11px; color:var(--slate);
  text-transform:uppercase; letter-spacing:1.5px; margin-top:12px;
}
.stat-div{ width:1px; height:40px; background:var(--hair-2); flex:0 0 auto; }

/* ---- FEATURES (Linear numbered rows) ---- */
.features{ padding:40px 0 96px; }
.feat-row{
  display:flex; align-items:center; justify-content:space-between; gap:40px;
  padding:32px 0; border-bottom:1px solid var(--hair);
  border-left:2px solid transparent; padding-left:0;
  transition:border-left-color .25s ease, padding-left .25s ease;
}
.feat-row:hover{ border-left:2px solid var(--signal); padding-left:20px; }
.feat-left{ display:flex; align-items:baseline; gap:20px; }
.feat-num{ font-family:var(--mono); font-size:13px; color:var(--slate); }
.feat-title{ font-family:var(--display); font-weight:500; font-size:20px; color:var(--mist); letter-spacing:-0.01em; }
.feat-desc{ font-size:15px; color:var(--slate); max-width:400px; text-align:right; }

/* ---- REGIONS ---- */
.regions{ padding:90px 0; border-top:1px solid var(--hair); }
.regions-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:48px; margin-top:46px; }
.region h3{
  font-family:var(--mono); font-size:12px; font-weight:500; color:var(--slate);
  letter-spacing:2px; text-transform:uppercase; padding-bottom:16px;
  border-bottom:1px solid var(--hair); margin-bottom:6px;
}
.loc{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 0; border-bottom:1px solid var(--hair);
}
.loc-name{ display:flex; align-items:center; gap:11px; font-size:14.5px; color:var(--mist); }
.loc-name .flag{ font-size:15px; }
.loc-name .excl{ font-family:var(--mono); font-size:9px; color:var(--signal); border:1px solid rgba(59,110,246,0.4); border-radius:3px; padding:1px 4px; letter-spacing:.5px; }
.loc-ping{ font-family:var(--mono); font-size:12px; color:var(--aqua); }

/* ---- CTA BANNER ---- */
.cta{
  padding:120px 0; text-align:center; position:relative; overflow:hidden;
  border-top:1px solid var(--hair);
}
.cta::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(ellipse 60% 80% at 50% 120%, rgba(59,110,246,0.14), transparent 70%);
}
.cta .inner{ position:relative; z-index:1; }
.cta h2{
  font-family:var(--display); font-weight:700; color:#fff;
  font-size:clamp(34px,4.6vw,58px); letter-spacing:-0.035em; line-height:1; margin-bottom:14px;
}
.cta p{ color:var(--slate); margin-bottom:34px; font-size:16px; }
.cta-actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ border-top:1px solid var(--hair); padding:32px 0 36px; position:relative; z-index:1; margin-top:auto; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; }
.footer-brand .brand-logo{ font-size:19px; margin-bottom:14px; }
.footer-brand p{ font-size:13.5px; color:var(--slate); max-width:240px; }
.footer-col h4{ font-family:var(--mono); font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:var(--slate); margin-bottom:16px; }
.footer-col a{ display:block; font-size:14px; color:var(--mist); opacity:.78; margin-bottom:11px; transition:opacity .15s; }
.footer-col a:hover{ opacity:1; }
.footer-bot{
  display:flex; justify-content:space-between; align-items:center;
  margin-top:0; padding-top:0; border-top:none;
  font-family:var(--mono); font-size:12px; color:var(--slate);
}
.footer-bot .live{ display:inline-flex; align-items:center; gap:7px; }
.live-dot{ width:6px; height:6px; border-radius:50%; background:var(--aqua); box-shadow:0 0 8px var(--aqua); animation:livePulse 2s ease-in-out infinite; }
@keyframes livePulse{ 0%,100%{ opacity:1; } 50%{ opacity:.4; } }

/* ============================================================
   PRICING
   ============================================================ */
.page-top{ padding:calc(var(--nav-h) + 72px) 0 8px; text-align:center; }
.page-top .eyebrow{ display:block; }
.page-top h1{
  font-family:var(--display); font-weight:700; color:#fff;
  font-size:clamp(30px,3.4vw,44px); letter-spacing:-0.03em; line-height:1.08; margin-top:10px;
}
.page-top p{ color:var(--slate); margin-top:16px; font-size:16px; }

.price-cols{
  display:grid; grid-template-columns:1fr 1fr; gap:0;
  border:1px solid var(--hair); border-radius:12px; overflow:hidden;
  margin-top:56px;
}
.price-col{ padding:44px 40px; display:flex; flex-direction:column; }
.price-col + .price-col{ border-left:1px solid var(--hair); background:rgba(255,255,255,0.012); }
.price-tier{ font-family:var(--mono); font-size:12px; letter-spacing:2px; text-transform:uppercase; color:var(--slate); }
.price-tier.prem{ color:var(--aqua); }
.price-amount{ margin:20px 0 6px; display:flex; align-items:baseline; gap:6px; }
.price-amount .v{ font-family:var(--display); font-weight:700; font-size:60px; color:var(--mist); letter-spacing:-0.04em; line-height:1; }
.price-amount .per{ font-family:var(--mono); font-size:14px; color:var(--slate); }
.price-note{ font-size:14px; color:var(--slate); margin-bottom:28px; }
.price-list{ list-style:none; margin:0 0 32px; }
.price-list li{ display:flex; gap:12px; align-items:flex-start; padding:11px 0; font-size:14.5px; color:var(--mist); border-bottom:1px solid var(--hair); }
.price-list li .ck{ color:var(--aqua); font-family:var(--mono); flex:0 0 auto; margin-top:1px; }
.price-list li .muted{ color:var(--slate); }
.price-col .btn{ width:100%; justify-content:center; margin-top:auto; }

/* comparison table */
.compare{ margin-top:80px; }
.cmp-table{ width:100%; border-collapse:collapse; margin-top:30px; }
.cmp-table th,.cmp-table td{ text-align:left; padding:18px 20px; border-bottom:1px solid var(--hair); font-size:14.5px; }
.cmp-table thead th{ font-family:var(--mono); font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:var(--slate); font-weight:500; }
.cmp-table thead th.prem{ color:var(--aqua); }
.cmp-table td:first-child,.cmp-table th:first-child{ color:var(--slate); width:34%; }
.cmp-table td{ color:var(--mist); font-family:var(--mono); }
.cmp-table tbody tr:hover{ background:rgba(255,255,255,0.015); }
.cmp-yes{ color:var(--aqua); }

/* FAQ */
.faq{ margin-top:90px; max-width:760px; }
.faq-item{ border-bottom:1px solid var(--hair); }
.faq-q{
  width:100%; text-align:left; display:flex; align-items:center; justify-content:space-between;
  padding:24px 0; font-family:var(--display); font-weight:500; font-size:18px; color:var(--mist); gap:20px;
}
.faq-q .pm{ font-family:var(--mono); font-size:20px; color:var(--slate); transition:transform .25s ease, color .2s; flex:0 0 auto; }
.faq-item.open .faq-q .pm{ transform:rotate(45deg); color:var(--aqua); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .3s ease; }
.faq-a p{ padding:0 0 24px; color:var(--slate); font-size:15px; max-width:640px; }

/* ============================================================
   DOWNLOAD
   ============================================================ */
.platforms{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:56px; }
.plat{
  border:1px solid var(--hair); border-radius:10px; padding:28px;
  display:flex; flex-direction:column; gap:6px;
  transition:border-color .2s ease, background .2s ease, transform .15s ease;
}
.plat:hover{ border-color:var(--hair-2); background:rgba(255,255,255,0.015); transform:translateY(-2px); }
.plat .pmark{ font-family:var(--mono); font-size:11px; color:var(--slate); letter-spacing:1.5px; text-transform:uppercase; }
.plat .pname{ font-family:var(--display); font-weight:500; font-size:21px; color:var(--mist); margin-top:8px; }
.plat .pmeta{ font-size:13px; color:var(--slate); }
.plat .pget{ margin-top:18px; font-size:14px; font-weight:600; color:var(--signal); display:inline-flex; align-items:center; gap:7px; }
.plat:hover .pget .arr{ transform:translateX(3px); }
.plat .pget .arr{ transition:transform .18s ease; }

.steps{ margin-top:96px; }
.steps-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-top:40px; border:1px solid var(--hair); border-radius:12px; overflow:hidden; }
.step{ padding:34px 28px; position:relative; }
.step + .step{ border-left:1px solid var(--hair); }
.step .snum{ font-family:var(--mono); font-size:13px; color:var(--signal); }
.step .stitle{ font-family:var(--display); font-weight:500; font-size:19px; color:var(--mist); margin:14px 0 8px; }
.step .sdesc{ font-size:14px; color:var(--slate); }

/* ============================================================
   AUTH / LOGIN
   ============================================================ */
.auth-body{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:40px 20px; }
.auth-card{ width:100%; max-width:400px; text-align:center; }
.auth-logo{ margin-bottom:46px; display:inline-flex; }
.auth-card h1{ font-family:var(--display); font-weight:700; font-size:28px; letter-spacing:-0.03em; color:var(--mist); margin-bottom:10px; }
.auth-card .lead{ color:var(--slate); font-size:15px; margin-bottom:32px; }
.auth-step{ display:none; }
.auth-step.active{ display:block; animation:fadeUp .35s ease; }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:none; } }

.field{ text-align:left; margin-bottom:18px; }
.field label{ font-family:var(--mono); font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:var(--slate); display:block; margin-bottom:9px; }
.input{
  width:100%; background:var(--obsidian); border:1px solid var(--hair-2); border-radius:8px;
  padding:14px 16px; font-size:15px; color:var(--mist); font-family:var(--sans);
  transition:border-color .18s ease, box-shadow .18s ease;
}
.input::placeholder{ color:rgba(124,135,158,0.6); }
.input:focus{ outline:none; border-color:var(--signal); box-shadow:0 0 0 3px rgba(59,110,246,0.18); }
.auth-card .btn{ width:100%; justify-content:center; padding:14px; }

.otp-row{ display:flex; gap:10px; justify-content:center; margin:6px 0 8px; }
.otp-cell{
  width:50px; height:60px; text-align:center; font-family:var(--mono); font-size:24px; font-weight:500;
  color:var(--mist); background:var(--obsidian); border:1px solid var(--hair-2); border-radius:8px;
  transition:border-color .16s ease, box-shadow .16s ease, background .16s;
}
.otp-cell:focus{ outline:none; border-color:var(--signal); box-shadow:0 0 0 3px rgba(59,110,246,0.18); }
.otp-cell.filled{ border-color:rgba(79,209,197,0.5); }
.otp-row.error .otp-cell{ border-color:#ef4d6b; box-shadow:0 0 0 3px rgba(239,77,107,0.14); }
.otp-row.shake{ animation:shake .4s cubic-bezier(.36,.07,.19,.97); }
@keyframes shake{ 10%,90%{ transform:translateX(-2px);} 20%,80%{ transform:translateX(4px);} 30%,50%,70%{ transform:translateX(-7px);} 40%,60%{ transform:translateX(7px);} }

.otp-meta{ display:flex; align-items:center; justify-content:space-between; margin-top:18px; font-family:var(--mono); font-size:12px; }
.otp-timer{ color:var(--aqua); }
.otp-timer.expired{ color:#ef4d6b; }
.otp-resend{ color:var(--slate); }
.otp-resend[disabled]{ opacity:.5; cursor:not-allowed; }
.otp-resend:not([disabled]){ color:var(--signal); }
.otp-error-msg{ color:#ef4d6b; font-size:13px; min-height:18px; margin-top:14px; }
.email-sent{ font-family:var(--mono); color:var(--mist); }

.success-check{ width:64px; height:64px; border-radius:50%; border:1.5px solid var(--aqua); display:flex; align-items:center; justify-content:center; margin:0 auto 24px; box-shadow:0 0 26px rgba(79,209,197,0.25); animation:popIn .4s cubic-bezier(.2,.8,.2,1); }
.success-check svg{ width:28px; height:28px; stroke:var(--aqua); }
@keyframes popIn{ from{ transform:scale(.7); opacity:0;} to{ transform:scale(1); opacity:1; } }
.auth-back{ margin-top:26px; font-family:var(--mono); font-size:12px; color:var(--slate); }
.auth-back a{ color:var(--slate); } .auth-back a:hover{ color:var(--mist); }

/* ============================================================
   DASHBOARD
   ============================================================ */
.dash{ display:flex; min-height:100vh; }
.sidebar{
  width:240px; flex:0 0 240px; position:fixed; top:0; bottom:0; left:0;
  background:var(--obsidian); border-right:1px solid var(--hair);
  display:flex; flex-direction:column; padding:24px 18px; z-index:20;
}
.sidebar .brand-logo{ font-size:19px; padding:6px 8px 26px; }
.side-nav{ display:flex; flex-direction:column; gap:2px; }
.side-link{
  display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:7px;
  font-size:14px; color:var(--slate); transition:background .15s, color .15s;
}
.side-link:hover{ background:rgba(255,255,255,0.03); color:var(--mist); }
.side-link.active{ background:rgba(59,110,246,0.12); color:var(--mist); }
.side-link .ic{ width:7px; height:7px; border-radius:2px; background:currentColor; opacity:.6; flex:0 0 auto; }
.side-link.active .ic{ background:var(--signal); opacity:1; }
.side-foot{ margin-top:auto; padding:14px 12px 4px; border-top:1px solid var(--hair); }
.side-foot .em{ font-size:13px; color:var(--mist); overflow:hidden; text-overflow:ellipsis; }
.side-foot .exp{ font-family:var(--mono); font-size:11px; color:var(--slate); margin-top:5px; }

.dash-main{ margin-left:240px; flex:1; padding:38px 44px; }
.dash-head{ display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:30px; }
.dash-head h1{ font-family:var(--display); font-weight:700; font-size:30px; letter-spacing:-0.03em; }
.dash-head .sub{ color:var(--slate); font-size:14px; margin-top:4px; }

.dash-grid{ display:grid; grid-template-columns:1.7fr 1fr; gap:22px; align-items:start; }
.card{ background:var(--obsidian); border:1px solid var(--hair); border-radius:12px; padding:24px; }
.card + .card{ margin-top:22px; }
.card-label{ font-family:var(--mono); font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:var(--slate); margin-bottom:16px; }

.sub-card{ display:flex; align-items:center; justify-content:space-between; }
.sub-card .tier{ font-family:var(--display); font-weight:700; font-size:22px; color:var(--mist); }
.sub-card .meta{ font-size:13px; color:var(--slate); margin-top:4px; }
.badge{ font-family:var(--mono); font-size:11px; letter-spacing:1px; text-transform:uppercase; padding:5px 10px; border-radius:5px; }
.badge-active{ color:var(--aqua); background:rgba(79,209,197,0.1); border:1px solid rgba(79,209,197,0.3); }

.conn{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
.conn-status{ display:flex; align-items:center; gap:11px; }
.conn-dot{ width:11px; height:11px; border-radius:50%; background:var(--aqua); box-shadow:0 0 0 0 rgba(79,209,197,0.6); animation:connPulse 2s ease-out infinite; }
@keyframes connPulse{ 0%{ box-shadow:0 0 0 0 rgba(79,209,197,0.55); } 70%{ box-shadow:0 0 0 10px rgba(79,209,197,0); } 100%{ box-shadow:0 0 0 0 rgba(79,209,197,0); } }
.conn-status .st{ font-family:var(--mono); font-weight:700; font-size:15px; letter-spacing:1.5px; color:var(--aqua); }
.conn-sep{ width:1px; height:34px; background:var(--hair-2); }
.conn-item .k{ font-family:var(--mono); font-size:10px; letter-spacing:1px; text-transform:uppercase; color:var(--slate); }
.conn-item .v{ font-family:var(--mono); font-size:16px; color:var(--mist); margin-top:3px; }
.conn-item .v.aqua{ color:var(--aqua); }
.conn-toggle{ margin-left:auto; }

.search{ position:relative; margin-bottom:6px; }
.search input{ width:100%; background:var(--ink); border:1px solid var(--hair); border-radius:8px; padding:11px 14px; font-size:14px; color:var(--mist); }
.search input:focus{ outline:none; border-color:var(--hair-2); }
.loc-list{ max-height:300px; overflow-y:auto; margin-top:6px; }
.loc-item{
  display:flex; align-items:center; justify-content:space-between; padding:12px 12px;
  border-radius:8px; cursor:pointer; border:1px solid transparent; transition:background .14s, border-color .14s;
}
.loc-item:hover{ background:rgba(255,255,255,0.025); }
.loc-item.selected{ background:rgba(59,110,246,0.1); border-color:rgba(59,110,246,0.35); }
.loc-item .l{ display:flex; align-items:center; gap:11px; font-size:14px; color:var(--mist); }
.loc-item .l .flag{ font-size:15px; }
.loc-item .r{ font-family:var(--mono); font-size:12px; color:var(--aqua); display:flex; align-items:center; gap:9px; }
.loc-item .chk{ color:var(--signal); opacity:0; }
.loc-item.selected .chk{ opacity:1; }

.traffic-big{ font-family:var(--display); font-weight:700; font-size:40px; color:var(--mist); letter-spacing:-0.03em; }
.traffic-big .u{ font-size:20px; color:var(--slate); }
.traffic-sub{ font-size:13px; color:var(--slate); margin-top:4px; }
.bar{ height:6px; border-radius:3px; background:rgba(255,255,255,0.06); margin-top:18px; overflow:hidden; }
.bar i{ display:block; height:100%; background:linear-gradient(90deg,var(--signal),var(--aqua)); border-radius:3px; }
.mini-row{ display:flex; justify-content:space-between; font-family:var(--mono); font-size:12px; color:var(--slate); margin-top:10px; }
.panel-btns{ display:flex; flex-direction:column; gap:10px; margin-top:6px; }
.panel-btns .btn{ width:100%; justify-content:center; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1024px){
  .hero{ grid-template-columns:1fr; padding-top:calc(var(--nav-h) + 30px); min-height:auto; }
  .hero-left{ padding:48px 40px 10px; }
  .hero-right{ height:auto; padding:10px 0 60px; }
  .globe-stage{ width:min(76vw, 460px); }
  .nav-links{ display:none; }
}
@media (max-width:768px){
  .wrap,.nav{ padding-left:22px; padding-right:22px; }
  .hero-left{ padding:40px 22px 6px; }
  .stats-row{ flex-wrap:wrap; gap:30px 0; }
  .stat{ flex:0 0 50%; }
  .stat-div{ display:none; }
  .feat-row{ flex-direction:column; align-items:flex-start; gap:10px; }
  .feat-desc{ text-align:left; }
  .regions-grid{ grid-template-columns:1fr; gap:34px; }
  .price-cols{ grid-template-columns:1fr; }
  .price-col + .price-col{ border-left:none; border-top:1px solid var(--hair); }
  .platforms{ grid-template-columns:1fr 1fr; }
  .steps-grid{ grid-template-columns:1fr 1fr; }
  .step:nth-child(3){ border-left:none; }
  .step:nth-child(n+3){ border-top:1px solid var(--hair); }
  .footer-grid{ grid-template-columns:1fr 1fr; gap:32px; }
  .dash-grid{ grid-template-columns:1fr; }
  .sidebar{ transform:translateX(-100%); transition:transform .25s; }
  .dash-main{ margin-left:0; padding:28px 22px; }
  .cmp-table th,.cmp-table td{ padding:14px 12px; font-size:13px; }
}
@media (max-width:430px){
  .hero h1{ font-size:clamp(46px,13vw,64px); }
  .platforms{ grid-template-columns:1fr; }
  .steps-grid{ grid-template-columns:1fr; }
  .step + .step{ border-left:none; border-top:1px solid var(--hair); }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .otp-cell{ width:42px; height:52px; font-size:20px; }
  .stat .num{ font-size:42px; }
}

/* --- v3.0: переключатель языка + юр-ссылки футера --- */
.lang{display:inline-flex;gap:2px;margin-right:14px;font-family:var(--mono),monospace;font-size:12px}
.lang button{background:none;border:none;color:var(--slate);cursor:pointer;padding:4px 7px;border-radius:6px;font-family:inherit;font-size:12px}
.lang button.on{color:var(--mist);background:rgba(255,255,255,.08)}
.foot-links{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.foot-links a{color:var(--slate);text-decoration:none;font-size:13px}
.foot-links a:hover{color:var(--mist)}

/* ============================================================
   LEGAL / DOC PAGES  (oferta, privacy, refund, contacts)
   ============================================================ */
.doc-top{ padding:calc(var(--nav-h) + 64px) 0 8px; }
.doc-top .eyebrow{ margin-bottom:14px; }
.doc-top h1{ font-family:var(--display); font-weight:700; font-size:34px;
  letter-spacing:-0.02em; color:var(--mist); line-height:1.1; }
.doc-top .doc-rev{ font-family:var(--mono); font-size:12px; color:var(--slate); margin-top:12px; max-width:640px; }
.doc-head{ max-width:820px; margin:0 auto; padding:0 40px; }
.doc{ max-width:820px; margin:0 auto; padding:24px 40px 48px; }
.doc h2{ font-family:var(--display); font-weight:600; font-size:19px; color:var(--mist);
  margin:38px 0 12px; letter-spacing:-0.01em; }
.doc p{ font-size:15px; line-height:1.7; color:#A9B2C4; margin:0 0 12px; }
.doc ul{ margin:0 0 12px; padding-left:22px; }
.doc li{ font-size:15px; line-height:1.7; color:#A9B2C4; margin-bottom:7px; }
.doc a{ color:var(--aqua); text-decoration:none; }
.doc a:hover{ text-decoration:underline; }
.doc-req{ margin-top:40px; padding:22px 24px; border:1px solid var(--hair-2);
  border-radius:12px; background:#0C1018; }
.doc-req h2{ margin-top:0; }
.doc-req .row{ display:flex; gap:12px; font-size:14.5px; line-height:1.6; margin-bottom:6px; }
.doc-req .row .k{ color:var(--slate); min-width:140px; flex:0 0 auto; }
.doc-req .row .v{ color:var(--mist); }
.doc-back{ display:inline-block; margin-top:8px; font-family:var(--mono); font-size:13px; }
.contact-cards{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:8px 0 8px; }
@media(max-width:640px){ .contact-cards{ grid-template-columns:1fr; } .doc{ padding:24px 22px 40px; } }
.contact-card{ padding:20px 22px; border:1px solid var(--hair-2); border-radius:12px; background:#0C1018; }
.contact-card .lbl{ font-family:var(--mono); font-size:11px; letter-spacing:1px; text-transform:uppercase; color:var(--slate); margin-bottom:8px; }
.contact-card .val{ font-size:17px; color:var(--mist); }
.contact-card .val a{ color:var(--mist); }

/* ============================================================
   HERO — premium polish (вариант B) + продуктовая карточка
   ============================================================ */
.hero-fx{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.hero-fx .vg{ position:absolute; inset:0;
  background:radial-gradient(120% 90% at 32% 42%, rgba(10,14,26,0) 42%, rgba(10,14,26,0.55) 100%); }
.hero-fx .grain{ position:absolute; inset:0; opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.hero-left, .hero-right{ position:relative; z-index:2; }

.hero h1 .grad{ background:linear-gradient(100deg,var(--aqua),var(--signal));
  -webkit-background-clip:text; background-clip:text; color:transparent; }

.hero .btn-primary.btn-lg{ background:linear-gradient(180deg,#4b7cff,#3B6EF6);
  box-shadow:0 1px 0 rgba(255,255,255,0.18) inset, 0 10px 30px rgba(59,110,246,0.32); }
.hero .btn-primary.btn-lg:hover{ transform:translateY(-2px);
  box-shadow:0 1px 0 rgba(255,255,255,0.22) inset, 0 16px 44px rgba(59,110,246,0.5); }

.hero-trust{ display:flex; flex-wrap:wrap; gap:0 18px; margin-top:40px;
  font-family:var(--mono); font-size:12.5px; color:var(--slate); }
.hero-trust span{ position:relative; padding-left:18px; }
.hero-trust span::before{ content:"•"; position:absolute; left:4px; color:var(--signal); }
.hero-trust span:first-child{ padding-left:0; }
.hero-trust span:first-child::before{ display:none; }
.hero-trust b{ color:var(--mist); font-weight:500; }

/* продуктовая карточка над глобусом */
.conn-card{ position:absolute; right:-6px; bottom:34px; z-index:3; width:266px;
  background:rgba(20,26,43,0.74); border:1px solid var(--hair-2); border-radius:16px;
  padding:16px 16px 15px; backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  box-shadow:0 24px 60px rgba(0,0,0,0.45); }
.cc-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:13px; }
.cc-title{ font-family:var(--display); font-weight:500; font-size:14px; color:var(--mist); }
.cc-status{ display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:11.5px; color:var(--aqua); }
.cc-dot{ width:7px; height:7px; border-radius:50%; background:var(--aqua); box-shadow:0 0 9px var(--aqua); }
.cc-row{ display:flex; align-items:center; justify-content:space-between;
  padding:11px 0; border-top:1px solid var(--hair); font-size:14px; color:var(--mist); }
.cc-row .k{ color:var(--slate); font-size:13px; }
.cc-bars{ display:inline-flex; gap:3px; align-items:flex-end; height:13px; }
.cc-bars i{ width:3px; background:var(--aqua); border-radius:1px; opacity:.9; }
.cc-bars i:nth-child(1){ height:5px; } .cc-bars i:nth-child(2){ height:8px; }
.cc-bars i:nth-child(3){ height:11px; } .cc-bars i:nth-child(4){ height:13px; }
.cc-btn{ margin-top:14px; width:100%; font-family:var(--sans); font-weight:600; font-size:13.5px;
  color:#fff; border:none; cursor:pointer; border-radius:10px; padding:12px;
  background:linear-gradient(180deg,#4b7cff,#3B6EF6); box-shadow:0 8px 24px rgba(59,110,246,0.4); }

@media (max-width:1024px){ .conn-card{ position:relative; right:auto; bottom:auto; margin:24px auto 0; } }

/* контакты — кликабельная карточка почты + пилюли документов */
a.contact-card{ display:block; text-decoration:none; transition:border-color .15s ease, transform .15s ease; }
a.contact-card:hover{ border-color:var(--aqua); transform:translateY(-2px); }
.doc-pills{ display:flex; flex-wrap:wrap; gap:10px; }
.doc-pills a{ font-family:var(--mono); font-size:13px; color:var(--mist); text-decoration:none;
  border:1px solid var(--hair-2); border-radius:999px; padding:8px 15px; transition:border-color .15s ease, color .15s ease; }
.doc-pills a:hover{ border-color:var(--aqua); color:var(--aqua); }