/* ============ Luxt Industries - Landing styles ============ */
:root {
  --bg: #0a0a0f;
  --bg-alt: #0f0f17;
  --surface: #14141f;
  --surface-2: #1a1a28;
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.14);
  --text: #f4f4f8;
  --text-dim: #a2a2b4;
  /* Lightened from #6c6c80, which sat at 3.8:1 on --surface and failed AA
     for the small labels, placeholders and captions that use it. */
  --text-faint: #82829a;
  --brand: #6d5efc;
  --brand-2: #a78bfa;
  --brand-glow: rgba(109, 94, 252, 0.5);
  --accent: #22d3ee;
  --radius: 16px;
  --radius-sm: 10px;
  --maxw: 1120px;

  /* Motion */
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.37, 0, 0.63, 1);
  --dur-fast: 140ms;
  --dur-mid: 260ms;

  /* Depth */
  --z-base: 0;
  --z-content: 1;
  --z-sticky: 100;
  --z-skip: 200;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; scroll-padding-top: 84px; }

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

a { color: inherit; text-decoration: none; }

abbr[title] { text-decoration: underline dotted; text-underline-offset: 3px; cursor: help; }

h1, h2, h3, h4 { line-height: 1.15; letter-spacing: -0.02em; font-weight: 700; text-wrap: balance; }
h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
h3 { font-size: 1.2rem; }

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--brand-2);
  margin-bottom: 14px;
}

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

.skip-link {
  position: absolute; left: -999px; top: 8px; z-index: var(--z-skip);
  background: var(--brand); color: #fff; padding: 10px 16px; border-radius: 8px;
}
.skip-link:focus { left: 16px; }

:focus-visible { outline: 2px solid var(--brand-2); outline-offset: 3px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 600; font-size: 0.95rem; padding: 11px 20px;
  border-radius: 999px; border: 1px solid transparent; cursor: pointer;
  transition: transform var(--dur-mid) var(--ease-out-quart), background var(--dur-mid),
              border-color var(--dur-mid), box-shadow var(--dur-mid), color var(--dur-mid);
  white-space: nowrap;
}
.btn:active { transform: translateY(1px) scale(0.985); transition-duration: var(--dur-fast); }
.btn--primary {
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #fff; box-shadow: 0 8px 24px -8px var(--brand-glow);
}
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 14px 32px -8px var(--brand-glow); }
.btn--ghost { background: rgba(255,255,255,0.03); border-color: var(--border-strong); color: var(--text); }
.btn--ghost:hover { background: rgba(255,255,255,0.08); border-color: var(--brand-2); transform: translateY(-2px); }
.btn--lg { padding: 14px 26px; font-size: 1rem; }
.btn--block { width: 100%; }

