/* ============================================================
   FlowLens — presentation layer (Current Demo CSS + migration bridges)
   New work MUST prefer css/tokens.css --fl-* semantic tokens.
   Legacy --violet / --grad tokens remain for Demo coupling until I10 calibration.
   Existing Demo visuals are NOT Canonical Art Direction.
   ============================================================ */

:root {
  /* --- Bridge: canvas / text toward Design System (PROVISIONAL) --- */
  --bg:         var(--fl-bg-canvas);
  --bg-elev:    var(--fl-surface-subtle);
  --text:       var(--fl-text-primary);
  --text-dim:   var(--fl-text-secondary);
  --text-mute:  var(--fl-text-muted);
  --line:       var(--fl-stroke-subtle);
  --glass:      rgb(255 255 255 / 0.06);
  --line-green: var(--fl-status-success);

  /* LEGACY compatibility aliases.
     Old selectors still reference these names, but they now resolve to the
     semantic FlowLens blue instead of carrying a separate violet identity. */
  --violet:     var(--fl-accent-primary);
  --violet-lt:  var(--fl-accent-primary-hover);
  --blue-lt:    var(--fl-accent-primary);

  --violet-rgb:     var(--fl-accent-primary-rgb);
  --violet-lt-rgb:  var(--fl-accent-primary-rgb);
  --blue-lt-rgb:    var(--fl-accent-primary-rgb);
  --line-green-rgb: 87 184 137;

  /* Legacy gradient alias intentionally resolves to a solid semantic accent. */
  --grad: var(--fl-accent-primary);

  /* 間距 */
  --gap-xs: 8px;
  --gap-sm: 14px;
  --gap-md: 24px;
  --gap-lg: 48px;
  --gap-xl: 96px;

  /* 圓角 */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-pill: 999px;

  /* 版面 */
  --maxw: 1180px;

  /* 動態 */
  --ease: cubic-bezier(.22, 1, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(5rem + var(--fl-demo-banner-h, 2.25rem));
  background: var(--fl-bg-canvas, #0b0b0d);
  --fl-demo-banner-h: 2.25rem;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  min-height: 100%;
  background: var(--bg, var(--fl-bg-canvas, #0b0b0d));
  color: var(--text, var(--fl-text-primary, #f5f5f6));
  font-family: 'Space Grotesk', 'Noto Sans TC', -apple-system, BlinkMacSystemFont,
               'Segoe UI', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

html.is-mobile-nav-open,
html.is-mobile-nav-open body.is-mobile-nav-open {
  overflow: hidden;
  overscroll-behavior: none;
}

/* Site-wide demo disclaimer — always visible above nav */
.site-demo-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.45rem 0.75rem;
  min-height: var(--fl-demo-banner-h);
  padding: 0.35rem var(--fl-page-gutter, 1.25rem);
  background: rgb(28 24 16 / 0.96);
  border-bottom: 1px solid rgb(212 168 75 / 0.35);
  color: rgb(245 230 190 / 0.92);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  line-height: 1.35;
  text-align: center;
}

.site-demo-badge {
  flex-shrink: 0;
  padding: 0.12rem 0.45rem;
  border: 1px solid rgb(212 168 75 / 0.55);
  border-radius: 2px;
  color: rgb(232 196 110);
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.site-demo-text {
  color: rgb(230 214 176 / 0.88);
}

h1, h2, h3 { line-height: 1.25; letter-spacing: -.01em; margin: 0; }

a { color: inherit; text-decoration: none; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

/* ---------- Utility ---------- */

.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gap-md);
}

.section { padding-block: var(--gap-xl); }

/* 錨點跳轉／點導覽連結時，讓內容停在固定導覽列下方而不是被蓋住。
   目前之所以「剛好」沒被蓋住，純粹是因為 .section 的 padding-block
   （var(--gap-xl)）遠大於導覽列高度——這是巧合，不是設計。以後有人把
   --gap-xl 調小，巧合就會消失。導覽列實際高度約 56–60px，這裡給
   80px 的固定值，跟 --gap-xl 脫鉤，明確保證留白足夠。 */
#hero, #diagnose, #services, #process, #contact {
  scroll-margin-top: calc(80px + var(--fl-demo-banner-h, 2.25rem));
}

.eyebrow {
  font-size: 11px;
  letter-spacing: .3em;
  color: var(--violet-lt);
  text-transform: uppercase;
  margin-bottom: var(--gap-sm);
}

.grad-text {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- 無障礙：減少動態效果 ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ============================================================
   Hero — I2 Brand-first + Animated System Diagram
   Wide: copy | diagram · Narrow: statement → CTA → tags → diagram
   ============================================================ */

#hero {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-block: calc(var(--fl-space-9) + 2rem + var(--fl-demo-banner-h, 2.25rem)) var(--fl-space-8);
  background: var(--fl-bg-canvas);
  overflow: visible;
}

.hero-layout {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: var(--fl-space-8);
  align-items: center;
  width: 100%;
}

.hero-copy {
  max-width: 36rem;
}

.hero-brand {
  margin: 0 0 var(--fl-space-3);
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: var(--fl-leading-display);
  color: var(--fl-text-primary);
}

.hero-eyebrow {
  margin: 0 0 var(--fl-space-3);
  font-size: var(--fl-type-meta);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fl-accent-primary);
}

.hero-headline {
  margin: 0 0 var(--fl-space-5);
  font-size: clamp(2rem, 4.2vw, 3.35rem);
  font-weight: 600;
  line-height: var(--fl-leading-heading);
  letter-spacing: -0.02em;
  color: var(--fl-text-primary);
}

.hero-headline-accent {
  display: block;
  color: var(--fl-text-secondary);
  font-weight: 500;
}

.hero-sub {
  margin: 0 0 var(--fl-space-6);
  max-width: 38ch;
  font-size: var(--fl-type-body-lg);
  line-height: var(--fl-leading-body);
  color: var(--fl-text-secondary);
}

.hero-actions {
  margin-bottom: var(--fl-space-6);
}

.hero-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.75rem 1.35rem;
  font-size: var(--fl-type-body-md);
  font-weight: 600;
  color: var(--fl-text-inverse);
  background: var(--fl-accent-primary);
  border-radius: var(--fl-radius-sm);
  box-shadow: var(--fl-shadow-e2);
  transition:
    background var(--fl-motion-fast) var(--fl-ease-standard),
    transform var(--fl-motion-fast) var(--fl-ease-standard);
}

.hero-cta:hover {
  background: var(--fl-accent-primary-hover);
}

.hero-cta:active {
  background: var(--fl-accent-primary-active);
  transform: translateY(1px);
}

.hero-cta:focus-visible {
  outline: none;
  box-shadow: var(--fl-focus-ring);
}

.hero-tags {
  position: relative;
  z-index: 6;
  display: flex;
  flex-wrap: wrap;
  gap: var(--fl-space-2);
}

.hero-tag {
  position: relative;
}

.hero-tag-btn {
  min-height: 40px;
  padding: 0.45rem 0.85rem;
  font-size: var(--fl-type-body-sm);
  color: var(--fl-text-secondary);
  background: var(--fl-surface-base);
  border: 1px solid var(--fl-stroke-subtle);
  border-radius: var(--fl-radius-sm);
  transition:
    color var(--fl-motion-fast) var(--fl-ease-standard),
    border-color var(--fl-motion-fast) var(--fl-ease-standard),
    background var(--fl-motion-fast) var(--fl-ease-standard),
    box-shadow var(--fl-motion-fast) var(--fl-ease-standard);
}

.hero-tag-btn:hover {
  color: var(--fl-text-primary);
  border-color: var(--fl-stroke-interactive);
}

.hero-tag-btn.is-selected,
.hero-tag-btn[aria-expanded='true'] {
  color: var(--fl-text-primary);
  border-color: var(--fl-accent-primary);
  background: var(--fl-accent-primary-soft);
  box-shadow: 0 0 0 1px rgb(var(--fl-accent-primary-rgb) / 0.35);
}

.hero-tag-btn:focus-visible {
  outline: none;
  box-shadow: var(--fl-focus-ring);
}

.hero-tag-panel {
  position: absolute;
  left: 0;
  top: calc(100% + 8px);
  z-index: 4;
  width: min(18rem, 78vw);
  padding: var(--fl-space-4);
  background: var(--fl-surface-elevated);
  border: 1px solid var(--fl-stroke-subtle);
  border-radius: var(--fl-radius-md);
  box-shadow: var(--fl-shadow-e3);
}

.hero-tag-detail {
  margin: 0 0 var(--fl-space-3);
  font-size: var(--fl-type-body-sm);
  line-height: var(--fl-leading-body);
  color: var(--fl-text-secondary);
}

.hero-tag-link {
  font-size: var(--fl-type-body-sm);
  color: var(--fl-accent-primary-hover);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.hero-tag-link:focus-visible {
  outline: none;
  box-shadow: var(--fl-focus-ring);
}

/* --- Animated System Diagram (cinematic / semantic) --- */

.hero-diagram {
  justify-self: stretch;
  min-width: 0;
}

.hero-diagram-stage {
  --diagram-cx: 50%;
  --diagram-cy: 48%;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--fl-space-3);
  overflow: hidden;
  padding: var(--fl-space-5);
  background:
    linear-gradient(180deg, rgb(255 255 255 / 0.03), transparent 28%),
    var(--fl-surface-base);
  border: 1px solid var(--fl-stroke-subtle);
  border-radius: var(--fl-radius-lg);
  box-shadow: var(--fl-shadow-e2);
}

.diagram-ambient {
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(circle at var(--diagram-cx, 50%) var(--diagram-cy, 48%), rgb(var(--fl-accent-primary-rgb) / 0.12), transparent 42%),
    radial-gradient(circle at 18% 18%, rgb(255 255 255 / 0.04), transparent 35%),
    radial-gradient(circle at 82% 78%, rgb(var(--fl-accent-primary-rgb) / 0.06), transparent 40%);
  opacity: 0.55;
  pointer-events: none;
  transition: opacity var(--fl-motion-emphasis) var(--fl-ease-standard);
}

.diagram-header {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  height: 2.5rem;
}

.hero-diagram-caption {
  position: absolute;
  inset: 0 auto auto 0;
  display: flex;
  align-items: baseline;
  gap: var(--fl-space-3);
  margin: 0;
  font-size: clamp(0.95rem, 1.4vw, 1.125rem);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--fl-text-primary);
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity var(--fl-motion-standard) var(--fl-ease-enter),
    transform var(--fl-motion-standard) var(--fl-ease-enter);
}

.diagram-caption-kicker {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: var(--fl-type-meta);
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--fl-accent-primary);
}

.hero-diagram[data-phase='0'] .hero-diagram-caption[data-caption='fragmented'],
.hero-diagram[data-phase='1'] .hero-diagram-caption[data-caption='connected'],
.hero-diagram[data-phase='2'] .hero-diagram-caption[data-caption='structured'],
.hero-diagram[data-phase='3'] .hero-diagram-caption[data-caption='actionable'] {
  opacity: 1;
  transform: translateY(0);
}



/* ---------- Hero Spatial Production Integration · Slice B static states ---------- */

.hero-spatial-field {
  --spatial-duration: var(--hero-spatial-duration, 360ms);
  position: relative;
  width: 100%;
  aspect-ratio: 1.04 / 1;
  overflow: hidden;
  isolation: isolate;
  perspective: 1100px;
  background:
    radial-gradient(circle at 52% 46%, rgb(var(--fl-accent-primary-rgb) / 0.07), transparent 42%),
    linear-gradient(180deg, rgb(255 255 255 / 0.025), transparent 32%),
    var(--fl-surface-base);
  border: 1px solid var(--fl-stroke-subtle);
}

.hero-spatial-depth {
  position: absolute;
  inset: 15% 9%;
  border: 1px solid rgb(255 255 255 / 0.045);
  transform: rotateX(66deg) translateZ(-110px);
  pointer-events: none;
  opacity: 0.45;
}

.hero-spatial-depth--mid {
  inset: 25% 19%;
  border-color: rgb(var(--fl-accent-primary-rgb) / 0.09);
  transform: rotateX(66deg) translateZ(-55px);
}

.hero-spatial-world {
  position: absolute;
  inset: 4% 5% 8%;
  transform-style: preserve-3d;
}

.hero-spatial-connectors {
  position: absolute;
  inset: 4% 5% 8%;
  width: 90%;
  height: 88%;
  overflow: visible;
  pointer-events: none;
}

.hero-spatial-connectors marker path {
  fill: rgb(var(--fl-accent-primary-rgb) / 0.66);
}

.hero-spatial-connectors g {
  opacity: 0;
  transition: opacity var(--spatial-duration) var(--fl-ease-standard);
}

.hero-spatial-connectors line {
  vector-effect: non-scaling-stroke;
  stroke-width: 1;
  opacity: 0;
  transition: opacity var(--spatial-duration) ease, stroke var(--spatial-duration) ease;
}

.hero-spatial-connectors line[data-flow='data'] {
  stroke: rgb(185 195 220 / 0.44);
}

.hero-spatial-connectors line[data-flow='handoff'] {
  stroke: rgb(185 185 180 / 0.38);
  stroke-dasharray: 4 4;
}

.hero-spatial-connectors line[data-flow='automation'] {
  stroke: rgb(var(--fl-accent-primary-rgb) / 0.82);
}

.hero-diagram[data-phase-name='relationship'] .hero-spatial-connectors g[data-link-phase='relationship'],
.hero-diagram[data-phase-name='structure'] .hero-spatial-connectors g[data-link-phase='structure'],
.hero-diagram[data-phase-name='system'] .hero-spatial-connectors g[data-link-phase='system'] {
  opacity: 1;
}

.hero-diagram[data-phase-name='relationship'] .hero-spatial-connectors line[data-priority='primary'] {
  opacity: 1;
  stroke-width: 2.6;
}

.hero-diagram[data-phase-name='relationship'] .hero-spatial-connectors line[data-priority='secondary'] {
  opacity: 0.035;
  stroke-width: 0.7;
}

.hero-diagram[data-phase-name='relationship'] .hero-spatial-connectors line[data-flow='automation'][data-priority='primary'] {
  opacity: 1;
  stroke-width: 3;
}

.hero-diagram[data-phase-name='structure'] .hero-spatial-connectors line[data-priority='primary'] {
  opacity: 0.84;
  stroke-width: 1.9;
}

.hero-diagram[data-phase-name='structure'] .hero-spatial-connectors line[data-priority='secondary'] {
  opacity: 0.16;
  stroke-width: 0.9;
}

.hero-diagram[data-phase-name='system'] .hero-spatial-connectors line {
  opacity: 0.08;
  stroke-width: 0.8;
}

.hero-spatial-fragment {
  --x: 50%;
  --y: 50%;
  --z: 0px;
  --rx: 0deg;
  --ry: 0deg;
  --scale: 1;
  position: absolute;
  left: var(--x);
  top: var(--y);
  z-index: 3;
  width: clamp(5.2rem, 8vw, 7.2rem);
  min-height: 3.1rem;
  padding: 0.62rem 0.68rem;
  display: grid;
  align-content: center;
  gap: 0.12rem;
  transform-style: preserve-3d;
  transform: translate(-50%, -50%) translateZ(var(--z)) rotateX(var(--rx)) rotateY(var(--ry)) scale(var(--scale));
  background: rgb(20 20 23 / 0.95);
  border: 1px solid rgb(255 255 255 / 0.1);
  box-shadow: 0 12px 28px rgb(0 0 0 / 0.24);
  opacity: 0.82;
  transition:
    left var(--spatial-duration) var(--fl-ease-cinematic),
    top var(--spatial-duration) var(--fl-ease-cinematic),
    transform var(--spatial-duration) var(--fl-ease-cinematic),
    opacity var(--spatial-duration) ease,
    border-color var(--fl-motion-fast) ease,
    box-shadow var(--fl-motion-fast) ease;
}

.hero-spatial-fragment::before {
  content: '';
  position: absolute;
  left: -1px;
  top: 0.7rem;
  width: 2px;
  height: 1.15rem;
  background: var(--fl-accent-primary);
  opacity: 0.28;
}

.hero-spatial-fragment span {
  font-size: clamp(0.72rem, 1vw, 0.92rem);
  font-weight: 650;
  color: var(--fl-text-primary);
}

.hero-spatial-fragment small {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 0.48rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--fl-text-muted);
}

