@font-face{font-family:'TT Ontico';src:url('../fonts/tt-ontico-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'TT Ontico';src:url('../fonts/tt-ontico-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'TT Ontico';src:url('../fonts/tt-ontico-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'TT Ontico';src:url('../fonts/tt-ontico-900.woff2') format('woff2');font-weight:900;font-style:normal;font-display:swap}

:root{
  /* ===== ФИРСТИЛЬ DevRelConf (считан с логотипа #8 и файла-подсказки #6) ===== */
  --brand-primary:#D33B95;      /* фирменный розовый: заливки, рамки, декор, крупный текст */
  --brand-text:#C2368A;         /* тот же розовый на 8% глубже — только для МЕЛКОГО текста (AA 5.0:1) */
  --brand-veil:rgba(12,1,18,.16); /* полупрозрачная подложка поверх розового под белый текст (5.7:1) */
  --brand-yellow:#FFF200;
  --ink:#0C0112;

  /* ===== НЕЙТРАЛЫ ДС ===== */
  --gray-50:#FAFAFB;  --gray-100:#F6F5F8; --gray-200:#E4E3E5; --gray-300:#CAC9CC;
  --gray-400:#AEAEB2; --gray-500:#818184; --gray-600:#6B6B6E; --gray-700:#4D4D4F;
  --gray-800:#333333; --gray-900:#1D1D1D; --gray-950:#0F0F10;

  /* ===== СЕМАНТИКА ===== */
  --color-bg-default:#FFFFFF;
  --color-bg-subtle:var(--gray-50);
  --color-bg-muted:var(--gray-100);
  --color-bg-inverse:var(--ink);
  --color-text-primary:var(--ink);
  --color-text-secondary:var(--gray-700);
  --color-text-muted:var(--gray-600);
  --color-text-inverse:#FFFFFF;
  --color-text-on-brand:#FFFFFF;
  --color-border-subtle:var(--gray-200);
  --color-border-default:var(--gray-300);

  /* ===== ОТСТУПЫ (fluid, якоря из шкалы ДС) ===== */
  --space-inset-xs:8px; --space-inset-sm:12px; --space-inset-md:16px;
  --space-stack-xs:4px; --space-stack-sm:8px;
  --space-inset-lg:clamp(20px, calc(20px + (100vw - 480px) * (24 - 20) / (800 - 480)), 24px);
  --space-inset-xl:clamp(24px, calc(24px + (100vw - 480px) * (32 - 24) / (800 - 480)), 32px);
  --space-inset-section:clamp(48px, calc(48px + (100vw - 480px) * (64 - 48) / (800 - 480)), 64px);
  --space-stack-md:clamp(12px, calc(12px + (100vw - 480px) * (16 - 12) / (800 - 480)), 16px);
  --space-stack-base:16px;
  --space-stack-lg:clamp(20px, calc(20px + (100vw - 480px) * (24 - 20) / (800 - 480)), 24px);
  --space-stack-xl:clamp(32px, calc(32px + (100vw - 480px) * (40 - 32) / (800 - 480)), 40px);
  --space-grid-sm:clamp(12px, calc(12px + (100vw - 480px) * (16 - 12) / (800 - 480)), 16px);
  --space-grid-md:16px;
  --space-grid-lg:clamp(20px, calc(20px + (100vw - 480px) * (24 - 20) / (800 - 480)), 24px);
  --space-section-sm:32px;
  --space-section-md:clamp(48px, calc(48px + (100vw - 480px) * (64 - 48) / (800 - 480)), 64px);
  --space-section-lg:clamp(64px, calc(64px + (100vw - 480px) * (96 - 64) / (800 - 480)), 96px);

  --sticky-offset:80px;   /* компенсация липкой шапки для якорей; якорь шкалы */
  --shadow-s:0 0 2px rgba(35,39,53,.08), 0 4px 6px rgba(35,39,53,.06);
  --shadow-m:0 0 2px rgba(35,39,53,.08), 0 14px 18px rgba(35,39,53,.08);
}

@media (min-width:800px){
  :root{
    --space-inset-section:clamp(64px, calc(64px + (100vw - 800px) * (80 - 64) / (1500 - 800)), 80px);
    --space-stack-base:clamp(16px, calc(16px + (100vw - 800px) * (20 - 16) / (1500 - 800)), 20px);
    --space-stack-lg:clamp(24px, calc(24px + (100vw - 800px) * (32 - 24) / (1500 - 800)), 32px);
    --space-stack-xl:clamp(40px, calc(40px + (100vw - 800px) * (48 - 40) / (1500 - 800)), 48px);
    --space-grid-md:clamp(16px, calc(16px + (100vw - 800px) * (24 - 16) / (1500 - 800)), 24px);
    --space-grid-lg:clamp(24px, calc(24px + (100vw - 800px) * (32 - 24) / (1500 - 800)), 32px);
    --space-section-sm:clamp(32px, calc(32px + (100vw - 800px) * (48 - 32) / (1500 - 800)), 48px);
    --space-section-md:clamp(64px, calc(64px + (100vw - 800px) * (80 - 64) / (1500 - 800)), 80px);
    --space-section-lg:clamp(96px, calc(96px + (100vw - 800px) * (128 - 96) / (1500 - 800)), 128px);
  }
}

/* ===== ТИПОГРАФИКА ДС ===== */
.display-1{font-weight:900;font-size:clamp(40px, calc(40px + (100vw - 480px) * (64 - 40) / (800 - 480)), 64px);line-height:clamp(48px, calc(48px + (100vw - 480px) * (72 - 48) / (800 - 480)), 72px);letter-spacing:-2.88px}
.display-2{font-weight:900;font-size:40px;line-height:48px;letter-spacing:0}
.display-3{font-weight:600;font-size:32px;line-height:40px;letter-spacing:-1.68px}
.display-4{font-weight:600;font-size:22px;line-height:24px;letter-spacing:clamp(-0.66px, calc(-0.6px + (100vw - 480px) * (-0.66 - -0.6) / (800 - 480)), -0.6px)}
.display-5{font-weight:600;font-size:clamp(24px, calc(24px + (100vw - 480px) * (26 - 24) / (800 - 480)), 26px);line-height:clamp(26px, calc(26px + (100vw - 480px) * (28 - 26) / (800 - 480)), 28px);letter-spacing:clamp(-0.78px, calc(-0.72px + (100vw - 480px) * (-0.78 - -0.72) / (800 - 480)), -0.72px)}
@media (min-width:800px){
  .display-1{font-size:clamp(64px, calc(64px + (100vw - 800px) * (96 - 64) / (1500 - 800)), 96px);line-height:clamp(72px, calc(72px + (100vw - 800px) * (104 - 72) / (1500 - 800)), 104px)}
  .display-2{font-size:clamp(40px, calc(40px + (100vw - 800px) * (64 - 40) / (1500 - 800)), 64px);line-height:clamp(48px, calc(48px + (100vw - 800px) * (72 - 48) / (1500 - 800)), 72px)}
  .display-3{font-size:clamp(32px, calc(32px + (100vw - 800px) * (56 - 32) / (1500 - 800)), 56px);line-height:clamp(40px, calc(40px + (100vw - 800px) * (64 - 40) / (1500 - 800)), 64px)}
  .display-4{font-size:clamp(22px, calc(22px + (100vw - 800px) * (40 - 22) / (1500 - 800)), 40px);line-height:clamp(24px, calc(24px + (100vw - 800px) * (44 - 24) / (1500 - 800)), 44px);letter-spacing:clamp(-1.2px, calc(-0.66px + (100vw - 800px) * (-1.2 - -0.66) / (1500 - 800)), -0.66px)}
  .display-5{font-size:clamp(26px, calc(26px + (100vw - 800px) * (32 - 26) / (1500 - 800)), 32px);line-height:clamp(28px, calc(28px + (100vw - 800px) * (34 - 28) / (1500 - 800)), 34px);letter-spacing:clamp(-0.96px, calc(-0.78px + (100vw - 800px) * (-0.96 - -0.78) / (1500 - 800)), -0.78px)}
}
.h1-xl{font-weight:600;font-size:clamp(32px, calc(32px + (100vw - 480px) * (58 - 32) / (800 - 480)), 58px);line-height:clamp(34px, calc(34px + (100vw - 480px) * (60 - 34) / (800 - 480)), 60px);letter-spacing:clamp(-2px, calc(-1.28px + (100vw - 480px) * (-2 - -1.28) / (800 - 480)), -1.28px)}
.h1{font-weight:600;font-size:clamp(28px, calc(28px + (100vw - 480px) * (34 - 28) / (800 - 480)), 34px);line-height:clamp(30px, calc(30px + (100vw - 480px) * (36 - 30) / (800 - 480)), 36px);letter-spacing:clamp(-1.02px, calc(-0.84px + (100vw - 480px) * (-1.02 - -0.84) / (800 - 480)), -0.84px)}
.h2{font-weight:600;text-transform:uppercase;font-size:12px;line-height:14px;letter-spacing:clamp(0.5px, calc(0.5px + (100vw - 480px) * (1 - 0.5) / (800 - 480)), 1px)}
.h3{font-weight:600;font-size:clamp(24px, calc(24px + (100vw - 480px) * (26 - 24) / (800 - 480)), 26px);line-height:clamp(26px, calc(26px + (100vw - 480px) * (28 - 26) / (800 - 480)), 28px);letter-spacing:clamp(-0.78px, calc(-0.72px + (100vw - 480px) * (-0.78 - -0.72) / (800 - 480)), -0.72px)}
.h4{font-weight:600;font-size:clamp(20px, calc(20px + (100vw - 480px) * (22 - 20) / (800 - 480)), 22px);line-height:clamp(22px, calc(22px + (100vw - 480px) * (24 - 22) / (800 - 480)), 24px);letter-spacing:clamp(-0.66px, calc(-0.6px + (100vw - 480px) * (-0.66 - -0.6) / (800 - 480)), -0.6px)}
@media (min-width:800px){
  .h1-xl{font-size:clamp(58px, calc(58px + (100vw - 800px) * (84 - 58) / (1500 - 800)), 84px);line-height:clamp(60px, calc(60px + (100vw - 800px) * (86 - 60) / (1500 - 800)), 86px);letter-spacing:clamp(-2.52px, calc(-2px + (100vw - 800px) * (-2.52 - -2) / (1500 - 800)), -2px)}
  .h1{font-size:clamp(34px, calc(34px + (100vw - 800px) * (48 - 34) / (1500 - 800)), 48px);line-height:clamp(36px, calc(36px + (100vw - 800px) * (50 - 36) / (1500 - 800)), 50px);letter-spacing:clamp(-1.44px, calc(-1.02px + (100vw - 800px) * (-1.44 - -1.02) / (1500 - 800)), -1.02px)}
  .h2{font-size:clamp(12px, calc(12px + (100vw - 800px) * (14 - 12) / (1500 - 800)), 14px);line-height:clamp(14px, calc(14px + (100vw - 800px) * (16 - 14) / (1500 - 800)), 16px);letter-spacing:1px}
  .h3{font-size:clamp(26px, calc(26px + (100vw - 800px) * (32 - 26) / (1500 - 800)), 32px);line-height:clamp(28px, calc(28px + (100vw - 800px) * (34 - 28) / (1500 - 800)), 34px);letter-spacing:clamp(-0.96px, calc(-0.78px + (100vw - 800px) * (-0.96 - -0.78) / (1500 - 800)), -0.78px)}
  .h4{font-size:clamp(22px, calc(22px + (100vw - 800px) * (24 - 22) / (1500 - 800)), 24px);line-height:clamp(24px, calc(24px + (100vw - 800px) * (26 - 24) / (1500 - 800)), 26px);letter-spacing:clamp(-0.72px, calc(-0.66px + (100vw - 800px) * (-0.72 - -0.66) / (1500 - 800)), -0.66px)}
}
.h5{font-weight:600;font-size:16px;line-height:18px;letter-spacing:-0.48px}
.h6{font-weight:600;font-size:14px;line-height:16px;letter-spacing:-0.42px}
.subtitle-1{font-weight:500;font-size:clamp(16px, calc(16px + (100vw - 480px) * (20 - 16) / (800 - 480)), 20px);line-height:clamp(18px, calc(18px + (100vw - 480px) * (24 - 18) / (800 - 480)), 24px);letter-spacing:clamp(-0.54px, calc(-0.48px + (100vw - 480px) * (-0.54 - -0.48) / (800 - 480)), -0.48px)}
.subtitle-2{font-weight:500;font-size:clamp(14px, calc(14px + (100vw - 480px) * (16 - 14) / (800 - 480)), 16px);line-height:clamp(16px, calc(16px + (100vw - 480px) * (18 - 16) / (800 - 480)), 18px);letter-spacing:clamp(-0.48px, calc(-0.42px + (100vw - 480px) * (-0.48 - -0.42) / (800 - 480)), -0.42px)}
@media (min-width:800px){
  .subtitle-1{font-size:20px;line-height:24px;letter-spacing:clamp(-0.6px, calc(-0.54px + (100vw - 800px) * (-0.6 - -0.54) / (1500 - 800)), -0.54px)}
  .subtitle-2{font-size:16px;line-height:18px;letter-spacing:-0.48px}
}
.body-1{font-weight:400;font-size:clamp(14px, calc(14px + (100vw - 480px) * (16 - 14) / (800 - 480)), 16px);line-height:clamp(20px, calc(20px + (100vw - 480px) * (22 - 20) / (800 - 480)), 22px)}
.body-2{font-weight:400;font-size:clamp(12px, calc(12px + (100vw - 480px) * (14 - 12) / (800 - 480)), 14px);line-height:clamp(14px, calc(14px + (100vw - 480px) * (18 - 14) / (800 - 480)), 18px)}
@media (min-width:800px){
  .body-1{font-size:16px;line-height:22px}
  .body-2{font-size:14px;line-height:18px}
}
.caption-1{font-weight:600;font-size:14px;line-height:18px}
.caption-2{font-weight:600;font-size:12px;line-height:14px}
.overline{font-weight:600;font-size:12px;line-height:12px;text-transform:uppercase}
.button-1{font-weight:600;font-size:16px;line-height:24px}
.button-2{font-weight:600;font-size:12px;line-height:16px}

/* ===== БАЗА ===== */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'TT Ontico','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  background:var(--color-bg-default);color:var(--color-text-primary);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
.wrap{width:100%;max-width:1280px;margin:0 auto;padding-inline:var(--space-inset-lg)}
section[id],main[id]{scroll-margin-top:var(--sticky-offset)}
section{padding-block:var(--space-section-md)}
a{color:inherit}

/* фактура: зерно поверх тёмных плоскостей — документальность, не глянец */
.grain::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.28;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* ===== КНОПКИ (pill, одна форма на всю страницу) ===== */
.btn{
  display:inline-flex;align-items:center;gap:var(--space-inset-xs);
  border-radius:999px;border:1.5px solid transparent;cursor:pointer;text-decoration:none;
  padding:var(--space-inset-md) var(--space-inset-xl);
  transition:transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease;
}
.btn--primary{background:linear-gradient(var(--brand-veil),var(--brand-veil)),var(--brand-primary);color:var(--color-text-on-brand);box-shadow:var(--shadow-s)}
.btn--primary:hover{transform:translateY(-2px);box-shadow:var(--shadow-m)}
.btn--ghost{background:transparent;color:var(--color-text-primary);border-color:var(--color-border-default)}
.btn--ghost:hover{border-color:var(--brand-primary);color:var(--brand-text)}
.btn--on-dark{background:transparent;color:var(--color-text-inverse);border-color:rgba(255,255,255,.30)}
.btn--on-dark:hover{background:var(--color-bg-default);color:var(--ink);border-color:var(--color-bg-default)}
.btn:focus-visible{outline:3px solid var(--brand-primary);outline-offset:3px}

/* ===== ХЕДЕР ===== */
.hdr{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);border-bottom:1px solid var(--color-border-subtle);backdrop-filter:blur(8px)}
.hdr__in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-inset-sm);padding-block:var(--space-inset-sm)}
.hdr__cta{flex:1 1 100%;justify-content:stretch}
.hdr__cta .btn{flex:1 1 0;justify-content:center}
@media (min-width:800px){.hdr__in{gap:var(--space-inset-md)}
  .nav{flex:1 1 auto}
  /* margin-left:auto держит блок кнопок у правого края и тогда, когда он
     переносится на свою строку: без него одинокая строка прижимается влево */
  .hdr__cta{flex:0 1 auto;justify-content:flex-end;margin-left:auto}
  .hdr__cta .btn{flex:0 0 auto}}
