/* ==================== ПЕРЕМЕННЫЕ ==================== */
:root{
  --bg:#D5CFBE;
  --bg-soft:#EBEADA;
  --sidebar-card:#E2DECC;
  --ink:#000000;
  --ink-soft:rgba(0,0,0,.68);
  --ink-faint:rgba(0,0,0,.42);
  --line:rgba(0,0,0,.14);
  --paper:#D5CFBE;
  --paper-soft:rgba(213,207,190,.72);
  --paper-faint:rgba(213,207,190,.5);
  --dark:#000000;
  --dark-soft:#1A1A1A;
  --line-dark:rgba(213,207,190,.16);
  --accent:#FFFF23;
  --accent-ink:#000000;
  --accent-2:#FFFF69;
  --white:#ffffff;
  --success:#2F9E44;
  --danger:#E0432B;
  --font-display:'Unbounded',system-ui,sans-serif;
  --font-heading:'Manrope',system-ui,sans-serif;
  --font-body:'Inter',system-ui,-apple-system,sans-serif;
  --radius-sm:10px;
  --radius-md:20px;
  --radius-lg:32px;
  --shadow-sm:0 2px 10px rgba(21,19,15,.08);
  --shadow-md:0 14px 34px rgba(21,19,15,.12);
  --shadow-lg:0 26px 60px rgba(21,19,15,.18);
  --container-w:1280px;
  --sidebar-w:288px;
  --topbar-h:84px;
  --section-py:clamp(64px,9vw,140px);
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
}

/* ==================== БАЗА / СБРОС ==================== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
html.lenis, html.lenis body{height:auto}
body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--bg);
  line-height:1.6;
  font-size:16px;
  overflow-x:clip;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:none}
h1,h2,h3,h4{font-family:var(--font-heading);font-weight:800;line-height:1.08;letter-spacing:-.02em}
.container{max-width:var(--container-w);margin-inline:auto;padding-inline:clamp(20px,5vw,40px)}
.container-shift{max-width:calc(var(--container-w) + var(--sidebar-w));margin-inline:auto;padding-inline:clamp(20px,5vw,40px)}
@media(min-width:1180px){.container-shift{padding-left:calc(var(--sidebar-w) + 64px)}}
section{position:relative;padding-block:var(--section-py)}
.theme-dark{background:var(--dark);color:var(--paper)}
:focus-visible{outline:2.5px solid var(--accent);outline-offset:3px;border-radius:4px}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
}

.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-heading);font-size:.78rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink);background:transparent;border:1.5px solid var(--line);
  padding:7px 16px;border-radius:100px;margin-bottom:14px;
}
.theme-dark .eyebrow{color:var(--paper);border-color:var(--line-dark)}
.section-head{max-width:680px;margin-bottom:56px}
.section-head.center{margin-inline:auto;text-align:center}
.section-head p{color:var(--ink-soft);font-size:1.08rem;margin-top:16px}
.theme-dark .section-head p{color:var(--paper-soft)}
.section-head h2{font-size:clamp(2rem,4.2vw,3.4rem)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:16px 32px;border-radius:100px;font-weight:700;font-size:.98rem;font-family:var(--font-heading);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s var(--ease),color .3s var(--ease);
  white-space:nowrap;position:relative;
}
.btn-primary{background:var(--accent);color:var(--accent-ink);box-shadow:var(--shadow-sm)}
.btn-primary:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.btn-secondary{background:transparent;color:var(--ink);border:1.5px solid var(--line)}
.btn-secondary:hover{border-color:var(--ink);transform:translateY(-3px)}
.theme-dark .btn-secondary{color:var(--paper);border-color:var(--line-dark)}
.theme-dark .btn-secondary:hover{border-color:var(--paper)}
.btn-ghost{background:transparent;color:var(--ink);padding:10px 4px;font-family:var(--font-heading)}
.btn-block{width:100%}
.btn-sm{padding:12px 22px;font-size:.86rem}
.btn[disabled]{opacity:.6;cursor:not-allowed;transform:none !important}

.icon-wrap{
  width:54px;height:54px;border-radius:var(--radius-sm);
  background:var(--ink);color:var(--accent);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.icon-wrap svg{width:26px;height:26px}

/* reveal-on-scroll (используется GSAP ScrollTrigger.batch).
   По умолчанию контент виден — скрытое состояние включает только JS,
   когда GSAP реально загружен и система реveal настроена (иначе, при
   сбое/блокировке CDN, контент не должен пропадать навсегда). */
.reveal{opacity:1;transform:none}

/* Используется JS'ом (не GSAP) для сокрытия меню/статистики/карточек
   сайдбара до того, как FLIP расставит их по местам — намеренно вне
   GSAP inline-стилей, чтобы clearProps никогда не мог случайно зацепить
   opacity этих узлов. */
.pre-flip{opacity:0}

/* ==================== SR-ONLY / MISC ==================== */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ==================== TOPBAR (в пределах hero) ==================== */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:600;
  height:var(--topbar-h);display:flex;align-items:center;
}
@media(min-width:1180px){.topbar{position:fixed;height:auto;display:block;padding-block:18px 10px}}

