/* ============================================
   WILDCATCOIN — styles.css (optimized)
   ============================================ */

/* ── CSS Variables ── */
:root {
    --ice-blue:    #A8D5E2;
    --arctic-blue: #6BA3BE;
    --deep-blue:   #4A7C8E;
    --frost-white: #F0F8FF;
    --midnight:    #1A1A2E;
    --shadow-blue: rgba(107,163,190,0.3);

    --bg-gradient-start: #daeef5;
    --bg-gradient-mid:   #65a4c2;
    --bg-gradient-end:   #063858;
    --text-primary:   #0d2a3a;
    --text-secondary: #1a4a60;
    --card-bg:  rgba(255,255,255,0.82);
    --nav-bg:   rgba(200,230,240,0.18);
    --logo-src: url('wilCatGold.png');
}

[data-theme="dark"] {
    --bg-gradient-start: #080810;
    --bg-gradient-mid:   #131330;
    --bg-gradient-end:   #1e1e40;
    --text-primary:   #E0F2F7;
    --text-secondary: #A8D5E2;
    --card-bg:  rgba(20,20,46,0.92);
    --nav-bg:   rgba(20,20,46,0.55);
    --logo-src: url('wilCatdark.png');
    --ice-blue:    #5A8DA0;
    --arctic-blue: #4A7C8E;
    --frost-white: #1e1e40;
    --shadow-blue: rgba(80,130,160,0.4);
}


/* ── Reset ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

html { scroll-behavior:smooth; }

/* Global transition for theme switching */
html, body, section, nav, .feature-card, .social-card, .stats, .hero {
    transition: background 0.5s ease, color 0.5s ease, border-color 0.4s ease;
}