.hdr__logo{display:flex;align-items:center;height:48px;flex-shrink:0}
.hdr__logo svg{height:48px;width:auto;display:block}
.hdr__cta{display:flex;align-items:center;gap:var(--space-inset-sm);flex-shrink:0}
.hdr__cta .btn{padding:var(--space-inset-sm) var(--space-inset-md);white-space:nowrap}
.hdr__lk{display:none;align-items:center;gap:var(--space-stack-sm);text-decoration:none;color:var(--color-text-primary);white-space:nowrap}
.hdr__lk:hover{color:var(--brand-text)}
@media (min-width:800px){.hdr__lk{display:inline-flex}}
.nav{display:none;align-items:center;gap:var(--space-inset-md)}
.nav a{text-decoration:none;color:var(--color-text-secondary);transition:color .2s ease;white-space:nowrap}
.nav a:hover{color:var(--brand-text)}
/* MD для агента: угол первого экрана, а не пункт липкого меню — нужна
   краулерам и тем, кто ищет её специально, но не при каждом скролле */
.hero .md-agent{position:absolute;top:var(--space-inset-lg);right:var(--space-inset-lg);z-index:3;
  text-decoration:none;color:rgba(255,255,255,.70);border:1px solid rgba(255,255,255,.25);
  border-radius:999px;padding:var(--space-stack-xs) var(--space-inset-sm);
  font-weight:600;font-size:12px;line-height:16px;transition:all .2s ease}
