/* =============================================================
   gamdom — design tokens
   ============================================================= */
:root {
    --bg-primary:      #070b1e;
    --bg-surface:      #0d1117;
    --bg-surface-2:    #161b22;
    --bg-card:         #1f2530;
    --border-subtle:   rgba(61, 255, 138, 0.28);

    --primary-500:     #3dff8a;
    --primary-400:     #6fffa8;
    --primary-600:     #00d168;
    --primary-900:     #0a3320;

    /* Secondary — drop shadows, hover outlines/borders, hover text color.
       --secondary-rgb is the -500 shade as a bare "r, g, b" triplet, for
       rgba(var(--secondary-rgb), <alpha>) shadows — see .btn--primary:hover.
       Kept a separate axis from --primary-* so hover/focus states read as
       a distinct accent rather than a lighter/darker copy of the button
       color. Both are admin-overridable independently — see ThemeColor.
       The design here uses a single green family rather than a second
       accent hue, so secondary is just a brighter tint of the same green. */
    --secondary-500:   #6fffa8;
    --secondary-400:   #a3ffc7;
    --secondary-600:   #3dff8a;
    --secondary-900:   #0a3320;
    --secondary-rgb:   111, 255, 168;

    --text-primary:    #ffffff;
    --text-secondary:  rgba(255, 255, 255, 0.78);
    --text-muted:      rgba(255, 255, 255, 0.5);

    --radius-md:       12px;
    --radius-lg:       20px;

    --container-max:   80%;
    --container-narrow: 80%;

    --font-display: "Rajdhani", "Segoe UI", system-ui, sans-serif;
    --font-body:    "Inter", "Segoe UI", system-ui, sans-serif;
    --font-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
}

/* =============================================================
   Reset / base
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* Keyboard-focus outline — secondary color, so it reads as a distinct
   "you are here" ring rather than a copy of the primary button color. */
:focus-visible { outline: 2px solid var(--secondary-500); outline-offset: 2px; }

body {
    margin: 0;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-family: var(--font-body);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
    font-family: var(--font-display);
    line-height: 1.2;
    margin: 0 0 0.6em;
    font-weight: 700;
}

h1 { font-size: 46px; letter-spacing: -0.46px; line-height: 110%; font-weight: 700; }
h2 { font-size: clamp(1.5rem, 3.4vw, 2.2rem); color: var(--text-primary); }
h3 { font-size: 18px; color: var(--primary-500); line-height: 110%; letter-spacing: -0.46px; font-weight: 700; }
h4 { font-size: 1rem; }

p { color: var(--text-secondary); margin: 0 0 1em; font-size: 16px; line-height: 130%; }

.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 1.25rem;
}
.container--narrow { max-width: var(--container-narrow); }
/* .container--narrow > p { max-width: 68ch; } */

.breadcrumbs { margin-bottom: 1.5rem; }
.breadcrumbs__list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    font-size: 0.85rem;
}
.breadcrumbs__item { display: flex; align-items: center; gap: 0.4rem; }
.breadcrumbs__item a { color: var(--text-secondary); }
.breadcrumbs__item a:hover { color: var(--secondary-400); }
.breadcrumbs__item [aria-current="page"] { color: var(--text-muted); }
.breadcrumbs__sep { color: var(--text-muted); }

.section { padding: clamp(2.5rem, 6vw, 5rem) 0; background: var(--bg-primary); }
.section--alt { background: var(--bg-surface); }

/* Optional wide banner an admin can add above a compact feature grid's
   own heading (PageSection::top_image) — a plain in-flow image, not a
   CSS background with text overlaid on it like the `banner` section
   type uses. */
.section__top-image {
    width: 100%;
    aspect-ratio: 21 / 6;
    object-fit: cover;
    border-radius: var(--radius-lg);
    margin-bottom: 2rem;
}

.section__eyebrow {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--primary-500);
    margin: 0 0 0.5em;
}
.section__heading { margin-bottom: 2.2rem; }
.section__intro { margin-top: -1.2rem; margin-bottom: 2.2rem; }
.section__outro { margin-top: 2.2rem; color: var(--text-secondary); }
.section--closing__lead { color: var(--text-primary); font-weight: 600; }
.section--closing__inner--box {
    background: var(--border-subtle);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: clamp(2rem, 5vw, 3rem);
}
.section__cta { margin-top: 1.75rem; }