.hero-spatial-skeleton {
  position: absolute;
  left: 11%;
  right: 11%;
  top: 14%;
  bottom: 14%;
  z-index: 1;
  opacity: 0;
  transform: translateZ(-8px) scale(0.92);
  transition: opacity var(--spatial-duration) ease, transform var(--spatial-duration) var(--fl-ease-cinematic);
  pointer-events: none;
}

.hero-spatial-boundary {
  position: absolute;
  inset: 7% 5%;
  border: 1px solid rgb(var(--fl-accent-primary-rgb) / 0.27);
}

.hero-spatial-boundary::before,
.hero-spatial-boundary::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgb(var(--fl-accent-primary-rgb) / 0.18);
}

.hero-spatial-boundary::before { left: 33.333%; }
.hero-spatial-boundary::after { left: 66.666%; }

.hero-spatial-lane-label {
  position: absolute;
  top: 1.5%;
  transform: translateX(-50%);
  opacity: 0;
  font: 700 0.42rem/1 'Space Grotesk', system-ui, sans-serif;
  letter-spacing: 0.14em;
  color: rgb(255 255 255 / 0.28);
  transition: opacity var(--spatial-duration) ease;
}

.hero-spatial-lane-label--inputs { left: 18%; }
.hero-spatial-lane-label--workflow { left: 50%; }
.hero-spatial-lane-label--output { left: 82%; }

.hero-spatial-axis {
  position: absolute;
  background: rgb(var(--fl-accent-primary-rgb) / 0.34);
}

.hero-spatial-axis--x {
  left: 5%;
  right: 5%;
  top: 50%;
  height: 1px;
}

.hero-spatial-axis--y {
  top: 7%;
  bottom: 7%;
  left: 50%;
  width: 1px;
}

.hero-spatial-core {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 5;
  width: clamp(5.4rem, 8.5vw, 7.4rem);
  height: clamp(3.8rem, 5.8vw, 5rem);
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%) translateZ(30px) scale(0.76);
  opacity: 0;
  background: #161922;
  border: 1px solid rgb(var(--fl-accent-primary-rgb) / 0.5);
  box-shadow: 0 20px 40px rgb(0 0 0 / 0.28);
  transition:
    left var(--spatial-duration) var(--fl-ease-cinematic),
    transform var(--spatial-duration) var(--fl-ease-cinematic),
    opacity var(--spatial-duration) ease;
}

.hero-spatial-core span {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 0.58rem;
  line-height: 1.45;
  letter-spacing: 0.15em;
  text-align: center;
  color: var(--fl-text-secondary);
}

.hero-spatial-core b {
  color: var(--fl-accent-primary-hover);
}

.hero-spatial-transfer {
  position: absolute;
  left: 47%;
  top: 50%;
  z-index: 4;
  width: 18%;
  height: 1px;
  opacity: 0;
  transform: translateY(-50%) translateZ(70px);
  background: linear-gradient(90deg, rgb(var(--fl-accent-primary-rgb) / 0.2), rgb(var(--fl-accent-primary-rgb) / 0.92));
  pointer-events: none;
  transition: opacity var(--spatial-duration) ease, width var(--spatial-duration) var(--fl-ease-cinematic);
}

.hero-spatial-transfer::after {
  content: '';
  position: absolute;
  right: -1px;
  top: -3px;
  width: 7px;
  height: 7px;
  border-top: 1px solid var(--fl-accent-primary-hover);
  border-right: 1px solid var(--fl-accent-primary-hover);
  transform: rotate(45deg);
}

.hero-spatial-transfer span {
  position: absolute;
  left: 0;
  bottom: 0.55rem;
  white-space: nowrap;
  color: var(--fl-text-muted);
  font: 700 0.42rem/1 'Space Grotesk', system-ui, sans-serif;
  letter-spacing: 0.1em;
}

.hero-spatial-output {
  position: absolute;
  left: 79%;
  top: 51%;
  z-index: 6;
  width: clamp(7.2rem, 12vw, 10rem);
  min-height: clamp(5.2rem, 7vw, 6.8rem);
  padding: 0.8rem;
  display: grid;
  align-content: center;
  gap: 0.3rem;
  transform: translate(-50%, -50%) translateZ(95px) scale(0.82);
  opacity: 0;
  background: #171b25;
  border: 1px solid rgb(var(--fl-accent-primary-rgb) / 0.48);
  box-shadow: 0 24px 48px rgb(0 0 0 / 0.3);
  transition: transform var(--spatial-duration) var(--fl-ease-cinematic), opacity var(--spatial-duration) ease;
}

.hero-spatial-output span,
.hero-spatial-output small {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 0.45rem;
  letter-spacing: 0.11em;
  color: var(--fl-text-muted);
}

.hero-spatial-output strong {
  font-size: clamp(0.72rem, 1.05vw, 0.92rem);
  color: var(--fl-text-primary);
}

.hero-spatial-legend {
  position: absolute;
  left: 0.75rem;
  right: 0.75rem;
  bottom: 0.55rem;
  z-index: 8;
  display: flex;
  gap: 0.8rem;
  font: 700 0.42rem/1.2 'Space Grotesk', system-ui, sans-serif;
  letter-spacing: 0.08em;
  color: rgb(255 255 255 / 0.28);
  pointer-events: none;
}

/* CHAOS: deliberately no center, skeleton, or directional logic. */
.hero-diagram[data-phase-name='chaos'] .hero-spatial-depth {
  opacity: 0.22;
}

.hero-diagram[data-phase-name='chaos'] .hero-spatial-fragment {
  --scale: 0.96;
  opacity: 0.72;
  border-color: rgb(255 255 255 / 0.075);
  box-shadow: 0 8px 20px rgb(0 0 0 / 0.16);
}

.hero-diagram[data-phase-name='chaos'] [data-node='orders'] { --x: 18%; --y: 23%; --z: 70px; --rx: -8deg; --ry: 10deg; }
.hero-diagram[data-phase-name='chaos'] [data-node='inventory'] { --x: 68%; --y: 19%; --z: -70px; --rx: 6deg; --ry: -10deg; opacity: 0.48; }
.hero-diagram[data-phase-name='chaos'] [data-node='line'] { --x: 82%; --y: 42%; --z: 45px; --rx: -3deg; --ry: -12deg; }
.hero-diagram[data-phase-name='chaos'] [data-node='excel'] { --x: 21%; --y: 69%; --z: -82px; --rx: 9deg; --ry: 7deg; opacity: 0.42; }
.hero-diagram[data-phase-name='chaos'] [data-node='customer'] { --x: 47%; --y: 18%; --z: 18px; --rx: -7deg; --ry: 4deg; }
.hero-diagram[data-phase-name='chaos'] [data-node='report'] { --x: 69%; --y: 73%; --z: 60px; --rx: 7deg; --ry: 10deg; }
.hero-diagram[data-phase-name='chaos'] [data-node='approval'] { --x: 43%; --y: 78%; --z: -34px; --rx: -6deg; --ry: -5deg; opacity: 0.58; }
.hero-diagram[data-phase-name='chaos'] [data-node='lead'] { --x: 14%; --y: 48%; --z: 30px; --rx: 5deg; --ry: 12deg; }

/* RELATIONSHIP: 3 primary relationships, context falls away. */
.hero-diagram[data-phase-name='relationship'] [data-node='orders'] { --x: 48%; --y: 38%; --z: 58px; --scale: 1.1; opacity: 1; border-color: rgb(var(--fl-accent-primary-rgb) / 0.76); box-shadow: 0 16px 34px rgb(0 0 0 / 0.26), 0 0 0 1px rgb(var(--fl-accent-primary-rgb) / 0.12); }
.hero-diagram[data-phase-name='relationship'] [data-node='inventory'] { --x: 20%; --y: 24%; --z: 24px; --scale: 1.01; opacity: 0.9; border-color: rgb(var(--fl-accent-primary-rgb) / 0.34); }
.hero-diagram[data-phase-name='relationship'] [data-node='customer'] { --x: 76%; --y: 50%; --z: 28px; --scale: 1.01; opacity: 0.9; border-color: rgb(var(--fl-accent-primary-rgb) / 0.34); }
.hero-diagram[data-phase-name='relationship'] [data-node='approval'] { --x: 48%; --y: 66%; --z: 20px; --scale: 1.01; opacity: 0.9; border-color: rgb(var(--fl-accent-primary-rgb) / 0.34); }
.hero-diagram[data-phase-name='relationship'] [data-node='line'] { --x: 82%; --y: 25%; --z: -34px; --scale: 0.8; opacity: 0.08; }
.hero-diagram[data-phase-name='relationship'] [data-node='excel'] { --x: 19%; --y: 73%; --z: -46px; --scale: 0.8; opacity: 0.08; }
.hero-diagram[data-phase-name='relationship'] [data-node='report'] { --x: 78%; --y: 74%; --z: -38px; --scale: 0.8; opacity: 0.08; }
.hero-diagram[data-phase-name='relationship'] [data-node='lead'] { --x: 14%; --y: 49%; --z: -32px; --scale: 0.8; opacity: 0.08; }

/* STRUCTURE: strongest order-forming turn. */
.hero-diagram[data-phase-name='structure'] .hero-spatial-skeleton {
  opacity: 1;
  transform: translateZ(-8px) scale(1);
}

.hero-diagram[data-phase-name='structure'] .hero-spatial-boundary {
  border-color: rgb(var(--fl-accent-primary-rgb) / 0.34);
  background: linear-gradient(90deg, rgb(255 255 255 / 0.012), rgb(var(--fl-accent-primary-rgb) / 0.028), rgb(255 255 255 / 0.012));
}

.hero-diagram[data-phase-name='structure'] .hero-spatial-axis--x {
  opacity: 0.42;
}

.hero-diagram[data-phase-name='structure'] .hero-spatial-axis--y {
  opacity: 0;
}

.hero-diagram[data-phase-name='structure'] .hero-spatial-lane-label {
  opacity: 1;
}

.hero-diagram[data-phase-name='structure'] .hero-spatial-core {
  opacity: 0;
}

.hero-diagram[data-phase-name='structure'] .hero-spatial-fragment {
  --z: 8px;
  --rx: 0deg;
  --ry: 0deg;
  --scale: 0.92;
  opacity: 0.72;
  border-color: rgb(255 255 255 / 0.1);
  box-shadow: 0 8px 18px rgb(0 0 0 / 0.14);
}

.hero-diagram[data-phase-name='structure'] [data-node='line'] { --x: 18%; --y: 20%; }
.hero-diagram[data-phase-name='structure'] [data-node='excel'] { --x: 18%; --y: 40%; }
.hero-diagram[data-phase-name='structure'] [data-node='lead'] { --x: 18%; --y: 60%; }
.hero-diagram[data-phase-name='structure'] [data-node='customer'] { --x: 18%; --y: 80%; }

