/* ====== Global (Этап 0) ====== */
:root{
  --color-bg: #f8fafc;
  --color-surface: #ffffff;
  --color-text: #111827;
  --color-muted: #6b7280;
  --color-border: #e5e7eb;
  --color-primary: #3a5bd9;   /* индиго-синий */
  --color-accent:  #0ea5a8;   /* тёплый бирюзовый */
  --radius-lg: 16px;
  --radius-sm: 10px;
  --shadow-sm: 0 1px 2px rgba(17,24,39,.06), 0 1px 1px rgba(17,24,39,.04);
  --shadow-md: 0 10px 20px rgba(17,24,39,.07);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, "Inter", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text);
  background: radial-gradient(1200px 600px at 20% -10%, rgba(14,165,168,.06), transparent 60%),
              radial-gradient(800px 500px at 110% 0%, rgba(58,91,217,.06), transparent 60%),
              var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
a:focus{outline: 3px solid rgba(58,91,217,.35); outline-offset: 2px;}
.container{width:min(1120px, 92%); margin-inline:auto}

/* Типографика */
h1,h2,h3{line-height:1.2; margin:0 0 .6rem}
h1{font-size: clamp(28px, 4.8vw, 44px); font-weight: 800}
h2{font-size: clamp(22px, 3vw, 28px); font-weight: 700}
h3{font-size: 18px; font-weight: 700}

/* Кнопки */
.button{
  display:inline-flex; align-items:center; gap:.6rem;
  background: var(--color-primary);
  color:#fff; border: none; border-radius: 999px;
  padding: .8rem 1.1rem; font-weight: 700; letter-spacing:.2px;
  box-shadow: var(--shadow-sm);
  transition: transform .12s ease, box-shadow .2s ease, background .2s ease;
}
.button:hover{ transform: translateY(-1px); box-shadow: var(--shadow-md); }
.button:active{ transform: translateY(0); }
.button--ghost{
  background: #fff; color: var(--color-primary); border:1px solid var(--color-border);
}

/* ====== Header (Этап 1) ====== */
.header{
  position: sticky; top:0; z-index: 1000;
  background: rgba(255,255,255,.8);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--color-border);
}
.header__container{
  display:flex; align-items:center; justify-content:space-between;
  padding:.8rem 0;
}
.logo{display:flex; align-items:center; gap:.6rem; font-weight:800; letter-spacing:.2px}
.logo__text{white-space:nowrap}
.logo__mark{
  width: 22px; height: 22px; border-radius: 6px;
  background:
    conic-gradient(from 180deg at 50% 50%, var(--color-primary), var(--color-accent));
  box-shadow: 0 0 0 3px rgba(14,165,168,.12);
  transform: rotate(12deg);
}

