/* ─── TOKENS ──────────────────────────────────────────── */
:root{
  --y:#2B63D9;
  --y-soft:#5C8AE8;
  --y-light:#E8F0FD;
  --y-lighter:#F4F8FE;
  --ink:#0D0D0D;
  --mid:#3A3A3A;
  --faint:#F4F6FB;
  --white:#FFFFFF;
  --green:#22C55E;
  --border:2px solid #0D0D0D;
  --sh:4px 4px 0 #0D0D0D;
  --sh-lg:7px 7px 0 #0D0D0D;
  --sh-blue:4px 4px 0 #2B63D9;
  --r-card:18px;
  --r-card-lg:28px;
  --font-h:'Unbounded',sans-serif;
  --font-b:'Onest',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;overflow-x:hidden;}
body{font-family:var(--font-b);background:var(--white);color:var(--ink);overflow-x:hidden;-webkit-font-smoothing:antialiased;}

/* ─── CLOUD DECORATIONS (bg) ─────────────────────────── */
.cloud-bg{
  position:absolute;pointer-events:none;
  opacity:.06;
  z-index:0;
}
.cloud-bg svg{display:block;}

/* ─── BUTTONS ────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--font-h);font-size:11px;font-weight:900;
  letter-spacing:.3px;border:var(--border);padding:14px 26px;
  cursor:pointer;box-shadow:var(--sh);
  transition:transform .12s,box-shadow .12s;white-space:nowrap;
  text-decoration:none;background:var(--white);color:var(--ink);
  border-radius:14px;
}
.btn:hover{transform:translate(-2px,-2px);box-shadow:var(--sh-lg);}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink);}
.btn-black{background:var(--ink);color:var(--white);}
.btn-y{background:var(--y);color:var(--white);}
.btn-ghost{background:transparent;color:var(--ink);box-shadow:none;}
.btn-ghost:hover{box-shadow:var(--sh);}
.btn-pill{border-radius:999px;padding:12px 22px;}

/* ─── NAV (CloudPath original style — улучшенный) ───── */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:200;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 32px;height:68px;
  background:rgba(255,255,255,.85);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:2px solid transparent;
  transition:border-bottom-color .2s, box-shadow .2s, background .2s;
}
.nav.scrolled{
  background:var(--white);
  border-bottom-color:var(--ink);
  box-shadow:0 4px 0 var(--ink);
}
.nav-logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);}
.nav-logo img{height:40px;width:auto;display:block;}
.nav-logo-txt{font-family:var(--font-h);font-size:14px;font-weight:900;letter-spacing:-.4px;}
.nav-links{display:flex;gap:28px;list-style:none;align-items:center;}
.nav-links a{
  font-family:var(--font-h);font-size:10px;font-weight:700;
  letter-spacing:1px;text-transform:uppercase;color:var(--mid);
  text-decoration:none;transition:color .15s;
  position:relative;padding:6px 0;
}
.nav-links a::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--y);transform:scaleX(0);transform-origin:left;
  transition:transform .2s;
}
.nav-links a:hover{color:var(--ink);}
.nav-links a:hover::after{transform:scaleX(1);}
.nav-cta{
  font-family:var(--font-h);font-size:11px;font-weight:900;
  letter-spacing:.5px;color:var(--white);background:var(--ink);
  border:var(--border);padding:12px 22px;cursor:pointer;
  display:inline-flex;align-items:center;gap:8px;
  box-shadow:var(--sh);transition:transform .12s,box-shadow .12s,background .15s;
  border-radius:999px;text-decoration:none;
}
.nav-cta:hover{transform:translate(-2px,-2px);box-shadow:var(--sh-lg);background:var(--y);}
.nav-cta-arrow{transition:transform .2s;}
.nav-cta:hover .nav-cta-arrow{transform:translateX(3px);}
.burger{display:none;background:none;border:none;cursor:pointer;padding:8px;z-index:202;position:relative;}
.burger span{display:block;width:24px;height:2px;background:var(--ink);margin:5px 0;transition:transform .25s, opacity .2s;transform-origin:center;}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.burger.open span:nth-child(2){opacity:0;}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* ─── MOBILE DRAWER ──────────────────────────────────── */
.mobile-drawer{
  position:fixed;inset:0;background:rgba(13,13,13,.5);
  z-index:199;
  opacity:0;pointer-events:none;
  transition:opacity .25s;
  backdrop-filter:blur(6px);
}
.mobile-drawer.open{opacity:1;pointer-events:auto;}
.mobile-drawer-inner{
  position:absolute;top:0;right:0;bottom:0;width:78%;max-width:340px;
  background:var(--white);
  border-left:var(--border);
  padding:92px 28px 32px;
  display:flex;flex-direction:column;gap:6px;
  transform:translateX(100%);
  transition:transform .3s cubic-bezier(.4,0,.2,1);
}
.mobile-drawer.open .mobile-drawer-inner{transform:translateX(0);}
.mobile-drawer-inner a{
  font-family:var(--font-h);font-size:14px;font-weight:700;
  color:var(--ink);text-decoration:none;
  padding:14px 0;
  border-bottom:1.5px solid rgba(0,0,0,.06);
}
.mobile-drawer-cta{
  margin-top:18px;background:var(--ink);color:var(--white) !important;
  border:var(--border);border-radius:999px;padding:14px 22px !important;
  text-align:center;border-bottom:var(--border) !important;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  box-shadow:var(--sh);
}

/* ─── HERO ───────────────────────────────────────────── */
.hero{
  position:relative;
  min-height:100vh;
  padding:120px 32px 64px;
  background:linear-gradient(180deg, #FAFCFF 0%, #F4F8FE 100%);
  overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;
}
.hero-cloud-1{top:-40px;right:-80px;width:480px;opacity:.5;}
.hero-cloud-2{bottom:80px;left:-100px;width:340px;opacity:.35;transform:rotate(8deg);}
.hero-cloud-3{top:30%;right:15%;width:120px;opacity:.4;}
.hero-inner{
  position:relative;z-index:2;
  max-width:1240px;margin:0 auto;width:100%;
  display:grid;grid-template-columns:1.2fr 1fr;gap:48px;align-items:center;
}
.hero-left .pill{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-h);font-size:9px;font-weight:700;
  letter-spacing:2px;color:var(--ink);
  background:var(--white);border:var(--border);
  padding:8px 14px;border-radius:999px;
  box-shadow:var(--sh);margin-bottom:28px;
}
.pulse{
  width:8px;height:8px;border-radius:50%;
  background:var(--green);border:1.5px solid var(--ink);
  animation:blink 1s step-end infinite;flex-shrink:0;
}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}

.hero-h1{
  font-family:var(--font-h);
  font-size:clamp(54px,7.5vw,108px);
  font-weight:900;line-height:.88;letter-spacing:-3px;
  color:var(--ink);margin-bottom:24px;
}
.hero-h1 em{
  font-style:normal;color:var(--y);
  position:relative;display:inline-block;
}
.hero-h1 em::after{
  content:'';position:absolute;left:-4px;right:-4px;bottom:8%;height:18%;
  background:rgba(43,99,217,.15);z-index:-1;border-radius:6px;
}
.hero-sub{
  font-family:var(--font-h);font-size:11px;font-weight:700;
  letter-spacing:3px;color:var(--mid);margin-bottom:20px;
}
.hero-desc{
  font-size:16px;font-weight:400;line-height:1.65;
  color:var(--mid);max-width:500px;margin-bottom:36px;
  text-wrap:pretty;
}
.hero-cta-row{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-bottom:32px;}
.hero-trust{
  display:flex;gap:24px;align-items:center;flex-wrap:wrap;
}
.trust-item{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--mid);}
.trust-check{
  width:18px;height:18px;border-radius:50%;background:var(--green);
  color:var(--white);font-size:11px;font-weight:900;
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
}

