/* ================================================================
   Studio layer (ModuleWeb / ModuleLab)
   Подключается ПОСЛЕ base.css. Цвета бренда не меняет, добавляет:
   шрифты, автомасштаб, печать заголовков, курсор, прелоадер,
   переходы между страницами, бегущие ленты, подчёркивания.
   Брендовые переменные в :root — для ModuleLab меняются только они.
   ================================================================ */
:root{
  --s-bg:#080b11;          /* brand-dark */
  --s-card:#101622;        /* brand-card */
  --s-accent:#00f0ff;      /* brand-accent */
  --s-accent-2:#0099ff;    /* второй цвет кнопки btn-neon */
  --s-purple:#7000ff;      /* brand-purple */
  --s-text:#f1f5f9;
  --s-muted:#8e9bb0;
  --s-line:rgba(255,255,255,.08);
  --s-scan:rgba(0,0,0,.58); /* сила «строк развёртки» на заголовках */

  --s-display:'Science Gothic','Arial Black',system-ui,sans-serif;
  --s-body:'Geologica','Manrope','Segoe UI',system-ui,sans-serif;
  --s-mono:'Martian Mono','JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;
  --s-ease:cubic-bezier(.2,.7,0,1);
}

/* ---------- 1. Автомасштаб (ПК): макет 1440 px, 1rem = 16 px на 1440 ---------- */
@media (min-width:1024px){
  html{font-size:max(14.2px,calc(100vw / 90))}
  .max-w-7xl{max-width:90vw!important}
  .text-\[9px\]{font-size:.5625rem}
  .text-\[10px\],.sm\:text-\[10px\]{font-size:.625rem}
  .text-\[11px\]{font-size:.6875rem}
  .rounded-\[10px\]{border-radius:.625rem}
}

/* ---------- 2. Шрифты ---------- */
body,.font-body{font-family:var(--s-body)}
.font-mono{font-family:var(--s-mono);font-stretch:87.5%}
.font-heading{font-family:var(--s-display);font-stretch:112%;letter-spacing:-.005em}
h1.font-heading{font-weight:800;font-stretch:122%;line-height:1.02;letter-spacing:-.015em;text-wrap:balance}
h2.font-heading{font-stretch:118%;line-height:1.06;text-wrap:balance}
h3.font-heading{font-stretch:106%}
#navbar .font-heading{font-stretch:150%}
@media (max-width:639px){
  h1.font-heading{font-stretch:96%}
  h2.font-heading{font-stretch:92%}
  h3.font-heading{font-stretch:100%}
  #navbar .font-heading{font-stretch:125%}
}

