/* Open Axis — главная. Та же система, что у PrintAxis (css/printaxis.css): токены, карточки, анимации. */
:root {
  --bg: #0a0c10;
  --bg2: #0d1117;
  --panel: #13171f;
  --panel2: #161b22;
  --hair: #1e2732;
  --txt: #e6edf3;
  --sub: #8b949e;
  --mut: #6e7681;
  --red: #ef4444;
  --c: #22c3e6;
  --m: #ec4899;
  --y: #f5b93b;
  --g: #34d399;
  --wrap: min(1160px, 92vw);
  --r: 12px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --fd: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --fb: 'Inter', system-ui, -apple-system, sans-serif;
}
[data-ink="c"] { --ink: var(--c); }
[data-ink="m"] { --ink: var(--m); }
[data-ink="y"] { --ink: var(--y); }
[data-ink="g"] { --ink: var(--g); }
[data-ink="r"] { --ink: var(--red); }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; overflow-x: clip; }
body {
  margin: 0; background: var(--bg); color: var(--txt);
  font: 16px/1.6 var(--fb); -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
.wrap { width: var(--wrap); margin: 0 auto; }

/* фон */
.bg-grid {
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse at 50% 0%, #000 30%, transparent 85%);
}
.bg-glow {
  position: absolute; z-index: -1; left: 0; right: 0; top: -30vh; height: 90vh; pointer-events: none;
  background: radial-gradient(closest-side, rgba(239,68,68,.16), transparent 70%);
}

/* шапка: всё в одну строку, бургер — раньше, чем начнёт переносить */
.hdr { position: sticky; top: 0; z-index: 50; background: rgba(10,12,16,.78); backdrop-filter: blur(12px); border-bottom: 1px solid var(--hair); }
.hdr__in { display: flex; align-items: center; gap: 24px; height: 66px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; flex: none; }
.brand__mark { position: relative; width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(239,68,68,.55); }
.brand__mark::before { content: ""; position: absolute; left: 50%; top: -5px; bottom: -5px; width: 2px; margin-left: -1px; background: var(--red); border-radius: 2px; }
.brand__mark i { position: absolute; inset: -2px; animation: spin 6s linear infinite; }
.brand__mark i::after { content: ""; position: absolute; top: -3px; left: 50%; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c); }
.brand__word { font: 700 20px/1 var(--fd); letter-spacing: -.01em; white-space: nowrap; }
.brand__word b { color: var(--red); font-weight: 700; }
.nav { display: flex; align-items: center; gap: 24px; margin-left: auto; }
.nav a { text-decoration: none; color: var(--sub); font-size: 14.5px; white-space: nowrap; transition: color .2s; position: relative; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--red); transform: scaleX(0); transition: transform .3s var(--ease); }
.nav a:hover, .nav a.is-here { color: var(--txt); }
.nav a.is-here::after { transform: scaleX(1); }
.nav .nav__portal { color: var(--mut); font-size: 13px; border-left: 1px solid var(--hair); padding-left: 20px; }
.nav .nav__portal::after { display: none; }
.hdr__in > .btn { flex: none; }
.burger { display: none; background: none; border: 0; padding: 8px; cursor: pointer; }
.burger span { display: block; width: 22px; height: 2px; background: var(--txt); margin: 4px 0; transition: transform .25s, opacity .25s; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.progress { height: 2px; }
.progress i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--c), var(--m), var(--y), var(--red)); }

