/* Спільні стилі для варіантів 11–14 («Студія Pro 2»). Кольори керуються з JS через CSS-змінні. */
:root{--bg:#eef0f3;--ink:#0d0e10;--soft:#646a74;--line:rgba(13,14,16,.12);--card:rgba(255,255,255,.55);--acc:#1f4cff;--acc2:#ffcf3a;
--f:"Inter Tight",system-ui,-apple-system,"Segoe UI",sans-serif;--d:var(--f);--m:"JetBrains Mono",ui-monospace,monospace}
*{box-sizing:border-box}
html{background:var(--bg);overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f);font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:clip}
html.lenis,html.lenis body{height:auto}
img{max-width:100%;height:auto;display:block}a{color:inherit}
.wrap{max-width:1380px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right))}
h1,h2,h3{margin:0;font-family:var(--d);font-weight:800;letter-spacing:-.05em;line-height:.9;text-wrap:balance}
p{margin:0}
.mono{font-family:var(--m);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--soft)}
#gl{position:fixed;inset:0;width:100vw;height:100vh;z-index:0;pointer-events:none;display:block}
main,footer,nav{position:relative;z-index:2}
/* прелоадер: лічильник + дві шторки */
#pre{position:fixed;inset:0;z-index:200;pointer-events:none}
#pre .half{position:absolute;left:0;right:0;height:50.5%;background:#0a0a0c}
#pre .t{top:0}#pre .b{bottom:0}
#pre .num{position:absolute;right:max(20px,env(safe-area-inset-right));bottom:24px;color:#fff;font:800 clamp(90px,20vw,280px)/.8 var(--d);letter-spacing:-.06em;font-variant-numeric:tabular-nums}
#pre .lab{position:absolute;left:max(20px,env(safe-area-inset-left));bottom:30px;color:#fff;opacity:.6;font-weight:600}
#pre .bar{position:absolute;left:0;top:50%;height:2px;width:100%;background:var(--acc);transform-origin:left;transform:scaleX(0)}
/* нав */
nav{position:fixed;inset:0 0 auto;z-index:50;padding-top:env(safe-area-inset-top)}
nav .wrap{display:flex;justify-content:space-between;align-items:center;padding-block:16px}
.logo{font-weight:800;font-size:22px;letter-spacing:-.04em;text-decoration:none;display:flex;align-items:center;gap:8px;mix-blend-mode:difference;color:#fff}
.logo i{width:12px;height:12px;border-radius:50%;background:#fff;display:inline-block}
.menu{display:flex;gap:4px;background:rgba(255,255,255,.55);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border:1px solid rgba(255,255,255,.5);border-radius:999px;padding:5px;box-shadow:0 10px 30px -16px rgba(0,0,0,.35)}
.menu a{text-decoration:none;font-weight:600;font-size:14px;padding:9px 16px;border-radius:999px;color:#0d0e10;transition:background .2s}
.menu a:hover{background:rgba(13,14,16,.08)}
.menu a.cta{background:#0d0e10;color:#fff}
.menu a:active{transform:scale(.97)}
/* прогрес скролу */
#prog{position:fixed;left:0;top:0;height:2px;width:100%;background:var(--acc);transform-origin:left;transform:scaleX(0);z-index:60}
/* кнопки */
.btn{position:relative;display:inline-flex;align-items:center;gap:10px;padding:17px 26px;border-radius:999px;font-weight:600;text-decoration:none;will-change:transform;overflow:hidden;isolation:isolate}
.btn::before{content:"";position:absolute;inset:0;background:var(--acc);border-radius:inherit;transform:translateY(101%);transition:transform .45s cubic-bezier(.7,0,.2,1);z-index:-1}
.btn:hover::before{transform:translateY(0)}
.btn-k{background:var(--ink);color:var(--bg)}
.btn-k:hover{color:#fff}
.btn:active{transform:scale(.97)!important;transition:transform .1s ease-out}
.btn:focus-visible,.menu a:focus-visible,a:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
/* split */
.split .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.split .c{display:inline-block;will-change:transform,opacity,filter;transform-origin:50% 100%}
/* hero */
.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding-block:120px 34px;perspective:900px}
.hero h1{font-size:clamp(56px,10.4vw,186px)}
.hero h1 .accent{color:var(--acc)}
.hero .bottom{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:end;margin-top:28px}
.hero .bottom p{max-width:34ch;color:var(--soft);font-size:clamp(17px,1.4vw,20px);font-weight:500}
.hero .acts{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.hint{display:flex;align-items:center;gap:10px}
.hint i{width:1px;height:36px;background:currentColor;opacity:.4;transform-origin:top;animation:hint 1.8s cubic-bezier(.6,0,.3,1) infinite}
@keyframes hint{0%{transform:scaleY(0)}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
/* manifesto */
.manifesto{padding-block:24vh 16vh;perspective:1000px}
.manifesto p.big{font-size:clamp(30px,4.4vw,72px);font-weight:600;letter-spacing:-.04em;line-height:1.04;max-width:20ch;font-family:var(--d)}
.manifesto p.big .mw{opacity:.14;display:inline-block}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:12vh;perspective:1200px}
.stat{background:var(--card);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--line);border-radius:24px;padding:24px;transform-style:preserve-3d}
.stat b{display:block;font-family:var(--d);font-size:clamp(36px,4.6vw,76px);letter-spacing:-.055em;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.stat span{color:var(--soft)}
.src{margin-top:14px}
/* маркі 3D */
.marq{overflow:hidden;white-space:nowrap;padding-block:7vh;perspective:600px}
.marq .row{display:inline-flex;gap:5vw;font-family:var(--d);font-size:clamp(44px,8vw,140px);font-weight:800;letter-spacing:-.05em;will-change:transform}
.marq .row span::after{content:"✳";margin-left:5vw;color:var(--acc)}
.marq .tilt{transform:rotateX(18deg)}
/* роботи */
.works .head{display:flex;justify-content:space-between;align-items:end;padding-top:14vh;margin-bottom:5vh}
.works h2{font-size:clamp(56px,9vw,160px)}
.track-wrap{overflow:hidden}
.track{display:flex;gap:3vw;padding-left:max(20px,calc((100vw - 1380px)/2 + 20px));padding-right:12vw;will-change:transform;transform-style:preserve-3d}
.proj{flex:0 0 min(76vw,1060px);text-decoration:none;display:block;transform-style:preserve-3d;will-change:transform}
.proj .frame{position:relative;aspect-ratio:16/9.6;border-radius:30px;overflow:hidden;background:#15171b;box-shadow:0 60px 120px -60px rgba(0,0,0,.7)}
.proj .frame img.d{width:100%;height:100%;object-fit:cover;object-position:top;transform:scale(1.14);will-change:transform}
.proj .frame img.m{position:absolute;right:4%;bottom:6%;width:17%;border-radius:22px;border:5px solid #0d0e10;box-shadow:0 30px 60px -20px rgba(0,0,0,.6)}
.proj .shine{position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.22) 45%,transparent 60%);transform:translateX(-120%);pointer-events:none}
.proj:hover .shine{transform:translateX(120%);transition:transform 1s cubic-bezier(.2,.8,.2,1)}
.proj .meta{display:grid;grid-template-columns:auto 1fr auto;gap:24px;margin-top:22px;align-items:start}
.proj .no{font-family:var(--m);color:var(--soft);padding-top:8px}
.proj h3{font-size:clamp(34px,4vw,64px)}
.proj .res{color:var(--soft);max-width:44ch;margin-top:8px}
.proj .tags{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;max-width:280px}
.proj .tags i{font-style:normal;font-size:13px;font-weight:600;border:1px solid var(--line);border-radius:999px;padding:5px 12px}
.proj.next .frame{display:grid;place-items:center;background:var(--acc);color:#fff}
.proj.next .frame div{text-align:center;padding:30px}
.proj.next .frame b{display:block;font-family:var(--d);font-size:clamp(40px,6vw,110px);letter-spacing:-.05em;line-height:.9}
.rescue{margin-top:6vh;color:var(--soft);max-width:70ch}
/* ціни */
.price{padding-block:20vh 12vh;clip-path:circle(0% at 50% 50%)}
.price h2{font-size:clamp(56px,9vw,160px)}
.svc{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:7vh;perspective:1200px}
.pk{border:1px solid var(--line);background:var(--card);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-radius:30px;padding:32px;display:flex;flex-direction:column;gap:16px;transition:border-color .3s;transform-style:preserve-3d;will-change:transform}
.pk.hit{background:var(--acc);border-color:var(--acc);color:#fff}
.pk h3{font-size:28px;letter-spacing:-.03em;line-height:1}
.pk .pr{font-family:var(--d);font-size:clamp(44px,4.4vw,64px);font-weight:800;letter-spacing:-.055em;line-height:1}
.pk ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:7px;opacity:.85}
.guar{margin-top:6vh;font-family:var(--d);font-size:clamp(26px,3.2vw,52px);font-weight:600;letter-spacing:-.04em;line-height:1.05;max-width:24ch}
.guar b{color:var(--acc2)}
.onote{margin-top:16px;color:var(--soft);max-width:60ch}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:14vh}
.steps div{border-top:1px solid var(--line);padding-top:18px;display:flex;flex-direction:column;gap:10px}
.steps h3{font-size:24px;letter-spacing:-.03em;line-height:1.05}
.steps p{color:var(--soft);font-size:15.5px}
/* футер */
footer{padding-block:24vh 30px}
.end .big{display:block;text-decoration:none;font-size:clamp(70px,15vw,270px);font-weight:800;letter-spacing:-.065em;line-height:.82;font-family:var(--d)}
.end .big em{font-style:normal;color:var(--acc);display:inline-block;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.end .big:hover em{transform:translateX(.12em)}
.end .row{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;margin-top:8vh;border-top:1px solid var(--line);padding-top:20px;color:var(--soft)}
/* курсор */
#cur{position:fixed;left:0;top:0;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:#fff;mix-blend-mode:difference;z-index:300;pointer-events:none;transition:width .35s cubic-bezier(.2,.8,.2,1),height .35s,margin .35s;display:grid;place-items:center;font:600 12px var(--f);color:#000}
#cur.big{width:96px;height:96px;margin:-48px 0 0 -48px}
#cur span{opacity:0;transition:opacity .2s}#cur.big span{opacity:1}
@media (hover:none){#cur{display:none}}
.back-to-all{position:fixed;left:max(14px,env(safe-area-inset-left,0px));bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:150;display:inline-flex;align-items:center;gap:6px;padding:11px 16px;border-radius:999px;background:rgba(15,16,18,.86);color:#fff;font:600 14px/1 system-ui,-apple-system,"Segoe UI",sans-serif;text-decoration:none;backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.18);transition:transform .18s}
.back-to-all:hover{transform:translateY(-2px)}
@media (max-width:900px){
  .menu a:not(.cta){display:none}
  .works .head .mono{display:none}
  .hero .bottom{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr}
  .track{padding-left:8vw;padding-right:8vw;gap:4vw}
  .proj{flex:0 0 84vw}
  .proj .meta{grid-template-columns:1fr}.proj .tags{justify-content:flex-start}
  .proj .frame img.m{width:26%}
  .svc,.steps{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .manifesto p.big .mw{opacity:1}
  .price{clip-path:none}
  .proj .frame img.d{transform:none}
}
@media (prefers-reduced-transparency:reduce){.menu,.stat,.pk{backdrop-filter:none;-webkit-backdrop-filter:none;background:#fff}}

/* v2: слова в абзацах, лінії кроків, шторка меню, елегантна типографіка */
.wd{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
.wd>span{display:inline-block;will-change:transform}
.steps>div{position:relative;border-top:0!important}
.steps>div .ln{position:absolute;left:0;right:0;top:0;height:1px;background:var(--line);transform-origin:left}
#curtain{position:fixed;inset:0;z-index:180;background:var(--acc);display:none;pointer-events:none}
h1,h2,.end .big,.manifesto p.big,.stat b,.pk .pr,.proj h3,.guar{font-weight:var(--dw,800);letter-spacing:var(--dls,-.05em)}
.hero h1 .accent{font-style:var(--accs,normal)}
.serif-i{font-family:var(--si,inherit);font-style:italic;font-weight:400}

/* v3 (№11): формула, табло-цифри, бейдж */
.formula{position:relative;height:340vh}
.f-pin{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;overflow:hidden;perspective:1100px}
.f-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:.18em .3em;font-family:var(--d);font-weight:var(--dw,800);letter-spacing:var(--dls,-.05em);font-size:clamp(46px,8.4vw,150px);line-height:.95;position:relative;z-index:2}
.f-t,.f-o{display:inline-block;will-change:transform,opacity}
.f-o{color:var(--acc);font-weight:400}
.f-res{color:var(--acc);position:relative}
.f-res::after{content:"";position:absolute;left:0;right:0;bottom:.04em;height:.06em;background:var(--acc);transform:scaleX(var(--u,0));transform-origin:left}
.f-sub{margin-top:28px;position:relative;z-index:2}
.f-big{position:absolute;right:-2vw;bottom:-6vh;font-family:var(--d);font-weight:800;font-size:46vw;line-height:.8;letter-spacing:-.07em;color:transparent;-webkit-text-stroke:1px var(--line);pointer-events:none;z-index:1}
.odo{display:inline-flex;align-items:flex-start;overflow:hidden;height:1em;line-height:1;vertical-align:top}
.odo .col{flex:none}
.odo .col{display:flex;flex-direction:column;will-change:transform}
.odo .col span{height:1em;display:block}
.end{position:relative}
.badge{position:absolute;right:max(20px,env(safe-area-inset-right));top:18vh;width:170px;height:170px;display:grid;place-items:center;text-decoration:none;color:var(--ink)}
.badge svg{position:absolute;inset:0;width:100%;height:100%;font:600 13.5px var(--m);letter-spacing:.2em;fill:currentColor}
.badge b{width:74px;height:74px;border-radius:50%;background:var(--acc);color:#fff;display:grid;place-items:center;font-size:28px;transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.badge:hover b{transform:scale(1.12) rotate(45deg)}
@media (max-width:900px){.formula{height:190vh}.badge{position:relative;top:auto;right:auto;margin-top:30px;width:130px;height:130px}.badge b{width:56px;height:56px}}
@media (prefers-reduced-motion:reduce){.formula{height:auto}.f-pin{position:static;height:auto;padding-block:16vh}}

/* легкий режим: без 3D, м'які кольорові плями, що повільно «дихають» */
html.lite body::before{content:"";position:fixed;inset:-20%;z-index:0;pointer-events:none;
 background:radial-gradient(40% 35% at 75% 25%,color-mix(in srgb,var(--acc) 38%,transparent),transparent 70%),radial-gradient(35% 30% at 20% 75%,color-mix(in srgb,var(--acc2) 30%,transparent),transparent 70%);
 animation:liteMove 18s ease-in-out infinite alternate}
@keyframes liteMove{to{transform:translate3d(-6%,4%,0) scale(1.08)}}
@media (max-width:900px){
 .hero{padding-block:100px 28px}
 .hero h1{font-size:clamp(46px,13.5vw,80px)}
 .stat{padding:18px}.stat b{font-size:clamp(26px,7.6vw,40px);white-space:nowrap}
 .f-row{font-size:clamp(38px,11vw,64px)}
 .end .big{font-size:clamp(56px,17vw,100px)}
 .pk{padding:24px}
 .menu{padding:4px}
 .back-to-all{bottom:calc(14px + env(safe-area-inset-bottom,0px))}
}
/* планшет: ціни й кроки у 2 колонки */
@media (min-width:601px) and (max-width:900px){
 .svc{grid-template-columns:1fr 1fr}.svc .pk:last-child{grid-column:1/-1}
 .steps{grid-template-columns:1fr 1fr}
 .stats{grid-template-columns:1fr 1fr}
}
/* ===== ФОНИ (вибір: ?bg=grid | aurora | grain | topo або CFG.bg) ===== */
#bgfx{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
#gl{z-index:1}
/* 1. Сітка: тонка сітка, що тане до країв, + м'яке світло акценту; повільно їде зі скролом */
.bg-grid{background:radial-gradient(60% 50% at 78% 18%,color-mix(in srgb,var(--acc) 22%,transparent),transparent 70%)}
.bg-grid::before{content:"";position:absolute;inset:-80px;background-image:linear-gradient(color-mix(in srgb,var(--ink) 15%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--ink) 15%,transparent) 1px,transparent 1px);background-size:56px 56px;transform:translate3d(0,calc(var(--sy,0) * -.08px),0);
 -webkit-mask:radial-gradient(70% 65% at 50% 40%,#000 30%,transparent 80%);mask:radial-gradient(70% 65% at 50% 40%,#000 30%,transparent 80%)}
.bg-grid::after{content:"";position:absolute;width:520px;height:520px;left:calc(var(--mx,50) * 1%);top:calc(var(--my,40) * 1%);transform:translate(-50%,-50%);background:radial-gradient(closest-side,color-mix(in srgb,var(--acc) 16%,transparent),transparent);transition:left .6s ease-out,top .6s ease-out}
/* 2. Аврора: великі розмиті кольорові плями повільно перетікають */
.bg-aurora i{position:absolute;width:62vmax;height:62vmax;border-radius:50%;filter:blur(90px);opacity:.42;mix-blend-mode:var(--blend,normal);will-change:transform}
.bg-aurora i:nth-child(1){background:var(--acc);left:-14vmax;top:-20vmax;animation:au1 26s ease-in-out infinite alternate}
.bg-aurora i:nth-child(2){background:var(--acc2);right:-18vmax;top:10vmax;animation:au2 31s ease-in-out infinite alternate}
.bg-aurora i:nth-child(3){background:#2fd4c4;left:20vmax;bottom:-30vmax;animation:au3 23s ease-in-out infinite alternate;opacity:.3}
@keyframes au1{to{transform:translate3d(22vmax,16vmax,0) scale(1.15)}}
@keyframes au2{to{transform:translate3d(-24vmax,18vmax,0) scale(.9)}}
@keyframes au3{to{transform:translate3d(-14vmax,-22vmax,0) scale(1.2)}}
/* 3. Зерно: плівкове зерно + віньєтка + «прожектор» за курсором */
.bg-grain{background:radial-gradient(42vmax 42vmax at calc(var(--mx,50) * 1%) calc(var(--my,40) * 1%),color-mix(in srgb,var(--acc) 30%,transparent),transparent 70%),radial-gradient(30vmax 30vmax at 85% 85%,color-mix(in srgb,var(--acc2) 26%,transparent),transparent 70%),radial-gradient(120% 90% at 50% 40%,transparent 55%,color-mix(in srgb,var(--ink) 14%,transparent))}
.bg-grain::after{content:"";position:absolute;inset:-50%;opacity:.2;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain 1.2s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}
/* 4. Топографія: лінії рельєфу, як на карті висот; повільно дрейфують */
.bg-topo svg{position:absolute;left:50%;top:50%;width:170vmax;height:170vmax;transform:translate(-50%,-50%) rotate(calc(var(--sy,0) * .006deg));opacity:.9}
.bg-topo path{fill:none;stroke:var(--line);stroke-width:1.1}
.bg-topo path:nth-child(5n){stroke:color-mix(in srgb,var(--acc) 45%,transparent);stroke-width:1.4}
@media (prefers-reduced-motion:reduce){.bg-aurora i,.bg-grain::after{animation:none}}

/* блік по картці з цифрою, коли цифра рахується */
.stat{position:relative;overflow:hidden}
.stat::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,color-mix(in srgb,#fff 55%,transparent) 48%,transparent 66%);transform:translateX(-120%);pointer-events:none}
.stat.lit::after{animation:litSweep 1.4s cubic-bezier(.2,.8,.2,1) .15s}
@keyframes litSweep{to{transform:translateX(120%)}}
/* топографія: по підсвічених лініях біжать штрихи */
.bg-topo path:nth-child(5n){stroke-dasharray:14 22;animation:topoFlow 9s linear infinite}
.bg-topo path:nth-child(7n){stroke:color-mix(in srgb,var(--acc2) 40%,transparent);stroke-dasharray:3 14;animation:topoFlow 14s linear infinite reverse}
@keyframes topoFlow{to{stroke-dashoffset:-360}}
.proj .frame img.m{will-change:transform}
@media (prefers-reduced-motion:reduce){.bg-topo path{animation:none!important}.stat.lit::after{animation:none}}

/* телефон: легше для відеокарти — без матового скла на картках */
@media (max-width:900px){
 .stat,.pk{backdrop-filter:none;-webkit-backdrop-filter:none}
 .stat{background:color-mix(in srgb,var(--bg) 82%,var(--ink) 6%)}
 .pk:not(.hit){background:color-mix(in srgb,var(--bg) 80%,var(--ink) 8%)}
 .works .head{padding-top:12vh;margin-bottom:3vh}
 .proj .meta{gap:10px;margin-top:16px}
 .proj h3{font-size:clamp(28px,8vw,40px)}
 .proj .res{font-size:15px}
 .proj .frame{aspect-ratio:4/3.2}
 .proj .frame img.m{width:28%;right:5%;bottom:5%;border-width:4px;border-radius:16px}
}
/* телефон: акуратніше — фігури тихіші за текстом, крок між блоками рівніший */
@media (max-width:600px){
 #gl{opacity:.7}
 .steps{margin-top:9vh;gap:26px}
 .steps h3{font-size:22px}
 .end .big em{font-size:.7em}
 .end .row{font-size:14px;gap:8px 16px}
 .manifesto p.big{text-wrap:balance}
}

/* ПК: картка роботи разом із підписом вміщається в екран */
@media (min-width:901px){
 .works .head{padding-top:9vh;margin-bottom:3vh}
 .works h2{font-size:clamp(56px,7vw,130px)}
 .proj{flex-basis:min(76vw,1060px,calc((100vh - 400px) * 1.667))}
 .proj .meta{margin-top:16px}
}
/* телефон: менше роботи для відеокарти — фон без анімації, плями статичні */
@media (max-width:900px) and (pointer:coarse){
 .bg-topo path{animation:none!important}
 .bg-topo svg{transform:translate(-50%,-50%)}
 html.lite body::before{animation:none}
 .stat.lit::after{animation:none}
 .proj,.proj .frame img.d,.proj .frame img.m{will-change:auto}
}