/* ============================================================================
   apps/home/static/home/css/index.css
   Red Tape Reduction Tracker — landing page.
   ----------------------------------------------------------------------------
   Visual language: institutional / editorial. Navy-and-paper base with a
   single oxblood red accent carrying the "red tape" motif. Reads as a
   policy-and-data product rather than a marketing page.

   The hero is the exception to "paper": a dark navy stage cut by a diagonal
   red slash, with a cluster of illustrative dashboard widgets overlapping
   the slash. On dark surfaces the oxblood accent is too dim to read, so a
   brighter tint (--accent-bright / --accent-soft) is used there ONLY.

   SCOPING STRATEGY — read this before editing selectors:

   1. Page-content classes (.hero, .card, .section, .grid, .about, .btn,
      .eyebrow, .insight, etc.) are all scoped under `body.home-page` — the
      body class this template sets. Shared site stylesheets loaded by
      base.html before this file are NOT scoped that way, so a
      `.home-page .card { … }` rule safely wins over a global `.card` rule
      without disturbing that class anywhere else in the product.

   2. The site header / nav is NOT styled in this file. The only thing taken
      from it is the --nav-height token (section 1), which the sticky About
      sidebar uses to sit just below the (sticky) header. If the real header
      height differs from 76px, change that one token.

   3. Scroll-reveal is gated on `html.js` (added by an inline script in
      extra_head). If JS never runs, or the deferred bundle fails to load,
      content stays visible instead of sitting at opacity: 0 forever. The
      dashboard widgets' entrance states are gated the same way.
   ============================================================================ */


/* ============================================================================
   1. TOKENS
   ----------------------------------------------------------------------------
   Single source of truth. Change a value here and the whole page follows.
   ============================================================================ */
body.home-page {
    /* Brand — navy / blue */
    --primary:        #1a56db;
    --primary-dark:   #0f2a52;
    --primary-deep:   #071b34;
    --primary-tint:   #e8eefc;
    --primary-tint-2: #eef1f6;

    /* Red-tape accent — used sparingly, never decoratively */
    --accent:         #991b1b;
    --accent-deep:    #7f1d1d;
    --accent-tint:    rgba(153, 27, 27, 0.08);

    /* Accent tints for DARK surfaces only (hero). Oxblood is too dim on navy. */
    --accent-bright:  #dc2626;
    --accent-soft:    #fca5a5;

    /* Success / operational state */
    --success:        #16a34a;
    --success-tint:   rgba(22, 163, 74, 0.10);

    /* Gold — dark-surface accent only */
    --gold:           #eab676;

    /* Surfaces */
    --background:     #f5f7fa;
    --surface:        #ffffff;
    --surface-tint:   #eef1f6;

    /* Text */
    --text:           #101828;
    --text-strong:    #0f2a52;
    --muted:          #64748b;
    --muted-soft:     #94a3b8;
    --text-on-dark:   #cbd5e1;
    --muted-on-dark:  #9fb3d1;

    /* Borders */
    --border:         #e4e7ec;
    --border-strong:  #c7d2e0;

    /* Radii — modest by design */
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;

    /* Shadows */
    --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.04);
    --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05),
                 0 4px 12px rgba(16, 24, 40, 0.05);
    --shadow-md: 0 10px 28px rgba(16, 24, 40, 0.10);

    /* Layout */
    --nav-height: 76px;
    --container:  1180px;

    /* Motion */
    --ease: cubic-bezier(0.16, 1, 0.3, 1);

    background: var(--background);
    color: var(--text);
}


/* ============================================================================
   2. BASE / RESET
   ============================================================================ */
.home-page *,
.home-page *::before,
.home-page *::after { box-sizing: border-box; }

.home-page {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
    font-size: 15.5px;
    line-height: 1.62;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.home-page h1,
.home-page h2,
.home-page h3,
.home-page h4,
.home-page p,
.home-page ol,
.home-page ul,
.home-page dl,
.home-page dd { margin: 0; }

.home-page ul,
.home-page ol {
    padding: 0;
    list-style: none;
}

.home-page img,
.home-page svg { display: block; max-width: 100%; }

.home-page a {
    color: inherit;
    text-decoration: none;
    transition: color 160ms ease;
}

.home-page button {
    font: inherit;
    cursor: pointer;
}

.home-page :focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: 4px;
}

.home-page .container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 24px;
}

.home-page .skip-link {
    position: absolute;
    top: -3rem;
    left: 0;
    z-index: 1000;
    padding: 10px 16px;
    background: var(--primary-deep);
    color: #ffffff;
    font-weight: 700;
    font-size: 0.85rem;
    transition: top 150ms ease;
}
.home-page .skip-link:focus { top: 0; }


/* ============================================================================
   3. TYPOGRAPHY PRIMITIVES
   ============================================================================ */
.home-page .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--primary);
}
.home-page .eyebrow__dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 4px rgba(26, 86, 219, 0.12);
}
.home-page .eyebrow--gold { color: var(--gold); }
.home-page .eyebrow--gold .eyebrow__dot {
    box-shadow: 0 0 0 4px rgba(234, 182, 118, 0.18);
}

