/* Source block 1 */
:root{
  --bg:#050208;
  --bg2:#09040f;
  --panel:rgba(18,8,27,.72);
  --panel-solid:#100817;
  --panel-soft:rgba(255,255,255,.035);
  --line:rgba(212,126,255,.16);
  --line2:rgba(255,255,255,.075);
  --text:#fbf7ff;
  --muted:#a69bad;
  --muted2:#786d82;
  --purple:#bd53ff;
  --purple2:#792cff;
  --pink:#e788ff;
  --blue:#79dcff;
  --green:#79ffb7;
  --danger:#ff7296;
  --max:1220px;
  --r:26px;
}

*{box-sizing:border-box}
html{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
  overscroll-behavior-x:none;
  scroll-behavior:smooth;
  background:#050208;
}
.skip-link{
  position:fixed;
  z-index:200;
  left:16px;
  top:12px;
  padding:11px 15px;
  border-radius:12px;
  background:#fff;
  color:#13071b;
  font-weight:850;
  transform:translateY(-160%);
  transition:transform .18s ease;
}
.skip-link:focus{transform:translateY(0)}
body{
  margin:0;
  width:100%;
  max-width:100%;
  min-height:100vh;
  overflow-x:hidden;
  overscroll-behavior-x:none;
  touch-action:pan-y pinch-zoom;
  color:var(--text);
  font-family:"Segoe UI Variable","Segoe UI",Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
  background:
    radial-gradient(circle at 13% -5%,rgba(141,44,255,.20),transparent 28%),
    radial-gradient(circle at 88% 18%,rgba(90,31,175,.16),transparent 26%),
    linear-gradient(180deg,#050208 0%,#08030d 45%,#050208 100%);
}

body:before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-4;
  opacity:.28;
  background-image:
    linear-gradient(rgba(199,93,255,.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(199,93,255,.028) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:linear-gradient(to bottom,#000,transparent 82%);
}

body:after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-3;
  background:
    radial-gradient(340px 340px at var(--mx,50%) var(--my,20%),rgba(184,73,255,.07),transparent 72%);
}

::selection{background:rgba(190,74,255,.32);color:#fff}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
button{color:inherit}
.container{width:min(var(--max),calc(100% - 42px));margin:auto}

.bg-particles{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-2;
  overflow:hidden;
}
.bg-particles i{
  position:absolute;
  width:3px;height:3px;
  border-radius:50%;
  background:#bf59ff;
  box-shadow:0 0 10px #a943ff;
  opacity:.2;
  animation:particleDrift linear infinite;
}
.bg-particles i:nth-child(1){left:7%;top:70%;animation-duration:20s}
.bg-particles i:nth-child(2){left:19%;top:32%;animation-duration:27s;animation-delay:-8s}
.bg-particles i:nth-child(3){left:37%;top:82%;animation-duration:24s;animation-delay:-3s}
.bg-particles i:nth-child(4){left:56%;top:21%;animation-duration:29s;animation-delay:-13s}
.bg-particles i:nth-child(5){left:74%;top:64%;animation-duration:22s;animation-delay:-6s}
.bg-particles i:nth-child(6){left:88%;top:26%;animation-duration:31s;animation-delay:-17s}
.bg-particles i:nth-child(7){left:95%;top:80%;animation-duration:25s;animation-delay:-11s}
.bg-particles i:nth-child(8){left:45%;top:49%;animation-duration:34s;animation-delay:-4s}
@keyframes particleDrift{
  0%{transform:translate3d(0,45px,0);opacity:0}
  15%{opacity:.3}
  55%{opacity:.55}
  100%{transform:translate3d(80px,-130px,0);opacity:0}
}

header{
  position:sticky;
  top:0;
  z-index:60;
  border-bottom:1px solid rgba(255,255,255,.045);
  background:rgba(6,3,10,.70);
  backdrop-filter:blur(22px);
}
.nav{
  min-height:76px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.brand{
  display:flex;align-items:center;gap:13px;min-width:max-content;
}
.brand-logo{
  width:48px;height:48px;object-fit:contain;border-radius:14px;
  filter:drop-shadow(0 0 16px rgba(191,75,255,.40));
}
.brand-copy{display:flex;flex-direction:column;line-height:1}
.brand-name{
  font-size:20px;font-weight:950;letter-spacing:.12em;
  background:linear-gradient(90deg,#fff,#e1b5ff 55%,#c15fff);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.brand-tag{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#83768f;margin-top:6px}
.navlinks{display:flex;align-items:center;gap:27px;color:#a89ead;font-size:14px}
.navlinks a{transition:.2s}
.navlinks a:hover{color:#fff}
.nav-actions{display:flex;align-items:center;gap:10px}

.btn{
  border:0;min-height:44px;padding:0 18px;border-radius:14px;
  cursor:pointer;font-weight:850;font-size:14px;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  transition:transform .2s ease,background .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn-ghost{border:1px solid var(--line2);background:rgba(255,255,255,.045)}
.btn-ghost:hover{background:rgba(255,255,255,.075);border-color:rgba(255,255,255,.14)}
.btn-main{
  background:linear-gradient(135deg,#7626e9,#b33cff 58%,#e37cff);
  box-shadow:0 12px 35px rgba(160,48,255,.28),inset 0 1px 0 rgba(255,255,255,.24);
}
.btn-main:hover{box-shadow:0 16px 45px rgba(160,48,255,.43)}

.hero{
  min-height:720px;
  padding:88px 0 72px;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:60px;
  align-items:center;
}
.hero-copy{position:relative;z-index:5}
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  padding:9px 12px;margin-bottom:24px;border-radius:999px;
  border:1px solid rgba(196,91,255,.20);
  background:rgba(181,67,255,.065);
  color:#e8c9fb;font-size:12px;font-weight:750;letter-spacing:.03em;
}
.live-dot{width:8px;height:8px;border-radius:50%;background:#8affbd;box-shadow:0 0 14px #75ffb0}
h1{
  margin:0;
  max-width:760px;
  font-size:clamp(49px,6.6vw,84px);
  line-height:.96;
  letter-spacing:-.055em;
}
.grad{
  background:linear-gradient(90deg,#fff 0%,#e5b1ff 48%,#a842ff 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-copy>p{
  max-width:700px;
  margin:26px 0 0;
  color:var(--muted);
  font-size:18px;
  line-height:1.72;
}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:31px}
.hero-actions .btn{min-height:50px;padding:0 22px}
.hero-points{
  display:flex;flex-wrap:wrap;gap:12px 18px;margin-top:27px;
  color:#c4bacb;font-size:13px
}
.hero-points span{display:flex;align-items:center;gap:8px}
.hero-points i{
  width:19px;height:19px;border-radius:7px;display:grid;place-items:center;
  color:#dfa4ff;background:rgba(184,68,255,.08);border:1px solid rgba(184,68,255,.18);
  font-style:normal;font-size:11px
}

.hero-visual{
  min-height:530px;
  position:relative;
  display:grid;
  place-items:center;
  perspective:1200px;
}
.hero-halo{
  position:absolute;width:500px;height:500px;border-radius:50%;
  background:radial-gradient(circle,rgba(172,54,255,.23),rgba(80,23,130,.08) 45%,transparent 72%);
}
.orbit{
  position:absolute;border-radius:50%;border:1px solid rgba(202,98,255,.17);
}
.orbit.a{width:465px;height:465px;animation:spin 23s linear infinite}
.orbit.b{width:380px;height:380px;border-style:dashed;opacity:.56;animation:spinBack 29s linear infinite}
.orbit.a:before,.orbit.a:after,.orbit.b:before{
  content:"";position:absolute;width:9px;height:9px;border-radius:50%;
  background:#d56dff;box-shadow:0 0 18px #c549ff;
}
.orbit.a:before{left:17%;top:9%}
.orbit.a:after{right:3%;top:48%;background:#79dcff;box-shadow:0 0 18px #79dcff}
.orbit.b:before{left:8%;bottom:22%;background:#7dffb8;box-shadow:0 0 18px #7dffb8}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes spinBack{to{transform:rotate(-360deg)}}

.logo-core{
  position:relative;
  width:365px;height:365px;border-radius:50%;
  display:grid;place-items:center;
  background:
    radial-gradient(circle,rgba(97,30,143,.22),rgba(8,4,12,.78) 68%);
  border:1px solid rgba(203,104,255,.18);
  box-shadow:
    0 0 0 15px rgba(185,70,255,.025),
    0 35px 100px rgba(0,0,0,.48),
    inset 0 0 55px rgba(173,60,255,.08);
  transform:rotateX(var(--ry,0deg)) rotateY(var(--rx,0deg));
  transition:transform .15s ease-out;
  overflow:hidden;
  z-index:3;
}
.logo-core:before{
  content:"";position:absolute;inset:10%;border-radius:50%;
  border:1px solid rgba(215,130,255,.18);
  animation:corePulse 3s ease-in-out infinite;
}
.logo-core:after{
  content:"";position:absolute;inset:-40%;
  background:linear-gradient(110deg,transparent 42%,rgba(255,255,255,.07) 50%,transparent 58%);
  transform:translateX(-60%);
  animation:shine 6s ease-in-out infinite;
}
.logo-core img{width:94%;height:94%;object-fit:contain;z-index:2;filter:drop-shadow(0 0 28px rgba(190,70,255,.34))}
@keyframes corePulse{0%,100%{transform:scale(.96);opacity:.6}50%{transform:scale(1.03);opacity:1}}
@keyframes shine{0%,50%{transform:translateX(-60%) rotate(10deg)}85%,100%{transform:translateX(65%) rotate(10deg)}}

.hero-packet{
  position:absolute;width:8px;height:8px;border-radius:50%;
  background:#dc83ff;box-shadow:0 0 16px #c95cff;z-index:4;
}
.hp1{animation:hp1 5.8s linear infinite}
.hp2{background:#7ee1ff;box-shadow:0 0 16px #7ee1ff;animation:hp2 7s linear infinite -2s}
.hp3{background:#82ffbc;box-shadow:0 0 16px #82ffbc;animation:hp3 6.3s linear infinite -4s}
@keyframes hp1{0%{left:0;top:50%;opacity:0}12%{opacity:1}50%{left:46%;top:49%}62%{left:55%;top:48%}100%{left:100%;top:20%;opacity:0}}
@keyframes hp2{0%{left:12%;top:8%;opacity:0}10%{opacity:1}50%{left:48%;top:46%}60%{left:55%;top:52%}100%{left:94%;top:86%;opacity:0}}
@keyframes hp3{0%{right:0;top:62%;opacity:0}12%{opacity:1}50%{right:45%;top:51%}60%{right:54%;top:49%}100%{right:98%;top:24%;opacity:0}}

.float-card{
  position:absolute;z-index:6;min-width:190px;padding:14px 16px;
  border:1px solid rgba(196,92,255,.18);
  border-radius:17px;background:rgba(14,7,21,.80);backdrop-filter:blur(15px);
  box-shadow:0 20px 55px rgba(0,0,0,.4)
}
.float-card small{display:block;color:#877b91;font-size:11px;margin-bottom:5px}
.float-card strong{font-size:15px}
.fc1{left:-12px;top:85px}
.fc2{right:-6px;bottom:80px}
.status-green{display:inline-block;width:8px;height:8px;border-radius:50%;background:#7bffb5;box-shadow:0 0 14px #7bffb5;margin-right:8px}

.section{padding:78px 0}
.section-head{max-width:770px;margin-bottom:34px}
.kicker{font-size:12px;font-weight:900;letter-spacing:.17em;text-transform:uppercase;color:#c567ff;margin-bottom:11px}
h2{margin:0 0 14px;font-size:clamp(34px,4vw,51px);letter-spacing:-.038em;line-height:1.04}
.section-head p{margin:0;color:var(--muted);line-height:1.72}

.features{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.feature{
  min-height:220px;padding:24px;border-radius:var(--r);
  position:relative;overflow:hidden;
  border:1px solid rgba(188,81,255,.13);
  background:linear-gradient(180deg,rgba(43,18,61,.43),rgba(16,8,24,.60));
  transition:.28s ease;
}
.feature:hover{transform:translateY(-5px);border-color:rgba(197,90,255,.28);box-shadow:0 25px 60px rgba(0,0,0,.24)}
.feature:after{
  content:"";position:absolute;width:160px;height:160px;border-radius:50%;
  right:-80px;bottom:-90px;background:rgba(173,58,255,.09);filter:blur(12px)
}
.ficon{
  width:48px;height:48px;border-radius:15px;display:grid;place-items:center;
  margin-bottom:23px;color:#e4b9ff;font-size:20px;
  background:linear-gradient(145deg,rgba(184,73,255,.15),rgba(184,73,255,.04));
  border:1px solid rgba(202,110,255,.18)
}
.feature h3{margin:0 0 9px;font-size:19px}
.feature p{margin:0;color:#a59aaa;font-size:14px;line-height:1.65}

/* REAL WORLD NETWORK */
.world-shell{
  position:relative;overflow:hidden;
  border-radius:32px;
  border:1px solid rgba(191,78,255,.18);
  background:
    radial-gradient(circle at 50% 43%,rgba(118,35,181,.14),transparent 39%),
    linear-gradient(180deg,rgba(22,9,32,.84),rgba(8,4,12,.94));
  box-shadow:0 30px 85px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.035);
}
.world-shell:before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(rgba(197,91,255,.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(197,91,255,.028) 1px,transparent 1px);
  background-size:38px 38px;
  mask-image:linear-gradient(to bottom,#000,transparent 92%);
}
.world-top{
  position:relative;z-index:8;padding:27px 29px 6px;
  display:flex;align-items:flex-start;justify-content:space-between;gap:22px
}
.world-top h3{margin:0 0 8px;font-size:clamp(25px,3vw,35px);letter-spacing:-.03em}
.world-top p{margin:0;color:#9c91a5;font-size:14px;line-height:1.6}
.live-pill{
  flex:0 0 auto;display:flex;align-items:center;gap:8px;
  padding:9px 12px;border-radius:999px;
  border:1px solid rgba(100,255,170,.15);
  background:rgba(77,255,153,.055);color:#d8ffe8;
  font-size:10px;font-weight:900;letter-spacing:.09em
}
.live-pill i{width:8px;height:8px;border-radius:50%;background:#76ffb0;box-shadow:0 0 14px #76ffb0;animation:blink 1.5s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:.45;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}

.map-wrap{
  position:relative;
  margin:0 20px;
  aspect-ratio:1280/649;
  min-height:360px;
  overflow:hidden;
}
.real-map{
  position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  opacity:.72;
  filter:invert(1) sepia(1) saturate(6.5) hue-rotate(235deg) brightness(1.32) contrast(1.18);
  mix-blend-mode:screen;
  user-select:none;pointer-events:none;
}
.map-fade{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse at center,transparent 52%,rgba(7,3,11,.38) 79%,rgba(7,3,11,.86) 100%);
}
.route-layer{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.route-glow{fill:none;stroke:rgba(194,72,255,.11);stroke-width:7;filter:blur(2px)}
.route{fill:none;stroke:url(#rp);stroke-width:1.8;stroke-linecap:round;stroke-dasharray:7 9;filter:drop-shadow(0 0 5px rgba(196,81,255,.55));animation:routeMove 9s linear infinite}
.route.blue{stroke:url(#rb);animation-duration:11s;animation-direction:reverse}
.route.green{stroke:url(#rg);animation-duration:8s}
@keyframes routeMove{to{stroke-dashoffset:-180}}
.packet{filter:drop-shadow(0 0 7px currentColor)}
.packet.purple{fill:#e4a1ff;color:#c663ff}
.packet.blue{fill:#94e8ff;color:#71d9ff}
.packet.green{fill:#98ffca;color:#76ffb6}

.node{cursor:pointer;outline:none}
.node-hit{fill:transparent}
.node-halo{fill:none;stroke:#cb66ff;stroke-width:1.5;transform-box:fill-box;transform-origin:center;animation:nodeHalo 2.4s ease-out infinite}
.node-halo.blue{stroke:#76dbff}
.node-halo.green{stroke:#78ffb8}
.node-core{fill:#d36dff;stroke:white;stroke-width:2;filter:drop-shadow(0 0 7px #c44dff)}
.node-core.blue{fill:#77dcff;filter:drop-shadow(0 0 7px #77dcff)}
.node-core.green{fill:#78ffb8;filter:drop-shadow(0 0 7px #78ffb8)}
.node-label{fill:#eee7f3;font-size:13px;font-weight:800;paint-order:stroke;stroke:#09050e;stroke-width:5px;stroke-linejoin:round;pointer-events:none}
@keyframes nodeHalo{0%{r:6;opacity:.95}100%{r:24;opacity:0}}
.node:focus .node-core,.node.active .node-core{stroke-width:3;filter:drop-shadow(0 0 13px #dd86ff)}

.server-info{
  position:absolute;
  right:28px;
  top:76px;
  z-index:10;
  width:250px;
  padding:17px;
  border-radius:18px;
  background:rgba(12,6,18,.84);
  backdrop-filter:blur(17px);
  border:1px solid rgba(196,92,255,.20);
  box-shadow:0 20px 60px rgba(0,0,0,.38);
  transition:.22s ease;
}
.server-info small{display:block;color:#7f7389;font-size:10px;letter-spacing:.1em;margin-bottom:8px}
.server-name{font-size:18px;font-weight:900;margin-bottom:13px}
.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.info-item{padding:10px;border-radius:12px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.055)}
.info-item span{display:block;color:#786d82;font-size:9px;margin-bottom:4px}
.info-item b{font-size:12px}
.info-online{color:#82ffbb}

.world-stats{
  position:relative;z-index:8;
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid rgba(255,255,255,.055);
  background:rgba(255,255,255,.022)
}
.world-stat{padding:17px 20px;min-width:0}
.world-stat:not(:last-child){border-right:1px solid rgba(255,255,255,.05)}
.world-stat small{display:block;color:#74687d;font-size:9px;letter-spacing:.1em;margin-bottom:6px}
.world-stat strong{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c-purple{color:#d987ff}.c-blue{color:#85e1ff}.c-green{color:#84ffbd}

.tech-layout{
  display:grid;grid-template-columns:1.05fr .95fr;gap:18px
}
.tech-card{
  border-radius:28px;border:1px solid rgba(188,79,255,.14);
  background:linear-gradient(180deg,rgba(38,16,53,.40),rgba(15,7,22,.63));
  padding:29px
}
.tech-card h3{font-size:25px;margin:0 0 12px}
.tech-card>p{color:var(--muted);line-height:1.7;margin:0}
.chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px}
.chip{padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.065);font-size:13px;color:#ddd4e4}
.chip.p{background:rgba(181,64,255,.065);border-color:rgba(190,80,255,.17)}

.mini-console{
  min-height:290px;position:relative;overflow:hidden
}
.console-head{display:flex;align-items:center;justify-content:space-between;gap:15px}
.console-live{font-size:11px;color:#9affc6}
.bars{
  height:135px;margin-top:35px;display:flex;align-items:flex-end;gap:7px;
  padding:0 4px;border-bottom:1px solid rgba(255,255,255,.07)
}
.bars span{
  flex:1;min-width:5px;border-radius:4px 4px 1px 1px;
  background:linear-gradient(to top,#7124de,#b83dff 64%,#e288ff);
  box-shadow:0 0 12px rgba(180,64,255,.14);
  transition:height .6s ease
}
.console-bottom{display:flex;justify-content:space-between;gap:15px;margin-top:18px;color:#82758c;font-size:11px}
.console-bottom b{color:#e4dcea;font-size:13px}

.price-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.price-copy,.price-card{
  padding:31px;border-radius:29px
}
.price-copy{border:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.025)}
.price-copy h3{font-size:25px;margin:0 0 13px}
.price-copy p{margin:0;color:var(--muted);line-height:1.72}
.included{display:grid;gap:12px;margin-top:24px}
.included div{display:flex;align-items:center;gap:11px;color:#d8d0df;font-size:14px}
.check{width:27px;height:27px;display:grid;place-items:center;border-radius:9px;background:rgba(186,71,255,.08);border:1px solid rgba(194,83,255,.16);color:#df9dff}

.price-card{
  position:relative;overflow:hidden;
  border:1px solid rgba(204,94,255,.26);
  background:
    radial-gradient(circle at 100% 0%,rgba(187,65,255,.17),transparent 35%),
    linear-gradient(145deg,rgba(57,22,81,.58),rgba(17,8,25,.88));
  box-shadow:0 32px 95px rgba(0,0,0,.43)
}
.price-card:before{
  content:"";position:absolute;inset:-20%;
  background:linear-gradient(110deg,transparent 42%,rgba(255,255,255,.065) 50%,transparent 58%);
  transform:translateX(-75%);
  animation:priceShine 7s ease-in-out infinite
}
@keyframes priceShine{0%,55%{transform:translateX(-75%)}90%,100%{transform:translateX(75%)}}
.plan-line{position:relative;display:flex;align-items:center;justify-content:space-between;gap:15px}
.plan-line strong{font-size:20px}
.plan-pill{padding:7px 10px;border-radius:999px;border:1px solid rgba(195,85,255,.18);background:rgba(189,70,255,.075);font-size:10px;color:#edc8ff;font-weight:850}
.price{position:relative;display:flex;align-items:flex-end;gap:8px;margin:29px 0 6px}
.price b{font-size:68px;line-height:.9;letter-spacing:-.055em}
.price span{color:#9c90a4;padding-bottom:7px}
.price-card>small{position:relative;color:#887b91}
.benefits{position:relative;list-style:none;padding:0;margin:25px 0;display:grid;gap:12px}
.benefits li{display:flex;gap:10px;color:#ddd4e3;font-size:14px}
.benefits b{color:#dd93ff}
.price-card .btn{position:relative;width:100%;height:52px}

.cta{
  margin-top:18px;padding:32px;border-radius:28px;
  border:1px solid rgba(191,79,255,.18);
  background:linear-gradient(135deg,rgba(72,25,103,.38),rgba(18,8,27,.69));
  display:flex;align-items:center;justify-content:space-between;gap:24px
}
.cta h3{margin:0 0 7px;font-size:26px}
.cta p{margin:0;color:var(--muted)}

footer{padding:40px 0 48px;color:#7c7086;font-size:13px}
.footer{padding-top:24px;border-top:1px solid rgba(255,255,255,.06);display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.footer-brand{display:flex;align-items:center;gap:10px}
.footer-brand img{width:34px;height:34px;object-fit:contain}
.footer-links{display:flex;gap:18px}
.footer-links a:hover{color:#ddd}

.modal{
  display:none;position:fixed;inset:0;z-index:100;
  align-items:center;justify-content:center;padding:20px;
  background:rgba(0,0,0,.72);backdrop-filter:blur(9px)
}
.modal.open{display:flex}
.modal-card{
  width:min(430px,100%);padding:24px;border-radius:24px;
  background:#0e0714;border:1px solid rgba(194,83,255,.20);
  box-shadow:0 35px 110px rgba(0,0,0,.65)
}
.modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.modal-title{display:flex;align-items:center;gap:10px}
.modal-title img{width:40px;height:40px;object-fit:contain}
.modal-title h3{margin:0;font-size:22px}
.close{width:38px;height:38px;border-radius:12px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.04);cursor:pointer;font-size:19px}
.field{margin-bottom:14px}
label{display:block;color:#bcb1c6;font-size:13px;margin-bottom:7px}
input{width:100%;height:46px;padding:0 14px;color:#fff;outline:none;border-radius:13px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.045)}
input:focus{border-color:rgba(197,84,255,.45);box-shadow:0 0 0 4px rgba(190,76,255,.065)}
.modal-card .btn{width:100%;height:48px;margin-top:4px}
.form-note{margin-top:12px;color:#766a80;font-size:11px;line-height:1.55}

@media(max-width:980px){
  .navlinks{display:none}
  .hero{grid-template-columns:1fr;min-height:auto;padding-top:65px}
  .hero-visual{min-height:510px}
  .features{grid-template-columns:repeat(2,1fr)}
  .tech-layout,.price-grid{grid-template-columns:1fr}
  .server-info{right:18px;top:70px}
}
@media(max-width:1180px){
  .navlinks{display:none}
}
@media(max-width:720px){
  .container{width:min(var(--max),calc(100% - 24px))}
  .nav{min-height:68px}
  .brand-tag{display:none}
  .nav-actions .btn-ghost{display:none}
  .brand-logo{width:42px;height:42px}
  .hero{padding:50px 0 42px;gap:30px}
  h1{font-size:48px}
  .hero-copy>p{font-size:16px}
  .hero-visual{min-height:420px}
  .logo-core{width:290px;height:290px}
  .orbit.a{width:360px;height:360px}
  .orbit.b{width:315px;height:315px}
  .fc1{left:0;top:45px}
  .fc2{right:0;bottom:45px}
  .float-card{min-width:155px;padding:11px 12px}
  .section{padding:59px 0}
  .features{grid-template-columns:1fr}
  .world-top{padding:21px 20px 5px;flex-direction:column}
  .map-wrap{margin:0 2px;min-height:250px}
  .server-info{position:relative;right:auto;top:auto;margin:0 18px 18px;width:auto}
  .world-stats{grid-template-columns:1fr 1fr}
  .world-stat:nth-child(2){border-right:0}
  .world-stat:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.05)}
  .world-stat strong{font-size:12px}
  .node-label{font-size:15px}
  .tech-card,.price-copy,.price-card{padding:23px;border-radius:22px}
  .price b{font-size:58px}
  .cta{flex-direction:column;align-items:flex-start;padding:24px}
  .cta .btn{width:100%}
}
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}
}

/* ===== RUSSIA-CENTRIC NETWORK MAP ===== */
.origin-badge{
  fill:rgba(231,136,255,.12);
  stroke:#e59aff;
  stroke-width:1.5;
  transform-box:fill-box;
  transform-origin:center;
  animation:originPulse 2.1s ease-in-out infinite;
}
@keyframes originPulse{
  0%,100%{transform:scale(.92);opacity:.62}
  50%{transform:scale(1.18);opacity:1}
}
.origin-core{
  fill:#efb1ff;
  stroke:#fff;
  stroke-width:2.2;
  filter:drop-shadow(0 0 10px #d968ff);
}
.origin-label{
  fill:#fff;
  font-size:14px;
  font-weight:900;
  paint-order:stroke;
  stroke:#09050e;
  stroke-width:5px;
  stroke-linejoin:round;
}
.direction-tag{
  fill:#a999b2;
  font-size:10px;
  font-weight:800;
  letter-spacing:.08em;
  paint-order:stroke;
  stroke:#09050e;
  stroke-width:4px;
}
.route.return{
  opacity:.7;
  stroke-dasharray:4 11;
}
.aggregate-box{
  position:absolute;
  left:28px;
  top:76px;
  z-index:10;
  width:210px;
  padding:15px 16px;
  border-radius:18px;
  background:rgba(12,6,18,.84);
  backdrop-filter:blur(17px);
  border:1px solid rgba(196,92,255,.20);
  box-shadow:0 20px 60px rgba(0,0,0,.35);
}
.aggregate-box small{
  display:block;
  color:#7f7389;
  font-size:10px;
  letter-spacing:.1em;
  margin-bottom:6px;
}
.aggregate-box strong{
  display:block;
  font-size:23px;
  letter-spacing:-.02em;
}
.aggregate-box span{
  display:block;
  color:#93869d;
  font-size:11px;
  margin-top:5px;
}
.route-scenarios{
  margin-top:18px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}
.route-card{
  position:relative;
  overflow:hidden;
  min-height:180px;
  padding:20px;
  border-radius:22px;
  border:1px solid rgba(190,80,255,.14);
  background:
    radial-gradient(circle at 80% 0%,rgba(177,62,255,.09),transparent 34%),
    linear-gradient(180deg,rgba(35,14,49,.46),rgba(14,7,21,.68));
}
.route-card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:22px;
}
.route-card-head strong{
  font-size:14px;
}
.route-card-head span{
  font-size:9px;
  color:#85798f;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.route-chain{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}
.chain-node{
  flex:0 0 auto;
  min-width:72px;
  max-width:110px;
  padding:11px 10px;
  text-align:center;
  border-radius:13px;
  border:1px solid rgba(255,255,255,.075);
  background:rgba(255,255,255,.035);
}
.chain-node b{
  display:block;
  font-size:11px;
  white-space:nowrap;
}
.chain-node small{
  display:block;
  margin-top:4px;
  color:#81758a;
  font-size:8px;
  white-space:nowrap;
}
.chain-node.device{border-color:rgba(121,220,255,.16)}
.chain-node.country{border-color:rgba(201,92,255,.19);background:rgba(182,70,255,.055)}
.chain-node.russia{border-color:rgba(231,145,255,.25);background:rgba(217,103,255,.08)}
.chain-node.cloudflare{border-color:rgba(255,173,75,.18);background:rgba(255,146,44,.05)}
.chain-node.site{border-color:rgba(121,255,183,.15)}
.chain-link{
  position:relative;
  flex:1 1 34px;
  min-width:24px;
  height:2px;
  background:linear-gradient(90deg,rgba(185,78,255,.18),rgba(221,137,255,.56),rgba(185,78,255,.18));
  box-shadow:0 0 8px rgba(187,74,255,.13);
}
.chain-link:after{
  content:"›";
  position:absolute;
  right:-2px;
  top:50%;
  transform:translateY(-55%);
  color:#c477f5;
  font-size:15px;
}
.chain-packet{
  position:absolute;
  top:50%;
  left:0;
  width:6px;
  height:6px;
  border-radius:50%;
  background:#e3a0ff;
  box-shadow:0 0 10px #c85dff;
  transform:translateY(-50%);
  animation:chainForward 2.2s linear infinite;
}
.chain-packet.back{
  background:#82e0ff;
  box-shadow:0 0 10px #78d9ff;
  animation:chainBack 2.8s linear infinite -.9s;
}
@keyframes chainForward{
  0%{left:0;opacity:0}
  12%{opacity:1}
  88%{opacity:1}
  100%{left:100%;opacity:0}
}
@keyframes chainBack{
  0%{left:100%;opacity:0}
  12%{opacity:1}
  88%{opacity:1}
  100%{left:0;opacity:0}
}
.route-note{
  margin-top:18px;
  color:#8d8296;
  font-size:11px;
  line-height:1.55;
}
.route-legend{
  margin-top:16px;
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  color:#8a7f93;
  font-size:11px;
}
.route-legend span{
  display:flex;
  align-items:center;
  gap:7px;
}
.route-legend i{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#e3a0ff;
  box-shadow:0 0 8px #c85dff;
}
.route-legend i.back{
  background:#82e0ff;
  box-shadow:0 0 8px #78d9ff;
}
@media(max-width:980px){
  .route-scenarios{grid-template-columns:1fr}
}
@media(max-width:720px){
  .aggregate-box{
    position:relative;
    left:auto;
    top:auto;
    margin:0 18px 12px;
    width:auto;
  }
  .route-card{
    overflow-x:auto;
  }
  .route-chain{
    min-width:520px;
  }
}


/* ===== FINAL TYPOGRAPHY + MAP POLISH ===== */
body{
  font-weight:400;
  letter-spacing:-.008em;
}
h1,h2,h3,.brand-name,.price b{
  font-family:"Segoe UI Variable Display","Segoe UI Variable","Segoe UI",Inter,system-ui,sans-serif;
}
h1{font-weight:760}
h2{font-weight:740}
h3{font-weight:700}
.brand-name{font-weight:820}
.navlinks,.btn,.eyebrow,.kicker{font-weight:650}
.feature h3,.tech-card h3,.world-top h3,.route-card-head strong{font-weight:700}
.hero-copy>p,.section-head p,.feature p,.world-top p,.route-note{
  letter-spacing:0;
}
.node-label{
  font-size:11.5px;
  font-weight:700;
  stroke-width:3.2px;
  letter-spacing:0;
}
.origin-label{
  font-size:12px;
  font-weight:800;
  stroke-width:3.5px;
}
.direction-tag{
  font-size:8.5px;
  font-weight:700;
  stroke-width:3px;
}
.map-wrap{
  min-height:500px;
}
.real-map{
  opacity:.64;
  filter:invert(1) sepia(1) saturate(5.2) hue-rotate(236deg) brightness(1.22) contrast(1.08);
}
.world-shell{
  background:
    radial-gradient(circle at 52% 40%,rgba(126,36,192,.12),transparent 42%),
    linear-gradient(180deg,rgba(21,9,31,.86),rgba(7,3,11,.96));
}
.aggregate-box,.server-info{
  background:rgba(10,5,15,.88);
}
.server-info{
  width:236px;
}
.aggregate-box{
  width:190px;
}
.route-scenarios{
  gap:16px;
}
.route-card{
  min-height:205px;
  padding:18px;
}
.route-chain{
  gap:7px;
}
.chain-node{
  min-width:66px;
  max-width:100px;
  padding:10px 8px;
}
.chain-node b{
  font-size:10.5px;
  font-weight:700;
}
.chain-node small{
  font-size:7.5px;
}
.chain-link{
  min-width:18px;
}
.route-card-head{
  margin-bottom:18px;
}
.route-card-head strong{
  font-size:13px;
}
.route-card-head span{
  font-size:8px;
}
.route-note{
  font-size:10.5px;
}
@media(max-width:1180px){
  .route-scenarios{grid-template-columns:1fr}
  .route-card{min-height:160px}
  .route-chain{min-width:0}
}
@media(max-width:720px){
  .node-label{font-size:10px;stroke-width:2.8px}
  .origin-label{font-size:10.5px}
  .direction-tag{font-size:7.5px}
  .map-wrap{min-height:290px}
  .route-chain{min-width:600px}
}


/* ===== CLEAN MAP + VERTICAL ROUTE CHAINS ===== */
.route-layer .node-label,
.route-layer .origin-label,
.route-layer .direction-tag{
  display:none !important;
}
.route-layer .node{
  cursor:default;
}
.route-scenarios{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:16px !important;
}
.route-card{
  min-height:0 !important;
  padding:20px 22px !important;
}
.route-card-head{
  margin-bottom:16px !important;
}
.route-chain{
  display:grid !important;
  grid-template-columns:auto minmax(86px,1fr) auto minmax(86px,1fr) auto minmax(86px,1fr) auto minmax(86px,1fr) auto;
  align-items:center;
  gap:8px !important;
  min-width:0 !important;
  width:100%;
}
.route-chain.chain-3{
  grid-template-columns:auto minmax(100px,1fr) auto minmax(100px,1fr) auto;
}
.route-chain.chain-4{
  grid-template-columns:auto minmax(92px,1fr) auto minmax(92px,1fr) auto minmax(92px,1fr) auto;
}
.route-chain.chain-5{
  grid-template-columns:auto minmax(72px,1fr) auto minmax(72px,1fr) auto minmax(72px,1fr) auto minmax(72px,1fr) auto;
}
.chain-link{
  position:relative;
  min-width:0 !important;
  height:34px !important;
  background:none !important;
  box-shadow:none !important;
  display:flex;
  align-items:center;
  justify-content:center;
}
.chain-link:before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:50%;
  height:2px;
  transform:translateY(-50%);
  background:linear-gradient(90deg,rgba(185,78,255,.16),rgba(221,137,255,.56),rgba(185,78,255,.16));
  box-shadow:0 0 8px rgba(187,74,255,.12);
}
.chain-link:after{
  content:"›";
  position:absolute;
  right:-1px;
  top:50%;
  transform:translateY(-56%);
  color:#c477f5;
  font-size:15px;
}
.traffic-value{
  position:relative;
  z-index:4;
  min-width:74px;
  padding:5px 8px;
  border-radius:999px;
  background:#100718;
  border:1px solid rgba(197,90,255,.18);
  color:#dfb0ff;
  font-size:9px;
  font-weight:700;
  text-align:center;
  letter-spacing:.01em;
  box-shadow:0 0 14px rgba(178,62,255,.08);
  white-space:nowrap;
}
.traffic-value.return{
  color:#9be7ff;
  border-color:rgba(121,220,255,.17);
}
.chain-packet{
  top:50% !important;
}
.route-note{
  margin-top:14px !important;
}
.route-card-head span{
  opacity:.65;
}
.server-info{
  display:none !important;
}
.aggregate-box{
  right:28px;
  left:auto !important;
  width:200px !important;
}
.world-top p{
  max-width:760px;
}
@media(max-width:900px){
  .route-chain,
  .route-chain.chain-3,
  .route-chain.chain-4,
  .route-chain.chain-5{
    display:flex !important;
    min-width:760px !important;
  }
  .route-card{
    overflow-x:auto !important;
  }
  .chain-link{
    flex:1 1 100px !important;
    min-width:90px !important;
  }
}


/* ===== PURE MAP MODE ===== */
#network-map{
  padding-top:58px;
  padding-bottom:34px;
}
#network-map .world-shell{
  border-radius:30px;
  overflow:hidden;
}
#network-map .map-wrap{
  margin:0;
  min-height:540px;
  aspect-ratio:1280/649;
}
#network-map .real-map{
  opacity:.68;
}
#network-map .world-shell:before{
  opacity:.55;
}
#network-map .aggregate-box,
#network-map .world-top,
#network-map .world-stats,
#network-map .route-legend,
#network-map .server-info{
  display:none !important;
}
@media(max-width:720px){
  #network-map{
    padding-top:42px;
    padding-bottom:24px;
  }
  #network-map .map-wrap{
    min-height:300px;
  }
}


/* ===== RESTORE COMPACT FRAMED MAP ===== */
#network-map{
  padding-top:56px !important;
  padding-bottom:44px !important;
}
#network-map .world-shell{
  max-width:1120px;
  margin:0 auto;
  padding:16px;
  border-radius:30px !important;
  border:1px solid rgba(191,78,255,.24) !important;
  background:
    radial-gradient(circle at 50% 42%,rgba(123,37,188,.12),transparent 44%),
    linear-gradient(180deg,rgba(24,10,35,.88),rgba(9,4,14,.96)) !important;
  box-shadow:
    0 24px 70px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.04),
    0 0 0 1px rgba(136,42,205,.035);
  overflow:hidden;
}
#network-map .world-shell:after{
  content:"";
  position:absolute;
  inset:7px;
  border-radius:23px;
  border:1px solid rgba(214,126,255,.055);
  pointer-events:none;
}
#network-map .map-wrap{
  margin:0 !important;
  min-height:0 !important;
  width:100%;
  aspect-ratio:1280/649 !important;
  border-radius:20px;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 45%,rgba(120,34,185,.08),transparent 50%),
    rgba(5,2,9,.46);
}
#network-map .real-map{
  opacity:.68 !important;
}
#network-map .map-fade{
  border-radius:20px;
}
@media(max-width:720px){
  #network-map{
    padding-top:40px !important;
    padding-bottom:30px !important;
  }
  #network-map .world-shell{
    padding:10px;
    border-radius:22px !important;
  }
  #network-map .world-shell:after{
    inset:5px;
    border-radius:17px;
  }
  #network-map .map-wrap{
    border-radius:15px;
  }
}


/* ===== FINAL CLEAN MAP FIX ===== */
#network-map .world-stat,
#network-map .world-stats,
#network-map .aggregate-box,
#network-map .server-info,
#network-map .world-top,
#network-map .route-legend{
  display:none !important;
}
#network-map .world-shell{
  max-width:1100px !important;
  margin:0 auto !important;
  padding:14px !important;
  border-radius:28px !important;
}
#network-map .map-wrap{
  width:100% !important;
  aspect-ratio:1280/649 !important;
  min-height:0 !important;
  margin:0 !important;
  border-radius:18px !important;
}
#network-map{
  padding-top:46px !important;
  padding-bottom:40px !important;
}

/* ===== ROUTES: COMPACT ROWS, NOT FULL-WIDTH SPAGHETTI ===== */
.route-scenarios{
  width:min(1100px,calc(100% - 42px)) !important;
  margin:18px auto 0 !important;
  gap:14px !important;
}
.route-card{
  padding:18px 20px !important;
  border-radius:20px !important;
}
.route-chain,
.route-chain.chain-3,
.route-chain.chain-4,
.route-chain.chain-5{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  min-width:0 !important;
  width:100% !important;
}
.chain-node{
  flex:0 0 auto !important;
  min-width:92px !important;
  max-width:none !important;
  padding:10px 12px !important;
}
.chain-link{
  flex:1 1 120px !important;
  min-width:80px !important;
  max-width:220px !important;
  height:32px !important;
}
.traffic-value{
  min-width:72px !important;
  padding:4px 8px !important;
  font-size:9px !important;
}
.route-note{
  margin-top:12px !important;
  font-size:10px !important;
  color:#807587 !important;
}
@media(max-width:900px){
  .route-scenarios{
    width:min(100% - 24px,1100px) !important;
  }
  .route-card{
    overflow-x:auto !important;
  }
  .route-chain,
  .route-chain.chain-3,
  .route-chain.chain-4,
  .route-chain.chain-5{
    min-width:720px !important;
  }
}


/* ===== LIVE FAKE TRAFFIC TELEMETRY ===== */
.traffic-value{
  transition:
    color .22s ease,
    border-color .22s ease,
    background .22s ease,
    transform .22s ease,
    box-shadow .22s ease;
}
.traffic-value.tick{
  color:#ffffff !important;
  border-color:rgba(220,139,255,.42) !important;
  background:rgba(155,50,217,.16) !important;
  box-shadow:0 0 18px rgba(190,72,255,.22) !important;
  transform:scale(1.06);
}


/* ===== FIX ONLY: FIRST ROUTE FULL WIDTH ===== */
.route-scenarios > .route-card:first-child .route-chain{
  width:100% !important;
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
}

.route-scenarios > .route-card:first-child .chain-node{
  flex:0 0 auto !important;
}

.route-scenarios > .route-card:first-child .chain-link{
  flex:1 1 0 !important;
  min-width:120px !important;
  max-width:none !important;
}

@media(max-width:900px){
  .route-scenarios > .route-card:first-child .route-chain{
    min-width:720px !important;
  }
}


/* ===== CLIENTS ===== */
.clients-shell{
  border:1px solid rgba(190,80,255,.16);
  border-radius:28px;
  background:
    radial-gradient(circle at 85% 0%,rgba(181,66,255,.10),transparent 32%),
    linear-gradient(180deg,rgba(35,14,49,.42),rgba(13,6,20,.72));
  padding:24px;
  overflow:hidden;
}

.clients-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-bottom:20px;
}

.clients-title h2{
  margin:0;
  font-size:clamp(30px,4vw,46px);
}

.clients-platforms{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.platform-btn{
  min-height:42px;
  padding:0 15px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.075);
  background:rgba(255,255,255,.035);
  color:#a99daf;
  cursor:pointer;
  font-weight:700;
  font-size:13px;
  transition:.2s ease;
}

.platform-btn:hover{
  color:#fff;
  border-color:rgba(194,84,255,.20);
  background:rgba(181,67,255,.075);
}

.platform-btn.active{
  color:#fff;
  border-color:rgba(204,98,255,.34);
  background:linear-gradient(135deg,rgba(119,38,232,.82),rgba(186,61,255,.82));
  box-shadow:0 10px 25px rgba(143,45,230,.18);
}

.clients-panel{
  display:none;
}

.clients-panel.active{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}

.client-card{
  min-width:0;
  display:flex;
  align-items:center;
  gap:13px;
  padding:15px;
  min-height:76px;
  border-radius:17px;
  border:1px solid rgba(255,255,255,.065);
  background:rgba(255,255,255,.028);
  transition:.22s ease;
}

.client-card:hover{
  transform:translateY(-2px);
  border-color:rgba(198,91,255,.22);
  background:rgba(181,67,255,.055);
}

.client-icon{
  flex:0 0 42px;
  width:42px;
  height:42px;
  border-radius:13px;
  display:grid;
  place-items:center;
  font-size:11px;
  font-weight:900;
  letter-spacing:-.02em;
  color:#f5eaff;
  border:1px solid rgba(207,111,255,.18);
  background:
    radial-gradient(circle at 30% 20%,rgba(231,151,255,.18),transparent 45%),
    linear-gradient(145deg,rgba(125,40,208,.42),rgba(41,17,58,.72));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}

.client-main{
  min-width:0;
  flex:1;
}

.client-name{
  display:flex;
  align-items:center;
  gap:7px;
  min-width:0;
  font-size:14px;
  font-weight:720;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.recommend{
  flex:0 0 auto;
  padding:3px 6px;
  border-radius:999px;
  color:#e7c3ff;
  border:1px solid rgba(201,99,255,.17);
  background:rgba(190,72,255,.07);
  font-size:8px;
  font-weight:800;
  letter-spacing:.05em;
  text-transform:uppercase;
}

.client-tags{
  margin-top:6px;
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}

.client-tag{
  padding:3px 6px;
  border-radius:7px;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.05);
  color:#887d91;
  font-size:8px;
  font-weight:700;
}

.client-tag.vless{
  color:#d99bff;
  border-color:rgba(198,86,255,.12);
  background:rgba(184,65,255,.045);
}

@media(max-width:900px){
  .clients-top{
    align-items:flex-start;
    flex-direction:column;
  }

  .clients-panel.active{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:560px){
  .clients-shell{
    padding:18px;
    border-radius:22px;
  }

  .clients-platforms{
    width:100%;
  }

  .platform-btn{
    flex:1 1 calc(50% - 8px);
  }

  .clients-panel.active{
    grid-template-columns:1fr;
  }
}


/* ===== REAL CLIENT ICONS ===== */
.client-icon{
  position:relative;
  overflow:hidden;
  padding:0 !important;
  background:rgba(255,255,255,.035) !important;
  border:1px solid rgba(255,255,255,.08) !important;
}

.client-icon img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  border-radius:12px;
}

.client-icon.icon-error::after{
  content:attr(data-fallback);
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  color:#f3e8ff;
  font-size:11px;
  font-weight:900;
  background:
    radial-gradient(circle at 30% 20%,rgba(231,151,255,.18),transparent 45%),
    linear-gradient(145deg,rgba(125,40,208,.42),rgba(41,17,58,.72));
}

.client-icon.icon-error img{
  display:none;
}

/* больше не используется */
.recommend{
  display:none !important;
}

/* Source block 2 */
/* ===== CLIENTS FINAL REDESIGN ===== */

#clients{
  padding-top:62px;
  padding-bottom:62px;
}

#clients .clients-shell{
  width:100%;
  border:1px solid rgba(190,80,255,.18);
  border-radius:28px;
  padding:28px;
  background:
    radial-gradient(circle at 88% 4%, rgba(166,60,255,.10), transparent 30%),
    linear-gradient(180deg, rgba(31,13,44,.52), rgba(11,5,17,.82));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 24px 70px rgba(0,0,0,.20);
}

#clients .clients-header{
  margin-bottom:18px;
}

#clients .clients-header .kicker{
  margin-bottom:8px;
}

#clients .clients-header h2{
  margin:0;
  max-width:none;
  font-size:clamp(30px,3.4vw,44px);
  line-height:1.05;
  letter-spacing:-.04em;
  font-weight:740;
}

/* Переключатели платформ — отдельной ровной полосой */
#clients .clients-platforms{
  width:100%;
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  padding:10px;
  margin:0 0 20px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.055);
  background:rgba(255,255,255,.022);
}

#clients .platform-btn{
  min-width:0;
  height:42px;
  min-height:42px;
  padding:0 16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border-radius:11px;
  border:1px solid transparent;
  background:transparent;
  color:#8f8498;
  font-size:12px;
  line-height:1;
  font-weight:700;
  cursor:pointer;
  transition:
    color .18s ease,
    background .18s ease,
    border-color .18s ease,
    transform .18s ease,
    box-shadow .18s ease;
}

#clients .platform-btn:hover{
  color:#f7f0fb;
  background:rgba(255,255,255,.035);
}

#clients .platform-btn.active{
  color:#fff;
  border-color:rgba(214,116,255,.34);
  background:linear-gradient(135deg,#7427dc,#b53cff);
  box-shadow:0 8px 24px rgba(151,43,230,.22);
}

#clients .platform-icon{
  width:17px;
  height:17px;
  flex:0 0 17px;
  display:block;
}

/* Панели клиентов */
#clients .clients-panel{
  display:none;
  gap:12px;
}

#clients .clients-panel.active{
  display:grid;
}

/* Android/iOS: красиво 3 × 3 */
#clients .clients-panel.count-9.active{
  grid-template-columns:repeat(3,minmax(0,1fr));
}

/* Windows: 5 в ряд на широком экране */
#clients .clients-panel.count-5.active{
  grid-template-columns:repeat(5,minmax(0,1fr));
}

/* macOS/Linux: ровно 4 в ряд */
#clients .clients-panel.count-4.active{
  grid-template-columns:repeat(4,minmax(0,1fr));
}

/* fallback для другого количества */
#clients .clients-panel.active:not(.count-9):not(.count-5):not(.count-4){
  grid-template-columns:repeat(3,minmax(0,1fr));
}

#clients .client-card{
  min-width:0;
  min-height:88px;
  padding:14px 16px;
  display:flex;
  align-items:center;
  gap:14px;
  border-radius:17px;
  border:1px solid rgba(255,255,255,.065);
  background:
    linear-gradient(180deg,rgba(255,255,255,.034),rgba(255,255,255,.018));
  transition:
    transform .18s ease,
    border-color .18s ease,
    background .18s ease,
    box-shadow .18s ease;
}

#clients .client-card:hover{
  transform:translateY(-2px);
  border-color:rgba(197,89,255,.22);
  background:rgba(177,63,255,.045);
  box-shadow:0 10px 26px rgba(0,0,0,.16);
}

#clients .client-icon{
  flex:0 0 54px;
  width:54px;
  height:54px;
  padding:5px;
  display:grid;
  place-items:center;
  border-radius:15px;
  overflow:hidden;
  background:#0a0610;
  border:1px solid rgba(255,255,255,.075);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.03),
    0 7px 18px rgba(0,0,0,.20);
}

#clients .client-icon img{
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
  border-radius:10px;
  background:transparent;
}

#clients .client-icon.icon-error::after{
  content:attr(data-fallback);
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
  border-radius:10px;
  color:#ead2ff;
  font-size:11px;
  font-weight:850;
  background:linear-gradient(145deg,#37184c,#160a1f);
}

#clients .client-icon.icon-error img{
  display:none;
}

#clients .client-main{
  min-width:0;
  flex:1;
}

#clients .client-name{
  display:block;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#f8f3fb;
  font-size:17px;
  line-height:1.15;
  font-weight:740;
  letter-spacing:-.015em;
}

#clients .client-tags,
#clients .recommend{
  display:none !important;
}

/* На 1100px Windows уже лучше 3+2 */
@media(max-width:1100px){
  #clients .clients-panel.count-5.active{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  #clients .clients-panel.count-4.active{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:820px){
  #clients .clients-panel.count-9.active,
  #clients .clients-panel.count-5.active,
  #clients .clients-panel.count-4.active,
  #clients .clients-panel.active:not(.count-9):not(.count-5):not(.count-4){
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:560px){
  #clients{
    padding-top:48px;
    padding-bottom:48px;
  }

  #clients .clients-shell{
    padding:18px;
    border-radius:22px;
  }

  #clients .clients-header h2{
    font-size:30px;
  }

  #clients .clients-platforms{
    padding:8px;
  }

  #clients .platform-btn{
    flex:1 1 calc(50% - 8px);
    padding:0 11px;
  }

  #clients .clients-panel.count-9.active,
  #clients .clients-panel.count-5.active,
  #clients .clients-panel.count-4.active,
  #clients .clients-panel.active:not(.count-9):not(.count-5):not(.count-4){
    grid-template-columns:1fr;
  }

  #clients .client-card{
    min-height:80px;
  }
}

