/* ====== Глобальные стили ====== */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root{
  --bg:#fafafa;
  --text:#1e1e1e;
  --muted:#5b6670;
  --brand:#0a9385;         /* основной акцент */
  --brand-2:#6ad3c7;       /* доп. акцент */
  --ink:#2a3b47;           /* темный для хедера/футера */
  --card:#ffffff;
  --ring:rgba(10,147,133,.18);
  --shadow:0 8px 24px rgba(0,0,0,.08);
}

html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
}
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
.container { width: 90%; max-width: 1200px; margin: 0 auto; }

/* ====== Хедер ====== */
.header {
  background: #fff;
  border-bottom: 1px solid #e6e6e6;
  padding: 1rem 0;
  position: sticky; top: 0; z-index: 100;
  backdrop-filter: saturate(1.2) blur(6px);
}
.header__container{
  display:flex; justify-content:space-between; align-items:center;
  width:90%; max-width:1200px; margin:auto;
}
.header__logo{
  font-family:'Playfair Display', serif; font-size:1.5rem; font-weight:700; color:var(--ink);
  letter-spacing:.3px;
}
.header__menu{ display:flex; gap:1.2rem; }
.header__menu a{
  font-weight:600; color:#2a3b47; padding:.4rem .6rem; border-radius:.6rem;
  transition: color .25s ease, background .25s ease, transform .12s ease;
}
.header__menu a:hover{ color:var(--brand); background:rgba(10,147,133,.07); }
.header__menu a:active{ transform: translateY(1px); }

/* ====== Hero ====== */
.hero{
  position: relative;
  padding: 5.5rem 0 3.5rem;
  overflow: clip;
}
.hero__bg{
  position:absolute; inset:-20% -10% auto -10%; height: 70%;
  background:
    radial-gradient(40rem 18rem at 20% 15%, rgba(106,211,199,.28), transparent 60%),
    radial-gradient(36rem 18rem at 85% 10%, rgba(10,147,133,.22), transparent 60%);
  filter: blur(18px);
  transform: translateY(-10px);
  animation: bgFloat 8s ease-in-out infinite alternate;
}
@keyframes bgFloat{ to{ transform: translateY(10px);} }

.hero__container{
  width:90%; max-width:1200px; margin:0 auto;
  display:grid; gap:2rem; grid-template-columns: 1fr; align-items:center;
}
@media (min-width: 960px){
  .hero__container{ grid-template-columns: 1.15fr .85fr; }
}

.hero__content{ display:flex; flex-direction:column; gap:1.1rem; }
.hero__title{
  font-family:'Playfair Display', serif;
  font-weight:700; font-size: clamp(1.8rem, 4vw + 1rem, 3rem);
  color:#16242b; letter-spacing:.2px;
}
.hero__subtitle{ color: var(--muted); max-width: 56ch; }
.hero__cta{ display:flex; gap:.8rem; flex-wrap:wrap; margin-top:.3rem; }

