:root {
  --paper: #faf5ec;
  --paper-deep: #f4ecdf;
  --ink: #191410;
  --ink-soft: #776e61;
  --accent: #da642a;
  --accent-deep: #b84f1d;
  --accent-wash: #fbe9dc;
  --card: #ffffff;
  --line: rgba(25, 20, 16, 0.1);
  --line-strong: rgba(25, 20, 16, 0.16);
  --shadow-soft: 0 2px 6px rgba(25, 20, 16, 0.04), 0 18px 44px rgba(25, 20, 16, 0.07);
  --shadow-node: 0 2px 5px rgba(25, 20, 16, 0.05), 0 10px 24px rgba(25, 20, 16, 0.09);
  --font-display: "Outfit", sans-serif;
  --font-body: "Outfit", system-ui, sans-serif;
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.6;
  overflow-x: hidden;
}

::selection { background: var(--accent); color: #fff; }

/* ---------- scroll progress ---------- */

.scroll-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 60;
  background: transparent;
}
.scroll-progress-bar {
  height: 100%;
  width: 0%;
  background: var(--accent);
}

/* ---------- nav ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 14px 32px 10px;
}
/* floating glass bar: translucent tint + heavy blur, a bright inner top
   edge, and a whisper of border so it reads as a pane over the content */
.nav-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 36px;
  padding: 10px 20px;
  border-radius: 16px;
  background: linear-gradient(rgba(255, 253, 248, 0.55), rgba(255, 250, 242, 0.35));
  -webkit-backdrop-filter: blur(18px) saturate(170%);
  backdrop-filter: blur(18px) saturate(170%);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    0 4px 24px rgba(25, 20, 16, 0.05);
  transition: background 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.nav.scrolled .nav-inner {
  background: linear-gradient(rgba(255, 253, 248, 0.72), rgba(255, 250, 242, 0.55));
  border-color: rgba(255, 255, 255, 0.7);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    0 10px 34px rgba(25, 20, 16, 0.1);
}
.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  color: var(--ink);
}
.brand-logo { width: 34px; height: 34px; display: block; }
.brand-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.45rem;
  letter-spacing: -0.02em;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 26px;
  margin-left: 8px;
}
.nav-links a {
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 600;
  transition: color 0.2s ease;
}
.nav-links a:hover { color: var(--ink); }
.nav-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 16px;
}
.nav-cta {
  color: var(--ink);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.92rem;
  border: 1.5px solid var(--line-strong);
  padding: 8px 18px;
  border-radius: 8px;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.nav-cta:hover { border-color: var(--ink); background: #fff; }

/* ---------- hero ---------- */

.hero {
  padding: 56px 32px 40px;
  position: relative;
}
.hero::before {
  /* faint warm halo behind the hero so the cream isn't dead flat */
  content: "";
  position: absolute;
  top: -20%; right: -10%;
  width: 720px; height: 720px;
  background: radial-gradient(circle, rgba(218, 100, 42, 0.07), transparent 65%);
  pointer-events: none;
}
.hero-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: 56px;
  align-items: center;
}
.hero-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.5rem, 4.6vw, 3.9rem);
  line-height: 1.06;
  letter-spacing: -0.025em;
}
.hero-title span { display: block; }
.accent-text { color: var(--accent); }
.hero-sub {
  margin-top: 26px;
  font-size: 1.18rem;
  color: var(--ink-soft);
  max-width: 26em;
}
.hero-actions {
  margin-top: 34px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.02rem;
  text-decoration: none;
  padding: 15px 28px;
  border-radius: 12px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.btn-primary {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 6px 18px rgba(218, 100, 42, 0.32);
}
.btn-primary:hover {
  background: var(--accent-deep);
  box-shadow: 0 10px 26px rgba(218, 100, 42, 0.4);
}
.btn-primary svg { transition: transform 0.2s ease; }
.btn-primary:hover svg { transform: translateX(3px); }
.btn-ghost {
  color: var(--ink);
  border: 1.5px solid var(--line-strong);
  background: transparent;
}
.btn-ghost:hover { border-color: var(--ink); background: #fff; }

/* ---------- orbit card (hero visual) ---------- */

.orbit-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 26px;
  box-shadow: var(--shadow-soft);
  padding: 30px 30px 22px;
}
.orbit-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 0.92;
}
.orbit-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: rgba(25, 20, 16, 0.28);
}
.orbit-dash {
  animation: dash-crawl 40s linear infinite;
}
@keyframes dash-crawl {
  to { stroke-dashoffset: -600; }
}

