/*
Theme Name: VPNReal
Version: 3.0
*/
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:     #030508;
  --bg2:    #070b14;
  --bg3:    #0c1222;
  --accent: #6366f1;
  --a2:     #818cf8;
  --a3:     #4f46e5;
  --cyan:   #22d3ee;
  --green:  #4ade80;
  --orange: #fb923c;
  --text:   #f1f5f9;
  --muted:  #64748b;
  --card:   rgba(255,255,255,0.03);
  --border: rgba(255,255,255,0.06);
  --r:      16px;
}

html { scroll-behavior: smooth; }
body {
  font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  background: var(--bg); color: var(--text);
  line-height: 1.6; overflow-x: hidden;
}
a { color: var(--a2); text-decoration: none; }

/* ══ STARS BG ══ */
#stars-bg {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
}
.star { position: absolute; border-radius: 50%; background: #fff; animation: tw 4s ease-in-out infinite; }
@keyframes tw { 0%,100%{opacity:.3} 50%{opacity:1} }
.nebula { position: absolute; border-radius: 50%; filter: blur(120px); pointer-events: none; }
.n1 { width:800px;height:500px; background:radial-gradient(ellipse,rgba(99,102,241,.07) 0%,transparent 70%); top:-100px;left:-150px; }
.n2 { width:600px;height:600px; background:radial-gradient(ellipse,rgba(34,211,238,.05) 0%,transparent 70%); bottom:5%;right:-100px; }
.n3 { width:400px;height:300px; background:radial-gradient(ellipse,rgba(139,92,246,.06) 0%,transparent 70%); top:45%;left:35%; }

/* Grid overlay */
.grid-overlay {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(99,102,241,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(99,102,241,.04) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 0%, black 0%, transparent 70%);
}

.shooting-star {
  position: absolute; height: 1px;
  background: linear-gradient(90deg, transparent 0%, transparent 55%, rgba(255,255,255,.25) 80%, rgba(255,255,255,.7) 100%);
  animation: shoot linear infinite;
}
.shooting-star::after {
  content:''; position:absolute; right:0; top:50%; transform:translateY(-50%);
  width:2px;height:2px;background:rgba(255,255,255,.9);border-radius:50%;
  box-shadow:0 0 4px 2px rgba(200,210,255,.5);
}
@keyframes shoot {
  0%   { transform:translateX(0) translateY(0) rotate(-25deg); opacity:0; }
  5%   { opacity:1; }
  90%  { opacity:.6; }
  100% { transform:translateX(-100vw) translateY(50vh) rotate(-25deg); opacity:0; }
}

.site-content { position: relative; z-index: 1; }

/* ══ HEADER ══ */
.site-header {
  position: fixed; top:0; left:0; right:0; z-index:100;
  padding: 14px 48px;
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(3,5,8,.75);
  backdrop-filter: blur(20px) saturate(1.8);
  border-bottom: 1px solid var(--border);
}
.logo { display:flex; align-items:center; gap:10px; }
.logo-img { height:30px; width:30px; border-radius:8px; object-fit:contain; }
.logo-t { font-size:19px; font-weight:800; color:var(--text); letter-spacing:-.3px; }
.logo-t em { color:var(--a2); font-style:normal; }
.nav-support { color:var(--muted); font-size:14px; margin-left:28px; transition:color .2s; }
nav a {
  color:var(--muted); font-size:14px; margin-left:28px;
  transition:color .2s; letter-spacing:.1px;
}
nav a:hover { color:var(--text); }
.btn-nav {
  background:rgba(99,102,241,.12); border:1px solid rgba(99,102,241,.25);
  color:var(--a2) !important; padding:9px 20px; border-radius:50px;
  font-weight:600; font-size:13px; margin-left:28px !important; transition:all .2s;
}
.btn-nav:hover { background:rgba(99,102,241,.2); }

/* ══ HERO ══ */
.hero {
  min-height: 100svh; display:flex; align-items:center; justify-content:center;
  text-align:center; padding:100px 20px 60px; position:relative;
}
.hero::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:160px;
  background:linear-gradient(transparent, var(--bg)); pointer-events:none;
}
.hero-inner { max-width:780px; margin:0 auto; }
.pill {
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(99,102,241,.08); border:1px solid rgba(99,102,241,.2);
  color:var(--a2); padding:5px 14px; border-radius:50px;
  font-size:11px; font-weight:600; letter-spacing:.5px; text-transform:uppercase;
  margin-bottom:24px;
}
.live { width:6px;height:6px;background:#4ade80;border-radius:50%;animation:blink 2s infinite;box-shadow:0 0 6px #4ade80; }
@keyframes blink { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.3;transform:scale(.7)} }

