:root {
  --bg: #0e1b29;
  --bg-soft: #112235;
  --surface: rgba(24, 50, 89, 0.72);
  --surface-2: rgba(18, 40, 70, 0.82);
  --card: rgba(14, 27, 41, 0.76);
  --card-strong: rgba(12, 23, 36, 0.92);
  --stroke: rgba(238, 247, 249, 0.12);
  --stroke-soft: rgba(238, 247, 249, 0.08);
  --text: #eef7f9;
  --text-soft: rgba(238, 247, 249, 0.72);
  --text-dim: rgba(238, 247, 249, 0.55);
  --primary: #2284c4;
  --primary-soft: #396ea7;
  --green: #4cbd97;
  --navy: #183259;
  --shadow: 0 30px 80px rgba(0, 0, 0, 0.34);
  --shadow-soft: 0 18px 50px rgba(0, 0, 0, 0.22);
  --radius-xl: 36px;
  --radius-lg: 26px;
  --radius-md: 18px;
  --radius-sm: 14px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 15% 15%, rgba(34, 132, 196, 0.17), transparent 28%),
    radial-gradient(circle at 85% 18%, rgba(76, 189, 151, 0.16), transparent 24%),
    radial-gradient(circle at 78% 78%, rgba(57, 110, 167, 0.18), transparent 24%),
    linear-gradient(180deg, #102033 0%, #0e1b29 45%, #0b1722 100%);
  color: var(--text);
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { cursor: pointer; }
img { display: block; max-width: 100%; }

.site-noise,
.cursor-glow {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 0;
}
.site-noise {
  opacity: 0.15;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(circle at center, black 64%, transparent 100%);
}
.cursor-glow {
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(34,132,196,0.18), rgba(76,189,151,0.08) 40%, transparent 72%);
  filter: blur(18px);
  transform: translate3d(-200px, -200px, 0);
}

.page-shell {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  padding: 24px;
}

.launch-card {
  position: relative;
  min-height: calc(100vh - 48px);
  max-width: 1500px;
  margin: 0 auto;
  padding: 28px 34px 24px;
  border-radius: 32px;
  border: 1px solid var(--stroke);
  background:
    linear-gradient(135deg, rgba(238, 247, 249, 0.03), rgba(238, 247, 249, 0.01) 32%, rgba(255,255,255,0.02) 100%),
    linear-gradient(180deg, rgba(17, 34, 53, 0.78), rgba(11, 23, 34, 0.96));
  box-shadow: var(--shadow);
  overflow: hidden;
}
.launch-card::before,
.launch-card::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(6px);
}
.launch-card::before {
  width: 560px;
  height: 560px;
  right: -180px;
  top: -180px;
  background: radial-gradient(circle, rgba(34,132,196,0.18), transparent 66%);
}
.launch-card::after {
  width: 440px;
  height: 440px;
  left: -160px;
  bottom: -160px;
  background: radial-gradient(circle, rgba(76,189,151,0.14), transparent 68%);
}

.site-header,
.hero-grid,
.site-footer { position: relative; z-index: 2; }

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.brand { display: inline-flex; align-items: center; }
.brand-logo {
  width: clamp(170px, 16vw, 240px);
  height: auto;
  filter: drop-shadow(0 8px 28px rgba(0,0,0,0.28));
}
.desktop-nav,
.header-actions,
.footer-links,
.eyebrow,
.launch-bar,
.input-shell,
.micro-inline,
.scene-topbar,
.scene-metrics,
.scene-pill-row,
.scene-brand-row,
.mini-track-meta,
.otp-actions,
.footer-status,
.otp-inputs,
.countdown-row,
.insight-row,
.mobile-menu,
.site-footer {
  display: flex;
}
.desktop-nav { gap: 10px; margin-left: auto; }
.nav-link,
.footer-links button,
.mobile-menu button,
.mobile-menu a {
  border: 0;
  background: transparent;
  color: var(--text-soft);
  padding: 12px 16px;
  border-radius: 999px;
  transition: .22s ease;
}
.nav-link:hover,
.footer-links button:hover,
.mobile-menu button:hover,
.mobile-menu a:hover {
  color: var(--text);
  background: rgba(255,255,255,0.06);
}
.header-actions { gap: 12px; align-items: center; }
.pill-button,
.notify-button,
.verify-button {
  border: 0;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 700;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.pill-button {
  padding: 14px 20px;
  color: var(--bg);
  background: linear-gradient(135deg, var(--green), #75e6bc);
  box-shadow: 0 14px 34px rgba(76,189,151,0.24);
}
.pill-button:hover,
.notify-button:hover,
.verify-button:hover { transform: translateY(-1px); }
.menu-button {
  display: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,0.03);
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex-direction: column;
}
.menu-button span {
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: var(--text);
}
.mobile-menu {
  display: none;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  margin-top: 14px;
  border: 1px solid var(--stroke);
  border-radius: 20px;
  background: rgba(10, 18, 29, 0.9);
}
.mobile-menu.is-open { display: flex; }

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.94fr) minmax(480px, 0.98fr);
  gap: 32px;
  align-items: center;
  padding-top: 42px;
}

.hero-copy { max-width: 700px; }
.eyebrow {
  align-items: center;
  gap: 10px;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.eyebrow-line {
  width: 42px;
  height: 1.5px;
  background: linear-gradient(90deg, var(--green), transparent);
}
.eyebrow-muted {
  color: var(--text-dim);
  letter-spacing: .04em;
  text-transform: none;
  font-size: 12px;
}
.pulse-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 0 rgba(76,189,151,0.6);
  animation: pulse 1.7s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(76,189,151,0.65); }
  70% { box-shadow: 0 0 0 10px rgba(76,189,151,0); }
  100% { box-shadow: 0 0 0 0 rgba(76,189,151,0); }
}

.hero-title {
  margin: 18px 0 0;
  font-size: clamp(48px, 5.6vw, 86px);
  line-height: 0.95;
  letter-spacing: -0.06em;
  max-width: 760px;
}
.title-accent {
  color: transparent;
  -webkit-text-stroke: 1.7px var(--text);
  position: relative;
}
.title-accent::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -10px;
  height: 10px;
  background: linear-gradient(90deg, rgba(34,132,196,0.7), rgba(76,189,151,0.9));
  opacity: 0.55;
  border-radius: 999px;
  filter: blur(7px);
}
.hero-subtitle {
  max-width: 630px;
  margin: 24px 0 0;
  color: var(--text-soft);
  font-size: 17px;
  line-height: 1.72;
}

.launch-bar {
  margin-top: 24px;
  padding: 16px 18px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(34,132,196,0.12), rgba(76,189,151,0.08));
  border: 1px solid rgba(255,255,255,0.09);
}
.launch-label {
  display: block;
  font-size: 11px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  margin-bottom: 6px;
}
.launch-bar strong { font-size: 18px; }
.launch-progress {
  width: min(240px, 100%);
  display: grid;
  gap: 6px;
}
.launch-progress i {
  display: block;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(34,132,196,.45), rgba(76,189,151,.9));
  opacity: calc(1 - (var(--i, 0) * .16));
}
.launch-progress i:nth-child(2) { width: 87%; justify-self: end; }
.launch-progress i:nth-child(3) { width: 74%; justify-self: end; }
.launch-progress i:nth-child(4) { width: 54%; justify-self: end; }

