/* Made by Raze (Akshat Sharma).*/
:root{
    --bg:#0b0b12;
    --bg-2:#0e0e18;
    --fg:#eae9ff;
    --muted:#a9a6d6;
    --brand:#8a2be2;
    --brand-2:#5a21c9;
    --accent:#00ffff;
    --glass:rgba(255,255,255,.06);
    --glass-2:rgba(255,255,255,.08);
    --stroke:rgba(255,255,255,.15);
    --shadow:0 10px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
    --radius:20px;
    --radius-lg:28px;
    --space: clamp(14px, 1.6vw, 22px);
  }

  /* ====== Neon Spinner Loader ====== */
.spinner {
  background-image: linear-gradient(rgb(186, 66, 255) 35%, rgb(0, 225, 255));
  width: 100px;
  height: 100px;
  animation: spinning82341 1.7s linear infinite;
  text-align: center;
  border-radius: 50%;
  filter: blur(1px);
  box-shadow: 0px -5px 20px 0px rgb(186, 66, 255),
              0px 5px 20px 0px rgb(0, 225, 255);
  margin: 30px auto 0; /* centers spinner under text */
}

.logo-wrap {
  position: relative;
  display: inline-block;
}

/* Logo stays above */
.logo-wrap img {
  position: relative;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  object-fit: cover;
  -webkit-mask-image: radial-gradient(circle, white 99%, transparent 100%);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: cover;
  mask-image: radial-gradient(circle, white 99%, transparent 100%);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: cover;
  z-index: 2;
}


/* Spinner is centered BEHIND the logo */
.logo-wrap .spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 110px;
  height: 110px;
  margin: -55px 0 0 -55px; /* perfectly center */
  border-radius: 50%;
  animation: spinning82341 1.7s linear infinite;
  z-index: 1;
}

.logo-wrap .spinner1 {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: rgb(36, 36, 36);
  filter: blur(10px);
}


.logo-wrap .spinner1 {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: rgb(36, 36, 36);
  filter: blur(10px);
}