/* кнопки */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 22px; border-radius: 10px; font: 600 15px/1 var(--fb); text-decoration: none; white-space: nowrap;
  border: 1px solid transparent; cursor: pointer; transition: transform .2s var(--ease), box-shadow .2s, background .2s, border-color .2s;
}
.btn--sm { padding: 10px 16px; font-size: 14px; }
.btn--red { background: var(--red); color: #fff; box-shadow: 0 8px 28px rgba(239,68,68,.25); }
.btn--red:hover { transform: translateY(-2px); box-shadow: 0 12px 34px rgba(239,68,68,.35); }
.btn--ghost { border-color: var(--hair); color: var(--txt); background: rgba(255,255,255,.02); }
.btn--ghost:hover { border-color: rgba(239,68,68,.45); transform: translateY(-2px); }
.btn--full { width: 100%; }
.btn:disabled { opacity: .6; cursor: wait; }
.arr { display: inline-block; transition: transform .25s var(--ease); }
a:hover > .arr { transform: translateX(4px); }

/* типографика */
.kicker { margin: 0 0 12px; color: var(--red); font-weight: 700; font-size: 12.5px; letter-spacing: .22em; text-transform: uppercase; }
.kicker::after { content: ""; display: block; width: 36px; height: 3px; background: currentColor; margin-top: 10px; }
.kicker--y { color: var(--y); }
.h2 { margin: 0 0 14px; font: 700 clamp(28px, 3.6vw, 42px)/1.12 var(--fb); letter-spacing: -.02em; }
.lead { margin: 0 0 36px; color: var(--sub); font-size: 18px; max-width: 760px; }
.lead a { color: var(--txt); }

.sec { padding: clamp(64px, 9vw, 110px) 0; position: relative; }
.sec--alt { background: linear-gradient(180deg, rgba(13,17,23,0), rgba(13,17,23,.85) 12%, rgba(13,17,23,.85) 88%, rgba(13,17,23,0)); }

/* пилюли статусов */
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; color: var(--sub); border: 1px solid var(--hair); background: rgba(255,255,255,.03); white-space: nowrap; }
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--mut); }
.pill--live { color: var(--g); border-color: rgba(52,211,153,.3); }
.pill--live::before { background: var(--g); box-shadow: 0 0 8px var(--g); animation: blink 2s ease-in-out infinite; }
.pill--pilot { color: var(--y); border-color: rgba(245,185,59,.3); }
.pill--pilot::before { background: var(--y); }
@keyframes blink { 50% { opacity: .35; } }

/* hero */
.hero { position: relative; overflow: hidden; padding: clamp(56px, 8vw, 100px) 0 clamp(50px, 7vw, 80px); }
.hero > .wrap { position: relative; z-index: 1; }
.hero__in { display: grid; grid-template-columns: 1.25fr 1fr; gap: 40px; align-items: center; margin-bottom: 48px; }
.hero__title { margin: 0 0 22px; font: 700 clamp(34px, 5vw, 60px)/1.06 var(--fb); letter-spacing: -.03em; }
.hero__title em { font-style: normal; }
.hero__sub { max-width: 640px; color: var(--sub); font-size: clamp(16.5px, 1.5vw, 19px); margin: 0 0 32px; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; }
.hero__stats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.hero__stats li { background: var(--panel); border: 1px solid var(--hair); border-radius: var(--r); padding: 20px 20px 18px; position: relative; overflow: hidden; }
.hero__stats li::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--c); }
.hero__stats li:nth-child(2)::before { background: var(--g); }
.hero__stats li:nth-child(3)::before { background: var(--m); }
.hero__stats li:nth-child(4)::before { background: var(--y); }
.hero__stats b { display: block; font: 700 34px/1.1 var(--fd); margin-bottom: 6px; white-space: nowrap; }
.hero__stats > li > span { color: var(--sub); font-size: 13.5px; line-height: 1.4; display: block; }

/* орбитальная схема в герое */
.axis { position: relative; width: min(440px, 100%); aspect-ratio: 1; justify-self: center; }
.axis::before { content: ""; position: absolute; left: 50%; top: -6%; bottom: -6%; width: 2px; margin-left: -1px;
  background: linear-gradient(180deg, transparent, rgba(239,68,68,.7) 20%, rgba(239,68,68,.7) 80%, transparent); }
