/* ================================================
   FLUXFRONT — Homepage styles
   Ported from the Claude Design reference handoff.
   All sections that only appear on index.html live
   here. Shared primitives (.container, .eyebrow,
   .section__title, .bg-noise, .cursor-glow, .reveal,
   .btn--xl) are in css/components.css — we assume
   those load first.

   Section order mirrors the reference file:
     1. Hero
     2. Aria (Variant C only — 5-spoke radial)
     3. ROI calculator
     4. Dashboard showcase (pinned scrub)
     5. Mobile section
     6. Industries (our .ff-industries grid, restyled)
     7. Testimonials
     8. Final CTA card
     9. Tweaks panel (hidden in production)
   ================================================ */


/* ================================================
   1. HERO
   ================================================ */

.hero {
  position: relative;
  min-height: 100vh;
  padding: 140px 0 80px;
  display: grid;
  place-items: center;
  z-index: 2;
}
.hero__inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 32px;
  width: 100%;
  position: relative;
}
.hero__copy { text-align: center; max-width: 900px; margin: 0 auto; }

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px 6px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line-2);
  font-size: 12px;
  color: var(--ink-2);
  margin-bottom: 32px;
}
.hero__badge strong { color: var(--ink); font-weight: 600; }
.hero__badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--accent-dim);
  color: var(--accent);
  font-weight: 600;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.04em;
}
.hero__badge-pill::before {
  content: '';
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent);
  animation: pulse 1.6s infinite;
}

.hero__title {
  font-size: clamp(3rem, 7.5vw, 6.2rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 0.98;
  margin-bottom: 28px;
}
.hero__title .accent {
  font-style: italic;
  font-family: 'Instrument Serif', 'Sora', serif;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--accent);
  padding: 0 4px;
}
.hero__sub {
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 620px;
  margin: 0 auto 40px;
}
.hero__ctas {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 64px;
}

/* Trust row */
.hero__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  max-width: 920px;
  margin: 0 auto 80px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.hero__stat {
  padding: 28px 20px;
  text-align: center;
  border-right: 1px solid var(--line);
  position: relative;
}
.hero__stat:last-child { border-right: 0; }
.hero__stat-num {
  font-family: 'Sora', sans-serif;
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  background: linear-gradient(180deg, var(--ink), var(--ink-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 4px;
}
.hero__stat-label {
  font-size: 11.5px;
  font-family: 'JetBrains Mono', monospace;
  color: var(--ink-3);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Dashboard device (macbook-style chrome + slide screens)
   Scroll-driven parallax: starts small + tilted at hero-top, grows to
   flat/full-size over the first 50vh. JS drives transform directly —
   NO CSS transition here (would fight scroll updates and cause lag). */
.hero__device {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  aspect-ratio: 16 / 10;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--line-2);
  background: var(--bg-1);
  box-shadow:
    0 40px 120px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset,
    0 0 80px color-mix(in srgb, var(--accent) 10%, transparent);
  transform-origin: center center;
  transform: perspective(1600px) rotateX(15deg) scale(0.85);
  will-change: transform;
  backface-visibility: hidden;
}
.hero__device-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  background: rgba(11, 13, 17, 0.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  position: relative;
  z-index: 3;
}
.hero__device-dots { display: flex; gap: 6px; }
.hero__device-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--bg-3); }
.hero__device-dot:nth-child(1) { background: #ff5f57; }
.hero__device-dot:nth-child(2) { background: #febc2e; }
.hero__device-dot:nth-child(3) { background: #28c840; }
.hero__device-url {
  flex: 1;
  text-align: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--ink-3);
}
.hero__device-screens { position: relative; width: 100%; height: calc(100% - 44px); }
.hero__device-screen {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.5s var(--ease);
}
.hero__device-screen.is-active { opacity: 1; }
.hero__device-screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
}

.hero__device-caption {
  position: absolute;
  bottom: 24px;
  left: 24px;
  padding: 10px 16px;
  border-radius: 12px;
  background: rgba(11, 13, 17, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--line-2);
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 4;
}
.hero__device-caption-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--accent);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.hero__device-caption-desc { font-size: 13px; color: var(--ink-2); }
.hero__device-caption-sep { width: 1px; height: 16px; background: var(--line-2); }

