:root {
  /* Official Apple iOS system colors (developer.apple.com) */
  --ios-sky: #5fc9f8;
  --ios-yellow: #fecb2e;
  --ios-orange: #fd9426;
  --ios-pink: #fc3158;
  --ios-blue: #147efb;
  --ios-green: #53d769;
  --ios-red: #fc3d39;
  --ios-gray: #8e8e93;

  /* Living palette */
  --bg: #000000;
  --bg-charcoal: #05070c;
  --ink: #f5f5f7;
  --ink-soft: color-mix(in srgb, var(--ios-gray) 72%, #ebebf5);
  --primary: var(--ios-blue);
  --primary-sky: var(--ios-sky);
  --accent-warm: var(--ios-yellow);
  --accent-amber: var(--ios-orange);
  --alert-pink: var(--ios-pink);
  --alert-red: var(--ios-red);
  --success: var(--ios-green);
  --neutral: var(--ios-gray);

  --blue: var(--ios-blue);
  --blue-sky: var(--ios-sky);
  --blue-glow: color-mix(in srgb, var(--ios-blue) 52%, transparent);
  --blue-mist: color-mix(in srgb, var(--ios-sky) 28%, transparent);
  --sky-glow: color-mix(in srgb, var(--ios-sky) 45%, transparent);

  --glass-base: rgba(10, 12, 18, 0.38);
  --glass-lift: rgba(255, 255, 255, 0.1);
  --stroke: rgba(255, 255, 255, 0.38);
  --stroke-soft: rgba(255, 255, 255, 0.14);
  --shadow: 0 44px 110px rgba(0, 0, 0, 0.78);
  --radius: 40px;
  --font-display: "Sora", "Segoe UI", sans-serif;
  --font-body: "Figtree", "Segoe UI", sans-serif;
  --panel-w: min(100%, 29rem);
  --px: 50%;
  --py: 26%;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  color-scheme: dark;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  margin: 0;
  height: 100%;
  height: 100svh;
  background: var(--bg);
  color-scheme: dark;
}

body {
  margin: 0;
  min-height: 100%;
  height: 100svh;
  overflow: hidden;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01" on, "kern" on;
  overscroll-behavior: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

::selection {
  background: color-mix(in srgb, var(--ios-blue) 44%, transparent);
  color: #fff;
}

/* ── Fixed atmosphere — opacity drift only, never position swim ── */
.ambient {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(1200px 700px at 10% 6%, color-mix(in srgb, var(--ios-sky) 26%, transparent), transparent 58%),
    radial-gradient(900px 580px at 94% 10%, color-mix(in srgb, var(--ios-blue) 22%, transparent), transparent 56%),
    radial-gradient(720px 480px at 78% 88%, color-mix(in srgb, var(--ios-orange) 7%, transparent), transparent 60%),
    radial-gradient(780px 520px at 48% 108%, color-mix(in srgb, var(--ios-sky) 14%, transparent), transparent 62%),
    linear-gradient(180deg, #02050c 0%, var(--bg-charcoal) 42%, var(--bg) 100%);
}

.mesh-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.85;
  animation: ambient-drift 22s ease-in-out infinite alternate;
}

.mesh {
  position: absolute;
  inset: -10%;
  opacity: 0.42;
  background:
    radial-gradient(circle at 26% 36%, color-mix(in srgb, var(--ios-sky) 14%, transparent), transparent 32%),
    radial-gradient(circle at 76% 54%, color-mix(in srgb, var(--ios-blue) 10%, transparent), transparent 30%),
    radial-gradient(circle at 58% 72%, color-mix(in srgb, var(--ios-yellow) 5%, transparent), transparent 26%);
  animation: ambient-drift 18s ease-in-out infinite alternate-reverse;
}

.vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 76% 68% at 50% 46%, transparent 38%, rgba(0, 0, 0, 0.62) 100%);
}

.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(68px);
  opacity: 0.58;
  transform: translateZ(0);
  will-change: opacity;
}