/* HERO RIGHT — Live stats card */
.hero-stats{
  position:relative;
  background:var(--ink);color:var(--white);
  border:var(--border);box-shadow:var(--sh-lg);
  border-radius:var(--r-card-lg);
  padding:32px;
  overflow:hidden;
}
.hero-stats::before{
  content:'';position:absolute;top:0;left:0;right:0;height:120px;
  background:radial-gradient(ellipse at top, rgba(43,99,217,.25), transparent 70%);
  pointer-events:none;
}
.hs-head{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:24px;position:relative;
}
.hs-head-label{
  font-family:var(--font-h);font-size:8px;font-weight:700;
  letter-spacing:2px;color:rgba(255,255,255,.4);
}
.hs-live{
  font-family:var(--font-h);font-size:8px;font-weight:700;
  letter-spacing:1.5px;background:var(--y);color:var(--white);
  padding:4px 9px;border-radius:6px;
  display:inline-flex;align-items:center;gap:6px;
}
.hs-live .pulse{background:#fff;border-color:rgba(255,255,255,.4);}

.hs-speed{
  text-align:left;margin-bottom:24px;
  position:relative;
}
.hs-speed-val{
  font-family:var(--font-h);font-size:74px;font-weight:900;
  line-height:1;letter-spacing:-3px;
  color:var(--y);
}
.hs-speed-unit{
  font-family:var(--font-h);font-size:14px;font-weight:700;
  color:rgba(255,255,255,.45);margin-left:6px;
}
.hs-speed-bar{
  height:6px;background:rgba(255,255,255,.08);border-radius:3px;
  margin-top:14px;overflow:hidden;
}
.hs-speed-fill{
  height:100%;background:var(--y);border-radius:3px;
  transition:width .6s cubic-bezier(.4,0,.2,1);
}
.hs-graph{
  display:flex;align-items:flex-end;gap:3px;height:38px;
  margin-bottom:24px;
}
.hs-bar{
  flex:1;background:rgba(43,99,217,.4);border-radius:2px 2px 0 0;
  transition:height .4s ease;
}
.hs-bar.active{background:var(--y);}

.hs-grid{
  display:grid;grid-template-columns:1fr 1fr 1fr;gap:0;
  border-top:1px solid rgba(255,255,255,.1);
  padding-top:20px;
}
.hs-cell{padding:0 12px;border-right:1px solid rgba(255,255,255,.08);}
.hs-cell:first-child{padding-left:0;}
.hs-cell:last-child{border-right:none;padding-right:0;}
.hs-cell-label{
  font-family:var(--font-h);font-size:8px;font-weight:700;
  letter-spacing:1.5px;color:rgba(255,255,255,.35);margin-bottom:6px;
}
.hs-cell-val{
  font-family:var(--font-h);font-size:22px;font-weight:900;color:var(--white);
}
.hs-cell-unit{
  font-family:var(--font-h);font-size:10px;font-weight:700;
  color:rgba(255,255,255,.45);margin-left:3px;
}

/* ─── MARQUEE ────────────────────────────────────────── */
.marquee{
  background:var(--ink);color:var(--y);
  border-top:var(--border);border-bottom:var(--border);
  padding:14px 0;overflow:hidden;
}
.marquee-inner{display:inline-flex;animation:scroll 30s linear infinite;will-change:transform;}
.marquee-inner span{
  font-family:var(--font-h);font-size:10px;font-weight:700;
  letter-spacing:2.5px;padding:0 22px;white-space:nowrap;
}
.mx{color:rgba(43,99,217,.4);}
@keyframes scroll{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

/* ─── SECTION SHELL ──────────────────────────────────── */
.sec{padding:110px 32px;position:relative;}
.sec-white{background:var(--white);}
.sec-faint{background:var(--faint);}
.sec-light-blue{background:var(--y-lighter);}
.max{max-width:1240px;margin:0 auto;position:relative;z-index:2;}
.sec-head{margin-bottom:64px;display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap;}
.sec-head-left{max-width:680px;}
.sec-num{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-h);font-size:10px;font-weight:700;
  letter-spacing:3px;color:var(--y);margin-bottom:14px;
}
.sec-num::before{
  content:'';display:block;width:24px;height:2px;background:var(--y);
}
.sec-title{
  font-family:var(--font-h);
  font-size:clamp(32px,4.6vw,64px);font-weight:900;
  line-height:.92;letter-spacing:-2.5px;color:var(--ink);
  text-wrap:balance;
}
.sec-title em{font-style:normal;color:var(--y);}
.sec-desc{
  font-size:15px;line-height:1.7;color:var(--mid);
  max-width:380px;text-wrap:pretty;
}

/* ─── STEPS (30 SECONDS — VISUAL FLOW) ───────────────── */
.steps-flow{
  position:relative;
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:24px;
}
.steps-flow::before{
  content:'';position:absolute;top:54px;left:5%;right:5%;height:2px;
  background:repeating-linear-gradient(to right, var(--ink) 0 8px, transparent 8px 14px);
  z-index:0;
}
.step{
  position:relative;z-index:1;
  background:var(--white);border:var(--border);
  border-radius:var(--r-card);
  padding:28px 24px;
  box-shadow:var(--sh);
  transition:transform .15s,box-shadow .15s;
  display:flex;flex-direction:column;
  min-height:240px;
}
.step:hover{transform:translate(-2px,-2px);box-shadow:var(--sh-lg);}
.step-badge{
  width:48px;height:48px;border-radius:50%;
  background:var(--y);color:var(--white);
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--font-h);font-size:18px;font-weight:900;
  border:var(--border);box-shadow:3px 3px 0 var(--ink);
  margin-bottom:20px;
}
.step:nth-child(2) .step-badge{background:var(--ink);}
.step:nth-child(3) .step-badge{background:var(--y);}
.step:nth-child(4) .step-badge{background:var(--green);}
.step-title{font-family:var(--font-h);font-size:16px;font-weight:900;margin-bottom:8px;letter-spacing:-.3px;}
.step-body{font-size:13px;line-height:1.65;color:var(--mid);text-wrap:pretty;}
.step-tag{
  display:inline-block;margin-top:auto;
  font-family:var(--font-h);font-size:8px;font-weight:700;
  letter-spacing:1.5px;color:var(--y);
  background:var(--y-light);padding:4px 10px;border-radius:6px;
  align-self:flex-start;
}

/* ─── FEATURES (BENTO) ───────────────────────────────── */
.bento{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  grid-auto-rows:minmax(180px, auto);
  gap:18px;
}
.bento-card{
  position:relative;overflow:hidden;
  background:var(--white);border:var(--border);
  border-radius:var(--r-card);
  padding:28px;
  box-shadow:var(--sh);
  transition:transform .18s,box-shadow .18s;
  display:flex;flex-direction:column;
}
.bento-card:hover{transform:translate(-2px,-2px);box-shadow:var(--sh-lg);}
.b-num{
  font-family:var(--font-h);font-size:9px;font-weight:700;
  letter-spacing:2px;color:var(--y);margin-bottom:14px;
}
.b-title{font-family:var(--font-h);font-size:18px;font-weight:900;letter-spacing:-.4px;margin-bottom:8px;line-height:1.15;}
.b-body{font-size:13px;line-height:1.65;color:var(--mid);text-wrap:pretty;}
.b-tag{
  display:inline-block;
  font-family:var(--font-h);font-size:8px;font-weight:700;
  letter-spacing:1.5px;color:var(--mid);
  background:var(--faint);padding:5px 10px;border-radius:6px;
  border:1.5px solid var(--ink);
  margin-top:auto;align-self:flex-start;
}

/* HERO bento — left big card */
.b-hero{
  grid-column:span 4;grid-row:span 2;
  background:var(--ink);color:var(--white);
  padding:40px;
}
.b-hero .b-num{color:var(--y-soft);}
.b-hero .b-title{font-size:36px;color:var(--white);margin-bottom:16px;}
.b-hero .b-title span{color:var(--y);}
.b-hero .b-body{color:rgba(255,255,255,.55);font-size:15px;line-height:1.7;max-width:480px;}
.b-hero .b-tag{
  background:var(--y);color:var(--white);border-color:var(--y);
}
.b-hero-vis{
  margin-top:24px;
  display:flex;align-items:center;gap:14px;
}
.b-pkg{
  flex:1;background:rgba(255,255,255,.05);
  border:1.5px solid rgba(255,255,255,.1);
  border-radius:12px;padding:14px;
  font-family:var(--font-h);font-size:10px;font-weight:700;
  letter-spacing:1.5px;color:rgba(255,255,255,.4);
  display:flex;flex-direction:column;gap:6px;
  position:relative;overflow:hidden;
}
.b-pkg-val{font-size:16px;color:var(--white);letter-spacing:-.3px;}
.b-arrow{
  flex-shrink:0;color:var(--y);font-size:24px;
  animation:flow 2s ease-in-out infinite;
}
@keyframes flow{0%,100%{transform:translateX(0);opacity:.6}50%{transform:translateX(4px);opacity:1}}

/* Small cards */
.b-2{grid-column:span 2;}
.b-3{grid-column:span 3;}
.b-4{grid-column:span 4;}
.b-yellow{background:var(--y);color:var(--white);}
.b-yellow .b-num{color:rgba(255,255,255,.7);}
.b-yellow .b-title{color:var(--white);}
.b-yellow .b-body{color:rgba(255,255,255,.85);}
.b-yellow .b-tag{background:var(--white);border-color:var(--white);color:var(--y);}

/* Big number visual */
.b-bignum{
  font-family:var(--font-h);font-size:80px;font-weight:900;
  line-height:1;letter-spacing:-4px;color:var(--ink);
  margin-bottom:8px;
}
.b-bignum sup{font-size:30px;vertical-align:top;color:var(--y);letter-spacing:-1px;margin-left:2px;}
.b-yellow .b-bignum{color:var(--white);}
.b-yellow .b-bignum sup{color:rgba(255,255,255,.8);}

/* Device card */
.b-devices{
  display:flex;flex-direction:column;gap:8px;margin:auto 0 20px 0;
}
.b-device{
  background:var(--faint);border:1.5px solid var(--ink);border-radius:10px;
  padding:12px 14px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  font-family:var(--font-h);font-size:11px;font-weight:700;
  letter-spacing:.5px;color:var(--ink);
}
.b-device-name{flex:1;text-align:left;}
.b-device-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:8px;
  background:var(--y);color:#fff;flex-shrink:0;
}
.b-device-icon svg{display:block;}

/* Compare card */
.b-compare{display:flex;flex-direction:column;gap:8px;margin-top:14px;}
.b-row{display:flex;justify-content:space-between;align-items:center;
  border-top:1.5px solid rgba(0,0,0,.08);padding:7px 0;font-size:12px;}
.b-row span:first-child{color:var(--mid);}
.b-row .ok{color:var(--green);font-weight:700;font-family:var(--font-h);font-size:11px;}
.b-row .no{color:#999;font-weight:700;font-family:var(--font-h);font-size:11px;text-decoration:line-through;}

/* ─── SERVERS (TRAVEL POSTERS) ───────────────────────── */
.servers-row{
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
}
.poster{
  position:relative;
  background:var(--white);
  border:var(--border);
  border-radius:var(--r-card);
  box-shadow:var(--sh);
  overflow:hidden;
  transition:transform .18s,box-shadow .18s;
}
.poster:hover{transform:translate(-3px,-3px);box-shadow:var(--sh-lg);}
.poster-vis{
  position:relative;
  height:200px;
  background:var(--y-light);
  border-bottom:var(--border);
  overflow:hidden;
}
.poster-flag{
  position:absolute;top:18px;left:18px;
  width:54px;height:36px;
  border:1.5px solid var(--ink);
  box-shadow:2px 2px 0 var(--ink);
  border-radius:4px;overflow:hidden;
}
.poster-flag svg{width:100%;height:100%;display:block;}
.poster-status{
  position:absolute;top:18px;right:18px;
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-h);font-size:8px;font-weight:700;letter-spacing:1.5px;
  background:var(--white);color:var(--ink);
  padding:5px 9px;border-radius:6px;border:1.5px solid var(--ink);
}
.poster-status .pulse{width:6px;height:6px;}
.poster-skyline{
  position:absolute;bottom:0;left:0;right:0;
  height:90px;
  pointer-events:none;
}
.poster-skyline svg{display:block;width:100%;height:100%;}
.poster-name{
  position:absolute;top:18px;left:84px;
  font-family:var(--font-h);font-weight:900;
  z-index:2;
}
.poster-country{font-size:9px;color:var(--mid);letter-spacing:2px;text-transform:uppercase;margin-bottom:3px;line-height:1;}
.poster-city{font-size:22px;color:var(--ink);letter-spacing:-.5px;line-height:1;}