/* a single accent dot glides along the ring from state to state; the
   wrapper spans the stage and rotates, carrying the dot around the circle */
.orbit-sweep {
  position: absolute;
  inset: 0;
  transition: transform 1s cubic-bezier(0.5, 0, 0.25, 1);
  pointer-events: none;
  z-index: 1;
}
.orbit-sweep-dot {
  position: absolute;
  left: 50%; top: 12.5%;
  width: 10px; height: 10px;
  margin: -5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(218, 100, 42, 0.16);
}

/* the five workflow states, pinned on the ring; mirrors the stepper in
   "How it works": numbered nodes that light up in turn and flip to checks */
.orbit-step {
  position: absolute;
  left: var(--sx); top: var(--sy);
  transform: translate(-50%, -50%);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 7px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 5px 13px 5px 5px;
  box-shadow: var(--shadow-node);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--ink-soft);
  white-space: nowrap;
  transition: border-color 0.35s ease, color 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease;
}
.orbit-step-num {
  position: relative;
  width: 22px; height: 22px;
  border-radius: 7px;
  background: var(--paper-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.62rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
  flex-shrink: 0;
  transition: background 0.35s ease, color 0.35s ease;
}
.orbit-step-num svg {
  position: absolute;
  color: var(--accent-deep);
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.34, 1.4, 0.5, 1);
}
.orbit-step.active {
  border-color: rgba(218, 100, 42, 0.5);
  color: var(--ink);
  transform: translate(-50%, -50%) scale(1.1);
  box-shadow: 0 6px 20px rgba(218, 100, 42, 0.2);
}
.orbit-step.active .orbit-step-num { background: var(--accent); color: #fff; }
.orbit-step.done { color: var(--ink); }
.orbit-step.done .orbit-step-num { background: var(--accent-wash); }
.orbit-step.done .orbit-step-num > span { opacity: 0; }
.orbit-step.done .orbit-step-num svg { opacity: 1; transform: scale(1); }

.orbit-hub {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 34%;
  aspect-ratio: 1;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* ripple: outlined rings expanding out from the hub edge; drawn as borders
   so they stay visible against the cream card, unlike a soft shadow pulse */
.orbit-hub::before,
.orbit-hub::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(218, 100, 42, 0.3);
  background: rgba(218, 100, 42, 0.03);
  animation: hub-ripple 3.6s cubic-bezier(0.2, 0.5, 0.4, 1) infinite;
  pointer-events: none;
}
.orbit-hub::after { animation-delay: 1.8s; }
@keyframes hub-ripple {
  0%   { transform: scale(1); opacity: 0; }
  12%  { opacity: 0.6; }
  75%, 100% { transform: scale(1.7); opacity: 0; }
}
.orbit-hub img {
  position: relative;
  width: 74%;
  height: 74%;
  display: block;
}

.orbit-divider {
  height: 1px;
  background: var(--line);
  margin: 20px -6px 16px;
}
.orbit-badges {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 0 6px;
}
.orbit-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8rem;
  line-height: 1.25;
}
.orbit-badge svg { color: var(--accent); flex-shrink: 0; }

.hero-footline {
  max-width: 1180px;
  margin: 46px auto 0;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 0.9rem;
  color: var(--ink-soft);
}
.footline-brand {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--ink);
}
.footline-sep {
  width: 1px;
  height: 16px;
  background: var(--line-strong);
}

/* ---------- reveals ---------- */

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s ease, transform 0.7s ease;
  transition-delay: calc(var(--d, 0) * 110ms);
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- logos marquee ---------- */

