/* ==========================================================================
   Zyntel prototype — SECTIONS
   Each section has its own composition (08A §5.1): asymmetry, overlap,
   oversized numerals, sticky intro, radial diagram, metric band, layers.
   Surface sequence: W W S W S W W G W S W W S S — never two subtle adjacent;
   white→white joins carry a hairline transition line.
   ========================================================================== */

/* ================================================================ 02 HERO */
.hero { padding-top: var(--zy-space-12); overflow: hidden; }
.hero__grid { align-items: center; row-gap: var(--zy-space-10); }
.hero__text .eyebrow { margin-bottom: var(--zy-space-6); }
.hero__title { max-width: var(--zy-measure-statement); } /* fluid t-hero role — always the largest type on the page */
.hero__lead { margin-top: var(--zy-space-6); color: var(--zy-color-text-secondary); max-width: 34rem; }
.hero__actions { margin-top: var(--zy-space-8); }
.hero__visual { position: relative; }
.hero__visual-label { margin-top: var(--zy-space-2); text-align: right; color: var(--zy-color-text-tertiary); }

.hero__markers {
  display: grid; grid-template-columns: 1fr;
  margin-top: var(--zy-space-12);
  border-top: var(--zy-border-hairline) solid var(--zy-color-border-default);
}
.hero__marker {
  display: flex; align-items: center; gap: var(--zy-space-4); min-height: 3.5rem;
  border-bottom: var(--zy-border-hairline) solid var(--zy-color-border-subtle);
  transition: color var(--zy-motion-duration-micro) var(--zy-motion-easing-standard);
}
.hero__marker .icon { margin-left: auto; width: 1rem; height: 1rem; color: var(--zy-color-text-secondary); transition: transform var(--zy-motion-duration-component) var(--zy-motion-easing-standard); }
.hero__marker:hover { color: var(--zy-color-text-signal); }
.hero__marker:hover .icon { transform: translateY(3px); color: var(--zy-color-text-signal); }
@media (min-width: 48em) {
  .hero__markers { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--zy-grid-gutter); }
  .hero__marker { border-bottom: 0; }
}
@media (min-width: 64em) {
  .hero { padding-top: var(--zy-space-16); }
  /* text ≈ 45% (cols 1–5 + breathing column) · visual ≈ 55% (cols 7–12), contained */
  .hero__visual { max-width: 38rem; justify-self: end; width: 100%; }
}
@media (max-width: 47.99em) { .g-tick { display: none; } }