.hero__device-dots-nav {
  position: absolute;
  bottom: 24px;
  right: 24px;
  display: flex;
  gap: 6px;
  z-index: 4;
}
.hero__device-dots-nav button {
  width: 20px; height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.15);
  border: 0;
  transition: background 0.3s, width 0.3s;
  cursor: pointer;
}
.hero__device-dots-nav button.is-active {
  background: var(--accent);
  width: 32px;
}

@media (prefers-reduced-motion: reduce) {
  /* Settle at final resting pose — no scroll-driven growth. */
  .hero__device { transform: perspective(1600px) rotateX(0deg) scale(1) !important; }
  .hero__badge-pill::before { animation: none; }
}


/* ================================================
   2. ARIA — shared orb + Variant C radial layout
   The central orb is the mount target for the real
   ElevenLabs voice widget (assets/voice/voice-hero.js).
   Click = start session; states drive spoke lighting
   + orb amplitude via CSS vars.
   ================================================ */

.aria {
  overflow: visible;   /* CRITICAL: ancestor overflow:hidden breaks anything
                          sticky we may want later. */
}

/* ---------- SHARED ORB (from reference) ---------- */

.orb {
  --s: var(--orb-size);
  position: relative;
  width: var(--s);
  height: var(--s);
  flex-shrink: 0;
  isolation: isolate;
  transform: translateZ(0);
  will-change: transform;
}

.orb__halo {
  position: absolute;
  inset: -40%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
    rgba(0, 212, 170, calc(0.22 * var(--orb-glow))) 0%,
    rgba(0, 212, 170, calc(0.10 * var(--orb-glow))) 30%,
    transparent 65%);
  filter: blur(calc(30px * var(--orb-glow)));
  animation: orbBreath calc(5s / var(--orb-pulse)) ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

.orb__conic {
  position: absolute;
  inset: 4%;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    rgba(0, 212, 170, 0)   0deg,
    rgba(0, 212, 170, 1)   30deg,
    rgba(110, 255, 220, 1) 70deg,
    rgba(0, 212, 170, 0.8) 110deg,
    rgba(0, 90, 72, 0.3)   170deg,
    rgba(0, 212, 170, 0)   220deg,
    rgba(0, 212, 170, 0.6) 290deg,
    rgba(0, 212, 170, 0)   360deg
  );
  -webkit-mask: radial-gradient(circle at center, transparent 58%, black 59%, black 78%, transparent 80%);
          mask: radial-gradient(circle at center, transparent 58%, black 59%, black 78%, transparent 80%);
  filter: blur(calc(3px * var(--orb-glow)));
  animation: orbSpin calc(16s / var(--orb-spin)) linear infinite;
  z-index: 2;
}
.orb__conic--slow {
  inset: 0;
  animation: orbSpinReverse calc(40s / var(--orb-spin)) linear infinite;
  opacity: 0.7;
  filter: blur(calc(6px * var(--orb-glow)));
  -webkit-mask: radial-gradient(circle at center, transparent 80%, black 82%, black 96%, transparent 100%);
          mask: radial-gradient(circle at center, transparent 80%, black 82%, black 96%, transparent 100%);
  background: conic-gradient(from 180deg,
    rgba(0, 212, 170, 0)   0deg,
    rgba(110, 255, 220, 0.8) 90deg,
    rgba(0, 212, 170, 0)   180deg,
    rgba(0, 212, 170, 0.5) 280deg,
    rgba(0, 212, 170, 0)   360deg);
}

