/* ==========================================================================
   TYTEN v2 — Home page (/)
   Page-level styles. Shared tokens/components live in /assets/v2/tyten-v2.css.
   Every colour is a --v2-* token or a --home-* property defined for both themes.
   ========================================================================== */

:root,
[data-theme="light"] {
  /* Hero city scene (day) */
  --home-ff-1: #B9C9DC;  --home-ff-2: #E6C9AE;
  --home-far-1: #9DB2CB; --home-far-2: #D6B49C;
  --home-lm-1: #7E93AE;  --home-lm-2: #A58E86;
  --home-near-1: #4B5870; --home-near-2: #5A5468;
  --home-fog: #EBCFB0;
  --home-water-1: #CDAE92; --home-water-2: #7C8399;
  --home-shore: #5A5468;
  --home-edge: #FFFFFF;
  /* Line layers over the silhouettes (opacities that differ by theme in the design) */
  --home-lm-op: 0.9;
  --home-edge-lm-op: 0.6;
  --home-edge-near-op: 0.35;
  --home-chain-op: 0.6;
  --home-lit: #FFC978;
  --home-bird: #3B4458;
  --home-sun-core-op: 0.85;
  --home-mist: rgba(255, 214, 184, 0.13);
  --home-glint: rgba(255, 220, 170, 0.32);
  --home-vignette: rgba(60, 70, 90, 0.18);
  --home-ping: #1D2233;
}

[data-theme="dark"] {
  --home-ff-1: #A98A8C;  --home-ff-2: #D9A07C;
  --home-far-1: #8A6C7C; --home-far-2: #C48B72;
  --home-lm-1: #5A4960;  --home-lm-2: #7B5A60;
  --home-near-1: #2B2236; --home-near-2: #2F2335;
  --home-fog: #D49A74;
  --home-water-1: #C98B6E; --home-water-2: #3A2D48;
  --home-shore: #2F2335;
  --home-edge: #F6D2B0;
  --home-lm-op: 0.8;
  --home-edge-lm-op: 0.5;
  --home-edge-near-op: 0.3;
  --home-chain-op: 0.5;
  --home-lit: #FFC978;
  --home-bird: #2B2236;
  --home-sun-core-op: 1;
  --home-mist: rgba(255, 214, 184, 0.10);
  --home-glint: rgba(255, 220, 170, 0.32);
  --home-vignette: rgba(20, 14, 30, 0.22);
  --home-ping: #DDEE93;
}

/* --------------------------------------------------------------------------
   01 Hero with sector selector
   -------------------------------------------------------------------------- */
.home-hero {
  min-height: clamp(700px, 100svh, 900px);
  display: flex;
  flex-direction: column;
  padding-top: calc(var(--v2-header-h) + clamp(1.25rem, 0.5rem + 2vw, 2.25rem));
  padding-bottom: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}