/* Source block 3 */
/* ===== FEATURE ICONS FINAL ===== */
#advantages .ficon{
  width:52px !important;
  height:52px !important;
  border-radius:15px !important;
  padding:12px !important;
  color:#e4b4ff !important;
  background:
    radial-gradient(circle at 30% 20%,rgba(223,139,255,.18),transparent 46%),
    linear-gradient(145deg,rgba(125,42,207,.26),rgba(42,17,60,.62)) !important;
  border:1px solid rgba(205,105,255,.24) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 8px 22px rgba(102,32,160,.15) !important;
}

#advantages .ficon svg{
  width:100%;
  height:100%;
  display:block;
  overflow:visible;
  filter:drop-shadow(0 0 5px rgba(205,105,255,.18));
}

#advantages .feature:hover .ficon{
  color:#f2d9ff !important;
  border-color:rgba(220,135,255,.36) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 10px 26px rgba(133,41,202,.22) !important;
}

/* Source block 4 */
/* ===== CLIENT PLATFORM FULL WIDTH ===== */
#clients .clients-platforms{
  width:100% !important;
  display:grid !important;
  grid-template-columns:repeat(5,minmax(0,1fr)) !important;
  gap:8px !important;
}

#clients .platform-btn{
  width:100% !important;
  min-width:0 !important;
  justify-content:center !important;
}

