/* ============ RadialZ — base styles ============ */
:root {
  --bg: #0a0a0b;
  --bg-2: #111113;
  --surface: #16161a;
  --surface-2: #1c1c22;
  --line: rgba(255,255,255,0.07);
  --line-strong: rgba(255,255,255,0.14);
  --t: #f5f4f1;
  --t-2: #9a9aa3;
  --t-3: #54545d;
  --o: #f86b33;
  --o-dim: #d9571e;
  --o-soft: rgba(248,107,51,0.14);
  /* Secondary accent — used sparingly for moments that aren't the primary CTA path */
  --o2: #4dc8e9;
  --o2-dim: #2da5c4;
  --o2-soft: rgba(77,200,233,0.14);
  --warm: #ede7da;
  --warm-2: #d9d1bf;
  --warm-ink: #1a1814;
  --font: "Poppins", system-ui, sans-serif;
  --font-display: "Poppins", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--bg); color: var(--t); font-family: var(--font); -webkit-font-smoothing: antialiased; }
body { overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
img, svg { display: block; max-width: 100%; }

/* All large headings use the display font with heavy weight */
h1, h2, h3 { font-family: var(--font-display); }
h2 { font-weight: 800; letter-spacing: -0.04em; }
h3 { font-weight: 700; letter-spacing: -0.02em; }

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

/* scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: #2a2a30; border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: #3a3a42; }

/* ============ Nav ============ */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: 64px; padding: 0 28px;
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(10,10,11,0.7);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  border-bottom: 1px solid var(--line);
}
.nav-logo { display: flex; align-items: center; gap: 10px; }
.nav-mark {
  width: 30px; height: 30px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #f86b33, #8a3414 70%, #2a0f04);
  box-shadow: 0 0 0 1px rgba(248,107,51,0.4), 0 6px 20px rgba(248,107,51,0.25);
  position: relative;
}
.nav-mark::before {
  content: ""; position: absolute; inset: 6px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(255,255,255,0.6) 8deg, transparent 16deg, transparent 45deg, rgba(255,255,255,0.6) 53deg, transparent 61deg, transparent 90deg, rgba(255,255,255,0.6) 98deg, transparent 106deg, transparent 135deg, rgba(255,255,255,0.6) 143deg, transparent 151deg, transparent 180deg, rgba(255,255,255,0.6) 188deg, transparent 196deg, transparent 225deg, rgba(255,255,255,0.6) 233deg, transparent 241deg, transparent 270deg, rgba(255,255,255,0.6) 278deg, transparent 286deg, transparent 315deg, rgba(255,255,255,0.6) 323deg, transparent 331deg);
  -webkit-mask: radial-gradient(circle at center, transparent 35%, #000 36%, #000 70%, transparent 71%);
          mask: radial-gradient(circle at center, transparent 35%, #000 36%, #000 70%, transparent 71%);
  opacity: 0.5;
}
.nav-name { font-weight: 700; font-size: 16px; letter-spacing: -0.01em; }
.nav-name span { color: var(--o); }
.nav-links { display: flex; gap: 4px; align-items: center; }
.nav-links a { font-size: 13px; color: var(--t-2); padding: 8px 12px; border-radius: 999px; transition: color .15s, background .15s; }
.nav-links a:hover { color: var(--t); background: rgba(255,255,255,0.05); }
.nav-cta {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--o); color: #fff !important;
  padding: 8px 16px !important; border-radius: 999px !important;
  font-weight: 600; font-size: 13px !important;
  box-shadow: 0 4px 18px rgba(248,107,51,0.32);
  transition: transform .15s, background .15s !important;
}
.nav-cta:hover { background: var(--o-dim) !important; transform: translateY(-1px); }
.nav-cta-price { font-family: var(--mono); font-size: 11px !important; opacity: 0.9; padding-left: 8px; border-left: 1px solid rgba(255,255,255,0.3); }

/* ============ Floating glass tab (left-center, vertical) ============ */
.nav-tab {
  position: fixed; left: 0; top: 50%;
  transform: translateY(-50%);
  z-index: 100;
  width: 60px;
  padding: 8px 0;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  background: rgba(18,18,22,0.55);
  backdrop-filter: blur(28px) saturate(1.4);
  -webkit-backdrop-filter: blur(28px) saturate(1.4);
  border: 1px solid rgba(255,255,255,0.08);
  border-left: none;
  border-radius: 0 24px 24px 0;
  box-shadow: 12px 0 40px rgba(0,0,0,0.45);
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
}

.nav-tab-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255,255,255,0.04);
  transition: background .2s, transform .2s;
}
.nav-tab-icon:hover { background: rgba(255,255,255,0.08); transform: scale(1.03); }
.nav-tab-icon img {
  width: 36px; height: 36px;
  object-fit: contain;
  border-radius: 8px;
  pointer-events: none;
  filter: drop-shadow(0 2px 8px rgba(248,107,51,0.25));
}

/* Hamburger inside the tab — smaller, no border */
.nav-tab .nav-burger {
  width: 44px; height: 44px;
  border-radius: 12px;
  border: none;
  background: rgba(255,255,255,0.04);
}
.nav-tab .nav-burger:hover { background: rgba(255,255,255,0.08); }
.nav-tab .nav-burger span { left: 12px; right: 12px; }
.nav-tab .nav-burger span:nth-child(1) { top: 17px; }
.nav-tab .nav-burger span:nth-child(2) { top: 21.25px; }
.nav-tab .nav-burger span:nth-child(3) { top: 25.5px; }
.nav-tab .nav-burger.open span:nth-child(1) { top: 21.25px; }
.nav-tab .nav-burger.open span:nth-child(3) { top: 21.25px; }

/* hide old full-width nav if used elsewhere */
.nav { display: none !important; }

/* ============ Hamburger button (base) ============ */
.nav-burger {
  display: grid; place-items: center;
  position: relative;
  cursor: pointer;
  transition: background .2s, border-color .2s;
}
.nav-burger span {
  position: absolute;
  height: 1.5px;
  background: var(--t);
  transition: transform .35s ease, opacity .25s, top .35s ease, background .25s;
}
.nav-burger.open span:nth-child(1) { transform: rotate(45deg); background: var(--o); }
.nav-burger.open span:nth-child(2) { opacity: 0; }
.nav-burger.open span:nth-child(3) { transform: rotate(-45deg); background: var(--o); }

/* ============ Fullscreen menu overlay ============ */
.nav-overlay {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(8,8,9,0.92);
  backdrop-filter: blur(24px) saturate(1.2);
  -webkit-backdrop-filter: blur(24px) saturate(1.2);
  opacity: 0; pointer-events: none;
  transition: opacity .35s ease;
  display: grid; place-items: center;
}
.nav-overlay.open { opacity: 1; pointer-events: auto; }
.nav-overlay::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 50% 50%, rgba(248,107,51,0.08) 0%, transparent 60%);
  pointer-events: none;
}
.nav-overlay-inner {
  position: relative;
  width: 100%; max-width: 720px;
  padding: 100px 40px 40px;
  display: flex; flex-direction: column; gap: 40px;
}
.nav-overlay-list { list-style: none; display: flex; flex-direction: column; gap: 4px; }
.nav-overlay-list li {
  opacity: 0; transform: translateY(20px);
  transition: opacity .5s ease, transform .5s ease;
}
.nav-overlay.open .nav-overlay-list li { opacity: 1; transform: translateY(0); }
.nav-overlay-list a {
  display: flex; align-items: baseline; gap: 24px;
  padding: 14px 4px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(40px, 7vw, 72px);
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--t);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  transition: color .25s, padding-left .25s;
}
.nav-overlay-list a:hover { color: var(--o); padding-left: 20px; }
.nav-overlay-list .nav-num {
  font-family: var(--mono);
  font-size: 12px; font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--t-3);
  transition: color .25s;
}
.nav-overlay-list a:hover .nav-num { color: var(--o); }
.nav-overlay-footer {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 20px;
  opacity: 0; transform: translateY(20px);
  transition: opacity .5s .4s ease, transform .5s .4s ease;
}
.nav-overlay.open .nav-overlay-footer { opacity: 1; transform: translateY(0); }
.nav-overlay-meta {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--t-3);
  display: flex; flex-direction: column; gap: 4px;
  text-align: right;
}

/* ============ Generic ============ */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--o);
  padding: 6px 14px;
  background: var(--o-soft);
  border: 1px solid rgba(248,107,51,0.22);
  border-radius: 999px;
}
.eyebrow .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--o); animation: blink 2.2s infinite; }
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

.btn-primary {
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--o); color: #fff;
  padding: 16px 28px; border-radius: 999px;
  font-weight: 600; font-size: 15px; letter-spacing: -0.01em;
  box-shadow: 0 10px 36px rgba(248,107,51,0.32), inset 0 1px 0 rgba(255,255,255,0.25);
  transition: transform .2s, box-shadow .2s, background .2s;
  position: relative; overflow: hidden;
}
.btn-primary:hover { background: var(--o-dim); transform: translateY(-2px); box-shadow: 0 14px 44px rgba(248,107,51,0.4), inset 0 1px 0 rgba(255,255,255,0.25); }
.btn-primary .price-tag {
  font-family: var(--mono); font-size: 12px;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.15);
}
.btn-ghost {
  display: inline-flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,0.04); color: var(--t);
  padding: 16px 26px; border-radius: 999px;
  font-weight: 500; font-size: 15px;
  border: 1px solid var(--line-strong);
  transition: background .15s, border-color .15s;
}
.btn-ghost:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.22); }

