/*
 * Homepage (templates/home.php, T3-D1-C; 02 "Ana sayfa", 11 §1/§2/§5/§9). Loaded only on the
 * homepage (Web\HomeController `styles`). Colours only via tokens.css; the only gradients are the
 * named var(--grad-…) tokens (11 §1). Motion: transform/opacity only, only under
 * prefers-reduced-motion: no-preference; the stage's moving state exists only under .stage-live
 * (assets/js/home-talk.js) — without it the stage is its finished, complete state.
 * 2026-10-30 (owner): the type and spirit of the codex "Agent evreni" study on the light canvas —
 * mono labels, large light-weight display titles, hairline grids, the radar network console.
 */

/* ---- page frame: full-width bands, centred content ---- */
.home { max-width: none; padding: 0; gap: 0; }
.home-in { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 var(--space-5); }
.home > .home-in:first-child { padding-top: var(--space-5); }
.home-band { padding: var(--space-7) 0; border-top: 1px solid var(--line); }
.home-band.band-tint-teal, .home-band.band-tint-cobalt { border-top-color: var(--grid-line); }
.home-forms { display: flex; flex-direction: column; gap: var(--space-6); padding-top: var(--space-7); padding-bottom: var(--space-7); border-top: 1px solid var(--line); }
.home-final-in { padding-top: var(--space-6); padding-bottom: var(--space-7); }
.home-section-head { gap: var(--space-2); margin-bottom: var(--space-5); max-width: 44em; }
.home-section-lead { font-size: 16px; }

/* ---- hero (2026-10-30, codex "Agent evreni" on the light canvas): mono eyebrow + edition line,
   a full-width display headline, lead + chips left / the action right, then the wide agent-network
   console and a mono foot line ---- */
.home-hero { background: var(--grad-sky); padding: var(--space-7) 0 0; }
.home-hero-in { display: flex; flex-direction: column; }
.hero-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-5); margin-bottom: 28px; }
.home-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 12px; font-weight: 500; line-height: 1.3; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.hero-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 3px var(--teal-surface); flex: none; }
.hero-edition { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.home-title { font-size: clamp(38px, 6.2vw, 78px); font-weight: 500; letter-spacing: -0.045em; line-height: 1.04; max-width: 14.5em; overflow-wrap: break-word; text-wrap: balance; }
.home-title-em { color: var(--accent); }
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .home-title-em { background-image: var(--grad-wire); -webkit-background-clip: text; background-clip: text; color: transparent; }
}
.hero-sub { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-5) var(--space-7); align-items: end; margin: 28px 0 36px; }
.hero-copy { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.home-lead { font-size: 18px; line-height: 1.6; color: var(--text-2); max-width: 38em; }
.hero-act { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-2); min-width: 0; }
.hero-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.hero-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: var(--radius-control); border: 1px solid var(--line-strong); background: var(--surface-1); color: var(--text-2); font-family: var(--font-label); font-size: 14px; font-weight: 600; text-decoration: none; }
.hero-chip:hover { border-color: var(--accent); color: var(--accent); }
.hero-chip .ic { width: 16px; height: 16px; flex: none; }
.hero-chip-customers .ic { color: var(--signal-hi); }
.hero-chip-partners .ic { color: var(--accent); }
.hero-chip-tech .ic { color: var(--teal); }
.home-cta { gap: var(--space-4); align-items: center; justify-content: flex-end; }
.home-how { display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap); font-family: var(--font-label); font-size: 15px; font-weight: 600; text-decoration: none; }
.home-how .ic { width: 16px; height: 16px; }
.home-how:hover { text-decoration: underline; }
.home-note { font-size: 13px; color: var(--text-3); text-align: right; }
.hero-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-6); padding: 22px 0 26px; font-family: var(--font-mono); font-size: 11px; font-weight: 500; line-height: 1.4; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.hero-foot a { display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap); color: var(--accent); text-decoration: none; }
.hero-foot a:hover { text-decoration: underline; }
.hero-foot .ic { width: 14px; height: 14px; }
@media (pointer: coarse) { .hero-chip { min-height: 44px; } }

/* ---- the agent-network console (figure#home-talk): a top strip with the controls, the map
   (radar on your agent, the three agents and two quiet peers, wires as boxes whose diagonal is
   the line) next to the conversation panel, the step strip, the caption ---- */