/* Hero signal — draws once, travels once; replays once on hover. Never loops. */
.js .hero__visual .g-flow { stroke-dasharray: 1600; stroke-dashoffset: 1600; transition: stroke-dashoffset calc(2 * var(--zy-motion-duration-signature)) var(--zy-motion-easing-standard) var(--zy-motion-duration-component); }
.js .hero__visual.is-drawn .g-flow { stroke-dashoffset: 0; }
.g-signal { fill: var(--zy-color-signal-node); offset-rotate: 0deg; offset-distance: 0%; opacity: 0; }
/* first run is triggered by JS (is-signal) so the loop and the first pass share one rule */
.hero__visual.is-signal .g-signal { animation: zy-signal-replay calc(3 * var(--zy-motion-duration-signature)) var(--zy-motion-easing-standard) 0s 1 both; }
@keyframes zy-signal { 0% { offset-distance: 0%; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
@keyframes zy-signal-replay { 0% { offset-distance: 0%; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
.hero__visual .g-halo { transform-box: fill-box; transform-origin: center; transition: transform var(--zy-motion-duration-section) var(--zy-motion-easing-standard); }
.hero__visual:hover .g-halo { transform: scale(1.3); }

/* ======================================================= 03 PROBLEM / CONTEXT */
.context__grid { align-items: start; }
.context__numeral { display: none; }
.context__statement { max-width: 22ch; }
.flow { margin-top: var(--zy-layout-section-space-sm); row-gap: 0; }
.flow-step { position: relative; padding: 0 0 var(--zy-space-10) var(--zy-space-10); }
.flow-step::before { content: ""; position: absolute; left: 6px; top: 16px; bottom: 0; border-left: var(--zy-border-hairline) solid var(--zy-color-border-default); }
.flow-step:last-child { padding-bottom: 0; }
.flow-step:last-child::before { display: none; }
.flow-step__node { position: absolute; left: 0; top: 2px; width: 13px; height: 13px; border-radius: var(--zy-radius-full); background: var(--zy-color-surface-page); border: var(--zy-border-hairline) solid var(--zy-color-signal-line); }
.flow-step:last-child .flow-step__node { background: var(--zy-color-signal-node); border-color: var(--zy-color-signal-node); box-shadow: 0 0 0 5px var(--zy-color-signal-halo); }
.flow-step__num { display: block; color: var(--zy-color-text-signal); margin-bottom: var(--zy-space-3); }
.flow-step__title { margin-bottom: var(--zy-space-3); }

@media (min-width: 64em) {
  .context__numeral {
    display: block;
    font-size: calc(var(--zy-type-display-1-size) * 2);
    line-height: 0.8;
    letter-spacing: -0.06em;
    font-weight: var(--zy-font-weight-semibold);
    color: var(--zy-color-brand-100);
    margin-top: calc(-1 * var(--zy-space-2));
    user-select: none;
  }
  .flow { row-gap: 0; }
  .flow-step { padding: var(--zy-space-10) var(--zy-space-6) 0 0; }
  .flow-step::before { left: 0; right: calc(-1 * var(--zy-grid-gutter)); top: 6px; bottom: auto; border-left: 0; border-top: var(--zy-border-hairline) solid var(--zy-color-border-default); }
  .flow-step:last-child::before { display: block; right: 0; }
  .flow-step__node { top: 0; }
}

/* ================================================ 04 VALUE PROPOSITION (overlap) */
.value { padding-block: 0; }
.value__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--zy-color-surface-page); }
.value__media .gfx { width: 100%; height: 100%; }
.value__media-label {
  position: absolute; left: var(--zy-grid-margin); bottom: var(--zy-space-4);
  display: inline-flex; align-items: center; gap: var(--zy-space-2);
  padding: var(--zy-space-1) var(--zy-space-3);
  border-radius: var(--zy-radius-full);
  background: var(--zy-color-surface-page); color: var(--zy-color-text-placeholder-content);
  border: var(--zy-border-hairline) dashed var(--zy-color-border-signal);
}
.value__media-label .icon { width: 1rem; height: 1rem; }
.value__grid { padding-block: var(--zy-layout-section-space-sm) var(--zy-layout-section-space-md); }
.value__body { margin-top: var(--zy-space-6); }
.shifts { margin-top: var(--zy-space-8); border-top: var(--zy-border-hairline) solid var(--zy-color-border-default); }
.shift { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--zy-space-4); padding-block: var(--zy-space-4); border-bottom: var(--zy-border-hairline) solid var(--zy-color-border-default); }
.shift__from { color: var(--zy-color-text-secondary); }
.shift__arrow { color: var(--zy-color-text-signal); width: 1rem; height: 1rem; }
.shift__to { font-weight: var(--zy-font-weight-medium); }

@media (min-width: 64em) {
  .value { position: relative; }
  /* Media right edge = end of column 7 of the full container; panel starts at column 7 → 1-column overlap. */
  .value__media {
    position: absolute; left: 0; top: 0; bottom: 0; aspect-ratio: auto;
    width: calc((100% - min(100% - 2 * var(--zy-grid-margin), var(--zy-container-full))) / 2 + (min(100% - 2 * var(--zy-grid-margin), var(--zy-container-full)) + var(--zy-grid-gutter)) * 7 / 12 - var(--zy-grid-gutter));
  }
  .value__grid { position: relative; min-height: 46rem; align-items: center; padding-block: var(--zy-layout-section-space-md); }
  .value__panel {
    background: var(--zy-color-surface-page);
    border: var(--zy-border-hairline) solid var(--zy-color-border-default);
    border-radius: var(--zy-radius-lg);
    padding: var(--zy-space-12);
  }
  .value__media-label { left: calc((100% - min(100% - 2 * var(--zy-grid-margin), var(--zy-container-full))) / 2 + var(--zy-space-4)); }
}

/* ============================================ 05 CONCEPTUAL SYSTEM / HOW IT WORKS */
.how__head { row-gap: var(--zy-space-8); align-items: end; margin-bottom: var(--zy-layout-header-to-body); }
.how__title { max-width: 10ch; }
.how__intro { display: flex; flex-direction: column; align-items: flex-start; gap: var(--zy-space-6); }

.engine__track { position: relative; display: grid; grid-template-columns: 1fr; }
.engine__track::before { content: ""; position: absolute; left: calc(var(--zy-space-4) + 7px); top: var(--zy-space-6); bottom: var(--zy-space-6); border-left: 1px dashed var(--zy-color-signal-line); }
.engine__pulse { position: absolute; left: calc(var(--zy-space-4) + 3px); top: var(--zy-space-6); width: 9px; height: 9px; border-radius: var(--zy-radius-full); background: var(--zy-color-signal-node); opacity: 0; pointer-events: none; }
.engine.is-running .engine__pulse { animation: zy-pulse-v calc(2 * var(--zy-motion-duration-signature)) var(--zy-motion-easing-standard) 1 both; }
@keyframes zy-pulse-v { 0% { opacity: 0; transform: translateY(0); } 10% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; transform: translateY(15rem); } }

.engine__stage {
  position: relative; display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: var(--zy-space-4);
  min-height: 3.5rem; padding: var(--zy-space-3) var(--zy-space-4); border-radius: var(--zy-radius-md);
  transition: background-color var(--zy-motion-duration-micro) var(--zy-motion-easing-standard);
}
.engine__stage:hover { background: var(--zy-color-surface-subtle); }
.engine__node {
  position: relative; z-index: 1; width: 1rem; height: 1rem; border-radius: var(--zy-radius-full);
  background: var(--zy-color-surface-page); border: var(--zy-border-hairline) solid var(--zy-color-signal-node-inactive);
  transition: background-color var(--zy-motion-duration-section) var(--zy-motion-easing-standard), border-color var(--zy-motion-duration-section) var(--zy-motion-easing-standard), box-shadow var(--zy-motion-duration-section) var(--zy-motion-easing-standard);
}
.engine__stage-text { display: flex; align-items: baseline; gap: var(--zy-space-3); }
.engine__stage-num { color: var(--zy-color-text-secondary); }
.engine__stage-name { font-weight: var(--zy-font-weight-medium); color: var(--zy-color-text-secondary); transition: color var(--zy-motion-duration-micro) var(--zy-motion-easing-standard); }
.engine__stage[data-lit="true"] .engine__node { border-color: var(--zy-color-signal-node); }
.engine__stage[data-lit="true"] .engine__stage-name { color: var(--zy-color-text-primary); }
.engine__stage[aria-selected="true"] .engine__node { background: var(--zy-color-signal-node); border-color: var(--zy-color-signal-node); box-shadow: 0 0 0 6px var(--zy-color-signal-halo); }
.engine__stage[aria-selected="true"] .engine__stage-name { color: var(--zy-color-text-signal); }