/* ============ Hero ============ */
.hero-wrap {
  position: relative;
  height: 130vh; /* room for scroll-driven hero */
}
/* Subtle DARK continuation gradient — softens the join into the next section */
.hero-wrap::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 38vh;
  pointer-events: none;
  z-index: 1;
  background:
    linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.45) 60%, rgba(0,0,0,0.85) 100%);
}
.hero-sticky {
  position: sticky; top: 0;
  height: 100vh; width: 100%;
  overflow: hidden;
  display: grid; place-items: center;
}
.hero-bg-vignette {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 80% 60% at 50% 50%, rgba(248,107,51,0.10) 0%, transparent 55%),
    radial-gradient(ellipse 120% 80% at 50% 110%, rgba(248,107,51,0.06) 0%, transparent 60%);
}
.hero-grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse 60% 50% at 50% 50%, transparent, #000 70%);
}
.hero-radial-glow {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 800px; height: 800px; border-radius: 50%;
  background: radial-gradient(circle, rgba(248,107,51,0.22) 0%, rgba(248,107,51,0.05) 30%, transparent 60%);
  filter: blur(20px);
}

.brush-ring {
  position: absolute; left: 50%; top: 50%;
  width: 1px; height: 1px;
  transform-origin: center;
  will-change: transform;
}
/* Ambient slow rotation applied to a wrapper inside the ring (set via class) */
.brush-ring-inner-spin > svg, .brush-ring-inner-spin > .brush-node { animation: none; }

/* Inner content spin (svg + nodes share parent transform via outer div */
@keyframes ring-spin-cw { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes ring-spin-ccw { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }

/* Corner brush floats */
@keyframes float-a {
  0%,100% { transform: translate(0, 0) rotate(0deg); }
  50%     { transform: translate(10px, -14px) rotate(8deg); }
}
@keyframes float-b {
  0%,100% { transform: translate(0, 0) rotate(0deg); }
  50%     { transform: translate(-8px, 12px) rotate(-6deg); }
}
@keyframes float-c {
  0%,100% { transform: translate(0, 0) rotate(0deg); }
  50%     { transform: translate(-12px, -8px) rotate(-9deg); }
}
@keyframes float-d {
  0%,100% { transform: translate(0, 0) rotate(0deg); }
  50%     { transform: translate(8px, 14px) rotate(7deg); }
}
.bg-brush-float.float-a { animation: float-a 9s ease-in-out infinite; }
.bg-brush-float.float-b { animation: float-b 11s ease-in-out infinite; }
.bg-brush-float.float-c { animation: float-c 10s ease-in-out infinite; }
.bg-brush-float.float-d { animation: float-d 12s ease-in-out infinite; }
.brush-orbit { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.brush-node {
  position: absolute;
  width: 84px; height: 84px;
  transform: translate(-50%, -50%);
  transition: transform .25s ease;
  cursor: pointer;
}
.brush-node:hover { transform: translate(-50%, -50%) scale(1.15); }
.brush-node::after {
  content: ""; position: absolute; inset: -8px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(248,107,51,0.5), transparent 60%);
  opacity: 0; transition: opacity .25s;
  z-index: -1;
}
.brush-node:hover::after { opacity: 1; }

.hero-spokes {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  will-change: transform, opacity;
}

.hero-content {
  position: relative; z-index: 5;
  text-align: center;
  max-width: 880px; padding: 0 24px;
  will-change: transform, opacity;
}
.hero-eyebrow { margin-bottom: 28px; }
.hero-tagline-top {
  font-family: var(--font);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--t-2);
  margin-bottom: 30px;
}
.hero-h1 {
  font-family: var(--font-display);
  font-size: clamp(76px, 13vw, 176px);
  font-weight: 800; line-height: 0.88;
  letter-spacing: -0.055em;
  margin-bottom: 28px;
  text-shadow: 0 4px 60px rgba(10,10,11,0.85), 0 0 24px rgba(10,10,11,0.7);
  text-transform: none;
}
.hero-h1 .z { color: var(--o); display: inline-block; }
.hero-h1 .orange { color: var(--o); font-style: italic; font-weight: 500; }
.hero-h1 .mute { color: var(--t-3); }
.hero-sub {
  font-size: clamp(15px, 1.35vw, 18px);
  color: var(--t-2);
  max-width: 540px; margin: 0 auto 18px;
  line-height: 1.6;
  font-weight: 400;
}
.hero-body {
  font-size: clamp(14px, 1.1vw, 15px);
  color: var(--t-3);
  max-width: 560px; margin: 0 auto 36px;
  line-height: 1.6;
  font-weight: 400;
  text-wrap: pretty;
}
.hero-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

.hero-meta {
  position: absolute; bottom: 32px; left: 50%;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 28px;
  font-family: var(--mono); font-size: 11px;
  color: var(--t-3); letter-spacing: 0.12em; text-transform: uppercase;
}
.hero-meta .sep { width: 24px; height: 1px; background: var(--t-3); }
.hero-meta .check { color: var(--o); }

.hero-scroll-hint {
  position: absolute; bottom: 80px; left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 10px;
  color: var(--t-3); letter-spacing: 0.2em; text-transform: uppercase;
  opacity: 0.6;
}
.hero-scroll-hint .line {
  width: 1px; height: 28px;
  background: linear-gradient(to bottom, var(--o), transparent);
  animation: linepulse 2s infinite;
}
@keyframes linepulse { 0%,100% { opacity: 0.4; } 50% { opacity: 1; } }

/* Brush tooltip */
.brush-tooltip {
  position: absolute;
  transform: translate(-50%, -120%);
  padding: 8px 12px;
  background: rgba(10,10,11,0.95);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--o);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0; transition: opacity .2s;
  z-index: 20;
}
.brush-node:hover ~ .brush-tooltip { opacity: 1; }

/* ============ Reveal section (3-frame) ============ */
.reveal-wrap {
  position: relative;
  height: 200vh;
  background: #000;
}
.reveal-sticky {
  position: sticky; top: 0;
  height: 100vh; width: 100%;
  overflow: hidden;
  background: #000;
}
/* Dark fade at the top — meets the hero's bottom fade to remove the seam */
.reveal-wrap::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 28vh;
  pointer-events: none;
  z-index: 2;
  background:
    linear-gradient(to bottom, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.4) 50%, transparent 100%);
}
.reveal-stage {
  position: absolute; inset: 0;
}
.reveal-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 55%;
  pointer-events: none;
  user-select: none;
}
.reveal-on {
  will-change: mask-image, -webkit-mask-image;
}
.reveal-layer-hover, .reveal-layer-expand {
  transition: opacity .35s cubic-bezier(.2,.8,.2,1);
  z-index: 2;
}

/* Header */
.reveal-header {
  position: absolute; top: 46px; left: 50%;
  transform: translateX(-50%);
  text-align: center; z-index: 5;
  width: 90vw; max-width: 760px;
  pointer-events: none;
}
.reveal-tagline {
  display: inline-block;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--o);
  margin-bottom: 18px;
}
.reveal-h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.8vw, 48px);
  font-weight: 800; letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--t);
  text-shadow: 0 4px 40px rgba(0,0,0,0.7);
}
.reveal-h2 .orange-it { color: var(--o); font-style: italic; font-weight: 600; }

/* Caption at bottom */
.reveal-copy {
  position: absolute; bottom: 7%; left: 50%;
  transform: translateX(-50%);
  text-align: center;
  width: 90vw; max-width: 640px;
  z-index: 5;
  pointer-events: none;
}
.reveal-copy p {
  font-family: var(--font); font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.55;
  color: var(--t-2);
  text-shadow: 0 2px 12px rgba(0,0,0,0.6);
}
.kbd-inline {
  display: inline-block;
  font-family: var(--mono); font-size: 0.65em; font-weight: 600;
  padding: 4px 14px; margin: 0 6px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: rgba(255,255,255,0.05);
  color: var(--t);
  letter-spacing: 0.08em;
  vertical-align: middle;
}

/* Phase indicators */
.reveal-frame-label {
  position: absolute; top: 32px; left: 32px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--t-3);
  display: flex; gap: 20px;
  z-index: 5;
}
.reveal-frame-label .frame {
  display: flex; align-items: center; gap: 8px;
  opacity: 0.4; transition: opacity .3s, color .3s;
}
.reveal-frame-label .frame.active { opacity: 1; color: var(--o); }
.reveal-frame-label .frame .marker {
  width: 6px; height: 6px; border-radius: 50%; background: currentColor;
}

