/* =============================================================================
   IQusion — НОВІ компоненти дизайн-системи 2026 (design-2026.css)
   Порт із дизайн-хендофу (design_handoff_iqusion_theme/assets/css/theme.css).
   Усе на наявних токенах теми (--c-*, --accent-*, --line*, --space-*, --radius-*).
   Жодного !important. Підключається глобально як компонентний шар.
   Зміст: tech-stack · phase-таймлайн · gantt · wd-note · vs-grid · FAQ ·
          watermark-кроки (.grid--steps) · фонові іконки (.bg-ico) ·
          літачок у .cta-band · 404 (.nf).
   ============================================================================= */

/* ── Watermark-номери кроків (CSS-counter) ──────────────────────────────── */
.grid--steps{counter-reset:step;}
.grid--steps .card{counter-increment:step;}
.grid--steps .card__num{display:none;}
.grid--steps .card::after{content:counter(step,decimal-leading-zero);position:absolute;right:1.1rem;bottom:.1rem;font-family:var(--font-mono);font-size:4.6rem;font-weight:800;line-height:1;color:var(--accent-blue);opacity:.07;pointer-events:none;z-index:0;}
.grid--steps .card > *{position:relative;z-index:1;}

/* ── Фонова приглушена іконка в картці ──────────────────────────────────── */
.card .bg-ico{position:absolute;right:-10px;bottom:-16px;width:108px;height:108px;color:var(--accent-blue);opacity:.07;pointer-events:none;z-index:0;}
.card .bg-ico svg{width:100%;height:100%;stroke-width:1.3;}
.card .bg-ico ~ *{position:relative;z-index:1;}

