/* ====== Сброс стилей ====== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ====== Глобальные стили ====== */
body {
    font-family: 'Manrope', sans-serif;
    background-color: #f9fafb;
    color: #1e1e1e;
    font-size: 16px;
    line-height: 1.6;
}

/* Контейнер */
.header__container,
.footer__container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* ===== HEADER ===== */
.header {
    background-color: #ffffff;
    padding: 1rem 0;
    border-bottom: 1px solid #e5e7eb;
}

.header__logo {
    font-weight: 800;
    font-size: 1.2rem;
    color: #0f172a;
}

.header__menu {
    list-style: none;
    display: flex;
    gap: 1.5rem;
}

.header__menu a {
    text-decoration: none;
    color: #334155;
    font-weight: 600;
    transition: color 0.3s ease;
}

.header__menu a:hover {
    color: #0284c7;
}

/* ===== FOOTER ===== */
.footer {
    background-color: #0f172a;
    color: #f1f5f9;
    padding: 2rem 0;
}

.footer__container {
    flex-wrap: wrap;
    gap: 2rem;
}

.footer__col {
    flex: 1 1 200px;
}

.footer__col h4 {
    margin-bottom: 0.8rem;
    font-size: 1rem;
    font-weight: 700;
}

.footer__col ul {
    list-style: none;
}

.footer__col ul li {
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.footer__col a {
    color: #94a3b8;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer__col a:hover {
    color: #38bdf8;
}

.footer__logo {
    font-weight: 800;
    font-size: 1.2rem;
}

/* ===== Утиліти ===== */
html { scroll-behavior: smooth; }
:root{
  --bg: #f9fafb;
  --ink: #0f172a;
  --muted: #475569;
  --brand: #2563eb;
  --brand-2: #06b6d4;
  --surface: #ffffff;
  --ring: rgba(37,99,235,.25);
}

.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.9rem 1.1rem; border-radius:12px; text-decoration:none;
  font-weight:700; border:1px solid transparent; transition:.25s ease;
  box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 6px 20px rgba(2,8,23,.05);
}
.btn i{ width:1.1rem; height:1.1rem; }
.btn--primary{
  background: linear-gradient(90deg,var(--brand),var(--brand-2));
  color:#fff;
}
.btn--primary:hover{ transform: translateY(-2px); box-shadow: 0 10px 26px rgba(37,99,235,.25); }
.btn--ghost{
  background: transparent; color: var(--ink);
  border-color: #e2e8f0;
}
.btn--ghost:hover{ border-color: var(--brand); box-shadow: 0 0 0 6px var(--ring); }

/* ===== HERO ===== */
.hero{
  position: relative;
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(37,99,235,.08), transparent 60%),
    radial-gradient(900px 500px at 110% 10%, rgba(6,182,212,.08), transparent 60%),
    var(--bg);
  padding: clamp(2.5rem, 4vw, 4rem) 0;
}
.hero__container{
  max-width: 1200px; margin:0 auto; padding:0 1rem;
  display:grid; grid-template-columns: 1.1fr .9fr; gap: clamp(1.5rem, 3vw, 3rem);
  align-items:center;
}
.hero__content{}
.hero__eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  background:#eef2ff; color:#3730a3; padding:.35rem .6rem; border-radius:999px;
  font-weight:700; font-size:.8rem; letter-spacing:.02em; margin-bottom:.9rem;
}
.hero__title{
  font-family:'Fira Sans', system-ui, sans-serif;
  font-size: clamp(1.8rem, 3.8vw, 3.2rem);
  line-height:1.15; font-weight:800; color:var(--ink);
  margin-bottom: .9rem;
}
.hero__subtitle{
  color:var(--muted); font-size: clamp(1rem, 1.5vw, 1.125rem);
  margin-bottom: 1.2rem;
}
.hero__cta{ display:flex; flex-wrap:wrap; gap:.75rem; margin-bottom:1.2rem; }
.hero__points{ list-style:none; display:grid; gap:.5rem; color:var(--muted); }
.hero__points li{ display:flex; align-items:center; gap:.5rem; }
.hero__points i{ width:1rem; height:1rem; opacity:.85; }

