/* ══════════════════════════════════════════════════════
   Buzz Media — landing
   Направление: kinetic brutalism, цвета взяты из логотипа
   ══════════════════════════════════════════════════════ */

:root{
  --orange:#D8572D;
  --orange-deep:#B8451F;
  --blue:#007BB6;
  --ink:#101012;
  --ink-soft:#2A2A2E;
  --paper:#F4F1EC;
  --paper-warm:#EDE7DE;
  --white:#FFFFFF;
  --line:rgba(16,16,18,.14);
  --line-light:rgba(255,255,255,.18);

  --f-display:'Unbounded',system-ui,sans-serif;
  --f-body:'Manrope',system-ui,sans-serif;

  --wrap:1240px;
  --gut:clamp(20px,5vw,64px);
  --sp-section:clamp(72px,10vw,150px);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:clamp(15px,1.05vw,17px);
  line-height:1.65;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--f-display);font-weight:800;line-height:1.02;letter-spacing:-.02em;margin:0}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
blockquote{margin:0}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:var(--white);padding:12px 20px;font-weight:700}
.skip-link:focus{left:12px;top:12px}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px}

/* ── КНОПКИ ─────────────────────────────────────────── */
.btn{
  --btn-bg:var(--orange);
  --btn-fg:var(--white);
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--btn-bg);color:var(--btn-fg);
  font-family:var(--f-display);font-weight:600;font-size:.9rem;
  text-decoration:none;cursor:pointer;
  padding:16px 30px;border:2px solid var(--btn-bg);border-radius:0;
  transition:background .18s ease,color .18s ease,border-color .18s ease,transform .18s ease;
}
.btn:hover{background:var(--ink);border-color:var(--ink);color:var(--white);transform:translateY(-2px)}
.btn--sm{padding:11px 20px;font-size:.8rem}
.btn--lg{padding:19px 38px;font-size:1rem}
.btn--wide{width:100%;max-width:520px;margin-top:44px}
.btn--ghost{--btn-bg:transparent;--btn-fg:var(--ink);border-color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:var(--white)}
.section--ink .btn--ghost{--btn-fg:var(--white);border-color:var(--white)}
.section--ink .btn:hover{background:var(--white);border-color:var(--white);color:var(--ink)}

/* ── НАВИГАЦИЯ ──────────────────────────────────────── */
.nav{
  position:sticky;top:0;z-index:100;
  background:rgba(244,241,236,.9);
  backdrop-filter:blur(14px);
  border-bottom:2px solid var(--ink);
}
.nav__inner{display:flex;align-items:center;gap:28px;min-height:74px}
.nav__brand{
  display:flex;align-items:center;gap:11px;text-decoration:none;
  font-family:var(--f-display);font-weight:800;font-size:1.05rem;letter-spacing:-.02em;
  margin-right:auto;
}
.nav__brand img{border-radius:50%}
.nav__brand em{font-style:normal;color:var(--orange)}
.nav__links{display:flex;gap:26px}
.nav__links a{text-decoration:none;font-size:.86rem;font-weight:700;padding:6px 0;position:relative}
.nav__links a::after{content:'';position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--orange);transition:width .22s ease}
.nav__links a:hover::after{width:100%}

.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;padding:8px;cursor:pointer}
.burger span{width:26px;height:2px;background:var(--ink);transition:transform .22s ease,opacity .22s ease}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ── HERO ───────────────────────────────────────────── */
.hero{position:relative;padding:clamp(70px,11vw,140px) 0 clamp(56px,8vw,110px);overflow:hidden}
.hero__grid{
  position:absolute;inset:0;pointer-events:none;
  background-image:repeating-linear-gradient(
    115deg,
    transparent 0 78px,
    rgba(216,87,45,.09) 78px 96px,
    transparent 96px 174px,
    rgba(0,123,182,.07) 174px 190px
  );
}
.hero__inner{position:relative}
.eyebrow{
  font-family:var(--f-display);font-size:.74rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--orange);margin-bottom:26px;
}
.hero__title{font-size:clamp(2.6rem,8.2vw,6.6rem);margin-bottom:32px}
.mark{display:inline-block;background:var(--orange);color:var(--white);padding:0 .18em .06em;transform:rotate(-1.1deg)}
.hero__lead{max-width:620px;font-size:clamp(1rem,1.6vw,1.28rem);line-height:1.55;color:var(--ink-soft)}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:42px}