.hero-diagram[data-phase-name='structure'] [data-node='orders'] { --x: 50%; --y: 26%; opacity: 1; border-color: rgb(var(--fl-accent-primary-rgb) / 0.42); }
.hero-diagram[data-phase-name='structure'] [data-node='inventory'] { --x: 50%; --y: 50%; opacity: 1; border-color: rgb(var(--fl-accent-primary-rgb) / 0.42); }
.hero-diagram[data-phase-name='structure'] [data-node='approval'] { --x: 50%; --y: 74%; opacity: 1; border-color: rgb(var(--fl-accent-primary-rgb) / 0.42); }

.hero-diagram[data-phase-name='structure'] [data-node='report'] { --x: 82%; --y: 50%; --z: 20px; --scale: 1; opacity: 1; border-color: rgb(var(--fl-accent-primary-rgb) / 0.58); }

/* SYSTEM OUTPUT: peripherals recede; Core -> Output owns the frame. */
.hero-diagram[data-phase-name='system'] .hero-spatial-depth {
  opacity: 0.14;
}

.hero-diagram[data-phase-name='system'] .hero-spatial-skeleton {
  opacity: 0.1;
  transform: translateZ(-12px) scale(0.96);
}

.hero-diagram[data-phase-name='system'] .hero-spatial-fragment {
  --scale: 0.72;
  --rx: 0deg;
  --ry: 0deg;
  opacity: 0.12;
  border-color: rgb(255 255 255 / 0.05);
  box-shadow: none;
}

.hero-diagram[data-phase-name='system'] [data-node='orders'] { --x: 14%; --y: 28%; --z: -18px; }
.hero-diagram[data-phase-name='system'] [data-node='inventory'] { --x: 30%; --y: 21%; --z: -24px; }
.hero-diagram[data-phase-name='system'] [data-node='line'] { --x: 61%; --y: 27%; --z: -20px; }
.hero-diagram[data-phase-name='system'] [data-node='excel'] { --x: 14%; --y: 70%; --z: -26px; }
.hero-diagram[data-phase-name='system'] [data-node='customer'] { --x: 30%; --y: 78%; --z: -22px; }
.hero-diagram[data-phase-name='system'] [data-node='report'] { --x: 61%; --y: 70%; --z: -18px; }
.hero-diagram[data-phase-name='system'] [data-node='approval'] { --x: 28%; --y: 50%; --z: -30px; --scale: 0.62; opacity: 0.025; }
.hero-diagram[data-phase-name='system'] [data-node='lead'] { --x: 59%; --y: 50%; --z: -28px; --scale: 0.62; opacity: 0.025; }

.hero-diagram[data-phase-name='system'] .hero-spatial-core {
  left: 25%;
  opacity: 1;
  transform: translate(-50%, -50%) translateZ(88px) scale(1.06);
  border-color: rgb(var(--fl-accent-primary-rgb) / 0.72);
  box-shadow: 0 26px 52px rgb(0 0 0 / 0.38), 0 0 24px rgb(var(--fl-accent-primary-rgb) / 0.16);
}

.hero-diagram[data-phase-name='system'] .hero-spatial-transfer {
  left: 38%;
  opacity: 1;
}

.hero-diagram[data-phase-name='system'] .hero-spatial-output {
  left: 70%;
  opacity: 1;
  transform: translate(-50%, -50%) translateZ(112px) scale(1);
}

@media (max-width: 768px) {
  .hero-spatial-field {
    perspective: 850px;
  }

  .hero-spatial-world {
    inset: 3% 3% 9%;
  }

  .hero-spatial-connectors {
    inset: 3% 3% 9%;
    width: 94%;
    height: 88%;
  }

  .hero-spatial-fragment {
    width: clamp(4.2rem, 18vw, 5.5rem);
    min-height: 2.7rem;
    padding: 0.48rem 0.5rem;
  }

  .hero-spatial-fragment span {
    font-size: clamp(0.64rem, 2.7vw, 0.78rem);
  }

  .hero-spatial-core {
    width: clamp(4.8rem, 20vw, 6rem);
    height: clamp(3.35rem, 14vw, 4rem);
  }

  .hero-spatial-output {
    left: 79%;
    width: clamp(6.5rem, 27vw, 8rem);
    min-height: 4.8rem;
    padding: 0.65rem;
  }

  .hero-spatial-transfer {
    left: 48%;
    width: 16%;
  }

  .hero-diagram[data-phase-name='system'] .hero-spatial-transfer {
    left: 39%;
  }

  .hero-diagram[data-phase-name='relationship'] [data-node='inventory'] { --x: 18%; --y: 23%; }
  .hero-diagram[data-phase-name='relationship'] [data-node='orders'] { --x: 48%; --y: 38%; }
  .hero-diagram[data-phase-name='relationship'] [data-node='customer'] { --x: 82%; --y: 50%; }
  .hero-diagram[data-phase-name='relationship'] [data-node='approval'] { --x: 48%; --y: 68%; }
  .hero-diagram[data-phase-name='relationship'] [data-node='line'] { --x: 84%; --y: 22%; }
  .hero-diagram[data-phase-name='relationship'] [data-node='lead'] { --x: 12%; --y: 50%; }
  .hero-diagram[data-phase-name='relationship'] [data-node='excel'] { --x: 18%; --y: 77%; }
  .hero-diagram[data-phase-name='relationship'] [data-node='report'] { --x: 83%; --y: 77%; }
}

@media (max-width: 560px) {
  .hero-spatial-legend {
    gap: 0.5rem;
    font-size: 0.36rem;
  }

  .hero-spatial-transfer span {
    display: none;
  }

  .hero-diagram[data-phase-name='relationship'] [data-node='orders'] { --x: 48%; --y: 38%; }
  .hero-diagram[data-phase-name='relationship'] [data-node='customer'] { --x: 82%; --y: 50%; }
  .hero-diagram[data-phase-name='relationship'] [data-node='approval'] { --x: 48%; --y: 68%; }
}

@media (max-width: 359px) {
  .hero-spatial-fragment {
    width: 3.85rem;
    min-height: 2.35rem;
    padding: 0.35rem 0.4rem;
  }

  .hero-spatial-fragment span {
    font-size: 0.61rem;
  }

  .hero-spatial-fragment small {
    font-size: 0.38rem;
  }

  .hero-spatial-core {
    width: 4.4rem;
    height: 3rem;
  }

  .hero-spatial-output {
    width: 6.1rem;
    min-height: 4.25rem;
    padding: 0.5rem;
  }

  .hero-spatial-output strong {
    font-size: 0.66rem;
  }

  .hero-spatial-transfer {
    left: 49%;
    width: 14%;
  }

  .hero-diagram[data-phase-name='system'] .hero-spatial-transfer {
    left: 40%;
  }

  .hero-spatial-legend {
    display: none;
  }
}

/* Slice C: interruptible motion adapter. Static phase geometry remains authoritative. */
.hero-diagram[data-transition-to='chaos'] { --hero-spatial-duration: 300ms; }
.hero-diagram[data-transition-to='relationship'] { --hero-spatial-duration: 340ms; }
.hero-diagram[data-transition-to='structure'] { --hero-spatial-duration: 460ms; }
.hero-diagram[data-transition-to='system'] { --hero-spatial-duration: 420ms; }

.hero-spatial-world,
.hero-spatial-connectors {
  transform-origin: 50% 50%;
  transition: transform 180ms var(--fl-ease-standard);
}

.hero-spatial-field[data-observation-tilt='nw'] .hero-spatial-world,
.hero-spatial-field[data-observation-tilt='nw'] .hero-spatial-connectors { transform: rotateX(1.2deg) rotateY(-1.5deg); }
.hero-spatial-field[data-observation-tilt='n'] .hero-spatial-world,
.hero-spatial-field[data-observation-tilt='n'] .hero-spatial-connectors { transform: rotateX(1.2deg); }
.hero-spatial-field[data-observation-tilt='ne'] .hero-spatial-world,
.hero-spatial-field[data-observation-tilt='ne'] .hero-spatial-connectors { transform: rotateX(1.2deg) rotateY(1.5deg); }
.hero-spatial-field[data-observation-tilt='w'] .hero-spatial-world,
.hero-spatial-field[data-observation-tilt='w'] .hero-spatial-connectors { transform: rotateY(-1.5deg); }
.hero-spatial-field[data-observation-tilt='e'] .hero-spatial-world,
.hero-spatial-field[data-observation-tilt='e'] .hero-spatial-connectors { transform: rotateY(1.5deg); }
.hero-spatial-field[data-observation-tilt='sw'] .hero-spatial-world,
.hero-spatial-field[data-observation-tilt='sw'] .hero-spatial-connectors { transform: rotateX(-1.2deg) rotateY(-1.5deg); }
.hero-spatial-field[data-observation-tilt='s'] .hero-spatial-world,
.hero-spatial-field[data-observation-tilt='s'] .hero-spatial-connectors { transform: rotateX(-1.2deg); }
.hero-spatial-field[data-observation-tilt='se'] .hero-spatial-world,
.hero-spatial-field[data-observation-tilt='se'] .hero-spatial-connectors { transform: rotateX(-1.2deg) rotateY(1.5deg); }

.hero-diagram[data-transition-to='relationship'] .hero-spatial-connectors g[data-link-phase='relationship'] {
  transition-delay: 70ms;
}

.hero-diagram[data-transition-to='structure'] .hero-spatial-skeleton {
  transition-delay: 55ms;
}

.hero-diagram[data-transition-to='system'] .hero-spatial-transfer,
.hero-diagram[data-transition-to='system'] .hero-spatial-output {
  transition-delay: 65ms;
}

.hero-spatial-transfer::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 1.7rem;
  height: 1px;
  opacity: 0;
  transform: translate(-100%, -50%);
  background: linear-gradient(90deg, transparent, rgb(var(--fl-accent-primary-rgb) / 0.92), transparent);
  pointer-events: none;
}

@keyframes hero-spatial-transfer-cue {
  0% { left: 0; opacity: 0; }
  22% { opacity: 0.85; }
  100% { left: 100%; opacity: 0; }
}

.hero-diagram.is-system-arrival:not(.is-reduced):not(.is-motion-paused) .hero-spatial-transfer::before {
  animation: hero-spatial-transfer-cue 520ms var(--fl-ease-cinematic) 70ms 1 both;
}

.hero-diagram.is-motion-paused .hero-spatial-world,
.hero-diagram.is-motion-paused .hero-spatial-connectors,
.hero-diagram.is-motion-paused .hero-spatial-connectors g,
.hero-diagram.is-motion-paused .hero-spatial-connectors line,
.hero-diagram.is-motion-paused .hero-spatial-fragment,
.hero-diagram.is-motion-paused .hero-spatial-skeleton,
.hero-diagram.is-motion-paused .hero-spatial-core,
.hero-diagram.is-motion-paused .hero-spatial-transfer,
.hero-diagram.is-motion-paused .hero-spatial-output {
  transition: none !important;
}

.hero-diagram.is-motion-paused .hero-spatial-transfer::before {
  animation-play-state: paused !important;
}

@media (prefers-reduced-motion: reduce) {
  .hero-spatial-world,
  .hero-spatial-connectors,
  .hero-spatial-connectors g,
  .hero-spatial-connectors line,
  .hero-spatial-fragment,
  .hero-spatial-skeleton,
  .hero-spatial-core,
  .hero-spatial-transfer,
  .hero-spatial-output {
    transition: none !important;
    animation: none !important;
  }

  .hero-spatial-world,
  .hero-spatial-connectors {
    transform: none !important;
  }

  .hero-spatial-transfer::before {
    animation: none !important;
  }
}

.hero-diagram-steps {
  --diagram-step-gap: var(--fl-space-2);
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--diagram-step-gap);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Sliding active bar — carries the "which beat" signal */
.hero-diagram-steps::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: calc((100% - 3 * var(--diagram-step-gap)) / 4);
  height: 2px;
  border-radius: 1px;
  background: var(--fl-accent-primary);
  transform: translateX(0);
  transition: transform 0.55s var(--fl-ease-cinematic);
  pointer-events: none;
}

.hero-diagram[data-phase='1'] .hero-diagram-steps::before {
  transform: translateX(calc(100% + var(--diagram-step-gap)));
}
.hero-diagram[data-phase='2'] .hero-diagram-steps::before {
  transform: translateX(calc(2 * (100% + var(--diagram-step-gap))));
}
.hero-diagram[data-phase='3'] .hero-diagram-steps::before {
  transform: translateX(calc(3 * (100% + var(--diagram-step-gap))));
}

.hero-diagram-steps li {
  position: relative;
  text-align: center;
  font-size: var(--fl-type-meta);
  color: var(--fl-text-muted);
  padding: var(--fl-space-3) 0 var(--fl-space-1);
  border-top: 2px solid rgb(255 255 255 / 0.08);
  transition: color var(--fl-motion-fast) var(--fl-ease-standard);
}

.hero-diagram-step-btn {
  all: unset;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 2.75rem;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  cursor: pointer;
  touch-action: manipulation;
}

.hero-diagram-step-btn:focus-visible {
  outline: 2px solid var(--fl-accent-primary);
  outline-offset: 3px;
  border-radius: var(--fl-radius-sm);
}

.hero-diagram-steps li.is-done {
  color: var(--fl-text-secondary);
}

.hero-diagram-steps li.is-active {
  color: var(--fl-text-primary);
}

.hero-diagram-steps li.is-active span {
  display: inline-block;
  transform: translateY(1px);
}

/* Compact / Narrow */
@media (max-width: 1024px) {
  .hero-layout {
    grid-template-columns: 1fr;
    gap: var(--fl-space-7);
  }

  .hero-copy {
    max-width: 40rem;
  }

  .hero-diagram {
    width: 100%;
    max-width: 34rem;
    justify-self: center;
  }
}

