@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500&family=Playfair+Display:ital,wght@1,400;1,500;1,600&family=Roboto:wght@400;500;600&display=swap');

/* =========================================================
   0. ОСНОВА
   Брейкпоинты во всём файле: mobile (по умолчанию),
   tablet ≥ 700px, desktop ≥ 1080px.
   ========================================================= */
:root{
  --bg:#0C0C0C;
  --ice:#D7E2EA;
  --gap-section: 80px;
  --header-height: 76px;

  /* --- Тема (день/ночь) — управляет "светлыми" секциями сайта: шапка,
     обо мне, лента брендов, услуги, контакты. Секции "персона"/"проекты"
     остаются тёмным акцентом в обеих темах — так сохраняется исходный
     ритм чередования светлых/тёмных полос. --- */
  --surface:#ffffff;
  --surface-soft:#f2f2f2;
  --surface-alt:#f4f4f4;
  --surface-card:#fafafa;
  --surface-ink:#0C0C0C;
  --surface-ink-rgb:12,12,12;
  --surface-ink-soft:#4A4A4A;
}
[data-theme="night"]{
  --surface:#121212;
  --surface-soft:#1a1a1a;
  --surface-alt:#1c1c1c;
  --surface-card:#181818;
  --surface-ink:#EDEFF2;
  --surface-ink-rgb:225,228,232;
  --surface-ink-soft:#9AA3AC;
}
*{box-sizing:border-box;margin:0;padding:0;}
html,body{background:var(--bg);}
body{font-family:'Kanit',sans-serif; overflow-x:clip; color:var(--ice); transition:background-color .5s ease;}
img,video{display:block; max-width:100%;}
a{text-decoration:none; color:inherit;}
button{font-family:inherit; cursor:pointer; background:none; border:none;}
.mono{font-family:'JetBrains Mono',monospace;}
.section-label{ font-family:'JetBrains Mono',monospace; text-align:center; color:rgba(215,226,234,0.4); font-size:11px; text-transform:uppercase; letter-spacing:.3em; margin-bottom:2rem; }

.hero-heading{
  background: linear-gradient(180deg, #646973 0%, #BBCCD7 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
}
/* тот же приём градиентного текста, но тёмный — для заголовков на светлой (темизируемой) секции */
.hero-heading--dark{
  background: linear-gradient(180deg, var(--surface-ink) 0%, var(--surface-ink-soft) 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
  transition:background .5s ease;
}
/* заголовки разделов — уменьшены и унифицированы для всех "страниц" сайта */
.title-xxl{ font-weight:800; text-transform:uppercase; text-align:center; line-height:1.05; letter-spacing:-0.01em; font-size:clamp(2rem,6.5vw,84px); }

/* кнопки — контрастные, белые (было фиолетовым градиентом) */
.btn{
  display:inline-block; border-radius:999px; color:var(--bg); font-weight:600; text-transform:uppercase; letter-spacing:.12em;
  padding: .9rem 2.2rem; font-size:.8rem;
  background:#ffffff;
  transition: transform .2s ease, box-shadow .2s ease;
}
.btn:hover{ transform:scale(1.03); box-shadow:0 6px 24px rgba(255,255,255,0.15); }
.btn--icon{ display:inline-flex; align-items:center; gap:.6rem; }
.btn--icon svg{ flex-shrink:0; }
.btn--ghost{
  background:none; box-shadow:none; outline:none; border:2px solid var(--ice); color:var(--ice);
  padding:.8rem 2rem; font-size:.8rem; transition:background .2s ease;
}
.btn--ghost:hover{ background:rgba(215,226,234,0.1); }
.btn--view{
  background:#fff; color:var(--bg); font-weight:600; text-transform:uppercase; letter-spacing:.1em;
  padding:.6rem 1.6rem; font-size:.78rem; transition:transform .2s ease; flex-shrink:0; white-space:nowrap;
}
.btn--view:hover{ transform:scale(1.04); }

/* =========================================================
   1. УНИВЕРСАЛЬНЫЙ СЛОТ ПОД ФОТО/ВИДЕО
   ========================================================= */
.media-slot{ position:relative; overflow:hidden; background:#16171a; }
.media-slot .slot-media{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .5s ease; }
.media-slot .slot-placeholder{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; text-align:center;
  color:rgba(215,226,234,0.45); border:1.5px dashed rgba(215,226,234,0.35);
  background: repeating-linear-gradient(135deg, rgba(215,226,234,0.05) 0 10px, transparent 10px 20px), #16171a;
  transition:opacity .3s ease;
}
.media-slot .slot-placeholder span{ font-size:11px; letter-spacing:.06em; text-transform:uppercase; padding:0 10px; }
.media-slot .slot-placeholder svg{ opacity:.55; }
.media-slot.is-filled .slot-media{ opacity:1; }
.media-slot.is-filled .slot-placeholder{ opacity:0; pointer-events:none; }

/* =========================================================
   2. АНИМАЦИЯ ПОЯВЛЕНИЯ ПРИ СКРОЛЛЕ
   ========================================================= */
.fade-in{ opacity:0; transform: translateY(30px); transition: opacity .7s cubic-bezier(.25,.1,.25,1), transform .7s cubic-bezier(.25,.1,.25,1); }
.fade-in.in-view{ opacity:1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce){ .fade-in{ transition:none !important; opacity:1 !important; transform:none !important; } }

/* =========================================================
   3. ШАПКА — фиксированная, белая, с бургер-меню на мобильных
   ========================================================= */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:200;
  display:flex; align-items:center; justify-content:space-between;
  height:var(--header-height);
  padding:0 1.5rem;
  background:var(--surface);
  box-shadow:0 4px 24px rgba(0,0,0,0.08);
  border-bottom:1px solid rgba(var(--surface-ink-rgb),0.08);
  transition:transform .3s ease, background-color .5s ease, border-color .5s ease;
  box-sizing:border-box;
}
#siteHeader.header-hidden{ transform:translateY(-100%); }

.site-header__logo{ display:flex; align-items:center; gap:.1rem; flex-shrink:0; }
.site-header__logo img{ height:65px; width:auto; display:block; }
.site-header__wordmark{ font-family:'Playfair Display', serif; font-style:italic; font-weight:400; font-size:40.9px; line-height:1; color:var(--surface-ink); white-space:nowrap; transform:translate(-15%,-4%); transition:color .5s ease; }

.header-right{ display:flex; align-items:center; gap:1.5rem; }

.nav__links{ display:flex; gap:1.75rem; }
.nav__link{ position:relative; font-family:'Roboto',sans-serif; color:var(--surface-ink); font-size:.82rem; font-weight:500; text-transform:uppercase; letter-spacing:.08em; padding-bottom:.3rem; transition:color .5s ease; }
.nav__link::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--surface-ink);
  opacity:0; transition:opacity .25s ease, background-color .5s ease;
}
.nav__link:hover::after{ opacity:1; }