.countdown-row {
  margin-top: 20px;
  align-items: stretch;
  gap: 16px;
}
.countdown-intro {
  min-width: 138px;
  padding: 18px 18px;
  border-radius: 22px;
  border: 1px solid var(--stroke-soft);
  background: rgba(255,255,255,0.03);
}
.countdown-intro strong {
  display: block;
  margin-bottom: 8px;
  font-size: 15px;
}
.countdown-intro span {
  color: var(--text-dim);
  font-size: 13px;
  line-height: 1.5;
}
.countdown-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.countdown-cell {
  padding: 18px 16px;
  border-radius: 22px;
  background: rgba(238,247,249,0.04);
  border: 1px solid var(--stroke-soft);
  backdrop-filter: blur(12px);
}
.countdown-cell--accent {
  background: linear-gradient(135deg, rgba(34,132,196,0.16), rgba(76,189,151,0.14));
}
.count-number {
  display: block;
  font-size: clamp(24px, 2.6vw, 36px);
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.06em;
}
.count-label {
  display: block;
  margin-top: 8px;
  color: var(--text-dim);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.signup-form { margin-top: 26px; }
.input-shell {
  align-items: center;
  gap: 12px;
  padding: 10px 10px 10px 16px;
  border-radius: 999px;
  border: 1px solid rgba(238,247,249,0.12);
  background: rgba(255,255,255,0.05);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02);
  backdrop-filter: blur(10px);
}
.input-shell:focus-within {
  border-color: rgba(76,189,151,0.5);
  box-shadow: 0 0 0 4px rgba(76,189,151,0.1);
}
.input-shell.is-error {
  border-color: rgba(255, 128, 128, 0.48);
  box-shadow: 0 0 0 4px rgba(255, 118, 118, 0.08);
}
.mail-icon {
  color: var(--text-dim);
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
}
.mail-icon svg { width: 100%; height: 100%; }
#email {
  min-width: 0;
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
}
#email::placeholder { color: rgba(238,247,249,0.46); }
.notify-button,
.verify-button {
  padding: 16px 24px;
  color: var(--bg);
  background: linear-gradient(135deg, var(--text), #ffffff);
}
.notify-button:disabled,
.verify-button:disabled,
.resend-button:disabled { opacity: 0.7; cursor: wait; }
.button-arrow { font-size: 1.06em; }
.trap { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }
.form-note,
.inline-message {
  margin: 12px 6px 0;
  font-size: 13px;
}
.form-note { color: var(--text-dim); }
.verified-tick { color: var(--green); margin-right: 6px; font-weight: 800; }
.inline-message { min-height: 20px; }

.insight-row {
  gap: 14px;
  margin-top: 30px;
}
.insight-row article {
  flex: 1;
  min-width: 0;
  padding: 18px 18px 16px;
  border-radius: 22px;
  border: 1px solid var(--stroke-soft);
  background: rgba(255,255,255,0.03);
}
.insight-row strong {
  display: block;
  font-size: 14px;
  margin-bottom: 8px;
}
.insight-row p {
  margin: 0;
  color: var(--text-dim);
  font-size: 13px;
  line-height: 1.65;
}

.hero-art {
  position: relative;
  min-height: 690px;
  border-radius: 34px;
  border: 1px solid rgba(238,247,249,0.08);
  background:
    linear-gradient(180deg, rgba(20, 43, 73, 0.42), rgba(12, 24, 38, 0.22)),
    radial-gradient(circle at center, rgba(255,255,255,0.03), transparent 62%);
  overflow: hidden;
}
.hero-art::before {
  content: "";
  position: absolute;
  inset: 22px;
  border-radius: 28px;
  border: 1px dashed rgba(238,247,249,0.1);
}
.art-grid,
.stage-ring,
.orb,
.floating-pill,
.scene-card,
.float-card { position: absolute; }
.art-grid {
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 60px 60px;
  opacity: 0.14;
}
.stage-ring {
  border-radius: 50%;
  border: 1px solid rgba(238,247,249,0.08);
}
.stage-ring--one {
  width: 520px;
  height: 520px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.stage-ring--two {
  width: 330px;
  height: 330px;
  left: 55%;
  top: 47%;
  transform: translate(-50%, -50%);
}
.orb {
  border-radius: 50%;
  filter: blur(14px);
  opacity: 0.95;
  animation: driftOrb 18s ease-in-out infinite;
}
.orb--one {
  width: 250px;
  height: 250px;
  left: 58%;
  top: 14%;
  background: radial-gradient(circle, rgba(34,132,196,0.42), rgba(34,132,196,0.02) 68%);
}
.orb--two {
  width: 220px;
  height: 220px;
  left: 10%;
  bottom: 4%;
  background: radial-gradient(circle, rgba(76,189,151,0.32), rgba(76,189,151,0.02) 68%);
  animation-duration: 22s;
}
.orb--three {
  width: 160px;
  height: 160px;
  right: 8%;
  bottom: 18%;
  background: radial-gradient(circle, rgba(57,110,167,0.44), rgba(57,110,167,0.03) 72%);
  animation-duration: 16s;
}
@keyframes driftOrb {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, 20px, 0); }
}

.parallax,
.draggable {
  --px: 0px;
  --py: 0px;
  --drag-x: 0px;
  --drag-y: 0px;
}
.scene-card,
.float-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
  border: 1px solid rgba(238,247,249,0.12);
  backdrop-filter: blur(18px);
  box-shadow: var(--shadow-soft);
  will-change: transform;
  user-select: none;
}
.draggable { touch-action: none; cursor: grab; }
.draggable.is-dragging { cursor: grabbing; z-index: 12; }

.scene-card--main {
  left: 8%;
  top: 10%;
  width: min(82%, 580px);
  padding: 16px;
  border-radius: 28px;
  transform: translate3d(calc(var(--px) + var(--drag-x)), calc(var(--py) + var(--drag-y)), 0) rotate(-5deg);
  animation: bobMain 8.8s ease-in-out infinite;
}
@keyframes bobMain {
  0%, 100% { transform: translate3d(calc(var(--px) + var(--drag-x)), calc(var(--py) + var(--drag-y)), 0) rotate(-5deg); }
  50% { transform: translate3d(calc(var(--px) + var(--drag-x)), calc(var(--py) + var(--drag-y) - 10px), 0) rotate(-4deg); }
}
.scene-topbar {
  align-items: center;
  justify-content: space-between;
  color: var(--text-dim);
  font-size: 12px;
  margin-bottom: 14px;
}
.scene-dots { display: flex; gap: 6px; }
.scene-dots i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(238,247,249,0.4);
}
.live-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
}
.live-chip i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 0 rgba(76,189,151,0.56);
  animation: pulse 1.6s infinite;
}
.scene-body {
  padding: 18px;
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(14,27,41,0.92), rgba(24,50,89,0.76));
}
.scene-brand-row { justify-content: space-between; align-items: center; margin-bottom: 18px; }
.scene-logo {
  width: 160px;
  border-radius: 10px;
  overflow: hidden;
}
.scene-copy-block h2 {
  margin: 8px 0 12px;
  font-size: clamp(30px, 3vw, 46px);
  line-height: 0.96;
  letter-spacing: -0.05em;
}
.scene-kicker {
  display: inline-flex;
  padding: 8px 11px;
  border-radius: 999px;
  background: rgba(76,189,151,0.12);
  border: 1px solid rgba(76,189,151,0.22);
  color: #98efca;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.scene-copy-block p {
  margin: 0;
  max-width: 460px;
  color: var(--text-soft);
  line-height: 1.65;
}
.scene-pill-row {
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}
.scene-pill-row span {
  padding: 9px 12px;
  border-radius: 999px;
  font-size: 12px;
  color: var(--text-soft);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
}
.scene-metrics {
  margin-top: 18px;
  gap: 14px;
}
.scene-metrics > div {
  flex: 1;
  border-radius: 18px;
  padding: 14px;
  background: rgba(255,255,255,0.04);
}
.scene-metrics small,
.mini-track-meta small,
.float-label,
.float-card small {
  display: block;
  color: var(--text-dim);
}
.scene-metrics strong,
.mini-track-meta strong,
.float-card strong { margin-top: 6px; display: block; }

