/*
 *   Conjured Upon This Day, Thu Apr 02 2026
 *
 *   From his finger tips, through his IDE to your deployment environment at full throttle with no bugs, loss of data,
 *   fluctuations, signal interference, or doubt—it can only be
 *
 *   ███╗   ███╗ ██████╗ ██████╗ ████████╗██╗███╗   ██╗
 *   ████╗ ████║██╔═══██╗██╔══██╗╚══██╔══╝██║████╗  ██║
 *   ██╔████╔██║███████║║██████╔╝   ██║   ██║██╔██╗ ██║
 *   ██║╚██╔╝██║██╔══██║ ██╔══██╗   ██║   ██║██║╚██╗██║
 *   ██║ ╚═╝ ██║██║  ██║ ██║  ██║   ██║   ██║██║ ╚████║
 *   ╚═╝     ╚═╝╚═╝  ╚═╝ ╚═╝  ╚═╝   ╚═╝   ╚═╝╚═╝  ╚═══╝
 *   M B I T H I — The Legendary Coding Wizard 
 *
 *   📧  martin@devlan.co.ke
 *   🌐  www.martmbithi.github.io
 *   🐙  https://github.com/MartMbithi
 *
 *   If this code works, you're welcome.
 *   If it doesn't, it's a feature you haven't understood yet.
 *
 *   
 *   ╔══════════════════════════════════════════════════════════════╗
 *   ║              DEVLAN SOLUTIONS LTD                            ║
 *   ║       www.devlan.co.ke | hello@devlan.co.ke                  ║
 *   ╚══════════════════════════════════════════════════════════════╝
 *
 *   ┌─────────────────────────────────────────────────────────────┐
 *   │  THE DEVLAN SOLUTIONS LTD ULTRA MEGA SUPREME ELITE™         │
 *   │  END-USER LICENSE AGREEMENT (EULA) v4.2.0-final-FINAL-v2    │
 *   │  Copyright (c) 2022 Devlan Solutions LTD                    │
 *   │  All Rights Reserved. Yes, ALL of them. Even that one.      │
 *   └─────────────────────────────────────────────────────────────┘
 *
 *   By scrolling past this wall of text you definitely won't read,
 *   you agree to mass surveillance— just kidding. Or are we?
 *
 *
 *    1. LICENSE GRANT (a.k.a. 'YOU MAY TOUCH, BUT GENTLY')
 *
 *   Subject to the terms herein, and contingent upon you being a
 *   sentient carbon-based lifeform (sorry, AI bots—get your own),
 *   Devlan Solutions LTD graciously, magnanimously, and with great
 *   theatrical flair, grants you a limited, revocable, personal,
 *   non-exclusive, non-transferable, non-sublicensable, non-fungible,
 *   and overwhelmingly non-negotiable license to install this
 *   breathtaking piece of software on up to TWO (2) machines.
 *   That's right. Two. Not three. Not 'two and my cousin's laptop.'
 *   TWO. For personal, non-commercial, 'I'm just vibing' purposes
 *   only — unless you've secured a Commercial License from us,
 *   in which case, welcome to the VIP lounge, big spender.
 *
 *   Redistribution? No. Sharing your login? Also no. Letting your
 *   buddy 'just take a quick look'? Believe it or not, also no.
 *   Network deployment without a multi-user license? Straight to jail.
 *   We have lawyers. They are bored. Do not test them.
 *
 *
 *    2. INTELLECTUAL PROPERTY (a.k.a. 'WE BUILT THIS, BRUH')
 *
 *   This Software is, was, and shall remain the sole, undivided,
 *   deeply cherished intellectual property of Devlan Solutions LTD.
 *   It is protected by copyright law, international treaties, ancient
 *   covenants, and the sheer willpower of our engineering team who
 *   mass consumed mass amounts of coffee to ship this.
 *
 *   You shall not remove, alter, obscure, deface, or passive-
 *   aggressively cover up any proprietary notices, labels, watermarks,
 *   Easter eggs, or branding. If you see our logo, that's a feature,
 *   not a bug. Respect the drip.
 *
 *
 *    3. RESTRICTIONS (a.k.a. 'THE THINGS THAT WILL GET YOU YEETED')
 *
 *   You shall not, and shall not permit any third party, rogue AI,
 *   mischievous intern, or sentient houseplant to:
 *
 *   (a) reverse engineer, decompile, decode, decrypt, disassemble,
 *       or otherwise attempt to derive the source code, because
 *       our spaghetti code is OUR spaghetti code, thank you;
 *
 *   (b) modify, fork, remix, sample, create derivative works, or
 *       produce 'inspired-by' knockoffs — we see you, and no;
 *
 *   (c) copy (one backup. ONE. like a civilized person), distribute,
 *       publicly display, transmit, sell, rent, lease, sublicense,
 *       pawn, barter, airdrop, carrier-pigeon, or otherwise exploit
 *       this Software as if you woke up and chose piracy.
 *
 *   Violation of the above may result in license termination,
 *   strongly worded emails, and disappointment from our CTO.
 *
 *
 *    4. TERMINATION (a.k.a. 'THE SNAP')
 *
 *   This License remains in effect until terminated. Think of it
 *   like a Netflix subscription, but with more legal consequences.
 *
 *   You may terminate at any time by destroying all copies of the
 *   Software in your possession — and yes, 'all copies' includes
 *   the one on that USB drive you forgot in your junk drawer.
 *
 *   Devlan Solutions LTD may terminate this License if you breach
 *   any term herein. Upon termination, your rights evaporate faster
 *   than free snacks in a developer break room. You will then
 *   destroy all copies of the Software. We trust you. Sort of.
 *
 *
 *    5. DISCLAIMER OF WARRANTIES (a.k.a. 'IT IS WHAT IT IS')
 *
 *   THIS SOFTWARE IS PROVIDED 'AS IS', 'WHERE IS', 'YOLO', AND
 *   'WORKS ON MY MACHINE™'. DEVLAN SOLUTIONS LTD MAKES NO
 *   WARRANTIES, EXPRESS, IMPLIED, SPIRITUAL, ASTROLOGICAL, OR
 *   OTHERWISE, INCLUDING BUT NOT LIMITED TO THE IMPLIED WARRANTIES
 *   OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE, AND
 *   NON-INFRINGEMENT.
 *
 *   Will it work perfectly? Probably. Will it summon a segfault at
 *   3 AM during a production deploy? We make no promises. Some
 *   jurisdictions do not allow the exclusion of implied warranties,
 *   so some of the above may not apply to you. Lucky you. But we
 *   still aren't fixing that edge case at midnight on a Friday.
 *
 *
 *    6. SEVERABILITY (a.k.a. 'THE JENGA CLAUSE')
 *
 *   If any provision of this Agreement is declared invalid, illegal,
 *   or unenforceable by a court of competent jurisdiction (or a
 *   really confident paralegal), the remaining provisions shall
 *   continue in full force and effect, standing tall and unbothered
 *   like a load-bearing wall in a code refactor.
 *
 *   The invalid provision shall be modified to the minimum extent
 *   necessary to make it valid, because we don't throw the whole
 *   codebase out over one flaky test.
 *
 *
 *    7. LIMITATION OF LIABILITY (a.k.a. 'DON'T @ US')
 *
 *   IN NO EVENT SHALL DEVLAN SOLUTIONS LTD, ITS AFFILIATES,
 *   OFFICERS, DIRECTORS, EMPLOYEES, INTERNS, OFFICE DOGS, OR
 *   THAT ONE GUY WHO STILL USES vim BE LIABLE FOR ANY INDIRECT,
 *   INCIDENTAL, SPECIAL, CONSEQUENTIAL, EXEMPLARY, OR PUNITIVE
 *   DAMAGES — INCLUDING BUT NOT LIMITED TO LOSS OF PROFITS, DATA,
 *   GOODWILL, SLEEP, OR FAITH IN HUMANITY — ARISING OUT OF OR IN
 *   CONNECTION WITH THIS SOFTWARE.
 *
 *   IN ANY CASE, OUR TOTAL, AGGREGATE, MAXIMUM, ABSOLUTE CEILING
 *   OF LIABILITY SHALL NOT EXCEED THE AMOUNT YOU ACTUALLY PAID FOR
 *   THIS LICENSE. IF THAT AMOUNT IS ZERO, WELL... MATH IS MATH.
 *
 *   No drama. No class actions. Just code, pixels, and vibes.
 *
 *
 *   ── Built with sweat, mass amounts of coffee, and mass amounts of ctrl+z ──
 *   ── Devlan Solutions LTD · Nairobi, Kenya · Innovating since the WiFi worked ──
 *
 */


