/* SpinOrbit - Space Observatory Social Platform */
/* Base Reset & Variables */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
    --midnight:#0a0e1a;
    --deep-blue:#0d1b2a;
    --cosmic-purple:#7b2ff7;
    --electric-cyan:#00e5ff;
    --silver:#b8c5d6;
    --soft-white:#e8edf5;
    --deep-black:#050810;
    --panel-bg:rgba(13,27,42,0.85);
    --glass:rgba(0,229,255,0.05);
    --glow-cyan:0 0 20px rgba(0,229,255,0.3);
    --glow-purple:0 0 20px rgba(123,47,247,0.3);
    --font-main:'Segoe UI',system-ui,-apple-system,sans-serif;
    --font-mono:'Courier New',monospace;
    --radius:12px;
    --radius-sm:8px;
    --radius-lg:20px;
}
html{scroll-behavior:smooth;font-size:16px}
body{
    font-family:var(--font-main);
    background:var(--midnight);
    color:var(--soft-white);
    line-height:1.6;
    overflow-x:hidden;
    min-height:100vh;
}
a{color:var(--electric-cyan);text-decoration:none;transition:color 0.3s}
a:hover{color:var(--soft-white)}
img{max-width:100%;height:auto;display:block}
button{cursor:pointer;border:none;font-family:inherit}

/* Starfield */
.starfield{
    position:fixed;
    inset:0;
    z-index:0;
    pointer-events:none;
    overflow:hidden;
}

/* Navigation */
.orbital-nav{
    position:fixed;
    top:0;left:0;right:0;
    z-index:1000;
    background:rgba(10,14,26,0.9);
    backdrop-filter:blur(12px);
    border-bottom:1px solid rgba(0,229,255,0.1);
    padding:0.75rem 0;
}
.nav-container{
    max-width:1200px;
    margin:0 auto;
    padding:0 1.5rem;
    display:flex;
    align-items:center;
    justify-content:space-between;
}
.nav-logo{
    display:flex;
    align-items:center;
    gap:0.5rem;
    font-size:1.25rem;
    font-weight:700;
    color:var(--soft-white);
}
.nav-logo .logo-icon{animation:spin-slow 20s linear infinite}
.nav-links{display:flex;gap:1.5rem;align-items:center}
.nav-link{
    color:var(--silver);
    font-size:0.9rem;
    padding:0.5rem 0;
    position:relative;
    transition:color 0.3s;
}
.nav-link::after{
    content:'';
    position:absolute;
    bottom:0;left:0;
    width:0;height:2px;
    background:var(--electric-cyan);
    transition:width 0.3s;
}
.nav-link:hover,.nav-link.active{color:var(--electric-cyan)}
.nav-link:hover::after,.nav-link.active::after{width:100%}
.badge-18{
    background:linear-gradient(135deg,var(--cosmic-purple),var(--electric-cyan));
    color:#fff;
    font-size:0.75rem;
    font-weight:700;
    padding:0.25rem 0.5rem;
    border-radius:4px;
}
.nav-toggle{
    display:none;
    flex-direction:column;
    gap:5px;
    background:none;
    padding:0.5rem;
}
.nav-toggle span{
    display:block;
    width:24px;
    height:2px;
    background:var(--soft-white);
    transition:0.3s;
}

