/* Brutal Casino site theme layer.
   Loaded AFTER the compiled /css/style.css so these rules win by source order.
   Scope: enseignesdemarcq-fr only. Matches the real brutalcasino.com design tokens:
   fonts Kanit (headings) + Hind Siliguri (body), primary #805eea, radius 10px. */

/* ---- Self-hosted brand fonts (Latin subset, zero external request) ---- */
@font-face {
  font-family: 'Kanit';
  src: url('/fonts/kanit-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Kanit';
  src: url('/fonts/kanit-800.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Hind Siliguri';
  src: url('/fonts/hind-siliguri-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Hind Siliguri';
  src: url('/fonts/hind-siliguri-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---- Apply brand fonts site-wide (override the theme's Inter default) ---- */
/* Hind Siliguri has a smaller x-height than the theme's previous Inter
   (x-height/em aspect ~0.505 vs ~0.546), so at the same nominal size and base
   (theme html: 17px, 16.5px mobile) body text read ~8% smaller in perceived
   size. font-size-adjust pins the rendered x-height to Inter's aspect (0.545)
   across the whole cascade, restoring the previous perceived size without
   touching the base or any nominal font-size. Result: the smallest text in use
   (text-sm = 0.875rem) reads at a consistent, readable minimum everywhere. */
html,
body {
  font-family: 'Hind Siliguri', system-ui, sans-serif;
  font-size-adjust: 0.545;
}
/* Headings use Kanit by design. Reset font-size-adjust so Kanit keeps its own
   natural metrics: heading size and weight stay exactly as before this fix. */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Kanit', system-ui, sans-serif;
  font-size-adjust: none;
}

/* ---- Default body text color (#eaeaea, matches the real site) ---- */
body {
  color: #eaeaea;
}

/* ---- Card / panel radius = 10px (real --site-radius:10px).
   rounded-full pills (CTA buttons) are intentionally left untouched. ---- */
.rounded-lg,
.rounded-xl,
.rounded-2xl,
.rounded-3xl {
  border-radius: 10px;
}

/* ============================================================
   Homepage hero — Brutal desktop layout, ORIGINAL purple artwork.
   No people, no cropped brand banner: the "art" is a worked CSS
   gradient (layered radial glows + fine texture). Scoped to
   .brutal-hero* / .brutal-trust* so nothing else on the site moves.
   Reuses the theme .glass card style; CTA reuses .gradient-cta.
   ============================================================ */

.brutal-hero {
  position: relative;
  isolation: isolate;
  background: #200636;
}

/* Worked purple background: three radial glows over a diagonal base.
   Bottom edge fades back to the page color (#200636) so the block
   blends into the rest of the page with no visible seam. */
.brutal-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 120% at 15% 12%, rgba(128, 94, 234, 0.40) 0%, rgba(128, 94, 234, 0) 50%),
    radial-gradient(90% 100% at 88% 6%, rgba(124, 79, 232, 0.26) 0%, rgba(124, 79, 232, 0) 48%),
    radial-gradient(120% 90% at 78% 108%, rgba(76, 41, 145, 0.52) 0%, rgba(76, 41, 145, 0) 60%),
    linear-gradient(162deg, #200636 0%, #2a0d46 42%, #35186a 66%, #200636 100%);
}

/* Fine dot texture, masked to fade at the edges → subtle depth, not a grid. */
.brutal-hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1.6px);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(120% 120% at 50% 38%, #000 55%, transparent 100%);
  mask-image: radial-gradient(120% 120% at 50% 38%, #000 55%, transparent 100%);
  opacity: 0.6;
}

.brutal-hero__inner {
  position: relative;
  z-index: 1;
  padding-top: 3rem;
  padding-bottom: 3rem;
}
@media (min-width: 768px) {
  .brutal-hero__inner {
    padding-top: 4.5rem;
    padding-bottom: 4.5rem;
  }
}

/* Single centered column over the gradient (bonus shown once, in the headline). */
.brutal-hero__copy {
  max-width: 46rem;
  margin: 0 auto;
  text-align: center;
}

/* H1 brand line (kept for SEO/schema parity, rendered as a small eyebrow). */
.brutal-hero__brand {
  font-family: 'Kanit', system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #c9b6ff;
  margin: 0 0 1rem;
}

/* Big display headline (H2, styled) — the visual hero text. */
.brutal-hero__display {
  font-family: 'Kanit', system-ui, sans-serif;
  font-weight: 800;
  line-height: 1.05;
  margin: 0 0 1.1rem;
}
.brutal-hero__display-line {
  display: block;
  color: #ffffff;
  font-size: clamp(1.9rem, 5.2vw, 3.2rem);
}
.brutal-hero__display-highlight {
  display: block;
  font-size: clamp(2.2rem, 6vw, 3.85rem);
  background: linear-gradient(92deg, #d9ccff 0%, #a78bff 45%, #805eea 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 34px rgba(128, 94, 234, 0.30);
}

.brutal-hero__subtitle {
  font-family: 'Hind Siliguri', system-ui, sans-serif;
  font-size: 1.075rem;
  line-height: 1.55;
  color: rgba(234, 234, 234, 0.86);
  max-width: 32rem;
  margin: 0 auto 1.75rem;
}

.brutal-hero__cta-wrap {
  margin-bottom: 1.2rem;
}

/* CTA pill — layered on top of .gradient-cta (#805eea → #754fe8). */
.brutal-hero-cta {
  display: inline-block;
  text-align: center;
  padding: 0.95rem 2.6rem;
  border-radius: 9999px;
  font-family: 'Kanit', system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  color: #ffffff;
  box-shadow: 0 12px 30px -8px rgba(128, 94, 234, 0.65);
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}
.brutal-hero-cta:hover {
  transform: translateY(-1px);
  opacity: 0.95;
}

.brutal-hero__fine {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.82rem;
  color: rgba(234, 234, 234, 0.58);
  align-items: center;
}

/* ---- Trust badges row, directly below the hero ---- */
.brutal-trust {
  position: relative;
  z-index: 1;
  padding: 1.75rem 0 0.75rem;
}
.brutal-trust__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 640px) {
  .brutal-trust__grid {
    grid-template-columns: 1fr 1fr;
  }
}
.brutal-badge {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.15rem 1.35rem;
  border-radius: 10px;
}
.brutal-badge__icon {
  flex-shrink: 0;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #805eea, #4c2991);
  box-shadow: 0 8px 20px -6px rgba(128, 94, 234, 0.7);
}
.brutal-badge__icon svg {
  width: 1.6rem;
  height: 1.6rem;
}
.brutal-badge__title {
  font-family: 'Kanit', system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.02rem;
  color: #ffffff;
  margin: 0 0 0.15rem;
  line-height: 1.2;
}
.brutal-badge__desc {
  font-size: 0.9rem;
  color: rgba(234, 234, 234, 0.72);
  margin: 0;
  line-height: 1.35;
}