.hero h1 {
  font-size: clamp(36px, 6.5vw, 76px);
  font-weight: 900; line-height: 1.0;
  letter-spacing: -2px; margin-bottom: 20px;
}
.h1-line1 {
  background: linear-gradient(135deg, #fff 0%, #c7d2fe 60%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  display: block;
}
.h1-line2 {
  background: linear-gradient(135deg, var(--accent) 0%, var(--cyan) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  display: block;
}
.hero p {
  font-size: clamp(15px,1.8vw,17px); color:var(--muted);
  max-width:460px; margin:0 auto 32px; line-height:1.65;
}
.hero-btns { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.btn-p {
  background:linear-gradient(135deg,var(--accent),var(--a3));
  color:#fff; padding:12px 28px; border-radius:50px; font-weight:700; font-size:14px;
  box-shadow:0 4px 24px rgba(99,102,241,.4); transition:all .25s; display:inline-flex; align-items:center; gap:8px;
}
.btn-p:hover { transform:translateY(-2px); box-shadow:0 8px 40px rgba(99,102,241,.55); }
.btn-s {
  background:rgba(255,255,255,.04); border:1px solid var(--border);
  color:var(--text); padding:12px 28px; border-radius:50px; font-weight:600; font-size:14px;
  transition:all .25s; display:inline-flex; align-items:center; gap:8px;
}
.btn-s:hover { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.15); }

.hero-stats {
  display:flex; gap:0; justify-content:center; margin-top:44px;
  background:rgba(255,255,255,.02); border:1px solid var(--border);
  border-radius:16px; overflow:hidden; backdrop-filter:blur(10px);
}
.hstat {
  flex:1; min-width:100px; padding:20px 12px; text-align:center;
  border-right:1px solid var(--border);
}
.hstat:last-child { border-right:none; }
.hstat strong { font-size:24px; font-weight:900; display:block; color:var(--a2); letter-spacing:-0.5px; }
.hstat span { font-size:11px; color:var(--muted); margin-top:3px; display:block; }

/* ══ COMMON ══ */
.wrap { max-width:1140px; margin:0 auto; padding:0 20px; }
section { padding:100px 20px; }
.tag {
  display:inline-block; font-size:11px; font-weight:700; letter-spacing:3px;
  text-transform:uppercase; color:var(--a2);
  background:rgba(99,102,241,.07); border:1px solid rgba(99,102,241,.15);
  padding:5px 14px; border-radius:50px; margin-bottom:20px;
}
.stitle { font-size:clamp(28px,4vw,46px); font-weight:900; letter-spacing:-1px; margin-bottom:12px; line-height:1.1; }
.ssub { color:var(--muted); font-size:17px; max-width:480px; line-height:1.65; }

/* ══ FEATURES ══ */
.feat-bg { background:linear-gradient(180deg,var(--bg) 0%,var(--bg2) 100%); }
.feat-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; margin-top:52px; }
.fc {
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--r); padding:32px; transition:all .25s; position:relative; overflow:hidden;
}
.fc::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg,rgba(99,102,241,.05) 0%,transparent 60%);
  opacity:0; transition:opacity .25s;
}
.fc:hover { border-color:rgba(99,102,241,.25); transform:translateY(-3px); }
.fc:hover::after { opacity:1; }
.fi { width:46px;height:46px;border-radius:10px;background:rgba(99,102,241,.1);border:1px solid rgba(99,102,241,.15);display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:18px; }
.fc h3 { font-size:16px;font-weight:700;margin-bottom:8px; }
.fc p { color:var(--muted);font-size:13px;line-height:1.65; }

/* ══ STEPS ══ */
.steps-bg { background:var(--bg2); }
.steps-row { display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:0;margin-top:52px;background:var(--card);border:1px solid var(--border);border-radius:var(--r);overflow:hidden; }
.step { padding:32px 24px;text-align:center;border-right:1px solid var(--border); }
.step:last-child { border-right:none; }
.sn { width:44px;height:44px;margin:0 auto 16px;border-radius:50%;background:linear-gradient(135deg,rgba(99,102,241,.15),rgba(79,70,229,.1));border:1px solid rgba(99,102,241,.3);color:var(--a2);font-size:18px;font-weight:900;display:flex;align-items:center;justify-content:center; }
.step h3 { font-size:15px;font-weight:700;margin-bottom:6px; }
.step p { color:var(--muted);font-size:13px;line-height:1.6; }