.float-card {
  border-radius: 24px;
  padding: 18px;
}
.float-card--countdown {
  top: 9%;
  right: 8%;
  width: 240px;
  transform: translate3d(calc(var(--px) + var(--drag-x)), calc(var(--py) + var(--drag-y)), 0) rotate(6deg);
  animation: bobCountdown 7.6s ease-in-out infinite;
}
@keyframes bobCountdown {
  0%, 100% { transform: translate3d(calc(var(--px) + var(--drag-x)), calc(var(--py) + var(--drag-y)), 0) rotate(6deg); }
  50% { transform: translate3d(calc(var(--px) + var(--drag-x) - 4px), calc(var(--py) + var(--drag-y) + 14px), 0) rotate(4deg); }
}
.float-card--services {
  left: 4%;
  bottom: 12%;
  width: 270px;
  transform: translate3d(calc(var(--px) + var(--drag-x)), calc(var(--py) + var(--drag-y)), 0) rotate(-6deg);
  animation: bobServices 8.2s ease-in-out infinite;
}
@keyframes bobServices {
  0%, 100% { transform: translate3d(calc(var(--px) + var(--drag-x)), calc(var(--py) + var(--drag-y)), 0) rotate(-6deg); }
  50% { transform: translate3d(calc(var(--px) + var(--drag-x) + 3px), calc(var(--py) + var(--drag-y) - 10px), 0) rotate(-7deg); }
}
.float-card--quote {
  right: 16%;
  bottom: 10%;
  width: 250px;
  transform: translate3d(calc(var(--px) + var(--drag-x)), calc(var(--py) + var(--drag-y)), 0) rotate(4deg);
  animation: bobQuote 9.1s ease-in-out infinite;
}
@keyframes bobQuote {
  0%, 100% { transform: translate3d(calc(var(--px) + var(--drag-x)), calc(var(--py) + var(--drag-y)), 0) rotate(4deg); }
  50% { transform: translate3d(calc(var(--px) + var(--drag-x)), calc(var(--py) + var(--drag-y) - 14px), 0) rotate(7deg); }
}
.float-card--metric {
  right: 4%;
  top: 42%;
  width: 214px;
  transform: translate3d(calc(var(--px) + var(--drag-x)), calc(var(--py) + var(--drag-y)), 0) rotate(-8deg);
  animation: bobMetric 7.8s ease-in-out infinite;
}
@keyframes bobMetric {
  0%, 100% { transform: translate3d(calc(var(--px) + var(--drag-x)), calc(var(--py) + var(--drag-y)), 0) rotate(-8deg); }
  50% { transform: translate3d(calc(var(--px) + var(--drag-x) + 3px), calc(var(--py) + var(--drag-y) + 10px), 0) rotate(-5deg); }
}
.float-card--steps {
  left: 28%;
  top: 58%;
  width: 240px;
  transform: translate3d(calc(var(--px) + var(--drag-x)), calc(var(--py) + var(--drag-y)), 0) rotate(3deg);
  animation: bobSteps 8.8s ease-in-out infinite;
}
@keyframes bobSteps {
  0%, 100% { transform: translate3d(calc(var(--px) + var(--drag-x)), calc(var(--py) + var(--drag-y)), 0) rotate(3deg); }
  50% { transform: translate3d(calc(var(--px) + var(--drag-x) - 5px), calc(var(--py) + var(--drag-y) - 8px), 0) rotate(1deg); }
}
.float-label {
  margin-bottom: 10px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}
.float-card ul,
.float-card ol {
  padding: 0;
  margin: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}
.float-card li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--text-soft);
  font-size: 14px;
}
.float-card li span {
  color: #9ccced;
  font-weight: 700;
}
.quote-mark {
  font-size: 46px;
  line-height: 1;
  color: var(--green);
  margin-bottom: 8px;
}
.float-card--quote p {
  margin: 0;
  color: var(--text-soft);
  line-height: 1.65;
}
.metric-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(34,132,196,0.18), rgba(76,189,151,0.2));
  font-size: 22px;
  margin-bottom: 12px;
}
.sparkline {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  align-items: end;
  gap: 8px;
  height: 54px;
}
.sparkline i {
  display: block;
  border-radius: 999px 999px 4px 4px;
  background: linear-gradient(180deg, #75e6bc, #2284c4);
}
.sparkline i:nth-child(1) { height: 18px; }
.sparkline i:nth-child(2) { height: 30px; }
.sparkline i:nth-child(3) { height: 24px; }
.sparkline i:nth-child(4) { height: 42px; }
.sparkline i:nth-child(5) { height: 36px; }
.sparkline i:nth-child(6) { height: 52px; }
.mini-count-text { color: var(--text-soft); line-height: 1.55; margin-bottom: 12px; }
.mini-progress {
  width: 100%;
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  overflow: hidden;
}
.mini-progress span {
  display: block;
  width: var(--w, 80%);
  height: 100%;
  background: linear-gradient(90deg, #75e6bc, #2284c4);
  border-radius: inherit;
  animation: progressGlow 2.8s ease-in-out infinite;
}
@keyframes progressGlow {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.15); }
}
.mini-track-meta {
  gap: 18px;
  margin-top: 16px;
}
.mini-track-meta > div { flex: 1; }
.mini-track-meta strong { font-size: 24px; letter-spacing: -0.05em; }

.floating-pill {
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(238,247,249,0.1);
  background: rgba(14,27,41,0.66);
  color: var(--text-soft);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: var(--shadow-soft);
}
.floating-pill--a {
  left: 12%;
  top: 4%;
  animation: pillFloatA 6.6s ease-in-out infinite;
}
.floating-pill--b {
  right: 12%;
  top: 66%;
  animation: pillFloatB 8s ease-in-out infinite;
}
.floating-pill--c {
  left: 56%;
  bottom: 6%;
  animation: pillFloatC 7.5s ease-in-out infinite;
}
@keyframes pillFloatA {
  0%,100% { transform: translate3d(var(--px), var(--py), 0); }
  50% { transform: translate3d(var(--px), calc(var(--py) - 8px), 0); }
}
@keyframes pillFloatB {
  0%,100% { transform: translate3d(var(--px), var(--py), 0); }
  50% { transform: translate3d(var(--px), calc(var(--py) + 8px), 0); }
}
@keyframes pillFloatC {
  0%,100% { transform: translate3d(var(--px), var(--py), 0); }
  50% { transform: translate3d(var(--px), calc(var(--py) - 10px), 0); }
}

