/* ============================================================
   Kentastic Casino (kentastic.casino) - site overrides
   Lilita One headings over Poppins text. Deep navy ground from the
   Kentastic lobby, indigo panels, the orange fox mascot colour for
   accents and the gold Deposit and LOG IN button colour for CTAs,
   with the violet of the Chips price buttons as a second accent.
   ============================================================ */
:root {
  --font-display: "Lilita One", "Segoe UI", Arial, sans-serif;
  --font-body: "Poppins", "Segoe UI", Arial, sans-serif;
  --kt-orange: #ff7a1f;
  --kt-gold: #ffc233;
  --kt-violet: #7c5cff;
  --kt-orange-soft: rgba(255, 122, 31, 0.16);
}

body {
  font-synthesis: none;
  font-family: var(--font-body);
  font-size: 1.04rem;
  line-height: 1.7;
  letter-spacing: 0;
  background:
    radial-gradient(1100px 560px at 85% -160px, rgba(255, 122, 31, 0.10), transparent 70%),
    var(--color-bg);
}

/* ---------- Header ---------- */
.site-header { border-bottom: 1px solid var(--color-border); }
.site-header .site-logo img { height: 44px; width: auto; }
.nav-main--desktop a {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: 0.04em;
}
.nav-main--desktop a:hover { color: var(--color-accent); }
.btn { font-weight: 700; letter-spacing: 0.02em; border-radius: 10px; }
.btn--primary {
  background: var(--color-cta);
  color: var(--color-cta-text);
  box-shadow: 0 6px 22px rgba(255, 122, 31, 0.28);
}
.btn--primary:hover { background: var(--color-cta-hover); color: var(--color-cta-text); }
.btn--outline {
  border-color: var(--color-border-2);
  color: var(--color-text);
  background: rgba(255, 255, 255, 0.04);
}
.btn--outline:hover { border-color: var(--color-accent); color: var(--color-accent); }

@media (max-width: 640px) {
  .site-header .site-logo img { height: 32px; }
  .site-header .site-logo { margin-right: 10px; flex-shrink: 0; }
  .btn--mobile-cta { margin-left: auto; padding: 0.5rem 0.9rem !important; font-size: 0.82rem !important; white-space: nowrap; }
}

