/* ==========================================================================
   CallYar — Sections
   00 Signal · 01 Noise→Signal · 02 Capabilities · 03 Live call
   04 Scale · 05 Value · 06 Built for · 07 Contact · Footer
   The dots themselves are drawn by js/signal.js onto one fixed canvas;
   the empty boxes below (…__line, …__mark, …__glyph) are where they land.
   ========================================================================== */

/* -------------------------------------------------------------- 00 SIGNAL */
.hero {
  position: relative;
  min-block-size: 100svh;
  display: grid;
  grid-template-rows: auto minmax(160px, 1fr) auto auto;
  padding: clamp(6.5rem, 15vh, 9rem) var(--gutter) clamp(1.5rem, 4vh, 2.5rem);
  isolation: isolate;
}
.hero::before {
  /* a barely-there field of dots: the silence the signal crosses */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(circle, rgba(243, 243, 239, 0.085) 1px, transparent 1.5px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 70% 55% at 50% 58%, #000 20%, transparent 80%);
  mask-image: radial-gradient(ellipse 70% 55% at 50% 58%, #000 20%, transparent 80%);
}
.hero > * { inline-size: 100%; max-inline-size: var(--max); margin-inline: auto; }
.hero__top { display: grid; gap: var(--s-5); }
.hero__title {
  font-size: var(--fs-hero);
  font-weight: var(--w-heavy);
  line-height: var(--lh-head);
  letter-spacing: var(--track-head);
}
.hero__title .thin { font-weight: var(--w-thin); color: var(--muted); }
.hero__line { min-block-size: 160px; }

.hero__under {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-5);
  flex-wrap: wrap;
}
.caption {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  font-size: var(--fs-small);
  color: var(--muted);
  min-block-size: 1.6em;
}
.caption__live {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--fg);
  font-size: var(--fs-micro);
  font-weight: var(--w-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
:root[lang="fa"] .caption__live { letter-spacing: 0; font-size: var(--fs-small); }
.caption__live i { inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--accent); animation: blink 1.4s steps(2, jump-none) infinite; }
@keyframes blink { 50% { opacity: 0.2; } }
.caption__text { transition: opacity var(--t-short) var(--ease-out); }
.caption__text.is-out { opacity: 0; }

.mic-wrap { display: grid; justify-items: end; gap: var(--s-2); }
.mic {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  min-block-size: 44px;
  padding: 0 var(--s-4) 0 var(--s-3);
  border-radius: var(--r-pill);
  box-shadow: inset 0 0 0 1px var(--rule);
  font-size: var(--fs-small);
  font-weight: var(--w-med);
  transition: background var(--t-short), color var(--t-short), box-shadow var(--t-short);
}
:root[dir="rtl"] .mic { padding: 0 var(--s-3) 0 var(--s-4); }
.mic:hover { box-shadow: inset 0 0 0 1px var(--fg); }
.mic[aria-pressed="true"] { background: var(--fg); color: var(--bg); }
.mic__icon { display: grid; place-items: center; grid-auto-flow: column; gap: 2px; inline-size: 28px; block-size: 28px; border-radius: 50%; box-shadow: inset 0 0 0 1px currentColor; }
.mic__icon i { inline-size: 2px; block-size: 6px; border-radius: 2px; background: currentColor; }
.mic__icon i:nth-child(2) { block-size: 11px; }
.mic[aria-pressed="true"] .mic__icon i { animation: mt 0.7s var(--ease-in-out) infinite alternate; }
.mic[aria-pressed="true"] .mic__icon i:nth-child(2) { animation-delay: -0.3s; }
.mic__note { font-size: var(--fs-micro); color: var(--muted); max-inline-size: 34ch; text-align: end; min-block-size: 1.4em; }
:root[lang="fa"] .mic__note { font-size: var(--fs-small); }

.hero__bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-6);
  flex-wrap: wrap;
  margin-block-start: clamp(2rem, 6vh, 4rem);
  padding-block-start: var(--s-5);
  border-block-start: 1px solid var(--rule);
}
.hero__ctas { display: flex; flex-wrap: wrap; gap: var(--s-2); }

@media (max-width: 699px) {
  .hero { grid-template-rows: auto minmax(130px, 1fr) auto auto; }
  .mic-wrap { justify-items: start; }
  .mic__note { text-align: start; }
}

/* -------------------------------------------------------------- 01 NOISE → SIGNAL */
.noise { position: relative; block-size: 300vh; }
.noise__sticky {
  position: sticky;
  inset-block-start: 0;
  block-size: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  justify-items: center;
  padding: clamp(5.5rem, 12vh, 7rem) var(--gutter) clamp(2rem, 6vh, 3.5rem);
}
.noise__kicker { justify-self: start; }
.noise__mark {
  align-self: center;
  inline-size: min(20vw, 29vh);
  aspect-ratio: 187 / 155;
}
.noise__beats {
  position: relative;
  inline-size: min(100%, 22em);
  block-size: 4.2em;
  font-size: var(--fs-h2);
  text-align: center;
}
:root[lang="fa"] .noise__beats { block-size: 4.6em; }
.beat {
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  font-weight: var(--w-light);
  line-height: 1.4;
  text-wrap: balance;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--t-med) var(--ease-out), transform var(--t-med) var(--ease-out);
}
:root[lang="fa"] .beat { line-height: 1.8; }
.beat.is-on { opacity: 1; transform: none; }
.beat b { font-weight: var(--w-heavy); }
.noise__progress { inline-size: 120px; block-size: 1px; background: var(--rule); margin-block-start: var(--s-5); position: relative; }
.noise__progress i { position: absolute; inset: 0; background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; }
:root[dir="rtl"] .noise__progress i { transform-origin: 100% 50%; }
@media (max-width: 699px) { .noise__mark { inline-size: min(46vw, 26vh); } }

