/* WolfCorp — стили сайта. Цвета — вариант C «Золото» (design/brand/colors.css), подписи — ink-muted #8f8f95 (брендбук). */
@font-face { font-family:Montserrat; src:url(../fonts/Montserrat-var.woff2) format("woff2"); font-weight:100 900; font-display:swap; }
@font-face { font-family:Play; src:url(../fonts/Play-Bold.woff2) format("woff2"); font-weight:700; font-display:swap; }

:root {
  --bg:#050507; --glass:#17171b; --text:#dcdce0; --text-2:#bdbdc3;
  --body:rgba(255,255,255,.62); --muted:#8f8f95;
  --accent:#d8b26a; --glow:#e9cf9a; --on-accent:#0b0b0d; --button:#e9e9ee;
  --line:rgba(255,255,255,.1);
}
* { box-sizing:border-box; margin:0; padding:0; }
html { background:var(--bg); scroll-behavior:smooth; }
body { background:var(--bg); color:#e8e8ec; font-family:Montserrat, system-ui, sans-serif; -webkit-font-smoothing:antialiased; }
button { font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
a { color:inherit; }
:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; }

/* ---------- 3D-режим ---------- */
html:not(.static), html:not(.static) body { height:100%; overflow:hidden; }
#gl { position:fixed; inset:0; display:block; width:100%; height:100%; }
.static #gl, .static #about, .static #back { display:none; }

/* простая версия в 3D-режиме: убрана с экрана, но текст остаётся для поисковиков и экранных дикторов */
html:not(.static) #site { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }

/* экран «О компании · Команда · Вопросы» после разбивания */
#about { position:fixed; inset:0; opacity:0; pointer-events:none; transition:opacity .4s ease; overflow:auto; }
#about.on { opacity:1; pointer-events:auto; }
#about .cols { position:absolute; left:32.4vw; right:6vw; top:17vh; padding-bottom:8vh; display:grid; grid-template-columns:1.1fr 1fr; gap:4.2vw; }
#about h2 { font-weight:600; font-size:max(20px,1.5vw); line-height:1.25; letter-spacing:-.015em; color:#fff; margin:.9vw 0 1.3vw; }
#about h2.big { font-size:max(30px,2.6vw); font-weight:500; background:linear-gradient(var(--text),var(--text-2)); -webkit-background-clip:text; background-clip:text; color:transparent; }
#about p { font-size:max(14px,.8vw); line-height:1.72; color:var(--body); margin-bottom:1vw; }
#about p b { color:#fff; font-weight:600; }
#about .eb.gap { margin-top:2.6vw; }
#about .faq { margin:1vw 0 1.8vw; }
#about .faq dt { color:#fff; font-weight:600; font-size:max(14px,.85vw); margin-top:1.2vw; }
#about .faq dd { color:var(--body); font-size:max(14px,.8vw); line-height:1.7; margin-top:.35vw; }

/* стеклянная щепка «Назад» */
#back { position:fixed; inset:0; pointer-events:none; }
#back .sl { position:absolute; transform-origin:50% 50%; transform:scale(0); pointer-events:none; }
#back.on .sl { pointer-events:auto; cursor:pointer; }
#back svg { position:absolute; inset:0; overflow:visible; width:100%; height:100%; }
#back span { position:absolute; transform:translate(-50%,-50%); white-space:nowrap; font-weight:500; font-size:max(13px,.66vw); color:#fff; transition:color .2s; }
#back .sl:hover span { color:var(--glow); }

/* ---------- общие элементы ---------- */
.glass { border-radius:16px; background:linear-gradient(160deg,#202026,#141417 60%,#101013);
         box-shadow:inset 0 1px 0 rgba(255,255,255,.12), inset 0 0 0 1px rgba(255,255,255,.06); }
.eb { font-size:11px; font-weight:500; letter-spacing:.2em; color:var(--muted); text-transform:uppercase; }
.btn { display:inline-flex; align-items:center; justify-content:center; background:var(--button); color:var(--on-accent); font-weight:600;
       padding:13px 22px; border-radius:7px; text-decoration:none; font-size:14px; transition:background .2s; }
.btn:hover, .btn.gold { background:var(--accent); }
.btn.gold:hover { background:var(--glow); }

/* ---------- простая версия ---------- */
#site { max-width:1120px; margin:0 auto; padding:16px 16px 40px; }
#site .nav { position:sticky; top:12px; z-index:3; display:flex; align-items:center; gap:10px; padding:12px 14px 12px 18px; }
#site .brand { display:flex; align-items:center; gap:10px; text-decoration:none; font-family:Play, Montserrat, sans-serif; font-weight:700; font-size:18px; letter-spacing:.02em; color:#ececf0; }
#site .brand svg { width:20px; height:27px; fill:#ececf0; }
.lang { margin-left:auto; display:flex; gap:2px; }
.lang button { font-size:13px; font-weight:500; color:var(--muted); padding:8px 9px; border-radius:6px; min-width:40px; }
.lang button:hover { color:#fff; }
.lang button[aria-pressed="true"] { color:var(--accent); font-weight:600; }

#site .panel { position:relative; overflow:hidden; padding:44px 22px 36px; }
#site .hero { margin-top:12px; }
#site h1, #site h2 { margin-top:14px; font-weight:500; line-height:1.02; letter-spacing:-.03em;
           background:linear-gradient(var(--text),var(--text-2)); -webkit-background-clip:text; background-clip:text; color:transparent; }
#site h1 { font-size:clamp(34px,8.6vw,72px); }
#site h2 { font-size:clamp(28px,6.6vw,48px); }
#site h3 { color:#fff; font-weight:600; font-size:18px; line-height:1.3; margin:6px 0 8px; }
#site .sub, #site .lead { margin-top:16px; font-size:15px; line-height:1.6; color:var(--body); max-width:34em; position:relative; }
#site .actions { display:flex; flex-wrap:wrap; align-items:center; gap:14px 22px; margin-top:24px; position:relative; }
#site .link { font-weight:500; font-size:14px; text-decoration:none; color:#e4e4e8; border-bottom:1px solid transparent; padding:4px 0; }
#site .link:hover { border-color:var(--accent); }
#site .trust { margin-top:22px; font-size:12px; letter-spacing:.06em; color:var(--muted); position:relative; }
#site .bigwolf { position:absolute; right:-30px; bottom:-40px; width:210px; height:284px; fill:rgba(255,255,255,.06); }
#site section { margin-top:44px; scroll-margin-top:90px; }
#site section > .btn { margin-top:18px; }
#site .cards { margin-top:18px; display:grid; gap:12px; }
#site .card { padding:22px; font-size:14px; line-height:1.65; color:var(--body); }
#site .card + .card { margin-top:12px; }
#site .cards .card + .card { margin-top:0; }
#site .card .n, #site .steps .n { color:var(--accent); font-weight:600; font-size:12px; letter-spacing:.12em; }
#site .tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:14px; }
#site .tags span { font-size:12px; color:rgba(255,255,255,.72); border:1px solid rgba(255,255,255,.16); border-radius:999px; padding:4px 10px; }
#site #team { padding:40px 22px; }
#site details { border-bottom:1px solid var(--line); padding:14px 0; }
#site details:last-child { border-bottom:0; }
#site summary { cursor:pointer; color:#fff; font-weight:600; font-size:15px; list-style:none; display:flex; justify-content:space-between; gap:12px; }
#site summary::after { content:'+'; color:var(--accent); font-weight:500; }
#site details[open] summary::after { content:'−'; }
#site details p { margin-top:8px; }
#site #contacts .card { margin-top:16px; }
#site .row { display:block; text-decoration:none; padding:14px 0; border-bottom:1px solid var(--line); }
#site .row small { display:block; font-size:11px; letter-spacing:.16em; color:var(--muted); }
#site .row span { font-size:18px; color:#ececf0; font-weight:500; }
#site .row:hover span { color:var(--accent); }
#site .eb.gap { margin-top:28px; }
#site .steps { list-style:none; display:grid; gap:12px; margin-top:12px; }
#site .steps li { display:grid; gap:2px; font-size:14px; color:var(--body); }
#site .steps b { color:#ececf0; font-weight:600; font-size:16px; }
#site .foot { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; margin-top:52px; font-size:12px; color:var(--muted); }

@media (min-width:760px) {
  #site { padding:20px 28px 48px; }
  #site .panel { padding:72px 56px 60px; }
  #site .bigwolf { width:340px; height:460px; right:30px; bottom:-60px; }
  #site .cards { grid-template-columns:1fr 1fr; }
  #site .steps { grid-template-columns:repeat(3,1fr); }
}

/* ---------- форма ---------- */
#lead { position:fixed; inset:0; z-index:10; display:grid; place-items:center; padding:16px; }
#lead[hidden] { display:none; }
#lead .veil { position:absolute; inset:0; background:rgba(3,3,5,.72); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
#lead .sheet { position:relative; width:min(460px,100%); max-height:calc(100dvh - 32px); overflow:auto; padding:30px 26px 24px;
               display:grid; gap:14px; background:linear-gradient(160deg,#24242b,#16161a 60%,#111114); }
#lead h2 { font-weight:500; font-size:28px; line-height:1.1; letter-spacing:-.02em; color:#fff; margin-bottom:4px; }
#lead label { display:grid; gap:6px; font-size:12px; letter-spacing:.06em; color:var(--muted); }
#lead input, #lead textarea { font:inherit; font-size:15px; color:#fff; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.14);
               border-radius:8px; padding:11px 12px; resize:vertical; }
#lead input:focus, #lead textarea:focus { outline:none; border-color:var(--accent); }
#lead input[aria-invalid="true"] { border-color:#e07a6a; }
#lead .hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
#lead .x { position:absolute; top:10px; right:12px; width:36px; height:36px; font-size:24px; color:var(--muted); border-radius:8px; }
#lead .x:hover { color:#fff; }
#lead .msg { font-size:14px; line-height:1.5; color:var(--body); min-height:1em; }
#lead .msg.ok { color:var(--glow); }
#lead .msg a { color:var(--accent); }
#lead .btn[disabled] { opacity:.6; cursor:wait; }

#toast { position:fixed; left:50%; bottom:22px; transform:translateX(-50%); font-size:13px; color:#fff; background:rgba(255,255,255,.08);
         border:1px solid rgba(255,255,255,.1); padding:8px 14px; border-radius:8px; opacity:0; transition:opacity .25s; pointer-events:none; z-index:20; }
#toast.on { opacity:1; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } * { transition:none !important; } }
#site .cards .card.wide { grid-column:1 / -1; }