.hero .md-agent:hover{color:var(--color-text-inverse);border-color:var(--brand-yellow)}
.foot__links .md-agent{border:1px solid var(--color-border-default);border-radius:999px;padding:var(--space-stack-xs) var(--space-inset-sm)}
@media (min-width:800px){.nav{display:flex}}

/* ===== HERO ===== */
.hero{position:relative;background:var(--ink);color:var(--color-text-inverse);overflow:hidden;padding-block:var(--space-section-lg)}
.hero__grid{display:grid;grid-template-columns:1fr;gap:var(--space-stack-xl);position:relative;z-index:2}
@media (min-width:800px){.hero__grid{grid-template-columns:1.35fr .65fr;align-items:end}}
.hero__badge{display:inline-flex;align-items:center;gap:var(--space-inset-xs);border:1.5px solid var(--brand-yellow);color:var(--brand-yellow);border-radius:999px;padding:var(--space-inset-xs) var(--space-inset-md);width:fit-content}
.hero__title{margin-block:var(--space-stack-lg);max-width:16ch}
.hero__meta{display:flex;flex-wrap:wrap;gap:var(--space-inset-md);margin-bottom:var(--space-stack-lg)}
.hero__meta span{display:inline-flex;align-items:center;gap:var(--space-stack-xs);background:rgba(255,255,255,.10);border-radius:999px;padding:var(--space-inset-xs) var(--space-inset-md)}
.hero__lead{color:rgba(255,255,255,.85);max-width:46ch;margin-bottom:var(--space-stack-xl)}
.hero__cta{display:flex;flex-wrap:wrap;gap:var(--space-inset-md)}
/* статы — юбилей как факт, а не конфетти */
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-grid-md)}
@media (min-width:800px){.stats{grid-template-columns:1fr}}
.stat{border:1px solid rgba(255,255,255,.20);border-radius:16px;padding:var(--space-inset-lg)}
.stat__n{color:var(--brand-yellow);display:block}
.stat__t{color:rgba(255,255,255,.70);margin-top:var(--space-stack-xs)}