/* -------------------------------------------------------------- 02 CAPABILITIES */
.caps { position: relative; }
.caps__track { position: relative; block-size: calc(100svh + var(--steps, 7) * 52vh); }
.caps__sticky {
  position: sticky;
  inset-block-start: 0;
  block-size: 100svh;
  max-inline-size: calc(var(--max) + 2 * var(--gutter));
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  grid-template-rows: auto 1fr auto;
  grid-template-areas: "glyph head" "glyph list" "glyph index";
  column-gap: clamp(2rem, 7vw, 8rem);
  padding: clamp(5.5rem, 13vh, 7.5rem) var(--gutter) clamp(1.5rem, 5vh, 3rem);
}
.caps__head { grid-area: head; display: grid; gap: var(--s-4); }
.caps__title { font-size: var(--fs-h3); font-weight: var(--w-light); color: var(--muted); }
.caps__glyph {
  grid-area: glyph;
  align-self: center;
  justify-self: center;
  inline-size: min(100%, 56vh);
  aspect-ratio: 1;
}
.caps__list { grid-area: list; position: relative; align-self: stretch; min-block-size: 20rem; }
.cap {
  position: absolute;
  inset-inline: 0;
  inset-block-start: 50%;
  display: grid;
  gap: var(--s-4);
  opacity: 0;
  visibility: hidden;
  transform: translateY(calc(-50% + 28px));
  transition: opacity var(--t-med) var(--ease-out), transform var(--t-med) var(--ease-out), visibility 0s linear var(--t-med);
}
.cap.is-before { transform: translateY(calc(-50% - 28px)); }
.cap.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%);
  transition: opacity var(--t-med) var(--ease-out) 120ms, transform var(--t-med) var(--ease-out) 120ms, visibility 0s;
}
.cap__n { font-size: var(--fs-micro); color: var(--muted); letter-spacing: 0.1em; }
.cap__t {
  font-size: var(--fs-h2);
  font-weight: var(--w-heavy);
  line-height: var(--lh-head);
  letter-spacing: var(--track-head);
  max-inline-size: 16ch;
  text-wrap: balance;
}
.cap__l { font-size: var(--fs-lead); color: var(--muted); max-inline-size: 42ch; }
.cap__b {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-2) var(--s-5);
  padding-block-start: var(--s-4);
  border-block-start: 1px solid var(--rule);
  font-size: var(--fs-small);
}
.cap__b li { position: relative; padding-inline-start: 1rem; }
.cap__b li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.7em;
  inline-size: 4px; block-size: 4px;
  border-radius: 50%;
  background: currentColor;
}
:root[lang="fa"] .cap__b li::before { inset-block-start: 0.9em; }

.caps__index { grid-area: index; display: flex; gap: 2px; align-items: center; }
.caps__index button {
  position: relative;
  display: grid;
  place-items: center;
  min-inline-size: 44px;
  min-block-size: 44px;
  font-size: var(--fs-micro);
  color: var(--muted);
  transition: color var(--t-short);
}
.caps__index button::after {
  content: "";
  position: absolute;
  inset-block-end: 6px;
  inline-size: 4px; block-size: 4px;
  border-radius: var(--r-pill);
  background: currentColor;
  opacity: 0;
  transition: inline-size var(--t-short) var(--ease-spring), opacity var(--t-short);
}
.caps__index button:hover { color: var(--fg); }
.caps__index button[aria-current="step"] { color: var(--fg); font-weight: var(--w-bold); }
.caps__index button[aria-current="step"]::after { opacity: 1; inline-size: 16px; background: var(--accent); }

@media (max-width: 899px) {
  .caps__track { block-size: calc(100svh + var(--steps, 7) * 60vh); }
  .caps__sticky {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto 1fr auto;
    grid-template-areas: "head" "glyph" "list" "index";
    row-gap: var(--s-4);
    padding-block-start: 5rem;
  }
  .caps__title { display: none; }
  .caps__glyph { inline-size: min(56vw, 27vh); }
  .caps__list { min-block-size: 0; }
  .cap { inset-block-start: 0; transform: translateY(20px); gap: var(--s-3); }
  .cap.is-before { transform: translateY(-20px); }
  .cap.is-active { transform: none; }
  .cap__t { font-size: 1.45rem; }
  .cap__l { font-size: 0.9375rem; }
  .cap__b { grid-template-columns: 1fr; gap: 2px; font-size: 0.8125rem; padding-block-start: var(--s-3); }
  .caps__index { justify-content: space-between; }
}

/* -------------------------------------------------------------- 03 LIVE */
.live__head,
.integrate__head {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: var(--s-6);
  align-items: end;
  margin-block-end: clamp(2.5rem, 5vw, 4rem);
}
.live__head > div,
.integrate__head > div { display: grid; gap: var(--s-4); }
.integrate__head { margin-block-end: 0; }
.live__coda {
  margin-block-start: clamp(3rem, 7vw, 5.5rem);
  max-inline-size: 40ch;
  font-size: var(--fs-h3);
  font-weight: var(--w-light);
  line-height: 1.5;
  color: var(--muted);
  text-wrap: pretty;
}
:root[lang="fa"] .live__coda { line-height: 1.9; }
.live__coda b { color: var(--fg); font-weight: var(--w-heavy); }
.player { display: grid; gap: var(--s-5); }
.player__bar { display: flex; align-items: center; gap: var(--s-5); }
.player__play {
  display: grid;
  place-items: center;
  inline-size: 52px;
  block-size: 52px;
  border-radius: 50%;
  background: var(--fg);
  color: var(--bg);
  flex: none;
  transition: transform var(--t-short) var(--ease-spring);
}
.player__play:hover { transform: scale(1.06); }
.player__play:active { transform: scale(0.94); }
.player__play svg { inline-size: 20px; block-size: 20px; fill: currentColor; }
:root[dir="rtl"] .player__play .ic-play { transform: scaleX(-1); }
.player__play .ic-pause { display: none; }
.player.is-playing .ic-play { display: none; }
.player.is-playing .ic-pause { display: block; }
.player__legend { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); font-size: var(--fs-small); color: var(--muted); }
.player__legend > span { display: inline-flex; align-items: center; gap: var(--s-2); }
.player__time { margin-inline-start: auto; font-size: var(--fs-small); color: var(--muted); }
.player__note { font-size: var(--fs-micro); color: var(--muted); }
:root[lang="fa"] .player__note { font-size: var(--fs-small); }

