/* ============================================================
   adeldesignn — визуальный слой в духе Clarvos
   Цвета, типографика и кривые анимаций сняты с clarvos.com
   ============================================================ */

:root{
  /* --- Палитра: синий #3B5ACC с референса, светлая холодная база --- */
  --cream-50:#FFFFFF;
  --cream-100:#F4F5FA;   /* фон страницы */
  --cream-200:#ECEEF7;
  --cream-300:#E1E5F2;
  --cream-400:#CBD2E6;

  --ink-900:#14172B;
  --ink-800:#1B1F36;
  --ink-700:#2A2F4A;
  --ink-600:#3C4262;
  --gray-500:#565E7A;
  --gray-400:#9AA1B8;
  --white:#FFFFFF;

  /* акцент (имена токенов оставлены прежними, чтобы не переписывать разметку) */
  --yellow-500:#3B5ACC;
  --yellow-400:#5A74D6;
  --yellow-600:#2E49B0;
  --yellow-100:#E7ECFB;

  --brand:#3B5ACC;
  --brand-dark:#2E49B0;
  --brand-tint:#E7ECFB;
  --on-brand:#FFFFFF;

  /* мягкий лайм с референса — вторичные чипы */
  --mint-400:#CBEFA8;
  --mint-300:#DFF6C8;
  --mint-100:#EFFBE4;

  --peri-400:#C9D4F6;
  --peri-300:#E7ECFB;
  --peri-100:#F1F4FD;
  --pink-300:#DFF6C8;
  --pink-100:#EFFBE4;

  /* --- Шрифты --- */
  --font-display:"Manrope","Onest",system-ui,sans-serif;
  --font-text:"Inter","Inter Tight",system-ui,sans-serif;

  /* --- Типографическая шкала (Clarvos: 88 / 64 / 40 / 32 / 24 / 20 / 16) --- */
  --display-1-size:clamp(40px,6.1vw,88px);
  --display-2-size:clamp(32px,4.4vw,64px);
  --display-3-size:clamp(28px,3.3vw,48px);
  --heading-1-size:clamp(24px,2.8vw,40px);
  --heading-2-size:clamp(20px,2.2vw,32px);
  --heading-3-size:clamp(18px,1.7vw,24px);
  --body-lg-size:clamp(18px,1.65vw,24px);
  --body-md-size:clamp(16px,1.4vw,20px);
  --body-sm-size:16px;
  --body-xs-size:14px;
  --body-2xs-size:12px;

  /* --- Радиусы: три вместо шести --- */
  --radius-pill:999px;
  --radius-sm:10px;
  --radius-md:16px;
  --radius-lg:24px;
  --radius-xl:24px;
  --radius-2xl:40px;
  --radius-3xl:40px;

  /* --- Тени: две вместо пяти --- */
  --shadow-none:none;
  --shadow-xs:none;
  --shadow-sm:0 1px 2px rgba(28,27,31,.04);
  --shadow-md:0 12px 32px rgba(28,27,31,.07);
  --shadow-lg:0 24px 60px rgba(28,27,31,.10);
  --shadow-nav:0 2px 24px rgba(28,27,31,.06);
  --shadow-sticker:0 24px 60px rgba(28,27,31,.10);

  /* --- Кривые Clarvos --- */
  --ease-expo:cubic-bezier(.76,0,.24,1);      /* кнопки: вход */
  --ease-out-expo:cubic-bezier(.16,1,.3,1);   /* кнопки: выход */
  --ease-power3:cubic-bezier(.165,.84,.44,1); /* появление текста */
  --ease-bubble:cubic-bezier(.625,.05,0,1);   /* большая CTA */
  --ease-nav:cubic-bezier(.215,.61,.355,1);
}

body{ font-family:var(--font-text); letter-spacing:-0.01em }

/* Дисплейный шрифт чуть плотнее — ближе к PP Frama */
h1,h2,h3,[data-split]{ letter-spacing:-0.03em }

/* ============================================================
   КНОПКИ
   ============================================================ */

