/* ============================================================
   MIX-GAME · SEO-страницы (web/<slug>/index.html)
   Дизайн-система снята с лендинга (landing/landing.css): кремовая шапка,
   тёмно-фиолетовое тело, фиолетовые CTA, золото/оранж акценты.
   Mobile-first: базовые правила — для узких экранов, медиа — расширяют.
   ============================================================ */

:root{
  --ink:#1b1527;
  --bg:#241d33;
  --bg-soft:#2a2238;
  --panel:#372e48;
  --panel-2:#41374f;
  --header:#efe7d3;
  --header-line:#ddd0b4;

  --violet:#6d4ad6;
  --violet-hi:#8a63f0;
  --violet-deep:#5a3bc0;
  --gold:#f0b429;
  --orange:#f0a02e;
  --green:#52d98a;
  --red:#e0606a;

  --text:#f1ecf6;
  --muted:#a89dbd;
  --muted-2:#8a7fa3;
  --on-cream:#2a2032;

  --border:rgba(231,192,113,.16);
  --border-soft:rgba(255,255,255,.07);

  --logo-font:"Pirata One",serif;
  --font:"Manrope","Segoe UI",system-ui,sans-serif;

  --maxw:1180px;
  --radius:20px;
  --shadow:0 18px 44px rgba(0,0,0,.4);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{
  font-family:var(--font);background:var(--bg);color:var(--text);
  line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 18px}
@media(min-width:600px){.wrap{padding:0 24px}}
.sr{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- Header ---------- */
header.top{position:sticky;top:0;z-index:50;background:var(--header);border-bottom:1px solid var(--header-line)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:64px;gap:10px}
.brand{display:flex;align-items:center;gap:8px;min-width:0}
.brand img{width:38px;height:38px;object-fit:contain}
.brand .name{font-family:var(--logo-font);font-size:22px;letter-spacing:.5px;color:#1c1422;line-height:1;white-space:nowrap}
.brand .name .x{color:var(--orange)}
.top nav{display:flex;align-items:center;gap:14px;flex:none}
.top nav a.link{display:none;color:#5a4f63;font-weight:600;font-size:15px;white-space:nowrap}
.top nav a.link:hover{color:#1c1422}
.btn-head{background:var(--violet);color:#fff;font-weight:700;font-size:14px;padding:10px 18px;border-radius:999px;
  box-shadow:0 6px 16px rgba(109,74,214,.35);transition:background .15s,transform .15s;white-space:nowrap}
.btn-head:hover{background:var(--violet-hi);transform:translateY(-1px)}
/* меню «Играть ▾» — details без JS */
.menu{position:relative}
.menu summary{list-style:none;cursor:pointer;color:#5a4f63;font-weight:600;font-size:14px;display:flex;align-items:center;gap:5px;white-space:nowrap}
.menu summary::-webkit-details-marker{display:none}
.menu summary::after{content:"▾";font-size:12px}
.menu[open] summary::after{content:"▴"}
.menu .dd{position:absolute;right:0;top:calc(100% + 12px);background:#fff;color:var(--on-cream);
  border:1px solid var(--header-line);border-radius:14px;box-shadow:0 18px 40px rgba(0,0,0,.25);
  padding:10px;display:grid;grid-template-columns:1fr;gap:2px;min-width:260px;max-height:70vh;overflow:auto;z-index:60}
.menu .dd a{padding:9px 12px;border-radius:9px;font-size:14px;font-weight:600;white-space:nowrap}
.menu .dd a:hover{background:#f3ecdc}
.menu .dd .grp{grid-column:1/-1;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#8a7fa3;padding:10px 12px 4px;font-weight:800}
@media(min-width:760px){
  .top .wrap{height:74px;gap:12px}
  .top nav{gap:30px}
  .menu summary{font-size:15px}
  .brand img{width:44px;height:44px}
  .brand .name{font-size:32px}
  .top nav{gap:30px}
  .top nav a.link{display:inline}
  .btn-head{font-size:15px;padding:11px 22px}
  .menu .dd{grid-template-columns:1fr 1fr;min-width:520px}
}

/* ---------- Crumbs ---------- */
.crumbs{font-size:13px;color:var(--muted-2);padding:14px 0 0;display:flex;flex-wrap:wrap;gap:6px}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--text)}
.crumbs li{list-style:none}
.crumbs li+li::before{content:"›";margin-right:6px;color:var(--muted-2)}

/* ---------- Buttons / store ---------- */
.cta-row{display:flex;flex-direction:column;gap:12px;width:100%;max-width:340px}
.store{display:flex;align-items:center;justify-content:center;gap:12px;padding:14px 18px;border-radius:16px;font-weight:600;
  border:1px solid transparent;transition:transform .15s,box-shadow .15s,background .15s}
.store:hover{transform:translateY(-2px)}
.store .ic{width:26px;height:26px;flex:none;display:flex;align-items:center;justify-content:center}
.store .ic svg{width:100%;height:100%}
.store .lab{display:flex;flex-direction:column;line-height:1.15;text-align:left}
.store .lab small{font-size:11px;opacity:.72;font-weight:600;letter-spacing:.3px;white-space:nowrap}
.store .lab b{font-size:16px;font-weight:800;white-space:nowrap}
.store.web{background:linear-gradient(180deg,var(--violet-hi),var(--violet));color:#fff;box-shadow:0 12px 26px rgba(109,74,214,.4)}
.store.web:hover{box-shadow:0 16px 32px rgba(109,74,214,.52)}
.store.dark{background:#16111f;color:#fff;border-color:rgba(255,255,255,.12);box-shadow:0 10px 24px rgba(0,0,0,.35)}
.store.dark:hover{background:#1d1729}
.store.gold{background:linear-gradient(180deg,#ffd166,var(--gold));color:#2a1c0a;box-shadow:0 12px 26px rgba(240,180,41,.3)}
@media(min-width:600px){.cta-row{flex-direction:row;flex-wrap:wrap;max-width:none;width:auto;gap:14px;align-items:stretch}.store{padding:13px 22px;justify-content:flex-start}}
.btn-line{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:999px;border:1px solid var(--border);color:var(--gold);font-weight:700;font-size:14px}
.btn-line:hover{background:rgba(231,192,113,.1)}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;
  background:radial-gradient(90% 70% at 78% 8%,rgba(109,74,214,.30),transparent 60%),
             radial-gradient(70% 60% at 12% 90%,rgba(240,160,46,.12),transparent 60%),
             linear-gradient(180deg,#2c2440 0%,#241d33 55%,#1f1830 100%)}
.hero .wrap{position:relative;z-index:2;display:grid;grid-template-columns:1fr;gap:24px;align-items:center;padding-top:26px;padding-bottom:48px;text-align:center}
.eyebrow{display:inline-flex;align-items:center;gap:9px;background:rgba(231,192,113,.12);border:1px solid var(--border);
  color:var(--gold);font-weight:700;font-size:12px;letter-spacing:.6px;padding:7px 14px;border-radius:999px;text-transform:uppercase;margin:0 auto}
.hero h1{font-size:clamp(31px,7.5vw,64px);line-height:1.06;letter-spacing:-.6px;font-weight:800;margin:16px 0 14px;text-wrap:balance}
.hero h1 .accent{color:var(--orange)}
.hero p.lead{font-size:16px;color:var(--muted);max-width:560px;margin:0 auto 24px}
.hero .cta-row{margin-inline:auto}
.hero .meta{display:flex;gap:22px;margin-top:26px;flex-wrap:wrap;justify-content:center}
.hero .meta .stat b{font-family:var(--logo-font);font-size:28px;color:var(--gold);display:block;line-height:1}
.hero .meta .stat span{font-size:13px;color:var(--muted);font-weight:600}
.age{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:9px;border:2px solid var(--muted);
  color:var(--muted);font-weight:800;font-size:13px;letter-spacing:.3px;flex:none}
.hero .age{position:absolute;right:18px;top:18px;z-index:3}
.hero-art{order:-1;display:flex;justify-content:center}
@media(min-width:920px){
  .hero .wrap{grid-template-columns:1.05fr .95fr;gap:40px;padding-top:74px;padding-bottom:88px;text-align:left}
  .eyebrow{margin:0}
  .hero p.lead{margin:0 0 30px;font-size:clamp(17px,2vw,20px)}
  .hero .cta-row{margin-inline:0}
  .hero .meta{justify-content:flex-start;gap:30px;margin-top:34px}
  .hero .meta .stat b{font-size:34px}
  .hero-art{order:0}
  .hero .age{right:24px;top:24px}
}

/* веер карт */
.fan{position:relative;height:300px;width:100%;max-width:520px}
.fan .c{position:absolute;left:50%;top:50%;width:140px;height:200px;border-radius:14px;overflow:hidden;
  border:2px solid rgba(231,192,113,.75);box-shadow:0 22px 44px rgba(0,0,0,.55);transform-origin:50% 130%;background:#2a1f3a;
  transition:transform .35s cubic-bezier(.2,.8,.3,1)}
.fan .c img{width:100%;height:100%;object-fit:cover}
.fan .c:nth-child(1){transform:translate(-50%,-50%) rotate(-24deg) translateY(-6px)}
.fan .c:nth-child(2){transform:translate(-50%,-50%) rotate(-12deg) translateY(-18px)}
.fan .c:nth-child(3){transform:translate(-50%,-50%) rotate(0deg) translateY(-24px)}
.fan .c:nth-child(4){transform:translate(-50%,-50%) rotate(12deg) translateY(-18px)}
.fan .c:nth-child(5){transform:translate(-50%,-50%) rotate(24deg) translateY(-6px)}
.fan:hover .c:nth-child(1){transform:translate(-50%,-50%) rotate(-32deg) translateY(-6px)}
.fan:hover .c:nth-child(2){transform:translate(-50%,-50%) rotate(-16deg) translateY(-22px)}
.fan:hover .c:nth-child(3){transform:translate(-50%,-50%) rotate(0deg) translateY(-32px)}
.fan:hover .c:nth-child(4){transform:translate(-50%,-50%) rotate(16deg) translateY(-22px)}
.fan:hover .c:nth-child(5){transform:translate(-50%,-50%) rotate(32deg) translateY(-6px)}
@media(min-width:600px){.fan{height:380px}.fan .c{width:170px;height:243px}}
@media(min-width:920px){.fan{height:440px}.fan .c{width:200px;height:286px;border-width:3px}}

/* большая одиночная карта в hero */
.solo{position:relative;width:min(280px,70vw);aspect-ratio:5/7;border-radius:18px;overflow:hidden;border:3px solid rgba(231,192,113,.75);
  box-shadow:0 26px 60px rgba(0,0,0,.6);transform:rotate(-4deg)}
.solo img{width:100%;height:100%;object-fit:cover}
.solo .cap{position:absolute;left:0;right:0;bottom:0;padding:26px 14px 14px;font-weight:800;font-size:15px;
  background:linear-gradient(180deg,transparent,rgba(27,21,39,.92));color:#fff}

/* ---------- Sections ---------- */
section{padding:58px 0;position:relative}
section.soft{background:var(--bg-soft)}
.sec-head{text-align:center;max-width:680px;margin:0 auto 36px}
.sec-head .kicker{color:var(--orange);font-weight:800;letter-spacing:1.5px;font-size:13px;text-transform:uppercase}
.sec-head h2{font-size:clamp(26px,3.6vw,42px);font-weight:800;letter-spacing:-.5px;margin:12px 0 14px}
.sec-head p{color:var(--muted);font-size:15.5px}
.sec-head.left{text-align:left;margin-left:0}
@media(min-width:600px){section{padding:84px 0}.sec-head{margin-bottom:52px}.sec-head p{font-size:17px}}

/* текстовые блоки */
.prose{max-width:760px;margin:0 auto;font-size:16px}
.prose h2{font-size:clamp(24px,3vw,34px);font-weight:800;letter-spacing:-.4px;margin:44px 0 14px}
.prose h3{font-size:20px;font-weight:800;margin:28px 0 10px}
.prose p{color:var(--muted);margin:0 0 14px}
.prose p strong,.prose li strong{color:var(--text)}
.prose ul,.prose ol{color:var(--muted);padding-left:22px;margin:0 0 16px;display:flex;flex-direction:column;gap:6px}
.prose a{color:var(--gold);text-decoration:underline;text-underline-offset:3px}
.prose .note{background:var(--panel);border-left:3px solid var(--gold);border-radius:12px;padding:14px 18px;color:var(--muted);margin:18px 0}
.prose .note b{color:var(--text)}

/* ---------- Steps ---------- */
.steps{display:grid;grid-template-columns:1fr;gap:16px}
.step{display:flex;gap:14px;align-items:flex-start;background:var(--panel);border:1px solid var(--border-soft);border-radius:var(--radius);padding:20px 18px}
.step .num{flex:none;width:44px;height:44px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  font-family:var(--logo-font);font-size:22px;color:#fff;background:linear-gradient(150deg,var(--violet-hi),var(--violet-deep));box-shadow:0 8px 18px rgba(109,74,214,.4)}
.step h3{font-size:17px;font-weight:800;margin-bottom:6px}
.step p{color:var(--muted);font-size:15px}
.steps.three{grid-template-columns:1fr}
@media(min-width:720px){.steps{grid-template-columns:repeat(2,1fr);gap:20px}.step{padding:26px;gap:18px}.step .num{width:50px;height:50px;font-size:26px}.step h3{font-size:19px}.steps.three{grid-template-columns:repeat(3,1fr)}}

/* ---------- Scoring ---------- */
.score-grid{display:grid;grid-template-columns:1fr;gap:16px}
.score{background:linear-gradient(180deg,var(--panel),var(--bg-soft));border:1px solid var(--border-soft);border-radius:var(--radius);padding:26px 20px;text-align:center}
.score .pts{font-family:var(--logo-font);font-size:46px;line-height:1;color:var(--gold)}
.score .pts small{font-size:20px;color:var(--muted)}
.score h3{font-size:18px;font-weight:800;margin:14px 0 8px}
.score p{color:var(--muted);font-size:15px}
.score.gold{border-color:rgba(240,180,41,.4)}
.score.gold .pts{color:var(--orange)}
@media(min-width:720px){.score-grid{grid-template-columns:repeat(3,1fr);gap:20px}.score{padding:30px 26px}.score .pts{font-size:54px}}

/* ---------- Features ---------- */
.feat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.feat{background:var(--panel);border:1px solid var(--border-soft);border-radius:var(--radius);padding:20px 14px;text-align:center;transition:transform .18s,border-color .18s}
.feat:hover{transform:translateY(-4px);border-color:var(--border)}
.feat .emoji{font-size:34px;line-height:1;margin-bottom:10px}
.feat .emoji img{width:48px;height:48px;object-fit:contain;margin:0 auto}
.feat h3{font-size:15px;font-weight:800;margin-bottom:7px}
.feat p{color:var(--muted);font-size:13px}
@media(min-width:600px){.feat-grid{gap:18px}.feat{padding:26px 22px}.feat .emoji{font-size:42px;margin-bottom:14px}.feat h3{font-size:17px}.feat p{font-size:14px}}
@media(min-width:920px){.feat-grid{grid-template-columns:repeat(4,1fr)}.feat-grid.three{grid-template-columns:repeat(3,1fr)}}

/* ---------- Compare table ---------- */
.cmp-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--radius);border:1px solid var(--border-soft)}
table.cmp{width:100%;border-collapse:collapse;min-width:560px;background:var(--panel);font-size:14.5px}
.cmp th,.cmp td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--border-soft);vertical-align:top}
.cmp th{background:var(--panel-2);font-weight:800;font-size:13px;letter-spacing:.6px;text-transform:uppercase;color:var(--gold)}
.cmp th.us{color:#fff;background:linear-gradient(150deg,var(--violet-hi),var(--violet-deep))}
.cmp td:first-child{color:var(--muted);font-weight:600}
.cmp tr:last-child td{border-bottom:0}
.cmp .yes{color:var(--green);font-weight:800}
.cmp .no{color:var(--red);font-weight:800}
.cmp .so{color:var(--gold);font-weight:800}

/* ---------- Association cards ---------- */
.assoc-grid{display:grid;grid-template-columns:1fr;gap:14px}
.assoc{display:flex;gap:14px;align-items:flex-start;background:var(--panel);border:1px solid var(--border-soft);border-radius:16px;padding:14px}
.assoc .thumb{flex:none;width:78px;aspect-ratio:5/7;border-radius:10px;overflow:hidden;border:2px solid rgba(231,192,113,.45);background:#2a1f3a}
.assoc .thumb img{width:100%;height:100%;object-fit:cover}
.assoc>div:last-child{min-width:0}
.assoc blockquote{font-size:17px;font-weight:800;line-height:1.3;margin:2px 0 8px;text-wrap:balance;overflow-wrap:anywhere}
.assoc blockquote::before{content:"«"}.assoc blockquote::after{content:"»"}
.assoc .by{font-size:13px;color:var(--muted);display:flex;gap:12px;flex-wrap:wrap}
.assoc .by .likes{color:var(--gold);font-weight:700}
@media(min-width:600px){.assoc-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:920px){.assoc-grid{grid-template-columns:repeat(3,1fr)}.assoc .thumb{width:90px}}
/* табы-фильтры без JS: радиокнопки + классы на элементах */
.tabs{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:26px}
.tabs label{cursor:pointer;padding:9px 16px;border-radius:999px;border:1px solid var(--border);color:var(--muted);font-weight:700;font-size:14px}
.tabset>input{position:absolute;opacity:0;pointer-events:none}
#t-all:checked~.tabs label[for=t-all],#t-top:checked~.tabs label[for=t-top],#t-short:checked~.tabs label[for=t-short],#t-long:checked~.tabs label[for=t-long]{background:var(--violet);color:#fff;border-color:var(--violet)}
#t-top:checked~.assoc-grid .assoc:not(.top),#t-short:checked~.assoc-grid .assoc:not(.short),#t-long:checked~.assoc-grid .assoc:not(.long){display:none}

/* ---------- Gallery ---------- */
.gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.gallery figure{border-radius:14px;overflow:hidden;aspect-ratio:5/7;border:2px solid rgba(231,192,113,.4);box-shadow:0 14px 30px rgba(0,0,0,.4);
  position:relative;transform:rotate(var(--r,0deg));transition:transform .25s}
.gallery figure:hover{transform:translateY(-8px) rotate(0deg) scale(1.03);z-index:3}
.gallery img{width:100%;height:100%;object-fit:cover}
.gallery figcaption{position:absolute;left:0;right:0;bottom:0;padding:22px 10px 10px;font-size:12.5px;font-weight:700;
  background:linear-gradient(180deg,transparent,rgba(27,21,39,.92))}
@media(min-width:600px){.gallery{grid-template-columns:repeat(3,1fr);gap:16px}}
@media(min-width:920px){.gallery{grid-template-columns:repeat(6,1fr)}.gallery.four{grid-template-columns:repeat(4,1fr)}}

/* ---------- FAQ ---------- */
.faq{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:10px}
.faq details{background:var(--panel);border:1px solid var(--border-soft);border-radius:16px;padding:0 18px}
.faq summary{cursor:pointer;list-style:none;font-weight:800;font-size:16px;padding:16px 28px 16px 0;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:0;top:14px;font-size:22px;color:var(--gold);line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details p{color:var(--muted);padding:0 0 16px;font-size:15px}
.faq details p a{color:var(--gold);text-decoration:underline}

/* ---------- Room mock ---------- */
.room{background:var(--panel);border:1px solid var(--border);border-radius:22px;padding:18px;box-shadow:var(--shadow);width:100%;max-width:400px}
.room .rh{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.room .rh b{font-family:var(--logo-font);font-size:22px;color:var(--gold);letter-spacing:.5px;line-height:1.1}
.room .rh span{font-size:12px;color:var(--green);font-weight:700;white-space:nowrap}
.room ul{list-style:none;display:flex;flex-direction:column;gap:8px}
.room li{display:flex;align-items:center;gap:10px;background:var(--bg-soft);border-radius:12px;padding:8px 10px;font-size:14px;font-weight:600}
.room li .av{width:30px;height:30px;border-radius:50%;background:linear-gradient(150deg,var(--violet-hi),var(--violet-deep));display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;color:#fff;flex:none}
.room li .av.bot{background:linear-gradient(150deg,#f0b429,#c47c12);color:#2a1c0a}
.room li .st{margin-left:auto;font-size:12px;color:var(--muted)}
.room li .st.ok{color:var(--green)}
.room .rb{margin-top:14px;display:flex;gap:8px}
.room .rb span{flex:1;text-align:center;padding:10px;border-radius:12px;font-weight:700;font-size:13px;background:var(--violet);color:#fff}
.room .rb span.ghost{background:rgba(255,255,255,.08);color:var(--text)}

/* ---------- Draw widget (МАК) ---------- */
.draw{display:grid;grid-template-columns:1fr;gap:22px;align-items:center;background:var(--panel);border:1px solid var(--border);border-radius:26px;padding:22px;box-shadow:var(--shadow)}
.draw .stage{display:flex;justify-content:center}
.draw .card{width:min(260px,70vw);aspect-ratio:5/7;border-radius:18px;overflow:hidden;border:3px solid rgba(231,192,113,.75);box-shadow:0 20px 48px rgba(0,0,0,.55);
  background:#2a1f3a center/cover no-repeat;position:relative;transition:transform .5s cubic-bezier(.2,.8,.3,1)}
.draw .card img{width:100%;height:100%;object-fit:cover}
.draw .card.back{background:url(/landing/assets/card-back.png) center/cover no-repeat}
.draw .ctrl{display:flex;flex-direction:column;gap:12px}
.draw .ctrl h3{font-size:22px;font-weight:800}
.draw .ctrl p{color:var(--muted);font-size:15px}
.draw button{cursor:pointer;border:0;font:inherit;font-weight:800;font-size:16px;padding:14px 22px;border-radius:14px;color:#fff;
  background:linear-gradient(180deg,var(--violet-hi),var(--violet));box-shadow:0 12px 26px rgba(109,74,214,.4)}
.draw button:hover{filter:brightness(1.06)}
.draw textarea{font:inherit;font-size:15px;width:100%;min-height:90px;border-radius:12px;border:1px solid var(--border-soft);background:var(--bg-soft);color:var(--text);padding:12px;resize:vertical}
.draw .q{font-size:13px;color:var(--muted-2)}
@media(min-width:760px){.draw{grid-template-columns:.9fr 1.1fr;padding:30px}}

/* ---------- Game list (listicle) ---------- */
.glist{display:grid;grid-template-columns:1fr;gap:14px;counter-reset:g}
.gitem{display:grid;grid-template-columns:auto 1fr;gap:14px;background:var(--panel);border:1px solid var(--border-soft);border-radius:18px;padding:18px}
.gitem::before{counter-increment:g;content:counter(g);font-family:var(--logo-font);font-size:30px;color:var(--gold);line-height:1;width:34px}
.gitem>div{min-width:0}
.gitem h3{font-size:18px;font-weight:800;margin-bottom:4px;overflow-wrap:anywhere}
.gitem h3 a{color:var(--gold);text-decoration:underline;text-underline-offset:3px}
.gitem .tags{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 10px}
.gitem .tags span{font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px;background:var(--bg-soft);color:var(--muted)}
.gitem p{color:var(--muted);font-size:14.5px}
.gitem.us{border-color:rgba(240,180,41,.45);background:linear-gradient(180deg,var(--panel),var(--bg-soft))}

/* ---------- TOC ---------- */
.toc{background:var(--panel);border:1px solid var(--border-soft);border-radius:16px;padding:16px 18px;margin:0 0 30px}
.toc b{font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--gold)}
.toc ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:10px}
.toc a{color:var(--muted);font-weight:600;font-size:14px}
.toc a:hover{color:var(--text)}

/* ---------- Screens (phone) ---------- */
.phones{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.phones figure{border-radius:22px;overflow:hidden;border:6px solid #16111f;box-shadow:0 20px 44px rgba(0,0,0,.5);background:#000}
.phones img{width:100%;height:auto}
@media(min-width:760px){.phones{grid-template-columns:repeat(4,1fr);gap:20px}}
.phone-solo{width:min(260px,64vw);border-radius:28px;overflow:hidden;border:7px solid #16111f;box-shadow:0 26px 60px rgba(0,0,0,.6);transform:rotate(-3deg)}

/* ---------- Final CTA ---------- */
.final{background:radial-gradient(80% 120% at 50% 0%,rgba(109,74,214,.32),transparent 60%),linear-gradient(180deg,#251e36,#1d1729);text-align:center}
.final .card{max-width:760px;margin:0 auto;background:var(--panel);border:1px solid var(--border);border-radius:22px;padding:38px 22px;box-shadow:var(--shadow)}
.final .card .mascot{width:72px;height:72px;margin:0 auto 18px;object-fit:contain;filter:drop-shadow(0 8px 16px rgba(0,0,0,.5))}
.final h2{font-size:clamp(26px,3.4vw,38px);font-weight:800;margin-bottom:12px}
.final p{color:var(--muted);font-size:15.5px;max-width:480px;margin:0 auto 30px}
.final .cta-row{justify-content:center;margin-inline:auto}
@media(min-width:600px){.final .card{padding:52px 40px;border-radius:28px}.final .card .mascot{width:88px;height:88px}.final p{font-size:17px}}

/* ---------- Footer ---------- */
footer{background:var(--ink);padding:42px 0 32px;border-top:1px solid var(--border-soft)}
.foot-grid{display:grid;grid-template-columns:1fr;gap:26px;margin-bottom:34px}
.foot-brand .name{font-family:var(--logo-font);font-size:28px;color:var(--text)}
.foot-brand .name .x{color:var(--orange)}
.foot-brand p{color:var(--muted);font-size:14px;margin-top:12px;max-width:300px}
.foot-col h4{font-size:13px;text-transform:uppercase;letter-spacing:1px;color:var(--gold);margin-bottom:14px}
.foot-col ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.foot-col li{color:var(--muted);font-size:14px}
.foot-col li a:hover{color:var(--text)}
.foot-bottom{border-top:1px solid var(--border-soft);padding-top:22px;display:flex;flex-direction:column;gap:6px;color:var(--muted-2);font-size:13px}
@media(min-width:760px){footer{padding:54px 0 40px}.foot-grid{grid-template-columns:1.2fr 1fr 1fr 1fr;gap:34px}.foot-bottom{flex-direction:row;justify-content:space-between;flex-wrap:wrap;gap:12px}}

/* ---------- 404 ---------- */
.nf{min-height:70vh;display:flex;align-items:center;text-align:center}
.nf .card{margin:0 auto;max-width:560px}
.nf h1{font-family:var(--logo-font);font-size:clamp(64px,14vw,120px);color:var(--gold);line-height:1}

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