* {

            margin: 0;

            padding: 0;

            box-sizing: border-box;

        }



        :root {

            --primary-red: #ef4444;

            --dark-bg: #0a0a0a;

            --card-bg: #111111;

            --text-primary: #ffffff;

            --text-secondary: #a3a3a3;

            --border-color: rgba(255, 255, 255, 0.1);

        }



        body {

            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

            background: var(--dark-bg);

            color: var(--text-primary);

            overflow-x: hidden;

            position: relative;

        }



        /* Animated Mesh Background */

        .mesh-background {

            position: fixed;

            top: 0;

            left: 0;

            width: 100%;

            height: 100%;

            z-index: 0;

            opacity: 0.4;

            filter: blur(80px);

        }



        .mesh-gradient {

            position: absolute;

            border-radius: 50%;

            filter: blur(60px);

            animation: float 20s ease-in-out infinite;

        }



        .mesh-1 {

            width: 600px;

            height: 600px;

            background: radial-gradient(circle, rgba(239, 68, 68, 0.3) 0%, transparent 70%);

            top: -200px;

            left: -200px;

            animation-delay: 0s;

        }



        .mesh-2 {

            width: 500px;

            height: 500px;

            background: radial-gradient(circle, rgba(239, 68, 68, 0.2) 0%, transparent 70%);

            top: 50%;

            right: -150px;

            animation-delay: -7s;

        }



        .mesh-3 {

            width: 400px;

            height: 400px;

            background: radial-gradient(circle, rgba(239, 68, 68, 0.25) 0%, transparent 70%);

            bottom: -100px;

            left: 30%;

            animation-delay: -14s;

        }



        @keyframes float {

            0%, 100% {

                transform: translate(0, 0) scale(1);

            }

            33% {

                transform: translate(100px, -100px) scale(1.1);

            }

            66% {

                transform: translate(-50px, 100px) scale(0.9);

            }

        }



        /* Particle System */

        .particles {

            position: fixed;

            top: 0;

            left: 0;

            width: 100%;

            height: 100%;

            z-index: 1;

            pointer-events: none;

        }



        .particle {

            position: absolute;

            width: 2px;

            height: 2px;

            background: rgba(239, 68, 68, 0.5);

            border-radius: 50%;

            animation: particle-float 15s linear infinite;

        }



        @keyframes particle-float {

            0% {

                transform: translateY(100vh) translateX(0) scale(0);

                opacity: 0;

            }

            10% {

                opacity: 1;

            }

            90% {

                opacity: 1;

            }

            100% {

                transform: translateY(-100px) translateX(100px) scale(1);

                opacity: 0;

            }

        }



        /* Main Container */

        .container {

            max-width: 1400px;

            margin: 0 auto;

            padding: 80px 24px;

            position: relative;

            z-index: 2;

        }



        /* Header Section */

        .header {

            text-align: center;

            margin-bottom: 80px;

            opacity: 0;

            animation: fadeInUp 1s ease-out forwards;

        }



        .header-badge {

            display: inline-flex;

            align-items: center;

            gap: 8px;

            padding: 8px 20px;

            background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(239, 68, 68, 0.05) 100%);

            border: 1px solid rgba(239, 68, 68, 0.3);

            border-radius: 100px;

            font-size: 14px;

            font-weight: 600;

            color: var(--primary-red);

            margin-bottom: 24px;

            letter-spacing: 0.5px;

            position: relative;

            overflow: hidden;

        }



        .header-badge::before {

            content: '';

            position: absolute;

            top: 0;

            left: -100%;

            width: 100%;

            height: 100%;

            background: linear-gradient(90deg, transparent, rgba(239, 68, 68, 0.2), transparent);

            animation: shimmer 3s infinite;

        }



        @keyframes shimmer {

            0% { left: -100%; }

            100% { left: 200%; }

        }



        .pulse-dot {

            width: 8px;

            height: 8px;

            background: var(--primary-red);

            border-radius: 50%;

            animation: pulse 2s ease-in-out infinite;

        }



        @keyframes pulse {

            0%, 100% {

                transform: scale(1);

                opacity: 1;

            }

            50% {

                transform: scale(1.3);

                opacity: 0.7;

            }

        }



        h1 {

            font-size: clamp(48px, 6vw, 72px);

            font-weight: 900;

            line-height: 1.1;

            margin-bottom: 24px;

            background: linear-gradient(135deg, #ffffff 0%, #a3a3a3 100%);

            -webkit-background-clip: text;

            -webkit-text-fill-color: transparent;

            background-clip: text;

            letter-spacing: -2px;

        }



        .subtitle {

            font-size: clamp(18px, 2vw, 22px);

            color: var(--text-secondary);

            max-width: 700px;

            margin: 0 auto 40px;

            line-height: 1.6;

            font-weight: 400;

        }



        /* Grid Layout */

        .ecosystem-grid {

            display: grid;

            grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));

            gap: 32px;

            perspective: 1000px;

        }



        /* Card Styles */

        .ecosystem-card {

            position: relative;

            background: linear-gradient(135deg, rgba(17, 17, 17, 0.9) 0%, rgba(17, 17, 17, 0.7) 100%);

            border: 1px solid var(--border-color);

            border-radius: 24px;

            padding: 40px;

            cursor: pointer;

            transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);

            opacity: 0;

            animation: fadeInUp 0.8s ease-out forwards;

            backdrop-filter: blur(20px);

            overflow: hidden;

            transform-style: preserve-3d;

        }



        .ecosystem-card::before {

            content: '';

            position: absolute;

            top: 0;

            left: 0;

            right: 0;

            bottom: 0;

            background: radial-gradient(600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(239, 68, 68, 0.1), transparent 40%);

            opacity: 0;

            transition: opacity 0.6s ease;

            z-index: 0;

        }



        .ecosystem-card:hover::before {

            opacity: 1;

        }



        .ecosystem-card::after {

            content: '';

            position: absolute;

            top: -2px;

            left: -2px;

            right: -2px;

            bottom: -2px;

            background: linear-gradient(135deg, var(--primary-red), transparent, var(--primary-red));

            border-radius: 24px;

            opacity: 0;

            z-index: -1;

            transition: opacity 0.6s ease;

            background-size: 200% 200%;

            animation: gradient-shift 3s ease infinite;

        }



        .ecosystem-card:hover::after {

            opacity: 0.3;

        }



        @keyframes gradient-shift {

            0%, 100% { background-position: 0% 50%; }

            50% { background-position: 100% 50%; }

        }



        .ecosystem-card:hover {

            transform: translateY(-12px) scale(1.02);

            border-color: rgba(239, 68, 68, 0.5);

            box-shadow: 

                0 30px 60px rgba(0, 0, 0, 0.5),

                0 0 80px rgba(239, 68, 68, 0.2),

                inset 0 1px 0 rgba(255, 255, 255, 0.1);

        }



        .ecosystem-card:nth-child(1) { animation-delay: 0.1s; }

        .ecosystem-card:nth-child(2) { animation-delay: 0.2s; }

        .ecosystem-card:nth-child(3) { animation-delay: 0.3s; }

        .ecosystem-card:nth-child(4) { animation-delay: 0.4s; }

        .ecosystem-card:nth-child(5) { animation-delay: 0.5s; }

        .ecosystem-card:nth-child(6) { animation-delay: 0.6s; }



        @keyframes fadeInUp {

            from {

                opacity: 0;

                transform: translateY(40px);

            }

            to {

                opacity: 1;

                transform: translateY(0);

            }

        }



        /* Icon Container */

        .icon-container {

            width: 80px;

            height: 80px;

            margin-bottom: 28px;

            position: relative;

            z-index: 1;

        }



        .icon-container svg {

            width: 100%;

            height: 100%;

            filter: drop-shadow(0 4px 20px rgba(239, 68, 68, 0.3));

        }



        .ecosystem-card:hover .icon-container svg {

            filter: drop-shadow(0 8px 30px rgba(239, 68, 68, 0.5));

        }



        /* Animated SVG Icons */

        .icon-container svg path,

        .icon-container svg circle,

        .icon-container svg rect,

        .icon-container svg line {

            transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);

        }



        /* Social Network Icon Animation */

        .ecosystem-card:hover .social-icon .user-1 {

            transform: translate(-3px, -3px);

        }



        .ecosystem-card:hover .social-icon .user-2 {

            transform: translate(3px, -3px);

        }



        .ecosystem-card:hover .social-icon .user-3 {

            transform: translate(0, 3px);

        }



        .ecosystem-card:hover .social-icon .connection {

            stroke-dasharray: 100;

            stroke-dashoffset: 0;

            animation: dash 1.5s ease-in-out infinite;

        }



        @keyframes dash {

            0%, 100% { stroke-dashoffset: 0; }

            50% { stroke-dashoffset: 50; }

        }



        /* Team Management Icon Animation */

        .ecosystem-card:hover .team-icon .person {

            transform: translateY(-4px);

        }



        .ecosystem-card:hover .team-icon .person:nth-child(2) {

            animation-delay: 0.1s;

        }



        .ecosystem-card:hover .team-icon .person:nth-child(3) {

            animation-delay: 0.2s;

        }



        /* Tournament Icon Animation */

        .ecosystem-card:hover .tournament-icon .trophy-cup {

            transform: scale(1.1);

            transform-origin: center bottom;

        }



        .ecosystem-card:hover .tournament-icon .star {

            animation: twinkle 1s ease-in-out infinite;

        }



        @keyframes twinkle {

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

            50% { opacity: 0.5; transform: scale(0.8); }

        }



        /* Analytics Icon Animation */

        .ecosystem-card:hover .analytics-icon .bar {

            animation: grow-bar 1.2s ease-in-out infinite;

        }



        .ecosystem-card:hover .analytics-icon .bar:nth-child(1) {

            animation-delay: 0s;

        }



        .ecosystem-card:hover .analytics-icon .bar:nth-child(2) {

            animation-delay: 0.2s;

        }



        .ecosystem-card:hover .analytics-icon .bar:nth-child(3) {

            animation-delay: 0.4s;

        }



        @keyframes grow-bar {

            0%, 100% { transform: scaleY(1); }

            50% { transform: scaleY(1.3); }

        }



        /* Mobile Icon Animation */

        .ecosystem-card:hover .mobile-icon .screen {

            fill: rgba(239, 68, 68, 0.2);

        }



        .ecosystem-card:hover .mobile-icon .notification {

            animation: bounce-notification 0.6s ease-in-out infinite;

        }



        @keyframes bounce-notification {

            0%, 100% { transform: translateY(0); }

            50% { transform: translateY(-5px); }

        }



        /* Global Icon Animation */

        .ecosystem-card:hover .global-icon .globe {

            animation: rotate-globe 3s linear infinite;

        }



        .ecosystem-card:hover .global-icon .orbit {

            animation: orbit 2s linear infinite;

        }



        @keyframes rotate-globe {

            from { transform: rotate(0deg); }

            to { transform: rotate(360deg); }

        }



        @keyframes orbit {

            from { transform: rotate(0deg) translateX(20px) rotate(0deg); }

            to { transform: rotate(360deg) translateX(20px) rotate(-360deg); }

        }



        /* Card Content */

        .card-content {

            position: relative;

            z-index: 1;

        }



        h3 {

            font-size: 28px;

            font-weight: 700;

            margin-bottom: 12px;

            color: var(--text-primary);

            letter-spacing: -0.5px;

            transition: all 0.4s ease;

        }



        .ecosystem-card:hover h3 {

            color: var(--primary-red);

            transform: translateX(4px);

        }



        p {

            font-size: 16px;

            line-height: 1.7;

            color: var(--text-secondary);

            margin-bottom: 24px;

            transition: all 0.4s ease;

        }



        .ecosystem-card:hover p {

            color: #d4d4d4;

        }



        /* Features List */

        .features {

            list-style: none;

            display: flex;

            flex-direction: column;

            gap: 12px;

        }



        .features li {

            display: flex;

            align-items: center;

            gap: 12px;

            font-size: 15px;

            color: var(--text-secondary);

            transition: all 0.3s ease;

            transform: translateX(0);

        }



        .ecosystem-card:hover .features li {

            transform: translateX(8px);

            color: #d4d4d4;

        }



        .features li:nth-child(1) { transition-delay: 0.05s; }

        .features li:nth-child(2) { transition-delay: 0.1s; }

        .features li:nth-child(3) { transition-delay: 0.15s; }



        .check-icon {

            width: 20px;

            height: 20px;

            background: linear-gradient(135deg, var(--primary-red), #dc2626);

            border-radius: 50%;

            display: flex;

            align-items: center;

            justify-content: center;

            flex-shrink: 0;

            box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);

            transition: all 0.3s ease;

        }



        .ecosystem-card:hover .check-icon {

            transform: scale(1.2) rotate(360deg);

            box-shadow: 0 6px 20px rgba(239, 68, 68, 0.5);

        }



        .check-icon::after {

            content: '✓';

            color: white;

            font-size: 12px;

            font-weight: bold;

        }



        /* CTA Section */

        .cta-section {

            text-align: center;

            margin-top: 80px;

            opacity: 0;

            animation: fadeInUp 1s ease-out 0.8s forwards;

        }



        .cta-button {

            display: inline-flex;

            align-items: center;

            gap: 12px;

            padding: 18px 40px;

            background: linear-gradient(135deg, var(--primary-red), #dc2626);

            color: white;

            font-size: 18px;

            font-weight: 700;

            border: none;

            border-radius: 12px;

            cursor: pointer;

            transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);

            box-shadow: 0 10px 40px rgba(239, 68, 68, 0.3);

            position: relative;

            overflow: hidden;

            text-decoration: none;

        }



        .cta-button::before {

            content: '';

            position: absolute;

            top: 0;

            left: -100%;

            width: 100%;

            height: 100%;

            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);

            transition: left 0.6s ease;

        }



        .cta-button:hover::before {

            left: 100%;

        }



        .cta-button:hover {

            transform: translateY(-4px) scale(1.05);

            box-shadow: 0 20px 60px rgba(239, 68, 68, 0.5);

        }



        .cta-button:active {

            transform: translateY(-2px) scale(1.02);

        }



        .arrow-icon {

            transition: transform 0.4s ease;

        }



        .cta-button:hover .arrow-icon {

            transform: translateX(6px);

        }



        /* Floating Elements */

        .floating-element {

            position: absolute;

            pointer-events: none;

            opacity: 0.1;

            animation: float-random 20s ease-in-out infinite;

        }



        @keyframes float-random {

            0%, 100% {

                transform: translate(0, 0) rotate(0deg);

            }

            25% {

                transform: translate(50px, -50px) rotate(90deg);

            }

            50% {

                transform: translate(-30px, 30px) rotate(180deg);

            }

            75% {

                transform: translate(30px, 50px) rotate(270deg);

            }

        }



        /* Responsive Design */

        @media (max-width: 768px) {

            .ecosystem-grid {

                grid-template-columns: 1fr;

                gap: 24px;

            }



            .container {

                padding: 60px 20px;

            }



            h1 {

                font-size: 42px;

            }



            .subtitle {

                font-size: 18px;

            }



            .ecosystem-card {

                padding: 32px;

            }

        }



        /* Cursor Glow Effect */

        .cursor-glow {

            position: fixed;

            width: 400px;

            height: 400px;

            background: radial-gradient(circle, rgba(239, 68, 68, 0.15) 0%, transparent 70%);

            border-radius: 50%;

            pointer-events: none;

            z-index: 9999;

            transform: translate(-50%, -50%);

            transition: opacity 0.3s ease;

            opacity: 0;

        }