/* бургер — скрыт по умолчанию, показывается только на мобильных */
.burger-btn{
  display:none; width:42px; height:42px; border-radius:50%; flex-shrink:0;
  background:rgba(var(--surface-ink-rgb),0.05); border:1px solid rgba(var(--surface-ink-rgb),0.15);
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
  cursor:pointer; transition:.25s, background-color .5s ease, border-color .5s ease;
}
.burger-btn span{ display:block; width:18px; height:2px; background:var(--surface-ink); border-radius:2px; transition:.3s, background-color .5s ease; }
.burger-btn.active span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger-btn.active span:nth-child(2){ opacity:0; }
.burger-btn.active span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.mobile-menu-overlay{ display:none; }

/* --- Переключатель темы (день/ночь) --- */
.theme-toggle{
  position:relative; width:42px; height:42px; border-radius:50%; flex-shrink:0;
  background:rgba(var(--surface-ink-rgb),0.05); border:1px solid rgba(var(--surface-ink-rgb),0.15);
  display:flex; align-items:center; justify-content:center;
  color:var(--surface-ink);
  transition:background-color .5s ease, border-color .5s ease, transform .2s ease;
}
.theme-toggle:hover{ transform:scale(1.06); }
.theme-toggle__icon{ position:absolute; transition:opacity .35s ease, transform .5s cubic-bezier(.16,1,.3,1); }
.theme-toggle__icon--sun{ opacity:1; transform:rotate(0deg) scale(1); }
.theme-toggle__icon--moon{ opacity:0; transform:rotate(-70deg) scale(.5); }
[data-theme="night"] .theme-toggle__icon--sun{ opacity:0; transform:rotate(70deg) scale(.5); }
[data-theme="night"] .theme-toggle__icon--moon{ opacity:1; transform:rotate(0deg) scale(1); }
@media (prefers-reduced-motion: reduce){
  .theme-toggle__icon{ transition:opacity .3s ease; }
}

@media (max-width:700px){
  :root{ --header-height: 64px; }
  .site-header{ padding:0 1rem; }
  .site-header__logo img{ height:48px; }
  .site-header__wordmark{ font-size:30.4px; }
  .nav__links{ display:none; }
  .burger-btn{ display:flex; }
  .header-right{ gap:.6rem; }

  .mobile-menu-overlay{
    display:block; position:fixed; inset:0; z-index:190;
    background:rgba(10,10,10,0.62); backdrop-filter:blur(5px) saturate(120%);
    opacity:0; visibility:hidden; transition:opacity .3s ease;
    touch-action:none; overscroll-behavior:contain;
  }
  .mobile-menu-overlay.open{ opacity:1; visibility:visible; pointer-events:auto; }
  .mobile-menu-overlay:not(.open){ pointer-events:none; }

  /* параллакс: полупрозрачный размытый фон меню — видно, что находится
     под ним, без риска ломать sticky/layout остального контента */

  .mobile-menu{ display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; gap:1.1rem; }
  .mobile-menu a{
    font-family:'Roboto',sans-serif; color:var(--ice); font-weight:500; font-size:1.2rem; text-transform:uppercase; letter-spacing:.08em;
    padding:.7rem 2rem; border-radius:999px; background:rgba(255,255,255,0.05); border:1px solid rgba(215,226,234,0.2);
    transition:.2s;
  }
  .mobile-menu a:active{ background:var(--ice); color:var(--bg); }
}

