/* Ascend AI Solutions. Sky theme pass on version 3.
   Surface only. Layout, copy, the sticky chapters and the booking constant are
   untouched. Loaded after style.css so it retunes the palette in one place.

   The look is Junior's reference (2026-11-04): bright blue sky, towering cumulus
   framing both sides, a bank of cloud tops along the bottom, clear sky behind the
   copy. White cards float in front. The charcoal from the logo carries the dark
   sections.

   How the sky is built
   --------------------
   The hero and the closing call to action each carry ONE sheet of Junior's
   Canva clouds, shown with background-size: cover. Each sheet is made at the
   size it is shown and keeps clear of where the copy actually sits, so white
   text always lands on blue sky, not on cloud. Landscape screens get the wide
   sheet, portrait screens (phones, upright tablets) get a tall one.

   The pale sections get a separate seamless wash tile.

   Every image comes from website/sky-src/generate-clouds.py, which explains
   how the sheets are made. Decorative, so every sky layer is aria-hidden in the
   markup.

   Contrast: the sky stays at or below #1a6ed2 down to the hero note, which keeps
   white body text above 4.5 to 1. The light only shows under the cloud bank. */

:root {
  /* the sky, bright blue, never navy */
  --sky-top: #0a56b8;
  --sky-mid: #1466cb;
  --sky-low: #1d74d6;
  --sky-glow: #5aa9f0;

  /* pale sections: cloud white, never flat paper */
  --paper: #eef6fd;
  --cloud-2: #e6f1fb;
  --cloud: #f7fbff;

  /* dark sections: the charcoal from the logo, with a blue lean */
  --char: #14181d;
  --char-2: #1b2128;

  --muted: #55616e;
  --line: rgba(20, 58, 96, 0.11);
  --line-dark: rgba(255, 255, 255, 0.11);

  /* accent: pale sky to white, holds 3 to 1 on the blue for large type */
  --grad-a: #bfe3ff;
  --grad-b: #ffffff;

  /* blue tinted shadows, so cards sit in sky rather than on paper */
  --shadow-soft: 0 26px 60px rgba(17, 62, 105, 0.13);
  --shadow-card: 0 18px 44px rgba(17, 62, 105, 0.10);
  --shadow-sky: 0 18px 44px rgba(20, 74, 122, 0.11), 0 2px 6px rgba(20, 74, 122, 0.05);

  /* each image declared once, so the single file bundle inlines it once */
  --sky-hero: url("assets/sky/hero.webp");
  --sky-hero-m: url("assets/sky/hero-m.webp");
  --sky-closing: url("assets/sky/closing.webp");
  --sky-closing-m: url("assets/sky/closing-m.webp");
  --cloud-wash: url("assets/sky/cloud-wash.webp");
}

body {
  background: var(--paper);
  color: #1b1d21;
}

/* ---------- the sky sheets ---------- */

/* The sheet drifts inside its section; the section clips it. The scale in the
   drift keeps the edges covered while it moves. */
.sky-sheet {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: var(--sky-hero);
  background-size: cover;
  background-position: 50% 100%;
  background-repeat: no-repeat;
  will-change: transform;
}

.closing .sky-sheet {
  background-image: var(--sky-closing);
  background-position: 50% 50%;
}

@media (max-aspect-ratio: 4/5) {
  .sky-sheet {
    background-image: var(--sky-hero-m);
    background-position: 50% 50%;
  }
  .closing .sky-sheet { background-image: var(--sky-closing-m); }
}

/* the scroll parallax moves the whole layer, the drift moves the sheet in it */
.hero-sky { will-change: transform; }

/* ---------- hero ---------- */

/* Deeper at the top, a little lighter toward the bank, and lit from the upper
   left, the same side the clouds are lit from. */
.hero {
  background:
    radial-gradient(60% 50% at 8% 0%, rgba(90, 169, 240, 0.32) 0%, rgba(90, 169, 240, 0) 70%),
    radial-gradient(120% 16% at 50% 100%, rgba(90, 169, 240, 0.5) 0%, rgba(90, 169, 240, 0) 70%),
    linear-gradient(180deg,
      var(--sky-top) 0%,
      #0f5ec4 24%,
      var(--sky-mid) 48%,
      #176acf 70%,
      #1a6ed2 90%,
      var(--sky-low) 100%);
}

