/* sarjve.com — графит и огонь.
   Двигаем только transform и opacity: ни blur-фона под шапкой, ни анимаций
   background-position или атрибутов SVG — так страница не лагает на слабых
   телефонах. Hover нигде не сдвигает саму кнопку или карточку: сдвиг уводит
   область наведения из-под курсора, и элемент начинает мигать. */

/* TOKENS:BEGIN — генерирует tools/theme.js из tools/brand/palette.json, руками не править */
:root {
  --bg:#0E0C0D;
  --bg-2:#141112;
  --surface:#1B1718;
  --surface-2:#231E1F;
  --line:#2F2829;
  --line-2:#453B3C;
  --ink:#F3EEEC;
  --ink-soft:#C7BCBB;
  --ink-mute:#9C8F8F;
  --accent:#A3162F;
  --accent-2:#EE5068;
  --accent-3:#5E0E1C;
  --on-accent:#FFFFFF;
  --ok:#5DC596;
  --err:#FF9166;
  --term-bg:#080607;
  --hl-1:#EE5068;
  --hl-2:#EE5068;
  --accent-bright:#EE5068;
  --band:linear-gradient(118deg,#A3162F 0%,#5E0E1C 100%);
  --line-soft:#2F2829;
  --plate-accent-ink:#8E1530;
  --shadow-c:rgba(0,0,0,.85);
  --backdrop:rgba(4,4,6,.74);
  --term-ok:#5DC596;
  --term-err:#FF9166;
  --broken:#FF9166;
  --fixed:#5DC596;
  --term-line:#1D1F24;
  color-scheme:dark;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg:#F2EEEB;
    --bg-2:#E8E2DE;
    --surface:#FBF9F7;
    --surface-2:#F0EBE7;
    --line:#DDD5D0;
    --line-2:#C6BAB4;
    --ink:#150F10;
    --ink-soft:#3E3435;
    --ink-mute:#685B5C;
    --accent:#8E1530;
    --accent-2:#7C1229;
    --accent-3:#3A0A14;
    --on-accent:#FFFFFF;
    --ok:#1D6B47;
    --err:#B4441B;
    --term-bg:#150F10;
    --hl-1:#8E1530;
    --hl-2:#8E1530;
    --accent-bright:#EE5068;
    --band:linear-gradient(118deg,#8E1530 0%,#3A0A14 100%);
    --shadow-c:rgba(40,12,18,.18);
    --backdrop:rgba(30,10,14,.45);
    --line-soft:#DDD5D0;
    --plate-accent-ink:#8E1530;
    --term-ok:#5DC596;
    --term-err:#FF9166;
    --broken:#FF9166;
    --fixed:#5DC596;
    --term-line:#1D1F24;
    color-scheme:light;
  }
}
:root[data-theme="light"] {
  --bg:#F2EEEB;
  --bg-2:#E8E2DE;
  --surface:#FBF9F7;
  --surface-2:#F0EBE7;
  --line:#DDD5D0;
  --line-2:#C6BAB4;
  --ink:#150F10;
  --ink-soft:#3E3435;
  --ink-mute:#685B5C;
  --accent:#8E1530;
  --accent-2:#7C1229;
  --accent-3:#3A0A14;
  --on-accent:#FFFFFF;
  --ok:#1D6B47;
  --err:#B4441B;
  --term-bg:#150F10;
  --hl-1:#8E1530;
  --hl-2:#8E1530;
  --accent-bright:#EE5068;
  --band:linear-gradient(118deg,#8E1530 0%,#3A0A14 100%);
  --shadow-c:rgba(40,12,18,.18);
  --backdrop:rgba(30,10,14,.45);
  --line-soft:#DDD5D0;
  --plate-accent-ink:#8E1530;
  --term-ok:#5DC596;
  --term-err:#FF9166;
  --broken:#FF9166;
  --fixed:#5DC596;
  --term-line:#1D1F24;
  color-scheme:light;
}
/* TOKENS:END */

:root {
  --font:"Manrope","Noto Sans Georgian",system-ui,-apple-system,"Segoe UI",sans-serif;
  --display:"Unbounded","Noto Sans Georgian","Manrope",system-ui,sans-serif;
  --mono:"JetBrains Mono","Noto Sans Georgian",ui-monospace,monospace;
  --hdr:68px;
  /* производные: считаются из палитры, поэтому одинаково верны днём и ночью */
  --tint-1:color-mix(in srgb,var(--ink) 5%,transparent);
  --grid-line:color-mix(in srgb,var(--ink) 5%,transparent);
  --glow-1:color-mix(in srgb,var(--accent) 22%,transparent);
  --glow-2:color-mix(in srgb,var(--accent) 9%,transparent);
  --accent-glow:color-mix(in srgb,var(--accent) 70%,transparent);
  --accent-hover:color-mix(in srgb,var(--accent) 86%,var(--ink));
  --as-accent:var(--accent);
  --shadow-l:0 40px 80px -40px var(--shadow-c);
}

*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scrollbar-gutter:stable; scroll-padding-top:calc(var(--hdr) + 16px); }
html.smooth { scroll-behavior:smooth; }
html,body { overflow-x:clip; }
html:has(dialog[open]) { overflow:hidden; }
body {
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
.i18n-wait body { opacity:0; }
img { max-width:100%; }
a { color:inherit; }
h1,h2,h3 { margin:0; font-weight:700; }
p { margin:0; }
:lang(ka) .tag, :lang(ka) .scroll-hint, :lang(ka) .leadin, :lang(ka) .contact-l h3, :lang(ka) .eyebrow { text-transform:none; }
:focus-visible { outline:2px solid var(--accent-2); outline-offset:3px; border-radius:6px; }
::selection { background:var(--accent); color:var(--on-accent); }

.wrap { width:100%; max-width:1240px; margin:0 auto; padding:0 24px; }
.skip { position:absolute; left:-9999px; top:0; }
.skip:focus { left:16px; top:12px; z-index:100; background:var(--ink); color:var(--bg); padding:10px 14px; border-radius:8px; }

/* ---------- кнопки ---------- */
.btn {
  display:inline-flex; align-items:center; gap:10px;
  background:var(--accent); color:var(--on-accent); text-decoration:none;
  font:700 16px/1.2 var(--font); padding:15px 24px; border:0; border-radius:100px;
  cursor:pointer; transition:background-color .2s, box-shadow .25s;
}
.btn:hover { background:var(--accent-hover); box-shadow:0 12px 34px -12px var(--accent-glow); }
.btn .arw { display:inline-block; transition:transform .25s cubic-bezier(.2,.8,.3,1); }
.btn:hover .arw { transform:translateX(4px); }
.btn:disabled { opacity:.6; cursor:default; }
.btn-sm { padding:10px 16px; font-size:14px; }
.btn-ghost { background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1px var(--line-2); }
.btn-ghost:hover { background:var(--tint-1); box-shadow:inset 0 0 0 1px var(--ink-mute); }
.btn-dark { background:var(--on-accent); color:var(--accent); }
.btn-dark:hover { background:color-mix(in srgb,var(--on-accent) 88%,var(--accent)); box-shadow:0 14px 34px -14px var(--shadow-c); }
.btn-note { font-size:14.5px; color:var(--ink-mute); max-width:52ch; }

/* ---------- шапка ---------- */
.hdr {
  position:fixed; top:0; left:0; right:0; z-index:50;
  background:var(--bg); border-bottom:1px solid transparent;
  transition:border-color .3s;
}
.hdr.scrolled { border-bottom-color:var(--line); }
.hdr-in { height:var(--hdr); display:flex; align-items:center; gap:28px; }
.logo { display:flex; align-items:center; gap:16px; text-decoration:none; color:var(--ink); flex:none; }
.logo-mark { display:block; height:19px; flex:none; }
.logo-mark svg { display:block; height:100%; width:auto; }
/* знак: буква S цветом текста (сама меняется днём и ночью), искра — цветом выделения */
.logo-mark .spark { fill:var(--hl-1); }
.b-mark .spark { fill:currentColor; }
.logo-name { font:700 19px/1 var(--display); letter-spacing:-.03em; }
.nav { display:flex; gap:26px; }
.nav a { color:var(--ink-soft); text-decoration:none; font-weight:500; font-size:15px; transition:color .2s; white-space:nowrap; }
.nav a:hover, .nav a.on { color:var(--ink); }
.hdr-r { margin-left:auto; display:flex; align-items:center; gap:14px; }
.theme-btn {
  position:relative; width:38px; height:38px; flex:none; display:grid; place-items:center; cursor:pointer;
  border-radius:50%; border:1px solid var(--line-2); background:transparent; color:var(--ink-soft);
  transition:color .2s, border-color .2s;
}
.theme-btn:hover { color:var(--ink); border-color:var(--ink-mute); }
.theme-btn svg { position:absolute; width:18px; height:18px; transition:opacity .35s, transform .5s cubic-bezier(.2,.8,.2,1); }
/* ночью показываем солнце (нажать — станет день), днём — луну */
.theme-btn .i-moon { opacity:0; transform:rotate(-70deg) scale(.6); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .theme-btn .i-sun { opacity:0; transform:rotate(70deg) scale(.6); }
  :root:not([data-theme="dark"]) .theme-btn .i-moon { opacity:1; transform:none; }
}
:root[data-theme="light"] .theme-btn .i-sun { opacity:0; transform:rotate(70deg) scale(.6); }
:root[data-theme="light"] .theme-btn .i-moon { opacity:1; transform:none; }
/* смена режима: новый цвет раскрывается кругом от кнопки */
::view-transition-old(root), ::view-transition-new(root) { animation:none; mix-blend-mode:normal; }
::view-transition-new(root) { animation:vt-reveal .65s cubic-bezier(.3,.7,.2,1); }
@keyframes vt-reveal {
  from { clip-path:circle(0 at var(--vt-x,90%) var(--vt-y,30px)); }
  to { clip-path:circle(150vmax at var(--vt-x,90%) var(--vt-y,30px)); }
}
.langbar { display:flex; border:1px solid var(--line-2); border-radius:100px; padding:3px; }
.langbar button {
  background:none; border:0; color:var(--ink-mute); cursor:pointer;
  font:500 12px/1 var(--mono); padding:7px 10px; border-radius:100px; transition:color .2s, background-color .2s;
}
.langbar button:hover { color:var(--ink); }
.langbar button[aria-pressed="true"] { background:var(--ink); color:var(--bg); }
.progress {
  position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background:linear-gradient(90deg,var(--accent),var(--accent-3));
  transform-origin:0 50%; transform:scaleX(var(--pp,0));
}

/* ---------- первый экран ---------- */
.hero { position:relative; --p:0; }
.hero-pin { position:relative; overflow:hidden; padding:calc(var(--hdr) + 48px) 0 96px; }
.hero-bg { position:absolute; inset:0; pointer-events:none; }
.hero-bg::before {
  content:""; position:absolute; inset:0;
  background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 70% 62% at 66% 46%,#000 18%,transparent 74%);
          mask-image:radial-gradient(ellipse 70% 62% at 66% 46%,#000 18%,transparent 74%);
}
.glow { position:absolute; border-radius:50%; }
.g1 { width:760px; height:760px; right:-160px; top:0; background:radial-gradient(closest-side,var(--glow-1),transparent); }
.g2 { width:520px; height:520px; left:-220px; bottom:-200px; background:radial-gradient(closest-side,var(--glow-2),transparent); }
.hero-grid { position:relative; display:grid; grid-template-columns:1.02fr .98fr; gap:32px; align-items:center; }
.hero-txt { position:relative; z-index:2; }
.eyebrow {
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  font:500 12px/1.5 var(--mono); letter-spacing:.14em; color:var(--accent-2); margin-bottom:22px;
}
.eyebrow .idx { color:var(--ink-mute); display:inline-flex; align-items:center; gap:12px; }
.eyebrow .idx::after { content:""; width:28px; height:1px; background:var(--line-2); }
h1 {
  font:700 clamp(38px,5.1vw,78px)/1.03 var(--display); letter-spacing:-.035em;
  margin-bottom:26px; perspective:700px;
}
h1 .w { display:inline-block; }
h1 em {
  font-style:normal; color:var(--hl-1);
  background:linear-gradient(100deg,var(--hl-1) 10%,var(--hl-2) 90%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
:lang(ka) h1 { font-size:clamp(30px,3.7vw,56px); line-height:1.16; letter-spacing:0; }
:lang(ru) h1 { letter-spacing:-.03em; }
.lede { font-size:19px; color:var(--ink-soft); max-width:56ch; margin-bottom:32px; }
.cta-row { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:16px; }

/* сцена из четырёх слоёв: бренд, дизайн, 3D, код */
.stage { position:relative; height:560px; perspective:1800px; perspective-origin:50% 28%; --s:1; }
.rig {
  position:absolute; left:50%; top:63%; width:340px; height:220px; margin:-110px 0 0 -170px;
  transform-style:preserve-3d;
  --gap:calc(44px + var(--p) * 66px);
  transform:scale3d(var(--s),var(--s),var(--s))
    rotateX(calc(57deg + var(--my,0) * -6deg))
    rotateZ(calc(-40deg + var(--mx,0) * 8deg + var(--p) * -14deg));
  will-change:transform;
}
.layer { position:absolute; inset:0; transform-style:preserve-3d; transform:translateZ(calc(var(--gap) * var(--zi))); }
.z0 { --zi:0; } .z1 { --zi:1; } .z2 { --zi:2; } .z3 { --zi:3; }
.plate { position:absolute; inset:0; border-radius:14px; transform-style:preserve-3d; }
.tag {
  position:absolute; top:10px; left:14px; font:500 10px/1 var(--mono); letter-spacing:.12em;
  text-transform:uppercase; color:rgba(243,239,232,.5); white-space:nowrap;
}
.tag b { font-weight:500; color:var(--accent-bright); }
.p-code { background:linear-gradient(160deg,#17181D,#0E0F13); border:1px solid #2B2C34; box-shadow:0 40px 60px -24px rgba(0,0,0,.85); }
.p-code pre { margin:36px 0 0 18px; font:500 11px/1.8 var(--mono); color:#CFC9C0; white-space:pre; }
.p-code i { font-style:normal; }
.p-code .k { color:var(--accent-bright); } .p-code .f { color:#E6D7B8; } .p-code .s { color:#5DC596; } .p-code .t { color:#8EC5FF; }
.p-3d {
  background-color:#0F1115; border:1px solid color-mix(in srgb,var(--accent-bright) 45%,transparent);
  background-image:linear-gradient(color-mix(in srgb,var(--accent-bright) 13%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--accent-bright) 13%,transparent) 1px,transparent 1px);
  background-size:20px 20px; background-position:-1px -1px;
}
.floor { position:absolute; background:color-mix(in srgb,var(--accent-bright) 10%,transparent); }
.floor.f1 { left:30px; top:30px; width:280px; height:80px; }
.floor.f2 { left:30px; top:110px; width:140px; height:80px; }
.wall {
  position:absolute; display:block; left:var(--x);
  background:linear-gradient(to top,color-mix(in srgb,var(--accent-bright) 50%,transparent),color-mix(in srgb,var(--accent-bright) 10%,transparent));
  border:1px solid color-mix(in srgb,var(--accent-bright) 85%,transparent);
}
.wx { top:calc(var(--y) - 34px); width:var(--l); height:34px; transform-origin:50% 100%; transform:rotateX(-90deg); }
.wy { left:calc(var(--x) - 34px); top:var(--y); width:34px; height:var(--l); transform-origin:100% 50%; transform:rotateY(90deg); }
.p-design { background:#F3EFE8; box-shadow:0 30px 50px -26px rgba(0,0,0,.7); }
.p-design .tag { color:rgba(10,10,12,.45); }
.p-design .tag b { color:var(--plate-accent-ink); }
.d-nav { position:absolute; left:18px; right:18px; top:32px; display:flex; align-items:center; gap:8px; }
.d-nav b { width:34px; height:10px; border-radius:3px; background:#0A0A0C; margin-right:auto; }
.d-nav i { width:22px; height:6px; border-radius:3px; background:#C9C3BA; }
.d-hero { position:absolute; left:18px; top:60px; width:150px; }
.d-hero b { display:block; height:14px; border-radius:3px; background:#0A0A0C; }
.d-hero b.s { width:72%; height:8px; margin-top:8px; background:#A39C92; }
.d-btn { display:block; width:62px; height:18px; border-radius:20px; background:var(--accent); margin-top:14px; }
.d-img { position:absolute; right:18px; top:56px; width:132px; height:96px; border-radius:9px; background:linear-gradient(135deg,var(--accent),var(--accent-3)); }
.d-sw { position:absolute; left:18px; bottom:18px; display:flex; gap:6px; }
.d-sw i { width:18px; height:18px; border-radius:50%; }
.d-sw i:nth-child(1) { background:#101014; } .d-sw i:nth-child(2) { background:var(--accent); }
.d-sw i:nth-child(3) { background:var(--accent-3); } .d-sw i:nth-child(4) { background:var(--ok); }
.d-aa { position:absolute; right:18px; bottom:12px; font:700 28px/1 var(--display); color:#0A0A0C; }
.p-brand {
  inset:auto; left:60px; top:40px; width:220px; height:140px;
  background:linear-gradient(135deg,var(--accent),var(--accent-hover)); display:flex; align-items:center; justify-content:center; gap:22px;
  box-shadow:0 36px 60px -24px var(--accent-glow);
}
.p-brand .tag { color:color-mix(in srgb,var(--on-accent) 60%,transparent); }
.p-brand .tag b { color:var(--on-accent); }
.b-mark { height:35px; color:var(--on-accent); }
.b-mark svg { display:block; height:100%; width:auto; }
.b-name { font:700 21px/1 var(--display); color:var(--on-accent); letter-spacing:-.02em; }
.stage-floor {
  position:absolute; left:50%; top:66%; width:560px; height:300px; margin:-150px 0 0 -280px;
  background:radial-gradient(closest-side,var(--glow-1),transparent 72%);
}
.chip {
  position:absolute; z-index:3; font:500 11.5px/1 var(--mono); color:var(--ink-soft); white-space:nowrap;
  padding:8px 12px; border-radius:100px; border:1px solid var(--line-2); background:color-mix(in srgb,var(--surface) 92%,transparent);
}
.chip::before { content:""; display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--ok); margin-right:8px; vertical-align:1px; }
.c1 { top:8%; left:2%; } .c2 { top:16%; right:0; } .c3 { bottom:14%; left:0; } .c4 { bottom:5%; right:12%; }
.c2::before, .c4::before { background:var(--accent); }
.scroll-hint {
  position:absolute; left:50%; bottom:26px; transform:translateX(-50%);
  display:flex; align-items:center; gap:12px; font:500 11px/1 var(--mono); letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-mute); white-space:nowrap;
  opacity:calc(1 - var(--p) * 5);
}
.scroll-hint i { position:relative; width:18px; height:28px; border:1.5px solid var(--line-2); border-radius:10px; }
.scroll-hint i::after { content:""; position:absolute; left:50%; top:6px; width:3px; height:6px; margin-left:-1.5px; border-radius:2px; background:var(--accent); }

/* ---------- бегущая строка ---------- */
.marquee { overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--bg-2); padding:22px 0; }
.mq { display:flex; width:max-content; }
.mq-row { display:flex; align-items:center; flex:none; }
.mq-row span {
  font:700 clamp(22px,2.8vw,38px)/1.2 var(--display); padding:0 26px; white-space:nowrap;
  color:color-mix(in srgb,var(--ink) 24%,transparent);
}
.mq-row span:nth-of-type(3n+1) { color:var(--ink); -webkit-text-stroke:0; }
.mq-row i { font-style:normal; color:var(--accent); font-size:18px; }

/* ---------- секции ---------- */
.sec { padding:128px 0; scroll-margin-top:40px; }
#services, #work, #proof, #process, #free, #contact { scroll-margin-top:20px; }
.sec-head { max-width:860px; margin-bottom:56px; }
h2 { font:700 clamp(30px,4vw,56px)/1.08 var(--display); letter-spacing:-.025em; }
:lang(ka) h2 { font-family:"Noto Sans Georgian",var(--font); font-weight:800; letter-spacing:0; line-height:1.22; font-size:clamp(26px,3.1vw,44px); }
.sub { color:var(--ink-soft); font-size:18px; max-width:64ch; margin-top:18px; }
.aside-line { margin-top:28px; color:var(--ink-mute); font-size:15.5px; max-width:70ch; }

/* ---------- услуги ---------- */
.bento { display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:minmax(240px,auto); gap:16px; }
.tile { position:relative; perspective:1000px; cursor:pointer; }
.t-web { grid-column:span 2; grid-row:span 2; }
.t-viz, .t-tour, .t-web3, .t-ai { grid-column:span 2; }
.tile-in {
  position:relative; height:100%; display:flex; flex-direction:column; overflow:hidden;
  padding:28px; border-radius:22px; border:1px solid var(--line);
  background:linear-gradient(180deg,var(--surface),var(--bg-2));
  transform:rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg));
  transition:transform .6s cubic-bezier(.2,.8,.2,1), border-color .3s;
}
.tile.hot .tile-in { border-color:color-mix(in srgb,var(--accent) 45%,transparent); transition:transform .12s linear, border-color .3s; }
.tile-in::before {
  content:""; position:absolute; left:0; top:0; width:420px; height:420px; margin:-210px 0 0 -210px;
  border-radius:50%; pointer-events:none; opacity:0; transition:opacity .35s;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--accent) 17%,transparent),transparent);
  transform:translate(var(--gx,-500px),var(--gy,-500px));
}
.tile.hot .tile-in::before { opacity:1; }
.tile-ico { position:relative; width:46px; height:46px; flex:none; border-radius:13px; display:grid; place-items:center; background:color-mix(in srgb,var(--accent) 12%,transparent); color:var(--accent-2); }
.tile-ico svg { width:24px; height:24px; }
.tile h3 { position:relative; font:500 20px/1.25 var(--display); letter-spacing:-.01em; margin:20px 0 10px; }
:lang(ka) .tile h3 { font-family:"Noto Sans Georgian",var(--font); font-weight:700; font-size:19px; }
.tile p { position:relative; color:var(--ink-soft); font-size:15.5px; max-width:48ch; }
.tile-foot { position:relative; margin-top:auto; padding-top:22px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; }
.price { font:500 12.5px/1.3 var(--mono); color:var(--ink); padding:7px 11px; border-radius:100px; border:1px solid var(--line-2); background:var(--tint-1); }
.tile-more { background:none; border:0; padding:8px 0; color:var(--accent-2); font:600 14px/1.2 var(--font); cursor:pointer; }
.tile-more span { display:inline-block; transition:transform .25s; }
.tile.hot .tile-more span { transform:translateX(4px); }
.t-web h3 { font-size:28px; }
:lang(ka) .t-web h3 { font-size:24px; }
.t-web p { font-size:17px; }

.art-web { position:relative; height:200px; margin:22px 0 4px; }
@media (min-width:1101px) {
  .t-web .art-web { flex:1; min-height:230px; }
  .t-web .aw-win { height:calc(100% - 24px); }
  .t-web .aw-img { height:calc(100% - 70px); }
  .t-web .aw-phone { height:calc(100% - 20px); }
}
.aw-win { position:absolute; left:0; top:0; width:76%; height:180px; border-radius:12px; background:var(--surface-2); border:1px solid var(--line-2); padding:12px; }
.aw-win > i { display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--line-2); margin-right:5px; }
.aw-h { display:block; width:52%; height:14px; border-radius:4px; background:var(--ink); margin:18px 0 10px; }
.aw-p { display:block; width:40%; height:7px; border-radius:4px; background:var(--line-2); margin-bottom:7px; }
.aw-p.s { width:30%; }
.aw-img { position:absolute; right:12px; top:34px; width:38%; height:120px; border-radius:9px; background:linear-gradient(135deg,var(--accent),var(--accent-3)); }
.aw-phone {
  position:absolute; right:4%; top:14px; width:94px; height:178px; border-radius:18px; padding:14px 10px;
  background:var(--surface-2); border:2px solid var(--line-2); box-shadow:0 30px 40px -20px var(--shadow-c);
  transition:transform .6s cubic-bezier(.2,.8,.2,1);
}
.aw-phone b { display:block; height:9px; border-radius:3px; background:var(--ink); margin-bottom:8px; }
.aw-phone b.s { width:60%; background:var(--line-2); }
.aw-phone span { display:block; height:70px; border-radius:8px; margin-bottom:10px; background:linear-gradient(135deg,var(--accent),var(--accent-3)); }
.tile.hot .aw-phone { transform:translateY(-8px); }

.t-viz .tile-in, .t-tour .tile-in { padding-right:44%; }
.art-viz { position:absolute; right:18px; top:50%; width:40%; max-width:250px; transform:translateY(-50%); }
.art-viz svg { width:100%; height:auto; display:block; stroke:var(--accent-2); stroke-width:1.4; }
.art-viz .g { fill:color-mix(in srgb,var(--accent) 7%,transparent); stroke:var(--line-2); }
.art-viz .w { fill:color-mix(in srgb,var(--accent-2) 22%,transparent); stroke:var(--accent-2); }
.art-tour { position:absolute; right:22%; top:50%; width:96px; height:96px; margin:-48px -48px 0 0; perspective:600px; }
.cube { position:relative; width:96px; height:96px; transform-style:preserve-3d; transform:rotateX(-22deg) rotateY(30deg); }
.cube i { position:absolute; inset:0; border:1px solid color-mix(in srgb,var(--accent-2) 80%,transparent); background:color-mix(in srgb,var(--accent) 8%,transparent); }
.cube .f1 { transform:translateZ(48px); } .cube .f2 { transform:rotateY(90deg) translateZ(48px); }
.cube .f3 { transform:rotateY(180deg) translateZ(48px); } .cube .f4 { transform:rotateY(-90deg) translateZ(48px); }
.cube .f5 { transform:rotateX(90deg) translateZ(48px); background:color-mix(in srgb,var(--accent-3) 16%,transparent); } .cube .f6 { transform:rotateX(-90deg) translateZ(48px); }
.js .cube { animation:spin 16s linear infinite; }
@keyframes spin { from { transform:rotateX(-22deg) rotateY(0); } to { transform:rotateX(-22deg) rotateY(360deg); } }

/* ---------- Батуми ---------- */
.local { position:relative; overflow:hidden; padding:112px 0; color:var(--on-accent); background:var(--band); }
.local-big {
  position:absolute; right:-3vw; top:50%; pointer-events:none; white-space:nowrap;
  font:700 clamp(150px,25vw,400px)/1 var(--display); letter-spacing:-.04em;
  color:color-mix(in srgb,var(--on-accent) 13%,transparent);
  transform:translateY(calc(-50% + var(--lp,0) * 70px));
}
.local-in { position:relative; max-width:720px; }
.local .eyebrow { color:color-mix(in srgb,var(--on-accent) 78%,transparent); }
.local h2 { color:var(--on-accent); margin-bottom:20px; }
.local-p { font-size:20px; line-height:1.55; max-width:56ch; margin-bottom:32px; color:var(--on-accent); }
.local :focus-visible { outline-color:var(--on-accent); }

/* ---------- работы ---------- */
.works { display:grid; gap:112px; }
.work { display:grid; grid-template-columns:1.35fr .65fr; gap:56px; align-items:center; perspective:1600px; --dir:-14deg; }
.work:nth-child(even) { grid-template-columns:.65fr 1.35fr; --dir:14deg; }
.work:nth-child(even) .work-shot { order:2; }
.work-shot {
  position:relative; display:block; transform-style:preserve-3d; will-change:transform;
  transform:translateY(calc((1 - var(--sp,1)) * 70px)) rotateX(calc((1 - var(--sp,1)) * 20deg)) rotateY(calc((1 - var(--sp,1)) * var(--dir)));
}
.work-shot img { display:block; height:auto; background:var(--surface); }
.work-shot .d { width:100%; border-radius:14px; border:1px solid var(--line-2); box-shadow:0 60px 90px -44px var(--shadow-c); }
.work-shot .m {
  position:absolute; width:23%; right:-4%; bottom:-12%; border-radius:18px; border:3px solid var(--surface-2);
  box-shadow:0 30px 50px -20px var(--shadow-c); transform:translateZ(70px);
}
.work:nth-child(even) .work-shot .m { right:auto; left:-4%; }
.work-n { display:block; font:700 64px/1 var(--display); color:color-mix(in srgb,var(--ink) 14%,transparent); margin-bottom:18px; }
.work-host { display:inline-block; font:600 20px/1.3 var(--font); text-decoration:none; border-bottom:1px solid color-mix(in srgb,var(--accent) 60%,transparent); margin-bottom:14px; word-break:break-all; transition:border-color .2s, color .2s; }
.work-host:hover { color:var(--accent-2); border-bottom-color:var(--accent-2); }
.work-meta p { color:var(--ink-soft); }

/* ---------- как я чиню ---------- */
.proof-grid { display:grid; grid-template-columns:.95fr 1.05fr; gap:48px; align-items:start; }
.proof-l { position:sticky; top:calc(var(--hdr) + 24px); }
.term {
  position:relative; background:var(--term-bg); border:1px solid var(--term-line); border-radius:16px;
  font-family:"JetBrains Mono",ui-monospace,monospace; font-size:13px; line-height:1.8;
  overflow:hidden; width:100%; box-shadow:var(--shadow-l), 0 0 120px -50px var(--glow-1);
}
.term-bar { display:flex; align-items:center; gap:7px; padding:11px 15px; border-bottom:1px solid var(--term-line); }
.term-bar i { width:10px; height:10px; border-radius:50%; display:block; }
.term-bar .r { background:#E8664A; } .term-bar .y { background:#D9A63C; } .term-bar .g { background:#4FBF92; }
.term-bar span { margin-left:8px; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:#7D8288; }
.term-body { padding:16px 18px 20px; min-height:226px; color:#BDC3C8; white-space:pre-wrap; }
@media (max-width:359px) { .term-body { font-size:11px; padding:14px 12px 18px; min-height:252px; } }
.term-body .cmd { color:#9AA7B4; }
.term-body .err { color:var(--term-err); }
.term-body .ok { color:var(--term-ok); }
.term-body .dim { color:#7D8288; }
/* полоса со сценой hero3d.js: место занято сразу, страница не дёргается */
.term-scene { display:block; width:100%; height:150px; background:var(--term-bg); border-top:1px solid var(--term-line); opacity:0; transition:opacity .45s ease; }
.term.has-scene .term-scene { opacity:1; }
.cursor { display:inline-block; width:8px; height:15px; background:var(--term-ok); vertical-align:-2px; margin-left:3px; }
.js .cursor { animation:blink 1.05s step-end infinite; }
@keyframes blink { 0%,100% { opacity:1; } 50% { opacity:0; } }
.stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; margin-top:16px; background:var(--line); border:1px solid var(--line); border-radius:16px; overflow:hidden; }
.stat { background:var(--bg-2); padding:18px; }
.stat b { display:block; font:700 34px/1.1 var(--display); color:var(--accent-2); margin-bottom:6px; }
.stat span { display:block; font-size:13.5px; line-height:1.45; color:var(--ink-soft); overflow-wrap:break-word; }
.result { margin-top:16px; padding:18px 20px; border-radius:16px; border:1px solid color-mix(in srgb,var(--ok) 30%,transparent); background:color-mix(in srgb,var(--ok) 8%,transparent); }
.result .k { font:500 11px/1 var(--mono); letter-spacing:.14em; color:var(--ok); }
.result p { margin-top:8px; font-size:15.5px; }
.leadin { font:500 12px/1.5 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-mute); margin-bottom:10px; }
.finding { border-top:1px solid var(--line); }
.finding:last-child { border-bottom:1px solid var(--line); }
.finding summary {
  list-style:none; display:grid; grid-template-columns:44px 1fr 22px; gap:12px; align-items:start;
  padding:20px 4px; cursor:pointer;
}
.finding summary::-webkit-details-marker { display:none; }
.fi-n { font:500 13px/1.6 var(--mono); color:var(--accent-2); }
.fi-h { font-weight:600; font-size:17px; line-height:1.45; transition:color .2s; }
.fi-h small { display:block; margin-top:4px; font:400 12.5px/1.4 var(--mono); color:var(--ink-mute); word-break:break-word; }
.finding summary:hover .fi-h { color:var(--accent-2); }
.fi-t { position:relative; width:22px; height:22px; margin-top:2px; }
.fi-t::before, .fi-t::after { content:""; position:absolute; left:4px; right:4px; top:10px; height:2px; border-radius:2px; background:var(--ink-mute); transition:transform .3s; }
.fi-t::after { transform:rotate(90deg); }
.finding[open] .fi-t::after { transform:rotate(0); }
.fi-b { padding:0 4px 22px 60px; color:var(--ink-soft); font-size:15.5px; }
.fi-d { margin-top:12px; font-size:14.5px; border-left:2px solid var(--line-2); padding-left:14px; }
.fi-d b { color:var(--ink); font-weight:600; }
.mid-cta { margin-top:36px; display:flex; flex-wrap:wrap; gap:16px; align-items:center; }
.offer {
  margin-top:72px; display:grid; grid-template-columns:1fr 1fr; gap:44px; padding:44px; border-radius:26px;
  border:1px solid var(--line); background:radial-gradient(120% 140% at 0% 0%,color-mix(in srgb,var(--accent) 14%,transparent),transparent 52%),var(--surface);
}
.offer h3 { font:700 30px/1.15 var(--display); letter-spacing:-.02em; margin-bottom:14px; }
:lang(ka) .offer h3 { font-family:"Noto Sans Georgian",var(--font); font-weight:800; }
.offer .price { display:block; border:0; background:none; padding:0; font:600 17px/1.5 var(--font); color:var(--accent-2); margin-bottom:14px; }
.offer-l p:last-child { color:var(--ink-soft); }
.ticks { list-style:none; margin:0 0 18px; padding:0; }
.ticks li { position:relative; padding:7px 0 7px 30px; }
.ticks li::before { content:""; position:absolute; left:2px; top:14px; width:12px; height:7px; border-left:2px solid var(--ok); border-bottom:2px solid var(--ok); transform:rotate(-45deg); }
.guarantee { margin-bottom:12px; }
.safety { font-size:14.5px; color:var(--ink-mute); }

/* ---------- процесс ---------- */
.steps-wrap { position:relative; }
.steps { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:32px; position:relative; }
.steps-line { position:absolute; left:28px; right:28px; top:27px; height:2px; background:var(--line); }
.steps-line b { display:block; height:100%; background:linear-gradient(90deg,var(--accent),var(--accent-3)); transform-origin:0 50%; transform:scaleX(var(--sp,0)); }
.step-n {
  position:relative; z-index:1; width:56px; height:56px; border-radius:50%; display:grid; place-items:center;
  background:var(--bg); border:1px solid var(--line-2); font:700 16px/1 var(--display); color:var(--accent-2);
}
.step h3 { font:500 20px/1.3 var(--display); margin:22px 0 10px; }
:lang(ka) .step h3 { font-family:"Noto Sans Georgian",var(--font); font-weight:700; }
.step p { color:var(--ink-soft); font-size:16px; }
.notfor { margin-top:44px; padding:18px 20px; border-radius:14px; border:1px dashed var(--line-2); color:var(--ink-soft); font-size:15.5px; max-width:76ch; }

/* ---------- о себе ---------- */
.about { background:var(--bg-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.about-grid { display:grid; grid-template-columns:.34fr 1.1fr .8fr; gap:44px; align-items:start; }
.about-grid .eyebrow { margin:8px 0 0; }
.about-big { font:500 clamp(24px,2.5vw,34px)/1.35 var(--display); letter-spacing:-.015em; }
:lang(ka) .about-big { font-family:"Noto Sans Georgian",var(--font); font-weight:700; letter-spacing:0; }
.about-r p { color:var(--ink-soft); margin-bottom:18px; }
.about-r .tools { font:500 13px/1.7 var(--mono); color:var(--ink); padding:14px 16px; border:1px solid var(--line-2); border-radius:14px; }

/* ---------- бесплатные ответы ---------- */
.fixes { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,1fr); column-gap:40px; }
.fixes a { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:18px 2px; border-top:1px solid var(--line); text-decoration:none; font-weight:500; transition:color .2s; }
.fixes a i { font-style:normal; color:var(--accent-2); transition:transform .25s; }
.fixes a:hover { color:var(--accent-2); }
.fixes a:hover i { transform:translateX(4px); }

/* ---------- контакт ---------- */
.contact { background:radial-gradient(80% 90% at 100% 0%,color-mix(in srgb,var(--accent) 10%,transparent),transparent 60%); }
.contact-grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:56px; align-items:start; }
.contact-l h3 { font:500 12px/1.5 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-mute); margin:40px 0 10px; }
.direct { list-style:none; margin:0; padding:0; }
.direct li { padding:6px 0; }
.direct a { text-decoration:none; border-bottom:1px solid var(--line-2); transition:border-color .2s, color .2s; word-break:break-word; }
.direct a:hover { color:var(--accent-2); border-bottom-color:var(--accent-2); }
.cform { position:relative; padding:32px; border-radius:24px; border:1px solid var(--line); background:var(--surface); }
.cf-field { display:block; margin-bottom:18px; }
.cf-field > span { display:block; font-size:14.5px; color:var(--ink-soft); }
.cf-field input, .cf-field textarea {
  scroll-margin-top:34px;
  width:100%; margin-top:8px; padding:14px 16px; border-radius:12px; border:1px solid var(--line-2);
  background:var(--bg); color:var(--ink); font:500 16px/1.5 var(--font); resize:vertical; transition:border-color .2s;
}
.cf-field textarea::placeholder { color:var(--ink-mute); opacity:.8; }
.cf-field input:focus, .cf-field textarea:focus { outline:none; border-color:var(--accent-2); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent-2) 26%,transparent); }
.cf-hp { position:absolute; left:-10000px; width:1px; height:1px; opacity:0; }
.cf-row { display:flex; flex-wrap:wrap; gap:16px; align-items:center; }
.cf-status { margin-top:14px; min-height:1.6em; font-size:15px; }
.cf-status.ok { color:var(--ok); }
.cf-status.err { color:var(--err); }
.cform.sent .cf-field, .cform.sent .cf-row { opacity:.45; pointer-events:none; }

/* ---------- подвал и липкая кнопка ---------- */
.foot { border-top:1px solid var(--line); padding:36px 0 104px; }
.foot-in { display:flex; flex-wrap:wrap; gap:18px 28px; align-items:center; justify-content:space-between; }
.foot p { color:var(--ink-mute); font-size:14px; max-width:78ch; }
.foot a { color:var(--ink-soft); font-size:14px; text-decoration:none; }
.foot .logo { color:var(--ink); }
.foot a:hover { color:var(--ink); }
.sticky { display:none; }

/* ---------- карточка услуги ---------- */
.sheet { border:0; padding:0; background:transparent; color:var(--ink); width:calc(100% - 32px); max-width:740px; max-height:calc(100dvh - 40px); overflow:visible; }
.sheet::backdrop { background:var(--backdrop); }
.sheet-in { position:relative; max-height:calc(100dvh - 40px); overflow:auto; overscroll-behavior:contain; padding:30px 34px; border-radius:24px; border:1px solid var(--line-2); background:var(--surface); }
.sheet[open] .sheet-in { animation:sheetIn .45s cubic-bezier(.2,.8,.2,1); }
@keyframes sheetIn { from { opacity:0; transform:translateY(26px) scale(.98); } }
.sheet-x { position:sticky; top:0; z-index:3; display:grid; place-items:center; margin:-16px -16px -26px auto; width:42px; height:42px; border-radius:50%; border:1px solid var(--line-2); background:var(--bg); color:var(--ink); font-size:24px; line-height:1; cursor:pointer; transition:border-color .2s; }
.sheet-x:hover { border-color:var(--ink-mute); }
.sheet-body h3 { font:700 26px/1.2 var(--display); letter-spacing:-.02em; margin:18px 48px 10px 0; }
:lang(ka) .sheet-body h3 { font-family:"Noto Sans Georgian",var(--font); font-weight:800; }
.sheet-lead { color:var(--ink-soft); margin-bottom:10px; }
.tier { padding:18px 0; border-top:1px solid var(--line); }
.tier:first-of-type { margin-top:12px; }
.tier-h { display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px 14px; margin-bottom:6px; }
.tier-h b { font-weight:700; }
.tier-h span { font:500 13px/1.6 var(--mono); color:var(--accent-2); }
.tier p { font-size:15.5px; }
.tier-d { margin-top:8px; font-size:14.5px; color:var(--ink-soft); }
.tier-local { margin:10px 0 4px; padding:16px 18px; border:1px solid color-mix(in srgb,var(--accent) 38%,transparent); border-radius:14px; background:color-mix(in srgb,var(--accent) 8%,transparent); }
.sheet-note { margin:8px 0 4px; font-size:13.5px; color:var(--ink-mute); border-left:2px solid var(--accent-3); padding-left:12px; }
.sheet-body .btn { margin-top:22px; margin-bottom:6px; }

/* ---------- появление ---------- */
.js .fx { opacity:0; transform:translateY(22px); }
.ready .fx { opacity:1; transform:none; transition:opacity .8s ease, transform 1s cubic-bezier(.2,.8,.2,1); }
@media (max-width:720px) { .js .lede.fx { opacity:1; transform:none; transition:none; } }
.ready .lede.fx { transition-delay:.45s; } .ready .cta-row.fx { transition-delay:.6s; } .ready .btn-note.fx { transition-delay:.72s; }
.js h1 .w { opacity:0; transform:translateY(.55em) rotateX(-70deg); transform-origin:50% 100%; }
.ready h1 .w { opacity:1; transform:none; transition:opacity .6s ease, transform .9s cubic-bezier(.2,.8,.2,1); transition-delay:calc(var(--i) * 55ms + 80ms); }
.js .plate { opacity:0; transform:translateZ(-180px); }
.ready .plate { opacity:1; transform:none; transition:opacity .7s ease, transform 1.15s cubic-bezier(.2,.8,.2,1); transition-delay:calc(var(--zi) * 150ms + 200ms); }
.js .wx { transform:rotateX(-90deg) scaleY(0); }
.js .wy { transform:rotateY(90deg) scaleX(0); }
.ready .wx { animation:riseX .9s cubic-bezier(.2,.8,.2,1) 1.35s both; }
.ready .wy { animation:riseY .9s cubic-bezier(.2,.8,.2,1) 1.45s both; }
@keyframes riseX { from { transform:rotateX(-90deg) scaleY(0); } to { transform:rotateX(-90deg) scaleY(1); } }
@keyframes riseY { from { transform:rotateY(90deg) scaleX(0); } to { transform:rotateY(90deg) scaleX(1); } }
.js .chip { opacity:0; }
.ready .chip { opacity:clamp(0, (0.55 - var(--p)) * 4, 1); animation:chipIn .8s ease 1.4s both, bob 6s ease-in-out infinite alternate; }
@keyframes chipIn { from { opacity:0; } }
.ready .c2 { animation-delay:-2s; } .ready .c3 { animation-delay:-4s; } .ready .c4 { animation-delay:-1s; }
@keyframes bob { from { transform:translateY(-6px); } to { transform:translateY(6px); } }
.ready .scroll-hint i::after { animation:wheel 1.8s ease-in-out infinite; }
@keyframes wheel { 0% { transform:translateY(0); opacity:1; } 70% { transform:translateY(9px); opacity:0; } 100% { transform:translateY(0); opacity:0; } }
.js .mq { animation:mq 55s linear infinite; }
@keyframes mq { to { transform:translateX(-50%); } }

.js .rv, .js .tile, .js .step, .js .work { opacity:0; transform:translateY(36px); }
.js .tile { transform:translateY(46px) rotateX(10deg); }
.rv.in, .tile.in, .step.in, .work.in {
  opacity:1; transform:none;
  transition:opacity .8s ease, transform 1s cubic-bezier(.2,.8,.2,1);
  transition-delay:calc(var(--rd,0) * 90ms);
}
.nofx .rv, .nofx .tile, .nofx .step, .nofx .work, .nofx .fx, .nofx h1 .w, .nofx .plate, .nofx .chip { opacity:1; transform:none; }

/* ---------- большие экраны: сцена закреплена, пока слои расходятся ---------- */
@media (min-width:1024px) and (min-height:760px) and (prefers-reduced-motion:no-preference) {
  .hero { height:185vh; }
  .hero-pin { position:sticky; top:0; height:100vh; display:flex; align-items:center; padding:var(--hdr) 0 0; }
}

/* ---------- планшет ---------- */
@media (min-width:1024px) and (max-width:1279px) { .c2 { top:3%; right:2%; } }
@media (max-width:1100px) {
  .nav { display:none; }
  .bento { grid-template-columns:repeat(2,1fr); }
  .t-web { grid-row:span 1; }
  .t-viz, .t-tour, .t-web3, .t-ai { grid-column:span 2; }
  .about-grid { grid-template-columns:1fr 1fr; }
  .about-grid .eyebrow { grid-column:1 / -1; }
}
@media (max-width:1023px) {
  .hero-grid { grid-template-columns:1fr; gap:8px; }
  .stage { height:470px; --s:.86; }
  .proof-grid { grid-template-columns:minmax(0,1fr); }
  .work-shot .m { right:0; }
  .work:nth-child(even) .work-shot .m { left:0; }
  .proof-l { position:relative; top:auto; }
  .work, .work:nth-child(even) { grid-template-columns:1fr; gap:36px; }
  .work:nth-child(even) .work-shot { order:0; }
  /* на планшете и телефоне скриншот только поднимается снизу — без поворота, чтобы не вылезал за край */
  .work-shot { transform:translateY(calc((1 - var(--sp,1)) * 50px)); }
  .work-shot .m { transform:none; }
  .offer { grid-template-columns:1fr; gap:24px; }
  .contact-grid { grid-template-columns:1fr; }
}

/* ---------- телефон ---------- */
@media (max-width:720px) {
  :root { --hdr:60px; }
  body { font-size:16px; }
  .wrap { padding:0 16px; }
  .hdr-in { gap:12px; }
  #ctaTop { display:none; }
  .hero-pin { padding:calc(var(--hdr) + 32px) 0 64px; }
  h1 { margin-bottom:20px; }
  .lede { font-size:17px; margin-bottom:26px; }
  .stage { height:360px; --s:.64; margin-top:4px; }
  .rig { top:64%; }
  .chip { font-size:10.5px; padding:6px 10px; }
  .c1 { top:2%; } .c2 { top:10%; } .c3 { bottom:6%; } .c4 { display:none; }
  .scroll-hint { display:none; }
  .sec { padding:84px 0; }
  .sec-head { margin-bottom:36px; }
  .sub { font-size:16.5px; }
  .bento { grid-template-columns:1fr; grid-auto-rows:auto; gap:12px; }
  .t-web, .t-viz, .t-tour, .t-web3, .t-ai { grid-column:auto; grid-row:auto; }
  .tile-in { padding:22px; min-height:0; }
  .t-viz .tile-in, .t-tour .tile-in { padding-right:22px; }
  .art-viz { position:relative; right:auto; top:auto; width:62%; transform:none; margin:14px 0 0; }
  .art-tour { position:relative; right:auto; top:auto; margin:22px 0 8px 30px; }
  .art-web { height:170px; }
  .aw-win { height:156px; }
  .aw-phone { width:80px; height:150px; }
  .aw-phone span { height:56px; }
  .t-web h3 { font-size:23px; }
  .local { padding:80px 0; }
  .local-p { font-size:17.5px; }
  .local-big { right:-6vw; top:auto; bottom:-4vw; transform:translateY(calc(var(--lp,0) * 40px)); }
  .works { gap:80px; }
  .work-shot .m { width:26%; right:0; }
  .work:nth-child(even) .work-shot .m { left:0; }
  .work-n { font-size:48px; margin-bottom:12px; }
  .stats { grid-template-columns:repeat(3,1fr); }
  .stat { padding:14px 12px; }
  .stat b { font-size:26px; }
  .stat span { font-size:12.5px; }
  .fi-b { padding-left:4px; }
  .finding summary { grid-template-columns:34px 1fr 22px; gap:10px; }
  .offer { padding:26px 20px; margin-top:56px; }
  .offer h3 { font-size:24px; }
  .steps { grid-template-columns:1fr; gap:36px; padding-left:76px; }
  .steps-line { left:27px; right:auto; top:28px; bottom:28px; width:2px; height:auto; }
  .steps-line b { transform-origin:50% 0; transform:scaleY(var(--sp,0)); }
  .step { position:relative; }
  .step-n { position:absolute; left:-76px; top:-2px; }
  .step h3 { margin-top:0; }
  .about-grid { grid-template-columns:1fr; gap:24px; }
  .fixes { grid-template-columns:1fr; }
  .cform { padding:22px 18px; }
  .foot { padding-bottom:110px; }
  .sticky {
    position:fixed; left:12px; right:12px; bottom:12px; z-index:40; display:flex; align-items:center; justify-content:space-between; gap:12px;
    padding:10px 10px 10px 16px; border-radius:18px; border:1px solid var(--line-2); background:var(--surface);
    box-shadow:0 20px 40px -18px var(--shadow-c); transform:translateY(140%); visibility:hidden;
    transition:transform .35s cubic-bezier(.2,.8,.2,1), visibility 0s linear .35s;
  }
  .sticky.show { transform:none; visibility:visible; transition:transform .35s cubic-bezier(.2,.8,.2,1), visibility 0s; }
  html { scroll-padding-bottom:96px; }
  .sticky p { font-size:13.5px; line-height:1.35; color:var(--ink-soft); }
  .sticky .btn { flex:none; }
  .sheet-in { padding:26px 20px; }
  .sheet-body h3 { font-size:22px; }
}
@media (max-width:380px) {
  .logo-name { display:none; }
}
@media (max-width:340px) { .stats { grid-template-columns:1fr; } }

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation:none !important; transition:none !important; }
  .js .rv, .js .tile, .js .step, .js .work, .js .fx, .js h1 .w, .js .plate, .js .chip { opacity:1; transform:none; }
  .js .wx { transform:rotateX(-90deg); } .js .wy { transform:rotateY(90deg); }
}