/* =========================================================================
   Ope Ojekale × SDR Career Accelerator · pitch site (system A)
   Oxium house skin (house/pitch-skin.css): navy-black + the Oxium glass accent.
   ========================================================================= */

@font-face { font-family: "Cabinet Grotesk"; src: url("assets/fonts/cabinet-grotesk-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Cabinet Grotesk"; src: url("assets/fonts/cabinet-grotesk-700.woff2") format("woff2"); font-weight: 600 700; font-display: swap; }
@font-face { font-family: "Cabinet Grotesk"; src: url("assets/fonts/cabinet-grotesk-800.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("assets/fonts/satoshi-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("assets/fonts/satoshi-500.woff2") format("woff2"); font-weight: 500 600; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("assets/fonts/satoshi-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {

  --font: "Satoshi", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --display: "Cabinet Grotesk", "Satoshi", -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  --container: 1120px;
  --gutter: clamp(20px, 5vw, 32px);
  --section-y: clamp(72px, 11vh, 132px);
  --radius: 18px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* --------------------------------- Base --------------------------------- */
[hidden] { display: none !important; } /* mode-switched elements must stay hidden even when a component sets display */
* { box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; }
/* page canvas: light corner tech-frame accents + brushed diagonal streaks (gradients.md #10 + #9) */
body::before { content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(60% 40% at 100% 0%, rgba(110, 200, 245, 0.07), transparent 60%),
    radial-gradient(50% 40% at 0% 100%, rgba(110, 200, 245, 0.04), transparent 60%),
    repeating-linear-gradient(115deg, rgba(243, 244, 239, 0.012) 0 1px, transparent 1px 9px),
    linear-gradient(115deg, var(--bg), var(--bg-2)); }
body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 140px 140px; }
body {
  margin: 0;
  background: transparent;
  color: var(--text);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.5;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--accent); color: var(--accent-ink); }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { padding-block: var(--section-y); position: relative; }

/* ------------------------------ Typography ------------------------------ */
.hero__eyebrow { color: var(--accent); }
.eyebrow {
  margin: 0 0 18px;
  font-family: var(--mono);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}
.section__title {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.025em;
}

/* Small directional arrows */
.arrow, .arrow-down {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  vertical-align: middle;
  margin-left: 7px;
  transition: transform 0.3s var(--ease);
}
.arrow { transform: rotate(-45deg); }
.arrow-down { transform: rotate(45deg); margin-left: 8px; }

/* -------------------------------- Reveal -------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(28px) scale(0.985);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
  will-change: opacity, transform;
}
.reveal.is-in { opacity: 1; transform: none; }
.hero__inner .reveal:nth-child(1) { transition-delay: 0.05s; }
.hero__inner .reveal:nth-child(2) { transition-delay: 0.18s; }
.hero__inner .reveal:nth-child(3) { transition-delay: 0.3s; }

/* -------------------------------- Buttons ------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 13px 26px;
  border-radius: 980px;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.3s var(--ease), background 0.3s var(--ease),
    border-color 0.3s var(--ease), opacity 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.btn:active { transform: scale(0.97); }
.btn--primary { background: linear-gradient(120deg, var(--accent), var(--accent-2)); color: var(--accent-ink); position: relative; overflow: hidden; }
.btn--primary::after { content: ""; position: absolute; inset: 0; transform: translateX(-120%); background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.28), transparent); transition: transform 0.6s var(--ease); }
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 14px 36px -10px rgba(110, 200, 245, 0.45); }
.btn--primary:hover::after { transform: translateX(120%); }
.btn--ghost { background: transparent; color: var(--text); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); }
.btn--lg { padding: 17px 40px; font-size: 1.1rem; }

/* --------------------------------- Hero --------------------------------- */
.hero {
  text-align: center;
  padding-top: clamp(80px, 13vh, 148px);
  padding-bottom: clamp(24px, 4vh, 48px);
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: -10% -5% 0 -5%;
  background: radial-gradient(120% 70% at 50% -10%, rgba(110, 200, 245, 0.10), transparent 60%);
  pointer-events: none;
  animation: glowDrift 16s ease-in-out infinite alternate;
}
.hero__inner { position: relative; }
.hero__title {
  margin: 0 auto;
  max-width: 1080px;
  font-family: var(--display);
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  text-wrap: balance;
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.025em;
}
/* Word-by-word reveal (applied once JS splits the headline) */
.hero__title.split { opacity: 1; transform: none; transition: none; } /* the words carry the entrance; no transition on the h1 itself so GSAP never samples a half-way state */
.hero__title .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.42em);
  filter: blur(6px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease), filter 0.7s var(--ease);
  will-change: opacity, transform, filter;
}
.hero__title.is-in .word { opacity: 1; transform: none; filter: blur(0); }

.mark { position: relative; white-space: nowrap; color: var(--accent); }
.mark::after {
  content: "";
  position: absolute;
  left: -1px; right: -1px; bottom: -0.04em;
  height: 0.09em;
  background: var(--accent);
  border-radius: 3px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.8s var(--ease) 0.5s;
}
.hero__title.is-in .mark::after { transform: scaleX(1); }

.hero__actions { margin-top: 40px; display: flex; justify-content: center; }
.hero__actions .arrow-down { animation: chevBob 2.2s var(--ease) infinite; }

