/* ============================================================
   Портфолио · дизайн-система

   Направление: швейцарская типографика (линия Вигнелли / Pentagram),
   но на тёмном фоне. Порядок держит сетка и волосяные линейки,
   а не тени, свечения и скругления — их здесь нет намеренно.

   Type:   Golos Text — одна гарнитура на всё. Иерархия строится
           контрастом веса 400 против 900, а не сменой шрифтов.
           JetBrains Mono — только служебное: нумерация, метки, адреса.
   Color:  #ECE9F2 на #0B0910. Один акцент: #7C3AED на заливки,
           #B9A3FF на текст (тёмно-фиолетовый на чёрном нечитаем).
   Grid:   12 колонок, заголовок секции слева, содержание справа.
   Rhythm: нумерация секций 01…06, волосяная линейка между блоками,
           заголовки по левому краю, колонка текста ~62ch.
   ============================================================ */

:root{
  color-scheme: dark;

  /* ---- тёмная тема (по умолчанию) ---- */
  --bg-d:#0B0910;       --bg2-d:#100D16;
  --card-d:#12101A;     --card2-d:#171420;
  --line-d:#262231;     --line2-d:#3A3448;
  --ink-d:#ECE9F2;      --ink2-d:#A29AB4;     --ink3-d:#6E6683;
  --acc-d:#7C3AED;      --accInk-d:#FFFFFF;
  --accText-d:#B9A3FF;  --glow-d:#A78BFA;
  --accSoft-d:rgba(124,58,237,.14);
  --ok-d:#4ADE80;

  /* ---- светлая тема ---- */
  --bg-l:#F4F2ED;       --bg2-l:#EDEAE3;
  --card-l:#FBFAF7;     --card2-l:#EFECE5;
  --line-l:#D5D1C7;     --line2-l:#B8B2A6;
  --ink-l:#14121A;      --ink2-l:#4A4557;     --ink3-l:#7C7589;
  --acc-l:#5B21B6;      --accInk-l:#FFFFFF;
  --accText-l:#5B21B6;  --glow-l:#5B21B6;
  --accSoft-l:rgba(91,33,182,.09);
  --ok-l:#0F7A52;

  /* ---- активные значения ---- */
  --bg:var(--bg-d);         --bg2:var(--bg2-d);
  --card:var(--card-d);     --card2:var(--card2-d);
  --line:var(--line-d);     --line2:var(--line2-d);
  --ink:var(--ink-d);       --ink2:var(--ink2-d);   --ink3:var(--ink3-d);
  --acc:var(--acc-d);       --accInk:var(--accInk-d);
  --accText:var(--accText-d); --glow:var(--glow-d);
  --accSoft:var(--accSoft-d); --ok:var(--ok-d);

  /* ---- типографика ---- */
  --sans:'Golos Text', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --w-body:400; --w-mid:500; --w-black:900;

  /* ---- ритм ---- */
  --ease:cubic-bezier(.2,.8,.25,1);
  --pad:clamp(20px, 5vw, 56px);
  --maxw:1320px;
  --rule:1px solid var(--line);
}

:root[data-theme="light"]{
  color-scheme: light;
  --bg:var(--bg-l);         --bg2:var(--bg2-l);
  --card:var(--card-l);     --card2:var(--card2-l);
  --line:var(--line-l);     --line2:var(--line2-l);
  --ink:var(--ink-l);       --ink2:var(--ink2-l);   --ink3:var(--ink3-l);
  --acc:var(--acc-l);       --accInk:var(--accInk-l);
  --accText:var(--accText-l); --glow:var(--glow-l);
  --accSoft:var(--accSoft-l); --ok:var(--ok-l);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }

body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-weight:var(--w-body);
  font-size:16px; line-height:1.6; letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}

img,svg,video{max-width:100%; display:block}
a{color:inherit}
button{font:inherit; color:inherit}
p{margin:0}
ul,ol{margin:0; padding:0; list-style:none}

h1,h2,h3,h4{
  margin:0; font-family:var(--sans); font-weight:var(--w-black);
  letter-spacing:-.035em; line-height:1;
}

.wrap{width:min(100% - var(--pad) * 2, var(--maxw)); margin-inline:auto}

