/* ==========================================================================
   Wiztra Chat — home page sections
   Depends on css/styles.css for tokens, buttons and animation utilities.
   ========================================================================== */

/* --------------------------------------------------------------------------
   FOLD 1 — HERO
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 100vh;
  padding-top: 80px;
  background: var(--background-50);
  overflow: hidden;
}

/* Decorative line / ring artwork */
.hero-decor {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.hero-decor-grid {
  position: absolute;
  top: 0; right: 0;
  width: 600px; height: 600px;
  opacity: 0.03;
}
.hero-decor-rings {
  position: absolute;
  bottom: 0; left: 0;
  width: 500px; height: 500px;
  opacity: 0.02;
}
.hero-decor svg { width: 100%; height: 100%; }
.hero-decor line,
.hero-decor circle {
  stroke: var(--foreground-900);
  stroke-width: 0.5;
  fill: none;
}

.hero-shell {
  position: relative;
  z-index: 10;
  padding-block: 48px;
}
@media (min-width: 768px)  { .hero-shell { padding-block: 64px; } }
@media (min-width: 1024px) { .hero-shell { padding-block: 80px; } }

.hero-layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
}
@media (min-width: 1024px) {
  .hero-layout { flex-direction: row; gap: 80px; }
}

.hero-copy {
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
@media (min-width: 1024px) { .hero-copy { width: 50%; } }

/* Headline + rotating phrase */
.hero-title {
  font-family: var(--font-heading);
  font-size: 54px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--foreground-950);
  margin-bottom: 24px;
}
@media (min-width: 768px) { .hero-title { font-size: 66px; } }

.hero-title-static { display: block; }

/* All phrases are present in the markup and stacked in one grid cell, so the
   copy stays crawlable. JS only moves the .is-active class. */
.hero-title-rotator {
  display: grid;
  color: var(--primary-500);
}
.rotator-item {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity .4s ease-in, transform .4s ease-in;
}
.rotator-item.is-active {
  opacity: 1;
  transform: translateY(0);
}

.hero-sub {
  font-size: 22px;
  line-height: 1.6;
  color: var(--foreground-600);
  max-width: 620px;
  margin-bottom: 40px;
}

/* Email capture */
.hero-form {
  width: 100%;
  max-width: 520px;
  margin-bottom: 12px;
}

.hero-field {
  display: flex;
  align-items: center;
  width: 100%;
  background: #fff;
  border: 1px solid var(--foreground-200);
  border-radius: 12px;
  padding: 6px 6px 6px 20px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.hero-field:focus-within {
  border-color: var(--primary-400);
  box-shadow: 0 0 0 2px var(--primary-100);
}

.hero-field-icon {
  font-size: 18px;
  color: var(--foreground-400);
  margin-right: 12px;
  flex-shrink: 0;
}

.hero-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: none;
  font-size: 15px;
  color: var(--foreground-900);
}
.hero-input::placeholder { color: var(--foreground-400); }

.hero-submit {
  flex-shrink: 0;
  padding: 10px 24px;
  font-size: 14px;
}

/* Assurance line */
.hero-assurance {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 14px;
  color: var(--foreground-500);
  margin-bottom: 40px;
}
.assurance-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.assurance-sep { color: var(--foreground-300); }

.dot-emerald {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--emerald-500);
  display: inline-block;
  flex-shrink: 0;
}

/* Mini stats */
.hero-stats {
  display: flex;
  align-items: center;
  gap: 24px;
}
@media (min-width: 768px) { .hero-stats { gap: 32px; } }

.hero-stat { display: flex; flex-direction: column; }

.hero-stat-value {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--foreground-950);
}
@media (min-width: 768px) { .hero-stat-value { font-size: 22px; } }

.hero-stat-label {
  font-size: 13px;
  line-height: 1.2;
  color: var(--foreground-500);
  margin-top: 2px;
}

/* --------------------------------------------------------------------------
   HERO VISUAL — floating workspace
   -------------------------------------------------------------------------- */

.hero-visual {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (min-width: 1024px) { .hero-visual { width: 50%; } }

.workspace {
  position: relative;
  width: 100%;
  max-width: 560px;
  margin-inline: auto;
}

.workspace-glow {
  position: absolute;
  inset: -48px;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 60% 50% at 50% 50%, oklch(0.54 0.22 290 / 0.10) 0%, transparent 70%);
  animation: pulseGlow 4s ease-in-out infinite;
}

/* Floating chips */
.ws-chip {
  position: absolute;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgb(255 255 255 / 0.8);
  backdrop-filter: blur(12px);
  border: 1px solid rgb(255 255 255 / 0.6);
  box-shadow: 0 4px 20px rgb(109 94 249 / 0.08), 0 1px 3px rgb(0 0 0 / 0.04);
}

.ws-chip-1 { top: -8px;     right: -40px; }
.ws-chip-2 { bottom: 20px;  right: -50px; }
.ws-chip-3 { bottom: -10px; left: -40px; }
.ws-chip-4 { top: 20px;     left: -50px; }

/* Chips overhang the card; pull them inside on small screens */
@media (max-width: 640px) {
  .ws-chip-1, .ws-chip-2 { right: -8px; }
  .ws-chip-3, .ws-chip-4 { left: -8px; }
}
@media (max-width: 420px) {
  .ws-chip { display: none; }
}

.ws-chip-icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: oklch(var(--primary-100c) / 0.8);
  color: var(--primary-500);
  font-size: 14px;
}
.ws-chip-copy { display: flex; flex-direction: column; gap: 2px; }
.ws-chip-title {
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--foreground-950);
  white-space: nowrap;
}
.ws-chip-sub {
  font-size: 11px;
  line-height: 1.2;
  color: var(--foreground-500);
  white-space: nowrap;
}

/* Browser window */
.ws-window {
  position: relative;
  z-index: 10;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid oklch(var(--background-200c) / 0.8);
  background: #fff;
  box-shadow: 0 20px 60px rgb(109 94 249 / 0.06), 0 4px 16px rgb(0 0 0 / 0.04);
}

.ws-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: oklch(var(--background-100c) / 0.8);
  border-bottom: 1px solid oklch(var(--background-200c) / 0.6);
}

.ws-dots { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.ws-dot { width: 12px; height: 12px; border-radius: 50%; display: block; }
.ws-dot-red     { background: rgb(248 113 113 / 0.8); }
.ws-dot-amber   { background: rgb(251 191 36 / 0.8); }
.ws-dot-emerald { background: rgb(52 211 153 / 0.8); }

.ws-urlbar {
  flex: 1;
  margin-inline: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 6px;
  background: var(--background-50);
  border: 1px solid oklch(var(--background-200c) / 0.5);
}
.ws-urlbar i { font-size: 10px; color: var(--emerald-500); }
.ws-url { font-size: 11px; color: var(--foreground-500); }

.ws-toolbar-icons {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  font-size: 12px;
  color: var(--foreground-400);
}

/* Chat header */
.ws-chat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: #fff;
  border-bottom: 1px solid oklch(var(--background-100c) / 0.8);
}
.ws-agent { display: flex; align-items: center; gap: 10px; }
.ws-agent-avatar {
  width: 28px; height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-500);
  color: #fff;
  font-size: 12px;
}
.ws-agent-meta { display: flex; flex-direction: column; }
.ws-agent-name {
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--foreground-950);
}
.ws-agent-status {
  font-size: 10px;
  color: var(--emerald-600);
  display: flex;
  align-items: center;
  gap: 4px;
}
.ws-agent-status .dot-emerald { width: 6px; height: 6px; }
.ws-info { font-size: 14px; color: var(--foreground-400); }

/* Messages */
.ws-messages {
  padding: 16px;
  background: #fff;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ws-row { display: flex; }
.ws-row-out { justify-content: flex-end; }
.ws-row-in  { justify-content: flex-start; }

.ws-bubble {
  padding: 10px 14px;
  font-size: 13px;
  line-height: 1.6;
  transition: opacity .3s ease;
}
.ws-bubble-customer {
  max-width: 75%;
  border-radius: 16px 16px 6px 16px;
  background: var(--primary-500);
  color: #fff;
  font-weight: 500;
}
.ws-bubble-ai {
  max-width: 85%;
  border-radius: 16px 16px 16px 6px;
  background: var(--background-100);
  color: var(--foreground-800);
}

/* Scenario stack — all four are in the markup, one visible at a time. */
.ws-scenarios { display: grid; }
.ws-scenario {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s ease;
}
.ws-scenario.is-active {
  opacity: 1;
  visibility: visible;
}

/* Status card */
.ws-status-wrap { padding: 0 16px 14px; }
.ws-status {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgb(236 253 245 / 0.8);
  border: 1px solid rgb(167 243 208 / 0.6);
}
.ws-status-check {
  width: 24px; height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--emerald-500);
  color: #fff;
  font-size: 12px;
}
.ws-status-label {
  font-size: 13px;
  font-weight: 600;
  color: #047857;
  white-space: nowrap;
  transition: opacity .3s ease;
}

/* --------------------------------------------------------------------------
   FOLD 2 — PROBLEMS vs SOLUTIONS (dark band)
   The React version injected a <style> tag with these keyframes from inside
   the component. They belong here.
   -------------------------------------------------------------------------- */

.pains {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, #1A2332 0%, #0F1729 50%, #1A2332 100%);
}

.pains-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 20% 50%, rgb(255 255 255 / 0.04) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgb(255 255 255 / 0.03) 0%, transparent 40%);
}

.pains-inner {
  position: relative;
  z-index: 10;
  max-width: 1200px;
  margin-inline: auto;
  padding: 80px 24px;
}
@media (min-width: 768px)  { .pains-inner { padding-inline: 40px; } }
@media (min-width: 1024px) { .pains-inner { padding-block: 112px; } }

.pains-head {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-bottom: 48px;
}
@media (min-width: 768px) {
  .pains-head {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }
}
@media (min-width: 1024px) { .pains-head { margin-bottom: 64px; } }

/* Both comparison states ship as markup, and their copy is different lengths
   (39 vs 25 characters in the heading, 75 vs 90 in the sub), so they wrap to
   different heights. With the toggle bottom-aligned beside them, switching mode
   used to move the toggle out from under the cursor — you clicked a button and
   it jumped. Stacking both variants into the same two grid rows makes the block
   always as tall as the taller state, so nothing shifts.

   The inactive variant keeps its `hidden` attribute (JS still owns that) but is
   held in the layout with visibility instead of display, so it continues to
   reserve its space. visibility:hidden also keeps it out of the accessibility
   tree and out of the tab order, so the semantics of `hidden` still hold. */
.pains-headings {
  min-width: 0;
  display: grid;
  grid-template-columns: 1fr;
}
.pains-headings .pains-title { grid-area: 1 / 1; }
.pains-headings .pains-sub   { grid-area: 2 / 1; }
.pains-headings > [hidden] {
  display: block;
  visibility: hidden;
  pointer-events: none;
}

.pains-title {
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #fff;
  margin-bottom: 12px;
}
@media (min-width: 768px)  { .pains-title { font-size: 36px; } }
@media (min-width: 1024px) { .pains-title { font-size: 42px; } }

.pains-sub {
  font-size: 15px;
  line-height: 1.7;
  color: rgb(255 255 255 / 0.5);
  max-width: 560px;
}
@media (min-width: 768px) { .pains-sub { font-size: 16px; } }

/* Without AI / With Wiztra toggle */
.mode-toggle {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 4px;
  flex-shrink: 0;
  background: rgb(255 255 255 / 0.08);
}

.mode-btn {
  padding: 10px 20px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  color: rgb(255 255 255 / 0.5);
  transition: background-color .2s ease, color .2s ease;
}
.mode-btn:hover { color: rgb(255 255 255 / 0.8); }
.mode-btn.is-active {
  background: #fff;
  color: var(--foreground-900);
}

/* Attention pulse on the "With Wiztra Chat" option.
   It runs only while that option is NOT selected — once the visitor switches to
   it the class combination stops matching and the pulse ends, so it draws the
   eye without nagging afterwards. Expressed as an expanding ring via box-shadow
   so it costs no layout and cannot shift the toggle.
   The global prefers-reduced-motion rule in css/styles.css halts the animation;
   the tinted background below still marks the button, so the affordance
   survives with motion turned off. */
