/* ============================================================
   proivan.ru — личный сайт Ивана Мартьянова.
   Палитра: спокойные нейтрали + electric blue + cyan.
   Принцип: 80% интерфейса спокойное, 20% — акцент.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&family=Inter:wght@400;500;600;700&family=Caveat:wght@500;600;700&display=swap');

:root{
  /* нейтрали */
  --ink:#1E2430;
  --ink-soft:#2A3140;
  --muted:#697386;
  --muted-2:#9098A7;

  --paper:#F6F7FB;
  --paper-2:#EEF0F6;
  --paper-3:#E5E8F0;
  --line:#E2E5ED;
  --line-strong:#CCD1DC;

  /* brand — electric blue (основной акцент) */
  --brand:#315EFB;
  --brand-600:#1F47D9;
  --brand-700:#1736B0;
  --brand-100:#E2E8FF;
  --brand-50:#EEF2FF;

  /* cyan — вторичный акцент (для градиентов и редких подсветок) */
  --cyan:#37C6D0;
  --cyan-600:#2BA4AD;
  --cyan-100:#DCF6F8;

  /* тёмные секции */
  --dark:#0F1422;
  --dark-2:#1A1F30;

  /* CTA-градиент: brand → cyan */
  --grad-brand:linear-gradient(135deg, #315EFB 0%, #4B86E8 50%, #37C6D0 100%);
  --grad-soft:linear-gradient(180deg, rgba(49,94,251,.04) 0%, rgba(55,198,208,.03) 100%);

  /* радиусы — система */
  --r-btn:14px;
  --r-sm:18px;
  --r-card:20px;
  --r-photo:28px;
  --r-pill:999px;

  /* aliases для совместимости */
  --radius:var(--r-btn);
  --radius-lg:var(--r-card);

  /* тени — ambient soft (Stripe-style) */
  --shadow-xs:0 1px 2px rgba(16,24,40,.04);
  --shadow-sm:0 1px 2px rgba(16,24,40,.04), 0 8px 24px rgba(16,24,40,.06);
  --shadow-md:0 2px 4px rgba(16,24,40,.05), 0 16px 36px rgba(16,24,40,.10);
  --shadow-lg:0 4px 8px rgba(16,24,40,.06), 0 24px 60px rgba(16,24,40,.14);
  --shadow-glow:0 0 80px -20px rgba(49,94,251,.45);

  /* easing */
  --ease-out:cubic-bezier(.2,.8,.2,1);
  --ease-in-out:cubic-bezier(.4,.0,.2,1);

  /* контейнер */
  --gutter:clamp(20px, 4vw, 36px);
}

