:root { --brand: #e1ff00; }
        [x-cloak] { display: none !important; }

        body { font-family: 'Inter', sans-serif; background: #111; color: #f0f0f0; overflow-x: hidden; }
        h1,h2,h3,h4,h5 { font-family: 'Oswald', sans-serif; }
        .text-brand { color: var(--brand); }
        .bg-brand   { background: var(--brand); }

        /* ===== TRANSFORM DESIGN LANGUAGE ===== */

        /* BEFORE/AFTER THE WOW */
        .ba-wrap { position: relative; overflow: hidden; user-select: none; cursor: ew-resize; }
        .ba-before { position: absolute; inset: 0; }
        .ba-after  { position: absolute; inset: 0; }
        .ba-divider {
            position: absolute; top: 0; bottom: 0; left: 50%;
            transform: translateX(-50%);
            width: 3px;
            background: var(--brand);
            z-index: 20;
        }
        .ba-label {
            position: absolute; top: 50%;
            transform: translateY(-50%);
            background: var(--brand);
            color: #000;
            font-family: 'Oswald', sans-serif;
            font-weight: 700;
            font-size: 9px;
            text-transform: uppercase;
            letter-spacing: 0.2em;
            padding: 6px 10px;
        }
        .ba-handle {
            position: absolute; top: 50%; left: 50%;
            transform: translate(-50%, -50%);
            width: 44px; height: 44px;
            border-radius: 50%;
            background: var(--brand);
            z-index: 25;
            display: flex; align-items: center; justify-content: center;
            box-shadow: 0 0 0 4px rgba(225,255,0,0.25), 0 8px 24px rgba(0,0,0,0.6);
            color: #000;
        }

        /* Timeline dot */
        .tl-dot {
            width: 14px; height: 14px; border-radius: 50%;
            background: var(--brand);
            border: 3px solid var(--brand);
            flex-shrink: 0;
            position: relative; z-index: 1;
        }
        .tl-line {
            width: 2px;
            background: linear-gradient(to bottom, var(--brand), transparent);
            flex-shrink: 0;
        }

        /* Progress bar */
        .prog-fill {
            height: 3px; background: var(--brand);
            transform-origin: left;
            transform: scaleX(0);
            transition: transform 1s cubic-bezier(.25,.8,.25,1);
        }
        .prog-fill.animated { transform: scaleX(1); }

        /* Stat ring (CSS conic) */
        .ring-outer {
            width: 90px; height: 90px;
            border-radius: 50%;
            background: conic-gradient(var(--brand) var(--pct), #2a2a2a var(--pct));
            display: flex; align-items: center; justify-content: center;
            position: relative;
        }
        .ring-inner {
            width: 70px; height: 70px;
            border-radius: 50%;
            background: #161616;
            display: flex; align-items: center; justify-content: center;
        }

        /* Coach card hover */
        .coach-card:hover .coach-photo { transform: scale(1.04); filter: grayscale(0); }
        .coach-photo { filter: grayscale(100%); transition: transform 0.5s ease, filter 0.5s ease; }

        /* Testimonials */
        .swiper-pagination-bullet        { background: rgba(255,255,255,0.2) !important; }
        .swiper-pagination-bullet-active { background: var(--brand) !important; }

        /* Header scrolled */
        .hdr-scrolled { background: rgba(15,15,15,0.97) !important; border-bottom: 1px solid rgba(255,255,255,0.05) !important; backdrop-filter: blur(16px); }

        /* Marquee */
        .mwrap  { overflow: hidden; display: flex; white-space: nowrap; }
        .mtrack { display: flex; animation: tick 30s linear infinite; }
        @keyframes tick { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }

        /* Mob overlay */
        .mob-overlay { opacity: 0; pointer-events: none; transition: opacity 0.3s; }
        .mob-overlay.open { opacity: 1; pointer-events: auto; }

        /* Hover card brand border */
        .result-card { border: 1px solid rgba(255,255,255,0.05); transition: border-color 0.3s, transform 0.3s; }
        .result-card:hover { border-color: var(--brand); transform: translateY(-4px); }

        /* Glow text */
        .glow-brand {
            color: var(--brand);
            text-shadow: 0 0 40px rgba(225,255,0,0.4), 0 0 80px rgba(225,255,0,0.15);
        }

        /* Brand box outline */
        .brand-outline { -webkit-text-stroke: 2px var(--brand); color: transparent; }