.mode-btn-attract:not(.is-active) {
  position: relative;
  color: #fff;
  background: oklch(var(--primary-500c, 0.75 0.17 85) / 0.28);
  animation: modeAttract 2.4s ease-out infinite;
}
.mode-btn-attract:not(.is-active):hover {
  background: oklch(var(--primary-500c, 0.75 0.17 85) / 0.42);
}

@keyframes modeAttract {
  0%   { box-shadow: 0 0 0 0 oklch(var(--primary-500c, 0.75 0.17 85) / 0.55); }
  70%  { box-shadow: 0 0 0 10px oklch(var(--primary-500c, 0.75 0.17 85) / 0); }
  100% { box-shadow: 0 0 0 0 oklch(var(--primary-500c, 0.75 0.17 85) / 0); }
}

/* The labels ("Without Wiztra Chat" / "With Wiztra Chat") are long enough to
   overflow a 320px viewport at the default padding, so below 520px the toggle
   spans the full width and the two options split it evenly. */
@media (max-width: 520px) {
  .mode-toggle { width: 100%; }
  .mode-btn {
    flex: 1;
    padding-inline: 12px;
    font-size: 12px;
    text-align: center;
  }
}

/* Card grids */
.pains-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
.pains-grid[hidden] { display: none; }
@media (min-width: 768px)  { .pains-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .pains-grid { gap: 32px; } }

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.pain-card,
.fix-card {
  border-radius: 12px;
  background: rgb(255 255 255 / 0.06);
  border: 1px solid rgb(255 255 255 / 0.10);
  animation: fadeInUp .5s ease-out both;
}

.pain-card { border-left: 4px solid rgb(255 255 255 / 0.20); padding: 24px; }
@media (min-width: 1024px) { .pain-card { padding: 28px; } }

/* Stagger, declared once per position instead of inline per card */
.pains-grid > :nth-child(1) { animation-delay: 0ms; }
.pains-grid > :nth-child(2) { animation-delay: 100ms; }
.pains-grid > :nth-child(3) { animation-delay: 200ms; }

.pain-card-text {
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
  color: #fff;
}
@media (min-width: 768px) { .pain-card-text { font-size: 18px; } }

.fix-card {
  border-left: 4px solid var(--primary-500);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.fix-card-body { padding: 24px; flex: 1; }
@media (min-width: 1024px) { .fix-card-body { padding: 28px; } }

.fix-card-title {
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
  color: #fff;
  margin-bottom: 12px;
}
@media (min-width: 768px) { .fix-card-title { font-size: 18px; } }

.fix-card-desc {
  font-size: 14px;
  line-height: 1.7;
  color: rgb(255 255 255 / 0.55);
}

.fix-card-media {
  padding: 0 24px 24px;
}
@media (min-width: 1024px) { .fix-card-media { padding: 0 28px 28px; } }

.fix-card-media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 8px;
}

/* --------------------------------------------------------------------------
   FOLD 3 — AI WORKFORCE (400vh sticky scroll)

   In React every card colour was recomputed in JS from pulse state. Here the
   step carries data-state="pending|pulsing|done" and the palette lives in CSS.
   -------------------------------------------------------------------------- */

:root {
  --wf-gold: #E4AC00;
  --wf-gold-light: #FDF6E3;
  --wf-green: #15803D;
  --wf-green-bg: #F0FDF4;
  --wf-green-border: #BBF7D0;
  --wf-border: #E8E8E8;
  --wf-gray-text: #6B7280;
  --wf-dark-text: #111827;
}

.agents { position: relative; background: #fff; }

/* Sticky scroll-driven behaviour is a desktop affordance only. */
@media (min-width: 1024px) {
  .agents { height: 400vh; }
  .agents-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    background: #fff;
  }
}

.agents-sticky { padding-block: 64px; }
@media (min-width: 1024px) { .agents-sticky { padding-block: 0; } }

.agents-layout {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
@media (min-width: 1024px) {
  .agents-layout {
    height: 100%;
    flex-direction: row;
    align-items: center;
    gap: 48px;
  }
}
@media (min-width: 1280px) { .agents-layout { gap: 80px; } }

.agents-panel {
  display: flex;
  flex-direction: column;
}
/* This column is a flex container with the default `align-items: stretch`, so
   the eyebrow pill would run the full width without this. */
.agents-panel .pill-light { align-self: flex-start; }
@media (min-width: 1024px) {
  .agents-panel { width: 38%; flex-shrink: 0; }
}

.agents-title {
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--foreground-950);
  margin-bottom: 12px;
}
/* This heading lives in the 38% left column (~483px at a 1400px shell), and
   44px overflowed it. 38px keeps "Meet Your AI Workforce" on one line there.
   The alternative was widening .agents-panel, which would squeeze the workflow
   stage beside it. */
@media (min-width: 1280px) { .agents-title { font-size: 38px; } }

.agents-sub {
  font-size: 15px;
  line-height: 1.7;
  color: var(--foreground-500);
  margin-bottom: 28px;
}

/* ---- Agent tabs ---- */
.agent-tabs {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.agent-tab {
  width: 100%;
  text-align: left;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--background-200);
  transition: background-color .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.agent-tab.is-active {
  background: var(--primary-500);
  border-color: var(--primary-500);
  box-shadow: 0 4px 20px oklch(var(--primary-500c) / 0.33);
}

.agent-tab-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
}

.agent-tab-name {
  flex: 1;
  min-width: 0;
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--foreground-900);
  transition: color .3s ease;
}
.agent-tab.is-active .agent-tab-name { color: #fff; }

.agent-tab-chevron {
  width: 24px; height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 14px;
  color: var(--background-500);
  transition: color .3s ease, transform .3s ease;
}
.agent-tab.is-active .agent-tab-chevron {
  color: rgb(255 255 255 / 0.8);
}
/* Collapsed tabs point right, the open one points down */
.agent-tab:not(.is-active) .agent-tab-chevron { transform: rotate(-90deg); }

.agent-tab-body {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows .4s ease-out, opacity .4s ease-out;
}
.agent-tab.is-active .agent-tab-body {
  grid-template-rows: 1fr;
  opacity: 1;
}

.agent-tab-desc {
  overflow: hidden;
  display: block;
  padding: 0 20px 16px;
  font-size: 14px;
  line-height: 1.7;
  color: rgb(255 255 255 / 0.88);
}

/* ---- Progress dots ---- */
.agent-progress {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
}
.agent-progress-dots { display: inline-flex; align-items: center; gap: 8px; }

.agent-dot {
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--background-300);
  transition: width .4s ease, background-color .4s ease;
}
.agent-dot.is-active {
  width: 20px;
  background: var(--primary-500);
}
.agent-dot.is-done { background: oklch(var(--primary-500c) / 0.4); }

.agent-progress-hint {
  font-size: 10px;
  color: var(--foreground-400);
  margin-left: 4px;
}

/* ---- Workflow demo panels ---- */
.agents-demo {
  flex: 1;
  min-width: 0;
  display: grid;
}
@media (min-width: 1024px) { .agents-demo { height: 540px; } }

.wf {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--wf-border);
  box-shadow: 0 4px 24px rgb(0 0 0 / 0.06);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px) scale(.99);
  transition: opacity .28s ease-out, transform .28s ease-out;
}
.wf.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.wf-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--wf-border);
  background: #FAFAFA;
  flex-shrink: 0;
}
.wf-head-icon {
  width: 32px; height: 32px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--wf-gold);
  color: #fff;
  font-size: 14px;
}
.wf-head-name {
  flex: 1;
  font-size: 14px;
  font-weight: 700;
  color: var(--wf-dark-text);
}
.wf-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--wf-green-bg);
  border: 1px solid var(--wf-green-border);
  font-size: 9px;
  font-weight: 700;
  color: var(--wf-green);
  flex-shrink: 0;
}
.wf-live-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #22c55e;
  animation: pulseGlow 2s ease-in-out infinite;
}

.wf-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 20px;
}

.wf-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--wf-gold-light);
  border: 1px solid oklch(var(--primary-500c) / 0.3);
  margin-bottom: 16px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wf-gold);
}
.wf-badge-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--wf-gold);
}

/* ---- Steps ---- */
.wf-steps { display: flex; flex-direction: column; }

.wf-step {
  display: flex;
  align-items: stretch;
  gap: 12px;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity .4s ease, transform .4s ease;
}
.wf-step:not(:last-child) { margin-bottom: 8px; }
/* JS marks entrance; stagger comes from position */
.wf.is-active .wf-step { opacity: 1; transform: translateY(0); }
.wf.is-active .wf-step:nth-child(1) { transition-delay: 0ms; }
.wf.is-active .wf-step:nth-child(2) { transition-delay: 80ms; }
.wf.is-active .wf-step:nth-child(3) { transition-delay: 160ms; }
.wf.is-active .wf-step:nth-child(4) { transition-delay: 240ms; }
.wf.is-active .wf-step:nth-child(5) { transition-delay: 320ms; }

.wf-rail {
  position: relative;
  width: 24px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.wf-dot {
  position: relative;
  z-index: 1;
  width: 24px; height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: #F3F4F6;
  border: 2px solid var(--wf-border);
  transition: background-color .4s ease, border-color .4s ease, transform .4s ease, box-shadow .4s ease;
}
.wf-dot i {
  font-size: 9px;
  color: #fff;
  opacity: 0;
  transition: opacity .3s ease;
}

/* Connector line */
.wf-step:not(:last-child) .wf-rail::after {
  content: '';
  flex: 1;
  width: 2px;
  min-height: 8px;
  background: var(--wf-border);
  transition: background-color .4s ease;
}

@keyframes pulseDot {
  0%   { box-shadow: 0 0 0 0 oklch(var(--primary-500c) / 0.25); }
  50%  { box-shadow: 0 0 0 6px oklch(var(--primary-500c) / 0.06); }
  100% { box-shadow: 0 0 0 0 oklch(var(--primary-500c) / 0); }
}
@keyframes cardBreathe {
  0%   { box-shadow: 0 0 0 0 oklch(var(--primary-500c) / 0); }
  40%  { box-shadow: 0 3px 18px oklch(var(--primary-500c) / 0.15); }
  100% { box-shadow: 0 1px 6px oklch(var(--primary-500c) / 0.03); }
}

/* Pulsing (current) step */
.wf-step[data-state='pulsing'] .wf-dot {
  background: var(--wf-gold);
  border-color: var(--wf-gold);
  transform: scale(1.1);
  animation: pulseDot 1.2s ease-out;
}
/* Completed step */
.wf-step[data-state='done'] .wf-dot {
  background: var(--wf-green);
  border-color: var(--wf-green);
}
.wf-step[data-state='done'] .wf-dot i { opacity: 1; }
.wf-step[data-state='done'] .wf-rail::after { background: var(--wf-green); }

.wf-card {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--wf-border);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.03);
  transition: background-color .4s ease, border-color .4s ease, box-shadow .4s ease;
}

.wf-card-icon {
  width: 28px; height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--wf-gold-light);
  color: var(--wf-gold);
  font-size: 13px;
  transition: background-color .4s ease, color .4s ease;
}

.wf-card-copy { flex: 1; min-width: 0; }
.wf-card-title {
  display: block;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--wf-dark-text);
  transition: color .4s ease;
}
.wf-card-desc {
  display: block;
  font-size: 11px;
  line-height: 1.4;
  margin-top: 2px;
  color: var(--wf-gray-text);
  transition: color .4s ease;
}

