/* ============================================================
   OUTFORGE — Landing redesign
   Built on the app's design system (Onest · Unbounded · JetBrains Mono,
   Telegram-blue accent, near-black surfaces). Accent fully swappable.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin:0; padding:0; }
button { font:inherit; cursor:pointer; border:0; padding:0; background:none; color:inherit; }
input, textarea, select { font:inherit; color:inherit; background:none; border:0; outline:0; }
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }

:root{
  /* spacing */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s7:32px; --s8:40px; --s9:56px; --s10:80px; --s11:120px;
  /* radii */
  --r-xs:8px; --r-sm:10px; --r-md:14px; --r-lg:18px; --r-xl:24px; --r-2xl:30px; --r-pill:999px;

  /* accent — Telegram blue, swappable */
  --accent:#2AABEE;
  --accent-bright: color-mix(in oklab, var(--accent), white 18%);
  --accent-hot:    color-mix(in oklab, var(--accent), white 34%);
  --accent-deep:   color-mix(in oklab, var(--accent), black 34%);
  --accent-soft:   color-mix(in oklab, var(--accent), transparent 88%);
  --accent-softer: color-mix(in oklab, var(--accent), transparent 94%);
  --accent-tint:   color-mix(in oklab, var(--accent), transparent 70%);
  --accent-line:   color-mix(in oklab, var(--accent), transparent 78%);
  --accent-glow:   color-mix(in oklab, var(--accent), transparent 58%);

  --max:1200px;

  --font:'Onest',-apple-system,sans-serif;
  --display:'Unbounded',sans-serif;
  --mono:'JetBrains Mono',monospace;

  /* status */
  --ok:#37D399; --ok-soft:color-mix(in oklab,#37D399,transparent 86%);
  --info:#7E8BF7; --info-soft:color-mix(in oklab,#7E8BF7,transparent 86%);
  --warn:#F5B544; --warn-soft:color-mix(in oklab,#F5B544,transparent 86%);
  --bad:#F4736B; --bad-soft:color-mix(in oklab,#F4736B,transparent 86%);
  --vio:#A78BFA; --vio-soft:color-mix(in oklab,#A78BFA,transparent 86%);
}

/* ---------- DARK (default) ---------- */
html[data-theme="dark"]{
  --bg:#08080A; --bg-soft:#0C0C0F;
  --surface:#101013; --surface-2:#16161A; --surface-3:#1D1D22; --surface-4:#26262C;
  --border:rgba(255,255,255,0.065); --border-2:rgba(255,255,255,0.11); --border-3:rgba(255,255,255,0.18);
  --text-hi:#F5F5F6; --text-mid:rgba(245,245,246,0.66); --text-lo:rgba(245,245,246,0.44); --text-dim:rgba(245,245,246,0.30);
  --row-hover:color-mix(in oklab, var(--accent), transparent 96%);
  --shadow-card:0 18px 44px -34px rgba(0,0,0,0.7);
  --shadow-hover:0 1px 0 rgba(255,255,255,0.05) inset, 0 26px 60px -30px rgba(0,0,0,0.85);
  --shadow-pop:0 30px 70px -20px rgba(0,0,0,0.85), 0 0 0 1px rgba(255,255,255,0.06);
  --glow-strength:1;
}
/* ---------- LIGHT ---------- */
html[data-theme="light"]{
  --bg:#F4F5F7; --bg-soft:#FFFFFF;
  --surface:#FFFFFF; --surface-2:#F6F7F9; --surface-3:#EEF0F3; --surface-4:#E4E7EC;
  --border:rgba(10,12,20,0.08); --border-2:rgba(10,12,20,0.13); --border-3:rgba(10,12,20,0.22);
  --text-hi:#0C111A; --text-mid:rgba(12,17,26,0.66); --text-lo:rgba(12,17,26,0.46); --text-dim:rgba(12,17,26,0.32);
  --row-hover:color-mix(in oklab, var(--accent), transparent 94%);
  --shadow-card:0 14px 40px -28px rgba(20,30,50,0.4);
  --shadow-hover:0 1px 0 rgba(255,255,255,0.8) inset, 0 24px 54px -28px rgba(20,30,50,0.34);
  --shadow-pop:0 30px 70px -24px rgba(20,30,50,0.4), 0 0 0 1px rgba(10,12,20,0.06);
  --glow-strength:.55;
}

