/* Design Tokens */
:root {
    --bg: #0b0b0f;
    --text: #ffffff;
    --muted: rgba(255,255,255,.72);
    --glass: rgba(255,255,255,.06);
    --glass-border: 1px solid rgba(255,255,255,.12);
    --radius: 20px;
    --accent-1: #7c3aed;
    --accent-2: #0ea5e9;
    --gradient: linear-gradient(135deg, var(--accent-1) 0%, var(--accent-2) 100%);
}

/* Base Styles */
* {
    box-sizing: border-box;
}

body {
    background: var(--bg);
    color: var(--text);
    font-family: 'Inter', system-ui, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
}

/* Typography */
.font-display {
    font-family: 'Space Grotesk', system-ui, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    line-height: 1.2;
    margin: 0;
}

/* Glass Effects */
.glass-card {
    background: var(--glass);
    border: var(--glass-border);
    backdrop-filter: blur(20px);
    border-radius: var(--radius);
}

.glass-nav {
    background: rgba(11, 11, 15, 0.8);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255,255,255,.1);
}

.glass-button {
    background: var(--glass);
    border: var(--glass-border);
    backdrop-filter: blur(20px);
    border-radius: var(--radius);
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
    color: var(--text);
}

.glass-button:hover {
    background: rgba(255,255,255,.1);
    box-shadow: 0 0 20px rgba(255,255,255,0.1);
    transform: translateY(-2px);
}

