/* ================= Coming Soon page ================= */
.cs-body { min-height: 100vh; display: flex; flex-direction: column; position: relative; overflow: hidden; }
.cs-bg {
  position: fixed; inset: 0; z-index: -2;
  background:
    radial-gradient(60% 55% at 80% 6%, rgba(149,185,255,.42), transparent 60%),
    radial-gradient(55% 55% at 4% 100%, rgba(220,232,255,.7), transparent 60%),
    var(--surface);
}
.cs-grid {
  position: fixed; inset: 0; z-index: -1;
  background-image:
    linear-gradient(to right, rgba(38,103,216,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(38,103,216,.06) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: radial-gradient(ellipse at 50% 40%, #000 20%, transparent 80%);
}

/* Top bar */
.cs-top { padding: 28px clamp(20px, 4vw, 48px); display: flex; align-items: center; justify-content: space-between; }
.cs-top .logo img { height: 30px; width: auto; display: block; }
.cs-top .link { font-family: var(--font-display); font-size: 14px; font-weight: 500; color: var(--text-2); display: inline-flex; align-items: center; gap: 7px; }
.cs-top .link:hover { color: var(--brand-dark); }

/* Center */
.cs-center { flex: 1; display: grid; place-items: center; padding: 40px clamp(20px, 4vw, 48px) 60px; text-align: center; }
.cs-inner { max-width: 720px; }
.cs-pill { margin-bottom: 30px; }
.cs-h1 { font-family: var(--font-display); font-size: clamp(46px, 8vw, 96px); line-height: 1.0; font-weight: 600; letter-spacing: -.035em; color: var(--text); }
.cs-h1 .grad-text { display: block; padding-bottom: .08em; }
.cs-sub { margin: 24px auto 0; font-size: clamp(17px, 1.8vw, 21px); line-height: 1.55; color: var(--text-2); max-width: 52ch; }

/* Signup */
.cs-form { margin: 40px auto 0; display: flex; gap: 10px; max-width: 480px; width: 100%; }
.cs-form input {
  flex: 1; font-family: var(--font); font-size: 15px; color: var(--text);
  padding: 15px 18px; border-radius: var(--r-pill); border: 1.5px solid var(--border-2);
  background: #fff; transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.cs-form input::placeholder { color: #9AAFC6; }
.cs-form input:focus { outline: none; border-color: var(--brand-mid); box-shadow: 0 0 0 4px rgba(38,103,216,.10); }
.cs-form .btn { flex-shrink: 0; }
@media (max-width: 520px) { .cs-form { flex-direction: column; } .cs-form .btn { justify-content: center; } }
.cs-note { margin-top: 14px; font-size: 13px; color: var(--text-3); }
.cs-thanks { margin: 40px auto 0; display: inline-flex; align-items: center; gap: 12px; padding: 16px 24px; border-radius: var(--r-pill); background: #fff; border: 1px solid var(--border); box-shadow: 0 12px 34px rgba(10,32,92,.08); }
.cs-thanks .seal { width: 30px; height: 30px; border-radius: 999px; background: linear-gradient(135deg, #2667D8, #5ACC9B); color: #fff; display: grid; place-items: center; flex-shrink: 0; }
.cs-thanks span { font-family: var(--font-display); font-weight: 500; font-size: 15px; color: var(--text); }

/* Footer */
.cs-foot { padding: 26px clamp(20px, 4vw, 48px); display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--text-3); }
.cs-foot .socials { display: flex; gap: 8px; }
.cs-foot .socials a { width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--border); display: grid; place-items: center; color: var(--text-3); transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); }
.cs-foot .socials a:hover { background: #DEEAF7; color: var(--brand-vibrant); border-color: var(--brand-pale); }

/* Floating orbit accent */
.cs-orbit { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(120vw, 900px); height: min(120vw, 900px); z-index: -1; pointer-events: none; opacity: .5; }
.cs-orbit svg { width: 100%; height: 100%; }