/* Секция = линейка сверху и крупный отступ: вертикальный ритм
   держится линейками, а не тенями и скруглениями. */
.sec{padding:clamp(52px, 7vw, 104px) 0; border-top:var(--rule); position:relative}
.sec--tight{padding-block:clamp(40px, 5vw, 74px)}
.sec--open{border-top:0}

.eyebrow{
  font-family:var(--mono); font-size:11px; font-weight:400;
  letter-spacing:.16em; text-transform:uppercase; color:var(--accText);
  display:block;
}
.sec-title{font-size:clamp(26px, 3.6vw, 46px); margin-top:16px; max-width:22ch}
.sec-lead{
  color:var(--ink2); font-size:clamp(15px,1.45vw,17.5px);
  max-width:62ch; margin-top:18px; line-height:1.62;
}

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--acc); color:var(--accInk); padding:12px 18px;
}
.skip-link:focus{left:0}
:focus-visible{outline:2px solid var(--accText); outline-offset:2px}

/* ---------- кнопки: прямоугольные, без теней ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 22px; border:1px solid transparent;
  font-weight:var(--w-mid); font-size:14.5px; letter-spacing:-.01em;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}
.btn svg{width:17px; height:17px; flex:none}
.btn--primary{background:var(--acc); color:var(--accInk)}
.btn--primary:hover{background:color-mix(in srgb, var(--acc) 78%, #fff)}
.btn--ghost{border-color:var(--line2); background:transparent; color:var(--ink)}
.btn--ghost:hover{border-color:var(--ink); background:var(--card2)}
.btn--sm{padding:10px 16px; font-size:13.5px}
.btn--full{width:100%}

.chip{
  font-family:var(--mono); font-size:11px; padding:5px 9px;
  border:1px solid var(--line); color:var(--ink2); white-space:nowrap;
}

/* ---------- шапка ---------- */
.hdr{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid transparent; transition:border-color .25s;
}
.hdr.is-stuck{border-bottom-color:var(--line)}
.hdr__in{display:flex; align-items:center; gap:20px; height:68px}

.logo{display:flex; align-items:center; gap:11px; text-decoration:none; margin-right:auto; flex:none}
.logo__mark{
  width:30px; height:30px; flex:none; background:var(--acc); color:#fff;
  display:grid; place-items:center;
  font-family:var(--mono); font-weight:500; font-size:12px; letter-spacing:.02em;
}
.logo__txt{display:flex; flex-direction:column; line-height:1.2}
.logo__txt b{font-size:14.5px; font-weight:var(--w-black); letter-spacing:-.02em}
.logo__txt em{
  font-style:normal; font-family:var(--mono); font-size:9.5px; color:var(--ink3);
  letter-spacing:.12em; text-transform:uppercase; margin-top:2px;
}

.nav{display:flex; gap:clamp(14px, 1.8vw, 28px); align-items:center}
.nav a{
  text-decoration:none; font-size:14.5px; font-weight:var(--w-body); color:var(--ink2);
  transition:color .18s; position:relative; white-space:nowrap; padding-block:22px;
}
.nav a:hover{color:var(--ink)}
.nav a[aria-current="page"]{color:var(--ink); font-weight:var(--w-mid)}
.nav a[aria-current="page"]::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--accText);
}

.hdr__act{display:flex; align-items:center; gap:8px; flex:none}
.icon-btn{
  width:34px; height:34px; border:1px solid var(--line); background:transparent;
  display:grid; place-items:center; cursor:pointer;
  transition:border-color .18s, color .18s;
}
.icon-btn:hover{border-color:var(--ink); color:var(--ink)}
.icon-btn svg{width:16px; height:16px}