.axis__ring { position: absolute; border-radius: 50%; border: 1px solid rgba(255,255,255,.09); animation: spin 40s linear infinite; }
.axis__ring--1 { inset: 30%; border-color: rgba(239,68,68,.3); animation-duration: 16s; }
.axis__ring--2 { inset: 14%; animation-duration: 28s; animation-direction: reverse; border-style: dashed; }
.axis__ring--3 { inset: 0; animation-duration: 46s; }
.axis__ring i { position: absolute; width: 12px; height: 12px; margin: -6px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 14px var(--ink), 0 0 30px color-mix(in srgb, var(--ink) 40%, transparent); }
.axis__ring i:nth-child(1) { left: 50%; top: 0; }
.axis__ring i:nth-child(2) { left: 50%; top: 100%; }
.axis__ring--2 i:nth-child(1) { left: 93.3%; top: 25%; }
.axis__ring--2 i:nth-child(2) { left: 6.7%; top: 25%; }
.axis__ring--2 i:nth-child(3) { left: 50%; top: 100%; }
.axis__ring--3 i:nth-child(1) { left: 14.6%; top: 14.6%; width: 9px; height: 9px; margin: -4.5px; }
.axis__ring--3 i:nth-child(2) { left: 85.4%; top: 85.4%; width: 9px; height: 9px; margin: -4.5px; }
.axis__core { position: absolute; inset: 39%; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle, rgba(239,68,68,.35), rgba(239,68,68,.08) 60%, transparent 72%);
  animation: core 4s ease-in-out infinite; }
.axis__core span { font: 700 15px/1 var(--fd); white-space: nowrap; position: relative; z-index: 1; padding: 6px 10px; border-radius: 8px; background: rgba(10,12,16,.82); border: 1px solid rgba(239,68,68,.3); }
.axis__core b { color: var(--red); }
@keyframes core { 50% { transform: scale(1.08); filter: brightness(1.25); } }
@keyframes spin { to { transform: rotate(360deg); } }
.axis__tag { position: absolute; padding: 7px 13px; border-radius: 999px; font-size: 13px; font-weight: 600; white-space: nowrap;
  background: rgba(19,23,31,.88); border: 1px solid color-mix(in srgb, var(--ink) 40%, var(--hair)); backdrop-filter: blur(6px);
  box-shadow: 0 10px 30px rgba(0,0,0,.35); animation: bob 6s ease-in-out infinite; }
.axis__tag::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--ink); margin-right: 8px; vertical-align: 1px; }
.axis__tag:nth-of-type(1) { left: -6%; top: 16%; }
.axis__tag:nth-of-type(2) { right: -4%; top: 8%; animation-delay: -1.5s; }
.axis__tag:nth-of-type(3) { right: -10%; top: 58%; animation-delay: -3s; }
.axis__tag:nth-of-type(4) { left: -10%; top: 68%; animation-delay: -4.5s; }
.axis__tag:nth-of-type(5) { left: 30%; bottom: -4%; animation-delay: -2.2s; }
@keyframes bob { 50% { transform: translateY(-10px); } }

/* карточки */
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.card { background: var(--panel2); border: 1px solid var(--hair); border-radius: var(--r); padding: 26px; position: relative; overflow: hidden; transition: transform .35s var(--ease), border-color .3s; }
.card::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--ink, var(--red)); }
.card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--ink) 40%, var(--hair)); }
.card__num { display: block; font: 700 38px/1 var(--fd); color: var(--ink); margin-bottom: 18px; }
.card h3 { margin: 0 0 10px; font-size: 19px; }
.card p { margin: 0; color: var(--sub); font-size: 15px; }

.nu { background: var(--panel2); border: 1px solid var(--hair); border-radius: var(--r); padding: 22px 22px 20px; transition: border-color .3s, transform .35s var(--ease); }
.nu:hover { border-color: color-mix(in srgb, var(--ink) 45%, var(--hair)); transform: translateY(-3px); }
.nu h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: 17px; }
.nu h3::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 12px var(--ink); }
.nu p { margin: 0; color: var(--sub); font-size: 14.5px; }

.areas { margin-top: 30px; }

/* продукт */
.prod { display: grid; grid-template-columns: 1fr 1.05fr; gap: 40px; align-items: center; background: var(--panel); border: 1px solid var(--hair);
  border-radius: 18px; padding: clamp(24px, 3.4vw, 40px); position: relative; overflow: hidden; }