/* FEATURES PAGE: LABS + TOURS SECTIONS */
.feature-extension-sections{
    position:relative;
    z-index:2;
    max-width:1400px;
    margin:90px auto 110px;
    padding:0 20px;
    display:grid;
    gap:28px;
}

.feature-spotlight{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(320px,520px);
    gap:28px;
    align-items:center;
    background:rgba(15,23,42,0.52);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:28px;
    padding:30px;
    box-shadow:0 20px 60px rgba(0,0,0,0.18);
    backdrop-filter:blur(18px);
}

.tours-spotlight{
    grid-template-columns:minmax(320px,520px) minmax(0,1fr);
}

.feature-spotlight-copy{
    min-width:0;
}

.feature-spotlight-eyebrow{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:8px 14px;
    border-radius:999px;
    background:rgba(239,68,68,0.12);
    border:1px solid rgba(239,68,68,0.22);
    color:#fecaca;
    font-size:12px;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
    margin-bottom:14px;
}

.feature-spotlight h2{
    margin:0 0 14px;
    font-size:clamp(30px,4vw,48px);
    line-height:1.05;
    letter-spacing:-0.03em;
    color:#fff;
}

.feature-spotlight p{
    margin:0;
    max-width:760px;
    color:rgba(255,255,255,0.78);
    font-size:16px;
    line-height:1.75;
}