/* Card palettes per style + state */
.wf-step[data-state='pulsing'][data-card='default'] .wf-card {
  background: var(--wf-gold-light);
  border-color: oklch(var(--primary-500c) / 0.31);
  animation: cardBreathe 1.2s ease-out;
}
.wf-step[data-state='pulsing'][data-card='highlight'] .wf-card {
  background: var(--wf-gold);
  border-color: var(--wf-gold);
  animation: cardBreathe 1.2s ease-out;
}
.wf-step[data-state='pulsing'][data-card='highlight'] .wf-card-title { color: #fff; }
.wf-step[data-state='pulsing'][data-card='highlight'] .wf-card-desc { color: rgb(255 255 255 / 0.85); }
.wf-step[data-state='pulsing'][data-card='highlight'] .wf-card-icon {
  background: rgb(255 255 255 / 0.2);
  color: #fff;
}
.wf-step[data-state='pulsing'][data-card='success'] .wf-card,
.wf-step[data-state='done'][data-card='success'] .wf-card {
  background: var(--wf-green-bg);
  border-color: var(--wf-green-border);
}

/* ---- Outcomes ---- */
.wf-outcomes {
  display: flex;
  gap: 12px;
  margin-top: 16px;
}

.wf-outcome {
  flex: 1;
  padding: 14px 12px;
  border-radius: 12px;
  text-align: center;
  opacity: 0;
  transform: translateY(10px) scale(.95);
  transition: opacity .4s ease, transform .4s ease;
}
.wf-outcome-green {
  background: var(--wf-green-bg);
  border: 1px solid var(--wf-green-border);
}
.wf-outcome-gold {
  background: var(--wf-gold-light);
  border: 1px solid oklch(var(--primary-500c) / 0.19);
}

/* Revealed once the last step has run */
.wf[data-outcomes='true'] .wf-outcome {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.wf[data-outcomes='true'] .wf-outcome:nth-child(2) { transition-delay: 150ms; }

.wf-outcome-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 2px;
}
.wf-outcome-label i { font-size: 12px; }
.wf-outcome-green .wf-outcome-label { color: var(--wf-green); }
.wf-outcome-gold  .wf-outcome-label { color: var(--wf-gold); }

.wf-outcome-sub {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 10px;
  color: var(--wf-gray-text);
}
.wf-outcome-sub i { font-size: 9px; }

/* ---- Warning ---- */
.wf-warning {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: 12px;
  background: #FEF2F2;
  border: 1px solid #FECACA;
  font-size: 11px;
  line-height: 1.6;
  color: #991B1B;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .4s ease, transform .4s ease;
}
.wf-warning i { font-size: 11px; color: #DC2626; flex-shrink: 0; margin-top: 2px; }
.wf[data-outcomes='true'] .wf-warning {
  opacity: 1;
  transform: translateY(0);
}

/* --------------------------------------------------------------------------
   FOLD 4 — CAPABILITIES (dark band)
   The React version positioned 10 particles with Math.random() inline styles,
   so the layout shifted on every render. Fixed positions live here instead.
   -------------------------------------------------------------------------- */

.caps {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, #1A2332 0%, #0F1729 50%, #1A2332 100%);
}

.caps-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 30% 50%, rgb(255 255 255 / 0.04) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 20%, rgb(255 255 255 / 0.03) 0%, transparent 40%);
}

.caps-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

@keyframes impactParticle {
  0%, 100% { transform: translateY(0) translateX(0); opacity: .35; }
  50%      { transform: translateY(-18px) translateX(6px); opacity: .9; }
}

.particle {
  position: absolute;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.12);
  animation: impactParticle 6s ease-in-out infinite;
}
.particle:nth-child(1)  { width: 3px; height: 3px; top: 12%; left:  8%; animation-duration: 5.2s; animation-delay: 0s; }
.particle:nth-child(2)  { width: 4px; height: 4px; top: 26%; left: 22%; animation-duration: 6.4s; animation-delay: .6s; }
.particle:nth-child(3)  { width: 2px; height: 2px; top: 44%; left: 14%; animation-duration: 7.1s; animation-delay: 1.2s; }
.particle:nth-child(4)  { width: 5px; height: 5px; top: 63%; left: 31%; animation-duration: 5.8s; animation-delay: 1.9s; }
.particle:nth-child(5)  { width: 3px; height: 3px; top: 81%; left: 18%; animation-duration: 8.3s; animation-delay: 2.4s; }
.particle:nth-child(6)  { width: 4px; height: 4px; top: 17%; left: 68%; animation-duration: 6.9s; animation-delay: .3s; }
.particle:nth-child(7)  { width: 2px; height: 2px; top: 35%; left: 82%; animation-duration: 5.5s; animation-delay: 1.5s; }
.particle:nth-child(8)  { width: 5px; height: 5px; top: 56%; left: 74%; animation-duration: 7.6s; animation-delay: 2.1s; }
.particle:nth-child(9)  { width: 3px; height: 3px; top: 72%; left: 89%; animation-duration: 6.1s; animation-delay: .9s; }
.particle:nth-child(10) { width: 4px; height: 4px; top: 90%; left: 61%; animation-duration: 8.8s; animation-delay: 3.1s; }

.caps-inner {
  position: relative;
  z-index: 10;
  max-width: 1200px;
  margin-inline: auto;
  padding: 80px 24px;
}
@media (min-width: 768px)  { .caps-inner { padding-inline: 40px; } }
@media (min-width: 1024px) { .caps-inner { padding: 120px 64px; } }

.caps-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  padding-bottom: 40px;
  margin-bottom: 48px;
}
@media (min-width: 1024px) { .caps-head { margin-bottom: 64px; } }

.caps-title {
  font-family: var(--font-heading);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #fff;
  /* 720px forced "Everything your business needs to grow" onto two lines at the
     44px desktop size. Widened to hold it on one. */
  max-width: 960px;
}
@media (min-width: 768px) { .caps-title { font-size: 44px; } }

.caps-sub {
  font-size: 15px;
  line-height: 1.7;
  color: rgb(255 255 255 / 0.55);
  max-width: 560px;
}

.caps-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 768px)  { .caps-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .caps-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; } }

.cap-card {
  position: relative;
  border-radius: 24px;
  padding: 24px;
  overflow: hidden;
  background: rgb(255 255 255 / 0.06);
  backdrop-filter: blur(16px);
  border: 1px solid rgb(255 255 255 / 0.08);
  box-shadow: 0 2px 8px rgb(0 0 0 / 0.1);
  transition: opacity .55s ease-out, transform .55s ease-out,
              border-color .3s ease, box-shadow .3s ease;
}

/* Hover lift + glow, previously computed in JS from hover state */
.cap-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 24px;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(ellipse at 50% 0%, rgb(255 255 255 / 0.08) 0%, transparent 50%);
  transition: opacity .5s ease;
}
.cap-card:hover {
  border-color: rgb(255 255 255 / 0.2);
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 12px 40px rgb(0 0 0 / 0.2), inset 0 0 0 1px rgb(255 255 255 / 0.1);
}
.cap-card:hover::before { opacity: 1; }

/* Entrance stagger */
.caps-grid > :nth-child(1) { transition-delay: 0ms; }
.caps-grid > :nth-child(2) { transition-delay: 80ms; }
.caps-grid > :nth-child(3) { transition-delay: 160ms; }
.caps-grid > :nth-child(4) { transition-delay: 240ms; }
.caps-grid > :nth-child(5) { transition-delay: 320ms; }
.caps-grid > :nth-child(6) { transition-delay: 400ms; }

.cap-card-icon {
  width: 44px; height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  margin-bottom: 20px;
  background: rgb(255 255 255 / 0.1);
  color: var(--primary-500);
  font-size: 18px;
  position: relative;
  z-index: 1;
  transition: transform .3s ease;
}
.cap-card:hover .cap-card-icon { transform: scale(1.05); }

.cap-card-title {
  position: relative;
  z-index: 1;
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  color: #fff;
  margin-bottom: 10px;
}

.cap-card-desc {
  position: relative;
  z-index: 1;
  font-size: 14px;
  line-height: 1.7;
  color: rgb(255 255 255 / 0.55);
}

/* --------------------------------------------------------------------------
   FOLD 5 — INDUSTRIES
   The 3-step mini sequence ran on a JS interval per hovered card. It is now a
   pure CSS animation driven by :hover, so no timers and no state.
   -------------------------------------------------------------------------- */

.industries {
  position: relative;
  overflow: hidden;
  background: #fff;
}

.industries-rule {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, oklch(var(--background-300c) / 0.4), transparent);
}

.industries-grid-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.025;
  background-image:
    linear-gradient(oklch(var(--primary-500c) / 0.5) 1px, transparent 1px),
    linear-gradient(90deg, oklch(var(--primary-500c) / 0.5) 1px, transparent 1px);
  background-size: 80px 80px;
}

.industries-orbs { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.industries-orb { position: absolute; border-radius: 50%; display: block; }
.industries-orb-1 {
  top: 15%; right: 8%;
  width: 400px; height: 400px;
  background: radial-gradient(circle, oklch(var(--primary-500c) / 0.05) 0%, transparent 70%);
}
.industries-orb-2 {
  bottom: 20%; left: 5%;
  width: 350px; height: 350px;
  background: radial-gradient(circle, oklch(var(--primary-500c) / 0.04) 0%, transparent 65%);
}

.industries-inner {
  position: relative;
  z-index: 10;
  max-width: 1380px;
  margin-inline: auto;
  padding: 96px 24px;
}
@media (min-width: 768px)  { .industries-inner { padding-inline: 40px; } }
@media (min-width: 1024px) { .industries-inner { padding: 140px 64px; } }

.industries-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 56px;
}
@media (min-width: 1024px) { .industries-head { margin-bottom: 80px; } }

.pill-light-lg {
  padding: 8px 16px;
  margin-bottom: 24px;
  border-color: oklch(var(--primary-200c) / 0.6);
  background: oklch(var(--primary-50c) / 0.8);
}
.pill-light-lg i { font-size: 14px; }
.pill-light-lg span {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.industries-title {
  font-family: var(--font-heading);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--foreground-950);
  max-width: 720px;
  margin-bottom: 12px;
}
@media (min-width: 768px) { .industries-title { font-size: 44px; } }

.industries-sub {
  font-size: 15px;
  line-height: 1.7;
  color: var(--foreground-500);
  max-width: 600px;
}

/* ---- Carousel ---- */
.industries-carousel {
  position: relative;
  border-radius: 40px;
  padding: 24px;
  margin-bottom: 64px;
  background: rgb(255 255 255 / 0.7);
  backdrop-filter: blur(8px);
  border: 1px solid oklch(0.92 0.01 270 / 0.4);
}
@media (min-width: 768px)  { .industries-carousel { padding: 32px; } }
@media (min-width: 1024px) { .industries-carousel { padding: 40px; } }

/* Native scroll-snap: the carousel still works with JS disabled. */
.industries-track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.industries-track::-webkit-scrollbar { display: none; }

.industry-card {
  flex: 0 0 100%;
  scroll-snap-align: start;
  transition: transform .5s ease-out;
}
@media (min-width: 640px)  { .industry-card { flex-basis: calc(50% - 8px); } }
@media (min-width: 1024px) { .industry-card { flex-basis: calc(33.333% - 11px); } }

.industry-card:hover { transform: translateY(-6px) scale(1.02); }

.industry-card-inner {
  position: relative;
  height: 100%;
  border-radius: 28px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: rgb(255 255 255 / 0.85);
  backdrop-filter: blur(12px);
  border: 1px solid rgb(255 255 255 / 0.6);
  box-shadow: 0 2px 12px rgb(0 0 0 / 0.03);
  transition: border-color .4s ease, box-shadow .4s ease;
}
@media (min-width: 768px) { .industry-card-inner { padding: 28px; } }

.industry-card-inner::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 28px;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(ellipse at 40% 20%, oklch(var(--primary-500c) / 0.08) 0%, transparent 60%);
  transition: opacity .5s ease;
}
.industry-card:hover .industry-card-inner {
  border-color: oklch(var(--primary-500c) / 0.35);
  box-shadow: 0 16px 48px oklch(var(--primary-500c) / 0.12), 0 4px 16px rgb(0 0 0 / 0.04);
}
.industry-card:hover .industry-card-inner::before { opacity: 1; }

.industry-card-head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.industry-card-icon {
  width: 44px; height: 44px;
  border-radius: 16px;
  background: var(--primary-50);
  color: var(--primary-500);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 20px;
}
.industry-card-title {
  font-family: var(--font-heading);
  font-size: 19px;
  font-weight: 700;
  color: var(--foreground-950);
}

/* ---- Mini step sequence (CSS-only) ---- */
.mini-steps {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
  min-height: 90px;
}

.mini-step {
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0.35;
  transition: opacity .5s ease;
}

.mini-step-icon {
  width: 28px; height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 12px;
  background: oklch(var(--background-200c) / 0.7);
  color: var(--foreground-400);
  transition: background-color .4s ease, color .4s ease, transform .4s ease;
}

.mini-step-text {
  font-size: 11px;
  line-height: 1.3;
  color: var(--foreground-500);
  transition: color .4s ease;
}

