/* ============================================================
   TERYTORIUM KOBIET — спільні стилі для всіх сторінок.
   Тут лежить те, що однакове на index.html і ufam.html:
   токени, база, типографіка, кнопки, шапка, CTA, футер.
   Специфіка конкретної сторінки — у її власному <style>.
   ============================================================ */

/* ============================================================
   ТОКЕНИ — витягнуті 1:1 з макета
   ============================================================ */
:root{
  /* кольори */
  --white:#FCFCFD;
  --white-blue:#EFF8FC;
  --white-purple:#F4F1FA;
  --white-yellow:#FCF9F5;
  --white-pure:#FCFEFF;

  --black:#101B3B;
  --black-80:#3F4862;
  --black-60:#6E7589;
  --black-40:#9EA2AF;

  --blue:#1547A9;
  --lightblue:#01A4E8;
  --purple:#6751B5;
  --lime:#A8D440;
  --mint:#10B981;
  --yellow:#FFD52A;
  --pink:#FF5678;      /* трапляється лише на сторінці UFAM */

  --shadow:4px 4px 20px rgba(158,162,175,.2);

  /* сітка */
  --container:1140px;
  --gutter:150px;
  --radius-card:40px;
  --radius-pill:9999px;
}

/* ============================================================
   БАЗА
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
}
body{
  margin:0;
  background:var(--white);
  color:var(--black-80);
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;
  font-size:18px;
  line-height:28px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--lightblue);outline-offset:3px;border-radius:4px}

.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:24px;
}
@media (min-width:1440px){ .container{padding-inline:0} }

.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ============================================================
   ТИПОГРАФІКА (Header 1..4, Paragraph, Buttons, Small paragraph)
   ============================================================ */
.h1{font-size:48px;line-height:64px;font-weight:600;color:var(--black);margin:0}
.h2{font-size:40px;line-height:60px;font-weight:600;color:var(--black);margin:0}
.h3{font-size:32px;line-height:48px;font-weight:600;color:var(--black);margin:0}
.h4{font-size:20px;line-height:30px;font-weight:600;color:var(--black);margin:0}
.p{font-size:18px;line-height:28px;font-weight:400;color:var(--black-80);margin:0}
.p-sm{font-size:16px;line-height:24px;font-weight:400;margin:0}
.on-dark .p,.on-dark .p-sm{color:var(--white-blue)}
.on-dark .h1,.on-dark .h2,.on-dark .h3,.on-dark .h4{color:var(--white)}

@media (max-width:900px){
  .h1{font-size:34px;line-height:44px}
  .h2{font-size:28px;line-height:38px}
  .h3{font-size:24px;line-height:34px}
  body{font-size:17px;line-height:27px}
  .p{font-size:17px;line-height:27px}
}

/* ============================================================
   КНОПКИ — Button TK
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:16px 32px;gap:10px;
  border-radius:var(--radius-pill);
  border:0;cursor:pointer;
  font-family:inherit;font-weight:700;font-size:16px;line-height:20px;
  letter-spacing:.7px;text-align:center;white-space:nowrap;
  transition:transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.btn:active{transform:translateY(0)}
.btn--blue{background:var(--blue);color:var(--white)}
.btn--purple{background:var(--purple);color:var(--white)}
.btn--white{background:var(--white);color:var(--black)}
.btn--outline{background:transparent;color:var(--black);border:2px solid var(--black)}
.btn--block{width:100%}

/* ============================================================
   HEADER
   ============================================================ */