.engine__panel { margin-top: var(--zy-space-8); padding-top: var(--zy-space-8); border-top: var(--zy-border-hairline) solid var(--zy-color-border-default); row-gap: var(--zy-space-6); }
.engine__panel [data-stage-label] { display: block; margin-bottom: var(--zy-space-3); }
.engine__panel-lead { margin-top: var(--zy-space-3); }
.engine__fields { display: grid; grid-template-columns: 1fr; }
.engine__field { padding-block: var(--zy-space-4); border-bottom: var(--zy-border-hairline) solid var(--zy-color-border-subtle); }
.engine__field dt { color: var(--zy-color-text-secondary); margin-bottom: var(--zy-space-1); }
@media (min-width: 48em) { .engine__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--zy-grid-gutter); } }
@media (min-width: 64em) {
  .engine__track { grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: var(--zy-grid-gutter); }
  .engine__track::before { left: 10%; right: 10%; top: calc(var(--zy-space-4) + 7px); bottom: auto; border-left: 0; border-top: 1px dashed var(--zy-color-signal-line); }
  .engine__pulse { left: 10%; top: calc(var(--zy-space-4) + 3px); }
  .engine.is-running .engine__pulse { animation-name: zy-pulse-h; }
  .engine__stage { grid-template-columns: 1fr; justify-items: center; text-align: center; row-gap: var(--zy-space-4); padding: var(--zy-space-4) var(--zy-space-2); }
  .engine__stage:hover { background: transparent; }
  .engine__stage:hover .engine__node { border-color: var(--zy-color-signal-node); }
  .engine__stage-text { flex-direction: column; align-items: center; gap: var(--zy-space-1); }
  .engine__stage-name { font-size: var(--zy-type-heading-4-size); line-height: var(--zy-type-heading-4-lh); }
}
@keyframes zy-pulse-h { 0% { opacity: 0; left: 10%; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; left: 90%; } }

/* ============================================= 06 CAPABILITIES (sticky + accordion) */
.capabilities { --cap-indent: 4.5rem; }
.cap__intro-text { margin-top: var(--zy-space-6); }
.cap__intro .link-arrow { margin-top: var(--zy-space-4); }
.cap__list { margin-top: var(--zy-space-10); border-top: var(--zy-border-hairline) solid var(--zy-color-border-default); }
.cap { border-bottom: var(--zy-border-hairline) solid var(--zy-color-border-default); }
.cap__heading { font: inherit; }
.cap__trigger { display: grid; grid-template-columns: auto 1fr auto; gap: var(--zy-space-6); align-items: start; width: 100%; padding-block: var(--zy-space-8); text-align: left; }
.cap__num {
  width: calc(var(--cap-indent) - var(--zy-space-6));
  font-size: var(--zy-type-heading-1-size); line-height: 1; letter-spacing: -0.03em; font-weight: var(--zy-font-weight-semibold);
  color: var(--zy-color-brand-200); font-variant-numeric: tabular-nums;
  transition: color var(--zy-motion-duration-component) var(--zy-motion-easing-standard);
}
.cap__trigger[aria-expanded="true"] .cap__num { color: var(--zy-color-text-signal); }
.cap__head-text { display: flex; flex-direction: column; gap: var(--zy-space-2); }
.cap__name { transition: color var(--zy-motion-duration-micro) var(--zy-motion-easing-standard); }
.cap__summary { color: var(--zy-color-text-secondary); }
.cap__trigger:hover .cap__name { color: var(--zy-color-text-signal); }
.cap__toggle { position: relative; width: 2.5rem; height: 2.5rem; border-radius: var(--zy-radius-full); border: var(--zy-border-hairline) solid var(--zy-color-border-default); transition: border-color var(--zy-motion-duration-micro) var(--zy-motion-easing-standard); }
.cap__toggle::before, .cap__toggle::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 1.5px; background: var(--zy-color-text-primary); transform: translate(-50%, -50%); transition: transform var(--zy-motion-duration-component) var(--zy-motion-easing-standard); }
.cap__toggle::after { transform: translate(-50%, -50%) rotate(90deg); }
.cap__trigger[aria-expanded="true"] .cap__toggle { border-color: var(--zy-color-border-signal); }
.cap__trigger[aria-expanded="true"] .cap__toggle::after { transform: translate(-50%, -50%) rotate(0deg); }
.cap__panel { padding: 0 0 var(--zy-space-8) var(--cap-indent); }
.cap__detail { display: grid; gap: var(--zy-space-5); }
.cap__detail dt { color: var(--zy-color-text-secondary); }
.cap__detail dd { margin-top: var(--zy-space-2); }
@media (min-width: 48em) {
  .capabilities { --cap-indent: 6.5rem; }
  .cap__num { font-size: var(--zy-type-display-3-size); }
  .cap__detail { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--zy-grid-gutter); }
}
@media (min-width: 64em) {
  .capabilities { --cap-indent: 7.5rem; }
  .cap__list { margin-top: 0; }
  .cap__sticky { position: sticky; top: calc(var(--zy-nav-height) + var(--zy-space-10)); }
}