.nav{display:none}
.nav--open{display:block}
.nav__list{
  list-style:none; padding:0; margin:0;
  display:flex; flex-direction:column; gap:.4rem;
  background: var(--color-surface);
  position: absolute; left:0; right:0; top:100%;
  border-bottom: 1px solid var(--color-border);
  padding: .6rem .9rem .9rem;
}
.nav__item{}
.nav__link{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.6rem .7rem; border-radius: 10px; font-weight:600;
  color: var(--color-text);
  transition: background .2s ease, color .2s ease, transform .08s ease;
}
.nav__link:hover{ background: #eef2ff; color: var(--color-primary); transform: translateY(-1px); }
.nav__link--cta{
  color:#fff; background: var(--color-primary);
}
.nav__link--cta:hover{ background: #2746bf; color:#fff }

.nav__toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius: 10px;
  border:1px solid var(--color-border); background:#fff;
  transition: background .2s ease, border-color .2s ease, transform .12s ease;
}
.nav__toggle:hover{ background:#f3f4f6 }
.nav__toggle i{width:20px;height:20px}

/* >=768px */
@media (min-width: 768px){
  .nav{display:block; position:static}
  .nav__list{
    position:static; flex-direction:row; gap:.2rem; background:transparent; border:0; padding:0;
  }
  .nav__link{padding:.55rem .8rem}
  .nav__toggle{display:none}
}

/* ====== Заглушки секций main до наполнения (Этап 3 последует) ====== */
.section{padding: 56px 0}
.section--stub{
  border-top:1px dashed var(--color-border);
  border-bottom:1px dashed var(--color-border);
  background: linear-gradient(0deg, rgba(14,165,168,.04), rgba(58,91,217,.04));
}
.section__stub-img{
  width:84px; height:auto; margin-inline:auto; opacity:.35; filter:grayscale(1);
}
.section__stub-title{
  text-align:center; color: var(--color-muted); font-weight:600; margin-top: .6rem;
}

/* ====== Footer (Этап 2) ====== */
.footer{ margin-top: 28px; background: #fff; border-top: 1px solid var(--color-border); }
.footer__container{
  display:grid; gap:28px; padding: 28px 0;
  grid-template-columns: 1fr;
}
.footer__col--brand .footer__tagline{color:var(--color-muted); margin-top:.4rem}
.footer__title{font-size:14px; text-transform:uppercase; letter-spacing:.08em; color:var(--color-muted); margin-bottom:.6rem}
.footer__list{list-style:none; padding:0; margin:0; display:grid; gap:.35rem}
.footer__link{display:inline-flex; align-items:center; gap:.4rem; padding:.2rem 0}
.footer__link:hover{color:var(--color-primary)}
.footer__link--cta{font-weight:700; color: var(--color-primary)}
.footer__contacts{list-style:none; padding:0; margin:0; display:grid; gap:.5rem}
.footer__contact{display:flex; align-items:flex-start; gap:.5rem; color:var(--color-text)}
.footer__contact i{width:18px;height:18px; flex:0 0 18px; color:var(--color-primary)}

.footer__bottom{ border-top:1px solid var(--color-border); background:#fbfbfd }
.footer__bottom-container{
  display:flex; align-items:center; justify-content:space-between; padding: 12px 0;
}
.footer__copy{color:var(--color-muted); font-size:14px}
.footer__to-top{
  display:inline-flex; width:36px; height:36px; border-radius:10px;
  align-items:center; justify-content:center; border:1px solid var(--color-border); background:#fff;
  transition: transform .12s ease, box-shadow .2s ease;
}
.footer__to-top:hover{ transform: translateY(-2px); box-shadow: var(--shadow-sm)}

/* >=768px */
@media (min-width: 768px){
  .footer__container{
    grid-template-columns: 1.2fr 1fr 1fr 1.2fr;
  }
}

/* ====== Стили для страниц политик (для Этапа 5) ====== */
.pages{padding: 48px 0}
.pages .container{max-width: 880px}
.pages h1{font-size: clamp(28px, 4vw, 40px); margin-bottom: .6rem}
.pages h2{margin-top: 1.2rem}
.pages p{color:var(--color-text)}
.pages ul{padding-left:1.2rem}
.pages li{margin:.35rem 0}
.pages a{color: var(--color-primary); text-decoration: underline}

/* ====== Hero (Этап 3) ====== */
.hero{
  position: relative;
  min-height: clamp(68vh, 78vh, 86vh);
  display: grid; place-items: center;
  isolation: isolate;
  overflow: clip;
  background: radial-gradient(900px 500px at 0% 0%, rgba(14,165,168,.10), transparent 60%),
              radial-gradient(900px 500px at 100% 10%, rgba(58,91,217,.10), transparent 60%);
}
.hero__canvas{
  position:absolute; inset:0; width:100%; height:100%;
  z-index: 0; filter: blur(.3px) saturate(120%);
  opacity:.7;
}
.hero__container{
  position: relative; z-index: 1;
  padding: 76px 0 48px;
  text-align: center;
}
.hero__badge{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.35rem .6rem; border-radius: 999px; font-size: 13px;
  background:#fff; border:1px solid var(--color-border); box-shadow: var(--shadow-sm);
  color: var(--color-muted);
}
.hero__badge i{width:16px;height:16px;color:var(--color-primary)}

.hero__title{
  margin: .8rem auto .4rem;
  max-width: 16ch;
  font-size: clamp(30px, 6.2vw, 56px);
  font-weight: 800;
  letter-spacing: -0.02em;
}
.hero__subtitle{
  margin: .4rem auto 1.1rem;
  max-width: 54ch;
  color: var(--color-muted);
}

.hero__actions{
  display:flex; justify-content:center; gap:.6rem; flex-wrap:wrap;
  margin: .8rem 0 1.1rem;
}
.hero__cta i, .hero__cta-secondary i{width:18px;height:18px}

.hero__meta{
  list-style:none; padding:0; margin: 10px 0 0;
  display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap;
  color: var(--color-muted); font-weight:600; font-size: 14px;
}
.hero__meta-item{display:inline-flex; align-items:center; gap:.4rem;
  background: #fff; border:1px solid var(--color-border);
  padding:.35rem .6rem; border-radius: 999px;
}
.hero__meta-item i{width:16px;height:16px;color:var(--color-accent)}

/* Ротатор слов */
.hero__rotator{
  display:inline-block; position:relative; min-width: 10ch;
}
.hero__word{
  position:absolute; left:0; right:0; white-space:nowrap;
  opacity:0; transform: translateY(8px) scale(.98);
  transition: opacity .5s ease, transform .5s ease;
}
.hero__word--active{
  position:relative; opacity:1; transform: translateY(0) scale(1);
}

/* >=768px */
@media (min-width: 768px){
  .hero__container{ padding: 96px 0 72px; }
}

/* ====== Insights (Этап 3) ====== */
.insights{padding: 56px 0}
.insights__head{margin-bottom: 12px}
.insights__lead{color: var(--color-muted); max-width: 64ch}

.insights__filters{
  display:flex; flex-wrap:wrap; gap:.5rem; margin: 14px 0 18px;
}
.insights__filter{
  border:1px solid var(--color-border); background:#fff; color:var(--color-text);
  padding:.45rem .7rem; border-radius:999px; font-weight:600; font-size:14px;
  transition: background .2s ease, border-color .2s ease, transform .08s ease;
}
.insights__filter:hover{ transform: translateY(-1px); }
.insights__filter--active{
  background: #eef2ff; color: var(--color-primary); border-color: #d6dcff;
}

/* Grid */
.insights__grid{
  display:grid; gap: 14px; grid-template-columns: 1fr;
}
@media (min-width: 600px){
  .insights__grid{ grid-template-columns: 1fr 1fr; }
}
@media (min-width: 960px){
  .insights__grid{ grid-template-columns: 1fr 1fr 1fr; }
}

/* Card */
.card{
  display:flex; flex-direction:column; background:#fff; border:1px solid var(--color-border);
  border-radius: var(--radius-lg); overflow:hidden; box-shadow: var(--shadow-sm);
  transform: translateZ(0); transition: box-shadow .25s ease, transform .15s ease;
}
.card:hover{ box-shadow: var(--shadow-md); transform: translateY(-2px); }

.card__img{ width:100%; aspect-ratio: 16/9; object-fit: cover; background:#f3f4f6 }
.card__body{ padding: .9rem .9rem 1rem; display:grid; gap:.5rem }
.card__tags{ display:flex; gap:.4rem; flex-wrap:wrap }
.tag{
  display:inline-flex; align-items:center; gap:.3rem; font-size:12px; font-weight:700;
  padding:.25rem .5rem; border:1px solid var(--color-border); border-radius:999px; color: var(--color-muted);
  background:#fff;
}
.card__title{ font-size: 18px }
.card__text{ color: var(--color-text) }
.card__meta{
  display:flex; gap: .8rem; flex-wrap:wrap; color: var(--color-muted); font-size: 14px;
}
.card__meta i{ width:16px; height:16px; color: var(--color-accent) }
.card__actions{ margin-top: .2rem; display:flex; gap:.5rem; flex-wrap:wrap }
.card__cta i{ width:16px; height:16px }


/* ====== Cases (Этап 3) ====== */
.cases{padding: 56px 0}
.cases__head{margin-bottom: 12px}
.cases__lead{color: var(--color-muted); max-width: 62ch}

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

.case-card{
  display:flex; flex-direction:column; background:#fff; border:1px solid var(--color-border);
  border-radius: var(--radius-lg); overflow:hidden; box-shadow: var(--shadow-sm);
  transition: box-shadow .25s ease, transform .15s ease;
}
.case-card:hover{ box-shadow: var(--shadow-md); transform: translateY(-2px); }
.case-card__img{ width:100%; aspect-ratio: 16/9; object-fit:cover; background:#f3f4f6 }
.case-card__body{ padding: .9rem .9rem 1rem; display:grid; gap:.6rem }
.case-card__tags{ display:flex; gap:.4rem; flex-wrap:wrap }
.case-card__title{ font-size: 18px }

.case-card__kpis{
  list-style:none; padding:0; margin:0;
  display:flex; gap:.8rem; flex-wrap:wrap; color: var(--color-muted); font-size:14px;
}
.case-card__kpis i{ width:16px; height:16px; color: var(--color-accent) }

/* Accordion */
.accordion{ border-top:1px dashed var(--color-border); padding-top:.6rem }
.accordion__toggle{
  width:100%; display:flex; align-items:center; gap:.5rem; justify-content:space-between;
  background:#fff; border:1px solid var(--color-border); border-radius:10px;
  padding:.6rem .7rem; font-weight:700; cursor:pointer;
  transition: background .2s ease, transform .08s ease;
}
.accordion__toggle:hover{ transform: translateY(-1px); background:#f9fafb }
.accordion__toggle i{ width:18px; height:18px; transition: transform .2s ease; color: var(--color-primary) }
.accordion__toggle[aria-expanded="true"] i{ transform: rotate(180deg); }

.accordion__content{
  padding:.7rem .2rem 0;
  color: var(--color-text);
}
.accordion__content p{ margin:.4rem 0 }
.accordion__actions{ margin-top:.5rem }

/* Фильтры кейсов */
.cases__filters{
  margin-top: 16px; display:flex; gap:.5rem; flex-wrap:wrap;
}
.cases__filter{
  border:1px solid var(--color-border); background:#fff; color:var(--color-text);
  padding:.45rem .7rem; border-radius:999px; font-weight:600; font-size:14px;
  transition: background .2s ease, border-color .2s ease, transform .08s ease;
}
.cases__filter:hover{ transform: translateY(-1px); }
.cases__filter--active{ background:#eef2ff; color:var(--color-primary); border-color:#d6dcff }

/* ====== Tools (Этап 3) ====== */
.tools{padding: 56px 0}
.tools__lead{color: var(--color-muted); max-width: 62ch}
.tools__filters{ display:flex; gap:.5rem; flex-wrap:wrap; margin: 14px 0 18px; }
.tools__filter{
  border:1px solid var(--color-border); background:#fff; color:var(--color-text);
  padding:.45rem .7rem; border-radius:999px; font-weight:600; font-size:14px;
  transition: background .2s ease, border-color .2s ease, transform .08s ease;
}
.tools__filter:hover{ transform: translateY(-1px); }
.tools__filter--active{ background:#eef2ff; color:var(--color-primary); border-color:#d6dcff }

.tools__grid{ display:grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 660px){ .tools__grid{ grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px){ .tools__grid{ grid-template-columns: 1fr 1fr 1fr; } }

.tool-card{
  display:flex; flex-direction:column; background:#fff; border:1px solid var(--color-border);
  border-radius: var(--radius-lg); overflow:hidden; box-shadow: var(--shadow-sm);
  transition: box-shadow .25s ease, transform .15s ease;
}
.tool-card:hover{ box-shadow: var(--shadow-md); transform: translateY(-2px); }

.tool-card__img{ width:100%; aspect-ratio: 16/9; object-fit:cover; background:#f3f4f6 }
.tool-card__body{ padding: .9rem .9rem 1rem; display:grid; gap:.6rem }
.tool-card__tags{ display:flex; gap:.4rem; flex-wrap:wrap }
.tool-card__title{ font-size: 18px }
.tool-card__text{ color: var(--color-text) }
.tool-card__meta{ display:flex; gap:.8rem; flex-wrap:wrap; color: var(--color-muted); font-size:14px }
.tool-card__meta i{ width:16px; height:16px; color: var(--color-accent) }
.tool-card__actions{ display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.2rem }
.tool-card__preview i{ width:16px; height:16px }

/* Modal */
.modal{ position: fixed; inset:0; display:grid; place-items:center; z-index: 2000; }
.modal[hidden]{ display:none }
.modal__backdrop{ position:absolute; inset:0; background: rgba(17,24,39,.45); }
.modal__dialog{
  position: relative; z-index:1; width: min(720px, 92%); background:#fff; border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md); padding: 1rem;
}
.modal__close{
  position:absolute; top:10px; right:10px; display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:10px; border:1px solid var(--color-border); background:#fff;
}
.modal__title{ margin: .2rem 0 .6rem }
.modal__img{ width:100%; aspect-ratio: 16/9; object-fit:cover; background:#f3f4f6; border-radius:12px }
.modal__text{ color: var(--color-muted); margin:.6rem 0 }
.modal__actions{ margin-top:.4rem }

/* ====== Subscribe (Этап 3) ====== */
.subscribe{ padding: 56px 0 }
.subscribe__inner{
  background: linear-gradient(180deg, #ffffff, #fbfbfd);
  border:1px solid var(--color-border); border-radius: 20px; box-shadow: var(--shadow-sm);
  padding: clamp(16px, 3vw, 28px);
}
.subscribe__title{ margin-bottom:.2rem }
.subscribe__text{ color: var(--color-muted); margin-bottom:.8rem }

.field{ display:grid; gap:.3rem; margin-bottom:.6rem }
.field__label{ font-weight:700; font-size:14px }
.field__input{
  width:100%; border:1px solid var(--color-border); border-radius: 12px; padding:.7rem .8rem;
  background:#fff; outline: none; transition: border-color .2s ease, box-shadow .2s ease;
}
.field__input:focus{ border-color:#cbd5ff; box-shadow: 0 0 0 3px rgba(58,91,217,.15) }

.check{ display:flex; gap:.6rem; align-items:flex-start; margin:.4rem 0 .8rem }
.check__input{ position:absolute; opacity:0; pointer-events:none }
.check__box{
  width:18px; height:18px; border-radius:6px; border:1px solid var(--color-border); background:#fff;
  display:inline-block; position:relative; flex:0 0 18px;
}
.check__input:checked + .check__box{
  border-color:#cbd5ff; background: #eef2ff;
}
.check__label{ color: var(--color-muted); font-size:14px }

.subscribe__actions{ display:flex; gap:.5rem; flex-wrap:wrap }
.subscribe__cta i{ width:18px; height:18px }


/* ====== Contact (Этап 4) ====== */
.contact{ padding: 56px 0 }
.contact__lead{ color: var(--color-muted); max-width: 62ch }

.contact__form{
  margin-top: 12px;
  background: linear-gradient(180deg, #ffffff, #fbfbfd);
  border:1px solid var(--color-border);
  border-radius: 20px; box-shadow: var(--shadow-sm);
  padding: clamp(16px, 3vw, 28px);
}
.contact__hp{ position:absolute; left:-9999px; opacity:0 }

.contact__grid{
  display:grid; gap:.6rem; grid-template-columns: 1fr;
}
@media (min-width: 720px){
  .contact__grid{ grid-template-columns: 1fr 1fr 1fr; }
}

.contact__check{ margin-top:.6rem }
.contact__actions{ display:flex; gap:.6rem; flex-wrap:wrap; margin-top:.6rem }
.contact__submit i, .contact__policy i{ width:18px; height:18px }

/* Captcha */
.captcha{ margin-top:.4rem }
.captcha__label{ display:block; font-weight:700; font-size:14px; margin-bottom:.3rem }
.captcha__inner{ display:flex; gap:.5rem; align-items:center; flex-wrap:wrap }
.captcha__task{
  display:inline-flex; align-items:center; justify-content:center;
  min-width: 84px; height:40px; padding:0 .7rem;
  border:1px dashed var(--color-border); border-radius: 10px; background:#fff;
  font-weight:700;
}
.captcha__input{
  width: 110px;
}
.captcha__refresh i{ width:16px; height:16px }

/* Статус отправки */
.contact__status{
  margin-top:.6rem; padding:.7rem .8rem; border-radius: 12px; font-weight:600;
  border:1px solid var(--color-border); background:#fff; color: var(--color-text);
}
.contact__status--ok{
  border-color:#b7f7d0; background:#ecfdf5;
}
.contact__status--err{
  border-color:#ffd2d2; background:#fff1f2;
}

/* ====== Cookie Pop-up (Этап 5) ====== */
.cookie{
  position: fixed; inset: auto 0 12px 0; z-index: 3000;
}
.cookie[hidden]{ display:none }
.cookie__container{
  display:flex; gap:.8rem; align-items:center; justify-content:space-between;
  background:#111827; color:#fff; border-radius: 16px; box-shadow: var(--shadow-md);
  padding: .8rem .9rem; width:min(1120px, 92%);
}
.cookie__text{ display:flex; gap:.6rem; align-items:flex-start }
.cookie__text i{ width:18px; height:18px; color:#fff; opacity:.9 }
.cookie__text a{ color:#cbd5ff; text-decoration: underline }
.cookie__actions .button{ background:#10b981; border:none }
.cookie__actions .button:hover{ transform: translateY(-1px) }

/* ====== Політики — доповнення до існуючих стилів (Етап 5) ====== */
.pages{ padding: 56px 0 }
.pages .container{ max-width: 880px }
.pages h1{ margin-bottom: .8rem }
.pages h2{ margin-top: 1.2rem; margin-bottom: .3rem }
.pages p{ margin: .5rem 0 }
.pages ul{ padding-left: 1.2rem; margin: .4rem 0 }
.pages li{ margin: .35rem 0 }
.pages strong{ font-weight: 700 }
.pages a{ color: var(--color-primary); text-decoration: underline }
.pages code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  background:#f3f4f6; border:1px solid var(--color-border); border-radius: 6px; padding: .05rem .3rem;
}
.pages blockquote{
  margin:.6rem 0; padding:.6rem .8rem; border-left:3px solid #cbd5ff; background:#f8faff; border-radius: 8px
}