@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap");

@import url("/public-site/styles/tokens.css");

* { box-sizing: border-box; }
body { font-family: var(--font-family-primary); letter-spacing: 0.005em; margin: 0; background: linear-gradient(180deg, var(--color-bg-1) 0%, var(--color-bg-0) 100%); color: var(--color-text-0); line-height: var(--font-body-line); font-size: var(--font-body-size); }
h1 { font-size: var(--font-h1-size); line-height: var(--font-h1-line); margin: 0; }
h2 { font-size: var(--font-h2-size); line-height: var(--font-h2-line); margin: 0 0 var(--space-6); }
.container { width: min(var(--container-max), var(--container-gutter)); margin: 0 auto; }
.skip-link { position: absolute; left: -999px; }
.skip-link:focus { left: var(--space-4); top: var(--space-4); background: var(--color-bg-0); color: var(--color-text-0); padding: var(--space-2) var(--space-3); border-radius: var(--radius-button); z-index: 1000; }
.site-header { border-bottom: 1px solid color-mix(in srgb, var(--color-border-strong) 72%, transparent); background: color-mix(in srgb, var(--color-bg-1) 72%, rgba(3, 6, 15, 0.88)); position: sticky; top: 0; z-index: 90; backdrop-filter: blur(14px) saturate(130%); }
.site-header__inner { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; }
.brand { color: var(--color-text-0); text-decoration: none; font-weight: 700; }
.brand:focus-visible,
.nav-list a:focus-visible,
.btn:focus-visible,
.header-burger:focus-visible,
.site-footer a:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--color-red-400);
  outline-offset: 3px;
  border-radius: 8px;
}
.site-nav { margin-left: auto; }
.nav-list { list-style: none; display: flex; gap: var(--space-4); margin: 0; padding: 0; }
.nav-list a { position: relative; font-size: var(--font-nav-size); line-height: var(--font-nav-line); font-weight: var(--font-nav-weight); color: var(--color-text-1); text-decoration: none; padding-bottom: 4px; transition: color var(--motion-duration-fast) var(--motion-ease-standard), text-shadow var(--motion-duration-fast) var(--motion-ease-standard); }
.nav-list a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; border-radius: 99px; background: linear-gradient(90deg, var(--color-red-400), var(--color-red-600)); transform: scaleX(0); transform-origin: left; transition: transform var(--motion-duration-fast) var(--motion-ease-emphasized); }
.nav-list a:hover { color: var(--color-text-0); text-shadow: 0 0 16px color-mix(in srgb, var(--color-red-500) 54%, transparent); }
.nav-list a:hover::after, .nav-list a.is-active::after { transform: scaleX(1); }
.nav-list a.is-active { color: var(--color-text-0); }
.hero { padding: var(--space-12) 0; }

.hero__content { position: relative; }
.hero__content::after { content: ""; position: absolute; z-index: -1; width: 320px; height: 320px; right: -110px; top: -60px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--color-red-500) 42%, transparent) 0%, transparent 68%); filter: blur(6px); opacity: .7; animation: hero-glow 4.8s ease-in-out infinite; }

.hero-sphere-scene__tiles .feature-tile { animation: float-card 6s ease-in-out infinite; will-change: transform; }
.hero-sphere-scene__tiles .feature-tile--top-right { animation-delay: .7s; }
.hero-sphere-scene__tiles .feature-tile--bottom-left { animation-delay: 1.3s; }
.hero-sphere-scene__tiles .feature-tile--bottom-right { animation-delay: 2s; }

.btn--primary, .btn--secondary { position: relative; overflow: hidden; }
.btn--primary:hover, .btn--secondary:hover { transform: translateY(-3px) scale(1.01); }
.btn--primary::after, .btn--secondary::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-red-500) 40%, transparent); opacity: 0; transition: box-shadow .25s ease, opacity .25s ease; }
.btn--primary:hover::after, .btn--secondary:hover::after { box-shadow: 0 0 0 5px color-mix(in srgb, var(--color-red-500) 14%, transparent); opacity: 1; }

.section[data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .6s var(--motion-ease-standard), transform .6s var(--motion-ease-standard); }
.section[data-reveal].is-visible { opacity: 1; transform: translateY(0); }

@keyframes hero-glow {
  0%, 100% { transform: scale(0.96); opacity: .45; }
  50% { transform: scale(1.08); opacity: .88; }
}