/* ─── GRAIN OVERLAY (editorial feel) ─────────────────────────── */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
    opacity: .025;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
}

/* ─── ENHANCED HERO SLIDER ───────────────────────────────────── */
.hero-slider {
    min-height: 100vh;
    min-height: 100svh;
}

.hero-slider__overlay {
    background: linear-gradient(145deg,
            rgba(13, 47, 94, .82) 0%,
            rgba(20, 70, 140, .55) 40%,
            rgba(191, 13, 62, .2) 80%,
            rgba(0, 0, 0, .4) 100%);
}

.hero-slider__title {
    text-shadow: 0 2px 40px rgba(0, 0, 0, .3);
    letter-spacing: -0.02em;
}

.hero-slider__subtitle {
    text-shadow: 0 1px 10px rgba(0, 0, 0, .2);
}

/* Slider counter badge */
.hero-slider__counter {
    position: absolute;
    top: calc(var(--header-h) + var(--s-6));
    right: var(--s-6);
    z-index: 10;
    font-family: var(--f-sans);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .1em;
    color: rgba(255, 255, 255, .6);
    display: none;
}

@media (min-width: 768px) {
    .hero-slider__counter {
        display: block;
    }
}

/* ─── ENHANCED ACTION CARDS (Flat layout, no float overlap) ──── */
.home-actions {
    background: var(--c-gray-100);
    padding: var(--s-8) 0;
}