.orb__core {
  position: absolute;
  inset: 22%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 25%, rgba(140, 240, 210, 0.38), transparent 28%),
    radial-gradient(circle at 72% 78%, rgba(0, 100, 82, 0.85), rgba(3, 14, 18, 0) 55%),
    radial-gradient(circle at 50% 50%, #0a1f22 0%, #051013 60%, #020608 100%);
  box-shadow:
    inset 0 0 0 1px rgba(0, 212, 170, 0.25),
    inset 0 -18px 40px rgba(0, 0, 0, 0.8),
    inset 0 -6px 30px rgba(0, 212, 170, 0.35),
    inset 0 22px 30px rgba(0, 0, 0, 0.55),
    0 0 calc(50px * var(--orb-glow)) rgba(0, 212, 170, 0.4),
    0 0 calc(120px * var(--orb-glow)) rgba(0, 212, 170, 0.25);
  animation: orbPulse calc(3.6s / var(--orb-pulse)) ease-in-out infinite;
  z-index: 3;
  transform-style: preserve-3d;
}
.orb__core::before {
  content: '';
  position: absolute;
  top: 10%; left: 22%;
  width: 40%; height: 22%;
  background: radial-gradient(ellipse at center,
    rgba(220, 255, 245, 0.55) 0%,
    rgba(150, 240, 210, 0.12) 50%,
    transparent 75%);
  border-radius: 50%;
  filter: blur(3px);
  mix-blend-mode: screen;
  pointer-events: none;
}
.orb__core::after {
  content: '';
  position: absolute;
  inset: 15%;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(0, 212, 170, 0.4)  0%,
    rgba(0, 212, 170, 0.15) 35%,
    transparent 65%);
  filter: blur(calc(8px * var(--orb-glow)));
  animation: orbShimmer calc(2.8s / var(--orb-pulse)) ease-in-out infinite;
  pointer-events: none;
}

.orb__ring {
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  box-shadow:
    inset 0 0 0 1px rgba(0, 212, 170, 0.5),
    inset 0 0 12px rgba(0, 212, 170, 0.35),
    0 0 18px rgba(0, 212, 170, 0.2);
  z-index: 4;
  pointer-events: none;
}
.orb__ring::after {
  content: '';
  position: absolute;
  inset: -8%;
  border-radius: 50%;
  border: 1px dashed rgba(0, 212, 170, 0.22);
  animation: orbSpinReverse calc(80s / var(--orb-spin)) linear infinite;
}

.orb__eq {
  position: absolute;
  inset: -8%;
  z-index: 4;
  pointer-events: none;
  animation: orbSpin calc(60s / var(--orb-spin)) linear infinite reverse;
}
.orb__eq-dot {
  position: absolute;
  top: 50%; left: 50%;
  width: 4px; height: 12px;
  border-radius: 2px;
  background: var(--accent);
  transform-origin: 50% calc(var(--s) / 2 + 8%);
  transform: translate(-50%, -50%) rotate(var(--a)) translateY(calc(var(--s) / -2 - 8%));
  box-shadow: 0 0 10px rgba(0, 212, 170, 0.6);
  opacity: 0.7;
  animation: eqPulse calc(1.6s / var(--orb-pulse)) ease-in-out infinite;
  animation-delay: var(--d);
}

/* Audio-reactive hook — home.js sets --amp on the orb */
.orb[data-reactive="1"] .orb__core { transform: scale(calc(1 + 0.06 * var(--amp, 0))); }
.orb[data-reactive="1"] .orb__halo { opacity: calc(0.6 + 0.4 * var(--amp, 0)); }

/* Voice-widget interaction affordance */
.orb.is-interactive { cursor: pointer; }
.orb.is-interactive:focus-visible { outline: 2px solid var(--accent); outline-offset: 10px; border-radius: 50%; }
.orb.is-speaking  { --amp: 0.85; }
.orb.is-listening { --amp: 0.45; }
.orb.is-connected .orb__ring { box-shadow: inset 0 0 0 1.5px rgba(0, 212, 170, 0.8), inset 0 0 16px rgba(0, 212, 170, 0.5), 0 0 32px rgba(0, 212, 170, 0.35); }

@keyframes orbBreath   { 0%,100% { transform: scale(1); opacity: 0.9; } 50% { transform: scale(1.08); opacity: 1; } }
@keyframes orbPulse    { 0%,100% { transform: scale(1); } 50% { transform: scale(1.035); } }
@keyframes orbShimmer  { 0%,100% { opacity: 0.7; transform: scale(0.9); } 50% { opacity: 1; transform: scale(1.05); } }
@keyframes orbSpin         { to { transform: rotate(360deg); } }
@keyframes orbSpinReverse  { to { transform: rotate(-360deg); } }
@keyframes eqPulse { 0%,100% { opacity: 0.35; height: 8px; } 50% { opacity: 1; height: 18px; } }

