:root {
  --brand:#CA8A04; --brand-hover:#A16207;
  --brand-light:color-mix(in srgb, var(--brand) 26%, var(--bg)); --brand-tint:color-mix(in srgb, var(--brand) 14%, var(--bg));
  --on-brand:#ffffff;

  --bg:#0F1418; --surface:#1A1F26; --surface-2:#232932;
  --text:#E5E7EB; --text-body:#BFC6D3; --text-muted:#7F8896;
  --border:#2A313B; --border-strong:#3F4855;

  --warning:#FFD05E; --warning-bg:#3B2F0E; --warning-text:#F6D06B;
  --warning-bar-bg:#332807; --warning-bar-border:#7A5A00;
  --warning-bar-text:#F6D06B; --warning-bar-strong:#FFE39A; --warning-bar-link:#F6D06B;

  --notice-info-bg:#0E2A38; --notice-info-border:#1E4A66; --notice-info-text:#9FD3EE;
  --notice-success-bg:#12291B; --notice-success-border:#265A38; --notice-success-text:#A6DDB4;
  --notice-danger-bg:#331014; --notice-danger-border:#5E1E27; --notice-danger-text:#EAA6AE;

  --shadow-soft:0 2px 8px rgba(0,0,0,.35); --shadow-hover:0 4px 18px rgba(0,0,0,.45);

  --radius:24px;
  --radius-btn:999px;
  --radius-chip:999px;

  --gap:12px; --pad:14px; --fs:14px;
  --section-pad:24px; --h1-size:clamp(24px,3.0vw,30px);

  --f-body:'Roboto',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;

  --card-bg:var(--brand-tint); --card-border:1px solid transparent; --card-shadow:none;
}
* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { background:var(--bg); color:var(--text-body); font-family:var(--f-body); font-size:var(--fs); line-height:1.5; min-height:100vh; -webkit-font-smoothing:antialiased; }
img { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }
button { font:inherit; cursor:pointer; border:none; background:none; color:inherit; }
.wrap { max-width:1160px; margin:0 auto; padding:0 20px; }
.skip-link { position:absolute; left:-9999px; top:0; background:var(--brand); color:var(--on-brand); padding:10px 16px; border-radius:0 0 var(--radius-btn) 0; z-index:99; }
.skip-link:focus { left:0; }

/* ─── header / topbar ─── */
header.topbar { background:var(--bg); border-bottom:1px solid var(--border); padding:18px 0; }
.topbar-inner { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.brand { display:flex; align-items:center; font-style:italic; font-weight:700; font-size:26px; letter-spacing:-.01em; color:var(--text); }
.brand-wing { display:inline-block; margin-left:4px; color:var(--brand); font-size:16px; transform:translateY(-4px); }
.mainnav { display:flex; gap:18px; flex-wrap:wrap; }
.mainnav a { font-size:14px; color:var(--text-body); transition:color .15s; }
.mainnav a:hover, .mainnav a[aria-current="page"] { color:var(--brand); }
.nav-actions { display:flex; gap:8px; }
.btn { padding:10px 22px; border-radius:var(--radius-btn); font-weight:500; font-size:15px; transition:background .15s,color .15s,transform .12s; display:inline-flex; align-items:center; gap:8px; white-space:nowrap; }
.btn:hover { transform:translateY(-1px); }
.btn-soft { background:var(--brand-light); color:var(--brand); }
.btn-soft:hover { background:color-mix(in srgb, var(--brand-light) 80%, var(--brand)); }
.btn-primary { background:var(--brand); color:var(--on-brand); }
.btn-primary:hover { background:var(--brand-hover); }

/* ─── mirror-notice (одиночный жёлтый бар) ─── */
.mirror-notice { background:var(--warning-bar-bg); border:1px solid var(--warning-bar-border); padding:10px 14px; border-radius:var(--radius); margin:14px 0 4px; font-size:14px; color:var(--warning-bar-text); line-height:1.5; }
.mirror-notice strong { color:var(--warning-bar-strong); margin-right:4px; }
.mirror-notice a { color:var(--warning-bar-link); font-weight:600; text-decoration:underline; text-underline-offset:2px; margin:0 2px; }
.mirror-notice a:hover { color:var(--brand); }
.mirror-notice .mirror-hint { opacity:.85; }

/* ─── notices-top (2 карточки-плашки сверху) ─── */
.notices-top { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:var(--gap); margin:14px 0 4px; }
.notice { display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:flex-start; padding:12px 14px; border-radius:var(--radius); border:1px solid transparent; font-size:14px; line-height:1.5; }
.notice .n-ico { font-size:22px; line-height:1; padding-top:2px; }
.notice .n-title { font-weight:700; margin-bottom:2px; font-size:14px; }
.notice .n-body { font-size:13px; line-height:1.55; }
.notice.tone-danger  { background:var(--notice-danger-bg);  border-color:var(--notice-danger-border);  color:var(--notice-danger-text); }
.notice.tone-warning { background:var(--warning-bar-bg);    border-color:var(--warning-bar-border);    color:var(--warning-bar-text); }
.notice.tone-info    { background:var(--notice-info-bg);    border-color:var(--notice-info-border);    color:var(--notice-info-text); }
.notice.tone-success { background:var(--notice-success-bg); border-color:var(--notice-success-border); color:var(--notice-success-text); }
.notice a { color:inherit; text-decoration:underline; font-weight:600; }

/* ─── tips-bar (горизонтальные советы-чипы) ─── */
.tips-bar { display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; padding:14px 0 4px; }
.tips-bar::-webkit-scrollbar { display:none; }
.tip-chip { flex-shrink:0; padding:8px 14px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-chip); font-size:13px; color:var(--text-body); line-height:1.4; max-width:520px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tip-chip:hover { border-color:var(--brand); color:var(--text); }

/* ─── platforms / tabs ─── */
.platforms { padding:22px 0 0; border-bottom:1px solid var(--border); }
.tabs { display:flex; gap:4px; overflow-x:auto; scrollbar-width:none; }
.tabs::-webkit-scrollbar { display:none; }
.tab { padding:10px 16px 14px; font-size:15px; color:var(--text-body); white-space:nowrap; border-bottom:3px solid transparent; transition:color .15s,border-color .15s; display:inline-flex; align-items:center; gap:8px; background:none; }
.tab:hover { color:var(--brand); }
.tab.active { color:var(--brand); font-weight:500; border-bottom-color:var(--brand); }
.tab-icon { width:20px; height:20px; border-radius:50%; display:inline-grid; place-items:center; font-size:12px; }
.tab-icon.dot-brand { background:var(--brand); }

/* ─── search bar ─── */
.search-wrap { padding:22px 0; }
.search-form { border:2px solid var(--brand); border-radius:var(--radius-btn); background:var(--bg); display:grid; grid-template-columns:1.2fr 1.2fr 1.2fr 1.2fr .8fr .8fr auto; overflow:hidden; }
.sf-field { padding:14px 16px; border-right:1px solid var(--border); display:flex; flex-direction:column; gap:3px; min-width:0; }
.sf-field-label { font-size:12px; color:var(--text-muted); }
.sf-field-value { font-size:15px; color:var(--text); }
.sf-field-placeholder { font-size:15px; color:var(--text-muted); }
.sf-btn { padding:0 32px; background:var(--brand); color:var(--on-brand); font-weight:500; font-size:16px; transition:background .15s; }
.sf-btn:hover { background:var(--brand-hover); }
@media (max-width:900px){ .search-form{ grid-template-columns:1fr 1fr; } .sf-field{ border-right:none; border-bottom:1px solid var(--border); } .sf-btn{ grid-column:1 / -1; padding:14px; } }

/* ─── CTA ─── */
.cta { margin-top:16px; padding:22px 24px; background:linear-gradient(135deg, var(--brand-tint) 0%, var(--bg) 75%); border:1px solid var(--border); border-radius:var(--radius); display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.cta-left { flex:1; min-width:220px; }
.cta-title { font-weight:700; font-size:18px; color:var(--text); margin-bottom:4px; display:flex; align-items:center; gap:8px; }
.cta-dot { width:8px; height:8px; border-radius:50%; background:#22c55e; box-shadow:0 0 8px rgba(34,197,94,.5); }
.cta-hint { font-size:14px; color:var(--text-body); }
.cta-actions { display:flex; gap:10px; flex-wrap:wrap; }
.cta-btn { padding:12px 20px; border-radius:var(--radius-btn); background:var(--brand); color:var(--on-brand); font-weight:500; font-size:15px; display:inline-flex; align-items:center; gap:8px; transition:background .15s,transform .12s; }
.cta-btn:hover { background:var(--brand-hover); transform:translateY(-1px); }
.cta-btn::after { content:'→'; transition:transform .15s; }
.cta-btn:hover::after { transform:translateX(3px); }
.cta-btn.secondary { background:var(--brand-light); color:var(--brand); }
.cta-btn.secondary:hover { background:color-mix(in srgb, var(--brand-light) 80%, var(--brand)); }
.cta-loading { color:var(--text-muted); font-size:14px; padding:12px 20px; }

/* ─── hero ─── */
.hero-seo { margin-top:24px; padding:32px; background:linear-gradient(135deg, var(--brand-tint) 0%, var(--bg) 70%); border:1px solid var(--border); border-radius:var(--radius); }
.hero-eyebrow { display:inline-flex; align-items:center; gap:8px; font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--brand); font-weight:500; margin-bottom:12px; }
.hero-eyebrow-dot { width:6px; height:6px; border-radius:50%; background:var(--brand); }
h1.hero-h1 { font-weight:700; font-size:var(--h1-size); line-height:1.15; letter-spacing:-.02em; color:var(--text); max-width:26ch; text-wrap:balance; margin-bottom:10px; }
.hero-lead { font-size:16px; color:var(--text-body); max-width:66ch; line-height:1.6; }

/* ─── section ─── */
section.block { padding:var(--section-pad) 0; }
.section-head { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:18px; gap:16px; flex-wrap:wrap; }
.section-head h2 { font-weight:500; font-size:22px; letter-spacing:-.01em; color:var(--text); }
.section-head a { font-size:14px; color:var(--brand); font-weight:500; }
.section-note { font-size:13px; color:var(--text-muted); }

/* ─── shops grid ─── */
.shops-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:var(--gap); }
.shop-card { background:var(--card-bg); border:var(--card-border); box-shadow:var(--card-shadow); border-radius:var(--radius); padding:var(--pad); transition:border-color .15s,box-shadow .15s,transform .12s; display:flex; flex-direction:column; gap:6px; }
.shop-card:hover { border-color:var(--brand); box-shadow:var(--shadow-hover); transform:translateY(-1px); }
.shop-logo { width:44px; height:44px; border-radius:var(--radius); background:var(--surface-2); display:grid; place-items:center; font-size:20px; margin-bottom:6px; }
.shop-name { font-weight:500; color:var(--text); font-size:15px; }
.shop-count { font-size:13px; color:var(--text-muted); font-variant-numeric:tabular-nums; }

/* ─── products grid ─── */
.products-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(270px, 1fr)); gap:var(--gap); }
.product-card { background:var(--card-bg); border:var(--card-border); box-shadow:var(--card-shadow); border-radius:var(--radius); padding:var(--pad); display:flex; flex-direction:column; gap:10px; transition:border-color .15s,box-shadow .15s,transform .12s; }
.product-card:hover { border-color:var(--brand); box-shadow:var(--shadow-hover); transform:translateY(-1px); }
.pc-head { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
.pc-title { font-weight:500; color:var(--text); font-size:15px; line-height:1.3; }
.pc-shop { font-size:12px; color:var(--text-muted); margin-top:2px; }
.pc-rating { display:inline-flex; align-items:center; gap:4px; padding:3px 8px; border-radius:var(--radius-chip); background:var(--warning-bg); font-size:12px; font-weight:500; color:var(--warning-text); }
.pc-rating-star { color:var(--warning); }
.pc-price { font-size:20px; font-weight:700; color:var(--text); font-variant-numeric:tabular-nums; }
.pc-price-per { font-size:13px; color:var(--text-muted); font-weight:400; margin-left:4px; }
.pc-locations { display:flex; flex-wrap:wrap; gap:6px; padding-top:8px; border-top:1px solid var(--border); }
.pc-loc { font-size:12px; padding:3px 8px; border-radius:var(--radius-chip); background:var(--surface-2); color:var(--text-body); }

/* ─── about / benefits ─── */
.about-grid { display:grid; grid-template-columns:1.3fr 1fr; gap:40px; align-items:start; }
@media (max-width:800px){ .about-grid{ grid-template-columns:1fr; } }
.about-text h2 { font-weight:700; font-size:26px; color:var(--text); max-width:22ch; text-wrap:balance; margin-bottom:14px; line-height:1.2; }
.about-text p { font-size:15px; color:var(--text-body); line-height:1.65; max-width:62ch; }
.about-text p + p { margin-top:12px; }
.benefits { display:grid; gap:var(--gap); }
.benefit { padding:var(--pad); background:var(--card-bg); border:var(--card-border); box-shadow:var(--card-shadow); border-radius:var(--radius); display:flex; gap:12px; align-items:flex-start; }
.benefit-emoji { flex-shrink:0; font-size:22px; width:40px; height:40px; border-radius:var(--radius); background:var(--brand-tint); display:grid; place-items:center; }
.benefit-title { font-weight:500; color:var(--text); font-size:15px; margin-bottom:3px; }
.benefit-txt { font-size:14px; color:var(--text-body); line-height:1.5; }

/* ─── blog ─── */
.blog { padding:40px 0; border-top:1px solid var(--border); }
.blog-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:var(--gap); }
.post-card { background:var(--card-bg); border:var(--card-border); box-shadow:var(--card-shadow); border-radius:var(--radius); padding:var(--pad); display:flex; flex-direction:column; gap:10px; transition:border-color .15s,box-shadow .15s,transform .12s; }
.post-card:hover { border-color:var(--brand); box-shadow:var(--shadow-hover); transform:translateY(-2px); }
.post-meta { display:flex; align-items:center; gap:10px; font-size:12px; color:var(--text-muted); flex-wrap:wrap; }
.post-cat { padding:3px 10px; border-radius:var(--radius-chip); background:var(--brand-tint); color:var(--brand); font-weight:500; }
.post-title { font-weight:500; font-size:17px; line-height:1.3; color:var(--text); text-wrap:balance; }
.post-title a:hover { color:var(--brand); }
.post-excerpt { font-size:14px; color:var(--text-body); line-height:1.55; }
.post-more { font-size:14px; color:var(--brand); font-weight:500; display:inline-flex; align-items:center; gap:6px; margin-top:auto; padding-top:4px; }
.post-more::after { content:'→'; transition:transform .15s; }
.post-card:hover .post-more::after { transform:translateX(3px); }

/* ─── страницы контента (about / rules / support / blog / article) ─── */
.crumbs { padding:18px 0 0; font-size:13px; color:var(--text-muted); }
.crumbs ol { list-style:none; display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.crumbs li { display:flex; align-items:center; gap:6px; }
.crumbs li + li::before { content:'/'; color:var(--border-strong); }
.crumbs a { color:var(--brand); }
.crumbs a:hover { text-decoration:underline; }
.page-hero { padding:24px 0 8px; }
.page-hero h1 { font-weight:700; font-size:var(--h1-size); line-height:1.18; letter-spacing:-.02em; color:var(--text); max-width:30ch; text-wrap:balance; margin-bottom:10px; }
.page-hero .page-lead { font-size:16px; color:var(--text-body); max-width:70ch; line-height:1.6; }
.page-body { padding:16px 0 40px; display:grid; grid-template-columns:minmax(0, 1fr) 300px; gap:44px; align-items:start; }
@media (max-width:900px){ .page-body{ grid-template-columns:1fr; gap:28px; } }
.prose { max-width:70ch; }
.prose h2 { font-weight:700; font-size:22px; color:var(--text); margin:28px 0 12px; line-height:1.25; text-wrap:balance; }
.prose h2:first-child { margin-top:0; }
.prose h3 { font-weight:500; font-size:18px; color:var(--text); margin:20px 0 8px; }
.prose p { font-size:15px; line-height:1.7; color:var(--text-body); }
.prose p + p { margin-top:12px; }
.prose ul, .prose ol { margin:12px 0 12px 22px; display:grid; gap:7px; }
.prose li { font-size:15px; line-height:1.65; color:var(--text-body); }
.prose strong { color:var(--text); }
.prose a { color:var(--brand); }
.prose a:hover { text-decoration:underline; }
.aside { display:grid; gap:14px; position:sticky; top:20px; }
.aside-card { border:var(--card-border); box-shadow:var(--card-shadow); border-radius:var(--radius); padding:18px; background:var(--card-bg); }
.aside-card h2 { font-size:15px; font-weight:700; color:var(--text); margin-bottom:10px; }
.aside-links { display:grid; gap:9px; }
.aside-links a { font-size:14px; color:var(--brand); }
.aside-links a:hover { text-decoration:underline; }
.faq-item { border:var(--card-border); box-shadow:var(--card-shadow); border-radius:var(--radius); padding:16px 18px; background:var(--card-bg); }
.faq-item + .faq-item { margin-top:10px; }
.faq-item h3 { font-size:16px; font-weight:500; color:var(--text); margin-bottom:6px; }
.faq-item p { font-size:14px; line-height:1.6; color:var(--text-body); }
.related { border-top:1px solid var(--border); padding:28px 0 40px; }
.related h2 { font-weight:500; font-size:20px; color:var(--text); margin-bottom:16px; }

/* ─── footer ─── */
footer { padding:32px 0; margin-top:24px; border-top:1px solid var(--border); color:var(--text-muted); font-size:13px; background:var(--bg); }
.foot-grid { display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; }
.foot-links { display:flex; gap:20px; flex-wrap:wrap; }
.foot-links a:hover { color:var(--brand); }
.foot-note { margin-top:14px; padding-top:12px; border-top:1px solid var(--border); font-size:12px; color:var(--text-muted); line-height:1.5; max-width:80ch; }

.hero{padding:44px 0 24px}.hero h1{font-size:clamp(30px,5vw,52px);line-height:1.08;color:var(--text);max-width:900px}.hero p{font-size:18px;max-width:860px;margin-top:18px}.eyebrow{color:var(--brand);font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:12px}.section{padding:36px 0}.section h2{font-size:28px;color:var(--text);margin-bottom:18px}.section h3{color:var(--text);font-size:18px;margin-bottom:8px}.grid2,.grid3,.grid4{display:grid;gap:14px}.grid2{grid-template-columns:repeat(2,1fr)}.grid3{grid-template-columns:repeat(3,1fr)}.grid4{grid-template-columns:repeat(4,1fr)}.content-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:22px}.content-card p,.prose p{margin:8px 0 16px}.prose{max-width:900px}.prose h2{margin-top:34px}.prose ul{padding-left:22px;margin:12px 0 20px}.prose li{margin:7px 0}.hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}.statbar{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.stat{padding:18px;background:var(--surface);border:1px solid var(--border);border-radius:18px}.stat b{display:block;color:var(--brand);font-size:24px}.tag{display:inline-block;background:var(--brand-tint);color:var(--brand);padding:5px 10px;border-radius:999px;font-size:12px;font-weight:700}.faq details{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:16px 18px;margin:9px 0}.faq summary{color:var(--text);font-weight:700;cursor:pointer}.footer{border-top:1px solid var(--border);padding:34px 0;margin-top:36px}.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:28px}.footer a{display:block;margin:6px 0;color:var(--text-body)}@media(max-width:800px){.grid4,.grid3,.grid2,.statbar,.footer-grid{grid-template-columns:1fr}.mainnav{display:none}.hero{padding-top:30px}}