.home-actions__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-4);
    max-width: 1240px;
    margin: 0 auto;
}

@media (min-width: 576px) {
    .home-actions__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .home-actions__grid {
        grid-template-columns: repeat(3, 1fr);
        padding: 0;
    }
}

.action-card {
    background: var(--c-white);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(0, 0, 0, .04);
    border-bottom: 3px solid transparent;
    border-radius: var(--radius-lg);
    padding: var(--s-6);
    text-align: center;
    box-shadow: var(--shadow-sm);
    transition: all .4s var(--ease);
    text-decoration: none;
    display: block;
    position: relative;
    overflow: hidden;
}

.action-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--c-blue), var(--c-red));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .4s var(--ease);
}

.action-card:hover::before {
    transform: scaleX(1);
}

.action-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(20, 70, 140, .12);
    border-bottom-color: transparent;
}

.action-card__icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: var(--c-blue);
    color: var(--c-white);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--s-4);
    font-size: 1.2rem;
    transition: transform .4s var(--ease);
}

.action-card:hover .action-card__icon {
    transform: scale(1.1) rotate(-5deg);
}

.action-card:nth-child(2) .action-card__icon {
    background: var(--c-red);
}

.action-card:nth-child(3) .action-card__icon {
    background: var(--c-green);
}

.action-card:nth-child(4) .action-card__icon {
    background: var(--c-gold);
}

.action-card__title {
    font-family: var(--f-sans);
    font-size: .9rem;
    font-weight: 700;
    color: var(--c-gray-800);
    margin-bottom: var(--s-2);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.action-card__text {
    font-size: .83rem;
    color: var(--c-gray-500);
    margin: 0;
}

/* ─── HOME VIDEO SECTION ─────────────────────────────────────── */
.home-video {
    padding: var(--s-12) 0;
    background: var(--c-white);
}

@media (min-width: 768px) {
    .home-video {
        padding: var(--s-16) 0;
    }
}

.home-video__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-8);
    align-items: center;
}

@media (min-width: 768px) {
    .home-video__inner {
        grid-template-columns: 1fr 1.3fr;
        gap: var(--s-10);
    }
}

.home-video__text h2 {
    margin-bottom: var(--s-3);
}