.home-stage { position: relative; margin: 0; min-width: 0; display: flex; flex-direction: column; background: var(--surface-1); border: 1px solid var(--line-strong); border-radius: var(--radius-card); box-shadow: var(--shadow-overlay); overflow: clip; }
.home-stage::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; z-index: 3; background: var(--grad-wire); }
.stage-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); padding: 10px var(--space-4); background: var(--surface-2); border-bottom: 1px solid var(--line); }
.stage-label { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); }
.stage-controls { display: flex; flex-wrap: wrap; gap: 6px; }
.stage-controls[hidden] { display: none; }
.stage-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-control); background: var(--surface-1); color: var(--text-2); font-family: var(--font-mono); font-size: 11.5px; font-weight: 500; cursor: pointer; }
.stage-btn:hover { border-color: var(--accent); color: var(--accent); }
.stage-btn[aria-pressed="true"] { background: var(--accent-surface); border-color: var(--accent-line); color: var(--accent); }
.stage-btn .ic { width: 14px; height: 14px; flex: none; }
.stage-ic { display: inline-flex; }
.stage-ic-play, .home-stage.is-paused .stage-ic-pause { display: none; }
.home-stage.is-paused .stage-ic-play { display: inline-flex; }
/* Pause (WCAG 2.2.2): the whole scene stops — radar, typing dots, live dot, mascots, packets */
.home-stage.is-paused *, .home-stage.is-paused *::before, .home-stage.is-paused *::after { animation-play-state: paused !important; }
@media (pointer: coarse) { .stage-btn { min-height: 44px; min-width: 44px; justify-content: center; } }
.stage-body { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); align-items: start; }
/* without the script the panel is the whole transcript: the map stays in view beside it */
.home-stage:not(.stage-live) .stage-map { position: sticky; top: var(--space-4); }

/* the map: agent positions are custom properties, so the phone layout only moves the points */
.stage-map { --bx: 20%; --by: 30%; --ax: 50%; --ay: 55%; --cx: 80%; --cy: 30%; --p1x: 15%; --p1y: 84%; --p2x: 85%; --p2y: 84%;
  position: relative; height: 470px; overflow: hidden; isolation: isolate; align-self: start; background-color: var(--tint-cobalt); border-right: 1px solid var(--line); }
.map-coord { position: absolute; left: var(--space-4); z-index: 1; font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.map-coord-top { top: 14px; }
.map-coord-bottom { bottom: 14px; }
.radar { position: absolute; left: var(--ax); top: var(--ay); width: 0; height: 0; z-index: -1; }
.radar-ring { position: absolute; border-radius: 50%; border: 1px solid var(--grid-line); }
.radar-ring-1 { width: 190px; height: 190px; margin: -95px 0 0 -95px; border-color: var(--accent-line); }
.radar-ring-2 { width: 360px; height: 360px; margin: -180px 0 0 -180px; }
.radar-ring-3 { width: 560px; height: 560px; margin: -280px 0 0 -280px; }
.radar-sweep { display: none; position: absolute; width: 460px; height: 460px; margin: -230px 0 0 -230px; border-radius: 50%; overflow: hidden; }
.radar-sweep::before, .radar-sweep::after { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--accent) 6%, transparent); clip-path: polygon(50% 50%, 50% 0, 8% 0); }
.radar-sweep::after { clip-path: polygon(50% 50%, 50% 0, 34% 0); }
.radar-edge { position: absolute; left: 50%; top: 0; width: 1px; height: 50%; background: var(--accent-line); }
.stage-live .radar-sweep { display: block; }

.st-wire { position: absolute; z-index: 0; pointer-events: none; }
.st-wire-ab { left: var(--bx); top: var(--by); width: calc(var(--ax) - var(--bx)); height: calc(var(--ay) - var(--by)); }
.st-wire-ac { left: var(--ax); top: var(--cy); width: calc(var(--cx) - var(--ax)); height: calc(var(--ay) - var(--cy)); }
.st-wire-p1 { left: var(--p1x); top: var(--ay); width: calc(var(--ax) - var(--p1x)); height: calc(var(--p1y) - var(--ay)); }
.st-wire-p2 { left: var(--ax); top: var(--ay); width: calc(var(--p2x) - var(--ax)); height: calc(var(--p2y) - var(--ay)); }
.st-wire-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.st-wire-svg line { fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.st-wire-base { stroke: var(--line-strong); stroke-width: 1.5; stroke-dasharray: 4 6; }
.st-wire-peer .st-wire-base { stroke: var(--grid-dot); stroke-dasharray: 2 6; }
.st-wire-line { stroke: var(--accent); stroke-width: 2; opacity: 0; }
.st-wire-core { stroke: var(--tint-cobalt); stroke-width: 2; opacity: 0; }
.st-wire.is-traced .st-wire-line { opacity: 1; }
.st-wire-ac.is-traced .st-wire-line { stroke: var(--signal); stroke-dasharray: 7 5; }
.st-wire-ab.is-double .st-wire-line { stroke-width: 7; }
.st-wire-ab.is-double .st-wire-core { opacity: 1; }
.st-wire .packet-track { inset: 0; height: auto; }
.st-wire-ac .packet, .st-wire-p1 .packet { top: auto; bottom: -5px; }
.st-wire .packet { background: var(--circuit); box-shadow: 0 0 0 4px var(--focus-halo); }
.st-wire.from-a .packet { background: var(--accent); }
.st-wire.from-b .packet { background: var(--teal); }
.st-wire.from-c .packet { background: var(--signal); }
.st-wire-peer .packet { width: 7px; height: 7px; left: -3px; top: -3px; box-shadow: none; }
.st-wire-p1 .packet { top: auto; bottom: -3px; }
.st-wire-tag { position: absolute; left: 66%; top: 26%; transform: translate(-50%, -50%); z-index: 1; padding: 3px 8px; border-radius: var(--radius-badge); border: 1px solid var(--teal-line); background: var(--surface-1); font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--teal); white-space: nowrap; opacity: 0; }
.st-wire-ab.is-double .st-wire-tag { opacity: 1; }