/* ===== ЗАГОЛОВКИ СЕКЦИЙ ===== */
.sec-head{max-width:60ch;margin-bottom:var(--space-stack-xl)}
.sec-head .h2{color:var(--brand-text);margin-bottom:var(--space-stack-md)}
.sec-head .lead{color:var(--color-text-secondary);margin-top:var(--space-stack-base)}
/* Слоган, который обязан жить в одну строку на любой ширине (просьба владельца).
   Осознанное отступление от фиксированных якорей ДС: размер = меньшее из штатного
   размера display-4 и доли ширины экрана, чтобы строка не переносилась и не вылезала. */
.oneline{white-space:nowrap;font-size:min(22px,3.9vw)}
/* колонка секции ограничена 60ch — для однострочного слогана снимаем лимит,
   иначе на широких экранах строка выходит за край колонки */
.sec-head:has(.oneline){max-width:none}
@media (min-width:800px){.oneline{font-size:min(clamp(22px, calc(22px + (100vw - 800px) * (40 - 22) / (1500 - 800)), 40px),5vw)}}

/* ===== МАНИФЕСТ (inverse) ===== */
.manifest{position:relative;background:var(--color-bg-default);color:var(--color-text-primary);overflow:hidden}
.manifest .h2{color:var(--brand-text)}
.manifest__quote{max-width:22ch;margin-block:var(--space-stack-lg)}
.manifest__quote em{font-style:normal;color:var(--brand-primary)}
.manifest__cols{display:grid;grid-template-columns:1fr;gap:var(--space-grid-lg);margin-top:var(--space-stack-xl);position:relative;z-index:2}
@media (min-width:800px){.manifest__cols{grid-template-columns:repeat(2,1fr)}}
.manifest__col p{color:var(--color-text-secondary)}
.manifest__col .h4{margin-bottom:var(--space-stack-md);color:var(--color-text-primary)}