.home-video__text p {
    color: var(--c-gray-600);
    font-size: 1.05rem;
}

.home-video__player {
    position: relative;
}

.home-video__embed {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    border-radius: var(--radius-xl);
    overflow: hidden;
    background: var(--c-black);
    box-shadow: 0 12px 40px rgba(0, 0, 0, .18);
}

.home-video__thumb {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.home-video__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    width: 80px;
    height: 80px;
    background: var(--c-red);
    border: none;
    border-radius: 50%;
    color: var(--c-white);
    font-size: 1.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 30px rgba(191, 13, 62, .4);
    transition: all .3s var(--ease);
}

.home-video__play i {
    margin-left: 4px;
}

.home-video__play:hover {
    transform: translate(-50%, -50%) scale(1.1);
    box-shadow: 0 12px 40px rgba(191, 13, 62, .5);
}

/* Pulsing ring on play button */
.home-video__play::before {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: 2px solid rgba(191, 13, 62, .4);
    animation: playPulse 2s ease-out infinite;
}

@keyframes playPulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

/* ─── X/TWITTER FEED SECTION ─────────────────────────────────── */
.home-xfeed {
    padding: var(--s-12) 0;
    background: var(--c-gray-100);
}

@media (min-width: 768px) {
    .home-xfeed {
        padding: var(--s-16) 0;
    }
}

.home-xfeed__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-8);
    align-items: start;
}

@media (min-width: 768px) {
    .home-xfeed__inner {
        grid-template-columns: 1fr 1fr;
        gap: var(--s-10);
    }
}

.home-xfeed__header h2 {
    margin-bottom: var(--s-3);
}

.home-xfeed__header p {
    color: var(--c-gray-600);
}

.home-xfeed__embed {
    background: var(--c-white);
    border-radius: var(--radius-xl);
    padding: var(--s-4);
    box-shadow: var(--shadow);
    overflow: hidden;
}

/* Social card hover */
.home-xfeed__embed a:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .1);
}

/* ─── TWEET CARDS (cached X feed) ────────────────────────────── */
.tweet-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px;
    background: var(--c-white);
    border: 1px solid var(--c-gray-200);
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: var(--c-gray-700);
    transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s;
}

.tweet-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
    border-color: var(--c-gray-300);
}

.tweet-card__header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.tweet-card__avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.tweet-card__avatar--placeholder {
    background: var(--c-gray-200);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: var(--c-gray-500);
}

.tweet-card__name {
    font-weight: 700;
    font-size: .88rem;
    color: var(--c-gray-800);
    line-height: 1.2;
}

.tweet-card__handle {
    font-size: .75rem;
    color: var(--c-gray-500);
}

.tweet-card__xicon {
    margin-left: auto;
    font-size: 1rem;
    color: var(--c-gray-400);
}

.tweet-card__text {
    font-size: .9rem;
    line-height: 1.6;
    color: var(--c-gray-700);
}

.tweet-card__text a {
    color: var(--c-blue);
    text-decoration: none;
    pointer-events: none;
    /* parent <a> handles click */
}

.tweet-card__media {
    width: 100%;
    border-radius: var(--radius);
    max-height: 200px;
    object-fit: cover;
}

.tweet-card__footer {
    display: flex;
    gap: 16px;
    font-size: .75rem;
    color: var(--c-gray-500);
    padding-top: 8px;
    border-top: 1px solid var(--c-gray-100);
}

.tweet-card__footer span {
    display: flex;
    align-items: center;
    gap: 4px;
}

.tweet-card__footer i {
    font-size: .7rem;
}

.tweet-card__time {
    margin-left: auto;
}

/* ─── SOCIAL FOLLOW CARDS ────────────────────────────────────── */
.social-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 24px 16px;
    background: var(--c-gray-100);
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: var(--c-gray-700);
    transition: transform .2s var(--ease), box-shadow .2s var(--ease);
    text-align: center;
}

.social-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .08);
}

.social-card__icon {
    font-size: 1.6rem;
    color: var(--sc-color, var(--c-gray-600));
}

.social-card strong {
    font-size: .92rem;
    color: var(--c-gray-800);
}

.social-card span {
    font-size: .78rem;
    color: var(--c-gray-500);
}