.lang{position:relative}
.lang__btn{
  display:flex; align-items:center; gap:6px; height:34px; padding:0 10px;
  border:1px solid var(--line); background:transparent; cursor:pointer;
  font-family:var(--mono); font-size:12px; transition:border-color .18s, color .18s;
}
.lang__btn:hover{border-color:var(--ink)}
.lang__btn svg{width:11px; height:11px; opacity:.6; transition:transform .2s}
.lang[data-open="1"] .lang__btn svg{transform:rotate(180deg)}
.lang__list{
  position:absolute; top:calc(100% + 6px); right:0; min-width:150px; z-index:20;
  background:var(--card); border:1px solid var(--line); padding:4px;
  opacity:0; visibility:hidden; transform:translateY(-4px); transition:.18s var(--ease);
}
.lang[data-open="1"] .lang__list{opacity:1; visibility:visible; transform:none}
.lang__list button{
  width:100%; text-align:left; background:none; border:0; cursor:pointer;
  padding:8px 10px; font-size:14px; color:var(--ink2);
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.lang__list button:hover{background:var(--card2); color:var(--ink)}
.lang__list button[aria-selected="true"]{color:var(--accText); font-weight:var(--w-mid)}

.burger{display:none}
.menu{border:0; padding:0; background:var(--bg); color:var(--ink); width:100%; max-width:none; height:100%; max-height:none; margin:0}
.menu::backdrop{background:rgba(5,3,10,.8)}
.menu__in{padding:18px var(--pad) 40px; display:flex; flex-direction:column; height:100%}
.menu__top{display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; padding-bottom:14px; border-bottom:var(--rule)}
.menu a{
  text-decoration:none; padding:18px 0; font-size:24px;
  font-weight:var(--w-black); letter-spacing:-.03em; border-bottom:var(--rule);
}
.menu a[aria-current="page"]{color:var(--accText)}
.menu .btn{margin-top:26px}

/* Вертикали сетки — единственная «текстура», которую допускает система. */
.aura{position:absolute; inset:0; z-index:-1; overflow:hidden; pointer-events:none}
.aura::after{
  content:''; position:absolute; inset:0;
  background-image:linear-gradient(90deg, color-mix(in srgb, var(--ink) 4%, transparent) 1px, transparent 1px);
  background-size:calc(100% / 12) 100%;
  -webkit-mask-image:linear-gradient(#000, transparent 82%);
  mask-image:linear-gradient(#000, transparent 82%);
}

/* ---------- шапка страницы ---------- */
.phead{padding:clamp(40px,6vw,80px) 0 clamp(30px,4vw,52px); position:relative}
.phead h1{font-size:clamp(32px, 5.6vw, 68px); margin-top:16px; max-width:17ch}
.phead p{color:var(--ink2); font-size:clamp(15px,1.5vw,18px); max-width:62ch; margin-top:20px}

/* ---------- сетки: общие линейки вместо отдельных карточек ---------- */
.grid{display:grid; margin-top:40px; border-top:var(--rule); border-left:var(--rule)}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}

.card{
  padding:28px 26px 32px; border-right:var(--rule); border-bottom:var(--rule);
  background:transparent; transition:background .2s var(--ease);
}
.card:hover{background:var(--card)}
.card__ico{
  width:28px; height:28px; display:grid; place-items:center;
  color:var(--accText); margin-bottom:20px;
}
.card__ico svg{width:20px; height:20px}
.card h3{font-size:17px; letter-spacing:-.02em; line-height:1.25}
.card p{color:var(--ink2); margin-top:12px; font-size:14.5px; line-height:1.6}

/* ---------- появление ---------- */
@media (prefers-reduced-motion: no-preference){
  [data-rise]{opacity:0; animation:rise .7s var(--ease) forwards}
  [data-rise="1"]{animation-delay:.04s}
  [data-rise="2"]{animation-delay:.1s}
  [data-rise="3"]{animation-delay:.16s}
  [data-rise="4"]{animation-delay:.22s}
  [data-rise="5"]{animation-delay:.28s}
  [data-rise="6"]{animation-delay:.34s}
  @keyframes rise{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}

  /* Заголовок первого экрана выезжает построчно из-под маски. */
  .lines{display:block; overflow:hidden; padding-bottom:.05em}
  .lines > span{
    display:block; transform:translateY(105%);
    animation:lineUp .85s var(--ease) forwards;
    animation-delay:calc(var(--l, 0) * 90ms + 80ms);
  }
  @keyframes lineUp{to{transform:none}}

  /* Появление при прокрутке лесенкой по соседям (--i ставит скрипт). */
  .rv{opacity:0; transform:translateY(16px); transition:opacity .6s var(--ease), transform .6s var(--ease)}
  .rv.in{opacity:1; transform:none; transition-delay:calc(var(--i, 0) * 55ms)}

  @view-transition{ navigation:auto }
  ::view-transition-old(root){animation:vt-out .2s var(--ease) both}
  ::view-transition-new(root){animation:vt-in .34s var(--ease) both}
  @keyframes vt-out{to{opacity:0}}
  @keyframes vt-in{from{opacity:0}}
}
@media (prefers-reduced-motion: reduce){
  [data-rise], .rv, .lines > span{opacity:1 !important; transform:none !important; animation:none !important}
}

/* Полоса прогресса чтения — тонкая линейка в духе системы. */
.progress{
  position:fixed; inset:0 auto auto 0; height:2px; z-index:60; width:100%;
  transform-origin:0 50%; transform:scaleX(var(--sp, 0));
  background:var(--accText); pointer-events:none;
}

@supports (interpolate-size: allow-keywords){
  :root{interpolate-size: allow-keywords}
  .faq details::details-content{
    height:0; overflow:hidden;
    transition:height .35s var(--ease), content-visibility .35s allow-discrete;
  }
  .faq details[open]::details-content{height:auto}
}

/* ---------- подвал ---------- */
.foot{border-top:var(--rule); padding:48px 0 40px; margin-top:clamp(52px,6vw,92px)}
.foot__in{display:grid; grid-template-columns:minmax(0,1.4fr) repeat(2, minmax(0,.8fr)); gap:36px}
.foot h4{font-family:var(--mono); font-size:10.5px; font-weight:400; letter-spacing:.16em; text-transform:uppercase; color:var(--ink3); margin-bottom:16px}
.foot__links{display:grid; gap:10px}
.foot a{color:var(--ink2); text-decoration:none; font-size:14.5px; transition:color .18s}
.foot a:hover{color:var(--accText)}
.foot__note{color:var(--ink3); font-size:13.5px; margin-top:16px; max-width:40ch; line-height:1.55}
.foot__bottom{
  display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; align-items:center;
  margin-top:40px; padding-top:20px; border-top:var(--rule);
}
.foot__bottom small{color:var(--ink3); font-family:var(--mono); font-size:11.5px; letter-spacing:.04em}

/* ---------- адаптив ---------- */
@media (max-width:1220px){
  .hdr__cta{display:none}
}
@media (max-width:1080px){
  .grid--4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .nav{display:none}
  .burger{display:grid}
  .grid--2,.grid--3{grid-template-columns:1fr}
  .foot__in{grid-template-columns:1fr; gap:30px}
}
@media (max-width:560px){
  .hdr__in{height:60px}
  .logo__txt em{display:none}
  .grid--4{grid-template-columns:1fr}
}

@media print{
  .hdr,.aura,.foot__links,.btn,.progress{display:none}
  body{background:#fff; color:#000; font-size:12pt}
}

/* ============================================================
   ГЛАВНАЯ
   ============================================================ */
.hero{position:relative; padding:clamp(44px,6vw,88px) 0 clamp(24px,3vw,48px); overflow:hidden}
.hero__grid{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(28px,5vw,64px); align-items:center; position:relative; z-index:1}
.hero__gl{
  position:absolute; inset:-8% -8% -8% 36%; z-index:0; pointer-events:none;
  /* Частицы гасим слева под заголовком и снизу у границы секции. */
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 26%), linear-gradient(#000 58%, transparent 92%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg, transparent, #000 26%), linear-gradient(#000 58%, transparent 92%);
  mask-composite:intersect;
}
.hero__gl canvas{width:100%; height:100%; display:block}

.hero h1{font-size:clamp(34px, 5.8vw, 74px); letter-spacing:-.045em; line-height:.98}
.hero h1 .accent{color:var(--accText)}
.hero__lead{color:var(--ink2); font-size:clamp(15px,1.5vw,17.5px); max-width:46ch; margin-top:26px; line-height:1.65}
.hero__cta{display:flex; flex-wrap:wrap; gap:10px; margin-top:32px}
.hero__note{
  margin-top:22px; padding-top:18px; border-top:var(--rule);
  font-size:13.5px; color:var(--ink3); display:flex; align-items:flex-start; gap:9px; max-width:52ch;
}
.hero__note svg{width:15px; height:15px; color:var(--accText); flex:none; margin-top:4px}

/* превью работ: три ячейки в общей сетке, без скруглений и теней */
.peek{display:grid; grid-template-columns:repeat(3,1fr); margin-top:40px; border-top:var(--rule); border-left:var(--rule)}
.peek a{
  text-decoration:none; border-right:var(--rule); border-bottom:var(--rule);
  display:block; transition:background .2s var(--ease);
}
.peek a:hover{background:var(--card)}
.peek img{width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; object-position:top center; border-bottom:var(--rule)}
.peek__body{display:block; padding:20px 22px 26px; position:relative}
.peek__tag{font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--accText)}
.peek h3{font-size:17px; margin-top:12px; letter-spacing:-.025em}
.peek p{color:var(--ink3); font-size:13px; margin-top:8px; font-family:var(--mono)}
.peek__num{
  position:absolute; top:18px; right:22px; font-family:var(--mono);
  font-size:11px; color:var(--ink3); letter-spacing:.06em;
}
.more{display:flex; margin-top:32px}

.disclaimer{margin-top:18px; font-size:13.5px; line-height:1.55; color:var(--ink3); max-width:62ch}

/* ============================================================
   РАБОТЫ: 3D-миры
   ============================================================ */
/* По ~0.85 экрана на мир плюс экран на саму сцену. */
.worlds{position:relative; height:calc(100vh * (var(--n) * .85 + 1.05)); border-top:var(--rule)}
.worlds__stage{position:sticky; top:0; height:100vh; overflow:hidden}
.worlds__stage canvas{position:absolute; inset:0; width:100%; height:100%; display:block}

.world{position:absolute; inset:0; z-index:2; pointer-events:none}
.world.is-near{pointer-events:auto}
/* Ширина повторяет долю 0.78, с которой worlds.js разворачивает
   плоскость частиц, иначе по краям торчит серая крупа. */
.world__card{
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%); width:min(78vw, 124.8vh); aspect-ratio:1.6;
  overflow:hidden; border:1px solid var(--line2); background:var(--card);
  opacity:clamp(0, calc((var(--near,0) - .68) * 4.5), 1);
  transition:opacity .12s linear;
}
.world__bar{
  height:clamp(26px,3.2vh,34px); display:flex; align-items:center; gap:7px; padding:0 12px;
  background:var(--card2); border-bottom:var(--rule);
}
.world__bar i{width:6px; height:6px; border-radius:50%; background:var(--ink3); opacity:.5; flex:none}
.world__url{
  margin-left:10px; font-family:var(--mono); font-size:10.5px; color:var(--ink3);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:min(70%, 520px);
}
.world__card picture{display:block; height:calc(100% - clamp(26px,3.2vh,34px))}
.world__card img{width:100%; height:100%; object-fit:cover; object-position:top center}
.world__scrim{
  position:absolute; inset:auto 0 0 0;
  padding:clamp(14px,2.2vh,24px) clamp(18px,3vw,34px) clamp(16px,2.4vh,26px);
  background:color-mix(in srgb, var(--bg) 93%, transparent);
  backdrop-filter:blur(14px); border-top:var(--rule);
  display:grid; grid-template-columns:auto 1fr; gap:0 26px; align-items:start;
}
.world__no{
  font-family:var(--mono); font-size:clamp(20px,2.6vw,34px); color:var(--accText);
  line-height:1; grid-row:1 / span 3; padding-top:4px;
}
.world__tag{font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink3)}
.world__scrim h3{font-size:clamp(19px,2.5vw,30px); margin-top:8px}
.world__scrim p{color:var(--ink2); font-size:clamp(13.5px,1.4vw,15.5px); max-width:66ch; margin-top:10px; line-height:1.55}
.world__row{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:clamp(12px,1.8vh,18px); grid-column:2}