/* On hover each step lights up in turn, looping every 5.4s */
@keyframes miniStepCycle {
  0%,   3%  { opacity: .35; }
  6%,  30%  { opacity: 1; }
  100%      { opacity: 1; }
}
@keyframes miniStepIcon {
  0%,   3%  { background: oklch(var(--background-200c) / 0.7); color: var(--foreground-400); transform: scale(1); }
  6%,  28%  { background: var(--primary-500); color: #fff; transform: scale(1.1); }
  33%, 100% { background: var(--primary-100); color: var(--primary-500); transform: scale(1); }
}
@keyframes miniStepText {
  0%,   3%  { color: var(--foreground-500); font-weight: 400; }
  6%,  28%  { color: var(--foreground-900); font-weight: 500; }
  33%, 100% { color: var(--foreground-500); font-weight: 400; }
}

.industry-card:hover .mini-step {
  animation: miniStepCycle 5.4s linear infinite;
}
.industry-card:hover .mini-step-icon {
  animation: miniStepIcon 5.4s linear infinite;
}
.industry-card:hover .mini-step-text {
  animation: miniStepText 5.4s linear infinite;
}
.industry-card:hover .mini-step:nth-child(2),
.industry-card:hover .mini-step:nth-child(2) .mini-step-icon,
.industry-card:hover .mini-step:nth-child(2) .mini-step-text { animation-delay: 1.8s; }
.industry-card:hover .mini-step:nth-child(3),
.industry-card:hover .mini-step:nth-child(3) .mini-step-icon,
.industry-card:hover .mini-step:nth-child(3) .mini-step-text { animation-delay: 3.6s; }

/* ---- Card copy ---- */
.industry-impact {
  position: relative;
  z-index: 1;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--foreground-900);
  margin-bottom: 8px;
}
.industry-desc {
  position: relative;
  z-index: 1;
  flex: 1;
  font-size: 13px;
  line-height: 1.7;
  color: var(--foreground-600);
  margin-bottom: 16px;
}

.industry-metric {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  padding: 6px 12px;
  border-radius: 999px;
  margin-bottom: 12px;
  background: oklch(var(--primary-500c) / 0.07);
  color: oklch(var(--primary-700c));
}
.industry-metric i { font-size: 12px; }
.industry-metric span { font-size: 11px; font-weight: 600; white-space: nowrap; }

/* CTA + trial button reveal on hover */
.industry-cta {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: oklch(var(--primary-700c));
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity .4s ease, transform .4s ease;
}
.industry-cta i { font-size: 12px; transition: transform .3s ease; }
.industry-card:hover .industry-cta { opacity: 1; transform: translateX(0); }
.industry-card:hover .industry-cta i { transform: translateX(4px); }

.industry-trial {
  position: relative;
  z-index: 1;
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 10px 16px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  background: oklch(var(--primary-500c) / 0.1);
  color: oklch(var(--primary-800c));
  border: 1px solid oklch(var(--primary-500c) / 0.25);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .4s ease, transform .4s ease,
              background-color .3s ease, border-color .3s ease;
}
.industry-card:hover .industry-trial { opacity: 1; transform: translateY(0); }
.industry-trial:hover {
  background: oklch(var(--primary-500c) / 0.18);
  border-color: oklch(var(--primary-500c) / 0.4);
}
/* Keep it reachable by keyboard even though it is hover-revealed */
.industry-trial:focus-visible { opacity: 1; transform: translateY(0); }

/* ---- Arrows + dots ---- */
.industries-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  width: 40px; height: 40px;
  border-radius: 12px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--foreground-700);
  border: 1px solid oklch(0.9 0.01 270 / 0.6);
  box-shadow: 0 2px 8px rgb(0 0 0 / 0.04);
  transition: background-color .2s ease, color .2s ease;
}
.industries-arrow:hover { background: var(--background-100); color: var(--primary-600); }
.industries-arrow-prev { left: 12px; }
.industries-arrow-next { right: 12px; }
@media (min-width: 1024px) {
  .industries-arrow-prev { left: 16px; }
  .industries-arrow-next { right: 16px; }
}

.industries-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.industry-dot {
  width: 8px; height: 8px;
  border-radius: 999px;
  background: oklch(var(--primary-500c) / 0.2);
  transition: width .3s ease, background-color .3s ease;
}
.industry-dot.is-active {
  width: 24px;
  background: oklch(var(--primary-500c) / 0.8);
}

/* Scenario dots */
.ws-nav {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
}
.ws-nav-dot {
  width: 8px; height: 8px;
  border-radius: 999px;
  background: var(--background-300);
  transition: background-color .3s ease, width .3s ease;
}
.ws-nav-dot:hover { background: var(--primary-300); }
.ws-nav-dot.is-active {
  width: 24px;
  background: var(--primary-500);
}

/* --------------------------------------------------------------------------
   FOLD 6 — BUSINESS IMPACT (dark band)

   React recomputed card tilt, glass reflection, bar heights and bar opacity in
   JS on every mouse move. Here the cursor position is published as two custom
   properties and every rule that uses them lives in CSS.
   -------------------------------------------------------------------------- */

@keyframes gradientShift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

.impact {
  position: relative;
  min-height: 900px;
  overflow: hidden;
  background: linear-gradient(160deg, #1A2332 0%, #0F1729 50%, #1A2332 100%);
  background-size: 200% 200%;
  animation: gradientShift 8s ease-in-out infinite;
}

.impact-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 20% 50%, rgb(255 255 255 / 0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgb(255 255 255 / 0.04) 0%, transparent 40%);
}

.impact-wire {
  position: absolute;
  right: 0;
  top: 15%;
  width: 500px;
  height: 600px;
  pointer-events: none;
  opacity: 0.04;
}
.impact-wire svg { width: 100%; height: 100%; }
.impact-wire rect { fill: #fff; }
.impact-wire line { stroke: #fff; stroke-width: 1.5; }
.impact-wire-ring {
  fill: none;
  stroke: #fff;
  stroke-width: 1;
  stroke-dasharray: 4 4;
}

.impact-particles .particle { background: rgb(255 255 255 / 0.15); }

.impact-inner {
  position: relative;
  z-index: 10;
  max-width: 1360px;
  margin-inline: auto;
  padding: 96px 24px;
}
@media (min-width: 768px)  { .impact-inner { padding-inline: 40px; } }
@media (min-width: 1024px) { .impact-inner { padding: 112px 64px; } }

.impact-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 64px;
}
@media (min-width: 1024px) { .impact-head { margin-bottom: 80px; } }

.pill-dark-lg {
  padding: 8px 16px;
  margin-bottom: 24px;
}
.pill-dark-lg i { font-size: 14px; color: #fff; }
.pill-dark-lg span {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.05em;
}

.impact-title {
  font-family: var(--font-heading);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #fff;
  /* Was 720px, which wrapped "Real results from every conversation". */
  max-width: 960px;
  margin-bottom: 12px;
}
@media (min-width: 768px) { .impact-title { font-size: 44px; } }

.impact-sub {
  font-size: 15px;
  line-height: 1.7;
  color: rgb(255 255 255 / 0.55);
  max-width: 600px;
}

/* ---- KPI cards ---- */
.kpi-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: 64px;
}
@media (min-width: 768px)  { .kpi-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } }
@media (min-width: 1024px) { .kpi-grid { grid-template-columns: repeat(3, 1fr); } }

.kpi-card {
  position: relative;
  border-radius: 24px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: rgb(255 255 255 / 0.08);
  backdrop-filter: blur(16px);
  border: 1px solid rgb(255 255 255 / 0.12);
  box-shadow: 0 2px 8px rgb(0 0 0 / 0.08);
  transition: opacity .55s ease-out, transform .55s ease-out,
              border-color .3s ease, box-shadow .3s ease;
}
@media (min-width: 768px) { .kpi-card { padding: 28px; } }

.kpi-grid > :nth-child(1) { transition-delay: 0ms; }
.kpi-grid > :nth-child(2) { transition-delay: 100ms; }
.kpi-grid > :nth-child(3) { transition-delay: 200ms; }
.kpi-grid > :nth-child(4) { transition-delay: 300ms; }
.kpi-grid > :nth-child(5) { transition-delay: 400ms; }
.kpi-grid > :nth-child(6) { transition-delay: 500ms; }

/* Cursor-following reflection. --mx/--my are published by js/home.js. */
.kpi-sheen {
  position: absolute;
  inset: 0;
  border-radius: 24px;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(ellipse at var(--mx, 50%) var(--my, 50%), rgb(255 255 255 / 0.10) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 30%, oklch(var(--primary-400c) / 0.15) 0%, transparent 60%);
  transition: opacity .4s ease;
}
.kpi-card:hover {
  border-color: rgb(255 255 255 / 0.2);
  box-shadow: 0 12px 40px rgb(0 0 0 / 0.15), inset 0 0 0 1px rgb(255 255 255 / 0.15);
  transform:
    perspective(800px)
    rotateX(calc((var(--my-raw, 50) - 50) * 0.03deg))
    rotateY(calc((var(--mx-raw, 50) - 50) * -0.03deg));
}
.kpi-card:hover .kpi-sheen { opacity: .6; }

.kpi-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.kpi-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 12px;
}

.kpi-value {
  display: block;
  font-family: var(--font-heading);
  font-size: 42px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #fff;
}
@media (min-width: 768px) { .kpi-value { font-size: 48px; } }

.kpi-trend {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  color: #4ade80;
}
.kpi-trend i { font-size: 12px; }

.kpi-icon {
  width: 36px; height: 36px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgb(255 255 255 / 0.1);
  color: rgb(255 255 255 / 0.7);
  font-size: 16px;
}

/* ---- Mini bar chart ---- */
.mini-chart {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 36px;
  margin-bottom: 12px;
}

.mini-bar {
  flex: 1;
  height: 0;
  border-radius: 2px 2px 0 0;
  background: oklch(var(--primary-300c) / var(--bar-o, .5));
  transition: height .4s ease-out;
}
/* Bars grow once the card scrolls into view */
.kpi-card.is-visible .mini-bar { height: var(--bar-h, 0%); }
.kpi-card.is-visible .mini-bar:nth-child(1) { transition-delay: 0ms; }
.kpi-card.is-visible .mini-bar:nth-child(2) { transition-delay: 80ms; }
.kpi-card.is-visible .mini-bar:nth-child(3) { transition-delay: 160ms; }
.kpi-card.is-visible .mini-bar:nth-child(4) { transition-delay: 240ms; }
.kpi-card.is-visible .mini-bar:nth-child(5) { transition-delay: 320ms; }
.kpi-card.is-visible .mini-bar:nth-child(6) { transition-delay: 400ms; }
.kpi-card.is-visible .mini-bar:nth-child(7) { transition-delay: 480ms; }
.kpi-card.is-visible .mini-bar:nth-child(8) { transition-delay: 560ms; }

.kpi-label {
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 6px;
}

.kpi-desc {
  flex: 1;
  font-size: 13px;
  line-height: 1.7;
  color: rgb(255 255 255 / 0.6);
  margin-bottom: 8px;
}

/* Hover insight — collapsed via grid rows, no max-height guesswork */
.kpi-insight {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  font-size: 12px;
  line-height: 1.4;
  font-style: italic;
  color: rgb(255 255 255 / 0.45);
  overflow: hidden;
  transition: grid-template-rows .4s ease, opacity .4s ease;
}
.kpi-card:hover .kpi-insight {
  grid-template-rows: 1fr;
  opacity: 1;
}

/* ---- Activity marquee ---- */
.ribbon {
  position: relative;
  overflow: hidden;
  padding-block: 16px;
  margin-top: 48px;
  border-top: 1px solid rgb(255 255 255 / 0.06);
  border-bottom: 1px solid rgb(255 255 255 / 0.06);
}

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.ribbon-track {
  display: flex;
  gap: 24px;
  white-space: nowrap;
  width: max-content;
  animation: marquee 30s linear infinite;
}
.ribbon:hover .ribbon-track { animation-play-state: paused; }

.ribbon-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  color: rgb(255 255 255 / 0.25);
}
.ribbon-item i { font-size: 10px; }