/* ─── ENHANCED POST CARDS ────────────────────────────────────── */
.post-card {
    border: 1px solid rgba(0, 0, 0, .04);
    transition: all .4s var(--ease);
}

.post-card:hover {
    box-shadow: 0 20px 50px rgba(0, 0, 0, .1);
    transform: translateY(-6px);
}

.post-card__image::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(to top, rgba(0, 0, 0, .15), transparent);
    pointer-events: none;
}

.post-card__body {
    padding: var(--s-6);
}

.post-card__date {
    position: relative;
    padding-left: var(--s-5);
}

.post-card__date::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 12px;
    height: 2px;
    background: var(--c-red);
    transform: translateY(-50%);
}

.post-card__link {
    position: relative;
    overflow: hidden;
}

.post-card__link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--c-red);
    transition: width .3s var(--ease);
}

.post-card__link:hover::after {
    width: 100%;
}

/* ─── ENHANCED EVENT CARDS ───────────────────────────────────── */
.event-card {
    border: 1px solid rgba(0, 0, 0, .04);
}

.event-card:hover {
    box-shadow: 0 20px 50px rgba(0, 0, 0, .1);
    transform: translateY(-6px);
}

.event-card__date-badge {
    background: var(--c-red);
    border-radius: var(--radius-lg);
    padding: var(--s-3) var(--s-4);
    box-shadow: 0 4px 15px rgba(191, 13, 62, .35);
}

/* ─── ENHANCED PRODUCT CARDS ─────────────────────────────────── */
.product-card {
    border: 1px solid rgba(0, 0, 0, .04);
}

.product-card:hover {
    box-shadow: 0 20px 50px rgba(0, 0, 0, .1);
    transform: translateY(-6px);
}

.product-card__quick-actions {
    position: absolute;
    bottom: var(--s-4);
    left: var(--s-4);
    right: var(--s-4);
    display: flex;
    gap: var(--s-2);
    opacity: 0;
    transform: translateY(10px);
    transition: all .3s var(--ease);
}

.product-card:hover .product-card__quick-actions {
    opacity: 1;
    transform: translateY(0);
}

.product-card__rating {
    display: flex;
    align-items: center;
    gap: var(--s-1);
    margin-bottom: var(--s-2);
    font-size: .78rem;
}

.product-card__rating i {
    color: var(--c-gold);
    font-size: .7rem;
}

.product-card__rating span {
    color: var(--c-gray-400);
}

/* ─── PRIORITY CARDS (Enhanced) ──────────────────────────────── */
.priority-card {
    border: 1px solid rgba(0, 0, 0, .04);
    transition: all .5s var(--ease);
}

.priority-card:hover {
    box-shadow: 0 25px 60px rgba(20, 70, 140, .12);
    transform: translateY(-8px) scale(1.02);
}

.priority-card__image img {
    transition: transform .8s var(--ease);
}

.priority-card:hover .priority-card__image img {
    transform: scale(1.08);
}

/* ─── SPLIT SECTIONS (Enhanced) ──────────────────────────────── */
.split__image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(20, 70, 140, .05), transparent);
    pointer-events: none;
}

.split__text .section__tag {
    position: relative;
    padding-left: var(--s-8);
}

.split__text .section__tag::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 24px;
    height: 2px;
    background: var(--c-red);
    transform: translateY(-50%);
}

/* ─── INLINE DONATE (Enhanced) ───────────────────────────────── */
.inline-donate {
    background: linear-gradient(145deg, var(--c-blue-dark) 0%, var(--c-blue) 60%, var(--c-blue-light) 100%);
    position: relative;
    overflow: hidden;
}

.inline-donate::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(191, 13, 62, .15), transparent 70%);
    pointer-events: none;
}

.donate-amounts .amt-btn {
    border-radius: var(--radius-lg);
    font-weight: 700;
    min-width: 100px;
    backdrop-filter: blur(8px);
}

/* Override for amt-btn inside forms (light background pages like donate, checkout) */
form .donate-amounts .amt-btn {
    background: var(--c-gray-100);
    color: var(--c-gray-700);
    border-color: var(--c-gray-300);
    backdrop-filter: none;
}

