/* ===== Этап 0: Базовые стили, сброс и токены ===== */
:root{
  /* ПАЛИТРА: свежая, небанальная */
  --bg: #f7f7fb;
  --surface: #ffffff;
  --ink: #1f2937;
  --muted: #6b7280;
  --line: #e6e7ef;
  --primary: #5956e9;  /* индиго-фиолетовый акцент */
  --primary-ink: #ffffff;
  --accent: #10b981;   /* изумруд для вторичных действий */
  --shadow: 0 10px 30px rgba(17, 24, 39, .08);
  --radius: 16px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--ink);
  background:linear-gradient(180deg, var(--bg), #fff 60%);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.sr-only{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* Контейнер */
.container{width:min(1120px, 100% - 32px);margin-inline:auto}

/* Кнопки */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:12px 18px;border-radius:999px;border:1px solid transparent;
  font-weight:600;transition:.25s ease;cursor:pointer;
}
.btn--primary{background:var(--primary);color:var(--primary-ink);box-shadow:var(--shadow)}
.btn--primary:hover{transform:translateY(-1px);box-shadow:0 14px 34px rgba(89,86,233,.25)}
.btn--ghost{background:transparent;border-color:var(--line);color:var(--ink)}
.btn--ghost:hover{border-color:var(--primary);color:var(--primary)}

/* ===== Этап 1: Хедер ===== */
.site-header{
  position:sticky;top:0;z-index:50;background:rgba(255,255,255,.7);
  backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid var(--line)
}
.site-header__inner{display:flex;align-items:center;justify-content:space-between;min-height:64px}
.logo{display:inline-flex;align-items:center;gap:10px;font-weight:700}
.logo__text{font-family:"Playfair Display", serif;font-size:1.2rem;letter-spacing:.2px}
.logo__mark{
  width:22px;height:22px;border-radius:6px;display:inline-block;position:relative;
  background: conic-gradient(from 210deg, var(--primary), #8b5cf6, var(--accent));
  box-shadow:0 6px 14px rgba(89,86,233,.25);
}
.site-header__toggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:10px;border:1px solid var(--line);
  background:#fff;box-shadow:var(--shadow);transition:.2s;cursor:pointer
}
.site-header__toggle:hover{border-color:var(--primary)}
.site-header__nav{display:none}
.site-nav__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.site-nav__item--cta{margin-top:6px}
.site-nav__link{
  padding:8px 10px;border-radius:10px;position:relative;transition:.2s;
}
.site-nav__link:after{
  content:"";position:absolute;left:10px;right:10px;bottom:6px;height:2px;
  background:var(--primary);transform:scaleX(0);transform-origin:left;transition:.25s ease;
}
.site-nav__link:hover{color:var(--primary)}
.site-nav__link:hover:after{transform:scaleX(1)}

