/* Шрифты. Файлы в fonts/ (грузятся относительно style.css: /static/fonts/...).
   WOFF (zlib) вместо base64-встраивания: style.css похудел с 1.1 МБ до ~50 КБ,
   браузер качает только реально используемые начертания и кэширует их отдельно. */
@font-face{font-family:'Benzin';src:url("fonts/Benzin-Regular.woff") format("woff");font-weight:400;font-display:swap;}
@font-face{font-family:'Benzin';src:url("fonts/Benzin-Medium.woff") format("woff");font-weight:500;font-display:swap;}
@font-face{font-family:'Benzin';src:url("fonts/Benzin-Semibold.woff") format("woff");font-weight:600;font-display:swap;}
@font-face{font-family:'Benzin';src:url("fonts/Benzin-Bold.woff") format("woff");font-weight:700;font-display:swap;}
@font-face{font-family:'Benzin';src:url("fonts/Benzin-ExtraBold.woff") format("woff");font-weight:800;font-display:swap;}

/*
 * ETC Blog — общий стиль для всех страниц (главная + 14 статей).
 * Шрифты подключены файлами из fonts/ (WOFF), см. @font-face в начале файла.
 *
 * Содержание (начиная со строки 6):
 *   :root, base — переменные цвета/шрифтов, сброс, скроллбар, фон-шум (.grain)
 *   header — шапка, лого, бургер-меню, языковой переключатель
 *   .modal-* — модалка "Отправить бриф"
 *   .marquee — бегущая строка тем под шапкой
 *   .section-title, .hero-* — заголовки секций и hero-блок главной
 *   .filters, .grid, .card — фильтр категорий и карточки статей
 *   .newsletter, footer, .brand-marquee — подписка и футер
 *   .to-top — кнопка "наверх"
 *   .article-hero, .jcover, .jc-* — обложка и шапка страницы статьи (data-icon глифы)
 *   .article-body, .stat-strip, .pullquote, .promo, .sources — тело статьи
 *   @media — адаптивные брейкпоинты (1024 / 860 / 480 / 360px)
 *   @media (prefers-reduced-motion) — анимации и микро-интеракции
 */
:root{
  --bg:#0a0a09;
  --bg-2:#111110;
  --card:#161513;
  --line:#2c2a26;
  --white:#f5f3ee;
  --muted:#a8a49b;
  --orange:#ff4101;
  --orange-2:#ff8b01;
  --font-display:'Benzin','Archivo Black','Inter',sans-serif;
  --font-brush:'Rhythmic','Kalam',cursive;
  --font-body:'Magnet Trial','Inter',-apple-system,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0;}
.pill,.logo-word,.tag,.lang-toggle a,.breadcrumbs,.read-more,.load-more button,.article-meta .tag,.section-title{font-weight:700;}
.article-hero h1,.jc-line1,.jc-line2,.stat b,.newsletter h2{font-weight:800;}
/* скроллбар — 1:1 правила основного сайта. ВАЖНО: scrollbar-color только
   под @supports для Firefox, как у них: если задать его без обёртки,
   Chrome игнорирует -webkit-scrollbar и рисует тонкий системный скролл
   со светлым треком (тот самый микробаг) */
html{scroll-behavior:smooth;}
::-webkit-scrollbar{background:#000;border-radius:0;}
::-webkit-scrollbar-thumb{background-color:#ff7a00;border-radius:0;}
@supports (-moz-appearance:none){
  :root,body{scrollbar-color:#ff7a00 #000;}
}
body{
  background:var(--bg);color:var(--white);font-family:var(--font-body);
  line-height:1.5;-webkit-font-smoothing:antialiased;position:relative;overflow-x:hidden;
  cursor:url("images/cursor.png"),auto; /* фирменный курсор основного сайта */
}
a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;}
.wrap{max-width:1200px;margin:0 auto;padding:0 32px;position:relative;z-index:2;}

/* зерно приглушено (.06 → .035): текст меньше «шакалит», фактура остаётся */
.grain{position:fixed;inset:0;z-index:999;pointer-events:none;opacity:.035;mix-blend-mode:normal;}

.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);}
.reveal.in-view{opacity:1;transform:translateY(0);}

/* header — стили перенесены с основного сайта (web/build/css/main.min.css,
   блок .header/.header__nav/.contact-link/.button): те же blur-фон, паддинги,
   лого 80, капс-меню Benzin 14/600 с градиентным ховером, «свисающая» кнопка */
@keyframes pulsation{0%{transform:scale(1)}20%{transform:scale(1.04)}40%{transform:scale(1)}to{transform:scale(1.02)}}
header{position:sticky;top:0;z-index:50;background:transparent;transition:padding .25s ease;}
/* наверху шапка прозрачна (сливается с фоном страницы — нет «шва» по цвету),
   стеклянный blur-фон появляется только при скролле. Вариант основного
   (height:180% + mask) при sticky мерцал — blur строго в границах шапки */
header::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  /* .72 вместо .55 основного: при скролле контент не «двоится» сквозь стекло */
  background:rgba(6,6,5,.72);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
  opacity:0;transition:opacity .25s ease;}
header.scrolled::before{opacity:1;}
/* браузер без backdrop-filter: вместо стекла — плотный фон, чтобы текст
   страницы не просвечивал сквозь шапку */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  header::before{background:rgba(8,8,7,.96);}
}
/* компоновка как на основном: лого — меню сразу за ним (без дыры) — почта справа,
   кнопка и язык свисают под почтой. Всё в одну строку, ничего не вылезает */
header .wrap{display:flex;align-items:center;gap:56px;padding-top:30px;padding-bottom:30px;transition:padding .25s ease;position:relative;z-index:2;}
header.scrolled .wrap{padding-top:12px;padding-bottom:12px;}
/* логотип: как на основном сайте — вертикально по центру, без сдвигов.
   Позицию у левого края задаёт контейнер шапки (см. @media min-width:1401px). */
.logo{display:flex;align-items:center;gap:14px;flex-shrink:0;}
.logo svg,.logo-mark{height:80px;width:80px;flex-shrink:0;transition:height .25s ease,width .25s ease;}
header.scrolled .logo svg,header.scrolled .logo-mark{height:46px;width:46px;}
/* «ETC AGENCY» — на одной линии с пунктами меню; «Блог» вынесен из потока
   (absolute), чтобы не поднимать основную строку выше пунктов навигации */
.logo-word{font-family:var(--font-display);font-size:15px;letter-spacing:.03em;color:var(--white);line-height:1.1;white-space:nowrap;position:relative;}
.logo-word span{position:absolute;top:100%;left:0;font-size:10px;color:var(--muted);letter-spacing:.12em;margin-top:3px;}
/* разрыв между пунктами меню чуть шире (не так широко, как на основном сайте),
   чтобы шапка не казалась «сдвинутой влево» */