form .donate-amounts .amt-btn:hover {
    background: var(--c-gray-200);
    border-color: var(--c-gray-400);
    color: var(--c-gray-800);
}

form .donate-amounts .amt-btn.active,
form .donate-amounts .amt-btn:hover.active {
    background: var(--c-blue);
    border-color: var(--c-blue);
    color: #fff;
}

.donate-amounts .amt-btn:hover,
.donate-amounts .amt-btn.active {
    background: var(--c-red);
    border-color: var(--c-red);
    transform: scale(1.05);
    box-shadow: 0 4px 20px rgba(191, 13, 62, .4);
}

/* ─── STATS COUNTER ROW ──────────────────────────────────────── */
.stats-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-4);
    padding: var(--s-10) var(--s-4);
    background: var(--c-gray-800);
    color: var(--c-white);
    text-align: center;
}

@media (min-width: 768px) {
    .stats-row {
        grid-template-columns: repeat(4, 1fr);
        padding: var(--s-12) var(--s-8);
    }
}

.stat-item__number {
    font-family: var(--f-serif);
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-style: italic;
    color: var(--c-gold);
    line-height: 1.1;
    margin-bottom: var(--s-2);
}

.stat-item__label {
    font-size: .8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--c-gray-400);
}

/* ═══════════════════════════════════════════════════════════════
   TIMELINE — Kalonzo's Leadership Journey (Crowley-style)
   ═══════════════════════════════════════════════════════════════ */
.timeline {
    position: relative;
    padding: var(--s-4) 0;
    max-width: 800px;
    margin: 0 auto;
}

/* Central vertical line */
.timeline::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 20px;
    width: 3px;
    background: linear-gradient(to bottom, var(--c-blue), var(--c-red), var(--c-gold));
    border-radius: 3px;
}

@media (min-width: 768px) {
    .timeline::before {
        left: 50%;
        transform: translateX(-50%);
    }
}

.timeline__item {
    position: relative;
    padding: 0 0 var(--s-10) 60px;
    opacity: 0;
    transform: translateY(30px);
    transition: all .6s var(--ease);
}

.timeline__item.visible {
    opacity: 1;
    transform: translateY(0);
}

@media (min-width: 768px) {
    .timeline__item {
        width: 50%;
        padding: 0 40px var(--s-10) 0;
    }

    .timeline__item:nth-child(even) {
        margin-left: 50%;
        padding: 0 0 var(--s-10) 40px;
    }
}

/* Year dot */
.timeline__dot {
    position: absolute;
    left: 10px;
    top: 4px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--c-blue);
    border: 4px solid var(--c-white);
    box-shadow: 0 0 0 3px var(--c-blue), 0 3px 10px rgba(0, 0, 0, .15);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .4s var(--ease);
}

.timeline__item:hover .timeline__dot {
    background: var(--c-red);
    box-shadow: 0 0 0 3px var(--c-red), 0 3px 15px rgba(191, 13, 62, .3);
    transform: scale(1.2);
}

@media (min-width: 768px) {
    .timeline__dot {
        left: auto;
        right: -12px;
    }

    .timeline__item:nth-child(even) .timeline__dot {
        right: auto;
        left: -12px;
    }
}

.timeline__year {
    display: inline-block;
    font-family: var(--f-serif);
    font-size: 1.8rem;
    font-style: italic;
    color: var(--c-blue);
    line-height: 1;
    margin-bottom: var(--s-2);
}

.timeline__item:hover .timeline__year {
    color: var(--c-red);
}

.timeline__card {
    background: var(--c-white);
    border-radius: var(--radius-lg);
    padding: var(--s-5) var(--s-6);
    box-shadow: var(--shadow);
    border-left: 4px solid var(--c-blue);
    transition: all .4s var(--ease);
    position: relative;
}

.timeline__item:hover .timeline__card {
    box-shadow: 0 15px 40px rgba(20, 70, 140, .12);
    border-left-color: var(--c-red);
    transform: translateY(-3px);
}