/* ---------- Hero: copy left, offer plate right ---------- */
.hero {
  padding: 84px 0 72px;
  background:
    radial-gradient(640px 360px at 80% 35%, var(--color-hero-glow), transparent 70%),
    linear-gradient(180deg, var(--color-hero-gradient-start), var(--color-hero-gradient-end));
  border-bottom: 1px solid var(--color-border);
  position: relative;
}
.hero::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--kt-orange), transparent);
  opacity: 0.7;
}
.hero__content {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.9fr);
  grid-template-areas:
    "badge badge"
    "title box"
    "sub   box"
    "ctas  box";
  column-gap: 56px;
  row-gap: 18px;
  align-items: start;
  text-align: left;
  max-width: none;
}
.hero__badge { grid-area: badge; justify-self: start; color: var(--color-accent); }
.hero__badge::before { background: var(--color-accent); box-shadow: 0 0 10px rgba(255, 122, 31, 0.6); }
.hero h1 {
  grid-area: title;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.2rem, 3.9vw, 3.5rem);
  line-height: 1.04;
  letter-spacing: 0.005em;
  color: var(--color-text);
  margin: 0;
}
.hero h1 .kt-accent { color: var(--color-accent); }
.hero__subtitle { grid-area: sub; margin: 0; max-width: 60ch; color: var(--color-text-muted); }
.hero__subtitle p { margin: 0; max-width: 60ch; }
.hero__ctas { grid-area: ctas; justify-content: flex-start; margin-top: 8px; }
.hero__bonus-box {
  grid-area: box;
  align-self: center;
  margin: 0;
  padding: 30px 30px 28px;
  text-align: left;
  background: linear-gradient(160deg, #232a52 0%, #141833 55%, #0b0e1a 100%);
  border: 1px solid rgba(255, 122, 31, 0.4);
  border-radius: 18px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55), 0 0 40px rgba(255, 122, 31, 0.18);
}
.hero__bonus-box .hero__bonus-label {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  color: var(--color-cta-text);
  background: var(--color-accent);
  padding: 3px 12px;
  border-radius: 6px;
}
.hero__bonus-box .hero__bonus-value {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 2.6vw, 2.4rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--color-text);
  margin: 14px 0 12px;
}
.hero__bonus-box .hero__bonus-extra { color: #dfe2f2; font-size: 0.98rem; line-height: 1.55; }
@media (max-width: 960px) {
  .hero { padding: 56px 0 48px; }
  .hero__content {
    grid-template-columns: 1fr;
    grid-template-areas: "badge" "title" "sub" "box" "ctas";
    text-align: center;
  }
  .hero__badge { justify-self: center; }
  .hero__subtitle, .hero__subtitle p { margin-left: auto; margin-right: auto; }
  .hero__ctas { justify-content: center; }
  .hero__bonus-box { text-align: center; }
}

/* ---------- Stats band ---------- */
.stats-bar {
  background: var(--color-surface-alt);
  border-bottom: 1px solid var(--color-border);
  padding: 26px 0;
}
.stats-bar__inner { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.stats-bar__inner .stat {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.3rem;
  padding: 14px 16px; border: 1px solid var(--color-border); border-radius: 12px;
  background: var(--color-surface);
}
.stats-bar__inner .stat__value {
  font-family: var(--font-display); font-size: 1.7rem; font-weight: 700; line-height: 1.05; color: var(--color-accent);
}
.stats-bar__inner .stat__label { font-size: 0.8rem; line-height: 1.4; color: var(--color-text-muted); letter-spacing: 0.01em; text-transform: none; }
@media (max-width: 1100px) {
  .stats-bar__inner { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
  .stats-bar__inner { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .stats-bar__inner .stat { padding: 12px; }
  .stats-bar__inner .stat__value { font-size: 1.4rem; }
}

/* ---------- Sections and headings ---------- */
.content-section { padding: 76px 0; }
.content-section--alt {
  background: linear-gradient(180deg, var(--color-surface-alt), var(--color-bg-2));
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.content-section h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.8rem, 2.8vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: 0.01em;
  color: var(--color-text);
  padding: 0 0 20px 0;
  margin: 0 0 30px;
  border: 0;
  position: relative;
  max-width: none;
}
.content-section h2::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 120px; height: 2px;
  background: linear-gradient(90deg, var(--kt-orange), rgba(255, 122, 31, 0));
}
.content-section h2 { padding-left: 0; }
.content-section h2 + * { margin-top: 0; }
.content-section h2::before {
  display: block !important;
  content: "";
  position: absolute; left: 0; bottom: -4px;
  width: 10px; height: 10px;
  background: var(--kt-orange);
  transform: rotate(45deg);
}
.content-section h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.2;
  color: var(--color-accent);
  margin: 40px 0 14px;
  padding: 0;
  border: 0;
  text-transform: none;
  letter-spacing: 0.01em;
}
.content-section h3::before { display: none; }
.content-section p { margin-bottom: 1.05rem; color: var(--color-text-muted); }
.content-section p strong, .content-section li strong { color: var(--color-text); }
.content-section ul, .content-section ol { margin: 0 0 1.2rem 1.2rem; }
.content-section li { margin-bottom: 0.45rem; color: var(--color-text-muted); }
.content-section li::marker { color: var(--color-accent); }
.content-section p, .content-section li { max-width: calc(74ch + 330px); }
@media (max-width: 900px) {
  .content-section { padding: 56px 0; }
  .content-section p, .content-section li { max-width: 74ch; }
}

/* ---------- Supplied phone artwork beside the text ---------- */
.content-section .section-illus--transparent {
  max-width: 300px;
  width: 300px;
  height: auto;
  background: transparent;
  box-shadow: none;
  filter: drop-shadow(0 0 26px rgba(255, 122, 31, 0.20));
}
.content-section .section-illus--right { float: right; margin: 0 0 22px 36px; }
.content-section .section-illus--left { float: left; margin: 0 36px 22px 0; }
.content-section h3 + .section-illus, .content-section .section-illus + h3 { clear: none; }
.kt-clear { clear: both; }
.content-section h3 { clear: none; }
.content-section h3 + .section-illus { clear: both; }
@media (max-width: 900px) {
  .content-section .section-illus--transparent,
  .content-section .section-illus--right,
  .content-section .section-illus--left {
    float: none; display: block; width: 260px; max-width: 260px; margin: 12px auto 22px;
  }
}

/* ---------- Designed fact tables ---------- */
.kt-table-wrap {
  clear: both;
  margin: 28px 0 30px;
  border: 1px solid var(--color-border-2);
  border-radius: 14px;
  overflow: hidden;
  background: var(--color-surface);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.4);
}
.kt-table-wrap .kt-table-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.05em;
  color: var(--color-text);
  padding: 14px 20px;
  border-bottom: 1px solid var(--color-border-2);
  background: linear-gradient(90deg, rgba(255, 122, 31, 0.26), rgba(255, 122, 31, 0.03) 75%);
  margin: 0;
  max-width: none;
}
.kt-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.content-section .kt-table-wrap table {
  width: 100%;
  min-width: 600px;
  border-collapse: collapse;
  margin: 0;
  border: 0;
  display: table;
  font-size: 0.97rem;
}
.content-section .kt-table-wrap th,
.content-section .kt-table-wrap td {
  padding: 13px 18px;
  text-align: left;
  vertical-align: top;
  border: 1px solid var(--color-border);
  white-space: normal;
}
.content-section .kt-table-wrap thead th {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--kt-orange);
  background: #1a1f3d;
  border-color: var(--color-border-2);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.88rem;
}
.content-section .kt-table-wrap tbody tr:nth-child(even) td { background: rgba(255, 255, 255, 0.03); }
.content-section .kt-table-wrap tbody tr:hover td { background: rgba(255, 122, 31, 0.07); color: var(--color-text); }
.content-section .kt-table-wrap td:first-child { color: var(--color-text); font-weight: 600; }
.content-section .kt-table-wrap tfoot td {
  background: var(--color-surface-2);
  color: var(--color-accent);
  font-weight: 700;
}
.kt-table-note {
  font-size: 0.9rem;
  color: var(--color-text-faint);
  padding: 12px 20px;
  margin: 0;
  border-top: 1px solid var(--color-border);
  max-width: none !important;
}