/* Gradients */
.gradient-text {
    background: var(--gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.gradient-button {
    background: var(--gradient);
    box-shadow: 0 0 30px rgba(124, 58, 237, 0.3);
    transition: all 0.3s ease;
    border-radius: var(--radius);
    text-decoration: none;
    display: inline-block;
    color: white;
    border: none;
    cursor: pointer;
}

.gradient-button:hover {
    box-shadow: 0 0 40px rgba(124, 58, 237, 0.5);
    transform: translateY(-2px);
}

/* Hero Orb */
.hero-orb {
    width: 400px;
    height: 400px;
    background: conic-gradient(from 0deg, var(--accent-1), var(--accent-2), var(--accent-1));
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.6;
    animation: float 6s ease-in-out infinite;
}

.hero-orb-fallback {
    width: 300px;
    height: 300px;
    background: var(--gradient);
    border-radius: 50%;
    filter: blur(40px);
    opacity: 0.4;
    animation: pulse 4s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { 
        transform: translateY(0px) rotate(0deg); 
    }
    50% { 
        transform: translateY(-20px) rotate(180deg); 
    }
}

@keyframes pulse {
    0%, 100% { 
        opacity: 0.4; 
        transform: scale(1); 
    }
    50% { 
        opacity: 0.6; 
        transform: scale(1.05); 
    }
}

/* Card Hover Effects */
.card-hover {
    transition: all 0.3s ease;
}

.card-hover:hover {
    transform: translateY(-8px) rotate(1deg);
    box-shadow: 0 20px 60px rgba(124, 58, 237, 0.2);
}

/* Mega Menu */
.mega-menu {
    background: rgba(11, 11, 15, 0.95);
    backdrop-filter: blur(30px);
    border: var(--glass-border);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 100;
}

.nav-item:hover .mega-menu {
    opacity: 1;
    visibility: visible;
}

/* Glow Border */
.glow-border {
    position: relative;
    border: 1px solid transparent;
    background: linear-gradient(var(--bg), var(--bg)) padding-box,
                var(--gradient) border-box;
}

/* Particles */
.particle-bg {
    position: absolute;
    width: 2px;
    height: 2px;
    background: rgba(255,255,255,0.3);
    border-radius: 50%;
    animation: sparkle 3s linear infinite;
}

@keyframes sparkle {
    0% { 
        opacity: 0; 
        transform: translateY(100vh) scale(0); 
    }
    10% { 
        opacity: 1; 
    }
    90% { 
        opacity: 1; 
    }
    100% { 
        opacity: 0; 
        transform: translateY(-100px) scale(1); 
    }
}

/* Skip to Content */
.skip-link {
    position: absolute;
    top: -40px;
    left: 6px;
    background: var(--accent-1);
    color: white;
    padding: 8px;
    text-decoration: none;
    border-radius: 4px;
    z-index: 1000;
}

.skip-link:focus {
    top: 6px;
}

/* Text Colors */
.text-muted {
    color: var(--muted);
}

.text-accent-1 {
    color: var(--accent-1);
}

.text-accent-2 {
    color: var(--accent-2);
}

/* Borders */
.border-glass {
    border-color: rgba(255,255,255,.12);
}

/* Utilities */
.bg-glass {
    background: var(--glass);
}

.backdrop-blur-20 {
    backdrop-filter: blur(20px);
}

/* Mobile Styles */
@media (max-width: 768px) {
    .hero-orb,
    .hero-orb-fallback {
        width: 200px;
        height: 200px;
    }
    
    .card-hover:hover {
        transform: translateY(-4px);
    }
    
    #mobile-menu {
        background: rgba(11, 11, 15, 0.95);
        backdrop-filter: blur(30px);
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .card-hover:hover {
        transform: none;
    }
    
    .gradient-button:hover,
    .glass-button:hover {
        transform: none;
    }
}

/* Focus Styles for Accessibility */
button:focus,
a:focus {
    outline: 2px solid var(--accent-1);
    outline-offset: 2px;
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    :root {
        --glass: rgba(255,255,255,.2);
        --glass-border: 2px solid rgba(255,255,255,.4);
        --muted: rgba(255,255,255,.9);
    }
}

/* Dark Mode (default) */
html {
    color-scheme: dark;
}

/* Light Mode Override */
html.light {
    color-scheme: light;
}

html.light {
    --bg: #ffffff;
    --text: #0b0b0f;
    --muted: rgba(11,11,15,.72);
    --glass: rgba(11,11,15,.06);
    --glass-border: 1px solid rgba(11,11,15,.12);
}

html.light .glass-nav {
    background: rgba(255, 255, 255, 0.8);
    border-bottom: 1px solid rgba(11,11,15,.1);
}

html.light .mega-menu {
    background: rgba(255, 255, 255, 0.95);
}

/* Animation Classes for GSAP */
.fade-in {
    opacity: 0;
}

.slide-up {
    transform: translateY(20px);
    opacity: 0;
}

/* Loading States */
.loading {
    opacity: 0.5;
    pointer-events: none;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg);
}

::-webkit-scrollbar-thumb {
    background: var(--glass);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,.2);
}

/* Print Styles */
@media print {
    .glass-nav,
    #particles,
    footer {
        display: none;
    }
    
    body {
        background: white;
        color: black;
    }
    
    .gradient-text {
        -webkit-text-fill-color: black;
        background: none;
    }
}


.feed-card{display:grid;grid-template-columns:140px 1fr;gap:12px;align-items:center;border:1px solid var(--glass-b);padding:12px;border-radius:12px;margin-bottom:12px;background:var(--glass)}
.feed-card img{width:140px;height:90px;object-fit:cover;border-radius:10px;border:1px solid var(--glass-b)}
.feed-card .title{font-weight:600;margin:4px 0}
@media (max-width:700px){.feed-card{grid-template-columns:1fr}.feed-card img{width:100%;height:160px}}


/* --- CONCATENATED CSS FROM UPLOAD --- */

:root{
  --neon:#7cf6ff;        /* light cyan glow */
  --neon2:#a78bfa;       /* soft violet */
}