/* =============================================================
   Content alignment — admin-editable per section (left/center/right,
   see PageSection::alignmentClass()). Applied two ways: directly to the
   eyebrow/heading/intro/outro text (safe everywhere, since those never
   sit next to a card grid or table that text-align would wrongly
   cascade into), and to the whole narrow container for section types
   that only ever hold plain text/lists (never a card-grid or data-
   table), so the entire block — including a "steps"/bullet list or the
   CTA button — shifts together rather than just its own text.
   ============================================================= */
.section--align-left .section__eyebrow,
.section--align-left .section__heading,
.section--align-left .section__intro,
.section--align-left .section__outro,
.section--align-left .container--narrow {
    text-align: left;
}
.section--align-left .section__eyebrow,
.section--align-left .section__intro,
.section--align-left .section__outro {
    margin-left: 0;
    margin-right: auto;
}

.section--align-center .section__eyebrow,
.section--align-center .section__heading,
.section--align-center .section__intro,
.section--align-center .section__outro,
.section--align-center .container--narrow {
    text-align: center;
}
.section--align-center .section__eyebrow,
.section--align-center .section__intro,
.section--align-center .section__outro {
    margin-left: auto;
    margin-right: auto;
}

.section--align-right .section__eyebrow,
.section--align-right .section__heading,
.section--align-right .section__intro,
.section--align-right .section__outro,
.section--align-right .container--narrow {
    text-align: right;
}
.section--align-right .section__eyebrow,
.section--align-right .section__intro,
.section--align-right .section__outro {
    margin-left: auto;
    margin-right: 0;
}

/* =============================================================
   Closing CTA image (PageSection::closing_image / closing_image_
   position — see @case('closing-cta') in page-section.blade.php).
   "top" is a plain in-flow image above the text; "side" puts the text
   and image in a row. Side-by-side always left-aligns the text column
   regardless of the section's own alignment setting (must come after
   the alignment rules above to win — both are equal-specificity
   selectors) since a centered/right-aligned column squeezed next to an
   image doesn't match any sensible admin-intended layout.
   ============================================================= */
.section--closing__image {
    display: block;
    border-radius: var(--radius-lg);
    object-fit: cover;
}
.section--closing__image--top {
    width: 100%;
    max-width: 480px;
    aspect-ratio: 16 / 9;
    margin: 0 auto 1.75rem;
}
.section--closing__layout--side {
    display: flex;
    align-items: center;
    gap: 2rem;
}
.section--closing__layout--side .section--closing__content { flex: 1 1 50%; min-width: 0; }
.section--closing__layout--side .section__eyebrow,
.section--closing__layout--side h2,
.section--closing__layout--side .section__intro,
.section--closing__layout--side .section__outro,
.section--closing__layout--side .section--closing__lead {
    text-align: left;
    margin-left: 0;
    margin-right: 0;
}
.section--closing__image--side {
    flex: 1 1 40%;
    width: 100%;
    max-width: 450px;
    aspect-ratio: 4 / 5;
}
@media (max-width: 720px) {
    .section--closing__layout--side { flex-direction: column; }
    .section--closing__image--side {
        /* Flex `order` moves it before .section--closing__content visually
           without touching DOM order (which stays content-then-image for
           source/reading order at all sizes) — image on top, text below. */
        order: -1;
        max-width: 100%;
        aspect-ratio: 4 / 3;
        border: 1px solid var(--border-subtle);
    }
}

/* =============================================================
   Buttons
   ============================================================= */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    padding: 0.65em 1.4em;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.95rem;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.btn--lg { padding: 0.85em 1.9em; font-size: 1.05rem; }
.btn--primary {
    background: var(--primary-500);
    color: #062012;
    font-weight: 700;
}
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(var(--secondary-rgb), 0.35); }
.btn--ghost {
    background: var(--bg-card);
    border-color: transparent;
    color: var(--text-primary);
}
.btn--ghost:hover { border-color: var(--secondary-500); color: var(--secondary-400); }