.poster-body{padding:24px;}
.poster-metrics{
  display:grid;grid-template-columns:1fr 1fr;gap:14px;
}
.pm-cell{}
.pm-label{font-family:var(--font-h);font-size:8px;font-weight:700;letter-spacing:1.5px;color:#999;margin-bottom:5px;}
.pm-val{font-family:var(--font-h);font-size:22px;font-weight:900;letter-spacing:-.5px;color:var(--ink);}
.pm-unit{font-size:11px;color:var(--mid);margin-left:3px;}
.pm-good{color:var(--green);}
.poster-bar{height:4px;background:#EEE;border-radius:2px;margin-top:16px;overflow:hidden;}
.poster-fill{height:100%;background:var(--y);border-radius:2px;transition:width .6s;}
.poster-foot{
  margin-top:14px;display:flex;justify-content:space-between;align-items:center;
  font-family:var(--font-h);font-size:8px;font-weight:700;letter-spacing:1.5px;color:var(--mid);
}

/* ─── PRICING ────────────────────────────────────────── */
.pricing-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:18px;
}
.plan{
  position:relative;
  background:var(--white);border:var(--border);
  border-radius:var(--r-card);
  box-shadow:var(--sh);
  padding:32px 26px;
  transition:transform .18s, box-shadow .18s;
  display:flex;flex-direction:column;
}
.plan:hover{transform:translate(-2px,-2px);box-shadow:var(--sh-lg);}
.plan-featured{background:var(--y);color:var(--white);border-color:var(--ink);box-shadow:var(--sh);}
.plan-featured:hover{box-shadow:var(--sh-lg);}
.plan-ribbon{
  position:absolute;top:14px;right:14px;
  font-family:var(--font-h);font-size:8px;font-weight:900;letter-spacing:1.5px;
  background:var(--ink);color:var(--white);
  padding:5px 10px;border-radius:6px;
}
.plan-period{font-family:var(--font-h);font-size:10px;font-weight:700;letter-spacing:2px;color:#999;margin-bottom:18px;}
.plan-featured .plan-period{color:rgba(255,255,255,.7);}
.plan-price{
  font-family:var(--font-h);font-size:46px;font-weight:900;line-height:1;letter-spacing:-2px;
  margin-bottom:4px;
}
.plan-currency{font-size:18px;vertical-align:top;margin-top:8px;display:inline-block;margin-right:2px;}
.plan-per{font-size:13px;color:#999;font-family:var(--font-b);font-weight:400;margin-left:6px;}
.plan-featured .plan-per{color:rgba(255,255,255,.7);}
.plan-month{font-size:11px;color:var(--mid);font-family:var(--font-b);margin-bottom:20px;}
.plan-featured .plan-month{color:rgba(255,255,255,.75);}
.plan-alt{font-size:11px;color:#999;margin-bottom:22px;padding-bottom:18px;border-bottom:1.5px dashed rgba(0,0,0,.12);}
.plan-featured .plan-alt{color:rgba(255,255,255,.65);border-bottom-color:rgba(255,255,255,.25);}
.plan-items{list-style:none;margin-bottom:24px;flex:1;}
.plan-items li{
  font-size:13px;padding:8px 0;color:var(--mid);
  display:flex;gap:9px;align-items:center;
}
.plan-featured .plan-items li{color:rgba(255,255,255,.95);}
.plan-items li svg{flex-shrink:0;color:var(--green);}
.plan-featured .plan-items li svg{color:var(--white);}
.plan-btn{
  width:100%;font-family:var(--font-h);font-size:11px;font-weight:900;letter-spacing:.5px;
  background:var(--ink);color:var(--white);border:var(--border);
  padding:14px;cursor:pointer;border-radius:12px;
  transition:transform .12s,box-shadow .12s;
  box-shadow:var(--sh);
}
.plan-btn:hover{transform:translate(-2px,-2px);box-shadow:var(--sh-lg);}
.plan-featured .plan-btn{background:var(--white);color:var(--ink);}

.pricing-note{
  text-align:center;margin-top:32px;
  font-family:var(--font-h);font-size:9px;font-weight:700;letter-spacing:2px;color:#aaa;
}

/* Pricing carousel (mobile) */
.pricing-wrap{position:relative;}
.carousel-dots{
  display:none;justify-content:center;gap:8px;margin-top:24px;
}
.carousel-dot{width:8px;height:8px;border-radius:50%;background:#ccc;cursor:pointer;transition:all .2s;}
.carousel-dot.active{background:var(--ink);width:24px;border-radius:4px;}

/* ─── CTA ────────────────────────────────────────────── */
.cta{
  position:relative;
  padding:120px 32px;text-align:center;
  background:var(--y);
  border-top:var(--border);border-bottom:var(--border);
  overflow:hidden;
}
.cta-cloud{position:absolute;opacity:.12;pointer-events:none;}
.cta-cloud.c1{top:20px;left:5%;width:200px;}
.cta-cloud.c2{bottom:30px;right:8%;width:280px;transform:rotate(-6deg);}
.cta-inner{position:relative;z-index:2;max-width:780px;margin:0 auto;}
.cta-eyebrow{
  display:inline-block;
  font-family:var(--font-h);font-size:9px;font-weight:700;letter-spacing:3px;
  color:var(--white);background:rgba(255,255,255,.18);padding:6px 14px;border-radius:999px;
  margin-bottom:20px;
}
.cta-title{
  font-family:var(--font-h);
  font-size:clamp(40px,7vw,84px);font-weight:900;
  line-height:.9;letter-spacing:-3px;color:var(--white);margin-bottom:20px;
  text-wrap:balance;
}
.cta-title em{font-style:normal;color:var(--ink);}
.cta-sub{font-size:16px;color:rgba(255,255,255,.85);margin-bottom:36px;font-weight:400;}

/* ─── TG CHECK SECTION ─────────────────────────────────── */
.tgcheck-section{
  background:var(--ink);
  padding:110px 32px;
  position:relative;
  overflow:hidden;
}
.tg-cloud-1{top:60px;right:-60px;width:340px;opacity:.06;}
.tgcheck-inner{
  max-width:1240px;margin:0 auto;
  display:grid;grid-template-columns:1.1fr 460px;gap:64px;
  align-items:center;
  position:relative;z-index:2;
}
.tg-desc{
  font-size:15px;line-height:1.75;color:rgba(255,255,255,.55);
  margin:18px 0 28px;max-width:520px;text-wrap:pretty;
}
.tg-checks{display:flex;flex-direction:column;gap:12px;}
.tg-check{
  display:flex;align-items:center;gap:12px;
  font-size:13px;color:rgba(255,255,255,.7);
}
.tg-ck{
  width:22px;height:22px;border-radius:50%;
  background:rgba(43,99,217,.18);color:var(--y-soft);
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
}

.tg-widget{
  background:var(--white);color:var(--ink);
  border:var(--border);box-shadow:var(--sh-lg);
  border-radius:var(--r-card);
  overflow:hidden;
}
.tg-whead{
  background:var(--y);color:var(--white);
  padding:14px 22px;
  font-family:var(--font-h);font-size:10px;font-weight:700;letter-spacing:2px;
  border-bottom:var(--border);
}
.tg-wbody{padding:28px;}
.tg-wdesc{font-size:14px;color:var(--mid);line-height:1.65;margin-bottom:20px;text-wrap:pretty;}
.tg-hint{font-size:11px;color:#aaa;text-align:center;margin-top:12px;}
.tg-spinner{
  width:48px;height:48px;border:3px solid #EEE;border-top-color:var(--y);
  border-radius:50%;animation:spin .9s linear infinite;margin:12px auto 16px;
}
@keyframes spin{to{transform:rotate(360deg)}}
.tg-status{
  font-family:var(--font-h);font-size:10px;font-weight:700;
  letter-spacing:2px;color:#888;text-align:center;
}
.tg-result-icon{
  width:56px;height:56px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  margin:0 auto 12px;
}
.tg-wbody > .tg-result-icon{display:flex;}
.tg-result-title{
  font-family:var(--font-h);font-size:14px;font-weight:900;
  text-align:center;margin-bottom:6px;letter-spacing:-.3px;
}
.tg-result-sub{
  font-size:13px;color:var(--mid);text-align:center;margin-bottom:18px;line-height:1.5;
}
.btn-link{
  background:none;border:none;cursor:pointer;width:100%;
  font-family:var(--font-h);font-size:10px;font-weight:700;
  letter-spacing:1px;color:#999;
  padding:8px;text-align:center;
}
.btn-link:hover{color:var(--ink);}


.faq-list{
  max-width:820px;margin:0 auto;
  display:flex;flex-direction:column;gap:12px;
}
.faq-item{
  background:var(--white);border:var(--border);
  border-radius:var(--r-card);
  overflow:hidden;
  box-shadow:var(--sh);
  transition:transform .15s,box-shadow .15s;
}
.faq-item.open{box-shadow:var(--sh-lg);}
.faq-q{
  width:100%;display:flex;justify-content:space-between;align-items:center;
  padding:20px 24px;cursor:pointer;
  font-family:var(--font-h);font-size:14px;font-weight:900;letter-spacing:-.2px;
  background:transparent;border:none;text-align:left;color:var(--ink);
}
.faq-icon{
  flex-shrink:0;width:28px;height:28px;border-radius:50%;
  background:var(--y-light);color:var(--y);
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--font-h);font-size:18px;font-weight:900;
  transition:transform .2s;
}
.faq-item.open .faq-icon{transform:rotate(45deg);background:var(--y);color:var(--white);}
.faq-a{
  max-height:0;overflow:hidden;transition:max-height .3s ease;
  padding:0 24px;color:var(--mid);font-size:14px;line-height:1.7;
}
.faq-item.open .faq-a{max-height:400px;padding:0 24px 24px;}

/* ─── FOOTER ─────────────────────────────────────────── */
.footer{background:var(--ink);color:var(--white);position:relative;overflow:hidden;}
.footer-cloud{position:absolute;opacity:.04;pointer-events:none;}
.footer-cloud.c1{top:40px;right:8%;width:240px;}
.footer-main{
  max-width:1240px;margin:0 auto;
  display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:48px;
  padding:64px 32px 36px;
  border-bottom:1px solid rgba(255,255,255,.08);
  position:relative;
}
.footer-brand .footer-logo{
  display:flex;align-items:center;gap:10px;margin-bottom:14px;text-decoration:none;
}
.footer-brand .footer-logo img{height:38px;filter:brightness(0) invert(1);}
.footer-brand .footer-logo span{font-family:var(--font-h);font-size:14px;font-weight:900;color:var(--white);}
.footer-desc{font-size:13px;color:rgba(255,255,255,.5);line-height:1.7;margin-bottom:22px;max-width:300px;}
.footer-socials{display:flex;gap:8px;}
.footer-social{
  width:38px;height:38px;border:1.5px solid rgba(255,255,255,.15);border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,.5);text-decoration:none;
  transition:border-color .15s,color .15s,background .15s;
}
.footer-social:hover{border-color:var(--y);color:var(--white);background:var(--y);}
.footer-col{display:flex;flex-direction:column;gap:10px;}
.footer-col-title{
  font-family:var(--font-h);font-size:9px;font-weight:700;
  text-transform:uppercase;letter-spacing:2px;
  color:rgba(255,255,255,.35);margin-bottom:8px;
}
.footer-col a{font-size:13px;color:rgba(255,255,255,.65);text-decoration:none;transition:color .15s;}
.footer-col a:hover{color:var(--y);}
.footer-bottom{
  max-width:1240px;margin:0 auto;
  display:flex;justify-content:space-between;
  padding:20px 32px;flex-wrap:wrap;gap:12px;
}
.footer-copy{
  font-family:var(--font-h);font-size:9px;letter-spacing:1.5px;color:rgba(255,255,255,.25);
}

/* ─── REVEAL ANIM ────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .6s, transform .6s;}
.reveal.visible{opacity:1;transform:translateY(0);}

/* ─── RESPONSIVE ─────────────────────────────────────── */
@media(max-width:860px){
  .nav{padding:0 20px;}
  .nav-links{display:none;}
  .burger{display:block;}
  .nav-cta{display:none;}
  .hero{padding:100px 20px 56px;min-height:auto;}
  .hero-inner{grid-template-columns:1fr;gap:32px;}
  .hero-stats{order:2;padding:24px;}
  .hs-speed-val{font-size:60px;}
  .hero-h1{font-size:clamp(48px,13vw,84px);letter-spacing:-2.5px;}
  .hero-cloud-1{width:300px;top:-20px;right:-100px;}
  .hero-cloud-2{display:none;}
  .hero-cloud-3{display:none;}
  .sec{padding:72px 20px;}
  .sec-head{flex-direction:column;align-items:flex-start;margin-bottom:40px;}
  .sec-desc{max-width:100%;}
  .steps-flow{grid-template-columns:1fr 1fr;gap:14px;}
  .steps-flow::before{display:none;}
  .step{padding:22px 18px;}
  .bento{grid-template-columns:repeat(2,1fr);grid-auto-rows:minmax(160px, auto);gap:14px;}
  .b-hero{grid-column:span 2;grid-row:span 1;padding:28px;}
  .b-hero .b-title{font-size:24px;}
  .b-hero-vis{flex-wrap:wrap;}
  .b-hero-vis .b-pkg{flex:1 1 100%;min-width:0;}
  /* На мобиле стрелка смотрит вниз и не дёргается X-анимацией */
  .b-hero-vis .b-arrow{
    transform:rotate(90deg) !important;
    margin:-4px auto;
    animation:flow-down 2s ease-in-out infinite !important;
  }
  @keyframes flow-down {
    0%,100%{ transform: rotate(90deg) translateX(0);    opacity:.6 }
    50%    { transform: rotate(90deg) translateX(4px); opacity:1  }
  }
  .b-2,.b-3,.b-4{grid-column:span 1;}
  .b-bignum{font-size:60px;}
  .b-devices{flex-direction:column;flex-wrap:nowrap;}
  .b-device{flex:none;width:100%;}
  .servers-row{grid-template-columns:1fr;gap:16px;}
  .poster-vis{height:170px;}
  .poster-skyline{height:70px;}
  .poster-city{font-size:22px;}
  .tgcheck-section{padding:64px 20px;}
  .tgcheck-inner{grid-template-columns:1fr;gap:32px;}
  .tg-wbody{padding:22px;}
  .pricing-grid{
    grid-template-columns:repeat(4, calc(100vw - 80px));
    gap:14px;
    overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:20px;
    padding:8px 20px 12px;margin:0 -20px;
    /* -webkit-overflow-scrolling removed — захватывал тач-события страницы */
    scrollbar-width:none;
  }
  .pricing-grid::-webkit-scrollbar{display:none;}
  .plan{scroll-snap-align:start;min-width:0;}
  .carousel-dots{display:flex;}
  .cta{padding:80px 20px;}
  .cta-cloud.c1,.cta-cloud.c2{display:none;}
  .faq-q{padding:18px 20px;font-size:13px;}
  .faq-item.open .faq-a{padding:0 20px 22px;}
  .footer-main{grid-template-columns:1fr 1fr;gap:32px;padding:48px 20px 28px;}
  .footer-brand{grid-column:1/-1;}
  .footer-bottom{padding:18px 20px;flex-direction:column;gap:6px;text-align:center;}
  .nav-logo-txt{display:none;}
}
@media(max-width:560px){
  .steps-flow{grid-template-columns:1fr;}
  .bento{grid-template-columns:1fr;}
  .b-hero{grid-column:span 1;}
  .footer-main{grid-template-columns:1fr;}
  .hero-trust{gap:14px;}
  .hero-cta-row .btn{font-size:10px;padding:13px 20px;}
  .sec-title{font-size:36px;letter-spacing:-1.5px;}
  .cta-title{font-size:48px;letter-spacing:-2px;}
}

/* ══════════════════════════════════════════════════════════
   NAV — floating pill (liquid glass) — из текущего лендоса
   ══════════════════════════════════════════════════════════ */

/* Скрываем прототип-nav (если где-то отрендерится — для надёжности) */
.nav { display: none !important; }

/* Спейсер сверху страницы — pill парит, hero не уходит под него */
body { padding-top: 0; }

.nav-pill {
  position: fixed; top: calc(env(safe-area-inset-top) + 14px); left: 50%; z-index: 200;
  transform: translateX(-50%) translateY(calc(-100% - 32px));
  display: flex; align-items: center; gap: 32px;
  padding: 0 10px 0 28px; height: 56px;
  background: rgba(255,255,255,0.6);
  -webkit-backdrop-filter: blur(28px) saturate(1.8);
  backdrop-filter: blur(28px) saturate(1.8);
  border: 1.5px solid rgba(255,255,255,0.85);
  border-radius: 100px;
  box-shadow: 0 2px 20px rgba(0,0,0,.07), inset 0 1px 0 rgba(255,255,255,.9);
  white-space: nowrap;
  opacity: 0;
  transition: opacity .4s ease, transform .4s cubic-bezier(.34,1.56,.64,1), gap .35s ease;
}
.nav-pill.nav-visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.nav-pill.scrolled    { box-shadow: 0 6px 28px rgba(0,0,0,.1), inset 0 1px 0 rgba(255,255,255,.9); }

.nav-pill-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; }
.nav-pill-logo-img { height: 30px; width: auto; filter: none; }
.nav-pill-logo-txt {
  font-family: var(--font-h); font-size: 12px; font-weight: 900;
  color: var(--ink); letter-spacing: .3px; display: none;
}

.nav-pill-links-wrap {
  display: flex; overflow: hidden;
  max-width: 500px; opacity: 1;
  transition: max-width .4s cubic-bezier(.4,0,.2,1), opacity .3s ease;
}
.nav-pill-links { display: flex; gap: 28px; list-style: none; padding: 0; margin: 0; }
.nav-pill-links a {
  font-family: var(--font-h); font-size: 9px; font-weight: 700;
  letter-spacing: .8px; text-transform: uppercase; color: rgba(0,0,0,.5);
  text-decoration: none; transition: color .15s;
}
.nav-pill-links a:hover { color: var(--ink); }

.nav-pill-cta {
  font-family: var(--font-h); font-size: 10px; font-weight: 900;
  letter-spacing: .5px; color: var(--white); background: var(--y);
  border-radius: 100px; padding: 10px 22px; cursor: pointer;
  display: inline-flex; align-items: center;
  text-decoration: none; flex-shrink: 0;
  max-width: 200px; overflow: hidden;
  transition: opacity .15s, max-width .4s cubic-bezier(.4,0,.2,1), padding .4s ease;
}
.nav-pill-cta:hover { opacity: .85; }

/* COLLAPSED state — после скролла за hero сжимается в маленькую pill с лого + cta */
.nav-pill.nav-collapsed { gap: 16px; }
.nav-pill.nav-collapsed .nav-pill-links-wrap { max-width: 0; opacity: 0; pointer-events: none; }

@media (max-width: 768px) {
  .nav-pill {
    top: calc(env(safe-area-inset-top) + 10px);
    height: 48px; padding: 0 6px 0 18px; gap: 14px;
    max-width: calc(100vw - 24px);
  }
  .nav-pill.nav-visible { transform: translateX(-50%) translateY(0); }
  .nav-pill.nav-collapsed { max-width: 130px; gap: 0; }
  .nav-pill-links-wrap { display: none; }
  .nav-pill-logo-img { display: none; }
  .nav-pill-logo-txt { display: block; font-size: 13px; color: var(--ink); }
  .nav-pill-cta { padding: 9px 18px; font-size: 9px; flex-shrink: 0; overflow: hidden; }
  .nav-pill.nav-collapsed .nav-pill-cta {
    max-width: 0; padding: 0; margin: 0; opacity: 0; pointer-events: none; transition: none;
  }
}

/* ══════════════════════════════════════════════════════════
   MOBILE OVERHAUL — тонкая адаптация под маленькие экраны
   ══════════════════════════════════════════════════════════ */

/* 860px — планшеты / широкие телефоны (lvl 1 правки) */
@media (max-width: 860px) {
  .hero {
    padding: 96px 18px 48px;
    min-height: auto;
  }
  .hero-inner { gap: 28px; }
  .hero-h1 {
    font-size: clamp(44px, 11.5vw, 72px);
    letter-spacing: -2px;
    line-height: .92;
    margin-bottom: 18px;
  }
  .hero-sub { font-size: 10px; letter-spacing: 2.4px; margin-bottom: 14px; }
  .hero-desc { font-size: 14.5px; margin-bottom: 26px; }
  .hero-cta-row { gap: 10px; margin-bottom: 24px; }
  .hero-trust { gap: 16px; }
  .trust-item { font-size: 12px; }

  /* hero-stats — компактнее */
  .hero-stats { padding: 22px; border-radius: 22px; }
  .hs-head { margin-bottom: 18px; }
  .hs-speed-val { font-size: 56px; letter-spacing: -2px; }
  .hs-speed-unit { font-size: 12px; }
  .hs-speed-bar { margin-top: 10px; }
  .hs-graph { height: 32px; margin-bottom: 20px; }
  .hs-grid { padding-top: 16px; }
  .hs-cell { padding: 0 8px; }
  .hs-cell-val { font-size: 18px; }
  .hs-cell-unit { font-size: 9px; }
  .hs-cell-label { font-size: 7.5px; letter-spacing: 1.2px; }

  /* secs — компактнее */
  .sec { padding: 64px 18px; }
  .sec-head { margin-bottom: 36px; gap: 20px; }
  .sec-title { font-size: clamp(30px, 8vw, 52px); letter-spacing: -1.6px; }
  .sec-desc { font-size: 14px; }

  /* marquee — мельче */
  .marquee { padding: 11px 0; }
  .marquee-inner span { font-size: 9px; letter-spacing: 1.8px; padding: 0 16px; }

  /* steps */
  .steps-flow { gap: 12px; }
  .step { padding: 20px 16px; }
  .step-badge { font-size: 16px; }
  .step-title { font-size: 14px; }
  .step-body { font-size: 12.5px; line-height: 1.55; }

  /* bento — лучшие пропорции */
  .bento { grid-auto-rows: minmax(150px, auto); gap: 12px; }
  .b-hero { padding: 24px; }
  .b-hero .b-title { font-size: 22px; line-height: 1.05; }
  .b-hero .b-body { font-size: 13.5px; line-height: 1.6; }
  .b-hero-vis { gap: 8px; margin-top: 18px; }
  .b-pkg { padding: 10px 12px; }
  .b-bignum { font-size: 52px; letter-spacing: -2px; }

  /* servers — постеры компактнее */
  .poster-vis { height: 150px; }
  .poster-skyline { height: 60px; }
  .poster-city { font-size: 20px; letter-spacing: -.5px; }
  .poster-country { font-size: 8px; letter-spacing: 1.6px; }
  .poster-body { padding: 18px; }
  .pm-val { font-size: 22px; }

  /* pricing — карусель: чтобы было видно соседнюю карточку */
  .pricing-grid {
    grid-template-columns: repeat(4, min(280px, calc(100vw - 90px)));
    gap: 12px;
    padding: 6px 18px 12px;
    margin: 0 -18px;
  }
  .plan { padding: 24px 20px; }
  .plan-period { font-size: 10px; }
  .plan-price { font-size: 44px; letter-spacing: -1.5px; }
  .plan-currency { font-size: 22px; }
  .plan-month { font-size: 11px; }
  .plan-alt { font-size: 10px; }
  .plan-items li { font-size: 12.5px; gap: 8px; }
  .plan-btn { padding: 12px; font-size: 10px; }
  .plan-ribbon { font-size: 8.5px; padding: 4px 10px; }

  /* tgcheck */
  .tgcheck-section { padding: 56px 18px; }
  .tg-widget { padding: 22px; }
  .tg-whead { font-size: 8.5px; }
  .tg-result-title { font-size: 17px; }
  .tg-result-sub { font-size: 13px; }
  .tg-desc { font-size: 14px; }
  .tg-check { font-size: 12.5px; }

  /* FAQ */
  .faq-q { padding: 16px 18px; font-size: 12.5px; }
  .faq-icon { font-size: 18px; }
  .faq-item.open .faq-a { padding: 0 18px 18px; font-size: 13px; }

  /* CTA */
  .cta { padding: 72px 18px; }
  .cta-eyebrow { font-size: 9px; }
  .cta-title { font-size: clamp(38px, 10vw, 60px); letter-spacing: -2px; }
  .cta-sub { font-size: 14px; }

  /* footer */
  .footer-main { padding: 40px 18px 24px; gap: 26px; }
  .footer-logo { font-size: 16px; }
  .footer-desc { font-size: 12.5px; }
  .footer-col-title { font-size: 9px; }
  .footer-col a { font-size: 12px; }
  .footer-bottom { padding: 16px 18px; font-size: 10px; gap: 4px; }
}

/* 480px — типичный смартфон portrait */
@media (max-width: 480px) {
  .hero { padding: 88px 14px 40px; }
  .hero-inner { gap: 22px; }
  .hero-h1 { font-size: clamp(40px, 12.5vw, 60px); letter-spacing: -1.5px; }
  .hero-desc { font-size: 13.5px; }
  .hero-cta-row { width: 100%; }
  .hero-cta-row .btn { flex: 1 1 100%; justify-content: center; padding: 14px 18px; font-size: 11px; }

  .hero-stats { padding: 20px; }
  .hs-speed-val { font-size: 48px; }
  .hs-graph { height: 28px; gap: 2px; }
  .hs-cell-val { font-size: 16px; }

  .sec { padding: 56px 14px; }
  .sec-head { margin-bottom: 28px; }

  .steps-flow { grid-template-columns: 1fr; gap: 10px; }
  .step { padding: 18px 16px; }

  .bento { grid-template-columns: 1fr; grid-auto-rows: auto; gap: 12px; }
  .bento-card { padding: 22px 20px; }
  .b-hero { padding: 22px 20px; grid-column: span 1; }
  .b-hero .b-title { font-size: 20px; }
  .b-2, .b-3, .b-4 { grid-column: span 1; }
  .b-bignum { font-size: 48px; }

  .servers-row { gap: 14px; }
  .poster-vis { height: 130px; }
  .poster-skyline { height: 50px; }
  .poster-city { font-size: 18px; }

  .pricing-grid {
    grid-template-columns: repeat(4, calc(100vw - 56px));
    margin: 0 -14px;
    padding: 6px 14px 12px;
  }

  .footer-main { grid-template-columns: 1fr; gap: 24px; padding: 36px 14px 22px; }
  .footer-brand { grid-column: 1; }
  .footer-socials { gap: 10px; }

  .tg-widget { padding: 20px 18px; }
  .cta { padding: 60px 14px; }
}

/* 360px — узкие или старые телефоны (iPhone SE, Android Go) */
@media (max-width: 360px) {
  .hero-h1 { font-size: 38px; letter-spacing: -1.2px; }
  .sec-title { font-size: 28px; letter-spacing: -1.2px; }
  .cta-title { font-size: 34px; letter-spacing: -1.5px; }
  .hs-speed-val { font-size: 42px; }
  .b-hero .b-title { font-size: 18px; }
  .nav-pill {
    height: 44px; padding: 0 5px 0 14px; gap: 10px;
  }
  .nav-pill-logo-img { height: 24px; }
  .nav-pill-cta { padding: 8px 14px; font-size: 8.5px; }
}

/* Landscape phones — не давать hero быть высоким */
@media (max-width: 860px) and (orientation: landscape) and (max-height: 500px) {
  .hero { min-height: auto; padding-top: 80px; }
  .hero-h1 { font-size: 44px; }
  .hero-stats { padding: 18px; }
  .hs-speed-val { font-size: 44px; }
  .hs-graph { display: none; }
}

/* iOS overscroll цвет + лучшее тач-поведение */
html, body { -webkit-tap-highlight-color: transparent; }
.bento-card, .plan, .poster, .step, .faq-item {
  -webkit-tap-highlight-color: transparent;
}

/* Карусель тарифов — индикатор справа что есть свайп */
@media (max-width: 860px) {
  .pricing-wrap { position: relative; }
  .pricing-grid {
    scroll-behavior: smooth;
    /* мягкий fade на правом краю — намекает на свайп */
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 90%, transparent 100%);
            mask-image: linear-gradient(to right, #000 0, #000 90%, transparent 100%);
  }
}

/* ══════════════════════════════════════════════════════════
   MOBILE LINE-HEIGHT FIX — буквы не должны слипаться
   ══════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
  /* Display-заголовки на десктопе плотно (lh 0.88-0.92) — на мобиле
     строк больше → слипаются. Разводим. */
  .hero-h1   { line-height: 1.02 !important; }
  .sec-title { line-height: 1.05 !important; }
  .cta-title { line-height: 1.0  !important; }
  .b-hero .b-title { line-height: 1.1; }

  /* Бенто b-hero на мобиле — длинный (510px), его vis-блок занимает 256px.
     Сделаем чуть компактнее: уменьшим pkg padding и font-size числа. */
  .b-hero-vis { gap: 6px; margin-top: 14px; }
  .b-pkg { padding: 8px 10px; }
  .b-pkg-val { font-size: 13px; }

  /* SVG-облако в hero вылезает за пределы → можно скрыть на мобиле,
     overflow:hidden у body его всё равно резал, но память брал */
  .hero-cloud-1 { width: 220px !important; right: -60px; top: -10px; opacity: .35; }
  .hero-cloud-2, .hero-cloud-3 { display: none !important; }
  .tg-cloud-1 { display: none !important; }
}

@media (max-width: 480px) {
  .hero-h1   { line-height: 1.04 !important; }
  .sec-title { line-height: 1.08 !important; }
  .cta-title { line-height: 1.02 !important; }
}

/* ══════════════════════════════════════════════════════════
   POLISH PATCH — центрирование, иконки, FAQ, футер
   ══════════════════════════════════════════════════════════ */

/* hs-head: LIVE слева, лейбл по центру, spacer справа для симметрии */
.hs-head {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
}
.hs-head .hs-live { justify-self: start; }
.hs-head-label {
  text-align: center;
  white-space: nowrap;
}
.hs-head-spacer { display: block; }

/* На очень узких экранах label может не влезть рядом с LIVE — пусть ужмётся */
@media (max-width: 480px) {
  .hs-head { grid-template-columns: auto 1fr; gap: 10px; }
  .hs-head-label { text-align: right; font-size: 7.5px; letter-spacing: 1.2px; }
  .hs-head-spacer { display: none; }
}

/* b-device-icon — старый override (закомментирован — используется новый стиль выше) */
.b-device-icon-OLD-UNUSED {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  background: var(--y-light);
  border-radius: 8px;
  color: var(--y);
  flex-shrink: 0;
}

/* Sparkle в marquee — SVG вместо ✦ */
.marquee .mx {
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  color: rgba(43,99,217,.5);
  vertical-align: middle;
}
.marquee .mx svg { display: block; }

/* nav-pill теперь без CTA → центрируем логотип красивее */
.nav-pill-logo { margin: 0 auto; }
@media (min-width: 769px) {
  /* на десктопе лого слева, links справа от него — без CTA */
  .nav-pill { padding: 0 28px; gap: 36px; }
  .nav-pill-logo { margin: 0; }
}

/* Footer центрирование на мобиле */
@media (max-width: 480px) {
  .footer-main {
    text-align: center;
  }
  .footer-brand { display: flex; flex-direction: column; align-items: center; }
  .footer-brand .footer-logo { justify-content: center; }
  .footer-desc { margin-left: auto; margin-right: auto; }
  .footer-socials { justify-content: center; }
  .footer-col { display: flex; flex-direction: column; align-items: center; }
  .footer-bottom { flex-direction: column; align-items: center; gap: 6px; }
}

/* ══════════════════════════════════════════════════════════
   LEGACY HERO — взят из старого лендоса (полноэкранный + pill card)
   Перебивает прототипные .hero* стили выше за счёт более
   специфичного селектора .landing-screen .hero
   ══════════════════════════════════════════════════════════ */
.landing-screen {
  height: 100svh;
  max-height: 100svh;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.landing-screen .hero {
  flex: 1; min-height: 0;
  display: grid; grid-template-columns: 1fr 400px;
  align-items: center;
  padding: 0 48px 0 0;
  position: relative;
  background: var(--white);
}
.landing-screen .hero::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(43,99,217,.14) 2px, transparent 2px);
  background-size: 28px 28px;
  pointer-events: none; z-index: 0;
}
.landing-screen .hero-left {
  padding: 56px 48px 56px 56px;
  display: flex; flex-direction: column; justify-content: center;
  overflow: hidden; height: 100%;
  position: relative; z-index: 1;
}
.landing-screen .hero-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-h); font-size: 8px; font-weight: 700;
  letter-spacing: 2px; color: var(--mid);
  border: 2px solid var(--ink); padding: 7px 14px;
  width: fit-content; margin-bottom: 32px;
  background: var(--faint);
}
.landing-screen .hero-h1 {
  font-family: var(--font-h);
  font-size: clamp(56px, 7vw, 100px);
  font-weight: 900; line-height: .9 !important; letter-spacing: -3px;
  color: var(--ink); margin-bottom: 28px;
}
.landing-screen .hero-h1 em {
  font-style: normal;
  background: var(--y); padding: 10px 14px 8px;
  display: inline-block; color: #fff; line-height: 1;
}
.landing-screen .hero-h1 em::after { display: none !important; }
.landing-screen .hero-sub {
  font-family: var(--font-h); font-size: 10px; font-weight: 400;
  letter-spacing: 4px; color: #888; margin-bottom: 24px;
}
.landing-screen .hero-desc {
  font-size: 15px; font-weight: 300; line-height: 1.75;
  color: var(--mid); max-width: 480px; margin-bottom: 40px;
}
.landing-screen .hero-cta-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 0; }
.landing-screen .btn-start {
  font-size: 13px; padding: 16px 48px; letter-spacing: 1.5px;
  border: 2px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  background: var(--ink); color: var(--white);
  transition: transform .12s, box-shadow .12s;
  cursor: pointer;
}
.landing-screen .btn-start:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--ink); }
.landing-screen .btn-start:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 var(--ink); }

