/* ==========================================================================
   Click Lift | Whatever you freaking need
   Brand purple: Pantone 2685 C "Cadbury" (#330072), with deep-space purples,
   a lilac atmosphere glow and a small city-light gold accent.
   ========================================================================== */

:root {
  /* Brand */
  --brand: #330072;         /* Pantone 2685 C */
  --brand-600: #4a0fa0;
  --brand-500: #5b1fb8;

  /* Space */
  --space-990: #07020f;
  --space-950: #0b0418;     /* page background */
  --space-900: #140630;

  /* Light */
  --lilac: #ad7bf4;         /* atmosphere glow, focus, highlights */
  --lilac-soft: #ccb5ed;    /* small labels */
  --gold: #f7b955;          /* city-light gold (accent, use sparingly) */
  --gold-soft: #ffd58a;

  /* Text + lines */
  --text: #ffffff;
  --text-muted: #b9aed0;
  --text-dim: #8f84a9;
  --line: rgba(204, 181, 237, 0.14);
  --line-strong: rgba(204, 181, 237, 0.28);
  --card-bg: linear-gradient(180deg, rgba(51, 0, 114, 0.4), rgba(51, 0, 114, 0.12));

  /* Type */
  --font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Space Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Layout */
  --container: 1180px;
  --gutter: clamp(20px, 5vw, 40px);
  --header-h: 76px;
  --radius: 22px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ---------- Base ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background:
    url("../assets/stars-lg.svg") 0 0 / 1100px 1100px repeat,
    url("../assets/stars-sm.svg") 0 0 / 480px 480px repeat,
    var(--space-950);
  overflow-x: clip;
}

img,
svg { display: block; max-width: 100%; }

[hidden] { display: none !important; }

a { color: inherit; }

h1, h2, h3 {
  margin: 0;
  color: var(--text);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.08;
  text-wrap: balance;
}

h2 { font-size: clamp(2.2rem, 5vw, 3.7rem); }

h3 {
  font-size: 1.5rem;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

p {
  margin: 0 0 1em;
  color: var(--text-muted);
  text-wrap: pretty;
}

::selection { background: rgba(247, 185, 85, 0.35); color: #fff; }

:focus-visible {
  outline: 2px solid var(--gold-soft);
  outline-offset: 3px;
  border-radius: 6px;
}

.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.skip-link {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 999px;
  background: #fff;
  color: var(--brand);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform 0.2s var(--ease);
}
.skip-link:focus { transform: none; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  margin: 0 0 1.25rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--lilac-soft);
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.65em;
  padding: 16px 26px;
  border: 1px solid transparent;
  border-radius: 999px;
  font: 700 1rem/1 var(--font-sans);
  letter-spacing: -0.005em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    transform 0.3s var(--ease),
    box-shadow 0.3s var(--ease),
    background-color 0.25s ease,
    border-color 0.25s ease,
    color 0.25s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { border-radius: 999px; }

.btn-primary {
  background: #fff;
  color: var(--brand);
  box-shadow: 0 12px 32px -14px rgba(173, 123, 244, 0.75);
}
.btn-primary:hover {
  box-shadow:
    0 18px 42px -14px rgba(173, 123, 244, 0.9),
    0 0 0 5px rgba(173, 123, 244, 0.16);
}

.btn-ghost {
  color: #fff;
  background: rgba(255, 255, 255, 0.03);
  border-color: var(--line-strong);
}
.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.5);
}

.btn-small { padding: 11px 18px; font-size: 0.92rem; }
.btn-block { width: 100%; justify-content: center; }

.btn-rocket {
  width: 1.1em;
  height: 1.1em;
  fill: currentColor;
  flex: none;
  transition: transform 0.4s var(--ease);
}
.btn:hover .btn-rocket { transform: translate(3px, -3px); }

.btn-arrow {
  width: 1em;
  height: 1em;
  flex: none;
  transition: transform 0.3s var(--ease);
}
.btn:hover .btn-arrow { transform: translateX(3px); }

.btn[disabled],
.btn[aria-busy="true"] { cursor: progress; opacity: 0.85; transform: none; }
.btn[aria-busy="true"] .btn-rocket { animation: rocket-shake 0.5s linear infinite; }

@keyframes rocket-shake {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(1px, -1px); }
  75% { transform: translate(-1px, 1px); }
}

/* ---------- Header ---------- */

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  height: var(--header-h);
  display: flex;
  align-items: center;
  border-bottom: 1px solid transparent;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}