.orb-a {
  width: 26rem;
  height: 26rem;
  left: -6rem;
  top: 16%;
  background: radial-gradient(circle, color-mix(in srgb, var(--ios-sky) 58%, transparent), transparent 68%);
  animation: orb-breathe 13s ease-in-out infinite alternate;
}

.orb-b {
  width: 20rem;
  height: 20rem;
  right: -5rem;
  top: 4%;
  background: radial-gradient(circle, color-mix(in srgb, var(--ios-blue) 48%, transparent), transparent 70%);
  animation: orb-breathe 16s ease-in-out 1.4s infinite alternate-reverse;
}

.orb-c {
  width: 30rem;
  height: 30rem;
  left: 50%;
  bottom: -12rem;
  margin-left: -15rem;
  background: radial-gradient(circle, color-mix(in srgb, var(--ios-sky) 24%, transparent), transparent 72%);
  animation: orb-breathe 15s ease-in-out 0.7s infinite alternate;
}

.orb-d {
  width: 11rem;
  height: 11rem;
  left: 60%;
  top: 40%;
  filter: blur(44px);
  background: radial-gradient(circle, color-mix(in srgb, var(--ios-yellow) 18%, transparent), transparent 70%);
  animation: orb-breathe 12s ease-in-out 2s infinite alternate-reverse;
}

.orb-e {
  width: 8rem;
  height: 8rem;
  left: 18%;
  bottom: 22%;
  filter: blur(40px);
  background: radial-gradient(circle, color-mix(in srgb, var(--ios-green) 12%, transparent), transparent 72%);
  animation: orb-breathe 14s ease-in-out 1.1s infinite alternate;
  opacity: 0.35;
}

.grain {
  position: absolute;
  inset: 0;
  opacity: 0.032;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

/* ── Anchored center stage ── */
.stage {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  padding:
    max(1.25rem, var(--safe-top))
    max(1.25rem, var(--safe-right))
    max(1.25rem, var(--safe-bottom))
    max(1.25rem, var(--safe-left));
  overflow: hidden;
}

.hero {
  width: var(--panel-w);
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
}

/* Tiny glass brand chip */
.brand-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.48rem;
  padding: 0.42rem 0.86rem 0.42rem 0.6rem;
  border-radius: 999px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.36),
    0 0 20px color-mix(in srgb, var(--ios-blue) 12%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
}

.brand-pill__glass {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.04) 100%),
    color-mix(in srgb, var(--ios-blue) 8%, rgba(14, 16, 24, 0.42));
  z-index: 0;
}

.brand-pill__chroma {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 0;
  pointer-events: none;
  box-shadow:
    inset 1px 0 0 color-mix(in srgb, var(--ios-pink) 22%, transparent),
    inset -1px 0 0 color-mix(in srgb, var(--ios-sky) 28%, transparent);
  opacity: 0.7;
}

.brand-pill__dot,
.brand-pill__text {
  position: relative;
  z-index: 1;
}

.brand-pill__dot {
  width: 0.44rem;
  height: 0.44rem;
  border-radius: 50%;
  background: var(--ios-blue);
  box-shadow:
    0 0 10px var(--blue-glow),
    0 0 2px color-mix(in srgb, var(--ios-sky) 60%, transparent);
}

.brand-pill__text {
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: color-mix(in srgb, var(--ink) 78%, var(--ios-gray));
}

/* ── Stacked frosted planes (depth without swim) ── */
.glass-stack {
  position: relative;
  width: 100%;
}

.glass-plane {
  position: absolute;
  left: 50%;
  border-radius: calc(var(--radius) + 4px);
  pointer-events: none;
  transform: translateX(-50%);
}

.glass-plane--back {
  width: calc(100% + 1.6rem);
  height: calc(100% + 1rem);
  top: -0.4rem;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--ios-sky) 10%, transparent), color-mix(in srgb, var(--ios-blue) 6%, transparent));
  border: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow:
    0 32px 80px rgba(0, 0, 0, 0.4),
    0 0 40px color-mix(in srgb, var(--ios-blue) 8%, transparent);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  opacity: 0.58;
  z-index: 0;
}