/* Mini-chart bar heights — generated so chart data needs no inline styles */
.bar-0 { --bar-h: 0%; --bar-o: 0.300; }
.bar-1 { --bar-h: 1%; --bar-o: 0.305; }
.bar-2 { --bar-h: 2%; --bar-o: 0.310; }
.bar-3 { --bar-h: 3%; --bar-o: 0.315; }
.bar-4 { --bar-h: 4%; --bar-o: 0.320; }
.bar-5 { --bar-h: 5%; --bar-o: 0.325; }
.bar-6 { --bar-h: 6%; --bar-o: 0.330; }
.bar-7 { --bar-h: 7%; --bar-o: 0.335; }
.bar-8 { --bar-h: 8%; --bar-o: 0.340; }
.bar-9 { --bar-h: 9%; --bar-o: 0.345; }
.bar-10 { --bar-h: 10%; --bar-o: 0.350; }
.bar-11 { --bar-h: 11%; --bar-o: 0.355; }
.bar-12 { --bar-h: 12%; --bar-o: 0.360; }
.bar-13 { --bar-h: 13%; --bar-o: 0.365; }
.bar-14 { --bar-h: 14%; --bar-o: 0.370; }
.bar-15 { --bar-h: 15%; --bar-o: 0.375; }
.bar-16 { --bar-h: 16%; --bar-o: 0.380; }
.bar-17 { --bar-h: 17%; --bar-o: 0.385; }
.bar-18 { --bar-h: 18%; --bar-o: 0.390; }
.bar-19 { --bar-h: 19%; --bar-o: 0.395; }
.bar-20 { --bar-h: 20%; --bar-o: 0.400; }
.bar-21 { --bar-h: 21%; --bar-o: 0.405; }
.bar-22 { --bar-h: 22%; --bar-o: 0.410; }
.bar-23 { --bar-h: 23%; --bar-o: 0.415; }
.bar-24 { --bar-h: 24%; --bar-o: 0.420; }
.bar-25 { --bar-h: 25%; --bar-o: 0.425; }
.bar-26 { --bar-h: 26%; --bar-o: 0.430; }
.bar-27 { --bar-h: 27%; --bar-o: 0.435; }
.bar-28 { --bar-h: 28%; --bar-o: 0.440; }
.bar-29 { --bar-h: 29%; --bar-o: 0.445; }
.bar-30 { --bar-h: 30%; --bar-o: 0.450; }
.bar-31 { --bar-h: 31%; --bar-o: 0.455; }
.bar-32 { --bar-h: 32%; --bar-o: 0.460; }
.bar-33 { --bar-h: 33%; --bar-o: 0.465; }
.bar-34 { --bar-h: 34%; --bar-o: 0.470; }
.bar-35 { --bar-h: 35%; --bar-o: 0.475; }
.bar-36 { --bar-h: 36%; --bar-o: 0.480; }
.bar-37 { --bar-h: 37%; --bar-o: 0.485; }
.bar-38 { --bar-h: 38%; --bar-o: 0.490; }
.bar-39 { --bar-h: 39%; --bar-o: 0.495; }
.bar-40 { --bar-h: 40%; --bar-o: 0.500; }
.bar-41 { --bar-h: 41%; --bar-o: 0.505; }
.bar-42 { --bar-h: 42%; --bar-o: 0.510; }
.bar-43 { --bar-h: 43%; --bar-o: 0.515; }
.bar-44 { --bar-h: 44%; --bar-o: 0.520; }
.bar-45 { --bar-h: 45%; --bar-o: 0.525; }
.bar-46 { --bar-h: 46%; --bar-o: 0.530; }
.bar-47 { --bar-h: 47%; --bar-o: 0.535; }
.bar-48 { --bar-h: 48%; --bar-o: 0.540; }
.bar-49 { --bar-h: 49%; --bar-o: 0.545; }
.bar-50 { --bar-h: 50%; --bar-o: 0.550; }
.bar-51 { --bar-h: 51%; --bar-o: 0.555; }
.bar-52 { --bar-h: 52%; --bar-o: 0.560; }
.bar-53 { --bar-h: 53%; --bar-o: 0.565; }
.bar-54 { --bar-h: 54%; --bar-o: 0.570; }
.bar-55 { --bar-h: 55%; --bar-o: 0.575; }
.bar-56 { --bar-h: 56%; --bar-o: 0.580; }
.bar-57 { --bar-h: 57%; --bar-o: 0.585; }
.bar-58 { --bar-h: 58%; --bar-o: 0.590; }
.bar-59 { --bar-h: 59%; --bar-o: 0.595; }
.bar-60 { --bar-h: 60%; --bar-o: 0.600; }
.bar-61 { --bar-h: 61%; --bar-o: 0.605; }
.bar-62 { --bar-h: 62%; --bar-o: 0.610; }
.bar-63 { --bar-h: 63%; --bar-o: 0.615; }
.bar-64 { --bar-h: 64%; --bar-o: 0.620; }
.bar-65 { --bar-h: 65%; --bar-o: 0.625; }
.bar-66 { --bar-h: 66%; --bar-o: 0.630; }
.bar-67 { --bar-h: 67%; --bar-o: 0.635; }
.bar-68 { --bar-h: 68%; --bar-o: 0.640; }
.bar-69 { --bar-h: 69%; --bar-o: 0.645; }
.bar-70 { --bar-h: 70%; --bar-o: 0.650; }
.bar-71 { --bar-h: 71%; --bar-o: 0.655; }
.bar-72 { --bar-h: 72%; --bar-o: 0.660; }
.bar-73 { --bar-h: 73%; --bar-o: 0.665; }
.bar-74 { --bar-h: 74%; --bar-o: 0.670; }
.bar-75 { --bar-h: 75%; --bar-o: 0.675; }
.bar-76 { --bar-h: 76%; --bar-o: 0.680; }
.bar-77 { --bar-h: 77%; --bar-o: 0.685; }
.bar-78 { --bar-h: 78%; --bar-o: 0.690; }
.bar-79 { --bar-h: 79%; --bar-o: 0.695; }
.bar-80 { --bar-h: 80%; --bar-o: 0.700; }
.bar-81 { --bar-h: 81%; --bar-o: 0.705; }
.bar-82 { --bar-h: 82%; --bar-o: 0.710; }
.bar-83 { --bar-h: 83%; --bar-o: 0.715; }
.bar-84 { --bar-h: 84%; --bar-o: 0.720; }
.bar-85 { --bar-h: 85%; --bar-o: 0.725; }
.bar-86 { --bar-h: 86%; --bar-o: 0.730; }
.bar-87 { --bar-h: 87%; --bar-o: 0.735; }
.bar-88 { --bar-h: 88%; --bar-o: 0.740; }
.bar-89 { --bar-h: 89%; --bar-o: 0.745; }
.bar-90 { --bar-h: 90%; --bar-o: 0.750; }
.bar-91 { --bar-h: 91%; --bar-o: 0.755; }
.bar-92 { --bar-h: 92%; --bar-o: 0.760; }
.bar-93 { --bar-h: 93%; --bar-o: 0.765; }
.bar-94 { --bar-h: 94%; --bar-o: 0.770; }
.bar-95 { --bar-h: 95%; --bar-o: 0.775; }
.bar-96 { --bar-h: 96%; --bar-o: 0.780; }
.bar-97 { --bar-h: 97%; --bar-o: 0.785; }
.bar-98 { --bar-h: 98%; --bar-o: 0.790; }
.bar-99 { --bar-h: 99%; --bar-o: 0.795; }
.bar-100 { --bar-h: 100%; --bar-o: 0.800; }

/* --------------------------------------------------------------------------
   FOLD 7 — WHY WIZTRA
   -------------------------------------------------------------------------- */

.why {
  position: relative;
  overflow: hidden;
  background: var(--background-50);
}

.why-bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.why-grid {
  position: absolute;
  inset: 0;
  opacity: 0.015;
  background-image:
    linear-gradient(oklch(var(--primary-500c) / 0.4) 1px, transparent 1px),
    linear-gradient(90deg, oklch(var(--primary-500c) / 0.4) 1px, transparent 1px);
  background-size: 80px 80px;
}
.why-orb { position: absolute; border-radius: 50%; display: block; }
.why-orb-1 {
  top: 20%; right: 10%;
  width: 500px; height: 500px;
  background: radial-gradient(circle, oklch(var(--primary-500c) / 0.04) 0%, transparent 60%);
}
.why-orb-2 {
  bottom: 10%; left: 5%;
  width: 400px; height: 400px;
  background: radial-gradient(circle, oklch(var(--primary-500c) / 0.03) 0%, transparent 55%);
}

.why-inner {
  position: relative;
  z-index: 10;
  max-width: 1280px;
  margin-inline: auto;
  padding: 96px 24px;
}
@media (min-width: 768px)  { .why-inner { padding-inline: 40px; } }
@media (min-width: 1024px) { .why-inner { padding: 112px 64px; } }

.why-head {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-bottom: 48px;
}
@media (min-width: 1024px) {
  .why-head {
    flex-direction: row;
    /* The live-metrics panel is a fixed ~310px tall while the copy column is
       short (the heading now sits on one line). Top-aligning left all of that
       slack as a void under the paragraph; centring splits it evenly so the two
       columns read as one balanced row. */
    align-items: center;
    justify-content: space-between;
    gap: 48px;
    margin-bottom: 64px;
  }
}

/* The copy column was capped at 560px, which wrapped the 44px heading. It is
   widened to let the title sit on one line; the sub keeps the old 560px so the
   body copy does not run to an uncomfortable measure. The column still shrinks
   below ~1400px, where the title wraps again by design. */
@media (min-width: 1024px) {
  .why-head-copy { max-width: 960px; }
  .why-sub { max-width: 560px; }
}

.why-title {
  font-family: var(--font-heading);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--foreground-950);
  margin-bottom: 12px;
}
@media (min-width: 768px) { .why-title { font-size: 44px; } }

.why-sub {
  font-size: 15px;
  line-height: 1.7;
  color: var(--foreground-500);
}

/* ---- Live system panel ---- */
@media (min-width: 1024px) {
  .live-panel { width: 280px; padding-top: 8px; flex-shrink: 0; }
}

.live-panel-inner {
  border-radius: 16px;
  padding: 20px;
  border: 1px solid oklch(var(--background-200c) / 0.5);
  background: oklch(var(--background-50c) / 0.8);
}

.live-panel-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--emerald-600);
}
.live-panel-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--emerald-500);
  animation: pulseGlow 2s ease-in-out infinite;
}

.live-metrics { display: flex; flex-direction: column; gap: 12px; }

.live-metric {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: 12px;
  background: transparent;
  border: 1px solid transparent;
  transition: background-color .5s ease, border-color .5s ease;
}
.live-metric.is-active {
  background: oklch(var(--primary-500c) / 0.06);
  border-color: oklch(var(--primary-500c) / 0.15);
}
.live-metric-label { font-size: 12px; color: var(--foreground-500); }
.live-metric-value {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 700;
  color: var(--foreground-900);
}

.live-spark {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 32px;
  margin-top: 16px;
  opacity: 0.2;
}
.spark-bar {
  flex: 1;
  height: var(--bar-h, 0%);
  border-radius: 1px 1px 0 0;
  background: oklch(var(--primary-500c) / var(--bar-o, .4));
}

/* ---- Why cards ---- */
.why-grid-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-bottom: 56px;
}
@media (min-width: 768px)  { .why-grid-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .why-grid-cards { grid-template-columns: repeat(3, 1fr); } }

.why-card {
  border-radius: 20px;
  border: 1px solid oklch(var(--background-200c) / 0.6);
  background: oklch(var(--background-50c) / 0.6);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: opacity .55s ease-out, transform .55s ease-out,
              border-color .3s ease, background-color .3s ease;
}
@media (min-width: 768px) { .why-card { padding: 28px; } }

.why-card:hover {
  border-color: oklch(var(--primary-200c) / 0.5);
  background: #fff;
}

.why-grid-cards > :nth-child(1) { transition-delay: 200ms; }
.why-grid-cards > :nth-child(2) { transition-delay: 280ms; }
.why-grid-cards > :nth-child(3) { transition-delay: 360ms; }
.why-grid-cards > :nth-child(4) { transition-delay: 440ms; }
.why-grid-cards > :nth-child(5) { transition-delay: 520ms; }
.why-grid-cards > :nth-child(6) { transition-delay: 600ms; }

.why-card-head { display: flex; align-items: center; gap: 12px; }

.why-card-icon {
  width: 40px; height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 18px;
  background: oklch(var(--primary-500c) / 0.05);
  color: oklch(var(--primary-500c) / 0.5);
  transition: background-color .3s ease, color .3s ease;
}
.why-card:hover .why-card-icon {
  background: oklch(var(--primary-500c) / 0.1);
  color: oklch(var(--primary-500c) / 0.8);
}

.why-card-title {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 700;
  color: var(--foreground-900);
}

.why-card-desc {
  font-size: 13px;
  line-height: 1.7;
  color: var(--foreground-600);
}