/* -------------------------------- Player --------------------------------
   The custom native player. Its constants are tuned — recolour it, never
   redesign it (references/hero-video-player.md). Two deliberate choices:
   NO time readouts (a visible duration invites "how long is this?" before
   they have started), and captions ON by default with the live word painted
   in the accent, because most of these get opened on mute in a DM. */
.hplayer { margin: 44px auto 0; max-width: 760px; }
.hplayer__stage {
  position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius);
  overflow: hidden; background: #05060a; border: 1px solid var(--line);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}
.hplayer__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; background: #05060a; }

/* dark scrim behind the big play button (idle only) */
.hplayer__scrim { position: absolute; inset: 0; pointer-events: none; transition: opacity 0.45s var(--ease);
  background: radial-gradient(120% 120% at 50% 45%, rgba(0,0,0,0.12), rgba(0,0,0,0.55)); }
.hplayer__stage:not([data-state="idle"]) .hplayer__scrim { opacity: 0; }

/* big centred play */
.hplayer__big { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 88px; height: 88px; border-radius: 50%; cursor: pointer; display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,0.55); background: rgba(255,255,255,0.09); backdrop-filter: blur(8px);
  transition: transform 0.4s var(--ease), background 0.4s var(--ease), opacity 0.4s var(--ease), border-color 0.4s var(--ease); }
.hplayer__big svg { width: 32px; height: 32px; fill: #fff; margin-left: 4px; position: relative; z-index: 1; }
.hplayer__big-glow { position: absolute; inset: 0; border-radius: 50%; animation: hpPulse 2.8s ease-out infinite; }
.hplayer__big:hover { transform: translate(-50%, -50%) scale(1.07); background: rgba(255,255,255,0.17); border-color: #fff; }
.hplayer__stage:not([data-state="idle"]) .hplayer__big { opacity: 0; pointer-events: none; transform: translate(-50%, -50%) scale(0.8); }
@keyframes hpPulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 42%, transparent); }
  70%  { box-shadow: 0 0 0 22px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* captions overlay */
.hplayer__cc { position: absolute; left: 50%; bottom: 76px; transform: translateX(-50%); max-width: 84%; text-align: center;
  font-size: clamp(0.9rem, 0.8rem + 0.5vw, 1.08rem); line-height: 1.4; color: #fff; pointer-events: none;
  transition: bottom 0.3s var(--ease); }
.hplayer__cc span { background: rgba(6,8,14,0.64); padding: 3px 10px; border-radius: 7px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.hplayer__cc i { font-style: normal; transition: color 0.12s linear; }
/* the live word's plate is drawn with box-shadow spread, not padding, so nothing reflows */
.hplayer__cc i.is-live { color: var(--accent); border-radius: 4px;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent); }
.hplayer__cc:empty { display: none; }
/* captions stay out of the idle frame: poster, one play button, nothing else */
.hplayer__stage[data-state="idle"] .hplayer__cc { opacity: 0; }
.hplayer__stage:hover .hplayer__cc, .hplayer__stage[data-state="paused"] .hplayer__cc { bottom: 82px; }

/* control bar */
.hplayer__bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; background: linear-gradient(to top, rgba(4,6,10,0.85), rgba(4,6,10,0.4) 60%, transparent);
  opacity: 0; transform: translateY(8px); transition: opacity 0.3s var(--ease), transform 0.3s var(--ease); }
.hplayer__stage:hover .hplayer__bar, .hplayer__stage[data-state="paused"] .hplayer__bar,
.hplayer__stage.hp-touch .hplayer__bar { opacity: 1; transform: none; }
.hplayer__stage[data-state="idle"] .hplayer__bar { opacity: 0; pointer-events: none; }