.site-footer {
  margin-top: 22px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  color: var(--text-dim);
}
.footer-status { align-items: center; gap: 10px; }
.footer-status span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 0 rgba(76,189,151,0.5);
  animation: pulse 1.8s infinite;
}
.footer-links { gap: 8px; align-items: center; }
.footer-links a {
  padding: 12px 16px;
  border-radius: 999px;
}
.footer-links a:hover { background: rgba(255,255,255,0.06); color: var(--text); }
.site-footer p { margin: 0; }

.panel-backdrop,
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(7, 13, 22, 0.56);
  backdrop-filter: blur(12px);
  opacity: 0;
  visibility: hidden;
  transition: .25s ease;
  z-index: 20;
}
.panel-backdrop.is-open,
.modal-backdrop.is-open {
  opacity: 1;
  visibility: visible;
}
.side-panel,
.otp-modal {
  position: fixed;
  z-index: 21;
  background: linear-gradient(180deg, rgba(14,27,41,0.98), rgba(11,23,34,0.98));
  border: 1px solid rgba(238,247,249,0.12);
  box-shadow: var(--shadow);
}
.side-panel {
  top: 0;
  right: 0;
  width: min(580px, 100%);
  height: 100%;
  padding: 30px 28px 28px;
  transform: translateX(105%);
  transition: transform .35s cubic-bezier(.2,.82,.2,1);
  overflow-y: auto;
}
.side-panel.is-open { transform: translateX(0); }
.panel-close,
.otp-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,0.04);
  color: var(--text);
  font-size: 28px;
  line-height: 1;
}
.panel-content { display: none; padding-top: 22px; }
.panel-content.is-active { display: block; }
.panel-kicker,
.otp-kicker {
  color: #9ddbf5;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.panel-content h2,
.otp-modal h2 {
  margin: 14px 0 14px;
  font-size: clamp(34px, 4vw, 50px);
  line-height: 0.98;
  letter-spacing: -0.05em;
}
.panel-lead,
.otp-copy {
  color: var(--text-soft);
  line-height: 1.72;
  font-size: 16px;
}
.panel-quote {
  margin: 26px 0;
  padding: 18px 20px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(34,132,196,0.12), rgba(76,189,151,0.11));
  border: 1px solid rgba(238,247,249,0.08);
  font-size: 22px;
  line-height: 1.35;
}
.panel-content > p:last-of-type { color: var(--text-soft); line-height: 1.72; }
.panel-mini-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 22px;
}
.panel-mini-grid > div,
.service-list article {
  border-radius: 22px;
  padding: 18px;
  border: 1px solid var(--stroke-soft);
  background: rgba(255,255,255,0.03);
}
.panel-mini-grid span,
.service-list span {
  display: inline-flex;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(34,132,196,0.18);
  color: #a8d8f1;
  font-weight: 800;
  margin-bottom: 12px;
}
.panel-mini-grid strong,
.service-list h3 {
  display: block;
  margin: 0 0 8px;
  font-size: 18px;
}
.panel-mini-grid p,
.service-list p {
  margin: 0;
  color: var(--text-dim);
  line-height: 1.65;
}
.service-list {
  display: grid;
  gap: 14px;
  margin-top: 20px;
}
.service-list article { display: flex; gap: 16px; align-items: flex-start; }
.service-list span { flex: 0 0 auto; margin-bottom: 0; }
.panel-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 24px;
  padding: 16px 20px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--green), #75e6bc);
  color: var(--bg);
  font-weight: 800;
}
.panel-cta span { opacity: .74; }

.otp-modal {
  inset: 50% auto auto 50%;
  width: min(540px, calc(100vw - 32px));
  padding: 30px 28px 28px;
  border-radius: 28px;
  transform: translate(-50%, -45%) scale(.96);
  opacity: 0;
  visibility: hidden;
  transition: .25s ease;
}
.otp-modal.is-open {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
}
.otp-icon {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(34,132,196,0.18), rgba(76,189,151,0.18));
  color: var(--text);
}
.otp-form { margin-top: 18px; }
.otp-inputs { justify-content: space-between; gap: 10px; }
.otp-inputs input {
  width: calc((100% - 50px) / 6);
  aspect-ratio: 1 / 1.1;
  text-align: center;
  font-size: 28px;
  font-weight: 800;
  border-radius: 16px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,0.04);
  color: var(--text);
  outline: none;
}
.otp-inputs input:focus {
  border-color: rgba(76,189,151,0.5);
  box-shadow: 0 0 0 4px rgba(76,189,151,0.1);
}
.otp-actions { gap: 12px; margin-top: 18px; }
.verify-button { flex: 1; }
.resend-button {
  flex: 1;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,0.05);
  color: var(--text);
  padding: 16px 18px;
}
.otp-status {
  min-height: 20px;
  margin: 14px 2px 0;
  color: var(--text-soft);
  font-size: 14px;
}

.toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: min(360px, calc(100vw - 32px));
  padding: 16px 18px;
  border-radius: 20px;
  background: rgba(9, 18, 28, 0.92);
  border: 1px solid rgba(238,247,249,0.1);
  box-shadow: var(--shadow-soft);
  z-index: 30;
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
  transition: .25s ease;
}
.toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.toast strong { display: block; margin-bottom: 6px; }
.toast span { color: var(--text-dim); font-size: 14px; }

