/* ============================================================
   Триптих "Прозрачность / Автоматизация / Скорость решений".
   Перенос спецификации Falcon AI Operations Overview в наши цвета.
   Единица --su равна 1cqw исходной сцены: карточки занимают 81.71cqw
   сцены, поэтому 1cqw сцены = 100cqi / 81.71 от ширины .fx-cards.
   На планшете и телефоне --su пересчитывается от ширины карточки,
   поэтому вся внутренняя композиция масштабируется пропорционально.
   ============================================================ */

.fx-section { padding: var(--section) 0; background: var(--bg); }

.fx {
  --fx-accent: var(--primary);
  --fx-soft: var(--primary-soft);
  --fx-border: rgba(31, 79, 216, .16);
  --fx-shadow: 15 26 46;
  --fx-panel-top: rgba(255, 255, 255, .96);
  --fx-panel-bottom: #f1f5fd;
  --fx-panel-glow: rgba(31, 79, 216, .10);
  --fx-panel3-glow: rgba(31, 79, 216, .18);
  --fx-panel3-bottom: #ebf1fd;
  --fx-bar: rgba(31, 79, 216, .16);
  --fx-dash: rgba(31, 79, 216, .45);
  --fx-tag-bg: rgba(255, 255, 255, .95);
  --fx-prompt-bg: rgba(255, 255, 255, .5);
}
[data-theme="dark"] .fx {
  --fx-border: rgba(143, 176, 255, .18);
  --fx-shadow: 0 0 0;
  --fx-panel-top: #15213b;
  --fx-panel-bottom: #111c33;
  --fx-panel-glow: rgba(91, 141, 255, .14);
  --fx-panel3-glow: rgba(91, 141, 255, .22);
  --fx-panel3-bottom: #13203d;
  --fx-bar: rgba(91, 141, 255, .22);
  --fx-dash: rgba(143, 176, 255, .5);
  --fx-tag-bg: rgba(17, 28, 51, .94);
  --fx-prompt-bg: rgba(255, 255, 255, .03);
}

.fx-cards {
  container-type: inline-size;
  --su: calc(100cqi / 81.71);
  width: min(100%, 1080px); margin: 0 auto;
  display: grid; grid-template-columns: 32.33% 32.33% 31.70%;
  justify-content: space-between; align-items: center;
}

.fx-card {
  position: relative; overflow: hidden; aspect-ratio: .7814;
  display: grid; grid-template-rows: 72.2% 27.8%;
  border: max(1px, calc(.075 * var(--su))) solid var(--fx-border);
  border-radius: calc(1.59 * var(--su));
  background: var(--surface);
  box-shadow:
    calc(.32 * var(--su)) calc(.78 * var(--su)) calc(1.42 * var(--su)) rgb(var(--fx-shadow) / .11),
    0 calc(.12 * var(--su)) calc(.42 * var(--su)) rgb(var(--fx-shadow) / .035);
}
.fx-card:last-child { aspect-ratio: .7773; }

.fx-panel {
  position: relative; margin-inline: 2.55%; overflow: hidden;
  border-radius: calc(1.28 * var(--su)) calc(1.28 * var(--su)) calc(1.08 * var(--su)) calc(1.08 * var(--su));
  background:
    radial-gradient(circle at 50% 78%, var(--fx-panel-glow), transparent 47%),
    linear-gradient(180deg, var(--fx-panel-top), var(--fx-panel-bottom));
}
.fx-card:last-child .fx-panel {
  margin-inline: 2%;
  background:
    radial-gradient(circle at 74% 46%, var(--fx-panel3-glow), transparent 48%),
    linear-gradient(180deg, var(--fx-panel-top), var(--fx-panel3-bottom));
}

.fx-copy { position: relative; padding: 7.1% 8.4% 6.5%; }
.fx-copy h3 {
  margin: 0 0 1.6%; color: var(--ink); font-family: var(--display);
  font-size: calc(1.86 * var(--su)); font-weight: 600; line-height: 1.04;
  letter-spacing: calc(-.06 * var(--su)); white-space: nowrap;
  transform: translateY(calc(-.24 * var(--su))); transform-origin: left top;
}
.fx-card:last-child .fx-copy h3 { font-size: calc(2.17 * var(--su)); letter-spacing: calc(-.07 * var(--su)); }
.fx-copy p {
  margin: 0; color: var(--muted); font-size: calc(1.39 * var(--su)); font-weight: 500;
  line-height: 1.12; letter-spacing: calc(-.03 * var(--su));
  transform: scaleX(.94); transform-origin: left top;
}
.fx-corner {
  position: absolute; right: 8.4%; bottom: 22.5%; width: 8.2%; aspect-ratio: 1;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--fx-soft); color: var(--fx-accent);
}