.home-page .section__title {
    font-size: clamp(1.6rem, 2.8vw, 2.1rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: var(--text-strong);
    margin: 0 0 14px;
}
.home-page .section__title--light { color: #ffffff; }

.home-page .section__subtitle {
    font-size: 1.06rem;
    font-weight: 600;
    color: var(--primary);
    margin: 0 0 10px;
}

.home-page .section__lead {
    font-size: 1.02rem;
    line-height: 1.68;
    color: var(--muted);
    max-width: 62ch;
}
.home-page .section__lead--light { color: var(--muted-on-dark); }


/* ============================================================================
   4. BUTTONS
   ============================================================================ */
.home-page .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 26px;
    border-radius: var(--radius-md);
    font-size: 0.94rem;
    font-weight: 700;
    letter-spacing: -0.005em;
    border: 1px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: background 180ms ease, border-color 180ms ease,
                color 180ms ease, transform 180ms ease,
                box-shadow 180ms ease;
}
.home-page .btn svg { width: 16px; height: 16px; flex-shrink: 0; }

.home-page .btn--sm { padding: 9px 18px; font-size: 0.85rem; }
.home-page .btn--lg { padding: 15px 30px; font-size: 1rem; }

.home-page .btn--primary {
    background: var(--primary);
    color: #ffffff;
    box-shadow: 0 10px 24px rgba(26, 86, 219, 0.28);
}
.home-page .btn--primary:hover {
    background: #143f9e;
    transform: translateY(-2px);
    color: #ffffff;
}

.home-page .btn--ghost {
    background: #ffffff;
    color: var(--primary-dark);
    border-color: var(--border);
}
.home-page .btn--ghost:hover {
    border-color: var(--primary);
    color: var(--primary);
    transform: translateY(-2px);
}

.home-page .btn--outline {
    background: transparent;
    color: var(--primary-dark);
    border-color: var(--border-strong);
}
.home-page .btn--outline:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.home-page .btn--light {
    background: #ffffff;
    color: var(--primary-dark);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
}
.home-page .btn--light:hover {
    background: var(--primary-tint-2);
    transform: translateY(-2px);
}

.home-page .btn--ghost-light {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.35);
}
.home-page .btn--ghost-light:hover {
    background: rgba(255, 255, 255, 0.16);
    border-color: #ffffff;
    transform: translateY(-2px);
    color: #ffffff;
}


/* ============================================================================
   5. HEADER / NAVIGATION — intentionally not styled here
   ----------------------------------------------------------------------------
   The header and nav are styled elsewhere. The only thing this file takes
   from them is the --nav-height token (section 1), which the sticky About
   sidebar uses to sit just below the (sticky, in-flow) header.
   ============================================================================ */


/* ============================================================================
   6. HERO — dark navy stage, diagonal red slash, dashboard preview
   ----------------------------------------------------------------------------
   Layers, back to front:
     .hero__navy   navy stage, clipped so its bottom edge runs on a diagonal
     .hero__slash  bright red band hugging that diagonal edge
     .hero__inner  content + widget cluster (z-index above both)
   Below the diagonal the hero's own background is the page background, so the
   light triangle flows seamlessly into the .entry section.

   --slash-h is how far the diagonal rises across the full width; --slash-t is
   the thickness of the red band.
   ============================================================================ */
.home-page .hero {
    --slash-h: clamp(36px, 6.5vw, 112px);
    --slash-t: 8px;

    position: relative;
    overflow: hidden;
    background: var(--background);
    /* the header is in normal flow (sticky), so the hero simply starts below it */
    padding: 56px 0 calc(var(--slash-h) + var(--slash-t) + 28px);
}

.home-page .hero__navy {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background: linear-gradient(165deg, #10305f 0%, var(--primary-dark) 38%, var(--primary-deep) 100%);
    clip-path: polygon(
        0 0,
        100% 0,
        100% calc(100% - var(--slash-h) - var(--slash-t)),
        0 calc(100% - var(--slash-t))
    );
}
/* Faint oversized circles — texture, not content */
.home-page .hero__navy::before,
.home-page .hero__navy::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.03);
}
.home-page .hero__navy::before {
    width: 760px;
    height: 760px;
    left: -280px;
    top: -360px;
}
.home-page .hero__navy::after {
    width: 1000px;
    height: 1000px;
    right: -430px;
    bottom: -560px;
}

.home-page .hero__slash {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    height: calc(var(--slash-h) + var(--slash-t));
    background: var(--accent-bright);
    clip-path: polygon(
        0 calc(100% - var(--slash-t)),
        100% 0,
        100% var(--slash-t),
        0 100%
    );
}

.home-page .hero__inner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    align-items: end;
    gap: 40px;
}

/* --- Left: content --- */
.home-page .hero__content { max-width: none; }

.home-page .hero .eyebrow { color: var(--accent-soft); }
.home-page .hero .eyebrow__dot {
    background: var(--accent-bright);
    box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.24);
}