.reveal-item {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal-item.is-revealed {
  opacity: 1;
  transform: translateY(0);
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 1260px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-copy { max-width: none; }
  .hero-art { min-height: 760px; }
}

@media (max-width: 980px) {
  .page-shell { padding: 14px; }
  .launch-card { min-height: calc(100vh - 28px); padding: 22px 18px 20px; }
  .desktop-nav,
  .pill-button { display: none; }
  .menu-button { display: inline-flex; }
  .countdown-row,
  .site-footer,
  .insight-row { flex-direction: column; }
  .countdown-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-art { min-height: 820px; }
  .scene-card--main { width: min(90%, 560px); left: 5%; }
  .float-card--countdown { right: 4%; top: 8%; }
  .float-card--metric { top: 49%; }
  .site-footer { align-items: flex-start; }
}

@media (max-width: 680px) {
  .brand-logo { width: 180px; }
  .hero-grid { gap: 24px; padding-top: 28px; }
  .hero-title { font-size: clamp(42px, 12vw, 62px); }
  .title-accent::after { bottom: -8px; }
  .hero-subtitle { font-size: 15px; }
  .launch-bar { flex-direction: column; align-items: flex-start; }
  .countdown-grid { grid-template-columns: 1fr 1fr; }
  .input-shell {
    align-items: stretch;
    flex-wrap: wrap;
    gap: 10px;
    border-radius: 26px;
    padding: 14px;
  }
  #email { width: calc(100% - 34px); }
  .notify-button { width: 100%; }
  .insight-row { gap: 12px; }
  .hero-art {
    min-height: 980px;
    margin-bottom: 10px;
  }
  .scene-card--main {
    width: min(92%, 520px);
    left: 4%;
    top: 7%;
  }
  .scene-logo { width: 130px; }
  .scene-copy-block h2 { font-size: 30px; }
  .float-card--countdown { width: 210px; right: 5%; top: 35%; }
  .float-card--services { width: 230px; left: 6%; bottom: 26%; }
  .float-card--steps { width: 210px; left: 8%; top: 64%; }
  .float-card--metric { width: 190px; right: 5%; top: 73%; }
  .float-card--quote { width: 210px; right: 8%; bottom: 6%; }
  .floating-pill--a, .floating-pill--b, .floating-pill--c { font-size: 11px; }
  .panel-mini-grid { grid-template-columns: 1fr; }
  .service-list article { flex-direction: column; }
  .otp-actions { flex-direction: column; }
  .otp-inputs { gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* Keep Brenlify's subtle interface motion active across desktop and mobile.
     Cards themselves remain stationary; only progress, scan, glow and UI effects animate. */
}


/* V4 motion layer: deliberately visible so the page feels active rather than like a static mock-up. */
.hero-art {
  background-size: 140% 140%, 100% 100%;
  animation: artBreath 12s ease-in-out infinite;
}
@keyframes artBreath {
  0%,100% { background-position: 0% 0%, center; }
  50% { background-position: 100% 100%, center; }
}
.art-grid {
  background-size: 60px 60px;
  animation: gridTravel 18s linear infinite;
}
@keyframes gridTravel {
  from { background-position: 0 0, 0 0; }
  to { background-position: 60px 60px, 60px 60px; }
}
.motion-lane {
  position: absolute;
  height: 1px;
  width: 58%;
  left: -65%;
  background: linear-gradient(90deg, transparent, rgba(117,230,188,.08), rgba(117,230,188,.75), rgba(34,132,196,.55), transparent);
  box-shadow: 0 0 18px rgba(76,189,151,.22);
  opacity: .78;
  z-index: 0;
}
.motion-lane--one { top: 23%; animation: laneSweep 7s linear infinite; }
.motion-lane--two { top: 49%; animation: laneSweep 9.5s linear 1.7s infinite; }
.motion-lane--three { top: 78%; animation: laneSweep 8.2s linear 3.2s infinite; }
@keyframes laneSweep {
  0% { transform: translateX(0) scaleX(.5); opacity: 0; }
  12% { opacity: .8; }
  65% { opacity: .7; }
  100% { transform: translateX(300%) scaleX(1.2); opacity: 0; }
}
.stage-ring { border-style: dashed; animation: ringRotate 24s linear infinite; }
.stage-ring--two { animation-direction: reverse; animation-duration: 18s; }
.stage-ring i {
  position: absolute;
  left: 50%;
  top: -5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 22px rgba(76,189,151,.8);
}
@keyframes ringRotate { to { transform: translate(-50%, -50%) rotate(360deg); } }

/* The launch sliders now have runners that visibly travel along the tracks. */
.launch-progress { overflow: hidden; }
.launch-progress i {
  position: relative;
  overflow: hidden;
  width: 100% !important;
  background: rgba(238,247,249,.08);
}
.launch-progress i::before {
  content: "";
  position: absolute;
  inset: 0;
  width: var(--fill, 82%);
  border-radius: inherit;
  background: linear-gradient(90deg, var(--primary), var(--green));
  animation: fillPulse 3.2s ease-in-out infinite;
}
.launch-progress i::after {
  content: "";
  position: absolute;
  top: 50%;
  left: -18px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  transform: translateY(-50%);
  background: #eef7f9;
  box-shadow: 0 0 18px rgba(117,230,188,.9);
  animation: runnerMove 3.8s cubic-bezier(.45,0,.55,1) infinite;
}
.launch-progress i:nth-child(1) { --fill: 94%; }
.launch-progress i:nth-child(2) { --fill: 83%; }
.launch-progress i:nth-child(3) { --fill: 70%; }
.launch-progress i:nth-child(4) { --fill: 57%; }
.launch-progress i:nth-child(2)::after { animation-delay: .55s; }
.launch-progress i:nth-child(3)::after { animation-delay: 1.1s; }
.launch-progress i:nth-child(4)::after { animation-delay: 1.65s; }
@keyframes fillPulse {
  0%,100% { filter: saturate(1) brightness(.92); transform: scaleX(.96); transform-origin: left; }
  50% { filter: saturate(1.25) brightness(1.18); transform: scaleX(1); transform-origin: left; }
}
@keyframes runnerMove {
  0% { left: -20px; opacity: 0; }
  12% { opacity: 1; }
  88% { opacity: 1; }
  100% { left: calc(100% + 4px); opacity: 0; }
}

/* Main preview gets a repeated scanning light. */
.scene-card--main { overflow: hidden; animation-duration: 5.8s; }
.scene-scan {
  position: absolute;
  z-index: 4;
  top: -35%;
  left: -24%;
  width: 34%;
  height: 170%;
  transform: rotate(14deg);
  background: linear-gradient(90deg, transparent, rgba(238,247,249,.06), rgba(117,230,188,.14), transparent);
  filter: blur(2px);
  pointer-events: none;
  animation: cardScan 5.5s ease-in-out infinite;
}
@keyframes cardScan {
  0%,12% { left: -42%; opacity: 0; }
  22% { opacity: 1; }
  68% { opacity: .9; }
  82%,100% { left: 120%; opacity: 0; }
}

/* Launch-track progress is alive: fill breathes, gradient flows and a bright runner loops. */
.mini-progress {
  position: relative;
  isolation: isolate;
}
.mini-progress span {
  width: var(--live-progress, var(--w, 86%));
  background-size: 220% 100%;
  background-image: linear-gradient(90deg, #4cbd97, #75e6bc, #2284c4, #4cbd97);
  animation: miniGradient 2.2s linear infinite, miniBreathe 3.6s ease-in-out infinite;
}
.mini-progress-runner {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: -12px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  transform: translateY(-50%);
  background: #eef7f9;
  box-shadow: 0 0 16px rgba(117,230,188,.95);
  animation: miniRunner 2.8s linear infinite;
}
@keyframes miniGradient { to { background-position: -220% 0; } }
@keyframes miniBreathe {
  0%,100% { filter: brightness(.95); }
  50% { filter: brightness(1.22); }
}
@keyframes miniRunner {
  0% { left: -12px; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { left: calc(100% + 2px); opacity: 0; }
}
.motion-status {
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--text-dim);
}
.motion-status i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  animation: activityBlink 1s steps(2, end) infinite;
}
@keyframes activityBlink { 50% { opacity: .25; } }

/* Growth bars visibly rise and fall on different cycles. */
.sparkline i {
  transform-origin: bottom;
  animation: growthBar 1.7s ease-in-out infinite alternate;
}
.sparkline i:nth-child(1) { animation-delay: -.2s; }
.sparkline i:nth-child(2) { animation-delay: -.7s; }
.sparkline i:nth-child(3) { animation-delay: -1.1s; }
.sparkline i:nth-child(4) { animation-delay: -.4s; }
.sparkline i:nth-child(5) { animation-delay: -1.4s; }
.sparkline i:nth-child(6) { animation-delay: -.9s; }
@keyframes growthBar {
  0% { transform: scaleY(.48); filter: brightness(.85); }
  52% { transform: scaleY(.82); filter: brightness(1); }
  100% { transform: scaleY(1.12); filter: brightness(1.22); }
}

/* More noticeable floating without becoming distracting. */
.scene-card--main { animation-name: bobMainV4; }
.float-card--countdown { animation-name: bobCountdownV4; animation-duration: 4.8s; }
.float-card--services { animation-name: bobServicesV4; animation-duration: 5.4s; }
.float-card--quote { animation-name: bobQuoteV4; animation-duration: 5.9s; }
.float-card--metric { animation-name: bobMetricV4; animation-duration: 4.6s; }
.float-card--steps { animation-name: bobStepsV4; animation-duration: 5.1s; }
@keyframes bobMainV4 {
  0%,100% { transform: translate3d(calc(var(--px) + var(--drag-x)), calc(var(--py) + var(--drag-y)), 0) rotate(-5deg); }
  35% { transform: translate3d(calc(var(--px) + var(--drag-x) + 8px), calc(var(--py) + var(--drag-y) - 14px), 0) rotate(-3.8deg); }
  70% { transform: translate3d(calc(var(--px) + var(--drag-x) - 5px), calc(var(--py) + var(--drag-y) + 7px), 0) rotate(-5.8deg); }
}
@keyframes bobCountdownV4 {
  0%,100% { transform: translate3d(calc(var(--px) + var(--drag-x)), calc(var(--py) + var(--drag-y)), 0) rotate(6deg); }
  50% { transform: translate3d(calc(var(--px) + var(--drag-x) - 9px), calc(var(--py) + var(--drag-y) + 17px), 0) rotate(3.5deg); }
}
@keyframes bobServicesV4 {
  0%,100% { transform: translate3d(calc(var(--px) + var(--drag-x)), calc(var(--py) + var(--drag-y)), 0) rotate(-6deg); }
  50% { transform: translate3d(calc(var(--px) + var(--drag-x) + 11px), calc(var(--py) + var(--drag-y) - 16px), 0) rotate(-3.5deg); }
}
@keyframes bobQuoteV4 {
  0%,100% { transform: translate3d(calc(var(--px) + var(--drag-x)), calc(var(--py) + var(--drag-y)), 0) rotate(4deg); }
  50% { transform: translate3d(calc(var(--px) + var(--drag-x) - 7px), calc(var(--py) + var(--drag-y) - 18px), 0) rotate(7deg); }
}
@keyframes bobMetricV4 {
  0%,100% { transform: translate3d(calc(var(--px) + var(--drag-x)), calc(var(--py) + var(--drag-y)), 0) rotate(-8deg); }
  50% { transform: translate3d(calc(var(--px) + var(--drag-x) + 10px), calc(var(--py) + var(--drag-y) + 14px), 0) rotate(-4deg); }
}
@keyframes bobStepsV4 {
  0%,100% { transform: translate3d(calc(var(--px) + var(--drag-x)), calc(var(--py) + var(--drag-y)), 0) rotate(3deg); }
  50% { transform: translate3d(calc(var(--px) + var(--drag-x) - 10px), calc(var(--py) + var(--drag-y) - 13px), 0) rotate(.5deg); }
}
.draggable.is-dragging { animation-play-state: paused !important; }

/* Tiny life in the countdown numbers when values change. */
.count-number.tick { animation: numberTick .32s ease; }
@keyframes numberTick {
  0% { transform: translateY(0); opacity: 1; }
  45% { transform: translateY(-5px); opacity: .45; }
  100% { transform: translateY(0); opacity: 1; }
}


/* Fixed-card layout refinements. Cards stay fixed while internal motion remains active. */
.scene-card--main,
.float-card--countdown,
.float-card--services,
.float-card--quote,
.float-card--metric,
.float-card--steps,
.floating-pill {
  animation: none !important;
}

.scene-card--main {
  left: 4.5%;
  top: 10%;
  width: 88%;
  z-index: 2;
  transform: rotate(-2deg) !important;
}
.scene-card--main .scene-copy-block,
.scene-card--main .scene-pill-row,
.scene-card--main .scene-metrics {
  max-width: 70%;
}
.scene-card--main .scene-copy-block p { max-width: 430px; }
.scene-topbar { justify-content: space-between; }

.float-card--countdown {
  top: 5%;
  right: 1.5%;
  width: 232px;
  z-index: 7;
  transform: rotate(3deg) !important;
}
.float-card--metric {
  top: 43%;
  right: 0.8%;
  width: 205px;
  z-index: 7;
  transform: rotate(-4deg) !important;
}
.float-card--services {
  left: 1.5%;
  bottom: 4.5%;
  width: 265px;
  z-index: 6;
  transform: rotate(-3deg) !important;
}
.float-card--steps {
  left: 38%;
  top: auto;
  bottom: 4%;
  width: 230px;
  z-index: 6;
  transform: rotate(1deg) !important;
}
.float-card--quote {
  right: 5.5%;
  bottom: 5.5%;
  width: 235px;
  z-index: 6;
  transform: rotate(2deg) !important;
}

.floating-pill {
  transform: none !important;
  z-index: 8;
}
.floating-pill--a { left: 11%; top: 4%; }
.floating-pill--b { right: 9%; top: 67%; }
.floating-pill--c { left: 49%; bottom: 2.5%; }

.countdown-cell {
  min-height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.count-number--clock {
  font-size: clamp(20px, 2vw, 31px);
  letter-spacing: -0.04em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.count-number--date {
  font-size: clamp(24px, 2.3vw, 34px);
  line-height: 1;
  white-space: nowrap;
}
.countdown-cell--accent {
  justify-content: center;
  align-items: flex-start;
}
.countdown-cell--accent .count-label { margin-top: 10px; }

@media (max-width: 1260px) {
  .scene-card--main { width: 88%; left: 4%; }
  .scene-card--main .scene-copy-block,
  .scene-card--main .scene-pill-row,
  .scene-card--main .scene-metrics { max-width: 68%; }
  .float-card--countdown { right: 2%; top: 5%; }
  .float-card--metric { right: 1%; top: 44%; }
}

@media (max-width: 980px) {
  .scene-card--main { width: 90%; left: 4%; top: 8%; }
  .scene-card--main .scene-copy-block,
  .scene-card--main .scene-pill-row,
  .scene-card--main .scene-metrics { max-width: 72%; }
  .float-card--countdown { right: 3%; top: 8%; }
  .float-card--metric { right: 2%; top: 48%; }
  .float-card--services { left: 3%; bottom: 5%; }
  .float-card--steps { left: 34%; bottom: 3%; }
  .float-card--quote { right: 3%; bottom: 5%; }
}

@media (max-width: 680px) {
  .countdown-cell { min-height: 126px; }
  .count-number--clock { font-size: 21px; }
  .count-number--date { font-size: 27px; }
  .scene-card--main { width: 92%; left: 4%; top: 6%; transform: rotate(-1deg) !important; }
  .scene-card--main .scene-copy-block,
  .scene-card--main .scene-pill-row,
  .scene-card--main .scene-metrics { max-width: 100%; }
  .float-card--countdown { width: 205px; right: 4%; top: 36%; transform: rotate(2deg) !important; }
  .float-card--services { width: 225px; left: 4%; bottom: 25%; transform: rotate(-2deg) !important; }
  .float-card--steps { width: 205px; left: 5%; bottom: 9%; transform: rotate(1deg) !important; }
  .float-card--metric { width: 188px; right: 3%; top: 73%; transform: rotate(-2deg) !important; }
  .float-card--quote { width: 205px; right: 5%; bottom: 3%; transform: rotate(1deg) !important; }
  .floating-pill--a { left: 8%; top: 2.5%; }
  .floating-pill--b { right: 5%; top: 66%; }
  .floating-pill--c { left: 38%; bottom: 1%; }
}

/* V6 refinements: compact digital countdown, straight feature cards and typed content. */
.countdown-row--digital {
  display: block;
  margin-top: 20px;
  padding: 16px;
  border-radius: 24px;
  border: 1px solid var(--stroke-soft);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.018)),
    rgba(8, 18, 28, 0.46);
  overflow: hidden;
}

.countdown-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.countdown-kicker {
  display: block;
  margin-bottom: 4px;
  color: var(--text-dim);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .18em;
}
.countdown-head strong {
  display: block;
  font-size: 14px;
  letter-spacing: -.01em;
}
.countdown-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--text-dim);
  font-size: 11px;
  white-space: nowrap;
}
.countdown-status i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 0 rgba(76,189,151,.55);
  animation: pulse 1.7s infinite;
}