/* =============================================================
   Header / navbar
   ============================================================= */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(7, 11, 30, 0.9);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border-subtle);
}
.site-header__inner {
    max-width: 90%;
    margin: 0 auto;
    padding: 0.9rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

@media (max-width: 425px) {
    .site-header__inner {
        max-width: 100%;
    }
}

.site-header__start { display: flex; align-items: center; gap: 0.75rem; }

/* Groups the link list and the auth buttons for the desktop layout — see
   navbar.blade.php for why this, not .site-nav, is the element that has
   to stay in the header's normal flow once .site-nav collapses into a
   dropdown on mobile. */
.site-header__end { display: flex; align-items: center; gap: 2rem; }

.brand { font-family: var(--font-display); font-weight: 800; font-size: 1.9rem; letter-spacing: -0.02em; display: inline-flex; align-items: center; }
.brand__text { color: var(--text-primary); }
.brand__logo { height: 40px; width: auto; display: block; transition: height 0.15s ease; }

.nav-burger {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    cursor: pointer;
    flex-shrink: 0;
}
.nav-burger span { width: 24px; height: 2px; background: var(--text-primary); border-radius: 2px; }

.site-nav {
    display: flex;
    align-items: center;
    gap: 2rem;
}
.site-nav__list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    row-gap: 0.6rem;
    column-gap: 1.15rem;
    margin: 0;
    padding: 0;
}
.site-nav__list a {
    display: flex;
    align-items: center;
    min-height: 44px;
    color: var(--text-secondary);
    font-weight: 500;
    font-size: 0.9rem;
    white-space: nowrap;
    transition: color 0.15s ease;
}
.site-nav__list a:hover { color: var(--secondary-400); }
.site-nav__list a.is-active { color: var(--primary-500); font-weight: 700; }
.site-nav__auth { display: flex; gap: 0.75rem; }

.site-nav__dropdown { position: relative; }
.site-nav__dropdown-toggle {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    gap: 0.35rem;
    background: none;
    border: none;
    padding: 0;
    color: var(--text-secondary);
    font: inherit;
    font-weight: 500;
    font-size: 0.9rem;
    cursor: pointer;
    transition: color 0.15s ease;
}
.site-nav__dropdown-toggle:hover { color: var(--secondary-400); }
.site-nav__dropdown-toggle[aria-expanded="true"] { color: var(--primary-400); }
.site-nav__dropdown-toggle.is-active { color: var(--primary-500); font-weight: 700; }
.site-nav__dropdown-caret { transition: transform 0.15s ease; }
.site-nav__dropdown-toggle[aria-expanded="true"] .site-nav__dropdown-caret { transform: rotate(180deg); }
.site-nav__dropdown-menu { list-style: none; margin: 0; padding: 0; }
.site-nav__dropdown-menu a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0 0.75rem;
}
.site-nav__dropdown-menu a.is-active { color: var(--primary-500); font-weight: 700; background: var(--primary-900); }

@media (min-width: 1025px) {
    .site-nav__dropdown-menu {
        position: absolute;
        top: calc(100% + 0.9rem);
        right: 0;
        min-width: 170px;
        background: var(--bg-surface);
        border: 1px solid var(--border-subtle);
        border-radius: var(--radius-md);
        padding: 0.4rem;
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.15s ease, visibility 0.15s ease;
    }
    .site-nav__dropdown-toggle[aria-expanded="true"] + .site-nav__dropdown-menu {
        opacity: 1;
        visibility: visible;
    }
    .site-nav__dropdown-menu a {
        border-radius: 8px;
        white-space: nowrap;
    }
    .site-nav__dropdown-menu a:hover { background: var(--bg-surface-2); }
}

/* Below this, the burger takes over: the brand logo shrinks to make
   room, the link list (.site-nav__list) collapses into a full-width
   dropdown, and the auth buttons shrink and stay put in the header bar
   — see .site-header__end above and navbar.blade.php for why the
   buttons live outside the collapsing .site-nav rather than inside it. */
