/* Самохостинг: Google Fonts CDN нестабилен для аудитории в РФ (ТЗ §15).
   Пути абсолютные от корня — frontend/web/ и есть document root, так что
   это надёжнее относительных путей, которые иначе считались бы от
   опубликованной директории ассетов (web/assets/<hash>/css/), а не от web/. */
@font-face{
  font-family:"Cormorant Garamond";font-style:normal;font-weight:300;font-display:swap;
  src:url("/fonts/cormorant-garamond-300.woff2") format("woff2");
}
@font-face{
  font-family:"Cormorant Garamond";font-style:normal;font-weight:400;font-display:swap;
  src:url("/fonts/cormorant-garamond-400.woff2") format("woff2");
}
@font-face{
  font-family:"Cormorant Garamond";font-style:normal;font-weight:500;font-display:swap;
  src:url("/fonts/cormorant-garamond-500.woff2") format("woff2");
}
@font-face{
  font-family:"Cormorant Garamond";font-style:italic;font-weight:300;font-display:swap;
  src:url("/fonts/cormorant-garamond-300-italic.woff2") format("woff2");
}
@font-face{
  font-family:"Manrope";font-style:normal;font-weight:300;font-display:swap;
  src:url("/fonts/manrope-300.woff2") format("woff2");
}
@font-face{
  font-family:"Manrope";font-style:normal;font-weight:400;font-display:swap;
  src:url("/fonts/manrope-400.woff2") format("woff2");
}
@font-face{
  font-family:"Manrope";font-style:normal;font-weight:500;font-display:swap;
  src:url("/fonts/manrope-500.woff2") format("woff2");
}
@font-face{
  font-family:"Manrope";font-style:normal;font-weight:600;font-display:swap;
  src:url("/fonts/manrope-600.woff2") format("woff2");
}
@font-face{
  font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;
  src:url("/fonts/ibm-plex-mono-400.woff2") format("woff2");
}
@font-face{
  font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;
  src:url("/fonts/ibm-plex-mono-500.woff2") format("woff2");
}

:root{
  --void:#060912;
  --deep:#0C1120;
  --raise:#131A2E;
  --edge:#1E2740;
  --text:#C4CEE2;
  --soft:#9AA5BE;
  --dim:#6B7690;
  --star:#EDF1F8;
  --gold:#F0C674;
  --gold-d:#C79A3E;
  --father:#6E8FC7;
  --mother:#C77E9A;
  --disp:"Cormorant Garamond",Georgia,serif;
  --body:"Manrope",-apple-system,system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  background:var(--void);color:var(--text);
  font-family:var(--body);font-weight:300;line-height:1.62;
  -webkit-font-smoothing:antialiased;
}

/* ── атмосфера: мерцающие звёзды + медленное сияние на весь сайт ──
   Только псевдоэлементы на body — ни одной новой DOM-ноды, ни байта JS.
   position:fixed + pointer-events:none: физически не может перекрыть клик
   или потребовать перерасчёта layout остального контента. Анимируются
   только opacity/transform (композитные свойства — дёшево на любом
   устройстве, не трогают layout/paint остальной страницы). */