/* Hero Dome */
.hero-dome{
    position:relative;
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:6rem 1.5rem 4rem;
    overflow:hidden;
}
.dome-overlay{
    position:absolute;
    inset:0;
    background:radial-gradient(ellipse at 50% 30%,rgba(0,229,255,0.08) 0%,transparent 60%),
               radial-gradient(ellipse at 80% 80%,rgba(123,47,247,0.06) 0%,transparent 50%);
    pointer-events:none;
}
.hero-content{
    position:relative;
    z-index:2;
    text-align:center;
    max-width:700px;
}
.hero-radar{
    width:160px;height:160px;
    margin:0 auto 2rem;
    opacity:0.6;
}
.radar-svg{width:100%;height:100%}
.radar-sweep{
    transform-origin:100px 100px;
    animation:radar-spin 3s linear infinite;
}
.hero-title{
    font-size:clamp(2.5rem,6vw,4.5rem);
    font-weight:800;
    line-height:1.1;
    margin-bottom:1rem;
}
.glow-text{
    background:linear-gradient(90deg,var(--electric-cyan),var(--cosmic-purple));
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
}
.hero-subtitle{
    font-size:1.1rem;
    color:var(--silver);
    margin-bottom:2rem;
    max-width:500px;
    margin-left:auto;
    margin-right:auto;
}
.hero-btn{
    display:inline-flex;
    align-items:center;
    gap:0.5rem;
    background:linear-gradient(135deg,var(--cosmic-purple),var(--electric-cyan));
    color:#fff;
    padding:0.9rem 2rem;
    border-radius:var(--radius);
    font-weight:600;
    font-size:1rem;
    transition:transform 0.3s,box-shadow 0.3s;
    box-shadow:var(--glow-purple);
}
.hero-btn:hover{
    transform:translateY(-2px);
    box-shadow:0 0 30px rgba(123,47,247,0.5);
    color:#fff;
}
.hero-planets{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.planet{
    position:absolute;
    border-radius:50%;
    opacity:0.15;
}
.planet-1{
    width:300px;height:300px;
    background:radial-gradient(circle,var(--cosmic-purple),transparent 70%);
    top:10%;right:-5%;
    animation:float 8s ease-in-out infinite;
}
.planet-2{
    width:200px;height:200px;
    background:radial-gradient(circle,var(--electric-cyan),transparent 70%);
    bottom:20%;left:-3%;
    animation:float 10s ease-in-out infinite reverse;
}
.planet-3{
    width:150px;height:150px;
    background:radial-gradient(circle,var(--cosmic-purple),transparent 70%);
    top:40%;left:15%;
    animation:float 12s ease-in-out infinite 2s;
}

/* Sections Common */
section{position:relative;z-index:1;padding:5rem 1.5rem}
.section-title{
    text-align:center;
    font-size:clamp(1.8rem,4vw,2.5rem);
    font-weight:700;
    margin-bottom:3rem;
    background:linear-gradient(90deg,var(--soft-white),var(--electric-cyan));
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
}

/* Reel Machine Arena */
.reel-arena{background:linear-gradient(180deg,transparent,rgba(13,27,42,0.5),transparent)}
.arena-container{max-width:900px;margin:0 auto}
.arena-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:1rem;
    margin-bottom:2rem;
}
.arena-score{display:flex;gap:1.5rem}
.score-item{
    text-align:center;
    background:var(--panel-bg);
    border:1px solid rgba(0,229,255,0.15);
    border-radius:var(--radius-sm);
    padding:0.5rem 1rem;
}
.score-label{display:block;font-size:0.75rem;color:var(--silver);text-transform:uppercase;letter-spacing:0.05em}
.score-value{display:block;font-size:1.25rem;font-weight:700;color:var(--electric-cyan)}

.reel-machine{margin-bottom:2rem}
.machine-frame{
    background:var(--panel-bg);
    border:2px solid rgba(0,229,255,0.2);
    border-radius:var(--radius-lg);
    padding:1.5rem;
    box-shadow:var(--glow-cyan),inset 0 0 60px rgba(0,0,0,0.3);
}
.machine-display{
    position:relative;
    background:rgba(5,8,16,0.9);
    border:1px solid rgba(0,229,255,0.1);
    border-radius:var(--radius);
    padding:1rem;
    margin-bottom:1.5rem;
    overflow:hidden;
}
.reel-container{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:0.5rem;
    height:240px;
}
.reel{
    position:relative;
    overflow:hidden;
    background:rgba(13,27,42,0.6);
    border:1px solid rgba(0,229,255,0.1);
    border-radius:var(--radius-sm);
}
.reel-strip{
    position:absolute;
    top:0;left:0;right:0;
    transition:transform 0.1s;
}
.reel-symbol{
    height:80px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0.5rem;
}
.reel-symbol svg{width:48px;height:48px}
.win-lines{
    position:absolute;
    inset:1rem;
    pointer-events:none;
    opacity:0;
    transition:opacity 0.3s;
}
.win-lines.show{opacity:1}
.win-line{
    position:absolute;
    left:0;right:0;
    height:2px;
    background:var(--electric-cyan);
    box-shadow:var(--glow-cyan);
}
.line-top{top:40px}
.line-middle{top:50%}
.line-bottom{bottom:40px}

