:root { --bg: #08090d; --bg-elev: #0c0e14; --surface: #111319; --surface2: #161923; --ink: #f2f3f6; --ink-soft: #9a9eac; --ink-faint: #5c6072; --border: rgba(255,255,255,.09); --border-strong: rgba(255,255,255,.16); --coral: #ff7a59; --rose: #ff4d7d; --violet: #8b5cf6; --grad: linear-gradient(100deg,#ff7a59 0%,#ff4d7d 50%,#8b5cf6 100%); --glow: rgba(255,77,125,.28); --sans: -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,sans-serif; --maxw: 1180px; --radius: 16px; }
* { box-sizing: border-box; }
html { color-scheme: dark; }
body { margin: 0px; background: var(--bg); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; line-height: 1.6; overflow-x: hidden; }
.wrap { max-width: var(--maxw); margin: 0px auto; padding: 0px 24px; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-family: var(--sans); font-weight: 650; line-height: 1.08; text-wrap: balance; letter-spacing: -0.025em; margin: 0px; }
p { margin: 0px; }
.grad { background-image: ; background-position-x: ; background-position-y: ; background-size: ; background-repeat: ; background-attachment: ; background-origin: ; background-color: ; background-clip: text; -webkit-text-fill-color: transparent; color: var(--rose); }
.eyebrow { display: inline-flex; align-items: center; gap: 0.55em; font-size: 0.82rem; font-weight: 600; color: var(--ink-soft); border: 1px solid var(--border); background: var(--surface); padding: 0.45em 1em 0.45em 0.8em; border-radius: 999px; letter-spacing: 0.01em; }
.eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--grad); flex: 0 0 auto; box-shadow: 0 0 10px var(--glow); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; font-family: var(--sans); font-weight: 600; font-size: 0.96rem; padding: 0.85em 1.4em; border-radius: 11px; border: 1px solid transparent; cursor: pointer; transition: transform 0.15s, border-color 0.15s, background 0.15s; }
.btn-primary { background: var(--grad); color: rgb(255, 255, 255); box-shadow: 0 8px 24px -8px var(--glow); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 32px -8px var(--glow); }
.btn-ghost { background: var(--surface); border-color: var(--border); color: var(--ink); }
.btn-ghost:hover { border-color: var(--border-strong); background: var(--surface2); }
.btn-sm { padding: 0.6em 1.05em; font-size: 0.88rem; border-radius: 9px; }
:focus-visible { outline: 2px solid var(--rose); outline-offset: 3px; border-radius: 6px; }
.legacy-nav { position: sticky; top: 0px; z-index: 60; backdrop-filter: blur(14px); background: color-mix(in srgb,var(--bg) 74%,transparent); border-bottom: 1px solid var(--border); }
.nav-in { display: flex; align-items: center; justify-content: space-between; height: 66px; }
.brand { display: flex; align-items: center; gap: 0.65em; font-size: 1.12rem; font-weight: 650; letter-spacing: -0.01em; }
.brand img { width: 30px; height: 30px; border-radius: 8px; flex: 0 0 auto; display: block; }
.nav-links { display: flex; align-items: center; gap: 30px; font-size: 0.92rem; font-weight: 500; }
.nav-links a { color: var(--ink-soft); transition: color 0.15s; }
.nav-links a:hover { color: var(--ink); }
@media (max-width: 860px) {
  .nav-links { display: none; }
}
.hero { position: relative; padding: 96px 0px 64px; overflow: hidden; }
.hero-glow { position: absolute; left: 50%; top: -220px; width: 900px; height: 640px; transform: translateX(-50%); z-index: -1; pointer-events: none; background: radial-gradient(50% 50% at 50% 50%,var(--glow),transparent 70%); opacity: 0.55; filter: blur(10px); }
.hero-grid-bg { position: absolute; inset: 0px; z-index: -2; pointer-events: none; opacity: 0.5; background-image: radial-gradient(circle, rgba(255, 255, 255, 0.08) 1px, transparent 1px); background-size: 26px 26px; mask-image: radial-gradient(60% 55% at 50% 0%, rgb(0, 0, 0) 40%, transparent 78%); }
.hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 60px; align-items: center; }
.hero h1 { font-size: clamp(2.5rem, 5.4vw, 4.15rem); margin: 0.5em 0px; }
.rot { display: inline-block; position: relative; }
.rot .w { display: inline-block; transition: opacity 0.3s, transform 0.3s; }
.rot .w.out { opacity: 0; transform: translateY(-10px); }
.rot .w.in { opacity: 0; transform: translateY(10px); }
.hero p.lead { font-size: 1.15rem; color: var(--ink-soft); max-width: 30em; margin: 0px 0px 2em; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 34px; }
.stats-line { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 0.86rem; color: var(--ink-faint); }
.stats-line b { color: var(--ink-soft); font-weight: 600; }
@media (max-width: 920px) {
  .hero-grid { grid-template-columns: 1fr; gap: 44px; }
  .hero { padding-top: 52px; }
}
.song-card { background: var(--surface); border: 1px solid var(--border); border-radius: 20px; overflow: hidden; box-shadow: rgba(0, 0, 0, 0.7) 0px 30px 70px -34px; }
.song-card .chrome { display: flex; align-items: center; gap: 6px; padding: 13px 16px; border-bottom: 1px solid var(--border); }
.song-card .chrome span { width: 9px; height: 9px; border-radius: 50%; background: var(--border-strong); }
.song-card .chrome .lbl { margin-left: 8px; font-size: 0.76rem; color: var(--ink-faint); font-weight: 500; }
.song-card .body-in { padding: 20px; }
.cover { aspect-ratio: 16 / 10; border-radius: 13px; position: relative; overflow: hidden; display: grid; place-items: center; color: rgb(255, 255, 255); background: radial-gradient(120% 130% at 15% 10%, rgb(255, 154, 107), transparent 55%), radial-gradient(120% 130% at 90% 25%, rgb(255, 77, 125), transparent 60%), linear-gradient(150deg, rgb(255, 122, 89), rgb(139, 92, 246)); }
.cover img { position: absolute; inset: 0px; width: 100%; height: 100%; object-fit: cover; display: block; }
.cover .tag { position: absolute; top: 13px; left: 13px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.01em; background: rgba(0, 0, 0, 0.32); color: rgb(255, 255, 255); padding: 0.4em 0.75em; border-radius: 999px; backdrop-filter: blur(4px); }
.song-meta { margin: 16px 2px 12px; }
.song-title { font-size: 1.08rem; font-weight: 650; }
.song-sub { font-size: 0.84rem; color: var(--ink-faint); margin-top: 0.15em; }
.player { display: flex; align-items: center; gap: 13px; padding: 2px; }
.play { width: 44px; height: 44px; border-radius: 50%; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; cursor: pointer; flex: 0 0 auto; background: var(--grad); color: rgb(255, 255, 255); display: grid; place-items: center; font-size: 1rem; box-shadow: 0 10px 22px -10px var(--glow); transition: transform 0.15s; }
.play:hover { transform: scale(1.06); }
canvas.wave { flex: 1 1 0%; height: 38px; width: 100%; display: block; }
.player audio { display: none; }
.time { font-variant-numeric: tabular-nums; font-size: 0.78rem; color: var(--ink-faint); }
section.block { padding: 100px 0px; position: relative; }
.sec-head { max-width: 36em; margin-bottom: 48px; }
.sec-head h2 { font-size: clamp(1.9rem, 3.6vw, 2.7rem); margin: 0.3em 0px 0.4em; }
.sec-head p { color: var(--ink-soft); font-size: 1.06rem; }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.step { background: var(--bg); padding: 30px 26px; transition: background 0.2s; }
.step:hover { background: var(--surface); }
.step .n { font-size: 0.82rem; font-weight: 700; color: var(--rose); letter-spacing: 0.02em; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border: 1px solid var(--border-strong); border-radius: 8px; margin-bottom: 16px; }
.step h3 { font-size: 1.04rem; margin: 0px 0px 0.4em; font-weight: 650; }
.step p { margin: 0px; color: var(--ink-soft); font-size: 0.92rem; }
.step .free { display: inline-block; margin-top: 12px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.02em; color: var(--rose); background: rgba(255, 77, 125, 0.12); padding: 0.35em 0.7em; border-radius: 999px; }
@media (max-width: 900px) {
  .steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .steps { grid-template-columns: 1fr; }
}
.marquee { position: relative; overflow: hidden; padding: 6px 0px; mask: linear-gradient(90deg, transparent, rgb(0, 0, 0) 6%, rgb(0, 0, 0) 94%, transparent); }
.track { display: flex; gap: 10px; width: max-content; animation: 44s linear 0s infinite normal none running scroll; }
.marquee:hover .track { animation-play-state: paused; }
@keyframes scroll { 
  100% { transform: translateX(-50%); }
}
.chip { display: flex; align-items: center; gap: 0.55em; padding: 12px 18px; border-radius: 11px; background: var(--surface); border: 1px solid var(--border); font-weight: 500; font-size: 0.94rem; white-space: nowrap; color: var(--ink-soft); }
.chip .em { font-size: 1.05rem; }
.ex-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 22px; }
@media (max-width: 900px) {
  .ex-grid { grid-template-columns: 1fr; max-width: 440px; margin: 0px auto; }
}
.price-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; align-items: stretch; }
.price { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px 24px; display: flex; flex-direction: column; gap: 6px; position: relative; }
.price.pop { border-color: transparent; background: linear-gradient(var(--surface),var(--surface)) padding-box,
    var(--grad) border-box; box-shadow: 0 24px 60px -30px var(--glow); }