@media (max-width: 768px) {
  #hero {
    align-items: flex-start;
    padding-top: calc(var(--fl-space-8) + 3.5rem + var(--fl-demo-banner-h, 2.25rem));
    padding-bottom: var(--fl-space-7);
    min-height: auto;
  }

  .hero-layout {
    gap: var(--fl-space-6);
  }

  .hero-brand {
    font-size: clamp(1.75rem, 9vw, 2.35rem);
  }

  .hero-headline {
    font-size: clamp(1.65rem, 7.5vw, 2.25rem);
  }

  .hero-sub {
    max-width: none;
    font-size: var(--fl-type-body-md);
  }

  .hero-diagram-stage {
    padding: var(--fl-space-4);
    gap: var(--fl-space-2);
  }

  .diagram-field {
    --diagram-hub-size: 4.75rem;
    --diagram-ring-size: 6.25rem;
    --diagram-orbit-size: min(78%, 18rem);
    --diagram-output-y: 88%;
    aspect-ratio: 1 / 1;
  }

  .hero-diagram[data-phase='0'] .leaf-a { --leaf-x: 16%; --leaf-y: 14%; }
  .hero-diagram[data-phase='0'] .leaf-b { --leaf-x: 84%; --leaf-y: 13%; }
  .hero-diagram[data-phase='0'] .leaf-c { --leaf-x: 16%; --leaf-y: 84%; }
  .hero-diagram[data-phase='0'] .leaf-d { --leaf-x: 84%; --leaf-y: 86%; }

  .hero-diagram[data-phase='1'] .leaf-a { --leaf-x: 26%; --leaf-y: 24%; }
  .hero-diagram[data-phase='1'] .leaf-b { --leaf-x: 74%; --leaf-y: 22%; }
  .hero-diagram[data-phase='1'] .leaf-c { --leaf-x: 26%; --leaf-y: 74%; }
  .hero-diagram[data-phase='1'] .leaf-d { --leaf-x: 74%; --leaf-y: 76%; }

  .hero-diagram[data-phase='2'] .leaf-a,
  .hero-diagram[data-phase='3'] .leaf-a { --leaf-x: 22%; --leaf-y: 20%; }
  .hero-diagram[data-phase='2'] .leaf-b,
  .hero-diagram[data-phase='3'] .leaf-b { --leaf-x: 78%; --leaf-y: 20%; }
  .hero-diagram[data-phase='2'] .leaf-c,
  .hero-diagram[data-phase='3'] .leaf-c { --leaf-x: 22%; --leaf-y: 76%; }
  .hero-diagram[data-phase='2'] .leaf-d,
  .hero-diagram[data-phase='3'] .leaf-d { --leaf-x: 78%; --leaf-y: 76%; }

  .diagram-output {
    min-width: 8.5rem;
    padding: 0.55rem 0.85rem;
  }

  .diagram-output-meta {
    font-size: 0.65rem;
  }

  .hero-tag-panel {
    position: fixed;
    left: var(--fl-page-gutter-mobile);
    right: var(--fl-page-gutter-mobile);
    top: auto;
    bottom: var(--fl-space-5);
    width: auto;
  }

  .hero-tag-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-block: 0.55rem;
  }
}

/* ============================================================
   頁首導覽 — I1 Application Shell + Header
   Sticky · Hero/Compact states · Desktop current-section · Outline Contact CTA
   ============================================================ */

.site-nav {
  position: fixed;
  top: var(--fl-demo-banner-h, 2.25rem);
  left: 0;
  right: 0;
  z-index: 10;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition:
    background var(--fl-motion-standard) var(--fl-ease-standard),
    border-color var(--fl-motion-standard) var(--fl-ease-standard),
    backdrop-filter var(--fl-motion-standard) var(--fl-ease-standard),
    padding var(--fl-motion-standard) var(--fl-ease-standard);
}

.site-nav.is-scrolled {
  background: rgb(20 20 22 / 0.88);
  border-bottom-color: var(--fl-stroke-subtle);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.site-nav.is-mobile-menu-open {
  background: rgb(20 20 22 / 0.96);
  border-bottom-color: var(--fl-stroke-interactive);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.site-nav-inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fl-space-5);
  padding-block: var(--fl-space-4);
  transition: padding-block var(--fl-motion-standard) var(--fl-ease-standard);
}

.site-nav.is-scrolled .site-nav-inner {
  padding-block: var(--fl-space-3);
}

.site-nav-brand {
  display: inline-flex;
  align-items: center;
  color: var(--fl-text-primary);
  flex-shrink: 0;
  line-height: 0;
}

.site-nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--fl-space-5);
  flex: 1;
  min-width: 0;
}

.site-nav-link {
  position: relative;
  font-size: var(--fl-type-body-sm);
  color: var(--fl-text-secondary);
  transition: color var(--fl-motion-fast) var(--fl-ease-standard);
  white-space: nowrap;
  padding-block: var(--fl-space-2);
}

.site-nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 2px;
  background: var(--fl-accent-primary);
  opacity: 0;
  transition:
    right var(--fl-motion-fast) var(--fl-ease-standard),
    opacity var(--fl-motion-fast) var(--fl-ease-standard);
}

.site-nav-link:hover {
  color: var(--fl-text-primary);
}

.site-nav-link:hover::after {
  right: 0;
  opacity: 0.55;
}

/* Desktop current-section: stable static marker (viewport-owned). */
.site-nav-link.is-current {
  color: var(--fl-text-primary);
}

.site-nav-link.is-current::after {
  right: 0;
  opacity: 1;
}

.site-nav-cta {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.5rem 1rem;
  font-size: var(--fl-type-body-sm);
  color: var(--fl-text-primary);
  border: 1px solid var(--fl-stroke-interactive);
  border-radius: var(--fl-radius-sm);
  background: transparent;
  transition:
    color var(--fl-motion-fast) var(--fl-ease-standard),
    border-color var(--fl-motion-fast) var(--fl-ease-standard),
    background var(--fl-motion-fast) var(--fl-ease-standard);
}

.site-nav-cta:hover {
  border-color: var(--fl-accent-primary);
  background: var(--fl-accent-primary-soft);
}

.site-nav-brand:focus-visible,
.site-nav-link:focus-visible,
.site-nav-cta:focus-visible {
  outline: none;
  box-shadow: var(--fl-focus-ring);
  border-radius: var(--fl-radius-xs);
}

.site-nav-mobile {
  position: relative;
  z-index: 3;
  display: none;
  margin-left: auto;
}

.site-nav-menu-trigger {
  list-style: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  min-height: 44px;
  padding: 0.5rem 0.75rem;
  color: var(--fl-text-primary);
  background: transparent;
  border: 1px solid var(--fl-stroke-interactive);
  border-radius: var(--fl-radius-xs);
  cursor: pointer;
}

.site-nav-menu-trigger {
  transition:
    color var(--fl-motion-fast) var(--fl-ease-standard),
    border-color var(--fl-motion-fast) var(--fl-ease-standard),
    background var(--fl-motion-fast) var(--fl-ease-standard);
}

.site-nav-mobile[open] .site-nav-menu-trigger {
  border-color: var(--fl-accent-primary);
  background: var(--fl-accent-primary-soft);
}

.site-nav-menu-trigger::-webkit-details-marker {
  display: none;
}

.site-nav-menu-trigger::marker {
  content: '';
}

.site-nav-menu-trigger:focus-visible,
.site-nav-mobile-cta:focus-visible {
  outline: none;
  box-shadow: var(--fl-focus-ring);
}

.site-nav-menu-copy {
  display: grid;
  justify-items: end;
  gap: 0.12rem;
  min-width: 0;
}

.site-nav-menu-current {
  max-width: 7rem;
  overflow: hidden;
  color: var(--fl-text-primary);
  font-size: var(--fl-type-body-sm);
  font-weight: 600;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.site-nav-menu-label {
  color: var(--fl-text-muted);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1;
}

.site-nav-menu-icon {
  position: relative;
  width: 14px;
  height: 10px;
  flex: none;
}

.site-nav-menu-icon::before,
.site-nav-menu-icon::after {
  content: '';
  position: absolute;
  left: 0;
  width: 14px;
  height: 1px;
  background: currentColor;
  transform-origin: center;
}

.site-nav-menu-icon::before,
.site-nav-menu-icon::after {
  transition: transform var(--fl-motion-fast) var(--fl-ease-standard);
}

.site-nav-menu-icon::before { top: 1px; }
.site-nav-menu-icon::after { bottom: 1px; }

.site-nav-mobile[open] .site-nav-menu-icon::before {
  transform: translateY(3.5px) rotate(45deg);
}

.site-nav-mobile[open] .site-nav-menu-icon::after {
  transform: translateY(-3.5px) rotate(-45deg);
}

.site-nav-mobile-panel {
  position: absolute;
  top: calc(100% + var(--fl-space-2));
  right: 0;
  width: min(22rem, calc(100vw - (2 * var(--fl-page-gutter-mobile, 1.25rem))));
  padding: 0.5rem;
  background: rgb(20 20 22 / 0.98);
  border: 1px solid var(--fl-stroke-subtle);
  border-radius: var(--fl-radius-sm);
  box-shadow: var(--fl-shadow-material-elevated);
  max-height: calc(100svh - var(--fl-demo-banner-h, 2.25rem) - 5rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.site-nav-mobile-links {
  display: grid;
}

.site-nav-mobile-links .site-nav-link {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 0.75rem 0.85rem;
  white-space: normal;
}

.site-nav-mobile-links .site-nav-link::after {
  left: 0.85rem;
  right: calc(100% - 0.85rem);
  bottom: 0.55rem;
  height: 1px;
}

.site-nav-mobile-links .site-nav-link:hover::after,
.site-nav-mobile-links .site-nav-link.is-current::after {
  right: 0.85rem;
}

.site-nav-mobile-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  margin-top: 0.5rem;
  padding: 0.7rem 0.9rem;
  color: var(--fl-text-primary);
  font-size: var(--fl-type-body-sm);
  font-weight: 600;
  border: 1px solid var(--fl-accent-primary);
  border-radius: var(--fl-radius-xs);
  background: var(--fl-accent-primary-soft);
}

.site-nav-mobile-cta.is-current {
  color: var(--fl-text-inverse);
  background: var(--fl-accent-primary);
  border-color: var(--fl-accent-primary);
}

.site-nav-mobile[open] .site-nav-mobile-panel {
  animation: fl-mobile-nav-enter 160ms var(--fl-ease-standard) both;
}

.site-nav-mobile-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1;
  background: rgb(5 8 12 / 0.46);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

@keyframes fl-mobile-nav-enter {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.99);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Narrow: brand + native mobile menu. Desktop links/CTA stay untouched above. */
@media (max-width: 768px) {
  .site-nav-links,
  .site-nav-cta {
    display: none;
  }

  .site-nav-mobile {
    display: block;
  }

  .site-nav.is-mobile-menu-open .site-nav-mobile-backdrop {
    display: block;
  }
}

/* ============================================================
   痛點診斷
   ============================================================ */

.diagnose-head { margin-bottom: var(--gap-lg); }

.diagnose-title {
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 700;
  margin-bottom: var(--gap-xs);
}

.diagnose-hint {
  color: var(--text-dim);
  margin: 0 0 var(--gap-sm);
}

.skip-link {
  display: inline-block;
  color: var(--text-mute);
  font-size: 14px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 2px;
  transition: color .25s var(--ease), border-color .25s var(--ease);
}

.skip-link:hover {
  color: var(--text);
  border-color: var(--violet-lt);
}

.pain-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-sm);
}

.pain-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--gap-sm);
  min-height: 116px;
  padding: var(--gap-md);
  text-align: left;
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  color: var(--text);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.55;
  transition: transform .3s var(--ease), border-color .3s var(--ease),
              box-shadow .3s var(--ease), background .3s var(--ease);
}

.pain-card:hover,
.pain-card:focus-visible {
  transform: translateY(-3px);
  border-color: var(--violet-lt);
  background: rgb(var(--violet-rgb) / .12);
  box-shadow: 0 14px 40px rgb(var(--violet-rgb) / .25);
}

.pain-card:focus-visible { outline: 2px solid var(--violet-lt); outline-offset: 3px; }

.pain-arrow {
  flex: none;
  color: var(--violet-lt);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}

.pain-card:hover .pain-arrow,
.pain-card:focus-visible .pain-arrow { opacity: 1; transform: translateX(0); }

@media (max-width: 900px) {
  .pain-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .pain-grid { grid-template-columns: 1fr; }
  .pain-card { min-height: 64px; padding: var(--gap-sm) var(--gap-md); }
}

/* ============================================================
   診斷結果
   ============================================================ */

/* ---------- 主秀舞台（spec §5「點下痛點」）----------
   網格與結果區共用同一塊版面空間。收合不能一步到位：
   display:none 的卡片沒辦法飛散，所以中間多一個 flying 狀態——
   網格抬離文件流、絕對定位釘在原位（stage 的左上角就是網格原本的
   左上角），結果區同一幀就接手版面空間往下推。飛散結束才真的
   collapsed。這樣任何一幀都至少有一邊在畫面上，不會出現空窗。 */

.diagnose-stage { position: relative; }

/* 飛散中的卡片會往容器外側移動；不裁掉的話整份文件會多出短暫的
   水平／垂直捲動。overflow:clip 不會產生捲動容器（focus 也就不會
   把它捲走），舊版瀏覽器退回 hidden。 */
.diagnose-stage.is-flying {
  overflow: hidden;
  overflow: clip;
}

.pain-grid[data-state="collapsed"] { display: none; }

.pain-grid[data-state="flying"] {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  /* 飛行中的卡片是動畫殘影，不該接到點擊 */
  pointer-events: none;
}

.result {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(24px, 4vw, 48px);
  position: relative;
  /* 這裡刻意沒有 overflow: hidden——被選中的那張卡要從網格裡（結果區
     外面）飛進來，裁掉就看不到飛行過程。原本 overflow 只是為了讓
     ::before 的漸層不要溢出圓角，改成讓 ::before 自己跟著圓角走。 */
}

