:root{
    --radius: 0.875rem;
    --background: oklch(0.12 0.02 250);
    --foreground: oklch(0.98 0.005 250);
    --surface: oklch(0.16 0.025 250);
    --surface-elevated: oklch(0.20 0.03 250);
    --primary: oklch(0.70 0.20 235);
    --primary-foreground: oklch(0.10 0.02 250);
    --primary-glow: oklch(0.78 0.18 220);
    --muted-foreground: oklch(0.68 0.02 250);
    --border: oklch(0.30 0.04 240 / 0.4);

    --gradient-hero: linear-gradient(180deg, oklch(0.08 0.02 250 / 0.4) 0%, oklch(0.08 0.02 250 / 0.85) 70%, oklch(0.08 0.02 250) 100%);
    --shadow-card: 0 10px 40px -10px oklch(0 0 0 / 0.6), inset 0 1px 0 oklch(1 0 0 / 0.05);
  }

  *{margin:0;padding:0;box-sizing:border-box;border-color:var(--border);}
  html{direction:rtl;scroll-behavior:smooth;}
  body{
    background-color:var(--background);
    color:var(--foreground);
    font-family:'Cairo','Inter',sans-serif;
    background-image:
      radial-gradient(ellipse at top, oklch(0.70 0.20 235 / 0.08), transparent 50%),
      radial-gradient(ellipse at bottom, oklch(0.78 0.18 220 / 0.05), transparent 50%);
    background-attachment:fixed;
    overflow-x:hidden;
    min-height:100vh;
  }
  .orbitron{font-family:'Orbitron',sans-serif;}

  /* Utilities */
  .glass{
    background: linear-gradient(145deg, oklch(0.22 0.03 250 / 0.5), oklch(0.14 0.02 250 / 0.3));
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid oklch(0.50 0.10 235 / 0.15);
    box-shadow: var(--shadow-card);
  }
  .glass-strong{
    background: linear-gradient(145deg, oklch(0.22 0.03 250 / 0.7), oklch(0.14 0.02 250 / 0.5));
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid oklch(0.50 0.10 235 / 0.2);
  }
  .text-gradient{
    background: linear-gradient(135deg, oklch(0.85 0.15 230), oklch(0.70 0.22 235), oklch(0.85 0.15 230));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  .neon-text{
    text-shadow: 0 0 10px oklch(0.70 0.20 235 / 0.8), 0 0 30px oklch(0.70 0.20 235 / 0.5);
  }
  .primary-grad-bg{ background: linear-gradient(135deg, var(--primary), var(--primary-glow)); }

  @keyframes float-up {
    0% { transform: translateY(100vh) translateX(0); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { transform: translateY(-10vh) translateX(50px); opacity: 0; }
  }
  @keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 20px oklch(0.70 0.20 235 / 0.4); }
    50% { box-shadow: 0 0 40px oklch(0.70 0.20 235 / 0.8), 0 0 80px oklch(0.70 0.20 235 / 0.3); }
  }
  @keyframes fade-in{ from{opacity:0; transform:translateY(15px);} to{opacity:1; transform:translateY(0);} }
  @keyframes scale-in{ from{opacity:0; transform:scale(.85);} to{opacity:1; transform:scale(1);} }
  @keyframes ping{ 75%,100%{ transform:scale(2); opacity:0; } }
  @keyframes pulse{ 0%,100%{opacity:1;} 50%{opacity:.5;} }

  .animate-float-particle{ animation: float-up 15s linear infinite; }
  .animate-pulse-glow{ animation: pulse-glow 3s ease-in-out infinite; }
  .animate-fade-in{ animation: fade-in .8s ease both; }
  .animate-scale-in{ animation: scale-in .8s ease both; }

  /* Layout helpers */
  .container{ max-width:1280px; margin:0 auto; padding:0 1.5rem; }
  .container-md{ max-width:1152px; margin:0 auto; padding:0 1.5rem; }
  .container-narrow{ max-width:42rem; margin:0 auto; }
  a{ text-decoration:none; color:inherit; }
  ul{list-style:none;}
  img{ display:block; max-width:100%; }

  /* ===================== NAVBAR ===================== */
  header.nav-fixed{
    position:fixed; top:0; left:0; right:0; z-index:50;
    transition: all .5s;
    padding: 1.25rem 0;
  }
  header.nav-fixed.scrolled{ padding: .75rem 0; }
  .nav-inner{
    display:flex; align-items:center; justify-content:space-between;
    border-radius:1rem; padding: .75rem 1rem 0.75rem 1.5rem;
    transition: all .5s;
  }
  @media(min-width:640px){ .nav-inner{ padding: .75rem 1.5rem; } }
  .nav-logo{ display:flex; align-items:center; gap:.75rem; }
  .nav-logo img{ height:2.5rem; width:2.5rem; object-fit:contain; filter: drop-shadow(0 0 15px oklch(0.70 0.20 235 / 0.7)); transition: transform .3s; }
  .nav-logo:hover img{ transform: scale(1.1); }
  .nav-logo span{ font-weight:900; font-size:1.125rem; letter-spacing:.05em; }
  .nav-links{ display:none; align-items:center; gap:.25rem; }
  @media(min-width:1024px){ .nav-links{ display:flex; } }
  .nav-links li a{
    display:block; padding:.5rem 1rem; font-size:.875rem; font-weight:600;
    color: var(--muted-foreground); transition: color .3s; position:relative;
  }
  .nav-links li a:hover{ color: var(--primary); }
  .nav-links li a::after{
    content:''; position:absolute; bottom:0; left:50%; transform:translateX(-50%);
    width:0; height:2px; background: var(--primary); transition: width .3s;
    box-shadow: 0 0 8px oklch(0.70 0.20 235);
  }
  .nav-links li a:hover::after{ width:75%; }
  .nav-right{ display:flex; align-items:center; gap:.75rem; }
  .discord-btn{
    display:inline-flex; align-items:center; gap:.5rem;
    border-radius:.75rem; padding:.625rem 1.25rem; font-size:.875rem; font-weight:700;
    color: var(--primary-foreground); transition: all .3s;
  }
  .discord-btn:hover{ transform: scale(1.05); box-shadow: 0 0 30px oklch(0.70 0.20 235 / 0.6); }
  .discord-btn svg{ height:1rem; width:1rem; fill:currentColor; }
  .nav-discord-desktop{ display:none; }
  @media(min-width:640px){ .nav-discord-desktop{ display:inline-flex; } }
  .menu-btn{ display:flex; background:none; border:none; color:var(--foreground); padding:.5rem; cursor:pointer; }
  @media(min-width:1024px){ .menu-btn{ display:none; } }
  .mobile-menu{
    display:none; margin-top:.5rem; border-radius:1rem; padding:1rem;
    animation: fade-in .3s ease both;
  }
  .mobile-menu.open{ display:block; }
  .mobile-menu ul{ display:flex; flex-direction:column; gap:.25rem; }
  .mobile-menu li a{
    display:block; padding:.75rem 1rem; border-radius:.5rem; font-size:.875rem; font-weight:600;
    color: var(--muted-foreground); transition: all .2s;
  }
  .mobile-menu li a:hover{ color: var(--primary); background: oklch(0.70 0.20 235 / 0.1); }

  /* ===================== HERO ===================== */
  .hero{
    position:relative; min-height:100vh; display:flex; align-items:center; justify-content:center;
    overflow:hidden; padding: 6rem 0 3rem;
  }
  .hero-bg-wrap{ position:absolute; inset:0; }
  .hero-bg-img{
    position:absolute; inset:0; height:100%; width:100%; object-fit:cover; transform: scale(1.05);
  }
  .hero-overlay-1{ position:absolute; inset:0; background: var(--gradient-hero); }
  .hero-overlay-2{
    position:absolute; inset:0;
    background: linear-gradient(to bottom, oklch(0.12 0.02 250 / 0.4), oklch(0.12 0.02 250 / 0.3) 50%, var(--background));
  }
  .hero-grid{
    position:absolute; inset:0; opacity:0.07;
    background-image: linear-gradient(oklch(0.70 0.20 235) 1px, transparent 1px), linear-gradient(90deg, oklch(0.70 0.20 235) 1px, transparent 1px);
    background-size: 60px 60px;
  }
  .glow-orb{ position:absolute; border-radius:50%; filter: blur(120px); }
  .glow-orb.one{ top:33%; left:-10rem; height:24rem; width:24rem; background: oklch(0.70 0.20 235 / 0.2); }
  .glow-orb.two{ bottom:25%; right:-10rem; height:24rem; width:24rem; background: oklch(0.78 0.18 220 / 0.2); }

  .hero-content{ position:relative; z-index:10; margin:0 auto; max-width:72rem; padding:0 1.5rem; text-align:center; }
  .status-badge{
    display:inline-flex; align-items:center; gap:.5rem; border-radius:9999px; padding:.375rem 1rem; margin-bottom:1.5rem;
    font-size:.75rem; font-weight:700; letter-spacing:.2em; color: oklch(0.98 0.005 250 / 0.9);
  }
  .ping-wrap{ position:relative; display:inline-flex; height:.5rem; width:.5rem; }
  .ping-wrap .ping{
    position:absolute; display:inline-flex; height:100%; width:100%; border-radius:50%;
    background:#4ade80; opacity:.75; animation: ping 1.5s cubic-bezier(0,0,0.2,1) infinite;
  }
  .ping-wrap .dot{ position:relative; display:inline-flex; height:.5rem; width:.5rem; border-radius:50%; background:#4ade80; }

  .hero-logo-wrap{ display:flex; justify-content:center; margin-bottom:1rem; }
  .hero-logo{ height:7rem; object-fit:contain; filter: drop-shadow(0 0 40px oklch(0.70 0.20 235 / 0.8)); }
  @media(min-width:640px){ .hero-logo{ height:9rem; } }

  .hero h1{
    font-size:3.75rem; font-weight:900; letter-spacing:.02em; line-height:1.1; margin-bottom:1rem;
  }
  @media(min-width:640px){ .hero h1{ font-size:6rem; } }
  @media(min-width:768px){ .hero h1{ font-size:8rem; } }
  .hero h1 .muted{ color: oklch(0.98 0.005 250 / 0.9); }

  .hero-tag{
    font-size:1.5rem; font-weight:700; color: oklch(0.98 0.005 250 / 0.95); margin-bottom:.75rem;
  }
  @media(min-width:640px){ .hero-tag{ font-size:1.875rem; } }
  @media(min-width:768px){ .hero-tag{ font-size:2.25rem; } }
  .hero-tag .primary{ color: var(--primary); }

  .hero-desc{
    max-width:42rem; margin:0 auto 2.5rem; color: var(--muted-foreground);
    font-size:1rem; line-height:1.75;
  }
  @media(min-width:640px){ .hero-desc{ font-size:1.125rem; } }

  .hero-actions{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:1rem; }
  .btn-primary, .btn-ghost{
    display:inline-flex; align-items:center; gap:.75rem; border-radius:1rem; padding:1rem 2rem;
    font-size:1rem; font-weight:900; transition: all .3s;
  }
  .btn-primary{ color: var(--primary-foreground); }
  .btn-primary:hover{ transform: scale(1.05); }
  .btn-ghost{ color: var(--foreground); }
  .btn-ghost:hover{ transform: scale(1.05); border-color: oklch(0.70 0.20 235 / 0.5); }
  .btn-ghost .dot{
    height:.5rem; width:.5rem; border-radius:50%; background: var(--primary);
    box-shadow: 0 0 12px oklch(0.70 0.20 235); animation: pulse 2s infinite;
  }
  .btn-primary svg{ height:1.25rem; width:1.25rem; fill:currentColor; }

  .scroll-indicator{
    position:absolute; bottom:2rem; left:50%; transform:translateX(-50%);
    display:none; flex-direction:column; align-items:center; gap:.5rem; color: var(--muted-foreground);
  }
  @media(min-width:768px){ .scroll-indicator{ display:flex; } }
  .scroll-indicator span{ font-size:10px; letter-spacing:.3em; font-weight:700; }
  .scroll-line{ height:2.5rem; width:2px; background: linear-gradient(to bottom, var(--primary), transparent); }

  /* ===================== STATS ===================== */
  .stats-section{ padding: 4rem 0; }
  .stats-card{
    border-radius:1.5rem; padding:1.5rem; display:grid; grid-template-columns: repeat(2,1fr); gap:1.5rem;
    position:relative; overflow:hidden;
  }
  @media(min-width:640px){ .stats-card{ padding:2rem; } }
  @media(min-width:768px){ .stats-card{ grid-template-columns: repeat(5,1fr); } }
  .stats-card::before{
    content:''; position:absolute; top:0; left:0; right:0; height:1px;
    background: linear-gradient(to right, transparent, var(--primary), transparent);
  }
  .stat-item{ text-align:center; }
  .stat-icon{
    display:inline-flex; align-items:center; justify-content:center; height:3.5rem; width:3.5rem;
    border-radius:1rem; background: oklch(0.70 0.20 235 / 0.1); margin-bottom:.75rem; transition: all .3s;
  }
  .stat-item:hover .stat-icon{ background: oklch(0.70 0.20 235 / 0.2); transform: scale(1.1); }
  .stat-icon i{ font-size:1.5rem; color: var(--primary); filter: drop-shadow(0 0 8px oklch(0.70 0.20 235 / 0.6)); }
  .stat-value{ font-size:2.25rem; font-weight:900; margin-bottom:.25rem; }
  @media(min-width:640px){ .stat-value{ font-size:2.5rem; } }
  .stat-label{ font-size:.75rem; color: var(--muted-foreground); font-weight:600; }
  @media(min-width:640px){ .stat-label{ font-size:.875rem; } }

  /* ===================== SECTION HEADER ===================== */
  .section-header{ text-align:center; margin-bottom:3.5rem; }
  .kicker{
    display:inline-flex; align-items:center; gap:.5rem; border-radius:9999px; padding:.375rem 1rem; margin-bottom:1rem;
  }
  .kicker .dot{ height:.375rem; width:.375rem; border-radius:50%; background: var(--primary); box-shadow:0 0 8px oklch(0.70 0.20 235); }
  .kicker span.label{ font-size:.75rem; font-weight:700; letter-spacing:.25em; color: var(--primary); }
  .section-header h2{
    font-size:2.25rem; font-weight:900; margin-bottom:1rem;
  }
  @media(min-width:640px){ .section-header h2{ font-size:3rem; } }
  @media(min-width:768px){ .section-header h2{ font-size:3.75rem; } }
  .section-header p{ max-width:42rem; margin:0 auto; color: var(--muted-foreground); font-size:1rem; }
  @media(min-width:640px){ .section-header p{ font-size:1.125rem; } }

  /* ===================== FEATURES ===================== */
  .features-section{ position:relative; padding: 6rem 0; }
  .features-grid{ display:grid; grid-template-columns:1fr; gap:1.25rem; }
  @media(min-width:640px){ .features-grid{ grid-template-columns: repeat(2,1fr); } }
  @media(min-width:1024px){ .features-grid{ grid-template-columns: repeat(3,1fr); } }
  .feature-card{
    border-radius:1.25rem; padding:1.75rem; transition: all .4s; position:relative; overflow:hidden;
  }
  .feature-card:hover{ transform: translateY(-6px); border-color: oklch(0.70 0.20 235 / 0.4); }
  .feature-icon{
    display:inline-flex; align-items:center; justify-content:center; height:3.25rem; width:3.25rem;
    border-radius:1rem; background: oklch(0.70 0.20 235 / 0.12); margin-bottom:1.25rem;
    border:1px solid oklch(0.70 0.20 235 / 0.3); transition: transform .4s;
  }
  .feature-card:hover .feature-icon{ transform: scale(1.1) rotate(6deg); }
  .feature-icon i{ font-size:1.5rem; color: var(--primary); filter: drop-shadow(0 0 8px oklch(0.70 0.20 235 / 0.7)); }
  .feature-card h3{ font-size:1.125rem; font-weight:900; margin-bottom:.5rem; }
  .feature-card p{ font-size:.875rem; color: var(--muted-foreground); line-height:1.7; }

  /* ===================== GALLERY ===================== */
  .gallery-section{ position:relative; padding:6rem 0; }
  .gallery-grid{
    display:grid; grid-template-columns: repeat(2,1fr); grid-auto-rows:200px; gap:1rem;
  }
  @media(min-width:768px){ .gallery-grid{ grid-template-columns: repeat(4,1fr); } }
  .gallery-item{
    position:relative; border-radius:1rem; overflow:hidden; cursor:pointer;
  }
  .span-2x2{ }
  @media(min-width:768px){ .span-2x2{ grid-column: span 2; grid-row: span 2; } }
  .span-2{ }
  @media(min-width:768px){ .span-2{ grid-column: span 2; } }
  .gallery-item img{
    position:absolute; inset:0; height:100%; width:100%; object-fit:cover; transition: transform .7s;
  }
  .gallery-item:hover img{ transform: scale(1.1); }
  .gallery-overlay{
    position:absolute; inset:0; background: linear-gradient(to top, var(--background), oklch(0.12 0.02 250 / 0.3) 50%, transparent);
    opacity:.9; transition: opacity .3s;
  }
  .gallery-item:hover .gallery-overlay{ opacity:.7; }
  .gallery-ring{
    position:absolute; inset:0; border-radius:1rem; box-shadow: inset 0 0 0 1px transparent; transition: box-shadow .3s;
  }
  .gallery-item:hover .gallery-ring{ box-shadow: inset 0 0 0 1px oklch(0.70 0.20 235 / 0.6); }
  .gallery-text{
    position:absolute; bottom:0; left:0; right:0; padding:1.25rem; transform: translateY(0.5rem); transition: transform .3s;
  }
  .gallery-item:hover .gallery-text{ transform: translateY(0); }
  .gallery-text-top{ display:flex; align-items:center; gap:.5rem; margin-bottom:.25rem; }
  .gallery-text-top .bar{ height:.25rem; width:1.5rem; background: var(--primary); box-shadow: 0 0 8px oklch(0.70 0.20 235); }
  .gallery-text-top .tag{ font-size:10px; font-weight:700; letter-spacing:.2em; color: var(--primary); }
  .gallery-text h3{ font-size:1.125rem; font-weight:900; }

  /* ===================== HOW TO JOIN ===================== */
  .join-section{ position:relative; padding:6rem 0; }
  .join-grid{
    position:relative; display:grid; grid-template-columns:1fr; gap:1.25rem;
  }
  @media(min-width:640px){ .join-grid{ grid-template-columns: repeat(2,1fr); } }
  @media(min-width:1024px){ .join-grid{ grid-template-columns: repeat(5,1fr); } }
  .join-step{ position:relative; }
  .join-card{
    border-radius:1.25rem; padding:1.5rem; height:100%; transition: all .5s; position:relative; overflow:hidden;
  }
  .join-step:hover .join-card{ transform: translateY(-8px); border-color: oklch(0.70 0.20 235 / 0.4); }
  .join-num{
    position:absolute; top:-0.5rem; right:-0.5rem; font-size:4.5rem; font-weight:900; opacity:.2; transition: opacity .3s;
    color: var(--primary);
  }
  .join-step:hover .join-num{ opacity:.4; }
  .join-icon{
    display:inline-flex; align-items:center; justify-content:center; height:3rem; width:3rem;
    border-radius:.75rem; background: oklch(0.70 0.20 235 / 0.15); margin-bottom:1rem;
    border:1px solid oklch(0.70 0.20 235 / 0.3); transition: transform .3s; position:relative; z-index:1;
  }
  .join-step:hover .join-icon{ transform: scale(1.1); }
  .join-icon i{ font-size:1.5rem; color: var(--primary); filter: drop-shadow(0 0 8px oklch(0.70 0.20 235 / 0.7)); }
  .join-card h3{ font-size:1rem; font-weight:900; margin-bottom:.5rem; position:relative; z-index:1; }
  .join-card p{ font-size:.75rem; color: var(--muted-foreground); line-height:1.7; position:relative; z-index:1; }
  .join-arrow{
    display:none; position:absolute; top:50%; left:-0.75rem; transform: translateY(-50%);
    color: oklch(0.70 0.20 235 / 0.4); font-size:1.5rem; font-weight:900; z-index:10;
  }
  @media(min-width:1024px){ .join-arrow{ display:block; } }

  /* ===================== STAFF ===================== */
  .staff-section{ position:relative; padding:6rem 0; }
  .staff-grid{ display:grid; grid-template-columns:1fr; gap:1.25rem; }
  @media(min-width:640px){ .staff-grid{ grid-template-columns: repeat(2,1fr); } }
  @media(min-width:1024px){ .staff-grid{ grid-template-columns: repeat(4,1fr); } }
  .staff-card{
    position:relative; border-radius:1.25rem; padding:1.5rem; text-align:center; transition: all .5s; overflow:hidden;
  }
  .staff-card:hover{ transform: translateY(-8px); border-color: oklch(0.70 0.20 235 / 0.4); }
  .staff-bg{
    position:absolute; inset:0; opacity:0; transition: opacity .5s;
  }
  .staff-card:hover .staff-bg{ opacity:1; }
  .staff-bg.founder{ background: linear-gradient(to bottom right, oklch(0.85 0.18 85 / 0.3), oklch(0.75 0.18 50 / 0.1)); }
  .staff-bg.management{ background: linear-gradient(to bottom right, oklch(0.70 0.20 235 / 0.3), oklch(0.78 0.18 220 / 0.1)); }
  .staff-bg.developer{ background: linear-gradient(to bottom right, oklch(0.72 0.18 150 / 0.3), oklch(0.75 0.13 175 / 0.1)); }
  .staff-bg.support{ background: linear-gradient(to bottom right, oklch(0.70 0.20 340 / 0.3), oklch(0.62 0.22 300 / 0.1)); }
  .staff-content{ position:relative; z-index:1; }
  .staff-avatar{
    margin:0 auto; height:6rem; width:6rem; border-radius:50%;
    background: linear-gradient(to bottom right, oklch(0.70 0.20 235 / 0.3), oklch(0.78 0.18 220 / 0.1));
    display:flex; align-items:center; justify-content:center; margin-bottom:1rem;
    border:2px solid oklch(0.70 0.20 235 / 0.3); transition: all .3s;
    box-shadow: 0 0 30px oklch(0.70 0.20 235 / 0.3);
  }
  .staff-card:hover .staff-avatar{ border-color: oklch(0.70 0.20 235 / 0.7); transform: scale(1.1); }
  .staff-avatar i{ font-size:2.5rem; color: var(--primary); filter: drop-shadow(0 0 8px oklch(0.70 0.20 235 / 0.8)); }
  .staff-tag{ font-size:10px; font-weight:900; letter-spacing:.3em; color: var(--primary); margin-bottom:.25rem; }
  .staff-card h3{ font-size:1.25rem; font-weight:900; margin-bottom:.25rem; min-height:1.5rem; }
  .staff-card .role{ font-size:.875rem; color: var(--muted-foreground); }
  .staff-socials{ display:flex; justify-content:center; gap:.5rem; margin-top:1rem; }
  .staff-socials button{
    height:2rem; width:2rem; border-radius:.5rem; display:flex; align-items:center; justify-content:center;
    font-size:.75rem; font-weight:700; color: var(--muted-foreground); cursor:pointer; border:none;
    transition: all .3s;
  }
  .staff-socials button:hover{ color: var(--primary); border-color: oklch(0.70 0.20 235 / 0.5); }

  /* ===================== FOOTER ===================== */
  .footer{ position:relative; padding: 4rem 0 2rem; margin-top:3rem; border-top: 1px solid oklch(0.70 0.20 235 / 0.1); }
  .footer::before{
    content:''; position:absolute; top:0; left:0; right:0; height:1px;
    background: linear-gradient(to right, transparent, var(--primary), transparent);
  }
  .footer-glow{
    position:absolute; inset:0; z-index:-1;
    background: radial-gradient(ellipse at bottom, oklch(0.70 0.20 235 / 0.08), transparent 70%);
  }
  .footer-grid{ display:grid; grid-template-columns:1fr; gap:2.5rem; margin-bottom:2.5rem; }
  @media(min-width:768px){ .footer-grid{ grid-template-columns: repeat(4,1fr); } }
  .footer-brand{ }
  @media(min-width:768px){ .footer-brand{ grid-column: span 2; } }
  .footer-logo{ display:flex; align-items:center; gap:.75rem; margin-bottom:1rem; }
  .footer-logo img{ height:3rem; width:3rem; object-fit:contain; filter: drop-shadow(0 0 15px oklch(0.70 0.20 235 / 0.7)); }
  .footer-logo span{ font-size:1.5rem; font-weight:900; }
  .footer-brand p{ color: var(--muted-foreground); font-size:.875rem; line-height:1.7; max-width:28rem; margin-bottom:1.25rem; }
  .footer h4{ font-weight:900; margin-bottom:1rem; }
  .footer-links li{ margin-bottom:.5rem; font-size:.875rem; }
  .footer-links li a{ color: var(--muted-foreground); transition: color .3s; }
  .footer-links li a:hover{ color: var(--primary); }
  .server-info li{ display:flex; justify-content:space-between; font-size:.875rem; color: var(--muted-foreground); margin-bottom:.5rem; }
  .server-info li span:last-child{ font-weight:700; color: var(--foreground); }
  .server-info .online{ color:#4ade80; font-weight:700; }
  .footer-bottom{ padding-top:1.5rem; border-top:1px solid oklch(0.30 0.04 240 / 0.4); text-align:center; font-size:.75rem; color: var(--muted-foreground); }

  /* ===================== SHOP ===================== */
  .shop-section{ position:relative; padding:6rem 0; }
  .shop-filters{
    display:flex; flex-wrap:wrap; justify-content:center; gap:.75rem; margin-bottom:2.5rem;
  }
  .shop-filter-btn{
    border:1px solid oklch(0.50 0.10 235 / 0.2); background: oklch(0.22 0.03 250 / 0.4);
    color: var(--muted-foreground); padding:.5rem 1.25rem; border-radius:9999px;
    font-size:.8125rem; font-weight:700; cursor:pointer; transition: all .3s;
  }
  .shop-filter-btn:hover{ color: var(--foreground); border-color: oklch(0.70 0.20 235 / 0.4); }
  .shop-filter-btn.active{
    background: linear-gradient(135deg, var(--primary), var(--primary-glow));
    color: var(--primary-foreground); border-color: transparent;
    box-shadow: 0 0 25px oklch(0.70 0.20 235 / 0.5);
  }
  .shop-grid{ display:grid; grid-template-columns:1fr; gap:1.5rem; }
  @media(min-width:640px){ .shop-grid{ grid-template-columns: repeat(2,1fr); } }
  @media(min-width:1024px){ .shop-grid{ grid-template-columns: repeat(3,1fr); } }
  .car-card{
    border-radius:1.25rem; overflow:hidden; transition: all .4s; position:relative;
  }
  .car-card:hover{ transform: translateY(-6px); border-color: oklch(0.70 0.20 235 / 0.4); }
  .car-img-wrap{ position:relative; height:180px; overflow:hidden; }
  .car-img-wrap img{
    position:absolute; inset:0; height:100%; width:100%; object-fit:cover; transition: transform .7s;
  }
  .car-card:hover .car-img-wrap img{ transform: scale(1.08); }
  .car-img-overlay{
    position:absolute; inset:0; background: linear-gradient(to top, oklch(0.12 0.02 250 / 0.9), transparent 60%);
  }
  .car-badge{
    position:absolute; top:.75rem; right:.75rem; font-size:10px; font-weight:900; letter-spacing:.15em;
    padding:.3rem .7rem; border-radius:9999px; color: var(--primary-foreground);
    background: linear-gradient(135deg, var(--primary), var(--primary-glow));
    box-shadow: 0 0 15px oklch(0.70 0.20 235 / 0.6);
  }
  .car-body{ padding:1.25rem 1.5rem 1.5rem; }
  .car-cat{ font-size:10px; font-weight:700; letter-spacing:.25em; color: var(--primary); margin-bottom:.35rem; }
  .car-name{ font-size:1.25rem; font-weight:900; margin-bottom:.25rem; }
  .car-desc{ font-size:.8125rem; color: var(--muted-foreground); line-height:1.6; margin-bottom:1.1rem; min-height:2.6rem; }
  .car-footer{ display:flex; align-items:center; justify-content:space-between; gap:.75rem; }
  .car-price{ display:flex; flex-direction:column; }
  .car-price .label{ font-size:10px; color: var(--muted-foreground); font-weight:700; letter-spacing:.1em; }
  .car-price .value{ font-size:1.375rem; font-weight:900; }
  .car-price .value .currency{ font-size:.75rem; color: var(--muted-foreground); font-weight:700; margin-right:.25rem; }
  .car-buy-btn{
    display:inline-flex; align-items:center; gap:.5rem; border-radius:.75rem; padding:.65rem 1.1rem;
    font-size:.8125rem; font-weight:900; color: var(--primary-foreground);
    background: linear-gradient(135deg, var(--primary), var(--primary-glow));
    transition: all .3s; white-space:nowrap;
  }
  .car-buy-btn:hover{ transform: scale(1.05); box-shadow: 0 0 25px oklch(0.70 0.20 235 / 0.6); }
  .car-buy-btn i{ font-size:.8125rem; }
  .shop-note{
    text-align:center; margin-top:2.5rem; color: var(--muted-foreground); font-size:.875rem;
  }
  .shop-note i{ color: var(--primary); margin-left:.4rem; }