.btn{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  line-height:1;
  transition:color .25s cubic-bezier(.77,0,.175,1),
             border-color .25s cubic-bezier(.77,0,.175,1);
}
.btn::before{
  content:"";
  position:absolute;
  inset:0;
  height:200%;
  z-index:-1;
  background:linear-gradient(to bottom,
             transparent 0, transparent 50%,
             var(--btn-slide,var(--ink-900)) 50%, var(--btn-slide,var(--ink-900)) 100%);
  transform:translateY(0);
  transition:transform .6s var(--ease-expo);
}
.btn:hover::before{ transform:translateY(-50%) }
.btn:not(:hover)::before{ transition:transform .5s var(--ease-out-expo) }

/* синяя → тёмная, текст всегда белый */
.btn--brand{ --btn-slide:var(--ink-900); color:var(--on-brand) !important }
.btn--brand:hover{ color:var(--white) !important }

/* прозрачная на тёмном → белая */
.btn--ghost{ --btn-slide:var(--white) }
.btn--ghost:hover{ color:var(--ink-900) !important; border-color:var(--white) !important }

/* белая на тёмном → синяя */
.btn--light{ --btn-slide:var(--brand) }
.btn--light:hover{ color:var(--white) !important }

/* светлая на кремовом → чёрная */
.btn--dark{ --btn-slide:var(--ink-900) }
.btn--dark:hover{ color:var(--white) !important }

/* ============================================================
   БОЛЬШАЯ CTA — bubble arrow (по мотивам Clarvos)
   ============================================================ */

.bubble{
  position:relative;
  display:flex;
  align-items:center;
  gap:.8em;
  width:100%;
  padding:.9em;
  padding-left:1.6em;
  border-radius:var(--radius-pill);
  background:var(--ink-900);
  color:var(--white);
  font-family:var(--font-text);
  font-size:var(--body-md-size);
  font-weight:500;
  line-height:1;
  overflow:hidden;
  transition:background-color .735s var(--ease-bubble), color .735s var(--ease-bubble);
}
.bubble__content{ flex:1; min-width:0; overflow:hidden }
.bubble__inner{
  display:grid;
  overflow:hidden;
  height:1.35em;
  transform:translateX(0) rotate(.001deg);
  transition:transform .735s var(--ease-bubble);
}
.bubble__text{
  grid-area:1/1;
  display:block;
  line-height:1.35;
  white-space:nowrap;
  transform:translateY(0) rotate(.001deg);
  transition:transform .735s var(--ease-bubble);
}
.bubble__text + .bubble__text{ transform:translateY(100%) rotate(.001deg) }
.bubble__arrow{
  flex:none;
  width:2.6em;
  height:2.6em;
  display:grid;
  place-items:center;
  border-radius:var(--radius-pill);
  background:var(--yellow-500);
  color:var(--ink-900);
  transform:scale(0) rotate(.001deg);
  transform-origin:left center;
  transition:transform .735s var(--ease-bubble), background-color .735s var(--ease-bubble), color .735s var(--ease-bubble);
}
.bubble__arrow svg{ width:46%; height:46%; transition:transform .735s var(--ease-bubble) }
.bubble__arrow--dup{
  position:absolute;
  right:.9em;
  top:50%;
  margin-top:-1.3em;
  transform:scale(1) rotate(.001deg);
  transform-origin:right center;
}

@media (hover:hover) and (pointer:fine){
  .bubble:hover{ background-color:var(--yellow-500); color:var(--ink-900) }
  .bubble:hover .bubble__inner{ transform:translateX(.5em) rotate(.001deg) }
  .bubble:hover .bubble__text{ transform:translateY(-100%) rotate(.001deg) }
  .bubble:hover .bubble__text + .bubble__text{ transform:translateY(0) rotate(.001deg) }
  .bubble:hover .bubble__arrow{ transform:scale(1) rotate(.001deg); background:var(--ink-900); color:var(--yellow-500) }
  .bubble:hover .bubble__arrow svg{ transform:rotate(-45deg) }
  .bubble:hover .bubble__arrow--dup{ transform:scale(0) rotate(.001deg) }
}


/* вариант для жёлтой секции: ховер уходит в белый, чтобы кнопка не растворялась */
@media (hover:hover) and (pointer:fine){
  .bubble--light:hover{ background-color:var(--white); color:var(--ink-900) }
  .bubble--light:hover .bubble__arrow{ background:var(--ink-900); color:var(--white) }
}
.bubble--light .bubble__arrow{ background:var(--yellow-500); color:var(--ink-900) }