@media (max-width: 1024px) {
    .nav-burger {
        display: flex;
        width: 36px;
        height: 36px;
        gap: 4px;
    }
    .nav-burger span { width: 20px; }

    .brand__logo { height: 28px; }

    .site-header__end { gap: 0; }

    .site-nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--bg-surface);
        border-bottom: 1px solid var(--border-subtle);
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.25s ease;
    }
    .site-nav__list { flex-direction: column; gap: 0.9rem; padding: 1rem 1.25rem 1.5rem; }
    /* The sibling combinator needs to reach through .site-header__end
       (a level the checkbox-hack didn't have to cross before .site-nav__
       auth moved out of .site-nav) to still find the dropdown. */
    .nav-toggle:checked ~ .site-header__end .site-nav {
        max-height: calc(100vh - 4rem);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .site-nav__dropdown-menu {
        max-height: 0;
        overflow: hidden;
        padding-left: 1rem;
        margin-top: 0.6rem;
        transition: max-height 0.2s ease;
    }
    .site-nav__dropdown-menu li + li { margin-top: 0.7rem; }
    .site-nav__dropdown-toggle[aria-expanded="true"] + .site-nav__dropdown-menu {
        max-height: 300px;
    }

    /* Stays visible in the header bar (not part of the dropdown) at a
       reduced size to fit the narrower mobile layout. */
    .site-nav__auth { gap: 0.4rem; }
    .site-nav__auth .btn {
        padding: 0.45em 0.8em;
        font-size: 0.8rem;
    }
    .container { max-width: 100%; }
}

/* =============================================================
   Hero
   ============================================================= */
.hero {
    position: relative;
    padding: clamp(4rem, 12vw, 8rem) 0;
    overflow: hidden;
    background: var(--bg-primary);
}
.hero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}
.hero__overlay {
    position: absolute;
    inset: 0;
    /* Two layered gradients rather than one: the horizontal layer keeps the
       text-bearing left side reliably dark/legible regardless of what the
       uploaded hero image looks like there, fading out by ~75% width so
       whatever sits on the right (a graphic, logo, product shot) stays
       clearly visible — the left-text/right-graphic split the design
       calls for. The vertical layer is just the soft fade into the page
       background at the bottom edge. */
    background:
        linear-gradient(90deg, rgba(7,11,30,0.92) 0%, rgba(7,11,30,0.78) 32%, rgba(7,11,30,0.32) 58%, rgba(7,11,30,0) 76%),
        linear-gradient(180deg, rgba(7,11,30,0.25) 0%, rgba(7,11,30,0.4) 55%, var(--bg-primary) 100%);
}
.hero__content { position: relative; z-index: 1; }
.hero__eyebrow {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.61px;
    text-transform: uppercase;
    color: var(--primary-500);
    margin: 0 0 0.6em;
}
.hero__title { color: var(--text-primary); }
.hero__lead { font-size: 1.05rem; color: var(--text-secondary); }
.hero__cta { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1.5rem; }

.hero__figure { margin: 0; }
.hero__caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    margin: 0;
    padding: 0.6rem 1.25rem;
    text-align: center;
    font-size: 0.78rem;
    font-style: italic;
    color: var(--text-muted);
    background: linear-gradient(0deg, rgba(7, 11, 30, 0.85) 0%, rgba(7, 11, 30, 0) 100%);
}

/* On narrow viewports, the hero stops being a full-bleed background with
   text overlaid on it (there isn't room to keep text legible over an
   image at that size) and instead becomes two stacked blocks: the same
   single uploaded image, now a normal-flow bordered/rounded card, sitting
   above the text content, which drops to static full-width flow below it. */
@media (max-width: 640px) {
    .hero { padding: 2rem 0 2.5rem; overflow: visible; }
    .hero__figure {
        position: relative;
        margin: 0 1.25rem 1.5rem;
        aspect-ratio: 4 / 3;
        border: 1px solid var(--border-subtle);
        border-radius: var(--radius-lg);
        overflow: hidden;
    }
    /* object-fit: cover already crops to fill this box (see the base
       .hero__bg rule); the crop centers on the source image by default,
       which loses the graphic that normally sits on its right side —
       anchoring the crop to the right instead keeps that visible and
       sacrifices the (on mobile, now text-free) left side of the image. */
    .hero__bg { position: static; width: 100%; height: 100%; object-position: right center; }
    .hero__overlay { display: none; }
    .hero__content { position: static; max-width: none; padding: 0 1.25rem; }
}