/* ---------- Key figure rows ---------- */
.figure-rows {
  clear: both;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin: 26px 0 30px;
}
.figure-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  padding: 14px 18px;
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-accent);
  border-radius: 10px;
  background: var(--color-surface);
}
.figure-row .fr-term { font-family: var(--font-display); font-weight: 700; font-size: 1rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-accent-secondary); }
.figure-row .fr-desc { color: var(--color-text); }
@media (max-width: 600px) {
  .content-section .kt-table-wrap table { min-width: 520px; font-size: 0.92rem; }
  .content-section .kt-table-wrap th, .content-section .kt-table-wrap td { padding: 11px 12px; }
}
@media (max-width: 720px) { .figure-rows { grid-template-columns: 1fr; } }

/* ---------- Callout ---------- */
.money-note {
  clear: both;
  border: 1px solid rgba(255, 122, 31, 0.4);
  background: linear-gradient(135deg, rgba(255, 122, 31, 0.14), rgba(255, 122, 31, 0.03));
  padding: 18px 22px;
  margin: 28px 0;
  border-radius: 12px;
}
.money-note p { margin-bottom: 0.6rem; }
.money-note p:last-child { margin-bottom: 0; }

/* ---------- Numbered steps ---------- */
.kt-steps { display: flow-root; counter-reset: wcstep; list-style: none; margin: 18px 0 26px !important; padding: 0; }
.kt-steps li {
  counter-increment: wcstep;
  position: relative;
  padding: 3px 0 3px 52px;
  margin-bottom: 16px;
}
.kt-steps li::before {
  content: counter(wcstep);
  position: absolute; left: 0; top: 0;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: 1.1rem;
  color: var(--color-cta-text);
  background: var(--color-accent);
  border-radius: 8px;
  border-radius: 50%;
}