.st-node { position: absolute; z-index: 2; left: var(--x); top: var(--y); width: 172px; margin: calc(var(--orb) / -2) 0 0 -86px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.st-node-a { --x: var(--ax); --y: var(--ay); --orb: 88px; }
.st-node-b { --x: var(--bx); --y: var(--by); --orb: 66px; }
.st-node-c { --x: var(--cx); --y: var(--cy); --orb: 66px; }
.st-orb { position: relative; display: grid; place-items: center; width: var(--orb); height: var(--orb); border-radius: var(--radius-card); background: var(--surface-1); border: 1.5px solid var(--teal); box-shadow: 0 0 0 5px var(--surface-1), var(--shadow-overlay); transition: box-shadow var(--dur) var(--ease-out); }
.st-node-a .st-orb { border: 2px solid var(--accent); }
.st-node-a .st-orb::before { content: ""; position: absolute; inset: -15px; border: 1px solid var(--accent-line); border-radius: var(--radius-card); }
.st-node-c .st-orb { border: 1.5px dashed var(--signal); background: var(--signal-surface); }
.st-node.is-speaking .st-orb { box-shadow: 0 0 0 5px var(--accent-halo), var(--shadow-overlay); }
.st-badge { position: absolute; right: -9px; top: -9px; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--surface-1); font-family: var(--font-mono); font-size: 10px; font-style: normal; font-weight: 500; line-height: 20px; text-align: center; color: var(--text-3); }
.st-node-text { display: flex; flex-direction: column; min-width: 0; }
.st-node-text strong { font-family: var(--font-display); font-size: 14px; font-weight: 600; line-height: 1.25; color: var(--text); }
.st-node-text small { font-size: 12px; line-height: 1.3; color: var(--text-3); }
.st-core-tag { padding: 5px 8px; border-radius: var(--radius-badge); border: 1px solid var(--accent-line); background: var(--accent-surface); font-family: var(--font-mono); font-size: 9.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); white-space: nowrap; }
.st-peer { position: absolute; z-index: 1; width: 130px; margin: -19px 0 0 -65px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.st-peer-p1 { left: var(--p1x); top: var(--p1y); }
.st-peer-p2 { left: var(--p2x); top: var(--p2y); }
.st-peer-orb { display: grid; place-items: center; width: 38px; height: 38px; border-radius: var(--radius-control); border: 1px solid var(--grid-dot); background: var(--surface-1); color: var(--text-4); }
.st-peer-orb .ic { width: 18px; height: 18px; }
.st-peer-text { font-size: 11.5px; color: var(--text-3); }

/* the conversation panel */
.stage-panel { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; padding: var(--space-4) var(--space-4) var(--space-4) var(--space-5); }
.stage-status { display: none; align-items: center; gap: var(--space-2); min-height: 22px; padding-bottom: var(--space-2); border-bottom: 1px solid var(--line); font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .06em; color: var(--text-3); }
.talk-dots { display: inline-flex; gap: 3px; }
.talk-dots span { width: 5px; height: 5px; border-radius: 50%; background: var(--agent); opacity: .35; }

.stage-window { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.stage-acts { display: flex; flex-direction: column; gap: var(--space-3); }
.stage-act { display: flex; flex-direction: column; gap: var(--space-2); }
.stage-act-title { display: flex; align-items: center; gap: var(--space-2); margin: 2px 0; font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.stage-act-title::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--grad-fade); }
.talk-log { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.talk-msg { max-width: 90%; display: flex; flex-direction: column; gap: 3px; padding: 9px 12px; border-radius: var(--radius-control); border: 1px solid var(--accent-line); background: var(--accent-surface); }
.talk-msg p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--text); }
.talk-msg.from-a { align-self: flex-end; }
.talk-msg.from-b { align-self: flex-start; background: var(--teal-surface); border-color: var(--teal-line); }
.talk-msg.from-c { align-self: flex-start; background: var(--signal-surface); border-color: var(--signal-line); }
.talk-msg.talk-ask { border-style: dashed; border-color: var(--signal); }
.talk-who { font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.talk-src { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--teal); }
.talk-answer .talk-src { color: var(--signal-ink); }
.talk-src .ic { width: 12px; height: 12px; flex: none; }
.stage-decision, .stage-result { position: relative; display: flex; flex-direction: column; gap: 4px; padding: var(--space-3); border: 1px solid var(--line-strong); border-radius: var(--radius-control); background: var(--surface-1); }
.stage-decision::before, .stage-result::before { content: ""; position: absolute; left: -1px; top: -1px; bottom: -1px; width: 3px; border-radius: var(--radius-control) 0 0 var(--radius-control); background: var(--grad-wire); }
.stage-result-opp::before { background: var(--signal); }
.stage-decision p, .stage-result p { margin: 0; font-size: 13px; line-height: 1.45; color: var(--text-2); }
.stage-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--space-2); }
.stage-card-head strong { font-family: var(--font-display); font-size: 14px; font-weight: 600; color: var(--text); }
.stage-card-head .ic { width: 18px; height: 18px; color: var(--accent); flex: none; }
.stage-result-opp .stage-card-head .ic { color: var(--signal-hi); }
.stage-card-head .pill { min-height: 22px; padding: 0 8px; font-size: 11px; }
.stage-pill-fit, .talk-fit { background: var(--teal-surface); color: var(--teal); border-color: var(--teal-line); }
.stage-pill-tag { background: var(--accent-surface); color: var(--accent); border-color: var(--accent-line); }
.stage-results { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
.stage-intro { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-control); background: var(--accent-surface); border: 1px dashed var(--accent-line); color: var(--accent); font-family: var(--font-label); font-size: 13px; font-weight: 600; } /* a sample step, not a button */
.stage-intro .ic { width: 18px; height: 18px; flex: none; }

