/* styles.css — high-contrast, rich glow, zero deps */
:root{
  --bg:#0b0b11;              /* deep charcoal */
  --text:#ECEEF6;            /* bright text */
  --muted:#A8A9BC;           /* secondary text */
  --card:#14141f;            /* card base */
  --border:#2B2B3A;          /* soft border */
  --accent:#6C5CE7;          /* Abhishek: indigo */
  --accent2:#00D1FF;         /* Abhishek: cyan */
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, Apple Color Emoji, Segoe UI Emoji;
  color:var(--text);
  background:
    radial-gradient(1200px 1200px at 10% -20%, color-mix(in srgb, var(--accent) 35%, transparent), transparent 60%),
    radial-gradient(1100px 1100px at 110% 120%, color-mix(in srgb, var(--accent2) 35%, transparent), transparent 60%),
    var(--bg);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}

/* dial noise way down so it doesn't wash the UI */
.bg-noise{
  position:fixed; inset:0; pointer-events:none; opacity:.02;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="160" height="160"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23n)"/></svg>');
}

.container{ min-height:100dvh; display:grid; place-items:center; padding:clamp(16px,3vw,48px) }

.card{
  width:min(880px, 92vw);
  padding:clamp(22px,4vw,36px);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)) , var(--card);
  border:1px solid rgba(255,255,255,.12);
  border-radius:24px;
  backdrop-filter: blur(10px);
  box-shadow:
    0 30px 120px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.10);
  position:relative; isolation:isolate; overflow:hidden;
}

/* richer inner glow (slightly stronger than before) */
.card::after{
  content:""; position:absolute; inset:-2px; border-radius:inherit; z-index:-1;
  background: conic-gradient(from 0deg at 50% 50%, var(--accent), var(--accent2), var(--accent));
  filter: blur(26px); opacity:.25;
}

.logo{
  width:64px; height:64px; border-radius:16px; display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.04));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 10px 28px rgba(0,0,0,.55);
}
.logo svg{width:40px; height:40px}

h1{ margin:18px 0 10px; font-size:clamp(30px, 4vw, 46px); line-height:1.08; color:#F3F4F8 }
p.lead{ color:var(--muted); margin:0 0 18px; font-size:clamp(16px, 2.2vw, 20px) }

.pill{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid rgba(255,255,255,.14);
  padding:8px 12px; border-radius:999px;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  font-size:14px; color:#D5D7E5;
}
.spark{display:inline-block; width:.85em; height:.85em; border-radius:50%;
  background:radial-gradient(circle at 30% 30%, #fff, var(--accent) 60%, transparent 61%)}

.actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:18px}
.btn{
  appearance:none; border:1px solid rgba(255,255,255,.18);
  border-radius:14px; padding:12px 16px;
  background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.02));
  color:var(--text); font-weight:700; font-size:15px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  text-decoration:none; display:inline-flex; gap:8px; align-items:center;
}
.btn:hover{ transform: translateY(-2px); box-shadow:0 14px 36px rgba(0,0,0,.55); border-color:#ffffff30}
.btn.primary{
  border-color: transparent;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  box-shadow:0 10px 30px rgba(0,0,0,.55);
}

.grid{ margin-top:20px; display:grid; gap:16px; grid-template-columns:1fr }
@media (min-width:680px){ .grid{ grid-template-columns: 1.1fr .9fr } }

.card-illus{
  position:relative; aspect-ratio:1.2; border:1px dashed rgba(255,255,255,.10);
  border-radius:18px; display:grid; place-items:center; overflow:hidden;
}
.blob{
  position:absolute; width:180px; height:180px; border-radius:50%;
  filter: blur(22px); opacity:.65; mix-blend-mode:screen;
  background: radial-gradient(circle at 30% 30%, #fff, var(--accent) 45%, transparent 72%);
  animation: orbit 16s linear infinite;
}
.blob.b2{
  width:240px; height:240px;
  background: radial-gradient(circle at 30% 30%, #fff, var(--accent2) 45%, transparent 72%);
  animation-duration:24s;
}
@keyframes orbit{
  from{ transform: rotate(0deg) translateX(120px) rotate(0deg) }
  to  { transform: rotate(360deg) translateX(120px) rotate(-360deg) }
}

.footer{margin-top:26px; display:flex; justify-content:space-between; gap:12px; align-items:center; flex-wrap:wrap; color:#C9CBDA; font-size:13px}
.footer a{color:#EAEAF2; opacity:.9; text-decoration:none}
.footer a:hover{text-decoration:underline}

.hidden{display:none !important}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .bg-noise, .blob{animation:none}
  .btn{transition:none}
}