.hp-btn { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border: none; background: transparent;
  color: #fff; cursor: pointer; border-radius: 8px; opacity: 0.82; transition: opacity 0.2s var(--ease), background 0.2s var(--ease); }
.hp-btn:hover { opacity: 1; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
.hp-btn svg { width: 20px; height: 20px; fill: #fff; }
.hp-btn--mute svg, .hp-btn--full svg { fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hp-i-play, .hp-i-sound { display: none; }
.hplayer__stage[data-state="paused"] .hp-i-pause, .hplayer__stage[data-state="idle"] .hp-i-pause { display: none; }
.hplayer__stage[data-state="paused"] .hp-i-play, .hplayer__stage[data-state="idle"] .hp-i-play { display: block; }

.hp-spacer { flex: 1 1 auto; }

/* the progress line: bottom edge of the frame, above the bar, always visible in playback */
.hp-scrub { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; height: 22px;
  display: flex; align-items: flex-end; cursor: pointer; touch-action: none;
  opacity: 0; transition: opacity 0.3s var(--ease); }
.hplayer__stage:not([data-state="idle"]) .hp-scrub { opacity: 1; }
.hplayer__stage[data-state="idle"] .hp-scrub { pointer-events: none; }
/* a dark plate so the line survives bright footage and reads at 0% */
.hp-scrub__plate { position: absolute; left: 0; right: 0; bottom: 0; height: 6px;
  background: rgba(4,6,10,0.6); transition: height 0.15s var(--ease); }
.hp-scrub__track { position: relative; width: 100%; height: 6px; overflow: hidden;
  background: rgba(255,255,255,0.18); transition: height 0.15s var(--ease); }
.hp-scrub:hover .hp-scrub__track, .hp-scrub.dragging .hp-scrub__track,
.hp-scrub:focus-visible .hp-scrub__track { height: 10px; }
.hp-scrub:hover .hp-scrub__plate, .hp-scrub.dragging .hp-scrub__plate,
.hp-scrub:focus-visible .hp-scrub__plate { height: 10px; }
.hp-scrub__buf { position: absolute; left: 0; top: 0; height: 100%; width: 0; background: rgba(255,255,255,0.26); }
.hp-scrub__fill { position: absolute; left: 0; top: 0; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--accent-2), var(--accent));
  box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 55%, transparent); }
/* white leading-edge cap, something to aim the drag at */
.hp-scrub__cap { position: absolute; bottom: 0; left: 0; width: 4px; height: 14px; background: #fff;
  border-radius: 2px; transform: translateX(-50%) scaleY(0); transform-origin: bottom center;
  transition: transform 0.18s var(--ease); box-shadow: 0 0 8px rgba(255,255,255,0.6); }
.hp-scrub:hover .hp-scrub__cap, .hp-scrub.dragging .hp-scrub__cap,
.hp-scrub:focus-visible .hp-scrub__cap { transform: translateX(-50%) scaleY(1); }
.hp-scrub:focus-visible { outline: none; }

/* CC toggle */
.hp-btn--cc { width: auto; padding: 0 9px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; }
.hp-btn--cc.is-on { background: rgba(255,255,255,0.18); opacity: 1; }

/* speed */
.hp-speed { position: relative; }
.hp-btn--speed { width: auto; padding: 0 9px; font-size: 0.76rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.hp-speed__menu { position: absolute; bottom: 44px; left: 50%; transform: translateX(-50%); min-width: 76px; padding: 6px;
  background: rgba(10,12,18,0.97); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 16px 40px rgba(0,0,0,0.5);
  display: none; flex-direction: column; gap: 2px; }
.hp-speed__menu.open { display: flex; }
.hp-speed__menu button { border: none; background: transparent; color: rgba(255,255,255,0.8); font-size: 0.78rem; font-weight: 600;
  padding: 7px 10px; border-radius: 7px; cursor: pointer; text-align: center; font-variant-numeric: tabular-nums; }
.hp-speed__menu button:hover { background: rgba(255,255,255,0.09); color: #fff; }
.hp-speed__menu button.is-on { background: rgba(255,255,255,0.15); color: #fff; }

@media (max-width: 560px) {
  .hp-btn { width: 30px; height: 30px; }
  .hp-btn--full { display: none; }
  .hplayer__cc { bottom: 62px; }
}
@media (prefers-reduced-motion: reduce) {
  .hplayer__big-glow { animation: none; }
  .hplayer__big, .hplayer__bar, .hplayer__scrim, .hplayer__cc,
  .hp-scrub, .hp-scrub__track, .hp-scrub__plate, .hp-scrub__cap { transition: none; }
  .hplayer__cc i { transition: none; }
}

/* ----------------------------- Deliverables ----------------------------- */
.deliverables { padding-top: clamp(28px, 4.5vh, 56px); }
.deliverables__title { text-align: center; margin-bottom: clamp(48px, 8vh, 84px); }

.group { margin-bottom: clamp(64px, 10vh, 112px); }
.group:last-child { margin-bottom: 0; }
.group__head { display: flex; align-items: center; justify-content: center; gap: 22px; margin-bottom: 36px; }
.group__rule { flex: 1; height: 1px; background: var(--line); max-width: 220px; transform: scaleX(0); transform-origin: center; transition: transform 0.9s var(--ease); }
.group__head.is-in .group__rule { transform: scaleX(1); }
.group__meta { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.group__label { font-family: var(--display); font-size: 1.05rem; font-weight: 600; letter-spacing: -0.01em; color: var(--text); }
.group__count { font-family: var(--mono); font-size: 0.72rem; color: var(--text-3); letter-spacing: 0.18em; }

.grid { display: grid; gap: 24px; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); max-width: 860px; margin-inline: auto; }
.grid--1 { grid-template-columns: 1fr; }

/* Preview card: a framed browser window + clear type hierarchy */
/* ---------------------------- Deliverable card ---------------------------
   Deliberately minimal: a preview image, a title, and "Preview". No browser
   chrome on the thumb, no kicker, no description — the card's job is to make
   the prospect open it, and every extra line competes with that. */
.pcard {
  appearance: none; font: inherit; color: inherit; text-align: center; position: relative;
  background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius);
  padding: 12px 12px 18px; cursor: pointer; display: flex; flex-direction: column; gap: 14px;
  transform-style: preserve-3d; will-change: transform;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 10px 30px -22px rgba(0, 0, 0, 0.55);
  transition: transform 0.6s var(--ease), border-color 0.6s var(--ease), box-shadow 0.6s var(--ease);
}
.pcard:hover { border-color: color-mix(in srgb, var(--accent) 35%, transparent); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 30px 60px -28px rgba(0, 0, 0, 0.70), 0 0 0 1px color-mix(in srgb, var(--accent) 8%, transparent); }
.pcard:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.pcard::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), var(--accent-soft), transparent 44%); opacity: 0; transition: opacity 0.35s var(--ease); pointer-events: none; }
.pcard:hover::after { opacity: 1; }