@media (prefers-reduced-motion: reduce) {
  .orb__halo, .orb__conic, .orb__core, .orb__eq, .orb__eq-dot,
  .orb__core::after, .orb__ring::after { animation: none !important; }
  .orb__core { transform: none !important; }
}


/* ---------- VARIANT C — RADIAL (5-spoke pentagon) ---------- */

.aria-c {
  padding: 120px 0;
  position: relative;
}
.aria-c__header {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 40px;
  padding: 0 40px;
}
.aria-c__header .eyebrow { margin-bottom: 16px; display: inline-flex; }
.aria-c__header h2 {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 3.6vw, 3.2rem);
  letter-spacing: -0.035em;
  line-height: 1.05;
  margin: 0 0 14px;
  font-weight: 600;
}
.aria-c__header h2 em {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--accent);
  font-weight: 400;
}
.aria-c__header p {
  color: var(--ink-2);
  font-size: 17px;
  margin: 0;
}

.aria-c__stage {
  position: relative;
  width: min(820px, 92vw);
  aspect-ratio: 1;
  margin: 0 auto;
}
.aria-c__orb-wrap {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
}
.aria-c__orb-wrap .orb { --s: min(34vw, 300px); }

.aria-c__svg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: visible;
}
.aria-c__line {
  stroke: rgba(0, 212, 170, 0.18);
  stroke-width: 1;
  stroke-dasharray: 3 5;
  fill: none;
}
.aria-c__line.is-active {
  stroke: var(--accent);
  stroke-width: 1.5;
  stroke-dasharray: none;
  filter: drop-shadow(0 0 6px rgba(0, 212, 170, 0.7));
  animation: linePulse 1.6s ease-in-out infinite;
}
@keyframes linePulse {
  0%, 100% { stroke-opacity: 0.6; }
  50%      { stroke-opacity: 1; }
}
.aria-c__orbit {
  fill: none;
  stroke: rgba(255, 255, 255, 0.05);
  stroke-width: 1;
  stroke-dasharray: 2 6;
}

.aria-c__node {
  position: absolute;
  top: 50%; left: 50%;
  width: 180px;
  transform: translate(-50%, -50%) translate(var(--nx), var(--ny));
  text-align: center;
  z-index: 2;
}
.aria-c__node-icon {
  width: 56px; height: 56px;
  margin: 0 auto 12px;
  border-radius: 16px;
  background: rgba(10, 14, 18, 0.9);
  border: 1px solid rgba(0, 212, 170, 0.2);
  display: grid;
  place-items: center;
  color: var(--accent);
  position: relative;
  transition: border-color .3s, box-shadow .3s, transform .3s;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.aria-c__node-icon svg {
  width: 24px; height: 24px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.aria-c__node.is-active .aria-c__node-icon {
  border-color: var(--accent);
  box-shadow: var(--ring-soft), var(--glow-teal);
  transform: scale(1.08);
}
.aria-c__node-title {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 4px;
  letter-spacing: -0.01em;
}
.aria-c__node-sub {
  font-size: 12px;
  color: var(--ink-3);
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Rotating orbit indicator dot */
.aria-c__orbit-dot {
  position: absolute;
  top: 50%; left: 50%;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 14px var(--accent);
  transform-origin: 50% 50%;
  animation: orbitSpin calc(28s / var(--orb-spin)) linear infinite;
}
@keyframes orbitSpin {
  from { transform: translate(-50%, -50%) rotate(0deg)   translateY(calc(-1 * min(410px, 46vw))) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg) translateY(calc(-1 * min(410px, 46vw))) rotate(-360deg); }
}

/* Hint below the orb */
.aria-c__hint {
  margin: 32px auto 0;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  max-width: 300px;
}
.aria-c__hint--active { color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .aria-c__orbit-dot,
  .aria-c__line.is-active { animation: none !important; }
}

@media (max-width: 760px) {
  /* Collapse to a vertical list on narrow screens — radial gets cramped */
  .aria-c__stage { aspect-ratio: auto; width: 100%; min-height: 760px; padding-top: 40px; }
  .aria-c__node { position: static; width: 100%; transform: none; margin: 20px auto; }
  .aria-c__svg { display: none; }
  .aria-c__orbit-dot { display: none; }
  .aria-c__orb-wrap { position: relative; top: 0; left: 0; transform: none; margin: 40px auto; }
}


/* ================================================
   3. ROI CALCULATOR
   ================================================ */

.roi { position: relative; }

.roi__card {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 0;
  background: linear-gradient(180deg, var(--bg-1), var(--bg));
  border: 1px solid var(--line-2);
  border-radius: 28px;
  overflow: hidden;
  position: relative;
}
.roi__card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 50% 40% at 20% 0%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 70%);
  pointer-events: none;
}
.roi__inputs {
  padding: 60px 56px;
  border-right: 1px solid var(--line);
  position: relative;
}
.roi__output {
  padding: 60px 56px;
  background: rgba(255, 255, 255, 0.015);
  position: relative;
}