.header{
  position:sticky;top:0;z-index:50;
  background:var(--white);
  border-bottom:2px solid var(--white-purple);
}
.header__inner{
  display:flex;align-items:center;justify-content:space-between;gap:29px;
  height:80px;
}
.brand{display:flex;align-items:center;gap:8px}
.brand__mark{
  width:40px;height:56px;flex:none;
  display:grid;place-items:center;
}
.brand__mark svg,.brand__mark img{width:100%;height:100%;object-fit:contain}
.brand__name{
  font-weight:700;font-size:20px;line-height:24px;
  text-transform:uppercase;color:var(--black);
  max-width:128px;
}
.nav{display:flex;align-items:center;gap:20px}
.nav a{
  font-weight:700;font-size:16px;line-height:20px;letter-spacing:.7px;
  color:var(--black-80);transition:color .15s ease;
}
.nav a:hover{color:var(--blue)}
.nav a[aria-current="page"]{color:var(--blue)}

.lang{display:flex;align-items:center;justify-content:flex-end;gap:4px}
.lang button{
  background:none;border:0;padding:0;cursor:pointer;
  font-family:'Lora',Georgia,serif;font-size:14px;line-height:17px;
  letter-spacing:1px;font-weight:600;color:var(--black-60);
}
.lang button[aria-pressed="true"]{font-weight:700;color:var(--black)}
.lang span{
  color:var(--white-purple);font-weight:700;font-size:14px;line-height:17px;
  font-family:'Plus Jakarta Sans',sans-serif;
}

.burger{display:none;background:none;border:0;padding:8px;cursor:pointer}
.burger span{display:block;width:24px;height:2px;background:var(--black);margin:5px 0;transition:.2s}

@media (max-width:1024px){
  .header__inner{gap:16px}
  .nav{gap:14px}
  .nav a{font-size:15px}
}
@media (max-width:900px){
  .burger{display:block;order:3}
  .nav{
    display:none;position:absolute;top:80px;left:0;right:0;
    flex-direction:column;align-items:flex-start;gap:0;
    background:var(--white);border-bottom:2px solid var(--white-purple);
    padding:8px 24px 20px;
  }
  .nav.is-open{display:flex}
  .nav a{padding:12px 0;width:100%}
  .lang{order:2}
}

/* ============================================================
   СПІЛЬНІ СЕКЦІЇ КОНТЕНТУ
   ============================================================ */
/* padding-bottom тримає той самий ритм, що й gap між секціями:
   інакше остання секція впирається просто у футер */
.content{display:flex;flex-direction:column;gap:160px;padding-bottom:160px}
@media (max-width:900px){ .content{gap:80px;padding-bottom:80px} }

.section-tinted{background:var(--white-blue);padding-block:120px}
@media (max-width:900px){ .section-tinted{padding-block:64px} }

/* ============================================================
   CTA — синій/фіолетовий блок (спільний для обох сторінок)
   ============================================================ */
