/* ====== TOKENS (только нужное) ====== */
:root{
  /* base */
  --nav-h:70px;
  --bg:#fff; --text:#0a0a0a; --muted:#111;
  --accent:#ff9a54; --btn-bg:#111; --btn-text:#fff;

  /* layout & spacing */
  --side-gap:clamp(16px,6vw,80px);
  --pad-x:clamp(12px,3.5vw,60px);
  --card-gap:24px;
  --card-r:16px;
  --shadow:0 8px 20px rgba(0,0,0,.18);

  /* hero/cards */
  --peek:8vw;
  --card-bg:#f5f5f5;
  --card-w:360px;
  --cols:5;
  --tail:40vh;

  /* CTA overrides */
  --btn-fill:transparent; --btn-stroke:#000; --btn-text-strong:#000;

  /* why-slab (glass) */
  --c-pink:#fc3e6b; --c-orange:#fda228; --c-blue:#1daafc;
  --glass-bg:rgba(248,249,251,.55); --glass-brd:rgba(0,0,0,.06);
  --glass-shadow:0 18px 40px rgba(0,0,0,.10);
  --radius-xl:22px;
  --ring-angle:0deg;

  /* projects/latest */
  --latest-bg:#272727; --text-on-dark:#f5f5f5; --muted-on-dark:#b8bcc6;
  --title-rest-offset:10px;

  /* type */
  --font-head:"Media Sans SemiCondensed", sans-serif;
  --font-ui:system-ui, -apple-system, Inter, Roboto, sans-serif;

  /* heading scale */
  --fs-h1: clamp(55px, 9vw, 88px);
  --fs-h2: clamp(34px, 6vw, 54px);
  --fs-h3: clamp(22px, 4.6vw, 36px);
  --fs-h4: clamp(18px, 3.6vw, 28px);
  --fs-h5: clamp(16px, 3vw, 22px);
  --fs-h6: clamp(14px, 2.6vw, 18px);

  /* line-heights */
  --lh-body: 1.55;
  --lh-tight: 1.12;
  --lh-hero: 1.05;
  --lh-ui: 1.2;

  /* rhythm */
  --gap-after-default: clamp(12px, 1.6vw, 18px);
}