.thumb { position: relative; display: block; border-radius: 12px; overflow: hidden; background: var(--surface-2); aspect-ratio: 4 / 3; border: 1px solid var(--line-soft); box-shadow: 0 14px 30px -18px rgba(0, 0, 0, 0.70); }
.thumb--wide { aspect-ratio: 960 / 260; }
.thumb__img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; display: block; transition: transform 0.6s var(--ease); }
.pcard:hover .thumb__img { transform: scale(1.035); }
.thumb--wide .thumb__img { object-position: 50% 50%; }
.thumb::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); }

.pcard__title { display: block; font-family: var(--display); font-size: 1.08rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; color: var(--text); }
.pcard__link { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 0.84rem; font-weight: 600; color: var(--text-3); letter-spacing: 0.005em; transition: gap 0.3s var(--ease), color 0.3s var(--ease); }
.pcard:hover .pcard__link { gap: 10px; color: var(--accent); }
.pcard__link .arrow { margin-left: 0; border-color: currentColor; }

/* SVG mock palette (legacy) */
.mock { width: 100%; height: auto; }
.m-stroke { fill: none; stroke: rgba(0, 0, 0, 0.62); stroke-width: 2; }
.m-line { stroke: rgba(0, 0, 0, 0.26); stroke-width: 1.5; }
.m-fill { fill: var(--accent); }
.m-soft { fill: rgba(0, 0, 0, 0.35); }
.m-faint { fill: rgba(0, 0, 0, 0.15); }
.m-panel { fill: var(--surface-2); stroke: rgba(0, 0, 0, 0.26); stroke-width: 1; }

/* --------------------------------- CTA ---------------------------------- */
.cta { text-align: center; overflow: hidden; }
.cta::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(60% 60% at 50% 120%, rgba(110, 200, 245, 0.12), transparent 70%);
  pointer-events: none;
}
.cta__wrap { position: relative; }
.cta__title {
  margin: 0 0 36px;
  font-family: var(--display);
  font-size: clamp(2.4rem, 6.5vw, 4rem);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.035em;
}

/* -------------------------------- Footer -------------------------------- */
.footer { position: relative; height: 72px; background: rgba(243, 244, 239, 0.03); }
.footer::before { content: ""; position: absolute; left: 0; right: 0; top: -140px; height: 140px; pointer-events: none; background: linear-gradient(180deg, transparent, rgba(243, 244, 239, 0.03)); }
.footer__inner { height: 100%; display: flex; align-items: center; justify-content: center; }
.footer__note { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-3); line-height: 48px; }

/* ------------------------------ Sticky CTA ------------------------------ */
/* Booking one tap away for the whole scroll; yields only to the closing CTA. */
.stickycta {
  position: fixed;
  right: clamp(16px, 3vw, 28px);
  bottom: clamp(16px, 3vw, 28px);
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  border-radius: 980px;
  background: var(--accent, var(--text));
  color: var(--accent-ink, var(--bg));
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  box-shadow: 0 12px 40px color-mix(in srgb, var(--accent) 38%, transparent),
    0 0 0 1px rgba(0, 0, 0, 0.13);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(0.96);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease),
    visibility 0s linear 0.35s;
}
.stickycta.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translate(var(--mgx, 0px), var(--mgy, 0px)) scale(1);
  transition: opacity 0.35s var(--ease), transform 0.25s var(--ease), visibility 0s;
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease), visibility 0s;
}
.stickycta.is-visible:hover { transform: translate(var(--mgx, 0px), calc(var(--mgy, 0px) - 2px)) scale(1.02); }
.stickycta__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-ink, var(--bg));
  animation: stickyPulse 2.4s var(--ease) infinite;
}
@keyframes stickyPulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-ink) 55%, transparent); }
  70%, 100% { box-shadow: 0 0 0 7px transparent; }
}
@media (max-width: 560px) {
  .stickycta { left: clamp(16px, 3vw, 28px); right: clamp(16px, 3vw, 28px); justify-content: center; }
}