/* Secondary banner-backed section */
.section--banner {
    position: relative;
    background-size: cover;
    background-position: center;
    padding: clamp(3rem, 8vw, 6rem) 0;
}
.section--banner__overlay {
    position: absolute;
    inset: 0;
    background: rgba(7, 11, 30, 0.82);
}
.section--banner__content { position: relative; z-index: 1; }
.section--banner__content h2,
.section--banner__content p { color: var(--text-primary); }
.section--banner__content p { color: #e4dcd5; }

/* =============================================================
   Card grids (feature-grid / feature-grid-compact)
   ============================================================= */
.card-grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: 1fr;
}
@media (min-width: 640px) {
    .card-grid--4 { grid-template-columns: repeat(2, 1fr); }
    .card-grid--2 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
    .card-grid--3 { grid-template-columns: repeat(3, 1fr); }
    .card-grid--4 { grid-template-columns: repeat(4, 1fr); }
}

.feature-card {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.feature-card:hover { border-color: var(--primary-400); transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35); }
.feature-card h3 { color: var(--primary-400);}
.feature-card p { margin: 0; font-size: 0.95rem; }

/* Regular (non-compact) feature-grid cards always wrap their non-image
   content in this, so an optional card image (feature-card__image) can
   sit flush against the card's own rounded top corners — clipped by the
   card's overflow:hidden — instead of the image inheriting the card's
   own padding on every side. */
.feature-card__body { padding: 1.75rem; }
.feature-card--icon .feature-card__body { padding-top: 1.5rem; }
.feature-card__image {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform 0.3s ease;
}
.feature-card--has-image:hover .feature-card__image { transform: scale(1.04); }
.feature-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--primary-900);
    font-size: 1.4rem;
    margin-bottom: 0.9rem;
}
.feature-card--compact { padding: 1.5rem; }
/* .feature-card--compact h3 { color: var(--text-primary); } */
/* .feature-card--compact p { font-size: 0.9rem; } */
.feature-card__number {
    display: block;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--primary-500);
    margin-bottom: 0.7rem;
}
.section--alt .feature-card { background: var(--bg-card); }
.feature-card__link {
    display: inline-block;
    margin-top: 0.75rem;
    color: var(--primary-400);
    font-weight: 600;
    font-size: 0.9rem;
}
.feature-card__link:hover { color: var(--secondary-500); }
.feature-card__links { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; margin-top: 0.75rem; }
.feature-card__links .feature-card__link { margin-top: 0; }

/* =============================================================
   Bullet card
   ============================================================= */
.bullet-card {
    list-style: none;
    margin: 1.5rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}
.bullet-card li {
    position: relative;
    padding: 0.5rem 1.25rem 0.5rem 2.85rem;
    color: var(--text-secondary);
    font-size: 0.96rem;
}
.bullet-card li::before {
    content: "\2713";
    position: absolute;
    left: 1rem;
    top: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(61, 255, 138, 0.25);
    border: 1px solid var(--primary-500);
    color: var(--text-primary);
    font-size: 0.6rem;
    line-height: 1;
}
.bullet-card li strong { color: var(--text-primary); }

/* The item label is always a real heading element (h3/h4/… — see
   bullet-card.blade.php's labelTag prop), reset here from a block-level
   heading down to inline so "Label: text" still reads as one flowing
   line instead of a separate heading block. */
.bullet-card__label {
    display: inline;
    margin: 0;
    /* color: var(--text-primary); */
    font-family: inherit;
    font-size: inherit;
    font-weight: 700;
}

/* Numbered-step variant — larger rows with a numbered circle badge and a
   border-bottom divider between items instead of individually bordered
   boxes, for "how to..." instructional lists (App\Models\PageSection::
   $list_style === 'steps'). */
.bullet-card--steps { counter-reset: step; gap: 0; }
.bullet-card--steps li {
    counter-increment: step;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border-subtle);
    border-radius: 0;
    padding: 1.1rem 0 1.1rem 2.85rem;
}
.bullet-card--steps li:last-child { border-bottom: none; }
.bullet-card--steps li::before {
    content: counter(step);
    top: 1.15rem;
    width: 24px;
    height: 24px;
    background: var(--bg-surface-2);
    border: 1px solid var(--primary-500);
    color: var(--primary-500);
    font-size: 0.75rem;
    font-weight: 700;
}
.bullet-card--steps .bullet-card__label {
    display: block;
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 0.3rem;
}

/* =============================================================
   Table figure wrapper
   ============================================================= */
.table-figure { margin: 0; }
.table-figure__caption {
    margin-top: 0.9rem;
    font-size: 0.85rem;
    font-style: italic;
    color: var(--text-muted);
    text-align: center;
}