/* ---------- Карточка 1: график ---------- */
.fx-timeline { position: absolute; top: 5.7%; left: 20.8%; width: 58.4%; display: flex; justify-content: space-between; align-items: center; color: var(--fx-accent); font-size: calc(.62 * var(--su)); font-weight: 500; letter-spacing: calc(-.015 * var(--su)); }
.fx-timeline i { width: 20%; border-top: max(1px, calc(.05 * var(--su))) dashed var(--fx-dash); }
.fx-bars { position: absolute; left: 5.9%; right: 5.9%; bottom: 12%; height: 62%; display: flex; align-items: flex-end; justify-content: space-between; }
.fx-bar { width: 2.4%; height: var(--h); border-radius: var(--pill); background: var(--fx-bar); }
.fx-bar.active { width: 2.6%; background: var(--fx-accent); box-shadow: 0 0 calc(.28 * var(--su)) var(--primary-glow); }
.fx-chip {
  position: absolute; top: 15.5%; left: 46.2%; width: 14%; height: 7.6%;
  display: grid; place-items: center; border: calc(.12 * var(--su)) solid var(--surface); border-radius: var(--pill);
  background: var(--fx-accent); color: var(--on-primary); font-size: calc(.67 * var(--su)); font-weight: 600;
  box-shadow: 0 0 0 calc(.055 * var(--su)) var(--fx-accent), 0 calc(.18 * var(--su)) calc(.4 * var(--su)) rgb(var(--fx-shadow) / .24);
}
.fx-axis { position: absolute; left: 7.7%; right: 7.2%; bottom: 5.2%; display: flex; justify-content: space-between; color: var(--dim); font-size: calc(.57 * var(--su)); }

/* Глиф "плюс-искра" */
.fx-spark { position: relative; width: 52%; aspect-ratio: 1; }
.fx-spark::before, .fx-spark::after { content: ""; position: absolute; border-radius: var(--pill); background: currentColor; }
.fx-spark::before { top: 41%; left: 0; width: 100%; height: 18%; }
.fx-spark::after { top: 0; left: 41%; width: 18%; height: 100%; }

