:root{
  --bg-1: #0b0f1a;        /* deep space */
  --bg-2: #121829;        /* night indigo */
  --fg:   #e7ecf5;        /* soft white */
  --muted:#aab3c9;
  --pri:  #7dd3fc;        /* cyan (AI tech vibe) */
  --sec:  #c084fc;        /* violet */
  --accent:#f472b6;       /* rose */
  --glass: rgba(255,255,255,0.06);
  --border: rgba(255,255,255,0.12);
  --shadow: 0 10px 30px rgba(0,0,0,0.45);
}

*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0;
  background: radial-gradient(1200px 800px at 20% 10%, #182143 0%, transparent 60%),
              radial-gradient(900px 600px at 80% 90%, #261a3e 0%, transparent 60%),
              linear-gradient(180deg, var(--bg-1), var(--bg-2));
  color:var(--fg);
  font: 16px/1.6 Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Apple Color Emoji","Segoe UI Emoji";
  letter-spacing: 0.2px;
}

a, a:visited,a:focus,a:hover,a:active  {
  color:var(--fg);
  text-decoration: normal;
}

/* Background SVG layer */
.bg{
  position: fixed; inset: 0; z-index: -2;
  pointer-events:none;
}
.bg-svg{
  position:absolute;
  inset:auto 0 0 auto;
  width:min(70vmax, 1200px);
  opacity:0.25;
  filter: blur(0.2px);
}

/* Top brand bar */
.site-header{
  position:fixed; top:0; left:0; right:0;
  display:flex; justify-content:center;
  padding:14px 20px;
  backdrop-filter: blur(10px);
  background: linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0));
  z-index:5;
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.brand{
  display:flex; align-items:center; gap:14px;
  padding:8px 14px; border-radius:14px;
  background: var(--glass);
  border:1px solid var(--border);
  box-shadow: var(--shadow);
}
.logo{height:28px; width:auto; object-fit:contain; image-rendering:auto;}
.divider{width:1px; height:20px; background:var(--border)}

/* Center hero */
.hero{
  min-height:100dvh;
  display:grid;
  place-items:center;
  padding:120px 24px 80px; /* header space */
  text-align:center;
}
.hero h1{
  font-size: clamp(34px, 6vw, 64px);
  line-height:1.1;
  margin:0 0 10px;
  letter-spacing:0.4px;
  font-weight: 800;
}
.hero h1 span{
  background: linear-gradient(90deg, var(--pri), var(--sec), var(--accent));
  -webkit-background-clip: text; background-clip:text;
  color: transparent;
}
.tagline{
  max-width: 820px; margin: 0 auto 12px;
  color: var(--muted); font-size: clamp(16px, 2.3vw, 20px);
}
.coming-soon{
  margin: 10px auto 28px; max-width: 760px;
  color:#dbe6ff;
  opacity:0.9;
}

/* Buttons */
.btn{
  display:inline-block;
  padding:12px 18px; border-radius:14px;
  text-decoration:none; font-weight:600;
  border:1px solid var(--border); transition: 220ms ease;
  margin: 6px 8px;
  user-select:none;
}
.btn[aria-disabled="true"] { cursor:not-allowed; opacity:0.75 }
.btn-primary{
  background: linear-gradient(90deg, var(--pri), var(--sec));
  color:#0b0f14; border-color: transparent;
  box-shadow: var(--shadow);
}
.btn-primary:hover{ transform: translateY(-1px) scale(1.01) }
.btn-ghost{
  background: rgba(255,255,255,0.04); color: var(--fg);
}
.btn-ghost:hover{ background: rgba(255,255,255,0.08) }

/* Footer */
.site-footer{
  position: fixed; left:0; right:0; bottom:0;
  padding: 12px 18px;
  display: grid; justify-content:center;
  background: linear-gradient(0deg, rgba(0,0,0,0.5), rgba(0,0,0,0));
  border-top:1px solid rgba(255,255,255,0.06);
  z-index:5;
  text-align: center;
}
.site-footer p{
  margin:0; font-size:14px; color: var(--muted);
}

/* Responsive tweaks */
@media (max-width:520px){
  .brand{ gap:10px; padding:6px 10px }
  .logo{ height:22px }
}