:root {
            --sp-navy: #142B6F;
            --sp-deep: #10245C;
            --sp-royal: #1E3A8A;
            --sp-gold: #D4A62A;
            --sp-cream: #FFF8EA;
            --sp-blue: #F3F7FF;
            --sp-white: #FFFFFF;
            --sp-green: #2E8B57;
            --sp-orange: #F97316;
            --sp-yellow: #FACC15;
            --sp-mint: #F6FBF8;
            --sp-stadium: #EAF2FF;
            --sp-gray: #F4F8FC;
        }
        .sports-page {
            font-family: 'Yantramanav', sans-serif;
            color: #263756;
            overflow: hidden;
            background: #fff;
        }
        .sports-page h1,
        .sports-page h2,
        .sports-page h3 {
            color: var(--sp-deep);
            font-weight: 900;
            line-height: 1.04;
            letter-spacing: 0;
        }
        .sports-page p {
            color: #5d6b84;
            font-size: 16px;
            line-height: 1.72;
        }
        .sp-section {
            position: relative;
            padding: 92px 0;
            overflow: hidden;
        }
        .sp-kicker {
            display: inline-flex;
            align-items: center;
            gap: 9px;
            color: var(--sp-gold);
            font-size: 13px;
            font-weight: 900;
            letter-spacing: 1.7px;
            text-transform: uppercase;
            margin-bottom: 14px;
        }
        .sp-title {
            font-size: clamp(32px, 4vw, 56px);
            margin-bottom: 16px;
        }
        .sp-intro {
            max-width: 760px;
            margin: 0 auto 38px;
        }
        .sp-hero {
            min-height: 770px;
            display: flex;
            align-items: center;
            padding: 150px 0 100px;
            background: linear-gradient(135deg, #F3F7FF 0%, #FFF8EA 100%);
        }
        .sp-hero::before,
        .sp-flow::before,
        .sp-cta::before {
            content: "";
            position: absolute;
            inset: 0;
            pointer-events: none;
            background:
                radial-gradient(circle at 16% 20%, rgba(46,139,87,.14), transparent 25%),
                radial-gradient(circle at 84% 30%, rgba(212,166,42,.16), transparent 28%),
                linear-gradient(120deg, transparent 0 45%, rgba(20,43,111,.06) 45% 46%, transparent 46% 100%);
            opacity: .8;
        }
        .sp-hero-copy,
        .sp-hero-visual {
            position: relative;
            z-index: 2;
        }
        .sp-hero h1 {
            max-width: 730px;
            font-size: clamp(46px, 6vw, 82px);
            margin-bottom: 24px;
        }
        .sp-hero h1 span { color: var(--sp-green); }
        .sp-hero .lead {
            max-width: 650px;
            font-size: 19px;
            margin-bottom: 28px;
        }
        .sp-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 14px;
        }
        .sp-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            padding: 14px 24px;
            border-radius: 999px;
            font-weight: 900;
            border: 1px solid transparent;
            transition: .35s ease;
        }
        .sp-btn-primary {
            color: #fff;
            background: var(--sp-navy);
            box-shadow: 0 16px 34px rgba(20,43,111,.22);
        }
        .sp-btn-primary:hover {
            color: var(--sp-deep);
            background: var(--sp-gold);
            transform: translateY(-3px);
        }
        .sp-btn-ghost {
            color: var(--sp-navy);
            background: rgba(255,255,255,.78);
            border-color: rgba(20,43,111,.14);
        }
        .sp-btn-ghost:hover {
            color: #fff;
            background: var(--sp-green);
            transform: translateY(-3px);
        }
        .sp-action-frame {
            position: relative;
            min-height: 545px;
        }
        .sp-poster {
            position: absolute;
            inset: 44px 40px 52px;
            padding: 16px;
            border-radius: 38px;
            background: linear-gradient(145deg, var(--sp-deep), var(--sp-royal));
            box-shadow: 0 32px 72px rgba(16,36,92,.20);
            transform: rotate(-3deg);
            overflow: hidden;
        }
        .sp-poster::before {
            content: "";
            position: absolute;
            inset: 14px;
            border: 1px solid rgba(212,166,42,.42);
            border-radius: 28px;
            z-index: 2;
            pointer-events: none;
        }
        .sp-poster img,
        .sp-show-img img,
        .sp-gallery-main img,
        .sp-gallery-circle img,
        .sp-tilt-card img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
        .sp-poster img {
            border-radius: 28px;
            clip-path: polygon(0 0, 88% 0, 100% 16%, 100% 100%, 12% 100%, 0 84%);
        }
        .sp-float {
            position: absolute;
            z-index: 5;
            width: 68px;
            height: 68px;
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: var(--sp-deep);
            background: rgba(255,255,255,.9);
            box-shadow: 0 18px 36px rgba(16,36,92,.14);
            animation: spFloat 6s ease-in-out infinite;
        }
        .sp-float i { color: var(--sp-gold); font-size: 27px; }
        .sp-float.f1 { left: 8px; top: 90px; }
        .sp-float.f2 { right: 0; top: 128px; animation-delay: -1.2s; }
        .sp-float.f3 { left: 34px; bottom: 82px; animation-delay: -2s; }
        .sp-float.f4 { right: 40px; bottom: 48px; animation-delay: -2.8s; }
        .sp-label {
            position: absolute;
            z-index: 5;
            padding: 10px 14px;
            border-radius: 999px;
            color: var(--sp-deep);
            background: rgba(255,255,255,.92);
            box-shadow: 0 14px 32px rgba(16,36,92,.12);
            font-weight: 900;
            font-size: 13px;
        }
        .sp-label.l1 { left: 64px; top: 22px; }
        .sp-label.l2 { right: 36px; bottom: 18px; }
        .sp-speed-line {
            position: absolute;
            height: 5px;
            border-radius: 999px;
            background: var(--sp-orange);
            opacity: .65;
            animation: spDash 2.4s ease-in-out infinite;
        }
        .sp-speed-line.s1 { width: 150px; left: -20px; bottom: 30px; }
        .sp-speed-line.s2 { width: 110px; right: 20px; top: 24px; background: var(--sp-green); animation-delay: -.8s; }
        .sp-showcase { background: #fff; }
        .sp-show-frame {
            position: relative;
            min-height: 520px;
            padding: 18px;
            border-radius: 36px;
            background:
                linear-gradient(#fff, #fff) padding-box,
                linear-gradient(135deg, var(--sp-navy), var(--sp-gold), var(--sp-green)) border-box;
            border: 2px solid transparent;
            box-shadow: 0 28px 70px rgba(16,36,92,.13);
            transform: skew(-4deg);
        }
        .sp-show-img {
            height: 475px;
            overflow: hidden;
            border-radius: 26px;
            transform: skew(4deg);
            clip-path: polygon(0 0, 90% 0, 100% 20%, 100% 100%, 8% 100%, 0 82%);
        }
        .sp-zone-tag {
            position: absolute;
            left: 42px;
            top: 34px;
            z-index: 3;
            padding: 11px 16px;
            border-radius: 999px;
            color: #fff;
            background: var(--sp-green);
            font-weight: 900;
            transform: skew(4deg);
        }
        .sp-badges {
            display: flex;
            flex-wrap: wrap;
            gap: 14px;
            margin-top: 24px;
        }
        .sp-badge {
            width: 96px;
            height: 96px;
            border-radius: 50%;
            display: inline-flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            background: var(--sp-blue);
            color: var(--sp-deep);
            box-shadow: 0 14px 34px rgba(16,36,92,.08);
            font-weight: 900;
        }
        .sp-badge i { color: var(--sp-gold); margin-bottom: 6px; }
        .sp-cards { background: var(--sp-blue); }
        .sp-sport-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 22px;
        }
        .sp-sport-card {
            position: relative;
            min-height: 230px;
            padding: 30px 24px;
            border-radius: 28px;
            color: #fff;
            background: linear-gradient(145deg, var(--sp-navy), var(--sp-royal));
            box-shadow: 0 22px 50px rgba(16,36,92,.14);
            overflow: hidden;
            transition: .35s ease;
        }
        .sp-sport-card::before {
            content: "";
            position: absolute;
            left: -20%;
            top: 0;
            width: 80%;
            height: 100%;
            background: linear-gradient(110deg, rgba(255,255,255,.14), transparent);
            transform: skewX(-20deg);
        }
        .sp-sport-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 30px 64px rgba(16,36,92,.18);
        }
        .sp-sport-card i {
            color: var(--sp-gold);
            font-size: 36px;
            margin-bottom: 20px;
        }
        .sp-sport-card h3 { color: #fff; font-size: 26px; }
        .sp-sport-card p { color: rgba(255,255,255,.76); margin: 0; }
        .sp-stats {
            background: linear-gradient(135deg, #10245C 0%, #1E3A8A 100%);
        }
        .sp-stats h2,
        .sp-stats h3 { color: #fff; }
        .sp-stats p { color: rgba(255,255,255,.76); }
        .sp-stat-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 18px;
        }
        .sp-stat {
            padding: 30px;
            border-radius: 26px;
            background: rgba(255,255,255,.08);
            border: 1px solid rgba(255,255,255,.15);
            box-shadow: inset 0 0 34px rgba(255,255,255,.04);
        }
        .sp-stat strong {
            display: block;
            color: var(--sp-gold);
            font-size: 42px;
            line-height: 1;
            margin-bottom: 12px;
        }
        .sp-values { background: var(--sp-cream); }
        .sp-zigzag {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
        }
        .sp-zig {
            position: relative;
            padding: 26px 26px 26px 34px;
            border-radius: 24px;
            background: #fff;
            box-shadow: 0 18px 44px rgba(16,36,92,.08);
            transform: skew(-5deg);
            overflow: hidden;
        }
        .sp-zig > * { transform: skew(5deg); }
        .sp-zig::before {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 8px;
            background: var(--sp-orange);
        }
        .sp-zig i { color: var(--sp-gold); font-size: 28px; margin-bottom: 14px; }
        .sp-journey { background: #fff; }
        .sp-track {
            position: relative;
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 18px;
            padding-top: 38px;
        }
        .sp-track::before {
            content: "";
            position: absolute;
            left: 5%;
            right: 5%;
            top: 62px;
            height: 76px;
            border-top: 3px dashed rgba(46,139,87,.35);
            border-radius: 50% 50% 0 0;
        }
        .sp-step {
            position: relative;
            z-index: 2;
            padding: 26px 20px;
            border-radius: 28px;
            background: var(--sp-blue);
            text-align: center;
            box-shadow: 0 18px 44px rgba(16,36,92,.08);
        }
        .sp-step-icon {
            width: 72px;
            height: 72px;
            margin: 0 auto 16px;
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            background: var(--sp-green);
        }
        .sp-balance { background: var(--sp-mint); }
        .sp-balance-wrap {
            display: grid;
            grid-template-columns: 1fr 210px 1fr;
            gap: 24px;
            align-items: center;
        }
        .sp-balance-panel {
            min-height: 310px;
            padding: 38px;
            border-radius: 44px;
            background: #fff;
            box-shadow: 0 22px 52px rgba(16,36,92,.1);
            border: 1px solid rgba(20,43,111,.08);
        }
        .sp-balance-panel.left { border-radius: 54px 24px 54px 24px; }
        .sp-balance-panel.right { border-radius: 24px 54px 24px 54px; }
        .sp-center-badge {
            width: 210px;
            height: 210px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            color: #fff;
            background: radial-gradient(circle at 30% 20%, var(--sp-green), var(--sp-deep));
            box-shadow: 0 24px 58px rgba(16,36,92,.18);
            font-size: 26px;
            font-weight: 900;
        }
        .sp-safety { background: #FFFDF6; }
        .sp-safety-layout {
            display: grid;
            grid-template-columns: 1fr 260px 1fr;
            gap: 22px;
            align-items: center;
        }
        .sp-shield {
            width: 250px;
            height: 250px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--sp-gold);
            background: linear-gradient(145deg, var(--sp-deep), var(--sp-royal));
            box-shadow: 0 26px 58px rgba(16,36,92,.18);
            margin: 0 auto;
        }
        .sp-shield i { font-size: 82px; }
        .sp-safety-node {
            padding: 22px;
            border-radius: 26px;
            background: #fff;
            box-shadow: 0 18px 44px rgba(16,36,92,.08);
            margin-bottom: 16px;
        }
        .sp-safety-node i { color: var(--sp-gold); font-size: 25px; margin-bottom: 10px; }
        .sp-benefits { background: var(--sp-gray); }
        .sp-bubble-cloud {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 18px;
        }
        .sp-bubble {
            width: var(--w, 210px);
            min-height: 145px;
            padding: 24px;
            border-radius: 46px;
            background: #fff;
            box-shadow: 0 18px 44px rgba(16,36,92,.08);
            border: 1px solid rgba(20,43,111,.08);
            animation: spFloat 7s ease-in-out infinite;
        }
        .sp-bubble:nth-child(even) { border-radius: 28px 60px 28px 60px; animation-delay: -2s; background: var(--sp-cream); }
        .sp-bubble i { color: var(--sp-gold); font-size: 27px; margin-bottom: 12px; }
        .sp-gallery { background: #fff; }
        .sp-gallery-stage {
            position: relative;
            min-height: 640px;
        }
        .sp-gallery-main {
            position: absolute;
            left: 5%;
            top: 28px;
            width: 62%;
            height: 500px;
            padding: 14px;
            border-radius: 34px;
            background: linear-gradient(145deg, var(--sp-deep), var(--sp-green));
            box-shadow: 0 28px 66px rgba(16,36,92,.16);
            transform: skew(-4deg);
        }
        .sp-gallery-main img {
            border-radius: 24px;
            transform: skew(4deg);
            clip-path: polygon(0 0, 90% 0, 100% 18%, 100% 100%, 8% 100%, 0 82%);
        }
        .sp-gallery-circle {
            position: absolute;
            right: 8%;
            top: 64px;
            width: 235px;
            height: 235px;
            border-radius: 50%;
            overflow: hidden;
            border: 10px solid #fff;
            box-shadow: 0 22px 48px rgba(16,36,92,.16);
        }
        .sp-gallery-circle.small { right: 24%; bottom: 38px; top: auto; width: 170px; height: 170px; }
        .sp-tilt-card {
            position: absolute;
            right: 8%;
            bottom: 80px;
            width: 315px;
            height: 225px;
            border-radius: 28px;
            overflow: hidden;
            border: 10px solid #fff;
            box-shadow: 0 22px 48px rgba(16,36,92,.16);
            transform: rotate(-5deg);
        }
        .sp-score-label {
            position: absolute;
            left: 12%;
            bottom: 40px;
            z-index: 4;
            padding: 14px 18px;
            border-radius: 16px;
            color: #fff;
            background: var(--sp-deep);
            font-weight: 900;
        }
        .sp-trust { background: var(--sp-cream); }
        .sp-trust-list {
            display: grid;
            gap: 18px;
        }
        .sp-trust-card {
            display: grid;
            grid-template-columns: 80px 1fr;
            gap: 22px;
            align-items: center;
            padding: 24px;
            border-radius: 26px;
            background: #fff;
            box-shadow: 0 18px 44px rgba(16,36,92,.08);
            border-left: 5px solid var(--sp-gold);
        }
        .sp-number {
            color: var(--sp-gold);
            font-size: 38px;
            font-weight: 900;
        }
        .sp-cta {
            position: relative;
            padding: 92px 0;
            background: linear-gradient(135deg, #10245C 0%, #1A2F78 100%);
        }
        .sp-cta-panel {
            position: relative;
            z-index: 2;
            padding: 54px;
            border-radius: 36px;
            color: rgba(255,255,255,.78);
            background: rgba(255,255,255,.08);
            border: 1px solid rgba(255,255,255,.16);
            box-shadow: inset 0 0 40px rgba(255,255,255,.04), 0 26px 64px rgba(0,0,0,.2);
        }
        .sp-cta-panel h2 { color: #fff; font-size: clamp(34px, 4.4vw, 58px); }
        .sp-cta-panel p { color: rgba(255,255,255,.78); max-width: 820px; }
        .sp-reveal { opacity: 0; transform: translateY(28px); transition: opacity .75s ease, transform .75s ease; }
        .sp-reveal.in-view { opacity: 1; transform: translateY(0); }
        .delay-1 { transition-delay: .08s; }
        .delay-2 { transition-delay: .16s; }
        .delay-3 { transition-delay: .24s; }
        @keyframes spFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
        @keyframes spDash { 0%,100%{transform:translateX(0); opacity:.35} 50%{transform:translateX(28px); opacity:.8} }
        @media (max-width: 1199px) {
            .sp-hero { min-height: auto; padding-top: 120px; }
            .sp-action-frame { margin-top: 34px; }
            .sp-sport-grid,
            .sp-zigzag,
            .sp-stat-grid { grid-template-columns: repeat(2, 1fr); }
            .sp-track { grid-template-columns: repeat(3, 1fr); }
        }
        @media (max-width: 991px) {
            .sp-section { padding: 64px 0; }
            .sp-sport-grid,
            .sp-zigzag,
            .sp-stat-grid,
            .sp-track,
            .sp-balance-wrap,
            .sp-safety-layout { grid-template-columns: 1fr; }
            .sp-track::before { display: none; }
            .sp-center-badge { margin: 0 auto; }
            .sp-gallery-stage { min-height: auto; display: grid; gap: 18px; }
            .sp-gallery-main,
            .sp-gallery-circle,
            .sp-gallery-circle.small,
            .sp-tilt-card,
            .sp-score-label {
                position: relative;
                left: auto;
                right: auto;
                top: auto;
                bottom: auto;
                width: 100%;
                height: 300px;
                transform: none;
            }
            .sp-gallery-main img { transform: none; clip-path: none; }
            .sp-score-label { height: auto; text-align: center; }
        }
        @media (max-width: 575px) {
            .sp-section { padding: 48px 0; }
            .sp-hero { padding: 92px 0 52px; }
            .sp-hero h1 { font-size: 40px; }
            .sp-hero .lead { font-size: 16px; }
            .sp-actions { flex-direction: column; }
            .sp-btn { width: 100%; }
            .sp-action-frame { min-height: 390px; }
            .sp-poster { inset: 32px 10px 38px; padding: 10px; }
            .sp-float,
            .sp-label { display: none; }
            .sp-show-frame { transform: none; min-height: auto; }
            .sp-show-img { transform: none; height: 300px; clip-path: none; }
            .sp-badges { justify-content: center; }
            .sp-sport-card,
            .sp-stat,
            .sp-zig,
            .sp-balance-panel,
            .sp-safety-node,
            .sp-trust-card,
            .sp-cta-panel { padding: 24px; border-radius: 24px; transform: none; }
            .sp-zig > * { transform: none; }
            .sp-bubble { width: 100% !important; min-height: 0; }
            .sp-trust-card { grid-template-columns: 1fr; }
        }