/* Brush hotspots overlaid on the ON image */
.reveal-hotspots {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 4;
}
.reveal-hotspot {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 170px; height: 170px;
  border-radius: 50%;
  pointer-events: auto;
  cursor: default;
  display: grid; place-items: center;
}
.reveal-hotspot.has-feature { cursor: pointer; }
.reveal-hotspot .hotspot-ring {
  width: 140px; height: 140px;
  border-radius: 50%;
  border: 1px solid rgba(248,107,51,0);
  background: transparent;
  transition: border-color .25s, background .25s, transform .25s;
}
/* Pulse hidden — the rings should be invisible by default. The image's own
   orange ring (rendered into the PNG) tells the user which brushes are active. */
.reveal-hotspot.has-feature .hotspot-ring { animation: none; }
.reveal-hotspot:hover .hotspot-ring,
.reveal-hotspot.hovered .hotspot-ring,
.reveal-hotspot.active .hotspot-ring {
  /* Stay invisible — the underlying image already does the highlighting work */
  border-color: rgba(248,107,51,0);
  background: transparent;
  transform: none;
}
.reveal-hotspot .hotspot-label {
  position: absolute; left: 50%; top: 100%;
  transform: translate(-50%, 8px);
  padding: 8px 14px;
  background: rgba(15,15,17,0.96);
  border: 1px solid rgba(248,107,51,0.5);
  border-radius: 8px;
  font-family: var(--mono); font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--t);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s;
  box-shadow: 0 6px 24px rgba(0,0,0,0.5);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.reveal-hotspot:hover .hotspot-label,
.reveal-hotspot.hovered .hotspot-label { opacity: 1; }
.reveal-hotspot .hotspot-cta {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--o);
  text-transform: none;
}

/* Calibration mode UI */
.reveal-cal-toolbar {
  position: absolute; top: 12px; left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  padding: 10px 16px;
  background: rgba(248,107,51,0.95);
  color: #fff;
  border-radius: 999px;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase;
  display: flex; gap: 14px; align-items: center;
  box-shadow: 0 6px 24px rgba(248,107,51,0.4);
}
.reveal-cal-toolbar button {
  padding: 6px 12px;
  background: #fff;
  color: var(--o);
  border: none;
  border-radius: 999px;
  font-family: var(--mono); font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
}
.reveal-hotspot.cal-mode .hotspot-ring {
  border-color: rgba(248,107,51,1);
  background: radial-gradient(circle, rgba(248,107,51,0.3) 0%, transparent 70%);
  cursor: move;
}
.reveal-hotspot.cal-mode { cursor: move; }
.reveal-hotspot .hotspot-cal-label {
  position: absolute; left: 50%; top: 100%;
  transform: translate(-50%, 4px);
  padding: 4px 8px;
  background: var(--o);
  color: #fff;
  font-family: var(--mono); font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.1em;
  border-radius: 4px;
  white-space: nowrap;
  text-align: center;
  pointer-events: none;
}
.reveal-callout {
  position: absolute;
  right: 6vw; top: 32%;
  z-index: 6;
  width: 280px;
  padding: 22px 22px 20px;
  background: rgba(14,14,16,0.78);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  border: 1px solid rgba(248,107,51,0.32);
  border-radius: 14px;
  box-shadow: 0 12px 60px -10px rgba(248,107,51,0.25), 0 8px 28px rgba(0,0,0,0.5);
  opacity: 0;
  transform: translateY(8px);
  animation: callout-in .35s ease forwards;
}
@keyframes callout-in {
  to { opacity: 1; transform: translateY(0); }
}
.reveal-callout.preview { border-color: rgba(248,107,51,0.22); }
.reveal-callout .callout-num {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.2em; color: var(--o);
  margin-bottom: 12px;
}
.reveal-callout .callout-title {
  font-family: var(--font-display); font-weight: 800;
  font-size: 20px; letter-spacing: -0.015em;
  color: var(--t);
  margin-bottom: 8px; line-height: 1.15;
}
.reveal-callout .callout-body {
  font-size: 13px; line-height: 1.55;
  color: var(--t-2);
}
.reveal-callout .callout-hint {
  margin-top: 14px;
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.16em; color: var(--o);
  text-transform: uppercase;
}
.reveal-callout .callout-close {
  margin-top: 16px;
  padding: 7px 12px;
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--t-2);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  transition: background .2s, color .2s, border-color .2s;
}
.reveal-callout .callout-close:hover {
  color: var(--t);
  background: rgba(255,255,255,0.08);
  border-color: rgba(248,107,51,0.4);
}

@media (max-width: 800px) {
  .reveal-callout { right: 4vw; left: 4vw; top: auto; bottom: 18%; width: auto; }
}