/* ── MARQUEE ────────────────────────────────────────── */
.marquee{background:var(--ink);color:var(--white);border-block:2px solid var(--ink);overflow:hidden;padding:19px 0}
.marquee__track{display:flex;align-items:center;gap:38px;width:max-content;animation:slide 34s linear infinite}
.marquee__track span{font-family:var(--f-display);font-weight:800;font-size:clamp(1.15rem,2.4vw,1.9rem);white-space:nowrap}
.marquee__track i{color:var(--orange);font-style:normal;font-size:.85rem}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ── ЦИФРЫ ──────────────────────────────────────────── */
.stats{background:var(--orange);color:var(--white);padding:clamp(46px,6vw,74px) 0}
.stats__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:rgba(255,255,255,.28)}
.stat{background:var(--orange);padding:clamp(20px,2.6vw,34px) clamp(16px,2vw,28px)}
.stat b{display:block;font-family:var(--f-display);font-weight:800;font-size:clamp(1.9rem,4.4vw,3.4rem);line-height:1;margin-bottom:10px}
.stat span{font-size:.88rem;line-height:1.4}

/* ── СЕКЦИИ ─────────────────────────────────────────── */
.section{padding:var(--sp-section) 0}
.section--ink{background:var(--ink);color:var(--paper)}
.section--ink .eyebrow{color:var(--orange)}
.section--paper{background:var(--paper-warm)}

.section__head{max-width:800px;margin-bottom:clamp(44px,6vw,78px)}
.section__title{font-size:clamp(2rem,5vw,3.7rem);margin-bottom:24px}
.section__lead{font-size:clamp(1rem,1.4vw,1.15rem);color:var(--ink-soft);max-width:640px}
.section--ink .section__lead{color:rgba(244,241,236,.78)}

/* ── КАРТОЧКИ НАПРАВЛЕНИЙ ───────────────────────────── */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(288px,1fr));gap:2px;background:var(--line)}
.card{background:var(--paper);padding:clamp(28px,3.2vw,42px);transition:background .22s ease,color .22s ease}
.card:hover{background:var(--ink);color:var(--paper)}
.card:hover .card__key{color:var(--orange)}
.card__key{font-family:var(--f-display);font-weight:800;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:var(--orange);margin-bottom:20px}
.card h3{font-size:1.32rem;margin-bottom:14px}
.card p{font-size:.93rem;line-height:1.62}

/* ── СПИСОК УСЛУГ ───────────────────────────────────── */
.list{border-top:1px solid var(--line-light)}
.list__row{
  display:grid;grid-template-columns:88px 1fr;gap:clamp(16px,3vw,44px);
  padding:clamp(24px,3vw,36px) 0;border-bottom:1px solid var(--line-light);
  transition:padding-left .22s ease;
}
.list__row:hover{padding-left:14px}
.list__idx{font-family:var(--f-display);font-weight:800;font-size:1.5rem;color:var(--orange)}
.list__row h3{font-size:clamp(1.15rem,2vw,1.6rem);margin-bottom:10px}
.list__row p{font-size:.95rem;line-height:1.62;color:rgba(244,241,236,.74);max-width:760px}

/* ── КЕЙСЫ ──────────────────────────────────────────── */
.cases{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:clamp(20px,3vw,38px)}
.case{border:2px solid var(--ink);padding:clamp(26px,3.2vw,42px);background:var(--white)}
.case__tag{font-family:var(--f-display);font-size:.74rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--orange);margin-bottom:18px}
.case__title{font-size:clamp(1.25rem,2.2vw,1.75rem);margin-bottom:18px}
.case__text{font-size:.95rem;line-height:1.66;color:var(--ink-soft);margin-bottom:26px}
.case__facts{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;border-top:1px solid var(--line);padding-top:22px}
.case__facts b{display:block;font-family:var(--f-display);font-size:.68rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--orange);margin-bottom:6px}
.case__facts span{font-size:.85rem;line-height:1.35;font-weight:500}
.note{margin-top:clamp(30px,4vw,52px);font-size:.93rem;color:var(--ink-soft);max-width:720px}