/* Мобильное выпадающее меню */
.site-header.open .site-header__nav{display:block;position:absolute;left:0;right:0;top:64px;background:#fff;border-bottom:1px solid var(--line)}
.site-header.open .site-nav__list{padding:12px}

/* С 900px — десктопная шапка */
@media (min-width:900px){
  .site-header__toggle{display:none}
  .site-header__nav{display:block}
  .site-nav__list{flex-direction:row;gap:18px;align-items:center}
  .site-nav__item--cta{margin-top:0;margin-left:8px}
}

/* ===== Этап 2: Футер ===== */
.site-footer{background:#0f1220;color:#e5e7eb;margin-top:56px}
.site-footer a{color:#e5e7eb}
.site-footer__grid{
  display:grid;gap:28px;padding:36px 0;
  grid-template-columns:1fr;
}
.site-footer__logo .logo__text{color:#fff}
.site-footer__note{color:#cbd5e1;margin-top:10px}
.site-footer__title{font-weight:700;margin:6px 0 10px}
.site-footer__links, .site-footer__contacts{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.site-footer__contacts i{width:18px;height:18px;vertical-align:-3px;margin-right:8px}
.site-footer__social{display:flex;gap:12px;margin-top:12px}
.site-footer__social a{
  width:36px;height:36px;border:1px solid #2b2f45;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;
  transition:.2s;background:rgba(255,255,255,.03)
}
.site-footer__social a:hover{border-color:#6366f1}
.site-footer__bottom{border-top:1px solid #22263a;padding:14px 0;background:#0c1020}
.site-footer__bottom-inner{display:flex;align-items:center;justify-content:space-between;gap:10px}
.to-top{display:inline-flex;align-items:center;gap:6px;opacity:.9}
.to-top:hover{opacity:1}

@media (min-width:900px){
  .site-footer__grid{
    grid-template-columns:1.2fr .8fr .8fr 1fr;
  }
}

/* ===== Заглушки для будущих секций main ===== */
.hero{min-height:60vh;background:#fff}

/* ===== Этап 5.2 (заранее): стили для текстовых страниц политик ===== */
.pages{padding:48px 0}
.pages .container{width:min(860px, 100% - 32px)}
.pages h1{
  font-family:"Playfair Display", serif;font-weight:700;font-size:2rem;margin:.2em 0 .6em
}
.pages h2{font-weight:700;margin:1.2em 0 .5em}
.pages p{color:#374151;margin:.75em 0}
.pages ul{padding-left:20px;margin:1em 0}
.pages li{margin:.4em 0}
.pages a{color:var(--primary);text-decoration:underline}
.pages strong{font-weight:700}
.pages .container{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:28px;box-shadow:var(--shadow)
}

/* Утилиты */
.link-cta{color:#a5b4fc}

/* ===== Этап 3: HERO ===== */
.hero{
  position:relative;isolation:isolate;overflow:hidden;
  padding: clamp(48px, 8vw, 96px) 0;
  background: radial-gradient(1200px 600px at 20% -10%, rgba(89,86,233,.10), transparent 60%),
              radial-gradient(1000px 500px at 90% 10%, rgba(16,185,129,.10), transparent 60%),
              #fff;
}
.hero__bg{position:absolute;inset:-20% -10% auto -10%; z-index:-1; pointer-events:none;}
.hero__blob{
  position:absolute;filter:blur(30px);opacity:.45;mix-blend-mode:multiply;transform:translateZ(0);
  width:38vmax;height:38vmax;border-radius:50%;
  background:radial-gradient(circle at 30% 30%, #8b5cf6, #5956e9 60%, #4338ca);
  animation: heroFloat 14s ease-in-out infinite;
}
.hero__blob--a{top:-8%; left:-6%}
.hero__blob--b{
  right:-10%; top:10%;
  background:radial-gradient(circle at 70% 40%, #34d399, #10b981 60%, #059669);
  animation-duration: 16s; animation-delay: .6s;
}

@keyframes heroFloat{
  0%,100%{ transform: translate3d(0,0,0) scale(1) rotate(0deg); }
  50%{ transform: translate3d(2%, -2%, 0) scale(1.05) rotate(3deg); }
}

.hero__grid{
  display:grid; gap:28px; align-items:center;
  grid-template-columns: 1fr;
}
@media (min-width: 980px){
  .hero__grid{ grid-template-columns: 1.1fr .9fr; gap:42px; }
}

.hero__content{ max-width:680px; }
.hero__title{
  font-family:"Playfair Display", serif;
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  line-height:1.15; margin: 0 0 .5em;
  letter-spacing:.2px;
}
.hero__lead{
  color:var(--muted);
  font-size: clamp(1rem, 1.2vw, 1.125rem);
  margin: 0 0 1.2em;
}
.hero__cta{ display:flex; gap:12px; flex-wrap:wrap; margin: 0 0 1.2em; }

.hero__stats{
  list-style:none; padding:0; margin: 8px 0 0;
  display:flex; gap:22px; flex-wrap:wrap;
}
.hero__stat{ min-width:120px }
.hero__stat-number{
  display:block; font-weight:800; font-size: clamp(1.4rem, 2.6vw, 2rem);
  letter-spacing:.4px;
}
.hero__stat-label{ color:var(--muted); font-size:.95rem }

.hero__visual{ position:relative }
.hero-figure{
  background:var(--surface); border:1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding:10px;
  transform: perspective(1200px) rotateX(0deg) rotateY(0deg) translateZ(0);
  transition: transform .2s ease-out;
}
.hero-figure__img{
  width:100%; height:auto; border-radius: calc(var(--radius) - 6px);
}
.hero-figure__cap{
  color:var(--muted); font-size:.875rem; padding:6px 8px 2px;
}

/* Небольшие появления для элементов с data-animate */
[data-animate]{
  opacity:0; transform: translateY(8px); transition: opacity .6s ease, transform .6s ease;
}
[data-animate].is-inview{
  opacity:1; transform:none;
}


/* ===== Этап 3: Экспертиза ===== */
.expertise{padding: clamp(36px, 7vw, 80px) 0}
.expertise__head{margin-bottom:20px}
.expertise__title{
  font-family:"Playfair Display", serif;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  margin:0 0 .25em;
}
.expertise__lead{color:var(--muted); max-width: 62ch}

.expertise__grid{
  display:grid; gap:16px;
  grid-template-columns: 1fr;
}
@media (min-width:700px){
  .expertise__grid{ grid-template-columns: 1fr 1fr }
}
@media (min-width:1024px){
  .expertise__grid{ grid-template-columns: 1fr 1fr 1fr }
}

.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.expertise-card{
  display:flex; flex-direction:column; padding:16px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.expertise-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(17,24,39,.10);
  border-color: rgba(89,86,233,.35);
}
.expertise-card__icon{
  width:42px;height:42px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg, rgba(89,86,233,.12), rgba(16,185,129,.12));
  border:1px solid var(--line); margin-bottom:10px;
}
.expertise-card__icon i{width:22px;height:22px}
.expertise-card__title{margin:.2em 0 .35em;font-size:1.05rem}
.expertise-card__text{color:var(--muted);margin:0 0 .8em}
.expertise-card__list{
  list-style:none;padding:0;margin:0 0 1em;display:grid;gap:.35em
}
.expertise-card__list li{
  position:relative;padding-left:22px
}
.expertise-card__list li::before{
  content:"";position:absolute;left:0;top:.58em;width:10px;height:10px;border-radius:50%;
  background: radial-gradient(circle at 30% 30%, #8b5cf6, #5956e9 60%);
  opacity:.9;
}
.expertise-card__cta{margin-top:auto;display:flex;gap:8px;flex-wrap:wrap}

/* ===== Этап 3: Форматы ===== */
.formats{padding: clamp(36px, 7vw, 84px) 0; background:#fff}
.formats__title{
  font-family:"Playfair Display", serif;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  margin:0 0 .25em;
}
.formats__lead{color:var(--muted); max-width: 62ch; margin:0}

/* Табы */
.tabs{--tab-bg:#f5f6ff; --tab-bdr:var(--line)}
.tabs__list{
  display:grid; grid-template-columns:1fr 1fr; gap:10px;
  margin:16px 0 14px;
}
@media (min-width:900px){
  .tabs__list{grid-template-columns: repeat(4, 1fr)}
}
.tabs__tab{
  display:flex; align-items:center; gap:10px; justify-content:center;
  padding:10px 12px; border-radius:12px; border:1px solid var(--tab-bdr);
  background:var(--surface); cursor:pointer; font-weight:600; transition:.18s ease;
}
.tabs__tab i{width:18px;height:18px}
.tabs__tab:hover{border-color: rgba(89,86,233,.45)}
.tabs__tab.is-active{
  background:linear-gradient(135deg, rgba(89,86,233,.12), rgba(16,185,129,.12));
  border-color: rgba(89,86,233,.55);
  box-shadow: var(--shadow);
}

/* Панели */
.tabs__panels{margin-top:12px}
.tabs__panel{outline:none}
.formats-panel{
  display:grid; gap:14px; align-items:start;
  grid-template-columns: 1fr;
}
@media (min-width:960px){
  .formats-panel{ grid-template-columns: 1.1fr .9fr; gap:22px }
}
.formats-panel__content{padding:6px 0}
.formats-panel__title{margin:.2em 0 .35em; font-size:1.25rem}
.formats-panel__text{color:var(--muted); margin:0 0 .8em}
.formats-panel__list{
  list-style:none; padding:0; margin:0 0 1em; display:grid; gap:.35em
}
.formats-panel__list li{position:relative; padding-left:22px}
.formats-panel__list li::before{
  content:""; position:absolute; left:0; top:.58em; width:10px; height:10px; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, #34d399, #10b981 60%);
  opacity:.9;
}
.formats-panel__cta{display:flex; gap:10px; flex-wrap:wrap}
.formats-panel__media{padding:10px}
.formats-panel__media img{width:100%; height:auto; border-radius: calc(var(--radius) - 6px)}

/* ===== Этап 3: Кейсы ===== */
.cases{padding: clamp(36px, 7vw, 84px) 0; background:linear-gradient(180deg,#fff,#fafafe)}
.cases__title{
  font-family:"Playfair Display", serif;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  margin:0 0 .25em;
}
.cases__lead{color:var(--muted); max-width:62ch; margin:0 0 8px}

.cases__grid{
  display:grid; gap:16px; grid-template-columns:1fr;
}
@media (min-width:960px){
  .cases__grid{ grid-template-columns: 1fr 1fr 1fr }
}

.case{display:flex;flex-direction:column;overflow:hidden}
.case__media img{width:100%;height:auto;display:block}
.case__body{padding:14px}
.case__meta{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 6px}
.case__tag{
  display:inline-flex;align-items:center;padding:6px 10px;border-radius:999px;
  border:1px solid var(--line); background:#fff; font-size:.85rem
}
.case__title{margin:.2em 0 .35em;font-size:1.1rem}
.case__text{color:var(--muted);margin:0 0 .8em}

.case__metrics{list-style:none;padding:0;margin:0 0 1em;display:grid;gap:10px}
.metric{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center}
.metric__label{font-size:.95rem;color:#374151}
.metric__value{font-weight:700}
.metric__bar{
  grid-column:1 / -1; height:10px; border-radius:999px; position:relative; overflow:hidden;
  background: #eef0ff; border:1px solid var(--line);
}
.metric__bar::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:0%;
  background: linear-gradient(90deg, #5956e9, #8b5cf6 60%, #10b981);
  border-radius:999px; transition: width .9s cubic-bezier(.2,.7,.2,1);
}

.case__cta{display:flex;gap:10px;flex-wrap:wrap}


/* ===== Этап 3: Блог ===== */
.blog{padding: clamp(36px, 7vw, 84px) 0}
.blog__title{
  font-family:"Playfair Display", serif;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  margin:0 0 .25em;
}
.blog__lead{color:var(--muted); max-width:62ch; margin:0 0 10px}

.blog__grid{
  display:grid; gap:16px; grid-template-columns:1fr;
}
@media (min-width:900px){
  .blog__grid{ grid-template-columns: 1fr 1fr 1fr }
}

.post{display:flex;flex-direction:column;overflow:hidden}
.post__media{display:block;overflow:hidden;border-bottom:1px solid var(--line)}
.post__media img{width:100%;height:auto;display:block;transition:transform .35s ease}
.post:hover .post__media img{transform:scale(1.03)}
.post__body{padding:12px}
.post__meta{display:flex;align-items:center;gap:8px;color:#6b7280;font-size:.9rem;margin-bottom:6px}
.post__title{margin:.2em 0 .35em;font-size:1.05rem}
.post__title a{text-decoration:none}
.post__excerpt{color:var(--muted);margin:0 0 .8em}
.post__tags{list-style:none;padding:0;margin:0 0 1em;display:flex;flex-wrap:wrap;gap:8px}
.post__tags li{
  padding:6px 10px;border-radius:999px;border:1px solid var(--line);background:#fff;font-size:.85rem
}
.post__cta{display:flex;gap:8px;flex-wrap:wrap}

.blog__more{display:flex;justify-content:center;margin-top:14px}
.blog__more-btn i{width:18px;height:18px}

/* ===== Этап 3: О нас ===== */
.about{padding: clamp(36px, 7vw, 84px) 0; background:#fff}
.about__title{
  font-family:"Playfair Display", serif;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  margin:0 0 .25em;
}
.about__lead{color:var(--muted); max-width:62ch; margin:0 0 10px}

.about__grid{
  display:grid; gap:16px; grid-template-columns:1fr;
}
@media (min-width:1000px){
  .about__grid{ grid-template-columns: 1fr 1fr; }
}
.about__card{padding:14px}
.about__card-title{
  display:flex; align-items:center; gap:10px;
  margin:.2em 0 .6em; font-size:1.2rem;
}
.about__card-title i{width:20px;height:20px}
.about__card-text{color:var(--muted); margin:0 0 .8em}
.about__bullets{list-style:none; padding:0; margin:0 0 1em; display:grid; gap:.35em}
.about__bullets li{position:relative; padding-left:22px}
.about__bullets li::before{
  content:""; position:absolute; left:0; top:.58em; width:10px; height:10px; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, #8b5cf6, #5956e9 60%); opacity:.9;
}
.about__cta{display:flex; gap:10px; flex-wrap:wrap}

.timeline{
  list-style:none; margin:0; padding:6px 0 0; border-left:2px solid var(--line)
}
.timeline__item{position:relative; padding:0 0 14px 16px}
.timeline__dot{
  position:absolute; left:-6px; top:.35em; width:10px; height:10px; border-radius:50%;
  background: linear-gradient(135deg, #5956e9, #10b981); box-shadow:0 0 0 3px #fff;
  border:1px solid var(--line);
}
.timeline__content h4{margin:.1em 0 .25em; font-size:1.025rem}
.timeline__content p{color:var(--muted); margin:0}

.values{list-style:none; padding:0; margin:0; display:grid; gap:10px}
.values__item{display:grid; grid-template-columns:auto 1fr; gap:10px; align-items:start}
.values__item i{width:20px;height:20px;margin-top:2px}
.about__media{overflow:hidden}
.about__media img{width:100%;height:auto;display:block}
.about__cap{color:var(--muted); font-size:.9rem; padding:8px}

/* ===== Этап 4: Контакты ===== */
.contact{padding: clamp(42px, 7.5vw, 96px) 0; background:linear-gradient(180deg,#fff,#f7f7fb)}
.contact__grid{
  display:grid; gap:16px; grid-template-columns:1fr;
}
@media (min-width:980px){
  .contact__grid{ grid-template-columns: .95fr 1.05fr; gap:22px }
}

.contact__title{
  font-family:"Playfair Display", serif;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  margin:.1em 0 .25em;
}
.contact__lead{color:var(--muted); margin:0 0 10px}
.contact__highlights{list-style:none;padding:0;margin:10px 0 14px;display:grid;gap:8px}
.contact__highlights li{display:flex;align-items:center;gap:10px;color:#374151}
.contact__highlights i{width:18px;height:18px}
.contact__meta{padding:12px}
.contact__list{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.contact__list i{width:18px;height:18px;vertical-align:-3px;margin-right:8px}

.contact__form-wrap{padding:14px}
.contact-form{display:grid;gap:12px}
.contact-form__field{display:grid;gap:6px}
.contact-form__field--inline .captcha{display:flex;gap:8px;align-items:center}
.contact-form__label{font-weight:600}
.contact-form__input{
  width:100%; padding:12px 14px; border-radius:12px;
  border:1px solid var(--line); background:#fff; transition: border-color .18s ease, box-shadow .18s ease;
}
.contact-form__input:focus{border-color:var(--primary); box-shadow:0 0 0 4px rgba(89,86,233,.12)}

.captcha__task{display:inline-flex;align-items:center;gap:8px;padding:8px 10px;border:1px dashed var(--line);border-radius:10px;background:#fff}
.captcha__input{max-width:120px}
.captcha__refresh i{width:18px;height:18px}

.contact-form__agree{
  display:flex; gap:10px; align-items:flex-start; font-size:.95rem; color:#374151
}
.contact-form__agree a{color:var(--primary); text-decoration:underline}

.contact-form__actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}
.contact-form__success,
.contact-form__fail{
  display:flex; align-items:center; gap:8px; margin:6px 0 0;
  padding:10px 12px; border-radius:12px; font-weight:600;
}
.contact-form__success{color:#065f46; background:#ecfdf5; border:1px solid #d1fae5}
.contact-form__fail{color:#7c2d12; background:#fff7ed; border:1px solid #ffedd5}

.contact-form__error{color:#b91c1c;font-size:.85rem;min-height:1.1em}

/* Состояния кнопки отправки */
.btn[aria-busy="true"]{
  opacity:.85; pointer-events:none;
}
.spin{animation:sp 1s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}


/* ===== Этап 5: Cookie Pop-up ===== */
.cookie{
  position: fixed; left: 0; right: 0; bottom: 16px; z-index: 60;
  display: grid; place-items: center; padding: 0 12px;
}
.cookie[hidden]{display:none}
.cookie__inner{
  width: min(960px, 100%);
  background: #0f1220; color:#e5e7eb;
  border: 1px solid #22263a; border-radius: 14px;
  box-shadow: 0 18px 40px rgba(0,0,0,.25);
  display: grid; gap: 12px; grid-template-columns: 1fr auto;
  padding: 12px;
  transform: translateY(16px); opacity: 0;
  transition: transform .25s ease, opacity .25s ease;
}
.cookie.is-visible .cookie__inner{ transform: none; opacity: 1; }

.cookie__text{display:flex; gap:10px; align-items:flex-start}
.cookie__text i{width:20px;height:20px;flex:0 0 auto;margin-top:2px}
.cookie__text a{color:#a5b4fc; text-decoration:underline}

.cookie__actions{display:flex; gap:8px; align-items:center}
.cookie__actions .btn{white-space:nowrap}
@media (max-width: 640px){
  .cookie__inner{ grid-template-columns: 1fr; }
  .cookie__actions{ justify-content: flex-end; }
}