.feature-pill-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
    margin-top:22px;
}

.feature-pill-card{
    display:block;
    text-decoration:none;
    color:inherit;
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:18px;
    padding:16px;
    transition:transform .25s ease, border-color .25s ease, background .25s ease;
}

.feature-pill-card:hover{
    transform:translateY(-3px);
    border-color:rgba(239,68,68,0.26);
    background:rgba(255,255,255,0.06);
}

.feature-pill-card strong{
    display:block;
    margin-bottom:8px;
    color:#fff;
    font-size:16px;
    line-height:1.3;
}

.feature-pill-card span{
    display:block;
    color:rgba(255,255,255,0.72);
    font-size:14px;
    line-height:1.6;
}

.feature-cta-row{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:22px;
}

.feature-section-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:46px;
    padding:0 18px;
    border-radius:12px;
    text-decoration:none;
    font-weight:700;
    transition:transform .2s ease, opacity .2s ease, background .2s ease;
}

.feature-section-btn:hover{
    transform:translateY(-2px);
}

.feature-section-btn.primary{
    background:#ef4444;
    color:#fff;
    border:1px solid #ef4444;
}

.feature-section-btn.secondary{
    background:transparent;
    color:#fff;
    border:1px solid rgba(255,255,255,0.18);
}

.feature-spotlight-media{
    width:100%;
}