.result[hidden] { display: none; }

.result.is-leaving { pointer-events: none; }

.result::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(60% 60% at 8% 0%, rgb(var(--violet-rgb) / .22), transparent 70%);
  pointer-events: none;
}

.result-inner { position: relative; }

/* ---------- 被選中那張卡的落點（spec §5「放大移至左上」）---------- */

.result-head {
  display: flex;
  align-items: flex-start;
  gap: var(--gap-md);
  margin-bottom: var(--gap-lg);
}

/* 外層只負責「佔住位置」，永遠不動；真正飛行的是裡面那層絕對定位的
   .result-promoted-card。這樣 FLIP 動畫改它的寬高時，旁邊的標題不會
   跟著每一幀重新斷行。 */
.result-promoted {
  position: relative;
  flex: 0 0 36%;
  min-width: 232px;
  min-height: 168px;
}

.result-promoted-card {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--gap-xs);
  padding: var(--gap-md);
  overflow: hidden;
  /* 視覺上就是痛點卡被「選中」的樣子（同 .pain-card:hover 的語彙），
     飛行結束後與飛進來的那張卡無縫接上。
     紫色只有 12% 不透明，所以底下要墊一層不透明的 --bg-elev：飛行途中
     這張卡會從標題上方經過（窄螢幕是直接蓋過去），只有半透明底色的話
     標題會透出來，看起來像兩層字疊在一起。疊上去之後靜止時的顏色
     與原本完全相同（結果區底色本來就是 --bg-elev）。 */
  background:
    linear-gradient(0deg, rgb(var(--violet-rgb) / .12), rgb(var(--violet-rgb) / .12)),
    var(--bg-elev);
  border: 1px solid var(--violet-lt);
  border-radius: var(--r-md);
  box-shadow: 0 14px 40px rgb(var(--violet-rgb) / .25);
}

.result-promoted-label {
  font-size: 11px;
  letter-spacing: .24em;
  color: var(--violet-lt);
}

.result-promoted-text {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.55;
}

.result-head-text {
  flex: 1 1 auto;
  /* 沒有這行，長字串會把 flex 項目撐破容器（窄螢幕會產生水平捲動） */
  min-width: 0;
}

.result-title {
  font-size: clamp(24px, 3.4vw, 38px);
  font-weight: 700;
  margin-bottom: var(--gap-sm);
}

.result-title:focus { outline: none; }

.result-amplify {
  max-width: 62ch;
  color: var(--text-dim);
  margin: 0;
}

.result-steps {
  /* 節點與連接線的幾何都從這三個值算出來，改一個就整組跟著對齊 */
  --dot-size: 9px;
  --dot-top: 24px;
  --dot-gutter: 26px;

  list-style: none;
  margin: 0 0 var(--gap-lg);
  padding: 0;
  display: grid;
  gap: var(--gap-sm);
}

.result-step {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--gap-sm);
  padding: var(--gap-sm) 0 var(--gap-sm) var(--dot-gutter);
  border-top: 1px solid var(--line);
}

.step-dot {
  position: absolute;
  left: 0;
  top: var(--dot-top);
  width: var(--dot-size);
  height: var(--dot-size);
  border-radius: 50%;
  background: var(--bg-elev);
  border: 2px solid var(--violet-lt);
  box-shadow: 0 0 10px rgb(var(--violet-lt-rgb) / .6);
}

/* spec §5「解法三步以線條逐一連起來」：每一段只負責「這一步 → 下一步」，
   最後一步不渲染，線不會懸空。
   下緣的 -(gap + 1px 上框線 + dot-top) 正好落在下一顆節點的上緣，
   所以文字換幾行都對得上——兩端都是各自 <li> 自己的座標。
   軸向注意：這條線在每一個斷點都是垂直的（.result-steps 任何寬度下
   都是一欄一步），所以 transform-origin 固定 center top、動畫固定驅動
   scaleY，不存在流程區那種「斷點把橫線改成直線、origin 忘了跟著換」
   的陷阱。日後若真的把它改成橫線，origin 要一起改。 */
.step-connect {
  position: absolute;
  left: calc(var(--dot-size) / 2 - .5px);
  top: calc(var(--dot-top) + var(--dot-size));
  bottom: calc(-1 * (var(--gap-sm) + 1px + var(--dot-top)));
  width: 1px;
  background: linear-gradient(180deg, var(--violet-lt), var(--blue-lt));
  transform-origin: center top;
}

.step-no {
  flex: none;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--violet-lt);
  padding-top: 3px;
  min-width: 34px;
}

.step-text { color: var(--text); }

.result-service {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--gap-xs);
  margin: 0 0 var(--gap-lg);
  padding: var(--gap-sm) var(--gap-md);
  background: var(--glass);
  border-left: 2px solid var(--violet);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}

.result-service-label { font-size: 12px; color: var(--text-mute); letter-spacing: .1em; }
.result-service-name { font-size: 18px; font-weight: 700; }
.result-service-tagline { font-size: 14px; color: var(--text-dim); }

.result-contacts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-xs);
  margin-bottom: var(--gap-md);
}

.result-contact {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--gap-sm) var(--gap-md);
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  transition: transform .25s var(--ease), border-color .25s var(--ease);
}

@media (hover: hover) and (pointer: fine) {
  .result-contact:not(.is-unconfigured):hover { transform: translateY(-2px); border-color: var(--violet-lt); }
}

.result-contact.is-primary {
  background: rgb(var(--line-green-rgb) / .14);
  border-color: rgb(var(--line-green-rgb) / .55);
}

.result-contact.is-unconfigured {
  cursor: default;
}

.result-contact.is-unconfigured .ch-speed {
  color: var(--fl-text-muted);
}

.result-contact .ch-label { font-weight: 700; font-size: 15px; }
.result-contact .ch-speed { font-size: 12px; color: var(--text-dim); }

.result-reset {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--text-mute);
  font-size: 14px;
  border-bottom: 1px solid var(--line);
  padding: 0.55rem 6px;
  transition: color .25s var(--ease), border-color .25s var(--ease);
}

.result-contact:focus-visible,
.result-reset:focus-visible {
  outline: 2px solid var(--fl-accent-primary);
  outline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
  .result-reset:hover { color: var(--text); border-color: var(--violet-lt); }
}

@media (hover: none), (pointer: coarse) {
  .result-contact,
  .result-reset {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  .result-contact:not(.is-unconfigured):active {
    transform: translateY(1px) scale(0.995);
    background: rgb(var(--fl-accent-primary-rgb) / 0.055);
    border-color: var(--fl-stroke-interactive);
  }

  .result-reset:active {
    color: var(--text);
    border-color: var(--fl-accent-primary);
  }
}

@media (max-width: 720px) {
  .result-contacts { grid-template-columns: 1fr; }

  /* 窄螢幕沒有「左上角」可言：選中的卡改成堆在標題上方，飛行終點
     跟著改，動畫本身不必分支（終點一律是量出來的實際位置）。 */
  .result-head {
    flex-direction: column;
    gap: var(--gap-sm);
  }

  .result-promoted {
    flex: none;
    width: 100%;
    min-height: 104px;
  }
}

/* ============================================================
   三大服務 — featured rail
   ============================================================ */

.services-head {
  max-width: 36rem;
  margin: 0 0 var(--fl-space-7, var(--gap-lg));
}

.services-title {
  margin: 0 0 var(--fl-space-3, 0.75rem);
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--fl-text-primary, var(--text));
}

.services-sub {
  margin: 0;
  font-size: var(--fl-type-body-md, 1rem);
  line-height: 1.6;
  color: var(--fl-text-secondary, var(--text-dim));
}

.services-rail {
  --services-tab-w: 17rem;
  position: relative;
  display: grid;
  grid-template-columns: var(--services-tab-w) minmax(0, 1fr);
  gap: 0 var(--fl-space-6, 1.5rem);
  align-items: start;
  min-height: 22rem;
}

.service-item {
  display: contents;
}

.service-tab {
  grid-column: 1;
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--fl-space-3, 0.75rem);
  width: 100%;
  margin: 0;
  padding: 1rem 1rem 1rem 1.15rem;
  text-align: left;
  color: var(--fl-text-secondary, var(--text-dim));
  background: transparent;
  border: 0;
  border-left: 2px solid rgb(255 255 255 / 0.1);
  border-radius: 0;
  cursor: pointer;
  transition:
    color var(--fl-motion-fast, 0.2s) var(--fl-ease-standard, ease),
    border-color var(--fl-motion-fast, 0.2s) var(--fl-ease-standard, ease),
    background var(--fl-motion-fast, 0.2s) var(--fl-ease-standard, ease);
}

.service-tab:hover {
  color: var(--fl-text-primary, var(--text));
  background: rgb(255 255 255 / 0.03);
}

.service-tab:focus-visible {
  outline: none;
  box-shadow:
    inset 0 0 0 2px var(--fl-bg-canvas, #0b0b0d),
    inset 0 0 0 4px var(--fl-accent-focus, #7aa2ff);
}

.service-item.is-active .service-tab {
  color: var(--fl-text-primary, var(--text));
  border-left-color: var(--fl-accent-primary, #5b8cff);
  background: rgb(var(--fl-accent-primary-rgb, 91 140 255) / 0.08);
}

.service-tab .service-no {
  flex-shrink: 0;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--fl-text-muted, var(--text-mute));
  padding-top: 0.2rem;
}

.service-item.is-active .service-tab .service-no {
  color: var(--fl-accent-primary, #5b8cff);
}

.service-tab-copy {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.service-tab-name {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.service-tab-tagline {
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--fl-text-muted, var(--text-mute));
}

.service-item.is-active .service-tab-tagline {
  color: var(--fl-text-secondary, var(--text-dim));
}

.service-feature {
  grid-column: 2;
  grid-row: 1 / span 3;
  position: relative;
  align-self: stretch;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background:
    linear-gradient(135deg, rgb(var(--fl-accent-primary-rgb, 91 140 255) / 0.1), transparent 42%),
    var(--fl-surface-base, var(--bg-elev));
  border: 1px solid var(--fl-stroke-subtle, var(--line));
  border-radius: var(--fl-radius-lg, var(--r-lg));
  box-shadow: var(--fl-shadow-e2, none);
  overflow: hidden;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition:
    opacity var(--fl-motion-standard, 0.3s) var(--fl-ease-enter, ease),
    transform var(--fl-motion-standard, 0.3s) var(--fl-ease-enter, ease);
}

.service-feature::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--fl-accent-primary, #5b8cff);
}

.service-item.is-active .service-feature {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  z-index: 1;
}

.service-feature[hidden] {
  display: block !important;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  z-index: 0;
}

.service-item.is-active .service-feature[hidden] {
  display: block !important;
}

.service-feature-no {
  display: block;
  margin-bottom: var(--fl-space-3, 0.75rem);
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--fl-accent-primary, #5b8cff);
}

.service-feature .service-name {
  margin: 0 0 0.35rem;
  font-size: clamp(1.65rem, 2.6vw, 2.1rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--fl-text-primary, var(--text));
}

.service-feature .service-tagline {
  margin: 0 0 var(--fl-space-5, 1.25rem);
  font-size: 1rem;
  color: var(--fl-accent-primary, #5b8cff);
}

.service-feature .service-desc {
  margin: 0 0 var(--fl-space-5, 1.25rem);
  max-width: 38rem;
  font-size: 0.98rem;
  line-height: 1.7;
  color: var(--fl-text-secondary, var(--text-dim));
}

.service-outcomes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.7rem;
}

.service-outcome {
  position: relative;
  padding-left: 1.25rem;
  font-size: 0.9375rem;
  color: var(--fl-text-primary, var(--text));
}

.service-outcome::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.65rem;
  height: 2px;
  background: var(--fl-accent-primary, #5b8cff);
}

@media (max-width: 900px) {
  .services-rail {
    display: flex;
    flex-direction: column;
    gap: var(--fl-space-2, 0.5rem);
    min-height: 0;
  }

  .service-item {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--fl-stroke-subtle, var(--line));
    border-radius: var(--fl-radius-md, var(--r-md));
    background: var(--fl-surface-base, var(--bg-elev));
    overflow: hidden;
  }

  .service-tab {
    border-left: 0;
    border-bottom: 1px solid transparent;
    padding: 1rem 1.1rem;
  }

  .service-item.is-active .service-tab {
    border-bottom-color: var(--fl-stroke-subtle, var(--line));
    background: rgb(var(--fl-accent-primary-rgb, 91 140 255) / 0.06);
  }

  .service-feature,
  .service-feature[hidden] {
    grid-column: auto;
    grid-row: auto;
    display: none !important;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    padding: 0 1.1rem 1.15rem;
    transform: none;
    opacity: 1;
  }

  .service-feature::before {
    display: none;
  }

  .service-item.is-active .service-feature,
  .service-item.is-active .service-feature[hidden] {
    display: block !important;
  }

  .service-feature-no {
    display: none;
  }

  .service-feature .service-name {
    font-size: 1.35rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .service-feature {
    transition: none !important;
    transform: none !important;
  }
}

/* ============================================================
   合作流程
   ============================================================ */

.process-title {
  font-size: clamp(26px, 3.6vw, 40px);
  font-weight: 700;
  margin-bottom: var(--gap-lg);
}

.process-wrap { position: relative; }

.process-line {
  position: absolute;
  left: 0;
  right: 0;
  top: 5px;
  height: 1px;
  background: var(--grad);
  transform-origin: left center;
}

.process-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* 原本是 repeat(5, 1fr)，寫死步驟數。README 邀請業主改
     SITE.process.steps，加第 6 步時它會孤零零掉到第二列，
     而 .process-line 只畫在第一列，連接線看起來斷在半路。
     用 auto-fit + minmax 讓欄數跟著容器寬度算，190px 這個下限
     是配合目前 5 步在容器最寬（1180px 版面）時仍然算出剛好 5 欄、
     維持現有視覺結果不變；未來欄位變多時會自動減少每列欄數，
     用換列取代「擠爆／孤兒欄位」。 */
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--gap-sm);
}

.process-step { position: relative; padding-top: var(--gap-md); }

.process-dot {
  position: absolute;
  left: 0;
  top: 0;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--violet-lt);
  box-shadow: 0 0 14px rgb(var(--violet-lt-rgb) / .7);
}

