/* MESIAF Education — урок-лендинг. Чорне/біле, Jost (як у лого), гортання вниз. */
:root{
  --bg:#0A0A0A; --fg:#F2F0EB; --mute:rgba(242,240,235,.6); --faint:rgba(242,240,235,.36);
  --line:rgba(242,240,235,.13); --card:rgba(242,240,235,.035);
  --font:"Jost",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --pad:clamp(16px,5vw,72px); --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg)}
body{background:var(--bg);color:var(--fg);font-family:var(--font);font-weight:400;
  font-size:clamp(16px,1.2vw,19px);line-height:1.6;-webkit-font-smoothing:antialiased}
b,strong{font-weight:500;color:var(--fg)}
a{color:inherit}
::selection{background:var(--fg);color:var(--bg)}

/* ── шапка ── */
.top{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;justify-content:space-between;align-items:center;
  padding:16px var(--pad);background:rgba(10,10,10,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);transform:translateY(-101%);transition:transform .45s var(--ease)}
.top.show{transform:none}
.top img{height:30px;width:auto;display:block}
.top .ls{font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--mute)}
.top .ls b{color:var(--fg);font-weight:400}
.bar{position:absolute;left:0;bottom:-1px;height:1px;width:0;background:var(--fg)}

/* ── секції ── */
.slide{padding:clamp(80px,13vh,150px) var(--pad);border-top:1px solid var(--line)}
.slide>.in{max-width:1080px;margin:0 auto}
.slide.cover{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;border-top:0;position:relative;padding-bottom:150px}
.slide.cover>.in{width:100%}
.slide.big{padding-top:clamp(110px,18vh,200px);padding-bottom:clamp(110px,18vh,200px)}

/* поява при гортанні */
.js .slide>.in>*{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .9s var(--ease)}
.js .slide.seen>.in>*{opacity:1;transform:none}
.js .slide.seen>.in>*:nth-child(2){transition-delay:.08s}
.js .slide.seen>.in>*:nth-child(3){transition-delay:.16s}
.js .slide.seen>.in>*:nth-child(4){transition-delay:.24s}
.js .slide.seen>.in>*:nth-child(n+5){transition-delay:.32s}
@media (prefers-reduced-motion:reduce){.js .slide>.in>*{opacity:1;transform:none;transition:none}}

/* ── типографіка ── */
.k{font-size:12px;letter-spacing:.34em;text-transform:uppercase;color:var(--faint);margin-bottom:26px}
.k b{color:var(--fg);font-weight:400;margin-right:14px}
h1,h2,h3{font-weight:300;letter-spacing:.005em}
h1 i,h2 i,h3 i{font-style:normal;color:var(--faint)}
h1{font-size:clamp(42px,6.6vw,96px);line-height:1.02}
h2{font-size:clamp(32px,4.2vw,58px);line-height:1.08;margin-bottom:clamp(26px,3.4vw,46px)}
.lead{font-size:clamp(18px,1.55vw,22px);font-weight:300;color:var(--mute);max-width:44em;margin-bottom:30px}
.lead b{color:var(--fg)}
p+p{margin-top:12px}
.mut{color:var(--mute)}