/* ---------- dark theme ---------- */
[data-theme="dark"]{
  --ink:#ECEFF7;
  --ink-soft:#C6CCDA;
  --muted:#8C92A4;
  --muted-2:#5E6478;

  --paper:#0B0F1A;
  --paper-2:#161B2A;
  --paper-3:#1F2538;
  --line:#262C40;
  --line-strong:#363D55;

  --brand:#5B82FF;
  --brand-600:#3D67F0;
  --brand-700:#2952D8;
  --brand-100:#1C2549;
  --brand-50:#141B33;

  --cyan:#37C6D0;
  --cyan-600:#2BA4AD;
  --cyan-100:#16323A;

  --dark:#070A14;
  --dark-2:#0E1322;

  --shadow-xs:0 1px 2px rgba(0,0,0,.4);
  --shadow-sm:0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.4);
  --shadow-md:0 2px 4px rgba(0,0,0,.35), 0 16px 36px rgba(0,0,0,.45);
  --shadow-lg:0 4px 8px rgba(0,0,0,.4), 0 24px 60px rgba(0,0,0,.55);
  --shadow-glow:0 0 80px -20px rgba(91,130,255,.55);
}
[data-theme="dark"] body{background:var(--paper); color:var(--ink)}
[data-theme="dark"] .topbar{background:transparent; border:none}
[data-theme="dark"] .topbar-wrap{
  background:rgba(15,20,34,.78);
  backdrop-filter:blur(24px) saturate(160%);
  -webkit-backdrop-filter:blur(24px) saturate(160%);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:
    0 2px 6px rgba(0,0,0,.20),
    0 16px 40px -8px rgba(0,0,0,.32),
    0 40px 80px -24px rgba(0,0,0,.40);
}
[data-theme="dark"] .topbar-wrap:hover{
  box-shadow:
    0 2px 6px rgba(0,0,0,.24),
    0 20px 48px -8px rgba(0,0,0,.38),
    0 48px 96px -24px rgba(0,0,0,.50);
}
[data-theme="dark"] .brand-avatar{border-color:rgba(255,255,255,.08)}
[data-theme="dark"] .brand-name{color:var(--ink)}
[data-theme="dark"] .topnav a{color:var(--muted)}
[data-theme="dark"] .topnav a:hover{color:var(--ink)}
[data-theme="dark"] .topnav a.is-active{color:var(--ink)}
[data-theme="dark"] .menu-toggle{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.10);
}
[data-theme="dark"] .menu-toggle:hover{
  background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.18);
}
[data-theme="dark"] .menu-toggle span{background:var(--ink)}
[data-theme="dark"] .theme-toggle{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.10);
  color:var(--ink);
}
[data-theme="dark"] .theme-toggle:hover{
  background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.18);
}
[data-theme="dark"] .theme-toggle .ic{color:var(--ink)}
/* теги в блоге */
[data-theme="dark"] .tag-startup    {background:#3B1A28; color:#FF8FB2}
[data-theme="dark"] .tag-telecom    {background:#1C2549; color:#9FB3FF}
[data-theme="dark"] .tag-philosophy {background:#26204A; color:#B9A1FF}
[data-theme="dark"] .tag-happening  {background:#143427; color:#6FE0A5}
[data-theme="dark"] .topnav{
  background:rgba(15,20,34,.92);
  border-color:rgba(255,255,255,.10);
}
[data-theme="dark"] .post-card,
[data-theme="dark"] .proj,
[data-theme="dark"] .vac-card,
[data-theme="dark"] .vac-section,
[data-theme="dark"] .cats-block,
[data-theme="dark"] .cr-card,
[data-theme="dark"] .vibe,
[data-theme="dark"] .chip,
[data-theme="dark"] .float-badge{
  background:var(--paper-2); border-color:var(--line);
}
/* кнопки и плашки в dark */
[data-theme="dark"] .btn-ghost{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.14);
  color:var(--ink);
}
[data-theme="dark"] .btn-ghost:hover{
  background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.24);
}
[data-theme="dark"] .vac-cta-buttons .btn{
  background:#fff; color:var(--brand);
}
[data-theme="dark"] .vac-cta-buttons .btn:hover{
  background:#E5E8F0; color:var(--brand-600);
}
/* sidebar блога в dark */
[data-theme="dark"] .side-card{
  background:var(--paper-3);
  border:1px solid var(--line);
}
/* формула в dark */
[data-theme="dark"] .article-body .formula{
  background:linear-gradient(140deg, var(--paper-2), var(--brand-50));
  border-color:var(--line);
  color:var(--ink);
}
/* tag-*/
[data-theme="dark"] .empty{
  background:var(--paper-2);
  border-color:var(--line);
  color:var(--muted);
}
/* код-блок в статье */
[data-theme="dark"] .article-body code{
  background:var(--paper-3);
  color:var(--ink);
}
/* активный пункт в категориях */
[data-theme="dark"] .cat.is-active{background:var(--paper-3)}
[data-theme="dark"] .cat:hover{background:var(--paper-3)}
[data-theme="dark"] .cat-count{background:var(--paper-3)}
[data-theme="dark"] .cat.is-active .cat-count{
  background:var(--brand-100); color:#9FB3FF;
}
/* фильтр-чипы блога */
[data-theme="dark"] .chip.is-active{
  background:#fff; color:var(--paper); border-color:#fff;
}
/* брэнд-acent в hero-title — оставляем градиент, но добавляем чуть света */
[data-theme="dark"] .hero-title{color:var(--ink)}
[data-theme="dark"] .article-title,
[data-theme="dark"] .post-title,
[data-theme="dark"] .vac-title,
[data-theme="dark"] .section-title,
[data-theme="dark"] .page-title{color:var(--ink)}
[data-theme="dark"] .section-sub,
[data-theme="dark"] .page-lead,
[data-theme="dark"] .article-lead,
[data-theme="dark"] .post-lead,
[data-theme="dark"] .vac-lead{color:var(--muted)}
[data-theme="dark"] .hero-lead strong{color:var(--ink)}
[data-theme="dark"] .article-body{color:var(--ink-soft)}
[data-theme="dark"] .article-body strong{color:var(--ink)}
[data-theme="dark"] .article-body h2,
[data-theme="dark"] .article-body h3{color:var(--ink)}
[data-theme="dark"] .article-body blockquote{
  background:var(--paper-2);
  color:var(--ink-soft);
  border-left-color:var(--brand);
}
/* фон под hero — сохраняем градиент */
[data-theme="dark"] .hero{background:var(--paper)}
[data-theme="dark"] .hero::before{
  background:radial-gradient(circle, rgba(91,130,255,.18), rgba(55,198,208,.08) 40%, transparent 70%);
}
/* mybase/mknet карточки в dark — image background */
[data-theme="dark"] .proj-img{background:var(--paper-3)}
[data-theme="dark"] .post-card-img{background:var(--paper-3)}
/* контактные ссылки в .vac-section */
[data-theme="dark"] .vac-section a{color:#9FB3FF; border-bottom-color:rgba(159,179,255,.30)}
[data-theme="dark"] .vac-section a:hover{border-bottom-color:#9FB3FF}
/* читать блог стрелка в hero */
[data-theme="dark"] .btn-ghost .ic{color:var(--ink)}
/* .bg-strip фон в dark */
[data-theme="dark"] .bg-strip{
  background:var(--paper-2);
  border:1px solid var(--line);
}
/* mobile menu — корректный dark */
[data-theme="dark"] .topnav a:hover{background:rgba(255,255,255,.05); border-radius:999px}
[data-theme="dark"] .topnav a.is-active{
  background:var(--brand-100);
  color:#9FB3FF;
  border-radius:999px;
}
[data-theme="dark"] .proj-big{
  background:linear-gradient(160deg, var(--paper-2) 0%, var(--brand-50) 100%);
  border-color:var(--line);
}
[data-theme="dark"] .pill{
  background:var(--paper-2);
  color:var(--ink-soft);
  border-color:var(--line);
}
[data-theme="dark"] .pill-brand   {background:#1C2549; color:#9FB3FF}
[data-theme="dark"] .pill-cyan    {background:#16323A; color:#74E3EB}
[data-theme="dark"] .pill-rose    {background:#3B1A28; color:#FF8FB2}
[data-theme="dark"] .pill-violet  {background:#26204A; color:#B9A1FF}
[data-theme="dark"] .pill-emerald {background:#143427; color:#6FE0A5}
[data-theme="dark"] .pill-amber   {background:#39280C; color:#F8C57A}
[data-theme="dark"] .hero{background:var(--paper)}
[data-theme="dark"] .deco-dots{
  background-image:radial-gradient(circle, rgba(236,239,247,.20) 1.5px, transparent 1.6px);
}
[data-theme="dark"] .bg-strip{background:var(--paper-2); border:1px solid var(--line)}
[data-theme="dark"] .foot{border-top-color:var(--line); color:var(--muted)}
[data-theme="dark"] .empty{background:var(--paper-2); border-color:var(--line-strong)}

/* ---------- сброс и база ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:"Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  font-size:16px; line-height:1.55;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-feature-settings:"cv11", "ss01", "ss03";
}
img,svg{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
button{font:inherit; cursor:pointer; border:none; background:none; color:inherit}
h1,h2,h3,h4{
  margin:0; line-height:1.05; letter-spacing:-.02em;
  font-family:"Manrope", "Inter", sans-serif;
  font-weight:800;
}
p{margin:0}

::selection{background:var(--brand-100); color:var(--ink)}

/* ---------- SVG icons (из amor-style) ---------- */
.ic{display:inline-flex; align-items:center; justify-content:center; line-height:0; color:var(--brand-600)}
.ic > svg{
  width:1em; height:1em; display:block;
  fill:none; stroke:currentColor; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round;
  transition:transform .35s cubic-bezier(.4,1.4,.5,1), filter .25s ease;
}
.ic-emerald{color:#16A37B}
.ic-sky    {color:#0E80F4}
.ic-rose   {color:#E1486D}
.ic-amber  {color:#E8A73C}
.ic-violet {color:#7A5CD9}
.ic-teal   {color:#0CA3A3}
.ic-coral  {color:#F26B4F}

@keyframes ic-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
@keyframes ic-pulse{0%,100%{filter:drop-shadow(0 0 0 transparent)}50%{filter:drop-shadow(0 0 4px currentColor)}}

/* ============================================================
   ANIMATIONS — appearance, stagger, reveal
   ============================================================ */
@keyframes fadeUp{
  from{opacity:0; transform:translateY(16px)}
  to  {opacity:1; transform:translateY(0)}
}
@keyframes fadeIn{
  from{opacity:0}
  to  {opacity:1}
}
@keyframes scaleIn{
  from{opacity:0; transform:scale(.96) translateY(8px)}
  to  {opacity:1; transform:scale(1) translateY(0)}
}
.stagger{
  opacity:0;
  animation:fadeUp .7s var(--ease-out) forwards;
}
.stagger-fade{
  opacity:0;
  animation:fadeIn 1.2s var(--ease-out) .3s forwards;
}
.stagger-badge{
  opacity:0;
  animation:scaleIn .6s var(--ease-out) forwards;
}
.reveal{
  opacity:0; transform:translateY(24px);
  transition:opacity .8s var(--ease-out), transform .8s var(--ease-out);
  will-change:opacity, transform;
}
.reveal.is-visible{opacity:1; transform:translateY(0)}

@media (prefers-reduced-motion:reduce){
  .stagger, .stagger-fade, .stagger-badge{
    opacity:1 !important; animation:none !important;
  }
  .reveal{opacity:1 !important; transform:none !important}
  .float-badge{animation:none !important}
  .hero-photo-wrap::before{animation:none !important}
}

/* ---------- layout: sidebar + main ---------- */
.shell{
  display:grid;
  grid-template-columns:320px 1fr;
  gap:48px;
  max-width:1180px;
  margin:0 auto;
  padding:160px var(--gutter) 80px;
  align-items:start;
}

/* ---------- sidebar ---------- */
.side{
  position:sticky; top:32px;
  display:flex; flex-direction:column; gap:22px;
}
.side-card{
  background:var(--dark);
  color:#E9EEF8;
  border-radius:var(--radius-lg);
  padding:28px 24px;
  box-shadow:var(--shadow-md);
  position:relative; overflow:hidden;
}
.side-card::before{
  content:""; position:absolute; inset:-30% -30% auto auto;
  width:240px; height:240px; border-radius:50%;
  background:radial-gradient(circle, rgba(50,201,183,.22), transparent 70%);
  pointer-events:none;
}
.side-avatar{
  width:110px; height:110px; border-radius:50%;
  object-fit:cover; object-position:center top;
  border:3px solid var(--brand);
  box-shadow:0 8px 24px rgba(0,0,0,.25);
  margin-bottom:16px;
}
.side-name{
  font-size:22px; font-weight:800; color:#fff;
  letter-spacing:-.01em;
}
.side-role{
  font-size:13.5px; color:var(--brand);
  font-weight:600; text-transform:uppercase; letter-spacing:.06em;
  margin-top:4px;
}
.side-bio{
  font-size:14.5px; line-height:1.55;
  color:rgba(233,238,248,.78);
  margin-top:14px;
}
.side-links{
  display:flex; gap:10px; margin-top:18px; flex-wrap:wrap;
}
.side-link{
  display:inline-flex; align-items:center; gap:6px;
  font-size:13px; font-weight:600;
  padding:7px 12px; border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.10);
  color:#E9EEF8;
  transition:.15s ease;
}
.side-link:hover{background:rgba(50,201,183,.18); border-color:var(--brand)}
.side-link .ic{font-size:14px}

/* категории */
.cats-block{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:22px 20px;
  box-shadow:var(--shadow-sm);
}
.cats-title{
  font-size:11.5px; font-weight:700;
  color:var(--muted);
  text-transform:uppercase; letter-spacing:.08em;
  margin-bottom:14px;
}
.cats{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:2px }
.cat{
  display:flex; align-items:center; gap:12px;
  padding:10px 12px; border-radius:10px;
  font-size:14.5px; font-weight:500; color:var(--ink);
  transition:.15s ease;
  cursor:pointer;
}
.cat:hover{background:var(--paper-2)}
.cat.is-active{background:var(--paper-2); font-weight:700}
.cat .ic{font-size:18px; flex-shrink:0}
.cat-name{flex:1}
.cat-count{
  font-size:12px; font-weight:600; color:var(--muted-2);
  background:var(--paper-2);
  padding:2px 8px; border-radius:999px;
  min-width:24px; text-align:center;
}
.cat.is-active .cat-count{background:var(--brand-100); color:var(--brand-600)}

/* ---------- main ---------- */
.main{ min-width:0 }
.page-head{
  margin-bottom:32px;
  padding-bottom:24px;
  border-bottom:1px solid var(--line);
}
.kicker{
  display:inline-block;
  font-size:12px; font-weight:700;
  color:var(--brand-600);
  text-transform:uppercase; letter-spacing:.08em;
  margin-bottom:10px;
}
.page-title{
  font-size:clamp(28px, 4vw, 40px); font-weight:800;
  color:var(--ink);
}
.page-title .accent{ color:var(--brand-600) }
.page-lead{
  font-size:17px; color:var(--muted);
  margin-top:10px;
  max-width:60ch;
}

/* фильтр-чипы (мобила) */
.filter-bar{
  display:none;
  flex-wrap:wrap; gap:8px;
  margin-bottom:24px;
}
.chip{
  display:inline-flex; align-items:center; gap:6px;
  font-size:13px; font-weight:600;
  padding:7px 12px; border-radius:999px;
  background:#fff; border:1px solid var(--line);
  color:var(--ink);
}
.chip.is-active{background:var(--ink); color:#fff; border-color:var(--ink)}
.chip .ic{font-size:14px}

/* ---------- posts list ---------- */
.posts{ display:flex; flex-direction:column; gap:18px }

.post-card{
  display:block;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-card);
  padding:26px 28px;
  box-shadow:var(--shadow-sm);
  transition:transform .22s var(--ease-out), box-shadow .22s var(--ease-out), border-color .22s var(--ease-out);
  overflow:hidden;
}
.post-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-md);
  border-color:var(--line-strong);
}
/* пост с обложкой — картинка сверху, тело снизу */
.post-card.has-cover{padding:0}
.post-card-img{
  margin:0;
  aspect-ratio:16/9;
  background:var(--paper-2);
  overflow:hidden;
}
.post-card-img img{
  width:100%; height:100%;
  display:block; object-fit:cover;
  transition:transform .45s var(--ease-out);
}
.post-card.has-cover:hover .post-card-img img{
  transform:scale(1.04);
}
.post-card-body{
  padding:24px 28px 26px;
}
@media (max-width:600px){
  .post-card-img{aspect-ratio:5/3}
  .post-card-body{padding:20px 22px 22px}
}

.post-meta{
  display:flex; align-items:center; gap:10px;
  font-size:13px; color:var(--muted);
  margin-bottom:12px; flex-wrap:wrap;
}
.post-meta time{color:var(--muted)}
.post-meta .dot{
  width:3px; height:3px; border-radius:50%;
  background:var(--muted-2);
}
.tag{
  display:inline-flex; align-items:center; gap:6px;
  font-size:12px; font-weight:700;
  padding:4px 10px; border-radius:999px;
  letter-spacing:.01em;
}
.tag .ic{font-size:13px}

.tag-startup    {background:#FFE9EF; color:#B83056}
.tag-telecom    {background:#E1EFFD; color:#0A5BA3}
.tag-philosophy {background:#EFE9FB; color:#5B3CC4}
.tag-happening  {background:#DEF6EC; color:#0A7C58}

.post-title{
  font-size:22px; font-weight:800; color:var(--ink);
  letter-spacing:-.01em;
  margin-bottom:10px;
}
.post-card:hover .post-title{color:var(--brand-600)}
.post-lead{
  font-size:15.5px; color:var(--muted);
  line-height:1.6;
}
.post-foot{
  display:flex; align-items:center; gap:14px;
  margin-top:18px;
  font-size:13px; color:var(--muted-2);
}
.read-more{
  display:inline-flex; align-items:center; gap:6px;
  color:var(--brand-600); font-weight:700;
}
.read-more .ic{font-size:14px; transition:transform .15s ease}
.post-card:hover .read-more .ic{transform:translateX(3px)}

/* пустое состояние при фильтре */
.empty{
  background:#fff; border:1px dashed var(--line-strong);
  border-radius:var(--radius-lg);
  padding:48px 28px; text-align:center;
  color:var(--muted);
}
.empty .ic{font-size:36px; color:var(--muted-2); margin:0 auto 12px}
.empty-sub{margin-top:4px; font-size:13px}

/* ---------- article (страница поста) ---------- */
.article-shell{
  max-width:760px;
  margin:0 auto;
  padding:160px var(--gutter) 80px;
}
.back-link{
  display:inline-flex; align-items:center; gap:8px;
  font-size:14px; font-weight:600; color:var(--muted);
  margin-bottom:24px;
}
.back-link:hover{color:var(--brand-600)}
.back-link .ic{font-size:16px}

.article-head{
  border-bottom:1px solid var(--line);
  padding-bottom:24px; margin-bottom:32px;
}
.article-cover{
  margin:0 0 36px;
  border-radius:var(--r-card);
  overflow:hidden;
  background:var(--paper-2);
  border:1px solid var(--line);
  box-shadow:var(--shadow-sm);
}
.article-cover img{
  width:100%; height:auto; display:block;
  aspect-ratio:4/3; object-fit:cover;
}
@media (max-width:600px){
  .article-cover{margin-bottom:24px}
  .article-cover img{aspect-ratio:5/4}
}
.article-meta{
  display:flex; align-items:center; gap:10px;
  font-size:13.5px; color:var(--muted);
  margin-bottom:16px; flex-wrap:wrap;
}
.article-meta .dot{
  width:3px; height:3px; border-radius:50%;
  background:var(--muted-2); display:inline-block;
}
.article-title{
  font-size:clamp(28px, 4vw, 42px); font-weight:800;
  color:var(--ink); letter-spacing:-.015em;
}
.article-lead{
  font-size:18px; color:var(--muted);
  margin-top:14px; line-height:1.55;
}

.article-body{
  font-size:17px; line-height:1.7; color:var(--ink-soft);
}
.article-body h2{
  font-size:24px; font-weight:800; color:var(--ink);
  margin:36px 0 14px;
}
.article-body h3{
  font-size:19px; font-weight:700; color:var(--ink);
  margin:28px 0 10px;
}
.article-body p{ margin:16px 0 }
.article-body ul,
.article-body ol{ margin:16px 0; padding-left:22px }
.article-body li{ margin:6px 0 }
.article-body blockquote{
  margin:24px 0;
  padding:16px 22px;
  border-left:3px solid var(--brand);
  background:var(--brand-100);
  border-radius:0 14px 14px 0;
  color:var(--ink-soft);
  font-style:italic;
}
.article-body a{ color:var(--brand-600); border-bottom:1px solid var(--brand-100) }
.article-body a:hover{ border-bottom-color:var(--brand) }
.article-body code{
  background:var(--paper-2); padding:2px 6px;
  border-radius:6px; font-size:.92em;
  font-family:"SF Mono", Menlo, Consolas, monospace;
}
.article-body img{
  border-radius:var(--radius-lg);
  margin:24px 0;
  box-shadow:var(--shadow-sm);
}
.article-body .formula{
  display:block; text-align:center;
  font-size:17.5px; font-weight:600; color:var(--ink);
  background:linear-gradient(140deg, var(--paper-2) 0%, var(--brand-100) 100%);
  border:1px solid var(--line);
  padding:22px 18px; border-radius:var(--radius-lg);
  margin:28px 0; line-height:1.8;
}
.article-body .formula .arr{
  color:var(--brand-600); margin:0 6px;
  font-weight:800; display:inline-block;
}
.article-body .formula b{color:var(--brand-600); font-weight:800}

.article-foot{
  margin-top:48px; padding-top:28px;
  border-top:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  flex-wrap:wrap;
}
.article-foot .back-link{margin:0}
.author-row{
  display:flex; align-items:center; gap:14px;
}
.author-row img{
  width:48px; height:48px; border-radius:50%;
  object-fit:cover; object-position:center top;
  border:2px solid var(--brand);
}
.author-name{font-weight:700; color:var(--ink); font-size:15px}
.author-sub{font-size:13px; color:var(--muted); margin-top:2px}

/* ---------- footer ---------- */
.foot{
  border-top:1px solid var(--line);
  padding:32px var(--gutter);
  text-align:center;
  font-size:13px; color:var(--muted-2);
}
.foot a{color:var(--muted); border-bottom:1px solid transparent}
.foot a:hover{color:var(--brand-600); border-bottom-color:var(--brand-100)}

/* ---------- адаптив ---------- */
@media (max-width:1000px){
  .shell{
    grid-template-columns:1fr;
    gap:24px;
    padding-top:24px;
  }
  .side{
    position:static;
    flex-direction:row;
    gap:18px;
    align-items:stretch;
  }
  .side-card{flex:1; min-width:0}
  .cats-block{flex:1; min-width:0}
}

@media (max-width:720px){
  .side{flex-direction:column}
  .filter-bar{display:flex}
  .cats-block{display:none}
  .post-card{padding:22px}
  .post-title{font-size:20px}
}

@media (max-width:600px){
  .side-card{padding:22px 20px}
  .side-avatar{width:90px; height:90px}
  .side-name{font-size:20px}
  .article-shell{padding:130px var(--gutter) 60px}
  .article-body{font-size:16px}
  .article-body h2{font-size:21px}
}

@media (prefers-reduced-motion:reduce){
  .ic > svg{animation:none !important; transition:none !important}
  .post-card{transition:none}
}

/* ============================================================
   Личная страничка proivan.ru — topbar, hero, projects, vibe.
   ============================================================ */

/* ---------- topbar (общая шапка на всех страницах) ---------- */
/* парящая FAB-шапка */
.topbar{
  position:fixed;
  top:16px;
  left:50%;
  transform:translateX(-50%);
  width:auto;
  max-width:calc(100vw - 28px);
  z-index:50;
  pointer-events:none;
  background:transparent;
  border:none;
}
.topbar-wrap{
  pointer-events:auto;
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  border:1px solid rgba(255,255,255,.6);
  box-shadow:
    0 2px 6px rgba(16,24,40,.03),
    0 16px 40px -8px rgba(16,24,40,.06),
    0 40px 80px -24px rgba(16,24,40,.08);
  border-radius:28px;
  padding:10px 12px 10px 16px;
  display:inline-flex;
  align-items:center;
  gap:22px;
  transition:transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.topbar-wrap:hover{
  transform:translateY(-1px);
  box-shadow:
    0 2px 6px rgba(16,24,40,.04),
    0 20px 48px -8px rgba(16,24,40,.08),
    0 48px 96px -24px rgba(16,24,40,.10);
}
/* отступ под FAB-шапкой переносим внутрь первых блоков, чтобы не было серой полоски */
.hero{padding-top:180px}
.shell{padding-top:160px}
.vac-shell{padding-top:160px}
.article-shell{padding-top:160px}
.brand{
  display:flex; align-items:center; gap:12px;
  color:var(--ink);
}
.brand-avatar{
  width:50px; height:50px; border-radius:50%;
  object-fit:cover; object-position:center top;
  border:2px solid var(--paper-2);
  box-shadow:var(--shadow-xs);
  image-rendering:auto;
}
.brand-text{display:flex; flex-direction:column; line-height:1.18}
.brand-name{
  font-size:16px; font-weight:800;
  letter-spacing:-.015em;
  font-family:"Manrope", sans-serif;
}
/* подзаголовок-карусель */
.brand-meta{
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.005em;
  height:1.45em;
  overflow:hidden;
  position:relative;
  display:block;
}
.brand-meta-track{
  display:flex; flex-direction:column;
  animation:brand-cycle 18s cubic-bezier(.6,.05,.3,1) infinite;
  will-change:transform;
}
.brand-meta-track > span{
  display:block;
  height:1.45em;
  line-height:1.45em;
  white-space:nowrap;
  transition:color .3s var(--ease-out);
}
.brand-meta-track > span:nth-child(1){color:#2BA4AD}   /* ИТ-предприниматель */
.brand-meta-track > span:nth-child(2){color:#2BA4AD}   /* Startup Founder */
.brand-meta-track > span:nth-child(3){color:#1F47D9}   /* CEO */
.brand-meta-track > span:nth-child(4){color:#6B47CC}   /* Филантроп */
.brand-meta-track > span:nth-child(5){color:#C73968}   /* Скромняга */
.brand-meta-track > span:nth-child(6){color:#188650}   /* Красавчик */
.brand-meta-track > span:nth-child(7){color:#2BA4AD}   /* возврат */
@keyframes brand-cycle{
  0%, 11%       {transform:translateY(0)}
  16.66%, 27.66%{transform:translateY(-1.45em)}
  33.33%, 44.33%{transform:translateY(-2.9em)}
  50%, 61%      {transform:translateY(-4.35em)}
  66.66%, 77.66%{transform:translateY(-5.8em)}
  83.33%, 94.33%{transform:translateY(-7.25em)}
  100%          {transform:translateY(-8.7em)}
}
@media (prefers-reduced-motion:reduce){
  .brand-meta-track{animation:none}
}
.topnav{display:flex; gap:4px; align-items:center}
.topnav a{
  position:relative;
  padding:10px 16px; border-radius:999px;
  font-size:15.5px; font-weight:500; color:var(--muted);
  transition:color .22s var(--ease-out), background .22s var(--ease-out);
}
.topnav a:hover{color:var(--ink)}
.topnav a.is-active{color:var(--ink); font-weight:600}
.topnav a.is-active::after{
  content:""; position:absolute;
  left:50%; bottom:-3px;
  width:24px; height:3px;
  background:var(--brand);
  border-radius:2px;
  transform:translateX(-50%);
}

.menu-toggle{
  display:none;
  width:42px; height:42px;
  background:var(--paper); border:1px solid var(--line);
  border-radius:12px;
  cursor:pointer;
  flex-direction:column;
  align-items:center; justify-content:center;
  gap:5px;
  transition:background .22s, border-color .22s;
}
.menu-toggle:hover{background:#fff; border-color:var(--line-strong)}
.menu-toggle span{
  width:18px; height:2px;
  background:var(--ink); border-radius:2px;
  transition:transform .25s var(--ease-out), opacity .15s ease;
  transform-origin:center;
}
.menu-toggle.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-toggle.is-open span:nth-child(2){opacity:0; transform:scaleX(0)}
.menu-toggle.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.theme-toggle{
  width:44px; height:44px; border-radius:50%;
  background:var(--paper); border:1px solid var(--line);
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--ink); cursor:pointer;
  transition:transform .22s var(--ease-out), background .22s, border-color .22s;
}
.theme-toggle:hover{
  background:#fff;
  border-color:var(--line-strong);
  transform:rotate(20deg);
}
.theme-toggle .ic{font-size:20px; color:var(--ink-soft)}
.theme-toggle .ic-moon{display:none}
.theme-toggle .ic-sun{display:flex}
[data-theme="dark"] .theme-toggle .ic-moon{display:flex}
[data-theme="dark"] .theme-toggle .ic-sun{display:none}

/* ---------- hero (главная страница) ---------- */
.hero{
  background:var(--paper);
  padding:180px 0 110px;
  position:relative; overflow:hidden;
}
.hero::before{
  content:""; position:absolute;
  top:-300px; right:-200px;
  width:780px; height:780px; border-radius:50%;
  background:radial-gradient(circle, rgba(49,94,251,.10), rgba(55,198,208,.05) 40%, transparent 70%);
  pointer-events:none;
  filter:blur(20px);
}
.hero::after{
  content:""; position:absolute;
  bottom:-200px; left:-100px;
  width:500px; height:500px; border-radius:50%;
  background:radial-gradient(circle, rgba(55,198,208,.08), transparent 70%);
  pointer-events:none;
  filter:blur(40px);
}
.hero-wrap{
  max-width:1320px; margin:0 auto;
  padding:0 var(--gutter);
  display:grid;
  grid-template-columns:.85fr 1.35fr;
  gap:40px; align-items:center;
  position:relative;
}
.hero-photo-wrap{
  position:relative;
  padding:12px 4px;
}
.hero-photo{
  border-radius:var(--r-photo);
  box-shadow:var(--shadow-lg);
  width:100%; height:auto;
  display:block; aspect-ratio: 4/5; object-fit:cover;
  position:relative; z-index:2;
}
/* мягкий glow за фото */
.hero-photo-wrap::before{
  content:""; position:absolute;
  inset:5% 5% 5% 5%;
  background:var(--grad-brand);
  border-radius:50%; filter:blur(90px);
  opacity:.35; z-index:1;
  animation:hero-glow 8s var(--ease-in-out) infinite;
}
@keyframes hero-glow{
  0%,100%{transform:scale(1) translate(0,0); opacity:.35}
  50%{transform:scale(1.08) translate(6px,-6px); opacity:.5}
}

/* плавающие стикеры рядом с фото */
.float-badge{
  position:absolute; z-index:4;
  background:#fff;
  border:1px solid var(--line);
  box-shadow:var(--shadow-md);
  border-radius:16px;
  padding:12px 16px;
  font-size:14px; font-weight:600;
  color:var(--ink);
  display:inline-flex; align-items:center; gap:10px;
  font-family:"Inter", sans-serif;
}
.float-badge .ic{font-size:18px; flex-shrink:0}
.float-badge .dot-live{
  width:8px; height:8px; border-radius:50%;
  background:#10B981;
  box-shadow:0 0 0 3px rgba(16,185,129,.22);
  flex-shrink:0;
}
.float-badge img{
  width:22px; height:22px; border-radius:6px;
  flex-shrink:0;
}

/* fb-1 — большой стикер сверху */
.float-badge.fb-1{
  top:-2%; left:-12%;
  max-width:230px;
  font-size:15px; line-height:1.3; font-weight:600;
  padding:14px 18px;
  border-radius:18px;
  white-space:normal;
  --rot:-4deg;
}
.float-badge.fb-1 .rocket{
  font-size:20px;
  filter:drop-shadow(0 2px 6px rgba(49,94,251,.30));
}

/* fb-2 — компактный справа в середине */
.float-badge.fb-2{
  top:38%; right:-12%;
  --rot:3deg;
}
.float-badge.fb-2 .ic{color:var(--brand)}

/* fb-3 — мини-tooltip с графиком снизу */
.float-badge.fb-3{
  bottom:6%; left:-8%;
  padding:10px 14px; gap:8px;
  --rot:-2deg;
}
.float-badge.fb-3 .mini-chart{
  width:30px; height:18px;
  color:var(--brand);
}

/* flash при загрузке + hover-показ на фото */
.float-badge{
  opacity:0;
  pointer-events:none;
  transform:rotate(var(--rot,0deg)) scale(.85) translateY(14px);
  animation:badge-flash 3s var(--ease-out);
  transition:opacity .4s var(--ease-out), transform .4s var(--ease-out);
}
.float-badge.fb-1{animation-delay:.45s}
.float-badge.fb-2{animation-delay:.6s}
.float-badge.fb-3{animation-delay:.75s}
@keyframes badge-flash{
  0%   {opacity:0; transform:rotate(var(--rot,0deg)) scale(.85) translateY(14px)}
  18%  {opacity:1; transform:rotate(var(--rot,0deg)) scale(1)   translateY(0)}
  52%  {opacity:1; transform:rotate(var(--rot,0deg)) scale(1)   translateY(0)}
  100% {opacity:0; transform:rotate(var(--rot,0deg)) scale(.95) translateY(-10px)}
}
/* hover только на самой фотке (sibling selector) */
.hero-photo:hover ~ .float-badge{
  animation:none;
  opacity:1;
  transform:rotate(var(--rot,0deg)) scale(1) translateY(0);
}
.hero-photo:hover ~ .float-badge.fb-1{transition-delay:0s}
.hero-photo:hover ~ .float-badge.fb-2{transition-delay:.08s}
.hero-photo:hover ~ .float-badge.fb-3{transition-delay:.16s}
@media (prefers-reduced-motion:reduce){
  .float-badge{
    animation:none;
    opacity:1;
    transform:rotate(var(--rot,0deg));
  }
}

/* декоративные точки-сетка в углу hero */
.deco-dots{
  position:absolute; pointer-events:none;
  top:24px; right:24px;
  width:120px; height:120px;
  background-image:radial-gradient(circle, rgba(30,36,48,.18) 1.5px, transparent 1.6px);
  background-size:14px 14px;
  background-position:0 0;
  -webkit-mask-image:radial-gradient(circle at top right, #000 30%, transparent 75%);
  mask-image:radial-gradient(circle at top right, #000 30%, transparent 75%);
  opacity:.6;
}

/* handwritten — рукописный блок под кнопками */
.hero-handwritten{
  display:flex; align-items:flex-start; gap:18px;
  margin-top:44px;
  position:relative;
}
.hw-text{
  font-family:"Caveat", "Comic Sans MS", cursive;
  font-size:22px; line-height:1.2;
  color:var(--ink-soft);
  font-weight:500;
  transform:rotate(-2deg);
  letter-spacing:.005em;
}
.hw-arrow{
  width:110px; height:110px;
  color:var(--brand-600);
  flex-shrink:0;
  transform:translateY(-16px);
  margin-left:-12px;
}
.hw-arrow svg{width:100%; height:100%; overflow:visible}
.hw-paw{
  width:28px; height:28px;
  color:var(--muted);
  margin-left:-12px;
  margin-top:54px;
  flex-shrink:0;
  transform:rotate(8deg);
}
.hw-paw svg{width:100%; height:100%; opacity:.55}

.hero-eyebrow{
  display:flex; gap:8px; flex-wrap:wrap;
  margin-bottom:22px;
}
/* pill — базовый стиль + цветные варианты для бэйджей-категорий */
.pill{
  display:inline-flex; align-items:center; gap:6px;
  font-size:13px; font-weight:600;
  padding:7px 14px; border-radius:var(--r-pill);
  background:#fff; color:var(--ink-soft);
  border:1px solid var(--line);
  letter-spacing:.005em;
  font-family:"Inter", sans-serif;
  transition:transform .22s var(--ease-out);
}
.pill-brand   {background:#E2E8FF; color:#1F47D9; border-color:transparent}
.pill-cyan    {background:#DCF6F8; color:#2BA4AD; border-color:transparent}
.pill-rose    {background:#FFE4ED; color:#C73968; border-color:transparent}
.pill-violet  {background:#ECE6FF; color:#6B47CC; border-color:transparent}
.pill-emerald {background:#DCF4E5; color:#188650; border-color:transparent}
.pill-amber   {background:#FFEBC9; color:#B7700A; border-color:transparent}
.pill-soft    {background:var(--paper-2); color:var(--muted); border-color:transparent}
.pill-dot::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:#10B981; box-shadow:0 0 0 3px rgba(16,185,129,.18);
  display:inline-block; margin-right:2px;
}

.hero-title{
  font-size:clamp(48px, 7.5vw, 84px);
  font-weight:800; color:var(--ink);
  letter-spacing:-.035em; line-height:.98;
  margin-bottom:24px;
  font-family:"Manrope", "Inter", sans-serif;
}
.hero-title .accent{
  background:var(--grad-brand);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  display:inline-block;
}
.hero-lead{
  font-size:22px; line-height:1.5;
  color:var(--muted);
  max-width:52ch;
  font-weight:400;
}
.hero-lead strong{color:var(--ink); font-weight:600}
.hero-cta{
  display:flex; flex-wrap:wrap; gap:12px;
  margin-top:36px;
}

/* ---------- кнопки ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-size:15px; font-weight:600;
  padding:14px 24px; border-radius:var(--r-btn);
  transition:transform .22s var(--ease-out), box-shadow .22s var(--ease-out), background .22s var(--ease-out), color .22s var(--ease-out), border-color .22s var(--ease-out);
  cursor:pointer; text-decoration:none;
  font-family:"Inter", sans-serif;
}
.btn .ic{font-size:1.15em; color:currentColor}
.btn-primary{
  background:var(--brand); color:#fff;
  box-shadow:0 1px 2px rgba(16,24,40,.08), 0 8px 24px rgba(49,94,251,.24);
}
.btn-primary:hover{
  background:var(--brand-600);
  transform:translateY(-2px);
  box-shadow:0 1px 2px rgba(16,24,40,.08), 0 12px 32px rgba(49,94,251,.36);
}
.btn-grad{
  background:var(--grad-brand); color:#fff;
  background-size:200% 100%;
  box-shadow:0 1px 2px rgba(16,24,40,.08), 0 8px 24px rgba(49,94,251,.22);
}
.btn-grad:hover{
  background-position:100% 0;
  transform:translateY(-2px);
  box-shadow:0 1px 2px rgba(16,24,40,.08), 0 14px 32px rgba(55,198,208,.30);
}
.btn-ghost{
  background:#fff; color:var(--ink);
  border:1px solid var(--line-strong);
}
.btn-ghost:hover{
  border-color:var(--ink); transform:translateY(-2px);
  box-shadow:var(--shadow-sm);
}

/* ---------- base section ---------- */
.section{padding:72px 0}
.section[data-no-top]{padding-top:0}
.section-tight{padding:48px 0}
.section-tight[data-no-top]{padding-top:0}
.ic-inline{font-size:22px; vertical-align:-4px}
.section-head{
  max-width:1180px; margin:0 auto 40px;
  padding:0 var(--gutter);
}
.section-head .kicker{margin-bottom:10px}
.section-title{
  font-size:clamp(26px, 3.5vw, 36px); font-weight:800;
  color:var(--ink); letter-spacing:-.01em;
}
.section-sub{
  font-size:16px; color:var(--muted);
  margin-top:8px; max-width:60ch;
}
.section-wrap{
  max-width:1180px; margin:0 auto;
  padding:0 var(--gutter);
}

/* ---------- projects (асимметричная сетка) ---------- */
.projects{
  display:grid;
  grid-template-columns:1.45fr 1fr;
  grid-template-rows:auto auto;
  gap:20px;
}
.proj{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-card);
  overflow:hidden;
  display:flex; flex-direction:column;
  box-shadow:var(--shadow-sm);
  transition:transform .28s var(--ease-out), box-shadow .28s var(--ease-out), border-color .28s var(--ease-out);
  position:relative;
}
.proj:hover{
  transform:translateY(-4px) rotate(-.3deg);
  box-shadow:var(--shadow-md);
  border-color:var(--line-strong);
}
.proj-big:hover{transform:translateY(-4px) rotate(.2deg)}
/* Big card — Aimly. Занимает 2 строки слева */
.proj-big{
  grid-row:1 / span 2;
  background:linear-gradient(160deg, #fff 0%, var(--brand-50) 100%);
  border-color:rgba(49,94,251,.10);
}
.proj-big .proj-img{aspect-ratio:16/12}
.proj-big .proj-body{padding:32px 36px 36px}
.proj-big .proj-name{font-size:28px; letter-spacing:-.015em}
.proj-big .proj-desc{font-size:16.5px; line-height:1.6}
.proj-big::after{
  content:""; position:absolute;
  top:-80px; right:-80px;
  width:240px; height:240px; border-radius:50%;
  background:radial-gradient(circle, rgba(49,94,251,.18), transparent 70%);
  pointer-events:none; filter:blur(20px);
}

.proj-img{
  aspect-ratio: 16/10;
  background:var(--paper-2);
  object-fit:cover; width:100%;
  display:block;
}
.proj-body{
  padding:22px 24px 24px;
  display:flex; flex-direction:column; gap:10px;
  flex:1;
  position:relative; z-index:1;
}
.proj-name{
  font-size:21px; font-weight:800; color:var(--ink);
  display:flex; align-items:center; gap:10px;
  letter-spacing:-.01em;
  font-family:"Manrope", sans-serif;
}
.proj-name .pill{font-size:11px; padding:4px 10px}
.proj-desc{
  font-size:14.5px; color:var(--muted); line-height:1.6;
  flex:1;
}
.proj-link{
  display:inline-flex; align-items:center; gap:6px;
  font-size:14px; font-weight:700; color:var(--brand-600);
  margin-top:10px;
}
.proj-link .ic{transition:transform .22s var(--ease-out)}
.proj:hover .proj-link .ic{transform:translateX(4px)}

/* ---------- creative — творчество ---------- */
.creative{
  display:grid;
  grid-template-columns:1.25fr 1fr;
  gap:22px;
}
.creative-main,
.creative-side{display:flex; flex-direction:column; gap:18px}
.cr-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
  display:flex; flex-direction:column; gap:0;
  overflow:hidden;
  transition:.2s ease;
}
.cr-card:hover{transform:translateY(-2px); box-shadow:var(--shadow-md)}
.cr-card-body{padding:24px 26px; display:flex; flex-direction:column; gap:12px}
.cr-card.row{flex-direction:row; align-items:stretch}
.cr-card.row img{
  width:160px; flex-shrink:0;
  object-fit:cover; object-position:center;
}
.cr-card h3{
  font-size:19px; font-weight:800; color:var(--ink);
  letter-spacing:-.005em;
}
.cr-card p{font-size:14.5px; color:var(--muted); line-height:1.6}
.cr-card .link-strong{
  font-size:14px; font-weight:700; color:var(--brand-600);
  display:inline-flex; align-items:center; gap:6px; margin-top:4px;
}
.cr-img-big{
  width:100%; aspect-ratio: 16/9;
  object-fit:cover;
}
.cr-quote{
  font-family:"Manrope", sans-serif;
  font-size:17px; font-style:italic;
  color:var(--ink); line-height:1.45;
  padding:6px 0 12px;
  border-left:3px solid var(--brand);
  padding-left:14px;
  margin-bottom:4px;
  background:linear-gradient(90deg, var(--brand-50), transparent);
  border-radius:0 8px 8px 0;
}
.cr-card-tg .cr-card-body{padding:26px 28px 28px}

/* ---------- player (авторские треки) ---------- */
.cr-card-music .cr-card-body{padding-bottom:18px}
.player{
  list-style:none; padding:0; margin:14px 0 0;
  display:flex; flex-direction:column; gap:2px;
  max-height:380px; overflow-y:auto;
  padding-right:6px;
  scrollbar-width:thin;
  scrollbar-color:var(--line-strong) transparent;
}
.player::-webkit-scrollbar{width:6px}
.player::-webkit-scrollbar-thumb{background:var(--line-strong); border-radius:3px}
.player::-webkit-scrollbar-track{background:transparent}

.player-track{
  display:flex; align-items:center; gap:12px;
  padding:8px 10px;
  border-radius:12px;
  cursor:pointer;
  transition:background .2s var(--ease-out);
}
.player-track:hover{background:var(--paper-2)}
.player-track.is-active{background:var(--brand-50)}
[data-theme="dark"] .player-track:hover{background:var(--paper-3)}
[data-theme="dark"] .player-track.is-active{background:var(--brand-100)}

.player-play{
  width:34px; height:34px; flex-shrink:0;
  border-radius:50%;
  background:var(--brand);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  border:none; cursor:pointer;
  position:relative;
  transition:transform .2s var(--ease-out), background .2s;
}
.player-play:hover{transform:scale(1.05); background:var(--brand-600)}
.player-play::before{
  content:"";
  width:0; height:0;
  border-style:solid;
  border-width:7px 0 7px 10px;
  border-color:transparent transparent transparent #fff;
  margin-left:3px;
  transition:opacity .15s;
}
.player-play::after{
  content:"";
  position:absolute;
  width:9px; height:11px;
  background:linear-gradient(to right, #fff 0%, #fff 32%, transparent 32%, transparent 68%, #fff 68%, #fff 100%);
  opacity:0;
  transition:opacity .15s;
}
.player-track.is-playing .player-play::before{opacity:0}
.player-track.is-playing .player-play::after{opacity:1}
.player-track.is-playing .player-play{
  background:var(--cyan-600);
}

.player-info{flex:1; min-width:0; display:flex; flex-direction:column; gap:5px}
.player-title{
  font-size:14px; font-weight:600;
  color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
[data-theme="dark"] .player-title{color:var(--ink)}
.player-track.is-active .player-title{color:var(--brand-600)}
[data-theme="dark"] .player-track.is-active .player-title{color:#9FB3FF}

.player-progress{
  height:3px; background:var(--paper-2);
  border-radius:2px; overflow:hidden;
  cursor:pointer;
}
[data-theme="dark"] .player-progress{background:var(--paper-3)}
.player-bar{
  height:100%; width:0;
  background:var(--grad-brand);
  transition:width .12s linear;
}
.player-time{
  font-size:12px; color:var(--muted);
  font-variant-numeric:tabular-nums;
  min-width:36px; text-align:right;
  flex-shrink:0;
}

@media (max-width:600px){
  .player{max-height:340px}
  .player-track{padding:7px 8px; gap:10px}
  .player-play{width:30px; height:30px}
  .player-title{font-size:13.5px}
}

/* ---------- background (короткая полоска) ---------- */
.bg-strip{
  background:var(--paper-2);
  border-radius:var(--radius-lg);
  padding:32px 36px;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:28px; align-items:center;
}
.bg-strip-icon{
  width:84px; height:84px;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  color:var(--brand);
}
.bg-strip-icon .ic{
  font-size:78px;
  transition:transform .5s var(--ease-out), color .35s ease;
  transform-origin:center;
}
.bg-strip-icon .ic > svg{
  stroke-width:1.8;
  filter:drop-shadow(0 4px 18px rgba(49,94,251,.25));
}
.bg-strip:hover .bg-strip-icon .ic{
  color:var(--cyan-600);
  animation: brain-think 1.6s var(--ease-in-out) infinite;
}
@keyframes brain-think{
  0%, 100%{transform:scale(1) rotate(0)}
  20%     {transform:scale(1.08) rotate(-3deg)}
  50%     {transform:scale(.97) rotate(2deg)}
  70%     {transform:scale(1.05) rotate(-2deg)}
}
@media (prefers-reduced-motion:reduce){
  .bg-strip:hover .bg-strip-icon .ic{animation:none}
}
.bg-strip h3{
  font-size:18px; font-weight:800; color:var(--ink);
  margin-bottom:8px; letter-spacing:-.005em;
}
.bg-strip p{font-size:14.5px; color:var(--muted); line-height:1.6}

/* ---------- learning (где учился) ---------- */
.learn-head{
  text-align:center;
  display:flex; flex-direction:column; align-items:center;
  max-width:760px; margin-left:auto; margin-right:auto;
}
.learn-head .ic-brain-head{
  font-size:64px; color:var(--brand);
  margin-bottom:18px;
  transition:transform .5s var(--ease-out);
  filter:drop-shadow(0 6px 20px rgba(49,94,251,.22));
}
.learn-head:hover .ic-brain-head{transform:scale(1.06) rotate(-3deg)}
.learn-head .section-sub{margin-top:10px}

.learn-stats{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:14px;
  margin-bottom:36px;
}
.learn-stat{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-card);
  padding:24px 22px;
  text-align:left;
  box-shadow:var(--shadow-xs);
  transition:transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.learn-stat:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-sm);
}
.learn-stat-num{
  font-family:"Manrope", sans-serif;
  font-weight:800;
  font-size:56px; line-height:1;
  background:var(--grad-brand);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  letter-spacing:-.03em;
  display:inline-flex; align-items:flex-start;
}
.learn-stat-num span{
  font-size:30px; line-height:1; padding-top:6px;
  -webkit-text-fill-color:initial;
  color:var(--brand);
}
.learn-stat-label{
  font-size:14px; line-height:1.4;
  color:var(--muted); font-weight:500;
  margin-top:8px;
}

.learn-cards{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:18px;
}
.learn-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-card);
  padding:28px 30px;
  box-shadow:var(--shadow-xs);
  transition:transform .25s var(--ease-out), box-shadow .25s var(--ease-out), border-color .25s var(--ease-out);
  display:flex; flex-direction:column; gap:14px;
}
.learn-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-sm);
  border-color:var(--line-strong);
}
.learn-card-cat{
  font-size:12px; font-weight:700;
  color:var(--brand-600);
  text-transform:uppercase; letter-spacing:.08em;
}
.learn-card h3{
  font-size:20px; font-weight:800;
  color:var(--ink);
  letter-spacing:-.01em;
  font-family:"Manrope", sans-serif;
}
.learn-tags{
  display:flex; flex-wrap:wrap; gap:6px;
}
.learn-tag{
  display:inline-flex; align-items:center;
  font-size:12.5px; font-weight:600;
  padding:5px 11px; border-radius:var(--r-pill);
  background:var(--paper-2);
  color:var(--ink-soft);
  font-family:"Inter", sans-serif;
}
.learn-mentors{
  font-size:14px; line-height:1.6;
  color:var(--muted);
  margin-top:auto;
}
.learn-mentors strong{
  color:var(--ink); font-weight:600;
}

/* dark mode для learning */
[data-theme="dark"] .learn-stat,
[data-theme="dark"] .learn-card{
  background:var(--paper-2);
  border-color:var(--line);
}
[data-theme="dark"] .learn-tag{
  background:var(--paper-3);
  color:var(--ink-soft);
}
[data-theme="dark"] .learn-mentors strong{color:var(--ink)}
[data-theme="dark"] .learn-card-cat{color:#9FB3FF}

@media (max-width:1000px){
  .learn-stats{grid-template-columns:repeat(2, 1fr)}
  .learn-cards{grid-template-columns:1fr}
}
@media (max-width:600px){
  .learn-stats{gap:10px}
  .learn-stat{padding:18px}
  .learn-stat-num{font-size:42px}
  .learn-stat-num span{font-size:22px; padding-top:4px}
  .learn-stat-label{font-size:13px}
  .learn-card{padding:22px 22px 24px}
  .learn-card h3{font-size:18px}
  .learn-head .ic-brain-head{font-size:48px}
}

/* ---------- vibe (мини-секция с котом) ---------- */
.vibe{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-card);
  padding:36px 40px;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:36px; align-items:center;
  box-shadow:var(--shadow-sm);
  cursor:default;
  transition:transform .28s var(--ease-out), box-shadow .28s var(--ease-out);
}
.vibe:hover{transform:translateY(-2px); box-shadow:var(--shadow-md)}
.vibe-photo{
  position:relative;
  width:140px; height:140px; flex-shrink:0;
}
.vibe-photo::before{
  content:""; position:absolute; inset:-10px;
  background:var(--grad-brand); border-radius:50%;
  filter:blur(20px); opacity:.25; z-index:0;
}
.vibe-photo img{
  width:140px; height:140px; border-radius:50%;
  object-fit:cover;
  border:3px solid #fff;
  box-shadow:var(--shadow-md);
  position:relative; z-index:1;
  transition:transform .35s var(--ease-out);
}
.vibe:hover .vibe-photo img{transform:scale(1.04) rotate(-2deg)}
.vibe h3{
  font-size:22px; color:var(--ink);
  margin-bottom:8px; letter-spacing:-.01em;
}
.vibe-text{
  font-size:15.5px; color:var(--muted); line-height:1.6;
  min-height:3em;
  transition:opacity .25s var(--ease-out);
}
.vibe-hint{
  display:inline-block; margin-top:12px;
  font-size:12px; font-weight:600;
  color:var(--cyan-600);
  background:var(--cyan-100); padding:4px 10px;
  border-radius:999px; opacity:0;
  transform:translateY(4px);
  transition:opacity .3s var(--ease-out), transform .3s var(--ease-out);
}
.vibe:hover .vibe-hint{opacity:1; transform:translateY(0)}

/* ---------- contacts ---------- */
.contacts{
  background:
    radial-gradient(ellipse 700px 500px at 15% 0%, rgba(91,130,255,.18), transparent 65%),
    radial-gradient(ellipse 600px 400px at 100% 100%, rgba(55,198,208,.10), transparent 70%),
    linear-gradient(135deg, #0B1024 0%, #161B33 50%, #0B1024 100%);
  color:#E9EEF8;
  padding:54px 56px;
  border-radius:24px;
  max-width:1220px; margin:0 auto;
  position:relative; overflow:hidden;
}
/* звёзды */
.contacts::before{
  content:""; position:absolute; inset:0;
  background-image:
    radial-gradient(1.5px 1.5px at 8% 12%, #fff, transparent 60%),
    radial-gradient(1px 1px at 18% 30%, #fff, transparent 60%),
    radial-gradient(1.8px 1.8px at 32% 8%, #fff, transparent 60%),
    radial-gradient(1px 1px at 48% 18%, #fff, transparent 60%),
    radial-gradient(1.2px 1.2px at 12% 50%, #fff, transparent 60%),
    radial-gradient(1px 1px at 22% 78%, #fff, transparent 60%),
    radial-gradient(1.8px 1.8px at 40% 60%, #fff, transparent 60%),
    radial-gradient(1px 1px at 38% 85%, #fff, transparent 60%),
    radial-gradient(1px 1px at 6% 85%, #fff, transparent 60%),
    radial-gradient(1.5px 1.5px at 58% 45%, #fff, transparent 60%),
    radial-gradient(1px 1px at 62% 78%, #fff, transparent 60%),
    radial-gradient(2px 2px at 92% 22%, #fff, transparent 60%),
    radial-gradient(1px 1px at 88% 50%, #fff, transparent 60%),
    radial-gradient(1.2px 1.2px at 96% 75%, #fff, transparent 60%),
    radial-gradient(1px 1px at 78% 15%, #fff, transparent 60%),
    radial-gradient(1px 1px at 80% 65%, #fff, transparent 60%),
    radial-gradient(1.5px 1.5px at 70% 88%, #fff, transparent 60%);
  background-repeat:no-repeat;
  opacity:.55;
  pointer-events:none;
}
.contacts-inner{
  position:relative; z-index:1;
  display:grid;
  grid-template-columns: 1.05fr 1.15fr .85fr;
  gap:48px;
  align-items:center;
}

.contacts-text h2{
  font-size:clamp(28px, 3.2vw, 40px);
  color:#fff;
  letter-spacing:-.025em;
  font-family:"Manrope", sans-serif;
  font-weight:800;
  margin-bottom:14px;
  line-height:1.08;
}
.contacts-text .wave{
  display:inline-block;
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",emoji;
  animation: wave 3.4s var(--ease-in-out) infinite;
  transform-origin: 70% 70%;
}
@keyframes wave{
  0%,60%,100%{transform:rotate(0)}
  10%{transform:rotate(14deg)}
  20%{transform:rotate(-8deg)}
  30%{transform:rotate(14deg)}
  40%{transform:rotate(-4deg)}
  50%{transform:rotate(10deg)}
}
.contacts-text p{
  color:rgba(233,238,248,.65);
  font-size:14.5px;
  line-height:1.6;
  max-width:34ch;
}

.contacts-buttons{
  display:flex; flex-direction:column;
  gap:10px;
}
.contact-pill{
  display:flex; align-items:center; gap:14px;
  padding:13px 14px 13px 18px;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.10);
  border-radius:999px;
  color:#fff;
  font-size:15px; font-weight:500;
  font-family:"Inter", sans-serif;
  transition: background .28s var(--ease-out), border-color .28s var(--ease-out), transform .28s var(--ease-out);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.contact-pill:hover{
  background:rgba(91,130,255,.12);
  border-color:rgba(91,130,255,.40);
  transform:translateY(-2px);
}
.contact-pill-ico{
  width:36px; height:36px;
  border-radius:50%;
  background:rgba(91,130,255,.32);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  color:#fff;
  transition: background .28s, color .28s;
}
.contact-pill-ico .ic{font-size:17px; color:inherit}
.contact-pill:hover .contact-pill-ico{
  background:#5B82FF;
  color:#fff;
}
.contact-pill-label{
  font-variant-numeric: tabular-nums;
}
.contact-pill-arrow{
  margin-left:auto;
  width:34px; height:34px;
  border-radius:50%;
  background:rgba(255,255,255,.10);
  display:flex; align-items:center; justify-content:center;
  color:#fff;
  transition: transform .28s, background .28s, color .28s;
  flex-shrink:0;
}
.contact-pill-arrow .ic{font-size:14px; color:inherit}
.contact-pill:hover .contact-pill-arrow{
  background:rgba(255,255,255,.22);
  color:#fff;
  transform:translateX(3px);
}

/* иллюстрация: космонавт + ракета + рукописная подпись */
.contacts-illust{
  position:relative;
  width:100%;
  display:flex; align-items:center; justify-content:center;
  min-height:200px;
}
.contacts-illust .astronaut{
  width:140px; height:auto;
  color:rgba(255,255,255,.55);
  filter: drop-shadow(0 4px 20px rgba(91,130,255,.30));
  animation: astro-float 6s var(--ease-in-out) infinite;
}
@keyframes astro-float{
  0%,100%{transform:translateY(0) rotate(-2deg)}
  50%{transform:translateY(-8px) rotate(2deg)}
}
.contacts-signature{
  position:absolute;
  top:-8%; right:-6%;
  font-family:"Caveat","Comic Sans MS",cursive;
  font-size:18px; line-height:1.15;
  color:rgba(255,255,255,.78);
  transform: rotate(-4deg);
  text-align:left;
  white-space:nowrap;
  z-index:2;
  text-shadow:0 2px 12px rgba(11,16,36,.5);
}
.contacts-signature .heart{
  display:inline-block;
  color:#FF8FB2;
  margin-left:3px;
}

/* ---------- vacancies ---------- */
.vac-shell{
  max-width:880px; margin:0 auto;
  padding:160px var(--gutter) 80px;
}
.vac-list{display:flex; flex-direction:column; gap:18px}
.vac-card{
  display:block;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:28px 32px; box-shadow:var(--shadow-sm);
  transition:.2s ease;
}
.vac-card:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-md);
  border-color:var(--line-strong);
}
.vac-meta{
  display:flex; gap:10px; flex-wrap:wrap; align-items:center;
  font-size:13px; color:var(--muted);
  margin-bottom:12px;
}
.vac-meta .dot{
  width:3px; height:3px; border-radius:50%;
  background:var(--muted-2); display:inline-block;
}
.vac-title{
  font-size:24px; font-weight:800; color:var(--ink);
  letter-spacing:-.01em; margin-bottom:8px;
}
.vac-card:hover .vac-title{color:var(--brand-600)}
.vac-lead{font-size:15.5px; color:var(--muted); line-height:1.6}
.vac-foot{
  display:flex; align-items:center; gap:14px;
  margin-top:16px; font-size:13.5px;
}

.vac-section{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:32px 36px; box-shadow:var(--shadow-sm);
  margin-bottom:18px;
}
.vac-section h2{
  font-size:20px; font-weight:800; color:var(--ink);
  margin-bottom:14px; letter-spacing:-.005em;
}
.vac-section ul{padding-left:22px; margin:8px 0; color:var(--ink-soft)}
.vac-section li{margin:8px 0; line-height:1.65}
.vac-section p{font-size:16px; color:var(--ink-soft); line-height:1.65; margin:8px 0}
.vac-section strong{color:var(--ink)}
.vac-section a{color:var(--brand-600); border-bottom:1px solid var(--brand-100)}
.vac-section a:hover{border-bottom-color:var(--brand)}

.vac-cta-block{
  background:var(--grad-brand);
  color:#fff; border-radius:var(--radius-lg);
  padding:44px 36px; text-align:center;
  margin-top:24px;
  position:relative; overflow:hidden;
}
.vac-cta-block h2{
  font-size:26px; color:#fff;
  margin-bottom:10px; letter-spacing:-.01em;
}
.vac-cta-block p{
  color:rgba(255,255,255,.88);
  margin-bottom:24px; font-size:16px;
  max-width:480px; margin-left:auto; margin-right:auto;
}
.vac-cta-buttons{
  display:flex; gap:10px; justify-content:center; flex-wrap:wrap;
}
.vac-cta-buttons .btn{
  background:#fff; color:var(--brand-600);
}
.vac-cta-buttons .btn:hover{background:var(--paper-2); color:var(--brand-700)}
.vac-cta-buttons .btn-secondary{
  background:rgba(255,255,255,.12); color:#fff;
  border:1px solid rgba(255,255,255,.25);
}
.vac-cta-buttons .btn-secondary:hover{background:rgba(255,255,255,.22); color:#fff}

@media (max-width:600px){
  .vac-card{padding:22px}
  .vac-title{font-size:20px}
  .vac-section{padding:24px 22px}
  .vac-cta-block{padding:32px 24px}
}

/* ---------- адаптив для лендинга ---------- */
@media (max-width:1000px){
  .hero{padding:140px 0 64px}
  .hero-wrap{grid-template-columns:1fr; gap:36px}
  .hero-photo-wrap{order:-1; max-width:340px; margin:0 auto; padding:8px}
  .float-badge.fb-1{top:0; left:-12px}
  .float-badge.fb-2{top:50%; right:-16px}
  .float-badge.fb-3{bottom:-8px; left:0}
  .projects{
    grid-template-columns:1fr 1fr;
  }
  .proj-big{grid-row:auto; grid-column:1 / -1}
  .proj-big::after{display:none}
  .creative{grid-template-columns:1fr}
  .contacts-inner{
    grid-template-columns:1fr;
    gap:32px; text-align:left;
  }
  .contacts-illust{order:-1; min-height:180px}
  .contacts-illust .astronaut{width:120px}
  .contacts-signature{
    top:auto; bottom:0; right:50%;
    transform:translateX(50%) rotate(-2deg);
  }
  .contacts{padding:40px 32px}
}
@media (max-width:720px){
  .hero{padding-top:140px}
  .shell, .vac-shell, .article-shell{padding-top:130px}
  .topbar{
    top:10px;
    left:8px; right:8px;
    transform:none;
    max-width:none; width:auto;
  }
  .topbar-wrap{
    display:flex; width:100%;
    justify-content:space-between;
    gap:10px;
    padding:8px 8px 8px 12px;
    border-radius:22px;
  }
  .brand{
    flex:1 1 auto; min-width:0;
  }
  .brand-text{min-width:0; flex:1 1 auto; overflow:hidden}
  .brand-name,
  .brand-meta{
    overflow:hidden; text-overflow:ellipsis;
    white-space:nowrap;
  }
  .brand-meta{
    white-space:normal;
    overflow:hidden;
  }
  .brand-meta-track > span{
    overflow:hidden; text-overflow:ellipsis;
  }
  .brand-avatar{width:40px; height:40px; flex-shrink:0}
  .brand-name{font-size:14px}
  .brand-meta{font-size:11.5px}
  .theme-toggle{width:38px; height:38px}
  .theme-toggle .ic{font-size:17px}
  /* меню → бургер */
  .menu-toggle{display:flex; width:38px; height:38px; border-radius:50%}
  .topnav{
    position:absolute;
    top:calc(100% + 10px); right:0;
    background:rgba(255,255,255,.92);
    backdrop-filter:blur(24px) saturate(180%);
    -webkit-backdrop-filter:blur(24px) saturate(180%);
    border:1px solid rgba(255,255,255,.7);
    box-shadow:
      0 4px 12px rgba(16,24,40,.06),
      0 24px 48px -16px rgba(16,24,40,.16);
    border-radius:18px;
    padding:6px;
    flex-direction:column;
    align-items:stretch;
    gap:2px;
    min-width:180px;
    opacity:0; transform:translateY(-8px) scale(.96);
    pointer-events:none;
    transition:opacity .22s var(--ease-out), transform .22s var(--ease-out);
  }
  .topbar.menu-open .topnav{
    opacity:1; transform:translateY(0) scale(1);
    pointer-events:auto;
  }
  .topnav a{
    padding:10px 14px; font-size:14.5px;
    text-align:left; border-radius:10px;
  }
  .topnav a:hover{background:var(--paper)}
  .topnav a.is-active::after{display:none}
  .topnav a.is-active{
    background:var(--brand-100); color:var(--brand-600);
  }
  [data-theme="dark"] .topnav{
    background:rgba(22,27,42,.92);
    border-color:var(--line);
  }
  .section{padding:48px 0}
  /* hero photo на мобиле — поменьше и квадратнее */
  .hero-photo-wrap{max-width:280px; padding:6px}
  .hero-photo{aspect-ratio:1/1; border-radius:22px}
  .hero-title{font-size:clamp(40px, 11vw, 56px)}
  .hero-lead{font-size:17px}
  .hero-photo-wrap::before{filter:blur(50px); opacity:.3}
  /* мобильные стикеры — компактнее, не цепляются за края */
  .float-badge{font-size:12.5px; padding:8px 12px}
  .float-badge.fb-1{
    top:auto; bottom:-8px; left:-6px; right:auto;
    max-width:160px; font-size:12px;
    padding:10px 12px;
  }
  .float-badge.fb-2{top:8%; right:-6px}
  .float-badge.fb-3{bottom:auto; top:46%; left:-6px}

  .projects{grid-template-columns:1fr; gap:14px}
  .proj-img{aspect-ratio:16/10}
  .proj-big .proj-img{aspect-ratio:16/10}
  .proj-big .proj-body{padding:22px}
  .proj-big .proj-name{font-size:22px}
  .proj-name{font-size:18px}

  .cr-card.row{flex-direction:column}
  .cr-card.row img{width:100%; aspect-ratio: 16/9}
  .cr-img-big{aspect-ratio:16/10}
  .cr-card-body{padding:20px 22px}
  .cr-card h3{font-size:17px}
  .cr-quote{font-size:15px; padding-left:12px}

  .vibe{
    grid-template-columns:1fr;
    text-align:center;
    padding:28px 22px;
    gap:18px;
  }
  .vibe-photo{margin:0 auto; width:110px; height:110px}
  .vibe-photo img{width:110px; height:110px}
  .vibe h3{font-size:19px}

  .bg-strip{
    grid-template-columns:auto 1fr;
    text-align:left;
    padding:20px;
    gap:18px;
  }
  .bg-strip-icon{width:60px; height:60px}
  .bg-strip-icon .ic{font-size:54px}

  .contacts{padding:32px 22px; border-radius:20px}
  .contacts-inner{gap:24px}
  .contacts-text h2{font-size:clamp(24px, 8vw, 32px)}
  .contacts-illust .astronaut{width:110px}
  .contacts-signature{font-size:16px}
  .contact-pill{padding:11px 12px 11px 14px; font-size:14px}
  .contact-pill-ico{width:32px; height:32px}
  .contact-pill-ico .ic{font-size:15px}
  .contact-pill-arrow{width:30px; height:30px}

  /* article cover */
  .article-cover{margin-bottom:24px}
  .article-cover img{aspect-ratio:5/4}

  .hero-handwritten{flex-wrap:wrap; gap:10px; margin-top:32px}
  .hw-text{font-size:20px}
  .hw-arrow{width:70px; height:80px; transform:translateY(-8px)}
  .hw-paw{margin-top:36px}

  .deco-dots{width:80px; height:80px; top:8px; right:8px}
}