/* ─────────────────────────────────────────────────────────────
   Kelvik — HVAC & industrial cooling homepage concept
   ───────────────────────────────────────────────────────────── */
:root {
  --ink: #0A0D12;
  --ink-2: #0F141B;
  --ink-3: #161D26;
  --ink-line: rgba(236, 240, 242, 0.1);
  --frost: #E9EEF1;
  --frost-2: #DDE4E8;
  --paper: #F6F8F9;
  --txt: #0A0D12;
  --txt-2: #4F5B67;
  --txt-3: #7C8793;
  --txt-d: #EEF2F4;
  --txt-d2: #8E9BA8;
  --line: rgba(10, 13, 18, 0.1);
  --cold: #5AB0FF;
  --cold-2: #8FCBFF;
  --cold-ink: #1463D6;
  --heat: #FF6A2B;
  --heat-2: #FFB53A;
  --good: #35D39C;
  --ironbow: linear-gradient(to top, #06051a 0%, #26096a 16%, #6a1a9e 33%, #c42f7a 50%, #f0621d 67%, #ffae1c 82%, #fff6cf 100%);
  --f: 'Inter Tight', ui-sans-serif, system-ui, sans-serif;
  --m: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --ease: cubic-bezier(0.2, 0.7, 0, 1);
  --g: clamp(20px, 4vw, 56px);
  --r: 24px;
  --nav-h: 76px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  margin: 0; background: var(--ink); color: var(--txt);
  font: 400 17px/1.5 var(--f); letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, canvas, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input { font: inherit; color: inherit; }
::selection { background: var(--cold); color: var(--ink); }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: #fff; padding: 8px 12px; border-radius: 8px; }
.skip:focus { left: 8px; }
:focus-visible { outline: 2px solid var(--cold); outline-offset: 3px; border-radius: 6px; }

.wrap { width: min(1360px, 100% - var(--g) * 2); margin-inline: auto; }
.wrap-wide { width: min(1520px, 100% - var(--g) * 2 + 24px); margin-inline: auto; }

.kicker { margin: 0 0 18px; font: 500 12px/1 var(--m); letter-spacing: 0.08em; text-transform: uppercase; color: var(--txt-3); }
.kicker-d { color: var(--txt-d2); }
.h2 { margin: 0; font-weight: 380; font-size: clamp(40px, 5.3vw, 84px); line-height: 0.98; letter-spacing: -0.045em; max-width: 14ch; text-wrap: balance; }
.h2-d { color: var(--txt-d); }
.sec-head { margin-bottom: clamp(40px, 5vw, 72px); }
.split-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; }
.sec-note { max-width: 34ch; margin: 0; color: var(--txt-d2); font-size: 17px; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 22px; font: 500 12px/1 var(--m); letter-spacing: 0.08em; text-transform: uppercase; color: rgba(238, 242, 244, 0.78); }
.eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cold); box-shadow: 0 0 0 4px rgba(90, 176, 255, 0.18); }