@media(max-width:720px){
  #clients .clients-platforms{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }

  #clients .platform-btn:last-child{
    grid-column:1 / -1;
  }
}

/* Source block 5 */
/* ===== ROUTE NODE ICONS ===== */
.route-scenarios .chain-node{
  padding:12px 14px !important;
  min-width:120px !important;
}

.route-scenarios .chain-node.iconized{
  display:flex !important;
  align-items:center !important;
}

.route-node-wrap{
  display:flex;
  align-items:center;
  gap:11px;
  min-width:0;
  width:100%;
}

.route-node-visual{
  flex:0 0 36px;
  width:36px;
  height:36px;
  border-radius:11px;
  display:grid;
  place-items:center;
  color:#f0c8ff;
  background:
    radial-gradient(circle at 30% 20%,rgba(226,148,255,.16),transparent 46%),
    linear-gradient(145deg,rgba(122,41,201,.24),rgba(31,15,45,.78));
  border:1px solid rgba(204,108,255,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}

.route-node-visual svg{
  width:18px;
  height:18px;
  display:block;
}

.route-node-visual.cloudflare{
  color:#ffb066;
  border-color:rgba(255,154,72,.22);
  background:
    radial-gradient(circle at 30% 20%,rgba(255,183,103,.16),transparent 46%),
    linear-gradient(145deg,rgba(110,51,24,.24),rgba(32,18,22,.78));
}

.route-node-visual.site{
  color:#aee8ff;
  border-color:rgba(121,220,255,.18);
  background:
    radial-gradient(circle at 30% 20%,rgba(121,220,255,.12),transparent 46%),
    linear-gradient(145deg,rgba(28,67,103,.22),rgba(18,18,38,.78));
}

.route-node-visual.device{
  color:#dcb2ff;
}

.route-node-visual.russia{
  color:#fff;
}

.route-node-copy{
  min-width:0;
  flex:1;
}

.route-node-copy b{
  display:block;
  white-space:nowrap;
}

.route-node-copy small{
  display:block;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.flag-badge{
  font-size:18px;
  line-height:1;
}

.flag-stack{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0;
  font-size:14px;
  line-height:1;
}

.flag-stack span{
  display:block;
  margin-left:-3px;
  filter:drop-shadow(0 0 3px rgba(255,255,255,.08));
}
.flag-stack span:first-child{
  margin-left:0;
}

@media(max-width:900px){
  .route-scenarios .chain-node{
    min-width:132px !important;
  }
}

/* Source block 6 */
/* ===== ICON-ONLY ROUTE NODES ===== */
.route-scenarios .route-icon-node{
  flex:0 0 64px !important;
  width:64px !important;
  min-width:64px !important;
  max-width:64px !important;
  height:64px !important;
  padding:0 !important;
  display:grid !important;
  place-items:center !important;
  border-radius:17px !important;
  background:
    radial-gradient(circle at 30% 20%,rgba(226,148,255,.12),transparent 45%),
    linear-gradient(145deg,rgba(84,28,132,.24),rgba(19,9,29,.82)) !important;
  border:1px solid rgba(205,105,255,.18) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 8px 22px rgba(0,0,0,.16) !important;
}

.route-scenarios .route-big-icon{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  color:#e7b9ff;
}

.route-scenarios .route-big-icon svg{
  width:100%;
  height:100%;
  display:block;
}

.route-scenarios .route-icon-node.flag-nl .route-big-icon,
.route-scenarios .route-icon-node.flag-fi .route-big-icon,
.route-scenarios .route-icon-node.flag-ru .route-big-icon,
.route-scenarios .route-icon-node.flag-de .route-big-icon{
  width:42px;
  height:28px;
  overflow:hidden;
  border-radius:5px;
  box-shadow:0 0 0 1px rgba(255,255,255,.08),0 6px 15px rgba(0,0,0,.18);
}

.route-scenarios .route-icon-node.cloudflare{
  border-color:rgba(255,151,60,.22) !important;
  background:
    radial-gradient(circle at 30% 20%,rgba(255,174,91,.11),transparent 45%),
    linear-gradient(145deg,rgba(108,48,19,.22),rgba(27,12,20,.84)) !important;
}

.route-scenarios .route-icon-node.cloudflare .route-big-icon{
  width:42px;
  height:30px;
}

.route-scenarios .route-icon-node.site{
  border-color:rgba(121,220,255,.18) !important;
}

.route-scenarios .route-icon-node.site .route-big-icon{
  color:#92ddff;
}

.route-scenarios .route-card{
  padding-bottom:18px !important;
}

.route-scenarios .route-note{
  display:none !important;
}

@media(max-width:900px){
  .route-scenarios .route-icon-node{
    flex-basis:64px !important;
    min-width:64px !important;
  }
}

/* Source block 7 */
/* ===== VERIFIED CLIENT DOWNLOAD LINKS ===== */
#clients .client-link{
  color:inherit !important;
  text-decoration:none !important;
  cursor:pointer !important;
  position:relative;
}

#clients .client-external{
  flex:0 0 18px;
  width:18px;
  height:18px;
  display:grid;
  place-items:center;
  color:#776b82;
  opacity:.55;
  transition:.18s ease;
}