/* ===== СПИСОК «ПОЛЕЗНА, ЕСЛИ ВЫ» ===== */
.roles{display:grid;grid-template-columns:1fr;gap:var(--space-grid-md)}
@media (min-width:800px){.roles{grid-template-columns:repeat(2,1fr)}}
.role{display:flex;gap:var(--space-inset-md);border:1px solid var(--color-border-subtle);border-radius:16px;padding:var(--space-inset-lg);background:var(--color-bg-default);transition:border-color .2s ease, transform .2s ease}
.role:hover{border-color:var(--brand-primary);transform:translateY(-2px)}
.role__n{color:var(--brand-primary);flex-shrink:0;line-height:1}
.roles__after{color:var(--color-text-secondary);margin-top:var(--space-stack-lg);max-width:60ch}
.role p{color:var(--color-text-secondary);margin-top:var(--space-stack-xs)}

/* ===== ТРИ ВЕДРА — карточки lg, акцентные ===== */
.buckets{display:grid;grid-template-columns:1fr;gap:var(--space-grid-lg)}
@media (min-width:800px){.buckets{grid-template-columns:repeat(3,1fr)}}
.bucket{border-radius:20px;padding:var(--space-inset-xl);border:1px solid var(--color-border-subtle);background:var(--color-bg-subtle);position:relative;overflow:hidden}
.bucket__tag{display:inline-block;border-radius:999px;padding:var(--space-inset-xs) var(--space-inset-md);margin-bottom:var(--space-stack-lg);background:linear-gradient(var(--brand-veil),var(--brand-veil)),var(--brand-primary);color:var(--color-text-inverse)}
.bucket p{color:var(--color-text-secondary);margin-top:var(--space-stack-md)}