body {
    font-family:'Rajdhani',sans-serif;
    /* Fondo unificado: cielo glacial → espacio acuático profundo,
       igual que la sección "To The Moon" pero más suave */
    background: linear-gradient(180deg,
        #daeef5  0%,
        #cfe8f1  5%,
        #c2e0ec  11%,
        #b3d7e7  18%,
        #a1cde1  26%,
        #8ec0d8  34%,
        #7ab3ce  42%,
        #65a4c2  50%,
        #5295b5  58%,
        #4085a6  66%,
        #2f7498  74%,
        #1f6488  82%,
        #125478  90%,
        #0a4468  96%,
        #063858  100%);
    color: var(--text-primary);
    overflow-x: hidden;
    position: relative;
    transition: background 0.7s ease, color 0.5s ease;
}

section { margin:0; padding:0; }

/* GPU-composited background glow blobs (cheap layer) */
body::before {
    content:'';
    position:fixed;
    inset:0;
    background-image:
        radial-gradient(ellipse at 15% 20%, rgba(200,235,248,0.18) 0%, transparent 45%),
        radial-gradient(ellipse at 85% 65%, rgba(168,213,226,0.14) 0%, transparent 45%),
        radial-gradient(ellipse at 50% 85%, rgba(100,160,200,0.10) 0%, transparent 40%);
    animation:floatParticles 60s ease-in-out infinite;
    will-change:transform;
    pointer-events:none;
    z-index:0;
    transition:opacity 0.6s ease;
}
[data-theme="dark"] body::before {
    background-image:
        radial-gradient(ellipse at 15% 20%, rgba(60,100,180,0.12) 0%, transparent 45%),
        radial-gradient(ellipse at 85% 65%, rgba(40,80,160,0.10) 0%, transparent 45%),
        radial-gradient(ellipse at 50% 85%, rgba(20,50,120,0.08) 0%, transparent 40%);
}

@keyframes floatParticles {
    0%,100% { transform:translate(0,0); }
    33%  { transform:translate(20px,-20px); }
    66%  { transform:translate(-15px,15px); }
}

/* ── Dark-mode toggle ── */
.theme-toggle {
    position:fixed;
    bottom:30px;
    right:30px;
    z-index:9999;
    width:60px;
    height:60px;
    border-radius:50%;
    background:linear-gradient(135deg,var(--arctic-blue),var(--deep-blue));
    border:3px solid rgba(255,255,255,0.3);
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.8rem;
    box-shadow:0 8px 25px rgba(0,0,0,0.3);
    transition:transform 0.3s ease, box-shadow 0.3s ease;
    will-change:transform;
}
.theme-toggle:hover { transform:scale(1.1) rotate(15deg); box-shadow:0 12px 35px rgba(0,0,0,0.4); }

/* ── Navigation ── */
nav {
    position:fixed;
    top:0;
    width:100%;
    padding:0.9rem 5%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    background:linear-gradient(135deg,
        rgba(168,213,226,0.12) 0%,
        rgba(107,163,190,0.08) 50%,
        rgba(74,124,142,0.12) 100%);
    border-bottom:2px solid transparent;
    border-image:linear-gradient(90deg,
        transparent,
        rgba(107,163,190,0.6),
        rgba(168,213,226,0.8),
        rgba(107,163,190,0.6),
        transparent) 1;
    z-index:1000;
    will-change:background;
    overflow:hidden;
    animation:slideDown 0.6s ease-out both;
}

/* Scan line — GPU transform only, no filter */
nav::before {
    content:'';
    position:absolute;
    top:0;
    left:-100%;
    width:100%;
    height:2px;
    background:linear-gradient(90deg,transparent,rgba(168,213,226,0.8),rgba(107,163,190,1),transparent);
    animation:scanLine 5s linear infinite;
    will-change:transform;
}

@keyframes scanLine {
    0%   { transform:translateX(0); }
    100% { transform:translateX(300%); }
}

nav::after { display:none; } /* removed heavy particle-move on nav */

@keyframes slideDown {
    from { transform:translateY(-100%); opacity:0; }
    to   { transform:translateY(0);     opacity:1; }
}

.logo-nav {
    display:flex;
    align-items:center;
    gap:1rem;
    font-family:'Orbitron',sans-serif;
    font-weight:900;
    font-size:1.5rem;
    color:rgba(10,40,60,0.92);
    letter-spacing:3px;
    position:relative;
    z-index:2;
    cursor:pointer;
    transition:transform 0.3s ease, filter 0.3s ease;
}
[data-theme="dark"] .logo-nav {
    color:rgba(255,255,255,0.92);
}
.logo-nav:hover { transform:scale(1.05); filter:drop-shadow(0 0 20px rgba(107,163,190,0.6)); }

.logo-nav img {
    width:52px;
    height:52px;
    object-fit:contain;
    object-position:center;
    image-rendering:auto;
    filter:drop-shadow(0 0 12px var(--shadow-blue));
    animation:logoFloat 4s ease-in-out infinite;
    will-change:transform;
    transition:transform 0.3s ease, filter 0.3s ease;
    flex-shrink:0;
}
.logo-nav:hover img { transform:rotate(-10deg) scale(1.1); }

@keyframes logoFloat {
    0%,100% { transform:translateY(0)    rotate(0deg); }
    50%      { transform:translateY(-5px) rotate(-5deg); }
}

.logo-nav span {
    background:linear-gradient(135deg,rgba(10,40,60,0.95),#1a5070);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
}
[data-theme="dark"] .logo-nav span {
    background:linear-gradient(135deg,rgba(255,255,255,0.95),#b8e8f8);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
}

.logo-nav::before,.logo-nav::after {
    content:'';
    position:absolute;
    width:20px; height:20px;
    border:2px solid var(--arctic-blue);
    opacity:0;
    transition:opacity 0.3s ease;
}
.logo-nav::before { top:-5px;    left:-10px;  border-right:none; border-bottom:none; }
.logo-nav::after  { bottom:-5px; right:-10px; border-left:none;  border-top:none; }
.logo-nav:hover::before,.logo-nav:hover::after { opacity:1; }

.nav-links { display:flex; gap:3rem; list-style:none; position:relative; z-index:2; }
.nav-links li { position:relative; }

.nav-links a {
    text-decoration:none;
    color:rgba(10,40,60,0.88);
    font-weight:600;
    font-size:1.05rem;
    letter-spacing:1.5px;
    position:relative;
    padding:0.5rem 0;
    display:block;
    text-transform:uppercase;
    font-family:'Rajdhani',sans-serif;
    transition:color 0.25s ease, transform 0.25s ease;
}
[data-theme="dark"] .nav-links a {
    color:rgba(255,255,255,0.88);
}
.nav-links a::after {
    content:'';
    position:absolute;
    bottom:0; left:0;
    width:0; height:3px;
    background:linear-gradient(90deg,var(--arctic-blue),var(--ice-blue),var(--arctic-blue));
    transition:width 0.3s ease;
    box-shadow:0 0 12px rgba(107,163,190,0.6);
}
.nav-links a:hover::after,.nav-links a.active::after { width:100%; }
.nav-links a:hover { color:var(--deep-blue); transform:translateY(-2px); }
.nav-links a.active { color:var(--deep-blue); }
[data-theme="dark"] .nav-links a:hover { color:#b8e8f8; }
[data-theme="dark"] .nav-links a.active { color:#b8e8f8; }

.buy-btn {
    padding:0.9rem 2.5rem;
    background:linear-gradient(135deg,var(--arctic-blue),var(--deep-blue));
    color:white;
    border:none;
    border-radius:50px;
    font-family:'Orbitron',sans-serif;
    font-weight:700;
    font-size:1rem;
    letter-spacing:2px;
    cursor:pointer;
    transition:transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
    box-shadow:0 8px 25px var(--shadow-blue);
    position:relative;
    z-index:2;
    isolation:isolate;
}
.buy-btn::before {
    content:'';
    position:absolute;
    inset:0;
    border-radius:50px;
    background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,0.22) 50%,transparent 100%);
    opacity:0;
    transition:opacity 0.4s ease;
    pointer-events:none;
}
.buy-btn:hover::before { opacity:1; }
.buy-btn:hover {
    transform:translateY(-3px) scale(1.04);
    box-shadow:0 12px 35px rgba(107,163,190,0.5);
    background:linear-gradient(135deg,var(--deep-blue),var(--midnight));
}

/* Mobile menu */
.mobile-menu-btn {
    display:none;
    flex-direction:column;
    gap:6px;
    background:transparent;
    border:none;
    cursor:pointer;
    padding:0.5rem;
    z-index:2;
}
.mobile-menu-btn span {
    width:30px; height:3px;
    background:linear-gradient(90deg,var(--arctic-blue),var(--ice-blue));
    border-radius:3px;
    transition:transform 0.3s ease, opacity 0.3s ease;
}
.mobile-menu-btn.active span:nth-child(1) { transform:rotate(45deg) translate(9px,9px); }
.mobile-menu-btn.active span:nth-child(2) { opacity:0; transform:translateX(20px); }
.mobile-menu-btn.active span:nth-child(3) { transform:rotate(-45deg) translate(9px,-9px); }

@media (max-width:1024px) { .nav-links { gap:2rem; } }
@media (max-width:768px) {
    nav { padding:1rem 5%; }
    .mobile-menu-btn { display:flex; }
    .nav-links {
        position:fixed;
        top:80px; left:0;
        width:100%;
        flex-direction:column;
        gap:0;
        background:linear-gradient(180deg,rgba(168,213,226,0.97) 0%,rgba(107,163,190,0.99) 100%);
        backdrop-filter:blur(10px);
        padding:2rem 0;
        transform:translateX(-100%);
        transition:transform 0.4s ease;
        border-bottom:3px solid var(--arctic-blue);
        box-shadow:0 10px 40px rgba(0,0,0,0.3);
    }
    .nav-links.active { transform:translateX(0); }
    .nav-links li { border-bottom:1px solid rgba(107,163,190,0.2); }
    .nav-links a { padding:1.2rem 2rem; font-size:1.1rem; color:white; }
    .nav-links a:hover { background:rgba(107,163,190,0.3); color:white; }
    .buy-btn { padding:0.7rem 1.5rem; font-size:0.9rem; }
}

/* ── Hero ── */
.hero {
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:8rem 8% 4rem;
    position:relative;
    z-index:1;
    overflow:hidden;
    isolation: isolate;
}

/* Tech grid — translate only = GPU */
.hero::before {
    content:'';
    position:absolute;
    inset:0;
    background-image:
        linear-gradient(rgba(107,163,190,0.08) 1px,transparent 1px),
        linear-gradient(90deg,rgba(107,163,190,0.08) 1px,transparent 1px);
    background-size:50px 50px;
    animation:gridMove 25s linear infinite;
    will-change:transform;
    opacity:0.3;
    z-index:-1;
}
@keyframes gridMove {
    0%   { transform:translate(0,0); }
    100% { transform:translate(50px,50px); }
}

.hero-content {
    flex:1;
    max-width:650px;
    animation:fadeInLeft 0.8s ease-out 0.2s both;
    position:relative;
    z-index:2;
}
@keyframes fadeInLeft {
    from { opacity:0; transform:translateX(-50px); }
    to   { opacity:1; transform:translateX(0); }
}

.hero-title {
    font-family:'Orbitron',sans-serif;
    font-weight:900;
    font-size:4.5rem;
    line-height:1.1;
    margin-bottom:1.5rem;
    background:linear-gradient(135deg,#0d2a3a,#1a5070,#2a7090);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
    letter-spacing:-2px;
    animation:titleGlow 4s ease-in-out infinite;
    will-change:opacity;
}
[data-theme="dark"] .hero-title {
    background:linear-gradient(135deg,#e8f8ff,#a8d5e2,#6ba3be);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
}
@keyframes titleGlow {
    0%,100% { opacity:0.92; }
    50%      { opacity:1; }
}
.hero-title:hover { animation:glitch 0.3s ease-in-out; }
@keyframes glitch {
    0%   { transform:translate(0); }
    20%  { transform:translate(-2px,2px); }
    40%  { transform:translate(-2px,-2px); }
    60%  { transform:translate(2px,2px); }
    80%  { transform:translate(2px,-2px); }
    100% { transform:translate(0); }
}

.hero-title .wildcat {
    display:block;
    font-size:5.5rem;
    background:linear-gradient(135deg,#0a2233,#1a4a6a,#2d7a9a);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
    margin-bottom:0.2rem;
    position:relative;
}
[data-theme="dark"] .hero-title .wildcat {
    background:linear-gradient(135deg,#ffffff,#c8eaf5,#8ec8e0);
    -webkit-background-clip:text;
    background-clip:text;
}
.hero-title .wildcat::before,
.hero-title .wildcat::after {
    content:'';
    position:absolute;
    width:60px; height:60px;
    border:3px solid var(--arctic-blue);
    opacity:0;
    transition:opacity 0.3s ease;
}
.hero-title .wildcat::before { top:-10px;    left:-20px;  border-right:none; border-bottom:none; animation:cornerBlink 2.5s ease-in-out infinite; }
.hero-title .wildcat::after  { bottom:-10px; right:-20px; border-left:none;  border-top:none;    animation:cornerBlink 2.5s ease-in-out infinite 1.25s; }
@keyframes cornerBlink {
    0%,100% { opacity:0; }
    50%     { opacity:0.8; }
}
.hero-title:hover .wildcat::before,
.hero-title:hover .wildcat::after { opacity:1; }

.hero-subtitle {
    font-family:'Audiowide',cursive;
    font-size:2.2rem;
    color:var(--text-primary);
    margin-bottom:2rem;
    font-weight:400;
    letter-spacing:1px;
    opacity:0;
    animation:fadeInUp 0.7s ease-out 0.5s both;
}
@keyframes fadeInUp {
    from { opacity:0; transform:translateY(18px); }
    to   { opacity:1; transform:translateY(0); }
}

.hero-description {
    font-size:1.3rem;
    line-height:1.8;
    color:var(--text-secondary);
    margin-bottom:1rem;
    font-weight:400;
    opacity:0;
    animation:fadeInUp 0.7s ease-out both;
}
.hero-description:nth-of-type(1) { animation-delay:0.7s; }
.hero-description:nth-of-type(2) { animation-delay:0.85s; }
.hero-description:nth-of-type(3) { animation-delay:1s; }
.hero-description strong { color:var(--text-primary); font-weight:700; }

.hero-cta {
    margin-top:3rem;
    display:flex;
    gap:1.5rem;
    opacity:0;
    animation:fadeInUp 0.7s ease-out 1.1s both;
}

.cta-primary {
    padding:1.2rem 3rem;
    background:linear-gradient(135deg,var(--midnight),var(--deep-blue));
    color:white;
    border:none;
    border-radius:50px;
    font-family:'Orbitron',sans-serif;
    font-weight:700;
    font-size:1.2rem;
    letter-spacing:2px;
    cursor:pointer;
    transition:transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
    box-shadow:0 10px 30px rgba(26,26,46,0.4);
    position:relative;
    overflow:hidden;
}
.cta-primary::before {
    content:'';
    position:absolute;
    inset:0;
    background:radial-gradient(circle at 50% 50%,rgba(255,255,255,0.2) 0%,transparent 70%);
    opacity:0;
    transition:opacity 0.3s ease;
}
.cta-primary:hover::before { opacity:1; }
.cta-primary:hover {
    transform:translateY(-4px) scale(1.04);
    box-shadow:0 15px 40px rgba(26,26,46,0.6);
    background:linear-gradient(135deg,var(--deep-blue),var(--arctic-blue));
}

.cta-secondary {
    padding:1.2rem 3rem;
    background:transparent;
    color:var(--deep-blue);
    border:2px solid var(--arctic-blue);
    border-radius:50px;
    font-family:'Orbitron',sans-serif;
    font-weight:700;
    font-size:1.2rem;
    letter-spacing:2px;
    cursor:pointer;
    transition:transform 0.25s ease, box-shadow 0.25s ease, color 0.25s ease, background 0.25s ease;
    position:relative;
    overflow:hidden;
}
.cta-secondary::before {
    content:'';
    position:absolute;
    inset:0;
    background:var(--arctic-blue);
    transform:translateX(-100%);
    transition:transform 0.3s ease;
    z-index:-1;
}
.cta-secondary:hover::before { transform:translateX(0); }
.cta-secondary:hover { color:white; transform:translateY(-4px); box-shadow:0 10px 30px var(--shadow-blue); }

/* ── Hero Logo ── */
.hero-logo {
    flex:0 0 550px;
    display:flex;
    align-items:center;
    justify-content:center;
    animation:slideInRight 1s cubic-bezier(0.175,0.885,0.32,1.275) 0.4s both;
    position:relative;
    perspective:1000px;
}
@keyframes slideInRight {
    from { opacity:0; transform:translateX(150px) scale(0.6) rotateY(60deg); }
    to   { opacity:1; transform:translateX(0)    scale(1)   rotateY(0deg); }
}

.logo-container {
    position:relative;
    width:500px; height:500px;
    display:flex;
    align-items:center;
    justify-content:center;
    transform-style:preserve-3d;
    transition:transform 0.08s ease-out;
    will-change:transform;
}

/* Orbital rings — translate→rotate only */
.logo-container::before {
    content:'';
    position:absolute;
    width:110%; height:110%;
    background:conic-gradient(from 0deg,transparent,rgba(168,213,226,0.4),rgba(107,163,190,0.6),rgba(74,124,142,0.4),transparent);
    border-radius:50%;
    animation:orbitRotate 10s linear infinite;
    will-change:transform;
    opacity:0.6;
    filter:blur(2px);
}
.logo-container::after {
    content:'';
    position:absolute;
    width:120%; height:120%;
    background:conic-gradient(from 180deg,transparent,rgba(107,163,190,0.3),transparent);
    border-radius:50%;
    animation:orbitRotate 16s linear infinite reverse;
    will-change:transform;
    opacity:0.4;
    filter:blur(3px);
}
@keyframes orbitRotate {
    from { transform:rotate(0deg); }
    to   { transform:rotate(360deg); }
}

.logo-image {
    width:470px; height:470px;
    background:radial-gradient(circle at 30% 30%,rgba(255,255,255,0.9) 0%,rgba(240,248,255,0.8) 30%,var(--ice-blue) 100%);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:
        0 20px 60px rgba(107,163,190,0.4),
        0 0 100px rgba(168,213,226,0.3),
        inset 0 10px 40px rgba(255,255,255,0.3);
    border:5px solid rgba(107,163,190,0.4);
    position:relative;
    overflow:hidden;
    animation:float 6s ease-in-out infinite;
    will-change:transform;
    transform-style:preserve-3d;
    transition:box-shadow 0.3s ease;
}
@keyframes float {
    0%,100% { transform:translateY(0); }
    50%      { transform:translateY(-20px); }
}

/* Shimmer — cheap translate */
.logo-image::before {
    content:'';
    position:absolute;
    inset:-50%;
    width:200%; height:200%;
    background:linear-gradient(45deg,transparent 30%,rgba(255,255,255,0.35) 50%,transparent 70%);
    animation:shimmer 4s ease-in-out infinite;
    will-change:transform;
}
@keyframes shimmer {
    0%   { transform:translateX(-100%) translateY(-100%) rotate(45deg); }
    100% { transform:translateX(100%)  translateY(100%)  rotate(45deg); }
}
/* Pattern overlay — removed (extra composited layer not worth it) */
.logo-image::after { display:none; }

.logo-image img {
    width:88%; height:88%;
    object-fit:contain;
    filter:drop-shadow(0 15px 30px rgba(0,0,0,0.2)) drop-shadow(0 0 25px rgba(107,163,190,0.3));
    transition:transform 0.3s ease, filter 0.3s ease;
    position:relative;
    z-index:2;
}
.logo-image:hover img {
    transform:scale(1.08) rotate(-5deg);
    filter:drop-shadow(0 20px 40px rgba(0,0,0,0.3)) drop-shadow(0 0 40px rgba(107,163,190,0.6));
}

.particle {
    position:absolute;
    width:8px; height:8px;
    background:radial-gradient(circle,rgba(168,213,226,0.8) 0%,transparent 70%);
    border-radius:50%;
    pointer-events:none;
    box-shadow:0 0 15px rgba(168,213,226,0.6);
    will-change:transform, opacity;
}

@media (max-width:1024px) {
    .hero { flex-direction:column; text-align:center; padding-top:10rem; }
    .hero-content { max-width:100%; }
    .hero-title { font-size:3.5rem; }
    .hero-title .wildcat { font-size:4.5rem; }
    .hero-logo { margin-top:4rem; flex:0 0 auto; }
    .logo-container { width:400px; height:400px; }
    .logo-image { width:370px; height:370px; }
    .hero-cta { justify-content:center; }
}
@media (max-width:768px) {
    .hero-title { font-size:2.5rem; }
    .hero-title .wildcat { font-size:3.5rem; }
    .hero-subtitle { font-size:1.5rem; }
    .hero-description { font-size:1.1rem; }
    .logo-container { width:320px; height:320px; }
    .logo-image { width:295px; height:295px; }
    .hero-cta { flex-direction:column; }
    .cta-primary,.cta-secondary { width:100%; }
}

/* ── Section Transition Blending ── */
/* Smooth fade-in from previous section bg */
.stats,
.rocket-section,
.features,
.community-section {
    position: relative;
}

/* Top fade to blend with previous section */
.rocket-section::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 120px;
    background: linear-gradient(to bottom,
        transparent 0%,
        rgba(0,0,0,0) 100%);
    pointer-events: none;
    z-index: 1;
}

/* Subtle divider glow instead of hard cuts */
.stats {
    border-top: none;
    box-shadow: 0 -1px 0 0 rgba(107,163,190,0.15), 0 1px 0 0 rgba(107,163,190,0.10);
}

/* Smooth section blending via overlapping gradients */
.hero {
    padding-bottom: 8rem;
    margin-bottom: -4rem;
}
.stats {
    padding-top: 6rem;
    margin-top: 0;
    clip-path: none;
}
.rocket-section {
    padding-top: 8rem;
    margin-top: 0;
}
.features {
    padding-top: 8rem;
    margin-top: 0;
}
.community-section {
    padding-top: 8rem;
    margin-top: 0;
}

/* Soft gradient overlays at top of each section for seamless blending */
.stats::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 80px;
    background: linear-gradient(to bottom,
        rgba(107,163,190,0.08) 0%,
        transparent 100%);
    pointer-events: none;
    z-index: 0;
}

 */
.stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    padding: 4rem 8%;
    background: linear-gradient(180deg,
        rgba(255,255,255,0.04) 0%,
        rgba(255,255,255,0.06) 50%,
        rgba(255,255,255,0.03) 100%);
    backdrop-filter: blur(4px);
    border-top: 1px solid rgba(255,255,255,0.12);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    margin-top: 4rem;
    margin-bottom: 0;
    position: relative;
    z-index: 2;
    isolation: isolate;
    transition: background 0.6s ease;
}
.stat-item {
    text-align: center;
    padding: 2rem 1rem;
    transition: transform 0.25s ease;
    border-right: 1px solid rgba(255,255,255,0.08);
}
.stat-item:last-child { border-right: none; }
.stat-item:hover { transform: translateY(-8px); }
.stat-number {
    font-family:'Orbitron',sans-serif;
    font-size:3.5rem;
    font-weight:900;
    background:linear-gradient(135deg,#ffffff,#b8e4f2,#7ec8e3);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
    margin-bottom:0.5rem;
    filter:drop-shadow(0 2px 8px rgba(0,0,0,0.25));
}
.stat-label { font-size:1.2rem; color:rgba(255,255,255,0.85); font-weight:600; letter-spacing:1px; text-transform:uppercase; text-shadow:0 1px 4px rgba(0,0,0,0.3); }

@media (max-width:768px) {
    .stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 1px;
    }
    .stat-item { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.08); }
    .stat-item:nth-child(odd) { border-right: 1px solid rgba(255,255,255,0.08); }
    .stat-item:last-child, .stat-item:nth-last-child(2):nth-child(odd) { border-bottom: none; }
}

/* ── Rocket Section ── */
.rocket-section {
    min-height:100vh;
    padding:6rem 8% 2rem;
    position:relative;
    overflow:hidden;
    background: linear-gradient(180deg,
        rgba(255,255,255,0.03)  0%,
        rgba(20,60,90,0.15)     15%,
        rgba(15,45,75,0.30)     30%,
        rgba(10,30,60,0.45)     45%,
        rgba(6,18,48,0.62)      58%,
        rgba(4,12,36,0.78)      70%,
        rgba(2,8,24,0.90)       82%,
        rgba(1,4,14,0.97)       92%,
        rgba(0,2,8,1.0)        100%);
    margin-top:0;
    isolation: isolate;
    transition: background 0.6s ease;
}

/* Stars — cheap background-position animation */
.rocket-section::before {
    content:'';
    position:absolute;
    inset:0;
    background-image:
        radial-gradient(2px 2px at 20% 30%,white,transparent),
        radial-gradient(2px 2px at 60% 70%,white,transparent),
        radial-gradient(1px 1px at 50% 50%,white,transparent),
        radial-gradient(1px 1px at 80% 10%,white,transparent),
        radial-gradient(2px 2px at 90% 60%,white,transparent),
        radial-gradient(1px 1px at 33% 80%,white,transparent);
    background-size:200% 200%;
    animation:starsMove 80s linear infinite;
    opacity:0.6;
    will-change:background-position;
}
@keyframes starsMove {
    0%   { background-position:0% 0%; }
    100% { background-position:100% 100%; }
}

.star {
    position:absolute;
    width:3px; height:3px;
    background:white;
    border-radius:50%;
    box-shadow:0 0 8px rgba(255,255,255,0.8);
    animation:twinkle var(--duration) ease-in-out infinite var(--delay);
    will-change:opacity, transform;
}
@keyframes twinkle {
    0%,100% { opacity:0.3; transform:scale(1); }
    50%     { opacity:1;   transform:scale(1.4); }
}

.rocket-content {
    display:flex;
    align-items:center;
    justify-content:space-between;
    max-width:1400px;
    margin:0 auto;
    position:relative;
    z-index:2;
}
.rocket-text { flex:1; max-width:600px; animation:fadeInLeft 0.8s ease-out 0.3s both; }

.rocket-title {
    font-family:'Orbitron',sans-serif;
    font-size:4.5rem;
    font-weight:900;
    background:linear-gradient(135deg,#FFD700,#FFA500,#FF6347,var(--arctic-blue),var(--ice-blue));
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
    background-size:200% 200%;
    animation:gradientShiftRocket 5s ease infinite;
    margin-bottom:2rem;
}
@keyframes gradientShiftRocket {
    0%,100% { background-position:0% 50%; }
    50%     { background-position:100% 50%; }
}

.rocket-subtitle {
    font-family:'Audiowide',cursive;
    font-size:2rem;
    color:rgba(255,255,255,0.92);
    margin-bottom:2rem;
    animation:glow 3s ease-in-out infinite;
    will-change:opacity;
}
@keyframes glow {
    0%,100% { opacity:0.85; }
    50%     { opacity:1; }
}

.rocket-description { font-size:1.3rem; line-height:1.8; color:rgba(255,255,255,0.80); margin-bottom:1.5rem; text-shadow:0 1px 3px rgba(0,0,0,0.3); }

.rocket-image-container {
    flex:1;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    perspective:1500px;
}

.rocket-wrapper {
    position:relative;
    width:500px; height:500px;
    display:flex;
    align-items:center;
    justify-content:center;
    will-change:transform;
    animation:rocketFloat 6s ease-in-out infinite;
    transform-style:preserve-3d;
    transition:transform 0.1s ease-out;
}
@keyframes rocketFloat {
    0%,100% { transform:translateY(0)    rotate(-15deg); }
    50%     { transform:translateY(-20px) rotate(-13deg); }
}

.rocket-image {
    width:100%; height:100%;
    object-fit:contain;
    filter:drop-shadow(0 20px 50px rgba(255,165,0,0.4));
    transition:transform 0.3s ease, filter 0.3s ease;
    position:relative;
    z-index:10;
}
.rocket-wrapper:hover .rocket-image {
    transform:scale(1.08) rotate(-10deg);
    filter:drop-shadow(0 30px 70px rgba(255,165,0,0.6));
}

.fire-container {
    position:absolute;
    /* The rocket SVG tilts -15deg and the engine exhaust is bottom-left area */
    bottom:18%; left:14%;
    width:160px; height:220px;
    pointer-events:none;
    z-index:5;
    transform:rotate(-15deg);
    transform-origin: center bottom;
}

.fire-particle {
    position:absolute;
    bottom:0; left:50%;
    width:18px; height:18px;
    background:radial-gradient(circle,
        rgba(255,255,0,1) 0%,
        rgba(255,165,0,0.9) 30%,
        rgba(255,69,0,0.7) 60%,
        transparent 100%);
    border-radius:50%;
    animation:fireRise var(--duration) ease-out infinite var(--delay);
    opacity:0;
    filter:blur(2px);
    will-change:transform, opacity;
}
@keyframes fireRise {
    0%  { transform:translateX(-50%) translateY(0) scale(1);   opacity:0; }
    10% { opacity:1; }
    50% { transform:translateX(calc(-50% + var(--tx))) translateY(-110px) scale(1.2); opacity:0.8; }
    100%{ transform:translateX(calc(-50% + var(--tx))) translateY(-230px) scale(0.3); opacity:0; }
}

.fire-plume {
    position:absolute;
    bottom:0; left:50%;
    width:100px; height:150px;
    transform:translateX(-50%);
    background:radial-gradient(ellipse at center bottom,
        rgba(255,255,0,0.9) 0%,
        rgba(255,165,0,0.7) 30%,
        rgba(255,69,0,0.5) 60%,
        transparent 100%);
    animation:plumePulse 0.5s ease-in-out infinite;
    filter:blur(10px);
    will-change:transform, opacity;
}
@keyframes plumePulse {
    0%,100% { transform:translateX(-50%) scaleY(1)   scaleX(1);    opacity:0.95; }
    50%     { transform:translateX(-50%) scaleY(1.25) scaleX(0.87); opacity:1; }
}

.rocket-trail {
    position:absolute;
    width:180%; height:260%;
    top:40%; left:-50%;
    background:radial-gradient(ellipse at center,
        rgba(255,165,0,0.10) 0%,
        rgba(168,213,226,0.05) 50%,
        transparent 100%);
    animation:trailMove 5s ease-in-out infinite;
    z-index:1;
    filter:blur(8px);
    will-change:transform, opacity;
}
@keyframes trailMove {
    0%,100% { transform:rotate(-15deg) scale(1);   opacity:0.35; }
    50%     { transform:rotate(-18deg) scale(1.08); opacity:0.65; }
}

.moon {
    position:absolute;
    top:10%; right:10%;
    width:200px; height:200px;
    background:radial-gradient(circle at 30% 30%,#f4f4f4 0%,#e0e0e0 40%,#c0c0c0 100%);
    border-radius:50%;
    box-shadow:inset -20px -20px 40px rgba(0,0,0,0.2),0 0 80px rgba(255,255,255,0.3);
    animation:moonGlow 5s ease-in-out infinite;
    will-change:box-shadow;
    z-index:1;
}
@keyframes moonGlow {
    0%,100% { box-shadow:inset -20px -20px 40px rgba(0,0,0,0.2),0 0 80px rgba(255,255,255,0.3); }
    50%     { box-shadow:inset -20px -20px 40px rgba(0,0,0,0.2),0 0 120px rgba(255,255,255,0.5); }
}
.moon::before {
    content:'';
    position:absolute;
    width:30px; height:30px;
    background:rgba(0,0,0,0.1);
    border-radius:50%;
    top:30%; left:40%;
    box-shadow:40px 20px 0 10px rgba(0,0,0,0.08),-20px 40px 0 5px rgba(0,0,0,0.12),30px 60px 0 8px rgba(0,0,0,0.1);
}

.spark {
    position:absolute;
    width:5px; height:5px;
    background:#FFD700;
    border-radius:50%;
    box-shadow:0 0 10px #FFD700;
    animation:sparkFly var(--duration) ease-out infinite var(--delay);
    opacity:0;
    will-change:transform, opacity;
}
@keyframes sparkFly {
    0%  { transform:translate(0,0) scale(1); opacity:0; }
    20% { opacity:1; }
    100%{ transform:translate(var(--tx),var(--ty)) scale(0); opacity:0; }
}

@media (max-width:1024px) {
    .rocket-content { flex-direction:column; text-align:center; }
    .rocket-text { max-width:100%; margin-bottom:4rem; }
    .rocket-title { font-size:3.5rem; }
    .rocket-wrapper { width:500px; height:500px; }
    .fire-container { bottom:16%; left:12%; width:130px; height:180px; }
    .moon { width:150px; height:150px; }
}
@media (max-width:768px) {
    .rocket-title { font-size:2.5rem; }
    .rocket-subtitle { font-size:1.5rem; }
    .rocket-wrapper { width:380px; height:380px; }
    .fire-container { bottom:15%; left:10%; width:100px; height:140px; }
    .moon { width:100px; height:100px; top:5%; right:5%; }
}

/* ── Features ── */
.features {
    padding:6rem 8% 8rem;
    position:relative;
    overflow:hidden;
    background: linear-gradient(180deg,
        rgba(255,255,255,0.04)  0%,
        rgba(255,255,255,0.06)  50%,
        rgba(255,255,255,0.03) 100%);
    margin-top:0;
    margin-bottom:0;
    isolation: isolate;
    transition: background 0.6s ease;
}
.features h2 {
    font-family:'Orbitron',sans-serif;
    font-size:3.5rem;
    font-weight:900;
    text-align:center;
    margin-bottom:4rem;
    background:linear-gradient(135deg,#0a2233,#1a5070,#2d7a9a);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
    position:relative;
}
[data-theme="dark"] .features h2 {
    background:linear-gradient(135deg,#ffffff,#c0e8f5,#7ab8d0);
    -webkit-background-clip:text;
    background-clip:text;
}
.features-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    gap:2rem;
    max-width:1400px;
    margin:0 auto;
}
.feature-card {
    background:rgba(255,255,255,0.9);
    backdrop-filter:blur(8px);
    padding:3rem 2.5rem;
    border-radius:24px;
    border:2px solid rgba(107,163,190,0.2);
    transition:transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    box-shadow:0 8px 30px rgba(107,163,190,0.15);
    position:relative;
    overflow:hidden;
    cursor:pointer;
    will-change:transform;
}
.feature-card:hover {
    transform:translateY(-12px) scale(1.01);
    box-shadow:0 20px 50px rgba(107,163,190,0.3);
    border-color:rgba(107,163,190,0.5);
}

/* Animated gradient border on hover */
.feature-card::before {
    content:'';
    position:absolute;
    inset:-2px;
    background:linear-gradient(45deg,rgba(168,213,226,0.5),rgba(107,163,190,0.7),rgba(74,124,142,0.5));
    border-radius:24px;
    opacity:0;
    transition:opacity 0.3s ease;
    z-index:-1;
}
.feature-card:hover::before { opacity:1; }

.feature-icon {
    font-size:4rem;
    margin-bottom:1.5rem;
    display:inline-block;
    transition:transform 0.4s cubic-bezier(0.175,0.885,0.32,1.275), filter 0.3s ease;
    filter:drop-shadow(0 5px 12px rgba(107,163,190,0.3));
}
.feature-card:hover .feature-icon {
    transform:scale(1.15) rotateY(360deg);
    filter:drop-shadow(0 10px 25px rgba(107,163,190,0.6));
}

.feature-title {
    font-family:'Orbitron',sans-serif;
    font-size:1.8rem;
    font-weight:700;
    color:#0d2a3a;
    margin-bottom:1rem;
    transition:color 0.25s ease, transform 0.25s ease;
    position:relative;
}
.feature-card:hover .feature-title { color:var(--arctic-blue); transform:translateX(8px); }
.feature-title::after {
    content:'';
    position:absolute;
    bottom:-6px; left:0;
    width:0; height:3px;
    background:linear-gradient(90deg,var(--arctic-blue),var(--ice-blue));
    transition:width 0.3s ease;
}
.feature-card:hover .feature-title::after { width:60%; }

.feature-description {
    font-size:1.1rem;
    color:#1a4a60;
    line-height:1.7;
    transition:color 0.25s ease, transform 0.25s ease;
}
.feature-card:hover .feature-description { color:var(--midnight); transform:translateX(4px); }

/* Corner brackets */
.corner-tl,.corner-tr,.corner-bl,.corner-br {
    position:absolute;
    width:20px; height:20px;
    border:2px solid var(--arctic-blue);
    opacity:0;
    transition:opacity 0.3s ease, transform 0.3s ease;
}
.corner-tl { top:15px;    left:15px;   border-right:none;  border-bottom:none; }
.corner-tr { top:15px;    right:15px;  border-left:none;   border-bottom:none; }
.corner-bl { bottom:15px; left:15px;   border-right:none;  border-top:none; }
.corner-br { bottom:15px; right:15px;  border-left:none;   border-top:none; }
.feature-card:hover .corner-tl { opacity:1; transform:translate(-4px,-4px); }
.feature-card:hover .corner-tr { opacity:1; transform:translate(4px,-4px); }
.feature-card:hover .corner-bl { opacity:1; transform:translate(-4px,4px); }
.feature-card:hover .corner-br { opacity:1; transform:translate(4px,4px); }

.card-particle {
    position:absolute;
    width:4px; height:4px;
    background:rgba(168,213,226,0.8);
    border-radius:50%;
    pointer-events:none;
    animation:particleFade 0.8s ease-out forwards;
    will-change:transform, opacity;
}
@keyframes particleFade {
    0%   { opacity:1; transform:translate(0,0) scale(1); }
    100% { opacity:0; transform:translate(var(--tx),var(--ty)) scale(0); }
}

@media (max-width:768px) {
    .features h2 { font-size:2.5rem; }
    .features-grid { grid-template-columns:1fr; gap:1.5rem; }
    .feature-card { padding:2.5rem 2rem; }
}

/* ── Community Section ── */
.community-section {
    min-height:100vh;
    padding:6rem 8%;
    position:relative;
    overflow:hidden;
    background: linear-gradient(180deg,
        rgba(255,255,255,0.03)  0%,
        rgba(255,255,255,0.05)  40%,
        rgba(255,255,255,0.03) 100%);
    margin-top:0;
    margin-bottom:0;
    isolation: isolate;
    transition: background 0.6s ease;
}

/* Cool cat background */
.community-section::before {
    content:'';
    position:absolute;
    top:50%; left:50%;
    transform:translate(-50%,-50%);
    width:600px; height:600px;
    background-image:url('wilCatGold.png');
    background-size:contain;
    background-position:center;
    background-repeat:no-repeat;
    opacity:0.12;
    z-index:0;
    will-change:transform, opacity;
    animation:catFloat 10s ease-in-out infinite;
    filter:drop-shadow(0 0 60px rgba(255,255,255,0.3));
}
@keyframes catFloat {
    0%,100% { transform:translate(-50%,-50%) scale(1)    rotate(0deg); opacity:0.12; }
    50%     { transform:translate(-50%,-52%) scale(1.04) rotate(1.5deg); opacity:0.18; }
}

/* Particle dots — cheap bg-position */
.community-section::after {
    content:'';
    position:absolute;
    inset:0;
    background-image:
        radial-gradient(circle at 20% 30%,rgba(255,255,255,0.1) 2px,transparent 2px),
        radial-gradient(circle at 80% 70%,rgba(255,255,255,0.08) 2px,transparent 2px),
        radial-gradient(circle at 50% 50%,rgba(255,255,255,0.12) 1px,transparent 1px);
    background-size:100px 100px,150px 150px,200px 200px;
    animation:particleDots 30s linear infinite;
    opacity:0.4;
    z-index:0;
}
@keyframes particleDots {
    0%   { background-position:0 0,0 0,0 0; }
    100% { background-position:100px 100px,-150px -150px,200px 200px; }
}

.community-content { position:relative; z-index:2; max-width:1200px; margin:0 auto; }

.community-title {
    font-family:'Orbitron',sans-serif;
    font-size:4rem;
    font-weight:900;
    text-align:center;
    margin-bottom:1.5rem;
    background:linear-gradient(135deg,var(--midnight),var(--deep-blue),var(--arctic-blue));
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
    background-size:200% 200%;
    animation:gradientShiftCommunity 5s ease infinite;
}
@keyframes gradientShiftCommunity {
    0%,100% { background-position:0% 50%; }
    50%     { background-position:100% 50%; }
}

.community-subtitle {
    font-family:'Rajdhani',sans-serif;
    font-size:1.5rem;
    text-align:center;
    color:var(--midnight);
    margin-bottom:4rem;
    font-weight:600;
    letter-spacing:2px;
}

.social-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    gap:3rem;
    margin-bottom:3rem;
}

.social-card {
    background:rgba(255,255,255,0.95);
    backdrop-filter:blur(8px);
    padding:3rem 2rem;
    border-radius:30px;
    border:3px solid rgba(107,163,190,0.3);
    transition:transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    box-shadow:0 15px 40px rgba(0,0,0,0.15);
    position:relative;
    overflow:hidden;
    cursor:pointer;
    will-change:transform;
}
.social-card::before {
    content:'';
    position:absolute;
    inset:-3px;
    background:linear-gradient(45deg,rgba(168,213,226,0.5),rgba(107,163,190,0.7),rgba(74,124,142,0.5),rgba(107,163,190,0.7),rgba(168,213,226,0.5));
    background-size:300% 300%;
    border-radius:30px;
    opacity:0;
    transition:opacity 0.3s ease;
    animation:borderRotateSocial 5s linear infinite;
    z-index:-1;
}
@keyframes borderRotateSocial {
    0%,100% { background-position:0% 50%; }
    50%     { background-position:100% 50%; }
}
.social-card:hover::before { opacity:1; }

/* Shine */
.social-card::after {
    content:'';
    position:absolute;
    top:-50%; left:-50%;
    width:200%; height:200%;
    background:linear-gradient(45deg,transparent 30%,rgba(255,255,255,0.5) 50%,transparent 70%);
    transform:translateX(-100%) translateY(-100%) rotate(45deg);
    transition:transform 0.6s ease;
    will-change:transform;
}
.social-card:hover::after { transform:translateX(100%) translateY(100%) rotate(45deg); }

.social-card:hover {
    transform:translateY(-20px) scale(1.04);
    box-shadow:0 30px 70px rgba(0,0,0,0.22),0 0 50px rgba(107,163,190,0.25);
    border-color:var(--arctic-blue);
}
.social-card.reddit:hover   { background:linear-gradient(135deg,rgba(255,69,0,0.05) 0%,rgba(255,255,255,0.97) 100%); }
.social-card.discord:hover  { background:linear-gradient(135deg,rgba(88,101,242,0.05) 0%,rgba(255,255,255,0.97) 100%); }
.social-card.telegram:hover { background:linear-gradient(135deg,rgba(0,136,204,0.05) 0%,rgba(255,255,255,0.97) 100%); }

.social-icon {
    font-size:5rem;
    text-align:center;
    margin-bottom:2rem;
    display:block;
    transition:transform 0.4s cubic-bezier(0.175,0.885,0.32,1.275), filter 0.3s ease;
    filter:drop-shadow(0 8px 18px rgba(0,0,0,0.2));
}
.social-card:hover .social-icon { transform:scale(1.15) rotateY(360deg); }

.social-name {
    font-family:'Orbitron',sans-serif;
    font-size:2rem;
    font-weight:700;
    text-align:center;
    margin-bottom:1rem;
    color:var(--midnight);
    transition:color 0.25s ease, text-shadow 0.25s ease;
}
.social-card:hover .social-name { color:var(--arctic-blue); text-shadow:0 0 20px rgba(107,163,190,0.5); }

.social-members {
    font-family:'Rajdhani',sans-serif;
    font-size:1.3rem;
    text-align:center;
    color:var(--deep-blue);
    font-weight:600;
    letter-spacing:1px;
    transition:color 0.25s ease, transform 0.25s ease;
}
.social-card:hover .social-members { color:var(--midnight); transform:scale(1.05); }

/* Social card corners */
.social-corner-tl,.social-corner-tr,.social-corner-bl,.social-corner-br {
    position:absolute;
    width:25px; height:25px;
    border:3px solid var(--arctic-blue);
    opacity:0;
    transition:opacity 0.3s ease, transform 0.3s ease;
}
.social-corner-tl { top:15px;    left:15px;   border-right:none;  border-bottom:none; }
.social-corner-tr { top:15px;    right:15px;  border-left:none;   border-bottom:none; }
.social-corner-bl { bottom:15px; left:15px;   border-right:none;  border-top:none; }
.social-corner-br { bottom:15px; right:15px;  border-left:none;   border-top:none; }
.social-card:hover .social-corner-tl { opacity:1; transform:translate(-5px,-5px); }
.social-card:hover .social-corner-tr { opacity:1; transform:translate(5px,-5px); }
.social-card:hover .social-corner-bl { opacity:1; transform:translate(-5px,5px); }
.social-card:hover .social-corner-br { opacity:1; transform:translate(5px,5px); }

.join-btn {
    display:block;
    margin:2rem auto 0;
    padding:1rem 2.5rem;
    background:linear-gradient(135deg,var(--midnight),var(--deep-blue));
    color:white;
    border:none;
    border-radius:50px;
    font-family:'Orbitron',sans-serif;
    font-weight:700;
    font-size:0.95rem;
    letter-spacing:2px;
    text-decoration:none;
    text-align:center;
    cursor:pointer;
    transition:transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
    box-shadow:0 8px 25px rgba(26,26,46,0.3);
}
.join-btn:hover {
    background:linear-gradient(135deg,var(--deep-blue),var(--arctic-blue));
    transform:translateY(-3px) scale(1.03);
    box-shadow:0 12px 35px rgba(107,163,190,0.4);
}

/* ══════════════════════════════════════════
   DARK MODE — overrides completos
   ══════════════════════════════════════════ */
[data-theme="dark"] body {
    /* Dark mode: negro espacial profundo — muy diferente del light */
    background: linear-gradient(180deg,
        #020408  0%,
        #030610  6%,
        #04091a  13%,
        #060c24  21%,
        #080f2c  30%,
        #090e28  40%,
        #0a0d24  50%,
        #080c1e  60%,
        #060a18  70%,
        #050814  80%,
        #03060e  90%,
        #020408  100%);
    color: #E0F2F7;
}
[data-theme="dark"] .feature-card,
[data-theme="dark"] .social-card {
    background: rgba(18,18,42,0.88);
    border-color: rgba(107,163,190,0.35);
}

[data-theme="dark"] nav {
    background: linear-gradient(135deg,
        rgba(15,15,35,0.75) 0%,
        rgba(18,18,40,0.65) 50%,
        rgba(15,15,35,0.75) 100%);
}
[data-theme="dark"] .hero         { background: transparent; }
[data-theme="dark"] .hero-subtitle       { color: #A8D5E2; }
[data-theme="dark"] .rocket-subtitle     { color: #A8D5E2; }
[data-theme="dark"] .hero-description    { color: #8BBFCF; }
[data-theme="dark"] .hero-description strong { color: #E0F2F7; }
[data-theme="dark"] .rocket-description  { color: #8BBFCF; }
[data-theme="dark"] .stat-label          { color: #8BBFCF; }
[data-theme="dark"] .feature-title       { color: #E0F2F7; }
[data-theme="dark"] .feature-description { color: #8BBFCF; }
[data-theme="dark"] .social-name         { color: #E0F2F7; }
[data-theme="dark"] .social-members      { color: #8BBFCF; }
[data-theme="dark"] .community-subtitle  { color: #8BBFCF; }
[data-theme="dark"] .rocket-section {
    /* En dark mode el body ya es negro, las secciones son casi transparentes */
    background: rgba(0,0,0,0.12);
}
[data-theme="dark"] .features {
    background: rgba(5,5,20,0.35);
}
[data-theme="dark"] .community-section {
    background: rgba(3,3,15,0.25);
}
[data-theme="dark"] .stats {
    background: rgba(5,5,20,0.40);
    border-color: rgba(100,150,190,0.15);
}


/* ══════════════════════════════════════════════════════════
   WCC VIDEO SECTION
   Palette: deep cosmic navy + gold + ice-blue accents
   matching the videowilcat.mp4 visual identity
══════════════════════════════════════════════════════════ */

/* Section wrapper */
.wcc-video-section {
    position: relative;
    overflow: hidden;
    padding: 7rem 6% 7rem;
    width: 100%;
    box-sizing: border-box;
    /* deep cosmic gradient inspired by the video's dark-space look */
    background: linear-gradient(160deg,
        #05060f   0%,
        #0b0b22   18%,
        #101030   35%,
        #0d1a3a   52%,
        #0a1428   68%,
        #06101e   82%,
        #030810   100%);
    isolation: isolate;
    z-index: 1;
}

/* Soft glow orbs (GPU layer) */
.wcc-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    will-change: transform, opacity;
    filter: blur(80px);
}
.wcc-orb-1 {
    width: 520px; height: 520px;
    background: radial-gradient(circle, rgba(100,170,220,0.18) 0%, transparent 70%);
    top: -80px; left: -120px;
    animation: orbDrift 14s ease-in-out infinite;
}
.wcc-orb-2 {
    width: 400px; height: 400px;
    background: radial-gradient(circle, rgba(200,160,30,0.14) 0%, transparent 70%);
    bottom: -60px; right: -80px;
    animation: orbDrift 18s ease-in-out infinite reverse;
}
.wcc-orb-3 {
    width: 300px; height: 300px;
    background: radial-gradient(circle, rgba(60,80,180,0.15) 0%, transparent 70%);
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    animation: orbPulse 10s ease-in-out infinite;
}
@keyframes orbDrift {
    0%,100% { transform: translate(0,0); }
    50%      { transform: translate(40px,-30px); }
}
@keyframes orbPulse {
    0%,100% { opacity: 0.5; transform: translate(-50%,-50%) scale(1); }
    50%      { opacity: 1;   transform: translate(-50%,-50%) scale(1.15); }
}

/* Inner flex row */
.wcc-inner {
    position: relative;
    z-index: 2;
    max-width: 1300px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 4rem;
    box-sizing: border-box;
}

/* ── Video side ── */
.wcc-video-side {
    flex: 0 0 460px;
    width: 460px;
    height: 460px;
    min-width: 260px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

/* Outer glow ring */
.wcc-ring {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}
.wcc-ring-outer {
    inset: -22px;
    background: conic-gradient(
        from 0deg,
        transparent 0%,
        rgba(200,160,30,0.7)  20%,
        rgba(255,210,60,0.9)  35%,
        rgba(168,213,226,0.6) 50%,
        rgba(100,160,220,0.7) 65%,
        rgba(200,160,30,0.7)  80%,
        transparent 100%
    );
    animation: ringRotate 6s linear infinite;
    will-change: transform;
    filter: blur(6px);
    opacity: 0.85;
}
/* spinning dashed ring (faster) */
.wcc-ring-spin {
    inset: -10px;
    border: 3px dashed rgba(200,170,40,0.55);
    animation: ringRotate 10s linear infinite reverse;
    will-change: transform;
}
@keyframes ringRotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Circular mask & video */
.wcc-circle-mask {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid rgba(200,160,30,0.5);
    box-shadow:
        0 0 60px rgba(200,160,30,0.35),
        0 0 120px rgba(80,140,220,0.25),
        inset 0 0 40px rgba(0,0,0,0.6);
    position: relative;
    z-index: 2;
    will-change: box-shadow;
    animation: circlePulse 5s ease-in-out infinite;
}
@keyframes circlePulse {
    0%,100% { box-shadow: 0 0 60px rgba(200,160,30,0.35), 0 0 120px rgba(80,140,220,0.25), inset 0 0 40px rgba(0,0,0,0.6); }
    50%     { box-shadow: 0 0 90px rgba(200,160,30,0.55), 0 0 180px rgba(80,140,220,0.4),  inset 0 0 40px rgba(0,0,0,0.6); }
}

.wcc-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
    background: radial-gradient(circle at center, #1a2a4a 0%, #05060f 100%);
}

/* Spark glyphs orbiting the circle */
.wcc-spark {
    position: absolute;
    font-size: 1.1rem;
    color: #ffd700;
    filter: drop-shadow(0 0 6px rgba(255,215,0,0.9));
    animation: sparkOrbit 8s linear infinite;
    will-change: transform;
    transform-origin: 0 0;
    pointer-events: none;
    z-index: 3;
    /* Each spark starts at center, then we offset in CSS */
}
/* Place sparks around the ring using rotate + translate */
.wcc-spark { top: 50%; left: 50%; margin: 0; }
.s1 { animation: sparkOrbit  8s linear    0s  infinite; --r: 267px; }
.s2 { animation: sparkOrbit  8s linear   -1.6s infinite; --r: 267px; }
.s3 { animation: sparkOrbit  8s linear   -3.2s infinite; --r: 267px; }
.s4 { animation: sparkOrbit  8s linear   -4.8s infinite; --r: 267px; }
.s5 { animation: sparkOrbit  8s linear   -6.4s infinite; --r: 267px; }

@keyframes sparkOrbit {
    from { transform: rotate(0deg)   translateX(var(--r)) rotate(0deg); }
    to   { transform: rotate(360deg) translateX(var(--r)) rotate(-360deg); }
}

/* ── Copy side ── */
.wcc-copy {
    flex: 1 1 400px;
    min-width: 280px;
    max-width: 700px;
    visibility: visible;
    opacity: 1;
    display: block;
}

.wcc-eyebrow {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: rgba(200,160,30,0.85);
    margin-bottom: 0.5rem;
}

.wcc-heading {
    font-family: 'Orbitron', sans-serif;
    font-size: 3.6rem;
    font-weight: 900;
    line-height: 1.1;
    margin-bottom: 2.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.wcc-gradient-text {
    background: linear-gradient(135deg, #ffd700, #e8b800, #a8d5e2, #6ba3be);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    background-size: 200% 200%;
    animation: wccGradShift 5s ease infinite;
}
@keyframes wccGradShift {
    0%,100% { background-position: 0% 50%; }
    50%     { background-position: 100% 50%; }
}
.wcc-ticker {
    font-size: 1.8rem;
    font-weight: 700;
    color: rgba(168,213,226,0.75);
    letter-spacing: 4px;
}

/* Pillars / feature rows */
.wcc-pillars {
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
    margin-bottom: 2.8rem;
}
.wcc-pillar {
    display: flex;
    align-items: flex-start;
    gap: 1.2rem;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(200,160,30,0.18);
    border-left: 3px solid rgba(200,160,30,0.7);
    border-radius: 12px;
    padding: 1rem 1.3rem;
    transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
    will-change: transform;
}
.wcc-pillar:hover {
    background: rgba(200,160,30,0.07);
    border-color: rgba(200,160,30,0.5);
    transform: translateX(6px);
}
.wcc-pillar-icon {
    font-size: 2rem;
    flex-shrink: 0;
    filter: drop-shadow(0 0 8px rgba(255,215,0,0.6));
}
.wcc-pillar h3 {
    font-family: 'Orbitron', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: #ffd700;
    margin-bottom: 0.3rem;
    letter-spacing: 1px;
}
.wcc-pillar p {
    font-size: 1rem;
    color: rgba(200,225,240,0.78);
    line-height: 1.55;
    margin: 0;
}

/* CTA row */
.wcc-cta-row {
    display: flex;
    gap: 1.2rem;
    flex-wrap: wrap;
}
.wcc-btn-primary {
    padding: 1rem 2.4rem;
    background: linear-gradient(135deg, #c8a000, #ffd700, #c8a000);
    background-size: 200% 200%;
    animation: wccGradShift 4s ease infinite;
    color: #05060f;
    border: none;
    border-radius: 50px;
    font-family: 'Orbitron', sans-serif;
    font-weight: 800;
    font-size: 1rem;
    letter-spacing: 1.5px;
    cursor: pointer;
    box-shadow: 0 8px 30px rgba(200,160,30,0.45);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    will-change: transform;
}
.wcc-btn-primary:hover {
    transform: translateY(-4px) scale(1.04);
    box-shadow: 0 14px 40px rgba(200,160,30,0.65);
}
.wcc-btn-secondary {
    padding: 1rem 2.4rem;
    background: transparent;
    color: rgba(168,213,226,0.9);
    border: 2px solid rgba(168,213,226,0.5);
    border-radius: 50px;
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 1.5px;
    cursor: pointer;
    transition: all 0.25s ease;
}
.wcc-btn-secondary:hover {
    background: rgba(168,213,226,0.12);
    border-color: rgba(168,213,226,0.85);
    color: #fff;
    transform: translateY(-3px);
}

/* ── Responsive ── */
@media (max-width:960px) {
    .wcc-inner { flex-direction: column; gap: 3rem; text-align: center; }
    .wcc-video-side { flex: 0 0 360px; width: 360px; height: 360px; }
    .s1,.s2,.s3,.s4,.s5 { --r: 193px; }
    .wcc-heading { align-items: center; }
    .wcc-eyebrow { text-align: center; }
    .wcc-cta-row { justify-content: center; }
    .wcc-pillar { text-align: left; }
}
@media (max-width:600px) {
    .wcc-video-section { padding: 5rem 5% 5rem; }
    .wcc-video-side { width: 290px; height: 290px; }
    .s1,.s2,.s3,.s4,.s5 { --r: 158px; }
    .wcc-heading { font-size: 2.6rem; }
    .wcc-btn-primary, .wcc-btn-secondary { width: 100%; text-align: center; }
    .wcc-cta-row { flex-direction: column; }
}

/* ── Reduce motion ── */
@media (prefers-reduced-motion:reduce) {
    *, *::before, *::after {
        animation-duration:0.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:0.01ms !important;
    }
}