/* ---------- FAQ accordion ---------- */
.kt-faq { clear: both; margin: 18px 0 8px; }
.kt-faq details {
  border: 1px solid var(--color-border-2);
  border-radius: 12px;
  background: var(--color-surface);
  margin-bottom: 12px;
  overflow: hidden;
}
.kt-faq summary {
  cursor: pointer;
  list-style: none;
  padding: 16px 52px 16px 20px;
  position: relative;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.04rem;
  color: var(--color-text);
}
.kt-faq summary::-webkit-details-marker { display: none; }
.kt-faq summary::after {
  content: "+";
  position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
  font-family: var(--font-body); font-size: 1.4rem; color: var(--color-accent);
}
.kt-faq details[open] summary::after { content: "\2212"; }
.kt-faq details[open] summary { border-bottom: 1px solid var(--color-border); color: var(--color-accent); }
.kt-faq details p { padding: 14px 20px 16px; margin: 0; }

/* ---------- CTA banner, footer, sticky ---------- */
.cta-banner {
  background:
    radial-gradient(620px 260px at 50% 0, rgba(255, 122, 31, 0.22), transparent 70%),
    var(--color-surface-alt);
  border-top: 1px solid var(--color-border);
  text-align: center;
}
.cta-banner h2 { font-family: var(--font-display); }
.cta-banner h2::after { left: 50%; transform: translateX(-50%); }
.cta-banner p { margin-left: auto; margin-right: auto; }
.site-footer { border-top: 1px solid var(--color-border); background: var(--color-bg-2); }
.site-footer h5 { font-family: var(--font-display); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-accent); }
.site-footer .site-logo img { height: 42px; width: auto; }
.sticky-cta { border-top: 2px solid var(--color-accent); }
.sticky-cta__text span:first-child { font-family: var(--font-display); font-weight: 700; }
.sticky-cta__bonus { color: var(--color-accent); font-weight: 700; }

/* ---------- Anchor offset and compact sticky bar ---------- */
.content-section[id] { scroll-margin-top: 72px; }
@media (max-width: 600px) {
  .sticky-cta__text span:first-child { display: none; }
  .sticky-cta__bonus { font-size: 0.92rem; line-height: 1.3; }
  .sticky-cta .btn { white-space: nowrap; }
}