/* pointer-events:none обязателен: подпись растянута на всю ширину сцены
   и лежит поверх карточки — невидимая, она перехватывала клик по кнопке
   «Открыть сайт», и ссылки на работы не открывались. */
.world__title{
  position:absolute; left:0; right:0; bottom:clamp(70px,11vh,116px); text-align:center; z-index:1;
  pointer-events:none;
  opacity:clamp(0, min(calc((var(--near,0) - .42) * 5), calc((.78 - var(--near,0)) * 9)), 1);
  transition:opacity .12s linear;
}
.world__title b{display:block; font-size:clamp(20px,2.8vw,34px); font-weight:var(--w-black); letter-spacing:-.035em}
.world__title em{
  font-style:normal; display:block; margin-top:10px; font-family:var(--mono);
  font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink3);
}

.worlds__nav{pointer-events:none; position:absolute; right:clamp(14px,2.2vw,30px); top:50%; transform:translateY(-50%); z-index:4; display:grid; gap:10px}
.worlds__nav b{display:block; width:18px; height:1px; background:var(--ink3); transition:.3s var(--ease)}
.worlds__nav b.on{background:var(--accText); width:30px}

.worlds__hint{
  position:absolute; left:var(--pad); bottom:24px; z-index:4;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink3); display:flex; align-items:center; gap:10px; pointer-events:none;
  opacity:clamp(0, calc(1 - var(--p, 0) * 14), 1); transition:opacity .2s;
}
.worlds__hint i{display:block; width:26px; height:1px; background:var(--accText)}