#clients .client-external svg{
  width:15px;
  height:15px;
  display:block;
}

#clients .client-link:hover .client-external{
  color:#d99cff;
  opacity:1;
  transform:translate(1px,-1px);
}

/* 7 элементов: 4 + 3, без огромной пустоты */
#clients .clients-panel.count-7.active{
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
}

/* 9 элементов: 3 x 3 */
#clients .clients-panel.count-9.active{
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
}

@media(max-width:1100px){
  #clients .clients-panel.count-7.active,
  #clients .clients-panel.count-9.active{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }
}

@media(max-width:820px){
  #clients .clients-panel.count-7.active,
  #clients .clients-panel.count-9.active{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

@media(max-width:560px){
  #clients .clients-panel.count-7.active,
  #clients .clients-panel.count-9.active{
    grid-template-columns:1fr !important;
  }
}

/* Source block 8 */
/* ===== EXPANDED VERIFIED CLIENT CATALOG ===== */
#clients .clients-panel.active{
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:10px !important;
}

#clients .client-card{
  min-height:78px !important;
  padding:12px 13px !important;
}

#clients .client-icon{
  width:48px !important;
  height:48px !important;
  flex-basis:48px !important;
}

#clients .client-name{
  font-size:15px !important;
}

#clients .client-external{
  flex:0 0 17px;
  width:17px;
  height:17px;
  display:grid;
  place-items:center;
  color:#776b82;
  opacity:.55;
  transition:.18s ease;
}