/* без ховера (тач) — текст и стрелка видны сразу */
@media (hover:none){
  .bubble__inner{ transform:none }
  .bubble__arrow{ transform:scale(1) }
  .bubble__arrow--dup{ display:none }
}

/* ============================================================
   ПОЯВЛЕНИЕ ТЕКСТА И БЛОКОВ
   ============================================================ */

/* слово в маске */
.ad-w{ display:inline-block; overflow:hidden; vertical-align:bottom; padding-bottom:.12em; margin-bottom:-.12em }
.ad-w > i{
  display:inline-block;
  font-style:inherit;
  transform:translateY(115%);
  transition:transform 1s var(--ease-power3);
  transition-delay:calc(var(--i,0) * .012s + .12s);
}
[data-split].is-in .ad-w > i{ transform:translateY(0) }

/* блочное появление со стаггером (аналог [fade-in]) */
/* прячем только когда скрипт жив — иначе без JS текст пропадёт */
html.ad-js [data-fade] > *{
  opacity:0;
  transform:translateY(1.5rem);
  transition:opacity .8s var(--ease-power3), transform .8s var(--ease-power3);
}
html.ad-js [data-fade].is-in > *{ opacity:1; transform:none }
html.ad-js [data-fade].is-in > *:nth-child(2){ transition-delay:.05s }
html.ad-js [data-fade].is-in > *:nth-child(3){ transition-delay:.10s }
html.ad-js [data-fade].is-in > *:nth-child(4){ transition-delay:.15s }
html.ad-js [data-fade].is-in > *:nth-child(5){ transition-delay:.20s }
html.ad-js [data-fade].is-in > *:nth-child(6){ transition-delay:.25s }
html.ad-js [data-fade].is-in > *:nth-child(n+7){ transition-delay:.30s }

/* параллакс обложек кейсов */
[data-parallax]{ height:122% !important; will-change:transform }

/* навигация прячется при скролле вниз */
.ad-nav{ transition:transform .4s var(--ease-nav) }
.ad-nav.is-hidden{ transform:translateY(-115%) }

/* якоря не уезжают под меню */
html{ scroll-padding-top:104px }

@media (prefers-reduced-motion:reduce){
  .ad-w > i{ transform:none !important; transition:none !important }
  html.ad-js [data-fade] > *{ opacity:1 !important; transform:none !important; transition:none !important }
  [data-parallax]{ height:100% !important; transform:none !important }
  .ad-nav.is-hidden{ transform:none }
}

/* ============================================================
   ПЕРВЫЙ ЭКРАН
   ============================================================ */

.hero{
  position:relative;
  max-width:var(--page-max);
  margin:0 auto;
  min-height:min(88vh,880px);
  background:var(--brand);
  border-radius:var(--radius-2xl);
  overflow:hidden;
  isolation:isolate;
}

/* буквы живут на всей плоскости, позади текста */
.hero .letters{
  position:absolute; inset:0; z-index:1;
  overflow:hidden;
  cursor:grab;
  /* на телефоне палец должен прокручивать страницу, а не таскать буквы */
  touch-action:manipulation;
}
@media (hover:none),(pointer:coarse){
  .hero .letters{ cursor:default }
}
.hero .letters.is-grabbing{ cursor:grabbing }
.hero .letters > img{
  position:absolute;
  top:0; left:0;
  height:clamp(114px,18vw,256px);
  width:auto;
  pointer-events:none;
  user-select:none;
  -webkit-user-drag:none;
  will-change:transform;
  filter:drop-shadow(0 14px 26px rgba(14,22,64,.30));
}

/* мягкая подложка, чтобы текст читался поверх букв */
.hero__scrim{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:
    radial-gradient(88% 62% at 0% 100%, rgba(59,90,204,.95) 0%, rgba(59,90,204,.78) 38%, rgba(59,90,204,0) 74%),
    linear-gradient(180deg, rgba(59,90,204,.5) 0%, rgba(59,90,204,0) 20%);
}