/* Візуальна частина */
.hero__visual{ position:relative; display:grid; place-items:center; }
.hero__image{
  width: min(480px, 80vw); border-radius: 20px; background:#e2e8f0;
  border:1px solid #e5e7eb; transform: translateZ(0);
  box-shadow: 0 10px 30px rgba(2,8,23,.08);
}
.hero__blob{
  position:absolute; inset:auto; width: 420px; height: 420px; border-radius: 50%;
  filter: blur(60px); z-index:-1; opacity:.65;
  background: conic-gradient(from 180deg at 50% 50%, rgba(37,99,235,.35), rgba(6,182,212,.35), rgba(37,99,235,.35));
  animation: blob 12s ease-in-out infinite alternate;
}
@keyframes blob{
  0%{ transform: translate(-10%, -5%) scale(1); }
  50%{ transform: translate(10%, 5%) scale(1.07) rotate(10deg); }
  100%{ transform: translate(-5%, 15%) scale(1.02) rotate(-8deg); }
}

.hero__badge{
  position:absolute; display:inline-flex; align-items:center; gap:.4rem;
  padding:.5rem .7rem; border-radius:999px; background:#fff; border:1px solid #e5e7eb;
  font-weight:700; font-size:.85rem; color:#0f172a;
  box-shadow: 0 10px 24px rgba(2,8,23,.07);
  transition: transform .3s ease;
}
.hero__badge i{ width:1rem; height:1rem; }
.hero__badge--top{ top: 6%; right: 8%; }
.hero__badge--bottom{ bottom: 8%; left: 6%; }
.hero__badge:hover{ transform: translateY(-3px); }

/* Адаптив */
@media (max-width: 920px){
  .hero__container{ grid-template-columns: 1fr; }
  .hero__visual{ order: -1; }
  .hero__blob{ width: 320px; height: 320px; }
}