.worlds.is-live + .works-list .works-list__intro{display:none}
@media (prefers-reduced-motion: reduce){ .worlds{display:none} }

/* ---------- полный список работ ---------- */
.work{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:clamp(22px,4vw,54px); align-items:center;
  padding:clamp(30px,4vw,56px) 0; border-top:var(--rule);
  /* Приход по якорю с главной: заголовок не должен уезжать под липкую шапку. */
  scroll-margin-top:96px;
}
.work:first-of-type{border-top:0}
.work:nth-child(even) .work__media{order:-1}
.work__no{font-family:var(--mono); font-size:12px; color:var(--accText); letter-spacing:.1em}
.work__tag{font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink3); margin-left:14px}
.work h3{font-size:clamp(22px,2.6vw,32px); margin:16px 0 0}
.work__sub{color:var(--ink3); font-size:12.5px; margin-top:10px; font-family:var(--mono)}
.work__txt{color:var(--ink2); margin-top:20px; font-size:15.5px; line-height:1.62; max-width:56ch}
.work__list{margin-top:22px; display:grid}
.work__list li{
  display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:start;
  font-size:14.5px; color:var(--ink2); padding:10px 0; border-top:var(--rule); line-height:1.5;
}
.work__list svg{width:15px; height:15px; color:var(--accText); margin-top:4px}
.work__chips{display:flex; flex-wrap:wrap; gap:6px; margin-top:22px}
.work__cta{display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; align-items:center}