/* ================================================ 07 SOLUTIONS (asymmetric tiles) */
.tiles { row-gap: var(--zy-space-6); }
.tiles > li { display: flex; }
/* 1024–1279: lead tile + two tiles in one row (6 / 3 / 3) */
@media (min-width: 64em) and (max-width: 79.99em) {
  .tiles > .tile--large { grid-column: auto / span 6; }
  .tiles > li:not(.tile--large) { grid-column: auto / span 3; }
}
/* ≥1280: asymmetric — one tall lead tile (7) against two stacked tiles (5) */
@media (min-width: 80em) {
  .tiles > .tile--large { grid-row: span 2; }
  .tiles > li:not(.tile--large) { grid-column: 8 / -1; }
  /* stacked tiles read horizontally: an asymmetric crop beside the text */
  .tiles > li:not(.tile--large) .tile { flex-direction: row; }
  .tiles > li:not(.tile--large) .tile__art { flex: 0 0 42%; min-height: 15rem; border-bottom: 0; border-right: var(--zy-border-hairline) solid var(--zy-color-border-subtle); }
  .tiles > li:not(.tile--large) .tile__body { flex: 1; }
}
.tile {
  display: flex; flex-direction: column; width: 100%;
  background: var(--zy-color-surface-page);
  border: var(--zy-border-hairline) solid var(--zy-color-border-default);
  border-radius: var(--zy-radius-lg); overflow: hidden;
  transition: border-color var(--zy-motion-duration-component) var(--zy-motion-easing-standard);
}
.tile:hover { border-color: var(--zy-color-border-signal); }
.tile__art { position: relative; flex: none; aspect-ratio: 16 / 10; overflow: hidden; background: var(--zy-color-surface-subtle); border-bottom: var(--zy-border-hairline) solid var(--zy-color-border-subtle); }
.tile--large .tile__art { aspect-ratio: 16 / 8; }
.tile__art .gfx { width: 100%; height: 100%; transition: transform var(--zy-motion-duration-story) var(--zy-motion-easing-standard); }
.tile:hover .tile__art .gfx { transform: scale(1.04); }
.tile__index { position: absolute; top: var(--zy-space-4); left: var(--zy-space-4); color: var(--zy-color-text-secondary); }
.tile__body { display: flex; flex-direction: column; gap: var(--zy-space-3); flex: 1; padding: var(--zy-layout-card-padding); }
.tile__name { transition: color var(--zy-motion-duration-micro) var(--zy-motion-easing-standard); }
.tile:hover .tile__name { color: var(--zy-color-text-signal); }
.tile__usecase { display: flex; align-items: center; gap: var(--zy-space-3); margin-top: auto; padding-top: var(--zy-space-4); border-top: var(--zy-border-hairline) solid var(--zy-color-border-subtle); color: var(--zy-color-text-primary); }
.tile__usecase .t-label { color: var(--zy-color-text-secondary); }
/* narrow tiles: keep label and value intact, wrap as units */
.tile__usecase { flex-wrap: wrap; row-gap: var(--zy-space-1); }
.tile__usecase > span { white-space: nowrap; }
.tile__usecase .icon { margin-left: auto; width: 1rem; height: 1rem; color: var(--zy-color-text-signal); transition: transform var(--zy-motion-duration-component) var(--zy-motion-easing-standard); }
.tile:hover .tile__usecase .icon { transform: translateX(4px); }
@media (min-width: 64em) {
  /* art absorbs spare height so bodies never sit half-empty */
  .tile__body { flex: none; }
  .tile__art { aspect-ratio: auto; flex: 1; min-height: 12rem; }
  .tile--large .tile__art { min-height: 16rem; }
  .tile--large .tile__name { font-size: var(--zy-type-heading-3-size); line-height: var(--zy-type-heading-3-lh); }
}

/* ============================================== 08 INDUSTRIES (media + selector) */
/* technical transition line between two white sections (07 → 08) */
.industries { border-top: var(--zy-border-hairline) solid var(--zy-color-border-subtle); }
.industries__grid { row-gap: var(--zy-space-10); align-items: start; }
.industries__content .t-heading-1 { margin-bottom: var(--zy-space-8); }
.selector__tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--zy-grid-gutter); margin-bottom: var(--zy-space-8); }
.selector__tab {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: var(--zy-space-1);
  min-height: 3.5rem; padding-block: var(--zy-space-4) var(--zy-space-3);
  border-top: var(--zy-border-hairline) solid var(--zy-color-border-default);
  color: var(--zy-color-text-secondary); font-weight: var(--zy-font-weight-medium); text-align: left;
  transition: color var(--zy-motion-duration-micro) var(--zy-motion-easing-standard);
}
.selector__tab::before { content: ""; position: absolute; top: -1px; left: 0; right: 0; height: var(--zy-border-emphasis); background: var(--zy-color-border-signal); transform: scaleX(0); transform-origin: left; transition: transform var(--zy-motion-duration-component) var(--zy-motion-easing-standard); }
.selector__tab:hover { color: var(--zy-color-text-primary); }
.selector__tab[aria-selected="true"] { color: var(--zy-color-text-primary); }
.selector__tab[aria-selected="true"]::before { transform: scaleX(1); }
.selector__tab-num { color: var(--zy-color-text-secondary); }
.selector__panel[hidden] { display: none; }
.selector__panel .t-heading-3 { margin-bottom: var(--zy-space-6); max-width: 24ch; }
.usecase { border-top: var(--zy-border-hairline) solid var(--zy-color-border-default); margin-bottom: var(--zy-space-4); }
.usecase__step { display: grid; grid-template-columns: 1.5rem 1fr; gap: var(--zy-space-3); padding-block: var(--zy-space-4); border-bottom: var(--zy-border-hairline) solid var(--zy-color-border-default); }
.usecase__node { width: 9px; height: 9px; margin-top: 4px; border-radius: var(--zy-radius-full); background: var(--zy-color-surface-page); border: var(--zy-border-hairline) solid var(--zy-color-signal-line); }
.usecase__step:last-child .usecase__node { background: var(--zy-color-signal-node); border-color: var(--zy-color-signal-node); }
.usecase__step dt { color: var(--zy-color-text-secondary); }
.usecase__step dd { margin-top: var(--zy-space-1); }
@media (min-width: 48em) { .selector__tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* below lg the portrait crop would dominate a stacked layout; recompose as landscape */
@media (max-width: 63.99em) { .industries__media .media-ph--portrait { aspect-ratio: 3 / 2; } }
@media (min-width: 64em) { .industries__media { position: sticky; top: calc(var(--zy-nav-height) + var(--zy-space-8)); } }

/* ======================================== 09 INTEGRATIONS (radial system diagram) */
.integrations {
  background-color: var(--zy-color-surface-subtle);
  background-image:
    linear-gradient(var(--zy-color-border-subtle) 1px, transparent 1px),
    linear-gradient(90deg, var(--zy-color-border-subtle) 1px, transparent 1px);
  background-size: 96px 96px;
  background-position: center -1px;
}
.integrations__grid { row-gap: var(--zy-space-12); align-items: center; }
.integrations__body { margin-top: var(--zy-space-6); }
.integrations__diagram { margin: 0; }
.integrations__diagram figcaption { display: flex; justify-content: center; margin-top: var(--zy-space-4); }
.integrations__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--zy-space-2); margin-top: var(--zy-space-6); }
.approach { margin-block: var(--zy-space-8) var(--zy-space-4); border-top: var(--zy-border-hairline) solid var(--zy-color-border-default); }
.approach__step { display: grid; grid-template-columns: 2rem 1fr; gap: var(--zy-space-4); padding-block: var(--zy-space-5); border-bottom: var(--zy-border-hairline) solid var(--zy-color-border-default); }
.approach__node { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: var(--zy-radius-full); border: var(--zy-border-hairline) solid var(--zy-color-signal-line); background: var(--zy-color-surface-page); color: var(--zy-color-text-signal); font-size: var(--zy-type-caption-size); font-variant-numeric: tabular-nums; }
.approach__step h3 { margin-bottom: var(--zy-space-1); }
.eco-hit { fill: transparent; }
.eco-node { cursor: default; }
.eco-node:hover .g-line-conceptual { stroke: var(--zy-color-signal-node); stroke-width: 1.5; stroke-dasharray: none; }
.eco-node:hover .g-node-ring { stroke: var(--zy-color-signal-node); }
@media (max-width: 47.99em) { .gfx--ecosystem .g-label, .gfx--layers .g-label { display: none; } }
@media (min-width: 48em) { .integrations__chips { display: none; } }
@media (min-width: 64em) {
  .integrations__diagram { grid-row: 1; grid-column: 6 / span 7; }
  .integrations__text { grid-row: 1; }
}

