/* YAS Gate — product page. Главную yas.kz не трогает. */

.page-gate{
  --bg:#F7F1EA;
  --surface:#EFE6DB;
  --surface-2:#E4D8C9;
  --text:#14110E;
  --text-muted:#6A6359;
  --line:#DDD0C0;
  --line-strong:#8F8272;
  --accent:#E8590C;
  --accent-hover:#D24E08;
  --accent-ink:#9A3412;
  --accent-soft:#FFE6D2;
  --on-accent:#1A1206;
  --ink:#F4EFE8;
  --scrim:#1A1510;
  --r-sm:10px;
  --r-md:16px;
  --r-lg:22px;
  background:var(--bg);
  color:var(--text);
}
.page-gate .site-header{background:var(--bg);height:auto;min-height:var(--header-h);padding:10px 0}
.page-gate .dock{background:var(--bg)}
.page-gate .site-footer{background:var(--surface);border-color:var(--line)}
.page-gate .section{border-top:0;padding:clamp(72px,10vw,160px) 0}
.page-gate .btn{border-radius:var(--r-sm);min-height:52px;padding:0 24px}
.page-gate .header-cta{border-radius:var(--r-sm);min-height:40px}
.brand-lockup{display:flex;flex-direction:column;gap:2px;min-width:0;text-decoration:none;color:var(--text)}
.brand-lockup .brand{overflow:hidden;text-overflow:ellipsis}
.brand-sub{font-size:var(--text-caption);color:var(--text-muted);font-weight:var(--fw-medium);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.skip{
  position:absolute;left:var(--s-4);top:-100px;z-index:20;
  background:var(--bg);color:var(--text);padding:var(--s-2) var(--s-4);
  border:var(--bw) solid var(--line-strong);border-radius:var(--r-sm);
}
.skip:focus{top:var(--s-3)}

/* HERO — текст слева, кадр справа */
.hero-cine{
  --hero-blue:#3B82F6;
  --hero-blue-hover:#2563EB;
  display:grid;background:var(--scrim);color:var(--ink);
  min-height:calc(100svh - 72px);
}
.hero-cine-art{position:relative;min-height:52vh}
.hero-cine-art img{
  display:block;width:100%;height:100%;min-height:52vh;
  object-fit:cover;object-position:68% 50%;
}
.hero-cine-art::before{
  content:"";position:absolute;inset:0 auto 0 0;width:36%;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,var(--scrim) 0%,rgba(26,21,16,0) 100%);
}
.hero-cine-copy{position:relative;z-index:1;padding:clamp(28px,5vw,56px) var(--pad-x) clamp(48px,7vw,80px);align-self:center}
.hero-cine .eyebrow{color:var(--hero-blue);letter-spacing:.16em}
.hero-cine h1 .hl{color:var(--hero-blue)}
.hero-cine .btn-primary{background:var(--hero-blue);color:#fff}
.hero-cine .btn-primary:hover{background:var(--hero-blue-hover)}
.hero-cine .price-cap{font-size:var(--text-sm);color:rgba(244,239,232,.6);margin:-12px 0 var(--s-5);max-width:none}
.hero-cine .facts{
  display:flex;flex-direction:column;gap:10px;margin:0 0 var(--s-6);
  padding:0;list-style:none;max-width:none;color:rgba(244,239,232,.92);font-weight:var(--fw-medium);
}
.hero-cine .facts li{margin:0;display:flex;align-items:center;gap:10px}
.hero-cine .facts svg{flex-shrink:0;color:var(--hero-blue)}
.hero-cine .mantra{
  font-size:var(--text-caption);letter-spacing:0.14em;text-transform:uppercase;
  color:rgba(244,239,232,.7);margin:0 0 var(--s-4);max-width:none;
}
.hero-cine h1{
  font-size:clamp(2.4rem,1.15rem + 4.2vw,4.4rem);
  line-height:1.04;letter-spacing:-0.045em;max-width:14ch;margin:0 0 var(--s-6);
  color:var(--ink);
}
.hero-cine .lead{
  font-size:clamp(1.1rem,1rem + .4vw,1.35rem);line-height:1.4;
  color:rgba(244,239,232,.9);max-width:36ch;margin:0 0 var(--s-5);
}
.hero-cine .btn-ghost{color:var(--ink);border-color:rgba(244,239,232,.45)}
.hero-cine .btn-ghost:hover{background:rgba(244,239,232,.08)}
.hero-cine .note{color:rgba(244,239,232,.65);margin:0}
.hero-cine .price-signal{
  font-family:var(--font-mono);font-size:clamp(1.8rem,1.2rem + 1.5vw,2.4rem);
  font-weight:var(--fw-semibold);margin:0 0 4px;color:var(--ink);max-width:none;
}

/* BILLBOARD */
.billboard h2{
  font-size:clamp(2.4rem,1.2rem + 4.5vw,5.5rem);
  line-height:.98;letter-spacing:-0.045em;max-width:10ch;margin:0 0 var(--s-5);
}
.billboard .lead{font-size:1.2rem;color:var(--text);max-width:32ch}
.chain{
  font-family:var(--font-mono);font-size:clamp(.85rem, .7rem + .5vw, 1rem);
  letter-spacing:.08em;text-transform:uppercase;color:var(--accent-ink);
  margin:var(--s-7) 0 0;max-width:none;
}

.cine{margin:0}
.cine img{width:100%;height:auto;object-fit:cover;display:block;border-radius:var(--r-lg)}
.cine--tall img{aspect-ratio:4/5;object-position:center}
.cine--wide img{aspect-ratio:16/9;object-position:center}
.cine + .cine{margin-top:var(--s-7)}

.split-story{display:grid;gap:var(--s-8)}
.split-story h2{margin-bottom:var(--s-4)}

/* PHONE */
.phone-stage{text-align:center}
.phone-stage h2{
  font-size:clamp(2.2rem,1.2rem + 3vw,4rem);max-width:14ch;margin:0 auto var(--s-4);
}
.phone-stage .lead{margin-left:auto;margin-right:auto}
.h-display{font-size:clamp(2.2rem,1.2rem + 3vw,4rem);max-width:12ch;letter-spacing:-0.04em;line-height:.98}
.phone{
  width:min(340px,78vw);margin:var(--s-8) auto 0;padding:12px;
  background:#14110E;border-radius:40px;
}
.phone img{width:100%;height:auto;display:block;border-radius:28px;aspect-ratio:4/5;object-fit:cover;object-position:center 22%}

.use h2{max-width:12ch}
.use .lead{max-width:36ch;color:var(--text)}
.path{
  font-family:var(--font-mono);font-size:var(--text-sm);letter-spacing:.06em;
  text-transform:uppercase;color:var(--accent-ink);margin:var(--s-5) 0 0;max-width:none;
}

.who{display:flex;flex-wrap:wrap;gap:12px;margin:var(--s-6) 0 0;padding:0;list-style:none;max-width:36ch}
.who li{
  margin:0;padding:12px 18px;border:var(--bw) solid var(--line);
  border-radius:var(--r-md);font-size:1.05rem;font-weight:var(--fw-medium);
}
.who-note{
  margin:var(--s-5) 0 0;max-width:36ch;color:var(--text-muted);
  font-size:var(--text-sm);line-height:1.45;
}

.fit-grid{display:grid;gap:var(--s-4);margin:var(--s-6) 0;padding:0;list-style:none;max-width:none}
.extras{grid-template-columns:1fr}
.fit-grid li{margin:0;padding:var(--s-5);background:var(--bg);border-radius:var(--r-md)}
.fit-grid strong{display:block;font-size:1.2rem;margin-bottom:var(--s-2)}
.fit-grid span{color:var(--text-muted)}

.was-became{display:grid;gap:var(--s-6);margin:var(--s-7) 0 0}
.was-became figure{margin:0;text-align:center}
.was-became img{width:100%;max-width:280px;margin:0 auto;border-radius:var(--r-lg);aspect-ratio:1;object-fit:cover}
.was-became figcaption{
  margin-top:var(--s-3);font-family:var(--font-mono);font-size:var(--text-caption);
  letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);
}

