/* Aziel Timur — «Рисовать светом» */
@font-face{ font-family:"Prata"; src:url("../fonts/prata.woff") format("woff"); font-weight:400; font-style:normal; font-display:swap }
@font-face{ font-family:"Golos Text"; src:url("../fonts/golos.woff") format("woff"); font-weight:400 900; font-style:normal; font-display:swap }

:root{
  --petrol:#102B33;
  --petrol-deep:#091D23;
  --petrol-raise:#173A44;
  --bone:#EDE6D9;
  --chalk:#E3DACA;
  --ink:#14252B;
  --mist:#9DB2B5;
  --crimson:#B4232C;
  --crimson-hi:#C92F38;
  --line-dark:rgba(237,230,217,.14);
  --line-light:rgba(20,37,43,.16);
  --serif:"Prata", Georgia, serif;
  --sans:"Golos Text", system-ui, -apple-system, "Segoe UI", sans-serif;
  --wrap:1180px;
  --gut:clamp(16px, 4vw, 40px);
}
*{ box-sizing:border-box }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100% }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto } }
body{ margin:0; background:var(--petrol); color:var(--bone); font-family:var(--sans); font-size:1.0625rem; line-height:1.6; -webkit-font-smoothing:antialiased }
img{ max-width:100%; display:block }
a{ color:inherit }
:focus-visible{ outline:2px solid var(--bone); outline-offset:3px; border-radius:2px }
.light :focus-visible{ outline-color:var(--ink) }
.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 var(--gut) }
.skip{ position:absolute; left:-999px; top:8px; background:var(--bone); color:var(--ink); padding:8px 14px; z-index:50 }
.skip:focus{ left:8px }

h1,h2,h3{ font-family:var(--serif); font-weight:400; margin:0; letter-spacing:-.005em }
h2{ font-size:clamp(2rem, 4.6vw, 3.4rem); line-height:1.08; max-width:18ch }
h3{ font-size:1.45rem; line-height:1.2 }
p{ margin:0 0 1em; max-width:62ch }
.lead{ font-size:clamp(1.1rem, 1.6vw, 1.3rem); line-height:1.55; color:var(--bone); opacity:.88 }
.muted{ color:var(--mist) }
section{ padding:clamp(72px, 11vw, 140px) 0 }

/* buttons */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.6em; min-height:52px; padding:0 1.6em; border-radius:999px;
  font:600 1rem/1 var(--sans); text-decoration:none; border:1.5px solid transparent; cursor:pointer; transition:background .2s, color .2s, border-color .2s }
.btn-red{ background:var(--crimson); color:#fff }
.btn-red:hover{ background:var(--crimson-hi) }
.btn-ghost{ border-color:rgba(237,230,217,.45); color:var(--bone); background:transparent }
.btn-ghost:hover{ border-color:var(--bone); background:rgba(237,230,217,.06) }
.light .btn-ghost{ border-color:rgba(20,37,43,.4); color:var(--ink) }
.light .btn-ghost:hover{ border-color:var(--ink); background:rgba(20,37,43,.05) }

/* nav */
.nav{ position:absolute; inset:0 0 auto 0; z-index:10 }
.nav .wrap{ display:flex; align-items:center; justify-content:space-between; height:84px }
.logo{ font-family:var(--serif); font-size:1.35rem; text-decoration:none; letter-spacing:.01em }
.nav ul{ display:flex; gap:2rem; list-style:none; margin:0; padding:0; font-size:.95rem }
.nav ul a{ text-decoration:none; opacity:.8 }
.nav ul a:hover{ opacity:1 }
.nav .btn{ min-height:42px; padding:0 1.2em; font-size:.92rem }
@media (max-width:860px){ .nav ul{ display:none } }

/* hero */
.hero{ position:relative; min-height:100svh; padding:0; background:var(--petrol-deep); overflow:hidden; display:flex; align-items:flex-end }
.hero picture, .hero picture img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:62% 50% }
.hero::after{ content:""; position:absolute; inset:0; background:
  linear-gradient(90deg, rgba(9,29,35,.92) 0%, rgba(9,29,35,.65) 34%, rgba(9,29,35,0) 60%),
  linear-gradient(0deg, rgba(9,29,35,.85) 0%, rgba(9,29,35,0) 38%) }