.roi__field { margin-bottom: 36px; }
.roi__field-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 12px;
  gap: 20px;
}
.roi__field-label {
  font-size: 14px;
  color: var(--ink);
  font-weight: 500;
}
.roi__field-hint {
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--ink-3);
  letter-spacing: 0.04em;
  margin-top: 2px;
}
.roi__field-val {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.roi__slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  background: var(--bg-3);
  border-radius: 6px;
  outline: none;
  margin-top: 4px;
}
.roi__slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--accent);
  cursor: grab;
  box-shadow: 0 0 0 4px var(--bg), 0 0 0 5px var(--accent), 0 0 20px var(--accent-glow);
  transition: transform 0.15s;
}
.roi__slider::-webkit-slider-thumb:hover { transform: scale(1.1); }
.roi__slider::-moz-range-thumb {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--accent);
  cursor: grab;
  border: 0;
  box-shadow: 0 0 0 4px var(--bg), 0 0 0 5px var(--accent), 0 0 20px var(--accent-glow);
}

.roi__output-label {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.roi__output-big {
  font-family: var(--font-display);
  font-size: clamp(3rem, 6vw, 5rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 8px;
  font-variant-numeric: tabular-nums;
}
.roi__output-period {
  font-size: 14px;
  color: var(--ink-2);
  margin-bottom: 40px;
}

.roi__breakdown {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}
.roi__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
}
.roi__row-label { color: var(--ink-2); }
.roi__row-value {
  font-family: var(--font-mono);
  font-weight: 500;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.roi__row-value--accent { color: var(--accent); }

.roi__cta { margin-top: 36px; }
.roi__cta-copy { font-size: 13px; color: var(--ink-3); margin-top: 12px; }

@media (max-width: 1024px) {
  .roi__card { grid-template-columns: 1fr; }
  .roi__inputs { border-right: 0; border-bottom: 1px solid var(--line); }
}
@media (max-width: 640px) {
  .roi__inputs, .roi__output { padding: 40px 24px; }
}


/* ================================================
   4. DASHBOARD SHOWCASE (pinned scrub)
   ================================================ */

.showcase {
  position: relative;
  height: 400vh;   /* scroll distance the sticky stage travels through */
}
.showcase__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 0;
  overflow: hidden;
}
.showcase__rail {
  padding: 120px 0 80px 80px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  position: relative;
}
.showcase__rail::before {
  content: '';
  position: absolute;
  left: 80px; top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 280px;
  background: var(--line);
}
.showcase__rail-fill {
  position: absolute;
  left: 80px;
  top: calc(50% - 140px);
  width: 2px;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  transition: height 0.4s var(--ease-out);
  height: 0;
  box-shadow: 0 0 10px var(--accent-glow);
}
.showcase__item {
  padding: 14px 0 14px 32px;
  cursor: pointer;
  position: relative;
  transition: opacity 0.4s, transform 0.4s;
  opacity: 0.35;
}
.showcase__item.is-active { opacity: 1; }
.showcase__item::before {
  content: '';
  position: absolute;
  left: -4px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--line-2);
  transition: all 0.3s var(--ease);
}
.showcase__item.is-active::before {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 14px var(--accent);
}
.showcase__item-idx {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.1em;
  margin-bottom: 4px;
}
.showcase__item-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}
.showcase__item-desc {
  font-size: 13px;
  color: var(--ink-2);
  max-width: 280px;
}