.home-hero__scene { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.home-hero__sun {
  position: absolute; inset: 0;
  background: radial-gradient(circle 150px at 70.14% 85.5%, rgba(255, 240, 210, 0.95), rgba(255, 205, 150, 0.4) 38%, rgba(255, 190, 130, 0) 72%);
  opacity: var(--home-sun-core-op);
}
.home-hero__city { position: absolute; left: 0; bottom: 0; width: 100%; height: 55.8%; min-height: 300px; display: block; max-width: none; }
.home-hero__city .hh-ff1 { stop-color: var(--home-ff-1); }
.home-hero__city .hh-ff2 { stop-color: var(--home-ff-2); }
.home-hero__city .hh-far1 { stop-color: var(--home-far-1); }
.home-hero__city .hh-far2 { stop-color: var(--home-far-2); }
.home-hero__city .hh-lm1 { stop-color: var(--home-lm-1); }
.home-hero__city .hh-lm2 { stop-color: var(--home-lm-2); }
.home-hero__city .hh-near1 { stop-color: var(--home-near-1); }
.home-hero__city .hh-near2 { stop-color: var(--home-near-2); }
.home-hero__city .hh-fog0 { stop-color: var(--home-fog); stop-opacity: 0; }
.home-hero__city .hh-fog { stop-color: var(--home-fog); stop-opacity: 1; }
.home-hero__city .hh-w1 { stop-color: var(--home-water-1); }
.home-hero__city .hh-w2 { stop-color: var(--home-water-2); }
.home-hero__city .hh-edge { stroke: var(--home-edge); }
.home-hero__city .hh-lm { opacity: var(--home-lm-op); }
.home-hero__city .hh-edge--lm { opacity: var(--home-edge-lm-op); }
.home-hero__city .hh-edge--near { opacity: var(--home-edge-near-op); }
.home-hero__city .hh-edge--chain { opacity: var(--home-chain-op); }
.home-hero__city .hh-shore { fill: var(--home-shore); }
.home-hero__lit {
  fill: var(--home-lit);
  opacity: 0;
  animation: home-lit 11s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}
@keyframes home-lit {
  0%, 100% { opacity: 0; }
  15%, 80% { opacity: 0.8; }
}

/* Birds: a loose flock drifting across the sky */
.home-hero__birds {
  position: absolute; left: 0; top: 50%; width: 120px; height: 60px;
  animation: home-flock 80s linear infinite;
  animation-delay: -30s;
}
.home-hero__bird { position: absolute; width: 14px; height: 9px; opacity: 0.4; overflow: visible; }
.home-hero__bird path { fill: none; stroke: var(--home-bird); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; transform-origin: 50% 70%; animation: home-flap 0.95s ease-in-out infinite alternate; }
.home-hero__bird:nth-child(1) { left: 48px; top: 24px; }
.home-hero__bird:nth-child(2) { left: 26px; top: 14px; }
.home-hero__bird:nth-child(2) path { animation-delay: -0.2s; }
.home-hero__bird:nth-child(3) { left: 26px; top: 34px; }
.home-hero__bird:nth-child(3) path { animation-delay: -0.35s; }
.home-hero__bird:nth-child(4) { left: 4px; top: 4px; }
.home-hero__bird:nth-child(4) path { animation-delay: -0.5s; }
.home-hero__bird:nth-child(5) { left: 4px; top: 44px; }
.home-hero__bird:nth-child(5) path { animation-delay: -0.65s; }
@keyframes home-flap { from { transform: scaleY(1); } to { transform: scaleY(0.3); } }
@keyframes home-flock {
  0% { transform: translate(-140px, 0); }
  25% { transform: translate(25vw, -14px); }
  50% { transform: translate(50vw, 0); }
  75% { transform: translate(75vw, 14px); }
  100% { transform: translate(calc(100vw + 40px), 0); }
}

.home-hero__mist { position: absolute; border-radius: 50%; background: radial-gradient(ellipse at center, var(--home-mist), transparent 70%); animation: home-mist 24s ease-in-out infinite alternate; }
.home-hero__mist--1 { left: 12%; top: 58%; width: 76%; height: 19%; }
.home-hero__mist--2 { left: -3%; top: 69%; width: 97%; height: 20%; animation-delay: -8s; }
.home-hero__mist--3 { left: 18%; top: 79%; width: 83%; height: 15%; animation-delay: -16s; }
@keyframes home-mist { from { transform: translateX(-8%); } to { transform: translateX(8%); } }

/* Live "ping" over a building: work happening across the city (SVG, inside the skyline) */
.hh-ping { opacity: 0; animation: home-ping-dot 12s linear infinite; animation-delay: var(--d); }
.hh-ping circle { fill: none; stroke: var(--home-ping); stroke-width: 1; transform-box: fill-box; transform-origin: center; animation: home-ping-ring 12s linear infinite; animation-delay: var(--d); }
.hh-ping .hh-ping__dot { fill: var(--home-ping); stroke: none; animation: none; }
@keyframes home-ping-dot { 0% { opacity: 1; } 19% { opacity: 1; } 25%, 100% { opacity: 0; } }
@keyframes home-ping-ring { 0% { opacity: 0.7; transform: scale(0.4); } 25% { opacity: 0; transform: scale(1.7); } 100% { opacity: 0; } }

.home-hero__glints { position: absolute; left: 70.14%; bottom: 0; height: 10.5%; width: 0; }
.home-hero__glints i {
  position: absolute; left: 0; height: 2px; border-radius: 2px;
  background: var(--home-glint); filter: blur(0.6px);
  animation: home-glint 3.2s ease-in-out infinite alternate;
}
.home-hero__glints i:nth-child(1) { top: 8%;  width: 30px;  margin-left: -15px; }
.home-hero__glints i:nth-child(2) { top: 22%; width: 50px;  margin-left: -25px; animation-delay: -0.6s; }
.home-hero__glints i:nth-child(3) { top: 36%; width: 70px;  margin-left: -35px; animation-delay: -1.2s; }
.home-hero__glints i:nth-child(4) { top: 50%; width: 92px;  margin-left: -46px; animation-delay: -1.8s; }
.home-hero__glints i:nth-child(5) { top: 64%; width: 116px; margin-left: -58px; animation-delay: -2.4s; }
.home-hero__glints i:nth-child(6) { top: 78%; width: 140px; margin-left: -70px; animation-delay: -3s; }
@keyframes home-glint { from { transform: scaleX(0.55); opacity: 0.5; } to { transform: scaleX(1); opacity: 1; } }

.home-hero__vignette { position: absolute; inset: 0; background: radial-gradient(ellipse 62% 72% at 50% 46%, transparent 55%, var(--home-vignette) 100%); }

.home-hero__inner { flex: 1; display: flex; flex-direction: column; }
.home-hero__head { display: grid; justify-items: center; gap: 22px; text-align: center; }
.home-hero__title { font-size: clamp(2.75rem, 1.4rem + 5.6vw, 5.125rem); }
.home-hero__line { display: block; }
.home-hero__tyten { padding: 0 0.146em; border-radius: 0.146em; }
.home-hero__rotator {
  display: grid;
  margin-top: 4px;
  height: 1.17em;
  overflow: hidden;
}
.home-hero__word {
  grid-area: 1 / 1;
  display: block;
  line-height: 1.17;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(100%);
  transition: transform 900ms var(--v2-ease), opacity 600ms ease;
}
.home-hero__word.is-current { opacity: 1; transform: none; }
.home-hero__word.is-prev { opacity: 0; transform: translateY(-100%); }

/* Sector selector */
.home-sectors { display: flex; flex-direction: column; flex: 1; margin-top: clamp(1.75rem, 1.2rem + 1.5vw, 2.125rem); }
.home-sectors__buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.home-sectors__btn { min-width: 0; flex: 1 1 140px; max-width: 206px; padding-inline: 14px; }
@media (min-width: 900px) {
  .home-sectors__buttons { gap: 14px; }
  .home-sectors__btn { flex: 0 0 206px; font-size: 1.1875rem; --_pad-y: 18px; }
}
.home-sectors__btn[aria-expanded="true"] {
  background: var(--v2-seg-active-bg);
  border-color: var(--v2-seg-active-bg);
  color: var(--v2-seg-active-fg);
}

.home-sectors__stage {
  flex: 1;
  display: grid;
  align-items: center;
  margin-top: clamp(1.5rem, 1rem + 3vw, 3.5rem);
  min-height: 232px;
}
.home-sectors__panel,
.home-hero__strip { grid-area: 1 / 1; }
.home-sectors__panel {
  display: grid;
  width: 100%;
  max-width: 1220px;
  margin-inline: auto;
  align-self: start;
  padding: 28px clamp(20px, 4vw, 56px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(28px);
  transition: opacity 600ms ease, transform 700ms var(--v2-ease), visibility 0s linear 700ms;
}
.home-sectors.is-open .home-sectors__panel {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity 600ms ease, transform 700ms var(--v2-ease), visibility 0s;
}
.home-sectors__item {
  grid-area: 1 / 1;
  display: grid;
  justify-items: center;
  align-content: space-between;
  gap: 16px;
  min-height: 176px;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 600ms ease, visibility 0s linear 600ms;
}
.home-sectors__item.is-active { opacity: 1; visibility: visible; transition: opacity 600ms ease, visibility 0s; }
.home-sectors__item .v2-eyebrow { font-size: 0.75rem; }
.home-sectors__statement {
  font-family: var(--v2-font-display);
  font-weight: 500;
  font-size: clamp(1.5rem, 1rem + 2.1vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  max-width: 1000px;
  color: var(--v2-text-navy);
}
.home-sectors__cta {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 26px;
  border-radius: var(--v2-r-pill);
  border: 1px solid var(--v2-seg-border);
  font-size: 1rem; font-weight: 600; line-height: 1.1;
  text-decoration: none; white-space: nowrap;
  color: var(--v2-text-navy);
  transition: background-color var(--v2-dur) ease, color var(--v2-dur) ease, border-color var(--v2-dur) ease;
}
.home-sectors__cta:hover,
.home-sectors__cta:focus-visible {
  background: var(--v2-seg-active-bg);
  border-color: var(--v2-seg-active-bg);
  color: var(--v2-seg-active-fg);
}
.home-sectors__cta:hover .v2-btn__arrow { transform: translateX(6px); }

/* Event strip under the selector (hidden while the panel is open) */
.home-hero__strip {
  align-self: end;
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 6px 14px;
  margin: 0 0 clamp(4px, 1.5vw, 16px);
  text-align: center;
  transition: opacity 500ms ease;
}
.home-hero__strip.is-fading { opacity: 0; }
.home-sectors.is-open .home-hero__strip { opacity: 0; }
.home-hero__strip-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--v2-text-navy); flex: none; }
.home-hero__strip-time { font-family: var(--v2-font-mono); font-size: 0.8125rem; color: var(--v2-text-muted); }
.home-hero__strip-text { font-size: 0.875rem; color: var(--v2-text-navy); }

/* No JS: show all three sector statements as a static stack, no strip */
html:not(.v2-js) .home-sectors__panel { opacity: 1; visibility: visible; transform: none; gap: 28px; }
html:not(.v2-js) .home-sectors__item { grid-area: auto; opacity: 1; visibility: visible; min-height: 0; }
html:not(.v2-js) .home-hero__strip { display: none; }

@media (max-width: 599px) {
  .home-hero { min-height: 0; }
  .home-hero__city { height: 46%; }
  .home-sectors__stage { min-height: 260px; }
  .home-sectors__item { min-height: 196px; }
}

@media (prefers-reduced-motion: reduce) {
  .home-hero__birds, .home-hero__mist, .home-hero__glints i { animation: none; }
  .home-hero__birds { display: none; }
  .home-hero__lit { animation: none; opacity: 0.6; }
  .hh-ping { animation: none; opacity: 0; }
  .hh-ping:first-child { opacity: 1; }
  .hh-ping circle { animation: none; opacity: 0; }
  .hh-ping .hh-ping__dot { opacity: 1; }
}

/* --------------------------------------------------------------------------
   02 See it work: walkthrough player
   -------------------------------------------------------------------------- */
:root,
[data-theme="light"] {
  --home-stage-bg: #EBEFE2;
  --home-stage-shadow: 0 30px 70px rgba(33, 30, 40, 0.14);
  --home-mock-bg: #FFFFFF;
  --home-mock-border: #DDD9CF;
  --home-mock-rule: #D9D4C8;
  --home-mock-tint: #E9F0C8;
  --home-mock-track: #D3CEC2;
  --home-mock-bar-soft: #A39DB0;
  --home-on-bg: #211E28;
  --home-on-fg: #DDEE93;
  --home-ctrl-bg: rgba(255, 255, 255, 0.85);
}
[data-theme="dark"] {
  --home-stage-bg: #251E32;
  --home-stage-shadow: 0 30px 70px rgba(0, 0, 0, 0.4);
  --home-mock-bg: #1C1727;
  --home-mock-border: rgba(246, 210, 176, 0.18);
  --home-mock-rule: rgba(246, 210, 176, 0.16);
  --home-mock-tint: rgba(221, 238, 147, 0.12);
  --home-mock-track: rgba(246, 210, 176, 0.18);
  --home-mock-bar-soft: #6F6580;
  --home-on-bg: #DDEE93;
  --home-on-fg: #211E28;
  --home-ctrl-bg: rgba(255, 255, 255, 0.12);
}

/* Lift the shared 1000px cap so the headline stays on one line on desktop (~1024px at 56px). */
.home-walk__head { max-width: none; margin-bottom: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem); }
.home-walk__player { display: grid; gap: 22px; }
.home-walk__stage {
  position: relative;
  display: grid;
  min-height: 480px;
  padding: clamp(24px, 3vw, 40px) clamp(18px, 3.9vw, 56px) 80px;
  border-radius: 26px;
  overflow: hidden;
  background: var(--home-stage-bg);
  box-shadow: var(--home-stage-shadow);
}
.home-walk__step {
  --u: 425ms;
  grid-area: 1 / 1;
  align-self: center;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: stretch;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 600ms ease, transform 600ms ease, visibility 0s linear 600ms;
}
.home-walk__step--long { --u: 467ms; }
.home-walk__step.is-active { opacity: 1; visibility: visible; transform: none; transition: opacity 600ms ease, transform 600ms ease, visibility 0s; }
@media (min-width: 1080px) {
  .home-walk__step { flex-direction: row; align-items: center; justify-content: space-between; gap: 40px; padding-right: clamp(0px, 6vw, 84px); }
}
.home-walk__text { display: grid; gap: 14px; max-width: 430px; flex-shrink: 0; align-content: start; }
.home-walk__count { font-family: var(--v2-font-mono); font-size: 0.875rem; color: var(--v2-text-muted); }
.home-walk__name { font-family: var(--v2-font-display); font-weight: 500; font-size: clamp(2.5rem, 1.9rem + 2.4vw, 4rem); letter-spacing: -0.03em; line-height: 1; }
.home-walk__desc { font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); line-height: 1.45; color: var(--v2-text-muted); }