/* ------------------------------- Lightbox ------------------------------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(20px, 5vw, 64px);
  background: rgba(4, 5, 6, 0.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s var(--ease), visibility 0.4s var(--ease);
}
.lightbox.open { opacity: 1; visibility: visible; }
.lightbox__inner {
  max-width: 1000px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.lightbox__stage {
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface);
  max-height: 78vh;
  transform-origin: top left;
  transition: transform 0.5s var(--ease);
  will-change: transform;
}
.lightbox__stage img { width: 100%; height: auto; max-height: 78vh; object-fit: contain; display: block; }
.lightbox__stage--embed { height: 78vh; background: #fff; }
.lightbox__frame { width: 100%; height: 100%; border: 0; display: block; background: #fff; }
.lightbox__open { margin-left: 12px; font-size: 0.85rem; font-weight: 500; color: rgba(255, 255, 255, 0.75); border-bottom: 1px solid rgba(255, 255, 255, 0.35); transition: color 0.3s var(--ease); }
.lightbox__open:hover { color: #fff; }
.lightbox__placeholder { padding: clamp(28px, 6vw, 64px); text-align: center; }
.lightbox__placeholder .mock { max-width: 560px; margin: 0 auto 22px; }
.lightbox__placeholder p { margin: 0; font-size: 0.9rem; color: var(--text-3); }
.lightbox__title { margin: 0; font-size: 1.05rem; font-weight: 600; color: #fff; }
.lightbox__close {
  position: absolute;
  top: clamp(16px, 3vw, 28px);
  right: clamp(16px, 3vw, 28px);
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
  transition: background 0.3s var(--ease), transform 0.3s var(--ease);
}
.lightbox__close:hover { background: rgba(255, 255, 255, 0.15); transform: rotate(90deg); }

/* --------------------------- Calendly popup ----------------------------- */
.cal-modal {
  position: fixed;
  inset: 0;
  z-index: 210;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 48px);
  background: rgba(4, 5, 6, 0.82);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s var(--ease), visibility 0.25s var(--ease);
}
.cal-modal.open { opacity: 1; visibility: visible; }
.cal-frame {
  position: relative;
  width: min(820px, 100%);
  height: min(1000px, 92vh);
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.45);
  transform: scale(0.98);
  transition: transform 0.28s var(--ease);
}
.cal-modal.open .cal-frame { transform: scale(1); }
.cal-frame iframe { position: relative; z-index: 1; width: 100%; height: 100%; border: 0; display: block; background: transparent; }
.cal-loader {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: opacity 0.3s var(--ease);
}
.cal-loader span { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: calDot 1s ease-in-out infinite; }
.cal-loader span:nth-child(2) { animation-delay: 0.15s; }
.cal-loader span:nth-child(3) { animation-delay: 0.3s; }
.cal-modal.cal-ready .cal-loader { opacity: 0; }

/* ------------------------------- Keyframes ------------------------------ */
@keyframes glowDrift {
  0% { transform: translate3d(-1.5%, 0, 0); opacity: 0.8; }
  100% { transform: translate3d(1.5%, 1.5%, 0); opacity: 1; }
}
@keyframes playPulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.16); }
  70%, 100% { box-shadow: 0 0 0 18px rgba(255, 255, 255, 0); }
}
@keyframes chevBob {
  0%, 100% { transform: rotate(45deg) translate(0, 0); }
  50% { transform: rotate(45deg) translate(2px, 2px); }
}
@keyframes calDot {
  0%, 100% { opacity: 0.3; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-4px); }
}

/* ------------------------------ Responsive ------------------------------ */
@media (max-width: 860px) {
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  body { font-size: 16px; }
  .grid--3, .grid--2 { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; }
  .thumb--wide { aspect-ratio: 16 / 9; }
  .group__rule { max-width: 60px; }
  .hero__actions .btn { width: 100%; }
  .stickycta { padding: 12px 22px; }
  .cal-frame { height: 90vh; border-radius: 16px; }
}

/* --------------------------- Reduced motion ----------------------------- */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .lightbox, .lightbox__stage { transition: none; }
  .hero::before, .hplayer__big-glow, .hero__actions .arrow-down { animation: none; }
  .mark::after { transition: none; transform: scaleX(1); }
  .group__rule { transition: none; transform: scaleX(1); }
  .thumb__img { transition: none; }
  .pcard { transition: none; }
  .stickycta { transform: none; transition: opacity 0.25s linear, visibility 0s linear 0.25s; }
  .stickycta.is-visible { transform: none; transition: opacity 0.25s linear; }
  .stickycta__dot { animation: none; }
  .cal-modal { transition: opacity 0.15s linear; }
  .cal-frame { transition: none; transform: none; }
  .cal-loader span { animation: none; }
}

/* ---------------------- Hero photo-swarm (signature) -------------------- */
/* Overlay above the already-visible hero. pointer-events none throughout. */
.swarm { position: absolute; inset: 0; pointer-events: none; z-index: 5; overflow: visible; }
.swarm__ph { position: absolute; width: clamp(84px, 9vw, 128px); aspect-ratio: 4 / 5; border-radius: 14px; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.10); box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.70); background: var(--surface);
  opacity: 0; transform: translate(var(--ox), var(--oy)) rotate(var(--r, 0deg)) scale(0.92); will-change: transform, opacity; }
.swarm__ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.swarm.is-on .swarm__ph { animation: swarmIn 2.6s cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes swarmIn {
  0%   { opacity: 0; transform: translate(var(--ox), var(--oy)) rotate(var(--r, 0deg)) scale(0.92); }
  28%  { opacity: 1; transform: translate(var(--ix), var(--iy)) rotate(calc(var(--r, 0deg) * 0.4)) scale(1); }
  52%  { opacity: 1; transform: translate(var(--ix), var(--iy)) rotate(calc(var(--r, 0deg) * 0.4)) scale(1); }
  100% { opacity: 0; transform: translate(var(--ox), var(--oy)) rotate(var(--r, 0deg)) scale(0.92); }
}
@media (prefers-reduced-motion: reduce) { .swarm { display: none; } }
@media (max-width: 760px) { .swarm { display: none; } }

/* reduced / static: jump to final states (no mid-transition captures, honours prefers-reduced-motion) */
html.reduced *, html.reduced *::before, html.reduced *::after { transition-duration: 0s !important; animation-duration: 0s !important; animation-delay: 0s !important; transition-delay: 0s !important; }

/* ------------------------- Sender options (pitch site) ------------------- */
/* Agency branding: small top-left lockup. Configured in PITCH_CONFIG.brand; removed when empty. */
/* Agency lockup: centred at the top of the hero, mark + wordmark. It is the only
   agency branding on the page besides the footer line. */
.agency-bar { position: absolute; top: clamp(18px, 3vw, 28px); left: 50%; transform: translateX(-50%); z-index: 6; display: inline-flex; align-items: center; gap: 10px; }
.agency-bar a { display: inline-flex; align-items: center; gap: 10px; }
.agency-bar img { height: 30px; width: auto; display: block; }
.agency-bar span { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-2); }
.hero { position: relative; }

