/* ============================================================
   Мир Оли — главная страница olgasworld.ru
   Нейтральный личный стиль: не привязан к бренду конкретного проекта.
   ============================================================ */

:root{
  --ink:#171a18;
  --text:#3b423e;
  --muted:#7c8480;
  --line:#e6e8e6;
  --bg:#fbfbfa;
  --accent:#2f6b4f;
  --r:26px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size:17px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
h1,h2,h3{margin:0; color:var(--ink); letter-spacing:-.03em; line-height:1.12; font-weight:700}
p{margin:0}
a{color:inherit; text-decoration:none}

.page{width:min(860px, calc(100% - 44px)); margin:0 auto; padding-block:clamp(72px,12vw,140px)}

.intro{max-width:620px}
.dot{
  display:block; width:14px; height:14px; border-radius:50%; background:var(--accent);
  margin-bottom:26px; box-shadow:0 0 0 6px rgba(47,107,79,.12);
}
.intro h1{font-size:clamp(42px,7vw,72px); font-weight:800; letter-spacing:-.04em}
.intro__lead{margin-top:20px; font-size:clamp(17px,2vw,20px); color:var(--muted)}

.section{margin-top:clamp(56px,8vw,96px)}
.section__title{
  font-size:14px; font-weight:600; text-transform:uppercase; letter-spacing:.12em;
  color:var(--muted); margin-bottom:20px;
}

.cards{display:flex; flex-direction:column; gap:14px}
.card{
  display:flex; align-items:flex-start; gap:20px;
  padding:clamp(22px,3vw,32px);
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
a.card:hover{
  transform:translateY(-4px); border-color:transparent;
  box-shadow:0 4px 12px rgba(23,26,24,.05), 0 24px 50px rgba(23,26,24,.08);
}
.card__emoji{font-size:30px; line-height:1.2; flex:none}
.card__body{flex:1; min-width:0}
.card__kicker{font-size:13px; font-weight:600; letter-spacing:.02em; color:var(--accent); margin-bottom:6px}
.card h3{font-size:23px; margin-bottom:10px}
.lock{
  display:inline-block; margin-left:8px; padding:2px 9px; border-radius:999px;
  background:#f2f4f2; color:var(--muted); font-size:12px; font-weight:600; letter-spacing:0;
}
.card__desc{font-size:16px; color:var(--muted)}
.card__go{
  flex:none; align-self:center; display:grid; place-items:center;
  width:38px; height:38px; border-radius:999px; background:#f2f4f2; color:var(--ink);
  transition:background-color .25s, transform .25s var(--ease);
}
a.card:hover .card__go{background:var(--accent); color:#fff; transform:translateX(3px)}
.card--empty{border-style:dashed; background:transparent}
.card--empty .card__kicker{color:var(--muted)}
.card--empty h3, .card--empty .card__desc{color:var(--muted)}
.card--empty h3{font-weight:600}

.foot{
  padding-block:36px; border-top:1px solid var(--line);
  font-size:14px; color:var(--muted);
}
.foot p{width:min(860px, calc(100% - 44px)); margin:0 auto}

@media (max-width:560px){
  .card{flex-direction:column; gap:14px}
  .card__go{align-self:flex-start}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms !important; animation-duration:.01ms !important}
}