/* =========================================================
   Index page ONLY
   All selectors scoped under .index-root
   ========================================================= */

/* --- Local tokens (inherit theme via data-theme) --- */
.index-root {
    --idx-radius: 18px;
    --idx-radius-lg: 22px;
    --idx-border: rgba(255,255,255,.10);
    --idx-shadow: 0 12px 30px rgba(0,0,0,.16);
    --idx-shadow-soft: 0 10px 22px rgba(0,0,0,.12);
    --idx-surface: rgba(255,255,255,.06);
    --idx-muted: rgba(255,255,255,.70);
    --idx-text: rgba(255,255,255,.92);
    --idx-accent: #6aa9ff;
    --idx-accent-2: #a6ffea;
    --idx-pad: clamp(14px, 2.2vw, 22px);
    --idx-gap: clamp(12px, 1.6vw, 18px);
    --idx-h1: clamp(1.65rem, 2.6vw, 2.35rem);
    --idx-h2: clamp(1.25rem, 1.6vw, 1.55rem);
    --idx-lead: clamp(1.02rem, 1.1vw, 1.15rem);
    --idx-blur: 10px;
    display: grid;
    gap: clamp(14px, 1.8vw, 22px);
}

/* Light theme overrides (still only for Index content) */
html[data-theme="light"] .index-root {
    --idx-border: rgba(10,15,30,.10);
    --idx-shadow: 0 12px 28px rgba(10,20,40,.12);
    --idx-shadow-soft: 0 10px 20px rgba(10,20,40,.10);
    --idx-surface: rgba(10,15,30,.04);
    --idx-muted: rgba(10,15,30,.70);
    --idx-text: rgba(10,15,30,.92);
    --idx-accent: #275efe;
    --idx-accent-2: #12b886;
}

/* Dark theme subtle tweak */
html[data-theme="dark"] .index-root {
    --idx-border: rgba(255,255,255,.08);
    --idx-surface: rgba(255,255,255,.05);
}

/* --- Cards inside Index only --- */
.index-root > .card {
    border-radius: var(--idx-radius);
    border: 1px solid var(--idx-border);
    background: var(--idx-surface);
    box-shadow: var(--idx-shadow-soft);
    backdrop-filter: blur(var(--idx-blur));
    -webkit-backdrop-filter: blur(var(--idx-blur));
    overflow: hidden;
}

    /* If your global .card already has padding, this keeps it neat */
    .index-root > .card.stack {
        padding: var(--idx-pad);
    }

/* =========================================
   HERO
   ========================================= */

.index-root .hero {
    padding: 0; /* padding is applied to .hero-copy */
    position: relative;
}

    .index-root .hero::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: radial-gradient(900px 420px at 15% 20%, rgba(106,169,255,.22), transparent 55%), radial-gradient(800px 380px at 85% 35%, rgba(166,255,234,.16), transparent 55%), linear-gradient(180deg, rgba(255,255,255,.03), transparent 60%);
    }

.index-root .hero-grid {
    display: grid;
    grid-template-columns: 1.35fr 0.95fr;
    gap: var(--idx-gap);
    align-items: stretch;
}

/* left side */
.index-root .hero-copy {
    position: relative;
    z-index: 1;
    padding: var(--idx-pad);
    display: grid;
    gap: 14px;
}

.index-root .hero .eyebrow {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .92rem;
    letter-spacing: .02em;
    color: var(--idx-muted);
}

    .index-root .hero .eyebrow::before {
        content: "";
        width: 10px;
        height: 10px;
        border-radius: 999px;
        background: linear-gradient(135deg, var(--idx-accent), var(--idx-accent-2));
        box-shadow: 0 0 0 4px rgba(106,169,255,.14);
    }

.index-root .hero h1 {
    margin: 0;
    font-size: var(--idx-h1);
    line-height: 1.12;
    color: var(--idx-text);
    text-wrap: balance;
}

.index-root .hero .lead {
    margin: 0;
    font-size: var(--idx-lead);
    line-height: 1.55;
    color: var(--idx-text);
    opacity: .92;
}