/* ==================================================== 10 SCALE (metric band) */
.scale { overflow: hidden; padding-bottom: calc(var(--zy-layout-section-space-md) + 14rem); }
/* perspective floor = the ground the metric band stands on; kept clear of type */
.scale__backdrop { position: absolute; left: 0; right: 0; bottom: 0; height: 18rem; pointer-events: none; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 45%); mask-image: linear-gradient(to bottom, transparent, #000 45%); }
.scale__backdrop .gfx { width: 100%; height: 100%; }
.scale__inner { position: relative; }
.scale__title { max-width: 14ch; }
.scale__rule { display: flex; flex-direction: row; gap: var(--zy-space-2); color: var(--zy-color-text-tertiary); }
.scale__rule .icon { width: 1rem; height: 1rem; margin-top: 2px; color: var(--zy-color-text-signal); }
.scale__metrics {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--zy-space-10) var(--zy-grid-gutter);
  padding-top: var(--zy-space-10); border-top: var(--zy-border-hairline) solid var(--zy-color-border-default);
}
.metric--scale .metric__value { font-size: var(--zy-type-display-3-size); line-height: var(--zy-type-display-3-lh); letter-spacing: var(--zy-tracking-display-3); }
.metric--scale { background: var(--zy-color-surface-page); }
@media (max-width: 47.99em) { .metric--scale .metric__value { font-size: var(--zy-type-heading-2-size); line-height: var(--zy-type-heading-2-lh); } }
@media (min-width: 64em) {
  .scale__metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .metric--scale + .metric--scale { border-left: var(--zy-border-hairline) solid var(--zy-color-border-default); padding-left: var(--zy-grid-gutter); }
}

/* ========================================================= 11 CUSTOMER PROOF */
.proof__rule { display: flex; flex-direction: row; gap: var(--zy-space-2); color: var(--zy-color-text-tertiary); }
.proof__rule .icon { width: 1rem; height: 1rem; margin-top: 2px; color: var(--zy-color-text-signal); }
.proof-panel { display: grid; grid-template-columns: 1fr; margin-inline: var(--zy-grid-margin); background: var(--zy-color-surface-inverse); color: var(--zy-color-neutral-0); border-radius: var(--zy-radius-lg); overflow: hidden; }
.proof-panel__media { min-height: 16rem; }
.proof-panel__body { padding: var(--zy-space-8) var(--zy-space-6); }
.proof-panel__label { display: block; margin-bottom: var(--zy-space-4); color: var(--zy-color-brand-300); }
.proof-panel__summary { margin-top: var(--zy-space-4); color: var(--zy-color-neutral-300); }
.metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--zy-space-6) var(--zy-grid-gutter); margin-top: var(--zy-space-8); padding-top: var(--zy-space-6); border-top: var(--zy-border-hairline) solid var(--zy-color-neutral-800); }
.metric--inverse .metric__label { color: var(--zy-color-neutral-0); }
.metric--inverse .metric__source { color: var(--zy-color-neutral-300); }
.metric--inverse .metric__value { font-size: var(--zy-type-heading-3-size); line-height: var(--zy-type-heading-3-lh); }
.metric--inverse[data-status="placeholder"] .metric__value { color: var(--zy-color-brand-300); }
.proof-panel__body .link-arrow { margin-top: var(--zy-space-6); }
.proof__secondary { margin-top: var(--zy-layout-stack-lg); row-gap: var(--zy-layout-stack-lg); }
.quote { margin: 0; display: flex; flex-direction: column; justify-content: space-between; gap: var(--zy-space-8); padding: var(--zy-layout-card-padding); background: var(--zy-color-surface-page); border: var(--zy-border-hairline) solid var(--zy-color-border-default); border-radius: var(--zy-radius-md); }
.quote figcaption { display: flex; align-items: center; gap: var(--zy-space-3); color: var(--zy-color-text-secondary); }
.quote__avatar { width: 2.5rem; height: 2.5rem; flex: none; border-radius: var(--zy-radius-full); background: var(--zy-color-surface-muted); border: var(--zy-border-hairline) dashed var(--zy-color-border-signal); }
.logos { padding: var(--zy-layout-card-padding); background: var(--zy-color-surface-page); border: var(--zy-border-hairline) solid var(--zy-color-border-default); border-radius: var(--zy-radius-md); }
.logos__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--zy-space-2); margin-top: var(--zy-space-4); }
.logo-tile { display: grid; place-items: center; height: 4rem; border-radius: var(--zy-radius-sm); background: var(--zy-color-surface-subtle); border: var(--zy-border-hairline) dashed var(--zy-color-border-strong); color: var(--zy-color-text-tertiary); }
@media (min-width: 64em) {
  /* Full-width moment: the band runs edge to edge; the image bleeds to the
     viewport edge over grid columns 1–5, the story aligns to columns 7–12. */
  .proof-panel {
    --pp-c: min(100% - 2 * var(--zy-grid-margin), var(--zy-container-full));
    --pp-side: calc((100% - var(--pp-c)) / 2);
    margin-inline: 0; border-radius: 0;
    grid-template-columns:
      calc(var(--pp-side) + (var(--pp-c) + var(--zy-grid-gutter)) * 5 / 12 - var(--zy-grid-gutter))
      calc((var(--pp-c) + var(--zy-grid-gutter)) / 12 + var(--zy-grid-gutter))
      minmax(0, 1fr)
      var(--pp-side);
  }
  .proof-panel__media { grid-column: 1; min-height: 30rem; }
  .proof-panel__body { grid-column: 3; padding: var(--zy-space-16) 0; }
  .metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .metric--inverse + .metric--inverse { border-left: var(--zy-border-hairline) solid var(--zy-color-neutral-800); padding-left: var(--zy-grid-gutter); }
}