/* =============================================================
   Data table (wide, many-column lookup tables). First column shrinks
   to fit its own content; remaining columns share the rest of the
   width and wrap their text. Scrolls horizontally as a fallback on
   narrow viewports once columns hit their minimum width.
   ============================================================= */
.data-table-wrap {
    overflow-x: auto;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-subtle);
}
.data-table {
    display: grid;
    grid-template-columns: minmax(130px, max-content) repeat(calc(var(--cols) - 1), minmax(160px, 1fr));
}
.data-table__row { display: contents; }
.data-table__row:nth-child(even):not(.data-table__row--head) .data-table__cell { background: var(--bg-surface-2); }
.data-table__row:nth-child(odd):not(.data-table__row--head) .data-table__cell { background: var(--bg-card); }
.data-table__row--head .data-table__cell {
    background: var(--primary-900);
    color: var(--primary-400);
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    position: sticky;
    top: 0;
}
.data-table__cell {
    padding: 0.85rem 1.1rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-subtle);
    border-right: 1px solid var(--border-subtle);
}
.data-table__cell:last-child { border-right: none; }
.data-table__row:last-child .data-table__cell { border-bottom: none; }
.data-table__cell--label { color: var(--text-primary); font-weight: 600; }

/* =============================================================
   Comparison table (a `comparison` section — paired "your platform" vs
   "typical platform" boxes per row, e.g. "Compare Gamdom Register with
   Other Signup Systems")
   ============================================================= */
.comparison-table {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    margin-top: 1.5rem;
}
.comparison-row {
    background: var(--bg-surface-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 1.1rem;
}
.comparison-row__label {
    margin: 0 0 0.7rem;
    color: var(--primary-400);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 16px;
    line-height: 110%;
    letter-spacing: -0.46px;
}
.comparison-row__cells {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}
@media (min-width: 640px) {
    .comparison-row__cells { grid-template-columns: 1fr 1fr; }
}
.comparison-cell {
    border-radius: var(--radius-md);
    padding: 0.9rem 1rem;
    border: 1px solid var(--border-subtle);
}
.comparison-cell p { margin: 0; font-size: 14px; line-height: 120%; }
.comparison-cell--ours {
    background: rgba(61, 255, 138, 0.08);
    border-color: rgba(61, 255, 138, 0.4);
}
.comparison-cell--ours .comparison-cell__heading { color: var(--primary-500); }
.comparison-cell--ours p:last-child { color: var(--text-primary); }
.comparison-cell--theirs {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.12);
}
.comparison-cell--theirs .comparison-cell__heading { color: var(--text-secondary); }
.comparison-cell__heading {
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.85px;
    text-transform: uppercase;
    margin-bottom: 0.35rem !important;
}

/* =============================================================
   FAQ accordion
   ============================================================= */
.faq-list {
    display: flex;
    flex-direction: column;
    margin-top: 1.5rem;
}
.faq-item {
    border-bottom: 1px solid var(--border-subtle);
}
.faq-item:last-child { border-bottom: none; }
.faq-item__question {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 0;
    cursor: pointer;
    color: var(--text-primary);
    font-weight: 700;
    font-size: 1.02rem;
    transition: color 0.15s ease;
}
.faq-item__question::-webkit-details-marker { display: none; }
.faq-item[open] .faq-item__question { color: var(--primary-500); }
.faq-item__icon {
    position: relative;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border: 1px solid var(--primary-400);
    border-radius: 50%;
    transition: transform 0.2s ease, border-color 0.2s ease;
}
.faq-item__icon::before,
.faq-item__icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background: var(--primary-500);
    transform: translate(-50%, -50%);
}
.faq-item__icon::before { width: 10px; height: 2px; }
.faq-item__icon::after { width: 2px; height: 10px; }
.faq-item[open] .faq-item__icon {
    transform: rotate(45deg);
    border-color: var(--border-subtle);
}
.faq-item[open] .faq-item__icon::before,
.faq-item[open] .faq-item__icon::after {
    background: var(--text-muted);
}
.faq-item__answer { padding: 0 0 1.3rem; }
.faq-item__answer p { margin: 0; font-size: 14px; line-height: 130%; }

/* =============================================================
   Accordion list (long per-item content — intro + optional bullets —
   collapsed by default past the first item, instead of a cramped grid)
   ============================================================= */