/* the step strip and the caption */
.stage-steps { list-style: none; margin: 0; padding: 12px var(--space-4); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-2) var(--space-6); border-top: 1px solid var(--line); background: var(--surface-2); font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); }
.stage-step { display: inline-flex; align-items: center; gap: var(--space-2); transition: color var(--dur) var(--ease-out); }
.stage-step::before { content: ""; width: 6px; height: 6px; background: var(--teal); flex: none; transition: background-color var(--dur) var(--ease-out); }
.stage-step:last-child { color: var(--accent); }
.stage-live .stage-step:not(.is-done):not(.is-now) { color: var(--text-3); }
.stage-live .stage-step:not(.is-done):not(.is-now)::before { background: var(--line-strong); }
.stage-live .stage-step.is-now { color: var(--accent); }
.stage-live .stage-step.is-now::before { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-halo); }
.stage-caption { padding: 8px var(--space-4) 10px; background: var(--surface-2); font-size: 12px; color: var(--text-3); text-align: center; }

/* playing (home-talk.js): fixed window, newest message at the bottom, steps appear in turn */
.stage-live .stage-status { display: flex; }
.stage-live .stage-window { height: 392px; overflow: hidden; justify-content: flex-start; }
.stage-live [data-at]:not(.is-on) { display: none; }
.stage-live.is-results .stage-acts { display: none; }
.stage-live.is-results .stage-window { justify-content: safe center; } /* never clips the first result if the results run taller than the window */
.stage-live.is-results .talk-dots { visibility: hidden; } /* finished: no working indicator (no fake activity) */
.stage-live .st-node .mascot { transition: opacity var(--dur-settle) var(--ease-settle); }
.stage-live .st-node.is-dim .mascot { opacity: .4; } /* only the decorative figure dims: the labels keep 4.5:1 */
.stage-live .stage-window, .stage-live .st-wire { transition: opacity 900ms var(--ease-out); }
.stage-live.is-fading .stage-window, .stage-live.is-fading .st-wire:not(.st-wire-peer) { opacity: 0; }

/* ---- section heads (codex "Agent evreni"): numbered mono eyebrow, large display title ---- */
.home { counter-reset: home-sec; }
.home-section-head .eyebrow, .home-report-copy > .eyebrow { display: inline-flex; gap: var(--space-2); font-family: var(--font-mono); font-size: 11.5px; font-weight: 500; letter-spacing: .12em; color: var(--accent); }
.home-band .home-section-head .eyebrow::before, .home-report-copy > .eyebrow::before { counter-increment: home-sec; content: counter(home-sec, decimal-leading-zero) " /"; color: var(--text-3); }
.home-section-head h2, .home-report-copy h2 { font-size: clamp(30px, 4vw, 46px); font-weight: 500; letter-spacing: -0.04em; line-height: 1.08; text-wrap: balance; }
.home-section-head { margin-bottom: var(--space-6); }
.home-idx { position: absolute; right: var(--space-5); top: var(--space-5); font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .1em; color: var(--text-3); }

/* ---- #iki-yon: one agent, two directions — one hairline grid ---- */
.two-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border: 1px solid var(--line-strong); border-radius: var(--radius-card); overflow: hidden; }
.two-list .two-card { position: relative; gap: var(--space-3); padding: var(--space-6); border: 0; border-left: 1px solid var(--line-strong); border-top: 1px solid var(--line-strong); border-radius: 0; margin: -1px 0 0 -1px; scroll-margin-top: var(--space-6); transition: background-color var(--dur) var(--ease-out); }
.two-list .two-card:hover { background: var(--bg); }
.two-card:target { outline: 2px solid var(--accent-line); outline-offset: -2px; }
.two-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-bottom: var(--space-4); border-radius: var(--radius-control); border: 1px solid var(--signal-line); background: var(--signal-surface); color: var(--signal-hi); }
.two-partners .two-icon { border-color: var(--accent-line); background: var(--accent-surface); color: var(--accent); }
.two-tech .two-icon { border-color: var(--teal-line); background: var(--teal-surface); color: var(--teal); }
.two-icon .ic { width: 22px; height: 22px; }
.two-card h3 { font-size: 22px; font-weight: 500; letter-spacing: -0.025em; }
.two-card p { font-size: 15px; line-height: 1.65; }

