:root {
--bg: #0a0a0b;
--bg-2: #111114;
--bg-3: #16161a;
--panel: #1a1a1f;
--panel-2: #202026;
--line: #2a2a32;
--text: #e8e8ea;
--text-dim: #8a8a95;
--text-faint: #55555f;
--accent: #ff2d55;
--accent-glow: rgba(255, 45, 85, 0.35);
--ok: #3ddc97;
--warn: #ffb020;
--blue: #5ac8fa;
--mono: 'JetBrains Mono', ui-monospace, monospace;
--sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
overflow-x: clip;
}
body {
background: var(--bg);
color: var(--text);
font-family: var(--sans);
line-height: 1.55;
overflow-x: clip;
background-image: radial-gradient(circle at 20% 10%, rgba(255, 45, 85, 0.06), transparent 40%),
radial-gradient(circle at 80% 80%, rgba(90, 200, 250, 0.04), transparent 40%);
}
body::before {
content: '';
position: fixed;
inset: 0;
background-image: linear-gradient(rgba(255, 255, 255, 0.015) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.015) 1px, transparent 1px);
background-size: 40px 40px;
pointer-events: none;
z-index: 0;
}
img,
video,
canvas,
svg {
max-width: 100%;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
position: relative;
z-index: 1;
}
@media (max-width: 640px) {
.container {
padding-right: 18px;
padding-left: 18px;
}
}
[hidden] {
display: none !important;
}
.reveal {
opacity: 0;
transform: translateY(30px);
transition: opacity .7s ease, transform .7s ease;
}
.reveal.visible {
opacity: 1;
transform: translateY(0);
}
.site-nav {
position: sticky;
top: 0;
z-index: 100;
background: rgba(10, 10, 11, 0.85);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--line);
}
.nav-inner {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 16px;
padding-bottom: 16px;
}
.logo {
display: flex;
align-items: center;
gap: 10px;
color: inherit;
font-family: var(--mono);
font-weight: 700;
letter-spacing: 0.5px;
text-decoration: none;
}
.logo-mark {
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 12px var(--accent-glow), inset 0 0 8px rgba(0, 0, 0, 0.4);
animation: pulse-rec 1.6s ease-in-out infinite;
}
@keyframes pulse-rec {
0%,
100% {
box-shadow: 0 0 12px var(--accent-glow), inset 0 0 8px rgba(0, 0, 0, 0.4);
}
50% {
box-shadow: 0 0 24px var(--accent-glow), inset 0 0 8px rgba(0, 0, 0, 0.4);
}
}
.logo-text span {
color: var(--accent);
}
.nav-links {
display: flex;
align-items: center;
height: 100%;
gap: 28px;
font-size: 14px;
color: var(--text-dim);
}
.nav-links a {
position: relative;
display: flex;
align-items: center;
height: 100%;
color: var(--text-dim);
text-decoration: none;
transition: color 180ms ease;
}
.nav-links a:hover {
color: var(--text);
}
.nav-actions {
display: flex;
align-items: center;
gap: 16px;
flex-shrink: 0;
}
.nav-login {
color: var(--text-dim);
font-size: 14px;
font-weight: 600;
text-decoration: none;
transition: color .2s;
}
.nav-login:hover {
color: var(--text);
}
@media (max-width: 720px) {
.nav-links {
display: none;
}
.nav-inner {
gap: 14px;
}
}
.hero {
padding: 90px 0 80px;
position: relative;
}
.hero-grid {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 60px;
align-items: center;
}
@media (max-width: 900px) {
.hero-grid {
grid-template-columns: 1fr;
gap: 48px;
}
}
.badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 12px;
border-radius: 999px;
background: var(--panel);
border: 1px solid var(--line);
font-family: var(--mono);
font-size: 12px;
color: var(--text-dim);
margin-bottom: 24px;
}
.badge .dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--ok);
box-shadow: 0 0 8px var(--ok);
}
.hero h1 {
font-size: clamp(38px, 5.5vw, 64px);
font-weight: 800;
line-height: 1.05;
letter-spacing: -0.02em;
margin-bottom: 20px;
}
.hero h1 .accent {
background: linear-gradient(135deg, var(--accent) 0%, #ff6b6b 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.hero p.lead {
font-size: 18px;
color: var(--text-dim);
margin-bottom: 32px;
max-width: 520px;
}
.hero-ctas {
display: flex;
gap: 14px;
flex-wrap: wrap;
margin-bottom: 20px;
}
.hero-meta {
font-family: var(--mono);
font-size: 12px;
color: var(--text-faint);
}
.hero-meta .rec {
color: var(--accent);
}
.studio-mockup {
background: var(--panel);
border: 1px solid var(--line);
border-radius: 16px;
padding: 20px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.03);
position: relative;
}
.studio-top {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 14px;
border-bottom: 1px solid var(--line);
margin-bottom: 16px;
}
.leds {
display: flex;
gap: 8px;
}
.led {
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--text-faint);
box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.5);
}
.led.red {
background: var(--accent);
box-shadow: 0 0 10px var(--accent-glow), inset 0 0 4px rgba(0, 0, 0, 0.3);
}
.led.yellow {
background: var(--warn);
box-shadow: 0 0 8px var(--warn);
}
.led.green {
background: var(--ok);
box-shadow: 0 0 8px var(--ok);
}
.studio-label {
font-family: var(--mono);
font-size: 11px;
color: var(--text-faint);
letter-spacing: 1px;
}
.video-slot {
aspect-ratio: 16/9;
background: var(--bg);
border-radius: 10px;
border: 1px solid var(--line);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
margin-bottom: 16px;
}
.video-placeholder {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
color: var(--text-faint);
font-family: var(--mono);
font-size: 12px;
text-align: center;
}
.play-btn {
width: 64px;
height: 64px;
border-radius: 50%;
background: var(--accent);
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 0 30px var(--accent-glow);
cursor: pointer;
transition: transform .2s;
}
.play-btn:hover {
transform: scale(1.08);
}
.play-btn::after {
content: '';
width: 0;
height: 0;
border-left: 18px solid #fff;
border-top: 12px solid transparent;
border-bottom: 12px solid transparent;
margin-left: 6px;
}
.waveform {
height: 80px;
background: var(--bg-2);
border-radius: 8px;
border: 1px solid var(--line);
padding: 12px;
display: flex;
align-items: center;
justify-content: center;
gap: 3px;
position: relative;
}
.wave-bar {
width: 3px;
background: var(--accent);
border-radius: 2px;
animation: wave 1.2s ease-in-out infinite;
animation-play-state: paused;
}
@keyframes wave {
0%,
100% {
transform: scaleY(0.3);
opacity: 0.6;
}
50% {
transform: scaleY(1);
opacity: 1;
}
}
.wave-overlay {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
gap: 3px;
pointer-events: none;
}
.wave-overlay .wave-bar {
background: var(--blue);
opacity: 0.4;
animation: none;
transform: scaleY(.55);
}
.nav-links a.active {
color: var(--text);
}
.nav-links a::after {
content: "";
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 2px;
background: var(--accent);
transform: scaleX(0);
transform-origin: left center;
transition: transform 240ms cubic-bezier(.22, 1, .36, 1);
}
.nav-links a:hover::after,
.nav-links a:focus-visible::after,
.nav-links a.active::after {
transform: scaleX(1);
}
#demo-section.is-visible .wave-bar {
animation-play-state: running;
}
.timecode {
position: absolute;
top: 8px;
right: 8px;
font-family: var(--mono);
font-size: 10px;
color: var(--accent);
background: rgba(255, 45, 85, 0.1);
padding: 2px 6px;
border-radius: 3px;
border: 1px solid rgba(255, 45, 85, 0.3);
}
section {
padding: 100px 0;
position: relative;
}
.offer-cta {
min-width: 220px;
justify-content: center;
}
.section-head {
text-align: center;
max-width: 800px;
margin: 0 auto 60px;
}
.section-tag {
font-family: var(--mono);
font-size: 13px;
color: var(--accent);
letter-spacing: 2px;
text-transform: uppercase;
margin-bottom: 12px;
}
.section-title {
font-size: clamp(32px, 4vw, 44px);
font-weight: 1000;
line-height: 1.15;
letter-spacing: -0.02em;
margin-bottom: 16px;
}
.section-sub {
color: var(--text-dim);
font-size: 17px;
}
@media (max-width: 640px) {
.nav-inner {
padding-top: 12px;
padding-bottom: 12px;
}
.logo {
gap: 8px;
min-width: 0;
}
.logo-mark {
width: 24px;
height: 24px;
flex: 0 0 24px;
}
.logo-text {
font-size: 13px;
white-space: nowrap;
}
.nav-actions {
gap: 10px;
}
.nav-actions .btn,
.nav-inner > .btn {
padding: 9px 13px;
font-size: 12px;
white-space: nowrap;
}
.hero {
padding: 56px 0 64px;
}
.hero-grid {
gap: 42px;
}
.badge {
margin-bottom: 18px;
}
.hero h1 {
font-size: clamp(36px, 11vw, 48px);
line-height: 1.08;
}
.hero p.lead {
font-size: 16px;
margin-bottom: 26px;
}
.hero-ctas {
display: grid;
grid-template-columns: 1fr;
}
.hero-ctas .btn {
width: 100%;
justify-content: center;
}
section {
padding: 72px 0;
}
.section-head {
margin-bottom: 38px;
}
.section-title {
font-size: clamp(30px, 9vw, 38px);
}
.section-sub {
font-size: 15px;
}
.step,
.pain-card {
padding: 22px;
}
.offer-wrap {
padding: 44px 22px;
border-radius: 18px;
}
.offer-wrap p {
font-size: 16px;
}
.offer-cta {
width: 100%;
}
}
@media (max-width: 520px) {
.nav-login {
display: none;
}
}
.pain {
background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
border-top: 1px solid var(--line);
}
.pain-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
@media (max-width: 800px) {
.pain-grid {
grid-template-columns: 1fr;
}
}
.pain-card {
background: var(--panel);
border: 1px solid var(--line);
border-radius: 14px;
padding: 28px;
position: relative;
transition: transform .2s, border-color .2s;
}
.pain-card:hover {
transform: translateY(-4px);
border-color: var(--accent);
}
.pain-card .x {
width: 40px;
height: 40px;
border-radius: 10px;
background: rgba(255, 45, 85, 0.12);
display: flex;
align-items: center;
justify-content: center;
font-weight: 800;
color: var(--accent);
margin-bottom: 16px;
border: 1px solid rgba(255, 45, 85, 0.25);
}
.pain-card h3 {
font-size: 18px;
margin-bottom: 10px;
}
.pain-card p {
color: var(--text-dim);
font-size: 15px;
}
.steps {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
margin-bottom: 60px;
}
@media (max-width: 800px) {
.steps {
grid-template-columns: 1fr;
}
}
.step {
background: var(--panel);
border: 1px solid var(--line);
border-radius: 14px;
padding: 28px;
position: relative;
display: flex;
gap: 20px;
}
.step-num {
font-family: var(--mono);
font-size: 36px;
font-weight: 700;
color: var(--accent);
line-height: 1;
min-width: 40px;
text-shadow: 0 0 16px var(--accent-glow);
}
.step h3 {
font-size: 18px;
margin-bottom: 8px;
}
.step p {
color: var(--text-dim);
font-size: 15px;
}
.proof {
background: var(--bg-2);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.video-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
@media (max-width: 900px) {
.video-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 560px) {
.video-grid {
grid-template-columns: 1fr;
}
}
.offer-wrap {
background: linear-gradient(135deg, var(--panel) 0%, var(--bg-2) 100%);
border: 1px solid var(--line);
border-radius: 24px;
padding: 60px 40px;
text-align: center;
position: relative;
overflow: hidden;
}
.offer-wrap::before {
content: '';
position: absolute;
top: -50%;
left: 50%;
transform: translateX(-50%);
width: 600px;
height: 600px;
background: radial-gradient(circle, var(--accent-glow) 0%, transparent 60%);
pointer-events: none;
}
.offer-wrap>* {
position: relative;
z-index: 1;
}
.offer-wrap h2 {
font-size: clamp(32px, 4.5vw, 52px);
margin-bottom: 16px;
letter-spacing: -0.02em;
}
.offer-wrap p {
color: var(--text-dim);
font-size: 18px;
margin-bottom: 32px;
max-width: 560px;
margin-left: auto;
margin-right: auto;
}
.offer-price {
display: inline-flex;
align-items: baseline;
gap: 10px;
font-family: var(--mono);
padding: 10px 16px;
border-radius: 10px;
background: var(--panel-2);
border: 1px solid var(--line);
margin-bottom: 28px;
}
.offer-price .old {
color: var(--text-faint);
text-decoration: line-through;
font-size: 14px;
}
.offer-price .new {
color: var(--accent);
font-weight: 700;
font-size: 20px;
}
.app-body {
background: var(--bg);
}
.app-nav {
position: sticky;
top: 0;
z-index: 100;
background: rgba(10, 10, 11, 0.9);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--line);
}
.app-nav-right {
display: flex;
align-items: center;
gap: 16px;
}
.early-badge {
font-family: var(--mono);
font-size: 11px;
letter-spacing: 1px;
color: var(--warn);
background: rgba(255, 176, 32, 0.1);
border: 1px solid rgba(255, 176, 32, 0.3);
padding: 4px 10px;
border-radius: 6px;
}
.user-greeting {
font-size: 13px;
color: var(--text-dim);
}
@media (max-width: 640px) {
.user-greeting {
display: none;
}
}
.announce-banner {
background: linear-gradient(90deg, rgba(255, 45, 85, 0.08) 0%, rgba(255, 45, 85, 0.02) 100%);
border-bottom: 1px solid rgba(255, 45, 85, 0.2);
padding: 14px 0;
}
.announce-inner {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
}
.announce-icon {
font-size: 18px;
}
.announce-text {
flex: 1;
font-size: 14px;
color: var(--text-dim);
}
.announce-text strong {
color: var(--text);
}
.app-main {
padding: 40px 0 80px;
}
.site-footer {
padding: 48px 0 32px;
border-top: 1px solid var(--line);
background: var(--bg);
}
.footer-inner {
display: flex;
flex-direction: column;
gap: 32px;
}
.footer-top {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 40px;
}
.footer-brand {
max-width: 320px;
}
.footer-logo {
font-family: var(--mono);
font-size: 18px;
font-weight: 800;
color: var(--text);
letter-spacing: -0.5px;
}
.footer-logo .accent {
color: var(--accent);
}
.footer-tagline {
margin-top: 8px;
font-size: 13px;
color: var(--text-faint);
line-height: 1.5;
}
.footer-links {
display: flex;
gap: 24px;
flex-wrap: wrap;
}
.footer-links a {
font-family: var(--mono);
font-size: 12px;
color: var(--text-dim);
text-decoration: none;
letter-spacing: 0.3px;
transition: color .2s;
}
.footer-links a:hover {
color: var(--accent);
}
.footer-bottom {
padding-top: 24px;
border-top: 1px solid var(--line);
font-family: var(--mono);
font-size: 11px;
color: var(--text-faint);
letter-spacing: 0.3px;
}
@media (max-width: 600px) {
.footer-top {
flex-direction: column;
gap: 24px;
}
.footer-links {
flex-direction: column;
gap: 12px;
}
}
.btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 11px 22px;
border-radius: 10px;
font-weight: 600;
font-size: 14px;
cursor: pointer;
border: none;
text-decoration: none;
transition: transform .15s, box-shadow .2s, background .2s;
font-family: var(--sans);
}
.btn-primary {
background: var(--accent);
color: #fff;
box-shadow: 0 4px 20px var(--accent-glow);
}
.btn-primary:hover {
transform: translateY(-1px);
box-shadow: 0 6px 28px var(--accent-glow);
}
.btn-primary:disabled {
opacity: .6;
cursor: not-allowed;
transform: none;
}
.btn-ghost {
background: transparent;
color: var(--text);
border: 1px solid var(--line);
}
.btn-ghost:hover {
background: var(--panel);
}
.btn--full {
width: 100%;
justify-content: center;
}
.btn--small {
padding: 8px 14px;
font-size: 13px;
}
.btn--big {
padding: 16px 32px;
font-size: 16px;
}
.btn--loading {
position: relative;
color: transparent !important;
pointer-events: none;
}
.btn--loading::after {
content: '';
position: absolute;
width: 18px;
height: 18px;
border: 2px solid rgba(255, 255, 255, 0.3);
border-top-color: #fff;
border-radius: 50%;
animation: spin .8s linear infinite;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
.play-icon,
.play-mini {
border-radius: 50%;
background: var(--accent);
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 0 24px var(--accent-glow);
width: 56px;
height: 56px;
}
.play-icon::after,
.play-mini::after {
content: '';
border-left: 14px solid #fff;
border-top: 9px solid transparent;
border-bottom: 9px solid transparent;
margin-left: 4px;
}
.play-icon--sm,
.play-mini--sm {
width: 36px;
height: 36px;
}
.play-icon--sm::after,
.play-mini--sm::after {
border-left-width: 10px;
border-top-width: 6px;
border-bottom-width: 6px;
margin-left: 3px;
}
.play-icon--lg {
width: 64px;
height: 64px;
}
.play-icon--lg::after {
border-left-width: 18px;
border-top-width: 12px;
border-bottom-width: 12px;
margin-left: 6px;
}
.sound-toggle-btn,
.carousel-sound-btn,
.dubs-sound-btn {
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--panel);
border: 2px solid var(--line);
color: var(--text);
font-size: 20px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
padding: 0;
}
.sound-toggle-btn:hover,
.carousel-sound-btn:hover,
.dubs-sound-btn:hover {
background: var(--accent);
border-color: var(--accent);
transform: scale(1.1);
box-shadow: 0 8px 32px var(--accent-glow);
}
.sound-toggle-btn:active,
.carousel-sound-btn:active,
.dubs-sound-btn:active {
transform: scale(0.95);
}
.sound-icon {
display: none;
line-height: 1;
}
.sound-icon.sound-on {
display: block;
}
.sound-toggle-btn.muted .sound-icon.sound-on,
.carousel-sound-btn.muted .sound-icon.sound-on,
.dubs-sound-btn.muted .sound-icon.sound-on {
display: none;
}
.sound-toggle-btn.muted .sound-icon.sound-off,
.carousel-sound-btn.muted .sound-icon.sound-off,
.dubs-sound-btn.muted .sound-icon.sound-off {
display: block;
}
.modal-overlay {
position: fixed;
inset: 0;
background:
radial-gradient(circle at 50% 45%, rgba(34, 24, 29, .45), transparent 42rem),
rgba(7, 7, 9, .94);
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
z-index: 1000;
opacity: 0;
visibility: hidden;
pointer-events: none;
contain: paint;
transition: opacity .18s ease, visibility .18s ease;
}
.modal-overlay.active {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.modal {
background: var(--panel);
border: 1px solid var(--line);
border-radius: 20px;
width: 100%;
max-width: 480px;
position: relative;
box-shadow: 0 18px 48px rgba(0, 0, 0, .58), 0 0 0 1px rgba(255, 255, 255, .02);
transform: translate3d(0, 12px, 0) scale(.985);
transition: transform .18s cubic-bezier(.2, .8, .2, 1);
max-height: 90vh;
overflow-y: auto;
}
.modal--medium {
max-width: 520px;
}
.modal--wide {
max-width: 900px;
}
.modal-overlay.active .modal {
transform: translate3d(0, 0, 0) scale(1);
}
.modal-close {
position: absolute;
top: 16px;
right: 16px;
width: 32px;
height: 32px;
border-radius: 8px;
background: var(--panel-2);
border: 1px solid var(--line);
color: var(--text-dim);
font-size: 14px;
cursor: pointer;
transition: background .2s, color .2s;
z-index: 2;
}
.modal-close:hover {
background: var(--bg-2);
color: var(--text);
}
.modal-body {
padding: 48px 36px 36px;
}
@media (max-width: 520px) {
.modal-body {
padding: 40px 24px 28px;
}
}
.modal-icon {
display: flex;
justify-content: center;
margin-bottom: 20px;
}
.modal-title {
font-size: 26px;
font-weight: 800;
text-align: center;
margin-bottom: 10px;
letter-spacing: -0.02em;
}
.modal-subtitle {
text-align: center;
color: var(--text-dim);
font-size: 15px;
margin-bottom: 28px;
line-height: 1.5;
}
.modal-form {
display: flex;
flex-direction: column;
gap: 16px;
}
.field {
display: flex;
flex-direction: column;
gap: 6px;
}
.field label {
font-family: var(--mono);
font-size: 11px;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--text-faint);
}
.field input[type="text"],
.field input[type="email"],
.field input[type="password"] {
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 10px;
padding: 13px 14px;
color: var(--text);
font-size: 15px;
font-family: var(--sans);
transition: border-color .2s, background .2s;
outline: none;
width: 100%;
}
.field input[type="text"]:focus,
.field input[type="email"]:focus,
.field input[type="password"]:focus {
border-color: var(--accent);
background: var(--bg);
box-shadow: 0 0 0 3px var(--accent-glow);
}
.field input::placeholder {
color: var(--text-faint);
}
.checkbox {
display: flex;
align-items: center;
gap: 10px;
cursor: pointer;
font-size: 13px;
color: var(--text-dim);
user-select: none;
}
.checkbox input {
accent-color: var(--accent);
width: 16px;
height: 16px;
cursor: pointer;
}
.modal-footnote {
text-align: center;
font-family: var(--mono);
font-size: 11px;
color: var(--text-faint);
letter-spacing: 0.5px;
margin-top: 16px;
}
.modal-body--success {
text-align: center;
}
.success-icon {
width: 72px;
height: 72px;
border-radius: 50%;
background: rgba(61, 220, 151, 0.15);
color: var(--ok);
font-size: 38px;
font-weight: 800;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
border: 1px solid rgba(61, 220, 151, 0.3);
box-shadow: 0 0 40px rgba(61, 220, 151, 0.2);
}
.success-perks,
.preorder-perks {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 26px;
text-align: left;
}
.perk {
display: flex;
align-items: center;
gap: 10px;
font-size: 14px;
color: var(--text-dim);
padding: 10px 14px;
background: var(--bg-2);
border-radius: 10px;
border: 1px solid var(--line);
}
.perk-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--ok);
box-shadow: 0 0 8px var(--ok);
flex-shrink: 0;
}
.preorder-icon {
width: 72px;
height: 72px;
border-radius: 50%;
background: linear-gradient(135deg, var(--accent) 0%, #ff6b6b 100%);
color: #fff;
font-size: 36px;
font-weight: 800;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
box-shadow: 0 0 40px var(--accent-glow);
}
.lock-icon {
font-size: 48px;
text-align: center;
margin-bottom: 16px;
}
.lock-date {
display: flex;
justify-content: center;
align-items: baseline;
gap: 8px;
margin: 24px 0;
font-family: var(--mono);
}
.launch-notice__day {
font-size: 36px;
font-weight: 800;
color: var(--accent);
line-height: 1;
text-shadow: 0 0 16px var(--accent-glow);
}
.launch-notice__month {
font-size: 10px;
color: var(--text-dim);
letter-spacing: 2px;
margin-top: 4px;
}
.filters-bar {
display: flex;
flex-direction: column;
gap: 12px;
margin-bottom: 40px;
}
.filter-group {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.filter-chip {
padding: 8px 16px;
border-radius: 999px;
background: var(--panel);
border: 1px solid var(--line);
color: var(--text-dim);
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: all .2s;
}
.filter-chip:hover {
border-color: var(--accent);
color: var(--text);
}
.filter-chip.active {
background: var(--accent);
border-color: var(--accent);
color: #fff;
box-shadow: 0 4px 16px var(--accent-glow);
}
.filter-chip--cat {
background: var(--bg-2);
}
.clips-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 20px;
}
.clip-card,
.video-card {
background: var(--panel);
border: 1px solid var(--line);
border-radius: 14px;
overflow: hidden;
transition: transform .2s, border-color .2s;
cursor: pointer;
}
.clip-card:hover,
.video-card:hover {
transform: translateY(-4px);
border-color: var(--accent);
}
.clip-card .thumb,
.video-card .thumb {
aspect-ratio: 16/9;
background: var(--bg);
position: relative;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.clip-card .thumb video,
.video-card .thumb video {
width: 100%;
height: 100%;
object-fit: cover;
}
.clip-card .thumb .placeholder,
.video-card .thumb .placeholder {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
color: var(--text-faint);
font-family: var(--mono);
font-size: 11px;
text-align: center;
padding: 0 16px;
}
.clip-card .thumb .play-mini,
.video-card .thumb .play-mini {
}
.clip-card .duration {
position: absolute;
bottom: 8px;
right: 8px;
font-family: var(--mono);
font-size: 11px;
background: rgba(0, 0, 0, 0.8);
padding: 2px 6px;
border-radius: 4px;
color: var(--text);
}
.fast-badge {
position: absolute;
top: 8px;
left: 8px;
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.5px;
background: var(--ok);
color: #0a0a0b;
padding: 3px 8px;
border-radius: 4px;
box-shadow: 0 0 12px rgba(61, 220, 151, 0.4);
}
.clip-card .meta,
.video-card .meta {
padding: 14px;
display: flex;
flex-direction: column;
gap: 6px;
font-family: var(--mono);
font-size: 12px;
}
.clip-card .title,
.video-card .title {
font-size: 15px;
font-weight: 600;
color: var(--text);
font-family: var(--sans);
}
.clip-card .source {
font-size: 12px;
color: var(--text-faint);
}
.clip-card .stats {
display: flex;
gap: 12px;
font-size: 12px;
color: var(--text-dim);
}
.dubs-count {
color: var(--accent);
font-weight: 500;
}
.video-card .views {
color: var(--text-faint);
}
.clip-modal-body {
padding: 32px;
}
@media (max-width: 640px) {
.clip-modal-body {
padding: 20px;
}
}
.clip-view {
display: flex;
flex-direction: column;
gap: 24px;
}
.clip-video {
aspect-ratio: 16/9;
background: var(--bg);
border-radius: 12px;
border: 1px solid var(--line);
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.clip-video video {
width: 100%;
height: 100%;
object-fit: cover;
}
.clip-video .placeholder {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
color: var(--text-faint);
font-family: var(--mono);
font-size: 12px;
}
.clip-info {
text-align: center;
}
.clip-title {
font-size: 24px;
font-weight: 800;
margin-bottom: 10px;
letter-spacing: -0.02em;
}
.clip-meta-row {
display: flex;
justify-content: center;
gap: 18px;
flex-wrap: wrap;
margin-bottom: 20px;
font-family: var(--mono);
font-size: 13px;
color: var(--text-dim);
}
.clip-cta {
font-size: 17px;
padding: 15px 36px;
}
.clip-cta-hint {
margin-top: 10px;
font-family: var(--mono);
font-size: 11px;
color: var(--text-faint);
letter-spacing: 0.5px;
}
.clip-dubs {
border-top: 1px solid var(--line);
padding-top: 24px;
}
.clip-dubs-title {
font-size: 16px;
font-weight: 700;
margin-bottom: 16px;
color: var(--text);
}
.clip-dubs-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 14px;
}
.mini-dub {
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 10px;
overflow: hidden;
cursor: pointer;
transition: border-color .2s, transform .2s;
}
.mini-dub:hover {
border-color: var(--accent);
transform: translateY(-2px);
}
.mini-dub-thumb {
aspect-ratio: 16/9;
background: var(--bg);
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
}
.mini-dub-thumb video {
width: 100%;
height: 100%;
object-fit: cover;
}
.mini-dub-thumb .placeholder {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
color: var(--text-faint);
font-family: var(--mono);
font-size: 10px;
text-align: center;
padding: 0 8px;
}
.mini-dub-thumb .play-mini {
width: 36px;
height: 36px;
}
.mini-dub-thumb .play-mini::after {
border-left-width: 10px;
border-top-width: 6px;
border-bottom-width: 6px;
margin-left: 3px;
}
.mini-dub-meta {
padding: 10px;
display: flex;
justify-content: space-between;
align-items: center;
}
.mini-dub-author {
font-size: 12px;
font-weight: 600;
color: var(--text);
}
.mini-dub-likes {
font-family: var(--mono);
font-size: 11px;
color: var(--text-faint);
}
.skip-link {
position: fixed;
top: 10px;
left: 10px;
z-index: 2000;
transform: translateY(-180%);
padding: 10px 14px;
border-radius: 8px;
background: var(--accent);
color: #fff;
font-family: var(--mono);
text-decoration: none;
}
.skip-link:focus { transform: translateY(0); }
.lead-consent { align-items: flex-start; line-height: 1.45; }
.landing-auth-modal {
inline-size: min(500px, 100%);
max-width: none;
max-height: calc(100vh - 24px);
max-height: calc(100dvh - 24px);
overscroll-behavior: contain;
scrollbar-gutter: stable;
scrollbar-width: thin;
scrollbar-color: #505057 transparent;
}
.landing-auth-modal::-webkit-scrollbar { width: 8px; }
.landing-auth-modal::-webkit-scrollbar-track { background: transparent; }
.landing-auth-modal::-webkit-scrollbar-thumb {
border: 2px solid transparent;
border-radius: 999px;
background: #505057;
background-clip: padding-box;
}
.landing-auth-modal .modal-body { min-width: 0; }
.landing-auth-brand {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 22px;
font-size: 22px;
font-weight: 800;
}
.landing-auth-brand i {
width: 10px;
height: 10px;
margin-right: 10px;
border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 18px var(--accent);
}
.landing-auth-brand span { color: var(--accent); }
.landing-auth-kicker {
margin-bottom: 12px;
text-align: center;
}
.landing-auth-modal .landing-yandex-button {
display: flex;
inline-size: 100%;
min-width: 0;
min-height: 48px;
align-items: center;
justify-content: center;
gap: 10px;
flex: 0 0 auto;
padding-inline: 18px;
appearance: none;
background: #e9e9eb;
color: #252528;
line-height: 1.2;
text-align: center;
white-space: normal;
}
.landing-auth-modal .landing-yandex-mark {
display: inline-grid;
flex: 0 0 24px;
place-items: center;
width: 24px;
color: #b03724;
font-size: 20px;
line-height: 1;
}
.landing-auth-modal .landing-yandex-button > span {
min-width: 0;
overflow-wrap: anywhere;
}
.landing-yandex-terms {
margin: 10px 0 0;
color: var(--text-faint);
font-family: var(--mono);
font-size: 10px;
line-height: 1.6;
text-align: center;
}
.landing-yandex-consent {
margin-top: 14px;
padding: 16px;
border: 1px solid var(--accent);
border-radius: 10px;
background: var(--bg-2);
}
.landing-yandex-consent[hidden] { display: none; }
.landing-yandex-consent strong { display: block; margin-bottom: 8px; font-size: 13px; }
.landing-yandex-consent p { margin-bottom: 14px; color: var(--text-dim); font-size: 12px; line-height: 1.55; }
.landing-yandex-cancel {
width: 100%;
margin-top: 8px;
border: 0;
background: transparent;
color: var(--text-faint);
cursor: pointer;
}
.landing-auth-divider {
display: grid;
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
align-items: center;
gap: 12px;
margin: 26px 0 18px;
text-align: center;
}
.landing-auth-divider::before,
.landing-auth-divider::after {
content: '';
height: 1px;
background: var(--line);
}
.landing-auth-divider span {
color: var(--text-faint);
font-family: var(--mono);
font-size: 10px;
white-space: nowrap;
}
.landing-field-hint { color: var(--text-faint); font-size: 10px; }
.landing-auth-error {
padding: 11px 12px;
border: 1px solid rgba(255, 52, 95, .55);
border-radius: 8px;
background: rgba(255, 52, 95, .08);
color: #ff9aae;
font-size: 12px;
line-height: 1.5;
}
.landing-auth-error[hidden] { display: none; }
.landing-auth-modal button:disabled { cursor: not-allowed; opacity: .38; }
.landing-auth-modal [hidden] { display: none !important; }
.landing-registration-consents {
display: grid;
gap: 12px;
margin: 2px 0 18px;
padding: 14px;
border: 1px solid var(--line);
}
.landing-registration-consents legend {
padding-inline: 7px;
color: var(--text);
font-size: 10px;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
}
.landing-registration-consents .lead-consent {
display: grid;
grid-template-columns: 20px 1fr;
align-items: start;
gap: 10px;
margin: 0;
color: #c9c9cc;
font-size: 11px;
line-height: 1.55;
}
.landing-registration-consents input {
width: 18px;
min-height: 18px;
margin: 1px 0 0;
accent-color: var(--accent);
}
.landing-registration-consents .inline-link {
color: var(--text);
text-decoration: underline;
text-decoration-style: solid;
}
.landing-auth-modal .landing-auth-switch {
display: inline-flex;
width: 100%;
min-height: 44px;
align-items: center;
justify-content: center;
margin: 12px 0 18px;
padding: 9px 14px;
border: 1px solid #45454d;
border-radius: 2px;
appearance: none;
background: transparent;
color: #d1d1d4;
cursor: pointer;
font: 11px/1.4 var(--sans);
text-align: center;
transition: border-color .18s ease, color .18s ease, background .18s ease;
}
.landing-auth-modal .landing-auth-switch:hover {
border-color: var(--accent);
background: rgba(237, 72, 104, .055);
color: var(--text);
}
.landing-auth-switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
.landing-auth-legal { display: block; color: var(--text-faint); font-size: 9px; line-height: 1.9; }
@media (max-height: 800px) {
.landing-auth-overlay { padding-block: 10px; }
.landing-auth-modal {
max-height: calc(100vh - 20px);
max-height: calc(100dvh - 20px);
}
.landing-auth-modal .modal-body { padding: 30px 34px 26px; }
.landing-auth-modal .modal-close { top: 12px; right: 12px; }
.landing-auth-brand { margin-bottom: 14px; font-size: 22px; }
.landing-auth-kicker { margin-bottom: 8px; }
.landing-auth-modal .modal-title { margin-bottom: 6px; font-size: 24px; }
.landing-auth-modal .modal-subtitle { margin-bottom: 18px; font-size: 13px; }
.landing-auth-divider { margin: 20px 0 14px; }
.landing-auth-modal .modal-form { gap: 12px; }
.landing-auth-modal .field { gap: 4px; }
.landing-auth-modal .field input { min-height: 44px; }
.landing-auth-modal .landing-auth-switch { min-height: 40px; margin: 10px 0 14px; }
.landing-auth-legal { line-height: 1.6; }
}
@media (max-width: 520px) {
.landing-auth-overlay { padding: 8px; }
.landing-auth-modal {
inline-size: 100%;
max-height: calc(100vh - 16px);
max-height: calc(100dvh - 16px);
}
.landing-auth-modal .modal-body { padding: 34px 20px 24px; }
.landing-auth-modal .modal-close {
top: 10px;
right: 10px;
width: 36px;
height: 36px;
}
.landing-auth-brand { justify-content: flex-start; margin-bottom: 14px; }
.landing-auth-kicker { text-align: left; }
.landing-auth-modal .modal-title,
.landing-auth-modal .modal-subtitle { text-align: left; }
.landing-auth-modal .modal-title { padding-right: 40px; }
.landing-registration-consents { padding-inline: 12px; }
}
@media (max-width: 360px) {
.landing-auth-modal .modal-body { padding-inline: 16px; }
.landing-auth-brand { font-size: 20px; }
.landing-auth-modal .modal-title { font-size: 22px; }
.landing-auth-modal .modal-subtitle { font-size: 12px; }
.landing-auth-modal .landing-yandex-button { gap: 7px; padding-inline: 12px; font-size: 10px; }
.landing-registration-consents { padding: 12px 10px; }
}
.seo-faq-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}
.seo-faq-grid article {
padding: 24px;
border: 1px solid var(--line);
border-radius: 16px;
background: var(--panel);
}
.seo-faq-grid h3 { margin-bottom: 10px; font-size: 18px; }
.seo-faq-grid p { color: var(--text-dim); line-height: 1.65; }
@media (max-width: 700px) {
.seo-faq-grid { grid-template-columns: 1fr; }
}
.studio-demo {
background: var(--panel);
border: 1px solid var(--line);
border-radius: 20px;
padding: 28px;
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}
.demo-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
padding-bottom: 16px;
border-bottom: 1px solid var(--line);
}
.demo-title {
display: flex;
align-items: center;
gap: 10px;
font-family: var(--mono);
font-size: 13px;
}
.demo-title .dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 10px var(--accent-glow);
animation: pulse-rec 1.4s infinite;
}
.demo-meta {
font-family: var(--mono);
font-size: 12px;
color: var(--text-faint);
}
.demo-layout {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 20px;
}
@media (max-width: 900px) {
.demo-layout {
grid-template-columns: 1fr;
}
}
@media (max-width: 640px) {
.studio-demo {
padding: 18px;
border-radius: 16px;
}
.demo-header {
align-items: flex-start;
gap: 12px;
}
.demo-title {
font-size: 11px;
}
.demo-meta {
font-size: 10px;
text-align: right;
}
.demo-steps {
display: grid;
grid-template-columns: 1fr;
}
.step-pill {
width: 100%;
}
}
.demo-video {
aspect-ratio: 16/10;
background: #000;
border-radius: 12px;
border: 1px solid var(--line);
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.demo-video video {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.demo-error-overlay {
position: absolute;
inset: 0;
background: rgba(10, 10, 11, 0.95);
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
text-align: center;
font-family: var(--mono);
font-size: 13px;
color: var(--accent);
z-index: 10;
}
.demo-steps {
display: flex;
gap: 8px;
margin-bottom: 18px;
flex-wrap: wrap;
}
.step-pill {
display: flex;
align-items: center;
gap: 8px;
padding: 7px 14px;
border-radius: 999px;
background: var(--bg-2);
border: 1px solid var(--line);
font-family: var(--mono);
font-size: 12px;
color: var(--text-faint);
transition: all .25s;
}
.step-pill .step-n {
width: 18px;
height: 18px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: var(--panel-2);
font-size: 10px;
color: var(--text-dim);
transition: all .25s;
}
.step-pill.active {
color: var(--text);
border-color: var(--accent);
box-shadow: 0 0 14px var(--accent-glow);
}
.step-pill.active .step-n {
background: var(--accent);
color: #fff;
}
.step-pill.done {
color: var(--ok);
border-color: rgba(61, 220, 151, .35);
}
.step-pill.done .step-n {
background: var(--ok);
color: #0a0a0b;
}
.subtitle-bar {
position: absolute;
bottom: 14px;
left: 14px;
right: 14px;
z-index: 3;
pointer-events: none;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
}
.subtitle-line {
background: rgba(0, 0, 0, 0.72);
backdrop-filter: blur(6px);
border: 1px solid var(--line);
padding: 6px 12px;
border-radius: 8px;
font-family: var(--mono);
font-size: 13px;
color: var(--text-dim);
opacity: 0;
transform: translateY(8px);
transition: opacity .15s ease, transform .15s ease;
text-align: center;
max-width: 90%;
}
.subtitle-line.active {
opacity: 1;
transform: translateY(0);
color: #fff;
border-color: var(--accent);
box-shadow: 0 0 16px var(--accent-glow);
}
.subtitle-line.yours.active {
color: #fff;
background: rgba(255, 45, 85, 0.85);
font-weight: 700;
transform: scale(1.05);
}
.countdown-overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.82);
backdrop-filter: blur(4px);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
z-index: 5;
}
.countdown-num {
font-family: var(--mono);
font-size: 96px;
font-weight: 800;
color: var(--accent);
text-shadow: 0 0 40px var(--accent-glow);
animation: count-pop .7s ease;
}
@keyframes count-pop {
0% {
transform: scale(1.6);
opacity: 0.3;
}
100% {
transform: scale(1);
opacity: 1;
}
}
.countdown-hint {
font-family: var(--mono);
font-size: 13px;
color: var(--text-dim);
letter-spacing: 1px;
text-align: center;
padding: 0 20px;
}
.rec-btn {
width: 80px;
height: 80px;
border-radius: 50%;
background: radial-gradient(circle, var(--accent) 0%, #cc1a3a 100%);
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 0 40px var(--accent-glow), inset 0 0 10px rgba(0, 0, 0, 0.3);
border: 4px solid var(--panel);
transition: filter .2s, transform .1s;
}
.rec-btn:active {
transform: scale(0.95);
}
.rec-btn::after {
content: '';
width: 32px;
height: 32px;
background: #fff;
border-radius: 50%;
transition: all .2s;
}
.rec-btn.mode-listen::after {
width: 0;
height: 0;
background: transparent;
border-radius: 0;
border-left: 24px solid #fff;
border-top: 16px solid transparent;
border-bottom: 16px solid transparent;
margin-left: 8px;
}
.rec-btn.mode-stop::after {
width: 26px;
height: 26px;
border-radius: 6px;
}
.rec-btn.mode-rec {
animation: pulse-rec .9s ease-in-out infinite;
}
@keyframes pulse-rec {
0%,
100% {
box-shadow: 0 0 40px var(--accent-glow), inset 0 0 10px rgba(0, 0, 0, 0.3);
}
50% {
box-shadow: 0 0 60px var(--accent-glow), inset 0 0 10px rgba(0, 0, 0, 0.3);
}
}
.rec-label {
text-align: center;
font-family: var(--mono);
font-size: 11px;
color: var(--accent);
letter-spacing: 2px;
margin-top: 8px;
}
.demo-controls {
background: var(--bg-2);
border-radius: 12px;
padding: 18px;
border: 1px solid var(--line);
display: flex;
flex-direction: column;
gap: 16px;
}
#waveCanvas {
width: 100%;
height: 80px;
background: var(--bg);
border: 1px solid var(--line);
border-radius: 8px;
cursor: pointer;
}
.demo-info {
font-family: var(--mono);
font-size: 11px;
color: var(--text-faint);
display: flex;
justify-content: space-between;
padding-top: 8px;
border-top: 1px solid var(--line);
}
#micStatus {
font-weight: 700;
}
#micStatus.off {
color: var(--text-faint);
}
#micStatus.on {
color: var(--ok);
}
#micStatus.err {
color: var(--accent);
}
.demo-error {
background: rgba(255, 45, 85, 0.1);
border: 1px solid rgba(255, 45, 85, 0.3);
border-radius: 8px;
padding: 10px 12px;
font-size: 12px;
color: var(--text-dim);
line-height: 1.5;
}
.demo-result {
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid var(--line);
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
}
.result-title {
font-size: 16px;
font-weight: 700;
}
.result-actions {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.demo-cta {
border: 1px solid rgba(255, 45, 85, 0.35);
border-radius: 12px;
padding: 16px 20px;
background: linear-gradient(135deg, rgba(255, 45, 85, 0.08) 0%, transparent 100%);
}
.demo-video.is-final {
aspect-ratio: 16/9;
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 20px 60px rgba(255, 45, 85, 0.15);
border-color: var(--accent);
}
.step-controls {
margin-top: 12px;
animation: fadeIn 0.3s ease forwards;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes popup-glow {
0% {
box-shadow: 0 0 60px var(--accent-glow), 0 30px 80px rgba(0, 0, 0, 0.8);
}
100% {
box-shadow: 0 0 100px var(--accent-glow), 0 30px 80px rgba(0, 0, 0, 0.8);
}
}
.modal-body--final {
text-align: center;
padding: 32px 28px 28px;
}
.modal-body--final .modal-form,
.modal-body--final .field,
.modal-body--final .field label,
.modal-body--final .checkbox {
text-align: left;
}
@keyframes bounce {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
}
.final-offer-badge {
display: inline-block;
background: var(--accent);
color: #fff;
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
letter-spacing: 1.5px;
padding: 5px 12px;
border-radius: 6px;
margin-bottom: 16px;
box-shadow: 0 0 20px var(--accent-glow);
animation: pulse-badge 1.5s ease-in-out infinite;
}
@keyframes pulse-badge {
0%,
100% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
}
.final-offer-title {
font-size: 24px;
font-weight: 800;
line-height: 1.2;
margin-bottom: 12px;
letter-spacing: -0.02em;
}
.final-offer-title .accent {
background: linear-gradient(135deg, var(--accent) 0%, #ff6b6b 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 28px;
}
.final-offer-sub {
color: var(--text-dim);
font-size: 14px;
line-height: 1.5;
margin-bottom: 16px;
}
.final-offer-sub strong {
color: var(--text);
}
.final-offer-perks {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 24px;
text-align: left;
}
.final-offer-urgency {
display: flex;
align-items: center;
gap: 12px;
background: rgba(255, 176, 32, 0.1);
border: 1px solid rgba(255, 176, 32, 0.3);
border-radius: 10px;
padding: 14px 18px;
margin-bottom: 24px;
}
.urgency-icon {
font-size: 28px;
}
.urgency-text {
text-align: left;
font-size: 14px;
color: var(--text-dim);
}
.urgency-text strong {
color: var(--warn);
font-size: 15px;
}
.final-offer-alt {
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid var(--line);
}
@media (max-width: 520px) {
.modal-body--final {
padding: 40px 24px 28px;
}
.final-offer-title {
font-size: 26px;
}
.final-offer-title .accent {
font-size: 28px;
}
}
.modal::-webkit-scrollbar {
width: 8px;
}
.modal::-webkit-scrollbar-track {
background: var(--bg-2);
border-radius: 4px;
}
.modal::-webkit-scrollbar-thumb {
background: var(--line);
border-radius: 4px;
transition: background 0.2s;
}
.modal::-webkit-scrollbar-thumb:hover {
background: var(--accent);
}
.modal {
scrollbar-width: thin;
scrollbar-color: var(--line) var(--bg-2);
}
.strike {
text-decoration: line-through;
opacity: 0.6;
font-size: 0.75em;
margin-right: 6px;
vertical-align: middle;
}
.modal--final-offer {
max-width: 480px;
max-height: 88vh;
overflow-y: auto;
background: linear-gradient(135deg, var(--panel) 0%, var(--bg-2) 100%);
border: 2px solid var(--accent);
box-shadow: 0 0 80px var(--accent-glow), 0 30px 80px rgba(0, 0, 0, 0.8);
animation: popup-glow 2s ease-in-out infinite alternate;
}
@media (max-width: 520px) {
.modal--final-offer {
max-height: 95vh;
margin: 10px;
}
.fomo-timer {
font-size: 13px;
padding: 10px 12px;
}
}
#finalResultPopup {
display: flex;
align-items: center;
justify-content: center;
}
#finalResultPopup .modal--final-offer {
max-height: 90vh;
margin: auto;
}
.carousel-wrapper {
--arc-r: 400;
--arc-spread-deg: 20;
--card-w: 320px;
--card-h: 440px;
max-width: 100%;
}
.arcade-carousel {
position: relative;
width: 100%;
height: 560px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
user-select: none;
}
.carousel-stage {
position: relative;
width: var(--card-w);
height: var(--card-h);
}
.carousel-item {
position: absolute;
inset: 0;
width: var(--card-w);
height: var(--card-h);
border-radius: 16px;
overflow: hidden;
background: var(--panel);
border: 2px solid var(--line);
cursor: pointer;
transition:
transform 0.6s cubic-bezier(0.4, 0, 0.2, 1),
opacity 0.5s ease,
border-color 0.4s ease,
box-shadow 0.4s ease;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
backface-visibility: hidden;
opacity: 0.7;
}
.carousel-item video {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
pointer-events: none;
}
.carousel-item-content {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 24px;
background: linear-gradient(to top,
rgba(0, 0, 0, 0.95) 0%,
rgba(0, 0, 0, 0.6) 50%,
transparent 100%);
color: #fff;
}
.carousel-item-title {
font-size: 20px;
font-weight: 700;
margin-bottom: 8px;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}
.carousel-item-meta {
font-family: var(--mono);
font-size: 13px;
color: var(--text-dim);
display: flex;
gap: 14px;
}
.carousel-item-badge {
position: absolute;
top: 16px;
right: 16px;
background: var(--accent);
color: #fff;
font-family: var(--mono);
font-size: 12px;
font-weight: 700;
padding: 5px 12px;
border-radius: 6px;
letter-spacing: 0.5px;
box-shadow: 0 0 20px var(--accent-glow);
}
.carousel-item.far {
opacity: 0.4;
}
.carousel-item.active {
opacity: 1;
z-index: 100 !important;
border-color: var(--accent);
box-shadow:
0 30px 80px rgba(0, 0, 0, 0.6),
0 0 0 3px rgba(255, 45, 85, 0.3),
0 0 60px var(--accent-glow);
}
.carousel-item:hover:not(.active) {
opacity: 0.9;
border-color: var(--text-faint);
z-index: 50 !important;
}
.carousel-indicators {
display: flex;
flex-direction: column;
gap: 8px;
position: absolute;
right: -40px;
top: 50%;
transform: translateY(-50%);
z-index: 20;
}
.indicator {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--line);
cursor: pointer;
transition: all 0.3s ease;
border: none;
padding: 0;
}
.indicator.active {
background: var(--accent);
height: 24px;
border-radius: 4px;
box-shadow: 0 0 12px var(--accent-glow);
}
.indicator:hover:not(.active) {
background: var(--text-faint);
transform: scale(1.3);
}
.carousel-nav {
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--panel);
border: 2px solid var(--line);
color: var(--text);
font-size: 18px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
z-index: 150;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
font-family: var(--sans);
}
.carousel-nav:hover {
background: var(--accent);
border-color: var(--accent);
box-shadow: 0 8px 32px var(--accent-glow);
}
.carousel-nav:active {
transform: translateX(-50%) scale(0.95);
}
.carousel-nav--prev {
top: 0;
}
.carousel-nav--next {
bottom: 0;
}
.carousel-hint {
position: absolute;
top: -40px;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
gap: 8px;
background: var(--panel);
border: 1px solid var(--line);
padding: 6px 14px;
border-radius: 999px;
font-family: var(--mono);
font-size: 11px;
color: var(--text-dim);
z-index: 15;
white-space: nowrap;
animation: hint-pulse 3s ease-in-out infinite;
}
.carousel-sound-btn {
position: absolute;
top: -40px;
right: 0;
z-index: 15;
}
@media (max-width: 640px) {
.carousel-sound-btn {
width: 38px;
height: 38px;
font-size: 18px;
top: -35px;
}
}
@keyframes hint-pulse {
0%,
100% {
opacity: 0.7;
}
50% {
opacity: 1;
}
}
@media (max-width: 900px) {
.arcade-carousel {
height: 460px;
}
.carousel-indicators {
right: -30px;
}
.carousel-wrapper {
--arc-r: 300;
--arc-spread-deg: 24;
--card-w: 260px;
--card-h: 360px;
}
}
@media (max-width: 640px) {
.carousel-wrapper {
--arc-r: 240;
--arc-spread-deg: 28;
--card-w: 220px;
--card-h: 310px;
overflow: clip;
}
.arcade-carousel {
height: 400px;
}
.carousel-item-title {
font-size: 17px;
}
.carousel-item-content {
padding: 18px;
}
.carousel-hint {
font-size: 10px;
padding: 5px 10px;
top: -35px;
}
.carousel-indicators {
right: 8px;
}
.carousel-sound-btn {
right: 18px;
}
}
.dubs-section {
--card-w: 320px;
--card-h: 568px;
--card-gap: 24px;
padding: 60px 0;
width: 100%;
overflow: clip;
}
.global-counter {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 20px;
border-radius: 999px;
background: var(--panel);
border: 1px solid var(--line);
font-family: var(--mono);
font-size: 14px;
color: var(--text-dim);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
margin-top: 20px;
}
.counter-icon,
.sound-icon {
color: var(--accent);
}
.counter-icon svg,
.sound-icon svg {
width: 18px;
height: 18px;
display: block;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.sound-icon svg {
width: 20px;
height: 20px;
}
.counter-text strong {
color: var(--accent);
font-weight: 700;
font-size: 16px;
}
.dubs-carousel-wrapper {
position: relative;
padding: 0 60px 100px;
display: flex;
flex-direction: column;
align-items: center;
}
.dubs-carousel {
overflow: visible;
position: relative;
width: 100%;
height: calc(var(--card-h, 568px) + 100px);
display: flex;
align-items: center;
}
.dubs-track {
display: flex;
gap: var(--card-gap, 24px);
transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
height: 100%;
align-items: center;
}
.dubs-track.is-animating {
will-change: transform;
}
.dub-card {
flex: 0 0 var(--card-w, 320px);
height: var(--card-h, 568px);
border-radius: 20px;
overflow: visible;
cursor: pointer;
position: relative;
transform-origin: center center;
transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.6s ease, box-shadow 0.4s ease;
}
.dub-card.neighbor {
transform: scale(0.75);
opacity: 0.7;
}
.dub-card.far {
transform: scale(0.55);
opacity: 0.3;
pointer-events: none;
}
.dub-card.active {
transform: scale(1);
opacity: 1;
box-shadow: 0 24px 54px rgba(0, 0, 0, .64), 0 0 0 2px rgba(255, 255, 255, .08), 0 0 36px var(--accent-glow);
z-index: 10;
}
.dub-card-media {
position: relative;
width: 100%;
height: 100%;
border-radius: 20px;
overflow: hidden;
background: #000;
}
.dub-card-media video {
position: relative;
z-index: 1;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.dub-card-media .placeholder {
position: absolute;
inset: 0;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
color: var(--text-faint);
font-family: var(--mono);
font-size: 11px;
text-align: center;
pointer-events: none;
transition: opacity 0.4s ease;
}
.dub-card-media.video-loaded .placeholder {
opacity: 0;
}
.dub-overlay-gradient {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 70%;
background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.7) 30%, rgba(0, 0, 0, 0.3) 60%, transparent 100%);
z-index: 2;
pointer-events: none;
}
.dub-card-topbar {
position: absolute;
top: 14px;
left: 12px;
right: 12px;
z-index: 5;
display: flex;
align-items: center;
gap: 6px;
min-width: 0;
}
.dub-card-badge {
flex: 0 0 auto;
background: rgba(0, 0, 0, 0.6);
color: #fff;
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
padding: 5px 7px;
border-radius: 6px;
letter-spacing: 0.5px;
border: 1px solid rgba(255, 255, 255, 0.1);
white-space: nowrap;
}
.dub-card-badge.top {
color: var(--accent);
border-color: rgba(255, 45, 85, 0.4);
box-shadow: 0 0 12px rgba(255, 45, 85, 0.2);
}
.dub-card-badge.viral {
color: var(--warn);
border-color: rgba(255, 176, 32, 0.4);
box-shadow: 0 0 12px rgba(255, 176, 32, 0.2);
}
.dub-card-badge.new {
color: var(--ok);
border-color: rgba(61, 220, 151, 0.4);
box-shadow: 0 0 12px rgba(61, 220, 151, 0.2);
}
.card-metrics {
margin-left: auto;
display: flex;
justify-content: flex-end;
gap: 5px;
min-width: 0;
}
.card-total-views {
background: rgba(0, 0, 0, 0.72);
border: 1px solid rgba(255, 255, 255, 0.1);
color: #fff;
font-family: var(--mono);
font-size: 11px;
font-weight: 600;
padding: 5px 6px;
border-radius: 8px;
display: flex;
align-items: center;
gap: 5px;
min-width: 0;
white-space: nowrap;
}
.card-dubs-count {
background: rgba(41, 14, 22, 0.86);
border: 1px solid rgba(255, 45, 85, 0.3);
color: var(--accent);
font-family: var(--mono);
font-size: 11px;
font-weight: 600;
padding: 5px 6px;
border-radius: 8px;
display: flex;
align-items: center;
gap: 5px;
min-width: 0;
white-space: nowrap;
}
.dub-ui-icon {
width: 15px;
height: 15px;
flex: 0 0 15px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.dub-card-actions {
position: absolute;
right: 12px;
bottom: 110px;
display: flex;
flex-direction: column;
gap: 14px;
z-index: 6;
opacity: 0;
transform: translateX(10px);
transition: opacity 0.4s ease, transform 0.4s ease;
pointer-events: none;
}
.dub-card.active .dub-card-actions {
opacity: 1;
transform: translateX(0);
pointer-events: auto;
}
.action-btn {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
background: rgba(0, 0, 0, 0.5);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 50%;
width: 48px;
height: 48px;
cursor: pointer;
transition: all 0.2s ease;
}
.action-btn:hover {
background: rgba(255, 255, 255, 0.15);
transform: scale(1.1);
border-color: rgba(255, 255, 255, 0.3);
}
.action-btn:active {
transform: scale(0.95);
}
.action-btn > .dub-ui-icon {
width: 21px;
height: 21px;
flex-basis: 21px;
}
.action-count {
font-family: var(--mono);
font-size: 11px;
font-weight: 600;
color: #fff;
margin-top: 2px;
}
.dub-activity-toast {
position: absolute;
bottom: 75px;
left: 16px;
right: 80px;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 10px;
padding: 8px 12px;
display: flex;
align-items: center;
gap: 8px;
z-index: 5;
opacity: 0;
transform: translateY(10px);
transition: opacity 0.4s ease, transform 0.4s ease;
pointer-events: none;
}
.dub-activity-toast.visible {
opacity: 1;
transform: translateY(0);
}
.dub-activity-toast .toast-icon {
display: inline-flex;
color: var(--accent);
}
.dub-activity-toast .toast-text {
font-family: var(--sans);
font-size: 12px;
color: #fff;
line-height: 1.3;
}
.dub-activity-toast .toast-text strong {
color: var(--ok);
font-weight: 600;
}
.dub-card-author {
position: absolute;
bottom: 16px;
left: 16px;
right: 80px;
display: flex;
align-items: flex-start;
gap: 12px;
z-index: 5;
opacity: 0;
transform: translateY(10px);
transition: opacity 0.4s ease, transform 0.4s ease;
}
.dub-card.active .dub-card-author {
opacity: 1;
transform: translateY(0);
}
.dub-card-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--bg-2);
border: 2px solid #fff;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
overflow: hidden;
}
.dub-card-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.dub-card-author-info {
flex: 1;
min-width: 0;
}
.dub-card-author-name {
font-size: 15px;
font-weight: 700;
color: #fff;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}
.dub-metrics-row {
display: flex;
align-items: center;
gap: 6px;
font-family: var(--mono);
font-size: 12px;
color: rgba(255, 255, 255, 0.75);
margin-top: 4px;
flex-wrap: wrap;
}
.dub-metrics-row .metric {
display: inline-flex;
align-items: center;
gap: 4px;
}
.dub-metrics-row .metric b {
color: #fff;
font-weight: 600;
}
.dub-metrics-row .metric-sep {
color: rgba(255, 255, 255, 0.3);
font-size: 10px;
}
.yt-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 14px;
height: 10px;
background: #ff0000;
border-radius: 2px;
position: relative;
flex-shrink: 0;
}
.yt-icon::after {
content: '';
border-left: 5px solid #fff;
border-top: 3px solid transparent;
border-bottom: 3px solid transparent;
margin-left: 1px;
}
.dub-main-cta {
position: absolute;
bottom: -70px;
left: 50%;
transform: translateX(-50%) scale(0.95);
width: 100%;
background: var(--accent);
color: #fff;
border: none;
border-radius: 14px;
padding: 14px 10px;
font-family: var(--sans);
box-sizing: border-box;
overflow: hidden;
font-size: clamp(8px, calc(var(--card-w, 320px) / 24), 15px);
font-weight: 800;
letter-spacing: 0.5px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 7px;
box-shadow: 0 10px 40px var(--accent-glow);
opacity: 0;
pointer-events: none;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 20;
white-space: normal;
}
.dub-card.active .dub-main-cta {
opacity: 1;
pointer-events: auto;
transform: translateX(-50%) scale(1);
}
.dub-main-cta:hover {
background: #ff4770;
transform: translateX(-50%) scale(1.03);
box-shadow: 0 15px 50px var(--accent-glow);
}
.dub-main-cta:active {
transform: translateX(-50%) scale(0.98);
}
.dub-main-cta .cta-icon {
width: 20px;
height: 20px;
flex: 0 0 20px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.dub-main-cta .cta-icon svg {
display: block;
width: 100%;
height: 100%;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.dub-main-cta .cta-text {
min-width: 0;
white-space: nowrap;
}
.dubs-sound-btn {
position: absolute;
top: -50px;
right: 0;
z-index: 25;
}
.dubs-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 48px;
height: 48px;
border-radius: 50%;
background: var(--panel);
border: 2px solid var(--line);
color: var(--text);
font-size: 20px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
z-index: 20;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.dubs-nav:hover {
background: var(--accent);
border-color: var(--accent);
box-shadow: 0 8px 32px var(--accent-glow);
}
.dubs-nav:active {
transform: translateY(-50%) scale(0.95);
}
.dubs-nav--prev {
left: 0;
}
.dubs-nav--next {
right: 0;
}
.dubs-nav:disabled {
opacity: 0.3;
cursor: not-allowed;
pointer-events: none;
}
.dubs-indicators {
display: flex;
justify-content: center;
gap: 8px;
margin-top: 40px;
}
.dubs-indicator {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--line);
cursor: pointer;
transition: all 0.3s ease;
border: none;
padding: 0;
}
.dubs-indicator.active {
background: var(--accent);
width: 24px;
border-radius: 4px;
box-shadow: 0 0 12px var(--accent-glow);
}
.dubs-indicator:hover:not(.active) {
background: var(--text-faint);
transform: scale(1.3);
}
.field-error {
display: none;
font-size: 12px;
color: var(--accent);
margin-top: 4px;
font-family: var(--mono);
letter-spacing: 0.3px;
}
.field-error.visible {
display: block;
animation: shake 0.3s ease;
}
@keyframes shake {
0%,
100% {
transform: translateX(0);
}
25% {
transform: translateX(-4px);
}
75% {
transform: translateX(4px);
}
}
.field input.invalid {
border-color: var(--accent);
background: rgba(255, 45, 85, 0.05);
}
.inline-link {
color: var(--accent);
text-decoration: none;
border-bottom: 1px dashed rgba(255, 45, 85, 0.4);
transition: border-color 0.2s;
}
.inline-link:hover {
border-bottom-color: var(--accent);
}
.field--row {
margin-top: 2px;
}
@media (max-width: 900px) {
.dubs-section {
--card-w: 260px;
--card-h: 462px;
}
.dubs-carousel-wrapper {
padding: 0 50px 90px;
}
.dubs-nav {
width: 40px;
height: 40px;
font-size: 18px;
}
}
@media (max-width: 640px) {
.dubs-section {
--card-w: 240px;
--card-h: 426px;
--card-gap: 16px;
}
.dubs-carousel-wrapper {
width: 100%;
padding: 0 24px 80px;
}
.dub-card.neighbor {
transform: scale(0.65);
}
.dub-card.far {
visibility: hidden;
}
.dub-card-topbar {
top: 10px;
left: 10px;
right: 10px;
gap: 4px;
}
.dub-card-badge {
padding: 5px 7px;
font-size: 9px;
}
.card-metrics {
gap: 4px;
}
.card-dubs-count,
.card-total-views {
padding: 5px 7px;
gap: 4px;
font-size: 10px;
}
.card-dubs-count .dub-ui-icon,
.card-total-views .dub-ui-icon {
width: 12px;
height: 12px;
flex-basis: 12px;
}
.dub-card-actions {
gap: 12px;
bottom: 100px;
}
.action-btn {
width: 44px;
height: 44px;
}
.action-btn > .dub-ui-icon {
width: 19px;
height: 19px;
flex-basis: 19px;
}
.action-count {
font-size: 10px;
}
.dub-activity-toast {
bottom: 65px;
right: 70px;
}
.dub-card-author {
bottom: 12px;
left: 12px;
}
.dub-card-avatar {
width: 36px;
height: 36px;
font-size: 16px;
}
.dub-card-author-name {
font-size: 14px;
}
.dub-metrics-row {
font-size: 11px;
}
.dub-main-cta {
bottom: -60px;
width: 100%;
min-height: 50px;
gap: 6px;
padding: 12px 10px;
font-size: 12px;
white-space: normal;
text-align: center;
}
.dub-main-cta .cta-icon {
width: 18px;
height: 18px;
flex-basis: 18px;
}
.dubs-sound-btn {
top: -45px;
width: 40px;
height: 40px;
font-size: 18px;
}
}
.privacy-consent {
position: fixed;
z-index: 10000;
right: clamp(12px, 2vw, 24px);
bottom: clamp(12px, 2vw, 24px);
left: clamp(12px, 2vw, 24px);
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: clamp(14px, 2vw, 24px);
max-width: 1120px;
margin: auto;
padding: clamp(13px, 1.35vw, 20px) clamp(14px, 1.5vw, 22px);
border: 1px solid #4b4b51;
border-radius: 12px;
color: #f4f4f5;
background: rgba(17, 17, 19, .98);
box-shadow: 0 24px 80px rgba(0, 0, 0, .6), 5px 5px 0 #ff345f;
font-family: Inter, Arial, sans-serif;
animation: privacy-consent-enter .18s cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes privacy-consent-enter {
from { opacity: 0; transform: translate3d(0, 12px, 0); }
to { opacity: 1; transform: translate3d(0, 0, 0); }
}
.privacy-consent[hidden] { display: none; }
.privacy-consent strong { display: block; margin-bottom: 7px; font-size: 15px; }
.privacy-consent p { max-width: 720px; margin: 0; color: #b5b5bb; font-size: 13px; line-height: 1.6; }
.privacy-consent a { color: #fff; text-decoration: underline; }
.privacy-consent__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.privacy-consent button {
min-height: 44px;
padding: 0 17px;
border: 1px solid #55555c;
border-radius: 8px;
color: #fff;
background: transparent;
font: 700 12px/1 Inter, Arial, sans-serif;
cursor: pointer;
}
.privacy-consent button:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.privacy-consent .privacy-consent__accept { border-color: #ff345f; background: #ff345f; }
.privacy-settings-button { border: 0; padding: 0; color: inherit; background: none; font: inherit; cursor: pointer; }
.privacy-settings-button:hover, .privacy-settings-button:focus-visible { color: #fff; text-decoration: underline; }
body:has(.privacy-consent:not([hidden])) { padding-bottom: clamp(96px, 12svh, 132px); }
@media (max-height: 800px) {
.privacy-consent { gap: 14px; padding-block: 11px; }
.privacy-consent strong { margin-bottom: 4px; font-size: 13px; }
.privacy-consent p { font-size: 11px; line-height: 1.45; }
.privacy-consent button { min-height: 44px; padding-inline: 13px; font-size: 11px; }
}
@media (max-width: 720px) {
body:has(.privacy-consent:not([hidden])) { padding-bottom: min(220px, 32svh); }
.privacy-consent { right: 10px; bottom: 10px; left: 10px; grid-template-columns: 1fr; gap: 11px; max-height: calc(100svh - 20px); overflow-y: auto; padding: 14px; }
.privacy-consent__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.privacy-consent button { width: 100%; }
}
:root {
--bg: #111114;
--bg-2: #151519;
--bg-3: #19191d;
--panel: #19191d;
--panel-2: #222227;
--line: #333339;
--text: #eeeef0;
--text-dim: #a6a6af;
--text-faint: #6f6f78;
--accent: #ed4868;
--accent-glow: rgba(237, 72, 104, .18);
--ok: #a6bdb0;
--warn: #dcc18a;
--blue: #a7b9c4;
--landing-header-height: clamp(70px, 5.4vw, 96px);
}
html { background: var(--bg); }
html { scroll-padding-top: var(--landing-header-height); }
body {
min-height: 100vh;
background:
radial-gradient(circle at 76% 12%, rgba(237, 72, 104, .045), transparent 28rem),
linear-gradient(180deg, #111114 0%, #101013 100%);
color: var(--text);
}
body::before {
background-image:
linear-gradient(rgba(255, 255, 255, .018) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, .018) 1px, transparent 1px);
background-size: 120px 120px;
}
body::after {
content: "REC / CASTING";
position: fixed;
z-index: 0;
right: -42px;
bottom: 110px;
color: rgba(237, 72, 104, .18);
font: 8px var(--mono);
letter-spacing: 4px;
transform: rotate(-90deg);
pointer-events: none;
}
.container {
width: min(2080px, calc(100% - clamp(44px, 10vw, 256px)));
max-width: 2080px;
padding-inline: 0;
}
.site-nav {
height: var(--landing-header-height);
background: rgba(17, 17, 20, .96);
border-color: var(--line);
backdrop-filter: none;
}
.nav-inner {
height: 100%;
min-height: 0;
justify-content: flex-start;
gap: clamp(16px, 1.8vw, 36px);
padding-block: 0;
}
.logo {
gap: 10px;
font-family: var(--sans);
font-size: clamp(21px, 1.6vw, 32px);
font-weight: 800;
letter-spacing: -1.5px;
}
.logo-mark {
width: 9px;
height: 9px;
flex: 0 0 9px;
border-radius: 50%;
background: var(--accent);
box-shadow: none;
animation: none;
}
.logo-text span, .accent { color: var(--accent); }
.nav-links {
gap: clamp(20px, 2.1vw, 42px);
margin-left: auto;
font-size: clamp(12px, .8vw, 16px);
}
.nav-actions { margin-left: clamp(12px, 1.45vw, 28px); }
.nav-login {
min-height: 40px;
display: inline-flex;
align-items: center;
font-size: 11px;
}
.btn {
min-height: 44px;
padding: 11px 18px;
border-radius: 2px;
font-size: 11px;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
box-shadow: none;
}
.btn-primary, .btn-primary:hover {
border-color: var(--accent);
background: var(--accent);
color: #1a0f13;
box-shadow: none;
}
.btn-primary:hover { background: #f35c78; transform: translateY(-1px); }
.btn-ghost {
border-color: #505057;
background: #17171b;
color: var(--text);
}
.btn-ghost:hover { border-color: var(--accent); background: #1d1d22; }
.hero {
min-height: calc(100svh - var(--landing-header-height) - 62px);
display: grid;
align-items: center;
padding: 20px 0;
border-bottom: 1px solid var(--line);
}
.hero-grid {
position: relative;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(24px, 3vw, 60px);
min-height: calc(100svh - var(--landing-header-height) - 62px - 40px);
align-items: center;
}
.hero-grid > div:first-child {
min-width: 0;
}
.badge {
position: absolute;
top: 10px;
left: 0;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
color: #b9b9c0;
font-size: 9px;
font-weight: 800;
letter-spacing: 1.7px;
}
.badge .dot, .demo-title .dot {
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--accent);
box-shadow: none;
animation: none;
}
.hero h1 {
max-width: 13.5em;
margin-bottom: 30px;
font-size: clamp(42px, min(3.9vw, 7.5svh), 84px);
font-weight: 800;
line-height: .98;
letter-spacing: -.065em;
}
.landing-title-line {
display: block;
width: fit-content;
max-width: 100%;
transform-origin: left center;
}
.landing-title-accent {
position: relative;
padding-bottom: .13em;
color: var(--accent);
}
.landing-title-accent-word { color: var(--accent); }
.landing-title-underline {
position: absolute;
left: 1%;
bottom: 0;
width: 98%;
height: .22em;
overflow: visible;
fill: none;
stroke: var(--accent);
stroke-width: 3;
}
.landing-title-outline {
color: #e9e4d8;
-webkit-text-fill-color: transparent;
-webkit-text-stroke: 1.2px #e9e4d8;
font-size: .86em;
letter-spacing: -.055em;
}
.hero p.lead {
max-width: 42ch;
color: #c2c0c8;
font-size: clamp(14px, 1vw, 22px);
line-height: 1.75;
}
.hero-ctas { gap: 19px 23px; }
.hero .btn { min-height: 57px; padding-inline: 23px; font-size: clamp(12px, .8vw, 16px); }
.carousel-wrapper {
width: min(100%, 720px);
justify-self: center;
--card-w: min(100%, clamp(460px, 36vw, 560px));
--card-h: clamp(440px, 31vw, 520px);
}
.arcade-carousel { height: clamp(470px, 66svh, 700px); }
.carousel-item, .carousel-item.active {
border-width: 1px;
border-radius: 2px;
box-shadow: 0 22px 54px rgba(0, 0, 0, .55);
}
.carousel-item.active {
border-color: var(--accent);
box-shadow: 0 0 0 1px rgba(237, 72, 104, .28), 0 26px 65px rgba(0, 0, 0, .62);
}
.carousel-item-badge, .carousel-hint, .carousel-nav,
.indicator, .indicator.active { border-radius: 2px; }
.carousel-item-badge, .carousel-nav { box-shadow: none; }
.carousel-nav { border-width: 1px; }
.landing-voice-tape {
position: relative;
z-index: 2;
width: 100%;
padding-block: 17px;
overflow: hidden;
contain: paint;
background: var(--accent);
color: #181116;
}
.landing-voice-tape-track {
display: flex;
width: max-content;
}
.landing-voice-tape-copy {
display: flex;
flex: none;
align-items: center;
gap: clamp(28px, 3vw, 48px);
padding-right: clamp(28px, 3vw, 48px);
}
.landing-voice-tape-copy span {
font-size: clamp(14px, 1.35vw, 20px);
font-weight: 800;
font-style: italic;
letter-spacing: -.04em;
white-space: nowrap;
}
.landing-voice-tape-copy i {
width: 8px;
height: 8px;
flex: 0 0 8px;
border-radius: 50%;
background: #181116;
}
section { padding: 88px 0; }
.section-head {
max-width: 900px;
margin: 0 0 38px;
text-align: left;
}
.dubs-section .section-head,
.dubs-section .section-title {
max-width: none;
}
.dubs-section .section-sub {
max-width: 72ch;
}
.section-tag, .legal-kicker {
display: inline-flex;
align-items: center;
gap: 9px;
margin-bottom: 13px;
color: var(--accent);
font-size: 9px;
font-weight: 800;
letter-spacing: 1.8px;
}
.section-tag::before, .legal-kicker::before {
content: "";
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--accent);
}
.section-title {
max-width: 880px;
margin-bottom: 12px;
font-size: clamp(34px, 4.1vw, 58px);
line-height: 1;
letter-spacing: -.055em;
}
.section-sub {
max-width: 680px;
color: var(--text-dim);
font-size: 13px;
line-height: 1.7;
}
.steps {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
margin-bottom: 0;
}
.step, .pain-card, .seo-faq-grid article {
min-height: 190px;
padding: 22px;
border-radius: 2px;
border-color: var(--line);
background: rgba(25, 25, 29, .86);
box-shadow: none;
}
.step { display: block; }
.step:hover, .pain-card:hover { transform: translateY(-2px); border-color: #55545b; }
.step-num {
margin-bottom: 40px;
color: var(--accent);
font-size: 18px;
text-shadow: none;
}
.step h3, .seo-faq-grid h3 { font-size: 16px; }
.step p, .seo-faq-grid p { font-size: 12px; line-height: 1.65; }
#demo-section, .faq-section, .dubs-section { border-top: 1px solid var(--line); }
.studio-demo {
padding: 16px;
border-radius: 2px;
background: #18181c;
box-shadow: 0 28px 80px rgba(0, 0, 0, .4);
}
.demo-header { min-height: 44px; margin-bottom: 14px; padding: 0 4px 12px; }
.demo-title, .demo-meta, .demo-info, .rec-label { font-size: 9px; letter-spacing: 1px; }
.demo-steps { gap: 5px; }
.step-pill, .step-pill .step-n, .subtitle-line, .demo-video,
.landing-yandex-consent { border-radius: 2px; }
.step-pill {
min-height: 36px;
padding: 7px 11px;
background: #131317;
font-size: 10px;
}
.step-pill.active { box-shadow: none; }
.demo-layout {
grid-template-columns: minmax(0, 1.3fr) minmax(280px, .7fr);
gap: 14px;
}
.demo-controls { border-radius: 2px; background: #141418; }
.global-counter {
margin-top: 18px;
padding: 8px 12px;
border-radius: 2px;
background: #18181c;
box-shadow: none;
font-size: 11px;
}
.counter-text strong { font-size: inherit; }
.dubs-section { padding: 88px 0; }
@media (min-width: 901px) {
#demo-section,
.dubs-section {
min-height: calc(100svh - var(--landing-header-height));
display: grid;
grid-template-columns: minmax(0, 1fr);
align-items: center;
padding-block: clamp(28px, 4svh, 60px);
}
#demo-section > .container,
.dubs-section > .container {
min-width: 0;
justify-self: center;
}
#demo-section .section-head,
.dubs-section .section-head {
margin-bottom: clamp(18px, 2.8svh, 38px);
}
.dubs-section {
--card-h: clamp(330px, 50svh, 568px);
--card-w: calc(var(--card-h) * .5634);
}
.dubs-carousel {
height: calc(var(--card-h) + clamp(52px, 7svh, 82px));
}
.dubs-carousel-wrapper {
padding-bottom: clamp(56px, 8svh, 92px);
}
}
@media (min-width: 901px) and (max-height: 1100px) {
#demo-section .demo-video,
#demo-section .demo-controls {
height: clamp(360px, 55svh, 620px);
}
#demo-section .demo-video { aspect-ratio: auto; }
#demo-section .studio-demo { padding: 12px; }
#demo-section .demo-header { min-height: 34px; margin-bottom: 9px; padding-bottom: 8px; }
#demo-section .demo-steps { margin-bottom: 10px; }
#demo-section .section-title { font-size: clamp(34px, 3.2vw, 48px); }
#demo-section .section-sub { line-height: 1.45; }
}
@media (min-width: 901px) and (max-height: 800px) {
#demo-section .demo-video,
#demo-section .demo-controls {
height: clamp(330px, 50svh, 390px);
}
}
@media (min-width: 901px) and (max-height: 1000px) {
.dubs-section {
--card-h: clamp(300px, 42svh, 400px);
padding-block: 20px;
}
.dubs-section .section-head { margin-bottom: 8px; }
.dubs-section .section-title { max-width: none; font-size: clamp(34px, 3.2vw, 42px); }
.dubs-section .global-counter { margin-top: 8px; }
.dubs-section .dubs-carousel { height: calc(var(--card-h) + 30px); }
.dubs-section .dubs-carousel-wrapper { padding-bottom: 58px; }
}
.dub-card, .dub-card-media, .dub-card-badge, .card-total-views,
.card-dubs-count, .dub-main-cta, .dub-activity-toast { border-radius: 2px; }
.dub-card.active {
box-shadow: 0 0 0 1px rgba(237, 72, 104, .42), 0 30px 75px rgba(0, 0, 0, .6);
}
.dubs-nav { border-radius: 2px; box-shadow: none; }
.seo-faq-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
}
.offer-wrap, .bonus-wrap {
padding: clamp(42px, 6vw, 76px);
border-radius: 2px;
border-color: #e9e4d8;
background: #e9e4d8;
color: #171519;
text-align: left;
}
.offer-wrap::before, .bonus-wrap::before { display: none; }
.offer-wrap h2, .bonus-title {
max-width: 850px;
font-size: clamp(34px, 4.7vw, 64px);
line-height: 1.02;
letter-spacing: -.055em;
}
.offer-wrap p, .offer-wrap .hero-meta, .bonus-text, .bonus-meta {
color: #555058 !important;
}
.offer-price { justify-content: flex-start; }
.offer-price .new {
color: #ff829a;
text-shadow: 0 0 24px rgba(237, 72, 104, .24);
}
.site-footer, .legal-footer {
border-top: 1px solid var(--line);
background: #0f0f12;
}
.site-footer { padding: 0; }
.footer-inner {
min-height: 110px;
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 24px;
padding-block: 18px;
}
.footer-brand {
max-width: none;
display: inline-flex;
align-items: center;
gap: 11px;
color: var(--text);
text-decoration: none;
}
.footer-record {
width: 9px;
height: 9px;
flex: 0 0 9px;
border-radius: 50%;
background: var(--accent);
}
.footer-logo { font: 800 21px/1 var(--sans); letter-spacing: -1px; }
.footer-links {
margin-left: auto;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 4px clamp(14px, 1.2vw, 23px);
font-size: 10px;
}
.footer-links a,
.privacy-settings-button {
min-height: 44px;
display: inline-flex;
align-items: center;
}
.footer-legal {
color: var(--text-faint);
font: 9px/1.55 var(--sans);
white-space: nowrap;
}
@media (max-width: 1320px) {
.footer-inner { grid-template-columns: auto minmax(0, 1fr); gap: 4px 24px; }
.footer-links { grid-column: 1 / -1; grid-row: 2; width: 100%; margin: 0; justify-content: flex-start; }
.footer-legal { grid-column: 2; grid-row: 1; justify-self: end; }
}
.modal-overlay {
background:
radial-gradient(circle at 50% 45%, rgba(34, 24, 29, .45), transparent 42rem),
rgba(7, 7, 9, .94);
}
.seo-faq, #offer {
content-visibility: auto;
contain-intrinsic-size: auto 760px;
}
.modal, .landing-auth-modal {
border-radius: 2px;
border-color: #3f3f46;
background: #19191d;
box-shadow: 0 18px 48px rgba(0, 0, 0, .62);
}
.landing-auth-brand {
font-family: var(--sans);
font-size: 24px;
font-weight: 800;
letter-spacing: -.8px;
}
.landing-auth-brand i { width: 9px; height: 9px; box-shadow: none; }
.field input[type="text"], .field input[type="email"],
.field input[type="password"] {
min-height: 48px;
border-radius: 2px;
background: #111115;
}
.landing-yandex-button, .landing-auth-error, .modal-close { border-radius: 2px; }
.privacy-banner, .privacy-panel, .legal-card, .price-card,
.price-card__for, .hero-pricing-note, .faq-item, .faq-icon,
.founder-seats, .plan-summary { border-radius: 2px; }
.privacy-banner, .privacy-panel, .legal-card, .price-card, .faq-item {
background: #19191d;
box-shadow: none;
}
.pricing-hero { padding-block: 58px 28px; }
.hero-pricing-note { background: #19191d; }
.pricing-grid { gap: 12px; }
.price-card { padding: 24px; }
.price-card:hover { transform: translateY(-2px); }
.price-card--featured, .price-card--founder, .bonus-wrap { background-image: none; }
.price-card--featured {
border-color: var(--accent);
box-shadow: 0 0 0 1px rgba(237, 72, 104, .22);
}
.price-card__ribbon, .founder-tag { border-radius: 2px; }
.price-card__price .price-value, .price-card--featured .price-value {
background: none;
color: var(--text);
-webkit-text-fill-color: currentColor;
}
.price-card--featured .price-value { color: var(--accent); }
.faq-section { background: #131317; }
.faq-item.open { border-color: var(--accent); }
.legal-shell { padding-block: clamp(38px, 6vw, 84px); }
.legal-card { border-color: var(--line); }
@media (min-width: 981px) and (max-height: 1050px) {
.pricing-hero { padding: clamp(8px, 1.2svh, 18px) 0 4px; }
.pricing-hero .back-link { margin-bottom: 8px; }
.pricing-hero .section-head { margin-bottom: 0 !important; }
.pricing-hero .section-tag { margin-bottom: 8px; }
.pricing-hero .section-title { margin-bottom: 6px; font-size: clamp(38px, 3.2vw, 48px); }
.pricing-hero .section-sub { max-width: 780px; font-size: 14px; line-height: 1.5; }
.pricing-hero .hero-pricing-note { margin-top: 6px; padding-block: 5px; }
.pricing-section { padding: 0 0 32px; }
.pricing-grid { gap: 12px; }
.price-card { padding: 14px 18px; }
.price-card__icon { margin-bottom: 5px; font-size: 26px; }
.price-card__name { margin-bottom: 8px; font-size: 20px; }
.price-value { font-size: 38px; }
.price-currency { font-size: 20px; }
.price-card__period { margin-bottom: 10px; font-size: 10px; }
.price-card__desc { margin-bottom: 10px; font-size: 13px; line-height: 1.4; }
.price-card__features { gap: 5px; margin-bottom: 10px; }
.price-card__features li { gap: 7px; font-size: 12px; line-height: 1.3; }
.price-card__for { margin-bottom: 10px; padding: 9px 11px; font-size: 11px; line-height: 1.4; }
.price-card__for strong { margin-bottom: 2px; font-size: 10px; }
.price-card__footnote { margin-bottom: 8px; }
.founder-seats { margin-bottom: 9px; }
.price-card__btn { min-height: 42px; }
}
@media (max-width: 1040px) {
.steps, .seo-faq-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
.hero { min-height: auto; }
.hero-grid, .demo-layout { grid-template-columns: 1fr; }
.hero-grid { min-height: auto; }
.badge { position: static; }
.carousel-wrapper {
justify-self: center;
--card-w: min(420px, 82vw);
--card-h: min(480px, 104vw);
}
.demo-controls { min-height: 300px; }
}
@media (max-width: 720px) {
:root { --landing-header-height: 64px; }
.nav-inner { min-height: 64px; }
.logo { font-size: 18px; letter-spacing: -.9px; }
.nav-actions .btn, .nav-inner > .btn {
min-height: 40px;
padding-inline: 12px;
font-size: 9px;
}
.hero { padding-block: 42px 54px; }
.hero h1 { font-size: clamp(40px, 12vw, 58px); }
section, .dubs-section { padding-block: 64px; }
.carousel-wrapper { --card-w: min(278px, 72vw); --card-h: min(390px, 104vw); }
.arcade-carousel { height: 470px; }
.landing-voice-tape { padding-block: 13px; }
.landing-voice-tape-copy { gap: 24px; padding-right: 24px; }
.landing-voice-tape-copy span { font-size: 14px; }
.studio-demo { padding: 10px; }
.offer-wrap, .bonus-wrap { padding: 34px 24px; }
.footer-inner { min-height: 0; grid-template-columns: 1fr; gap: 10px; padding-block: 24px; }
.footer-brand, .footer-links, .footer-legal { grid-column: 1; grid-row: auto; justify-self: start; }
.footer-links { gap: 2px 18px; }
.footer-legal { white-space: normal; }
}
@media (max-width: 400px) and (max-height: 680px) {
:root { --landing-header-height: 56px; }
.nav-inner { min-height: 56px; padding-block: 8px; }
.nav-actions .btn, .nav-inner > .btn { min-height: 36px; padding-inline: 9px; font-size: 8px; }
.hero { padding-block: 22px 34px; }
.hero-grid { gap: 30px; }
.hero h1 { margin-bottom: 16px; font-size: clamp(32px, 10.2vw, 40px); }
.hero p.lead { margin-bottom: 18px; font-size: 13px; line-height: 1.5; }
.hero-ctas { gap: 10px; margin-bottom: 0; }
.hero .btn { min-height: 46px; }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
scroll-behavior: auto !important;
}
.landing-title-line, .carousel-wrapper, .landing-voice-tape-track {
transform: none !important;
opacity: 1 !important;
clip-path: none !important;
}
}
@media (max-width: 560px) {
.steps, .seo-faq-grid { grid-template-columns: 1fr; }
.step, .seo-faq-grid article { min-height: 0; }
.step-num { margin-bottom: 24px; }
.demo-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.step-pill { justify-content: center; padding-inline: 6px; font-size: 8px; }
.dubs-carousel-wrapper { padding-inline: 24px; }
.modal { width: calc(100vw - 24px); }
}
@media (max-width: 360px) {
.nav-login { display: none; }
}
body::before {
opacity: .55;
background-size: 180px 180px;
-webkit-mask-image: linear-gradient(to bottom, #000 0 74vh, transparent 115vh);
mask-image: linear-gradient(to bottom, #000 0 74vh, transparent 115vh);
}
body::after { display: none; }
.hero {
isolation: isolate;
overflow: hidden;
border-bottom: 0;
background:
radial-gradient(circle at 79% 44%, rgba(237, 72, 104, .16), transparent 27rem),
radial-gradient(circle at 92% 12%, rgba(92, 212, 196, .055), transparent 18rem);
}
.hero::before {
content: "";
position: absolute;
z-index: 0;
top: 10%;
right: -9vw;
width: clamp(540px, 47vw, 940px);
aspect-ratio: 1;
border: clamp(58px, 5vw, 104px) solid rgba(237, 72, 104, .075);
border-radius: 50%;
transform: rotate(-17deg) scaleY(.72);
pointer-events: none;
}
.hero-grid {
grid-template-columns: minmax(0, .86fr) minmax(560px, 1.14fr);
gap: clamp(30px, 4.5vw, 96px);
}
.hero-copy {
position: relative;
z-index: 4;
padding-block: clamp(76px, 9svh, 128px) clamp(54px, 7svh, 96px);
}
.badge {
position: static;
margin-bottom: clamp(28px, 4svh, 48px);
color: #d6d3d8;
font-size: clamp(9px, .67vw, 12px);
letter-spacing: .2em;
}
.badge .dot {
width: 8px;
height: 8px;
box-shadow: 0 0 0 5px rgba(237, 72, 104, .1);
}
.hero h1 {
max-width: 12.2em;
margin-bottom: clamp(22px, 3svh, 34px);
font-size: clamp(48px, min(4.35vw, 8svh), 94px);
line-height: .94;
letter-spacing: -.07em;
text-wrap: balance;
}
.hero p.lead {
max-width: 48ch;
margin-bottom: 30px;
color: #c8c5cc;
font-size: clamp(15px, 1.02vw, 21px);
line-height: 1.65;
}
.hero-ctas { margin-bottom: 20px; }
.hero-ctas,
.hero-ctas .btn {
min-width: 0;
max-width: 100%;
}
.hero .btn {
min-height: 58px;
border-radius: 12px;
padding-inline: clamp(20px, 1.6vw, 30px);
}
.hero .btn-primary {
box-shadow: 0 15px 38px rgba(237, 72, 104, .18);
}
.hero .btn-ghost { background: rgba(22, 22, 27, .78); }
.hero-proof {
display: flex;
align-items: center;
gap: 0;
color: #8e8b93;
font-size: 11px;
font-weight: 650;
letter-spacing: .03em;
}
.hero-proof i { display: none; }
.hero-proof span:last-child::before {
content: "•";
margin-inline: 10px;
color: var(--accent);
}
.carousel-wrapper {
--card-w: min(100%, clamp(580px, 39vw, 720px));
--card-h: clamp(330px, 22vw, 420px);
position: relative;
z-index: 3;
width: min(100%, 840px);
transform: translateX(-1.5vw);
}
.arcade-carousel {
height: clamp(540px, 68svh, 760px);
overflow: visible;
}
.carousel-stage::before {
content: "";
position: absolute;
inset: 7% -6% -7%;
border: 1px solid rgba(237, 72, 104, .15);
border-radius: 38px;
transform: rotate(-3deg);
pointer-events: none;
}
.carousel-item,
.carousel-item.active {
border-radius: 18px;
}
.carousel-item {
border-color: rgba(255, 255, 255, .11);
background: #0b0b0e;
box-shadow: 0 22px 64px rgba(0, 0, 0, .62);
}
.carousel-item.active {
border-width: 2px;
border-color: var(--accent);
box-shadow:
0 0 0 1px rgba(237, 72, 104, .24),
0 34px 95px rgba(0, 0, 0, .7),
0 0 64px rgba(237, 72, 104, .14);
}
.carousel-item video { object-position: center; }
.carousel-item-content {
padding: clamp(24px, 2vw, 34px);
background: linear-gradient(to top, rgba(5, 5, 7, .98) 0%, rgba(5, 5, 7, .82) 31%, rgba(5, 5, 7, .08) 72%, transparent 100%);
}
.carousel-item-position {
position: absolute;
top: clamp(20px, 1.7vw, 30px);
left: clamp(20px, 1.7vw, 30px);
color: rgba(255, 255, 255, .78);
font: 700 11px/1 var(--mono);
letter-spacing: .14em;
}
.carousel-item-title {
max-width: 78%;
margin-bottom: 7px;
font-size: clamp(23px, 1.7vw, 32px);
line-height: 1.05;
letter-spacing: -.04em;
}
.carousel-item-description {
max-width: 54ch;
margin-bottom: 16px;
color: rgba(255, 255, 255, .73);
font-size: clamp(12px, .8vw, 15px);
line-height: 1.45;
}
.carousel-item-meta {
gap: 8px;
color: rgba(255, 255, 255, .78);
font-family: var(--sans);
font-size: 10px;
}
.carousel-item-meta span {
padding: 6px 9px;
border: 1px solid rgba(255, 255, 255, .13);
border-radius: 999px;
background: rgba(10, 10, 13, .64);
}
.carousel-item-badge {
top: 20px;
right: 20px;
border: 1px solid rgba(255, 255, 255, .22);
border-radius: 999px;
padding: 7px 11px;
font-size: 9px;
letter-spacing: .12em;
box-shadow: 0 8px 28px rgba(0, 0, 0, .28);
}
.carousel-hint {
top: 12px;
left: -10px;
transform: rotate(-4deg);
gap: 10px;
border: 0;
border-radius: 0;
padding: 0;
background: transparent;
color: #f1dce2;
font: 700 clamp(14px, 1.15vw, 20px)/1.1 "Segoe Print", "Comic Sans MS", cursive;
letter-spacing: -.03em;
animation: none;
}
.carousel-hint::after {
content: "";
position: absolute;
right: 3px;
bottom: -7px;
left: 3px;
height: 2px;
border-radius: 999px;
background: var(--accent);
transform: rotate(-2deg);
}
.carousel-hint-arrows {
color: var(--accent);
font-family: var(--sans);
font-size: .86em;
}
#heroSoundBtn {
position: absolute;
z-index: 170;
top: 12px;
right: 8px;
width: 46px;
height: 46px;
border: 1px solid rgba(255, 255, 255, .16);
border-radius: 14px;
background: rgba(13, 13, 17, .8);
backdrop-filter: blur(10px);
}
#heroSoundBtn svg {
width: 19px;
fill: none;
stroke: currentColor;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 1.7;
}
.carousel-nav {
left: auto;
right: -64px;
width: 46px;
height: 46px;
transform: none;
border: 1px solid rgba(255, 255, 255, .17);
border-radius: 14px;
background: rgba(22, 22, 27, .88);
box-shadow: none;
}
.carousel-nav:hover { transform: translateY(-2px); }
.carousel-nav:active { transform: translateY(0) scale(.96); }
.carousel-nav--prev { top: calc(50% - 52px); }
.carousel-nav--next { bottom: calc(50% - 52px); }
.carousel-indicators {
right: -48px;
gap: 7px;
}
.indicator {
width: 4px;
height: 4px;
border-radius: 999px;
background: rgba(255, 255, 255, .24);
}
.indicator.active {
width: 4px;
height: 24px;
border-radius: 999px;
box-shadow: none;
}
.carousel-note {
position: absolute;
z-index: 160;
right: -118px;
bottom: 14px;
color: rgba(239, 235, 240, .64);
font: 650 clamp(13px, 1vw, 18px)/1.28 "Segoe Print", "Comic Sans MS", cursive;
transform: rotate(-7deg);
}
.carousel-note strong { color: #fff; font-weight: 700; }
.landing-voice-tape {
border-block: 1px solid rgba(255, 255, 255, .16);
box-shadow: 0 16px 50px rgba(237, 72, 104, .08);
}
#how {
overflow: hidden;
border: 0;
background: #eee8df;
color: #171419;
}
#how .section-head {
max-width: 1040px;
margin-bottom: clamp(48px, 6vw, 78px);
}
#how .section-tag { color: #c52d4b; }
#how .section-title { max-width: 940px; color: #171419; }
#how .steps {
gap: 0;
border: 0;
}
#how .step {
min-height: 286px;
padding: clamp(24px, 2.2vw, 38px);
border: 0;
border-right: 1px solid rgba(23, 20, 25, .2);
border-radius: 0;
background: transparent;
color: #171419;
transition: background .22s ease, transform .22s ease;
}
#how .step:last-child { border-right: 0; }
#how .step:hover {
border-color: rgba(23, 20, 25, .2);
background: rgba(255, 255, 255, .34);
transform: translateY(-5px);
}
.step-top {
display: flex;
align-items: flex-start;
justify-content: space-between;
margin-bottom: clamp(48px, 5vw, 76px);
}
#how .step-num {
margin: 0;
color: #cf3352;
font: 800 clamp(18px, 1.5vw, 25px)/1 var(--sans);
letter-spacing: -.04em;
}
.step-icon {
width: clamp(42px, 3vw, 56px);
height: clamp(42px, 3vw, 56px);
fill: none;
stroke: #171419;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 2;
}
#how .step h3 {
margin-bottom: 12px;
color: #171419;
font-size: clamp(18px, 1.25vw, 24px);
letter-spacing: -.035em;
}
#how .step p {
max-width: 29ch;
color: #5c565e;
font-size: clamp(12px, .77vw, 15px);
line-height: 1.65;
}
#how .steps.is-gsap-motion {
position: relative;
display: block;
overflow: hidden;
min-height: 420px;
padding-block: 58px;
perspective: 1100px;
isolation: isolate;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 2.5%, #000 97.5%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 2.5%, #000 97.5%, transparent);
}
.steps-track,
.steps-set {
display: flex;
align-items: stretch;
width: max-content;
}
.steps-track {
position: relative;
z-index: 1;
}
.steps-set {
flex: none;
gap: 14px;
padding-right: 14px;
}
#how .steps.is-gsap-motion .steps-set .step {
position: relative;
flex: 0 0 clamp(292px, 24vw, 410px);
width: clamp(292px, 24vw, 410px);
min-height: 300px;
overflow: hidden;
border: 1px solid rgba(207, 51, 82, .42);
border-radius: 16px;
background: linear-gradient(145deg, rgba(255, 255, 255, .64), rgba(255, 249, 248, .38));
box-shadow: 0 24px 58px rgba(94, 39, 59, .12);
backface-visibility: hidden;
transform-origin: 50% 60%;
transition: background .22s ease, border-color .22s ease;
}
#how .steps.is-gsap-motion .steps-set .step:nth-child(even) {
background: linear-gradient(145deg, rgba(255, 255, 255, .7), rgba(250, 240, 245, .44));
}
#how .steps.is-gsap-motion .step:hover {
border-color: rgba(207, 51, 82, .42);
background: rgba(255, 255, 255, .66);
}
.step-icon-stage {
position: relative;
display: grid;
place-items: center;
width: clamp(64px, 4.6vw, 78px);
height: clamp(64px, 4.6vw, 78px);
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
#how .steps.is-gsap-motion.is-motion-active .steps-track,
#how .steps.is-gsap-motion.is-motion-active .steps-set .step,
#how .steps.is-gsap-motion.is-motion-active .step-icon,
#how .steps.is-gsap-motion.is-motion-active .step-icon-stage {
will-change: transform;
}
.step-icon-stage .step-icon {
width: 56%;
height: 56%;
}
#how .step.is-icon-active .step-icon-stage {
border: 0;
background: transparent;
box-shadow: none;
}
.step-icon-spark {
position: absolute;
top: 50%;
left: 50%;
width: 6px;
height: 6px;
margin: -3px 0 0 -3px;
border-radius: 50%;
display: none;
background: transparent;
box-shadow: none;
opacity: 0;
pointer-events: none;
}
#demo-section {
background:
radial-gradient(circle at 16% 34%, rgba(237, 72, 104, .065), transparent 30rem),
#111114;
}
.dubs-section { background: #131217; }
@media (max-width: 1420px) {
.carousel-note { display: none; }
}
@media (max-width: 1260px) {
.hero-grid { grid-template-columns: minmax(0, .9fr) minmax(480px, 1.1fr); }
.carousel-wrapper { --card-w: min(100%, 600px); --card-h: 340px; transform: none; }
}
@media (max-width: 1040px) {
.hero-grid { grid-template-columns: minmax(0, 1fr) minmax(420px, .92fr); gap: 34px; }
.carousel-wrapper { --card-w: min(100%, 520px); --card-h: 290px; }
.carousel-nav { right: -50px; }
#how .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#how .step:nth-child(2) { border-right: 0; }
#how .step:nth-child(-n+2) { border-bottom: 1px solid rgba(23, 20, 25, .2); }
}
@media (max-width: 900px) {
.hero { padding-bottom: 24px; }
.hero-grid { grid-template-columns: 1fr; }
.hero-copy { padding: 58px 0 12px; }
.carousel-wrapper {
--card-w: min(680px, 82vw);
--card-h: min(400px, 49vw);
width: min(100%, 720px);
margin-inline: auto;
}
.arcade-carousel { height: min(620px, 76vw); }
.carousel-nav { right: -58px; }
}
@media (max-width: 720px) {
.hero { padding-block: 0 16px; }
.hero::before { right: -58%; width: 150vw; }
.hero-copy { padding-top: 42px; }
.badge { margin-bottom: 26px; font-size: 8px; }
.hero h1 { font-size: clamp(39px, 11vw, 58px); line-height: .96; }
.hero p.lead { font-size: 14px; line-height: 1.58; }
.hero-ctas { display: grid; grid-template-columns: 1fr; gap: 10px; }
.hero .btn { width: 100%; justify-content: center; }
.hero-proof { flex-wrap: wrap; font-size: 10px; }
.hero-proof span { white-space: nowrap; }
.carousel-wrapper {
--card-w: min(86vw, 580px);
--card-h: min(52vw, 350px);
overflow: visible;
}
.arcade-carousel { height: min(600px, 92vw); }
.carousel-hint { top: 2px; left: 2px; }
#heroSoundBtn { top: 0; right: 0; }
.carousel-nav { right: -48px; width: 42px; height: 42px; }
.carousel-indicators { display: none; }
.carousel-item-title { max-width: 100%; font-size: clamp(20px, 5vw, 27px); }
.carousel-item-description { display: none; }
.carousel-item-meta { font-size: 9px; }
#how { padding-block: 72px; }
}
@media (max-width: 560px) {
.carousel-wrapper { --card-w: 84vw; --card-h: 52vw; }
.arcade-carousel { height: 94vw; }
.carousel-nav { right: -42px; width: 38px; height: 38px; border-radius: 11px; }
.carousel-nav--prev { top: calc(50% - 43px); }
.carousel-nav--next { bottom: calc(50% - 43px); }
#heroSoundBtn { width: 40px; height: 40px; border-radius: 12px; }
.carousel-hint { font-size: 13px; }
.carousel-item-content { padding: 20px; }
.carousel-item-position { top: 17px; left: 17px; font-size: 9px; }
.carousel-item-badge { top: 15px; right: 15px; padding: 5px 8px; font-size: 8px; }
.carousel-item-meta span { padding: 5px 7px; }
#how .steps { grid-template-columns: 1fr; }
#how .step,
#how .step:nth-child(2),
#how .step:last-child { border-right: 0; border-bottom: 1px solid rgba(23, 20, 25, .2); }
#how .step:last-child { border-bottom: 0; }
#how .step { min-height: 0; }
.step-top { margin-bottom: 38px; }
#how .step p { max-width: 38ch; }
#how .steps.is-gsap-motion .steps-set .step {
flex-basis: min(78vw, 310px);
width: min(78vw, 310px);
min-height: 276px;
}
#how .steps.is-gsap-motion {
min-height: 390px;
padding-block: 52px;
}
}
@media (max-width: 390px) {
.hero h1 { font-size: clamp(35px, 10.8vw, 44px); }
.carousel-wrapper { --card-w: 82vw; --card-h: 54vw; transform: translateX(-8px); }
.carousel-hint { left: 0; }
.carousel-nav { right: -38px; }
.carousel-item-meta span:last-child { display: none; }
}
.hero .badge {
display: inline-flex;
width: fit-content;
margin-bottom: clamp(22px, 3svh, 34px);
padding: 8px 11px;
border: 1px solid rgba(255, 255, 255, .12);
border-radius: 999px;
background: rgba(24, 23, 28, .76);
color: rgba(244, 240, 244, .74);
font-size: clamp(10px, .66vw, 12px);
letter-spacing: .11em;
backdrop-filter: blur(12px);
}
.hero .badge .dot { display: none; }
.hero h1 {
max-width: 11.6em;
font-size: clamp(44px, min(4.05vw, 7.2svh), 82px);
line-height: .95;
letter-spacing: -.067em;
}
.hero p.lead {
max-width: 46ch;
font-size: clamp(15px, .94vw, 19px);
line-height: 1.58;
}
.carousel-wrapper { overflow: visible; }
.carousel-hint {
top: calc(50% - var(--card-h) / 2 - 48px);
left: 50%;
transform: translateX(-50%) rotate(-2deg);
display: block;
max-width: min(var(--card-w), calc(100vw - 48px));
color: rgba(255, 244, 247, .88);
font-size: clamp(14px, 1.05vw, 18px);
line-height: 1.15;
text-align: center;
}
.carousel-hint::after {
right: 12%;
left: 12%;
bottom: -9px;
height: 3px;
}
.carousel-hint-arrows,
.carousel-note { display: none !important; }
.carousel-indicators { display: none !important; }
.carousel-controls {
position: absolute;
z-index: 180;
top: 50%;
right: -22px;
left: auto;
display: grid;
width: 48px;
padding: 4px;
transform: translateY(-50%);
overflow: hidden;
border: 1px solid rgba(255, 255, 255, .2);
border-radius: 17px;
background: rgba(18, 17, 22, .9);
box-shadow: 0 16px 44px rgba(0, 0, 0, .48), 0 0 0 4px rgba(237, 72, 104, .08);
backdrop-filter: blur(16px);
}
.carousel-controls .carousel-nav,
.carousel-controls #heroSoundBtn {
position: static;
width: 38px;
height: 40px;
border: 0;
border-radius: 12px;
background: transparent;
color: rgba(255, 255, 255, .82);
font-size: 17px;
box-shadow: none;
}
.carousel-controls > * + * {
border-top: 1px solid rgba(255, 255, 255, .1);
border-radius: 0 0 12px 12px;
}
.carousel-controls .carousel-nav:hover,
.carousel-controls #heroSoundBtn:hover {
transform: none;
background: var(--accent);
color: #fff;
}
.carousel-controls .carousel-nav:active { transform: scale(.92); }
.carousel-controls #heroSoundBtn svg { width: 18px; }
#how {
padding-block: clamp(72px, 8vw, 126px);
}
#how .section-head {
max-width: 860px;
margin-bottom: clamp(32px, 4vw, 56px);
}
#how .section-title {
max-width: 850px;
margin-bottom: 0;
font-size: clamp(40px, 3.7vw, 66px);
line-height: .98;
}
#demo-section {
position: relative;
overflow: hidden;
padding-block: clamp(74px, 7vw, 118px);
border-top: 0;
background: #111014;
}
#demo-section > .container {
position: relative;
z-index: 1;
}
#demo-section .section-head {
max-width: 980px;
margin-bottom: clamp(28px, 3.5vw, 50px);
}
#demo-section .section-title {
max-width: 900px;
margin-bottom: 14px;
font-size: clamp(40px, 3.5vw, 62px);
line-height: .98;
}
#demo-section .section-sub {
max-width: 66ch;
color: rgba(239, 235, 240, .67);
font-size: clamp(14px, .95vw, 17px);
line-height: 1.55;
}
#demo-section .studio-demo {
position: relative;
padding: clamp(14px, 1.45vw, 24px);
overflow: hidden;
border: 1px solid rgba(255, 255, 255, .13);
border-radius: 30px;
background: #19181e;
box-shadow: 0 34px 110px rgba(0, 0, 0, .48), 0 0 0 1px rgba(237, 72, 104, .04);
}
#demo-section .demo-header {
display: none;
}
#demo-section .demo-title {
gap: 0;
color: rgba(255, 255, 255, .76);
font-family: var(--sans);
font-size: 12px;
font-weight: 750;
letter-spacing: .035em;
}
#demo-section .demo-title .dot { display: none; }
#demo-section .demo-meta {
padding: 7px 10px;
border-radius: 999px;
background: rgba(237, 72, 104, .12);
color: #f8899f;
font-family: var(--sans);
font-size: 10px;
font-weight: 750;
letter-spacing: .045em;
}
#demo-section .demo-steps {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
margin-bottom: 12px;
}
#demo-section .step-pill {
justify-content: center;
min-height: 44px;
padding: 8px 12px;
border: 1px solid rgba(255, 255, 255, .09);
border-radius: 14px;
background: #121116;
color: rgba(255, 255, 255, .42);
font-family: var(--sans);
font-size: 12px;
font-weight: 650;
letter-spacing: 0;
}
#demo-section .step-pill .step-n {
width: 22px;
height: 22px;
border-radius: 8px;
font-family: var(--sans);
font-size: 11px;
font-weight: 800;
}
#demo-section .step-pill.active {
border-color: rgba(237, 72, 104, .7);
background: rgba(237, 72, 104, .09);
color: #fff;
}
#demo-section .demo-layout {
grid-template-columns: minmax(0, 1.46fr) minmax(280px, .54fr);
gap: 12px;
}
#demo-section .demo-video,
#demo-section .demo-controls {
height: auto !important;
min-height: clamp(360px, 31vw, 610px);
}
#demo-section .demo-video {
aspect-ratio: 16 / 9;
border: 1px solid rgba(255, 255, 255, .12);
border-radius: 22px;
background: #070709;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .025);
}
#demo-section .demo-video video { object-position: center; }
#demo-section .subtitle-line {
border-radius: 999px;
padding: 8px 14px;
font-family: var(--sans);
font-size: clamp(12px, .86vw, 15px);
}
#demo-section .demo-controls {
justify-content: center;
gap: clamp(14px, 1.4vw, 24px);
padding: clamp(18px, 1.8vw, 30px);
border: 1px solid rgba(23, 20, 25, .12);
border-radius: 22px;
background: #eee8df;
color: #171419;
}
#demo-section .demo-info {
display: none;
}
#demo-section .rec-btn {
width: clamp(82px, 6.2vw, 108px);
height: clamp(82px, 6.2vw, 108px);
border: 7px solid rgba(255, 255, 255, .68);
box-shadow: 0 0 0 1px rgba(207, 51, 82, .48), 0 18px 54px rgba(207, 51, 82, .22);
}
#demo-section .rec-label {
margin-top: -6px;
color: #b72847;
font-family: var(--sans);
font-size: 11px;
font-weight: 800;
letter-spacing: .06em;
}
#demo-section .demo-control-copy {
max-width: 28ch;
margin: -6px auto 0;
color: rgba(23, 20, 25, .58);
font-size: clamp(12px, .78vw, 14px);
line-height: 1.5;
text-align: center;
}
#demo-section #waveCanvas {
height: 72px;
border: 1px solid rgba(23, 20, 25, .16);
border-radius: 16px;
background: #171419;
}
.dubs-section {
padding-block: clamp(74px, 7vw, 112px);
border-top: 0;
background: #161318;
}
#demo-section,
.dubs-section {
content-visibility: auto;
contain-intrinsic-size: auto 900px;
}
.dubs-section .section-head { margin-bottom: clamp(24px, 3vw, 40px); }
.dubs-section .section-title {
max-width: 880px;
font-size: clamp(39px, 3.4vw, 60px);
line-height: .98;
}
.dubs-section .section-sub {
color: rgba(239, 235, 240, .64);
font-size: clamp(14px, .88vw, 16px);
}
.dubs-section .global-counter {
margin-top: 16px;
padding: 10px 14px;
border: 1px solid rgba(255, 255, 255, .1);
border-radius: 999px;
background: rgba(255, 255, 255, .045);
color: rgba(255, 255, 255, .62);
font-family: var(--sans);
font-size: 12px;
}
.dubs-section .dubs-carousel-wrapper {
padding-top: clamp(28px, 3vw, 48px);
border: 1px solid rgba(255, 255, 255, .08);
border-radius: 30px;
background: rgba(255, 255, 255, .025);
box-shadow: 0 32px 90px rgba(0, 0, 0, .24);
}
.dubs-section .dub-card,
.dubs-section .dub-card-media { border-radius: 20px; }
.dubs-section .dubs-nav {
border: 1px solid rgba(255, 255, 255, .14);
border-radius: 16px;
background: rgba(25, 23, 29, .92);
backdrop-filter: blur(12px);
}
.dubs-section .dubs-indicators { display: none; }
#offer {
padding-block: clamp(74px, 8vw, 126px);
background: #111014;
}
#offer .offer-wrap {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr);
align-items: end;
gap: 14px clamp(38px, 5vw, 90px);
padding: clamp(42px, 6vw, 92px);
overflow: hidden;
border: 0;
border-radius: 34px;
background: #ed4868;
color: #171419;
box-shadow: 0 34px 100px rgba(0, 0, 0, .32);
}
#offer .offer-wrap h2 {
grid-column: 1;
grid-row: 1 / 6;
align-self: center;
max-width: 800px;
margin: 0;
font-size: clamp(40px, 4.3vw, 72px);
line-height: .96;
}
#offer .offer-wrap h2 .accent { color: #fff !important; }
#offer .offer-wrap p,
#offer .offer-wrap .hero-meta {
grid-column: 2;
max-width: 62ch;
margin: 0;
color: rgba(23, 20, 25, .72) !important;
font-size: clamp(14px, .9vw, 17px);
}
#offer .offer-price {
grid-column: 2;
justify-self: start;
display: inline-flex;
margin: 4px 0 0;
padding: 10px 14px;
border: 1px solid rgba(23, 20, 25, .2);
border-radius: 999px;
background: rgba(255, 255, 255, .22);
}
#offer .offer-price .new { color: #171419; }
#offer .offer-wrap > br { display: none; }
#offer .offer-cta {
grid-column: 2;
justify-self: start;
border-color: #171419;
background: #171419;
color: #fff;
box-shadow: 0 18px 44px rgba(23, 20, 25, .2);
}
.site-footer {
border-top: 1px solid rgba(255, 255, 255, .09);
background: #0d0c10;
}
.site-footer .footer-inner {
min-height: 112px;
padding-block: 28px;
row-gap: 14px;
}
.site-footer .footer-brand { font-size: 20px; }
.site-footer .footer-links {
gap: 8px 20px;
}
.site-footer .footer-links a {
color: rgba(239, 235, 240, .62);
font-size: 11px;
line-height: 1.45;
}
.site-footer .footer-legal {
color: rgba(239, 235, 240, .42);
font-size: 10px;
line-height: 1.55;
}
@media (max-width: 1360px) {
.hero h1 { font-size: clamp(42px, 4.5vw, 60px); }
#how .section-title,
#demo-section .section-title,
.dubs-section .section-title { font-size: clamp(38px, 4vw, 52px); }
#offer .offer-wrap h2 { font-size: clamp(40px, 4.8vw, 60px); }
}
@media (max-width: 1040px) {
.hero h1 { font-size: clamp(40px, 5.2vw, 54px); }
.hero p.lead { font-size: 15px; }
#demo-section .demo-layout { grid-template-columns: minmax(0, 1.3fr) minmax(260px, .7fr); }
#demo-section .demo-video,
#demo-section .demo-controls { min-height: 340px; }
}
@media (max-width: 900px) {
.hero h1 { max-width: 13em; font-size: clamp(39px, 7.8vw, 56px); }
.carousel-hint { top: calc(50% - var(--card-h) / 2 - 42px); }
#how .section-title,
#demo-section .section-title,
.dubs-section .section-title { font-size: clamp(36px, 6vw, 48px); }
#demo-section .demo-layout { grid-template-columns: 1fr; }
#demo-section .demo-video,
#demo-section .demo-controls { min-height: 0; }
#demo-section .demo-video { aspect-ratio: 16 / 9; }
#demo-section .demo-controls { min-height: 280px; }
.dubs-section .dubs-carousel-wrapper { border-radius: 24px; }
#offer .offer-wrap { display: block; }
#offer .offer-wrap h2 { margin-bottom: 22px; }
#offer .offer-wrap p { margin-bottom: 18px; }
#offer .offer-price { margin-bottom: 18px; }
#offer .offer-cta { margin-bottom: 16px; }
}
@media (max-width: 720px) {
.hero-copy { padding-top: 36px; }
.hero .badge { margin-bottom: 20px; padding: 7px 9px; font-size: 9px; }
.hero h1 { font-size: clamp(34px, 9.4vw, 43px); line-height: .97; }
.hero p.lead { font-size: 14px; line-height: 1.52; }
.carousel-controls {
right: -20px;
left: auto;
width: 44px;
border-radius: 15px;
}
.carousel-controls .carousel-nav { width: 34px; height: 36px; }
.carousel-controls #heroSoundBtn { width: 34px; height: 36px; }
.carousel-hint {
top: calc(50% - var(--card-h) / 2 - 38px);
width: var(--card-w);
font-size: 13px;
}
#how,
#demo-section,
.dubs-section,
#offer { padding-block: 66px; }
#how .section-title,
#demo-section .section-title,
.dubs-section .section-title { font-size: clamp(32px, 8.4vw, 42px); }
#how .section-head,
#demo-section .section-head,
.dubs-section .section-head { margin-bottom: 28px; }
#demo-section .studio-demo { border-radius: 22px; }
#demo-section .demo-header { min-height: 44px; }
#demo-section .step-pill { min-height: 40px; font-size: 10px; }
#demo-section .demo-controls { min-height: 250px; }
.dubs-section .dubs-carousel-wrapper { border-right: 0; border-left: 0; border-radius: 0; }
#offer .offer-wrap { padding: 40px 26px; border-radius: 26px; }
#offer .offer-wrap h2 { font-size: clamp(35px, 9.6vw, 46px); }
.site-footer .footer-inner { padding-block: 28px; }
.site-footer .footer-links a { font-size: 11px; }
.site-footer .footer-legal { font-size: 10px; }
}
@media (max-width: 480px) {
.hero h1 { font-size: clamp(32px, 8.9vw, 38px); }
.hero-proof { display: none; }
.carousel-wrapper { transform: none; }
.carousel-item-content { padding: 18px; }
.carousel-item-title { font-size: 20px; }
.carousel-item-meta span { padding: 4px 6px; }
#how .section-title,
#demo-section .section-title,
.dubs-section .section-title { font-size: clamp(30px, 8.2vw, 36px); }
#demo-section .section-sub,
.dubs-section .section-sub { font-size: 13px; }
#demo-section .demo-header { padding-inline: 10px; }
#demo-section .demo-title { font-size: 10px; }
#demo-section .demo-meta { display: none; }
#demo-section .demo-steps { gap: 5px; }
#demo-section .step-pill { padding-inline: 6px; }
#demo-section .step-pill .step-n { width: 19px; height: 19px; }
#demo-section .studio-demo { padding: 10px; }
#demo-section .demo-video,
#demo-section .demo-controls { border-radius: 16px; }
#offer .offer-wrap h2 { font-size: clamp(32px, 9vw, 39px); }
}
@media (prefers-reduced-motion: reduce) {
#how .step:hover,
.carousel-nav:hover,
#demo-section .studio-demo { transform: none !important; }
}
.seo-faq--capsules {
position: relative;
padding-block: clamp(58px, 6vh, 96px);
overflow: clip;
border-top: 1px solid rgba(255, 255, 255, .08);
background: #0d0c10;
color: #f5f1f3;
contain: layout paint;
contain-intrinsic-size: auto 900px;
}
.seo-faq--capsules::before {
content: "";
position: absolute;
top: clamp(22px, 4vw, 70px);
right: clamp(-240px, -10vw, -80px);
width: clamp(360px, 34vw, 680px);
aspect-ratio: 1;
border: clamp(32px, 3.2vw, 64px) solid rgba(237, 72, 104, .1);
border-radius: 50%;
pointer-events: none;
}
.seo-faq--capsules > .container {
position: relative;
z-index: 1;
}
.seo-faq--capsules .section-head {
max-width: 1040px;
margin-bottom: clamp(28px, 3.5vh, 44px);
}
.seo-faq--capsules .section-tag { color: #ff708c; }
.seo-faq--capsules .section-title {
max-width: 980px;
margin-bottom: 14px;
color: #f7f3f5;
font-size: clamp(38px, 3.8vw, 64px);
line-height: .98;
}
.seo-faq--capsules .section-sub {
color: rgba(245, 241, 243, .58);
font-size: clamp(14px, .92vw, 17px);
}
.faq-capsules {
display: flex;
gap: clamp(7px, .65vw, 12px);
min-height: clamp(350px, 46vh, 520px);
isolation: isolate;
}
.faq-card {
position: relative;
flex: 0 1 clamp(64px, 5.1vw, 92px);
min-width: 0;
overflow: hidden;
border: 1px solid rgba(237, 72, 104, .58);
border-radius: 999px;
background: #121116;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .018);
transform-origin: 50% 50%;
}
.faq-card.is-active {
flex: 1 1 clamp(500px, 42vw, 820px);
border-color: rgba(255, 255, 255, .34);
border-radius: clamp(34px, 4vw, 72px);
background:
radial-gradient(circle at 12% 96%, rgba(255, 214, 102, .48), transparent 38%),
linear-gradient(125deg, #ffbd69 0%, #f56472 52%, #d83c75 100%);
color: #171419;
box-shadow: 0 34px 90px rgba(0, 0, 0, .34), 0 16px 52px rgba(237, 72, 104, .16);
}
.faq-trigger {
position: absolute;
z-index: 3;
inset: 0;
display: flex;
align-items: flex-end;
justify-content: center;
width: 100%;
padding: clamp(24px, 2.3vw, 42px) 10px;
border: 0;
background: transparent;
color: inherit;
cursor: pointer;
}
.faq-trigger:focus-visible {
outline: 3px solid #fff;
outline-offset: -6px;
}
.faq-number {
color: #ff5d7d;
font-family: var(--sans);
font-size: clamp(30px, 3.2vw, 58px);
font-weight: 800;
letter-spacing: -.07em;
line-height: .78;
font-variant-numeric: tabular-nums;
}
.faq-tab-label {
position: absolute;
top: 34px;
left: 50%;
max-height: 44%;
overflow: hidden;
transform: translateX(-50%);
color: rgba(245, 241, 243, .54);
font-family: var(--mono);
font-size: clamp(7px, .55vw, 10px);
font-weight: 700;
letter-spacing: .09em;
line-height: 1;
text-transform: uppercase;
white-space: nowrap;
writing-mode: vertical-rl;
}
.faq-card.is-active .faq-trigger {
align-items: flex-start;
justify-content: flex-end;
padding: clamp(25px, 2.5vw, 44px);
pointer-events: none;
}
.faq-card.is-active .faq-number {
color: rgba(23, 20, 25, .18);
font-size: clamp(54px, 5.5vw, 104px);
}
.faq-card.is-active .faq-tab-label { display: none; }
.faq-panel {
position: absolute;
z-index: 2;
inset: 0;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: clamp(28px, 3.2vw, 56px);
visibility: hidden;
opacity: 0;
pointer-events: none;
}
.faq-card.is-active .faq-panel {
visibility: visible;
opacity: 1;
}
.faq-topic {
align-self: flex-start;
margin-bottom: auto;
padding: 9px 13px;
border: 1px solid rgba(23, 20, 25, .22);
border-radius: 999px;
background: rgba(255, 255, 255, .2);
font-family: var(--mono);
font-size: clamp(8px, .65vw, 11px);
font-weight: 700;
letter-spacing: .11em;
}
.faq-panel h3 {
max-width: 15ch;
margin: 0 0 clamp(16px, 1.5vw, 24px);
color: #171419;
font-size: clamp(27px, 2.7vw, 48px);
font-weight: 800;
letter-spacing: -.052em;
line-height: .98;
}
.faq-panel p {
max-width: 70ch;
margin: 0;
color: rgba(23, 20, 25, .76);
font-size: clamp(13px, .92vw, 17px);
line-height: 1.55;
}
.faq-panel strong { color: #171419; font-weight: 750; }
.faq-hint {
display: flex;
align-items: center;
gap: 10px;
margin: 22px 0 0;
color: rgba(245, 241, 243, .44);
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
}
.faq-hint span {
width: 34px;
height: 1px;
background: #ed4868;
}
@media (hover: hover) and (pointer: fine) {
.faq-card:not(.is-active):hover {
border-color: #ff708c;
background: #19141a;
}
.faq-card:not(.is-active):hover .faq-number { color: #ff8ca2; }
.faq-card:not(.is-active):hover .faq-tab-label { color: rgba(255, 255, 255, .84); }
}
@media (max-width: 1120px) {
.seo-faq--capsules { padding-block: 72px; }
.seo-faq--capsules::before { right: -210px; width: 440px; }
.seo-faq--capsules .section-title { font-size: clamp(36px, 6.8vw, 56px); }
.faq-capsules {
flex-direction: column;
gap: 10px;
min-height: 0;
}
.faq-card {
flex: 0 0 78px;
width: 100%;
min-height: 78px;
border-radius: 999px;
}
.faq-card.is-active {
flex: 0 0 auto;
min-height: clamp(380px, 58vw, 520px);
border-radius: clamp(28px, 6vw, 54px);
}
.faq-trigger {
position: relative;
justify-content: space-between;
min-height: 78px;
padding: 20px 28px;
}
.faq-number { font-size: 32px; }
.faq-tab-label {
position: static;
max-width: 68%;
max-height: none;
transform: none;
overflow: hidden;
color: rgba(245, 241, 243, .72);
font-family: var(--sans);
font-size: 13px;
letter-spacing: -.01em;
text-overflow: ellipsis;
text-transform: none;
writing-mode: horizontal-tb;
}
.faq-card.is-active .faq-trigger {
position: absolute;
min-height: 0;
padding: 28px;
}
.faq-card.is-active .faq-number { font-size: 72px; }
.faq-panel {
position: relative;
min-height: clamp(380px, 58vw, 520px);
padding: clamp(30px, 5.5vw, 52px);
}
.faq-panel h3 { max-width: 18ch; font-size: clamp(30px, 5.5vw, 48px); }
.faq-panel p { max-width: 72ch; font-size: clamp(13px, 1.8vw, 16px); }
}
@media (max-width: 560px) {
.seo-faq--capsules {
padding-block: 64px;
contain-intrinsic-size: auto 1180px;
}
.seo-faq--capsules .section-head { margin-bottom: 28px; }
.seo-faq--capsules .section-title { font-size: clamp(31px, 9vw, 40px); }
.seo-faq--capsules .section-sub { font-size: 13px; }
.faq-capsules { gap: 8px; }
.faq-card { flex-basis: 68px; min-height: 68px; }
.faq-card.is-active { min-height: 430px; border-radius: 30px; }
.faq-trigger { min-height: 68px; padding: 17px 22px; }
.faq-card.is-active .faq-trigger { padding: 22px; }
.faq-card.is-active .faq-number { font-size: 58px; }
.faq-number { font-size: 28px; }
.faq-tab-label { max-width: 64%; font-size: 12px; }
.faq-panel {
min-height: 430px;
padding: 28px 24px;
}
.faq-topic { padding: 7px 10px; font-size: 8px; }
.faq-panel h3 { max-width: 16ch; margin-bottom: 16px; font-size: clamp(27px, 8vw, 35px); }
.faq-panel p { font-size: 13px; line-height: 1.52; }
.faq-hint { display: none; }
}
@media (max-width: 370px) {
.faq-card.is-active,
.faq-panel { min-height: 460px; }
.faq-panel h3 { font-size: 26px; }
.faq-panel p { font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) {
.faq-card,
.faq-panel,
.faq-number,
.faq-tab-label { transition: none !important; }
}
.hero .carousel-wrapper {
--card-h: clamp(410px, 30vw, 540px);
}
.hero .carousel-item video {
object-fit: contain;
transform: scale(1.18);
transform-origin: center;
}
@media (max-width: 900px) {
.hero .carousel-wrapper { --card-h: clamp(320px, 72vw, 520px); }
.hero .arcade-carousel { height: calc(var(--card-h) + 100px); }
}
@media (max-width: 720px) {
.hero .carousel-wrapper { --card-h: clamp(280px, 84vw, 460px); }
}
.nav-links .nav-pricing {
min-height: 36px;
height: 36px;
padding-inline: clamp(9px, .75vw, 14px);
border: 1px solid rgba(237, 72, 104, .58);
border-radius: 999px;
background: rgba(237, 72, 104, .1);
color: var(--text);
font-weight: 800;
letter-spacing: .025em;
}
.nav-links .nav-pricing::after {
display: none;
}
.nav-links .nav-pricing:hover,
.nav-links .nav-pricing:focus-visible {
border-color: var(--accent);
background: var(--accent);
color: #1a0f13;
}
@media (max-width: 1040px) {
.nav-links {
gap: 12px;
}
.nav-actions {
margin-left: 10px;
}
}
#demo-section, .dubs-section, .seo-faq, #offer {
content-visibility: visible;
contain-intrinsic-size: none;
}
#how .steps.is-gsap-motion:not([data-motion-ready="true"]) {
overflow-x: auto;
scrollbar-width: none;
}
#how::before,
#how .steps.is-gsap-motion::before,
#how .steps.is-gsap-motion .steps-set .step::after,
.step-icon-stage::before,
.steps-focus-lens {
content: none !important;
display: none !important;
}
#how .step-icon-stage,
#how .step.is-icon-active .step-icon-stage {
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
.mobile-nav { display: none; }
@media (max-width: 720px) {
html { scroll-padding-top: 76px; }
#how, #demo-section, #dubs, #faq, #offer { scroll-margin-top: 76px; }
.container { min-width: 0; }
.site-nav { z-index: 500; }
.site-nav .nav-inner { position: relative; gap: 8px; min-height: 64px; }
.site-nav .logo { flex: 1 1 auto; min-width: 0; }
.site-nav .logo-text { font-size: clamp(13px, 4vw, 17px); }
.site-nav .nav-actions { flex: 0 0 auto; gap: 0; margin-left: 0; }
.site-nav .nav-actions .nav-login { display: none; }
.site-nav .nav-actions .btn { min-height: 44px; padding-inline: 12px; font-size: 0; }
.site-nav .nav-actions .btn::after { content: "Играть"; font-size: 12px; }
.site-nav .nav-inner > .btn { display: none; }
.mobile-nav { display: block; flex: 0 0 auto; }
.mobile-nav summary {
display: flex;
align-items: center;
justify-content: center;
gap: 7px;
min-width: 52px;
min-height: 44px;
padding: 0 9px;
border: 1px solid rgba(255, 255, 255, .18);
border-radius: 10px;
color: #fff;
background: #201d22;
font: 700 11px/1 var(--sans);
cursor: pointer;
list-style: none;
}
.mobile-nav summary::-webkit-details-marker { display: none; }
.mobile-nav summary > span:first-child,
.mobile-nav summary > span:first-child::before,
.mobile-nav summary > span:first-child::after {
display: block;
width: 16px;
height: 2px;
border-radius: 2px;
background: currentColor;
}
.mobile-nav summary > span:first-child { position: relative; }
.mobile-nav summary > span:first-child::before,
.mobile-nav summary > span:first-child::after { content: ""; position: absolute; left: 0; }
.mobile-nav summary > span:first-child::before { top: -5px; }
.mobile-nav summary > span:first-child::after { top: 5px; }
.mobile-nav[open] summary { border-color: var(--accent); }
.mobile-nav summary:focus-visible,
.mobile-nav-panel a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mobile-nav-panel {
position: absolute;
z-index: 10;
top: calc(100% + 1px);
right: 0;
left: 0;
display: grid;
gap: 3px;
padding: 12px;
border: 1px solid rgba(255, 255, 255, .16);
border-radius: 0 0 15px 15px;
background: #17151a;
box-shadow: 0 25px 45px rgba(0, 0, 0, .55);
}
.mobile-nav-panel a {
display: flex;
align-items: center;
min-height: 48px;
padding-inline: 14px;
border-radius: 8px;
color: #f5f1f3;
font-size: 14px;
font-weight: 650;
text-decoration: none;
}
.mobile-nav-panel a:active { background: rgba(237, 72, 104, .16); }
.hero-grid, .hero-copy, .carousel-wrapper { min-width: 0; }
.hero-copy { padding-top: 30px; }
.hero .badge { max-width: 100%; white-space: normal; line-height: 1.35; }
.hero h1 { max-width: 100%; overflow-wrap: anywhere; }
.hero p.lead { font-size: 16px; line-height: 1.55; }
.hero .btn { min-height: 52px; font-size: 14px; }
.hero-proof { display: flex; flex-wrap: wrap; gap: 7px; margin: 16px 0 0; }
.hero-proof span { padding: 5px 9px; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; color: #d8d2d9; font-size: 11px; }
.hero-proof span:last-child::before { display: none; }
.hero .carousel-wrapper { --card-w: min(100%, 540px); --card-h: clamp(280px, 82vw, 440px); width: calc(100% - 20px); margin-inline: 0 auto; }
.hero .arcade-carousel { height: calc(var(--card-h) + 72px); }
.carousel-controls { right: -17px; }
.carousel-hint { top: 0; left: 50%; width: var(--card-w); max-width: 100%; }
#how .steps { display: grid; grid-template-columns: 1fr; gap: 12px; min-height: 0; margin: 0; padding: 0; overflow: visible; -webkit-mask-image: none; mask-image: none; }
#how .steps .steps-track, #how .steps .steps-set { display: grid; grid-template-columns: 1fr; width: 100%; gap: 12px; padding: 0; }
#how .steps .steps-set[aria-hidden="true"] { display: none; }
#how .steps .step,
#how .steps.is-gsap-motion .steps-set .step { width: 100%; min-height: 0; padding: 20px; border-radius: 14px; }
#how .step h3 { font-size: 20px; }
#how .step p { max-width: none; font-size: 14px; }
#demo-section .section-sub, .dubs-section .section-sub { font-size: 14px; }
#demo-section .studio-demo { padding: 10px; }
#demo-section .demo-steps { gap: 6px; }
#demo-section .step-pill { min-height: 46px; padding-inline: 5px; font-size: 11px; line-height: 1.2; }
#demo-section .demo-video { min-height: 0; aspect-ratio: 16 / 10; }
#demo-section .demo-controls { min-height: 0; gap: 15px; padding: 20px 14px; }
#demo-section .rec-btn { width: 92px; height: 92px; flex: 0 0 92px; cursor: pointer; touch-action: manipulation; }
#demo-section .rec-btn:disabled { opacity: .55; cursor: progress; }
#demo-section .rec-btn:focus-visible { outline: 3px solid #171419; outline-offset: 5px; }
#demo-section .rec-label { font-size: 12px; text-align: center; }
#demo-section .demo-control-copy { max-width: 34ch; font-size: 14px; }
#demo-section #waveCanvas { width: 100%; height: 58px; }
#demo-section .result-actions { flex-wrap: wrap; gap: 8px; }
#demo-section .result-actions .btn,
#demo-section .step-controls > .btn { min-height: 48px; justify-content: center; white-space: normal; }
#controlsStep4 .result-actions > div { flex-wrap: wrap; }
#controlsStep4 .result-actions > div > .btn { flex: 1 1 120px; }
#demo-section .subtitle-line { font-size: 13px; }
.dubs-section .dubs-carousel-wrapper { min-width: 0; }
.dubs-section .global-counter { border-radius: 14px; line-height: 1.4; }
.dubs-section .dubs-nav { min-width: 44px; min-height: 44px; }
.seo-faq--capsules .faq-capsules { gap: 8px; }
.seo-faq--capsules .faq-card { min-height: 60px; flex-basis: 60px; border-radius: 15px; }
.seo-faq--capsules .faq-card.is-active { flex-basis: auto; min-height: 0; border-radius: 20px; }
.seo-faq--capsules .faq-trigger { min-height: 60px; padding: 14px 18px; }
.seo-faq--capsules .faq-card.is-active .faq-trigger { top: 0; right: 0; bottom: auto; left: auto; width: 76px; padding: 18px; }
.seo-faq--capsules .faq-number { font-size: 25px; }
.seo-faq--capsules .faq-card.is-active .faq-number { font-size: 45px; }
.seo-faq--capsules .faq-tab-label { max-width: none; font-size: 13px; }
.seo-faq--capsules .faq-panel { position: relative; inset: auto; min-height: 0; padding: 20px; }
.seo-faq--capsules .faq-topic { margin-bottom: 22px; }
.seo-faq--capsules .faq-panel h3 { max-width: none; font-size: clamp(25px, 7vw, 32px); line-height: 1.08; }
.seo-faq--capsules .faq-panel p { font-size: 14px; line-height: 1.55; }
#offer .offer-wrap { padding: 28px 22px; border-radius: 20px; }
#offer .offer-wrap h2 { font-size: clamp(30px, 8vw, 40px); line-height: 1.04; }
#offer .offer-wrap p, #offer .offer-wrap .hero-meta { font-size: 14px; line-height: 1.5; }
#offer .offer-price { max-width: 100%; }
#offer .offer-cta { display: flex; width: 100%; min-height: 52px; justify-content: center; }
.site-footer .footer-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 15px; }
.site-footer .footer-links a { min-height: 40px; padding-block: 7px; font-size: 12px; overflow-wrap: anywhere; }
.site-footer .footer-legal { font-size: 11px; overflow-wrap: anywhere; }
.pricing-hero { padding: 28px 0 16px; }
.pricing-hero .back-link { margin-bottom: 18px; }
.pricing-hero .section-title { font-size: clamp(33px, 9vw, 45px); line-height: 1.04; }
.pricing-hero .section-sub { font-size: 15px; line-height: 1.55; }
.pricing-section { padding: 14px 0 48px; }
.pricing-grid { gap: 16px; }
.price-card, .price-card--featured { padding: 24px 20px; transform: none; }
.price-card__desc, .price-card__features li { font-size: 14px; }
.price-card__btn { min-height: 52px; justify-content: center; text-align: center; }
.bonus-section { padding-block: 42px; }
.bonus-wrap { padding: 30px 22px; }
.bonus-text { font-size: 15px; }
.bonus-wrap .btn { width: 100%; min-height: 52px; justify-content: center; }
}
@media (max-width: 370px) {
.site-nav .nav-inner { gap: 5px; }
.site-nav .logo-text { font-size: 12px; }
.site-nav .nav-actions .btn { padding-inline: 8px; }
.mobile-nav summary { min-width: 44px; padding-inline: 7px; }
.mobile-nav summary > span:last-child { display: none; }
.hero h1 { font-size: 31px; }
.hero .badge { font-size: 9px; }
.seo-faq--capsules .faq-panel { padding: 18px; }
.seo-faq--capsules .faq-panel h3 { font-size: 24px; }
}