:root {
  --brand: #2f7de1;
  --brand-dark: #1a5fbf;
  --brand-glow: #5aa9ff;
  --violet: #7c5cff;
  --ink: #0f1b2a;
  --ink-soft: #526173;
  --night: #0a1424;
  --night-2: #10233f;
  --line: #e2e8f0;
  --surface: #ffffff;
  --surface-alt: #f5f8fc;
  --radius: 16px;
  --shadow: 0 1px 2px rgba(15, 27, 42, 0.05), 0 12px 32px rgba(15, 27, 42, 0.08);
  --shadow-lift: 0 2px 4px rgba(15, 27, 42, 0.06), 0 22px 48px rgba(15, 27, 42, 0.14);
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }

a { color: var(--brand-dark); }
a:focus-visible, button:focus-visible { outline: 3px solid #ffb300; outline-offset: 3px; border-radius: 6px; }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 12px; top: 12px; z-index: 20; background: var(--surface); padding: 8px 12px; }

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 10;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid rgba(226, 232, 240, 0.8);
}
.site-header .wrap { display: flex; align-items: center; gap: 20px; min-height: 70px; flex-wrap: wrap; }
.logo img { display: block; height: 32px; width: auto; }
.nav { display: flex; gap: 26px; margin-left: auto; flex-wrap: wrap; }
.nav a { color: var(--ink-soft); text-decoration: none; font-weight: 500; font-size: 0.97rem; transition: color 0.15s; }
.nav a:hover { color: var(--ink); }
.header-actions { display: flex; gap: 8px; align-items: center; }