.hero__content{
  position:relative;
  z-index:3;
  min-height:inherit;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:0;
  padding:clamp(74px,7vw,92px) clamp(22px,3.4vw,52px) clamp(28px,3.4vw,52px);
  pointer-events:none;
}
.hero__content a,
.hero__content .hero__chip{ pointer-events:auto }

.hero__top{ display:none }
.hero__wordmark{
  font-family:"Archivo","Archivo Black",var(--font-display),sans-serif;
  font-weight:900;
  font-stretch:112%;
  font-size:clamp(22px,2.7vw,38px);
  line-height:1;
  letter-spacing:-.03em;
  color:var(--white);
}
.hero__hint{
  position:absolute;
  z-index:3;
  right:clamp(22px,3.4vw,52px);
  bottom:clamp(28px,3.4vw,52px);
  font-size:var(--body-xs-size);
  color:rgba(255,255,255,.66);
  pointer-events:none;
  display:flex; align-items:center; gap:9px;
}
.hero__hint::before{
  content:"";
  width:22px; height:22px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.45);
  background:radial-gradient(circle at 50% 50%, rgba(255,255,255,.7) 0 2px, transparent 3px);
}
@media (max-width:760px){ .hero__hint{ display:none } }

.hero__year{ font-size:var(--body-xs-size); letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.72) }

.hero__bottom{ display:grid }
.hero__col{ max-width:none }

.hero__chips{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:clamp(20px,2vw,30px); max-width:min(100%,820px) }
.hero__chip{
  border:1px solid rgba(255,255,255,.34);
  color:rgba(255,255,255,.92);
  border-radius:var(--radius-pill);
  padding:8px 15px;
  font-size:var(--body-xs-size);
  line-height:1;
  white-space:nowrap;
  backdrop-filter:blur(6px);
  transition:border-color .3s var(--ease-power3), background-color .3s var(--ease-power3), color .3s var(--ease-power3);
}
.hero__chip:hover{ border-color:var(--white); background:var(--white); color:var(--brand) }

.hero h1{
  margin:0;
  font-family:var(--font-display);
  font-size:clamp(42px,7.4vw,108px);
  line-height:.94;
  letter-spacing:-.04em;
  font-weight:600;
  color:var(--white);
  text-wrap:balance;
  max-width:13ch;
}

.hero__actions{ display:flex; flex-wrap:wrap; align-items:center; gap:clamp(14px,1.6vw,22px); margin-top:clamp(26px,2.8vw,40px) }
.hero__cta{
  display:inline-flex;
  align-items:center;
  gap:14px;
  padding:7px 7px 7px 24px;
  border-radius:var(--radius-pill);
  background:var(--white);
  color:var(--ink-900);
  font-size:var(--body-sm-size);
  font-weight:500;
  line-height:1;
  transition:background-color .45s var(--ease-expo), color .45s var(--ease-expo);
}
.hero__cta i{
  display:grid;
  place-items:center;
  width:2.5em; height:2.5em;
  border-radius:var(--radius-pill);
  background:var(--ink-900);
  color:var(--white);
  transition:transform .5s var(--ease-expo), background-color .45s var(--ease-expo), color .45s var(--ease-expo);
}
.hero__cta i svg{ width:44%; height:44% }
.hero__cta:hover{ background:var(--ink-900); color:var(--white) }
.hero__cta:hover i{ transform:rotate(45deg); background:var(--white); color:var(--ink-900) }
.hero__link{
  font-size:var(--body-sm-size);
  color:rgba(255,255,255,.9);
  border-bottom:1px solid rgba(255,255,255,.45);
  padding-bottom:2px;
  transition:color .3s var(--ease-power3), border-color .3s var(--ease-power3);
}
.hero__link:hover{ color:var(--white); border-color:var(--white) }

@media (max-width:760px){
  .hero{ min-height:min(92vh,760px) }
  .hero h1{ max-width:none }
  .hero__chips{ max-width:none }
}

/* ============================================================
   ВЕЕР КЕЙСОВ
   ============================================================ */