.zb-mock {
  position: absolute; inset: 0;
  background: #2c2c30;
  border-radius: 18px;
  overflow: hidden;
  will-change: opacity, filter;
  border: 1px solid var(--line);
}
.zb-mock .zb-topbar {
  position: absolute; top: 0; left: 0; right: 0; height: 36px;
  background: #3a3a3e;
  border-bottom: 1px solid #4a4a4e;
  display: flex; align-items: center; gap: 4px;
  padding: 0 10px;
}
.zb-topbar .tb-cell {
  height: 22px; width: 22px; background: #494951; border-radius: 3px;
  border: 1px solid #5a5a64;
}
.zb-topbar .tb-cell.orange { background: var(--o); border-color: var(--o-dim); box-shadow: 0 0 8px rgba(248,107,51,0.5); }
.zb-topbar .tb-spacer { width: 12px; }
.zb-topbar .tb-bar { height: 8px; flex: 1; background: #494951; border-radius: 2px; max-width: 80px; }
.zb-mock .zb-sidebar {
  position: absolute; top: 36px; bottom: 0; right: 0; width: 56px;
  background: #34343a;
  border-left: 1px solid #4a4a4e;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 12px 0;
}
.zb-sidebar .sb-cell { width: 38px; height: 38px; background: #494951; border-radius: 4px; border: 1px solid #5a5a64; }
.zb-sidebar .sb-cell.orange { background: var(--o); border-color: var(--o-dim); box-shadow: 0 0 12px rgba(248,107,51,0.5); }
.zb-mock .zb-leftbar {
  position: absolute; top: 36px; bottom: 0; left: 0; width: 56px;
  background: #34343a;
  border-right: 1px solid #4a4a4e;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 12px 0;
}
.zb-leftbar .lb-cell { width: 38px; height: 38px; background: #494951; border-radius: 4px; border: 1px solid #5a5a64; }
.zb-mock .zb-bottombar {
  position: absolute; bottom: 0; left: 56px; right: 56px; height: 30px;
  background: #34343a;
  border-top: 1px solid #4a4a4e;
  display: flex; align-items: center; gap: 4px; padding: 0 8px;
}
.zb-bottombar .bb-cell { width: 18px; height: 18px; background: #494951; border-radius: 2px; }
.zb-bottombar .bb-cell.col { background: hsl(var(--h, 30) 60% 55%); }
.zb-mock .zb-canvas {
  position: absolute; top: 36px; bottom: 30px; left: 56px; right: 56px;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(248,107,51,0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 50%, #3a3a40 0%, #1d1d20 80%);
}
.zb-mock .zb-canvas::before {
  content: ""; position: absolute; inset: 40px;
  border: 1px dashed rgba(255,255,255,0.06);
  border-radius: 2px;
}

/* The dark overlay that reveals the ZBrush UI */
.reveal-dim {
  position: absolute; inset: 0;
  background: #0a0a0b;
  border-radius: 18px;
  will-change: opacity;
  pointer-events: none;
}

/* The radial menu on top of canvas */
.reveal-radial {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 360px; height: 360px;
  will-change: transform, opacity;
}
.reveal-radial .core {
  position: absolute; left: 50%; top: 50%;
  width: 10px; height: 10px; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: var(--o);
  box-shadow: 0 0 24px 4px var(--o), 0 0 80px 12px rgba(248,107,51,0.6);
}
.reveal-radial .spoke {
  position: absolute; left: 50%; top: 50%;
  width: 2px; height: 130px;
  transform-origin: top center;
  background: linear-gradient(to bottom, var(--o), transparent);
  opacity: 0.85;
  filter: drop-shadow(0 0 6px rgba(248,107,51,0.7));
}
.reveal-radial .pellet {
  position: absolute;
  width: 56px; height: 56px;
  transform: translate(-50%, -50%);
}

/* ============ Demo video section ============ */
.transition-wrap {
  position: relative;
  height: 100vh;
}
.transition-sticky {
  position: sticky; top: 0;
  height: 100vh; width: 100%;
  overflow: hidden;
  background: var(--warm);
}
.transition-dark {
  position: absolute; inset: 0;
  z-index: 2;
  will-change: mask-image, -webkit-mask-image;
}
.transition-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
.transition-wash {
  position: absolute; inset: 0;
  z-index: 1;
  background:
    linear-gradient(to bottom, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.5) 30%, rgba(0,0,0,0.5) 70%, rgba(0,0,0,0.85) 100%);
}
.transition-content {
  position: relative; z-index: 2;
  width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: 0 32px;
}
.transition-tagline {
  font-family: var(--mono);
  font-size: 12px; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--o);
  margin-bottom: 28px;
}
.transition-h2 {
  font-family: var(--font-display);
  font-size: clamp(40px, 6.5vw, 88px);
  font-weight: 800; letter-spacing: -0.04em;
  line-height: 1.0;
  max-width: 1100px;
  color: var(--t);
  text-shadow: 0 4px 40px rgba(0,0,0,0.7);
}
.transition-h2 .orange-it { color: var(--o); font-style: italic; font-weight: 600; }

/* DEMO base — sits beneath the dark overlay, revealed via mask */
.demo-base {
  position: absolute; inset: 0;
  z-index: 1;
  background: var(--warm);
  color: var(--warm-ink);
  display: flex; align-items: center; justify-content: center;
  padding: 0 32px;
}
.demo-inner {
  width: 100%; max-width: 1200px;
  text-align: center;
}
.demo-tagline {
  font-family: var(--mono);
  font-size: 12px; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--o);
  margin-bottom: 18px;
}
.demo-h2 {
  font-family: var(--font-display);
  font-size: clamp(36px, 5.5vw, 64px);
  font-weight: 800; letter-spacing: -0.035em;
  line-height: 1.0;
  margin-bottom: 32px;
}
.demo-h2 .orange-it { color: var(--o); font-style: italic; font-weight: 600; }
.demo-sub {
  margin-top: 24px;
  font-size: 15px; line-height: 1.55;
  color: rgba(26,24,20,0.62);
  max-width: 520px; margin-left: auto; margin-right: auto;
}

.demo-frame {
  position: relative;
  width: 100%; max-width: 1200px;
  aspect-ratio: 16/9;
  margin: 0 auto;
  border-radius: 18px;
  overflow: hidden;
  background: #0a0a0b;
  box-shadow: 0 30px 80px -20px rgba(26,24,20,0.45), 0 0 0 1px rgba(26,24,20,0.08);
  cursor: pointer;
}
.demo-video {
  width: 100%; height: 100%; display: block;
  object-fit: cover;
}
.demo-play {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 78px; height: 78px;
  border-radius: 50%;
  background: var(--o);
  color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 10px 30px rgba(248,107,51,0.45);
  transition: transform .2s, background .2s, opacity .25s;
  pointer-events: none;
}
.demo-frame:hover .demo-play { transform: translate(-50%, -50%) scale(1.05); background: var(--o-dim); }
.demo-play.playing { opacity: 0; }
.demo-frame:hover .demo-play.playing { opacity: 1; }

/* ============ Features ============ */
.features-wrap {
  position: relative;
  background: var(--warm);
  color: var(--warm-ink);
  padding: 140px 32px 180px;
  overflow: hidden;
}
.features-bg-icons {
  position: absolute; inset: 0; pointer-events: none;
  opacity: 0.5;
}
.features-bg-icons .bg-brush {
  position: absolute;
  width: 64px; height: 64px;
  opacity: 0.18;
  filter: grayscale(0.4);
  transition: opacity .4s, transform .4s;
}
.features-bg-icons .bg-brush:hover { opacity: 0.8; transform: scale(1.1); }

.section-head {
  max-width: 1200px; margin: 0 auto 80px;
  display: flex; align-items: end; justify-content: space-between; gap: 40px;
  position: relative; z-index: 2;
}
.section-head .lead {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em;
  text-transform: uppercase; color: rgba(26,24,20,0.5);
  display: flex; align-items: center; gap: 10px;
}
.section-head .lead::before {
  content: ""; width: 8px; height: 8px; background: var(--o); border-radius: 50%;
}
.section-head h2 {
  font-size: clamp(40px, 6vw, 80px);
  font-weight: 600; letter-spacing: -0.04em; line-height: 0.95;
  flex: 1; max-width: 720px;
}
.section-head h2 .it { font-style: italic; font-weight: 500; color: var(--o); }
.section-head .desc {
  max-width: 320px;
  font-size: 15px; line-height: 1.55;
  color: rgba(26,24,20,0.65);
}

.features-grid {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px;
  position: relative; z-index: 2;
}
.feat-card {
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(26,24,20,0.08);
  border-radius: 22px;
  padding: 28px;
  position: relative;
  overflow: hidden;
  transition: transform .25s, box-shadow .25s, border-color .25s, background .25s;
  cursor: pointer;
}
.feat-card:hover {
  transform: translateY(-3px);
  border-color: rgba(248,107,51,0.4);
  background: rgba(255,255,255,0.85);
  box-shadow: 0 20px 60px -20px rgba(26,24,20,0.2);
}
.feat-card .feat-num {
  position: absolute; top: 16px; right: 20px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em;
  color: rgba(26,24,20,0.35);
}
.feat-card.span-3 { grid-column: span 3; min-height: 380px; }
.feat-card.span-2 { grid-column: span 2; min-height: 320px; }
.feat-card.span-4 { grid-column: span 4; min-height: 360px; }
.feat-card.span-6 { grid-column: span 6; min-height: 280px; }

/* Two-column inside half-width cards: text left, graphic right */
.feat-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
  align-items: center;
  margin-top: 14px;
  height: 100%;
}
.feat-split-text { display: flex; flex-direction: column; min-width: 0; }
.feat-split-text h3 { margin-top: 0; }
.feat-split-text p { max-width: none; }
.feat-split-visual {
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-width: 0;
}

/* Hero card (ZBrush Bridge) — slightly more presence */
.feat-card.hero-card {
  min-height: 360px;
  background: linear-gradient(135deg, #1f1c17 0%, var(--warm-ink) 70%);
  border-color: rgba(248,107,51,0.28);
  box-shadow: 0 24px 60px -28px rgba(248,107,51,0.35);
  display: flex;
  flex-direction: column;
}
.feat-card.hero-card .bridge-layout {
  flex: 1;
  align-items: center;     /* vertical-center both columns inside the card */
  margin-top: 0;
}
.feat-card.hero-card .bridge-text { justify-content: center; }
.feat-card.hero-card .bridge-visual { display: grid; place-items: center; }
.feat-card.hero-card:hover {
  background: linear-gradient(135deg, #25221c 0%, #2a261f 70%);
  border-color: rgba(248,107,51,0.5);
}

/* Two-column layouts inside wide cards */
.bridge-layout {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 28px;
  align-items: center;
  margin-top: 14px;
}
.bridge-text { display: flex; flex-direction: column; }
.bridge-text h3 { margin-top: 0; }
.bridge-visual { width: 100%; }

.library-layout {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 32px;
  align-items: center;
  margin-top: 14px;
}
.library-text { display: flex; flex-direction: column; }
.library-text h3 { margin-top: 0; max-width: 280px; }
.library-text p { max-width: 320px; }
.library-visual { width: 100%; }

.feat-card h3 {
  font-size: 26px; font-weight: 600; letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 14px 0 10px;
}
.feat-card p {
  font-size: 14px; line-height: 1.55;
  color: rgba(26,24,20,0.62);
  max-width: 340px;
}
.feat-card .feat-visual {
  margin-top: auto;
  width: 100%; height: 180px;
  position: relative;
  display: flex; align-items: center; justify-content: center;
}
.feat-card.dark {
  background: var(--warm-ink); color: var(--warm);
  border-color: rgba(255,255,255,0.06);
}
.feat-card.dark p { color: rgba(237,231,218,0.65); }
.feat-card.dark:hover { background: #2a261f; }
.feat-card.dark .feat-num { color: rgba(255,255,255,0.35); }

.feat-radial-mini {
  position: relative; width: 200px; height: 200px;
}
.feat-radial-mini .core {
  position: absolute; left: 50%; top: 50%;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--o); transform: translate(-50%, -50%);
  box-shadow: 0 0 16px 4px var(--o);
}

.callout-list { display: flex; flex-direction: column; gap: 14px; margin-top: 18px; }
.callout-row {
  display: flex; gap: 14px; align-items: start;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(26,24,20,0.04);
  transition: background .2s;
}
.callout-row:hover { background: rgba(248,107,51,0.10); }
.callout-row .key {
  font-family: var(--mono); font-size: 10px;
  padding: 4px 8px; border-radius: 4px;
  background: var(--warm-ink); color: var(--warm);
  letter-spacing: 0.08em;
  margin-top: 2px;
  white-space: nowrap;
}
.callout-row .text {
  font-size: 13px; line-height: 1.45;
  color: rgba(26,24,20,0.78);
}
.callout-row .text strong { color: var(--warm-ink); font-weight: 600; }

/* === Concave curve cut between Features (warm) and How it works (dark) ===
   A single SVG dome of warm colour sits at the top of the dark section,
   pinned to the page top edge. The dark section bg shows everywhere the
   SVG is transparent — so the curve looks like the dark is bowing UP into
   the warm. Pure shape; no motion. */
.how-top-curve {
  position: absolute;
  top: -1px;            /* hide hairline seam */
  left: 0;
  width: 100%;
  height: clamp(140px, 16vw, 240px);
  display: block;
  pointer-events: none;
  z-index: 1;
}

/* Sync pill used in the installer visual */
.sync-pill {
  display: inline-grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--o);
  color: #fff;
  border: 1px solid var(--o);
  cursor: pointer;
  transition: background .15s, transform .12s, box-shadow .15s;
}
.sync-pill.pulse {
  animation: sync-pulse 1.1s ease-in-out infinite;
}
.sync-pill.pressed {
  background: var(--o-dim);
  transform: scale(0.92);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.4);
}
@keyframes sync-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(248,107,51,0.55), 0 4px 14px rgba(248,107,51,0.35);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(248,107,51,0.00), 0 4px 14px rgba(248,107,51,0.35);
  }
}