.digital-countdown {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.digital-unit {
  min-width: 0;
  text-align: center;
}
.digit-panel {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 68px;
  padding: 8px 5px;
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid rgba(238,247,249,.11);
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), transparent 46%, rgba(0,0,0,.17) 52%, rgba(255,255,255,.025)),
    #09131e;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    inset 0 -10px 22px rgba(0,0,0,.26),
    0 8px 18px rgba(0,0,0,.16);
}
.digit-panel::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: rgba(238,247,249,.08);
  box-shadow: 0 1px 0 rgba(0,0,0,.48);
  z-index: 0;
}
.digit-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 18%, rgba(238,247,249,.07) 42%, transparent 58%);
  transform: translateX(-120%);
  animation: digitReflection 4.4s ease-in-out infinite;
  pointer-events: none;
}
.digital-unit:nth-child(2) .digit-panel::after { animation-delay: .35s; }
.digital-unit:nth-child(3) .digit-panel::after { animation-delay: .7s; }
.digital-unit:nth-child(4) .digit-panel::after { animation-delay: 1.05s; }
@keyframes digitReflection {
  0%, 60% { transform: translateX(-130%); opacity: 0; }
  72% { opacity: 1; }
  88%, 100% { transform: translateX(130%); opacity: 0; }
}
.digit-panel span {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  color: var(--text);
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", ui-monospace, monospace;
  font-size: clamp(29px, 3vw, 42px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
  text-shadow:
    0 0 10px rgba(238,247,249,.12),
    0 1px 0 rgba(255,255,255,.16);
}
.digit-panel span.tick {
  animation: digitalTick .22s ease;
}
@keyframes digitalTick {
  0% { opacity: .45; transform: translateY(-2px); }
  100% { opacity: 1; transform: translateY(0); }
}
.digit-label {
  display: block;
  margin-top: 7px;
  color: var(--text-dim);
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .16em;
}

/* The requested cards are deliberately straight and fixed in place. */
.scene-card--main,
.float-card--services,
.float-card--steps {
  transform: none !important;
}
.scene-card--main {
  left: 4.5%;
  top: 9%;
}
.float-card--services {
  left: 2%;
  bottom: 4.5%;
  width: 286px;
}
.float-card--steps {
  left: 39%;
  bottom: 4.5%;
  width: 260px;
}

.typing-card {
  text-align: left;
}
.typing-card .float-label {
  text-align: left;
  margin-bottom: 12px;
}
.typing-card-body {
  position: relative;
  min-height: 126px;
  text-align: left;
}
.typing-card-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 28px;
  padding: 0 9px;
  margin-bottom: 10px;
  border-radius: 999px;
  background: rgba(34,132,196,.14);
  border: 1px solid rgba(34,132,196,.22);
  color: #9edcff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
}
.typing-line {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  min-height: 46px;
  color: var(--text);
  font-size: 18px;
  font-weight: 760;
  line-height: 1.28;
  letter-spacing: -.02em;
  text-align: left;
}
.typing-text {
  text-align: left;
}
.typing-caret {
  width: 2px;
  height: 1.1em;
  margin: .1em 0 0 4px;
  flex: 0 0 auto;
  background: var(--green);
  animation: typingBlink .78s step-end infinite;
}
@keyframes typingBlink {
  0%, 48% { opacity: 1; }
  49%, 100% { opacity: 0; }
}
.typing-card-body p {
  margin: 9px 0 0;
  color: var(--text-dim);
  font-size: 12px;
  line-height: 1.55;
  text-align: left;
}