.button {
  display: inline-block;
  padding: 11px 22px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  background: linear-gradient(135deg, var(--brand) 0%, var(--violet) 130%);
  color: #ffffff;
  font-weight: 600;
  font-size: 0.97rem;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(47, 125, 225, 0.32);
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s, color 0.15s;
}
.button:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(47, 125, 225, 0.42); }
.button-ghost { background: transparent; color: var(--ink); box-shadow: none; }
.button-ghost:hover { background: var(--surface-alt); box-shadow: none; }
.button-outline { background: transparent; color: var(--brand-dark); border-color: #b9d2f3; box-shadow: none; }
.button-outline:hover { background: #eef5ff; box-shadow: none; }
.button-light { background: #ffffff; color: var(--night); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28); }
.button-light:hover { box-shadow: 0 12px 30px rgba(0, 0, 0, 0.36); }
.button-outline-light { background: rgba(255, 255, 255, 0.06); color: #ffffff; border-color: rgba(255, 255, 255, 0.35); box-shadow: none; }
.button-outline-light:hover { background: rgba(255, 255, 255, 0.14); box-shadow: none; }

/* Dark surfaces share one backdrop: night gradient, soft glows, faint grid. */
.hero, .showcase-section, .contact {
  color: #ffffff;
  background:
    radial-gradient(900px 480px at 85% -10%, rgba(124, 92, 255, 0.34), transparent 60%),
    radial-gradient(760px 460px at 5% 110%, rgba(47, 125, 225, 0.36), transparent 60%),
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px) 0 0 / 100% 44px,
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px) 0 0 / 44px 100%,
    linear-gradient(160deg, var(--night) 0%, var(--night-2) 100%);
}

/* Hero */
.hero { padding: 88px 0 104px; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 56px; align-items: center; }
.eyebrow {
  display: inline-block; margin: 0 0 22px; padding: 6px 14px;
  border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  font-size: 0.84rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: #cfe2ff;
}
.hero h1 { font-size: clamp(2.3rem, 4.6vw, 3.7rem); line-height: 1.08; letter-spacing: -0.025em; margin: 0 0 24px; }
.accent { display: inline-block; white-space: nowrap; background: linear-gradient(100deg, var(--brand-glow), #b9a6ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-lead { font-size: 1.13rem; margin: 0 0 14px; color: #c9d6e6; max-width: 34em; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 30px; }

/* Browser frame around screenshots */
.frame { border-radius: 14px; background: #ffffff; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.16); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05); }
.frame-bar { display: flex; align-items: center; gap: 7px; padding: 11px 14px; background: #e9eef5; border-bottom: 1px solid #d5dde8; }
.frame-bar span { width: 11px; height: 11px; border-radius: 50%; background: #c3cedb; }
.frame-bar span:nth-child(1) { background: #ff6b6b; }
.frame-bar span:nth-child(2) { background: #ffc145; }
.frame-bar span:nth-child(3) { background: #3ccf7a; }
.frame-bar em { margin-left: 12px; padding: 3px 14px; border-radius: 999px; background: #ffffff; font-style: normal; font-size: 0.76rem; color: #7b8aa0; }
.frame img { display: block; width: 100%; }
.frame-tilt { transform: perspective(1600px) rotateY(-13deg) rotateX(4deg); transform-origin: left center; width: 128%; animation: float 9s ease-in-out infinite; }
@keyframes float {
  0%, 100% { transform: perspective(1600px) rotateY(-13deg) rotateX(4deg) translateY(0); }
  50% { transform: perspective(1600px) rotateY(-11deg) rotateX(3deg) translateY(-10px); }
}

/* Hero deck: four framed screens stacked in depth. One 16s loop per card, a quarter apart: front for
   3s, swing out toward the viewer, rejoin at the back, then step forward twice. */
.hero-deck { position: relative; transform-style: preserve-3d; }
.hero-deck .frame { animation: deck 16s cubic-bezier(0.6, 0, 0.3, 1) infinite; backface-visibility: hidden; }
.hero-deck .frame + .frame { position: absolute; inset: 0; }
.hero-deck .frame:nth-child(2) { animation-delay: -12s; }
.hero-deck .frame:nth-child(3) { animation-delay: -8s; }
.hero-deck .frame:nth-child(4) { animation-delay: -4s; }
.hero-deck img { aspect-ratio: 1800 / 720; object-fit: cover; object-position: top left; }
@keyframes deck {
  0%, 19% { transform: translate3d(0, 0, 0); opacity: 1; filter: none; }
  24% { transform: translate3d(-14%, 10%, 160px) rotateY(-38deg) rotateZ(-3deg); opacity: 0; filter: none; }
  25% { transform: translate3d(0, -30%, -340px); opacity: 0; filter: brightness(0.55); }
  30%, 44% { transform: translate3d(0, -24.5%, -300px); opacity: 1; filter: brightness(0.55); }
  50%, 69% { transform: translate3d(0, -16.5%, -200px); opacity: 1; filter: brightness(0.7); }
  75%, 94% { transform: translate3d(0, -8.5%, -100px); opacity: 1; filter: brightness(0.85); }
  100% { transform: translate3d(0, 0, 0); opacity: 1; filter: none; }
}

/* Sections */
section { padding: 96px 0; }
section.alt { background: var(--surface-alt); }
.kicker { margin: 0 0 10px; font-size: 0.84rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brand); }
.kicker-light { color: var(--brand-glow); }
h2 { font-size: clamp(1.8rem, 3.2vw, 2.6rem); line-height: 1.14; letter-spacing: -0.02em; margin: 0 0 14px; }
.lead { color: var(--ink-soft); max-width: 46em; margin: 0 0 44px; font-size: 1.08rem; }

.js .reveal:not(.in) { opacity: 0; }
.js .reveal.in { animation: rise 0.65s ease backwards; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* Flow: step list beside one animated stage. A 20s cycle gives each step 4s; the matching scene
   shows on the stage while its step is lit. Negative delays start every step mid-cycle, in order. */
.flow-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 48px; align-items: center; }
.flow { counter-reset: step; list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.flow li {
  counter-increment: step; display: grid; grid-template-columns: 40px 1fr; gap: 16px;
  padding: 16px 18px; border-radius: var(--radius); border: 1px solid transparent;
  animation: step-on 20s infinite;
}
.flow li::before {
  content: counter(step);
  display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: 12px; color: #ffffff; font-weight: 700; font-size: 1.05rem;
  background: linear-gradient(135deg, var(--brand), var(--violet));
  box-shadow: 0 6px 16px rgba(47, 125, 225, 0.35);
}
.flow li { cursor: pointer; }
.flow h3 { margin: 0 0 4px; font-size: 1.12rem; }
.flow p { margin: 0; color: var(--ink-soft); font-size: 0.95rem; line-height: 1.55; }
.flow-stage {
  position: relative; aspect-ratio: 220 / 130; border-radius: 24px; overflow: hidden;
  background: linear-gradient(160deg, #eef5ff, #f3efff); border: 1px solid var(--line); box-shadow: var(--shadow-lift);
}
.flow-art { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; animation: scene-on 20s infinite; }
.flow li:nth-child(2), .flow-art:nth-child(2) { animation-delay: -16s; }
.flow li:nth-child(3), .flow-art:nth-child(3) { animation-delay: -12s; }
.flow li:nth-child(4), .flow-art:nth-child(4) { animation-delay: -8s; }
.flow li:nth-child(5), .flow-art:nth-child(5) { animation-delay: -4s; }
@keyframes step-on {
  0%, 19% { background: var(--surface); border-color: var(--line); box-shadow: var(--shadow-lift); transform: translateX(8px); }
  21%, 100% { background: transparent; border-color: transparent; box-shadow: none; transform: none; }
}
@keyframes step-text { 0%, 19% { max-height: 9em; opacity: 1; } 21%, 100% { max-height: 0; opacity: 0; } }
@keyframes scene-on { 0%, 19% { opacity: 1; } 20.5%, 99% { opacity: 0; } 100% { opacity: 1; } }
.flow-art * { transform-box: fill-box; }
.fa-person { animation: bob 4s ease-in-out infinite; }
.fa-file { animation: file-in 4s ease-in infinite; }
.fa-row { transform-origin: left center; animation: grow 4s ease-out infinite backwards; }
.fa-pop { transform-origin: center; animation: pop 4s ease-out infinite backwards; }
.fa-d1 { animation-delay: 0s; }
.fa-d2 { animation-delay: 0.2s; }
.fa-d3 { animation-delay: 0.4s; }
.fa-today { animation: sweep 4s ease-in-out infinite; }
.fa-beam { transform-origin: left center; opacity: 0.35; animation: beam 4s linear infinite; }
.fa-spin { transform-origin: center; animation: spin 4s ease-in-out infinite; }
.fa-fade { animation: fade-in 4s ease-out infinite; }
.fa-truck { animation: drive 4s ease-in-out infinite; }
@keyframes bob { 0%, 100% { transform: none; } 50% { transform: translateY(-2.5px); } }
@keyframes file-in { 0%, 10% { transform: none; opacity: 1; } 38%, 100% { transform: translate(70px, -8px) scale(0.5); opacity: 0; } }
@keyframes grow { 0%, 36% { transform: scaleX(0); } 52%, 92% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes pop { 0%, 40% { transform: scale(0); } 50% { transform: scale(1.25); } 58%, 92% { transform: scale(1); } 100% { transform: scale(0); } }
@keyframes sweep { 0%, 100% { transform: none; } 50% { transform: translateX(118px); } }
@keyframes beam { 0%, 12%, 42%, 100% { opacity: 0; } 16%, 24%, 32% { opacity: 0.45; } 20%, 28% { opacity: 0.15; } }
@keyframes spin { 0%, 15% { transform: none; } 55%, 100% { transform: rotate(360deg); } }
@keyframes fade-in { 0%, 45% { opacity: 0.15; } 60%, 92% { opacity: 1; } 100% { opacity: 0.15; } }
@keyframes drive { 0%, 25% { transform: none; } 62% { transform: translateX(190px); } 62.01% { transform: translateX(-200px); } 100% { transform: none; } }

/* What is included: four panels, each with its own accent */
.bento { display: grid; gap: 22px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.panel {
  --accent: var(--brand); --accent-soft: #e8f1fd;
  position: relative; overflow: hidden;
  padding: 32px 32px 26px; border-radius: 22px;
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow);
  transition: transform 0.25s, box-shadow 0.25s;
}
.panel::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, var(--accent), transparent 85%); }
.panel::after { content: ""; position: absolute; right: -90px; top: -90px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(closest-side, var(--accent-soft), transparent); pointer-events: none; }
.panel:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.panel-plan { --accent: #2f7de1; --accent-soft: #e3eefc; }
.panel-produce { --accent: #7c5cff; --accent-soft: #ece7ff; }
.panel-ship { --accent: #0fa968; --accent-soft: #def6eb; }
.panel-run { --accent: #f08a24; --accent-soft: #fdeeda; }
.panel:nth-child(even) { animation-delay: 0.08s; }
.panel header { position: relative; z-index: 1; margin-bottom: 22px; }
.panel-tag { display: inline-block; padding: 4px 12px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.panel h3 { margin: 12px 0 0; font-size: 1.45rem; letter-spacing: -0.015em; }
.feature-list { position: relative; z-index: 1; list-style: none; padding: 0; margin: 0; }
.feature-list li { display: flex; gap: 16px; padding: 16px 0; border-top: 1px solid var(--line); }
.feature-list h4 { margin: 0 0 3px; font-size: 1.03rem; }
.feature-list p { margin: 0; color: var(--ink-soft); font-size: 0.95rem; line-height: 1.55; }
.icon {
  flex: none; width: 44px; height: 44px; padding: 10px; border-radius: 12px;
  background: var(--accent-soft); color: var(--accent);
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  transition: transform 0.2s, background 0.2s, color 0.2s;
}
.feature-list li:hover .icon { transform: scale(1.08) rotate(-4deg); background: var(--accent); color: #ffffff; }

/* Showcase */
.showcase-section .wrap { max-width: 1420px; }
.showcase-section h2 { margin-bottom: 40px; }
.showcase { display: grid; grid-template-columns: minmax(250px, 310px) minmax(0, 1fr); gap: 32px; align-items: start; }
.showcase-tabs { display: grid; gap: 10px; }
.showcase-tab {
  position: relative; overflow: hidden; display: block; width: 100%; text-align: left;
  padding: 16px 18px 18px; border-radius: 14px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.04);
  color: #ffffff; font: inherit;
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
}
.showcase-tab:hover { background: rgba(255, 255, 255, 0.08); transform: translateX(3px); }
.showcase-tab strong { display: block; font-size: 1.04rem; }
.showcase-caption { display: block; overflow: hidden; max-height: 0; color: #b9c8db; font-size: 0.92rem; line-height: 1.5; transition: max-height 0.4s ease, margin-top 0.4s ease; }
.showcase-tab.active { background: rgba(255, 255, 255, 0.11); border-color: rgba(90, 169, 255, 0.55); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); }
.showcase-tab.active .showcase-caption { max-height: 8em; margin-top: 6px; }
.showcase-progress { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: linear-gradient(90deg, var(--brand-glow), #b9a6ff); }
.showcase.playing:not(.manual) .showcase-tab.active .showcase-progress { animation: fill 7s linear forwards; }
.showcase.manual .showcase-tab.active .showcase-progress { width: 100%; }
.showcase:hover .showcase-progress, .showcase:focus-within .showcase-progress { animation-play-state: paused; }
@keyframes fill { from { width: 0; } to { width: 100%; } }

.showcase-view { position: relative; display: block; width: 100%; padding: 0; border: 0; background: #f4f6fa; cursor: zoom-in; aspect-ratio: 1800 / 790; overflow: hidden; }
.shot img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: top center; }
.showcase-view .shot {
  position: absolute; inset: 0; display: block;
  opacity: 0; transform: scale(1.015) translateY(8px);
  transition: opacity 0.55s ease, transform 0.7s ease;
}
.showcase-view .shot.active { opacity: 1; transform: none; }
/* A shot with two images: two cards in real 3D depth (preserve-3d sorts them, no z-index). Each is in
   front for half of a 12s loop; to swap, the front card pulls out to the left and drops behind while the
   back card pulls out to the right and comes forward, so they pass beside each other, not through. */
.shot-deck { perspective: 1500px; transform-style: preserve-3d; background: linear-gradient(160deg, #e6edf7, #ece8fb); }
.shot-deck img {
  position: absolute; left: 7%; top: 15%; width: auto; height: auto; max-width: 75%; max-height: 72%; border-radius: 8px; background: #ffffff;
  box-shadow: 0 14px 40px rgba(15, 27, 42, 0.28); animation: pair 12s ease-in-out infinite;
}
.shot-deck img + img { animation-delay: -6s; }
.showcase.playing:not(.manual) .showcase-tab.deck-tab.active .showcase-progress { animation-duration: 12s; }
@keyframes pair {
  0%, 42% { transform: translate3d(0, 0, 170px); filter: none; }
  46% { transform: translate3d(-52%, -4%, 220px) rotateY(-18deg); filter: brightness(0.92); }
  50%, 92% { transform: translate3d(14%, -13%, 10px); filter: brightness(0.82); }
  96% { transform: translate3d(60%, -8%, 220px) rotateY(18deg); filter: brightness(0.92); }
  100% { transform: translate3d(0, 0, 170px); filter: none; }
}
  46% { transform: translate3d(-9%, 3%, 120px) rotateY(-28deg); filter: none; z-index: 2; }
  50%, 92% { transform: translate3d(14%, -13%, -160px); filter: brightness(0.82); z-index: 1; }
  96% { transform: translate3d(7%, -6%, -60px) rotateY(10deg); filter: brightness(0.92); z-index: 1; }
  100% { transform: none; filter: none; z-index: 2; }
}
.showcase-hint { margin: 14px 0 0; text-align: center; font-size: 0.88rem; color: #8ea3bd; }

.lightbox { padding: 0; border: 0; border-radius: 12px; background: #ffffff; max-width: 96vw; max-height: 94vh; overflow: auto; box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6); }
.lightbox::backdrop { background: rgba(6, 12, 22, 0.82); backdrop-filter: blur(4px); }
.lightbox img { display: block; max-width: none; width: min(1800px, 94vw); }
.lightbox-close { position: sticky; top: 10px; float: right; margin: 10px; z-index: 1; padding: 7px 16px; border-radius: 999px; border: 0; background: var(--night); color: #ffffff; font: inherit; font-weight: 600; font-size: 0.9rem; cursor: pointer; }

/* Pricing */
.plans { display: grid; gap: 26px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); max-width: 860px; }
.plan { position: relative; display: flex; flex-direction: column; padding: 34px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); transition: transform 0.2s, box-shadow 0.2s; }
.plan:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.plan-highlight { border: 0; background: linear-gradient(var(--surface), var(--surface)) padding-box, linear-gradient(135deg, var(--brand), var(--violet)) border-box; border: 2px solid transparent; box-shadow: 0 18px 50px rgba(47, 125, 225, 0.2); }
.plan-badge { position: absolute; top: -13px; right: 28px; padding: 4px 14px; border-radius: 999px; background: linear-gradient(135deg, var(--brand), var(--violet)); color: #ffffff; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.plan h3 { margin: 0 0 6px; font-size: 1.35rem; }
.plan-blurb { color: var(--ink-soft); margin: 0 0 18px; }
.plan-price { margin: 0 0 4px; }
.plan-term { margin: 0 0 18px; font-size: 0.88rem; font-weight: 600; color: var(--brand-dark); }
.plan-amount { font-size: 3rem; font-weight: 700; letter-spacing: -0.03em; }
.plan-period { color: var(--ink-soft); }
.plan-list { list-style: none; padding: 0; margin: 0 0 28px; flex: 1; }
.plan-list li { position: relative; padding-left: 28px; margin-bottom: 10px; }
.plan-list li::before { content: ""; position: absolute; left: 2px; top: 0.42em; width: 14px; height: 8px; border-left: 2.5px solid #0fa968; border-bottom: 2.5px solid #0fa968; transform: rotate(-45deg); }
.plan .button { text-align: center; }
.fine-print { color: var(--ink-soft); font-size: 0.9rem; margin-top: 28px; max-width: 54em; }

/* Modules */
.grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.module { padding: 26px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); transition: transform 0.2s, box-shadow 0.2s; }
.module:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.module-soon { background: var(--surface-alt); box-shadow: none; border-style: dashed; }
.module h3 { margin: 0 0 8px; font-size: 1.12rem; }
.module p { margin: 0; color: var(--ink-soft); font-size: 0.96rem; }
.module .module-price { display: inline-block; margin-top: 16px; padding: 4px 12px; border-radius: 999px; background: #e8f1fd; color: var(--brand-dark); font-size: 0.84rem; font-weight: 600; }
.module .module-planned { background: #e9eef5; color: var(--ink-soft); }

/* Contact band */
.contact { text-align: center; padding-bottom: 0; }
.contact .site-footer { margin-top: 96px; text-align: left; }
.contact .lead { color: #c9d6e6; margin-left: auto; margin-right: auto; }
.contact .contact-alt { margin-top: 26px; margin-bottom: 0; font-size: 1rem; }
.contact .contact-alt a { color: #ffffff; }

/* Footer */
.site-footer { background: #060d18; color: #93a4b8; padding: 40px 0; font-size: 0.93rem; }
.site-footer .wrap { display: flex; gap: 18px 32px; flex-wrap: wrap; justify-content: space-between; }
.site-footer a { color: #dbe7f5; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer ul { list-style: none; display: flex; gap: 22px; padding: 0; margin: 0; flex-wrap: wrap; }
.site-footer p { margin: 0 0 4px; }

/* Legal pages */
.legal { max-width: 780px; padding-top: 56px; padding-bottom: 80px; }
.legal h1 { font-size: 2.2rem; line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 24px; }
.legal h2 { font-size: 1.25rem; letter-spacing: 0; margin: 36px 0 8px; }

.noscript { background: #fff8e1; border-bottom: 1px solid #ffe082; padding: 10px 20px; text-align: center; }

/* Desktop: the sections are slides in one horizontal scroll-snap strip under the header. A slide
   taller than the window scrolls inside itself. Below 1001px the page is an ordinary vertical page. */
.slide-nav, .swipe-hint { display: none; }
@media (min-width: 1001px) {
  .slides { display: flex; height: calc(100vh - 71px); overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; }
  .slides > section { flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always; overflow-y: auto; display: flex; flex-direction: column; }
  .slides .lead { margin-bottom: 22px; }
  .slides .site-footer { margin-top: 0; }
  .slides > .contact { padding-bottom: 0; }
  /* Everything is rem-sized, so tying the root size to the window height keeps each slide inside it. */
  html { font-size: clamp(10px, 2.02vh, 16px); }
  .slides > section { padding: 28px 0; }
  .slides > section > .wrap { max-width: 1420px; padding: 0 84px; }
  .slides h2 { margin-bottom: 0.5rem; }
  #flow .lead { display: none; }
  #flow h2 { margin-bottom: 1.2rem; }
  .slides .flow { gap: 0.3rem; }
  .slides .flow li { padding: 0.6rem 1.1rem; }
  .slides .flow p { font-size: 0.9rem; line-height: 1.45; }
  .slides .flow-stage { max-height: 62vh; justify-self: center; width: 100%; }
  .slides .bento { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.1rem; }
  .slides .panel { padding: 1.4rem 1.3rem 0.6rem; }
  .slides .panel header { margin-bottom: 0.8rem; }
  .slides .panel h3 { font-size: 1.2rem; margin-top: 0.6rem; }
  .slides .feature-list li { gap: 0.75rem; padding: 0.7rem 0; }
  .slides .feature-list h4 { font-size: 0.98rem; line-height: 1.3; }
  .slides .feature-list p { font-size: 0.86rem; line-height: 1.42; }
  .slides .icon { width: 2.25rem; height: 2.25rem; padding: 0.5rem; border-radius: 0.6rem; }
  .slides .showcase-section h2 { margin-bottom: 1rem; }
  .slides .showcase { grid-template-columns: minmax(220px, 19rem) minmax(0, 1fr); gap: 1.6rem; }
  .slides .showcase-tabs { gap: 0.3rem; }
  .slides .showcase-caption { font-size: 0.84rem; line-height: 1.4; }
  .slides .showcase-tab { padding: 0.42rem 1rem 0.5rem; }
  .slides .showcase-stage { max-width: calc((100vh - 170px - 11rem) * 1800 / 790); justify-self: center; width: 100%; }
  .slides .showcase-hint { margin-top: 0.5rem; }
  #pricing > .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); grid-template-rows: auto auto auto 1fr; column-gap: 3.5rem; align-items: start; }
  #pricing > .wrap > * { grid-column: 1; }
  #pricing .plans { grid-column: 2; grid-row: 1 / span 4; max-width: none; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem; align-self: center; }
  #pricing .fine-print { margin-top: 0; }
  .slides .plan { padding: 1.7rem; }
  .slides .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
  .slides .module { padding: 1.2rem; }
  .slides .module h3 { font-size: 1.05rem; margin-bottom: 0.35rem; }
  .slides .module p { font-size: 0.9rem; line-height: 1.45; }
  .slides .module .module-price { margin-top: 0.7rem; }
  .slides > section > .wrap { width: 100%; margin-top: auto; margin-bottom: auto; }
  .slide-nav {
    display: grid; place-items: center; position: fixed; top: 50%; z-index: 9; width: 48px; height: 48px; margin-top: -24px;
    border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.35); background: rgba(15, 27, 42, 0.55); color: #ffffff; cursor: pointer;
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background 0.15s, transform 0.15s, opacity 0.2s;
  }
  .slide-nav:hover { background: var(--brand); transform: scale(1.08); }
  .slide-nav:disabled { opacity: 0; pointer-events: none; }
  .slide-nav svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
  .slide-prev { left: 18px; }
  .slide-next { right: 18px; }
}

@media (max-width: 1000px) {
  .hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .frame-tilt { width: 100%; transform: none; animation: none; }
  .hero-deck { margin-top: 16%; }
  .flow-wrap { grid-template-columns: 1fr; gap: 28px; }
  .flow-stage { order: -1; }
  .showcase { grid-template-columns: 1fr; gap: 20px; }
  .showcase-tabs { display: flex; overflow-x: auto; gap: 10px; padding-bottom: 6px; scroll-snap-type: x proximity; scrollbar-width: none; }
  .showcase-tab { flex: 0 0 min(78%, 300px); scroll-snap-align: start; }
  .showcase-tab:hover { transform: none; }
  /* Narrow cards wrap the longest captions past the desktop 8em cap. */
  .showcase-tab.active .showcase-caption { max-height: 20em; }
}

@media (max-width: 760px) {
  .nav { display: none; }
  .header-actions { margin-left: auto; }
  .button { padding: 9px 15px; font-size: 0.92rem; }
  section { padding: 64px 0; }
  .hero { padding: 56px 0 68px; }
  .panel { padding: 24px 20px 12px; }
  .site-header .wrap { flex-wrap: nowrap; gap: 8px; min-height: 60px; padding: 0 16px; }
  .logo img { height: 26px; }
  .header-actions .button-ghost { padding: 8px 10px; }
  .wrap { padding: 0 18px; }
  .eyebrow { font-size: 0.72rem; margin-bottom: 16px; }
  .hero h1 { margin-bottom: 16px; }
  .hero-lead { font-size: 1.02rem; }
  .hero-actions { margin-top: 22px; }
  .hero-grid { gap: 32px; }
  .lead { margin-bottom: 26px; font-size: 1rem; }
  /* Only the lit step shows its text, so the list stays one screen tall under the stage. */
  .flow li { padding: 8px 12px; }
  .flow h3 { line-height: 40px; margin: 0; }
  .flow p { overflow: hidden; max-height: 0; opacity: 0; animation: step-text 20s infinite; padding-bottom: 4px; }
  .flow li:nth-child(2) p { animation-delay: -16s; }
  .flow li:nth-child(3) p { animation-delay: -12s; }
  .flow li:nth-child(4) p { animation-delay: -8s; }
  .flow li:nth-child(5) p { animation-delay: -4s; }
  /* Feature panels and modules become swipeable card rows. */
  .bento, .grid {
    display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin: 0 -18px; padding: 6px 18px 18px; scroll-padding-left: 18px;
  }
  .bento > *, .grid > * { flex: 0 0 100%; scroll-snap-align: start; }
  .bento, .grid { gap: 18px; padding-bottom: 8px; }
  .swipe-hint { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 4px 0 0; font-size: 0.85rem; font-weight: 600; color: var(--brand-dark); }
  .swipe-hint svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
  .panel:hover, .module:hover, .plan:hover { transform: none; }
  .plans { gap: 22px; }
  .plan { padding: 26px 22px; }
  .plan-amount { font-size: 2.5rem; }
  .showcase-hint { display: none; }
  .contact .site-footer { margin-top: 56px; }
  .site-footer .wrap { flex-direction: column; gap: 14px; }
}

@media (max-width: 480px) {
  .header-actions .button:not(.button-ghost) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal:not(.in) { opacity: 1; }
  .js .reveal.in { animation: none; }
  .hero-deck .frame + .frame { display: none; }
  .hero-deck .frame, .frame-tilt, .showcase-progress, .flow li, .flow-art, .flow-art * { animation: none !important; }
  .flow-art:first-child { opacity: 1; }
  .flow p { max-height: none; opacity: 1; animation: none !important; }
  .shot-deck img { animation: none; }
  .shot-deck img + img { display: none; }
  .showcase-view .shot, .showcase-caption, .button, .panel, .plan, .module, .flow li, .icon { transition: none; }
}