/* ============ How it works ============ */
.how-wrap {
  background: var(--bg);
  color: var(--t);
  padding: 140px 32px 160px;  /* Popup section sits above (dark), no dome here */
  position: relative;
  overflow: clip;            /* clip (not hidden) so sticky descendants still work */
}
.how-wrap .section-head .lead { color: var(--t-2); }
.how-wrap .section-head .lead::before { background: var(--o); }
.how-wrap .section-head .desc { color: var(--t-2); }

/* === Stacked deck of step cards =========================================
   Each card is wide (text left, visual right), position: sticky with a
   progressively offset `top` so they stack as a deck while you scroll.
   A scroll RAF loop applies scale/translate/opacity to recede the covered card. */
.steps-stack {
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
  /* No gap — sticky offset handles visual spacing of the deck. */
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.step-card {
  position: sticky;
  /* Each subsequent card sticks 26px lower so previous cards peek out above. */
  top: calc(110px + var(--i, 0) * 26px);
  z-index: calc(10 + var(--i, 0));
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 56px;
  align-items: center;
  padding: 48px 56px;
  min-height: 440px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 28px;
  /* Solid dark fill so text reads cleanly over the bg image */
  background:
    linear-gradient(180deg, #18181c 0%, #131316 60%, #101013 100%);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 30px 80px -30px rgba(0,0,0,0.7);
  transform-origin: center top;
  will-change: transform, opacity;
}
.step-card-text {
  display: flex;
  flex-direction: column;
  padding-right: 16px;
}
.step-card-text .step-num {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.20em;
  color: var(--o);
}
.step-card-text h3 {
  margin-top: 22px;
  font-size: clamp(32px, 3.4vw, 46px);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.02;
  color: var(--t);
}
.step-card-text p {
  margin-top: 20px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--t-2);
  max-width: 460px;
  text-wrap: pretty;
}
.step-card-visual {
  position: relative;
  height: 360px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.06);
  background: var(--bg);
  overflow: hidden;
  display: grid;
  place-items: center;
  /* CSS slot for an optional photographic background — replace with the user's image */
  background-image: var(--card-bg, none);
  background-size: cover;
  background-position: center;
}
/* Decorative backdrop placeholder behind the visual — subtle dot grid + radial vignette */
.step-visual-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 50% 45%, rgba(248,107,51,0.06), transparent 70%),
    radial-gradient(circle at 1px 1px, rgba(255,255,255,0.06) 1px, transparent 1.2px);
  background-size: auto, 16px 16px;
  pointer-events: none;
  opacity: 0.85;
}
.step-visual-inner {
  position: relative;
  transform: scale(1.55);
  transform-origin: center;
}

.kbd {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--mono); font-size: 11px;
  padding: 4px 10px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,0.3);
}

/* ============ Pricing ============ */
.pricing-wrap {
  position: relative;
  padding: 140px 32px 140px;
  background:
    radial-gradient(ellipse 60% 40% at 50% 70%, rgba(248,107,51,0.10) 0%, transparent 60%),
    var(--bg);
  overflow: hidden;
}
.pricing-card {
  max-width: 640px; margin: 0 auto;
  background: linear-gradient(180deg, rgba(248,107,51,0.06), transparent),
              rgba(20,20,24,0.7);
  border: 1px solid rgba(248,107,51,0.28);
  border-radius: 28px;
  padding: 48px;
  text-align: center;
  position: relative;
  backdrop-filter: blur(12px);
  box-shadow: 0 30px 100px -30px rgba(248,107,51,0.3);
}
.pricing-card .badge {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  padding: 6px 14px; font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase;
  background: var(--o); color: #fff;
  border-radius: 999px;
  box-shadow: 0 6px 20px rgba(248,107,51,0.4);
}
.pricing-card h2 {
  font-size: 40px; font-weight: 600; letter-spacing: -0.03em;
  margin-bottom: 8px;
}
.pricing-card .sub { color: var(--t-2); font-size: 15px; margin-bottom: 32px; }
.pricing-card .price-row {
  display: flex; align-items: baseline; justify-content: center; gap: 12px;
  margin-bottom: 6px;
}
.pricing-card .price {
  font-size: 96px; font-weight: 700; letter-spacing: -0.05em;
  line-height: 1;
}
.pricing-card .price-cur {
  font-size: 28px; color: var(--t-2); font-weight: 500;
}
.pricing-card .price-note {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--o); margin-bottom: 32px;
}
.pricing-feats {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  margin-bottom: 36px; text-align: left;
}
.pricing-feats li {
  display: flex; align-items: center; gap: 10px;
  font-size: 14px; color: var(--t-2);
  padding: 10px 12px; border-radius: 8px;
  background: rgba(255,255,255,0.03);
  list-style: none;
}
.pricing-feats li .ck {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--o-soft); color: var(--o);
  display: grid; place-items: center; flex-shrink: 0;
  font-size: 10px;
}
.pricing-card .btn-primary { font-size: 16px; padding: 18px 36px; }

/* ============ FAQ ============ */
.faq-wrap { padding: 100px 32px 140px; background: var(--bg); }
.faq-list { max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; gap: 0; }
.faq-item {
  border-top: 1px solid var(--line);
  padding: 28px 0;
  cursor: pointer;
}
.faq-item:last-child { border-bottom: 1px solid var(--line); }
.faq-q {
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  font-size: 20px; font-weight: 500; letter-spacing: -0.01em;
}
.faq-q .icon {
  width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid var(--line-strong);
  display: grid; place-items: center;
  transition: background .2s, transform .2s, border-color .2s;
  flex-shrink: 0;
}
.faq-item[data-open="true"] .faq-q .icon { background: var(--o); border-color: var(--o); transform: rotate(45deg); color: #fff; }
.faq-a {
  overflow: hidden; max-height: 0;
  transition: max-height .35s ease;
  color: var(--t-2); font-size: 15px; line-height: 1.6;
}
.faq-item[data-open="true"] .faq-a { max-height: 200px; padding-top: 12px; }

/* ============ Footer ============ */
.footer {
  border-top: 1px solid var(--line);
  padding: 60px 32px 40px;
  background: var(--bg);
}
.footer-grid {
  max-width: 1200px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  flex-wrap: wrap;
}
.footer-logo { display: flex; align-items: center; gap: 12px; }
.footer-logo .nav-mark { width: 36px; height: 36px; }
.footer-logo .nav-name { font-size: 18px; }
.footer-meta { color: var(--t-3); font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; }
.footer-links { display: flex; gap: 24px; font-size: 13px; color: var(--t-2); }
.footer-links a:hover { color: var(--t); }

/* tiny utils */
.mono { font-family: var(--mono); }

/* responsive */
@media (max-width: 900px) {
  .nav-links a:not(.nav-cta) { display: none; }
  .features-grid { grid-template-columns: 1fr; }
  .feat-card.span-3, .feat-card.span-2, .feat-card.span-4, .feat-card.span-6 { grid-column: span 1; }
  .bridge-layout, .library-layout, .feat-split { grid-template-columns: 1fr; gap: 20px; }
  .steps-stack { gap: 24px; }
  .step-card {
    position: relative;
    top: auto;
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 36px 28px;
    min-height: 0;
    transform: none !important;
    opacity: 1 !important;
  }
  .step-card-visual { height: 280px; }
  .step-visual-inner { transform: scale(1.2); }
  .pricing-feats { grid-template-columns: 1fr; }
  .section-head { flex-direction: column; align-items: start; }
}


/* ============================================================================
 * Demo (The workflow) — interactive RadialZ + Spline
 * Replaces the old scroll-driven Reveal. Lives in normal page flow.
 * ============================================================================ */
.demo-wrap {
  position: relative;
  background: var(--bg);
  color: var(--t);
  padding: 120px 32px 200px;   /* extra bottom padding clears the warm dome */
  overflow: clip;
}
.demo-wrap .section-head { margin-bottom: 56px; }
.demo-wrap .section-head .lead { color: var(--t-2); }
.demo-wrap .section-head .lead::before { background: var(--o); }
.demo-wrap .section-head .desc { color: var(--t-2); }

/* ----- The stage: holds the wireframe + the live canvas ------------------- */
.demo-stage {
  position: relative;
  z-index: 2;
  max-width: 1320px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  background: #1e1e20;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.05);
  isolation: isolate;
}

/* === ZBrush wireframe ==================================================== */
.zb-wire {
  position: absolute;
  inset: 0;
  pointer-events: none;
  color: rgba(237,231,218,0.42);
  font-family: var(--mono);
}
.zb-wire * { box-sizing: border-box; }

/* Top menu bar */
.zb-menubar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 24px;
  display: flex; align-items: center; gap: 14px;
  padding: 0 18px;
  border-bottom: 1px solid rgba(237,231,218,0.10);
  background: rgba(255,255,255,0.01);
}
.zb-menubar-item {
  font-size: 9px;
  letter-spacing: 0.03em;
  color: rgba(237,231,218,0.46);
  white-space: nowrap;
}