/* ---- Мобильная компактная строка: чип-лого + CTA/бургер ---- */
.topbar-bar{display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%;padding-inline:clamp(20px,5vw,40px)}
@media(min-width:1180px){.topbar-bar{display:none}}
.brand-chip{font-family:var(--font-display);font-weight:800;font-size:1.05rem;letter-spacing:.01em;background:var(--accent);color:var(--accent-ink);padding:8px 14px;border-radius:10px}
.topbar-actions{display:flex;align-items:center;gap:16px}
.burger{display:flex;flex-direction:column;justify-content:center;gap:5px;width:42px;height:42px;border-radius:10px;background:var(--ink);flex-shrink:0}
.burger span{display:block;width:20px;height:2px;background:var(--accent);margin-inline:auto;transition:transform .3s var(--ease-soft),opacity .3s var(--ease-soft)}
.burger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.is-open span:nth-child(2){opacity:0}
.burger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(min-width:1180px){.burger{display:none}}

/* ---- Десктоп: гигантское имя во всю ширину экрана + строка меню под ним ----
   Реальная ширина слова "SITOMIKA" при любом разумном font-size не совпадает
   с шириной экрана, поэтому клампом на vw край-в-край не получить — слово
   растягивается JS'ом (scaleX) до 100% ширины строго по факту, без просчёта
   font-size. Это отдельный (не FLIP) элемент — плавно стягивается к
   логотипу в сайдбаре через scale/fade, без риска сложной перестыковки. */
.brand-word{display:none}
@media(min-width:1180px){
  .brand-word{display:block;width:100%;overflow:hidden;white-space:nowrap;padding-inline:12px;text-align:right}
  #brand-word-text{
    display:inline-block;transform-origin:100% 0;
    font-family:var(--font-display);font-weight:800;color:var(--accent);
    font-size:6rem;line-height:.85;letter-spacing:-.01em;
  }
}

.topbar-row{display:none}
@media(min-width:1180px){.topbar-row{display:flex;justify-content:center;width:100%;margin-top:10px}}

.topbar-nav{display:flex;align-items:center;justify-content:center;gap:30px}
.topbar-nav a{font-family:var(--font-heading);font-size:.95rem;font-weight:800;position:relative;padding-block:4px;white-space:nowrap}
.topbar-nav a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--ink);transition:width .25s var(--ease-soft)}
.topbar-nav a:hover::after,.topbar-nav a.is-active::after{width:100%}

