:root{
    --bg:#06010a;
    --bg2:#0a0211;

    --text: rgba(255,255,255,.92);
    --muted: rgba(255,255,255,.70);
    --muted2: rgba(255,255,255,.54);

    --accent:#d946ef;   /* fuchsia */
    --accent2:#7c3aed;  /* violet */
    --good:#22c55e;

    --shadow: 0 20px 80px rgba(0,0,0,.55);
    --glow: 0 0 0 1px rgba(255,255,255,.06), 0 0 28px rgba(217,70,239,.30);

    --radius: 18px;
    --radius2: 26px;
    --max: 1180px;

    /* ✅ header height var (JS set karega) */
    --header-h: 72px;
  }

  *{ box-sizing:border-box; }
  html,body{ height:100%; width:100%; min-width:100%; overflow-x:clip; }
  html{
    background:
      radial-gradient(900px 420px at 18% 9%, rgba(217,70,239,.22), transparent 55%),
      radial-gradient(700px 360px at 85% 18%, rgba(124,58,237,.20), transparent 58%),
      radial-gradient(900px 520px at 80% 78%, rgba(217,70,239,.12), transparent 60%),
      linear-gradient(180deg, var(--bg2), var(--bg) 30%, #040007 100%);
    scroll-padding-top: var(--header-h); /* ✅ anchor / jump fix */
  }
  body{
    margin:0;
    font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    color:var(--text);
    background: transparent;
    overflow-x:clip;
    width:100%;
    min-width:100vw;
    font-size: 16.5px;

    /* ✅ FIXED HEADER ke niche content aaye */
    padding-top: var(--header-h);
  }

  /* ✅ Safety: never allow accidental horizontal overflow */
  main, header, footer, section, .wrap{ max-width:100vw; overflow-x:clip; }

  /* ✅ Page scroll lock when menu opens */
  body.nav-open{
    overflow: hidden;
    touch-action: none;
  }

  /* Section background scrim (fix: background looks different up/down) */
  section{ position:relative; }
  section::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background: linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,.34));
    z-index:0;
  }
  section > .wrap{ position:relative; z-index:1; }

  /* Decorative orbs */
  .orb{ position:fixed; filter: blur(70px); opacity:.35; z-index:0; pointer-events:none; }
  .orb.one{ width:420px; height:420px; left:-140px; top:70px; background:rgba(217,70,239,.55); border-radius:50%; }
  .orb.two{ width:420px; height:420px; right:-180px; top:220px; background:rgba(124,58,237,.45); border-radius:50%; }
  .orb.three{ width:520px; height:520px; left:50%; transform:translateX(-50%); bottom:-270px; background:rgba(217,70,239,.25); border-radius:50%; }

  .wrap{ width:min(var(--max), calc(100% - 40px)); margin-inline:auto; }

  /* ===========================
     ✅ Navbar (FIXED HEADER)
     =========================== */
  header{
    position: fixed;
    top: 0; left: 0; right: 0;
    width: 100%;
    z-index: 1000;

    backdrop-filter: blur(14px);
    background: linear-gradient(180deg, rgba(6,1,10,.88), rgba(6,1,10,.58));
    border-bottom: 1px solid rgba(255,255,255,.06);
  }
  .navWrap{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; width:100%; }
  .navbar-collapse{ flex-basis:100%; }

  .brand{ display:flex; align-items:center; gap:10px; text-decoration:none; }
  .logo{
    width:30px; height:30px; border-radius:11px;
    background: linear-gradient(135deg, rgba(217,70,239,1), rgba(124,58,237,1));
    box-shadow: 0 14px 40px rgba(217,70,239,.22);
    position:relative; flex:0 0 auto;
  }
  .logo:after{
    content:""; position:absolute; inset:7px;
    border-radius:8px; background: rgba(0,0,0,.22);
    border:1px solid rgba(255,255,255,.18);
  }
  .brandTitle{ color: rgba(255,255,255,.92); font-weight:900; letter-spacing:.10em; font-size:13px; margin:0; line-height:1.1; }
  .brandSub{ color: rgba(255,255,255,.68); margin:0; font-size:12px; line-height:1.1; }

  .nav-link{
    color: rgba(255,255,255,.72) !important;
    font-weight:700;
    padding: .85rem .9rem !important;
    border-radius: 14px;
    transition: .18s ease;
  }
  .nav-link:hover{ color: rgba(255,255,255,.95) !important; background: rgba(255,255,255,.04); }
  .nav-link.active{ color: rgba(255,255,255,.95) !important; position:relative; }
  .nav-link.active:after{
    content:"";
    position:absolute;
    left: 18%;
    right: 18%;
    bottom: 7px;
    height: 2px;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--accent), var(--accent2));
    box-shadow: 0 0 20px rgba(217,70,239,.35);
  }
  .navbar-toggler{
    border: 1px solid rgba(255,255,255,.18) !important;
    box-shadow: none !important;
    padding: .55rem .7rem;
    border-radius: 14px;
    background: rgba(255,255,255,.03);
  }
  .navbar-toggler:focus{ box-shadow: var(--glow) !important; border-color: rgba(217,70,239,.35) !important; }
  .navbar-toggler-icon{ filter: invert(1) opacity(.9); }

  /* Buttons */
  .xbtn{
    display:inline-flex; align-items:center; justify-content:center; gap:10px;
    border-radius: 16px;
    padding: 12px 18px;
    font-weight: 800;
    font-size: 14px;
    border:1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.03);
    color: var(--text);
    text-decoration:none;
    transition: transform .12s ease, box-shadow .18s ease, border-color .18s ease;
    user-select:none;
    white-space:nowrap;
  }
  .xbtn:hover{ transform: translateY(-1px); border-color: rgba(217,70,239,.35); box-shadow: var(--glow); }
  .xbtn.primary{
    border-color: rgba(217,70,239,.55);
    background: linear-gradient(135deg, rgba(217,70,239,1), rgba(124,58,237,1));
    box-shadow: 0 16px 50px rgba(217,70,239,.18);
  }
  .xbtn.ghost{
    background: transparent;
    border-color: rgba(217,70,239,.35);
  }

  /* Page sections */
  main{ position:relative; z-index:1; padding: 44px 0 70px; }

  main::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background: radial-gradient(900px 520px at 12% 52%, rgba(217,70,239,.10), transparent 60%),
                radial-gradient(900px 520px at 88% 46%, rgba(124,58,237,.08), transparent 60%),
                linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.20));
    z-index:0;
  }
  main > .wrap{ position:relative; z-index:1; }

  section{ padding: 48px 0; }

  .hero{ padding-top: 20px; }
  .kicker{
    display:inline-flex; align-items:center; gap:10px;
    padding: 10px 14px;
    border-radius: 999px;
    border:1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.03);
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
  }
  .kicker .dot{
    width:10px; height:10px; border-radius:999px;
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    box-shadow: 0 0 18px rgba(217,70,239,.55);
  }
  .title{
    font-size: clamp(34px, 4.2vw, 58px);
    font-weight: 900;
    letter-spacing: -.02em;
    margin: 16px 0 8px;
  }
  .title span{ color: var(--accent); }
  .subtitle{
    color: var(--muted);
    margin:0;
    font-size: 15.5px;
    line-height: 1.8;
    max-width: 980px;
  }

  .cardX{
    border-radius: var(--radius2);
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.03);
    box-shadow: var(--shadow);
    overflow:hidden;
  }

  .panel{
    border-radius: 22px;
    border:1px solid rgba(255,255,255,.08);
    background: linear-gradient(180deg, rgba(0,0,0,.48), rgba(0,0,0,.30));
    backdrop-filter: blur(10px);
    box-shadow: 0 16px 60px rgba(0,0,0,.35);
    padding: 18px 18px;
  }

  .secHead{ text-align:center; margin-bottom: 22px; }
  .secHead h2{
    margin:0 0 10px;
    font-size: clamp(26px, 3.2vw, 40px);
    font-weight: 900;
    letter-spacing: -.02em;
  }
  .secHead h2 span{ color: var(--accent); }
  .secHead p{
    margin:0 auto;
    max-width: 900px;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.8;
  }

  .tile{
    position:relative;
    border-radius: 18px;
    padding: 18px 18px 16px;
    background: rgba(0,0,0,.42);
    backdrop-filter: blur(10px);
    border:1px solid rgba(255,255,255,.08);
    box-shadow: 0 14px 55px rgba(0,0,0,.35);
    height: 100%;
    overflow:hidden;
  }
  .tile:hover{ border-color: rgba(217,70,239,.28); box-shadow: var(--glow); }
  .iconBubble{
    width: 52px; height: 52px;
    border-radius: 18px;
    display:grid; place-items:center;
    background: rgba(217,70,239,.18);
    border:1px solid rgba(217,70,239,.34);
    box-shadow: 0 0 26px rgba(217,70,239,.18);
    margin-bottom: 12px;
  }
  .tile h3{ margin:0 0 8px; font-size: 16.5px; font-weight: 900; }
  .tile p{ margin:0; color: var(--muted); font-size: 14.2px; line-height: 1.75; }
  .bullets{
    margin: 10px 0 0;
    padding-left: 16px;
    color: rgba(255,255,255,.68);
    font-size: 13.6px;
    line-height: 1.65;
  }
  .bullets li{ margin: 6px 0; }

  /* Fix: prevent background glow from tinting cards on desktop */
  .tile::before, .earnCard::before, .step::before, .panel::before, .audit::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background: linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.28));
    opacity:.9;
  }
  .tile, .earnCard, .step, .panel, .audit{ position:relative; }
  .tile > *, .earnCard > *, .step > *, .panel > *, .audit > *{ position:relative; z-index:1; }

  /* Earn cards */
  .earnCard{
    border-radius: 18px;
    padding: 18px;
    background: rgba(0,0,0,.42);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 14px 55px rgba(0,0,0,.35);
    height: 100%;
    overflow:hidden;
  }
  .earnTop{
    display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
    margin-bottom: 10px;
  }
  .earnTop b{ font-weight: 900; font-size: 14px; }
  .earnTop small{ display:block; color: var(--muted2); font-weight: 800; font-size: 12px; }
  .tagPct{
    font-weight: 900;
    font-size: 12px;
    padding: 8px 10px;
    border-radius: 999px;
    background: rgba(217,70,239,.12);
    border: 1px solid rgba(217,70,239,.28);
    color: rgba(217,70,239,.95);
    white-space:nowrap;
  }
  .earnCard p{ margin: 0 0 12px; color: var(--muted); font-size: 14.2px; line-height: 1.7; }
  .earnCard ul{ margin:0 0 14px; padding-left: 16px; color: rgba(255,255,255,.68); font-size: 13.6px; line-height:1.6; }
  .earnCard li{ margin: 6px 0; }
  .earnBtn{
    width:100%;
    border-radius: 14px;
    padding: 11px 14px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.03);
    color: var(--text);
    font-weight: 900;
    font-size: 13px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    text-decoration:none;
  }
  .earnBtn:hover{ border-color: rgba(217,70,239,.35); box-shadow: var(--glow); }

  /* Steps */
  .step{
    position:relative;
    border-radius: 18px;
    padding: 18px 18px 16px;
    background: rgba(0,0,0,.42);
    backdrop-filter: blur(10px);
    border:1px solid rgba(255,255,255,.08);
    box-shadow: 0 14px 55px rgba(0,0,0,.35);
    height:100%;
    overflow:hidden;
    text-align:center;
  }
  .step .num{
    position:absolute;
    right: 12px;
    top: -14px;
    width: 44px; height: 44px;
    border-radius: 999px;
    display:grid; place-items:center;
    font-weight: 900;
    background: linear-gradient(135deg, rgba(217,70,239,.55), rgba(124,58,237,.35));
    border:1px solid rgba(217,70,239,.50);
    box-shadow: 0 0 28px rgba(217,70,239,.35);
  }
  .step .iconBubble{ margin: 4px auto 12px; }
  .step h3{ margin:0 0 8px; font-size: 16.5px; font-weight: 900; }
  .step p{ margin:0; color: var(--muted); font-size: 14.2px; line-height: 1.7; }

  /* CTA */
  .cta{
    border-radius: 24px;
    border: 1px solid rgba(255,255,255,.08);
    background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
    box-shadow: 0 16px 60px rgba(0,0,0,.40);
    padding: 20px 20px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
  }
  .cta h3{ margin:0; font-size: 18px; font-weight: 900; }
  .cta p{ margin: 8px 0 0; color: var(--muted); font-size: 14.2px; line-height: 1.7; max-width: 760px; }

  /* Audit row */
  .audit{
    width:min(620px, 100%);
    border-radius: 18px;
    padding: 18px;
    background: rgba(0,0,0,.42);
    backdrop-filter: blur(10px);
    border:1px solid rgba(255,255,255,.08);
    box-shadow: 0 12px 50px rgba(0,0,0,.35);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin: 0 auto;
  }
  .audit .left{ display:flex; align-items:center; gap:12px; }
  .audit .name{ font-weight: 900; font-size: 16px; }
  .audit small{ display:block; color:var(--muted); margin-top:4px; font-size: 13.5px; }
  .check{
    width:32px; height:32px; border-radius:999px;
    display:grid; place-items:center;
    background: rgba(34,197,94,.12);
    border: 1px solid rgba(34,197,94,.35);
    color: var(--good);
  }

  /* FAQ accordion */
  .accordion-item{
    border:1px solid rgba(255,255,255,.08) !important;
    background: rgba(0,0,0,.42) !important;
    backdrop-filter: blur(10px);
    border-radius: 16px !important;
    overflow:hidden;
    box-shadow: 0 14px 55px rgba(0,0,0,.25);
    margin-bottom: 10px;
  }
  .accordion-button{
    background: transparent !important;
    color: rgba(255,255,255,.92) !important;
    font-weight: 900;
    border:0 !important;
    box-shadow:none !important;
    padding: 16px 16px;
  }
  .accordion-button::after{ filter: invert(1) opacity(.85); }
  .accordion-body{
    color: rgba(255,255,255,.70);
    line-height: 1.75;
    font-size: 14.2px;
    padding: 0 16px 16px;
  }

  /* Footer */
  footer{
    position:relative; z-index:1;
    padding: 44px 0 24px;
    border-top: 1px solid rgba(255,255,255,.06);
    background: linear-gradient(180deg, transparent, rgba(0,0,0,.22));
  }
  footer h4{
    margin:0 0 12px;
    font-size: 13px;
    letter-spacing:.10em;
    text-transform:uppercase;
    color: rgba(255,255,255,.78);
    font-weight: 900;
  }
  .footText{ color: var(--muted); font-size: 14px; line-height: 1.7; margin: 12px 0 0; }
  .links a{
    display:block;
    color: var(--muted);
    font-size: 14px;
    padding: 7px 0;
    text-decoration:none;
  }
  .links a:hover{ color: var(--text); }
  .chip{
    border-radius: 14px;
    padding: 10px 14px;
    border:1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.03);
    color: var(--muted);
    font-size: 14px;
    text-decoration:none;
    display:inline-block;
    margin: 6px 8px 0 0;
  }
  .chip:hover{ color:var(--text); border-color: rgba(217,70,239,.28); box-shadow: var(--glow); }
  .copyright{ margin-top: 18px; text-align:center; color: rgba(255,255,255,.42); font-size: 13px; }

  /* ===========================
     ✅ MOBILE NAV FIX (overlay + scroll)
     =========================== */
  @media (max-width: 991.98px){
    /* keep your dropdown look (panel styling stays) */
    .navbar-collapse{
      margin-top: 12px;
      padding: 14px 14px 16px;
      border-radius: 18px;
      border: 1px solid rgba(255,255,255,.08);
      background: rgba(0,0,0,.16);
      box-shadow: 0 16px 60px rgba(0,0,0,.45);
      backdrop-filter: blur(10px);
    }

    /* ✅ Make collapse a fixed overlay so page won't push/jump */
    #navMain.navbar-collapse{
      position: fixed;
      left: 12px;
      right: 12px;
      top: calc(var(--header-h) + 10px);
      bottom: 12px;

      margin-top: 0 !important;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }

    /* Bootstrap collapse animation fix */
    #navMain.collapsing{ height: auto !important; }

    .navbar-nav{ align-items: stretch !important; }
    .nav-link{ text-align:center; }
    .nav-link.active:after{ left: 30%; right: 30%; }
    .cta{ flex-direction:column; align-items:flex-start; }
  }

  @media (max-width: 575.98px){
    .wrap{ width: calc(100% - 26px); }
    main{ padding-top: 32px; }
    section{ padding: 40px 0; }
  }