#clients .client-external svg{
  width:14px;
  height:14px;
  display:block;
}

#clients .client-link:hover .client-external{
  color:#d99cff;
  opacity:1;
  transform:translate(1px,-1px);
}

@media(max-width:1100px){
  #clients .clients-panel.active{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }
}

@media(max-width:820px){
  #clients .clients-panel.active{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

@media(max-width:560px){
  #clients .clients-panel.active{
    grid-template-columns:1fr !important;
  }
}

/* Source block 9 */
/* ===== QUANTUMULT X ICON NORMALIZATION ===== */
#clients .client-card .client-icon img[alt="Quantumult X"]{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  border-radius:10px !important;
}
.kicker-tight{margin:0 0 5px}
.console-title{margin:0}
.bars [data-height="38"]{height:38%}
.bars [data-height="45"]{height:45%}
.bars [data-height="47"]{height:47%}
.bars [data-height="51"]{height:51%}
.bars [data-height="55"]{height:55%}
.bars [data-height="57"]{height:57%}
.bars [data-height="63"]{height:63%}
.bars [data-height="68"]{height:68%}
.bars [data-height="70"]{height:70%}
.bars [data-height="72"]{height:72%}
.bars [data-height="78"]{height:78%}
.bars [data-height="80"]{height:80%}
.bars [data-height="88"]{height:88%}
.bars [data-height="89"]{height:89%}
.bars [data-height="96"]{height:96%}