.state{
  display:inline-flex; align-items:center; gap:7px; font-family:var(--mono);
  font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ok);
}
.state::before{content:''; width:6px; height:6px; border-radius:50%; background:currentColor}
.state--draft{color:var(--ink3)}

.work__media{position:relative}
.shot{overflow:hidden; border:1px solid var(--line); background:var(--card2); position:relative}
.shot::before{content:''; display:block; height:26px; background:var(--card2); border-bottom:var(--rule)}
.shot::after{
  content:''; position:absolute; top:10px; left:12px; width:6px; height:6px; border-radius:50%;
  background:var(--ink3); box-shadow:12px 0 0 var(--ink3), 24px 0 0 var(--ink3); opacity:.5;
}
/* height:auto обязателен: атрибут height="1200" у <img> — презентационная
   подсказка, она задаёт CSS-высоту и перебивает aspect-ratio. */
.shot img{width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; object-position:top center}
.phone{
  position:absolute; right:-8px; bottom:-18px; width:21%; min-width:96px; z-index:2;
  overflow:hidden; border:1px solid var(--line2); background:var(--card2);
}
.phone img{width:100%; height:auto; aspect-ratio:9/17; object-fit:cover; object-position:top center}

/* ============================================================
   УСЛУГИ И ЦЕНЫ
   ============================================================ */