/* ===== Стилі для сторінок політик (з Етапу 5.2 – додали наперед) ===== */
.pages{ padding: 2.5rem 0; background: var(--bg); }
.pages .container{ max-width: 820px; margin:0 auto; padding:0 1rem; }
.pages h1{ font-size: clamp(1.8rem, 2.8vw, 2.4rem); margin-bottom:1rem; color: var(--ink); }
.pages h2{ font-size: clamp(1.2rem, 2vw, 1.5rem); margin:1.2rem 0 .6rem; color:#0b1324; }
.pages p{ color:#334155; margin:.7rem 0; }
.pages ul{ margin:.7rem 0 1rem 1.2rem; }
.pages li{ margin:.4rem 0; }
.pages a{ color:var(--brand); text-decoration: underline; }

/* ===== ABOUT ===== */
.about{ padding: clamp(2.2rem, 4vw, 3rem) 0; background: var(--surface); }
.about__container{ max-width:1200px; margin:0 auto; padding:0 1rem; }

.about__header{ max-width:880px; margin:0 auto 1.5rem; text-align:center; }
.about__title{
  font-family:'Fira Sans', system-ui, sans-serif;
  font-size: clamp(1.4rem, 2.8vw, 2rem);
  font-weight:800; color:var(--ink); margin-bottom:.5rem;
}
.about__lead{ color:var(--muted); }

.about__grid{
  display:grid; grid-template-columns: repeat(4,1fr);
  gap: clamp(.8rem, 2vw, 1rem); margin-top:1.5rem;
}
.about__card{
  background: #fff; border:1px solid #e5e7eb; border-radius:16px;
  padding:1rem; transition:.25s ease; position:relative; overflow:hidden;
}
.about__card::after{
  content:""; position:absolute; inset:auto -20% -20% auto; width:120px; height:120px;
  background: radial-gradient(closest-side, rgba(37,99,235,.08), transparent);
  transform: translate(30%,30%); filter: blur(10px);
}
.about__card:hover{ transform: translateY(-4px); box-shadow:0 14px 26px rgba(2,8,23,.08); }
.about__card i{ width:1.3rem; height:1.3rem; color:var(--brand); }
.about__card-title{ margin:.6rem 0 .3rem; font-weight:800; color:#0b1324; }
.about__card-text{ color:#425269; font-size:.98rem; }

@media (max-width: 1000px){ .about__grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .about__grid{ grid-template-columns: 1fr; } }

.about__panel{
  display:grid; grid-template-columns: .95fr 1.05fr; gap: clamp(1rem, 3vw, 2rem);
  margin-top: clamp(1.6rem, 3vw, 2.2rem);
}
@media (max-width: 920px){ .about__panel{ grid-template-columns: 1fr; } }

.about__visual{ position:relative; }
.about__image{
  width:100%; border-radius:20px; background:#e2e8f0;
  border:1px solid #e5e7eb; box-shadow:0 10px 28px rgba(2,8,23,.07);
}
.about__stamp{
  position:absolute; bottom:8%; left:6%;
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.5rem .7rem; border-radius:999px; background:#fff; border:1px solid #e5e7eb;
  font-weight:700; font-size:.85rem; color:#0f172a; box-shadow:0 10px 24px rgba(2,8,23,.07);
}

.about__facts{}
.about__stats{ list-style:none; display:flex; flex-wrap:wrap; gap:1rem; }
.about__stat{
  flex:1 1 140px; background:#f8fafc; border:1px dashed #e2e8f0; border-radius:14px;
  padding:.9rem; display:grid; gap:.2rem;
}
.about__stat-number{
  font-weight:800; font-size: clamp(1.4rem, 3vw, 1.8rem); color:#0b1324;
}
.about__stat-label{ color:#64748b; font-size:.92rem; }

.about__cta{ display:flex; flex-wrap:wrap; gap:.7rem; margin:1rem 0 .6rem; }
.about__note{ display:flex; align-items:center; gap:.5rem; color:#475569; font-size:.95rem; }
.about__note i{ width:1rem; height:1rem; }

/* ===== METHODS ===== */
.methods{ padding: clamp(2.2rem, 4vw, 3rem) 0; background: var(--bg); }
.methods__container{ max-width:1200px; margin:0 auto; padding:0 1rem; }

.methods__header{ text-align:center; max-width:860px; margin:0 auto 1.4rem; }
.methods__title{
  font-family:'Fira Sans', system-ui, sans-serif;
  font-size: clamp(1.4rem, 2.8vw, 2rem);
  font-weight:800; color:var(--ink); margin-bottom:.5rem;
}
.methods__lead{ color: var(--muted); }

.methods__grid{
  display:grid; gap: clamp(.8rem, 2vw, 1rem);
  grid-template-columns: repeat(5, 1fr);
  margin-top: 1.2rem;
}
@media (max-width: 1120px){ .methods__grid{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px){ .methods__grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px){ .methods__grid{ grid-template-columns: 1fr; } }

.methods__card{
  background:#fff; border:1px solid #e5e7eb; border-radius:16px;
  padding:1rem; display:grid; gap:.6rem; transition:.25s ease;
  position:relative; overflow:hidden;
}
.methods__card:hover{ transform: translateY(-4px); box-shadow: 0 14px 26px rgba(2,8,23,.08); }
.method-card__icon i{ width:1.25rem; height:1.25rem; color: var(--brand); }
.method-card__title{ font-weight:800; color:#0b1324; }
.method-card__text{ color:#425269; font-size:.98rem; }

.method-card__progress{
  position:relative; height:10px; border-radius:999px;
  background:#eef2f7; overflow:hidden; border:1px solid #e6eaf0;
}
.method-card__bar{
  position:absolute; inset:0 auto 0 0; width:0%;
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
  border-radius:999px; transition: width .7s cubic-bezier(.22,1,.36,1);
  box-shadow: 0 0 0 1px rgba(255,255,255,.3) inset;
}
.method-card__percent{
  position:absolute; top:50%; right:.5rem; transform: translateY(-50%);
  font-weight:700; font-size:.8rem; color:#0b1324; opacity:.75;
}

.method-card__cta{ justify-self:start; }

.methods__flow{
  margin: clamp(1.2rem, 2.6vw, 1.8rem) auto 0;
  display:flex; align-items:center; justify-content:center; gap:.6rem;
  flex-wrap:wrap;
}
.methods__flow-item{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.5rem .7rem; border-radius:999px; background:#fff;
  border:1px solid #e5e7eb; font-weight:700; color:#0f172a;
  box-shadow: 0 8px 20px rgba(2,8,23,.06); transition:.25s ease;
}
.methods__flow-item i{ width:1rem; height:1rem; }
.methods__flow-item:hover{ transform: translateY(-3px); }
.methods__flow-sep{
  width:26px; height:2px; border-radius:999px; background: linear-gradient(90deg,#cbd5e1,#e2e8f0);
  opacity:.9;
}

.methods__cta{ display:flex; gap:.7rem; justify-content:center; margin-top:1.2rem; flex-wrap:wrap; }


/* ===== RESOURCES ===== */
.resources{ padding: clamp(2.2rem, 4vw, 3rem) 0; background: var(--surface); }
.resources__container{ max-width:1200px; margin:0 auto; padding:0 1rem; }

.resources__header{ text-align:center; max-width:860px; margin:0 auto 1.4rem; }
.resources__title{
  font-family:'Fira Sans', system-ui, sans-serif;
  font-size: clamp(1.4rem, 2.8vw, 2rem);
  font-weight:800; color:var(--ink); margin-bottom:.5rem;
}
.resources__lead{ color: var(--muted); }

.resources__filters{
  display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center;
  margin: 1rem auto 1.2rem;
}
.resources__pill{
  appearance:none; border:none; cursor:pointer;
  padding:.55rem .9rem; border-radius:999px; font-weight:700;
  background:#fff; border:1px solid #e5e7eb; color:#0f172a;
  transition:.25s ease; box-shadow:0 8px 20px rgba(2,8,23,.06);
}
.resources__pill:hover{ transform: translateY(-2px); }
.resources__pill.is-active{ border-color: var(--brand); box-shadow: 0 0 0 6px var(--ring); }

.resources__grid{
  display:grid; gap: clamp(.8rem, 2vw, 1rem);
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 920px){ .resources__grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .resources__grid{ grid-template-columns: 1fr; } }

.resources__card{
  background:#fff; border:1px solid #e5e7eb; border-radius:16px;
  padding:1rem; display:grid; gap:.55rem;
  transition:.25s ease; position:relative; overflow:hidden;
}
.resources__card::after{
  content:""; position:absolute; inset:auto -20% -20% auto; width:140px; height:140px;
  background: radial-gradient(closest-side, rgba(6,182,212,.09), transparent);
  transform: translate(28%,28%); filter: blur(12px);
}
.resources__card:hover{ transform: translateY(-4px); box-shadow:0 14px 26px rgba(2,8,23,.08); }
.res-card__icon i{ width:1.2rem; height:1.2rem; color: var(--brand); }
.res-card__title{ font-weight:800; color:#0b1324; }
.res-card__text{ color:#425269; font-size:.98rem; }

.res-card__meta{
  display:flex; gap:.8rem; flex-wrap:wrap; color:#475569; font-size:.9rem;
}
.res-card__meta i{ width:1rem; height:1rem; }
.res-card__cta{ justify-self:start; }

.resources__cta{ display:flex; gap:.7rem; justify-content:center; margin-top:1.2rem; flex-wrap:wrap; }

/* Плавное появление карточек при фильтрации */
.res-card--hide{ opacity:0; transform: scale(.98); pointer-events:none; }
.res-card--show{ opacity:1; transform: scale(1); transition: opacity .25s ease, transform .25s ease; }

/* ===== EVENTS ===== */
.events{ padding: clamp(2.2rem, 4vw, 3rem) 0; background: var(--bg); }
.events__container{ max-width:1200px; margin:0 auto; padding:0 1rem; }

.events__header{ text-align:center; max-width:860px; margin:0 auto 1.4rem; }
.events__title{
  font-family:'Fira Sans', system-ui, sans-serif;
  font-size: clamp(1.4rem, 2.8vw, 2rem);
  font-weight:800; color:var(--ink); margin-bottom:.5rem;
}
.events__lead{ color: var(--muted); }

.events__filters{
  display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center;
  margin: 1rem auto 1.2rem;
}
.events__pill{
  appearance:none; border:none; cursor:pointer;
  padding:.55rem .9rem; border-radius:999px; font-weight:700;
  background:#fff; border:1px solid #e5e7eb; color:#0f172a;
  transition:.25s ease; box-shadow:0 8px 20px rgba(2,8,23,.06);
}
.events__pill:hover{ transform: translateY(-2px); }
.events__pill.is-active{ border-color: var(--brand); box-shadow: 0 0 0 6px var(--ring); }

.events__grid{
  display:grid; gap: clamp(.8rem, 2vw, 1rem);
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 1000px){ .events__grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px){ .events__grid{ grid-template-columns: 1fr; } }

.events__card{
  background:#fff; border:1px solid #e5e7eb; border-radius:18px;
  padding:1rem; display:grid; grid-template-columns: auto 1fr; gap:1rem;
  transition:.25s ease; position:relative; overflow:hidden;
}
.events__card::after{
  content:""; position:absolute; inset:auto -20% -20% auto; width:140px; height:140px;
  background: radial-gradient(closest-side, rgba(37,99,235,.09), transparent);
  transform: translate(28%,28%); filter: blur(12px);
}
.events__card:hover{ transform: translateY(-4px); box-shadow:0 14px 26px rgba(2,8,23,.08); }

.event-card__date{
  width:70px; min-width:70px; height:70px; border-radius:16px;
  background: #0f172a; color:#fff; display:grid; place-items:center;
  box-shadow: 0 10px 26px rgba(2,8,23,.15);
}
.event-card__day{ font-size:1.35rem; font-weight:800; line-height:1; }
.event-card__mon{ font-size:.8rem; opacity:.9; }

.event-card__body{ display:grid; gap:.5rem; }
.event-card__title{ font-weight:800; color:#0b1324; }
.event-card__text{ color:#425269; font-size:.98rem; }

.event-card__meta{ list-style:none; display:flex; flex-wrap:wrap; gap:.8rem; color:#475569; font-size:.9rem; }
.event-card__meta i{ width:1rem; height:1rem; }

.event-card__tags{ display:flex; gap:.4rem; flex-wrap:wrap; }
.event-card__tag{
  display:inline-flex; align-items:center; gap:.3rem;
  padding:.35rem .6rem; border-radius:999px; background:#fff;
  border:1px dashed #e2e8f0; color:#0f172a; font-weight:700; font-size:.82rem;
}

.event-card__actions{ display:flex; gap:.6rem; flex-wrap:wrap; margin-top:.2rem; }
.event-card__ics{ cursor:pointer; }

.events__cta{ display:flex; gap:.7rem; justify-content:center; margin-top:1.2rem; flex-wrap:wrap; }

/* ===== CONTACT ===== */
.contact{ padding: clamp(2.2rem, 4vw, 3rem) 0; background: var(--surface); }
.contact__container{ max-width:720px; margin:0 auto; padding:0 1rem; }

.contact__header{ text-align:center; max-width:640px; margin:0 auto 1.4rem; }
.contact__title{
  font-family:'Fira Sans', system-ui, sans-serif;
  font-size: clamp(1.4rem, 2.8vw, 2rem);
  font-weight:800; color:var(--ink); margin-bottom:.5rem;
}
.contact__lead{ color: var(--muted); }

.contact__form{ display:grid; gap:1rem; }
.contact__field{ display:grid; gap:.35rem; }
.contact__field label{ font-weight:600; color:#0b1324; }
.contact__field input{
  padding:.7rem .9rem; border-radius:10px;
  border:1px solid #e5e7eb; font-size:1rem;
  transition:border-color .25s ease, box-shadow .25s ease;
}
.contact__field input:focus{
  outline:none; border-color: var(--brand);
  box-shadow: 0 0 0 4px var(--ring);
}

.contact__checkbox{
  display:flex; align-items:flex-start; gap:.5rem;
  font-size:.9rem; color:#334155;
}
.contact__checkbox input{ margin-top:.25rem; }

.contact__success{
  margin-top:1.2rem; background:#ecfdf5; border:1px solid #a7f3d0;
  border-radius:12px; padding:1rem; display:flex; gap:.6rem; align-items:center;
  color:#065f46; font-weight:600;
}
.contact__success i{ width:1.2rem; height:1.2rem; }

/* CONTACT success: принудительно скрываем по умолчанию */
.contact__success{ display:none; }
/* показываем только через класс */
.contact__success.is-visible{ display:flex; }

/* ===== COOKIE POPUP ===== */
.cookie{
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  padding: .75rem; background: transparent;
}
.cookie__container{
  max-width: 980px; margin: 0 auto;
  background: #0b1324; color: #e6f1ff;
  border: 1px solid rgba(255,255,255,.12); border-radius: 14px;
  display: grid; grid-template-columns: auto 1fr auto; gap: .8rem;
  padding: .8rem .9rem; align-items: center;
  box-shadow: 0 18px 40px rgba(2,8,23,.35);
}
.cookie__icon i{ width: 1.2rem; height: 1.2rem; color: #38bdf8; }
.cookie__text{ font-size: .95rem; line-height: 1.5; }
.cookie__text a{ color: #7dd3fc; text-decoration: underline; }
.cookie__actions .btn{ padding: .6rem .9rem; }
@media (max-width: 640px){
  .cookie__container{ grid-template-columns: 1fr auto; }
  .cookie__icon{ display: none; }
}

/* Состояния появления/скрытия */
.cookie[hidden]{ display: none; }
.cookie--show{ animation: cookie-in .25s ease forwards; }
.cookie--hide{ animation: cookie-out .2s ease forwards; }
@keyframes cookie-in{
  from{ transform: translateY(20px); opacity: 0; }
  to{ transform: translateY(0); opacity: 1; }
}
@keyframes cookie-out{
  from{ transform: translateY(0); opacity: 1; }
  to{ transform: translateY(10px); opacity: 0; }
}

/* ===== PAGES (POLICY, TERMS, ETC.) ===== */
.pages {
  padding: 4rem 1rem;
  background: #f9fafb;
}
.pages .container {
  max-width: 900px;
  margin: 0 auto;
  background: #ffffff;
  border-radius: 14px;
  padding: 2rem 2.5rem;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
}
.pages h1 {
  font-size: 2rem;
  margin-bottom: 1.5rem;
  font-weight: 700;
  color: #0b1324;
}
.pages h2 {
  font-size: 1.4rem;
  margin-top: 2rem;
  margin-bottom: 0.8rem;
  font-weight: 600;
  color: #0b1324;
}
.pages p {
  margin-bottom: 1rem;
  line-height: 1.6;
  color: #374151;
}
.pages ul {
  list-style: disc;
  margin-left: 1.5rem;
  margin-bottom: 1rem;
  color: #374151;
}
.pages li {
  margin-bottom: 0.5rem;
}
.pages li strong {
  color: #0b1324;
}
.pages a {
  color: #2563eb;
  text-decoration: underline;
}
.pages a:hover {
  text-decoration: none;
}