@media (max-width: 980px) {
  .countdown-row--digital { padding: 14px; }
  .digit-panel { min-height: 64px; }
  .scene-card--main { transform: none !important; }
  .float-card--services,
  .float-card--steps { transform: none !important; }
}

@media (max-width: 680px) {
  .countdown-head {
    align-items: flex-start;
  }
  .countdown-status {
    font-size: 9px;
  }
  .digital-countdown { gap: 7px; }
  .digit-panel {
    min-height: 56px;
    padding: 6px 3px;
    border-radius: 8px;
  }
  .digit-panel span {
    font-size: clamp(24px, 8.1vw, 32px);
    letter-spacing: -.02em;
  }
  .digit-label {
    margin-top: 6px;
    font-size: 7.5px;
    letter-spacing: .11em;
  }
  .scene-card--main { transform: none !important; }
  .float-card--services {
    width: 235px;
    transform: none !important;
  }
  .float-card--steps {
    width: 218px;
    transform: none !important;
  }
  .typing-line { font-size: 15px; min-height: 40px; }
  .typing-card-body { min-height: 116px; }
}

@media (max-width: 430px) {
  .countdown-row--digital { padding: 12px 10px; }
  .countdown-head { gap: 8px; margin-bottom: 12px; }
  .countdown-head strong { font-size: 12px; }
  .countdown-status { display: none; }
  .digital-countdown { gap: 5px; }
  .digit-panel { min-height: 50px; }
  .digit-panel span { font-size: 22px; }
  .digit-label { font-size: 7px; }
}


/* V7 refinements: compact service and approach cards plus clean mobile stacking. */
.compact-service-card,
.compact-approach-card {
  text-align: left;
  padding: 15px 17px;
}
.compact-service-card .float-label,
.compact-approach-card .float-label {
  margin-bottom: 9px;
  text-align: left;
}
.compact-service-card .typing-line {
  min-height: 27px;
  align-items: center;
  font-size: 17px;
  line-height: 1.25;
  text-align: left;
}
.compact-service-card .typing-caret {
  height: 1em;
  margin-top: .02em;
}
.compact-approach-card .approach-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
  text-align: left;
}
.compact-approach-card .approach-list li {
  display: block;
  color: var(--text-soft);
  font-size: 13px;
  line-height: 1.3;
  text-align: left;
}
.compact-approach-card .approach-list li::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin: 0 8px 2px 0;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 10px rgba(76,189,151,.5);
}

