@import url('https://fonts.googleapis.com/css2?family=Geologica:wght@400;500;600;700&family=Ubuntu:wght@400;500;700&display=swap&subset=cyrillic');

:root{
  --puNight:#0b1418;
  --puPanel:#12212a;
  --puEdge:#1d3a44;
  --puMint:#3ddc97;
  --puCoral:#ff6b6b;
  --puText:#e6f1f3;
  --puDim:#8aa6ae;
  --puR:4px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body.puScreen{
  margin:0;
  background:var(--puNight);
  color:var(--puText);
  font-family:'Ubuntu',-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  font-size:16px;
  line-height:1.62;
  overflow-x:hidden;
}
img,svg{max-width:100%}
p{margin:0 0 14px}
a{color:var(--puMint);text-decoration:none}
a:hover{text-decoration:underline}

.puSkip{position:absolute;left:-9999px;top:0}
.puSkip:focus{left:8px;top:8px;background:var(--puMint);color:#06222f;padding:8px 14px;border-radius:var(--puR);z-index:99}

/* ---------- верхняя панель ---------- */
.puTop{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:10px 20px;
  background:#0b1418;
  border-bottom:1px solid var(--puEdge);
}
.puLogo{display:flex;align-items:center;gap:10px;color:var(--puText);text-decoration:none}
.puLogo:hover{text-decoration:none}
.puLogoMark{width:74px;height:28px;flex:0 0 auto}
.puLogoText{font-family:'Geologica',sans-serif;font-weight:700;font-size:20px;line-height:1;display:flex;flex-direction:column;gap:3px}
.puLogoText small{font-family:'Ubuntu',sans-serif;font-weight:400;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--puDim)}
.puNav{display:flex;flex-wrap:wrap;gap:4px 16px;margin-left:auto;font-size:13px;letter-spacing:.04em}
.puNav a{color:var(--puDim)}
.puNav a:hover{color:var(--puMint);text-decoration:none}

.puBtn{
  display:inline-block;
  background:var(--puMint);color:#06222f;
  font-family:'Geologica',sans-serif;font-weight:600;font-size:15px;
  padding:12px 20px;border-radius:var(--puR);
  border:1px solid var(--puMint);
  text-decoration:none;
}
.puBtn:hover{background:#4fe9a6;text-decoration:none}
.puBtnAlt{background:transparent;color:var(--puMint);border-color:var(--puEdge)}
.puBtnAlt:hover{background:#12212a;color:var(--puMint)}
.puTopBtn{padding:9px 16px;font-size:14px}

/* ---------- hero ---------- */
main{display:block}
.puHero{padding:34px 20px 8px;max-width:1160px;margin:0 auto}
.puCaps{
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--puDim);margin:0 0 10px;
}
.puH1{
  font-family:'Geologica',sans-serif;font-weight:600;
  font-size:clamp(26px,4.4vw,44px);line-height:1.14;
  margin:0 0 16px;letter-spacing:-.01em;
}
.puStand{font-size:17px;color:#c3d7dc;max-width:74ch;margin:0 0 20px}
.puActions{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:22px}

.puTraceWrap{
  background:var(--puPanel);
  border:1px solid var(--puEdge);
  border-radius:var(--puR);
  padding:0;overflow:hidden;
}
.puTrace{display:block;width:100%;height:120px}
.puTraceDot{opacity:.9}

.puGauges{
  display:grid;grid-template-columns:repeat(6,1fr);
  gap:1px;margin:18px 0 6px;
  background:var(--puEdge);
  border:1px solid var(--puEdge);border-radius:var(--puR);overflow:hidden;
}
.puGauge{background:var(--puPanel);padding:14px 12px;display:flex;flex-direction:column;gap:5px}
.puGaugeNum{font-family:'Geologica',sans-serif;font-weight:700;font-size:clamp(19px,2.3vw,28px);line-height:1;color:var(--puMint)}
.puGaugeHot{color:var(--puCoral)}
.puGaugeCap{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--puDim);line-height:1.4}
.puGaugesTight{margin:6px 0 18px}

/* ---------- разделитель с пиком ---------- */
.puBeat{max-width:1160px;margin:26px auto;padding:0 20px}
.puBeat svg{display:block;width:100%;height:24px}

/* ---------- секции ---------- */
.puSect{max-width:1160px;margin:0 auto;padding:4px 20px}
.puSect h2{
  font-family:'Geologica',sans-serif;font-weight:600;
  font-size:clamp(22px,3vw,32px);line-height:1.2;
  margin:0 0 16px;letter-spacing:-.01em;
}
.puSect h3{
  font-family:'Geologica',sans-serif;font-weight:500;
  font-size:clamp(17px,2vw,21px);line-height:1.3;
  margin:24px 0 10px;color:var(--puMint);
}
.puSect p{max-width:88ch;color:#cfe0e4}
.puNote{font-size:13px;color:var(--puDim)}

/* ---------- каталог: строки-отведения ---------- */
.puLeads{
  border:1px solid var(--puEdge);border-radius:var(--puR);
  background:var(--puPanel);margin:18px 0;overflow:hidden;
}
.puLead{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(120px,42%) 62px;
  align-items:center;gap:14px;
  padding:11px 14px;border-top:1px solid var(--puEdge);
}
.puLead:first-child{border-top:0}
.puLeadName{font-size:14px;display:flex;flex-direction:column;gap:2px;min-width:0}
.puLeadName em{font-style:normal;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--puDim)}
.puLeadBar{display:block;height:8px;background:#0b1418;border-radius:var(--puR);overflow:hidden}
.puLeadBar i{display:block;height:100%;background:linear-gradient(90deg,#2f8f6b,var(--puMint));border-radius:var(--puR)}
.puLeadVal{font-family:'Geologica',sans-serif;font-weight:600;font-size:15px;color:var(--puMint);text-align:right}

/* ---------- ступени старта ---------- */
.puSteps{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:18px 0}
.puStep{
  background:var(--puPanel);border:1px solid var(--puEdge);border-radius:var(--puR);
  padding:16px 14px;display:flex;flex-direction:column;gap:6px;
}
.puStepNum{font-family:'Geologica',sans-serif;font-weight:700;font-size:30px;line-height:1;color:var(--puMint)}
.puStepCap{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--puDim)}
.puStepFs{font-family:'Geologica',sans-serif;font-weight:600;font-size:15px;color:var(--puCoral)}

/* ---------- клуб: столбчатый график ---------- */
.puChart{
  display:grid;grid-template-columns:repeat(6,1fr);gap:10px;
  align-items:end;height:250px;margin:20px 0;
  background:var(--puPanel);border:1px solid var(--puEdge);border-radius:var(--puR);
  padding:16px 14px 12px;
}
.puCol{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:6px;height:100%;min-width:0}
.puColBar{display:block;width:100%;background:linear-gradient(180deg,var(--puMint),#1f6d52);border-radius:var(--puR) var(--puR) 0 0;min-height:10px}
.puColBarTop{background:linear-gradient(180deg,var(--puCoral),#8e3535)}
.puColVal{font-family:'Geologica',sans-serif;font-weight:700;font-size:16px;color:var(--puText)}
.puColName{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--puDim);text-align:center}

/* ---------- отзывы ---------- */
.puVoiceRow{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:18px 0}
.puVoice{background:var(--puPanel);border:1px solid var(--puEdge);border-left:3px solid var(--puMint);border-radius:var(--puR);padding:16px 16px 4px}
.puVoice p{font-size:15px}
.puVoiceMeta{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--puCoral);margin-bottom:8px}

/* ---------- FAQ ---------- */
.puFaq{border:1px solid var(--puEdge);border-radius:var(--puR);background:var(--puPanel);overflow:hidden;margin:18px 0}
.puFaq details{border-top:1px solid var(--puEdge)}
.puFaq details:first-child{border-top:0}
.puFaq summary{
  cursor:pointer;list-style:none;
  padding:14px 16px;font-family:'Geologica',sans-serif;font-weight:500;font-size:16px;
  display:flex;align-items:flex-start;gap:10px;
}
.puFaq summary::-webkit-details-marker{display:none}
.puFaq summary::before{content:"/";color:var(--puMint);font-weight:700;flex:0 0 auto}
.puFaq details[open] summary{color:var(--puMint)}
.puFaq details p{margin:0;padding:0 16px 16px 32px;font-size:15px;color:#cfe0e4}

/* ---------- author note ---------- */
.puAuthor{
  max-width:1160px;margin:30px auto 0;padding:20px;
  border-top:1px solid var(--puEdge);
}
.puAuthor p{max-width:92ch;font-size:14px;color:var(--puDim)}
.puAge{border-left:3px solid var(--puCoral);padding-left:14px;color:#b8cbd0}

/* ---------- подвал ---------- */
.puFoot{border-top:1px solid var(--puEdge);background:#091115;margin-top:26px;padding:24px 20px 34px}
.puFootGrid{max-width:1160px;margin:0 auto;display:grid;grid-template-columns:1.1fr 1.4fr .9fr;gap:22px}
.puFoot p{font-size:13px;color:var(--puDim);max-width:60ch}
.puFootSmall{font-size:11px;letter-spacing:.08em;margin-top:12px}

/* ---------- адаптив ---------- */
@media (max-width:1000px){
  .puGauges{grid-template-columns:repeat(3,1fr)}
  .puVoiceRow{grid-template-columns:1fr}
  .puFootGrid{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  body.puScreen{font-size:15px}
  .puTop{padding:9px 14px;gap:9px}
  .puNav{display:none}
  .puLogoMark{width:60px;height:24px}
  .puLogoText{font-size:17px}
  .puTopBtn{margin-left:auto;padding:8px 12px;font-size:13px}
  .puHero{padding:20px 14px 6px}
  .puStand{font-size:15px}
  .puActions .puBtn{flex:1 1 100%;text-align:center}
  .puTrace{height:84px}
  .puGauges{grid-template-columns:repeat(2,1fr)}
  .puSect,.puBeat,.puAuthor{padding-left:14px;padding-right:14px}
  .puSteps{grid-template-columns:1fr}
  .puLead{grid-template-columns:minmax(0,1fr) 54px;gap:6px 10px}
  .puLeadBar{grid-column:1/3;order:3}
  .puChart{height:200px;gap:5px;padding:12px 8px 10px}
  .puColVal{font-size:13px}
  .puColName{font-size:8px;letter-spacing:.04em}
  .puFootGrid{grid-template-columns:1fr}
}