.mobile-nav{position:fixed;inset:0;background:var(--dark);color:var(--paper);z-index:590;display:flex;flex-direction:column;padding:calc(var(--topbar-h) + 20px) 28px 28px;transform:translateY(-100%);transition:transform .45s var(--ease);overflow-y:auto}
.mobile-nav.is-open{transform:translateY(0)}
.mobile-nav a{font-family:var(--font-display);font-size:1.6rem;font-weight:700;padding-block:14px;border-bottom:1px solid var(--line-dark)}
.mobile-nav .btn{margin-top:24px}
.mobile-nav-phone{margin-top:20px;font-family:var(--font-heading);font-weight:700;color:var(--accent)}
.mobile-nav-group{border-bottom:1px solid var(--line-dark)}
.mobile-nav-group-row{display:flex;align-items:center;gap:8px}
.mobile-nav-group-row a{flex-grow:1;border-bottom:none}
.mobile-nav-toggle{background:transparent;color:var(--paper);width:44px;height:44px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.mobile-nav-toggle svg{width:20px;height:20px;transition:transform .3s var(--ease-soft)}
.mobile-nav-toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
.mobile-nav-sub{max-height:0;overflow:hidden;transition:max-height .3s var(--ease-soft)}
.mobile-nav-sub.is-open{max-height:260px}
.mobile-nav-sub a{display:block;font-family:var(--font-heading);font-size:1rem;font-weight:700;padding:10px 0 10px 12px;color:var(--paper-soft);border-bottom:none}
.mobile-nav-sub a:last-child{padding-bottom:16px}
@media(min-width:1180px){.mobile-nav{display:none}}

/* ==================== SIDEBAR (закреплённая навигация, десктоп) ==================== */
.sidebar{
  display:none;
}
@media(min-width:1180px){
  .sidebar{
    display:flex;flex-direction:column;justify-content:center;gap:clamp(6px,1.2vh,18px);
    position:fixed;left:32px;top:32px;bottom:32px;width:var(--sidebar-w);
    z-index:500;
  }
}
/* Отступы/паддинги внутри сайдбара завязаны на vh (а не на фиксированные
   px), чтобы вся колонка (карточка + статы + все 7 пунктов меню + телефон
   + кнопка) сама уменьшалась и помещалась целиком на невысоких вьюпортах —
   без необходимости во внутреннем скролле, который либо прячет хвост меню
   без намёка на это (обрезка), либо наезжает на телефон/кнопку (sticky).
   flex:0 1 auto (а не 1 1 auto) — .side-scroll не растягивается заполнять
   лишнее место, когда контента меньше доступной высоты (иначе между меню и
   телефоном/кнопкой появлялся неравномерно большой зазор): он либо сидит на
   своей естественной высоте с тем же gap, что и остальные плашки, либо (на
   по-настоящему маленьких окнах, когда общий контент выше сайдбара)
   сжимается до остатка места и скроллится сам (полоса скроллбара скрыта, но
   сам скролл рабочий: см. data-lenis-prevent на .sidebar в HTML, иначе Lenis
   перехватывает колесо мыши и скроллит страницу вместо вложенного блока).
   overscroll-behavior — чтобы докрученное до предела колесо не "перетекало"
   в скролл страницы позади сайдбара. */
.side-scroll{
  display:flex;flex-direction:column;gap:clamp(5px,1.2vh,18px);
  flex:0 1 auto;min-height:0;
  overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none;
  overscroll-behavior-y:contain;
}
.side-scroll::-webkit-scrollbar{display:none}
.side-card,.side-pinned{flex-shrink:0}
.side-pinned{display:flex;flex-direction:column;gap:clamp(5px,1.2vh,18px);flex-shrink:0}
.side-card{background:var(--sidebar-card);border-radius:var(--radius-md);padding:clamp(6px,1.6vh,20px)}
.side-card.blurb{font-size:.86rem;color:var(--ink-soft);line-height:1.55}
.logo-chip{display:inline-block;font-family:var(--font-display);font-weight:800;font-size:1.05rem;letter-spacing:.01em;background:var(--accent);color:var(--accent-ink);padding:8px 14px;border-radius:10px}
.side-social{display:flex;gap:8px;margin-top:clamp(5px,1.1vh,14px)}
.side-social a{width:34px;height:34px;border-radius:26%;overflow:hidden;color:#fff;display:flex;align-items:center;justify-content:center}
.side-social svg{width:auto;height:100%}
.side-social img{width:100%;height:100%;object-fit:cover}
.side-social img.icon-glyph{width:auto;height:100%;object-fit:contain}
.side-nav{position:relative;border-radius:var(--radius-md);padding:clamp(3px,0.72vh,10px);display:flex;flex-direction:column;gap:2px;flex-shrink:0}
.side-nav::before{content:"";position:absolute;inset:0;background:var(--sidebar-card);border-radius:var(--radius-md);z-index:-1;opacity:var(--nav-bg-o,1)}
.side-nav a{display:flex;align-items:center;gap:10px;padding:clamp(3px,0.8vh,11px) 14px;border-radius:12px;font-family:var(--font-heading);font-size:.86rem;font-weight:700;color:var(--ink-soft);white-space:nowrap;transition:background .25s var(--ease-soft),color .25s var(--ease-soft)}
.side-nav a svg{width:16px;height:16px;flex-shrink:0}
.side-nav a:hover{background:var(--white);color:var(--ink)}
.side-nav a.is-active{background:var(--accent);color:var(--accent-ink)}
/* Пока пункты меню визуально ещё "в топбаре" (не долетели FLIP'ом до
   сайдбара) — показываем их как строку меню на первом экране: жирным
   текстом, без иконок и без подложки-пилюли под активным пунктом. */
body:not(.nav-docked) [data-side-link]{
  padding:4px 10px;background:none;font-weight:800;font-size:.95rem;color:var(--ink);
}
body:not(.nav-docked) [data-side-link] svg{display:none}
body:not(.nav-docked) [data-side-link].is-active{background:none;color:var(--ink)}
.side-phone{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--sidebar-card);border-radius:100px;padding:clamp(6px,1.05vh,12px) 18px;font-size:.82rem;font-weight:700;color:var(--ink-soft)}
.side-phone button{width:26px;height:26px;border-radius:50%;background:var(--white);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.side-phone button svg{width:13px;height:13px}
.side-cta{margin-top:2px;padding-block:clamp(8px,1.4vh,16px)}

/* ==================== HERO ==================== */
.hero{min-height:100svh;display:flex;align-items:center;overflow:hidden;padding-top:calc(var(--topbar-h) + 30px);padding-bottom:40px}
@media(min-width:1180px){.hero{padding-top:clamp(160px,15vw,220px)}}
.hero .container{position:relative;z-index:1}
.hero-inner{max-width:900px;margin-inline:auto;text-align:center}
.hero-title{font-size:clamp(2rem,4.4vw,3.6rem);margin-bottom:16px}
.hero-title .hl{color:var(--accent-2)}
.hero-title .split-word{display:inline-block;overflow:hidden}
.hero p.lead{font-size:1.1rem;color:var(--ink-soft);max-width:600px;margin-inline:auto;font-family:var(--font-body)}
.hero-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin-top:28px}
@media(max-width:640px){.hero-cta{flex-direction:column}.hero-cta .btn{width:100%}}
.hero-traits{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:44px}
.hero-trait{display:flex;align-items:center;gap:8px;font-family:var(--font-heading);font-size:.82rem;font-weight:700;background:var(--white);border:1px solid var(--line);padding:9px 16px;border-radius:100px}
.hero-trait svg{width:15px;height:15px;color:var(--accent)}
.hero-orb{position:absolute;top:50%;left:50%;width:min(64vw,760px);height:min(64vw,760px);transform:translate(-50%,-46%);border-radius:50%;background:radial-gradient(circle at 32% 28%,var(--accent) 0%,var(--accent-2) 42%,transparent 72%);opacity:.4;filter:blur(50px);z-index:0;pointer-events:none;will-change:filter,opacity,transform}
.hero-inner{will-change:filter,opacity,transform}

/* ==================== ГИГАНТСКИЙ ДИВАЙДЕР ==================== */
.wordmark-divider{padding-block:clamp(40px,8vw,90px);overflow:hidden;background:var(--bg-soft)}
.wordmark-static{position:relative;display:inline-block;max-width:100%;font-family:var(--font-display);font-weight:800;font-size:clamp(2.6rem,10vw,9rem);line-height:1;letter-spacing:-.01em;white-space:nowrap}
.wordmark-outline,.wordmark-fill{display:block}
.wordmark-outline{color:var(--accent)}
/* Заливка-изображение внутри букв, видна только в круге вокруг курсора
   (mask-image с radial-gradient, центр которого двигает JS через
   --wm-x/--wm-y) — эффект "подсветки", как на heynesh.com. */
.wordmark-fill{
  position:absolute;inset:0;
  background:url('https://images.unsplash.com/photo-1517694712202-14dd9538aa97?auto=format&fit=crop&w=1600&q=70') center/cover no-repeat;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-mask-image:radial-gradient(circle 220px at var(--wm-x,50%) var(--wm-y,50%),#000 0%,transparent 75%);
  mask-image:radial-gradient(circle 220px at var(--wm-x,50%) var(--wm-y,50%),#000 0%,transparent 75%);
  opacity:0;transition:opacity .35s var(--ease-soft);
  pointer-events:none;
}
.wordmark-static.is-hovering .wordmark-fill{opacity:1}

/* ==================== О СТУДИИ / ТАЙМЛАЙН ==================== */
#about{overflow:hidden}
.about-bg{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.about-bg .blob{position:absolute;border-radius:50%;filter:blur(90px)}
.about-bg .blob1{width:56vw;height:56vw;top:-10%;right:-14%;background:radial-gradient(circle,var(--accent-2) 0%,transparent 70%);opacity:.28}
.about-bg .blob2{width:44vw;height:44vw;bottom:-16%;left:-10%;background:radial-gradient(circle,var(--accent) 0%,transparent 70%);opacity:.24}
.about-intro{position:relative;z-index:1;max-width:700px}
.timeline{position:relative;z-index:1;margin-top:80px;min-height:2550px}
.timeline-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.timeline-svg path{fill:none;stroke:var(--ink);stroke-width:2;opacity:.5}
.timeline-dot{fill:var(--accent-2);stroke:var(--bg);stroke-width:3}
.tl-card{position:absolute;width:min(360px,86vw);background:var(--bg-soft);border-radius:var(--radius-md);padding:26px 28px;box-shadow:var(--shadow-sm)}
.tl-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:10px}
.tl-year{font-family:var(--font-display);font-weight:800;font-size:2.6rem;color:var(--accent);line-height:1}
.tl-badge{font-family:var(--font-heading);font-size:.72rem;font-weight:800;letter-spacing:.02em;color:var(--ink-soft);background:var(--paper);border:1.5px solid var(--line);padding:5px 12px;border-radius:100px;white-space:nowrap;margin-top:8px}
.tl-card h3{font-size:1.15rem;margin-bottom:8px}
.tl-card p{font-size:.9rem;color:var(--ink-soft);line-height:1.55}
.tl-card:nth-of-type(1){top:0;left:0}
.tl-card:nth-of-type(2){top:425px;right:0}
.tl-card:nth-of-type(3){top:765px;left:6%}
.tl-card:nth-of-type(4){top:1080px;right:2%}
.tl-card:nth-of-type(5){top:1520px;left:0}
.tl-card:nth-of-type(6){top:1825px;right:0}
.tl-card:nth-of-type(7){top:2180px;left:4%}
@media(max-width:960px){
  .timeline{min-height:0}
  .timeline-svg{display:none}
  .tl-card{position:static;width:100%;margin-bottom:20px}
}

/* ==================== ПОРТФОЛИО (тёмная секция, гориз. скролл) ==================== */
/* Секция во время горизонтального скролла запинена (position:fixed) ровно
   на своей естественной высоте — если она выше вьюпорта, низ карточек
   весь пин навсегда остаётся за нижним краем окна. Поэтому вертикальные
   отступы/размеры здесь завязаны на vh, а не на vw/px, как в остальных
   секциях: на невысоких экранах секция сама уменьшается и помещается
   целиком, а не полагается на угаданную фиксированную высоту. */
#portfolio{padding-block:clamp(16px,2.6vh,90px);min-height:100svh;display:flex;flex-direction:column;justify-content:center}
.portfolio-head-row{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap;margin-bottom:clamp(10px,1.6vh,48px)}
.portfolio-head-row .section-head{margin-bottom:0}
.portfolio-head-row .section-head h2{font-size:clamp(1.5rem,2.4vw + 0.8vh,2.4rem)}
.portfolio-head-row .side-text{max-width:360px;color:var(--paper-soft);font-size:.98rem}
.h-scroll-viewport{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.h-scroll-viewport::-webkit-scrollbar{display:none}
@media(min-width:769px){.h-scroll-viewport{overflow:hidden}}
@media(min-width:1180px){.h-scroll-track{padding-left:calc(var(--sidebar-w) + 64px)}}
.h-scroll-track{display:flex;gap:24px;width:max-content;will-change:transform}
.p-card{width:min(400px,80vw,32vh);flex-shrink:0;border-radius:var(--radius-md);overflow:hidden;background:var(--dark-soft);border:1px solid var(--line-dark);cursor:pointer;transition:transform .3s var(--ease-soft)}
.p-card:hover{transform:translateY(-6px)}
.p-thumb{display:block;position:relative;aspect-ratio:3/2;background-size:cover;background-position:center;overflow:hidden}
.p-num{position:absolute;top:14px;left:14px;background:rgba(21,19,15,.7);color:var(--paper);font-family:var(--font-heading);font-weight:800;font-size:.72rem;padding:5px 10px;border-radius:100px;backdrop-filter:blur(4px)}
.p-tag{position:absolute;top:14px;right:14px;background:var(--accent);color:var(--accent-ink);font-family:var(--font-heading);font-weight:800;font-size:.68rem;text-transform:uppercase;letter-spacing:.03em;padding:5px 10px;border-radius:100px}
.p-shots{position:absolute;bottom:14px;right:14px;display:flex;align-items:center;gap:5px;background:rgba(21,19,15,.7);color:var(--paper);font-family:var(--font-heading);font-weight:800;font-size:.72rem;padding:5px 10px;border-radius:100px;backdrop-filter:blur(4px)}
.p-shots svg{width:13px;height:13px}
.p-body{padding:clamp(12px,1.8vh,20px)}
.p-body h3{color:var(--paper);font-size:1.1rem;margin-bottom:8px}
.p-body p{color:var(--paper-soft);font-size:.88rem;margin-bottom:16px;min-height:36px}
.p-link{width:38px;height:38px;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:flex;align-items:center;justify-content:center;margin-left:auto}
.p-link svg{width:16px;height:16px}
.h-scroll-hint{display:flex;align-items:center;gap:10px;margin-top:clamp(10px,1.6vh,24px);color:var(--paper-faint);font-size:.8rem;font-weight:600}
.h-scroll-hint svg{width:16px;height:16px;animation:hscroll-arrow 1.6s ease-in-out infinite}
@keyframes hscroll-arrow{0%,100%{transform:translateX(0)}50%{transform:translateX(6px)}}

/* ==================== ЧТО ВЫ ПОЛУЧАЕТЕ ==================== */
.what-title{text-align:center;margin-bottom:50px}
.what-title h2{font-size:clamp(2.6rem,7vw,5rem)}
.what-copy{max-width:920px;margin-inline:auto;text-align:center}
.what-copy p{font-family:var(--font-heading);font-size:clamp(1.4rem,2.8vw,2.1rem);font-weight:700;line-height:1.4}
.what-copy .word{color:var(--ink-faint);transition:color .2s linear}
/* ---- Значки-подсказки в тексте "Что вы получаете" ----
   Маленький бейдж всегда виден в строке; при наведении/фокусе/тапе из
   него разворачивается карточка с названием и описанием — как на
   heynesh.com (см. .capa-card-item в их вёрстке). */
.what-chip{position:relative;display:inline-flex;vertical-align:middle;margin-inline:.15em}
.what-chip-badge{display:inline-flex;align-items:center;gap:.2em;width:1.6em;height:1.6em;padding-inline:0;border-radius:8px;background:var(--accent);color:var(--accent-ink);cursor:pointer;transition:border-radius .2s var(--ease-soft)}
.what-chip-badge svg:first-child{width:58%;height:58%;margin-inline:auto}
.what-chip-arrow{width:8px;height:8px;flex-shrink:0;transition:transform .2s var(--ease-soft)}
.what-chip.is-open .what-chip-arrow,.what-chip:hover .what-chip-arrow,.what-chip:focus-within .what-chip-arrow{transform:rotate(180deg)}
.what-chip-card{position:absolute;top:100%;left:50%;transform:translate(-50%,10px) scale(.85);transform-origin:top center;width:min(240px,60vw);background:var(--paper);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);padding:16px;text-align:left;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s var(--ease-soft),transform .25s var(--ease-soft),visibility .25s;z-index:60}
.what-chip-card .icon-wrap{width:34px;height:34px;margin-bottom:10px;background:var(--ink) !important;color:var(--accent) !important}
.what-chip-card .icon-wrap svg{width:52%;height:52%}
.what-chip-card strong{display:block;font-family:var(--font-heading);font-size:.92rem;color:var(--ink);margin-bottom:4px}
.what-chip-card span{display:block;font-family:var(--font-body);font-size:.8rem;font-weight:400;color:var(--ink-soft);line-height:1.45}
.what-chip.is-open .what-chip-card,.what-chip:hover .what-chip-card,.what-chip:focus-within .what-chip-card{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,14px) scale(1)}

/* ==================== УСЛУГИ ==================== */
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.service-card{background:var(--bg-soft);border-radius:var(--radius-md);padding:32px 28px;display:flex;flex-direction:column;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.service-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg)}
.service-card h3{margin-top:22px}
.service-card p{color:var(--ink-soft);font-size:.95rem;margin-top:10px;flex-grow:1}
.service-meta{display:flex;justify-content:space-between;align-items:center;margin-top:20px;padding-top:18px;border-top:1px dashed var(--line);font-size:.85rem}
.service-meta .price{font-weight:800;font-family:var(--font-display);font-size:1rem;color:var(--ink)}
.service-meta .term{color:var(--ink-soft)}
.service-meta--stack{flex-direction:column;align-items:flex-start;gap:4px}
.service-card .btn{margin-top:20px}

@media(max-width:960px){.services-grid{grid-template-columns:repeat(2,1fr)}}

/* ==================== ПРОДВИЖЕНИЕ: ЧТО ДАЛЬШЕ ==================== */
.promo-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.promo-grid .service-card h3{margin-top:0}
.promo-note{max-width:680px;margin:32px auto 0;text-align:center;color:var(--ink-soft);font-size:1rem;line-height:1.55}
.promo-cta{text-align:center;margin-top:28px}
@media(max-width:640px){.promo-grid{grid-template-columns:1fr}}
@media(max-width:640px){.services-grid{grid-template-columns:1fr}}
.services-grid-single{max-width:420px}

/* ==================== ПОСАДОЧНЫЕ СТРАНИЦЫ УСЛУГ (yandex-direct.html, seo.html) ==================== */
.offer-list{max-width:700px;margin-top:8px;list-style:none}
.offer-list li{position:relative;padding-left:30px;margin-bottom:14px;color:var(--ink-soft);font-size:1.02rem;line-height:1.5}
.offer-list li::before{content:'';position:absolute;left:0;top:7px;width:14px;height:14px;border-radius:4px;background:var(--accent)}
.steps-list{max-width:760px}
.step-row{display:flex;gap:24px;align-items:flex-start;padding-block:24px;border-top:1px dashed var(--line)}
.step-row:first-child{border-top:none;padding-top:0}
.step-num{font-family:var(--font-display);font-weight:800;font-size:1.8rem;color:var(--accent);flex-shrink:0;width:52px;line-height:1}
.step-row h3{font-size:1.05rem;margin-bottom:6px}
.step-row p{color:var(--ink-soft);font-size:.92rem;line-height:1.55}
.back-home-link{display:inline-block;margin-top:24px;font-family:var(--font-heading);font-weight:700;font-size:.9rem;color:var(--ink);border-bottom:2px solid var(--accent)}
.back-home-link:hover{color:var(--accent-ink,var(--ink))}

/* ==================== КВИЗ ==================== */
.quiz-box{max-width:740px;margin-inline:auto;background:var(--bg-soft);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:clamp(28px,5vw,52px);position:relative;overflow:hidden}
.quiz-progress{height:6px;background:var(--bg-soft);border-radius:100px;overflow:hidden;margin-bottom:32px}
.quiz-progress-bar{height:100%;background:var(--accent-2);width:20%;transition:width .4s var(--ease-soft)}
.quiz-step{display:none}
.quiz-step.is-active{display:block;animation:fadeIn .4s var(--ease-soft)}
@keyframes fadeIn{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:none}}
.quiz-step h3{font-size:1.35rem;margin-bottom:24px}
.quiz-options{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.quiz-option{border:1.5px solid var(--line);border-radius:var(--radius-sm);padding:19px 18px;text-align:left;font-weight:700;font-family:var(--font-heading);transition:all .2s var(--ease-soft)}
.quiz-option:hover{border-color:var(--ink);background:var(--bg-soft)}
.quiz-option.is-selected{border-color:var(--accent-2);background:var(--accent-2);color:#fff}
.quiz-nav{display:flex;justify-content:space-between;margin-top:30px}
.quiz-result{text-align:center;padding-top:6px}
.quiz-result .icon-wrap{margin-inline:auto;background:var(--accent);color:var(--accent-ink)}
.quiz-result .icon-wrap svg{width:30px;height:30px}
.quiz-bonus{margin-top:18px;font-size:.92rem;background:var(--bg-soft);color:var(--ink);padding:12px 18px;border-radius:100px;display:inline-block;font-weight:700}
@media(max-width:640px){.quiz-options{grid-template-columns:1fr}}

/* ==================== ОТЗЫВЫ (Swiper) ==================== */
.reviews-head-row{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:24px;margin-bottom:12px}
.typing-chip{display:inline-flex;align-items:center;gap:10px;background:var(--white);border-radius:100px;padding:8px 16px 8px 8px}
.typing-avatar{width:30px;height:30px;border-radius:50%;background:var(--ink);color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:800;font-family:var(--font-heading)}
.typing-dots{display:flex;gap:4px}
.typing-dots span{width:6px;height:6px;border-radius:50%;background:var(--ink-faint);animation:typing 1.2s infinite ease-in-out}
.typing-dots span:nth-child(2){animation-delay:.15s}
.typing-dots span:nth-child(3){animation-delay:.3s}
@keyframes typing{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-4px);opacity:1}}
.reviews-swiper{padding-bottom:8px !important;overflow:visible !important}
.reviews-swiper .swiper-wrapper{align-items:stretch !important}
.reviews-swiper .swiper-slide{height:auto !important}
.review-card{background:var(--bg-soft);border-radius:var(--radius-md);padding:32px;height:100%;display:flex;flex-direction:column}
.review-quote-icon{width:40px;height:40px;border-radius:10px;background:var(--accent);color:var(--accent-ink);display:flex;align-items:center;justify-content:center;margin-bottom:20px}
.review-quote-icon svg{width:20px;height:20px}
.review-text{font-family:var(--font-heading);font-size:1.05rem;font-weight:700;line-height:1.45;flex-grow:1;margin-bottom:22px}
.review-meta{display:flex;align-items:center;gap:12px}
.review-logo{width:44px;height:44px;border-radius:50%;background:var(--ink);color:var(--accent);display:flex;align-items:center;justify-content:center;font-weight:800;font-family:var(--font-heading);flex-shrink:0;font-size:.8rem}
.review-name{font-weight:700;font-size:.92rem}
.review-company{font-size:.8rem;color:var(--ink-soft)}
.reviews-controls{display:flex;align-items:center;gap:16px;margin-top:32px;justify-content:center}
.review-arrow{width:48px;height:48px;border-radius:50%;background:var(--white);display:flex;align-items:center;justify-content:center;transition:all .25s var(--ease-soft)}
.review-arrow:hover{background:var(--ink);color:var(--accent)}
.review-arrow svg{width:18px;height:18px}
.review-pagination{display:flex !important;align-items:center;gap:6px;width:auto !important}
.review-pagination .swiper-pagination-bullet{width:8px;height:8px;background:var(--line);opacity:1;margin:0 !important;transition:all .25s var(--ease-soft)}
.review-pagination .swiper-pagination-bullet-active{background:var(--accent-2);width:22px;border-radius:5px}