.lg { inline-size: 9px; block-size: 9px; border-radius: 50%; flex: none; display: inline-block; }
.lg--ai { background: var(--accent); }
.lg--caller { box-shadow: inset 0 0 0 1.5px var(--fg); }

.wave {
  position: relative;
  block-size: clamp(110px, 13vw, 180px);
  border-block: 1px solid var(--rule);
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
.wave:active { cursor: grabbing; }
.wave__svg { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; overflow: visible; }
:root[dir="rtl"] .wave__svg { transform: scaleX(-1); }
.wave__svg .w-ai { fill: var(--fg); }
.wave__svg .w-caller { fill: none; stroke: var(--fg); stroke-width: 1.2; }
.wave__svg .w-off { fill: var(--fg); opacity: 0.18; }
.wave__svg .layer-dim { opacity: 0.24; }
.wave__head {
  position: absolute;
  inset-block: -10px;
  inset-inline-start: calc(var(--p, 0) * 100%);
  inline-size: 2px;
  margin-inline-start: -1px;
  background: var(--accent);
  pointer-events: none;
}
.wave__head::before {
  content: "";
  position: absolute;
  inset-block-start: -8px;
  inset-inline-start: -5px;
  inline-size: 12px;
  block-size: 22px;
  border-radius: var(--r-pill);
  background: var(--accent);
}
.wave:focus-visible { outline-offset: 6px; }

.player__body {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 5vw, 5rem);
  padding-block-start: var(--s-4);
}
.transcript { display: grid; gap: var(--s-4); align-content: start; }
.transcript__lines { display: grid; align-content: end; gap: var(--s-3); min-block-size: 12rem; }
:root[lang="fa"] .transcript__lines { min-block-size: 14rem; }
.tline {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: var(--s-4);
  color: var(--muted);
  animation: tline-in var(--t-med) var(--ease-out) both;
}
.tline.is-current { color: var(--fg); }
.tline__who { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--fs-micro); font-weight: var(--w-bold); letter-spacing: 0.08em; text-transform: uppercase; padding-block-start: 0.35em; }
:root[lang="fa"] .tline__who { letter-spacing: 0; font-size: var(--fs-small); padding-block-start: 0.1em; }
.tline__who .lg { inline-size: 7px; block-size: 7px; }
@keyframes tline-in { from { opacity: 0; transform: translateY(12px); } }
.transcript__full summary { cursor: pointer; font-size: var(--fs-small); color: var(--muted); min-block-size: 44px; display: inline-flex; align-items: center; text-decoration: underline; text-underline-offset: 4px; }
.transcript__full ol { display: grid; gap: var(--s-3); padding-block: var(--s-4); }
.transcript__full li { display: grid; grid-template-columns: 7rem 1fr; gap: var(--s-4); font-size: var(--fs-small); }

.intel { border-inline-start: 1px solid var(--rule); padding-inline-start: clamp(1.25rem, 3vw, 2.5rem); display: grid; gap: var(--s-4); align-content: start; }
.intel__list { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); margin: 0; }
.intel__row { display: grid; gap: var(--s-1); align-content: start; }
.intel__row--wide { grid-column: 1 / -1; }
.intel__row dt { font-size: var(--fs-micro); color: var(--muted); letter-spacing: 0.1em; text-transform: uppercase; }
:root[lang="fa"] .intel__row dt { letter-spacing: 0; font-size: var(--fs-small); }
.intel__row dd { margin: 0; min-block-size: 1.6em; font-weight: var(--w-med); }
.intel__wait { display: inline-flex; gap: 4px; padding-block-start: 0.6em; }
.intel__wait i { inline-size: 4px; block-size: 4px; border-radius: 50%; background: var(--muted); animation: wait 1.2s var(--ease-in-out) infinite; }
.intel__wait i:nth-child(2) { animation-delay: 0.15s; }
.intel__wait i:nth-child(3) { animation-delay: 0.3s; }
@keyframes wait { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }
.js .intel__val { display: none; }
.intel__row.is-on .intel__wait { display: none; }
.intel__row.is-on .intel__val { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); animation: tline-in var(--t-med) var(--ease-out) both; }
.meter { display: inline-flex; gap: 4px; }
.meter i { inline-size: 6px; block-size: 6px; border-radius: 50%; box-shadow: inset 0 0 0 1.2px var(--fg); transition: background var(--t-short); }
.meter i.is-on { background: var(--accent); box-shadow: none; }

@media (max-width: 899px) {
  .live__head, .integrate__head, .player__body { grid-template-columns: 1fr; }
  .intel { border-inline-start: 0; padding-inline-start: 0; border-block-start: 1px solid var(--rule); padding-block-start: var(--s-5); }
  .tline, .transcript__full li { grid-template-columns: 1fr; gap: var(--s-1); }
  .transcript__lines { min-block-size: 17rem; }
  .player__time { display: none; }
}