/* Mock UI cards */
.home-walk__card {
  width: 100%;
  max-width: 520px;
  display: flex; flex-direction: column;
  padding: 20px clamp(16px, 2.4vw, 28px);
  border-radius: 18px;
  border: 1px solid var(--home-mock-border);
  background: var(--home-mock-bg);
  color: var(--v2-text);
}
.home-walk__card--rank { padding: 16px clamp(12px, 1.4vw, 18px); }
.home-walk__cardhead { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; padding-bottom: 12px; min-height: 30px; }
.home-walk__label { font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--v2-text-muted); }
.home-walk__crit { font-size: 0.6875rem; letter-spacing: 0.06em; color: var(--v2-text-muted); }
.home-walk__meta { display: block; font-size: 0.8125rem; color: var(--v2-text-muted); }
.home-walk__strong { display: block; font-size: 1rem; font-weight: 600; line-height: 1.35; }
.home-walk__tiny { display: block; font-size: 0.625rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--v2-text-muted); }

.home-walk__chip { display: inline-block; font-size: 0.75rem; font-weight: 600; padding: 5px 12px; border-radius: var(--v2-r-pill); box-shadow: inset 0 0 0 1px var(--home-mock-border); color: var(--v2-text-muted); white-space: nowrap; }
.home-walk__chip--on { background: var(--home-on-bg); color: var(--home-on-fg); box-shadow: none; }
.home-walk__chip--sm { font-size: 0.65625rem; font-weight: 700; padding: 4px 10px; }

/* Row reveal: staggered within the active step */
.home-walk__row { opacity: 0; transform: translateY(8px); transition: opacity 450ms ease, transform 450ms ease; }
.home-walk__step.is-active .home-walk__row {
  opacity: 1; transform: none;
  transition-delay: calc(var(--u) * (0.94 + var(--i, 0)));
}

