/* ========== CORE VARS ========== */
:root{--bg:#0B1622;--panel:#101D2B;--panel-2:#0C1422;--line:#16263e;--text:#D9E0EA;--muted:#8A98AD;--green:#6CB52D;--yellow:#FDDB0A;--blue:#004AAD;--w:1120px;--pad:16px;--h:64px}

/* ========== GLOBAL ========== */
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial;-webkit-text-size-adjust:100%}
img{display:block;max-width:100%;height:auto}a{color:inherit;text-decoration:none}
.wrap{max-width:var(--w);margin:0 auto;padding:0 var(--pad)}
.h{margin:0 0 10px;font-size:clamp(20px,2.6vw,28px);line-height:1.2}
p{margin:0 0 10px}

/* ========== HEADER ========== */
.header{position:sticky;top:0;z-index:60;background:#0B1622cc;border-bottom:1px solid var(--line);backdrop-filter:saturate(140%) blur(8px)}
.header .wrap{display:flex;align-items:center;justify-content:space-between;min-height:var(--h);gap:12px}

/* NAV */
.nav-desktop{display:none;gap:8px}
.nav-link{display:inline-block;padding:8px 10px;border-radius:8px;color:var(--text)}
.nav-link:hover{background:#0f2038}
.actions{display:flex;align-items:center;gap:8px}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 22px;border-radius:999px;font-weight:600;font-size:16px;text-decoration:none;border:1px solid transparent;transition:all .2s ease;cursor:pointer}
.btn-green{background:var(--green);color:#06140a;border-color:#2a6d22}
.btn-green:hover{filter:brightness(1.05);transform:translateY(-1px)}
.btn-orange{background:linear-gradient(90deg,#FFD600,#FF9C00);color:#1a1300;border:0}
.btn-orange:hover{filter:brightness(1.08);transform:translateY(-1px)}
.btn-outline{background:transparent;border:1px solid #1f3558;color:var(--text)}
.btn-outline:hover{background:#0f2038}
.btn-block{width:100%}

/* BURGER + MOBILE NAV */
.burger{width:40px;height:40px;border:1px solid #1f3558;background:#0f2038;border-radius:10px;display:flex;flex-direction:column;justify-content:center;gap:4px;padding:0 9px}
.burger span{height:2px;background:#fff;border-radius:2px}
.mnav{position:fixed;inset:0;z-index:65;display:grid;grid-template-columns:1fr}
.mnav[hidden]{display:none}
.mnav-scrim{grid-area:1/1/2/2;background:#0007;border:0}
.mnav-panel{grid-area:1/1/2/2;justify-self:end;height:100%;width:min(86vw,360px);background:var(--panel);border-left:1px solid var(--line);transform:translateX(100%);transition:transform .25s ease;padding:14px;z-index:1}
.mnav.open .mnav-panel{transform:none}
.mnav-link{display:block;color:var(--text);padding:12px;border-radius:10px}
.mnav-link:hover{background:#0f2038}
@media(min-width:900px){.nav-desktop{display:flex}.burger{display:none}.mnav{display:none!important}}

/* ========== BREADCRUMBS ========== */
.crumbs{border-bottom:1px solid var(--line);background:#0b1322}
.crumbs ol{margin:0;padding:8px 0;list-style:none;display:flex;gap:8px;color:var(--muted)}
.crumbs li+li::before{content:"›";margin:0 6px;color:#48607c}

/* ========== HERO ========== */
.hero{padding:12px 0}
.hero .wrap{position:relative}

.hero-box{
  aspect-ratio:3/1;
  position:relative;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:12px;
}
.hero-box img{width:100%;height:100%;object-fit:cover}
.hero-overlay{position:absolute;inset:0;background:transparent}

.hero-center{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  padding:16px;text-align:center;
}

.hero-panel{
  background:rgba(16,29,43,.75);
  border:1px solid var(--line);
  border-radius:14px;
  padding:14px;
  width:clamp(280px,40vw,560px);
  margin:auto;
}

.hero-card{
  display:flex;
  flex-direction:column;
  gap:12px;
  width:100%;
}

.bonus-line{
  margin:0;
  color:#dfe7f3;
  text-align:center;
}
.bonus-line strong{color:var(--yellow)}

.btn-block{width:100%}
.hero .btn{border-radius:14px}

.promo-box{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  color:#0b1322;
  border:1px solid #ffcc00;
  border-radius:14px;
  min-height:48px;
  padding:10px 44px;
}
.pc-code{
  font:800 18px/1 system-ui,Segoe UI,Roboto,Ubuntu,Arial;
  letter-spacing:.5px;
  text-align:center;
}

/* иконка копирования */
.pc-ico{
  all:unset;
  position:absolute;
  right:12px;
  top:50%;
  transform:translateY(-50%);
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  cursor:pointer;
}
.pc-ico img{
  width:22px;
  height:22px;
  display:block;
  object-fit:contain;
}
.pc-ico:hover{filter:brightness(1.05)}

.pc-tip{
  position:absolute;
  right:8px;
  top:-10px;
  transform:translateY(-100%);
  background:#ffe178;
  color:#1a1300;
  border:1px solid #ffc400;
  padding:4px 8px;
  border-radius:999px;
  font:700 12px/1 system-ui,Segoe UI,Roboto,Ubuntu,Arial;
  opacity:0;
  pointer-events:none;
  transition:opacity .18s;
}
.pc-tip.show{opacity:1}

@media(max-width:640px){
  .hero-box{aspect-ratio:1/1}
  .hero-panel{width:100%}
  .hero-card{width:100%}
  .pc-code{font-size:17px}
}


/* ========== QUICK NAV ========== */
.qnav{padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#0b1423}
.qnav-head{display:flex;justify-content:space-between;align-items:center}
.qbtn{width:36px;height:36px;border:1px solid var(--line);border-radius:999px;background:#0f2038;color:#dfe6f5}
.qnav-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.qnav-list.closed{display:none}
.chip{display:inline-flex;align-items:center;padding:7px 12px;border-radius:999px;background:#0f1726;border:1px solid var(--line);color:#cfd8e6;white-space:nowrap}
.chip:hover{background:#0f2038}

/* ========== SECTIONS ========== */
.sec{padding:24px 0}
.sec.alt{background:var(--panel-2);border-block:1px solid var(--line)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}

/* ========== LISTS ========== */
ul.checklist{list-style:none;margin:0;padding:0;display:grid;gap:10px}
ul.checklist li{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px 14px 10px 36px;line-height:1.5}
ul.checklist li::before{content:"✓";position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--yellow);font-weight:700;font-size:18px}
ol.steps{counter-reset:st;list-style:none;margin:0;padding:0;display:grid;gap:12px}
ol.steps li{counter-increment:st;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 16px 12px 48px;position:relative;line-height:1.6}
ol.steps li::before{content:counter(st);position:absolute;left:14px;top:50%;transform:translateY(-50%);width:24px;height:24px;background:var(--blue);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:14px}
ol.steps li:hover{background:#0f2038}

/* ========== FAQ ========== */
.faq{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:8px 10px}
.faq+.faq{margin-top:8px}
.faq summary{cursor:pointer;font-weight:700}

/* ========== FOOTER ========== */
.footer{border-top:1px solid var(--line);background:#0b1220}
.footer .wrap{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding:16px var(--pad)}
.foot-nav a{color:var(--muted);margin-right:10px}
.foot-nav a:hover{color:#fff}

/* ========== TO TOP ========== */
.totop{position:fixed;right:14px;bottom:14px;border:1px solid var(--line);background:#0f1726;color:#e9edf5;border-radius:999px;padding:9px 11px;opacity:0;visibility:hidden;transform:translateY(10px);transition:.2s}
.totop.show{opacity:1;visibility:visible;transform:none}