/* ============================================================
   KVIZ GOLDGLOBE — «бархатная витрина»
   Тёмный фон-бархат, тёплые карточки цвета слоновой кости,
   акцент — приглушённое шампанское-золото.
   ============================================================ */
:root{
  --ink:#17110D;          /* фон-бархат */
  --ink-soft:#211812;     /* приподнятые панели */
  --ink-line:#2E231B;
  --ivory:#F4EEE3;        /* текст на тёмном / плитки ответов */
  --paper:#FBF8F2;        /* карточки результата */
  --gold:#C6A249;         /* акцент */
  --gold-soft:#E4CE93;
  --gold-deep:#9E7E33;
  --muted:#9A8B7C;        /* второстепенный текст */
  --muted-dark:#6B5C4E;
  --line:rgba(198,162,73,.22);
  --shadow:0 24px 60px -28px rgba(0,0,0,.7);
  --font-display:'Cormorant','Playfair Display',Georgia,serif;
  --font-body:'Manrope',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --r:16px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--font-body);
  background:
    radial-gradient(120% 80% at 50% -10%, #2A1E15 0%, var(--ink) 55%),
    var(--ink);
  color:var(--ivory);
  min-height:100dvh;
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
}
a{color:inherit}
button{font-family:inherit}
::selection{background:var(--gold);color:var(--ink)}

.wrap{max-width:760px;margin:0 auto;padding:28px 20px 64px;min-height:100dvh;display:flex;flex-direction:column}

/* ---------- шапка ---------- */
.brand{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:8px}
.brand .mark{width:30px;height:30px;flex:0 0 auto}
.brand .name{font-family:var(--font-body);font-weight:700;letter-spacing:.28em;text-transform:uppercase;font-size:12px;color:var(--gold-soft)}

/* ---------- индикатор-нить ---------- */
.progress{display:flex;align-items:center;gap:0;margin:22px auto 30px;max-width:340px;width:100%}
.progress .node{flex:0 0 auto;width:9px;height:9px;border-radius:50%;background:var(--ink-line);border:1px solid var(--gold-deep);transition:.4s}
.progress .node.done{background:var(--gold);box-shadow:0 0 0 4px rgba(198,162,73,.12)}
.progress .node.current{background:var(--gold-soft);box-shadow:0 0 0 6px rgba(228,206,147,.16)}
.progress .thread{flex:1;height:1px;background:linear-gradient(90deg,var(--gold-deep),var(--ink-line));opacity:.5}
.progress .thread.done{background:var(--gold);opacity:1}

/* ---------- шаги ---------- */
.step{flex:1;display:flex;flex-direction:column;animation:rise .5s cubic-bezier(.2,.7,.2,1) both}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.eyebrow{font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);font-weight:700;margin-bottom:14px}
h1.q{font-family:var(--font-display);font-weight:600;font-size:clamp(30px,6.4vw,46px);line-height:1.06;letter-spacing:-.01em;margin:0 0 26px}

