/* ====== Stable Stella Theme ====== */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html:focus-within{scroll-behavior:smooth}
body{min-height:100vh;text-rendering:optimizeSpeed;line-height:1.5}
img,svg{display:block;max-width:100%}
button{font:inherit;cursor:pointer}
:root{
  --bg:#0c0b1a;--bg-2:#14122b;--fg:#e6e6f3;--muted:#a2a2bf;
  --brand:#8b7dff;--brand-2:#c084fc;--card:rgba(255,255,255,.06);
  --border:rgba(255,255,255,.12);--glass:rgba(255,255,255,.08);
  --shadow:0 20px 60px rgba(0,0,0,.35);
}
html,body{background:var(--bg);color:var(--fg);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif}

/* Backgrounds */
.bg-aurora{position:fixed;inset:-20vmax;filter: blur(80px);background:
 radial-gradient(40vmax 40vmax at 15% 10%, #1f1b4b88 10%, transparent 55%),
 radial-gradient(40vmax 40vmax at 85% 15%, #6d5dfc66 10%, transparent 55%),
 radial-gradient(40vmax 40vmax at 50% 70%, #c084fc55 10%, transparent 60%);
 z-index:-3;animation: drift 30s ease-in-out infinite alternate}
@keyframes drift{to{transform: translateY(-4%) translateX(2%)}}
.bg-noise{position:fixed;inset:0;pointer-events:none;opacity:.08;z-index:-1;
 background-image:url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%22160%22 height=%22160%22 viewBox=%220 0 160 160%22><filter id=%22n%22 x=%220%22 y=%220%22><feTurbulence type=%22fractalNoise%22 baseFrequency=%220.65%22 numOctaves=%222%22 stitchTiles=%22stitch%22/></filter><rect width=%22160%22 height=%22160%22 filter=%22url(%23n)%22 opacity=%220.15%22/></svg>');mix-blend-mode:overlay}
#bg-stars{position:fixed;inset:0;z-index:-2}

/* Util */
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.container{max-width:1120px;margin-inline:auto;padding-inline:1.25rem}
.section{padding:5rem 0}
.section--muted{background:linear-gradient(to bottom, transparent, rgba(255,255,255,.04))}
.section__title{font-size:clamp(1.6rem,4.2vw,2.4rem);font-weight:800;margin-bottom:.25rem}
.section__subtitle{color:var(--muted);margin-bottom:1.2rem}
.muted{color:var(--muted)}
.skip-link{position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:1rem;top:1rem;width:auto;height:auto;padding:.5rem .75rem;background:var(--bg-2);border:1px solid var(--border);border-radius:.5rem;z-index:999}

/* Nav */
.nav{position:sticky;top:0;backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid var(--border);z-index:50;background:linear-gradient(to bottom, rgba(12,11,26,.75), rgba(12,11,26,.3))}
.nav__inner{display:flex;align-items:center;justify-content:space-between;padding-block:.9rem}
.brand{display:flex;align-items:center;gap:.6rem}
.brand__logo{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,var(--brand),var(--brand-2));box-shadow:0 8px 30px rgba(139,125,255,.25)}
.brand__text{font-weight:800;letter-spacing:.2px}
.brand__tag{color:var(--muted);font-size:.8rem}
.nav__links{display:flex;align-items:center;gap:1rem}
.nav__links a{padding:.6rem .8rem;border-radius:8px;color:var(--muted)}
.nav__links a:hover{background:var(--glass);color:var(--fg)}
.nav__toggle{display:none;background:none;border:none;color:var(--fg);font-size:1.25rem}
.nav__mobile{display:none;gap:.5rem;padding:1rem;border-bottom:1px solid var(--border);background:var(--bg-2)}
.nav__mobile:not([hidden]){display:grid}
.nav__mobile a,.nav__mobile button{padding:.7rem .9rem;border-radius:8px;text-align:left}
@media (max-width:840px){.nav__links{display:none}.nav__toggle{display:block}}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:.6rem;padding:.85rem 1.1rem;border-radius:12px;border:1px solid var(--border);box-shadow:var(--shadow)}
.btn--primary{background:linear-gradient(135deg,var(--brand),var(--brand-2));border-color:transparent;font-weight:700}
.btn--glass{background:var(--glass)}
.btn--ghost{background:transparent;border-color:var(--border)}
.btn kbd{font-size:.8rem;padding:.15rem .35rem;border:1px solid var(--border);border-bottom-width:2px;border-radius:6px}

/* Hero */
.hero__inner{display:grid;grid-template-columns:1.2fr .8fr;gap:2.5rem;align-items:center}
.gradient-text{font-size:clamp(2.5rem,7vw,5rem);font-weight:800;line-height:1.05;background:linear-gradient(90deg,var(--brand) 0%,var(--brand-2) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.eyebrow{color:var(--muted);text-transform:uppercase;font-weight:700;letter-spacing:.14em;margin:.3rem 0 1rem}
.lead{font-size:1.125rem;color:var(--muted);max-width:48ch}
.actions{display:flex;gap:.8rem;margin:1.4rem 0 2rem;flex-wrap:wrap}
.hero__badges{display:grid;gap:.5rem;margin-top:1.25rem;list-style:none;padding:0;color:var(--muted)}
.hero__viz{position:relative;min-height:320px}
.constellation{width:100%;height:auto;stroke:var(--brand-2);fill:none;stroke-width:1.6;pointer-events:none}
.constellation .stars circle{fill:#fff;opacity:.85}
.constellation .links polyline{stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:6 10;animation: draw 6s linear infinite}
@keyframes draw{to{stroke-dashoffset:-140}}
.chip{position:absolute;display:inline-flex;align-items:center;gap:.4rem;padding:.4rem .6rem;border-radius:.6rem;font-size:.9rem;line-height:1;white-space:nowrap;background:var(--card);border:1px solid var(--border);backdrop-filter: blur(6px);z-index:1}
.chip{left:8%;bottom:10%}
.chip--alt{left:auto;right:8%;top:10%;bottom:auto}

/* Features */
.grid{display:grid;gap:1.2rem}
.grid--features{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1100px){.grid--features{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:720px){.grid--features{grid-template-columns:1fr}.hero__inner{grid-template-columns:1fr}}
.card{position:relative;background:var(--card);border:1px solid var(--border);border-radius:16px;padding:1.25rem;box-shadow:var(--shadow)}
.card .icon{width:48px;height:48px;display:grid;place-items:center;border-radius:10px;background:linear-gradient(135deg,var(--brand),var(--brand-2));margin:0 auto .8rem}
.card .icon i{color:white}
.card h3,.card p{ text-align:center }
.card ul{ list-style:disc outside; padding-left:1.2rem; margin-top:.6rem; text-align:left }
.card li{ margin:.25rem 0 }

/* Tags with commas */
.grid--tags{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:720px){.grid--tags{grid-template-columns:1fr}}
.tags .tag{display:inline-block}
.tags .tag:not(:last-child)::after{content:", "; color: var(--muted)}

/* Architecture */
.arch{display:grid;gap:1rem;justify-items:center;margin-top:.5rem}
.arch__lane{width:100%;max-width:960px;text-align:center}
.arch__arrow{font-size:1.2rem;display:grid;place-items:center;color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center}
.pill{display:inline-flex;align-items:center;gap:.4rem;padding:.5rem .8rem;border-radius:999px;background:var(--glass);border:1px solid var(--border)}

/* Demo */
.showcase{margin-top:1rem}
.card--demo{text-align:center}
.dashboard-preview{width:100%;max-height:520px;object-fit:cover;border-radius:12px;border:1px solid var(--border);box-shadow:0 8px 40px rgba(0,0,0,.4);transition:transform .3s ease}
.dashboard-preview:hover{transform:scale(1.02)}

/* Footer */
.footer{border-top:1px solid var(--border)}
.footer__inner{display:flex;align-items:center;justify-content:space-between;padding:1.2rem 0;gap:1rem;flex-wrap:wrap}
.footer .muted{color:var(--muted)}
.footer__links{display:flex;gap:1rem}

/* Command palette */
.cmdk{border:none;border-radius:16px;padding:0;background:transparent}
.cmdk:not([open]){display:none}
.cmdk[open]{display:grid;place-items:center;width:100vw;height:100vh}
.cmdk::backdrop{background:rgba(0,0,0,.45)}
.cmdk__box{width:min(720px,92vw);background:var(--bg-2);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);padding:0.75rem;margin:0 auto}
.cmdk__search{display:flex;align-items:center;gap:.6rem;border-bottom:1px solid var(--border);padding:.5rem}
.cmdk__search input{flex:1;background:transparent !important;border:none;color:var(--fg) !important;-webkit-text-fill-color:var(--fg) !important;caret-color:var(--fg);padding:.6rem;appearance:none;color-scheme:dark}
.cmdk__search input::placeholder{color:var(--muted)}
.cmdk__close{background:transparent;border:none;color:var(--muted)}
.cmdk__list{list-style:none;display:grid;padding:.5rem;margin:0;gap:.2rem;max-height:45vh;overflow:auto;color:var(--fg)}
.cmdk__list li{padding:.65rem .6rem;border-radius:10px;cursor:pointer;border:1px solid transparent;color:var(--fg)}
.cmdk__list li i{color:var(--muted)}
.cmdk__list li[aria-selected="true"], .cmdk__list li:hover{background:var(--glass);border-color:var(--border);color:var(--fg)}
.cmdk__list li *{color:inherit;fill:currentColor}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .constellation .links polyline{animation:none}
  .bg-aurora{animation:none}
}