/* the bank settles into the pale page below, so the hero ends in cloud, not
   in a hard line */
.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 72px;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(238, 246, 253, 0) 0%, rgba(238, 246, 253, 0.75) 70%, var(--paper) 100%);
}

/* on a short phone the note sits close to the foot, so the fade stays clear of it */
@media (max-width: 599px) {
  .hero::after { height: 52px; }
}

.hero-copy {
  position: relative;
  z-index: 2;
}

/* A very soft deepening behind the copy. The clear zone already keeps cloud
   away from the text; this holds contrast where the thin haze drifts. */
.hero-copy::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(1100px, 120vw);
  height: 140%;
  transform: translate(-50%, -50%);
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(closest-side,
    rgba(8, 62, 150, 0.32) 0%,
    rgba(8, 62, 150, 0.18) 50%,
    rgba(8, 62, 150, 0) 100%);
}

/* the eyebrow sits on darker glass so its small type clears 4.5 to 1 */
.hero .pill {
  background: rgba(4, 44, 110, 0.34);
  border: 1px solid rgba(255, 255, 255, 0.26);
  color: #ffffff;
}

.hero h1 {
  text-shadow: 0 2px 28px rgba(4, 40, 100, 0.28);
}

.hero-lede { color: #f5faff; }
.hero-note { color: #ffffff; }

.btn-ghost { border-color: rgba(255, 255, 255, 0.55); }
.btn-ghost:hover { background: rgba(255, 255, 255, 0.14); }

/* the cue sits on the cloud bank, so it gets a dark chip of its own */
.cue {
  color: #ffffff;
  padding: 6px 14px 6px 12px;
  border-radius: 999px;
  background: rgba(6, 40, 96, 0.78);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* ---------- pale sections ---------- */

/* A faint cloud wash under every pale section, so the page never reads as plain
   paper. The tile is white on transparent at low alpha, so it can only lighten
   the ground, which cannot reduce text contrast. It repeats seamlessly. */
.founder,
.figures-sec,
.fit-sec,
.faq-sec,
.promise-sec,
.thanks-sec {
  background-color: var(--paper);
  background-image: var(--cloud-wash);
  background-size: 720px auto;
  background-repeat: repeat;
}

.founder { background-position: 0 30%; }
.figures-sec { background-position: 160px 42%; }
.fit-sec { background-position: 320px 66%; }
.faq-sec { background-position: 480px 12%; }
.promise-sec { background-position: 240px 58%; }
.thanks-sec { background-position: 400px 30%; }

/* the chapter section is the backdrop for the white app panel, so it gets the
   wash plus a slightly cooler ground to separate the panel from it */
.chapters {
  background-color: #e9f2fb;
  background-image: var(--cloud-wash);
  background-size: 720px auto;
  background-position: 0 0;
}

/* the base pill is built for dark ground; on the pale FAQ it needs dark type */
.faq-sec .pill {
  background: #ffffff;
  border-color: rgba(20, 58, 96, 0.12);
  color: #0f3d6b;
  box-shadow: var(--shadow-sky);
}

/* ---------- cards ---------- */

.founder-card,
.tcard,
.vcard,
.figures li,
.fcard-no,
.faq details,
.device,
.promise,
.thanks-cards li {
  box-shadow: var(--shadow-sky);
}

.founder-card,
.figures li,
.fcard-no,
.faq details,
.thanks-cards li {
  background: #ffffff;
  border-color: rgba(20, 58, 96, 0.09);
}

/* the founder card keeps a clean white ground so the photo is not muddied */
.founder-card { background: #ffffff; }

/* yes card: pale sky rather than a second white card */
.fcard-yes {
  background: linear-gradient(162deg, rgba(255, 255, 255, 0.74) 0%, rgba(219, 237, 252, 0.92) 100%);
  border-color: rgba(20, 58, 96, 0.09);
}

.faq details[open] {
  background: #ffffff;
  border-color: rgba(40, 110, 170, 0.2);
}

/* ---------- dark sections ---------- */

/* charcoal with a blue lean, so the dark reads as night sky rather than ink */
.clients,
.testi {
  background-color: var(--char);
}

.site-footer {
  background: #11151a;
}

.clients::before {
  background:
    radial-gradient(680px 420px at 84% 2%, rgba(88, 162, 214, 0.20) 0%, rgba(88, 162, 214, 0) 68%),
    radial-gradient(560px 380px at 6% 96%, rgba(168, 216, 248, 0.10) 0%, rgba(168, 216, 248, 0) 70%);
}

.vcard {
  background: #1b2128;
  border-color: rgba(255, 255, 255, 0.09);
}

.tcard {
  background: linear-gradient(168deg, #1c222a 0%, #171d24 100%);
  border-color: rgba(255, 255, 255, 0.08);
}

.tcard figcaption { color: #bcdcf6; }

/* ---------- promise: the dark card that carries a wisp ---------- */

.promise {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(86% 62% at 88% 2%, rgba(94, 168, 220, 0.22) 0%, rgba(94, 168, 220, 0) 62%),
    linear-gradient(158deg, #12161b 0%, #14181d 54%, #16304a 100%);
}

/* the sky continues through the dark, very faintly */
.promise::before {
  content: "";
  position: absolute;
  inset: 30% 0 0 0;
  z-index: -1;
  pointer-events: none;
  background-image: var(--cloud-wash);
  background-repeat: repeat;
  background-size: 720px auto;
  background-position: 0 100%;
  opacity: 0.13;
  /* fade in from the top, or its top edge shows as a line across the card */
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 45%);
  mask-image: linear-gradient(180deg, transparent, #000 45%);
}

.promise::after { opacity: 0.7; }

/* ---------- closing: the strongest sky moment ---------- */

/* taller than the other bands, so the clouds have room to tower */
.closing {
  position: relative;
  isolation: isolate;
  padding: clamp(120px, 17vh, 190px) 0;
  background:
    radial-gradient(60% 60% at 10% 0%, rgba(90, 169, 240, 0.3) 0%, rgba(90, 169, 240, 0) 70%),
    radial-gradient(120% 50% at 50% 100%, rgba(90, 169, 240, 0.5) 0%, rgba(90, 169, 240, 0) 70%),
    linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 45%, var(--sky-low) 80%, #2b86e2 100%);
}

.closing-inner { position: relative; z-index: 2; }

.closing-inner::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(900px, 112vw);
  height: 150%;
  transform: translate(-50%, -50%);
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(closest-side,
    rgba(8, 62, 150, 0.32) 0%,
    rgba(8, 62, 150, 0.16) 50%,
    rgba(8, 62, 150, 0) 100%);
}

.closing .lede { color: #f5faff; }

/* ---------- accent ---------- */

.grad {
  background-image: linear-gradient(100deg, var(--grad-a) 0%, var(--grad-b) 62%, #ffffff 100%);
}

/* The founder role line was sky blue at 3.3 to 1 on white, which fails for
   15px text. Same hue, darkened until it clears 4.5 on both the card and the
   cloud white ground. */
.founder-role { color: #2a6f9e; }

/* ---------- nav ---------- */

.nav {
  background: rgba(255, 255, 255, 0.88);
  border-color: rgba(255, 255, 255, 0.92);
  box-shadow: 0 10px 30px rgba(8, 50, 120, 0.18), 0 1px 2px rgba(8, 50, 120, 0.07);
}

.nav.is-scrolled {
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 14px 38px rgba(8, 50, 120, 0.2);
}

/* ---------- chapter panel: crisp white screen, no cloud inside ---------- */

.device {
  background: #ffffff;
  box-shadow: 0 32px 72px rgba(16, 58, 98, 0.18), 0 4px 10px rgba(16, 58, 98, 0.06);
}

/* ---------- motion ---------- */

/* The sheet drifts a little and back over several minutes, slow enough to feel
   like air moving. transform only, so it composites and costs nothing a frame. */
@media (prefers-reduced-motion: no-preference) {
  .sky-sheet { animation: sky-drift 240s ease-in-out infinite alternate; }
  .closing .sky-sheet { animation-duration: 300s; animation-direction: alternate-reverse; }
}

@keyframes sky-drift {
  from { transform: translate3d(-1.2%, 0, 0) scale(1.03); }
  to { transform: translate3d(1.2%, 0, 0) scale(1.03); }
}

@media (prefers-reduced-motion: reduce) {
  .sky-sheet { animation: none !important; }
  .hero-sky { transform: none !important; }
}