/* якорные переходы не должны прятаться под фиксированной шапкой */
#about, #persona, #services, #projects, #contact{ scroll-margin-top: var(--header-height); }

/* =========================================================
   4. HERO / ОБО МНЕ (объединены в один экран)
   ========================================================= */
.hero{ min-height:100vh; padding-top:calc(var(--header-height) + 1.5rem); display:flex; flex-direction:column; position:relative; overflow:hidden; box-sizing:border-box; }

.hero__title-wrap{ margin-top:1rem; padding:0 1.5rem; }
.hero__title{
  font-weight:800; text-transform:uppercase; text-align:center; letter-spacing:-0.01em; line-height:1.05;
  font-size:clamp(2rem,6.5vw,84px);
}

/* --- светлая тема hero/"обо мне" (день/ночь) --- */
.hero--light{ background:var(--surface); transition:background-color .5s ease; }
.hero--light .hero__title{
  background: linear-gradient(180deg, var(--surface-ink) 0%, var(--surface-ink-soft) 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
}
.hero--light .section-label{ color:rgba(var(--surface-ink-rgb),.4); }
.hero--light .hero__about-text{ color:rgba(var(--surface-ink-rgb),.8); }
.hero--light .slot-placeholder{
  color:rgba(var(--surface-ink-rgb),.4); border-color:rgba(var(--surface-ink-rgb),.25);
  background: repeating-linear-gradient(135deg, rgba(var(--surface-ink-rgb),0.04) 0 10px, transparent 10px 20px), var(--surface-soft);
}
.hero--light .media-slot{ background:var(--surface-soft); }

.hero__portrait{
  position:relative; z-index:10; order:2; margin:0 auto;
  width:280px; aspect-ratio:3/4; border-radius:24px; overflow:hidden; flex-shrink:0;
}
.hero__portrait .reveal-top{
  position:absolute; inset:0; opacity:0; transition:opacity .35s ease;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-size:100% 100%; mask-size:100% 100%;
}
.hero__portrait .reveal-top.is-active{ opacity:1; }

/* --- две колонки: текст слева, фото справа (примерно равные по размеру) --- */
.hero__content{
  display:flex; flex-direction:column; align-items:center; gap:2.5rem;
  max-width:1100px; margin:2rem auto 0; padding:0 1.5rem 2rem;
}
.hero__bottom{ width:100%; position:relative; z-index:20; order:1; }
.hero__about{ max-width:520px; margin:0 auto; text-align:left; }
.hero__about .section-label{ text-align:left; margin-bottom:.7rem; }
.hero__about-text-group{ display:flex; flex-direction:column; gap:.9rem; }
.hero__about-text{ font-weight:400; line-height:1.6; font-size:clamp(.95rem,1.6vw,1.15rem); color:rgba(215,226,234,.9); }
.hero__about-text-group .hero__about-text:first-child{ font-weight:600; }

@media (min-width:700px){
  .site-header{ padding:0 2.5rem; }
  .nav__links{ gap:2.5rem; }
  .nav__link{ font-size:.95rem; }
  .hero__portrait{ width:320px; }
}
@media (min-width:1080px){
  .site-header{ padding:0 3rem; }
  .nav__link{ font-size:1.05rem; }
  .hero{ padding-top:calc(var(--header-height) + 2.5rem); }

  .hero__content{ flex-direction:row; align-items:center; justify-content:center; gap:4rem; margin-top:3rem; }
  .hero__bottom{ order:1; flex:1; max-width:460px; }
  .hero__about{ max-width:none; }
  .hero__portrait{ order:2; width:min(38vw, 420px); margin:0 0 0 2rem; }
}

/* =========================================================
   5. MARQUEE (компании и продукты — часть "обо мне", светлая тема)
   ========================================================= */
.marquee{ background:var(--surface); padding:1rem 0 3.5rem; overflow:hidden; transition:background-color .5s ease; }
.marquee .section-label{ color:rgba(var(--surface-ink-rgb),.4); }
.marquee__rows{ display:flex; flex-direction:column; gap:12px; }
/* padding+отрицательный margin: даёт запас по вертикали для лёгкого
   zoom/тилта плиток при наведении, не обрезая их и не меняя раскладку
   (overflow:hidden всё ещё нужен по горизонтали — для бесшовной прокрутки) */
.marquee__row{ overflow:hidden; padding:18px 0; margin:-18px 0; }
.marquee-track{ display:flex; gap:12px; width:max-content; will-change:transform; }
.brand-tile{ position:relative; width:160px; height:96px; border-radius:16px; flex-shrink:0; background:var(--surface-alt); border:1px solid rgba(var(--surface-ink-rgb),0.08); display:flex; align-items:center; justify-content:center; padding:16px; box-sizing:border-box; }
@media (max-width:699px){
  .marquee-track{ gap:8px; }
  .brand-tile{ width:96px; height:58px; border-radius:10px; padding:9px; }
}
.brand-tile .slot-media{ position:static; width:auto; height:auto; max-width:100%; max-height:100%; object-fit:contain; }
.brand-tile .slot-placeholder{
  position:absolute; inset:0; border-radius:16px;
  color: rgba(var(--surface-ink-rgb),.35); border-color: rgba(var(--surface-ink-rgb),.15);
  background: repeating-linear-gradient(135deg, rgba(var(--surface-ink-rgb),0.04) 0 10px, transparent 10px 20px), var(--surface-alt);
}
.brand-tile .slot-placeholder svg{ width:20px; height:20px; }
.brand-tile .slot-placeholder span{ font-size:9px; }

@media (min-width:700px){ .marquee{ border-radius:50px 50px 0 0; } }
@media (min-width:1080px){ .marquee{ border-radius:60px 60px 0 0; } }

/* =========================================================
   6. ПЕРСОНА (текст-интро + видео из жизни, отдельным блоком ниже)
   ========================================================= */
.persona{
  background:var(--bg); border-radius:32px 32px 0 0; margin-top:-2rem; position:relative; z-index:5;
  padding:6rem 1.25rem 5rem;
}

.persona-intro{ max-width:640px; margin:0 auto 3rem; text-align:center; display:flex; flex-direction:column; align-items:center; }
.persona-badge{ padding:.5rem 1.2rem; border-radius:999px; color:var(--ice); font-size:.75rem; border:1px solid rgba(215,226,234,.2); background:rgba(255,255,255,.03); }
.persona-heading{ font-weight:700; line-height:1.15; font-size:clamp(1.4rem,4vw,2.1rem); color:var(--ice); }
.persona-subtext{ margin-top:1rem; color:rgba(215,226,234,.75); line-height:1.6; font-size:.95rem; }

.scene-wrap{ max-width:1100px; margin:0 auto; }
.scene{ position:relative; width:100%; height:46vh; min-height:280px; overflow:hidden; background:#000; border-radius:24px; }
.scene-video-layer{ position:absolute; inset:0; }
.scene-video-layer .media-slot{ position:absolute; inset:0; opacity:0; transition:opacity 1000ms ease-in-out; }
.scene-video-layer .media-slot.active{ opacity:1; z-index:2; }
.scene-video-layer .media-slot .slot-media{ opacity:1; } /* видимость слоя решается через .active на слоте, не нужен .is-filled */

.skeleton-shimmer{
  position:absolute; inset:0; display:none; overflow:hidden;
  background:#0a0a0a;
  align-items:center; justify-content:center;
}
.media-slot.is-skeleton .skeleton-shimmer{ display:flex; }
.media-slot.is-skeleton .slot-media{ opacity:0; }

.skeleton-badge{
  width:34px; height:34px; border-radius:50%;
  border:2.5px solid rgba(255,255,255,0.15);
  border-top-color:rgba(255,255,255,0.75);
  animation: spinner-spin .9s linear infinite;
}
.skeleton-badge svg{ display:none; }

@keyframes spinner-spin{
  to{ transform:rotate(360deg); }
}
@media (prefers-reduced-motion: reduce){
  .skeleton-badge{ animation:none; }
}

.persona-switcher{ display:flex; justify-content:center; gap:1.1rem; flex-wrap:wrap; margin-top:1.5rem; }
.scene-switch-btn{ padding:.3rem 0; color:rgba(215,226,234,.5); font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; border-bottom:2px solid transparent; transition: color .3s ease, border-color .3s ease, opacity .3s ease; }
.scene-switch-btn:hover{ opacity:.8; }
.scene-switch-btn.active{ color:#fff; border-bottom-color:#fff; }

.liquid-glass{
  background: rgba(255,255,255,0.01); background-blend-mode: luminosity;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.1); position:relative; overflow:hidden;
}
.liquid-glass::before{
  content:''; position:absolute; inset:0; border-radius:inherit; padding:1.4px;
  background: linear-gradient(180deg, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.15) 20%, rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%, rgba(255,255,255,0.15) 80%, rgba(255,255,255,0.45) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events:none;
}

@media (min-width:700px){
  .persona{ border-radius:50px 50px 0 0; }
  .scene{ border-radius:40px; }
}
@media (min-width:1080px){
  .persona{ border-radius:60px 60px 0 0; }
  .scene{ border-radius:60px; }
}

/* =========================================================
   7. УСЛУГИ (белая секция — единственная светлая "пауза" на сайте)
   ========================================================= */
.services{ background:var(--surface); border-radius:32px 32px 0 0; padding:4rem 1.25rem; transition:background-color .5s ease; }
.services .title-xxl{ margin-bottom:3rem; }
.cap-list{ max-width:960px; margin:0 auto; }
.cap-item{ display:flex; align-items:center; justify-content:space-between; gap:1.25rem; padding:2rem 0; border-top:1px solid rgba(var(--surface-ink-rgb),0.15); }
.cap-item:last-child{ border-bottom:1px solid rgba(var(--surface-ink-rgb),0.15); }
.cap-item__left{ display:flex; align-items:flex-start; gap:2rem; flex:1; min-width:0; }
.cap-item__num{ color:var(--surface-ink); font-weight:900; font-size:clamp(2.5rem,10vw,140px); line-height:1; flex-shrink:0; }
.cap-item__body{ display:flex; flex-direction:column; justify-content:flex-start; gap:.4rem; padding-top:.3em; }
.cap-item__icon{ flex-shrink:0; color:var(--surface-ink); display:none; align-items:center; justify-content:center; width:clamp(2.5rem,10vw,140px); height:clamp(2.5rem,10vw,140px); border-radius:20px; }
.cap-item__icon img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; display:block; filter:invert(0); transition:filter .5s ease; }
/* иконки — чёрная растровая графика на прозрачном фоне; color/currentColor
   на них не действует, поэтому в ночной теме инвертируем в белый */
[data-theme="night"] .cap-item__icon img{ filter:invert(1); }
.cap-item__name{ font-family:'Roboto',sans-serif; color:var(--surface-ink); font-weight:700; text-transform:uppercase; font-size:clamp(1rem,2.2vw,2.1rem); }
.cap-item__desc{ color:var(--surface-ink); font-weight:300; line-height:1.5; opacity:.6; font-size:clamp(.85rem,1.6vw,1.25rem); max-width:640px; }

@media (min-width:700px){
  .services{ border-radius:50px 50px 0 0; padding:6rem 2.5rem; }
  .cap-item{ gap:2.5rem; }
  .cap-item__left{ gap:2.5rem; }
  .cap-item__icon{ display:flex; }
}
@media (min-width:1080px){
  .services{ border-radius:60px 60px 0 0; padding:8rem 2.5rem; }
}

/* =========================================================
   8. ПРОЕКТЫ (стек карточек) — тёмная, выходит поверх белой "Услуг"
   ========================================================= */
.projects{ background:var(--bg); border-radius:32px 32px 0 0; margin-top:-3rem; position:relative; z-index:10; padding:4rem 1.25rem; }
.projects .title-xxl{ margin-bottom:.5rem; }
.projects .section-label{ margin-bottom:3rem; }
.stack{ max-width:960px; margin:0 auto; display:flex; flex-direction:column; gap:28px; }
.project-sticky{ position:sticky; top:6rem; height:85vh; will-change:transform; transform-origin:top center; }
.project-card{ border:2px solid var(--ice); border-radius:28px; background:var(--bg); padding:1rem; height:100%; display:flex; flex-direction:column; }
.project-card__top{ display:flex; flex-direction:column; align-items:flex-start; gap:.9rem; margin-bottom:1rem; }
.project-card__top .btn--view{ align-self:flex-end; }
.project-card__meta{ display:flex; align-items:center; gap:1rem; min-width:0; }
.project-card__num{ font-weight:900; font-size:clamp(2rem,7vw,90px); line-height:1; }
.project-card__label{ color:rgba(215,226,234,.5); font-size:.7rem; text-transform:uppercase; letter-spacing:.15em; margin-bottom:.2rem; }
.project-card__title{ font-weight:700; font-size:clamp(1rem,2.6vw,1.6rem); }
.project-card__grid{ display:flex; flex-direction:column; gap:.75rem; flex:1; min-height:0; }
.project-card__wide{ flex:1; min-height:0; border-radius:16px; }

@media (min-width:700px){
  .projects{ border-radius:50px 50px 0 0; padding:6rem 2.5rem; }
  .project-sticky{ top:8rem; }
  .project-card{ border-radius:40px; padding:1.5rem; }
  .project-card__top{ flex-direction:row; align-items:flex-start; justify-content:space-between; }
  .project-card__wide{ border-radius:24px; }
}
@media (min-width:1080px){
  .projects{ border-radius:60px 60px 0 0; padding:7rem 2.5rem; }
  .project-card{ border-radius:50px; padding:2rem; }
  .project-card__wide{ border-radius:32px; }
}

/* =========================================================
   9. КОНТАКТЫ — тёплая карточка с Telegram (светлая тема)
   ========================================================= */
.contact{
  background:var(--surface); min-height:100vh; box-sizing:border-box;
  border-radius:32px 32px 0 0; margin-top:-3rem; position:relative; z-index:10;
  display:flex; flex-direction:column; justify-content:center;
  padding:calc(var(--header-height) + 2rem) 1.25rem 3rem;
  transition:background-color .5s ease;
}
.contact .title-xxl{ margin-bottom:.5rem; }
.contact .section-label{ margin-bottom:3rem; color:rgba(var(--surface-ink-rgb),.4); }

.contact-deal{ position:relative; width:100%; max-width:360px; margin:0 auto 2rem; }

/* Мобильные: без скролл-анимации — карточка статична, показывает текст.
   По тапу на "@Versetti_Aleksei / Ищите меня в социальных сетях" карточка
   переворачивается (3D flip) и показывает фото; по тапу на фото —
   переворачивается обратно. Лёгкая пасхалка, есть только на мобильных. */
.contact-deal{ perspective:1600px; aspect-ratio:3/4; }
.contact-card--text, .contact-card--photo{
  position:absolute; inset:0; width:100%; height:100%;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  transition: transform 1.1s cubic-bezier(.65,0,.35,1);
}
.contact-card--text{ transform:rotateY(0deg); z-index:2; }
.contact-card--photo{ transform:rotateY(180deg); z-index:1; }
.contact-deal.is-flipped .contact-card--text{ transform:rotateY(-180deg); }
.contact-deal.is-flipped .contact-card--photo{ transform:rotateY(0deg); }
.contact-card--photo{ cursor:pointer; }

@media (min-width:700px){
  /* сброс мобильного флипа — на десктопе снова обычный ряд из двух карточек */
  .contact-deal{
    display:flex; flex-direction:row; align-items:stretch; gap:2rem; max-width:900px; margin:0 auto;
    padding-top:0; perspective:none; aspect-ratio:auto; will-change:auto;
  }
  .contact-card--text{ position:static; width:auto; aspect-ratio:3/4; flex:1; backface-visibility:visible; }
  .contact-card--photo{ position:static; width:auto; aspect-ratio:3/4; flex:1; backface-visibility:visible; cursor:auto; }

  /* десктоп: буквой "Т" — сперва обе карточки поднимаются стопкой строго
     вверх (внахлёст, ствол буквы), и только когда подъём завершён,
     раздвигаются по горизонтали в стороны (перекладина буквы). Уход —
     зеркально: сперва сходятся к центру (перекладина стягивается в ствол),
     затем вместе уезжают вниз. Два явных этапа переключаются из JS —
     чистый transition, поэтому не может "мигнуть" готовым кадром. */
  .contact-card--text, .contact-card--photo{ transition: transform 1s cubic-bezier(.16,1,.3,1); }
  .contact-card--text{ transform:translateY(140px) translateX(calc(50% + 1rem)); }
  .contact-card--photo{ transform:translateY(140px) translateX(calc(-50% - 1rem)); }

  /* этап 1: подъём стопкой (X остаётся смещённым — карточки ещё наложены) */
  .contact-deal.stage-risen .contact-card--text{ transform:translateY(0) translateX(calc(50% + 1rem)); }
  .contact-deal.stage-risen .contact-card--photo{ transform:translateY(0) translateX(calc(-50% - 1rem)); }

  /* этап 2: раздвижение по горизонтали в свои места */
  .contact-deal.stage-spread .contact-card--text,
  .contact-deal.stage-spread .contact-card--photo{ transform:translateY(0) translateX(0); }

  /* уход, этап 1: схождение к центру (перекладина стягивается) */
  .contact-deal.stage-leave-converge .contact-card--text{ transform:translateY(0) translateX(calc(50% + 1rem)); transition-duration:.9s; }
  .contact-deal.stage-leave-converge .contact-card--photo{ transform:translateY(0) translateX(calc(-50% - 1rem)); transition-duration:.9s; }

  /* уход, этап 2: вместе вниз, полностью скрываются */
  .contact-deal.stage-leave-descend .contact-card--text{ transform:translateY(70vh) translateX(calc(50% + 1rem)); transition:transform 1.6s cubic-bezier(.45,0,.15,1); }
  .contact-deal.stage-leave-descend .contact-card--photo{ transform:translateY(70vh) translateX(calc(-50% - 1rem)); transition:transform 1.6s cubic-bezier(.45,0,.15,1); }
}
@media (prefers-reduced-motion: reduce){
  .contact-card--text, .contact-card--photo{ transition:none !important; }
  .contact-card--text{ transform:rotateY(0deg) !important; }
  .contact-card--photo{ transform:rotateY(180deg) !important; }
  .contact-deal.is-flipped .contact-card--text{ transform:rotateY(-180deg) !important; }
  .contact-deal.is-flipped .contact-card--photo{ transform:rotateY(0deg) !important; }
}
@media (min-width:700px) and (prefers-reduced-motion: reduce){
  .contact-card--text, .contact-card--photo{ transform:translateY(0) translateX(0) !important; }
}

.contact-card{
  flex:1; text-align:center;
  background:var(--surface-card); border:1px solid rgba(var(--surface-ink-rgb),.1); border-radius:32px;
  padding:3rem 2rem; display:flex; flex-direction:column; align-items:center;
}
.contact-card--photo{ padding:0; background:var(--surface-soft); }
.contact-card--photo .slot-placeholder{
  color: rgba(var(--surface-ink-rgb),.4); border-color: rgba(var(--surface-ink-rgb),.25);
  background: repeating-linear-gradient(135deg, rgba(var(--surface-ink-rgb),0.04) 0 10px, transparent 10px 20px), var(--surface-soft);
}
.contact-card__icon{
  width:64px; height:64px; border-radius:50%; background:var(--bg); color:#fff;
  display:flex; align-items:center; justify-content:center; margin-bottom:1.2rem; flex-shrink:0;
}
.contact-card__title{ font-size:1.5rem; font-weight:700; color:var(--surface-ink); margin-bottom:.7rem; transition:color .5s ease; }
.contact-card__text{ color:rgba(var(--surface-ink-rgb),.65); font-size:.98rem; line-height:1.6; max-width:400px; margin-bottom:1.7rem; }

@media (max-width:699px){
  .contact-card--text{ padding:1.5rem 1.5rem 1.25rem; justify-content:center; }
  .contact-card--text .contact-card__icon{ width:52px; height:52px; margin-bottom:.7rem; }
  .contact-card--text .contact-card__icon svg{ width:24px; height:24px; }
  .contact-card--text .contact-card__title{ font-size:1.2rem; margin-bottom:.5rem; }
  .contact-card--text .contact-card__text{ margin-bottom:1rem; font-size:.88rem; line-height:1.45; }
  .contact-card--text .btn{ padding:.7rem 1.5rem; font-size:.72rem; }
  .contact-card--text .contact-card__flip-trigger{ margin-top:.6rem; }
}
.contact-card .btn{ background:var(--bg); color:#fff; }
.contact-card__flip-trigger{ display:flex; flex-direction:column; align-items:center; margin-top:1.1rem; background:none; border:none; padding:.3rem; cursor:pointer; }
.contact-card__handle{ color:rgba(var(--surface-ink-rgb),.55); font-size:.85rem; letter-spacing:.03em; }
.contact-card__social{ margin-top:.35rem; color:rgba(var(--surface-ink-rgb),.4); font-size:.78rem; }

.site-footer{ max-width:560px; margin:3rem auto 0; text-align:center; color:rgba(var(--surface-ink-rgb),.35); font-size:.78rem; line-height:1.8; }
.site-footer a{ color:rgba(var(--surface-ink-rgb),.6); border-bottom:1px dashed rgba(var(--surface-ink-rgb),.3); transition:color .2s ease; }
.site-footer a:hover{ color:var(--surface-ink); }

@media (min-width:700px){
  .contact{ border-radius:50px 50px 0 0; }
  .contact-card{ padding:3.5rem 3rem; }
}
@media (min-width:1080px){ .contact{ border-radius:60px 60px 0 0; } }

/* =========================================================
   10. COOKIE-БАННЕР (уведомление по 152-ФЗ «О персональных данных»)
   ========================================================= */
.cookie-banner{
  position:fixed; bottom:0; left:0; width:100%; z-index:500;
  background:rgba(10,10,10,0.97); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-top:1px solid rgba(215,226,234,0.15);
  padding:1.2rem 2rem; padding-bottom:max(1.2rem, env(safe-area-inset-bottom));
  display:flex; align-items:center; justify-content:center; gap:1.5rem; flex-wrap:wrap;
  transform:translateY(120%); transition:transform .4s ease;
  box-shadow:0 -8px 30px rgba(0,0,0,.6);
  box-sizing:border-box;
}
.cookie-banner.show{ transform:translateY(0); }
.cookie-text{ color:var(--ice); opacity:.85; font-size:.9rem; line-height:1.5; max-width:760px; margin:0; }
.cookie-text a{ color:#fff; text-decoration:none; border-bottom:1px dashed rgba(215,226,234,.5); }
.cookie-text a:hover{ border-color:var(--ice); }
.cookie-actions{ flex-shrink:0; }
.cookie-accept{
  background:#fff; color:var(--bg); font-family:'Roboto',sans-serif; font-weight:600; border:none; padding:.75rem 2rem; border-radius:999px;
  cursor:pointer; font-size:.9rem; letter-spacing:.02em; transition:.25s;
}
.cookie-accept:hover{ transform:scale(1.03); }

@media (max-width:700px){
  .cookie-banner{ padding:1rem 1.2rem; padding-bottom:max(1rem, env(safe-area-inset-bottom)); flex-direction:column; text-align:center; gap:.9rem; }
  .cookie-text{ font-size:.82rem; }
  .cookie-accept{ width:100%; padding:.75rem 1rem; }
}

/* =========================================================
   11. PREMIUM LAYER — скролл-рейл, тема, 3D-тилт, магнитные кнопки,
   свечение обводок. Ничего из этого не меняет структуру страницы.
   ========================================================= */

/* --- 11.1 Скролл-рейл: строгий дизайнерский индикатор прогресса чтения,
   слева, двигается вместе со страницей. Цвет — нейтральный серый с
   mix-blend-mode:exclusion, поэтому он одинаково читается и на светлых,
   и на тёмных секциях без ручного переключения темы. Адаптивен:
   на мобильных/планшетах — тонкая линия у самого края экрана,
   на десктопе — рейл с процентом по центру слева. --- */
.scroll-rail{
  position:fixed; left:0; top:0; height:100vh; width:3px; z-index:120;
  pointer-events:none;
}
.scroll-rail__track{ position:absolute; inset:0; background:rgba(128,128,128,.35); mix-blend-mode:exclusion; }
.scroll-rail__fill{
  position:absolute; left:0; top:0; width:100%; height:100%;
  background:rgba(128,128,128,.95); mix-blend-mode:exclusion;
  transform-origin:top; transform:scaleY(0); will-change:transform;
}
.scroll-rail__pct{ display:none; }
@media (min-width:1080px){
  .scroll-rail{
    left:2rem; top:50%; transform:translateY(-50%); height:46vh; width:auto;
    display:flex; flex-direction:column; align-items:center; gap:.9rem;
  }
  .scroll-rail__track{ position:relative; inset:auto; flex:1; width:2px; border-radius:2px; }
  .scroll-rail__fill{ border-radius:2px; }
  .scroll-rail__pct{
    display:block; font-size:10px; letter-spacing:.18em;
    color:rgba(128,128,128,.95); mix-blend-mode:exclusion;
    writing-mode:vertical-rl; text-orientation:mixed;
  }
}
@media (prefers-reduced-motion: reduce){
  .scroll-rail__fill{ transition:none; }
}

/* --- 11.2 Индикатор текущего раздела: подсветка активного пункта меню --- */
.nav__link.is-current::after{ opacity:1; }

/* --- 11.5 Шапка: сжатие при прокрутке --- */
.site-header{ transition: transform .3s ease, height .35s cubic-bezier(.16,1,.3,1), box-shadow .3s ease, background-color .5s ease, border-color .5s ease; }
.site-header.is-compact{ height:58px; box-shadow:0 4px 30px rgba(0,0,0,0.12); }
.site-header.is-compact .site-header__logo img{ height:44px; }
.site-header.is-compact .site-header__wordmark{ font-size:28px; }
.site-header__logo img{ transition:height .35s cubic-bezier(.16,1,.3,1); }
.site-header__wordmark{ transition:font-size .35s cubic-bezier(.16,1,.3,1); }
@media (max-width:700px){
  .site-header.is-compact{ height:56px; }
  .site-header.is-compact .site-header__logo img{ height:40px; }
}
@media (prefers-reduced-motion: reduce){ .site-header{ transition:transform .3s ease; } }

/* --- 11.6 Обводка-свечение (premium border sweep) на карточках --- */
.glow-border{ position:relative; isolation:isolate; }
/* .glow-border ставит position:relative по умолчанию — это ломает мобильную
   пасхалку с 3D-флипом карточек контактов, которой нужен строго
   position:absolute (обе карточки должны лежать друг на друге в одном
   месте). Составной селектор специфичнее — гарантированно возвращает
   absolute именно на мобильных, независимо от порядка правил в файле.
   На десктопе (флекс-раскладка "Т") relative от .glow-border не мешает —
   она там даже нужна, чтобы кольцо свечения позиционировалось верно. */
@media (max-width:699px){
  .contact-card--text.glow-border, .contact-card--photo.glow-border{ position:absolute; }
}
.glow-border::after{
  content:''; position:absolute; inset:0; border-radius:inherit; padding:1.5px;
  background:conic-gradient(from var(--glow-angle,0deg), transparent 0%, rgba(255,255,255,.9) 8%, transparent 18%, transparent 100%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transition:opacity .4s ease; pointer-events:none; z-index:2;
  animation:glow-spin 3.2s linear infinite; animation-play-state:paused;
}
.glow-border:hover::after{ opacity:1; animation-play-state:running; }
@property --glow-angle{ syntax:'<angle>'; inherits:false; initial-value:0deg; }
@keyframes glow-spin{ to{ --glow-angle:360deg; } }
.services .glow-border::after,
.contact-card.glow-border::after{
  background:conic-gradient(from var(--glow-angle,0deg), transparent 0%, rgba(var(--surface-ink-rgb),.85) 8%, transparent 18%, transparent 100%);
}
@media (prefers-reduced-motion: reduce){
  .glow-border::after{ animation:none !important; }
}
@media (hover:none){ .glow-border::after{ display:none; } }

/* --- 11.7 3D-тилт для иконок услуг (курсор наклоняет иконку) ---
   Важно: НЕ применяется к .project-card/.contact-card — у них transform
   уже управляется скриптами main.js (стек проектов, флип контактов),
   и inline-tilt через тот же transform их сломал бы. */
.tilt-el{ transform-style:preserve-3d; will-change:transform; }

/* --- 11.8 Магнитные кнопки --- */
.magnetic{ display:inline-block; will-change:transform; }

/* --- 11.9 Селект/выделение текста в фирменном стиле --- */
::selection{ background:rgba(12,12,12,.85); color:#fff; }
.hero--light ::selection, .services ::selection, .contact ::selection, .marquee ::selection{ background:rgba(var(--surface-ink-rgb),.85); color:var(--surface); }
:focus-visible{ outline:2px solid rgba(var(--surface-ink-rgb),.55); outline-offset:3px; border-radius:4px; }
.hero:not(.hero--light) :focus-visible, .persona :focus-visible, .projects :focus-visible{ outline-color:rgba(215,226,234,.7); }

/* --- 11.10 Параллакс-слои (используются из JS через inline transform) --- */
.parallax-el{ will-change:transform; }

/* --- 11.11 Реиспользование plausible reveal для GSAP-версии --- */
.gsap-reveal{ opacity:0; }
.no-js .gsap-reveal, .reduced-motion .gsap-reveal{ opacity:1 !important; transform:none !important; }

/* --- 11.12 Лента брендов — интерактивные плитки (лёгкий "выезд к экрану",
   как в карточках PS5/Netflix: небольшой zoom + мягкий 3D-наклон + тень) --- */
.brand-tile{
  transition: box-shadow .4s cubic-bezier(.16,1,.3,1), border-color .4s ease, filter .4s ease, background-color .5s ease;
  filter:grayscale(85%) opacity(.72);
  will-change:transform;
}
.brand-tile.is-hot{
  filter:grayscale(0%) opacity(1) brightness(1.03);
  border-color:rgba(var(--surface-ink-rgb),.4);
  box-shadow:0 16px 32px rgba(var(--surface-ink-rgb),.18);
  z-index:3;
}
@media (hover:none){ .brand-tile{ filter:none; } }
@media (prefers-reduced-motion: reduce){ .brand-tile{ transition:filter .3s ease; } }