.glass-plane--mid {
  width: calc(100% + 0.8rem);
  height: calc(100% + 0.5rem);
  top: -0.18rem;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.02)),
    color-mix(in srgb, var(--ios-blue) 5%, rgba(16, 20, 30, 0.3));
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow:
    0 22px 56px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 1px 0 0 color-mix(in srgb, var(--ios-pink) 8%, transparent),
    inset -1px 0 0 color-mix(in srgb, var(--ios-sky) 12%, transparent);
  backdrop-filter: blur(30px) saturate(170%);
  -webkit-backdrop-filter: blur(30px) saturate(170%);
  opacity: 0.74;
  z-index: 1;
}

.glass-plane--halo {
  width: calc(100% + 2.4rem);
  height: calc(100% + 1.6rem);
  top: -0.7rem;
  border-radius: calc(var(--radius) + 10px);
  background: transparent;
  box-shadow:
    0 0 60px color-mix(in srgb, var(--ios-blue) 14%, transparent),
    0 0 100px color-mix(in srgb, var(--ios-sky) 8%, transparent);
  opacity: 0.7;
  z-index: 0;
  animation: halo-breathe 7s ease-in-out infinite;
}

/* ── Primary liquid glass panel ── */
.glass {
  position: relative;
  z-index: 2;
  width: 100%;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--radius);
  background:
    linear-gradient(
      148deg,
      rgba(255, 255, 255, 0.26) 0%,
      rgba(255, 255, 255, 0.07) 28%,
      color-mix(in srgb, var(--ios-sky) 8%, transparent) 52%,
      rgba(255, 255, 255, 0.1) 74%,
      color-mix(in srgb, var(--ios-blue) 7%, transparent) 100%
    ),
    var(--glass-base);
  border: 1px solid var(--stroke);
  box-shadow:
    var(--shadow),
    0 0 0 0.5px rgba(255, 255, 255, 0.1),
    0 0 90px color-mix(in srgb, var(--ios-blue) 14%, transparent),
    0 0 40px color-mix(in srgb, var(--ios-sky) 8%, transparent),
    inset 0 1.5px 0 rgba(255, 255, 255, 0.52),
    inset 0 -1px 0 rgba(255, 255, 255, 0.06),
    inset 1.5px 0 0 rgba(255, 255, 255, 0.14),
    inset -1px 0 0 rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(52px) saturate(200%) brightness(1.06);
  -webkit-backdrop-filter: blur(52px) saturate(200%) brightness(1.06);
  transform: translateZ(0);
}

.glass__frost {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  background:
    radial-gradient(82% 58% at 50% 0%, rgba(255, 255, 255, 0.16), transparent 55%),
    radial-gradient(70% 48% at 50% 100%, color-mix(in srgb, var(--ios-blue) 8%, transparent), transparent 55%);
  mix-blend-mode: soft-light;
}

.glass__depth {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  background:
    linear-gradient(
      195deg,
      transparent 30%,
      color-mix(in srgb, var(--ios-blue) 5%, transparent) 62%,
      color-mix(in srgb, var(--ios-sky) 6%, transparent) 100%
    );
  opacity: 0.85;
}

/* Chromatic edge fringe — sky / blue / soft pink refraction */
.glass__chroma {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  box-shadow:
    inset 2px 0 0 color-mix(in srgb, var(--ios-pink) 18%, transparent),
    inset -2px 0 0 color-mix(in srgb, var(--ios-sky) 28%, transparent),
    inset 0 2px 0 rgba(255, 255, 255, 0.22),
    inset 0 -2px 0 color-mix(in srgb, var(--ios-blue) 16%, transparent),
    inset 1px 1px 0 color-mix(in srgb, var(--ios-red) 8%, transparent);
  opacity: 0.9;
}