/* Inline submit spinner: collapses to zero width when idle. */
.btn__spinner {
  width: 0; height: 16px; border-radius: 50%; flex: 0 0 auto;
  transition: width var(--dur-mid) var(--ease-out-quart), opacity var(--dur-fast);
  opacity: 0;
}
.btn.is-loading { pointer-events: none; }
.btn.is-loading .btn__spinner {
  width: 16px; opacity: 1;
  border: 2px solid rgba(255,255,255,0.35); border-top-color: #fff;
  animation: spin 0.68s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Sending, then sent ----------
   The send is one move, not three separate ones: the spinner collapses, the
   label blurs through to its new word, the button washes green, and the check
   draws itself. The wash is a second gradient fading in over the first, because
   a gradient-to-gradient transition is not dependable across browsers and an
   opacity one always is. */
.btn--primary { position: relative; }
.btn--primary > * { position: relative; z-index: 1; }
.btn--primary::after {
  content: ''; position: absolute; inset: 0; z-index: 0; border-radius: inherit;
  background: linear-gradient(135deg, #0ea472, #34d399);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-mid) var(--ease-out-quart);
}
.btn--primary.is-sent::after { opacity: 1; }
.btn--primary.is-sent { box-shadow: 0 12px 30px -10px rgba(52, 211, 153, 0.45); }

/* One ring leaves the button as the send lands. It plays once, and only here —
   a visitor sees this at most a handful of times, so it can afford to be felt. */
.btn--primary::before {
  content: ''; position: absolute; inset: 0; z-index: 0; border-radius: inherit;
  border: 1.5px solid rgba(110, 231, 183, 0.75);
  opacity: 0; pointer-events: none;
}
.btn--primary.is-sent::before { animation: sentRing 620ms var(--ease-out-quart); }
@keyframes sentRing {
  from { opacity: 0.9; transform: scale(1); }
  to { opacity: 0; transform: scale(1.02, 1.5); }
}

/* The label crossfades through a blur rather than cutting, so the eye reads one
   word turning into another instead of two words swapping places. */
.btn__label {
  transition: opacity 150ms var(--ease-out-quart), filter 150ms var(--ease-out-quart),
              transform 150ms var(--ease-out-quart);
}
.btn__label.is-out { opacity: 0; filter: blur(3px); transform: translateY(-4px); }
.btn__label.is-next { opacity: 0; filter: blur(3px); transform: translateY(4px); transition: none; }

/* The check draws on once, then collapses back to nothing with the label. */
.btn__check {
  width: 0; height: 17px; flex: 0 0 auto; opacity: 0; overflow: visible;
  transition: width var(--dur-mid) var(--ease-out-quart), opacity var(--dur-fast);
}
.btn__check path {
  fill: none; stroke: currentColor; stroke-width: 2.6;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 24; stroke-dashoffset: 24;
}
.btn.is-sent .btn__check { width: 17px; opacity: 1; }
.btn.is-sent .btn__check path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 380ms var(--ease-out-quart) 90ms;
}

/* ---------- Nav ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-sticky);
  transition: background 0.3s, border-color 0.3s, backdrop-filter 0.3s;
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled {
  background: rgba(10, 10, 15, 0.72);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--border);
}
.nav__inner { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.brand { display: inline-flex; align-items: center; gap: 0; font-weight: 800; }
.brand__mark {
  display: block; width: 96px; height: 96px; flex: 0 0 auto;
  object-fit: contain;
}
.nav__actions { display: flex; align-items: center; gap: 16px; }
.nav__logo {
  display: block; height: 48px; width: auto;
  transition: opacity var(--dur-mid) var(--ease-out-quart);
}
.brand:hover .nav__logo { opacity: 0.82; }
.footer__logo {
  display: block; height: 40px; width: auto;
  margin-left: -6px;
}
.nav__links { display: flex; gap: 28px; }
.nav__links a {
  position: relative; color: var(--text-dim); font-size: 0.94rem; font-weight: 500;
  transition: color var(--dur-mid);
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 2px; border-radius: 2px;
  background: var(--brand-2); transform: scaleX(0); transform-origin: right;
  transition: transform 0.32s var(--ease-out-quart);
}
.nav__links a:hover, .nav__links a.is-active { color: var(--text); }
.nav__links a:hover::after, .nav__links a.is-active::after { transform: scaleX(1); transform-origin: left; }

/* Reading-progress hairline pinned under the bar itself (not under the
   expanded mobile panel, which is also a child of .nav). */
.nav__progress {
  position: absolute; left: 0; top: 67px; height: 2px; width: 100%;
  background: linear-gradient(90deg, var(--brand), var(--accent));
  transform: scaleX(var(--p, 0)); transform-origin: left;
  opacity: 0; transition: opacity 0.3s;
}
.nav.is-scrolled .nav__progress { opacity: 0.9; }

.nav__toggle { display: none; background: none; border: 0; cursor: pointer; width: 40px; height: 40px; flex-direction: column; gap: 5px; justify-content: center; align-items: center; }
.nav__toggle span { width: 22px; height: 2px; background: var(--text); border-radius: 2px; transition: transform 0.3s var(--ease-out-quart), opacity 0.3s; }
.nav.is-open .nav__toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav.is-open .nav__toggle span:nth-child(2) { opacity: 0; }
.nav.is-open .nav__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav__mobile { display: none; }
.nav__mobile-inner { display: flex; flex-direction: column; gap: 6px; }
.nav__mobile a { padding: 12px 4px; color: var(--text-dim); border-bottom: 1px solid var(--border); }
.nav__mobile a.btn { margin-top: 10px; border-bottom: 0; color: #fff; }

/* ---------- Hero ---------- */
.hero { position: relative; padding: 160px 0 90px; text-align: center; overflow: hidden; }
.hero__field { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.hero__glow {
  position: absolute; top: -10%; left: 50%; width: 900px; height: 700px; margin-left: -450px;
  background: radial-gradient(circle at center, rgba(109,94,252,0.28), transparent 62%);
  filter: blur(20px);
  /* Transform is reserved for pointer parallax; the breath rides on opacity. */
  transform: translate3d(var(--gx, 0px), var(--gy, 0px), 0);
  animation: breathe 9s var(--ease-in-out) infinite alternate;
  will-change: transform, opacity;
}
.hero__aurora { position: absolute; border-radius: 50%; filter: blur(70px); will-change: transform; }
.hero__aurora--a {
  width: 520px; height: 520px; left: 6%; top: 14%;
  background: radial-gradient(circle, rgba(34,211,238,0.30), transparent 66%);
  animation: driftA 26s var(--ease-in-out) infinite alternate;
}
.hero__aurora--b {
  width: 600px; height: 600px; right: 2%; top: -8%;
  background: radial-gradient(circle, rgba(167,139,250,0.26), transparent 66%);
  animation: driftB 32s var(--ease-in-out) infinite alternate;
}
.hero__dots {
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.13) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 68% 58% at 50% 34%, #000, transparent 74%);
  mask-image: radial-gradient(ellipse 68% 58% at 50% 34%, #000, transparent 74%);
  opacity: 0.5;
}
@keyframes breathe { from { opacity: 0.72; } to { opacity: 1; } }
@keyframes driftA { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(70px, -40px, 0) scale(1.14); } }
@keyframes driftB { from { transform: translate3d(0, 0, 0) scale(1.08); } to { transform: translate3d(-80px, 50px, 0) scale(1); } }

/* Global automation network: a wireframe world with signals moving between hubs.
   Masked to stay faint behind the headline and stronger toward the edges. */
.autoflow {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; opacity: 0; transition: opacity 1.2s ease;
  filter: brightness(1.6) contrast(1.12) saturate(1.18);
  -webkit-mask-image: radial-gradient(ellipse 78% 72% at 50% 42%, rgba(0,0,0,0.34) 20%, #000 68%);
  mask-image: radial-gradient(ellipse 78% 72% at 50% 42%, rgba(0,0,0,0.34) 20%, #000 68%);
}
.autoflow.is-ready { opacity: 1; }

.hero__inner { position: relative; }
.hero__title { font-size: clamp(2.3rem, 6vw, 4.2rem); font-weight: 800; margin-bottom: 22px; }
/* Each line masks its own overflow so the type slides up from behind a hard edge.
   The padding/margin pair keeps descenders (g, y, p) from being clipped. */
.hero__title .line { display: block; overflow: hidden; padding-bottom: 0.14em; margin-bottom: -0.14em; }
.hero__title .line__inner { display: block; }
.hero__title .line:nth-child(1) .line__inner { --i: 0; }
.hero__title .line:nth-child(2) .line__inner { --i: 1; }
.hero__lede { max-width: 620px; margin: 0 auto 34px; color: var(--text-dim); font-size: 1.12rem; text-wrap: pretty; }
.hero__cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.hero__stats { display: flex; gap: 44px; justify-content: center; flex-wrap: wrap; margin-top: 64px; }
.stat { display: flex; flex-direction: column; }
.stat__num { font-size: 2rem; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.stat__label { font-size: 0.85rem; color: var(--text-faint); }

/* Hero entrance: content is visible by default and only hidden once JS confirms it can play. */
.js .hero__title .line__inner {
  opacity: 0; transform: translateY(112%);
  transition: transform 0.95s var(--ease-out-expo), opacity 0.5s linear;
  transition-delay: calc(var(--i, 0) * 110ms + 60ms);
}
.js .hero.is-in .hero__title .line__inner { opacity: 1; transform: none; }
.js .hero__step {
  opacity: 0; transform: translateY(20px);
  transition: opacity 0.7s var(--ease-out-expo), transform 0.7s var(--ease-out-expo);
  transition-delay: calc(var(--i, 0) * 90ms + 300ms);
}
.js .hero.is-in .hero__step { opacity: 1; transform: none; }

/* ---------- Marquee ---------- */
.marquee { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 22px 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee__track { display: flex; align-items: center; width: max-content; animation: scroll 26s linear infinite; will-change: transform; }
.marquee:has(.marquee__item:hover) .marquee__track,
.marquee:has(.marquee__item:focus-within) .marquee__track { animation-play-state: paused; }
.marquee__item { display: flex; align-items: center; gap: 10px; margin-right: 56px; opacity: 0.85; transition: opacity var(--dur-mid), transform var(--dur-mid) var(--ease-out-quart); }
.marquee__item:hover { opacity: 1; transform: translateY(-2px); }
.marquee__logo { display: block; height: 20px; width: 20px; }
.marquee__name { color: var(--text-faint); font-weight: 600; font-size: 1.1rem; white-space: nowrap; }
@keyframes scroll { from { transform: translateX(0); } to { transform: translateX(-25%); } }

/* ---------- Sections ---------- */
.section { padding: 96px 0; }
.section--alt { background: var(--bg-alt); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.section__head { max-width: 640px; margin: 0 auto 56px; text-align: center; }
.section__sub { color: var(--text-dim); margin-top: 14px; font-size: 1.05rem; text-wrap: pretty; }

.grid { display: grid; gap: 22px; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }

/* ---------- Cards ---------- */
.card {
  position: relative; isolation: isolate;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 30px;
  transition: transform 0.35s var(--ease-out-quart), border-color 0.3s, background 0.3s, box-shadow 0.35s;
}
/* Cursor-tracked spotlight, painted above the card background but under its content. */
.card::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; opacity: 0;
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 0%), rgba(109,94,252,0.18), transparent 68%);
  transition: opacity 0.35s var(--ease-out-quart);
}
.card:hover { transform: translateY(-5px); border-color: var(--border-strong); background: var(--surface-2); box-shadow: 0 24px 50px -34px rgba(0,0,0,0.9); }
.card:hover::before { opacity: 1; }
.card__icon {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; margin-bottom: 18px;
  background: rgba(109,94,252,0.12); color: var(--brand-2); font-size: 1.3rem; border: 1px solid rgba(109,94,252,0.22);
  transition: transform 0.45s var(--ease-out-quart), background 0.3s, border-color 0.3s, color 0.3s;
}
.card:hover .card__icon { transform: translateY(-2px) rotate(-8deg) scale(1.07); background: rgba(109,94,252,0.2); border-color: rgba(109,94,252,0.42); color: #fff; }
.card h3 { margin-bottom: 8px; }
.card p { color: var(--text-dim); font-size: 0.95rem; }

/* ---------- Work ---------- */
.section--drafts { position: relative; overflow: hidden; }
.section--drafts > .container { position: relative; z-index: var(--z-content); }
/* Canvas draft table - see initDrafts() in main.js */
.drafts {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: var(--z-base);
  pointer-events: none; opacity: 0; transition: opacity 1.2s ease;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 8%, #000 92%, transparent);
}
.drafts.is-ready { opacity: 1; }

.work { display: block; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); background: var(--surface); transition: transform 0.35s var(--ease-out-quart), border-color 0.3s, box-shadow 0.35s; }
.work:hover, .work:focus-visible { transform: translateY(-5px); border-color: var(--border-strong); box-shadow: 0 26px 54px -34px rgba(0,0,0,0.9); }
.work__thumb { aspect-ratio: 16 / 11; position: relative; overflow: hidden; background: var(--surface-2); }
.work__thumb::before {
  content: ""; position: absolute; inset: -30%; background: var(--thumb);
  animation: thumbDrift 22s var(--ease-in-out) infinite alternate; will-change: transform;
}
.work__thumb::after { content: "→ View project"; position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; color: #fff; font-weight: 600; opacity: 0; background: rgba(10,10,15,0.45); transition: opacity 0.35s; }
.work:hover .work__thumb::after, .work:focus-visible .work__thumb::after { opacity: 1; }
.work__thumb--poise {
  --thumb: radial-gradient(circle at 28% 22%, rgba(194, 207, 197, 0.6), transparent 34%), linear-gradient(145deg, #f4f7f0 0%, #dbe5dc 52%, #a9bdae 100%);
}
.work__poise-brand {
  position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 16px;
  color: #345140; font-size: clamp(1.5rem, 3vw, 2.35rem); font-weight: 700; letter-spacing: 0.22em;
}
.work__poise-brand img { width: clamp(58px, 7vw, 78px); height: auto; filter: drop-shadow(0 12px 24px rgba(52, 81, 64, 0.2)); }
.work__thumb--poise .work__wire { z-index: 2; }
/* Placeholder cards - no project to view yet, so they read as "coming soon"
   and the hover CTA invites a conversation instead of promising a case study. */
.work__thumb--soon {
  --thumb:
    radial-gradient(circle at 30% 24%, rgba(109, 94, 252, 0.26), transparent 46%),
    radial-gradient(circle at 76% 82%, rgba(34, 211, 238, 0.18), transparent 52%),
    linear-gradient(160deg, #17171f, #121219);
}
.work--soon .work__thumb::after { content: "→ Start a project"; }
.work__soon-label {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  z-index: 1; padding: 7px 16px; white-space: nowrap;
  border: 1px solid var(--border-strong); border-radius: 999px;
  background: rgba(10, 10, 15, 0.32);
  color: var(--text-dim); font-size: 0.7rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.22em;
}
@keyframes thumbDrift {
  from { transform: translate3d(-3%, -2%, 0) scale(1.02); }
  to { transform: translate3d(3%, 2%, 0) scale(1.1); }
}
/* The same pen that drafts the background sketches over the thumbnail on hover. */
.work__wire {
  position: absolute; inset: 0; opacity: 0;
  clip-path: inset(0 100% 0 0);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 110' preserveAspectRatio='none' fill='none' stroke='%23ffffff' stroke-width='1' stroke-opacity='.9'%3E%3Crect x='12' y='10' width='136' height='90' rx='4'/%3E%3Cpath d='M12 25h136'/%3E%3Ccircle cx='20' cy='17.5' r='1.6'/%3E%3Ccircle cx='27' cy='17.5' r='1.6'/%3E%3Crect x='22' y='35' width='56' height='7' rx='2'/%3E%3Crect x='22' y='48' width='40' height='4' rx='2'/%3E%3Crect x='22' y='58' width='28' height='8' rx='3'/%3E%3Crect x='94' y='35' width='44' height='31' rx='3'/%3E%3Crect x='22' y='78' width='36' height='13' rx='2'/%3E%3Crect x='64' y='78' width='36' height='13' rx='2'/%3E%3Crect x='106' y='78' width='32' height='13' rx='2'/%3E%3C/svg%3E") center / 100% 100% no-repeat,
    rgba(10,10,15,0.55);
  transition: clip-path 0.62s var(--ease-out-expo), opacity 0.28s linear;
}
.work:hover .work__wire, .work:focus-visible .work__wire { opacity: 1; clip-path: inset(0 0 0 0); }
.work__meta { padding: 18px 20px; }
.work__meta h3 { font-size: 1.05rem; }
.work__meta span { color: var(--text-faint); font-size: 0.85rem; }

/* ---------- Steps ---------- */
.steps { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; position: relative; padding-top: 38px; }
/* Decorative connecting rail behind the step cards. Was a <span>; a pseudo-element
   keeps the <ol> valid (only <li> may sit directly inside a list). */
.steps::before {
  content: ""; position: absolute; top: 12px; left: 4%; right: 4%; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--brand) 18%, var(--accent) 82%, transparent);
  opacity: 0.55; transform: scaleX(0); transform-origin: left;
  transition: transform 1.3s var(--ease-out-expo) 0.12s;
}
.reveal--rail.is-visible::before { transform: scaleX(1); }
.step { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px 24px; position: relative; transition: border-color 0.3s, transform 0.35s var(--ease-out-quart); }
.step:hover { border-color: var(--border-strong); transform: translateY(-3px); }
.step__dot {
  position: absolute; top: -30px; left: 26px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--brand-2); box-shadow: 0 0 0 4px rgba(109,94,252,0.14), 0 0 14px 2px var(--brand-glow);
  transform: scale(0);
  transition: transform 0.5s var(--ease-out-expo) calc(var(--i, 0) * 110ms + 380ms);
}
.reveal--rail.is-visible .step__dot { transform: scale(1); }
.step__num { font-size: 0.9rem; font-weight: 800; color: var(--brand-2); letter-spacing: 0.1em; }
.step h3 { margin: 10px 0 8px; }
.step p { color: var(--text-dim); font-size: 0.92rem; }

/* ---------- Pricing ---------- */
.section--meteors { position: relative; overflow: hidden; }
.section--meteors > .container { position: relative; z-index: var(--z-content); }
/* Canvas meteor garden - see initMeteors() in main.js */
.meteors {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: var(--z-base);
  pointer-events: none; opacity: 0; transition: opacity 1.2s ease;
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 84%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0, #000 84%, transparent 100%);
}
.meteors.is-ready { opacity: 1; }

/* The logo fluid sits behind the inquiry form. It used to be stacked over it, so
   the section read as one layer, but at full size the mark crossed the heading
   and the fields — nothing decorative gets to sit on top of words. It never
   takes pointer events. */
.logo-fluid {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: var(--z-base);
  pointer-events: none;
}

.packages { border: 0; padding: 0; margin: 0; min-inline-size: 0; }

.price {
  position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 32px 28px; display: flex; flex-direction: column; cursor: pointer;
  transition: transform 0.35s var(--ease-out-quart), border-color 0.3s, box-shadow 0.35s, background 0.3s;
}
.price:hover { transform: translateY(-4px); border-color: var(--border-strong); }
.price--featured { border-color: var(--brand); background: linear-gradient(180deg, rgba(109,94,252,0.10), var(--surface)); box-shadow: 0 20px 60px -30px var(--brand-glow); }
.price.is-selected {
  border-color: var(--brand);
  background: linear-gradient(180deg, rgba(109,94,252,0.16), var(--surface));
  box-shadow: 0 0 0 1px var(--brand), 0 28px 64px -30px var(--brand-glow);
  transform: translateY(-6px);
}
.price__badge { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #fff; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; padding: 6px 14px; border-radius: 999px; white-space: nowrap; }
.price h3 { font-size: 1.1rem; color: var(--text-dim); font-weight: 600; transition: color 0.3s; }
.price.is-selected h3 { color: var(--text); }
.price__amount { font-size: 2.4rem; font-weight: 800; margin: 8px 0 6px; letter-spacing: -0.03em; }
.price__amount span { font-size: 1.2rem; color: var(--text-faint); }
.price__desc { color: var(--text-dim); font-size: 0.92rem; margin-bottom: 20px; min-height: 42px; }
.price ul { list-style: none; display: flex; flex-direction: column; gap: 11px; margin-bottom: 26px; flex: 1; }
.price li { padding-left: 26px; position: relative; color: var(--text-dim); font-size: 0.93rem; }
.price li::before { content: "✓"; position: absolute; left: 0; color: var(--brand-2); font-weight: 700; }

/* The radio stays focusable (never display:none) so arrow-key group navigation works. */
.price__radio { position: absolute; top: 0; left: 0; width: 1px; height: 1px; opacity: 0; margin: 0; pointer-events: none; }
.price__pick {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; cursor: pointer;
}
.price__dot {
  position: relative; width: 18px; height: 18px; border-radius: 50%;
  border: 1.5px solid var(--border-strong);
  transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s var(--ease-out-quart);
}
.price__dot::after {
  content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--brand-2);
  transform: scale(0); transition: transform 0.28s var(--ease-out-quart);
}
.price:hover .price__dot { border-color: var(--brand-2); transform: scale(1.08); }
.price__radio:checked + .price__pick .price__dot { border-color: var(--brand); box-shadow: 0 0 0 4px rgba(109,94,252,0.18); }
.price__radio:checked + .price__pick .price__dot::after { transform: scale(1); }
.price__radio:focus-visible + .price__pick { outline: 2px solid var(--brand-2); outline-offset: 2px; }
/* Until something is chosen, the popular card's dot quietly advertises that these are selectable. */
.packages:not(.has-selection) .price--featured .price__dot { animation: pickPulse 2.8s var(--ease-in-out) infinite; }
@keyframes pickPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(109,94,252,0.4); }
  55% { box-shadow: 0 0 0 8px rgba(109,94,252,0); }
}

/* ---------- CTA / Contact ---------- */
.cta { padding: 100px 0; position: relative; overflow: hidden; }
.cta__halo {
  position: absolute; left: 50%; top: 12%; width: 760px; height: 520px; margin-left: -380px;
  background: radial-gradient(ellipse at center, rgba(109,94,252,0.16), transparent 66%);
  filter: blur(30px); pointer-events: none;
  animation: breathe 11s var(--ease-in-out) infinite alternate;
}
/* The mark glows behind this copy, so the type carries its own shadow: tight to
   the letterforms, invisible as a shape, and worth several points of contrast
   wherever the emblem passes under a word. Cheaper than dimming the mark and it
   leaves no dark patch behind the text. */
.cta__inner { max-width: 640px; margin: 0 auto; text-align: center; position: relative; z-index: var(--z-content); }
.cta__inner h2 { text-shadow: 0 2px 14px rgba(6, 6, 12, 0.92), 0 0 3px rgba(6, 6, 12, 0.8); }
.cta__inner > p { text-shadow: 0 1px 10px rgba(6, 6, 12, 0.95), 0 0 3px rgba(6, 6, 12, 0.9); }
.cta__inner > p { color: var(--text-dim); margin: 14px 0 34px; font-size: 1.08rem; }
.cta__package {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 7px 7px 15px; margin: 0 0 26px; border-radius: 999px;
  border: 1px solid var(--border-strong); background: rgba(109,94,252,0.10);
  font-size: 0.9rem; color: var(--text-dim);
}
.cta__package[hidden] { display: none; }
.cta__package strong { color: var(--text); font-weight: 600; }
.cta__package-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand-2); box-shadow: 0 0 10px var(--brand-glow); flex: 0 0 auto; }
.cta__package-clear {
  background: none; border: 0; font: inherit; font-size: 0.82rem; color: var(--text-dim);
  cursor: pointer; padding: 4px 11px; border-radius: 999px;
  transition: color var(--dur-mid), background var(--dur-mid);
}
.cta__package-clear:hover { color: var(--text); background: rgba(255,255,255,0.07); }
.cta__form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; text-align: left; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field--full { grid-column: 1 / -1; }
/* The labels sit at the edge of the mark's glow, so they carry the same shadow
   as the heading above them — small text is the first thing a backdrop steals. */
