/**
 * Landing hero — dark mode, Admin → Design palette.
 *
 * Tokens come from site-theme (injected on :root / .dark):
 *   --brand, --brand-mid, --brand-2, --brand-soft, --gradient,
 *   --gradient-vivid, --shadow-glow, --page-bg, --page-bg-mid, --surface, --surface-2
 *
 * Loaded AFTER landing-hero.css so unlayered light layout fills cannot win.
 */

/* ── Base hero canvas ── */

.dark .landing-hero-wrap {
    color: #e2e8f0;
    background:
        radial-gradient(ellipse 72% 58% at 0% -8%, color-mix(in srgb, var(--brand) 34%, transparent), transparent 62%),
        radial-gradient(ellipse 48% 42% at 100% 8%, color-mix(in srgb, var(--brand-2) 28%, transparent), transparent 58%),
        linear-gradient(180deg, var(--page-bg-mid, #111827) 0%, var(--page-bg, #0f172a) 78%);
}

.dark .landing-hero-wrap--style-white {
    background: var(--page-bg, #0f172a);
}

.dark .landing-hero-wrap--style-brand_soft {
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--brand) 18%, var(--page-bg, #0f172a)) 0%,
        var(--page-bg, #0f172a) 100%
    );
}

.dark .landing-hero-blob--1 {
    background: color-mix(in srgb, var(--brand) 42%, transparent);
}

.dark .landing-hero-blob--2 {
    background: color-mix(in srgb, var(--brand-2) 36%, transparent);
}

/* ── Copy / badge / search ── */

.dark .landing-hero-wrap .landing-hero-badge,
.dark .landing-hero-wrap--layout-map_explorer .landing-hero-badge,
.dark .landing-hero-wrap--layout-tail_trail .landing-hero-badge,
.dark .landing-hero-wrap--layout-profile_spotlight .landing-hero-badge,
.dark .landing-hero-wrap--layout-island_postcard .landing-hero-badge,
.dark .landing-hero-wrap--layout-night_dispatch .landing-hero-badge,
.dark .landing-hero-wrap--style-white .landing-hero-badge,
.dark .landing-hero-wrap--style-brand_soft .landing-hero-badge {
    background: var(--brand-soft) !important;
    color: color-mix(in srgb, var(--brand) 55%, white) !important;
    border-color: color-mix(in srgb, var(--brand) 45%, transparent) !important;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 12%, transparent) !important;
}

.dark .landing-hero-wrap .landing-hero-copy h1 {
    color: #f8fafc;
}

.dark .landing-hero-wrap .landing-hero-copy h1 .gradient-text,
.dark .landing-hero-wrap--layout-map_explorer .landing-hero-copy h1 .gradient-text,
.dark .landing-hero-wrap--layout-tail_trail .landing-hero-copy h1 .gradient-text,
.dark .landing-hero-wrap--layout-island_postcard .landing-hero-copy h1 .gradient-text,
.dark .landing-hero-wrap--layout-night_dispatch .landing-hero-copy h1 .gradient-text,
.dark .landing-hero-wrap--layout-park_window .landing-hero-copy h1 .gradient-text,
.dark .landing-hero-wrap--layout-profile_spotlight .landing-hero-copy h1 .gradient-text {
    background-image: var(--gradient) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}

.dark .landing-hero-wrap .landing-hero-copy > p,
.dark .landing-hero-wrap .landing-hero-trust,
.dark .landing-hero-wrap .landing-hero-apps p,
.dark .landing-hero-wrap .landing-hero-audience p,
.dark .landing-hero-wrap .landing-hero-ctas + p {
    color: #94a3b8;
}

.dark .landing-hero-wrap .landing-hero-audience p:first-child {
    color: #f1f5f9;
}

.dark .landing-hero-search-input,
.dark .landing-hero-wrap--style-white .landing-hero-search-input,
.dark .landing-hero-wrap--style-brand_soft .landing-hero-search-input {
    background: var(--surface) !important;
    color: #f8fafc !important;
    border-color: color-mix(in srgb, var(--brand) 34%, #334155) !important;
}

.dark .landing-hero-search-input::placeholder {
    color: #64748b !important;
}

.dark .landing-hero-search-input:focus {
    border-color: var(--brand) !important;
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 32%, transparent);
}

.dark .landing-hero-search button {
    background-image: var(--gradient) !important;
    box-shadow: var(--shadow-glow, 0 10px 28px color-mix(in srgb, var(--brand) 28%, transparent));
}

.dark #landing-hero-suggestions {
    background: var(--surface-2, #0f172a);
    border-color: color-mix(in srgb, var(--brand) 30%, #334155);
    color: #e2e8f0;
}

.dark .landing-hero-wrap .pulse-ring::before {
    border-color: var(--brand-mid);
}

.dark .landing-hero-ctas a:first-child {
    background: color-mix(in srgb, var(--brand) 18%, #f8fafc);
    color: #0f172a;
}

.dark .landing-hero-ctas a:last-child {
    background: var(--brand);
    color: #0f172a;
}

/* ── Layout scenes ── */

.dark .landing-hero-wrap--layout-map_explorer {
    background:
        radial-gradient(circle at 83% 18%, color-mix(in srgb, var(--brand) 22%, transparent), transparent 25rem),
        linear-gradient(color-mix(in srgb, var(--brand) 10%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--brand) 10%, transparent) 1px, transparent 1px),
        var(--page-bg, #0f172a);
    background-size: auto, 34px 34px, 34px 34px, auto;
}

.dark .landing-hero-wrap--layout-map_explorer::after {
    border-color:
        color-mix(in srgb, var(--brand) 40%, transparent)
        transparent
        transparent
        color-mix(in srgb, var(--brand) 40%, transparent);
}

.dark .landing-hero-wrap--layout-map_explorer .landing-hero-inner {
    background: color-mix(in srgb, var(--surface) 86%, transparent);
    border-color: color-mix(in srgb, var(--brand) 32%, #334155);
    box-shadow: 0 32px 80px -48px color-mix(in srgb, var(--brand) 55%, transparent);
}

.dark .landing-hero-wrap--layout-tail_trail {
    background:
        radial-gradient(circle at 7% 18%, color-mix(in srgb, var(--brand) 55%, transparent) 0 4.5rem, transparent 4.6rem),
        radial-gradient(circle at 93% 78%, color-mix(in srgb, var(--brand-2) 40%, transparent) 0 7rem, transparent 7.1rem),
        linear-gradient(145deg, var(--page-bg-mid, #111827), var(--page-bg, #0f172a));
}

.dark .landing-hero-wrap--layout-tail_trail .landing-hero-inner::before {
    background: radial-gradient(circle, var(--brand) 0 3px, transparent 4px) 0 0 / 25px 25px;
    opacity: 0.28;
}

.dark .landing-hero-wrap--layout-tail_trail .landing-hero-copy {
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    border-color: color-mix(in srgb, var(--brand) 70%, #e2e8f0);
    box-shadow: 10px 12px 0 color-mix(in srgb, var(--brand-2) 70%, #0f172a);
}

.dark .landing-hero-wrap--layout-profile_spotlight {
    background: linear-gradient(
        90deg,
        var(--page-bg, #0f172a) 0 68%,
        color-mix(in srgb, var(--brand) 18%, #020617) 68% 100%
    );
}

.dark .landing-hero-wrap--layout-profile_spotlight::before {
    color: color-mix(in srgb, var(--brand) 12%, transparent);
}

.dark .landing-hero-wrap--layout-profile_spotlight .landing-hero-copy {
    border-left-color: var(--brand);
}

.dark .landing-hero-wrap--layout-island_postcard {
    background:
        radial-gradient(circle at 86% 12%, color-mix(in srgb, var(--brand-mid) 70%, transparent) 0 3rem, transparent 4.2rem),
        linear-gradient(
            155deg,
            color-mix(in srgb, var(--brand) 22%, var(--page-bg)) 0 56%,
            var(--brand) 56% 70%,
            var(--page-bg, #0f172a) 70%
        );
}

.dark .landing-hero-wrap--layout-island_postcard .landing-hero-inner {
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--brand) 14%, transparent) 1px, transparent 1px) 0 0 / 20px 20px,
        color-mix(in srgb, var(--surface) 90%, transparent);
    border-color: color-mix(in srgb, var(--brand) 28%, #0f172a);
    outline-color: var(--brand);
    box-shadow: 0 28px 65px -25px color-mix(in srgb, var(--brand) 45%, transparent);
}

.dark .landing-hero-wrap--layout-night_dispatch {
    color: #f8fafc;
    background:
        radial-gradient(circle at 76% 32%, color-mix(in srgb, var(--brand) 20%, transparent), transparent 25rem),
        linear-gradient(color-mix(in srgb, var(--brand) 8%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--brand) 8%, transparent) 1px, transparent 1px),
        #050b16;
    background-size: auto, 38px 38px, 38px 38px, auto;
}

.dark .landing-hero-wrap--layout-night_dispatch .landing-hero-search,
.dark .landing-hero-wrap--layout-night_dispatch .landing-hero-search-input {
    border-color: color-mix(in srgb, var(--brand) 45%, transparent);
    background: color-mix(in srgb, var(--surface) 88%, transparent);
}

.dark .landing-hero-wrap--layout-night_dispatch .landing-hero-search button {
    color: #07111e;
    background-image: var(--gradient) !important;
    box-shadow: var(--shadow-glow, 0 0 18px color-mix(in srgb, var(--brand) 35%, transparent));
}

.dark .landing-hero-wrap--layout-athens_map {
    background:
        radial-gradient(circle at 8% 10%, color-mix(in srgb, var(--brand-2) 16%, transparent), transparent 23rem),
        var(--page-bg, #0f172a);
}

.dark .landing-hero-athens-map {
    border-color: color-mix(in srgb, var(--brand) 35%, #334155);
    background:
        linear-gradient(28deg, transparent 42%, color-mix(in srgb, var(--brand) 28%, transparent) 43% 47%, transparent 48%),
        color-mix(in srgb, var(--brand) 8%, #0f172a);
    box-shadow:
        inset 0 0 0 5px color-mix(in srgb, var(--brand) 16%, transparent),
        0 24px 60px -35px rgba(0, 0, 0, 0.55);
}

.dark .landing-hero-athens-map::after {
    color: color-mix(in srgb, var(--brand) 55%, white);
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    border-color: color-mix(in srgb, var(--brand) 35%, transparent);
}

.dark .landing-hero-athens-map img {
    filter: saturate(0.7) contrast(0.95) brightness(0.72);
}

.dark .landing-hero-athens-map__route {
    border-color:
        color-mix(in srgb, var(--brand) 72%, transparent)
        transparent
        transparent
        color-mix(in srgb, var(--brand) 72%, transparent);
}

.dark .landing-hero-wrap--layout-athens_map .landing-hero-copy {
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    border-color: color-mix(in srgb, var(--brand) 55%, #e2e8f0);
    box-shadow: 10px 11px 0 color-mix(in srgb, var(--brand-2) 65%, #0f172a);
}

.dark .landing-hero-wrap--layout-booking_ticket {
    background: linear-gradient(
        145deg,
        var(--page-bg, #0f172a),
        color-mix(in srgb, var(--brand) 12%, var(--page-bg, #0f172a))
    );
}

.dark .landing-hero-wrap--layout-booking_ticket .landing-hero-inner {
    background:
        radial-gradient(circle at 0 50%, var(--page-bg, #0f172a) 0 1rem, transparent 1.05rem),
        radial-gradient(circle at 100% 50%, var(--page-bg, #0f172a) 0 1rem, transparent 1.05rem),
        color-mix(in srgb, var(--surface) 92%, transparent);
    border-color: color-mix(in srgb, var(--brand) 48%, #334155);
    box-shadow: 12px 14px 0 color-mix(in srgb, var(--brand-2) 35%, transparent);
}

.dark .landing-hero-wrap--layout-booking_ticket .landing-hero-inner::after {
    border-left-color: color-mix(in srgb, var(--brand) 40%, #334155);
}

.dark .landing-hero-wrap--layout-walker_gallery {
    background:
        linear-gradient(
            90deg,
            transparent 0 7%,
            color-mix(in srgb, var(--brand) 18%, transparent) 7% 7.1%,
            transparent 7.1% 92.9%,
            color-mix(in srgb, var(--brand) 18%, transparent) 92.9% 93%,
            transparent 93%
        ),
        var(--page-bg, #0f172a);
}

.dark .landing-hero-wrap--layout-walker_gallery .landing-hero-inner {
    border-color: color-mix(in srgb, var(--brand) 28%, #334155);
}

.dark .landing-hero-wrap--layout-walker_gallery .landing-hero-mockup::before {
    color: color-mix(in srgb, var(--brand) 60%, white);
}

.dark .landing-hero-wrap--layout-park_window {
    background:
        radial-gradient(circle at 86% 12%, color-mix(in srgb, var(--brand-mid) 55%, transparent) 0 3rem, transparent 3.1rem),
        linear-gradient(150deg, var(--page-bg, #0f172a), color-mix(in srgb, var(--brand) 16%, var(--page-bg, #0f172a)));
}

.dark .landing-hero-wrap--layout-park_window .landing-hero-inner {
    background:
        radial-gradient(circle at 76% 12%, color-mix(in srgb, var(--brand) 18%, transparent) 0 5rem, transparent 5.1rem),
        linear-gradient(
            155deg,
            color-mix(in srgb, var(--surface) 94%, transparent),
            color-mix(in srgb, var(--brand) 14%, var(--page-bg, #0f172a))
        );
    border-color: color-mix(in srgb, var(--surface) 70%, #0f172a);
    outline-color: color-mix(in srgb, var(--brand) 70%, #e2e8f0);
    box-shadow: 0 28px 60px -35px color-mix(in srgb, var(--brand) 40%, transparent);
}

/* ── Walker cards ── */

.dark .landing-hero-cards .landing-hero-card {
    color: #e2e8f0;
    background: color-mix(in srgb, var(--surface) 88%, var(--hero-card-b, var(--brand))) !important;
    border-color: color-mix(in srgb, var(--brand) 36%, #334155) !important;
}

.dark .landing-hero-cards--style-glass_float .landing-hero-card {
    background: color-mix(in srgb, var(--surface) 72%, transparent) !important;
    border-color: color-mix(in srgb, var(--brand) 40%, rgba(255, 255, 255, 0.22)) !important;
}

.dark .landing-hero-cards--style-night_neon .landing-hero-card,
.dark .landing-hero-cards--colors-midnight_lime .landing-hero-card {
    background: color-mix(in srgb, #0b1220 82%, var(--brand)) !important;
    border-color: color-mix(in srgb, var(--brand-mid) 70%, #22d3ee) !important;
}

.dark .landing-hero-cards:not(.landing-hero-cards--colors-designed) .landing-hero-card > div:first-child {
    background:
        radial-gradient(circle at 84% 17%, rgba(255, 255, 255, 0.18) 0 1.3rem, transparent 1.35rem),
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--hero-card-a, var(--brand)) 72%, #172033),
            var(--hero-card-b, var(--brand-mid)) 55%,
            var(--hero-card-c, var(--brand-2))
        ) !important;
}

.dark .landing-hero-cards:not(.landing-hero-cards--colors-designed) .landing-hero-card > div:last-child > a {
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--hero-card-a, var(--brand)) 76%, #172033),
        var(--hero-card-b, var(--brand-mid))
    ) !important;
}

.dark .landing-hero-cards .hero-mock-total {
    color: color-mix(in srgb, var(--hero-card-b, var(--brand)) 42%, white) !important;
}

.dark .landing-hero-cards--style-night_neon .hero-mock-total,
.dark .landing-hero-cards--colors-midnight_lime .hero-mock-total {
    color: color-mix(in srgb, var(--hero-card-c, var(--brand-2)) 70%, white) !important;
}

.dark .landing-hero-mockup .float-delay,
.dark .hero-mock-nearby-badge {
    background: var(--surface) !important;
    color: #f8fafc !important;
    border: 1px solid color-mix(in srgb, var(--brand) 28%, #334155);
}

/* ── Mobile map strip ── */

.dark .landing-hero-mobile-map {
    border-color: color-mix(in srgb, var(--brand) 40%, #0f172a);
    box-shadow: 0 16px 36px -18px color-mix(in srgb, var(--brand) 40%, transparent);
}

.dark .landing-hero-mobile-map__status {
    color: color-mix(in srgb, var(--brand) 50%, white);
    background: color-mix(in srgb, var(--surface) 90%, transparent);
    border-color: color-mix(in srgb, var(--brand) 35%, transparent);
}

.dark .landing-hero-mobile-map__pin {
    background: var(--surface);
    box-shadow:
        0 0 0 5px color-mix(in srgb, var(--brand) 32%, transparent),
        0 9px 18px rgba(0, 0, 0, 0.4);
}

.dark .landing-hero-mobile-map__footer {
    background: color-mix(in srgb, var(--surface) 82%, transparent);
    border-color: color-mix(in srgb, var(--brand) 30%, transparent);
}

.dark .landing-hero-mobile-map__footer b {
    color: color-mix(in srgb, var(--brand) 80%, #172033);
    background: color-mix(in srgb, var(--brand-mid) 35%, #fff);
}