/* Tiny warm/alert edge glints — not a page theme */
.glass__glint {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 2;
  background:
    radial-gradient(18% 10% at 8% 18%, color-mix(in srgb, var(--ios-pink) 22%, transparent), transparent 70%),
    radial-gradient(14% 8% at 94% 22%, color-mix(in srgb, var(--ios-yellow) 16%, transparent), transparent 70%),
    radial-gradient(12% 7% at 12% 88%, color-mix(in srgb, var(--ios-red) 10%, transparent), transparent 70%);
  mix-blend-mode: screen;
  opacity: 0.55;
  filter: blur(0.6px);
}

.glass__rim {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.12),
    inset 0 0 56px rgba(255, 255, 255, 0.045),
    inset 0 -34px 68px color-mix(in srgb, var(--ios-blue) 7%, transparent);
}

/* Specular caustic — Apple UI light catch */
.glass__caustic {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  background:
    radial-gradient(44% 26% at 20% 6%, rgba(255, 255, 255, 0.44), transparent 58%),
    radial-gradient(30% 16% at 64% 10%, color-mix(in srgb, var(--ios-sky) 32%, transparent), transparent 55%),
    radial-gradient(22% 14% at 78% 16%, color-mix(in srgb, var(--ios-yellow) 12%, transparent), transparent 60%),
    radial-gradient(38% 24% at 90% 80%, color-mix(in srgb, var(--ios-blue) 22%, transparent), transparent 60%),
    radial-gradient(26% 18% at 8% 72%, color-mix(in srgb, var(--ios-sky) 10%, transparent), transparent 62%);
  mix-blend-mode: screen;
  opacity: 0.62;
  filter: blur(0.35px);
}

.glass__specular {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 2;
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.4) 0%,
      rgba(255, 255, 255, 0.1) 9%,
      transparent 24%
    ),
    radial-gradient(130% 72% at 14% -12%, rgba(255, 255, 255, 0.32), transparent 44%),
    radial-gradient(80% 40% at 70% -5%, color-mix(in srgb, var(--ios-sky) 18%, transparent), transparent 48%);
  mix-blend-mode: soft-light;
  opacity: 0.98;
}

.glass__refraction {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 2;
  background:
    radial-gradient(95% 58% at 96% 112%, color-mix(in srgb, var(--ios-blue) 26%, transparent), transparent 52%),
    radial-gradient(58% 38% at 4% 88%, color-mix(in srgb, var(--ios-sky) 14%, transparent), transparent 50%),
    radial-gradient(40% 28% at 50% 100%, color-mix(in srgb, var(--ios-orange) 5%, transparent), transparent 55%),
    linear-gradient(
      124deg,
      transparent 0%,
      color-mix(in srgb, var(--ios-blue) 9%, transparent) 38%,
      color-mix(in srgb, var(--ios-sky) 6%, transparent) 55%,
      transparent 72%
    );
}

.glass__light {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 3;
  background:
    radial-gradient(
      480px 300px at var(--px) var(--py),
      rgba(255, 255, 255, 0.26),
      color-mix(in srgb, var(--ios-sky) 16%, transparent) 20%,
      color-mix(in srgb, var(--ios-blue) 10%, transparent) 36%,
      transparent 64%
    );
  opacity: 0.92;
  mix-blend-mode: soft-light;
  transition: opacity 0.25s ease;
}

.glass__edge-pulse {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 3;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.16),
    0 0 0 1px color-mix(in srgb, var(--ios-blue) 8%, transparent);
  animation: edge-pulse 5.5s ease-in-out infinite;
}

.glass__sheen {
  position: absolute;
  top: -55%;
  left: 0;
  width: 40%;
  height: 210%;
  background: linear-gradient(
    105deg,
    transparent 30%,
    rgba(255, 255, 255, 0.32) 44%,
    color-mix(in srgb, var(--ios-sky) 18%, transparent) 50%,
    color-mix(in srgb, var(--ios-blue) 8%, transparent) 54%,
    rgba(255, 255, 255, 0.05) 58%,
    transparent 68%
  );
  transform: rotate(16deg) translate3d(-180%, 0, 0);
  animation: sheen-once 2.9s cubic-bezier(0.4, 0, 0.2, 1) 0.4s 1 forwards;
  pointer-events: none;
  z-index: 4;
  mix-blend-mode: screen;
}

