:root{--bg:#0b0a08;--fg:#f4efe7;--muted:rgba(244,239,231,.58);--line:rgba(244,239,231,.12);--blue:#2e5bff;--soft:#7e97ff}*{box-sizing:border-box}html{scroll-behavior:smooth;background:var(--bg)}body{margin:0;background:var(--bg);color:var(--fg);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}a{color:#8fa4ff;text-underline-offset:3px}a:hover{color:var(--fg)}.shell,footer>div{max-width:1080px;margin:auto;padding-inline:clamp(20px,5vw,48px)}
body::before{content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;background-image:url('/seo/noise.svg');background-size:180px 180px;opacity:.17;mix-blend-mode:screen}
@media(prefers-reduced-transparency:reduce){body::before{opacity:.09}}
.hero{padding:clamp(64px,13vh,140px) 0 clamp(56px,9vw,100px)}section{padding:clamp(56px,9vw,110px) 0;border-top:1px solid var(--line)}.hero+section{border-top:0}.eyebrow{margin:0 0 clamp(20px,4vw,32px);color:var(--soft);font:12px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.14em;text-transform:uppercase}.eyebrow a{color:var(--soft)}h1,h2,h3,p{margin:0}h1{max-width:920px;font-size:clamp(42px,9vw,102px);line-height:1;letter-spacing:-.045em;font-weight:900;text-wrap:balance}.seo-accent{color:var(--blue)}.lead{max-width:640px;margin-top:clamp(22px,4vw,34px);font-size:clamp(17px,2.2vw,20px);line-height:1.6;color:var(--muted)}.facts{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(28px,5vw,44px)}.facts span{display:flex;align-items:baseline;gap:12px;border:1px solid rgba(244,239,231,.16);border-radius:8px;padding:12px 18px;font:500 14px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace}.facts small{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(244,239,231,.45)}.hero-action{display:flex;flex-wrap:wrap;align-items:center;gap:20px;margin-top:28px}.hero-action>span,.minor,.counter,.refund{font:12px/1.45 ui-monospace,SFMono-Regular,Menlo,monospace;color:rgba(244,239,231,.52)}.button{width:100%;border:1px solid rgba(244,239,231,.22);border-radius:10px;background:transparent;color:var(--fg);padding:15px 20px;font-family:inherit;font-size:16px;font-weight:600;line-height:1.25;cursor:pointer;transition:.15s}.button:hover{border-color:var(--blue);color:#fff}.button:focus-visible{border-color:var(--blue);outline:2px solid var(--soft);outline-offset:3px;color:#fff}.hero-action .button{width:auto;padding-inline:40px}.primary{background:var(--blue);border-color:var(--blue);color:#fff}.primary:hover,.primary:focus-visible{background:#1f4bf5}h2{font-size:clamp(32px,5.5vw,54px);font-weight:800;letter-spacing:-.03em}.program{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 56px;margin-top:clamp(24px,5vw,44px)}.program article{display:flex;gap:18px;padding:18px 0;border-top:1px solid rgba(244,239,231,.1)}.program b{color:var(--soft);font:12px ui-monospace,SFMono-Regular,Menlo,monospace;padding-top:4px}.program h3,.faq h3{font-size:17px;font-weight:650}.program p,.faq p{margin-top:4px;color:var(--muted);font-size:15px;line-height:1.55}.price-head{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap}.price-head p{max-width:430px;color:rgba(244,239,231,.5);font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em}.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:clamp(28px,5vw,44px)}.card{position:relative;display:flex;flex-direction:column;border:1px solid rgba(244,239,231,.14);border-radius:14px;padding:28px 24px;min-height:440px}.featured{border-color:var(--blue)}.badge{position:absolute;top:-13px;left:20px;margin:0;background:var(--blue);border-radius:6px;padding:5px 12px;color:#fff;font:11px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em;text-transform:uppercase}.price{margin-top:14px;font-size:44px;font-weight:900;letter-spacing:-.03em;line-height:1}.card h3{margin-top:8px;font-size:18px}.card ul{padding:0;list-style:none;margin:20px 0;display:grid;gap:10px}.card li{display:flex;gap:10px;color:rgba(244,239,231,.7);font-size:15px;line-height:1.5}.card li:before{content:"+";color:var(--soft);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.counter{margin-top:auto;padding-top:20px;color:var(--soft)}.minor{min-height:34px;margin:10px 0}.refund{margin-top:18px}.faq{max-width:760px;margin-top:clamp(24px,5vw,40px)}.faq article{padding:20px 0;border-top:1px solid rgba(244,239,231,.1)}footer{border-top:1px solid var(--line);padding:36px 0 64px;color:rgba(244,239,231,.45);font:12.5px ui-monospace,SFMono-Regular,Menlo,monospace}footer>div,footer nav{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}footer nav{gap:24px}.site-header{padding-top:clamp(20px,3vw,32px);padding-bottom:0}.site-nav{display:flex;justify-content:space-between;align-items:center;gap:16px}.nav-brand{font:700 15px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--fg);text-decoration:none;letter-spacing:-.02em}.nav-brand:hover{color:var(--soft)}.nav-links{display:flex;align-items:center;gap:clamp(12px,2.5vw,24px)}.nav-link{font:500 14px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--muted);text-decoration:none}.nav-link:hover{color:var(--fg)}.nav-login{width:auto;padding:8px 18px;font-size:14px;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}@media(max-width:540px){.nav-link{display:none}}@media(max-width:760px){.program,.cards{grid-template-columns:1fr}.card{min-height:auto}.price-head{align-items:start}.price-head p{margin-top:8px}.hero-action .button{width:100%}}


/* Service pages: login, purchase status, access and legal documents. */
:focus-visible{outline:2px solid var(--soft);outline-offset:3px}.service-page{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}.service-page .shell{width:100%;flex:1}.service-hero{max-width:780px;padding-block:clamp(56px,11vh,120px) clamp(48px,8vw,88px)}.service-hero h1{max-width:720px}.service-card{max-width:600px;margin-top:clamp(28px,5vw,42px);padding:clamp(20px,4vw,30px);border:1px solid rgba(244,239,231,.16);border-radius:14px;background:rgba(244,239,231,.025)}.auth-form{display:grid;gap:14px}.field-label{color:rgba(244,239,231,.76);font-size:14px;font-weight:600}.auth-input{width:100%;min-height:54px;border:1px solid rgba(244,239,231,.22);border-radius:10px;background:rgba(244,239,231,.04);color:var(--fg);padding:14px 16px;font-family:inherit;font-size:16px;line-height:1.3;transition:border-color .15s,box-shadow .15s}.auth-input::placeholder{color:rgba(244,239,231,.4)}.auth-input:hover{border-color:rgba(244,239,231,.38)}.auth-input:focus{border-color:var(--soft);outline:0;box-shadow:0 0 0 3px rgba(126,151,255,.18)}.form-actions{display:grid;gap:12px;margin-top:6px}.form-actions .button{min-height:54px}.form-note,.form-status{font:12px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace;color:rgba(244,239,231,.55)}.form-status{min-height:19px;margin:0}.form-status[data-state="error"]{color:#ffaaa2}.button:disabled{cursor:wait;opacity:.66}.service-actions{display:grid;gap:12px;max-width:420px;margin-top:clamp(28px,5vw,40px)}.service-actions .button{display:block;text-align:center;text-decoration:none}.access-list{display:grid;gap:14px;max-width:680px;margin-top:clamp(28px,5vw,40px)}.access-item{margin:0;color:rgba(244,239,231,.72);font-size:16px;line-height:1.6}.access-item .button{max-width:420px;display:block;text-align:center;text-decoration:none}.next-steps{display:grid;gap:16px;max-width:640px;margin:clamp(26px,5vw,38px) 0 0;padding:0;list-style:none;counter-reset:step}.next-steps li{position:relative;padding-left:40px;color:rgba(244,239,231,.72);font-size:16px;line-height:1.6;counter-increment:step}.next-steps li:before{content:counter(step);position:absolute;top:1px;left:0;display:flex;align-items:center;justify-content:center;width:26px;height:26px;border:1px solid rgba(126,151,255,.5);border-radius:50%;color:var(--soft);font:600 12px/1 ui-monospace,SFMono-Regular,Menlo,monospace}.logout-form{max-width:220px;margin-top:18px}.logout-form .button{padding-block:12px;font-size:14px}.service-footer{margin-top:auto}.legal{max-width:820px}.legal .legal-kicker{margin-bottom:18px;color:var(--soft);font:600 12px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.12em;text-transform:uppercase}.legal .effective{margin:20px 0 44px;color:var(--muted);font:13px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace}.legal section{padding:34px 0;border-top:1px solid var(--line)}.legal h2{font-size:clamp(24px,4vw,36px);line-height:1.15}.legal h3{margin:24px 0 8px;font-size:18px}.legal p,.legal li{color:rgba(244,239,231,.72);font-size:16px;line-height:1.72}.legal p{margin:14px 0}.legal ul,.legal ol{margin:14px 0;padding-left:24px}.legal li+li{margin-top:8px}.legal table{width:100%;margin:20px 0;border-collapse:collapse;font-size:15px}.legal th,.legal td{padding:14px 12px;border-top:1px solid var(--line);text-align:left;vertical-align:top;line-height:1.55}.legal th{color:var(--soft);font:600 12px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.06em;text-transform:uppercase}.legal td{color:rgba(244,239,231,.72)}.legal .back{display:inline-block;margin-top:24px}.legal a{overflow-wrap:anywhere}@media(max-width:640px){.service-hero{padding-top:48px}.service-card{margin-inline:-4px}.service-footer{padding-bottom:40px}.legal table,.legal tbody,.legal tr,.legal th,.legal td{display:block}.legal th{padding-bottom:4px}.legal td{padding-top:4px}.legal tr{padding:10px 0;border-top:1px solid var(--line)}.legal th,.legal td{border:0}}

dialog#checkout-lead,dialog.cancel-email-dialog{width:min(560px,calc(100% - 28px));padding:0;border:0;background:transparent;color:var(--fg)}dialog#checkout-lead::backdrop,dialog.cancel-email-dialog::backdrop{background:rgba(7,7,10,.78);backdrop-filter:blur(5px)}dialog#checkout-lead .service-card,dialog.cancel-email-dialog .service-card{position:relative;margin:0;box-shadow:0 24px 80px rgba(0,0,0,.45)}.dialog-close{position:absolute;top:12px;right:12px;width:36px;height:36px;border:0;border-radius:50%;background:transparent;color:var(--fg);font-size:28px;line-height:1;cursor:pointer}.dialog-close:hover{background:rgba(244,239,231,.08)}.dialog-actions{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr)}.dialog-actions>button:not(.primary){border:1px solid rgba(244,239,231,.2);border-radius:10px;background:transparent;color:var(--fg);font:inherit;cursor:pointer}

/* Compact checkout dialog. Kept separate from cancel-email-dialog. */
dialog#checkout-lead{width:min(480px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto}dialog#checkout-lead .checkout-lead-card{display:grid;gap:14px;padding:28px;background:linear-gradient(145deg,rgba(34,38,65,.96),rgba(15,14,18,.98));border-color:rgba(143,164,255,.34);box-shadow:0 28px 90px rgba(0,0,0,.58)}.checkout-lead-eyebrow{margin:0;color:var(--soft);font:600 11px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.14em}.checkout-lead-card h2{max-width:360px;font-size:clamp(28px,5vw,32px);line-height:1.05;letter-spacing:-.035em}.checkout-lead-copy{color:var(--muted);font-size:16px;line-height:1.5}.checkout-lead-card .field-label{margin-top:4px}.checkout-lead-card .auth-input{min-height:52px}.checkout-consents{display:grid;gap:10px;margin:0;padding:0;border:0}.checkout-consents legend{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.checkout-consent{display:grid;grid-template-columns:20px minmax(0,1fr);gap:10px;align-items:start;color:rgba(244,239,231,.72);font-size:13px;line-height:1.42;cursor:pointer}.checkout-consent input{width:19px;height:19px;margin:0;accent-color:var(--soft);cursor:pointer}.checkout-consent a{color:#b9c8ff}.checkout-consent a:hover{color:#fff}.checkout-lead-note{margin-top:-2px}.checkout-lead-card .form-status{margin-top:-4px}.checkout-lead-actions{margin-top:0}.checkout-lead-actions .button{width:100%;min-height:54px}/* На узком экране диалог прокручивается, и кнопка оплаты уезжала за нижний край.
   Флекс — не прихоть: у грид-элемента containing block равен его же ячейке, sticky там не сдвинется. */
@media(max-width:540px){dialog#checkout-lead{width:calc(100vw - 24px);max-height:calc(100dvh - 24px)}dialog#checkout-lead .checkout-lead-card{display:flex;flex-direction:column;gap:13px;padding:24px 20px}.checkout-lead-card h2{font-size:28px}.checkout-lead-card .dialog-close{top:10px;right:10px}.checkout-lead-actions{position:sticky;bottom:0;z-index:1;margin:0 -20px -24px;padding:14px 20px 24px;border-radius:0 0 13px 13px;background:linear-gradient(180deg,rgba(15,14,18,0),#0f0e12 14px)}}
.auth-input[aria-invalid="true"]{border-color:#ffaaa2;background:rgba(255,170,162,.09)}.auth-input[aria-invalid="true"]:focus{box-shadow:0 0 0 3px rgba(255,170,162,.22)}.checkout-consent.is-invalid,dialog.cancel-email-dialog .field-label.is-invalid{color:#ffaaa2}.checkout-consent.is-invalid input,dialog.cancel-email-dialog .field-label.is-invalid input[type="checkbox"]{outline:2px solid #ffaaa2;outline-offset:2px}

/* High-Fidelity Cabinet UI/UX System (SEO Stream Account.html) */
.cabinet-shell { max-width: 920px; margin: 0 auto; padding: 44px 32px 56px; display: flex; flex-direction: column; gap: 20px; }
.cabinet-nav { display: flex; justify-content: space-between; align-items: center; padding: 18px 32px; border-bottom: 1px solid rgba(244,239,231,0.1); background: #0B0A08; }
.cabinet-nav-brand { display: flex; align-items: baseline; gap: 10px; }
.cabinet-nav-title { font-weight: 800; font-size: 15px; color: #F4EFE7; }
.cabinet-nav-tag { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: rgba(244,239,231,0.4); }
.cabinet-nav-right { display: flex; align-items: center; gap: 22px; font-size: 13px; }
.cabinet-nav-email { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: rgba(244,239,231,0.5); }
.cabinet-nav-link { color: rgba(244,239,231,0.5); text-decoration: none; transition: color 0.15s; }
.cabinet-nav-link:hover { color: #F4EFE7; }
.cabinet-nav-logout-btn { background: none; border: none; font: inherit; color: rgba(244,239,231,0.5); cursor: pointer; padding: 0; transition: color 0.15s; }
.cabinet-nav-logout-btn:hover { color: #F4EFE7; }

.cabinet-card { background: #0B0A08; border: 1px solid rgba(244,239,231,0.14); border-radius: 14px; box-shadow: 0 16px 48px rgba(0,0,0,0.55); overflow: hidden; color: #F4EFE7; }
.cabinet-card.featured-card { border-color: rgba(46,91,255,0.55); }
.cabinet-card-body { padding: 24px 26px; }

.dv-kicker { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: #7E97FF; }
.dv-title { margin-top: 8px; font-size: 20px; font-weight: 800; letter-spacing: -0.01em; color: #F4EFE7; }
.dv-desc { margin-top: 6px; font-size: 14px; line-height: 1.5; color: rgba(244,239,231,0.55); }
.dv-meta { margin-top: 10px; font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: rgba(244,239,231,0.4); }

.badge-forever { display: inline-flex; align-items: center; gap: 8px; border: 1px solid rgba(111,207,151,0.35); color: #6FCF97; border-radius: 100px; padding: 6px 14px; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
.badge-forever-dot { width: 6px; height: 6px; border-radius: 50%; background: #6FCF97; display: inline-block; }

.badge-seat { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; background: #2E5BFF; color: #fff; border-radius: 6px; padding: 4px 10px; display: inline-block; }
.badge-no-seat { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; border: 1px solid rgba(244,239,231,0.2); color: rgba(244,239,231,0.5); border-radius: 6px; padding: 4px 10px; display: inline-block; }

.video-frame { position: relative; aspect-ratio: 16/9; background: repeating-linear-gradient(135deg,#0E0D0B 0 14px,#12100D 14px 28px); overflow: hidden; }
.video-frame video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.video-resume-btn { position: absolute; top: 16px; left: 16px; display: flex; align-items: center; gap: 10px; background: rgba(11,10,8,0.88); border: 1px solid rgba(244,239,231,0.18); border-radius: 100px; padding: 9px 16px; cursor: pointer; color: #F4EFE7; z-index: 10; font-family: 'Golos Text', sans-serif; font-size: 13px; font-weight: 600; transition: border-color 0.15s; }
.video-resume-btn:hover { border-color: #2E5BFF; }
.video-resume-btn .play-icon { width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 8px solid #7E97FF; display: inline-block; }
.video-resume-btn .chapter-hint { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: rgba(244,239,231,0.45); }

.chapters-section { padding: 20px 26px 24px; }
.chapters-title { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(244,239,231,0.45); margin-bottom: 12px; }
.chapters-grid { display: grid; grid-template-columns: 1fr 1fr; grid-auto-flow: column; grid-template-rows: repeat(4, auto); column-gap: 32px; row-gap: 2px; }
.chapter-item { display: flex; gap: 14px; align-items: baseline; padding: 9px 12px; border-radius: 8px; cursor: pointer; color: #F4EFE7; font-size: 14.5px; transition: background 0.15s; user-select: none; }
.chapter-item:hover { background: rgba(244,239,231,0.06); }
.chapter-item.active { background: rgba(46,91,255,0.14); }
.chapter-time { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: #7E97FF; flex: none; }
.chapter-item.active .chapter-time { color: #8FA4FF; }
.chapter-active-tag { margin-left: auto; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: #8FA4FF; }

.download-error-box { margin-top: 16px; border: 1px solid rgba(255,122,112,0.4); background: rgba(255,122,112,0.08); border-radius: 10px; padding: 13px 16px; display: flex; gap: 12px; align-items: flex-start; }
.error-icon-badge { flex: none; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid #FF7A70; color: #FF7A70; font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 600; display: flex; align-items: center; justify-content: center; margin-top: 1px; }

/* A sweep reads as "still loading"; a fading block reads as "stuck". */
.skeleton-box { position: relative; overflow: hidden; background: rgba(244,239,231,0.08); border-radius: 8px; }
.skeleton-box::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 20%, rgba(244,239,231,0.10) 50%, transparent 80%);
  transform: translateX(-100%);
  animation: skeleton-sweep 1.5s infinite ease-in-out;
}
@keyframes skeleton-sweep { to { transform: translateX(100%); } }

@media (max-width: 640px) {
  .cabinet-shell { padding: 24px 20px 36px; gap: 14px; }
  .cabinet-nav { padding: 16px 20px; }
  .chapters-grid { grid-template-columns: 1fr; grid-auto-flow: row; grid-template-rows: none; }
}

/* =========================================================================
   Motion, depth and interaction layer.
   Every animation here is opt-out via prefers-reduced-motion (bottom block).
   No inline style attributes anywhere: CSP forbids them (style-src 'self').
   ========================================================================= */

/* --- sticky header + reading progress --- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  padding-block: clamp(14px, 2.4vw, 22px);
  transition: background .25s ease, border-color .25s ease, backdrop-filter .25s ease;
  border-bottom: 1px solid transparent;
}
.site-header > .shell { padding-block: 0; }
body.is-scrolled .site-header {
  background: rgba(11, 10, 8, .78);
  border-bottom-color: var(--line);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
}
.scroll-progress {
  position: fixed;
  inset: 0 0 auto;
  height: 2px;
  z-index: 70;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--blue), var(--soft));
  pointer-events: none;
}

/* --- hero atmosphere --- */
.hero { position: relative; }
.hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -22%;
  left: -14%;
  width: min(760px, 92vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(46, 91, 255, .30), rgba(46, 91, 255, .06) 46%, transparent 70%);
  filter: blur(24px);
  animation: hero-drift 22s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes hero-drift {
  from { transform: translate3d(0, 0, 0) scale(1); opacity: .85; }
  to   { transform: translate3d(9%, 6%, 0) scale(1.12); opacity: 1; }
}
.seo-accent { position: relative; }
.seo-accent::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -.02em;
  height: .05em;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(46, 91, 255, .85), rgba(126, 151, 255, 0));
  transform: scaleX(0);
  transform-origin: 0 50%;
  animation: underline-in .9s .35s cubic-bezier(.2, .75, .2, 1) forwards;
}
@keyframes underline-in { to { transform: scaleX(1); } }

/* --- countdown + live pill --- */
.facts span { transition: border-color .2s ease, transform .2s ease; }
.facts span:hover { border-color: rgba(244, 239, 231, .34); transform: translateY(-2px); }
.fact-live { border-color: rgba(46, 91, 255, .5) !important; color: #cfd9ff; }
.fact-live::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 0 0 rgba(46, 91, 255, .6);
  animation: live-pulse 2s infinite;
  align-self: center;
}
@keyframes live-pulse {
  70% { box-shadow: 0 0 0 9px rgba(46, 91, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(46, 91, 255, 0); }
}
[data-countdown] { font-variant-numeric: tabular-nums; }
[data-countdown] b { font-weight: 600; letter-spacing: .02em; }

/* --- scroll reveal ---
   Gated behind .js-reveal (set by app.js only once the observer exists), so a JS
   failure or a no-script client can never leave the page blank. */
.js-reveal .reveal { opacity: 0; transform: translateY(20px); }
.js-reveal .reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1);
  transition-delay: var(--reveal-delay, 0ms);
}

/* --- buttons --- */
a.button { text-decoration: none; }
.button { position: relative; overflow: hidden; transition: border-color .18s, background .18s, color .18s, transform .12s, box-shadow .25s; }
.button:hover:not(:disabled) { transform: translateY(-1px); }
.button:active:not(:disabled) { transform: translateY(1px); }
.primary:hover:not(:disabled) { box-shadow: 0 14px 34px -14px rgba(46, 91, 255, .9); }
.button::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .16) 50%, transparent 62%);
  transform: translateX(-130%);
  pointer-events: none;
}
.button:hover:not(:disabled)::after { animation: button-shine .8s ease forwards; }
@keyframes button-shine { to { transform: translateX(130%); } }
.button[data-busy="true"] { cursor: progress; }
.button .spinner {
  display: inline-block;
  width: 13px;
  height: 13px;
  margin-right: 9px;
  vertical-align: -2px;
  border: 2px solid rgba(255, 255, 255, .35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* --- program rows --- */
.program article { transition: border-color .2s ease; position: relative; }
.program article::after {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  height: 1px;
  width: 0;
  background: linear-gradient(90deg, var(--blue), transparent);
  transition: width .45s cubic-bezier(.2, .7, .2, 1);
}
.program article:hover::after { width: 100%; }
.program article:hover b { color: var(--fg); }
.program b { transition: color .2s ease; }

/* --- pricing cards --- */
.cards { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
.card {
  isolation: isolate;
  transition: transform .28s cubic-bezier(.2, .7, .2, 1), border-color .28s ease, box-shadow .28s ease;
}
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  opacity: 0;
  transition: opacity .3s ease;
  background: radial-gradient(420px circle at var(--px, 50%) var(--py, 0%), rgba(46, 91, 255, .16), transparent 62%);
}
.card:hover { transform: translateY(-5px); border-color: rgba(244, 239, 231, .3); box-shadow: 0 30px 70px -40px rgba(0, 0, 0, .95); }
.card:hover::before { opacity: 1; }
.featured { box-shadow: 0 24px 70px -46px rgba(46, 91, 255, .95); }
.featured:hover { border-color: var(--blue); box-shadow: 0 34px 80px -38px rgba(46, 91, 255, .85); }
.card li { transition: color .2s ease; }
.card:hover li { color: rgba(244, 239, 231, .82); }
.card ul { margin-bottom: 14px; }

/* --- archive tiles --- */
.archive-grid article { transition: background .25s ease; }
.archive-grid article:hover { background: #100e0c; }
.archive-grid strong { transition: transform .25s cubic-bezier(.2, .7, .2, 1); display: block; }
.archive-grid article:hover strong { transform: translateY(-3px); }

/* --- stack sample and cabinet route --- */
.stack-route {
  padding: 0 26px 24px;
  border-top: 1px solid rgba(244, 239, 231, .1);
}
.stack-route-kicker { margin-top: 20px; }
.stack-route h3 { margin-top: 7px; font-size: 16px; }
.stack-route ol {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 24px;
  margin: 16px 0 0;
  padding-left: 20px;
  color: rgba(244, 239, 231, .65);
  font-size: 13px;
  line-height: 1.55;
}
.stack-route b { color: #f4efe7; }
.stack-route code { color: var(--soft); font: 11px ui-monospace, SFMono-Regular, Menlo, monospace; }
.stack-route-prompts { margin-top: 24px; }
.stack-route-label {
  margin: 0 0 9px;
  color: var(--soft);
  font: 10px ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .08em;
}
.stack-route-prompt-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.stack-route-prompt-list li {
  padding: 10px 12px;
  border: 1px solid rgba(244, 239, 231, .14);
  background: #100e0c;
  color: rgba(244, 239, 231, .78);
  font-size: 12px;
  line-height: 1.45;
}
.stack-route-shortcut {
  margin-top: 12px;
  padding: 13px 14px;
  border-left: 3px solid var(--blue);
  background: rgba(46, 91, 255, .1);
}
.stack-route-shortcut .stack-route-label { margin-bottom: 5px; }
.stack-route-shortcut p:last-child { margin: 0; color: rgba(244, 239, 231, .78); font-size: 13px; line-height: 1.5; }
@media (max-width: 640px) {
  .stack-route { padding-inline: 20px; }
  .stack-route ol,
  .stack-route-prompt-list { grid-template-columns: 1fr; }
}

/* --- FAQ accordion --- */
.faq-item {
  padding: 0;
  border-top: 1px solid rgba(244, 239, 231, .1);
}
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0;
  cursor: pointer;
  list-style: none;
  font-size: 17px;
  font-weight: 650;
  transition: color .18s ease;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--soft); }
.faq-item summary::after {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  margin-right: 4px;
  border-right: 1.5px solid var(--soft);
  border-bottom: 1.5px solid var(--soft);
  transform: rotate(45deg) translateY(-2px);
  transition: transform .25s ease;
}
.faq-item[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.faq-item:last-child { border-bottom: 1px solid rgba(244, 239, 231, .1); }
.faq-item > p {
  margin: 0 0 20px;
  max-width: 640px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
  animation: faq-open .3s ease;
}
@keyframes faq-open { from { opacity: 0; transform: translateY(-6px); } }

/* --- mobile sticky buy bar --- */
.mobile-cta {
  position: fixed;
  z-index: 55;
  left: 12px;
  right: 12px;
  bottom: 12px;
  display: none;
  align-items: center;
  gap: 12px;
  padding: 10px 10px 10px 16px;
  border: 1px solid rgba(244, 239, 231, .16);
  border-radius: 14px;
  background: rgba(11, 10, 8, .9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 20px 50px -24px rgba(0, 0, 0, .95);
  transform: translateY(140%);
  /* visibility, а не только transform: увезённая за экран ссылка иначе ловит фокус по табу.
     Прячем с задержкой в конец уезда, показываем сразу — иначе панель либо мигает, либо не доедет. */
  visibility: hidden;
  transition: transform .35s cubic-bezier(.2, .7, .2, 1), visibility 0s .35s;
}
.mobile-cta.is-visible {
  transform: none;
  visibility: visible;
  transition: transform .35s cubic-bezier(.2, .7, .2, 1), visibility 0s;
}
.mobile-cta-text { flex: 1; font: 11.5px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace; color: rgba(244, 239, 231, .6); letter-spacing: .05em; text-transform: uppercase; }
/* Главная кнопка покупки на телефоне — цель пальца не меньше 44px, как в шапке */
.mobile-cta .button { width: auto; padding: 13px 18px; font-size: 14px; text-decoration: none; }
@media (max-width: 760px) {
  .mobile-cta { display: flex; }
  .cards { grid-template-columns: 1fr; }
  /* room for the floating CTA so it never sits on top of the footer links */
  footer { padding-bottom: 104px; }
}
@media (max-width: 900px) and (min-width: 761px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- mobile nav stays reachable --- */
@media (max-width: 540px) {
  /* Шапка — единственный быстрый путь к цене с первого экрана: цель пальца не меньше 44px */
  .nav-link { display: inline-flex; align-items: center; padding: 15px 0; font-size: 12px; }
  .nav-links { gap: 12px; }
  .nav-login { padding: 13px 16px; }
}

/* --- keyboard focus stays obvious everywhere --- */
.faq-item summary:focus-visible,
.card:focus-within { outline: 2px solid var(--soft); outline-offset: 4px; }

.upsell { max-width: 620px; margin-top: 44px; padding-top: 26px; border-top: 1px solid rgba(126,151,255,.62); }
.upsell h2 { font-size: clamp(27px,4vw,42px); }
.upsell-lockup { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; }
.upsell-lockup strong { color: var(--blue); font: 800 clamp(30px,5vw,52px)/1 "JetBrains Mono",monospace; letter-spacing: -.08em; }
.upsell > p:not(.eyebrow) { max-width: 470px; margin: 12px 0 20px; color: var(--muted); line-height: 1.55; }
.upsell .upsell-meta { margin-top: -8px; color: var(--soft); font: 11px/1.4 "JetBrains Mono",monospace; letter-spacing: .08em; text-transform: uppercase; }
.upsell .button { width: auto; min-width: 250px; }
.upsell .button:disabled { cursor: wait; opacity: .7; }
.price-rise { display:grid; grid-template-columns:auto 1fr; gap:6px 18px; align-items:baseline; margin:0 0 26px; padding:13px 0; border-top:2px solid var(--blue); border-bottom:1px solid var(--line); font:11px/1.4 "JetBrains Mono",monospace; letter-spacing:.08em; text-transform:uppercase; color:var(--soft); }.price-rise b{color:var(--fg);text-align:right}.price-rise p{grid-column:1/-1;margin:0;color:var(--muted);letter-spacing:0;text-transform:none}.price-rise.is-after{border-color:var(--soft)}.price-rise.compact{margin:18px 0;font-size:10px}

/* Landing title, proof showcase, and tier distinction. */
.hero-title { max-width: none; font-size: min(9vw, 90px); text-wrap: nowrap; }
.title-line { display: block; color: var(--fg); white-space: nowrap; }
.proof-showcase { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(220px, .7fr); gap: 16px; margin-top: clamp(34px, 5vw, 56px); }
.proof-case { margin: 0; border: 1px solid rgba(79,117,255,.52); border-radius: 14px; overflow: hidden; background: linear-gradient(145deg, rgba(46,91,255,.2), rgba(12,15,33,.82) 54%); box-shadow: 0 24px 70px -46px rgba(46,91,255,.9); }
.proof-case-copy { padding: clamp(22px,3vw,32px); }
.proof-kicker { color: var(--soft); font: 11px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .12em; text-transform: uppercase; }
.proof-case h2 { margin-top: 10px; color: #f4f6ff; font-size: clamp(30px,4.3vw,56px); line-height: .98; }
.proof-stat { margin-top: 14px; color: #b9c8ff; font: 600 13px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .03em; }
.proof-lead { max-width: 610px; margin-top: 14px; color: rgba(244,239,231,.73); font-size: 16px; line-height: 1.55; }
.proof-cta { display: inline-flex; margin-top: 18px; color: #dfe6ff; font: 600 13px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; text-decoration: none; }
.proof-cta:hover { color: #fff; }
.proof-image-link { display: block; aspect-ratio: 2194 / 806; margin: 0 14px; overflow: hidden; border: 1px solid rgba(143,164,255,.28); border-radius: 8px; background: #08090e; }
.proof-image-link:focus-visible { outline-color: #b9c8ff; }
.proof-image { display: block; width: 100%; height: 100%; object-fit: contain; transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.proof-image-link:hover .proof-image { transform: scale(1.015); }
.proof-case figcaption { padding: 13px 18px 17px; color: rgba(244,239,231,.5); font: 11px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; }
.proof-notes { display: grid; gap: 16px; }
.proof-notes article { display: grid; align-content: start; gap: 9px; padding: 24px; border: 1px solid rgba(126,151,255,.24); border-radius: 14px; background: linear-gradient(145deg, rgba(126,151,255,.11), rgba(244,239,231,.018)); }
.proof-notes h3 { color: #dce4ff; font-size: clamp(19px,2vw,25px); letter-spacing: -.025em; }
.proof-notes p { color: rgba(244,239,231,.64); font-size: 14px; line-height: 1.55; }

.card { --tier: var(--soft); --tier-rgb: 126,151,255; border-color: rgba(var(--tier-rgb), .34); background: linear-gradient(145deg, rgba(var(--tier-rgb), .12), rgba(244,239,231,.018) 44%); }
.card::after { content: ""; position: absolute; inset: 0 14px auto; height: 2px; border-radius: 999px; background: linear-gradient(90deg, var(--tier), transparent 84%); pointer-events: none; }
.availability-badge { --availability-rgb: 126,151,255; position:absolute; z-index:1; top:0; left:50%; display:grid; gap:6px; width:min(276px,calc(100% - 24px)); padding:7px 10px 8px; border:1px solid rgba(var(--availability-rgb),.58); border-radius:8px; background:linear-gradient(145deg,rgba(var(--availability-rgb),.17),rgba(11,10,8,.97) 70%); box-shadow:0 10px 24px -18px rgba(0,0,0,.9); transform:translate(-50%,-100%); text-align:center; }
.availability-text { color:rgb(var(--availability-rgb)); font:600 clamp(8px,2.7vw,10px)/1.2 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.065em; text-transform:uppercase; white-space:nowrap; }
.availability-rail { display:flex; gap:2px; width:100%; height:4px; overflow:hidden; }
.availability-segment { display:block; flex:1 1 0; min-width:0; border-radius:1px; background:rgba(var(--availability-rgb),.2); transition:background-color .16s ease,box-shadow .16s ease; }
.availability-segment.is-lit { background:rgb(var(--availability-rgb)); box-shadow:0 0 6px rgba(var(--availability-rgb),.5); }
.availability-badge-stream { --availability-rgb:79,117,255; }
.availability-badge-personal { --availability-rgb:225,183,108; }
.availability-badge-stream.is-urgent .availability-segment.is-lit { background:#ff9f45; box-shadow:0 0 6px rgba(255,159,69,.45); }
.card-stack { --tier: #74b7ff; --tier-rgb: 116,183,255; }
.card-stream { --tier: #4f75ff; --tier-rgb: 79,117,255; border-color: rgba(79,117,255,.78); background: linear-gradient(145deg, rgba(46,91,255,.3), rgba(20,29,78,.2) 58%, rgba(244,239,231,.025)); }
.card-personal { --tier: #e1b76c; --tier-rgb: 225,183,108; background: linear-gradient(145deg, rgba(225,183,108,.14), rgba(62,44,20,.18) 62%, rgba(244,239,231,.02)); }
.card-mode { order: -1; margin: 0; color: var(--tier); font: 11px/1.25 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .1em; text-transform: uppercase; }
.price-rise[hidden], .price-change[hidden], .price-change [hidden] { display: none; }
.price-change { display: grid; gap: 3px; margin-top: 13px; padding: 10px 11px; border: 1px solid rgba(var(--tier-rgb), .24); border-radius: 8px; background: rgba(0,0,0,.16); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.price-change span { color: rgba(244,239,231,.52); font-size: 10px; letter-spacing: .07em; text-transform: uppercase; }
.price-change strong { color: var(--tier); font-size: 14px; letter-spacing: -.02em; }
.card .buy { border-color: rgba(var(--tier-rgb), .72); }
.card-stack .buy { background: rgba(116,183,255,.13); }
.card-personal .buy { background: rgba(225,183,108,.14); color: #ffedc6; }
.card-stack .buy:hover, .card-personal .buy:hover { background: rgba(var(--tier-rgb), .27); border-color: var(--tier); }
.card li:before { color: var(--tier); }
.card-stream .included-stack-value { color: rgba(244,239,231,.82); }
.card-stream .included-stack-value [data-included-stack-price] { color: var(--tier); font: 600 1em ui-monospace,SFMono-Regular,Menlo,monospace; }

/* Pricing rhythm: keep tiers equally tall on desktop, with deliberate space between groups. */
#pricing .cards { gap: 24px; margin-top: clamp(64px, 7vw, 84px); }
#pricing .card { padding: 32px 28px; }
#pricing .card-mode + .price { margin-top: 20px; }
#pricing .card .price + h3 { margin-top: 10px; }
#pricing .card h3 + .price-change { margin-top: 24px; }
#pricing .price-change + ul { margin-top: 24px; }
#pricing .card ul { margin-bottom: 24px; }
.card-date { margin: 18px 0 0; color: var(--tier); font: 600 11px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em; text-transform: uppercase; }
/* Продажи закрыты навсегда, а не «идёт загрузка»: базовый cursor: wait здесь врёт. */
.card-personal .button:disabled { cursor: default; opacity: .7; }
.card-footer { display: grid; gap: 20px; margin-top: auto; }
.card-footer .minor { min-height: 0; margin: 0; }
.card-for { display: grid; gap: 8px; margin: 0; padding: 16px 18px 18px; border-left: 2px solid var(--tier); border-radius: 0 9px 9px 0; background: linear-gradient(90deg, rgba(var(--tier-rgb), .14), rgba(var(--tier-rgb), .035)); }
.card-for strong { color: var(--tier); font: 600 10px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .11em; text-transform: uppercase; }
.card-for span { color: rgba(244,239,231,.72); font-size: 14px; line-height: 1.55; }
@media (max-width: 760px) {
  #pricing .cards { gap: 62px; margin-top: 58px; }
  #pricing .card { padding: 28px 24px; }
  /* В одну колонку главный тариф должен быть первым: и якорь #pricing, и нижний бар ведут сюда */
  #pricing .card-stream { order: -1; }
  #pricing .card-mode + .price { margin-top: 18px; }
  #pricing .card h3 + .price-change { margin-top: 20px; }
  #pricing .price-change + ul { margin-top: 20px; }
  #pricing .card ul { margin-bottom: 20px; }
  /* Пол в 32px = размер h2, ниже заголовок читался мельче подзаголовков.
     Выше нельзя: строка nowrap, на 360px 33px даёт 319 из 320 доступных, 35px — 338.
     Сам пол тоже упирается в ширину: строка ≈9.8× кегля, а поля шелла до 400px по 20px,
     иначе на 320px заголовок вылезает за экран и всю страницу начинает возить вбок. */
  .hero-title { font-size: max(8.6vw, min(32px, (100vw - 40px) / 9.8)); letter-spacing: -.04em; }
  .proof-showcase { grid-template-columns: 1fr; }
  .proof-notes { grid-template-columns: 1fr 1fr; }
  .proof-image-link { aspect-ratio: 16 / 9; }
  .proof-image { object-fit: cover; object-position: left center; }
}

@media (max-width: 540px) {
  .proof-notes { grid-template-columns: 1fr; }
  .proof-notes article { padding: 20px; }
}

/* Landing editorial rhythm: scoped so service and legal routes retain their layout. */
.landing-page > main.shell > section:not(.hero) { padding-block: 88px; }
.program-section .program { grid-template-columns: 1fr; gap: 0; margin-top: 40px; }
.program-section .program article { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 24px; padding-block: 24px; }
.program-section .program article > div { display: grid; grid-template-columns: minmax(180px, 220px) minmax(0, 1fr); gap: 32px; }
.program-section .program h3 { font-size: 20px; }
.program-section .program p { margin: 0; font-size: 16px; }
.fit-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, .8fr); gap: clamp(64px, 8vw, 88px); align-items: start; }
.fit-lead { max-width: 540px; margin-top: 32px; color: rgba(244,239,231,.78); font-size: clamp(22px, 3vw, 32px); line-height: 1.2; letter-spacing: -.025em; }
.fit-list { margin: 0; }
.fit-list > div { display: grid; grid-template-columns: minmax(130px, .8fr) minmax(0, 1.2fr); gap: 24px; padding-block: 22px; border-top: 1px solid var(--line); }
.fit-list > div:last-child { border-bottom: 1px solid var(--line); }
.fit-list dt { color: var(--soft); font: 600 12px/1.35 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing: .08em; text-transform: uppercase; }
.fit-list dd { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.55; }

@media (max-width: 760px) {
  .landing-page > main.shell > section:not(.hero) { padding-block: 64px; }
  .program-section .program { margin-top: 32px; }
  .program-section .program article { gap: 20px; padding-block: 20px; }
  .program-section .program article > div { grid-template-columns: 1fr; gap: 8px; }
  .fit-layout { grid-template-columns: 1fr; gap: 32px; }
  .fit-lead { margin-top: 24px; }
  .fit-list > div { grid-template-columns: 1fr; gap: 8px; padding-block: 20px; }
}

@media (max-width: 360px) {
  .availability-badge { width:calc(100% - 18px); padding-inline:8px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero::before { animation: none; }
  .seo-accent::after { animation: none; transform: scaleX(1); }
  .js-reveal .reveal, .js-reveal .reveal.is-in { opacity: 1; transform: none; transition: none; }
  .button::after, .button:hover::after { animation: none; display: none; }
  .card:hover, .button:hover:not(:disabled), .facts span:hover { transform: none; }
  .proof-image-link:hover .proof-image { transform: none; }
  .availability-segment { transition: none; }
  .mobile-cta, .mobile-cta.is-visible { transition: none; }
  .fact-live::before { animation: none; }
  .faq-item > p { animation: none; }
  .spinner { animation-duration: 1.6s; }
  .upsell .button { transition: none; }
  .skeleton-box::after { animation: none; }
}