.price-hero{text-align:left}
.price-hero .brand-line{font-size:var(--text-caption);letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);margin:0 0 var(--s-3)}
.price-hero h2{font-size:clamp(2rem,1.2rem + 2vw,2.75rem);margin:0 0 var(--s-4)}
.price-hero .sum{
  font-family:var(--font-mono);font-size:clamp(3rem,2rem + 4vw,5.5rem);
  font-weight:var(--fw-semibold);letter-spacing:-0.04em;line-height:1;margin:0 0 var(--s-4);
  color:var(--text);
}
.price-hero .ticks{margin:var(--s-6) 0;padding:0;list-style:none;max-width:none}
.price-hero .ticks li{margin:0 0 var(--s-2);padding:0 0 0 1.35em;position:relative}
.price-hero .ticks li::before{
  content:"";position:absolute;left:0;top:.55em;width:8px;height:8px;border-radius:2px;background:var(--accent);
}

.page-gate table.compare{
  min-width:0;width:100%;max-width:40rem;margin:var(--s-6) 0 0;font-size:1.05rem;
}
.page-gate table.compare th,
.page-gate table.compare td{padding:14px 16px;border-bottom:var(--bw) solid var(--line);text-align:left;vertical-align:top}
.page-gate table.compare th{
  color:var(--text-muted);font-weight:var(--fw-medium);font-size:var(--text-caption);
  text-transform:uppercase;letter-spacing:var(--tr-caps);
}