/* ── CTA-смуга: фоновий літачок ─────────────────────────────────────────── */
.cta-band{position:relative;overflow:hidden;}
.cta-band > *{position:relative;z-index:1;}
.cta-band::after{content:"";position:absolute;right:1.4rem;bottom:-1.8rem;width:170px;height:170px;pointer-events:none;opacity:.06;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='22' y1='2' x2='11' y2='13'/%3E%3Cpolygon points='22 2 15 22 11 13 2 9 22 2'/%3E%3C/svg%3E") no-repeat center / contain;}

/* ── Tech-stack (шари платформи) ────────────────────────────────────────── */
.tech-stack{display:flex;flex-direction:column;gap:1.4rem;max-width:940px;margin-inline:auto;}
.tech-layer{position:relative;display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap;background:#0B1426;border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.5rem 1.8rem;transition:border-color var(--t-fast),transform var(--t-fast),box-shadow var(--t-fast);}
.tech-layer:hover{transform:translateY(-2px);border-color:var(--line-strong);box-shadow:0 16px 40px rgba(3,7,18,.45);}
.tech-layer:not(:last-child)::after{content:"";position:absolute;left:50%;bottom:-1.4rem;transform:translateX(-50%);width:1px;height:1.4rem;background:linear-gradient(180deg,rgba(121,168,255,.55),transparent);z-index:1;}
.tech-layer__ico{width:46px;height:46px;flex:0 0 auto;border-radius:var(--radius-md);display:grid;place-items:center;background:rgba(121,168,255,.12);border:1px solid rgba(121,168,255,.2);color:var(--accent-blue-2);}
.tech-layer__ico svg{width:24px;height:24px;}
.tech-layer__lead{flex:1 1 240px;min-width:220px;}
.tech-layer__role{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-soft);}
.tech-layer h3{font-size:1.25rem;margin:.35rem 0;color:#fff;}
.tech-layer p{font-size:.86rem;color:var(--fg-muted);line-height:1.55;margin:0;}
.tech-layer__tags{display:flex;flex-wrap:wrap;gap:.45rem;flex:1 1 280px;align-content:center;}
.tech-layer__tags span{font-family:var(--font-mono);font-size:.72rem;color:#cfe0fb;background:rgba(79,142,247,.08);border:1px solid rgba(79,142,247,.22);border-radius:var(--radius-full);padding:.3rem .7rem;}
.tech-layer--core{background:radial-gradient(ellipse at 50% 50%,rgba(79,142,247,.10),transparent 70%),linear-gradient(160deg,rgba(12,24,72,1),rgba(5,10,38,1));border-color:rgba(79,142,247,.5);box-shadow:0 0 0 1px rgba(79,142,247,.12),0 0 46px rgba(79,142,247,.16);}
.tech-layer--core::before{content:"";position:absolute;top:-1px;left:8%;right:8%;height:2px;background:linear-gradient(90deg,transparent,rgba(79,142,247,.9),rgba(20,184,166,.9),rgba(79,142,247,.9),transparent);}
.tech-layer--core h3{background:linear-gradient(90deg,#79a8ff,#14B8A6);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.tech-layer--core .tech-layer__ico{background:rgba(79,142,247,.2);border-color:rgba(79,142,247,.4);color:#79a8ff;}
.tech-layer--core .tech-layer__tags span{background:rgba(20,184,166,.10);border-color:rgba(20,184,166,.28);color:#aef0e6;}
@media (max-width:680px){.tech-layer{padding:1.3rem 1.3rem;}.tech-layer__lead{flex-basis:100%;}}

/* ── Порівняння ✗ / ✓ ───────────────────────────────────────────────────── */
.vs-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;}
.vs-card{background:#0B1426;border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.6rem 1.6rem 1.2rem;}
.vs-card--good{border-color:rgba(20,184,166,.4);background:linear-gradient(180deg,rgba(20,184,166,.06),transparent 55%),#0B1426;}
.vs-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1rem;padding-bottom:1rem;border-bottom:1px solid var(--line);}
.vs-head h3{font-size:1.1rem;color:#fff;margin:0;}
.vs-badge{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;padding:.25rem .6rem;border-radius:99px;border:1px solid;white-space:nowrap;}
.vs-badge--bad{color:#FCA5A5;border-color:rgba(252,165,165,.3);}
.vs-badge--good{color:#5EEAD4;border-color:rgba(94,234,212,.35);}
.vs-row{display:flex;gap:.7rem;align-items:flex-start;padding:.62rem 0;}
.vs-row + .vs-row{border-top:1px solid var(--line-soft,rgba(255,255,255,.05));}
.vs-row svg{flex:0 0 auto;width:18px;height:18px;margin-top:.12rem;}
.vs-card--bad .vs-row svg{color:#F87171;}
.vs-card--good .vs-row svg{color:#2DD4BF;}
.vs-row b{display:block;color:#fff;font-size:.92rem;font-weight:600;}
.vs-row span{color:var(--fg-muted);font-size:.83rem;line-height:1.5;}
@media (max-width:780px){.vs-grid{grid-template-columns:1fr;}}

/* ── FAQ-акордеон ───────────────────────────────────────────────────────── */
.faq{max-width:840px;margin-inline:auto;display:grid;gap:.7rem;}
.faq-item{background:#0B1426;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;transition:border-color var(--t-fast);}
.faq-item.open{border-color:rgba(79,142,247,.42);}
.faq-q{display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%;text-align:left;background:none;border:0;color:#fff;font:inherit;font-size:1.02rem;font-weight:600;padding:1.15rem 1.4rem;cursor:pointer;}
.faq-ic{flex:0 0 auto;width:20px;height:20px;color:var(--accent-blue-2);transition:transform var(--t-base);}
.faq-item.open .faq-ic{transform:rotate(45deg);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease;}
/* Без JS акордеон не розгортається — показуємо всі відповіді (як html:not(.js) .reveal). */
html:not(.js) .faq-a{max-height:none;}
.faq-a-inner{padding:0 1.4rem 1.2rem;color:var(--fg-muted);font-size:.92rem;line-height:1.65;}

/* ── Вертикальний таймлайн фаз ──────────────────────────────────────────── */
.phase{display:grid;gap:1.2rem;}
.phase-item{display:grid;grid-template-columns:auto 1fr;gap:1.4rem;}
.phase-rail{display:flex;flex-direction:column;align-items:center;}
.phase-dot{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-family:var(--font-mono);font-weight:700;font-size:.9rem;color:#fff;background:#0B1426;border:1px solid var(--line-strong);flex:0 0 auto;}
.phase-line{flex:1;width:1px;background:linear-gradient(180deg,rgba(121,168,255,.4),rgba(242,5,88,.18));margin-top:.4rem;}
.phase-item:last-child .phase-line{display:none;}
.phase-card{flex:1;background:#0B1426;border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.6rem 1.8rem;margin-bottom:.6rem;}
.phase-meta{display:flex;align-items:center;gap:.7rem;margin-bottom:.55rem;flex-wrap:wrap;}
.phase-tag{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.09em;text-transform:uppercase;color:var(--accent-blue-2);}
.phase-when{font-family:var(--font-mono);font-size:.62rem;color:#fff;background:rgba(79,142,247,.12);border:1px solid rgba(79,142,247,.28);border-radius:99px;padding:.18rem .58rem;}
.phase-card h3{font-size:1.3rem;color:#fff;margin:0 0 .5rem;}
.phase-card > p{color:var(--fg-muted);font-size:.92rem;line-height:1.6;margin:0 0 1.1rem;}
.phase-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;}
.phase-sub{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-soft);margin-bottom:.6rem;}
.phase-list{list-style:none;display:grid;gap:.5rem;margin:0;}
.phase-list li{display:flex;gap:.55rem;color:var(--fg-muted);font-size:.86rem;line-height:1.45;}
.phase-list li svg{flex:0 0 auto;width:15px;height:15px;color:var(--accent-blue-2);margin-top:.16rem;}
.phase-chips{display:flex;flex-wrap:wrap;gap:.4rem;align-content:flex-start;}
.phase-chip{display:inline-flex;align-items:center;font-family:var(--font-mono);font-size:.66rem;color:#cfe0fb;background:rgba(79,142,247,.08);border:1px solid rgba(79,142,247,.22);border-radius:99px;padding:.3rem .65rem;}
.phase-why{margin-top:1.1rem;border-left:2px solid rgba(242,5,88,.45);padding:.4rem 0 .4rem .9rem;color:var(--fg-soft);font-size:.84rem;line-height:1.5;}
.phase-why b{color:#fff;}
@media (max-width:680px){.phase-item{grid-template-columns:1fr;}.phase-rail{flex-direction:row;gap:.6rem;}.phase-line{display:none;}.phase-grid{grid-template-columns:1fr;}}

/* ── Gantt ──────────────────────────────────────────────────────────────── */
.gantt{background:#0B1426;border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.6rem 1.8rem;}
.gantt-head{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-soft);margin-bottom:1.1rem;padding-bottom:.8rem;border-bottom:1px solid var(--line);}
.gantt-row{display:grid;grid-template-columns:140px 1fr;align-items:center;gap:1rem;padding:.5rem 0;}
.gantt-label{font-size:.84rem;color:var(--fg-muted);}
.gantt-track{position:relative;height:12px;background:rgba(255,255,255,.04);border-radius:99px;}
.gantt-bar{position:absolute;top:0;height:100%;border-radius:99px;background:linear-gradient(90deg,#4f8ef7,#79a8ff);}
.gantt-bar--cyan{background:linear-gradient(90deg,#4f8ef7,#5ee4d4);}
.gantt-bar--green{background:linear-gradient(90deg,#14B8A6,#34D399);}
.gantt-bar--red{background:linear-gradient(90deg,#f20558,#ff5e8f);}
.gantt-foot{margin-top:1rem;padding-top:.9rem;border-top:1px solid var(--line);font-family:var(--font-mono);font-size:.72rem;color:var(--accent-blue-2);}
@media (max-width:560px){.gantt-row{grid-template-columns:90px 1fr;}.gantt-label{font-size:.76rem;}}

/* ── «Що нас відрізняє» — червона врізка в картці ───────────────────────── */
.wd-note{margin-top:.9rem;padding-top:.7rem;border-top:1px solid var(--line);font-size:.78rem;color:var(--fg-soft);display:flex;gap:.45rem;align-items:flex-start;}
.wd-note svg{flex:0 0 auto;width:14px;height:14px;color:#F87171;margin-top:.12rem;}

/* ── 404 ────────────────────────────────────────────────────────────────── */
.nf{min-height:68vh;display:grid;place-items:center;text-align:center;padding:calc(var(--header-h) + 3rem) 0 4rem;}
.nf-code{font-family:var(--font-mono);font-size:clamp(5rem,16vw,10rem);font-weight:850;line-height:1;background:linear-gradient(100deg,#fff,#79a8ff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.nf h1{font-size:1.8rem;margin:1rem 0 .6rem;}
.nf p{color:var(--fg-muted);max-width:480px;margin:0 auto 1.8rem;}
.nf-actions{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap;}


/* ── Ряди-фічі з іконкою біля заголовку ─────────────────────────────────── */
.feat-rows{display:grid;grid-template-columns:1fr 1fr;gap:1rem;max-width:980px;margin-inline:auto;}
.feat-row{display:flex;gap:1rem;align-items:flex-start;background:#0B1426;border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.15rem 1.3rem;transition:border-color var(--t-fast),transform var(--t-fast),box-shadow var(--t-fast);}
.feat-row:hover{border-color:var(--line-strong);transform:translateY(-2px);box-shadow:0 14px 36px rgba(3,7,18,.4);}
.feat-row__ico{flex:0 0 auto;width:42px;height:42px;border-radius:var(--radius-md);display:grid;place-items:center;background:rgba(121,168,255,.12);border:1px solid rgba(121,168,255,.2);color:var(--accent-blue-2);}
.feat-row__ico svg{width:22px;height:22px;}
.feat-row__tx b{display:block;color:#fff;font-size:1rem;font-weight:650;margin-bottom:.22rem;}
.feat-row__tx span{display:block;color:var(--fg-muted);font-size:.9rem;line-height:1.55;}
@media (max-width:720px){.feat-rows{grid-template-columns:1fr;}}


/* ════════ Сторінки продукту/рішення: ключова теза + пункти «Що дає рішення» ════════ */
.prod-lead{max-width:60ch;}
.prod-lead .prod-lead__key{font-size:clamp(1.5rem,1.05rem+1.5vw,2.05rem);font-weight:720;line-height:1.34;letter-spacing:0;color:#eef4ff;margin:0;}
.prod-lead p.muted{font-size:clamp(1.02rem,.95rem+.4vw,1.18rem);line-height:1.58;margin-top:1rem;max-width:66ch;}

.about-points{align-items:stretch;}
.about-point{position:relative;padding-top:1.15rem;}
.about-point::before{content:"";position:absolute;top:0;left:0;width:2.6rem;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--c-accent-red),#79a8ff);}
.about-point__n{display:block;font-family:var(--font-mono);font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;color:#79a8ff;margin-bottom:.55rem;}
.about-point .tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.8rem;}
.about-point .tags span{font-family:var(--font-mono);font-size:.7rem;color:var(--fg-soft);border:1px solid var(--line);border-radius:var(--radius-full);padding:.15rem .55rem;}
.about-point p{margin:0;}
.about-intro{padding-block:clamp(3rem,5vw,4.1rem);}
.about-intro__grid{align-items:start;gap:clamp(2rem,5vw,4.5rem);}
.about-intro__head{margin-bottom:0;}
.about-intro__copy{max-width:620px;}
.about-intro__copy p{margin:0;color:var(--c-fg-secondary);font-size:1rem;line-height:1.58;}
.about-intro__copy p + p{margin-top:.78rem;}
.about-intro__copy p:first-child{color:var(--c-fg-primary);font-size:1.08rem;line-height:1.5;font-weight:650;}
@media (max-width:900px){.about-point::before{width:2.2rem;}}
@media (max-width:900px){.about-intro{padding-block:3rem}.about-intro__copy{max-width:none}.about-intro__copy p:first-child{font-size:1.03rem;}}


/* ════════ Картки кейсів (галузеві сторінки): Проблема → Що зробили → Результат ════════ */
.case-card{display:flex;flex-direction:column;}
.case-card__seg{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-blue);margin-bottom:.45rem;}
.case-card h3{margin:0 0 .15rem;font-size:1.12rem;}
.case-card__row{margin-top:.95rem;}
.case-card__lbl{display:block;font-family:var(--font-mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:.3rem;}
.case-card__row p{margin:0;color:var(--fg-muted);font-size:.92rem;line-height:1.5;}