/* ═════════════════ ТОКЕНИ ═════════════════ */
:root{
  --paper:#FAF8F4; --surface:#FFFFFF;
  --ink:#14161A; --ink-2:#4A5058; --ink-3:#666B73;
  --accent:#14425E; --accent-hover:#0E3149; --accent-tint:#EAF1F6; --on-accent:#FFFFFF;
  --danger:#A3341F;

  --paper-2:#F3EFE7; --surface-hover:#FFFDFA;
  --field:#0E2A3C; --on-field:#EFEBE3; --on-field-2:#B9C6D0;
  --overlay:rgba(20,22,26,.55);

  --hair:rgba(20,22,26,.09);
  --hair-2:rgba(20,22,26,.16);
  --hair-field:rgba(239,235,227,.14);

  --shadow-1:0 1px 1px rgba(20,22,26,.02), 0 12px 32px -18px rgba(20,22,26,.10);
  --shadow-2:0 2px 3px rgba(20,22,26,.03), 0 30px 60px -30px rgba(20,22,26,.16);

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;
  --s7:48px; --s8:64px; --s9:96px; --s10:128px; --s11:176px;

  --r:6px; --r-lg:24px;
  --container:1160px; --measure:68ch;

  --serif:"Lora",Georgia,"Times New Roman",serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  --ease:cubic-bezier(.2,.7,.3,1);
  --d1:160ms; --d2:240ms; --d3:320ms; --d4:420ms;

  --t-display:clamp(38px, 8.2vw, 76px);
  --t-h1:clamp(32px, 6vw, 56px);
  --t-h2:clamp(27px, 4.4vw, 42px);
  --t-h3:clamp(20px, 2.2vw, 22px);
  --t-lead:clamp(17px, 2.2vw, 20px);
  --t-body:17px;
  --t-small:15px;
  --t-micro:13px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:88px}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:var(--t-body); line-height:1.62;
  font-variant-numeric:oldstyle-nums proportional-nums;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
h1,h2,h3,h4,p,ul,ol,figure,blockquote,dl,dd{margin:0}
ul,ol{padding:0; list-style:none}
a{color:inherit}
img{max-width:100%}

::selection{background:var(--accent-tint); color:var(--ink)}
:focus-visible{
  outline:2px solid var(--accent); outline-offset:3px; border-radius:var(--r);
  box-shadow:0 0 0 6px rgba(20,66,94,.10);
}
@supports (scrollbar-color: auto){ html{scrollbar-color:var(--hair-2) transparent; scrollbar-width:thin} }

.wrap{max-width:var(--container); margin:0 auto; padding:0 20px}
@media (min-width:768px){ .wrap{padding:0 32px} }
@media (min-width:1200px){ .wrap{padding:0 48px} }

