@font-face {font-family: 'Onest'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/onest-cyrillic-400.woff2') format('woff2'), url('/fonts/onest-latin-400.woff2') format('woff2')}
@font-face {font-family: 'Onest'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/onest-cyrillic-500.woff2') format('woff2'), url('/fonts/onest-latin-500.woff2') format('woff2')}
@font-face {font-family: 'Onest'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/onest-cyrillic-600.woff2') format('woff2'), url('/fonts/onest-latin-600.woff2') format('woff2')}
@font-face {font-family: 'Onest'; font-style: normal; font-weight: 800; font-display: swap; src: url('/fonts/onest-cyrillic-800.woff2') format('woff2'), url('/fonts/onest-latin-800.woff2') format('woff2')}
@font-face {font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/jetbrains-mono-cyrillic-400.woff2') format('woff2'), url('/fonts/jetbrains-mono-latin-400.woff2') format('woff2')}
:root, [data-theme="dark"] {
--bg:#0C0E14;--bg-elevated:#141821;--bg-subtle:#1B202C;--bg-glass:rgba(12,14,20,0.90);
--border:rgba(255,255,255,0.10);--border-strong:rgba(194,255,102,0.38);
--text:#D8DFE9;--text-muted:#9BA6B8;
--lime:#C2FF66;--orange:#FF4F01;--cyan:#38BDF8;--violet:#A855F7;
--accent:#C2FF66;--accent-ink:#070709;--accent-warm:#C2FF66;
--ok:#C2FF66;--warn:#FF9F1C;--err:#FF4F01;
--font-sans:'Onest',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
--font-mono:'JetBrains Mono',monospace;
--fs-display:clamp(2.05rem,3.6vw + 0.8rem,3.45rem);
--fs-h2:clamp(1.65rem,2.4vw + 0.7rem,2.65rem);
--fs-h3:clamp(1.18rem,1.1vw + 0.75rem,1.45rem);
--fs-body:1.03rem;
--radius-sm:8px;--radius-md:12px;--radius-lg:20px;--radius-xl:26px;--radius-pill:9999px;
--shadow-subtle:0 18px 50px rgba(0,0,0,0.55);
--transition-theme:background-color 0.22s ease,border-color 0.22s ease,color 0.22s ease;
}
[data-theme="light"] {
--bg:#F8FAFC;--bg-elevated:#FFFFFF;--bg-subtle:#EEF2F6;--bg-glass:rgba(248,250,252,0.92);
--border:rgba(7,7,9,0.12);--border-strong:rgba(7,7,9,0.35);
--text:#070709;--text-muted:#475569;
--accent:#FF4F01;--accent-ink:#FFFFFF;--accent-warm:#FF4F01;
--ok:#15803D;--warn:#B45309;--err:#DC2626;
--shadow-subtle:0 14px 36px rgba(7,7,9,0.08);
}
*, *::before, *::after {box-sizing: border-box; margin: 0; padding: 0}
html {font-family: var(--font-sans); font-size: 16px; background-color: var(--bg); color: var(--text); line-height: 1.55; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px}
body {min-height: 100vh; background-color: var(--bg); color: var(--text); transition: var(--transition-theme); overflow-x: hidden}
img, picture, svg, video {display: block; max-width: 100%; height: auto}
a {color: inherit; text-decoration: none}
button, input, select, textarea {font: inherit; color: inherit}
:focus-visible {outline: 2px solid var(--lime); outline-offset: 3px}
.tabular-nums {font-variant-numeric: tabular-nums}
h1, h2, h3, h4 {color: var(--text); font-weight: 800; letter-spacing: -0.03em; text-wrap: balance}
h1 {font-size: var(--fs-display); line-height: 1.07}
h2 {font-size: var(--fs-h2); line-height: 1.12}
h3 {font-size: var(--fs-h3); line-height: 1.25}
h1 em, h2 em, .editorial-em, .hl-lime {font-style: normal; font-weight: 800; background: var(--lime); color: #070709; padding: 2px 11px; border-radius: 9px; display: inline-block; transform: rotate(-0.6deg)}
.hl-orange {color: var(--orange); text-decoration: underline; text-decoration-color: rgba(255,79,1,0.5); text-underline-offset: 6px}
p {color: var(--text-muted); font-size: var(--fs-body); max-width: 70ch}
.lead-bluf {font-size: 1.12rem; line-height: 1.55; color: #D5D5E2}
[data-theme="light"] .lead-bluf {color: #1E293B}
.container {width: 100%; max-width: 1380px; margin-inline: auto; padding-inline: clamp(16px, 2.5vw, 32px)}
.section {padding-block: clamp(56px, 7vw, 96px); border-top: 1px solid var(--border); position: relative}
.section--white {background: #FFFFFF; color: #070709; border-top: none}
.section--white h2, .section--white h3 {color: #070709}
.section--white p {color: #3F3F50}
.section--white .section-badge {background: #070709; color: var(--lime); border-color: #070709}
.section-badge {display: inline-flex; align-items: center; gap: 8px; font-size: 0.76rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--lime); background: rgba(194,255,102,0.11); border: 1px solid rgba(194,255,102,0.38); padding: 6px 13px; border-radius: var(--radius-pill); margin-bottom: 14px}
.section-head {margin-bottom: clamp(28px, 4vw, 48px)}
.section-head h2 {margin-bottom: 12px}
.icon-glass-v2 {width: 38px; height: 38px; border-radius: 11px; background: radial-gradient(circle at 28% 22%, rgba(194,255,102,0.34), rgba(56,189,248,0.18) 60%, rgba(255,79,1,0.22) 100%); border: 1px solid rgba(255,255,255,0.32); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); display: inline-grid; place-items: center; flex-shrink: 0; box-shadow: 0 6px 18px rgba(0,0,0,0.35), inset 0 1px 1px rgba(255,255,255,0.42)}
.icon-glass-v2 svg {width: 20px; height: 20px}
.icon-glass-v2--lg {width: 50px; height: 50px; border-radius: 14px}
.icon-glass-v2--lg svg {width: 26px; height: 26px}
.icon-glass-v2--orange {background: radial-gradient(circle at 28% 22%, rgba(255,79,1,0.42), rgba(168,85,247,0.22)); border-color: rgba(255,140,90,0.45)}
.platform-strip {display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 6px}
.plat-badge, .platform-chip {display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px 5px 7px; border-radius: 10px; background: var(--bg-elevated); border: 1px solid var(--border); font-size: 0.76rem; font-weight: 800; color: var(--text); white-space: nowrap}
.plat-badge svg, .platform-chip svg {width: 18px !important; height: 18px !important; flex-shrink: 0}
.site-header {position: sticky; top: 0; z-index: 100; background-color: var(--bg-glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); height: 72px; display: flex; align-items: center}
.site-header .container {display: flex; align-items: center; justify-content: space-between; gap: 12px}
.brand-link {display: inline-flex; align-items: center; gap: 9px; font-weight: 800; font-size: 1.08rem; letter-spacing: -0.03em; white-space: nowrap; flex-shrink: 0}
.brand-mark {width: 34px; height: 34px; border-radius: 9px; background: linear-gradient(135deg, var(--lime) 0%, #8CEB00 100%); color: #070709; font-size: 0.82rem; font-weight: 800; display: grid; place-items: center; box-shadow: 0 0 18px rgba(194,255,102,0.35)}
.brand-badge {font-size: 0.64rem; font-weight: 800; padding: 3px 8px; border-radius: var(--radius-pill); background: rgba(194,255,102,0.14); border: 1px solid rgba(194,255,102,0.45); color: var(--lime); letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap}
[data-theme="light"] .brand-badge {background: #070709; color: var(--lime)}
.nav-menu {display: flex; align-items: center; gap: 5px; flex-wrap: nowrap}
.nav-link {font-size: 0.78rem; font-weight: 700; color: var(--text-muted); transition: all 0.18s; height: 34px; padding: 0 9px; border-radius: 9px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); display: inline-flex; align-items: center; white-space: nowrap}
.nav-link:hover {color: #070709; background: var(--lime); border-color: var(--lime)}
.header-actions {display: flex; align-items: center; gap: 6px; flex-shrink: 0}
.header-actions .btn {min-height: 38px; padding: 7px 13px; font-size: 0.79rem; white-space: nowrap; border-radius: 10px}
.interactive-pill, .btn-icon {min-height: 42px; min-width: 42px; display: inline-flex; align-items: center; justify-content: center; background-color: var(--bg-subtle); border: 1px solid var(--border); border-radius: 10px; color: var(--text); cursor: pointer; padding: 0 13px; font-size: 0.82rem; font-weight: 700}
.interactive-pill:hover, .btn-icon:hover {border-color: var(--lime)}
.nav-toggle {display: none}
.btn {min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 22px; border-radius: 14px; font-size: 0.92rem; font-weight: 800; cursor: pointer; transition: transform 0.18s ease, box-shadow 0.2s, background-color 0.2s; border: 1.5px solid transparent; text-align: center}
.btn:hover {transform: translateY(-2px)}
.btn--primary {background-color: var(--orange); color: #FFFFFF; border-color: var(--orange); box-shadow: 0 10px 28px rgba(255,79,1,0.38)}
.btn--primary:hover {background-color: #ff5e19; box-shadow: 0 14px 34px rgba(255,79,1,0.5)}
.btn--secondary {background-color: rgba(194,255,102,0.09); color: var(--lime); border-color: var(--lime)}
.btn--secondary:hover {background-color: var(--lime); color: #070709}
[data-theme="light"] .btn--secondary {background: #070709; color: var(--lime); border-color: #070709}
.btn--demo-used {background-color: var(--bg-subtle); color: var(--lime); border-color: var(--border-strong)}
.hero {padding-block: clamp(24px, 4vw, 56px)}
.hero-grid {display: grid; grid-template-columns: 0.98fr 1.02fr; gap: clamp(24px, 3vw, 38px); align-items: center}
.hero-copy {display: flex; flex-direction: column; gap: 16px}
.hero-pill {align-self: flex-start; display: inline-flex; align-items: center; gap: 9px; padding: 7px 14px; border-radius: 10px; background: rgba(255,79,1,0.14); border: 1px solid rgba(255,79,1,0.45); font-size: 0.78rem; font-weight: 800; color: #FFB699}
[data-theme="light"] .hero-pill {color: #C23800; background: rgba(255,79,1,0.1)}
.hero-ctas {display: flex; flex-wrap: wrap; gap: 12px; align-items: center}
.hero-note {display: flex; align-items: center; gap: 8px; font-size: 0.82rem; color: var(--text-muted); font-weight: 600}
.hero-note strong {color: var(--lime)}
.niche-box {background: var(--bg-elevated); border: 1px solid rgba(194,255,102,0.25); border-radius: 16px; padding: 14px 16px}
.niche-box-header {display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--lime); font-weight: 800}
[data-theme="light"] .niche-box-header {color: #070709}
.niche-chips, .niche-bar {display: flex; flex-wrap: wrap; gap: 8px}
.niche-chip {display: inline-flex; align-items: center; gap: 9px; padding: 7px 13px 7px 7px; border-radius: 12px; background: var(--bg-subtle); border: 1px solid var(--border); color: var(--text); font-size: 0.82rem; font-weight: 700; cursor: pointer; transition: 0.2s}
.niche-chip:hover, .niche-chip.active {border-color: var(--lime); background: rgba(194,255,102,0.12); transform: translateY(-2px)}
.stage-wrap {background: #101017; color: #FFFFFF; border: 1px solid rgba(255,255,255,0.15); border-radius: 24px; padding: 18px; box-shadow: 0 26px 75px rgba(0,0,0,0.7), 0 0 36px rgba(194,255,102,0.08)}
.stage-top {display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; flex-wrap: wrap}
.mode-switch {display: inline-flex; background: #07070A; padding: 4px; border-radius: 11px; border: 1px solid rgba(255,255,255,0.12)}
.mode-btn {padding: 7px 12px; border-radius: 8px; border: none; background: transparent; color: #9A9AAA; font-weight: 800; font-size: 0.75rem; cursor: pointer; display: inline-flex; align-items: center; gap: 6px}
.mode-btn.active {background: var(--lime); color: #070709}
.mode-btn.active.orange-mode {background: var(--orange); color: #FFFFFF}
.stage-grid {display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 16px; align-items: start}
.phone-frame {position: relative; width: 230px; max-width: 230px; height: 409px; border-radius: 20px; overflow: hidden; background: #000; border: 2px solid rgba(194,255,102,0.6)}
.phone-frame video, .phone-frame img {width: 100%; height: 100%; object-fit: cover; display: block; transition: filter 0.3s}
.phone-frame.raw-mode {border-color: rgba(255,255,255,0.22)}
.phone-frame.raw-mode video {filter: grayscale(0.55) brightness(0.75) contrast(0.9)}
.phone-top-hud {position: absolute; top: 10px; left: 10px; right: 10px; display: flex; justify-content: space-between; align-items: center; z-index: 3}
.hud-platform {padding: 3px 7px; border-radius: 99px; background: rgba(7,7,10,0.85); font-size: 0.64rem; font-weight: 800; border: 1px solid rgba(255,255,255,0.18); white-space: nowrap}
.hud-multiplier {padding: 3px 7px; border-radius: 99px; background: var(--lime); color: #070709; font-family: var(--font-mono); font-size: 0.64rem; font-weight: 800; white-space: nowrap}
.sub-caption-box {position: absolute; left: 8px; right: 8px; bottom: 52px; z-index: 3; text-align: center; pointer-events: none}
.sub-pill {display: inline-block; background: rgba(7,7,9,0.92); border: 2px solid var(--lime); color: #fff; font-size: 0.72rem; font-weight: 800; padding: 6px 10px; border-radius: 9px; text-transform: uppercase}
.sub-pill span {background: var(--lime); color: #070709; padding: 1px 5px; border-radius: 4px}
.phone-bottom-metrics {position: absolute; bottom: 8px; left: 8px; right: 8px; display: flex; justify-content: space-between; padding: 6px 9px; border-radius: 9px; background: rgba(7,7,9,0.88); border: 1px solid rgba(255,255,255,0.14); font-family: var(--font-mono); font-size: 0.68rem; font-weight: 700; z-index: 3}
.anatomy-panel {display: flex; flex-direction: column; justify-content: space-between; gap: 10px}
.anatomy-card {background: #16161F; border: 1px solid rgba(255,255,255,0.1); border-radius: 15px; padding: 13px 15px}
.anatomy-head {display: flex; justify-content: space-between; margin-bottom: 6px; font-size: 0.68rem; font-weight: 800; text-transform: uppercase; color: var(--lime)}
.anatomy-title {font-size: 0.92rem; font-weight: 800; margin-bottom: 8px; color: #fff}
.timeline-steps {display: grid; gap: 7px}
.t-step {display: grid; grid-template-columns: 58px 1fr; gap: 8px; padding: 7px 9px; border-radius: 9px; background: rgba(255,255,255,0.03); border-left: 3px solid var(--lime); font-size: 0.76rem; color: #E2E2EE}
.t-time {font-family: var(--font-mono); font-weight: 800; color: var(--lime); font-size: 0.7rem}
.style-dna-strip {background: linear-gradient(135deg, rgba(194,255,102,0.12), rgba(255,79,1,0.12)); border: 1px solid rgba(194,255,102,0.35); border-radius: 13px; padding: 10px 12px}
.style-dna-title {font-size: 0.68rem; font-weight: 800; text-transform: uppercase; color: var(--lime); margin-bottom: 6px; display: flex; align-items: center; gap: 6px}
.style-dna-tags {display: flex; flex-wrap: wrap; gap: 5px}
.dna-tag {font-size: 0.68rem; font-weight: 700; padding: 3px 7px; border-radius: 6px; background: rgba(7,7,9,0.78); color: #EAEAF2; border: 1px solid rgba(255,255,255,0.12)}
.clip-switcher {display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px}
.clip-btn {padding: 7px 5px; border-radius: 8px; background: #16161F; border: 1px solid rgba(255,255,255,0.1); color: #B0B0C0; font-size: 0.7rem; font-weight: 800; cursor: pointer}
.clip-btn.active, .clip-btn:hover {border-color: var(--lime); color: #070709; background: var(--lime)}
.zero-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
margin-top: 24px;
}
.zero-card {background: #0B0B10; color: #FFFFFF; border: 2px solid #0B0B10; border-radius: 22px; padding: 22px; display: flex; flex-direction: column; justify-content: space-between; gap: 14px; transition: transform 0.2s, border-color 0.2s}
.zero-card:hover, .zero-card.featured {border-color: var(--orange); transform: translateY(-4px)}
.zero-card h3 {color: #FFFFFF; font-size: 1.05rem}
.zero-card p {color: #B8B8C8; font-size: 0.84rem; line-height: 1.48}
.zero-tags {display: flex; flex-wrap: wrap; gap: 6px; margin-block: 4px}
.zero-tag {font-size: 0.7rem; font-weight: 800; padding: 4px 8px; border-radius: 7px; background: rgba(194,255,102,0.12); color: var(--lime); border: 1px solid rgba(194,255,102,0.3)}
.sound-pill {position: absolute; top: 44px; left: 10px; z-index: 5; padding: 5px 10px; border-radius: 99px; background: rgba(255,79,1,0.92); color: #fff; font-size: 0.68rem; font-weight: 800; border: 1px solid rgba(255,255,255,0.35); cursor: pointer; display: inline-flex; align-items: center; gap: 5px; box-shadow: 0 4px 14px rgba(0,0,0,0.5)}
.sound-pill:hover {background: var(--lime); color: #070709}
.dna-grid {display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 6px}
.dna-cell {background: rgba(7,7,9,0.8); border: 1px solid rgba(255,255,255,0.12); border-radius: 8px; padding: 6px 8px; display: flex; flex-direction: column; gap: 2px}
.dna-cell span {font-size: 0.6rem; color: var(--lime); font-weight: 800; letter-spacing: 0.04em}
.dna-cell strong {font-size: 0.72rem; color: #fff}
.video-modal-grid {display: grid; grid-template-columns: 260px 1fr; gap: 20px; align-items: start}
.auth-channels {display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px}
.auth-ch-btn {padding: 10px 8px; border-radius: 10px; background: var(--bg-subtle); border: 1.5px solid var(--border); color: var(--text); font-size: 0.76rem; font-weight: 800; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center}
.auth-ch-btn.active, .auth-ch-btn:hover {border-color: var(--lime); background: rgba(194,255,102,0.12)}
.auth-input {width: 100%; padding: 11px 14px; border-radius: 10px; background: var(--bg-subtle); border: 1px solid var(--border); color: var(--text); font-size: 0.9rem}
.cinema-wall {display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-top: 22px}
.cinema-wall:hover .reel-card:not(:hover) {opacity: 0.52; filter: blur(1px); transform: scale(0.98)}
.reel-card {position: relative; border-radius: 20px; overflow: hidden; aspect-ratio: 9 / 16; background: #0D0D14; border: 1px solid rgba(255,255,255,0.16); cursor: pointer; transition: all 0.28s ease}
.reel-card:hover {transform: translateY(-8px) scale(1.02); border-color: var(--lime); box-shadow: 0 22px 55px rgba(194,255,102,0.22); z-index: 4}
.reel-card video {width: 100%; height: 100%; object-fit: cover}
.reel-top {position: absolute; top: 10px; left: 10px; right: 10px; display: flex; justify-content: space-between; z-index: 3}
.reel-overlay {position: absolute; inset: auto 0 0 0; padding: 14px 12px 12px; background: linear-gradient(180deg, transparent 0%, rgba(7,7,9,0.94) 40%, #070709 100%); z-index: 3}
.reel-ai-drawer {max-height: 0; opacity: 0; overflow: hidden; transition: all 0.28s ease; font-size: 0.73rem; color: #E2E8F0}
.reel-card:hover .reel-ai-drawer {max-height: 150px; opacity: 1; padding-top: 7px; margin-top: 6px; border-top: 1px solid rgba(255,255,255,0.14)}
.facts-strip {border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background-color: var(--bg-elevated); padding-block: 28px}
.facts-grid {display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px}
.fact-item {display: flex; flex-direction: column; gap: 4px; border-left: 2px solid var(--lime); padding-left: 16px}
.fact-value {font-size: clamp(1.25rem, 1.9vw, 1.65rem); font-weight: 800; color: var(--text)}
.fact-label {font-size: 0.84rem; color: var(--text-muted)}
.contrast-grid, .tools-grid {display: grid; grid-template-columns: 1fr 1fr; gap: 24px}
.contrast-card, .tool-card {padding: 30px; border-radius: var(--radius-lg); background-color: var(--bg-elevated); border: 1px solid var(--border); display: flex; flex-direction: column; justify-content: space-between; gap: 18px}
.contrast-card--ideal {border-color: var(--lime); box-shadow: 0 0 30px rgba(194,255,102,0.08)}
.contrast-list {list-style: none; display: grid; gap: 12px}
.contrast-list li {font-size: 0.92rem; color: var(--text-muted); padding-left: 26px; position: relative}
.contrast-card--bad .contrast-list li::before {content: "×"; position: absolute; left: 0; color: var(--orange); font-weight: 800}
.contrast-card--ideal .contrast-list li::before {content: "+"; position: absolute; left: 0; color: var(--lime); font-weight: 800}
.teleprompter-card {border-radius: var(--radius-lg); background-color: var(--bg-elevated); border: 1px solid var(--border-strong); overflow: hidden}
.teleprompter-header, .teleprompter-footer {padding: 20px 28px; background-color: var(--bg-subtle); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px}
.teleprompter-badge {font-family: var(--font-mono); font-size: 0.78rem; color: #070709; background: var(--lime); padding: 4px 10px; border-radius: 6px; font-weight: 800}
.teleprompter-body {padding: 28px; display: grid; gap: 22px}
.script-row {display: grid; grid-template-columns: 130px 1fr 1fr; gap: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--border)}
.script-row:last-child {border-bottom: none; padding-bottom: 0}
.timecode-tag {font-family: var(--font-mono); font-size: 0.85rem; color: var(--lime); font-weight: 700}
.track-col {display: flex; flex-direction: column; gap: 6px}
.track-title {font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); font-weight: 700}
.track-content {font-size: 0.92rem; color: var(--text)}
.clusters-grid {display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px}
.cluster-card {padding: 20px; border-radius: var(--radius-md); background-color: var(--bg-elevated); border: 1px solid var(--border); display: flex; flex-direction: column; gap: 10px; transition: 0.2s}
.cluster-card:hover {border-color: var(--lime); transform: translateY(-3px)}
.cluster-title {font-size: 1rem; font-weight: 800}
.cluster-meta {font-size: 0.8rem; color: var(--text-muted)}
.beta-banner {padding: 24px 30px; border-radius: var(--radius-lg); background-color: var(--bg-elevated); border: 1px solid var(--border-strong); margin-bottom: 32px; display: flex; flex-direction: column; gap: 10px}
.beta-banner__text {font-size: 1rem; color: var(--text)}
.beta-banner__badge {align-self: flex-start; font-size: 0.76rem; font-weight: 800; color: #070709; background-color: var(--lime); padding: 4px 12px; border-radius: var(--radius-pill)}
.pricing-grid {display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px}
.plan-card {padding: 26px 22px; border-radius: var(--radius-lg); background-color: var(--bg-elevated); border: 1px solid var(--border); display: flex; flex-direction: column; justify-content: space-between; gap: 20px}
.plan-card--featured {border-color: var(--orange); box-shadow: 0 0 0 1px var(--orange)}
.plan-card__head {display: flex; flex-direction: column; gap: 10px}
.plan-card__name {font-size: 1.18rem; font-weight: 800}
.plan-card__price {font-size: 0.98rem; font-weight: 700; color: var(--lime)}
.plan-card__badge {font-size: 0.72rem; font-weight: 800; color: var(--lime); background: rgba(194,255,102,0.1); border: 1px solid rgba(194,255,102,0.35); padding: 4px 8px; border-radius: 6px; display: inline-block}
.plan-card__features {list-style: none; display: grid; gap: 10px}
.plan-card__features li {font-size: 0.85rem; color: var(--text-muted); padding-left: 18px; position: relative}
.plan-card__features li::before {content: "•"; position: absolute; left: 2px; color: var(--lime)}
.faq-grid {display: grid; gap: 12px; max-width: 860px}
.faq-item {border-radius: var(--radius-md); background-color: var(--bg-elevated); border: 1px solid var(--border)}
.faq-item summary {padding: 20px 24px; font-weight: 700; cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between}
.faq-item summary::-webkit-details-marker {display: none}
.faq-item summary::after {content: "+"; font-size: 1.2rem; color: var(--lime)}
.faq-item[open] summary::after {content: "−"}
.faq-answer {padding: 0 24px 20px; color: var(--text-muted); font-size: 0.92rem}
.gate-modal {position: fixed; inset: 0; z-index: 999; background-color: rgba(7,7,9,0.88); backdrop-filter: blur(10px); display: none; align-items: center; justify-content: center; padding: 20px}
.gate-modal.is-active {display: flex}
.gate-modal__content {width: 100%; max-width: 520px; background-color: var(--bg-elevated); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); padding: 32px; display: grid; gap: 16px; position: relative}
.gate-modal__badge {justify-self: start; font-size: 0.74rem; font-weight: 800; color: #070709; background-color: var(--lime); padding: 4px 10px; border-radius: var(--radius-pill)}
.gate-modal__buttons {display: grid; gap: 10px; margin-top: 6px}
.btn--tg {background-color: #2AABEE; color: #FFFFFF}
.btn--vk {background-color: #0077FF; color: #FFFFFF}
.gate-modal__close {position: absolute; top: 14px; right: 14px; background: transparent; border: none; color: var(--text-muted); cursor: pointer; min-height: 44px; min-width: 44px; font-size: 1.2rem}
.site-footer {border-top: 1px solid var(--border); padding-block: 42px; background-color: var(--bg); font-size: 0.85rem; color: var(--text-muted)}
.footer-grid {display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px}
.footer-links {display: flex; flex-wrap: wrap; gap: 18px}
.footer-link:hover {color: var(--lime)}
.prose {color: #B8C3D2; background-color: #131720; border: 1px solid rgba(255,255,255,0.08); border-radius: 22px; padding: clamp(22px, 4vw, 44px); font-size: 1.04rem; line-height: 1.82; max-width: 78ch}
.prose h1, .prose .hero-title {color: #DCE3ED; font-size: clamp(1.75rem, 2.6vw + 0.6rem, 2.55rem); line-height: 1.18; margin-bottom: 20px}
.prose h2 {color: #D6DFEB; margin-top: 38px; margin-bottom: 14px; font-size: clamp(1.35rem, 1.8vw + 0.5rem, 1.85rem)}
.prose h3, .prose h4 {color: #CFD9E6; margin-top: 26px; margin-bottom: 10px}
.prose p {margin-bottom: 18px; max-width: 72ch}
.prose strong, .prose b {color: #D2DCE8; font-weight: 700}
.prose ul, .prose ol {margin-bottom: 20px; padding-left: 26px}
.prose li {margin-bottom: 9px; line-height: 1.78}
.prose a {color: var(--lime); text-decoration: underline; text-underline-offset: 4px}
.prose table {width: 100%; border-collapse: collapse; margin-block: 26px; font-size: 0.92rem}
.prose th, .prose td {padding: 11px 14px; border: 1px solid var(--border); text-align: left}
.prose th {background-color: var(--bg-subtle); color: #D4DCE8; font-weight: 700}
.prose details {background: rgba(255,255,255,0.025); border: 1px solid var(--border); border-radius: 12px; padding: 14px 18px; margin-bottom: 12px}
.prose summary {color: #D2DCE8; font-weight: 700; cursor: pointer}
[data-theme="light"] .prose {background-color: #FFFFFF; border-color: rgba(7,7,9,0.1); color: #334155}
[data-theme="light"] .prose h1, [data-theme="light"] .prose .hero-title, [data-theme="light"] .prose h2, [data-theme="light"] .prose h3, [data-theme="light"] .prose strong, [data-theme="light"] .prose summary {color: #0F172A}
[data-theme="light"] .prose p, [data-theme="light"] .prose li, [data-theme="light"] .prose td {color: #334155}
[data-theme="light"] .prose a {color: #C23800}
@media (max-width: 1040px) {
.hero-grid, .stage-grid, .contrast-grid, .tools-grid {grid-template-columns: 1fr}
.zero-grid, .facts-grid {grid-template-columns: repeat(2, 1fr)}
.cinema-wall {grid-template-columns: repeat(2, 1fr)}
.phone-frame {max-width: 290px; margin-inline: auto}
.script-row {grid-template-columns: 1fr; gap: 10px}
.nav-menu {display: none; position: absolute; top: 72px; left: 0; right: 0; background-color: var(--bg-elevated); border-bottom: 1px solid var(--border); flex-direction: column; padding: 20px; gap: 12px}
.nav-menu.is-open {display: flex}
.nav-toggle {display: inline-flex}
}
@media (max-width: 600px) {
.zero-grid, .facts-grid, .pricing-grid, .cinema-wall {grid-template-columns: 1fr}
.dev-feedback-hint {display: none !important}
}
.btn--signin {min-height: 38px; padding: 7px 13px; border-radius: 10px; background: rgba(255,255,255,0.05); border: 1px solid var(--border-strong); color: var(--text); font-size: 0.79rem; font-weight: 800; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap}
.btn--signin:hover {border-color: var(--lime); background: rgba(194,255,102,0.14)}
.btn--signout {min-height: 36px; padding: 6px 11px; border-radius: 9px; background: rgba(255,79,1,0.12); border: 1px solid rgba(255,79,1,0.45); color: #FFB699; font-size: 0.76rem; font-weight: 800; cursor: pointer; white-space: nowrap}
[data-theme="light"] .btn--signout {color: #C23800}
.auth-tabs {display: grid; grid-template-columns: 1fr 1fr; gap: 6px; background: var(--bg-subtle); padding: 4px; border-radius: 11px; border: 1px solid var(--border)}
.auth-tab {padding: 8px 10px; border-radius: 8px; border: none; background: transparent; color: var(--text-muted); font-weight: 800; font-size: 0.82rem; cursor: pointer}
.auth-tab.active {background: var(--lime); color: #070709}
.killslot-sec {padding-block: 26px; background: linear-gradient(90deg, rgba(255,79,1,0.14) 0%, rgba(194,255,102,0.12) 100%); border-top: 2px solid var(--orange); border-bottom: 2px solid var(--lime)}
.killslot-box {display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px}
.killslot-copy h3 {font-size: 1.15rem; margin-bottom: 4px; color: var(--text)}
.killslot-copy p {font-size: 0.86rem; color: var(--text-muted); margin: 0; max-width: 78ch}
.dev-feedback-dock {position: fixed; right: 18px; bottom: 18px; z-index: 950; display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 36px)}
.dev-feedback-hint {background: rgba(20,24,33,0.95); border: 1.5px solid rgba(194,255,102,0.45); color: #D8DFE9; padding: 9px 14px; border-radius: 14px; font-size: 0.75rem; line-height: 1.35; max-width: 275px; box-shadow: 0 10px 28px rgba(0,0,0,0.55); pointer-events: none; user-select: none}
.dev-feedback-hint strong {color: var(--lime); display: block; font-size: 0.78rem; margin-bottom: 2px}
[data-theme="light"] .dev-feedback-hint {background: rgba(255,255,255,0.96); color: #1E293B; border-color: #070709}
[data-theme="light"] .dev-feedback-hint strong {color: #C23800}
.killslot-fab {display: inline-flex; align-items: center; gap: 10px; padding: 11px 18px; border-radius: 16px; background: var(--orange); color: #fff; font-weight: 800; font-size: 0.83rem; border: 2px solid var(--lime); box-shadow: 0 12px 32px rgba(255,79,1,0.52); cursor: pointer; transition: transform 0.2s, background 0.2s; text-align: left; line-height: 1.2}
.killslot-fab:hover {transform: translateY(-3px) scale(1.02); background: #ff5e19}
.killslot-fab svg {width: 20px !important; height: 20px !important; flex-shrink: 0}
.killslot-fab small {display: block; font-size: 0.68rem; font-weight: 600; opacity: 0.92; margin-top: 2px}
.feedback-guide-box {background: var(--bg-subtle); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; font-size: 0.8rem; color: var(--text-muted); line-height: 1.48}
.feedback-guide-box ul {padding-left: 16px; margin-top: 6px; display: grid; gap: 5px}
.feedback-guide-box strong {color: var(--text)}
.quiz-box {background: rgba(194,255,102,0.06); border: 1px solid rgba(194,255,102,0.28); border-radius: 12px; padding: 11px 13px; display: grid; gap: 8px}
.quiz-title {font-size: 0.76rem; font-weight: 800; color: var(--lime); text-transform: uppercase; letter-spacing: 0.04em}
[data-theme="light"] .quiz-title {color: #070709}
.quiz-chips {display: flex; flex-wrap: wrap; gap: 6px}
.quiz-chip {padding: 5px 10px; border-radius: 8px; background: var(--bg-elevated); border: 1px solid var(--border); color: var(--text); font-size: 0.73rem; font-weight: 700; cursor: pointer}
.quiz-chip.active, .quiz-chip:hover {border-color: var(--lime); background: rgba(194,255,102,0.16)}
.voice-rec-box {background: var(--bg-subtle); border: 1.5px dashed rgba(194,255,102,0.45); border-radius: 14px; padding: 14px; text-align: center; display: grid; gap: 10px}
.voice-rec-box.is-recording {border-color: var(--orange); background: rgba(255,79,1,0.12)}
.voice-timer {font-family: var(--font-mono); font-size: 1.35rem; font-weight: 800; color: var(--lime)}
.voice-rec-box.is-recording .voice-timer {color: var(--orange)}
.insights-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-top: 24px;
}
@media (max-width: 980px) {
.insights-grid {grid-template-columns: 1fr}
}
.insight-card {background: var(--bg-elevated); border: 1.5px solid var(--border-strong); border-radius: 18px; padding: 20px; display: flex; flex-direction: column; gap: 14px; box-shadow: var(--shadow-card); position: relative}
.insight-card:hover {border-color: var(--lime)}
.insight-top {display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap}
.insight-badge {display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 99px; background: rgba(255,79,1,0.16); border: 1px solid rgba(255,79,1,0.45); color: #FF854D; font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em}
.insight-fora {padding: 4px 9px; border-radius: 8px; background: rgba(194,255,102,0.14); border: 1px solid rgba(194,255,102,0.35); color: var(--lime); font-size: 0.7rem; font-weight: 800}
.insight-origin {background: var(--bg-subtle); border: 1px solid var(--border); border-radius: 12px; padding: 12px; display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: center}
.insight-origin img {width: 64px; height: 112px; object-fit: cover; border-radius: 8px; border: 1px solid rgba(255,255,255,0.18)}
.insight-adapt {background: rgba(194,255,102,0.06); border: 1px solid rgba(194,255,102,0.28); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px}
.insight-adapt-tag {font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--lime)}
[data-theme="light"] .insight-adapt-tag, [data-theme="light"] .insight-fora {color: #070709}
.tier-badge{display:inline-flex;align-items:center;padding:3px 8px;border-radius:var(--radius-pill);font-family:var(--font-mono);font-size:11px;font-weight:800;letter-spacing:0.04em;text-transform:uppercase;white-space:nowrap}
.tier-badge--x3{background:rgba(56,189,248,0.16);color:var(--cyan);border:1px solid rgba(56,189,248,0.45)}
.tier-badge--x5{background:rgba(194,255,102,0.16);color:var(--lime);border:1px solid rgba(194,255,102,0.45)}
.tier-badge--x10{background:rgba(168,85,247,0.18);color:var(--violet);border:1px solid rgba(168,85,247,0.45)}
.tier-badge--x20{background:rgba(255,79,1,0.2);color:var(--orange);border:1px solid rgba(255,79,1,0.5)}
.rising-pill{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:var(--radius-pill);background:rgba(255,79,1,0.16);border:1px solid rgba(255,79,1,0.45);color:#FF854D;font-size:11px;font-weight:800;white-space:nowrap}
.source-link{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;color:var(--lime);text-decoration:underline;text-underline-offset:3px}
.source-link:hover{color:#fff}
.radar-controls{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:14px;margin-bottom:8px}
.filter-pill{min-height:34px;display:inline-flex;align-items:center;gap:6px;padding:6px 13px;border-radius:10px;background:var(--bg-subtle);border:1px solid var(--border);color:var(--text-muted);font-size:12px;font-weight:700;cursor:pointer;transition:all 0.18s;white-space:nowrap}
.filter-pill:hover{border-color:var(--lime);color:var(--text)}
.filter-pill[aria-pressed="true"]{background:var(--lime);color:#070709;border-color:var(--lime);font-weight:800}
.filter-pill[aria-pressed="true"].filter-pill--orange{background:var(--orange);color:#FFFFFF;border-color:var(--orange)}
.radar-empty{grid-column:1 / -1;padding:36px 16px;text-align:center;color:var(--text-muted);font-size:14px;background:var(--bg-elevated);border:1px dashed var(--border);border-radius:var(--radius-md)}
.reel-card[hidden]{display:none!important}
.pain-cat-grid,.producer-modules-grid,.cockpit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:20px}
.pain-card,.mod-card,.cockpit-card{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-lg);padding:22px;display:flex;flex-direction:column;gap:12px;transition:border-color 0.2s}
.pain-card:hover,.mod-card:hover,.cockpit-card:hover{border-color:var(--border-strong)}
.track-switch{display:inline-flex;align-items:center;gap:6px;background:var(--bg-subtle);border:1px solid var(--border);border-radius:12px;padding:4px}
.frame-list{list-style:none;display:grid;gap:8px;margin:0;padding:0}
.frame-list li{display:flex;align-items:flex-start;gap:8px;font-size:13px;color:var(--text);line-height:1.45}
.frame-list li::before{content:"•";color:var(--lime);font-weight:800;flex-shrink:0}
.v11-cockpit{padding-block:28px}
.funnel-bar{display:flex;width:100%;height:12px;border-radius:6px;overflow:hidden;background:var(--bg-subtle);border:1px solid var(--border);margin-block:8px}
.funnel-bar__seg{height:100%;transition:width 0.3s ease}
.funnel-bar__seg--scanned{background:var(--cyan)}
.funnel-bar__seg--retained{background:var(--lime)}
.funnel-bar__seg--breakout{background:var(--orange)}
.gauge{font-family:var(--font-mono);font-size:22px;font-weight:800;color:var(--lime);letter-spacing:-0.02em}
.geo-matrix{display:flex;flex-direction:column;gap:8px;background:var(--bg-subtle);border:1px solid var(--border);border-radius:12px;padding:12px;max-height:260px;overflow-y:auto}
#geoClusterList{display:flex;flex-wrap:wrap;gap:6px}
.v11-strip{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;padding:12px 18px;border-radius:var(--radius-md);background:var(--bg-elevated);border:1px solid var(--border-strong);margin-block:20px}
.u-hidden{display:none}
.u-xs-muted{font-size:12px;color:var(--text-muted);margin:0}
.u-label{display:block;font-size:12px;font-weight:700;margin-bottom:6px;color:var(--text-muted)}
.u-accent-xs{font-size:12px;font-weight:800;color:var(--orange)}
.u-mt24{margin-top:24px}
.u-mb24{margin-bottom:24px}
.section--white .pain-card,.section--white .mod-card{background:#F8FAFC;border-color:rgba(7,7,9,0.12);color:#070709}
.section--white .pain-card h3,.section--white .mod-card h3,.section--white .pain-card strong,.section--white .mod-card strong{color:#070709}
.section--white .pain-card p,.section--white .mod-card p{color:#3F3F50}
.section--white .filter-pill{background:#EEF2F6;border-color:rgba(7,7,9,0.15);color:#070709}
.section--white .filter-pill[aria-pressed="true"]{background:var(--orange);color:#FFFFFF;border-color:var(--orange)}
.section--white .frame-list li{color:#1E293B}
.section--white .frame-list li::before{color:var(--orange)}
.filter-pill:focus-visible,.pain-card:focus-visible,.mod-card:focus-visible,.cockpit-card:focus-visible,.track-switch button:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
[data-theme="light"] .filter-pill:focus-visible,[data-theme="light"] .pain-card:focus-visible,[data-theme="light"] .mod-card:focus-visible{outline-color:var(--orange)}
@media (max-width: 768px) {
.pain-cat-grid,.producer-modules-grid,.cockpit-grid{grid-template-columns:1fr}
}