.home-page .hero__title {
    font-size: clamp(1.9rem, 3.3vw, 2.75rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.12;
    color: #ffffff;
    margin: 0 0 22px;
    max-width: 17ch;
    text-wrap: balance;
}
/* Marker-style highlight — survives line wraps, unlike an underline */
.home-page .hero__title-accent {
    color: #ffffff;
    padding: 0 0.08em;
    background-image: linear-gradient(
        transparent 64%,
        rgba(220, 38, 38, 0.7) 64%,
        rgba(220, 38, 38, 0.7) 90%,
        transparent 90%
    );
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

.home-page .hero__lead {
    font-size: 1.04rem;
    line-height: 1.7;
    color: var(--muted-on-dark);
    max-width: 50ch;
    margin: 0 0 32px;
}

.home-page .hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.home-page .hero .btn--primary {
    background: var(--accent-bright);
    box-shadow: 0 12px 28px rgba(220, 38, 38, 0.34);
}
.home-page .hero .btn--primary:hover { background: #b91c1c; }

/* --- Right: dashboard cluster --- */
.home-page .hero__visual {
    --overhang: 70px;
    position: relative;
    min-width: 0;
    /* Bottom-aligned with the copy, then pulled down so the cluster crosses the
       slash: 46px plus about half the diagonal's rise, because the diagonal sits
       that much lower under the cluster's left edge than at the far right. */
    margin-bottom: calc(-1 * (46px + var(--slash-h) * 0.52));

    /* Creative tilt — leans the whole cluster (panel + floating card) left by
       a couple of degrees so it reads as a tilted object rather than a flat
       screenshot. The origin sits low and slightly right, so the rotation
       pivots near the diagonal slash and the top corner swings out toward the
       copy. Compose-safe: the reveal animation on .hero__stage uses
       `transform`, the mouse parallax on .dash__float uses `translate:` —
       both live in this rotated coordinate space without conflict. */
    transform: rotate(-2deg);
    transform-origin: 55% 100%;
}
.home-page .hero__caption {
    margin: 0 0 12px var(--overhang);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(159, 179, 209, 0.85);
}

.home-page .hero__stage {
    --dash-pad: 22px;
    --dash-gap: 16px;
    --r1: clamp(96px, 8.4vw, 124px);
    --r2: clamp(130px, 11vw, 168px);
    --r3: var(--r1);
    /* how far the panel runs past the column toward the viewport's right edge */
    --bleed: min(140px, max(24px, calc((100vw - var(--container)) / 2 + 24px)));

    position: relative;
    margin-left: var(--overhang);
    width: calc(100% - var(--overhang) + var(--bleed));
}

.home-page .dash {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: var(--r1) var(--r2) var(--r3);
    gap: var(--dash-gap) 22px;
    padding: var(--dash-pad);
    background: #ffffff;
    border-radius: 18px;
    box-shadow: 0 30px 70px rgba(3, 12, 28, 0.45),
                0 4px 14px rgba(3, 12, 28, 0.18);
    transition: translate 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.home-page .dash__w {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}
.home-page .dash__w--gap { visibility: hidden; }
.home-page .dash__label {
    flex-shrink: 0;
    margin-bottom: 6px;
    font-size: 0.58rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted-soft);
}
.home-page .dash__w svg {
    display: block;
    flex: 1 1 0%;
    width: 100%;
    height: 0;
    min-height: 0;
}

/* Floating card — overlaps the panel's left edge */
@keyframes home-float-bob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}
.home-page .dash__float {
    position: absolute;
    left: calc(-1 * var(--overhang));
    top: calc(var(--dash-pad) + var(--r1) + var(--dash-gap) - 8px);
    height: calc(var(--r2) + 16px);
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 22px 50px rgba(3, 12, 28, 0.38),
                0 2px 8px rgba(3, 12, 28, 0.12);
    animation: home-float-bob 6s ease-in-out infinite;
    /* the individual `translate` property is driven by the mouse-depth
       effect in index.js; `transform` belongs to the bob animation above */
    translate: var(--fx, 0px) var(--fy, 0px);
    transition: translate 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.home-page .dash__ring {
    flex-shrink: 0;
    height: 100%;
    width: auto;
    aspect-ratio: 1;
}
.home-page .dash__legend {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-right: 6px;
}
.home-page .dash__legend dt {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted-soft);
}
.home-page .dash__legend dd {
    margin-top: 2px;
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1;
    color: var(--border-strong);
}
.home-page .dash__dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
}
.home-page .dash__dot--blue { background: #1a56db; }
.home-page .dash__dot--red  { background: #dc2626; }

/* --- Widget entrance choreography ------------------------------------------
   Every "hidden" starting state is gated on html.js AND on the stage not yet
   being .is-visible, so without JS the widgets are simply fully drawn.
   Delays start after the stage itself has slid in. */
.home-page .dash .bar           { transform-box: fill-box; transition: transform 800ms var(--ease) calc(var(--i, 0) * 70ms + 560ms); }
.home-page .dash .bar--v        { transform-origin: 50% 100%; }
.home-page .dash .bar--h        { transform-origin: 0 50%; }
.home-page .dash .wipe          { transform-box: fill-box; transform-origin: 0 50%; transition: transform 1300ms var(--ease) 700ms; }
.home-page .dash .radar         { transform-box: fill-box; transform-origin: 50% 50%; transition: transform 900ms var(--ease) 620ms, opacity 600ms ease 620ms; }
.home-page .dash .radar--blue   { transition-delay: 760ms; }
.home-page .dash .bub,
.home-page .dash .dot           { transform-box: fill-box; transform-origin: 50% 50%; transition: transform 700ms var(--ease) calc(var(--i, 0) * 80ms + 700ms); }
.home-page .hero__stage .ring   { stroke-dasharray: var(--arc, 60) 100; transition: stroke-dasharray 1400ms var(--ease) 620ms; }

html.js .home-page .hero__stage:not(.is-visible) .bar--v  { transform: scaleY(0); }
html.js .home-page .hero__stage:not(.is-visible) .bar--h  { transform: scaleX(0); }
html.js .home-page .hero__stage:not(.is-visible) .wipe    { transform: scaleX(0); }
html.js .home-page .hero__stage:not(.is-visible) .radar   { transform: scale(0.15); opacity: 0; }
html.js .home-page .hero__stage:not(.is-visible) .bub,
html.js .home-page .hero__stage:not(.is-visible) .dot     { transform: scale(0); }
html.js .home-page .hero__stage:not(.is-visible) .ring    { stroke-dasharray: 0 100; }

/* Quiet "live" ping on a few map pins */
.home-page .dash__ping {
    fill-opacity: 0.3;
    transform-box: fill-box;
    transform-origin: center;
    animation: home-geo-pulse 2.6s ease-out infinite;
    animation-delay: calc(var(--i, 0) * 500ms);
}

/* --- Responsive: hero --- */
@media (max-width: 1320px) {
    /* not enough room beside the ring for the legend without covering the map */
    .home-page .dash__legend { display: none; }
}

@media (max-width: 1080px) {
    .home-page .hero__inner {
        grid-template-columns: 1fr;
        gap: 44px;
    }
    .home-page .hero__title { max-width: none; }
    .home-page .hero__lead { max-width: 56ch; }
    .home-page .hero__visual {
        --overhang: 56px;
        margin-bottom: -28px;
        /* reduce the tilt once the cluster is full-width — a strong angle
           reads as broken layout rather than intent at this size */
        transform: rotate(-1deg);
    }
    .home-page .hero__stage { --bleed: 24px; }
}

@media (max-width: 720px) {
    .home-page .hero {
        padding-top: 36px;
    }
    .home-page .hero__visual {
        --overhang: 30px;
        /* drop the tilt entirely on phones */
        transform: none;
    }
    .home-page .dash {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--dash-gap) 18px;
    }
    /* keep the 2 x 3 grid tidy: drop the three least legible widgets */
    .home-page .dash__w--donut,
    .home-page .dash__w--dots,
    .home-page .dash__w--bubbles { display: none; }
}

@media (max-width: 560px) {
    .home-page .hero__actions { flex-direction: column; }
    .home-page .hero__actions .btn { width: 100%; }
}


/* ============================================================================
   6b. ENTRY POINTS — four numbered cards on the light area under the slash
   ============================================================================ */
.home-page .entry {
    padding: 12px 0 0;
    background: var(--background);
}
.home-page .hero__cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.home-page .hero__card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 26px 22px 28px;
    background: var(--surface);
    border-right: 1px solid var(--border);
    transition: background 180ms ease;
}
.home-page .hero__card:last-child { border-right: 0; }
.home-page .hero__card:hover { background: var(--primary-tint-2); }
.home-page .hero__card:hover .hero__card-title { color: var(--accent); }
.home-page .hero__card:hover .hero__card-link { color: var(--accent); }
.home-page .hero__card:hover .hero__card-link svg { transform: translateX(3px); }

.home-page .hero__card-num {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: var(--muted-soft);
}
.home-page .hero__card-title {
    font-size: 1.06rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--text-strong);
    line-height: 1.25;
    transition: color 180ms ease;
}
.home-page .hero__card-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--muted);
    transition: color 180ms ease;
}
.home-page .hero__card-link svg {
    width: 13px;
    height: 13px;
    transition: transform 200ms var(--ease);
}