.deck{ position:relative; margin-top:clamp(28px,3vw,44px) }
.deck__stage{ overflow:visible }
.deck__stage:focus{ outline:none }
.deck__stage:focus-visible{ outline:2px solid var(--brand); outline-offset:10px; border-radius:20px }
.deck__nav{ display:flex; justify-content:center; align-items:center; gap:14px; margin-top:clamp(24px,3vw,40px) }
.deck__arrow{
  width:46px; height:46px;
  display:grid; place-items:center;
  border-radius:var(--radius-pill);
  border:1px solid var(--cream-400);
  background:transparent;
  color:var(--ink-800);
  cursor:pointer;
  transition:background-color .35s var(--ease-expo), color .35s var(--ease-expo), border-color .35s var(--ease-expo);
}
.deck__arrow:hover{ background:var(--brand); border-color:var(--brand); color:var(--white) }
.deck__arrow svg{ width:17px; height:17px }
.deck__caption{
  min-width:12ch;
  text-align:center;
  font-family:var(--font-display);
  font-size:var(--heading-2-size);
  font-weight:600;
  letter-spacing:-.02em;
  color:var(--ink-900);
}
.deck__stage{
  position:relative;
  height:clamp(330px,40vw,560px);
  touch-action:pan-y;
  cursor:grab;
}
.deck__stage.is-dragging{ cursor:grabbing }
.deck__card{
  position:absolute;
  top:0; left:50%;
  width:clamp(210px,25vw,390px);
  aspect-ratio:3/4;
  margin-left:calc(clamp(210px,25vw,390px) / -2);
  border-radius:clamp(14px,1.6vw,24px);
  background:var(--cream-200);
  box-shadow:0 18px 40px rgba(20,23,43,.16), 0 2px 6px rgba(20,23,43,.10);
  transform-origin:50% 100%;
  will-change:transform;
  transition:box-shadow .4s var(--ease-power3), opacity .5s var(--ease-power3);
  -webkit-user-select:none; user-select:none;
}
.deck__shot{
  position:absolute;
  inset:0;
  border-radius:inherit;
  overflow:hidden;
}
.deck__card img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  pointer-events:none;
  -webkit-user-drag:none;
}
.deck__card.is-up{ box-shadow:0 34px 70px rgba(20,23,43,.26), 0 3px 10px rgba(20,23,43,.12) }

/* колода логотипов — каталог: только листаем, кейс не открывается */
.deck--logos .deck__card{ cursor:default }
.deck--logos .deck__card img{ object-fit:contain; background:var(--cream-100) }

.deck__bubble{
  position:absolute;
  left:50%;
  top:-14px;
  transform:translate(-50%,6px) scale(.92);
  background:var(--brand);
  color:var(--white);
  border-radius:var(--radius-pill);
  padding:7px 14px;
  font-size:var(--body-xs-size);
  font-weight:500;
  line-height:1;
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
  transition:opacity .3s var(--ease-power3), transform .4s var(--ease-power3);
  box-shadow:0 6px 18px rgba(59,90,204,.35);
}
.deck__bubble::after{
  content:"";
  position:absolute;
  left:16px; bottom:-4px;
  width:9px; height:9px;
  background:var(--brand);
  border-radius:0 0 3px 0;
  transform:rotate(45deg);
}
.deck__card.is-up .deck__bubble{ opacity:1; transform:translate(-50%,-2px) scale(1) }

.deck__hint{
  margin-top:clamp(12px,1.4vw,18px);
  text-align:center;
  font-size:var(--body-xs-size);
  color:var(--gray-500);
}
.deck__dots{ display:flex; justify-content:center; gap:6px; margin-top:14px }
.deck__dot{ width:5px; height:5px; border-radius:50%; background:var(--cream-400); transition:background-color .3s, transform .3s }
.deck__dot.is-on{ background:var(--brand); transform:scale(1.5) }

@media (prefers-reduced-motion:reduce){
  .deck__card{ transition:none }
}

/* ============================================================
   КАРТОЧКА КЕЙСА — светлая
   ============================================================ */