.accordion-group {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1.5rem;
}
.accordion-item {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 0;
    overflow: hidden;
}
.accordion-item__question {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.4rem;
    cursor: pointer;
}
.accordion-item__question::-webkit-details-marker { display: none; }
.accordion-item__question h3 {
    margin: 0;
    color: var(--text-primary);
    font-size: 1.02rem;
}
.accordion-item__icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 1px solid var(--primary-400);
    border-radius: 50%;
    color: var(--primary-500);
    transition: transform 0.2s ease, border-color 0.2s ease;
}
.accordion-item[open] .accordion-item__icon { transform: rotate(180deg); border-color: var(--border-subtle); }
.accordion-item__answer { padding: 0 1.4rem 1.4rem; }
.accordion-item__answer p { font-size: 0.95rem; }
.accordion-item__answer .bullet-card,
.accordion-item__answer .card-grid,
.accordion-item__answer .data-table-wrap { margin-top: 1rem; }
.accordion-item__answer .feature-card__body { padding: 1.25rem; }

/* =============================================================
   Section group (a `group` section — bundles several plain sections
   under one optional heading, see @case('group') in page-section.blade.
   php). Unlike the accordion above, children aren't collapsed — just
   stacked with generous spacing between each one's own heading/content.
   ============================================================= */
.section-group {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    margin-top: 1.5rem;
}

.section-group h3 {
    font-size: 24px;
}

/* Admin-chosen arrangement (PageSection::group_layout) — side by side
   instead of the default vertical stack. Each child keeps its natural
   width down to 280px before wrapping onto the next line, so this stays
   usable on narrow screens without a separate mobile override. */
.section-group--horizontal {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
}
.section-group--horizontal .section-group__item {
    flex: 1 1 280px;
    min-width: 0;
}

/* =============================================================
   Footer
   ============================================================= */
.site-footer {
    background: var(--bg-surface);
    border-top: 1px solid var(--border-subtle);
    padding: 3.5rem 0 1.5rem;
}
.site-footer__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    padding-bottom: 2.25rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-subtle);
}
@media (min-width: 640px) {
    .site-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) {
    .site-footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2rem; }
}

.brand-badge {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.2rem;
    letter-spacing: -0.02em;
}
.site-footer__tagline {
    margin: 0.9rem 0 0;
    max-width: 320px;
    font-size: 0.88rem;
    color: var(--text-secondary);
}
.site-footer__badges {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1.1rem 0 0;
    padding: 0;
}
.footer-badge {
    border: 1px solid var(--primary-900);
    border-radius: var(--radius-md);
    padding: 0.3rem 0.6rem;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-secondary);
}

.site-footer__col-heading {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.82rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-primary);
    margin: 0 0 1rem;
}
.site-footer__col ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.site-footer__col a { color: var(--text-secondary); font-size: 0.9rem; }
.site-footer__col a:hover { color: var(--secondary-400); }

.site-footer__notice {
    max-width: 760px;
    /* margin: 0 auto 1.25rem; */
    /* text-align: center; */
}
.site-footer__notice p { font-size: 0.8rem; color: var(--text-muted); margin: 0; line-height: 1.7; }

.site-footer__bottom { text-align: center; }
.site-footer__bottom p { font-size: 0.8rem; color: var(--text-muted); margin: 0; }
.site-footer__bottom p + p { margin-top: 0.4rem; }
.site-footer__bottom a { color: var(--text-secondary); text-decoration: underline; }
.site-footer__bottom a:hover { color: var(--secondary-400); }

.scroll-to-top {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    z-index: 90;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: none;
    border-radius: 50%;
    background: var(--primary-500);
    color: #ffffff;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease, background 0.15s ease;
}
.scroll-to-top:hover { background: var(--primary-600); }
.scroll-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* =============================================================
   Cookie / notification consent banner
   ============================================================= */
.cookie-consent {
    position: fixed;
    left: 50%;
    bottom: 1.25rem;
    z-index: 95;
    width: calc(100% - 2rem);
    max-width: 26rem;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, 130%);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
}
.cookie-consent.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0);
}
.cookie-consent__panel {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    padding: 1.25rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}
.cookie-consent__title {
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.35rem;
}
.cookie-consent__text {
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.5;
}
.cookie-consent__actions { display: flex; gap: 0.75rem; }
.cookie-consent__actions .btn { flex: 1; }

