/* Come — V10 Brand App Profile · CSS shell
 * Theme: dark-product-lobby accents on light-modular cards
 * Color: Color System 023 (Red Event Day) — coral-energy accent
 * Type: Typography 046 — Manrope + Noto Sans Devanagari
 * Layout: LAYOUT_037 (Mobile App Promo) — sticky CTA, modular cards
 */

/* ============= Tokens ============= */
:root{
  /* Brand */
  --brand: #B42318;
  --brand-2: #8C160E;
  --accent: #F97066;
  --accent-soft: #FBD9D5;
  --gold: #B7791F;
  --gold-soft: #FBE7BE;

  /* Surfaces — light modular cards */
  --bg: #F7F4F0;            /* warm off-white page field */
  --bg-2: #FFFFFF;
  --bg-3: #FBF8F4;
  --band: #F0E7DC;
  --ink: #1F1B16;            /* primary readable text */
  --ink-2: #46403A;
  --ink-3: #6E665D;           /* muted body */
  --line: #E4DACE;
  --line-2: #CFC2B0;

  /* Dark surfaces (game media / footer / sticky bar) */
  --d-ink: #0F0B09;
  --d-bg: #161210;
  --d-bg-2: #221C18;
  --d-bg-3: #2E2520;
  --d-line: rgba(255,255,255,0.08);
  --d-text: #F8F4EE;
  --d-muted: #B7ADA2;

  /* System */
  --success: #16A34A;
  --warn: #D97706;
  --danger: #DC2626;

  /* Type */
  --font-body: 'Manrope', 'Noto Sans Devanagari', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-hi: 'Manrope', 'Noto Sans Devanagari', sans-serif;

  /* Radius & shadow */
  --r-sm: 8px;
  --r: 14px;
  --r-lg: 22px;
  --r-xl: 28px;
  --shadow-1: 0 1px 2px rgba(15,11,9,0.06), 0 4px 12px rgba(15,11,9,0.04);
  --shadow-2: 0 2px 4px rgba(15,11,9,0.08), 0 16px 32px rgba(15,11,9,0.06);
  --shadow-3: 0 4px 8px rgba(15,11,9,0.10), 0 24px 48px rgba(15,11,9,0.10);

  /* Layout */
  --container: 1180px;
  --gutter: clamp(16px, 3.4vw, 28px);
  --header-h: 64px;

  /* Motion */
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ============= Reset ============= */
*,*::before,*::after{box-sizing:border-box}
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-behavior:smooth; overflow-x: clip }
body{
  margin:0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'kern' 1, 'liga' 1;
  overflow-x: clip;
  max-width: 100vw;
}
main, header, footer, section{ min-width: 0; max-width: 100%; }
.container, .wrap{ min-width: 0 }
img,svg,video{ max-width:100%; height:auto; display:block }
a{ color: var(--brand); text-decoration:none; transition: color .15s var(--ease) }
a:hover{ color: var(--brand-2) }
button{ font:inherit; color:inherit; cursor:pointer; border:0; background:none }
h1,h2,h3,h4,h5{ font-family: var(--font-hi); color: var(--ink); line-height: 1.18; margin: 0 0 .5em; letter-spacing: -0.01em }
h1{ font-size: clamp(32px, 4.6vw, 56px); font-weight: 800; letter-spacing: -0.022em }
h2{ font-size: clamp(26px, 3.2vw, 38px); font-weight: 800 }
h3{ font-size: clamp(20px, 2.2vw, 24px); font-weight: 700 }
h4{ font-size: 18px; font-weight: 700 }
p{ margin: 0 0 1em }
hr{ border:0; border-top:1px solid var(--line); margin: 24px 0 }
ul,ol{ margin:0 0 1em; padding-left: 22px }
li{ margin-bottom: 6px }