/* ======================================================== 12 TECHNOLOGY / TRUST */
.trust { border-top: var(--zy-border-hairline) solid var(--zy-color-border-subtle); }
.trust__grid { row-gap: var(--zy-space-12); align-items: center; }
.trust__content { order: 1; }
.trust__diagram { order: 2; margin: 0; }
.trust__diagram figcaption { display: flex; justify-content: center; margin-top: var(--zy-space-4); }
.layer:hover .g-layer { fill: var(--zy-color-brand-50); }
.trust__intro { margin-top: var(--zy-space-6); }
.pillars { margin-block: var(--zy-space-10) var(--zy-space-6); border-top: var(--zy-border-hairline) solid var(--zy-color-border-default); }
.pillar { display: grid; grid-template-columns: 1fr; gap: var(--zy-space-2); padding-block: var(--zy-space-6); border-bottom: var(--zy-border-hairline) solid var(--zy-color-border-default); }
.pillar__index { color: var(--zy-color-text-secondary); }
.trust__standards { display: flex; align-items: flex-start; gap: var(--zy-space-3); padding: var(--zy-space-4); margin-bottom: var(--zy-space-4); border: var(--zy-border-hairline) dashed var(--zy-color-border-strong); border-radius: var(--zy-radius-md); color: var(--zy-color-text-tertiary); }
.trust__standards .icon { width: 1rem; height: 1rem; margin-top: 2px; color: var(--zy-color-text-signal); }
@media (min-width: 48em) {
  .pillar { grid-template-columns: 11rem 1fr; column-gap: var(--zy-grid-gutter); }
  .pillar__index { grid-row: span 2; padding-top: 4px; }
}
@media (min-width: 64em) {
  .trust__content, .trust__diagram { order: 0; }
}

/* ======================================================= 13 INSIGHTS */
.insights { border-top: var(--zy-border-hairline) solid var(--zy-color-border-subtle); }
.insights__grid { row-gap: var(--zy-space-10); }
.res { display: block; }
.res__body { display: flex; flex-direction: column; gap: var(--zy-space-3); padding-top: var(--zy-space-5); }
.res__type { color: var(--zy-color-text-secondary); }
.res__title { transition: color var(--zy-motion-duration-micro) var(--zy-motion-easing-standard); }
.res:hover .res__title { color: var(--zy-color-text-signal); }
.res:hover .media-ph { background-position: 12px 12px; }
.res:focus-visible { border-radius: var(--zy-radius-md); }
.insights__list { display: grid; gap: var(--zy-space-8); }
@media (min-width: 48em) and (max-width: 63.99em) { .insights__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--zy-grid-gutter); } }
@media (min-width: 64em) {
  .insights__list { align-content: start; }
  .res--compact { display: grid; grid-template-columns: 11rem 1fr; gap: var(--zy-grid-gutter); align-items: start; padding-bottom: var(--zy-space-8); border-bottom: var(--zy-border-hairline) solid var(--zy-color-border-default); }
  .res--compact .res__body { padding-top: 0; }
  .res--compact .media-ph__label span { display: none; }
}

/* ======================================================== 14 FINAL CTA */
.cta { position: relative; overflow: hidden; text-align: center; padding-block: var(--zy-layout-section-space-lg); background: var(--zy-color-surface-subtle); }
.cta__inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; }
.cta .section-marker { justify-content: center; }
.cta__title { max-width: 14ch; }
.cta__lead { margin-top: var(--zy-space-6); max-width: 40rem; color: var(--zy-color-text-secondary); }
.cta .actions { margin-top: var(--zy-space-10); justify-content: center; }
.cta__graphic { position: absolute; inset: 0; display: none; pointer-events: none; }
.cta__graphic .gfx { width: 100%; height: 100%; }
@media (min-width: 64em) { .cta__graphic { display: block; } }