body{
  font-family:var(--font);
  font-size:15px;
  line-height:1.55;
  letter-spacing:-0.006em;
  color:var(--text-mid);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  min-height:100vh;
  overflow-x:hidden;
}
::selection{ background:var(--accent-tint); color:#fff; }
::-webkit-scrollbar{ width:11px; height:11px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:color-mix(in oklab,var(--text-hi),transparent 88%); border-radius:8px; border:3px solid transparent; background-clip:padding-box; }
::-webkit-scrollbar-thumb:hover{ background:color-mix(in oklab,var(--text-hi),transparent 80%); }

/* theme/accent transition */
body, .lp, .lp *:not(.bar):not(.spark-line):not(.no-tr){
  transition: background-color .45s cubic-bezier(.2,.7,.2,1), border-color .45s ease, color .3s ease, fill .3s ease, stroke .3s ease, box-shadow .45s ease;
}

/* ============================================================ AMBIENT BG */
.lp{ position:relative; isolation:isolate; min-height:100vh; overflow:clip; }
.lp__ambient{ position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(1100px 640px at 80% -8%, color-mix(in oklab,var(--accent),transparent 86%), transparent 60%),
    radial-gradient(900px 620px at -6% 18%, color-mix(in oklab,var(--vio),transparent 92%), transparent 55%),
    radial-gradient(820px 600px at 110% 92%, color-mix(in oklab,var(--accent),transparent 93%), transparent 60%);
  opacity:var(--glow-strength);
}
.lp__grain{ position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ============================================================ LAYOUT */
.wrap{ width:100%; max-width:var(--max); margin:0 auto; padding:0 var(--s7); }
@media (max-width:720px){ .wrap{ padding:0 var(--s5); } }
.section{ position:relative; padding:92px 0; }
.section--tight{ padding:68px 0; }
@media (max-width:720px){ .section{ padding:72px 0; } }

.sec-head{ max-width:680px; margin:0 0 var(--s8); }
.sec-head--center{ margin-left:auto; margin-right:auto; text-align:center; }
.eyebrow{ display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:12px; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:var(--accent-bright); }
.eyebrow::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--accent); box-shadow:0 0 10px 1px var(--accent-glow); }
.eyebrow--plain::before{ display:none; }
.sec-title{ font-family:var(--display); font-weight:600; font-size:clamp(30px,4vw,48px); line-height:1.08; letter-spacing:-0.022em; color:var(--text-hi); margin:18px 0 0; text-wrap:balance; }
.sec-title .dim2{ color:var(--text-lo); -webkit-text-fill-color:var(--text-lo); }
.sec-sub{ font-size:clamp(15px,1.5vw,18px); color:var(--text-lo); margin:18px 0 0; max-width:560px; line-height:1.6; }
.sec-head--center .sec-sub{ margin-left:auto; margin-right:auto; }

/* ============================================================ PRIMITIVES */
.card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow-card); position:relative; }
.card--pad{ padding:var(--s6); }
.card--hover{ transition:border-color .3s ease, box-shadow .3s ease, transform .3s cubic-bezier(.2,.7,.2,1); }
.card--hover:hover{ border-color:var(--border-2); box-shadow:var(--shadow-hover); transform:translateY(-3px); }
.card--accent{ border-color:var(--accent-line); background:radial-gradient(130% 120% at 50% 0%, var(--accent-soft), transparent 60%), var(--surface); }

.badge{ display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:var(--r-pill); font-size:12px; font-weight:600; line-height:1.35; white-space:nowrap; border:1px solid transparent; }
.badge .bdot{ width:6px; height:6px; border-radius:50%; background:currentColor; flex:none; }
.badge--accent{ color:var(--accent-bright); background:var(--accent-soft); border-color:color-mix(in oklab,var(--accent),transparent 74%); }
.badge--ok{ color:var(--ok); background:var(--ok-soft); border-color:color-mix(in oklab,var(--ok),transparent 78%); }
.badge--vio{ color:var(--vio); background:var(--vio-soft); border-color:color-mix(in oklab,var(--vio),transparent 78%); }
.badge--muted{ color:var(--text-mid); background:var(--surface-3); border-color:var(--border); }

.pill{ display:inline-flex; align-items:center; gap:4px; padding:3px 9px; border-radius:var(--r-pill); font-size:11.5px; font-weight:700; line-height:1.4; white-space:nowrap; font-variant-numeric:tabular-nums; }
.pill svg{ width:12px; height:12px; }
.pill--up{ color:var(--ok); background:var(--ok-soft); }
.pill--down{ color:var(--bad); background:var(--bad-soft); }
.pill--soft{ color:var(--text-mid); background:var(--surface-3); }

