/* Заглушка gym-notes.ru. Палитра согласована с опросом: тёмный фон, один лаймовый акцент. */
@property --p{syntax:"<angle>"; inherits:false; initial-value:0deg}

/* Onest (SIL Open Font License 1.1, файл лицензии в fonts/LICENSE.txt). Переменный шрифт, вес 100-900. */
@font-face{
  font-family:"Onest"; font-style:normal; font-weight:100 900; font-display:swap;
  src:url("fonts/onest-cyrillic-wght-normal.woff2") format("woff2-variations");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face{
  font-family:"Onest"; font-style:normal; font-weight:100 900; font-display:swap;
  src:url("fonts/onest-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  --bg:#0D0F0A; --surface:#161911; --surface-2:#1C2014; --line:#2C3221;
  --fg:#F1F5E6; --muted:#9CA68B;
  --accent:#D8FF3E; --accent-ink:#10130A; --accent-text:#D8FF3E;
  --btn-bg:var(--accent); --btn-fg:var(--accent-ink); --mark:var(--accent);
  --band-bg:var(--accent); --band-fg:var(--accent-ink); --band-muted:#3C4A0E;
  --font-display:"Onest",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-body:"Onest",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --radius:16px;
  color-scheme:dark;
}
@media (prefers-color-scheme: light){
  :root{
    --bg:#F4F7EA; --surface:#FFFFFF; --surface-2:#ECF1DC; --line:#D3DCBC;
    --fg:#141908; --muted:#55603F;
    --accent-text:#3F5700;
    /* кремовый фон съедает лайм: кнопка тёмная, подчёркивание плотнее, финальный блок тёмный */
    --btn-bg:#141908; --btn-fg:#D8FF3E; --mark:#A6D100;
    --band-bg:#141908; --band-fg:#F1F5E6; --band-muted:#B8C29E;
    color-scheme:light;
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; min-height:100dvh; background:var(--bg); color:var(--fg);
  font:17px/1.55 var(--font-body);
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:64px 64px; background-position:center top;
}
/* сетка растворяется к краям: единственный декор фона */
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(ellipse 70% 60% at 30% 12%, transparent 0, var(--bg) 78%);
}
.page{max-width:1120px; margin-inline:auto; padding:0 28px; min-height:100dvh; display:flex; flex-direction:column}
:where(a,button):focus-visible{outline:2px solid var(--accent-text); outline-offset:3px; border-radius:8px}

/* шапка: одна строка */
.top{display:flex; justify-content:space-between; align-items:center; gap:16px; padding:24px 0}
.brand{font:700 21px/1 var(--font-display); letter-spacing:-.01em; color:var(--fg); text-decoration:none}
.top-link{color:var(--fg); font-size:15px; font-weight:600; text-decoration:none; padding:9px 16px; border:1px solid var(--line); border-radius:999px; background:var(--surface); transition:border-color .15s, transform .15s}
.top-link:hover{border-color:var(--accent-text); transform:translateY(-1px)}

/* первый экран */
.hero{
  display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:clamp(32px,6vw,88px);
  padding:clamp(48px,11vh,120px) 0 clamp(56px,10vh,104px);
  animation:rise .6s ease both;
}
h1{margin:0; max-width:17ch; font:700 clamp(40px,5.8vw,84px)/1.02 var(--font-display); letter-spacing:-.03em; text-wrap:balance}
.mark{background:linear-gradient(var(--mark),var(--mark)) 0 92%/100% .16em no-repeat; padding-bottom:.04em}
.lead{margin:28px 0 0; max-width:34ch; font-size:clamp(18px,2.2vw,22px); line-height:1.5; color:var(--muted); text-wrap:pretty}
.cta-row{margin-top:36px; display:flex; flex-wrap:wrap; align-items:center; gap:14px 22px}
.btn{
  display:inline-flex; align-items:center; justify-content:center; min-height:58px; padding:0 36px;
  background:var(--btn-bg); color:var(--btn-fg); border-radius:var(--radius);
  font:700 18px/1 var(--font-body); text-decoration:none; white-space:nowrap;
  transition:transform .15s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.cta-note{margin:0; font-size:15px; color:var(--muted)}

/* кольцо: дуга прорисовывается один раз; чистый CSS, без картинок */
.ring{position:relative; width:clamp(190px,21vw,280px); aspect-ratio:1}
.ring-arc{
  --p:360deg; position:absolute; inset:0; border-radius:50%;
  background:conic-gradient(from -90deg, var(--accent) 0 var(--p), var(--line) 0);
  /* маска вырезает середину; цифра лежит отдельным слоем, чтобы маска её не резала */
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 16px), #000 calc(100% - 15px));
          mask:radial-gradient(farthest-side, transparent calc(100% - 16px), #000 calc(100% - 15px));
  animation:draw 1.4s .25s cubic-bezier(.2,.7,.2,1) both;
}
.ring-inner{position:absolute; inset:0; display:grid; place-content:center; text-align:center; gap:4px}
.ring-inner b{font:700 clamp(60px,8.4vw,104px)/1 var(--font-display); letter-spacing:-.04em}
.ring-inner span{color:var(--muted); font-size:15px}

.pains{
  display:grid; grid-template-columns:5fr 7fr; gap:clamp(28px,6vw,80px);
  padding:clamp(40px,8vh,72px) 0 clamp(48px,9vh,88px); border-top:1px solid var(--line);
}
.pains-intro h2,.topics h2{margin:0; font:700 clamp(26px,3.6vw,42px)/1.1 var(--font-display); letter-spacing:-.02em; text-wrap:balance}
.pains-intro p{margin:16px 0 0; max-width:32ch; color:var(--muted); font-size:16px}
.pains-list{list-style:none; margin:0; padding:0; display:grid; gap:12px}
.pains-list li{
  display:grid; gap:4px; padding:20px 24px 20px 28px; position:relative; overflow:hidden;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
}
.pains-list li::before{content:""; position:absolute; left:0; top:14px; bottom:14px; width:4px; border-radius:0 4px 4px 0; background:var(--accent)}
.pains-list strong{font:600 19px/1.35 var(--font-body)}
.pains-list span{color:var(--muted); font-size:16px}

.topics{padding:clamp(40px,8vh,72px) 0; border-top:1px solid var(--line)}
.chips{list-style:none; margin:28px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:10px}
.chips li{padding:11px 18px; border:1px solid var(--line); border-radius:999px; background:var(--surface); font-size:16px}
.chips li:nth-child(3n+1){border-color:var(--accent-text)}

.finale{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:28px 40px;
  margin:clamp(8px,3vh,24px) 0 clamp(40px,8vh,72px); padding:clamp(28px,5vw,56px);
  background:var(--band-bg); color:var(--band-fg); border-radius:calc(var(--radius) + 8px);
}
.finale h2{margin:0; max-width:20ch; font:700 clamp(26px,3.8vw,44px)/1.08 var(--font-display); letter-spacing:-.025em; text-wrap:balance}
.finale p{margin:14px 0 0; max-width:44ch; font-size:17px; color:var(--band-muted)}
.btn-dark{background:var(--band-fg); color:var(--band-bg)}

.foot{
  margin-top:auto; display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 24px;
  padding:24px 0 calc(28px + env(safe-area-inset-bottom,0px)); border-top:1px solid var(--line);
  color:var(--muted); font-size:14px;
}
.foot p{margin:0}

@keyframes rise{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}
@keyframes draw{from{--p:0deg} to{--p:360deg}}
@media (prefers-reduced-motion: reduce){
  .hero,.ring-arc{animation:none}
  .btn,.top-link{transition:none}
  .btn:hover,.top-link:hover{transform:none}
}

@media (max-width: 860px){
  .hero{grid-template-columns:1fr}
  .ring{width:min(46vw,200px); order:-1; justify-self:start}
}
@media (max-width: 760px){
  body{font-size:16px; background-size:48px 48px}
  .page{padding:0 18px}
  h1{max-width:none; font-size:clamp(31px,9.2vw,44px)}
  .pains{grid-template-columns:1fr}
  .pains-intro p{max-width:none}
  .btn{width:100%}
  .finale{padding:26px 22px}
}