.feature-spotlight-media img{
    display:block;
    width:100%;
    height:100%;
    min-height:340px;
    max-height:420px;
    object-fit:cover;
    object-position:center;
    border-radius:20px;
    box-shadow:0 16px 42px rgba(0,0,0,.22);
}

.feature-media-placeholder{
    width:100%;
    min-height:340px;
    border-radius:24px;
    border:1px dashed rgba(255,255,255,0.18);
    background:
        radial-gradient(circle at top right, rgba(239,68,68,0.16), transparent 30%),
        radial-gradient(circle at bottom left, rgba(255,255,255,0.08), transparent 24%),
        rgba(255,255,255,0.03);
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:24px;
    color:rgba(255,255,255,0.72);
    font-weight:600;
    letter-spacing:.02em;
}

@media (max-width: 1100px){
    .feature-spotlight,
    .tours-spotlight{
        grid-template-columns:1fr;
    }

    .tours-spotlight .feature-spotlight-media{
        order:2;
    }

    .tours-spotlight .feature-spotlight-copy{
        order:1;
    }

    .feature-spotlight-media img{
        min-height:260px;
        max-height:320px;
    }
}

@media (max-width: 768px){
    .feature-extension-sections{
        margin:64px auto 84px;
        padding:0 16px;
        gap:20px;
    }

    .feature-spotlight{
        padding:20px;
        border-radius:22px;
        gap:20px;
    }

    .feature-spotlight h2{
        font-size:clamp(26px,8vw,36px);
    }

    .feature-spotlight p{
        font-size:15px;
        line-height:1.7;
    }

    .feature-pill-grid{
        grid-template-columns:1fr;
    }

    .feature-media-placeholder{
        min-height:240px;
        border-radius:18px;
    }

    .feature-section-btn{
        width:100%;
    }
}

