@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
/* === NAYA PRELOADER STYLING === */
    #loader-wrapper {
        /* Background ko dark aur theme ke mutabiq karte hain */
        background-color: rgba(10, 10, 10, 0.85); /* Dark bg */
        backdrop-filter: blur(10px); /* Peechay blur */

        /* === YEH HAI FIX: Isko screen ke center mein laane ke liye === */
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        /* === FIX END === */

        /* === JS FIX KE LIYE === */
        display: flex;
        justify-content: center; /* Horizontal center */
        align-items: center;   /* Vertical center */
        opacity: 1;
        transition: opacity 0.5s ease, visibility 0.5s ease;
        visibility: visible;
        z-index: 9999; /* Sab se oopar */
    }

    /* === JS FIX KE LIYE === */
    #loader-wrapper.hidden {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

    .loader-container {
        text-align: center;
    }

    .loader-logo {
        width: 100px; /* Logo ka size */
        height: 100px;
        margin-bottom: 25px; /* Logo aur bars ke darmiyan gap */
        /* Logo ko pop karne ki animation */
        animation: gentle-float 2s ease-in-out infinite;
        z-index: 10;
    }
    
    .loader-bars {
        display: flex;
        justify-content: center;
        gap: 10px;
    }

    .loader-bar {
        width: 15px; /* Bar ki width */
        height: 60px; /* Bar ki height */
        border-radius: 8px;
        animation: bar-wave 1.3s ease-in-out infinite;
    }
    
    /* Theme ke mutabiq colors */
    .loader-bar:nth-child(1) {
        background-color: #00e5ff; /* Blue */
        animation-delay: 0s;
    }
    .loader-bar:nth-child(2) {
        background-color: #fbbf24; /* Yellow */
        animation-delay: 0.15s;
    }
    .loader-bar:nth-child(3) {
        background-color: #00e5ff; /* Blue */
        animation-delay: 0.3s;
    }


    /* Logo ki float animation */
    @keyframes gentle-float {
      0%, 100% {
        transform: translateY(0);
      }
      50% {
        transform: translateY(-8px); /* Thora sa oopar */
      }
    }

    /* Bars ki wave animation */
    @keyframes bar-wave {
      0%, 100% {
        transform: scaleY(0.3); /* Chhoti height */
        opacity: 0.7;
      }
      50% {
        transform: scaleY(1); /* Poori height */
        opacity: 1;
      }
    }
    /* === NAYA PRELOADER STYLING END === */

/* --- General Fixes and Setup --- */
* {
    box-sizing: border-box; /* Ensures padding doesn't affect overall width */
}

html, body {
  margin: 0;
  padding: 0;
  font-family: 'Inter', sans-serif;
  line-height: 1.6;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  scroll-behavior: smooth;
  overflow-x: hidden; /* Prevents horizontal scrollbar and fixes the issue */
}

/* --- Particles Background --- */
#tsparticles {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
}

section, header {
    position: relative;
    z-index: 1; 
}

/* --- Custom Cursor --- */
body {
    cursor: none !important;
}

#cursor-dot, #cursor-ring {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 99999;
    transform: translate(-50%, -50%);
}

#cursor-dot {
    width: 6px;
    height: 6px;
    background-color: #0a0a0a;
    border-radius: 50%;
    transition: background-color 0.2s ease;
}

#cursor-ring {
    width: 36px;
    height: 36px;
    border: 4px solid rgba(255, 204, 0, 0.7);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: width 0.3s ease, height 0.3s ease, border-color 0.3s ease;
}

#cursor-text {
    color: #99fdaf;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* --- Navbar --- */
header {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 999;
  transition: background 0.3s ease, box-shadow 0.3s ease; 
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(0, 0, 0, 0.4);
  padding: 20px 40px;
  box-shadow: none;
  transition: padding 0.3s ease;
}

.navbar-scrolled {
  background: #0a0a0a;
  padding: 10px 40px;
  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.7);
}

.nav-logo img {
  height: 50px;
  transition: height 0.3s ease;
}

.navbar-scrolled .nav-logo img {
  height: 40px;
}

.nav-links {
  list-style: none;
  display: flex;
  gap: 25px;
  margin: 0;
  padding: 0;
}

.nav-links li a {
  text-decoration: none;
  color: #e2e8f0;
  font-size: 1.2rem;
  font-weight: 500;
  transition: color 0.3s;
}

.nav-links li a:hover {
  color: #38bdf8;
}