.machine-panel{
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:1rem;
}
.panel-info{display:flex;gap:1.5rem}
.multiplier-display,.last-win{text-align:center}
.mult-label,.win-label{display:block;font-size:0.7rem;color:var(--silver);text-transform:uppercase;letter-spacing:0.05em}
.mult-value{display:block;font-size:1.5rem;font-weight:700;color:var(--cosmic-purple)}
.win-value{display:block;font-size:1.5rem;font-weight:700;color:var(--electric-cyan)}

.panel-controls{display:flex;gap:0.75rem;align-items:center}
.btn-spin{
    display:flex;align-items:center;gap:0.5rem;
    background:linear-gradient(135deg,var(--cosmic-purple),#5a1fd6);
    color:#fff;
    padding:0.8rem 1.8rem;
    border-radius:var(--radius);
    font-weight:700;
    font-size:1rem;
    transition:transform 0.2s,box-shadow 0.2s;
    box-shadow:var(--glow-purple);
}
.btn-spin:hover{transform:scale(1.05);box-shadow:0 0 30px rgba(123,47,247,0.5)}
.btn-spin:disabled{opacity:0.5;transform:none;cursor:not-allowed}
.btn-spin.spinning svg{animation:spin-fast 0.5s linear infinite}
.btn-auto,.btn-bet{
    background:rgba(0,229,255,0.1);
    border:1px solid rgba(0,229,255,0.3);
    color:var(--electric-cyan);
    padding:0.6rem 1rem;
    border-radius:var(--radius-sm);
    font-size:0.85rem;
    transition:background 0.3s;
}
.btn-auto:hover,.btn-bet:hover{background:rgba(0,229,255,0.2)}
.btn-auto.active{background:rgba(0,229,255,0.3);border-color:var(--electric-cyan)}

.combinations-panel{
    background:var(--panel-bg);
    border:1px solid rgba(0,229,255,0.1);
    border-radius:var(--radius);
    padding:1.5rem;
    margin-bottom:1.5rem;
}
.combinations-panel h3{font-size:1rem;margin-bottom:1rem;color:var(--electric-cyan)}
.combo-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
    gap:0.75rem;
}
.combo-item{
    display:flex;align-items:center;gap:0.5rem;
    background:rgba(5,8,16,0.5);
    border:1px solid rgba(0,229,255,0.08);
    border-radius:var(--radius-sm);
    padding:0.5rem 0.75rem;
    font-size:0.8rem;
}
.combo-item svg{width:24px;height:24px;flex-shrink:0}
.combo-item span{color:var(--silver)}
.combo-multiplier{color:var(--electric-cyan);font-weight:700;margin-left:auto}

.spin-history{
    background:var(--panel-bg);
    border:1px solid rgba(0,229,255,0.1);
    border-radius:var(--radius);
    padding:1.5rem;
    max-height:200px;
    overflow-y:auto;
}
.spin-history h3{font-size:1rem;margin-bottom:1rem;color:var(--electric-cyan)}
.history-list{display:flex;flex-direction:column;gap:0.5rem}
.history-empty{color:var(--silver);font-size:0.85rem;font-style:italic}
.history-item{
    display:flex;justify-content:space-between;align-items:center;
    padding:0.4rem 0.75rem;
    background:rgba(5,8,16,0.5);
    border-radius:var(--radius-sm);
    font-size:0.8rem;
}
.history-item.win{border-left:3px solid var(--electric-cyan)}
.history-item.loss{border-left:3px solid rgba(184,197,214,0.3)}
.history-result{font-weight:600}
.history-result.positive{color:var(--electric-cyan)}
.history-result.negative{color:var(--silver)}

/* Statistics Dashboard */
.stats-dashboard{background:linear-gradient(180deg,transparent,rgba(123,47,247,0.03),transparent)}
.stats-container{max-width:1000px;margin:0 auto}
.stats-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
    gap:1.5rem;
}
.stat-card{
    background:var(--panel-bg);
    border:1px solid rgba(0,229,255,0.12);
    border-radius:var(--radius);
    padding:1.5rem;
    text-align:center;
    transition:border-color 0.3s,box-shadow 0.3s;
}
.stat-card:hover{border-color:rgba(0,229,255,0.3);box-shadow:var(--glow-cyan)}
.stat-radar{width:80px;height:80px;margin:0 auto 1rem}
.stat-svg{width:100%;height:100%}
.stat-progress{
    stroke-linecap:round;
    transform:rotate(-90deg);
    transform-origin:50% 50%;
    transition:stroke-dashoffset 1s ease;
}
.stat-value{display:block;font-size:1.5rem;font-weight:700;color:var(--electric-cyan)}
.stat-label{display:block;font-size:0.8rem;color:var(--silver);margin-top:0.25rem}

/* Orbit Timeline */
.orbit-timeline{padding:4rem 1.5rem}
.timeline-container{max-width:900px;margin:0 auto}
.orbit-path{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    position:relative;
    padding:2rem 0;
}
.orbit-line{
    position:absolute;
    top:32px;left:10%;right:10%;
    height:2px;
    background:linear-gradient(90deg,var(--electric-cyan),var(--cosmic-purple));
    opacity:0.3;
}
.orbit-step{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:0.75rem;
    position:relative;
    z-index:2;
    flex:1;
}
.step-node{
    width:56px;height:56px;
    display:flex;align-items:center;justify-content:center;
    background:var(--panel-bg);
    border:2px solid rgba(0,229,255,0.2);
    border-radius:50%;
    transition:border-color 0.3s,box-shadow 0.3s;
}
.orbit-step.completed .step-node{
    border-color:var(--electric-cyan);
    box-shadow:var(--glow-cyan);
}
.orbit-step.completed .step-node svg{stroke:var(--electric-cyan)}
.step-label{
    font-size:0.8rem;
    color:var(--silver);
    text-align:center;
    max-width:120px;
}

/* Nebula Section */
.nebula-section{background:linear-gradient(180deg,transparent,rgba(13,27,42,0.5),transparent)}
.nebula-container{max-width:1000px;margin:0 auto}
.nebula-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:1.5rem;
}
.nebula-card{
    background:var(--panel-bg);
    border:1px solid rgba(0,229,255,0.1);
    border-radius:var(--radius);
    padding:2rem 1.5rem;
    text-align:center;
    transition:transform 0.3s,border-color 0.3s,box-shadow 0.3s;
}
.nebula-card:hover{
    transform:translateY(-4px);
    border-color:rgba(0,229,255,0.3);
    box-shadow:var(--glow-cyan);
}
.nebula-icon{margin-bottom:1rem}
.nebula-card h3{font-size:1rem;margin-bottom:0.75rem;color:var(--soft-white)}
.nebula-card p{font-size:0.85rem;color:var(--silver);line-height:1.5}

/* Live Space Feed */
.space-feed{background:linear-gradient(180deg,transparent,rgba(123,47,247,0.03),transparent)}
.feed-container{max-width:1000px;margin:0 auto}
.feed-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:1.5rem;
}
.feed-column{
    background:var(--panel-bg);
    border:1px solid rgba(0,229,255,0.1);
    border-radius:var(--radius);
    padding:1.5rem;
}
.feed-heading{
    display:flex;align-items:center;gap:0.5rem;
    font-size:0.9rem;
    margin-bottom:1rem;
    color:var(--soft-white);
}
.feed-list{display:flex;flex-direction:column;gap:0.5rem}
.feed-item{
    display:flex;justify-content:space-between;align-items:center;
    padding:0.5rem 0.75rem;
    background:rgba(5,8,16,0.5);
    border-radius:var(--radius-sm);
    font-size:0.8rem;
    border-left:2px solid var(--electric-cyan);
}
.feed-item-name{color:var(--silver)}
.feed-item-value{color:var(--electric-cyan);font-weight:600}

