/* =========================================================
   COMING SOON — FLOATING WIDE CARD + PEARLY RIBBON (NO ANIM)
   No inner scrollbars; page may scroll slightly on very short
   screens. Designed to look great across devices.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Bubblegum+Sans&family=Open+Sans&display=swap');

/* ---------- Root & Base ---------- */
:root{
  --header-h: 64px;
  --footer-h: 56px;
  --bg-root: #0e1320;
  --accent: #FF7A3A;

  /* Card sizing */
  --card-max-w: 1120px;          /* a bit wider to breathe */
  --card-radius: 24px;
  --side-pad: 2rem;

  /* Floating gap above/below the card while centered */
  --float-gap: 16px;
}

*{margin:0;padding:0;box-sizing:border-box}

html{
  min-height:100%;
  overflow-y:scroll;
  overflow-x:hidden;
  background-color:var(--bg-root);
  scrollbar-gutter:stable;
}

body.coming-soon-page{
  min-height:100vh;
  display:flex; flex-direction:column;
  font-family:'Open Sans',sans-serif;
  color:#fff; line-height:1.65;
  background: var(--bg-root) url('images/Collages.jpg') center/cover fixed no-repeat;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

/* iOS fixed-bg fallback */
@supports (-webkit-touch-callout:none){
  body.coming-soon-page{ background-attachment:scroll !important; }
  body.coming-soon-page::before{
    content:""; position:fixed; inset:0; z-index:-1;
    background: var(--bg-root) url('images/Collages.jpg') center/cover no-repeat;
  }
}

/* Header animation (site standard) */
body.coming-soon-page.force-anim header{
  transform: translate3d(0,-100%,0) !important;
  animation: slideDownHeader .9s ease forwards !important;
}
@keyframes slideDownHeader{ to{transform:translate3d(0,0,0)} }

/* ---------- Hero / Layout ---------- */
.cs-hero{
  /* Center the card between header and footer with equal gaps */
  flex:1;
  min-height: calc(100vh - var(--header-h) - var(--footer-h));
  display:flex;
  justify-content:center;
  align-items:center;
  padding: var(--float-gap) 1.25rem var(--float-gap);
}

/* The card never scrolls; allow the PAGE to scroll if needed */
.cs-card{
  position:relative;
  width:min(var(--card-max-w), 96vw);

  border-radius: var(--card-radius);
  background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.14));
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(14px) saturate(110%);
  -webkit-backdrop-filter: blur(14px) saturate(110%);
  box-shadow:
    0 24px 60px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.25);
}

/* ---------- Pearly Ribbon ---------- */
.cs-ribbon{
  position:sticky; top:0; z-index:2; /* sticky header within the card */
  border-top-left-radius: var(--card-radius);
  border-top-right-radius: var(--card-radius);
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(255,255,255,.65) 0%, rgba(255,255,255,.25) 60%, rgba(255,255,255,.18) 100%),
    linear-gradient(135deg, rgba(255,255,255,.40), rgba(233,244,255,.24) 60%, rgba(255,203,240,.28));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 0 rgba(0,0,0,.08);
}

/* Close/back button — now positioned relative to the sticky ribbon */
.cs-close{
  position:absolute; top:12px; right:12px;
  width:42px; height:42px; display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  background: rgba(0,0,0,.28);
  border:1px solid rgba(255,255,255,.4);
  color:#fff; text-decoration:none; font-size:28px; font-weight:800; line-height:1;
  z-index:3;
}
.cs-close:hover{ filter:brightness(1.12); }

.cs-ribbon-inner{
  padding: 1.15rem var(--side-pad) 1.05rem;
}
.cs-title{
  font-family:'Bubblegum Sans',cursive;
  font-size: clamp(2.1rem, 4.2vw, 3rem);
  line-height:1.1;
  color:#ffffff;
  text-shadow: 0 3px 4px rgba(8,80,150,.6);
}
.cs-subtitle{
  margin-top:.35rem;
  font-weight:800; letter-spacing:.2px;
  color:#f1f5ff;
  text-shadow: 0 2px 3px rgba(0,0,96,.7);
  font-size: clamp(1rem, 2vw, 1.25rem);
  opacity:.95;
}

/* ---------- Card Body ---------- */
.cs-body{
  padding: 1.45rem var(--side-pad) 1.75rem;
}

.cs-intro{
  margin:.35rem 0 1.1rem;
  color:#eef3ff; font-size:1.05rem; line-height:1.8;
  text-shadow: 0 2px 6px rgba(99,0,157,.55);
  max-width: 78ch;
}

.cs-benefits{
  list-style:none;
  margin: .15rem 0 1.45rem;
  display:grid; gap:.6rem;
  max-width:78ch;
}
.cs-benefits li{
  position:relative; padding-left:1.25rem;
}
.cs-benefits li::before{
  content:""; position:absolute; left:0; top:.55rem;
  width:.55rem; height:.55rem; border-radius:50%;
  background: linear-gradient(135deg, var(--accent) 0%, #FF6B2D 100%);
  box-shadow:0 0 0 3px rgba(255,255,255,.15);
}

/* ---------- Form ---------- */
.cs-form{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 1rem;
  max-width: 100%;
  margin-top:.25rem;
}
.cs-form .field{ display:flex; flex-direction:column; }
.cs-form label{
  font-weight:800; font-size:.92rem; letter-spacing:.2px;
  margin:.15rem 0 .35rem; color:#fff; opacity:.96;
}
.cs-form input{
  width:100%;
  padding:.95rem 1rem;
  border-radius:12px;
  background:#fff;
  color:#333;
  border:none; outline:none;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
  font-size:1rem;
}

.cs-cta{
  grid-column: 1 / -1;
  justify-self: start;
  margin-top:.25rem;
}

/* Footer text inside card */
.cs-privacy{
  grid-column: 1 / -1;
  margin-top:.75rem;
  font-size:.9rem; color:#f5f7ff; opacity:.9;
  text-shadow:0 2px 4px rgba(0,0,0,.45);
  max-width: 78ch;
}

/* ---------- Responsive ---------- */
@media (min-width: 1280px){
  :root{ --card-max-w: 1180px; }
}

@media (max-width: 980px){
  :root{ --card-max-w: 940px; }
}

@media (max-width: 860px){
  .cs-form{ grid-template-columns: 1fr; }
  .cs-cta{ justify-self: center; }
}

@media (max-width: 620px){
  :root{ --side-pad: 1.25rem; }
  .cs-card{ border-radius:20px; }
  .cs-title{ font-size: clamp(1.9rem, 6.5vw, 2.2rem); }
  .cs-intro{ font-size:1rem; }
}

/* Very short displays (e.g., landscape phones, split windows) */
@media (max-height: 760px){
  .cs-hero{ padding: var(--float-gap) 1rem var(--float-gap); }
}