.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.8rem 1rem; border-radius:1rem; font-weight:700; line-height:1;
  border:1px solid transparent; box-shadow: var(--shadow);
  transition: transform .12s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease;
  will-change: transform;
}
.btn i{ width:18px; height:18px; }
.btn--primary{
  background: linear-gradient(180deg, var(--brand), #07786d);
  color:#fff; border-color: var(--ring);
}
.btn--primary:hover{ box-shadow: 0 10px 26px rgba(10,147,133,.28); transform: translateY(-1px); }
.btn--ghost{
  background:#fff; color: var(--ink); border-color: #e7ecef;
}
.btn--ghost:hover{ background:#f4fbfa; border-color: var(--brand-2); }

.hero__stats{ display:flex; gap:1.2rem; flex-wrap:wrap; margin-top:.6rem; }
.hero__stat{
  background: #fff; border: 1px solid #eef2f3; border-radius: 1rem; padding:.7rem .9rem;
  min-width: 160px; box-shadow: var(--shadow);
}
.hero__stat-number{
  font-weight:800; color:#0a3b34; font-size:1.4rem; display:block;
}
.hero__stat-label{ color: var(--muted); font-size:.94rem; }

.hero__media{ display:flex; justify-content:center; }
.hero__card{
  position: relative; background: var(--card); border:1px solid #e9eef0; border-radius:1.25rem;
  padding:.7rem; width:min(460px, 92%); box-shadow: var(--shadow);
  transform: perspective(900px) rotateX(0deg) rotateY(0deg);
  transition: transform .35s ease;
}
.hero__card--tilt:hover{ transform: perspective(900px) rotateX(2.2deg) rotateY(-2.2deg) translateY(-2px); }
.hero__image{ width:100%; height:auto; display:block; border-radius:.9rem; }
.hero__badge{
  position:absolute; left:12px; bottom:12px; display:inline-flex; align-items:center; gap:.45rem;
  background: #0a9385; color:#fff; padding:.5rem .7rem; border-radius:.8rem; font-weight:700; font-size:.9rem;
  box-shadow: 0 10px 24px rgba(10,147,133,.35);
}
.hero__badge i{ width:16px; height:16px; }

/* ====== Футер ====== */
.footer{
  background-color: var(--ink); color:#fff; padding: 2rem 0; margin-top: 2rem;
}
.footer__container{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap:1.5rem; width:90%; max-width:1200px; margin:auto;
}
.footer__logo{
  font-family:'Playfair Display', serif; font-size:1.4rem; font-weight:700;
}
.footer__menu li, .footer__legal li, .footer__contacts li{ margin-bottom:.5rem; }
.footer__menu a, .footer__legal a{
  color:#ffffff; font-size:.95rem; transition: color .25s ease;
}
.footer__menu a:hover, .footer__legal a:hover{ color:#6ad3c7; }
.footer__contacts li{ display:flex; align-items:center; gap:.5rem; font-size:.95rem; }
.footer__contacts i{ width:18px; height:18px; }

/* ====== Базовые стили для страниц политик (Этап 5) ====== */
.pages{ padding: 3rem 0; }
.pages .container{ width:90%; max-width:860px; }
.pages h1{
  font-family:'Playfair Display', serif; font-size: clamp(1.6rem, 2.2vw + 1rem, 2.4rem);
  margin-bottom: 1rem; color:#16242b;
}
.pages h2{ margin: 1.4rem 0 .6rem; color:#21303a; }
.pages p{ color:#34424b; margin:.7rem 0; }
.pages ul{ margin:.8rem 0 0 1.1rem; list-style: disc; }
.pages li{ margin:.35rem 0; }
.pages strong{ font-weight:700; }
.pages a{ color: var(--brand); text-decoration: underline; }

/* ====== Дрібниці ====== */
:focus-visible{ outline: 3px solid var(--brand-2); outline-offset: 2px; }

/* ====== Аналитика ====== */
.analytics{ padding: 3.2rem 0; }
.analytics__head{ display:flex; flex-direction:column; gap:.8rem; margin-bottom:1.6rem; }
.analytics__title{ font-family:'Playfair Display', serif; font-weight:700; font-size:clamp(1.4rem, 1.4vw + 1rem, 2rem); color:#16242b; }
.analytics__intro{ color:var(--muted); max-width:62ch; }
.analytics__filters{ display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.4rem; }
.analytics__tab{
  display:inline-flex; align-items:center; gap:.45rem; padding:.55rem .8rem; border-radius:.9rem; border:1px solid #e8eef0;
  background:#fff; cursor:pointer; font-weight:700; transition: background .2s ease, border-color .2s ease, transform .1s ease;
  box-shadow: var(--shadow);
}
.analytics__tab i{ width:16px; height:16px; }
.analytics__tab:hover{ background:#f5fbfa; border-color:var(--brand-2); }
.analytics__tab:active{ transform: translateY(1px); }
.analytics__tab--active{ background: linear-gradient(180deg, var(--brand), #07786d); color:#fff; border-color:transparent; }

.analytics__grid{
  display:grid; grid-template-columns: 1fr; gap:1rem; margin-top:1rem;
}
@media (min-width:720px){ .analytics__grid{ grid-template-columns: repeat(2, 1fr);} }
@media (min-width:1080px){ .analytics__grid{ grid-template-columns: repeat(3, 1fr);} }

.card{ background:#fff; border:1px solid #e9eef0; border-radius:1rem; overflow:hidden; display:flex; flex-direction:column; }
.card__media{ position:relative; }
.card__image{ width:100%; height:auto; display:block; }
.card__badge{
  position:absolute; left:.6rem; top:.6rem; display:inline-flex; align-items:center; gap:.4rem;
  background:#0a9385; color:#fff; font-weight:700; padding:.45rem .6rem; border-radius:.7rem; box-shadow:0 8px 22px rgba(10,147,133,.35);
}
.card__badge i{ width:15px; height:15px; }
.card__body{ display:flex; flex-direction:column; gap:.55rem; padding:.9rem; }
.card__title{ font-weight:800; color:#1b2a31; line-height:1.35; }
.card__excerpt{ color:#43515a; font-size:.975rem; }
.card__meta{ display:flex; gap:.8rem; color:#6a7680; font-size:.9rem; }
.card__meta i{ width:16px; height:16px; }
.card__tags{ display:flex; gap:.4rem; flex-wrap:wrap; margin-top:.2rem; }
.card__tags span{ background:#f0f6f6; color:#0f4b43; border:1px solid #e0eeee; padding:.2rem .5rem; border-radius:.6rem; font-size:.85rem; }
.card__cta{ margin-top:.4rem; }

/* Приховування при фільтрі */
.card--hidden{ display:none !important; }

/* ===== Кейсы ===== */
.cases{ padding:3rem 0; }
.cases__head{ display:flex; flex-direction:column; gap:.6rem; margin-bottom:1.4rem; }
.cases__title{ font-family:'Playfair Display', serif; font-weight:700; font-size:clamp(1.4rem,1.4vw+1rem,2rem); color:#16242b; }
.cases__intro{ color:var(--muted); max-width:62ch; }

.cases__grid{ display:grid; grid-template-columns:1fr; gap:1rem; }
@media (min-width:900px){ .cases__grid{ grid-template-columns:repeat(3,1fr); } }

.card--case .card__body{ gap:.7rem; }
.case__facts{ display:grid; grid-template-columns:1fr; gap:.35rem; color:#50606b; font-size:.95rem; }
.case__facts i{ width:16px; height:16px; margin-right:.35rem; vertical-align:-2px; }

.case__result{ display:flex; flex-direction:column; gap:.35rem; }
.case__badge{
  display:inline-flex; align-items:center; gap:.4rem;
  background:#e9fbf7; color:#08584f; border:1px solid #b9efe6;
  padding:.35rem .55rem; border-radius:.6rem; font-weight:800; width:max-content;
}
.case__badge i{ width:16px; height:16px; }
.case__badge--accent{ background:#eef3ff; color:#22356f; border-color:#cfd9ff; }
.case__note{ color:#51606a; font-size:.95rem; }

.case__toggle{
  display:inline-flex; align-items:center; gap:.45rem; padding:.5rem .7rem;
  background:#fff; border:1px solid #e8eef0; border-radius:.7rem; cursor:pointer; font-weight:700;
  transition: background .2s ease, border-color .2s ease, transform .1s ease;
}
.case__toggle i{ width:16px; height:16px; transition: transform .2s ease; }
.case__toggle:hover{ background:#f6fbfa; border-color:var(--brand-2); }
.case__toggle[aria-expanded="true"] i{ transform: rotate(180deg); }

.case__details{ margin-top:.4rem; color:#41505a; }
.case__bullets{ margin:.4rem 0 0 1.1rem; list-style:disc; }
.case__bullets li{ margin:.28rem 0; }

/* ===== Инсайты ===== */
.insights{ padding:3rem 0; background:#f7fafa; }
.insights__head{ display:flex; flex-direction:column; gap:.6rem; margin-bottom:1.4rem; }
.insights__title{ font-family:'Playfair Display', serif; font-weight:700; font-size:clamp(1.4rem,1.4vw+1rem,2rem); color:#16242b; }
.insights__intro{ color:var(--muted); max-width:62ch; }

.insights__list{ display:grid; grid-template-columns:1fr; gap:1rem; }
@media (min-width:768px){ .insights__list{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1100px){ .insights__list{ grid-template-columns:repeat(4,1fr); } }

.insight{
  display:flex; gap:.8rem; background:#fff; border:1px solid #e5eded; border-radius:.9rem;
  padding:1rem; box-shadow:var(--shadow); align-items:flex-start;
}
.insight__icon{
  flex-shrink:0; width:40px; height:40px; border-radius:.7rem;
  background:var(--brand-2); color:#fff; display:flex; align-items:center; justify-content:center;
}
.insight__icon i{ width:20px; height:20px; }
.insight__title{ font-weight:700; color:#1b2a31; margin-bottom:.25rem; }
.insight__text{ color:#4a5963; font-size:.95rem; }

/* ===== О блоге ===== */
.about{ padding:3rem 0; }
.about__head{ display:flex; flex-direction:column; gap:.6rem; margin-bottom:1.4rem; }
.about__title{ font-family:'Playfair Display', serif; font-weight:700; font-size:clamp(1.4rem,1.4vw+1rem,2rem); color:#16242b; }
.about__intro{ color:var(--muted); max-width:62ch; }

.about__content{ color:#414f59; font-size:.98rem; display:flex; flex-direction:column; gap:.7rem; margin-bottom:2rem; }

.about__grid{
  display:grid; grid-template-columns:1fr; gap:1rem;
}
@media (min-width:800px){ .about__grid{ grid-template-columns:repeat(3,1fr); } }

.about__item{
  background:#fff; border:1px solid #e5eded; border-radius:.9rem;
  padding:1.2rem; box-shadow:var(--shadow);
}
.about__item i{
  width:22px; height:22px; color:var(--brand); margin-bottom:.5rem;
}
.about__item h3{ font-weight:700; margin-bottom:.3rem; color:#1b2a31; }
.about__item p{ color:#4a5963; font-size:.95rem; }

/* ===== Контакты ===== */
.contact{ padding:3rem 0; background:#fbfdfd; }
.contact__head{ display:flex; flex-direction:column; gap:.6rem; margin-bottom:1.4rem; }
.contact__title{ font-family:'Playfair Display', serif; font-weight:700; font-size:clamp(1.4rem,1.4vw+1rem,2rem); color:#16242b; }
.contact__intro{ color:var(--muted); max-width:62ch; }

.contact__form{
  background:#fff; border:1px solid #e7eef0; border-radius:1rem; padding:1.2rem;
  box-shadow: var(--shadow);
  display:grid; gap:1rem;
}
.contact__row{ display:flex; flex-direction:column; gap:.35rem; }
.contact__label{ font-weight:700; color:#22313a; }
.contact__input{
  border:1px solid #dfe7ea; border-radius:.75rem; padding:.75rem .9rem; background:#fff; color:#1b2a31;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.contact__input:focus{ outline:none; border-color: var(--brand-2); box-shadow: 0 0 0 4px var(--ring); }

.contact__row--captcha .contact__label{ display:block; }
.contact__captcha{
  display:grid; grid-template-columns: auto 1fr auto; gap:.6rem; align-items:center;
}
.contact__captcha-text{
  font-weight:800; color:#083b34; background:#ecf9f6; border:1px solid #cfeee7; border-radius:.6rem; padding:.5rem .7rem;
}
.contact__input--captcha{ text-align:center; }
.contact__captcha-refresh{
  display:inline-flex; align-items:center; justify-content:center; gap:.3rem;
  padding:.55rem .65rem; border:1px solid #e7eef0; background:#fff; border-radius:.7rem; cursor:pointer;
  transition: background .2s ease, border-color .2s ease, transform .1s ease;
}
.contact__captcha-refresh:hover{ background:#f6fbfa; border-color: var(--brand-2); }

.contact__row--agree .contact__checkbox{
  display:flex; align-items:flex-start; gap:.6rem; cursor:pointer;
}
.contact__checkbox input{ position:absolute; opacity:0; pointer-events:none; }
.contact__check{
  width:20px; height:20px; border:1.5px solid #b6c6cd; border-radius:.35rem; margin-top:.1rem;
  display:inline-block; position:relative; flex-shrink:0; background:#fff; transition: all .15s ease;
}
.contact__checkbox input:checked + .contact__check{
  background: var(--brand); border-color: var(--brand);
}
.contact__checkbox input:checked + .contact__check::after{
  content:""; position:absolute; left:4px; top:1px; width:9px; height:14px; border:2px solid #fff; border-left:none; border-top:none; transform: rotate(45deg);
}
.contact__agree-text{ color:#44545f; }
.contact__agree-text a{ color: var(--brand); text-decoration: underline; }

.contact__actions{ display:flex; align-items:center; gap:1rem; flex-wrap:wrap; }
.contact__status{ min-height:1.2rem; font-weight:700; }
.contact__status--ok{ color:#0b7a6d; }
.contact__status--err{ color:#a83a3a; }

.contact__error{ color:#b03838; font-size:.88rem; min-height:1rem; }

/* Успех/ошибка инпутов */
.contact__input--invalid{ border-color:#e6b5b5; box-shadow: 0 0 0 4px rgba(230,181,181,.35); }
.contact__input--valid{ border-color:#b7eadf; box-shadow: 0 0 0 4px rgba(106,211,199,.25); }

/* ===== Cookie Pop-up ===== */
.cookie{
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 120;
  display: grid; place-items: center; padding: .75rem; pointer-events: none;
}
.cookie[aria-hidden="false"], .cookie:not([hidden]){ pointer-events: auto; }
.cookie__bar{
  width: min(100%, 980px); background: #0f1e24; color: #fff; border-radius: 1rem;
  border: 1px solid #12313a; box-shadow: 0 14px 28px rgba(0,0,0,.22);
  padding: .9rem; display: grid; grid-template-columns: 1fr auto; gap: .8rem;
  transform: translateY(6px); opacity: 0; animation: cookieIn .35s ease forwards;
}
@keyframes cookieIn { to { transform: translateY(0); opacity: 1; } }

.cookie__text{ display: grid; grid-template-columns: auto 1fr; gap: .6rem; align-items: start; }
.cookie__text i{ width: 20px; height: 20px; color: var(--brand-2); margin-top: .15rem; }
.cookie__text p{ font-size: .95rem; line-height: 1.5; }
.cookie__text a{ color: var(--brand-2); text-decoration: underline; }

.cookie__btn{ align-self: center; }

/* Бонус: анімація обертання для refresh-іконки капчі */
@keyframes spin { to { transform: rotate(360deg); } }
.spin i{ animation: spin .6s linear; }