.logos {
  padding: 46px 0 30px;
  border-top: 1px solid var(--line);
}
.logos-label {
  text-align: center;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 26px;
}
.marquee {
  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;
  gap: 46px;
  width: max-content;
  animation: marquee 70s linear infinite;
}
.marquee-track span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.02rem;
  letter-spacing: 0.05em;
  color: #9a9a9a;
  white-space: nowrap;
}
.marquee-track span::before {
  content: "";
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a3a3a3' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 5 5.8v5.4c0 4.3 3 8.1 7 9.3 4-1.2 7-5 7-9.3V5.8L12 3Z'/%3E%3Cpath d='m9.3 11.8 1.9 1.9 3.5-3.6'/%3E%3C/svg%3E") center / contain no-repeat;
}
@keyframes marquee {
  to { transform: translateX(-50%); }
}

/* ---------- stats ---------- */

.stats { padding: 60px 32px; }
.stats-grid {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.stat {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 28px 26px;
  box-shadow: var(--shadow-soft);
}
.stat-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.4rem;
  letter-spacing: -0.02em;
  color: var(--accent);
  line-height: 1.1;
}
.stat p {
  margin-top: 8px;
  font-size: 0.92rem;
  color: var(--ink-soft);
}

/* ---------- section heads ---------- */

.section-head {
  max-width: 720px;
  margin: 0 auto 52px;
  text-align: center;
  padding: 0 24px;
}
.section-tag {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-wash);
  padding: 7px 16px;
  border-radius: 999px;
  margin-bottom: 18px;
}
.section-head h2, .trust h2, .cta-card h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.8rem, 3.2vw, 2.5rem);
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.section-head p {
  margin-top: 16px;
  color: var(--ink-soft);
  font-size: 1.05rem;
}

/* ---------- mask demo ---------- */

.mask-demo { padding: 70px 32px; }
.mask-table {
  max-width: 860px;
  margin: 0 auto;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  position: relative;
}
.mask-table-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--paper-deep);
}
.mask-table-dots { display: flex; gap: 6px; }
.tdot { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.tdot.r { background: #e8695a; }
.tdot.y { background: #e5b455; }
.tdot.g { background: #7fbf78; }
.mask-table-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-soft);
}
.mask-table-cols {
  display: grid;
  grid-template-columns: 1fr 1.6fr 1fr;
  padding: 12px 24px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--line);
}
.mask-table-rows { position: relative; }
.mask-table-row {
  display: grid;
  grid-template-columns: 1fr 1.6fr 1fr;
  padding: 13px 24px;
  border-bottom: 1px solid var(--line);
  font-size: 0.95rem;
}
.mask-cell { position: relative; display: block; min-height: 1.5em; }
.mask-cell span {
  position: absolute;
  left: 0; top: 0;
  white-space: nowrap;
}
.mc-original {
  color: var(--ink);
  animation: show-original 9s ease-in-out infinite;
  animation-delay: var(--row-delay, 0s);
}
.mc-masked {
  color: var(--accent-deep);
  font-weight: 600;
  animation: show-masked 9s ease-in-out infinite;
  animation-delay: var(--row-delay, 0s);
}
@keyframes show-original {
  0%, 38%  { opacity: 1; filter: blur(0); }
  44%, 88% { opacity: 0; filter: blur(4px); }
  94%, 100% { opacity: 1; filter: blur(0); }
}
@keyframes show-masked {
  0%, 38%  { opacity: 0; filter: blur(4px); }
  44%, 88% { opacity: 1; filter: blur(0); }
  94%, 100% { opacity: 0; filter: blur(4px); }
}
.mask-scan-line {
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.7;
  animation: scan 9s ease-in-out infinite;
  pointer-events: none;
}
@keyframes scan {
  0%   { top: 26%; opacity: 0; }
  8%   { opacity: 0.7; }
  38%  { top: 78%; opacity: 0.7; }
  46%  { opacity: 0; }
  100% { top: 26%; opacity: 0; }
}
.mask-table-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 13px 24px;
  font-size: 0.82rem;
  color: var(--ink-soft);
  background: var(--paper-deep);
}
.mask-table-status { display: flex; align-items: center; gap: 8px; }
.mask-status-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(218, 100, 42, 0.35); }
  50%      { box-shadow: 0 0 0 6px rgba(218, 100, 42, 0); }
}