/* =============================================================
   Foreground push-notification toast
   ============================================================= */
.fcm-toast-container {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    z-index: 200;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    width: 28rem;
    max-width: calc(100vw - 2rem);
}
.fcm-toast {
    position: relative;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-left: 3px solid var(--primary-500);
    border-radius: var(--radius-md);
    padding: 0.85rem 2.1rem 0.85rem 1rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    animation: fcm-toast-in 0.2s ease;
}
.fcm-toast__close {
    position: absolute;
    top: 0.4rem;
    right: 0.5rem;
    width: 1.5rem;
    height: 1.5rem;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    border-radius: var(--radius-md);
}
.fcm-toast__close:hover {
    color: var(--text-primary);
    background: var(--bg-surface-2);
}
.fcm-toast__row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.fcm-toast__image {
    width: 3.5rem;
    height: 3.5rem;
    object-fit: cover;
    border-radius: var(--radius-md);
    flex-shrink: 0;
}
.fcm-toast__content {
    flex: 1;
    min-width: 0;
}
.fcm-toast__header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.2rem;
}
.fcm-toast__icon {
    width: 1rem;
    height: 1rem;
    border-radius: var(--radius-md);
    object-fit: cover;
    flex-shrink: 0;
}
.fcm-toast__title {
    color: var(--text-primary);
    font-weight: 700;
    font-size: 0.9rem;
    line-height: 1;
    margin: 0;
}
.fcm-toast__body {
    color: var(--text-secondary);
    font-size: 0.85rem;
    line-height: 1.4;
    text-align: justify;
}
@keyframes fcm-toast-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 425px) {
    h1 { font-size: 32px; text-align: center; }
    h2 { font-size: 24px; }
    .section-group h3 { font-size: 20px; }
    p { font-size: 14px; }
    .bullet-card li { font-size: 12px; }
    .comparison-cell p { font-size: 12px; }
    .faq-item__answer p { font-size: 12px; }
    .hero__eyebrow { text-align: center; }
    .hero__lead { font-size: 16px; text-align: center; }
    .feature-card p { font-size: 12px; }
    .hero__cta { justify-content: center; }
    .btn { font-size: 13px; }
}

/* =============================================================
   Legal pages — Privacy Policy, Terms & Conditions, Disclaimer,
   Cookie Policy, Affiliate Disclosure, Responsible Gambling. Each
   section of the admin's rich-text content becomes its own boxed card
   (LegalPage::parsedContent() splits on <h2>) — the same per-section
   card layout as the reference design, re-themed to this site's own
   dark palette instead of copying its light one.
   ============================================================= */
.legal-page__header {
    background: linear-gradient(135deg, var(--bg-surface) 0%, var(--bg-surface-2) 65%, var(--bg-card) 100%);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: clamp(2rem, 5vw, 3.5rem);
    text-align: center;
    margin-bottom: 1.5rem;
}
.legal-page__header h1 { margin-bottom: 0.75rem; }
.legal-page__header p { max-width: 640px; margin-left: auto; margin-right: auto; }

.legal-page__updated {
    display: inline-flex;
    padding: 0.4em 0.9em;
    border: 1px solid var(--border-subtle);
    border-radius: 999px;
    color: var(--text-muted);
    font-size: 13px;
    margin-bottom: 1.5rem;
}

.legal-page__section {
    background: var(--bg-surface-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: clamp(1.5rem, 4vw, 2.5rem);
    margin-bottom: 1.5rem;
}
.legal-page__section:last-child { margin-bottom: 0; }
.legal-page__section h2 { font-size: 24px; margin-bottom: 0.75rem; }
.legal-page__section ul { padding-left: 1.25rem; margin: 0 0 1em; color: var(--text-secondary); }
.legal-page__section li { margin-bottom: 0.4em; }
.legal-page__section p:last-child,
.legal-page__section ul:last-child { margin-bottom: 0; }

.legal-page__section--contact {
    background: linear-gradient(135deg, rgba(var(--secondary-rgb), 0.16), rgba(var(--secondary-rgb), 0.04));
    border-color: var(--primary-500);
}
.legal-page__section--contact h2 { color: var(--primary-500); }