/* -------------------------------------------------------------- 04 SCALE */
.scale__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2.5rem, 7vw, 8rem); align-items: center; }
.scale__copy { display: grid; gap: var(--s-5); align-content: start; }
.scale__control { display: grid; gap: var(--s-1); margin-block-start: var(--s-4); padding-block-start: var(--s-5); border-block-start: 1px solid var(--rule); }
.scale__label { font-size: var(--fs-small); font-weight: var(--w-med); color: var(--muted); }
.scale__out { font-size: clamp(2.4rem, 4.6vw, 4.4rem); font-weight: var(--w-thin); line-height: 1.1; letter-spacing: -0.03em; }
:root[lang="fa"] .scale__out { letter-spacing: 0; }
.scale__ticks { display: flex; justify-content: space-between; font-size: var(--fs-micro); color: var(--muted); }
.scale__legend { display: grid; gap: var(--s-2); font-size: var(--fs-small); }
.scale__legend li { display: flex; align-items: center; gap: var(--s-3); }
.scale__viz { margin: 0; display: grid; gap: var(--s-3); }
.scale__canvas { inline-size: 100%; aspect-ratio: 1 / 1; }
.scale__cap { font-size: var(--fs-micro); color: var(--muted); }
:root[lang="fa"] .scale__cap { font-size: var(--fs-small); }

.range { -webkit-appearance: none; appearance: none; inline-size: 100%; block-size: 44px; background: transparent; cursor: pointer; --fill: 35%; }
.range::-webkit-slider-runnable-track {
  block-size: 4px;
  border-radius: var(--r-pill);
  background:
    linear-gradient(to right, var(--fg) var(--fill), transparent var(--fill)),
    radial-gradient(circle, var(--fg) 1.2px, transparent 1.6px) 0 50% / 9px 4px repeat-x;
}
:root[dir="rtl"] .range::-webkit-slider-runnable-track {
  background:
    linear-gradient(to left, var(--fg) var(--fill), transparent var(--fill)),
    radial-gradient(circle, var(--fg) 1.2px, transparent 1.6px) 0 50% / 9px 4px repeat-x;
}
.range::-moz-range-track { block-size: 4px; background: radial-gradient(circle, var(--fg) 1.2px, transparent 1.6px) 0 50% / 9px 4px repeat-x; }
.range::-moz-range-progress { block-size: 4px; border-radius: var(--r-pill); background: var(--fg); }
.range::-webkit-slider-thumb { -webkit-appearance: none; inline-size: 14px; block-size: 32px; margin-block-start: -14px; border-radius: var(--r-pill); background: var(--fg); box-shadow: 0 0 0 4px var(--bg); transition: transform var(--t-short) var(--ease-spring); }
.range::-moz-range-thumb { inline-size: 14px; block-size: 32px; border: 0; border-radius: var(--r-pill); background: var(--fg); box-shadow: 0 0 0 4px var(--bg); }
.range:active::-webkit-slider-thumb { transform: scaleY(0.85); }
.range:focus-visible { outline: 2px solid var(--fg); outline-offset: 6px; }
@media (max-width: 899px) { .scale__grid { grid-template-columns: 1fr; } }

/* -------------------------------------------------------------- 05 VALUE */
.value__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.value__head { display: grid; gap: var(--s-4); position: sticky; inset-block-start: 22vh; }
.value__title { font-size: var(--fs-h3); font-weight: var(--w-light); line-height: 1.4; color: var(--muted); max-inline-size: 22ch; }
:root[lang="fa"] .value__title { line-height: 1.8; }
.vline {
  --f: 0;
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  column-gap: var(--s-4);
  align-items: baseline;
  padding-block: clamp(1.6rem, 3.6vw, 3rem);
  border-block-start: 1px solid var(--rule);
}
.vline:last-child { border-block-end: 1px solid var(--rule); }
.vline__n { font-size: var(--fs-micro); color: color-mix(in srgb, var(--accent) calc(var(--f) * 100%), var(--muted)); font-weight: var(--w-bold); }
.vline__t { font-size: var(--fs-statement); line-height: 1.2; letter-spacing: var(--track-head); white-space: nowrap; }
.vline__vis { display: inline-block; font-weight: 200; }
.vline__d {
  grid-column: 2;
  margin-block-start: var(--s-6);
  font-size: var(--fs-small);
  color: var(--muted);
  max-inline-size: 54ch;
  opacity: calc(0.35 + var(--f) * 0.65);
}
@media (max-width: 899px) {
  .value__grid { grid-template-columns: 1fr; }
  .value__head { position: static; }
}
@media (max-width: 599px) {
  .vline__t { white-space: normal; }
  .vline { grid-template-columns: 1.8rem minmax(0, 1fr); }
}

/* -------------------------------------------------------------- 06 WHO */
.who__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2.5rem, 7vw, 8rem); align-items: start; }
.who__head { display: grid; gap: var(--s-4); position: sticky; inset-block-start: 16vh; }
.who__head .title { max-inline-size: 14ch; }
.who__glyph { inline-size: 132px; aspect-ratio: 1; margin-block-start: var(--s-6); }
.who__list { display: grid; gap: var(--s-6); }
.who__note { max-inline-size: 46ch; }
.directory { border-block-start: 1px solid var(--fg); }
.directory li { display: flex; align-items: baseline; gap: var(--s-4); padding-block: clamp(1rem, 1.8vw, 1.4rem); border-block-end: 1px solid var(--rule); }

/* channel pictograms — 9×9 dot glyphs that start moving once their row is revealed */
.ch-ic { inline-size: 26px; block-size: 26px; flex: none; align-self: center; overflow: visible; }
.ch-ic circle { fill: currentColor; transform-box: fill-box; transform-origin: center; }
.ch-ic circle:not(.c-s) { fill: var(--accent); }   /* the moving dots of each glyph are the live signal */
.directory li[data-soon] .ch-ic circle { fill: currentColor; }   /* not live yet → no signal colour */
.directory li:not(.is-in) .ch-ic,
.directory li:not(.is-in) .ch-ic * { animation-play-state: paused; }
.directory li[data-soon] .ch-ic { opacity: 0.55; }