/* buttons */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:12px var(--s5); border-radius:var(--r-pill); font-size:14px; font-weight:600; white-space:nowrap; border:1px solid transparent; transition:transform .18s ease, filter .18s ease, background-color .25s ease, border-color .25s ease, color .25s ease; letter-spacing:-0.01em; }
.btn svg{ width:16px; height:16px; }
.btn--sm{ padding:9px var(--s4); font-size:13px; }
.btn--lg{ padding:15px var(--s7); font-size:15.5px; }
.btn--primary{ position:relative; overflow:hidden; background:linear-gradient(180deg, color-mix(in oklab,var(--accent),white 12%) 0%, var(--accent) 62%); color:#fff; box-shadow:0 1px 0 rgba(255,255,255,0.22) inset, 0 8px 26px -10px var(--accent-glow); }
.btn--primary:hover{ transform:translateY(-2px); filter:brightness(1.07); }
.btn--primary::after{ content:""; position:absolute; top:0; left:-120%; width:55%; height:100%; background:linear-gradient(100deg, transparent, rgba(255,255,255,0.34), transparent); transform:skewX(-18deg); }
.btn--primary:hover::after{ animation:sheen .7s ease; }
@keyframes sheen{ from{left:-120%} to{left:150%} }
.btn--ghost{ background:var(--surface); color:var(--text-hi); border-color:var(--border-2); }
.btn--ghost:hover{ background:var(--surface-2); border-color:var(--border-3); transform:translateY(-2px); }
.btn--outline{ border-color:var(--border-2); color:var(--text-mid); }
.btn--outline:hover{ border-color:var(--border-3); color:var(--text-hi); }
.btn:active{ transform:translateY(0) scale(.985); }

.chip{ padding:8px 15px; border-radius:var(--r-pill); font-size:13px; font-weight:600; color:var(--text-lo); background:var(--surface); border:1px solid var(--border); cursor:pointer; letter-spacing:-0.01em; transition:all .2s ease; }
.chip:hover{ color:var(--text-hi); border-color:var(--border-2); }
.chip.active{ background:var(--accent-soft); color:var(--accent-bright); border-color:var(--accent-line); }

.mono{ font-family:var(--mono); }
.tnum{ font-variant-numeric:tabular-nums; }

/* reveal on scroll — progressive enhancement: visible by default, JS arms the animation */
.reveal{ }
.reveal.armed{ opacity:0; transform:translateY(26px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.armed.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .reveal.armed{ opacity:1; transform:none; } html{ scroll-behavior:auto; } }

/* ============================================================ NAV */
.nav{ position:fixed; top:0; left:0; right:0; z-index:100; display:flex; align-items:center; justify-content:center; transition:all .35s cubic-bezier(.2,.7,.2,1); }
.nav__inner{ width:100%; max-width:var(--max); margin:0 var(--s7); margin-top:var(--s5); display:flex; align-items:center; gap:var(--s3); padding:11px var(--s5) 11px var(--s5); border-radius:var(--r-pill); border:1px solid transparent; transition:all .35s cubic-bezier(.2,.7,.2,1); }
.nav__inner{ padding-left:18px; padding-right:18px; }
.nav.scrolled .nav__inner{ background:color-mix(in srgb, var(--bg-soft) 86%, transparent); backdrop-filter:blur(32px) saturate(160%); -webkit-backdrop-filter:blur(32px) saturate(160%); border-color:var(--border-2); box-shadow:0 16px 40px -18px rgba(0,0,0,0.7), var(--shadow-card); margin-top:var(--s3); }
@media (max-width:880px){ .nav__inner{ margin:var(--s3) var(--s4) 0; } }

.brand{ display:flex; align-items:center; gap:11px; flex:none; }
.brand__mark{ position:relative; width:38px; height:38px; border-radius:11px; display:grid; place-items:center; color:#fff; isolation:isolate;
  background:linear-gradient(150deg, var(--accent-bright) 0%, var(--accent) 55%, var(--accent-deep)); box-shadow:0 6px 18px -8px var(--accent-glow), 0 1px 0 rgba(255,255,255,0.28) inset; }
.brand__mark::before{ content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; background:linear-gradient(160deg, rgba(255,255,255,0.3) 0%, transparent 50%); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; }
.brand__mark img{ width:32px; height:32px; object-fit:contain; display:block; position:relative; z-index:2; filter:brightness(0) invert(1); }
.brand__mark svg{ width:19px; height:19px; position:relative; z-index:2; }
.brand__name{ font-family:var(--display); font-weight:700; font-size:24px; letter-spacing:-0.03em; color:var(--text-hi); line-height:1; }
.brand__tag{ font-family:var(--display); font-size:9px; font-weight:600; letter-spacing:0.22em; text-transform:uppercase; color:var(--accent-bright); display:flex; align-items:center; gap:5px; margin-top:3px; }
.brand__tag::before{ display:none; }

.nav__links{ display:flex; align-items:center; gap:4px; margin:0 auto; min-width:0; }
.nav__link{ padding:8px 14px; border-radius:var(--r-pill); font-size:14px; font-weight:500; color:var(--text-mid); white-space:nowrap; transition:all .2s ease; }
.nav__link:hover{ color:var(--text-hi); background:var(--surface-2); }
@media (max-width:1260px){ .nav__links{ display:none; } }

.nav__right{ display:flex; align-items:center; gap:var(--s2); flex:none; }
.nav__cta{ padding:10px 16px; }
.nav__icobtn{ width:38px; height:38px; border-radius:var(--r-pill); display:grid; place-items:center; background:var(--surface); border:1px solid var(--border); color:var(--text-mid); transition:all .2s ease; }
.nav__icobtn:hover{ color:var(--text-hi); border-color:var(--border-2); }
.nav__icobtn svg{ width:17px; height:17px; }

.lang{ position:relative; }
.lang__btn{ display:flex; align-items:center; gap:7px; height:38px; padding:0 12px; border-radius:var(--r-pill); background:var(--surface); border:1px solid var(--border); color:var(--text-mid); font-size:13px; font-weight:600; transition:all .2s ease; }
.lang__btn:hover{ color:var(--text-hi); border-color:var(--border-2); }
.lang__btn svg{ width:15px; height:15px; }
.lang__menu{ position:absolute; top:46px; right:0; min-width:140px; padding:6px; border-radius:var(--r-md); background:var(--surface-2); border:1px solid var(--border-2); box-shadow:var(--shadow-pop); z-index:20; animation:pop .18s cubic-bezier(.2,.7,.2,1) both; }
@keyframes pop{ from{ opacity:0; transform:translateY(-6px) scale(.97); } to{ opacity:1; transform:none; } }
.lang__opt{ display:flex; align-items:center; gap:10px; padding:9px 11px; border-radius:var(--r-sm); font-size:13px; font-weight:500; color:var(--text-mid); width:100%; }
.lang__opt:hover{ background:var(--accent-soft); color:var(--text-hi); }
.lang__opt.active{ color:var(--accent-bright); }
.lang__flag{ font-family:var(--mono); font-size:11px; font-weight:700; color:var(--text-lo); }

.menu-back{ position:fixed; inset:0; z-index:10; }

/* hover mega-menu (Полезное) + language */
.nav__group{ position:relative; display:flex; }
.nav__caret{ width:13px; height:13px; margin-left:3px; transition:transform .25s ease; opacity:.7; }
.nav__group.open .nav__caret{ transform:rotate(180deg); }
.nav__mega{ position:absolute; top:calc(100% + 12px); left:50%; transform:translateX(-50%); width:300px; max-width:calc(100vw - 32px); padding:8px; border-radius:var(--r-lg); background:var(--surface-2); border:1px solid var(--border-2); box-shadow:var(--shadow-pop); z-index:30; animation:megaPop .2s cubic-bezier(.2,.7,.2,1) both; }
@keyframes megaPop{ from{ opacity:0; transform:translateX(-50%) translateY(-6px) scale(.97); } to{ opacity:1; transform:translateX(-50%); } }
.nav__mega::before{ content:""; position:absolute; top:-12px; left:0; right:0; height:12px; }
.nav__mega-item{ display:flex; align-items:center; gap:12px; width:100%; padding:11px 12px; border-radius:var(--r-md); text-align:left; transition:background .18s ease; }
.nav__mega-item:hover{ background:var(--accent-soft); }
.nav__mega-ico{ width:36px; height:36px; border-radius:10px; flex:none; display:grid; place-items:center; color:#fff; background:linear-gradient(150deg, color-mix(in oklab,var(--accent-bright),white 26%), var(--accent-bright) 48%, var(--accent)); border:1px solid transparent; box-shadow:0 6px 16px -8px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,0.28); }
.nav__mega-ico svg{ width:18px; height:18px; }
.nav__mega-item:hover .nav__mega-ico{ background:linear-gradient(150deg, color-mix(in oklab,var(--accent-bright),white 36%), var(--accent-bright) 52%, var(--accent)); color:#fff; border-color:transparent; box-shadow:0 8px 20px -8px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,0.32); }
.nav__mega-tx{ min-width:0; flex:1; }
.nav__mega-t{ font-size:13.5px; font-weight:600; color:var(--text-hi); display:flex; align-items:center; gap:8px; }
.nav__mega-ct{ font-family:var(--mono); font-size:10px; font-weight:600; padding:1px 6px; border-radius:5px; background:var(--surface-3); color:var(--text-lo); }
.nav__mega-s{ font-size:11.5px; color:var(--text-lo); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

@media (max-width:560px){ .nav__cta-label{ display:none; } .nav__cta{ width:38px; padding:0; } }