/* ===== ТЕМЫ — карточки md, другой тип ===== */
.themes{display:grid;grid-template-columns:1fr;gap:var(--space-grid-md)}
@media (min-width:800px){.themes{grid-template-columns:repeat(3,1fr)}}
.theme{border-left:3px solid var(--brand-primary);padding-left:var(--space-inset-lg);padding-block:var(--space-inset-sm)}
.theme ul{list-style:none;margin-top:var(--space-stack-md)}
.theme li{color:var(--color-text-secondary);padding-left:var(--space-inset-md);position:relative;margin-top:var(--space-stack-sm)}
.theme li::before{content:"—";position:absolute;left:0;color:var(--brand-primary)}

/* ===== CFP — акцентная плашка ===== */
.cfp{background:var(--color-bg-default);color:var(--color-text-primary);border:2px solid var(--brand-primary);border-radius:24px;padding:var(--space-inset-section);position:relative;overflow:hidden}
.cfp .h2{color:var(--brand-text)}
.cfp__grid{display:grid;grid-template-columns:1fr;gap:var(--space-stack-xl);position:relative;z-index:2}
@media (min-width:800px){.cfp__grid{grid-template-columns:1.2fr .8fr;align-items:center}}
.cfp__rules{list-style:none}
.cfp__rules li{display:flex;gap:var(--space-inset-sm);padding-block:var(--space-inset-sm);border-bottom:1px solid var(--color-border-subtle);color:var(--color-text-secondary)}
.cfp__rules li:last-child{border-bottom:0}
.cfp__rules b{flex-shrink:0;min-width:11ch}
.cfp__deadline{background:var(--brand-yellow);color:var(--ink);border:1px solid var(--ink);border-radius:16px;padding:var(--space-inset-lg);margin-bottom:var(--space-stack-lg);display:inline-block}