@keyframes spinning82341 {
  to { transform: rotate(360deg); }
}

  html{scroll-behavior:smooth}
  body{
    margin:0;
    font-family:"Outfit",system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial;
    color:var(--fg);
    background: radial-gradient(1200px 800px at 20% -10%, #31016344, transparent 50%),
                radial-gradient(1200px 800px at 120% 10%, #00ffff11, transparent 50%),
                var(--bg);
    overflow-x:hidden;
  }

  /* ====== Utility ====== */
  .container{width:min(1200px, 92%); margin-inline:auto}
  .grid{display:grid; gap: var(--space)}
  .pill{padding:8px 14px; border:1px solid var(--stroke); border-radius:999px; background:var(--glass); width:fit-content}
  .subtle{color:var(--muted)}
  .btn{
    display:inline-flex; align-items:center; gap:10px;
    padding:14px 18px; border-radius:14px; font-weight:700; letter-spacing:.3px;
    text-decoration:none; color:#0b0b0f; background:#fff;
    box-shadow: var(--shadow);
    transition:.25s ease;
  }
  .btn:hover{transform:translateY(-2px); box-shadow: 0 16px 40px rgba(0,0,0,.45)}
  .btn.primary{background: linear-gradient(135deg, var(--brand), var(--accent)); color:white}
  .btn.ghost{background:transparent; color:var(--fg); border:1px solid var(--stroke)}
  .chip{display:inline-flex; align-items:center; gap:10px; background:var(--glass); border:1px solid var(--stroke); border-radius:999px; padding:10px 14px}

  /* ====== Navbar ====== */
  .nav{
    position:sticky; top:0; z-index:50; backdrop-filter: blur(14px);
    border-bottom:1px solid var(--stroke); background:linear-gradient(180deg, rgba(10,8,24,.75), rgba(10,8,24,.35));
  }
  .nav .row{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
  .brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--fg)}
  .brand img{width:40px; height:40px; border-radius:10px; box-shadow:0 0 0 2px #ffffff10}
  .brand span{font-weight:900; letter-spacing:.5px}
  .navlinks{display:flex; align-items:center; gap:14px}
  .navlinks a{color:var(--fg); text-decoration:none; padding:10px 12px; border-radius:10px; border:1px solid transparent}
  .navlinks a:hover{border-color:var(--stroke); background:var(--glass)}
  .menu-btn{display:none}

  @media (max-width: 880px){
    .menu-btn{display:inline-flex}
    .navlinks{display:none}
    .navlinks.open{display:flex; flex-direction:column; position:absolute; top:64px; right:4%; background:var(--bg-2); border:1px solid var(--stroke); padding:12px; border-radius:14px; width:min(280px, 90vw)}
  }

  /* ====== Hero ====== */
  .hero{
    position:relative; padding: 84px 0 64px; overflow:hidden; isolation:isolate;
  }
  .bg-blobs{
    position:absolute; inset:-10% -20% auto -20%; height:70vh; z-index:-1; filter:blur(40px) saturate(140%);
    background:
      radial-gradient(400px 300px at 10% 20%, rgba(138,43,226,.35), transparent 50%),
      radial-gradient(500px 360px at 80% 30%, rgba(0,255,255,.25), transparent 50%),
      radial-gradient(420px 340px at 50% 80%, rgba(138,43,226,.25), transparent 60%);
    mask: radial-gradient(80% 60% at 50% 30%, black 60%, transparent 100%);
  }
  .hero .wrap{
    display:grid; grid-template-columns: 1.15fr .85fr; gap: clamp(16px, 4vw, 46px); align-items:center;
  }
  .hero h1{font-size: clamp(36px, 7vw, 64px); line-height:1.02; margin:0 0 12px; letter-spacing:.3px}
  .hero p{font-size: clamp(16px, 2.3vw, 20px); margin:0 0 22px; color:var(--muted)}
  .cta{display:flex; gap:12px; flex-wrap:wrap}
  .hero-card{
    background:linear-gradient(180deg, var(--glass-2), transparent);
    border:1px solid var(--stroke);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: clamp(14px, 2.5vw, 24px);
    position:relative;
  }
  .stat{
    display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:12px;
    background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
    border:1px solid var(--stroke); width:fit-content
  }
  .sparkle{
    position:absolute; inset:auto 10% -18% auto; width:160px; aspect-ratio:1;
    background: conic-gradient(from 0deg, var(--accent), transparent 30%, var(--brand) 60%, transparent 80%);
    filter: blur(14px) brightness(1.2); opacity:.35; border-radius:50%;
    animation: spin 8s linear infinite;
  }
  @keyframes spin{to{transform:rotate(1turn)}}



/* Smooth accordion (JS will handle height transitions for extra smoothness) */
details[open] summary ~ *{animation: sweep 1.7s ease-in-out}
details summary {
    cursor: pointer;
    transition: color 0.3s ease;
}
details {
    overflow: hidden;
    transition: max-height 0.5s ease-in-out, padding 0.5s ease-in-out;
}


details[open] {
    padding-bottom: 20px;
}

@keyframes sweep {
    0% {
        opacity: 0;
        transform: translateY(-10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0px);
    }
}
.support-section {
    text-align:center;
    padding:40px 20px;
    background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
    border-top:2px solid var(--stroke);
    margin-top:40px;
  }
  .support-section h3 {font-size:22px;margin-bottom:12px;color:var(--fg)}
  .support-section p {color:var(--muted);margin-bottom:18px}
  .support-buttons {display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
  .support-buttons a {text-decoration:none}
  /* ====== Features ====== */
  .section{padding: 56px 0}
  .section h2{font-size: clamp(28px, 5vw, 40px); margin:0 0 12px}
  .section p.lead{color:var(--muted); margin-top:0}
  .feature-grid{grid-template-columns: repeat(3, 1fr)}
  .card{
    padding:20px; border:1px solid var(--stroke); border-radius: var(--radius);
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
    box-shadow: var(--shadow);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    min-height: 180px;
  }
  .card:hover{transform:translateY(-4px); border-color:#ffffff22; box-shadow:0 16px 40px rgba(0,0,0,.45)}
  .card h3{margin:0 0 6px}
  .card p{margin:0}
  .card .icon{font-size:26px; width:44px; height:44px; display:grid; place-items:center; border-radius:12px;
    background:linear-gradient(135deg, var(--brand), var(--accent)); color:white; box-shadow: inset 0 0 0 2px #ffffff15; margin-bottom:10px
  }

  @media (max-width: 920px){
    .hero .wrap{grid-template-columns:1fr}
    .feature-grid{grid-template-columns: 1fr 1fr}
  }
  @media (max-width: 620px){
    .feature-grid{grid-template-columns: 1fr}
  }

  /* ====== Commands ====== */
  details.group{border:1px solid var(--stroke); border-radius:16px; padding:14px 16px; background:var(--glass); box-shadow: var(--shadow)}
  details.group + details.group{margin-top:14px}
  details.group summary{list-style:none; cursor:pointer; display:flex; align-items:center; gap:12px; font-weight:700}
  details.group summary::-webkit-details-marker{display:none}
  .badge{padding:6px 10px; border:1px solid var(--stroke); background:var(--glass-2); border-radius:999px; font-size:12px; color:var(--muted)}
  .cmds{columns: 2; column-gap: 22px; margin-top: 10px}
  .cmds li{break-inside:avoid; padding:6px 0; color:var(--muted)}
  @media (max-width: 700px){ .cmds{columns:1} }

  /* ====== Footer ====== */
    /* Footer like image */
    footer{background:#0a0a14;padding:50px 0 20px;border-top:2px solid var(--stroke)}
    footer .container{max-width:1200px;margin:auto;padding:0 20px;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:30px}
    footer h3{color:#fff;margin-bottom:14px;font-size:18px;position:relative}
    footer h3::after{content:"";position:absolute;bottom:-6px;left:0;width:40px;height:2px;background:var(--accent)}
    footer ul{list-style:none;padding:0;margin:0}
    footer ul li{margin:10px 0}
    footer ul li a{color:var(--muted);text-decoration:none;transition:.3s}
    footer ul li a:hover{color:var(--accent)}
    footer .socials{display:flex;gap:12px;margin-top:10px}
    footer .socials a{color:#fff;font-size:18px;transition:.3s}
    footer .socials a:hover{color:var(--accent)}
    footer .bottom{text-align:center;color:var(--muted);margin-top:40px;font-size:14px}
  /* ====== Tiny Loader (optional) ====== */
  

  #loader.hide{opacity:0; visibility:hidden}
  .loader-logo{display:grid; place-items:center; gap:8px; text-align:center}
  .loader-logo img,
.logo-wrap img {
  width:114px;
  height:114px;
  border-radius:50%; /* full circle */
  object-fit: cover;
  z-index: 2;
}


  .loader-logo .hello{
    font-size: clamp(22px, 4vw, 32px); font-weight:900;
    background: linear-gradient(90deg, var(--accent), var(--brand));
    -webkit-background-clip:text; background-clip:text; color:transparent;
    letter-spacing:.5px;
    background-size: 200% 100%;
    background-position: -100% 0;

  }

  #namasteText {
    font-family: 'Noto Sans Devanagari', sans-serif;
    font-size: 3rem;
    font-weight: bold;
    background: linear-gradient(90deg, #00ffff, #8a2be2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 4px 10px rgba(0,0,0,0.3);
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3));
  
    /* Hide initially with clip-path */
    clip-path: inset(0 100% 0 0);
    animation: revealMask 1.5s ease forwards;
  }
  
  /* Reveal animation only for नमस्ते */
  @keyframes revealMask {
    from { clip-path: inset(0 100% 0 0); }
    to   { clip-path: inset(0 0 0 0); }
  }
  
  /* Rest text stays static */
  .restText {
    font-size: 3rem;
    font-weight: bold;
    background: linear-gradient(90deg, #8a2be2, #00ffff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  

  /* ====== Nice scroll ====== */
  ::-webkit-scrollbar{width:12px}
  ::-webkit-scrollbar-thumb{background:linear-gradient(180deg, #2e2b59, #1a1833); border:2px solid #0c0c15; border-radius:8px}
  ::-webkit-scrollbar-track{background:#0c0c15}

  .page{display:none}
  .page.active{display:block}
  .page-card{max-width:1100px; margin:40px auto; padding:24px; border:1px solid var(--stroke); border-radius:18px; background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); box-shadow:var(--shadow)}
  .page h1{margin:0 0 6px}
  .page .subtle{color:var(--muted)}
  .policy-frame{width:100%; height:70vh; border:0; border-radius:14px; background:#0b0b12}
  
  
  /* ====== Loader (min 1.7s) ====== */
  #loader{position:fixed; inset:0; display:grid; place-items:center; background: radial-gradient(1200px 800px at 50% -10%, #310163, transparent 60%), #08070f; z-index:9999; transition:opacity .45s ease, visibility .45s ease}
  #loader.hide{opacity:0; visibility:hidden}