/* ---------- Карточка 2: автоматизация ---------- */
.fx-assistant { position: absolute; top: 8.2%; left: 6.2%; display: flex; align-items: center; gap: calc(1.02 * var(--su)); color: var(--fx-accent); font-size: calc(1.28 * var(--su)); font-weight: 700; letter-spacing: calc(-.04 * var(--su)); }
.fx-badge { width: calc(2.16 * var(--su)); aspect-ratio: 1; border-radius: 50%; background: var(--fx-soft); display: grid; place-items: center; }
.fx-badge .fx-spark {
  width: 48%; background: currentColor; filter: blur(calc(.035 * var(--su)));
  clip-path: polygon(47% 0, 53% 0, 58% 28%, 65% 35%, 72% 42%, 100% 47%, 100% 53%, 72% 58%, 65% 65%, 58% 72%, 53% 100%, 47% 100%, 42% 72%, 35% 65%, 28% 58%, 0 53%, 0 47%, 28% 42%, 35% 35%, 42% 28%);
}
.fx-badge .fx-spark::before, .fx-badge .fx-spark::after { content: none; }
.fx-question { position: absolute; top: 21.5%; left: 6.2%; margin: 0; color: var(--ink); font-size: calc(1.34 * var(--su)); font-weight: 500; line-height: 1; letter-spacing: calc(-.05 * var(--su)); }
.fx-prompt {
  position: absolute; top: 32%; left: 6.2%; width: 87.2%; height: 37%;
  padding: 4.2% 4.2%; border: max(1px, calc(.06 * var(--su))) solid var(--line-2); border-radius: calc(.86 * var(--su));
  background: var(--fx-prompt-bg); color: var(--muted);
  font-size: calc(1.03 * var(--su)); font-weight: 400; line-height: 1.31; letter-spacing: calc(-.02 * var(--su));
}
.fx-automate {
  position: absolute; top: 78.1%; left: 6.2%; min-width: 34.6%; height: 11.6%;
  display: flex; align-items: center; justify-content: space-between; gap: calc(.6 * var(--su));
  padding-inline: calc(1 * var(--su)); border-radius: var(--pill);
  background: linear-gradient(100deg, #6f93ff 0%, #4a75f0 38%, #1f4fd8 100%);
  box-shadow:
    0 calc(.39 * var(--su)) calc(1.35 * var(--su)) rgba(31, 79, 216, .45),
    0 calc(.13 * var(--su)) calc(.46 * var(--su)) rgba(31, 79, 216, .28),
    0 0 calc(.82 * var(--su)) calc(.08 * var(--su)) rgba(59, 130, 246, .22);
  color: #fff; font-size: calc(.98 * var(--su)); font-weight: 500; line-height: 1;
}
.fx-automate-label { letter-spacing: calc(-.02 * var(--su)); }
.fx-magic { flex: 0 0 auto; width: calc(1.5 * var(--su)); height: calc(1.46 * var(--su)); transform: translateX(calc(-.15 * var(--su))); }
.fx-cursor {
  position: absolute; top: 85.7%; left: 49%; width: 4.3%; aspect-ratio: .72; z-index: 3; isolation: isolate;
  filter: drop-shadow(0 0 calc(.075 * var(--su)) #fff) drop-shadow(0 0 calc(.075 * var(--su)) #fff) drop-shadow(calc(.08 * var(--su)) calc(.16 * var(--su)) calc(.08 * var(--su)) rgb(0 0 0 / .48));
}
.fx-cursor::before, .fx-cursor::after { content: ""; position: absolute; clip-path: polygon(0 0, 94% 62%, 57% 67%, 38% 100%); }
.fx-cursor::before { inset: 0; background: #050505; }
.fx-cursor::after { inset: -11%; z-index: -1; background: #fff; }

/* Глиф "ветвление процесса" */
.fx-flow-icon { position: relative; width: 54%; height: 58%; background: linear-gradient(var(--fx-accent), var(--fx-accent)) center / 48% 18% no-repeat; }
.fx-flow-icon::before, .fx-flow-icon::after { content: ""; position: absolute; width: 34%; height: 70%; border-radius: var(--pill); background: var(--fx-accent); }
.fx-flow-icon::before { left: 4%; top: 24%; }
.fx-flow-icon::after { right: 4%; top: 6%; }

/* ---------- Карточка 3: решения ---------- */
.fx-metric { position: absolute; top: 7.8%; left: 5.2%; }
.fx-metric-label { margin-bottom: calc(.25 * var(--su)); color: var(--muted); font-size: calc(.88 * var(--su)); }
.fx-metric-row { display: flex; align-items: center; gap: calc(1.02 * var(--su)); }
.fx-metric-row strong { color: var(--fx-accent); font-family: var(--display); font-size: calc(2.1 * var(--su)); font-weight: 700; line-height: .95; letter-spacing: calc(-.04 * var(--su)); }
.fx-metric-row span { margin-top: calc(.34 * var(--su)); color: var(--success); font-size: calc(.93 * var(--su)); font-weight: 700; letter-spacing: calc(-.03 * var(--su)); }
.fx-flow { position: absolute; top: 39%; left: 0; width: 100%; height: 53%; display: block; pointer-events: none; }
.fx-tag { position: absolute; z-index: 2; height: 8.3%; display: grid; place-items: center; padding-inline: calc(.9 * var(--su)); border-radius: var(--pill); background: var(--fx-tag-bg); color: var(--ink); font-size: calc(.62 * var(--su)); font-weight: 600; white-space: nowrap; box-shadow: 0 calc(.1 * var(--su)) calc(.4 * var(--su)) rgb(var(--fx-shadow) / .08); }
.fx-tag.action { top: 34.8%; right: 8%; }
.fx-tag.confidence { top: 67%; left: 6%; }
.fx-tag.path { top: 82.2%; right: 8%; }

/* Глиф "молния со скоростными линиями" */
.fx-speed {
  position: relative; width: 58%; aspect-ratio: 1;
  background:
    linear-gradient(var(--fx-accent), var(--fx-accent)) 0 31% / 27% 8% no-repeat,
    linear-gradient(var(--fx-accent), var(--fx-accent)) 0 49% / 38% 8% no-repeat,
    linear-gradient(var(--fx-accent), var(--fx-accent)) 0 67% / 22% 8% no-repeat;
}
.fx-speed::before { content: ""; position: absolute; inset: 4% 1% 2% 28%; background: var(--fx-accent); clip-path: polygon(58% 0, 100% 0, 69% 40%, 94% 40%, 28% 100%, 44% 58%, 7% 58%); }

/* ---------- Вход: скрываем карточки до запуска анимации ---------- */
.fx.entrance-pending .fx-card { opacity: 0; }
.fx.entrance-active .fx-card, .fx.entrance-active .fx-panel, .fx.entrance-active .fx-copy,
.fx.entrance-active .fx-copy h3, .fx.entrance-active .fx-copy p, .fx.entrance-active .fx-corner { will-change: transform, opacity, clip-path; }

/* ---------- Планшет: две колонки, третья карточка по центру ---------- */
@media (max-width: 900px) {
  .fx-cards { width: min(100%, 45rem); grid-template-columns: 1fr 1fr; gap: 1rem; --su: calc((100cqi - 1rem) / 52.84); }
  .fx-card, .fx-card:last-child { aspect-ratio: .7814; }
  .fx-card:last-child { grid-column: 1 / -1; width: calc((100% - 1rem) / 2); justify-self: center; }
}
/* ---------- Телефон: одна колонка ---------- */
@media (max-width: 560px) {
  .fx-cards { width: min(100%, 26rem); grid-template-columns: 1fr; gap: 1.25rem; --su: calc(100cqi / 26.42); }
  .fx-card:last-child { grid-column: auto; width: 100%; }
}

/* Браузеры без единиц контейнера (Chrome до 105, Safari до 16, Firefox до 110):
   та же единица, посчитанная от ширины окна */
@supports not (width: 1cqi) {
  .fx-cards { --su: calc(min(100vw - 2 * var(--gutter), 1080px) / 81.71); }
  @media (max-width: 900px) { .fx-cards { --su: calc((min(100vw - 2 * var(--gutter), 45rem) - 1rem) / 52.84); } }
  @media (max-width: 560px) { .fx-cards { --su: calc(min(100vw - 2 * var(--gutter), 26rem) / 26.42); } }
}