/* The Mobile Doctor - animations, parallax, maps, modal, theme. */

:root {
    --tmd-sky-50:  #f0f9ff;
    --tmd-sky-100: #e0f2fe;
    --tmd-sky-300: #7dd3fc;
    --tmd-sky-500: #0ea5e9;
    --tmd-sky-600: #0284c7;
    --tmd-sky-700: #0369a1;
    --tmd-sky-900: #0c4a6e;
}

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

/* iOS standalone (added to home screen): honour the notch + home indicator. */
@supports (padding: max(0px)) {
    body {
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }
    /* The sticky nav already has its own height; pull the safe-area into its inner padding. */
    [data-glass-nav] > div {
        padding-left: max(1rem, env(safe-area-inset-left));
        padding-right: max(1rem, env(safe-area-inset-right));
        padding-top: env(safe-area-inset-top);
    }
    /* Bottom-of-screen FAB respects the home-indicator gap. */
    .tmd-fab { bottom: max(1rem, calc(env(safe-area-inset-bottom) + 0.75rem)); }
}

/* Detect iOS standalone (Add to Home Screen) and tweak the nav height. */
@media all and (display-mode: standalone) {
    [data-glass-nav] { padding-top: env(safe-area-inset-top); }
}

/* -------- App-mode chrome (native Capacitor shell or standalone PWA) --------
 * Marketing top-nav, footer, and FAB get .app-hide.
 * Native top header + bottom tab bar get .app-only.
 * By default the marketing chrome is visible and the app chrome is hidden.
 * In native or standalone, we flip it.
 */
.app-only { display: none !important; }
html.is-native .app-only,
html.is-standalone .app-only { display: block !important; }
html.is-native .app-hide,
html.is-standalone .app-hide { display: none !important; }
/* Re-enable flex/grid display for tab bar grid (the !important above forces block) */
html.is-native nav.app-only,
html.is-standalone nav.app-only,
html.is-native header.app-only,
html.is-standalone header.app-only { display: block !important; }

/* CSS-only fallback for standalone PWAs even before JS sets the class. */
@media all and (display-mode: standalone) {
    .app-only { display: block !important; }
    .app-hide { display: none !important; }
}

/* -------- Modern floating bottom tab bar (app-mode only) --------
 * Forced light theme regardless of the user's system dark-mode setting,
 * because the rest of the app is light.
 */
.tmd-tabbar {
    position: fixed;
    left: 0; right: 0;
    bottom: 0;
    /* Above Leaflet's controls/popups (which can reach z-index 1000). */
    z-index: 2000;
    padding: 0.5rem 0.75rem calc(0.5rem + env(safe-area-inset-bottom));
    pointer-events: none; /* the inner pill catches taps */
    color-scheme: light;
}
.tmd-tabbar-inner {
    margin: 0 auto;
    max-width: 26rem;
    display: grid;
    align-items: end;
    gap: 0.25rem;
    padding: 0.6rem 0.75rem 0.55rem;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: saturate(150%) blur(18px);
    -webkit-backdrop-filter: saturate(150%) blur(18px);
    border: 1px solid rgba(15, 23, 42, 0.07);
    border-radius: 1.5rem;
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.04),
        0 10px 28px -10px rgba(15, 23, 42, 0.18),
        0 28px 70px -24px rgba(2, 132, 199, 0.22);
    pointer-events: auto;
    overflow: visible;
}
.tmd-tab {
    position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
    gap: 0.2rem;
    padding: 0.3rem 0.2rem 0.1rem;
    min-height: 3.25rem;
    color: #64748b; /* slate-500 */
    text-decoration: none;
    border-radius: 0.85rem;
    transition: color 180ms ease, transform 120ms ease;
    -webkit-tap-highlight-color: transparent;
}
.tmd-tab:active { transform: scale(0.94); }
.tmd-tab-icon-wrap {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    width: 2rem; height: 2rem;
    border-radius: 0.7rem;
    transition: background 200ms ease, color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}
