:root {
  color: #241a1d;
  background: #fbf8f7;
  font-family: Manrope, "Segoe UI", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  --ink: #241a1d;
  --muted: #76686c;
  --line: #e8dfe0;
  --paper: #fbf8f7;
  --white: #fff;
  --coral: #f06469;
  --coral-dark: #d94f57;
  --coral-soft: #fae8e7;
  --green: #2aac7b;
  --shadow: 0 30px 80px rgba(83, 48, 57, .14);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; background: var(--paper); color: var(--ink); }
body.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.container { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }
.site-header { position: fixed; z-index: 50; top: 0; left: 0; width: 100%; border-bottom: 1px solid transparent; transition: background .25s, border-color .25s, box-shadow .25s; }
.site-header.scrolled { border-color: rgba(232, 223, 224, .8); background: rgba(251, 248, 247, .88); box-shadow: 0 8px 35px rgba(73, 42, 49, .05); backdrop-filter: blur(16px); }
.header-inner { display: flex; align-items: center; height: 76px; gap: 38px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 24px; font-weight: 800; letter-spacing: -.05em; }
.brand-logo { display: block; width: auto; }
.main-nav { display: flex; align-items: center; gap: 30px; margin-left: auto; color: #55484c; font-size: 14px; font-weight: 600; }
.main-nav a { transition: color .2s; }
.main-nav a:hover { color: var(--coral); }
.button { display: inline-flex; min-height: 50px; align-items: center; justify-content: center; gap: 18px; border: 1px solid transparent; border-radius: 8px; padding: 0 22px; font-size: 14px; font-weight: 700; transition: transform .2s, background .2s, box-shadow .2s, border-color .2s; }
.button:hover { transform: translateY(-2px); }
.button-small { min-height: 42px; padding-inline: 18px; background: var(--ink); color: white; }
.button-primary { background: var(--coral); box-shadow: 0 12px 30px rgba(240, 100, 105, .28); color: white; }
.button-primary:hover { background: var(--coral-dark); box-shadow: 0 16px 38px rgba(240, 100, 105, .34); }
.button-ghost { border-color: var(--line); background: rgba(255,255,255,.65); }
.button-ghost:hover { border-color: #cfc1c4; background: white; }
.menu-button { display: none; }
.hero { position: relative; overflow: hidden; padding: 162px 0 95px; }
.hero-glow { position: absolute; border-radius: 50%; filter: blur(2px); pointer-events: none; }
.hero-glow-left { top: 100px; left: -240px; width: 580px; height: 580px; background: radial-gradient(circle, rgba(255,196,187,.42), transparent 68%); }
.hero-glow-right { top: -100px; right: -240px; width: 620px; height: 620px; background: radial-gradient(circle, rgba(244,179,196,.28), transparent 68%); }
.hero-copy { position: relative; z-index: 2; text-align: center; }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; border: 1px solid #ebdcde; border-radius: 99px; padding: 8px 13px; background: rgba(255,255,255,.72); color: #695b5f; font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.eyebrow > span, .live-label span { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(42,172,123,.11); }
h1, h2, h3, p { margin-top: 0; }
h1 { max-width: 950px; margin: 27px auto 25px; font-size: clamp(55px, 7.4vw, 100px); line-height: .94; letter-spacing: -.072em; }
h1 em, h2 em { color: var(--coral); font-style: normal; }
.hero-lead { max-width: 690px; margin: 0 auto; color: var(--muted); font-size: 18px; line-height: 1.7; }
.hero-actions { display: flex; justify-content: center; gap: 12px; margin-top: 34px; }
.hero-summary { margin: 22px 0 0; color: #5f5054; font-size: 14px; font-weight: 700; }
.hero-note { display: flex; justify-content: center; align-items: center; gap: 13px; margin-top: 27px; text-align: left; }
.hero-note p { margin: 0; color: #8a7c80; font-size: 11px; line-height: 1.45; }
.hero-note strong { color: #4a3b40; font-size: 12px; }
.avatar-stack { display: flex; padding-left: 12px; }
.avatar-stack span { display: grid; width: 29px; height: 29px; margin-left: -10px; place-items: center; border: 2px solid var(--paper); border-radius: 50%; background: #ffe0dc; color: #b84e54; font-size: 10px; font-weight: 800; }
.avatar-stack span:nth-child(2) { background: #e5daf8; color: #7046a8; }
.avatar-stack span:nth-child(3) { background: #d7efe7; color: #26775a; }
.product-stage { position: relative; margin-top: 75px; perspective: 1300px; }
.stage-orbit { position: absolute; border: 1px solid rgba(240,100,105,.13); border-radius: 50%; pointer-events: none; }
.orbit-one { inset: -70px 4% -90px; transform: rotate(-8deg); }
.orbit-two { inset: -120px 15% -120px; transform: rotate(12deg); }
.app-window { position: relative; z-index: 2; overflow: hidden; min-height: 560px; border: 1px solid #dfd4d6; border-radius: 16px; background: white; box-shadow: 0 50px 100px rgba(67,35,42,.19), 0 8px 24px rgba(67,35,42,.08); transform: rotateX(2deg); }
.app-topbar { display: flex; align-items: center; height: 56px; border-bottom: 1px solid #eee6e7; padding: 0 18px; gap: 20px; }
.app-brand { color: var(--coral); font-size: 21px; font-weight: 800; letter-spacing: -.04em; }
.orders-pill { display: flex; align-items: center; gap: 7px; border: 1px solid #c9e8dc; border-radius: 5px; padding: 5px 9px; background: #eff9f5; color: #27775d; font-size: 9px; font-weight: 800; text-transform: uppercase; }
.orders-pill span { width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.app-topbar button { margin-left: auto; border: 1px solid #f7cacc; border-radius: 5px; padding: 8px 13px; background: #fff5f5; color: var(--coral); font-size: 10px; }
.app-body { display: grid; min-height: 442px; grid-template-columns: 176px 1fr; }
.app-sidebar { border-right: 1px solid #eee6e7; padding: 17px 10px; background: #fdfbfb; }
.profile { display: flex; align-items: center; gap: 9px; padding: 2px 7px 18px; }
.profile > div { display: grid; width: 33px; height: 33px; place-items: center; border-radius: 50%; background: var(--coral-soft); color: var(--coral); font-size: 10px; font-weight: 800; }
.profile p { display: flex; flex-direction: column; margin: 0; font-size: 10px; }
.profile small { margin-top: 2px; color: #97898d; font-size: 7px; font-weight: 700; text-transform: uppercase; }
.fake-nav { display: flex; align-items: center; gap: 10px; border-radius: 5px; padding: 10px 9px; color: #66575b; font-size: 9px; font-weight: 600; }
.fake-nav span { width: 15px; color: #897b7f; text-align: center; font-size: 13px; }
.fake-nav b { display: grid; width: 17px; height: 17px; margin-left: auto; place-items: center; border-radius: 50%; background: #f0e9ea; font-size: 7px; }
.fake-nav.active { background: #fff0ef; color: var(--coral); }
.fake-nav.active span { color: var(--coral); }
.app-content { padding: 22px 24px; background: #faf7f7; }
.app-heading { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 18px; }
.app-heading p { display: flex; flex-direction: column; margin: 0; }
.app-heading small { margin-bottom: 5px; color: var(--coral); font-size: 7px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.app-heading strong { font-size: 20px; letter-spacing: -.04em; }
.app-heading > div { display: flex; align-items: center; gap: 6px; color: #75676b; font-size: 8px; }
.app-heading > div span { width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.app-grid { display: grid; grid-template-columns: 1.25fr .9fr; gap: 13px; }
.app-grid section { border: 1px solid #e8dfe0; border-radius: 9px; background: white; }
.now-card, .queue-card { min-height: 260px; padding: 17px; }
.card-label { display: flex; justify-content: space-between; font-size: 12px; font-weight: 800; }
.card-label span { color: var(--coral); font-size: 8px; }
.track-row { display: flex; align-items: center; margin-top: 36px; }
.cover-art { position: relative; display: grid; overflow: hidden; width: 70px; height: 70px; flex: 0 0 auto; place-items: center; border-radius: 7px; background: linear-gradient(145deg, #352338, #f17b7f); color: white; font-size: 12px; font-weight: 800; }
.cover-art::before { position: absolute; width: 45px; height: 45px; border: 1px solid rgba(255,255,255,.4); border-radius: 50%; content: ""; }
.track-meta { margin-left: 13px; }
.track-meta strong { font-size: 13px; }
.track-meta p { margin: 3px 0; color: #716368; font-size: 10px; }
.track-meta small { color: #a09296; font-size: 7px; }
.round-button { display: grid; width: 35px; height: 35px; margin-left: auto; place-items: center; border: 0; border-radius: 50%; background: var(--coral); color: white; }
.progress { overflow: hidden; height: 4px; margin-top: 28px; border-radius: 99px; background: #f2eced; }
.progress span { display: block; width: 55%; height: 100%; background: var(--coral); }
.track-time { display: flex; justify-content: space-between; margin-top: 7px; color: #a09296; font-size: 7px; }
.queue-card { padding-bottom: 9px; }
.queue-line { display: flex; align-items: center; gap: 9px; border-bottom: 1px solid #f1ebec; padding: 13px 0; }
.queue-line > span { margin-left: auto; color: #9f9295; font-size: 8px; }
.queue-line p { display: flex; flex-direction: column; margin: 0; font-size: 9px; }
.queue-line small { margin-top: 3px; color: #9c8f92; font-size: 7px; }
.queue-line.muted { opacity: .58; }
.cover { display: block; width: 31px; height: 31px; flex: 0 0 auto; border-radius: 4px; }
.cover-pink { background: linear-gradient(135deg,#3f263e,#e26c80); }.cover-violet { background: linear-gradient(135deg,#271e4c,#9884e9); }.cover-orange { background: linear-gradient(135deg,#5a231e,#ed9d5d); }
.status-card { display: flex; align-items: center; grid-column: 1 / -1; min-height: 62px; padding: 11px 17px; }
.pulse-dot { width: 8px; height: 8px; margin-right: 12px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 6px #eaf8f2; }
.status-card p { display: flex; flex-direction: column; margin: 0; }
.status-card small { color: #95878b; font-size: 7px; }
.status-card strong { margin-top: 3px; font-size: 9px; }
.source-badge { margin-left: auto; border: 1px solid #eee4cf; border-radius: 5px; padding: 7px 9px; background: #fffdf5; font-size: 8px; }
.app-player { display: flex; align-items: center; height: 62px; border-top: 1px solid #e8dfe0; padding: 0 18px; background: white; }
.mini-cover { width: 33px; height: 33px; margin-right: 10px; border-radius: 4px; background: linear-gradient(145deg,#3b273b,#e66f78); }
.app-player p { display: flex; width: 185px; flex-direction: column; margin: 0; font-size: 9px; }
.app-player small { margin-top: 2px; color: #96888c; font-size: 7px; }
.player-wave { display: flex; align-items: center; gap: 2px; height: 16px; margin-left: auto; }
.player-wave i { width: 2px; height: 7px; border-radius: 2px; background: var(--coral); }.player-wave i:nth-child(2),.player-wave i:nth-child(4){height:14px}.player-wave i:nth-child(3){height:10px}
.app-player button { display: grid; width: 30px; height: 30px; margin-left: 18px; place-items: center; border: 0; border-radius: 50%; background: var(--ink); color: white; }
.app-player > span { margin-left: 15px; color: #988b8e; font-size: 7px; }
.floating-card { position: absolute; z-index: 4; display: flex; align-items: center; gap: 10px; border: 1px solid rgba(255,255,255,.85); border-radius: 10px; padding: 11px 14px; background: rgba(255,255,255,.88); box-shadow: 0 17px 45px rgba(65,35,42,.18); backdrop-filter: blur(10px); }
.floating-card > span { display: grid; width: 31px; height: 31px; place-items: center; border-radius: 8px; background: var(--coral-soft); color: var(--coral); font-size: 12px; font-weight: 800; }
.floating-card p { display: flex; flex-direction: column; margin: 0; font-size: 9px; }
.floating-card small { margin-top: 2px; color: #9a8b8f; font-size: 7px; }
.floating-left { bottom: 65px; left: -55px; }.floating-right { top: 115px; right: -57px; }.floating-right > span { background: #e6f6ef; color: var(--green); }
.trust-strip { border-block: 1px solid var(--line); background: rgba(255,255,255,.5); }
.trust-inner { display: flex; min-height: 90px; align-items: center; justify-content: space-between; gap: 22px; }
.trust-inner p { margin: 0; color: #9a8d90; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.trust-inner div { display: flex; align-items: center; gap: 8px; color: #6a5b60; font-size: 12px; font-weight: 700; }
.logo-dot { width: 10px; height: 10px; border-radius: 3px; background: #999; }.logo-dot.twitch{background:#9146ff}.logo-dot.yandex{border-radius:50%;background:#ffcb00}.logo-dot.donation{transform:rotate(45deg);background:#f28c27}.logo-dot.workspace{border-radius:50%;background:var(--coral)}
.demo-section { background: #fff; }
.demo-heading { display: grid; grid-template-columns: 1.25fr .75fr; align-items: end; gap: 80px; }
.demo-heading .kicker { margin-bottom: 28px; }
.demo-heading h2 { margin: 0; font-size: clamp(40px,4.6vw,66px); line-height: 1.03; letter-spacing: -.06em; }
.demo-heading h2 em { color: var(--coral); font-style: normal; }
.demo-heading > p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.75; }
.demo-frame { position: relative; display: grid; overflow: hidden; aspect-ratio: 16 / 8.4; margin-top: 58px; place-items: center; border: 1px solid #3c3034; border-radius: 18px; background: radial-gradient(circle at 25% 15%,rgba(240,100,105,.2),transparent 32%),radial-gradient(circle at 80% 90%,rgba(145,70,255,.14),transparent 35%),#241a1d; color: white; box-shadow: 0 35px 70px rgba(58,33,39,.16); }
.demo-grid { position: absolute; inset: 0; opacity: .18; background-image: linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px); background-size: 60px 60px; mask-image: linear-gradient(to bottom,black,transparent 90%); }
.demo-placeholder { position: relative; z-index: 1; display: flex; max-width: 620px; flex-direction: column; align-items: center; padding: 40px; text-align: center; }
.demo-play { display: grid; width: 76px; height: 76px; margin-bottom: 25px; place-items: center; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; background: var(--coral); box-shadow: 0 16px 35px rgba(240,100,105,.28); font-size: 25px; text-indent: 4px; }
.demo-placeholder strong { font-size: 27px; letter-spacing: -.04em; }
.demo-placeholder p { margin: 14px 0 0; color: #c9bdc0; font-size: 14px; line-height: 1.7; }
.demo-duration { position: absolute; top: 22px; left: 24px; display: flex; align-items: center; gap: 8px; border-radius: 99px; padding: 8px 11px; background: rgba(255,255,255,.08); color: #c9bdc0; font-size: 10px; font-weight: 700; text-transform: uppercase; }
.demo-duration span { width: 7px; height: 7px; border-radius: 50%; background: var(--coral); }
.demo-progress { position: absolute; right: 25px; bottom: 22px; left: 25px; overflow: hidden; height: 4px; border-radius: 99px; background: rgba(255,255,255,.14); }
.demo-progress i { display: block; width: 32%; height: 100%; border-radius: inherit; background: var(--coral); }
.demo-points { display: grid; grid-template-columns: repeat(3,1fr); border-bottom: 1px solid var(--line); }
.demo-points > div { display: flex; gap: 14px; border-right: 1px solid var(--line); padding: 28px 24px; }.demo-points>div:last-child{border-right:0}
.demo-points > div > span { color: var(--coral); font-size: 11px; font-weight: 800; }
.demo-points p { display: flex; flex-direction: column; margin: 0; }.demo-points strong{font-size:15px}.demo-points small{margin-top:6px;color:var(--muted);font-size:12px;line-height:1.55}
.section { padding: 112px 0; }
.split-heading { display: grid; align-items: end; grid-template-columns: .7fr 1.25fr .85fr; gap: 55px; }
.section-number { display: inline-grid; width: 29px; height: 29px; margin-right: 10px; place-items: center; border: 1px solid #ded2d4; border-radius: 50%; color: #9d8e92; font-size: 8px; }
.kicker { color: var(--coral); font-size: 10px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.split-heading > div .kicker { display: inline; }
.split-heading h2, .section-title h2, .workflow-copy h2, .changelog-heading h2 { margin: 0; font-size: clamp(40px, 4.6vw, 66px); line-height: 1.03; letter-spacing: -.06em; }
.split-heading > p, .section-title > p:last-child, .workflow-copy > p:last-child, .changelog-heading > p:last-child { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.75; }
.comparison { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 65px; }
.comparison-card { overflow: hidden; border: 1px solid var(--line); border-radius: 15px; padding: 26px; background: white; }
.comparison-top { display: flex; justify-content: space-between; }
.comparison-top p { display: flex; flex-direction: column; margin: 0; }
.comparison-top p span { margin-bottom: 6px; color: #a39498; font-size: 8px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.comparison-top strong { font-size: 18px; letter-spacing: -.03em; }
.comparison-top i { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 50%; background: #f4eeee; color: #9d8f92; font-style: normal; }
.after-card .comparison-top i { background: #e6f6ef; color: var(--green); }
.comparison-card ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; }
.comparison-card li { border: 1px solid #ece4e5; border-radius: 99px; padding: 8px 11px; color: #7f7175; font-size: 9px; }
.window-chaos { position: relative; height: 250px; margin: 24px -26px 0; background: #f5f1f1; }
.window-chaos svg { position: absolute; inset: 30px 7%; width: 86%; height: 180px; fill: none; stroke: #cdbfc2; stroke-dasharray: 4 5; }
.chaos-window { position: absolute; z-index: 2; display: flex; align-items: center; gap: 7px; width: 145px; height: 88px; border: 1px solid #d8cdcf; border-radius: 7px; padding: 11px; background: rgba(255,255,255,.94); box-shadow: 0 10px 20px rgba(52,35,39,.08); }
.chaos-window span { width: 25px; height: 25px; border-radius: 5px; background: #e6dfe0; }.chaos-window p{margin:0;font-size:9px;font-weight:700}.w-one{top:25px;left:35px;transform:rotate(-5deg)}.w-two{top:42px;right:38px;transform:rotate(4deg)}.w-three{bottom:22px;left:105px;transform:rotate(3deg)}.w-four{right:115px;bottom:15px;transform:rotate(-4deg)}
.aura-focus { overflow: hidden; height: 250px; margin: 24px -26px 0; border-top: 1px solid #efe7e8; background: #faf7f7; }
.focus-head { display: flex; align-items: center; height: 38px; border-bottom: 1px solid #eadfe1; padding: 0 15px; background: white; color: var(--coral); font-size: 10px; }.focus-head span{margin-left:auto;color:var(--green);font-size:7px}
.focus-body{display:grid;height:212px;grid-template-columns:70px 1fr}.focus-body aside{border-right:1px solid #e7dddf;background:#fff}.focus-body main{display:grid;grid-template-columns:1fr 1fr;gap:9px;padding:18px}.focus-body main i{height:112px;border:1px solid #e5dadd;border-radius:6px;background:white}.focus-body main div{height:39px;grid-column:1/-1;border:1px solid #e5dadd;border-radius:6px;background:white}
.benefits-section { background: #fff; }
.section-title { display: grid; grid-template-columns: .65fr 1.1fr .75fr; align-items: end; gap: 45px; }
.section-title .kicker { align-self: start; }
.bento-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 17px; margin-top: 65px; }
.bento-card { position: relative; overflow: hidden; min-height: 430px; border: 1px solid var(--line); border-radius: 16px; padding: 34px; background: var(--paper); }
.bento-card h3 { margin: 12px 0 17px; font-size: 34px; line-height: 1.07; letter-spacing: -.055em; }
.bento-card p:not(.kicker) { max-width: 430px; color: var(--muted); font-size: 12px; line-height: 1.7; }
.feature-icon { display: grid; width: 36px; height: 36px; margin-bottom: 28px; place-items: center; border-radius: 9px; background: var(--coral-soft); color: var(--coral); font-size: 17px; }
.bento-large { grid-column: 1 / -1; min-height: 470px; }
.coral-card { display: grid; grid-template-columns: .8fr 1.2fr; background: #fdf5f4; }
.queue-visual { position: relative; min-height: 360px; }
.queue-chip { position: absolute; display: flex; width: 420px; align-items: center; gap: 13px; border: 1px solid rgba(255,255,255,.9); border-radius: 12px; padding: 13px; background: rgba(255,255,255,.82); box-shadow: 0 18px 42px rgba(104,55,63,.13); backdrop-filter: blur(8px); }
.queue-chip i { width: 50px; height: 50px; border-radius: 8px; background: linear-gradient(135deg,#392239,#e76b7d); }.queue-chip p{display:flex;flex-direction:column;margin:0!important;color:var(--ink)!important}.queue-chip small{margin-top:4px;color:#9c8d91}.queue-chip > span{margin-left:auto;margin-right:7px;color:#c9babe;font-size:20px;font-weight:800}.chip-one{top:30px;left:65px;transform:rotate(-3deg)}.chip-two{top:132px;left:5px;transform:rotate(2deg)}.chip-two i{background:linear-gradient(135deg,#261e52,#a77fe5)}.chip-three{top:235px;left:80px;transform:rotate(-1deg)}.chip-three i{background:linear-gradient(135deg,#2a343f,#f0a260)}
.dark-card { border-color: #2c2225; background: #241a1d; color: white; }
.dark-card .feature-icon{background:rgba(255,255,255,.09);color:#ff8a8d}.dark-card .kicker{color:#ff8a8d}.dark-card p:not(.kicker){color:#b8aaae}.vinyl{position:absolute;right:-55px;bottom:-105px;display:grid;width:295px;height:295px;place-items:center;border-radius:50%;background:repeating-radial-gradient(circle,#35282c 0 3px,#211719 4px 9px);box-shadow:-20px -15px 60px rgba(240,100,105,.13)}.vinyl>div{display:grid;width:105px;height:105px;place-items:center;border-radius:50%;background:linear-gradient(145deg,#ef656b,#ce4952)}.vinyl span{font-size:28px;font-weight:800}
.modes-card { background: #faf7f7; }.mode-switch{display:flex;width:max-content;margin-top:28px;border:1px solid #e3d9db;border-radius:6px;padding:3px;background:white}.mode-switch span{border-radius:4px;padding:7px 12px;color:#9a8b8f;font-size:8px;font-weight:700}.mode-switch .selected{background:var(--coral);color:white}.mode-previews{display:flex;gap:12px;margin-top:22px}.mode-previews>div{display:flex;overflow:hidden;width:145px;height:90px;border:1px solid #ded2d4;border-radius:6px;background:white}.mode-previews i{width:27px;border-right:1px solid #e3d8da;background:#faf6f6}.mode-previews main{flex:1}.mode-previews aside{width:42px;border-left:1px solid #e3d8da;background:#292023}
.security-card { grid-column: 1 / -1; display: flex; min-height: 250px; align-items: flex-start; }.security-card .feature-icon{margin-right:22px;flex:0 0 auto}.security-card .kicker,.security-card h3,.security-card>p{margin-left:0}.security-card h3{position:absolute;top:72px;left:92px}.security-card>p{position:absolute;top:130px;left:92px}.secure-line{display:flex;align-items:center;width:390px;margin:35px 0 0 auto;border:1px solid #e1d6d8;border-radius:10px;padding:17px;background:white;color:#796b6f;font-size:9px}.secure-line b{margin-left:auto;border-radius:99px;padding:7px 10px;background:#e6f6ef;color:var(--green);font-size:8px}
.capability-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 17px; margin-top: 65px; }
.capability-card { display: flex; min-height: 285px; flex-direction: column; border: 1px solid var(--line); border-radius: 16px; padding: 30px; background: var(--paper); }
.capability-card > span { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 10px; background: var(--coral-soft); color: var(--coral); font-size: 12px; font-weight: 800; }
.capability-card .kicker { margin: 32px 0 10px; }
.capability-card h3 { margin: 0 0 16px; font-size: 28px; line-height: 1.12; letter-spacing: -.045em; }
.capability-card > p:not(.kicker) { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.75; }
.capability-card > small { margin-top: auto; padding-top: 24px; color: #8d7e82; font-size: 12px; line-height: 1.55; }
.capability-primary { grid-column: span 2; background: #fdf2f1; }
.capability-primary h3 { max-width: 620px; font-size: 38px; }
.capability-primary > p:not(.kicker) { max-width: 650px; }
.capability-dark { border-color: #2c2225; background: var(--ink); color: white; }
.capability-dark > span { background: rgba(240,100,105,.16); color: #ff8589; }
.capability-dark .kicker { color: #ff8589; }
.capability-dark > p:not(.kicker), .capability-dark > small { color: #c7babe; }
.music-services-section { background: #f3eeee; }
.music-services-heading { display: grid; grid-template-columns: 1.05fr .95fr; align-items: end; gap: 80px; }
.music-services-heading .kicker { margin-bottom: 28px; }
.music-services-heading h2 { margin: 0; font-size: clamp(40px,4.6vw,66px); line-height: 1.03; letter-spacing: -.06em; }
.music-services-heading h2 em { color: var(--coral); font-style: normal; }
.music-services-heading > p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.8; }
.services-browser { overflow: hidden; margin-top: 65px; border: 1px solid #dacfd1; border-radius: 18px; background: white; box-shadow: 0 28px 65px rgba(75,43,51,.11); }
.services-browser-bar { display: grid; min-height: 58px; align-items: center; grid-template-columns: 1fr auto 1fr; border-bottom: 1px solid var(--line); padding: 0 20px; color: #75676b; font-size: 13px; font-weight: 700; }
.services-browser-bar > div { display: flex; gap: 6px; }
.services-browser-bar > div i { width: 9px; height: 9px; border-radius: 50%; background: #e1d5d7; }
.services-browser-bar > div i:first-child { background: var(--coral); }
.service-open-action { justify-self: end; border: 1px solid #dfd4d6; border-radius: 7px; padding: 9px 12px; color: var(--coral); font-size: 12px; }
.services-browser-body { display: grid; min-height: 390px; grid-template-columns: 220px 1fr; }
.service-tabs { display: flex; flex-direction: column; gap: 5px; border-right: 1px solid var(--line); padding: 22px 15px; background: #fdfafa; }
.service-tabs > span { display: flex; align-items: center; gap: 11px; border-radius: 10px; padding: 9px 10px; color: #68595e; font-size: 13px; font-weight: 700; }
.service-tabs > span.active { background: var(--coral-soft); color: var(--coral); }
.service-tabs > span.service-soon { color: #a99ca0; }
.service-tabs > span.service-soon .service-logo { opacity: 0.55; }
.soon-badge { margin-left: auto; padding: 2px 7px; border-radius: 100px; background: #efe9ea; color: #8b7d81; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; }
.service-logo { display: grid; overflow: hidden; width: 32px; height: 32px; flex: 0 0 auto; place-items: center; border-radius: 9px; background: #eee; font-style: normal; }
.service-logo img { display: block; width: 19px; height: 19px; filter: brightness(0) invert(1); object-fit: contain; }
.service-youtube { background: #ff0033; }
.service-spotify { background: #1ed760; }
.service-soundcloud { background: #ff5500; }
.service-vk { background: #0077ff; }
.service-yandex { background: #ffdd2d; }
.service-yandex img { width: 32px; height: 32px; filter: none; }
.service-more { border: 1px dashed #d6c9cb; background: white; color: var(--coral); font-size: 18px; }
.service-panel-preview { display: grid; align-items: center; grid-template-columns: 1.15fr .85fr; gap: 45px; padding: 55px; background: radial-gradient(circle at 85% 20%,rgba(240,100,105,.13),transparent 33%),#fff; }
.service-panel-copy { display: flex; flex-direction: column; }
.service-panel-copy small { color: var(--coral); font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.service-panel-copy strong { margin-top: 18px; font-size: 34px; line-height: 1.1; letter-spacing: -.05em; }
.service-panel-copy p { margin: 18px 0 0; color: var(--muted); font-size: 14px; line-height: 1.75; }
.service-panel-art { position: relative; display: grid; width: 230px; height: 230px; place-items: center; justify-self: center; border-radius: 50%; background: repeating-radial-gradient(circle,#382a2e 0 3px,#241a1d 4px 10px); box-shadow: 0 25px 50px rgba(47,29,34,.2); }
.service-panel-art > span { display: grid; z-index: 1; width: 84px; height: 84px; place-items: center; border-radius: 50%; background: var(--coral); color: white; font-size: 28px; }
.service-panel-art i { position: absolute; top: 50%; left: 50%; width: 280px; height: 1px; background: linear-gradient(90deg,transparent,rgba(240,100,105,.35),transparent); transform: translate(-50%,-50%) rotate(25deg); }
.service-panel-art i:nth-of-type(2) { transform: translate(-50%,-50%) rotate(-25deg); }
.service-panel-art i:nth-of-type(3) { transform: translate(-50%,-50%) rotate(90deg); }
.services-explanation { display: grid; grid-template-columns: 1.25fr .75fr; gap: 18px; margin-top: 18px; }
.services-explanation > p, .services-explanation > div { margin: 0; border: 1px solid #ded3d5; border-radius: 14px; padding: 28px; background: rgba(255,255,255,.65); color: #66575b; font-size: 14px; line-height: 1.8; }
.services-explanation > div { display: flex; align-items: flex-start; gap: 13px; }
.services-explanation > div > span { border-radius: 99px; padding: 6px 9px; background: var(--coral-soft); color: var(--coral); font-size: 11px; font-weight: 800; text-transform: uppercase; }
.services-explanation > div p { margin: 0; }
.music-feature-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 17px; margin-top: 45px; }
.music-feature-card { min-height: 205px; border: 1px solid #ded3d5; border-radius: 14px; padding: 26px; background: rgba(255,255,255,.68); }
.music-feature-card > span { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 10px; background: white; color: var(--coral); font-size: 18px; }
.music-feature-card h3 { margin: 27px 0 12px; font-size: 21px; letter-spacing: -.035em; }
.music-feature-card p { margin: 0; color: #66575b; font-size: 14px; line-height: 1.75; }
.service-notes { margin-top: 28px; border-left: 3px solid var(--coral); padding: 4px 0 4px 20px; }
.service-notes p { margin: 0 0 10px; color: #5e4f53; font-size: 13px; font-weight: 700; line-height: 1.65; }
.service-notes small { display: block; max-width: 1020px; color: #796a6e; font-size: 12px; line-height: 1.7; }
.workflow-section { background: #fff; }
.workflow-layout { display: grid; grid-template-columns: .85fr 1.15fr; gap: 90px; }
.workflow-copy { position: sticky; top: 130px; align-self: start; }
.workflow-copy .kicker { margin-bottom: 28px; }
.workflow-copy > p:last-child { max-width: 410px; margin-top: 28px; }
.workflow-steps { margin: 0; padding: 0; list-style: none; }
.workflow-steps li { display: grid; min-height: 180px; align-items: start; grid-template-columns: 45px 1fr 55px; gap: 20px; border-top: 1px solid #dcd1d3; padding: 31px 0; }
.workflow-steps li > span { color: var(--coral); font-size: 9px; font-weight: 800; }
.workflow-steps strong { font-size: 21px; letter-spacing: -.03em; }
.workflow-steps p { max-width: 450px; margin: 12px 0 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
.workflow-steps i { display: grid; width: 47px; height: 47px; place-items: center; border: 1px solid #ddd1d3; border-radius: 12px; background: rgba(255,255,255,.55); color: var(--coral); font-size: 20px; font-style: normal; }
.workspace-flow { display: grid; align-items: center; grid-template-columns: 1fr auto 150px auto 1.25fr; gap: 16px; }
.workspace-flow > i { color: var(--coral); font-size: 24px; font-style: normal; }
.workspace-sources { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.workspace-sources span { display: grid; min-height: 54px; place-items: center; border: 1px solid #ded3d5; border-radius: 10px; background: rgba(255,255,255,.62); color: #5f5054; font-size: 13px; font-weight: 800; }
.workspace-sources span:last-child { grid-column: 1 / -1; }
.workspace-core, .workspace-result { display: flex; min-height: 150px; flex-direction: column; align-items: center; justify-content: center; border-radius: 16px; padding: 22px; text-align: center; }
.workspace-core { background: var(--coral); color: white; box-shadow: 0 18px 38px rgba(240,100,105,.26); }
.workspace-result { border: 1px solid #d9cdcf; background: white; }
.workspace-core b { font-size: 28px; letter-spacing: -.05em; }
.workspace-result b { font-size: 20px; line-height: 1.2; letter-spacing: -.035em; }
.workspace-core small, .workspace-result small { margin-top: 9px; font-size: 12px; line-height: 1.55; }
.workspace-core small { color: #ffe7e7; }
.workspace-result small { color: var(--muted); }
.roadmap-section { background: #fff; }
.suggestions-heading { display: grid; grid-template-columns: 1.25fr .75fr; align-items: end; gap: 80px; }
.suggestions-heading .kicker { margin-bottom: 28px; }
.suggestions-heading h2 { margin: 0; font-size: clamp(40px,4.6vw,66px); line-height: 1.03; letter-spacing: -.06em; }
.suggestions-heading h2 em { color: var(--coral); font-style: normal; }
.suggestions-heading > p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.75; }
.suggestions-card { display: grid; overflow: hidden; min-height: 500px; grid-template-columns: 1.08fr .92fr; margin-top: 55px; border: 1px solid #2c2225; border-radius: 18px; background: #241a1d; color: white; }
.suggestions-copy { position: relative; overflow: hidden; padding: 55px; }
.suggestions-copy::after { position: absolute; right: -190px; bottom: -330px; width: 570px; height: 570px; border: 1px solid rgba(255,255,255,.07); border-radius: 50%; box-shadow: 0 0 0 65px rgba(255,255,255,.02),0 0 0 130px rgba(255,255,255,.015); content: ""; }
.suggestions-label { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 9px; color: #ff8a8e; font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.suggestions-label span { display: grid; width: 25px; height: 25px; place-items: center; border-radius: 7px; background: rgba(240,100,105,.14); font-size: 15px; }
.suggestions-copy h3 { position: relative; z-index: 1; margin: 43px 0 21px; font-size: clamp(36px,4vw,55px); line-height: 1.03; letter-spacing: -.06em; }
.suggestions-copy h3 em { color: #ff777b; font-style: normal; }
.suggestions-copy > p { position: relative; z-index: 1; max-width: 570px; color: #baadaf; font-size: 13px; line-height: 1.8; }
.suggestion-types { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 7px; margin: 29px 0; }
.suggestion-types span { border: 1px solid #514247; border-radius: 99px; padding: 8px 11px; background: rgba(255,255,255,.035); color: #c9bdc0; font-size: 8px; }
.suggestions-rewards { display: flex; flex-direction: column; justify-content: center; border-left: 1px solid #44373b; padding: 43px; background: #2b2023; }
.suggestions-rewards > .kicker { color: #ff8a8e; }
.reward-option { display: flex; align-items: flex-start; gap: 16px; border-top: 1px solid #473a3e; padding: 22px 0; }
.reward-icon { display: grid; width: 39px; height: 39px; flex: 0 0 auto; place-items: center; border-radius: 10px; background: rgba(240,100,105,.12); color: #ff7b7f; }
.reward-option p { display: flex; flex-direction: column; margin: 0; }
.reward-option small { color: #a99a9e; font-size: 8px; text-transform: uppercase; }
.reward-option strong { margin-top: 7px; font-size: 17px; }
.reward-option p > span { max-width: 340px; margin-top: 7px; color: #a99a9e; font-size: 9px; line-height: 1.65; }
.suggestion-steps { display: flex; align-items: center; justify-content: space-between; border-radius: 9px; padding: 14px; background: rgba(255,255,255,.045); color: #a99a9e; font-size: 8px; }
.suggestion-steps span { display: flex; align-items: center; gap: 6px; }.suggestion-steps b{color:#ff7b7f}.suggestion-steps i{color:#685a5e;font-style:normal}
.suggestions-condition { margin: 14px 0 0; color: #817276; font-size: 7px; line-height: 1.6; text-align: center; }
.beta-section { padding-block: 90px; background: white; }
.beta-card { position: relative; overflow: hidden; min-height: 500px; border-radius: 20px; padding: 60px; background: #241a1d; color: white; }
.beta-card::after { position: absolute; right: -180px; bottom: -320px; width: 700px; height: 700px; border: 1px solid rgba(255,255,255,.08); border-radius: 50%; box-shadow: 0 0 0 70px rgba(255,255,255,.025), 0 0 0 140px rgba(255,255,255,.02); content: ""; }
.beta-copy { position: relative; z-index: 2; max-width: 650px; }
.live-label { display: inline-flex; align-items: center; gap: 9px; border-radius: 99px; padding: 8px 12px; background: rgba(255,255,255,.08); color: #d9cccf; font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.beta-copy h2 { margin: 27px 0 21px; font-size: clamp(43px,5vw,68px); line-height: 1.02; letter-spacing: -.06em; }.beta-copy h2 em{color:#ff777b;font-style:normal}.beta-copy>p{max-width:580px;color:#b9abad;font-size:14px;line-height:1.75}.text-link{display:inline-flex;gap:25px;margin-top:18px;border-bottom:1px solid #5d4e52;padding-bottom:7px;font-size:11px;font-weight:700}.text-link span{color:#ff777b}
.beta-stats { position: absolute; z-index: 2; right: 65px; bottom: 65px; display: flex; gap: 40px; }.beta-stats div{display:flex;align-items:center;gap:10px}.beta-stats strong{color:#ff777b;font-size:39px;letter-spacing:-.06em}.beta-stats span{color:#a99a9e;font-size:8px;line-height:1.5;text-transform:uppercase}
.beta-quote { position: absolute; z-index: 2; right: 75px; top: 65px; width: 300px; border-left: 1px solid #59494d; padding-left: 28px; }.beta-quote span{color:#ff777b;font-size:38px;line-height:.7}.beta-quote p{margin:8px 0 0;color:#c5b8bb;font-size:11px;line-height:1.7}
.beta-process { display: grid; align-items: center; grid-template-columns: .7fr 1.7fr auto; gap: 38px; margin-top: 18px; border: 1px solid var(--line); border-radius: 16px; padding: 34px; background: var(--paper); }
.beta-process-heading .kicker { margin-bottom: 11px; }
.beta-process-heading h3 { margin: 0; font-size: 25px; line-height: 1.08; letter-spacing: -.045em; }
.beta-process-steps { display: grid; grid-template-columns: repeat(4,1fr); gap: 0; margin: 0; padding: 0; list-style: none; }
.beta-process-steps li { display: flex; gap: 10px; border-left: 1px solid var(--line); padding: 4px 18px; }
.beta-process-steps li > span { color: var(--coral); font-size: 11px; font-weight: 800; }
.beta-process-steps p { display: flex; flex-direction: column; margin: 0; }.beta-process-steps strong{font-size:14px}.beta-process-steps small{margin-top:6px;color:var(--muted);font-size:12px;line-height:1.6}
.beta-process .button { white-space: nowrap; }
.testimonials-section { overflow: hidden; background: #f3eeee; }
.testimonials-heading { display: grid; grid-template-columns: 1.25fr .75fr; align-items: end; gap: 80px; }
.testimonials-heading .kicker { margin-bottom: 28px; }
.testimonials-heading h2 { margin: 0; font-size: clamp(40px, 4.6vw, 66px); line-height: 1.03; letter-spacing: -.06em; }
.testimonials-heading h2 em { color: var(--coral); font-style: normal; }
.testimonials-heading > p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.75; }
.carousel { margin-top: 62px; }
.carousel-viewport { overflow: hidden; }
.carousel-track { display: flex; gap: 17px; will-change: transform; }
.testimonial-card { overflow: hidden; min-height: 360px; flex: 0 0 calc((100% - 34px) / 3); border: 1px solid #dfd4d6; border-radius: 16px; background: rgba(255,255,255,.78); transition: border-color .25s, box-shadow .25s, transform .25s; }
.testimonial-card:hover { border-color: #d2bfc2; box-shadow: 0 20px 45px rgba(69,39,46,.09); transform: translateY(-5px); }
.streamer-photo { position: relative; display: grid; overflow: hidden; height: 250px; place-items: center; background: linear-gradient(145deg,#f48a68,#9b3f64); color: rgba(255,255,255,.92); }
.streamer-photo::before { position: absolute; width: 175px; height: 175px; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; box-shadow: 0 0 0 35px rgba(255,255,255,.04),0 0 0 70px rgba(255,255,255,.025); content: ""; }
.streamer-photo::after { position: absolute; inset: auto 0 0; height: 45%; background: linear-gradient(transparent,rgba(31,19,23,.46)); content: ""; }
.streamer-photo > span { position: absolute; z-index: 0; font-size: 42px; font-weight: 800; letter-spacing: -.06em; }
.streamer-photo > img { position: relative; z-index: 1; width: 128px; height: 128px; border: 4px solid rgba(255,255,255,.75); border-radius: 50%; box-shadow: 0 18px 35px rgba(34,19,24,.25); object-fit: cover; }
.streamer-photo > i { position: absolute; z-index: 2; right: 15px; bottom: 14px; border: 1px solid rgba(255,255,255,.24); border-radius: 99px; padding: 7px 9px; background: rgba(31,20,24,.36); color: white; font-size: 9px; font-style: normal; font-weight: 800; text-transform: uppercase; backdrop-filter: blur(8px); }
.profile-owl{background:linear-gradient(145deg,#443268,#8467d5)}.profile-mira{background:linear-gradient(145deg,#52b5aa,#216c77)}.profile-pixel{background:linear-gradient(145deg,#4975bc,#844ba2)}.profile-coffee{background:linear-gradient(145deg,#c88c61,#694838)}.profile-mia{background:linear-gradient(145deg,#d54d7a,#5a2a52)}
.streamer-profile { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 22px; }
.streamer-profile > a { font-size: 15px; font-weight: 800; letter-spacing: -.02em; transition: color .2s; }.streamer-profile>a:hover{color:var(--coral)}
.streamer-profile p { display: flex; flex-direction: column; margin: 0; color: #5d4e52; font-size: 13px; text-align: right; }.streamer-profile p span{margin-bottom:4px;color:#9a8b8f;font-size:9px;font-weight:800;text-transform:uppercase}
.faq-section { background: white; }
.faq-layout { display: grid; grid-template-columns: .75fr 1.25fr; gap: 95px; }
.faq-heading { position: sticky; top: 130px; align-self: start; }.faq-heading .kicker{margin-bottom:28px}.faq-heading h2{margin:0;font-size:clamp(40px,4.6vw,66px);line-height:1.03;letter-spacing:-.06em}.faq-heading h2 em{color:var(--coral);font-style:normal}.faq-heading>p{max-width:340px;margin-top:25px;color:var(--muted);font-size:13px;line-height:1.75}
.faq-list details { border-top: 1px solid var(--line); padding: 25px 0; }
.faq-list details:last-child { border-bottom: 1px solid var(--line); }
.faq-list summary { position: relative; padding-right: 48px; font-size: 17px; font-weight: 700; letter-spacing: -.025em; cursor: pointer; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { position: absolute; top: 50%; right: 5px; display: grid; width: 29px; height: 29px; place-items: center; border: 1px solid #e1d6d8; border-radius: 50%; color: var(--coral); content: "+"; transform: translateY(-50%); transition: transform .2s,background .2s,color .2s; }
.faq-list details[open] summary::after { background: var(--coral); color: white; content: "−"; transform: translateY(-50%) rotate(180deg); }
.faq-list details p { max-width: 610px; margin: 18px 45px 0 0; color: var(--muted); font-size: 12px; line-height: 1.8; }
.faq-list details a { color: var(--coral); font-weight: 700; }
.changelog-section { background: var(--paper); }
.changelog-layout { display: grid; grid-template-columns: .85fr 1.15fr; gap: 95px; }
.changelog-heading { position: sticky; top: 130px; align-self: start; }
.changelog-heading .kicker { margin-bottom: 28px; }
.changelog-heading > p:last-child { margin-top: 27px; }
.release { display: grid; grid-template-columns: 82px 1fr; gap: 25px; border-top: 1px solid #ded3d5; padding: 32px 0 45px; }
.release-date { display: flex; gap: 7px; align-items: flex-start; }.release-date>span{font-size:29px;font-weight:800;letter-spacing:-.06em}.release-date p{display:flex;flex-direction:column;margin:4px 0 0;color:#796b6f;font-size:8px;text-transform:uppercase}.release-date small{margin-top:3px;color:#a99b9e;font-size:7px}.release-meta{display:flex;align-items:center;margin-bottom:13px}.release-meta span{border-radius:99px;padding:7px 10px;background:#f2e9ea;color:#78686c;font-size:7px;font-weight:800;text-transform:uppercase}.release-meta b{margin-left:auto;color:#ad9da1;font-size:8px}.release-body h3{margin:0 0 12px;font-size:23px;letter-spacing:-.04em}.release-body>p{margin:0;color:var(--muted);font-size:11px;line-height:1.75}.release-body ul{display:flex;flex-wrap:wrap;gap:7px;margin:17px 0 0;padding:0;list-style:none}.release-body li{border:1px solid #e7dcde;border-radius:99px;padding:7px 9px;color:#897a7e;font-size:8px}.release-current{border-top-color:var(--coral)}.release-current .release-date>span{color:var(--coral)}.release-current .release-meta span{background:var(--coral-soft);color:var(--coral)}
[data-release-hidden]{display:none}.changelog-list.expanded [data-release-hidden]{display:grid}.changelog-more{width:100%;border:1px solid #ded3d5;border-radius:7px;padding:14px;background:transparent;color:#76676b;font-size:10px;font-weight:700;cursor:pointer}.changelog-more span{margin-left:12px;color:var(--coral)}.changelog-more:hover{background:white}
.final-cta { position: relative; overflow: hidden; padding: 130px 0; background: var(--coral); color: white; text-align: center; }
.cta-glow { position: absolute; inset: 0; background: radial-gradient(circle at 50% 120%,rgba(255,255,255,.25),transparent 48%); }.final-cta .container{position:relative}.eyebrow.light{border-color:rgba(255,255,255,.24);background:rgba(255,255,255,.1);color:white}.eyebrow.light>span{background:white;box-shadow:0 0 0 4px rgba(255,255,255,.12)}.final-cta h2{margin:28px 0 23px;font-size:clamp(54px,7vw,92px);line-height:.95;letter-spacing:-.07em}.final-cta h2 em{color:#331f24;font-style:normal}.final-cta p{max-width:620px;margin:0 auto;color:#ffe9e9;font-size:14px;line-height:1.75}.button-light{margin-top:31px;background:white;color:var(--coral)}
.site-footer { border-top: 1px solid var(--line); background: white; }
.footer-inner { display: grid; min-height: 120px; align-items: center; grid-template-columns: .55fr 1fr 1fr auto; gap: 25px; }.footer-inner>p,.footer-inner>span{margin:0;color:#9a8c90;font-size:9px}.footer-inner nav{display:flex;justify-content:center;gap:25px;color:#68595e;font-size:10px;font-weight:700}
.eyebrow { font-size: 12px; }
.hero-note p { color: #76676b; font-size: 13px; line-height: 1.55; }
.hero-note strong { font-size: 14px; }
.trust-inner p { color: #827478; font-size: 12px; }
.trust-inner div { font-size: 14px; }
.section-number { font-size: 10px; }
.kicker { font-size: 12px; }
.comparison-top p span { color: #8e7f83; font-size: 11px; }
.comparison-card li { color: #6f6064; font-size: 12px; }
.bento-card p:not(.kicker) { font-size: 14px; line-height: 1.75; }
.mode-switch span { font-size: 11px; }
.secure-line { color: #68595e; font-size: 12px; }
.secure-line b { font-size: 10px; }
.workflow-steps li > span { font-size: 11px; }
.workflow-steps p { font-size: 14px; line-height: 1.75; }
.suggestions-label { font-size: 11px; }
.suggestions-copy > p { color: #cbbfc1; font-size: 15px; }
.suggestion-types span { color: #ded3d5; font-size: 11px; }
.reward-option small { color: #b9abad; font-size: 10px; }
.reward-option strong { font-size: 19px; }
.reward-option p > span { color: #b9abad; font-size: 12px; line-height: 1.7; }
.suggestion-steps { color: #b9abad; font-size: 10px; }
.suggestions-condition { color: #a4969a; font-size: 10px; line-height: 1.65; }
.live-label { font-size: 11px; }
.text-link { font-size: 13px; }
.beta-stats span { color: #b9abad; font-size: 10px; }
.beta-quote p { color: #d2c7c9; font-size: 13px; }
.faq-heading > p { font-size: 14px; }
.faq-list details p { color: #66575b; font-size: 14px; line-height: 1.8; }
.release-date p { color: #68595e; font-size: 10px; }
.release-date small { color: #8d7e82; font-size: 9px; }
.release-meta span { font-size: 10px; }
.release-meta b { color: #8d7e82; font-size: 10px; }
.release-body > p { color: #66575b; font-size: 14px; line-height: 1.8; }
.release-body li { color: #746569; font-size: 10px; }
.changelog-more { font-size: 12px; }
.footer-inner > p, .footer-inner > span { color: #817276; font-size: 11px; }
.footer-inner nav { font-size: 12px; }
.app-window { animation: stage-float 7s ease-in-out infinite; }
.orbit-one { animation: orbit-turn 28s linear infinite; }.orbit-two{animation:orbit-turn-reverse 34s linear infinite}
.vinyl { animation: vinyl-turn 16s linear infinite; }
.floating-left { animation: card-float 5s ease-in-out infinite; }.floating-right{animation:card-float 5s ease-in-out -2.2s infinite}
.pulse-dot, .live-label span { animation: status-pulse 2.2s ease-out infinite; }
.bento-card { transition: transform .3s, box-shadow .3s, border-color .3s; }
.bento-card:hover { border-color: #d9c9cc; box-shadow: 0 24px 55px rgba(70,40,47,.08); transform: translateY(-5px); }
@keyframes stage-float { 0%,100%{transform:rotateX(2deg) translateY(0)}50%{transform:rotateX(2deg) translateY(-9px)} }
@keyframes orbit-turn { to{transform:rotate(352deg)} }
@keyframes orbit-turn-reverse { to{transform:rotate(-348deg)} }
@keyframes vinyl-turn { to{transform:rotate(360deg)} }
@keyframes card-float { 0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)} }
@keyframes status-pulse { 0%{box-shadow:0 0 0 0 rgba(42,172,123,.25)}70%,100%{box-shadow:0 0 0 9px rgba(42,172,123,0)} }
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}.button,.carousel-track,.testimonial-card,.bento-card{transition:none}.app-window,.orbit-one,.orbit-two,.vinyl,.floating-left,.floating-right,.pulse-dot,.live-label span{animation:none} }

@media (max-width: 980px) {
  .main-nav { gap: 14px; }.header-cta{display:none}.hero{padding-top:140px}.product-stage{width:920px;margin-left:50%;transform:translateX(-50%) scale(.82);margin-top:15px;margin-bottom:-45px}.floating-card{display:none}.split-heading,.section-title{grid-template-columns:1fr 1.3fr}.split-heading>p,.section-title>p:last-child{grid-column:2}.demo-heading{gap:45px}.bento-grid{grid-template-columns:1fr}.bento-card{grid-column:auto}.coral-card{grid-column:auto}.security-card{grid-column:auto}.workflow-layout,.changelog-layout,.faq-layout{gap:50px}.suggestions-heading,.testimonials-heading{gap:45px}.suggestions-card{grid-template-columns:1fr}.suggestions-rewards{border-top:1px solid #44373b;border-left:0}.beta-card{padding:50px}.beta-quote{display:none}.beta-stats{right:50px;bottom:50px}.beta-process{grid-template-columns:1fr}.beta-process-steps li:first-child{border-left:0}.testimonial-card{flex-basis:calc((100% - 17px) / 2)}
}

@media (max-width: 720px) {
  .container{width:min(100% - 30px,1180px)}.header-inner{height:66px}.menu-button{display:flex;width:42px;height:42px;margin-left:auto;flex-direction:column;justify-content:center;gap:6px;border:0;background:transparent}.menu-button span{display:block;width:20px;height:2px;margin:auto;background:var(--ink);transition:transform .2s}.menu-button[aria-expanded="true"] span:first-child{transform:translateY(4px) rotate(45deg)}.menu-button[aria-expanded="true"] span:last-child{transform:translateY(-4px) rotate(-45deg)}.main-nav{position:fixed;inset:66px 0 0;display:none;flex-direction:column;align-items:flex-start;gap:0;padding:30px;background:var(--paper);font-size:20px}.main-nav.open{display:flex}.main-nav a{width:100%;border-bottom:1px solid var(--line);padding:18px 0}.hero{padding:120px 0 70px}.hero-lead{font-size:15px}.hero-actions{flex-direction:column}.hero-actions .button{width:100%}.hero-note{margin-top:23px}.product-stage{width:850px;transform:translateX(-50%) scale(.52);margin-top:-65px;margin-bottom:-145px}.trust-inner{display:grid;grid-template-columns:1fr 1fr;padding-block:25px}.trust-inner p{grid-column:1/-1}.section{padding:85px 0}.split-heading,.section-title,.demo-heading,.suggestions-heading,.testimonials-heading{display:block}.split-heading h2,.section-title h2,.demo-heading h2,.suggestions-heading h2,.testimonials-heading h2{margin:24px 0}.split-heading>p,.section-title>p:last-child,.demo-heading>p,.suggestions-heading>p,.testimonials-heading>p{margin-top:20px}.demo-frame{aspect-ratio:1/1;margin-top:40px}.demo-placeholder{padding:28px}.demo-placeholder strong{font-size:23px}.demo-points{grid-template-columns:1fr}.demo-points>div{border-right:0;border-bottom:1px solid var(--line)}.demo-points>div:last-child{border-bottom:0}.comparison{grid-template-columns:1fr;margin-top:40px}.comparison-card{padding:20px}.window-chaos,.aura-focus{margin-inline:-20px}.w-one{left:16px}.w-two{right:17px}.w-three{left:48px}.w-four{right:50px}.bento-grid{grid-template-columns:1fr;margin-top:40px}.bento-card{min-height:390px;padding:25px}.bento-card h3{font-size:29px}.coral-card{display:block;min-height:670px}.queue-visual{transform:scale(.75);transform-origin:left top}.queue-chip{width:390px}.chip-one{left:20px}.chip-two{left:-10px}.chip-three{left:25px}.security-card{display:block;min-height:390px}.security-card h3,.security-card>p{position:static}.secure-line{width:100%;margin-top:35px}.suggestions-card{margin-top:40px}.suggestions-copy,.suggestions-rewards{padding:28px}.suggestions-copy h3{margin-top:32px}.suggestion-steps{gap:6px}.testimonial-card{flex-basis:100%}.carousel-controls{grid-template-columns:70px 1fr 95px}.testimonial-card blockquote{min-height:auto}.workflow-layout,.changelog-layout,.faq-layout{display:block}.workflow-copy,.changelog-heading,.faq-heading{position:static;margin-bottom:50px}.workflow-steps li{grid-template-columns:35px 1fr}.workflow-steps i{display:none}.beta-section{padding-block:15px}.beta-card{min-height:680px;padding:35px 25px}.beta-stats{right:auto;bottom:45px;left:25px;flex-direction:column;gap:14px}.beta-stats div{min-width:145px}.beta-process{padding:26px}.beta-process-steps{grid-template-columns:1fr}.beta-process-steps li{border-top:1px solid var(--line);border-left:0;padding:16px 0}.beta-process .button{width:100%}.release{grid-template-columns:62px 1fr;gap:15px}.final-cta{padding:90px 0}.footer-inner{display:flex;min-height:180px;flex-wrap:wrap;justify-content:space-between;padding-block:35px}.footer-inner>p{width:100%;order:2}.footer-inner nav{width:100%;justify-content:flex-start;order:3}.footer-inner>span{order:4}
}

@media (max-width: 980px) {
  .capability-grid, .music-feature-grid { grid-template-columns: repeat(2,1fr); }
  .capability-primary { grid-column: 1 / -1; }
  .music-services-heading { gap: 45px; }
  .services-browser-body { grid-template-columns: 180px 1fr; }
  .service-panel-preview { gap: 25px; padding: 38px; }
  .service-panel-art { width: 180px; height: 180px; }
  .workspace-flow { grid-template-columns: 1fr auto 120px auto 1.2fr; gap: 10px; }
}

@media (max-width: 720px) {
  h1 { font-size: clamp(43px,14vw,58px); line-height: .98; }
  .hero-summary { font-size: 13px; line-height: 1.6; }
  .capability-grid, .music-feature-grid { grid-template-columns: 1fr; margin-top: 40px; }
  .capability-primary { grid-column: auto; }
  .capability-card { min-height: 320px; padding: 25px; }
  .capability-primary h3 { font-size: 29px; }
  .music-services-heading { display: block; }
  .music-services-heading h2 { margin: 24px 0; }
  .music-services-heading > p { margin-top: 20px; }
  .services-browser { margin-top: 40px; }
  .services-browser-bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding: 14px; }
  .services-browser-bar > span:nth-child(2) { display: none; }
  .service-open-action { width: 100%; text-align: center; }
  .services-browser-body { display: block; min-height: 0; }
  .service-tabs { overflow-x: auto; flex-direction: row; border-right: 0; border-bottom: 1px solid var(--line); padding: 12px; }
  .service-tabs span { flex: 0 0 auto; }
  .service-panel-preview { display: block; padding: 32px 24px; }
  .service-panel-copy strong { font-size: 28px; }
  .service-panel-art { display: none; }
  .services-explanation { grid-template-columns: 1fr; }
  .services-explanation > p, .services-explanation > div { padding: 22px; }
  .services-explanation > div { display: block; }
  .services-explanation > div > span { display: inline-block; margin-bottom: 12px; }
  .music-feature-card { min-height: 0; padding: 24px; }
  .workspace-flow { grid-template-columns: 1fr; }
  .workspace-flow > i { transform: rotate(90deg); text-align: center; }
  .workspace-core, .workspace-result { min-height: 125px; }
}

@media (max-width: 720px) {
  .container { width: min(100% - 32px,1180px); }
  .site-header.scrolled { backdrop-filter: blur(12px); }
  .site-header::before { position: fixed; z-index: 1; inset: 66px 0 0; background: rgba(36,26,29,.34); content: ""; opacity: 0; pointer-events: none; transition: opacity .25s ease; }
  body.menu-open .site-header { border-color: var(--line); background: var(--paper); }
  body.menu-open .site-header::before { opacity: 1; pointer-events: auto; }
  .header-inner { position: relative; z-index: 3; gap: 16px; }
  .brand { font-size: 22px; }
  .menu-button { position: relative; z-index: 4; width: 44px; height: 44px; border-radius: 9px; }
  .menu-button:hover { background: var(--coral-soft); }
  .menu-button:focus-visible, .main-nav a:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; }
  .main-nav { z-index: 2; top: 66px; right: 0; bottom: 0; left: auto; display: flex; width: min(88vw,360px); margin: 0; overflow-y: auto; flex-direction: column; align-items: stretch; gap: 0; padding: 18px 24px 40px; background: white; box-shadow: -20px 25px 55px rgba(53,30,36,.18); font-size: 18px; opacity: 0; visibility: hidden; pointer-events: none; transform: translateX(100%); transition: transform .28s ease, opacity .2s ease, visibility 0s linear .28s; }
  .main-nav.open { display: flex; opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(0); transition-delay: 0s; }
  .main-nav a { display: flex; min-height: 58px; align-items: center; border-bottom: 1px solid var(--line); padding: 12px 2px; }
  .main-nav a::after { margin-left: auto; color: var(--coral); content: "→"; font-size: 16px; }
  .hero { padding: 108px 0 72px; }
  .hero-glow-left { left: -390px; }
  .hero-glow-right { right: -430px; }
  .eyebrow { padding: 7px 11px; font-size: 10px; }
  h1 { margin: 24px auto 21px; font-size: clamp(40px,12.2vw,52px); letter-spacing: -.06em; }
  .hero-lead { font-size: 16px; line-height: 1.65; }
  .hero-actions { margin-top: 28px; }
  .button { min-height: 52px; padding-inline: 18px; }
  .hero-summary { margin-top: 20px; }
  .hero-note { align-items: flex-start; margin-top: 25px; }
  .hero-note p { font-size: 12px; }
  .hero-note strong { font-size: 13px; }
  .product-stage { width: auto; margin: 48px auto 0; transform: none; }
  .stage-orbit { display: none; }
  .app-window { min-height: 0; border-radius: 13px; transform: none; animation: none; }
  .app-topbar { height: 52px; padding-inline: 14px; gap: 10px; }
  .app-brand { font-size: 19px; }
  .orders-pill { margin-left: auto; font-size: 8px; }
  .app-topbar button { display: none; }
  .app-body { display: block; min-height: 0; }
  .app-sidebar { display: none; }
  .app-content { padding: 17px 14px; }
  .app-heading { align-items: center; margin-bottom: 14px; }
  .app-heading strong { font-size: 18px; }
  .app-heading > div { font-size: 8px; }
  .app-grid { grid-template-columns: 1fr; gap: 10px; }
  .now-card, .queue-card { min-height: 0; padding: 15px; }
  .track-row { margin-top: 22px; }
  .cover-art { width: 58px; height: 58px; }
  .track-meta strong { font-size: 12px; }
  .round-button { width: 34px; height: 34px; }
  .progress { margin-top: 20px; }
  .queue-card { display: none; }
  .status-card { min-height: 58px; padding: 10px 13px; }
  .status-card strong { font-size: 9px; }
  .source-badge { padding: 6px 8px; }
  .app-player { height: 58px; padding-inline: 14px; }
  .app-player p { width: auto; }
  .app-player .player-wave, .app-player > span { display: none; }
  .app-player button { margin-left: auto; }
  .trust-inner { gap: 16px 12px; }
  .trust-inner p { font-size: 11px; }
  .trust-inner div { font-size: 12px; }
  .section { padding: 78px 0; }
  .split-heading h2, .section-title h2, .demo-heading h2, .music-services-heading h2, .workflow-copy h2, .suggestions-heading h2, .testimonials-heading h2, .faq-heading h2, .changelog-heading h2 { font-size: clamp(36px,10.5vw,44px); line-height: 1.05; letter-spacing: -.055em; }
  .split-heading > p, .section-title > p:last-child, .demo-heading > p, .music-services-heading > p, .workflow-copy > p:last-child, .suggestions-heading > p, .testimonials-heading > p { font-size: 14px; line-height: 1.75; }
  .demo-frame { aspect-ratio: 4 / 5; border-radius: 14px; }
  .demo-placeholder { padding: 22px; }
  .demo-placeholder p { font-size: 13px; }
  .demo-play { width: 64px; height: 64px; }
  .demo-duration { top: 15px; left: 15px; }
  .demo-progress { right: 15px; bottom: 15px; left: 15px; }
  .demo-points > div { padding: 22px 8px; }
  .comparison-card { border-radius: 13px; }
  .comparison-top strong { font-size: 16px; }
  .window-chaos, .aura-focus { height: 220px; }
  .focus-body { height: 182px; grid-template-columns: 54px 1fr; }
  .focus-body main { padding: 13px; }
  .capability-card { min-height: 0; border-radius: 13px; padding: 24px; }
  .capability-card .kicker { margin-top: 25px; }
  .capability-card h3, .capability-primary h3 { font-size: 27px; }
  .capability-card > p:not(.kicker) { font-size: 14px; }
  .services-browser { border-radius: 13px; }
  .service-tabs { scrollbar-width: none; }
  .service-tabs::-webkit-scrollbar { display: none; }
  .service-tabs > span { min-height: 48px; }
  .service-panel-copy p { font-size: 14px; }
  .services-explanation { margin-top: 14px; }
  .services-explanation > p, .services-explanation > div { font-size: 14px; }
  .service-notes { padding-left: 15px; }
  .service-notes p { font-size: 13px; }
  .service-notes small { font-size: 12px; }
  .workflow-copy { margin-bottom: 38px; }
  .workspace-sources { gap: 7px; }
  .workspace-sources span { min-height: 50px; font-size: 12px; }
  .workspace-flow > i { font-size: 20px; }
  .suggestions-card { min-height: 0; border-radius: 14px; }
  .suggestions-copy, .suggestions-rewards { padding: 25px 22px; }
  .suggestions-copy h3 { font-size: 34px; }
  .suggestions-copy > p { font-size: 14px; }
  .suggestion-types span { font-size: 10px; }
  .reward-option strong { font-size: 18px; }
  .suggestion-steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; text-align: center; }
  .suggestion-steps span { justify-content: center; }
  .suggestion-steps i { display: none; }
  .beta-card { display: flex; min-height: 0; flex-direction: column; padding: 32px 23px; }
  .beta-copy h2 { font-size: 40px; }
  .beta-copy > p { font-size: 14px; }
  .beta-stats { position: static; display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-top: 42px; }
  .beta-stats div { min-width: 0; flex-direction: column; align-items: flex-start; gap: 3px; }
  .beta-stats strong { font-size: 30px; }
  .beta-stats span { font-size: 9px; }
  .beta-process { gap: 26px; margin-top: 14px; padding: 24px 20px; }
  .beta-process-heading h3 { font-size: 23px; }
  .beta-process-steps strong { font-size: 14px; }
  .testimonial-card { min-height: 330px; flex-basis: 86%; }
  .streamer-photo { height: 225px; }
  .streamer-photo > img { width: 118px; height: 118px; }
  .faq-list summary { padding-right: 42px; font-size: 16px; line-height: 1.45; }
  .faq-list details { padding: 22px 0; }
  .faq-list details p { margin-right: 0; font-size: 14px; }
  .release { grid-template-columns: 1fr; gap: 15px; padding: 27px 0 36px; }
  .release-date { align-items: baseline; }
  .release-date p { flex-direction: row; gap: 6px; margin: 0; }
  .release-body h3 { font-size: 22px; }
  .release-body li { font-size: 10px; }
  .final-cta { padding: 78px 0; }
  .final-cta h2 { font-size: clamp(45px,13vw,58px); }
  .final-cta p { font-size: 14px; }
  .footer-inner { min-height: 0; gap: 22px; padding-block: 32px; }
  .footer-inner nav { flex-wrap: wrap; gap: 15px 20px; }
}

@media (max-width: 720px) and (prefers-reduced-motion: reduce) {
  .main-nav, .site-header::before { transition: none; }
}

@media (max-width: 390px) {
  .container { width: min(100% - 24px,1180px); }
  .main-nav { width: 100%; }
  h1 { font-size: 39px; }
  .hero-lead { font-size: 15px; }
  .orders-pill { padding-inline: 7px; font-size: 7px; }
  .app-heading > div { display: none; }
  .track-meta small { display: none; }
  .source-badge { display: none; }
  .comparison-card li { font-size: 11px; }
  .services-browser-bar { padding: 12px; }
  .service-open-action { font-size: 11px; }
  .services-explanation > p, .services-explanation > div { padding: 19px; }
  .suggestions-copy h3 { font-size: 31px; }
  .beta-copy h2 { font-size: 36px; }
  .beta-stats { grid-template-columns: 1fr; }
  .beta-stats div { flex-direction: row; align-items: center; }
}

/* --- Вход в шапке и cookie-баннер --- */
.header-login { margin-left: auto; padding: 8px 4px; color: #55484c; font-size: 14px; font-weight: 700; transition: color .2s; }
.header-login:hover { color: var(--coral); }
@media (max-width: 720px) { .header-login { display: none; } }

.cookie-banner { position: fixed; right: 0; bottom: 0; left: 0; z-index: 400; padding: 18px; }
.cookie-banner-inner { display: flex; max-width: 900px; align-items: center; justify-content: space-between; gap: 20px; margin: 0 auto; padding: 18px 24px; border: 1px solid var(--line); border-radius: 14px; background: var(--white); box-shadow: var(--shadow); }
.cookie-banner-inner p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.cookie-banner-inner a { color: var(--coral); font-weight: 700; }
.cookie-banner-actions { display: flex; flex: 0 0 auto; gap: 10px; }
.cookie-modal-overlay { position: fixed; inset: 0; z-index: 401; display: grid; place-items: center; padding: 18px; background: rgba(36, 26, 29, .45); }
/* [hidden] сам по себе проигрывает явному display: grid выше (авторский класс всегда бьёт UA-стиль
   [hidden]{display:none}, даже если атрибут физически на элементе) - без этой строки модалка была
   видна всегда, JS-переключение hidden ни на что не влияло. */
[hidden].cookie-banner, [hidden].cookie-modal-overlay { display: none; }
.cookie-modal { width: min(440px, 100%); padding: 30px; border: 1px solid var(--line); border-radius: 16px; background: var(--white); box-shadow: var(--shadow); }
.cookie-modal h2 { margin: 0 0 18px; font-size: 19px; letter-spacing: -.02em; }
.cookie-category { padding: 14px 0; border-top: 1px solid var(--line); }
.cookie-category:first-of-type { border-top: none; padding-top: 0; }
.cookie-category-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.cookie-category-head strong { font-size: 14px; }
.cookie-pill { padding: 3px 9px; border-radius: 99px; background: var(--coral-soft); color: var(--coral-dark); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.cookie-category p { margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.65; }
.cookie-modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
@media (max-width: 720px) { .cookie-banner-inner { flex-direction: column; align-items: stretch; text-align: center; } .cookie-banner-actions { justify-content: center; } }