/* HERO RIGHT — pill card */
.landing-screen .hero-right {
  position: relative; z-index: 1;
  background: var(--ink);
  display: flex; flex-direction: column;
  padding: 36px 32px;
  border-radius: 28px;
  border: 2px solid var(--ink);
  box-shadow: 8px 8px 0 var(--ink);
  align-self: center;
}
.landing-screen .hero-right-label {
  font-family: var(--font-h); font-size: 8px; font-weight: 700;
  letter-spacing: 2px; color: rgba(255,255,255,.3);
  margin-bottom: 32px;
}
.landing-screen .stat-block {
  padding: 24px 0; border-bottom: 1px solid rgba(255,255,255,.08);
  display: flex; align-items: flex-end; justify-content: space-between;
}
.landing-screen .stat-block:last-of-type { border-bottom: none; }
.landing-screen .stat-label {
  font-family: var(--font-h); font-size: 8px; font-weight: 700;
  letter-spacing: 1.5px; color: rgba(255,255,255,.3); margin-bottom: 6px;
}
.landing-screen .stat-row { display: flex; align-items: flex-end; gap: 4px; }
.landing-screen .stat-val {
  font-family: var(--font-h); font-size: 32px; font-weight: 900;
  color: var(--white); line-height: 1;
}
.landing-screen .stat-val.accent { color: var(--y); }
.landing-screen .stat-unit {
  font-family: var(--font-h); font-size: 11px; font-weight: 700;
  color: rgba(255,255,255,.4); margin-bottom: 4px;
}
.landing-screen .stat-badge {
  font-family: var(--font-h); font-size: 7px; font-weight: 700;
  letter-spacing: 1.5px; color: var(--white); background: var(--y);
  padding: 4px 9px; border: 1.5px solid rgba(255,255,255,.2);
  height: fit-content;
}
.landing-screen .hero-sticker {
  margin-top: auto; padding-top: 32px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.landing-screen .sticker-inner {
  font-family: var(--font-h); font-size: 8px; font-weight: 700;
  letter-spacing: 1.5px; color: rgba(255,255,255,.5); line-height: 2;
}
.landing-screen .sticker-inner span { color: var(--y); }
.landing-screen .speed-track {
  height: 3px; background: rgba(255,255,255,.1);
  margin-top: 10px; position: relative; overflow: hidden;
}
.landing-screen .speed-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: var(--y); transition: width .6s cubic-bezier(.4,0,.2,1);
}