.case{
  position:fixed; inset:0; z-index:1000;
  background:var(--cream-100);
  overflow-y:auto;
  overscroll-behavior:contain;
}
.case__inner{
  max-width:1000px;
  margin:0 auto;
  padding:clamp(80px,9vw,120px) clamp(16px,3vw,32px) clamp(60px,7vw,96px);
}
.case__head{ text-align:center; display:grid; justify-items:center; gap:clamp(14px,1.6vw,22px) }
.case__tag{
  background:var(--brand-tint);
  color:var(--brand-dark);
  border-radius:var(--radius-pill);
  padding:7px 16px;
  font-size:var(--body-xs-size);
  font-weight:500;
  line-height:1;
}
.case__title{
  margin:0;
  font-family:var(--font-display);
  font-size:clamp(36px,5.6vw,76px);
  line-height:1;
  letter-spacing:-.035em;
  font-weight:600;
  color:var(--ink-900);
}
.case__lead{
  margin:0;
  max-width:52ch;
  font-size:var(--body-md-size);
  line-height:1.5;
  color:var(--gray-500);
  text-wrap:pretty;
}
.case__meta{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:clamp(12px,1.4vw,20px);
  margin:clamp(36px,4vw,60px) 0 clamp(28px,3vw,44px);
}
.case__panel{
  background:var(--white);
  border-radius:var(--radius-lg);
  padding:clamp(20px,2.2vw,30px);
  display:grid;
  gap:10px;
  align-content:start;
}
.case__panel > span{ font-size:var(--body-xs-size); letter-spacing:.06em; text-transform:uppercase; color:var(--gray-500) }
.case__panel p{ margin:0; font-size:var(--body-sm-size); line-height:1.55; color:var(--ink-800) }
.case__panel.is-brand{ background:var(--brand) }
.case__panel.is-brand > span{ color:rgba(255,255,255,.8) }
.case__panel.is-brand p{ color:var(--white) }

.case__deckwrap{
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:var(--cream-200);
  font-size:0; line-height:0;
}
.case__close{
  position:fixed;
  z-index:3;
  top:clamp(16px,2vw,26px);
  right:clamp(16px,2vw,26px);
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:var(--ink-900);
  color:var(--white);
  border:0;
  border-radius:var(--radius-pill);
  padding:12px 20px;
  font-family:var(--font-text);
  font-size:var(--body-xs-size);
  cursor:pointer;
  transition:background-color .35s var(--ease-expo);
}
.case__close:hover{ background:var(--brand) }
.case__foot{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:clamp(28px,3vw,44px) }

/* меню на телефоне: ссылки прячем, остаётся имя и кнопка */
@media (max-width:760px){
  .ad-nav{ padding:11px 12px 11px 18px !important; gap:14px !important; max-width:calc(100% - 24px) !important }
  .ad-nav ul{ display:none !important }
}

/* ============================================================
   МОБИЛЬНАЯ ВЕРСИЯ
   ============================================================ */

@media (max-width:760px){
  /* вертикальный ритм: на телефоне 112px между секциями — это пустой экран */
  :root{
    --space-28:60px;
    --space-20:44px;
    --space-16:36px;
    --space-12:28px;
    --page-gutter:20px;
  }

  /* первый экран: подложка плотнее — текст идёт поверх крупных букв */
  .hero__scrim{
    background:
      radial-gradient(160% 58% at 0% 100%, rgba(59,90,204,.97) 0%, rgba(59,90,204,.9) 40%, rgba(59,90,204,0) 84%),
      linear-gradient(180deg, rgba(59,90,204,.62) 0%, rgba(59,90,204,0) 16%);
  }
  .hero__content{ padding:clamp(66px,17vw,84px) 20px 26px }
  .hero__chip{ padding:11px 16px }          /* палец, а не мышь */
  .hero__cta{ padding:9px 9px 9px 22px }
  .hero__link{ padding:10px 0 }

  /* карусель: сцена по высоте карточки, без пустоты снизу */
  .deck{ margin-top:22px }
  .deck__stage{ height:clamp(300px,84vw,370px) }
  .deck__arrow{ width:52px; height:52px }
  .deck__caption{ font-size:20px }
  .deck__nav{ margin-top:18px }

  /* большая CTA не должна вылезать за скруглённый блок */
  .bubble{ max-width:100% !important; padding-left:1.1em; font-size:16px }
  .bubble__arrow{ width:2.4em; height:2.4em }

  /* карточка кейса */
  .case__inner{ padding:84px 18px 56px }
  .case__close{ top:14px; right:14px; padding:11px 16px }
  .case__meta{ margin:28px 0 22px }
  .case__panel{ padding:20px }
}

