/* ============================================================
   PlannedReady — Atmospheric "deep space" layer + cinematic type
   Gives the whole site the Keystone-hero feel: living void, depth,
   huge restrained type, generous space.
   ============================================================ */

/* deeper base — a navy void with a faint glow from above */
body {
  background:
    radial-gradient(ellipse 120% 80% at 50% -15%, #0d1733 0%, #070b16 48%, #04060e 100%) fixed;
}

/* global starfield + nebula canvas (drawn by atmosphere.js) */
#atmosphere { position: fixed; inset: 0; z-index: -4; pointer-events: none; }

/* cinematic vignette — focuses the eye, deepens the edges */
.atmo-vignette {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 92% 70% at 50% 32%, transparent 46%, rgba(2,4,10,0.5) 100%);
}

/* soften the existing aurora blobs so the new field reads as space, not soup */
.bg-aurora .blob { opacity: 0.34; }
.bg-grid { opacity: 0.6; mask-image: radial-gradient(ellipse 80% 55% at 50% 0%, #000 25%, transparent 75%); }

/* ---------- Cinematic typography, site-wide ---------- */
.hero h1 {
  font-size: clamp(3rem, 7.2vw, 5.8rem) !important;
  letter-spacing: -0.038em !important;
  line-height: 1.02 !important;
  font-weight: 800 !important;
}
.hero-sub { font-size: clamp(1.1rem, 2.1vw, 1.4rem) !important; line-height: 1.5 !important; }

.sec-head h2 {
  font-size: clamp(2.2rem, 5.2vw, 3.7rem) !important;
  letter-spacing: -0.032em !important;
  line-height: 1.04 !important;
  font-weight: 800 !important;
}
.sec-head p { font-size: clamp(1.05rem, 2vw, 1.3rem) !important; line-height: 1.5 !important; color: var(--text-soft) !important; }
.section { padding-block: clamp(84px, 12vw, 168px) !important; }

/* feature / glass cards — a touch more glassy + lift, to match Keystone */
.feat-card, .sec-card, .trust-feat, .glass { backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.feat-card { background: linear-gradient(160deg, rgba(20,30,60,0.5), rgba(12,18,40,0.4)) !important; }

/* hero — give it more atmospheric depth behind the phone */
.hero::before {
  content: ""; position: absolute; z-index: -1; left: 50%; top: 18%; width: 75vw; height: 60vh;
  transform: translateX(-50%);
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(34,211,238,0.10), transparent 60%);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) { #atmosphere { opacity: 0.9; } }