/* ==================== FAQ ==================== */
.faq-list{max-width:980px;margin-inline:auto;display:grid;grid-template-columns:1fr 1fr;gap:14px;align-content:start}
.faq-item{background:var(--bg-soft);border-radius:var(--radius-sm);overflow:hidden;align-self:start}
.faq-item summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 24px;font-weight:700;font-family:var(--font-heading);cursor:pointer;font-size:.98rem}
.faq-item summary::-webkit-details-marker{display:none}
.faq-plus{width:26px;height:26px;flex-shrink:0;position:relative;border-radius:50%;background:var(--bg-soft)}
.faq-plus::before,.faq-plus::after{content:"";position:absolute;background:var(--ink);border-radius:2px;top:50%;left:50%;transform:translate(-50%,-50%)}
.faq-plus::before{width:11px;height:2px}
.faq-plus::after{width:2px;height:11px;transition:transform .3s var(--ease-soft)}
.faq-item[open] .faq-plus{background:var(--accent)}
.faq-item[open] .faq-plus::after{transform:translate(-50%,-50%) rotate(90deg) scaleY(0)}
.faq-item .faq-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s var(--ease-soft)}
.faq-item[open] .faq-body{grid-template-rows:1fr}
.faq-item .faq-body-inner{overflow:hidden}
.faq-item p{padding:0 24px 22px;color:var(--ink-soft);font-size:.92rem}
@media(max-width:760px){.faq-list{grid-template-columns:1fr}}