.showcase__viewport {
  position: relative;
  display: grid;
  place-items: center;
  padding: 80px 80px 80px 40px;
}
.showcase__frame {
  position: relative;
  width: 100%;
  max-width: 1000px;
  aspect-ratio: 1000 / 600;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--line-2);
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
  background: #000;
}
.showcase__frame-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: rgba(11, 13, 17, 0.9);
  border-bottom: 1px solid var(--line);
  position: relative;
  z-index: 2;
}
.showcase__frame-bar span {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--bg-3);
}
.showcase__frame-bar span:nth-child(1) { background: #ff5f57; }
.showcase__frame-bar span:nth-child(2) { background: #febc2e; }
.showcase__frame-bar span:nth-child(3) { background: #28c840; }
.showcase__slides {
  position: relative;
  width: 100%;
  height: calc(100% - 36px);
}
.showcase__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.02);
  transition: opacity 0.6s var(--ease-out), transform 0.8s var(--ease-out);
}
.showcase__slide.is-active { opacity: 1; transform: scale(1); }
.showcase__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
}

@media (max-width: 1024px) {
  .showcase { height: auto; }
  .showcase__sticky { position: relative; height: auto; grid-template-columns: 1fr; }
  .showcase__rail { padding: 40px 32px; }
  .showcase__rail::before, .showcase__rail-fill { display: none; }
  .showcase__viewport { padding: 0 32px 40px; }
}


/* ================================================
   5. MOBILE SECTION
   ================================================ */

.mobile-sec {
  position: relative;
  background: var(--bg-1);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.mobile-sec__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.mobile-sec__texts { position: relative; }
.mobile-sec__text {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.5s var(--ease);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.mobile-sec__text.is-active {
  opacity: 1;
  position: relative;
  inset: auto;
}
.mobile-sec__text h2 {
  font-size: clamp(2rem, 3.6vw, 3rem);
  letter-spacing: -0.035em;
  margin-top: 12px;
  margin-bottom: 20px;
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.05;
}
.mobile-sec__text p {
  color: var(--ink-2);
  font-size: 17px;
  max-width: 440px;
  line-height: 1.55;
  margin-bottom: 28px;
}
.mobile-sec__feats {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mobile-sec__feat {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
  font-size: 14px;
  color: var(--ink);
}
.mobile-sec__feat-ico {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--accent-dim);
  color: var(--accent);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  font-weight: 700;
}
.mobile-sec__tabs {
  display: flex;
  gap: 6px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px;
  margin-bottom: 40px;
  width: fit-content;
}
.mobile-sec__tab {
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 12.5px;
  color: var(--ink-2);
  transition: color 0.2s, background 0.2s;
  font-weight: 500;
}
.mobile-sec__tab.is-active {
  background: var(--accent-dim);
  color: var(--accent);
}

.mobile-sec__device {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 640px;
}
.mobile-sec__phone {
  position: relative;
  width: 320px;
  aspect-ratio: 320 / 650;
  filter: drop-shadow(0 40px 80px rgba(0, 0, 0, 0.5));
}
.mobile-sec__screen {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.6s var(--ease), transform 0.8s var(--ease-out);
  transform: scale(0.96);
}
.mobile-sec__screen.is-active {
  opacity: 1;
  transform: scale(1);
}
.mobile-sec__screen img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.mobile-sec__halo {
  position: absolute;
  width: 520px; height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent-glow), transparent 60%);
  filter: blur(60px);
  pointer-events: none;
  z-index: -1;
}

@media (max-width: 1024px) {
  .mobile-sec__grid { grid-template-columns: 1fr; gap: 40px; }
  .mobile-sec__device { min-height: 560px; }
}


/* ================================================
   6. INDUSTRIES — our .ff-industries grid inside
   the reference's <section class="section industries">
   wrapper (Deviation 2).
   ================================================ */

.section.industries { padding: 120px 0; }

.ff-industries__head {
  text-align: center;
  margin-bottom: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.ff-industries__title {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4.5vw, 3.6rem);
  letter-spacing: -0.035em;
  line-height: 1.05;
  font-weight: 600;
  color: var(--ink);
  max-width: 22ch;
}
.ff-industries__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.ff-ind {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 3 / 4;
  cursor: pointer;
  border: 1px solid var(--line);
  transition: box-shadow 0.4s ease, border-color 0.4s ease, transform 0.4s ease;
  display: block;
  background: var(--bg-2);
  will-change: transform;
}
.ff-ind img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease, filter 0.6s ease;
  filter: brightness(0.42);
}
.ff-ind:hover img { transform: scale(1.08); filter: brightness(0.55); }
.ff-ind:hover {
  box-shadow: var(--shadow-lift), 0 0 0 1px var(--accent-dim);
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
  transform: translateY(-8px);
}