/* hide legacy headers/footers if they slip through */
header:not(#r2-header){display:none!important;}
footer:not(#r2-footer){display:none!important;}

/* neon hovers */
a:hover{ color: var(--neon); }

/* submenu chips */
.submenu{display:block;padding:.5rem .75rem;border-radius:.75rem;
  border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);}
.submenu:hover{border-color:rgba(124,246,255,.45);box-shadow:0 0 16px rgba(124,246,255,.25);}

/* glass card polish */
.glass,.glass-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(10px);border-radius:20px;transition:transform .25s,box-shadow .25s,border-color .25s;}
.glass:hover,.glass-card:hover{transform:translateY(-3px);
  box-shadow:0 12px 36px rgba(0,0,0,.35),0 0 22px rgba(124,246,255,.18);
  border-color:rgba(124,246,255,.45);}

/* gradient underline on nav hover */
#r2-header nav > div > a, #r2-header nav > a{position:relative;}
#r2-header nav > div > a::after, #r2-header nav > a::after{
  content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;transform:scaleX(0);transform-origin:left;
  background:linear-gradient(90deg,var(--neon2),var(--neon));transition:transform .25s;}
#r2-header nav > div > a:hover::after, #r2-header nav > a:hover::after{transform:scaleX(1);}


/* === ENHANCEMENT OVERRIDES === */

/* =====================================================
   Glow & Glass Enhancement Overrides (non-breaking)
   ===================================================== */
:root{
  --glass-border: rgba(255,255,255,.14);
  --glass-b: var(--glass-border);
  --glass: rgba(255,255,255,.08);
  --neon: #7cf6ff;
  --neon2: #00b8ff;
  --accent: #7c3aed;
  --ring: 0 0 0 1px rgba(124,246,255,.45) inset,
          0 4px 22px rgba(124,246,255,.28),
          0 0 64px rgba(0,184,255,.25);
}
.btn{
  transition: transform .2s ease, box-shadow .25s ease, border-color .2s ease, background .2s ease;
  will-change: transform, box-shadow;
}
.btn.primary{
  background: linear-gradient(90deg, var(--accent), var(--neon2));
  color: #0b1020;
}
.btn:hover{
  transform: translateY(-2px);
  border-color: rgba(124,246,255,.55);
  box-shadow: var(--ring);
}
.card{
  background: var(--glass);
  border: 1px solid var(--glass-b);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform .2s ease, box-shadow .25s ease, border-color .2s ease;
}
.card:hover{
  transform: translateY(-3px);
  border-color: rgba(124,246,255,.55);
  box-shadow: var(--ring);
}
.nav a.top{ position:relative; }
.nav a.top:hover{ color: var(--neon); text-shadow: 0 0 10px rgba(124,246,255,.35); }
.nav a.top:hover::after{
  content:""; position:absolute; left:8px; right:8px; bottom:0; height:2px;
  background: linear-gradient(90deg, var(--neon2), var(--neon));
  box-shadow: 0 0 12px rgba(0,184,255,.45);
}
.dd a{
  background: var(--glass);
  border: 1px solid var(--glass-b);
  transition: box-shadow .25s ease, border-color .2s ease, transform .2s ease;
}
.dd a:hover{
  border-color: rgba(124,246,255,.55);
  box-shadow: 0 0 18px rgba(124,246,255,.30), 0 0 36px rgba(0,184,255,.25);
  transform: translateY(-1px);
}
.feed-card{
  transition: transform .2s ease, box-shadow .25s ease, border-color .2s ease;
}
.feed-card:hover{
  border-color: rgba(124,246,255,.55);
  box-shadow: 0 6px 24px rgba(124,246,255,.22), 0 0 48px rgba(0,184,255,.25);
  transform: translateY(-2px);
}
.feed-card img{ box-shadow: 0 2px 16px rgba(0,0,0,.25); }
.kicker, .chip, .tag{
  border: 1px solid var(--glass-b);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.05));
  box-shadow: inset 0 0 24px rgba(255,255,255,.05), 0 0 24px rgba(124,246,255,.15);
}
.brand .logo{ box-shadow: 0 0 18px rgba(124,246,255,.35), 0 0 36px rgba(0,184,255,.25); }