.steps{counter-reset:s; display:grid; grid-template-columns:repeat(4,1fr); margin-top:40px; border-top:var(--rule); border-left:var(--rule)}
.step{padding:26px 24px 30px; border-right:var(--rule); border-bottom:var(--rule)}
.step::before{
  counter-increment:s; content:counter(s,decimal-leading-zero);
  font-family:var(--mono); font-size:12px; color:var(--accText); letter-spacing:.1em;
}
.step h3{font-size:17px; margin-top:16px; letter-spacing:-.025em}
.step p{color:var(--ink2); font-size:14.5px; margin-top:12px; line-height:1.6}
.step em{display:block; margin-top:18px; padding-top:12px; border-top:var(--rule); font-family:var(--mono); font-size:11px; color:var(--ink3); font-style:normal}

.tech{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(28px,4vw,60px);
  align-items:start; margin-top:40px; padding-top:34px; border-top:var(--rule);
}
/* display:contents у строк — чтобы числа делили одну колонку
   и подписи выстроились по одной вертикали. */
.techstat{display:grid; grid-template-columns:max-content 1fr; column-gap:24px}
.techstat li{display:contents}
.techstat b, .techstat span{padding-bottom:18px; margin-bottom:18px; border-bottom:var(--rule)}
.techstat li:last-child b, .techstat li:last-child span{border-bottom:0; margin-bottom:0; padding-bottom:0}
.techstat b{font-size:clamp(26px,3.4vw,42px); font-weight:var(--w-black); letter-spacing:-.045em; line-height:1; color:var(--ink); white-space:nowrap}
.techstat span{color:var(--ink2); font-size:14.5px; line-height:1.45; align-self:center}
.tech__note{font-size:12px; color:var(--ink3); margin-top:22px; font-family:var(--mono); line-height:1.6}

.plan{padding:30px 26px 32px; border-right:var(--rule); border-bottom:var(--rule); display:flex; flex-direction:column; position:relative}
.plan--hot{background:var(--card)}
.plan__badge{
  position:absolute; top:16px; right:22px; font-family:var(--mono); font-size:10px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--accText);
}
.plan h3{font-size:19px}
.plan__price{font-size:clamp(24px,2.8vw,34px); font-weight:var(--w-black); letter-spacing:-.045em; margin-top:18px; line-height:1}
.plan__price small{display:block; font-family:var(--mono); font-size:11.5px; font-weight:400; color:var(--ink3); letter-spacing:.04em; margin-top:10px}
.plan__for{color:var(--ink2); font-size:14.5px; margin-top:16px; padding-bottom:18px; border-bottom:var(--rule); line-height:1.55}
.plan__list{margin:16px 0 26px; display:grid}
.plan__list li{display:grid; grid-template-columns:auto 1fr; gap:10px; font-size:14px; color:var(--ink2); align-items:start; padding:8px 0}
.plan__list svg{width:14px; height:14px; color:var(--accText); margin-top:4px}
.plan .btn{margin-top:auto}

/* ============================================================
   ОБО МНЕ И ВОПРОСЫ
   ============================================================ */
.cv{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(28px,4vw,60px); margin-top:40px; align-items:start}
.cv__photo{overflow:hidden; border:1px solid var(--line); background:var(--card); aspect-ratio:4/5; display:grid; place-items:center}
.cv__photo img{width:100%; height:100%; object-fit:cover}
.cv__ph{text-align:center; padding:30px; color:var(--ink3); font-family:var(--mono); font-size:11.5px; line-height:1.8}
.cv__ph svg{width:38px; height:38px; margin:0 auto 16px; opacity:.5}

.tl{display:grid; margin-top:30px}
.tl li{display:grid; grid-template-columns:130px 1fr; gap:24px; padding:20px 0; border-top:var(--rule)}
.tl time{font-family:var(--mono); font-size:11.5px; color:var(--accText); padding-top:4px; letter-spacing:.1em; text-transform:uppercase}
.tl b{display:block; font-size:16.5px; letter-spacing:-.025em}
.tl p{color:var(--ink2); font-size:14.5px; margin-top:9px; line-height:1.6}