.glass__noise {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 4;
  opacity: 0.038;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

.glass__content {
  position: relative;
  z-index: 5;
  padding: clamp(2.75rem, 6vw, 4.2rem) clamp(1.5rem, 4.5vw, 2.9rem);
  text-align: center;
}

.brand {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(3.2rem, 12vw, 5.15rem);
  letter-spacing: 0.045em;
  line-height: 0.96;
  background: linear-gradient(
    188deg,
    #ffffff 2%,
    rgba(245, 245, 247, 0.98) 38%,
    var(--ios-sky) 82%,
    var(--ios-blue) 118%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 24px color-mix(in srgb, var(--ios-blue) 28%, transparent));
}

.tagline {
  margin: 1.12rem auto 0;
  max-width: 18rem;
  font-size: clamp(1.02rem, 2.5vw, 1.15rem);
  font-weight: 500;
  letter-spacing: 0.012em;
  line-height: 1.45;
  color: var(--ink-soft);
}

/* ── Glass pill CTA — #147efb fill / blue glass ── */
.cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 2.05rem;
  min-height: 3.3rem;
  padding: 0.92rem 1.9rem;
  overflow: hidden;
  isolation: isolate;
  border-radius: 980px;
  border: 1px solid color-mix(in srgb, var(--ios-sky) 45%, rgba(255, 255, 255, 0.55));
  background: transparent;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  box-shadow:
    0 18px 44px color-mix(in srgb, var(--ios-blue) 42%, transparent),
    0 0 0 0.5px color-mix(in srgb, var(--ios-blue) 30%, transparent),
    0 0 28px color-mix(in srgb, var(--ios-sky) 18%, transparent),
    inset 0 1.5px 0 rgba(255, 255, 255, 0.58),
    inset 0 -1px 0 color-mix(in srgb, var(--ios-blue) 28%, transparent);
  backdrop-filter: blur(18px) saturate(170%);
  -webkit-backdrop-filter: blur(18px) saturate(170%);
  transition:
    border-color 0.22s ease,
    box-shadow 0.22s ease,
    transform 0.32s cubic-bezier(0.34, 1.5, 0.64, 1);
  transform: translateZ(0);
  -webkit-user-select: none;
  user-select: none;
}

.cta__glass {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.38) 0%, rgba(255, 255, 255, 0.08) 38%, transparent 100%),
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--ios-sky) 55%, var(--ios-blue)) 0%,
      var(--ios-blue) 48%,
      color-mix(in srgb, var(--ios-blue) 82%, #0a4db8) 100%
    );
}

.cta__rim {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 0;
  pointer-events: none;
  box-shadow:
    inset 1.5px 0 0 color-mix(in srgb, var(--ios-pink) 16%, transparent),
    inset -1.5px 0 0 color-mix(in srgb, var(--ios-sky) 32%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -1px 0 color-mix(in srgb, var(--ios-blue) 20%, transparent);
}

.cta__glow {
  position: absolute;
  inset: -20%;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--ios-sky) 28%, transparent), transparent 62%);
  opacity: 0.45;
  mix-blend-mode: screen;
}

.cta__label {
  position: relative;
  z-index: 1;
  text-shadow: 0 1px 8px color-mix(in srgb, var(--ios-blue) 35%, transparent);
}

.cta__shine {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    105deg,
    transparent 26%,
    rgba(255, 255, 255, 0.38) 46%,
    color-mix(in srgb, var(--ios-sky) 20%, transparent) 52%,
    transparent 66%
  );
  transform: translateX(-130%);
  opacity: 0;
  pointer-events: none;
}

.cta:hover {
  border-color: color-mix(in srgb, var(--ios-sky) 60%, #fff);
  box-shadow:
    0 22px 52px color-mix(in srgb, var(--ios-blue) 52%, transparent),
    0 0 36px color-mix(in srgb, var(--ios-sky) 28%, transparent),
    inset 0 1.5px 0 rgba(255, 255, 255, 0.68);
  transform: translateY(-2px) scale(1.02);
}

.cta:hover .cta__glass {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.46) 0%, rgba(255, 255, 255, 0.1) 38%, transparent 100%),
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--ios-sky) 65%, var(--ios-blue)) 0%,
      var(--ios-blue) 45%,
      color-mix(in srgb, var(--ios-blue) 88%, #0a4db8) 100%
    );
}

