/* =====================================================================
   AlBir Charity — Modern redesign
   Palette inspired by aljadidfamily.com
   ===================================================================== */

:root {
    /* Brand */
    --brand-navy:        #1e2748;   /* deep navy */
    --brand-navy-2:      #2a345e;   /* lighter navy for gradients */
    --brand-indigo:      #4f5bf5;   /* primary action / link */
    --brand-indigo-700:  #3a47d4;   /* hover */
    --brand-indigo-soft: #eef0fa;   /* page surface tint */
    --brand-gold:        #d4b86a;   /* accents (badges, eyebrows) */
    --brand-gold-soft:   #f6efd8;
    --brand-amber:       #f59e2c;   /* warm CTA */
    --brand-amber-700:   #db8514;

    /* Functional */
    --success:           #1faa6e;
    --success-soft:      #e0f5ec;
    --danger:            #ef4444;
    --danger-soft:       #fdecec;
    --warning:           #eab308;
    --info:              #4f5bf5;

    /* Neutral */
    --bg:                #f5f6fb;
    --bg-soft:           #eef0fa;
    --surface:           #ffffff;
    --text:              #1a1f3a;
    --text-muted:        #6b7390;
    --border:            #e3e6f3;
    --border-strong:     #cdd2e8;

    /* Effects */
    --shadow-xs: 0 1px 2px rgba(30,39,72,.06);
    --shadow-sm: 0 2px 8px rgba(30,39,72,.06), 0 1px 2px rgba(30,39,72,.04);
    --shadow-md: 0 6px 18px rgba(30,39,72,.08), 0 2px 6px rgba(30,39,72,.05);
    --shadow-lg: 0 18px 40px rgba(30,39,72,.12), 0 6px 14px rgba(30,39,72,.06);
    --radius-sm: 10px;
    --radius:    14px;
    --radius-lg: 20px;
    --radius-pill: 999px;
}