.ic-phone { animation: ic-buzz 2.2s var(--ease-in-out) infinite; transform-origin: 50% 50%; }
.ic-phone .c-a { animation: ic-blink 2.2s var(--ease-in-out) infinite; }
.ic-phone .c-b { animation: ic-blink 2.2s var(--ease-in-out) infinite 0.18s; }
@keyframes ic-buzz { 0%, 30%, 100% { transform: none; } 5%, 15%, 25% { transform: rotate(-7deg); } 10%, 20% { transform: rotate(7deg); } }
@keyframes ic-blink { 0%, 45%, 100% { opacity: 0.12; } 12%, 30% { opacity: 1; } }

.ic-sms .c-1, .ic-sms .c-2, .ic-sms .c-3 { animation: ic-type 1.3s var(--ease-in-out) infinite; }
.ic-sms .c-2 { animation-delay: 0.15s; }
.ic-sms .c-3 { animation-delay: 0.3s; }
@keyframes ic-type { 0%, 60%, 100% { transform: translateY(0); opacity: 0.3; } 30% { transform: translateY(-1.6px); opacity: 1; } }

.ic-app .c-a { animation: ic-pop 2.8s var(--ease-spring) infinite; }
.ic-app .c-b { animation: ic-pop 2.8s var(--ease-spring) infinite 0.7s; }
@keyframes ic-pop { 0% { transform: scale(0); } 14%, 72% { transform: scale(1); } 86%, 100% { transform: scale(0); } }

.ic-voice .c-a, .ic-voice .c-b, .ic-voice .c-c, .ic-voice .c-d, .ic-voice .c-e { animation: ic-eq 0.9s var(--ease-in-out) infinite alternate; }
.ic-voice .c-b { animation-delay: -0.3s; }
.ic-voice .c-c { animation-delay: -0.6s; }
.ic-voice .c-d { animation-delay: -0.15s; }
.ic-voice .c-e { animation-delay: -0.45s; }
@keyframes ic-eq { from { transform: scale(0.35); } to { transform: scale(1); } }

.ic-send .c-1, .ic-send .c-2, .ic-send .c-3 { animation: ic-trail 1.4s linear infinite; }
.ic-send .c-2 { animation-delay: 0.2s; }
.ic-send .c-3 { animation-delay: 0.4s; }
.ic-send .c-h { animation: ic-blink 1.4s var(--ease-in-out) infinite 0.55s; }
:root[dir="rtl"] .ic-send { transform: scaleX(-1); }
@keyframes ic-trail { 0% { opacity: 0; transform: translateX(-2.5px); } 30% { opacity: 1; } 70%, 100% { opacity: 0; transform: translateX(2.5px); } }

.ic-chat .c-a { animation: ic-turn 2.4s var(--ease-in-out) infinite; }
.ic-chat .c-b { animation: ic-turn 2.4s var(--ease-in-out) infinite 1.2s; }
@keyframes ic-turn { 0%, 50%, 100% { opacity: 0.15; transform: scale(0.6); } 12%, 38% { opacity: 1; transform: scale(1); } }

.ic-net .c-s { opacity: 0.35; }
.ic-net .c-A, .ic-net .c-B, .ic-net .c-C, .ic-net .c-E { animation: ic-node 2.8s var(--ease-in-out) infinite; }
.ic-net .c-C { animation-delay: 0.7s; }
.ic-net .c-E { animation-delay: 1.4s; }
.ic-net .c-B { animation-delay: 2.1s; }
@keyframes ic-node { 0%, 40%, 100% { transform: scale(0.45); opacity: 0.4; } 15% { transform: scale(1); opacity: 1; } }

/* hover a channel: a signal runs down the dotted line towards its extension */
.directory li:hover .directory__lead { animation: lead-run 0.7s linear infinite; opacity: 0.85; }
@keyframes lead-run { to { background-position-x: 8px; } }
:root[dir="rtl"] .directory li:hover .directory__lead { animation-name: lead-run-rtl; }
@keyframes lead-run-rtl { to { background-position-x: -8px; } }
.directory__name { font-size: var(--fs-h3); font-weight: var(--w-med); line-height: 1.3; }
:root[lang="fa"] .directory__name { line-height: 1.7; }
.directory__lead { flex: 1 1 2rem; min-inline-size: 1.5rem; block-size: 3px; background: radial-gradient(circle, currentColor 1px, transparent 1.4px) 0 50% / 8px 3px repeat-x; opacity: 0.45; }
.directory__ext { font-size: var(--fs-micro); color: var(--muted); white-space: nowrap; }
:root[lang="fa"] .directory__ext { font-size: var(--fs-small); }
.directory__ext--soon { padding: 0.1em 0.7em; border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px var(--rule); }
@media (max-width: 899px) {
  .who__grid { grid-template-columns: 1fr; }
  .who__head { position: static; }
  .who__glyph { inline-size: 104px; margin-block-start: var(--s-3); }
}

/* -------------------------------------------------------------- 08 START — CALL THE ASSISTANT
   One object: the number, the line it lives on (the One Signal), and the disc that calls it.
   Beside it, the ledger of what the assistant collects — empty rows that fill as it listens. */