/* ======================================================== 15 FOOTER */
.site-footer { background: var(--zy-color-surface-subtle); border-top: var(--zy-border-hairline) solid var(--zy-color-border-default); padding-top: var(--zy-space-16); padding-bottom: var(--zy-space-20); }
.site-footer__grid { row-gap: var(--zy-space-12); }
.site-footer__brand p { margin-top: var(--zy-space-4); max-width: 22rem; color: var(--zy-color-text-secondary); }
.site-footer__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--zy-space-8) var(--zy-grid-gutter); }
.site-footer__col h2 { margin-bottom: var(--zy-space-3); color: var(--zy-color-text-secondary); }
.site-footer__col a { display: flex; align-items: center; min-height: 2.75rem; transition: color var(--zy-motion-duration-micro) var(--zy-motion-easing-standard); }
.site-footer__col a:hover { color: var(--zy-color-text-signal); }
.site-footer__bottom { display: flex; flex-direction: column; gap: var(--zy-space-4); margin-top: var(--zy-space-12); padding-top: var(--zy-space-6); border-top: var(--zy-border-hairline) solid var(--zy-color-border-default); color: var(--zy-color-text-secondary); }
.site-footer__legal { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--zy-space-6); }
.site-footer__legal a, .site-footer__social { display: inline-flex; align-items: center; min-height: 2.75rem; }
.site-footer__legal a:hover { color: var(--zy-color-text-signal); }
@media (min-width: 48em) {
  .site-footer__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .site-footer__bottom { flex-direction: row; justify-content: space-between; align-items: center; }
}
@media (min-width: 80em) { .site-footer__cols { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

/* Reduced motion: signal elements hidden rather than frozen mid-path */
@media (prefers-reduced-motion: reduce) {
  .g-signal, .engine__pulse { display: none; }
  .js .hero__visual .g-flow { stroke-dashoffset: 0; }
}

/* ==================================================== DEEP CONTENT LAYOUTS */
/* 06 capabilities — rich panels */
.cap__group { display: block; color: var(--zy-color-text-signal); }
.cap__detail { display: block; }
@media (min-width: 48em) { .cap__detail { grid-template-columns: none; } }
.cap__what { display: flex; flex-direction: column; gap: var(--zy-space-2); max-width: 44rem; }
.cap__what .t-label { color: var(--zy-color-text-secondary); }
.cap__facts { display: grid; gap: var(--zy-space-5) var(--zy-grid-gutter); margin-top: var(--zy-space-6); padding-top: var(--zy-space-6); border-top: var(--zy-border-hairline) solid var(--zy-color-border-subtle); }
.cap__facts dt { color: var(--zy-color-text-secondary); }
.cap__facts dd { margin-top: var(--zy-space-2); }
.cap__outcome dd { font-weight: var(--zy-font-weight-medium); }
.cap__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--zy-space-3) var(--zy-space-4); margin-top: var(--zy-space-6); }
.cap__related { display: flex; flex-wrap: wrap; gap: var(--zy-space-2); }
.cap__related .chip { min-height: 1.75rem; color: var(--zy-color-text-secondary); }
.cap__foot .link-arrow { margin-left: auto; }
@media (min-width: 48em) { .cap__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 47.99em) { .cap__foot .link-arrow { margin-left: 0; } }

/* 07 teams */
.teams { border-top: var(--zy-border-hairline) solid var(--zy-color-border-subtle); }
.teams__grid { row-gap: var(--zy-space-10); }
.team { padding-top: var(--zy-space-6); border-top: 2px solid var(--zy-color-text-primary); }
.team__num { display: block; color: var(--zy-color-text-signal); margin-bottom: var(--zy-space-4); }
.team__role { margin-top: var(--zy-space-1); }
.team__title { margin-top: var(--zy-space-5); max-width: 22ch; }
.team__points { margin-top: var(--zy-space-6); border-top: var(--zy-border-hairline) solid var(--zy-color-border-default); }
.team__points li { position: relative; padding: var(--zy-space-3) 0 var(--zy-space-3) var(--zy-space-6); border-bottom: var(--zy-border-hairline) solid var(--zy-color-border-subtle); }
.team__points li::before { content: ""; position: absolute; left: 2px; top: 1.15em; width: 8px; height: 8px; border-radius: var(--zy-radius-full); border: 1.5px solid var(--zy-color-signal-node); }

/* 08 solutions — use-case index */
.solutions { border-top: var(--zy-border-hairline) solid var(--zy-color-border-subtle); }
.usecases { margin-top: var(--zy-layout-section-space-sm); }
.usecases__title { margin-bottom: var(--zy-space-4); }
.usecases__table { width: 100%; border-collapse: collapse; }
.usecases__table thead th { text-align: left; color: var(--zy-color-text-secondary); padding: 0 var(--zy-space-4) var(--zy-space-3) 0; border-bottom: var(--zy-border-hairline) solid var(--zy-color-border-strong); }
.usecases__table tbody th, .usecases__table td { text-align: left; vertical-align: top; padding: var(--zy-space-4) var(--zy-space-4) var(--zy-space-4) 0; border-bottom: var(--zy-border-hairline) solid var(--zy-color-border-default); }
.usecases__goal { font-weight: var(--zy-font-weight-medium); width: 26%; }
.usecases__guard { color: var(--zy-color-text-secondary); width: 30%; }
.usecases__table tbody tr { transition: background-color var(--zy-motion-duration-micro) var(--zy-motion-easing-standard); }
.usecases__table tbody tr:hover { background: var(--zy-color-surface-subtle); }
@media (max-width: 47.99em) {
  .usecases__table thead { display: none; }
  .usecases__table, .usecases__table tbody, .usecases__table tr, .usecases__table th, .usecases__table td { display: block; width: auto; }
  .usecases__table tr { padding-block: var(--zy-space-4); border-bottom: var(--zy-border-hairline) solid var(--zy-color-border-default); }
  .usecases__table tbody th, .usecases__table td { border: 0; padding: 0 0 var(--zy-space-1); }
}

/* 09 industries — six tabs + patterns */
@media (min-width: 48em) { .selector__tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--zy-space-2); } }
.usecase__patterns { display: flex; flex-wrap: wrap; align-items: center; gap: var(--zy-space-2) var(--zy-space-3); margin-bottom: var(--zy-space-4); }
.usecase__patterns ul { display: flex; flex-wrap: wrap; gap: var(--zy-space-2); }
.usecase__patterns .chip { min-height: 1.75rem; color: var(--zy-color-text-primary); }