.site-header.menu-open { background: var(--space-950); border-bottom-color: var(--line); }
.site-header.is-scrolled {
  background: rgba(11, 4, 24, 0.78);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--line);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand {
  display: inline-flex;
  flex: none;
  color: #fff;
  text-decoration: none;
  border-radius: 6px;
}
.brand-logo {
  width: 150px;
  height: 26.2px; /* logo ratio 324.17 : 56.62 */
  fill: currentColor;
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav-menu a:not(.btn) {
  color: var(--text-muted);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s ease;
}
.nav-menu a:not(.btn):hover { color: #fff; }
@media (min-width: 821px) and (max-width: 1060px) {
  .nav-menu { gap: 20px; }
}

.nav-toggle {
  display: none;
  position: relative;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #fff;
  cursor: pointer;
}
.nav-toggle-bar,
.nav-toggle-bar::before,
.nav-toggle-bar::after {
  position: absolute;
  left: 11px;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.3s var(--ease), opacity 0.2s ease, top 0.3s var(--ease);
}
.nav-toggle-bar { top: 21px; }
.nav-toggle-bar::before,
.nav-toggle-bar::after { content: ""; left: 0; }
.nav-toggle-bar::before { top: -7px; }
.nav-toggle-bar::after { top: 7px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar::before { top: 0; transform: rotate(45deg); background: #fff; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar::after { top: 0; transform: rotate(-45deg); background: #fff; }

@media (max-width: 820px) {
  :root { --header-h: 66px; }

  .brand-logo { width: 132px; height: 23.1px; }

  .nav-toggle { display: inline-flex; }

  .nav-menu {
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px var(--gutter) 28px;
    background: var(--space-950);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.8);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.25s ease, transform 0.3s var(--ease), visibility 0s linear 0.3s;
  }
  .nav-menu.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 0.25s ease, transform 0.3s var(--ease), visibility 0s;
  }
  .nav-menu a:not(.btn) {
    display: block;
    padding: 16px 0;
    border-bottom: 1px solid var(--line);
    color: #fff;
    font-size: 1.15rem;
  }
  .nav-cta { margin-top: 20px; }
  .nav-cta .btn { width: 100%; justify-content: center; padding: 16px 22px; font-size: 1rem; }
}

/* ---------- Hero ---------- */

.hero {
  --planet-h: clamp(110px, 15vw, 220px);
  --planet-d: max(2600px, 210vw);

  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: calc(var(--header-h) + 40px) 0 calc(var(--planet-h) + 48px);
  background:
    radial-gradient(75% 60% at 50% 100%, rgba(91, 31, 184, 0.55), transparent 70%),
    radial-gradient(50% 45% at 88% 4%, rgba(51, 0, 114, 0.75), transparent 70%),
    radial-gradient(45% 40% at 6% 26%, rgba(51, 0, 114, 0.55), transparent 70%),
    var(--space-990);
}

.starfield {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
}

.hero-haze {
  position: absolute;
  left: 50%;
  bottom: calc(var(--planet-h) - 240px);
  z-index: -1;
  width: 150vw;
  height: 480px;
  transform: translateX(-50%);
  background: radial-gradient(50% 50% at 50% 50%, rgba(150, 90, 255, 0.34), rgba(150, 90, 255, 0.08) 50%, transparent 72%);
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.status-dot {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 12px rgba(247, 185, 85, 0.8);
}
.status-dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid rgba(247, 185, 85, 0.6);
  animation: ping 2.6s var(--ease) infinite;
}
@keyframes ping {
  0% { transform: scale(0.6); opacity: 1; }
  80%, 100% { transform: scale(2.2); opacity: 0; }
}

/* Typed service line: types one service at a time, like a terminal.
   The gold caret stays solid while typing and blinks while it waits. */
.hero-eyebrow {
  font-size: clamp(0.62rem, 3.1vw, 0.86rem); /* longest service still fits one line on a phone */
  letter-spacing: 0.12em;
}
.typer {
  display: inline-flex;
  align-items: center;
  height: 1.4em; /* same height with or without text, so nothing below jumps */
  white-space: nowrap;
}
.js .typer:not(.is-ready) .typer-text { visibility: hidden; }
.typer-caret {
  flex: none;
  width: 2px;
  height: 1.25em;
  margin-left: 0.1em;
  border-radius: 1px;
  background: var(--gold-soft);
  box-shadow: 0 0 8px rgba(247, 185, 85, 0.7);
  animation: caret-blink 1.1s steps(1, end) infinite;
}
.typer.is-typing .typer-caret { animation: none; }
@keyframes caret-blink { 50% { opacity: 0; } }

.hero-title {
  max-width: 12ch;
  margin-bottom: 26px;
  font-size: clamp(3rem, 8.6vw, 6.8rem);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.045em;
}
.hero-title .accent {
  background: linear-gradient(100deg, var(--gold-soft) 0%, var(--gold) 55%, #ef9d3c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-bottom: 0.06em; /* keeps descenders from clipping */
}

.hero-sub {
  max-width: 54ch;
  margin-bottom: 34px;
  font-size: clamp(1.05rem, 1.6vw, 1.22rem);
  line-height: 1.6;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

/* Planet horizon (a nod to the Earth-from-orbit brand photo) */
.planet {
  position: absolute;
  top: calc(100% - var(--planet-h));
  left: 50%;
  z-index: 0;
  width: var(--planet-d);
  height: var(--planet-d);
  margin-left: calc(var(--planet-d) / -2);
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(180deg, #4b1596 0, #2a0a5c calc(var(--planet-h) * 0.45), var(--space-950) var(--planet-h));
  box-shadow:
    0 0 0 1px rgba(220, 196, 255, 0.5),
    0 -4px 18px rgba(196, 160, 255, 0.6),
    0 -24px 80px 6px rgba(140, 80, 240, 0.4),
    inset 0 14px 34px -6px rgba(196, 160, 255, 0.5);
}

.planet-lights {
  position: absolute;
  top: 0;
  left: 50%;
  width: 100%;
  height: var(--planet-h);
  transform: translateX(-50%);
  background: url("../assets/city-lights.svg") center top / auto 100% no-repeat;
  opacity: 0.9;
}

/* Hero entrance */
.js .hero-content > * {
  opacity: 0;
  transform: translateY(18px);
  animation: rise 0.9s var(--ease) forwards;
}
.js .hero-content > :nth-child(2) { animation-delay: 0.08s; }
.js .hero-content > :nth-child(3) { animation-delay: 0.16s; }
.js .hero-content > :nth-child(4) { animation-delay: 0.24s; }
@keyframes rise { to { opacity: 1; transform: none; } }

@media (max-width: 520px) {
  .hero { --planet-h: 100px; }
  .hero-actions { flex-direction: column; align-items: stretch; width: 100%; max-width: 360px; }
  .hero-actions .btn { justify-content: center; }
}

/* ---------- Stats ---------- */

.stats { position: relative; padding-bottom: clamp(24px, 4vw, 48px); }

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.stat {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(28px, 3.5vw, 44px) clamp(18px, 2.4vw, 32px);
}
.stat + .stat { border-left: 1px solid var(--line); }

.stat-num {
  font-size: clamp(2.6rem, 5vw, 3.9rem);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.stat-label {
  max-width: 24ch;
  color: var(--text-muted);
  font-size: 0.96rem;
  line-height: 1.5;
}

@media (max-width: 860px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(3) { border-left: 0; }
  .stat:nth-child(n + 3) { border-top: 1px solid var(--line); }
}

/* ---------- Sections ---------- */

.section {
  position: relative;
  padding-block: clamp(64px, 8vw, 112px);
}

.section-head {
  max-width: 680px;
  margin-bottom: clamp(40px, 6vw, 60px);
}
.section-head--center {
  max-width: 820px;
  margin-inline: auto;
  text-align: center;
}
.section-intro {
  margin: 20px 0 0;
  font-size: clamp(1.06rem, 1.5vw, 1.2rem);
}
.section-intro a {
  color: #fff;
  font-weight: 700;
  text-decoration-color: rgba(247, 185, 85, 0.6);
  text-underline-offset: 4px;
}

.card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card-bg);
}

/* ---------- Why Click Lift (comparison) ---------- */

.why h2 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); }

.compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  max-width: 1040px;
  margin-inline: auto;
}

.compare-card { padding: clamp(28px, 3.4vw, 40px); }
.compare-card h3 { margin-bottom: 24px; font-size: 1.4rem; }

.compare-list {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.compare-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: var(--text-muted);
  line-height: 1.5;
}
.compare-list svg {
  flex: none;
  width: 24px;
  height: 24px;
  margin-top: -1px;
  padding: 5px;
  border-radius: 50%;
}

.compare-card--old { background: rgba(255, 255, 255, 0.02); }
.compare-card--old h3 { color: var(--text-muted); }
.compare-card--old svg { color: #ff9f95; background: rgba(255, 120, 110, 0.12); }

.compare-card--new {
  border-color: rgba(173, 123, 244, 0.45);
  background:
    radial-gradient(120% 100% at 100% 0%, rgba(173, 123, 244, 0.2), transparent 55%),
    var(--card-bg);
  box-shadow: 0 30px 70px -40px rgba(140, 80, 240, 0.75);
}
.compare-card--new li { color: #fff; }
.compare-card--new svg { color: var(--gold-soft); background: rgba(247, 185, 85, 0.14); }

@media (max-width: 760px) {
  .compare { grid-template-columns: 1fr; }
}

/* The drop, Battlestar style. js/main.js adds .is-armed to a card while its X's or checkmarks are
   still aboard the rocket (each slot shows an empty docking ring), then .is-dropped to each line
   as the rocket drops its icon off. Without JavaScript, or with reduced motion, nothing is hidden. */
.compare { position: relative; }

@media screen {
  .compare-card.is-armed .compare-list li:not(.is-dropped) svg {
    color: transparent;
    background: transparent;
    outline: 1px dashed rgba(255, 159, 149, 0.4);
    outline-offset: -1px;
  }
  .compare-card--new.is-armed .compare-list li:not(.is-dropped) svg { outline-color: rgba(255, 213, 138, 0.45); }
}

/* An icon lands: it slams in bright and draws itself (the X slashes, the check ticks) */
.compare-list li.is-dropped svg {
  animation:
    drop-pop 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.25) both,
    drop-draw 0.34s ease-out 0.05s backwards;
}
@keyframes drop-pop {
  0% { transform: scale(0.2); filter: brightness(2.8); }
  45% { transform: scale(1.3); }
  100% { transform: none; filter: none; }
}
@keyframes drop-draw {
  from { stroke-dasharray: 30 30; stroke-dashoffset: 30; }
  to { stroke-dasharray: 30 30; stroke-dashoffset: 0; }
}
/* An X is a hit, so the line jolts. A checkmark docks softly and its line lights up gold. */
.compare-card--old li.is-dropped { animation: drop-jolt 0.36s ease-out; }
@keyframes drop-jolt {
  20% { transform: translateX(-3px); }
  45% { transform: translateX(2.5px); }
  70% { transform: translateX(-1.5px); }
}
.compare-card--new li.is-dropped { animation: drop-glow 0.9s ease-out; }
@keyframes drop-glow {
  from { text-shadow: 0 0 14px rgba(255, 213, 138, 0.85); }
}

/* Effects layer over both cards. Everything in it is placed with left/top at a point (0 x 0 boxes). */
.drop-fx {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.drop-fx > * { position: absolute; left: 0; top: 0; width: 0; height: 0; }

/* The rocket, nose down: js/main.js moves it; the warp layer stretches it in and out of the jump */
.drop-ship { will-change: transform; }
.drop-ship-warp { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.drop-ship svg {
  position: absolute;
  left: -20px;
  top: -45px;
  width: 40px;
  height: 80px;
  max-width: none;
  overflow: visible;
}
.drop-ship.is-arriving .drop-ship-warp { animation: warp-in 0.34s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.drop-ship.is-leaving .drop-ship-warp { animation: warp-out 0.24s cubic-bezier(0.6, 0, 0.9, 0.4) both; }
@keyframes warp-in {
  0% { transform: scale(0.06, 2.8); opacity: 0; filter: brightness(4); }
  50% { transform: scale(1.14, 0.9); opacity: 1; filter: brightness(1.8); }
  100% { transform: none; opacity: 1; filter: none; }
}
@keyframes warp-out {
  0% { transform: none; opacity: 1; filter: none; }
  40% { transform: scale(1.12, 0.86); filter: brightness(2); }
  100% { transform: scale(0.05, 3); opacity: 0; filter: brightness(4); }
}

/* The FTL jump: a white-hot flash, a streak of light and a ripple, on the way in and on the way out */
.drop-jump > span {
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 50%;
}
.jump-glow {
  width: 104px;
  height: 104px;
  margin: -52px 0 0 -52px;
  background: radial-gradient(closest-side, #fff 0%, rgba(241, 233, 255, 0.95) 16%, rgba(173, 123, 244, 0.5) 46%, rgba(173, 123, 244, 0) 100%);
  animation: jump-glow 0.5s ease-out both;
}
@keyframes jump-glow {
  0% { transform: scale(0.1); opacity: 0; }
  16% { transform: scale(1); opacity: 1; }
  100% { transform: scale(0.3); opacity: 0; }
}
.drop-jump > .jump-streak {
  width: 260px;
  height: 3px;
  margin: -1.5px 0 0 -130px;
  border-radius: 3px;
  background: linear-gradient(90deg, rgba(226, 210, 255, 0), rgba(226, 210, 255, 0.9) 32%, #fff 50%, rgba(226, 210, 255, 0.9) 68%, rgba(226, 210, 255, 0));
  animation: jump-streak 0.46s ease-out both;
}
@keyframes jump-streak {
  0% { transform: scaleX(0); opacity: 0; }
  18% { transform: scaleX(1); opacity: 1; }
  100% { transform: scale(1.35, 0.3); opacity: 0; }
}
.jump-ring {
  width: 92px;
  height: 92px;
  margin: -46px 0 0 -46px;
  border: 1.5px solid rgba(226, 210, 255, 0.9);
  animation: jump-ring 0.62s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.jump-ring + .jump-ring {
  border-color: rgba(173, 123, 244, 0.75);
  animation-delay: 0.09s;
}
@keyframes jump-ring {
  0% { transform: scale(0.05); opacity: 1; }
  100% { transform: scale(1); opacity: 0; }
}

/* Engine sparks the rocket leaves behind on its way down */
.drop-dot::before {
  content: "";
  position: absolute;
  left: -1.5px;
  top: -1.5px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--gold-soft);
  box-shadow: 0 0 6px rgba(247, 185, 85, 0.85);
  animation: drop-dot 0.7s ease-out both;
}
@keyframes drop-dot {
  from { opacity: 0.9; }
  to { opacity: 0; transform: scale(0.4); }
}

/* An X hits: a red shock ring and sparks. A checkmark docks: a gold ring and a few twinkles. */
.drop-hit > span,
.drop-dock > span {
  position: absolute;
  left: -20px;
  top: -20px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.drop-hit > span {
  border: 2px solid rgba(255, 159, 149, 0.9);
  box-shadow: 0 0 14px rgba(255, 120, 110, 0.55);
  animation: hit-ring 0.5s ease-out both;
}
@keyframes hit-ring {
  from { transform: scale(0.3); opacity: 1; }
  to { transform: scale(1.25); opacity: 0; }
}
.drop-hit > i {
  position: absolute;
  left: 0;
  top: -1px;
  width: 7px;
  height: 2px;
  border-radius: 2px;
  background: var(--gold-soft);
  box-shadow: 0 0 6px rgba(255, 159, 149, 0.9);
  transform-origin: 0 50%;
  animation: hit-spark 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.drop-hit > i:nth-child(odd) { background: #ff9f95; }
@keyframes hit-spark {
  from { transform: rotate(var(--a)) translateX(5px) scaleX(1.4); opacity: 1; }
  to { transform: rotate(var(--a)) translateX(var(--d)) scaleX(0.3); opacity: 0; }
}
.drop-dock > span {
  border: 1.5px solid rgba(255, 213, 138, 0.95);
  box-shadow: 0 0 16px rgba(247, 185, 85, 0.5), inset 0 0 10px rgba(247, 185, 85, 0.3);
  animation: dock-ring 0.6s ease-out both;
}
@keyframes dock-ring {
  from { transform: scale(0.4); opacity: 1; }
  to { transform: scale(1.4); opacity: 0; }
}
.drop-dock > i {
  position: absolute;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  background: var(--gold-soft);
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
  animation: dock-twinkle 0.7s ease-out both;
}
.drop-dock > i:nth-of-type(1) { left: 17px; top: -14px; }
.drop-dock > i:nth-of-type(2) { left: -17px; top: -9px; animation-delay: 0.07s; }
.drop-dock > i:nth-of-type(3) { left: 12px; top: 15px; animation-delay: 0.14s; }
@keyframes dock-twinkle {
  0% { transform: scale(0) rotate(0deg); opacity: 0; }
  40% { transform: scale(1) rotate(45deg); opacity: 1; }
  100% { transform: scale(0.3) rotate(90deg); opacity: 0; }
}

/* ---------- Services ---------- */

/* Four stages (Launch, Lift, Accelerate, Orbit) side by side on wide screens,
   2 x 2 on tablets, stacked on phones. The fifth card always spans the full width. */
.services-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
@media (min-width: 1180px) {
  .services-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 639px) {
  .services-grid { grid-template-columns: 1fr; }
}

.service {
  --pad: clamp(24px, 2.4vw, 30px);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: var(--pad);
  overflow: hidden;
  transition: transform 0.4s var(--ease), border-color 0.4s ease, box-shadow 0.4s ease;
}
.service:hover {
  transform: translateY(-4px);
  border-color: rgba(173, 123, 244, 0.42);
  box-shadow: 0 24px 60px -30px rgba(140, 80, 240, 0.55);
}
.service h3 { font-size: clamp(1.6rem, 2.1vw, 1.9rem); }
.service p { margin: 0 0 8px; }

/* Stage titles (Launch, Lift, Accelerate, Orbit) in city-light gold, like "freaking" in the hero.
   The title hugs its word so every one gets the full sweep of the gradient. */
.service:not(.service-feature) h3 {
  align-self: flex-start;
  background: linear-gradient(100deg, var(--gold-soft) 0%, var(--gold) 55%, #ef9d3c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* What's in each stage, e.g. "Branding / Strategy / Websites" with gold dots between.
   Every item gets a dot in front of it. The list is pulled left by one dot and clipped,
   so the dot that would start each line is hidden and no line starts or ends with a dot. */
.service-list {
  --dot: 1.3em;
  display: flex;
  flex-wrap: wrap;
  row-gap: 2px;
  margin: -6px 0 0 calc(var(--dot) * -1);
  padding: 0;
  list-style: none;
  clip-path: inset(0 0 0 var(--dot));
  color: var(--lilac-soft);
  font-size: 0.97rem;
  font-weight: 600;
  line-height: 1.5;
}
.service-list li { white-space: nowrap; }
.service-list li::before {
  content: "\00B7";
  display: inline-block;
  width: var(--dot);
  text-align: center;
  color: var(--gold);
  font-weight: 800;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: auto 0 0;
  padding: 14px 0 0;
  list-style: none;
}
.tags li {
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--lilac-soft);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-transform: uppercase;
}

/* Buttons sit at the bottom so they line up across a row */
.service-cta { align-self: flex-start; margin-top: auto; }

/* The fifth card is the slogan, so it gets the gold treatment and the full width (words only, no animation) */
.service-feature {
  grid-column: 1 / -1;
  border-color: rgba(247, 185, 85, 0.4);
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(247, 185, 85, 0.16), transparent 55%),
    var(--card-bg);
}
.service-feature:hover {
  border-color: rgba(247, 185, 85, 0.62);
  box-shadow: 0 24px 60px -30px rgba(247, 185, 85, 0.45);
}
.service-feature h3 {
  font-size: clamp(1.9rem, 3.4vw, 2.8rem);
  background: linear-gradient(100deg, #fff 0%, var(--gold-soft) 45%, var(--gold) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.service-feature .tags li { color: var(--gold-soft); border-color: rgba(247, 185, 85, 0.3); }
.service-feature .service-cta { margin-top: 10px; }

/* Wide screens: the slogan on the left, what it covers and the button on the right */
@media (min-width: 900px) {
  .service-feature {
    --pad: clamp(32px, 3.6vw, 48px);
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    align-content: center;
    align-items: start;
    column-gap: clamp(36px, 5vw, 72px);
    row-gap: 14px;
  }
  .service-feature h3 {
    grid-column: 1;
    grid-row: 1 / span 3;
    align-self: center;
    font-size: clamp(2.4rem, 4.2vw, 3.5rem);
  }
  .service-feature p,
  .service-feature .tags,
  .service-feature .service-cta { grid-column: 2; }
  .service-feature p { max-width: 58ch; }
  .service-feature .tags { margin-top: 0; padding-top: 4px; }
  .service-feature .service-cta { justify-self: start; }
}

/* ---------- Service animations ----------
   Each of the four stage cards opens with a small scene starring the rocket from the logo (inline SVG in index.html).
   They only run while on screen (js/main.js adds .is-paused), and hold a still frame for reduced motion. */
.scene {
  position: relative;
  margin: calc(var(--pad) * -1) calc(var(--pad) * -1) 8px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(90% 75% at 50% 100%, rgba(91, 31, 184, 0.34), transparent 70%),
    linear-gradient(180deg, #14062d 0%, #0b0319 100%);
}
.scene > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.scene text { font-family: var(--font-mono); }
.scene-num {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 5px 9px 4px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: rgba(11, 4, 24, 0.55);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  line-height: 1;
  color: var(--lilac-soft);
}
.scene.is-paused,
.scene.is-paused * { animation-play-state: paused !important; }

/* Shared bits: twinkling stars and flickering flames */
.scene .tw { animation: twinkle 3.4s ease-in-out infinite; }
@keyframes twinkle {
  0%, 100% { opacity: 0.25; }
  50% { opacity: 1; }
}
.flick { animation: flick 0.13s ease-in-out infinite alternate; }
.flick-sm { animation: flick-sm 0.18s ease-in-out infinite alternate; }
@keyframes flick {
  from { transform: scale(0.9, 0.8); }
  to { transform: scale(1.04, 1.12); }
}
@keyframes flick-sm {
  from { transform: scale(0.94, 0.86); }
  to { transform: scale(1.02, 1.06); }
}

/* 01 Launch: countdown, ignition, liftoff (6s loop) */
.lc-rocket { animation: lc-rise 6s infinite; }
@keyframes lc-rise {
  0%, 45% { transform: translateY(0); opacity: 1; animation-timing-function: cubic-bezier(0.42, 0, 0.84, 0.6); }
  76% { transform: translateY(-218px); opacity: 1; }
  76.1%, 88% { transform: translateY(0); opacity: 0; animation-timing-function: ease-out; }
  100% { transform: translateY(0); opacity: 1; }
}
.lc-shake { animation: lc-shake 6s linear infinite; }
@keyframes lc-shake {
  0%, 31%, 47%, 100% { transform: none; }
  32% { transform: translate(0.4px, 0); }
  33% { transform: translate(-0.5px, 0.2px); }
  34% { transform: translate(0.6px, -0.2px); }
  35% { transform: translate(-0.6px, 0); }
  36% { transform: translate(0.7px, 0.3px); }
  37% { transform: translate(-0.8px, -0.2px); }
  38% { transform: translate(0.8px, 0); }
  39% { transform: translate(-0.9px, 0.3px); }
  40% { transform: translate(1px, -0.3px); }
  41% { transform: translate(-1px, 0); }
  42% { transform: translate(1.1px, 0.3px); }
  43% { transform: translate(-1.1px, -0.3px); }
  44% { transform: translate(1px, 0); }
  45% { transform: translate(-0.8px, 0.2px); }
  46% { transform: translate(0.5px, 0); }
}
.lc-flame { opacity: 0; animation: lc-flame 6s infinite; }
@keyframes lc-flame {
  0%, 32% { opacity: 0; }
  34%, 76% { opacity: 1; }
  77%, 100% { opacity: 0; }
}
.lc-boost { opacity: 0; animation: lc-boost 6s infinite; }
@keyframes lc-boost {
  0%, 43% { opacity: 0; }
  46%, 76% { opacity: 1; }
  77%, 100% { opacity: 0; }
}
.lc-trail { transform: scaleY(0); animation: lc-trail 6s infinite; }
@keyframes lc-trail {
  0%, 45% { transform: scaleY(0); opacity: 1; animation-timing-function: cubic-bezier(0.42, 0, 0.84, 0.6); }
  76% { transform: scaleY(1); opacity: 1; }
  90% { transform: scaleY(1); opacity: 0; }
  100% { transform: scaleY(0); opacity: 0; }
}
.lc-puff { opacity: 0; transform: scale(0); animation: lc-puff 6s ease-out infinite; }
@keyframes lc-puff {
  0%, 31% { transform: translate(0, 0) scale(0); opacity: 0; }
  37% { transform: translate(calc(var(--dx) * 0.25), -1px) scale(0.75); opacity: 0.9; }
  50% { transform: translate(calc(var(--dx) * 0.7), -3px) scale(1.25); opacity: 0.85; }
  66% { transform: translate(var(--dx), -6px) scale(1.6); opacity: 0.55; }
  88% { transform: translate(calc(var(--dx) * 1.35), -10px) scale(2); opacity: 0; }
  100% { transform: translate(0, 0) scale(0); opacity: 0; }
}
.lc-arm { animation: lc-arm 6s ease-in-out infinite; }
@keyframes lc-arm {
  0%, 29% { transform: rotate(0deg); }
  37%, 88% { transform: rotate(-72deg); }
  97%, 100% { transform: rotate(0deg); }
}
.lc-beacon { animation: beacon 1.2s steps(1, end) infinite; }
@keyframes beacon { 50% { opacity: 0.15; } }
.lc-t {
  font-size: 13px;
  letter-spacing: 0.14em;
  fill: var(--lilac-soft);
  opacity: 0;
}
.lc-go { fill: var(--gold-soft); }
.lc-t3 { animation: lc-t3 6s infinite; }
.lc-t2 { animation: lc-t2 6s infinite; }
.lc-t1 { animation: lc-t1 6s infinite; }
.lc-go { animation: lc-go 6s infinite; }
@keyframes lc-t3 { 0%, 14.9% { opacity: 1; } 15%, 100% { opacity: 0; } }
@keyframes lc-t2 { 0%, 14.9% { opacity: 0; } 15%, 29.9% { opacity: 1; } 30%, 100% { opacity: 0; } }
@keyframes lc-t1 { 0%, 29.9% { opacity: 0; } 30%, 44.9% { opacity: 1; } 45%, 100% { opacity: 0; } }
@keyframes lc-go { 0%, 44.9% { opacity: 0; } 45%, 84% { opacity: 1; } 86%, 100% { opacity: 0; } }

/* 02 Lift: the rocket hauls your listing up the search results (7s loop) */
.lf-ranks text {
  font-size: 10px;
  fill: var(--text-dim);
  text-anchor: middle;
}
.lf-rank1 { animation: lf-rank 7s infinite; }
@keyframes lf-rank {
  0%, 56% { fill: #8f84a9; }
  60%, 86% { fill: #ffd58a; }
  91%, 100% { fill: #8f84a9; }
}
.lf-caret { animation: caret-blink 1.1s steps(1, end) infinite; }
.lf-row { animation: 7s cubic-bezier(0.65, 0, 0.35, 1) infinite; }
.lf-a { animation-name: lf-a; }
.lf-b { animation-name: lf-b; }
.lf-you { animation-name: lf-you; }
@keyframes lf-you {
  0%, 18% { transform: translateY(0); opacity: 1; }
  28%, 45% { transform: translateY(-36px); opacity: 1; }
  55%, 86% { transform: translateY(-72px); opacity: 1; }
  91% { transform: translateY(-72px); opacity: 0; }
  91.1% { transform: translateY(0); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}
@keyframes lf-b {
  0%, 18% { transform: translateY(0); opacity: 1; }
  28%, 86% { transform: translateY(36px); opacity: 1; }
  91% { transform: translateY(36px); opacity: 0; }
  91.1% { transform: translateY(0); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}
@keyframes lf-a {
  0%, 45% { transform: translateY(0); opacity: 1; }
  55%, 86% { transform: translateY(36px); opacity: 1; }
  91% { transform: translateY(36px); opacity: 0; }
  91.1% { transform: translateY(0); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}
.lf-you-box { animation: lf-box 7s infinite; }
@keyframes lf-box {
  0%, 55% { stroke: #ad7bf4; }
  60%, 86% { stroke: #f7b955; }
  91%, 100% { stroke: #ad7bf4; }
}
.lf-boost { opacity: 0; animation: lf-boost 7s infinite; }
@keyframes lf-boost {
  0%, 16% { opacity: 0; }
  19%, 28% { opacity: 1; }
  31%, 43% { opacity: 0; }
  46%, 55% { opacity: 1; }
  58%, 100% { opacity: 0; }
}
.lf-badge { transform: scale(0); animation: lf-badge 7s infinite; }
@keyframes lf-badge {
  0%, 55% { transform: scale(0); opacity: 1; }
  60% { transform: scale(1.2); opacity: 1; }
  64%, 86% { transform: scale(1); opacity: 1; }
  91% { transform: scale(1); opacity: 0; }
  100% { transform: scale(0); opacity: 0; }
}
.scene .lf-badge-t {
  font-family: var(--font-sans);
  font-size: 8.5px;
  font-weight: 800;
  fill: #2a0a5c;
  text-anchor: middle;
}
.lf-spark { transform: scale(0); opacity: 0; animation: lf-spark 7s infinite; }
@keyframes lf-spark {
  0%, 58% { transform: scale(0) rotate(0deg); opacity: 0; }
  63% { transform: scale(1.1) rotate(45deg); opacity: 1; }
  74% { transform: scale(0.3) rotate(90deg); opacity: 0; }
  100% { transform: scale(0); opacity: 0; }
}

/* 03 Accelerate: full throttle, with likes, clicks and sales flying off the back */
.ac-s { animation: ac-streak 0.8s linear infinite; }
@keyframes ac-streak {
  from { transform: translateX(-215px); }
  to { transform: translateX(200px); }
}
.ac-drift { animation: ac-drift 3.2s ease-in-out infinite alternate; }
@keyframes ac-drift {
  from { transform: translateY(5px); }
  to { transform: translateY(-6px); }
}
.ac-jitter { animation: ac-jitter 0.16s steps(2, end) infinite; }
@keyframes ac-jitter {
  0% { transform: translate(0.4px, 0); }
  50% { transform: translate(-0.4px, 0.3px); }
  100% { transform: translate(0.4px, 0); }
}
.ac-boost .flick { animation-name: flick-big; }
@keyframes flick-big {
  from { transform: scale(0.92, 0.95); }
  to { transform: scale(1.06, 1.35); }
}
.ac-b { opacity: 0; animation: ac-bubble 3.2s infinite; }
@keyframes ac-bubble {
  0% { transform: translate(0, 0) scale(0); opacity: 0; }
  10% { transform: translate(-4px, 4px) scale(1.12); opacity: 1; }
  18% { transform: translate(-10px, 10px) scale(1); opacity: 1; animation-timing-function: cubic-bezier(0.5, 0, 1, 1); }
  75% { opacity: 0.85; }
  100% { transform: translate(-100px, 100px) scale(0.85); opacity: 0; }
}
.scene .ac-ico {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 800;
  fill: var(--gold-soft);
  text-anchor: middle;
}
.scene .ac-ico--sm { font-size: 7.5px; fill: #fff; }

/* 04 Orbit: the About animation, now keeping your business company */
.or-spin { animation: orbit 10s linear infinite; }
@keyframes orbit { to { transform: rotate(360deg); } }
.or-you {
  font-size: 8px;
  letter-spacing: 0.18em;
  fill: #fff;
  text-anchor: middle;
}

/* ---------- Clients ----------
   Logos sit on white cards so every brand keeps its real colours. A little rocket from the logo
   flies from card to card (js/main.js), lighting each one up in gold as it docks. */
.clients { overflow-x: clip; }
.clients::before {
  content: "";
  position: absolute;
  inset: 18% 0 6%;
  z-index: -1;
  background: radial-gradient(50% 50% at 50% 55%, rgba(91, 31, 184, 0.3), transparent 72%);
  pointer-events: none;
}

.clients-board {
  position: relative;
  max-width: 1080px;
  margin-inline: auto;
}

.clients-grid {
  --cols: 2;
  --gap: 14px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 640px) {
  .clients-grid { --cols: 3; --gap: 18px; }
}
@media (min-width: 1000px) {
  .clients-grid { --cols: 5; --gap: 20px; }
}

.client {
  position: relative;
  flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
  aspect-ratio: 16 / 11;
  animation: zero-g 8s ease-in-out infinite; /* a gentle zero-gravity drift, out of step card to card */
}
.client:nth-child(3n + 1) { animation-duration: 7s; animation-delay: -2.2s; }
.client:nth-child(3n + 2) { animation-duration: 9s; animation-delay: -5.1s; }
.client:nth-child(4n) { animation-delay: -3.6s; }
.client:nth-child(5n + 3) { animation-delay: -6.4s; }
@keyframes zero-g {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -5px; }
}
.clients-board.is-paused .client { animation-play-state: paused; }
.client-card {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff 0%, #f5f0fd 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.8),
    0 18px 40px -24px rgba(140, 80, 240, 0.8);
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease), border-color 0.3s ease, background-color 0.3s ease;
}
/* The logo fills a fixed box inside the card; --s nudges a logo's size so they all feel equally big */
.client img {
  position: absolute;
  top: 16%;
  left: 13%;
  width: 74%;
  height: 68%;
  object-fit: contain;
  transform: scale(var(--s, 1));
}
.client:hover .client-card,
.client.is-lit .client-card {
  transform: translateY(-5px);
  box-shadow:
    inset 0 0 0 1px #fff,
    0 0 0 3px rgba(247, 185, 85, 0.85),
    0 26px 50px -20px rgba(247, 185, 85, 0.55);
}

/* The open spot: a dashed card that links to the form */
.client--open .client-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px;
  border: 1.5px dashed rgba(204, 181, 237, 0.5);
  background: rgba(173, 123, 244, 0.07);
  box-shadow: none;
  color: #fff;
  text-align: center;
  text-decoration: none;
}
.client--open:hover .client-card,
.client--open.is-lit .client-card {
  border-color: var(--gold);
  background: rgba(247, 185, 85, 0.09);
  box-shadow: 0 26px 50px -24px rgba(247, 185, 85, 0.5);
}
.client-open-rocket {
  width: 22px;
  height: 22px;
  margin-bottom: 2px;
  fill: var(--gold-soft);
  transition: transform 0.4s var(--ease);
}
.client--open:hover .client-open-rocket { transform: translate(3px, -3px); }
.client-open-title {
  font-size: clamp(0.92rem, 1.4vw, 1.02rem);
  font-weight: 700;
  line-height: 1.2;
}
.client-open-note {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--lilac-soft);
}

/* The rocket and its dotted gold trail (positioned by js/main.js) */
.clients-trail {
  position: absolute;
  top: -48px;
  left: -48px;
  z-index: 2;
  pointer-events: none;
}
.clients-rocket {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  width: 24px;
  height: 40px;
  transform-origin: 0 0;
  pointer-events: none;
  will-change: transform;
}
.clients-rocket svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 0 6px rgba(140, 80, 240, 0.9));
}
.clients-rocket .cr-boost {
  opacity: 0;
  transition: opacity 0.25s ease;
}
.clients-rocket.is-flying .cr-boost { opacity: 1; }

@media (max-width: 639px) {
  .client-card { border-radius: 14px; }
  .client-open-note { font-size: 0.58rem; }
}

/* ---------- About ---------- */

.about { overflow-x: clip; } /* the badge rocket may poke past the edge on small phones; never let it widen the page */

.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(48px, 7vw, 100px);
  align-items: center;
}

/* Tyler's crew badge: his photo on top, the logo on a purple band, the logo rocket parked off the corner.
   js/main.js tilts it by setting --rx / --ry (degrees), --gx / --gy (-1 to 1: where the light sits),
   --glare (0 to 1) and --lift (0 to 1: the pointer is on the card). */
.founder {
  width: min(100% - 48px, 400px); /* leaves room for the rocket beside the text */
  margin: 0 auto;
}
.badge-float { animation: badge-float 8s ease-in-out infinite; } /* the same zero-g drift as the client cards */
@keyframes badge-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -8px; }
}
.badge {
  position: relative;
  transform:
    perspective(1100px)
    rotateX(calc(var(--rx, 0) * 1deg))
    rotateY(calc(var(--ry, 0) * 1deg))
    translateZ(calc(var(--lift, 0) * 16px));
  transform-style: preserve-3d;
  will-change: transform;
}
.badge-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 26px;
  background: var(--brand);
  box-shadow:
    0 0 0 1px rgba(220, 196, 255, 0.34),
    calc(var(--ry, 0) * -1.5px) calc(36px + var(--rx, 0) * 1.5px) 70px -28px rgba(4, 1, 10, 0.95),
    0 0 90px -16px rgba(140, 80, 240, 0.55);
}
.badge-card::after { /* a fine inner edge, like a laminated card */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  pointer-events: none;
}
.badge-photo {
  aspect-ratio: 4 / 5;
  background: var(--space-900);
}
.badge-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.badge-band {
  position: relative;
  padding: 28px 19% 30px;
  background:
    radial-gradient(70% 130% at 50% 0%, rgba(173, 123, 244, 0.4), transparent 70%),
    linear-gradient(180deg, #3f0b8c, var(--brand) 58%, #270059);
  border-top: 1px solid rgba(247, 185, 85, 0.7);
}
.badge-logo {
  width: 100%;
  height: auto;
  fill: #fff;
}
/* The light: a soft hotspot that follows the pointer, and a glint that sweeps across as the card turns */
.badge-sheen,
.badge-glint {
  position: absolute;
  pointer-events: none;
}
.badge-sheen {
  inset: 0;
  background: radial-gradient(75% 55% at calc(50% + var(--gx, 0) * 50%) calc(40% + var(--gy, 0) * 45%), rgba(255, 255, 255, 0.5), transparent 70%);
  mix-blend-mode: soft-light;
  opacity: calc(0.3 + var(--glare, 0) * 0.3 + var(--lift, 0) * 0.35);
}
.badge-glint {
  inset: -20%;
  background: linear-gradient(115deg, transparent 43%, rgba(255, 255, 255, 0.14) 48%, rgba(255, 243, 220, 0.26) 50%, rgba(214, 190, 255, 0.14) 52%, transparent 57%);
  transform: translateX(calc(var(--gx, 0) * 38%));
  mix-blend-mode: screen;
  opacity: calc(0.3 + var(--glare, 0) * 0.5 + var(--lift, 0) * 0.2);
}
.js .founder.is-visible .badge-glint { animation: badge-glint-in 1.5s 0.9s ease-in-out both; }
@keyframes badge-glint-in {
  from { translate: -95% 0; }
  to { translate: 0 0; }
}

/* The rocket sits 70px in front of the card, so it shifts more than the card when it tilts */
.badge-rocket {
  position: absolute;
  top: -62px;
  right: -50px;
  width: 64px;
  transform: translateZ(70px);
  transform-style: preserve-3d;
  pointer-events: none;
}
.badge-rocket-fly { transform-style: preserve-3d; }
.badge-rocket-bob { animation: badge-rocket-bob 4.6s ease-in-out infinite; }
@keyframes badge-rocket-bob {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(-3px, -7px) rotate(-3deg); }
}
.badge-rocket svg {
  width: 100%;
  height: auto;
  overflow: visible;
  transform: rotate(45deg); /* pointing up and right, like the logo */
  filter: drop-shadow(0 0 10px rgba(173, 123, 244, 0.8)) drop-shadow(0 12px 16px rgba(7, 2, 15, 0.55));
}
.badge-rocket .br-boost { /* idles low; fires up when the pointer is on the card */
  opacity: calc(0.6 + var(--lift, 0) * 0.4);
  transform: scale(calc(0.72 + var(--lift, 0) * 0.4));
  transform-origin: 0 20px;
}
/* When the section scrolls in, the rocket launches from behind the card and parks on the corner */
.js .founder .badge-rocket-fly { opacity: 0; }
.js .founder.is-visible .badge-rocket-fly { animation: badge-rocket-in 1.8s 0.4s var(--ease) both; }
.js .founder.is-visible .br-boost { animation: badge-boost 2.4s 0.4s ease-out backwards; }
@keyframes badge-rocket-in { /* behind the card, out past its edge, then up and forward onto the corner */
  0% { opacity: 0; transform: translate3d(-150px, 330px, -200px); animation-timing-function: cubic-bezier(0.45, 0, 0.8, 0.5); }
  10% { opacity: 1; }
  45% { transform: translate3d(58px, 170px, -110px); animation-timing-function: cubic-bezier(0.25, 0.6, 0.3, 1); }
  100% { opacity: 1; transform: none; }
}
@keyframes badge-boost {
  0%, 55% { opacity: 1; transform: scale(1.25); }
  100% { opacity: 0.6; transform: scale(0.72); }
}
.founder.is-paused .badge-float,
.founder.is-paused .badge-rocket-bob,
.founder.is-paused .flick { animation-play-state: paused; }

.about-copy .lead {
  margin: 26px 0 22px;
  color: #fff;
  font-size: clamp(1.18rem, 1.8vw, 1.38rem);
  font-weight: 500;
  line-height: 1.55;
}

.pull {
  margin: 30px 0;
  padding: 4px 0 4px 24px;
  border-left: 2px solid var(--gold);
}
.pull p {
  margin: 0;
  color: #fff;
  font-size: clamp(1.1rem, 1.6vw, 1.25rem);
  font-weight: 600;
  line-height: 1.5;
}

.signature {
  display: flex;
  flex-direction: column;
  margin: 0;
  color: #fff;
  font-weight: 700;
}
.signature span {
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
}

@media (max-width: 900px) {
  .about-grid { grid-template-columns: 1fr; }
  .founder { width: min(100% - 72px, 320px); }
  .badge-rocket { top: -46px; right: -30px; width: 48px; }
}

/* ---------- Weird request band ---------- */

.weird { padding-block: clamp(8px, 2vw, 24px); }

.weird-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: clamp(32px, 5vw, 60px);
  border: 1px solid rgba(204, 181, 237, 0.32);
  border-radius: 28px;
  background:
    radial-gradient(70% 120% at 100% 0%, rgba(173, 123, 244, 0.38), transparent 60%),
    radial-gradient(60% 100% at 0% 100%, rgba(247, 185, 85, 0.14), transparent 60%),
    linear-gradient(135deg, var(--brand) 0%, var(--brand-600) 55%, var(--brand-500) 100%);
  box-shadow: 0 40px 90px -45px rgba(140, 80, 240, 0.9);
}
.weird-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("../assets/stars-sm.svg") 0 0 / 480px 480px repeat;
  opacity: 0.8;
}
.weird-copy { max-width: 620px; }
.weird-copy h2 { font-size: clamp(2rem, 4.2vw, 3.1rem); }
.weird-copy p {
  margin: 14px 0 0;
  color: #eadfff;
  font-size: clamp(1.05rem, 1.5vw, 1.18rem);
}
.weird-card .btn { flex: none; }

@media (max-width: 760px) {
  .weird-card { flex-direction: column; align-items: flex-start; }
}

/* ---------- FAQ ---------- */

.faq-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(36px, 6vw, 88px);
  align-items: start;
}
.faq-head .section-intro { margin-top: 18px; }

.faq-item { border-bottom: 1px solid var(--line); }
.faq-item:first-child { border-top: 1px solid var(--line); }

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 4px;
  color: #fff;
  font-size: 1.08rem;
  font-weight: 600;
  line-height: 1.4;
  list-style: none;
  cursor: pointer;
  border-radius: 8px;
  transition: color 0.2s ease;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--lilac-soft); }

.faq-icon {
  position: relative;
  flex: none;
  width: 30px;
  height: 30px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: #fff;
  transition: border-color 0.25s ease, background-color 0.25s ease;
}
.faq-icon::before,
.faq-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 11px;
  height: 1.6px;
  border-radius: 2px;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: transform 0.3s var(--ease);
}
.faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-item[open] .faq-icon { border-color: var(--lilac); background: rgba(173, 123, 244, 0.18); }
.faq-item[open] .faq-icon::after { transform: translate(-50%, -50%) rotate(0deg); }

.faq-answer { padding: 0 54px 24px 4px; }
.faq-answer p { margin: 0; }
.faq-answer a {
  color: #fff;
  font-weight: 700;
  text-decoration-color: rgba(247, 185, 85, 0.6);
  text-underline-offset: 4px;
}
.faq-item[open] .faq-answer { animation: faq-in 0.35s var(--ease); }
@keyframes faq-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 860px) {
  .faq-grid { grid-template-columns: 1fr; }
}

/* ---------- Contact ---------- */

.contact::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(45% 45% at 12% 55%, rgba(51, 0, 114, 0.65), transparent 70%);
  pointer-events: none;
}

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(40px, 6vw, 88px);
  align-items: start;
}

.contact-intro {
  margin-top: 22px;
  font-size: clamp(1.06rem, 1.5vw, 1.2rem);
}

.checklist {
  display: grid;
  gap: 14px;
  margin: 30px 0;
  padding: 0;
  list-style: none;
}
.checklist li {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  font-weight: 600;
}
.checklist svg {
  flex: none;
  width: 24px;
  height: 24px;
  padding: 5px;
  border: 1px solid rgba(247, 185, 85, 0.5);
  border-radius: 50%;
  background: rgba(247, 185, 85, 0.12);
  color: var(--gold-soft);
}

.contact-email { margin: 0; }
.contact-email a {
  color: #fff;
  font-weight: 700;
  text-decoration-color: rgba(247, 185, 85, 0.6);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
}
.contact-email a:hover { text-decoration-color: var(--gold); }

.form-card { padding: clamp(24px, 3.6vw, 42px); }

.contact-form { display: grid; gap: 18px; }

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.field { display: grid; gap: 8px; align-content: start; }
.field label,
.needs legend {
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
}
.req { color: var(--gold-soft); }

.field input,
.field textarea {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: rgba(7, 2, 15, 0.55);
  color: #fff;
  font: inherit;
  font-size: 1rem;
  line-height: 1.4;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.field textarea { min-height: 128px; resize: vertical; }
.field input::placeholder,
.field textarea::placeholder { color: var(--text-dim); }
.field input:hover,
.field textarea:hover { border-color: rgba(204, 181, 237, 0.45); }
.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--lilac);
  background: rgba(7, 2, 15, 0.85);
  box-shadow: 0 0 0 4px rgba(173, 123, 244, 0.22);
}
.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] { border-color: #ff8f85; }
.field input[aria-invalid="true"]:focus { box-shadow: 0 0 0 4px rgba(255, 143, 133, 0.2); }

.field-error {
  margin: 0;
  color: #ffb4ab;
  font-size: 0.84rem;
  line-height: 1.4;
}

/* "What do you need?" toggle chips */
.needs {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.needs legend { margin-bottom: 10px; padding: 0; }
.legend-hint {
  margin-left: 6px;
  color: var(--text-dim);
  font-weight: 400;
}
.needs-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.need {
  position: relative;
  cursor: pointer;
}
.need input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
}
.need span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px 9px 11px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: rgba(7, 2, 15, 0.5);
  color: var(--text-muted);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.2;
  transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.need span::before {
  content: "";
  flex: none;
  width: 15px;
  height: 15px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  opacity: 0.7;
  transition: background-color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}
.need:hover span { border-color: rgba(204, 181, 237, 0.5); color: #fff; }
.need input:checked + span {
  border-color: var(--lilac);
  background: rgba(91, 31, 184, 0.5);
  color: #fff;
}
.need input:checked + span::before {
  border-color: var(--gold);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23330072' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 10px no-repeat,
    var(--gold);
  opacity: 1;
}
.need input:focus-visible + span {
  outline: 2px solid var(--gold-soft);
  outline-offset: 2px;
}

.hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-note {
  margin: -4px 0 0;
  color: var(--text-dim);
  font-size: 0.84rem;
  text-align: center;
}

.form-status {
  margin: 0;
  font-size: 0.95rem;
  text-align: center;
}
.form-status:empty { display: none; }
.form-status.is-error { color: #ffb4ab; }
.form-status a { color: #fff; font-weight: 700; }

.form-success {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: clamp(24px, 5vw, 56px) 8px;
  text-align: center;
}
.form-success:focus { outline: none; }
.form-success h3 { margin-top: 8px; font-size: clamp(1.6rem, 3vw, 2.1rem); }
.form-success p { max-width: 36ch; margin-bottom: 14px; }
.form-success-rocket {
  width: 56px;
  height: 56px;
  fill: #fff;
  filter: drop-shadow(0 0 16px rgba(173, 123, 244, 0.85));
  animation: liftoff 1.4s var(--ease) both;
}
@keyframes liftoff {
  0% { transform: translate(-40px, 40px) scale(0.6); opacity: 0; }
  60% { opacity: 1; }
  100% { transform: none; opacity: 1; }
}

@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .field-row { grid-template-columns: 1fr; }
}

/* ---------- Footer ---------- */

.site-footer {
  border-top: 1px solid var(--line);
  padding: 52px 0 36px;
  background: linear-gradient(180deg, transparent, rgba(7, 2, 15, 0.7));
}

.footer-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px 40px;
  align-items: center;
}

.footer-tag {
  margin: 12px 0 0;
  color: var(--text-muted);
  font-weight: 600;
}

.footer-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.footer-nav a {
  color: var(--text-muted);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s ease;
}
.footer-nav a:hover { color: #fff; }

.footer-bottom {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 24px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}
.footer-bottom p {
  margin: 0;
  color: var(--text-dim);
  font-size: 0.88rem;
}
.to-top {
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 0.2s ease;
}
.to-top:hover { color: #fff; }

@media (max-width: 760px) {
  .footer-inner { grid-template-columns: 1fr; }
}

/* ---------- Scroll reveal ---------- */

.js .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
  transition-delay: var(--delay, 0s);
}
.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}
/* Cards keep their hover lift snappy once revealed */
.js .service.reveal.is-visible {
  transition: opacity 0.9s var(--ease), transform 0.4s var(--ease), border-color 0.4s ease, box-shadow 0.4s ease;
}

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0s !important;
  }
  .js .reveal,
  .js .hero-content > * { opacity: 1; transform: none; }
  .status-dot::after { display: none; }

  /* Service scenes hold one telling frame each */
  .scene,
  .scene * { animation: none !important; }
  .lc-rocket { transform: translateY(-34px); }
  .lc-flame,
  .lc-boost,
  .lc-go { opacity: 1; }
  .lc-trail { transform: scaleY(0.2); }
  .lc-arm { transform: rotate(-72deg); }
  .lc-puff { transform: translate(calc(var(--dx) * 0.7), -3px) scale(1.25); opacity: 0.8; }
  .lf-you { transform: translateY(-72px); }
  .lf-a,
  .lf-b { transform: translateY(36px); }
  .lf-badge { transform: none; }
  .lf-you-box { stroke: #f7b955; }
  .lf-rank1 { fill: #ffd58a; }
  .ac-s:nth-child(odd) { transform: translateX(-40px); }
  .ac-s:nth-child(even) { transform: translateX(60px); }
  .ac-b { opacity: 0.9; transform: translate(-26px, 26px); }
  .ac-b:nth-of-type(n) { opacity: 0.9; }
  .or-spin { transform: rotate(35deg); }
  /* The badge holds still: no drift, no launch, no glint */
  .badge-float,
  .badge-rocket-bob,
  .badge-rocket .flick,
  .js .founder.is-visible .br-boost { animation: none; }
  .js .founder .badge-rocket-fly,
  .js .founder.is-visible .badge-rocket-fly { opacity: 1; animation: none; }
  .badge-glint { display: none; }
  .client { animation: none; }
  .clients-rocket,
  .clients-trail { display: none; }
}