.index-root .hero .bullets {
    margin: 0;
    padding-left: 18px;
    display: grid;
    gap: 8px;
    color: var(--idx-text);
    opacity: .92;
}

.index-root .hero .cta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 4px;
}

.index-root .hero .micro {
    margin: 0;
    font-size: .92rem;
    color: var(--idx-muted);
}

/* right media */
.index-root .hero-media {
    position: relative;
    z-index: 1;
    margin: 0;
    border-left: 1px solid var(--idx-border);
    display: grid;
    grid-template-rows: 1fr auto;
    min-height: 280px;
    background: linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
}

.index-root .hero-image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transform: scale(1.02);
    filter: saturate(1.05) contrast(1.02);
}

.index-root .hero-media figcaption {
    padding: 10px 12px;
    font-size: .88rem;
    border-top: 1px solid var(--idx-border);
    color: var(--idx-muted);
}

/* =========================================
   Typography inside Index sections
   ========================================= */

.index-root h2 {
    margin: 0 0 6px 0;
    font-size: var(--idx-h2);
    line-height: 1.2;
    color: var(--idx-text);
}

.index-root h3 {
    margin: 0 0 6px 0;
    font-size: 1.05rem;
    color: var(--idx-text);
}

.index-root p {
    color: var(--idx-text);
    opacity: .92;
}

/* Keep your existing .text-muted usage but scoped */
.index-root .text-muted {
    color: var(--idx-muted) !important;
}

/* =========================================
   Inner panels (row cards) – lighter look
   ========================================= */

.index-root .row .card {
    border-radius: 16px;
    border: 1px solid var(--idx-border);
    background: rgba(255,255,255,.03);
    box-shadow: none;
}

html[data-theme="light"] .index-root .row .card {
    background: rgba(10,15,30,.02);
}

/* Tile images */
.index-root .tile-image {
    width: 100%;
    height: 450px;
    display: block;
    object-fit: cover;
    border-radius: 14px;
    border: 1px solid var(--idx-border);
    box-shadow: 0 10px 22px rgba(0,0,0,.16);
    margin-top: 10px;
}

/* =========================================
   How it works (wide image)
   ========================================= */

.index-root .image-frame {
    margin: 0;
    border-radius: var(--idx-radius);
    border: 1px solid var(--idx-border);
    overflow: hidden;
    background: rgba(255,255,255,.03);
    box-shadow: var(--idx-shadow-soft);
}

.index-root .wide-image {
    width: 100%;
    object-fit: cover;
    display: block;
}

.index-root .image-frame figcaption {
    padding: 10px 12px;
    font-size: .88rem;
    border-top: 1px solid var(--idx-border);
    color: var(--idx-muted);
}

/* =========================================
   Ordered list style
   ========================================= */

.index-root .howto {
    margin: 0;
    padding-left: 20px;
    display: grid;
    gap: 8px;
    color: var(--idx-text);
    opacity: .92;
}

/* =========================================
   Bottom CTA gradient
   ========================================= */

.index-root .cta-bottom {
    position: relative;
}

    .index-root .cta-bottom::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: radial-gradient(700px 260px at 50% 0%, rgba(106,169,255,.16), transparent 60%), radial-gradient(700px 260px at 50% 100%, rgba(166,255,234,.12), transparent 60%);
    }

    .index-root .cta-bottom > * {
        position: relative;
        z-index: 1;
    }

/* =========================================
   Responsive
   ========================================= */

@media (max-width: 992px) {
    .index-root .hero-grid {
        grid-template-columns: 1fr;
    }

    .index-root .hero-media {
        border-left: none;
        border-top: 1px solid var(--idx-border);
        min-height: 240px;
    }

    .index-root .tile-image {
        height: 140px;
    }
}

@media (max-width: 576px) {
    .index-root .hero-copy {
        padding: 14px;
    }

    .index-root .wide-image {
        height: 200px;
    }

    .index-root .hero .cta {
        gap: 8px;
    }
}