@keyframes float-card {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .section[data-reveal] { opacity: 1; transform: none; }
}
.hero__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--space-8); align-items: center; }
.eyebrow { font-weight: 700; margin: 0 0 var(--space-2); }
.text-accent-red { color: var(--color-red-400); letter-spacing: 0.01em; }
.hero h1 { font-size: var(--font-display-size); line-height: var(--font-display-line); font-weight: var(--font-display-weight); letter-spacing: -0.01em; }
.hero__text, .coming-soon { color: color-mix(in srgb, var(--color-text-1) 88%, white 12%); }
.coming-soon { font-size: var(--font-caption-size); line-height: var(--font-caption-line); }
.hero__cta-group { display: flex; gap: var(--space-3); flex-wrap: wrap; margin: var(--space-4) 0 var(--space-2); }
.btn { border-radius: var(--radius-button); padding: var(--space-3) var(--space-4); font-weight: 600; border: 1px solid transparent; text-decoration: none; display: inline-flex; align-items: center; gap: var(--space-2); transition: transform var(--motion-duration-fast) var(--motion-ease-emphasized), box-shadow var(--motion-duration-fast) var(--motion-ease-emphasized), border-color var(--motion-duration-fast) var(--motion-ease-standard); }
.btn--primary { background: linear-gradient(145deg, #ff5c63 0%, var(--color-red-500) 50%, #a20f1f 100%); color: var(--color-text-0); box-shadow: inset 0 1px 0 rgba(255,255,255,.32), inset 0 -8px 14px rgba(35, 0, 6, .25), 0 12px 22px rgba(177, 22, 40, .28); }
.btn--primary:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.38), inset 0 -8px 14px rgba(35,0,6,.3), 0 18px 28px rgba(177,22,40,.45); }
.btn--secondary { background: color-mix(in srgb, var(--color-surface-0) 85%, transparent); color: var(--color-text-1); border-color: color-mix(in srgb, var(--color-border-strong) 86%, transparent); }
.btn--secondary::before { content: "▶"; font-size: .78em; color: var(--color-red-300); }
.header-burger { display: none; background: color-mix(in srgb, var(--color-surface-0) 75%, transparent); border: 1px solid var(--color-border-strong); border-radius: 10px; padding: 8px; }
.header-burger span { display: block; width: 18px; height: 2px; margin: 3px 0; background: var(--color-text-0); }
.nav-overlay { display: none; }

.hero__visual { min-height: 320px; }
.hero-carousel { position: relative; overflow: hidden; border-radius: var(--radius-card); background: color-mix(in srgb, var(--color-bg-2) 84%, #070d1a); border: 1px solid color-mix(in srgb, var(--color-border-strong) 80%, transparent); }
.hero-carousel__track { display: flex; width: 100%; min-height: 420px; transform: translate3d(0,0,0); transition: transform 560ms var(--motion-ease-standard); will-change: transform; contain: content; }
.hero-carousel__slide { flex: 0 0 100%; margin: 0; background-image: var(--hero-slide); background-position: center; background-size: cover; transform: translateZ(0); }
.hero-carousel__slide::after { content: ''; display: block; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(4,8,16,.1) 0%, rgba(4,8,16,.42) 100%); }
.hero-carousel__nav { position: absolute; top: 50%; transform: translate3d(0,-50%,0); z-index: 2; width: 42px; height: 42px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--color-border-strong) 86%, transparent); background: color-mix(in srgb, var(--color-surface-0) 80%, transparent); color: var(--color-text-0); cursor: pointer; }
.hero-carousel__nav--prev { left: var(--space-3); }
.hero-carousel__nav--next { right: var(--space-3); }
.hero-carousel__cta-layer { position: absolute; inset: auto var(--space-4) var(--space-4) var(--space-4); z-index: 2; display: flex; justify-content: center; }
.hero-carousel__cta { min-width: min(280px, 100%); justify-content: center; background: var(--hero-cta-bg, #229ED9); color: var(--hero-cta-fg, #FFFFFF); border-color: color-mix(in srgb, var(--hero-cta-bg, #229ED9) 76%, #000 24%); box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 12px 22px color-mix(in srgb, var(--hero-cta-bg, #229ED9) 42%, transparent); }
.hero-carousel__cta:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 18px 30px color-mix(in srgb, var(--hero-cta-bg, #229ED9) 56%, transparent); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; border: 0; padding: 0; white-space: nowrap; clip-path: inset(100%); overflow: hidden; }

.section { padding: var(--space-8) 0; }
.section--alt { background: color-mix(in srgb, var(--color-bg-2) 80%, var(--color-bg-1) 20%); }
.cards { display: grid; gap: var(--space-4); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card { border: 1px solid color-mix(in srgb, var(--color-border-strong) 80%, rgba(255,255,255,.15)); border-radius: var(--radius-card); padding: var(--space-4); background: linear-gradient(160deg, color-mix(in srgb, var(--color-surface-0) 86%, #090f1d), color-mix(in srgb, var(--color-surface-1) 78%, #040810)); box-shadow: 0 14px 30px rgba(3, 8, 20, .45); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.card:hover { transform: translateY(-6px); border-color: color-mix(in srgb, var(--color-red-400) 35%, var(--color-border-strong)); box-shadow: 0 20px 34px rgba(3, 8, 20, .55), 0 0 22px color-mix(in srgb, var(--color-red-500) 24%, transparent); }
.card__icon { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-size: 1.2rem; margin-bottom: var(--space-3); border: 1px solid color-mix(in srgb, var(--color-red-500) 40%, var(--color-border-strong)); background: radial-gradient(circle at 35% 30%, color-mix(in srgb, white 36%, transparent), color-mix(in srgb, var(--color-red-500) 26%, transparent)); box-shadow: 0 0 18px color-mix(in srgb, var(--color-red-500) 35%, transparent); }
.steps-list { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: var(--space-4); }
.steps-list::before { content: ""; position: absolute; left: 21px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(180deg, color-mix(in srgb, var(--color-red-400) 70%, transparent), color-mix(in srgb, var(--color-red-700) 30%, transparent)); }
.steps-list li { display: grid; grid-template-columns: 42px 1fr; align-items: center; gap: var(--space-3); color: var(--color-text-1); }
.step-node { width: 42px; height: 42px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--color-red-400) 45%, var(--color-border-strong)); background: linear-gradient(160deg, color-mix(in srgb, var(--color-surface-0) 80%, #090f1d), color-mix(in srgb, var(--color-red-700) 24%, transparent)); display: grid; place-items: center; font-weight: 700; color: var(--color-text-0); box-shadow: 0 0 14px color-mix(in srgb, var(--color-red-500) 26%, transparent); }
.final-cta { border: 1px solid color-mix(in srgb, var(--color-border-strong) 85%, transparent); border-radius: var(--radius-card); background: linear-gradient(130deg, color-mix(in srgb, var(--color-bg-2) 84%, #070d1a), color-mix(in srgb, var(--color-surface-1) 70%, #030710)); padding: var(--space-6); display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); }
.final-cta p { color: color-mix(in srgb, var(--color-text-1) 90%, white 10%); margin: 0; }
.final-cta h2 { margin-bottom: var(--space-2); }
.site-footer { border-top: 1px solid var(--color-border-strong); padding: var(--space-6) 0; margin-top: var(--space-8); color: color-mix(in srgb, var(--color-text-1) 82%, white 18%); background: color-mix(in srgb, var(--color-bg-2) 75%, #060b14); }
.site-footer__inner { display:grid; grid-template-columns: 1.2fr 1fr 1fr auto; gap: var(--space-4); align-items: start; }
.site-footer a { color: var(--color-text-1); text-decoration: none; }
.site-footer__nav, .site-footer__contacts { display:flex; flex-direction:column; gap: var(--space-2); }
.site-footer__social { display:flex; gap: var(--space-2); }
.site-footer__social a { width: 34px; height: 34px; border-radius: 50%; display:grid; place-items:center; border:1px solid var(--color-border-strong); background: color-mix(in srgb, var(--color-surface-0) 78%, transparent); font-size: .75rem; }
@media (max-width: 1120px) { .hero__grid { grid-template-columns: 1fr; gap: var(--space-6); } }
@media (max-width: 980px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .site-footer__inner { grid-template-columns: 1fr 1fr; } .final-cta { flex-direction: column; align-items: flex-start; } }
@media (max-width: 760px) { .site-header__inner { padding: var(--space-2) 0; } .header-burger { display: inline-block; margin-left: auto; z-index: 92; } .site-nav { position: fixed; top: 62px; left: var(--space-3); right: var(--space-3); border: 1px solid color-mix(in srgb, var(--color-border-strong) 72%, transparent); border-radius: var(--radius-card); background: color-mix(in srgb, var(--color-bg-1) 82%, rgba(3, 6, 15, 0.95)); padding: var(--space-3); backdrop-filter: blur(14px); opacity: 0; pointer-events: none; transform: translateY(-8px); transition: opacity .2s ease, transform .2s ease; } .site-header.is-menu-open .site-nav { opacity: 1; pointer-events: auto; transform: translateY(0); } .site-header.is-menu-open .nav-overlay { display: block; position: fixed; inset: 0; background: rgba(3, 6, 16, .58); backdrop-filter: blur(2px); } .nav-list { flex-direction: column; gap: var(--space-3); } .cards, .site-footer__inner { grid-template-columns: 1fr; } .hero { padding: var(--space-9) 0; } .section { padding: var(--space-7) 0; } }
@media (max-width: 560px) { .hero__cta-group { flex-direction: column; } .hero__cta-group .btn { width: 100%; justify-content: center; } .steps-list li { align-items: start; } .final-cta { padding: var(--space-5); } }

.hero-sphere-scene__core{background-image:var(--landing-image-url);background-size:cover;background-position:center;}
.hero-sphere-scene__core.has-image .hero-sphere-scene__core-label{display:none;}
.hero-sphere-scene__core.is-fallback{border-style:dashed;opacity:.9;}
.cards{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));}
.cards .card{min-height:180px;display:flex;flex-direction:column;justify-content:flex-start;}
.cards .card h3,.cards .card p{overflow-wrap:anywhere;}

@media (max-width: 760px) { .hero-carousel__track { min-height: 360px; } }

@media (prefers-reduced-motion: reduce) { .hero-carousel__track { transition: none; } .hero-carousel__nav { transition: none; } }