.sr{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
.skip{position:absolute; left:-9999px; top:0; z-index:60; background:var(--accent); color:var(--on-accent); padding:12px 18px; border-radius:0 0 var(--r) 0}
.skip:focus{left:0}

/* ═════════════════ ТИПОГРАФІКА ═════════════════ */
.h1{font-family:var(--serif); font-size:var(--t-h1); line-height:1.06; font-weight:600; letter-spacing:-.025em; text-wrap:balance}
.h2{font-family:var(--serif); font-size:var(--t-h2); line-height:1.12; font-weight:600; letter-spacing:-.02em; text-wrap:balance}
.h3{font-family:var(--serif); font-size:var(--t-h3); line-height:1.22; font-weight:600; letter-spacing:-.01em}
.lead{font-size:var(--t-lead); line-height:1.5; color:var(--ink-2); max-width:46ch; text-wrap:pretty}
.prose{max-width:var(--measure); color:var(--ink-2)}
.prose p + p{margin-top:var(--s4)}
/* Заголовки всередині суцільного тексту (політика конфіденційності) мають власний
   крок: інакше після h1 у 56px одразу йшов би розмір у 20px. */
.prose h2{font-family:var(--serif); font-size:clamp(22px, 2.4vw, 28px); line-height:1.22; font-weight:600; letter-spacing:-.015em; color:var(--ink)}
.prose a{color:var(--accent); text-underline-offset:4px; text-decoration-thickness:1px}
.small{font-size:var(--t-small); color:var(--ink-2)}
.micro{font-size:var(--t-micro); color:var(--ink-3)}

/* ═════════════════ ШАПКА ═════════════════ */
.hdr{position:sticky; top:0; z-index:30; background:var(--paper); border-bottom:1px solid transparent; transition:border-color var(--d2) var(--ease)}
.hdr.is-stuck{border-bottom-color:var(--hair)}
.hdr-in{display:flex; align-items:center; gap:var(--s4); min-height:72px}
.brand{display:flex; flex-direction:column; justify-content:center; text-decoration:none; margin-right:auto; line-height:1.2; min-height:44px; padding-block:4px}
.brand b{font-family:var(--serif); font-size:17px; font-weight:600; letter-spacing:-.01em}
.brand span{font-size:var(--t-micro); color:var(--ink-3); letter-spacing:.02em}
.nav{display:none; gap:var(--s6)}
.nav a{display:inline-flex; align-items:center; min-height:44px; text-decoration:none; font-size:var(--t-small); color:var(--ink-2); position:relative; transition:color var(--d1) var(--ease)}
.nav a::after{content:""; position:absolute; left:0; right:0; bottom:10px; height:1px; background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform var(--d2) var(--ease)}
.nav a[aria-current]{color:var(--accent)}
.nav a[aria-current]::after{transform:scaleX(1)}
.lang{display:flex; align-items:center; font-size:var(--t-micro); letter-spacing:.06em}
.lang button{font:inherit; min-height:44px; min-width:40px; background:none; border:0; color:var(--ink-3); cursor:pointer; border-radius:var(--r); transition:color var(--d1) var(--ease)}
.lang button[aria-pressed="true"]{color:var(--ink); font-weight:600}
.lang i{color:var(--hair-2); font-style:normal}
.burger{
  display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px;
  background:none; border:1px solid var(--hair-2); border-radius:var(--r); color:var(--ink); cursor:pointer;
}
.burger svg{width:18px; height:18px}
.burger .x{display:none}
.burger[aria-expanded="true"] .m{display:none}
.burger[aria-expanded="true"] .x{display:block}
@media (min-width:900px){ .nav{display:flex} .burger{display:none} }

/* мобільне меню: у закритому стані не існує в потоці і не блокує скрол */
.menu[hidden]{display:none}
.menu{
  position:fixed; inset:72px 0 auto 0; z-index:29; background:var(--paper);
  border-bottom:1px solid var(--hair); padding:var(--s4) 0 var(--s6);
}
.menu ul{display:flex; flex-direction:column}
.menu a{display:block; padding:var(--s4) 20px; text-decoration:none; font-size:var(--t-lead); border-bottom:1px solid var(--hair)}
.menu a:last-child{border-bottom:0}
@media (min-width:900px){ .menu{display:none!important} }

/* ═════════════════ КНОПКИ ═════════════════ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:52px; padding:0 var(--s6) 0 calc(var(--s6) + 1px);
  border-radius:var(--r); text-decoration:none; font-weight:600; font-size:var(--t-small);
  border:1px solid transparent; cursor:pointer; background:var(--accent); color:var(--on-accent);
  transition:background var(--d1) var(--ease), transform var(--d1) var(--ease);
}
.btn:active{transform:scale(.98)}
.btn-2{background:transparent; color:var(--accent); border-color:var(--hair-2)}
.btn svg{width:15px; height:15px; margin-top:-1px}
.btn-row{display:flex; flex-direction:column; gap:var(--s3); margin-top:var(--s7)}
@media (min-width:640px){ .btn-row{flex-direction:row; flex-wrap:wrap} }

/* ═════════════════ ПЕРШИЙ ЕКРАН ═════════════════ */
.hero{padding:var(--s7) 0 var(--s8)}
.hero-grid{display:grid; gap:var(--s6)}
.hero h1{font-family:var(--serif); font-weight:600; font-size:var(--t-display); line-height:1.02; letter-spacing:-.03em; text-wrap:balance; margin-left:-.03em}
.hero .lead{margin-top:var(--s5)}
.facts{margin-top:var(--s6); border-top:1px solid var(--hair); padding-top:var(--s4)}
.facts li{display:flex; gap:var(--s4); padding:var(--s2) 0; font-size:var(--t-small); color:var(--ink-2); border-bottom:1px solid var(--hair)}
.facts li:last-child{border-bottom:0}
.facts .k{flex:0 0 clamp(88px,22%,120px); color:var(--ink-3); font-size:var(--t-micro); letter-spacing:.1em; text-transform:uppercase; padding-top:3px}
.portrait{position:relative; aspect-ratio:4/5; border-radius:var(--r-lg); overflow:hidden; background:var(--paper-2); border:1px solid var(--hair)}
.portrait picture{display:block; width:100%; height:100%}
.portrait img{display:block; width:100%; height:100%; object-fit:cover; object-position:50% 22%}
@media (max-width:899px){ .portrait{max-width:420px; width:100%} }
@media (min-width:900px){
  .hero{padding:var(--s9) 0 var(--s11)}
  .hero-grid{grid-template-columns:1.25fr .75fr; gap:var(--s8); align-items:end}
  .hero h1{margin-top:var(--s2)}
}

/* сторінковий заголовок для внутрішніх сторінок */
.page-head{padding:var(--s7) 0 var(--s6)}
@media (min-width:900px){ .page-head{padding:var(--s9) 0 var(--s7)} }
.crumbs{font-size:var(--t-micro); color:var(--ink-3); margin-bottom:var(--s4)}
.crumbs a{display:inline-block; padding-block:10px; text-decoration:none; color:var(--ink-3)}

/* ═════════════════ СЕКЦІЇ ═════════════════ */
.sect{padding-block:var(--s8)}
@media (min-width:900px){ .sect{padding-block:var(--s10)} }
.band{background:var(--paper-2); border-top:1px solid var(--hair); border-bottom:1px solid var(--hair)}
.sect-head{max-width:34ch; margin-bottom:var(--s8)}
.sect-head .lead{margin-top:var(--s4)}

/* картки напрямків */
.cards{display:grid; gap:1px; background:var(--hair); border:1px solid var(--hair); border-radius:var(--r-lg); overflow:hidden}
.card{display:flex; flex-direction:column; gap:var(--s3); padding:var(--s6) var(--s5); background:var(--surface); text-decoration:none; min-height:190px; transition:background var(--d1) var(--ease)}
.card:active{background:var(--paper-2)}
.lang button:active{color:var(--ink)}
.burger:active{background:var(--accent-tint)}
.menu a:active{background:var(--paper-2)}
.faq summary:active{color:var(--accent-hover)}
.card h3{transition:color var(--d1) var(--ease)}
.card p{color:var(--ink-2); font-size:var(--t-small); max-width:38ch}
.card-go{margin-top:auto; padding-top:var(--s4); display:inline-flex; align-items:center; gap:8px; font-size:var(--t-small); font-weight:500; color:var(--accent)}
.card-go svg{width:15px; height:15px; margin-top:-1px; transition:transform var(--d2) var(--ease)}
@media (min-width:700px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .card:first-child{grid-column:1/-1; min-height:220px}
  .card:first-child p{max-width:52ch}
}
@media (min-width:1000px){
  .cards{grid-template-columns:repeat(3,1fr)}
  .card:first-child{grid-column:span 2}
}

/* нумерований перелік кроків */
.steps{display:grid; gap:var(--s5); max-width:var(--measure)}
.steps li{display:grid; grid-template-columns:auto 1fr; gap:var(--s4); padding-bottom:var(--s5); border-bottom:1px solid var(--hair)}
.steps li:last-child{border-bottom:0; padding-bottom:0}
.steps .n{font-family:var(--serif); font-size:var(--t-micro); color:var(--accent); font-variant-numeric:tabular-nums lining-nums; padding-top:5px}
.steps h3{margin-bottom:var(--s2)}
.steps p{color:var(--ink-2); font-size:var(--t-small)}
@media (min-width:900px){ .steps{grid-template-columns:1fr 1fr; gap:var(--s7) var(--s8); max-width:none} }

/* перелік із галочками */
.checks{display:grid; gap:var(--s3); max-width:var(--measure)}
.checks li{display:flex; gap:var(--s3); color:var(--ink-2); font-size:var(--t-small)}
.checks svg{flex:0 0 auto; width:16px; height:16px; margin-top:5px; color:var(--accent)}

/* питання */
.faq{max-width:var(--measure); border-top:1px solid var(--hair)}
.faq details{border-bottom:1px solid var(--hair)}
.faq summary{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s4);
  padding:var(--s5) 0; cursor:pointer; list-style:none; font-family:var(--serif);
  font-size:var(--t-h3); font-weight:600; line-height:1.3; transition:color var(--d1) var(--ease);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary svg{flex:0 0 auto; width:16px; height:16px; color:var(--ink-3); transition:transform var(--d2) var(--ease)}
.faq details[open] summary svg{transform:rotate(45deg)}
.faq p{padding:0 0 var(--s5); color:var(--ink-2); font-size:var(--t-small); max-width:60ch}
/* Розкриття питання: проявлення на 160 мс, той самий easing. @starting-style дає
   стартовий стан без JS; де його немає — відповідь зʼявляється миттєво, як раніше. */
.faq details[open] p{opacity:1; transition:opacity var(--d1) var(--ease)}
@starting-style{ .faq details[open] p{opacity:0} }

/* темна смуга */
.field{background:var(--field); color:var(--on-field); box-shadow:inset 0 1px 0 rgba(239,235,227,.10)}
.field .h2{color:var(--on-field)}
.field-grid{max-width:64ch}
.field dl{margin-top:var(--s7); border-top:1px solid var(--hair-field)}
.field .row{display:flex; gap:var(--s4); padding:var(--s4) 0; border-bottom:1px solid var(--hair-field); font-size:var(--t-small)}
.field dd a{display:inline-flex; align-items:center; min-height:36px}
.field dt{flex:0 0 clamp(96px,26%,132px); color:var(--on-field-2); font-size:var(--t-micro); letter-spacing:.1em; text-transform:uppercase; padding-top:3px}
.field a{color:var(--on-field); text-underline-offset:4px; text-decoration-thickness:1px; text-decoration-color:var(--hair-field); transition:text-decoration-color var(--d1) var(--ease)}
.field :focus-visible{outline-color:var(--on-field); box-shadow:0 0 0 6px rgba(239,235,227,.12)}
.field .btn{background:var(--on-field); color:var(--field)}
.field-note{color:var(--on-field-2); font-size:var(--t-micro); margin-top:var(--s6); max-width:52ch}

/* ═════════════════ ПІДВАЛ ═════════════════ */
.ftr{border-top:1px solid var(--hair); padding:var(--s8) 0 var(--s7)}
.ftr-in{display:grid; gap:var(--s6)}
.ftr h2{font-family:var(--serif); font-size:var(--t-h3); font-weight:600}
.ftr ul{display:grid}
.ftr a{display:inline-flex; align-items:center; min-height:44px; font-size:var(--t-small); color:var(--ink-2); text-decoration:none}
.ftr-legal{margin-top:var(--s7); padding-top:var(--s5); border-top:1px solid var(--hair); display:flex; flex-wrap:wrap; gap:var(--s4); justify-content:space-between; font-size:var(--t-micro); color:var(--ink-3)}
@media (min-width:700px){ .ftr-in{grid-template-columns:1.4fr 1fr 1fr} }


/* ═════════════════ НАВЕДЕННЯ ═════════════════
   Тільки для миші. На тач-екрані :hover спрацьовує від дотику
   і залишається «залипшим» після переходу — краще без нього. */
@media (hover: hover) and (pointer: fine){
  .nav a:hover{color:var(--ink)}
  .lang button:hover{color:var(--ink-2)}
  .btn:hover{background:var(--accent-hover)}
  .btn-2:hover{background:var(--accent-tint); border-color:var(--accent)}
  .crumbs a:hover{color:var(--ink-2)}
  .card:hover{background:var(--surface-hover)}
  .card:hover h3{color:var(--accent)}
  .card:hover .card-go svg{transform:translateX(4px)}
  .faq summary:hover{color:var(--accent)}
  .field a:hover{text-decoration-color:var(--on-field)}
  .field .btn:hover{background:var(--surface)}
  .ftr a:hover{color:var(--ink)}
}

/* ═════════════════ ПОЯВА ═════════════════ */
.js .rv{opacity:0; transform:translateY(20px); transition:opacity var(--d4) var(--ease), transform var(--d4) var(--ease); will-change:opacity, transform}
.js .rv.is-in{opacity:1; transform:none; will-change:auto}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important; animation:none!important}
  .js .rv, .rv{opacity:1!important; transform:none!important}
  .nav a[aria-current]::after{transform:scaleX(1)!important}
}