.home-walk__tick { width: 18px; height: 18px; flex-shrink: 0; }
.home-walk__tick circle { fill: var(--home-on-bg); }
.home-walk__tick path { fill: none; stroke: var(--home-on-fg); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Step 1: channels */
.home-walk__chan { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 16px; align-items: start; padding: 15px 0; border-top: 1px solid var(--home-mock-rule); }
.home-walk__pill { justify-self: start; font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; padding: 5px 11px; border-radius: var(--v2-r-pill); box-shadow: inset 0 0 0 1px var(--home-mock-border); }
.home-walk__chanbody { display: grid; gap: 8px; }
.home-walk__chanbody--tight { gap: 4px; }
.home-walk__voice { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.home-walk__wave { display: flex; gap: 3px; align-items: center; height: 28px; }
.home-walk__wave i { display: block; width: 4px; height: 6px; border-radius: 2px; background: var(--home-on-bg); }
.home-walk__step.is-active .home-walk__wave i { animation: home-wave 0.7s ease-in-out infinite alternate; }
.home-walk__wave i:nth-child(3n+1) { animation-delay: -0.15s !important; }
.home-walk__wave i:nth-child(3n+2) { animation-delay: -0.4s !important; }
.home-walk__wave i:nth-child(4n) { animation-delay: -0.55s !important; animation-duration: 0.9s !important; }
@keyframes home-wave { from { height: 6px; } to { height: 28px; } }
.home-walk__quote { font-size: 1rem; line-height: 1.4; }
.home-walk__bubble { display: inline-block; font-size: 0.9375rem; line-height: 1.4; padding: 10px 14px; border-radius: 16px 16px 16px 4px; background: var(--home-mock-tint); }
.home-walk__done { display: flex; align-items: center; gap: 12px; padding: 14px 0 4px; border-top: 1px solid var(--home-mock-rule); font-size: 0.9375rem; font-weight: 600; }
.home-walk__done--sub { border-top: 0; padding-top: 6px; font-weight: 400; color: var(--v2-text-muted); }
.home-walk__done--plain { border-top: 0; padding-top: 8px; font-weight: 400; }

/* Step 2: key/values */
.home-walk__dl { margin: 0; }
.home-walk__kv { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 13px 0; border-top: 1px solid var(--home-mock-rule); font-size: 1rem; }
.home-walk__kv dt { color: var(--v2-text-muted); }
.home-walk__kv dd { margin: 0; font-weight: 600; text-align: right; }

/* Step 3: quote */
.home-walk__swap { display: grid; }
.home-walk__swap > * { grid-area: 1 / 1; justify-self: end; transition: opacity 400ms ease; }
.home-walk__swap-b { opacity: 0; }
.home-walk__step.is-active .home-walk__swap-a { opacity: 0; transition-delay: calc(var(--u) * 9.65); }
.home-walk__step.is-active .home-walk__swap-b { opacity: 1; transition-delay: calc(var(--u) * 9.65); }
.home-walk__line { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--home-mock-rule); font-size: 0.9375rem; }
.home-walk__line b, .home-walk__total b { font-weight: 600; white-space: nowrap; }
.home-walk__total { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 14px 0 4px; border-top: 1px solid var(--home-mock-border); }
.home-walk__total > span { font-size: 0.8125rem; color: var(--v2-text-muted); }
.home-walk__total b { font-family: var(--v2-font-display); font-weight: 500; font-size: 1.875rem; letter-spacing: -0.02em; }
.home-walk__total--line { padding: 14px 0; border-top-color: var(--home-mock-rule); }
.home-walk__total--line > span { font-size: 0.9375rem; }
.home-walk__total--line b { font-size: 1.625rem; }

/* Step 4: ranking */
.home-walk__rank { display: grid; grid-template-columns: minmax(0, 1fr) clamp(56px, 8vw, 100px) 52px; gap: clamp(10px, 1.4vw, 16px); align-items: center; padding: 9px 14px; border: 1px solid transparent; border-radius: 12px; }
.home-walk__step.is-active .home-walk__rank--best { border-color: var(--home-on-bg); background: var(--home-mock-tint); transition: opacity 450ms ease, transform 450ms ease, border-color 400ms ease calc(var(--u) * 7.3), background-color 400ms ease calc(var(--u) * 7.3); }
.home-walk__who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.home-walk__best { display: inline-block; margin-left: 8px; font-size: 0.625rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; padding: 3px 8px; border-radius: var(--v2-r-pill); background: var(--home-on-bg); color: var(--home-on-fg); vertical-align: 2px; }
.home-walk__bars { display: grid; gap: 4px; }
.home-walk__bars i { display: block; height: 4px; border-radius: 2px; background: var(--home-mock-track); position: relative; overflow: hidden; }
.home-walk__bars i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 2px; background: var(--home-on-bg); transition: width 1250ms ease; }
.home-walk__step.is-active .home-walk__bars i::after { width: var(--w); transition-delay: 500ms; }
.home-walk__score { font-family: var(--v2-font-display); font-weight: 500; font-size: 1.5rem; text-align: right; }

/* Step 5: compliance */
.home-walk__check { display: flex; align-items: center; gap: 14px; padding: 15px 0; border-top: 1px solid var(--home-mock-rule); font-size: 1.0625rem; }
.home-walk__note { margin-top: 10px; padding: 12px 16px; border-radius: 12px; background: var(--home-mock-tint); font-size: 0.9375rem; line-height: 1.4; }