/* ====== WEBFONTS ====== */
@font-face{
  font-family:"Media Sans SemiCondensed";
  src:url("https://cdn.jsdelivr.net/gh/NickKuznetsov/fonts@main/mediasanssemicondensed-regular-TRIAL-BF63c75479c7708.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}

/* ====== BASE TYPE ====== */
html,body{ font-family:var(--font-ui); line-height:var(--lh-body); }
:where(h1,h2,h3,h4,h5,h6){
  font-family:var(--font-head); font-weight:700; line-height:1.1;
  letter-spacing:.01em; color:var(--text); margin:0 0 .6em;
  -webkit-font-smoothing:antialiased; font-synthesis-weight:none; font-synthesis-style:none;
}
h1{ font-size:var(--fs-h1); line-height:var(--lh-hero); }
h2{ font-size:var(--fs-h2); line-height:var(--lh-tight); }
h3{ font-size:var(--fs-h3); line-height:var(--lh-tight); }
h4{ font-size:var(--fs-h4); } h5{ font-size:var(--fs-h5); } h6{ font-size:var(--fs-h6); }

/* локальные титлы (используются в секциях) */
.hero__title,
.glass-slab__title,
.latest__cap-title{
  font-family:var(--font-head); font-weight:700; letter-spacing:.01em; line-height:inherit;
}

/* ====== TOP NAV + MOBILE SHEET ====== */
.site-nav{
  position:fixed!important; inset:0 0 auto; z-index:2000;
  height:var(--nav-h); background:var(--bg)!important; display:flex; align-items:center; justify-content:center;
  -webkit-tap-highlight-color:transparent;
}
.site-nav a{ text-decoration:none!important; }
.site-nav__inner{ width:100%; height:100%; padding:0 var(--pad-x)!important; display:flex; align-items:center; gap:24px; box-sizing:border-box; }
.site-nav__logo img{ height:32px; display:block; }
.site-nav__menu{ display:flex; align-items:center; gap:18px; margin-left:auto; }
.site-nav__link{
  display:inline-flex; align-items:center; justify-content:center;
  height:calc(var(--nav-h) - 22px); padding:0 12px;
  background:#fff!important; color:#000!important;
  font:700 clamp(10px,1.1vw,12px)/var(--lh-ui) var(--font-ui)!important;
  letter-spacing:.18em!important; text-transform:uppercase!important;
  transition:transform .25s ease, color .25s ease!important;
}
.site-nav__link:hover{ transform:translateY(-2px); color:var(--accent)!important; }
.site-nav__cta{
  --cta-grow:24px; margin-left:10px; display:inline-flex; align-items:center; justify-content:center; position:relative;
  height:42px; padding:0 18px!important; border-radius:12px!important; border:none!important;
  background:var(--btn-bg)!important; color:var(--btn-text)!important;
  font:800 12px/var(--lh-ui) var(--font-ui)!important; letter-spacing:.12em!important;
  box-shadow:0 8px 18px rgba(0,0,0,.10)!important;
  transition:padding-left .35s ease, box-shadow .35s ease, transform .35s ease!important;
}
.site-nav__cta:hover{ padding-left:calc(18px + var(--cta-grow))!important; transform:translateX(calc(var(--cta-grow)*-0.25)); box-shadow:0 12px 26px rgba(0,0,0,.14)!important; }
.site-nav__cta>span{ display:inline-block; transition:transform .35s ease!important; }
.site-nav__cta:hover>span{ transform:translateX(calc(var(--cta-grow)/-2)); }

.burger{ margin-left:auto; width:44px; height:44px; display:none; place-items:center; border:1px solid rgba(0,0,0,.08); border-radius:12px; background:#fff; cursor:pointer; }
.burger__bars{ position:relative; width:20px; height:2px; background:#000; border-radius:2px; }
.burger__bars::before,.burger__bars::after{ content:""; position:absolute; left:0; right:0; height:2px; background:#000; border-radius:2px; transition:transform .25s ease, top .25s ease; }
.burger__bars::before{ top:-6px; } .burger__bars::after{ top:6px; }
.burger.is-open .burger__bars{ background:transparent; }
.burger.is-open .burger__bars::before{ top:0; transform:rotate(45deg); }
.burger.is-open .burger__bars::after{ top:0; transform:rotate(-45deg); }

.mnav-overlay{ position:fixed; inset:var(--nav-h) 0 0 0; background:rgba(0,0,0,.35); opacity:0; pointer-events:none; transition:opacity .38s ease; z-index:1999; }
.mnav{
  position:fixed; left:0; right:0; bottom:0; height:min(calc(100dvh - var(--nav-h)),560px);
  background:#fff; border-radius:20px 20px 0 0; box-shadow:0 -16px 40px rgba(0,0,0,.16);
  transform:translateY(110%); transition:transform .38s cubic-bezier(.22,.61,.36,1);
  padding:24px clamp(16px,6vw,40px) calc(16px + env(safe-area-inset-bottom));
  padding-top:calc(18px + env(safe-area-inset-top)); display:flex; flex-direction:column; align-items:center; gap:10px; z-index:2001;
}
.mnav::before{ content:""; position:absolute; top:8px; left:50%; transform:translateX(-50%); width:44px; height:4px; border-radius:999px; background:rgba(0,0,0,.12); }
.mnav a{
  display:inline-flex; align-items:center; justify-content:center; width:100%;
  color:#000!important; font-family:var(--font-ui)!important;
  font-weight:400!important; font-size:clamp(18px,5.2vw,22px)!important; line-height:var(--lh-ui)!important; letter-spacing:.02em!important;
  padding:16px 0; text-align:center; opacity:0; transform:translateX(-24px);
  transition:opacity .32s ease, transform .32s cubic-bezier(.22,.61,.36,1);
}
.mnav .site-nav__cta{ min-width:220px; margin-top:6px; transform:none!important; font-size:clamp(14px,4.2vw,16px)!important; height:46px; }
.mnav-open .mnav-overlay{ opacity:1; pointer-events:auto; } .mnav-open .mnav{ transform:translateY(0%); }
.mnav-open:not(.mnav-leave) .mnav a{ opacity:1; transform:translateX(0); }
.mnav-leave .mnav a{ opacity:0; transform:translateX(-24px); }

/* ====== HERO + CARDS ====== */
.hero-cards{ position:relative; background:var(--bg); min-height:100vh; padding:clamp(24px,4vw,60px) 0 var(--tail); overflow-x:hidden; }
.hero{ position:relative; z-index:3; display:grid; place-items:center; min-height:clamp(420px,62vh,540px); text-align:center; padding:0 var(--side-gap); }
.hero__inner{ max-width:min(1200px,92vw); margin:100px auto 0; }
.hero__eyebrow{
  font:700 clamp(10px,1.1vw,12px)/var(--lh-ui) var(--font-ui);
  letter-spacing:.18em; text-transform:uppercase; color:#ff9a54; opacity:.9;
  margin-bottom:clamp(34px,4vw,50px);
}
.hero__title{
  color:var(--text);
  font-weight:800; letter-spacing:.01em;
  line-height:var(--lh-hero);
  font-size:var(--fs-h1);
  margin:0 0 clamp(32px, 3.5vw, 48px);
  text-wrap:balance; -webkit-font-smoothing:antialiased;
}
.hero__cta{
  position:relative; z-index:4; display:inline-flex; align-items:center; justify-content:center;
  height:54px; padding:0 24px; border-radius:12px;
  background:var(--btn-fill)!important; color:var(--btn-text-strong)!important; border:2px solid var(--btn-stroke)!important;
  font:700 16px/var(--lh-ui) var(--font-ui)!important; text-decoration:none;
  transition:all .35s ease; margin-bottom:12px; white-space:nowrap;
}
.hero__cta:hover{ padding-inline:55px; }

.cards-scroll{ position:relative; z-index:1; padding:clamp(20px,3vw,40px) var(--side-gap) 0; }
.cards-container{ display:flex; justify-content:center; align-items:flex-start; gap:var(--card-gap); padding-inline:var(--peek); will-change:transform; }
.card{
  width: calc((100vw - (var(--side-gap)*2) - (var(--peek)*2) - ((var(--cols) - 1)*var(--card-gap))) / var(--cols));
  aspect-ratio:9/16; border-radius:var(--card-r); background:var(--card-bg); box-shadow:var(--shadow);
  display:flex; align-items:center; justify-content:center; overflow:hidden; flex-shrink:0; transform:translate3d(0,0,0);
}
.card img{ width:100%; height:100%; object-fit:cover; display:block; }

@media (max-width:1024px){
  .hero__title{ font-size:clamp(45px, 9.6vw, 90px); line-height:var(--lh-hero); margin-bottom:clamp(36px,4vw,48px); }
  .hero{ min-height:clamp(420px,52vh,520px); }
  .hero__eyebrow{ margin-bottom:clamp(40px,3.6vw,56px); }
}

/* ====== WHY SLAB ====== */
.why-slab{ background:#fff; position:relative; }
.why-slab__inner{ max-width:1200px; margin-inline:auto; padding:clamp(72px,9vw,128px) var(--pad-x); position:relative; }
.glass-slab{
  position:relative; border-radius:var(--radius-xl); padding:clamp(32px,5vw,56px);
  backdrop-filter:blur(34px) saturate(1.2); -webkit-backdrop-filter:blur(34px) saturate(1.2);
  background:var(--glass-bg); border:2px solid var(--glass-brd); box-shadow:var(--glass-shadow); overflow:hidden;
}
.glass-slab::after{
  content:""; position:absolute; inset:-1px; border-radius:calc(var(--radius-xl) + 1px); padding:2px;
  background:conic-gradient(from var(--ring-angle), var(--c-pink), var(--c-orange), var(--c-blue), var(--c-pink));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; transition:opacity .25s ease; opacity:.95;
}
.glass-slab__head,.glass-slab__bullets,.glass-slab__cta{ position:relative; z-index:1; }
.glass-slab__eyebrow{ margin:0 0 12px; letter-spacing:.18em; text-transform:uppercase; color: var(--accent, #ff9a54); font:600 12px/1.2 var(--font-ui); }
.glass-slab__title{ margin:0 0 14px; font-size:var(--fs-h2);  line-height:var(--lh-tight); }
.glass-slab__lead{ margin:0 0 28px; max-width:62ch; color:#5c6068; font-size:clamp(14px,2vw,18px); font-family:var(--font-ui); }
.glass-slab__bullets{ list-style: none;
    margin: 0 !important;
    padding: 0 !important;
    margin-inline-start: 0 !important;
    padding-inline-start: 0 !important; color:var(--text); font-size:clamp(14px,2vw,16px); font-family:var(--font-ui); }
.glass-slab__bullets li{ list-style: none;
    margin: 0 0 10px !important;
    padding: 0 !important;
    text-indent: 0 !important; }
.glass-slab__cta{ margin-top:clamp(44px,7vw,72px); display:flex; }
.glass-slab__button{
  --grow:24px; position:relative; display:inline-flex; align-items:center; justify-content:center;
  height:42px; padding:0 22px; border-radius:12px; background:transparent!important; color:#0a0a0a!important; border:1px solid #0a0a0a!important;
  font:800 12px/var(--lh-ui) var(--font-ui)!important; letter-spacing:.12em; text-decoration:none; white-space:nowrap;
  transition:padding-right .35s ease, box-shadow .35s ease, transform .35s ease!important; box-sizing:border-box;
}
.glass-slab__button>span{ display:inline-block; transition:transform .35s ease!important; }
.glass-slab__button:hover{ padding-right:calc(22px + var(--grow))!important; }
.glass-slab__button:hover>span{ transform:translateX(calc(var(--grow)/2))!important; }

/* ====== PROJECTS / LATEST ====== */
.latest.latest--dark{ background:var(--latest-bg); color:var(--text-on-dark); position:relative; }
.latest__inner{ max-width:1200px; margin-inline:auto; padding:clamp(72px,9vw,108px) var(--pad-x)!important; position:relative; }

.latest__head{
  display:flex; align-items:center; justify-content:space-between;
  gap:clamp(8px, 1.2vw, 14px);
  padding-bottom: calc(var(--gap-after, var(--gap-after-default)) + 10px)!important;
  margin-bottom:0!important;
}
.latest__title{
  margin:0; font-weight:700; letter-spacing:.01em; line-height:var(--lh-tight);
  font-size:var(--fs-h2); color:var(--text-on-dark);
}
.latest__nav{ display:flex; gap:10px; align-self:center; }
.latest__btn{
  appearance:none; border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.06); color:#fff;
  width:36px; height:36px; border-radius:10px; display:grid; place-items:center; cursor:pointer; padding:0; line-height:1; outline:none;
}
.latest__btn:hover{ background:rgba(255,255,255,.12); }
.latest__btn:disabled{ opacity:.4; cursor:default; }

.latest__track{
  display:grid; grid-auto-flow:column; grid-auto-columns:min(var(--card-w), calc((100% - var(--card-gap)*2)/3));
  gap:var(--card-gap); overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; padding-bottom:8px;
  scrollbar-width:none; -ms-overflow-style:none;
}
.latest__track::-webkit-scrollbar{ display:none; }

.latest__card{ scroll-snap-align:start; border-radius:var(--card-r); overflow:hidden; background:#1f1f1f; box-shadow:var(--shadow); position:relative; }
.latest__media{ width:100%; aspect-ratio:9/16; background:#151515; overflow:hidden; position:relative; }
.latest__img{ width:100%; height:100%; object-fit:cover; display:block; filter:grayscale(100%); transition:filter .2s linear; }
.latest__card.is-active .latest__img{ filter:none; }
.latest__media::after{
  content:""; position:absolute; inset:auto 0 0 0; height:44%;
  background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 60%, rgba(0,0,0,.78) 100%); pointer-events:none;
}
.latest__cap{ position:absolute; left:16px; right:16px; bottom:0; z-index:2; display:flex; flex-direction:column; gap:6px; padding:16px 16px 34px; }
.latest__cap-title{
  margin:0; font-size:var(--fs-h3); line-height:var(--lh-tight); letter-spacing:.01em; color:#fff;
  transform:translateY(var(--title-rest-offset)); transition:transform .32s cubic-bezier(.2,.7,.2,1);
}
.latest__cap-desc{
  display:block; margin:0; font-size:13px; line-height:1.35; color:var(--muted-on-dark); font-family:var(--font-ui);
  opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity .28s ease, transform .28s ease, visibility 0s linear .28s;
}
.latest__card.is-active .latest__cap-title{ transform:none; }
.latest__card.is-active .latest__cap-desc{ opacity:1; visibility:visible; transform:translateY(0); transition:none; }
.latest__card:not(.is-active):hover .latest__img{ filter:none; }
.latest__card:not(.is-active):hover .latest__cap-title{ transform:translateY(0); }
.latest__card:not(.is-active):hover .latest__cap-desc{ opacity:1; visibility:visible; transform:translateY(0); transition:opacity .28s ease, transform .28s ease, visibility 0s; }

@media (max-width:980px){ .latest__track{ grid-auto-columns:min(var(--card-w), calc((100% - var(--card-gap))/2)); } }
@media (max-width:620px){ .latest__track{ grid-auto-columns:min(var(--card-w), 100%); } }

/* ====== MOBILE (≤820px) ====== */
@media (max-width: 820px){
  /* меню */
  .site-nav__menu{ display:none; }
  .burger{ display:inline-grid; }

  /* hero */
  .hero{ min-height:auto!important; padding-bottom:16px; margin-bottom:0!important; }
  .hero__inner{ margin-top:clamp(56px, 10vw, 88px); }
  .hero__eyebrow{ margin-top:clamp(16px, 2vw, 70px); }
  .hero__title{ margin-bottom:clamp(60px, 8vw, 80px); }
  .hero__cta{ margin-bottom:18px; }

  /* скрываем стационарную ленту карточек у героя на мобиле */
  .cards-scroll{ display:none!important; }
  .hero-cards{ padding-bottom:0!important; min-height:auto!important; }
}

/* ===== PREFERS-REDUCED-MOTION ===== */
@media (prefers-reduced-motion:reduce){
  .hero__cta, .latest__img, .latest__cap-title, .latest__cap-desc{ transition:none!important; }
}

/* ===== HERO rhythm fix ===== */
:root{ --hero-gap: clamp(34px, 4vw, 50px); }
@media (max-width:820px){ :root{ --hero-gap: clamp(60px, 8vw, 80px); } }
.hero__title h1, .hero__title h2, .hero__title h3{ margin:0!important; line-height:var(--lh-hero); font-size:var(--fs-h1); }
.hero__eyebrow{ margin-bottom:var(--hero-gap)!important; }
.hero__title{ margin-bottom:var(--hero-gap)!important; }
.hero__cta{ margin-top:0!important; }

/* ===== Eyebrow & Menu tuning ===== */
:root{
  --eyebrow-weight:600; --eyebrow-track:.20em;
  --menu-weight:600; --menu-track:.20em;
  --menu-cta-weight:700; --menu-cta-track:.16em;
  --mnav-track:.10em;
}
.hero__eyebrow{ font-weight:var(--eyebrow-weight)!important; letter-spacing:var(--eyebrow-track)!important; text-transform:uppercase!important; }
.site-nav__link{ font-weight:var(--menu-weight)!important; letter-spacing:var(--menu-track)!important; text-transform:uppercase!important; }
.site-nav__cta{ font-weight:var(--menu-cta-weight)!important; letter-spacing:var(--menu-cta-track)!important; }
.mnav a{ letter-spacing:var(--mnav-track)!important; text-transform:none!important; }