/* ---------- product tour (cascading step tabs) ---------- */

.tour { padding: 70px 32px; }
.tour-shell { max-width: 1180px; margin: 0 auto; }

/* Enterprise process stepper: numbered nodes joined by a connector rail.
   The rail fills with scroll progress; completed steps flip to checkmarks. */
.tour-tabs {
  display: flex;
  align-items: center;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-soft);
  padding: 22px 28px;
  margin-bottom: 26px;
}
.tour-tab {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  font-family: var(--font-body);
  text-align: left;
  min-width: 0;
}
.tour-tab:last-child { flex: 0 0 auto; }
.tour-node {
  position: relative;
  width: 36px; height: 36px;
  border-radius: 11px;
  border: 1.5px solid var(--line-strong);
  background: var(--card);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}
.tour-node-num {
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
  transition: color 0.3s ease, opacity 0.2s ease;
}
.tour-node-check {
  position: absolute;
  color: var(--accent-deep);
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.34, 1.4, 0.5, 1);
}
.tour-tab:hover .tour-node { border-color: var(--accent); }
.tour-tab:focus-visible { outline: none; }
.tour-tab:focus-visible .tour-node { box-shadow: 0 0 0 3px rgba(218, 100, 42, 0.3); }
.tour-tab.active .tour-node {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(218, 100, 42, 0.16);
}
.tour-tab.active .tour-node-num { color: #fff; }
.tour-tab.done .tour-node {
  background: var(--accent-wash);
  border-color: var(--accent);
}
.tour-tab.done .tour-node-num { opacity: 0; }
.tour-tab.done .tour-node-check { opacity: 1; transform: scale(1); }
.tour-tab-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.tour-tab-label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.96rem;
  color: var(--ink-soft);
  white-space: nowrap;
  transition: color 0.3s ease;
}
.tour-tab.active .tour-tab-label,
.tour-tab.done .tour-tab-label { color: var(--ink); }
.tour-tab.active .tour-tab-label { font-weight: 700; }
.tour-tab-desc {
  font-size: 0.74rem;
  color: var(--ink-soft);
  opacity: 0.75;
  white-space: nowrap;
}
.tour-connector {
  flex: 1;
  height: 2px;
  min-width: 20px;
  margin: 0 18px;
  border-radius: 1px;
  background: var(--line);
  overflow: hidden;
}
.tour-connector-fill {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--accent);
  border-radius: 1px;
  transition: width 0.2s linear;
}

/* The stage is a tall scroll runway; the shell pins inside it, so scrolling
   pages through the steps one by one before the page continues. JS sets the
   runway height. Below 1020px the shell is static and tabs are click-only. */
@media (min-width: 1021px) {
  .tour-shell {
    position: sticky;
    top: 84px;
  }
}

/* The panels form a card deck: the active card sits in front, the next
   steps peek out above it, receding and fading with depth. Switching
   steps re-assigns --depth and the transforms transition, so the front
   card cascades back into the stack while the next one slides forward. */
.tour-panels {
  position: relative;
  padding-top: 44px; /* headroom for the peeking card edges */
}
.tour-panel {
  position: absolute;
  left: 0; right: 0; top: 44px;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 44px;
  align-items: center;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: var(--shadow-soft);
  padding: 44px 46px;
  transform-origin: top center;
  transform: translateY(calc(var(--depth, 0) * -20px)) scale(calc(1 - var(--depth, 0) * 0.045));
  transition: transform 0.65s cubic-bezier(0.22, 0.9, 0.3, 1), opacity 0.55s ease;
}
.tour-panel.active { box-shadow: 0 4px 10px rgba(25, 20, 16, 0.05), 0 30px 60px rgba(25, 20, 16, 0.12); }