/* Accent variant — the "Insights" card */
.home-page .hero__card--accent {
    background: var(--accent);
    color: #ffffff;
}
.home-page .hero__card--accent:hover { background: var(--accent-deep); }
.home-page .hero__card--accent .hero__card-num { color: rgba(255, 255, 255, 0.72); }
.home-page .hero__card--accent .hero__card-title { color: #ffffff; }
.home-page .hero__card--accent:hover .hero__card-title { color: var(--gold); }
.home-page .hero__card--accent .hero__card-link { color: rgba(255, 255, 255, 0.88); }
.home-page .hero__card--accent:hover .hero__card-link { color: #ffffff; }

@media (max-width: 860px) {
    .home-page .hero__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .home-page .hero__card:nth-child(2) { border-right: 0; }
    .home-page .hero__card:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
}
@media (max-width: 460px) {
    .home-page .hero__cards { grid-template-columns: 1fr; }
    .home-page .hero__card {
        border-right: 0;
        border-bottom: 1px solid var(--border);
        padding: 22px 20px 24px;
    }
    .home-page .hero__card:last-child { border-bottom: 0; }
}


/* ============================================================================
   7. SECTION SHELLS
   ============================================================================ */
.home-page .section {
    --section-pad: clamp(64px, 8vw, 92px);
    position: relative;
    padding: var(--section-pad) 0;
    /* explicit (same colour the page already shows through): the wave dividers
       in 17b shape each section's OWN background, so it has to have one */
    background: var(--background);
}
.home-page .section--tinted { background: var(--surface-tint); }
.home-page .section--dark {
    background: var(--primary-deep);
    color: var(--text-on-dark);
}
.home-page .section--dark .section__title { color: #ffffff; }
.home-page .section--dark .section__lead { color: var(--muted-on-dark); }
.home-page .section--dark .eyebrow { color: var(--gold); }
.home-page .section--dark .eyebrow__dot {
    box-shadow: 0 0 0 4px rgba(234, 182, 118, 0.18);
}

.home-page .section__head {
    max-width: 720px;
    margin: 0 0 clamp(32px, 4vw, 48px);
}
.home-page .section__head--center {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
.home-page .section__head--center .eyebrow { justify-content: center; }
.home-page .section__head--center .section__lead { margin-inline: auto; }

@media (max-width: 640px) {
    .home-page .section { --section-pad: 64px; }
    .home-page .container { padding: 0 20px; }
}


/* ============================================================================
   8. GRIDS
   ============================================================================ */
.home-page .grid {
    display: grid;
    gap: 20px;
}
.home-page .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.home-page .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 980px) {
    .home-page .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
    .home-page .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .home-page .grid--3,
    .home-page .grid--4 { grid-template-columns: 1fr; }
}


/* ============================================================================
   9. ABOUT
   ============================================================================ */
.home-page .about {
    display: grid;
    grid-template-columns: 1.3fr 0.7fr;
    gap: clamp(32px, 5vw, 56px);
    align-items: start;
}
.home-page .about__blocks {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 32px;
}
.home-page .about__block {
    padding-top: 16px;
    border-top: 1px solid var(--border);
}
.home-page .about__block-title {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent);
    margin: 0 0 10px;
}
.home-page .about__block p {
    font-size: 0.94rem;
    line-height: 1.72;
    color: var(--muted);
}

.home-page .about__aside {
    position: sticky;
    top: calc(var(--nav-height) + 24px);
}
.home-page .chain {
    padding: 26px 24px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs);
}
.home-page .chain__list {
    display: flex;
    flex-direction: column;
    gap: 18px;
    position: relative;
}
.home-page .chain__list::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: var(--border);
}
.home-page .chain__item {
    position: relative;
    padding-left: 26px;
    font-weight: 700;
    font-size: 0.94rem;
    color: var(--primary-dark);
}
.home-page .chain__item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 3px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 0 4px rgba(26, 86, 219, 0.12);
}
.home-page .chain__item--final::before {
    background: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-tint);
}
.home-page .chain__item--final .chain__label { color: var(--accent); }

@media (max-width: 900px) {
    .home-page .about { grid-template-columns: 1fr; }
    .home-page .about__aside { position: static; }
}
@media (max-width: 600px) {
    .home-page .about__blocks { grid-template-columns: 1fr; }
}


/* ============================================================================
   10. CARDS (generic)
   ============================================================================ */
.home-page .card {
    display: flex;
    flex-direction: column;
    padding: 28px 24px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs);
    transition: transform 220ms var(--ease), box-shadow 220ms ease,
                border-color 220ms ease;
}
.home-page .card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: var(--border-strong);
}