/* Source block 10 */
/* ===== HAPP DECODER ===== */
.decoder-section{
  position:relative;
  overflow:hidden;
}
.decoder-section:before{
  content:"";
  position:absolute;
  width:620px;
  height:620px;
  left:-330px;
  top:48px;
  border-radius:50%;
  background:rgba(171,57,255,.09);
  filter:blur(90px);
  pointer-events:none;
}
.decoder-layout{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,.82fr) minmax(480px,1.18fr);
  gap:34px;
  align-items:center;
}
.decoder-copy h2{max-width:560px}
.decoder-copy>p{
  max-width:590px;
  margin:0;
  color:var(--muted);
  font-size:16px;
  line-height:1.72;
}
.decoder-copy code{
  padding:2px 7px;
  border:1px solid rgba(197,84,255,.18);
  border-radius:7px;
  background:rgba(183,69,255,.07);
  color:#ebc8ff;
  font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace;
  font-size:.88em;
}
.decoder-privacy{
  display:flex;
  gap:13px;
  align-items:flex-start;
  margin-top:25px;
  padding:17px;
  border:1px solid rgba(121,255,183,.14);
  border-radius:17px;
  background:rgba(121,255,183,.035);
}
.decoder-privacy-icon{
  flex:0 0 42px;
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border:1px solid rgba(121,255,183,.18);
  border-radius:13px;
  background:rgba(121,255,183,.06);
  color:var(--green);
}
.decoder-privacy-icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7}
.decoder-privacy strong{display:block;margin-bottom:5px;font-size:14px}
.decoder-privacy p{margin:0;color:#95899f;font-size:12px;line-height:1.58}
.decoder-card{
  min-width:0;
  padding:28px;
  border:1px solid rgba(204,94,255,.24);
  border-radius:29px;
  background:
    radial-gradient(circle at 100% 0%,rgba(187,65,255,.15),transparent 36%),
    linear-gradient(145deg,rgba(49,18,70,.56),rgba(15,7,22,.83));
  box-shadow:0 30px 90px rgba(0,0,0,.38);
}
.decoder-card label{
  display:block;
  margin-bottom:9px;
  color:#d8cce0;
  font-size:13px;
  font-weight:800;
}
.decoder-card textarea{
  display:block;
  width:100%;
  min-height:148px;
  padding:14px 15px;
  resize:vertical;
  border:1px solid rgba(255,255,255,.09);
  border-radius:15px;
  outline:none;
  background:rgba(5,2,8,.72);
  color:#fff;
  font:14px/1.55 "SFMono-Regular",Consolas,"Liberation Mono",monospace;
  overflow-wrap:anywhere;
  transition:border-color .2s ease,box-shadow .2s ease,background .2s ease;
}
.decoder-card textarea::placeholder{color:#6f6478}
.decoder-card textarea:focus{
  border-color:rgba(197,84,255,.52);
  background:rgba(5,2,8,.9);
  box-shadow:0 0 0 4px rgba(190,76,255,.07),0 15px 45px rgba(0,0,0,.18);
}
.decoder-form-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-top:12px;
}
.decoder-form-foot>span{color:#776b82;font-size:11px;font-variant-numeric:tabular-nums}
.decoder-card .btn:disabled{cursor:wait;opacity:.66;transform:none;box-shadow:none}
.decoder-message{
  margin:13px 0 0;
  padding:11px 13px;
  border:1px solid rgba(255,114,150,.20);
  border-radius:12px;
  background:rgba(255,114,150,.055);
  color:#ffabc0;
  font-size:12px;
  line-height:1.5;
}
.decoder-message.success{
  border-color:rgba(121,255,183,.17);
  background:rgba(121,255,183,.045);
  color:#a4ffd0;
}
.decoder-result{
  margin-top:22px;
  padding-top:22px;
  border-top:1px solid rgba(255,255,255,.075);
}
.decoder-result[hidden],.decoder-message[hidden]{display:none}
.decoder-result textarea{
  min-height:96px;
  resize:none;
  border-color:rgba(121,255,183,.16);
  background:rgba(7,20,15,.48);
  color:#c9ffe3;
}
.decoder-result-actions{display:flex;align-items:center;gap:10px;margin-top:12px}
.decoder-copy-status{min-height:18px;margin:9px 0 0;color:#a4ffd0;font-size:11px}
@media(max-width:980px){
  .decoder-layout{grid-template-columns:1fr;gap:28px}
}
@media(max-width:720px){
  .decoder-card{padding:21px;border-radius:22px}
  .decoder-copy>p{font-size:15px}
  .decoder-form-foot{align-items:flex-end;flex-direction:column}
  .decoder-form-foot>span{align-self:flex-start}
  .decoder-form-foot .btn{width:100%}
  .decoder-result-actions{flex-direction:column}
  .decoder-result-actions .btn{width:100%}
}

/* Source block 11 */
/* ===== FINAL MOBILE LAYOUT ===== */
@media(min-width:721px) and (max-width:900px){
  .route-card{
    overflow:hidden!important;
    padding:18px!important;
  }
  .route-chain,
  .route-chain.chain-3,
  .route-chain.chain-4,
  .route-chain.chain-5,
  .route-scenarios>.route-card:first-child .route-chain{
    display:flex!important;
    width:100%!important;
    min-width:0!important;
    align-items:center!important;
    gap:8px!important;
  }
  .route-scenarios .route-icon-node{
    flex:0 0 54px!important;
    width:54px!important;
    min-width:54px!important;
    max-width:54px!important;
    height:54px!important;
  }
  .chain-link,
  .route-scenarios>.route-card:first-child .chain-link{
    flex:1 1 20px!important;
    width:auto!important;
    min-width:20px!important;
    max-width:none!important;
  }
  .traffic-value{
    min-width:62px!important;
    padding:4px 6px!important;
    font-size:8px!important;
  }
}

@media(max-width:720px){
  body{overflow-x:clip}
  .section[id]{scroll-margin-top:72px}
  .container{width:calc(100% - 24px)}

  .nav{
    min-height:64px;
    gap:8px;
  }
  .brand{
    min-width:0;
    flex:1 1 auto;
    gap:9px;
    overflow:hidden;
  }
  .brand-logo{
    flex:0 0 36px;
    width:36px;
    height:36px;
    border-radius:11px;
  }
  .brand-copy{min-width:0}
  .brand-name{
    display:block;
    overflow:hidden;
    font-size:clamp(15px,4.8vw,18px);
    letter-spacing:.09em;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .nav-actions{
    min-width:0;
    flex:0 0 auto;
    gap:0;
  }
  .nav-actions .btn-main{
    min-height:40px;
    padding:0 11px;
    border-radius:12px;
    font-size:12px;
    white-space:nowrap;
  }

  .hero{
    padding:39px 0 30px;
    gap:18px;
  }
  .eyebrow{
    max-width:100%;
    margin-bottom:18px;
    padding:8px 10px;
    font-size:10.5px;
    line-height:1.35;
    white-space:normal;
  }
  h1{
    max-width:100%;
    font-size:clamp(36px,11vw,46px);
    line-height:.98;
    letter-spacing:-.045em;
    overflow-wrap:anywhere;
  }
  h2{
    max-width:100%;
    font-size:clamp(30px,9vw,38px);
    line-height:1.06;
    overflow-wrap:anywhere;
  }
  .hero-copy>p{
    margin-top:20px;
    font-size:15px;
    line-height:1.62;
  }
  .hero-actions{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
    margin-top:24px;
  }
  .hero-actions .btn{
    width:100%;
    min-height:48px;
    padding:0 16px;
  }
  .hero-points{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px 12px;
    margin-top:23px;
    font-size:12px;
  }
  .hero-points span{min-width:0}
  .hero-visual{
    width:100%;
    max-width:100%;
    min-height:330px;
    overflow:hidden;
  }
  .hero-halo{
    width:340px;
    height:340px;
  }
  .logo-core{
    width:235px;
    height:235px;
  }
  .orbit.a{
    width:300px;
    height:300px;
  }
  .orbit.b{
    width:255px;
    height:255px;
  }
  .float-card{
    min-width:132px;
    padding:10px 11px;
    border-radius:14px;
  }
  .float-card small{
    margin-bottom:4px;
    font-size:9px;
  }
  .float-card strong{font-size:12px}
  .fc1{left:2px;top:26px}
  .fc2{right:2px;bottom:28px}

  .section{padding:48px 0}
  .section-head{margin-bottom:24px}
  .section-head p{line-height:1.62}
  .feature{
    min-height:0;
    padding:20px;
  }
  #advantages .ficon{
    width:46px!important;
    height:46px!important;
    margin-bottom:16px;
    padding:11px!important;
  }

  #network-map{
    padding-top:40px!important;
    padding-bottom:32px!important;
  }
  #network-map .world-shell{
    padding:8px!important;
    border-radius:20px!important;
  }
  #network-map .world-shell:after{
    inset:4px;
    border-radius:15px;
  }
  #network-map .map-wrap{
    min-height:0!important;
    aspect-ratio:16/10!important;
    border-radius:14px!important;
  }
  #network-map .map-fade{border-radius:14px}
  #network-map .real-map,
  #network-map .route-layer{
    transform:scale(1.14);
    transform-origin:58% 42%;
  }

  .route-scenarios{
    width:calc(100% - 24px)!important;
    gap:12px!important;
    margin-top:14px!important;
  }
  .route-card{
    --route-mobile-node:clamp(36px,11vw,44px);
    overflow:hidden!important;
    min-width:0!important;
    padding:14px!important;
    border-radius:18px!important;
  }
  .route-card-head{
    gap:8px;
    margin-bottom:13px!important;
  }
  .route-card-head strong{font-size:13px}
  .route-card-head span{font-size:7.5px}
  .route-chain,
  .route-chain.chain-3,
  .route-chain.chain-4,
  .route-chain.chain-5,
  .route-scenarios>.route-card:first-child .route-chain{
    display:flex!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    align-items:center!important;
    gap:clamp(2px,1vw,4px)!important;
  }
  .route-scenarios .route-icon-node{
    flex:0 0 var(--route-mobile-node)!important;
    width:var(--route-mobile-node)!important;
    min-width:var(--route-mobile-node)!important;
    max-width:var(--route-mobile-node)!important;
    height:var(--route-mobile-node)!important;
    border-radius:12px!important;
  }
  .route-scenarios .route-big-icon{
    width:25px!important;
    height:25px!important;
  }
  .route-scenarios .route-icon-node.flag-nl .route-big-icon,
  .route-scenarios .route-icon-node.flag-fi .route-big-icon,
  .route-scenarios .route-icon-node.flag-ru .route-big-icon,
  .route-scenarios .route-icon-node.flag-de .route-big-icon{
    width:28px!important;
    height:19px!important;
    border-radius:4px;
  }
  .route-scenarios .route-icon-node.cloudflare .route-big-icon{
    width:28px!important;
    height:20px!important;
  }
  .chain-link,
  .route-scenarios>.route-card:first-child .chain-link{
    flex:1 1 8px!important;
    width:auto!important;
    min-width:6px!important;
    max-width:none!important;
    height:26px!important;
  }
  .chain-link:after{display:none}
  .chain-packet{
    width:4px;
    height:4px;
  }
  .traffic-value{display:none!important}

  #clients{
    padding-top:46px;
    padding-bottom:46px;
  }
  #clients .clients-shell{
    padding:16px!important;
    border-radius:20px!important;
  }
  #clients .clients-header h2{
    font-size:clamp(28px,8.8vw,34px)!important;
    line-height:1.06;
  }
  #clients .clients-platforms{
    gap:7px!important;
    padding:7px;
    margin-bottom:16px;
  }
  #clients .platform-btn{
    min-height:46px!important;
    height:46px!important;
  }
  #clients .clients-panel.active{gap:9px!important}
  #clients .client-card{
    min-height:74px!important;
    padding:10px 12px!important;
  }
  #clients .client-icon{
    width:44px!important;
    height:44px!important;
    flex-basis:44px!important;
  }

  .tech-card,
  .price-copy,
  .price-card{
    padding:20px;
    border-radius:20px;
  }
  .chips{gap:7px;margin-top:18px}
  .chip{padding:8px 10px;font-size:12px}
  .bars{height:120px;margin-top:26px}
  .console-bottom{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:13px;
  }
  .console-bottom>:last-child{grid-column:1/-1}

  .decoder-layout{gap:22px}
  .decoder-privacy{
    gap:11px;
    margin-top:20px;
    padding:14px;
  }
  .decoder-privacy-icon{
    flex-basis:38px;
    width:38px;
    height:38px;
  }
  .decoder-card{
    padding:18px;
    border-radius:20px;
  }
  .decoder-card textarea{
    min-height:128px;
    padding:13px;
    font-size:16px!important;
  }

  .plan-line{gap:8px}
  .plan-pill{padding:6px 8px;font-size:9px}
  .price b{font-size:54px}
  .cta{padding:20px;border-radius:20px}

  .footer{
    display:grid;
    grid-template-columns:1fr;
    align-items:start;
    gap:16px;
  }
  .footer-links{
    width:100%;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:4px 16px;
  }
  .footer-links a{
    min-height:44px;
    display:flex;
    align-items:center;
  }
}