.cta{
  display:flex;align-items:stretch;
  background:var(--blue);
  border-radius:var(--radius-card);
  overflow:hidden;position:relative;
}
.cta__half{flex:1 1 50%;padding:80px;display:flex;flex-direction:column;justify-content:center;min-width:0}
.cta__half--purple{background:var(--purple);border-radius:var(--radius-card) 0 0 var(--radius-card)}
.cta__half--blue{position:relative;overflow:hidden}
.cta__body{display:flex;flex-direction:column;gap:56px}
.cta__stack{display:flex;flex-direction:column;gap:28px}
.socials{display:flex;flex-direction:column;gap:16px}
.social{display:flex;align-items:center;gap:20px;color:var(--white);font-weight:700;font-size:16px;line-height:20px;letter-spacing:.7px}
.social svg{width:36px;height:36px;flex:none}
.social:hover{opacity:.85}
/* декор у правому нижньому куті синьої половини: барвінок на головній, зірки на UFAM */
.cta__decor{position:absolute;right:56px;bottom:56px;height:auto;pointer-events:none}
@media (max-width:1024px){
  .cta{flex-direction:column}
  .cta__half{padding:48px 32px}
  .cta__half--purple{border-radius:var(--radius-card) var(--radius-card) 0 0}
  .cta__decor{position:static;margin-top:32px;align-self:flex-end}
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{background:var(--black);color:var(--white-blue);padding-block:80px}
.footer__inner{display:flex;justify-content:space-between;align-items:flex-start;gap:60px}
.footer__logo{width:129px;flex:none;color:var(--white)}
.footer__logo img{width:100%;height:auto;display:block}
.footer__cols{display:flex;align-items:flex-start;gap:60px;flex:1 1 auto;min-width:0}
.footer__col{display:flex;flex-direction:column;gap:20px;flex:0 0 auto}
.footer__col .h4{color:var(--white)}
.footer__list{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;list-style:none}
.footer__list a:hover{color:var(--white);text-decoration:underline;text-underline-offset:4px}
.footer__wide{display:flex;flex-direction:column;gap:40px;flex:1 1 420px;min-width:0;max-width:555px}
.social-row{display:flex;align-items:center;gap:24px;color:var(--white)}
.social-row svg{width:36px;height:36px}
.subscribe{display:flex;flex-direction:column;gap:20px}
.subscribe__label{font-size:16px;line-height:28px;letter-spacing:.02em;color:var(--white-blue)}
.subscribe__row{display:flex;align-items:center;gap:12px}
.subscribe__row input{
  flex:1 1 auto;min-width:0;
  padding:8px 24px;height:52px;
  background:var(--white-pure);border:0;border-radius:32px;
  font-family:inherit;font-size:18px;line-height:28px;letter-spacing:.02em;color:var(--black);
}
.subscribe__row input::placeholder{color:var(--black-40)}
/* згода на обробку даних (RODO). Чекбокс обов'язковий — без нього
   браузер сам не дасть відправити форму. */
.consent{
  display:flex;align-items:flex-start;gap:10px;
  margin-top:12px;cursor:pointer;
  font-size:14px;line-height:20px;color:var(--white-blue);
}
.consent input{
  flex:none;width:18px;height:18px;margin:1px 0 0;
  accent-color:var(--purple);cursor:pointer;
}
.consent span{opacity:.85}
.consent:hover span{opacity:1}

.subscribe__status{margin:12px 0 0;font-size:16px;line-height:24px;font-weight:700;color:var(--lime)}
.subscribe__status:empty{display:none}
.subscribe__status.is-error{color:var(--yellow)}
@media (max-width:1100px){
  .footer__inner{flex-direction:column;gap:48px}
  .footer__cols{flex-wrap:wrap;gap:40px}
  .footer__wide{max-width:none;width:100%;flex:1 1 100%}
}
@media (max-width:560px){
  .subscribe__row{flex-direction:column;align-items:stretch}
  .subscribe__row .btn{width:100%}
}

/* ============================================================
   ТЕЛЕФОНИ — на десктопних відступах сторінка на 390px
   розтягується у смугу порожнечі, тому стискаємо ритм.
   ============================================================ */
@media (max-width:620px){
  .content{gap:56px;padding-bottom:56px}
  .section-tinted{padding-block:48px}

  .cta__half{padding:32px 24px}
  .cta__body{gap:32px}
  .cta__stack{gap:20px}
  .socials{gap:12px}
  .cta__decor{margin-top:24px}

  .footer{padding-block:48px}
  .footer__inner{gap:36px}
  .footer__cols{gap:32px}
  .footer__wide{gap:32px}
}

/* ============================================================
   ВУЗЬКІ ТЕЛЕФОНИ — на 320px шапка (лого з назвою + мови + бургер)
   не вміщалася в рядок і виштовхувала сторінку вбік.
   ============================================================ */
@media (max-width:400px){
  .header__inner{gap:10px}
  .brand{gap:6px}
  .brand__mark{width:30px;height:42px}
  .brand__name{font-size:15px;line-height:18px;max-width:96px}
  .lang{gap:2px}
  .lang button,.lang span{font-size:13px;line-height:16px}
  .burger{padding:6px}
  .burger span{width:22px}
}