/* Keep both compact cards separate and low so the main showcase stays readable. */
.float-card--services {
  left: 2%;
  bottom: 3.2%;
  width: 252px;
  min-height: 82px;
}
.float-card--steps {
  left: 42%;
  bottom: 3.2%;
  width: 222px;
  min-height: 112px;
}

@media (max-width: 980px) and (min-width: 681px) {
  .float-card--services {
    left: 2.5%;
    bottom: 3%;
    width: 246px;
  }
  .float-card--steps {
    left: 39%;
    bottom: 3%;
    width: 218px;
  }
}

/* On phones, stop using the desktop collage. Cards become a readable vertical stack. */
@media (max-width: 680px) {
  .hero-art {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 0;
    padding: 18px;
    overflow: hidden;
  }
  .hero-art::before {
    inset: 10px;
  }
  .hero-art > .scene-card,
  .hero-art > .float-card,
  .hero-art > .floating-pill {
    position: relative !important;
    inset: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: none !important;
    transform: none !important;
    z-index: 2;
  }
  .scene-card--main {
    order: 1;
  }
  .float-card--countdown {
    order: 2;
  }
  .float-card--services {
    order: 3;
    min-height: 0;
  }
  .float-card--steps {
    order: 4;
    min-height: 0;
  }
  .float-card--metric {
    order: 5;
  }
  .float-card--quote {
    order: 6;
  }
  .floating-pill--a { order: 7; }
  .floating-pill--b { order: 8; }
  .floating-pill--c { order: 9; }
  .scene-card--main .scene-copy-block,
  .scene-card--main .scene-pill-row,
  .scene-card--main .scene-metrics {
    max-width: 100%;
  }
  .compact-service-card .typing-line {
    min-height: 25px;
    font-size: 16px;
  }
  .compact-approach-card .approach-list {
    gap: 7px;
  }
  .floating-pill {
    align-self: flex-start;
    width: fit-content !important;
  }
}

@media (max-width: 680px) {
  .hero-art > .floating-pill {
    align-self: flex-start;
    width: fit-content !important;
  }
}
\n\n/* V8 refinements: fixed-height service card, removed approach and decorative service pills. */
.float-card--services.compact-service-card {
  height: 96px;
  min-height: 96px;
  max-height: 96px;
  padding: 15px 17px;
  overflow: hidden;
}
.compact-service-card .float-label {
  flex: 0 0 auto;
  margin-bottom: 8px;
}
.compact-service-card .typing-line {
  height: 44px;
  min-height: 44px;
  max-height: 44px;
  display: flex;
  align-items: flex-start;
  overflow: hidden;
  line-height: 1.28;
}
.compact-service-card .typing-text {
  display: inline-block;
  max-width: calc(100% - 12px);
  line-height: 1.28;
}

/* With the approach card removed, keep the remaining service card clear of the main content. */
.float-card--services {
  left: 2.2%;
  bottom: 3.2%;
  width: 270px;
}

/* Old decorative pills and approach selectors are retained only for backwards-safe CSS parsing. */
.float-card--steps,
.floating-pill {
  display: none !important;
}

@media (max-width: 980px) and (min-width: 681px) {
  .float-card--services {
    left: 2.5%;
    bottom: 3%;
    width: 260px;
  }
}

@media (max-width: 680px) {
  .float-card--services.compact-service-card {
    height: 96px !important;
    min-height: 96px !important;
    max-height: 96px !important;
  }
  .compact-service-card .typing-line {
    height: 44px;
    min-height: 44px;
    max-height: 44px;
    font-size: 16px;
  }
  .float-card--services { order: 3; }
  .float-card--metric { order: 4; }
  .float-card--quote { order: 5; }
}

/* V9 interaction fixes: stable launch-list navigation and a reliable mobile header menu. */
.site-header {
  position: relative;
  z-index: 70;
}

#launch-list {
  scroll-margin-top: 28px;
}

@media (max-width: 980px) {
  .launch-card {
    position: relative;
  }

  .site-header {
    z-index: 80;
  }

  .menu-button {
    position: relative;
    z-index: 82;
    pointer-events: auto;
  }

  .mobile-menu {
    position: absolute;
    top: 88px;
    left: 18px;
    right: 18px;
    z-index: 81;
    margin-top: 0;
    padding: 10px;
    pointer-events: auto;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .28);
    backdrop-filter: blur(18px);
  }

  .mobile-menu button,
  .mobile-menu a {
    position: relative;
    z-index: 1;
    width: 100%;
    text-align: left;
    pointer-events: auto;
  }
}

/* V10: Instagram follow link. */
.instagram-link,
.mobile-instagram {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
}

.instagram-link svg,
.mobile-instagram svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
}

.instagram-link {
  color: var(--text-soft);
  border: 1px solid rgba(76, 189, 151, 0.14);
  background: rgba(76, 189, 151, 0.045);
}

.instagram-link:hover {
  color: var(--text);
  border-color: rgba(76, 189, 151, 0.3);
  background: rgba(76, 189, 151, 0.09) !important;
}

.mobile-instagram {
  margin-top: 4px;
  color: var(--text-soft) !important;
  border: 1px solid rgba(76, 189, 151, 0.14) !important;
  background: rgba(76, 189, 151, 0.055) !important;
}

.mobile-instagram strong {
  color: var(--green);
  font-weight: 700;
}

@media (max-width: 680px) {
  .footer-links {
    flex-wrap: wrap;
  }
}

/* V13: draw attention to the launch-list field only after the main CTA is used. */
.input-shell.is-launch-highlight {
  border-color: rgba(76, 189, 151, 0.95);
  box-shadow:
    0 0 0 2px rgba(76, 189, 151, 0.24),
    0 0 22px rgba(76, 189, 151, 0.34),
    0 0 52px rgba(76, 189, 151, 0.16),
    inset 0 0 0 1px rgba(238, 247, 249, 0.08);
  animation: launchFieldGlow 1.05s ease-in-out 3;
}

@keyframes launchFieldGlow {
  0%, 100% {
    border-color: rgba(76, 189, 151, 0.55);
    box-shadow:
      0 0 0 2px rgba(76, 189, 151, 0.12),
      0 0 16px rgba(76, 189, 151, 0.18),
      0 0 32px rgba(76, 189, 151, 0.08),
      inset 0 0 0 1px rgba(238, 247, 249, 0.05);
  }
  50% {
    border-color: rgba(117, 230, 188, 1);
    box-shadow:
      0 0 0 4px rgba(76, 189, 151, 0.20),
      0 0 30px rgba(76, 189, 151, 0.50),
      0 0 68px rgba(34, 132, 196, 0.16),
      inset 0 0 0 1px rgba(238, 247, 249, 0.13);
  }
}


/* V14: Instagram replaces the Launch list item in the header navigation. */
.header-instagram {
  padding: 10px 14px;
  white-space: nowrap;
}

.header-instagram span {
  line-height: 1;
}