/* ==================== ФОРМА ЗАЯВКИ ==================== */
/* Меньше отступа снизу, чем у остальных секций (--section-py) — иначе на
   невысоких экранах форма не помещается целиком при скролле до конца
   страницы (упирается в высоту вьюпорта раньше, чем в конец документа). */
#contact{padding-bottom:clamp(20px,3vw,48px)}
.contact-wrap{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
/* Форма выше блока контактов (больше полей) — при центрировании по строке
   блок контактов визуально "повисает" выше центра; лёгкий отступ сверху
   опускает его так, чтобы обе колонки читались как одна центрированная пара. */
.contact-info{margin-top:clamp(20px,4vh,56px)}
.contact-info h2{margin-bottom:16px}
.contact-info p{color:var(--ink-soft);margin-bottom:28px}
.contact-list{display:flex;flex-direction:column;gap:16px}
.contact-list li{display:flex;align-items:center;gap:14px;font-weight:700;font-family:var(--font-heading)}
.contact-coverage{display:flex;align-items:center;gap:10px;margin-top:16px;font-size:.88rem;color:var(--ink-soft)}
.contact-coverage svg{width:18px;height:18px;flex-shrink:0}
.contact-quicklinks{display:flex;gap:16px;margin-top:28px}
.quicklink{width:58px;height:58px;border-radius:26%;overflow:hidden;display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:var(--shadow-sm);transition:transform .35s cubic-bezier(.34,1.56,.64,1),box-shadow .3s var(--ease-soft)}
.quicklink:hover{transform:scale(1.15) rotate(-8deg);box-shadow:var(--shadow-md)}
.quicklink:nth-child(2):hover{transform:scale(1.15) rotate(8deg)}
.quicklink svg{width:auto;height:100%}
.quicklink img{width:100%;height:100%;object-fit:cover}
.quicklink img.icon-glyph{width:auto;height:100%;object-fit:contain}
.qk-max{background:linear-gradient(140deg,#3D7BFF 0%,#6A4CF0 55%,#9C4FE0 100%)}
.qk-tg{background:linear-gradient(140deg,#2AABEE 0%,#229ED9 100%)}
.qk-wa{background:linear-gradient(140deg,#6FDB6F 0%,#25D366 100%)}
.qk-wa svg{transform:scale(.7)}

.form-card{background:var(--bg-soft);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:clamp(20px,3vw,32px)}
.form-row{margin-bottom:14px}
.form-row label{display:block;font-size:.84rem;font-weight:700;margin-bottom:6px;font-family:var(--font-heading)}
.form-row input,.form-row textarea,.form-row select{
  width:100%;padding:12px 16px;border:1.5px solid var(--line);border-radius:var(--radius-sm);
  background:var(--bg-soft);transition:border-color .2s var(--ease-soft),background .2s var(--ease-soft);
}
.form-row input:focus,.form-row textarea:focus,.form-row select:focus{border-color:var(--ink);background:#fff}
.form-row textarea{resize:vertical;min-height:70px}
.form-row.has-error input,.form-row.has-error textarea{border-color:var(--danger)}
.field-error{display:none;color:var(--danger);font-size:.78rem;margin-top:6px;font-weight:600}
.form-row.has-error .field-error{display:block}
.form-check{display:flex;align-items:flex-start;gap:10px;font-size:.82rem;color:var(--ink-soft)}
.form-check input{width:18px;height:18px;flex-shrink:0;margin-top:1px;accent-color:var(--accent-2)}
.form-check a{color:var(--ink);font-weight:700;text-decoration:underline}
.form-honeypot{position:absolute;left:-9999px;opacity:0;height:0;width:0}
.form-status{margin-top:18px;padding:14px 16px;border-radius:var(--radius-sm);font-size:.9rem;font-weight:600;display:none}
.form-status.is-success{display:block;background:#EAF7EC;color:var(--success)}
.form-status.is-error{display:block;background:#FCEAE6;color:var(--danger)}
.selected-service-chip{display:none;align-items:center;gap:8px;background:var(--accent);color:var(--accent-ink);font-size:.82rem;font-weight:700;padding:8px 16px;border-radius:100px;margin-bottom:18px}
.selected-service-chip.is-visible{display:inline-flex}
@media(max-width:960px){.contact-wrap{grid-template-columns:1fr}}

/* ==================== ПОДВАЛ ==================== */
.footer{padding-block:22px}
.footer-top{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:32px;padding-bottom:36px}
.footer-col{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.footer-col-title{font-family:var(--font-heading);font-size:.78rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--paper-soft);margin-bottom:2px}
.footer-col a{font-size:.84rem;color:var(--paper-soft);transition:color .2s var(--ease-soft)}
.footer-col a:hover{color:var(--paper)}
.footer-phone{font-family:var(--font-heading);font-weight:700;color:var(--paper);font-size:.95rem;margin-top:14px}
.footer-city{font-size:.84rem;color:var(--paper-soft)}
.footer-col-brand .side-social{margin-top:6px}
.footer-col-brand .side-social a{color:#fff}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;padding-top:22px;border-top:1px solid var(--line-dark);margin-left:calc(-1 * clamp(20px,5vw,40px));margin-right:calc(-1 * clamp(20px,5vw,40px));padding-left:clamp(20px,5vw,40px);padding-right:clamp(20px,5vw,40px)}
@media(min-width:1180px){.footer-bottom{margin-left:calc(-1 * (var(--sidebar-w) + 64px))}}
.footer-copy{font-size:.84rem;color:var(--paper-soft)}
.footer-links{display:flex;gap:24px;flex-wrap:wrap}
.footer-links button{font-size:.84rem;color:var(--paper-soft);transition:color .2s var(--ease-soft)}
.footer-links button:hover{color:var(--paper)}
@media(max-width:960px){.footer-top{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.footer-top{grid-template-columns:1fr}}

/* ==================== МОДАЛКИ ==================== */
.modal-overlay{position:fixed;inset:0;background:rgba(15,15,10,.7);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:20px;z-index:2000;opacity:0;pointer-events:none;transition:opacity .3s var(--ease-soft)}
.modal-overlay.is-open{opacity:1;pointer-events:auto}
.modal-box{background:var(--bg-soft);border-radius:var(--radius-lg);max-width:640px;width:100%;max-height:86vh;overflow-y:auto;padding:36px;position:relative;transform:translateY(20px) scale(.97);transition:transform .3s var(--ease-soft)}
.modal-overlay.is-open .modal-box{transform:none}
.modal-close{position:absolute;top:20px;right:20px;width:40px;height:40px;border-radius:50%;background:var(--bg-soft);display:flex;align-items:center;justify-content:center}
.modal-close:hover{background:var(--accent)}
.modal-close svg{width:18px;height:18px}
#portfolio-modal .modal-box{max-width:760px}

/* ---- Галерея скриншотов в модалке портфолио ----
   Несколько реальных скриншотов проекта вместо одной картинки — можно
   пролистать стрелками/точками/свайпом, чтобы показать сайт целиком,
   а не один кадр (для доверия). */
.modal-gallery{position:relative;aspect-ratio:16/10;border-radius:var(--radius-md);margin-bottom:22px;overflow:hidden;background:var(--bg-mute,#eee)}
.modal-gallery-track{display:flex;height:100%;transition:transform .45s var(--ease-soft)}
.modal-gallery-slide{flex:0 0 100%;height:100%;background-size:cover;background-position:top center}
.gallery-arrow{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.92);color:var(--ink);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-md);z-index:2;transition:background .2s var(--ease-soft)}
.gallery-arrow:hover{background:var(--accent)}
.gallery-arrow svg{width:18px;height:18px}
.gallery-prev{left:12px}
.gallery-next{right:12px}
.gallery-dots{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);display:flex;gap:6px;z-index:2}
.gallery-dot{width:7px;height:7px;border-radius:100px;background:rgba(255,255,255,.55);transition:width .25s var(--ease-soft),background .25s var(--ease-soft)}
.gallery-dot.is-active{width:22px;background:var(--accent)}
.gallery-counter{position:absolute;top:12px;right:12px;background:rgba(21,19,15,.72);color:var(--paper);font-family:var(--font-heading);font-weight:700;font-size:.72rem;padding:5px 11px;border-radius:100px;z-index:2}
.modal-tags{display:flex;gap:20px;margin-top:18px;flex-wrap:wrap;align-items:flex-end}
.modal-tags div{font-size:.85rem}
.modal-tags strong{display:block;font-size:.72rem;text-transform:uppercase;color:var(--ink-soft);margin-bottom:4px;letter-spacing:.04em;font-family:var(--font-heading)}
.modal-visit{margin-left:auto;font-family:var(--font-heading);font-weight:800;font-size:.85rem;display:inline-flex;align-items:center;gap:6px;color:var(--ink);border-bottom:2px solid var(--accent)}
.modal-visit svg{width:15px;height:15px}
.modal-visit:hover{color:var(--accent-ink,var(--ink));border-bottom-color:var(--ink)}
#legal-modal .modal-box{max-width:680px}
#legal-modal h3{margin-bottom:16px}
#legal-modal p{color:var(--ink-soft);font-size:.9rem;margin-bottom:12px}