body::before,
body::after{
  content:"";position:fixed;inset:-10% -10%;z-index:0;pointer-events:none;
}
body::before{
  /* Важно: background-size здесь — размер ОДНОЙ плитки с этими 10 точками,
     а не «растянуть на весь экран» (100% 100% растягивало саму крошечную
     звезду 1.4px на весь вьюпорт — получалось смазанное пятно, а не точка).
     background-repeat замащивает эту плитку по всей странице. */
  background-image:
    radial-gradient(1.8px 1.8px at 8% 14%, #fff, transparent 65%),
    radial-gradient(1.3px 1.3px at 22% 63%, #fff, transparent 65%),
    radial-gradient(2px 2px at 37% 28%, #fff, transparent 65%),
    radial-gradient(1.3px 1.3px at 51% 82%, #fff, transparent 65%),
    radial-gradient(1.6px 1.6px at 66% 12%, #fff, transparent 65%),
    radial-gradient(1.3px 1.3px at 78% 55%, #fff, transparent 65%),
    radial-gradient(1.9px 1.9px at 89% 38%, #fff, transparent 65%),
    radial-gradient(1.3px 1.3px at 14% 91%, #fff, transparent 65%),
    radial-gradient(1.7px 1.7px at 46% 47%, #fff, transparent 65%),
    radial-gradient(1.3px 1.3px at 94% 78%, #fff, transparent 65%);
  background-repeat:repeat;
  background-size:380px 380px;
  opacity:.55;
  animation:atmo-twinkle 3s ease-in-out infinite alternate;
}
body::after{
  background:
    radial-gradient(circle at 22% 28%, rgba(240,198,116,.11), transparent 42%),
    radial-gradient(circle at 78% 20%, rgba(110,143,199,.12), transparent 40%),
    radial-gradient(circle at 55% 82%, rgba(199,126,154,.10), transparent 45%);
  animation:atmo-drift 50s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes atmo-twinkle{0%{opacity:.2}100%{opacity:.76}}
@keyframes atmo-drift{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(-3%,2%,0) scale(1.05)}}
@media(prefers-reduced-motion:reduce){
  body::before,body::after{animation:none}
  body::before{opacity:.45}
}
/* На узких экранах сияние может выйти за safe area при повороте — не критично
   (position:fixed + overflow остаётся скрыт корнем документа), но подрежем
   амплитуду дрейфа, чтобы не создавать на мобильном лишней перерисовки. */
@media(max-width:520px){
  @keyframes atmo-drift{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(-1.5%,1%,0) scale(1.03)}}
}

.wrap{max-width:660px;margin:0 auto;padding:0 20px;position:relative;z-index:1}
section{padding:60px 0;border-top:1px solid var(--edge)}
section:first-of-type{border-top:0}

h1{font-family:var(--disp);font-weight:300;font-size:clamp(34px,6.2vw,50px);
  line-height:1.1;letter-spacing:-.01em;color:var(--star);margin-bottom:18px}
/* Лёгкий статичный градиент на заголовке — белый плавно переходит в золото.
   color:var(--star) выше — фолбэк для браузеров без background-clip:text,
   @supports не даёт им остаться с невидимым (color:transparent) текстом. */
@supports (background-clip:text) or (-webkit-background-clip:text){
  h1{
    background-image:linear-gradient(120deg, var(--star) 25%, var(--gold) 82%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
}
h2{font-family:var(--disp);font-weight:400;font-size:clamp(25px,4.4vw,32px);
  line-height:1.2;color:var(--star);margin-bottom:16px}
h3{font-family:var(--body);font-weight:500;font-size:15px;color:var(--text);margin-bottom:8px}
p{margin-bottom:14px;color:var(--soft)}
.lede{font-size:17px;color:var(--text);line-height:1.55}
.kick{font-family:var(--mono);font-size:10px;letter-spacing:.17em;
  text-transform:uppercase;color:var(--dim);margin-bottom:16px}
em{font-style:italic;color:#B9C6E0}
strong{font-weight:500;color:var(--star)}

/* ── controls ── */
.field{width:100%;background:var(--deep);border:1px solid var(--edge);border-radius:2px;
  color:var(--star);font-family:var(--mono);font-size:17px;padding:16px 18px;margin-bottom:12px}
.field:focus{outline:2px solid var(--father);outline-offset:1px;border-color:transparent}
.btn{display:block;width:100%;background:var(--star);color:var(--void);border:0;border-radius:2px;
  font-family:var(--body);font-weight:600;font-size:15px;padding:17px 24px;cursor:pointer;
  transition:opacity .15s;text-align:center;text-decoration:none}
.btn:hover{opacity:.85}
.btn:disabled{opacity:.3;cursor:not-allowed}
.btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.btn-gold{background:var(--gold);color:#1A1204;font-weight:600}
.btn-ghost{background:transparent;color:var(--text);border:1px solid var(--edge);font-weight:400}
.btn-ghost:hover{border-color:var(--soft);opacity:1}
.hint{font-family:var(--mono);font-size:10.5px;color:var(--dim);letter-spacing:.03em;
  margin-top:12px;text-align:center}

/* ── плашка «показать сохранённый результат» ── */
.restore-banner{margin-top:22px}
.restore-link{display:block;width:100%;text-align:left;background:var(--deep);
  border:1px solid var(--edge);border-radius:2px;color:var(--text);
  font-family:var(--body);font-weight:400;font-size:14px;padding:14px 18px;
  cursor:pointer;transition:border-color .15s,background .15s}
.restore-link:hover{border-color:var(--gold-d);background:rgba(240,198,116,.05)}
.restore-link:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
.restore-loading{font-family:var(--mono);font-size:11px;color:var(--dim);letter-spacing:.03em}

/* ── попап «email для чека» перед оплатой ── */
.modal-overlay{position:fixed;inset:0;z-index:100;display:none;
  align-items:center;justify-content:center;padding:20px;
  background:rgba(6,9,18,.72);backdrop-filter:blur(2px)}
.modal-overlay.is-open{display:flex}
.modal-card{width:100%;max-width:420px;background:var(--raise);
  border:1px solid var(--edge);border-radius:3px;padding:24px}
.modal-card h3{font-family:var(--disp);font-size:20px;font-weight:400;
  color:var(--star);margin-bottom:8px}
.modal-error{font-family:var(--mono);font-size:11px;color:#D66;
  min-height:14px;margin:6px 0 10px}

/* ── созвездие ── */
.sky{margin:6px 0 4px;animation:sky-in .35s ease both}
.sky svg{display:block;width:100%;height:auto;overflow:visible}
.c-field circle{fill:#8C97B0}

/* сплошные линии квадратов «рисуются» через stroke-dashoffset — надёжный,
   стандартный приём, не трогает сам путь. Пунктирные (.c-lead) на этом же
   атрибуте держат узор «1 4» для точечной линии — анимировать dashoffset
   поверх него нельзя, испортит пунктир, поэтому у них просто fade-in. */
.c-line{stroke:#232E4A;stroke-width:.7;fill:none;
  stroke-dasharray:1000;stroke-dashoffset:1000;animation:draw-line .6s ease-out .05s both}
.c-lead{stroke-width:1;fill:none;opacity:0;stroke-dasharray:1 4;stroke-linecap:round;
  animation:lead-in .3s ease .5s both}
.c-node{transform-box:fill-box;transform-origin:center;
  animation:star-in .4s cubic-bezier(.34,1.56,.64,1) both}
.c-halo{fill:#E8EDF5;opacity:.09}
.c-star{fill:#EDF1F8}
.c-num{font-family:var(--mono);font-size:10px;fill:#AEBAD2;letter-spacing:.05em}
.c-key{font-family:var(--mono);font-size:7px;fill:#4A5674;letter-spacing:.12em}
.c-core-halo{fill:#F0C674;opacity:.14}
.c-core{fill:#F0C674}
.c-core-num{font-family:var(--mono);font-size:12px;fill:#F0C674;font-weight:500}
.c-leg{font-family:var(--mono);font-size:7.5px;letter-spacing:.08em}

@keyframes sky-in{from{opacity:0}to{opacity:1}}
@keyframes draw-line{to{stroke-dashoffset:0}}
@keyframes lead-in{to{opacity:.6}}
@keyframes star-in{from{opacity:0;transform:scale(.25)}to{opacity:1;transform:scale(1)}}

/* подсказка «листайте дальше» — зафиксирована внизу экрана, видна на первом
   экране независимо от высоты картинки матрицы. Внешний слой только центрирует
   (position:fixed), внутренний качается — иначе два transform-анимации на
   одном элементе конфликтовали бы. Скрывается по скроллу через JS (bind()). */
.scroll-hint-wrap{position:fixed;left:0;right:0;bottom:22px;display:flex;
  justify-content:center;z-index:20;pointer-events:none;
  opacity:0;transition:opacity .3s ease .2s}
.scroll-hint-wrap.is-visible{opacity:1}
.scroll-hint{display:flex;align-items:center;gap:7px;pointer-events:auto;cursor:pointer;
  background:rgba(19,26,46,.92);border:1px solid var(--edge);border-radius:999px;
  padding:9px 18px 9px 20px;color:var(--text);font-family:var(--mono);font-size:11px;
  letter-spacing:.04em;box-shadow:0 6px 24px rgba(0,0,0,.4);
  animation:scroll-hint-bounce 1.6s ease-in-out 1s infinite}
.scroll-hint svg{flex:none;color:var(--gold-d)}
@keyframes scroll-hint-bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}

/* ── details ── */
details{border:1px solid var(--edge);border-radius:2px;margin:20px 0}
summary{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--dim);padding:14px 16px;cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;align-items:center}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-size:15px;color:var(--dim)}
details[open] summary::after{content:"−"}
summary:hover{color:var(--text)}
.calc{font-family:var(--mono);font-size:11px;line-height:1.95;color:var(--dim);
  padding:4px 16px 16px;border-top:1px solid var(--edge)}
.calc .cg{color:#3E4860;font-size:9px;letter-spacing:.15em;text-transform:uppercase;margin:12px 0 3px}
.calc .cg:first-child{margin-top:0}
.calc .ck{display:inline-block;min-width:98px;color:#5B6580}
.calc b{color:var(--gold);font-weight:500}
.calc s{color:#4A6B8C;text-decoration:none}

/* ── CTA-плашка теста ── */
.pitch{background:linear-gradient(180deg,#161E36 0%,#101728 100%);
  border:1px solid #2A3A5E;border-radius:3px;padding:26px;margin-top:26px}
.pitch h3{font-family:var(--disp);font-size:23px;font-weight:400;color:var(--star);
  line-height:1.25;margin-bottom:12px}
.pitch p{font-size:14.5px;color:var(--soft);margin-bottom:18px}
.pitch ul{list-style:none;margin:0 0 20px}
.pitch li{font-size:14px;color:var(--soft);padding:0 0 7px 18px;position:relative;line-height:1.5}
.pitch li::before{content:"—";position:absolute;left:0;color:var(--gold-d)}

/* ── шаги ── */
.steps{counter-reset:s}
.step{display:grid;grid-template-columns:34px 1fr;gap:16px;padding:18px 0;
  border-bottom:1px solid var(--edge)}
.step:last-child{border-bottom:0}
.step-n{font-family:var(--disp);font-size:26px;color:var(--gold-d);line-height:1}
.step p{margin:0;font-size:14px}

/* ── цены ── */
.tier{display:grid;grid-template-columns:104px 1fr;gap:18px;padding:22px 0;
  border-bottom:1px solid var(--edge)}
.tier:first-of-type{border-top:1px solid var(--edge)}
.tier .p{font-family:var(--mono);font-size:13px;color:var(--dim);letter-spacing:.04em;padding-top:3px}
.tier.paid .p{color:var(--gold);font-weight:500;font-size:15px}
.tier .w{font-size:14.5px;color:var(--soft)}
.tier .w b{color:var(--star);font-weight:500}
.tier ul{list-style:none;margin:9px 0 0}
.tier li{font-size:13.5px;color:var(--dim);padding:0 0 6px 15px;position:relative;line-height:1.55}
.tier li::before{content:"—";position:absolute;left:0;color:var(--edge)}
.nope{font-family:var(--mono);font-size:10.5px;line-height:1.75;color:var(--dim);padding-top:18px}
.nope b{color:var(--soft);font-weight:400}

/* ── опросник ── */
.prog{display:flex;align-items:center;gap:13px;margin-bottom:30px}
.prog .bar{flex:1;height:1px;background:var(--edge);position:relative}
.prog .bar i{position:absolute;left:0;top:0;height:1px;background:var(--gold);
  transition:width .35s ease}
.prog span{font-family:var(--mono);font-size:10px;color:var(--dim);letter-spacing:.1em}
.q{font-family:var(--disp);font-style:italic;font-weight:300;
  font-size:clamp(23px,4.2vw,30px);line-height:1.32;color:var(--star)}
.opts{display:flex;flex-direction:column;gap:8px;margin-top:26px}
.opt{text-align:left;background:transparent;border:1px solid var(--edge);border-radius:2px;
  color:var(--text);font-family:var(--body);font-weight:300;font-size:15px;
  padding:15px 18px;cursor:pointer;transition:border-color .15s,background .15s}
.opt:hover{border-color:var(--gold-d);background:rgba(240,198,116,.05)}
.opt:focus-visible{outline:2px solid var(--gold);outline-offset:1px}

/* ── разбор ── */
.report h3{font-family:var(--disp);font-size:22px;font-weight:400;color:var(--star);
  margin:26px 0 10px}
.report h3:first-child{margin-top:0}
.report p{font-size:15px;line-height:1.65}
.fade{position:relative;max-height:190px;overflow:hidden}
.fade::after{content:"";position:absolute;left:0;right:0;bottom:0;height:130px;
  background:linear-gradient(180deg,rgba(6,9,18,0) 0%,var(--void) 88%)}
.paywall{border:1px solid var(--edge);border-radius:3px;padding:24px;margin-top:20px;
  background:var(--deep)}
.paywall .price{font-family:var(--disp);font-size:38px;color:var(--gold);line-height:1;
  margin-bottom:4px}
.paywall .price small{font-family:var(--mono);font-size:11px;color:var(--dim);
  letter-spacing:.06em;display:block;margin-top:7px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}
@media(max-width:520px){.two{grid-template-columns:1fr}
  .tier{grid-template-columns:1fr;gap:6px}}

/* ── пример ── */
.sample{border:1px solid var(--edge);border-radius:3px;background:var(--deep);
  padding:26px;margin-top:6px}
.sample .tag{font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-d);margin-bottom:14px}
.sample h3{font-family:var(--disp);font-size:19px;font-weight:400;color:var(--star);
  margin:20px 0 7px}
.sample h3:first-of-type{margin-top:0}
.sample p{font-size:14px;line-height:1.6;margin-bottom:10px}
.sample .meta{font-family:var(--mono);font-size:10px;color:var(--dim);
  border-top:1px solid var(--edge);padding-top:12px;margin-top:16px;letter-spacing:.04em}

/* ── основание ── */
.found p{font-size:14px}
.cite{display:block;font-family:var(--mono);font-size:10.5px;line-height:1.6;
  color:var(--father);text-decoration:none;border-left:2px solid var(--edge);
  padding:2px 0 2px 13px;margin-bottom:18px}
.cite:hover{border-color:var(--father)}
.cite span{display:block;color:var(--dim);margin-top:3px}
.notclaim{background:var(--deep);border:1px solid var(--edge);border-radius:2px;padding:18px 20px}
.notclaim ul{list-style:none;margin:0}
.notclaim li{font-size:13px;line-height:1.55;color:var(--dim);padding:0 0 9px 15px;position:relative}
.notclaim li::before{content:"×";position:absolute;left:0;color:#3E4860}
.notclaim li b{color:var(--soft);font-weight:500}

footer{border-top:1px solid var(--edge);padding:30px 0 50px;
  font-family:var(--mono);font-size:10px;line-height:1.8;color:var(--dim);letter-spacing:.03em}

footer a {color:var(--dim);letter-spacing:.03em}


.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}
  .c-line,.c-lead{stroke-dashoffset:0;opacity:.6}
  .c-node{opacity:1;transform:none}
  .sky{opacity:1}}