/* FAQ Section */
.faq-section{padding:5rem 1.5rem}
.faq-container{max-width:700px;margin:0 auto}
.faq-terminal{
    background:var(--panel-bg);
    border:1px solid rgba(0,229,255,0.15);
    border-radius:var(--radius);
    overflow:hidden;
}
.terminal-header{
    display:flex;align-items:center;gap:0.5rem;
    padding:0.75rem 1rem;
    background:rgba(5,8,16,0.8);
    border-bottom:1px solid rgba(0,229,255,0.1);
}
.terminal-dot{
    width:10px;height:10px;
    border-radius:50%;
    background:rgba(0,229,255,0.4);
}
.terminal-dot:first-child{background:#ff5f57}
.terminal-dot:nth-child(2){background:#febc2e}
.terminal-dot:nth-child(3){background:#28c840}
.terminal-title{
    margin-left:0.5rem;
    font-family:var(--font-mono);
    font-size:0.75rem;
    color:var(--silver);
}
.faq-list{padding:1rem}
.faq-item{border-bottom:1px solid rgba(0,229,255,0.08)}
.faq-item:last-child{border-bottom:none}
.faq-question{
    display:flex;
    justify-content:space-between;
    align-items:center;
    width:100%;
    padding:1rem 0.5rem;
    background:none;
    color:var(--soft-white);
    font-size:0.95rem;
    text-align:left;
    transition:color 0.3s;
}
.faq-question:hover{color:var(--electric-cyan)}
.faq-question svg{
    flex-shrink:0;
    transition:transform 0.3s;
    color:var(--electric-cyan);
}
.faq-item.open .faq-question svg{transform:rotate(180deg)}
.faq-answer{
    max-height:0;
    overflow:hidden;
    transition:max-height 0.3s ease,padding 0.3s;
}
.faq-item.open .faq-answer{max-height:200px;padding:0 0.5rem 1rem}
.faq-answer p{font-size:0.85rem;color:var(--silver);line-height:1.6}

/* Astronaut Banner */
.astronaut-banner{padding:4rem 1.5rem}
.banner-container{
    max-width:800px;
    margin:0 auto;
    background:linear-gradient(135deg,rgba(123,47,247,0.15),rgba(0,229,255,0.1));
    border:1px solid rgba(0,229,255,0.2);
    border-radius:var(--radius-lg);
    padding:3rem 2rem;
    text-align:center;
    position:relative;
    overflow:hidden;
}
.banner-content{position:relative;z-index:2}
.banner-icon{margin-bottom:1.5rem}
.banner-container h2{font-size:1.8rem;margin-bottom:0.75rem}
.banner-container p{color:var(--silver);margin-bottom:1.5rem;max-width:400px;margin-left:auto;margin-right:auto}
.banner-btn{
    display:inline-block;
    background:rgba(0,229,255,0.15);
    border:1px solid var(--electric-cyan);
    color:var(--electric-cyan);
    padding:0.7rem 1.5rem;
    border-radius:var(--radius);
    font-weight:600;
    transition:background 0.3s;
}
.banner-btn:hover{background:rgba(0,229,255,0.25);color:var(--electric-cyan)}
.banner-decoration{
    position:absolute;
    inset:0;
    pointer-events:none;
    display:flex;align-items:center;justify-content:center;
}
.orbit-ring{
    position:absolute;
    border-radius:50%;
    border:1px solid rgba(0,229,255,0.1);
}
.ring-1{width:200px;height:200px;animation:spin-slow 15s linear infinite}
.ring-2{width:300px;height:300px;animation:spin-slow 25s linear infinite reverse}
.ring-3{width:400px;height:400px;animation:spin-slow 35s linear infinite}

/* Footer */
.site-footer{
    position:relative;z-index:1;
    background:rgba(5,8,16,0.95);
    border-top:1px solid rgba(0,229,255,0.1);
    padding:3rem 1.5rem 1.5rem;
}
.footer-container{max-width:1000px;margin:0 auto}
.footer-top{
    display:grid;
    grid-template-columns:1fr 2fr;
    gap:2rem;
    margin-bottom:2rem;
    padding-bottom:2rem;
    border-bottom:1px solid rgba(0,229,255,0.08);
}
.footer-logo{
    display:flex;align-items:center;gap:0.5rem;
    font-weight:700;color:var(--soft-white);
    margin-bottom:0.75rem;
}
.footer-desc{font-size:0.85rem;color:var(--silver);max-width:300px}
.footer-links{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:1.5rem;
}
.footer-col h4{font-size:0.85rem;color:var(--soft-white);margin-bottom:0.75rem}
.footer-col a{
    display:block;
    font-size:0.8rem;
    color:var(--silver);
    padding:0.25rem 0;
    transition:color 0.3s;
}
.footer-col a:hover{color:var(--electric-cyan)}
.footer-bottom{text-align:center}
.footer-badges{margin-bottom:1rem}
.footer-disclaimer{font-size:0.75rem;color:var(--silver);max-width:600px;margin:0 auto 0.75rem;line-height:1.5}
.footer-copy{font-size:0.75rem;color:rgba(184,197,214,0.5)}

/* Animations */
@keyframes spin-slow{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes spin-fast{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes radar-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-20px)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.5}}
@keyframes star-twinkle{0%,100%{opacity:0.3}50%{opacity:1}}

.star{
    position:absolute;
    width:2px;height:2px;
    background:#fff;
    border-radius:50%;
    animation:star-twinkle var(--dur) ease-in-out infinite;
    animation-delay:var(--delay);
}

/* Scrollbar */
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:var(--deep-black)}
::-webkit-scrollbar-thumb{background:rgba(0,229,255,0.3);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:rgba(0,229,255,0.5)}

/* Responsive */
@media(max-width:768px){
    .nav-links{
        position:fixed;
        top:60px;left:0;right:0;
        background:rgba(10,14,26,0.98);
        flex-direction:column;
        padding:1.5rem;
        gap:1rem;
        transform:translateY(-100%);
        opacity:0;
        transition:transform 0.3s,opacity 0.3s;
        pointer-events:none;
    }
    .nav-links.open{
        transform:translateY(0);
        opacity:1;
        pointer-events:all;
    }
    .nav-toggle{display:flex}
    .nav-badge{display:none}

    .hero-title{font-size:2.2rem}
    .hero-radar{width:120px;height:120px}

    .reel-container{height:180px}
    .reel-symbol{height:60px}
    .reel-symbol svg{width:36px;height:36px}
    .machine-panel{flex-direction:column;align-items:stretch}
    .panel-info{justify-content:center}
    .panel-controls{justify-content:center;flex-wrap:wrap}
    .btn-spin{width:100%;justify-content:center}

    .stats-grid{grid-template-columns:repeat(2,1fr)}
    .orbit-path{flex-direction:column;align-items:center;gap:1.5rem}
    .orbit-line{
        top:10%;bottom:10%;left:50%;
        width:2px;height:auto;
        right:auto;
    }
    .nebula-grid{grid-template-columns:1fr}
    .feed-grid{grid-template-columns:1fr}
    .footer-top{grid-template-columns:1fr}
    .footer-links{grid-template-columns:1fr;gap:1rem}
    .arena-header{flex-direction:column;align-items:flex-start}
}

@media(max-width:480px){
    .stats-grid{grid-template-columns:1fr}
    .combo-grid{grid-template-columns:1fr}
    section{padding:3rem 1rem}
}

/* Page styles for sub-pages */
.page-content{
    position:relative;z-index:1;
    max-width:800px;
    margin:0 auto;
    padding:8rem 1.5rem 4rem;
}
.page-content h1{
    font-size:clamp(1.8rem,4vw,2.5rem);
    margin-bottom:1.5rem;
    background:linear-gradient(90deg,var(--soft-white),var(--electric-cyan));
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
}
.page-content h2{
    font-size:1.3rem;
    color:var(--electric-cyan);
    margin:2rem 0 1rem;
}
.page-content p,.page-content li{
    color:var(--silver);
    font-size:0.9rem;
    line-height:1.7;
    margin-bottom:0.75rem;
}
.page-content ul{
    list-style:none;
    padding-left:1rem;
}
.page-content ul li::before{
    content:'>';
    color:var(--electric-cyan);
    margin-right:0.5rem;
    font-family:var(--font-mono);
}
.page-content a{color:var(--electric-cyan)}
.page-content a:hover{text-decoration:underline}

/* Contact Form */
.contact-form{
    background:var(--panel-bg);
    border:1px solid rgba(0,229,255,0.15);
    border-radius:var(--radius);
    padding:2rem;
    margin-top:2rem;
}
.form-group{margin-bottom:1.25rem}
.form-group label{
    display:block;
    font-size:0.85rem;
    color:var(--silver);
    margin-bottom:0.5rem;
}
.form-group input,.form-group textarea{
    width:100%;
    background:rgba(5,8,16,0.8);
    border:1px solid rgba(0,229,255,0.15);
    border-radius:var(--radius-sm);
    padding:0.75rem 1rem;
    color:var(--soft-white);
    font-family:var(--font-main);
    font-size:0.9rem;
    transition:border-color 0.3s;
}
.form-group input:focus,.form-group textarea:focus{
    outline:none;
    border-color:var(--electric-cyan);
}
.form-group textarea{min-height:120px;resize:vertical}
.form-submit{
    background:linear-gradient(135deg,var(--cosmic-purple),var(--electric-cyan));
    color:#fff;
    padding:0.8rem 2rem;
    border-radius:var(--radius);
    font-weight:600;
    border:none;
    cursor:pointer;
    transition:transform 0.2s;
}
.form-submit:hover{transform:translateY(-2px)}