.prod::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: linear-gradient(90deg, var(--c), var(--m), var(--y), var(--red)); }
.prod::after { content: ""; position: absolute; right: -10%; top: -30%; width: 60%; height: 120%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(34,195,230,.12), transparent 70%); }
.prod > * { position: relative; z-index: 1; }
.prod__head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.prod__dots { display: flex; gap: 4px; }
.prod__dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.prod__dots i:nth-child(2) { background: var(--m); }
.prod__dots i:nth-child(3) { background: var(--y); }
.prod__dots i:nth-child(4) { background: var(--red); }
.prod__name { font: 700 26px/1 var(--fd); }
.prod__name b { color: var(--red); }
.prod__title { margin: 0 0 8px; font-size: clamp(22px, 2.3vw, 28px); line-height: 1.2; letter-spacing: -.01em; }
.prod__lead { margin: 0 0 18px; color: var(--sub); font-size: 16px; }
.prod__list { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 8px; }
.prod__list li { position: relative; padding-left: 22px; font-size: 15px; }
.prod__list li::before { content: ""; position: absolute; left: 2px; top: 9px; width: 8px; height: 8px; border-radius: 2px; background: var(--c); transform: rotate(45deg); }
.prod__list li:nth-child(2)::before { background: var(--m); }
.prod__list li:nth-child(3)::before { background: var(--y); }
.prod__list li:nth-child(4)::before { background: var(--red); }
.prod__nums { display: grid; grid-template-columns: auto auto 1fr; gap: 24px; margin-bottom: 26px; padding-top: 18px; border-top: 1px solid var(--hair); }
.prod__nums b { display: block; font: 700 26px/1.1 var(--fd); }
.prod__nums span { color: var(--sub); font-size: 13px; line-height: 1.35; display: block; }
.prod__cta { display: flex; flex-wrap: wrap; gap: 12px; }
.prod__vis { position: relative; display: block; padding: 0 0 12% 0; }
.prod__screen { width: 100%; border-radius: 12px; border: 6px solid var(--panel2); box-shadow: 0 30px 70px rgba(0,0,0,.5);
  transform: perspective(1200px) rotateY(calc(-8deg + var(--ry, 0deg))) rotateX(var(--rx, 0deg)); transition: transform .5s var(--ease); }
.prod__phone { position: absolute; width: 27%; left: -6%; bottom: 0; border-radius: 20px; border: 5px solid #1b2230; background: #1b2230;
  box-shadow: 0 24px 60px rgba(0,0,0,.6); animation: bob 6s ease-in-out infinite; }
.prod:hover .prod__screen { --ry: 6deg; }
.prod--next { margin-top: 18px; grid-template-columns: 1fr auto; gap: 28px; background: transparent; border-style: dashed; padding: 26px 30px; }
.prod--next::before, .prod--next::after { display: none; }
.prod--next .prod__title { margin-top: 12px; font-size: 21px; }
.prod--next .prod__lead { margin: 0; max-width: 720px; font-size: 15px; }