/* ---- #nasil: five steps on the teal band; the --grad-wire line runs over their tops ---- */
.flow-list { list-style: none; margin: 0; padding: 0; position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-5); }
.flow-list::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--grad-wire); transform-origin: left center; }
.flow-step { position: relative; display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; padding-top: var(--space-5); }
.flow-step::before { content: ""; position: absolute; left: 0; top: -3px; width: 7px; height: 7px; background: var(--accent); }
.flow-agent::before, .flow-agents::before { background: var(--teal); }
.flow-both::before { background: var(--signal); }
.flow-icon { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-control); background: var(--surface-1); border: 1px solid var(--accent-line); color: var(--accent); }
.flow-icon .ic { width: 20px; height: 20px; }
.flow-agent .flow-icon, .flow-agents .flow-icon { border-color: var(--teal-line); color: var(--teal); }
.flow-both .flow-icon { border-color: var(--signal-line); color: var(--signal-hi); }
.flow-actor { align-self: flex-start; margin-top: var(--space-2); font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.flow-agent .flow-actor, .flow-agents .flow-actor { color: var(--teal); }
.flow-both .flow-actor { color: var(--signal-ink); }
.flow-step h3 { font-size: 19px; font-weight: 500; letter-spacing: -0.02em; }
.flow-step p { font-size: 14px; line-height: 1.6; }
.home-stats { list-style: none; margin: var(--space-7) 0 0; padding: var(--space-5) 0 0; border-top: 1px solid var(--grid-line); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); max-width: 640px; }
.home-stat { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; font-size: 13px; line-height: 1.45; color: var(--text-3); }
.home-stat-num { font-family: var(--font-display); font-size: 30px; font-weight: 500; letter-spacing: -0.03em; line-height: 1.1; color: var(--teal); }
.home-stat:nth-child(2) .home-stat-num { color: var(--signal-hi); }

/* ---- #analiz: the sample partnership analysis ---- */
.home-report { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--space-7); align-items: center; }
.home-report-copy { gap: var(--space-3); }
.home-report-points { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); font-size: 15px; color: var(--text-2); }
.home-report-points li { display: flex; gap: var(--space-3); align-items: flex-start; }
.home-report-points .ic { flex: none; width: 20px; height: 20px; color: var(--teal); margin-top: 2px; }
.home-report-points strong { color: var(--text); }
.report-card { gap: var(--space-4); padding: var(--space-5); border-color: var(--line-strong); box-shadow: var(--shadow-overlay); }
.report-head { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); align-items: flex-start; justify-content: space-between; padding-bottom: var(--space-3); border-bottom: 1px solid var(--line); }
.report-head .stack { gap: 2px; }
.report-parties { font-family: var(--font-display); font-size: 17px; font-weight: 500; letter-spacing: -0.015em; }
.report-label { font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.report-fit { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; }
.report-block { display: flex; flex-direction: column; gap: var(--space-1); }
.report-block p { margin: 0; font-size: 14px; color: var(--text-2); }
.report-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); font-size: 14px; color: var(--text); }
.report-list li { display: flex; gap: var(--space-2); align-items: flex-start; }
.report-list .ic { flex: none; width: 16px; height: 16px; color: var(--teal); margin-top: 3px; }
.report-src { display: block; font-size: 12px; color: var(--text-3); }
.report-qa { display: flex; flex-direction: column; gap: 2px; }
.report-qa strong { color: var(--teal); font-weight: 600; }
.report-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.report-grid .report-block { padding: var(--space-3); border-radius: var(--radius-control); border: 1px solid var(--line); background: var(--bg); }
.report-grid .report-open { background: var(--signal-surface); border-color: var(--signal-line); }
.report-foot { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; justify-content: space-between; padding-top: var(--space-3); border-top: 1px solid var(--line); }
.report-rec { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-label); font-size: 13px; font-weight: 600; color: var(--accent); }
.report-rec .ic { width: 18px; height: 18px; }
.report-agenda { display: inline-flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.report-agenda .chip { min-height: 26px; padding: 0 10px; font-size: 12px; }
.report-meter { position: relative; height: 8px; border-radius: 3px; background: var(--line); overflow: hidden; }
.report-meter span { position: absolute; inset: 0 18% 0 0; border-radius: 3px; background: var(--grad-wire); transform-origin: left center; }

/* ---- #agent: the mascot inside its permission orbit, next to what the agent does and doesn't ---- */
.home-agent-in { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr); gap: var(--space-7); align-items: center; }
.home-agent-figure { display: flex; flex-direction: column; align-items: center; gap: var(--space-5); margin: 0; }
.agent-art { position: relative; width: 100%; max-width: 400px; aspect-ratio: 1; display: grid; place-items: center; }
.agent-orbit { position: absolute; inset: 13%; border-radius: 50%; border: 1px dashed var(--accent-line); box-shadow: 0 0 0 34px color-mix(in srgb, var(--accent) 4%, transparent), 0 0 0 68px color-mix(in srgb, var(--accent) 2.5%, transparent); }
.agent-orbit::after { content: ""; position: absolute; top: 13%; left: 13%; width: 9px; height: 9px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 4px var(--teal-surface); }
.agent-art > .mascot { position: relative; z-index: 1; padding: var(--space-5); background: var(--surface-1); border: 1px solid var(--grid-line); border-radius: var(--radius-card); box-shadow: var(--shadow-overlay); }
.agent-tag { position: absolute; z-index: 2; padding: 9px 11px; border-radius: var(--radius-control); border: 1px solid var(--accent-line); background: var(--surface-1); box-shadow: var(--shadow-overlay); font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); white-space: nowrap; }
.agent-tag-1 { top: 9%; left: 0; }
.agent-tag-2 { top: 46%; right: 0; }
.agent-tag-3 { bottom: 9%; left: 8%; border-color: var(--teal-line); color: var(--teal); }
.home-agent-caption { display: flex; gap: var(--space-2); align-items: flex-start; max-width: 24em; font-size: 14px; line-height: 1.5; color: var(--text-2); }
.home-agent-caption .super-badge { flex: none; }
.home-agent-caption .super-badge .ic { width: 16px; height: 16px; }
.home-agent-copy { gap: 0; min-width: 0; }
.agent-rules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.agent-rule { gap: var(--space-3); border-color: var(--line-strong); }
.agent-rule h3 { display: flex; align-items: center; gap: var(--space-2); font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
.agent-rule h3 .ic { width: 20px; height: 20px; flex: none; }
.agent-does h3, .agent-does h3 .ic { color: var(--teal); }
.agent-donts h3, .agent-donts h3 .ic { color: var(--signal-hi); }
.agent-rule ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-3); font-size: 14.5px; line-height: 1.5; color: var(--text-2); }
.agent-rule li { position: relative; padding-left: 18px; }
.agent-rule li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; background: var(--teal); }
.agent-donts li::before { background: var(--signal); }

