/* Dark Modern Coming Soon - Kyra Labs */
:root{
  --bg:#07090C;
  --bg-2:#0B0F14;
  --text:#DCE3EA;
  --muted:#9AA7B2;
  --brand-1:#9D4EDD;
  --brand-2:#00D1FF;
  --brand-3:#21FBB8;
  --glass:rgba(255,255,255,0.04);
  --glow:0 0 40px rgba(0,209,255,0.25), 0 0 80px rgba(33,251,184,0.15);
}

*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Noto Sans, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background: radial-gradient(1200px 800px at 10% 10%, #0E1320 0%, var(--bg) 40%),
              radial-gradient(1000px 600px at 90% 30%, #0A0E18 0%, var(--bg) 40%);
  overflow-x:hidden;
}

canvas#bg-particles{
  position:fixed; inset:0; z-index:-2;
}

.gradient-orb{
  position:fixed; width:60vmax; height:60vmax; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, var(--brand-2), transparent 60%),
              radial-gradient(circle at 70% 70%, var(--brand-3), transparent 60%);
  filter: blur(80px) saturate(130%);
  opacity:.18; left:-10vmax; top:-10vmax; z-index:-1;
  animation:float 12s ease-in-out infinite alternate;
}
.gradient-orb.b{ left:auto; right:-15vmax; top:40vh; animation-delay:4s; }

@keyframes float{
  to{ transform: translateY(-4vmax) translateX(2vmax) scale(1.03); }
}

.container{max-width:1100px; margin:0 auto; padding:32px}

header{padding:24px 0; position:sticky; top:0; backdrop-filter:saturate(140%) blur(6px); background:linear-gradient(180deg, rgba(7,9,12,0.7), rgba(7,9,12,0)); z-index:5}
.brand{display:flex; align-items:center; gap:14px}
.brand img{width:48px; height:48px}
.brand .name{font-weight:800; letter-spacing:0.6px}
.badge{padding:6px 10px; border-radius:999px; background:linear-gradient(90deg,var(--brand-2),var(--brand-3)); color:#031016; font-weight:700; font-size:.8rem}

.hero{
  display:grid; grid-template-columns:1.2fr 0.8fr; gap:28px; align-items:center; padding:60px 0 40px;
}
.hero-card{
  background:linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
  border:1px solid rgba(255,255,255,0.08); border-radius:24px; padding:28px; position:relative;
  box-shadow: var(--glow);
}
.hero h1{
  font-size: clamp(36px, 4.5vw, 64px); margin:10px 0 12px;
  line-height:1.05; font-weight:900; letter-spacing:0.2px;
  background:linear-gradient(90deg, var(--brand-2), var(--brand-3)); -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 0 18px rgba(0,0,0,0.4);
}
.hero p{color:var(--muted); font-size:1.05rem}

.logo-card{
  background:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
  border:1px solid rgba(255,255,255,0.08); border-radius:24px; padding:24px; display:flex; justify-content:center; align-items:center;
  transition:transform .3s ease;
  perspective:1000px;
}
.logo-card:hover{ transform: translateY(-2px) }
.logo-card img{ width:100%; max-width:540px; filter:drop-shadow(0 0 24px rgba(0,209,255,0.2)); }

.kicker{display:flex; gap:10px; align-items:center}
.kicker .dot{width:8px; height:8px; border-radius:50%; background:linear-gradient(90deg,var(--brand-2), var(--brand-3)); box-shadow:0 0 12px rgba(0,209,255,0.8)}

.actions{display:flex; gap:12px; margin-top:16px; flex-wrap:wrap}
.button{
  appearance:none; border:none; cursor:pointer; padding:12px 16px; border-radius:12px; font-weight:700;
  background:linear-gradient(90deg,var(--brand-2),var(--brand-3)); color:#031016;
  box-shadow:0 6px 24px rgba(0,209,255,0.25); transition:transform .15s ease, box-shadow .2s ease;
}
.button:hover{ transform:translateY(-1px); box-shadow:0 10px 32px rgba(0,209,255,0.35) }
.button.ghost{
  background:transparent; color:var(--text); border:1px solid rgba(255,255,255,0.12);
}

.features{ display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; margin:28px 0 10px }
.card{
  background:linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
  border:1px solid rgba(255,255,255,0.08); border-radius:18px; padding:18px; opacity:0; transform:translateY(10px) scale(0.98);
  transition:opacity .6s ease, transform .6s ease;
}
.card.visible{ opacity:1; transform:translateY(0) scale(1) }
.card h3{ margin:8px 0 6px }
.card p{ color:var(--muted); margin:0 }

.section{ padding:40px 0 }
.section h2{ font-size:1.6rem; margin:0 0 6px }
.section p{ color:var(--muted) }

.footer{
  border-top:1px solid rgba(255,255,255,0.08); margin-top:30px; padding:22px 0; color:var(--muted);
}
.footer a{ color:var(--text); text-decoration:none; opacity:.9 }
.footer a:hover{ opacity:1 }

/* FAQ accordion */
.faq details{background:linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02)); border:1px solid rgba(255,255,255,0.08); border-radius:12px; padding:12px 14px}
.faq summary{cursor:pointer; font-weight:700}
.faq p{color:var(--muted)}

/* Accessibility: skip link */
.skip-link{position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden}
.skip-link:focus{left:16px; top:16px; width:auto; height:auto; background:#fff; color:#000; padding:8px 10px; border-radius:8px}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important}
}

@media (max-width: 900px){
  .hero{ grid-template-columns: 1fr; }
  .features{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px){
  .features{ grid-template-columns: 1fr; }
}