/* Top tool / brush bar */
.zb-toolbar {
  position: absolute;
  top: 24px; left: 0; right: 0;
  height: 56px;
  display: flex; align-items: center; gap: 16px;
  padding: 0 14px;
  border-bottom: 1px solid rgba(237,231,218,0.08);
}
.zb-toolbar-group { display: flex; align-items: center; gap: 4px; }
.zb-toolbar-group--actions { gap: 3px; }
.zb-toolbar-group--meta { margin-left: auto; }

.zb-tile {
  display: inline-block;
  width: 22px; height: 22px;
  border-radius: 3px;
  border: 1px solid rgba(237,231,218,0.20);
  background: rgba(237,231,218,0.04);
}
.zb-tile--active {
  border-color: rgba(248,107,51,0.55);
  background: rgba(248,107,51,0.18);
  box-shadow: 0 0 0 1px rgba(248,107,51,0.20);
}
.zb-tile--orb {
  background: radial-gradient(circle at 35% 30%, rgba(237,231,218,0.18), rgba(237,231,218,0.05) 60%, rgba(0,0,0,0.0));
  border: 1px solid rgba(237,231,218,0.18);
  border-radius: 50%;
}
.zb-pill {
  width: 46px; height: 18px;
  border-radius: 3px;
  border: 1px solid rgba(237,231,218,0.18);
  background: rgba(237,231,218,0.03);
}
.zb-pill--sm { width: 60px; height: 14px; }

.zb-toolbar-tag {
  width: 26px; height: 14px;
  border-radius: 2px;
  border: 1px solid rgba(237,231,218,0.18);
  background: rgba(237,231,218,0.03);
}
.zb-toolbar-tag--active {
  background: rgba(248,107,51,0.55);
  border-color: rgba(248,107,51,0.6);
}
.zb-slider {
  width: 88px; height: 12px;
  border-radius: 2px;
  border: 1px solid rgba(237,231,218,0.14);
  background:
    linear-gradient(90deg, rgba(248,107,51,0.55) 0 18%, rgba(237,231,218,0.05) 18%);
}

/* Thin orange progress line under the toolbar — runs over the canvas only */
.zb-progress {
  position: absolute;
  top: 80px;
  left: 112px;
  right: 196px;
  height: 3px;
  background: linear-gradient(90deg, var(--o) 0%, var(--o) 18%, rgba(237,231,218,0.06) 18%, rgba(237,231,218,0.06) 100%);
  border-radius: 2px;
}

/* === Left brush column (big square thumbs) =============================== */
.zb-left-shelf {
  position: absolute;
  top: 84px;
  left: 0;
  bottom: 0;
  width: 112px;
  padding: 8px 8px 12px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  border-right: 1px solid rgba(237,231,218,0.06);
}
.zb-bigtile {
  position: relative;
  width: 88px;
  aspect-ratio: 1;
  flex-shrink: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  padding: 6px 6px 8px;
  background: rgba(237,231,218,0.025);
  border: 1px solid rgba(237,231,218,0.10);
  border-radius: 3px;
}
.zb-bigtile-glyph {
  position: relative;
  width: 56%;
  aspect-ratio: 1;
  margin: 0 auto auto;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(237,231,218,0.22), rgba(237,231,218,0.04) 65%, rgba(0,0,0,0) 80%);
  border: 1px solid rgba(237,231,218,0.10);
}
.zb-bigtile-label {
  font-size: 8.5px;
  letter-spacing: 0.02em;
  color: rgba(237,231,218,0.55);
}
/* The Standard tile shows the currently-active brush thumbnail with an orange
   outline — replaces the floating panel that used to overlap it. */
.zb-bigtile--active {
  border-color: rgba(248,107,51,0.85);
  box-shadow: 0 0 0 1px rgba(248,107,51,0.35), 0 0 18px rgba(248,107,51,0.18);
  background: rgba(248,107,51,0.05);
  transition: border-color .3s, box-shadow .3s, background .3s;
}
.zb-bigtile--active.is-flashing {
  border-color: #f0651f;
  box-shadow: 0 0 0 1.5px rgba(248,107,51,0.55), 0 0 28px rgba(248,107,51,0.45);
}
.zb-bigtile-active-img {
  position: relative;
  width: 78%;
  aspect-ratio: 1;
  margin: 0 auto auto;
  display: grid; place-items: center;
}
.zb-bigtile-active-img img {
  width: 100%; height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.6));
}

.zb-color-block {
  width: 88px; height: 72px;
  margin-top: 4px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 6px;
  background: rgba(237,231,218,0.02);
  border: 1px solid rgba(237,231,218,0.10);
  border-radius: 3px;
}
.zb-color-wheel {
  flex: 1; width: 100%;
  border-radius: 2px;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.0), rgba(0,0,0,0.45)),
    linear-gradient(90deg, #ffffff, #ff3a3a 25%, #ffdd33 45%, #45ff5a 60%, #2ec7ff 75%, #b34dff 100%);
  border: 1px solid rgba(237,231,218,0.10);
  position: relative;
}
.zb-color-wheel::after {
  content: "";
  position: absolute;
  top: 12%; left: 6%;
  width: 9px; height: 9px;
  border: 1.5px solid #fff;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.6);
}
.zb-color-label {
  font-size: 8px;
  letter-spacing: 0.02em;
  color: rgba(237,231,218,0.5);
}
.zb-color-swatch {
  width: 88px;
  margin-top: 4px;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 6px;
  background: rgba(237,231,218,0.02);
  border: 1px solid rgba(237,231,218,0.10);
  border-radius: 3px;
}
.zb-swatch-black, .zb-swatch-white {
  width: 100%; height: 14px;
  border: 1px solid rgba(237,231,218,0.15);
  border-radius: 2px;
}
.zb-swatch-black { background: #1a1a1c; }
.zb-swatch-white { background: rgba(237,231,218,0.9); }
.zb-alt-pill {
  width: 88px; height: 18px;
  margin-top: 4px;
  display: grid; place-items: center;
  font-size: 8.5px;
  letter-spacing: 0.02em;
  color: #fff;
  background: var(--o);
  border-radius: 3px;
}

/* === Left vertical icon rail (between brush column and canvas) =========== */
.zb-left-rail {
  position: absolute;
  top: 84px;
  left: 112px;
  bottom: 0;
  width: 44px;
  padding: 8px 0;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  border-right: 1px solid rgba(237,231,218,0.06);
}
.zb-rail-cell {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.zb-rail-icon {
  width: 20px; height: 20px;
  border: 1px solid rgba(237,231,218,0.16);
  border-radius: 3px;
  background: rgba(237,231,218,0.04);
}
.zb-rail-label {
  font-size: 7px;
  letter-spacing: 0.02em;
  color: rgba(237,231,218,0.35);
}

/* === Right vertical icon rail (between canvas and tool panel) ============ */
.zb-right-rail {
  position: absolute;
  top: 84px;
  right: 196px;
  bottom: 0;
  width: 40px;
  padding: 8px 0;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  border-left: 1px solid rgba(237,231,218,0.06);
}
.zb-right-rail .zb-rail-icon {
  width: 18px; height: 18px;
}

/* === Right Tool panel ==================================================== */
.zb-right-panel {
  position: absolute;
  top: 24px;
  right: 0;
  bottom: 0;
  width: 196px;
  padding: 10px 10px 14px;
  display: flex; flex-direction: column; gap: 6px;
  background: rgba(255,255,255,0.01);
  border-left: 1px solid rgba(237,231,218,0.08);
  overflow: hidden;
}
.zb-tool-header {
  display: flex; align-items: center; gap: 6px;
  padding: 0 2px 6px;
  border-bottom: 1px solid rgba(237,231,218,0.10);
}
.zb-tool-mark {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(237,231,218,0.55), rgba(237,231,218,0.15) 65%);
  border: 1px solid rgba(237,231,218,0.2);
}
.zb-tool-title {
  font-size: 10px;
  letter-spacing: 0.04em;
  color: rgba(237,231,218,0.65);
}
.zb-tool-refresh {
  margin-left: auto;
  width: 12px; height: 12px;
  border: 1px solid rgba(237,231,218,0.18);
  border-radius: 50%;
}
.zb-btn-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3px;
  padding-bottom: 4px;
}
.zb-btn {
  height: 14px;
  border: 1px solid rgba(237,231,218,0.12);
  background: rgba(237,231,218,0.025);
  border-radius: 2px;
}
.zb-btn--active {
  background: rgba(248,107,51,0.12);
  border-color: rgba(248,107,51,0.35);
}
.zb-thumb-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 3px;
  padding: 4px 0;
  border-top: 1px solid rgba(237,231,218,0.06);
  border-bottom: 1px solid rgba(237,231,218,0.06);
}
.zb-thumb {
  aspect-ratio: 1;
  background: radial-gradient(circle at 35% 30%, rgba(237,231,218,0.22), rgba(237,231,218,0.05) 60%);
  border: 1px solid rgba(237,231,218,0.12);
  border-radius: 2px;
}
.zb-thumb--active {
  border-color: rgba(248,107,51,0.45);
  box-shadow: 0 0 0 1px rgba(248,107,51,0.25);
}
.zb-tool-list {
  display: flex; flex-direction: column; gap: 2px;
  overflow: hidden;
}
.zb-tool-row {
  height: 12px;
  display: flex; align-items: center; padding: 0 6px;
  border-radius: 2px;
  background: rgba(237,231,218,0.018);
  border: 1px solid rgba(237,231,218,0.05);
}
.zb-tool-row--active {
  background: rgba(248,107,51,0.14);
  border-color: rgba(248,107,51,0.45);
}
.zb-tool-row--active .zb-tool-row-label { color: rgba(248,107,51,0.85); }
.zb-tool-row-label {
  font-size: 7px;
  letter-spacing: 0.02em;
  color: rgba(237,231,218,0.42);
}

