:root{
      /* Core palette */
      --bg-0:#070b14;
      --bg-1:#0a1122;
      --bg-2:#0e1631;
      --glass:#0f1a35cc;           /* translucent card */
      --line:rgba(255,255,255,.08);
      --txt:#eaf1ff;
      --muted:#b9c7e6;
      --mono:#d6e3ff;

      /* Accents */
      --aqua:#6ee7f5;
      --blue:#60a5fa;
      --violet:#a78bfa;
      --rose:#f472b6;
      --lime:#a3e635;
      --gold:#fcd34d;

      /* Shadows & radii */
      --shadow: 0 10px 30px rgba(0,0,0,.25), 0 24px 80px rgba(49,76,140,.25);
      --radius: 18px;
      --radius-sm: 12px;
      --radius-lg: 26px;

      /* Layout */
      --container: 1160px;
      --pad: clamp(16px,2.2vw,24px);

      /* Fonts */
      --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
      --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    }
    *{box-sizing:border-box}
    html,body{margin:0;padding:0}
    body{
      font-family:var(--font);
      color:var(--txt);
      background:
        radial-gradient(1200px 800px at -10% -20%, rgba(96,165,250,.18) 0%, transparent 60%),
        radial-gradient(1000px 700px at 110% -10%, rgba(167,139,250,.16) 0%, transparent 60%),
        radial-gradient(1000px 700px at 50% 120%, rgba(244,114,182,.12) 0%, transparent 60%),
        linear-gradient(180deg, var(--bg-1), var(--bg-2));
      min-height:100vh;
      text-rendering: optimizeLegibility;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    a{color:var(--aqua);text-decoration:none}
    a:hover{text-decoration:underline}

 
    .aurora{
      position:fixed; inset:-20% -10% auto -10%; height:55vh; pointer-events:none; z-index:-1;
      background:
        radial-gradient(60% 120% at 20% 40%, rgba(110,231,245,.35) 0%, transparent 60%),
        radial-gradient(60% 120% at 70% 20%, rgba(96,165,250,.35) 0%, transparent 60%),
        radial-gradient(60% 120% at 60% 90%, rgba(167,139,250,.32) 0%, transparent 60%);
      filter: blur(40px) saturate(130%);
      animation: drift 24s ease-in-out infinite alternate;
    }
    @keyframes drift{
      from{transform:translate3d(0,0,0) scale(1)}
      to{transform:translate3d(0,-2%,0) scale(1.02)}
    }

    /* Header */
    .header{
      position:sticky; top:0; z-index:50;
      backdrop-filter: blur(10px) saturate(160%);
      background: linear-gradient(180deg, rgba(10,17,34,.8), rgba(10,17,34,.45));
      border-bottom:1px solid var(--line);
    }
    .wrap{max-width:var(--container);margin-inline:auto;padding:12px var(--pad)}
    .nav{display:flex;align-items:center;justify-content:space-between;gap:12px}
    .brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.2px}
    .brand .gem{
      width:16px;height:16px;border-radius:6px;
      background: conic-gradient(from 0deg, var(--aqua), var(--blue), var(--violet), var(--rose), var(--aqua));
      box-shadow:0 0 0 6px rgba(110,231,245,.10), 0 0 26px rgba(96,165,250,.35);
    }
    .links{display:flex;gap:16px;align-items:center}
    .link{color:#d7e4ff;font-weight:600}
    .link:hover{color:#fff}

    /* Hero */
    .hero{padding: clamp(56px, 11vw, 140px) 0 40px; text-align:center; position:relative}
    .kicker{
      display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px;
      background:linear-gradient(180deg, rgba(110,231,245,.18), rgba(96,165,250,.16));
      color:#d7f8ff; font-weight:700; font-size:.9rem; border:1px solid var(--line);
    }
    .hero h1{
      margin:12px 0 8px; line-height:1.04; letter-spacing:.2px;
      font-size: clamp(32px, 6.4vw, 72px);
      background: linear-gradient(90deg, var(--aqua), var(--blue), var(--violet), var(--rose), var(--aqua));
      -webkit-background-clip:text; background-clip:text; color:transparent;
      animation: hue 10s ease-in-out infinite alternate;
    }
    @keyframes hue{from{filter:hue-rotate(0)} to{filter:hue-rotate(24deg)}}
    .lead{color:var(--muted);max-width:880px;margin:0 auto 22px;font-size:clamp(16px,2.2vw,20px)}
    .cta{
      display:inline-flex; align-items:center; gap:10px;
      background:linear-gradient(180deg, var(--blue), #4f8ff5);
      color:#fff; border:0; border-radius:999px; padding:14px 22px;
      font-weight:800; letter-spacing:.2px; cursor:pointer;
      box-shadow:0 12px 34px rgba(96,165,250,.35);
      transform:translateZ(0); transition:transform .08s ease, filter .2s ease;
    }
    .cta:hover{transform:translateY(-1px); filter:brightness(1.06)}

    /* Sections */
    section{padding: clamp(32px, 5vw, 64px) 0}
    .grid{display:grid; gap:clamp(12px,2vw,18px); grid-template-columns:repeat(12,1fr)}
    .col-12{grid-column:span 12}
    .col-6{grid-column:span 6}
    .col-4{grid-column:span 4}
    @media (max-width:980px){.col-6,.col-4{grid-column:span 12}}

    .card{
      background: linear-gradient(180deg, var(--glass), #0e1b3bcc);
      border:1px solid var(--line);
      border-radius:var(--radius);
      box-shadow:var(--shadow);
      padding: clamp(16px, 2.2vw, 22px);
    }
    .title{font-size:clamp(22px,3.1vw,30px);margin:0 0 8px}
    .muted{color:var(--muted)}

    /* Form */
    .form{display:grid; gap:12px; grid-template-columns:repeat(12,1fr); align-items:end}
    .field{grid-column:span 6}
    .field-full{grid-column:span 12}
    label{display:block; font-weight:800; margin-bottom:6px; color:#e9f3ff}
    input[type="text"]{
      width:100%; padding:12px 14px; border-radius:14px; border:1px solid var(--line);
      outline:none; background:#0b142d; color:#eaf1ff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.03);
      transition: box-shadow .15s ease, border-color .15s ease;
    }
    input[type="text"]::placeholder{color:#9db3df}
    input[type="text"]:focus{border-color:#78dcf3; box-shadow:0 0 0 4px rgba(110,231,245,.20)}
    .btn{display:inline-flex; align-items:center; gap:8px; border-radius:14px; border:1px solid var(--line); background:#0b142d; padding:12px 16px; font-weight:800; color:#eaf1ff; cursor:pointer}
    .btn.secondary{background:#0a1329}
    .btn.primary{border-color:rgba(96,165,250,.45); background:linear-gradient(180deg, var(--blue), #4f8ff5); color:#fff}
    .btn.primary:hover{filter:brightness(1.06)}
    pre.output{
      white-space:pre-wrap; padding:12px 14px; background:#091229; border:1px solid var(--line);
      border-radius:14px; min-height:120px; font-family:var(--mono); color:var(--mono)
    }

    /* Details/FAQ */
    details summary{cursor:pointer;user-select:none}
    details summary::-webkit-details-marker{display:none}
    .kbd{background:#0c1733;border:1px solid #0f214d;border-radius:10px;padding:2px 6px;color:#dbe8ff}

    /* Footer */
    footer{border-top:1px solid var(--line); background:linear-gradient(180deg,#0a1227, #0a1122)}
    footer p{color:#cfe2ff}

    /* Reduced motion */
    @media (prefers-reduced-motion: reduce){
      .aurora,.cta{animation:none}
    }