/* Hero embed (Loom / Wistia) */
.hplayer__embed { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; background: #05060a; }
.hplayer__stage[data-state="embed"] .hplayer__scrim, .hplayer__stage[data-state="embed"] .hplayer__big, .hplayer__stage[data-state="embed"] .hplayer__bar, .hplayer__stage[data-state="embed"] .hplayer__cc { display: none; }

/* Inline Calendly (replaces the CTA button + modal) */
.cta__title { margin-bottom: 28px; }
.cal-inline { position: relative; width: min(900px, 100%); margin: 0 auto; height: min(760px, 92vh); border-radius: 20px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 30px 80px -40px rgba(0, 0, 0, 0.70); }
.cal-inline iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Case studies (optional, PITCH_CONFIG.caseStudies) */
/* =============================== RESULTS ================================ */
/* Story-style proof graphics, 9:16, three across. Each one opens full-size in the
   same lightbox the deliverable cards use (main.js binds .pcard and .rcard alike).
   Nine reads best; the grid just gets shorter with fewer. */
.results { padding-top: 0; }
.results__title { text-align: center; margin-bottom: clamp(36px, 6vh, 60px); }
/* Flex, not grid, so an incomplete last row CENTRES instead of hugging the left
   edge. Nine cards is the fullest read, but 3 is common and 4 or 5 happen; with
   grid, a count that isn't a multiple of 3 leaves visible empty slots. */
.results__grid {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 26px; max-width: 1080px; margin-inline: auto;
}
.rcard { flex: 0 1 calc((100% - 52px) / 3); max-width: 336px; }
.rcard {
  display: flex; flex-direction: column; gap: 14px; padding: 0;
  border: none; background: transparent; color: inherit; text-align: center;
  cursor: pointer; font: inherit;
  transition: transform 0.45s var(--ease);
}
.rcard__shot {
  display: block; position: relative; overflow: hidden;
  aspect-ratio: 9 / 16; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--surface-2);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45);
  transition: border-color 0.45s var(--ease), box-shadow 0.45s var(--ease);
}
.rcard__shot img, .rcard__shot iframe {
  width: 100%; height: 100%; object-fit: cover; display: block; border: 0;
}
.rcard__shot::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, var(--accent-soft), transparent 45%);
  opacity: 0; transition: opacity 0.45s var(--ease);
}
.rcard:hover { transform: translateY(-6px); }
.rcard:hover .rcard__shot, .rcard:focus-visible .rcard__shot {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.55),
              0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent);
}
.rcard:hover .rcard__shot::after { opacity: 1; }
.rcard:focus-visible { outline: none; }
/* A video entry is not a lightbox trigger — it plays in place. */
.rcard--video { cursor: default; }
.rcard--video:hover { transform: none; }
.rcard__meta { display: flex; flex-direction: column; gap: 4px; }
.rcard__head {
  font-family: var(--display); font-size: 0.98rem; font-weight: 600;
  line-height: 1.3; letter-spacing: -0.01em; color: var(--text);
}
.rcard__tag {
  font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3);
}
@media (max-width: 860px) {
  .results__grid { gap: 20px; }
  .rcard { flex-basis: calc((100% - 20px) / 2); }
}
@media (max-width: 700px) { .cal-inline { height: 80vh; border-radius: 16px; } }
@media (max-width: 460px) {
  .results__grid { gap: 16px; }
  .rcard { flex-basis: calc((100% - 16px) / 2); }
  .rcard__head { font-size: 0.88rem; }
  .rcard__tag { font-size: 0.66rem; }
}
@media (prefers-reduced-motion: reduce) {
  .rcard, .rcard__shot, .rcard__shot::after { transition: none; }
  .rcard:hover { transform: none; }
}