/* ── О НАС ──────────────────────────────────────────── */
.about{display:grid;grid-template-columns:1.55fr 1fr;gap:clamp(34px,5vw,80px);align-items:start}
.about__text p{margin-bottom:20px;font-size:1rem;line-height:1.72;color:var(--ink-soft)}
.quote{margin-top:34px;border-left:4px solid var(--orange);padding:6px 0 6px 24px}
.quote p{font-family:var(--f-display);font-weight:600;font-size:clamp(1.02rem,1.7vw,1.3rem);line-height:1.38;color:var(--ink);margin-bottom:14px}
.quote footer{font-size:.85rem;font-weight:700;color:var(--orange)}
.about__side{background:var(--ink);color:var(--paper);padding:clamp(26px,3vw,40px)}
.about__side h3{font-size:1.16rem;margin-bottom:22px;color:var(--white)}
.about__side li{padding:15px 0;border-bottom:1px solid var(--line-light);font-size:.92rem;line-height:1.55}
.about__side li:last-child{border-bottom:0}
.about__side b{color:var(--orange)}

/* ── КОНТАКТЫ ───────────────────────────────────────── */
.contacts{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:2px;background:var(--line-light)}
.contact{background:var(--ink);padding:clamp(22px,2.6vw,34px);text-decoration:none;display:flex;flex-direction:column;gap:9px;transition:background .2s ease}
.contact:hover{background:var(--orange)}
.contact__label{font-family:var(--f-display);font-size:.7rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--orange);transition:color .2s ease}
.contact:hover .contact__label{color:var(--white)}
.contact__value{font-size:1.02rem;font-weight:700;line-height:1.3;word-break:break-word}

/* ── ФУТЕР ──────────────────────────────────────────── */
.footer{background:var(--ink);color:rgba(244,241,236,.64);padding:46px 0;border-top:1px solid var(--line-light)}
.footer__inner{display:flex;flex-direction:column;gap:9px}
.footer__brand{font-family:var(--f-display);font-weight:800;font-size:1.35rem;color:var(--paper)}
.footer__brand em{font-style:normal;color:var(--orange)}
.footer__meta{font-size:.84rem}

/* ── ПОЯВЛЕНИЕ ПРИ СКРОЛЛЕ ──────────────────────────── */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .55s ease}
.reveal.is-in{opacity:1;transform:none}

/* ── МОБИЛЬНАЯ ВЕРСТКА ──────────────────────────────── */
@media (max-width:1000px){
  .about{grid-template-columns:1fr}
}
@media (max-width:820px){
  .nav__cta{display:none}
  .burger{display:flex}
  .nav__links{
    position:fixed;inset:74px 0 auto;flex-direction:column;gap:0;
    background:var(--paper);border-bottom:2px solid var(--ink);
    padding:8px var(--gut) 26px;transform:translateY(-135%);transition:transform .3s ease;
  }
  .nav__links.is-open{transform:none}
  .nav__links a{padding:16px 0;border-bottom:1px solid var(--line);font-size:1rem}
  .nav__links a::after{display:none}

  .stats__grid{grid-template-columns:repeat(2,1fr)}
  .list__row{grid-template-columns:1fr;gap:10px}
  .list__idx{font-size:1.15rem}
  .list__row:hover{padding-left:0}
  .case__facts{grid-template-columns:1fr;gap:16px}
  .hero__cta .btn{width:100%}
  .btn--wide{max-width:none}
}
@media (max-width:480px){
  .stats__grid{grid-template-columns:1fr}
  .marquee__track{gap:24px}
}

/* ── УВАЖЕНИЕ К НАСТРОЙКАМ ДВИЖЕНИЯ ─────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
  .marquee__track{animation:none}
}