.hero-scanner { position: relative; min-height: 100svh; display: grid; align-items: center; overflow: clip; border-bottom: 1px solid var(--line-1); }
.hero-scanner__inner { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr); gap: clamp(48px, 8vw, 120px); align-items: center; padding: 150px 0 72px; }
.hero-scanner__copy { display: grid; gap: 30px; }
.hero-scanner__copy h1 { max-width: 920px; }
.hero-scanner__copy h1 span { color: var(--signal); }
.hero-scanner__actions { margin-top: -4px; }
.hero-answers { display: grid; gap: 8px; max-width: 660px; color: var(--text-2); }
.hero-answers b { color: var(--text-1); }
.hero-scanner__meta { display: flex; gap: 28px; color: var(--text-3); font-family: var(--font-data); font-size: .7rem; }
.hero-scanner__meta span { padding-left: 12px; border-left: 1px solid var(--signal); }
.scanner-panel { position: relative; border: 1px solid var(--line-2); background: color-mix(in srgb, var(--ink-0) 80%, transparent); }
.scanner-panel__top { display: flex; justify-content: space-between; gap: 18px; padding: 11px 14px; border-bottom: 1px solid var(--line-1); color: var(--text-3); font-family: var(--font-data); font-size: .65rem; }
.scanner-panel__body { padding: clamp(20px, 3vw, 32px); }
.signal-field { --signal-x: 50vw; --signal-y: 45vh; position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: radial-gradient(circle 360px at var(--signal-x) var(--signal-y), rgba(212,168,83,.11), transparent 72%); }
.signal-field::before { content: ""; position: absolute; inset: -20%; background-image: linear-gradient(rgba(255,255,255,.042) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.042) 1px, transparent 1px); background-size: 72px 72px; transform: perspective(800px) rotateX(54deg) translateY(20%); transform-origin: center bottom; mask-image: linear-gradient(to bottom, transparent 3%, #000 50%, transparent 88%); transition: transform 900ms var(--ease), opacity 500ms var(--ease); }
.signal-field::after { content: ""; position: absolute; left: 0; right: 0; top: var(--signal-y); height: 1px; background: linear-gradient(90deg, transparent, var(--signal), transparent); opacity: .28; box-shadow: 0 -120px rgba(212,168,83,.08), 0 120px rgba(212,168,83,.08); }
.hero-scanner[data-lock="true"] .signal-field::before { transform: perspective(800px) rotateX(64deg) scale(.88) translateY(25%); opacity: .64; }
.hero-scanner[data-lock="true"] .scanner-panel { border-color: var(--signal); }
.hero-scanner[data-lock="true"] .scanner-panel__top { color: var(--signal); }
.hero-chapter { position: absolute; right: 20px; bottom: 18px; color: var(--text-3); font-family: var(--font-data); font-size: .68rem; writing-mode: vertical-rl; }
.statement { display: grid; grid-template-columns: minmax(0,.7fr) minmax(0,1.3fr); gap: clamp(48px, 10vw, 150px); align-items: start; }
.statement__large { color: var(--text-1); font-size: clamp(2rem, 4.4vw, 4.6rem); line-height: 1.18; letter-spacing: -.045em; }
.metric-rail { margin-top: 64px; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line-1); border-bottom: 1px solid var(--line-1); }
.metric-rail__item { min-height: 120px; display: grid; align-content: center; gap: 6px; padding: 20px; border-right: 1px solid var(--line-1); }
.metric-rail__item:last-child { border-right: 0; }
.metric-rail__value { color: var(--text-1); font-family: var(--font-data); font-size: 1.2rem; }
.metric-rail__label { color: var(--text-3); font-size: .78rem; }
.method-map { display: grid; grid-template-columns: repeat(5, 1fr); margin-top: 56px; border: 1px solid var(--line-1); }
.method-map__step { min-height: 190px; padding: 24px; border-right: 1px solid var(--line-1); }
.method-map__step:last-child { border-right: 0; }
.method-map__step b { color: var(--signal); font-family: var(--font-data); font-size: .72rem; font-weight: 500; }
.method-map__step span { display: block; margin-top: 64px; color: var(--text-1); }
.table-index { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 56px; border-top: 1px solid var(--line-1); border-left: 1px solid var(--line-1); }
.table-index > div { min-height: 116px; display: grid; align-content: space-between; gap: 18px; padding: 20px; border-right: 1px solid var(--line-1); border-bottom: 1px solid var(--line-1); }
.table-index > div:nth-child(5) { grid-column: 1 / span 2; }
.table-index b { color: var(--signal); font-family: var(--font-data); font-size: .72rem; font-weight: 500; }
.table-index span { color: var(--text-1); font-size: .98rem; }
.table-index--product > div { min-height: 148px; }
.table-index--product small { color: var(--text-3); font-size: .78rem; line-height: 1.5; }
.closing-scan { min-height: 70svh; display: grid; place-items: center; text-align: center; }
.closing-scan__inner { display: grid; justify-items: center; gap: 28px; }
@media (max-width: 900px) {
  .hero-scanner__inner { grid-template-columns: 1fr; padding-top: 132px; }
  .hero-scanner__copy { gap: 22px; }
  .scanner-panel { max-width: 620px; }
  .statement { grid-template-columns: 1fr; }
  .method-map { grid-template-columns: 1fr; }
  .table-index { grid-template-columns: 1fr 1fr; }
  .table-index > div:nth-child(5) { grid-column: auto; }
  .method-map__step { min-height: 120px; border-right: 0; border-bottom: 1px solid var(--line-1); }
  .method-map__step span { margin-top: 28px; }
  .metric-rail { grid-template-columns: 1fr 1fr; }
  .metric-rail__item:nth-child(2) { border-right: 0; }
  .metric-rail__item:nth-child(-n+2) { border-bottom: 1px solid var(--line-1); }
}
@media (max-width: 600px) {
  .hero-scanner { min-height: auto; }
  .hero-scanner__inner { padding-bottom: 48px; }
  .hero-scanner__meta { display: grid; gap: 4px; }
  .hero-scanner__meta span { padding-left: 10px; }
  .hero-answers { gap: 6px; font-size: .86rem; line-height: 1.55; }
  .signal-field::before { background-size: 44px 44px; }
  .metric-rail { grid-template-columns: 1fr; }
  .table-index { grid-template-columns: 1fr; }
  .metric-rail__item { border-right: 0; border-bottom: 1px solid var(--line-1); }
}
@media (prefers-reduced-motion: reduce), (pointer: coarse) {
  .signal-field { display: none; }
}