/* ── обкладинка ── */
.cover .logo{width:min(360px,72vw);height:auto;display:block;margin-bottom:clamp(48px,9vh,96px)}
.cover .crumb{font-size:12px;letter-spacing:.34em;text-transform:uppercase;color:var(--faint);margin-bottom:24px}
.cover h1{max-width:15em}
.cover .lead{margin-top:30px}
.meta{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);margin-top:40px}
.meta div{padding:18px 18px 0 0}
.meta small{display:block;font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--faint);margin-bottom:6px}
.meta span{font-size:16px}
@media (max-width:700px){.meta{grid-template-columns:1fr 1fr}}
.go{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:var(--faint);text-align:center;white-space:nowrap}
.go::after{content:"";display:block;width:1px;height:42px;margin:14px auto 0;background:linear-gradient(var(--fg),transparent);animation:cue 2.2s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media (prefers-reduced-motion:reduce){.go::after{animation:none}}
@media (max-height:700px){.go{display:none}}

/* ── велика теза ── */
.big h2{font-size:clamp(38px,5.6vw,84px);max-width:15em;margin-bottom:26px}

/* ── тези ── */
.pts{list-style:none;counter-reset:p;border-top:1px solid var(--line)}
.pts li{counter-increment:p;display:grid;grid-template-columns:72px 1fr;gap:8px;padding:22px 0;border-bottom:1px solid var(--line);color:var(--mute)}
.pts li::before{content:counter(p,decimal-leading-zero);font-size:13px;letter-spacing:.2em;color:var(--faint);padding-top:4px}
.pts li b{display:block;font-size:1.14em;font-weight:400;margin-bottom:3px}

/* ── кроки ── */
.steps{list-style:none;counter-reset:s}
.steps li{counter-increment:s;display:grid;grid-template-columns:clamp(56px,6vw,88px) 1fr;padding:20px 0;border-top:1px solid var(--line);color:var(--mute)}
.steps li::before{content:counter(s,decimal-leading-zero);font-size:clamp(28px,2.6vw,38px);font-weight:200;line-height:1;color:var(--fg)}
.steps li b{display:block;font-size:1.14em;font-weight:400;margin-bottom:3px}

/* ── порівняння ── */
.cmp{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.cmp>div{border:1px solid var(--line);padding:clamp(22px,2.6vw,38px);color:var(--mute)}
.cmp>div:last-child{border-color:var(--fg);background:var(--card)}
.cmp h3{font-size:clamp(22px,2vw,28px);color:var(--fg);margin-bottom:14px}
.cmp ul{list-style:none}.cmp li{padding:8px 0;border-top:1px solid var(--line)}
@media (max-width:700px){.cmp{grid-template-columns:1fr}}

/* ── картки ── */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.cards>div{padding:26px;color:var(--mute);background:var(--bg)}
.cards h3{font-size:23px;color:var(--fg);margin-bottom:10px;line-height:1.2}
@media (max-width:900px){.cards{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.cards{grid-template-columns:1fr}}

/* ── терміни ── */
.terms{display:grid;grid-template-columns:minmax(150px,260px) 1fr;border-top:1px solid var(--line)}
.terms dt,.terms dd{padding:17px 0;border-bottom:1px solid var(--line)}
.terms dt{font-size:22px;font-weight:300;line-height:1.2;padding-right:20px}
.terms dt small{display:block;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--faint);margin-top:6px}
.terms dd{color:var(--mute)}
@media (max-width:700px){.terms{grid-template-columns:1fr}.terms dt{border-bottom:0;padding-bottom:0}}

/* ── таблиця ── */
.tbl{width:100%;border-collapse:collapse}
.tbl th{text-align:left;font-weight:400;font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--faint);padding:0 16px 12px 0;border-bottom:1px solid var(--fg)}
.tbl td{padding:15px 16px 15px 0;border-bottom:1px solid var(--line);color:var(--mute);vertical-align:top}
.tbl td:first-child{color:var(--fg);width:32%}

/* ── запит ── */
.prompt{position:relative;border:1px solid var(--line);border-left:1px solid var(--fg);background:var(--card);
  padding:58px 28px 26px;white-space:pre-line;font-weight:300;font-size:clamp(16px,1.25vw,19px);line-height:1.65}
.prompt .cp{position:absolute;top:14px;right:14px;font:400 11px var(--font);letter-spacing:.24em;text-transform:uppercase;color:var(--mute);
  background:transparent;border:1px solid var(--line);padding:8px 14px;cursor:pointer;transition:color .2s,border-color .2s}
.prompt .cp:hover{color:var(--fg);border-color:var(--fg)}
.prompt+*{margin-top:24px}
.plabel{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--faint);margin-bottom:12px}

