/* styles.css */
:root{
  --bg-1:#0a1a66;
  --bg-2:#0b2aa3;
  --bg-3:#3d7cff;
  --bg-4:#b6d2ff;
  --text:#e9f1ff;
  --muted:#bcd2ffcc;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--text);
  background:#07123f;
  overflow-x:hidden;
}

.bg-gradient{
  position:fixed; inset:0; z-index:-1;
  background:
    radial-gradient(1200px 800px at 20% 20%, rgba(61,124,255,.35), transparent 60%),
    radial-gradient(1100px 900px at 85% 15%, rgba(182,210,255,.45), transparent 55%),
    radial-gradient(1200px 900px at 60% 80%, rgba(11,42,163,.55), transparent 60%),
    linear-gradient(135deg, var(--bg-1), var(--bg-2) 40%, var(--bg-3));
  filter:saturate(1.1);
}

.container{
  min-height:100dvh; /* mobile address bar safe */
  display:grid;
  place-content:center;
  padding:clamp(16px, 3vw, 40px);
  text-align:center;
}

.brand{
  display:inline-grid;
  grid-auto-flow:column;
  align-items:end;
  gap:clamp(8px, 1.2vw, 14px);
}

.logo{
  margin:0;
  font-weight:800;
  letter-spacing:-0.02em;
  font-size:clamp(48px, 10vw, 132px);
  line-height:0.95;
  padding-left: 10px;
}
.dot{
  width:clamp(10px, 1.5vw, 16px);
  height:clamp(10px, 1.5vw, 16px);
  background:var(--text);
  display:inline-block;
  border-radius:50%;
  align-self:center;
  translate:0 -8%;
}
.spark{
  font-size:clamp(28px, 5vw, 60px);
  color:#dff0ff;
  text-shadow:0 0 18px rgba(182,210,255,.65);
  align-self:flex-start;
}

.tagline{
  margin: clamp(14px, 2.5vw, 22px) 0 0;
  font-weight:400;
  font-size:clamp(16px, 2.6vw, 24px);
  color:var(--muted);
}

.coming-soon{
  margin: clamp(12px, 2.2vw, 18px) 0 0;
  font-weight:600;
  letter-spacing:0.08em;
  text-transform:uppercase;
  font-size:clamp(12px, 1.8vw, 14px);
  opacity:.95;
}

.contact{margin: clamp(20px, 4vw, 28px) 0 0}
.contact a{
  color:var(--text);
  text-decoration:underline;
  text-underline-offset:3px;
  opacity:.9;
}
.contact a:hover{opacity:1}

.footer{
  position:fixed; inset-inline:0; bottom:0;
  display:flex; justify-content:center; padding:10px 14px;
  background:linear-gradient(to top, rgba(0,0,0,.18), transparent);
  color:var(--muted);
}
.footer small{font-size:12px}

/* Respect reduced motion */
@media (prefers-reduced-motion:no-preference){
  .bg-gradient{animation:float 10s ease-in-out infinite alternate}
  @keyframes float{from{filter:saturate(1)} to{filter:saturate(1.2) hue-rotate(3deg)}}
}