@media(max-width:360px){
  .nav{gap:6px}
  .brand{gap:7px}
  .brand-logo{
    flex-basis:34px;
    width:34px;
    height:34px;
  }
  .brand-name{font-size:15px}
  .nav-actions .btn-main{
    min-height:38px;
    padding:0 9px;
    font-size:11px;
  }
  .hero-points{grid-template-columns:1fr}
  .hero-visual{min-height:302px}
  .hero-halo{width:300px;height:300px}
  .logo-core{width:210px;height:210px}
  .orbit.a{width:270px;height:270px}
  .orbit.b{width:230px;height:230px}
  .float-card{min-width:122px;padding:9px 10px}
  .route-card{--route-mobile-node:clamp(34px,10vw,38px)}
  .route-card-head span{display:none}
  .footer-links{grid-template-columns:1fr 1fr}
}

@media(hover:none){
  .feature:hover,
  #clients .client-card:hover,
  .btn:hover{
    transform:none;
  }
}

/* Source block 12 */
/* ===== CLEAN TOUCH FOCUS + ROUND MOBILE BRAND GLOW ===== */
a,
button,
[role="button"]{
  -webkit-tap-highlight-color:transparent;
}

@supports selector(:focus-visible){
  :where(a,button,[role="button"]):focus:not(:focus-visible){
    outline:none;
  }

  :where(.skip-link,.brand,.navlinks a,.btn,.platform-btn,.client-link,.footer-links a):focus-visible{
    outline:2px solid rgba(221,134,255,.95);
    outline-offset:3px;
  }
}