/* buttons */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 52px; padding: 0 24px; border-radius: 999px; font-weight: 500; font-size: 15.5px; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; isolation: isolate; transition: transform 0.5s var(--ease), background-color 0.3s, color 0.3s, box-shadow 0.4s; }
.btn .arr { display: inline-block; transition: transform 0.5s var(--ease); }
.btn:hover .arr { transform: translateX(4px); }
.btn::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.55) 50%, transparent 70%); transform: translateX(-120%); transition: transform 0.9s var(--ease); }
.btn:hover::after { transform: translateX(120%); }
.btn:active { transform: scale(0.97); }
.btn-cold { background: var(--cold); color: var(--ink); box-shadow: 0 10px 30px -12px rgba(90, 176, 255, 0.7); }
.btn-cold:hover { background: var(--cold-2); }
.btn-glass { background: rgba(255, 255, 255, 0.1); color: #fff; border: 1px solid rgba(255, 255, 255, 0.22); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); }
.btn-glass:hover { background: rgba(255, 255, 255, 0.18); }
.btn-light { background: #fff; color: var(--ink); }
.btn-sm { height: 40px; padding: 0 18px; font-size: 14px; }
.btn-lg { height: 60px; padding: 0 30px; font-size: 16.5px; }

/* ── NAV ── */
.nav { position: fixed; inset: 0 0 auto; z-index: 50; height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 0 var(--g); color: #fff; transition: background-color 0.5s, color 0.5s, transform 0.6s var(--ease), border-color 0.5s; border-bottom: 1px solid transparent; }
.nav.is-solid { background: rgba(10, 13, 18, 0.72); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); border-color: rgba(255, 255, 255, 0.06); }
.nav.is-light { background: rgba(246, 248, 249, 0.8); color: var(--ink); border-color: var(--line); }
.nav.is-hidden { transform: translateY(-100%); }
.logo { display: inline-flex; align-items: flex-start; gap: 3px; font-weight: 600; font-size: 20px; letter-spacing: 0.14em; }
.logo-deg { width: 9px; height: 9px; margin-top: 1px; border-radius: 50%; border: 2.2px solid currentColor; border-top-color: var(--cold); border-right-color: var(--cold); transition: transform 1s var(--ease); }
.logo:hover .logo-deg { transform: rotate(180deg); }
.nav-links { display: flex; gap: 30px; font-size: 14.5px; }
.nav-links a { position: relative; opacity: 0.82; transition: opacity 0.3s; }
.nav-links a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 1.5px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform 0.5s var(--ease); }
.nav-links a:hover { opacity: 1; }
.nav-links a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav-cta { display: flex; align-items: center; gap: 22px; }
.link-pin { display: inline-flex; align-items: center; gap: 7px; font-size: 14.5px; opacity: 0.86; }
.link-pin svg { width: 15px; height: 15px; }
.link-pin:hover { opacity: 1; }
.nav-burger { display: none; width: 40px; height: 40px; border-radius: 50%; position: relative; }
.nav-burger span { position: absolute; left: 11px; right: 11px; height: 1.6px; background: currentColor; transition: transform 0.4s var(--ease); }
.nav-burger span:first-child { top: 16px; } .nav-burger span:last-child { top: 23px; }
.nav-burger[aria-expanded='true'] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.nav-burger[aria-expanded='true'] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
.menu { position: fixed; inset: 0; z-index: 49; background: var(--ink); color: #fff; display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 0 var(--g); }
.menu a { font-size: 44px; letter-spacing: -0.04em; font-weight: 380; }
.menu[hidden] { display: none; }

/* ── HERO ── */
.js .hero-media, .js [data-hero-title], .js [data-hero-eyebrow], .js [data-hero-sub], .js [data-hero-actions], .js [data-hero-qs], .js .hud-tag, .js .hud-toggle, .js [data-hero-hint], .js .hud-scale { opacity: 0; }
.hero { position: relative; height: 100vh; height: 100svh; min-height: 660px; overflow: hidden; background: #060910; color: var(--txt-d); cursor: none; }
.hero-media { position: absolute; inset: 0; will-change: transform; }
.hero-poster, .hero-gl { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }
.hero-gl { opacity: 0; transition: opacity 0.6s; }
.hero.gl-on .hero-gl { opacity: 1; }
.hero::before { content: ''; position: absolute; inset: 0 0 auto; height: 200px; z-index: 1; pointer-events: none; background: linear-gradient(to bottom, rgba(6, 9, 16, 0.5), transparent); }
.hero-copy { position: absolute; z-index: 3; left: var(--g); top: clamp(112px, 17vh, 176px); max-width: 700px; pointer-events: none; }
.hero-copy a, .hero-copy button { pointer-events: auto; cursor: pointer; }
.hero-title { margin: 0; font-weight: 330; font-size: clamp(58px, 8.1vw, 138px); line-height: 0.9; letter-spacing: -0.055em; color: #fff; }
.hero-title .char { display: inline-block; will-change: transform, filter, color; }
.hero-sub { margin: 26px 0 32px; max-width: 30ch; font-size: clamp(17px, 1.35vw, 20px); line-height: 1.45; color: rgba(238, 242, 244, 0.86); text-shadow: 0 1px 18px rgba(6, 9, 16, 0.6); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.hud { position: absolute; inset: 0; z-index: 2; pointer-events: none; font-family: var(--m); }
.hud-tag { position: absolute; right: var(--g); top: calc(var(--nav-h) + 22px); display: flex; align-items: center; gap: 9px; font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.82); }
.rec { width: 7px; height: 7px; border-radius: 50%; background: #ff4b3a; animation: rec 1.6s steps(1) infinite; }
@keyframes rec { 50% { opacity: 0.15; } }
.hud-reticle { position: absolute; left: 0; top: 0; width: 240px; height: 240px; opacity: 0; will-change: transform; }
.hud-reticle .c { position: absolute; width: 18px; height: 18px; border: 0 solid rgba(255, 255, 255, 0.9); }
.hud-reticle .tl { left: 0; top: 0; border-left-width: 1.5px; border-top-width: 1.5px; }
.hud-reticle .tr { right: 0; top: 0; border-right-width: 1.5px; border-top-width: 1.5px; }
.hud-reticle .bl { left: 0; bottom: 0; border-left-width: 1.5px; border-bottom-width: 1.5px; }
.hud-reticle .br { right: 0; bottom: 0; border-right-width: 1.5px; border-bottom-width: 1.5px; }
.hud-reticle .x { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; }
.hud-reticle .x::before, .hud-reticle .x::after { content: ''; position: absolute; background: #fff; box-shadow: 0 0 6px rgba(0, 0, 0, 0.6); }
.hud-reticle .x::before { left: 10.25px; top: 0; width: 1.5px; height: 22px; }
.hud-reticle .x::after { top: 10.25px; left: 0; height: 1.5px; width: 22px; }
.hud-read { position: absolute; left: calc(100% + 16px); top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 6px; white-space: nowrap; padding: 12px 14px; border-radius: 14px; background: rgba(8, 10, 16, 0.58); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.12); transition: left 0.5s var(--ease), right 0.5s var(--ease); }
.hud-reticle.flip .hud-read { left: auto; right: calc(100% + 16px); }
.hud-read b { font: 400 30px/1 var(--f); letter-spacing: -0.03em; color: #fff; font-variant-numeric: tabular-nums; }
.hud-read span { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.72); }
.hud-scale { position: absolute; right: var(--g); top: 50%; transform: translateY(-46%); height: min(40vh, 360px); display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 11px; color: rgba(255, 255, 255, 0.8); }
.hud-scale .bar { position: relative; flex: 1; width: 8px; border-radius: 8px; background: var(--ironbow); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14); transform-origin: bottom; }
.hud-scale .mark { position: absolute; left: -9px; width: 26px; height: 2px; top: 50%; background: #fff; border-radius: 2px; box-shadow: 0 0 8px rgba(255, 255, 255, 0.8); transition: top 0.25s linear; }
.hud-toggle { position: absolute; z-index: 4; right: var(--g); bottom: 36px; display: inline-flex; align-items: center; gap: 10px; padding: 9px 14px 9px 10px; border-radius: 999px; background: rgba(8, 10, 16, 0.5); border: 1px solid rgba(255, 255, 255, 0.16); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: #fff; font: 500 12px/1 var(--m); letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; }
.hud-toggle .sw { position: relative; width: 30px; height: 18px; border-radius: 99px; background: rgba(255, 255, 255, 0.18); transition: background 0.4s; }
.hud-toggle .sw i { position: absolute; left: 2px; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform 0.5s var(--ease); }
.hud-toggle[aria-pressed='true'] .sw { background: var(--ironbow); background: linear-gradient(90deg, #6a1a9e, #f0621d, #ffae1c); }
.hud-toggle[aria-pressed='true'] .sw i { transform: translateX(12px); }
.hero-hint { margin: 22px 0 0; display: inline-flex; padding: 9px 14px 9px 11px; border-radius: 999px; background: rgba(8, 10, 16, 0.42); border: 1px solid rgba(255, 255, 255, 0.12); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); align-items: center; gap: 10px; font: 500 12px/1 var(--m); letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255, 255, 255, 0.86); pointer-events: none; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.7); }
.hint-x { width: 14px; height: 14px; border: 1.5px solid currentColor; border-radius: 50%; position: relative; }
.hint-x::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--heat); animation: pulse 1.6s var(--ease) infinite; }
@keyframes pulse { 0% { transform: scale(0.4); opacity: 1; } 100% { transform: scale(1.8); opacity: 0; } }
.hint-touch { display: none; }
.hero-qs { position: absolute; z-index: 4; left: var(--g); right: calc(var(--g) + 200px); bottom: 30px; }
.qs-label { margin: 0 0 12px; font: 500 11.5px/1 var(--m); letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.7); }
.qs-row { display: flex; flex-wrap: wrap; gap: 8px; }
.qs-row a { display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: 999px; font-size: 14.5px; color: #fff; background: rgba(8, 10, 16, 0.42); border: 1px solid rgba(255, 255, 255, 0.16); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); cursor: pointer; transition: background 0.3s, border-color 0.3s, translate 0.5s var(--ease); }
.qs-row a:hover { background: rgba(90, 176, 255, 0.22); border-color: rgba(143, 203, 255, 0.6); translate: 0 -2px; }
.hero.no-cursor { cursor: auto; }

/* ── PATHS ── */
.paths { position: relative; background: var(--paper); padding: clamp(96px, 12vw, 160px) 0 clamp(64px, 7vw, 96px); }
.path-row { display: flex; gap: 14px; height: min(80vh, 780px); min-height: 520px; }
.path { position: relative; flex: 1 1 0; min-width: 0; border-radius: 30px; overflow: hidden; background: #111; cursor: crosshair; transition: flex-grow 0.9s var(--ease); isolation: isolate; outline-offset: 4px; }
@media (hover: hover) and (min-width: 821px) {
  .path-row:hover .path { flex-grow: 0.78; }
  .path-row .path:hover { flex-grow: 1.22; }
}
.path-gl, .path-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.path-gl { z-index: 1; opacity: 0; transition: opacity 0.5s; }
.path.gl-on .path-gl { opacity: 1; }
.path-readout { position: absolute; z-index: 3; left: 22px; top: 22px; display: flex; align-items: baseline; gap: 10px; padding: 10px 14px; border-radius: 14px; color: #fff; background: rgba(8, 10, 16, 0.5); border: 1px solid rgba(255, 255, 255, 0.14); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-family: var(--m); }
.path-readout span { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.7; }
.path-readout b { font: 400 22px/1 var(--f); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.path-readout em { font-style: normal; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--heat-2); transition: color 0.4s; }
.path-readout.ok em { color: var(--good); }
.path-body { position: absolute; z-index: 3; left: 14px; right: 14px; bottom: 14px; padding: 26px 26px 24px; border-radius: 22px; color: #fff; background: rgba(8, 10, 16, 0.46); border: 1px solid rgba(255, 255, 255, 0.12); backdrop-filter: blur(22px) saturate(1.3); -webkit-backdrop-filter: blur(22px) saturate(1.3); }
.path-label { margin: 0 0 10px; font: 500 12px/1 var(--m); letter-spacing: 0.1em; text-transform: uppercase; color: var(--cold-2); }
.path h3 { margin: 0 0 10px; font-weight: 400; font-size: clamp(26px, 2.5vw, 40px); line-height: 1.02; letter-spacing: -0.035em; max-width: 16ch; }
.path-where { margin: 0 0 16px; font-size: 14.5px; color: rgba(255, 255, 255, 0.72); }
.path-kit { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.path-kit li { padding: 6px 11px; border-radius: 99px; font-size: 13px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.14); }
.paths-hint { margin-top: 18px; font: 500 12px/1 var(--m); letter-spacing: 0.06em; text-transform: uppercase; color: var(--txt-3); }

/* ── EQUIPMENT ── */
.equipment { background: var(--frost); padding: clamp(96px, 11vw, 150px) 0 clamp(80px, 9vw, 120px); }
.swap { display: inline-block; color: var(--cold-ink); }
.seg { position: relative; display: inline-flex; padding: 5px; border-radius: 999px; background: rgba(10, 13, 18, 0.06); border: 1px solid var(--line); flex-shrink: 0; }
.seg button { position: relative; z-index: 1; height: 44px; padding: 0 22px; border-radius: 999px; font-size: 15px; font-weight: 500; color: var(--txt-2); transition: color 0.4s; }
.seg button[aria-selected='true'], .seg button.on { color: #fff; }
.seg-pill { position: absolute; z-index: 0; top: 5px; bottom: 5px; left: 5px; border-radius: 999px; background: var(--ink); transition: transform 0.6s var(--ease), width 0.6s var(--ease); }
.eq-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.eq-card { position: relative; display: flex; flex-direction: column; background: var(--paper); border-radius: 26px; padding: 12px 12px 20px; min-height: 480px; transition: box-shadow 0.6s var(--ease), translate 0.6s var(--ease); }
.eq-card:hover { box-shadow: 0 30px 60px -30px rgba(10, 20, 40, 0.35); translate: 0 -4px; }
.eq-img { position: relative; aspect-ratio: 3 / 2; border-radius: 18px; background: #F1F4F6; overflow: hidden; }
.eq-img img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; transform: scale(1.02); transition: transform 1.2s var(--ease); }
.eq-card:hover .eq-img img { transform: scale(1.08); }
.eq-img::after { content: ''; position: absolute; top: 0; bottom: 0; width: 38%; left: -40%; background: linear-gradient(90deg, transparent, rgba(90, 176, 255, 0.0) 30%, rgba(90, 176, 255, 0.28) 50%, rgba(255, 255, 255, 0.0) 70%, transparent); mix-blend-mode: screen; pointer-events: none; }
.eq-card:hover .eq-img::after { animation: scan 1.3s var(--ease) 1; }
@keyframes scan { to { left: 110%; } }
.eq-tag { position: absolute; left: 12px; top: 12px; z-index: 2; padding: 5px 9px; border-radius: 8px; font: 500 11px/1 var(--m); letter-spacing: 0.06em; background: #fff; color: var(--txt-2); box-shadow: 0 1px 0 var(--line); }
.eq-body { display: flex; flex-direction: column; flex: 1; padding: 20px 10px 0; }
.eq-name { margin: 0 0 6px; font-weight: 500; font-size: 22px; line-height: 1.1; letter-spacing: -0.025em; }
.eq-line { margin: 0 0 18px; font-size: 15px; line-height: 1.4; color: var(--txt-2); min-height: 2.8em; }
.eq-specs { margin: 0 0 18px; display: grid; gap: 0; }
.eq-specs div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 14px; }
.eq-specs dt { color: var(--txt-3); font: 400 12px/1.6 var(--m); letter-spacing: 0.02em; }
.eq-specs dd { margin: 0; font-weight: 500; text-align: right; }
.eq-link { margin-top: auto; display: inline-flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px; border-radius: 14px; background: #fff; font-size: 14px; font-weight: 500; transition: background 0.3s, color 0.3s; }
.eq-link span { font: 500 12px/1 var(--m); color: var(--txt-3); transition: color 0.3s; }
.eq-link:hover { background: var(--ink); color: #fff; }
.eq-link:hover span { color: var(--cold-2); }
.eq-foot { margin-top: 28px; color: var(--txt-2); font-size: 15px; }
.eq-foot a { color: var(--cold-ink); font-weight: 500; }
/* controls card: coded dashboard */
.eq-dash { position: relative; aspect-ratio: 4 / 3; border-radius: 18px; background: var(--ink); color: #fff; padding: 14px; display: flex; flex-direction: column; gap: 8px; overflow: hidden; font-family: var(--m); }
.eq-dash .dh { display: flex; justify-content: space-between; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--txt-d2); }
.eq-dash .row { display: grid; grid-template-columns: 8px 1fr auto 70px; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: rgba(255, 255, 255, 0.05); font-size: 11.5px; }
.eq-dash .st { width: 7px; height: 7px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 3px rgba(53, 211, 156, 0.18); }
.eq-dash .st.warn { background: var(--heat-2); box-shadow: 0 0 0 3px rgba(255, 181, 58, 0.18); animation: rec 1.2s steps(1) infinite; }
.eq-dash .v { font: 400 15px/1 var(--f); font-variant-numeric: tabular-nums; }
.eq-dash svg { width: 70px; height: 22px; }
.eq-dash svg path { fill: none; stroke: var(--cold); stroke-width: 1.5; }

/* ── ANSWERS ── */
.answers { position: relative; background: var(--ink); color: var(--txt-d); }
.ans-pin { min-height: 100vh; display: flex; align-items: center; padding: calc(var(--nav-h) + 40px) 0 56px; }
.ans-grid { display: grid; grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.ans-left .h2 { font-size: clamp(38px, 4.3vw, 68px); margin-bottom: 40px; }
.ans-list { list-style: none; margin: 0; padding: 0; }
.ans-list li { border-top: 1px solid var(--ink-line); }
.ans-list li:last-child { border-bottom: 1px solid var(--ink-line); }
.ans-list button { position: relative; width: 100%; display: grid; grid-template-columns: 44px 1fr; align-items: baseline; text-align: left; padding: 20px 0 22px; color: var(--txt-d2); transition: color 0.5s; }
.ans-list .n { font: 500 12px/1 var(--m); letter-spacing: 0.06em; }
.ans-list .q { font-size: clamp(18px, 1.55vw, 24px); letter-spacing: -0.02em; line-height: 1.2; }
.ans-list li.on button, .ans-list button:hover { color: #fff; }
.ans-list li.on .n { color: var(--cold); }
.ans-list .prog { position: absolute; left: 44px; right: 0; bottom: -1px; height: 1.5px; overflow: hidden; }
.ans-list .prog i { position: absolute; inset: 0; background: var(--cold); transform: scaleX(0); transform-origin: left; }
.ans-stage { position: relative; height: min(640px, calc(100vh - var(--nav-h) - 110px)); min-height: 560px; }
.ans-card { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 22px; visibility: hidden; }
.ans-card.on { visibility: visible; }
.ans-card header { max-width: 560px; }
.fix { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px; padding: 6px 11px; border-radius: 99px; font: 500 11.5px/1 var(--m); letter-spacing: 0.05em; text-transform: uppercase; color: var(--heat-2); background: rgba(255, 181, 58, 0.1); border: 1px solid rgba(255, 181, 58, 0.24); }
.fix::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ans-card h3 { margin: 0 0 10px; font-weight: 400; font-size: clamp(28px, 2.6vw, 42px); line-height: 1.02; letter-spacing: -0.035em; color: #fff; }
.ans-card header p { margin: 0; color: var(--txt-d2); font-size: 16.5px; max-width: 50ch; }
.demo { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 14px; padding: 20px 22px 20px; border-radius: 24px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.02)); border: 1px solid var(--ink-line); }
.demo-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.demo-title { font: 500 11.5px/1.3 var(--m); letter-spacing: 0.06em; text-transform: uppercase; color: var(--txt-d2); }
.chips { display: inline-flex; gap: 4px; padding: 4px; border-radius: 99px; background: rgba(255, 255, 255, 0.06); }
.chips button { height: 32px; padding: 0 13px; border-radius: 99px; font-size: 13px; color: var(--txt-d2); transition: background 0.35s, color 0.35s; }
.chips button.on { background: #fff; color: var(--ink); }
.chips button[data-size='small'].on { background: var(--heat); color: #fff; }
.chips button[data-size='big'].on { background: var(--heat-2); color: var(--ink); }
.chip-btn { height: 34px; padding: 0 14px; border-radius: 99px; font-size: 13px; font-weight: 500; background: #fff; color: var(--ink); transition: background 0.3s, transform 0.4s var(--ease); }
.chip-btn:hover { background: var(--cold-2); }
.chip-btn:active { transform: scale(0.96); }
.demo-out { display: flex; align-items: flex-end; gap: 28px; flex-wrap: wrap; padding-top: 14px; border-top: 1px solid var(--ink-line); }
.demo-out > div { display: flex; flex-direction: column; gap: 6px; }
.demo-out span { font: 500 11px/1 var(--m); letter-spacing: 0.06em; text-transform: uppercase; color: var(--txt-d2); }
.demo-out b { font-weight: 400; font-size: 24px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: #fff; }
.demo-out b.good { color: var(--good); }
.demo-out b.bad { color: var(--heat); }
.demo-out.cols-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.verdict { margin: 0 0 0 auto; max-width: 26ch; font-size: 15px; color: var(--txt-d); text-align: right; }
/* size chart */
.size-chart { flex: 1; min-height: 120px; max-height: 250px; margin: auto 0; width: 100%; height: 100%; overflow: visible; }
.size-chart .band { fill: rgba(90, 176, 255, 0.1); }
.size-chart .set { stroke: rgba(143, 203, 255, 0.6); stroke-dasharray: 4 5; stroke-width: 1; vector-effect: non-scaling-stroke; }
.size-chart .trace { fill: none; stroke: var(--cold); stroke-width: 2.4; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.size-chart .area { fill: url(#none); fill: rgba(90, 176, 255, 0.08); }
.size-chart .peak rect { fill: rgba(255, 106, 43, 0.07); }
.demo-size.small .trace { stroke: var(--heat); } .demo-size.small .area { fill: rgba(255, 106, 43, 0.1); }
.demo-size.big .trace { stroke: var(--heat-2); } .demo-size.big .area { fill: rgba(255, 181, 58, 0.08); }
.size-axis { display: flex; justify-content: space-between; margin-top: -6px; font: 500 10.5px/1 var(--m); letter-spacing: 0.04em; color: var(--txt-d2); }
.size-axis .pk { color: var(--heat); }
/* perf chart */
.perf-chart { position: relative; flex: 1; min-height: 140px; }
.perf-chart svg { width: 100%; height: 100%; overflow: visible; }
.perf-chart .grid line { stroke: rgba(255, 255, 255, 0.07); stroke-width: 1; vector-effect: non-scaling-stroke; }
.perf-chart .grid text { fill: var(--txt-d2); font: 500 10px var(--m); }
.curve-cap { fill: none; stroke: var(--cold); stroke-width: 2.6; vector-effect: non-scaling-stroke; }
.curve-eff { fill: none; stroke: var(--heat); stroke-width: 1.8; stroke-dasharray: 5 5; vector-effect: non-scaling-stroke; }
.perf-chart .cursor { stroke: rgba(255, 255, 255, 0.5); stroke-width: 1; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.perf-chart .dot { fill: #fff; stroke: var(--cold); stroke-width: 3; }
.perf-legend { position: absolute; right: 0; top: -2px; display: flex; gap: 16px; font: 500 10.5px/1 var(--m); letter-spacing: 0.04em; text-transform: uppercase; color: var(--txt-d2); }
.perf-legend span::before { content: ''; display: inline-block; width: 14px; height: 2px; margin-right: 7px; vertical-align: middle; background: var(--cold); }
.perf-legend .l-eff::before { background: repeating-linear-gradient(90deg, var(--heat) 0 4px, transparent 4px 7px); }
.range { display: flex; flex-direction: column; gap: 10px; }
.range > span { display: flex; justify-content: space-between; font: 500 11.5px/1 var(--m); letter-spacing: 0.05em; text-transform: uppercase; color: var(--txt-d2); }
.range b { color: #fff; font-weight: 500; }
input[type='range'] { -webkit-appearance: none; appearance: none; width: 100%; height: 26px; background: transparent; cursor: pointer; --p: 60%; }
input[type='range']::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--cold) 0 var(--p), rgba(255, 255, 255, 0.14) var(--p)); }
input[type='range']::-moz-range-track { height: 4px; border-radius: 4px; background: rgba(255, 255, 255, 0.14); }
input[type='range']::-moz-range-progress { height: 4px; border-radius: 4px; background: var(--cold); }
input[type='range']::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -9px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 5px rgba(90, 176, 255, 0.3), 0 4px 12px rgba(0, 0, 0, 0.4); transition: box-shadow 0.3s; }
input[type='range']::-moz-range-thumb { width: 22px; height: 22px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 5px rgba(90, 176, 255, 0.3); }
input[type='range']:active::-webkit-slider-thumb { box-shadow: 0 0 0 9px rgba(90, 176, 255, 0.28), 0 4px 12px rgba(0, 0, 0, 0.4); }
/* fit */
.fit-svg { flex: 1; min-height: 150px; width: 100%; height: 100%; color: rgba(191, 227, 255, 0.85); overflow: visible; }
.fit-svg .old { fill: none; stroke: rgba(255, 181, 58, 0.7); stroke-width: 1.3; stroke-dasharray: 6 6; }
.fit-svg .old-t { fill: var(--heat-2); font: 500 10.5px var(--m); letter-spacing: 0.06em; text-transform: uppercase; }
.fit-svg .body { fill: rgba(90, 176, 255, 0.07); stroke: var(--cold-2); stroke-width: 1.4; }
.fit-svg .fans circle { fill: none; stroke: var(--cold-2); stroke-width: 1.1; }
.fit-svg .panel { stroke: var(--cold-2); stroke-width: 1; }
.fit-svg .dim { stroke: currentColor; stroke-width: 1; }
.fit-svg .dim-t { fill: #fff; font: 500 12px var(--m); }
.fit-svg .conn line { stroke: #fff; stroke-width: 1; }
.fit-svg .conn circle { fill: var(--cold); }
.fit-svg .conn text { fill: #fff; font: 500 11px var(--m); }
.fit-svg .fit-ok { fill: var(--good); font: 500 12px var(--m); letter-spacing: 0.06em; text-transform: uppercase; }
.protos { display: flex; flex-wrap: wrap; gap: 6px; }
.protos span { padding: 7px 11px; border-radius: 99px; font: 500 12px/1 var(--m); color: var(--txt-d2); border: 1px solid var(--ink-line); transition: color 0.4s, border-color 0.4s, background 0.4s; }
.protos span.lit { color: var(--ink); background: var(--cold-2); border-color: var(--cold-2); }
/* redundancy */
.mods { flex: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; min-height: 0; }
.mod { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 16px 12px; border-radius: 18px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--ink-line); transition: background 0.5s, border-color 0.5s; }
.mod .fan { position: relative; width: clamp(56px, 6vw, 84px); aspect-ratio: 1; border-radius: 50%; border: 1.5px solid rgba(143, 203, 255, 0.5); }
.mod .fan i { position: absolute; inset: 14%; border-radius: 50%; background: conic-gradient(from 0deg, var(--cold) 0 14%, transparent 14% 33%, var(--cold) 33% 47%, transparent 47% 66%, var(--cold) 66% 80%, transparent 80%); mask: radial-gradient(circle, transparent 18%, #000 19%); -webkit-mask: radial-gradient(circle, transparent 18%, #000 19%); animation: spin var(--spd, 1.4s) linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.mod .name { font: 500 11.5px/1 var(--m); letter-spacing: 0.06em; text-transform: uppercase; color: var(--txt-d2); }
.mod .load { width: 100%; height: 6px; border-radius: 6px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.mod .load i { display: block; height: 100%; width: var(--l, 67%); border-radius: 6px; background: var(--cold); transition: width 0.9s var(--ease), background 0.4s; }
.mod .pct { font: 400 20px/1 var(--f); font-variant-numeric: tabular-nums; }
.mod.off { background: rgba(255, 106, 43, 0.08); border-color: rgba(255, 106, 43, 0.4); }
.mod.off .fan { border-color: rgba(255, 106, 43, 0.6); }
.mod.off .fan i { animation-play-state: paused; background: conic-gradient(from 0deg, var(--heat) 0 14%, transparent 14% 33%, var(--heat) 33% 47%, transparent 47% 66%, var(--heat) 66% 80%, transparent 80%); }
.mod.off .name { color: var(--heat); }
.mod.max .load i { background: linear-gradient(90deg, var(--cold), var(--cold-2)); }
.toast { position: relative; margin: 0; padding: 12px 16px; min-height: 44px; border-radius: 14px; background: #fff; color: var(--ink); font-size: 14px; box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.6); opacity: 0; transform: translateY(10px); pointer-events: none; }
.toast b { font-weight: 600; }

/* ── SERVICE ── */
.service { background: var(--paper); padding: clamp(96px, 11vw, 160px) 0; }
.svc-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 7vw, 110px); align-items: start; }
.svc-left { position: sticky; top: calc(var(--nav-h) + 40px); }
.svc-left .h2 { font-size: clamp(38px, 4.4vw, 70px); max-width: 12ch; }
.svc-photo { position: relative; margin: 40px 0 0; border-radius: 24px; overflow: hidden; aspect-ratio: 5 / 4; background: var(--frost); }
.svc-photo img { width: 100%; height: 100%; object-fit: cover; }
.svc-photo figcaption { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; background: rgba(246, 248, 249, 0.86); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); font-size: 14px; font-weight: 500; }
.live { width: 8px; height: 8px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 0 rgba(53, 211, 156, 0.6); animation: live 2s infinite; flex-shrink: 0; }
@keyframes live { 70% { box-shadow: 0 0 0 10px rgba(53, 211, 156, 0); } 100% { box-shadow: 0 0 0 0 rgba(53, 211, 156, 0); } }
.svc-list { position: relative; list-style: none; margin: 0; padding: 0; }
.svc-list::before { content: ''; position: absolute; left: 17px; top: 0; bottom: 0; width: 1px; background: var(--line); }
.svc-list::after { content: ''; position: absolute; left: 13px; top: var(--dot, 0%); width: 9px; height: 9px; border-radius: 50%; background: var(--cold); box-shadow: 0 0 0 6px rgba(90, 176, 255, 0.2); transform: translateY(-50%); }
.svc-list li { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 20px; align-items: start; padding: 30px 0 30px; border-top: 1px solid var(--line); }
.svc-list li:last-child { border-bottom: 1px solid var(--line); }
.svc-list li::before { content: ''; position: absolute; inset: 0 -18px; border-radius: 18px; background: var(--frost); opacity: 0; transform: scaleY(0.9); transition: opacity 0.4s, transform 0.6s var(--ease); z-index: 0; }
.svc-list li:hover::before { opacity: 1; transform: none; }
.svc-list li > * { position: relative; z-index: 1; }
.svc-list .n { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--paper); border: 1px solid var(--line); font: 500 11.5px/1 var(--m); color: var(--txt-2); transition: background 0.4s, color 0.4s, border-color 0.4s; }
.svc-list li:hover .n, .svc-list li.lit .n { background: var(--ink); color: var(--cold-2); border-color: var(--ink); }
.svc-list h3 { margin: 4px 0 8px; font-weight: 500; font-size: clamp(22px, 1.9vw, 28px); letter-spacing: -0.03em; line-height: 1.1; }
.svc-list p { margin: 0; font-size: 16px; color: var(--txt-2); max-width: 44ch; }
.svc-list em { margin-top: 6px; font-style: normal; white-space: nowrap; padding: 7px 11px; border-radius: 99px; font: 500 11.5px/1 var(--m); letter-spacing: 0.03em; background: var(--frost); color: var(--txt-2); transition: background 0.4s, color 0.4s; }
.svc-list li:hover em { background: var(--cold); color: var(--ink); }

/* ── SPECS ── */
.specs { background: var(--ink); color: var(--txt-d); padding: clamp(96px, 11vw, 150px) 0; }
.spec-app { border: 1px solid var(--ink-line); border-radius: 28px; background: var(--ink-2); overflow: hidden; box-shadow: 0 60px 120px -60px rgba(90, 176, 255, 0.18); }
.spec-search { display: flex; align-items: center; gap: 14px; padding: 18px 24px; border-bottom: 1px solid var(--ink-line); }
.spec-search svg { width: 20px; height: 20px; color: var(--txt-d2); flex-shrink: 0; }
.spec-search input { flex: 1; min-width: 0; height: 44px; border: 0; outline: 0; background: transparent; font-size: clamp(16px, 1.4vw, 20px); letter-spacing: -0.01em; }
.spec-search input::placeholder { color: rgba(142, 155, 168, 0.8); }
.spec-count { font: 500 11.5px/1 var(--m); letter-spacing: 0.05em; text-transform: uppercase; color: var(--txt-d2); white-space: nowrap; }
.spec-filters { display: flex; gap: 6px; padding: 14px 24px; border-bottom: 1px solid var(--ink-line); overflow-x: auto; scrollbar-width: none; }
.spec-filters::-webkit-scrollbar { display: none; }
.spec-filters button { flex-shrink: 0; height: 34px; padding: 0 14px; border-radius: 99px; font-size: 13.5px; color: var(--txt-d2); border: 1px solid var(--ink-line); transition: background 0.3s, color 0.3s, border-color 0.3s; }
.spec-filters button:hover { color: #fff; border-color: rgba(255, 255, 255, 0.3); }
.spec-filters button.on { background: #fff; color: var(--ink); border-color: #fff; }
.spec-body { display: grid; grid-template-columns: minmax(300px, 400px) minmax(0, 1fr); min-height: 600px; }
.spec-list { border-right: 1px solid var(--ink-line); max-height: 660px; overflow-y: auto; padding: 8px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.15) transparent; }
.spec-row { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; width: 100%; padding: 14px 16px; border-radius: 16px; text-align: left; transition: background 0.3s; }
.spec-row:hover { background: rgba(255, 255, 255, 0.04); }
.spec-row.on { background: rgba(90, 176, 255, 0.12); box-shadow: inset 0 0 0 1px rgba(90, 176, 255, 0.3); }
.spec-row .id { font: 500 14px/1.3 var(--m); color: #fff; }
.spec-row .cap { font: 400 15px/1.3 var(--f); text-align: right; font-variant-numeric: tabular-nums; }
.spec-row .fam { font-size: 13px; color: var(--txt-d2); }
.spec-row .tr { font: 500 11px/1.4 var(--m); color: var(--txt-d2); text-align: right; }
.spec-row mark { background: rgba(90, 176, 255, 0.3); color: #fff; border-radius: 3px; }
.spec-empty { padding: 40px 16px; color: var(--txt-d2); font-size: 15px; }
.spec-detail { position: relative; padding: 26px 30px 30px; min-width: 0; }
.sd-head { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 22px; align-items: center; margin-bottom: 22px; }
.sd-thumb { aspect-ratio: 4 / 3; border-radius: 16px; background: #EEF2F4; overflow: hidden; }
.sd-thumb img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }
.sd-head h3 { margin: 0 0 6px; font-weight: 400; font-size: clamp(22px, 2vw, 30px); letter-spacing: -0.03em; line-height: 1.08; }
.sd-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font: 500 12px/1.4 var(--m); color: var(--txt-d2); }
.sd-certs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.sd-certs span { padding: 5px 9px; border-radius: 8px; font: 500 11px/1 var(--m); border: 1px solid rgba(53, 211, 156, 0.35); color: var(--good); }
.sd-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--ink-line); margin-bottom: 20px; overflow-x: auto; scrollbar-width: none; }
.sd-tabs button { position: relative; flex-shrink: 0; padding: 12px 14px; font-size: 14px; color: var(--txt-d2); transition: color 0.3s; }
.sd-tabs button::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; background: var(--cold); transform: scaleX(0); transition: transform 0.5s var(--ease); }
.sd-tabs button.on { color: #fff; }
.sd-tabs button.on::after { transform: scaleX(1); }
.sd-pane { min-height: 300px; }
.sd-kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
.sd-kv div { display: flex; justify-content: space-between; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--ink-line); font-size: 15px; }
.sd-kv dt { color: var(--txt-d2); }
.sd-kv dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.sd-curve { position: relative; height: 250px; }
.sd-curve svg { width: 100%; height: 100%; overflow: visible; }
.sd-curve .ax line { stroke: rgba(255, 255, 255, 0.08); vector-effect: non-scaling-stroke; }
.sd-curve .ax text { fill: var(--txt-d2); font: 500 10px var(--m); }
.sd-curve .c1 { fill: none; stroke: var(--cold); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.sd-curve .c2 { fill: none; stroke: var(--heat); stroke-width: 1.8; stroke-dasharray: 5 5; vector-effect: non-scaling-stroke; }
.sd-curve .a1 { fill: url(#sdGrad); }
.sd-cap { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 10px; font: 500 11px/1.4 var(--m); letter-spacing: 0.04em; color: var(--txt-d2); text-transform: uppercase; }
.sd-cap i { display: inline-block; width: 14px; height: 2px; margin-right: 6px; vertical-align: middle; background: var(--cold); }
.sd-cap i.h { background: repeating-linear-gradient(90deg, var(--heat) 0 4px, transparent 4px 7px); }
.sd-sound { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 28px; align-items: end; }
.sd-sound .big b { display: block; font-weight: 300; font-size: 72px; line-height: 0.9; letter-spacing: -0.05em; }
.sd-sound .big span { font: 500 11.5px/1.4 var(--m); color: var(--txt-d2); text-transform: uppercase; letter-spacing: 0.05em; }
.oct { display: flex; align-items: flex-end; gap: 8px; height: 190px; }
.oct div { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%; justify-content: flex-end; }
.oct i { width: 100%; border-radius: 6px 6px 2px 2px; background: linear-gradient(to top, rgba(90, 176, 255, 0.25), var(--cold)); transform-origin: bottom; }
.oct span { font: 500 10px/1 var(--m); color: var(--txt-d2); }
.sd-dims { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: center; }
.sd-dims svg { width: 100%; color: var(--cold-2); }
.sd-docs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sd-doc { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--ink-line); text-align: left; transition: background 0.3s, border-color 0.3s; }
.sd-doc:hover { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.2); }
.sd-doc .ic { display: grid; place-items: center; width: 38px; height: 44px; border-radius: 8px; background: rgba(255, 255, 255, 0.06); font: 500 9.5px/1 var(--m); color: var(--cold-2); }
.sd-doc b { display: block; font-weight: 500; font-size: 14px; line-height: 1.25; }
.sd-doc small { font: 500 11px/1 var(--m); color: var(--txt-d2); }
.sd-doc svg { width: 16px; height: 16px; color: var(--txt-d2); transition: transform 0.4s var(--ease), color 0.3s; }
.sd-doc:hover svg { transform: translateY(2px); color: #fff; }
.sd-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.btn-line { border: 1px solid rgba(255, 255, 255, 0.24); color: #fff; }
.btn-line:hover { background: rgba(255, 255, 255, 0.08); }

/* ── CONTACT ── */
.contact { background: var(--frost); padding: clamp(96px, 11vw, 150px) 0; }
.contact .sec-head { margin-bottom: 36px; }
.ct-tabs { position: relative; display: inline-flex; padding: 5px; border-radius: 999px; background: rgba(10, 13, 18, 0.06); border: 1px solid var(--line); margin-bottom: 40px; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.ct-tabs button { position: relative; z-index: 1; height: 46px; padding: 0 22px; border-radius: 999px; font-size: 15px; font-weight: 500; color: var(--txt-2); white-space: nowrap; transition: color 0.4s; }
.ct-tabs button[aria-selected='true'] { color: #fff; }
.ct-pill { position: absolute; top: 5px; bottom: 5px; left: 0; border-radius: 999px; background: var(--ink); transition: transform 0.6s var(--ease), width 0.6s var(--ease); }
.ct-form-panel { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.85fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.ct-form { display: flex; flex-direction: column; }
.fq { padding: 22px 0; border-top: 1px solid var(--line); }
.fq-l { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; font: 500 12px/1 var(--m); letter-spacing: 0.06em; text-transform: uppercase; color: var(--txt-2); }
.fq-l span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--paper); border: 1px solid var(--line); font-size: 11px; transition: background 0.4s, color 0.4s; }
.fq.done .fq-l span { background: var(--ink); color: var(--cold-2); border-color: var(--ink); }
.fq-quote, .tk-quote { display: none !important; }
.is-quote .fq-quote { display: block !important; }
.is-quote .tk-quote { display: flex !important; }
.opts { display: flex; flex-wrap: wrap; gap: 8px; }
.opts button { height: 44px; padding: 0 16px; border-radius: 999px; font-size: 15px; background: var(--paper); border: 1px solid var(--line); transition: background 0.3s, color 0.3s, border-color 0.3s, transform 0.4s var(--ease); }
.opts button:hover { border-color: rgba(10, 13, 18, 0.3); }
.opts button.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.opts button:active { transform: scale(0.96); }
.inrow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.inp { height: 52px; padding: 0 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--paper); font-size: 16px; outline: 0; width: 100%; transition: border-color 0.3s, box-shadow 0.3s; }
.inp:focus { border-color: var(--cold-ink); box-shadow: 0 0 0 4px rgba(90, 176, 255, 0.22); }
.inp-num { width: 130px; font-variant-numeric: tabular-nums; }
.inp-l { position: relative; display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; color: var(--txt-3); }
.inp-l em { position: absolute; right: 14px; bottom: 16px; font-style: normal; color: var(--txt-3); font-size: 15px; }
.inp-l .inp { width: 170px; padding-right: 36px; }
.mini-seg { display: inline-flex; padding: 4px; border-radius: 12px; background: var(--paper); border: 1px solid var(--line); }
.mini-seg button { height: 42px; padding: 0 14px; border-radius: 9px; font: 500 13px/1 var(--m); color: var(--txt-2); transition: background 0.3s, color 0.3s; }
.mini-seg button.on { background: var(--ink); color: #fff; }
.check { display: inline-flex; align-items: center; gap: 8px; margin-left: 6px; font-size: 14.5px; color: var(--txt-2); cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--ink); }
.fq-you { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ct-submit { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; padding-top: 26px; border-top: 1px solid var(--line); }
.ct-note { margin: 0; font-size: 14px; color: var(--txt-2); }
.ticket { position: sticky; top: calc(var(--nav-h) + 24px); padding: 26px 26px 30px; border-radius: 28px; background: var(--ink); color: var(--txt-d); overflow: hidden; box-shadow: 0 40px 80px -40px rgba(10, 20, 40, 0.6); }
.ticket::before { content: ''; position: absolute; left: 0; right: 0; top: 120px; height: 0; border-top: 1.5px dashed rgba(255, 255, 255, 0.14); }
.tk-head { display: flex; justify-content: space-between; align-items: center; font: 500 11.5px/1 var(--m); letter-spacing: 0.06em; text-transform: uppercase; }
.tk-kind { color: var(--cold-2); }
.tk-id { color: var(--txt-d2); }
.tk-ring { position: relative; display: flex; align-items: center; gap: 16px; margin: 18px 0 44px; height: 56px; }
.tk-ring svg { width: 56px; height: 56px; transform: rotate(-90deg); }
.tk-ring circle { fill: none; stroke-width: 9; }
.tk-ring .trk { stroke: rgba(255, 255, 255, 0.08); }
.tk-ring .val { stroke: var(--cold); stroke-linecap: round; stroke-dasharray: 326.7; stroke-dashoffset: 326.7; transition: stroke-dashoffset 0.8s var(--ease); }
.tk-ring b { font-weight: 300; font-size: 40px; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.tk-ring span { margin-left: 6px; font: 500 12px/1 var(--m); color: var(--txt-d2); text-transform: uppercase; }
.tk-lines { margin: 0 0 20px; display: grid; }
.tk-lines div { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--ink-line); font-size: 14.5px; }
.tk-lines dt { color: var(--txt-d2); flex-shrink: 0; }
.tk-lines dd { margin: 0; text-align: right; color: rgba(255, 255, 255, 0.35); transition: color 0.4s; overflow-wrap: anywhere; }
.tk-lines div.set dd { color: #fff; }
.tk-fit { display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: 16px; background: rgba(90, 176, 255, 0.1); border: 1px solid rgba(90, 176, 255, 0.24); }
.tk-fit span { font: 500 11px/1 var(--m); letter-spacing: 0.06em; text-transform: uppercase; color: var(--cold-2); }
.tk-fit b { font-weight: 500; font-size: 17px; letter-spacing: -0.015em; }
.tk-done { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; padding: 30px; background: var(--ink); visibility: hidden; }
.tk-done b { font-weight: 400; font-size: 38px; line-height: 1; letter-spacing: -0.04em; color: #fff; }
.tk-done p { margin: 0; color: var(--txt-d2); max-width: 30ch; }
.tk-done small { font: 500 11px/1 var(--m); color: var(--heat-2); text-transform: uppercase; letter-spacing: 0.06em; }
.ct-rep { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(24px, 4vw, 60px); align-items: stretch; }
.ct-rep[hidden], .ct-panel[hidden] { display: none; }
.rep-lead { margin: 0 0 22px; font-size: 19px; line-height: 1.45; max-width: 32ch; }
.rep-search { display: flex; gap: 8px; margin-bottom: 18px; }
.rep-search .inp { flex: 1; }
.rep-card { min-height: 240px; padding: 24px; border-radius: 24px; background: var(--paper); border: 1px solid var(--line); }
.rep-empty { margin: 0; color: var(--txt-2); }
.rep-card .rc-k { font: 500 11.5px/1 var(--m); letter-spacing: 0.06em; text-transform: uppercase; color: var(--cold-ink); }
.rep-card h3 { margin: 10px 0 4px; font-weight: 500; font-size: 28px; letter-spacing: -0.03em; }
.rep-card .rc-city { margin: 0 0 18px; color: var(--txt-2); }
.rep-card .rc-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; }
.rep-card .rc-stats div { padding: 12px; border-radius: 14px; background: var(--frost); }
.rep-card .rc-stats b { display: block; font-weight: 400; font-size: 22px; letter-spacing: -0.02em; }
.rep-card .rc-stats span { font: 500 10.5px/1.3 var(--m); letter-spacing: 0.04em; text-transform: uppercase; color: var(--txt-2); }
.rep-card .rc-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.btn-ink { background: var(--ink); color: #fff; }
.btn-ghost { border: 1px solid var(--line); }
.rep-map { position: relative; border-radius: 28px; background: var(--ink); overflow: hidden; min-height: 440px; }
.rep-map canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ── FOOTER ── */
.foot { position: relative; background: var(--ink); color: var(--txt-d); padding: clamp(80px, 9vw, 120px) 0 28px; overflow: hidden; }
.foot-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 60px; }
.foot-cta p { margin: 0 0 20px; font-weight: 380; font-size: clamp(34px, 3.6vw, 56px); letter-spacing: -0.045em; line-height: 1; }
.foot-phone { display: block; margin-top: 18px; font: 500 13px/1 var(--m); letter-spacing: 0.04em; color: var(--txt-d2); }
.foot-phone:hover { color: #fff; }
.foot-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.foot-cols h4 { margin: 0 0 16px; font: 500 11.5px/1 var(--m); letter-spacing: 0.08em; text-transform: uppercase; color: var(--txt-d2); }
.foot-cols a { display: block; padding: 5px 0; font-size: 15px; color: rgba(238, 242, 244, 0.86); transition: color 0.3s, transform 0.4s var(--ease); }
.foot-cols a:hover { color: var(--cold-2); transform: translateX(3px); }
.foot-word { position: relative; margin: clamp(60px, 8vw, 110px) 0 20px; display: flex; justify-content: center; align-items: flex-start; font-weight: 600; font-size: 21vw; line-height: 0.74; letter-spacing: 0.02em; user-select: none; --mx: 50%; --my: 50%; --heat-r: 0px; }
.foot-word span { color: transparent; background: radial-gradient(circle at var(--mx) var(--my), #fff6cf 0, #ffae1c calc(var(--heat-r) * 0.18), #f0621d calc(var(--heat-r) * 0.38), #c42f7a calc(var(--heat-r) * 0.6), #26096a calc(var(--heat-r) * 0.85), #151c26 var(--heat-r)), #151c26; -webkit-background-clip: text; background-clip: text; }
.foot-word i { width: 0.13em; height: 0.13em; margin: 0.02em 0 0 0.02em; border-radius: 50%; border: 0.034em solid #151c26; border-top-color: var(--cold); border-right-color: var(--cold); }
.foot-base { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; font: 500 11.5px/1.5 var(--m); letter-spacing: 0.03em; color: var(--txt-d2); }

/* floating path switch */
.path-float { position: fixed; z-index: 45; left: 50%; bottom: 20px; display: flex; align-items: center; gap: 12px; padding: 6px 6px 6px 18px; border-radius: 999px; background: rgba(10, 13, 18, 0.78); border: 1px solid rgba(255, 255, 255, 0.1); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); color: #fff; transform: translate(-50%, 140%); transition: transform 0.7s var(--ease); box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.6); }
.path-float.show { transform: translate(-50%, 0); }
.pf-l { font: 500 11px/1 var(--m); letter-spacing: 0.08em; text-transform: uppercase; color: var(--txt-d2); }
.seg-sm { background: rgba(255, 255, 255, 0.08); border-color: transparent; padding: 4px; }
.seg-sm button { height: 36px; padding: 0 16px; font-size: 14px; color: var(--txt-d2); }
.seg-sm button.on { color: var(--ink); }
.seg-sm .seg-pill { background: #fff; top: 4px; bottom: 4px; left: 4px; }

.toast-g { position: fixed; z-index: 60; right: 20px; bottom: 20px; max-width: 340px; padding: 14px 16px; border-radius: 16px; background: #fff; color: var(--ink); font-size: 14.5px; box-shadow: 0 20px 50px -16px rgba(0, 0, 0, 0.45); opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity 0.4s, transform 0.6s var(--ease); }
.toast-g.show { opacity: 1; transform: none; }

/* split-text line masks */
.line-mask { overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }

/* ── RESPONSIVE ── */
@media (max-width: 1180px) {
  .eq-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nav-links { gap: 20px; }
  .spec-body { grid-template-columns: minmax(260px, 330px) minmax(0, 1fr); }
  .sd-docs, .sd-kv { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1020px) {
  .nav-links { display: none; }
  .nav-burger { display: block; }
  .ans-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 820px) {
  :root { --nav-h: 64px; }
  body { font-size: 16px; }
  .link-pin { display: none; }
  .nav-cta { gap: 8px; }
  .nav .btn-sm { height: 38px; padding: 0 14px; font-size: 13.5px; }
  .hero { min-height: 640px; cursor: auto; }
  .hero-copy { top: calc(var(--nav-h) + 26px); right: var(--g); }
  .hero-title { font-size: clamp(50px, 15vw, 88px); }
  .hero-sub { margin: 16px 0 22px; font-size: 16px; }
  .hero-actions .btn { height: 48px; padding: 0 18px; font-size: 14.5px; }
  .hud-scale { display: none; }
  .hud-read span { font-size: 10px; }
  .hero-actions { gap: 8px; }
  .eyebrow { font-size: 11px; }
  .hud-tag { display: none; }
  .hero-hint { margin-top: 18px; }
  .hint-desk { display: none; } .hint-touch { display: inline; }
  .hud-toggle { bottom: auto; top: calc(var(--nav-h) + 12px); display: none; }
  .hero-qs { right: 0; bottom: 22px; }
  .qs-row { flex-wrap: nowrap; overflow-x: auto; padding-right: var(--g); scrollbar-width: none; }
  .qs-row::-webkit-scrollbar { display: none; }
  .qs-row a { flex-shrink: 0; }
  .hud-read b { font-size: 22px; }
  .hud-read { padding: 9px 11px; }
  .split-head { flex-direction: column; align-items: flex-start; }
  .path-row { flex-direction: column; height: auto; min-height: 0; }
  .path { flex: none; height: 76vh; min-height: 520px; max-height: 680px; }
  .path-body { padding: 20px; }
  .eq-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin: 0; width: 100%; padding: 0 var(--g) 10px; scrollbar-width: none; }
  .eq-grid::-webkit-scrollbar { display: none; }
  .eq-card { flex: 0 0 82%; scroll-snap-align: center; min-height: 0; }
  .ans-pin { display: block; min-height: 0; padding: 96px 0 72px; }
  .ans-list { display: none; }
  .ans-stage { height: auto; min-height: 0; display: flex; flex-direction: column; gap: 56px; }
  .ans-card { position: relative; inset: auto; visibility: visible; }
  .demo { flex: none; }
  .size-chart, .fit-svg { height: 180px; flex: none; }
  .fit-svg .conn text, .fit-svg .dim-t { font-size: 17px; }
  .fit-svg .old-t, .fit-svg .fit-ok { font-size: 15px; }
  .rep-card .rc-stats b { font-size: 17px; }
  .rep-card .rc-stats span { font-size: 9.5px; }
  .rep-card .rc-stats div { padding: 10px; }
  .perf-chart { height: 180px; flex: none; }
  .mods { min-height: 190px; }
  .demo-out.cols-3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .verdict { margin: 0; text-align: left; }
  .svc-grid { grid-template-columns: minmax(0, 1fr); }
  .svc-left { position: relative; top: 0; }
  .svc-list li { grid-template-columns: 48px minmax(0, 1fr); }
  .svc-list em { grid-column: 2; justify-self: start; margin-top: 0; }
  .spec-body { grid-template-columns: minmax(0, 1fr); }
  .spec-list { max-height: 280px; border-right: 0; border-bottom: 1px solid var(--ink-line); }
  .spec-detail { padding: 22px 18px 26px; }
  .sd-head { grid-template-columns: 96px minmax(0, 1fr); gap: 14px; }
  .sd-sound, .sd-dims { grid-template-columns: minmax(0, 1fr); }
  .ct-form-panel, .ct-rep { grid-template-columns: minmax(0, 1fr); }
  .ticket { position: relative; top: 0; }
  .fq-you { grid-template-columns: minmax(0, 1fr); }
  .rep-map { min-height: 300px; }
  .foot-top { grid-template-columns: minmax(0, 1fr); }
  .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .path-float { bottom: 12px; }
  .pf-l { display: none; }
}
@media (max-width: 560px) {
  .inp-l .inp { width: 140px; }
  .ct-tabs { display: flex; width: 100%; }
  .ct-tabs button { flex: 1 1 0; padding: 0 6px; font-size: 13px; white-space: normal; line-height: 1.15; height: 50px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}