.process-no {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--text-mute);
}

.process-name { font-size: 19px; font-weight: 700; margin: 2px 0 6px; }
.process-desc { margin: 0; font-size: 14px; color: var(--text-dim); }

@media (max-width: 860px) {
  .process-steps { grid-template-columns: 1fr; gap: var(--gap-md); }
  .process-step { padding-top: 0; padding-left: var(--gap-md); }
  .process-dot { top: 6px; }
  .process-line { left: 5px; right: auto; top: 6px; bottom: 6px; width: 1px; height: auto; transform-origin: center top; }
}

/* ============================================================
   聯絡
   ============================================================ */

#contact {
  position: relative;
  background: linear-gradient(180deg, var(--bg), var(--bg-elev));
}

.contact-title {
  font-size: clamp(26px, 3.6vw, 42px);
  font-weight: 700;
  margin-bottom: var(--gap-xs);
}

.contact-sub {
  color: var(--text-dim);
  margin: 0 0 var(--gap-lg);
}

.contact-list {
  display: grid;
  /* 原本是 repeat(4, 1fr)，靠「LINE span 2 + 電話 1 + Email 1 = 4」這個
     巧合撐起「LINE 視覺權重最大」的設計。加第 4 個管道，或把第二個
     頻道也設成 primary: true，這個巧合就不成立，版面會跟著壞。
     240px 這個下限配合目前 3 個管道在容器最寬（1180px 版面）時仍然
     算出剛好 4 欄，維持現有視覺結果（LINE 兩欄寬、其餘各一欄）不變；
     欄位變多時改成換列，而不是擠壞或跑版。 */
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--gap-sm);
}

.contact-channel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--gap-md);
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: transform .3s var(--ease), border-color .3s var(--ease),
              box-shadow .3s var(--ease);
}

@media (hover: hover) and (pointer: fine) {
  .contact-channel:not(.is-unconfigured):hover {
    transform: translateY(-4px);
    border-color: var(--violet-lt);
    box-shadow: 0 16px 44px rgb(var(--violet-rgb) / .25);
  }
}

.contact-channel .cc-speed {
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--text-mute);
}

.contact-channel .cc-label { font-size: 22px; font-weight: 700; }

.contact-channel .cc-value {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 14px;
  color: var(--text-dim);
  word-break: break-all;
}

/* LINE：最快，所以佔兩欄、用品牌綠、帶呼吸光暈 */
.contact-channel.is-primary {
  grid-column: span 2;
  /* 右側保留給 .contact-qr（見下方），避免加好友 QR 蓋到文字 */
  padding-right: calc(var(--gap-md) + 80px);
  background: rgb(var(--line-green-rgb) / .12);
  border-color: rgb(var(--line-green-rgb) / .5);
}

.contact-channel.is-primary .cc-speed { color: var(--line-green); }
.contact-channel.is-primary .cc-label { font-size: 28px; }

/* Spec §3 §06：LINE 頻道除了加好友連結，還要有 QR（佔位）。
   qr 欄位未設定（或還是 REPLACE_ME）時顯示明顯標示的空框；
   設定後顯示真正的圖片。手機上（見上方 @media max-width:860px）
   直接隱藏——QR 是給「用另一支裝置掃這支螢幕」的人用的，訪客自己
   就在手機上時用不到。 */
.contact-qr {
  position: absolute;
  top: var(--gap-md);
  right: var(--gap-md);
  width: 64px;
  height: 64px;
  border-radius: var(--r-sm);
  object-fit: cover;
}

.contact-qr--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4px;
  font-size: 10px;
  line-height: 1.3;
  color: var(--text-mute);
  border: 1px dashed var(--line);
  background: rgb(var(--violet-rgb) / .05);
}

.contact-channel.is-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--r-md);
  pointer-events: none;
  box-shadow: 0 0 0 0 rgb(var(--line-green-rgb) / .45);
  animation: line-breathe 2.8s ease-in-out infinite;
}

@keyframes line-breathe {
  0%, 100% { box-shadow: 0 0 0 0 rgb(var(--line-green-rgb) / .4); }
  50%      { box-shadow: 0 0 0 10px rgb(var(--line-green-rgb) / 0); }
}

.contact-foot {
  margin: var(--gap-xl) 0 0;
  font-size: 13px;
  color: var(--text-mute);
}

@media (max-width: 640px) {
  html {
    --fl-demo-banner-h: 2.75rem;
  }

  .site-demo-banner {
    flex-direction: column;
    gap: 0.15rem;
    padding-block: 0.4rem;
  }

  .site-demo-text {
    font-size: 0.7rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .contact-channel.is-primary::after { animation: none; }
}

@media (max-width: 860px) {
  .contact-list { grid-template-columns: 1fr; }
  .contact-channel.is-primary { grid-column: span 1; padding-right: var(--gap-md); }
  /* QR 是給「用另一支手機掃這支手機螢幕」的人用的——訪客自己就在手機上時
     用不到，直接收起來，避免在窄螢幕擠壓本來就吃緊的空間。 */
  .contact-qr { display: none; }
}

/* ============================================================
   手機修正
   ============================================================ */

@media (max-width: 560px) {
  :root {
    --gap-lg: 32px;
    --gap-xl: 64px;
  }

  /* 捲動提示只調整尺寸，維持絕對定位——#hero 是 flex 容器，
     若改成 position: static 會讓提示變成第二個 flex item，
     與 Hero 文案並排，版面會壞掉（見 task-10-supplement.md A1）。 */
  .hero-scroll-cue {
    height: 34px;
  }

  /* 觸控目標下限見上方 .pain-card 於同斷點的既有規則，不在此重複疊加 */
  .contact-channel { padding: var(--gap-sm) var(--gap-md); }

  .result { padding: var(--gap-md); }
  .result-service { flex-direction: column; gap: 2px; }
}

/* ============================================================
   Visual Redesign Loop v1 — Editorial Systems / Systems Observatory
   Scene-first composition layer. Canonical Art Direction remains authority.
   ============================================================ */

.container {
  max-width: var(--fl-container-max);
  padding-inline: clamp(var(--fl-page-gutter-mobile), 4vw, 64px);
}

.section {
  padding-block: clamp(6rem, 9vw, 9rem);
}

.grad-text {
  background: none;
  color: inherit;
}

/* ---------- Hero scene ---------- */

#hero {
  background: var(--fl-bg-canvas);
}

#hero::after {
  content: '';
  position: absolute;
  left: clamp(var(--fl-page-gutter-mobile), 4vw, 64px);
  bottom: 0;
  width: min(34rem, 44vw);
  height: 1px;
  background: rgb(255 255 255 / 0.14);
  pointer-events: none;
}

.hero-layout {
  grid-template-columns: minmax(0, 0.88fr) minmax(30rem, 1.12fr);
  gap: clamp(3rem, 6vw, 7rem);
  min-height: min(72rem, 76vh);
}

.hero-copy {
  position: relative;
  max-width: 44rem;
  padding-top: 2.8rem;
}

.hero-copy::before {
  content: 'SYSTEM / 001';
  position: absolute;
  top: 0;
  left: 0;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--fl-text-muted);
}

.hero-brand-mark {
  margin-bottom: var(--fl-space-6);
}

.hero-eyebrow {
  color: var(--fl-text-muted);
}

.hero-headline {
  max-width: 12ch;
  font-size: clamp(2.75rem, 5vw, 4.8rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
}

.hero-headline-accent {
  margin-top: 0.16em;
  color: var(--fl-text-secondary);
}

.hero-sub {
  max-width: 46ch;
}

.hero-cta {
  border-radius: var(--fl-radius-xs);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.16),
    0 18px 44px rgb(0 0 0 / 0.28);
}

.hero-tags {
  gap: 0 var(--fl-space-5);
  border-top: 1px solid var(--fl-stroke-subtle);
}

.hero-tag-btn {
  min-height: 44px;
  padding: 0.7rem 0.1rem;
  background: transparent;
  border: 0;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  color: var(--fl-text-muted);
  box-shadow: none;
}

.hero-tag-btn:hover {
  color: var(--fl-text-primary);
  border-bottom-color: var(--fl-stroke-interactive);
}

.hero-tag-btn.is-selected,
.hero-tag-btn[aria-expanded='true'] {
  color: var(--fl-text-primary);
  background: transparent;
  border-color: var(--fl-accent-primary);
  box-shadow: none;
}

.hero-tag-panel {
  border-radius: var(--fl-radius-xs);
  background: rgb(28 28 32 / 0.98);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.05),
    0 24px 64px rgb(0 0 0 / 0.4);
}

.hero-diagram {
  position: relative;
  width: min(100%, 48rem);
  justify-self: end;
}

.hero-diagram-stage {
  padding: clamp(1rem, 2vw, 1.75rem);
  overflow: visible;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}


/* ---------- Capabilities as editorial chapters ---------- */

#services {
  background: var(--fl-bg-section);
  border-top: 0;
}

.services-head {
  position: relative;
  max-width: 46rem;
  padding-top: 2.5rem;
  margin-bottom: clamp(4rem, 7vw, 7rem);
}

.services-head::before {
  content: 'CAPABILITIES / 002';
  position: absolute;
  top: 0;
  left: 0;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--fl-text-muted);
}

.services-title {
  font-size: clamp(2.4rem, 4.4vw, 4.6rem);
  line-height: 1.04;
  letter-spacing: -0.035em;
}

.services-sub {
  max-width: 42ch;
  margin-top: 1rem;
}

.services-rail {
  --services-tab-w: 15rem;
  grid-template-columns: var(--services-tab-w) minmax(0, 1fr);
  gap: 0 clamp(2.5rem, 5vw, 6rem);
  min-height: 30rem;
  border-top: 1px solid var(--fl-stroke-subtle);
}

.service-tab {
  padding: 1.35rem 0;
  border-left: 0;
  border-bottom: 1px solid var(--fl-stroke-subtle);
  background: transparent;
}

.service-tab:hover {
  background: transparent;
}

.service-item.is-active .service-tab {
  color: var(--fl-text-primary);
  border-left-color: transparent;
  border-bottom-color: var(--fl-accent-primary);
  background: transparent;
}

.service-tab .service-no {
  min-width: 2.5rem;
}

.service-feature,
.service-feature[hidden] {
  padding: clamp(2.5rem, 5vw, 5rem) 0 clamp(3rem, 6vw, 6rem) clamp(2rem, 4vw, 4.5rem);
  background: transparent;
  border: 0;
  border-left: 1px solid var(--fl-stroke-subtle);
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}

.service-feature::before {
  left: -1px;
  top: clamp(2.5rem, 5vw, 5rem);
  bottom: auto;
  width: 2px;
  height: 4.5rem;
  background: var(--fl-accent-primary);
}

.service-feature-no {
  position: absolute;
  top: 0.2rem;
  right: 0;
  margin: 0;
  font-size: clamp(4.5rem, 9vw, 8.5rem);
  line-height: 1;
  letter-spacing: -0.06em;
  color: rgb(255 255 255 / 0.055);
  pointer-events: none;
}

.service-feature .service-name {
  max-width: 12ch;
  font-size: clamp(2.25rem, 4vw, 4.2rem);
  line-height: 1.03;
  letter-spacing: -0.035em;
}

.service-feature .service-tagline {
  max-width: 30ch;
  margin-top: 0.8rem;
  color: var(--fl-text-secondary);
  font-size: clamp(1rem, 1.4vw, 1.2rem);
}

.service-feature .service-desc {
  max-width: 48rem;
  margin-top: clamp(2rem, 4vw, 3.5rem);
}

.service-outcomes {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--fl-space-5);
  margin-top: clamp(2rem, 4vw, 3.5rem);
}

.service-outcome {
  padding: 1.1rem 0 0;
  border-top: 1px solid var(--fl-stroke-subtle);
}

/* Keep the service outcome accent on the structural divider instead of inside
   the first line of copy. The editorial override removes the base left gutter,
   so the original inline dash would otherwise overlap the text. */
.service-outcome::before {
  left: 0;
  top: -1px;
  width: 2.25rem;
  height: 1px;
  background: var(--fl-accent-primary);
}

/* ---------- Problem exploration: controlled light beat ---------- */

#diagnose {
  --bg: var(--fl-surface-paper);
  --bg-elev: var(--fl-surface-paper-raised);
  --text: var(--fl-text-paper-primary);
  --text-dim: var(--fl-text-paper-secondary);
  --text-mute: var(--fl-text-paper-muted);
  --line: var(--fl-stroke-paper);
  --glass: transparent;
  color: var(--text);
  background: var(--bg);
  border-top: 1px solid var(--fl-stroke-paper);
  transition:
    background var(--fl-motion-emphasis) var(--fl-ease-standard),
    color var(--fl-motion-emphasis) var(--fl-ease-standard);
}

#diagnose.is-result-active {
  --bg: var(--fl-bg-canvas);
  --bg-elev: var(--fl-surface-base);
  --text: var(--fl-text-primary);
  --text-dim: var(--fl-text-secondary);
  --text-mute: var(--fl-text-muted);
  --line: var(--fl-stroke-subtle);
  --glass: transparent;
  color: var(--text);
  background: var(--bg);
}