/* ---------- плитки ответов ---------- */
.opts{display:grid;gap:12px}
.opts.cols-2{grid-template-columns:1fr 1fr}
.opt{
  position:relative;text-align:left;cursor:pointer;
  background:var(--ink-soft);color:var(--ivory);
  border:1px solid var(--ink-line);border-radius:var(--r);
  padding:18px 20px;font-size:17px;font-weight:500;
  transition:transform .18s ease,border-color .18s ease,background .18s ease;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.opt:hover{border-color:var(--gold-deep);transform:translateY(-2px)}
.opt:focus-visible{outline:2px solid var(--gold-soft);outline-offset:2px}
.opt .tick{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--muted-dark);flex:0 0 auto;transition:.18s}
.opt.sel{border-color:var(--gold);background:linear-gradient(180deg,#241B12,#1D160F);
  box-shadow:inset 0 0 0 1px rgba(198,162,73,.5)}
.opt.sel .tick{border-color:var(--gold);background:var(--gold);
  box-shadow:inset 0 0 0 3px var(--ink-soft)}

/* ---------- нижняя панель ---------- */
.nav{display:flex;align-items:center;justify-content:space-between;margin-top:26px;gap:14px}
.link-back{background:none;border:none;color:var(--muted);font-size:14px;cursor:pointer;padding:8px 4px}
.link-back:hover{color:var(--ivory)}
.link-back:disabled{opacity:0;pointer-events:none}
.btn{
  border:none;cursor:pointer;border-radius:100px;
  background:linear-gradient(180deg,var(--gold-soft),var(--gold));
  color:#2A1E10;font-weight:700;font-size:15px;padding:14px 30px;
  letter-spacing:.01em;transition:.18s;box-shadow:0 10px 24px -12px rgba(198,162,73,.7)}
.btn:hover{filter:brightness(1.05);transform:translateY(-1px)}
.btn:disabled{opacity:.4;cursor:default;transform:none;filter:none}
.btn.ghost{background:transparent;color:var(--gold-soft);box-shadow:none;border:1px solid var(--line)}
.btn.ghost:hover{border-color:var(--gold);color:var(--gold-soft)}

/* ---------- заставка ---------- */
.hero{flex:1;display:flex;flex-direction:column;justify-content:center;text-align:center;animation:rise .6s both}
.hero h1{font-family:var(--font-display);font-weight:600;font-size:clamp(38px,9vw,64px);line-height:1.02;margin:0 0 18px;letter-spacing:-.02em}
.hero p{color:var(--muted);font-size:17px;max-width:440px;margin:0 auto 32px}
.hero .btn{align-self:center}
.hero .fine{margin-top:20px;font-size:12.5px;color:var(--muted-dark)}

/* ---------- результат ---------- */
.result{animation:rise .55s both}
.result .rhead{text-align:center;margin-bottom:30px}
.result .subtitle{color:var(--gold-soft);font-size:13px;letter-spacing:.04em;margin-bottom:12px;font-weight:600}
.result h1{font-family:var(--font-display);font-weight:600;font-size:clamp(26px,5vw,38px);line-height:1.12;margin:0 auto;max-width:600px}
.cards{display:grid;grid-template-columns:1fr;gap:16px;margin-bottom:28px}
@media(min-width:620px){.cards{grid-template-columns:repeat(3,1fr)}}
.card{background:var(--paper);color:#2B2118;border-radius:var(--r);overflow:hidden;
  box-shadow:var(--shadow);display:flex;flex-direction:column;position:relative}
.card.lead{outline:2px solid var(--gold)}
.card .badge{position:absolute;top:12px;left:12px;background:var(--gold);color:#2A1E10;
  font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  padding:5px 10px;border-radius:100px;z-index:2}
.card .ph{aspect-ratio:1/1;background:linear-gradient(135deg,#EDE5D6,#DCCFB8);
  display:flex;align-items:center;justify-content:center;color:#B5A489}
.card .ph img{width:100%;height:100%;object-fit:cover;display:block}
.card .ph svg{width:44px;height:44px;opacity:.55}
.card .body{padding:16px 16px 18px;display:flex;flex-direction:column;gap:6px;flex:1}
.card .kind{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#A08D6F;font-weight:700}
.card .nm{font-family:var(--font-display);font-size:21px;font-weight:600;line-height:1.15}
.card .price{margin-top:auto;font-size:20px;font-weight:800;color:#2B2118}
.card .sku{font-size:11px;color:#B0A088;letter-spacing:.08em}
.argument{background:var(--ink-soft);border:1px solid var(--line);border-radius:var(--r);
  padding:20px 22px;text-align:center;color:var(--ivory);font-size:17px;
  font-family:var(--font-display);font-weight:500;font-style:italic;margin-bottom:26px}
.argument b{font-style:normal;color:var(--gold-soft)}
.cta-row{display:flex;flex-direction:column;gap:12px;align-items:center}
.cta-row .btn{width:100%;max-width:360px;text-align:center;text-decoration:none;display:block}
.restart{background:none;border:none;color:var(--muted);font-size:13px;cursor:pointer;margin-top:8px}
.restart:hover{color:var(--ivory)}

/* ---------- форма заявки ---------- */
.leadform{width:100%;max-width:360px;margin:0 auto;display:flex;flex-direction:column;gap:10px}
.leadform input{background:var(--ink-soft);border:1px solid var(--ink-line);border-radius:12px;
  color:var(--ivory);padding:14px 16px;font-size:15px;font-family:inherit}
.leadform input:focus{outline:none;border-color:var(--gold)}
.leadform .ok{color:var(--gold-soft);text-align:center;font-size:14px;padding:8px}

.foot{text-align:center;margin-top:36px;font-size:12px;color:var(--muted-dark)}
.foot a{color:var(--muted);text-decoration:none;border-bottom:1px solid var(--line)}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}