/* Step 6: phone + service report */
.home-walk__pair { display: flex; flex-wrap: wrap; gap: 22px; align-items: center; justify-content: space-between; width: 100%; max-width: 650px; }
.home-walk__phone {
  position: relative;
  width: 236px; height: 380px; flex: none;
  display: flex; flex-direction: column; gap: 10px;
  padding: 18px 16px;
  border-radius: 34px; border: 2px solid var(--home-mock-border);
  background: var(--home-mock-bg);
  overflow: hidden;
}
.home-walk__notch { width: 70px; height: 8px; border-radius: 6px; background: var(--home-mock-border); align-self: center; }
.home-walk__phonetitle { font-size: 0.9375rem; font-weight: 700; padding-top: 4px; }
.home-walk__notes { border: 1px solid var(--home-mock-rule); border-radius: 12px; padding: 10px 12px; min-height: 110px; font-size: 0.78125rem; line-height: 1.4; }
.home-walk__notes .home-walk__row { padding: 3px 0; }
.home-walk__phone .home-walk__meta { font-size: 0.78125rem; padding: 2px 0; }
.home-walk__submit { margin-top: auto; background: var(--home-on-bg); color: var(--home-on-fg); font-weight: 700; font-size: 0.875rem; text-align: center; padding: 12px; border-radius: 12px; }
.home-walk__sent {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  background: var(--home-mock-bg);
  font-size: 0.9375rem; font-weight: 700;
  opacity: 0; transition: opacity 450ms ease;
}
.home-walk__sent .home-walk__tick { width: 46px; height: 46px; }
.home-walk__step.is-active .home-walk__sent { opacity: 1; transition-delay: calc(var(--u) * 6.94); }
.home-walk__report {
  flex: 1 1 300px; max-width: 372px; min-height: 380px;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 18px 20px;
  border-radius: 14px; border: 1px solid var(--home-mock-border);
  background: var(--home-mock-bg);
  font-size: 0.78125rem; line-height: 1.4;
}
.home-walk__reporthead { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.home-walk__reporttitle { display: grid; gap: 3px; padding: 8px 0 10px; }
.home-walk__reporttitle .home-walk__strong { font-weight: 700; line-height: 1.25; }
.home-walk__reporttitle .home-walk__meta { font-size: 0.75rem; }
.home-walk__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.home-walk__fields > div { display: grid; gap: 3px; align-content: start; }
.home-walk__fields--one { grid-template-columns: 1fr; padding-top: 10px; }
.home-walk__report > .home-walk__row:nth-child(2) { padding-top: 10px; }
.home-walk__signoff { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-top: 12px; }
.home-walk__photos { display: flex; gap: 8px; }
.home-walk__photos i { display: block; width: 52px; height: 38px; border-radius: 8px; background: var(--home-mock-tint); border: 1px solid var(--home-mock-rule); }
.home-walk__signed { display: flex; align-items: center; gap: 8px; font-weight: 600; }

/* Step 8: report charts */
.home-walk__rep { display: grid; grid-template-columns: minmax(0, 1fr) 120px; gap: 20px; align-items: center; padding: 14px 0; border-top: 1px solid var(--home-mock-rule); }
.home-walk__rep .home-walk__strong { font-size: 1.0625rem; }
.home-walk__chart { display: flex; gap: 5px; align-items: flex-end; height: 38px; width: 120px; }
.home-walk__chart i { display: block; width: 8px; height: 0; border-radius: 2px; background: var(--home-mock-bar-soft); transition: height 600ms ease; }
.home-walk__chart i:last-child { background: var(--home-on-bg); }
.home-walk__step.is-active .home-walk__chart i { height: var(--h); transition-delay: calc(500ms + var(--i, 0) * 250ms); }
.home-walk__step.is-active .home-walk__chart i:last-child { transition-delay: 2600ms; transition-duration: 900ms; }

/* Controls */
.home-walk__controls { position: absolute; left: clamp(18px, 3.9vw, 56px); bottom: 22px; display: flex; gap: 8px; }
.home-walk__ctrl {
  width: 40px; height: 40px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--v2-r-pill);
  background: var(--home-ctrl-bg); color: var(--v2-text);
  font: inherit; font-size: 0.9375rem;
  cursor: pointer;
  transition: transform var(--v2-dur) ease, box-shadow var(--v2-dur) ease;
}
.home-walk__ctrl:hover { transform: scale(1.08); box-shadow: 0 0 0 8px var(--v2-card-bg); }
.home-walk__ctrl svg { width: 13px; height: 13px; fill: currentColor; }
.home-walk__ico-play { display: none; }
.home-walk__ctrl[aria-pressed="true"] .home-walk__ico-play { display: block; }
.home-walk__ctrl[aria-pressed="true"] .home-walk__ico-pause { display: none; }

/* Step tabs with progress */
.home-walk__tabs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: clamp(6px, 1.1vw, 16px); }
.home-walk__tab {
  width: 100%; display: grid; gap: 12px;
  padding: 0 0 4px; border: 0; background: none; color: var(--v2-text);
  font: inherit; text-align: left; cursor: pointer;
}
.home-walk__track { display: block; height: 2px; background: var(--home-mock-track); }
.home-walk__fill { display: block; height: 100%; width: 0; background: var(--v2-text); }
.home-walk__tab.is-done .home-walk__fill { width: 100%; }
.home-walk__tablabel { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; opacity: 0.5; transition: opacity 400ms ease; font-size: 1rem; font-weight: 600; }
.home-walk__tab[aria-current="step"] .home-walk__tablabel,
.home-walk__tab:hover .home-walk__tablabel { opacity: 1; }
.home-walk__tabnum { font-family: var(--v2-font-mono); font-size: 0.75rem; font-weight: 400; }
@media (max-width: 1079px) {
  .home-walk__tablabel { font-size: 0.875rem; }
  .home-walk__tabnum { display: none; }
}
@media (max-width: 899px) {
  .home-walk__tab { min-height: 24px; align-content: center; }
  .home-walk__tablabel { display: none; }
  .home-walk__tab:focus-visible { outline-offset: 4px; }
}
@media (max-width: 599px) {
  .home-walk__phone { width: 100%; max-width: 280px; height: 340px; margin-inline: auto; }
  .home-walk__report { min-height: 0; max-width: none; }
  .home-walk__rank { padding: 9px 8px; grid-template-columns: minmax(0, 1fr) 48px 44px; }
  .home-walk__score { font-size: 1.25rem; }
  .home-walk__chan { grid-template-columns: 1fr; gap: 10px; }
  .home-walk__crit { display: none; }
}

/* No JS: show every step, stacked and fully revealed */
html:not(.v2-js) .home-walk__step { grid-area: auto; opacity: 1; visibility: visible; transform: none; margin-bottom: 40px; }
html:not(.v2-js) .home-walk__row { opacity: 1; transform: none; }
html:not(.v2-js) .home-walk__controls,
html:not(.v2-js) .home-walk__tabs { display: none; }

/* Reduced motion: no autoplay; each step shows its final state at once */
@media (prefers-reduced-motion: reduce) {
  .home-walk__row, .home-walk__step.is-active .home-walk__row { transition: none; opacity: 1; transform: none; }
  .home-walk__step.is-active .home-walk__sent { transition-delay: 0s; }
  .home-walk__step.is-active .home-walk__swap-a,
  .home-walk__step.is-active .home-walk__swap-b,
  .home-walk__step.is-active .home-walk__bars i::after,
  .home-walk__step.is-active .home-walk__chart i,
  .home-walk__step.is-active .home-walk__rank--best { transition-delay: 0s !important; }
  .home-walk__step.is-active .home-walk__wave i { animation: none; height: 14px; }
}

/* --------------------------------------------------------------------------
   03 What TYTEN does
   -------------------------------------------------------------------------- */
.home-does__title { font-size: clamp(2.125rem, 1.65rem + 1.95vw, 3.375rem); max-width: 1000px; }
.home-does__grid { list-style: none; margin: 0; padding: 0; display: grid; }
.home-does__card { min-width: 0; }
.home-does__card .v2-card__title { min-height: 2.2em; }
.home-does__badge { margin: 20px 0; }
@media (max-width: 599px) {
  .home-does__card .v2-card__title { min-height: 0; }
  .home-does__badge { margin: 16px 0; }
}

/* --------------------------------------------------------------------------
   04 Results
   -------------------------------------------------------------------------- */