.field label { font-size: 0.85rem; font-weight: 600; color: #d2d2df; transition: color var(--dur-mid);
  text-shadow: 0 1px 8px rgba(6, 6, 12, 0.95), 0 0 3px rgba(6, 6, 12, 0.9); }
.field:focus-within label { color: var(--brand-2); }
/* The fields are opaque, and that is the decision, not a leftover.
   Translucent ones were tried: the mark behind them came through the glass and
   read as though the logo were sitting on top of the writing, because a shape
   inside a field's own rectangle looks like it belongs to the field. Nothing
   decorative gets to appear inside the box someone is typing in. The mark stays
   behind the form and shows in the space around it — where it cannot be
   mistaken for being in front of anything. */
.field input, .field textarea {
  background: #29293c; border: 1px solid rgba(255,255,255,0.42); border-radius: var(--radius-sm);
  padding: 13px 15px; color: var(--text); font-family: inherit; font-size: 0.95rem; resize: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.09), 0 12px 30px rgba(0,0,0,0.58);
  transition: border-color 0.2s, box-shadow 0.25s var(--ease-out-quart), background 0.2s;
}
.field input::placeholder, .field textarea::placeholder { color: #c2c2d2; }
.field input:hover, .field textarea:hover { border-color: rgba(255,255,255,0.62); background: #303047; }
.field input:focus, .field textarea:focus { outline: none; border-color: #c4b5fd; box-shadow: 0 0 0 4px rgba(167,139,250,0.34), 0 16px 38px rgba(0,0,0,0.62); background: #35354f; }
.field textarea { scrollbar-width: thin; scrollbar-color: rgba(167,139,250,0.72) rgba(10,10,15,0.3); }
.field textarea::-webkit-scrollbar { width: 8px; }
.field textarea::-webkit-scrollbar-track { background: rgba(10,10,15,0.3); border-radius: 999px; margin: 7px 0; }
.field textarea::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--brand-2), var(--brand)); border-radius: 999px; border: 2px solid #29293c; }
.field textarea::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #c4b5fd, var(--brand)); }
.cta__form .btn { grid-column: 1 / -1; }
.cta__note { grid-column: 1 / -1; text-align: center; font-size: 0.9rem; color: var(--brand-2); min-height: 20px; }
.cta__note.is-in { animation: noteIn 0.42s var(--ease-out-quart); }
@keyframes noteIn {
  from { opacity: 0; transform: translateY(6px); filter: blur(4px); }
  to { opacity: 1; transform: none; filter: blur(0); }
}
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.is-shaking { animation: shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97); }
@keyframes shake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(3px); }
  30%, 50%, 70% { transform: translateX(-5px); }
  40%, 60% { transform: translateX(5px); }
}