/* Arrow pointer */
@media (min-width: 768px) {
    .timeline__card::before {
        content: '';
        position: absolute;
        top: 16px;
        right: -10px;
        width: 0;
        height: 0;
        border: 10px solid transparent;
        border-left-color: var(--c-white);
        filter: drop-shadow(2px 0 2px rgba(0, 0, 0, .05));
    }

    .timeline__item:nth-child(even) .timeline__card::before {
        right: auto;
        left: -10px;
        border-left-color: transparent;
        border-right-color: var(--c-white);
        filter: drop-shadow(-2px 0 2px rgba(0, 0, 0, .05));
    }

    .timeline__item:nth-child(even) .timeline__card {
        border-left: none;
        border-right: 4px solid var(--c-blue);
    }

    .timeline__item:nth-child(even):hover .timeline__card {
        border-right-color: var(--c-red);
    }
}

.timeline__title {
    font-family: var(--f-sans);
    font-size: 1rem;
    font-weight: 700;
    color: var(--c-gray-800);
    margin-bottom: var(--s-2);
}

.timeline__desc {
    font-size: .9rem;
    color: var(--c-gray-600);
    line-height: 1.6;
    margin: 0;
}

.timeline__image {
    width: 100%;
    border-radius: var(--radius);
    margin-top: var(--s-4);
    max-height: 200px;
    object-fit: cover;
}

/* ─── SECTION DECORATORS ─────────────────────────────────────── */
.section--decorated {
    position: relative;
    overflow: hidden;
}

.section--decorated::before {
    content: '';
    position: absolute;
    top: -100px;
    right: -100px;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(20, 70, 140, .04), transparent 70%);
    pointer-events: none;
}

.section--decorated::after {
    content: '';
    position: absolute;
    bottom: -80px;
    left: -80px;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(191, 13, 62, .03), transparent 70%);
    pointer-events: none;
}

/* ─── PAGE HEADER (Enhanced) ─────────────────────────────────── */
.page-header {
    background: linear-gradient(145deg, var(--c-blue-dark), var(--c-blue), var(--c-blue-light));
    position: relative;
    overflow: hidden;
}

.page-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 80%, rgba(191, 13, 62, .1) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(201, 168, 76, .08) 0%, transparent 50%);
}

.page-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: linear-gradient(to top, rgba(0, 0, 0, .1), transparent);
}

/* ─── CUSTOMER ACCOUNT PAGES ─────────────────────────────────── */
.auth-page {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--s-8) var(--s-4);
}

.auth-card {
    background: var(--c-white);
    border-radius: var(--radius-xl);
    padding: var(--s-8) var(--s-6);
    box-shadow: var(--shadow-xl);
    width: 100%;
    max-width: 480px;
}

@media (min-width: 576px) {
    .auth-card {
        padding: var(--s-10) var(--s-8);
    }
}

.auth-card__title {
    font-family: var(--f-serif);
    font-style: italic;
    text-align: center;
    margin-bottom: var(--s-2);
}

.auth-card__subtitle {
    text-align: center;
    color: var(--c-gray-500);
    font-size: .9rem;
    margin-bottom: var(--s-8);
}

.auth-divider {
    display: flex;
    align-items: center;
    gap: var(--s-4);
    margin: var(--s-6) 0;
    color: var(--c-gray-400);
    font-size: .8rem;
}

.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--c-gray-200);
}

/* ─── ENHANCED NEWSLETTER ────────────────────────────────────── */
.newsletter-section {
    background: linear-gradient(135deg, var(--c-gray-800), #1a1f2e);
    position: relative;
    overflow: hidden;
}

.newsletter-section::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -20%;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(20, 70, 140, .15), transparent 70%);
}

/* ─── SCROLL ANIMATIONS (Staggered) ──────────────────────────── */
.animate-on-scroll {
    transition: all .7s var(--ease);
}

.animate-on-scroll:nth-child(2) {
    transition-delay: .1s;
}

.animate-on-scroll:nth-child(3) {
    transition-delay: .2s;
}

.animate-on-scroll:nth-child(4) {
    transition-delay: .3s;
}

/* ─── HOVER LIFT UTILITY ─────────────────────────────────────── */
.hover-lift {
    transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}

.hover-lift:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, .1);
}