.home-page .card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-bottom: 18px;
    border-radius: 12px;
    background: var(--accent-tint);
    color: var(--accent);
}
.home-page .card__icon svg { width: 22px; height: 22px; }

.home-page .card__title {
    font-size: 1.02rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--text-strong);
    margin: 0 0 8px;
}
.home-page .card__text {
    font-size: 0.92rem;
    line-height: 1.65;
    color: var(--muted);
}


/* ============================================================================
   11. THEME CARDS
   ============================================================================ */
.home-page .theme-card {
    position: relative;
    padding: 34px 24px 28px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs);
    transition: transform 220ms var(--ease), box-shadow 220ms ease,
                border-color 220ms ease;
}
.home-page .theme-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: var(--border-strong);
}
.home-page .theme-card__num {
    position: absolute;
    top: 22px;
    right: 22px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: var(--accent);
    opacity: 0.7;
}
.home-page .theme-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-bottom: 18px;
    border-radius: 12px;
    background: var(--accent-tint);
    color: var(--accent);
}
.home-page .theme-card__icon svg { width: 22px; height: 22px; }

.home-page .theme-card__title {
    font-size: 1.04rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--text-strong);
    line-height: 1.32;
    margin: 0 0 8px;
}
.home-page .theme-card__text {
    font-size: 0.92rem;
    line-height: 1.65;
    color: var(--muted);
}


/* ============================================================================
   12. INDICATORS
   ----------------------------------------------------------------------------
   No statistics are invented — .indicator__value is always the em-dash
   placeholder from the markup. Styled as a quiet slot awaiting data.
   ============================================================================ */
.home-page .indicator {
    display: flex;
    flex-direction: column;
    padding: 26px 24px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs);
    transition: transform 220ms var(--ease), box-shadow 220ms ease,
                border-color 220ms ease;
}
.home-page .indicator:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: var(--border-strong);
}

.home-page .indicator__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 18px;
}
.home-page .indicator__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--primary-tint);
    color: var(--primary);
}
.home-page .indicator__icon svg { width: 20px; height: 20px; }

.home-page .pill {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.home-page .pill--quiet {
    background: var(--success-tint);
    color: var(--success);
}

.home-page .indicator__title {
    font-size: 0.98rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--text-strong);
    line-height: 1.35;
    margin: 0 0 8px;
}
.home-page .indicator__text {
    font-size: 0.86rem;
    line-height: 1.6;
    color: var(--muted);
    margin: 0 0 20px;
    flex: 1;
}
.home-page .indicator__foot {
    padding-top: 16px;
    border-top: 1px solid var(--border);
}
.home-page .indicator__value {
    display: block;
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1;
    color: var(--border-strong);
    margin-bottom: 6px;
}
.home-page .indicator__note {
    font-size: 0.74rem;
    line-height: 1.5;
    color: var(--muted);
}


/* ============================================================================
   13. INSIGHT FLOW — dark five-stage pipeline
   ============================================================================ */
.home-page .insight {
    position: relative;
    display: flex;
    justify-content: space-between;
    gap: 12px;
}
.home-page .insight::before {
    content: "";
    position: absolute;
    top: 17px;
    left: 0;
    right: 0;
    height: 2px;
    background: rgba(255, 255, 255, 0.12);
}
.home-page .insight__step {
    position: relative;
    z-index: 1;
    flex: 1;
    text-align: center;
    padding-top: 40px;
}
.home-page .insight__index {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--primary-deep);
    border: 2px solid rgba(255, 255, 255, 0.18);
    font-size: 0.74rem;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.55);
    transition: background 260ms ease, border-color 260ms ease,
                color 260ms ease, transform 260ms var(--ease);
}
.home-page .insight__step.is-active .insight__index {
    background: var(--accent);
    border-color: var(--accent);
    color: #ffffff;
    transform: translateX(-50%) scale(1.14);
}
.home-page .insight__title {
    font-size: 0.96rem;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.55);
    margin: 0 0 8px;
    transition: color 260ms ease;
}
.home-page .insight__step.is-active .insight__title { color: #ffffff; }
.home-page .insight__text {
    font-size: 0.8rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.4);
    margin: 0;
    transition: color 260ms ease;
}
.home-page .insight__step.is-active .insight__text { color: var(--muted-on-dark); }

@media (max-width: 900px) {
    .home-page .insight { flex-direction: column; gap: 32px; }
    .home-page .insight::before {
        top: 0;
        bottom: 0;
        left: 17px;
        right: auto;
        width: 2px;
        height: auto;
    }
    .home-page .insight__step {
        text-align: left;
        padding-top: 0;
        padding-left: 52px;
    }
    .home-page .insight__index {
        top: 0;
        left: 0;
        transform: none;
    }
    .home-page .insight__step.is-active .insight__index { transform: scale(1.14); }
}


/* ============================================================================
   14. EXPLORE CARDS + REPORTS STRIP
   ============================================================================ */
.home-page .explore-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 28px 24px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs);
    transition: transform 220ms var(--ease), box-shadow 220ms ease,
                border-color 220ms ease;
}
.home-page .explore-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: var(--accent);
}

.home-page .explore-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-bottom: 18px;
    border-radius: 12px;
    background: var(--primary-tint);
    color: var(--primary);
}
.home-page .explore-card__icon svg { width: 22px; height: 22px; }

.home-page .explore-card__title {
    font-size: 1.02rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--text-strong);
    margin: 0 0 8px;
}
.home-page .explore-card__text {
    font-size: 0.9rem;
    line-height: 1.62;
    color: var(--muted);
    margin: 0 0 16px;
    flex: 1;
}
.home-page .explore-card__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-top: auto;
    border-radius: 50%;
    background: var(--primary-tint-2);
    color: var(--primary-dark);
    transition: background 200ms ease, color 200ms ease,
                transform 220ms var(--ease);
}
.home-page .explore-card__arrow svg { width: 15px; height: 15px; }
.home-page .explore-card:hover .explore-card__arrow {
    background: var(--accent);
    color: #ffffff;
    transform: translateX(3px);
}