/* ======================  SITEWIDE GLOW BOOSTER  ====================== */
/* Tokens (stronger but tasteful) */
:root{
  --glass: rgba(255,255,255,.08);
  --glass-border: rgba(255,255,255,.14);
  --glass-b: var(--glass-border);        /* alias some pages use */
  --neon: #7cf6ff;                       /* light cyan */
  --neon2: #00b8ff;                      /* blue-cyan */
  --accent: #7c3aed;                     /* your purple accent */
  --ring-sm: 0 0 0 1px rgba(124,246,255,.45) inset,
             0 2px 14px rgba(124,246,255,.22),
             0 0 36px rgba(0,184,255,.22);
  --ring:    0 0 0 1px rgba(124,246,255,.55) inset,
             0 4px 22px rgba(124,246,255,.28),
             0 0 64px rgba(0,184,255,.28);
}

/* NAV LINKS (top bar & menus) */
header nav a, .nav a, .menu a {
  position: relative;
  transition: color .2s ease, text-shadow .25s ease;
}
header nav a:hover, .nav a:hover, .menu a:hover {
  color: var(--neon);
  text-shadow: 0 0 10px rgba(124,246,255,.35);
}
header nav a:hover::after, .nav a:hover::after, .menu a:hover::after{
  content:""; position:absolute; left:6px; right:6px; bottom:-6px; height:2px;
  background: linear-gradient(90deg,var(--neon2),var(--neon));
  box-shadow: 0 0 10px rgba(0,184,255,.45);
  border-radius:2px;
}

/* BUTTONS / CTAs  (keeps your classes; adds glow on hover) */
.button, .btn, .cta, button, [class*="btn-"]{
  border: 1px solid var(--glass-b);
  transition: transform .2s, box-shadow .25s, border-color .2s, background .2s;
  will-change: transform, box-shadow;
}
.button.primary, .btn.primary, .cta.primary{
  background: linear-gradient(90deg, var(--accent), var(--neon2));
  color: #0b1020;
}
.button:hover, .btn:hover, .cta:hover, button:hover, [class*="btn-"]:hover{
  transform: translateY(-2px);
  border-color: rgba(124,246,255,.55);
  box-shadow: var(--ring);
}

/* CARDS / PANELS / TILES / GLASS BLOCKS */
:where(.card,.panel,.tile,.feature,.glass,.glass-card,[class*="card"],[class*="panel"]){
  background: var(--glass);
  border: 1px solid var(--glass-b);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform .2s ease, box-shadow .25s ease, border-color .2s ease;
}
:where(.card,.panel,.tile,.feature,.glass,.glass-card,[class*="card"],[class*="panel"]):hover{
  transform: translateY(-3px);
  border-color: rgba(124,246,255,.55);
  box-shadow: var(--ring);
}
:where(.card,.panel,.tile) img{
  box-shadow: 0 2px 16px rgba(0,0,0,.25);
  border-radius: inherit;
}

/* DROPDOWNS / MENU ITEMS */
.dd a, .dropdown a{
  background: var(--glass);
  border: 1px solid var(--glass-b);
  transition: box-shadow .25s ease, border-color .2s ease, transform .2s ease;
}
.dd a:hover, .dropdown a:hover{
  border-color: rgba(124,246,255,.55);
  box-shadow: 0 0 18px rgba(124,246,255,.30), 0 0 36px rgba(0,184,255,.25);
  transform: translateY(-1px);
}

/* CHIPS / TAGS / BADGES */
:where(.chip,.tag,.badge,[class*="pill"]){
  border: 1px solid var(--glass-b);
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
  box-shadow: inset 0 0 16px rgba(255,255,255,.05), 0 0 20px rgba(124,246,255,.12);
}

/* BRAND MARK (subtle glow) */
.brand .logo{ box-shadow: 0 0 18px rgba(124,246,255,.35), 0 0 36px rgba(0,184,255,.25); }