/* ===== ТОТАЛИЗАТОР (inverse) ===== */
.bet{position:relative;background:var(--ink);color:var(--color-text-inverse);overflow:hidden}
.bet .h2{color:var(--brand-yellow)}
.bet__grid{display:grid;grid-template-columns:1fr;gap:var(--space-grid-lg);position:relative;z-index:2}
@media (min-width:800px){.bet__grid{grid-template-columns:1fr 1fr;align-items:center}}
.bet__lead{color:rgba(255,255,255,.80);margin-top:var(--space-stack-base)}
.bet__card{border:1.5px dashed rgba(255,255,255,.35);border-radius:20px;padding:var(--space-inset-xl)}
.bet__card p{color:rgba(255,255,255,.75);margin-top:var(--space-stack-md)}
.bet__year{color:var(--brand-yellow)}

/* ===== ПРОГРАММНЫЙ КОМИТЕТ ===== */
.pc{display:grid;grid-template-columns:1fr;gap:var(--space-grid-lg)}
@media (min-width:800px){.pc{grid-template-columns:repeat(4,1fr)}}
.pc__item{text-align:left}
.pc__ph{width:100%;aspect-ratio:1;object-fit:cover;border-radius:16px;border:1px solid var(--color-border-subtle);margin-bottom:var(--space-stack-md);display:block}
.pc__co{color:var(--brand-text);margin-top:var(--space-stack-xs)}
.pc__bio{color:var(--color-text-secondary);margin-top:var(--space-stack-md)}

/* ===== АРХИВ — сетка 3×3 ===== */
.arc-sum{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-grid-md);margin-bottom:var(--space-stack-xl)}
@media (min-width:800px){.arc-sum{grid-template-columns:repeat(4,1fr)}}
.arc-sum__i{border-radius:16px;background:var(--color-bg-muted);padding:var(--space-inset-lg)}
.arc-sum__n{color:var(--brand-primary);display:block}
.arc-sum__t{color:var(--color-text-muted);margin-top:var(--space-stack-xs)}
.archive{display:grid;grid-template-columns:1fr;gap:var(--space-grid-md)}
@media (min-width:800px){.archive{grid-template-columns:repeat(3,1fr)}}
.arc{border:1px solid var(--color-border-subtle);border-radius:16px;overflow:hidden;background:var(--color-bg-default);display:flex;flex-direction:column;transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease}
.arc:hover{transform:translateY(-4px);box-shadow:var(--shadow-m);border-color:var(--brand-primary)}
.arc__ph{position:relative;aspect-ratio:16/9;background:var(--color-bg-muted);border-bottom:1px solid var(--color-border-subtle);display:flex;align-items:flex-end;padding:var(--space-inset-md);color:var(--gray-500);overflow:hidden}
.arc__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* затемнение снизу — иначе номер выпуска тонет в светлом кадре */
.arc__ph--photo::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(12,1,18,.70),rgba(12,1,18,0) 55%)}
.arc__ph--photo .arc__num{position:relative;z-index:2;color:var(--color-text-inverse)}
.arc__num{color:var(--brand-primary)}
.arc__b{padding:var(--space-inset-lg);display:flex;flex-direction:column;flex:1}
.arc__motto{margin-top:var(--space-stack-xs);color:var(--color-text-primary)}
.arc__desc{color:var(--color-text-secondary);margin-top:var(--space-stack-md);flex:1}
.arc__links{display:flex;flex-wrap:wrap;gap:var(--space-stack-sm);margin-top:var(--space-stack-lg)}
.arc__link{text-decoration:none;border:1px solid var(--color-border-default);border-radius:999px;padding:var(--space-inset-xs) var(--space-inset-md);color:var(--color-text-secondary);transition:all .2s ease}
.arc__link:hover{border-color:var(--brand-primary);color:var(--brand-text)}