.diagnose-head {
  position: relative;
  max-width: 52rem;
  padding-top: 2.5rem;
  margin-bottom: clamp(3.5rem, 6vw, 6rem);
}

.diagnose-head::before {
  content: 'PROBLEM EXPLORATION / 003';
  position: absolute;
  top: 0;
  left: 0;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--text-mute);
}

.diagnose-title {
  max-width: 12ch;
  font-size: clamp(2.5rem, 4.8vw, 4.8rem);
  line-height: 1.03;
  letter-spacing: -0.035em;
}

.skip-link {
  color: var(--text-mute);
  border-color: var(--line);
}

.skip-link:hover {
  color: var(--text);
  border-color: var(--fl-accent-on-light);
}

#diagnose.is-result-active .skip-link:hover {
  border-color: var(--fl-accent-primary);
}

.pain-grid {
  gap: 0 clamp(1.5rem, 3vw, 3rem);
}

.pain-card {
  min-height: 9rem;
  padding: 1.5rem 2.25rem 1.5rem 0;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
  color: var(--text);
  font-size: clamp(0.98rem, 1.2vw, 1.08rem);
  overflow: hidden;
}

.pain-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: -1px;
  width: 3.5rem;
  height: 2px;
  background: var(--fl-accent-on-light);
  transform: scaleX(0.18);
  transform-origin: left center;
  transition: transform var(--fl-motion-fast) var(--fl-ease-standard);
}

#diagnose.is-result-active .pain-card::before {
  background: var(--fl-accent-primary);
}

.pain-card:hover,
.pain-card:focus-visible {
  transform: translateX(4px);
  border-color: var(--line);
  background: transparent;
  box-shadow: none;
}

.pain-card:hover::before,
.pain-card:focus-visible::before {
  transform: scaleX(1);
}

.pain-card:focus-visible {
  outline: 2px solid var(--fl-accent-on-light);
  outline-offset: 4px;
}

#diagnose.is-result-active .pain-card:focus-visible {
  outline-color: var(--fl-accent-focus);
}

.pain-arrow {
  color: var(--fl-accent-on-light);
  opacity: 0.5;
  transform: none;
}

#diagnose.is-result-active .pain-arrow {
  color: var(--fl-accent-primary-hover);
}

.result {
  padding: clamp(2rem, 4vw, 4rem) 0 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.result::before {
  display: none;
}

.result-promoted-card {
  background: var(--fl-surface-base);
  border: 1px solid var(--fl-accent-primary);
  border-radius: var(--fl-radius-xs);
  box-shadow: var(--fl-shadow-material-elevated);
}

.result-promoted-label,
.step-no {
  color: var(--fl-accent-primary-hover);
}

.step-dot {
  border-color: var(--fl-accent-primary);
  box-shadow: none;
}

.step-connect {
  background: rgb(var(--fl-accent-primary-rgb) / 0.55);
}

.result-service {
  background: transparent;
  border-left-color: var(--fl-accent-primary);
  border-radius: 0;
}

.result-contact {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--fl-stroke-subtle);
  border-radius: 0;
}

@media (hover: hover) and (pointer: fine) {
  .result-contact:not(.is-unconfigured):hover {
    transform: translateX(3px);
    border-color: var(--fl-accent-primary);
  }
}

.result-contact.is-primary {
  background: transparent;
  border-left: 2px solid var(--fl-status-success);
}

@media (hover: hover) and (pointer: fine) {
  .result-reset:hover {
    border-color: var(--fl-accent-primary);
  }
}

/* ---------- Process as connected editorial journey ---------- */

#process {
  background: var(--fl-surface-base);
  border-top: 0;
}

.process-title {
  position: relative;
  max-width: 14ch;
  padding-top: 2.5rem;
  margin-bottom: clamp(4rem, 7vw, 7rem);
  font-size: clamp(2.4rem, 4.2vw, 4.4rem);
  line-height: 1.04;
  letter-spacing: -0.035em;
}

.process-title::before {
  content: 'DELIVERY / 004';
  position: absolute;
  top: 0;
  left: 0;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--fl-text-muted);
}

.process-line {
  background: rgb(var(--fl-accent-primary-rgb) / 0.45);
}

.process-step {
  padding-top: 2rem;
  padding-right: clamp(1rem, 2.5vw, 2.5rem);
}

.process-dot {
  width: 9px;
  height: 9px;
  background: var(--fl-surface-base);
  border-color: var(--fl-accent-primary);
  box-shadow: none;
}

.process-no {
  color: var(--fl-accent-primary-hover);
}

.process-name {
  margin-top: 0.8rem;
  font-size: clamp(1.2rem, 1.7vw, 1.55rem);
}

/* ---------- Contact: convergence, not repeated cards ---------- */

#contact {
  position: relative;
  background: var(--fl-bg-canvas);
  border-top: 0;
}

#contact::before {
  content: '';
  position: absolute;
  top: 0;
  right: clamp(var(--fl-page-gutter-mobile), 4vw, 64px);
  width: min(34rem, 44vw);
  height: 1px;
  background: rgb(255 255 255 / 0.14);
  pointer-events: none;
}

.contact-title {
  position: relative;
  max-width: 14ch;
  padding-top: 2.5rem;
  font-size: clamp(2.5rem, 4.6vw, 4.8rem);
  line-height: 1.03;
  letter-spacing: -0.035em;
}

.contact-title::before {
  content: 'CONTACT / 005';
  position: absolute;
  top: 0;
  left: 0;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--fl-text-muted);
}

.contact-sub {
  max-width: 42ch;
  margin-top: 1rem;
  margin-bottom: clamp(3rem, 6vw, 6rem);
}

#contact.has-contact-context .contact-sub {
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.contact-context {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(12rem, 0.6fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  max-width: 64rem;
  margin-bottom: clamp(3rem, 6vw, 5rem);
  padding: 1.25rem 0;
  border-top: 1px solid var(--fl-stroke-subtle);
  border-bottom: 1px solid var(--fl-stroke-subtle);
}

.contact-context[hidden] {
  display: none;
}

.contact-context-item {
  display: grid;
  gap: 0.45rem;
  min-width: 0;
}

.contact-context-label {
  color: var(--fl-text-muted);
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.contact-context-value {
  color: var(--fl-text-secondary);
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  font-weight: 500;
  line-height: 1.55;
}

.contact-list {
  grid-template-columns: minmax(0, 1.35fr) minmax(16rem, 0.65fr);
  grid-template-rows: repeat(2, minmax(8rem, auto));
  gap: 0;
  border-top: 1px solid var(--fl-stroke-subtle);
}

.contact-channel {
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--fl-stroke-subtle);
  border-radius: 0;
  box-shadow: none;
}

.contact-channel.is-unconfigured {
  cursor: default;
}

.contact-channel.is-unconfigured .cc-value {
  color: var(--fl-text-muted);
}

.contact-channel:focus-visible {
  outline: 2px solid var(--fl-accent-primary);
  outline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
  .contact-channel:not(.is-unconfigured):hover {
    transform: translateX(4px);
    border-color: var(--fl-stroke-interactive);
    box-shadow: none;
  }
}

@media (hover: none), (pointer: coarse) {
  .contact-channel {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: transform .14s var(--ease), background-color .14s ease, border-color .14s var(--ease);
  }

  .contact-channel:not(.is-unconfigured):active {
    transform: translateY(1px) scale(0.995);
    background: rgb(255 255 255 / 0.035);
    border-bottom-color: var(--fl-stroke-interactive);
  }

  .contact-channel.is-primary:not(.is-unconfigured):active {
    background: rgb(var(--fl-accent-primary-rgb) / 0.075);
  }
}

.contact-channel.is-primary {
  grid-column: 1;
  grid-row: 1 / span 2;
  padding: clamp(2rem, 4vw, 3.5rem);
  padding-right: calc(clamp(2rem, 4vw, 3.5rem) + 88px);
  background: transparent;
  border: 0;
  border-right: 1px solid var(--fl-stroke-subtle);
  border-bottom: 1px solid var(--fl-stroke-subtle);
}

.contact-channel.is-primary::after {
  display: none;
}

.contact-channel.is-primary .cc-label {
  font-size: clamp(2.4rem, 5vw, 5rem);
  line-height: 1;
  letter-spacing: -0.04em;
}

.contact-channel .cc-label {
  font-size: clamp(1.35rem, 2vw, 1.8rem);
}

.contact-qr {
  border-radius: var(--fl-radius-xs);
}

.contact-qr--placeholder {
  background: transparent;
}

/* ---------- Responsive choreography for the redesigned composition ---------- */

@media (max-width: 1024px) {
  .hero-layout {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .hero-copy {
    max-width: 48rem;
  }

  .hero-diagram {
    width: min(100%, 42rem);
    justify-self: center;
  }

  .services-rail {
    --services-tab-w: 13rem;
    gap: 0 2.5rem;
  }

  .service-outcomes {
    grid-template-columns: 1fr;
  }
}

/* Tablet keeps Hero as a compact two-column scene. Collapsing at 1024px made
   the 900px layout ~1.6 viewports tall, so only phones switch to a full stack. */
@media (min-width: 769px) and (max-width: 1024px) {
  .hero-layout {
    grid-template-columns: minmax(0, 1fr) minmax(19rem, 0.82fr);
    gap: 2.25rem;
    align-items: center;
    min-height: min(48rem, 68vh);
  }

  .hero-copy {
    max-width: 31rem;
    padding-top: 2.4rem;
  }

  .hero-headline {
    max-width: 11ch;
    font-size: clamp(3.1rem, 5.6vw, 3.75rem);
  }

  .hero-diagram {
    width: 100%;
    max-width: 25rem;
    justify-self: end;
  }

  .hero-diagram-stage {
    padding: 0.75rem;
  }

  .diagram-field {
    aspect-ratio: 1 / 1;
  }
}

@media (max-width: 900px) {
  .services-rail {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-height: 0;
    border-top: 1px solid var(--fl-stroke-subtle);
  }

  .service-item {
    border: 0;
    border-top: 0;
    border-bottom: 1px solid var(--fl-stroke-subtle);
    border-radius: 0;
    background: transparent;
  }

  .service-tab,
  .service-item.is-active .service-tab {
    padding: 1.2rem 0;
    border: 0;
    background: transparent;
  }

  .service-feature,
  .service-feature[hidden] {
    padding: 0.5rem 0 2rem 2.5rem;
    border: 0;
  }

  .service-feature::before {
    left: 0;
    top: 0.75rem;
    height: 3rem;
  }

  .pain-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  .contact-context {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .contact-list {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .contact-channel.is-primary {
    grid-column: 1;
    grid-row: auto;
    padding-right: var(--gap-md);
    border-right: 0;
  }
}

@media (max-width: 768px) {
  .section {
    padding-block: clamp(4.5rem, 14vw, 6.5rem);
  }

  .hero-copy {
    padding-top: 2.2rem;
  }

  .hero-headline {
    max-width: 13ch;
    font-size: clamp(2.35rem, 10vw, 3.4rem);
  }

  .hero-diagram-stage {
    padding-inline: 0;
  }

  .services-head,
  .diagnose-head {
    margin-bottom: 3.5rem;
  }

  .services-title {
    font-size: clamp(2.2rem, 9vw, 3.3rem);
  }

  .diagnose-title {
    font-size: clamp(2.4rem, 9.8vw, 3.5rem);
  }

  .process-title {
    font-size: clamp(2rem, 8.2vw, 3rem);
  }

  .contact-title {
    font-size: clamp(2.35rem, 9.5vw, 3.4rem);
  }

  .service-feature .service-name {
    font-size: clamp(2rem, 8vw, 3rem);
  }

  .result {
    padding-top: 2rem;
  }

  .result-reset {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-block: 0.55rem;
  }

  /* html already reserves the fixed demo banner + nav via scroll-padding-top.
     Do not add the same anchor clearance twice on mobile: keeping the global
     section scroll-margin here pushes Contact too far down and hides the
     primary channel on a 320px viewport. */
  #contact {
    scroll-margin-top: 0;
  }
}

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

  .pain-card:hover,
  .pain-card:focus-visible {
    transform: none;
  }

  .pain-card:active {
    transform: translateY(1px) scale(0.995);
  }

  .pain-grid[data-mobile-selection='active'] .pain-card:not(.is-selected) {
    display: none;
  }

  .pain-grid[data-mobile-selection='active'] .pain-card.is-selected {
    min-height: 5.5rem;
    padding: 1.2rem 2.5rem 1.2rem 0;
    border-top-color: var(--fl-accent-primary);
    background: rgb(var(--fl-accent-primary-rgb) / 0.055);
  }

  .pain-grid[data-mobile-selection='active'] .pain-card.is-selected::before {
    background: var(--fl-accent-primary);
    transform: scaleX(1);
  }

  .pain-grid[data-mobile-selection='active'] .pain-card.is-selected .pain-arrow {
    color: var(--fl-accent-primary-hover);
    opacity: 1;
  }

  #diagnose.is-result-active .pain-grid[data-mobile-selection='active'] + .result .result-promoted {
    display: none;
  }

  #diagnose.is-result-active .pain-grid[data-mobile-selection='active'] + .result .result-head {
    gap: 0;
  }

  .pain-card {
    min-height: 8.5rem;
    padding-right: 1rem;
  }

  /* Keep the editorial chapter rule, but avoid spending ~10% of a phone
     viewport on a second nested gutter inside the already-guttered container. */
  .service-feature,
  .service-feature[hidden] {
    padding-left: 1.5rem;
  }

  .service-feature::before {
    height: 2.5rem;
  }

  .hero-tags {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 1rem;
  }

  .hero-tag-panel {
    left: var(--fl-page-gutter-mobile);
    right: var(--fl-page-gutter-mobile);
  }

  .contact-channel.is-primary {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media (min-width: 560px) and (max-width: 768px) {
  .hero-layout {
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: start;
    min-height: auto;
  }

  .hero-copy {
    max-width: 32rem;
    padding-top: 2.1rem;
  }

  .hero-headline {
    max-width: 11ch;
    font-size: clamp(2.45rem, 7.4vw, 3rem);
  }

  .hero-diagram {
    width: min(100%, 23rem);
    max-width: 23rem;
    justify-self: center;
  }

  .hero-diagram-stage {
    padding: 0.65rem;
  }

  .hero-tags {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 0.75rem;
  }
}

@media (max-width: 559px) {
  .hero-layout {
    gap: 2rem;
  }

  .hero-diagram {
    width: min(100%, 23rem);
  }

  .hero-diagram-stage {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }
}

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

  .pain-card {
    min-height: 7.25rem;
    padding-right: 2.25rem;
  }
}

/* ---------- Hero viewport-ratio calibration ----------
   Width alone is not enough for the first fold: common 16:9 / 16:10 screens
   can be wide while still being vertically constrained. These rules cap the
   composition against both axes while preserving the existing phase system. */

#hero > .container.hero-layout {
  max-width: var(--fl-container-max);
  padding-inline: clamp(1.5rem, 3vw, 3rem);
}