@media(max-width:720px){
  .brand{
    position:relative;
    overflow:visible;
  }
  .brand::before{
    content:"";
    position:absolute;
    left:-8px;
    top:50%;
    width:52px;
    height:52px;
    transform:translateY(-50%);
    border-radius:50%;
    background:radial-gradient(circle,rgba(191,75,255,.38) 0%,rgba(191,75,255,.20) 38%,transparent 70%);
    pointer-events:none;
  }
  .brand-logo{
    position:relative;
    z-index:1;
    border-radius:50%;
    filter:none;
  }
  .brand-copy{
    position:relative;
    z-index:1;
  }
}

@media(max-width:360px){
  .brand::before{
    width:50px;
    height:50px;
  }
}

/* Source block 13 */
/* ===== ULTRA-NARROW LAYOUT: 199-279 PX ===== */
@media(max-width:279px){
  .container{
    width:calc(100% - 16px);
  }

  .nav{
    min-height:58px;
    gap:6px;
  }
  .brand{
    flex:0 0 34px;
    width:34px;
    min-width:34px;
    gap:0;
  }
  .brand-copy{display:none}
  .brand::before{
    left:-6px;
    width:46px;
    height:46px;
  }
  .brand-logo{
    flex-basis:34px;
    width:34px;
    height:34px;
  }
  .nav-actions .btn-main{
    min-height:36px;
    padding:0 8px;
    border-radius:11px;
    font-size:10px;
  }

  .hero{
    padding:28px 0 22px;
    gap:12px;
  }
  .hero-copy,
  .hero-actions,
  .hero-points{
    min-width:0;
  }
  .eyebrow{
    margin-bottom:14px;
    padding:7px 8px;
    font-size:9px;
    line-height:1.3;
  }
  h1{
    font-size:clamp(24px,11.7vw,28px);
    line-height:1.02;
    letter-spacing:-.05em;
    word-break:normal;
    overflow-wrap:break-word;
    hyphens:auto;
  }
  h2,
  #clients .clients-header h2{
    font-size:clamp(23px,11vw,27px)!important;
    line-height:1.08;
    letter-spacing:-.04em;
    word-break:normal;
    overflow-wrap:break-word;
    hyphens:auto;
  }
  h3{
    word-break:normal;
    overflow-wrap:break-word;
    hyphens:auto;
  }
  .hero-copy>p{
    margin-top:16px;
    font-size:13px;
    line-height:1.58;
  }
  .hero-actions{
    gap:8px;
    margin-top:19px;
  }
  .hero-actions .btn{
    min-height:44px;
    padding:7px 6px;
    font-size:10.5px;
    line-height:1.25;
    text-align:center;
  }
  .hero-points{
    gap:7px;
    margin-top:18px;
    font-size:10px;
  }
  .hero-points i{
    width:17px;
    height:17px;
    border-radius:6px;
  }
  .hero-visual{
    min-height:238px;
  }
  .hero-halo{width:220px;height:220px}
  .logo-core{width:164px;height:164px}
  .orbit.a{width:210px;height:210px}
  .orbit.b{width:180px;height:180px}
  .float-card{
    min-width:96px;
    padding:7px 8px;
    border-radius:11px;
  }
  .float-card small{font-size:7px}
  .float-card strong{font-size:9px}
  .fc1{left:0;top:21px}
  .fc2{right:0;bottom:20px}

  .section{padding:38px 0}
  .section-head{margin-bottom:18px}
  .section-head p,
  .feature p,
  .tech-card>p,
  .decoder-copy>p,
  .price-copy>p,
  .cta p{
    font-size:12.5px;
    line-height:1.58;
  }
  .feature{
    padding:14px;
    border-radius:18px;
  }
  .feature h3{font-size:18px}
  #advantages .ficon{
    width:40px!important;
    height:40px!important;
    margin-bottom:12px;
    padding:9px!important;
  }

  #network-map .world-shell{padding:6px!important}
  #network-map .map-wrap{border-radius:11px!important}
  .route-scenarios{
    width:calc(100% - 16px)!important;
    gap:9px!important;
  }
  .route-card{
    --route-mobile-node:28px;
    padding:10px!important;
    border-radius:15px!important;
  }
  .route-card-head{
    margin-bottom:10px!important;
  }
  .route-card-head strong{font-size:11px}
  .route-chain,
  .route-chain.chain-3,
  .route-chain.chain-4,
  .route-chain.chain-5,
  .route-scenarios>.route-card:first-child .route-chain{
    gap:1px!important;
  }
  .route-scenarios .route-icon-node{
    border-radius:9px!important;
  }
  .route-scenarios .route-big-icon{
    width:18px!important;
    height:18px!important;
  }
  .route-scenarios .route-icon-node.flag-nl .route-big-icon,
  .route-scenarios .route-icon-node.flag-fi .route-big-icon,
  .route-scenarios .route-icon-node.flag-ru .route-big-icon,
  .route-scenarios .route-icon-node.flag-de .route-big-icon{
    width:20px!important;
    height:14px!important;
  }
  .route-scenarios .route-icon-node.cloudflare .route-big-icon{
    width:20px!important;
    height:15px!important;
  }
  .chain-link,
  .route-scenarios>.route-card:first-child .chain-link{
    min-width:2px!important;
    height:20px!important;
  }

  #clients .clients-shell{
    min-width:0;
    padding:10px!important;
    border-radius:16px!important;
  }
  #clients .clients-platforms{
    gap:4px!important;
    padding:4px;
    margin-bottom:11px;
  }
  #clients .platform-btn{
    min-width:0;
    min-height:40px!important;
    height:40px!important;
    padding:0 4px;
    font-size:10px;
  }
  #clients .clients-panel.active{gap:7px!important}
  #clients .client-card{
    min-height:60px!important;
    padding:7px 8px!important;
    gap:8px!important;
  }
  #clients .client-icon{
    width:38px!important;
    height:38px!important;
    flex-basis:38px!important;
    border-radius:11px!important;
  }
  #clients .client-name{font-size:12px!important}

  .tech-layout,
  .price-grid,
  .decoder-layout,
  .tech-card,
  .price-copy,
  .price-card,
  .decoder-card,
  .mini-console{
    width:100%;
    min-width:0;
  }
  .tech-card,
  .price-copy,
  .price-card{
    padding:14px;
    border-radius:17px;
  }
  .tech-card h3{font-size:18px}
  .chips{gap:5px;margin-top:14px}
  .chip{padding:7px 8px;font-size:10px}
  .console-head{
    align-items:flex-start;
    flex-direction:column;
  }
  .console-live{position:static}
  .bars{height:100px;margin-top:18px}
  .console-bottom{grid-template-columns:1fr}
  .console-bottom>:last-child{grid-column:auto}

  .decoder-privacy{
    align-items:flex-start;
    padding:11px;
  }
  .decoder-card{
    padding:12px;
    border-radius:17px;
  }
  .decoder-card textarea{
    min-height:112px;
    padding:10px;
    font-size:14px!important;
  }
  .decoder-result-actions .btn,
  .decoder-form-foot .btn{
    min-height:42px;
    padding:6px;
    font-size:11px;
  }

  .plan-line{align-items:flex-start;flex-direction:column}
  .price{
    align-items:flex-start;
    flex-direction:column;
    gap:4px;
  }
  .price b{font-size:43px}
  .price span{padding-bottom:0}
  .benefits li{font-size:12px}
  .cta{padding:14px;border-radius:17px}
  .cta h3{font-size:21px}

  .footer-links{
    grid-template-columns:1fr;
    gap:0;
  }
}

@media(max-width:219px){
  .route-card{--route-mobile-node:26px}
  h1{font-size:24px}
  .nav-actions .btn-main{font-size:9.5px}
}

/* Keep decorative hero orbits from creating a horizontal page scroller. */
.hero{
  overflow:clip;
}

@media(min-width:981px) and (max-width:1100px){
  .hero-visual{overflow:hidden}
  .hero-halo{width:420px;height:420px}
  .logo-core{width:325px;height:325px}
  .orbit.a{width:400px;height:400px}
  .orbit.b{width:340px;height:340px}
}

/* Source block 14 */
/* ===== FULL-WIDTH THREE-NODE ROUTE CARDS ===== */
@media(min-width:901px){
  .route-chain.route-chain-wide .chain-link{
    flex:1 1 0!important;
    min-width:120px!important;
    max-width:none!important;
  }
}