/*
Click nbfs://nbhost/SystemFileSystem/Templates/Licenses/license-default.txt to change this license
Click nbfs://nbhost/SystemFileSystem/Templates/Other/CascadeStyleSheet.css to edit this template
*/
/* 
    Created on : 11 Sept 2025, 13:10:17
    Author     : varma
*/

 :root{
      --bg:#0f1220;
      --bg-alt:#121633;
      --card:#171a2b;
      --border:#232749;
      --text:#e6e8ff;
      --muted:#9aa0c3;
      --accent:#7c9cff;   /* Indigo blue */
      --accent-2:#46d3c2; /* Celestial teal */
      --gold:#ffd166;     /* Cosmic gold */
      --shadow: 0 10px 30px rgba(0,0,0,.25);
      --radius: 14px;
    }

    * { box-sizing: border-box }
    html, body { margin:0; padding:0; background:var(--bg); color:var(--text); font-family:Poppins, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }
    img { max-width:100%; display:block }
    a { color:var(--accent); text-decoration:none }
    a:hover { text-decoration:underline }
    .wrap { max-width:1200px; margin:0 auto; padding:0 20px }

    /* Header */
    header.site {
      position:sticky; top:0; z-index:20; backdrop-filter: blur(6px);
      background:linear-gradient(180deg, rgba(124,156,255,.1), rgba(18,22,51,.6));
      border-bottom:1px solid var(--border);
    }
    .nav {
      display:flex; align-items:center; justify-content:space-between; padding:14px 0;
    }
    .brand { display:flex; gap:10px; align-items:center; font-weight:700; letter-spacing:.3px }
    .logo {
      width:34px; height:34px; border-radius:50%;
      background: conic-gradient(from 210deg, var(--accent), var(--gold), var(--accent-2), var(--accent));
      position:relative; box-shadow: var(--shadow);
    }
    .logo::after{
      content:""; position:absolute; inset:5px; border-radius:50%;
      background: radial-gradient(circle at 60% 40%, rgba(255,255,255,.85), rgba(255,255,255,.05) 45%, transparent 60%), #0f1220;
    }
    .menu { display:flex; gap:20px; align-items:center }
    .menu a { color:var(--text); opacity:.9 }
    .menu a:hover { color:#fff }
    .cta {
      padding:10px 14px; background:linear-gradient(180deg, var(--accent), #5b7cff);
      color:#0f1220; border-radius:10px; font-weight:700; box-shadow: var(--shadow);
    }
    .hamburger { display:none; cursor:pointer; padding:8px 10px; border:1px solid var(--border); border-radius:10px; background:#131735; color:var(--text) }

    @media (max-width: 880px){
      .menu { display:none }
      .hamburger { display:block }
      .menu.mobile { display:flex; flex-direction:column; gap:12px; padding:12px; border-top:1px solid var(--border) }
    }

    /* Hero */
    .hero {
      position:relative; overflow:hidden;
      background:
        radial-gradient(1000px 500px at -10% -20%, rgba(124,156,255,.12), transparent 60%),
        radial-gradient(800px 400px at 110% -10%, rgba(70,211,194,.10), transparent 60%),
        linear-gradient(180deg, rgba(18,22,51,.65), rgba(18,22,51,0));
    }
    .hero .wrap { padding:6px 20px 6px }
    .hero h1 { font-size:25px; margin:0 0 12px }
    .hero p.lead { color:var(--muted); margin:0 0 24px; max-width:720px }
    .hero-cta { display:flex; gap:12px; flex-wrap:wrap }
    .btn {
      display:inline-flex; align-items:center; gap:8px;
      padding:12px 16px; border-radius:12px; font-weight:700; border:1px solid transparent; cursor:pointer;
    }
    .btn.primary { background:linear-gradient(180deg, var(--accent), #5b7cff); color:#0f1220; box-shadow: var(--shadow) }
    .btn.secondary { background:#161a38; border-color:var(--border); color:var(--text) }
    .stars {
      position:absolute; inset:0; pointer-events:none; opacity:.25; background:
        radial-gradient(2px 2px at 15% 25%, #fff, transparent 60%),
        radial-gradient(1.5px 1.5px at 70% 15%, #fff, transparent 60%),
        radial-gradient(1.2px 1.2px at 40% 70%, #fff, transparent 60%),
        radial-gradient(1.8px 1.8px at 80% 60%, #fff, transparent 60%);
    }
   .tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
    .tag{
      background:var(--pill);
      border:1px solid #2a2f52;
      color:#cbd0ff;
      padding:6px 10px;
      border-radius:999px;
      font-size:12px;
    }
      .kv{display:grid;grid-template-columns:160px 1fr;gap:8px 12px}
    .kv div{padding:8px 0;border-bottom:1px dashed #242947}
    .kv div.label{color:var(--muted)}
  
    /* Feature strip */
    .features { padding:28px 0 10px; border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:#101433 }
    .feature-row { display:grid; gap:14px; grid-template-columns:repeat(3,1fr) }
    .feature { display:flex; gap:10px; align-items:flex-start; background:#121633; border:1px solid var(--border); border-radius:var(--radius); padding:14px }
    .feature .icon { width:34px; height:34px; border-radius:10px; display:grid; place-items:center; background:#1a1f47; color:var(--gold) }
    .feature h4 { margin:2px 0 4px; font-size:15px }
    .feature p { margin:0; color:var(--muted); font-size:13px }
    @media (max-width: 880px){ .feature-row { grid-template-columns:1fr } }

    /* Content sections */
    section { padding:10px 0 }
    .section-title { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px }
    .section-title h2 { margin:0; font-size:19px }
    .section-title p { margin:0; color:var(--muted) }

    
    /* Card grid */
    .grid { display:grid; gap:16px }
    .grid.cols-3 { grid-template-columns:repeat(3, 1fr) }
    .grid.cols-2 { grid-template-columns:repeat(2, 1fr) }
    @media (max-width: 1000px){ .grid.cols-3 { grid-template-columns:repeat(2, 1fr) } }
    @media (max-width: 700px){ .grid.cols-3, .grid.cols-2 { grid-template-columns:1fr } }

    .card {
      background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
      padding:18px; box-shadow: var(--shadow);
    }
    .card h3 { margin:0 0 8px; font-size:18px }
    .card p { margin:0; color:var(--muted) }

    /* Selector block */
    .selector {
      display:grid; gap:16px; grid-template-columns: 1.2fr .8fr;
      background:linear-gradient(180deg, rgba(124,156,255,.08), rgba(52,62,133,.05));
      border:1px solid var(--border); border-radius:var(--radius); padding:18px;
    }
    @media (max-width: 900px){ .selector { grid-template-columns:1fr } }
    .form-row { display:grid; gap:12px; grid-template-columns:1fr 1fr }
    @media (max-width: 700px){ .form-row { grid-template-columns:1fr } }
    label { display:block; font-size:12px; color:var(--muted); margin:0 0 6px 6px }
    select, input {
      width:100%; padding:12px; border-radius:12px; background:#111426; border:1px solid var(--border); color:var(--text);
    }
    select:focus, input:focus { outline:none; border-color:var(--accent) }

    .pills { display:flex; flex-wrap:wrap; gap:8px }
    .pill { padding:8px 12px; border-radius:999px; background:#14183b; border:1px solid var(--border); color:#cfd3ff; font-size:12px }
    .note { color:var(--muted); font-size:13px }

    /* Footer */
    footer {
      border-top:1px solid var(--border); background:#0e1124; color:var(--muted)
    }
    .footer-top { padding:28px 0; display:grid; gap:16px; grid-template-columns:2fr 1fr 1fr }
    @media (max-width: 900px){ .footer-top { grid-template-columns:1fr } }
    .footer-bottom { padding:14px 0; border-top:1px solid var(--border); display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap }
    .social { display:flex; gap:10px }
    .social a { color:var(--muted) }