/* =====================================================================
   5G Russia — 5grussia.com
   Стекло — рецепт из rk-project (glass.css ← «Рыбалка»): заливка 60 % (тёмная 56 %),
   blur(22px) saturate(180%), мягкая тень, кант 1 px через ::before с маской —
   светится только в левом верхнем и правом нижнем углу (градиент 135°).
   ⚠ у стеклянного элемента ::before занят кантом.
   ===================================================================== */

@font-face { font-family:'Onest'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url(fonts/onest-cyr.woff2) format('woff2'); unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family:'Onest'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url(fonts/onest-lat.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family:'Unbounded'; font-style:normal; font-weight:500 800; font-display:swap;
  src:url(fonts/unbounded-cyr.woff2) format('woff2'); unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family:'Unbounded'; font-style:normal; font-weight:500 800; font-display:swap;
  src:url(fonts/unbounded-lat.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---------------- токены ---------------- */
:root {
  color-scheme: light;
  --bg:#eef1f7; --ink:#0c1222; --ink2:#465066; --ink3:#7b8498;
  --surf:#ffffff; --surf2:#f5f7fb; --line:rgba(12,18,34,.08); --fill:rgba(120,120,128,.12);
  --acc:#2f6bff; --acc-ink:#fff; --ok:#10a760; --bad:#e5383b; --mid:#e08a00;
  --grad:linear-gradient(120deg,#00c6a7 0%,#2f6bff 48%,#8b5cf6 100%);
  --b1:#5fe3cf; --b2:#7ea4ff; --b3:#c6a8ff; --b4:#ffb3c6; --b-op:.75;

  --lg-fill:color-mix(in srgb, var(--surf) 60%, transparent);
  --lg-sheet:color-mix(in srgb, var(--surf2) 84%, transparent);
  --lg-blur:blur(22px) saturate(180%);
  --lg-rim1:rgba(255,255,255,.95);
  --lg-rim2:rgba(255,255,255,.28);
  --lg-sh:0 10px 34px rgba(0,0,0,.13), 0 0 0 .5px rgba(0,0,0,.05);
  --lg-sh-s:0 6px 20px rgba(0,0,0,.10), 0 0 0 .5px rgba(0,0,0,.05);
  --lg-pill:rgba(120,120,128,.17);
  --lg-hi:rgba(255,255,255,.32);
  --shine:rgba(255,255,255,.55);

  --font:'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --disp:'Unbounded', 'Onest', -apple-system, 'Segoe UI', sans-serif;
  --mono:ui-monospace, 'SF Mono', 'Cascadia Mono', Consolas, monospace;
  --ease:cubic-bezier(.22,1,.36,1);
  --spring:cubic-bezier(.34,1.42,.64,1);
  --r:28px;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  color-scheme: dark;
  --bg:#060810; --ink:#eef2fa; --ink2:#a7b0c3; --ink3:#6f798e;
  --surf:#151821; --surf2:#1c2030; --line:rgba(255,255,255,.08); --fill:rgba(255,255,255,.08);
  --acc:#5b8cff;
  --b1:#0c9d92; --b2:#2747d6; --b3:#6a34d4; --b4:#a52c66; --b-op:.55;
  --lg-fill:color-mix(in srgb, var(--surf2) 56%, transparent);
  --lg-sheet:color-mix(in srgb, var(--surf) 86%, transparent);
  --lg-rim1:rgba(255,255,255,.36); --lg-rim2:rgba(255,255,255,.07);
  --lg-sh:0 10px 34px rgba(0,0,0,.42); --lg-sh-s:0 6px 20px rgba(0,0,0,.38);
  --lg-pill:rgba(255,255,255,.12); --lg-hi:rgba(255,255,255,.07); --shine:rgba(255,255,255,.12);
} }
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg:#060810; --ink:#eef2fa; --ink2:#a7b0c3; --ink3:#6f798e;
  --surf:#151821; --surf2:#1c2030; --line:rgba(255,255,255,.08); --fill:rgba(255,255,255,.08);
  --acc:#5b8cff;
  --b1:#0c9d92; --b2:#2747d6; --b3:#6a34d4; --b4:#a52c66; --b-op:.55;
  --lg-fill:color-mix(in srgb, var(--surf2) 56%, transparent);
  --lg-sheet:color-mix(in srgb, var(--surf) 86%, transparent);
  --lg-rim1:rgba(255,255,255,.36); --lg-rim2:rgba(255,255,255,.07);
  --lg-sh:0 10px 34px rgba(0,0,0,.42); --lg-sh-s:0 6px 20px rgba(0,0,0,.38);
  --lg-pill:rgba(255,255,255,.12); --lg-hi:rgba(255,255,255,.07); --shine:rgba(255,255,255,.12);
}

/* ---------------- база ---------------- */
*, *::before, *::after { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:96px; -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--bg); color:var(--ink); font:450 16px/1.55 var(--font);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:hidden; transition:background-color .5s var(--ease), color .5s var(--ease); }
img, svg { display:block; }
a { color:inherit; text-decoration:none; }
button { font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; -webkit-tap-highlight-color:transparent; }
a { -webkit-tap-highlight-color:transparent; }
code { font-family:var(--mono); font-size:.92em; padding:.1em .4em; border-radius:7px; background:var(--fill); }
[hidden] { display:none !important; }
::selection { background:color-mix(in srgb, var(--acc) 30%, transparent); }
:focus-visible { outline:2.5px solid var(--acc); outline-offset:3px; border-radius:12px; }

.ic { width:20px; height:20px; flex:none; }
.wrap { width:100%; max-width:1180px; margin-inline:auto; padding-inline:20px; }
.wrap.narrow { max-width:820px; }
.display { font-family:var(--disp); font-weight:700; letter-spacing:-.02em; line-height:1.06; }
.muted { color:var(--ink2); }
.small { font-size:14px; }
.grad-text { background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
  background-size:200% 100%; animation:gradShift 8s ease-in-out infinite alternate; }
@keyframes gradShift { to { background-position:100% 0; } }

/* ---------------- стекло ---------------- */
.glass { position:relative; background:var(--lg-fill);
  -webkit-backdrop-filter:var(--lg-blur); backdrop-filter:var(--lg-blur); box-shadow:var(--lg-sh-s); }
.glass::before { content:""; position:absolute; z-index:2; inset:0; padding:1px; border-radius:inherit; pointer-events:none;
  background:linear-gradient(135deg, var(--lg-rim1) 0%, var(--lg-rim2) 28%, var(--lg-rim2) 68%, var(--lg-rim1) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; }

/* блик за курсором (у карточек .shine) */
.shine { overflow:hidden; }
.shine::after { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:1; opacity:0;
  background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%), var(--shine), transparent 60%);
  transition:opacity .45s var(--ease); }