.tour-copy { position: relative; }
.tour-ghost {
  position: absolute;
  top: -66px;
  left: -14px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 9rem;
  line-height: 1;
  color: var(--accent);
  opacity: 0.1;
  pointer-events: none;
  user-select: none;
}
.tour-copy h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: 14px;
}
.tour-copy > p {
  color: var(--ink-soft);
  font-size: 1rem;
  margin-bottom: 20px;
}
.tour-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tour-list li {
  position: relative;
  padding-left: 26px;
  font-size: 0.94rem;
  font-weight: 500;
}
.tour-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.34em;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--accent-wash);
  border: 1.5px solid var(--accent);
}
.tour-list li::after {
  content: "";
  position: absolute;
  left: 4.5px; top: calc(0.34em + 4.5px);
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

/* cascading entrance for the active panel's contents */
.tour-panel.active .tour-copy h3,
.tour-panel.active .tour-copy > p,
.tour-panel.active .tour-list li {
  animation: tour-cascade 0.55s cubic-bezier(0.22, 0.9, 0.3, 1) both;
}
.tour-panel.active .tour-copy h3 { animation-delay: 0.07s; }
.tour-panel.active .tour-copy > p { animation-delay: 0.14s; }
.tour-panel.active .tour-list li:nth-child(1) { animation-delay: 0.21s; }
.tour-panel.active .tour-list li:nth-child(2) { animation-delay: 0.28s; }
.tour-panel.active .tour-list li:nth-child(3) { animation-delay: 0.35s; }
.tour-panel.active .tour-shot {
  animation: tour-cascade-shot 0.6s cubic-bezier(0.22, 0.9, 0.3, 1) both;
  animation-delay: 0.1s;
}
@keyframes tour-cascade {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes tour-cascade-shot {
  from { opacity: 0; transform: translateY(22px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.tour-shot {
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 3px 8px rgba(25, 20, 16, 0.05), 0 24px 54px rgba(25, 20, 16, 0.13);
  background: var(--paper-deep);
}
.tour-shot-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--paper-deep);
}
.tour-shot-url {
  margin-left: 10px;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--ink-soft);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 3px 12px;
}
.tour-shot img {
  display: block;
  width: 100%;
  height: auto;
}

.feature-card h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  margin-bottom: 8px;
}
.feature-card p {
  font-size: 0.92rem;
  color: var(--ink-soft);
}

/* ---------- features (bento grid) ---------- */

.features { padding: 70px 32px; }
.feature-grid {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.feature-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 28px 26px;
  box-shadow: var(--shadow-soft);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.feature-card-wide { grid-column: span 2; }
/* accent hairline that sweeps across the top on hover */
.feature-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-soft, #e8a487), transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s cubic-bezier(0.22, 0.9, 0.3, 1);
}
.feature-card:hover { border-color: rgba(218, 100, 42, 0.35); }
.feature-card:hover::before { transform: scaleX(1); }
.feature-icon {
  color: var(--accent);
  background: var(--accent-wash);
  width: 46px; height: 46px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}
.feature-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
  padding-top: 20px;
}
.feature-chips span {
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--ink-soft);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  padding: 5px 11px;
  transition: border-color 0.25s ease, color 0.25s ease;
}
.feature-card:hover .feature-chips span {
  border-color: rgba(218, 100, 42, 0.4);
  color: var(--ink);
}
.feature-code {
  margin-top: auto;
  padding: 11px 15px;
  background: var(--ink);
  color: rgba(250, 245, 236, 0.85);
  border-radius: 10px;
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 0.78rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.feature-code { margin-top: 20px; }
.fc-prompt { color: var(--accent-soft, #e8a487); margin-right: 6px; }
.fc-caret {
  display: inline-block;
  width: 7px; height: 0.9em;
  margin-left: 5px;
  vertical-align: text-bottom;
  background: var(--accent);
  animation: caret-blink 1.1s steps(1) infinite;
}
@keyframes caret-blink { 50% { opacity: 0; } }

/* ---------- trust (dark contrast band) ---------- */

.trust {
  margin: 60px 32px;
}
.trust-inner {
  max-width: 1180px;
  margin: 0 auto;
  background: var(--ink);
  color: var(--paper);
  border-radius: 28px;
  padding: 64px 56px;
}
.section-tag-dark {
  background: rgba(250, 245, 236, 0.08);
  color: var(--accent);
}
.trust h2 { margin-bottom: 40px; }
.trust-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px;
}
.trust-item h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--accent);
  margin-bottom: 10px;
}
.trust-item p {
  font-size: 0.94rem;
  color: rgba(250, 245, 236, 0.72);
}