/* Marquee — pill style как в старом */
.landing-screen + .marquee,
body > .marquee {
  background: var(--ink); color: var(--y);
  border: 2px solid var(--ink); border-radius: 100px;
  margin: 0 40px 28px;
  padding: 13px 0; overflow: hidden;
  flex-shrink: 0;
}

/* MOBILE — скрываем правый блок, hero на весь экран */
@media (max-width: 960px) {
  .landing-screen { height: 100svh; max-height: 100svh; }
  .landing-screen .hero {
    grid-template-columns: 1fr;
    padding: 0; align-items: stretch;
  }
  .landing-screen .hero-right { display: none; }
  .landing-screen .hero-left {
    padding: 96px 20px 40px;
    height: 100%;
    justify-content: center;
  }
  .landing-screen .hero-h1 {
    font-size: clamp(36px, 11vw, 56px);
    line-height: 1.0 !important;
    margin-bottom: 22px;
  }
  .landing-screen .hero-desc { font-size: 14px; margin-bottom: 28px; }
  .landing-screen + .marquee,
  body > .marquee { margin: 0 14px 14px; }
}

@media (max-width: 480px) {
  .landing-screen .hero-left { padding: 88px 16px 32px; }
  .landing-screen .hero-h1 { font-size: 44px; letter-spacing: -1.5px; line-height: 1.02 !important; }
  .landing-screen .btn-start { width: 100%; padding: 16px 24px; font-size: 12px; }
  .landing-screen .hero-cta-row { width: 100%; }
}