.faq{margin-top:40px; border-top:var(--rule); counter-reset:q}
.faq details{border-bottom:var(--rule)}
.faq summary{
  cursor:pointer; list-style:none; padding:20px 44px 20px 52px; position:relative;
  font-weight:var(--w-mid); font-size:16.5px; letter-spacing:-.02em;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{
  counter-increment:q; content:counter(q,decimal-leading-zero);
  position:absolute; left:0; top:22px; font-family:var(--mono); font-size:11.5px; color:var(--ink3); letter-spacing:.08em;
}
.faq summary::after{
  content:''; position:absolute; right:8px; top:50%; width:10px; height:10px;
  border-right:1px solid var(--accText); border-bottom:1px solid var(--accText);
  transform:translateY(-70%) rotate(45deg); transition:transform .25s var(--ease);
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq p{color:var(--ink2); padding:0 40px 24px 52px; font-size:15px; max-width:76ch; line-height:1.65}

/* ============================================================
   КОНТАКТЫ
   ============================================================ */
.cta{
  border:1px solid var(--line); padding:clamp(28px,4vw,54px);
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.9fr);
  gap:clamp(28px,4vw,54px); align-items:start; margin-top:40px;
}
.cta h2{font-size:clamp(26px,3.4vw,42px); max-width:16ch}
.cta p{color:var(--ink2); margin-top:18px; font-size:15.5px; max-width:52ch; line-height:1.62}

.contacts{display:grid; border-top:var(--rule)}
.contacts a{
  display:flex; align-items:center; gap:14px; padding:16px 4px; text-decoration:none;
  border-bottom:var(--rule); transition:padding-left .2s var(--ease), background .2s;
}
.contacts a:hover{padding-left:14px; background:var(--card)}
.contacts svg{width:18px; height:18px; color:var(--accText); flex:none}
.contacts b{display:block; font-size:15px; font-weight:var(--w-mid)}
.contacts em{font-style:normal; display:block; font-size:12px; color:var(--ink3); font-family:var(--mono); margin-top:3px}

@media (max-width:1080px){
  .steps{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .hero__grid{grid-template-columns:1fr; gap:32px}
  .peek{grid-template-columns:1fr}
  .work{grid-template-columns:1fr; gap:26px}
  .work:nth-child(even) .work__media{order:0}
  .work__media{order:-1}
  .tech,.cta,.cv{grid-template-columns:1fr}
  .tl li{grid-template-columns:110px 1fr; gap:18px}
}
@media (max-width:760px){
  /* На узком экране аномалия идёт под текстом на всю ширину. */
  .hero__gl{inset:-6% -25% auto -25%; height:74vh; opacity:.3; -webkit-mask-image:none; mask-image:none}
  /* Мир разворачивается в мокап телефона: те же пропорции, что в worlds.js. */
  .world__card{width:78vw; aspect-ratio:9/17}
  .world__scrim{padding:12px 14px 16px; grid-template-columns:1fr; gap:0}
  .world__no{display:none}
  .world__scrim h3{font-size:18px}
  .world__scrim p{display:none}
  .world__row{grid-column:1}
  .world__row .chip{display:none}
  .world__title{bottom:auto; top:calc(50% + 40vh)}
  .worlds__nav{display:none}
  .phone{width:25%; right:-6px; bottom:-12px}
}
@media (max-width:560px){
  .tl li{grid-template-columns:1fr; gap:6px}
  .tl time{padding-top:0}
  .steps{grid-template-columns:1fr}
  .faq summary{padding-left:42px}
  .faq p{padding-left:42px}
}
@media (max-width:1220px){
  .hero__gl{inset:-8% -12% -8% 44%}
}

/* ============================================================
   ЗАЧЕМ НУЖЕН САЙТ · ДРУГИЕ ПРОЕКТЫ
   ============================================================ */
.why{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(28px,4vw,64px); align-items:start}
.why__list{counter-reset:w; border-top:var(--rule); margin-top:4px}
.why__list li{display:grid; grid-template-columns:auto 1fr; gap:22px; padding:20px 0; border-bottom:var(--rule)}
.why__list li::before{
  counter-increment:w; content:counter(w,decimal-leading-zero);
  font-family:var(--mono); font-size:11.5px; color:var(--accText); letter-spacing:.08em; padding-top:5px;
}
.why__list b{display:block; font-size:16.5px; letter-spacing:-.025em}
.why__list p{color:var(--ink2); font-size:14.5px; margin-top:8px; line-height:1.6; max-width:58ch}

.card__cta{display:flex; flex-wrap:wrap; gap:8px; margin-top:22px}

@media (max-width:900px){
  .why{grid-template-columns:1fr; gap:26px}
}