:root{
  --bg:#000; --bg2:#080a09; --panel:#0c0f0d;
  --card:rgba(255,255,255,.04); --card2:rgba(255,255,255,.06); --line:rgba(255,255,255,.09); --line2:rgba(255,255,255,.14);
  --green:#1C9136; --mint:#2FD46A; --green-dim:rgba(47,212,106,.14);
  --text:#f1f6f2; --muted:#8fa898; --muted2:#5f7468; --danger:#ff5c5c;
  --display:'Unbounded',system-ui,'Segoe UI',sans-serif;
  --sans:system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --r:16px; --r-lg:22px; --r-xl:30px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html,body{overflow-x:hidden}
img,canvas,svg{max-width:100%}
.drawer-auth{display:none}
body{
  margin:0;font-family:var(--sans);color:var(--text);line-height:1.6;background:var(--bg);
  background-image:
    radial-gradient(680px 460px at 78% -6%, rgba(47,212,106,.16), transparent 60%),
    radial-gradient(560px 520px at 8% 8%, rgba(28,145,54,.13), transparent 60%),
    radial-gradient(900px 700px at 50% 108%, rgba(28,145,54,.10), transparent 60%);
  background-attachment:fixed;background-repeat:no-repeat;
  text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
.mint{color:var(--mint)}
.muted{color:var(--muted)} .tiny{font-size:13px} .center{text-align:center}
h1,h2,h3,.display{font-family:var(--display);font-weight:700;color:#fff;line-height:1.06;letter-spacing:-.02em;margin:0}
p{margin:0}
.wrap{max-width:1160px;margin:0 auto;padding:0 22px}
section{padding:80px 0}
.eyebrow{display:inline-block;font-family:var(--display);font-weight:600;font-size:13px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mint);margin-bottom:16px}

/* ---------- buttons ---------- */
/* line-height:1 is load-bearing: without it <a class="btn"> inherits body's 1.6 while a
   native <button class="btn"> uses UA 'normal' — so a green anchor CTA renders ~3px taller
   than an adjacent ghost <button> (the recurring "thick green + thin black" mismatch).
   Pinning it makes every .btn the same height regardless of element type. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--display);font-weight:600;line-height:1;
  font-size:15px;padding:13px 26px;border-radius:999px;border:1px solid transparent;cursor:pointer;
  transition:transform .15s ease,background .15s ease,border-color .15s,box-shadow .15s;white-space:nowrap}
.btn.primary{background:var(--mint);color:#04140a;box-shadow:0 10px 30px rgba(47,212,106,.22)}
.btn.primary:hover{transform:translateY(-2px);box-shadow:0 14px 38px rgba(47,212,106,.34)}
.btn.ghost{background:rgba(255,255,255,.03);border-color:var(--line2);color:#fff}
.btn.ghost:hover{border-color:var(--mint);color:var(--mint);transform:translateY(-2px)}
.btn.sm{padding:9px 18px;font-size:14px}
.btn.full{width:100%}
.btn.danger{background:transparent;border-color:var(--danger);color:var(--danger);box-shadow:none}
.btn.danger:hover{background:var(--danger);color:#fff;transform:translateY(-2px)}

/* Logout-confirm popover (mirrors services/dashboard header): the signed-in «Выйти»
   button opens this instead of logging out directly; only «Подтвердить выход» inside
   it hits the dashboard's GET /logout. Injected by app.js's syncAuth() when signed in. */
.logout-wrap{position:relative;display:inline-flex}
.logout-confirm{position:absolute;top:calc(100% + 8px);right:0;z-index:50;min-width:210px;max-width:280px;
  background:var(--bg2);border:1px solid var(--line2);border-radius:var(--r);
  box-shadow:0 16px 30px rgba(0,0,0,.4);padding:12px;text-align:left}
.logout-confirm p{margin:0 0 10px;font-size:13.5px;color:var(--muted);word-break:break-word}
.logout-confirm .btn{width:100%}

/* ---------- header ---------- */
/* The dashboard is the visual baseline for the site-wide header shell. Page
   navigation remains local, but the bar's colour, dimensions and alignment do not. */
header.nav{position:sticky;top:0;z-index:30;background:rgba(0,0,0,.62);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;gap:18px;height:66px;max-width:1080px;margin:0 auto;padding:0 22px}
.brand{display:flex;align-items:center;gap:9px;font-family:var(--display);font-weight:700;font-size:18px;color:#fff;flex-shrink:0}
.brand img{height:31px}
.brand .bn{white-space:nowrap}
/* single nav container — horizontal on desktop, burger dropdown on mobile */
.nav-menu{margin-left:auto;display:flex;align-items:center;gap:18px;flex-shrink:0}
.nav-menu a{transition:color .15s;white-space:nowrap}
.sys-pill{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);white-space:nowrap;
  background:rgba(255,255,255,.03);border:1px solid var(--line);padding:7px 13px;border-radius:999px}
/* Dashboard's header link selector raises this pill to 15px on desktop. Keep
   the effective typography and resulting button height identical here. */
.nav-menu .sys-pill{font-size:15px}
.sys-pill .dot{width:8px;height:8px;border-radius:50%;background:var(--mint);box-shadow:0 0 8px rgba(47,212,106,.8);animation:pulse 2.4s infinite}
.sys-pill.bad .dot{background:var(--danger);box-shadow:0 0 8px rgba(255,92,92,.8)}
.nav-auth{display:flex;align-items:center;gap:12px}
/* Header auth controls use the dashboard's compact 14px button geometry. Keep
   this scoped to the header so the larger landing-page CTAs remain unchanged. */
.nav-auth .btn.sm{padding:8px 15px}
.nav-menu .nav-login{color:var(--muted);font-size:15px}
.nav-menu .nav-login:hover{color:#fff}
.nav-auth .btn.primary{box-shadow:0 8px 24px rgba(47,212,106,.2)}
.nav-auth .btn.primary:hover{box-shadow:0 12px 32px rgba(47,212,106,.3)}
/* Flash-free auth state: both button sets are server-rendered; the html.dh-authed class
   (set pre-paint by the header script, kept in sync by app.js) picks which shows. The
   wrappers are display:contents so the <a>s stay direct flex items of .nav-auth (gap +
   mobile column layout keep working). Default = guest; .dh-authed = signed-in. */
.nav-auth .auth-guest{display:contents}
.nav-auth .auth-user{display:none}
html.dh-authed .nav-auth .auth-guest{display:none}
html.dh-authed .nav-auth .auth-user{display:contents}
/* balance pill (signed-in users) — mirrors the dashboard/billing header pill. */
.balance-pill{display:inline-flex;align-items:center;font:600 13px/1 ui-monospace,monospace;color:var(--mint);white-space:nowrap;
  background:rgba(47,212,106,.08);border:1px solid var(--line);padding:7px 13px;border-radius:999px;transition:border-color .15s,color .15s}
.balance-pill[hidden]{display:none}
.balance-pill:hover{color:#fff;text-decoration:none;border-color:var(--mint)}
.balance-pill.neg{color:var(--danger);background:rgba(255,92,92,.08)}
.balance-pill.neg:hover{border-color:var(--danger)}
/* Balance sits right of the logo at every width (populated by app.js). */
.hdr-balance:not([hidden]){display:inline-flex;margin-left:10px}
.nav-social{display:flex;align-items:center;gap:10px}
.nav-social>a,.nav-social>.nav-email-btn{flex:0 0 20px;width:20px;height:20px}
.nav-social a{color:var(--muted);display:flex;transition:color .15s}
.nav-social svg{display:block}
.nav-social a:hover{color:var(--mint)}
.burger{display:none;flex:0 0 auto;flex-direction:column;justify-content:center;align-items:center;
  gap:5px;width:38px;height:38px;margin-left:auto;padding:0;background:transparent;
  border:1px solid var(--line2);border-radius:9px;cursor:pointer}
.burger span{display:block;width:18px;height:2px;background:#fff;border-radius:2px;transition:transform .2s,opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(47,212,106,.5)}70%{box-shadow:0 0 0 7px rgba(47,212,106,0)}100%{box-shadow:0 0 0 0 rgba(47,212,106,0)}}

/* ---------- hero ---------- */
.hero{padding:96px 0 70px;text-align:center}

/* ---------- site-wide animated background (fixed behind the whole page) ----------
   Confined to the gutters outside .wrap's 1160px content column, so it never shows
   through translucent panels (.card, .config .panel use rgba(255,255,255,.04) and
   let anything behind them bleed through almost unchanged). Below 1300px there's
   no meaningful gutter left, so the effect just hides itself. */
.bg-fx{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 86%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 86%,transparent 100%)}
.bg-grid{display:none}
@media(min-width:1300px){
  /* .bg-grid is the static dissolve window: fades in from the outer screen edge,
     holds solid through the gutter, fades out toward the centered content column.
     This mask must stay put — only .bg-grid-inner (the actual pattern) gets the
     cursor-parallax transform, so the soft edges never visibly shift; just the
     texture drifts gently inside a fixed frame instead of the whole patch sliding. */
  .bg-grid{display:block;position:absolute;inset:0;overflow:hidden;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 50px,#000 calc(50% - 620px),transparent calc(50% - 580px),transparent calc(50% + 580px),#000 calc(50% + 620px),#000 calc(100% - 50px),transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0,#000 50px,#000 calc(50% - 620px),transparent calc(50% - 580px),transparent calc(50% + 580px),#000 calc(50% + 620px),#000 calc(100% - 50px),transparent 100%)}
  .bg-grid-inner{position:absolute;inset:-60px;will-change:transform;
    background-image:linear-gradient(rgba(47,212,106,.07) 2px,transparent 2px),linear-gradient(90deg,rgba(47,212,106,.07) 2px,transparent 2px);
    background-size:50px 50px}
}
.hero .eyebrow-pill{display:inline-flex;align-items:center;gap:9px;background:var(--green-dim);border:1px solid rgba(47,212,106,.25);
  color:var(--mint);font-size:13px;padding:8px 16px;border-radius:999px;margin-bottom:28px}
.hero .eyebrow-pill .dot{width:8px;height:8px;border-radius:50%;background:var(--mint);box-shadow:0 0 8px rgba(47,212,106,.9)}
.hero h1{font-size:clamp(40px,7.4vw,82px);max-width:14ch;margin:0 auto 22px}
.hero h1 .g{background:linear-gradient(120deg,#2FD46A,#1C9136);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .sub{font-size:clamp(16px,2vw,20px);color:var(--muted);max-width:600px;margin:0 auto 34px;line-height:1.6}
.hero .actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.hero .ping{display:inline-flex;align-items:center;gap:8px;margin-top:30px;color:var(--muted);font-size:14px}
.hero .ping b{color:var(--mint);font-variant-numeric:tabular-nums}
.hero .ping .dot{width:7px;height:7px;border-radius:50%;background:var(--mint)}

/* ---------- live stats strip ---------- */
.stats-strip{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;max-width:1000px;margin:0 auto}
.stats-strip .s{background:var(--panel);padding:24px 16px;text-align:center}
.stats-strip .n{font-family:var(--display);font-weight:700;font-size:30px;color:#fff;font-variant-numeric:tabular-nums;line-height:1}
.stats-strip .n .u{color:var(--mint);font-size:18px}
.stats-strip .l{margin-top:8px;font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.stats-head{text-align:center}
.stats-head .status-banner{font-size:16px;padding:12px 22px;margin:0 auto 16px}
.status-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;max-width:1000px;margin:1px auto 0}
.status-grid .scell{background:var(--panel);padding:15px 16px;display:flex;flex-direction:column;gap:5px}
.status-grid .scell .nm{display:flex;align-items:center;gap:9px;color:#fff;font-size:14px}
.status-grid .scell .nm .dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;background:var(--mint);box-shadow:0 0 8px rgba(47,212,106,.7)}
.status-grid .scell.bad .nm .dot{background:var(--danger);box-shadow:0 0 8px rgba(255,92,92,.7)}
.status-grid .scell .mt{padding-left:18px;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.status-grid .scell.bad .mt{color:#ffb3b3}
.status-more{text-align:center;margin-top:16px;font-size:14px}
.stats-strip.strip-3{grid-template-columns:repeat(3,1fr);max-width:760px}

/* ---------- section heading ---------- */
.sec-head{text-align:center;max-width:720px;margin:0 auto 50px}
.sec-head h2{font-size:clamp(30px,4.6vw,52px)}
/* Configurator heading: a big white «Создать сервер» title with a fixed gap above it
   (was a small green eyebrow with an oversized gap to the previous section). */
#config{padding-top:64px}
.cfg-head{text-align:left;max-width:none;margin:0 0 30px}
.cfg-head h2{font-size:clamp(28px,4vw,44px);color:#fff}
.sec-head h2 .dim{color:var(--muted2)}
.sec-head p{color:var(--muted);margin-top:18px;font-size:17px}

/* ---------- cards / why-us ---------- */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;transition:border-color .2s,transform .2s,background .2s}
.card:hover{border-color:var(--line2);background:var(--card2);transform:translateY(-3px)}
.card .ic{width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;
  background:var(--green-dim);color:var(--mint);margin-bottom:18px}
.card .ic svg{width:24px;height:24px}
.card h3{font-size:19px;margin-bottom:9px;font-family:var(--display);font-weight:600;color:#fff}
.card p{color:var(--muted);font-size:15px}

/* ---------- brand statement ---------- */
.brandblk{text-align:center;padding:64px 0}
.brandblk .lab{font-family:var(--display);color:var(--muted2);letter-spacing:.3em;text-transform:uppercase;font-size:15px;margin-bottom:6px}
.brandblk .big{font-family:var(--display);font-weight:800;font-size:clamp(64px,16vw,200px);line-height:.92;letter-spacing:-.03em;
  color:transparent;-webkit-text-stroke:1.4px rgba(255,255,255,.16)}
.brandblk .big .fill{-webkit-text-stroke:0;background:linear-gradient(120deg,#2FD46A,#1C9136);-webkit-background-clip:text;background-clip:text;color:transparent}
.brandblk .tag{color:var(--muted);max-width:560px;margin:26px auto 0;font-size:17px}

/* ---------- configurator ---------- */
.config{display:grid;grid-template-columns:1.55fr 1fr;gap:22px;align-items:start}
/* min-width:0 overrides the grid item's automatic min-width:auto, which otherwise
   sizes off the widest descendant's min-content (the stage-1 carousel row) and can
   blow the panel wider than its 1fr track on narrow viewports. */
.config .panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r-xl);padding:30px;min-width:0}
.cfg-step+ .cfg-step{margin-top:30px;padding-top:30px;border-top:1px solid var(--line)}
.cfg-step-h{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:600;color:#fff;margin-bottom:18px;font-size:17px}
.cfg-step-h .num{width:24px;height:24px;border-radius:50%;background:var(--green-dim);color:var(--mint);font-size:13px;
  display:flex;align-items:center;justify-content:center}
.choice{display:flex;align-items:center;gap:14px;background:rgba(255,255,255,.02);border:1px solid var(--mint);
  border-radius:var(--r);padding:16px 18px;position:relative}
.choice .t{font-family:var(--display);font-weight:600;color:#fff}
.choice .d{color:var(--muted);font-size:14px;margin-top:2px}
.choice .free{margin-left:auto;font-family:var(--display);font-weight:700;font-size:13px;color:var(--mint);
  background:var(--green-dim);padding:6px 13px;border-radius:999px;letter-spacing:.04em}
.res+ .res{margin-top:24px}
.res-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px}
.res-head .name{color:var(--muted);font-size:15px}
.res-head .val{font-family:var(--display);font-weight:700;font-size:24px;color:#fff;font-variant-numeric:tabular-nums}
.slider-value-edit{cursor:text;outline:none!important;border:0!important;background:transparent!important;padding:0;margin:0;box-shadow:none!important;-webkit-appearance:none;appearance:none}
.slider-value-edit:focus{outline:none!important;border:0!important;box-shadow:none!important}
.minmax{display:flex;justify-content:space-between;color:var(--muted2);font-size:12px;margin-top:8px;font-variant-numeric:tabular-nums}
/* CS2 shared-base overlay badge — big green letters right after the NVMe value */
.res-right{display:flex;align-items:baseline;gap:12px}
.ov-badge{position:relative;color:var(--mint);font-family:var(--display);font-weight:700;
  font-size:24px;line-height:1;white-space:nowrap}
.ov-badge[hidden]{display:none}
.ov-info{vertical-align:super;margin-left:2px;background:transparent;border:0;color:var(--mint);
  font-family:var(--sans);font-weight:700;font-size:12px;line-height:1;cursor:pointer;padding:0}
.ov-info:hover{opacity:.75}
.ov-pop{position:absolute;right:0;top:calc(100% + 8px);z-index:30;width:290px;white-space:normal;text-align:left;
  background:#0c0f0d;border:1px solid var(--line2);border-radius:12px;padding:11px 13px;color:var(--muted);
  font-family:var(--sans);font-weight:400;font-size:13px;line-height:1.5;box-shadow:0 18px 44px rgba(0,0,0,.65)}
.ov-pop[hidden]{display:none}
/* Site-wide hover tooltip (see info-tip.js) — mirrors services/dashboard. */
.dh-fixed-tip{position:fixed;z-index:9999;max-width:280px;background:var(--panel);border:1px solid var(--line2);
  border-radius:8px;padding:8px 11px;font-family:var(--sans);font-size:12.5px;font-weight:500;line-height:1.45;
  color:#fff;white-space:normal;text-align:left;pointer-events:none;box-shadow:0 10px 28px rgba(0,0,0,.5);
  opacity:0;transform:translateY(4px);transition:opacity .15s,transform .15s}
.dh-fixed-tip.show{opacity:1;transform:translateY(0)}
/* ── Unified info glyph (ⓘ) + iOS switch — mirrors services/dashboard. ── */
.info-dot{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;flex:0 0 18px;
  padding:0;border:0;background:transparent;color:var(--mint);cursor:help;opacity:.8;vertical-align:middle;
  -webkit-tap-highlight-color:transparent;transition:opacity .15s}
.info-dot:hover,.info-dot:focus-visible{opacity:1;outline:none}
.info-dot svg{width:18px;height:18px;display:block;pointer-events:none}
.dh-switch{position:relative;display:inline-flex;flex:0 0 auto;width:38px;height:22px;cursor:pointer;vertical-align:middle}
.dh-switch input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:pointer;z-index:1}
.dh-switch-track{position:absolute;inset:0;border-radius:999px;background:rgba(255,255,255,.14);
  border:1px solid var(--line2);transition:background .18s,border-color .18s}
.dh-switch-knob{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.4);transition:transform .18s}
.dh-switch input:checked ~ .dh-switch-track{background:var(--mint);border-color:var(--mint)}
.dh-switch input:checked ~ .dh-switch-track .dh-switch-knob{transform:translateX(16px)}
.dh-switch input:focus-visible ~ .dh-switch-track{box-shadow:0 0 0 3px rgba(47,212,106,.35)}
/* «Ассистент DristHosting» toggle — top-right corner of the «Ядро» stage header. */
.cfg-step-h-core{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.cfg-step-h-title{display:inline-flex;align-items:center;gap:10px}
.cfg-assist{display:inline-flex;align-items:center;gap:8px}
.cfg-assist[hidden]{display:none}
.cfg-assist-label{color:var(--muted);font-size:13.5px;font-weight:600;white-space:nowrap}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:6px;
  background:rgba(255,255,255,.08);outline:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;
  background:var(--mint);border:3px solid #06140a;box-shadow:0 0 0 1px var(--mint),0 4px 12px rgba(47,212,106,.5);cursor:pointer}
input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--mint);border:3px solid #06140a;cursor:pointer}
.slider-lock-wrap{position:relative;display:flex;align-items:center}
.slider-lock-wrap input[type=range]{width:100%;position:relative;z-index:1}
/* Stage-1 server-type picker: looped carousel (drag or arrow buttons), one big
   logo+title focused at a time. JS renders a window of BUFFER items either side
   of the active one (see initGroupCarousel) so the strip never runs out to drag. */
.cfg-carousel{display:flex;align-items:center;justify-content:center;gap:16px;margin:0 0 6px;user-select:none;min-width:0}
.cfg-car-arrow{flex:0 0 auto;width:38px;height:38px;border-radius:50%;background:#0a0d0b;color:#cfe;
  border:1px solid var(--line2);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:border-color .15s,color .15s,transform .1s}
.cfg-car-arrow:hover{border-color:var(--mint);color:#fff}
.cfg-car-arrow:active{transform:scale(.92)}
.cfg-car-arrow svg{width:18px;height:18px;display:block;pointer-events:none}
/* min-width:0 lets this shrink below its 280px target on narrow panels — without it,
   a grid-item ancestor's automatic min-width blows the panel wider than the viewport
   (grid/flex "min-content" overflow bug). */
.cfg-car-viewport{overflow:hidden;width:100%;max-width:280px;min-width:0;touch-action:pan-y}
.cfg-car-track{display:flex;cursor:grab}
.cfg-car-track.dragging{cursor:grabbing}
.cfg-car-item{flex:0 0 100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
  padding:22px 10px 6px;box-sizing:border-box}
.cfg-car-logo{width:88px;height:88px;object-fit:contain;opacity:.4;transform:scale(.8);pointer-events:none;-webkit-user-drag:none;
  filter:drop-shadow(0 10px 26px rgba(47,212,106,.12));transition:opacity .38s cubic-bezier(.22,.9,.32,1),transform .38s cubic-bezier(.22,.9,.32,1)}
.cfg-car-title{font-family:var(--display);font-weight:700;font-size:19px;color:#7d9b8c;text-align:center;
  opacity:.5;transition:opacity .38s,color .38s}
.cfg-car-item.active .cfg-car-logo{opacity:1;transform:scale(1);filter:drop-shadow(0 10px 26px rgba(47,212,106,.3))}
.cfg-car-item.active .cfg-car-title{opacity:1;color:#fff}
.cfg-car-dots{display:flex;align-items:center;justify-content:center;gap:2px;margin-bottom:2px}
/* Each dot is a real <button> with a larger invisible hit area (16x16) around the
   visible 6px circle, so they're comfortably clickable/tappable, not just decorative. */
.cfg-car-dot{width:16px;height:16px;padding:0;border:0;background:transparent;display:flex;
  align-items:center;justify-content:center;cursor:pointer}
.cfg-car-dot::after{content:'';width:6px;height:6px;border-radius:50%;background:var(--line2);
  transition:background .2s,transform .2s;display:block}
.cfg-car-dot:hover::after{background:#9fb}
.cfg-car-dot.active::after{background:var(--mint);transform:scale(1.3)}
/* Stage 1 only: the «1 Тип сервера» label lives below the carousel/dots and is pulled
   up to overlap that footer whitespace, instead of sitting in its own row above the
   carousel like stages 2/3's headers — trims the stage's overall height. Left-anchored
   (not centered) to match stages 2/3's headers. */
.cfg-step-h-type{margin:-9px 0 0}
.cfg-selects{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}
/* custom dropdown (logos in options) */
.csel{position:relative}
.csel-trigger{width:100%;display:flex;align-items:center;gap:10px;background:#0a0d0b;color:#fff;border:1px solid var(--line2);
  border-radius:12px;padding:11px 36px 11px 12px;font-size:15px;font-family:var(--sans);cursor:pointer;text-align:left;min-height:46px}
.csel.open .csel-trigger,.csel-trigger:focus{outline:none;border-color:var(--mint)}
.csel-logo{width:26px;height:26px;object-fit:contain;flex-shrink:0;filter:drop-shadow(0 0 4px rgba(47,212,106,.4))}
.csel-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.csel-caret{position:absolute;right:14px;top:50%;width:9px;height:9px;border-right:2px solid var(--muted);
  border-bottom:2px solid var(--muted);transform:translateY(-70%) rotate(45deg);transition:transform .15s}
.csel.open .csel-caret{transform:translateY(-30%) rotate(225deg)}
.csel-menu{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:25;background:#0c0f0d;border:1px solid var(--line2);
  border-radius:12px;padding:6px;box-shadow:0 18px 44px rgba(0,0,0,.65);max-height:300px;overflow:auto}
/* opens upward when there isn't room below in the viewport (JS adds .up) */
.csel.up .csel-menu{top:auto;bottom:calc(100% + 6px)}
.csel-opt{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:9px;cursor:pointer;font-size:15px;color:#fff}
.csel-opt:hover{background:rgba(255,255,255,.06)}
.csel-opt.sel{background:var(--green-dim);color:var(--mint)}
.csel-opt.disabled{opacity:.3;cursor:not-allowed}
.csel-opt.disabled:hover{background:transparent}
.csel-group{padding:9px 10px 4px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.csel-group:not(:first-child){margin-top:4px;border-top:1px solid var(--line2);padding-top:9px}
.csel-disabled{opacity:.5}
.csel-disabled .csel-trigger{cursor:not-allowed}
.cfg-sel label{display:block;color:var(--muted);font-size:13px;margin-bottom:7px}
select{width:100%;background:#0a0d0b;color:#fff;border:1px solid var(--line2);border-radius:12px;padding:12px 38px 12px 14px;
  font-size:15px;font-family:var(--sans);appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238fa898' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right 13px center}
select:focus{outline:none;border-color:var(--mint)}
select option{background:#0a0d0b;color:#fff}
select option:disabled{color:#46564c}
.cfg-java{margin-top:13px;color:var(--muted);font-size:13px}
.config .summary{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-xl);padding:30px;position:sticky;top:88px}
.summary .lab{font-family:var(--display);color:var(--muted2);text-transform:uppercase;letter-spacing:.16em;font-size:12px;margin-bottom:14px}
.summary .price{font-family:var(--display);font-weight:800;font-size:46px;color:#fff;line-height:1;margin-bottom:16px;display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.summary .price .g{background:linear-gradient(120deg,#2FD46A,#1C9136);-webkit-background-clip:text;background-clip:text;color:transparent}
.summary .price small{display:block;font-size:14px;color:var(--muted);font-weight:400;margin-top:6px;font-family:var(--sans)}
.summary .spec{color:var(--muted);font-size:14px;margin:18px 0;line-height:1.7;border-top:1px solid var(--line);padding-top:18px}
.summary .btn{margin-bottom:10px}
.price-period{display:inline-flex;gap:4px;background:rgba(255,255,255,.04);border:1px solid var(--line2);border-radius:10px;padding:3px;margin-top:2px}
.price-period-btn{font-family:var(--sans);font-size:12px;font-weight:600;color:var(--muted);background:none;border:0;border-radius:7px;
  padding:6px 12px;cursor:pointer;transition:background .15s,color .15s}
.price-period-btn:hover{color:#fff}
.price-period-btn.active{background:var(--green-dim);color:var(--mint)}
.price-list{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:14px 0;margin-bottom:18px;display:flex;flex-direction:column;gap:9px}
.price-row{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;color:var(--muted)}
.price-row b{color:#fff;font-weight:600;font-variant-numeric:tabular-nums}
.summary .ping{display:flex;align-items:center;justify-content:center;gap:8px;color:var(--muted);font-size:13px;margin-top:8px}
.summary .ping b{color:var(--mint);font-variant-numeric:tabular-nums}
.summary .ping .dot{width:7px;height:7px;border-radius:50%;background:var(--mint)}

/* ---------- hero location tag ---------- */
.loc-tag{display:inline-flex;align-items:center;gap:5px;color:var(--muted);font-size:14px;white-space:nowrap}
.loc-tag img{display:block;border-radius:2px;flex-shrink:0}
.ping-sep{margin:0 6px;color:var(--line2)}

/* ---------- contact CTA ---------- */
.contact{text-align:center;padding-top:0}
.contact h2{font-size:clamp(32px,5vw,58px);margin-bottom:30px}
.contact p{color:var(--muted);max-width:560px;margin:20px auto 30px;font-size:17px}
.contact .actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ---------- copy email button ---------- */
.copy-email-btn img{filter:brightness(0) invert(.55);flex-shrink:0}
.copy-email-btn.copied{border-color:var(--mint);color:var(--mint)}
.copy-email-text{transition:opacity .15s ease}

/* ---------- nav email button ---------- */
.nav-email-btn{background:none;border:0;cursor:pointer;color:var(--muted);display:flex;align-items:center;justify-content:center;transition:color .15s;padding:0;position:relative}
.nav-email-btn:hover{color:var(--mint)}
.nav-email-tip{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);background:var(--panel);border:1px solid var(--line2);border-radius:8px;padding:5px 10px;font-size:12px;color:#fff;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .2s;z-index:50}
.nav-email-tip.show{opacity:1}

/* ---------- server specs ---------- */
.hw-specs{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;gap:10px 12px}
.hw-item{display:flex;align-items:center;gap:9px}
.hw-item div{display:flex;flex-direction:column;line-height:1.3}
.hw-item b{color:#fff;font-size:13px;font-weight:600}
.hw-item span{color:var(--muted2);font-size:11px}
.hw-icon{width:28px;height:28px;object-fit:contain;flex-shrink:0}
.hw-photo{border-radius:6px;object-fit:cover}

/* ---------- uptime badge ---------- */
.uptime-pct{color:var(--mint);font-variant-numeric:tabular-nums;font-weight:600}

/* ---------- faq ---------- */
.faq{max-width:780px;margin:0 auto}
.faq details{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px 22px;margin-bottom:12px}
.faq summary{cursor:pointer;list-style:none;font-family:var(--display);font-weight:600;font-size:16px;color:#fff;display:flex;justify-content:space-between;gap:14px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';color:var(--mint);font-weight:700}
.faq details[open] summary::after{content:'–'}
.faq p{color:var(--muted);margin-top:14px;font-size:15px}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);padding:56px 0 30px;background:var(--bg2)}
.foot{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:30px}
.foot .col h4{font-family:var(--display);font-size:13px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted2);margin:0 0 16px}
.foot .col a{display:block;color:var(--muted);font-size:14px;margin-bottom:10px;transition:color .15s}
.foot .col a:hover{color:var(--mint)}
.foot-brand{display:flex;flex-direction:column}
.foot-brand .brand{margin-bottom:14px}
.foot-brand p{color:var(--muted);font-size:14px;max-width:300px}
/* Trademark/affiliation disclaimers sit under the logo; the copyright is pinned
   to the bottom of the brand column so it lines up with the last Документы link. */
.foot-disc p{margin:0 0 8px;color:var(--muted2);font-size:12px;line-height:1.5;max-width:340px}
.foot-copy{margin-top:auto;color:var(--muted2);font-size:13px;white-space:nowrap}
.foot-copy span{display:block}
.foot-copy span + span{margin-top:3px}

/* ---------- status page ---------- */
.status-hero{text-align:center;padding-top:60px}
.status-banner{display:inline-flex;align-items:center;gap:12px;font-family:var(--display);font-size:18px;color:#fff;
  background:var(--card);border:1px solid var(--line);padding:16px 26px;border-radius:999px;margin:18px 0 30px}
.status-banner.bad{border-color:var(--danger)}
.status-banner .dot{width:13px;height:13px;border-radius:50%;background:var(--mint);box-shadow:0 0 12px rgba(47,212,106,.8)}
.status-banner.bad .dot{background:var(--danger)}
.stbl{max-width:760px;margin:0 auto;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.stbl .row{display:flex;justify-content:space-between;align-items:center;padding:17px 22px;border-bottom:1px solid var(--line)}
.stbl .row:last-child{border-bottom:0}
.stbl .row .name{display:flex;align-items:center;gap:11px;color:#fff}
.stbl .row .dot{width:10px;height:10px;border-radius:50%;background:var(--mint)}
.stbl .row.bad .dot{background:var(--danger)}
.stbl .row .meta{color:var(--muted);font-size:13px;font-variant-numeric:tabular-nums}
.load{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;max-width:760px;margin:24px auto 0}
.load .m{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px;text-align:center}
.load .m .n{font-family:var(--display);font-weight:700;font-size:26px;color:var(--mint)}
.load .m .l{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-top:5px}
.load.load-2{grid-template-columns:repeat(2,1fr);max-width:480px}
.charts{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:980px;margin:30px auto 0}
.charts .card h3{font-family:var(--display);font-size:16px;color:#fff;margin-bottom:12px}
.charts .legend{grid-column:1/-1;display:flex;gap:22px;justify-content:center;color:var(--muted);font-size:13px}
.charts .legend i{display:inline-block;width:14px;height:4px;border-radius:2px;margin-right:6px;vertical-align:middle}
.charts .legend i.cpu{background:var(--mint)} .charts .legend i.ram{background:#7fb3ff}
canvas{width:100%;display:block}

/* ---------- legal ---------- */
.legal{max-width:820px;margin:0 auto}
.legal-nav{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.legal-nav a{padding:8px 15px;border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:13px}
.legal-nav a.active,.legal-nav a:hover{color:var(--mint);border-color:var(--mint)}
.legal-doc{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:34px}
.legal-doc h1{font-size:30px;margin-bottom:6px}
.legal-doc h3{font-family:var(--display);font-size:17px;color:#fff;margin:26px 0 8px}
.legal-doc p,.legal-doc li{color:#cdddd2;font-size:15px}
.legal-doc ul{padding-left:20px}.legal-doc li{margin:6px 0}

/* ---------- support widget ---------- */
.support{position:fixed;right:22px;bottom:22px;z-index:50}
/* Dynamic-CAPTCHA challenge modal (shown only when the chat is being flooded) */
.dh-cw{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.6);backdrop-filter:blur(3px)}
.dh-cw[hidden]{display:none}
.dh-cw-card{position:relative;width:min(360px,calc(100vw - 28px));background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:22px;box-shadow:0 20px 50px rgba(0,0,0,.6)}
.dh-cw-x{position:absolute;top:10px;right:12px;background:0;border:0;color:var(--muted);font-size:22px;line-height:1;cursor:pointer}
.dh-cw-h{display:flex;gap:10px;align-items:center;margin-bottom:8px}
.dh-cw-h img{width:30px;height:30px}
.dh-cw-p{color:var(--muted);font-size:14px;margin:0 0 14px}
.dh-cw-widget{min-height:65px;display:flex;justify-content:center}
.support-btn{width:56px;height:56px;border-radius:50%;border:0;background:var(--mint);color:#04140a;cursor:pointer;
  display:flex;align-items:center;justify-content:center;box-shadow:0 10px 30px rgba(0,0,0,.5);transition:transform .15s}
.support-btn:hover{transform:scale(1.07)}
.support-panel{position:absolute;right:0;bottom:70px;width:300px;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:18px;box-shadow:0 20px 50px rgba(0,0,0,.6)}
.sup-head{display:flex;gap:11px;align-items:center;margin-bottom:14px}
.sup-head img{width:34px;height:34px}
.sup-head b{display:block;font-family:var(--display);font-size:15px;color:#fff}
.sup-head .on{color:var(--mint);font-size:12px}
.sup-body{margin-bottom:14px}
.msg{font-size:13px;line-height:1.5;padding:11px 13px;border-radius:13px;background:rgba(255,255,255,.05);color:#cdddd2;border-top-left-radius:4px}
.sup-actions .btn{margin-bottom:8px}
.sup-input{display:flex;gap:8px;margin-top:12px;opacity:.55}
.sup-input input{flex:1;background:#0a0d0b;border:1px solid var(--line);border-radius:10px;padding:9px 12px;color:var(--text);font-size:13px}
.sup-input button{background:var(--line2);border:0;border-radius:10px;width:38px;color:var(--muted);cursor:not-allowed}

/* Mobile Chatwoot: force true full-bleed coverage + lock the page behind it
   so nothing scrolls/peeks in underneath (see footer.ejs chatScrollLock). */
@media(max-width:667px){
  body.dh-chat-lock{position:fixed;left:0;right:0;width:100%;overflow:hidden}
  .woot-widget-holder{top:0!important;left:0!important;right:0!important;bottom:0!important;
    width:100%!important;height:100vh!important;height:100dvh!important;border-radius:0!important}
  .woot-widget-holder iframe{min-height:100%!important}
}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media(max-width:980px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .config{grid-template-columns:1fr}
  .config .summary{position:static}
  .charts{grid-template-columns:1fr}
  .foot{grid-template-columns:1fr 1fr}
}
/* Keep the public headers on the same breakpoint and dropdown treatment as the
   panel. The complete desktop nav no longer fits well before phone widths. */
@media(max-width:1000px){
  section{padding:52px 0}
  .hero{padding:56px 0 42px}
  .nav-menu{display:none}
  .nav-in{position:relative;gap:10px;padding:0 16px}
  /* Keep the menu control pinned to the far edge. With no balance pill (a
     logged-out visitor), margin-left:0 attached it directly to the logo. */
  .burger{display:flex;margin-left:auto;flex-shrink:0}
  /* The brand and balance may yield space, but the menu control never may. This
     keeps every header control inside the viewport at the narrowest widths. */
  .brand{flex-shrink:1;min-width:0}
  .brand .bn{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .hdr-balance:not([hidden]){display:inline-flex;margin-left:auto;flex:0 1 auto;min-width:0;max-width:42vw;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .hdr-balance:not([hidden]) + .burger{margin-left:12px}
  .nav-menu.open{display:flex;position:absolute;top:calc(100% + 6px);right:8px;left:auto;flex-direction:column;
    align-items:stretch;gap:2px;margin:0;padding:6px;width:max-content;min-width:190px;max-width:min(74vw,300px);
    background:var(--bg2);border:1px solid var(--line);border-radius:12px;box-shadow:0 18px 40px rgba(0,0,0,.55);z-index:60}
  .nav-menu.open .sys-pill{margin:4px 6px;padding:8px 15px;line-height:1;justify-content:center;border-radius:999px;
    font-family:var(--display);font-weight:600;font-size:14px;color:#fff;border-color:var(--mint);
    box-shadow:0 0 10px rgba(47,212,106,.35)}
  .nav-menu.open .sys-pill:hover{color:var(--mint);border-color:var(--mint)}
  .nav-menu.open .sys-pill.bad{border-color:var(--danger);box-shadow:0 0 10px rgba(255,92,92,.35)}
  .nav-menu.open .sys-pill.bad:hover{color:var(--danger);border-color:var(--danger)}
  .nav-menu.open .sys-pill .dot{display:none}
  .nav-menu.open .nav-social{display:flex;gap:20px;padding:11px 14px;justify-content:center}
  .nav-menu.open .nav-auth{display:flex;flex-direction:column;gap:8px;padding:8px 10px}
  .nav-menu.open .nav-auth a{width:100%;text-align:center}
  .nav-menu.open .nav-auth .nav-login{padding:11px 14px;border-radius:8px}
  .nav-menu.open .nav-auth .nav-login:hover{background:rgba(255,255,255,.04)}
  /* In the burger dropdown the logout-confirm can't float — flow it inline, full-width. */
  .nav-menu.open .nav-auth .logout-wrap{width:100%}
  .nav-menu.open .nav-auth .logout-wrap>.btn{width:100%}
  .nav-menu.open .logout-confirm{position:static;right:auto;margin-top:8px;min-width:0;max-width:none;box-shadow:none}
  .stats-strip{grid-template-columns:repeat(2,1fr)}
  .stats-strip.strip-3{grid-template-columns:repeat(3,1fr)}
  .status-grid{grid-template-columns:repeat(2,1fr)}
  .load{grid-template-columns:repeat(2,1fr)}
  .charts{grid-template-columns:1fr}
  .foot{grid-template-columns:1fr 1fr}
  .cfg-selects{grid-template-columns:1fr}
}
@media(max-width:560px){
  .wrap{padding:0 16px}
  /* tighter vertical rhythm on phones — the desktop 48-96px section gaps read
     as huge empty bands stacked between the hero, stats, charts and pricing. */
  section{padding:34px 0}
  .hero{padding:30px 0 26px}
  .hero h1{font-size:clamp(32px,9vw,46px)}
  .hero .sub{margin:0 auto 18px}
  .hero .eyebrow-pill{margin-bottom:20px}
  .hero .actions{flex-direction:column}
  .hero .actions .btn,.contact .actions .btn{width:100%}
  footer{padding:34px 0 26px}
  /* legal line: don't jam it against the screen edge — allow it to wrap to two
     lines (the markup already splits it) instead of overflowing on one. */
  .foot-copy{white-space:normal;line-height:1.5}
  .stats-strip .n{font-size:24px}
  .stats-strip .s{padding:18px 8px}
  .stats-strip .l{font-size:11px}
  .sec-head{margin-bottom:34px}
  .sec-head p{font-size:15px}
  .cards{grid-template-columns:1fr}
  .config .panel,.config .summary{padding:22px 18px}
  .summary .price{font-size:38px}
  .foot{grid-template-columns:1fr 1fr;gap:24px}
  .foot-brand{grid-column:1/-1}
  .brandblk .tag,.contact p,.hero .sub{font-size:15px}
  .legal-doc{padding:22px 18px}
  .legal-doc h1{font-size:24px}
  .support{right:14px;bottom:14px}
  .support-panel{width:calc(100vw - 28px);max-width:320px}
  .stbl .row{padding:14px 16px;flex-wrap:wrap;gap:6px}
  .load{grid-template-columns:repeat(2,1fr)}
}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}.sys-pill .dot,.hero .eyebrow-pill .dot{animation:none}.bg-fx{opacity:.4}}