/* Canvas frame outline (just an underline border for the work area) */
.zb-canvas-frame {
  position: absolute;
  top: 88px;
  left: 156px;
  right: 236px;
  bottom: 18px;
  border: 1px solid rgba(237,231,218,0.18);
  border-radius: 2px;
  pointer-events: none;
}

/* === Live canvas (the actual interactive area) =========================== */
.zb-canvas {
  position: absolute;
  top: 88px;
  left: 156px;
  right: 236px;
  bottom: 18px;
  background:
    radial-gradient(ellipse at 50% 55%, rgba(248,107,51,0.05), rgba(0,0,0,0) 60%),
    radial-gradient(ellipse at 50% 60%, #2a2a2e 0%, #1a1a1c 55%, #131316 100%);
  cursor: crosshair;
  overflow: hidden;
}
.zb-canvas::before {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.025) 1px, transparent 1.2px);
  background-size: 22px 22px;
  pointer-events: none;
}
.zb-canvas-fallback {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 42% 60% at 50% 56%,
      rgba(170,150,130,0.18),
      rgba(80,70,60,0.08) 45%,
      transparent 72%);
  mix-blend-mode: screen;
}
.zb-canvas spline-viewer { display: block; }
.zb-canvas spline-viewer::part(logo) { display: none; }

/* === Floating active-brush label (inside canvas, top-left) ============== */
.rz-active-label {
  position: absolute;
  top: 18px;
  left: 22px;
  z-index: 5;
  pointer-events: none;
  display: flex; flex-direction: column; gap: 2px;
  text-shadow: 0 1px 3px rgba(0,0,0,0.55);
  animation: rz-active-in 0.55s cubic-bezier(.2,.85,.3,1.05) both;
}
@keyframes rz-active-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.rz-active-eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--o);
}
.rz-active-name {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: #fff;
  line-height: 1;
  margin-top: 2px;
}
.rz-active-status {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.5);
  transition: color .25s;
}
.rz-active-status.is-loaded { color: #6ed98a; }
.rz-active-status .rz-status-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
}

/* === Hint pill =========================================================== */
.rz-hint {
  position: absolute;
  bottom: 18px; left: 50%;
  transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  background: rgba(16,16,18,0.7);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 999px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.78);
  pointer-events: none;
  animation: rz-hint-pulse 2.4s ease-in-out infinite;
  z-index: 4;
}
.rz-hint svg { color: var(--o); }
@keyframes rz-hint-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(240,101,31,0.35); }
  50%      { box-shadow: 0 0 0 10px rgba(240,101,31,0); }
}

/* === Radial menu overlay ================================================= */
.rz-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 6;
}
.rz-overlay-plate {
  position: absolute;
  pointer-events: auto;
  animation: rz-pop 0.18s ease-out both;
}
.rz-overlay-svg {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

@keyframes rz-pop {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: scale(1); }
}

/* Center cancel node */
.rz-center {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  pointer-events: none;
  text-align: center;
}
.rz-center-dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: #f0651f;
  box-shadow:
    0 0 0 3px rgba(240,101,31,0.18),
    0 0 18px 4px rgba(240,101,31,0.55);
  animation: rz-dot-pulse 1.6s ease-in-out infinite;
}
@keyframes rz-dot-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.18); }
}
.rz-center-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  color: rgba(240,101,31,0.85);
  white-space: nowrap;
}
.rz-center-label--top { color: rgba(255,255,255,0.88); }
.rz-center-label--bot { color: rgba(255,255,255,0.55); font-size: 8px; }

/* === Slots — parent + children =========================================== */
.rz-slot-group {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.rz-child-spokes {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* Each slot is a fixed-size box so the disc never gets squashed by labels.
   The disc and label are explicit children of a flex column; both have
   flex-shrink: 0 to keep the disc perfectly circular. */
.rz-slot {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: 6px;
  background: transparent;
  border: 0; padding: 0;
  cursor: pointer;
  pointer-events: auto;
  animation: rz-slot-in 0.32s cubic-bezier(.2,.9,.3,1.15) both;
  transform-origin: center;
  transition: transform .14s ease;
}
@keyframes rz-slot-in {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.55); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.rz-slot:hover { transform: translate(-50%, -50%) scale(1.06); }

.rz-slot-disc {
  flex-shrink: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, #4a4a4f, #1a1a1c 70%);
  border: 2px solid rgba(40,40,44,0.9);
  box-shadow:
    inset 0 -3px 6px rgba(0,0,0,0.45),
    inset 0 2px 4px rgba(255,255,255,0.06),
    0 8px 22px rgba(0,0,0,0.55);
  display: grid; place-items: center;
  overflow: hidden;
  transition: border-color .15s, box-shadow .2s;
}
.rz-slot-disc img {
  width: 80%; height: 80%;
  object-fit: contain;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.45));
  pointer-events: none;
  user-select: none;
}
.rz-slot-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.10em;
  color: rgba(255,255,255,0.72);
  white-space: nowrap;
  transition: color .15s;
}
.rz-slot:hover .rz-slot-disc {
  border-color: #f0651f;
  box-shadow:
    inset 0 -3px 6px rgba(0,0,0,0.45),
    inset 0 2px 4px rgba(255,255,255,0.06),
    0 0 0 1px rgba(240,101,31,0.6),
    0 0 24px rgba(240,101,31,0.55),
    0 8px 22px rgba(0,0,0,0.55);
}
.rz-slot:hover .rz-slot-label { color: #f0651f; }

/* Tiny indicator dot on parents with children */
.rz-slot-has-children {
  position: absolute;
  top: 4px; right: 4px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #4dc8e9;
  box-shadow: 0 0 6px rgba(77,200,233,0.7);
  opacity: 0.85;
}

/* === Children — fan out on parent group hover ============================ */
/* Children don't get the rz-slot-in entrance animation (parent has it) — the
   animation's `fill-mode: both` would otherwise lock opacity:1 and defeat the
   hover-only visibility. */
.rz-slot--child {
  animation: none;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.7);
  transition:
    opacity .22s ease,
    transform .26s cubic-bezier(.2,.9,.3,1.15);
}
.rz-slot-group.is-open .rz-slot--child {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}
.rz-slot--child .rz-slot-disc { border-color: rgba(40,40,44,0.9); }
.rz-slot--child .rz-slot-label { color: rgba(255,255,255,0.65); font-size: 8.5px; }
.rz-slot--child:hover .rz-slot-disc {
  border-color: #4dc8e9;
  box-shadow:
    inset 0 -3px 6px rgba(0,0,0,0.45),
    inset 0 2px 4px rgba(255,255,255,0.06),
    0 0 0 1px rgba(77,200,233,0.65),
    0 0 22px rgba(77,200,233,0.5),
    0 8px 18px rgba(0,0,0,0.5);
}
.rz-slot--child:hover .rz-slot-label { color: #4dc8e9; }

/* === Honesty / disclaimer line =========================================== */
.demo-honesty {
  position: relative;
  z-index: 2;
  max-width: 720px;
  margin: 22px auto 0;
  text-align: center;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.38);
}

/* === Circular reveal wipe into the video section ========================= */
/* Drives a radial-gradient mask via a CSS var set by JS on scroll. */
.transition-wrap.has-reveal .demo-base {
  -webkit-mask-image: radial-gradient(circle at 50% 55%, black var(--rz-rev-inner, 0%), transparent var(--rz-rev-outer, 0%));
          mask-image: radial-gradient(circle at 50% 55%, black var(--rz-rev-inner, 0%), transparent var(--rz-rev-outer, 0%));
}

/* === Narrow viewport ===================================================== */
@media (max-width: 900px) {
  .demo-wrap { padding: 80px 16px 80px; }
  .demo-stage {
    aspect-ratio: 4 / 3;
    border-radius: 10px;
  }
  .zb-menubar-item:nth-child(n+8) { display: none; }
  .zb-toolbar-group:nth-child(n+4) { display: none; }
  .zb-left-rail, .zb-right-rail { display: none; }
  .zb-left-shelf { width: 78px; }
  .zb-bigtile, .zb-color-block, .zb-color-swatch, .zb-alt-pill { width: 60px; }
  .zb-bigtile { height: 60px; }
  .zb-bigtile-label, .zb-color-label { font-size: 7px; }
  .zb-right-panel { width: 130px; }
  .zb-tool-row:nth-child(n+14) { display: none; }
  .zb-canvas, .zb-canvas-frame { left: 86px; right: 138px; }
  .zb-progress { left: 86px; right: 138px; }

  /* compact radial menu on small screens */
  .rz-slot-disc img { width: 76%; height: 76%; }
  .rz-active-label { top: 12px; left: 14px; }
  .rz-active-name { font-size: 16px; }
  .rz-active-eyebrow { font-size: 8.5px; }
  .rz-active-status { font-size: 8.5px; }
  .rz-hint { font-size: 9.5px; padding: 6px 10px; bottom: 10px; }
}


