/* =========================================================
   WHY PAGE DARK MODE
   File: static/css/dark-mode/why-dark.css
   ========================================================= */

[data-theme="dark"] .why-page {
    --why-dark-text: var(--dark-text);
    --why-body-text: var(--dark-muted);
    --why-muted-text: var(--dark-soft-muted);

    background:
        radial-gradient(circle at 10% 0%, rgba(232, 127, 36, 0.12), transparent 32%),
        radial-gradient(circle at 90% 0%, rgba(51, 150, 211, 0.14), transparent 34%),
        linear-gradient(180deg, var(--dark-bg-deep) 0%, var(--dark-bg) 45%, var(--dark-bg) 100%);
}

[data-theme="dark"] .why-page::before {
    background:
        radial-gradient(
            circle at -5% -10%,
            rgba(232, 127, 36, 0.24) 0%,
            rgba(232, 127, 36, 0.13) 24%,
            rgba(232, 127, 36, 0.045) 48%,
            transparent 72%
        ),
        radial-gradient(
            circle at 105% -8%,
            rgba(51, 150, 211, 0.26) 0%,
            rgba(51, 150, 211, 0.14) 24%,
            rgba(51, 150, 211, 0.05) 48%,
            transparent 72%
        ),
        radial-gradient(
            circle at 50% 14%,
            rgba(15, 23, 42, 0.92) 0%,
            rgba(15, 23, 42, 0.62) 42%,
            transparent 72%
        ),
        linear-gradient(
            180deg,
            rgba(2, 6, 23, 0.98) 0%,
            rgba(15, 23, 42, 0.92) 48%,
            rgba(15, 23, 42, 0) 100%
        );
}

[data-theme="dark"] .why-page::after {
    background:
        radial-gradient(
            circle at 18% 16%,
            rgba(232, 127, 36, 0.16) 0%,
            rgba(232, 127, 36, 0.07) 25%,
            transparent 52%
        ),
        radial-gradient(
            circle at 82% 14%,
            rgba(51, 150, 211, 0.17) 0%,
            rgba(51, 150, 211, 0.075) 26%,
            transparent 54%
        );
    opacity: 0.78;
}

[data-theme="dark"] .why-hero h1,
[data-theme="dark"] .why-intro-card h2,
[data-theme="dark"] .why-section-heading h2 {
    color: var(--dark-text);
}

[data-theme="dark"] .why-hero p,
[data-theme="dark"] .why-intro-card p {
    color: var(--dark-muted);
}

[data-theme="dark"] .why-section-heading p {
    color: var(--dark-soft-muted);
}

/* Intro Cards */

