/* ================================================================
   ОБЩАЯ ОСНОВА ДЛЯ ВСЕХ СТРАНИЦ ПРАКТИКУМА
   Палитра, шрифты и колонка — те же, что на лендинге клуба
   «Моя жизнь»: практикум должен ощущаться его частью, а не
   отдельным сайтом.
   Вёрстка мобильная (320–430px). На компьютере контент идёт
   колонкой 720px по центру, фон растекается по бокам, а размеры
   внутри считаются в cqw — от ширины колонки, а не окна. Поэтому
   на телефоне ничего не меняется.
   ================================================================ */

:root{
  --cream:#FAF6EF;
  --cream-soft:#F3ECDE;
  --ink:#241A12;
  --ink-soft:#6B5A48;
  --orange-1:#FFB300;
  --orange-2:#FF6D00;
  --green:#16A34A;
  --line:#E4D9C7;
  --card:#FFFDF9;
  --shadow:0 20px 40px -20px rgba(36,26,18,0.25);
  --radius:20px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
html,body{ margin:0; background:transparent; }

body{
  color:var(--ink);
  font-family:'Manrope', sans-serif;
  line-height:1.55;
  overflow-x:hidden;
  -webkit-text-size-adjust:100%;
}

h1,h2,h3,.display{
  font-family:'Unbounded', sans-serif;
  line-height:1.08;
  letter-spacing:-0.02em;
}
.mono{
  font-family:'JetBrains Mono', monospace;
  letter-spacing:0.02em;
  text-transform:uppercase;
}

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
::selection{ background:var(--orange-1); color:var(--ink); }

a:focus-visible, button:focus-visible, textarea:focus-visible{
  outline:3px solid var(--orange-2);
  outline-offset:3px;
  border-radius:6px;
}

/* ---------- КОЛОНКА ----------
   .app-bg — фон во весь экран за колонкой, .app — сама колонка.
   На телефоне колонка занимает всю ширину, поэтому мобильная
   версия выглядит ровно так же, как без этой обёртки. */
.app-bg{
  position:fixed; inset:0; z-index:0;
  background:var(--cream);
  pointer-events:none;
}
.app{
  max-width:720px;
  margin:0 auto;
  container-type:inline-size;
  position:relative;
  z-index:1;
  background:var(--cream);
  min-height:100svh;
}

/* Только боковые поля, без сокращённой записи: иначе .wrap обнуляла бы
   вертикальные отступы у блоков, на которые повешена вместе со своим
   классом (секции, экраны) — они бы слипались. */
.wrap{ padding-left:22px; padding-right:22px; }

/* ---------- ТИПОГРАФИКА ---------- */
.grad{
  background:linear-gradient(135deg, var(--orange-1), var(--orange-2));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'JetBrains Mono', monospace;
  font-size:12px; font-weight:500;
  text-transform:uppercase; letter-spacing:0.06em;
  color:var(--ink-soft);
  background:var(--cream-soft);
  border:1px solid var(--line);
  padding:7px 14px; border-radius:999px;
}
.eyebrow .dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--green); flex:none;
}

/* ---------- КНОПКИ ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px;
  padding:17px 28px;
  border-radius:999px;
  font-family:'Manrope', sans-serif;
  font-weight:700; font-size:16px;
  border:none; cursor:pointer;
  transition:transform .25s ease, box-shadow .25s ease;
  text-align:center;
}
.btn-primary{
  background:linear-gradient(135deg, var(--orange-1), var(--orange-2));
  color:#fff;
  box-shadow:0 14px 30px -10px rgba(255,109,0,0.55);
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 18px 36px -10px rgba(255,109,0,0.65); }
.btn-primary:active{ transform:translateY(0); }

.btn-ghost{
  background:transparent;
  color:var(--ink-soft);
  border:1.5px solid var(--line);
}
.btn-ghost:hover{ border-color:var(--ink-soft); color:var(--ink); }

.btn-block{ display:flex; width:100%; }

/* ---------- ПОЯВЛЕНИЕ ПРИ СКРОЛЛЕ ----------
   Класс вешает JS, когда блок входит в кадр. Без JS и при
   отключённой анимации всё видно сразу — контент не прячем. */
.rise{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .7s ease, transform .7s ease;
}
.rise.is-in{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .rise{ opacity:1; transform:none; transition:none; }
}