/* ---- #guven: four rules, one hairline grid ---- */
.why-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border: 1px solid var(--line-strong); border-radius: var(--radius-card); overflow: hidden; }
.why-list .why-item { position: relative; gap: var(--space-3); padding: var(--space-5); border: 0; border-left: 1px solid var(--line-strong); border-top: 1px solid var(--line-strong); border-radius: 0; margin: -1px 0 0 -1px; }
.why-item > .ic { width: 40px; height: 40px; padding: 9px; margin-bottom: var(--space-3); border-radius: var(--radius-control); border: 1px solid var(--teal-line); background: var(--teal-surface); color: var(--teal); }
.why-item h3 { font-size: 18px; font-weight: 500; letter-spacing: -0.02em; }
.why-item p { font-size: 14px; line-height: 1.6; }

/* ---- search, results, FAQ, closing (kept from T1S-Y / T2-D) ---- */
.home-search { gap: var(--space-5); scroll-margin-top: var(--space-5); padding: var(--space-6); }
.home-search-form { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: flex-start; }
.home-search-field { flex: 1 1 280px; min-width: 0; }
.home-search-form > .btn { margin-top: 27px; min-height: 44px; }
.home-search-field input { font-size: 16px; min-height: 44px; }
.home-results { display: flex; flex-direction: column; gap: var(--space-3); }
.home-result-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius-card); overflow: hidden; }
.home-result { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); padding: var(--space-3) var(--space-4); background: var(--surface-1); border-bottom: 1px solid var(--line); }
.home-result:last-child { border-bottom: 0; }
.home-result:hover { background: var(--bg); }
.home-result-name { display: flex; flex-direction: column; gap: 2px; flex: 1 1 140px; min-width: 0; overflow-wrap: anywhere; }
.home-result-domain { font-size: 13px; color: var(--text-3); }
.home-result-action { margin: 0 0 0 auto; display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.home-result-name a { color: inherit; text-decoration: none; }
.home-result-name a:hover { color: var(--accent); text-decoration: underline; }
.home-faq .home-in { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.45fr); gap: var(--space-5) var(--space-7); align-items: start; }
.home-faq .home-section-head { margin-bottom: 0; }
.faq-list { max-width: 860px; border-top: 1px solid var(--line-strong); }
.faq-item { border-bottom: 1px solid var(--line-strong); }
.faq-item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: var(--tap); padding: var(--space-4) 0; font-family: var(--font-display); font-size: 17px; font-weight: 500; letter-spacing: -0.01em; color: var(--text); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; flex: none; font-family: var(--font-mono); font-size: 18px; line-height: 1; color: var(--accent); transition: transform var(--dur-fast) var(--ease-out); }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item summary:hover { color: var(--accent); }
.faq-item summary:focus-visible { outline: 2px solid var(--focus, var(--accent)); outline-offset: 2px; }
.faq-item p { margin: 0 0 var(--space-4); font-size: 15px; line-height: 1.65; max-width: 46em; }
.home-final { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-5); padding: var(--space-7) var(--space-6); background: var(--tint-cobalt); border-color: var(--accent-line); }
.home-final .stack { gap: var(--space-2); flex: 1 1 320px; }
.home-final h2 { font-size: clamp(28px, 3.6vw, 42px); font-weight: 500; letter-spacing: -0.04em; line-height: 1.1; }