/* ===== КАК ПОПАСТЬ ===== */
.join{display:grid;grid-template-columns:1fr;gap:var(--space-grid-lg)}
@media (min-width:800px){.join{grid-template-columns:1.1fr .9fr}}
.join__box{border:1px solid var(--color-border-subtle);border-radius:20px;padding:var(--space-inset-xl);background:var(--color-bg-subtle)}
.join__list{list-style:none;margin-top:var(--space-stack-base)}
.join__list li{display:flex;gap:var(--space-inset-sm);color:var(--color-text-secondary);padding-block:var(--space-inset-xs)}
.join__list b{color:var(--color-text-primary)}
.join__note{color:var(--color-text-muted);margin-top:var(--space-stack-lg)}

/* ===== ФУТЕР ===== */
.foot{background:var(--color-bg-muted);padding-block:var(--space-section-md);margin-top:var(--space-section-lg)}
.foot__brand{display:flex;flex-wrap:wrap;gap:var(--space-stack-lg);justify-content:space-between;align-items:center;padding-bottom:var(--space-stack-lg);border-bottom:1px solid var(--color-border-subtle)}
.foot__cols{display:grid;grid-template-columns:1fr;gap:var(--space-grid-lg);padding-block:var(--space-stack-xl)}
@media (min-width:800px){.foot__cols{grid-template-columns:1.2fr .9fr 1fr}}
.foot__col p{margin-top:var(--space-stack-sm);color:var(--color-text-secondary)}
.foot__col a{color:inherit;text-decoration:none;border-bottom:1px solid var(--color-border-default)}
.foot__col a:hover{color:var(--brand-text);border-color:var(--brand-primary)}
.foot__h{margin-bottom:var(--space-stack-md)}
.foot__sub{margin-top:var(--space-stack-lg)}
.foot__gap{margin-top:var(--space-stack-lg)}
.foot__tag{margin-top:var(--space-stack-xl);color:var(--color-text-primary)}
.foot__soc{display:flex;align-items:center;gap:var(--space-inset-md);color:var(--color-text-primary)}
.foot__soc a{border:0;display:inline-flex;align-items:center}
.foot__soc a:hover{color:var(--brand-primary)}
.foot__habr{font-weight:600;font-size:16px;line-height:18px;letter-spacing:-0.48px}
.foot__coc{display:inline-flex;align-items:center;gap:var(--space-inset-sm);margin-top:var(--space-stack-lg);text-decoration:none;color:var(--color-text-primary);border:1px solid var(--color-border-default);border-radius:16px;padding:var(--space-inset-sm) var(--space-inset-md)}
.foot__coc:hover{border-color:var(--brand-primary);color:var(--brand-text)}
.foot__logo svg{height:56px;width:auto;display:block}
.foot__links{display:flex;flex-wrap:wrap;gap:var(--space-inset-lg)}
.foot__links a{color:var(--color-text-secondary);text-decoration:none}
.foot__links a:hover{color:var(--brand-text)}
.foot__legal{color:var(--color-text-muted);margin-top:var(--space-stack-lg)}
.foot__legal a{color:var(--color-text-secondary)}

/* ===== АНИМАЦИИ — только сдержанный reveal ===== */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    /* анимируем КАРТОЧКИ, а не контейнер: у сетки выше вьюпорта фаза entry
       не доходит до конца, и блок навсегда остаётся с opacity:0 */
    .reveal > *{animation:fadeUp linear both;animation-timeline:view();animation-range:entry 0% entry 25%}
  }
  @keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
}

.to-top{position:fixed;right:var(--space-inset-lg);bottom:var(--space-inset-lg);z-index:60;
  width:56px;height:56px;border-radius:999px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:var(--color-bg-default);color:var(--color-text-primary);
  border:1px solid var(--color-border-default);box-shadow:var(--shadow-m);
  opacity:0;pointer-events:none;transform:translateY(8px);transition:opacity .2s ease,transform .2s ease,border-color .2s ease}
.to-top[data-show="1"]{opacity:1;pointer-events:auto;transform:none}
.to-top:hover{border-color:var(--brand-primary);color:var(--brand-text)}
.to-top:focus-visible{outline:3px solid var(--brand-primary);outline-offset:3px}

/* прототипная плашка — на бою удаляется */