.hero .wrap{ position:relative; z-index:2; width:100%; padding-bottom:clamp(48px, 9vh, 110px) }
.hero h1{ font-size:clamp(3.6rem, 11.5vw, 10.5rem); line-height:.92; letter-spacing:-.02em; max-width:7ch }
.hero .lead{ max-width:34ch; margin:1.6rem 0 2rem }
.hero .actions{ display:flex; flex-wrap:wrap; gap:12px }
.hero .note{ margin:1.2rem 0 0; font-size:.95rem; color:var(--mist) }
@media (max-width:700px){
  .hero{ align-items:flex-end }
  .hero picture img{ object-position:50% 30% }
  .hero::after{ background:linear-gradient(0deg, rgba(9,29,35,.97) 0%, rgba(9,29,35,.88) 42%, rgba(9,29,35,.1) 72%) }
}
/* the one orchestrated moment: the light comes on */
@media (prefers-reduced-motion:no-preference){
  .hero picture img{ animation:lightOn 2.4s cubic-bezier(.2,.6,.2,1) both }
  .hero h1, .hero .lead, .hero .actions, .hero .note{ animation:rise 1.1s cubic-bezier(.2,.7,.2,1) both }
  .hero .lead{ animation-delay:.35s } .hero .actions{ animation-delay:.5s } .hero .note{ animation-delay:.6s }
}
@keyframes lightOn{ from{ filter:brightness(.15) saturate(.6) } to{ filter:none } }
@keyframes rise{ from{ opacity:0; transform:translateY(18px) } to{ opacity:1; transform:none } }

