/* PKSTUDIO: общий стиль всех страниц сайта (25.10, дизайн site-v2).
   Тёмный графит, белый жирный гротеск Inter Tight, салатовый акцент.
   Стиль конкретной страницы лежит в ней самой, здесь только общее: цвета, шапка, кнопки, подвал, плеер. */
:root{
  --bg:#0d0f12; --bg2:#121418; --card:#16191d; --line:rgba(255,255,255,.08); --line2:rgba(255,255,255,.16);
  --ink:#f3f2ee; --ink2:#b9bbbe; --dim:#7d8085; --lime:#c6f53b; --err:#ff9d8a;
  --head:"Inter Tight","Archivo","Helvetica Neue",Arial,sans-serif;
  --body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --gut:clamp(20px,5vw,72px);
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important} /* order.js и плеер прячут блоки атрибутом hidden: он сильнее любого display */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.55 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:var(--lime);color:#0b0d0a}
.wrap{max-width:1280px;margin:0 auto;padding-inline:var(--gut)}

/* шапка */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:calc(18px + env(safe-area-inset-top,0px)) var(--gut) 18px;transition:background .4s,backdrop-filter .4s}
.nav.solid{background:rgba(13,15,18,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.brand{display:flex;align-items:center;gap:10px;font:800 17px/1 var(--head);letter-spacing:.01em}
.sq{width:12px;height:12px;background:var(--lime);display:inline-block;flex:none}
.nav-r{display:flex;align-items:center;gap:26px}
.nav-a{font:600 13px/1 var(--head);letter-spacing:.12em;text-transform:uppercase;color:var(--ink2);transition:color .3s}
.nav-a:hover{color:var(--ink)}
.nav-cta{font:600 13px/1 var(--head);letter-spacing:.12em;text-transform:uppercase;padding:12px 18px;border:1px solid rgba(255,255,255,.22);border-radius:999px;transition:border-color .3s,background .3s,color .3s;white-space:nowrap}
.nav-cta:hover{background:var(--ink);color:#0d0f12;border-color:var(--ink)}

/* кнопки и ссылки */
.btn{display:inline-flex;align-items:center;gap:14px;background:var(--lime);color:#0b0d0a;font:700 16px/1 var(--head);letter-spacing:.01em;padding:20px 28px;border-radius:999px;border:0;cursor:pointer;transition:transform .25s,box-shadow .25s,opacity .25s}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 40px -12px rgba(198,245,59,.55)}
.btn:disabled{opacity:.5;cursor:default;transform:none;box-shadow:none}
.btn .pr{padding-left:14px;border-left:1px solid rgba(0,0,0,.2)}
.btn .ar{transition:transform .25s}
.btn:hover .ar{transform:translateX(4px)}
.link{font:600 14px/1 var(--head);letter-spacing:.12em;text-transform:uppercase;color:var(--ink2);border-bottom:1px solid rgba(255,255,255,.25);padding-bottom:6px;transition:color .3s,border-color .3s}
.link:hover{color:var(--ink);border-color:var(--lime)}

/* заголовки секций */
section{position:relative}
.sec{padding-block:clamp(90px,12vw,170px)}
.kicker{display:flex;align-items:center;gap:10px;font:600 12px/1 var(--head);letter-spacing:.2em;text-transform:uppercase;color:var(--dim);margin-bottom:22px}
.kicker .sq{width:8px;height:8px}
h2{font:800 clamp(40px,6vw,92px)/.95 var(--head);letter-spacing:-.04em;margin:0}
.sub{color:var(--ink2);font-size:clamp(16px,1.4vw,19px);max-width:34ch;margin:20px 0 0}
.head-row{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px}

/* верх внутренней страницы */
.page-top{padding:calc(150px + env(safe-area-inset-top,0px)) 0 0}
.page-top h1{font:900 clamp(48px,7vw,112px)/.92 var(--head);letter-spacing:-.045em;margin:0;max-width:12ch}
.page-top .sub{max-width:44ch}

/* появление при прокрутке */
.rv{opacity:0;transform:translateY(40px);transition:opacity 1s ease,transform 1.1s cubic-bezier(.2,.8,.1,1)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.12s}.rv.d2{transition-delay:.24s}

/* пакеты (главная и портфолио) */
.packs{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.pack{display:block;padding:24px 24px 22px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.015);transition:border-color .3s,background .3s,transform .3s}
.pack:hover{border-color:rgba(198,245,59,.55);background:rgba(198,245,59,.04);transform:translateY(-3px)}
.pack .q{font:600 12px/1 var(--head);letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
.pack .p{font:800 clamp(34px,3.2vw,46px)/1 var(--head);letter-spacing:-.04em;margin:14px 0 8px}
.pack .u{font-size:14px;color:var(--ink2)}
.pack .u b{color:var(--lime);font-weight:600}

/* плеер на весь экран: клик по ролику = полная версия со звуком */
.vlb{position:fixed;inset:0;z-index:90;background:rgba(5,6,8,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);display:grid;place-items:center;padding:calc(60px + env(safe-area-inset-top,0px)) 16px calc(24px + env(safe-area-inset-bottom,0px))}
.vlb video{max-height:100%;max-width:min(100%,520px);border-radius:16px;background:#000}
.vlb video.h{max-width:min(100%,1100px)}
.vlb-x{position:absolute;top:calc(14px + env(safe-area-inset-top,0px));right:14px;width:46px;height:46px;border-radius:50%;border:1px solid var(--line2);background:rgba(0,0,0,.5);color:var(--ink);cursor:pointer;display:grid;place-items:center;font:600 22px/1 var(--head)}
.vlb-x:hover{border-color:var(--lime)}
[data-full]{cursor:pointer}

/* подвал */
footer{border-top:1px solid var(--line);padding-block:34px calc(34px + env(safe-area-inset-bottom,0px));color:var(--dim);font-size:13px}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px 30px;align-items:center}
.foot nav{display:flex;flex-wrap:wrap;gap:10px 22px}
.foot a:hover{color:var(--ink)}

@media (max-width:900px){
  .packs{grid-template-columns:1fr}
}
@media (max-width:760px){
  .nav-a{display:none}
  .nav-cta{padding:11px 15px;font-size:12px}
  .btn{width:100%;justify-content:center;padding:19px 22px}
  .page-top{padding-top:calc(118px + env(safe-area-inset-top,0px))}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01s!important;animation-delay:0s!important;transition:none!important}
  .rv{opacity:1;transform:none}
}

/* лого шапки: при прокрутке морф «Склейка» в старый знак pk (Кирилл 27.10, вариант 3). Коробка размером финального вида, всё внутри абсолютно; без JS остаётся квадрат + PKSTUDIO */
.brand.lm{position:relative;display:block;width:236px;height:44px;margin:-13px 0;flex:none;perspective:300px;transform-origin:left center}
.lm>*{position:absolute;display:block}
.lm .sq{left:0;top:16px}
.lm-cap{left:22px;top:13.5px;white-space:nowrap;transform-style:preserve-3d}
.lm-cap i,.lm-low i{font-style:normal;display:inline-block;transform-origin:50% 100%;backface-visibility:hidden}
.lm-g{left:0;top:2px;width:72px;height:40px}
.lm-g img,.lm-g span{position:absolute;left:0;width:72px}
.lm-g img{top:0;height:40px;opacity:0}
.lm-g span{background:url(logo-pk-body.png) no-repeat;background-size:72px 40px;opacity:0}
.lm-low{left:84px;top:6px;font:600 22px/1 "Poppins",var(--head);letter-spacing:.01em;color:#b9b9b3;white-space:nowrap;transform-style:preserve-3d}
.lm-low i{opacity:0}
.lm-sub{left:85px;top:33px;font:500 8.5px/1 "Poppins",var(--head);letter-spacing:.42em;text-transform:uppercase;color:#7d7d76;white-space:nowrap;opacity:0}
.lm-line{left:0;top:20px;height:2px;width:0;background:var(--lime);opacity:0}
@media (max-width:420px){.brand.lm{transform:scale(.86);margin-right:-33px}}