header .desktop-nav{display:flex;gap:56px;align-items:center;flex-wrap:nowrap;min-width:0;justify-content:flex-start;flex-grow:1;}
/* 1:1 с основным: Benzin 14/600 uppercase (без letter-spacing), градиентный ховер */
header .desktop-nav a{font-family:var(--font-display);font-size:14px;font-weight:600;line-height:1.5;text-transform:uppercase;color:var(--white);position:relative;padding:4px 0;white-space:nowrap;flex-shrink:0;
  background-image:linear-gradient(116deg,#ff4301,#ff8701);-webkit-background-clip:text;background-clip:text;transition:color .2s;}
header .desktop-nav a:hover{color:transparent;}
/* активный пункт «Блог» — градиентная пилюля (то же выделение, что в шапке
   основного сайта) */
header .desktop-nav a.active{display:inline-block;padding:6px 15px 4px;border:1px solid #f60;border-radius:20px;color:transparent;}
header .desktop-nav a.active:hover{-webkit-background-clip:border-box;background-clip:border-box;color:#fff;border-color:transparent;}
.header-actions{margin-left:auto;display:flex;align-items:center;gap:16px;position:relative;flex-shrink:0;}
/* кнопка+язык «свисают» под шапкой справа — фирменный приём основного сайта */
.header-attached{position:absolute;right:0;top:calc(100% + 15px);display:flex;flex-direction:column;gap:15px;align-items:flex-end;min-width:100%;}
/* почта = .contact-link основного: градиентный капс с градиентным подчёркиванием */
.mail-link{font-family:var(--font-display);font-size:14px;font-weight:600;line-height:1.5;text-transform:uppercase;white-space:nowrap;position:relative;
  background-image:linear-gradient(90deg,#ff4301,#ff8701);-webkit-background-clip:text;background-clip:text;color:transparent;transition:color .2s;}
.mail-link::before,.mail-link::after{content:"";position:absolute;left:0;bottom:1px;width:100%;height:1px;display:block;}
.mail-link::before{background-image:linear-gradient(90deg,#ff4301,#ff8701);z-index:0;}
.mail-link::after{background-color:#fff;opacity:0;transition:opacity .2s;z-index:1;}
.mail-link:hover{color:#fff;}
.mail-link:hover::after{opacity:1;}
.lang-toggle{display:flex;gap:2px;border:1px solid var(--line);border-radius:100px;padding:3px;flex-shrink:0;}
.lang-toggle a{font-family:var(--font-display);font-size:10.5px;padding:5px 10px;border-radius:100px;color:var(--muted);cursor:pointer;transition:color .2s ease,background .2s ease;}
.lang-toggle a:hover{color:var(--white);}
.lang-toggle a.is-on{background:linear-gradient(135deg,var(--orange-2),var(--orange));color:#fff;}
.lang-toggle a.is-on:hover{color:#fff;}

/* Кнопка меню получила полноценную 48px зону нажатия: сам знак остаётся
   компактным, но по нему удобно попасть большим пальцем. */
.nav-toggle{display:none;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:48px;height:48px;padding:12px;background:transparent;border:none;appearance:none;-webkit-appearance:none;cursor:pointer;flex-shrink:0;}
.nav-toggle span{display:block;width:100%;height:2px;background:var(--white);border-radius:2px;transition:transform .25s ease,opacity .25s ease;}
.nav-toggle.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle.is-open span:nth-child(2){opacity:0;}
.nav-toggle.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.nav-toggle:focus-visible,.mobile-menu a:focus-visible{outline:2px solid var(--orange-2);outline-offset:3px;}

/* Мобильное меню — полноэкранный оверлей ОДНОГО цвета с шапкой (без «шва»).
   Нельзя ставить transform на header: в Safari это превращает fixed-потомка
   в элемент высотой с шапку, и под меню начинает просвечивать hero. wrap
   оставляем над оверлеем — крестик всегда доступен для закрытия. */
.mobile-menu{display:none;position:fixed;inset:0;z-index:1;min-height:100svh;height:100dvh;
  background:radial-gradient(circle at 82% 88%,rgba(255,102,0,.09),transparent 30%),var(--bg-2);
  flex-direction:column;justify-content:center;
  padding:calc(104px + env(safe-area-inset-top)) 20px calc(28px + env(safe-area-inset-bottom));
  overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;}
.mobile-menu.is-open{display:flex;}
.mobile-menu-nav{display:flex;flex-direction:column;align-items:stretch;width:min(100%,440px);margin:0 auto;}
/* Ссылки — цельные строки вместо текста с отдельными псевдо-разделителями.
   Так у активного «Блог» нет второй линии, налезающей на рамку. */
.mobile-menu-nav a{display:flex;align-items:center;justify-content:center;width:100%;min-height:56px;
  padding:14px 18px 12px;border-bottom:1px solid var(--line);font-family:var(--font-display);font-size:20px;line-height:1.2;color:var(--white);
  text-transform:uppercase;letter-spacing:.02em;text-align:center;transition:background .2s ease,color .2s ease,border-color .2s ease;}
.mobile-menu-nav a:hover{background:rgba(255,255,255,.035);color:var(--orange-2);}
.mobile-menu-nav a:last-child{border-bottom:0;}
.mobile-menu-nav a.active{min-height:60px;margin:8px 0;border:1px solid var(--orange-2);border-radius:14px;
  background:linear-gradient(116deg,rgba(255,67,1,.14),rgba(255,135,1,.05));-webkit-background-clip:border-box;background-clip:border-box;color:var(--orange-2);}
.mobile-menu-nav a.active:hover{color:#fff;border-color:#ff8a01;background:linear-gradient(116deg,rgba(255,67,1,.28),rgba(255,135,1,.12));}
.mobile-menu-actions{display:flex;flex-direction:column;gap:14px;align-items:center;width:min(100%,440px);margin:0 auto;padding:26px 0 0;}
.mobile-menu-actions .cta{display:flex;align-items:center;justify-content:center;width:100%;min-height:52px;animation:none;}
.mobile-menu-actions .lang-toggle{padding:4px;}
/* при открытом меню: шапка того же цвета (без «шва»), фон страницы не скроллится */
html.menu-open,html.menu-open body{height:100%;overflow:hidden;overscroll-behavior:none;}
html.menu-open header::before{background:transparent;}
html.menu-open #site-header{background:transparent;}
/* Не оставляем плавающую кнопку звука поверх открытой навигации: раньше она
   визуально выглядела как лишний элемент бургер-меню и перехватывала тап. */
html.menu-open .sound-toggle{opacity:0;pointer-events:none;}

@media (max-width:1520px){
  header .wrap{gap:44px;}
  header .desktop-nav{gap:40px;}
  header .desktop-nav a{font-size:13px;}
  header .desktop-nav a.active{padding:5px 11px 3px;} /* пилюля компактнее, чтобы EN-меню не наезжало на почту */
}
@media (max-width:1400px){
  header .desktop-nav{display:none;}
  .header-actions .mail-link{display:none;}
  .header-attached{display:none;} /* кнопка и язык живут в мобильном меню */
  .nav-toggle{display:flex;}
}
@media (max-width:640px){
  .mail-link{display:none;}
  .header-actions .lang-toggle{display:none;}
  .header-actions{gap:10px;}
  header .cta{padding:11px 16px;font-size:11px;}
}
@media (max-width:640px) and (max-height:760px){
  .mobile-menu{justify-content:flex-start;padding-top:calc(96px + env(safe-area-inset-top));}
  .mobile-menu-nav a{min-height:52px;padding-top:12px;padding-bottom:10px;font-size:18px;}
  .mobile-menu-nav a.active{min-height:56px;margin:5px 0;}
  .mobile-menu-actions{padding-top:18px;}
}
@media (prefers-reduced-motion:no-preference){
  .mobile-menu.is-open .mobile-menu-nav,.mobile-menu.is-open .mobile-menu-actions{animation:mobile-menu-enter .28s ease both;}
}
@keyframes mobile-menu-enter{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}

/* капча в формах (бриф/подписка) */
.captcha-row{display:flex;gap:10px;align-items:stretch;}
.captcha-img{height:46px;border-radius:9px;border:1px solid var(--line);cursor:pointer;flex-shrink:0;}
.captcha-row input[name=captcha_answer]{flex:1;min-width:0;text-transform:uppercase;letter-spacing:.12em;}

/* brief request modal */
.modal-overlay{position:fixed;inset:0;background:rgba(8,7,6,.72);backdrop-filter:blur(4px);z-index:200;display:none;align-items:center;justify-content:center;padding:20px;}
.modal-overlay.is-open{display:flex;}
.modal-box{position:relative;background:var(--bg-2);border:1px solid var(--line);border-radius:18px;padding:34px 32px;max-width:420px;width:100%;box-shadow:0 30px 60px -20px rgba(0,0,0,.7);}
.modal-box h3{font-family:var(--font-display);font-weight:800;font-size:24px;color:var(--white);text-transform:uppercase;margin-bottom:8px;}
.modal-sub{font-size:13.5px;color:var(--muted);line-height:1.5;margin-bottom:20px;}
.modal-close{position:absolute;top:14px;right:16px;background:transparent;border:none;color:var(--muted);font-size:26px;line-height:1;cursor:pointer;transition:color .2s ease;}
.modal-close:hover{color:var(--orange-2);}
.modal-form{display:flex;flex-direction:column;gap:12px;}
.modal-form input,.modal-form textarea{padding:13px 16px;border-radius:10px;border:1px solid var(--line);background:#1c1a17;color:var(--white);font-size:14px;font-family:var(--font-body);resize:none;}
.modal-form input::placeholder,.modal-form textarea::placeholder{color:#726e66;}
.modal-form button{font-family:var(--font-display);background:linear-gradient(135deg,var(--orange-2),var(--orange));color:#fff;border:none;font-size:13px;padding:15px 24px;border-radius:10px;cursor:pointer;transition:filter .2s ease,transform .2s ease;margin-top:4px;}
.modal-form button:hover{filter:brightness(1.08);transform:translateY(-1px);}
/* фирменное сообщение об ошибке формы (вместо браузерного alert) */
.form-error{display:none;font-size:13.5px;line-height:1.45;color:#ff8a80;
  background:rgba(179,38,30,.12);border:1px solid rgba(179,38,30,.4);border-radius:9px;
  padding:10px 13px;margin-top:2px;}
.form-error.show{display:block;animation:form-err-in .25s ease;}
@keyframes form-err-in{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:none;}}
.nl-form .form-error{margin-top:0;}
/* согласие на обработку ПДн (152-ФЗ): чекбокс на формах брифа и подписки */
.consent-row{display:flex;align-items:flex-start;gap:10px;font-size:12px;line-height:1.45;color:var(--muted);cursor:pointer;margin-top:2px;}
/* фирменный чекбокс: свой квадрат со скруглением, оранжевый градиент + галочка */
.consent-row input{appearance:none;-webkit-appearance:none;flex:0 0 auto;width:18px;height:18px;min-width:18px;
  margin:1px 0 0;padding:0;box-sizing:border-box;
  border:1.5px solid var(--line);border-radius:5px;background:#1c1a17;cursor:pointer;position:relative;
  transition:border-color .15s ease,background .15s ease,box-shadow .15s ease;}
.consent-row input:hover{border-color:var(--orange-2);}
.consent-row input:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(255,102,0,.35);}
.consent-row input:checked{background:linear-gradient(135deg,var(--orange-2),var(--orange));border-color:transparent;}
.consent-row input:checked::after{content:"";position:absolute;left:5px;top:1px;width:5px;height:9px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);}
.consent-row a{color:var(--orange-2);text-decoration:underline;}
.consent-row--nl{flex-basis:100%;margin-top:8px;}
.modal-success{display:none;font-size:14px;color:var(--orange-2);padding:10px 0 2px;}
.modal-box.is-sent .modal-form{display:none;}
.modal-box.is-sent .modal-success{display:block;}
/* кнопка = .button основного сайта: градиент 118deg, радиус 8, пульсация, hue-hover */
.cta{
  background-image:linear-gradient(118deg,#ff4501,#ff6f01);color:#fff;
  font-family:var(--font-display);font-size:13px;font-weight:600;line-height:1.66;
  padding:10px 15px;border-radius:8px;text-align:center;white-space:nowrap;
  animation:pulsation 1.5s ease-in-out infinite alternate;transition:all .2s;
}
.cta:hover{filter:hue-rotate(-10deg);opacity:.95;}

/* marquee */
.marquee{border-bottom:1px solid var(--line);background:var(--bg-2);overflow:hidden;padding:16px 0;}
.marquee-track{display:flex;gap:56px;width:max-content;animation:scroll 26s linear infinite;}
.marquee-track span{font-family:var(--font-display);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--white);opacity:.7;white-space:nowrap;}
.marquee-track span em{color:var(--orange-2);font-style:normal;}
@keyframes scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}

.section-title{position:relative;font-family:var(--font-brush);font-weight:700;font-size:52px;color:var(--orange-2);transform:rotate(-1.5deg);margin:44px 0 6px;display:inline-block;}
.section-title::before{content:"";position:absolute;left:-16px;right:-20px;top:-10px;bottom:-8px;
  border:2px solid var(--orange-2);border-radius:50% 48% 52% 46%/55% 45% 58% 42%;
  opacity:.45;transform:rotate(-4deg);pointer-events:none;z-index:-1;}

/* hero (moved out of inline styles for responsive control) */
.hero{position:relative;padding:100px 0 60px;overflow:hidden;border-bottom:1px solid var(--line);}
.hero-decor{position:absolute;inset:0;max-width:1560px;margin:0 auto;pointer-events:none;}
/* мягкое фирменное свечение позади планеты — глубина без пестроты */
.hero-decor::before{content:"";position:absolute;right:2%;top:44%;transform:translateY(-50%);
  width:560px;height:560px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,110,1,.16) 0%,rgba(255,65,1,.07) 45%,transparent 70%);}
.hero-decor .ring{position:absolute;left:-160px;top:50%;transform:translateY(-50%);width:340px;height:340px;border:2px solid var(--orange-2);border-radius:50%;opacity:.28;}
/* .bar (вертикальная оранжевая полоса справа) удалена: на широких экранах
   выглядела как второй скроллбар */
.hero-decor .watermark{position:absolute;right:-60px;top:50%;transform:translateY(-50%);width:520px;height:520px;opacity:.13;}
.hero-eyebrow{font-family:var(--font-brush);font-size:23px;color:var(--orange-2);transform:rotate(-2deg);display:inline-block;margin-bottom:10px;}
.hero-title{font-family:var(--font-display);font-weight:800;font-size:clamp(38px,6.2vw,72px);line-height:1.0;letter-spacing:-0.015em;text-transform:uppercase;max-width:880px;}
/* акцентное слово — фирменный градиент (тот же, что у пилюли и кнопок) */
.hero-title .accent{background-image:linear-gradient(116deg,#ff4301,#ff8701);-webkit-background-clip:text;background-clip:text;color:transparent;}
.hero-divider{width:100%;max-width:620px;height:1px;background:var(--line);margin:28px 0;}
.hero-lead{font-family:var(--font-body);font-size:17.5px;font-weight:500;line-height:1.6;color:var(--muted);max-width:600px;letter-spacing:-0.005em;}
/* стеклянные чипы «как делаются материалы» — glassmorphism в тон шапки */
.hero-chips{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap;}
.hero-chips .chip{font-family:var(--font-display);font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--white);padding:9px 16px;border:1px solid var(--line);border-radius:100px;
  background:rgba(22,21,19,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:border-color .2s ease,color .2s ease;}
.hero-chips .chip:hover{border-color:#f60;color:var(--orange-2);}
.hero-stats{display:flex;gap:52px;margin-top:40px;flex-wrap:wrap;}
/* каскадное появление героя при загрузке (уважает reduced-motion) */
@media (prefers-reduced-motion:no-preference){
  @keyframes hero-in{from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:none;}}
  @keyframes hero-fade{from{opacity:0;}to{opacity:1;}}
  .hero-title,.hero-divider,.hero-lead,.hero-chips,.hero-stats{
    animation:hero-in .7s cubic-bezier(.16,1,.3,1) both;}
  /* у eyebrow собственный rotate — анимируем только прозрачность */
  .hero-eyebrow{animation:hero-fade .7s ease both;}
  .hero-title{animation-delay:.06s;}
  .hero-divider{animation-delay:.14s;}
  .hero-lead{animation-delay:.2s;}
  .hero-chips{animation-delay:.28s;}
  .hero-stats{animation-delay:.36s;}
}
.stat-num{font-family:var(--font-brush);font-weight:700;font-size:44px;color:var(--orange-2);line-height:1;display:inline-block;}
.hero-stats .stat:nth-child(1) .stat-num{transform:rotate(-4deg);}
.hero-stats .stat:nth-child(2) .stat-num{transform:rotate(3deg);}
.hero-stats .stat:nth-child(3) .stat-num{transform:rotate(-3deg);}
.stat-label{font-family:var(--font-display);font-size:11px;color:var(--white);display:block;margin-top:6px;max-width:150px;}

/* filters */
.filters{display:flex;gap:10px;flex-wrap:wrap;padding:8px 0 8px;}
.pill{font-family:var(--font-display);font-size:11.5px;letter-spacing:.02em;padding:11px 20px;border-radius:100px;border:1px solid var(--line);color:var(--muted);cursor:pointer;background:transparent;transition:all .18s ease;}
.pill:hover{border-color:var(--orange-2);color:var(--white);}
.pill.is-active{background:linear-gradient(135deg,var(--orange-2),var(--orange));border-color:var(--orange-2);color:#fff;}

/* grid */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;padding:32px 0 8px;}
.card{position:relative;background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;cursor:pointer;transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;}
.card-link{position:absolute;inset:0;z-index:5;border-radius:inherit;}
.card-link:focus-visible{outline:2px solid var(--orange-2);outline-offset:2px;}
.card:hover{border-color:var(--orange-2);transform:translateY(-4px);box-shadow:0 16px 30px -20px rgba(255,92,26,.4);}
.card .thumb{height:190px;position:relative;overflow:hidden;background:#0e0d0c;}
.card .thumb svg{width:100%;height:100%;transition:transform .35s ease;}
.card:hover .thumb svg{transform:scale(1.05);}
.card .body{padding:20px 20px 22px;display:flex;flex-direction:column;gap:11px;flex:1;}
.tag-row{display:flex;justify-content:space-between;align-items:center;gap:8px;}
.tag{font-family:var(--font-display);font-size:10px;letter-spacing:.04em;color:var(--orange-2);background:rgba(255,92,26,.14);padding:6px 10px;border-radius:6px;}
.card h3{font-family:var(--font-body);font-weight:800;font-size:19px;line-height:1.28;letter-spacing:-0.015em;color:var(--white);}
.card p{font-size:13.5px;color:var(--muted);flex:1;}
.read-more{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-display);font-size:11px;color:var(--orange-2);}
.read-more .label{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px;}
.read-more .arrow{transition:transform .2s ease;}
.card:hover .read-more .arrow{transform:translateX(4px);}
.meta{display:flex;justify-content:space-between;font-size:11.5px;color:#6f6b63;border-top:1px solid var(--line);padding-top:12px;margin-top:2px;}

.card.featured{grid-column:span 2;flex-direction:row;}
.card.featured .thumb{width:44%;height:auto;flex-shrink:0;}
.card.featured .body{justify-content:center;}
.card.featured h3{font-size:24px;}

.extra-card{display:none;}
.load-more{display:flex;justify-content:center;padding:32px 0 20px;}
.load-more button{font-family:var(--font-display);background:transparent;border:1px solid var(--orange-2);color:var(--orange-2);font-size:12px;padding:15px 32px;border-radius:100px;transition:all .2s ease;cursor:pointer;}
.load-more button:hover{background:var(--orange-2);color:#fff;}
.load-more button:disabled{opacity:.5;cursor:default;background:transparent;color:var(--muted);border-color:var(--line);}

/* newsletter */
.newsletter{background:var(--bg-2);border:2px solid var(--orange-2);border-radius:20px;margin:56px 0;padding:48px;display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap;}
.newsletter h2{font-family:var(--font-display);font-size:23px;line-height:1.35;max-width:380px;text-transform:uppercase;}
.newsletter .brush{display:block;font-family:var(--font-brush);font-weight:700;color:var(--orange-2);font-size:28px;transform:rotate(-2deg);margin-top:6px;}
.nl-form{display:flex;flex-direction:column;gap:10px;flex:1;min-width:280px;max-width:380px;}
.nl-form input{padding:15px 18px;border-radius:10px;border:1px solid var(--line);background:#1c1a17;color:var(--white);font-size:14px;}
.nl-form input::placeholder{color:#726e66;}
.nl-form button{font-family:var(--font-display);background:linear-gradient(135deg,var(--orange-2),var(--orange));color:#fff;border:none;font-size:13px;padding:15px 24px;border-radius:10px;cursor:pointer;transition:filter .2s ease;}
.nl-form button:hover{filter:brightness(1.08);}

footer{border-top:1px solid var(--line);padding:52px 0 0;background:var(--bg-2);}
footer .top{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:24px;padding-bottom:32px;}
footer .brand-block{max-width:340px;flex:1 1 260px;}
.brand-lockup{display:flex;align-items:center;gap:16px;margin-bottom:14px;}
.brand-lockup svg{width:58px;height:58px;flex-shrink:0;}
.tagline{font-family:var(--font-display);font-size:14px;line-height:1.4;color:var(--white);text-transform:uppercase;letter-spacing:.01em;}
.legal{font-size:11.5px;color:var(--muted);}
.footer-nav{display:flex;gap:52px;flex:1 1 320px;justify-content:center;}
.footer-nav-col{display:flex;flex-direction:column;gap:11px;}
.footer-nav-col--wide{max-width:420px;}
.footer-nav-title{font-family:var(--font-display);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--orange-2);margin-bottom:2px;}
.footer-nav-note{font-size:13px;color:var(--muted);line-height:1.55;margin-bottom:4px;}
.footer-nav-links{display:flex;flex-wrap:wrap;gap:10px 18px;}
.footer-nav-col a{font-size:13.5px;color:var(--muted);transition:color .2s ease;white-space:nowrap;}
.footer-nav-col a:hover{color:var(--white);}
.contact-block{display:flex;flex-direction:column;align-items:flex-end;gap:14px;flex:0 0 auto;}
.contact-block .socials{display:flex;gap:10px;}
.contact-block .socials a{width:44px;height:44px;border-radius:11px;border:1.5px solid var(--orange-2);background:rgba(255,139,1,.06);display:flex;align-items:center;justify-content:center;color:var(--white);transition:transform .2s ease,background .2s ease,color .2s ease;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.06);}
.contact-block .socials a:hover{transform:translateY(-2px);background:linear-gradient(135deg,var(--orange-2),var(--orange));color:#fff;}
.contact-block .mail,.contact-block .phone{font-family:var(--font-display);font-size:14px;color:var(--orange-2);letter-spacing:.02em;text-align:right;}

.brand-marquee{border-top:1px solid var(--line);overflow:hidden;padding:28px 0;}
.brand-marquee .marquee-track{gap:16px;animation-duration:36s;}
/* как .brands__item основного: флекс-ячейка, лого по центру, масштаб по max-габаритам
   (жёсткая height у img давала разнобой — пропорции SVG у всех разные) */
.logo-box{border:1.5px solid var(--orange-2);border-radius:10px;padding:12px 22px;display:flex;align-items:center;gap:11px;justify-content:center;height:64px;background:#0c0c0b;box-sizing:border-box;}
.logo-mono{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:9px;background:linear-gradient(135deg,var(--orange-2),var(--orange));color:#fff;font-family:var(--font-display);font-weight:800;font-size:14px;line-height:1;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.4), 0 2px 6px -1px rgba(0,0,0,.35);}
.logo-box:nth-child(even) .logo-mono{border-radius:50%;}
.logo-box.logo-box--promo{background:linear-gradient(135deg,var(--orange-2),var(--orange));border-color:transparent;}
.logo-box--promo .logo-word-chip{color:#fff;}
.logo-box img{max-height:100%;max-width:150px;height:auto;width:auto;object-fit:contain;display:block;margin:auto;filter:none;opacity:1;}
.logo-word-chip{font-family:var(--font-display);font-weight:700;font-size:14.5px;letter-spacing:.01em;color:var(--white);white-space:nowrap;text-transform:uppercase;}

.marquee-note{text-align:center;font-family:var(--font-display);font-size:13px;color:var(--muted);padding:22px 0 30px;text-transform:uppercase;letter-spacing:.02em;}

.bottom-bar{display:flex;justify-content:space-between;align-items:center;padding:20px 32px;font-size:11.5px;color:#7a766d;border-top:1px solid var(--line);}
.bottom-bar a{color:#7a766d;}
.bottom-bar a:hover{color:var(--orange-2);}

.to-top{position:fixed;bottom:26px;right:26px;width:52px;height:52px;border-radius:50%;background:var(--bg-2);border:2px solid var(--orange-2);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transform:translateY(10px);transition:opacity .25s ease, transform .25s ease, background .2s ease;z-index:60;color:var(--orange-2);}
.to-top:hover{background:var(--orange-2);color:#fff;}
.to-top.visible{opacity:1;pointer-events:auto;transform:translateY(0);}
.to-top svg{width:18px;height:18px;}

/* article page */
.article-hero{position:relative;padding:56px 0 0;border-bottom:1px solid var(--line);overflow:hidden;}
.article-hero::before{content:"";position:absolute;left:-120px;top:50%;transform:translateY(-50%);width:300px;height:300px;border:2px solid var(--orange-2);border-radius:50%;opacity:.25;pointer-events:none;}
.article-hero::after{content:"";position:absolute;right:-60px;top:-60px;width:260px;height:260px;background:repeating-radial-gradient(circle,rgba(255,139,1,.12) 0 2px,transparent 2px 30px);opacity:.7;pointer-events:none;}
.breadcrumbs{font-family:var(--font-display);font-size:11px;letter-spacing:.03em;color:var(--muted);display:flex;gap:8px;align-items:center;margin-bottom:22px;}
.breadcrumbs a:hover{color:var(--orange-2);}
.article-hero h1{font-family:var(--font-display);font-size:clamp(28px,4.2vw,44px);line-height:1.12;text-transform:uppercase;max-width:860px;}
.article-meta{display:flex;gap:20px;flex-wrap:wrap;margin:26px 0 0;font-size:13px;color:var(--muted);}
.article-meta .tag{font-size:10.5px;}
.article-cover{margin:34px 0 0;}

/* ETC Journal cover template — cream card, statue photo, highlight headline */
.jcover{background:var(--card);color:var(--white);border-radius:16px;overflow:hidden;border:1px solid var(--line);font-family:var(--font-display);}
.jc-rule{text-align:center;padding:10px 0;font-size:10.5px;letter-spacing:.14em;color:var(--muted);border-bottom:1px solid var(--line);}
.jcover--hero .jc-body{display:flex;align-items:center;gap:28px;padding:30px 34px;}
.jcover--hero .jc-photo{width:220px;height:220px;flex-shrink:0;border-radius:12px;overflow:hidden;background:#0c0c0c;}
.jcover--hero .jc-text{flex:1;}
.jcover--hero .jc-line1{font-size:clamp(22px,3.4vw,32px);}
.jcover--hero .jc-line2{font-size:clamp(22px,3.4vw,32px);}
/* Flat vector cover art v3 — orange field + soft glow + a crisp line-art glyph per category
   (nod to the hand-drawn doodle icons used on the main site, redrawn clean/geometric for the blog). */
.jc-photo{position:relative;background:linear-gradient(145deg,var(--orange-2) 0%,var(--orange) 100%);isolation:isolate;overflow:hidden;}
.jc-photo::before{content:"";position:absolute;inset:-20%;z-index:0;pointer-events:none;
  background:radial-gradient(circle at 70% 25%, rgba(255,255,255,.4), transparent 55%);
  mix-blend-mode:screen;opacity:.8;}
.jc-photo::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background-repeat:no-repeat;background-position:center 38%;background-size:32%;opacity:.92;filter:drop-shadow(0 2px 10px rgba(0,0,0,.25));}
.jcover--hero .jc-photo::after{background-position:center 50%;background-size:38%;}
/* one unique line-art glyph per article (data-icon), so no two covers repeat */
[data-icon="trend"] .jc-photo::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23f5f3ee' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 30l9-10 7 6 12-15'/%3E%3Ccircle cx='21' cy='21' r='11'/%3E%3Cline x1='29' y1='29' x2='42' y2='42'/%3E%3C/svg%3E");}
[data-icon="tag"] .jc-photo::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23f5f3ee' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 24L24 6h14a4 4 0 0 1 4 4v14L24 42z'/%3E%3Ccircle cx='33' cy='15' r='3' fill='%23f5f3ee' stroke='none'/%3E%3C/svg%3E");}
[data-icon="shield"] .jc-photo::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23f5f3ee' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M24 4l16 6v12c0 10-7 17-16 22-9-5-16-12-16-22V10z'/%3E%3Cpath d='M17 24l5 5 10-11'/%3E%3C/svg%3E");}
[data-icon="stamp"] .jc-photo::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23f5f3ee' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='5' width='23' height='30' rx='2'/%3E%3Cline x1='13' y1='13' x2='26' y2='13'/%3E%3Cline x1='13' y1='19' x2='26' y2='19'/%3E%3Ccircle cx='32' cy='32' r='9'/%3E%3Cpath d='M28 32l3 3 5-6'/%3E%3C/svg%3E");}
[data-icon="heart"] .jc-photo::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23f5f3ee' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M24 40S6 28 6 16a9 9 0 0 1 18-2 9 9 0 0 1 18 2c0 12-18 24-18 24z'/%3E%3Cpath d='M17 18l5 5 9-9'/%3E%3C/svg%3E");}
[data-icon="swap"] .jc-photo::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23f5f3ee' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 16h30M30 9l7 7-7 7'/%3E%3Cpath d='M42 32H12M18 25l-7 7 7 7'/%3E%3C/svg%3E");}
[data-icon="pie"] .jc-photo::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23f5f3ee' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='24' cy='24' r='18'/%3E%3Cpath d='M24 24V6a18 18 0 0 1 15.6 27z' fill='%23f5f3ee' stroke='none'/%3E%3C/svg%3E");}
[data-icon="checklist"] .jc-photo::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23f5f3ee' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='5' width='30' height='38' rx='2'/%3E%3Cpath d='M15 16l3 3 6-6'/%3E%3Cline x1='28' y1='16' x2='33' y2='16'/%3E%3Cpath d='M15 27l3 3 6-6'/%3E%3Cline x1='28' y1='27' x2='33' y2='27'/%3E%3Cline x1='15' y1='36' x2='33' y2='36'/%3E%3C/svg%3E");}
[data-icon="gear"] .jc-photo::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23f5f3ee' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='24' cy='24' r='8'/%3E%3Cpath d='M24 3v7M24 38v7M3 24h7M38 24h7M8 8l5 5M35 35l5 5M8 40l5-5M35 13l5-5'/%3E%3C/svg%3E");}
[data-icon="compass"] .jc-photo::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23f5f3ee' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='24' cy='24' r='18'/%3E%3Cpath d='M31 17l-5 10-10 5 5-10z' fill='%23f5f3ee' stroke-linejoin='round'/%3E%3C/svg%3E");}
[data-icon="scales"] .jc-photo::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23f5f3ee' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='24' y1='5' x2='24' y2='39'/%3E%3Cline x1='9' y1='13' x2='39' y2='13'/%3E%3Cpath d='M9 13l6 13H3z'/%3E%3Cpath d='M39 13l6 13h-12z'/%3E%3Cline x1='16' y1='40' x2='32' y2='40'/%3E%3C/svg%3E");}
[data-icon="target"] .jc-photo::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23f5f3ee' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='24' cy='24' r='18'/%3E%3Ccircle cx='24' cy='24' r='11'/%3E%3Ccircle cx='24' cy='24' r='4' fill='%23f5f3ee' stroke='none'/%3E%3C/svg%3E");}
[data-icon="play"] .jc-photo::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23f5f3ee' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='24' cy='24' r='19'/%3E%3Cpath d='M19 16l14 8-14 8z' fill='%23f5f3ee' stroke-linejoin='round'/%3E%3C/svg%3E");}
[data-icon="nodes"] .jc-photo::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23f5f3ee' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 12l11 14M35 11l-11 15M13 36l10-1M35 36l-10-1'/%3E%3Ccircle cx='9' cy='11' r='4' fill='%23f5f3ee' stroke='none'/%3E%3Ccircle cx='38' cy='10' r='4' fill='%23f5f3ee' stroke='none'/%3E%3Ccircle cx='24' cy='29' r='5' fill='%23f5f3ee' stroke='none'/%3E%3Ccircle cx='10' cy='37' r='4' fill='%23f5f3ee' stroke='none'/%3E%3Ccircle cx='38' cy='37' r='4' fill='%23f5f3ee' stroke='none'/%3E%3C/svg%3E");}
.jc-line1{display:block;font-weight:900;text-transform:uppercase;line-height:1.08;letter-spacing:-0.01em;color:var(--white);}
.jc-line2-wrap{position:relative;display:inline-block;margin-top:8px;}
.jc-line2{position:relative;z-index:2;display:inline-block;background:linear-gradient(120deg,var(--orange-2),var(--orange));color:#fff;font-weight:900;text-transform:uppercase;padding:3px 12px;letter-spacing:-0.01em;}
.jc-circle{position:absolute;left:-14px;right:-14px;top:-34%;bottom:-34%;border:2px solid var(--orange);border-radius:50%;z-index:3;pointer-events:none;transform:rotate(-2deg);}
.card .jcover--card{border-radius:0;border:none;position:relative;height:100%;overflow:hidden;}
.jcover--card .jc-photo{position:absolute;inset:0;height:100%;}
.jcover--card::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(180deg,rgba(10,10,9,0) 38%,rgba(10,10,9,.88) 100%);}
.jcover--card .jc-caption{position:absolute;left:14px;right:14px;bottom:12px;z-index:3;}
.jcover--card .jc-line1{font-size:11.5px;color:#efece4;}
.jcover--card .jc-line2{font-size:13.5px;padding:3px 9px;}
.jcover--card .jc-circle{border-width:1.5px;}
.article-body{max-width:760px;margin:0 auto;padding:44px 32px 20px;font-size:16px;line-height:1.75;color:#d8d5cc;}
.article-body h2{font-family:var(--font-display);font-size:20px;text-transform:uppercase;color:var(--white);margin:38px 0 16px;letter-spacing:.01em;}
.article-body p{margin:0 0 18px;}
.article-body ul{margin:0 0 18px;padding-left:4px;list-style:none;}
.article-body li{position:relative;margin-bottom:10px;padding-left:26px;}
.article-body li::before{content:"";position:absolute;left:0;top:9px;width:9px;height:9px;border-radius:50%;background:linear-gradient(135deg,var(--orange-2),var(--orange));}
.article-body strong{color:var(--white);}
.stat-strip{display:flex;gap:28px;flex-wrap:wrap;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:24px 28px;margin:26px 0;}
.stat-strip div b{display:block;font-family:var(--font-brush);font-weight:700;font-size:28px;color:var(--orange-2);}
.stat-strip div span{font-size:12px;color:var(--muted);}
.pullquote{font-family:var(--font-brush);font-size:24px;color:var(--orange-2);border-left:3px solid var(--orange-2);padding:6px 0 6px 22px;margin:30px 0;transform:rotate(-.4deg);}
.promo{background:linear-gradient(135deg,#1c1a17,#111010);border:2px solid var(--orange-2);border-radius:16px;padding:26px 30px;margin:38px auto;max-width:760px;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;}
.promo .txt{max-width:440px;}
.promo .eyebrow-sm{display:block;font-family:var(--font-display);font-size:10.5px;letter-spacing:.06em;color:var(--orange-2);margin-bottom:6px;}
.promo p{font-size:14.5px;color:var(--white);line-height:1.55;}
.promo a.btn{font-family:var(--font-display);background:linear-gradient(135deg,var(--orange-2),var(--orange));color:#fff;padding:14px 24px;border-radius:100px;font-size:12px;white-space:nowrap;transition:filter .2s ease,transform .2s ease;}
.promo a.btn:hover{filter:brightness(1.08);transform:translateY(-1px);}

.sources{max-width:760px;margin:20px auto 60px;padding:0 32px;font-size:13px;color:var(--muted);border-top:1px solid var(--line);padding-top:24px;}
.sources h3{font-family:var(--font-display);font-size:13px;color:var(--white);margin-bottom:12px;text-transform:uppercase;letter-spacing:.03em;}
.sources ol{padding-left:18px;}
.sources li{margin-bottom:8px;}
.sources a{color:var(--orange-2);}
.sources a:hover{text-decoration:underline;}
.ai-note{max-width:760px;margin:0 auto;padding:0 32px;font-size:12.5px;color:#6f6b63;}
.related{padding:20px 0 60px;}

/* tablets — landscape iPad / small laptop */
@media (max-width:1024px){
  .grid{grid-template-columns:repeat(2,1fr);}
  .jcover--hero .jc-photo{width:180px;height:180px;}
  .jcover--hero .jc-body{gap:20px;padding:26px 28px;}
  .newsletter{padding:36px;}
  header .wrap{gap:12px;}
}

@media (max-width:860px){
  nav{display:none;}
  .grid{grid-template-columns:1fr;}
  .card.featured{grid-column:span 1;flex-direction:column;}
  .card.featured .thumb{width:100%;height:190px;}
  .newsletter{flex-direction:column;align-items:flex-start;}
  footer .top{flex-direction:column;align-items:flex-start;gap:0;}
  footer .brand-block{flex:none;max-width:100%;width:100%;padding-bottom:24px;}
  .footer-nav{flex:none;width:100%;gap:36px;justify-content:flex-start;padding:24px 0;border-top:1px solid var(--line);}
  .contact-block{align-items:flex-start;width:100%;padding-top:24px;border-top:1px solid var(--line);}
  .contact-block .mail,.contact-block .phone{text-align:left;}
  .bottom-bar{flex-direction:column;gap:8px;align-items:flex-start;}
  .jcover--hero .jc-body{flex-direction:column;text-align:center;}
  .jcover--hero .jc-photo{width:100%;height:200px;margin:0 auto;}
  .jcover--hero .jc-text{text-align:center;}
  .stat-strip{flex-direction:column;gap:14px;}
}

/* small phones — iPhone SE/mini through standard */
@media (max-width:480px){
  .wrap{padding:0 18px;}
  /* Высота шапки на телефоне задана явно, поэтому сбрасываем десктопные
     вертикальные отступы. Иначе flex-строка получала лишь 16px полезной
     высоты и иконка бургера оказывалась смещённой. */
  header .wrap{height:76px;gap:8px;padding-top:0;padding-bottom:0;}
  header.scrolled .wrap{height:64px;padding-top:0;padding-bottom:0;}
  .logo svg,.logo-mark{height:40px;width:40px;}
  .logo-word{font-size:13px;}
  .hero{padding:72px 0 40px;}
  .hero-stats{gap:26px;}
  .stat-num{font-size:34px;}
  .newsletter{padding:26px 20px;}
  .newsletter h2{font-size:19px;}
  .modal-box{padding:26px 22px;}
  .promo{padding:20px;flex-direction:column;align-items:flex-start;}
  footer{padding-top:40px;}
  footer .top{gap:20px;}
  .bottom-bar{padding:16px 18px;}
  .article-body{padding:32px 18px 14px;}
  .jcover--hero .jc-body{padding:20px 18px;}
  .stat-strip{padding:18px 20px;}
}

/* smallest phones (iPhone SE 1st-gen and similar 320-360px) */
@media (max-width:360px){
  .wrap{padding:0 14px;}
  header .wrap{gap:6px;}
  .logo-word{display:none;}
  header .cta{padding:10px 13px;font-size:10.5px;}
}

/* === живой слой: анимации и микро-интеракции === */
@media (prefers-reduced-motion: no-preference){

  .jc-photo::after{transition:transform .5s cubic-bezier(.34,1.56,.64,1);}
  .jc-photo::before{transition:opacity .4s ease;}
  .card:hover .jc-photo::after,
  .jcover--hero:hover .jc-photo::after{transform:scale(1.12) translateY(-2px);}
  .card:hover .jc-photo::before,
  .jcover--hero:hover .jc-photo::before{opacity:1;}

  .cta,.promo a.btn{position:relative;overflow:hidden;}
  .cta::before,.promo a.btn::before{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;
    background:linear-gradient(115deg,transparent,rgba(255,255,255,.4),transparent);
    transform:skewX(-20deg);transition:left .55s ease;pointer-events:none;}
  .cta:hover::before,.promo a.btn:hover::before{left:120%;}

  .marquee:hover .marquee-track,
  .brand-marquee:hover .marquee-track{animation-play-state:paused;}

  .logo-box{transition:transform .25s ease,border-color .25s ease,background .25s ease;}
  .logo-box:hover{transform:translateY(-3px);border-color:var(--orange);background:rgba(255,139,1,.1);}

  .cta,.promo a.btn,.load-more button{position:relative;overflow:hidden;}
  .cta:active,.promo a.btn:active,.load-more button:active{transform:scale(.96);}

  .pill{transform-origin:center;}
  .pill:active{transform:scale(.95);}

  .to-top{transition:transform .25s ease,background .25s ease,border-color .25s ease;}
  .to-top:hover{transform:translateY(-3px) scale(1.06);}
  .to-top.visible{animation:toTopPulse 2.6s ease-in-out infinite;}
  @keyframes toTopPulse{0%,100%{box-shadow:0 0 0 0 rgba(255,92,26,.25);}50%{box-shadow:0 0 0 8px rgba(255,92,26,0);}}

  .stat b[data-count]{display:inline-block;}

  .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s cubic-bezier(.16,1,.3,1);}
  .reveal.in-view{opacity:1;transform:translateY(0);}
  .grid .card.reveal:nth-child(1){transition-delay:.02s;}
  .grid .card.reveal:nth-child(2){transition-delay:.08s;}
  .grid .card.reveal:nth-child(3){transition-delay:.14s;}
  .grid .card.reveal:nth-child(4){transition-delay:.02s;}
  .grid .card.reveal:nth-child(5){transition-delay:.08s;}
  .grid .card.reveal:nth-child(6){transition-delay:.14s;}

  .section-title{transition:transform .3s ease;}
  .section-title:hover{transform:rotate(-1.5deg) translateX(3px);}

  @keyframes logoSpin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
  /* как на основном сайте: ровное вращение 10s, БЕЗ ускорения/подсветки на ховере */
  a.logo svg,a.logo .logo-mark{animation:logoSpin 10s linear infinite;}
}

/* === полировка v4 (добавлено при аудите, см. README-DEV.md) === */
/* выделение текста в фирменном оранжевом */
::selection{background:var(--orange);color:#fff;}

/* видимый фокус для клавиатурной навигации (только :focus-visible — не мешает мыши) */
a:focus-visible,button:focus-visible,.pill:focus-visible{outline:2px solid var(--orange-2);outline-offset:3px;border-radius:4px;}
input:focus-visible,textarea:focus-visible{outline:2px solid var(--orange-2);outline-offset:1px;}

/* индикатор прочтения статьи — тонкая полоса под верхним краем экрана,
   создаётся из script.js (секция 11) только на страницах со .article-body */
.read-progress{position:fixed;top:0;left:0;width:100%;height:3px;z-index:60;pointer-events:none;background:linear-gradient(90deg,var(--orange),var(--orange-2));transform:scaleX(0);transform-origin:0 50%;}

/* состояние "заявка принята" у формы подписки (script.js, секция 12) */
.nl-form.is-sent input{opacity:.45;}
.nl-form.is-sent button{background:#1c1a17;border:1px solid var(--orange-2);color:var(--orange-2);cursor:default;}

/* === декор hero: фирменный графический объект ===
   Фото-статуи убраны по решению от 13.07 — вместо них SVG-планета
   с орбитальным кольцом (разметка в etc-blog-mockup.html, .hero-object). */

/* Фирменный графический объект в hero (планета с кольцом, эхо логотипа).
   Заменил фото-статую (решение от 13.07: без фото-статуй, только графика). */
.hero-decor .hero-object{display:none;}
@media (min-width:1280px){
  .hero-decor .hero-object{
    display:block;position:absolute;right:56px;top:50%;margin-top:-185px;
    width:370px;height:370px;
    filter:drop-shadow(0 24px 48px rgba(255,65,1,.22));
  }
}
@media (prefers-reduced-motion: no-preference) and (min-width:1280px){
  .hero-decor .hero-object{animation:objFloat 9s ease-in-out infinite;}
  @keyframes objFloat{
    0%,100%{transform:translateY(0) rotate(0deg);}
    50%{transform:translateY(-16px) rotate(1.2deg);}
  }
}

/* Статуя из блока подписки убрана (решение от 13.07): читалась как тёмное пятно */

/* Бюст из шапок статей убран (решение от 13.07: без фото-статуй) */

/* === премиум-полировка v5: доводка статуй и деталей ===
   Задача — "дорогой" вид без смены структуры: свечение, растворение краёв,
   аккуратные фокусы форм. Всё поверх существующих правил (каскад). */

/* Hero: мягкое фирменное свечение позади статуи + доводка самой статуи
   (лёгкое затемнение, чтобы белый мрамор не выглядел "наклейкой" на тёмном) */
@media (min-width:1280px){
  .hero-decor::after{
    content:"";position:absolute;right:-90px;top:50%;transform:translateY(-50%);
    width:680px;height:680px;border-radius:50%;pointer-events:none;
    background:radial-gradient(circle, rgba(255,101,1,.15) 0%, rgba(255,65,1,.06) 42%, transparent 68%);
  }
}





/* Формы: тёплое свечение поля в фокусе вместо голого outline */
.modal-form input:focus,.modal-form textarea:focus,.nl-form input:focus{
  outline:none;border-color:var(--orange-2);
  box-shadow:0 0 0 3px rgba(255,139,1,.14);
}

/* Заголовки: балансировка переносов строк (поддерживается новыми браузерами,
   старые просто игнорируют) */
.hero-title,.article-hero h1,.card h3,.newsletter h2{text-wrap:balance;}

/* Пилюли фильтра: живее ховер */
.pill:hover{color:var(--white);border-color:var(--orange-2);}

/* === футер v6: CTA-полоса + колонка "Компания" === */
.footer-cta{display:flex;justify-content:space-between;align-items:center;gap:28px;flex-wrap:wrap;padding-bottom:40px;margin-bottom:44px;border-bottom:1px solid var(--line);}
.footer-cta-title{font-family:var(--font-display);font-weight:800;font-size:clamp(19px,2.4vw,28px);line-height:1.3;text-transform:uppercase;max-width:620px;margin-top:10px;color:var(--white);}
.cta--big{font-size:13px;padding:17px 32px;}
.footer-nav-links--col{flex-direction:column;gap:10px;}
@media (max-width:860px){
  .footer-cta{flex-direction:column;align-items:flex-start;padding-bottom:28px;margin-bottom:24px;}
}

/* На широких экранах водяной знак-круг в hero дублирует планету — прячем его,
   на узких (где планета скрыта) он остаётся единственным декором. */
@media (min-width:1280px){
  .hero-decor .watermark{display:none;}
}

/* === футер v7: блочная (bento) компоновка ===
   4 карточки в сетке: бренд / блог / компания / контакты + CTA-карточка сверху.
   HTML не менялся: .footer-nav развёрнут через display:contents, его колонки
   становятся элементами общей сетки. Блок идёт в конце файла и перекрывает
   старую линейную вёрстку футера (включая правила в @media 860px). */
.footer-cta{
  border:2px solid var(--orange-2);border-radius:20px;background:var(--card);
  width:min(1200px, calc(100% - 40px));padding:34px 40px;margin:0 auto 18px;
}
footer .top{display:grid;grid-template-columns:1.25fr 1.1fr .8fr .95fr;gap:18px;align-items:stretch;padding-bottom:36px;}
.footer-nav{display:contents;}
footer .brand-block,.footer-nav-col,footer .contact-block{
  background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:26px 28px;margin:0;max-width:none;width:auto;
}
footer .brand-block{display:flex;flex-direction:column;justify-content:space-between;gap:18px;}
.footer-nav-col--wide{max-width:none;}
footer .contact-block{align-items:flex-start;justify-content:flex-start;display:flex;flex-direction:column;gap:16px;}
footer .contact-block .socials{margin-bottom:6px;}
footer .contact-block .mail,footer .contact-block .phone{text-align:left;}
@media (max-width:1024px){
  footer .top{grid-template-columns:1fr 1fr;}
}
@media (max-width:860px){
  /* нейтрализация старых мобильных правил линейного футера */
  footer .top{display:grid;gap:18px;}
  footer .brand-block{padding:26px 28px;}
  footer .contact-block{border:1px solid var(--line);padding:26px 28px;}
}
@media (max-width:640px){
  footer .top{grid-template-columns:1fr;}
  .footer-cta{padding:26px 24px;}
}

/* === логотипы брендов в футере: настоящие SVG с etc.moscow === */
.logo-box .logo-img{max-height:100%;max-width:150px;height:auto;width:auto;object-fit:contain;display:block;margin:auto;}

/* === v8: паритет шапки и кнопки "наверх" с основным сайтом === */
/* email в шапке — как на etc.moscow (справа от навигации) */
/* кнопка "наверх" — рисованный скетч up.svg с основного сайта,
   встроен прямо в HTML (инлайн-SVG) — идентична etc.moscow и работает офлайн */
.to-top{width:64px;height:64px;background:none;border:none;border-radius:0;right:25px;bottom:40px;color:var(--orange-2);}
.to-top:hover{background:none;color:var(--orange-2);}
.to-top .to-top-svg{width:100%;height:auto;display:block;}
.to-top.visible{animation:none;}

/* === обложки-картинки из админки (перекрывают jcover) === */
.thumb .cover-photo{width:100%;height:100%;object-fit:cover;display:block;}
.article-cover .cover-photo--hero{width:100%;max-height:440px;object-fit:cover;border-radius:18px;display:block;}

/* Шрифты основного сайта etc.moscow — для визуального единства:
   Magnet Trial (основной текст) и Rhythmic (рукописные акценты).
   Файлы в fonts/ (грузятся относительно style.css: /static/fonts/…). */
@font-face{font-family:'Magnet Trial';src:url("fonts/MagnetTrial-Regular.woff") format("woff");font-weight:400;font-display:swap;}
@font-face{font-family:'Magnet Trial';src:url("fonts/MagnetTrial-SemiBold.woff") format("woff");font-weight:600;font-display:swap;}
@font-face{font-family:'Rhythmic';src:url("fonts/Rhythmic_RUS.woff") format("woff");font-weight:400;font-display:swap;}
/* --- новые глифы обложек (разнообразие, меньше повторов) --- */
[data-icon="megaphone"] .jc-photo::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23f5f3ee' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 20l20-7v22L6 28z'/%3E%3Cpath d='M11 28l3 9'/%3E%3Cpath d='M30 18c4 1 4 11 0 12M34 14c7 2 7 18 0 20'/%3E%3C/svg%3E");}
[data-icon="bars"] .jc-photo::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23f5f3ee' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='26' width='7' height='14'/%3E%3Crect x='17' y='11' width='7' height='29'/%3E%3Crect x='28' y='30' width='7' height='10'/%3E%3Crect x='39' y='19' width='7' height='21'/%3E%3C/svg%3E");}
[data-icon="rocket"] .jc-photo::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23f5f3ee' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M24 5c6 5 8 12 8 18l-3 6H19l-3-6c0-6 2-13 8-18z'/%3E%3Ccircle cx='24' cy='19' r='3'/%3E%3Cpath d='M19 29l-6 8 6-2M29 29l6 8-6-2'/%3E%3Cpath d='M21 35l3 6 3-6'/%3E%3C/svg%3E");}
[data-icon="bulb"] .jc-photo::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23f5f3ee' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M24 5a12 12 0 0 1 7 21c-1 1-2 2-2 4H19c0-2-1-3-2-4a12 12 0 0 1 7-21z'/%3E%3Cline x1='19' y1='38' x2='29' y2='38'/%3E%3Cline x1='21' y1='43' x2='27' y2='43'/%3E%3C/svg%3E");}
[data-icon="globe"] .jc-photo::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23f5f3ee' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='24' cy='24' r='18'/%3E%3Cline x1='6' y1='24' x2='42' y2='24'/%3E%3Cellipse cx='24' cy='24' rx='8' ry='18'/%3E%3C/svg%3E");}
[data-icon="chat"] .jc-photo::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23f5f3ee' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 10h32a3 3 0 0 1 3 3v16a3 3 0 0 1-3 3H20l-9 8v-8H8a3 3 0 0 1-3-3V13a3 3 0 0 1 3-3z'/%3E%3Ccircle cx='17' cy='21' r='1.7' fill='%23f5f3ee' stroke='none'/%3E%3Ccircle cx='24' cy='21' r='1.7' fill='%23f5f3ee' stroke='none'/%3E%3Ccircle cx='31' cy='21' r='1.7' fill='%23f5f3ee' stroke='none'/%3E%3C/svg%3E");}
[data-icon="coin"] .jc-photo::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23f5f3ee' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='24' cy='24' r='18'/%3E%3Cpath d='M20 16h5a5 5 0 0 1 0 10h-8'/%3E%3Cline x1='17' y1='21' x2='17' y2='33'/%3E%3Cline x1='14' y1='26' x2='27' y2='26'/%3E%3Cline x1='14' y1='30' x2='24' y2='30'/%3E%3C/svg%3E");}
[data-icon="funnel"] .jc-photo::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23f5f3ee' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10h34l-13 15v13l-8 4V25z'/%3E%3C/svg%3E");}

/* мобильное меню не должно оставаться открытым на десктопе (>1400px) */
@media (min-width:1401px){.mobile-menu{display:none !important;}}

/* десктоп: контейнер шапки 1:1 как на основном сайте (max-width 1340, отступ
   70px) — логотип встаёт к левому краю на ту же позицию (~148px), что и на
   etc.moscow. Контент ниже остаётся в своей сетке, мобайл не затрагиваем. */
@media (min-width:1401px){
  header .wrap{max-width:1340px;padding-left:70px;padding-right:70px;}
}