/* ===== Base ===== */
html, body {
    background-color: var(--bg);
    color: var(--text);
    font-family: 'Cairo', system-ui, -apple-system, "Segoe UI", sans-serif;
    font-feature-settings: "ss01", "ss02";
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a { color: var(--brand-indigo); text-decoration: none; transition: color .18s ease; }
a:hover { color: var(--brand-indigo-700); }

::selection { background: var(--brand-indigo); color: #fff; }

/* Decorative subtle background pattern, used by hero etc. */
.bg-dotgrid {
    background-image: radial-gradient(rgba(79,91,245,.18) 1px, transparent 1.4px);
    background-size: 22px 22px;
}

/* ===== Navbar ===== */
.navbar.navbar-main {
    background: rgba(255,255,255,.85) !important;
    backdrop-filter: saturate(160%) blur(10px);
    -webkit-backdrop-filter: saturate(160%) blur(10px);
    border-bottom: 1px solid var(--border);
    padding: .55rem 0;
}
.navbar.navbar-main .navbar-brand {
    font-weight: 800;
    font-size: 1.18rem;
    color: var(--brand-navy) !important;
    letter-spacing: -.3px;
    display: inline-flex; align-items: center; gap: .55rem;
}
.navbar.navbar-main .navbar-brand i {
    color: var(--brand-indigo) !important;
    background: var(--brand-indigo-soft);
    width: 36px; height: 36px;
    border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .95rem;
}
.navbar.navbar-main .nav-link {
    color: var(--text) !important;
    font-size: .94rem;
    font-weight: 600;
    padding: .5rem .95rem !important;
    border-radius: 10px;
    transition: background .18s, color .18s;
}
.navbar.navbar-main .nav-link:hover {
    color: var(--brand-indigo) !important;
    background: var(--brand-indigo-soft);
}
.navbar.navbar-main .nav-link.active {
    color: var(--brand-indigo) !important;
}
.navbar.navbar-main .btn-login {
    border: 1.5px solid var(--border-strong);
    color: var(--brand-navy);
    background: #fff;
    font-size: .85rem;
    font-weight: 700;
    padding: .42rem 1.05rem;
    border-radius: var(--radius-pill);
    transition: all .18s;
}
.navbar.navbar-main .btn-login:hover {
    border-color: var(--brand-indigo);
    color: var(--brand-indigo);
    background: var(--brand-indigo-soft);
}

/* Toggler refinement */
.navbar.navbar-main .navbar-toggler { padding: .25rem .5rem; }
.navbar.navbar-main .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='%231e2748' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ===== Hero ===== */
.hero-section {
    position: relative;
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(1100px 480px at 80% -10%, rgba(79,91,245,.55) 0%, transparent 60%),
        radial-gradient(900px 420px at 0% 20%,  rgba(212,184,106,.18) 0%, transparent 60%),
        linear-gradient(135deg, #1a2147 0%, #2a345e 55%, #1e2748 100%);
}
.hero-section::before {
    content: '';
    position: absolute; inset: 0;
    background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1.4px);
    background-size: 22px 22px;
    pointer-events: none;
    mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
}
.hero-section .display-4 {
    font-weight: 800;
    letter-spacing: -.5px;
    line-height: 1.18;
}
.hero-wave { display: none; } /* replaced by clean transition */

/* ===== Hero animations ===== */
.hero-animated {
    background-size: 200% 200%, 200% 200%, 200% 200%;
    animation: heroGradientShift 18s ease-in-out infinite;
}
@keyframes heroGradientShift {
    0%   { background-position: 0% 0%, 100% 100%, 0% 50%; }
    50%  { background-position: 100% 50%, 0% 0%, 100% 50%; }
    100% { background-position: 0% 0%, 100% 100%, 0% 50%; }
}

/* Floating colored orbs */
.hero-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: .55;
    pointer-events: none;
    z-index: 0;
}
.hero-orb-1 {
    width: 320px; height: 320px;
    background: radial-gradient(circle, rgba(212,184,106,.7), transparent 70%);
    top: -80px; left: -60px;
    animation: heroOrbA 14s ease-in-out infinite;
}
.hero-orb-2 {
    width: 380px; height: 380px;
    background: radial-gradient(circle, rgba(79,91,245,.55), transparent 70%);
    bottom: -120px; right: -80px;
    animation: heroOrbB 17s ease-in-out infinite;
}
.hero-orb-3 {
    width: 220px; height: 220px;
    background: radial-gradient(circle, rgba(16,185,129,.45), transparent 70%);
    top: 40%; right: 30%;
    animation: heroOrbC 12s ease-in-out infinite;
}
@keyframes heroOrbA {
    0%,100% { transform: translate(0,0) scale(1); }
    50%     { transform: translate(60px, 40px) scale(1.15); }
}
@keyframes heroOrbB {
    0%,100% { transform: translate(0,0) scale(1); }
    50%     { transform: translate(-50px, -30px) scale(1.1); }
}
@keyframes heroOrbC {
    0%,100% { transform: translate(0,0) scale(1); opacity: .4; }
    50%     { transform: translate(30px, -40px) scale(1.2); opacity: .65; }
}

/* Floating decorative icons */
.hero-float {
    position: absolute;
    color: rgba(212,184,106,.35);
    font-size: 2rem;
    pointer-events: none;
    z-index: 1;
    text-shadow: 0 4px 18px rgba(0,0,0,.25);
}
.hero-float-1 { top: 18%; left: 8%;  font-size: 1.6rem; animation: heroFloat 6s ease-in-out infinite; }
.hero-float-2 { top: 70%; left: 12%; font-size: 2.2rem; animation: heroFloat 8s ease-in-out infinite -2s; color: rgba(255,255,255,.18); }
.hero-float-3 { top: 22%; right: 9%; font-size: 2rem;   animation: heroFloat 7s ease-in-out infinite -3s; }
@keyframes heroFloat {
    0%,100% { transform: translateY(0) rotate(0deg); }
    50%     { transform: translateY(-18px) rotate(6deg); }
}

/* Entrance animations for inner content */
.hero-anim {
    opacity: 0;
    transform: translateY(22px);
    animation: heroRise .9s cubic-bezier(.2,.7,.2,1) forwards;
}
.hero-anim-1 { animation-delay: .05s; }
.hero-anim-2 { animation-delay: .25s; }
.hero-anim-3 { animation-delay: .45s; }
.hero-anim-4 { animation-delay: .60s; }
.hero-anim-5 { animation-delay: .80s; }
@keyframes heroRise {
    to { opacity: 1; transform: translateY(0); }
}

/* Animated dot in eyebrow chip */
.eyebrow-chip .dot {
    animation: heroDotPulse 1.8s ease-in-out infinite;
}
@keyframes heroDotPulse {
    0%,100% { box-shadow: 0 0 0 4px rgba(212,184,106,.25); transform: scale(1); }
    50%     { box-shadow: 0 0 0 8px rgba(212,184,106,.05); transform: scale(1.15); }
}

/* Title shine sweep */
.hero-shine {
    background: linear-gradient(90deg, #fff 0%, #fff 40%, #ffe9ad 50%, #fff 60%, #fff 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: heroRise .9s cubic-bezier(.2,.7,.2,1) forwards, heroShine 6s linear infinite 1.2s;
}
@keyframes heroShine {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* CTA gentle pulse */
.hero-cta-pulse {
    box-shadow: 0 0 0 0 rgba(212,184,106,.55);
    animation: heroCtaPulse 2.4s ease-out infinite 1.4s;
}
@keyframes heroCtaPulse {
    0%   { box-shadow: 0 0 0 0 rgba(212,184,106,.55); }
    70%  { box-shadow: 0 0 0 18px rgba(212,184,106,0); }
    100% { box-shadow: 0 0 0 0 rgba(212,184,106,0); }
}

@media (prefers-reduced-motion: reduce) {
    .hero-animated, .hero-orb, .hero-float, .hero-anim,
    .eyebrow-chip .dot, .hero-shine, .hero-cta-pulse {
        animation: none !important;
    }
    .hero-anim { opacity: 1; transform: none; }
    .hero-shine { -webkit-text-fill-color: #fff; color: #fff; }
}

/* Eyebrow chip used in hero & sections */
.eyebrow-chip {
    display: inline-flex; align-items: center; gap: .5rem;
    background: rgba(255,255,255,.12);
    color: #fff;
    border: 1px solid rgba(255,255,255,.22);
    padding: .35rem 1rem;
    border-radius: var(--radius-pill);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .6px;
    backdrop-filter: blur(6px);
}
.eyebrow-chip .dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--brand-gold);
    box-shadow: 0 0 0 4px rgba(212,184,106,.25);
}

/* ===== Section labels ===== */
.section-eyebrow {
    display: inline-block;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--brand-indigo);
    background: var(--brand-indigo-soft);
    padding: .3rem .85rem;
    border-radius: var(--radius-pill);
}
.section-title {
    font-size: 2rem;
    font-weight: 800;
    color: var(--brand-navy);
    letter-spacing: -.4px;
    margin-top: .8rem;
}
.section-sub { color: var(--text-muted); max-width: 640px; margin-inline: auto; }

/* ===== Stats strip ===== */
.stats-strip {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    margin-top: -42px; position: relative; z-index: 3;
}
.stat-item { text-align: center; padding: 1.4rem 1rem; }
.stat-number {
    font-size: 2rem;
    font-weight: 800;
    color: var(--brand-navy);
    line-height: 1;
    background: linear-gradient(135deg, var(--brand-navy), var(--brand-indigo));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
.stat-label { color: var(--text-muted); font-size: .88rem; margin-top: .35rem; font-weight: 600; }
.stat-divider { width: 1px; background: var(--border); }

/* ===== Cards (general) ===== */
.card { border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-xs); }

/* ===== Case card ===== */
.case-card {
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-lg) !important;
    overflow: hidden;
    background: var(--surface);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    box-shadow: var(--shadow-sm) !important;
}
.case-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg) !important;
    border-color: var(--brand-indigo) !important;
}
.case-card-img {
    height: 210px;
    overflow: hidden;
    background: linear-gradient(135deg, var(--bg-soft), #fff);
    position: relative;
}
.case-card-img img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}
.case-card:hover .case-card-img img { transform: scale(1.06); }

