/* =========================================================
   Кейс-страницы OLYMPOS ecommerce — поверх ../styles.css
   ========================================================= */

.casepage .nav__links a{ opacity:1; }

/* hero кейса */
.chero{ padding:calc(72px + clamp(48px, 8vw, 96px)) 0 clamp(20px, 4vw, 44px); position:relative; }
.chero__title{ font-size:clamp(34px, 5.4vw, 62px); font-weight:800; letter-spacing:-0.035em; line-height:1.05; max-width:900px; }
.chero__title em{ font-style:normal; background:var(--grad-soft); -webkit-background-clip:text; background-clip:text; color:transparent; }
.chero__lead{ max-width:680px; margin:18px 0 0; font-size:clamp(16px, 1.6vw, 19px); line-height:1.55; color:var(--muted); }
.chero__meta{ display:flex; flex-wrap:wrap; gap:clamp(14px, 2.4vw, 34px); margin-top:clamp(24px, 3.4vw, 40px); padding:18px 0; border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline); }
.chero__fact{ display:grid; gap:3px; }
.chero__fact small{ font-size:11.5px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:var(--muted-2); }
.chero__fact b{ font-size:14.5px; font-weight:600; color:var(--ink-80); font-variant-numeric:tabular-nums; }
.chero__actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:clamp(22px, 3vw, 32px); }

/* тело кейса */
.cbody{ padding:clamp(10px, 2vw, 24px) 0 clamp(56px, 8vw, 96px); }

.cshot{ margin:0 0 clamp(28px, 4vw, 48px); }
.cshot__frame{ background:var(--pearl); border:1px solid var(--hairline-2); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-product); }
.cshot__bar{ display:flex; align-items:center; gap:6px; padding:10px 14px; border-bottom:1px solid var(--hairline); }
.cshot__bar span{ width:9px; height:9px; border-radius:50%; background:var(--hairline-2); }
.cshot__bar i{ font-style:normal; margin-left:10px; font-size:12px; color:var(--muted-2); letter-spacing:0.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cshot img{ width:100%; height:auto; display:block; }
.cshot figcaption{ margin-top:12px; font-size:13.5px; line-height:1.5; color:var(--muted); max-width:640px; }
.cshot--hero{ margin-top:clamp(16px, 2.6vw, 30px); }

.cshots2{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(18px, 3vw, 32px); align-items:start; }

.ctext{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px, 3.4vw, 44px); margin:0 0 clamp(34px, 5vw, 56px); }
.ctext__col h2{ margin-bottom:10px; }
.ctext__col p{ margin:0; font-size:15.5px; line-height:1.62; color:var(--ink-80); }

.cfeat{ margin-top:clamp(34px, 5vw, 56px); padding:clamp(22px, 3.4vw, 36px); background:var(--pearl); border:1px solid var(--hairline); border-radius:var(--r-xl); }
.cfeat h2{ margin-bottom:6px; }
.cfeat__list{ columns:2; column-gap:40px; margin-bottom:16px; }
.cfeat__list li{ break-inside:avoid; }

.ccta{ margin-top:clamp(40px, 6vw, 64px); text-align:center; padding:clamp(30px, 5vw, 56px) clamp(20px, 4vw, 48px); background:var(--tile-dark); border:1px solid var(--hairline); border-radius:var(--r-xl); }
.ccta h2{ font-size:clamp(24px, 3.2vw, 34px); font-weight:700; letter-spacing:-0.025em; }
.ccta p{ max-width:520px; margin:12px auto 0; font-size:15.5px; line-height:1.55; color:var(--muted); }
.ccta .chero__actions{ justify-content:center; }

.foot__note{ font-size:12.5px; color:var(--muted-2); }

@media (max-width: 820px){
  .cshots2{ grid-template-columns:1fr; }
  .ctext{ grid-template-columns:1fr; }
  .cfeat__list{ columns:1; }
}