/* ---------- Kentastic refinements ---------- */
body {
  background:
    radial-gradient(1200px 600px at 50% -220px, rgba(255, 194, 51, 0.10), transparent 70%),
    var(--color-bg);
}
.site-header { border-bottom: 1px solid rgba(255, 122, 31, 0.45); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.6); }
.nav-main--desktop a { font-family: var(--font-body); font-weight: 500; font-size: 0.95rem; letter-spacing: 0.01em; }
.nav-main--desktop a:hover { color: var(--kt-gold); }
.hero {
  background:
    radial-gradient(640px 360px at 80% 42%, var(--color-hero-glow), transparent 70%),
    repeating-conic-gradient(from 8deg at 78% 46%, rgba(255, 220, 190, 0.07) 0deg 0.6deg, transparent 0.6deg 13deg),
    linear-gradient(180deg, var(--color-hero-gradient-start), var(--color-hero-gradient-end));
}
.hero::after { background: linear-gradient(90deg, transparent, var(--kt-orange), transparent); height: 2px; }
.hero h1 { font-weight: 400; font-size: clamp(2.1rem, 3.6vw, 3.2rem); line-height: 1.12; }
.hero h1 .kt-accent { color: var(--kt-gold); }
.hero__badge { color: var(--kt-orange); }
.hero__bonus-box { border: 1px solid var(--kt-orange); border-radius: 20px; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55), inset 0 0 0 4px rgba(255, 122, 31, 0.12); }
.hero__bonus-box .hero__bonus-label { font-family: var(--font-body); font-weight: 600; font-size: 0.78rem; letter-spacing: 0.06em; background: var(--kt-orange); color: #0c1022; border-radius: 999px; padding: 4px 14px; }
.hero__bonus-box .hero__bonus-value { font-weight: 400; }
.btn { border-radius: 999px; font-weight: 600; letter-spacing: 0.01em; }
.btn--primary { background: var(--kt-gold); color: var(--color-cta-text); box-shadow: 0 6px 22px rgba(255, 194, 51, 0.25); }
.btn--primary:hover { background: #ffd466; color: var(--color-cta-text); }
.btn--outline { border-color: rgba(255, 122, 31, 0.6); background: rgba(255, 255, 255, 0.05); }
.btn--outline:hover { border-color: var(--kt-gold); color: var(--kt-gold); }
.content-section h2 { font-weight: 400; font-size: clamp(1.7rem, 2.6vw, 2.35rem); }
.content-section h2::after { width: 160px; height: 1px; background: linear-gradient(90deg, var(--kt-orange), rgba(255, 122, 31, 0)); }
.content-section h2::before { width: 9px; height: 9px; bottom: -4px; transform: rotate(45deg); background: var(--kt-gold); border: 0; border-radius: 0; }
.content-section h3 { font-weight: 400; font-size: 1.38rem; color: var(--kt-orange); }
.content-section li::marker { color: var(--kt-gold); }
.content-section--alt { background: linear-gradient(180deg, #10142a, var(--color-bg-2)); }
.content-section .section-illus--transparent { filter: drop-shadow(0 0 30px rgba(255, 194, 51, 0.16)); }
.stats-bar__inner .stat { border: 1px solid rgba(255, 122, 31, 0.35); border-radius: 14px; background: linear-gradient(180deg, #171c38, #0e1226); }
.stats-bar__inner .stat__value { font-weight: 400; color: var(--kt-gold); }
.kt-table-wrap { border-radius: 14px; border-color: rgba(255, 122, 31, 0.5); }
.kt-table-wrap .kt-table-title { font-weight: 400; background: linear-gradient(90deg, rgba(255, 122, 31, 0.22), rgba(255, 122, 31, 0.02) 80%); }
.content-section .kt-table-wrap thead th { color: var(--kt-orange); }
.content-section .kt-table-wrap tbody tr:hover td { background: rgba(255, 194, 51, 0.06); }
.kt-steps li::before { background: var(--kt-gold); }
.kt-faq details { border-radius: 14px; border-color: rgba(255, 122, 31, 0.35); }
.kt-faq summary::after { color: var(--kt-gold); }
.kt-faq details[open] summary { color: var(--kt-gold); }
.cta-banner { background: radial-gradient(620px 260px at 50% 0, rgba(255, 194, 51, 0.16), transparent 70%), var(--color-surface-alt); }
.cta-banner h2 { font-weight: 400; }
.sticky-cta { border-top: 1px solid var(--kt-orange); }
.sticky-cta__bonus { color: var(--kt-gold); }
.site-footer h5 { font-family: var(--font-body); font-weight: 600; font-size: 0.85rem; color: var(--kt-orange); }
.hero h1, .content-section h2, .content-section h3, .cta-banner h2, .kt-table-wrap .kt-table-title, .stats-bar__inner .stat__value { text-transform: none; }
.hero__content { text-align: left; }
@media (max-width: 960px) { .hero__content { text-align: center; } }
@media (max-width: 640px) {
  .site-header .container { gap: 8px; padding-left: 16px; padding-right: 16px; }
  .site-header .site-logo img { height: 30px; }
  .site-header .site-logo { flex-shrink: 0; margin-right: 6px; }
  .nav-toggle { flex-shrink: 0; margin-left: 6px; }
  .btn--mobile-cta { font-size: 0.74rem !important; padding: 0.5rem 0.8rem !important; min-width: 0; max-width: 46vw; flex-shrink: 1; overflow: hidden; text-overflow: ellipsis; }
  .hero__badge::before { display: none; }
}
@media (max-width: 380px) {
  .btn--mobile-cta { font-size: 0.66rem !important; padding: 0.45rem 0.55rem !important; }
}

/* Kentastic heading style: Lilita One in its single weight, like the rounded KENTASTIC wordmark */
.hero h1, .content-section h2, .cta-banner h2 { font-style: normal; font-weight: 400; letter-spacing: 0.005em; }
.content-section h3, .kt-table-wrap .kt-table-title, .stats-bar__inner .stat__value, .hero__bonus-box .hero__bonus-value { font-weight: 400; }
.content-section h3 { color: var(--kt-orange); }
.btn { border-radius: 999px; }
.content-section .kt-table-wrap tbody tr:nth-child(even) td { background: rgba(124, 92, 255, 0.05); }