.faq{max-width:var(--measure)}
.faq details{border-top:var(--bw) solid var(--line)}
.faq details:last-child{border-bottom:var(--bw) solid var(--line)}
.faq summary{
  cursor:pointer;list-style:none;font-size:1.05rem;font-weight:var(--fw-medium);
  padding:var(--s-4) 0;display:flex;justify-content:space-between;gap:var(--s-4);align-items:flex-start;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--font-mono);color:var(--accent-ink);flex-shrink:0}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:0 0 var(--s-5);color:var(--text-muted)}

.steps{display:grid;gap:var(--s-4);margin:var(--s-6) 0 0;padding:0;list-style:none;max-width:none}
.steps li{margin:0;padding:var(--s-5);border:var(--bw) solid var(--line);border-radius:var(--r-md);background:var(--bg)}
.steps span{display:block;font-family:var(--font-mono);font-size:var(--text-caption);color:var(--accent-ink);margin-bottom:var(--s-2)}
.steps strong{display:block;margin-bottom:var(--s-1)}
.steps p{margin:0;color:var(--text-muted)}

.final-cine{
  position:relative;background:var(--scrim);color:var(--ink);
  padding:clamp(80px,12vw,160px) 0;overflow:hidden;
}
.final-cine-img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;
}
.final-cine::after{
  content:"";position:absolute;inset:0;background:rgba(20,16,12,.66);pointer-events:none;
}
.final-cine .wrap{position:relative;z-index:1}
.final-cine h2{
  font-size:clamp(2.6rem,1.4rem + 4vw,5rem);line-height:.98;
  letter-spacing:-0.045em;max-width:12ch;color:var(--ink);margin:0 0 var(--s-6);
}
.final-cine p{color:rgba(244,239,232,.85);max-width:36ch}
.final-cine .btn-ghost{color:var(--ink);border-color:rgba(244,239,232,.45)}
.final-cine .note{color:rgba(244,239,232,.55);margin-top:var(--s-6)}
.quiet-link{font-size:var(--text-sm);color:var(--accent-ink)}

.note{font-size:var(--text-sm);color:var(--text-muted);margin:0 0 var(--s-2);max-width:var(--measure)}
.section-head h2{letter-spacing:-0.03em;max-width:16ch}

.dock{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:15;
  border-top:var(--bw) solid var(--line);padding:var(--s-3) var(--pad-x);
}
.dock .btn{width:100%}

.ui-shot{max-width:280px;margin:var(--s-8) auto 0;background:transparent}
.ui-shot img{width:100%;height:auto;background:transparent;filter:drop-shadow(0 18px 40px rgba(0,0,0,.28))}
.pair-cap{
  display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4);
  margin:var(--s-4) 0 0;font-family:var(--font-mono);font-size:var(--text-caption);
  letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);max-width:none;
}

@media (min-width:720px){
  .split-story{grid-template-columns:1fr 1fr;align-items:center;gap:clamp(32px,6vw,80px)}
  .fit-grid{grid-template-columns:repeat(3,1fr)}
  .extras{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(3,1fr)}
  .hero-cine{grid-template-columns:.42fr .58fr}
  .hero-cine-copy{padding:clamp(48px,8vh,96px) clamp(24px,4vw,56px)}
  .hero-cine-art,.hero-cine-art img{min-height:calc(100svh - 72px)}
}
@media (max-width:719px){
  .hero-cine-art{order:-1}
}
@media (max-width:639px){
  .dock{display:block}
  .page-gate{padding-bottom:76px}
}