.why-bullets { display: flex; flex-direction: column; gap: 8px; }
.why-bullets li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.why-bullets i {
  font-size: 12px;
  color: var(--primary-500);
  flex-shrink: 0;
  margin-top: 2px;
}
.why-bullets span {
  font-size: 12px;
  line-height: 1.4;
  color: var(--foreground-600);
}

/* ---- Certification chips ---- */
.cert-ribbon {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.cert-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid oklch(var(--background-200c) / 0.5);
  background: oklch(var(--background-50c) / 0.6);
  transition: border-color .3s ease, background-color .3s ease;
}
.cert-chip:hover {
  border-color: oklch(var(--primary-200c) / 0.4);
  background: #fff;
}
.cert-chip i { font-size: 10px; color: var(--primary-500); }
.cert-chip span {
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--foreground-600);
}

/* --------------------------------------------------------------------------
   FOLD 10 — FINAL CTA (dark band)
   -------------------------------------------------------------------------- */

.final-cta {
  position: relative;
  overflow: hidden;
  min-height: 500px;
  background: linear-gradient(160deg, #1A2332 0%, #0F1729 50%, #1A2332 100%);
}

.final-cta-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 30% 50% at 50% 50%, rgb(255 255 255 / 0.06) 0%, transparent 60%),
    radial-gradient(ellipse 50% 30% at 50% 40%, oklch(var(--primary-500c) / 0.05) 0%, transparent 60%);
}

.final-cta-inner {
  position: relative;
  z-index: 20;
  max-width: 1200px;
  margin-inline: auto;
  padding: 96px 24px;
  text-align: center;
}
@media (min-width: 768px)  { .final-cta-inner { padding-inline: 40px; } }
@media (min-width: 1024px) { .final-cta-inner { padding: 128px 64px; } }

.final-cta-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 12px;
  margin-bottom: 32px;
  background: rgb(255 255 255 / 0.08);
  border: 1px solid rgb(255 255 255 / 0.12);
}
.final-cta-badge i { font-size: 14px; color: var(--primary-500); }
.final-cta-badge span {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgb(255 255 255 / 0.8);
}

.final-cta-title {
  font-family: var(--font-heading);
  font-size: 36px;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: #fff;
  max-width: 700px;
  margin: 0 auto 20px;
}
@media (min-width: 768px)  { .final-cta-title { font-size: 48px; } }
@media (min-width: 1024px) { .final-cta-title { font-size: 56px; } }

.final-cta-sub {
  font-size: 17px;
  line-height: 1.7;
  color: rgb(255 255 255 / 0.55);
  max-width: 560px;
  margin: 0 auto 40px;
}
@media (min-width: 768px) { .final-cta-sub { font-size: 18px; } }

.final-cta-action { transition-delay: 300ms; }

.btn-invert {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 40px;
  border-radius: 12px;
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
  background: #fff;
  color: #0F1729;
  transition: transform .3s ease, box-shadow .3s ease;
}
.btn-invert:hover {
  transform: scale(1.05);
  box-shadow: 0 12px 32px rgb(0 0 0 / 0.25);
}
.btn-invert i { font-size: 16px; }

.confidence-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 48px;
  transition-delay: 400ms;
}

.confidence-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 12px;
  background: rgb(255 255 255 / 0.05);
  border: 1px solid rgb(255 255 255 / 0.08);
}
.confidence-chip i { font-size: 10px; color: rgb(240 195 80 / 0.7); }
.confidence-chip span {
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  color: rgb(255 255 255 / 0.6);
}

/* --------------------------------------------------------------------------
   FOLD 8 — LIVE PRODUCT EXPERIENCE
   Six goal scenarios, all present in the markup. JS moves .is-active only.
   -------------------------------------------------------------------------- */

.lpe { position: relative; background: #fff; overflow: hidden; }

.lpe-bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.lpe-grid {
  position: absolute;
  inset: 0;
  opacity: 0.012;
  background-image:
    linear-gradient(oklch(var(--primary-500c) / 0.4) 1px, transparent 1px),
    linear-gradient(90deg, oklch(var(--primary-500c) / 0.4) 1px, transparent 1px);
  background-size: 80px 80px;
}

.lpe-inner {
  position: relative;
  z-index: 10;
  max-width: 1400px;
  margin-inline: auto;
  padding: 96px 24px;
}
@media (min-width: 768px)  { .lpe-inner { padding-inline: 40px; } }
@media (min-width: 1024px) { .lpe-inner { padding: 112px 64px; } }

.lpe-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 48px;
}
@media (min-width: 1024px) { .lpe-head { margin-bottom: 64px; } }

.lpe-title {
  font-family: var(--font-heading);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--foreground-950);
  /* Was 720px, which wrapped "Choose a goal. Watch Wiztra deliver." */
  max-width: 960px;
  margin-bottom: 12px;
}
@media (min-width: 768px) { .lpe-title { font-size: 44px; } }

.lpe-sub {
  font-size: 15px;
  line-height: 1.7;
  color: var(--foreground-500);
  max-width: 560px;
  margin-bottom: 32px;
}

/* ---- Goal pills ---- */
.goal-pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.goal-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 999px;
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  background: var(--background-100);
  border: 1px solid oklch(var(--background-200c) / 0.8);
  color: var(--foreground-600);
  transition: background-color .3s ease, color .3s ease,
              border-color .3s ease, box-shadow .3s ease;
}
.goal-pill i { font-size: 13px; }
.goal-pill:hover {
  border-color: var(--primary-300);
  color: var(--primary-700);
}
.goal-pill.is-active {
  background: var(--primary-500);
  border-color: var(--primary-500);
  color: #fff;
  box-shadow: 0 4px 16px oklch(var(--primary-500c) / 0.28);
}

/* ---- Stage ---- */
.lpe-stage {
  position: relative;
  border-radius: 32px;
  padding: 24px;
  overflow: hidden;
  background: var(--background-100);
  border: 1px solid oklch(var(--background-200c) / 0.7);
}
@media (min-width: 768px)  { .lpe-stage { padding: 32px; } }
@media (min-width: 1024px) { .lpe-stage { padding: 40px; } }

.lpe-stage-glow {
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 600px; height: 300px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(ellipse, oklch(var(--primary-500c) / 0.07) 0%, transparent 70%);
}

.lpe-panels { position: relative; z-index: 1; display: grid; }

.lpe-panel {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  gap: 32px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s ease;
}
.lpe-panel.is-active { opacity: 1; visibility: visible; }
@media (min-width: 1024px) {
  .lpe-panel { flex-direction: row; gap: 40px; }
}

/* ---- Chat column ---- */
.lpe-chat {
  width: 100%;
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  border: 1px solid oklch(var(--background-200c) / 0.8);
  box-shadow: 0 4px 24px rgb(0 0 0 / 0.04);
}
@media (min-width: 1024px) { .lpe-chat { width: 55%; } }

.lpe-chat-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: oklch(var(--background-100c) / 0.8);
  border-bottom: 1px solid oklch(var(--background-200c) / 0.6);
}
.lpe-chat-title {
  flex: 1;
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 600;
  color: var(--foreground-800);
}

.lpe-messages {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px 16px;
}

.lpe-msg { display: flex; }

.lpe-msg-customer { justify-content: flex-end; }
.lpe-msg-customer p {
  max-width: 82%;
  padding: 10px 14px;
  border-radius: 16px 16px 6px 16px;
  background: var(--primary-500);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.65;
}

.lpe-msg-ai { justify-content: flex-start; }
.lpe-msg-ai p {
  max-width: 88%;
  padding: 10px 14px;
  border-radius: 16px 16px 16px 6px;
  background: var(--background-100);
  color: var(--foreground-700);
  font-size: 13px;
  line-height: 1.65;
}

.lpe-msg-system {
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 10px;
  background: oklch(var(--primary-500c) / 0.07);
  border: 1px solid oklch(var(--primary-500c) / 0.16);
  font-size: 11.5px;
  font-weight: 600;
  color: oklch(var(--primary-800c));
}
.lpe-msg-system i { font-size: 11px; color: var(--primary-500); flex-shrink: 0; }

/* Messages arrive in sequence when the panel becomes active */
.lpe-panel .lpe-msg {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .45s ease-out, transform .45s ease-out;
}
.lpe-panel.is-active .lpe-msg { opacity: 1; transform: translateY(0); }
.lpe-panel.is-active .lpe-msg:nth-child(1) { transition-delay: 120ms; }
.lpe-panel.is-active .lpe-msg:nth-child(2) { transition-delay: 340ms; }
.lpe-panel.is-active .lpe-msg:nth-child(3) { transition-delay: 560ms; }
.lpe-panel.is-active .lpe-msg:nth-child(4) { transition-delay: 780ms; }
.lpe-panel.is-active .lpe-msg:nth-child(5) { transition-delay: 1000ms; }
.lpe-panel.is-active .lpe-msg:nth-child(6) { transition-delay: 1220ms; }
.lpe-panel.is-active .lpe-msg:nth-child(7) { transition-delay: 1440ms; }

/* ---- Side column ---- */
.lpe-side {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
@media (min-width: 1024px) { .lpe-side { width: 45%; } }

.lpe-eyebrow {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--foreground-400);
  margin-bottom: 12px;
}

.lpe-actions-box {
  border-radius: 16px;
  padding: 20px;
  background: #fff;
  border: 1px solid oklch(var(--background-200c) / 0.7);
}

.lpe-actions { display: flex; flex-direction: column; gap: 10px; }

.lpe-action {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 12px;
  background: oklch(var(--primary-500c) / 0.08);
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity .5s ease, transform .5s ease;
}
.lpe-panel.is-active .lpe-action { opacity: 1; transform: translateX(0); }
.lpe-panel.is-active .lpe-action:nth-child(1) { transition-delay: 900ms; }
.lpe-panel.is-active .lpe-action:nth-child(2) { transition-delay: 1150ms; }
.lpe-panel.is-active .lpe-action:nth-child(3) { transition-delay: 1400ms; }

.lpe-action-icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: #fff;
  color: var(--primary-500);
  font-size: 14px;
}
.lpe-action-label {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--foreground-800);
}
.lpe-action-pulse {
  margin-left: auto;
  flex-shrink: 0;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--primary-500);
  animation: pulseGlow 2s ease-in-out infinite;
}

/* ---- Intelligence panel (dark) ---- */
.lpe-intel {
  border-radius: 16px;
  padding: 20px;
  background: linear-gradient(160deg, #1A2332 0%, #0F1729 100%);
  border: 1px solid rgb(255 255 255 / 0.06);
}

.lpe-intel-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgb(255 255 255 / 0.6);
}
.lpe-intel-head i { font-size: 14px; color: oklch(var(--primary-400c)); }

.lpe-intel-rows { display: flex; flex-direction: column; gap: 12px; }

.lpe-intel-row dt {
  font-size: 10px;
  color: rgb(255 255 255 / 0.3);
  margin-bottom: 4px;
}
.lpe-intel-row dd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.lpe-intel-value {
  font-size: 12px;
  font-weight: 500;
  color: rgb(255 255 255 / 0.8);
}
.lpe-intel-tag {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: oklch(var(--primary-500c) / 0.16);
  color: oklch(var(--primary-400c));
  white-space: nowrap;
}
.lpe-intel-rec {
  font-size: 12px;
  font-weight: 600;
  color: oklch(var(--primary-400c));
}

.lpe-confidence {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid rgb(255 255 255 / 0.06);
}
.lpe-confidence-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.lpe-confidence-head span:first-child {
  font-size: 10px;
  color: rgb(255 255 255 / 0.3);
}
.lpe-confidence-value {
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  color: rgb(255 255 255 / 0.9);
}
.lpe-confidence-track {
  display: block;
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.06);
  overflow: hidden;
}
.lpe-confidence-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, oklch(var(--primary-500c)), oklch(var(--primary-400c)));
  transition: width .9s ease-out .3s;
}
.lpe-panel.is-active .lpe-confidence-fill { width: var(--bar-h, 0%); }

/* ---- Bottom metric strip ---- */
.lpe-metrics {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 32px;
}
@media (min-width: 768px) { .lpe-metrics { gap: 32px; } }

.lpe-metric {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  color: var(--foreground-400);
}
.lpe-metric-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--primary-400);
}

/* --------------------------------------------------------------------------
   FOLD 9 — GET STARTED / PRICING + ROI CALCULATOR
   -------------------------------------------------------------------------- */

