:root {
  --bg: #f2f3f5;
  --glow: #e3e7ef;
  --card: #ffffff;
  --ink: #16181d;
  --muted: #5e6670;
  --line: #e2e5ea;
  --soft: #f6f7f9;
  --accent: #1c2430;
  --accent-2: #2c3848;
  --on-accent: #ffffff;
  --btn: #1c2430;
  --btn-2: #2c3848;
  --btn-ink: #ffffff;
  --nav: #1c2430;
  --nav-ink: #ffffff;
  --icon: #1c2430;
  --icon-ink: #ffffff;
  --star: #c8880a;
  --danger: #8d2f2f;
  --danger-bg: #fff;
  --shadow: 0 16px 40px rgba(20, 24, 32, 0.06);
  --radius: 20px;
  --btn-radius: 14px;
  --icon-radius: 18px;
  --pill: 999px;
  --display: "Unbounded", sans-serif;
  --stripe: #1c2430;
  --gold: transparent;
  color-scheme: light;
}

body[data-brand="xbet"] {
  --bg: #eef2f8;
  --glow: #d5e3f8;
  --ink: #10203a;
  --muted: #53627d;
  --line: #d5deee;
  --soft: #f5f8fc;
  --accent: #0d3f8f;
  --accent-2: #1b56b5;
  --btn: #0d3f8f;
  --btn-2: #1b56b5;
  --btn-ink: #fff;
  --nav: #0d3f8f;
  --nav-ink: #fff;
  --icon: #0d3f8f;
  --icon-ink: #fff;
  --star: #e2a30a;
  --stripe: #0d3f8f;
}

body[data-brand="xslots"] {
  --bg: #101614;
  --glow: #1c3330;
  --card: #18211d;
  --ink: #f4f7f4;
  --muted: #b4c3ba;
  --line: #2c3b34;
  --soft: #121c18;
  --accent: #e0c074;
  --accent-2: #f0d59a;
  --on-accent: #1b1408;
  --btn: #e0c074;
  --btn-2: #f0d59a;
  --btn-ink: #1b1408;
  --nav: #e0c074;
  --nav-ink: #1b1408;
  --icon: #e0c074;
  --icon-ink: #1b1408;
  --star: #e0c074;
  --danger: #ffb4b0;
  --danger-bg: #241816;
  --shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  --stripe: #e0c074;
  color-scheme: dark;
}

body[data-brand="win"] {
  --bg: #070b10;
  --glow: #123044;
  --card: #101820;
  --ink: #e7f6fb;
  --muted: #9eb4c2;
  --line: #243644;
  --soft: #0c141c;
  --accent: #39c8ff;
  --accent-2: #7ad9ff;
  --on-accent: #041018;
  --btn: #39c8ff;
  --btn-2: #7ad9ff;
  --btn-ink: #041018;
  --nav: #39c8ff;
  --nav-ink: #041018;
  --icon: #39c8ff;
  --icon-ink: #041018;
  --star: #39c8ff;
  --danger: #ffb4b0;
  --danger-bg: #1a1216;
  --shadow: 0 18px 40px rgba(0, 0, 0, 0.4);
  --radius: 8px;
  --btn-radius: 4px;
  --icon-radius: 8px;
  --pill: 4px;
  --stripe: #39c8ff;
  color-scheme: dark;
}