/* 15 questions */
.faq { border-top: var(--zy-border-hairline) solid var(--zy-color-border-subtle); }
.faq .grid { row-gap: var(--zy-space-8); }
.faq__list { border-top: var(--zy-border-hairline) solid var(--zy-color-border-default); }
.faq__item { border-bottom: var(--zy-border-hairline) solid var(--zy-color-border-default); }
.faq__q { display: flex; align-items: center; justify-content: space-between; gap: var(--zy-space-4); min-height: 3.5rem; padding-block: var(--zy-space-4); cursor: pointer; list-style: none; transition: color var(--zy-motion-duration-micro) var(--zy-motion-easing-standard); }
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--zy-color-text-signal); }
.faq__icon { position: relative; flex: none; width: 2rem; height: 2rem; border-radius: var(--zy-radius-full); border: var(--zy-border-hairline) solid var(--zy-color-border-default); }
.faq__icon::before, .faq__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; background: currentColor; transform: translate(-50%, -50%); transition: transform var(--zy-motion-duration-component) var(--zy-motion-easing-standard); }
.faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq__item[open] .faq__icon { border-color: var(--zy-color-border-signal); }
.faq__item[open] .faq__icon::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq__a { padding: 0 var(--zy-space-12) var(--zy-space-6) 0; max-width: 46rem; }
/* tab labels never exceed their column (long single words at 320px) */
.selector__tab { min-width: 0; overflow-wrap: anywhere; }

/* ==================================================== WEBSITE VOICE LAYOUTS */
/* Presentation (review) mode reads like a live site: section numbers and
   internal art-direction / conceptual captions show only in ?dev mode. */
html[data-mode="review"] .section-marker__index,
html[data-mode="review"] .section-marker__rule,
html[data-mode="review"] .hero__marker .t-label,
html[data-mode="review"] .context__numeral,
html[data-mode="review"] .concept-marker,
html[data-mode="review"] .hero__visual-label,
html[data-mode="review"] .value__media-label,
html[data-mode="review"] .scale__rule { display: none; }
html[data-mode="review"] .section-marker { gap: 0; }
html[data-mode="review"] .section-marker > :last-child { color: var(--zy-color-text-signal); }
@media (min-width: 64em) { html[data-mode="review"] .context__grid > .lg-span-9 { grid-column: 1 / span 10; } }

/* capabilities: lead + feature trio */
.cap__lead { max-width: 44rem; }
.cap__features { display: grid; gap: var(--zy-space-5) var(--zy-grid-gutter); margin-block: var(--zy-space-6); padding-top: var(--zy-space-6); border-top: var(--zy-border-hairline) solid var(--zy-color-border-subtle); }
.cap__feature { padding-left: var(--zy-space-4); border-left: 2px solid var(--zy-color-signal-node); }
.cap__feature-title { margin-bottom: var(--zy-space-1); }
@media (min-width: 48em) { .cap__features { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* solutions: more ways teams use Zyntel */
.usecases__title { margin-bottom: var(--zy-space-6); }
.usecases__grid { display: grid; gap: var(--zy-grid-gutter); }
.usecase-card { padding: var(--zy-space-5); border: var(--zy-border-hairline) solid var(--zy-color-border-default); border-radius: var(--zy-radius-md); background: var(--zy-color-surface-page); transition: border-color var(--zy-motion-duration-micro) var(--zy-motion-easing-standard), transform var(--zy-motion-duration-component) var(--zy-motion-easing-standard); }
.usecase-card:hover { border-color: var(--zy-color-border-signal); transform: translateY(-2px); }
.usecase-card__title { margin-bottom: var(--zy-space-2); }
@media (min-width: 48em) { .usecases__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) { .usecases__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* industries: paragraph + points */
.selector__text { margin-bottom: var(--zy-space-6); max-width: 36rem; }
.selector__points { border-top: var(--zy-border-hairline) solid var(--zy-color-border-default); margin-bottom: var(--zy-space-6); }
.selector__points li { position: relative; padding: var(--zy-space-3) 0 var(--zy-space-3) var(--zy-space-6); border-bottom: var(--zy-border-hairline) solid var(--zy-color-border-subtle); font-weight: var(--zy-font-weight-medium); }
.selector__points li::before { content: ""; position: absolute; left: 0; top: 50%; width: 12px; height: 1.5px; background: var(--zy-color-signal-node); }
.cap__trigger { grid-template-columns: auto minmax(0, 1fr) auto; } .cap__name { overflow-wrap: anywhere; } @media (max-width: 29.99em) { .cap__trigger { gap: var(--zy-space-4); } }

/* ==========================================================================
   Brand palette moments (60 / 30 / 10)
   CTA = the single coral-red band (10%). Footer + proof = deep plum (30%).
   ========================================================================== */
.cta { background: linear-gradient(120deg, var(--zy-color-brand-700) 0%, var(--zy-color-brand-600) 45%, var(--zy-color-brand-500) 100%); color: var(--zy-color-neutral-0); }
.cta .section-marker, .cta .section-marker__index, .cta .eyebrow { color: var(--zy-color-brand-50); }
.cta .section-marker__rule, .cta .eyebrow::before { background: rgba(255, 255, 255, 0.5); }
.cta__title .signal, .cta__title .c-signal { color: var(--zy-color-plum-900); }
.cta__lead { color: rgba(255, 255, 255, 0.88); }
.cta .btn--primary { background: var(--zy-color-neutral-0); color: var(--zy-color-brand-700); }
.cta .btn--primary:hover { background: var(--zy-color-brand-50); }
.cta .btn--secondary { border-color: rgba(255, 255, 255, 0.7); color: var(--zy-color-neutral-0); }
.cta .btn--secondary:hover { background: rgba(255, 255, 255, 0.12); }
.cta .btn:focus-visible { outline-color: var(--zy-color-neutral-0); }
.cta__graphic .gfx * { stroke: rgba(255, 255, 255, 0.28); }
.cta__graphic .g-node, .cta__graphic .g-halo { fill: var(--zy-color-neutral-0); stroke: none; }

/* Footer: white so the black logo holds (logo colour is always black) */
.site-footer { background: var(--zy-color-surface-page); border-top: var(--zy-border-hairline) solid var(--zy-color-border-default); }
.site-footer__col a:hover, .site-footer__legal a:hover { color: var(--zy-color-text-signal); }

.proof-panel__label, .link-arrow--inverse { color: var(--zy-color-brand-300); }
.proof-panel__summary { color: var(--zy-color-plum-200); }