/* Reports strip */
.home-page .reports-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 32px;
    padding: 24px 28px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 4px solid var(--accent);
    border-radius: var(--radius-md);
}
.home-page .reports-strip__title {
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -0.005em;
    color: var(--text-strong);
    margin: 0 0 4px;
}
.home-page .reports-strip__sub {
    font-size: 0.88rem;
    color: var(--muted);
}
@media (max-width: 640px) {
    .home-page .reports-strip {
        flex-direction: column;
        align-items: stretch;
        padding: 22px 22px;
    }
    .home-page .reports-strip .btn { justify-content: center; }
}


/* ============================================================================
   15. GEOGRAPHY / SOUTH AFRICA
   ============================================================================ */
.home-page .geo {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: clamp(32px, 5vw, 56px);
    align-items: center;
}
.home-page .geo__map {
    padding: 24px 22px 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    text-align: center;
}
.home-page .geo__svg {
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    overflow: visible;
}
.home-page .geo__shape {
    fill: #ffffff;
    stroke: var(--border-strong);
    stroke-width: 1.5;
    stroke-linejoin: round;
    transition: fill 220ms ease;
}
.home-page .geo__map:hover .geo__shape { fill: var(--primary-tint-2); }

.home-page .geo__marker { cursor: pointer; outline: none; }
.home-page .geo__pulse {
    fill: rgba(26, 86, 219, 0.18);
    animation: home-geo-pulse 2.4s ease-out infinite;
    transform-origin: center;
    transform-box: fill-box;
}
.home-page .geo__dot {
    fill: var(--primary);
    stroke: #ffffff;
    stroke-width: 1.5;
    transition: fill 200ms ease;
}
.home-page .geo__label {
    font-size: 10px;
    font-weight: 700;
    fill: var(--primary-dark);
    text-anchor: middle;
    opacity: 0;
    transition: opacity 160ms ease;
}
.home-page .geo__marker:hover .geo__dot,
.home-page .geo__marker:focus-visible .geo__dot { fill: var(--accent); }
.home-page .geo__marker:hover .geo__label,
.home-page .geo__marker:focus-visible .geo__label { opacity: 1; }
.home-page .geo__marker:focus-visible .geo__dot {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

@keyframes home-geo-pulse {
    0%   { transform: scale(0.6); opacity: 0.9; }
    100% { transform: scale(1.6); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .home-page .geo__pulse { animation: none; opacity: 0; }
}

.home-page .geo__caption {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    font-size: 0.74rem;
    color: var(--muted);
    font-style: italic;
}

.home-page .tiers {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.home-page .tiers__item {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 18px;
    align-items: flex-start;
}
.home-page .tiers__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--accent-tint);
    color: var(--accent);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}
.home-page .tiers__title {
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--text-strong);
    margin: 0 0 6px;
}
.home-page .tiers__text {
    font-size: 0.9rem;
    line-height: 1.62;
    color: var(--muted);
    margin: 0;
}
@media (max-width: 900px) {
    .home-page .geo { grid-template-columns: 1fr; gap: 36px; }
}


/* ============================================================================
   16. FEATURES + PROGRESSION
   ============================================================================ */
.home-page .feature {
    padding: 26px 22px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs);
    transition: transform 220ms var(--ease), box-shadow 220ms ease;
}
.home-page .feature:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}
.home-page .feature__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-bottom: 16px;
    border-radius: 10px;
    background: var(--success-tint);
    color: var(--success);
}
.home-page .feature__icon svg { width: 20px; height: 20px; }
.home-page .feature__title {
    font-size: 0.98rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--text-strong);
    margin: 0 0 8px;
}
.home-page .feature__text {
    font-size: 0.88rem;
    line-height: 1.62;
    color: var(--muted);
}

.home-page .progression {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    width: fit-content;
    margin-top: 40px;
    padding: 18px 26px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
}
.home-page .progression__item {
    font-size: 0.88rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: var(--primary-dark);
}
.home-page .progression__item--final { color: var(--accent); }
.home-page .progression__arrow {
    width: 18px;
    height: 2px;
    background: var(--border);
    position: relative;
}
.home-page .progression__arrow::after {
    content: "";
    position: absolute;
    right: -1px;
    top: 50%;
    width: 6px;
    height: 6px;
    border-right: 2px solid var(--border);
    border-bottom: 2px solid var(--border);
    transform: translateY(-50%) rotate(-45deg);
}
@media (max-width: 640px) {
    .home-page .progression { border-radius: var(--radius-md); }
    .home-page .progression__arrow { width: 14px; }
}


/* ============================================================================
   16b. FAQS
   ----------------------------------------------------------------------------
   Accordion built on native <details>/<summary> so it works without JS and
   is keyboard-accessible by default. `name="faq-accordion"` in the markup
   makes the group single-open in browsers that support it; elsewhere the
   items simply behave as independent toggles.

   The open/close motion is a short fade + rise on the answer body rather than
   an animated height, because <details> does not animate its own height
   without either JS or the (still experimental) interpolate-size API. The
   transition is a courtesy; without it the swap is still instant and correct.
   ============================================================================ */
.home-page .faq {
    max-width: 860px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.home-page .faq__item {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs);
    transition: border-color 200ms ease, box-shadow 200ms ease;
}
.home-page .faq__item:hover { border-color: var(--border-strong); }
.home-page .faq__item[open] {
    border-color: var(--accent);
    box-shadow: var(--shadow-sm);
}

/* --- The question row (native <summary>) --- */
.home-page .faq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 24px;
    cursor: pointer;
    list-style: none;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.4;
    color: var(--text-strong);
    transition: color 180ms ease;
}
/* strip the native disclosure triangle in every engine */
.home-page .faq__q::-webkit-details-marker { display: none; }
.home-page .faq__q::marker { content: ""; }
.home-page .faq__item[open] .faq__q { color: var(--accent); }
.home-page .faq__q-text { min-width: 0; }