.airdrop-btn {
  background: linear-gradient(135deg, #00c2ff 0%, #ffcc00 100%);
  color: #0a0a0a;
  padding: 14px 30px; 
  border: none;
  border-radius: 50px; 
  cursor: pointer;
  font-weight: 800;
  font-size: 1.15em; 
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 15px rgba(0, 194, 255, 0.4), 0 0 0 3px rgba(255, 204, 0, 0.5);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  display: flex;
  align-items: center;
  gap: 12px;
}

.airdrop-btn:hover {
  background: linear-gradient(135deg, #ffcc00 0%, #00c2ff 100%);
  box-shadow: 0 2px 10px rgba(0, 194, 255, 0.6), 0 0 0 5px rgba(0, 194, 255, 0.8), inset 0 0 10px rgba(0, 0, 0, 0.2);
}

.airdrop-btn a{
  text-decoration: none;
  color: #000000;
}

/* --- Hamburger Menu & Sidebar (NEW) --- */
.hamburger {
    display: none; /* Desktop par hide */
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    z-index: 1001;
}
.hamburger span {
    width: 28px;
    height: 3px;
    background-color: #e2e8f0;
    border-radius: 3px;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
.hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(6px, 6px); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(7px, -6px); }

.sidebar {
    position: fixed;
    top: 0;
    right: -300px; /* Initially hidden */
    width: 280px;
    height: 100vh;
    background-color: rgba(17, 24, 39, 0.95);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    z-index: 1000;
    transition: right 0.4s ease-in-out;
    padding-top: 20px;
}
.sidebar.open { right: 0; }
.sidebar-header {
    padding: 0 20px 20px 20px;
    border-bottom: 1px solid rgba(56, 189, 248, 0.2);
}
.sidebar-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.sidebar-logo img { height: 35px; }
.sidebar-logo span { color: white; font-size: 1.2rem; font-weight: 600; }
.sidebar ul { list-style: none; padding: 20px 0; }
.sidebar ul li a {
    display: block;
    color: #94a3b8;
    text-decoration: none;
    font-size: 1.1rem;
    padding: 15px 25px;
    transition: background-color 0.2s, color 0.2s;
}
.sidebar ul li a:hover {
    background-color: rgba(56, 189, 248, 0.1);
    color: var(--primary-color);
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease-in-out;
}
.overlay.open { opacity: 1; pointer-events: auto; }



    /* ================== Hero Section ======================= */
    .hero {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 100px 50px;
      min-height: 100vh;
      /* background: #020513; Dark background */
      color: #fff;
    }

    /* Ensure these elements are absolutely visible and layered correctly */
    .about-grid > div {
      opacity: 1 !important;
      visibility: visible !important;
    }

    .hero-content {
      flex: 1;
      max-width: 50%;
      position: relative; 
      z-index: 2;
      --tw-backdrop-blur: blur(32px);
    }

    .hero-content h1 {
      font-size: 2.5rem;
      margin-bottom: 20px;
      line-height: 1.3;
    }

    .hero-content p {
      font-size: 1.1rem;
      margin-bottom: 30px;
      color: #ccc;
    }

    .hero-buttons {
      display: flex;
      gap: 20px;
    }

    .btn {
      padding: 12px 25px;
      background: linear-gradient(90deg, #ff00cc, #3333ff);
      color: #fff;
      text-decoration: none;
      font-weight: bold;
      border-radius: 8px;
      transition: 0.3s;
    }

    .btn:hover {
      opacity: 0.8;
    }

    .btn.secondary {
      background: transparent;
      border: 2px solid #00e0ff;
    }


    /* ================== ⚡ QUAD-RING HERO ANIMATION FIX (100% Video Match) ⚡ ================== */

    .hero-image {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .hero-image img {
      width: 400px;
      animation: float 4s ease-in-out infinite;
    }

    /* ================== Responsive Hero Section ================== */


    @media (max-width: 1024px) {
      .hero {
        flex-direction: column;
        text-align: center;
        padding: 80px 30px;
      }

      .hero-content {
        max-width: 100%;
      }

      .hero-content h1 {
        font-size: 2.2rem;
      }

      .hero-content p {
        font-size: 1.1rem;
      }

      .hero-buttons {
        justify-content: center;
      }

      .hero-image img {
        width: 320px;
        margin-top: 30px;
      }
    }

    @media (max-width: 768px) {
      .hero {
        padding: 70px 20px;
        margin-top: 50px;

      }

      .hero-content h1 {
        font-size: 1.9rem;
      }

      .hero-content p {
        font-size: 1rem;
      }

      .hero-image img {
        width: 260px;
      }
    }

    @media (max-width: 480px) {
      .hero {
        padding: 60px 15px;
        margin-top: 50px;
      }

      .hero-content h1 {
        font-size: 1.6rem;
      }

      .hero-content p {
        font-size: 0.95rem;
      }

      .btn {
        padding: 10px 18px;
        font-size: 0.9rem;
      }

      .hero-image img {
        width: 220px;
      }
    }



    /* ====================== About Protocol ========================= */




    /* ================== ABOUT SECTION (FINAL ASTERDEX STYLE) ================== */

    /* Main section ka container */
    #about-section {
      padding-top: 100px; /* Sirf upar padding */
      padding-bottom: 100px; /* Sirf neeche padding */
      overflow: hidden;

    }

    /* Text (Heading/Paragraph) ka container */
    .about-text-content {
      text-align: center;
      max-width: 900px;
      margin: 0 auto 60px; /* Neeche margin taake cards se gap ho */
    }

    .about-text-content h2{
      color: #ddd;
      font-size: 3rem;
    }

    .about-text-content p{
      font-size: 1rem;
      color: #cbd5e1;
      line-height: 1.6;
    }

    /* YEH CONTAINER PIN HOGA */
    .about-horizontal-scroll-container {
      height: 450px; /* Iski height zaroori hai, taake pin area ban sake */
      position: relative;
    }

    /* YEH CONTAINER HORIZONTALLY MOVE KAREGA */
    .about-grid {
      display: flex;
      flex-wrap: nowrap;
      width: max-content; /* Critical: Taake saare cards ek line mein fit ho jayein */
      position: absolute;
      left: 0;
      top: 0;
      padding: 20px 50px; /* Thori padding taake cards side se na chipkein */
    }

    /* Cards ka style */
    /* UPDATED: Yahan se opacity aur transform hata diye gaye hain */
    .about-card {
      width: 340px;
      margin-right: 40px;
      flex-shrink: 0;
      background: linear-gradient(135deg, #090d18, #0a1225, #0a0a0a);
    }

    .about-card {
      width: 100%;
      max-width: 320px;
      height: 330px;

      background: rgba(20, 25, 40, 0.4); /* glassy dark-blue base */
      border: 1px solid rgba(56, 189, 248, 0.2); /* subtle cyan border */
      border-radius: 16px;
      padding: 40px 30px;
      text-align: center;
      transition: all 0.4s ease;
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
    }

    .about-card img {
      width: 100px;
      height: 100px;
      object-fit: contain;
      margin-bottom: 20px;
    }

    .about-card h3 {
      color: #f1f5f9;
      font-size: 1.5rem;
      margin-bottom: 12px;
      background: linear-gradient(90deg, #38bdf8, #fbbf24);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      letter-spacing: 0.5px;
    }

    .about-card p {
      font-size: 1rem;
      color: #bbb;
    }

    .about-card:hover {
      /* transform: translateY(-10px); */
      /* border-color: #ff0080; */
      /* box-shadow: 0 8px 20px rgba(255, 0, 128, 0.4); */
      transform: translateY(-10px) scale(1.03);
      border-color: #38bdf8;
      box-shadow: 0 8px 30px rgba(56, 189, 248, 0.5);
      background: rgba(30, 40, 70, 0.6);
    }


    /* ===================== Story Section ===================== */
.story-section {
    padding: 100px 0;
    background: #0d0d0d;
}
.story-content {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 60px;
    align-items: center;
}
.story-text .section-title {
    text-align: left;
    margin-bottom: 30px;
    font-size: 2.5rem;
}
.story-text p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #cfcfcf;
    margin-bottom: 20px;
}
.story-text .story-intro {
    font-size: 1.2rem;
    font-style: italic;
    color: #e2e8f0;
}
.story-text .story-conclusion {
    font-weight: bold;
    color: #fbbf24; /* secondary color for emphasis */
}
.story-values {
    background: rgba(20, 25, 40, 0.4);
    border: 1px solid rgba(56, 189, 248, 0.2);
    border-radius: 16px;
    padding: 40px 30px;
    backdrop-filter: blur(14px);
}
.story-values h3 {
    font-size: 1.8rem;
    color: #38bdf8; /* primary color */
    margin-bottom: 25px;
    text-align: center;
}
.story-values ul {
    list-style: none;
    padding: 0;
}
.story-values ul li {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 20px;
    font-size: 1.05rem;
    color: #e2e8f0;
}
.story-values ul li i {
    font-size: 1.5rem;
    color: #fbbf24; /* secondary color */
    margin-top: 5px;
}

/* RESPONSIVE STORY SECTION (FIX) */
@media (max-width: 992px) {
  .story-content {
    grid-template-columns: 1fr; /* Single column layout */
    gap: 50px;
  }
  .story-text .section-title {
    text-align: center; /* Center align title on smaller screens */
  }
}

@media (max-width: 768px) {
  .story-section {
    padding: 80px 20px;
  }
  .story-text .section-title {
    font-size: 2.2rem;
  }
}



    /* ===================== Whitepaper Section ===================== */
    #whitepaper {
      padding: 80px 0;
      /* background: #0b0f1a; */
      color: #fff;
      text-align: center;
    }

    #whitepaper .container {
      max-width: 1100px;
      margin: auto;
    }

    .section-title {
      font-size: 36px;
      font-weight: 700;
      margin-bottom: 20px;
      color: #00e6e6;
    }

    .section-text {
      font-size: 18px;
      line-height: 1.7;
      margin-bottom: 40px;
      color: #cfcfcf;
    }

    .btn-primary {
      background: #00e6e6;
      color: #0b0f1a;
      padding: 15px 35px;
      border-radius: 8px;
      font-size: 18px;
      font-weight: 600;
      text-decoration: none;
      display: inline-block;
      transition: all 0.3s ease;
    }

    .btn-primary:hover {
      background: #00bfbf;
      transform: scale(1.05);
    }

    /* ======== Token Allocation ========== */


    .tokenomics-section {
      padding: 80px 20px;
      text-align: center;
      /* background: #0d0d0d; */
      color: #fff;
    }

    #token-allocation {
      text-align: center;
      margin: 50px 0;
    }

    #token-allocation h2 {
      font-size: 2rem;
      margin-bottom: 20px;
      color: #fff;
    }

    #allocationChart {
      max-width: 500px;
      margin: auto;
    }

    .contract-address-box {
      background: #1a1a1a; /* allocation-card bg se match */
      border: 2px solid #222; /* allocation-card border se match */
      border-radius: 12px;
      padding: 20px 25px;
      max-width: 600px;
      margin: 30px auto 40px auto; /* Center mein */
      text-align: left;
    }
    .ca-label {
      display: block;
      font-size: 0.9rem;
      color: #aaa; /* Halka color */
      margin-bottom: 8px;
      text-transform: uppercase;
    }
    .ca-value-wrapper {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 15px;
    }
    .ca-address {
      font-family: monospace;
      font-size: 1.15rem;
      color: #00e5ff; /* Section title ke color se match */
      font-weight: 600;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .ca-copy-btn {
      background: transparent;
      border: none;
      color: #00e5ff; /* Address ke color se match */
      font-size: 1.4rem;
      cursor: pointer;
      transition: color 0.2s, transform 0.2s;
    }
    .ca-copy-btn:hover {
      color: #fff;
      transform: scale(1.1);
    }
    .ca-copy-btn .fa-check { /* "Copied" state ke liye */
      color: #2ECC71; /* Green checkmark */
    }
    @media (max-width: 480px) {
      .ca-address {
        font-size: 0.95rem; /* Mobile par chhota font */
      }
    }


    .tokenomics-section .section-title {
      font-size: 2.5rem;
      margin-bottom: 10px;
      color: #00e5ff;
    }

    .tokenomics-section .section-subtitle {
      font-size: 1.2rem;
      margin-bottom: 30px;
      color: #bbb;
    }


    .allocation-details {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 20px;
      margin-top: 40px;
      padding-left: 80px;
      padding-right: 80px;
    }

    .allocation-card {
      background: #1a1a1a;
      padding: 20px;
      border-radius: 12px;
      transition: all 0.3s ease;
      border: 2px solid #222;
    }

    .allocation-card:hover {
      background: #222;
      transform: translateY(-5px);
      border-color: #00ffaa66;
      box-shadow: 0 8px 20px #00ffaa66;
    }

    .allocation-card h3 {
      font-size: 1.3rem;
      margin-bottom: 10px;
      color: #FFD700;
    }


    .allocation-card p {
      font-size: 1rem;
      color: #ddd;
      line-height: 1.6;
    }


    /* Use Case Section */
    #use-case {
      /* background: #0d0d0d; Dark background */
      color: #fff;
      padding: 60px 20px;
    }

    .use-case-container {
      max-width: 1000px;
      margin: 0 auto;
      text-align: center;
    }

    .use-case-title {
      font-size: 2.5rem;
      margin-bottom: 40px;
      font-weight: bold;
      color: #00d1b2; /* Accent color */
    }

    .timeline {
      position: relative;
      margin: 0 auto;
      padding: 20px 0;
    }

    .timeline::before {
      content: "";
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 4px;
      height: 100%;
      background: #444;
    }

    .timeline-item {
      display: flex;
      align-items: flex-start;
      margin: 40px 0;
      position: relative;
    }

    .timeline-item:nth-child(odd) {
      flex-direction: row-reverse;
    }

    .timeline-icon {
      background: #00d1b2;
      color: #fff;
      font-size: 1.5rem;
      padding: 15px;
      border-radius: 50%;
      z-index: 2;
      position: relative;
      margin: 35px 20px 0px 20px;
    }

    .timeline-content {
      background: #1a1a1a;
      padding: 20px;
      border-radius: 10px;
      flex: 1;
      text-align: left;
    }

    .timeline-content h3 {
      margin-bottom: 10px;
      color: #00d1b2;
    }

    .timeline-content p {
      font-size: 0.95rem;
      color: #ccc;
    }




    /* ===================== Roadmap Section ===================== */
    /* #roadmap {
      padding: 80px 0;
      color: #fff;
      text-align: center;
    }

    #roadmap .container {
      max-width: 1100px;
      margin: auto;
    }

    .roadmap-row {
      display: flex;
      justify-content: center;
      gap: 25px;
      margin-bottom: 30px;
      flex-wrap: wrap;
    }

    .roadmap-card {
      background: #1a2235;
      padding: 25px;
      border-radius: 12px;
      flex: 1;
      min-width: 280px;
      max-width: 350px;
      text-align: left;
      transition: all 0.3s ease;
    }

    .roadmap-card h3 {
      color: #00e6e6;
      font-size: 20px;
      margin-bottom: 15px;
    }

    .roadmap-card ul {
      margin: 0;
      padding-left: 20px;
      line-height: 1.6;
      color: #cfcfcf;
    }

    .roadmap-card:hover {
      transform: translateY(-8px);
      border: 1px solid #00e6e6;
    }
     */


     /* ================== ROADMAP SECTION (NEW HORIZONTAL SCROLL) ================== */

    /* Main section ka container */
    #roadmap {
        padding-top: 100px;
        padding-bottom: 100px;
        overflow: hidden; /* Zaroori hai */
    }

    /* Heading ko container ke andar rakhein */
    #roadmap .container {
        padding-bottom: 60px;
    }

    /* YEH CONTAINER PIN HOGA */
    .roadmap-pin-container {
        height: 400px; /* Iski height zaroori hai */
        position: relative;
    }

    /* YEH CONTAINER HORIZONTALLY MOVE KAREGA */
    .roadmap-grid {
        display: flex;
        flex-wrap: nowrap;
        width: max-content;
        position: absolute;
        left: 0;
        top: 0;
        padding: 0 50px; /* Shuru aur aakhir mein padding */
    }

    /* Cards ka style */
    .roadmap-card {
      /* background: #1a223546; */
      padding: 25px;
      border-radius: 12px;
      flex: 1;
      min-width: 280px;
      max-width: 350px;
      text-align: left;
      transition: all 0.3s ease;
      margin: 0px 50px;
      background: #1e284680;
      border: 1px solid rgba(255, 255, 255, 0.15);
      /* backdrop-filter: blur(50px);
      -webkit-backdrop-filter: blur(12px); */
      box-shadow: 0 4px 25px rgba(0, 0, 0, 0.3);
    }

    .roadmap-card h3 {
      color: #00e6e6;
      font-size: 20px;
      margin-bottom: 15px;
    }

    .roadmap-card ul {
      margin: 0;
      padding-left: 20px;
      line-height: 1.6;
      color: #cfcfcf;
      font-size: 1.2rem;
    }

    .roadmap-card:hover {
      transform: translateY(-8px);
      border: 1px solid #00e6e6;
    }

    @media (max-width: 465px) {
      .section-title{
        font-size: 2rem;
      }
    }

    /* ====== Roadmap Responsive (Mobile Optimization) ====== */
    @media (max-width: 768px) {
      #roadmap {
        padding: 60px 15px;
      }

      .roadmap-row {
        flex-direction: column;
        align-items: center;
        gap: 20px;
      }

      .roadmap-card {
        width: 100%;
        max-width: 320px; /* slightly smaller for mobile */
        padding: 20px;
        text-align: left;
        font-size: 0.95rem;
      }

      .roadmap-card h3 {
        font-size: 1.2rem;
        margin-bottom: 10px;
        text-align: center;
      }

      .roadmap-card ul {
        padding-left: 18px;
        line-height: 1.5;
      }
    }

    /* Small phones (<=480px) */
    @media (max-width: 480px) {
      .roadmap-card {
        width: 300px;
        max-width: 100%;
        padding: 18px;
      }

      .roadmap-card h3 {
        font-size: 1.1rem;
      }

      .roadmap-card ul li {
        font-size: 0.9rem;
      }
    }



    /* ===================== Delta Section ===================== */
    #delta {
      padding: 120px 20px;
      /* background: linear-gradient(135deg, #0f0f0f, #1b1b1b); */
      color: #fff;
    }

    .delta-container {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 60px;
      max-width: 1200px;
      margin: 0 auto;
      flex-wrap: wrap;
    }

    .delta-text {
      flex: 1;
      min-width: 320px;
    }

    .delta-text h2 {
      font-size: 3rem;
      margin-bottom: 20px;
      background: linear-gradient(90deg, #00c6ff, #ffcc00);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .delta-text p {
      font-size: 1.2rem;
      line-height: 1.8;
      margin-bottom: 25px;
      color: #ddd;
    }

    .delta-text ul {
      list-style: none;
      margin-bottom: 30px;
    }

    .delta-text ul li {
      font-size: 1.1rem;
      margin-bottom: 12px;
      color: #bbb;
      transition: transform 0.3s ease, color 0.3s ease;
    }

    .delta-text ul li:hover {
      transform: translateX(10px);
      color: #00c2ff;
    }

    .delta-buttons {
      display: flex;
      gap: 20px;
    }

    .btn-primary, .btn-secondary {
      padding: 14px 28px;
      border-radius: 8px;
      font-size: 1rem;
      font-weight: 600;
      text-decoration: none;
      transition: all 0.3s ease;
    }

    .btn-primary {
      background: #00c2ff;
      color: #111;
    }

    .btn-primary:hover {
      background: #00a3d6;
    }

    .btn-secondary {
      border: 2px solid #00c2ff;
      color: #00c2ff;
    }

    .btn-secondary:hover {
      background: #00c2ff;
      color: #111;
    }

    .delta-image {
      flex: 1;
      min-width: 320px;
      display: flex;
      justify-content: center;
    }

    .delta-image img {
      max-width: 100%;
      border-radius: 16px;
      animation: float 4s ease-in-out infinite;
      box-shadow: 0 10px 40px rgba(0, 194, 255, 0.4);
    }

    @keyframes float {
      0% { transform: translateY(0px); }
      50% { transform: translateY(-12px); }
      100% { transform: translateY(0px); }
    }


    /* Ecosystem */
    /* ===================== Ecosystem Section ===================== */
    #ecosystem {
      padding: 80px 0;
      /* background: #0b0f1a; */
      color: #fff;
      text-align: center;
    }

    .container {
      padding: 0px 50px;
    }

    .eco-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 25px;
      margin-top: 40px;
    }

    .eco-card {
      background: #1a2235;
      padding: 25px;
      border-radius: 12px;
      transition: all 0.3s ease;
    }

    .eco-card img {
      width: 60px;
      margin-bottom: 15px;
    }

    .eco-card h3 {
      color: #00e6e6;
      font-size: 20px;
      margin-bottom: 10px;
    }

    .eco-card p {
      color: #cfcfcf;
      font-size: 15px;
      line-height: 1.5;
    }

    .eco-card:hover {
      transform: translateY(-8px);
      border: 1px solid #00e6e6;
    }


    /* ================== NAYA SECTION: Future Partnerships ================== */
    #partners {
        padding: 100px 0;
        text-align: center;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        overflow-x: hidden;
    }

    #partners .section-title {
        margin-bottom: 60px;
    }

    .logo-slider {
        width: 100%;
        overflow: hidden;
        position: relative;
        -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
        mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
    }

    .logo-track {
        display: flex;
        width: calc(220px * 22); /* Slide width * (Total logos * 2) */
        animation: scroll 45s linear infinite;
    }

    @keyframes scroll {
        0% { transform: translateX(0); }
        100% { transform: translateX(calc(-300px * 12)); } /* Slide width * Total logos */
    }

    .slide {
        width: 400px;
        height: 80px;
        display: flex;
        align-items: center;
        justify-content: center;
        /* flex-direction: column; */
        padding: 10px;
        transition: transform 0.3s ease;
        margin-left: 80px;
    }

    .slide:hover {
        transform: scale(1.1);
    }

    .slide img {
        height: 60px;
        max-width: 60px;
        filter: grayscale(100%);
        opacity: 0.6;
        transition: all 0.3s ease;
    }

    .slide span {
        margin-left: 15px;
        font-size: 1.7rem;
        font-weight: 500;
        color: #fff; /* UPDATED: Font color set to white */
        opacity: 0.6;
        transition: all 0.3s ease;
    }

    .slide:hover img,
    .slide:hover span {
        filter: grayscale(0%);
        opacity: 1;
    }



    /* ================== JOIN US SECTION ================== */
    #join-us {
      text-align: center;
      padding: 100px 30px; /* bigger spacing */
      /* background: linear-gradient(135deg, #0f172a, #1e293b); */
      border-top: 2px solid #38bdf8;
    }

    #join-us h2 {
      font-size: 2.5rem; /* bigger heading */
      color: #38bdf8;
      margin-bottom: 25px;
    }

    #join-us .subtitle {
      font-size: 1.2rem;
      color: #e2e8f0;
      margin-bottom: 50px;
    }

    #join-us .subtitle span {
      color: #fbbf24;
      font-weight: bold;
    }

    .community-links {
      display: flex;
      justify-content: center;
      gap: 25px;
      flex-wrap: wrap;
    }

    .community-links .btn {
      display: flex;
      align-items: center;
      gap: 10px;
      text-decoration: none;
      padding: 15px 35px;
      border-radius: 35px;
      font-size: 1.1rem;
      font-weight: bold;
      transition: all 0.3s ease-in-out;
      color: #fff;
    }

    .community-links .btn i {
      font-size: 1.3rem;
    }

    /* Telegram */
    .community-links .telegram {
      background: #229ED9;
    }
    .community-links .telegram:hover {
      background: #1d8ec4;
    }

    /* Twitter */
    .community-links .twitter {
      background: #1DA1F2;
    }
    .community-links .twitter:hover {
      background: #178cd1;
    }

    /* Discord */
    .community-links .discord {
      background: #5865F2;
    }
    .community-links .discord:hover {
      background: #4752c4;
    }

    /* Medium */
    .community-links .medium {
      background: #000000;
    }
    .community-links .medium:hover {
      background: #333333;
    }

    .community-links .telegram { background: #229ED9; }
    .community-links .twitter { background: #1DA1F2; }
    .community-links .discord { background: #5865F2; }
    .community-links .medium { background: #000000; }
    .community-links .telegram:hover { background: #1d8ec4; }
    .community-links .twitter:hover { background: #178cd1; }
    .community-links .discord:hover { background: #4752c4; }
    .community-links .medium:hover { background: #333333; }

    /* NAYE BUTTONS STYLES */
    .community-links .tiktok { background: #000000 }
    .community-links .tiktok:hover { background: #333333 }
    .community-links .instagram { background: #E4405F }
    .community-links .instagram:hover { background: #C13584 }

    /* ================== FOOTER ================== */
    footer {
      /* background: linear-gradient(180deg, #040611, #040611); */
      border-top: 2px solid #38bdf8;
      padding: 40px 20px;
      color: #f1f5f9;
    }

    .footer-container {
      max-width: 1200px;
      margin: 0 auto;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: 40px;
      align-items: center;
    }

    /* --------- Left Side --------- */
    .footer-main {
      flex: 1;
      text-align: center;
    }

    .footer-logo img {
      height: 65px;
      margin-bottom: 15px;
    }

    .footer-text {
      color: #94a3b8;
      margin-bottom: 15px;
      font-size: 0.95rem;
    }

    .footer-links {
      display: flex;
      justify-content: center;
      gap: 25px;
      flex-wrap: wrap;
    }

    .footer-links a {
      color: #38bdf8;
      text-decoration: none;
      font-weight: 500;
      transition: 0.3s;
    }

    .footer-links a:hover {
      color: #fbbf24;
    }

    /* ================== NEW FOOTER (Simple, Morpho Inspired) ================== */
    .site-footer-simple {
      background: #0a0a0a69;
      color: #8896a9; /* Softer grey for text */
      padding: 50px 40px 30px 40px;
      border-top: 1px solid rgba(255, 255, 255, 0.08);
    }

    .footer-simple-container {
      max-width: 1200px;
      margin: 0 auto;
    }

    .footer-simple-grid {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr 1fr; /* First column is wider */
      gap: 30px;
      margin-bottom: 40px;
    }

    .footer-column-simple .footer-logo-img {
      height: 50px;
      margin-bottom: 20px;
    }

    .footer-column-simple h4 {
      color: #e2e8f0; /* Lighter grey for heading */
      font-size: 1rem;
      font-weight: 500;
      margin-bottom: 15px;
      text-transform: uppercase;
      letter-spacing: 0.8px;
    }

    .footer-column-simple ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .footer-column-simple ul li {
      margin-bottom: 10px;
    }

    .footer-column-simple ul a {
      color: #8896a9;
      text-decoration: none;
      transition: color 0.2s ease;
    }

    .footer-column-simple ul a:hover {
      color: #fff;
    }

    .footer-socials {
      display: flex;
      gap: 18px;
      margin-top: 20px;
    }

    .footer-socials a {
      color: #8896a9;
      font-size: 1.3rem;
      transition: color 0.2s ease, transform 0.2s ease;
    }

    .footer-socials a:hover {
      color: #fff;
      transform: scale(1.1);
    }

    .footer-simple-bottom {
      border-top: 1px solid rgba(255, 255, 255, 0.08);
      padding-top: 30px;
      text-align: center;
      font-size: 0.9rem;
    }


    /* === NAYI STYLING: Popup Modal === */
        .popup-modal {
            position: fixed;
            inset: 0;
            z-index: 5000; /* Preloader se neeche, navbar se oopar */
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 1rem;
            background-color: rgba(0, 0, 0, 0.7);
            backdrop-filter: blur(5px);
            opacity: 1;
            transition: opacity 0.3s ease, visibility 0.3s ease;
        }
        .popup-modal.hidden {
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
        }
        .popup-content {
            width: 100%;
            max-width: 500px; /* max-w-md */
            background-color: rgb(217, 255, 230);
            border: 1px solid var(--border-color);
            border-radius: 12px; /* rounded-xl */
            box-shadow: var(--shadow-md);
            padding: 2rem; /* p-8 */
            position: relative;
        }
        .popup-close-btn {
            position: absolute;
            top: 1rem;
            right: 1rem;
            color: var(--text-secondary);
            cursor: pointer;
            background: none;
            border: none;
            font-size: 1.5rem;
            transition: color 0.3s ease;
        }
        .popup-close-btn:hover {
            color: var(--text-primary);
        }
        .popup-content h3 {
            font-size: 1.5rem; /* 2xl */
            font-weight: 600;
            color: var(--text-primary);
            margin: 0 0 1rem 0;
        }
        .popup-content p {
            color: var(--text-secondary);
            margin: 0;
        }
        /* === END NAYI STYLING === */



    /* ================= RESPONSIVE & ENHANCED DESIGN ================= */

    /* Laptops & Tablets (<=1200px) */
    @media (max-width: 1200px) {
      .hero {
        flex-direction: column;
        text-align: center;
        padding: 80px 40px;
      }
      .hero-content {
        max-width: 90%;
        margin-bottom: 40px;
      }
      .hero-content h1 {
        font-size: 2.2rem;
      }
      .hero-content p {
        font-size: 1.05rem;
      }
      .hero-image img {
        width: 320px;
      }

      .about-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
      }
    }

    /* Tablets (<=992px) */
    @media (max-width: 992px) {
      .navbar {
        padding: 15px 25px;
      }
      .hero {
        padding: 70px 30px;
      }
      .roadmap-row {
        flex-direction: column;
        align-items: center;
      }
      .eco-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
      }
    }

    /* Mobiles (<=768px) */
    @media (max-width: 768px) {
      /* Navbar */
      .nav-links,
      .nav-auth {
        display: none;
        flex-direction: column;
        text-align: center;
        background: #0f172a;
        position: absolute;
        top: 70px;
        left: 0;
        width: 100%;
        padding: 20px 0;
      }
      .nav-links.mobile-active,
      .nav-auth.mobile-active {
        display: flex;
      }
      .hamburger {
        display: flex;
        flex-direction: column;
        cursor: pointer;
        gap: 5px;
      }
      .hamburger span {
        width: 26px;
        height: 3px;
        background: #fff;
        border-radius: 2px;
        transition: all 0.3s;
      }

      /* Hero */
      .hero {
        flex-direction: column;
        padding: 60px 20px;
        text-align: center;
      }
      .hero-content h1 {
        font-size: 1.8rem;
      }
      .hero-content p {
        font-size: 0.95rem;
      }
      .hero-buttons {
        flex-direction: column;
        gap: 15px;
        align-items: center;
      }
      .hero-image img {
        width: 240px;
        margin-top: 20px;
      }

      /* About Grid */
      .about-grid {
        grid-template-columns: 1fr;
        gap: 20px;
      }

      /* Story Section Responsive */
      /* .story-section {
        padding: 80px 20px;
      }
      .story-text .section-title {
        font-size: 2.2rem;
      }
      .story-text p {
        font-size: 1rem;
      }
      .story-values {
        padding: 30px 25px;
      }
      .story-values h3 {
        font-size: 1.6rem;
      } */
      

      /* Tokenomics */
      #allocationChart {
        max-width: 100%;
        height: auto;
      }
      .allocation-details {
        grid-template-columns: 1fr;
      }

      /* Use Case Timeline */
      .timeline::before {
        left: 20px;
      }
      .timeline-item {
        flex-direction: column !important;
        align-items: flex-start;
        margin-left: 40px;
      }
      .timeline-content {
        text-align: left;
        width: 100%;
      }

      /* Ecosystem */
      .eco-grid {
        grid-template-columns: 1fr;
      }
      
      /* Footer Responsive */
      .footer-simple-grid {
        grid-template-columns: 1fr 1fr; /* 2x2 grid on tablets */
      }
    }

    @media (max-width: 600px) {
        .footer-simple-grid {
        grid-template-columns: 1fr; /* Single column on mobile */
        text-align: center;
      }
      .footer-column-simple .footer-logo-img {
          margin: 0 auto 20px auto; /* Center logo */
      }
      .footer-socials {
        justify-content: center; /* Center social icons */
      }

      .airdrop-btn{
        height: 40px;
        width: 150px;
        font-size: 0.9rem;
      }
    }

    /* Small Phones (<=480px) */
    @media (max-width: 480px) {
      .hero{
        width: 100%;
      }
      
      #about-section {
        width: 100%;
      }
      
      .hero-content h1 {
        font-size: 1.6rem;
        line-height: 1.4;
      }
      .hero-content p {
        font-size: 0.9rem;
      }
      .btn {
        padding: 10px 20px;
        font-size: 0.9rem;
      }
      .hero-image img {
        width: 200px;
      }

      .allocation-card {
        /* FIX: Changed fixed width to be responsive */
        width: 100%; 
      }

      .allocation-details {
        padding: 0px;
      }
      
      .container {
        padding: 0px 20px;
      }

      .timeline-item {
        margin-left: 25px;
      }

      #delta {
        padding-bottom: 50px;
        padding-top: 50px;
      }

      .delta-text p {
        font-size: medium;
      }


      .delta-text ul {
        font-size: smaller;
        padding: 0px;
      }

      .delta-image {
        display: none;
      }

      .airdrop-btn{
        height: 30px;
        width: 120px;
        font-size: 0.7rem;
        padding: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .navbar{
        padding: 10px;
      }

      .nav-logo{
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }