/* /css2 */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(365f10199f77.ttf) format('truetype');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(60be1da091f0.ttf) format('truetype');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(901f60ede4ab.ttf) format('truetype');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(52471778b387.ttf) format('truetype');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(4612514967e0.ttf) format('truetype');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(91fef777a53b.ttf) format('truetype');
}
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(5ece5056b43d.ttf) format('truetype');
}
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(8f94761d4056.ttf) format('truetype');
}
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(dcb8313894b8.ttf) format('truetype');
}


    .sc-placeholder{background:color-mix(in srgb,currentColor 8%,transparent);
      border:1px solid color-mix(in srgb,currentColor 50%,transparent);
      border-radius:2px;box-sizing:border-box;overflow:hidden}
    @keyframes sc-shine{0%{background-position:100% 50%}100%{background-position:0% 50%}}
    html.sc-dc-streaming .sc-placeholder,
    html.sc-dc-streaming .sc-interp.sc-missing{position:relative;
      background:color-mix(in srgb,currentColor 5%,transparent);
      border-color:transparent}
    html.sc-dc-streaming .sc-placeholder::before,
    html.sc-dc-streaming .sc-interp.sc-missing::before{content:'';
      position:absolute;inset:0;pointer-events:none;
      background:linear-gradient(90deg,rgba(217,119,87,0) 25%,rgba(247,225,211,.95) 37%,rgba(217,119,87,0) 63%);
      background-size:400% 100%;animation:sc-shine 1.4s ease infinite}
    html.sc-dc-streaming .sc-placeholder:nth-child(n+9 of .sc-placeholder)::before,
    html.sc-dc-streaming .sc-interp.sc-missing:nth-child(n+9 of .sc-interp.sc-missing)::before{animation:none;
      background:color-mix(in srgb,currentColor 8%,transparent)}
    .sc-placeholder-error{padding:4px 8px;font:11px/1.4 ui-monospace,monospace;
      color:color-mix(in srgb,currentColor 70%,transparent);word-break:break-word}
    .sc-interp.sc-missing{display:inline-block;width:2em;height:1em;overflow:hidden;
      vertical-align:text-bottom;background:rgba(255,255,255,.3);border:1px solid rgba(0,0,0,.5);
      border-radius:2px;box-sizing:border-box;color:transparent;
      user-select:none}
    .sc-interp.sc-unresolved{font-family:ui-monospace,monospace;font-size:.85em;
      color:color-mix(in srgb,currentColor 50%,transparent);
      background:color-mix(in srgb,currentColor 10%,transparent);border-radius:3px;
      padding:0 3px}
    .sc-host.sc-has-error{position:relative}
    .sc-logic-error{position:absolute;top:8px;left:8px;z-index:2147483647;max-width:60ch;
      padding:6px 10px;background:#b00020;color:#fff;font:12px/1.4 ui-monospace,monospace;
      border-radius:4px;white-space:pre-wrap;pointer-events:none}
    /* Mirrors PRINT_BASELINE_CSS in apps/web deck-stage-export.ts — keep both
       in sync until dc-runtime regains a build step. */
    @media print {
      @page { margin: 0.5cm; }
      figure, table { break-inside: avoid; }
      #dc-root, #dc-root > .sc-host { height: auto; }
      *, *::before, *::after {
        print-color-adjust: exact; -webkit-print-color-adjust: exact;
        backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
        animation-delay: -99s !important; animation-duration: .001s !important;
        animation-iteration-count: 1 !important; animation-fill-mode: both !important;
        animation-play-state: running !important; transition-duration: 0s !important;
      }
    }
  
x-dc{display:none!important}

body{margin:0;background:#0B0F1A;color:#F2F0EA;font-family:'Manrope',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:#F5C518}a:hover{color:#FFE27A}
*{box-sizing:border-box}
::selection{background:#F5C518;color:#0B0F1A}
@property --ang{syntax:'<angle>';inherits:false;initial-value:0deg}

.wrap{width:100%;max-width:1280px;margin:0 auto;padding:0 48px}
.disp{font-family:'Unbounded',sans-serif;letter-spacing:-0.02em}
.mono{font-family:'JetBrains Mono',monospace;letter-spacing:.08em;text-transform:uppercase}

.g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.g4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.g6{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.step{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:64px;align-items:center}
.step.rev>.step-media{order:-1}

/* hero */
.h-word{display:inline-block;opacity:0;transform:translateY(60px) rotate(2deg);filter:blur(10px);animation:hw 1.2s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes hw{to{opacity:1;transform:none;filter:none}}
.fade-up{opacity:0;transform:translateY(24px);animation:hw 1s cubic-bezier(.2,.8,.2,1) forwards}
.lamp{position:absolute;border-radius:50%;pointer-events:none;background:radial-gradient(closest-side,rgba(242,193,78,.28),rgba(242,193,78,0));animation:breathe 7s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.65;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}}
.rec{width:10px;height:10px;border-radius:50%;background:#FF4D3D;animation:rec 1.4s steps(2,jump-none) infinite}
@keyframes rec{50%{opacity:.15}}

/* animated gold frame */
.vframe{position:relative;border-radius:30px;padding:2px;background:conic-gradient(from var(--ang),rgba(245,197,24,0) 0deg,rgba(245,197,24,0) 220deg,#F5C518 300deg,rgba(245,197,24,0) 360deg);animation:spin 6s linear infinite}
@keyframes spin{to{--ang:360deg}}
.vinner{border-radius:28px;overflow:hidden;background:#05070C;position:relative}
.vinner video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}

/* ticker */
.ticker{display:flex;width:max-content;animation:tick 42s linear infinite}
@keyframes tick{to{transform:translateX(-50%)}}
.tick-item{display:flex;align-items:center;gap:28px;padding-right:28px;white-space:nowrap}
.tdot{width:10px;height:10px;background:#F5C518;transform:rotate(45deg);flex:none}

/* film strip */
.strip{display:flex;gap:20px;width:max-content;animation:tick 60s linear infinite}
.strip:hover{animation-play-state:paused}
.frame{position:relative;height:300px;border-radius:18px;overflow:hidden;flex:none;border:1px solid rgba(242,240,234,.12)}
.frame img{height:100%;width:auto;display:block;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.frame:hover img{transform:scale(1.06)}

/* cards */
.card{position:relative;padding:36px 32px 34px;border-radius:24px;background:#121829;border:1px solid rgba(242,240,234,.08);overflow:hidden;transition:transform .5s cubic-bezier(.2,.8,.2,1),border-color .5s}
.card:hover{transform:translateY(-6px);border-color:rgba(245,197,24,.5)}
.card .num{position:absolute;right:22px;top:6px;font-family:'Unbounded',sans-serif;font-weight:800;font-size:110px;line-height:1;color:rgba(242,240,234,.05);transition:color .5s}
.card:hover .num{color:rgba(245,197,24,.16)}
.chip{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;border:1px solid rgba(242,240,234,.16);font-size:14px;color:#D9DBE2}

/* eyes */
.eyes{transform-box:fill-box;transform-origin:center;animation:blink 5.5s infinite;filter:drop-shadow(0 0 6px rgba(245,197,24,.85))}
@keyframes blink{0%,93%,100%{transform:scaleY(1)}95%{transform:scaleY(.08)}}
.eye-card{padding:22px 18px 20px;border-radius:20px;background:#0E1322;border:1px solid rgba(242,240,234,.08);display:flex;flex-direction:column;gap:14px;transition:border-color .4s,transform .4s}
.eye-card:hover{border-color:rgba(245,197,24,.5);transform:translateY(-4px)}
.float{animation:float 6s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}

/* stats */
.stat{padding:28px 0 0;border-top:1px solid rgba(242,240,234,.14);position:relative}
.stat::before{content:'';position:absolute;left:0;top:-1px;height:2px;width:48px;background:#F5C518}

/* code */
.code{font-family:'JetBrains Mono',monospace;font-size:14px;line-height:1.75;color:#C9CDD8;white-space:pre;overflow:hidden}
.caret{display:inline-block;width:9px;height:18px;background:#F5C518;vertical-align:-3px;animation:rec 1s steps(2,jump-none) infinite}

/* cta */
.btn{display:inline-flex;align-items:center;gap:14px;min-height:60px;padding:0 34px;border-radius:999px;font-weight:700;font-size:17px;text-decoration:none;position:relative;overflow:hidden;transition:transform .3s}
.btn:hover{transform:translateY(-2px)}
.btn-gold{background:#F5C518;color:#0B0F1A}
.btn-gold:hover{color:#0B0F1A}
.btn-gold::after{content:'';position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.55),rgba(255,255,255,0));transform:skewX(-20deg);animation:shine 3.6s ease-in-out infinite}
@keyframes shine{0%,60%{left:-60%}100%{left:130%}}
.btn-ghost{border:1px solid rgba(242,240,234,.3);color:#F2F0EA}
.btn-ghost:hover{color:#F5C518;border-color:#F5C518}

.img-r{display:block;width:100%;height:auto;border-radius:22px;border:1px solid rgba(242,240,234,.1)}

@supports (animation-timeline: view()){
  .rv{animation:rv linear both;animation-timeline:view();animation-range:entry 0% cover 12%}
  .rv-zoom{animation:rvz linear both;animation-timeline:view();animation-range:entry 0% cover 18%}
}
@keyframes rv{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
@keyframes rvz{from{opacity:.2;transform:scale(.9)}to{opacity:1;transform:none}}

@media (max-width:980px){
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g6{grid-template-columns:repeat(3,minmax(0,1fr))}
  .step{grid-template-columns:minmax(0,1fr);gap:32px}
  .step.rev>.step-media{order:0}
}
@media (max-width:680px){
  .wrap{padding:0 16px}
  .g2,.g3,.g4{grid-template-columns:minmax(0,1fr)}
  .g6{grid-template-columns:repeat(2,minmax(0,1fr))}
  .frame{height:200px}
  .card .num{font-size:80px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  .h-word,.fade-up{opacity:1;transform:none;filter:none}
}

/* sx overrides */
/*
 * Исправления известных дефектов исходных лендингов (они есть и в React-оригиналах).
 * Дописывается генератором снимков / доводкой в конец assets/site.css каждого бандла.
 */

/* Финальный CTA «Разработки»: правило `…> section:nth-of-type(…)` с полупрозрачным фоном перебивает
   тёмный фон `#0f1826`, и белый текст оказывается на светлом. */
.startapus-ds-service-shell [data-testid="studio-cta"] {
  background: #0f1826 !important;
}

/* «Реформус» и «Витринус»: тема продукта задаёт `--primary` как компоненты HSL (`168 68% 38%`), а утилита `bg-primary`
   берёт его как готовый цвет — значение невалидно, фон ссылок/плашек пропадает, остаётся светлый текст на светлом.
   Делаем их такими же, как кнопки на остальных страницах (`!bg-foreground !text-background`). */
.startapus-ds-product-shell[data-product="reformus"] :is(a, span).bg-primary.text-primary-foreground,
.startapus-ds-product-shell[data-product="vitrinus"] :is(a, span).bg-primary.text-primary-foreground {
  background-color: var(--foreground) !important;
  color: var(--background) !important;
}