/* ------------------------- Bridge (unaware mode) ------------------------- */
.bridge { padding-bottom: clamp(24px, 4vh, 48px); }
.bridge__head { text-align: center; margin-bottom: clamp(56px, 9vh, 96px); }
.bridge__head .eyebrow { margin-bottom: 14px; }
.beat { display: grid; grid-template-columns: 92px minmax(0, 1.25fr) minmax(280px, 0.9fr); gap: clamp(24px, 4vw, 56px); align-items: start; padding-block: clamp(40px, 6vh, 64px); border-top: 1px solid var(--line-soft); }
.beat:last-of-type { border-bottom: 1px solid var(--line-soft); }
.beat__num { display: flex; flex-direction: column; gap: 14px; padding-top: 6px; }
.beat__idx { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.2em; color: var(--accent); }
.beat__rule { width: 36px; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 0.9s var(--ease) 0.25s; }
.beat.is-in .beat__rule { transform: scaleX(1); }
.beat__kicker { margin: 0 0 12px; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-3); }
.beat__title { margin: 0 0 16px; font-family: var(--display); font-size: clamp(1.35rem, 2.3vw, 1.8rem); font-weight: 700; line-height: 1.16; letter-spacing: -0.022em; text-wrap: balance; }
.beat__text { margin: 0; font-size: 1.02rem; line-height: 1.65; color: var(--text-2); max-width: 56ch; }
.beat__aside { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 22px 24px; box-shadow: 0 18px 48px -28px rgba(0, 0, 0, 0.55); }
.aside__note { margin: 16px 0 0; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); }
/* 01 · price ladder */
.ladder { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ladder li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); font-size: 0.95rem; }
.ladder li span { color: var(--text-2); }
.ladder li b { font-family: var(--display); font-weight: 700; white-space: nowrap; }
.ladder__gap { background: transparent !important; border: 1px dashed rgba(110, 200, 245, 0.45); }
.ladder__gap b { color: var(--accent); font-family: var(--mono); font-weight: 500; font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; }
/* 02 · before / after */
.shift { display: grid; grid-template-columns: 1fr 28px 1fr; align-items: center; gap: 10px; }
.shift__col { display: grid; gap: 4px; padding: 14px 12px; border-radius: 12px; background: var(--surface-2); }
.shift__col--on { background: var(--accent-soft); border: 1px solid rgba(110, 200, 245, 0.25); }
.shift__label { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-3); }
.shift__col b { font-family: var(--display); font-size: 1rem; line-height: 1.2; letter-spacing: -0.01em; }
.shift__col--on b { color: var(--accent-deep); }
.shift__sub { font-size: 0.8rem; color: var(--text-2); line-height: 1.35; }
.shift__arrow { width: 22px; height: 22px; border-right: 1.6px solid var(--accent); border-top: 1.6px solid var(--accent); transform: rotate(45deg) scale(0.6); justify-self: center; }
/* 03 · sums */
.sums { display: grid; gap: 10px; }
.sum { display: grid; gap: 4px; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); }
.sum b { font-family: var(--display); font-size: 1.5rem; font-weight: 700; letter-spacing: -0.025em; line-height: 1; }
.sum span { font-size: 0.86rem; color: var(--text-2); line-height: 1.4; }
.sum--on { background: var(--accent-soft); border: 1px solid rgba(110, 200, 245, 0.25); }
.sum--on b { color: var(--accent-deep); }
/* 04 · the week */
.week { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.week li { display: grid; grid-template-columns: 96px 1fr; gap: 12px; align-items: baseline; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); }
.week b { font-family: var(--display); font-size: 1.05rem; font-weight: 700; letter-spacing: -0.015em; }
.week span { font-size: 0.86rem; color: var(--text-2); line-height: 1.4; }
.bridge__close { text-align: center; padding-top: clamp(44px, 7vh, 72px); display: grid; gap: 24px; justify-items: center; }
.bridge__closing { margin: 0; max-width: 46ch; font-family: var(--display); font-size: clamp(1.15rem, 1.9vw, 1.45rem); font-weight: 600; line-height: 1.35; letter-spacing: -0.015em; text-wrap: balance; }
.cta__sub { margin: -12px auto 32px; max-width: 52ch; font-size: 1.02rem; line-height: 1.6; color: var(--text-2); }
@media (max-width: 900px) {
  .beat { grid-template-columns: 1fr; gap: 22px; }
  .beat__num { flex-direction: row; align-items: center; }
}

/* ---- mobile hardening (references/mobile.md) ---- */
img, svg, video, canvas, iframe { max-width: 100%; height: auto; }
p, li, td, th, blockquote, figcaption,
h1, h2, h3, h4, h5, h6 { overflow-wrap: anywhere; }
table, pre { display: block; max-width: 100%; overflow-x: auto; }
@media (max-width: 700px) {
  .tag, [class*="badge"], [class*="pill"] { margin-left: 0; }
}
@media (max-width: 420px) {
  .tok-merge, .tok-link, code { white-space: normal; }
}

/* =========================================================================
   OXIUM HOUSE SKIN · pitch site (index.html) only. Locked 2026-10-10 by DJ.
   ---------------------------------------------------------------------------
   The pitch site is the AGENCY's page, so it wears the agency's colour on every
   build, never a colour lifted from the prospect. The look comes from the Oxium
   glass mark (house/assets/oxium-logo.png): a navy-black body with ice-cyan →
   azure light on the edges and a violet/pink iridescent fringe, the same
   translucent-glass feel as Apple's iPhone 16 "Built for Apple Intelligence" art.

   HOW TO APPLY (every build):
     1. Replace the :root colour tokens in the build's styles.css with the block
        marked TOKENS below (fonts, spacing and radius stay as they are).
     2. Paste everything below "OVERRIDES" at the very END of styles.css.
     3. Sweep any remaining literal accent rgba() left by the template skin
        (grep the old accent's rgb triple) to rgba(110, 200, 245, a).
   The prospect's funnel pages (brand.css) are untouched: those stay in the
   prospect's own brand.
   ========================================================================= */