/* ══════════════════════════════════════════════════════════
   SERVERS CAROUSEL + NAV LOGO RIGHT-ALIGN
   ══════════════════════════════════════════════════════════ */

/* Servers carousel — на мобиле горизонтальный свайп с dots */
@media (max-width: 860px) {
  .servers-row {
    grid-template-columns: repeat(3, min(300px, calc(100vw - 80px))) !important;
    gap: 14px !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding: 18px;
    padding: 4px 18px 10px;
    margin: 0 -18px;
    /* -webkit-overflow-scrolling removed — захватывал тач-события страницы */
    scrollbar-width: none;
    /* fade-маска намекает на свайп */
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 90%, transparent 100%);
            mask-image: linear-gradient(to right, #000 0, #000 90%, transparent 100%);
  }
  .servers-row::-webkit-scrollbar { display: none; }
  .poster { scroll-snap-align: start; min-width: 0; }
  .servers-dots { display: flex; }
}
@media (max-width: 480px) {
  .servers-row {
    grid-template-columns: repeat(3, calc(100vw - 56px)) !important;
    margin: 0 -14px;
    padding: 4px 14px 10px;
  }
}

/* Nav-pill: лого справа */
.nav-pill-logo { margin: 0 0 0 auto !important; }
.nav-pill-links-wrap { margin-right: 0; order: 1; }
.nav-pill-logo { order: 2; }
@media (max-width: 768px) {
  /* На мобиле только лого, справа */
  .nav-pill { justify-content: flex-end; }
  .nav-pill-logo { margin-left: auto !important; }
}

/* ══════════════════════════════════════════════════════════
   NAV PILL → справа экрана (не центр)
   ══════════════════════════════════════════════════════════ */