@media (max-width: 480px){
    .feature-spotlight{
        padding:18px;
    }

    .feature-media-placeholder{
        min-height:200px;
        font-size:14px;
    }
}


/* FEATURES PAGE: SCORING + LEAGUES SECTIONS */
.scoring-leagues-sections{
    margin-top:28px;
}

.scoring-leagues-sections .feature-spotlight{
    grid-template-columns:1fr !important;
}

.scoring-leagues-sections .feature-spotlight-copy{
    max-width:none;
}

.scoring-leagues-sections .feature-pill-grid{
    margin-top:22px;
}

@media (max-width: 768px){
    .scoring-leagues-sections{
        margin-top:20px;
    }
}


/* FEATURES PAGE: ORDERED 4 FEATURE SECTIONS */
.feature-extension-sections .scoring-spotlight,
.feature-extension-sections .labs-spotlight,
.feature-extension-sections .leagues-spotlight{
    grid-template-columns:minmax(0,1fr) minmax(0,520px);
}

.feature-extension-sections .tours-spotlight{
    grid-template-columns:minmax(0,520px) minmax(0,1fr);
}

@media (max-width: 1100px){
    .feature-extension-sections .scoring-spotlight,
    .feature-extension-sections .labs-spotlight,
    .feature-extension-sections .tours-spotlight,
    .feature-extension-sections .leagues-spotlight{
        grid-template-columns:1fr;
    }
}