.price .lbl { position: absolute; top: -12px; left: 24px; background: var(--grad); color: rgb(255, 255, 255); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; padding: 0.4em 0.8em; border-radius: 999px; }
.price .name { font-weight: 600; font-size: 0.98rem; color: var(--ink-soft); }
.price .amt { font-size: 2.3rem; font-weight: 650; line-height: 1.15; margin-top: 0.15em; letter-spacing: -0.02em; }
.price .amt small { font-size: 0.95rem; color: var(--ink-faint); font-weight: 500; }
.conv { display: block; font-size: 0.72rem; color: var(--ink-faint); font-weight: 500; margin-top: 0.1em; }
.stats-line .conv { display: inline; margin-top: 0px; }
.price .per { color: var(--ink-faint); font-size: 0.86rem; min-height: 1.3em; }
.price ul { list-style: none; padding: 0px; margin: 14px 0px 22px; display: flex; flex-direction: column; gap: 9px; font-size: 0.89rem; color: var(--ink-soft); }
.price li { display: flex; gap: 0.6em; align-items: flex-start; }
.price li::before { content: ""; width: 15px; height: 15px; flex: 0 0 auto; margin-top: 3px; background: var(--rose); mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/></svg>") center center / contain no-repeat; }
.price .btn { margin-top: auto; justify-content: center; }
@media (max-width: 980px) {
  .price-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .price-grid { grid-template-columns: 1fr; }
}
.closing { position: relative; border-radius: 24px; overflow: hidden; padding: 80px 40px; text-align: center; color: rgb(255, 255, 255); background: var(--grad); }
.closing h2 { font-size: clamp(2rem, 4vw, 3rem); margin: 0.4em 0px 0.3em; }
.closing p { color: rgba(255, 255, 255, 0.88); font-size: 1.1rem; max-width: 28em; margin: 0px auto 1.8em; }
.closing .eyebrow { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.22); color: rgb(255, 255, 255); }
.closing .eyebrow .dot { background: rgb(255, 255, 255); box-shadow: none; }
.closing .btn { background: rgb(255, 255, 255); color: rgb(26, 15, 20); font-size: 1rem; padding: 0.95em 1.7em; }
.closing .btn:hover { transform: translateY(-2px); }
footer { padding: 56px 0px 40px; border-top: 1px solid var(--border); margin-top: 20px; color: var(--ink-faint); }
.foot { display: flex; flex-wrap: wrap; gap: 22px; justify-content: space-between; align-items: center; }
.foot a { color: var(--ink-soft); transition: color 0.15s; font-size: 0.92rem; }
.foot a:hover { color: var(--ink); }
.foot-links { display: flex; gap: 22px; flex-wrap: wrap; }
.foot-copy { font-size: 0.82rem; }
.faq { display: grid; gap: 10px; max-width: 820px; }
.faq-item { background: var(--surface); border: 1px solid var(--border); border-radius: 13px; padding: 0px 20px; transition: border-color 0.15s; }
.faq-item:hover { border-color: var(--border-strong); }
.faq-item[open] { border-color: transparent; background: linear-gradient(var(--surface),var(--surface)) padding-box,var(--grad) border-box; }
.faq-item summary { list-style: none; cursor: pointer; padding: 18px 30px 18px 0px; position: relative; font-weight: 600; font-size: 1rem; color: var(--ink); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: ""; position: absolute; right: 2px; top: 50%; width: 9px; height: 9px; margin-top: -6px; border-right: 2px solid var(--ink-faint); border-bottom: 2px solid var(--ink-faint); transform: rotate(45deg); transition: transform 0.2s; }
.faq-item[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq-a { padding: 0px 0px 18px; color: var(--ink-soft); font-size: 0.94rem; line-height: 1.65; }
.faq-a p { margin: 0px; }
.reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.6s, transform 0.6s; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .track { animation: auto ease 0s 1 normal none running none !important; }
}
#wizard { position: fixed; inset: 0px; z-index: 200; display: none; background: color-mix(in srgb,var(--bg) 88%,transparent); backdrop-filter: blur(6px); align-items: flex-start; justify-content: center; overflow-y: auto; padding: 5vh 18px 40px; }
#wizard.open { display: flex; }
.wz-card { width: 100%; max-width: 600px; background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 32px; position: relative; box-shadow: rgba(0, 0, 0, 0.8) 0px 40px 90px -30px; }
.wz-close { position: absolute; top: 18px; right: 18px; width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--border); background: var(--surface2); color: var(--ink-soft); cursor: pointer; font-size: 1.1rem; line-height: 1; display: grid; place-items: center; }
.wz-close:hover { color: var(--ink); border-color: var(--border-strong); }
.wz-dots { display: flex; gap: 6px; margin-bottom: 22px; }
.wz-dots span { height: 4px; flex: 1 1 0%; border-radius: 99px; background: var(--border); }
.wz-dots span.done { background: var(--grad); }
.wz-h { font-size: 1.4rem; font-weight: 650; margin: 0px 0px 6px; letter-spacing: -0.02em; }
.wz-sub { color: var(--ink-soft); font-size: 0.94rem; margin: 0px 0px 22px; }
.wz-field { margin-bottom: 16px; }
.wz-field label { display: block; font-size: 0.86rem; color: var(--ink-soft); margin-bottom: 7px; }
.wz-field input, .wz-field textarea { width: 100%; background: var(--surface2); border: 1px solid var(--border); border-radius: 11px; padding: 0.8em 1em; color: var(--ink); font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; font-size: 0.95rem; resize: vertical; }
.wz-field textarea { min-height: 88px; line-height: 1.5; }
.wz-field input:focus, .wz-field textarea:focus { outline: none; border-color: var(--rose); }
.wz-lyrics { white-space: pre-wrap; background: var(--surface2); border: 1px solid var(--border); border-radius: 13px; padding: 16px 18px; font-size: 0.92rem; line-height: 1.65; max-height: 340px; overflow-y: auto; margin-bottom: 18px; color: var(--ink); }
.wz-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.wz-actions .btn { flex: 1 1 0%; min-width: 140px; }
.wz-back { background: none; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; color: var(--ink-faint); font-size: 0.86rem; cursor: pointer; padding: 0.4em 0px; margin-bottom: 4px; }
.wz-back:hover { color: var(--ink-soft); }
.wz-loading { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 30px 10px; }
.wz-spinner { width: 46px; height: 46px; border-radius: 50%; border-top-style: ; border-top-width: ; border-right-color: ; border-right-style: ; border-right-width: ; border-bottom-color: ; border-bottom-style: ; border-bottom-width: ; border-left-color: ; border-left-style: ; border-left-width: ; border-image-source: ; border-image-slice: ; border-image-width: ; border-image-outset: ; border-image-repeat: ; border-top-color: var(--rose); animation: 1s linear 0s infinite normal none running wzspin; margin-bottom: 18px; }
@keyframes wzspin { 
  100% { transform: rotate(360deg); }
}
.wz-price-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface2); margin-bottom: 10px; }
.wz-price-row .t { font-size: 0.92rem; font-weight: 600; }
.wz-price-row .s { font-size: 0.8rem; color: var(--ink-faint); }
.wz-price-row .amt { font-weight: 650; font-size: 1.05rem; white-space: nowrap; }
.wz-price-row .amt .wz-amt-old { text-decoration: line-through; opacity: 0.5; font-weight: 500; font-size: 0.85em; margin-right: 6px; }
.clip-offer .btn { flex: 0 0 auto; white-space: nowrap; }
@media (max-width: 520px) {
  .clip-offer { align-items: stretch; flex-direction: column; }
  .clip-offer .btn { width: 100%; }
}
.wz-promo-row { display: flex; gap: 8px; align-items: stretch; }
.wz-promo-row input { flex: 1 1 0%; min-width: 0px; }
.wz-promo-row .btn { flex: 0 0 auto; white-space: nowrap; }
.wz-promo-msg { font-size: 0.84rem; margin-top: 7px; line-height: 1.4; min-height: 1px; }
.wz-or { text-align: center; color: var(--ink-faint); font-size: 0.8rem; margin: 14px 0px; position: relative; }
.wz-player { margin: 10px 0px 18px; }
.wz-player audio { width: 100%; }
.wz-note { font-size: 0.84rem; color: var(--ink-faint); margin-top: 14px; line-height: 1.5; }
.wz-error { color: var(--rose); font-size: 0.88rem; margin: 0px 0px 14px; }
#promoBanner { position: fixed; right: 18px; bottom: 18px; z-index: 400; width: 360px; max-width: calc(100% - 36px); padding: 18px 20px; border-radius: 16px; background: linear-gradient(var(--bg-elev),var(--bg-elev)) padding-box,var(--grad) border-box; border: 1px solid transparent; box-shadow: rgba(0, 0, 0, 0.4) 0px 18px 44px; transform: translateY(140%) translateX(0px); opacity: 0; transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.45s, bottom 0.3s; }
#promoBanner.show { transform: translateY(0px) translateX(0px); opacity: 1; }
#promoBanner .pb-close { position: absolute; top: 10px; right: 12px; background: none; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; color: var(--ink-faint); font-size: 1rem; cursor: pointer; line-height: 1; padding: 4px; }
#promoBanner .pb-close:hover { color: var(--ink-soft); }
#promoBanner .pb-head { font-size: 0.82rem; color: var(--ink-soft); margin: 0px 0px 6px; font-weight: 600; }
#promoBanner .pb-code { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 1.3rem; letter-spacing: 0.04em; background: var(--surface2); border: 1px dashed var(--border-strong); border-radius: 9px; padding: 4px 12px; margin: 2px 0px 10px; cursor: pointer; }
#promoBanner .pb-code .copied { font-size: 0.72rem; font-weight: 600; color: var(--ink-faint); }
#promoBanner .pb-text { font-size: 0.86rem; color: var(--ink-soft); line-height: 1.45; margin: 0px 0px 14px; }
#promoBanner .btn { width: 100%; }
@media (max-width: 480px) {
  #promoBanner { left: 12px; right: 12px; width: auto; bottom: 12px; padding: 16px 18px; }
}
.auth-tabs { display: flex; gap: 8px; margin-bottom: 20px; }
.auth-tab { flex: 1 1 0%; padding: 0.6em; border-radius: 10px; border: 1px solid var(--border); background: var(--surface2); color: var(--ink-soft); font-style: inherit; font-variant: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; font-size: 0.9rem; font-weight: 600; cursor: pointer; }
.auth-tab.on { color: var(--ink); border-color: transparent; background: linear-gradient(var(--surface2),var(--surface2)) padding-box,var(--grad) border-box; }
.auth-link { background: none; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; color: var(--ink-faint); font-size: 0.85rem; cursor: pointer; margin-top: 14px; text-decoration: underline; text-underline-offset: 3px; padding: 0px; }
.auth-link:hover { color: var(--ink-soft); }
.auth-or { display: flex; align-items: center; gap: 12px; margin: 18px 0px 4px; color: var(--ink-faint); font-size: 0.8rem; }
.auth-or::before, .auth-or::after { content: ""; flex: 1 1 0%; height: 1px; background: var(--border); }
.oauth-btn { display: flex; align-items: center; justify-content: center; width: 100%; margin-top: 12px; font-weight: 600; border: 1px solid var(--border); }
.oauth-btn:hover { border-color: var(--ink-faint); }
.cab-item { border: 1px solid var(--border); border-radius: 13px; background: var(--surface2); padding: 14px 16px; margin-bottom: 10px; }
.cab-item .t { font-weight: 600; font-size: 0.95rem; }
.cab-item .s { font-size: 0.78rem; color: var(--ink-faint); margin: 2px 0px 8px; }
.cab-item audio { width: 100%; margin: 6px 0px; display: block; }
.cab-head { display: block; margin-bottom: 16px; padding-right: 46px; }
.cab-identity .wz-h { margin: 0px; }
.cab-head .em { font-size: 0.86rem; color: var(--ink-soft); }
.cab-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 15px; }
.cab-balances, .cab-buttons { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cab-buttons { margin-left: auto; }
.cab-badge { display: inline-block; font-size: 0.72rem; font-weight: 700; padding: 0.25em 0.7em; border-radius: 99px; background: rgba(255, 77, 125, 0.12); color: var(--rose); }
.cab-promo { position: relative; overflow: hidden; margin: 0px 0px 20px; padding: 18px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 19px; background: radial-gradient(circle at 0px 0px, rgba(255, 122, 89, 0.13), transparent 38%), linear-gradient(135deg, rgba(255, 255, 255, 0.055), rgba(139, 92, 246, 0.055)); box-shadow: rgba(255, 255, 255, 0.05) 0px 1px inset; }
.cab-promo::after { content: ""; position: absolute; width: 150px; height: 150px; right: -74px; bottom: -105px; border-radius: 50%; background: rgba(255, 79, 139, 0.16); filter: blur(35px); pointer-events: none; }
.cab-promo-head { position: relative; z-index: 1; display: grid; grid-template-columns: 42px minmax(0px, 1fr) auto; align-items: center; gap: 12px; margin-bottom: 14px; }
.cab-promo-icon { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, 0.13); border-radius: 13px; background: linear-gradient(145deg, rgba(255, 139, 106, 0.22), rgba(139, 92, 246, 0.18)); color: rgb(255, 215, 204); font-size: 1.05rem; box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 30px; }
.cab-promo-copy { min-width: 0px; }
.cab-promo-copy label { display: block; margin: 0px 0px 3px; font-size: 0.93rem; font-weight: 750; letter-spacing: -0.015em; color: var(--ink); }
.cab-promo-copy span { display: block; font-size: 0.74rem; color: var(--ink-faint); line-height: 1.42; }
.cab-promo-gift { align-self: start; padding: 0.38em 0.72em; border: 1px solid rgba(255, 139, 106, 0.2); border-radius: 999px; background: rgba(255, 139, 106, 0.1); color: rgb(255, 178, 156); font-size: 0.64rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.cab-promo-field { position: relative; z-index: 1; display: flex; align-items: center; gap: 8px; padding: 5px 5px 5px 13px; border: 1px solid rgba(255, 255, 255, 0.13); border-radius: 15px; background: rgba(7, 5, 14, 0.5); box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 8px inset; transition: border-color 0.18s, box-shadow 0.18s, background 0.18s; }
.cab-promo-field:focus-within { border-color: rgba(255, 79, 139, 0.64); background: rgba(7, 5, 14, 0.7); box-shadow: rgba(255, 79, 139, 0.08) 0px 0px 0px 4px, rgba(0, 0, 0, 0.15) 0px 1px 8px inset; }
.cab-promo-prefix { color: var(--rose); font-size: 0.9rem; font-weight: 800; }
.cab-promo-field input { flex: 1 1 0%; min-width: 0px; border: 0px; outline: 0px; background: transparent; color: var(--ink); padding: 10px 0px; font-style: inherit; font-variant: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; font-size: 0.88rem; font-weight: 650; letter-spacing: 0.045em; text-transform: uppercase; }
.cab-promo-field input::placeholder { color: rgb(119, 112, 128); font-weight: 500; letter-spacing: 0px; text-transform: none; }
.cab-promo-submit { min-height: 42px; padding: 0px 16px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0px; border-radius: 11px; background: linear-gradient(100deg, rgb(255, 122, 89), rgb(255, 77, 125) 58%, rgb(139, 92, 246)); color: rgb(255, 255, 255); font-style: inherit; font-variant: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; font-size: 0.8rem; font-weight: 760; white-space: nowrap; cursor: pointer; box-shadow: rgba(255, 77, 125, 0.72) 0px 12px 28px -13px; transition: transform 0.18s, box-shadow 0.18s, opacity 0.18s; }
.cab-promo-submit:hover { transform: translateY(-1px); box-shadow: rgba(255, 77, 125, 0.9) 0px 16px 32px -13px; }
.cab-promo-submit:disabled { cursor: wait; opacity: 0.58; transform: none; }
.cab-promo-msg { position: relative; z-index: 1; min-height: 0px; margin-top: 0px; font-size: 0.78rem; color: var(--ink-soft); transition: margin 0.15s; }
.cab-promo-msg:not(:empty) { min-height: 1.2em; margin-top: 9px; }
.cab-promo-msg.ok { color: rgb(74, 222, 128); }
.cab-promo-msg.err { color: rgb(255, 125, 159); }
.cab-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 0px 0px 14px; padding: 5px; border: 1px solid var(--border); border-radius: 15px; background: rgba(255, 255, 255, 0.024); }
.cab-tabs button { min-height: 42px; border: 0px; border-radius: 11px; background: transparent; color: var(--ink-soft); font-style: inherit; font-variant: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; font-size: 0.86rem; font-weight: 720; cursor: pointer; }
.cab-tabs button.active { background: linear-gradient(100deg, rgba(255, 122, 89, 0.2), rgba(139, 92, 246, 0.2)); color: var(--ink); box-shadow: rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset; }
.cab-tabs span { margin-left: 5px; color: var(--ink-faint); font-size: 0.72rem; }
.cab-clip-item { display: flex; align-items: flex-start; gap: 12px; }
.cab-clip-icon { width: 38px; height: 38px; display: grid; place-items: center; flex: 0 0 38px; border-radius: 11px; background: rgba(255, 79, 139, 0.1); }
.cab-clip-main { min-width: 0px; flex: 1 1 0%; }
.cab-clip-actions { display: flex; gap: 8px; flex-wrap: wrap; }
:root { --bg: #0b0912; --bg-elev: #110e19; --surface: #191520; --surface2: #221c2b; --ink: #fffaf8; --ink-soft: #d4ceda; --ink-faint: #aaa3b3; --border: rgba(255,255,255,.12); --border-strong: rgba(255,255,255,.22); --coral: #ff8b6a; --rose: #ff4f8b; --violet: #8b6cff; --aqua: #70e1f5; --grad: linear-gradient(112deg,#ff936f 0%,#ff4f8b 46%,#8b6cff 100%); --grad-soft: linear-gradient(135deg,rgba(255,147,111,.18),rgba(255,79,139,.13) 45%,rgba(139,108,255,.18)); --glow: rgba(255,79,139,.34); --shadow: 0 34px 100px rgba(0,0,0,.48); --sans: "Segoe UI Variable Text","Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,sans-serif; --maxw: 1240px; --radius: 24px; }
html { scroll-behavior: smooth; scroll-padding-top: 104px; }
body { min-height: 100vh; -webkit-font-smoothing: auto; text-rendering: optimizelegibility; background: radial-gradient(900px 620px at 78% -8%,rgba(139,108,255,.13),transparent 68%),
    radial-gradient(720px 520px at -8% 20%,rgba(255,79,139,.09),transparent 70%),
    var(--bg); }
body::before { content: ""; position: fixed; inset: 0px; z-index: -10; pointer-events: none; opacity: 0.04; background-image: radial-gradient(rgba(255, 255, 255, 0.22) 0.55px, transparent 0.55px); background-size: 8px 8px; mask-image: linear-gradient(rgb(0, 0, 0), transparent 82%); }
.wrap { padding-inline: 30px; }
main { display: block; }
h1, h2, h3 { font-weight: 720; letter-spacing: -0.045em; }
.skip-link { position: fixed; left: 16px; top: -80px; z-index: 1000; background: rgb(255, 255, 255); color: rgb(17, 17, 17); padding: 10px 16px; border-radius: 10px; transition: top 0.2s; }
.skip-link:focus { top: 16px; }
.btn { min-height: 46px; padding: 0.82em 1.35em; border-radius: 14px; font-weight: 720; letter-spacing: -0.01em; transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.2s, border-color 0.2s, background 0.2s; }
.btn-lg { min-height: 58px; padding: 1em 1.55em; border-radius: 17px; font-size: 1rem; }
.btn-primary { position: relative; overflow: hidden; background: var(--grad); box-shadow: 0 16px 40px -16px var(--glow),inset 0 1px rgba(255,255,255,.28); }
.btn-primary::after { content: ""; position: absolute; inset: -100% -35%; background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.26), transparent 60%); transform: translateX(-65%); transition: transform 0.7s; }
.btn-primary:hover::after { transform: translateX(65%); }
.btn-primary:hover { transform: translateY(-3px); box-shadow: rgba(255, 79, 139, 0.58) 0px 22px 48px -16px; }
.btn-ghost { background: rgba(255, 255, 255, 0.043); border-color: var(--border); backdrop-filter: blur(12px); }
.btn-ghost:hover { transform: translateY(-2px); background: rgba(255, 255, 255, 0.075); border-color: var(--border-strong); }
.btn-play { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; font-size: 0.62rem; background: rgba(255, 255, 255, 0.1); }
.legacy-nav { position: fixed; top: 16px; left: 0px; right: 0px; background: none; border: 0px; backdrop-filter: none; z-index: 100; }
.nav-in { height: 68px; border: 1px solid var(--border); border-radius: 21px; padding-inline: 16px 12px; background: rgba(13, 10, 24, 0.76); box-shadow: rgba(0, 0, 0, 0.28) 0px 16px 46px; backdrop-filter: blur(24px) saturate(150%); }
.brand { font-size: 1.16rem; font-weight: 780; letter-spacing: -0.035em; }
.brand img { width: 38px; height: 38px; border-radius: 12px; box-shadow: rgba(0, 0, 0, 0.3) 0px 8px 24px; }
.nav-links { gap: 25px; margin-left: auto; margin-right: 25px; }
.nav-links a { font-size: 0.86rem; color: var(--ink-soft); }
.nav-links a:hover { color: var(--ink); }
.nav-actions { display: flex; align-items: center; gap: 8px; }
.nav-actions .btn { white-space: nowrap; }
.eyebrow { padding: 0.58em 1.05em 0.58em 0.8em; border-color: rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.043); box-shadow: rgba(255, 255, 255, 0.06) 0px 1px inset; backdrop-filter: blur(12px); font-size: 0.78rem; color: rgb(216, 210, 225); }
.eyebrow .dot { width: 8px; height: 8px; position: relative; background: var(--rose); box-shadow: 0 0 0 5px rgba(255,79,139,.12),0 0 18px var(--glow); }
.hero { min-height: 870px; padding: 155px 0px 96px; display: flex; align-items: center; isolation: isolate; overflow: hidden; }
.hero-grid { grid-template-columns: minmax(0px, 1.04fr) minmax(420px, 0.96fr); gap: 76px; position: relative; }
.hero-grid-bg { inset: -80px -25vw -40px; opacity: 0.5; background-image: linear-gradient(rgba(255, 255, 255, 0.024) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.024) 1px, transparent 1px); background-size: 66px 66px; mask-image: radial-gradient(65% 65% at 68% 35%, rgb(0, 0, 0), transparent 76%); }
.hero-glow { left: auto; right: -210px; top: -120px; width: 780px; height: 780px; transform: none; opacity: 0.88; filter: blur(22px); background: radial-gradient(circle at 48% 44%, rgba(255, 79, 139, 0.22), rgba(139, 108, 255, 0.13) 36%, transparent 69%); }
.hero-copy { position: relative; z-index: 2; }
.hero h1 { font-size: clamp(3.2rem, 5.7vw, 5.35rem); line-height: 0.97; max-width: 760px; margin: 0.42em 0px 0.32em; letter-spacing: -0.066em; }
.hero h1 .grad { display: inline; background: linear-gradient(102deg, rgb(255, 155, 118) 5%, rgb(255, 93, 152) 47%, rgb(156, 130, 255) 94%) text; }
.rot { min-width: 3.1em; }
.hero p.lead { max-width: 40em; font-size: clamp(1.03rem, 1.6vw, 1.22rem); line-height: 1.62; color: var(--ink-soft); margin-bottom: 28px; }
.hero-cta { gap: 11px; margin-bottom: 32px; }
.stats-line { display: grid; grid-template-columns: repeat(4, minmax(0px, 1fr)); gap: 9px; max-width: 690px; }
.stats-line .stat { min-width: 0px; padding: 12px 13px; border: 1px solid var(--border); border-radius: 15px; background: rgba(255, 255, 255, 0.027); display: flex; flex-direction: column; gap: 1px; }
.stats-line .stat b { font-size: 0.92rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.stats-line .stat > span:last-child { font-size: 0.69rem; line-height: 1.25; color: var(--ink-faint); }
.stats-line .conv { font-size: 0.66rem; }
.hero-showcase { position: relative; z-index: 3; perspective: 1200px; padding: 22px 26px; }
.hero-showcase::before { content: ""; position: absolute; inset: 9% 0px 0px; border-radius: 50%; background: var(--grad); filter: blur(75px); opacity: 0.2; z-index: -2; }
.hero-showcase::after { content: ""; position: absolute; left: 17%; right: 8%; bottom: 2%; height: 30%; border-radius: 50%; background: rgb(0, 0, 0); filter: blur(36px); opacity: 0.62; z-index: -1; }
.hero-showcase .song-card { transform: rotateY(-6deg) rotateX(2deg); transform-style: preserve-3d; border-radius: 29px; background: linear-gradient(155deg, rgba(31, 25, 47, 0.96), rgba(14, 11, 25, 0.96)); border-color: rgba(255, 255, 255, 0.14); box-shadow: var(--shadow),inset 0 1px rgba(255,255,255,.08); transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.5s; }
.hero-showcase:hover .song-card { transform: rotateY(-2deg) rotateX(0deg) translateY(-6px); box-shadow: rgba(0, 0, 0, 0.58) 0px 45px 120px, rgba(255, 79, 139, 0.08) 0px 0px 70px; }
.song-card .chrome { padding: 14px 18px; gap: 9px; background: rgba(255, 255, 255, 0.024); }
.song-card .chrome .status-dot { width: 8px; height: 8px; background: rgb(110, 231, 167); box-shadow: rgba(110, 231, 167, 0.7) 0px 0px 12px; }
.song-card .chrome .lbl { margin: 0px; color: rgb(170, 162, 187); letter-spacing: 0.03em; text-transform: uppercase; font-size: 0.65rem; }
.chrome-eq { display: flex; align-items: flex-end; gap: 2px; height: 13px; margin-left: auto; }
.chrome-eq i { display: block; width: 2px; border-radius: 9px; background: var(--grad); animation: 1.1s ease-in-out 0s infinite alternate none running eq; }
.chrome-eq i:nth-child(1) { height: 5px; }
.chrome-eq i:nth-child(2) { height: 12px; animation-delay: 0.2s; }
.chrome-eq i:nth-child(3) { height: 8px; animation-delay: 0.35s; }
.chrome-eq i:nth-child(4) { height: 3px; animation-delay: 0.5s; }
@keyframes eq { 
  100% { height: 3px; }
}
.song-card .body-in { padding: 18px; }
.hero-showcase .cover { aspect-ratio: 1 / 1; border-radius: 19px; background: rgb(32, 24, 45); box-shadow: rgba(255, 255, 255, 0.08) 0px 0px 0px 1px inset; }
.cover img { transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1); }
.song-card:hover .cover img { transform: scale(1.035); }
.cover .tag { top: 15px; left: 15px; padding: 0.55em 0.9em; border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(9, 7, 17, 0.5); font-size: 0.7rem; }
.cover-shine { position: absolute; inset: 0px; pointer-events: none; background: linear-gradient(118deg, rgba(255, 255, 255, 0.19), transparent 28%, transparent 68%, rgba(255, 79, 139, 0.08)); mix-blend-mode: screen; }
.song-meta { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 18px 2px 13px; }
.song-title { font-size: 1.2rem; letter-spacing: -0.025em; }
.song-sub { color: rgb(142, 135, 156); }
.song-like { display: grid; place-items: center; width: 39px; height: 39px; border: 1px solid var(--border); border-radius: 50%; color: rgb(214, 206, 222); font-size: 1.15rem; }
.player { padding: 7px 2px 2px; }
.play { width: 50px; height: 50px; font-size: 1.05rem; box-shadow: rgba(255, 79, 139, 0.72) 0px 16px 32px -12px; }
.float-card { position: absolute; z-index: 5; display: flex; align-items: center; gap: 9px; max-width: 190px; padding: 11px 14px; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 15px; background: rgba(22, 17, 35, 0.78); box-shadow: rgba(0, 0, 0, 0.34) 0px 16px 40px; backdrop-filter: blur(18px); font-size: 0.72rem; color: rgb(232, 226, 238); animation: 5.5s ease-in-out 0s infinite normal none running float; }
.float-card span { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 9px; background: var(--grad); color: white; flex: 0 0 auto; }
.float-card strong { font-weight: 650; line-height: 1.25; }
.float-card-top { right: -12px; top: 3px; }
.float-card-bottom { left: -13px; bottom: 18px; animation-delay: -2.4s; }
@keyframes float { 
  50% { transform: translateY(-8px); }
}
.trust-ribbon { border-block: 1px solid var(--border); background: rgba(255, 255, 255, 0.02); overflow: hidden; }
.trust-ribbon-in { min-height: 76px; display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; }
.trust-ribbon-in > span { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 38px; padding: 0px 18px; color: var(--ink-soft); font-size: 0.83rem; text-align: center; border-right: 1px solid var(--border); }
.trust-ribbon-in > span:last-child { border-right: 0px; }
.trust-ribbon i { display: grid; place-items: center; width: 20px; height: 20px; flex: 0 0 auto; border-radius: 50%; background: rgba(112, 225, 245, 0.09); color: var(--aqua); font-style: normal; font-size: 0.66rem; }
section.block { padding: 126px 0px; }
.sec-head { max-width: 43em; margin-bottom: 58px; }
.sec-head h2 { font-size: clamp(2.45rem, 4.6vw, 4.25rem); line-height: 1.01; margin: 0.33em 0px 0.26em; letter-spacing: -0.06em; }
.sec-head p { max-width: 39em; font-size: 1.06rem; line-height: 1.7; color: var(--ink-soft); }
.steps { grid-template-columns: repeat(12, 1fr); gap: 16px; background: none; border: 0px; border-radius: 0px; overflow: visible; }
.step { grid-column: span 3; min-height: 480px; padding: 17px 17px 26px; border: 1px solid var(--border); border-radius: 23px; background: rgb(23, 19, 31); box-shadow: rgba(255, 255, 255, 0.055) 0px 1px inset, rgba(0, 0, 0, 0.18) 0px 18px 50px; position: relative; overflow: hidden; }
.step::after { content: ""; position: absolute; width: 150px; height: 150px; right: -90px; bottom: -90px; border-radius: 50%; background: var(--grad); filter: blur(26px); opacity: 0; transition: opacity 0.35s, transform 0.35s; }
.step:hover { background: rgb(28, 23, 37); transform: translateY(-5px); border-color: var(--border-strong); }
.step:hover::after { opacity: 0.12; transform: scale(1.25); }
.step-visual { height: 210px; margin-bottom: 17px; border-radius: 17px; background-image: url("/static/ads/gift.png"); background-size: 200% 200%; background-repeat: no-repeat; filter: brightness(1.22) saturate(1.18) contrast(1.04); box-shadow: rgba(255, 255, 255, 0.16) 0px 0px 0px 1px inset, rgba(255, 79, 139, 0.55) 0px 18px 42px -28px; position: relative; overflow: hidden; }
.step-visual::after { content: ""; position: absolute; inset: 0px; background: linear-gradient(135deg, rgba(255, 255, 255, 0.09), transparent 34%); pointer-events: none; }
.step:nth-child(1) .step-visual { background-position: 0px 0px; }
.step:nth-child(2) .step-visual { background-position: 100% 0px; }
.step:nth-child(3) .step-visual { background-position: 0px 100%; }
.step:nth-child(4) .step-visual { background-position: 100% 100%; }
.step-top { display: flex; align-items: center; justify-content: space-between; margin: 0px 8px 20px; }
.step .n { width: auto; height: auto; margin: 0px; border: 0px; border-radius: 0px; font-size: 0.74rem; letter-spacing: 0.12em; color: rgb(169, 159, 184); }
.step-icon { display: grid; place-items: center; width: 43px; height: 43px; border: 1px solid var(--border); border-radius: 14px; background: rgba(255, 255, 255, 0.043); color: rgb(245, 221, 235); font-size: 1rem; }
.step h3 { font-size: 1.24rem; line-height: 1.15; margin: 0px 8px 0.7em; }
.step p { font-size: 0.94rem; line-height: 1.62; color: var(--ink-soft); margin-inline: 8px; }
.step .free { margin: 15px 8px 0px; padding: 0.45em 0.8em; background: rgba(255, 79, 139, 0.14); border: 1px solid rgba(255, 79, 139, 0.24); }
#occ { position: relative; border-block: 1px solid var(--border); overflow: hidden; background: linear-gradient(rgba(255, 255, 255, 0.024), rgba(255, 255, 255, 0.01)) !important; }
#occ::before { content: ""; position: absolute; inset: -45% 55% -45% -20%; background: radial-gradient(circle, rgba(255, 79, 139, 0.13), transparent 66%); pointer-events: none; }
.marquee { padding: 9px 0px; }
.track { gap: 12px; animation-duration: 50s; }
.chip { padding: 14px 20px; border-radius: 999px; background: rgba(255, 255, 255, 0.04); border-color: var(--border); font-size: 0.89rem; color: rgb(200, 193, 209); box-shadow: rgba(255, 255, 255, 0.04) 0px 1px inset; }
.chip:hover { color: rgb(255, 255, 255); border-color: var(--border-strong); background: rgba(255, 255, 255, 0.07); }
.ex-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
.ex-grid .song-card { border-radius: 24px; background: linear-gradient(160deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.02)); transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s; }
.ex-grid .song-card:hover { transform: translateY(-7px); border-color: var(--border-strong); box-shadow: rgba(0, 0, 0, 0.3) 0px 26px 70px; }
.ex-grid .cover { border-radius: 16px; }
.ex-grid .song-card .chrome span:not(.lbl) { display: none; }
#pricing { border-block: 1px solid var(--border); background: linear-gradient(rgba(255, 255, 255, 0.024), rgba(255, 255, 255, 0.008)) !important; }
.price-grid { grid-template-columns: repeat(4, 1fr); gap: 15px; }
.price { min-height: 480px; padding: 29px 25px 25px; border-radius: 24px; background: linear-gradient(160deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)); border-color: var(--border); box-shadow: rgba(255, 255, 255, 0.04) 0px 1px inset; transition: transform 0.28s, border-color 0.28s, box-shadow 0.28s; }
.price:hover { transform: translateY(-7px); border-color: var(--border-strong); box-shadow: rgba(0, 0, 0, 0.28) 0px 24px 70px; }
.price-main { background: linear-gradient(160deg, rgba(255, 139, 106, 0.08), rgba(255, 255, 255, 0.02)); }
.price.pop { transform: translateY(-10px); background: linear-gradient(var(--surface),var(--surface)) padding-box,var(--grad) border-box; box-shadow: rgba(255, 79, 139, 0.65) 0px 28px 80px -36px; }
.price.pop:hover { transform: translateY(-16px); }
.price .lbl { top: -13px; left: 50%; transform: translateX(-50%); padding: 0.48em 1em; white-space: nowrap; box-shadow: rgba(255, 79, 139, 0.28) 0px 8px 20px; }
.price-kicker { display: flex; align-items: center; justify-content: center; width: 43px; height: 43px; margin-bottom: 16px; border: 1px solid var(--border); border-radius: 14px; color: rgb(164, 155, 173); font-weight: 720; font-size: 0.76rem; font-variant-numeric: tabular-nums; background: rgba(255, 255, 255, 0.035); }
.price .name { font-size: 1rem; color: rgb(233, 227, 237); }
.price .amt { font-size: 2.8rem; letter-spacing: -0.06em; margin-top: 0.2em; }
.price .amt small { font-size: 0.85rem; }
.price .per { margin-top: 4px; }
.price-saving { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 15px; padding: 10px 12px; border: 1px solid rgba(112, 225, 245, 0.18); border-radius: 13px; background: rgba(112, 225, 245, 0.055); font-variant-numeric: tabular-nums; }
.price-saving span { color: var(--ink-faint); font-size: 0.78rem; text-decoration: line-through; }
.price-saving strong { color: var(--aqua); font-size: 0.78rem; white-space: nowrap; }
.price ul { margin: 20px 0px 27px; gap: 11px; font-size: 0.86rem; }
.price li::before { background: var(--aqua); }
.price .btn { min-height: 49px; }
.faq-layout { display: grid; grid-template-columns: minmax(300px, 0.78fr) minmax(0px, 1.22fr); gap: 80px; align-items: start; }
.faq-layout .sec-head { position: sticky; top: 120px; margin: 0px; }
.faq-layout .sec-head h2 { font-size: clamp(2.4rem, 4vw, 3.7rem); }
.faq { max-width: none; gap: 11px; }
.faq-item { padding: 0px 22px; border-radius: 18px; background: rgba(255, 255, 255, 0.027); }
.faq-item summary { padding: 22px 36px 22px 0px; font-size: 1rem; }
.faq-item[open] { background: linear-gradient(var(--surface),var(--surface)) padding-box,var(--grad) border-box; }
.faq-a { padding-bottom: 22px; line-height: 1.7; }
.closing { min-height: 480px; padding: 96px 44px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 34px; background: radial-gradient(circle at 20% 10%, rgba(255, 255, 255, 0.18), transparent 30%), linear-gradient(120deg, rgb(255, 133, 101), rgb(255, 79, 139) 45%, rgb(114, 87, 223)); box-shadow: rgba(255, 79, 139, 0.72) 0px 38px 100px -40px; isolation: isolate; }
.closing::before { content: ""; position: absolute; inset: 1px; border-radius: 33px; background-image: radial-gradient(rgba(255, 255, 255, 0.2) 0.6px, transparent 0.6px); background-size: 9px 9px; opacity: 0.2; z-index: -1; }
.closing h2 { font-size: clamp(2.75rem, 5.4vw, 4.8rem); letter-spacing: -0.065em; max-width: 850px; }
.closing p { font-size: 1.12rem; line-height: 1.65; max-width: 35em; }
.closing .btn { min-height: 58px; border-radius: 17px; padding-inline: 1.8em; box-shadow: rgba(58, 18, 45, 0.25) 0px 18px 48px; }
.closing-orb { position: absolute; border: 1px solid rgba(255, 255, 255, 0.24); border-radius: 50%; pointer-events: none; z-index: -1; }
.closing-orb-one { width: 250px; height: 250px; left: -70px; top: -80px; box-shadow: rgba(255, 255, 255, 0.035) 0px 0px 0px 42px, rgba(255, 255, 255, 0.024) 0px 0px 0px 82px; }
.closing-orb-two { width: 170px; height: 170px; right: -30px; bottom: -60px; box-shadow: rgba(255, 255, 255, 0.035) 0px 0px 0px 36px, rgba(255, 255, 255, 0.024) 0px 0px 0px 72px; }
footer { margin-top: 0px; padding: 58px 0px 110px; background: rgb(7, 5, 14); }
.foot { gap: 26px; }
.foot .brand img { width: 32px; height: 32px; border-radius: 10px; }
.foot-links { gap: 10px 24px; }
.footer-messengers { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.messenger-link { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 7px 12px 7px 8px; border: 1px solid var(--border); border-radius: 16px; background: rgb(23, 19, 31); font-size: 0.88rem; font-weight: 700; transition: transform 0.2s, border-color 0.2s, background 0.2s; color: var(--ink) !important; }
.messenger-link:hover { transform: translateY(-3px); border-color: var(--border-strong); background: rgb(30, 24, 40); }
.messenger-link img { width: 36px; height: 36px; display: block; object-fit: contain; border-radius: 11px; }
.messenger-link b { color: var(--ink-faint); font-size: 0.78rem; margin-left: 3px; }
#langSwitch { margin-left: 0px !important; }
#langBtn { display: flex; align-items: center; justify-content: center; gap: 7px; min-width: 72px; padding-inline: 0.8em; }
.lang-flag { display: block; width: 22px; height: 15px; flex: 0 0 22px; border-radius: 3px; object-fit: cover; box-shadow: rgba(255, 255, 255, 0.2) 0px 0px 0px 1px; }
#langMenu { background: rgb(27, 22, 36) !important; border-color: var(--border-strong) !important; border-radius: 16px !important; padding: 7px !important; box-shadow: rgba(0, 0, 0, 0.55) 0px 24px 70px !important; }
#langMenu button:hover { background: rgba(255, 255, 255, 0.08) !important; }
.mobile-cta { display: none; }
#wizard, #auth { background: rgba(6, 4, 12, 0.83) !important; backdrop-filter: blur(18px) !important; }
.wz-card { border-radius: 28px; border-color: rgba(255, 255, 255, 0.13); background: linear-gradient(155deg, rgb(25, 20, 38), rgb(16, 13, 26)); box-shadow: rgba(0, 0, 0, 0.68) 0px 48px 140px, rgba(255, 255, 255, 0.07) 0px 1px inset; }
.wz-close { border-radius: 50%; background: rgba(255, 255, 255, 0.05); }
.wz-dots span { height: 5px; background: rgba(255, 255, 255, 0.08); }
.wz-h { font-size: 1.65rem; letter-spacing: -0.04em; }
.wz-field input, .wz-field textarea, .wz-lyrics, .wz-price-row, .auth-tab, .cab-item { border-radius: 15px; background: rgba(255, 255, 255, 0.04); }
.wz-field input:focus, .wz-field textarea:focus { border-color: rgba(255, 79, 139, 0.7); box-shadow: rgba(255, 79, 139, 0.09) 0px 0px 0px 4px; }
.wz-price-row { transition: transform 0.2s, border-color 0.2s, background 0.2s; }
.wz-price-row:hover { transform: translateY(-2px); border-color: var(--border-strong); background: rgba(255, 255, 255, 0.06); }
#promoBanner { border-radius: 22px; background: linear-gradient(#151020,#151020) padding-box,var(--grad) border-box; box-shadow: rgba(0, 0, 0, 0.55) 0px 26px 80px; }
@media (max-width: 1100px) {
  .nav-links { gap: 16px; margin-right: 16px; }
  .nav-links a { font-size: 0.8rem; }
  .hero-grid { grid-template-columns: minmax(0px, 1fr) minmax(370px, 0.82fr); gap: 34px; }
  .hero h1 { font-size: clamp(3rem, 6vw, 4.6rem); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .step { grid-column: auto; min-height: 455px; }
  .step-top { margin-bottom: 20px; }
  .price-grid { grid-template-columns: repeat(2, 1fr); }
  .price { min-height: 430px; }
  .price.pop { transform: none; }
  .price.pop:hover { transform: translateY(-7px); }
}
@media (max-width: 900px) {
  .wrap { padding-inline: 22px; }
  .legacy-nav { top: 10px; }
  .nav-in { height: 62px; border-radius: 18px; width: calc(100% - 20px); padding-inline: 12px; }
  .brand img { width: 34px; height: 34px; }
  .nav-actions .btn-ghost { display: none; }
  .hero { min-height: auto; padding: 126px 0px 78px; }
  .hero-grid { grid-template-columns: 1fr; gap: 58px; }
  .hero-copy { text-align: center; }
  .hero h1, .hero p.lead, .stats-line { margin-left: auto; margin-right: auto; }
  .hero-cta { justify-content: center; }
  .hero-showcase { width: min(100%, 540px); margin: auto; }
  .hero-showcase .song-card { transform: none; }
  .trust-ribbon-in { grid-template-columns: repeat(2, 1fr); padding-block: 10px; }
  .trust-ribbon-in > span { border-right: 0px; justify-content: flex-start; text-align: left; }
  section.block { padding: 96px 0px; }
  .sec-head { margin-bottom: 44px; }
  .ex-grid { grid-template-columns: 1fr; max-width: 540px; margin-inline: auto; }
  .faq-layout { grid-template-columns: 1fr; gap: 40px; }
  .faq-layout .sec-head { position: static; }
}
@media (max-width: 620px) {
  html { scroll-padding-top: 82px; }
  .wrap { padding-inline: 17px; }
  .nav-in { padding-left: 9px; }
  .nav-in .brand { font-size: 1.04rem; }
  .nav-in .brand img { width: 33px; height: 33px; }
  .nav-actions .btn-primary { min-height: 42px; padding: 0.62em 0.86em; font-size: 0.78rem; }
  .nav-actions .btn-primary span:last-child { display: none; }
  .hero { padding: 110px 0px 64px; }
  .hero h1 { font-size: clamp(2.65rem, 13vw, 4.1rem); line-height: 0.96; }
  .hero p.lead { font-size: 1rem; line-height: 1.58; }
  .hero-cta { display: grid; grid-template-columns: 1fr; margin-bottom: 25px; }
  .hero-cta .btn { width: 100%; }
  .stats-line { grid-template-columns: repeat(2, 1fr); }
  .stats-line .stat { min-height: 67px; text-align: left; }
  .hero-showcase { padding: 8px 0px 28px; }
  .float-card { display: none; }
  .song-card .body-in { padding: 13px; }
  .hero-showcase .song-card { border-radius: 23px; }
  .hero-showcase .cover { border-radius: 15px; }
  .song-title { font-size: 1.06rem; }
  .trust-ribbon-in { grid-template-columns: 1fr; }
  .trust-ribbon-in > span { min-height: 33px; padding-inline: 3px; font-size: 0.8rem; }
  section.block { padding: 78px 0px; }
  .sec-head h2 { font-size: clamp(2.25rem, 11vw, 3.35rem); }
  .sec-head p { font-size: 0.98rem; }
  .steps { grid-template-columns: 1fr; }
  .step { min-height: 0px; padding: 15px 15px 24px; }
  .step-visual { height: 260px; }
  .step-top { margin-bottom: 18px; }
  #occ .sec-head { margin-bottom: 28px !important; }
  .price-grid { grid-template-columns: 1fr; }
  .price { min-height: 0px; padding: 25px 22px; }
  .price.pop { margin-top: 10px; }
  .price .amt { font-size: 2.5rem; }
  .faq-item { padding-inline: 17px; }
  .faq-item summary { font-size: 0.94rem; line-height: 1.4; }
  .closing { min-height: 460px; padding: 72px 22px; border-radius: 26px; }
  .closing h2 { font-size: clamp(2.55rem, 13vw, 3.75rem); }
  .closing p { font-size: 1rem; }
  .closing .btn { width: 100%; }
  footer { padding-bottom: 126px; }
  .foot { align-items: flex-start; flex-direction: column; }
  .footer-messengers { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .messenger-link { min-width: 0px; }
  .foot-links { display: grid; grid-template-columns: 1fr 1fr; }
  .mobile-cta { display: flex; align-items: center; justify-content: space-between; position: fixed; left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 120; min-height: 58px; padding: 0px 20px; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 17px; background: var(--grad); color: rgb(255, 255, 255); font-size: 0.95rem; font-weight: 760; box-shadow: 0 18px 55px rgba(0,0,0,.5),0 12px 30px -12px var(--glow); }
  #promoBanner { bottom: calc(82px + env(safe-area-inset-bottom)); }
  .wz-card { padding: 27px 20px; border-radius: 23px; }
  .wz-h { font-size: 1.38rem; }
  .wz-actions { display: grid; }
  .wz-actions .btn { width: 100%; }
  .cab-head { padding-right: 42px; }
  .cab-toolbar { align-items: stretch; flex-direction: column; }
  .cab-buttons { width: 100%; margin-left: 0px; display: grid; grid-template-columns: 1fr 1fr; }
  .cab-buttons .btn { width: 100%; }
  .cab-promo { padding: 15px; }
  .cab-promo-head { grid-template-columns: 38px minmax(0px, 1fr); gap: 10px; }
  .cab-promo-icon { width: 38px; height: 38px; }
  .cab-promo-gift { display: none; }
  .cab-promo-field { display: grid; grid-template-columns: 18px minmax(0px, 1fr); padding: 6px 6px 6px 12px; }
  .cab-promo-submit { grid-column: 1 / -1; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .chrome-eq i, .float-card { animation: auto ease 0s 1 normal none running none; }
  .btn-primary::after { display: none; }
  .song-card, .cover img, .step, .price { transition: none !important; }
}