/* ============================================================================
   Blood Donor Club — Premium Public Design System  (landing.css)
   Loaded ONLY by the public _Layout (never the Admin area).
   Layered on top of Bootstrap + site.css; overrides the public shell to a
   modern, animated, glass-morphic look. Palette from the brief.
   ---------------------------------------------------------------------------
   Namespaced design tokens (--bd-*) are independent of the SiteSettings
   --bb-* vars, so the landing keeps its exact brand palette regardless of DB.
   ============================================================================ */

:root {
    /* ---- Brand palette ---- */
    --bd-primary: #E63946;
    --bd-primary-2: #FF6B6B;
    --bd-primary-ink: #C81E2E;
    --bd-accent: #FFB703;
    --bd-success: #2ECC71;
    --bd-dark: #111827;
    --bd-ink: #0B1220;
    --bd-light: #F8FAFC;
    --bd-white: #FFFFFF;

    /* ---- Neutrals ---- */
    --bd-text: #1F2632;
    --bd-muted: #64707F;
    --bd-line: #EAEFF5;
    --bd-soft: #FEF3F2;
    --bd-soft-2: #FFF6E9;

    /* ---- Gradients ---- */
    --grad-primary: linear-gradient(135deg, #FF6B6B 0%, #E63946 55%, #C81E2E 100%);
    --grad-primary-soft: linear-gradient(135deg, #FFE1DE 0%, #FFD3CE 100%);
    --grad-warm: linear-gradient(115deg, #FF6B6B 0%, #FFB703 100%);
    --grad-dark: linear-gradient(160deg, #1B2333 0%, #111827 55%, #0B1220 100%);
    --grad-text: linear-gradient(120deg, #FF6B6B 0%, #E63946 55%, #C81E2E 100%);
    --grad-sheen: linear-gradient(120deg, transparent 20%, rgba(255,255,255,.55) 50%, transparent 80%);

    /* ---- Shadows ---- */
    --sh-xs: 0 2px 6px rgba(17,24,39,.05);
    --sh-sm: 0 8px 22px -12px rgba(17,24,39,.18);
    --sh-md: 0 18px 40px -20px rgba(17,24,39,.28);
    --sh-lg: 0 40px 80px -32px rgba(17,24,39,.35);
    --sh-glow: 0 20px 45px -14px rgba(230,57,70,.55);
    --sh-glow-amber: 0 20px 45px -14px rgba(255,183,3,.5);

    /* ---- Radii ---- */
    --r-sm: 12px;
    --r-md: 18px;
    --r-lg: 24px;
    --r-xl: 32px;
    --r-pill: 999px;

    /* ---- Motion ---- */
    --e-out: cubic-bezier(.22,.8,.3,1);
    --e-spring: cubic-bezier(.34,1.56,.64,1);
    --e-io: cubic-bezier(.16,1,.3,1);

    /* ---- Type ---- */
    --font-ui: 'Inter', 'Hind Siliguri', system-ui, -apple-system, sans-serif;
    --font-bn: 'Hind Siliguri', 'Inter', system-ui, sans-serif;

    /* Section rhythm */
    --sec-pad: clamp(3.5rem, 8vw, 7rem);
}

/* ============================================================================
   BASE
   ============================================================================ */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
    background: var(--bd-white);
    color: var(--bd-text);
    font-family: var(--font-ui);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

::selection { background: rgba(230,57,70,.18); color: var(--bd-primary-ink); }

/* Custom scrollbar (desktop) */
@media (pointer: fine) {
    * { scrollbar-width: thin; scrollbar-color: #d9dfe8 transparent; }
    *::-webkit-scrollbar { width: 10px; height: 10px; }
    *::-webkit-scrollbar-thumb { background: #d3dae4; border-radius: 999px; border: 2px solid #fff; }
    *::-webkit-scrollbar-thumb:hover { background: #b9c2d0; }
}

/* ============================================================================
   TYPOGRAPHY HELPERS
   ============================================================================ */
.display-hero {
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.03;
    font-size: clamp(2.4rem, 6.2vw, 4.6rem);
}
.grad-text {
    background: var(--grad-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-weight: 700;
    font-size: .78rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--bd-primary-ink);
    background: var(--bd-soft);
    border: 1px solid #ffd9d4;
    padding: .45rem .9rem;
    border-radius: var(--r-pill);
}
.eyebrow .dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--bd-primary);
    box-shadow: 0 0 0 0 rgba(230,57,70,.6);
    animation: bd-ping 1.8s ease-out infinite;
}
.section-eyebrow {
    display: block;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    font-size: .8rem;
    color: var(--bd-primary);
    margin-bottom: .6rem;
}
.badge-live-dot {
    display: inline-block; width: 8px; height: 8px; border-radius: 50%;
    background: var(--bd-primary);
    box-shadow: 0 0 0 0 rgba(230,57,70,.6);
    animation: bd-ping 1.6s ease-out infinite;
}
.section-title {
    font-weight: 800;
    letter-spacing: -0.02em;
    font-size: clamp(1.7rem, 3.6vw, 2.7rem);
    line-height: 1.12;
    color: var(--bd-dark);
    margin: 0;
}
.section-subtitle {
    color: var(--bd-muted);
    font-size: clamp(1rem, 1.6vw, 1.12rem);
    max-width: 40rem;
}
.lead-xl { font-size: clamp(1.05rem, 2vw, 1.3rem); color: #45505f; line-height: 1.6; }

/* ============================================================================
   LAYOUT PRIMITIVES
   ============================================================================ */
.section-pad { padding-top: var(--sec-pad); padding-bottom: var(--sec-pad); }
.bg-light-sec { background: var(--bd-light); }
.bg-dark-sec { background: var(--grad-dark); color: #cfd7e3; }
.bg-dark-sec .section-title { color: #fff; }
.container-narrow { max-width: 760px; margin-inline: auto; }

/* Decorative blobs / gradient orbs */
.orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: .5;
    pointer-events: none;
    z-index: 0;
}
.orb-red { background: radial-gradient(circle at 30% 30%, #FF6B6B, transparent 70%); }
.orb-amber { background: radial-gradient(circle at 30% 30%, #FFB703, transparent 70%); }
.orb-pink { background: radial-gradient(circle at 30% 30%, #FF9AA2, transparent 70%); }

/* ============================================================================
   GLASS + GRADIENT-BORDER UTILITIES
   ============================================================================ */
.glass {
    background: rgba(255,255,255,.72);
    backdrop-filter: blur(16px) saturate(150%);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    border: 1px solid rgba(255,255,255,.65);
}
.glass-dark {
    background: rgba(20,27,41,.55);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    border: 1px solid rgba(255,255,255,.10);
}
.gradient-border {
    position: relative;
    background: #fff;
    border-radius: var(--r-lg);
}
.gradient-border::before {
    content: "";
    position: absolute; inset: 0;
    padding: 1.5px;
    border-radius: inherit;
    background: var(--grad-primary);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: .0;
    transition: opacity .4s var(--e-out);
    pointer-events: none;
}
.gradient-border:hover::before { opacity: 1; }

/* ============================================================================
   BUTTONS
   ============================================================================ */
.btn-cta,
.btn-ghost {
    --_pad-y: .85rem;
    --_pad-x: 1.6rem;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: 1rem;
    line-height: 1;
    padding: var(--_pad-y) var(--_pad-x);
    border-radius: var(--r-pill);
    border: 0;
    cursor: pointer;
    text-decoration: none;
    overflow: hidden;
    isolation: isolate;
    transition: transform .28s var(--e-spring), box-shadow .3s var(--e-out), color .25s, background .25s;
    will-change: transform;
}
.btn-cta {
    color: #fff;
    background: var(--grad-primary);
    box-shadow: var(--sh-glow);
}
.btn-cta::after {
    content: "";
    position: absolute; inset: 0; z-index: -1;
    background: var(--grad-sheen);
    transform: translateX(-120%);
    transition: transform .7s var(--e-out);
}
.btn-cta:hover { color: #fff; transform: translateY(-3px); box-shadow: 0 22px 44px -16px rgba(230,57,70,.78); }
.btn-cta:hover::after { transform: translateX(120%); }
.btn-cta:active { transform: translateY(-1px); }

.btn-ghost {
    color: var(--bd-dark);
    background: rgba(255,255,255,.7);
    border: 1.5px solid #e4e9f0;
    box-shadow: var(--sh-xs);
    backdrop-filter: blur(8px);
}
.btn-ghost:hover {
    color: var(--bd-primary-ink);
    border-color: var(--bd-primary);
    transform: translateY(-3px);
    box-shadow: var(--sh-sm);
}
.btn-amber { background: var(--grad-warm); box-shadow: var(--sh-glow-amber); color: #3a2a00; }
.btn-amber:hover { color: #3a2a00; box-shadow: 0 26px 55px -14px rgba(255,183,3,.65); }

.btn-lg-cta { --_pad-y: 1.05rem; --_pad-x: 2rem; font-size: 1.08rem; }
.btn-sm-cta { --_pad-y: .6rem; --_pad-x: 1.15rem; font-size: .9rem; }

/* On dark backgrounds */
.on-dark .btn-ghost { color: #fff; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.22); }
.on-dark .btn-ghost:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.5); color: #fff; }

/* Ripple */
.ripple-ink {
    position: absolute;
    border-radius: 50%;
    background: rgba(255,255,255,.55);
    transform: scale(0);
    animation: bd-ripple .6s var(--e-out);
    pointer-events: none;
    z-index: 5;
}
.btn-ghost .ripple-ink { background: rgba(230,57,70,.18); }

/* ============================================================================
   ANNOUNCEMENT BAR
   ============================================================================ */
.announce-bar {
    position: relative;
    background: var(--grad-primary);
    background-size: 200% 200%;
    animation: bd-gradient 8s ease infinite;
    color: #fff;
    font-size: .88rem;
    font-weight: 600;
    overflow: hidden;
}
.announce-bar .container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    padding: .5rem 1rem;
    flex-wrap: wrap;
    text-align: center;
}
.announce-bar a { color: #fff; text-decoration: underline; text-underline-offset: 3px; font-weight: 700; }
.announce-bar a:hover { color: #fff; opacity: .85; }
.announce-bar .pulse-dot {
    width: 9px; height: 9px; border-radius: 50%; background: #fff;
    box-shadow: 0 0 0 0 rgba(255,255,255,.7);
    animation: bd-ping 1.6s ease-out infinite;
    flex: none;
}
.announce-bar .live-icon { display: inline-flex; }
.announce-bar { max-height: 60px; transition: max-height .4s var(--e-out), opacity .35s, transform .4s var(--e-out); }
.announce-bar.is-hidden { max-height: 0; opacity: 0; transform: translateY(-100%); }

/* ============================================================================
   NAVBAR  (upgrades the existing .site-header)
   ============================================================================ */
.site-header {
    background: rgba(255,255,255,.62) !important;
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    border-bottom: 1px solid rgba(234,239,245,.7) !important;
    transition: background .35s var(--e-out), box-shadow .35s var(--e-out), padding .3s var(--e-out) !important;
    padding: .8rem 0 !important;
}
.site-header.shrink {
    background: rgba(255,255,255,.9) !important;
    box-shadow: 0 10px 30px -18px rgba(17,24,39,.4) !important;
    padding: .5rem 0 !important;
}
.site-header .navbar-brand {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--bd-dark);
    padding: 0;
}
.brand-mark {
    width: 38px; height: 38px; flex: none;
    border-radius: 11px;
    display: grid; place-items: center;
    background: var(--grad-primary);
    color: #fff;
    box-shadow: 0 8px 18px -8px rgba(230,57,70,.7);
    transition: transform .35s var(--e-spring);
}
.site-header .navbar-brand:hover .brand-mark { transform: rotate(-8deg) scale(1.06); }
.brand-mark svg { width: 21px; height: 21px; }
.brand-name { font-size: 1.15rem; line-height: 1; white-space: nowrap; }

.site-header .nav-link {
    font-weight: 600;
    font-size: .93rem;
    color: #3a4452 !important;
    padding: .5rem .72rem !important;
    margin-inline: .05rem;
    border-radius: var(--r-pill);
    white-space: nowrap;
    transition: color .25s var(--e-out), background .25s var(--e-out);
}
.site-header .nav-link:hover { color: var(--bd-primary-ink) !important; background: var(--bd-soft); }
.site-header .nav-link.active { color: var(--bd-primary-ink) !important; background: var(--bd-soft); }

/* vertical divider between links and the actions (desktop only) */
.nav-divider {
    width: 1px; height: 22px; align-self: center;
    background: var(--bd-line);
    margin-inline: .55rem;
}

.lang-toggle {
    display: inline-flex; align-items: center; gap: .35rem;
    border: 1.5px solid #e4e9f0;
    border-radius: var(--r-pill);
    padding: .45rem .8rem;
    font-weight: 600; font-size: .9rem;
    color: var(--bd-dark);
    white-space: nowrap;
    transition: all .3s var(--e-out);
}
.lang-toggle:hover { border-color: var(--bd-primary); color: var(--bd-primary-ink); background: var(--bd-soft); }

.nav-emergency {
    display: inline-flex; align-items: center; gap: .4rem;
    background: var(--grad-primary);
    color: #fff !important;
    font-weight: 700; font-size: .92rem;
    padding: .55rem 1rem;
    border-radius: var(--r-pill);
    box-shadow: 0 10px 22px -8px rgba(230,57,70,.7);
    margin-left: .5rem;
    white-space: nowrap;
    transition: transform .28s var(--e-spring), box-shadow .3s var(--e-out);
}
.nav-emergency:hover { color: #fff !important; transform: translateY(-2px); box-shadow: 0 16px 30px -8px rgba(230,57,70,.75); }
.nav-emergency svg { width: 16px; height: 16px; }

.navbar-toggler {
    border: 1.5px solid var(--bd-line);
    background: #fff;
    padding: .4rem .55rem;
    border-radius: 11px;
    box-shadow: var(--sh-xs);
    transition: background .3s var(--e-out), border-color .3s var(--e-out), box-shadow .25s;
}
.navbar-toggler:focus { box-shadow: 0 0 0 4px rgba(230,57,70,.16); outline: none; }
.navbar-toggler-icon {
    width: 1.4em; height: 1.4em; vertical-align: middle;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23E63946' stroke-width='2.4' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    transition: background-image .3s var(--e-out);
}
.navbar-toggler:hover { background: var(--grad-primary); border-color: transparent; box-shadow: 0 10px 22px -8px rgba(230,57,70,.6); }
.navbar-toggler:hover .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

@media (max-width: 1199.98px) {
    .site-header .navbar-collapse {
        background: #fff;
        margin-top: .7rem;
        padding: .8rem;
        border-radius: var(--r-lg);
        box-shadow: var(--sh-md);
        border: 1px solid var(--bd-line);
    }
    .site-header .navbar-nav { gap: .1rem; }
    .site-header .nav-link { margin-inline: 0; padding: .7rem .9rem !important; font-size: 1rem; }
    .nav-divider { display: none; }
    .lang-toggle { margin: .4rem 0 0; justify-content: center; }
    .nav-emergency { margin: .5rem 0 0; justify-content: center; padding: .7rem 1rem; }
}

/* ============================================================================
   HERO
   ============================================================================ */
.hero {
    position: relative;
    padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(3rem, 7vw, 5rem);
    background:
        radial-gradient(1100px 520px at 88% -10%, #FFE7E4 0%, transparent 60%),
        radial-gradient(900px 500px at 0% 0%, #FFF3DD 0%, transparent 55%),
        linear-gradient(180deg, #fff 0%, var(--bd-light) 100%);
    overflow: hidden;
}
/* subtle dotted grid for depth, fading out toward the edges */
.hero::before {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background-image: radial-gradient(rgba(230,57,70,.10) 1.4px, transparent 1.6px);
    background-size: 24px 24px;
    -webkit-mask-image: radial-gradient(90% 60% at 50% 5%, #000 25%, transparent 72%);
    mask-image: radial-gradient(90% 60% at 50% 5%, #000 25%, transparent 72%);
}
.hero .orb-1 { width: 460px; height: 460px; top: -160px; right: -120px; opacity: .35; }
.hero .orb-2 { width: 360px; height: 360px; bottom: -160px; left: -120px; opacity: .3; }
.hero-content { position: relative; z-index: 2; }
.hero .display-hero { color: var(--bd-dark); }
.hero-line { display: block; }
.hero .display-hero .grad-text {
    background-size: 220% auto;
    animation: bd-gradient 6s ease infinite;
    padding-bottom: .06em;
}
/* hand-drawn underline that draws in under the highlighted word */
.hl-word { position: relative; display: inline-block; }
.hl-underline { position: absolute; left: -.01em; bottom: -.12em; width: 102%; height: .34em; overflow: visible; }
.hl-underline path { fill: none; stroke: var(--bd-accent); stroke-width: 6; stroke-linecap: round; }
.motion .hl-underline path { stroke-dasharray: 340; stroke-dashoffset: 340; animation: bd-draw 1s var(--e-out) .55s forwards; }

.hero-sub { color: #46515f; max-width: 34rem; }

/* trust pills under the CTAs */
.hero-pills { display: flex; flex-wrap: wrap; gap: .6rem; }
.hero-pill {
    display: inline-flex; align-items: center; gap: .4rem;
    background: #fff; border: 1px solid var(--bd-line); border-radius: var(--r-pill);
    padding: .48rem .9rem; font-weight: 700; font-size: .82rem; color: #3a4452;
    box-shadow: var(--sh-xs);
    transition: transform .3s var(--e-spring), border-color .3s var(--e-out), color .3s;
}
.hero-pill:hover { transform: translateY(-2px); border-color: #ffd4cf; color: var(--bd-primary-ink); }
.hero-pill svg { width: 15px; height: 15px; color: var(--bd-primary); }

.hero-cta-row { display: flex; flex-wrap: wrap; gap: .9rem; }
.hero-trust { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; color: var(--bd-muted); }
.hero-trust .avatars { display: inline-flex; }
.hero-trust .avatars span {
    width: 38px; height: 38px; border-radius: 50%;
    border: 2.5px solid #fff;
    margin-left: -12px;
    display: grid; place-items: center;
    font-weight: 700; color: #fff; font-size: .85rem;
    box-shadow: var(--sh-xs);
}
.hero-trust .avatars span:first-child { margin-left: 0; }
.hero-trust .avatars .a1 { background: linear-gradient(135deg,#FF6B6B,#E63946); }
.hero-trust .avatars .a2 { background: linear-gradient(135deg,#FFB703,#FB8500); }
.hero-trust .avatars .a3 { background: linear-gradient(135deg,#2ECC71,#12A150); }
.hero-trust .avatars .a4 { background: linear-gradient(135deg,#4C6FFF,#2647d6); }
.hero-trust strong { color: var(--bd-dark); }

/* Hero visual — a single clean card centered over a soft glow */
.hero-visual { position: relative; z-index: 2; display: flex; justify-content: center; }
.hero-visual::before {
    content: ""; position: absolute; inset: -6% -2% -10%; z-index: -1; pointer-events: none;
    background: radial-gradient(58% 52% at 62% 42%, rgba(255,107,107,.30), transparent 70%);
}
.hero-card { width: 100%; max-width: 430px; }
.hero-card {
    position: relative;
    border-radius: var(--r-xl);
    padding: 1.6rem;
    background: rgba(255,255,255,.74);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border: 1px solid rgba(255,255,255,.85);
    box-shadow: var(--sh-lg);
    overflow: hidden;
    transition: transform .5s var(--e-out), box-shadow .5s var(--e-out);
}
.hero-card:hover { transform: translateY(-6px); box-shadow: 0 48px 90px -34px rgba(230,57,70,.42), var(--sh-lg); }
/* light sweep across the card on hover */
.hero-card::after {
    content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none;
    background: linear-gradient(120deg, transparent 32%, rgba(255,255,255,.55) 50%, transparent 68%);
    transform: translateX(-130%);
    transition: transform .9s var(--e-out);
}
.hero-card:hover::after { transform: translateX(130%); }
.hero-card > * { position: relative; z-index: 1; }

.hero-card .hc-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: 1rem; }
.hc-title-wrap { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.hc-title-ic {
    width: 40px; height: 40px; flex: none; border-radius: 12px;
    display: grid; place-items: center; color: #fff;
    background: var(--grad-primary); box-shadow: 0 8px 16px -8px rgba(230,57,70,.7);
}
.hc-title-ic svg { width: 20px; height: 20px; }
.hero-card .hc-title { font-weight: 800; color: var(--bd-dark); font-size: .98rem; line-height: 1.15; }
.hc-subtitle { font-size: .74rem; color: var(--bd-muted); font-weight: 600; }
.hero-card .hc-live {
    display: inline-flex; align-items: center; gap: .4rem; flex: none;
    font-weight: 800; font-size: .72rem; letter-spacing: .05em; color: var(--bd-success);
    background: #E7FaEE; padding: .34rem .7rem; border-radius: var(--r-pill);
}
.hero-card .hc-live .pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--bd-success); animation: bd-ping 1.6s ease-out infinite; box-shadow: 0 0 0 0 rgba(46,204,113,.6); }

.heartbeat-wrap {
    background: var(--grad-dark);
    border-radius: var(--r-lg);
    padding: 1rem 1.2rem;
    color: #fff;
    overflow: hidden;
    position: relative;
}
.heartbeat-wrap::before {
    content: ""; position: absolute; top: -50px; right: -40px; width: 130px; height: 130px;
    background: radial-gradient(circle, rgba(255,107,107,.55), transparent 70%);
}
.heartbeat-wrap > * { position: relative; z-index: 1; }
.heartbeat-wrap .hb-label { font-size: .72rem; opacity: .65; letter-spacing: .12em; text-transform: uppercase; }
.hb-row { display: flex; align-items: center; justify-content: space-between; }
.heartbeat-wrap .hb-bpm { font-size: 2rem; font-weight: 800; line-height: 1; display: inline-block; transform-origin: left center; }
.motion .heartbeat-wrap .hb-bpm { animation: bd-beat 1.9s ease-in-out infinite; }
.heartbeat-wrap .hb-bpm span { font-size: .85rem; font-weight: 600; opacity: .7; }
.hb-heart { color: #FF6B6B; display: inline-grid; place-items: center; }
.hb-heart svg { width: 24px; height: 24px; filter: drop-shadow(0 0 8px rgba(255,107,107,.7)); }
.motion .hb-heart { animation: bd-beat 1.9s ease-in-out infinite; }
.ecg { width: 100%; height: 52px; margin-top: .3rem; }
.ecg path { stroke: #FF6B6B; stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round;
    filter: drop-shadow(0 0 6px rgba(255,107,107,.8)); }
.motion .ecg path { stroke-dasharray: 640; stroke-dashoffset: 640; animation: bd-ecg 2.4s linear infinite; }

/* 8 circular blood-group badges in a single row, colour-coded by availability */
.hc-groups { display: flex; gap: .35rem; margin-top: 1.1rem; }
.hc-chip {
    flex: 1 1 0; min-width: 0;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    display: grid; place-items: center;
    background: #fff; border: 2px solid var(--bd-line);
    font-weight: 800; font-size: .68rem; letter-spacing: -.03em; color: var(--bd-dark);
    box-shadow: var(--sh-xs);
    transition: transform .3s var(--e-spring), border-color .3s var(--e-out), box-shadow .3s, background .3s, color .3s;
    cursor: default;
}
.hc-chip:hover { transform: translateY(-3px) scale(1.08); box-shadow: var(--sh-sm); }
.hc-chip.st-plenty   { border-color: #2ECC71; color: #12A150; }
.hc-chip.st-plenty:hover   { background: #2ECC71; color: #fff; }
.hc-chip.st-low      { border-color: #FFB703; color: #B5810B; }
.hc-chip.st-low:hover      { background: #FFB703; color: #fff; }
.hc-chip.st-critical { border-color: #E63946; color: var(--bd-primary-ink); }
.hc-chip.st-critical:hover { background: var(--grad-primary); color: #fff; border-color: transparent; }

.hc-legend { display: flex; justify-content: center; gap: 1.1rem; margin-top: .9rem; font-size: .7rem; font-weight: 600; color: var(--bd-muted); }
.hc-legend span { display: inline-flex; align-items: center; gap: .35rem; }
.hc-legend .d { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.hc-legend .d.green { background: #2ECC71; }
.hc-legend .d.amber { background: #FFB703; }
.hc-legend .d.red { background: #E63946; }

.hc-foot {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--bd-line);
    font-size: .78rem; font-weight: 700; text-decoration: none;
}
.hc-foot-left { color: var(--bd-muted); display: inline-flex; align-items: center; gap: .4rem; }
.hc-foot-left svg { width: 14px; height: 14px; }
.hc-foot-right { color: var(--bd-primary-ink); display: inline-flex; align-items: center; gap: .3rem; }
.hc-foot-right svg { width: 15px; height: 15px; transition: transform .3s var(--e-out); }
.hc-foot:hover .hc-foot-right svg { transform: translateX(4px); }

/* Floating blood drops around the visual */
.drop {
    position: absolute;
    z-index: 3;
    width: 46px; height: 46px;
    display: grid; place-items: center;
    border-radius: 50% 50% 50% 0;
    transform: rotate(45deg);
    background: var(--grad-primary);
    box-shadow: var(--sh-glow);
    color: #fff;
    animation: bd-float 6s ease-in-out infinite;
}
.drop svg, .drop i { transform: rotate(-45deg); }
.drop.d1 { top: -18px; left: 8%; animation-delay: 0s; }
.drop.d2 { bottom: 12%; right: -14px; width: 38px; height: 38px; animation-delay: 1.2s; background: var(--grad-warm); box-shadow: var(--sh-glow-amber); }
.drop.d3 { top: 42%; left: -18px; width: 32px; height: 32px; animation-delay: 2.1s; }
.badge-float {
    position: absolute; z-index: 3; right: 4%; top: -14px;
    background: #fff; border-radius: 14px; padding: .5rem .8rem;
    box-shadow: var(--sh-md); display: flex; align-items: center; gap: .5rem;
    font-weight: 700; font-size: .8rem; color: var(--bd-dark);
    animation: bd-float 7s ease-in-out infinite .4s;
}
.badge-float .ic { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: #E7FaEE; color: var(--bd-success); }

/* ============================================================================
   IMPACT STATS  (premium dark band, count-up)
   ============================================================================ */
.stats-band {
    position: relative;
    border-radius: var(--r-xl);
    background: var(--grad-dark);
    color: #fff;
    padding: clamp(1.6rem, 4vw, 2.6rem) clamp(.8rem, 3vw, 1.6rem);
    box-shadow: var(--sh-lg);
    overflow: hidden;
}
.stats-band::after {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background:
        radial-gradient(520px 260px at 88% -30%, rgba(255,107,107,.35), transparent 60%),
        radial-gradient(460px 240px at 0% 130%, rgba(255,183,3,.18), transparent 60%);
}
.stats-band > .row { position: relative; z-index: 2; }
.stat-col { text-align: center; padding: 1.1rem .5rem; }
.stat-ic-lg {
    width: 56px; height: 56px; border-radius: 16px; margin: 0 auto .85rem;
    display: grid; place-items: center;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.14);
    color: #FF9E9E;
    transition: transform .5s var(--e-spring), background .3s;
}
.stat-col:hover .stat-ic-lg { transform: translateY(-5px); background: rgba(255,255,255,.14); }
.stat-ic-lg.amber { color: #FFC24B; }
.stat-ic-lg.green { color: #6FE0A0; }
.stat-ic-lg.blue  { color: #8FB0FF; }
.stat-num-xl {
    font-weight: 800;
    font-size: clamp(2rem, 4.6vw, 3.1rem);
    line-height: 1;
    letter-spacing: -.02em;
    background: linear-gradient(120deg, #FF8A8A 0%, #FFC24B 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
.stat-lbl { color: rgba(255,255,255,.72); font-weight: 600; margin-top: .45rem; }
@media (min-width: 992px) {
    .stat-col.has-sep { border-left: 1px solid rgba(255,255,255,.12); }
}

/* ============================================================================
   BLOOD-GROUP GRID
   ============================================================================ */
@property --pct { syntax: '<number>'; inherits: false; initial-value: 0; }

.bloodcard {
    position: relative; display: flex; flex-direction: column; align-items: center;
    text-align: center; text-decoration: none; height: 100%;
    background: #fff; border: 1px solid var(--bd-line); border-radius: var(--r-lg);
    padding: 1.8rem 1rem 1.5rem; box-shadow: var(--sh-sm); overflow: hidden;
    transition: transform .45s var(--e-out), box-shadow .45s var(--e-out), border-color .3s var(--e-out);
}
.bloodcard::after {
    content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
    background: var(--grad-primary); transform: scaleX(0); transform-origin: left;
    transition: transform .5s var(--e-out);
}
.bloodcard:hover { transform: translateY(-8px); box-shadow: var(--sh-md); }
.bloodcard:hover::after { transform: scaleX(1); }

/* circular availability gauge — code + live count sit inside the ring */
.bg-ring {
    --pct: 0;
    position: relative;
    width: 124px; height: 124px; border-radius: 50%;
    display: grid; place-items: center; margin-bottom: 1.1rem;
    background: conic-gradient(var(--ring, var(--bd-primary)) calc(var(--pct) * 1%), #eef1f6 0);
    transition: --pct 1.1s var(--e-out), transform .45s var(--e-spring);
}
.bloodcard:hover .bg-ring { transform: scale(1.05); }
.bg-ring::before {
    content: ""; position: absolute; inset: 10px; border-radius: 50%;
    background: #fff; box-shadow: inset 0 2px 12px rgba(17,24,39,.07);
}
.bg-ring-in { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; line-height: 1; }
.bg-ring-in .code { font-weight: 800; font-size: 1.55rem; letter-spacing: -.03em; color: var(--bd-dark); }
.bg-ring-in .avail { margin-top: .32rem; font-size: .74rem; font-weight: 800; color: var(--ring, var(--bd-primary)); }
.bg-ring-in .avail small { color: var(--bd-muted); font-weight: 600; }

.bc-status {
    display: inline-flex; align-items: center; gap: .4rem;
    font-size: .74rem; font-weight: 800; padding: .3rem .8rem; border-radius: var(--r-pill); white-space: nowrap;
}
.bc-status .d { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.bc-cta { margin-top: .9rem; font-weight: 700; font-size: .82rem; color: var(--bd-primary-ink); display: inline-flex; align-items: center; gap: .3rem; }
.bc-cta svg { width: 15px; height: 15px; transition: transform .3s var(--e-out); }
.bloodcard:hover .bc-cta svg { transform: translateX(4px); }

/* per-status theming: ring colour, pill, top accent, and a matching hover glow */
.st-plenty   .bg-ring { --ring: #2ECC71; }
.st-plenty   .bc-status { background: #E4F8EC; color: #12A150; } .st-plenty .bc-status .d { background: #2ECC71; }
.st-plenty.bloodcard::after { background: linear-gradient(90deg,#2ECC71,#12A150); }
.st-plenty.bloodcard:hover { border-color: #b7ecc9; box-shadow: 0 24px 46px -18px rgba(46,204,113,.5); }
.st-low      .bg-ring { --ring: #F0A800; }
.st-low      .bc-status { background: #FFF3D6; color: #B5810B; } .st-low .bc-status .d { background: #F0A800; }
.st-low.bloodcard::after { background: linear-gradient(90deg,#FFB703,#F0A800); }
.st-low.bloodcard:hover { border-color: #ffe4a8; box-shadow: 0 24px 46px -18px rgba(255,183,3,.5); }
.st-critical .bg-ring { --ring: #E63946; }
.st-critical .bc-status { background: var(--bd-soft); color: var(--bd-primary-ink); } .st-critical .bc-status .d { background: var(--bd-primary); }
.st-critical.bloodcard::after { background: var(--grad-primary); }
.st-critical.bloodcard { border-color: #ffe0dc; }
.st-critical.bloodcard:hover { border-color: #ffc9c3; box-shadow: 0 24px 46px -18px rgba(230,57,70,.5); }

/* ============================================================================
   EMERGENCY / MOST NEEDED  (compact single-row strip)
   ============================================================================ */
.need-strip {
    position: relative;
    display: flex; align-items: center; gap: 1rem 1.3rem; flex-wrap: wrap;
    background: #fff;
    border: 1px solid var(--bd-line); border-radius: var(--r-lg);
    padding: 1rem 1.3rem 1rem 1.6rem; box-shadow: var(--sh-sm);
    overflow: hidden;
    transition: box-shadow .3s var(--e-out);
}
.need-strip::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
    background: var(--grad-primary);
}
.need-strip:hover { box-shadow: var(--sh-md); }
.ns-label { display: flex; align-items: center; gap: .75rem; flex: none; }
.ns-ic { width: 42px; height: 42px; flex: none; border-radius: 12px; display: grid; place-items: center; background: var(--grad-primary); color: #fff; box-shadow: 0 8px 16px -8px rgba(230,57,70,.75); }
.ns-ic svg { width: 20px; height: 20px; }
.ns-title { font-weight: 800; color: var(--bd-dark); display: inline-flex; align-items: center; gap: .5rem; line-height: 1.15; }
.ns-live { display: inline-flex; align-items: center; gap: .3rem; font-size: .64rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--bd-primary); }
.ns-live .pulse-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--bd-primary); box-shadow: 0 0 0 0 rgba(230,57,70,.55); animation: bd-ping 1.5s ease-out infinite; }
.ns-sub { font-size: .78rem; color: var(--bd-muted); }

.ns-chips { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; flex: 1 1 auto; }
.ns-chip {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .4rem .75rem; border-radius: var(--r-pill);
    border: 1.5px solid; font-weight: 700; font-size: .84rem; white-space: nowrap;
    transition: transform .25s var(--e-spring);
}
.ns-chip:hover { transform: translateY(-2px); }
.ns-chip b { font-weight: 800; }
.ns-chip .cnt { opacity: .8; font-size: .78rem; }
.ns-chip.st-critical { border-color: #ffd4cf; background: var(--bd-soft); color: var(--bd-primary-ink); }
.ns-chip.st-low { border-color: #ffe4a8; background: #FFF8E8; color: #B5810B; }
.ns-chip.st-plenty { border-color: #b7ecc9; background: #E9F9F0; color: #12A150; }
.ns-cta { flex: none; }

@media (max-width: 767.98px) {
    .ns-chips { order: 3; flex-basis: 100%; }
    .ns-cta { order: 2; margin-left: auto; }
}

/* ============================================================================
   EMERGENCY CARDS
   ============================================================================ */
.emg-card {
    position: relative;
    background: #fff;
    border: 1px solid var(--bd-line);
    border-radius: var(--r-lg);
    padding: 1.3rem;
    box-shadow: var(--sh-sm);
    overflow: hidden;
    transition: transform .4s var(--e-out), box-shadow .4s var(--e-out);
    height: 100%;
}
.emg-card::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
    background: var(--grad-primary);
}
.emg-card:hover { transform: translateY(-6px); box-shadow: var(--sh-md); }
.emg-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.pri-badge {
    display: inline-flex; align-items: center; gap: .4rem;
    font-size: .74rem; font-weight: 800; letter-spacing: .03em;
    padding: .32rem .7rem; border-radius: var(--r-pill);
    text-transform: uppercase;
}
.pri-critical { background: var(--bd-soft); color: var(--bd-primary-ink); }
.pri-critical .pulse-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--bd-primary); animation: bd-ping 1.4s ease-out infinite; box-shadow: 0 0 0 0 rgba(230,57,70,.6); }
.pri-urgent { background: #FFF3D6; color: #B5810B; }
.pri-normal { background: #EEF1F6; color: #5b6675; }
.emg-group {
    width: 54px; height: 54px; flex: none;
    border-radius: 16px;
    display: grid; place-items: center;
    background: var(--grad-primary);
    color: #fff; font-weight: 800; font-size: 1.15rem;
    box-shadow: var(--sh-glow);
}
.emg-meta { list-style: none; margin: .9rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .45rem; }
.emg-meta li { display: flex; align-items: center; gap: .55rem; color: #46515f; font-size: .92rem; }
.emg-meta li svg { width: 17px; height: 17px; color: var(--bd-primary); flex: none; }

/* ============================================================================
   HOW IT WORKS  (connected chain / process flow)
   ============================================================================ */
.chain { position: relative; display: flex; flex-wrap: wrap; }
.chain-step {
    position: relative; z-index: 1;
    flex: 1 1 25%; max-width: 25%;
    text-align: center; padding: 0 .75rem;
}
/* the connecting chain line running behind the nodes (desktop) */
.chain::before {
    content: ""; position: absolute; z-index: 0;
    top: 43px; left: 12.5%; right: 12.5%; height: 3px;
    background: linear-gradient(90deg, var(--bd-primary), var(--bd-accent) 60%, var(--bd-primary));
    opacity: .28; border-radius: 3px;
}
/* directional link markers between the nodes (desktop) */
.chain-step:not(:last-child)::after {
    content: ""; position: absolute; z-index: 3;
    top: 35px; right: -9px;
    width: 16px; height: 16px;
    border-top: 3px solid var(--bd-primary);
    border-right: 3px solid var(--bd-primary);
    transform: rotate(45deg);
    opacity: .55;
}
.chain-node {
    position: relative; z-index: 2;
    width: 88px; height: 88px; margin: 0 auto 1.3rem;
    border-radius: 50%;
    background: #fff; border: 3px solid var(--bd-soft);
    display: grid; place-items: center;
    box-shadow: var(--sh-md); color: var(--bd-primary);
    transition: transform .45s var(--e-spring), border-color .3s var(--e-out), background .3s;
}
.chain-node svg { width: 34px; height: 34px; }
.chain-step:hover .chain-node { transform: translateY(-6px) scale(1.05); border-color: var(--bd-primary); }
.chain-node.amber { color: #E8990B; border-color: var(--bd-soft-2); }
.chain-node.green { color: var(--bd-success); border-color: #DCF7E7; }
.chain-node.dark  { color: var(--bd-dark);  border-color: #E7EBF1; }
.chain-num {
    position: absolute; top: -6px; right: -8px;
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--grad-primary); color: #fff;
    display: grid; place-items: center; font-weight: 800; font-size: .85rem;
    box-shadow: var(--sh-glow); border: 3px solid #fff; z-index: 3;
}
.chain-step h5 { font-weight: 800; color: var(--bd-dark); margin-bottom: .4rem; }
.chain-step p { color: var(--bd-muted); font-size: .93rem; margin: 0; max-width: 15rem; margin-inline: auto; }

@media (max-width: 767.98px) {
    .chain-step { flex: 1 1 100%; max-width: 100%; padding: 0 0 2.6rem; }
    .chain::before { display: none; }
    /* turn the link marker into a downward chevron between stacked steps */
    .chain-step:not(:last-child)::after {
        top: auto; bottom: .7rem; right: 50%;
        transform: translateX(50%) rotate(135deg);
        opacity: .5;
    }
}

/* ============================================================================
   WHY CHOOSE US  (glass feature cards)
   ============================================================================ */
.feature-card {
    position: relative;
    height: 100%;
    background: #fff;
    border: 1px solid var(--bd-line);
    border-radius: var(--r-lg);
    padding: 1.6rem;
    box-shadow: var(--sh-sm);
    overflow: hidden;
    transition: transform .4s var(--e-out), box-shadow .4s var(--e-out);
}
.feature-card::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit;
    padding: 1.5px; background: var(--grad-primary);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    opacity: 0; transition: opacity .4s var(--e-out); pointer-events: none;
}
.feature-card:hover { transform: translateY(-8px); box-shadow: var(--sh-md); }
.feature-card:hover::after { opacity: 1; }
.feature-ic {
    width: 58px; height: 58px; border-radius: 16px;
    display: grid; place-items: center; margin-bottom: 1rem;
    background: var(--bd-soft); color: var(--bd-primary);
    transition: transform .5s var(--e-spring);
}
.feature-card:hover .feature-ic { transform: rotate(-8deg) scale(1.08); }
.feature-ic.amber { background: var(--bd-soft-2); color: #E8990B; }
.feature-ic.green { background: #E7FaEE; color: var(--bd-success); }
.feature-ic.dark  { background: #EEF1F6; color: var(--bd-dark); }
.feature-card h5 { font-weight: 800; color: var(--bd-dark); margin-bottom: .4rem; }
.feature-card p { color: var(--bd-muted); margin: 0; font-size: .95rem; }

/* ============================================================================
   FEATURED DONORS
   ============================================================================ */
.donor-tile {
    height: 100%;
    background: #fff;
    border: 1px solid var(--bd-line);
    border-radius: var(--r-lg);
    padding: 1.4rem;
    box-shadow: var(--sh-sm);
    text-align: center;
    transition: transform .4s var(--e-out), box-shadow .4s var(--e-out);
}
.donor-tile:hover { transform: translateY(-8px); box-shadow: var(--sh-md); }
.donor-ava {
    width: 74px; height: 74px; margin: 0 auto .8rem;
    border-radius: 50%; display: grid; place-items: center;
    font-weight: 800; font-size: 1.5rem; color: #fff;
    box-shadow: var(--sh-glow);
    position: relative;
}
.donor-ava .verified {
    position: absolute; right: -2px; bottom: -2px;
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--bd-success); color: #fff;
    display: grid; place-items: center; border: 3px solid #fff;
}
.donor-ava .verified svg { width: 13px; height: 13px; }
.donor-tile h6 { font-weight: 800; margin-bottom: .1rem; color: var(--bd-dark); }
.donor-tile .loc { color: var(--bd-muted); font-size: .85rem; }
.donor-group-pill {
    display: inline-block; margin-top: .5rem;
    font-weight: 800; color: var(--bd-primary-ink);
    background: var(--bd-soft); padding: .2rem .8rem; border-radius: var(--r-pill);
}
.donor-stats { display: flex; justify-content: center; gap: 1.2rem; margin-top: .9rem; padding-top: .9rem; border-top: 1px dashed var(--bd-line); }
.donor-stats .n { font-weight: 800; color: var(--bd-dark); }
.donor-stats .l { font-size: .72rem; color: var(--bd-muted); }
.stars { color: var(--bd-accent); letter-spacing: 1px; }

/* ============================================================================
   TESTIMONIALS (auto-slider)
   ============================================================================ */
.testi-viewport { overflow: hidden; padding: 12px 4px 22px; }
.testi-track {
    display: flex;
    gap: 1.5rem;
    transition: transform .75s var(--e-io);
    will-change: transform;
}
.testi-slide { flex: 0 0 100%; }
@media (min-width: 768px)  { .testi-slide { flex: 0 0 calc(50% - .75rem); } }
@media (min-width: 1200px) { .testi-slide { flex: 0 0 calc(33.333% - 1rem); } }
.testi-card {
    position: relative; height: 100%;
    background: #fff;
    border: 1px solid var(--bd-line);
    border-radius: var(--r-lg);
    padding: 2rem 1.7rem 1.7rem;
    box-shadow: var(--sh-sm);
    overflow: hidden;
    transition: transform .45s var(--e-out), box-shadow .45s var(--e-out), border-color .3s var(--e-out);
}
.testi-card::before {
    content: ""; position: absolute; left: 0; top: 0; height: 4px; width: 100%;
    background: var(--grad-primary); transform: scaleX(0); transform-origin: left;
    transition: transform .55s var(--e-out);
}
.testi-card:hover { transform: translateY(-8px); box-shadow: var(--sh-lg); border-color: #ffe0dc; }
.testi-card:hover::before { transform: scaleX(1); }
/* big faded quote watermark */
.testi-card::after {
    content: "\201D"; position: absolute; top: 1rem; right: 1.3rem; z-index: 0;
    font-family: Georgia, serif; font-size: 5.5rem; line-height: 1; color: #fdecea; pointer-events: none;
}
.testi-card > * { position: relative; z-index: 1; }
.testi-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: 1rem; }
.testi-quote {
    width: 46px; height: 46px; border-radius: 14px; flex: none;
    display: grid; place-items: center;
    background: var(--grad-primary); color: #fff; box-shadow: 0 8px 16px -8px rgba(230,57,70,.7);
    transition: transform .5s var(--e-spring);
}
.testi-card:hover .testi-quote { transform: rotate(-8deg) scale(1.06); }
.testi-quote svg { width: 22px; height: 22px; }
.testi-stars { color: var(--bd-accent); letter-spacing: 2px; font-size: .95rem; }
.testi-card p { color: #3a4452; font-size: 1.04rem; line-height: 1.7; margin: 0; font-weight: 500; }
.testi-person { display: flex; align-items: center; gap: .8rem; margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--bd-line); }
.testi-person .av { position: relative; width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 1.15rem; box-shadow: var(--sh-sm); flex: none; }
.testi-person .av .vf { position: absolute; right: -3px; bottom: -3px; width: 21px; height: 21px; border-radius: 50%; background: var(--bd-success); color: #fff; display: grid; place-items: center; border: 2.5px solid #fff; }
.testi-person .av .vf svg { width: 11px; height: 11px; }
.testi-person .nm { font-weight: 800; color: var(--bd-dark); line-height: 1.15; }
.testi-person .rl { font-size: .82rem; color: var(--bd-muted); }

.testi-nav { display: flex; align-items: center; justify-content: center; gap: 1.1rem; margin-top: 1.4rem; }
.testi-arrow {
    width: 46px; height: 46px; border-radius: 50%;
    border: 1.5px solid var(--bd-line); background: #fff; color: var(--bd-dark);
    display: grid; place-items: center; cursor: pointer;
    box-shadow: var(--sh-xs);
    transition: transform .3s var(--e-spring), background .3s var(--e-out), color .3s, border-color .3s, box-shadow .3s;
}
.testi-arrow:hover { background: var(--grad-primary); border-color: transparent; color: #fff; transform: translateY(-2px); box-shadow: var(--sh-glow); }
.testi-arrow svg { width: 20px; height: 20px; }
.testi-dots { display: flex; align-items: center; gap: .5rem; }
.testi-dots button {
    width: 9px; height: 9px; border-radius: 50%; border: 0; padding: 0;
    background: #d7dde6; cursor: pointer; transition: all .35s var(--e-out);
}
.testi-dots button.active { width: 28px; border-radius: 999px; background: var(--grad-primary); }

/* ---- Clean testimonial grid (simple, balanced cards) ---- */
.t-card {
    height: 100%;
    background: #fff; border: 1px solid var(--bd-line); border-radius: var(--r-lg);
    padding: 1.9rem;
    box-shadow: var(--sh-sm);
    transition: transform .4s var(--e-out), box-shadow .4s var(--e-out), border-color .3s;
}
.t-card:hover { transform: translateY(-6px); box-shadow: var(--sh-md); border-color: #ffe0dc; }
.t-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.t-stars { color: var(--bd-accent); letter-spacing: 2px; font-size: 1rem; }
.t-quote-ic {
    width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
    background: var(--bd-soft); color: var(--bd-primary);
}
.t-quote-ic svg { width: 20px; height: 20px; }
.t-quote { color: #3a4452; line-height: 1.7; font-size: 1.02rem; font-weight: 500; margin: 0 0 1.5rem; }
.t-person { display: flex; align-items: center; gap: .85rem; padding-top: 1.2rem; border-top: 1px solid var(--bd-line); }
.t-avatar {
    position: relative; width: 50px; height: 50px; border-radius: 50%; flex: none;
    display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 1.2rem; box-shadow: var(--sh-sm);
}
.t-avatar .t-vf { position: absolute; right: -3px; bottom: -3px; width: 21px; height: 21px; border-radius: 50%; background: var(--bd-success); color: #fff; display: grid; place-items: center; border: 2.5px solid #fff; }
.t-avatar .t-vf svg { width: 11px; height: 11px; }
.t-name { font-weight: 800; color: var(--bd-dark); line-height: 1.2; }
.t-role { font-size: .84rem; color: var(--bd-muted); }

/* ---- Featured single-quote style (one large testimonial at a time) ---- */
.testi-featured { max-width: 820px; margin-inline: auto; }
.testi-featured .testi-slide { flex: 0 0 100% !important; }
.testi-big {
    position: relative; text-align: center;
    background: #fff; border: 1px solid var(--bd-line); border-radius: var(--r-xl);
    padding: clamp(2rem, 5vw, 3.2rem) clamp(1.4rem, 4vw, 3rem);
    box-shadow: var(--sh-md); overflow: hidden;
}
.testi-big::before {
    content: "\201C"; position: absolute; top: -1.4rem; left: 1.2rem;
    font-family: Georgia, serif; font-size: 9rem; line-height: 1; color: #fdecea; z-index: 0;
}
.testi-big > * { position: relative; z-index: 1; }
.testi-big .quote-ic {
    width: 58px; height: 58px; margin: 0 auto 1.4rem;
    display: grid; place-items: center; border-radius: 18px;
    background: var(--grad-primary); color: #fff; box-shadow: var(--sh-glow);
}
.testi-big .quote-ic svg { width: 26px; height: 26px; }
.testi-big .testi-big-stars { color: var(--bd-accent); letter-spacing: 3px; font-size: 1rem; margin-bottom: 1rem; }
.testi-big-quote {
    font-size: clamp(1.15rem, 2.3vw, 1.5rem); line-height: 1.6; font-weight: 600;
    color: var(--bd-dark); max-width: 42rem; margin: 0 auto 1.8rem; letter-spacing: -.01em;
}
.testi-big-person { display: inline-flex; align-items: center; gap: .9rem; }
.testi-big-person .av {
    position: relative; width: 58px; height: 58px; border-radius: 50%; flex: none;
    display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 1.35rem; box-shadow: var(--sh-sm);
}
.testi-big-person .av .vf { position: absolute; right: -3px; bottom: -3px; width: 22px; height: 22px; border-radius: 50%; background: var(--bd-success); color: #fff; display: grid; place-items: center; border: 2.5px solid #fff; }
.testi-big-person .av .vf svg { width: 12px; height: 12px; }
.testi-big-person .txt { text-align: left; }
.testi-big-person .nm { font-weight: 800; color: var(--bd-dark); font-size: 1.02rem; line-height: 1.2; }
.testi-big-person .rl { font-size: .84rem; color: var(--bd-muted); }

/* ============================================================================
   GALLERY (masonry)
   ============================================================================ */
.masonry { column-gap: 1rem; columns: 1; }
@media (min-width: 576px) { .masonry { columns: 2; } }
@media (min-width: 992px) { .masonry { columns: 3; } }
.masonry-item { break-inside: avoid; margin-bottom: 1rem; position: relative; border-radius: var(--r-md); overflow: hidden; box-shadow: var(--sh-sm); }
.masonry-item img { width: 100%; display: block; transition: transform .6s var(--e-out); }
.masonry-item:hover img { transform: scale(1.08); }
.masonry-item .cap {
    position: absolute; inset: auto 0 0 0; padding: 1.4rem .9rem .8rem;
    background: linear-gradient(180deg, transparent, rgba(11,18,32,.82));
    color: #fff; font-size: .85rem; font-weight: 600;
    transform: translateY(8px); opacity: 0; transition: all .4s var(--e-out);
}
.masonry-item:hover .cap { transform: none; opacity: 1; }

/* ============================================================================
   FAQ (accordion)
   ============================================================================ */
.faq-item {
    background: #fff;
    border: 1px solid var(--bd-line);
    border-radius: var(--r-md);
    margin-bottom: .8rem;
    overflow: hidden;
    box-shadow: var(--sh-xs);
    transition: box-shadow .3s var(--e-out), border-color .3s;
}
.faq-item.open { box-shadow: var(--sh-sm); border-color: #ffd9d4; }
.faq-q {
    width: 100%; text-align: left; border: 0; background: transparent;
    padding: 1.1rem 1.3rem; font-weight: 700; color: var(--bd-dark);
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    cursor: pointer; font-size: 1.02rem;
}
.faq-q .chev { flex: none; transition: transform .35s var(--e-out); color: var(--bd-primary); display: inline-flex; }
.faq-item.open .faq-q .chev { transform: rotate(180deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .4s var(--e-out); }
.faq-a-inner { padding: 0 1.3rem 1.2rem; color: var(--bd-muted); line-height: 1.6; }

/* ============================================================================
   CTA SECTION
   ============================================================================ */
.cta-band {
    position: relative;
    border-radius: var(--r-xl);
    overflow: hidden;
    background: var(--grad-primary);
    background-size: 200% 200%;
    animation: bd-gradient 10s ease infinite;
    color: #fff;
    padding: clamp(2.5rem, 6vw, 4.5rem);
    box-shadow: var(--sh-glow);
}
.cta-band .orb { opacity: .3; mix-blend-mode: overlay; }
.cta-band h2 { font-weight: 800; letter-spacing: -.02em; font-size: clamp(1.8rem, 4vw, 3rem); position: relative; z-index: 2; }
.cta-band p { position: relative; z-index: 2; opacity: .95; }
.cta-band .btn-ghost { position: relative; z-index: 2; }
.cta-heart { display: inline-grid; place-items: center; animation: bd-heart 1.4s var(--e-out) infinite; }

/* ============================================================================
   FOOTER  (premium dark) — upgrades .site-footer
   ============================================================================ */
.site-footer {
    background: var(--grad-dark) !important;
    color: #aab4c4 !important;
    border-top: 0 !important;
    position: relative;
    padding-top: 3.5rem !important;
    overflow: hidden;
}
.site-footer::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: var(--grad-primary);
}
.site-footer h5 { color: #fff !important; font-weight: 800; }
.site-footer a { color: #aab4c4 !important; transition: color .25s, padding-left .25s; }
.site-footer a:hover { color: #fff !important; }
.footer-links a { position: relative; display: inline-flex; align-items: center; }
.footer-links a:hover { padding-left: .35rem; }
.footer-brand-mark {
    width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
    background: var(--grad-primary); color: #fff; box-shadow: var(--sh-glow);
}
.footer-social a {
    width: 42px; height: 42px; border-radius: 12px;
    display: grid; place-items: center;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1);
    color: #cfd7e3 !important;
    transition: all .3s var(--e-spring);
}
.footer-social a:hover { transform: translateY(-4px); background: var(--grad-primary); border-color: transparent; color: #fff !important; box-shadow: var(--sh-glow); }
.footer-social a svg { width: 19px; height: 19px; }
.newsletter-input {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.14);
    color: #fff; border-radius: var(--r-pill);
    padding: .7rem 1.1rem; width: 100%;
    transition: border-color .3s;
}
.newsletter-input::placeholder { color: #7d8798; }
.newsletter-input:focus { outline: none; border-color: var(--bd-primary-2); background: rgba(255,255,255,.1); }
.site-footer .dev-credit { color: #7d8798 !important; }
.site-footer .dev-credit a { color: #aeb7c6 !important; font-weight: 700; }
.site-footer hr { border-color: rgba(255,255,255,.1) !important; }

/* ============================================================================
   FLOATING ACTIONS (restyle existing)
   ============================================================================ */
/* WhatsApp + phone floats moved to the bottom-right (where the Urgent button was) */
.float-actions { left: auto !important; right: 1.1rem !important; }
.float-actions .fa-call { background: var(--grad-warm) !important; }
.float-actions a { transition: transform .3s var(--e-spring), box-shadow .3s var(--e-out); }
.float-actions a:hover { transform: translateY(-3px) scale(1.05); }

/* Back-to-top now lives INSIDE the float-actions column (top of the stack), so it
   can never overlap the WhatsApp/phone buttons. Static flex item, visible on white. */
.back-to-top {
    position: static !important;
    left: auto !important; right: auto !important; bottom: auto !important;
    width: 48px !important; height: 48px !important;
    background: #fff !important;
    color: var(--bd-primary-ink) !important;
    border: 1.5px solid var(--bd-primary) !important;
    box-shadow: var(--sh-md) !important;
    transition: transform .3s var(--e-out), background .3s var(--e-out), color .25s, border-color .3s, box-shadow .3s;
}
.back-to-top i { font-size: 1.15rem; }
.back-to-top:hover {
    background: var(--grad-primary) !important;
    color: #fff !important;
    border-color: transparent !important;
    transform: translateY(-3px);
    box-shadow: var(--sh-glow) !important;
}

/* ============================================================================
   SHARED PAGE UPGRADES  (inner public pages inherit the premium look)
   ============================================================================ */
.page-hero {
    position: relative;
    padding: clamp(2.6rem, 6vw, 4rem) 0 clamp(2rem, 4vw, 3rem);
    background:
        radial-gradient(700px 320px at 90% -20%, #FFE7E4 0%, transparent 60%),
        linear-gradient(180deg, #fff, var(--bd-light));
    overflow: hidden;
    text-align: center;
}
.page-hero h1 { font-weight: 800; letter-spacing: -.02em; color: var(--bd-dark); font-size: clamp(1.8rem, 4vw, 2.6rem); }
.page-hero .lead { color: var(--bd-muted); }

/* Check list (About "who we are", etc.) */
.check-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .75rem; }
.check-list li { display: flex; align-items: center; gap: .7rem; font-weight: 600; color: #3a4452; }
.check-list li svg { width: 22px; height: 22px; flex: none; color: #fff; background: var(--grad-primary); border-radius: 50%; padding: 4px; box-shadow: 0 6px 14px -6px rgba(230,57,70,.7); }

/* Cards used across public forms */
.card-soft {
    background: #fff;
    border: 1px solid var(--bd-line);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-sm);
}
.card-admin {
    border-radius: var(--r-lg) !important;
    border: 1px solid var(--bd-line) !important;
    box-shadow: var(--sh-sm) !important;
    background: #fff;
}

/* Form controls — softer, floating focus ring */
.section .form-control,
.section .form-select,
.page-section .form-control,
.page-section .form-select,
.card-admin .form-control,
.card-admin .form-select {
    border-radius: 12px;
    border: 1.5px solid #e4e9f0;
    padding: .7rem .9rem;
    transition: border-color .25s, box-shadow .25s;
}
.form-control:focus,
.form-select:focus {
    border-color: var(--bd-primary);
    box-shadow: 0 0 0 4px rgba(230,57,70,.12);
}
.form-label { font-weight: 600; color: #3a4452; }

/* Legacy button upgrade on public pages (keeps class names used in views) */
main .btn-primary,
.section .btn-primary {
    background: var(--grad-primary) !important;
    border: 0 !important;
    border-radius: var(--r-pill) !important;
    font-weight: 700;
    box-shadow: var(--sh-glow);
    transition: transform .28s var(--e-spring), box-shadow .3s !important;
}
main .btn-primary:hover,
.section .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 24px 48px -14px rgba(230,57,70,.6) !important; }
main .btn-outline-primary,
.section .btn-outline-primary {
    color: var(--bd-primary-ink) !important;
    border: 1.5px solid var(--bd-primary) !important;
    border-radius: var(--r-pill) !important;
    font-weight: 700;
}
main .btn-outline-primary:hover,
.section .btn-outline-primary:hover { background: var(--grad-primary) !important; border-color: transparent !important; color: #fff !important; }

.section-head h1, .section-head h2 { font-weight: 800; letter-spacing: -.02em; color: var(--bd-dark); }

/* Badges reused by inner pages */
.badge-available { background: #E4F8EC !important; color: #12A150 !important; border-radius: var(--r-pill); font-weight: 700; }
.badge-unavailable { background: #EEF1F6 !important; color: #5b6675 !important; border-radius: var(--r-pill); font-weight: 700; }

/* Search / filter panel (Find Donor, Gallery filters) */
.search-panel {
    background: rgba(255,255,255,.75);
    backdrop-filter: blur(14px) saturate(150%);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    border: 1px solid var(--bd-line);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-md);
    padding: 1.4rem;
}
.chip-filter {
    display: inline-flex; align-items: center; gap: .4rem;
    border: 1.5px solid #e4e9f0; background: #fff;
    color: #3a4452; font-weight: 700; font-size: .9rem;
    padding: .5rem 1.05rem; border-radius: var(--r-pill);
    transition: all .3s var(--e-out); text-decoration: none;
}
.chip-filter:hover { border-color: var(--bd-primary); color: var(--bd-primary-ink); transform: translateY(-2px); }
.chip-filter.active { background: var(--grad-primary); border-color: transparent; color: #fff; box-shadow: var(--sh-glow); }

/* Donor result card (search results) */
.donor-result {
    position: relative;
    height: 100%;
    background: #fff;
    border: 1px solid var(--bd-line);
    border-radius: var(--r-lg);
    padding: 1.3rem;
    box-shadow: var(--sh-sm);
    transition: transform .4s var(--e-out), box-shadow .4s var(--e-out);
}
.donor-result:hover { transform: translateY(-6px); box-shadow: var(--sh-md); }
.donor-result .dr-top { display: flex; align-items: center; gap: .8rem; }
.donor-result .dr-ava {
    width: 50px; height: 50px; flex: none; border-radius: 14px;
    display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 1.15rem;
    background: var(--grad-primary); box-shadow: var(--sh-glow);
}
.donor-result .dr-name { font-weight: 800; color: var(--bd-dark); line-height: 1.15; }
.donor-result .dr-loc { color: var(--bd-muted); font-size: .82rem; }
.donor-result .dr-group {
    margin-left: auto; font-weight: 800; color: var(--bd-primary-ink);
    background: var(--bd-soft); border-radius: 12px; padding: .35rem .6rem; font-size: 1.05rem;
}

/* Gallery lightbox */
.lightbox {
    position: fixed; inset: 0; z-index: 2000;
    background: rgba(11,18,32,.9);
    backdrop-filter: blur(6px);
    display: none; align-items: center; justify-content: center;
    padding: 2rem; opacity: 0; transition: opacity .3s var(--e-out);
}
.lightbox.show { display: flex; opacity: 1; }
.lightbox img { max-width: 100%; max-height: 86vh; border-radius: var(--r-md); box-shadow: var(--sh-lg); }
.lightbox .lb-close {
    position: absolute; top: 1.2rem; right: 1.4rem;
    width: 46px; height: 46px; border-radius: 50%; border: 0;
    background: rgba(255,255,255,.12); color: #fff; font-size: 1.4rem; cursor: pointer;
    display: grid; place-items: center; transition: background .25s;
}
.lightbox .lb-close:hover { background: rgba(255,255,255,.25); }

/* OTP boxed input */
.otp-input {
    letter-spacing: .8em; text-align: center; font-weight: 800; font-size: 1.6rem;
    text-indent: .8em;
}

/* About story / value tiles reuse .feature-card & .step-node */
.about-hero-visual {
    border-radius: var(--r-xl); overflow: hidden;
    background: var(--grad-dark); color: #fff; padding: 2rem;
    box-shadow: var(--sh-lg); position: relative;
}

/* ============================================================================
   REVEAL ANIMATIONS  (piggyback on motion.js — it adds .motion + .in)
   ============================================================================ */
.motion .reveal.rv-l  { transform: translateX(-44px); }
.motion .reveal.rv-r  { transform: translateX(44px); }
.motion .reveal.rv-s  { transform: scale(.9); }
.motion .reveal.rv-l.in,
.motion .reveal.rv-r.in,
.motion .reveal.rv-s.in { transform: none; }

/* Tilt cards get a soft perspective container */
.tilt { transform-style: preserve-3d; transition: transform .25s var(--e-out); }

/* Spotlight that follows the cursor inside a hero/CTA */
.spotlight { position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.35), transparent 60%);
    opacity: 0; transition: opacity .4s; }
.has-spotlight:hover .spotlight { opacity: 1; }

/* Skeleton shimmer utility */
.skeleton { background: linear-gradient(90deg, #eef1f6 25%, #f7f9fc 37%, #eef1f6 63%); background-size: 400% 100%; animation: bd-shimmer 1.4s ease infinite; border-radius: 8px; }

/* ============================================================================
   KEYFRAMES
   ============================================================================ */
@keyframes bd-gradient { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
@keyframes bd-ping { 0%{box-shadow:0 0 0 0 rgba(230,57,70,.55)} 70%{box-shadow:0 0 0 10px rgba(230,57,70,0)} 100%{box-shadow:0 0 0 0 rgba(230,57,70,0)} }
@keyframes bd-float { 0%,100%{transform:rotate(45deg) translateY(0)} 50%{transform:rotate(45deg) translateY(-12px)} }
@keyframes bd-ripple { to { transform: scale(2.6); opacity: 0; } }
@keyframes bd-ecg { to { stroke-dashoffset: 0; } }
@keyframes bd-heart { 0%,100%{transform:scale(1)} 15%{transform:scale(1.22)} 30%{transform:scale(1)} 45%{transform:scale(1.14)} }
@keyframes bd-beat { 0%,55%,100%{transform:scale(1)} 12%{transform:scale(1.09)} 24%{transform:scale(1)} 36%{transform:scale(1.05)} }
@keyframes bd-draw { to { stroke-dashoffset: 0; } }
@keyframes bd-shimmer { 0%{background-position:100% 0} 100%{background-position:-100% 0} }

/* .badge-float float uses translate (not rotate) */
@keyframes bd-float-y { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
.badge-float { animation-name: bd-float-y; }

/* ============================================================================
   REDUCED MOTION
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
    .announce-bar, .cta-band, .eyebrow .dot, .pulse-dot,
    .drop, .badge-float, .hero-card .hc-live .pulse-dot,
    .cta-heart, .ecg path, .skeleton, .hero .display-hero .grad-text,
    .badge-live-dot, .heartbeat-wrap .hb-bpm { animation: none !important; }
    .hero-card:hover, .hc-chip:hover, .hero-pill:hover, .need-tile:hover { transform: none; }
    .hl-underline path { animation: none !important; stroke-dashoffset: 0 !important; }
    .btn-cta:hover, .btn-ghost:hover, .bloodcard:hover, .feature-card:hover,
    .chain-step:hover .chain-node, .donor-tile:hover, .emg-card:hover, .donor-result:hover,
    .bloodcard:hover .bg-ring, .stat-col:hover .stat-ic-lg { transform: none; }
    .bg-ring { transition: none !important; }
}

/* ============================================================================
   RESPONSIVE
   ============================================================================ */
@media (max-width: 991.98px) {
    .hero-visual { margin-top: 2.5rem; }
}
@media (max-width: 767.98px) {
    .hero-cta-row .btn-cta, .hero-cta-row .btn-ghost { flex: 1 1 100%; }
    .stat-card { padding: 1.2rem .8rem; }
    .hero { text-align: center; }
    .hero .eyebrow, .hero-cta-row { justify-content: center; }
    .hero-sub, .hero-trust { margin-inline: auto; justify-content: center; }
}