/* проекты */
.filter { display: inline-flex; flex-wrap: wrap; gap: 4px; background: var(--bg2); border: 1px solid var(--hair); border-radius: 999px; padding: 4px; margin-bottom: 26px; }
.filter button { border: 0; background: none; color: var(--sub); font: 600 14px var(--fb); padding: 9px 20px; border-radius: 999px; cursor: pointer; transition: background .25s, color .25s; }
.filter button:hover { color: var(--txt); }
.filter button.is-on { background: var(--txt); color: var(--bg); }
.projects { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.proj { display: flex; flex-direction: column; background: var(--panel2); border: 1px solid var(--hair); border-radius: var(--r); padding: 22px 24px 24px;
  position: relative; overflow: hidden; transition: transform .35s var(--ease), border-color .3s, opacity .35s var(--ease); }
.proj::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--ink); transform: scaleY(.25); transform-origin: top; transition: transform .45s var(--ease); }
.proj:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--ink) 40%, var(--hair)); }
.proj:hover::before { transform: none; }
.proj__top { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 14px; }
.proj__ind { color: var(--ink); font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.proj h3 { margin: 0 0 10px; font-size: 18px; line-height: 1.3; }
.proj p { margin: 0; color: var(--sub); font-size: 14.5px; }
.proj__link { margin-top: auto; padding-top: 16px; color: var(--txt); font-weight: 600; font-size: 14px; text-decoration: none; }
.proj__link:hover { color: var(--ink); }
.proj__with { margin-top: auto !important; padding-top: 16px; font-size: 13px !important; color: var(--mut) !important; display: flex; align-items: center; gap: 8px; }
.proj__with::before { content: ""; width: 16px; height: 1px; background: currentColor; }
.proj--you { text-decoration: none; color: inherit; background: transparent; border-style: dashed; justify-content: center; }
.proj--you::before { display: none; }
.proj--you:hover { border-color: rgba(239,68,68,.5); }
.proj__plus { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; margin-bottom: 14px; border: 1px solid rgba(239,68,68,.45); color: var(--red); font-size: 26px; line-height: 1; transition: transform .45s var(--ease), background .3s; }
.proj--you:hover .proj__plus { transform: rotate(90deg); background: rgba(239,68,68,.12); }
.proj--you:hover .proj__link { color: var(--red); }
.proj.is-off, .proj.reveal.is-off { opacity: .18; transform: scale(.97); pointer-events: none; }

/* шаги */
.steps { list-style: none; margin: 0 0 30px; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; position: relative; }
.steps::before { content: ""; position: absolute; left: 0; right: 0; top: 23px; height: 2px; background: var(--hair); }
.steps::after { content: ""; position: absolute; left: 0; top: 23px; height: 2px; width: calc(var(--fill, 0) * 100%);
  background: linear-gradient(90deg, var(--c), var(--red), var(--y), var(--m)); transition: width .2s linear; }
.steps li { position: relative; z-index: 1; }
.steps__n { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--bg); border: 2px solid var(--hair);
  font: 700 16px var(--fd); color: var(--sub); margin-bottom: 16px; transition: border-color .4s, color .4s, box-shadow .4s; }
.steps li.is-lit .steps__n { border-color: var(--ink); color: var(--txt); box-shadow: 0 0 0 6px color-mix(in srgb, var(--ink) 14%, transparent), 0 0 24px color-mix(in srgb, var(--ink) 50%, transparent); }
.steps b { display: block; font-size: 19px; }
.steps em { display: block; font-style: normal; color: var(--ink); font-weight: 700; font-size: 13px; letter-spacing: .04em; margin: 2px 0 8px; }
.steps p { margin: 0; color: var(--sub); font-size: 14.5px; }

/* FAQ */
.faq__in { display: grid; grid-template-columns: .8fr 1.2fr; gap: 48px; align-items: start; }
.faq { display: grid; gap: 10px; }
.faq__item { background: var(--panel2); border: 1px solid var(--hair); border-radius: var(--r); transition: border-color .3s; }
.faq__item.is-open { border-color: rgba(239,68,68,.35); }
.faq__q { width: 100%; text-align: left; background: none; border: 0; color: var(--txt); font: 600 16px/1.4 var(--fb); padding: 18px 56px 18px 22px; cursor: pointer; position: relative; }
.faq__q::after { content: "+"; position: absolute; right: 20px; top: 50%; width: 26px; height: 26px; margin-top: -13px; display: grid; place-items: center;
  border-radius: 50%; background: rgba(255,255,255,.05); color: var(--red); font-size: 20px; font-weight: 400; transition: transform .35s var(--ease), background .3s; }
.faq__item.is-open .faq__q::after { transform: rotate(45deg); background: rgba(239,68,68,.15); }
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--ease); }
.faq__a > p { overflow: hidden; margin: 0; padding: 0 22px; color: var(--sub); font-size: 15px; }
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__item.is-open .faq__a > p { padding-bottom: 18px; }