.cta:hover .cta__shine {
  opacity: 1;
  animation: cta-shine 0.9s ease-out 1;
}

.cta:active {
  transform: translateY(0) scale(0.96);
  box-shadow:
    0 8px 20px color-mix(in srgb, var(--ios-blue) 30%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transition-duration: 0.08s;
}

.cta:focus-visible {
  outline: 2px solid var(--ios-blue);
  outline-offset: 3px;
}

.reveal {
  opacity: 0;
  animation: fade-in 0.75s ease-out 0.04s forwards;
}

@keyframes fade-in {
  to {
    opacity: 1;
  }
}

@keyframes sheen-once {
  0% {
    transform: rotate(16deg) translate3d(-180%, 0, 0);
  }
  100% {
    transform: rotate(16deg) translate3d(360%, 0, 0);
  }
}

@keyframes cta-shine {
  0% {
    transform: translateX(-130%);
  }
  100% {
    transform: translateX(130%);
  }
}

@keyframes orb-breathe {
  0% {
    opacity: 0.38;
  }
  100% {
    opacity: 0.74;
  }
}

@keyframes ambient-drift {
  0% {
    opacity: 0.32;
  }
  100% {
    opacity: 0.5;
  }
}

@keyframes edge-pulse {
  0%,
  100% {
    opacity: 0.42;
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.1),
      0 0 0 1px color-mix(in srgb, var(--ios-blue) 4%, transparent);
  }
  50% {
    opacity: 0.92;
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.24),
      0 0 28px 1px color-mix(in srgb, var(--ios-sky) 16%, transparent);
  }
}

@keyframes halo-breathe {
  0%,
  100% {
    opacity: 0.45;
  }
  50% {
    opacity: 0.8;
  }
}

@media (hover: none) {
  .glass__light {
    background: radial-gradient(
      460px 280px at 50% 18%,
      rgba(255, 255, 255, 0.18),
      color-mix(in srgb, var(--ios-sky) 12%, transparent) 28%,
      color-mix(in srgb, var(--ios-blue) 8%, transparent) 42%,
      transparent 64%
    );
  }

  .cta:hover {
    transform: none;
  }
}

@media (max-width: 380px) {
  .orb-a,
  .orb-b,
  .orb-c,
  .orb-d,
  .orb-e {
    opacity: 0.34;
  }

  .glass {
    border-radius: 32px;
  }

  .glass-plane--back,
  .glass-plane--mid,
  .glass-plane--halo {
    border-radius: 36px;
  }

  .glass__content {
    padding: 2.25rem 1.3rem;
  }

  .glass-plane--back {
    width: calc(100% + 1rem);
  }

  .glass-plane--mid {
    width: calc(100% + 0.5rem);
  }

  .glass-plane--halo {
    width: calc(100% + 1.6rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .glass__sheen,
  .glass__edge-pulse,
  .glass-plane--halo,
  .orb-a,
  .orb-b,
  .orb-c,
  .orb-d,
  .orb-e,
  .mesh,
  .mesh-svg,
  .cta__shine {
    animation: none !important;
  }

  .reveal {
    opacity: 1;
  }

  .glass__edge-pulse {
    opacity: 0.55;
  }

  .mesh-svg,
  .mesh {
    opacity: 0.42;
  }

  .cta,
  .glass__light {
    transition: none !important;
  }

  .cta:hover,
  .cta:active {
    transform: none;
  }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass {
    background: rgba(12, 14, 20, 0.96);
  }

  .glass-plane--back,
  .glass-plane--mid,
  .glass-plane--halo {
    display: none;
  }

  .brand-pill {
    background: rgba(24, 26, 32, 0.94);
  }

  .cta__glass {
    background: linear-gradient(135deg, var(--ios-sky), var(--ios-blue));
  }
}