@font-face{font-family:'AtexaMono';src:url('/fonts/AtexaMono/AtexaMonoRegular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0100-024F,U+2000-206F,U+20A0-20CF}
@font-face{font-family:'AtexaMono';src:url('https://cdn.jsdelivr.net/fontsource/fonts/jetbrains-mono@latest/cyrillic-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0400-04FF,U+0500-052F}
@font-face{font-family:'NHMonodot';src:url('/fonts/NHMonodot/NHMONODOTNEW.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
:root{
  --vw:1920; --bg:#0e0e0d; --fg:#edfef9;
  --mute:rgba(237,254,249,.5); --dim:rgba(237,254,249,.25);
  --line:rgba(237,254,249,.25);
  --font:'AtexaMono',ui-monospace,monospace;
  --dot:'NHMonodot','AtexaMono',monospace;
  --br:999px; --pad:clamp(12px,1.2vw,22px);--safe-t:env(safe-area-inset-top,0px);--safe-b:env(safe-area-inset-bottom,0px);--safe-l:env(safe-area-inset-left,0px);--safe-r:env(safe-area-inset-right,0px);
}
*{box-sizing:border-box;margin:0}
html,body{height:100%;overflow:hidden;background:var(--bg);color:var(--fg);font-family:var(--font);font-size:clamp(12px,.9vw,16px);letter-spacing:-.01em;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

/* no freelook drag — body.dragging unused, kept harmless */
body.dragging{user-select:none}
.vignette,.scrim,.shell,.right-path,.copy,.hots{pointer-events:none!important}
.hot{pointer-events:auto!important}
.panel.home-lite,.panel.home-lite.on{pointer-events:none}
.panel.home-lite .actions,.panel.home-lite .actions a,.panel.home-lite .actions button,
.panel.home-lite .actions .btn{pointer-events:auto}
.panel.on:not(.home-lite){pointer-events:auto}

canvas#bg{position:fixed;inset:0;z-index:0;touch-action:manipulation;cursor:default;pointer-events:none;display:block!important;opacity:1!important;visibility:visible!important}
.vignette{position:fixed;inset:0;z-index:1;pointer-events:none;background:
  linear-gradient(90deg,rgba(14,14,13,.92) 0%,rgba(14,14,13,.7) 16%,rgba(14,14,13,.35) 32%,transparent 46%),
  linear-gradient(180deg,rgba(14,14,13,.58) 0%,transparent 18%,transparent 68%,rgba(14,14,13,.72) 100%),
  radial-gradient(ellipse at 50% 45%,transparent 28%,rgba(14,14,13,.55) 100%)}
.scrim{position:fixed;left:0;top:0;bottom:100px;width:min(46vw,640px);z-index:2;pointer-events:none;background:linear-gradient(90deg,rgba(14,14,13,.55),transparent)}

/* preloader */
#preloader{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:#000;transition:opacity .55s,visibility .55s}
#preloader.hide{opacity:0;visibility:hidden;pointer-events:none}
.pre-inner{width:min(420px,78vw);text-align:center}
.pre-brand{display:inline-flex;align-items:center;justify-content:center;gap:10px;text-transform:uppercase;letter-spacing:.16em;margin-bottom:26px;text-shadow:0 0 40px var(--fg)}
.pre-track{height:2px;background:rgba(237,254,249,.12);overflow:hidden}
.pre-bar{height:100%;width:0;background:var(--fg);transition:width .2s linear}
.pre-pct{margin-top:12px;color:var(--mute);font-family:var(--dot);letter-spacing:.12em}
.pre-hint{margin-top:18px;color:var(--dim);text-transform:uppercase;font-size:12px;letter-spacing:.08em}

/* intro */
#intro{position:fixed;inset:0;z-index:60;display:grid;place-items:center;cursor:pointer;opacity:0;visibility:hidden;transition:opacity .5s,visibility .5s;background:rgba(14,14,13,.25)}
#intro.show{opacity:1;visibility:visible}
#intro.hide{opacity:0;visibility:hidden;pointer-events:none}
.intro-ring{width:min(210px,44vw);height:min(210px,44vw);display:grid;place-items:center;position:relative}
.intro-ring::before{content:"";position:absolute;inset:0;border:1px solid rgba(237,254,249,.35);border-radius:50%;animation:pulse 2.4s ease-in-out infinite}
.intro-copy{text-align:center;z-index:1}
.intro-copy .hint{font-size:12px;color:var(--mute);margin-bottom:12px;text-transform:uppercase;letter-spacing:-.06em}
.intro-copy h2{font-size:14px;font-weight:400;text-transform:uppercase;letter-spacing:-.08em;line-height:1.35}
.intro-copy h2 b{display:block;font-weight:400}
.intro-copy h2 span{display:block;color:var(--mute);margin-top:4px}
@keyframes pulse{50%{transform:scale(1.06);opacity:.85}}

/* HUD corners — NH style */
.hud{position:fixed;inset:0;z-index:25;pointer-events:none}
.hud a,.hud button{pointer-events:auto}
.hud-tl{position:absolute;top:var(--pad);left:var(--pad);max-width:240px}
.hud-tr{position:absolute;top:var(--pad);right:var(--pad);display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.hud-br{position:absolute;top:var(--pad);right:var(--pad);display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;max-width:52vw}
.hud-bl{position:absolute;bottom:var(--pad);left:var(--pad);font-size:13px;color:var(--mute);text-transform:uppercase;letter-spacing:-.06em;line-height:1.45}
.hud-bl strong{display:block;color:var(--fg);font-weight:400}
.meta{position:absolute;bottom:var(--pad);right:var(--pad);text-align:right;font-size:13px;color:var(--mute);text-transform:uppercase;line-height:1.55}
.meta .t{color:var(--fg);font-size:15px}
.copy{position:absolute;bottom:var(--pad);left:50%;transform:translateX(-50%);font-size:12px;color:var(--mute);text-transform:uppercase;font-family:var(--dot)}
.logo{display:inline-flex;align-items:center;gap:8px;text-transform:uppercase;margin-bottom:8px}
.logo-mark{width:22px;height:22px;border-radius:6px;flex:0 0 auto;display:block;box-shadow:0 0 0 1px rgba(237,254,249,.12)}
.logo span{color:var(--fg);font-weight:400}
.pre-mark{width:36px;height:36px;border-radius:9px;display:block}
.intro-mark{position:absolute;width:min(72px,34vw);height:min(72px,34vw);border-radius:16px;z-index:0;opacity:.92;filter:drop-shadow(0 0 24px rgba(237,254,249,.18));pointer-events:none}
.intro-ring{isolation:isolate}
.intro-copy{position:relative;z-index:1}
.svc{color:var(--mute);text-transform:uppercase;margin-bottom:6px}
.svc b{color:var(--fg);font-weight:400}
.mail a{color:var(--mute);text-transform:uppercase}
.mail a:hover{color:var(--fg)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:36px;padding:0 14px;border-radius:var(--br);font-size:13px;text-transform:uppercase;letter-spacing:-.01em;border:1px solid transparent;transition:transform .15s,background .15s,border-color .15s,color .15s}
.btn:hover{transform:translateY(-1px)}
.btn.cta{background:var(--fg);color:var(--bg)}
.btn.ghost{border-color:rgba(237,254,249,.45);color:#edfef9;background:rgba(237,254,249,.06)}
.btn.ghost:hover,.btn.ghost.on{border-color:var(--fg);color:var(--fg)}
#audio-toggle .eq{display:inline-flex;align-items:flex-end;gap:2px;height:11px}
#audio-toggle .eq i{width:2px;height:40%;background:currentColor;display:block}
#audio-toggle.on .eq i{animation:eq 1s ease-in-out infinite}
#audio-toggle.on .eq i:nth-child(2){animation-delay:.12s;height:100%}
#audio-toggle.on .eq i:nth-child(3){animation-delay:.24s;height:60%}
#audio-toggle.on .eq i:nth-child(4){animation-delay:.36s;height:80%}
@keyframes eq{50%{transform:scaleY(1)}0%,100%{transform:scaleY(.45)}}

/* left services rail — like NH */
.rail{position:fixed;left:var(--pad);top:28%;z-index:20;width:min(320px,34vw);pointer-events:none}
.rail .rail-head{display:flex;align-items:baseline;gap:10px;margin-bottom:14px;text-transform:uppercase;pointer-events:none}
.rail .rail-head b{font-weight:400;font-size:14px}
.rail .rail-head span{color:var(--mute);font-family:var(--dot)}
.rail-list{display:flex;flex-direction:column;gap:0;pointer-events:auto}
.rail-list button,.rail-list a{
  display:flex;justify-content:space-between;gap:12px;align-items:center;
  padding:12px 0;border-top:1px solid var(--line);text-align:left;text-transform:uppercase;
  color:var(--mute);font-size:13px;letter-spacing:-.01em;transition:color .15s
}
.rail-list button:hover,.rail-list a:hover,.rail-list button.on,.rail-list a.on{color:var(--fg)}
.rail-list .n{font-family:var(--dot);color:var(--dim)}
.rail-copy{margin-top:16px;color:rgba(237,254,249,.78);font-size:13px;line-height:1.55;max-width:28ch;text-transform:uppercase;letter-spacing:-.02em;pointer-events:none;text-shadow:0 2px 12px #000,0 0 18px rgba(0,0,0,.85)}

/* floating hotspots — NH 3D-label feel */
.hots{position:fixed;inset:0;z-index:12;pointer-events:none}
.hot{position:absolute;pointer-events:auto;display:inline-flex;align-items:center;gap:8px;padding:8px 10px;text-transform:uppercase;font-size:13px;color:var(--fg);letter-spacing:-.02em;background:rgba(14,14,13,.25);border:1px solid rgba(237,254,249,.2);backdrop-filter:blur(4px);cursor:pointer;transition:background .15s,border-color .15s,transform .15s}
.hot:hover{background:rgba(237,254,249,.08);border-color:var(--fg);transform:translateY(-1px)}
.hot .x{opacity:.5}
.hot[data-slot="a"]{top:38%;left:58%}
.hot[data-slot="b"]{top:52%;left:22%}
.hot[data-slot="c"]{top:46%;right:18%}

/* filters bottom */
.filters-wrap{position:fixed;left:50%;bottom:calc(42/var(--vw)*100vw);transform:translateX(-50%);z-index:30;display:flex;flex-direction:column;align-items:center;gap:8px;width:max-content;max-width:calc(100% - 20px);pointer-events:auto}
.filter-label{text-transform:uppercase;opacity:.5;font-size:13px;letter-spacing:-.01em}
.filters{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;padding:0 20px}
.filters button{position:relative;display:inline-flex;align-items:center;min-height:29px;padding:0 17px 0 0;font-size:clamp(12px,.9vw,16px);text-transform:uppercase;color:var(--fg);opacity:.85}
.filters button span{padding:0 4px 0 7px;border:2px solid var(--fg);border-right:none}
.filters button::after{content:"";width:18px;height:29px;margin-left:-2px;border:2px solid var(--fg);border-left:none;border-radius:0 3px 3px 0;box-sizing:border-box}
.filters button.on span{background:var(--fg);color:var(--bg)}
.filters button.on::after{background:var(--fg)}
.filters button:hover{opacity:1}

/* content dock — fill available stage so sections fit without inner scroll */
.stage{position:fixed;left:0;right:0;top:0;bottom:88px;z-index:15;pointer-events:none;display:flex;justify-content:flex-end;align-items:flex-start;padding:9vh max(24px,3vw) 12px;box-sizing:border-box}
.panel{pointer-events:none;width:min(520px,92vw);max-height:calc(100vh - 9vh - 100px);max-height:calc(100dvh - 9vh - 100px);overflow:visible;overscroll-behavior:contain;text-align:left;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .35s,transform .35s;
  background:rgba(8,8,7,.96);border:1px solid rgba(237,254,249,.22);border-radius:12px;padding:18px 18px 16px;backdrop-filter:blur(16px);box-shadow:0 16px 48px rgba(0,0,0,.55)}
.panel.on{opacity:1;visibility:visible;transform:none;pointer-events:auto}
.panel.home-lite{pointer-events:none;background:transparent;border:0;backdrop-filter:none;box-shadow:none;padding:0;text-align:left;width:min(560px,46vw);min-width:min(440px,86vw);margin-right:auto;margin-left:max(8px, calc(var(--pad) + min(240px,24vw) + 4px));overflow:visible}
.panel.home-lite.on{pointer-events:none;padding:22px 26px 18px 22px;border-radius:16px;
  background:#0a0a09;
  backdrop-filter:none;
  border:1px solid rgba(237,254,249,.22);
  box-shadow:0 22px 56px rgba(0,0,0,.72), inset 0 1px 0 rgba(237,254,249,.08);overflow:visible}
.panel.home-lite .actions,.panel.home-lite .actions a,.panel.home-lite .actions button{pointer-events:auto}
.panel.home-lite h1{font-size:clamp(1.65rem,2.9vw,2.45rem);line-height:1.08}
.panel .tag{color:#edfef9;text-transform:uppercase;margin-bottom:10px;font-size:13px;text-shadow:0 2px 10px #000,0 0 20px rgba(0,0,0,.8);opacity:.92}
.panel h1{font-size:clamp(1.7rem,3.4vw,2.7rem);font-weight:400;line-height:1.08;letter-spacing:-.03em;text-transform:uppercase;margin-bottom:12px;color:#edfef9;text-shadow:0 2px 4px #000,0 0 28px rgba(0,0,0,.95),0 14px 48px rgba(0,0,0,.85)}
.panel h2{font-size:clamp(1.2rem,2.4vw,1.7rem);font-weight:400;text-transform:uppercase;margin-bottom:10px;color:#edfef9;line-height:1.18;letter-spacing:-.02em;overflow-wrap:anywhere;text-shadow:0 1px 0 #000,0 2px 8px #000,0 0 24px rgba(0,0,0,.95)}
.panel .lede{color:#edfef9;max-width:42ch;margin-bottom:14px;line-height:1.55;font-size:15px;opacity:.95;text-shadow:0 1px 0 #000,0 2px 8px rgba(0,0,0,.9)}
.panel .actions{display:flex;flex-wrap:wrap;gap:10px}
.linkbtn{display:inline-flex;align-items:center;min-height:36px;color:var(--mute);border-bottom:1px solid var(--line);text-transform:uppercase;font-size:13px}
.linkbtn:hover{color:var(--fg);border-color:var(--fg)}
.list,.plans,.faq{margin-top:8px}
.row,.plan{display:grid;grid-template-columns:36px minmax(0,1fr) minmax(3.8em,auto);gap:8px 10px;padding:8px 0;border-top:1px solid var(--line);align-items:center}
.plan{grid-template-columns:1fr auto;align-items:center;padding:9px 0}
.row .id,.row .lab{font-family:var(--dot);color:var(--mute);font-size:12px}
.row .ping{font-family:var(--dot);min-width:3.8em;text-align:right;letter-spacing:-.02em;transition:color .25s ease;color:#edfef9;font-size:13px;font-variant-numeric:tabular-nums;opacity:.95;text-shadow:0 1px 4px #000}
.row .ping.ok{color:#8dffc0}
.row .ping.mid{color:#ffd27a}
.row .ping.bad{color:#ff9a9a}
.row .ping.na{color:var(--dim);opacity:.7}
.row b,.plan .nm{font-weight:400;text-transform:uppercase;display:block}
.row span,.plan .nm{color:var(--mute);font-size:12px}
.plan .pr{font-size:1.35rem}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.chip{padding:8px 12px;border:1px solid var(--line);text-transform:uppercase;font-size:11px;color:var(--mute);border-radius:var(--br)}
.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px 14px;margin-top:16px}
.metrics > div{min-width:0}
.metrics .v{font-size:1.15rem;text-shadow:0 2px 10px #000;white-space:nowrap}
.metrics .k{font-size:11px;color:#edfef9;opacity:.88;text-transform:uppercase;text-shadow:none;white-space:nowrap;letter-spacing:-.02em}
.faq details{border-top:1px solid var(--line);padding:10px 0}
.faq summary{cursor:pointer;list-style:none;text-transform:uppercase;display:flex;justify-content:space-between}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--dim)}
.faq details[open] summary::after{content:"−"}
.faq p{margin-top:8px;color:var(--mute)}
.modal{position:fixed;inset:0;z-index:70;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(14,14,13,.9)}
.modal.on{display:flex}
.sheet{width:min(420px,100%);border:1px solid var(--line);padding:24px;background:var(--bg);border-radius:14px}
.sheet h3{text-transform:uppercase;margin-bottom:10px;font-weight:400}
.sheet input{width:100%;padding:12px;margin:8px 0;border:1px solid var(--line);background:transparent;color:var(--fg);font:inherit;border-radius:10px}
.sheet .err{color:#e88a8a;min-height:1.2em;font-size:12px}

body:not(.entered) .stage,body:not(.entered) .rail,body:not(.entered) .hots{opacity:.25}
body.entered .stage,body.entered .rail,body.entered .hots{opacity:1;transition:opacity .5s}


/* ===== LIVE SHELL (No Hero right ticker) ===== */
.shell{
  position:fixed; right:max(18px, calc(var(--pad) + 28px)); top:22%;
  width:min(170px, 18vw); height:min(240px, 32vh);
  z-index:18; overflow:hidden; pointer-events:none;
  mask-image:linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image:linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
  font-family:var(--dot); font-size:10.5px; line-height:1.1; letter-spacing:-.02em;
  color:rgba(237,254,249,.72); text-transform:uppercase;
}
.shell-track{display:flex; flex-direction:column; gap:0; animation:shell-scroll 42s linear infinite;}
.shell-line{padding:1px 0; white-space:nowrap; overflow:hidden; text-overflow:clip;}
.shell-line.accent{color:rgba(237,254,249,.95);}
.shell-line.hash{opacity:.45; letter-spacing:.08em;}
@keyframes shell-scroll{from{transform:translateY(0)} to{transform:translateY(-50%)}}
body:not(.entered) .shell{opacity:0}
body.entered .shell{opacity:1; transition:opacity .6s}

.right-path{
  position:fixed; right:calc(var(--pad) - 2px); top:18%;
  z-index:18; pointer-events:none;
  display:flex; flex-direction:column; gap:18px; align-items:center;
  writing-mode:vertical-rl; transform:rotate(180deg);
  font-family:var(--dot); font-size:11px; letter-spacing:.12em;
  color:rgba(237,254,249,.45); text-transform:uppercase;
}
.right-path span{display:block}
body:not(.entered) .right-path{opacity:0}
body.entered .right-path{opacity:1; transition:opacity .6s}

.modal .sheet{width:min(440px,100%)}
.sheet .plan-pick{display:grid; gap:8px; margin:12px 0 14px}
.sheet .plan-opt{
  display:grid; grid-template-columns:1fr auto; gap:8px; align-items:center;
  padding:12px 14px; border:1px solid var(--line); border-radius:12px; text-align:left;
  color:var(--mute); transition:border-color .15s, background .15s, color .15s; cursor:pointer; background:transparent; width:100%;
}
.sheet .plan-opt:hover{border-color:var(--fg); color:var(--fg)}
.sheet .plan-opt.on{border-color:var(--fg); background:rgba(237,254,249,.08); color:var(--fg)}
.sheet .plan-opt .nm{font-weight:400; text-transform:uppercase; display:block}
.sheet .plan-opt .ds{font-size:11px; color:var(--mute); margin-top:2px; text-transform:none}
.sheet .plan-opt .pr{font-size:1.25rem; color:var(--fg)}
.sheet .hint,.sheet .legal{font-size:11px; color:var(--mute); margin:8px 0 0; line-height:1.45}
.sheet .ok-box{text-align:center; padding:12px 0}
.sheet .ok-box .tick{font-size:2rem; margin-bottom:8px}
.sheet a.sublink{color:var(--fg); word-break:break-all}
.plan .ds{display:block;font-size:11px;color:var(--mute);margin-top:2px;text-transform:none}




/* ===== MOBILE ===== */
@media (max-width: 900px) {
  :root { --pad: 10px; }
  html, body {
    height: 100%;
    height: 100dvh;
    overscroll-behavior: none;
    -webkit-text-size-adjust: 100%;
  }
  canvas#bg { touch-action: manipulation; pointer-events: none; }

  /* until enter: only intro, no ghost HUD/filters */
  body:not(.entered) .hud,
  body:not(.entered) .filters-wrap,
  body:not(.entered) .stage {
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden;
  }
  #intro { background: rgba(14,14,13,.55); }
  #intro .intro-ring, .intro-ring { width: min(180px, 58vw); height: min(180px, 58vw); }
  .intro-copy .hint, #intro .hint { font-size: 10px; padding: 0 18px; }
  .intro-copy h2, #intro h2 { font-size: 13px; }
  .pre-inner { width: min(300px, 86vw); }
  .pre-brand { font-size: 12px; margin-bottom: 14px; }

  .vignette {
    background:
      linear-gradient(180deg, rgba(14,14,13,.72) 0%, transparent 16%, transparent 58%, rgba(14,14,13,.88) 100%),
      radial-gradient(ellipse at 50% 42%, transparent 22%, rgba(14,14,13,.45) 100%);
  }
  .scrim { display: none; }
  .rail, .copy, .hots, .right-path, .hud-bl, .shell { display: none !important; }

  .hud-tl {
    top: calc(10px + env(safe-area-inset-top, 0px));
    left: calc(12px + env(safe-area-inset-left, 0px));
    max-width: 46vw;
  }
  .hud-tl .logo { font-size: 11px; margin-bottom: 2px; gap: 6px; }
  .hud-tl .logo-mark { width: 18px; height: 18px; border-radius: 5px; }
  .hud-tl .svc { font-size: 10px; margin-bottom: 0; }
  .hud-tl .mail { display: none; }

  .hud-br {
    top: calc(10px + env(safe-area-inset-top, 0px));
    right: calc(12px + env(safe-area-inset-right, 0px));
    max-width: 50vw;
    gap: 6px;
  }
  .btn { min-height: 36px; padding: 0 14px; font-size: 11px; }
  #audio-toggle .audio-label,
  #audio-toggle [data-audio-label] { display: none; }
  .hud-br a.btn.ghost[href="/learn"],
  .hud-br a.btn.ghost[href*="learn"],
  .hud-br a.btn.ghost[href*="whiterabbit.top/"] { display: none; }

  .meta {
    bottom: calc(58px + env(safe-area-inset-bottom, 0px));
    right: calc(12px + env(safe-area-inset-right, 0px));
    font-size: 10px;
    z-index: 26;
    text-align: right;
    max-width: 42vw;
  }
  .meta .t { font-size: 12px; }
  .meta > div:nth-child(n+3) { display: none; } /* clock + city only */

  /* filters: horizontal scroll + edge fade so LEARN/FAQ reachable */
  .filters-wrap {
    left: 0; right: 0; transform: none;
    bottom: calc(4px + env(safe-area-inset-bottom, 0px));
    width: 100%;
    max-width: none;
    padding: 0;
    gap: 0;
    z-index: 40;
    pointer-events: auto;
  }
  .filter-label { font-size: 9px; opacity: .35; margin-bottom: 0; }
  .filters {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 4px;
    padding: 2px 28px 8px 10px;
    width: 100%;
    box-sizing: border-box;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
    scrollbar-width: none;
    mask-image: linear-gradient(90deg, #000 0%, #000 calc(100% - 28px), transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 calc(100% - 28px), transparent 100%);
  }
  .filters::-webkit-scrollbar { display: none; }
  .filters button {
    flex: 0 0 auto;
    min-height: 40px;
    padding: 0 10px 0 0;
    font-size: 11px;
    touch-action: manipulation;
  }
  .filters button span { padding: 0 5px 0 7px; }
  .filters button::after { width: 14px; height: 40px; }

  /* mobile panels: room for full tariffs/net/faq; 360 bg visible behind */
  .stage {
    left: 0; right: 0;
    top: calc(52px + env(safe-area-inset-top, 0px));
    bottom: calc(58px + env(safe-area-inset-bottom, 0px));
    padding: 6px 10px 10px;
    display: block;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    pointer-events: none;
    z-index: 15;
  }
  .panel {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    max-height: none;
    min-height: 0;
    padding: 12px 12px 12px;
    border-radius: 12px;
    box-sizing: border-box;
    pointer-events: auto;
    overflow: visible;
    background: rgba(8,8,7,.94);
  }
  /* HUB: inactive panels must not stay in document flow (looked "empty") */
  .panel:not(.on) {
    display: none !important;
  }
  .panel.on {
    display: block !important;
  }
  .panel.home-lite,
  .panel.home-lite.on {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    max-height: none;
    padding: 12px 12px 10px;
    background: rgba(14,14,13,.94);
    border: 1px solid rgba(237,254,249,.14);
    backdrop-filter: blur(12px);
    box-shadow: 0 10px 28px rgba(0,0,0,.45);
    pointer-events: none;
  }
  .panel.home-lite .actions,
  .panel.home-lite .actions a,
  .panel.home-lite .actions button { pointer-events: auto; }
  .panel h1 { font-size: clamp(1.25rem, 6.5vw, 1.7rem); margin-bottom: 4px; line-height: 1.05; }
  .panel h2 { font-size: clamp(1.05rem, 4.6vw, 1.25rem); line-height: 1.2; color: #edfef9; }
  .panel .lede { font-size: 12px; max-width: none; margin-bottom: 8px; }
  .panel .tag { font-size: 10px; margin-bottom: 4px; }
  .metrics { display: none; }
  .row { padding: 5px 0; gap: 4px 8px; }
  .row .ping { font-size: 12px; color: #edfef9; }
  .list, .plans, .faq { margin-top: 4px; }
  .plans .plan { padding: 6px 0; grid-template-columns: 1fr auto; gap: 6px; align-items: center; }
  .plan .pr { font-size: 1.05rem; }
  .plan .ds { font-size: 10px; }
  .faq details { padding: 6px 0; }
  .faq summary { font-size: 12px; min-height: 32px; align-items: center; }
  .panel .lede { display: block; }
  /* meta above filters, don't cover panel */
  .meta {
    bottom: calc(62px + env(safe-area-inset-bottom, 0px));
    z-index: 26;
  }
  .actions { gap: 8px; flex-wrap: wrap; }
  .actions .btn { min-height: 40px; flex: 1 1 calc(50% - 6px); }

  /* checkout = true bottom sheet */
  .modal {
    align-items: flex-end !important;
    justify-content: stretch !important;
    padding: 0 !important;
  }
  .modal .sheet,
  .sheet {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 18px 18px 0 0 !important;
    border-left: none;
    border-right: none;
    border-bottom: none;
    padding: 18px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    max-height: min(88dvh, 720px);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }
  .sheet .plan-pick { gap: 6px; margin: 10px 0 12px; }
  .sheet .plan-opt { padding: 12px; min-height: 48px; }
  .sheet .plan-opt .pr { font-size: 1.1rem; }
  .sheet input { min-height: 44px; font-size: 16px; }
  #payGo, #payClose { min-height: 48px; }
}

@media (max-width: 900px) and (orientation: landscape) {
  .stage {
    top: calc(40px + env(safe-area-inset-top, 0px));
    bottom: calc(48px + env(safe-area-inset-bottom, 0px));
    padding-top: 4px;
  }
  .panel, .panel.home-lite.on { max-height: none; }
  .panel h1 { font-size: 1.15rem; }
  .panel .lede { font-size: 11px; margin-bottom: 6px; }
  .meta { bottom: calc(44px + env(safe-area-inset-bottom, 0px)); font-size: 9px; }
  .modal { align-items: flex-end !important; padding: 0 !important; }
  .modal .sheet, .sheet { border-radius: 14px 14px 0 0; max-height: 92dvh; }
}

@media (max-width: 420px) {
  .panel.home-lite.on { padding: 10px; }
  .panel.home-lite h1 { font-size: clamp(1.25rem, 6.5vw, 1.65rem); }
}


@media (min-width: 901px) {
  .panel:not(.on) { display: none !important; }
  .panel.on { display: block; }
  .panel.home-lite.on { display: block; }
  .panel:not(.home-lite) { overflow-y: auto; max-height: calc(100dvh - 9vh - 100px); }
}

/* support chat fab + popup */
/* 17.09.2026: кнопка была мелкой и терялась — сделали крупной, с пульсом и пузырём-приветствием */
.support-fab{position:fixed;right:var(--pad);bottom:calc(var(--pad) + 96px);z-index:45;padding:14px 20px;font-size:15px;font-weight:600;border-radius:999px;gap:10px;box-shadow:0 10px 30px rgba(0,0,0,.55),0 0 0 0 rgba(237,254,249,.35);animation:fabPulse 3.2s ease-out infinite}
.support-fab svg{width:20px;height:20px}
@keyframes fabPulse{0%{box-shadow:0 10px 30px rgba(0,0,0,.55),0 0 0 0 rgba(237,254,249,.30)}70%{box-shadow:0 10px 30px rgba(0,0,0,.55),0 0 0 14px rgba(237,254,249,0)}100%{box-shadow:0 10px 30px rgba(0,0,0,.55),0 0 0 0 rgba(237,254,249,0)}}
@media (prefers-reduced-motion:reduce){.support-fab{animation:none}}
/* пузырь-приветствие рядом с кнопкой */
.support-hello{position:fixed;right:calc(var(--pad) + 4px);bottom:calc(var(--pad) + 156px);z-index:46;max-width:min(300px,78vw);padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:rgba(10,14,13,.96);color:var(--fg);font-size:14px;line-height:1.45;box-shadow:0 12px 32px rgba(0,0,0,.6);cursor:pointer;opacity:0;transform:translateY(8px);transition:opacity .35s ease,transform .35s ease;pointer-events:none}
.support-hello.on{opacity:1;transform:translateY(0);pointer-events:auto}
.support-hello .x{position:absolute;top:4px;right:8px;color:var(--dim);font-size:16px;line-height:1;background:none;border:0;cursor:pointer;padding:4px}
/* контакты и скриншот в чате */
.chat-id{display:flex;gap:8px;margin:0 0 8px}
.chat-id input{flex:1;margin:0;font-size:13px;padding:9px 10px}
.chat-shots{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0 0}
.chat-shot{position:relative;width:54px;height:54px;border-radius:10px;overflow:hidden;border:1px solid var(--line)}
.chat-shot img{width:100%;height:100%;object-fit:cover}
.chat-shot button{position:absolute;top:0;right:0;background:rgba(0,0,0,.65);color:#fff;border:0;font-size:12px;line-height:1;padding:3px 5px;cursor:pointer}
.chat-msg img{max-width:180px;border-radius:10px;display:block;margin-top:6px}
.chat-clip{padding:12px 13px;flex:0 0 auto}
body:not(.entered) .support-fab{opacity:0;visibility:hidden;pointer-events:none}
@media (max-width:900px){
  .support-fab{bottom:calc(72px + env(safe-area-inset-bottom,0px));right:12px;padding:12px 16px;font-size:14px}
  .support-hello{bottom:calc(132px + env(safe-area-inset-bottom,0px));right:12px}
}

/* live chat inside support sheet */
.chat-sheet{width:min(440px,100%)}
.chat-log{display:flex;flex-direction:column;gap:8px;max-height:min(52dvh,420px);overflow-y:auto;padding:4px 2px;margin:4px 0 10px}
.chat-msg{max-width:85%;padding:9px 12px;border-radius:12px;font-size:14px;line-height:1.45;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere}
.chat-msg.me{align-self:flex-end;background:rgba(237,254,249,.10);border:1px solid var(--line);color:var(--fg)}
.chat-msg.bot{align-self:flex-start;background:transparent;border:1px solid var(--line);color:var(--mute)}
.chat-msg.bot b,.chat-msg.bot code{color:var(--fg)}
.chat-msg code{font-family:ui-monospace,monospace;font-size:13px}
.chat-msg.typing{color:var(--dim)}
.chat-msg a{color:var(--fg)}
.chat-row{display:flex;gap:8px;align-items:center}
.chat-row input{flex:1;margin:0}
.chat-row .btn{padding:12px 16px;flex:0 0 auto}

.steps{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px;pointer-events:none}
.steps li{display:flex;gap:10px;align-items:flex-start;padding:8px 10px;border-radius:10px;background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.08)}
.steps .n{font-family:var(--mono,monospace);font-size:11px;opacity:.7;min-width:14px;padding-top:2px}
.steps b{display:block;font-size:13px;letter-spacing:-.02em}
.steps li span{color:#edfef9;opacity:.82;font-size:11px;line-height:1.35}
@media (max-width:720px){.steps{margin-top:10px;gap:6px}.steps li{padding:7px 8px}}