/* CTA */
.cta { background: radial-gradient(ellipse at 30% 0%, rgba(239,68,68,.14), transparent 60%); }
.cta__in { display: grid; grid-template-columns: 1.1fr 1fr; gap: 44px; align-items: start; }
.contacts { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; }
.contact { text-decoration: none; background: var(--panel2); border: 1px solid var(--hair); border-radius: 12px; padding: 14px 20px; font: 700 19px var(--fd); transition: border-color .25s, transform .25s var(--ease); }
.contact span { display: block; font: 600 11px var(--fb); letter-spacing: .16em; text-transform: uppercase; color: var(--mut); margin-bottom: 4px; }
.contact:hover { border-color: rgba(239,68,68,.45); transform: translateY(-2px); }
.sign { margin-top: 22px; color: var(--mut); font-size: 14px; }
.form { background: var(--panel); border: 1px solid var(--hair); border-radius: 16px; padding: 26px; display: grid; gap: 14px; position: relative; }
.form label { display: grid; gap: 6px; font-size: 13.5px; color: var(--sub); }
.form input[type=text] { background: var(--bg2); border: 1px solid var(--hair); border-radius: 9px; padding: 12px 14px; color: var(--txt); font: 15px var(--fb); transition: border-color .2s, box-shadow .2s; }
.form input[type=text]:focus { outline: none; border-color: rgba(239,68,68,.55); box-shadow: 0 0 0 4px rgba(239,68,68,.1); }
.form .consent { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; }
.form .consent input { margin-top: 3px; accent-color: var(--red); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__msg { margin: 0; font-size: 14px; min-height: 1.2em; }
.form__msg.ok { color: var(--g); }
.form__msg.err { color: #fca5a5; }

/* футер */
.ftr { border-top: 1px solid var(--hair); padding: 30px 0; color: var(--mut); font-size: 14px; }
.ftr__in { display: flex; flex-wrap: wrap; gap: 18px 28px; align-items: center; }
.ftr a { color: var(--sub); }
.ftr__in > a:nth-of-type(1) { margin-left: auto; }

/* cookie */
.cookie { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 60; max-width: 720px; margin: 0 auto; display: flex; gap: 16px; align-items: center; background: var(--panel2); border: 1px solid var(--hair); border-radius: 12px; padding: 14px 18px; font-size: 13.5px; color: var(--sub); box-shadow: 0 20px 50px rgba(0,0,0,.5); }
.cookie p { margin: 0; }
.cookie[hidden] { display: none; }

/* ─── Живость ─────────────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

.hero__txt > *, .axis, .hero__stats li { opacity: 0; transform: translateY(22px); animation: rise .9s var(--ease) forwards; }
.hero__txt .kicker { animation-delay: .05s; }
.hero__title { animation-delay: .15s; }
.hero__sub { animation-delay: .3s; }
.hero__cta { animation-delay: .42s; }
.axis { animation-delay: .25s; animation-duration: 1.4s; }
.hero__stats li:nth-child(1) { animation-delay: .55s; }
.hero__stats li:nth-child(2) { animation-delay: .65s; }
.hero__stats li:nth-child(3) { animation-delay: .75s; }
.hero__stats li:nth-child(4) { animation-delay: .85s; }
@keyframes rise { to { opacity: 1; transform: none; } }

.hero__title em {
  background: linear-gradient(90deg, var(--red) 0%, #ff8a5c 25%, var(--m) 50%, var(--red) 75%, #ff8a5c 100%);
  background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shine 7s linear infinite;
}
@keyframes shine { to { background-position: -200% 0; } }

.orbs span { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .2; animation: drift 22s ease-in-out infinite alternate; }
.orbs span:nth-child(1) { width: 380px; height: 380px; background: var(--red); right: 8%; top: 4%; }
.orbs span:nth-child(2) { width: 300px; height: 300px; background: var(--c); right: 26%; top: 44%; animation-duration: 26s; animation-delay: -8s; opacity: .14; }
.orbs span:nth-child(3) { width: 260px; height: 260px; background: var(--m); right: -4%; top: 52%; opacity: .14; animation-duration: 30s; animation-delay: -14s; }
@keyframes drift {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-60px, 40px) scale(1.12); }
  100% { transform: translate(30px, -30px) scale(.95); }
}

.ticker { border-block: 1px solid var(--hair); background: rgba(19,23,31,.55); overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.ticker__track { display: flex; width: max-content; animation: marquee 52s linear infinite; }
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker span { display: flex; align-items: center; gap: 28px; padding: 15px 0 15px 28px; color: var(--sub); font-weight: 600; font-size: 15px; white-space: nowrap; }
.ticker span::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--red); box-shadow: 0 0 10px var(--red); }
.ticker span:nth-child(3n+1)::after { background: var(--c); box-shadow: 0 0 10px var(--c); }
.ticker span:nth-child(3n+2)::after { background: var(--m); box-shadow: 0 0 10px var(--m); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* подсветка под курсором */
.card, .nu, .proj, .hero__stats li, .faq__item, .prod {
  background-image: radial-gradient(420px circle at var(--mx, -500px) var(--my, -500px), rgba(255,255,255,.06), transparent 45%);
}

.sec .kicker::after { width: 0; transition: width .9s var(--ease) .15s; }
.sec.is-in .kicker::after { width: 36px; }

.nu h3::before { animation: pulse 2.6s ease-in-out infinite; }
.nu:nth-child(2n) h3::before { animation-delay: -1.3s; }
@keyframes pulse { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--ink) 16%, transparent), 0 0 18px var(--ink); } }