.contact { padding-block-end: clamp(5rem, 9vw, 8rem); }
.call {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  grid-template-areas: "head ." "obj ledger";
  column-gap: clamp(2.5rem, 6vw, 6.5rem);
  row-gap: clamp(2rem, 4vw, 3.25rem);
  align-items: start;
}
.call__head { grid-area: head; display: grid; gap: var(--s-4); }
.call__title { font-size: var(--fs-h2); font-weight: var(--w-heavy); line-height: 1.2; letter-spacing: var(--track-head); }
:root[lang="fa"] .call__title { line-height: 1.5; letter-spacing: 0; }
.call__title .thin { font-weight: var(--w-thin); color: var(--muted); }
.call__obj { grid-area: obj; display: grid; grid-template-columns: minmax(0, 1fr); min-inline-size: 0; container-type: inline-size; }

/* the number — the hero of the section */
.call__number { margin: 0; }
.call__digits {
  display: inline-flex;
  align-items: baseline;
  font-size: clamp(2.2rem, 5.6vw, 5.5rem);
  font-size: min(6.25rem, 14cqi);              /* sized to its own column: the whole number always fits */
  font-weight: var(--w-light);
  line-height: 1.12;
  letter-spacing: -0.01em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.call__gap { display: inline-block; inline-size: 0.5em; }
:root[lang="fa"] .call__digits { font-size: clamp(2rem, 4.6vw, 4.6rem); font-size: min(6.25rem, 11.3cqi); }   /* Persian digits run wider */
.call__d { display: inline-block; }
/* with JS the number is drawn as a halftone, like the footer clock (js/call-number.js); the text stays as the no-JS fallback */
.call__dots { display: none; color: var(--fg); max-inline-size: 100%; }
.has-dots-number .call__dots { display: block; }
.has-dots-number .call__digits { display: none; }

/* the line the number lives on: an empty box the One Signal's dots occupy */
.call__line { block-size: 78px; margin-block: var(--s-1) var(--s-4); }

/* the call disc — call ⇄ end call is one object turning over */
.call__controls { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-5) clamp(1.5rem, 4vw, 3rem); }
.callbtn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-4);
  color: var(--fg);
  text-decoration: none;
  border-radius: var(--r-pill);
  -webkit-tap-highlight-color: transparent;
}
.callbtn__disc {
  position: relative;
  display: grid;
  place-items: center;
  inline-size: 84px;
  block-size: 84px;
  flex: none;
  border-radius: 50%;
  background: var(--fg);
  color: var(--bg);
  box-shadow: inset 0 0 0 1.5px var(--fg);
  transition: background var(--t-med) var(--ease-out), color var(--t-med) var(--ease-out), transform var(--t-short) var(--ease-spring);
}
.callbtn__disc .ch-ic {
  inline-size: 30px; block-size: 30px;
  transition: transform 0.7s var(--ease-spring);
}
.callbtn__disc .ch-ic,
.callbtn__disc .ch-ic circle { animation: none; fill: currentColor; transition: opacity var(--t-short); }
.call[data-state="calling"] .callbtn__disc .ch-ic { animation: ic-buzz 1.1s var(--ease-in-out) infinite; }
.call[data-state="calling"] .callbtn__disc .c-a { animation: ic-blink 1.1s var(--ease-in-out) infinite; }
.call[data-state="calling"] .callbtn__disc .c-b { animation: ic-blink 1.1s var(--ease-in-out) infinite 0.12s; }
.call[data-state="talking"] .callbtn__disc .c-a,
.call[data-state="talking"] .callbtn__disc .c-b { opacity: 0; }
.callbtn:hover .callbtn__disc { transform: scale(1.05); }
.callbtn:active .callbtn__disc { transform: scale(0.94); }
.callbtn:focus-visible { outline: none; }
.callbtn:focus-visible .callbtn__disc { outline: 2px solid var(--fg); outline-offset: 5px; }
.callbtn__label {
  font-size: var(--fs-h3);
  font-weight: var(--w-bold);
  line-height: 1.3;
  background: linear-gradient(var(--accent), var(--accent)) 0 100% / 0% 2px no-repeat;
  transition: background-size var(--t-short) var(--ease-out);
  padding-block-end: 2px;
}
:root[dir="rtl"] .callbtn__label { background-position: 100% 100%; }
.callbtn:hover .callbtn__label, .callbtn:focus-visible .callbtn__label { background-size: 100% 2px; }

/* the line is alive: dotted rings leave the disc */
.callbtn__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px dotted var(--fg);
  opacity: 0;
  pointer-events: none;
  animation: ring-out 3.6s var(--ease-out) infinite;
}
.callbtn__ring + .callbtn__ring { animation-delay: 1.8s; }
@keyframes ring-out { 0% { transform: scale(1); opacity: 0.55; } 70%, 100% { transform: scale(1.85); opacity: 0; } }
.contact:not(.is-near) .callbtn__ring { animation-play-state: paused; }
.call[data-state="calling"] .callbtn__ring { animation-duration: 1.2s; }
.call[data-state="calling"] .callbtn__ring + .callbtn__ring { animation-delay: 0.6s; }
.call[data-state="talking"] .callbtn__ring,
.call[data-state="ended"] .callbtn__ring { animation: none; opacity: 0; }

/* in a call the disc turns into "end call": the handset rotates down, the disc empties */
.call[data-state="calling"] .callbtn__disc,
.call[data-state="talking"] .callbtn__disc { background: transparent; color: var(--fg); }
.call[data-state="talking"] .callbtn__disc .ch-ic { transform: rotate(135deg); }

