/* ============ ШАПКА С ВИДЕО ============ */
.hero{position:relative}
.vid{position:relative;height:100svh;min-height:420px;overflow:hidden;background:var(--ink)}
.vid video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:vidIn 1.4s var(--ease) both}
@keyframes vidIn{from{opacity:0}to{opacity:1}}
.vid::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(20,41,46,.55),rgba(20,41,46,.12) 40%,rgba(20,41,46,.32) 74%,rgba(20,41,46,.88))}
.vid .hero-intro{position:absolute;left:50%;top:47%;transform:translate(-50%,-50%);
  z-index:3;width:min(980px,90vw);text-align:center;will-change:transform;
  animation:kUp 1s var(--ease) .3s both}
.hi-t{font-family:var(--disp);font-weight:400;color:var(--mint);letter-spacing:.03em;line-height:1.16;
  font-size:clamp(21px,2.85vw,42px);margin-bottom:clamp(12px,1.4vw,20px);
  text-shadow:0 4px 34px rgba(6,18,23,.85)}
.hi-p{font-family:var(--sans);font-weight:300;color:#e6f2ee;line-height:1.65;
  font-size:clamp(12.5px,1.05vw,16px);max-width:82ch;margin-inline:auto;text-wrap:balance;
  text-shadow:0 2px 18px rgba(6,18,23,.9)}
.hi-p+.hi-p{margin-top:clamp(8px,.9vw,13px)}
@keyframes kUp{from{opacity:0;transform:translate(-50%,calc(-50% + 20px))}to{opacity:1;transform:translate(-50%,-50%)}}
.seam{background:var(--ink);height:4px}

/* ============ HERO-ЗАГОЛОВОК ============ */
.hero-mid{position:relative;padding-block:clamp(30px,4.4vw,58px);overflow:hidden}
.hero-mid h1{position:relative;text-align:center;font-family:var(--disp);font-weight:400;
  font-size:clamp(23px,3.1vw,45px);line-height:1.22;letter-spacing:.035em;color:var(--mint2);
  text-transform:uppercase;text-shadow:0 4px 30px rgba(8,20,25,.6);will-change:transform}
.hero-mid h1 .ln{display:block;opacity:0;animation:lnUp .7s var(--ease) both}
.hero-mid h1 .ln:nth-child(1){animation-delay:.45s}
.hero-mid h1 .ln:nth-child(2){animation-delay:.58s}
.hero-mid h1 .ln:nth-child(3){animation-delay:.71s}
@keyframes lnUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .hero-mid h1 .ln,.vid video,.vid .hero-k{animation:none;opacity:1;transform:none}
}

/* ============ ПЛЕЕР ============ */
.player{position:relative;padding:0}
.vid .pbar{position:absolute;left:50%;bottom:clamp(14px,1.8vw,26px);transform:translateX(-50%);z-index:4;
  width:min(760px,84%);display:flex;align-items:center;gap:clamp(8px,1vw,14px);
  border:1.4px solid rgba(128,199,165,.75);border-radius:999px;
  padding:clamp(5px,.55vw,7px);
  background:rgba(8,22,28,.42);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 10px 34px rgba(3,14,19,.4)}
.rbtn{flex:none;border-radius:50%;border:1.5px solid var(--mint2);background:transparent;cursor:pointer;
  display:grid;place-items:center;
  transition:border-color var(--fast),box-shadow var(--fast),transform .18s,background var(--fast)}
.rbtn:hover{border-color:var(--mint);box-shadow:0 0 18px rgba(187,255,222,.3);background:rgba(128,199,165,.12)}
.rbtn:active{transform:scale(.96)}
.pbtn{width:clamp(26px,2vw,30px);aspect-ratio:1}
.pbtn svg{width:40%;height:40%;fill:var(--mint)}
.track{flex:1;position:relative;height:13px;cursor:pointer;display:flex;align-items:center}
.track .bg,.track .fill{position:absolute;left:0;height:8px;
  background-image:linear-gradient(90deg,currentColor 0 1.6px,transparent 1.6px);
  background-size:calc(100% / 108) 100%;background-repeat:repeat-x}
.track .bg{right:0;color:rgba(255,255,255,.45)}
.track .fill{width:0;color:var(--mint);filter:drop-shadow(0 0 5px rgba(187,255,222,.55));
  transition:width .12s linear;background-size:calc(var(--tw,1000px) / 108) 100%}
.tbtn{height:clamp(26px,2vw,30px);min-width:clamp(26px,2vw,30px);padding-inline:clamp(7px,.7vw,10px);
  border-radius:999px;display:flex;align-items:center;justify-content:center;gap:4px;color:var(--mint);
  font-size:var(--t-sm);border:1.4px solid var(--mint2);background:transparent;cursor:pointer;
  transition:background var(--fast),color var(--fast),box-shadow var(--fast)}
.tbtn:hover,.tbtn.on{background:var(--mint);color:var(--ink);box-shadow:0 0 18px rgba(187,255,222,.3)}
.tbtn .ar{font-size:.8em;transition:transform .35s var(--ease)}
.tbtn.on .ar{transform:rotate(90deg)}
.ptime{flex:none;font-size:var(--t-micro);letter-spacing:.06em;color:var(--mint2);
  font-variant-numeric:tabular-nums;white-space:nowrap;user-select:none}
.ptime i{font-style:normal;opacity:.5;margin-inline:.35em}
/* раскрытие по строке грид-сетки — высота расшифровки ничем не ограничена;
   обрезает вложенный .tx-clip: у него нет полей, поэтому в закрытом виде он схлопывается в ноль */
.tx{display:grid;grid-template-rows:0fr;transition:grid-template-rows .65s var(--ease)}
.tx-clip{overflow:hidden;min-height:0}
.tx.on{grid-template-rows:1fr;margin-block:var(--s4) var(--s5)}
.tx-in{background:radial-gradient(120% 140% at 50% 0%,rgba(13,36,45,.88),rgba(8,24,31,.80));
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border:0;border-radius:clamp(18px,2vw,26px);padding:clamp(26px,2.6vw,40px) clamp(26px,2.8vw,46px);
  box-shadow:var(--soft)}
.tx-in{text-align:center}
.tx-in h3{font-family:var(--disp);font-weight:400;color:var(--mint);font-size:var(--t-xl);
  letter-spacing:.03em;line-height:1.15;margin-bottom:var(--s1)}
.tx-in .cap{font-size:var(--t-micro);letter-spacing:.24em;text-transform:uppercase;color:var(--mint2);
  margin-bottom:var(--s4)}
.tx-in p{font-size:var(--t-md);font-weight:300;line-height:1.78;color:var(--text-soft);
  max-width:74ch;margin-inline:auto;text-wrap:pretty}
.tx-in p+p{margin-top:var(--s3)}
.tx-in h4{font-family:var(--disp);font-weight:400;color:var(--mint);font-size:var(--t-lg);
  letter-spacing:.03em;line-height:1.25;margin-top:var(--s5);margin-bottom:var(--s3)}
.tx-in ol{max-width:74ch;margin:var(--s3) auto 0;padding-left:1.35em;text-align:left;
  list-style:decimal;color:var(--text-soft)}
.tx-in ol li{font-size:var(--t-md);font-weight:300;line-height:1.78;text-wrap:pretty}
.tx-in ol li::marker{color:var(--mint2);font-weight:700}
.tx-in ol li+li{margin-top:var(--s3)}
.tx-in ol+p{margin-top:var(--s4)}