:root{
      --bg:#06010a; --bg2:#0a0211;
      --text: rgba(255,255,255,.92);
      --muted: rgba(255,255,255,.70);
      --accent:#d946ef; --accent2:#7c3aed;
      --glow: 0 0 0 1px rgba(255,255,255,.06), 0 0 28px rgba(217,70,239,.30);
      --max: 1180px;
    }
    *{ 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%);
    }
    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;
    }
    main, header, footer, section, .wrap{ max-width:100vw; overflow-x:clip; }
    .wrap{ width:min(var(--max), calc(100% - 40px)); margin-inline:auto; }

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

    /* Navbar */
    :root{ --header-h: 72px; }  /* JS isko auto set karega */

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);
}

/* header ke niche content aaye */
body{ padding-top: var(--header-h); }

/* anchor links/header overlap fix */
html{ scroll-padding-top: var(--header-h); }

    .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); }

    .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);
    }

    /* Sections */
    main{ position:relative; z-index:1; padding: 44px 0 72px; }
    main::before{
      content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
      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));
    }
    main > .wrap{ position:relative; z-index:1; }
    section{ padding: 48px 0; position:relative; }
    section::before{ content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
      background: linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.32)); }
    section > .wrap{ position:relative; z-index:1; }

    .hero{ padding-top: 12px; padding-bottom: 18px; }
    .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, 56px); font-weight: 900; letter-spacing: -.02em; margin: 16px 0 8px; text-align:center; }
    .title span{ color: var(--accent); }
    .subtitle{ color: var(--muted); margin:0 auto; font-size: 15.5px; line-height: 1.8; max-width: 980px; text-align:center; }

    .searchBar{
      margin-top: 18px; border-radius: 18px; border: 1px solid rgba(255,255,255,.10);
      background: rgba(0,0,0,.22); box-shadow: 0 16px 60px rgba(0,0,0,.35);
      padding: 10px; display:flex; gap:10px; align-items:center; flex-wrap:wrap;
    }
    .searchBar input{
      flex: 1 1 320px; border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.03);
      color: var(--text); border-radius: 14px; padding: 12px 14px; outline:none; font-weight: 700;
    }
    .searchBar input::placeholder{ color: rgba(255,255,255,.45); }
    .pill{
      border-radius: 999px; padding: 10px 12px; border: 1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.03); color: rgba(255,255,255,.70);
      font-weight: 800; font-size: 13px; cursor:pointer; user-select:none;
    }
    .pill.active{
      color: rgba(255,255,255,.95); border-color: rgba(217,70,239,.32);
      background: rgba(217,70,239,.14);
      box-shadow: 0 0 0 1px rgba(255,255,255,.05), 0 0 22px rgba(217,70,239,.16);
    }

    .secHead{ text-align:center; margin-bottom: 18px; }
    .secHead h2{ margin:0 0 10px; font-size: clamp(24px, 3vw, 38px); 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; }

    .resCard{
      border-radius: 18px; padding: 16px; background: rgba(0,0,0,.42);
      border:1px solid rgba(255,255,255,.08); box-shadow: 0 14px 55px rgba(0,0,0,.35);
      height: 100%; overflow:hidden; position:relative; backdrop-filter: blur(10px);
      display:flex; flex-direction:column; gap:12px;
    }
    .resCard::before{
      content:""; position:absolute; inset:0; pointer-events:none;
      background: linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.28)); opacity:.9;
    }
    .resCard > *{ position:relative; z-index:1; }
    .resTop{ display:flex; gap:12px; align-items:flex-start; justify-content:space-between; }
    .resLeft{ display:flex; gap:12px; align-items:flex-start; }
    .iconBubble{
      width: 48px; height: 48px; border-radius: 16px; 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); flex:0 0 auto;
    }
    .resTitle{ margin:0; font-weight: 900; font-size: 15.5px; line-height:1.2; }
    .resSub{ margin: 4px 0 0; color: rgba(255,255,255,.62); font-weight: 700; font-size: 13px; }
    .meta{ margin: 10px 0 0; color: rgba(255,255,255,.55); font-size: 12.5px; font-weight: 800; display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
    .dotMini{ width:6px; height:6px; border-radius:999px; background: rgba(217,70,239,.85); box-shadow: 0 0 14px rgba(217,70,239,.35); display:inline-block; }
    .tag{
      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;
    }
    .resBtn{
      margin-top:auto; 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;
    }
    .resBtn:hover{ border-color: rgba(217,70,239,.35); box-shadow: var(--glow); }

    .videoCard{
      border-radius: 18px; overflow:hidden; border:1px solid rgba(255,255,255,.08);
      background: rgba(0,0,0,.42); box-shadow: 0 14px 55px rgba(0,0,0,.35);
      position:relative; height:100%; backdrop-filter: blur(10px);
    }
    .thumb{
      aspect-ratio: 16 / 9;
      background:
        radial-gradient(480px 240px at 30% 30%, rgba(217,70,239,.22), transparent 55%),
        radial-gradient(520px 260px at 75% 35%, rgba(124,58,237,.18), transparent 58%),
        linear-gradient(135deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
      border-bottom: 1px solid rgba(255,255,255,.08); position:relative;
    }
    .play{
      position:absolute; inset:auto auto 14px 14px; display:inline-flex; align-items:center; gap:10px;
      padding: 10px 12px; border-radius: 999px; border:1px solid rgba(255,255,255,.12);
      background: rgba(0,0,0,.35); color: rgba(255,255,255,.90); font-weight: 900; font-size: 12.5px;
      box-shadow: 0 12px 40px rgba(0,0,0,.35);
    }
    .vBody{ padding: 14px; }
    .vTitle{ margin:0; font-weight: 900; font-size: 15px; line-height: 1.3; }
    .vSub{ margin: 6px 0 0; color: rgba(255,255,255,.62); font-weight: 700; font-size: 13px; }

    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; }

    @media (max-width: 991.98px){
      .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);
      }
      .navbar-nav{ align-items: stretch !important; }
      .nav-link{ text-align:center; }
      .nav-link.active:after{ left: 30%; right: 30%; }
      .searchBar{ padding: 12px; }
    }
    @media (max-width: 575.98px){
      .wrap{ width: calc(100% - 26px); }
      main{ padding-top: 32px; }
      section{ padding: 40px 0; }
    }