body[data-brand="mostbet"] {
  --bg: #f4f7fb;
  --glow: #d9e6ff;
  --ink: #102044;
  --muted: #53627f;
  --line: #d7e1f0;
  --soft: #f7f9fc;
  --accent: #0c3d91;
  --btn: #ffc20e;
  --btn-2: #e6ad00;
  --btn-ink: #1a1404;
  --nav: #0c3d91;
  --nav-ink: #fff;
  --icon: #0c3d91;
  --icon-ink: #fff;
  --star: #e2a000;
  --stripe: linear-gradient(90deg, #0c3d91 72%, #ffc20e 72%);
  --display: "Russo One", sans-serif;
}

body[data-brand="pinup"] {
  --bg: #f6efe6;
  --glow: #f0d2c8;
  --card: #fffaf4;
  --ink: #2c1216;
  --muted: #6e4a46;
  --line: #eadfd4;
  --soft: #fbf6f0;
  --accent: #c41230;
  --accent-2: #9d0e26;
  --btn: #c41230;
  --btn-2: #9d0e26;
  --btn-ink: #fff8f4;
  --nav: #c41230;
  --nav-ink: #fff8f4;
  --icon: #c41230;
  --icon-ink: #fff8f4;
  --star: #c41230;
  --danger: #8d2030;
  --radius: 6px;
  --btn-radius: 2px;
  --icon-radius: 4px;
  --pill: 2px;
  --display: "Cormorant Garamond", Georgia, serif;
  --stripe: #c41230;
}

body[data-brand="pinco"] {
  --bg: #f3f0fa;
  --glow: #ddd4f5;
  --ink: #231838;
  --muted: #64597a;
  --line: #e0d8ee;
  --soft: #f8f6fc;
  --accent: #3d2e8f;
  --accent-2: #543eae;
  --btn: #ff5a36;
  --btn-2: #e04828;
  --btn-ink: #fff;
  --nav: #3d2e8f;
  --nav-ink: #fff;
  --icon: #3d2e8f;
  --icon-ink: #fff;
  --star: #ff5a36;
  --stripe: linear-gradient(90deg, #3d2e8f 68%, #ff5a36 68%);
}

body[data-brand="melbet"] {
  --bg: #121212;
  --glow: #3a320c;
  --card: #1c1c1c;
  --ink: #f6f6f6;
  --muted: #c6c6c6;
  --line: #333;
  --soft: #161616;
  --accent: #ffd000;
  --accent-2: #ffe14a;
  --on-accent: #16140a;
  --btn: #ffd000;
  --btn-2: #ffe14a;
  --btn-ink: #16140a;
  --nav: #ffd000;
  --nav-ink: #16140a;
  --icon: #ffd000;
  --icon-ink: #16140a;
  --star: #ffd000;
  --danger: #ffb4b0;
  --danger-bg: #241816;
  --shadow: 0 18px 40px rgba(0, 0, 0, 0.4);
  --radius: 12px;
  --btn-radius: 8px;
  --stripe: #ffd000;
  color-scheme: dark;
}

body[data-brand="kent"] {
  --bg: #e7efe6;
  --glow: #d5e4d2;
  --card: #fbfaf4;
  --ink: #14241c;
  --muted: #4d6558;
  --line: #d5e0d4;
  --soft: #f4f7f2;
  --accent: #143d2e;
  --accent-2: #1d5742;
  --btn: #143d2e;
  --btn-2: #1d5742;
  --btn-ink: #f6f3e8;
  --nav: #143d2e;
  --nav-ink: #f6f3e8;
  --icon: #143d2e;
  --icon-ink: #e8c56b;
  --star: #a67c2d;
  --gold: #c6a15a;
  --radius: 4px;
  --btn-radius: 2px;
  --icon-radius: 4px;
  --pill: 2px;
  --display: "Literata", Georgia, serif;
  --stripe: linear-gradient(90deg, #143d2e 80%, #c6a15a 80%);
}

body[data-brand="rox"] {
  --bg: #1a0d12; --glow: #4a1830; --card: #241018; --ink: #f8efe6; --muted: #c9b0b8;
  --line: #4a2434; --soft: #140910; --accent: #e7c27a; --btn: #e7c27a; --btn-2: #f3d7a1;
  --btn-ink: #2a140c; --nav: #e7c27a; --nav-ink: #2a140c; --icon: #6b1d3a; --icon-ink: #f6e7c1;
  --star: #e7c27a; --stripe: #e7c27a; --shadow: 0 18px 40px rgba(0,0,0,.4); color-scheme: dark;
}
body[data-brand="r7"] {
  --bg: #10080a; --glow: #3a1014; --card: #1c0e12; --ink: #f7f1f2; --muted: #c7a8ae;
  --line: #4a2228; --soft: #12080a; --accent: #ff2d3a; --btn: #ff2d3a; --btn-2: #ff5a64;
  --btn-ink: #fff; --nav: #ff2d3a; --nav-ink: #fff; --icon: #ff2d3a; --icon-ink: #fff;
  --star: #ff2d3a; --stripe: #ff2d3a; --radius: 8px; --btn-radius: 4px; --pill: 4px;
  --shadow: 0 18px 40px rgba(0,0,0,.45); color-scheme: dark;
}
body[data-brand="arkada"] {
  --bg: #12081f; --glow: #3a1870; --card: #1c1030; --ink: #f4edff; --muted: #c2b0de;
  --line: #3d2860; --soft: #100818; --accent: #c084fc; --btn: #c084fc; --btn-2: #d8b4fe;
  --btn-ink: #1a0a2e; --nav: #c084fc; --nav-ink: #1a0a2e; --icon: #7c3aed; --icon-ink: #fff;
  --star: #c084fc; --stripe: #c084fc; --shadow: 0 18px 40px rgba(0,0,0,.45); color-scheme: dark;
}
body[data-brand="panda"] {
  --bg: #0e1612; --glow: #163028; --card: #15211b; --ink: #f3f7f4; --muted: #b7c9be;
  --line: #2a4034; --soft: #0c1410; --accent: #7dcea0; --btn: #7dcea0; --btn-2: #a9e0c1;
  --btn-ink: #102018; --nav: #7dcea0; --nav-ink: #102018; --icon: #1e3d2f; --icon-ink: #d8ffe8;
  --star: #7dcea0; --stripe: #7dcea0; --shadow: 0 18px 40px rgba(0,0,0,.4); color-scheme: dark;
}
body[data-brand="dragon"] {
  --bg: #071410; --glow: #0e3324; --card: #0e1f18; --ink: #f4f7f2; --muted: #b7cbb8;
  --line: #234536; --soft: #081410; --accent: #d4af37; --btn: #d4af37; --btn-2: #e6c96a;
  --btn-ink: #1a1404; --nav: #d4af37; --nav-ink: #1a1404; --icon: #0f3d2e; --icon-ink: #f6e7a8;
  --star: #d4af37; --stripe: #d4af37; --shadow: 0 18px 40px rgba(0,0,0,.45); color-scheme: dark;
}
body[data-brand="sykaaa"] {
  --bg: #140810; --glow: #4a1030; --card: #241018; --ink: #fff5fb; --muted: #e0b4cc;
  --line: #5a2844; --soft: #12060e; --accent: #ff4fa3; --btn: #ff4fa3; --btn-2: #ff8ac4;
  --btn-ink: #2a0618; --nav: #ff4fa3; --nav-ink: #2a0618; --icon: #ff4fa3; --icon-ink: #2a0618;
  --star: #ff4fa3; --stripe: #ff4fa3; --radius: 18px; --shadow: 0 18px 40px rgba(0,0,0,.45); color-scheme: dark;
}
body[data-brand="vodka"] {
  --bg: #eef3f8; --glow: #d5e4f2; --card: #fff; --ink: #142033; --muted: #5c6d82;
  --line: #d5e0ea; --soft: #f5f8fb; --accent: #1d4e89; --btn: #1d4e89; --btn-2: #2f6cb0;
  --btn-ink: #fff; --nav: #1d4e89; --nav-ink: #fff; --icon: #1d4e89; --icon-ink: #d6e6f5;
  --star: #c4a574; --stripe: #1d4e89;
}
body[data-brand="riobet"] {
  --bg: #071612; --glow: #0e3a2c; --card: #10241c; --ink: #f6f3e8; --muted: #c5d4c8;
  --line: #245044; --soft: #081612; --accent: #e4c56a; --btn: #e4c56a; --btn-2: #f0d48a;
  --btn-ink: #1c1606; --nav: #0e6b4f; --nav-ink: #f6f3e8; --icon: #0e6b4f; --icon-ink: #e4c56a;
  --star: #e4c56a; --stripe: #e4c56a; --shadow: 0 18px 40px rgba(0,0,0,.4); color-scheme: dark;
}
body[data-brand="faro"] {
  --bg: #16120c; --glow: #3a2c18; --card: #221c14; --ink: #f7f1e6; --muted: #d2c4ae;
  --line: #4a3c28; --soft: #120e0a; --accent: #e0b15a; --btn: #e0b15a; --btn-2: #efcb86;
  --btn-ink: #24180a; --nav: #e0b15a; --nav-ink: #24180a; --icon: #8a5a2b; --icon-ink: #f7e7c4;
  --star: #e0b15a; --stripe: #e0b15a; --shadow: 0 18px 40px rgba(0,0,0,.4); color-scheme: dark;
}
body[data-brand="fenix"] {
  --bg: #140c08; --glow: #4a2010; --card: #24140e; --ink: #fff6ef; --muted: #e2c2b0;
  --line: #5a3020; --soft: #120a08; --accent: #ff7a2f; --btn: #ff7a2f; --btn-2: #ffab70;
  --btn-ink: #2a1006; --nav: #ff7a2f; --nav-ink: #2a1006; --icon: #ff7a2f; --icon-ink: #2a1006;
  --star: #ff7a2f; --stripe: #ff7a2f; --shadow: 0 18px 40px rgba(0,0,0,.45); color-scheme: dark;
}
body[data-brand="homey"] {
  --bg: #f6efe6; --glow: #f0d9c4; --card: #fffaf5; --ink: #3a2418; --muted: #7a6254;
  --line: #ead9c8; --soft: #fbf6f0; --accent: #c4653a; --btn: #c4653a; --btn-2: #d9845c;
  --btn-ink: #fff8f4; --nav: #c4653a; --nav-ink: #fff8f4; --icon: #c4653a; --icon-ink: #fff1e4;
  --star: #c4922a; --stripe: #c4653a; --display: "Literata", Georgia, serif;
}
body[data-brand="auf"] {
  --bg: #100818; --glow: #2e1458; --card: #1a1030; --ink: #f6f2ff; --muted: #c8b8e6;
  --line: #3c2868; --soft: #0c0614; --accent: #8b6cff; --btn: #8b6cff; --btn-2: #b09bff;
  --btn-ink: #140828; --nav: #8b6cff; --nav-ink: #140828; --icon: #8b6cff; --icon-ink: #140828;
  --star: #8b6cff; --stripe: #8b6cff; --shadow: 0 18px 40px rgba(0,0,0,.45); color-scheme: dark;
}
body[data-brand="unlim"] {
  --bg: #070d14; --glow: #10283a; --card: #101820; --ink: #eef6fb; --muted: #a9c0d0;
  --line: #243848; --soft: #080e14; --accent: #3ec6ff; --btn: #3ec6ff; --btn-2: #8adfff;
  --btn-ink: #041018; --nav: #3ec6ff; --nav-ink: #041018; --icon: #3ec6ff; --icon-ink: #041018;
  --star: #3ec6ff; --stripe: #3ec6ff; --radius: 10px; --shadow: 0 18px 40px rgba(0,0,0,.45); color-scheme: dark;
}
body[data-brand="hype"] {
  --bg: #120812; --glow: #401030; --card: #1e101c; --ink: #fff4fb; --muted: #e2b6d0;
  --line: #52243e; --soft: #100610; --accent: #ff3d8a; --btn: #ff3d8a; --btn-2: #ff7ab0;
  --btn-ink: #2a0614; --nav: #ff3d8a; --nav-ink: #2a0614; --icon: #ff3d8a; --icon-ink: #fff;
  --star: #ff3d8a; --stripe: #ff3d8a; --radius: 6px; --btn-radius: 3px; --pill: 3px;
  --shadow: 0 18px 40px rgba(0,0,0,.45); color-scheme: dark;
}
body[data-brand="apex"] {
  --bg: #eef2f6; --glow: #d5dee8; --card: #fff; --ink: #152033; --muted: #5d6b80;
  --line: #d5dee8; --soft: #f6f8fb; --accent: #1f4b7a; --btn: #1f4b7a; --btn-2: #32689e;
  --btn-ink: #fff; --nav: #1f4b7a; --nav-ink: #fff; --icon: #1f4b7a; --icon-ink: #dbe7f5;
  --star: #c9a227; --stripe: #1f4b7a;
}
body[data-brand="lev"] {
  --bg: #16110a; --glow: #3a2a12; --card: #241c12; --ink: #f8f1e4; --muted: #d4c4a8;
  --line: #4a3a22; --soft: #120e08; --accent: #e2b657; --btn: #e2b657; --btn-2: #f0d08a;
  --btn-ink: #24180a; --nav: #e2b657; --nav-ink: #24180a; --icon: #8a6230; --icon-ink: #f8e7c0;
  --star: #e2b657; --stripe: #e2b657; --display: "Literata", Georgia, serif;
  --shadow: 0 18px 40px rgba(0,0,0,.4); color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Golos Text", "Segoe UI", sans-serif;
  color: var(--ink);
  background-color: var(--bg);
  background-image: radial-gradient(1000px 460px at 8% -12%, var(--glow), transparent 58%);
  line-height: 1.5;
}
body::before {
  content: "";
  display: block;
  height: 6px;
  background: var(--stripe);
}
a { color: inherit; }
h1, h2, .brand, .app-icon, .tile .mono {
  font-family: var(--display);
}

.wrap {
  width: min(1040px, calc(100% - 32px));
  margin: 0 auto;
}

header.site { padding: 18px 0 0; }
.site-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  font-weight: 600;
}
.brand i {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: var(--icon);
  display: grid;
  place-items: center;
}
.brand i span {
  width: 12px;
  height: 12px;
  border: 2px solid var(--icon-ink);
  border-radius: 3px;
}
.age {
  border: 1px solid color-mix(in srgb, var(--danger) 45%, var(--line));
  color: var(--danger);
  background: var(--danger-bg);
  border-radius: var(--pill);
  padding: 4px 10px;
  font-weight: 700;
  font-size: 13px;
}

.nav {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 14px 0 16px;
  scrollbar-width: thin;
}
.nav a {
  flex: none;
  text-decoration: none;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  border-radius: var(--pill);
  padding: 8px 12px;
  font-size: 14px;
  font-weight: 600;
}
.nav a:hover { border-color: var(--nav); }
.nav a.is-active {
  background: var(--nav);
  color: var(--nav-ink);
  border-color: var(--nav);
}
.nav a:focus-visible,
.download:focus-visible,
.tile a:focus-visible,
.brand:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.home { padding: 8px 0 36px; }
.intro h1,
.home h1 {
  font-weight: 500;
  font-size: clamp(32px, 4.4vw, 48px);
  line-height: 1.12;
  letter-spacing: -0.03em;
  margin: 8px 0 10px;
  max-width: 100%;
  text-wrap: balance;
}
body[data-brand="pinup"] .intro h1,
body[data-brand="kent"] .intro h1,
body[data-brand="pinup"] .home h1 {
  font-weight: 600;
  letter-spacing: -0.02em;
}
.lead {
  margin: 0;
  max-width: 62ch;
  color: var(--muted);
  font-size: 17px;
}
.home h2,
.panel h2 {
  margin: 22px 0 12px;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.home-copy {
  max-width: 68ch;
  margin-top: 8px;
}
.home-copy h2 { margin-top: 28px; }
.home-copy p,
.home-copy li {
  font-size: 16.5px;
  line-height: 1.6;
}
.home-copy p { margin: 0 0 12px; }
.home-copy ul { margin: 0 0 4px; padding-left: 1.2em; }
.home-copy li { margin: 0 0 8px; }
.home-copy a { color: var(--accent); font-weight: 600; }
.catalog-note {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 14px;
}
.catalog-note a { color: var(--accent); font-weight: 600; }

.hero {
  position: relative;
  overflow: hidden;
  margin: 6px 0 8px;
  padding: 28px 26px 24px;
  border-radius: 24px;
  color: #f4f7fb;
  background:
    radial-gradient(420px 220px at 100% -20%, rgba(90, 140, 255, 0.55), transparent 70%),
    linear-gradient(160deg, #1a2433 0%, #10161f 70%);
}
.hero h1 {
  color: #fff;
  max-width: 16ch;
  margin: 8px 0 12px;
}
.hero .lead {
  color: #c5d0dc;
  font-size: 17px;
  max-width: 46ch;
}
.hero .to-home {
  display: inline-flex;
  align-items: center;
  margin-top: 18px;
  height: 48px;
  padding: 0 18px;
  border-radius: var(--btn-radius);
  background: #fff;
  color: #1c2430;
  text-decoration: none;
  font-weight: 700;
}
.hero .to-home:hover { background: #e7eef8; }
.eyebrow {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #9eb0c6;
}
.hero-points {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}
.hero-points span {
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
}
.perks {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.perks li {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px 16px 14px;
  box-shadow: var(--shadow);
}
.perks strong { display: block; margin-bottom: 4px; font-size: 16px; }
.perks p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.45; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.chip {
  background: var(--card);
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: var(--pill);
  padding: 6px 10px;
  font-size: 13px;
}

.catalog {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.tile a {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  column-gap: 14px;
  row-gap: 2px;
  align-items: center;
  min-height: 96px;
  text-decoration: none;
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 6px solid var(--tile);
  border-radius: 16px;
  padding: 14px 16px;
  box-shadow: var(--shadow);
}
.tile a:hover { border-color: var(--tile); }
.tile .mono {
  grid-row: 1 / span 2;
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: var(--tile);
  color: var(--tile-ink);
  display: grid;
  place-items: center;
  font-size: 18px;
}
.tile strong { font-size: 18px; }
.tile em {
  grid-column: 2;
  color: var(--muted);
  font-style: normal;
  font-size: 14px;
}
.tile .go {
  grid-column: 3;
  grid-row: 1 / span 2;
  justify-self: end;
  background: #141a22;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  border-radius: 999px;
  padding: 8px 14px;
}
.tile a:hover .go {
  background: var(--tile);
  color: var(--tile-ink);
}

.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  padding-bottom: 28px;
}
.layout > * { min-width: 0; }
.card, .panel {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.card { padding: 18px; }
.panel { padding: 20px; }
body[data-brand="kent"] .card,
body[data-brand="kent"] .panel { border-top: 3px solid var(--gold); }
.panel h2 { margin-top: 0; }
.panel p { margin: 0 0 10px; }
.panel p:last-child { margin-bottom: 0; }
.related-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.related-list a { font-weight: 700; }
.related-list span {
  display: block;
  color: var(--muted);
  font-size: 14px;
  font-weight: 400;
}
@media (min-width: 700px) {
  .related-list { grid-template-columns: 1fr 1fr; }
}

.card-head { display: flex; gap: 14px; align-items: center; }
.app-icon {
  width: 72px;
  height: 72px;
  flex: none;
  border-radius: var(--icon-radius);
  background: var(--icon);
  color: var(--icon-ink);
  font-size: 22px;
  display: grid;
  place-items: center;
  letter-spacing: -0.04em;
}
.card-head h2 { margin: 0; font-size: 22px; font-weight: 600; }
.card-head p { margin: 2px 0 0; color: var(--muted); font-size: 14px; }
.rating {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0 4px;
  font-weight: 600;
}
.stars { color: var(--star); letter-spacing: 1px; }
.rating span { color: var(--muted); font-weight: 500; font-size: 13px; }

.download {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 14px;
  height: 54px;
  border-radius: var(--btn-radius);
  background: var(--btn);
  color: var(--btn-ink);
  text-decoration: none;
  font-weight: 700;
  font-size: 17px;
}
.download:hover { background: var(--btn-2); }
.download svg { flex: none; }
.track-note {
  margin: 8px 0 0;
  text-align: center;
  color: var(--muted);
  font-size: 12px;
}
.facts, .spec-list { margin: 16px 0 0; }
.facts div, .spec-list div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-top: 1px solid var(--line);
  font-size: 14px;
}
.facts dt, .spec-list dt { color: var(--muted); }
.facts dd, .spec-list dd { margin: 0; font-weight: 600; text-align: right; }
.spec-list { margin-top: 0; }
.spec-list div { font-size: 15px; }

.shots {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 168px;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.shots img {
  width: 168px;
  height: 300px;
  object-fit: cover;
  object-position: top;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--soft);
  display: block;
}
.phone {
  height: 260px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--soft);
  color: var(--muted);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.phone b {
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
  font-family: "Golos Text", sans-serif;
}
.bar, .line {
  border-radius: 10px;
  background: var(--card);
  border: 1px solid var(--line);
}
.bar { height: 8px; }
.bar.short { width: 58%; }
.line { height: 32px; }
.phone.live .line:first-of-type {
  background: var(--accent);
  border-color: var(--accent);
}

.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.steps li { display: grid; grid-template-columns: 32px 1fr; gap: 12px; align-items: start; }
.steps strong { display: block; }
.num {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--soft);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 14px;
}
body[data-brand="pinup"] .num,
body[data-brand="kent"] .num,
body[data-brand="win"] .num { border-radius: var(--pill); }

.note {
  margin-top: 8px;
  color: var(--muted);
  font-size: 15px;
}

footer {
  border-top: 1px solid var(--line);
  padding: 22px 0 40px;
  color: var(--muted);
  font-size: 13px;
}
footer p { margin: 0 0 8px; }
.foot-nav { display: flex; flex-wrap: wrap; gap: 10px 14px; margin-bottom: 12px; }
.foot-nav a { color: var(--ink); font-weight: 600; }
.legal-nav { display: flex; gap: 14px; margin: 0 0 12px; }
.legal-nav a { color: var(--muted); }
.shot-note { margin: 12px 0 0; color: var(--muted); font-size: 14px; }

@media (min-width: 800px) {
  .catalog { grid-template-columns: 1fr 1fr; }
  .perks { grid-template-columns: 1fr 1fr 1fr; }
}
@media (min-width: 880px) {
  .layout {
    grid-template-columns: 1fr 320px;
    column-gap: 28px;
    align-items: start;
  }
  .intro { grid-column: 1; }
  .card { grid-column: 2; grid-row: 1 / span 40; position: sticky; top: 18px; }
  .shots-wrap, .story, .related, .specs, .install { grid-column: 1; }
}
@media (max-width: 879px) {
  .intro { order: 1; }
  .card { order: 2; }
  .shots-wrap { order: 3; }
  .about { order: 4; }
  .related { order: 5; }
  .specs { order: 6; }
  .install { order: 7; }
  .spec-list div { display: grid; justify-content: stretch; }
  .spec-list dd { text-align: left; font-weight: 600; }
  .tile a { grid-template-columns: 52px 1fr; }
  .tile .go {
    grid-column: 2;
    grid-row: 3;
    justify-self: start;
    margin-top: 6px;
  }
}