:root{
  --bg1:#0f172a;         /* slate-900 */
  --bg2:#0a1a4a;         /* deep blue tint */
  --text:#ffffff;
  --muted:#cbd5e1;       /* slate-300 */
  --muted-2:#94a3b8;     /* slate-400/500 */
  --accent:#7777ff;      /* brand */
  --accent-2:#6666ee;
  --card: rgba(15,23,42,0.6);
  --stroke: rgba(51,65,85,0.6); /* slate-700/800 */
  --glass: rgba(2,6,23,0.45);   /* slate-950/45% */
  --radius: 16px;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box;}
html,body{height:100%; }
body{ margin:0; color:var(--text); background: var(--bg1); font: 400 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif; }

.bg-grad{background: radial-gradient(1200px 800px at 0% 0%, #0b122e 0%, transparent 60%), radial-gradient(1200px 800px at 100% 100%, #0b122e 0%, transparent 60%), linear-gradient(135deg, var(--bg1), #0b1a38 45%, var(--bg2));}
.container{ width:min(1150px,92vw); margin:0 auto; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
.b{font-weight: bold;}
button,a,.click{-webkit-tap-highlight-color:rgba(0,0,0,0);outline:0;outline-offset:0;cursor:pointer;}
.muted-text{color: var(--muted);}
/* Header */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:50; transition:background .3s ease;
  background:transparent; border-bottom:1px solid transparent;
}
.site-header.scrolled{ background:rgba(2,6,23,.55); backdrop-filter: blur(8px) saturate(120%); border-bottom-color: rgba(99,102,241,.25); }
.header-inner{ display:flex; align-items:center; justify-content:space-between; height:64px; }
.brand{ display:flex; align-items:center; gap:12px; }
.brand-logo{ width:auto; height:26px; }
.brand-logo.sm{ height:32px; }
.brand-name{ font-weight:800; font-size:18px; letter-spacing:.2px; }
.gradient-text{
  background: linear-gradient(90deg, var(--accent), #7aa2ff);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.nav{ display:flex; gap:8px; align-items:center; }
.btn.chip{
  display:inline-flex; align-items:center; gap:8px; height:36px; padding:0 16px; border-radius:999px;
  border:1px solid transparent; color:#e5e7eb; background:transparent; transition:.2s; font-weight: normal;
}
.btn.chip:hover{ color:var(--accent); background: rgba(119,119,255,.12); }
.btn.chip.primary{ background: var(--accent); color:#fff; box-shadow: 0 0 16px rgba(119,119,255,.35); }
.btn.chip.primary:hover{ background: var(--accent-2);}
.icon{ width:16px; height:16px; stroke: currentColor; fill:none; stroke-width:2; }
.icon-sm{ width:16px; height:16px; }
.icon-lg{ width:32px; height:32px; }
.icon-xl{ width:40px; height:40px; }
.icon-xxl{ width:48px; height:48px; }
.text-accent{ color: var(--accent); }
.text-blueC{ color:#60a5fa; }
.text-indigo{ color:#818cf8; }
.mr-2{ margin-right:8px; } .ml-2{ margin-left:8px;}
.burger{ display:none; background:none; border:0; padding:8px; cursor:pointer; }
.burger span{ display:block; width:24px; height:2px; background:#e5e7eb; margin:4px 0;}
/**********************************/
@media (max-width: 640px){
::-webkit-scrollbar{width: 0;}
.nav{position:absolute; right:0; top:64px; width: 100%; background: var(--bg2); border:1px solid rgba(119,119,255,.25); padding:10px; display:none; flex-direction:column; }
  .nav.open{ display:flex; }
  .nav .btn{width: 100%; justify-content: left; border-radius: 12px;}
  .burger{ display:block; }
  .brand-logo{ height:22px; }
}