/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--border); background: var(--bg-alt); padding: 60px 0 30px; }
.footer__inner { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; padding-bottom: 40px; }
.footer__brand p { color: var(--text-faint); font-size: 0.92rem; margin-top: 14px; max-width: 280px; }
.footer__col h4 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-faint); margin-bottom: 14px; }
.footer__col a { display: block; color: var(--text-dim); font-size: 0.94rem; padding: 5px 0; transition: color var(--dur-mid), transform var(--dur-mid) var(--ease-out-quart); }
.footer__col a:hover { color: var(--text); transform: translateX(3px); }
.footer__bottom { display: flex; justify-content: space-between; padding-top: 26px; border-top: 1px solid var(--border); color: var(--text-faint); font-size: 0.85rem; flex-wrap: wrap; gap: 10px; }

/* ---------- Reveal system ----------
   Everything is visible by default. The `js` class (set in <head>) opts into the
   hidden start state, so a no-JS or headless render never ships a blank section. */
.reveal {
  transition: opacity 0.7s var(--ease-out-expo), transform 0.7s var(--ease-out-expo),
              clip-path 0.8s var(--ease-out-expo);
  transition-delay: calc(var(--i, 0) * 80ms);
}
.js .reveal { opacity: 0; transform: translateY(24px); }
.js .reveal.is-visible { opacity: 1; transform: none; }