/* ---------- CTA ---------- */

.cta-section { padding: 30px 32px 90px; }
.cta-card {
  max-width: 1180px;
  margin: 0 auto;
  text-align: center;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 28px;
  box-shadow: var(--shadow-soft);
  padding: 70px 32px;
  position: relative;
  overflow: hidden;
}
.cta-card::before {
  content: "";
  position: absolute;
  inset: -40% -20% auto;
  height: 130%;
  background: radial-gradient(ellipse at 50% 0%, rgba(218, 100, 42, 0.1), transparent 60%);
  pointer-events: none;
}
.cta-card p {
  margin: 14px auto 0;
  color: var(--ink-soft);
  font-size: 1.08rem;
  max-width: 32em;
}
.cta-card .hero-actions { justify-content: center; margin-top: 30px; }

/* ---------- footer ---------- */

.footer {
  border-top: 1px solid var(--line);
  padding: 30px 32px;
}
.footer-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.footer-brand { display: flex; align-items: center; gap: 8px; }
.footer-brand .brand-logo { width: 26px; height: 26px; }
.footer-brand .brand-name { font-size: 1.15rem; }
.footer p { font-size: 0.85rem; color: var(--ink-soft); }

/* ---------- responsive ---------- */

@media (max-width: 1020px) {
  .hero-inner { grid-template-columns: 1fr; gap: 48px; }
  .hero-sub { max-width: 34em; }
  .hero-visual { max-width: 560px; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .tour-tabs { padding: 18px 20px; }
  .tour-tab-desc { display: none; }
  .tour-connector { margin: 0 12px; }
  .tour-panel { grid-template-columns: 1fr; gap: 30px; padding: 30px 28px; }
  .tour-ghost { top: -48px; font-size: 6.5rem; }
  .trust-grid { grid-template-columns: 1fr; gap: 26px; }
  .nav-links { display: none; }
}

@media (max-width: 640px) {
  .nav { padding: 14px 18px 8px; }
  .hero { padding: 36px 18px 28px; }
  .hero-title { font-size: clamp(2.1rem, 9vw, 2.6rem); }
  .orbit-card { padding: 20px 16px 16px; }
  .orbit-step { font-size: 0.66rem; gap: 5px; padding: 4px 9px 4px 4px; }
  .orbit-step-num { width: 18px; height: 18px; font-size: 0.54rem; }
  .orbit-badge { flex-direction: column; text-align: center; gap: 6px; font-size: 0.72rem; }
  .orbit-sweep-dot { width: 8px; height: 8px; margin: -4px; }
  .stats-grid, .feature-grid { grid-template-columns: 1fr; }
  .feature-card-wide { grid-column: auto; }
  .tour { padding: 50px 18px; }
  .tour-tabs { padding: 14px 16px; }
  .tour-tab-text { display: none; }
  .tour-node { width: 30px; height: 30px; }
  .tour-node-num { font-size: 0.7rem; }
  .tour-connector { margin: 0 8px; min-width: 12px; }
  .tour-panel { padding: 22px 18px; }
  .trust { margin: 40px 18px; }
  .trust-inner { padding: 44px 28px; }
  .mask-table-cols, .mask-table-row { grid-template-columns: 1fr 1.2fr; }
  .mask-table-cols span:nth-child(3), .mask-table-row .mask-cell:nth-child(3) { display: none; }
  .footer-inner { flex-direction: column; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .orbit-sweep { transition: none; }
  .orbit-dash, .orbit-hub::before, .orbit-hub::after, .marquee-track,
  .mc-original, .mc-masked, .mask-scan-line, .mask-status-dot,
  .tour-panel.active .tour-pill, .tour-panel.active .tour-copy h3,
  .tour-panel.active .tour-copy > p, .tour-panel.active .tour-list li,
  .tour-panel.active .tour-shot {
    animation: none;
  }
  .tour-panel { transition: none; }
  .mc-masked { opacity: 0; }
  .reveal { transition: none; opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}