/* =========================================================
   OLYMPOS / ecommerce — портфолио: интернет-магазины
   Style: Apple — light-dominant, alternating tiles,
   single Action Blue accent, SF Pro / Inter, tight tracking,
   dashboards как продуктовые рендеры (yoolip-style).
   ========================================================= */

:root{
  --blue:       #0066cc;
  --blue-focus: #0071e3;
  --blue-dark:  #2997ff;      /* links on dark tiles */
  --ink:        #1d1d1f;
  --ink-80:     #333336;
  --muted:      #6e6e73;
  --muted-2:    #86868b;
  --hairline:   rgba(0,0,0,0.08);
  --hairline-2: rgba(0,0,0,0.12);
  --canvas:     #ffffff;
  --parchment:  #f5f5f7;
  --pearl:      #fafafc;
  --tile-dark:  #161617;
  --tile-dark-2:#1d1d1f;
  --on-dark:    #f5f5f7;
  --on-dark-muted: #a1a1a6;
  --line-dark:  rgba(255,255,255,0.10);
  --green:      #30a35a;
  --green-text: #1b7440;      /* мелкий текст на светлом фоне: контраст 4.5:1+ */
  --green-soft: rgba(48,163,90,0.12);

  --container: 1240px;
  --pad: clamp(18px, 4vw, 40px);
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 24px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --font: system-ui, -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --shadow-product: 0 24px 70px -24px rgba(0,0,0,0.25);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ background:var(--canvas); color:var(--ink); -webkit-text-size-adjust:100%; }
html,body{ margin:0; padding:0; font-family:var(--font); font-size:17px; line-height:1.47; font-weight:400;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
/* overflow-x:clip (НЕ hidden!) — clip не создаёт scroll-контейнер:
   body-hidden + html-hidden в мобильном media ломает прокрутку колесом и sticky */
body{ min-height:100vh; background:var(--canvas); position:relative;
  touch-action:pan-y; overscroll-behavior-y:none; overflow-x:clip;
  letter-spacing:-0.014em; }
body.menu-open{ overflow:hidden; }
img,svg,video{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; cursor:pointer; background:none; border:0; padding:0; }
ul,ol{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4,h5,h6{ margin:0; font-weight:600; letter-spacing:-0.022em; }
p{ margin:0; }
::selection{ background:var(--blue); color:#fff; }
.container{ width:100%; max-width:var(--container); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad); }
.visually-hidden{ position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }

em{ font-style:normal; color:var(--blue); }
.tile--dark em{ color:var(--blue-dark); }

/* ============ PILL BUTTONS (единственный акцент) ============ */
.pill{ display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 22px; border-radius:9999px; font-size:15px; font-weight:400; letter-spacing:-0.01em;
  white-space:nowrap; transition:background .25s, color .25s, border-color .25s, transform .15s var(--ease); }
.pill:active{ transform:scale(0.96); }
.pill--sm{ padding:8px 17px; font-size:14px; }
.pill--lg{ padding:14px 28px; font-size:17px; }
.pill--solid{ background:var(--blue); color:#fff; }
.pill--solid:hover{ background:var(--blue-focus); }
.pill--ghost{ border:1px solid var(--blue); color:var(--blue); }
.pill--ghost:hover{ background:var(--blue); color:#fff; }
.tile--dark .pill--ghost{ border-color:var(--blue-dark); color:var(--blue-dark); }
.tile--dark .pill--ghost:hover{ background:var(--blue-dark); color:var(--tile-dark); }

/* ============ NAV ============ */
.nav{ position:fixed; top:0; left:0; right:0; z-index:60; border-bottom:1px solid transparent;
  transition:background .3s, border-color .3s; }
.nav.is-scrolled{ background:rgba(255,255,255,0.92); -webkit-backdrop-filter:blur(5px) saturate(160%); backdrop-filter:blur(5px) saturate(160%); border-bottom-color:var(--hairline); }
.nav__row{ display:flex; align-items:center; gap:26px; padding-top:14px; padding-bottom:14px; }
.brand{ display:inline-flex; align-items:center; gap:9px; flex-shrink:0; }
.brand__mark{ width:30px; height:30px; display:grid; place-items:center; border-radius:8px; background:var(--blue); color:#fff; font-weight:600; font-size:16px; }
.brand__name{ font-weight:600; font-size:16px; letter-spacing:-0.03em; }
.brand__sep{ color:var(--blue); font-weight:400; }
.nav__links{ display:flex; gap:24px; margin-left:14px; }
.nav__links a{ font-size:13.5px; color:var(--muted); transition:color .2s; }
.nav__links a:hover{ color:var(--ink); }
.nav__cta{ margin-left:auto; display:flex; align-items:center; gap:16px; }
.nav__portfolio{ font-size:13px; color:var(--muted); transition:color .2s; }
.nav__portfolio:hover{ color:var(--blue); }
.nav__burger{ display:none; flex-direction:column; gap:5px; padding:8px; margin-left:auto; }
.nav__burger span{ width:22px; height:1.6px; background:var(--ink); border-radius:2px; transition:transform .3s, opacity .3s; }
.nav__burger.is-open span:nth-child(1){ transform:translateY(6.6px) rotate(45deg); }
.nav__burger.is-open span:nth-child(2){ opacity:0; }
.nav__burger.is-open span:nth-child(3){ transform:translateY(-6.6px) rotate(-45deg); }
.nav__mobile{ display:none; flex-direction:column; padding:4px var(--pad) 16px; background:rgba(255,255,255,0.97);
  -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px); border-bottom:1px solid var(--hairline); }
.nav__mobile.is-open{ display:flex; }
.nav__mobile a{ display:block; padding:13px 2px; font-size:17px; color:var(--ink-80); border-bottom:1px solid var(--hairline); letter-spacing:-0.02em; }
.nav__mobile li:last-child a{ border-bottom:0; color:var(--blue); }

/* ============ TILES (full-bleed, alternating) ============ */
/* overflow:clip (c fallback hidden) — clip клипует блобы/аврору, но НЕ создаёт scroll-контейнер,
   поэтому position:sticky внутри тайлов (.cmsx__demo) продолжает работать */
.tile{ position:relative; overflow:hidden; overflow:clip; padding-top:clamp(72px, 9vw, 120px); padding-bottom:clamp(72px, 9vw, 120px); }
.tile > .container{ position:relative; z-index:1; }
.tile--light{ background:var(--canvas); }
.tile--parchment{ background:var(--parchment); }
.tile--dark{ background:var(--tile-dark); color:var(--on-dark); }

/* --- фоновые анимации тёмных тайлов: дрейфующее свечение + плывущая точечная сетка --- */
.tile--dark::before{ content:''; position:absolute; z-index:0; width:min(75vw, 960px); aspect-ratio:1;
  border-radius:50%; top:-25%; right:-15%; pointer-events:none; will-change:transform;
  background:radial-gradient(circle, rgba(41,151,255,0.22), transparent 62%);
  animation:blob-a 14s ease-in-out infinite alternate; }
.tile--dark::after{ content:''; position:absolute; z-index:0; inset:-26px; pointer-events:none; will-change:transform;
  background-image:radial-gradient(rgba(255,255,255,0.09) 1.2px, transparent 1.2px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(85% 80% at 60% 30%, #000 20%, transparent 80%);
  mask-image:radial-gradient(85% 80% at 60% 30%, #000 20%, transparent 80%);
  animation:grid-drift 6s linear infinite; }
@keyframes grid-drift{
  0%{ transform:translate3d(0, 0, 0); }
  100%{ transform:translate3d(26px, 26px, 0); } }

/* --- светлые/parchment тайлы: мягкое живое пятно --- */
.tile--parchment::before{ content:''; position:absolute; z-index:0; width:min(60vw, 760px); aspect-ratio:1;
  border-radius:50%; top:-20%; left:-12%; pointer-events:none; will-change:transform;
  background:radial-gradient(circle, rgba(0,102,204,0.10), transparent 60%);
  animation:blob-b 16s ease-in-out infinite alternate; }
.tile__eyebrow{ font-size:13px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:var(--blue); margin-bottom:18px; }
.tile--dark .tile__eyebrow{ color:var(--blue-dark); }
.tile__title{ font-size:clamp(32px, 4.6vw, 56px); font-weight:600; line-height:1.07; letter-spacing:-0.028em; color:var(--on-dark); }
.tile__title--ink{ color:var(--ink); }
.tile__lead{ margin-top:22px; max-width:640px; font-size:clamp(17px, 1.8vw, 21px); line-height:1.45; font-weight:400; color:var(--on-dark-muted); }
.tile__lead--ink{ color:var(--muted); }

/* ============ HERO ============ */
.hero{ position:relative; padding-top:clamp(120px, 13vw, 170px); padding-bottom:clamp(56px, 7vw, 90px); background:var(--canvas); overflow:hidden; }
.hero > *{ position:relative; z-index:1; }
/* --- фоновые «ауры» hero: синие пятна в заметном дрейфе --- */
.hero::before{ content:''; position:absolute; z-index:0; width:min(65vw, 840px); aspect-ratio:1;
  border-radius:50%; top:-20%; left:-14%; pointer-events:none; will-change:transform;
  background:radial-gradient(circle, rgba(0,102,204,0.17), transparent 62%);
  animation:blob-a 13s ease-in-out infinite alternate; }
.hero::after{ content:''; position:absolute; z-index:0; width:min(56vw, 700px); aspect-ratio:1;
  border-radius:50%; top:4%; right:-16%; pointer-events:none; will-change:transform;
  background:radial-gradient(circle, rgba(41,151,255,0.16), transparent 60%);
  animation:blob-b 17s ease-in-out infinite alternate; }
@keyframes blob-a{
  0%{ transform:translate3d(0, 0, 0) scale(1); }
  50%{ transform:translate3d(9vw, 6vh, 0) scale(1.18); }
  100%{ transform:translate3d(-5vw, 11vh, 0) scale(0.9); } }
@keyframes blob-b{
  0%{ transform:translate3d(0, 0, 0) scale(1); }
  50%{ transform:translate3d(-8vw, 9vh, 0) scale(0.88); }
  100%{ transform:translate3d(5vw, -6vh, 0) scale(1.16); } }
.hero__inner{ text-align:center; }
.hero__eyebrow{ font-size:13px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:var(--blue); margin-bottom:20px; }
.hero__title{ font-size:clamp(38px, 6.4vw, 76px); font-weight:600; line-height:1.05; letter-spacing:-0.032em; }
.hero__sub{ margin:24px auto 0; max-width:620px; font-size:clamp(17px, 2vw, 21px); line-height:1.45; color:var(--muted); font-weight:400; }
.hero__cta{ margin-top:32px; display:flex; justify-content:center; flex-wrap:wrap; gap:12px; }
.hero__fine{ margin-top:22px; text-align:center; font-size:12px; color:var(--muted-2); }

/* hero stage: dashboard + floating cards */
.hero__stage{ position:relative; margin-top:clamp(44px, 6vw, 72px); }
.dash{ position:relative; z-index:1; background:var(--canvas); border:1px solid var(--hairline); border-radius:var(--r-lg);
  overflow:hidden; box-shadow:var(--shadow-product); max-width:940px; margin:0 auto; }
.dash__bar{ display:flex; align-items:center; gap:7px; padding:12px 16px; background:var(--pearl); border-bottom:1px solid var(--hairline); }
.dash__dot{ width:10px; height:10px; border-radius:50%; background:#e3e3e6; }
.dash__dot:nth-child(1){ background:#ff5f57; } .dash__dot:nth-child(2){ background:#febc2e; } .dash__dot:nth-child(3){ background:#28c840; }
.dash__url{ margin-left:10px; font-size:12px; color:var(--muted); }
.dash__live{ margin-left:auto; display:inline-flex; align-items:center; gap:6px; font-size:11.5px; color:var(--green-text); }
.dash__live i{ width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 6px var(--green); }
.dash__body{ padding:20px; }
.dash__kpis{ display:grid; grid-template-columns:repeat(4, 1fr); gap:12px; }
.kpi{ background:var(--pearl); border:1px solid var(--hairline); border-radius:var(--r-md); padding:14px 16px; display:flex; flex-direction:column; gap:3px; }
.kpi__label{ font-size:11.5px; color:var(--muted); letter-spacing:0; }
.kpi__value b{ font-size:clamp(18px, 2vw, 24px); font-weight:600; letter-spacing:-0.02em; font-variant-numeric:tabular-nums; }
.kpi__delta{ font-size:11.5px; color:var(--muted); }
.kpi__delta.up{ color:var(--green-text); }
.dash__main{ display:grid; grid-template-columns:minmax(0, 1.35fr) minmax(0, 1fr); gap:12px; margin-top:12px; }
.dash__chart, .dash__orders{ min-width:0; }
.dash__chart{ background:var(--pearl); border:1px solid var(--hairline); border-radius:var(--r-md); padding:14px 16px 8px; }
.dash__chart-head{ display:flex; align-items:center; justify-content:space-between; font-size:12px; color:var(--muted); margin-bottom:8px; }
.dash__chart-tabs i{ font-style:normal; font-size:11px; padding:3px 9px; border-radius:9999px; color:var(--muted); }
.dash__chart-tabs i.is-on{ background:var(--canvas); border:1px solid var(--hairline); color:var(--ink); }
.chart{ width:100%; height:auto; display:block; }
.chart__grid line{ stroke:rgba(0,0,0,0.05); stroke-width:1; }
.chart__line{ stroke:var(--blue); stroke-width:2.5; stroke-linecap:round; }
.chart__dot{ fill:var(--blue); }
.chart.is-in .chart__line{ stroke-dasharray:1200; stroke-dashoffset:1200; animation:chartdraw 1.6s var(--ease) forwards; }
.chart.is-in .chart__area{ opacity:0; animation:chartfade .8s .7s ease forwards; }
.chart.is-in .chart__dot{ opacity:0; animation:chartfade .4s 1.4s ease forwards; }
@keyframes chartdraw{ to{ stroke-dashoffset:0; } }
@keyframes chartfade{ to{ opacity:1; } }
.dash__orders{ background:var(--pearl); border:1px solid var(--hairline); border-radius:var(--r-md); padding:14px 16px; display:flex; flex-direction:column; gap:8px; }
.dash__orders-head{ font-size:12px; color:var(--muted); margin-bottom:2px; }
.ord{ display:flex; align-items:center; gap:8px; padding:8px 10px; background:var(--canvas); border:1px solid var(--hairline); border-radius:9px; font-size:12px;
  opacity:0; transform:translateY(8px); transition:opacity .5s var(--ease), transform .5s var(--ease); }
.ord.is-in{ opacity:1; transform:none; }
.ord__id{ color:var(--muted); font-variant-numeric:tabular-nums; }
.ord__name{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink-80); }
.ord__sum{ font-weight:600; font-variant-numeric:tabular-nums; }
.ord__st{ padding:2px 8px; border-radius:9999px; font-size:10.5px; }
.ord__st.ok{ background:var(--green-soft); color:var(--green-text); }
.ord__st.ship{ background:rgba(0,102,204,0.1); color:var(--blue); }
.ord__st.done{ background:rgba(0,0,0,0.05); color:#5d5d63; }

/* floats стоят ПОЛНОСТЬЮ снаружи дашборда (прижаты к его краям), контент не перекрывают */
.float{ position:absolute; z-index:2; display:flex; align-items:center; gap:8px; padding:10px 12px;
  max-width:240px; pointer-events:none;
  background:rgba(255,255,255,0.94); border:1px solid var(--hairline); border-radius:14px;
  box-shadow:0 16px 40px -18px rgba(0,0,0,0.22); font-size:11.5px;
  animation:floaty 5.5s ease-in-out infinite; }
.float__ic{ width:26px; height:26px; display:grid; place-items:center; border-radius:8px; background:var(--parchment); font-size:12px; flex:0 0 auto; }
.float__txt{ display:flex; flex-direction:column; line-height:1.35; color:var(--muted); }
.float__txt b{ color:var(--ink); font-weight:600; }
.float__check{ width:16px; height:16px; display:grid; place-items:center; border-radius:50%; background:var(--green-soft); color:var(--green); font-size:9px; flex:0 0 auto; }
/* дашборд = 940px по центру (края на 50% ± 470px); карточки — за его краями */
.float--pay{ top:30%; right:calc(50% + 480px); animation-delay:0s; }
.float--cdek{ bottom:18%; right:calc(50% + 492px); animation-delay:1.4s; }
.float--sync{ top:44%; left:calc(50% + 480px); animation-delay:0.7s; }
.float--tg{ bottom:10%; left:calc(50% + 468px); animation-delay:2.1s; }
@keyframes floaty{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-9px); } }

/* ============ ABOUT STRIP (кто мы) ============ */
.about{ background:var(--parchment); border-top:1px solid var(--hairline); padding-top:clamp(28px, 4vw, 44px); padding-bottom:clamp(28px, 4vw, 44px); }
.about__row{ display:flex; align-items:center; gap:clamp(18px, 3vw, 40px); }
.about__text{ font-size:clamp(15px, 1.7vw, 18px); line-height:1.55; color:var(--muted); max-width:820px; }
.about__text b{ color:var(--ink); font-weight:600; }
.about__row .pill{ margin-left:auto; flex:0 0 auto; }

/* ============ MARKETPLACE (dark tile) ============ */
.mp{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:clamp(36px, 5vw, 56px); }
.mp__col{ background:var(--tile-dark-2); border:1px solid var(--line-dark); border-radius:var(--r-lg); padding:24px;
  display:flex; flex-direction:column; }
.mp__col--good{ border-color:rgba(48,163,90,0.35); }
.mp__head{ display:flex; align-items:center; justify-content:space-between; padding-bottom:16px; border-bottom:1px solid var(--line-dark); margin-bottom:16px; font-weight:600; font-size:15px; }
.mp__price{ font-variant-numeric:tabular-nums; color:var(--on-dark-muted); font-weight:400; }
.mp__row{ display:grid; grid-template-columns:minmax(130px, 0.9fr) 1fr auto; align-items:center; gap:12px; padding:7px 0; font-size:13.5px; color:var(--on-dark-muted); }
.mp__bar{ position:relative; height:8px; border-radius:9999px; background:rgba(255,255,255,0.06); overflow:hidden; }
.mp__bar b{ position:absolute; inset:0 auto 0 0; width:0; border-radius:inherit; background:#e0654f; transition:width 1s var(--ease); }
.mp__bar b.is-good{ background:var(--green); }
.reveal.is-in .mp__bar b, .mp.is-in .mp__bar b{ width:var(--w); }
.mp__val{ font-variant-numeric:tabular-nums; min-width:74px; text-align:right; }
.mp__row--zero .mp__val{ color:var(--green); }
/* margin-top:auto — итоги обеих карточек прижаты к низу и стоят на одном уровне */
.mp__total{ display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding-top:16px; border-top:1px solid var(--line-dark); font-size:15px; }
.mp__rows{ margin-bottom:16px; }
.mp__total b{ font-size:clamp(20px, 2.2vw, 26px); letter-spacing:-0.02em; font-variant-numeric:tabular-nums; color:#e0654f; }
.mp__total--good b{ color:var(--green); }
.mp__fine{ margin-top:16px; font-size:12px; color:rgba(255,255,255,0.38); max-width:640px; }
.mp__points{ margin-top:clamp(28px, 4vw, 44px); display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; }
.mp__points li{ padding:18px 20px; background:var(--tile-dark-2); border:1px solid var(--line-dark); border-radius:var(--r-md); font-size:14.5px; line-height:1.5; color:var(--on-dark-muted); }
.mp__points b{ display:block; color:var(--on-dark); font-weight:600; margin-bottom:4px; }

/* ============ WORKS ============ */
.work{ display:grid; grid-template-columns:1.12fr 0.88fr; gap:clamp(24px, 4vw, 48px); align-items:center;
  margin-top:clamp(40px, 5vw, 64px); padding:clamp(20px, 3vw, 32px); background:var(--pearl);
  border:1px solid var(--hairline); border-radius:var(--r-xl); }
.work--rev .work__media{ order:2; }
.work__media{ position:relative; }
.work__media > a{ display:block; border-radius:var(--r-md); overflow:hidden; border:1px solid var(--hairline-2); box-shadow:var(--shadow-product); }
.work__media img{ width:100%; height:auto; transition:transform .7s var(--ease); }
.work__media > a:hover img{ transform:scale(1.03); }
.work__media-sub{ position:absolute; right:-4%; bottom:-9%; width:52%; border-radius:var(--r-md); overflow:hidden;
  border:1px solid var(--hairline-2); box-shadow:0 20px 50px -20px rgba(0,0,0,0.35); background:#fff; }
.work--rev .work__media-sub{ right:auto; left:-4%; }
.work__label{ display:block; font-size:12px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:var(--blue); margin-bottom:10px; }
.work__info h3{ font-size:clamp(24px, 2.8vw, 34px); font-weight:600; letter-spacing:-0.025em; margin-bottom:12px; }
.work__info > p{ font-size:15px; line-height:1.55; color:var(--muted); }
.work__facts{ margin:18px 0; display:flex; flex-direction:column; gap:9px; }
.work__facts li{ position:relative; padding-left:24px; font-size:14px; color:var(--ink-80); }
.work__facts li::before{ content:'✓'; position:absolute; left:0; top:0; color:var(--blue); font-size:12.5px; font-weight:600; }
.work__tags{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px; }
.work__tags span{ font-size:11.5px; padding:5px 11px; border:1px solid var(--hairline-2); border-radius:9999px; color:var(--muted); background:var(--canvas); }

/* ============ CMS ============ */
.cmsx{ display:grid; grid-template-columns:1.05fr 0.95fr; gap:clamp(28px, 4vw, 52px); align-items:start; margin-top:clamp(36px, 5vw, 56px); }
.cmsx__demo{ position:sticky; top:96px; }
.dash--cms{ max-width:none; margin:0; }
.cmsx__app{ display:grid; grid-template-columns:148px minmax(0, 1fr); min-height:340px; }
.cmsx__side{ background:var(--pearl); border-right:1px solid var(--hairline); padding:16px 12px; display:flex; flex-direction:column; gap:3px; }
.cmsx__brand{ display:flex; align-items:center; gap:8px; font-weight:600; font-size:13px; margin-bottom:12px; }
.cmsx__brand span{ width:22px; height:22px; display:grid; place-items:center; border-radius:6px; background:var(--blue); color:#fff; font-size:12px; }
.cmsx__nav{ display:block; padding:8px 10px; border-radius:8px; font-size:13px; color:var(--muted); }
.cmsx__nav.is-active{ background:rgba(0,102,204,0.08); color:var(--blue); font-weight:600; }
.cmsx__main{ padding:16px 18px; }
.cmsx__tabs{ display:inline-flex; gap:4px; padding:3px; background:var(--parchment); border-radius:9999px; margin-bottom:14px; }
.cmsx__tabs button{ padding:6px 16px; border-radius:9999px; font-size:12.5px; color:var(--muted); transition:background .25s, color .25s; }
.cmsx__tabs button.is-on{ background:var(--canvas); color:var(--ink); font-weight:600; box-shadow:0 1px 4px rgba(0,0,0,0.08); }
.cmsx__pane{ display:none; flex-direction:column; gap:8px; }
.cmsx__pane.is-on{ display:flex; }
.crow{ display:grid; grid-template-columns:1fr auto 52px; align-items:center; gap:12px; padding:10px 12px; border:1px solid var(--hairline); border-radius:10px; background:var(--pearl); }
.crow.head{ border:0; background:transparent; padding-top:0; padding-bottom:0; font-size:10.5px; letter-spacing:0.05em; text-transform:uppercase; color:var(--muted-2); }
.crow__name{ display:flex; align-items:center; gap:9px; font-size:13.5px; font-weight:400; }
.crow__drag{ font-style:normal; color:var(--muted-2); font-size:11px; cursor:grab; letter-spacing:-2px; }
.crow__price{ font-size:13px; font-weight:600; font-variant-numeric:tabular-nums; }
.ctoggle{ position:relative; width:38px; height:22px; border-radius:9999px; background:rgba(0,0,0,0.12); justify-self:center; transition:background .25s; cursor:pointer; }
.ctoggle i{ position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,0.25); transition:transform .25s var(--ease); }
.ctoggle.is-on{ background:var(--green); }
.ctoggle.is-on i{ transform:translateX(16px); }
.crow--add{ display:block; text-align:center; border-style:dashed; color:var(--muted-2); font-size:13px; background:transparent; }
.cmsx__sync{ display:flex; align-items:center; gap:8px; font-size:12px; color:var(--muted-2); margin-top:4px; }
.cmsx__sync i{ width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 6px var(--green); }
.cmsx__mini{ display:grid; grid-template-columns:repeat(2, 1fr); gap:8px; }
.mini{ background:var(--pearl); border:1px solid var(--hairline); border-radius:10px; padding:10px 12px; display:flex; flex-direction:column; gap:2px; }
.mini span{ font-size:11px; color:var(--muted); }
.mini b{ font-size:17px; font-weight:600; font-variant-numeric:tabular-nums; letter-spacing:-0.01em; }
.funnel{ margin-top:10px; display:flex; flex-direction:column; gap:7px; }
.funnel__row{ display:grid; grid-template-columns:64px 1fr 44px; align-items:center; gap:10px; font-size:11.5px; color:var(--muted); }
.funnel__row i{ position:relative; height:10px; border-radius:9999px; background:var(--parchment); overflow:hidden; display:block; }
.funnel__row b{ position:absolute; inset:0 auto 0 0; width:var(--w); border-radius:inherit; background:linear-gradient(90deg, var(--blue), #4d94e0); }
.funnel__row span:last-child{ text-align:right; font-variant-numeric:tabular-nums; }
.cmsx__feats{ display:flex; flex-direction:column; }
.cmsx__feats li{ display:flex; gap:16px; padding:17px 0; border-bottom:1px solid var(--hairline); }
.cmsx__feats li:last-child{ border-bottom:0; }
.fnum{ font-size:14px; color:var(--blue); font-weight:600; min-width:28px; flex:0 0 auto; font-variant-numeric:tabular-nums; }
.cmsx__feats h3{ font-size:17px; font-weight:600; letter-spacing:-0.015em; margin-bottom:4px; }
.cmsx__feats p{ font-size:14px; color:var(--muted); line-height:1.5; }

/* --- мини-панели мокапа: заказы / SEO / реклама --- */
.corder{ display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--hairline); border-radius:10px; background:var(--pearl); font-size:12.5px; }
.corder__no{ color:var(--muted-2); font-variant-numeric:tabular-nums; flex:0 0 auto; }
.corder__name{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.corder b{ font-variant-numeric:tabular-nums; font-weight:600; flex:0 0 auto; }
.cbadge{ font-style:normal; font-size:10.5px; font-weight:600; padding:3px 9px; border-radius:9999px; flex:0 0 auto; }
.cbadge--ok{ background:var(--green-soft); color:var(--green); }
.cbadge--info{ background:rgba(0,102,204,0.1); color:var(--blue); }
.cbadge--muted{ background:rgba(0,0,0,0.05); color:var(--muted); }
.cseo{ padding:10px 12px; border:1px solid var(--hairline); border-radius:10px; background:var(--pearl); }
.cseo span{ display:block; font-size:10px; letter-spacing:0.05em; text-transform:uppercase; color:var(--muted-2); margin-bottom:3px; }
.cseo b{ display:block; font-size:12.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cad{ border-radius:10px; overflow:hidden; aspect-ratio:16 / 5.5; background:linear-gradient(120deg, var(--blue), #2997ff); color:#fff; display:flex; flex-direction:column; justify-content:center; gap:3px; padding:0 16px; }
.cad b{ font-size:15px; letter-spacing:-0.01em; }
.cad span{ font-size:11px; opacity:0.85; }
.cmsx__nav{ text-align:left; width:100%; }

/* --- живые скриншоты CMS --- */
.cmsshots{ margin-top:clamp(44px, 6vw, 72px); }
.cmsshots__head{ font-size:clamp(16px, 1.8vw, 19px); font-weight:600; letter-spacing:-0.015em; color:var(--ink); margin-bottom:20px; }
.cmsshot{ margin:0; background:var(--canvas); border:1px solid var(--hairline); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-product); }
.cmsshot img{ width:100%; height:auto; }
.cmsshot figcaption{ padding:13px 18px; font-size:13px; line-height:1.5; color:var(--muted); border-top:1px solid var(--hairline); background:var(--pearl); }
.cmsshots__grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:16px; }
.cmsx__try{ margin-top:clamp(28px, 4vw, 44px); text-align:center; }


/* ============ DEMO CTA (переход в демо-кабинет) ============ */
.demopts{ display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; margin-top:clamp(36px, 5vw, 56px); }
.democta{ margin-top:clamp(28px, 4vw, 44px); text-align:center; }
.democta__fine{ margin-top:14px; font-size:12.5px; color:var(--muted-2); }

/* ============ INTEGRATIONS PIPELINE (dark) ============ */
.pipe{ display:flex; align-items:stretch; gap:0; margin-top:clamp(36px, 5vw, 56px); }
.pipe__step{ flex:1; display:flex; flex-direction:column; align-items:center; text-align:center; gap:5px;
  padding:20px 12px; background:var(--tile-dark-2); border:1px solid var(--line-dark); border-radius:var(--r-md);
  transition:border-color .4s, background .4s, transform .4s var(--ease); }
.pipe__step.is-lit{ border-color:rgba(41,151,255,0.6); background:#20232a; transform:translateY(-4px); }
.pipe__ic{ width:40px; height:40px; display:grid; place-items:center; border-radius:12px; background:rgba(255,255,255,0.06); font-size:17px; margin-bottom:3px; transition:background .4s; }
.pipe__step.is-lit .pipe__ic{ background:rgba(41,151,255,0.18); }
.pipe__step b{ font-size:13.5px; font-weight:600; }
.pipe__step small{ font-size:11px; color:var(--on-dark-muted); }
.pipe__link{ width:clamp(14px, 2.4vw, 34px); flex:0 0 auto; align-self:center; height:1px; background:linear-gradient(90deg, rgba(255,255,255,0.25), rgba(255,255,255,0.08)); position:relative; }
.pipe__link::after{ content:''; position:absolute; right:-1px; top:-2.5px; width:6px; height:6px; border-top:1px solid rgba(255,255,255,0.35); border-right:1px solid rgba(255,255,255,0.35); transform:rotate(45deg); }
.chips{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:clamp(28px, 4vw, 44px); }
.chips__label{ width:100%; font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--on-dark-muted); margin-bottom:4px; }
.chips span:not(.chips__label):not(.chips__more){ font-size:13px; padding:8px 15px; border:1px solid var(--line-dark); border-radius:9999px; color:var(--on-dark); background:rgba(255,255,255,0.03); }
.chips__more{ font-size:12.5px; color:var(--on-dark-muted); padding:8px 4px; }

/* ============ SEO + AI ============ */
.seox{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px, 4vw, 56px); align-items:start; margin-top:clamp(36px, 5vw, 52px); }
.seox__list{ display:flex; flex-direction:column; }
.seox__list li{ padding:18px 0; border-bottom:1px solid var(--hairline); font-size:15px; line-height:1.55; color:var(--muted); }
.seox__list li:last-child{ border-bottom:0; }
.seox__list b{ display:block; color:var(--ink); font-weight:600; margin-bottom:4px; font-size:16px; }
.seox__demos{ display:flex; flex-direction:column; gap:16px; }
.serp{ background:var(--canvas); border:1px solid var(--hairline); border-radius:var(--r-lg); padding:18px 20px; box-shadow:var(--shadow-product); }
.serp__head{ font-size:11.5px; color:var(--muted-2); padding-bottom:12px; border-bottom:1px solid var(--hairline); margin-bottom:14px; }
.serp__site{ display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.serp__fav{ width:20px; height:20px; display:grid; place-items:center; border-radius:6px; background:var(--blue); color:#fff; font-size:11px; font-weight:600; }
.serp__url{ font-size:12px; color:var(--green); }
.serp__title{ font-size:17px; color:#1a0dab; font-weight:400; line-height:1.3; margin-bottom:5px; }
.serp__desc{ font-size:13px; color:var(--muted); line-height:1.5; }
.serp__links{ display:flex; flex-wrap:wrap; gap:14px; margin-top:10px; }
.serp__links span{ font-size:12.5px; color:#1a0dab; }
.aichat{ background:var(--canvas); border:1px solid var(--hairline); border-radius:var(--r-lg); padding:18px 20px; box-shadow:var(--shadow-product); }
.aichat__head{ display:flex; align-items:center; gap:8px; font-size:12px; font-weight:600; color:var(--ink-80); padding-bottom:12px; border-bottom:1px solid var(--hairline); margin-bottom:14px; }
.aichat__spark{ width:20px; height:20px; display:grid; place-items:center; border-radius:6px; background:linear-gradient(135deg, #0066cc, #7c3aed); color:#fff; font-size:11px; }
.aichat__q{ align-self:flex-end; margin-left:15%; padding:10px 14px; background:var(--parchment); border-radius:14px 14px 4px 14px; font-size:13.5px; margin-bottom:12px; }
.aichat__a{ font-size:13.5px; line-height:1.6; color:var(--ink-80); min-height:84px; }
.aichat__caret{ display:inline-block; width:2px; height:14px; background:var(--blue); margin-left:2px; vertical-align:-2px; animation:caret 0.9s steps(2) infinite; }
@keyframes caret{ 50%{ opacity:0; } }
.aichat__src{ margin-top:12px; font-size:11px; color:var(--muted-2); padding-top:10px; border-top:1px solid var(--hairline); }

/* ============ VS CONSTRUCTORS ============ */
.vs{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:clamp(36px, 5vw, 56px); }
.vs__col{ background:var(--canvas); border:1px solid var(--hairline); border-radius:var(--r-xl); padding:clamp(22px, 3vw, 34px); }
.vs__col--us{ border-color:rgba(0,102,204,0.35); box-shadow:0 24px 60px -30px rgba(0,102,204,0.25); }
.vs__head{ display:flex; align-items:center; gap:10px; font-size:19px; font-weight:600; letter-spacing:-0.02em; padding-bottom:18px; border-bottom:1px solid var(--hairline); margin-bottom:8px; }
.vs__badge{ font-size:10.5px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; background:var(--blue); color:#fff; padding:4px 10px; border-radius:9999px; }
.vs__col ul li{ position:relative; padding:12px 0 12px 28px; font-size:14.5px; line-height:1.5; border-bottom:1px solid var(--hairline); color:var(--ink-80); }
.vs__col ul li:last-child{ border-bottom:0; }
.vs__col--us ul li::before{ content:'✓'; position:absolute; left:0; top:12px; color:var(--blue); font-weight:600; font-size:13px; }
.vs__col--them ul li{ color:var(--muted); }
.vs__col--them ul li::before{ content:'—'; position:absolute; left:0; top:12px; color:var(--muted-2); }

/* ============ AUTOMATION (dark) ============ */
.auto{ display:grid; grid-template-columns:1fr 0.92fr; gap:clamp(24px, 4vw, 48px); align-items:start; margin-top:clamp(36px, 5vw, 56px); }
.auto__cards{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.acard{ background:var(--tile-dark-2); border:1px solid var(--line-dark); border-radius:var(--r-md); padding:20px; }
.acard:last-child{ grid-column:span 2; }
.acard h3{ font-size:16px; font-weight:600; margin-bottom:6px; letter-spacing:-0.015em; }
.acard p{ font-size:13.5px; color:var(--on-dark-muted); line-height:1.55; }
.alog{ background:var(--tile-dark-2); border:1px solid var(--line-dark); border-radius:var(--r-lg); padding:18px 20px; }
.alog__head{ display:flex; align-items:center; gap:8px; font-size:12px; font-weight:600; padding-bottom:12px; border-bottom:1px solid var(--line-dark); margin-bottom:10px; }
.alog__head i{ width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 6px var(--green); }
.alog__row{ display:flex; gap:12px; padding:8px 0; font-size:12.5px; color:var(--on-dark-muted); border-bottom:1px solid rgba(255,255,255,0.05);
  opacity:0; transform:translateY(8px); transition:opacity .5s var(--ease), transform .5s var(--ease); }
.alog__row.is-in{ opacity:1; transform:none; }
.alog__row:last-child{ border-bottom:0; }
.alog__t{ color:rgba(255,255,255,0.35); font-variant-numeric:tabular-nums; flex:0 0 auto; }
.tgm{ margin-top:14px; background:var(--tile-dark-2); border:1px solid var(--line-dark); border-radius:var(--r-lg); padding:16px 18px; }
.tgm__head{ display:flex; align-items:center; gap:10px; padding-bottom:12px; border-bottom:1px solid var(--line-dark); margin-bottom:12px; }
.tgm__ava{ width:34px; height:34px; display:grid; place-items:center; border-radius:50%; background:var(--blue); color:#fff; font-size:14px; }
.tgm__head b{ display:block; font-size:13.5px; }
.tgm__head small{ font-size:11px; color:var(--green); }
.tgm__msg{ font-size:13px; line-height:1.6; color:var(--on-dark-muted); background:rgba(255,255,255,0.04); border:1px solid var(--line-dark); border-radius:4px 14px 14px 14px; padding:11px 14px; }
.tgm__msg b{ color:var(--on-dark); }

/* ============ PROCESS ============ */
.steps{ display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; margin-top:clamp(36px, 5vw, 52px); }
.step{ background:var(--pearl); border:1px solid var(--hairline); border-radius:var(--r-lg); padding:26px; }
.step__n{ font-size:13px; color:var(--blue); font-weight:600; font-variant-numeric:tabular-nums; }
.step h3{ font-size:18px; font-weight:600; letter-spacing:-0.02em; margin:14px 0 8px; }
.step p{ font-size:14px; color:var(--muted); line-height:1.55; }

/* ============ FAQ ============ */
.faq{ max-width:820px; margin-top:clamp(30px, 4vw, 48px); }
.faq__item{ border-bottom:1px solid var(--hairline-2); }
.faq__item summary{ list-style:none; cursor:pointer; display:flex; align-items:baseline; justify-content:space-between; gap:18px;
  padding:19px 0; font-size:clamp(16px, 1.8vw, 19px); font-weight:600; letter-spacing:-0.015em; color:var(--ink); transition:color .2s; }
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary::after{ content:'+'; flex:0 0 auto; font-size:24px; font-weight:300; color:var(--blue); line-height:0.9;
  transition:transform .3s var(--ease); }
.faq__item[open] summary::after{ transform:rotate(45deg); }
.faq__item summary:hover{ color:var(--blue); }
.faq__item p{ padding:0 34px 20px 0; font-size:15px; line-height:1.6; color:var(--muted); }
.faq__item p a{ color:var(--blue); }

/* ============ CTA ============ */
.cta{ position:relative; overflow:hidden; background:var(--parchment); text-align:center; padding-top:clamp(72px, 9vw, 120px); padding-bottom:clamp(72px, 9vw, 120px); }
.cta > .container{ position:relative; z-index:1; }
.cta::before{ content:''; position:absolute; z-index:0; width:min(70vw, 860px); aspect-ratio:1;
  border-radius:50%; top:-30%; left:50%; margin-left:calc(min(70vw, 860px) / -2); pointer-events:none; will-change:transform;
  background:radial-gradient(circle, rgba(0,102,204,0.15), transparent 60%);
  animation:blob-b 15s ease-in-out infinite alternate; }
.cta__title{ font-size:clamp(32px, 5vw, 60px); font-weight:600; line-height:1.07; letter-spacing:-0.03em; max-width:20ch; margin:0 auto; }
.cta__sub{ margin:22px auto 0; max-width:600px; color:var(--muted); font-size:17px; line-height:1.55; }

/* --- форма заявки --- */
.lead{ max-width:640px; margin:40px auto 0; text-align:left; }
.lead__grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.lead__input{ width:100%; padding:14px 18px; font:inherit; font-size:15px; color:var(--ink);
  background:var(--canvas); border:1px solid var(--hairline-2); border-radius:var(--r-md);
  outline:none; transition:border-color .2s, box-shadow .2s; -webkit-appearance:none; appearance:none; }
.lead__input::placeholder{ color:var(--muted-2); }
.lead__input:focus{ border-color:var(--blue-focus); box-shadow:0 0 0 3px rgba(0,113,227,0.15); }
.lead__textarea{ margin-top:12px; resize:vertical; min-height:84px; }
.lead__hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; pointer-events:none; }
.lead__actions{ margin-top:16px; display:flex; justify-content:center; }
.lead__actions .pill{ min-width:min(100%, 280px); }
.lead__actions .pill[disabled]{ opacity:.6; pointer-events:none; }
.lead__fine{ margin-top:14px; text-align:center; font-size:12px; color:var(--muted-2); }
.lead__fine a{ color:var(--blue); }
.lead__consent{ display:flex; align-items:flex-start; gap:10px; margin-top:16px; font-size:13px; line-height:1.5; color:var(--muted); cursor:pointer; }
.lead__consent input{ flex-shrink:0; width:18px; height:18px; margin:1px 0 0; accent-color:var(--blue); cursor:pointer; }
.lead__consent a{ color:var(--blue); }
.lead__consent.is-missing span{ color:#c2513d; }
.lead__msg{ margin-top:16px; padding:14px 18px; border-radius:var(--r-md); font-size:14.5px; text-align:center; }
.lead__msg.is-ok{ background:var(--green-soft); color:var(--green); border:1px solid rgba(48,163,90,0.3); }
.lead__msg.is-err{ background:rgba(224,101,79,0.08); color:#c2513d; border:1px solid rgba(224,101,79,0.3); }
.lead__msg a{ color:var(--blue); font-weight:600; }
.cta__or{ margin-top:36px; font-size:12px; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted-2); }
.cta__channels{ display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; max-width:760px; margin:40px auto 0; }
.ch{ display:flex; flex-direction:column; align-items:center; gap:5px; padding:26px 18px; border:1px solid var(--hairline); border-radius:var(--r-lg); background:var(--canvas); transition:border-color .3s, transform .3s var(--ease); }
.ch:hover{ border-color:var(--blue); transform:translateY(-4px); }
.ch__ic{ width:46px; height:46px; display:grid; place-items:center; border-radius:12px; background:rgba(0,102,204,0.08); color:var(--blue); margin-bottom:6px; }
.ch__label{ font-size:10.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted-2); }
.ch__val{ font-size:14.5px; font-weight:600; }
.cta__actions{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:34px; }

/* ============ FOOTER ============ */
.foot{ background:var(--parchment); border-top:1px solid var(--hairline); padding-top:28px; padding-bottom:28px; }
.foot__row{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px; font-size:12.5px; color:var(--muted); }
.foot__brand{ display:inline-flex; align-items:center; gap:9px; color:var(--ink); font-weight:600; letter-spacing:-0.02em; }
.foot__brand .brand__mark{ width:26px; height:26px; font-size:14px; }

/* ============ PERF: skip offscreen render for lower static tiles ============ */
#why, #process, #faq{ content-visibility:auto; contain-intrinsic-size:1px 900px; }

/* ============ REVEAL ============ */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease); will-change:opacity, transform; }
.reveal.is-in{ opacity:1; transform:none; }

/* ============ BUILD: дашборды «строятся» при первом появлении ============ */
.b-item{ opacity:0; transform:translateY(16px) scale(0.97); transition:opacity .55s var(--ease), transform .55s var(--ease); }
.b-item.is-built{ opacity:1; transform:none; }

/* ============ AURORA: живой фон светлых секций (паттерн NEURA, светлая гамма) ============ */
.bgfx{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;
  transform:translate3d(calc(var(--px, 0) * 16px), calc(var(--py, 0) * 12px), 0);
  transition:transform 1.3s cubic-bezier(0.2, 0.6, 0.2, 1); }
.hero > .bgfx{ position:absolute; z-index:0; }
.bgfx__aurora{ position:absolute; inset:-22%; filter:blur(56px) saturate(135%); opacity:0.6; }
.bgfx__band{ position:absolute; display:block; border-radius:50%; will-change:transform; }
.bgfx__band--a{ top:-14%; left:-16%; width:75vw; aspect-ratio:1;
  background:conic-gradient(from 90deg at 50% 50%,
    rgba(135,180,255,0.5), rgba(190,215,255,0.05) 35%, rgba(0,102,204,0.3) 60%,
    rgba(220,230,255,0) 90%, rgba(135,180,255,0.5));
  animation:aurora-spin-a 46s linear infinite; }
.bgfx__band--b{ bottom:-20%; right:-18%; width:85vw; aspect-ratio:1;
  background:conic-gradient(from -45deg at 50% 50%,
    rgba(160,200,255,0), rgba(90,150,250,0.42) 25%, rgba(200,220,255,0.07) 55%,
    rgba(41,151,255,0.32) 80%, rgba(160,200,255,0));
  animation:aurora-spin-b 62s linear infinite; }
.bgfx__band--c{ top:24%; left:32%; width:46vw; aspect-ratio:1;
  background:radial-gradient(circle, rgba(255,255,255,0.9) 0%, rgba(200,225,255,0.35) 30%, transparent 60%);
  animation:aurora-pulse 12s ease-in-out infinite; }
@keyframes aurora-spin-a{
  0%{ transform:rotate(0deg) scale(1); }
  50%{ transform:rotate(180deg) scale(1.08); }
  100%{ transform:rotate(360deg) scale(1); } }
@keyframes aurora-spin-b{
  0%{ transform:rotate(0deg) scale(1.05); }
  50%{ transform:rotate(-180deg) scale(0.95); }
  100%{ transform:rotate(-360deg) scale(1.05); } }
@keyframes aurora-pulse{
  0%, 100%{ transform:scale(1); opacity:0.8; }
  50%{ transform:scale(1.16); opacity:1; } }
/* на десктопе аврора заменяет прежние статичные пятна hero */
@media (min-width:821px){
  .hero:has(.bgfx)::before, .hero:has(.bgfx)::after{ display:none; }
}
/* мобайл: аврора с блюром дорогая — остаются прежние лёгкие ауры */
@media (max-width:820px){
  .bgfx{ display:none; }
}

/* ============ SPOTLIGHT: прожектор за курсором на белых секциях ============ */
.spot{ position:absolute; inset:0; z-index:0; pointer-events:none; opacity:0; transition:opacity .4s ease;
  background:radial-gradient(540px circle at var(--sx, 50%) var(--sy, 50%),
    rgba(0,102,204,0.18), rgba(41,151,255,0.08) 36%, transparent 64%); }
.hero > .spot{ position:absolute; z-index:0; }  /* перебивает .hero > * { position:relative; z-index:1 } */
.is-spot-on > .spot{ opacity:1; }

/* ============ RESPONSIVE ============ */
/* карточкам нужен свободный гаттер ≥230px с каждой стороны от дашборда */
@media (max-width:1439px){
  .float{ display:none; }
}
@media (max-width:1040px){
  .nav__links, .nav__portfolio{ display:none; }
  .nav__burger{ display:flex; }
  .nav__cta .pill{ display:none; }
  .cmsx{ grid-template-columns:1fr; }
  .cmsx__demo{ position:relative; top:0; }
  .seox{ grid-template-columns:1fr; }
  .auto{ grid-template-columns:1fr; }
  .work, .work--rev{ grid-template-columns:1fr; }
  .work--rev .work__media{ order:0; }
  .work__media{ margin-bottom:26px; }
  .pipe{ flex-direction:column; gap:10px; }
  .pipe__link{ width:1px; height:18px; align-self:center; background:linear-gradient(180deg, rgba(255,255,255,0.25), rgba(255,255,255,0.08)); }
  .pipe__link::after{ right:-2.5px; top:auto; bottom:-1px; transform:rotate(135deg); }
}
@media (max-width:820px){
  html{ overflow-x:hidden; }
  .about__row{ flex-direction:column; align-items:flex-start; }
  .about__row .pill{ margin-left:0; }
  .dash__kpis{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .dash__main{ grid-template-columns:minmax(0, 1fr); }
  .mp{ grid-template-columns:1fr; }
  .mp__points{ grid-template-columns:1fr; }
  .vs{ grid-template-columns:1fr; }
  .cmsshots__grid{ grid-template-columns:1fr; }
  .demopts{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:1fr 1fr; }
  .auto__cards{ grid-template-columns:1fr; }
  .acard:last-child{ grid-column:auto; }
  .cta__channels{ grid-template-columns:1fr; max-width:420px; }
  .lead__grid{ grid-template-columns:1fr; }
  .work__media-sub{ width:56%; bottom:-7%; }
}
@media (max-width:520px){
  .steps{ grid-template-columns:1fr; }
  .hero__cta .pill{ flex:1 1 auto; }
  .dash__body{ padding:14px; }
  .cmsx__app{ grid-template-columns:1fr; }
  .cmsx__side{ flex-direction:row; flex-wrap:wrap; border-right:0; border-bottom:1px solid var(--hairline); padding:10px 12px; }
  .cmsx__brand{ margin-bottom:0; width:100%; }
  .cmsx__nav{ padding:6px 9px; font-size:12px; }
  .mp__row{ grid-template-columns:1fr auto; }
  .mp__bar{ display:none; }
}

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .float{ animation:none; }
  .hero::before, .hero::after, .tile--dark::before, .tile--dark::after, .tile--parchment::before, .cta::before{ animation:none; }
  .b-item{ opacity:1; transform:none; transition:none; }
  .spot{ display:none; }
  .bgfx{ display:none; }
  .chart.is-in .chart__line, .chart.is-in .chart__area, .chart.is-in .chart__dot{ animation:none; stroke-dashoffset:0; opacity:1; }
  .ord, .alog__row{ opacity:1; transform:none; transition:none; }
  .aichat__caret{ animation:none; }
  .pipe__step{ transition:none; }
  .mp__bar b{ transition:none; width:var(--w); }
}

/* --- живая сеть частиц за курсором (тёмные секции) --- */
.netcanvas{ position:absolute; inset:0; width:100%; height:100%; z-index:0; display:block; pointer-events:none; }
.tile--dark:has(> .netcanvas)::after{ display:none; }

/* временно отключённая ссылка на основное портфолио */
[data-portfolio-off]{ pointer-events:none; cursor:default; }