/* ------------------------------- TOKENS --------------------------------- */
:root {
  --bg: #05070c;
  --bg-2: #080b13;
  --surface: #0d111a;
  --surface-2: #131824;
  --line: rgba(214, 232, 255, 0.13);
  --line-soft: rgba(214, 232, 255, 0.07);

  --text: #eef4fb;
  --text-2: #a3b0c2;
  --text-3: #8a97aa;

  --accent: #6ec8f5;          /* solid ice-cyan, for small UI and Calendly's primary colour */
  --accent-2: #b8e8fc;
  --accent-deep: #3d8fd6;
  --accent-violet: #9b8cff;
  --accent-ink: #04070d;
  --accent-soft: rgba(110, 200, 245, 0.13);

  /* the Oxium glass: the logo's edge light, ice → azure → violet → pink */
  --glass: linear-gradient(100deg, #c9efff 0%, #6ec8f5 28%, #4f8dff 55%, #9b8cff 80%, #e4a8ff 100%);
  --glass-glow: 0 0 0 1px rgba(110, 200, 245, 0.10), 0 18px 50px -14px rgba(79, 141, 255, 0.45), 0 10px 40px -18px rgba(155, 140, 255, 0.45);
}

/* ------------------------------ OVERRIDES ------------------------------- */
/* canvas: navy-black with a cool blue bloom up top and a faint violet one low,
   the way the iPhone art glows behind the glass */
body::before {
  background:
    radial-gradient(70% 45% at 50% -8%, rgba(79, 141, 255, 0.16), transparent 62%),
    radial-gradient(45% 35% at 100% 8%, rgba(110, 200, 245, 0.07), transparent 60%),
    radial-gradient(50% 40% at 0% 100%, rgba(155, 140, 255, 0.06), transparent 60%),
    repeating-linear-gradient(115deg, rgba(214, 232, 255, 0.012) 0 1px, transparent 1px 9px),
    linear-gradient(180deg, var(--bg), var(--bg-2)) !important;
}
.hero::before { background: radial-gradient(120% 70% at 50% -10%, rgba(110, 200, 245, 0.10), transparent 60%) !important; }
::selection { background: var(--accent); color: var(--accent-ink); }

/* glass text: eyebrows and the hero's money mark */
.eyebrow, .hero__eyebrow, .mark {
  background: var(--glass); -webkit-background-clip: text; background-clip: text;
  color: transparent !important; -webkit-text-fill-color: transparent;
}
.mark::after { background: var(--glass) !important; box-shadow: 0 0 14px rgba(110, 200, 245, 0.55); }

/* glass pill: dark translucent fill, luminous gradient edge, light text
   (the "Learn more" / "Shop iPhone" pills in the reference art) */
.btn--primary, .stickycta {
  background:
    linear-gradient(180deg, rgba(22, 30, 46, 0.86), rgba(9, 13, 22, 0.86)) padding-box,
    var(--glass) border-box !important;
  border: 1.5px solid transparent !important;
  color: var(--text) !important;
  box-shadow: var(--glass-glow) !important;
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
}
.btn--primary:hover, .stickycta.is-visible:hover {
  box-shadow: 0 0 0 1px rgba(110, 200, 245, 0.18), 0 22px 60px -14px rgba(79, 141, 255, 0.6), 0 12px 48px -16px rgba(155, 140, 255, 0.6) !important;
}
.stickycta__dot { background: var(--glass) !important; animation: oxPulse 2.4s var(--ease) infinite !important; }
@keyframes oxPulse {
  0% { box-shadow: 0 0 0 0 rgba(110, 200, 245, 0.55); }
  70%, 100% { box-shadow: 0 0 0 7px rgba(110, 200, 245, 0); }
}
.btn--ghost:hover { border-color: rgba(110, 200, 245, 0.55); color: var(--text); box-shadow: 0 0 24px -8px rgba(110, 200, 245, 0.5); }

/* player: glass scrubber and play glow */
.hp-scrub__fill { background: var(--glass) !important; box-shadow: 0 0 12px rgba(110, 200, 245, 0.55) !important; }

/* deliverable cards: glass edge on hover */
.pcard:hover {
  border-color: transparent !important;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(140deg, rgba(110, 200, 245, 0.55), rgba(79, 141, 255, 0.25), rgba(155, 140, 255, 0.55)) border-box !important;
  box-shadow: 0 30px 60px -28px rgba(0, 0, 0, 0.7), 0 0 40px -18px rgba(79, 141, 255, 0.45) !important;
}
.pcard:hover .pcard__link { color: var(--accent-2); }
.cal-loader span { background: var(--glass); }

/* hero player: thin glass rim + soft blue/violet halo, the biggest thing above the fold */
.hplayer__stage {
  border: 1px solid transparent !important;
  background: linear-gradient(#000, #000) padding-box,
    linear-gradient(140deg, rgba(201, 239, 255, 0.55), rgba(79, 141, 255, 0.18) 40%, rgba(155, 140, 255, 0.18) 60%, rgba(228, 168, 255, 0.5)) border-box !important;
  box-shadow: 0 40px 120px -40px rgba(79, 141, 255, 0.45), 0 30px 90px -50px rgba(155, 140, 255, 0.5) !important;
}
.hplayer__big { border-color: rgba(201, 239, 255, 0.55) !important; box-shadow: 0 0 40px -6px rgba(110, 200, 245, 0.45); }