/* Строки развёртки на крупных заголовках (сохраняет градиентный текст бренда) */
@media (min-width:768px){h1.font-heading,h2.font-heading.s-scan{-webkit-mask-image:repeating-linear-gradient(180deg,#000 0 .036em,var(--s-scan) .036em .048em);mask-image:repeating-linear-gradient(180deg,#000 0 .036em,var(--s-scan) .036em .048em)}}

/* ---------- 3. Печать заголовка: штриховка-превью -> слои снизу вверх -> горячий верхний слой ---------- */
@property --sp{syntax:'<number>';inherits:true;initial-value:1}
.s-print{position:relative;--sp:1}
.s-print.s-armed{--sp:0}
.s-print.s-armed > .s-pr-main{-webkit-mask-image:linear-gradient(to top,#000 calc(var(--sp) * 100%),transparent calc(var(--sp) * 100%));mask-image:linear-gradient(to top,#000 calc(var(--sp) * 100%),transparent calc(var(--sp) * 100%))}
.s-pr-ghost,.s-pr-heat{position:absolute;inset:0;pointer-events:none;user-select:none;-webkit-user-select:none}
.s-pr-ghost,.s-pr-ghost *{color:transparent!important;-webkit-text-fill-color:transparent!important;background-image:repeating-linear-gradient(45deg,rgba(0,240,255,.5) 0 .016em,transparent .016em .08em),linear-gradient(rgba(255,255,255,.06),rgba(255,255,255,.06))!important;-webkit-background-clip:text!important;background-clip:text!important}
.s-pr-ghost *{background:none!important}
.s-pr-ghost{-webkit-mask-image:linear-gradient(to bottom,#000 calc((1 - var(--sp)) * 100%),transparent calc((1 - var(--sp)) * 100%));mask-image:linear-gradient(to bottom,#000 calc((1 - var(--sp)) * 100%),transparent calc((1 - var(--sp)) * 100%))}
.s-pr-heat,.s-pr-heat *{color:var(--s-accent)!important;-webkit-text-fill-color:var(--s-accent)!important;background:none!important}
.s-pr-heat{opacity:0;filter:drop-shadow(0 0 .12em var(--s-accent));-webkit-mask-image:linear-gradient(to top,transparent calc(var(--sp) * 100%),#000 calc(var(--sp) * 100%),#000 calc(var(--sp) * 100% + .07em),transparent calc(var(--sp) * 100% + .07em));mask-image:linear-gradient(to top,transparent calc(var(--sp) * 100%),#000 calc(var(--sp) * 100%),#000 calc(var(--sp) * 100% + .07em),transparent calc(var(--sp) * 100% + .07em))}
.s-print.s-go{animation:sPrint var(--s-pr-dur,1.4s) steps(28,end) forwards}
.s-print.s-go .s-pr-heat{opacity:1}
.s-print.s-done .s-pr-heat,.s-print.s-done .s-pr-ghost{opacity:0;transition:opacity .5s}
@keyframes sPrint{from{--sp:0}to{--sp:1}}

/* ---------- 4. Подчёркивание «выдавливается» слева направо, впереди бежит курсор-каретка ----------
   Линии рисует studio.js поверх текста, по одной на каждую строку (работает и для переносов). */
.s-mark-host{position:relative}
.s-uline{position:absolute;display:block;height:max(.08em,2px);border-radius:2px;pointer-events:none;background:linear-gradient(90deg,var(--s-accent),var(--s-purple));transform-origin:0 50%;transform:scaleX(0);transition:transform .7s var(--s-ease)}
.s-uline.s-on{transform:scaleX(1)}
.s-uline b{position:absolute;right:0;top:50%;width:max(.09em,3px);height:max(.26em,9px);margin:-.13em -1px 0 0;background:var(--s-accent);box-shadow:0 0 .4em var(--s-accent);opacity:0}
.s-uline.s-last.s-on b{animation:sCaret 1.4s .5s forwards}
@keyframes sCaret{0%{opacity:0}8%{opacity:1}30%{opacity:1}40%{opacity:.2}50%{opacity:1}60%{opacity:.2}70%{opacity:1}100%{opacity:0}}
h1 .s-uline{height:.05em}

/* ---------- 5. Кнопки: скошенные углы, заливка «слоями», текст расширяется ---------- */
.btn-neon,.btn-outline{isolation:isolate;overflow:hidden}
.btn-neon > span,.btn-outline > span{transition:font-stretch .45s var(--s-ease),letter-spacing .45s var(--s-ease)}
.btn-neon:hover > span,.btn-outline:hover > span{letter-spacing:.06em}
.btn-neon::before,.btn-outline::before{content:"";position:absolute;inset:0;z-index:-1;transform:scaleY(0);transform-origin:50% 100%;transition:transform .45s steps(7,end);pointer-events:none}
.btn-neon::before{background:linear-gradient(135deg,#fff 0%,var(--s-accent) 100%)}
.btn-outline::before{background:var(--s-accent)}
.btn-neon:hover::before,.btn-outline:hover::before{transform:scaleY(1)}
.btn-outline:hover{color:#040811!important}
.btn-neon:hover{transform:none}
.s-magnet{transition:transform .6s var(--s-ease),box-shadow .3s ease,color .3s ease,border-color .3s ease,background-color .3s ease!important}
@supports (corner-shape:bevel){
  .btn-neon,.btn-outline{border-radius:.85rem 0 .85rem 0!important;corner-shape:bevel}
  .glass-panel.rounded-3xl,.glass-panel.rounded-2xl{border-top-right-radius:2rem;corner-shape:bevel}
  .glass-panel.rounded-3xl{border-radius:0 2.2rem 0 0}
  .glass-panel.rounded-2xl{border-radius:0 1.4rem 0 0}
}

/* ---------- 6. FAQ: без пустого места под закрытым вопросом ---------- */
.faq-item:not(.faq-open) .faq-answer{padding-top:0;padding-bottom:0;border-top-color:transparent}
.faq-answer{transition:max-height .4s cubic-bezier(.16,1,.3,1),opacity .3s ease,padding .4s cubic-bezier(.16,1,.3,1)}

/* ---------- 7. Шапка: полоса прогресса чтения, прячется при прокрутке вниз ---------- */
#navbar{transition:transform .5s var(--s-ease),background-color .3s,padding .3s}
#navbar.s-hide{transform:translateY(-105%)}
.s-progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;pointer-events:none;background:linear-gradient(90deg,var(--s-accent),var(--s-purple));transform-origin:0 50%;transform:scaleX(var(--s-read,0))}

/* ---------- 8. Линейка в px по низу первого экрана (как в Figma) ---------- */
.s-ruler{position:absolute;left:0;right:0;bottom:0;height:2.2rem;z-index:5;pointer-events:none;font-family:var(--s-mono);font-stretch:87.5%;font-size:.6rem;color:rgba(142,155,176,.7);border-top:1px solid var(--s-line);background-image:linear-gradient(90deg,rgba(255,255,255,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(0,240,255,.35) 1px,transparent 1px);background-size:.625rem .35rem,6.25rem .8rem;background-repeat:repeat-x}
.s-ruler span{position:absolute;top:.95rem;transform:translateX(3px)}
.s-ruler i{position:absolute;top:0;bottom:0;width:1px;background:var(--s-accent);box-shadow:0 0 8px var(--s-accent);opacity:0;transition:opacity .3s}
.s-ruler.s-live i{opacity:1}
@media (max-width:1023px){.s-ruler{display:none}}

/* ---------- 9. Бегущие ленты ---------- */
.s-marquee{overflow:hidden;width:100%}
.s-track{display:flex;width:max-content;will-change:transform}
.s-reel{position:relative;padding:3.5rem 0 5rem;border-top:1px solid var(--s-line);overflow:hidden}
.s-reel .s-track{gap:1.5rem;padding-right:1.5rem}
.s-shot{flex:none;width:30rem;display:block;text-decoration:none;color:inherit}
.s-frame{display:block;background:var(--s-card);border:1px solid rgba(255,255,255,.08);border-radius:.9rem;overflow:hidden;transition:border-color .4s,transform .7s var(--s-ease),box-shadow .4s}
.s-frame-bar{display:flex;align-items:center;gap:.35rem;height:1.6rem;padding:0 .7rem;border-bottom:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.02)}
.s-frame-bar i{width:.45rem;height:.45rem;border-radius:50%;background:rgba(255,255,255,.18)}
.s-frame-bar i:first-child{background:var(--s-accent)}
.s-frame-bar b{margin-left:.6rem;height:.5rem;flex:1;max-width:12rem;border-radius:.3rem;background:rgba(255,255,255,.06)}
.s-frame img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;object-position:top}
.s-shot:hover .s-frame{border-color:rgba(0,240,255,.45);transform:translateY(-.3rem);box-shadow:0 1rem 2.5rem -1rem rgba(0,240,255,.35)}
.s-shot figcaption,.s-shot .s-cap{display:block;margin-top:.8rem;font-family:var(--s-display);font-stretch:112%;font-weight:700;font-size:.95rem;color:#e2e8f0;line-height:1.25}
.s-shot .s-cap small{display:block;margin-top:.25rem;font-family:var(--s-mono);font-stretch:87.5%;font-weight:400;font-size:.65rem;color:var(--s-muted)}
.s-ticker{position:relative;border-block:1px solid var(--s-line);padding:2.2rem 0;overflow:hidden;background:linear-gradient(90deg,rgba(0,240,255,.03),rgba(112,0,255,.05))}
.s-ticker .s-track{gap:4rem;padding-right:4rem;align-items:center}
.s-ticker .s-track > span{font-family:var(--s-display);font-weight:800;font-stretch:200%;font-size:7.5rem;line-height:1;white-space:nowrap;color:transparent;-webkit-background-clip:text;background-clip:text}
.s-ticker .s-track > span:nth-child(odd){background-image:repeating-linear-gradient(180deg,#f1f5f9 0 .036em,#5b6a86 .036em .048em)}
.s-ticker .s-track > span:nth-child(even){background-image:repeating-linear-gradient(45deg,var(--s-accent) 0 .018em,transparent .018em .07em),linear-gradient(rgba(0,240,255,.07),rgba(0,240,255,.07))}
.s-ticker .s-track > i{flex:none;width:1.1rem;height:1.1rem;background:var(--s-accent);box-shadow:0 0 1rem var(--s-accent);transform:rotate(45deg)}
@media (max-width:767px){
  .s-shot{width:17rem}
  .s-reel{padding:2rem 0 3rem}
  .s-ticker .s-track > span{font-size:3.4rem}
  .s-ticker .s-track{gap:2rem;padding-right:2rem}
}

/* ---------- 10. Огромный логотип в подвале: растягивается при прокрутке ---------- */
.s-foot-word{display:block;text-align:center;white-space:nowrap;overflow:hidden;font-family:var(--s-display);font-weight:800;line-height:.82;letter-spacing:-.01em;font-stretch:var(--s-fw,200%);padding:2rem 0 3rem;user-select:none;-webkit-mask-image:repeating-linear-gradient(180deg,#000 0 .036em,var(--s-scan) .036em .048em);mask-image:repeating-linear-gradient(180deg,#000 0 .036em,var(--s-scan) .036em .048em)}
.s-foot-word b{color:#f1f5f9;font-weight:inherit}
.s-foot-word em{font-style:normal;color:var(--s-accent)}

/* ---------- 11. Прокрутка шагов процесса (главная) ---------- */
.s-line-fill{position:absolute;inset:0;background:linear-gradient(90deg,#fff,var(--s-accent));transform-origin:0 50%;transform:scaleX(var(--s-tp,0));box-shadow:0 0 12px var(--s-accent)}
.s-line-head{position:absolute;top:50%;left:calc(var(--s-tp,0) * 100%);width:.7rem;height:.7rem;margin:-.35rem 0 0 -.35rem;border-radius:50%;background:#fff;box-shadow:0 0 0 .25rem rgba(0,240,255,.3),0 0 1.2rem .3rem rgba(0,240,255,.6)}

/* ---------- 12. Курсор ---------- */
.s-cursor,.s-trail{display:none}
html.s-has-cursor,html.s-has-cursor *{cursor:none!important}
html.s-has-cursor input[type="text"],html.s-has-cursor input[type="url"],html.s-has-cursor input[type="email"],html.s-has-cursor input[type="tel"],html.s-has-cursor input[type="password"],html.s-has-cursor textarea{cursor:text!important}
html.s-has-cursor .s-cursor{display:block;position:fixed;left:0;top:0;z-index:2147483000;pointer-events:none}
html.s-has-cursor .s-trail{display:block;position:fixed;inset:0;width:100vw;height:100vh;z-index:2147482999;pointer-events:none}
.s-cur-dot{position:fixed;left:0;top:0;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:var(--s-accent);box-shadow:0 0 10px 2px rgba(0,240,255,.6);will-change:transform}
.s-cur-ring{position:fixed;left:0;top:0;width:38px;height:38px;margin:-19px 0 0 -19px;border-radius:50%;box-shadow:inset 0 0 0 1.5px rgba(241,245,249,.8);transition:width .35s var(--s-ease),height .35s var(--s-ease),margin .35s var(--s-ease),background-color .3s,box-shadow .3s,opacity .3s;will-change:transform}
.s-cur-label{position:fixed;left:0;top:0;display:flex;flex-direction:column;align-items:flex-start;gap:2px;font-family:var(--s-mono);font-stretch:87.5%;font-size:10px;letter-spacing:.02em;color:rgba(241,245,249,.75);white-space:nowrap;will-change:transform;transition:opacity .25s}
.s-cur-xy{font-variant-numeric:tabular-nums}
.s-cur-text{font-family:var(--s-display);font-stretch:118%;font-weight:700;font-size:11px;color:#040811;opacity:0;transition:opacity .2s}
.s-cursor.s-link .s-cur-ring{width:56px;height:56px;margin:-28px 0 0 -28px;box-shadow:inset 0 0 0 1.5px var(--s-accent)}
.s-cursor.s-act .s-cur-ring{width:92px;height:92px;margin:-46px 0 0 -46px;background:var(--s-accent);box-shadow:0 0 30px rgba(0,240,255,.45)}
.s-cursor.s-view .s-cur-ring{width:104px;height:104px;margin:-52px 0 0 -52px;background:#f1f5f9;box-shadow:none}
.s-cursor.s-act .s-cur-dot,.s-cursor.s-view .s-cur-dot,.s-cursor.s-act .s-cur-xy,.s-cursor.s-view .s-cur-xy{opacity:0}
.s-cursor.s-act .s-cur-text,.s-cursor.s-view .s-cur-text{opacity:1}
.s-cursor.s-act .s-cur-label,.s-cursor.s-view .s-cur-label{align-items:center}
.s-cursor.s-text .s-cur-ring,.s-cursor.s-text .s-cur-label{opacity:0}
.s-cursor.s-down .s-cur-ring{width:26px;height:26px;margin:-13px 0 0 -13px}
.s-cursor.s-off{opacity:0}

/* ---------- 13. Прелоадер (один раз за сессию) и переходы между страницами ---------- */
html.s-intro::after,html.s-enter::after{content:"";position:fixed;inset:0;z-index:2147483600;background:var(--s-bg);animation:sCoverFail 0s 4.5s forwards}
@keyframes sCoverFail{to{visibility:hidden;opacity:0}}
.s-loader{position:fixed;inset:0;z-index:2147483640;display:grid;place-items:center;background:var(--s-bg);color:var(--s-text);clip-path:inset(0 0 0 0);transition:clip-path 1s cubic-bezier(.7,0,.2,1)}
.s-loader.s-out{clip-path:inset(0 0 100% 0)}
.s-ld-grid{position:absolute;inset:0;background-image:linear-gradient(to right,rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(to bottom,rgba(255,255,255,.035) 1px,transparent 1px),radial-gradient(60rem 30rem at 50% 50%,rgba(0,240,255,.08),transparent 70%),radial-gradient(40rem 25rem at 80% 90%,rgba(112,0,255,.14),transparent 70%);background-size:40px 40px,40px 40px,auto,auto}
.s-ld-center{position:relative;display:flex;flex-direction:column;align-items:center;gap:2.4rem;transition:transform 1s cubic-bezier(.7,0,.2,1),opacity .6s}
.s-loader.s-out .s-ld-center{transform:translateY(-8rem);opacity:0}
.s-ld-word{position:relative;font-family:var(--s-display);font-weight:800;font-stretch:175%;font-size:clamp(2rem,7.2vw,9rem);line-height:1;letter-spacing:-.01em;--lp:0;--lx:0;white-space:nowrap}
.s-ld-word > span{display:block}
.s-ld-word em{font-style:normal}
.s-ld-ghost{color:transparent;background-image:repeating-linear-gradient(45deg,rgba(0,240,255,.4) 0 .012em,transparent .012em .06em);-webkit-background-clip:text;background-clip:text}
.s-ld-fill,.s-ld-heat{position:absolute;inset:0}
.s-ld-fill{color:#f1f5f9;-webkit-mask-image:linear-gradient(to top,#000 calc(var(--lp) * 100%),transparent calc(var(--lp) * 100%)),repeating-linear-gradient(180deg,#000 0 .036em,rgba(0,0,0,.5) .036em .048em);-webkit-mask-composite:source-in;mask-image:linear-gradient(to top,#000 calc(var(--lp) * 100%),transparent calc(var(--lp) * 100%)),repeating-linear-gradient(180deg,#000 0 .036em,rgba(0,0,0,.5) .036em .048em);mask-composite:intersect}
.s-ld-fill em{color:var(--s-accent)}
.s-ld-heat{color:var(--s-accent);filter:drop-shadow(0 0 .08em var(--s-accent));-webkit-mask-image:linear-gradient(to top,transparent calc(var(--lp) * 100%),#000 calc(var(--lp) * 100%),#000 calc(var(--lp) * 100% + .05em),transparent calc(var(--lp) * 100% + .05em));mask-image:linear-gradient(to top,transparent calc(var(--lp) * 100%),#000 calc(var(--lp) * 100%),#000 calc(var(--lp) * 100% + .05em),transparent calc(var(--lp) * 100% + .05em))}
.s-ld-caret{position:absolute;left:calc(var(--lx) * 100%);bottom:calc(var(--lp) * 100%);width:.06em;height:.22em;margin-left:-.03em;background:var(--s-accent);box-shadow:0 0 .2em var(--s-accent)}
.s-loader.s-cool .s-ld-heat,.s-loader.s-cool .s-ld-caret{opacity:0;transition:opacity .4s}
.s-ld-meta{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem 2rem;font-family:var(--s-mono);font-stretch:87.5%;font-size:.8rem;color:var(--s-muted)}
.s-ld-meta b{color:#f1f5f9;font-weight:500;font-variant-numeric:tabular-nums}
.s-ld-pct{position:absolute;right:5vw;bottom:2.4rem;font-family:var(--s-display);font-weight:200;font-stretch:200%;font-size:clamp(3rem,6vw,6rem);line-height:1;font-variant-numeric:tabular-nums}
.s-ld-pct::after{content:"%";font-size:.4em;margin-left:.15em;vertical-align:top;color:var(--s-accent)}
.s-ld-log{position:absolute;left:5vw;bottom:2.4rem;margin:0;font-family:var(--s-mono);font-stretch:87.5%;font-size:.72rem;line-height:1.85;color:rgba(142,155,176,.75);white-space:pre}
.s-ld-log b{color:var(--s-accent);font-weight:400}
.s-ld-bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.06)}
.s-ld-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--s-accent),var(--s-purple));box-shadow:0 0 12px var(--s-accent)}
@media (max-width:767px){.s-ld-log{display:none}.s-ld-pct{right:1rem;bottom:1.4rem}}
.s-cover{position:fixed;inset:0;z-index:2147483620;pointer-events:none;background:var(--s-bg);clip-path:inset(100% 0 0 0);transition:clip-path .55s cubic-bezier(.7,0,.2,1)}
.s-cover::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,var(--s-accent),var(--s-purple));box-shadow:0 0 16px var(--s-accent)}
.s-cover.s-in{clip-path:inset(0 0 0 0)}
.s-cover.s-leave{clip-path:inset(0 0 100% 0)}
.s-cover.s-instant{transition:none}

/* ---------- 14. Наклон картинок первого экрана ---------- */
.s-tilt{transition:transform .8s var(--s-ease);transform-style:preserve-3d;will-change:transform}

/* ---------- 15. Без анимаций по просьбе системы ---------- */
@media (prefers-reduced-motion:reduce){
  html.s-intro::after,html.s-enter::after{display:none}
  .s-print.s-armed{--sp:1}
  .s-uline{transform:scaleX(1);transition:none}
  .s-print .s-pr-ghost,.s-print .s-pr-heat{display:none}
  .btn-neon::before,.btn-outline::before{transition:none}
}