@media (min-width: 1025px) {
  #hero {
    padding-top: clamp(7.75rem, 14svh, 10.25rem);
    padding-bottom: clamp(2.5rem, 5svh, 4rem);
  }

  .hero-layout {
    grid-template-columns: minmax(0, 0.96fr) minmax(28rem, 1.04fr);
    gap: clamp(2.5rem, 4.5vw, 5.5rem);
    min-height: clamp(32rem, calc(100svh - 12.75rem), 44rem);
  }

  .hero-copy {
    max-width: 42rem;
    padding-top: clamp(2.1rem, 4.5svh, 2.8rem);
  }

  .hero-headline {
    max-width: 11.75ch;
    font-size: clamp(2.85rem, min(4.4vw, 7.2svh), 4.45rem);
  }

  .hero-diagram {
    width: min(100%, 44rem, 62svh);
  }
}

/* Short desktop screens keep the same hierarchy, but reduce vertical tax. */
@media (min-width: 1025px) and (max-height: 900px) {
  .hero-brand-mark {
    margin-bottom: 1.25rem;
  }

  .hero-eyebrow {
    margin-bottom: 0.6rem;
  }

  .hero-headline {
    margin-bottom: 1.15rem;
  }

  .hero-sub {
    margin-bottom: 1.25rem;
    font-size: clamp(1rem, 1.55vw, 1.0625rem);
    line-height: 1.55;
  }

  .hero-actions {
    margin-bottom: 1.25rem;
  }

  .hero-tag-btn {
    min-height: 40px;
    padding-block: 0.55rem;
  }
}

/* Tablet stays two-column, but its geometry is bounded by available height. */
@media (min-width: 769px) and (max-width: 1024px) {
  #hero {
    padding-top: clamp(7.25rem, 16svh, 8.5rem);
    padding-bottom: clamp(2.25rem, 5svh, 3.5rem);
  }

  .hero-layout {
    gap: clamp(1.5rem, 3.5vw, 2.25rem);
    min-height: clamp(30rem, calc(100svh - 11.25rem), 36rem);
  }

  .hero-copy {
    padding-top: clamp(2rem, 4svh, 2.4rem);
  }

  .hero-headline {
    font-size: clamp(2.7rem, min(5.3vw, 7.2svh), 3.55rem);
  }

  .hero-diagram {
    width: min(100%, 25rem, 53svh);
    max-width: none;
  }
}

/* Phones should spend the viewport on content, not duplicate top whitespace. */
@media (max-width: 768px) {
  #hero {
    padding-top: calc(var(--fl-demo-banner-h, 2.25rem) + 5.75rem);
    padding-bottom: clamp(2.5rem, 10vw, 3.5rem);
  }

  #hero > .container.hero-layout {
    padding-inline: var(--fl-page-gutter-mobile);
  }
}

@media (max-width: 559px) {
  .hero-copy {
    padding-top: 2rem;
  }

  .hero-headline {
    max-width: 12ch;
    font-size: clamp(2.05rem, 10vw, 2.75rem);
  }

  .hero-diagram {
    width: min(100%, 22rem);
  }
}

/* Mobile semantic reduction: preserve the authored four-phase model, but show
   only the information needed to read each state at phone scale. */
@media (max-width: 560px) {
  .hero-spatial-legend,
  .hero-spatial-fragment small {
    display: none;
  }

  .hero-spatial-fragment {
    width: clamp(4rem, 19vw, 4.8rem);
    min-height: 2.35rem;
    padding: 0.42rem 0.46rem;
  }

  .hero-spatial-fragment span {
    font-size: clamp(0.62rem, 3vw, 0.72rem);
  }

  /* CHAOS stays visibly unresolved, but six fragments are enough to establish
     fragmentation without turning the phone canvas into a label cloud. */
  .hero-diagram[data-phase-name='chaos'] [data-node='report'],
  .hero-diagram[data-phase-name='chaos'] [data-node='approval'] {
    opacity: 0;
    pointer-events: none;
  }

  /* RELATIONSHIP: four nodes and the three primary links own the frame. */
  .hero-diagram[data-phase-name='relationship'] [data-node='line'],
  .hero-diagram[data-phase-name='relationship'] [data-node='excel'],
  .hero-diagram[data-phase-name='relationship'] [data-node='report'],
  .hero-diagram[data-phase-name='relationship'] [data-node='lead'],
  .hero-diagram[data-phase-name='relationship'] .hero-spatial-connectors g[data-link-phase='relationship'] line[data-priority='secondary'] {
    opacity: 0;
    pointer-events: none;
  }

  /* STRUCTURE: one representative input feeds the ordered workflow spine,
     which then resolves to one explicit output. */
  .hero-diagram[data-phase-name='structure'] [data-node='excel'],
  .hero-diagram[data-phase-name='structure'] [data-node='lead'],
  .hero-diagram[data-phase-name='structure'] [data-node='customer'],
  .hero-diagram[data-phase-name='structure'] .hero-spatial-connectors g[data-link-phase='structure'] line[data-priority='secondary'] {
    opacity: 0;
    pointer-events: none;
  }

  .hero-diagram[data-phase-name='structure'] [data-node='line'] {
    --x: 17%;
    --y: 26%;
    opacity: 0.92;
  }

  .hero-diagram[data-phase-name='structure'] [data-node='orders'] { --x: 50%; --y: 26%; }
  .hero-diagram[data-phase-name='structure'] [data-node='inventory'] { --x: 50%; --y: 50%; }
  .hero-diagram[data-phase-name='structure'] [data-node='approval'] { --x: 50%; --y: 74%; }
  .hero-diagram[data-phase-name='structure'] [data-node='report'] { --x: 83%; --y: 50%; }

  /* SYSTEM OUTPUT: mobile tells one story only, Core -> Output. */
  .hero-diagram[data-phase-name='system'] .hero-spatial-fragment,
  .hero-diagram[data-phase-name='system'] .hero-spatial-connectors g[data-link-phase='system'] {
    opacity: 0;
    pointer-events: none;
  }

  .hero-diagram[data-phase-name='system'] .hero-spatial-skeleton {
    opacity: 0.04;
  }

  .hero-diagram[data-phase-name='system'] .hero-spatial-core {
    left: 24%;
  }

  .hero-diagram[data-phase-name='system'] .hero-spatial-transfer {
    left: 39%;
    width: 18%;
  }

  .hero-diagram[data-phase-name='system'] .hero-spatial-output {
    left: 73%;
    width: clamp(6.7rem, 31vw, 7.8rem);
  }
  /* M3.2: hierarchy + choreography. Keep each phase visually singular. */
  .hero-diagram[data-phase-name='chaos'] .hero-spatial-depth {
    opacity: 0.14;
  }

  .hero-diagram[data-phase-name='chaos'] .hero-spatial-fragment::before {
    opacity: 0.12;
  }

  .hero-diagram[data-phase-name='relationship'] .hero-spatial-connectors g[data-link-phase='relationship'] {
    filter: drop-shadow(0 0 3px rgb(var(--fl-accent-primary-rgb) / 0.2));
  }

  .hero-diagram[data-phase-name='relationship'] .hero-spatial-connectors line[data-priority='primary'] {
    stroke-width: 3.15;
  }

  .hero-diagram[data-phase-name='relationship'] .hero-spatial-connectors line[data-flow='automation'][data-priority='primary'] {
    stroke-width: 3.55;
  }

  .hero-diagram[data-phase-name='relationship'] [data-node='orders'] {
    border-color: rgb(var(--fl-accent-primary-rgb) / 0.9);
    box-shadow: 0 14px 30px rgb(0 0 0 / 0.3), 0 0 0 1px rgb(var(--fl-accent-primary-rgb) / 0.16);
  }

  .hero-diagram[data-phase-name='relationship'] [data-node='inventory'],
  .hero-diagram[data-phase-name='relationship'] [data-node='customer'],
  .hero-diagram[data-phase-name='relationship'] [data-node='approval'] {
    opacity: 0.82;
    border-color: rgb(var(--fl-accent-primary-rgb) / 0.3);
  }

  .hero-diagram[data-phase-name='structure'] .hero-spatial-boundary {
    border-color: rgb(var(--fl-accent-primary-rgb) / 0.58);
    background: linear-gradient(90deg, rgb(255 255 255 / 0.01), rgb(var(--fl-accent-primary-rgb) / 0.055), rgb(255 255 255 / 0.01));
  }

  .hero-diagram[data-phase-name='structure'] .hero-spatial-boundary::before,
  .hero-diagram[data-phase-name='structure'] .hero-spatial-boundary::after {
    background: rgb(var(--fl-accent-primary-rgb) / 0.32);
  }

  .hero-diagram[data-phase-name='structure'] .hero-spatial-axis--x {
    opacity: 0.62;
  }

  .hero-diagram[data-phase-name='structure'] .hero-spatial-lane-label {
    color: rgb(255 255 255 / 0.52);
    letter-spacing: 0.17em;
  }

  .hero-diagram[data-phase-name='structure'] [data-node='line'] {
    opacity: 0.74;
    border-color: rgb(255 255 255 / 0.12);
  }

  .hero-diagram[data-phase-name='structure'] [data-node='orders'],
  .hero-diagram[data-phase-name='structure'] [data-node='inventory'],
  .hero-diagram[data-phase-name='structure'] [data-node='approval'] {
    border-color: rgb(var(--fl-accent-primary-rgb) / 0.56);
    box-shadow: 0 10px 22px rgb(0 0 0 / 0.2);
  }

  .hero-diagram[data-phase-name='structure'] [data-node='report'] {
    border-color: rgb(var(--fl-accent-primary-rgb) / 0.78);
    box-shadow: 0 12px 26px rgb(0 0 0 / 0.24), 0 0 0 1px rgb(var(--fl-accent-primary-rgb) / 0.1);
  }

  .hero-diagram[data-phase-name='system'] .hero-spatial-core {
    border-color: rgb(var(--fl-accent-primary-rgb) / 0.88);
    box-shadow: 0 22px 42px rgb(0 0 0 / 0.4), 0 0 20px rgb(var(--fl-accent-primary-rgb) / 0.2);
  }

  .hero-diagram[data-phase-name='system'] .hero-spatial-transfer {
    height: 2px;
    background: linear-gradient(90deg, rgb(var(--fl-accent-primary-rgb) / 0.28), rgb(var(--fl-accent-primary-rgb) / 1));
    box-shadow: 0 0 10px rgb(var(--fl-accent-primary-rgb) / 0.22);
  }

  .hero-diagram[data-phase-name='system'] .hero-spatial-output {
    border-color: rgb(var(--fl-accent-primary-rgb) / 0.72);
    box-shadow: 0 22px 44px rgb(0 0 0 / 0.38), 0 0 18px rgb(var(--fl-accent-primary-rgb) / 0.14);
    transform: translate(-50%, -50%) translateZ(112px) scale(1.025);
  }

  /* Semantic transition ordering: relationship discovery, structure formation,
     then the singular Core -> Output handoff. */
  .hero-diagram[data-transition-to='relationship'] [data-node='inventory'],
  .hero-diagram[data-transition-to='relationship'] [data-node='customer'],
  .hero-diagram[data-transition-to='relationship'] [data-node='approval'] {
    transition-delay: 35ms;
  }

  .hero-diagram[data-transition-to='relationship'] .hero-spatial-connectors g[data-link-phase='relationship'] {
    transition-delay: 85ms;
  }

  .hero-diagram[data-transition-to='structure'] .hero-spatial-skeleton {
    transition-delay: 0ms;
  }

  .hero-diagram[data-transition-to='structure'] [data-node='line'] { transition-delay: 45ms; }
  .hero-diagram[data-transition-to='structure'] [data-node='orders'] { transition-delay: 70ms; }
  .hero-diagram[data-transition-to='structure'] [data-node='inventory'] { transition-delay: 95ms; }
  .hero-diagram[data-transition-to='structure'] [data-node='approval'] { transition-delay: 120ms; }
  .hero-diagram[data-transition-to='structure'] [data-node='report'] { transition-delay: 145ms; }

  .hero-diagram[data-transition-to='system'] .hero-spatial-core { transition-delay: 0ms; }
  .hero-diagram[data-transition-to='system'] .hero-spatial-transfer { transition-delay: 75ms; }
  .hero-diagram[data-transition-to='system'] .hero-spatial-output { transition-delay: 150ms; }
}

@media (max-width: 359px) {
  .hero-headline {
    font-size: clamp(1.95rem, 10.2vw, 2.25rem);
  }
}