/* status: one lamp, one sentence, a timer */
.call__status { position: relative; display: grid; min-inline-size: 0; }
.call__state { display: flex; align-items: flex-start; gap: var(--s-3); font-size: var(--fs-small); font-weight: var(--w-med); line-height: 1.6; min-block-size: 1.6em; }
.call__lamp { inline-size: 8px; block-size: 8px; flex: none; align-self: flex-start; margin-block-start: 0.55em; border-radius: 50%; background: var(--accent); animation: lamp 2.4s var(--ease-in-out) infinite; }
@keyframes lamp { 50% { opacity: 0.3; } }
.call[data-state="calling"] .call__lamp { animation-duration: 0.6s; }
.call[data-state="talking"] .call__lamp { animation: none; }
.call[data-state="talking"][data-turn="ai"] .call__lamp { animation: lamp-talk 0.5s var(--ease-in-out) infinite alternate; }
@keyframes lamp-talk { to { transform: scale(1.6); } }
.call[data-state="ended"] .call__lamp { animation: none; background: var(--muted); }
.call__state span { transition: opacity var(--t-short) var(--ease-out); }
.call__state span.is-out { opacity: 0; }
/* the meta row hangs below the status, so the status sentence always shares the disc's centre line */
.call__meta { position: absolute; inset-block-start: 100%; inset-inline-start: 0; display: flex; align-items: center; gap: var(--s-3); margin-block-start: var(--s-1); font-size: var(--fs-micro); color: var(--muted); white-space: nowrap; }
.call[data-state="idle"] .call__meta { display: none; }
:root[lang="fa"] .call__meta { font-size: var(--fs-small); }
.call__badge { padding: 0.05em 0.75em; border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px var(--rule); white-space: nowrap; }
.call__badge[hidden], .call__timer[hidden] { display: none; }
.call__timer { letter-spacing: 0.04em; color: var(--fg); }
.call__got { display: inline-flex; gap: 4px; }
.call__got i { inline-size: 5px; block-size: 5px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--muted); transition: background var(--t-short), box-shadow var(--t-short), transform var(--t-short) var(--ease-spring); }
.call__got i.is-on { background: var(--accent); box-shadow: none; transform: scale(1.2); }
.call[data-state="idle"] .call__got { display: none; }

.call__note { margin-block-start: var(--s-4); font-size: var(--fs-micro); color: var(--muted); }
:root[lang="fa"] .call__note { font-size: var(--fs-small); }
.call__preview { color: var(--fg); text-underline-offset: 3px; }
.call__preview[hidden] { display: none; }

/* the talk slot: the lead waits here, the conversation replaces it */
.call__talk { position: relative; display: grid; margin-block-start: var(--s-6); min-block-size: 8.5rem; }
.call__talk > * { grid-area: 1 / 1; }
.call__lead { transition: opacity var(--t-med) var(--ease-out), transform var(--t-med) var(--ease-out); }
.call:not([data-state="idle"]) .call__lead { opacity: 0; transform: translateY(-8px); pointer-events: none; }
.call__captions { display: grid; align-content: start; gap: var(--s-4); }
.cline { display: grid; gap: var(--s-1); transition: opacity var(--t-med) var(--ease-out); }
.cline.is-prev { opacity: 0.32; }
.cline.is-gone { display: none; }
.cline__who { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--fs-micro); font-weight: var(--w-bold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
:root[lang="fa"] .cline__who { letter-spacing: 0; font-size: var(--fs-small); }
.cline__text { font-size: var(--fs-h3); font-weight: var(--w-light); line-height: 1.45; max-inline-size: 36ch; text-wrap: pretty; }
:root[lang="fa"] .cline__text { line-height: 1.85; }
.cline__text b { font-weight: var(--w-bold); }
.cline__w { opacity: 0; transition: opacity 0.22s var(--ease-out); }
.cline__w.is-on { opacity: 1; }
.cline--caller .cline__text { color: var(--muted); }
.cline__got { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--fs-micro); color: var(--fg); animation: got-in 0.5s var(--ease-out) both; }
:root[lang="fa"] .cline__got { font-size: var(--fs-small); }
.cline__got i { inline-size: 5px; block-size: 5px; border-radius: 50%; background: var(--accent); flex: none; }
@keyframes got-in { from { opacity: 0; transform: translateY(4px); } }
.motion-off .cline__got { animation: none; }

/* the ledger: what the assistant asks for, then what it understood */
.ledger { grid-area: ledger; display: grid; gap: var(--s-4); }
.ledger__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); }
.ledger__title { font-size: var(--fs-small); font-weight: var(--w-bold); transition: opacity var(--t-short); }
.ledger__title.is-out { opacity: 0; }
.ledger__count { font-size: var(--fs-micro); color: var(--muted); }
:root[lang="fa"] .ledger__count { font-size: var(--fs-small); }
.ledger__list { margin: 0; border-block-start: 1px solid var(--fg); }
.ledger__row {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  padding-block: clamp(0.7rem, 1.2vw, 0.95rem);
  border-block-end: 1px solid var(--rule);
}
.ledger__row dt {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  flex: none;
  font-size: var(--fs-small);
  color: var(--muted);
  white-space: nowrap;
  transition: color var(--t-short);
}
.ledger__row dt::before {                /* each row's lamp: hollow while waiting, signal-lit once understood */
  content: "";
  inline-size: 6px; block-size: 6px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.2px var(--muted);
  transition: background var(--t-short), box-shadow var(--t-short), transform var(--t-short) var(--ease-spring);
}
.ledger__row dd { display: flex; align-items: baseline; gap: var(--s-3); flex: 1; min-inline-size: 0; margin: 0; }
.ledger__lead { flex: 1 1 1.5rem; min-inline-size: 1.5rem; block-size: 3px; background: radial-gradient(circle, currentColor 1px, transparent 1.4px) 0 50% / 8px 3px repeat-x; opacity: 0.28; }
.ledger__val { max-inline-size: 64%; font-size: var(--fs-body); font-weight: var(--w-med); line-height: 1.5; text-align: end; }
.ledger__val:empty { display: none; }
.ledger__row.is-asking dt { color: var(--fg); }
.ledger__row.is-asking dt::before { animation: lamp 0.8s var(--ease-in-out) infinite; box-shadow: inset 0 0 0 1.2px var(--fg); }
.ledger__row.is-asking .ledger__lead { animation: lead-run 0.7s linear infinite; opacity: 0.6; }
:root[dir="rtl"] .ledger__row.is-asking .ledger__lead { animation-name: lead-run-rtl; }
.ledger__row.is-got dt { color: var(--fg); }
.ledger__row.is-got dt::before { background: var(--accent); box-shadow: none; transform: scale(1.25); }
.ledger__row.is-new .ledger__val { animation: val-in 0.7s var(--ease-out) both; }
@keyframes val-in { from { clip-path: inset(0 0 0 100%); opacity: 0.2; } to { clip-path: inset(0 0 0 0); opacity: 1; } }
:root[dir="rtl"] .ledger__row.is-new .ledger__val { animation-name: val-in-rtl; }
@keyframes val-in-rtl { from { clip-path: inset(0 100% 0 0); opacity: 0.2; } to { clip-path: inset(0 0 0 0); opacity: 1; } }
.ledger__foot { display: grid; gap: var(--s-4); margin-block-start: var(--s-3); }
.ledger__done { font-size: var(--fs-small); color: var(--muted); max-inline-size: 46ch; }
.ledger__done[hidden] { display: none; }
.ledger__ctas { display: flex; flex-wrap: wrap; gap: var(--s-2); }