/* Warm gold band. The React source sets this gradient, the three radial glows,
   the mesh grid and the hairline borders on the section itself. */
.started {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: 900px;
  background: linear-gradient(160deg,
              oklch(var(--primary-50c)) 0%,
              oklch(0.93 0.09 82) 50%,
              oklch(var(--primary-100c)) 100%);
  border-top: 1px solid oklch(var(--primary-300c));
  border-bottom: 1px solid oklch(var(--primary-300c));
}

.started-bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.started-orb { position: absolute; border-radius: 50%; display: block; }
.started-orb-1 {
  top: 10%; left: 50%;
  transform: translateX(-50%);
  width: 800px; height: 600px;
  background: radial-gradient(ellipse, oklch(var(--primary-500c) / 0.12) 0%, transparent 60%);
}
.started-orb-2 {
  bottom: 5%; right: 10%;
  width: 500px; height: 400px;
  background: radial-gradient(ellipse, oklch(var(--primary-500c) / 0.08) 0%, transparent 55%);
}
.started-orb-3 {
  top: 40%; left: 5%;
  width: 400px; height: 400px;
  background: radial-gradient(ellipse, oklch(var(--primary-500c) / 0.06) 0%, transparent 50%);
}

/* Faint gold mesh over the whole band. */
.started-mesh {
  position: absolute;
  inset: 0;
  opacity: 0.035;
  background-image:
    linear-gradient(oklch(var(--primary-600c) / 0.5) 1px, transparent 1px),
    linear-gradient(90deg, oklch(var(--primary-600c) / 0.5) 1px, transparent 1px);
  background-size: 60px 60px;
}

.started-inner {
  position: relative;
  z-index: 10;
  max-width: 1360px;
  margin-inline: auto;
  padding: 96px 24px;
}
@media (min-width: 768px)  { .started-inner { padding-inline: 40px; } }
@media (min-width: 1024px) { .started-inner { padding: 112px 64px; } }

.started-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 48px;
}
@media (min-width: 1024px) { .started-head { margin-bottom: 64px; } }

.pill-price {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  margin-bottom: 24px;
  background: rgb(255 255 255 / 0.72);
  border: 1px solid oklch(var(--primary-400c));
}
.pill-price i { font-size: 14px; color: oklch(var(--primary-700c)); }
.pill-price span {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  color: oklch(var(--primary-800c));
}

.started-title {
  font-family: var(--font-heading);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--foreground-950);
  max-width: 720px;
  margin-bottom: 12px;
}
@media (min-width: 768px) { .started-title { font-size: 44px; } }

.started-sub {
  font-size: 15px;
  line-height: 1.7;
  color: var(--foreground-600);
  max-width: 600px;
}

/* ---- Plan cards ---- */
/* padding-top leaves room for the badge that overhangs the featured card. */
.plan-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  max-width: 1200px;
  padding-top: 14px;
  margin: 0 auto 64px;
}
@media (min-width: 768px)  { .plan-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .plan-grid { gap: 24px; } }

/* No overflow:hidden here — the "Most Popular" badge deliberately overhangs the
   top edge, and each .plan-visual already clips its own contents. */
.plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 24px;
  border-radius: 24px;
  background: #fff;
  border: 1px solid oklch(var(--background-200c) / 0.8);
  box-shadow: 0 2px 12px rgb(0 0 0 / 0.03);
  transition: transform .4s ease, box-shadow .4s ease,
              border-color .4s ease, opacity .4s ease;
}
@media (min-width: 768px) { .plan-card { padding: 28px; } }
.plan-card.is-featured {
  border-color: oklch(var(--primary-400c));
  box-shadow: 0 8px 32px oklch(var(--primary-500c) / 0.12);
}
.plan-card:hover {
  transform: translateY(-6px);
  border-color: oklch(var(--primary-400c));
  box-shadow: 0 16px 44px oklch(var(--primary-500c) / 0.16);
}
/* Dim the siblings of a hovered card — was JS state in React */
.plan-grid:hover .plan-card:not(:hover) { opacity: .72; }

/* Centred and overhanging the card's top edge, as in the source. */
.plan-badge {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  background: var(--primary-500);
  color: #fff;
}
.plan-badge i { font-size: 10px; }

/* --------------------------------------------------------------------------
   Plan card visuals

   Three illustrated panels, one per card, matching the React source's layout.
   The source tinted these with hue-290 violet; per the project's palette
   decision they are rendered in the gold primary instead. Structure, geometry
   and content are otherwise the same.

   Everything here is static markup + CSS: the starfield uses fixed positions
   (the React version re-randomised them on every render) and the orbit is laid
   out from precomputed offsets rather than inline style props.
   -------------------------------------------------------------------------- */

/* Sits inside the card's padding, so no margins of its own beyond the gap to
   the copy below it. */
.plan-visual {
  position: relative;
  display: block;
  height: 170px;
  margin: 0 0 20px;
  border-radius: 20px;
  overflow: hidden;
}

/* ---- 1. Free trial: starfield + rocket ---- */

.plan-visual-rocket {
  display: flex;
  align-items: center;
  justify-content: center;
  background: oklch(0.15 0.02 270);
}

.plan-stars { position: absolute; inset: 0; display: block; }

.plan-star {
  position: absolute;
  display: block;
  border-radius: 50%;
  background: oklch(var(--primary-400c) / 0.75);
  animation: planStarPulse 2.6s ease-in-out infinite;
}

@keyframes planStarPulse {
  0%, 100% { opacity: 0.25; }
  50%      { opacity: 1; }
}

/* Ground haze at the base of the panel. */
.plan-moon {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 35%;
  display: block;
  background: linear-gradient(180deg, oklch(0.2 0.01 270 / 0), oklch(0.18 0.01 270 / 0.8));
}

.plan-rocket {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px; height: 64px;
  transform: rotate(-5deg);
  transition: transform .7s ease;
}
.plan-rocket i {
  font-size: 48px;
  color: oklch(var(--primary-500c));
  filter: drop-shadow(0 0 6px oklch(var(--primary-500c) / 0.35));
  transition: color .5s ease, filter .5s ease;
}
.plan-card-rocket:hover .plan-rocket { transform: translateY(-18px) rotate(-12deg); }
.plan-card-rocket:hover .plan-rocket i {
  color: oklch(var(--primary-400c));
  filter: drop-shadow(0 0 16px oklch(var(--primary-500c) / 0.7));
}

.plan-flame {
  position: absolute;
  top: 65%; left: 50%;
  display: block;
  opacity: 0.4;
  transition: opacity .5s ease;
}
.plan-card-rocket:hover .plan-flame { opacity: 1; }

.plan-flame span {
  position: absolute;
  display: block;
  border-radius: 50%;
  background: oklch(var(--primary-400c) / 0.6);
  animation: planFlame .55s ease-in-out infinite;
}
.plan-flame span:nth-child(1) { width: 3px; height: 3px; top: 0;    left: 0;   animation-duration: .40s; }
.plan-flame span:nth-child(2) { width: 5px; height: 5px; top: 8px;  left: 3px; animation-duration: .55s; animation-delay: .1s; }
.plan-flame span:nth-child(3) { width: 7px; height: 7px; top: 16px; left: 6px; animation-duration: .70s; animation-delay: .2s; }

@keyframes planFlame {
  0%, 100% { transform: scale(1);   opacity: .8; }
  50%      { transform: scale(1.4); opacity: .35; }
}

.plan-visual-label {
  position: absolute;
  left: 16px; right: 16px; bottom: 12px;
  z-index: 10;
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: rgb(255 255 255 / 0.5);
}

/* ---- 2. Demo: mini booking calendar ---- */

.plan-visual-calendar {
  padding: 18px 18px 0;
  background: oklch(var(--primary-500c) / 0.05);
  border: 1px solid oklch(var(--primary-500c) / 0.10);
}

/* The month grid and the slot list are taller than the 170px panel by design
   (the source clips them too). Fading the last few pixels makes the cut read as
   intentional rather than as a sliced row. Decorative only — the full content
   stays in the HTML for the CMS and for search engines. */
.plan-visual-calendar::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 48px;
  pointer-events: none;
  background: linear-gradient(180deg,
              oklch(var(--background-50c) / 0) 0%,
              oklch(var(--background-50c) / 0.75) 55%,
              oklch(var(--background-50c) / 0.96) 100%);
}

.plan-cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.plan-cal-month {
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 600;
  color: var(--foreground-700);
}
.plan-cal-nav { display: flex; align-items: center; gap: 6px; }
.plan-cal-nav span {
  width: 24px; height: 24px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: oklch(0 0 0 / 0.04);
}
.plan-cal-nav i { font-size: 10px; color: var(--foreground-400); }

.plan-cal-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
}

.plan-cal-dow {
  padding-block: 4px;
  text-align: center;
  font-size: 9px;
  font-weight: 500;
  color: var(--foreground-400);
}

.plan-cal-grid-days { margin-bottom: 16px; }

.plan-cal-day {
  padding-block: 6px;
  border-radius: 6px;
  text-align: center;
  font-size: 10px;
  color: var(--foreground-600);
}
.plan-cal-day-on {
  font-weight: 700;
  color: oklch(var(--primary-700c));
  background: oklch(var(--primary-500c) / 0.14);
  transition: transform .3s ease, box-shadow .3s ease;
}
.plan-card-calendar:hover .plan-cal-day-on {
  transform: scale(1.1);
  box-shadow: 0 0 8px oklch(var(--primary-500c) / 0.25);
}

.plan-cal-label {
  margin-bottom: 8px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--foreground-500);
}

.plan-slots { display: flex; flex-direction: column; gap: 6px; }

.plan-slot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 11px;
  background: oklch(var(--primary-500c) / 0.07);
  color: oklch(var(--primary-700c));
  transition: transform .5s ease;
}
.plan-slot-tag {
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 500;
  background: oklch(var(--primary-500c) / 0.16);
  color: oklch(var(--primary-700c));
}
.plan-slot-off {
  opacity: 0.5;
  background: oklch(0 0 0 / 0.03);
  color: var(--foreground-400);
}
.plan-slot-off .plan-slot-tag {
  background: oklch(0 0 0 / 0.06);
  color: var(--foreground-400);
}
/* Staggered nudge on hover — was a per-item inline transform in React. */
.plan-card-calendar:hover .plan-slot:nth-child(2) { transform: translateX(2px); transition-delay: .1s; }
.plan-card-calendar:hover .plan-slot:nth-child(4) { transform: translateX(6px); transition-delay: .3s; }

/* ---- 3. Enterprise: hub and spokes ---- */

.plan-visual-enterprise {
  display: flex;
  align-items: center;
  justify-content: center;
  background: oklch(0.95 0.01 270);
  border: 1px solid oklch(0 0 0 / 0.06);
}

.plan-orbit {
  position: relative;
  width: 200px;
  height: 140px;
}

.plan-orbit-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.plan-orbit-lines line {
  stroke: oklch(var(--primary-500c) / 0.25);
  stroke-width: 1;
  opacity: 0.35;
  transition: opacity .5s ease;
}
.plan-orbit-lines .plan-orbit-line-off { stroke: oklch(0 0 0 / 0.08); }
.plan-card-enterprise:hover .plan-orbit-lines line { opacity: .6; }

.plan-hub {
  position: absolute;
  top: 50%; left: 50%;
  width: 48px; height: 48px;
  margin: -24px 0 0 -24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: oklch(var(--primary-500c) / 0.18);
  border: 2px solid oklch(var(--primary-500c) / 0.35);
  box-shadow: 0 0 12px oklch(var(--primary-500c) / 0.12);
  transition: transform .5s ease, box-shadow .5s ease;
}
.plan-hub i { font-size: 18px; color: oklch(var(--primary-700c)); }
.plan-card-enterprise:hover .plan-hub {
  transform: scale(1.15);
  box-shadow: 0 0 30px oklch(var(--primary-500c) / 0.3);
}

/* Six nodes on a 54px circle. Offsets are precomputed from
   angle = i/6 * 360deg - 90deg, so no geometry is done in JS. */
.plan-node {
  position: absolute;
  top: 50%; left: 50%;
  width: 28px; height: 28px;
  margin: -14px 0 0 -14px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: oklch(var(--primary-500c) / 0.16);
  border: 1px solid oklch(var(--primary-500c) / 0.28);
  opacity: 0.75;
  transition: transform .5s ease, opacity .5s ease;
}
.plan-node i { font-size: 11px; color: oklch(var(--primary-700c)); }