/* --- Plus / minus indicator ---
   Two bars on a tinted disc: the horizontal stays put, the vertical collapses
   to zero on open. No icon font, no rotation of the wrapper needed. */
.home-page .faq__icon {
    position: relative;
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--accent-tint);
    transition: background 200ms ease;
}
.home-page .faq__icon::before,
.home-page .faq__icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 2px;
    border-radius: 1px;
    background: var(--accent);
    transform: translate(-50%, -50%);
    transition: transform 260ms var(--ease), background 200ms ease;
}
.home-page .faq__icon::after {
    transform: translate(-50%, -50%) rotate(90deg);
}
.home-page .faq__item[open] .faq__icon { background: var(--accent); }
.home-page .faq__item[open] .faq__icon::before,
.home-page .faq__item[open] .faq__icon::after { background: #ffffff; }
.home-page .faq__item[open] .faq__icon::after {
    /* collapse the vertical bar — leaves a clean horizontal minus */
    transform: translate(-50%, -50%) rotate(0deg) scaleX(0);
}

/* --- The answer body --- */
.home-page .faq__a {
    padding: 4px 24px 22px;
    font-size: 0.94rem;
    line-height: 1.72;
    color: var(--muted);
}
.home-page .faq__a p { margin: 0; }
.home-page .faq__a p + p { margin-top: 12px; }
.home-page .faq__a strong {
    color: var(--text-strong);
    font-weight: 700;
}
.home-page .faq__a a {
    color: var(--accent);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-color: rgba(153, 27, 27, 0.35);
    transition: text-decoration-color 160ms ease;
}
.home-page .faq__a a:hover { text-decoration-color: var(--accent); }

/* Gentle entrance for the revealed answer */
@keyframes home-faq-open {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
}
.home-page .faq__item[open] .faq__a {
    animation: home-faq-open 320ms var(--ease) both;
}

/* --- Quiet footnote under the accordion --- */
.home-page .faq__foot {
    max-width: 860px;
    margin: 28px auto 0;
    text-align: center;
    font-size: 0.92rem;
    color: var(--muted);
}
.home-page .faq__foot a {
    color: var(--accent);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-color: rgba(153, 27, 27, 0.35);
    transition: text-decoration-color 160ms ease;
}
.home-page .faq__foot a:hover { text-decoration-color: var(--accent); }

@media (max-width: 640px) {
    .home-page .faq__q { padding: 18px 20px; font-size: 0.94rem; gap: 14px; }
    .home-page .faq__a { padding: 2px 20px 20px; }
}


/* ============================================================================
   17. CLOSING CTA
   ============================================================================ */
.home-page .cta {
    --section-pad: clamp(72px, 8vw, 96px);
    position: relative;
    overflow: hidden;
    padding: var(--section-pad) 0;
    background: linear-gradient(135deg, var(--primary-deep) 0%, var(--primary-dark) 100%);
    color: #ffffff;
    text-align: center;
}
.home-page .cta__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 18% 30%, rgba(153, 27, 27, 0.22), transparent 50%),
        radial-gradient(circle at 82% 70%, rgba(234, 182, 118, 0.12), transparent 50%);
}
.home-page .cta__inner {
    position: relative;
    z-index: 1;
    max-width: 680px;
    margin: 0 auto;
}
.home-page .cta .eyebrow { color: var(--gold); }
.home-page .cta .eyebrow__dot {
    box-shadow: 0 0 0 4px rgba(234, 182, 118, 0.18);
}
.home-page .cta__title {
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.18;
    margin: 0 0 16px;
}
.home-page .cta__text {
    font-size: 1.02rem;
    line-height: 1.7;
    color: var(--text-on-dark);
    margin: 0 0 32px;
    max-width: 58ch;
    margin-inline: auto;
}
.home-page .cta__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}
@media (max-width: 560px) {
    .home-page .cta__actions .btn { flex: 1 1 auto; }
}


/* ============================================================================
   17b. WAVE DIVIDERS
   ----------------------------------------------------------------------------
   Every section meets the one above it on a soft wave instead of a straight
   line. How it works:
     • the section's OWN top edge is masked into a wave, so its background
       (including the CTA's gradient) forms the curve — no colour to match;
     • it is pulled up by the wave's height, so the transparent part of the
       mask reveals the previous section underneath;
     • the same height is added back to padding-top, so content sits exactly
       where it did before and vertical spacing is unchanged.

   Skipped for the section right after .entry (same background — there is
   nothing to divide). The hero keeps its diagonal slash. The page's last
   edge (CTA -> footer) stays straight: the footer lives in another file.

   Tune with --wave-h (height) and --wave-w (length of one wave). Alternate
   sections start half a wave out of phase so the curves don't line up.
   ============================================================================ */