.ff-ind::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle 250px at var(--mouse-x, 50%) var(--mouse-y, 50%),
    var(--accent-dim) 0%, transparent 100%
  );
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: 3;
}
.ff-ind:hover::before { opacity: 1; }

.ff-ind__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 24px;
  z-index: 2;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.72) 0%, transparent 60%);
}
.ff-ind__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: auto;
  align-self: flex-start;
}
.ff-ind__badge--live { background: var(--accent-dim); color: var(--accent); }
.ff-ind__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent-glow);
  animation: ffDotPulse 2s ease infinite;
}
.ff-ind__badge--soon {
  background: rgba(255, 255, 255, 0.06);
  color: var(--ink-3);
  border: 1px solid var(--line-2);
}
.ff-ind h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}
.ff-ind p {
  font-size: 0.85rem;
  color: var(--ink-2);
  line-height: 1.5;
}
@keyframes ffDotPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

@media (max-width: 1024px) {
  .ff-industries__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .ff-industries__grid { grid-template-columns: 1fr; }
  .ff-ind { aspect-ratio: 4 / 3; }
}


/* ================================================
   7. TESTIMONIALS
   ================================================ */

.testis { position: relative; }
.testis__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.testi {
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.015);
  display: flex;
  flex-direction: column;
  gap: 20px;
  transition: transform 0.4s var(--ease-out), border-color 0.4s;
}
.testi:hover { transform: translateY(-4px); border-color: var(--line-2); }
.testi__quote {
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--ink);
  font-weight: 500;
  flex: 1;
}
.testi__quote::before { content: '"'; color: var(--accent); }
.testi__quote::after  { content: '"'; color: var(--accent); }
.testi__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.testi__avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  color: #000;
  flex-shrink: 0;
}
.testi__who-name { font-size: 14px; font-weight: 600; color: var(--ink); }
.testi__who-biz  { font-size: 12px; color: var(--ink-3); }
.testi__stars {
  color: var(--accent);
  font-size: 12px;
  letter-spacing: 2px;
  margin-left: auto;
}

@media (max-width: 1024px) {
  .testis__grid { grid-template-columns: 1fr; }
}


/* ================================================
   8. FINAL CTA CARD
   ================================================ */

.cta {
  position: relative;
  padding: 140px 0;
}
.cta__card {
  max-width: 960px;
  margin: 0 auto;
  padding: 80px 60px;
  border-radius: 32px;
  background:
    radial-gradient(ellipse 60% 60% at 50% 0%, color-mix(in srgb, var(--accent) 15%, transparent), transparent 70%),
    linear-gradient(180deg, var(--bg-1), var(--bg));
  border: 1px solid var(--line-2);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta__card::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse 60% 80% at 50% 100%, transparent, #000 70%);
  -webkit-mask-image: radial-gradient(ellipse 60% 80% at 50% 100%, transparent, #000 70%);
  pointer-events: none;
}
.cta h2 {
  font-size: clamp(2.2rem, 4.5vw, 3.4rem);
  letter-spacing: -0.035em;
  margin-bottom: 16px;
  position: relative;
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.05;
}
.cta p {
  color: var(--ink-2);
  font-size: 17px;
  max-width: 520px;
  margin: 0 auto 36px;
  position: relative;
}
.cta__ctas {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  position: relative;
  margin-bottom: 28px;
}
.cta__contact {
  font-size: 13px;
  color: var(--ink-3);
  position: relative;
}
.cta__contact a { color: var(--accent); }
.cta__contact a:hover { text-decoration: underline; }

@media (max-width: 640px) {
  .cta__card { padding: 60px 24px; border-radius: 24px; }
}


/* ================================================
   9. TWEAKS PANEL
   Hidden in prod. Remove this rule to re-enable the
   design Tweaks panel.
   ================================================ */
.tweaks { display: none; }