/* a dot of understanding: travels from what was said to where it is kept */
.call-fly {
  position: fixed;
  top: 0;
  left: 0;
  inline-size: 7px; block-size: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: var(--accent);
  z-index: 40;
  pointer-events: none;
}

@media (max-width: 899px) {
  .call { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "obj" "ledger"; }
  .ledger { margin-block-start: var(--s-4); }
}
@media (max-width: 599px) {
  .call__line { block-size: 60px; }
  .callbtn__disc { inline-size: 72px; block-size: 72px; }
  .callbtn__disc .ch-ic { inline-size: 26px; block-size: 26px; }
  .call__controls { gap: var(--s-4); }
  .call__status { flex-basis: 100%; padding-inline-start: calc(72px + var(--s-4)); }   /* under the label: one column beside the disc */
  .call__meta { position: static; margin-block-start: var(--s-2); }
  .call__talk { min-block-size: 10.5rem; }
  .ledger__val { max-inline-size: 58%; font-size: var(--fs-small); }
}

/* reduced motion: every state is still shown, nothing travels */
.motion-off .callbtn__ring { animation: none; opacity: 0; }
.motion-off .call__lamp,
.motion-off .ledger__row dt::before,
.motion-off .ledger__lead,
.motion-off .ledger__val,
.motion-off .callbtn__disc .ch-ic { animation: none !important; }
.motion-off .cline__w { transition: none; }

/* -------------------------------------------------------------- FOOTER */
.footer { padding: clamp(4rem, 8vw, 6rem) var(--gutter) var(--s-5); border-block-start: 1px solid var(--rule-ink); }
.footer__inner { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s-7); align-items: center; }
.footer__brand { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: var(--fg); }
.footer__dots { display: block; block-size: 64px; aspect-ratio: 187 / 155; }
.footer__word { block-size: 36px; inline-size: auto; fill: currentColor; }
.footer__word.logo-fa { display: none; }
:root[lang="fa"] .footer__word.logo-en { display: none; }
:root[lang="fa"] .footer__word.logo-fa { display: block; }
.footer__tag { font-size: var(--fs-small); color: var(--muted); max-inline-size: 26ch; }
.footer__links { display: flex; gap: var(--s-5); font-size: var(--fs-small); }
.footer__links a {
  display: inline-flex; min-block-size: 44px; align-items: center; text-decoration: none;
  background: linear-gradient(var(--accent), var(--accent)) 0 calc(100% - 10px) / 0% 2px no-repeat;
  transition: background-size var(--t-short) var(--ease-out);
}
:root[dir="rtl"] .footer__links a { background-position: 100% calc(100% - 10px); }
.footer__links a:hover, .footer__links a:focus-visible { background-size: 100% 2px; }
.footer__legal { margin-block-start: var(--s-7); font-size: var(--fs-micro); color: var(--muted); }
:root[lang="fa"] .footer__legal { font-size: var(--fs-small); }
/* right now — a halftone clock drawn from the real digits */
.now {
  display: grid;
  gap: var(--s-4);
  padding-block-end: clamp(2.5rem, 5vw, 4rem);
  margin-block-end: clamp(2.5rem, 5vw, 4rem);
  border-block-end: 1px solid var(--rule-ink);
}
.now__row { display: flex; align-items: center; gap: clamp(1.5rem, 4vw, 3.5rem); flex-wrap: wrap; }
.now__clock { display: block; block-size: clamp(64px, 7.5vw, 104px); inline-size: auto; flex: none; }
.now__line {
  flex: 1 1 22ch;
  max-inline-size: 34ch;
  font-size: var(--fs-h3);
  font-weight: var(--w-light);
  line-height: 1.45;
  text-wrap: balance;
  transition: opacity var(--t-med) var(--ease-out);
}
:root[lang="fa"] .now__line { line-height: 1.8; }
.now__line b { font-weight: var(--w-bold); }
.now__line.is-out { opacity: 0; }
@media (max-width: 599px) {
  .now__clock { block-size: 60px; }
  .now__row { gap: var(--s-4); }
}

@media (max-width: 899px) {
  .footer__inner { grid-template-columns: 1fr; gap: var(--s-4); }
  .footer__dots { block-size: 52px; }
  .footer__word { block-size: 29px; }
}


/* reduced motion: icons and the clock colon rest in their complete, readable state */
.motion-off .ch-ic,
.motion-off .ch-ic * { animation: none !important; }