:root,
[data-theme="light"] { --home-proof: var(--v2-text); }
[data-theme="dark"] { --home-proof: var(--v2-lime); }
.home-results__head { margin-bottom: clamp(2rem, 1.6rem + 1.4vw, 3rem); }
.home-results__grid { display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--v2-border); }
.home-results__col { display: flex; flex-direction: column; gap: clamp(16px, 1rem + 1vw, 30px); min-width: 0; padding: 28px 0; }
.home-results__col + .home-results__col { border-top: 1px solid var(--v2-border); }
@media (min-width: 900px) {
  .home-results__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); padding-top: 36px; }
  .home-results__col { padding: 0 clamp(24px, 3.9vw, 56px); }
  .home-results__col:first-child { padding-left: 0; }
  .home-results__col + .home-results__col { border-top: 0; border-left: 1px solid var(--v2-border); }
}
.home-results__h { font-family: var(--v2-font-display); font-weight: 500; font-size: clamp(1.5rem, 1.35rem + 0.6vw, 1.875rem); letter-spacing: -0.02em; line-height: 1.15; }
.home-results__stat { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.home-results__num { font-family: var(--v2-font-display); font-weight: 500; font-size: clamp(5rem, 2.8rem + 6.4vw, 9.375rem); letter-spacing: -0.03em; line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; }
.home-results__label { font-size: clamp(1.0625rem, 1rem + 0.2vw, 1.125rem); line-height: 1.45; color: var(--v2-text-muted); max-width: 330px; }
.home-results__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 18px clamp(28px, 3.6vw, 52px); margin-top: clamp(2rem, 1.5rem + 1.5vw, 2.75rem); padding-top: 30px; border-top: 1px solid var(--v2-border); }
.home-results__live { display: inline-flex; align-items: center; gap: 12px; font-size: 0.8125rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--v2-text-muted); }
.home-results__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--home-proof); }
.home-results__proof { display: flex; align-items: baseline; gap: 14px; font-size: 1.0625rem; color: var(--v2-text-muted); }
.home-results__pnum { font-family: var(--v2-font-display); font-weight: 500; font-size: clamp(2.25rem, 1.9rem + 1.2vw, 2.75rem); letter-spacing: -0.03em; line-height: 1; color: var(--home-proof); font-variant-numeric: tabular-nums; }
@media (max-width: 599px) { .home-results__live { flex-basis: 100%; } }

/* --------------------------------------------------------------------------
   05 In their words: one tab per client; each panel = one portrait video + its quote
   -------------------------------------------------------------------------- */
.home-words__eyebrow { font-weight: 400; margin-bottom: clamp(1.25rem, 1rem + 1vw, 1.75rem); }
.home-words__tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.home-words__panel { display: grid; gap: 32px; align-items: center; }
.v2-js .home-words__panel[hidden] { display: none; }
@media (min-width: 900px) { .home-words__panel { grid-template-columns: auto minmax(0, 1fr); gap: clamp(48px, 6vw, 96px); } }
.home-words__media {
  justify-self: center;
  width: min(100%, 320px);
  width: min(100%, 320px, calc(72svh * 9 / 16));
  aspect-ratio: 9 / 16;
  border-radius: 26px;
  overflow: hidden;
  background: var(--home-stage-bg);
  box-shadow: var(--v2-shadow-frame);
}
@media (min-width: 900px) {
  .home-words__media { width: clamp(280px, 26vw, 340px); width: min(clamp(280px, 26vw, 340px), calc(80svh * 9 / 16)); }
}
.home-words__player { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--home-stage-bg); }
.home-words__quote { margin: 0; max-width: 40rem; display: grid; gap: 30px; align-content: center; }
.home-words__mark { display: block; height: 34px; font-family: var(--v2-font-display); font-weight: 700; font-size: 72px; line-height: 0.5; }
[data-theme="dark"] .home-words__mark { color: var(--v2-accent); }
.home-words__text { margin: 0; font-family: var(--v2-font-display); font-weight: 500; font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem); line-height: 1.27; letter-spacing: -0.02em; }
.home-words__text p { margin: 0; }
.home-words__who { display: grid; gap: 3px; }
.home-words__name { font-size: 1.0625rem; font-weight: 700; }
.home-words__co { font-size: 0.9375rem; color: var(--v2-text-muted); }
.v2-js .home-words__panel:not([hidden]) { animation: home-words-in 420ms ease both; }
@keyframes home-words-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .v2-js .home-words__panel:not([hidden]) { animation: none; } }
/* Without JS: no tabs, every client shown one after another */
html:not(.v2-js) .home-words__tabs { display: none; }
html:not(.v2-js) .home-words__panel + .home-words__panel { margin-top: 64px; }

/* --------------------------------------------------------------------------
   06 Supported systems
   -------------------------------------------------------------------------- */