.tmd-tab-icon { display: inline-flex; line-height: 0; }
.tmd-tab-label {
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.015em;
    line-height: 1;
    transition: color 200ms ease, opacity 200ms ease;
}
.tmd-tab-badge {
    position: absolute;
    top: -3px; right: -5px;
    min-width: 1.05rem; height: 1.05rem;
    padding: 0 0.25rem;
    font-size: 0.58rem; font-weight: 700; line-height: 1.05rem;
    text-align: center; color: #fff;
    background: #f43f5e; /* rose-500 */
    border: 2px solid #fff;
    border-radius: 999px;
}

/* Active state: soft sky pill behind the icon, nudged up. */
.tmd-tab.is-active { color: #0284c7; }
.tmd-tab.is-active .tmd-tab-icon-wrap {
    background: linear-gradient(135deg, #38bdf8 0%, #0284c7 100%);
    color: #fff;
    box-shadow: 0 6px 14px -4px rgba(2, 132, 199, 0.45);
    transform: translateY(-2px);
}
.tmd-tab.is-active .tmd-tab-label { color: #0284c7; }

/* Danger tab (SOS): same geometry as other tabs, rose colour palette. */
.tmd-tab.is-danger { color: #be123c; }
.tmd-tab.is-danger .tmd-tab-icon-wrap {
    background: #ffe4e6;          /* rose-100 */
    color: #e11d48;               /* rose-600 */
}
.tmd-tab.is-danger.is-active .tmd-tab-icon-wrap,
.tmd-tab.is-danger:active .tmd-tab-icon-wrap {
    background: linear-gradient(135deg, #fb7185 0%, #e11d48 100%);
    color: #fff;
    box-shadow: 0 6px 14px -4px rgba(225, 29, 72, 0.45);
    transform: translateY(-2px);
}
.tmd-tab.is-danger .tmd-tab-label { color: #be123c; font-weight: 600; }

/* -------- Welcome screen (app-mode, signed out) -------- */
.tmd-welcome {
    display: flex;
    flex-direction: column;
    min-height: 100svh;       /* small viewport unit: respects iOS Safari chrome */
    background: #fff;
}
@supports not (min-height: 100svh) {
    .tmd-welcome { min-height: 100vh; }
}
.tmd-welcome-hero {
    position: relative;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
    padding: 2.5rem 1.5rem 4rem;
    background: linear-gradient(160deg, #38bdf8 0%, #0284c7 55%, #0c4a6e 100%);
    overflow: hidden;
}
.tmd-welcome-orb {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    filter: blur(40px);
    pointer-events: none;
}
.tmd-welcome-orb-1 { top: -6rem; right: -5rem;  width: 18rem; height: 18rem; }
.tmd-welcome-orb-2 { bottom: -6rem; left: -4rem; width: 16rem; height: 16rem; }
.tmd-welcome-logo {
    position: relative;
    width: 6rem; height: 6rem;
    border-radius: 1.4rem;
    box-shadow:
        0 10px 30px -6px rgba(7, 51, 79, 0.45),
        0 2px 6px rgba(7, 51, 79, 0.18);
    outline: 1px solid rgba(255, 255, 255, 0.35);
    outline-offset: -1px;
}
.tmd-welcome-title {
    position: relative;
    margin: 3.5rem 0 0;       /* generous gap so the icon doesn't crowd the wordmark */
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
}
/* Also push the icon visually away with its own bottom margin -
 * belt-and-suspenders so even if the title margin gets collapsed
 * somehow on iOS WebKit, there's still air between them. */
.tmd-welcome-logo { margin-bottom: 1rem; }
.tmd-welcome-sub {
    position: relative;
    margin: 0.65rem 0 0;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.88);
    line-height: 1.45;
    max-width: 18rem;
}
.tmd-welcome-pills {
    position: relative;
    margin-top: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    max-width: 20rem;
}
.tmd-welcome-pills span {
    padding: 0.3rem 0.75rem;
    font-size: 0.7rem;
    font-weight: 500;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.22);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.tmd-welcome-sheet {
    position: relative;
    flex: 0 0 auto;
    margin-top: -2rem;
    background: #fff;
    border-top-left-radius: 2rem;
    border-top-right-radius: 2rem;
    padding: 1.5rem 1.5rem 2rem;
    box-shadow: 0 -14px 30px -15px rgba(2, 132, 199, 0.25);
}
.tmd-welcome-handle {
    display: block;
    width: 2.5rem; height: 0.25rem;
    margin: 0 auto 1.25rem;
    border-radius: 999px;
    background: #e2e8f0; /* slate-200 */
}
.tmd-welcome-actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-width: 22rem;
    margin: 0 auto;
}
.tmd-btn {
    display: block;
    width: 100%;
    padding: 0.95rem 1rem;
    border-radius: 1rem;
    text-align: center;
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    transition: transform 120ms ease, box-shadow 200ms ease;
    -webkit-tap-highlight-color: transparent;
}
.tmd-btn:active { transform: scale(0.98); }
.tmd-btn-primary {
    background: #0284c7;
    color: #fff;
    box-shadow: 0 10px 22px -8px rgba(2, 132, 199, 0.55);
}
.tmd-btn-secondary {
    background: #f1f5f9; /* slate-100 */
    color: #0f172a;      /* slate-900 */
}
.tmd-welcome-emergency {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin: 0.4rem auto 0;
    padding: 0.7rem 0.75rem;
    color: #e11d48; /* rose-600 */
    font-weight: 600;
    font-size: 0.875rem;
    text-decoration: none;
}
.tmd-welcome-emergency-dot {
    width: 1.5rem; height: 1.5rem;
    border-radius: 999px;
    background: #ffe4e6;
    color: #e11d48;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.tmd-welcome-legal {
    margin: 1.25rem auto 0;
    max-width: 22rem;
    text-align: center;
    font-size: 0.7rem;
    line-height: 1.5;
    color: #94a3b8; /* slate-400 */
}
.tmd-welcome-legal a {
    color: inherit;
    text-decoration: underline;
}

/* -------- Welcome toast (first launch greeting) -------- */
.tmd-welcome-toast {
    position: fixed;
    left: 0; right: 0;
    top: calc(0.75rem + env(safe-area-inset-top));
    z-index: 60;
    display: flex; justify-content: center;
    padding: 0 0.75rem;
    pointer-events: none;
    opacity: 0;
    transform: translateY(-12px);
    transition: opacity 320ms ease, transform 320ms ease;
}
.tmd-welcome-toast.show { opacity: 1; transform: translateY(0); }
.tmd-welcome-card {
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
    color: white;
    box-shadow: 0 14px 30px -10px rgba(2, 132, 199, 0.55);
    padding: 0.85rem 1rem;
    border-radius: 1rem;
    width: 100%;
    max-width: 22rem;
    display: flex; align-items: center; gap: 0.75rem;
    pointer-events: auto;
}
.tmd-welcome-emoji {
    width: 2.5rem; height: 2.5rem;
    flex-shrink: 0;
    border-radius: 50%;
    background: rgba(255,255,255,0.18);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem;
}
.tmd-welcome-title { font-weight: 700; font-size: 0.95rem; line-height: 1.2; margin: 0; }
.tmd-welcome-sub   { font-size: 0.75rem; opacity: 0.9; margin: 0.2rem 0 0 0; line-height: 1.3; }

body {
    /* Apple system fonts first (SF Pro on Mac/iOS), Inter for everywhere else. */
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text',
                 'Inter', 'Segoe UI', Roboto, system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: 'cv11', 'ss03';
    letter-spacing: -0.011em;
    color: #1d1d1f; /* Apple's neutral text colour */
}

/* Headings: keep Tailwind weights, just refine the tracking like Apple. */
h1, h2, h3 { letter-spacing: -0.022em; line-height: 1.1; }
h4, h5, h6 { letter-spacing: -0.015em; line-height: 1.15; }

/* Default body-level headings (without an explicit weight class) get a
   confident semibold. Hero / section headings override with font-extrabold. */
h1:not([class*="font-"]),
h2:not([class*="font-"]),
h3:not([class*="font-"]) { font-weight: 600; }

/* Compact on mobile */
@media (max-width: 640px) {
    h1 { font-size: 1.6rem;  letter-spacing: -0.02em; }
    h2 { font-size: 1.25rem; letter-spacing: -0.02em; }
    h3 { font-size: 1rem;    letter-spacing: -0.015em; }
    body { font-size: 14px; }
}

/* =================== HERO BACKGROUND =================== */
.hero-bg {
    position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0;
}
.hero-bg::before {
    content: ''; position: absolute; inset: -10% -5%;
    background:
        radial-gradient(ellipse at 20% 30%, rgba(14, 165, 233, .28), transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(125, 211, 252, .35), transparent 55%),
        radial-gradient(ellipse at 50% 80%, rgba(186, 230, 253, .45), transparent 50%);
}
.hero-grid {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(14, 165, 233, .06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(14, 165, 233, .06) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
}
.blob {
    position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55;
    animation: blob 18s ease-in-out infinite; will-change: transform;
}
.blob-1 { width: 320px; height: 320px; top: -90px; left: -100px; background: #7dd3fc; animation-delay: 0s; }
.blob-2 { width: 280px; height: 280px; bottom: -100px; right: -90px; background: #38bdf8; animation-delay: -6s; }
.blob-3 { width: 240px; height: 240px; top: 30%; right: 20%; background: #bae6fd; animation-delay: -12s; }
@keyframes blob {
    0%,100% { transform: translate(0,0) scale(1); }
    33%     { transform: translate(40px,-30px) scale(1.08); }
    66%     { transform: translate(-30px,30px) scale(.94); }
}

/* =================== SCROLL REVEAL =================== */
[data-reveal] {
    opacity: 0; transform: translateY(22px);
    transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1);
    will-change: opacity, transform;
}
[data-reveal].is-in { opacity: 1; transform: translateY(0); }
[data-reveal][data-delay="100"] { transition-delay: .1s; }
[data-reveal][data-delay="200"] { transition-delay: .2s; }
[data-reveal][data-delay="300"] { transition-delay: .3s; }

/* =================== PARALLAX =================== */
[data-parallax] { transform: translate3d(0, var(--p, 0px), 0); will-change: transform; }

/* =================== EFFECTS =================== */
.lift { transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease; }
.lift:hover { transform: translateY(-3px); box-shadow: 0 10px 28px -8px rgba(2, 132, 199, .18); }

.logo-pulse { animation: logoPulse 2.4s ease-in-out infinite; }
@keyframes logoPulse {
    0%,100% { box-shadow: 0 0 0 0 rgba(14,165,233,.55); }
    50%     { box-shadow: 0 0 0 10px rgba(14,165,233,0); }
}

.danger-pulse { animation: dangerPulse 1.4s ease-in-out infinite; }
@keyframes dangerPulse {
    0%,100% { box-shadow: 0 0 0 0 rgba(244,63,94,.45); }
    50%     { box-shadow: 0 0 0 14px rgba(244,63,94,0); }
}

.glass {
    background: rgba(255, 255, 255, .82);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
}
.glass.scrolled {
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 8px 24px -16px rgba(2, 132, 199, .15);
}

.gradient-text {
    background: linear-gradient(90deg, #0284c7 0%, #0ea5e9 40%, #38bdf8 70%, #0284c7 100%);
    background-size: 200% 100%;
    background-clip: text; -webkit-background-clip: text;
    color: transparent; -webkit-text-fill-color: transparent;
    animation: gradientShift 8s linear infinite;
}
@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

.float-y { animation: floatY 6s ease-in-out infinite; }
@keyframes floatY {
    0%,100% { transform: translateY(0); }
    50%     { transform: translateY(-10px); }
}

/* =================== LEAFLET CUSTOMISATIONS =================== */
.leaflet-container { font-family: inherit; background: #e6f4fb; }
.leaflet-popup-content-wrapper { border-radius: 12px; }
.leaflet-popup-content { margin: 10px 12px; font-size: 13px; }
.leaflet-control-attribution { font-size: 10px !important; }

/* Custom locate-me button on Leaflet maps */
.tmd-locate a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: #ffffff;
    color: #475569;
    border-radius: 4px;
    transition: color .15s, background .15s, transform .15s;
}
.tmd-locate a:hover {
    color: #0ea5e9;
    background: #f1f5f9;
}
.tmd-locate a svg { width: 20px; height: 20px; }
.tmd-locate.loading a {
    color: #0ea5e9;
    pointer-events: none;
}
.tmd-locate.loading a svg {
    animation: locateSpin 0.9s linear infinite;
}
@keyframes locateSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Custom map markers */
.tmd-marker {
    width: 36px; height: 36px;
    display: grid; place-items: center;
    border-radius: 50%;
    border: 2px solid white;
    box-shadow: 0 4px 12px rgba(0,0,0,.18);
    color: white;
    transition: transform .2s ease;
}
.tmd-marker:hover { transform: scale(1.12); }
.tmd-marker svg { width: 18px; height: 18px; }
.tmd-marker-doctor    { background: linear-gradient(135deg,#0ea5e9,#0369a1); }
.tmd-marker-ambulance { background: linear-gradient(135deg,#f43f5e,#9f1239); }
.tmd-marker-pharmacy  { background: linear-gradient(135deg,#10b981,#065f46); }
.tmd-marker-drugshop  { background: linear-gradient(135deg,#22c55e,#14532d); }
.tmd-marker-clinic    { background: linear-gradient(135deg,#8b5cf6,#5b21b6); }
.tmd-marker-hospital  { background: linear-gradient(135deg,#3b82f6,#1e3a8a); }
.tmd-marker-nurse     { background: linear-gradient(135deg,#ec4899,#9d174d); }
.tmd-marker-lab       { background: linear-gradient(135deg,#f59e0b,#92400e); }
.tmd-marker-me        { background: linear-gradient(135deg,#0ea5e9,#0c4a6e); animation: meRing 2s ease-in-out infinite; }
@keyframes meRing {
    0%,100% { box-shadow: 0 0 0 0 rgba(14,165,233,.5), 0 4px 12px rgba(0,0,0,.18); }
    50%     { box-shadow: 0 0 0 12px rgba(14,165,233,0), 0 4px 12px rgba(0,0,0,.18); }
}

/* =================== MODAL =================== */
.tmd-modal-backdrop {
    position: fixed; inset: 0; z-index: 10000;
    background: rgba(15, 23, 42, .55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex; align-items: flex-end; justify-content: center;
    padding: 0;
    opacity: 0; pointer-events: none;
    transition: opacity .25s ease;
}
.tmd-modal-backdrop.open { opacity: 1; pointer-events: auto; }
.tmd-modal {
    background: white; border-radius: 20px 20px 0 0;
    width: 100%; max-width: 480px;
    box-shadow: 0 -10px 40px rgba(0,0,0,.2);
    transform: translateY(40px); transition: transform .35s cubic-bezier(.16,1,.3,1);
}
.tmd-modal-backdrop.open .tmd-modal { transform: translateY(0); }
@media (min-width: 640px) {
    .tmd-modal-backdrop { align-items: center; padding: 1rem; }
    .tmd-modal { border-radius: 20px; }
}

/* =================== ANIMATED GRAPHS =================== */
.bar-grow {
    transform: scaleY(0);
    transform-box: fill-box;
    transform-origin: bottom;
    transition: transform 1s cubic-bezier(.16,1,.3,1);
}
.is-in .bar-grow,
[data-reveal].is-in .bar-grow { transform: scaleY(1); }
[data-reveal].is-in .bar-grow:nth-child(1) { transition-delay: .05s; }
[data-reveal].is-in .bar-grow:nth-child(2) { transition-delay: .15s; }
[data-reveal].is-in .bar-grow:nth-child(3) { transition-delay: .25s; }
[data-reveal].is-in .bar-grow:nth-child(4) { transition-delay: .35s; }
[data-reveal].is-in .bar-grow:nth-child(5) { transition-delay: .45s; }
[data-reveal].is-in .bar-grow:nth-child(6) { transition-delay: .55s; }
[data-reveal].is-in .bar-grow:nth-child(7) { transition-delay: .65s; }

.line-draw {
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    transition: stroke-dashoffset 1.8s ease-out .5s;
}
[data-reveal].is-in .line-draw { stroke-dashoffset: 0; }

/* =================== PARTNER LOGOS MARQUEE =================== */
.marquee {
    display: flex;
    gap: 1.25rem;
    width: max-content;
    animation: marquee 40s linear infinite;
}
.marquee:hover { animation-play-state: paused; }
@keyframes marquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* =================== STICKY HELP FAB =================== */
.tmd-fab {
    position: fixed;
    right: 1rem; bottom: 1rem;
    z-index: 40;
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.7rem 1.05rem;
    background: linear-gradient(135deg, #f43f5e, #be123c);
    color: white;
    font-weight: 700;
    font-size: 0.8125rem;
    border-radius: 999px;
    box-shadow: 0 12px 32px -8px rgba(244, 63, 94, .55), 0 0 0 0 rgba(244, 63, 94, .4);
    transform: translateY(160%);
    opacity: 0; pointer-events: none;
    transition: transform .4s cubic-bezier(.16,1,.3,1), opacity .35s, box-shadow .35s;
    animation: fabRing 1.8s ease-in-out infinite;
}
.tmd-fab.is-visible {
    transform: translateY(0);
    opacity: 1; pointer-events: auto;
}
.tmd-fab:hover {
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 18px 40px -10px rgba(244, 63, 94, .6);
}
@keyframes fabRing {
    0%,100% { box-shadow: 0 12px 32px -8px rgba(244, 63, 94, .55), 0 0 0 0 rgba(244, 63, 94, .4); }
    50%     { box-shadow: 0 12px 32px -8px rgba(244, 63, 94, .55), 0 0 0 14px rgba(244, 63, 94, 0); }
}
@media (max-width: 480px) {
    .tmd-fab { right: 0.75rem; bottom: 0.75rem; padding: 0.65rem 0.9rem; font-size: 0.78rem; }
}

/* =================== 3D PERSPECTIVE ROAD SCENE =================== */
.scene3d {
    position: relative; width: 100%;
}
/* The ambulance is drawn FRONT-ON (head-on view), so it reads correctly
   as it drives toward the viewer down the vertical perspective road.
   --travel is set by the [data-scene] scroll handler (0% -> 100%). */
.ambu-traveler {
    position: absolute;
    --p: calc(var(--travel, 0%) / 100%);
    left: 50%;
    /* Travel from the vanishing point (60% from top) to the foreground (96%). */
    top: calc(60% + 36% * var(--p));
    /* Front-on ambulance is taller than wide. */
    width: clamp(36px, 12%, 110px);
    aspect-ratio: 120 / 150;
    transform: translate(-50%, -50%) scale(calc(0.5 + 1.6 * var(--p)));
    transform-origin: center;
    will-change: transform, top;
    pointer-events: none;
    filter: drop-shadow(0 12px 16px rgba(0, 0, 0, .35));
    transition: top .15s linear, transform .15s linear;
}
@media (max-width: 640px) {
    .ambu-traveler { width: clamp(32px, 16%, 90px); }
}

/* =================== DARK STATS SECTION =================== */
.stats-dark {
    background: linear-gradient(135deg, #0f172a 0%, #075985 45%, #0c4a6e 75%, #0f172a 100%);
    color: white;
    position: relative; overflow: hidden;
}
.stats-dark::before {
    content: '';
    position: absolute; inset: 0;
    background-image:
        radial-gradient(circle at 15% 35%, rgba(56, 189, 248, .35), transparent 35%),
        radial-gradient(circle at 85% 65%, rgba(14, 165, 233, .35), transparent 40%);
    pointer-events: none;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .blob, .logo-pulse, .danger-pulse, .gradient-text, .float-y, .tmd-fab { animation: none !important; }
    [data-reveal] { opacity: 1; transform: none; transition: none; }
    [data-parallax] { transform: none !important; }
    .tmd-marker-me { animation: none; }
    .ambu-traveler { transition: none; }
}