.home-page .section,
.home-page .cta {
    --wave-h: clamp(30px, 4.2vw, 60px);
    --wave-w: clamp(300px, 64vw, 980px);
    --wave-x: 0px;
    /* one seamless wave period; only its alpha is used as a mask */
    --wave-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cpath d='M0 20C33 4 67 4 100 20S167 36 200 20V40H0Z'/%3E%3C/svg%3E");

    margin-top: calc(-1 * var(--wave-h));
    padding-top: calc(var(--section-pad) + var(--wave-h));

    -webkit-mask:
        var(--wave-shape) var(--wave-x) 0 / var(--wave-w) var(--wave-h) repeat-x,
        linear-gradient(#000, #000) 0 100% / 100% calc(100% - var(--wave-h) + 1px) no-repeat;
            mask:
        var(--wave-shape) var(--wave-x) 0 / var(--wave-w) var(--wave-h) repeat-x,
        linear-gradient(#000, #000) 0 100% / 100% calc(100% - var(--wave-h) + 1px) no-repeat;
}
.home-page .section:nth-of-type(even) { --wave-x: calc(var(--wave-w) / 2); }

.home-page .entry + .section {
    margin-top: 0;
    padding-top: var(--section-pad);
    -webkit-mask: none;
            mask: none;
}


/* ============================================================================
   18. BACK TO TOP
   ============================================================================ */
.home-page .back-to-top {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 250;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    background: var(--primary);
    color: #ffffff;
    border: none;
    border-radius: 50%;
    box-shadow: var(--shadow-md);
    opacity: 0;
    pointer-events: none;
    transition: background 180ms ease, transform 220ms var(--ease),
                opacity 200ms ease;
}
.home-page .back-to-top.is-visible {
    opacity: 1;
    pointer-events: auto;
}
.home-page .back-to-top svg { width: 18px; height: 18px; }
.home-page .back-to-top:hover {
    background: var(--accent);
    transform: translateY(-3px);
}
.home-page .back-to-top[hidden] { display: none; }
@media (max-width: 640px) {
    .home-page .back-to-top { right: 16px; bottom: 16px; }
}


/* ============================================================================
   18b. COOKIE CONSENT
   ----------------------------------------------------------------------------
   Bottom-anchored banner. Slide-up + fade, dark navy surface so it reads the
   same over the hero's slash, the paper sections and the closing CTA.

   Starting state is `hidden` (not opacity: 0), which the JS in index.js
   removes before adding .is-visible. If the deferred bundle fails to load,
   the banner never appears — better than a banner with no working dismiss
   control. The choice is stored under `rtrt.cookie-consent` in localStorage.

   z-index sits above .back-to-top (250) so the two never fight for the
   bottom-right corner; on small screens the banner is lifted clear of the
   back-to-top button instead (see the 640px query below).
   ============================================================================ */
.home-page .cookie {
    position: fixed;
    left: 50%;
    bottom: 24px;
    z-index: 300;
    width: min(760px, calc(100% - 32px));
    transform: translateX(-50%) translateY(calc(100% + 40px));
    opacity: 0;
    pointer-events: none;
    transition: transform 460ms var(--ease), opacity 320ms ease;
}
.home-page .cookie.is-visible {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
    pointer-events: auto;
}
.home-page .cookie[hidden] { display: none; }

.home-page .cookie__inner {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 18px 22px;
    background: linear-gradient(150deg,
                #10305f 0%, var(--primary-dark) 45%, var(--primary-deep) 100%);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: var(--radius-md);
    box-shadow: 0 24px 60px rgba(3, 12, 28, 0.50),
                0 2px 10px rgba(3, 12, 28, 0.25);
    color: var(--text-on-dark);
}

.home-page .cookie__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(220, 38, 38, 0.18);
    color: var(--accent-soft);
}
.home-page .cookie__icon svg { width: 20px; height: 20px; }

.home-page .cookie__text { flex: 1; min-width: 0; }

.home-page .cookie__title {
    font-size: 0.9rem;
    font-weight: 800;
    letter-spacing: -0.005em;
    color: #ffffff;
    margin: 0 0 4px;
}
.home-page .cookie__copy {
    font-size: 0.82rem;
    line-height: 1.55;
    color: var(--muted-on-dark);
    margin: 0;
}
.home-page .cookie__link {
    color: #ffffff;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-color: rgba(255, 255, 255, 0.40);
    transition: text-decoration-color 160ms ease;
}
.home-page .cookie__link:hover { text-decoration-color: #ffffff; }

.home-page .cookie__actions {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}
/* Accept reads as the primary action: same bright-red as the hero's primary */
.home-page .cookie .btn--primary {
    background: var(--accent-bright);
    box-shadow: 0 10px 24px rgba(220, 38, 38, 0.34);
}
.home-page .cookie .btn--primary:hover { background: #b91c1c; }

@media (max-width: 760px) {
    .home-page .cookie__inner {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
        padding: 18px 20px;
    }
    .home-page .cookie__icon { display: none; }
    /* accept below, essential above — accept is the primary action */
    .home-page .cookie__actions { flex-direction: column-reverse; }
    .home-page .cookie__actions .btn { width: 100%; }
}
@media (max-width: 640px) {
    /* clear the back-to-top button (44px + 16px offset + gap) */
    .home-page .cookie { bottom: 76px; }
}


/* ============================================================================
   19. SCROLL REVEAL
   ----------------------------------------------------------------------------
   Pure fade + short rise. Gated on html.js so content stays visible if the
   deferred script fails to load. The hero's widget stage instead slides in
   from the right, since it bleeds off that edge.
   ============================================================================ */
html.js .home-page .reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 600ms var(--ease), transform 600ms var(--ease);
}
html.js .home-page .reveal.is-visible {
    opacity: 1;
    transform: none;
}

html.js .home-page .hero__stage.reveal {
    transform: translateX(56px);
    transition-duration: 900ms;
}
html.js .home-page .hero__stage.reveal.is-visible { transform: none; }

/* Stagger within grids */
html.js .home-page .grid .reveal:nth-child(2),
html.js .home-page .about__blocks .reveal:nth-child(2),
html.js .home-page .hero__cards .reveal:nth-child(2) { transition-delay: 70ms; }

html.js .home-page .grid .reveal:nth-child(3),
html.js .home-page .about__blocks .reveal:nth-child(3),
html.js .home-page .hero__cards .reveal:nth-child(3) { transition-delay: 140ms; }

html.js .home-page .grid .reveal:nth-child(4),
html.js .home-page .about__blocks .reveal:nth-child(4),
html.js .home-page .hero__cards .reveal:nth-child(4) { transition-delay: 210ms; }


/* ============================================================================
   20. REDUCED MOTION
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .home-page *,
    .home-page *::before,
    .home-page *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
    html.js .home-page .reveal,
    html.js .home-page .hero__stage.reveal {
        opacity: 1;
        transform: none;
    }
    .home-page .dash__ping { animation: none; opacity: 0; }
    .home-page .dash__float { animation: none; }
}


/* ============================================================================
   21. SMALL VIEWPORT TWEAKS
   ============================================================================ */
@media (max-width: 480px) {
    .home-page .card,
    .home-page .theme-card,
    .home-page .explore-card { padding: 24px 22px; }
    .home-page .indicator { padding: 22px 20px; }
}