/* ══ ROUTING DIAGRAM ══ */
.routing-bg { background:var(--bg); position:relative; overflow:hidden; }
.routing-bg::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse 70% 60% at 50% 50%, rgba(99,102,241,.06) 0%, transparent 70%);
  pointer-events:none;
}
.diagram-wrap { margin-top:56px; position:relative; }
.diagram {
  width:100%; max-width:1200px; margin:0 auto;
  position:relative;
}

/* Device */
.diag-device {
  display:flex; flex-direction:column; align-items:center; gap:8px;
  margin:0 auto 0; width:fit-content;
}
.dev-box {
  background:linear-gradient(135deg,var(--bg3),#101828);
  border:2px solid rgba(99,102,241,.4);
  border-radius:16px; padding:16px 28px;
  font-weight:700; font-size:15px;
  box-shadow:0 0 30px rgba(99,102,241,.2);
  display:flex; align-items:center; gap:10px;
}
.dev-box span { font-size:24px; }

/* Router */
.diag-router-wrap { display:flex; justify-content:center; margin-top:20px; position:relative; }
.diag-router-wrap::before {
  content:''; position:absolute; top:-20px; left:50%; width:2px; height:20px;
  background:linear-gradient(var(--accent),rgba(99,102,241,.3));
}
.router-box {
  background:linear-gradient(135deg,rgba(99,102,241,.15),rgba(79,70,229,.1));
  border:1px solid rgba(99,102,241,.35);
  border-radius:14px; padding:14px 40px;
  font-weight:800; font-size:14px; color:var(--a2);
  letter-spacing:.5px; text-transform:uppercase;
  position:relative; text-align:center;
}
.router-box::after { content:'Умная маршрутизация'; position:absolute; bottom:-22px; left:50%; transform:translateX(-50%); font-size:11px; color:var(--muted); white-space:nowrap; font-weight:500; letter-spacing:0; text-transform:none; }

/* Branches */
.diag-branches {
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:12px; margin-top:48px; position:relative;
}
/* Connector line above branches */
.diag-branches::before {
  content:''; position:absolute; top:-24px; left:12.5%; right:12.5%; height:1px;
  background:linear-gradient(90deg,transparent,rgba(99,102,241,.4) 20%,rgba(99,102,241,.4) 80%,transparent);
}

.branch {
  display:flex; flex-direction:column; align-items:center; position:relative;
}
.branch::before {
  content:''; position:absolute; top:-24px; left:50%; width:1px; height:24px;
  background:linear-gradient(var(--accent),currentColor);
}
.branch.b-direct::before { background:linear-gradient(var(--accent),var(--green)); }
.branch.b-yt::before { background:linear-gradient(var(--accent),#f87171); }
.branch.b-trade::before { background:linear-gradient(var(--accent),var(--orange)); }
.branch.b-int::before { background:linear-gradient(var(--accent),var(--cyan)); }

.branch-box {
  width:100%; padding:14px 10px; border-radius:12px; text-align:center;
  font-size:12px; font-weight:700; border:1px solid; transition:all .25s; cursor:default;
  position:relative; overflow:hidden;
}
.branch-box::before { content:''; position:absolute; inset:0; opacity:0; transition:opacity .25s; border-radius:12px; }
.branch-box:hover::before { opacity:1; }
.branch-box:hover { transform:translateY(-2px); }

.b-direct .branch-box { border-color:rgba(74,222,128,.25); background:rgba(74,222,128,.06); color:var(--green); }
.b-direct .branch-box::before { background:rgba(74,222,128,.04); }
.b-yt .branch-box { border-color:rgba(248,113,113,.25); background:rgba(248,113,113,.06); color:#f87171; }
.b-yt .branch-box::before { background:rgba(248,113,113,.04); }
.b-trade .branch-box { border-color:rgba(251,146,60,.25); background:rgba(251,146,60,.06); color:var(--orange); }
.b-trade .branch-box::before { background:rgba(251,146,60,.04); }
.b-int .branch-box { border-color:rgba(34,211,238,.25); background:rgba(34,211,238,.06); color:var(--cyan); }
.b-int .branch-box::before { background:rgba(34,211,238,.04); }

.b-icon { font-size:20px; display:block; margin-bottom:6px; }
.b-label { display:block; font-size:11px; font-weight:700; letter-spacing:.3px; }
.b-sub { display:block; font-size:10px; font-weight:500; opacity:.7; margin-top:3px; }

/* Servers layer */
.diag-servers { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:16px; }
.srv-col { display:flex; flex-direction:column; gap:8px; align-items:center; }

.srv-connector { width:1px; height:16px; margin:0 auto; }
.b-direct .srv-connector, .srv-col:nth-child(1) .srv-connector { background:linear-gradient(var(--green),rgba(74,222,128,.3)); }
.b-yt .srv-connector,   .srv-col:nth-child(2) .srv-connector { background:linear-gradient(#f87171,rgba(248,113,113,.3)); }
.b-trade .srv-connector,.srv-col:nth-child(3) .srv-connector { background:linear-gradient(var(--orange),rgba(251,146,60,.3)); }
.srv-col:nth-child(4) .srv-connector { background:linear-gradient(var(--cyan),rgba(34,211,238,.3)); }

.srv-box {
  width:100%; padding:10px 8px; border-radius:10px; text-align:center;
  font-size:11px; font-weight:600; border:1px solid var(--border);
  background:rgba(255,255,255,.02); transition:all .2s;
  display:flex; align-items:center; justify-content:center; gap:6px;
}
.srv-box:hover { background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.15); }
.srv-flag { font-size:16px; }
.srv-name { font-size:10px; color:var(--muted); }

/* Failover chain */
.failover-chain { margin-top:8px; display:flex; flex-direction:column; align-items:center; gap:4px; width:100%; }
.fo-arrow { font-size:11px; color:var(--muted); }
.fo-label { font-size:10px; color:var(--muted); background:rgba(251,146,60,.1); border:1px solid rgba(251,146,60,.2); padding:2px 8px; border-radius:50px; }

/* Internet exits */
.diag-exits { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:12px; }
.exit-col { display:flex; flex-direction:column; align-items:center; gap:6px; }
.exit-conn { width:1px; height:12px; margin:0 auto; background:var(--border); }
.exit-box {
  padding:8px 12px; border-radius:50px; font-size:11px; font-weight:700;
  border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.03);
  display:flex; align-items:center; gap:6px; color:var(--muted);
}

/* ══ OLD (kept for compatibility) ══ */
.diag-exits-old,.exit-col-old { display:none; }

/* ══ ROUTING DIAGRAM (cascade v3) ══ */
.diagram-wrap { margin-top:56px; }
.diagram { max-width:1000px; margin:0 auto; }

/* ─── Shared layout helpers ─── */
.dg-row-center { display:flex; justify-content:center; }
.dg-grid4 { display:grid; grid-template-columns:repeat(4,1fr); gap:28px; }

/* ─── Device ─── */
.dev-box {
  background:linear-gradient(135deg,var(--bg3),#0d1525);
  border:2px solid rgba(99,102,241,.4); border-radius:16px;
  padding:15px 36px; font-weight:700; font-size:15px;
  display:flex; align-items:center; gap:12px;
  animation:dev-pulse 3s ease-in-out infinite;
}
.dev-box span { font-size:26px; }
@keyframes dev-pulse {
  0%,100% { box-shadow:0 0 16px rgba(99,102,241,.15); }
  50%      { box-shadow:0 0 40px rgba(99,102,241,.45); }
}

/* ─── Vertical connectors (explicit divs, no pseudo hacks) ─── */
.dg-vc { width:1px; height:28px; position:relative; }
.dg-vc-accent { background:linear-gradient(var(--accent),rgba(99,102,241,.15)); }
.dg-vc-micro  { height:9px !important; }
/* Animated travelling dot */
.dg-vc-dot {
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:6px; height:6px;
  border-radius:50%; background:var(--accent); box-shadow:0 0 8px var(--accent);
  animation:vc-travel 1.8s ease-in-out infinite;
}
@keyframes vc-travel {
  0%   { top:0; opacity:1; }
  80%  { top:22px; opacity:.6; }
  100% { top:22px; opacity:0; }
}
/* Coloured connectors for chain rows */
.sc-green  { background:linear-gradient(#4ade80,rgba(74,222,128,.1)); }
.sc-red    { background:linear-gradient(#f87171,rgba(248,113,113,.1)); }
.sc-orange { background:linear-gradient(var(--orange),rgba(251,146,60,.1)); }
.sc-cyan   { background:linear-gradient(var(--cyan),rgba(34,211,238,.1)); }

/* ─── Unified column card (header + why + chain + exit) ─── */
.dg-col { display:flex; flex-direction:column; align-items:stretch; }

/* Center all vertical connector lines inside a column */
.dg-col .dg-vc { margin:0 auto; }
.dg-col .dg-fo { align-items:center; }

/* Why description */
.col-why {
  font-size:12px; color:var(--muted); line-height:1.65;
  padding:12px 16px; margin-top:10px;
  background:rgba(255,255,255,.025);
  border-radius:10px; border-left:2px solid rgba(255,255,255,.08);
}

/* ─── Router box ─── */
.dg-router {
  background:linear-gradient(135deg,rgba(99,102,241,.17),rgba(79,70,229,.08));
  border:1px solid rgba(99,102,241,.4); border-radius:14px;
  padding:13px 40px; font-weight:800; font-size:14px; color:var(--a2);
  letter-spacing:.5px; text-transform:uppercase;
  display:flex; align-items:center; gap:10px;
}
.dg-rp {
  width:7px; height:7px; border-radius:50%; flex-shrink:0;
  background:var(--a2); box-shadow:0 0 8px var(--a2);
  animation:blink 1.8s ease-in-out infinite; display:inline-block;
}
.dg-router-sub { font-size:11px; color:var(--muted); }

/* ─── Fan connector: router → 4 branches ─── */
.dg-fan { display:flex; flex-direction:column; align-items:stretch; }
.dg-fan-stem { width:1px; height:16px; background:linear-gradient(rgba(99,102,241,.6),rgba(99,102,241,.15)); }

/* Horizontal bar — gradient fades at edges, aligns with col centers */
.dg-fan-bar {
  height:1px; margin:0;
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(99,102,241,.45) 12.5%,
    rgba(99,102,241,.45) 87.5%,
    transparent 100%
  );
}

/* 4 vertical drops — MUST match .dg-grid4 exactly */
.dg-fan-drops {
  display:grid; grid-template-columns:repeat(4,1fr); gap:28px;
  height:28px;
}
.dg-drop {
  height:28px; position:relative;
  display:flex; justify-content:center;
}
/* Vertical drop line */
.dg-drop::before {
  content:''; position:absolute;
  top:0; left:50%; transform:translateX(-50%);
  width:1px; height:100%;
  background:linear-gradient(rgba(99,102,241,.4),rgba(99,102,241,.05));
}
/* Animated coloured dot */
.dg-drop::after {
  content:''; position:absolute;
  top:0; left:50%; transform:translateX(-50%);
  width:5px; height:5px; border-radius:50%;
  animation:drop-anim 2.2s ease-in-out infinite;
}
.fd-green::after  { background:#4ade80; box-shadow:0 0 6px #4ade80; animation-delay:0s; }
.fd-red::after    { background:#f87171; box-shadow:0 0 6px #f87171; animation-delay:.4s; }
.fd-orange::after { background:var(--orange); box-shadow:0 0 6px var(--orange); animation-delay:.8s; }
.fd-cyan::after   { background:var(--cyan);   box-shadow:0 0 6px var(--cyan);   animation-delay:.2s; }
@keyframes drop-anim {
  0%   { top:0; opacity:0; }
  12%  { opacity:1; }
  88%  { opacity:1; }
  100% { top:28px; opacity:0; }
}

/* ─── Branch headers ─── */
.bh {
  padding:24px 18px 20px; border-radius:16px; border:1px solid;
  text-align:center; cursor:default;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  transition:transform .25s, box-shadow .25s, border-color .25s;
}
.bh:hover { transform:translateY(-3px); }
.bh-ico { font-size:40px; display:block; line-height:1; }
.bh strong { font-size:15px; font-weight:800; display:block; }
.bh span   { font-size:11px; opacity:.65; display:block; line-height:1.4; }

.bh-green  { border-color:rgba(74,222,128,.3);  background:rgba(74,222,128,.07);  color:#4ade80; }
.bh-red    { border-color:rgba(248,113,113,.3); background:rgba(248,113,113,.07); color:#f87171; }
.bh-orange { border-color:rgba(251,146,60,.3);  background:rgba(251,146,60,.07);  color:var(--orange); }
.bh-cyan   { border-color:rgba(34,211,238,.3);  background:rgba(34,211,238,.07);  color:var(--cyan); }
.bh-green:hover  { box-shadow:0 6px 24px rgba(74,222,128,.15);  border-color:rgba(74,222,128,.55); }
.bh-red:hover    { box-shadow:0 6px 24px rgba(248,113,113,.15); border-color:rgba(248,113,113,.55); }
.bh-orange:hover { box-shadow:0 6px 24px rgba(251,146,60,.15);  border-color:rgba(251,146,60,.55); }
.bh-cyan:hover   { box-shadow:0 6px 24px rgba(34,211,238,.15);  border-color:rgba(34,211,238,.55); }

/* ─── Server chains (legacy, kept for fallback) ─── */
.dg-chain { display:flex; flex-direction:column; align-items:stretch; }
.dg-chain .dg-vc { margin:0 auto; }

/* ─── Exit section (now inside dg-col, no separate row needed) ─── */
.dg-exit { display:flex; flex-direction:column; align-items:center; }

/* Server node box */
.sbox {
  padding:14px 16px; border-radius:12px; border:1px solid;
  background:rgba(255,255,255,.025);
  display:flex; align-items:center; gap:10px;
  transition:transform .2s, border-color .2s, box-shadow .2s;
  cursor:default;
}
.sbox:hover { transform:translateY(-2px); }
.sbox b     { display:block; font-size:13px; font-weight:700; color:var(--text); }
.sbox small { display:block; font-size:11px; color:var(--muted); margin-top:3px; }

.sb-green  { border-color:rgba(74,222,128,.25); }
.sb-red    { border-color:rgba(248,113,113,.25); }
.sb-orange { border-color:rgba(251,146,60,.25); }
.sb-cyan   { border-color:rgba(34,211,238,.25); }
.sb-green:hover  { border-color:rgba(74,222,128,.5);  box-shadow:0 4px 16px rgba(74,222,128,.1); }
.sb-red:hover    { border-color:rgba(248,113,113,.5); box-shadow:0 4px 16px rgba(248,113,113,.1); }
.sb-orange:hover { border-color:rgba(251,146,60,.5);  box-shadow:0 4px 16px rgba(251,146,60,.1); }
.sb-cyan:hover   { border-color:rgba(34,211,238,.5);  box-shadow:0 4px 16px rgba(34,211,238,.1); }

/* Status dot inside sbox */
.sdot {
  width:7px; height:7px; border-radius:50%; flex-shrink:0;
  animation:blink 2s ease-in-out infinite;
}
.dot-green  { background:#4ade80; box-shadow:0 0 6px #4ade80; }
.dot-red    { background:#f87171; box-shadow:0 0 6px #f87171; animation-delay:.3s; }
.dot-orange { background:var(--orange); box-shadow:0 0 6px var(--orange); animation-delay:.6s; }
.dot-cyan   { background:var(--cyan);   box-shadow:0 0 6px var(--cyan);   animation-delay:.9s; }

/* Failover separator — CENTERED, no border-left hacks */
.dg-fo {
  display:flex; flex-direction:column; align-items:center; gap:0; padding:3px 0;
}
.dg-fo-line {
  width:1px; height:14px;
  background:linear-gradient(rgba(251,146,60,.35),rgba(251,146,60,.1));
}
.dg-fo-tag {
  font-size:11px; color:var(--muted); white-space:nowrap; padding:4px 12px;
  background:rgba(251,146,60,.06); border:1px solid rgba(251,146,60,.15);
  border-radius:50px;
}

/* YouTube badge */
.dg-badge {
  text-align:center; font-size:11px; color:var(--a2); margin-top:10px;
  background:rgba(99,102,241,.07); border:1px solid rgba(99,102,241,.15);
  border-radius:50px; padding:7px 12px;
}

/* ─── Exit row ─── */
.dg-exit { display:flex; flex-direction:column; align-items:center; }
.exit-pill {
  width:100%; padding:12px 10px; border-radius:50px;
  text-align:center; font-size:13px; font-weight:700; border:1px solid;
  transition:transform .2s, box-shadow .2s;
  cursor:default;
}
.exit-pill:hover { transform:translateY(-2px); }
.ep-green  { color:#4ade80;      border-color:rgba(74,222,128,.3);  background:rgba(74,222,128,.06); }
.ep-red    { color:#f87171;      border-color:rgba(248,113,113,.3); background:rgba(248,113,113,.06); }
.ep-orange { color:var(--orange); border-color:rgba(251,146,60,.3);  background:rgba(251,146,60,.06); }
.ep-cyan   { color:var(--cyan);   border-color:rgba(34,211,238,.3);  background:rgba(34,211,238,.06); }
.ep-green:hover  { box-shadow:0 4px 16px rgba(74,222,128,.15); }
.ep-red:hover    { box-shadow:0 4px 16px rgba(248,113,113,.15); }
.ep-orange:hover { box-shadow:0 4px 16px rgba(251,146,60,.15); }
.ep-cyan:hover   { box-shadow:0 4px 16px rgba(34,211,238,.15); }

/* ─── Legend ─── */
.diag-legend {
  display:flex; gap:20px; flex-wrap:wrap; justify-content:center;
  margin-top:32px; padding:18px 24px;
  background:rgba(255,255,255,.02); border:1px solid var(--border); border-radius:12px;
}
.leg-item { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--muted); }
.leg-dot  { width:8px; height:8px; border-radius:50%; flex-shrink:0; }

/* ─── Responsive: tablet ─── */
@media(max-width:1000px) {
  .dg-grid4, .dg-fan-drops { grid-template-columns:1fr 1fr; gap:20px; }
  .dg-fan-bar { display:none; }
  .dg-fan-drops { margin-top:0; }
}

/* ─── Responsive: mobile — horizontal swipe cards ─── */
@media(max-width:640px) {
  /* Hide fan connector entirely */
  .dg-fan { display:none; }

  /* Swipe container */
  .dg-grid4 {
    display:flex;
    flex-direction:row;
    overflow-x:scroll;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    gap:12px;
    padding:4px 20px 12px;
    margin:0 -20px;
  }
  .dg-grid4::-webkit-scrollbar { display:none; }

  /* Each card: 74vw — always relative to screen, peek ~22vw */
  .dg-col {
    min-width:74vw;
    max-width:74vw;
    flex-shrink:0;
    scroll-snap-align:start;
  }

  /* Compact inner padding on mobile */
  .bh { padding:14px 12px 12px; }
  .bh-ico { font-size:30px; }
  .bh strong { font-size:14px; }
  .col-why { font-size:12px; padding:9px 10px; }
  .sbox { padding:10px 11px; }
  .sbox b { font-size:12px; }
  .sbox small { font-size:11px; }
  .dg-fo-tag { font-size:11px; padding:3px 10px; }
  .exit-pill { font-size:13px; padding:11px 8px; }

  /* Legend wraps nicely */
  .diag-legend { gap:12px; }
  .leg-item { font-size:13px; }

  /* Device + router on mobile */
  .dev-box { padding:14px 24px; font-size:14px; }
  .dg-router { padding:12px 24px; font-size:13px; }
}

/* Swipe hint — shown only on mobile */
.dg-mob-hint {
  display:none;
  text-align:center; font-size:12px; color:var(--muted);
  margin-top:8px; letter-spacing:.5px;
}
@media(max-width:640px) {
  .dg-mob-hint { display:block; }
}

/* Dots indicator */
.dg-mob-dots {
  display:none;
  justify-content:center; gap:7px;
  margin-top:14px;
}
@media(max-width:640px) {
  .dg-mob-dots { display:flex; }
}
.dg-dot {
  width:7px; height:7px; border-radius:50%;
  background:rgba(255,255,255,.15);
  transition:all .25s;
}
.dg-dot-active {
  background:var(--accent);
  box-shadow:0 0 8px var(--accent);
  width:20px;
  border-radius:4px;
}

/* Device pulse */
@keyframes dev-pulse {
  0%,100% { box-shadow:0 0 20px rgba(99,102,241,.2); }
  50%      { box-shadow:0 0 40px rgba(99,102,241,.5); }
}
.dev-box { animation:dev-pulse 3s ease-in-out infinite; }

/* Legend */
.diag-legend {
  display:flex; gap:20px; flex-wrap:wrap; justify-content:center;
  margin-top:36px; padding:20px; background:var(--card);
  border:1px solid var(--border); border-radius:12px;
}
.leg-item { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--muted); }
.leg-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }

/* ══ PRICING ══ */
.price-bg { background:var(--bg2); }
.p-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:20px; margin-top:52px; align-items:start; }
.p-grid-2 { max-width:700px; margin-left:auto; margin-right:auto; }
.pc { background:var(--card); border:1px solid var(--border); border-radius:var(--r); padding:36px; position:relative; transition:all .25s; }
.pc:hover { transform:translateY(-4px); box-shadow:0 20px 60px rgba(0,0,0,.5); }
.pc.pop { background:rgba(99,102,241,.06); border-color:rgba(99,102,241,.3); box-shadow:0 0 50px rgba(99,102,241,.08); }
.ptag { position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:linear-gradient(90deg,var(--accent),var(--a3));color:#fff;padding:4px 18px;border-radius:50px;font-size:11px;font-weight:800;letter-spacing:.5px;white-space:nowrap; }
.p-ico { font-size:30px;margin-bottom:12px; }
.p-name { font-size:19px;font-weight:800;margin-bottom:6px; }
.p-desc { color:var(--muted);font-size:13px;margin-bottom:22px;line-height:1.5; }
.p-num { font-size:50px;font-weight:900;color:var(--text);letter-spacing:-2px; }
.p-cur { font-size:20px;font-weight:700;color:var(--muted);vertical-align:super; }
.p-per { font-size:13px;color:var(--muted);display:block;margin-top:4px;margin-bottom:26px; }
.p-list { list-style:none;margin-bottom:28px; }
.p-list li { padding:9px 0;font-size:13px;color:var(--muted);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px; }
.p-list li:last-child { border:none; }
.p-list li::before { content:'✦';color:var(--a2);font-size:9px;flex-shrink:0; }
.btn-b { display:block;text-align:center;padding:13px;border-radius:10px;font-weight:700;font-size:13px;transition:all .2s;background:rgba(99,102,241,.08);border:1px solid rgba(99,102,241,.2);color:var(--a2); }
.pc.pop .btn-b,.btn-b:hover { background:linear-gradient(135deg,var(--accent),var(--a3));border-color:transparent;color:#fff;box-shadow:0 4px 20px rgba(99,102,241,.4); }

/* ══ BUY ══ */
.buy-bg { background:var(--bg); }

/* ══ SERVERS ══ */
.srv-bg { background:var(--bg2); }
.srv-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;margin-top:48px; }
.sc { background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px 18px;display:flex;align-items:center;gap:12px;transition:all .2s; }
.sc:hover { border-color:rgba(99,102,241,.25);background:rgba(99,102,241,.04); }
.sc-f { font-size:24px; }
.sc-n { font-size:13px;font-weight:600; }
.sc-p { font-size:11px;color:var(--green);margin-top:2px; }

/* ══ FAQ ══ */
.faq-bg { background:var(--bg); }
.faq-w { max-width:680px;margin-top:48px; }
details { border-bottom:1px solid var(--border); }
summary { padding:20px 0;font-size:15px;font-weight:600;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px; }
summary::-webkit-details-marker { display:none; }
.si { width:26px;height:26px;flex-shrink:0;background:rgba(99,102,241,.08);border:1px solid rgba(99,102,241,.15);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--a2);font-size:15px;font-weight:300;transition:transform .2s; }
details[open] .si { transform:rotate(45deg);background:rgba(99,102,241,.15); }
details p { color:var(--muted);font-size:14px;padding-bottom:20px;line-height:1.75; }

/* ══ CTA ══ */
.cta-s { text-align:center;padding:120px 20px;border-top:1px solid var(--border);background:radial-gradient(ellipse 70% 50% at 50% 50%,rgba(99,102,241,.07) 0%,transparent 70%); }
.cta-s h2 { font-size:clamp(30px,5vw,56px);font-weight:900;letter-spacing:-1.5px;margin-bottom:16px;background:linear-gradient(135deg,#fff 0%,#c7d2fe 60%,var(--a2) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; }
.cta-s p { color:var(--muted);font-size:18px;margin-bottom:44px; }

/* ══ FOOTER ══ */
.site-footer { background:var(--bg);padding:60px 20px 28px;border-top:1px solid var(--border); }
.fi2 { max-width:1140px;margin:0 auto; }
.fg { display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;margin-bottom:48px; }
.fb-t { font-size:20px;font-weight:900;color:var(--text);margin-bottom:10px; }
.fb-t em { color:var(--a2);font-style:normal; }
.footer-brand p { color:var(--muted);font-size:13px;line-height:1.7; }
.footer-col h4 { font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-bottom:16px; }
.footer-col a { display:block;color:var(--muted);font-size:13px;margin-bottom:10px;transition:color .2s; }
.footer-col a:hover { color:var(--text); }
.fbot { padding-top:20px;border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:12px; }

@media(max-width:900px) { .site-header{padding:12px 20px;} nav{display:none;} .fg{grid-template-columns:1fr 1fr;gap:28px;} .diag-branches,.diag-servers,.diag-exits{grid-template-columns:1fr 1fr;} }
@media(max-width:560px) {
  .hero { padding:80px 16px 40px; }
  .hero-stats { flex-wrap:wrap; }
  .hstat { flex:1 1 45%; min-width:45%; border-right:1px solid var(--border); }
  .hstat:nth-child(2n) { border-right:none; }
  .hstat:nth-child(n+3) { border-top:1px solid var(--border); }
  .steps-row{grid-template-columns:1fr 1fr;}
  .diag-branches,.diag-servers,.diag-exits{grid-template-columns:1fr 1fr;}
  .fg{grid-template-columns:1fr;}
  .fbot{flex-direction:column;gap:8px;text-align:center;}
}