.plan-node-off {
  background: oklch(0 0 0 / 0.06);
  border-color: oklch(0 0 0 / 0.08);
}
.plan-node-off i { color: var(--foreground-400); }

.plan-node-1 { transform: translate(0px,      -54px); }
.plan-node-2 { transform: translate(46.77px,  -27px); }
.plan-node-3 { transform: translate(46.77px,   27px); }
.plan-node-4 { transform: translate(0px,       54px); }
.plan-node-5 { transform: translate(-46.77px,  27px); }
.plan-node-6 { transform: translate(-46.77px, -27px); }

.plan-card-enterprise:hover .plan-node { opacity: 1; }
.plan-card-enterprise:hover .plan-node-1 { transform: translate(0px,      -54px) scale(1.1); }
.plan-card-enterprise:hover .plan-node-2 { transform: translate(46.77px,  -27px) scale(1.1); }
.plan-card-enterprise:hover .plan-node-3 { transform: translate(46.77px,   27px) scale(1.1); }
.plan-card-enterprise:hover .plan-node-4 { transform: translate(0px,       54px) scale(1.1); }
.plan-card-enterprise:hover .plan-node-6 { transform: translate(-46.77px, -27px) scale(1.1); }

/* The card already supplies the padding. */
.plan-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 0;
}

/* Icon and headline share a row, as in the source. */
.plan-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.plan-icon {
  width: 48px; height: 48px;
  flex-shrink: 0;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  background: var(--primary-50);
  color: var(--primary-500);
  transition: background-color .4s ease, transform .4s ease;
}
.plan-card:hover .plan-icon {
  background: var(--primary-100);
  transform: scale(1.05);
}

.plan-headline {
  font-family: var(--font-heading);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--foreground-950);
  margin-bottom: 0;
}
@media (min-width: 768px) { .plan-headline { font-size: 21px; } }

.plan-desc {
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--foreground-600);
  margin-bottom: 20px;
}

.plan-items {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 28px;
  flex: 1;
}
.plan-items li { display: flex; align-items: flex-start; gap: 10px; }
.plan-items i {
  font-size: 13px;
  color: var(--primary-500);
  flex-shrink: 0;
  margin-top: 2px;
}
.plan-items span {
  font-size: 13px;
  color: var(--foreground-700);
}

.plan-cta { margin-top: auto; }

/* ---- ROI calculator ---- */
.roi {
  border-radius: 28px;
  padding: 28px 24px;
  margin-bottom: 48px;
  background: #fff;
  border: 1px solid oklch(var(--background-200c) / 0.8);
  box-shadow: 0 4px 24px rgb(0 0 0 / 0.04);
}
@media (min-width: 1024px) { .roi { padding: 36px 40px; } }

.roi-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 24px;
}
@media (min-width: 768px) {
  .roi-head { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 16px; }
}
.roi-head .lpe-eyebrow { margin-bottom: 0; }

.roi-head-copy { min-width: 0; }

.roi-title {
  font-size: 20px;
  line-height: 1.2;
  color: var(--foreground-950);
  margin-bottom: 4px;
}

.roi-sub {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--foreground-500);
  max-width: 500px;
}

.roi-recalc {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--primary-700);
  background: oklch(var(--primary-500c) / 0.08);
  border: 1px solid oklch(var(--primary-500c) / 0.22);
  transition: background-color .2s ease, border-color .2s ease;
}
.roi-recalc:hover {
  background: oklch(var(--primary-500c) / 0.16);
  border-color: oklch(var(--primary-500c) / 0.4);
}

.roi-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}
@media (min-width: 1024px) {
  .roi-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
}

.roi-fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 640px) { .roi-fields { grid-template-columns: repeat(2, 1fr); } }

.roi-field { display: flex; flex-direction: column; gap: 8px; }

.roi-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--foreground-600);
}
.roi-label i { font-size: 13px; color: var(--primary-500); }

.roi-input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--foreground-200);
  background: var(--background-50);
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 600;
  color: var(--foreground-900);
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.roi-input:focus {
  outline: none;
  background: #fff;
  border-color: var(--primary-400);
  box-shadow: 0 0 0 3px var(--primary-100);
}

.roi-results {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.roi-result {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 16px;
  border-radius: 16px;
  border: 1px solid transparent;
}
.roi-result-gold {
  background: oklch(var(--primary-500c) / 0.07);
  border-color: oklch(var(--primary-500c) / 0.18);
}
.roi-result-green {
  background: oklch(0.52 0.17 160 / 0.07);
  border-color: oklch(0.52 0.17 160 / 0.18);
}

.roi-result-value {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
@media (min-width: 768px) { .roi-result-value { font-size: 28px; } }
.roi-result-gold  .roi-result-value { color: oklch(var(--primary-700c)); }
.roi-result-green .roi-result-value { color: oklch(0.45 0.15 160); }

.roi-result-label {
  font-size: 12px;
  line-height: 1.4;
  color: var(--foreground-500);
}

.roi-note {
  margin-top: 20px;
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--foreground-400);
}

/* ---- Trust ribbon on light background ---- */
.started-ribbon {
  margin-top: 0;
  border-color: oklch(var(--background-200c) / 0.8);
}
.ribbon-item-light { color: var(--foreground-400); }

/* 40 fixed star positions. Seeded once and written out, so the field is
   identical on every load; the React source re-randomised it per render. */
.plan-star:nth-child(1) { left: 68.2%; top: 90.7%; width: 1.0px; height: 1.0px; animation-delay: 0.5s; animation-duration: 3.3s; }
.plan-star:nth-child(2) { left: 39.3%; top: 56.7%; width: 0.8px; height: 0.8px; animation-delay: 1.0s; animation-duration: 3.0s; }
.plan-star:nth-child(3) { left: 45.9%; top: 34.5%; width: 2.0px; height: 2.0px; animation-delay: 0.7s; animation-duration: 2.2s; }
.plan-star:nth-child(4) { left: 35.5%; top: 22.3%; width: 1.9px; height: 1.9px; animation-delay: 0.7s; animation-duration: 3.2s; }
.plan-star:nth-child(5) { left: 46.8%; top: 37.9%; width: 1.3px; height: 1.3px; animation-delay: 2.5s; animation-duration: 2.5s; }
.plan-star:nth-child(6) { left: 84.8%; top: 46.7%; width: 1.8px; height: 1.8px; animation-delay: 0.1s; animation-duration: 2.4s; }
.plan-star:nth-child(7) { left: 68.2%; top: 89.8%; width: 1.0px; height: 1.0px; animation-delay: 0.8s; animation-duration: 3.0s; }
.plan-star:nth-child(8) { left: 12.8%; top: 26.6%; width: 1.2px; height: 1.2px; animation-delay: 1.9s; animation-duration: 3.2s; }
.plan-star:nth-child(9) { left: 7.9%; top: 35.7%; width: 2.1px; height: 2.1px; animation-delay: 2.1s; animation-duration: 1.7s; }
.plan-star:nth-child(10) { left: 31.1%; top: 44.2%; width: 2.2px; height: 2.2px; animation-delay: 1.0s; animation-duration: 3.5s; }
.plan-star:nth-child(11) { left: 60.6%; top: 86.7%; width: 0.6px; height: 0.6px; animation-delay: 1.8s; animation-duration: 3.0s; }
.plan-star:nth-child(12) { left: 67.3%; top: 27.3%; width: 2.0px; height: 2.0px; animation-delay: 0.6s; animation-duration: 2.5s; }
.plan-star:nth-child(13) { left: 39.4%; top: 57.4%; width: 2.0px; height: 2.0px; animation-delay: 2.8s; animation-duration: 3.7s; }
.plan-star:nth-child(14) { left: 43.0%; top: 59.8%; width: 2.4px; height: 2.4px; animation-delay: 1.2s; animation-duration: 3.4s; }
.plan-star:nth-child(15) { left: 77.3%; top: 44.7%; width: 2.4px; height: 2.4px; animation-delay: 2.6s; animation-duration: 2.5s; }
.plan-star:nth-child(16) { left: 91.1%; top: 78.7%; width: 0.7px; height: 0.7px; animation-delay: 0.3s; animation-duration: 2.7s; }
.plan-star:nth-child(17) { left: 14.4%; top: 56.6%; width: 2.0px; height: 2.0px; animation-delay: 0.8s; animation-duration: 3.0s; }
.plan-star:nth-child(18) { left: 64.0%; top: 37.0%; width: 1.4px; height: 1.4px; animation-delay: 2.4s; animation-duration: 2.0s; }
.plan-star:nth-child(19) { left: 67.7%; top: 27.2%; width: 1.0px; height: 1.0px; animation-delay: 2.8s; animation-duration: 3.9s; }
.plan-star:nth-child(20) { left: 37.1%; top: 82.1%; width: 1.1px; height: 1.1px; animation-delay: 0.3s; animation-duration: 2.3s; }
.plan-star:nth-child(21) { left: 82.6%; top: 10.4%; width: 0.5px; height: 0.5px; animation-delay: 1.4s; animation-duration: 2.2s; }
.plan-star:nth-child(22) { left: 10.0%; top: 11.7%; width: 1.3px; height: 1.3px; animation-delay: 1.0s; animation-duration: 3.7s; }
.plan-star:nth-child(23) { left: 32.2%; top: 70.3%; width: 2.3px; height: 2.3px; animation-delay: 2.8s; animation-duration: 3.5s; }
.plan-star:nth-child(24) { left: 1.6%; top: 21.4%; width: 0.6px; height: 0.6px; animation-delay: 3.0s; animation-duration: 2.4s; }
.plan-star:nth-child(25) { left: 65.7%; top: 56.7%; width: 1.4px; height: 1.4px; animation-delay: 2.2s; animation-duration: 2.4s; }
.plan-star:nth-child(26) { left: 23.5%; top: 9.7%; width: 0.8px; height: 0.8px; animation-delay: 2.2s; animation-duration: 2.6s; }
.plan-star:nth-child(27) { left: 23.0%; top: 57.2%; width: 1.6px; height: 1.6px; animation-delay: 2.5s; animation-duration: 1.6s; }
.plan-star:nth-child(28) { left: 38.7%; top: 31.3%; width: 1.9px; height: 1.9px; animation-delay: 2.8s; animation-duration: 3.7s; }
.plan-star:nth-child(29) { left: 9.4%; top: 38.3%; width: 1.1px; height: 1.1px; animation-delay: 1.2s; animation-duration: 3.1s; }
.plan-star:nth-child(30) { left: 8.7%; top: 64.2%; width: 1.5px; height: 1.5px; animation-delay: 1.5s; animation-duration: 2.9s; }
.plan-star:nth-child(31) { left: 32.0%; top: 47.3%; width: 1.1px; height: 1.1px; animation-delay: 1.5s; animation-duration: 2.1s; }
.plan-star:nth-child(32) { left: 92.5%; top: 34.9%; width: 2.4px; height: 2.4px; animation-delay: 0.3s; animation-duration: 1.8s; }
.plan-star:nth-child(33) { left: 94.0%; top: 16.9%; width: 1.5px; height: 1.5px; animation-delay: 1.4s; animation-duration: 2.0s; }
.plan-star:nth-child(34) { left: 15.4%; top: 9.7%; width: 1.2px; height: 1.2px; animation-delay: 1.6s; animation-duration: 2.0s; }
.plan-star:nth-child(35) { left: 68.5%; top: 1.1%; width: 2.2px; height: 2.2px; animation-delay: 2.7s; animation-duration: 1.9s; }
.plan-star:nth-child(36) { left: 13.6%; top: 25.8%; width: 2.4px; height: 2.4px; animation-delay: 2.7s; animation-duration: 3.0s; }
.plan-star:nth-child(37) { left: 40.2%; top: 25.5%; width: 2.0px; height: 2.0px; animation-delay: 1.2s; animation-duration: 1.6s; }
.plan-star:nth-child(38) { left: 59.4%; top: 1.2%; width: 0.8px; height: 0.8px; animation-delay: 1.3s; animation-duration: 1.5s; }
.plan-star:nth-child(39) { left: 6.1%; top: 11.7%; width: 0.8px; height: 0.8px; animation-delay: 2.4s; animation-duration: 3.7s; }
.plan-star:nth-child(40) { left: 14.5%; top: 78.9%; width: 1.7px; height: 1.7px; animation-delay: 3.0s; animation-duration: 2.0s; }