/* clip */
.clip .grid{ display:grid; grid-template-columns:1fr 1.25fr; gap:clamp(32px, 6vw, 80px); align-items:center }
.clip h2{ margin-bottom:1.4rem }
.facts{ display:grid; grid-template-columns:repeat(3, auto); justify-content:start; gap:1.2rem 2.6rem; margin:2rem 0 1.6rem; padding:0 }
.facts div{ border-top:1px solid var(--line-dark); padding-top:.8rem }
.facts dt{ font-family:var(--serif); font-size:2rem; line-height:1 }
.facts dd{ margin:.4rem 0 0; font-size:.9rem; color:var(--mist) }
.video{ position:relative; aspect-ratio:16/9; border-radius:6px; overflow:hidden; background:#000 }
.video button{ all:unset; cursor:pointer; position:absolute; inset:0; display:block }
.video button img{ width:100%; height:100%; object-fit:cover; transition:transform .6s ease }
.video button:hover img{ transform:scale(1.02) }
.video .play{ position:absolute; left:50%; top:50%; width:84px; height:84px; margin:-42px 0 0 -42px; border-radius:50%; background:rgba(180,35,44,.92); display:grid; place-items:center }
.video .play svg{ width:30px; margin-left:5px; fill:#fff }
.video button:focus-visible{ outline:2px solid var(--bone); outline-offset:-4px }
.video iframe{ position:absolute; inset:0; width:100%; height:100%; border:0 }
.video-cap{ font-size:.85rem; color:var(--mist); margin-top:.8rem }
@media (max-width:860px){ .clip .grid{ grid-template-columns:1fr } .facts{ grid-template-columns:repeat(3, 1fr); gap:1rem } .facts dt{ font-size:1.6rem } }

/* words → frame */
.frames{ background:var(--petrol-deep) }
.frames .head{ display:grid; grid-template-columns:1fr 1fr; gap:2rem 4rem; align-items:end; margin-bottom:clamp(32px, 5vw, 56px) }
.frames .stage{ display:grid; grid-template-columns:minmax(260px, 1fr) 2fr; gap:clamp(20px, 3vw, 40px); align-items:start }
.picker{ display:flex; flex-direction:column; gap:10px; margin:0; padding:0; list-style:none }
.picker button{ all:unset; box-sizing:border-box; width:100%; cursor:pointer; padding:16px 18px; border-radius:6px; border:1px solid var(--line-dark); transition:background .2s, border-color .2s }
.picker button:hover{ background:rgba(237,230,217,.04) }
.picker button[aria-pressed="true"]{ background:var(--petrol-raise); border-color:rgba(237,230,217,.32) }
.picker button:focus-visible{ outline:2px solid var(--bone); outline-offset:2px }
.picker .name{ display:block; font-weight:600; font-size:1rem; margin-bottom:.35rem }
.picker .line{ display:block; font-family:var(--serif); font-size:.98rem; line-height:1.45; color:#CFE0DE }
.screen{ margin:0 }
.screen .frame{ position:relative; aspect-ratio:16/9; border-radius:6px; overflow:hidden; background:#000 }
.screen .frame img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .45s ease }
.screen .frame img.on{ opacity:1 }
.screen figcaption{ margin-top:1rem; color:var(--mist); font-size:.98rem; min-height:3.2em; max-width:60ch }
.frames .foot{ margin-top:2.2rem; color:var(--mist); font-size:.95rem }
@media (max-width:860px){
  .frames .head{ grid-template-columns:1fr }
  .frames .stage{ grid-template-columns:1fr }
  .screen{ order:-1 }
}

/* program (chalk world) */
.light{ background:var(--chalk); color:var(--ink) }
.light .lead{ color:var(--ink) }
.light .muted{ color:#56676B }
.program h2{ margin-bottom:1.2rem }
.parts{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px, 4vw, 56px); margin-top:clamp(40px, 6vw, 72px) }
.part h3{ font-size:clamp(1.6rem, 2.6vw, 2.1rem) }
.part .meta{ margin:.4rem 0 1.2rem; color:#56676B; font-size:.95rem }
.part ul{ margin:0 0 1.6rem; padding:0; list-style:none; border-top:1px solid var(--line-light) }
.part li{ padding:.62rem 0; border-bottom:1px solid var(--line-light) }
.pages{ display:grid; grid-template-columns:repeat(3, 1fr); gap:10px }
.pages img{ width:100%; aspect-ratio:210/297; object-fit:cover; border-radius:3px; box-shadow:0 1px 2px rgba(20,37,43,.18), 0 10px 24px -12px rgba(20,37,43,.4) }
.live{ margin-top:clamp(40px, 6vw, 64px); display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(24px, 4vw, 56px); align-items:center; background:var(--bone); border-radius:8px; overflow:hidden }
.live img{ width:100%; height:100%; object-fit:cover; min-height:280px }
.live .txt{ padding:clamp(24px, 4vw, 48px) clamp(24px, 4vw, 48px) clamp(24px, 4vw, 48px) 0 }
.live h3{ margin-bottom:.8rem }
@media (max-width:860px){
  .parts{ grid-template-columns:1fr }
  .live{ grid-template-columns:1fr } .live .txt{ padding:0 24px 28px }
}

/* steps — a real sequence */
.steps{ display:grid; grid-template-columns:repeat(4, 1fr); gap:clamp(20px, 3vw, 36px); margin:clamp(40px, 6vw, 64px) 0 0; padding:0; list-style:none; counter-reset:s }
.steps li{ counter-increment:s; border-top:1px solid var(--line-dark); padding-top:1.1rem }
.steps li::before{ content:counter(s); display:block; font-family:var(--sans); font-weight:300; font-size:2.8rem; line-height:1; color:var(--crimson-hi); margin-bottom:1rem }
.steps h3{ font-family:var(--sans); font-weight:600; font-size:1.15rem; margin-bottom:.4rem }
.steps p{ color:var(--mist); font-size:.98rem; margin:0 }
@media (max-width:860px){ .steps{ grid-template-columns:1fr 1fr } }
@media (max-width:520px){ .steps{ grid-template-columns:1fr } }

/* about */
.about .grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px, 6vw, 80px); align-items:center }
.about figure{ margin:0 }
.about figure img{ border-radius:6px; aspect-ratio:4/5; object-fit:cover; object-position:35% 50% }
.about blockquote{ margin:2rem 0 0; padding:0 0 0 1.4rem; border-left:2px solid var(--crimson); font-family:var(--serif); font-size:1.3rem; line-height:1.5; max-width:30ch }
.about blockquote footer{ font-family:var(--sans); font-size:.9rem; color:#56676B; margin-top:.8rem }
@media (max-width:860px){ .about .grid{ grid-template-columns:1fr } .about figure{ order:-1 } .about figure img{ aspect-ratio:16/10 } }

/* price */
.price{ background:var(--petrol-deep) }
.offer{ display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(32px, 6vw, 80px); align-items:start }
.amount{ font-family:var(--serif); font-size:clamp(5rem, 13vw, 9.5rem); line-height:.9; margin:1.6rem 0 1rem; letter-spacing:-.02em }
.incl{ margin:0; padding:0; list-style:none; border-top:1px solid var(--line-dark) }
.incl li{ display:grid; grid-template-columns:28px 1fr; gap:.6rem; padding:.95rem 0; border-bottom:1px solid var(--line-dark) }
.incl svg{ width:18px; margin-top:.3rem; stroke:var(--crimson-hi); fill:none; stroke-width:2.2 }
.offer .actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:2rem }
.offer .small{ font-size:.92rem; color:var(--mist); margin-top:1.4rem }
@media (max-width:860px){ .offer{ grid-template-columns:1fr } }

/* faq */
.faq .grid{ display:grid; grid-template-columns:1fr 1.6fr; gap:clamp(32px, 6vw, 80px) }
.faq details{ border-bottom:1px solid var(--line-dark) }
.faq details:first-child{ border-top:1px solid var(--line-dark) }
.faq summary{ list-style:none; cursor:pointer; padding:1.25rem 2.4rem 1.25rem 0; position:relative; font-weight:600; font-size:1.08rem }
.faq summary::-webkit-details-marker{ display:none }
.faq summary::after{ content:""; position:absolute; right:6px; top:50%; width:12px; height:12px; margin-top:-8px; border-right:2px solid var(--mist); border-bottom:2px solid var(--mist); transform:rotate(45deg); transition:transform .25s }
.faq details[open] summary::after{ transform:rotate(-135deg); margin-top:-2px }
.faq details p{ color:#C9D6D6; padding-bottom:1.2rem; margin:0 }
@media (max-width:860px){ .faq .grid{ grid-template-columns:1fr } }

/* footer */
footer.site{ background:var(--petrol-deep); border-top:1px solid var(--line-dark); padding:48px 0 56px; font-size:.95rem }
footer.site .wrap{ display:flex; flex-wrap:wrap; gap:1.2rem 2.4rem; justify-content:space-between; align-items:baseline }
footer.site nav{ display:flex; flex-wrap:wrap; gap:.6rem 1.6rem }
footer.site a{ text-decoration:none; color:var(--mist) }
footer.site a:hover{ color:var(--bone) }

/* legal pages */
.legal{ padding:140px 0 100px }
.legal .wrap{ max-width:820px }
.legal h1{ font-size:clamp(2.4rem, 6vw, 3.6rem); margin-bottom:2rem }
.legal h2{ font-size:1.5rem; margin:2.4rem 0 .8rem; max-width:none }
.legal p, .legal li{ color:#D3DEDE; max-width:70ch }
.fill{ background:rgba(180,35,44,.22); border-bottom:1px dashed var(--crimson-hi); padding:0 .25em }
.legal h2{ font-family:var(--sans); font-weight:600; font-size:1.2rem }

/* AGB, Widerruf */
.legal h3{ font-family:var(--sans); font-weight:600; font-size:1.05rem; margin:1.8rem 0 .6rem }
.legal ul{ padding-left:1.2rem; margin:0 0 1em }
.legal li{ margin:.3rem 0 }
.legal .lang{ margin:-1rem 0 2.4rem; font-size:.95rem }
.legal .lang a{ color:var(--mist) }
.legal .box{ border:1px solid var(--line-dark); border-radius:8px; padding:clamp(18px, 3vw, 30px); margin:1.2rem 0 2rem; background:rgba(9,29,35,.45) }
.legal .box h3{ font-size:1.3rem }
.legal .box h3:first-child{ margin-top:0 }
.legal hr{ border:0; border-top:1px solid var(--line-dark); margin:4.5rem 0 3rem }

/* Спасибо */
.thanks{ min-height:100vh; min-height:100svh; display:grid; align-items:center; padding:120px 0 80px;
  background:linear-gradient(180deg, rgba(9,29,35,.62) 0%, rgba(9,29,35,.88) 55%, var(--petrol-deep) 100%), url(../img/hero-portal.jpg) center 30%/cover no-repeat }
.thanks h1{ font-size:clamp(2.6rem, 7vw, 4.6rem); line-height:1.05; margin-bottom:1.2rem }
.thanks ol{ list-style:none; counter-reset:s; padding:0; margin:2.4rem 0 2rem; display:grid; gap:1.1rem; max-width:620px }
.thanks ol li{ counter-increment:s; display:grid; grid-template-columns:2.4rem 1fr; gap:.4rem; color:#D3DEDE }
.thanks ol li::before{ content:counter(s); font-weight:300; font-size:1.7rem; line-height:1.05; color:var(--crimson-hi) }
.thanks .actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:2rem }

/* two plans */
.plans{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px, 3vw, 32px); margin-top:clamp(32px, 5vw, 56px); align-items:stretch }
.plan{ position:relative; display:flex; flex-direction:column; border:1px solid var(--line-dark); border-radius:14px; padding:clamp(24px, 3.4vw, 40px); background:rgba(16,43,51,.55) }
.plan h3{ font-family:var(--sans); font-weight:600; font-size:1.35rem }
.plan-sub{ color:var(--mist); margin:.3rem 0 0 }
.plan .amount{ font-size:clamp(3.6rem, 8vw, 5.6rem); margin:1.4rem 0 1.6rem }
.plan .incl{ margin-bottom:auto }
.plan .actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:2rem }
.plan .actions .btn{ width:100% }
.plan-main{ border-color:rgba(201,47,56,.65); background:linear-gradient(180deg, rgba(180,35,44,.10), rgba(16,43,51,.55) 45%) }
.plan-tag{ position:absolute; top:-13px; left:clamp(24px, 3.4vw, 40px); background:var(--crimson); color:#fff; font-size:.8rem; font-weight:600; letter-spacing:.04em; padding:.25rem .8rem; border-radius:999px }
.plans-foot{ display:flex; flex-wrap:wrap; gap:1rem 2rem; align-items:center; justify-content:space-between; margin-top:2rem }
.plans-foot .small{ font-size:.92rem; color:var(--mist); max-width:62ch; margin:0 }
@media (max-width:760px){ .plans{ grid-template-columns:1fr } }