.shine:hover::after { opacity:1; }

/* ---------------- фон-сияние ---------------- */
.aurora { position:fixed; inset:-10vmax; z-index:-1; pointer-events:none; overflow:hidden; }
.aurora .b { position:absolute; width:62vmax; height:62vmax; border-radius:50%; opacity:var(--b-op); will-change:transform;
  transition:opacity 1s var(--ease); }
.b1 { background:radial-gradient(circle at 50% 50%, var(--b1) 0%, transparent 62%); left:-8vmax; top:-6vmax; animation:drift1 34s ease-in-out infinite alternate; }
.b2 { background:radial-gradient(circle at 50% 50%, var(--b2) 0%, transparent 62%); right:-14vmax; top:4vmax; animation:drift2 40s ease-in-out infinite alternate; }
.b3 { background:radial-gradient(circle at 50% 50%, var(--b3) 0%, transparent 62%); left:16vmax; bottom:-22vmax; animation:drift3 46s ease-in-out infinite alternate; }
.b4 { background:radial-gradient(circle at 50% 50%, var(--b4) 0%, transparent 62%); right:6vmax; bottom:-10vmax; width:46vmax; height:46vmax; animation:drift4 38s ease-in-out infinite alternate; opacity:calc(var(--b-op) * .7); }
@keyframes drift1 { to { transform:translate3d(18vmax, 14vmax, 0) scale(1.15); } }
@keyframes drift2 { to { transform:translate3d(-20vmax, 18vmax, 0) scale(.9); } }
@keyframes drift3 { to { transform:translate3d(14vmax, -20vmax, 0) scale(1.1); } }
@keyframes drift4 { to { transform:translate3d(-24vmax, -8vmax, 0) scale(1.2); } }
.grain { position:absolute; inset:0; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
/* отдых: нет действий — сияние замирает, стекло не пересчитывает размытие каждый кадр */
html.rest .aurora .b, html.rest .rings i, html.rest .grad-text, html.rest .pc-eq i, html.rest .live-dot::after { animation-play-state:paused; }
html.hidden-tab .aurora .b { animation-play-state:paused; }

/* ---------------- верхнее меню ---------------- */
.topnav { position:fixed; z-index:50; top:calc(14px + env(safe-area-inset-top, 0px)); left:50%; translate:-50% 0;
  width:min(1140px, calc(100% - 32px)); height:62px; border-radius:31px; padding:0 8px 0 10px;
  display:flex; align-items:center; gap:12px; box-shadow:var(--lg-sh);
  transition:translate .5s var(--ease), height .45s var(--ease), box-shadow .45s var(--ease); }
html.scrolled .topnav { height:56px; }
html.nav-hide .topnav { translate:-50% calc(-100% - 30px); }
.brand { display:flex; align-items:center; gap:10px; padding:6px 10px 6px 4px; border-radius:24px; flex:none; position:relative; z-index:3; }
.brand-mark svg { width:36px; height:36px; transition:transform .6s var(--spring); }
.brand:hover .brand-mark svg { transform:rotate(-8deg) scale(1.06); }
.brand-name { font-family:var(--disp); font-weight:700; font-size:17px; letter-spacing:-.01em; }
.navlinks { position:relative; display:flex; align-items:center; gap:2px; margin-inline:auto; z-index:3; }
.navlinks a { position:relative; z-index:1; padding:9px 15px; border-radius:22px; font-size:15px; font-weight:550; color:var(--ink2);
  transition:color .3s var(--ease); white-space:nowrap; }
.navlinks a:hover, .navlinks a.on { color:var(--ink); }
.nav-ind { position:absolute; left:0; top:50%; height:40px; width:var(--w,0); translate:var(--x,0) -50%;
  border-radius:20px; background:var(--lg-pill); opacity:0; pointer-events:none;
  transition:translate .55s var(--spring), width .55s var(--spring), opacity .35s var(--ease); }
.navlinks.has .nav-ind { opacity:1; }
.nav-ind.jelly { animation:jelly .55s var(--ease); }
@keyframes jelly { 0%{scale:1 1} 30%{scale:1.12 .82} 60%{scale:.96 1.06} 100%{scale:1 1} }
.nav-right { display:flex; align-items:center; gap:8px; flex:none; position:relative; z-index:3; }

.circ { width:44px; height:44px; border-radius:50%; display:grid; place-items:center; flex:none;
  transition:transform .35s var(--spring), box-shadow .3s; }
.circ:hover { transform:scale(1.06); }
.circ:active { transform:scale(.92); box-shadow:var(--lg-sh-s), inset 0 0 0 999px var(--lg-hi); }
.circ .ic { position:relative; z-index:3; }
#themeBtn .ic { position:absolute; inset:0; margin:auto; transition:transform .6s var(--spring), opacity .35s; }
#themeBtn .ic-moon { opacity:0; transform:rotate(-90deg) scale(.5); }
html.is-dark #themeBtn .ic-sun { opacity:0; transform:rotate(90deg) scale(.5); }
html.is-dark #themeBtn .ic-moon { opacity:1; transform:none; }

.want-btn { position:relative; display:inline-flex; align-items:center; gap:7px; height:46px; padding:0 20px 0 16px; border-radius:23px;
  background:var(--grad); background-size:160% 100%; color:#fff; font-weight:650; font-size:15.5px;
  box-shadow:0 6px 22px color-mix(in srgb, #2f6bff 45%, transparent), inset 0 1px 0 rgba(255,255,255,.45);
  transition:transform .35s var(--spring), background-position .6s var(--ease), box-shadow .35s; }
.want-btn:hover { transform:translateY(-1px) scale(1.03); background-position:100% 0; box-shadow:0 10px 30px color-mix(in srgb, #8b5cf6 50%, transparent), inset 0 1px 0 rgba(255,255,255,.45); }
.want-btn:active { transform:scale(.95); }
.want-btn .ic { width:18px; height:18px; }

/* ---------------- нижняя панель (телефон) ---------------- */
.tabbar { display:none; }
@media (max-width: 900px) {
  .navlinks { display:none; }
  .topnav { height:56px; width:calc(100% - 24px); top:calc(10px + env(safe-area-inset-top, 0px)); justify-content:space-between; }
  .topnav .want-btn { height:42px; padding:0 16px 0 13px; font-size:15px; }
  .circ { width:42px; height:42px; }
  .tabbar { display:flex; position:fixed; z-index:50; left:50%; translate:-50% 0; bottom:calc(12px + env(safe-area-inset-bottom, 0px));
    width:min(430px, calc(100% - 24px)); height:66px; padding:4px; border-radius:33px; box-shadow:var(--lg-sh); touch-action:manipulation;
    transition:translate .5s var(--ease), scale .5s var(--ease); }
  html.tb-small .tabbar { scale:.86; translate:-50% 8px; }
  .tab { position:relative; z-index:3; flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
    font-size:10.5px; font-weight:600; color:var(--ink2); border-radius:29px; transition:color .3s, transform .3s var(--spring); }
  .tab .ic { width:23px; height:23px; transition:transform .45s var(--spring); }
  .tab.on { color:var(--acc); }
  .tab.on .ic { transform:translateY(-1px) scale(1.08); }
  .tab:active { transform:scale(.92); }
  .tab-want { color:var(--ink); }
  .tw-orb { width:40px; height:30px; border-radius:15px; display:grid; place-items:center; background:var(--grad); color:#fff;
    box-shadow:0 4px 14px color-mix(in srgb, #2f6bff 45%, transparent), inset 0 1px 0 rgba(255,255,255,.4); }
  .tw-orb .ic { width:19px; height:19px; }
  .tab-ind { position:absolute; z-index:2; top:4px; left:0; height:58px; width:var(--w,0); translate:var(--x,0) 0; border-radius:29px;
    background:var(--lg-pill); opacity:0; transition:translate .55s var(--spring), width .55s var(--spring), opacity .3s; }
  .tabbar.has .tab-ind { opacity:1; }
  .tab-ind.jelly { animation:jelly .55s var(--ease); }
  html { scroll-padding-top:80px; }
  body { padding-bottom:calc(84px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 380px) { .brand-name { font-size:15px; } .topnav .want-btn span { display:none; } .topnav .want-btn { padding:0 12px; } }

/* ---------------- появление при прокрутке ---------------- */
.js [data-reveal] { opacity:0; translate:0 28px; scale:.985; filter:blur(8px);
  transition:opacity .9s var(--ease) var(--d,0s), translate 1s var(--ease) var(--d,0s), scale 1s var(--ease) var(--d,0s), filter .9s var(--ease) var(--d,0s); }
.js [data-reveal].in { opacity:1; translate:0 0; scale:1; filter:none; }
/* стекло под filter теряет backdrop-filter в Chrome — после появления filter снимаем полностью (.in → none) */

/* ---------------- главный экран ---------------- */
.hero { position:relative; min-height:100svh; display:flex; flex-direction:column; justify-content:center; padding-block:120px 48px; }
.hero-grid { display:grid; grid-template-columns:1.08fr .92fr; gap:40px; align-items:center; }
.eyebrow { display:inline-flex; align-items:center; gap:10px; padding:9px 14px 9px 12px; border-radius:22px; font-size:14px; font-weight:550; color:var(--ink2); margin-bottom:26px; transition:transform .35s var(--spring), color .3s; }
.eyebrow:hover { transform:translateY(-2px); color:var(--ink); }
.eyebrow .ic { width:16px; height:16px; transition:transform .35s var(--spring); }
.eyebrow:hover .ic { transform:translateX(3px); }
.live-dot { position:relative; width:8px; height:8px; border-radius:50%; background:var(--ok); flex:none; }
.live-dot::after { content:""; position:absolute; inset:-4px; border-radius:50%; border:2px solid var(--ok); animation:ping 2.2s var(--ease) infinite; }
@keyframes ping { 0%{ transform:scale(.4); opacity:.9 } 80%,100%{ transform:scale(1.6); opacity:0 } }
.h-hero { font-size:clamp(44px, 7.4vw, 92px); margin:0 0 24px; }
.h-hero .grad-text { padding-right:.04em; }
.lead { font-size:clamp(17px, 1.6vw, 20px); line-height:1.55; color:var(--ink2); max-width:540px; margin:0 0 32px; }
.cta-row { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.cta-row.center { justify-content:center; }

.btn-hero { position:relative; overflow:hidden; display:inline-flex; align-items:center; gap:10px; height:60px; padding:0 30px 0 24px; border-radius:30px;
  background:var(--grad); background-size:170% 100%; color:#fff; font-family:var(--disp); font-weight:700; font-size:18px; letter-spacing:-.01em;
  box-shadow:0 12px 36px color-mix(in srgb, #2f6bff 42%, transparent), inset 0 1px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.12);
  transition:transform .45s var(--spring), box-shadow .45s var(--ease), background-position .8s var(--ease); }
.btn-hero .ic { width:22px; height:22px; position:relative; z-index:1; }
.btn-hero span:not(.bh-shine) { position:relative; z-index:1; }
.btn-hero:hover { transform:translateY(-2px) scale(1.03); background-position:100% 0;
  box-shadow:0 18px 46px color-mix(in srgb, #8b5cf6 50%, transparent), inset 0 1px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.12); }
.btn-hero:active { transform:scale(.96); }
.bh-shine { position:absolute; inset:0; background:linear-gradient(105deg, transparent 30%, rgba(255,255,255,.45) 48%, transparent 66%);
  translate:-110% 0; animation:sweep 4.5s var(--ease) 1.6s infinite; }
@keyframes sweep { 0% { translate:-110% 0 } 28%,100% { translate:110% 0 } }
.btn-glass { display:inline-flex; align-items:center; gap:9px; height:60px; padding:0 26px; border-radius:30px; font-weight:600; font-size:16.5px;
  transition:transform .45s var(--spring), box-shadow .3s; }
.btn-glass:hover { transform:translateY(-2px); }
.btn-glass:active { transform:scale(.96); box-shadow:var(--lg-sh-s), inset 0 0 0 999px var(--lg-hi); }
.btn-glass .ic { position:relative; z-index:3; }

.trust { list-style:none; padding:0; margin:28px 0 0; display:flex; flex-wrap:wrap; gap:8px 22px; color:var(--ink2); font-size:14.5px; font-weight:550; }
.trust li { display:flex; align-items:center; gap:7px; }
.trust .ic { width:18px; height:18px; color:var(--acc); }

/* телефон-иллюстрация */
.hero-visual { position:relative; display:grid; place-items:center; min-height:640px; perspective:1400px; }
.rings { position:absolute; inset:0; display:grid; place-items:center; pointer-events:none; }
.rings i { position:absolute; width:440px; height:440px; border-radius:50%; border:1.5px solid color-mix(in srgb, var(--acc) 35%, transparent);
  opacity:0; animation:ring 6s var(--ease) infinite; }
.rings i:nth-child(2) { animation-delay:2s; } .rings i:nth-child(3) { animation-delay:4s; }
@keyframes ring { 0%{ transform:scale(.55); opacity:0 } 15%{ opacity:.9 } 100%{ transform:scale(1.5); opacity:0 } }
.phone { position:relative; width:300px; height:620px; border-radius:52px; padding:11px;
  background:linear-gradient(145deg, #2a2d36, #0d0f14 40%, #262932); box-shadow:0 40px 90px -20px rgba(10,20,60,.45), 0 0 0 1px rgba(255,255,255,.06) inset, 0 0 0 2px #3a3e48;
  transform:rotateY(var(--ry,-12deg)) rotateX(var(--rx,6deg)); transform-style:preserve-3d; transition:transform .9s var(--ease); }
.phone-in { position:relative; height:100%; border-radius:42px; overflow:hidden; padding:14px 14px 0; background:#f2f2f7; color:#0c1222; transition:background .5s, color .5s; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .phone-in { background:#000; color:#f2f2f7; } }
:root[data-theme="dark"] .phone-in { background:#000; color:#f2f2f7; }
.island { position:absolute; top:11px; left:50%; translate:-50% 0; width:96px; height:28px; border-radius:16px; background:#000; z-index:2; }
.sbar { display:flex; justify-content:space-between; align-items:center; height:28px; padding:0 14px 0 18px; font-size:14px; font-weight:650; }
.sb-right { display:flex; align-items:center; gap:5px; }
.sb-bars { display:flex; align-items:flex-end; gap:1.5px; height:11px; }
.sb-bars i { width:3px; border-radius:1px; background:currentColor; opacity:.25; transition:opacity .4s; }
.sb-bars i:nth-child(1){height:4px} .sb-bars i:nth-child(2){height:6px} .sb-bars i:nth-child(3){height:8.5px} .sb-bars i:nth-child(4){height:11px}
.phone.s1 .sb-bars i { opacity:1; transition-delay:calc(var(--i) * 90ms); }
.sb-net { position:relative; display:inline-grid; font-size:13px; font-weight:750; min-width:24px; }
.sb-net > span, .ph-val > span { grid-area:1/1; transition:opacity .45s var(--ease), translate .6s var(--spring), filter .45s; }
.net-new, .pv-new { opacity:0; translate:0 70%; filter:blur(3px); }
.phone.s3 .net-old, .phone.s2 .pv-old { opacity:0; translate:0 -70%; filter:blur(3px); }
.phone.s3 .net-new, .phone.s2 .pv-new { opacity:1; translate:0 0; filter:none; }
.phone.s3 .net-new { background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.sb-wifi { width:15px; height:15px; }
.sb-bat { width:24px; height:12px; border-radius:4px; border:1.3px solid currentColor; opacity:.9; padding:1.3px; position:relative; }
.sb-bat::after { content:""; position:absolute; right:-3.5px; top:3.5px; width:2px; height:3.5px; border-radius:0 1px 1px 0; background:currentColor; }
.sb-bat i { display:block; height:100%; width:78%; border-radius:2px; background:currentColor; }
.ph-title { font-family:var(--font); font-weight:750; font-size:28px; letter-spacing:-.02em; margin:34px 6px 14px; }
.ph-cap { font-size:12px; letter-spacing:.04em; opacity:.5; margin:18px 14px 6px; }
.ph-group { border-radius:14px; overflow:hidden; background:#fff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ph-group { background:#1c1c1e; } }
:root[data-theme="dark"] .ph-group { background:#1c1c1e; }
.ph-row { display:flex; justify-content:space-between; align-items:center; min-height:46px; padding:0 14px; font-size:15px; gap:10px; }
.ph-row + .ph-row { box-shadow:inset 0 .5px 0 rgba(128,128,140,.3); }
.ph-val { display:inline-grid; justify-items:end; color:rgba(128,128,140,1); font-size:15px; }
.ph-val .pv-new { color:#0a84ff; font-weight:600; }
.ph-dim { opacity:.5; }
.sw { position:relative; width:50px; height:30px; border-radius:15px; background:rgba(120,120,128,.25); transition:background .45s var(--ease); flex:none; }
.sw i { position:absolute; top:2px; left:2px; width:26px; height:26px; border-radius:50%; background:#fff; box-shadow:0 3px 8px rgba(0,0,0,.18), 0 0 0 .5px rgba(0,0,0,.04);
  transition:translate .55s var(--spring), width .3s var(--ease); }
.sw.on { background:#34c759; }
.sw.on i { translate:20px 0; }
.ph-call { position:absolute; left:12px; right:12px; bottom:18px; display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:22px;
  background:rgba(30,32,40,.82); color:#fff; -webkit-backdrop-filter:blur(20px) saturate(180%); backdrop-filter:blur(20px) saturate(180%);
  opacity:0; translate:0 24px; scale:.94; transition:opacity .6s var(--ease), translate .8s var(--spring), scale .8s var(--spring); }
.phone.s4 .ph-call { opacity:1; translate:0 0; scale:1; }
.pc-ic { width:38px; height:38px; border-radius:50%; display:grid; place-items:center; background:#34c759; flex:none; }
.pc-ic .ic { width:19px; height:19px; }
.pc-t { display:flex; flex-direction:column; line-height:1.25; flex:1; }
.pc-t b { font-size:14.5px; } .pc-t small { font-size:12px; opacity:.65; }
.pc-eq { display:flex; align-items:center; gap:2.5px; height:22px; }
.pc-eq i { width:3px; height:100%; border-radius:2px; background:#34c759; transform-origin:center; animation:eq 1.1s ease-in-out infinite; }
.pc-eq i:nth-child(2){animation-delay:-.2s} .pc-eq i:nth-child(3){animation-delay:-.45s} .pc-eq i:nth-child(4){animation-delay:-.7s} .pc-eq i:nth-child(5){animation-delay:-.9s}
@keyframes eq { 0%,100%{ transform:scaleY(.25) } 50%{ transform:scaleY(1) } }

.float-chip { position:absolute; z-index:4; display:flex; align-items:center; gap:8px; padding:11px 16px; border-radius:20px; font-weight:650; font-size:14.5px;
  box-shadow:var(--lg-sh); opacity:0; scale:.7; transition:opacity .6s var(--ease), scale .8s var(--spring); }
.float-chip.on { opacity:1; scale:1; }
.float-chip .ic { width:18px; height:18px; color:var(--acc); position:relative; z-index:3; }
.fc-dot { width:9px; height:9px; border-radius:50%; background:var(--ok); box-shadow:0 0 0 4px color-mix(in srgb, var(--ok) 22%, transparent); }
.fc1 { top:13%; right:-2%; } .fc2 { bottom:24%; left:-6%; } .fc3 { bottom:8%; right:4%; }
.float-chip.on { animation:bob 6s ease-in-out infinite; }
.fc2.on { animation-delay:-2s; } .fc3.on { animation-delay:-4s; }
@keyframes bob { 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-9px) } }
html.rest .float-chip { animation-play-state:paused; }

.stats { display:grid; grid-template-columns:repeat(4, 1fr); gap:14px; margin-top:56px; }
.stat { border-radius:24px; padding:20px 22px; display:flex; flex-direction:column; gap:2px; }
.stat b { font-family:var(--disp); font-size:clamp(28px, 3.4vw, 40px); font-weight:700; letter-spacing:-.03em; line-height:1.1; font-variant-numeric:tabular-nums; position:relative; z-index:3; }
.stat span { color:var(--ink2); font-size:14.5px; position:relative; z-index:3; }

/* ---------------- секции ---------------- */
.sec { padding-block:clamp(72px, 10vw, 128px); position:relative; }
.sec-head { max-width:760px; margin-bottom:44px; }
.kicker { display:inline-block; font-size:13px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; margin-bottom:14px;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.h2 { font-size:clamp(30px, 4.4vw, 52px); margin:0; }
.sec-lead { font-size:18px; color:var(--ink2); margin:18px 0 0; max-width:640px; }
.card { border-radius:var(--r); padding:28px; }
.card > * { position:relative; z-index:3; }
.card h3, .step h3, .op h3 { font-family:var(--disp); font-weight:650; font-size:21px; letter-spacing:-.015em; margin:0 0 10px; }
.card p { margin:0; color:var(--ink2); }

.feat-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; }
.f-ic { width:56px; height:56px; border-radius:18px; display:grid; place-items:center; color:#fff; margin-bottom:22px;
  box-shadow:0 10px 24px -6px var(--c), inset 0 1px 0 rgba(255,255,255,.45); transition:transform .6s var(--spring); }
.card:hover .f-ic { transform:rotate(-6deg) scale(1.08); }
.f-ic .ic { width:26px; height:26px; }
.g1 { background:linear-gradient(135deg,#2f6bff,#8b5cf6); --c:rgba(80,90,255,.55); }
.g2 { background:linear-gradient(135deg,#00c6a7,#2f9bff); --c:rgba(0,170,190,.5); }
.g3 { background:linear-gradient(135deg,#ff7a59,#ff3d8b); --c:rgba(255,80,120,.5); }
.tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:20px; }
.tags span { font-size:12.5px; font-weight:650; padding:5px 10px; border-radius:11px; background:var(--fill); font-family:var(--mono); }

/* шаги */
.steps { position:relative; display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; }
.steps-line { position:absolute; left:6%; right:6%; top:47px; height:2px; border-radius:2px; background:var(--line); z-index:0; }
.steps-line i { position:absolute; inset:0; transform-origin:left; transform:scaleX(var(--p,0)); background:var(--grad); border-radius:inherit; transition:transform .25s linear; }
.step { border-radius:var(--r); padding:26px 24px 28px; }
.step > * { position:relative; z-index:3; }
.step-n { width:44px; height:44px; border-radius:50%; display:grid; place-items:center; margin-bottom:22px; font-family:var(--disp); font-weight:700; font-size:18px;
  background:var(--surf); color:var(--ink3); box-shadow:0 0 0 1px var(--line); transition:background .6s var(--ease), color .6s var(--ease), box-shadow .6s var(--ease), transform .6s var(--spring); }
.step.lit .step-n { background:var(--grad); color:#fff; box-shadow:0 8px 22px -4px rgba(47,107,255,.55); transform:scale(1.06); }
.step p { margin:0; color:var(--ink2); font-size:15.5px; }

.inside { margin-top:18px; border-radius:32px; padding:34px; display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:center; }
.inside > * { position:relative; z-index:3; }
.inside h3 { font-family:var(--disp); font-size:24px; margin:0 0 12px; letter-spacing:-.015em; }
.inside p { margin:0 0 12px; color:var(--ink2); }
.inside p b { color:var(--ink); }
.inside-map { display:flex; flex-direction:column; align-items:center; gap:0; }
.im-node { border-radius:20px; padding:14px 22px; text-align:center; display:flex; flex-direction:column; gap:4px; min-width:250px; }
.im-node > * { position:relative; z-index:3; }
.im-node small { color:var(--ink3); font-size:12.5px; font-weight:600; }
.im-node code { background:none; padding:0; font-size:16px; font-weight:600; }
.im-acc { background:var(--grad); color:#fff; box-shadow:0 14px 34px -8px rgba(47,107,255,.55); }
.im-acc small { color:rgba(255,255,255,.75); }
.im-link { position:relative; width:2px; height:46px; background:var(--line); overflow:hidden; }
.im-link i { position:absolute; left:0; width:100%; height:40%; background:var(--grad); border-radius:2px; animation:flow 1.8s var(--ease) infinite; }
@keyframes flow { from { top:-40% } to { top:100% } }
html.rest .im-link i { animation-play-state:paused; }
.im-out { display:flex; gap:8px; margin-top:16px; }
.im-out span { padding:8px 14px; border-radius:14px; font-weight:700; font-size:14px; }

/* совместимость */
.warn-card { display:flex; gap:18px; align-items:flex-start; border-radius:var(--r); padding:24px 26px; margin-bottom:16px;
  background:color-mix(in srgb, var(--mid) 13%, var(--lg-fill)); }
.warn-card > * { position:relative; z-index:3; }
.wc-ic { width:46px; height:46px; border-radius:15px; display:grid; place-items:center; background:var(--mid); color:#fff; flex:none;
  box-shadow:0 8px 20px -6px color-mix(in srgb, var(--mid) 80%, transparent); }
.wc-ic .ic { width:24px; height:24px; }
.warn-card h3 { margin:2px 0 6px; font-family:var(--disp); font-size:19px; }
.warn-card p { margin:0; color:var(--ink2); }
.warn-card p b { color:var(--ink); font-weight:600; }
.compat-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.c-h { font-size:15px !important; font-family:var(--font) !important; font-weight:700 !important; color:var(--ink3); text-transform:uppercase; letter-spacing:.07em; }
.c-h2 { margin-top:28px !important; }
.big-model { font-family:var(--disp); font-weight:800; font-size:clamp(52px, 7vw, 76px); letter-spacing:-.04em; line-height:1; margin:4px 0 12px !important; color:var(--ink) !important;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent !important; }
.os-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.os-list li { display:flex; gap:12px; align-items:center; color:var(--ink2); }
.os-list b { color:var(--ink); }
.os-list .ic { width:22px; height:22px; color:var(--ink); }
.ios-rows { display:flex; flex-direction:column; gap:8px; margin:6px 0 16px; }
.ios-row { display:flex; justify-content:space-between; align-items:center; padding:12px 14px; border-radius:16px; background:var(--fill); font-weight:600; }
.ios-row.bad { background:color-mix(in srgb, var(--bad) 12%, transparent); }
.pill { font-size:12.5px; font-weight:700; padding:5px 11px; border-radius:12px; white-space:nowrap; }
.pill.ok { background:color-mix(in srgb, var(--ok) 16%, transparent); color:var(--ok); }
.pill.bad { background:color-mix(in srgb, var(--bad) 16%, transparent); color:var(--bad); }

/* операторы */
.op-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; }
.op { border-radius:var(--r); padding:24px; display:flex; flex-direction:column; gap:16px; transition:transform .6s var(--spring); }
.op:hover { transform:translateY(-4px); }
.op > * { position:relative; z-index:3; }
.op header { display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
.op header h3 { margin:0; }
.op header code { font-size:12.5px; color:var(--ink3); }
.op-bands { display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.op-bands small { color:var(--ink3); font-size:12.5px; margin-left:2px; }
.band { font-family:var(--disp); font-weight:700; font-size:15px; padding:6px 12px; border-radius:13px; background:var(--grad); color:#fff; box-shadow:0 6px 16px -6px rgba(47,107,255,.6); }
.band.off { background:var(--fill); color:var(--ink3); box-shadow:none; text-decoration:line-through; text-decoration-thickness:2px; }
.op ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; flex:1; }
.op li { position:relative; padding-left:22px; font-size:14.5px; color:var(--ink2); line-height:1.45; }
.op li::before { content:""; position:absolute; left:2px; top:6px; width:10px; height:10px; border-radius:50%; background:var(--c); box-shadow:0 0 0 3px color-mix(in srgb, var(--c) 20%, transparent); }
.op li.ok { --c:var(--ok); } .op li.mid { --c:var(--mid); } .op li.bad { --c:var(--bad); }
.op footer { font-size:14px; color:var(--ink3); padding-top:14px; box-shadow:inset 0 1px 0 var(--line); }
.op footer b { color:var(--ink); font-family:var(--mono); font-weight:600; }

/* 5G в России */
.timeline { position:relative; display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; margin-bottom:28px; padding-top:30px; }
.tl-track { position:absolute; top:8px; left:8px; right:8px; height:3px; border-radius:3px; background:var(--line); }
.tl-fill { position:absolute; inset:0; width:58%; background:var(--grad); border-radius:inherit; transform-origin:left; transform:scaleX(0); transition:transform 1.8s var(--ease) .3s; }
.timeline.in .tl-fill { transform:scaleX(1); }
.tl-item { position:relative; }
.tl-dot { position:absolute; top:-30px; left:0; width:19px; height:19px; border-radius:50%; background:var(--bg); box-shadow:inset 0 0 0 3px var(--line); }
.tl-item.done .tl-dot { box-shadow:inset 0 0 0 3px var(--acc), 0 0 0 6px color-mix(in srgb, var(--acc) 15%, transparent); background:var(--surf); }
.tl-item b { font-family:var(--disp); font-size:18px; letter-spacing:-.01em; }
.tl-item p { margin:6px 0 0; color:var(--ink2); font-size:15.5px; max-width:300px; }
.ru-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.maps-h { font-family:var(--disp); font-size:22px; margin:44px 0 16px; letter-spacing:-.015em; }
.maps { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:12px; }
.map { display:flex; align-items:center; gap:14px; padding:16px 18px; border-radius:22px; transition:transform .45s var(--spring); }
.map > * { position:relative; z-index:3; }
.map:hover { transform:translateY(-3px); }
.map > .ic:first-child { width:24px; height:24px; color:var(--acc); }
.map span { display:flex; flex-direction:column; flex:1; line-height:1.35; }
.map small { color:var(--ink2); font-size:13.5px; }
.map .ext { width:17px; height:17px; color:var(--ink3); transition:transform .35s var(--spring); }
.map:hover .ext { transform:translate(2px,-2px); }

/* проверка */
.demo { border-radius:34px; padding:22px; margin-bottom:16px; }
.demo > * { position:relative; z-index:3; }
.seg { position:relative; display:inline-flex; padding:4px; border-radius:22px; margin:0 auto 22px; left:50%; translate:-50% 0; }
.seg button { position:relative; z-index:3; height:40px; padding:0 20px; border-radius:18px; font-weight:650; font-size:15px; color:var(--ink2); transition:color .3s; }
.seg button.on { color:var(--ink); }
.seg-ind { position:absolute; z-index:2; top:4px; left:0; height:40px; width:var(--w,0); translate:var(--x,0) 0; border-radius:18px; background:var(--surf);
  box-shadow:0 3px 10px rgba(0,0,0,.1); transition:translate .55s var(--spring), width .55s var(--spring); }
.seg-ind.jelly { animation:jelly .5s var(--ease); }
.demo-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.dev { text-align:center; padding:6px 10px 10px; }
.dev h4 { font-family:var(--disp); font-size:19px; margin:18px 0 6px; }
.dev p { margin:0 auto; color:var(--ink2); max-width:340px; font-size:15.5px; }
.dev-scr { position:relative; margin:0 auto; max-width:300px; height:190px; border-radius:30px; background:var(--surf); box-shadow:0 0 0 1px var(--line), 0 14px 34px -14px rgba(0,0,0,.25); overflow:hidden; display:flex; flex-direction:column; align-items:center; }
.dev-bar { align-self:stretch; display:flex; justify-content:space-between; padding:14px 22px 0; font-size:13px; font-weight:700; }
.dev-net, .dev-big, .dev-sub { display:inline-grid; }
.dn { grid-area:1/1; transition:opacity .5s var(--ease), translate .7s var(--spring), filter .5s var(--ease); }
#demo .dn.b { opacity:0; translate:0 60%; filter:blur(4px); }
#demo[data-load="1"] .dn.a { opacity:0; translate:0 -60%; filter:blur(4px); }
#demo[data-load="1"] .dn.b { opacity:1; translate:0 0; filter:none; }
.dev-big { font-family:var(--disp); font-size:62px; font-weight:800; letter-spacing:-.04em; margin-top:16px; line-height:1; }
.dev:not(.droid) .dev-big .dn.b { background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.droid .dev-big > span { color:var(--ink); }
.dev-sub { font-size:13.5px; color:var(--ink2); margin-top:14px; font-weight:600; }
.dev-sub.mono { font-family:var(--mono); font-size:12.5px; }
#demo[data-load="1"] .droid .dev-sub .dn.b { color:var(--ok); }
#demo[data-load="0"] .droid .dev-sub .dn.a { color:var(--mid); }
.check-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; }
.num { display:inline-grid; place-items:center; width:34px; height:34px; border-radius:11px; background:var(--fill); font-family:var(--disp); font-weight:700; margin-bottom:16px; }
.dial { font-size:15px; font-weight:700; white-space:nowrap; }

/* вопросы */
.faq { display:flex; flex-direction:column; gap:10px; }
.qa { border-radius:24px; transition:box-shadow .4s; }
.qa > * { position:relative; z-index:3; }
.qa-q { width:100%; display:flex; justify-content:space-between; align-items:center; gap:18px; text-align:left; padding:20px 22px; font-weight:650; font-size:17px; border-radius:24px; }
.qa-plus { position:relative; width:30px; height:30px; border-radius:50%; background:var(--fill); flex:none; transition:transform .5s var(--spring), background .3s; }
.qa-plus::before, .qa-plus::after { content:""; position:absolute; left:50%; top:50%; width:12px; height:2px; border-radius:2px; background:currentColor; translate:-50% -50%; transition:rotate .5s var(--spring); }
.qa-plus::after { rotate:90deg; }
.qa.open .qa-plus { transform:rotate(180deg); background:var(--acc); color:#fff; }
.qa.open .qa-plus::after { rotate:0deg; }
.qa-a { display:grid; grid-template-rows:0fr; transition:grid-template-rows .55s var(--ease); }
.qa.open .qa-a { grid-template-rows:1fr; }
.qa-a > div { overflow:hidden; }
.qa-a p { margin:0; padding:0 22px 22px; color:var(--ink2); opacity:0; translate:0 -6px; transition:opacity .45s var(--ease), translate .55s var(--ease); }
.qa.open .qa-a p { opacity:1; translate:0 0; transition-delay:.08s; }

/* скачать */
.dl { position:relative; overflow:hidden; border-radius:40px; padding:clamp(40px, 7vw, 80px) 24px; text-align:center; }
.dl > * { position:relative; z-index:3; }
.dl .sec-lead { margin-inline:auto; margin-bottom:32px; }
.dl-glow { position:absolute !important; z-index:0 !important; inset:-40%; background:conic-gradient(from 0deg, transparent, color-mix(in srgb, #2f6bff 22%, transparent), transparent 30%, color-mix(in srgb, #00c6a7 20%, transparent), transparent 60%, color-mix(in srgb, #8b5cf6 22%, transparent), transparent);
  animation:spin 22s linear infinite; }
@keyframes spin { to { transform:rotate(1turn); } }
html.rest .dl-glow { animation-play-state:paused; }

.foot { padding-block:40px 48px; }
.foot-in { display:grid; grid-template-columns:auto 1fr auto; gap:24px; align-items:center; box-shadow:inset 0 1px 0 var(--line); padding-top:32px; }
.foot-brand { display:flex; flex-direction:column; gap:2px; }
.foot-in p { margin:0; max-width:600px; }
.foot-links { display:flex; gap:18px; font-weight:600; font-size:15px; }
.foot-links a { display:flex; align-items:center; gap:7px; color:var(--ink2); transition:color .25s; }
.foot-links a:hover { color:var(--ink); }

/* ---------------- мастер «Хочу 5G» ---------------- */
.wz { position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:20px; }
.wz-back { position:absolute; inset:0; background:color-mix(in srgb, var(--bg) 40%, rgba(5,8,20,.35));
  -webkit-backdrop-filter:blur(10px) saturate(140%); backdrop-filter:blur(10px) saturate(140%); opacity:0; transition:opacity .45s var(--ease); }
.wz.open .wz-back { opacity:1; }
.wz-sheet { position:relative; width:min(600px, 100%); max-height:min(760px, calc(100svh - 40px)); display:flex; flex-direction:column;
  border-radius:36px; background:var(--lg-sheet); -webkit-backdrop-filter:var(--lg-blur); backdrop-filter:var(--lg-blur); box-shadow:0 30px 80px rgba(0,0,0,.28);
  opacity:0; translate:0 40px; scale:.94; transition:opacity .45s var(--ease), translate .7s var(--spring), scale .7s var(--spring); }
.wz-sheet::before { content:""; position:absolute; z-index:5; inset:0; padding:1px; border-radius:inherit; pointer-events:none;
  background:linear-gradient(135deg, var(--lg-rim1) 0%, var(--lg-rim2) 28%, var(--lg-rim2) 68%, var(--lg-rim1) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; }
.wz.open .wz-sheet { opacity:1; translate:0 0; scale:1; }
.wz-grab { display:none; }
.wz-head { display:flex; justify-content:space-between; align-items:center; padding:16px 16px 0; flex:none; }
#wzPrev { transition:opacity .3s, transform .35s var(--spring); }
#wzPrev.off { opacity:0; pointer-events:none; transform:scale(.6); }
.wz-dots { display:flex; gap:6px; }
.wz-dots i { width:8px; height:8px; border-radius:4px; background:var(--lg-pill); transition:width .5s var(--spring), background .4s; }
.wz-dots i.on { width:26px; background:var(--acc); }
.wz-dots i.done { background:color-mix(in srgb, var(--acc) 45%, transparent); }
.wz-dots.fin i { background:var(--ok); }
.wz-stage { position:relative; overflow-y:auto; overflow-x:hidden; padding:10px 26px 28px; overscroll-behavior:contain; }
.wz-step { animation:stepIn .6s var(--ease) both; }
.wz-step.back { animation-name:stepInBack; }
@keyframes stepIn { from { opacity:0; translate:40px 0; filter:blur(4px); } }
@keyframes stepInBack { from { opacity:0; translate:-40px 0; filter:blur(4px); } }
.wz-step.leave { animation:stepOut .28s var(--ease) both; }
.wz-step.leave.back { animation-name:stepOutBack; }
@keyframes stepOut { to { opacity:0; translate:-30px 0; filter:blur(4px); } }
@keyframes stepOutBack { to { opacity:0; translate:30px 0; filter:blur(4px); } }
.wz-q-n { font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink3); margin:8px 0 8px; }
.wz-title { font-size:clamp(24px, 4.6vw, 32px); margin:0 0 8px; }
.wz-hint { color:var(--ink2); margin:0 0 20px; font-size:15px; }
.opts { display:flex; flex-direction:column; gap:10px; }
.opt { position:relative; display:flex; align-items:center; gap:14px; width:100%; text-align:left; padding:16px 18px; border-radius:22px;
  background:var(--lg-fill); box-shadow:var(--lg-sh-s); animation:optIn .6s var(--ease) both; animation-delay:calc(var(--i) * 55ms + 80ms);
  transition:transform .4s var(--spring), box-shadow .3s, background .3s; }
.opt::before { content:""; position:absolute; z-index:2; inset:0; padding:1px; border-radius:inherit; pointer-events:none;
  background:linear-gradient(135deg, var(--lg-rim1) 0%, var(--lg-rim2) 28%, var(--lg-rim2) 68%, var(--lg-rim1) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; }
@keyframes optIn { from { opacity:0; translate:0 14px; } }
.opt:hover { transform:translateY(-2px); box-shadow:var(--lg-sh); }
.opt:active { transform:scale(.97); }
.opt.picked { background:color-mix(in srgb, var(--acc) 16%, var(--lg-fill)); box-shadow:0 0 0 2px var(--acc), var(--lg-sh-s); }
.opt-ic { width:44px; height:44px; border-radius:14px; display:grid; place-items:center; background:var(--fill); flex:none; font-family:var(--disp); font-weight:700; font-size:14px; }
.opt-ic .ic { width:22px; height:22px; }
.opt-t { display:flex; flex-direction:column; flex:1; line-height:1.3; }
.opt-t b { font-weight:650; font-size:16.5px; }
.opt-t small { color:var(--ink2); font-size:13.5px; margin-top:2px; }
.opt-go { width:20px; height:20px; color:var(--ink3); transition:transform .35s var(--spring); }
.opt:hover .opt-go { transform:translateX(3px); color:var(--acc); }

.res-badge { width:84px; height:84px; border-radius:28px; display:grid; place-items:center; margin:10px 0 20px; color:#fff;
  animation:pop .8s var(--spring) both; }
.res-badge.ok { background:var(--grad); box-shadow:0 18px 40px -10px rgba(47,107,255,.6); }
.res-badge.no { background:linear-gradient(135deg,#ff8a5b,#e5383b); box-shadow:0 18px 40px -10px rgba(229,56,59,.55); }
.res-badge svg { width:44px; height:44px; }
.res-badge path.draw { stroke-dasharray:40; stroke-dashoffset:40; animation:draw .7s var(--ease) .35s forwards; }
@keyframes draw { to { stroke-dashoffset:0; } }
@keyframes pop { from { scale:.3; opacity:0; rotate:-20deg; } }
.res-sum { display:flex; flex-wrap:wrap; gap:6px; margin:4px 0 22px; }
.res-sum span { font-size:13px; font-weight:650; padding:6px 11px; border-radius:12px; background:var(--fill); }
.res-list { list-style:none; counter-reset:s; margin:0 0 22px; padding:0; display:flex; flex-direction:column; gap:10px; }
.res-list li { counter-increment:s; position:relative; padding:14px 16px 14px 56px; border-radius:18px; background:var(--fill); font-size:15px; line-height:1.45;
  animation:optIn .6s var(--ease) both; animation-delay:calc(var(--i) * 70ms + 250ms); }
.res-list li::before { content:counter(s); position:absolute; left:14px; top:12px; width:28px; height:28px; border-radius:50%; display:grid; place-items:center;
  background:var(--grad); color:#fff; font-family:var(--disp); font-weight:700; font-size:13px; }
.res-list li b { font-weight:650; }
.res-list a { color:var(--acc); font-weight:600; text-decoration:underline; text-decoration-thickness:1.5px; text-underline-offset:3px; }
.res-note { display:flex; gap:12px; padding:14px 16px; border-radius:18px; margin-bottom:12px; font-size:14.5px; line-height:1.45;
  background:color-mix(in srgb, var(--c) 12%, transparent); animation:optIn .6s var(--ease) both; animation-delay:.2s; }
.res-note .ic { color:var(--c); margin-top:1px; }
.res-note.warn { --c:var(--mid); } .res-note.info { --c:var(--acc); } .res-note.bad { --c:var(--bad); }
.res-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:8px; }
.res-actions .btn-hero { height:54px; font-size:16.5px; }
.res-actions .btn-glass { height:54px; }
.res-actions .btn-glass { background:var(--fill); -webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:none; }
.res-actions .btn-glass::before { display:none; }

@media (max-width: 640px) {
  .wz { padding:0; place-items:end stretch; }
  .wz-sheet { width:100%; max-height:92svh; border-radius:34px 34px 0 0; translate:0 100%; scale:1; padding-bottom:env(safe-area-inset-bottom, 0px); }
  .wz.open .wz-sheet { translate:0 var(--drag, 0px); }
  .wz-sheet.dragging { transition:none; }
  .wz-sheet::before { padding:1px 1px 0; }
  .wz-grab { display:block; width:40px; height:5px; border-radius:3px; background:var(--lg-pill); margin:9px auto -4px; flex:none; }
  .wz-stage { padding:6px 18px 26px; }
}

/* ---------------- адаптив ---------------- */
@media (max-width: 1080px) {
  .op-grid { grid-template-columns:repeat(2, 1fr); }
  .fc2 { left:0; } .fc1 { right:0; }
}
@media (max-width: 900px) {
  .hero { padding-top:96px; min-height:auto; }
  .hero-grid { grid-template-columns:1fr; gap:24px; }
  .hero-text { text-align:center; display:flex; flex-direction:column; align-items:center; }
  .lead { margin-inline:auto; }
  .cta-row { justify-content:center; }
  .trust { justify-content:center; }
  .hero-visual { min-height:600px; }
  .stats { grid-template-columns:repeat(2, 1fr); margin-top:28px; }
  .feat-grid, .check-grid { grid-template-columns:1fr; }
  .steps { grid-template-columns:1fr 1fr; }
  .steps-line { display:none; }
  .inside { grid-template-columns:1fr; padding:26px; }
  .compat-grid, .ru-grid { grid-template-columns:1fr; }
  .timeline { grid-template-columns:1fr; gap:22px; padding-top:0; padding-left:34px; }
  .tl-track { top:6px; bottom:6px; left:8px; right:auto; width:3px; height:auto; }
  .tl-fill { width:100%; height:58%; transform:scaleY(0); transform-origin:top; }
  .timeline.in .tl-fill { transform:scaleY(1); }
  .tl-dot { top:3px; left:-34px; }
  .foot-in { grid-template-columns:1fr; }
}
@media (max-width: 560px) {
  .wrap { padding-inline:16px; }
  .btn-hero, .btn-glass { height:56px; }
  .cta-row { flex-direction:column; align-self:stretch; }
  .cta-row .btn-hero, .cta-row .btn-glass { justify-content:center; width:100%; }
  .op-grid, .steps { grid-template-columns:1fr; }
  .demo-grid { grid-template-columns:1fr; }
  .demo { padding:16px 12px; }
  .card, .step { padding:22px; }
  .phone { width:270px; height:560px; }
  .hero-visual { min-height:560px; }
  .rings i { width:340px; height:340px; }
  .float-chip { font-size:13px; padding:9px 13px; }
  .fc1 { top:9%; right:-4px; } .fc2 { bottom:26%; left:-4px; } .fc3 { bottom:6%; right:-2px; }
  .warn-card { flex-direction:column; gap:12px; padding:20px; }
  .im-node { min-width:0; width:100%; }
  .seg button { padding:0 14px; font-size:14px; }
}

/* меньше движения — по просьбе системы */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
  .js [data-reveal] { opacity:1; translate:none; scale:none; filter:none; }
  .aurora .b { animation:none; }
}