.nav-pill {
  left: auto !important;
  right: 14px !important;
  transform: translateY(calc(-100% - 32px)) !important;
}
.nav-pill.nav-visible { transform: translateY(0) !important; }

@media (max-width: 768px) {
  .nav-pill {
    right: 12px !important;
    transform: translateY(calc(-100% - 32px)) !important;
  }
  .nav-pill.nav-visible { transform: translateY(0) !important; }
}

/* ══════════════════════════════════════════════════════════
   FOOTER MOBILE: Продукт | Документы, Кабинет снизу по центру
   ══════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .footer-main {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "brand   brand"
      "product docs"
      "cabinet cabinet";
    gap: 28px 20px;
    padding: 36px 18px 24px;
    text-align: left;
  }
  .footer-brand        { grid-area: brand; align-items: center; text-align: center; }
  .footer-col-product  { grid-area: product; align-items: flex-start; text-align: left; }
  .footer-col-docs     { grid-area: docs; align-items: flex-end; text-align: right; }
  .footer-col-cabinet  {
    grid-area: cabinet;
    align-items: center; text-align: center;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,.08);
  }
  /* Сбрасываем общий center из предыдущего блока */
  .footer-col-product, .footer-col-docs { display: flex; flex-direction: column; }
}

/* ══════════════════════════════════════════════════════════
   STEPS CAROUSEL (на мобиле — свайп карточек)
   ══════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
  .steps-flow {
    display: grid !important;
    grid-template-columns: repeat(4, min(260px, calc(100vw - 90px))) !important;
    gap: 12px !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding: 18px;
    padding: 4px 18px 10px;
    margin: 0 -18px;
    /* -webkit-overflow-scrolling removed — захватывал тач-события страницы */
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 90%, transparent 100%);
            mask-image: linear-gradient(to right, #000 0, #000 90%, transparent 100%);
  }
  .steps-flow::-webkit-scrollbar { display: none; }
  .step { scroll-snap-align: start; min-width: 0; }
  .steps-dots { display: flex; }
}
@media (max-width: 480px) {
  .steps-flow {
    grid-template-columns: repeat(4, calc(100vw - 56px)) !important;
    margin: 0 -14px;
    padding: 4px 14px 10px;
  }
}

/* ══════════════════════════════════════════════════════════
   BENTO CAROUSEL (на мобиле — свайп карточек "Почему CloudPath?")
   ══════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
  .bento {
    display: grid !important;
    grid-template-columns: repeat(5, min(300px, calc(100vw - 80px))) !important;
    grid-auto-rows: auto !important;
    gap: 12px !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding: 18px;
    padding: 4px 18px 10px;
    margin: 0 -18px;
    /* -webkit-overflow-scrolling removed — захватывал тач-события страницы */
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 90%, transparent 100%);
            mask-image: linear-gradient(to right, #000 0, #000 90%, transparent 100%);
  }
  .bento::-webkit-scrollbar { display: none; }
  .bento-card, .b-hero, .b-2, .b-3, .b-4 {
    scroll-snap-align: start;
    grid-column: auto !important;
    grid-row: auto !important;
    min-width: 0;
  }
  .bento-dots { display: flex; }
}
@media (max-width: 480px) {
  .bento {
    grid-template-columns: repeat(5, calc(100vw - 56px)) !important;
    margin: 0 -14px;
    padding: 4px 14px 10px;
  }
}

/* ══════════════════════════════════════════════════════════
   COMBO BENTO (1 Гбит/с + 0 логов в одной карточке)
   ══════════════════════════════════════════════════════════ */
.b-combo {
  grid-column: span 3;
  grid-row: span 1;
  padding: 0 !important;
  overflow: hidden;
}
.b-combo .b-num {
  padding: 24px 28px 0 28px;
  margin-bottom: 16px;
}
.b-combo-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1.5px solid rgba(0,0,0,.08);
}
.b-combo-cell {
  padding: 24px 28px;
  display: flex; flex-direction: column; gap: 6px;
}
.b-combo-cell:first-child {
  border-right: 1.5px solid rgba(0,0,0,.08);
}
.b-combo-cell .b-bignum {
  font-size: 56px; line-height: 1; letter-spacing: -2px;
  font-family: var(--font-h); font-weight: 900; color: var(--ink);
}
.b-combo-cell .b-bignum sup {
  font-size: 13px; font-weight: 700; vertical-align: super;
  margin-left: 4px; color: var(--mid); letter-spacing: 0;
}
.b-combo-yellow .b-bignum { color: var(--y); }
.b-combo-title {
  font-family: var(--font-h); font-size: 15px; font-weight: 900;
  letter-spacing: -.3px; color: var(--ink); margin-top: 8px;
}
.b-combo-body {
  font-size: 12px; line-height: 1.5; color: var(--mid);
  margin-bottom: 10px;
}
.b-combo-cell .b-tag { margin-top: auto; align-self: flex-start; }

/* Mobile: combo раскладывается вертикально внутри одной kartочки */
@media (max-width: 860px) {
  .b-combo {
    grid-column: auto !important;
    grid-row: auto !important;
  }
  .b-combo-grid { grid-template-columns: 1fr; }
  .b-combo-cell:first-child {
    border-right: none;
    border-bottom: 1.5px solid rgba(0,0,0,.08);
  }
  .b-combo-cell { padding: 20px 22px; }
  .b-combo-cell .b-bignum { font-size: 44px; }
}

/* ══════════════════════════════════════════════════════════
   TRUST STRIP — 5000+ доверяют
   ══════════════════════════════════════════════════════════ */
.trust-strip {
  padding: 36px 32px 8px;
  background: var(--white);
  display: flex; justify-content: center;
}
.trust-strip-inner { max-width: 1240px; width: 100%; display: flex; justify-content: center; }
.trust-pill {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 12px 22px; border-radius: 999px;
  border: 1.5px solid var(--ink);
  background: var(--faint);
  font-family: var(--font-b); font-size: 14px;
  color: var(--mid);
  box-shadow: 3px 3px 0 var(--ink);
}
.trust-text strong {
  color: var(--ink); font-weight: 700;
  font-family: var(--font-h); letter-spacing: -.3px;
}
.trust-avatars {
  display: inline-flex; align-items: center;
}
.trust-avatar {
  width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid var(--white);
  margin-left: -8px;
  flex-shrink: 0;
}
.trust-avatar:first-child { margin-left: 0; }

@media (max-width: 480px) {
  .trust-strip { padding: 28px 16px 0; }
  .trust-pill { font-size: 12px; padding: 10px 16px; gap: 10px; }
  .trust-avatar { width: 22px; height: 22px; }
}

/* Mobile steps: одинаковая высота карточек в карусели */
@media (max-width: 860px) {
  .step { min-height: 220px; }
}
@media (max-width: 480px) {
  .step { min-height: 200px; }
}

/* Bento теперь 4 карточки (b-hero + b-combo + 2x b-3) */
@media (max-width: 860px) {
  .bento {
    grid-template-columns: repeat(4, min(310px, calc(100vw - 80px))) !important;
  }
}
@media (max-width: 480px) {
  .bento {
    grid-template-columns: repeat(4, calc(100vw - 56px)) !important;
  }
}

/* ══════════════════════════════════════════════════════════
   NAV LOGO — "Cloud[Path]" с синим Path, без картинки
   ══════════════════════════════════════════════════════════ */
.nav-pill-logo-img { display: none !important; }
.nav-pill-logo-txt {
  display: block !important;
  font-family: var(--font-h) !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  letter-spacing: -.3px !important;
  color: var(--ink) !important;
}
.nav-pill-logo-txt .logo-path { color: var(--y); }

@media (max-width: 768px) {
  .nav-pill-logo-txt { font-size: 13px !important; }
}

/* ══════════════════════════════════════════════════════════
   BLUE 3D START BUTTON — синяя как accent, ~50% ширины, лево
   ══════════════════════════════════════════════════════════ */
.landing-screen .btn-start {
  background: linear-gradient(180deg, #5C8AE8 0%, #2B63D9 100%) !important;
  color: #fff !important;
  border: 2px solid var(--ink) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.25) inset,
    0 4px 0 #1a3f8f,
    6px 6px 0 var(--ink) !important;
  font-size: 13px;
  padding: 18px 36px;
  letter-spacing: 1.5px;
  position: relative;
  transition: transform .12s, box-shadow .12s, filter .12s;
}
.landing-screen .btn-start:hover {
  transform: translate(-2px, -3px);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.3) inset,
    0 6px 0 #1a3f8f,
    8px 8px 0 var(--ink) !important;
  filter: brightness(1.05);
}
.landing-screen .btn-start:active {
  transform: translate(2px, 4px);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.2) inset,
    0 0 0 #1a3f8f,
    1px 1px 0 var(--ink) !important;
}

.landing-screen .hero-cta-row {
  width: 100%; max-width: 480px;
}
.landing-screen .btn-start { width: 60%; min-width: 240px; justify-content: center; }

@media (max-width: 480px) {
  .landing-screen .hero-cta-row { max-width: none; width: 100%; }
  .landing-screen .btn-start {
    width: 70%; min-width: 0;
    padding: 16px 24px; font-size: 12px;
  }
}

/* ══════════════════════════════════════════════════════════
   HERO TRUST INLINE — 5000+ + аватарки внутри hero
   ══════════════════════════════════════════════════════════ */
.hero-trust-inline {
  display: flex; align-items: center; gap: 14px;
  margin-top: 28px;
  padding: 10px 18px 10px 14px;
  background: var(--white);
  border: 2px solid var(--ink);
  border-radius: 999px;
  box-shadow: 4px 4px 0 var(--ink);
  width: fit-content;
  max-width: 100%;
}
.hero-trust-inline .trust-avatars {
  display: inline-flex; align-items: center;
  margin: 0;
}
.hero-trust-inline .trust-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  border: 2px solid var(--white);
  margin-left: -10px;
  background: var(--white);
  overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(0,0,0,.15);
}
.hero-trust-inline .trust-avatar:first-child { margin-left: 0; }
.hero-trust-inline .trust-avatar svg { display: block; }
.hero-trust-inline .hero-trust-text {
  font-family: var(--font-b); font-size: 13px;
  color: var(--mid); white-space: nowrap;
}
.hero-trust-inline .hero-trust-text strong {
  color: var(--ink); font-weight: 700;
  font-family: var(--font-h); letter-spacing: -.3px;
  font-size: 14px;
}