[data-theme="dark"] .why-intro-card {
    background:
        radial-gradient(
            circle at 92% 0%,
            rgba(51, 150, 211, 0.28) 0%,
            rgba(51, 150, 211, 0.13) 32%,
            rgba(51, 150, 211, 0.045) 56%,
            transparent 78%
        ),
        radial-gradient(
            circle at 0% 100%,
            rgba(51, 150, 211, 0.08) 0%,
            transparent 54%
        ),
        linear-gradient(
            135deg,
            rgba(17, 24, 39, 0.96) 0%,
            rgba(15, 23, 42, 0.92) 48%,
            rgba(30, 41, 59, 0.90) 100%
        );
    box-shadow:
        0 28px 78px rgba(0, 0, 0, 0.38),
        0 18px 52px rgba(51, 150, 211, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .why-intro-card.alt {
    background:
        radial-gradient(
            circle at 92% 0%,
            rgba(232, 127, 36, 0.30) 0%,
            rgba(232, 127, 36, 0.13) 32%,
            rgba(232, 127, 36, 0.045) 56%,
            transparent 78%
        ),
        radial-gradient(
            circle at 0% 100%,
            rgba(232, 127, 36, 0.08) 0%,
            transparent 54%
        ),
        linear-gradient(
            135deg,
            rgba(17, 24, 39, 0.96) 0%,
            rgba(15, 23, 42, 0.92) 48%,
            rgba(30, 41, 59, 0.90) 100%
        );
    box-shadow:
        0 28px 78px rgba(0, 0, 0, 0.38),
        0 18px 52px rgba(232, 127, 36, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .why-intro-card:hover {
    box-shadow:
        0 34px 90px rgba(0, 0, 0, 0.48),
        0 22px 62px rgba(51, 150, 211, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .why-intro-card.alt:hover {
    box-shadow:
        0 34px 90px rgba(0, 0, 0, 0.48),
        0 22px 62px rgba(232, 127, 36, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .why-intro-card[data-target="why-site"].is-selected {
    box-shadow:
        0 34px 90px rgba(0, 0, 0, 0.50),
        0 24px 70px rgba(51, 150, 211, 0.22),
        0 0 42px rgba(51, 150, 211, 0.10);
}

[data-theme="dark"] .why-intro-card[data-target="why-us"].is-selected {
    box-shadow:
        0 34px 90px rgba(0, 0, 0, 0.50),
        0 24px 70px rgba(232, 127, 36, 0.22),
        0 0 42px rgba(232, 127, 36, 0.10);
}

[data-theme="dark"] .why-intro-card span {
    background: rgba(51, 150, 211, 0.16);
    border: 1px solid rgba(51, 150, 211, 0.28);
}

[data-theme="dark"] .why-intro-card.alt span {
    background: rgba(232, 127, 36, 0.16);
    border: 1px solid rgba(232, 127, 36, 0.30);
}

/* Section Labels */

[data-theme="dark"] #why-site .why-section-label {
    background: rgba(51, 150, 211, 0.14);
    border-color: rgba(51, 150, 211, 0.30);
}

[data-theme="dark"] #why-us .why-section-label {
    background: rgba(232, 127, 36, 0.15);
    border-color: rgba(232, 127, 36, 0.32);
}

/* Reason Cards */

[data-theme="dark"] .why-card {
    box-shadow:
        0 22px 58px rgba(0, 0, 0, 0.30),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] #why-site .why-card {
    border-color: rgba(51, 150, 211, 0.26);
    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(51, 150, 211, 0.16) 0%,
            rgba(51, 150, 211, 0.06) 38%,
            transparent 66%
        ),
        linear-gradient(
            145deg,
            rgba(17, 24, 39, 0.95) 0%,
            rgba(15, 23, 42, 0.90) 100%
        );
}

[data-theme="dark"] #why-us .why-card {
    border-color: rgba(232, 127, 36, 0.28);
    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(232, 127, 36, 0.16) 0%,
            rgba(232, 127, 36, 0.06) 38%,
            transparent 66%
        ),
        linear-gradient(
            145deg,
            rgba(17, 24, 39, 0.95) 0%,
            rgba(15, 23, 42, 0.90) 100%
        );
}

[data-theme="dark"] #why-site .why-card::after {
    background: rgba(51, 150, 211, 0.12);
}

[data-theme="dark"] #why-us .why-card::after {
    background: rgba(232, 127, 36, 0.12);
}

[data-theme="dark"] #why-site .why-card span {
    background: rgba(51, 150, 211, 0.15);
    border-color: rgba(51, 150, 211, 0.30);
}

[data-theme="dark"] #why-us .why-card span {
    background: rgba(232, 127, 36, 0.16);
    border-color: rgba(232, 127, 36, 0.32);
}

[data-theme="dark"] .why-card p {
    color: var(--dark-muted);
}

[data-theme="dark"] #why-site .why-card:hover {
    border-color: rgba(51, 150, 211, 0.44);
    box-shadow:
        0 28px 70px rgba(0, 0, 0, 0.42),
        0 18px 48px rgba(51, 150, 211, 0.13),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] #why-us .why-card:hover {
    border-color: rgba(232, 127, 36, 0.46);
    box-shadow:
        0 28px 70px rgba(0, 0, 0, 0.42),
        0 18px 48px rgba(232, 127, 36, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Banner */

[data-theme="dark"] .why-banner-link {
    box-shadow:
        0 28px 70px rgba(0, 0, 0, 0.34),
        0 0 42px rgba(86, 182, 198, 0.08);
}

[data-theme="dark"] .why-banner-img {
    filter: brightness(0.88) saturate(1.04);
}