:focus-visible{ outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px }
::selection{ background: var(--brand); color: #fff }

/* Skip link */
.skip-link{ position:absolute; left:-1000px; top:0; background:var(--brand); color:#fff; padding:10px 16px; z-index:9999; border-radius:0 0 8px 0 }
.skip-link:focus{ left:0 }

/* ============= Layout helpers ============= */
.container{ max-width: var(--container); margin:0 auto; padding: 0 var(--gutter) }
.wrap{ width:100% }
.row{ display:flex; flex-wrap:wrap; gap: 16px }
.row.between{ justify-content: space-between }
.row.center{ align-items:center; justify-content:center }
.row.middle{ align-items:center }

main{ padding-bottom: 80px }
section{ padding: clamp(28px, 5vw, 56px) 0 }
section.tight{ padding: clamp(18px, 3vw, 32px) 0 }

/* Eyebrow / kicker */
.eyebrow{ display:inline-flex; align-items:center; gap:8px; padding: 5px 12px; border-radius: 999px; background: var(--accent-soft); color: var(--brand-2); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase }
.eyebrow.dark{ background: rgba(180,35,24,.22); color: #FBD9D5 }
.eyebrow.dark.on-light{ background: rgba(180,35,24,.18); color: #8C160E }
.eyebrow.solid{ background: var(--brand); color: #fff }

/* Cards / modules */
.card{ background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px; box-shadow: var(--shadow-1) }
.card.flat{ box-shadow:none }
.card.dark{ background: var(--d-bg-2); border-color: var(--d-line); color: var(--d-text) }
.card.glass{ background: rgba(255,255,255,0.72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.5) }
.card.tone-band{ background: var(--band); border-color: var(--line-2) }
.card.outline{ background: transparent; border: 1.5px dashed var(--line-2) }

/* Buttons */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; padding: 13px 22px; border-radius: 12px; font-weight: 700; font-size: 15px; letter-spacing: .005em; white-space: nowrap; transition: transform .12s var(--ease), background .15s var(--ease), box-shadow .15s var(--ease), color .15s var(--ease); border: 1px solid transparent; min-height: 46px; cursor: pointer; line-height: 1 }
.btn:hover{ transform: translateY(-1px) }
.btn:active{ transform: translateY(0) }
.btn.primary{ background: var(--brand); color: #fff; box-shadow: 0 8px 24px rgba(180,35,24,.32) }
.btn.primary:hover{ background: var(--brand-2); color: #fff; box-shadow: 0 10px 28px rgba(180,35,24,.40) }
.btn.secondary{ background: var(--bg-2); color: var(--ink); border-color: var(--line-2) }
.btn.secondary:hover{ background: var(--bg-3); color: var(--ink) }
.btn.ghost{ background: transparent; color: var(--brand); border-color: var(--line-2) }
.btn.ghost:hover{ background: var(--accent-soft); color: var(--brand-2) }
.btn.dark{ background: var(--d-bg-3); color: var(--d-text); border-color: var(--d-line) }
.btn.dark:hover{ background: #3a302a }
.btn.sm{ padding: 9px 14px; min-height: 36px; font-size: 13px; border-radius: 10px }
.btn.lg{ padding: 16px 26px; min-height: 54px; font-size: 17px; border-radius: 14px }
.btn.block{ width:100% }
.btn .arrow{ transition: transform .15s var(--ease) }
.btn:hover .arrow{ transform: translateX(3px) }

/* Form / input */
.input, .select{ width:100%; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--bg-2); color: var(--ink); font: inherit; min-height: 46px }
.input:focus, .select:focus{ outline:none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(180,35,24,.18) }

/* Pill / tag */
.pill{ display:inline-flex; align-items:center; gap:6px; padding: 4px 10px; border-radius:999px; font-size: 12px; font-weight:700; background: var(--bg-3); color: var(--ink-2); border: 1px solid var(--line); white-space: nowrap }
.pill.brand{ background: var(--accent-soft); color: var(--brand-2); border-color: rgba(180,35,24,.18) }
.pill.dark{ background: rgba(255,255,255,0.08); color: var(--d-text); border-color: rgba(255,255,255,0.12) }
.pill.warn{ background: #FEF3C7; color: #92400E; border-color: #FCD34D }
.pill.good{ background: #DCFCE7; color: #166534; border-color: #BBF7D0 }

/* Grids */
.grid{ display:grid; gap: 16px }
.grid.cols-2{ grid-template-columns: repeat(2, minmax(0,1fr)) }
.grid.cols-3{ grid-template-columns: repeat(3, minmax(0,1fr)) }
.grid.cols-4{ grid-template-columns: repeat(4, minmax(0,1fr)) }
@media (max-width: 980px){
  .grid.cols-3, .grid.cols-4{ grid-template-columns: repeat(2, minmax(0,1fr)) }
}
@media (max-width: 600px){
  .grid.cols-2, .grid.cols-3, .grid.cols-4{ grid-template-columns: 1fr }
}

/* ============= Header ============= */
.site-header{
  position: sticky; top: 0; z-index: 250;
  background: rgba(247,244,240,0.92);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
body.lock-scroll .site-header{ z-index: 50 }
body.lock-scroll .sticky-cta{ z-index: 50 }
.site-header .header-inner{ display:flex; align-items:center; gap: 18px; height: var(--header-h) }
.brand{ display:inline-flex; align-items:center; gap:10px; color: var(--ink); text-decoration:none }
.brand img{ width:38px; height:38px; border-radius:10px }
.brand .word{ font-family: var(--font-hi); font-weight: 800; font-size: 20px; letter-spacing: -0.01em }
.brand .word small{ display:block; font-size: 10px; font-weight: 600; letter-spacing: .14em; color: var(--ink-3); text-transform: uppercase; margin-top:-4px }

.main-nav{ display:flex; align-items:center; gap: 6px; flex: 1; justify-content: center }
.main-nav a{ padding: 10px 14px; color: var(--ink-2); font-weight: 600; font-size: 14.5px; border-radius: 10px }
.main-nav a:hover{ background: var(--bg-3); color: var(--ink) }
.main-nav a.active{ background: var(--accent-soft); color: var(--brand-2) }

.header-right{ display:flex; align-items:center; gap: 10px }
.header-cta{ padding: 9px 16px; min-height: 38px; font-size: 13.5px }
.hamburger{ display:none; width:42px; height:42px; align-items:center; justify-content:center; border-radius:10px; background: var(--bg-2); border:1px solid var(--line); color: var(--ink); position: relative; z-index: 280 }
.hamburger span{ width: 18px; height: 2px; background: var(--ink); display:block; position:relative; transition: transform .2s var(--ease), opacity .2s var(--ease) }
.hamburger span::before, .hamburger span::after{ content:""; position:absolute; left:0; right:0; height:2px; background: var(--ink); transition: transform .2s var(--ease) }
.hamburger span::before{ top:-6px }
.hamburger span::after{ top:6px }
.hamburger[aria-expanded="true"] span{ background: transparent }
.hamburger[aria-expanded="true"] span::before{ transform: translateY(6px) rotate(45deg) }
.hamburger[aria-expanded="true"] span::after{ transform: translateY(-6px) rotate(-45deg) }

@media (max-width: 960px){
  .main-nav{ display:none }
  .hamburger{ display:inline-flex }
}

/* Mobile drawer */
.mobile-drawer{ position: fixed; inset: 0; z-index: 200; pointer-events: none; overflow: hidden }
.mobile-drawer .scrim{ position:absolute; inset:0; background: rgba(15,11,9,.50); opacity: 0; transition: opacity .25s var(--ease); visibility: hidden }
.mobile-drawer .panel{
  position:absolute; top:0; right:0; bottom:0; width: min(360px, 92vw);
  background: var(--bg-2); transform: translateX(100%); transition: transform .3s var(--ease), visibility 0s linear .3s;
  display:flex; flex-direction: column; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 84px 24px 32px;
  visibility: hidden;
}
.mobile-drawer.open{ pointer-events: auto }
.mobile-drawer.open .scrim{ opacity:1; visibility: visible; transition: opacity .25s var(--ease), visibility 0s linear 0s }
.mobile-drawer.open .panel{ transform: translateX(0); visibility: visible; transition: transform .3s var(--ease), visibility 0s linear 0s }
.mobile-drawer nav a{ display:block; padding: 14px 0; font-size: 17px; font-weight: 600; color: var(--ink); border-bottom: 1px solid var(--line) }
.mobile-drawer nav a:hover{ color: var(--brand) }
.mobile-drawer .panel-cta{ margin-top: 24px; display: grid; gap: 10px }
.mobile-drawer .close-btn{ position:absolute; top: 14px; right: 14px; width: 44px; height: 44px; border-radius: 12px; background: var(--bg-3); border: 1px solid var(--line); display:inline-flex; align-items:center; justify-content:center; font-size: 22px; color: var(--ink); z-index: 5; cursor: pointer }
.mobile-drawer.open .close-btn{ z-index: 260 }
body.lock-scroll{ overflow: hidden }
@media (max-width: 480px){
  .mobile-drawer .panel{ padding: 76px 20px 24px }
  .mobile-drawer nav a{ padding: 12px 0; font-size: 16px }
  .mobile-drawer .panel-cta{ margin-top: 18px }
}

/* ============= Brand app profile (homepage hero block) ============= */
.brand-app-profile{
  background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 100%);
  border-bottom: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
.brand-app-profile::before{
  content:""; position:absolute; top:-80px; right:-80px; width: 360px; height: 360px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(249,112,102,0.28), transparent 70%);
  filter: blur(2px);
  pointer-events: none;
}
.profile-grid{
  display:grid; grid-template-columns: minmax(0,320px) minmax(0,1fr); gap: 36px;
  padding: clamp(28px, 5vw, 56px) 0;
  align-items: center;
  position: relative; z-index: 1;
  min-width: 0;
}
.profile-grid > *{ min-width: 0 }
@media (max-width: 880px){
  .profile-grid{ grid-template-columns: minmax(0,1fr); gap: 22px }
}

.app-icon-card{
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 24px;
  text-align: center;
  box-shadow: var(--shadow-2);
}
.app-icon-card img{ width: 132px; height: 132px; margin: 0 auto 16px; border-radius: 28px; box-shadow: var(--shadow-2) }
.app-icon-card .dev-row{ display:flex; align-items:center; justify-content:space-between; font-size: 13px; color: var(--ink-3); margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line) }
.app-icon-card .dev-row strong{ color: var(--ink) }

.profile-meta .eyebrow{ margin-bottom: 14px }
.profile-meta h1{ margin: 0 0 14px; color: var(--ink) }
.profile-meta .lede{ font-size: clamp(16px, 1.6vw, 19px); color: var(--ink-2); margin: 0 0 22px; max-width: 60ch; line-height: 1.55 }

.facts-strip{
  display:grid; grid-template-columns: repeat(5, minmax(0,1fr));
  gap: 10px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 12px;
  margin: 22px 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.facts-strip::-webkit-scrollbar{ display: none }
.fact-cell{
  background: var(--bg-3);
  border-radius: var(--r);
  padding: 12px 14px;
  min-width: 132px;
}
.fact-cell .k{ display:block; font-size: 11px; font-weight: 700; color: var(--ink-3); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 6px }
.fact-cell .v{ font-size: 16px; font-weight: 800; color: var(--ink); display: flex; align-items: center; gap: 6px }
.fact-cell .v small{ font-size: 12px; color: var(--ink-3); font-weight: 600 }
@media (max-width: 880px){
  .facts-strip{ grid-template-columns: repeat(5, minmax(132px,1fr)); grid-auto-flow: column }
}

.cta-pair{ display:flex; gap: 10px; flex-wrap: wrap }
.cta-pair .btn{ min-width: 180px }
.cta-trust{ display:flex; gap: 16px; margin-top: 14px; color: var(--ink-3); font-size: 13px; flex-wrap: wrap }
.cta-trust span{ display:inline-flex; align-items:center; gap:6px }
.cta-trust .dot{ width:6px; height:6px; border-radius:50%; background: var(--success); display:inline-block }

/* Gallery rail */
.gallery-rail{
  display:grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
}
.gallery-rail .shot{
  border-radius: var(--r-lg); overflow:hidden; aspect-ratio: 16/10;
  background: var(--bg-3); border: 1px solid var(--line); display:flex; align-items:center; justify-content:center; position: relative;
}
.gallery-rail .shot img{ width:100%; height:100%; object-fit: cover }
.gallery-rail .shot .caption{
  position:absolute; left:10px; bottom:10px; padding: 4px 10px; border-radius: 8px; background: rgba(15,11,9,.55); color: #fff; font-size: 12px; font-weight: 600;
}
@media (max-width: 720px){
  .gallery-rail{ grid-template-columns: 1fr }
}

/* ============= HOT shelf (compact 4-col) ============= */
.hot-shelf{
  display:grid; grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 12px;
  margin-top: 18px;
  min-width: 0;
}
.hot-card{
  display:flex; align-items:center; gap: 12px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 12px 14px;
  text-decoration:none; color: var(--ink);
  transition: transform .15s var(--ease), box-shadow .15s var(--ease), border-color .15s var(--ease);
  min-height: 84px;
  min-width: 0;
  overflow: hidden;
}
.hot-card:hover{ transform: translateY(-2px); box-shadow: var(--shadow-2); border-color: rgba(180,35,24,.30); color: var(--ink) }
.hot-card .art{
  width: 60px; height: 60px; flex: 0 0 60px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--accent-soft), #fff);
  display:flex; align-items:center; justify-content:center;
  border: 1px solid var(--line);
  overflow:hidden;
}
.hot-card .art img{ width:100%; height:100%; object-fit: cover }
.hot-card[data-hot-category="sports"] .art{ background: linear-gradient(135deg, #d3f8e2, #fff) }
.hot-card .cat{ font-size: 10px; font-weight: 800; color: var(--brand-2); letter-spacing: .12em; text-transform: uppercase }
.hot-card .name{ font-size: 14.5px; font-weight: 700; color: var(--ink); line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.hot-card .hint{ font-size: 12px; color: var(--ink-3); line-height: 1.3; margin-top: 2px; overflow: hidden; text-overflow: ellipsis }
@media (max-width: 980px){
  .hot-shelf{ grid-template-columns: repeat(4, minmax(160px, 1fr)); overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; -webkit-overflow-scrolling: touch; max-width: 100% }
  .hot-shelf::-webkit-scrollbar{ height: 4px }
  .hot-shelf::-webkit-scrollbar-thumb{ background: var(--line-2); border-radius: 4px }
}
@media (max-width: 480px){
  .hot-shelf{ grid-template-columns: repeat(4, minmax(140px,1fr)); gap: 10px }
  .hot-card{ min-height: 76px; padding: 10px }
  .hot-card .art{ width: 50px; height: 50px; flex: 0 0 50px }
}

/* ============= YONO collection ============= */
.yono-list{ display:grid; gap: 10px }
.yono-row{
  display:grid; grid-template-columns: 56px 1fr auto; gap: 14px; align-items: center;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 12px 14px;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.yono-row:hover{ border-color: rgba(180,35,24,.3); box-shadow: var(--shadow-1) }
.yono-row .logo{ width: 56px; height: 56px; border-radius: 14px; background: var(--bg-3); border: 1px solid var(--line); display:flex; align-items:center; justify-content:center; overflow:hidden }
.yono-row .logo img{ width:100%; height:100%; object-fit: cover }
.yono-row .meta .name{ font-size: 15px; font-weight: 700; color: var(--ink); margin: 0 }
.yono-row .meta .cat{ font-size: 12px; color: var(--ink-3); margin-top: 2px }
.yono-row .meta .src{ font-size: 11px; color: var(--ink-3); margin-top: 4px; display: flex; align-items: center; gap: 6px }
.yono-row .actions{ display: flex; align-items: center; gap: 8px }
.yono-row .actions .btn{ padding: 8px 14px; min-height: 36px; font-size: 13px }
@media (max-width: 600px){
  .yono-row{ grid-template-columns: 48px 1fr; row-gap: 10px; padding: 12px }
  .yono-row .logo{ width: 48px; height: 48px }
  .yono-row .actions{ grid-column: 1 / -1; justify-content: stretch }
  .yono-row .actions .btn{ flex: 1 }
}

/* ============= App directory rows ============= */
.app-toolbar{ display:flex; flex-wrap: wrap; gap: 12px; align-items:center; margin-bottom: 16px }
.app-toolbar .search{ flex: 1; min-width: 220px; position: relative }
.app-toolbar .search input{ padding-left: 42px }
.app-toolbar .search svg{ position:absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--ink-3) }

.tabs{ display:flex; gap: 6px; flex-wrap: wrap }
.tabs button{ padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--bg-2); color: var(--ink-2); font-size: 13px; font-weight: 700 }
.tabs button:hover{ background: var(--bg-3) }
.tabs button[aria-pressed="true"]{ background: var(--brand); color: #fff; border-color: var(--brand) }

.result-meta{ display:flex; align-items:center; justify-content: space-between; margin-bottom: 12px; color: var(--ink-3); font-size: 13px }

.app-row{
  display:grid; grid-template-columns: 80px 1fr auto; gap: 14px; align-items: center;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 12px 16px;
  transition: border-color .15s var(--ease);
}
.app-row:hover{ border-color: rgba(180,35,24,.3) }
.app-row .thumb{ width: 80px; height: 80px; border-radius: 16px; background: var(--bg-3); border: 1px solid var(--line); overflow:hidden; display:flex; align-items:center; justify-content:center }
.app-row .thumb img{ width:100%; height:100%; object-fit: cover }
.app-row .rank{ font-size: 12px; color: var(--ink-3); font-weight: 700; letter-spacing: .04em; margin-bottom: 4px }
.app-row .name{ font-size: 15.5px; font-weight: 700; color: var(--ink); margin: 0; line-height: 1.2 }
.app-row .facts{ font-size: 12.5px; color: var(--ink-3); margin-top: 4px; display:flex; gap: 8px; flex-wrap: wrap }
.app-row .facts span{ display: inline-flex; align-items: center; gap: 4px }
.app-row .facts .sep{ color: var(--line-2) }
.app-row .actions{ display:flex; align-items:center; gap: 8px }
@media (max-width: 600px){
  .app-row{ grid-template-columns: 60px 1fr; row-gap: 10px }
  .app-row .thumb{ width: 60px; height: 60px }
  .app-row .actions{ grid-column: 1 / -1 }
  .app-row .actions .btn{ flex: 1 }
}

/* ============= Promo / commercial blocks ============= */
.promo-grid{ display:grid; gap: 14px; grid-template-columns: repeat(3, minmax(0,1fr)) }
@media (max-width: 880px){ .promo-grid{ grid-template-columns: 1fr } }
.promo-card{ background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px; display:flex; flex-direction:column; gap: 10px }
.promo-card .ribbon{ display:inline-flex; align-self:flex-start; padding: 4px 10px; border-radius:999px; background: var(--accent-soft); color: var(--brand-2); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase }
.promo-card h3{ margin: 0 }
.promo-card p{ color: var(--ink-2); margin: 0 }
.promo-card ul{ padding-left: 18px; margin: 0 }
.promo-card .btn{ margin-top: auto; align-self: flex-start }

/* ============= Feature panels ============= */
.feature-grid{ display:grid; gap: 16px; grid-template-columns: repeat(3, minmax(0,1fr)) }
@media (max-width: 880px){ .feature-grid{ grid-template-columns: 1fr } }
.feature-card{ background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px }
.feature-card .ico{
  width: 44px; height: 44px; border-radius: 12px; background: var(--accent-soft); color: var(--brand-2);
  display: inline-flex; align-items: center; justify-content: center; margin-bottom: 12px; font-size: 20px; font-weight: 800;
}
.feature-card .ico.dark{ background: rgba(255,255,255,.08); color: var(--accent) }
.feature-card h4{ margin: 0 0 8px }
.feature-card p{ margin: 0; color: var(--ink-2); font-size: 15px }

/* Dark feature strip */
.feature-band{
  background: var(--d-bg);
  background-image: radial-gradient(circle at 80% 0%, rgba(249,112,102,0.16), transparent 50%);
  color: var(--d-text);
  border-radius: var(--r-xl);
  padding: clamp(28px, 4vw, 44px);
}
.feature-band h2, .feature-band h3, .feature-band h4{ color: #fff }
.feature-band .feature-grid .feature-card{ background: var(--d-bg-2); border-color: var(--d-line); color: var(--d-text) }
.feature-band .feature-card p{ color: var(--d-muted) }
.feature-band .feature-card .ico{ background: rgba(249,112,102,.14); color: var(--accent) }

/* ============= FAQ ============= */
.faq-tabs{ display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 18px }
.faq-tabs button{ padding: 8px 14px; border-radius: 999px; background: var(--bg-2); border: 1px solid var(--line-2); color: var(--ink-2); font-size: 13px; font-weight: 700 }
.faq-tabs button[aria-pressed="true"]{ background: var(--ink); color: #fff; border-color: var(--ink) }
.faq-panel{ display:none }
.faq-panel.active{ display: block }
.faq-panel details{ background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r); margin-bottom: 10px; padding: 0; overflow:hidden }
.faq-panel summary{ padding: 16px 20px; font-weight: 700; cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--ink) }
.faq-panel summary::-webkit-details-marker{ display: none }
.faq-panel summary::after{ content:"+"; font-size: 20px; color: var(--brand); font-weight: 800 }
.faq-panel details[open] summary::after{ content:"−" }
.faq-panel summary:hover{ background: var(--bg-3) }
.faq-panel .answer{ padding: 0 20px 18px; color: var(--ink-2); line-height: 1.6 }

/* ============= News cards ============= */
.news-grid{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px }
@media (max-width: 880px){ .news-grid{ grid-template-columns: 1fr } }
.news-card{ background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-lg); overflow:hidden; display:flex; flex-direction:column }
.news-card .media{ aspect-ratio: 16/9; background: var(--bg-3); overflow:hidden; position: relative }
.news-card .media img{ width:100%; height:100%; object-fit: cover }
.news-card .body{ padding: 18px 20px; display:flex; flex-direction:column; gap: 8px; flex: 1 }
.news-card .meta{ display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-3); font-weight: 600; letter-spacing: .04em; text-transform: uppercase }
.news-card h3{ font-size: 18px; line-height: 1.25; margin: 0 }
.news-card p{ color: var(--ink-2); font-size: 14.5px; margin: 0 }
.news-card .read{ margin-top: auto; display:inline-flex; align-items:center; gap:6px; color: var(--brand); font-weight: 700; font-size: 13.5px }

/* ============= Step / install ============= */
.steps{ display:grid; gap: 14px; grid-template-columns: repeat(4, minmax(0,1fr)); counter-reset: step }
@media (max-width: 980px){ .steps{ grid-template-columns: repeat(2, minmax(0,1fr)) } }
@media (max-width: 540px){ .steps{ grid-template-columns: 1fr } }
.step{ background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px; position: relative }
.step .num{
  counter-increment: step;
  width: 32px; height: 32px; border-radius: 999px; background: var(--brand); color: #fff;
  display:inline-flex; align-items:center; justify-content:center; font-weight: 800; font-size: 14px;
  margin-bottom: 10px;
}
.step .num::before{ content: counter(step) }
.step h3, .step h4{ margin: 0 0 6px; font-size: 18px; font-weight: 700 }
.step p{ margin: 0; color: var(--ink-2); font-size: 14.5px }

/* ============= VIP table ============= */
.vip-table-wrap{ background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-lg); overflow:hidden }
.vip-table{ width:100%; border-collapse: collapse; min-width: 720px }
.vip-table thead th{ background: var(--bg-3); text-align: left; padding: 12px 16px; font-size: 12px; font-weight: 800; color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; border-bottom: 1px solid var(--line) }
.vip-table td{ padding: 12px 16px; font-size: 14px; color: var(--ink-2); border-bottom: 1px solid var(--line); vertical-align: middle }
.vip-table tr:last-child td{ border-bottom: 0 }
.vip-table tr:hover td{ background: var(--bg-3) }
.vip-table .lvl{ font-weight: 800; color: var(--brand); font-size: 14.5px }
.vip-table .scroll-x{ overflow-x:auto; -webkit-overflow-scrolling: touch }

/* ============= Sticky mobile CTA ============= */
.sticky-cta{
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 220;
  background: rgba(247,244,240,0.96);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
  padding: 10px var(--gutter);
  transform: translateY(120%); transition: transform .25s var(--ease);
  display: none;
}
.sticky-cta.show{ transform: translateY(0) }
.sticky-cta .row{ display:flex; align-items: center; gap: 10px; max-width: var(--container); margin: 0 auto }
.sticky-cta .row .label{ font-size: 12px; color: var(--ink-3); font-weight: 700; letter-spacing: .04em; text-transform: uppercase }
.sticky-cta .row .btn{ flex: 1; min-width: 0; max-width: 320px; margin-left: auto }
@media (max-width: 720px){
  .sticky-cta{ display: block }
  body{ padding-bottom: 76px }
}

/* ============= Footer ============= */
.site-footer{ background: var(--d-bg); color: var(--d-text); padding: 56px 0 24px; margin-top: 0 }
.site-footer .grid{ display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; gap: 28px }
@media (max-width: 880px){ .site-footer .grid{ grid-template-columns: 1fr 1fr } }
@media (max-width: 540px){ .site-footer .grid{ grid-template-columns: 1fr } }
.site-footer h3, .site-footer h5{ color: #fff; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 14px }
.site-footer ul{ list-style: none; padding: 0; margin: 0 }
.site-footer li{ margin: 0 0 8px }
.site-footer a{ color: var(--d-muted); font-size: 14px; font-weight: 500 }
.site-footer a:hover{ color: var(--accent) }
.site-footer .brand-block img{ width: 56px; height: 56px; border-radius: 14px; margin-bottom: 12px }
.site-footer .brand-block p{ color: var(--d-muted); font-size: 14px; max-width: 32ch }
.site-footer .social{ display: flex; gap: 8px; margin-top: 14px }
.site-footer .social a{ width: 38px; height: 38px; border-radius: 10px; background: var(--d-bg-3); display:inline-flex; align-items:center; justify-content:center; color: var(--d-text); border: 1px solid var(--d-line) }
.site-footer .social a:hover{ background: var(--accent); color: #fff; border-color: var(--accent) }
.site-footer .legal-row{ border-top: 1px solid var(--d-line); margin-top: 32px; padding-top: 20px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; color: var(--d-muted); font-size: 13px }
.site-footer .legal-row .links{ display: flex; gap: 14px; flex-wrap: wrap }
.site-footer .disclosure{ background: var(--d-bg-2); border: 1px solid var(--d-line); border-radius: var(--r); padding: 14px 16px; margin-top: 22px; color: var(--d-muted); font-size: 13px; line-height: 1.55 }
.cookie-btn{ background: var(--d-bg-3); color: var(--d-text); border: 1px solid var(--d-line); padding: 8px 14px; border-radius: 999px; font-size: 12px; font-weight: 700 }
.cookie-btn:hover{ background: var(--accent); color: #fff; border-color: var(--accent) }

/* ============= Misc helpers ============= */
.section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap: 18px; margin-bottom: 22px; flex-wrap: wrap }
.section-head .text{ max-width: 56ch }
.section-head h2{ margin: 6px 0 6px }
.section-head p{ margin: 0; color: var(--ink-2) }

.callout{ background: var(--bg-3); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px }
.callout.dark{ background: var(--d-bg-2); color: var(--d-text); border-color: var(--d-line) }
.callout.brand{ background: var(--accent-soft); border-color: rgba(180,35,24,.20); color: var(--ink) }
.callout h3{ margin: 0 0 6px }
.callout p{ margin: 0; color: inherit }

.two-col{ display:grid; grid-template-columns: 1.1fr .9fr; gap: 28px; align-items: center }
@media (max-width: 880px){ .two-col{ grid-template-columns: 1fr } }

.split-3{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 18px }
@media (max-width: 880px){ .split-3{ grid-template-columns: 1fr } }

.compare-table{ width:100%; border-collapse: collapse; background: var(--bg-2); border-radius: var(--r); overflow:hidden; border: 1px solid var(--line); font-size: 14.5px; table-layout: fixed; word-break: break-word }
.callout{ overflow-x: auto; max-width: 100%; min-width: 0 }
.compare-table th, .compare-table td{ padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--line) }
.compare-table th{ background: var(--bg-3); color: var(--ink-3); font-size: 12px; text-transform: uppercase; letter-spacing: .06em }
.compare-table tr:last-child td{ border-bottom: 0 }

.tag-row{ display:flex; flex-wrap: wrap; gap: 6px }

/* Trust strip */
.trust-strip{
  display:grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 16px 18px;
}
@media (max-width: 880px){ .trust-strip{ grid-template-columns: repeat(2,1fr) } }
.trust-item{ display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--ink-2); font-weight: 600 }
.trust-item .dot{ width: 10px; height: 10px; border-radius: 50%; background: var(--success); flex: 0 0 10px }
.trust-item .ico{ width: 32px; height: 32px; border-radius: 8px; background: var(--accent-soft); color: var(--brand-2); display:inline-flex; align-items:center; justify-content:center; flex: 0 0 32px }

/* Editorial visuals */
.inline-visual{
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow:hidden; margin: 18px 0;
}
.inline-visual img{ width:100%; height: auto; display:block; aspect-ratio: 16/9; object-fit: cover }
.inline-visual .cap{ padding: 10px 14px; font-size: 13px; color: var(--ink-3); border-top: 1px solid var(--line); background: var(--bg-3) }

/* Sub page hero (smaller) */
.sub-hero{
  background: linear-gradient(180deg, var(--bg-2), var(--bg));
  border-bottom: 1px solid var(--line);
  padding: clamp(28px, 5vw, 48px) 0 clamp(24px, 4vw, 36px);
}
.sub-hero .crumbs{ font-size: 13px; color: var(--ink-3); margin-bottom: 14px }
.sub-hero .crumbs a{ color: var(--ink-2) }
.sub-hero h1{ margin: 0 0 12px }
.sub-hero .lede{ font-size: clamp(15px, 1.4vw, 18px); color: var(--ink-2); max-width: 64ch }

/* Prose styles */
.prose{ max-width: 70ch }
.prose h2{ margin-top: 28px; font-size: clamp(22px, 2.4vw, 28px) }
.prose h3{ margin-top: 22px; font-size: 19px }
.prose p{ font-size: 16px; line-height: 1.7 }
.prose a{ text-decoration: underline; text-underline-offset: 2px }
/* Links inside body paragraphs / callouts / list items must be distinguishable by more than color (WCAG 1.4.1) */
main p a, main li a, main .callout a, main .disclosure a{ text-decoration: underline; text-underline-offset: 2px }
main p a:hover, main li a:hover, main .callout a:hover, main .disclosure a:hover{ text-decoration: underline }

/* Disclosure ribbon */
.disclosure-ribbon{
  background: var(--bg-3); border: 1px solid var(--line); border-radius: 12px;
  padding: 10px 14px; font-size: 12.5px; color: var(--ink-3); margin-bottom: 14px;
  display: flex; align-items: center; gap: 8px;
}
.disclosure-ribbon svg{ flex: 0 0 16px; color: var(--brand) }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; scroll-behavior: auto !important }
}

/* Print-friendly */
@media print{
  .site-header, .sticky-cta, .site-footer, .hamburger{ display: none }
  body{ background: #fff; color: #000 }
}