@media (max-width: 960px) {
  .home-agent-in { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .two-list { grid-template-columns: minmax(0, 1fr); }
  .why-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .home-report { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .flow-list { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .flow-list::before { top: 20px; bottom: 20px; left: 19px; right: auto; width: 1px; height: auto; transform-origin: center top; }
  .flow-step { padding: 0 0 0 60px; min-height: 44px; }
  .flow-step::before { display: none; }
  .flow-icon { position: absolute; left: 0; top: 0; }
  .flow-actor { margin-top: 0; }
  .home-faq .home-in { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .hero-sub { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .hero-act { align-items: stretch; }
  .home-cta { justify-content: flex-start; }
  .home-note { text-align: left; }
  .stage-body { grid-template-columns: minmax(0, 1fr); }
  .home-stage:not(.stage-live) .stage-map { position: relative; top: auto; }
  .stage-map { --bx: 18%; --by: 27%; --cx: 82%; --cy: 27%; --ax: 50%; --ay: 60%; height: 330px; border-right: 0; border-bottom: 1px solid var(--line); }
  .st-peer, .st-wire-peer, .map-coord-bottom, .st-core-tag { display: none; }
  .st-node { width: 136px; margin-left: -68px; }
  .radar-ring-1 { width: 140px; height: 140px; margin: -70px 0 0 -70px; }
  .radar-ring-2 { width: 260px; height: 260px; margin: -130px 0 0 -130px; }
  .radar-ring-3 { width: 400px; height: 400px; margin: -200px 0 0 -200px; }
  .radar-sweep { width: 320px; height: 320px; margin: -160px 0 0 -160px; }
  .stage-panel { padding: var(--space-4); }
}
@media (max-width: 720px) {
  .home-in { padding: 0 var(--space-4); }
  .home-hero { padding: var(--space-5) 0 0; }
  .hero-top { margin-bottom: var(--space-4); }
  .hero-edition { display: none; }
  .hero-sub { margin: var(--space-5) 0 var(--space-5); }
  .home-band { padding: var(--space-6) 0; }
  .home-forms { padding-top: var(--space-6); padding-bottom: var(--space-6); }
  .home-lead { font-size: 16px; }
  .home-cta > .btn { flex: 1 1 100%; }
  .hero-foot { flex-direction: column; align-items: flex-start; gap: var(--space-1); padding: var(--space-4) 0 var(--space-5); }
  .talk-msg { max-width: 94%; }
  .stage-live .stage-window { height: 384px; } /* both results + the introduction line fit at 320px (EN) */
  .stage-steps { gap: var(--space-2) var(--space-4); font-size: 10px; }
  .agent-rules { grid-template-columns: minmax(0, 1fr); }
  .agent-art { max-width: 320px; }
  .agent-art > .mascot svg { width: 140px; height: 140px; }
  .two-list .two-card { padding: var(--space-5); }
  .home-search { padding: var(--space-5); }
  .home-search-form > .btn { margin-top: 0; width: 100%; }
  .home-result-action { margin-left: 0; width: 100%; }
  .home-result-action .btn { width: 100%; }
  .home-final { padding: var(--space-5); }
  .home-final > .btn { width: 100%; }
  .report-card { padding: var(--space-4); }
  .report-grid { grid-template-columns: minmax(0, 1fr); }
  .home-stat-num { font-size: 22px; }
}
@media (max-width: 560px) {
  .stage-btn-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .stage-btn { min-width: 36px; justify-content: center; }
  .stage-map { --by: 21%; --cy: 21%; --ay: 64%; height: 300px; }
  .st-node-text strong { font-size: 13px; }
  .home-eyebrow { font-size: 11px; letter-spacing: .06em; }
  .st-node-text small { display: none; }
  /* the outer agents' labels grow inward, so a long label (EN) never runs off the map */
  .st-node-b, .st-node-c { width: 110px; }
  .st-node-b { margin-left: calc(var(--orb) / -2); align-items: flex-start; text-align: left; }
  .st-node-c { margin-left: calc(var(--orb) / 2 - 110px); align-items: flex-end; text-align: right; }
  .st-node-b, .st-node-c { --orb: 52px; }
  .st-node-a { --orb: 66px; }
  .st-node .mascot svg { width: 36px; height: 36px; }
  .st-node-a .mascot svg { width: 48px; height: 48px; }
  .st-wire-tag { display: none; }
  .why-list { grid-template-columns: minmax(0, 1fr); }
  .agent-tag { font-size: 9.5px; padding: 7px 9px; }
  .home-stats { grid-template-columns: minmax(0, 1fr); }
  .home-stat { flex-direction: row; align-items: baseline; gap: var(--space-3); }
  .home-stat-num { min-width: 3.2em; }
}

@media (prefers-reduced-motion: no-preference) {
  .motion .hero-dot { animation: live 1.8s ease-out 2; } /* finite (≤ 5 s): outside the stage there is no pause control (WCAG 2.2.2) */
  .stage-live .radar-sweep { animation: radar-spin 9s linear infinite; }
  .stage-live .st-node-a .st-orb { animation: orb-float 6s var(--ease-in-out) infinite; }
  .stage-live .st-node-a .st-orb::before { animation: orb-halo 3.2s var(--ease-out) infinite; }
  .stage-live .st-wire-peer .packet { animation: packet-fade 4.2s var(--ease-in-out) infinite; }
  .stage-live .st-wire-p1 .packet-track { animation: wire-up 4.2s var(--ease-in-out) infinite; }
  .stage-live .st-wire-p2 .packet-track { animation: wire-down 4.2s var(--ease-in-out) 2.1s infinite reverse; }
  .stage-live .st-wire-p2 .packet { animation-delay: 2.1s; }
  .stage-live [data-at].is-on { animation: rise 450ms var(--ease-settle) both; }
  .stage-live .talk-dots span { animation: stage-dot 1.2s ease-in-out infinite; }
  .stage-live .talk-dots span:nth-child(2) { animation-delay: .15s; }
  .stage-live .talk-dots span:nth-child(3) { animation-delay: .3s; }
  .stage-live .stage-window { scroll-behavior: smooth; }
  .stage-live .stage-status-text { transition: opacity 250ms var(--ease-out); }
  .stage-live .stage-status.is-swap .stage-status-text { opacity: 0; }
  .stage-live .st-wire.is-tracing .st-wire-line { animation: fade var(--dur-trace) var(--ease-settle) both; }
  .stage-live .st-wire.is-sending .packet { animation: packet-fade 900ms var(--ease-in-out) both; }
  .stage-live .st-wire-ab.is-sending .packet-track, .stage-live .st-wire-p2.is-sending .packet-track { animation: wire-down 900ms var(--ease-in-out) both; }
  .stage-live .st-wire-ac.is-sending .packet-track { animation: wire-up 900ms var(--ease-in-out) both; }
  .stage-live .st-wire.is-sending.is-reverse .packet-track { animation-direction: reverse; }
  .stage-live .stage-intro.is-on .ic { animation: tick 400ms var(--ease-settle) both; }
  .motion .home-agent-figure.is-in .agent-orbit { animation: radar-spin 4.8s var(--ease-settle) 1; } /* one turn as the section arrives */
  /* "Siz yokken": the connecting line draws, then the steps come in one by one */
  .motion .flow-list[data-anim] { opacity: 1; transform: none; }
  .motion .flow-list::before { transform: scaleX(0); transition: transform 1100ms var(--ease-out) 150ms; }
  .motion .flow-list.is-in::before { transform: none; }
  .motion .flow-step { opacity: 0; transform: translateY(10px); transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out); }
  .motion .flow-list.is-in .flow-step { opacity: 1; transform: none; }
  .motion .flow-list.is-in .flow-step:nth-child(2) { transition-delay: 220ms; }
  .motion .flow-list.is-in .flow-step:nth-child(3) { transition-delay: 440ms; }
  .motion .flow-list.is-in .flow-step:nth-child(4) { transition-delay: 660ms; }
  .motion .flow-list.is-in .flow-step:nth-child(5) { transition-delay: 880ms; }
  .motion .report-card .report-meter span { transform: scaleX(0); transition: transform 1000ms var(--ease-out) 450ms; }
  .motion .report-card.is-in .report-meter span { transform: none; }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 900px) {
  .motion .flow-list::before { transform: scaleY(0); }
  .motion .flow-list.is-in::before { transform: none; }
}
@keyframes stage-dot { 0%, 100% { opacity: .3; transform: none; } 50% { opacity: 1; transform: translateY(-2px); } }
@keyframes radar-spin { from { transform: none; } to { transform: rotate(360deg); } }
@keyframes orb-float { 0%, 100% { transform: none; } 50% { transform: translateY(-5px); } }
@keyframes orb-halo { 0% { opacity: .9; transform: scale(.94); } 100% { opacity: 0; transform: scale(1.12); } }
@keyframes wire-down { from { transform: none; } to { transform: translate(100%, 100%); } }
@keyframes wire-up { from { transform: none; } to { transform: translate(100%, -100%); } }
@keyframes packet-fade { 0% { opacity: 0; } 12%, 85% { opacity: 1; } 100% { opacity: 0; } }