/* badges */
.cat-badge {
    background: var(--brand-indigo-soft);
    color: var(--brand-indigo);
    font-weight: 700;
    font-size: .74rem;
    padding: .28rem .6rem;
    border-radius: var(--radius-pill);
}
.badge-active {
    background: var(--success-soft);
    color: var(--success);
    font-weight: 700;
    padding: .28rem .6rem;
    border-radius: var(--radius-pill);
}
.badge-closed {
    background: #eef0f6;
    color: #67708a;
    font-weight: 700;
    padding: .28rem .6rem;
    border-radius: var(--radius-pill);
}

/* ===== Progress bar ===== */
.progress {
    background: var(--bg-soft);
    border-radius: var(--radius-pill);
    overflow: hidden;
}
.progress-bar.bar-orange,
.progress-bar.bar-gold {
    background: linear-gradient(90deg, var(--brand-amber), var(--brand-gold)) !important;
    border-radius: var(--radius-pill);
    transition: width 1s ease;
}
.progress-bar.bar-indigo {
    background: linear-gradient(90deg, var(--brand-indigo), #7f88f7) !important;
}

/* ===== Pills (category tabs) ===== */
.nav-pills .nav-link {
    color: var(--text);
    background: #fff;
    border: 1.5px solid var(--border);
    font-size: .9rem;
    font-weight: 700;
    padding: .5rem 1.15rem;
    border-radius: var(--radius-pill);
    transition: all .18s;
}
.nav-pills .nav-link:hover {
    border-color: var(--brand-indigo);
    color: var(--brand-indigo);
    background: var(--brand-indigo-soft);
}
.nav-pills .nav-link.active {
    background: var(--brand-navy) !important;
    border-color: var(--brand-navy) !important;
    color: #fff !important;
    box-shadow: 0 6px 18px rgba(30,39,72,.25);
}

/* ===== Buttons ===== */
.btn { font-weight: 700; border-radius: var(--radius-pill); transition: all .18s; }
.btn-lg { padding: .7rem 1.5rem; font-size: 1rem; }

.btn-donate {
    background: linear-gradient(135deg, var(--brand-amber), #ffb84a);
    color: #fff !important;
    border: none;
    padding: .6rem 1.6rem;
    box-shadow: 0 8px 22px rgba(245,158,44,.35);
}
.btn-donate:hover {
    background: linear-gradient(135deg, var(--brand-amber-700), var(--brand-amber));
    box-shadow: 0 12px 28px rgba(245,158,44,.45);
    transform: translateY(-1px);
}

.btn-primary,
.btn-indigo {
    background: var(--brand-indigo) !important;
    border-color: var(--brand-indigo) !important;
    color: #fff !important;
    box-shadow: 0 6px 18px rgba(79,91,245,.28);
}
.btn-primary:hover,
.btn-indigo:hover {
    background: var(--brand-indigo-700) !important;
    border-color: var(--brand-indigo-700) !important;
    box-shadow: 0 10px 24px rgba(79,91,245,.36);
    transform: translateY(-1px);
}

.btn-navy {
    background: var(--brand-navy) !important;
    color: #fff !important;
    border: none;
    box-shadow: 0 6px 18px rgba(30,39,72,.28);
}
.btn-navy:hover {
    background: var(--brand-navy-2) !important;
    box-shadow: 0 10px 24px rgba(30,39,72,.36);
    transform: translateY(-1px);
    color: #fff !important;
}

.btn-outline-navy {
    border: 1.5px solid var(--border-strong);
    color: var(--brand-navy);
    background: #fff;
}
.btn-outline-navy:hover {
    border-color: var(--brand-navy);
    background: var(--brand-navy);
    color: #fff;
}

.btn-ghost-light {
    background: rgba(255,255,255,.10);
    color: #fff !important;
    border: 1.5px solid rgba(255,255,255,.28);
    backdrop-filter: blur(6px);
}
.btn-ghost-light:hover {
    background: rgba(255,255,255,.18);
    color: #fff !important;
}

.btn-whatsapp {
    background: #25D366;
    color: #fff !important;
    border: none;
    border-radius: var(--radius);
    font-weight: 700;
}
.btn-whatsapp:hover {
    background: #1aad52;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(37,211,102,.35);
}

/* ===== Step / feature cards ===== */
.step-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.6rem;
    text-align: center;
    height: 100%;
    transition: transform .2s, box-shadow .2s, border-color .2s;
}
.step-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--brand-indigo);
}
.step-icon {
    width: 72px; height: 72px;
    border-radius: 22px;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--brand-indigo), #7f88f7);
    color: #fff;
    font-size: 1.5rem;
    margin-bottom: 1rem;
    box-shadow: 0 10px 24px rgba(79,91,245,.32);
}
.step-icon.gold { background: linear-gradient(135deg, var(--brand-gold), #ecd28b); box-shadow: 0 10px 24px rgba(212,184,106,.35); }
.step-icon.amber { background: linear-gradient(135deg, var(--brand-amber), #ffb84a); box-shadow: 0 10px 24px rgba(245,158,44,.35); }
.step-num {
    display: inline-block;
    background: var(--brand-indigo-soft);
    color: var(--brand-indigo);
    font-weight: 800;
    font-size: .8rem;
    padding: .2rem .6rem;
    border-radius: var(--radius-pill);
    margin-bottom: .5rem;
}

/* ===== Trust strip ===== */
.trust-strip {
    background: linear-gradient(135deg, var(--brand-navy) 0%, var(--brand-navy-2) 100%);
    color: #fff;
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: var(--shadow-md);
}
.trust-icon {
    width: 48px; height: 48px;
    border-radius: 14px;
    background: rgba(255,255,255,.10);
    color: var(--brand-gold);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.15rem;
}

/* ===== Case detail ===== */
.case-detail-header { background: var(--bg-soft); border-radius: var(--radius-lg); }
.case-placeholder-img {
    background: linear-gradient(135deg, var(--bg-soft), #fff);
    height: 320px;
    border-radius: var(--radius-lg);
    display: flex; align-items: center; justify-content: center;
    color: var(--brand-indigo);
}
.card-header-gradient {
    background: linear-gradient(135deg, var(--brand-navy), var(--brand-indigo));
    color: #fff;
}
.bank-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: all .18s;
}
.bank-card:hover {
    border-color: var(--brand-indigo);
    box-shadow: var(--shadow-sm);
    transform: translateY(-2px);
}

/* ===== Footer ===== */
.site-footer {
    background: var(--brand-navy);
    color: rgba(255,255,255,.78);
    padding-top: 3.5rem;
    padding-bottom: 1.5rem;
    margin-top: 4rem;
    position: relative;
    overflow: hidden;
}
.site-footer::before {
    content: '';
    position: absolute; inset: 0;
    background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1.3px);
    background-size: 22px 22px;
    pointer-events: none;
    opacity: .6;
}
.site-footer .container { position: relative; z-index: 1; }
.site-footer h5, .site-footer h6 { color: #fff; font-weight: 800; }
.site-footer a { color: rgba(255,255,255,.65); }
.site-footer a:hover { color: var(--brand-gold); }
.footer-divider { border-color: rgba(255,255,255,.10); }
.social-pill {
    width: 38px; height: 38px;
    border-radius: 12px;
    background: rgba(255,255,255,.08);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    transition: all .18s;
}
.social-pill:hover { background: var(--brand-indigo); color: #fff; transform: translateY(-2px); }

/* ===== Alerts ===== */
.alert {
    border: none;
    border-right: 4px solid;
    border-radius: var(--radius);
    background: #fff;
    box-shadow: var(--shadow-xs);
}
.alert-success { border-right-color: var(--success); color: #115e3b; }
.alert-danger  { border-right-color: var(--danger); color: #8c1c1c; }
.alert-warning { border-right-color: var(--warning); color: #7a5b07; }

/* ===== Forms ===== */
.form-control, .form-select {
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--border);
    padding: .55rem .85rem;
    font-size: .95rem;
    transition: border-color .18s, box-shadow .18s;
}
.form-control:focus, .form-select:focus {
    border-color: var(--brand-indigo);
    box-shadow: 0 0 0 .2rem rgba(79,91,245,.18);
}
.form-label { font-weight: 700; color: var(--brand-navy); font-size: .9rem; }

/* ===== Tables ===== */
.table { color: var(--text); }
.table > :not(caption) > * > * { padding: .85rem .85rem; vertical-align: middle; }
.table thead th {
    background: var(--bg-soft);
    color: var(--brand-navy);
    font-weight: 800;
    font-size: .85rem;
    border-bottom: 1px solid var(--border);
    text-transform: none;
}
.table-hover tbody tr:hover { background: var(--bg-soft); }

/* ===== Badges (bootstrap overrides for status) ===== */
.badge.bg-success { background: var(--success) !important; }
.badge.bg-danger  { background: var(--danger) !important; }
.badge.bg-warning { background: var(--warning) !important; color: #4a3a06 !important; }
.badge.bg-secondary { background: #6b7390 !important; }
.badge.bg-primary { background: var(--brand-indigo) !important; }

/* ===== Utility ===== */
.text-brand { color: var(--brand-indigo) !important; }
.text-navy { color: var(--brand-navy) !important; }
.text-gold { color: var(--brand-gold) !important; }
.bg-brand-soft { background: var(--brand-indigo-soft) !important; }
.bg-navy { background: var(--brand-navy) !important; }
.rounded-2xl { border-radius: var(--radius-lg) !important; }
.shadow-soft { box-shadow: var(--shadow-md) !important; }

/* ===== Responsive ===== */
@media (max-width: 991.98px) {
    .navbar.navbar-main .navbar-collapse {
        background: #fff;
        margin-top: .5rem;
        padding: .75rem;
        border-radius: var(--radius);
        box-shadow: var(--shadow-sm);
        border: 1px solid var(--border);
    }
    .navbar.navbar-main .nav-link { padding: .55rem .75rem !important; }
    .stats-strip { margin-top: 0; }
}

@media (max-width: 768px) {
    .display-4 { font-size: 1.85rem; }
    .lead { font-size: 1rem; }
    .section-title { font-size: 1.4rem; }
    .stat-number { font-size: 1.55rem; }
    .stat-item { padding: 1rem .5rem; }
    .stats-strip { margin-top: 0; }
    .hero-section { text-align: center; padding-top: 2rem !important; padding-bottom: 2rem !important; }
    .hero-section .container { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
    .case-card-img { height: 180px; }
    .step-card { padding: 1.25rem; }
    .step-icon { width: 60px; height: 60px; font-size: 1.25rem; }
    .nav-pills .nav-link { padding: .4rem .85rem; font-size: .85rem; }
    .btn-lg { padding: .55rem 1.15rem; font-size: .92rem; }
    .site-footer { padding-top: 2.5rem; margin-top: 2.5rem; }
    .table > :not(caption) > * > * { padding: .55rem .55rem; font-size: .85rem; }
}

@media (max-width: 575.98px) {
    .stat-divider, .border-end, .border-start { border: 0 !important; }
    .stats-strip .col-md-4 + .col-md-4 { border-top: 1px solid var(--border); }
    .display-4 { font-size: 1.6rem; }
    .eyebrow-chip { font-size: .7rem; padding: .3rem .8rem; }
}