:root,
[data-theme="light"] {
  --home-rule: rgba(33, 30, 40, 0.16);
  --home-box-bg: rgba(33, 30, 40, 0.02);
  --home-tag-bg: rgba(33, 30, 40, 0.03);
  --home-tag-border: rgba(33, 30, 40, 0.22);
  --home-status-new: #9D93A6;
  --home-status-future: #7E7488;
}
[data-theme="dark"] {
  --home-rule: rgba(246, 210, 176, 0.16);
  --home-box-bg: rgba(255, 255, 255, 0.02);
  --home-tag-bg: rgba(255, 255, 255, 0.03);
  --home-tag-border: rgba(246, 210, 176, 0.22);
  --home-status-new: #B7ABB9;
  --home-status-future: #9D93A6;
}
.home-sys__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 28px 60px; margin-bottom: clamp(2rem, 1.5rem + 1.6vw, 3.25rem); }
.home-sys__intro { display: grid; gap: 20px; max-width: 900px; flex: 1 1 520px; }
.home-ctl__intro { flex: 1 1 520px; }
.home-sys__sub { max-width: 560px; }
.home-sys__table { border: 1px solid var(--home-rule); border-radius: 30px; overflow: hidden; background: var(--home-box-bg); }
.home-sys__row { display: grid; gap: 16px; padding: 24px clamp(18px, 3vw, 44px); }
.home-sys__row + .home-sys__row { border-top: 1px solid var(--home-rule); }
@media (min-width: 900px) { .home-sys__row { grid-template-columns: clamp(200px, 20vw, 290px) minmax(0, 1fr); gap: 32px; align-items: center; padding-block: 30px; } }
.home-sys__cat { font-size: 0.8125rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--v2-text-muted); font-weight: 600; }
.home-sys__tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
@media (min-width: 900px) { .home-sys__tags { gap: 12px; } }
.home-sys__tag {
  display: inline-flex; align-items: baseline; gap: 10px;
  font-size: clamp(0.9375rem, 0.88rem + 0.25vw, 1.125rem); font-weight: 600; line-height: 1.2;
  padding: 10px 14px; border-radius: 12px;
  border: 1px solid var(--home-tag-border); background: var(--home-tag-bg);
  transition: border-color 400ms ease, background-color 400ms ease;
}
@media (min-width: 900px) { .home-sys__tag { padding: 12px 18px; } }
.home-sys__tag.is-future { opacity: 0.5; }
/* Vendor tags: the whole tag is the link target (stretched ::after), so the tag keeps its padding/look. */
.home-sys__tag--link { position: relative; }
.home-sys__link { color: inherit; text-decoration: none; }
.home-sys__link::after { content: ""; position: absolute; inset: -1px; border-radius: var(--v2-r-tag); }
.home-sys__link:focus-visible { outline: none; }
.home-sys__link:focus-visible::after { outline: 2px solid var(--v2-focus); outline-offset: 2px; }
.home-sys__tag--link:hover,
.home-sys__tag--link:has(.home-sys__link:focus-visible) { border-color: var(--v2-accent); background: var(--v2-accent-tint); }
.home-sys__tag--link:hover .home-sys__link { color: var(--v2-accent-ink); }
.home-sys__tag--more { border-color: var(--v2-accent-tint-border); background: var(--v2-accent-tint); color: var(--v2-accent-ink); }
.home-sys__status { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em; color: var(--v2-accent-ink); }
.home-sys__status--new { color: var(--home-status-new); }
.home-sys__status--future { color: var(--home-status-future); }
.home-sys__beyond { display: grid; gap: 28px; margin-top: clamp(3rem, 2.4rem + 2vw, 4.5rem); align-items: start; }
@media (min-width: 1080px) { .home-sys__beyond { grid-template-columns: minmax(0, 520px) minmax(0, 1fr); gap: 80px; } }
.home-sys__bhead { display: grid; gap: 18px; }
.home-sys__btitle { font-family: var(--v2-font-display); font-weight: 500; font-size: clamp(1.75rem, 1.4rem + 1.3vw, 2.5rem); line-height: 1.12; letter-spacing: -0.02em; }
.home-sys__list { list-style: none; margin: 0; padding: 0; }
.home-sys__list li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; align-items: baseline; padding: 18px 0; border-top: 1px solid var(--home-rule); font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); line-height: 1.35; }
.home-sys__list strong { font-weight: 600; }
.home-sys__n { font-family: var(--v2-font-mono); font-size: 0.875rem; color: var(--v2-text-muted); }
.home-sys__trust { margin-top: 36px; font-size: 1rem; line-height: 1.6; color: var(--v2-text-muted); max-width: 900px; }
.home-sys__trust a { color: inherit; text-decoration-color: var(--v2-accent-ink); text-underline-offset: 3px; }
.home-sys__trust a:hover { color: var(--v2-accent-ink); }
.home-sys__notes { display: grid; gap: 24px; margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); }
@media (min-width: 900px) { .home-sys__notes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.home-sys__note { display: grid; gap: 14px; align-content: start; padding: clamp(24px, 2.6vw, 34px) clamp(22px, 2.8vw, 38px); border: 1px solid var(--home-rule); border-radius: 24px; background: var(--home-box-bg); }
.home-sys__ntitle { font-family: var(--v2-font-display); font-weight: 600; font-size: clamp(1.5rem, 1.35rem + 0.6vw, 1.75rem); letter-spacing: -0.02em; }
.home-sys__note p { font-size: clamp(1.0625rem, 1rem + 0.2vw, 1.125rem); line-height: 1.55; color: var(--v2-text-muted); max-width: 460px; }
.home-sys__legal { margin-top: 36px; font-size: 0.8125rem; line-height: 1.6; color: var(--v2-text-muted); max-width: 1000px; }

/* --------------------------------------------------------------------------
   07 Control and security
   -------------------------------------------------------------------------- */
:root,
[data-theme="light"] { --home-paused: #C27A1E; --home-card-border-strong: rgba(33, 30, 40, 0.26); --home-knob: #FFFFFF; }
[data-theme="dark"] { --home-paused: #E0A050; --home-card-border-strong: rgba(246, 210, 176, 0.26); --home-knob: #FFFFFF; }
.home-ctl__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 20px 60px; margin-bottom: clamp(2rem, 1.6rem + 1.4vw, 3rem); }
.home-ctl__intro { display: grid; gap: 20px; }
.home-ctl__aside { display: flex; align-items: center; gap: 12px; font-size: 0.9375rem; color: var(--v2-text-muted); padding-bottom: 8px; }
.home-ctl__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--v2-accent); flex: none; }
.home-ctl__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
@media (min-width: 700px) { .home-ctl__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
@media (min-width: 1080px) { .home-ctl__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.home-ctl__card { display: grid; gap: 18px; padding: clamp(22px, 2vw, 26px) clamp(22px, 2vw, 28px); border-radius: var(--v2-r-card); border: 1px solid var(--home-card-border-strong); background: var(--v2-card-bg); transition: opacity 500ms ease; }
.home-ctl__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.home-ctl__name { font-family: var(--v2-font-display); font-weight: 500; font-size: clamp(1.375rem, 1.25rem + 0.5vw, 1.625rem); letter-spacing: -0.02em; }
.home-ctl__switch { position: relative; width: 48px; height: 28px; flex: none; border-radius: var(--v2-r-pill); background: var(--v2-accent); transition: background-color 400ms ease; }
.home-ctl__switch span { position: absolute; top: 3px; left: 23px; width: 22px; height: 22px; border-radius: 50%; background: var(--home-knob); transition: left 400ms ease; }
.home-ctl__state { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.home-ctl__mode { font-size: 0.75rem; font-weight: 700; padding: 6px 12px; border-radius: var(--v2-r-pill); background: var(--v2-accent); color: #211E28; transition: background-color 400ms ease, box-shadow 400ms ease, color 400ms ease; }
.home-ctl__card[data-mode="0"] .home-ctl__mode { background: transparent; box-shadow: inset 0 0 0 1px var(--home-card-border-strong); color: var(--v2-text); }
.home-ctl__status { font-size: 0.8125rem; color: var(--v2-text-muted); }
.home-ctl__log { font-family: var(--v2-font-mono); font-size: 0.8125rem; color: var(--v2-text-muted); }
.home-ctl__card.is-paused { opacity: 0.55; }
.home-ctl__card.is-paused .home-ctl__switch { background: var(--home-paused); }
.home-ctl__card.is-paused .home-ctl__switch span { left: 3px; }
.home-ctl__card.is-paused .home-ctl__mode { background: var(--home-paused); color: #211E28; box-shadow: none; }
.home-ctl__points { list-style: none; margin: clamp(2rem, 1.6rem + 1.4vw, 3rem) 0 0; padding: 0; display: grid; gap: 24px 28px; }
@media (min-width: 600px) { .home-ctl__points { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .home-ctl__points { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.home-ctl__points li { display: grid; gap: 12px; align-content: start; font-size: 1.0625rem; line-height: 1.45; }
.home-ctl__tick { width: 20px; height: 20px; }
.home-ctl__tick circle { fill: var(--v2-accent); }
.home-ctl__tick path { fill: none; stroke: #211E28; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.home-ctl__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; margin-top: clamp(2rem, 1.6rem + 1.4vw, 3rem); padding-top: 30px; border-top: 1px solid var(--v2-line-soft); }
.home-ctl__badges { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 14px; }
.home-ctl__badge { display: grid; gap: 3px; padding: 12px 20px; border: 1px solid var(--v2-line); border-radius: 14px; background: var(--home-tag-bg); white-space: nowrap; }
.home-ctl__badge strong { font-size: 0.9375rem; font-weight: 700; line-height: 1.3; }
.home-ctl__badge span { font-size: 0.75rem; color: var(--v2-text-muted); line-height: 1.4; }
.home-ctl__link { color: var(--v2-accent-ink); font-weight: 700; white-space: nowrap; }
@media (max-width: 599px) { .home-ctl__badge { flex: 1 1 calc(50% - 7px); } }

/* --------------------------------------------------------------------------
   08 Insights
   -------------------------------------------------------------------------- */
.home-ins__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px 40px; margin-bottom: clamp(2rem, 1.5rem + 1.8vw, 3.5rem); }
.home-ins__h { font-family: var(--v2-font-display); font-weight: 500; font-size: clamp(2.25rem, 1.65rem + 2.5vw, 4rem); line-height: 1.04; letter-spacing: -0.03em; }
.home-ins__all { font-size: 1.0625rem; }
.home-ins__list { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--v2-border); }
.home-ins__row {
  position: relative;
  display: grid; gap: 10px 40px;
  padding: clamp(26px, 2rem + 1vw, 46px) 0;
  border-top: 1px solid var(--v2-border);
  color: var(--v2-text); text-decoration: none;
}
@media (min-width: 900px) { .home-ins__row { grid-template-columns: clamp(160px, 17vw, 240px) minmax(0, 1fr) 150px; align-items: center; } }
.home-ins__row::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 0; background: var(--v2-text); transition: width 700ms ease; }
.home-ins__kind { font-size: 0.8125rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--v2-text-muted); }
.home-ins__title { font-family: var(--v2-font-display); font-weight: 500; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.375rem); letter-spacing: -0.025em; line-height: 1.12; opacity: 0.38; transition: opacity 600ms ease; }
.home-ins__meta { display: flex; align-items: center; justify-content: flex-start; gap: 22px; font-size: 0.9375rem; color: var(--v2-text-muted); }
@media (min-width: 900px) { .home-ins__meta { justify-content: flex-end; } }
.home-ins__arrow { font-size: 1.625rem; line-height: 1; color: var(--v2-text); opacity: 0.3; transition: transform 600ms ease, opacity 600ms ease; }
.home-ins__row.is-active .home-ins__title,
.home-ins__row:hover .home-ins__title,
.home-ins__row:focus-visible .home-ins__title { opacity: 1; }
.home-ins__row.is-active .home-ins__arrow,
.home-ins__row:hover .home-ins__arrow,
.home-ins__row:focus-visible .home-ins__arrow { opacity: 1; transform: translateX(8px); }
.home-ins__row.is-active::after,
.home-ins__row:hover::after,
.home-ins__row:focus-visible::after { width: 100%; }
.home-ins__list:hover .home-ins__row.is-active:not(:hover) .home-ins__title { opacity: 0.38; }
.home-ins__list:hover .home-ins__row.is-active:not(:hover) .home-ins__arrow { opacity: 0.3; transform: none; }
.home-ins__list:hover .home-ins__row.is-active:not(:hover)::after { width: 0; }
@media (max-width: 899px) { .home-ins__title { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .home-ins__title { opacity: 1; } }

/* --------------------------------------------------------------------------
   09 FAQ
   -------------------------------------------------------------------------- */
.home-faq__grid { display: grid; gap: 40px; align-items: start; }
@media (min-width: 1080px) { .home-faq__grid { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: clamp(60px, 7.6vw, 110px); } }
.home-faq__side { display: grid; gap: clamp(24px, 3vw, 40px); align-content: start; }
@media (min-width: 1080px) { .home-faq__side { position: sticky; top: calc(var(--v2-header-h) + 24px); } }
.home-faq__head { display: grid; gap: 18px; }
.home-faq__title { font-family: var(--v2-font-display); font-weight: 500; font-size: clamp(2.125rem, 1.7rem + 1.7vw, 3.25rem); line-height: 1.05; letter-spacing: -0.025em; }
.home-faq__ask { display: grid; gap: 16px; justify-items: start; padding-top: 10px; }
.home-faq__ask p { font-size: clamp(1.0625rem, 1rem + 0.2vw, 1.125rem); line-height: 1.5; color: var(--v2-text-muted); }
.home-faq__list { border-bottom: 1px solid var(--v2-line-soft); }
.home-faq__item { border-top: 1px solid var(--v2-line-soft); }
.home-faq__q {
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding: clamp(20px, 1.6vw, 26px) 4px;
  cursor: pointer; list-style: none;
}
.home-faq__q::-webkit-details-marker { display: none; }
.home-faq__qt { font-family: var(--v2-font-display); font-weight: 500; font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem); letter-spacing: -0.015em; line-height: 1.25; opacity: 0.7; transition: opacity 400ms ease, color 400ms ease; }
.home-faq__q:hover .home-faq__qt,
.home-faq__item[open] .home-faq__qt { opacity: 1; }
.home-faq__q:hover .home-faq__qt { color: var(--v2-accent-ink); }
.home-faq__icon { flex: none; font-size: 1.875rem; font-weight: 400; line-height: 1; color: var(--v2-text-muted); transition: transform 400ms ease, color 400ms ease; }
.home-faq__item[open] .home-faq__icon { transform: rotate(45deg); color: var(--v2-accent); }
.home-faq__a { padding: 0 4px clamp(20px, 1.6vw, 26px); }
.home-faq__a p { font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); line-height: 1.55; color: var(--v2-text-muted); max-width: 680px; }
.home-faq__a a { color: inherit; text-decoration-color: var(--v2-accent-ink); text-underline-offset: 3px; }
.home-faq__a a:hover { color: var(--v2-accent-ink); }
.home-faq__item[open] .home-faq__a { animation: home-faq-open 500ms ease; }
@keyframes home-faq-open { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* --------------------------------------------------------------------------
   10 Closing
   -------------------------------------------------------------------------- */
.home-close { padding-block: clamp(4.5rem, 3rem + 5vw, 8.125rem) clamp(4rem, 2.8rem + 4.5vw, 7.5rem); }
.home-close__inner { display: grid; justify-items: center; gap: clamp(26px, 2.4vw, 36px); text-align: center; }
.home-close__title { font-family: var(--v2-font-display); font-weight: 500; font-size: clamp(3rem, 1.6rem + 5.9vw, 7rem); line-height: 1.02; letter-spacing: -0.035em; }
.home-close__tyten { padding: 0 0.16em; border-radius: 0.16em; }
.home-close__sub { font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); }
@media (max-width: 599px) {
  .home-hero__strip { justify-self: center; padding: 8px 14px; border-radius: var(--v2-r-banner); background: var(--v2-kicker-bg); border: 1px solid var(--v2-kicker-border); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
}