/* ── виноска ── */
.cal{border:1px solid var(--line);padding:24px 28px;margin-top:24px;color:var(--mute)}
.cal h3{font-size:21px;color:var(--fg);margin-bottom:8px}
.cal.w{border-color:var(--fg)}
.row{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.row>.cal{margin-top:0}

/* ── чек-лист ДЗ ── */
.check{border-top:1px solid var(--line)}
.check label{display:grid;grid-template-columns:38px 1fr;gap:10px;padding:18px 0;border-bottom:1px solid var(--line);cursor:pointer;color:var(--mute);transition:color .25s}
.check input{appearance:none;-webkit-appearance:none;width:22px;height:22px;border:1px solid var(--faint);margin-top:2px;cursor:pointer;display:grid;place-content:center;transition:background .2s,border-color .2s}
.check input::after{content:"";width:11px;height:6px;border:solid var(--bg);border-width:0 0 1.5px 1.5px;transform:rotate(-45deg) translate(1px,-1px);opacity:0}
.check input:checked{background:var(--fg);border-color:var(--fg)}
.check input:checked::after{opacity:1}
.check label:has(input:checked){color:var(--faint);text-decoration:line-through;text-decoration-color:var(--faint)}
.done-n{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--mute);margin-top:18px}

/* ── самоперевірка ── */
.quiz{list-style:none;counter-reset:q}
.quiz li{counter-increment:q;padding:18px 0;border-top:1px solid var(--line)}
.quiz li>p:first-child::before{content:counter(q,decimal-leading-zero);font-size:12px;letter-spacing:.2em;color:var(--faint);margin-right:18px}
.quiz .a{color:var(--mute);margin-top:8px;padding-left:38px;display:none}
.quiz.open .a{display:block}
.btn{display:inline-block;margin-top:26px;font:400 12px var(--font);letter-spacing:.28em;text-transform:uppercase;color:var(--bg);background:var(--fg);border:1px solid var(--fg);padding:15px 26px;cursor:pointer;text-decoration:none;transition:background .25s,color .25s}
.btn.o{background:transparent;color:var(--fg)}
.btn.o:hover{background:var(--fg);color:var(--bg)}

/* ── далі ── */
.next{display:block;text-decoration:none;border-top:1px solid var(--fg);padding-top:28px;margin-top:10px}
.next small{font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:var(--mute)}
.next span{display:block;font-size:clamp(36px,5.4vw,78px);font-weight:200;line-height:1.05;margin-top:10px;transition:transform .4s var(--ease)}
.next:hover span{transform:translateX(12px)}

/* ── підвал ── */
.foot{padding:clamp(70px,12vh,130px) var(--pad) 40px;border-top:1px solid var(--line);text-align:center}
.foot img{width:min(260px,60vw);height:auto;opacity:.9}
.foot p{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--faint);margin-top:34px}

/* ── вхід ── */
.gate{min-height:100vh;min-height:100svh;display:flex;align-items:center;justify-content:center;padding:var(--pad)}
.gate form{max-width:460px;width:100%;text-align:center}
.gate .logo{width:min(300px,70vw);height:auto;margin-bottom:56px}
.gate .lead{margin:0 auto}
.gate input[type=text]{width:100%;margin-top:26px;background:transparent;border:0;border-bottom:1px solid var(--faint);color:var(--fg);
  font:300 clamp(20px,2.2vw,26px) var(--font);letter-spacing:.14em;text-align:center;padding:10px 0;outline:none}
.gate input[type=text]:focus{border-color:var(--fg)}
.gate .err{color:var(--fg);margin-top:16px;font-size:14px}

/* ── телефон: заголовкова частина по центру, списки й таблиці лишаються зліва ── */
@media (max-width:700px){
  .k,.cover .crumb,h1,h2,.lead,.big p,.done-n,.next,.plabel{text-align:center}
  .k,.cover .crumb,.next small,.done-n,.plabel{padding-left:.34em} /* компенсує трекінг справа */
  .lead{margin-left:auto;margin-right:auto}
  .cover .logo{margin-left:auto;margin-right:auto}
  .cover h1,.big h2{margin-left:auto;margin-right:auto}
  .meta{text-align:center}
  .meta div{padding-right:0}
  .slide>.in>.btn,.slide>.in>button.btn{display:table;margin-left:auto;margin-right:auto}
  .cal h3,.cmp h3,.cards h3{text-align:left}
}