.btn--red { position: relative; overflow: hidden; }
.btn--red::after { content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent); transform: skewX(-20deg);
  animation: glint 4.5s ease-in-out infinite; }
@keyframes glint { 0%, 70% { left: -60%; } 100% { left: 130%; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .hero__txt > *, .axis, .hero__stats li { opacity: 1; transform: none; transition: none; animation: none; }
  .orbs span, .ticker__track, .nu h3::before, .btn--red::after, .hero__title em, .axis__ring, .axis__core, .axis__tag,
  .prod__phone, .brand__mark i, .pill--live::before { animation: none; }
  .sec .kicker::after { width: 36px; transition: none; }
}

/* адаптив */
@media (max-width: 1100px) {
  .grid4 { grid-template-columns: 1fr 1fr; }
  .projects { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1000px) {
  .hero__in { grid-template-columns: 1fr; }
  .axis { width: min(360px, 80vw); margin: 10px auto 0; }
  .hero__stats { grid-template-columns: 1fr 1fr; }
  .prod, .cta__in, .faq__in { grid-template-columns: 1fr; }
  .faq__in { gap: 10px; }
  .prod__vis { max-width: 620px; margin-left: 6%; }
}
@media (max-width: 960px) {
  .nav { position: fixed; top: 68px; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: rgba(10,12,16,.97); border-bottom: 1px solid var(--hair); padding: 8px 4vw 16px; transform: translateY(-130%); transition: transform .35s var(--ease); }
  .nav.is-open { transform: none; }
  .nav a { padding: 12px 0; font-size: 16px; border-bottom: 1px solid var(--hair); }
  .nav a::after { display: none; }
  .nav .nav__portal { border-left: 0; padding-left: 0; font-size: 16px; }
  .burger { display: block; }
  .hdr__in > .btn { margin-left: auto; }
  .steps { grid-template-columns: 1fr 1fr; gap: 26px 18px; }
  .steps::before, .steps::after { display: none; }
  .grid3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .grid3, .grid4, .projects, .steps { grid-template-columns: 1fr; }
  .hero__stats { gap: 10px; }
  .hero__stats li { padding: 16px 14px 14px; }
  .hero__stats b { font-size: 26px; }
  .hero__stats > li > span { font-size: 12.5px; }
  .card { padding: 22px; }
  .card__num { font-size: 30px; margin-bottom: 12px; }
  .hero__title br { display: none; }
  .prod--next { grid-template-columns: 1fr; }
  .prod__nums { grid-template-columns: 1fr 1fr; }
  .prod__nums div:last-child { grid-column: 1 / -1; }
  .axis__tag { font-size: 11.5px; padding: 5px 10px; }
  .axis__tag:nth-of-type(1) { left: -2%; }
  .axis__tag:nth-of-type(3) { right: -2%; }
  .axis__tag:nth-of-type(4) { left: -2%; }
  .ftr__in > a:nth-of-type(1) { margin-left: 0; }
  .filter button { padding: 8px 14px; }
}
@media (max-width: 420px) {
  .hdr__in > .btn { padding: 9px 12px; font-size: 13px; }
  .brand__word { font-size: 18px; }
  .cookie { flex-direction: column; align-items: stretch; }
}

/* ─── Мобильная и тач-доводка (23.09.2026) ───────────────────── */
.btn--sm { min-height: 40px; }
.form input[type=text] { font-size: 16px; }                 /* <16px — iOS зумит страницу при фокусе */
.form .consent input { width: 20px; height: 20px; margin-top: 0; flex: none; }
@media (pointer: coarse) and (min-width: 961px) {            /* планшет в альбомной: меню крупнее под палец */
  .nav a { padding: 12px 0; }
  .nav a::after { bottom: 4px; }
}
@media (max-width: 960px) {
  .burger { width: 44px; height: 44px; padding: 11px; margin-right: -11px; }
  .hdr__in { gap: 14px; }
  .nav a { padding: 14px 0; }
  .filter button { min-height: 40px; }
  /* «Как работаем» — вертикальная шкала, линия заполняется при прокрутке */
  .steps { grid-template-columns: 1fr; gap: 0; }
  .steps::before, .steps::after { display: block; left: 23px; right: auto; top: 24px; width: 2px; }
  .steps::before { bottom: 24px; height: auto; }
  .steps::after { height: calc(var(--fill, 0) * (100% - 48px)); background: linear-gradient(180deg, var(--c), var(--red), var(--y), var(--m)); }
  .steps li { display: grid; grid-template-columns: 48px 1fr; column-gap: 16px; padding-bottom: 24px; }
  .steps li > :not(.steps__n) { grid-column: 2; }
  .steps__n { grid-column: 1; grid-row: 1 / 4; margin: 0; }
  .steps b { padding-top: 10px; }
}
@media (max-width: 640px) {
  .sec { padding: 56px 0; }
  .lead { font-size: 16.5px; margin-bottom: 26px; }
  .kicker { font-size: 12px; letter-spacing: .14em; }
  .hero { padding-top: 40px; }
  .hero__in { gap: 12px; margin-bottom: 30px; }
  .hero__cta .btn, .prod__cta .btn, .prod--next .btn { flex: 1 1 100%; }
  .axis { width: min(300px, 76vw); margin-top: 22px; }
  /* карточки подхода: номер в строку с заголовком */
  .grid4 .card { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: baseline; }
  .grid4 .card__num { font-size: 24px; margin: 0; }
  .grid4 .card h3 { margin: 0; }
  .grid4 .card p { grid-column: 1 / -1; margin-top: 8px; }
  .prod { padding: 22px 18px; gap: 26px; }
  .prod__vis { margin-left: 8%; }
  .proj__top { flex-wrap: wrap; row-gap: 8px; }
  .pill, .proj__ind, .contact span { font-size: 12px; }
  .contacts { display: grid; grid-template-columns: 1fr; }
  .form { padding: 20px; }
  .faq__q { padding: 16px 52px 16px 18px; }
  .faq__a > p { padding: 0 18px; }
  .ftr__in { gap: 0 22px; }
  .ftr__in > span { flex: 1 1 100%; padding: 6px 0; }
  .ftr a { display: inline-block; padding: 11px 0; }
}
@media (max-width: 400px) {
  .xs-hide { display: none; }
}
.brand { padding: 10px 0; }
.proj__link { padding-bottom: 6px; }
@media (max-width: 960px) {
  .pill, .proj__ind, .contact span { font-size: 12px; }
  .ftr__in { gap: 0 22px; }
  .ftr a { display: inline-block; padding: 11px 0; }
}
@media (max-width: 960px) {
  /* шкала из отрезков между шагами: отрезок загорается цветом шага, когда шаг пройден */
  .steps::before, .steps::after { display: none; }
  .steps li { position: relative; }
  .steps li:not(:last-child)::before { content: ""; position: absolute; left: 23px; top: 48px; bottom: 0; width: 2px; background: var(--hair); transition: background .5s; }
  .steps li.is-lit:not(:last-child)::before { background: linear-gradient(180deg, var(--ink), color-mix(in srgb, var(--ink) 25%, var(--hair))); }
  .steps li:last-child { padding-bottom: 0; }
}
@media (max-width: 960px) {
  .nav { background: var(--bg); box-shadow: 0 24px 50px rgba(0,0,0,.6); }
}
@media (min-width: 641px) and (max-width: 960px) {
  #process .grid3 { grid-template-columns: repeat(3, 1fr); }
  #process .card { padding: 20px; }
}