/* совсем узкие экраны */
@media (max-width:380px){
  .hero h1{ font-size:38px }
  .deck__card{ width:clamp(170px,52vw,210px); margin-left:calc(clamp(170px,52vw,210px) / -2) }
  .deck__stage{ height:78vw }
}

/* тач: убираем ховер-эффекты, которые залипают после тапа */
@media (hover:none){
  .deck__card.is-up{ box-shadow:0 22px 46px rgba(20,23,43,.20), 0 2px 8px rgba(20,23,43,.10) }
  .hero__chip:hover{ border-color:rgba(255,255,255,.34); background:transparent; color:rgba(255,255,255,.92) }
}

/* меню на телефоне: пальцевые размеры */
@media (max-width:760px){
  .ad-nav{ padding:13px 13px 13px 20px !important }
  .ad-nav a[href^="#top"]{ padding:6px 0 }
  .ad-nav .btn{ padding:13px 20px !important }
}

/* ============================================================
   «Обо мне» — сборка фрагментов + маркерная подсветка
   ============================================================ */

.about{
  overflow:hidden;
  position:relative;
  background:var(--brand);
  background-image:
    radial-gradient(120% 90% at 8% 0%, rgba(255,255,255,.16), rgba(255,255,255,0) 58%),
    radial-gradient(90% 120% at 100% 100%, rgba(20,23,43,.24), rgba(20,23,43,0) 60%);
  box-shadow:var(--shadow-lg);
}
.about__ch{
  display:inline-block;
  will-change:transform;
  transform-origin:50% 60%;
}
#about h2{ cursor:default }

html.ad-js .about__frag{
  opacity:0;
  transform:translate(var(--fx,0), var(--fy,26px)) rotate(var(--fr,0deg));
  transition:
    transform 1.05s cubic-bezier(.16,1,.3,1) var(--fd,0s),
    opacity .62s cubic-bezier(.165,.84,.44,1) var(--fd,0s);
  will-change:transform,opacity;
}
html.ad-js .about__frag--1{ --fx:-34px; --fy:34px; --fr:-2deg;   --fd:.10s }
html.ad-js .about__frag--2{ --fx:34px;  --fy:26px; --fr:1.7deg;  --fd:.24s }
html.ad-js .about__frag--3{ --fx:18px;  --fy:46px; --fr:-1.2deg; --fd:.38s }

html.ad-js #about.is-in .about__frag{ opacity:1; transform:none }

.about__hl{
  background-image:linear-gradient(var(--mint-300), var(--mint-300));
  background-repeat:no-repeat;
  background-position:0 .12em;
  background-size:0% 1.04em;
  border-radius:3px;
  padding:0 .12em;
  margin:0 -.12em;
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
  transition:background-size .8s cubic-bezier(.76,0,.24,1) 1.15s, color .25s linear 1.45s;
}
html.ad-js #about.is-in .about__hl{ background-size:100% 1.04em; color:var(--ink-900) }

@media (prefers-reduced-motion:reduce){
  html.ad-js .about__frag{ opacity:1 !important; transform:none !important; transition:none !important }
  .about__hl{ background-size:100% 1.04em !important; color:var(--ink-900) !important; transition:none !important }
}

/* ============================================================
   Логотип в первом экране
   ============================================================ */
.nav__brand{ display:flex; align-items:center; flex:none }
.nav__brand img{ display:block; height:20px; width:auto }
@media (max-width:760px){
  .nav__brand img{ height:18px }
}

.foot__logo{ max-width:100% }
.foot__logo img{ display:block; width:100%; height:auto }

/* ============================================================
   Финальная плашка стала чернильной — кнопка на ней синяя
   ============================================================ */
.bubble--light{ background:var(--brand); color:var(--white) }
.bubble--light .bubble__arrow{ background:var(--white); color:var(--brand) }
@media (hover:hover) and (pointer:fine){
  .bubble--light:hover{ background-color:var(--white); color:var(--ink-900) }
  .bubble--light:hover .bubble__arrow{ background:var(--brand); color:var(--white) }
}