nav a.active {
      color: #6b28b6 !important;       /* same purple you use */
      font-weight: 600;
    }
    /* --- BASE --- */
    body { 
      margin:0; background:#000; 
      color:#fff;
      font-family: "Cascadia Mono", sans-serif;
      font-optical-sizing: auto;
    }
    body.no-scroll { overflow: hidden; }

    html { scroll-behavior: smooth; }
    
    /* --- HEADER / NAV --- */
    header {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      background: rgba(0,0,0,0.6);
      backdrop-filter: blur(6px);
      padding: 12px 0px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      z-index: 100;
    }
    
    .headertitle {
      color: #fff !important;
      text-decoration: none;
    }
    .headersubtitle {
      color: #c38cff !important;
      text-decoration: none;
    }

    nav { display:flex; align-items:center; gap:20px; padding-right:10px; }
    nav a {
      color: #ccc !important;
      text-decoration: none;
      font-size: 15px;
      padding: 6px 12px;
      border-radius: 6px;
      transition: all 0.3s ease;
    }
    nav a:hover {
      color: #fff !important;
      background: rgba(255,255,255,0.1);
      transform: translateY(-2px);
    }

    /* Mobile hamburger */
    .hamburger { display:none; flex-direction:column; cursor:pointer; gap:4px; margin-right:50px; }
    .hamburger div { width:26px; height:3px; background:white; border-radius:3px; }

    .mobile-nav { display:none; flex-direction:column; background:rgba(0,0,0,0.9); position:fixed; top:70px; left:0; width:100%; padding:20px; gap:15px; z-index:200; }
    .mobile-nav a {
      color: #ccc !important;
      text-decoration: none;
      font-size: 15px;
      padding: 6px 0 6px 12px;
      border-radius: 6px;
      transition: all 0.3s ease;
    }
    .mobile-nav a:hover {
      color: #fff !important;
      background: rgba(255,255,255,0.1);
      transform: translateY(-2px);
    }
    .mobile-nav .btn { width:85%; }

    /* --- HERO --- */
    .hero {
      height: 100vh;
      width: 100%;
      background: url('/img/Arkaxe-NoBG.png') center/cover no-repeat;
      position: relative;
      display: flex;
      align-items: center;
      transition: transform 0.2s ease-out; /* smooth scaling */
    }
    .hero-overlay { position:absolute; inset:0; background:rgba(0,0,0,0.5); }
    .hero-content {
      position: relative;
      padding: 120px 40px 0 90px; /* top padding so content is below header */
      max-width: 900px;
    }

    /* --- GENERAL --- */
    section { margin:0 auto; padding:80px 20px; max-width:1200px; }
    h2, h3, h4 { margin:0 0 15px 0; }
    .card-grid { display:grid; grid-template-columns:repeat(3, minmax(250px,1fr)); gap:20px; }
    .card { transition:0.25s ease; background:rgba(255,255,255,0.05); padding:20px; border:1px solid rgba(255,255,255,0.1); border-radius:12px; }

    footer { padding:40px 20px; text-align:center; border-top:1px solid #222; color:#aaa; }
    .btn { display:inline-block; padding:12px 22px; background:#6b28b6; color:#fff; border-radius:6px; text-decoration:none; transition: all 0.3s ease; }
    .btn:hover { background:#8f3ae0; }

    /* --- CARD --- */
    .card {
      background: rgba(255,255,255,0.05);
      padding: 20px;
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 12px;
      text-align: center; /* center content */
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px; /* spacing between image, title, and description */
    }

    
    .card:hover { transform:translateY(-6px) scale(1.03); box-shadow:0 12px 28px rgba(0,0,0,0.4); }

    .card-img {
      width: 100%;
      height: 200px; /* or auto if you want natural aspect ratio */
      object-fit: cover; /* crop or scale image nicely */
      border-radius: 8px;
    }


    /* --- RESPONSIVE --- */
    @media (max-width: 768px) {
      .card-grid {
        grid-template-columns:repeat(auto-fit, minmax(250px,1fr));
      }
      nav { display:none; }
      .hamburger { display:flex; }
      
      /* Reduce hero height on mobile */
      .hero { 
        height: 60vh; /* 60% of viewport height instead of full */
      }
    
      .hero-content h2 { font-size:32px !important; }
      .hero-content p { font-size:16px !important; }
      header { padding: 12px 20px; }
    }

    /* --- COMING SOON OVERLAY --- */
    #comingSoon {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.6);
      backdrop-filter: blur(8px);
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 9999;
      flex-direction: column;
      color: #fff;
      text-align: center;
    }
    .comingSoon-content h1 {
      font-size: 48px;
      font-weight: 900;
      margin-bottom: 20px;
      color: #6b28b6;
      text-shadow: 0 0 10px #6b28b6;
    }
    .comingSoon-content p { font-size: 20px; margin-bottom: 15px; }
    #countdown { font-size: 32px; font-weight: bold; letter-spacing: 2px; color: #fff; }