@media (max-width: 480px) {
  .hero-trust-inline {
    gap: 10px; padding: 8px 14px 8px 10px;
    margin-top: 22px;
  }
  .hero-trust-inline .trust-avatar { width: 28px; height: 28px; }
  .hero-trust-inline .hero-trust-text { font-size: 11.5px; white-space: normal; }
  .hero-trust-inline .hero-trust-text strong { font-size: 12.5px; }
}

/* Forced width override — btn-start не должен растягиваться flex-родителем */
.landing-screen .hero-cta-row {
  display: flex; align-items: center; justify-content: flex-start;
}
.landing-screen .btn-start {
  width: auto !important;
  align-self: flex-start;
}
@media (max-width: 480px) {
  .landing-screen .btn-start {
    width: 65% !important;
    min-width: 220px;
    max-width: 320px;
    padding: 18px 24px !important;
    font-size: 12px;
  }
}

/* ══════════════════════════════════════════════════════════
   BENTO STACK — 2 раздельные карточки в одной "ячейке"
   Десктоп: участвуют в grid как отдельные элементы (display:contents)
   Мобила: один carousel-слайд с двумя карточками одна над другой
   ══════════════════════════════════════════════════════════ */
.bento-stack { display: contents; }

@media (max-width: 860px) {
  .bento-stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
    scroll-snap-align: start;
    min-width: 0;
  }
  .bento-stack .bento-card {
    grid-column: auto !important;
    grid-row: auto !important;
    scroll-snap-align: none;
    min-width: 0;
  }
  /* Bento теперь 4 слайда: hero, stack, compare, devices */
  .bento {
    grid-template-columns:
      min(310px, calc(100vw - 80px))
      min(310px, calc(100vw - 80px))
      min(310px, calc(100vw - 80px))
      min(310px, calc(100vw - 80px)) !important;
  }
}
@media (max-width: 480px) {
  .bento {
    grid-template-columns:
      calc(100vw - 56px)
      calc(100vw - 56px)
      calc(100vw - 56px)
      calc(100vw - 56px) !important;
  }
}

/* Старые правила b-combo больше не нужны — теряют силу через display:contents */
.b-combo { display: none; }

/* ══════════════════════════════════════════════════════════
   FINAL FIXES — pill симметрия, stack flex, carousel center
   ══════════════════════════════════════════════════════════ */

/* 1. Nav-pill: симметричный padding теперь когда только лого */
.nav-pill {
  padding: 0 22px !important;
  gap: 28px;
}
@media (max-width: 768px) {
  .nav-pill {
    padding: 0 22px !important;
    gap: 0;
  }
  .nav-pill-logo { margin: 0 auto !important; }
}

/* 2. Marquee внутри landing-screen — должен быть pill, не на всю ширину */
.landing-screen > .marquee {
  margin: 0 40px 24px;
  border-radius: 100px;
  flex-shrink: 0;
  background: var(--ink); color: var(--y);
  border: 2px solid var(--ink);
  padding: 13px 0; overflow: hidden;
}
@media (max-width: 860px) {
  .landing-screen > .marquee { margin: 0 14px 18px; }
}
@media (max-width: 480px) {
  .landing-screen > .marquee { margin: 0 14px 16px; }
}

/* 3. Bento-stack: 2 карточки занимают 50/50 высоты слайда */
@media (max-width: 860px) {
  .bento-stack {
    height: 100%;
  }
  .bento-stack > .bento-card {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }
  /* Bento — высота слайдов одинаковая */
  .bento { align-items: stretch !important; }
  .bento > .bento-card, .bento > .bento-stack {
    height: auto;
  }
}

/* 4. Carousel — центрировать активный слайд */
@media (max-width: 860px) {
  .servers-row > .poster,
  .bento > .bento-card,
  .bento > .bento-stack,
  .steps-flow > .step,
  .pricing-grid > .plan {
    scroll-snap-align: center !important;
  }
  .servers-row, .bento, .steps-flow, .pricing-grid {
    scroll-padding-inline: 0 !important;
    padding-inline: calc((100vw - min(310px, calc(100vw - 80px))) / 2) !important;
    margin-inline: 0 !important;
  }
}
@media (max-width: 480px) {
  .servers-row, .bento, .steps-flow, .pricing-grid {
    padding-inline: 28px !important;
  }
}

/* ══════════════════════════════════════════════════════════
   CAROUSEL FIXES — убрать fade-маску и заблокировать вертикальный скролл
   ══════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
  .servers-row, .bento, .steps-flow, .pricing-grid {
    /* Убираем белое свечение справа (mask) */
    -webkit-mask-image: none !important;
            mask-image: none !important;
    /* Не даём overscroll-цепляться за body */
    overscroll-behavior-x: contain;
    overscroll-behavior-y: auto;
    overflow-y: hidden;
  }
}

/* Discount badge у тарифа 6м (рядом с perMonth) */
.plan-month .plan-discount {
  display: inline-block; margin-left: 8px;
  font-family: var(--font-h); font-weight: 700;
  font-size: 10px; letter-spacing: .4px;
  color: var(--y); background: var(--y-light);
  padding: 2px 7px; border-radius: 999px;
}

/* ══════════════════════════════════════════════════════════
   BENTO CONTENT DISTRIBUTION — нет пустоты внизу карточек
   ══════════════════════════════════════════════════════════ */
.bento-card {
  display: flex;
  flex-direction: column;
  border-radius: 22px;
  overflow: hidden;
}
.bento-card > .b-num { flex-shrink: 0; }
.bento-card > .b-title { flex-shrink: 0; }
.bento-card > .b-body { flex-shrink: 0; }

/* b-hero — vis-блок занимает доступное пространство снизу */
.b-hero { border-radius: 22px; }
.b-hero .b-hero-vis {
  margin-top: auto;
}
.b-hero .b-tag {
  margin-top: 18px;
  align-self: flex-start;
}

/* Compare card — таблица растягивается */
.bento-card.b-3 .b-compare {
  flex: 1; margin-top: 14px;
  display: flex; flex-direction: column;
}
.bento-card.b-3 .b-row {
  flex: 1;
  border-top: 1.5px solid rgba(0,0,0,.08);
  padding: 10px 0;
}
.bento-card.b-3 .b-row:last-child {
  border-bottom: 1.5px solid rgba(0,0,0,.08);
}

/* Devices карточка — список занимает низ */
.bento-card.b-3 .b-devices {
  margin-top: auto;
}
.bento-card.b-3 > .b-tag {
  margin-top: 14px;
  align-self: flex-start;
}

/* Единый радиус для всех bento-карточек (одинаковые углы) */
.b-hero, .b-2, .b-3, .b-4, .bento-card { border-radius: 22px !important; }

/* Стек-карточек в одном слайде тоже единые углы */
.bento-stack > .bento-card { border-radius: 22px !important; }

/* Plan-featured (тариф ХИТ) — тот же радиус */
.plan, .plan-featured { border-radius: 22px !important; }

/* Force distribution — b-hero-vis к низу, compare растягивается */
.b-hero .b-hero-vis { margin-top: auto !important; }
.b-hero .b-tag { margin-top: 18px !important; }
.bento-card.b-3 .b-compare { flex: 1 !important; }
.bento-card.b-3 .b-devices { margin-top: auto !important; }

/* Mobile: фикс min-height чтобы content распределялся */
@media (max-width: 860px) {
  .bento > .bento-card,
  .bento-stack { min-height: 497px; }
}

/* ══════════════════════════════════════════════════════════
   B-DARK card (Compare) — чёрный фон, пилы для CloudPath
   ══════════════════════════════════════════════════════════ */
.bento-card.b-dark {
  background: var(--ink);
  color: var(--white);
}
.bento-card.b-dark .b-num   { color: var(--y-soft); }
.bento-card.b-dark .b-title { color: var(--white); }
.bento-card.b-dark .b-body  { color: rgba(255,255,255,.55); }
.bento-card.b-dark .b-tag   { background: var(--y); border-color: var(--y); color: var(--white); }

/* Compare dark table */
.b-compare-dark {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 14px;
  flex: 1;
}
.b-cmp-head {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  padding: 0 0 8px;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.b-cmp-label-mid   { font-family: var(--font-h); font-size: 8px; font-weight: 700; letter-spacing: 1.5px; color: rgba(255,255,255,.35); text-transform: uppercase; }
.b-cmp-label-cp    { font-family: var(--font-h); font-size: 8px; font-weight: 700; letter-spacing: 1.5px; color: var(--y); text-transform: uppercase; text-align: center; }
.b-cmp-label-other { font-family: var(--font-h); font-size: 8px; font-weight: 700; letter-spacing: 1.5px; color: rgba(255,255,255,.35); text-transform: uppercase; text-align: right; }
.b-cmp-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.b-cmp-row:last-child { border-bottom: none; }
.b-cmp-param { font-size: 12px; color: rgba(255,255,255,.55); }
.ok-pill {
  justify-self: center;
  display: inline-block;
  padding: 4px 10px;
  border-radius: 100px;
  background: var(--y);
  color: #0D0D0D;
  font-family: var(--font-h);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .5px;
  white-space: nowrap;
}
.b-cmp-no {
  justify-self: end;
  font-family: var(--font-h);
  font-size: 9px;
  font-weight: 700;
  color: rgba(255,255,255,.45);
  text-align: right;
}

/* ══════════════════════════════════════════════════════════
   CAROUSEL: карточки pan-y — вертикаль идёт на страницу,
   горизонталь остаётся карусели
   ══════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
  .bento,
  .servers-row,
  .steps-flow,
  .pricing-grid {
    overscroll-behavior-x: contain;
  }

  .bento-card,
  .bento-stack,
  .poster,
  .step,
  .plan {
    user-select: none;
  }
}