/* ===========================
   crickex.in.net — premium guide theme
   =========================== */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');

:root {
  --brand-dark: #0b0c0b;
  --brand-blue: #687f8c;
  --brand-blue-hover: #7f97a3;
  --brand-gold: #c7794a;
  --brand-green: #7e8f63;
  --brand-green-strong: #9eaa78;
  --brand-cyan: #9aa5a0;
  --brand-red: #b85e4b;
  --text-main: #f4efe5;
  --text-muted: #aaa69c;
  --text-dark: #17110d;
  --surface-1: rgba(15, 16, 15, 0.92);
  --surface-2: rgba(22, 23, 21, 0.96);
  --surface-3: rgba(36, 37, 33, 0.96);
  --surface-solid: #161715;
  --border: rgba(244, 239, 229, 0.12);
  --border-strong: rgba(199,121,74,0.38);
  --radius: 8px;
  --radius-lg: 8px;
  --shadow: 0 22px 70px rgba(0,0,0,0.42);
  --max-w: 1280px;
  --font: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --display: 'Archivo', system-ui, -apple-system, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  min-height: 100vh;
  font-family: var(--font);
  background:
    linear-gradient(90deg, rgba(244,239,229,0.022) 1px, transparent 1px),
    linear-gradient(180deg, #0b0c0b 0%, #131411 48%, #0c0d0c 100%);
  background-size: 84px 100%, auto;
  color: var(--text-main);
  line-height: 1.65;
  font-size: 16px;
}

body::before {
  display: none;
}

a { color: #d7b08a; text-decoration: none; }
a:hover { color: #f0c79c; text-decoration: none; }

img { max-width: 100%; height: auto; display: block; }

/* ---- HEADER ---- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: 80px;
  background: rgba(11, 12, 11, 0.9);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 10px 34px rgba(0,0,0,0.25);
  backdrop-filter: blur(18px);
}

.header-inner {
  max-width: var(--max-w);
  height: 100%;
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.logo {
  color: #fff;
  font-family: var(--display);
  font-size: 1.48rem;
  font-weight: 800;
  letter-spacing: 0;
  white-space: nowrap;
}

.logo span { color: #c7794a; }

nav {
  display: flex;
  gap: 24px;
  align-items: center;
  flex-wrap: wrap;
}

nav a {
  color: var(--text-muted);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 8px 0;
  border-bottom: 2px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}

nav a:hover,
nav a.active {
  color: #f4efe5;
  border-color: #c7794a;
}

/* ---- HERO ---- */
.hero {
  position: relative;
  overflow: hidden;
  min-height: 660px;
  padding: 96px 40px 70px;
  border-bottom: 1px solid var(--border);
  background:
    radial-gradient(circle at 18% 30%, rgba(199,121,74,0.14), transparent 23rem),
    radial-gradient(circle at 78% 18%, rgba(104,127,140,0.15), transparent 25rem),
    linear-gradient(135deg, #10110f 0%, #0b0c0b 46%, #171713 100%);
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(244,239,229,0.05) 1px, transparent 1px),
    linear-gradient(to top, var(--brand-dark), transparent 56%);
  background-size: 92px 100%, auto;
}

.hero::after {
  content: "";
  position: absolute;
  right: min(8vw, 120px);
  top: 112px;
  width: min(34vw, 480px);
  height: min(34vw, 480px);
  border: 1px solid rgba(244,239,229,0.09);
  transform: rotate(-8deg);
  pointer-events: none;
}

.hero-grid {
  position: relative;
  z-index: 1;
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(420px, 0.64fr);
  gap: clamp(36px, 6vw, 88px);
  align-items: end;
}

.hero-copy { padding-bottom: 12px; }

.hero-label {
  display: inline-flex;
  margin-bottom: 22px;
  color: #c7d0cb;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hero h1 {
  max-width: 840px;
  font-family: var(--display);
  font-size: clamp(3rem, 5.3vw, 5.6rem);
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.015em;
  margin: 0 0 28px;
  color: #fff;
}

.hero h1 em {
  color: #d7b08a;
  font-style: normal;
}

.hero p {
  max-width: 620px;
  color: var(--text-muted);
  font-size: clamp(1rem, 1.7vw, 1.18rem);
  line-height: 1.62;
  margin: 0 0 30px;
}

.hero p strong { color: #fff; }

.section-visual {
  overflow: hidden;
  margin-top: 22px;
  margin-bottom: 22px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--surface-2);
  box-shadow: var(--shadow);
}

.section-visual img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  filter: grayscale(0.28) saturate(0.72) brightness(0.82);
}

.cta-group {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
}

.btn-primary,
.btn-secondary,
.btn-gold {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 24px;
  border-radius: var(--radius);
  font-weight: 800;
  font-size: 0.94rem;
  line-height: 1.2;
  border: 1px solid transparent;
  transition: transform 0.18s, background 0.18s, border-color 0.18s, box-shadow 0.18s;
}

.btn-primary,
.btn-gold {
  background: #c7794a;
  color: var(--text-dark);
  box-shadow: 0 12px 24px rgba(199,121,74,0.18);
}

.btn-primary:hover,
.btn-gold:hover {
  color: var(--text-dark);
  background: #d88d58;
  transform: translateY(-2px);
  box-shadow: 0 16px 30px rgba(199,121,74,0.22);
}

.btn-secondary {
  color: var(--text-main);
  background: rgba(31,32,29,0.76);
  border-color: rgba(255,255,255,0.18);
  backdrop-filter: blur(10px);
}

.btn-secondary:hover {
  color: #fff;
  background: rgba(255,255,255,0.08);
  border-color: var(--border-strong);
}

/* ---- MAIN CONTENT ---- */
.container {
  position: relative;
  z-index: 1;
  max-width: none;
  margin: 0 auto;
  padding: 0;
  background: #ede7dc;
  color: #1d1c19;
}

.container > section {
  max-width: 1180px;
  margin: 0 auto;
  padding: 76px 40px 0;
}

.container > section:last-child {
  padding-bottom: 80px;
}

.container > * + * { margin-top: 0; }

section {
  scroll-margin-top: 100px;
}

h2 {
  position: relative;
  font-family: var(--display);
  font-size: clamp(1.55rem, 3vw, 2.15rem);
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: 0;
  color: #161512;
  margin-bottom: 22px;
  letter-spacing: -0.01em;
}

h2::before {
  display: none;
}

h3 {
  color: #1d1c19;
  font-family: var(--display);
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.35;
  margin-bottom: 10px;
}

p {
  max-width: 980px;
  color: #56534c;
  margin-bottom: 13px;
}

p:last-child { margin-bottom: 0; }
p strong { color: #1d1c19; }

ul, ol {
  color: #56534c;
  padding-left: 20px;
}

ul li, ol li { margin-bottom: 8px; }
ul li strong, ol li strong { color: #1d1c19; }

/* ---- CARDS / GRID ---- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}

.card,
.bonus-box,
.alert,
.faq-item,
.jump-link,
.table-wrap {
  background: #f7f1e6;
  border: 1px solid rgba(29,28,25,0.14);
  box-shadow: none;
  backdrop-filter: none;
}

.card {
  position: relative;
  overflow: hidden;
  min-height: 100%;
  border-radius: var(--radius-lg);
  padding: 28px;
  transition: transform 0.18s, border-color 0.18s, box-shadow 0.18s;
}

.card::after {
  display: none;
}

.card:hover {
  transform: translateY(-1px);
  border-color: var(--border-strong);
  box-shadow: 0 16px 36px rgba(64,46,31,0.1);
}

.card:hover::after { opacity: 1; }

.card-icon {
  width: 32px;
  height: 32px;
  display: inline-grid;
  place-items: center;
  margin-bottom: 22px;
  border-radius: var(--radius);
  color: #7f5235;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.card-icon::before,
.mini-icon::before {
  content: "";
  width: 26px;
  height: 26px;
  background: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}

.mini-icon {
  width: 22px;
  height: 22px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  color: #d2c8b6;
  vertical-align: -5px;
  margin-right: 8px;
}

.mini-icon::before {
  width: 18px;
  height: 18px;
}

.icon-lock { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='10' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E"); }
.icon-phone { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='7' y='2' width='10' height='20' rx='2'/%3E%3Cpath d='M11 18h2'/%3E%3C/svg%3E"); }
.icon-edit { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z'/%3E%3C/svg%3E"); }
.icon-network { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='5' r='3'/%3E%3Ccircle cx='5' cy='19' r='3'/%3E%3Ccircle cx='19' cy='19' r='3'/%3E%3Cpath d='M10.5 7.6 6.5 16.4M13.5 7.6l4 8.8M8 19h8'/%3E%3C/svg%3E"); }
.icon-casino { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='16' height='16' rx='3'/%3E%3Ccircle cx='9' cy='9' r='1' fill='%23000'/%3E%3Ccircle cx='15' cy='15' r='1' fill='%23000'/%3E%3Ccircle cx='15' cy='9' r='1' fill='%23000'/%3E%3Ccircle cx='9' cy='15' r='1' fill='%23000'/%3E%3C/svg%3E"); }
.icon-bonus { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12v10H4V12'/%3E%3Cpath d='M2 7h20v5H2z'/%3E%3Cpath d='M12 22V7'/%3E%3Cpath d='M12 7H7.5a2.5 2.5 0 1 1 2.5-2.5C10 6 12 7 12 7Z'/%3E%3Cpath d='M12 7h4.5A2.5 2.5 0 1 0 14 4.5C14 6 12 7 12 7Z'/%3E%3C/svg%3E"); }
.icon-cricket { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 21 12-12'/%3E%3Cpath d='m14 5 5 5'/%3E%3Cpath d='M15 4a3 3 0 0 1 4 4'/%3E%3Ccircle cx='6' cy='6' r='3'/%3E%3C/svg%3E"); }
.icon-speed { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m13 2-8 13h7l-1 7 8-13h-7z'/%3E%3C/svg%3E"); }
.icon-chart { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3v18h18'/%3E%3Cpath d='m7 15 4-4 3 3 5-7'/%3E%3C/svg%3E"); }
.icon-shield { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10Z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E"); }
.icon-cards { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5' width='10' height='14' rx='2'/%3E%3Cpath d='M10 5h6a2 2 0 0 1 2 2v10'/%3E%3Cpath d='M8 10h2M8 14h2'/%3E%3C/svg%3E"); }
.icon-live { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m10 9 5 3-5 3Z'/%3E%3C/svg%3E"); }
.icon-diamond { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h12l4 6-10 12L2 9Z'/%3E%3Cpath d='M2 9h20M12 21 8 9l4-6 4 6Z'/%3E%3C/svg%3E"); }
.icon-target { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Ccircle cx='12' cy='12' r='1'/%3E%3C/svg%3E"); }
.icon-games { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 8h10l2 9a3 3 0 0 1-5 2l-2-2-2 2a3 3 0 0 1-5-2Z'/%3E%3Cpath d='M9 13h.01M15 13h.01M12 11v4M10 13h4'/%3E%3C/svg%3E"); }
.icon-wallet { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7a3 3 0 0 1 3-3h14v16H6a3 3 0 0 1-3-3Z'/%3E%3Cpath d='M18 12h3v5h-3a2.5 2.5 0 0 1 0-5Z'/%3E%3Cpath d='M7 8h8'/%3E%3C/svg%3E"); }
.icon-withdraw { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12'/%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3Cpath d='M5 21h14'/%3E%3Cpath d='M7 17h10'/%3E%3C/svg%3E"); }
.icon-bank { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 10 9-6 9 6'/%3E%3Cpath d='M5 10v8M9 10v8M15 10v8M19 10v8'/%3E%3Cpath d='M3 18h18M2 21h20'/%3E%3C/svg%3E"); }
.icon-device { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='12' rx='2'/%3E%3Cpath d='M8 21h8M12 16v5'/%3E%3C/svg%3E"); }
.icon-review { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H7a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7Z'/%3E%3Cpath d='M14 2v5h5'/%3E%3Cpath d='m9 15 2 2 4-5'/%3E%3C/svg%3E"); }
.icon-gift { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12v10H4V12'/%3E%3Cpath d='M2 7h20v5H2z'/%3E%3Cpath d='M12 22V7'/%3E%3Cpath d='M12 7H7.5a2.5 2.5 0 1 1 2.5-2.5C10 6 12 7 12 7Z'/%3E%3Cpath d='M12 7h4.5A2.5 2.5 0 1 0 14 4.5C14 6 12 7 12 7Z'/%3E%3C/svg%3E"); }

.card p { font-size: 0.94rem; }
.card-link { color: inherit; }

.card .btn-primary.sm {
  margin-top: 14px;
  min-height: 40px;
  padding: 0;
  font-size: 0.85rem;
  color: #d7b08a;
  background: transparent;
  border: 0;
  box-shadow: none;
  justify-content: flex-start;
}

.card .btn-primary.sm:hover {
  color: #f0c79c;
  background: transparent;
  box-shadow: none;
  transform: translateX(3px);
}

.card.blue { border-color: rgba(104,127,140,0.3); }
.card.green { border-color: rgba(199,121,74,0.26); }

/* ---- TABLE ---- */
.table-wrap {
  position: relative;
  overflow-x: auto;
  border-radius: var(--radius-lg);
  border-color: rgba(29,28,25,0.14);
  background:
    linear-gradient(180deg, rgba(199,121,74,0.075), transparent 120px),
    #f7f1e6;
}

.table-wrap::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, #c7794a, #7e8f63, #2f3430);
}

table {
  position: relative;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.92rem;
}

th {
  background: #1a1a17;
  color: #f4efe5;
  padding: 16px 18px;
  text-align: left;
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(122,162,184,0.18);
  border-right: 1px solid rgba(255,255,255,0.06);
}

th:last-child { border-right: 0; }

tbody tr {
  background: #f7f1e6;
}

td {
  padding: 15px 18px;
  border-bottom: 1px solid rgba(29,28,25,0.1);
  border-right: 1px solid rgba(29,28,25,0.08);
  color: #56534c;
  transition: background 0.18s, color 0.18s;
}

td:first-child {
  color: #1d1c19;
  background: rgba(199,121,74,0.055);
  border-right-color: rgba(199,121,74,0.18);
}

td:first-child strong {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

td:first-child strong::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #c7794a;
  box-shadow: none;
}

td strong { color: #fff; }
td strong { color: #1d1c19; }
td:last-child { border-right: 0; }
tr:last-child td { border-bottom: 0; }
tr:hover td {
  color: #1d1c19;
  background: rgba(199,121,74,0.07);
}

/* ---- STEPS ---- */
.steps {
  list-style: none;
  padding: 0;
  counter-reset: steps;
}

.steps li {
  counter-increment: steps;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 18px;
  padding: 18px;
  border-radius: var(--radius-lg);
  background: rgba(17,28,43,0.72);
  border: 1px solid var(--border);
}

.steps li::before {
  content: counter(steps);
  min-width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 999px;
  background: #c7794a;
  color: var(--text-dark);
  font-weight: 900;
  font-size: 0.88rem;
}

/* ---- BONUS BOX ---- */
.bonus-box {
  border-radius: var(--radius-lg);
  padding: 30px 26px;
  text-align: center;
  border-color: rgba(199,121,74,0.3);
  background:
    linear-gradient(135deg, rgba(199,121,74,0.16), rgba(126,143,99,0.1)),
    #f7f1e6;
}

.bonus-box .amount {
  display: block;
  color: #d7b08a;
  font-family: var(--display);
  font-size: 2.25rem;
  font-weight: 900;
  margin-bottom: 6px;
}

.bonus-box p {
  margin-left: auto;
  margin-right: auto;
  color: #56534c;
  font-size: 0.94rem;
  margin-bottom: 16px;
}

/* ---- ALERT ---- */
.alert {
  border-left: 4px solid #c7794a;
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 16px 18px;
  color: #56534c;
  font-size: 0.92rem;
}

.alert strong { color: #d7b08a; }

/* ---- FAQ ---- */
.faq-item {
  border-radius: var(--radius);
  padding: 18px 20px;
}

.faq-item + .faq-item { margin-top: 12px; }

.faq-q {
  color: #1d1c19;
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 8px;
}

.faq-a {
  color: #56534c;
  font-size: 0.93rem;
}

/* ---- BREADCRUMB ---- */
.breadcrumb {
  position: relative;
  z-index: 2;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 18px 40px 0;
  color: var(--text-muted);
  font-size: 0.82rem;
}

.breadcrumb a { color: var(--text-muted); }
.breadcrumb span { color: #fff; }

/* ---- FOOTER ---- */
.site-footer {
  position: relative;
  z-index: 1;
  margin-top: 40px;
  padding: 44px 40px 28px;
  background: rgba(11,12,11,0.94);
  border-top: 1px solid var(--border);
}

.footer-inner {
  max-width: var(--max-w);
  margin: 0 auto;
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 26px;
  margin-bottom: 24px;
}

.footer-nav a {
  color: var(--text-muted);
  font-size: 0.86rem;
  font-weight: 700;
}

.footer-nav a:hover { color: #fff; }

.disclaimer {
  color: rgba(244,239,229,0.62);
  font-size: 0.78rem;
  line-height: 1.7;
  border-top: 1px solid var(--border);
  padding-top: 20px;
}

/* ---- TRUST / QUICK NAV ---- */
.trust-bar {
  position: relative;
  z-index: 1;
  background: #ede7dc;
  border-bottom: 1px solid rgba(29,28,25,0.12);
  backdrop-filter: none;
}

.trust-bar-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  text-align: left;
  font-size: 0.82rem;
  color: #6b675f;
}

.trust-bar-inner.cols-3 { grid-template-columns: repeat(3, 1fr); }
.trust-bar-inner.cols-4 { grid-template-columns: repeat(4, 1fr); }

.trust-bar-cell {
  padding: 22px 24px;
  border-right: 1px solid rgba(29,28,25,0.12);
  background: transparent;
}

.trust-bar-cell:last-child { border-right: none; }

.trust-bar-cell strong {
  display: block;
  color: #1d1c19;
  font-family: var(--display);
  font-size: 1.12rem;
}

.jump-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
  margin-bottom: 8px;
}

.jump-link {
  display: block;
  border-radius: var(--radius);
  padding: 14px 16px;
  color: var(--text-muted);
  font-size: 0.9rem;
  font-weight: 700;
  transition: transform 0.18s, border-color 0.18s, color 0.18s;
}

.jump-link:hover {
  color: #fff;
  transform: translateY(-2px);
  border-color: var(--border-strong);
}

/* ---- UTILITY ---- */
.mt-12 { margin-top: 12px; }
.mt-14 { margin-top: 14px; }
.mt-16 { margin-top: 16px; }
.mt-20 { margin-top: 20px; }
.mt-24 { margin-top: 24px; }

.text-note {
  max-width: 720px;
  color: rgba(216,227,247,0.68);
  font-size: 0.82rem;
  margin-top: 12px;
}

.steps-plain {
  padding-left: 20px;
  color: var(--text-muted);
}

.steps-plain li { margin-bottom: 10px; }

/* ---- INTERACTIVE MATCH DEMO ---- */
.match-demo {
  margin: 0;
  align-self: center;
}

.demo-art-frame {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(244,239,229,0.14);
  background: #11120f;
  box-shadow: 14px 14px 0 rgba(199,121,74,0.08);
}

.demo-art-frame img {
  width: 100%;
  display: block;
}

.demo-board {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--radius-lg);
  background: #11120f;
  box-shadow: none;
  margin-top: 12px;
}

.demo-main,
.market-panel {
  background: #171815;
}

.demo-main {
  display: none;
}

.demo-kicker,
.market-head span,
.score-label {
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.demo-main h2 {
  margin: 6px 0 18px;
  font-size: 1.72rem;
  letter-spacing: -0.01em;
}

.demo-main h2::before {
  display: none;
}

.score-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  overflow: hidden;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
}

.score-strip > div {
  padding: 0 14px 0 0;
  background: transparent;
}

.score-strip strong {
  display: block;
  margin-top: 4px;
  color: #fff;
  font-family: var(--display);
  font-size: 1.42rem;
}

.pitch-meter {
  position: relative;
  height: 54px;
  margin: 20px 0 14px;
  border: 0;
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(126,143,99,0.16), transparent 38%, rgba(184,94,75,0.12)),
    repeating-linear-gradient(90deg, transparent 0 11%, rgba(255,255,255,0.08) 11% 11.4%);
}

.pitch-meter::before,
.pitch-meter::after {
  content: "";
  position: absolute;
  top: 10px;
  bottom: 10px;
  width: 2px;
  background: rgba(255,255,255,0.38);
}

.pitch-meter::before { left: 16%; }
.pitch-meter::after { right: 16%; }

#pitchBall {
  position: absolute;
  left: 38%;
  top: 50%;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #f4efe5;
  box-shadow: 0 0 0 5px rgba(199,121,74,0.16);
  transform: translate(-50%, -50%);
  transition: left 0.28s ease;
}

.market-panel {
  padding: 16px;
  border-top: 0;
}

.market-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.market-head strong {
  color: #d7b08a;
  font-size: 0.86rem;
}

.market-btn {
  width: 100%;
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius);
  color: var(--text-main);
  background: #0f100e;
  font: inherit;
  cursor: pointer;
  transition: transform 0.15s, border-color 0.15s, background 0.15s;
}

.market-btn:hover,
.market-btn.is-selected {
  transform: translateX(3px);
  border-color: rgba(199,121,74,0.42);
  background: rgba(199,121,74,0.105);
}

.market-btn.is-hot {
  border-color: rgba(184,94,75,0.35);
}

.market-btn span {
  font-weight: 800;
}

.market-btn strong {
  color: #fff;
  font-family: var(--display);
  font-size: 1.12rem;
}

.demo-result {
  margin-top: 16px;
  padding: 10px 12px;
  border-radius: var(--radius);
  color: var(--text-muted);
  background: #24231f;
  font-size: 0.84rem;
}

/* ---- RESPONSIVE ---- */
@media (max-width: 860px) {
  .site-header { height: auto; min-height: 72px; }
  .header-inner {
    padding: 14px 20px;
    align-items: flex-start;
    flex-direction: column;
  }
  nav { gap: 14px 18px; }
  .hero {
    min-height: 560px;
    padding: 64px 20px 54px;
  }
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .hero h1 {
    font-size: clamp(2.5rem, 12vw, 4.2rem);
  }
  .container { padding: 52px 20px; }
  .breadcrumb { padding: 16px 20px 0; }
  .site-footer { padding-left: 20px; padding-right: 20px; }
}

@media (max-width: 640px) {
  .logo { font-size: 1.24rem; }
  nav { display: none; }
  .hero {
    min-height: auto;
    padding: 54px 16px 46px;
  }
  .hero h1 { font-size: 2.78rem; }
  .cta-group { flex-direction: column; align-items: stretch; }
  .cta-group .btn-primary,
  .cta-group .btn-secondary,
  .cta-group .btn-gold { width: 100%; text-align: center; }
  .container { padding: 38px 16px; }
  .container > * + * { margin-top: 42px; }
  .card-grid { grid-template-columns: 1fr; }
  .trust-bar-inner.cols-3,
  .trust-bar-inner.cols-4 { grid-template-columns: repeat(2, 1fr); }
  .trust-bar-cell:nth-child(2n) { border-right: none; }
  h2 { font-size: 1.45rem; align-items: flex-start; }
  h2::before { height: 28px; margin-top: 2px; }
}

/* ---- SPORTSBET RESTORE ---- */
:root {
  --brand-dark: #050814;
  --brand-blue: #2f7df6;
  --brand-blue-hover: #5d9cff;
  --brand-gold: #79f2a1;
  --brand-green: #79f2a1;
  --brand-green-strong: #a7ffbe;
  --brand-cyan: #78d6ff;
  --brand-red: #ff4f6a;
  --text-main: #edf4ff;
  --text-muted: #96a7bf;
  --text-dark: #04100a;
  --surface-1: rgba(7, 12, 25, 0.9);
  --surface-2: rgba(12, 20, 38, 0.94);
  --surface-3: rgba(18, 30, 55, 0.96);
  --surface-solid: #0b1427;
  --border: rgba(230, 240, 255, 0.1);
  --border-strong: rgba(47, 125, 246, 0.45);
  --shadow: 0 28px 80px rgba(0, 0, 0, 0.46);
}

body {
  background:
    radial-gradient(circle at 12% 12%, rgba(47, 125, 246, 0.18), transparent 28rem),
    radial-gradient(circle at 86% 18%, rgba(255, 79, 106, 0.11), transparent 25rem),
    linear-gradient(90deg, rgba(120, 214, 255, 0.035) 1px, transparent 1px),
    linear-gradient(180deg, #050814 0%, #081121 45%, #050814 100%);
  background-size: auto, auto, 88px 100%, auto;
  color: var(--text-main);
}

a { color: #78d6ff; }
a:hover { color: #a7ffbe; }

.site-header {
  background: rgba(5, 8, 20, 0.84);
  border-bottom-color: rgba(255, 255, 255, 0.09);
  box-shadow: 0 12px 38px rgba(0, 0, 0, 0.34);
}

.logo span { color: #79f2a1; }

nav a {
  color: rgba(237, 244, 255, 0.66);
  letter-spacing: 0.04em;
}

nav a:hover,
nav a.active {
  color: #fff;
  border-color: #2f7df6;
}

.hero {
  min-height: 690px;
  background:
    linear-gradient(90deg, rgba(5, 8, 20, 0.98) 0%, rgba(5, 8, 20, 0.82) 50%, rgba(5, 8, 20, 0.96) 100%),
    radial-gradient(circle at 72% 20%, rgba(47, 125, 246, 0.3), transparent 24rem),
    var(--hero-image, url('assets/cricket/hero.png')) center / cover no-repeat;
}

.hero::before {
  background:
    linear-gradient(90deg, rgba(120, 214, 255, 0.055) 1px, transparent 1px),
    linear-gradient(to top, #050814, transparent 58%);
  background-size: 90px 100%, auto;
}

.hero::after {
  right: min(7vw, 100px);
  top: 128px;
  width: min(34vw, 500px);
  height: min(34vw, 500px);
  border-color: rgba(120, 214, 255, 0.1);
  box-shadow: inset 0 0 80px rgba(47, 125, 246, 0.08);
}

.hero-grid {
  grid-template-columns: minmax(0, 0.9fr) minmax(420px, 0.64fr);
  align-items: center;
}

.hero-label {
  color: #78d6ff;
  letter-spacing: 0.09em;
}

.hero h1 {
  color: #fff;
  text-shadow: 0 18px 52px rgba(0, 0, 0, 0.46);
}

.hero h1 em { color: #79f2a1; }

.hero p,
p,
ul,
ol {
  color: var(--text-muted);
}

.hero p strong,
p strong,
ul li strong,
ol li strong {
  color: #fff;
}

.btn-primary,
.btn-gold {
  background: linear-gradient(135deg, #79f2a1, #47c979);
  color: #05100a;
  box-shadow: 0 16px 34px rgba(71, 201, 121, 0.2);
}

.btn-primary:hover,
.btn-gold:hover {
  background: linear-gradient(135deg, #9cffb9, #62dc90);
  color: #05100a;
  box-shadow: 0 18px 38px rgba(71, 201, 121, 0.26);
}

.btn-secondary {
  background: rgba(13, 23, 44, 0.78);
  border-color: rgba(120, 214, 255, 0.2);
  color: #eaf3ff;
}

.btn-secondary:hover {
  background: rgba(47, 125, 246, 0.14);
  border-color: rgba(120, 214, 255, 0.44);
}

.container {
  max-width: var(--max-w);
  padding: 76px 40px;
  background: transparent;
  color: var(--text-main);
}

.container > section {
  max-width: none;
  padding: 0;
}

.container > section:last-child { padding-bottom: 0; }
.container > * + * { margin-top: 58px; }

h2 {
  display: flex;
  gap: 14px;
  align-items: center;
  color: #fff;
  letter-spacing: -0.01em;
}

h2::before {
  display: inline-block;
  content: "";
  width: 7px;
  height: 34px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: linear-gradient(180deg, #79f2a1, #2f7df6);
  box-shadow: 0 0 28px rgba(47, 125, 246, 0.32);
}

h3,
.faq-q {
  color: #fff;
}

.card,
.bonus-box,
.alert,
.faq-item,
.jump-link,
.table-wrap {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015)),
    var(--surface-2);
  border: 1px solid var(--border);
  box-shadow: 0 18px 52px rgba(0, 0, 0, 0.18);
}

.card {
  padding: 26px;
}

.card::after {
  display: block;
  content: "";
  position: absolute;
  inset: auto -20% -45% -20%;
  height: 120px;
  background: radial-gradient(circle, rgba(47, 125, 246, 0.18), transparent 65%);
  opacity: 0;
  transition: opacity 0.18s;
  pointer-events: none;
}

.card:hover {
  transform: translateY(-3px);
  border-color: rgba(47, 125, 246, 0.4);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.3);
}

.card-icon {
  width: 42px;
  height: 42px;
  color: #79f2a1;
  background: rgba(121, 242, 161, 0.1);
  border: 1px solid rgba(121, 242, 161, 0.22);
  box-shadow: inset 0 0 20px rgba(121, 242, 161, 0.08);
}

.card-icon::before { width: 22px; height: 22px; }

.card .btn-primary.sm {
  min-height: 40px;
  padding: 0 14px;
  color: #dffcff;
  background: rgba(47, 125, 246, 0.15);
  border: 1px solid rgba(47, 125, 246, 0.28);
  box-shadow: none;
  justify-content: center;
}

.card .btn-primary.sm:hover {
  color: #fff;
  background: rgba(47, 125, 246, 0.25);
  transform: translateY(-1px);
}

.card.blue { border-color: rgba(47, 125, 246, 0.32); }
.card.green { border-color: rgba(121, 242, 161, 0.28); }

.section-visual {
  background: var(--surface-2);
  border-color: rgba(255, 255, 255, 0.1);
}

.section-visual img {
  filter: saturate(0.98) contrast(1.02) brightness(0.9);
}

.table-wrap {
  background:
    linear-gradient(135deg, rgba(47, 125, 246, 0.12), transparent 44%),
    var(--surface-2);
  border-color: rgba(120, 214, 255, 0.16);
}

.table-wrap::before {
  background: linear-gradient(90deg, #2f7df6, #79f2a1, #ff4f6a);
}

th {
  background: rgba(5, 8, 20, 0.72);
  color: #edf4ff;
  border-bottom-color: rgba(120, 214, 255, 0.18);
}

tbody tr {
  background: rgba(10, 18, 34, 0.74);
}

td {
  color: #aab8cc;
  border-bottom-color: rgba(255, 255, 255, 0.07);
  border-right-color: rgba(255, 255, 255, 0.06);
}

td:first-child {
  color: #f7fbff;
  background: rgba(47, 125, 246, 0.08);
  border-right-color: rgba(47, 125, 246, 0.16);
}

td:first-child strong::before {
  background: #79f2a1;
  box-shadow: 0 0 12px rgba(121, 242, 161, 0.5);
}

td strong,
td:first-child strong {
  color: #fff;
}

tr:hover td {
  color: #fff;
  background: rgba(47, 125, 246, 0.09);
}

.steps li {
  background: var(--surface-2);
  border-color: var(--border);
}

.steps li::before {
  background: linear-gradient(135deg, #2f7df6, #79f2a1);
  color: #031020;
}

.bonus-box {
  background:
    radial-gradient(circle at top right, rgba(121, 242, 161, 0.16), transparent 18rem),
    var(--surface-2);
  border-color: rgba(121, 242, 161, 0.24);
}

.bonus-box .amount,
.alert strong {
  color: #79f2a1;
}

.bonus-box p,
.alert,
.faq-a {
  color: var(--text-muted);
}

.alert {
  border-left-color: #ff4f6a;
}

.breadcrumb span { color: #fff; }

.trust-bar {
  background:
    linear-gradient(90deg, rgba(47, 125, 246, 0.12), transparent 38%, rgba(121, 242, 161, 0.08)),
    rgba(7, 12, 25, 0.92);
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

.trust-bar-inner {
  max-width: var(--max-w);
  color: var(--text-muted);
}

.trust-bar-cell {
  border-right-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.015);
}

.trust-bar-cell strong {
  color: #fff;
}

.site-footer {
  background: rgba(5, 8, 20, 0.96);
}

.disclaimer {
  color: rgba(237, 244, 255, 0.62);
}

.demo-art-frame {
  display: none;
}

.demo-board {
  grid-template-columns: 1fr;
  gap: 0;
  margin-top: 0;
  border-color: rgba(120, 214, 255, 0.18);
  background: rgba(5, 8, 20, 0.88);
  box-shadow: 0 26px 80px rgba(0, 0, 0, 0.38);
}

.demo-main,
.market-panel {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.018)),
    rgba(9, 17, 32, 0.92);
}

.demo-main {
  display: block;
  padding: 22px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.demo-main h2 {
  display: block;
  color: #fff;
}

.demo-kicker,
.market-head span,
.score-label {
  color: rgba(237, 244, 255, 0.62);
}

.score-strip {
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(5, 8, 20, 0.54);
}

.score-strip > div {
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.025);
}

.score-strip > div + div {
  border-left: 1px solid rgba(255, 255, 255, 0.08);
}

.pitch-meter {
  background:
    linear-gradient(90deg, rgba(47, 125, 246, 0.18), transparent 38%, rgba(255, 79, 106, 0.14)),
    repeating-linear-gradient(90deg, transparent 0 11%, rgba(255, 255, 255, 0.09) 11% 11.4%);
}

#pitchBall {
  background: #eafff0;
  box-shadow: 0 0 0 5px rgba(121, 242, 161, 0.16), 0 0 24px rgba(121, 242, 161, 0.38);
}

.market-panel {
  padding: 18px;
}

.market-head strong {
  color: #79f2a1;
}

.market-btn {
  background: rgba(5, 8, 20, 0.72);
  border-color: rgba(255, 255, 255, 0.1);
  color: var(--text-main);
}

.market-btn:hover,
.market-btn.is-selected {
  border-color: rgba(47, 125, 246, 0.52);
  background: rgba(47, 125, 246, 0.15);
}

.market-btn.is-hot {
  border-color: rgba(255, 79, 106, 0.42);
}

.demo-result {
  color: rgba(237, 244, 255, 0.68);
  background: rgba(255, 255, 255, 0.07);
}

@media (max-width: 860px) {
  .container {
    padding: 52px 20px;
  }

  .hero-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .container {
    padding: 38px 16px;
  }

  .container > * + * {
    margin-top: 42px;
  }
}

/* ---- NEW PAGE POLISH ---- */
.hero-page {
  min-height: 520px;
  display: flex;
  align-items: center;
  padding: 84px 40px 64px;
  background:
    linear-gradient(90deg, rgba(5, 8, 20, 0.98) 0%, rgba(5, 8, 20, 0.82) 48%, rgba(5, 8, 20, 0.95) 100%),
    radial-gradient(circle at 72% 28%, rgba(47, 125, 246, 0.34), transparent 23rem),
    var(--hero-image) center / cover no-repeat;
}

.hero-page .hero-page-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
}

.hero-page h1 {
  max-width: 880px;
  font-size: clamp(2.75rem, 5vw, 5.15rem);
}

.hero-page p {
  max-width: 690px;
}

.page-trust {
  margin-bottom: 0;
}

.page-trust .trust-bar-cell {
  padding-top: 20px;
  padding-bottom: 20px;
}

.rating-pill {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 4px 12px;
  border-radius: 999px;
  color: #06110a;
  background: linear-gradient(135deg, #79f2a1, #47c979);
  font-weight: 900;
  line-height: 1;
}

.jump-link {
  position: relative;
}

.jump-link::before {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 9px;
  border-radius: 999px;
  background: #79f2a1;
  box-shadow: 0 0 14px rgba(121, 242, 161, 0.42);
  vertical-align: 1px;
}

.card-grid .card:nth-child(3n + 1) .card-icon {
  color: #78d6ff;
  background: rgba(47, 125, 246, 0.12);
  border-color: rgba(47, 125, 246, 0.26);
}

.card-grid .card:nth-child(3n + 2) .card-icon {
  color: #79f2a1;
}

.card-grid .card:nth-child(3n + 3) .card-icon {
  color: #ff8ba0;
  background: rgba(255, 79, 106, 0.1);
  border-color: rgba(255, 79, 106, 0.22);
}

.table-wrap table th:first-child,
.table-wrap table td:first-child {
  min-width: 180px;
}

.table-wrap table td:nth-child(2) {
  color: #c6d4e8;
}

.section-visual + p {
  margin-top: 18px;
}

@media (max-width: 860px) {
  .hero-page {
    min-height: 460px;
    padding: 62px 20px 52px;
  }
}

@media (max-width: 640px) {
  .hero-page {
    padding: 48px 16px 42px;
  }

  .hero-page h1 {
    font-size: 2.5rem;
  }

  .page-trust .trust-bar-cell {
    padding: 16px;
  }
}

/* ---- ART DIRECTION PASS: SPORTSBET V2 ---- */
:root {
  --brand-dark: #05070d;
  --brand-blue: #3478f6;
  --brand-blue-hover: #6aa2ff;
  --brand-gold: #ff3f5f;
  --brand-green: #35d07f;
  --brand-green-strong: #72e6a8;
  --brand-cyan: #66d8ff;
  --brand-red: #ff3f5f;
  --text-main: #edf3fb;
  --text-muted: #9aa8ba;
  --text-dark: #12050a;
  --surface-1: rgba(7, 10, 18, 0.94);
  --surface-2: rgba(12, 17, 29, 0.95);
  --surface-3: rgba(18, 25, 40, 0.96);
  --surface-solid: #0c111d;
  --border: rgba(225, 236, 255, 0.11);
  --border-strong: rgba(255, 63, 95, 0.38);
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.42);
}

body {
  background:
    radial-gradient(circle at 16% 10%, rgba(52, 120, 246, 0.16), transparent 25rem),
    radial-gradient(circle at 88% 12%, rgba(255, 63, 95, 0.1), transparent 24rem),
    linear-gradient(90deg, rgba(102, 216, 255, 0.028) 1px, transparent 1px),
    linear-gradient(180deg, #05070d 0%, #080d17 48%, #05070d 100%);
  background-size: auto, auto, 96px 100%, auto;
}

a { color: #66d8ff; }
a:hover { color: #ff7890; }

.site-header {
  height: 66px;
  background: rgba(5, 7, 13, 0.88);
  border-bottom-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
}

.header-inner {
  padding: 0 32px;
}

.logo {
  font-size: 1.38rem;
}

.logo span { color: #ff3f5f; }

nav {
  gap: 18px;
}

nav a {
  color: rgba(237, 243, 251, 0.64);
  font-size: 0.72rem;
}

nav a:hover,
nav a.active {
  color: #fff;
  border-color: #ff3f5f;
}

.hero:not(.hero-page) {
  min-height: 520px;
  padding: 58px 40px 42px;
  background:
    linear-gradient(90deg, rgba(5, 7, 13, 0.98) 0%, rgba(5, 7, 13, 0.82) 50%, rgba(5, 7, 13, 0.94) 100%),
    radial-gradient(circle at 72% 22%, rgba(52, 120, 246, 0.25), transparent 22rem),
    linear-gradient(to bottom, transparent 58%, #05070d 100%),
    var(--hero-image, url('assets/cricket/hero.png')) center / cover no-repeat;
}

.hero:not(.hero-page)::before {
  background:
    linear-gradient(90deg, rgba(102, 216, 255, 0.04) 1px, transparent 1px),
    linear-gradient(to top, rgba(5, 7, 13, 0.82), transparent 46%);
  background-size: 96px 100%, auto;
}

.hero:not(.hero-page)::after {
  display: none;
}

.hero-grid {
  grid-template-columns: minmax(0, 0.82fr) minmax(520px, 0.66fr);
  gap: clamp(26px, 3.4vw, 46px);
  align-items: center;
}

.hero-copy {
  padding-bottom: 0;
}

.hero-label {
  margin-bottom: 14px;
  color: #ff7890;
  font-size: 0.72rem;
}

.hero h1 {
  max-width: 780px;
  margin-bottom: 20px;
  font-size: clamp(2.75rem, 4.35vw, 4.7rem);
  line-height: 0.98;
  text-shadow: 0 18px 45px rgba(0, 0, 0, 0.44);
}

.hero h1 em {
  color: #ff5b75;
}

.hero p {
  max-width: 600px;
  margin-bottom: 24px;
  color: #a8b5c5;
  font-size: clamp(0.98rem, 1.25vw, 1.08rem);
}

.btn-primary,
.btn-gold {
  background: linear-gradient(135deg, #ff5a73, #e32648);
  color: #fff;
  box-shadow: 0 15px 32px rgba(255, 63, 95, 0.22);
}

.btn-primary:hover,
.btn-gold:hover {
  background: linear-gradient(135deg, #ff7890, #f03254);
  color: #fff;
  box-shadow: 0 18px 38px rgba(255, 63, 95, 0.28);
}

.btn-secondary {
  background: rgba(13, 18, 31, 0.78);
  border-color: rgba(102, 216, 255, 0.2);
  color: #dfe9f6;
}

.btn-secondary:hover {
  background: rgba(52, 120, 246, 0.16);
  border-color: rgba(102, 216, 255, 0.38);
}

.hero .match-demo {
  width: 100%;
  max-width: 590px;
  justify-self: end;
}

.demo-board {
  grid-template-columns: minmax(0, 1.08fr) minmax(230px, 0.92fr);
  border-color: rgba(102, 216, 255, 0.16);
  background: rgba(6, 9, 16, 0.9);
  box-shadow: 0 22px 58px rgba(0, 0, 0, 0.36);
}

.demo-main {
  padding: 16px;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 0;
}

.demo-main h2 {
  margin: 4px 0 14px;
  font-size: 1.42rem;
}

.score-strip > div {
  padding: 10px 12px;
}

.score-strip strong {
  font-size: 1.2rem;
}

.pitch-meter {
  height: 44px;
  margin: 16px 0 10px;
  background:
    linear-gradient(90deg, rgba(52, 120, 246, 0.2), transparent 42%, rgba(255, 63, 95, 0.16)),
    repeating-linear-gradient(90deg, transparent 0 11%, rgba(255, 255, 255, 0.075) 11% 11.4%);
}

#pitchBall {
  width: 16px;
  height: 16px;
  background: #fff6f8;
  box-shadow: 0 0 0 4px rgba(255, 63, 95, 0.18), 0 0 20px rgba(255, 63, 95, 0.28);
}

.market-panel {
  padding: 14px;
  border-top: 0;
}

.market-head {
  margin-bottom: 10px;
}

.market-head strong {
  color: #66d8ff;
}

.market-btn {
  min-height: 42px;
  margin-top: 7px;
  padding: 10px 12px;
  background: rgba(7, 10, 18, 0.78);
}

.market-btn:hover,
.market-btn.is-selected {
  border-color: rgba(255, 63, 95, 0.52);
  background: rgba(255, 63, 95, 0.12);
}

.market-btn.is-hot {
  border-color: rgba(255, 63, 95, 0.38);
}

.trust-bar {
  background:
    linear-gradient(90deg, rgba(52, 120, 246, 0.1), transparent 44%, rgba(255, 63, 95, 0.08)),
    rgba(7, 10, 18, 0.94);
}

.trust-bar-cell {
  padding: 15px 20px;
}

.trust-bar-cell strong {
  color: #fff;
  font-size: 1.05rem;
}

.container {
  padding: 56px 40px;
}

.container > * + * {
  margin-top: 46px;
}

h2 {
  gap: 12px;
}

h2::before {
  width: 5px;
  height: 30px;
  background: linear-gradient(180deg, #ff3f5f, #3478f6);
  box-shadow: 0 0 24px rgba(255, 63, 95, 0.22);
}

.card,
.bonus-box,
.alert,
.faq-item,
.jump-link,
.table-wrap {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015)),
    #0c111d;
  border-color: rgba(225, 236, 255, 0.1);
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.18);
}

.card {
  padding: 22px;
}

.card:hover {
  border-color: rgba(255, 63, 95, 0.32);
  box-shadow: 0 22px 58px rgba(0, 0, 0, 0.28);
}

.card-icon {
  color: #66d8ff;
  background: rgba(52, 120, 246, 0.12);
  border-color: rgba(102, 216, 255, 0.18);
  box-shadow: inset 0 0 18px rgba(52, 120, 246, 0.08);
}

.card-grid .card:nth-child(3n + 1) .card-icon {
  color: #66d8ff;
  background: rgba(52, 120, 246, 0.12);
  border-color: rgba(102, 216, 255, 0.2);
}

.card-grid .card:nth-child(3n + 2) .card-icon {
  color: #ff7890;
  background: rgba(255, 63, 95, 0.1);
  border-color: rgba(255, 63, 95, 0.2);
}

.card-grid .card:nth-child(3n + 3) .card-icon {
  color: #35d07f;
  background: rgba(53, 208, 127, 0.09);
  border-color: rgba(53, 208, 127, 0.18);
}

.card .btn-primary.sm {
  color: #f5f9ff;
  background: rgba(52, 120, 246, 0.13);
  border-color: rgba(102, 216, 255, 0.18);
}

.card .btn-primary.sm:hover {
  background: rgba(255, 63, 95, 0.16);
  border-color: rgba(255, 63, 95, 0.28);
}

.table-wrap::before {
  background: linear-gradient(90deg, #ff3f5f, #3478f6, #66d8ff);
}

td:first-child strong::before {
  background: #ff3f5f;
  box-shadow: 0 0 12px rgba(255, 63, 95, 0.42);
}

.steps li::before {
  background: linear-gradient(135deg, #ff3f5f, #3478f6);
  color: #fff;
}

.bonus-box {
  background:
    radial-gradient(circle at top right, rgba(255, 63, 95, 0.14), transparent 18rem),
    #0c111d;
  border-color: rgba(255, 63, 95, 0.22);
}

.bonus-box .amount,
.alert strong {
  color: #ff7890;
}

.alert {
  border-left-color: #ff3f5f;
}

.hero-page {
  min-height: 460px;
  padding: 64px 40px 48px;
  background:
    linear-gradient(90deg, rgba(5, 7, 13, 0.98) 0%, rgba(5, 7, 13, 0.82) 48%, rgba(5, 7, 13, 0.95) 100%),
    radial-gradient(circle at 72% 28%, rgba(52, 120, 246, 0.24), transparent 22rem),
    var(--hero-image) center / cover no-repeat;
}

.hero-page h1 {
  font-size: clamp(2.45rem, 4.35vw, 4.45rem);
}

.rating-pill {
  background: linear-gradient(135deg, #ff5a73, #e32648);
  color: #fff;
}

@media (max-width: 860px) {
  .site-header {
    min-height: 62px;
  }

  .header-inner {
    padding: 12px 20px;
  }

  .hero-grid {
    grid-template-columns: 1fr;
    gap: 22px;
    align-items: start;
  }

  .hero-copy {
    width: 100%;
  }

  .hero:not(.hero-page) {
    min-height: auto;
    padding: 44px 20px 34px;
  }

  .hero .match-demo {
    max-width: none;
    justify-self: stretch;
  }

  .demo-board {
    grid-template-columns: 1fr;
  }

  .demo-main {
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .container {
    padding: 44px 20px;
  }
}

@media (max-width: 640px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }

  .hero h1 {
    font-size: 2.35rem;
  }

  .hero p {
    font-size: 0.96rem;
  }

  .cta-group {
    gap: 10px;
  }

  .cta-group .btn-primary,
  .cta-group .btn-secondary,
  .cta-group .btn-gold {
    width: 100%;
    min-height: 44px;
    padding: 11px 16px;
  }

  .demo-main {
    display: none;
  }

  .demo-main h2 {
    font-size: 1.18rem;
  }

  .demo-kicker,
  .market-head span,
  .score-label {
    font-size: 0.66rem;
  }

  .score-strip > div {
    padding: 8px 9px;
  }

  .score-strip strong {
    font-size: 1rem;
  }

  .pitch-meter {
    height: 32px;
    margin: 12px 0 8px;
  }

  .market-panel {
    padding: 12px;
  }

  .market-btn {
    min-height: 38px;
    padding: 8px 10px;
  }

  .trust-bar-cell {
    padding: 13px 14px;
  }

  .container {
    padding: 34px 16px;
  }

  .container > * + * {
    margin-top: 36px;
  }

  .hero-page {
    min-height: auto;
    padding: 42px 16px 34px;
  }
}

.redirect-page {
  min-height: 100vh;
  background:
    radial-gradient(circle at 76% 18%, rgba(52, 120, 246, 0.22), transparent 28rem),
    radial-gradient(circle at 18% 78%, rgba(255, 63, 95, 0.15), transparent 24rem),
    #05070d;
}

.redirect-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}

.redirect-card {
  width: min(100%, 560px);
  padding: clamp(28px, 5vw, 46px);
  border: 1px solid rgba(225, 236, 255, 0.13);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(14, 20, 34, 0.95), rgba(8, 12, 20, 0.98));
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.34);
}

.redirect-card h1 {
  margin: 14px 0 12px;
  max-width: 11ch;
  font-size: clamp(2.1rem, 6vw, 3.35rem);
  line-height: 0.98;
  letter-spacing: 0;
}

.redirect-card p {
  margin: 0 0 22px;
  color: rgba(237, 243, 251, 0.76);
}