/* style.css — shared styles for index, demo, docs (responsive + accessible) */
:root{
  --bg:#07070a;
  --muted:#bfc6d6;
  --card:#0f1116;
  --accent1:#5865f2;
  --accent2:#8b5cf6;
  --glass: rgba(255,255,255,0.04);
  --radius:14px;
}

/* base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial;
  color:#eaf0ff;background:var(--bg);-webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* animated background */
.bg-anim{
  position:fixed;inset:0;z-index:-3;
  background:linear-gradient(120deg,#0f1016 0%, #141622 30%, #1b0f30 60%, #07070a 100%);
  background-size:400% 400%;
  animation:shift 16s ease infinite;
}
@keyframes shift{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

/* subtle vignette for glow */
body::after{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:radial-gradient(800px 500px at 10% 10%, rgba(88,101,242,0.06), transparent 10%),
             radial-gradient(900px 400px at 90% 90%, rgba(139,92,246,0.04), transparent 8%);
}

/* nav */
.nav{position:sticky;top:0;z-index:50;background:rgba(5,6,8,0.35);backdrop-filter:blur(8px);border-bottom:1px solid rgba(255,255,255,0.03)}
.nav-inner{max-width:1200px;margin:0 auto;padding:14px 20px;display:flex;align-items:center;gap:16px;justify-content:space-between}
.brand{display:inline-flex;align-items:center;gap:10px;font-weight:800;color:#fff;text-decoration:none;font-size:1.05rem;position:relative;padding-left:8px}
.brand-glow{position:absolute;left:0;top:50%;transform:translateY(-50%);width:12px;height:12px;border-radius:50%;background:var(--accent1);filter:blur(8px);animation:pulse 2.8s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:translateY(-50%) scale(.85);opacity:.6}50%{transform:translateY(-50%) scale(1.4);opacity:1;filter:blur(12px)}}
.nav-toggle{display:none;background:transparent;border:0;padding:8px;border-radius:8px}
.hamburger{width:22px;height:2px;background:#ddd;display:inline-block;position:relative}
.hamburger::after,.hamburger::before{content:"";position:absolute;left:0;width:22px;height:2px;background:#ddd}
.hamburger::before{top:-7px} .hamburger::after{top:7px}

/* nav links */
.nav-links{display:flex;gap:14px;align-items:center}
.nav-links a{color:var(--muted);text-decoration:none;padding:8px 10px;border-radius:8px;font-weight:600}
.nav-links a:hover{color:#fff;text-shadow:0 0 10px rgba(88,101,242,0.28)}
.nav-links .cta{background:linear-gradient(90deg,var(--accent1),var(--accent2));color:white;padding:8px 12px;border-radius:10px}

/* hero */
.hero{padding:48px 20px 40px;display:flex;justify-content:center}
.hero-card{max-width:1200px;width:100%;display:grid;grid-template-columns:1fr 360px;gap:28px;align-items:center}
.hero-left{padding:28px}
.hero h1{font-size:2.2rem;line-height:1.03;margin:0 0 12px;color:#fff}
.lead{color:var(--muted);margin-bottom:18px;font-size:1.02rem}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-block;padding:10px 16px;border-radius:10px;text-decoration:none;font-weight:800}
.btn-primary{background:linear-gradient(90deg,var(--accent1),var(--accent2));color:#fff;box-shadow:0 12px 40px rgba(88,101,242,0.12)}
.btn-ghost{background:transparent;border:1px solid rgba(255,255,255,0.05);color:var(--muted)}

/* badges */
.badges{margin-top:14px;display:flex;gap:8px;flex-wrap:wrap}
.pill{background:rgba(255,255,255,0.03);color:var(--muted);padding:6px 10px;border-radius:999px;font-weight:700;font-size:.85rem}

/* panel preview */
.panel{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border-radius:12px;padding:14px;border:1px solid rgba(255,255,255,0.05);box-shadow:0 8px 30px rgba(11,12,15,0.6)}
.panel-header{display:flex;align-items:center;gap:8px;color:var(--muted);margin-bottom:10px}
.dot{width:10px;height:10px;border-radius:50%;background:#4b4b4b;display:inline-block;box-shadow:0 0 8px rgba(0,0,0,0.5)}
.dot.on{background:linear-gradient(90deg,var(--accent1),var(--accent2));box-shadow:0 0 12px rgba(139,92,246,0.22)}
.metrics{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.metrics li{display:flex;justify-content:space-between;font-weight:700;color:var(--muted)}

/* sections */
.section{padding:36px 16px}
.container{max-width:1100px;margin:0 auto}
.section-title{text-align:center;font-size:1.6rem;margin-bottom:6px}
.section-sub{text-align:center;color:var(--muted);margin-bottom:18px}

/* grid cards */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.card{background:var(--card);padding:18px;border-radius:12px;border:1px solid rgba(255,255,255,0.03);box-shadow:0 10px 30px rgba(8,9,12,0.6)}
.card h3{margin:0 0 8px;color:#fff}
.card p{margin:0;color:var(--muted)}

/* install */
.install-card{background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.008));padding:18px;border-radius:12px;border:1px solid rgba(255,255,255,0.03)}
.install-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
.install-box{background:var(--glass);padding:12px;border-radius:10px;border:1px solid rgba(255,255,255,0.03)}
.code{background:#05050a;padding:10px;border-radius:8px;color:#8affd1;overflow:auto;font-family:monospace;font-size:.95rem}

/* about */
.about p{color:var(--muted);max-width:900px;margin:10px auto 0;text-align:center}

/* footer */
.footer{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:18px 20px;border-top:1px solid rgba(255,255,255,0.02);background:linear-gradient(180deg,transparent,rgba(0,0,0,0.02))}
.footer a{color:var(--muted);text-decoration:none;font-weight:700}

/* responsive */
@media (max-width:980px){ .hero-card{grid-template-columns:1fr 320px} .grid{grid-template-columns:1fr 1fr} }
@media (max-width:760px){
  .nav-links{display:none}
  .nav-toggle{display:block}
  .hero-card{grid-template-columns:1fr;gap:18px}
  .grid{grid-template-columns:1fr}
  .install-grid{grid-template-columns:1fr}
}