.js .reveal--pop { transform: translateY(20px) scale(0.972); }
.js .reveal--lift { transform: translateY(28px) scale(0.978); }
/* The clip rides on the thumbnail, never on the observed element itself:
   an element clipped to zero width reports no intersection, so a reveal gated
   on its own clip-path would wait forever. */
.js .reveal--wipe { transform: translateY(20px); }
.js .reveal--wipe .work__thumb {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.78s var(--ease-out-expo);
  transition-delay: calc(var(--i, 0) * 80ms + 140ms);
}
.js .reveal--wipe.is-visible .work__thumb { clip-path: inset(0 0 0 0); }
/* The rail container itself stays put; its children and the drawn line carry the motion. */
.js .reveal--rail { opacity: 1; transform: none; }
.js .reveal--rail .step { opacity: 0; transform: translateY(22px); transition: opacity 0.65s var(--ease-out-expo), transform 0.65s var(--ease-out-expo); transition-delay: calc(var(--i, 0) * 100ms + 180ms); }
.js .reveal--rail.is-visible .step { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .grid--3 { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: 1fr 1fr; padding-top: 0; }
  .steps::before { display: none; }
  .step__dot { top: 22px; left: auto; right: 24px; transform: scale(1); }
  .footer__inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .nav__links, .nav__actions { display: none; }
  .nav__toggle { display: flex; }
  .nav__mobile {
    display: grid; grid-template-rows: 0fr;
    background: rgba(10,10,15,0.96); backdrop-filter: blur(14px);
    border-bottom: 1px solid transparent;
    opacity: 0; visibility: hidden;
    transition: grid-template-rows 0.4s var(--ease-out-quart), opacity 0.3s, visibility 0s 0.4s, border-color 0.3s;
  }
  .nav__mobile-inner { overflow: hidden; min-height: 0; padding: 0 24px; transition: padding 0.4s var(--ease-out-quart); }
  .nav.is-open .nav__mobile {
    grid-template-rows: 1fr; opacity: 1; visibility: visible; border-bottom-color: var(--border);
    transition: grid-template-rows 0.4s var(--ease-out-quart), opacity 0.3s, visibility 0s 0s, border-color 0.3s;
  }
  .nav.is-open .nav__mobile-inner { padding: 12px 24px 20px; }
  .hero { padding: 130px 0 70px; }
  .hero__stats { gap: 30px; margin-top: 44px; }
  .hero__aurora--a { width: 340px; height: 340px; }
  .hero__aurora--b { width: 380px; height: 380px; }
  .grid--3, .steps { grid-template-columns: 1fr; }
  .cta__form { grid-template-columns: 1fr; }
  .footer__inner { grid-template-columns: 1fr; gap: 30px; }
  .footer__bottom { flex-direction: column; }
}

/* ---------- Reduced motion ----------
   Nothing animates, but every reveal resolves to its finished state. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  .js .reveal,
  .js .reveal--rail .step,
  .js .reveal--wipe .work__thumb,
  .js .hero__step,
  .js .hero__title .line__inner {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
  .steps::before, .step__dot { transform: none !important; }
  .drafts, .meteors, .autoflow { opacity: 1; }
}