/* ============================================================================
 * Tweaks: dome curves, lead variants, footer icon, pricing/FAQ heads.
 * ============================================================================ */

/* Dark→warm dome at the TOP of the video Transition section. Lives inside
   .transition-wrap and overflows UPWARD into the dark Demo section above.
   Kept shallow so it doesn't cover the demo's honesty line. */
.transition-top-dome {
  position: absolute;
  left: 0;
  top: calc(-1 * clamp(60px, 8vw, 110px) + 1px);
  width: 100%;
  height: clamp(60px, 8vw, 110px);
  display: block;
  pointer-events: none;
  z-index: 3;
  overflow: visible;
}

/* Re-tune the existing Features→How dome to a shallow shape that doesn't
   eat into the "Three steps" heading below it. */
.how-top-curve {
  height: clamp(70px, 8vw, 120px);
}

/* Cyan variant of the .lead eyebrow (used in FAQ). */
.lead--cyan { color: rgba(26,24,20,0.5); }
.lead--cyan::before { background: var(--o2) !important; }
.how-wrap .lead--cyan, .pricing-wrap .lead--cyan, .faq-wrap .lead--cyan {
  color: var(--t-2);
}

/* Centered section heads (used by Pricing + FAQ). */
.section-head--centered {
  margin: 0 auto 56px;
  flex-direction: column;
  align-items: center !important;
  text-align: center;
  max-width: 1000px;
}
.section-head--centered .lead {
  justify-content: center;
}
.section-head--centered h2 {
  text-align: center;
}
.pricing-wrap .section-head--centered { color: var(--t); }
.pricing-wrap .section-head--centered .lead { color: var(--t-2); }
.faq-wrap .section-head--centered { color: var(--t); }
.faq-wrap .section-head--centered .lead { color: var(--t-2); }

/* Pricing card no longer has a top badge — remove the absolute pin space. */
.pricing-card { padding-top: 48px; }

/* Footer icon now uses the supplied PNG instead of the inline radial mark. */
.footer-mark {
  width: 36px; height: 36px;
  display: block;
  border-radius: 8px;
  object-fit: contain;
}

/* Make sure mailto Contact still feels like a normal link */
.footer-links a { transition: color .15s; }


/* ============================================================================
 * Popup Library section — full-bleed dark with the ZBrush popup-library bg.
 * The bg image fills the section edge-to-edge; a warm dome at the top blends
 * from Features (warm) into this dark section. Title + callouts overlay on
 * top of the image.
 * ============================================================================ */
.popup-wrap {
  position: relative;
  background: var(--bg);
  color: var(--t);
  aspect-ratio: 16 / 9;
  width: 100%;
  max-width: none;
  overflow: hidden;
  isolation: isolate;
}

/* Background image — fills the section */
.popup-bg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
  z-index: 0;
}

/* Soft bottom fade so the section blends into the dark How section below. */
.popup-wrap::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 12%;
  background: linear-gradient(0deg, var(--bg), transparent);
  pointer-events: none;
  z-index: 3;
}

/* Heading overlay — top-left, sits BELOW the warm dome */
.popup-head {
  position: absolute;
  top: calc(clamp(70px, 8vw, 120px) + 24px);
  left: 5%;
  z-index: 2;
  max-width: 50%;
}
.popup-head .lead {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 12px;
}
.popup-head .lead::before {
  content: "";
  width: 8px; height: 8px;
  background: var(--o);
  border-radius: 50%;
}
.popup-head .popup-h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 4.2vw, 64px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1;
  color: #fff;
  text-shadow: 0 4px 30px rgba(0,0,0,0.7);
}
.popup-head .popup-h2 .it {
  color: var(--o);
  font-style: italic;
  font-weight: 600;
}

/* Leader lines — viewBox spans the section in percent coords. */
.popup-leaders {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 4;
}

/* === Callouts =========================================================== */
.popup-callout {
  position: absolute;
  z-index: 5;
  padding: 16px 18px;
  background: rgba(14,14,16,0.88);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 12px;
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  box-shadow:
    0 18px 40px -12px rgba(0,0,0,0.7),
    0 0 0 1px rgba(255,255,255,0.02);
  color: var(--t);
}
.popup-callout-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--o2);
  margin-bottom: 10px;
}
.popup-callout-body {
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255,255,255,0.78);
  text-wrap: pretty;
}

/* === Mobile / narrow viewport =========================================== */
@media (max-width: 1100px) {
  .popup-wrap {
    aspect-ratio: auto;
    height: auto;
    padding-bottom: 16px;
  }
  .popup-bg {
    position: relative;
    inset: auto;
    height: auto;
    aspect-ratio: 16 / 9;
  }
  .popup-head {
    position: relative;
    top: auto; left: auto;
    max-width: 100%;
    padding: 24px 18px 8px;
  }
  .popup-leaders { display: none; }
  .popup-callout {
    position: relative !important;
    width: auto !important;
    top: auto !important; left: auto !important; right: auto !important;
    margin: 12px 18px;
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.08);
    backdrop-filter: none;
  }
  .popup-wrap::after { display: none; }
}


/* ============================================================================
 * Pricing card — variant dropdown, terms checkbox, disabled buy button.
 * ============================================================================ */

/* Variant dropdown */
.pricing-variant {
  margin: 0 0 18px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: left;
}
.pricing-variant-label {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--t-3);
  margin-bottom: 8px;
}
.pricing-variant-select-wrap {
  position: relative;
  display: block;
}
.pricing-variant-select {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  font-family: var(--font);
  font-size: 15px;
  font-weight: 500;
  color: var(--t);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 10px;
  padding: 13px 44px 13px 16px;
  cursor: pointer;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.pricing-variant-select:hover {
  border-color: rgba(248,107,51,0.55);
  background: rgba(255,255,255,0.06);
}
.pricing-variant-select:focus {
  outline: none;
  border-color: var(--o);
  box-shadow: 0 0 0 3px rgba(248,107,51,0.18);
}
.pricing-variant-select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
/* Style the native dropdown options so they're readable in both light and
   dark OS popup palettes. Browser native menus only respect color + bg. */
.pricing-variant-select option {
  background: #16161a;
  color: #f5f4f1;
}
.pricing-variant-caret {
  position: absolute;
  right: 16px; top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  color: var(--t-3);
  pointer-events: none;
}

/* Price layout adjustments — center the row, currency next to the number */
.pricing-card .price-row {
  align-items: flex-end;
  justify-content: center;
  gap: 10px;
  margin-bottom: 6px;
}
.pricing-card .price-currency {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.10em;
  color: var(--t-2);
  align-self: flex-end;
  margin-bottom: 14px;
}
.pricing-card .price-enterprise {
  font-size: 36px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--t);
  line-height: 1;
}

/* Terms agreement */
.pricing-terms {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 4px 0 18px;
  padding: 14px 16px;
  border-radius: 10px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.08);
  font-size: 13px;
  line-height: 1.5;
  color: var(--t-2);
  text-align: left;
  cursor: pointer;
  user-select: none;
  transition: border-color .2s, background .2s;
}
.pricing-terms:hover { border-color: rgba(255,255,255,0.16); }
.pricing-terms input[type="checkbox"] {
  flex-shrink: 0;
  width: 18px; height: 18px;
  margin-top: 1px;
  accent-color: var(--o);
  cursor: pointer;
}
.pricing-terms a {
  color: var(--o);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.pricing-terms a:hover { color: var(--o-dim); }
.pricing-terms.is-shaking { animation: rz-terms-shake 0.55s cubic-bezier(.36,.07,.19,.97); }
@keyframes rz-terms-shake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60% { transform: translateX(4px); }
}

/* CTA buttons inside the pricing card — full-width, centered */
.pricing-cta {
  width: 100%;
  justify-content: center;
}
.pricing-cta.is-disabled {
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.35);
  cursor: not-allowed;
  box-shadow: none;
}
.pricing-cta.is-disabled:hover {
  background: rgba(255,255,255,0.08);
  transform: none;
  box-shadow: none;
}
.pricing-cta.is-disabled .price-tag {
  background: rgba(255,255,255,0.06);
  border-left-color: rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.4);
}

.pricing-foot {
  margin-top: 20px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--t-3);
}


/* Tiny "already own RadialZ" guide link under the FAQ list. */
.faq-guide-link {
  max-width: 800px;
  margin: 36px auto 0;
  text-align: center;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--t-3);
}
.faq-guide-link a {
  color: var(--o2);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  margin-left: 4px;
  transition: color .15s;
}
.faq-guide-link a:hover { color: var(--o2-dim); }