:root {
  --page: #f5f5f7;
  --surface: #ffffff;
  --text: #1d1d1f;
  --secondary: #6e6e73;
  --tertiary: #86868b;
  --line: rgba(0, 0, 0, 0.08);
  --blue: #0071e3;
  --blue-hover: #0077ed;
  --green: #30d158;
  --accent: #0a84ff;
  color-scheme: light;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; min-height: 100vh; background: var(--page); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased; }
html,body { max-width:100%; overflow-x:clip; }
button, select, input { font: inherit; }
a { color: inherit; }
.page-shell { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }

@media (pointer: fine) and (hover: hover) {
  html,body { cursor: url("./cursor-black.svg") 3 2,auto; }
  a,button,select,label,summary,[role="button"],[role="slider"] { cursor: url("./cursor-black-pointer.svg") 9 4,pointer; }
  input[type="text"],input[type="email"],input[type="password"],input[type="tel"],textarea { cursor: text; }
}

.file-notice { display: none; min-height: 44px; padding: 10px 20px; align-items: center; justify-content: center; gap: 14px; background: #1d1d1f; color: white; font-size: 14px; }
.file-notice a { color: #69adff; font-weight: 650; text-decoration: none; }
html[data-file-mode="true"] .file-notice { display: flex; }

.campaign-strip { min-height: 38px; padding: 7px 20px; display: flex; align-items: center; justify-content: center; gap: 10px; background: #1d1d1f; color: rgba(255,255,255,.78); font-size: 13px; }
.campaign-strip span { padding: 3px 7px; border-radius: 5px; background: var(--blue); color: white; font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.campaign-strip p { margin: 0; }
.campaign-strip a { color: white; font-weight: 650; text-decoration: none; }
.campaign-strip a:hover { text-decoration: underline; }

.topbar { position: sticky; top: 0; z-index: 20; height: 64px; border-bottom: 1px solid rgba(0,0,0,.055); background: rgba(250,250,252,.82); backdrop-filter: saturate(180%) blur(24px); -webkit-backdrop-filter: saturate(180%) blur(24px); }
.nav-shell { width: min(1180px, calc(100% - 48px)); height: 100%; margin-inline: auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; }
.brand { justify-self: start; display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; }
.brand-icon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; background: rgba(255,255,255,.74); box-shadow: inset 0 0 0 1px rgba(0,0,0,.06),0 7px 20px rgba(0,0,0,.08); }
.brand-icon img { width: 25px; height: 25px; display: block; object-fit: contain; }
.brand-copy { display: flex; align-items:center; }
.brand-copy strong { font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",Arial,sans-serif; font-size:20px; font-weight:720; line-height:1; letter-spacing:-.055em; }
.brand-copy small { color: var(--secondary); font-size: 10px; line-height: 1.1; letter-spacing: .025em; }
.nav-links { display: flex; align-items: center; gap: 30px; }
.nav-links a { color: #3a3a3c; font-size: 13px; font-weight: 550; text-decoration: none; }
.nav-links a:hover { color: var(--blue); }
.nav-cta { justify-self: end; min-height: 34px; padding: 0 15px; display: inline-flex; align-items: center; border: 0; border-radius: 980px; background: var(--blue); color: white; font-size: 13px; font-weight: 650; text-decoration: none; cursor: pointer; }
.nav-cta:hover { background: var(--blue-hover); }
.topbar { transition: height 360ms cubic-bezier(.2,.8,.2,1),background 360ms ease,box-shadow 360ms ease; }
.topbar.is-scrolled { height: 56px; background: rgba(250,250,252,.93); box-shadow: 0 12px 35px rgba(0,0,0,.07); }
.nav-links { padding: 4px; gap: 2px; border: 1px solid rgba(0,0,0,.055); border-radius: 999px; background: rgba(232,232,237,.68); }
.nav-links a { position: relative; min-height: 32px; padding: 0 14px; display: inline-flex; align-items: center; border-radius: 999px; transition: color 220ms ease,background 220ms ease,transform 220ms ease; }
.nav-links a:hover { background: rgba(255,255,255,.65); transform: translateY(-1px); }.nav-links a.is-active { background: white; color: var(--text); box-shadow: 0 3px 12px rgba(0,0,0,.09); }
.nav-actions { justify-self: end; display: flex; align-items: center; gap: 9px; }
.language-switch { position: relative; height: 34px; padding: 3px; display: grid; grid-template-columns: 1fr 1fr; border: 1px solid rgba(0,0,0,.07); border-radius: 999px; background: rgba(232,232,237,.76); }
.language-switch i { position: absolute; z-index: 0; left: 3px; top: 3px; width: calc(50% - 3px); height: calc(100% - 6px); border-radius: 999px; background: white; box-shadow: 0 2px 8px rgba(0,0,0,.11); transition: transform 320ms cubic-bezier(.2,.85,.2,1); }.language-switch:has(button[data-language="en"][aria-pressed="true"]) i { transform: translateX(100%); }
.language-switch button { position: relative; z-index: 1; width: 35px; border: 0; background: transparent; color: var(--tertiary); font-size: 10px; font-weight: 800; cursor: pointer; }.language-switch button[aria-pressed="true"] { color: var(--text); }
.menu-toggle { display: none; width: 36px; height: 34px; padding: 0; place-items: center; border: 1px solid rgba(0,0,0,.08); border-radius: 50%; background: rgba(255,255,255,.75); cursor: pointer; }.menu-toggle i { position: absolute; width: 15px; height: 1.5px; border-radius: 2px; background: var(--text); transition: transform 260ms ease; }.menu-toggle i:first-child { transform: translateY(-3px); }.menu-toggle i:last-child { transform: translateY(3px); }.menu-toggle[aria-expanded="true"] i:first-child { transform: rotate(45deg); }.menu-toggle[aria-expanded="true"] i:last-child { transform: rotate(-45deg); }

.hero { position: relative; min-height: 680px; padding-block: 64px 56px; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(400px, .88fr); align-items: center; gap: clamp(42px, 6vw, 78px); isolation: isolate; }
.hero::before { content: ""; position: absolute; z-index: -1; width: min(820px,75vw); aspect-ratio: 1; left: -32%; top: -36%; border-radius: 50%; background: conic-gradient(from 145deg,rgba(10,132,255,.17),rgba(100,210,255,.1),rgba(191,90,242,.09),rgba(255,159,10,.08),rgba(10,132,255,.17)); filter: blur(86px); opacity: .72; pointer-events: none; }
.hero-copy { position: relative; z-index: 2; min-width: 0; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--blue); font-size: 12px; font-weight: 750; letter-spacing: .095em; }
.eyebrow i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(48,209,88,.12); }
.hero h1 { max-width: 760px; margin: 18px 0 0; font-size: clamp(52px, 5.35vw, 76px); line-height: .96; font-weight: 735; letter-spacing: -.06em; }
.hero-line { display: block; max-width: 100%; overflow-wrap: anywhere; }
.hero-line-primary { color: var(--text); }
.hero-line-color { padding-right: .06em; background: linear-gradient(100deg,#006de5 0%,#35a8ff 27%,#8f64ff 51%,#ff5f77 74%,#ff9f0a 100%); background-size: 190% 100%; background-position: 0% 50%; color: transparent; -webkit-background-clip: text; background-clip: text; animation: hero-spectrum 7s 1.7s ease-in-out infinite alternate; }
.hero-copy > p { max-width: 650px; margin: 24px 0 0; color: var(--secondary); font-size: 18px; line-height: 1.52; letter-spacing: -.012em; }
.hero-actions { margin-top: 29px; display: flex; align-items: center; gap: 11px; }
.hero-actions a { min-height: 50px; padding: 0 23px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; border-radius: 980px; font-size: 16px; font-weight: 650; text-decoration: none; transition: transform 180ms ease, background 180ms ease; }
.hero-actions a:hover { transform: translateY(-1px); }
.hero-primary { background: var(--blue); color: white; }.hero-primary:hover { background: var(--blue-hover); }
.hero-secondary { border: 1px solid #d2d2d7; background: rgba(255,255,255,.68); color: var(--text); }
.hero-secondary span { color: var(--blue); font-size: 12px; }
.hero-assurance { margin-top: 19px; display: flex; flex-wrap: wrap; gap: 8px 18px; color: var(--secondary); font-size: 12px; font-weight: 580; }
.hero-assurance i { color: var(--green); font-style: normal; font-weight: 800; }
.hero-quick-start { max-width: 680px; margin-top: 26px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
.hero-quick-start a { min-width: 0; min-height: 66px; padding: 10px 12px; display: grid; grid-template-columns: 36px minmax(0,1fr) 12px; align-items: center; gap: 10px; border: 1px solid rgba(0,0,0,.07); border-radius: 16px; background: rgba(255,255,255,.7); color: var(--text); text-decoration: none; box-shadow: 0 10px 32px rgba(25,32,48,.045); backdrop-filter: blur(18px); transition: transform 220ms cubic-bezier(.2,.8,.2,1),border-color 220ms ease,box-shadow 220ms ease; }
.hero-quick-start a:hover { transform: translateY(-2px); border-color: rgba(10,132,255,.3); box-shadow: 0 15px 36px rgba(25,32,48,.08); }
.hero-tool-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; background: #eaf3ff; color: #0878e4; font-size: 14px; font-weight: 800; }
.hero-tool-audio { background: #ecf9f0; color: #168a3d; font-size: 20px; }.hero-tool-studio { background: #f5edff; color: #9043c4; }.hero-tool-convert { background: #fff3e7; color: #c26a08; font-size: 18px; }
.hero-quick-start a > span:nth-child(2) { min-width: 0; display: grid; gap: 3px; }.hero-quick-start b { font-size: 13px; line-height: 1; }.hero-quick-start small { overflow: hidden; color: var(--secondary); font-size: 11px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }.hero-quick-start a > i { color: var(--tertiary); font-size: 20px; font-style: normal; }

.hero-visual { position: relative; width: min(100%, 500px); min-height: 560px; justify-self: end; overflow: hidden; padding: 25px; display: flex; flex-direction: column; border-radius: 44px; background: #08090c; color: white; box-shadow: 0 42px 90px rgba(0,0,0,.22), inset 0 0 0 1px rgba(255,255,255,.12); }
.hero-visual::before { content: ""; position: absolute; width: 420px; height: 420px; left: 28%; top: -35%; border-radius: 50%; background: #0a84ff; filter: blur(100px); opacity: .42; }
.hero-visual::after { content: ""; position: absolute; z-index: 4; inset: -30% -80%; background: linear-gradient(112deg,transparent 39%,rgba(255,255,255,.03) 45%,rgba(255,255,255,.34) 50%,rgba(255,255,255,.04) 56%,transparent 63%); transform: translateX(-42%) rotate(5deg); pointer-events: none; opacity: 0; }
.visual-top { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 16px; color: rgba(255,255,255,.62); font-size: 13px; }
.hero-preview-brand { display: flex; align-items: center; gap: 10px; }.hero-preview-brand > span:last-child { display: grid; gap: 2px; }.hero-preview-brand b { color: white; font-size: 13px; }.hero-preview-brand small { color: rgba(255,255,255,.52); font-size: 10px; }
.hero-preview-logo { width: 34px; height: 34px; padding: 7px; display: grid; place-items: center; border-radius: 10px; background: rgba(255,255,255,.94); }.hero-preview-logo img { width: 100%; height: 100%; object-fit: contain; }
.hero-device-badge { flex: none; padding: 7px 9px; display: inline-flex; align-items: center; gap: 6px; border: 1px solid rgba(255,255,255,.11); border-radius: 999px; background: rgba(8,9,12,.34); color: rgba(255,255,255,.7); font-size: 9px; font-weight: 800; letter-spacing: .08em; backdrop-filter: blur(12px); }.hero-device-badge i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px rgba(48,209,88,.7); }
.orbital-wave { position: absolute; inset: 14% 9% 20%; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.08); border-radius: 50%; }
.orbital-wave::before, .orbital-wave::after { content: ""; position: absolute; border: 1px solid rgba(255,255,255,.08); border-radius: 50%; }
.orbital-wave::before { inset: 12%; }.orbital-wave::after { inset: 25%; }
.wave-bars { position: relative; z-index: 1; height: 116px; display: flex; align-items: center; gap: 6px; }
.wave-bars i { width: 5px; height: 24px; border-radius: 99px; background: white; box-shadow: 0 0 20px rgba(10,132,255,.45); animation: hero-wave 1.45s ease-in-out infinite alternate; }
.wave-bars i:nth-child(2), .wave-bars i:nth-child(10) { height: 42px; animation-delay: -.7s; }.wave-bars i:nth-child(3), .wave-bars i:nth-child(9) { height: 65px; animation-delay: -.25s; }.wave-bars i:nth-child(4), .wave-bars i:nth-child(8) { height: 90px; animation-delay: -.9s; }.wave-bars i:nth-child(5), .wave-bars i:nth-child(7) { height: 52px; animation-delay: -.45s; }.wave-bars i:nth-child(6) { height: 112px; animation-delay: -1.1s; }
@keyframes hero-wave { to { transform: scaleY(.42); opacity: .55; } }
@keyframes hero-spectrum { to { background-position: 100% 50%; } }
@keyframes hero-sheen { 0% { opacity: 0; transform: translateX(-42%) rotate(5deg); } 18% { opacity: .85; } 100% { opacity: 0; transform: translateX(44%) rotate(5deg); } }
.hero-result { position: relative; z-index: 2; margin: auto 0 22px; text-align: center; text-shadow: 0 3px 18px black; }.hero-result > span { color: #78b9ff; font-size: 9px; font-weight: 820; letter-spacing: .13em; }.hero-result p { margin: 9px 0 15px; font-size: clamp(22px,2.35vw,29px); font-weight: 720; letter-spacing: -.04em; }.hero-result p strong { color: #5db2ff; }.hero-result > div { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; }.hero-result small { padding: 6px 9px; border: 1px solid rgba(255,255,255,.12); border-radius: 999px; background: rgba(8,9,12,.33); color: rgba(255,255,255,.7); font-size: 9px; backdrop-filter: blur(12px); }
.hero-journey { position: relative; z-index: 2; margin: 0; padding: 13px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 5px; border: 1px solid rgba(255,255,255,.11); border-radius: 18px; background: rgba(6,8,12,.52); list-style: none; backdrop-filter: blur(18px); }.hero-journey li { position: relative; min-width: 0; display: grid; justify-items: center; gap: 6px; color: rgba(255,255,255,.52); text-align: center; }.hero-journey li + li::before { content: ""; position: absolute; width: calc(50% - 17px); height: 1px; right: calc(50% + 17px); top: 11px; background: rgba(255,255,255,.16); }.hero-journey span { width: 22px; height: 22px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.15); border-radius: 50%; font-size: 9px; font-weight: 800; }.hero-journey b { overflow: hidden; font-size: 9px; font-weight: 650; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }.hero-journey .is-active { color: white; }.hero-journey .is-active span { border-color: #228af2; background: #0878e4; box-shadow: 0 0 0 4px rgba(10,132,255,.14); }

.js .hero-copy .eyebrow,.js .hero-line,.js .hero-copy > p,.js .hero-actions,.js .hero-trial-offer,.js .hero-assurance,.js .hero-quick-start { opacity: 0; filter: blur(7px); transform: translateY(24px); transition: opacity 880ms cubic-bezier(.16,.86,.26,1),transform 880ms cubic-bezier(.16,.86,.26,1),filter 880ms ease; }
.js .hero-visual { opacity: 0; filter: blur(12px); transform: translateY(34px) scale(.94) rotate(1.2deg); clip-path: inset(11% 8% 11% 8% round 54px); transition: opacity 1.05s .5s cubic-bezier(.16,.86,.26,1),transform 1.05s .5s cubic-bezier(.16,.86,.26,1),filter 1.05s .5s ease,clip-path 1.2s .5s cubic-bezier(.16,.86,.26,1); }
.js.hero-ready .hero-copy .eyebrow,.js.hero-ready .hero-line,.js.hero-ready .hero-copy > p,.js.hero-ready .hero-actions,.js.hero-ready .hero-trial-offer,.js.hero-ready .hero-assurance,.js.hero-ready .hero-quick-start { opacity: 1; filter: none; transform: none; }
.js.hero-ready .hero-line-primary { transition-delay: 110ms; }
.js.hero-ready .hero-line-color { transition-delay: 220ms; }
.js.hero-ready .hero-copy > p { transition-delay: 340ms; }
.js.hero-ready .hero-actions { transition-delay: 450ms; }
.js.hero-ready .hero-trial-offer { transition-delay: 520ms; }
.js.hero-ready .hero-assurance { transition-delay: 600ms; }
.js.hero-ready .hero-quick-start { transition-delay: 670ms; }
.js.hero-ready .hero-visual { opacity: 1; filter: none; transform: none; clip-path: inset(0 round 44px); }
.js.hero-ready .hero-visual::after { animation: hero-sheen 1.45s 1.1s cubic-bezier(.2,.72,.2,1) both; }

.product-proof { border-block: 1px solid var(--line); background: rgba(255,255,255,.72); }
.product-proof .page-shell { min-height: 100px; display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.product-proof p { margin: 0; color: var(--secondary); font-size: 13px; font-weight: 650; }
.product-proof div div { display: flex; align-items: center; gap: 18px; color: var(--text); font-size: 13px; font-weight: 600; }
.product-proof div div i { width: 4px; height: 4px; border-radius: 50%; background: #c7c7cc; }

.studio-section, .features-section, .pricing-section { padding-block: 118px; scroll-margin-top: 60px; }
.section-heading { max-width: 760px; margin: 0 auto 50px; text-align: center; }
.section-heading h2 { margin: 15px 0 0; font-size: clamp(40px, 5vw, 64px); line-height: 1.02; letter-spacing: -.055em; }
.section-heading p { margin: 18px auto 0; color: var(--secondary); font-size: 18px; line-height: 1.48; }
.section-heading.compact { margin-bottom: 44px; }.section-heading.compact h2 { font-size: clamp(38px, 4.4vw, 58px); }

.studio-layout { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(330px, .82fr); gap: 20px; align-items: start; }
.studio-card, .preview-card, .what-happens, .progress-card, .side-promo { border: 1px solid rgba(255,255,255,.82); background: rgba(255,255,255,.86); box-shadow: 0 20px 65px rgba(0,0,0,.075); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.studio-card { padding: 30px; border-radius: 28px; }
.card-title { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 24px; }
.card-title h3 { margin: 0 0 5px; font-size: 26px; line-height: 1.15; letter-spacing: -.035em; }
.card-title p { margin: 0; color: var(--secondary); font-size: 14px; }
.step-pill { padding: 7px 10px; border-radius: 7px; background: #e8f2ff; color: var(--blue); font-size: 11px; font-weight: 780; letter-spacing: .08em; }
.selected-plan-bar { min-height: 44px; margin: -7px 0 15px; padding: 0 12px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; border: 1px solid #d8e9fb; border-radius: 12px; background: #f1f7ff; font-size: 12px; }
.selected-plan-bar span { color: var(--secondary); }.selected-plan-bar strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }.selected-plan-bar a { color: var(--blue); font-weight: 680; text-decoration: none; }

.dropzone { min-height: 188px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1.5px dashed #b6b6bb; border-radius: 20px; background: #f7f7f9; cursor: pointer; transition: border-color 180ms ease, background 180ms ease, transform 180ms ease; }
.dropzone:hover, .dropzone.dragging { border-color: var(--blue); background: #f1f7ff; transform: translateY(-1px); }
.dropzone.has-file { border-style: solid; border-color: rgba(48,209,88,.72); background: #f2fbf5; }
.dropzone input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.upload-symbol { width: 52px; height: 52px; margin-bottom: 14px; display: grid; place-items: center; border-radius: 16px; background: white; color: var(--blue); box-shadow: 0 8px 24px rgba(0,0,0,.09); }
.upload-symbol svg { width: 26px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.dropzone strong { max-width: 78%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; letter-spacing: -.01em; }.dropzone small { margin-top: 6px; color: var(--secondary); font-size: 13px; }

.section-label { margin: 27px 0 12px; display: flex; align-items: center; justify-content: space-between; color: var(--tertiary); font-size: 12px; font-weight: 750; letter-spacing: .085em; }
.section-label b { padding: 3px 6px; border-radius: 5px; background: #e8f2ff; color: var(--blue); font-size: 9px; letter-spacing: .08em; }
.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.setting { min-height: 77px; padding: 12px 14px; display: flex; flex-direction: column; justify-content: center; gap: 7px; border: 1px solid rgba(0,0,0,.035); border-radius: 14px; background: #f5f5f7; min-width: 0; }
.setting-wide { grid-column: 1 / -1; }
.setting > span:first-child { color: var(--secondary); font-size: 14px; font-weight: 620; }
.setting > small { color: var(--tertiary); font-size: 12px; line-height: 1.35; }
.setting > small,.tool-settings-grid label > small { color: var(--secondary); font-size: 13px; line-height: 1.45; }
.studio-card[data-word-highlight="false"] .color-setting { opacity: .56; }
.studio-card[data-word-highlight="false"] .color-setting::after { content: "Tek renk modunda kullanılmaz"; color: var(--tertiary); font-size: 11px; }
.setting select { width: 100%; padding: 0 25px 0 0; border: 0; outline: 0; appearance: none; background-color: transparent; color: var(--text); font-size: 15px; font-weight: 570; background-image: linear-gradient(45deg, transparent 50%, #8e8e93 50%), linear-gradient(135deg, #8e8e93 50%, transparent 50%); background-position: calc(100% - 6px) 7px, calc(100% - 1px) 7px; background-size: 5px 5px; background-repeat: no-repeat; }
.setting select:focus-visible { outline: 3px solid rgba(0,113,227,.22); outline-offset: 4px; border-radius: 3px; }
.color-control, .range-control { height: 24px; display: flex; align-items: center; gap: 10px; }
.color-control input { width: 25px; height: 25px; padding: 0; border: 0; border-radius: 50%; background: transparent; overflow: hidden; }.color-control input::-webkit-color-swatch-wrapper { padding: 0; }.color-control input::-webkit-color-swatch { border: 0; border-radius: 50%; }
.color-control output { color: var(--text); font-size: 14px; font-weight: 600; }.range-control input { flex: 1; min-width: 0; accent-color: var(--blue); }.range-control output { width: 42px; color: var(--text); font-size: 14px; font-weight: 680; text-align: right; }

.position-setting { grid-column: 1 / -1; margin: 0; padding: 15px; border: 1px solid rgba(0,0,0,.035); border-radius: 16px; background: #f5f5f7; }
.position-setting legend { padding: 0; color: var(--secondary); font-size: 14px; font-weight: 620; }
.position-toolbar { min-height: 35px; margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }.position-toolbar > span { font-size: 13px; font-weight: 680; }
.orientation-switch { padding: 3px; display: inline-flex; gap: 2px; border-radius: 9px; background: #e5e5ea; }.orientation-switch button { min-width: 62px; height: 28px; padding: 0 10px; border: 0; border-radius: 7px; background: transparent; color: var(--secondary); font-size: 12px; font-weight: 650; cursor: pointer; }.orientation-switch button[aria-pressed="true"] { background: white; color: var(--text); box-shadow: 0 1px 5px rgba(0,0,0,.13); }
.orientation-switch button:focus-visible, .position-screen:focus-visible { outline: 3px solid rgba(0,113,227,.32); outline-offset: 2px; }
.position-stage { min-height: 184px; display: grid; place-items: center; }.position-screen { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 13px; touch-action: none; user-select: none; cursor: crosshair; background: radial-gradient(circle at 78% 20%, rgba(10,132,255,.3), transparent 42%), #11131a; box-shadow: inset 0 0 0 1px rgba(255,255,255,.09); transition: width 240ms ease, aspect-ratio 240ms ease; }.position-screen.is-portrait { width: min(46%,190px); aspect-ratio: 9 / 16; }
.position-guide { position: absolute; z-index: 0; display: block; opacity: .17; pointer-events: none; background: white; }.position-guide.guide-v1, .position-guide.guide-v2 { top: 0; bottom: 0; width: 1px; }.position-guide.guide-v1 { left: 33.333%; }.position-guide.guide-v2 { left: 66.666%; }.position-guide.guide-h1, .position-guide.guide-h2 { left: 0; right: 0; height: 1px; }.position-guide.guide-h1 { top: 33.333%; }.position-guide.guide-h2 { top: 66.666%; }
.position-handle { position: absolute; z-index: 2; left: 50%; top: 84%; max-width: 76%; padding: 5px 10px; border: 1px solid rgba(255,255,255,.32); border-radius: 999px; transform: translate(-50%,-50%); background: color-mix(in srgb,var(--accent) 88%,white); color: #08090b; box-shadow: 0 3px 16px rgba(0,0,0,.38), 0 0 18px color-mix(in srgb,var(--accent) 30%,transparent); font-size: 11px; font-weight: 780; pointer-events: none; white-space: nowrap; }
.position-caption { margin-top: 9px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }.position-caption small { color: var(--tertiary); font-size: 12px; }.position-caption output { flex: none; color: var(--secondary); font-size: 11px; font-weight: 680; font-variant-numeric: tabular-nums; }

.primary-button { width: 100%; height: 56px; margin-top: 19px; padding: 0 22px; display: flex; align-items: center; justify-content: center; gap: 9px; border: 0; border-radius: 14px; background: var(--blue); color: white; font-size: 16px; font-weight: 680; cursor: pointer; transition: background 160ms ease, transform 160ms ease, box-shadow 160ms ease; }.primary-button:hover { background: var(--blue-hover); transform: translateY(-1px); box-shadow: 0 12px 28px rgba(0,113,227,.22); }.primary-button:disabled { opacity: .6; cursor: wait; transform: none; box-shadow: none; }.primary-button svg { width: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }.helper { margin: 12px 0 0; color: var(--tertiary); font-size: 12px; text-align: center; }

.preview-column { display: grid; gap: 18px; }.preview-card { padding: 18px; border-radius: 28px; background-image:linear-gradient(145deg,rgba(10,132,255,.045),transparent 42%); }.preview-topline { padding: 2px 2px 15px; display: flex; align-items: center; justify-content: space-between; gap:12px; color: var(--text); font-size: 14px; font-weight: 720; }.preview-topline > span { display:flex; align-items:center; gap:8px; }.preview-topline i { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow:0 0 0 5px rgba(48,209,88,.11),0 0 14px rgba(48,209,88,.35); }.preview-topline small { color:var(--tertiary); font-size:10px; font-weight:720; letter-spacing:.06em; text-transform:uppercase; }
.video-preview { position: relative; width: 100%; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 18px; background:radial-gradient(circle at 78% 18%,rgba(10,132,255,.34),transparent 38%),radial-gradient(circle at 20% 82%,rgba(191,90,242,.22),transparent 42%),#0b0e15; box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 16px 38px rgba(7,12,25,.18); transition: width 240ms ease, aspect-ratio 240ms ease; }.video-preview.is-portrait { width: min(72%,230px); margin-inline: auto; aspect-ratio: 9 / 16; }.video-preview::before { content: ""; position: absolute; inset: 0; opacity: .3; background-image: linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px); background-size: 36px 36px; mask-image: linear-gradient(to bottom,transparent,black 32%,black 66%,transparent); }.preview-canvas-ui { position:absolute; z-index:3; left:13px; right:13px; top:12px; display:flex; align-items:center; justify-content:space-between; pointer-events:none; }.preview-canvas-ui span,.preview-canvas-ui b { padding:5px 7px; border:1px solid rgba(255,255,255,.1); border-radius:7px; background:rgba(5,8,14,.48); color:rgba(255,255,255,.7); font-size:8px; font-weight:800; letter-spacing:.08em; backdrop-filter:blur(12px); }.preview-canvas-ui b { color:white; letter-spacing:.02em; }.preview-glow { position: absolute; width: 220px; height: 220px; top: -100px; right: -60px; border-radius: 50%; background: #0a84ff; filter: blur(65px); opacity: .38; }
.preview-mark { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 4px; opacity: .57; }.preview-mark i { width: 4px; border-radius: 99px; background: white; animation: sound 1.4s ease-in-out infinite alternate; }.preview-mark i:nth-child(1),.preview-mark i:nth-child(5) { height: 22px; }.preview-mark i:nth-child(2),.preview-mark i:nth-child(4) { height: 45px; animation-delay: -.45s; }.preview-mark i:nth-child(3) { height: 68px; animation-delay: -.8s; }@keyframes sound { to { transform: scaleY(.48); opacity: .6; } }
.subtitle-demo { position: absolute; left: 50%; top: 84%; z-index: 2; width: max-content; max-width: 82%; color: white; font-size: var(--preview-font-size,clamp(17px,1.8vw,22px)); font-weight: 760; line-height: 1.12; letter-spacing: -.03em; text-align: center; text-wrap: balance; text-shadow: 0 1px 2px rgba(0,0,0,.95),0 5px 18px rgba(0,0,0,.82); transform: translate(-50%,-100%); transition: left 180ms ease, top 180ms ease, transform 180ms ease, font-size 180ms ease, letter-spacing 220ms ease; }.subtitle-demo b { color: var(--accent); font-weight: 850; animation:caption-focus 1.8s cubic-bezier(.2,.8,.2,1) infinite; }.subtitle-demo.glass { padding: 8px 12px; border: 1px solid rgba(255,255,255,.18); border-radius: 10px; background: rgba(8,8,10,.62); backdrop-filter: blur(12px); }.subtitle-demo.minimal { font-weight: 580; letter-spacing: .01em; text-shadow: 0 1px 4px black,0 3px 10px rgba(0,0,0,.75); }.subtitle-demo.karaoke { font-weight: 850; transform-origin: center; letter-spacing: -.045em; }.subtitle-demo.cinematic { font-family: "Avenir Next",sans-serif; font-weight: 650; letter-spacing: .045em; text-transform: uppercase; text-shadow: 0 2px 3px #000,0 7px 18px rgba(0,0,0,.85); }.subtitle-demo.impact { font-family: "Avenir Next",sans-serif; font-weight: 850; letter-spacing: -.05em; text-transform: uppercase; -webkit-text-stroke: .65px rgba(0,0,0,.72); }.subtitle-demo.neon { font-family: "Avenir Next",sans-serif; font-weight: 780; text-shadow: 0 0 8px color-mix(in srgb,var(--accent) 90%,transparent),0 2px 7px #000; }.subtitle-demo.neon b { text-shadow: 0 0 12px var(--accent),0 0 24px color-mix(in srgb,var(--accent) 65%,transparent); }.subtitle-demo.soft { padding: 7px 11px; border-radius: 12px; background: rgba(20,20,24,.48); font-weight: 650; backdrop-filter: blur(16px); }
@keyframes caption-focus { 0%,42%,100% { filter:brightness(1); transform:translateY(0); } 18% { filter:brightness(1.14); transform:translateY(-1px); } }
.preview-time { position: absolute; z-index:3; bottom: 17px; left: 14px; color: rgba(255,255,255,.62); font-size: 9px; font-variant-numeric: tabular-nums; }.preview-playback { position:absolute; z-index:3; left:72px; right:14px; bottom:20px; height:3px; overflow:visible; border-radius:999px; background:rgba(255,255,255,.2); }.preview-playback i { display:block; width:56%; height:100%; border-radius:inherit; background:linear-gradient(90deg,#64d2ff,#0a84ff); box-shadow:0 0 10px rgba(10,132,255,.65); }.preview-playback b { position:absolute; left:56%; top:50%; width:7px; height:7px; border-radius:50%; background:white; box-shadow:0 0 0 3px rgba(255,255,255,.16); transform:translate(-50%,-50%); }.preview-live-settings { margin-top:12px; display:grid; grid-template-columns:1fr 1fr; gap:8px; }.preview-live-settings > div { min-width:0; padding:10px 11px; display:grid; gap:4px; border:1px solid var(--line); border-radius:12px; background:color-mix(in srgb,var(--page) 76%,transparent); }.preview-live-settings span { color:var(--tertiary); font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }.preview-live-settings strong { min-width:0; overflow:hidden; color:var(--text); font-size:12px; font-weight:720; text-overflow:ellipsis; white-space:nowrap; }.preview-live-settings strong i { width:8px; height:8px; display:inline-block; margin-right:3px; border-radius:50%; background:var(--accent); box-shadow:0 0 9px color-mix(in srgb,var(--accent) 65%,transparent); }.preview-specs { display: grid; grid-template-columns: repeat(3,1fr); padding-top: 15px; }.preview-specs div { display: flex; flex-direction: column; align-items: center; gap: 3px; border-right: 1px solid var(--line); }.preview-specs div:last-child { border: 0; }.preview-specs strong { font-size: 15px; letter-spacing: -.02em; }.preview-specs span { color: var(--tertiary); font-size: 10px; }
.what-happens { padding: 8px 20px; border-radius: 24px; }.what-happens > div { min-height: 67px; display: flex; align-items: center; gap: 14px; border-bottom: 1px solid var(--line); }.what-happens > div:last-child { border: 0; }.what-happens > div > span { width: 28px; height: 28px; display: grid; place-items: center; flex: none; border-radius: 9px; background: #edf5ff; color: var(--blue); font-size: 11px; font-weight: 750; }.what-happens p { margin: 0; display: flex; flex-direction: column; gap: 2px; }.what-happens strong { font-size: 14px; }.what-happens small { color: var(--secondary); font-size: 12px; }
.side-promo { position: relative; min-height: 176px; padding: 24px; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; border-radius: 24px; background: #111216; color: white; text-decoration: none; }.side-promo::after { content: ""; position: absolute; width: 180px; height: 180px; right: -50px; top: -60px; border-radius: 50%; background: var(--blue); filter: blur(48px); opacity: .58; }.side-promo > * { position: relative; z-index: 1; }.side-promo > span { color: #64aaff; font-size: 10px; font-weight: 800; letter-spacing: .1em; }.side-promo strong { margin-top: 11px; font-size: 22px; line-height: 1.08; letter-spacing: -.035em; }.side-promo small { margin-top: auto; color: rgba(255,255,255,.72); font-size: 13px; }
.video-support-row { margin-top:18px; display:grid; grid-template-columns:minmax(0,1.18fr) minmax(330px,.82fr); gap:20px; align-items:stretch; }
.video-support-row .what-happens,.video-support-row .side-promo { min-height:210px; }

.progress-card { margin-top: 20px; padding: 25px 27px; border-radius: 24px; scroll-margin-top: 84px; }.progress-heading { display: flex; align-items: center; justify-content: space-between; }.progress-heading > div { display: flex; align-items: center; gap: 10px; }.progress-heading strong { font-size: 15px; }.progress-heading > b { color: var(--blue); font-size: 14px; font-variant-numeric: tabular-nums; }.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 4px rgba(0,113,227,.1); animation: pulse 1.2s ease-in-out infinite alternate; }@keyframes pulse { to { opacity: .45; } }.progress-track { height: 5px; margin: 17px 0 11px; overflow: hidden; border-radius: 99px; background: #e9e9ec; }.progress-track i { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--blue); transition: width .45s ease; }.progress-card > p { margin: 0; color: var(--secondary); font-size: 14px; }.progress-card.error .status-dot,.progress-card.error .progress-track i { background: #ff3b30; box-shadow: none; }.result-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }.download-button,.reveal-button { min-height: 43px; margin-top: 18px; padding: 0 17px; display: inline-flex; align-items: center; justify-content: center; border-radius: 11px; font-size: 14px; font-weight: 650; text-decoration: none; cursor: pointer; }.download-button { border: 0; background: var(--blue); color: white; }.reveal-button { border: 1px solid var(--line); background: #f5f5f7; color: var(--text); }

.features-section { border-top: 1px solid var(--line); }.feature-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }.feature-card { position: relative; min-height: 460px; overflow: hidden; padding: 38px; border: 1px solid var(--line); border-radius: 32px; background: white; }.audio-feature { grid-column: 1 / -1; min-height: 420px; display: grid; grid-template-columns: .8fr 1.2fr; align-items: center; gap: 45px; background: #0d0e12; color: white; }.feature-copy { position: relative; z-index: 2; max-width: 520px; }.feature-copy > span { color: var(--blue); font-size: 11px; font-weight: 800; letter-spacing: .11em; }.feature-copy h3 { margin: 15px 0 0; font-size: clamp(32px,4vw,52px); line-height: 1.02; letter-spacing: -.05em; }.feature-copy p { margin: 18px 0 0; color: var(--secondary); font-size: 17px; line-height: 1.5; }.audio-feature .feature-copy p { color: rgba(255,255,255,.6); }.audio-meter { min-height: 230px; display: flex; align-items: center; justify-content: center; gap: 10px; }.audio-meter::after { content: "−14 LUFS"; position: absolute; right: 42px; bottom: 34px; color: rgba(255,255,255,.5); font-size: 12px; }.audio-meter i { width: 8px; height: 40px; border-radius: 99px; background: linear-gradient(to top,#0a84ff,#64d2ff); box-shadow: 0 0 22px rgba(10,132,255,.38); }.audio-meter i:nth-child(2),.audio-meter i:nth-child(13) { height: 70px; }.audio-meter i:nth-child(3),.audio-meter i:nth-child(12) { height: 118px; }.audio-meter i:nth-child(4),.audio-meter i:nth-child(11) { height: 165px; }.audio-meter i:nth-child(5),.audio-meter i:nth-child(10) { height: 93px; }.audio-meter i:nth-child(6),.audio-meter i:nth-child(9) { height: 188px; }.audio-meter i:nth-child(7),.audio-meter i:nth-child(8) { height: 135px; }
.subtitle-feature { background: #f1f1f3; }.caption-stack { position: absolute; left: 38px; right: 38px; bottom: 42px; display: flex; flex-direction: column; align-items: flex-start; font-size: clamp(34px,5vw,58px); line-height: .98; font-weight: 760; letter-spacing: -.055em; }.caption-stack strong { color: var(--blue); }.caption-stack span:last-child { color: #a1a1a6; }
.privacy-feature { display: flex; flex-direction: column; justify-content: flex-end; background: white; }.privacy-symbol { position: absolute; left: 50%; top: 26%; width: 112px; height: 92px; transform: translateX(-50%); border: 8px solid #1d1d1f; border-radius: 24px; }.privacy-symbol::before { content: ""; position: absolute; width: 58px; height: 56px; left: 50%; top: -54px; transform: translateX(-50%); border: 8px solid #1d1d1f; border-bottom: 0; border-radius: 34px 34px 0 0; }.privacy-symbol span { position: absolute; width: 12px; height: 26px; left: 50%; top: 27px; transform: translateX(-50%); border-radius: 99px; background: var(--blue); }

.offer-section { padding-bottom: 118px; }.offer-card { position: relative; min-height: 430px; overflow: hidden; padding: 58px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; border-radius: 36px; background: #0a84ff; color: white; }.offer-card > div:first-child { position: relative; z-index: 2; }.offer-card span { font-size: 11px; font-weight: 800; letter-spacing: .12em; }.offer-card h2 { margin: 16px 0 0; font-size: clamp(48px,6vw,76px); line-height: .96; letter-spacing: -.06em; }.offer-card p { margin: 20px 0 0; color: rgba(255,255,255,.72); font-size: 17px; }.offer-card > a { position: relative; z-index: 2; min-height: 48px; margin-top: 30px; padding: 0 20px; display: inline-flex; align-items: center; border-radius: 980px; background: white; color: var(--blue); font-size: 15px; font-weight: 700; text-decoration: none; }.offer-orbit { position: absolute; width: 540px; height: 540px; right: -70px; top: -55px; border: 1px solid rgba(255,255,255,.28); border-radius: 50%; }.offer-orbit::before,.offer-orbit::after { content: ""; position: absolute; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; }.offer-orbit::before { inset: 14%; }.offer-orbit::after { inset: 29%; }.offer-orbit i { position: absolute; width: 18px; height: 18px; border-radius: 50%; background: white; box-shadow: 0 0 34px rgba(255,255,255,.65); }.offer-orbit i:nth-child(1) { left: 9%; top: 31%; }.offer-orbit i:nth-child(2) { right: 18%; bottom: 12%; width: 10px; height: 10px; }.offer-orbit i:nth-child(3) { left: 38%; top: 38%; width: 72px; height: 72px; background: rgba(255,255,255,.9); }

.pricing-section { border-top: 1px solid var(--line); }.pricing-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; align-items: stretch; }.price-card { position: relative; min-height: 520px; padding: 32px; display: flex; flex-direction: column; border: 1px solid #d9d9de; border-radius: 28px; background: white; }.price-card.featured { border-color: var(--blue); box-shadow: 0 24px 70px rgba(0,113,227,.16); transform: translateY(-10px); }.popular { position: absolute; right: 24px; top: 25px; padding: 5px 8px; border-radius: 6px; background: #e8f2ff; color: var(--blue); font-size: 9px; font-weight: 800; letter-spacing: .08em; }.plan-name { color: var(--secondary); font-size: 14px; font-weight: 680; }.price-card h3 { min-height: 52px; margin: 17px 0 0; font-size: 38px; letter-spacing: -.045em; }.price-card h3 b { font-size: 40px; }.price-card h3 small { margin-left: 5px; color: var(--secondary); font-size: 14px; font-weight: 550; }.price-card > p { min-height: 63px; margin: 14px 0 0; color: var(--secondary); font-size: 15px; line-height: 1.45; }.price-card ul { margin: 27px 0 30px; padding: 24px 0 0; border-top: 1px solid var(--line); list-style: none; }.price-card li { position: relative; margin: 13px 0; padding-left: 23px; font-size: 14px; }.price-card li::before { content: "✓"; position: absolute; left: 0; color: var(--blue); font-weight: 800; }.price-card > a { min-height: 48px; margin-top: auto; display: flex; align-items: center; justify-content: center; border: 1px solid #d2d2d7; border-radius: 12px; color: var(--blue); font-size: 14px; font-weight: 700; text-decoration: none; }.price-card.featured > a { border-color: var(--blue); background: var(--blue); color: white; }.pricing-note { margin: 26px 0 0; color: var(--tertiary); font-size: 12px; text-align: center; }.price-card.active-plan { outline: 3px solid rgba(48,209,88,.32); outline-offset: 4px; }.price-card.active-plan::after { content: "AKTİF PLAN"; position: absolute; right: 22px; bottom: 22px; color: var(--green); font-size: 10px; font-weight: 800; letter-spacing: .08em; }.price-card.active-plan > a { margin-bottom: 28px; }

.closing-section { padding-block: 135px 145px; text-align: center; }.closing-section h2 { margin: 18px 0 0; font-size: clamp(58px,8vw,100px); line-height: .9; letter-spacing: -.07em; }.closing-section h2 span { color: var(--blue); }.closing-section p { margin: 27px auto 0; color: var(--secondary); font-size: 18px; }.closing-section > a { min-height: 50px; margin-top: 30px; padding: 0 23px; display: inline-flex; align-items: center; border-radius: 980px; background: var(--blue); color: white; font-size: 16px; font-weight: 680; text-decoration: none; }
.account-dialog { width: min(520px,calc(100% - 28px)); max-height: min(760px,calc(100vh - 28px)); padding: 0; overflow: auto; border: 0; border-radius: 28px; background: transparent; box-shadow: 0 36px 100px rgba(0,0,0,.34); }.account-dialog::backdrop { background: rgba(0,0,0,.34); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); }.dialog-shell { position: relative; padding: 38px; background: rgba(255,255,255,.97); }.dialog-close { position: absolute; right: 18px; top: 18px; width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 50%; background: #e9e9ed; color: var(--secondary); font-size: 22px; line-height: 1; cursor: pointer; }.dialog-kicker { color: var(--blue); font-size: 11px; font-weight: 800; letter-spacing: .11em; }.account-auth h2,.account-profile h2 { max-width: 400px; margin: 13px 0 0; font-size: 34px; line-height: 1.04; letter-spacing: -.045em; }.account-auth > p,.account-profile > p { margin: 14px 0 0; color: var(--secondary); font-size: 14px; line-height: 1.5; }.auth-tabs { margin-top: 28px; padding: 4px; display: grid; grid-template-columns: 1fr 1fr; border-radius: 11px; background: #ececef; }.auth-tabs button { height: 36px; border: 0; border-radius: 8px; background: transparent; color: var(--secondary); font-size: 13px; font-weight: 680; cursor: pointer; }.auth-tabs button[aria-selected="true"] { background: white; color: var(--text); box-shadow: 0 1px 5px rgba(0,0,0,.12); }.auth-form { margin-top: 20px; display: grid; gap: 13px; }.auth-form label { display: grid; gap: 7px; }.auth-form label span { color: var(--secondary); font-size: 13px; font-weight: 620; }.auth-form input { width: 100%; height: 48px; padding: 0 13px; border: 1px solid #d2d2d7; border-radius: 11px; background: white; outline: none; font-size: 15px; }.auth-form input:focus { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(0,113,227,.11); }.auth-form > button,.logout-button { min-height: 48px; margin-top: 4px; border: 0; border-radius: 11px; background: var(--blue); color: white; font-size: 14px; font-weight: 700; cursor: pointer; }.auth-message { min-height: 20px; margin: 13px 0 0; color: #d70015; font-size: 13px; }.account-profile { min-height: 320px; }.profile-plan { margin-top: 28px; padding: 18px; display: flex; align-items: center; justify-content: space-between; border: 1px solid #d9e9fa; border-radius: 14px; background: #f1f7ff; }.profile-plan span { color: var(--secondary); font-size: 13px; }.profile-plan strong { color: var(--blue); font-size: 15px; }.profile-note { margin-top: 14px !important; }.logout-button { width: 100%; margin-top: 28px; background: #1d1d1f; }
.auth-name-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.auth-form label > small { color:var(--tertiary); font-size:11px; line-height:1.4; }
.turnstile-box { width:100%; min-height:0; overflow:hidden; border-radius:12px; }
.turnstile-box:not(:empty) { min-height:66px; }
.turnstile-box iframe { max-width:100%; }
.site-footer { border-top: 1px solid var(--line); background: white; }.site-footer .page-shell { min-height: 115px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; color: var(--tertiary); font-size: 12px; }.footer-brand { justify-self: start; }.site-footer p { margin: 0; }.site-footer .page-shell > span { justify-self: end; }
.footer-legal { justify-self: end; display: flex; align-items: center; gap: 14px; }.footer-legal a { color: inherit; text-decoration: none; }.footer-legal a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }

body > main,.campaign-strip,.product-proof,.site-footer { position: relative; z-index: 1; }
.cyber-network { position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; opacity: .72; pointer-events: none; mix-blend-mode: multiply; }
.site-ambient { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; opacity: .72; }
.site-ambient i { position: absolute; display: block; border-radius: 50%; filter: blur(90px); will-change: transform; }
.site-ambient i:nth-child(1) { width: 38vw; height: 38vw; left: -16vw; top: 12vh; background: rgba(10,132,255,.12); animation: ambient-one 18s ease-in-out infinite alternate; }
.site-ambient i:nth-child(2) { width: 34vw; height: 34vw; right: -15vw; top: 46vh; background: rgba(100,210,255,.1); animation: ambient-two 22s ease-in-out infinite alternate; }
.site-ambient i:nth-child(3) { width: 30vw; height: 30vw; left: 35vw; bottom: -18vw; background: rgba(48,209,88,.055); animation: ambient-three 20s ease-in-out infinite alternate; }
.site-ambient span { position: absolute; inset: 0; opacity: .18; background-image: radial-gradient(rgba(0,113,227,.35) .65px,transparent .65px); background-size: 24px 24px; mask-image: linear-gradient(to bottom,transparent 5%,black 42%,transparent 95%); }
.scroll-progress { position: fixed; z-index: 90; left: 0; right: 0; top: 0; height: 3px; background: rgba(255,255,255,.08); pointer-events: none; }
.scroll-progress i { display: block; width: 100%; height: 100%; transform: scaleX(0); transform-origin: left; background: linear-gradient(90deg,#0071e3,#64d2ff,#30d158); box-shadow: 0 0 14px rgba(10,132,255,.6); }
@keyframes ambient-one { to { transform: translate3d(24vw,14vh,0) scale(1.2); } }
@keyframes ambient-two { to { transform: translate3d(-25vw,-20vh,0) scale(.86); } }
@keyframes ambient-three { to { transform: translate3d(8vw,-30vh,0) scale(1.18); } }

.hero-art { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: .78; transform: scale(1.045); animation: hero-art-drift 12s ease-in-out infinite alternate; }
.hero-art-shade { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg,rgba(5,7,12,.06),rgba(5,7,12,.12) 45%,rgba(5,7,12,.72)); }
.hero-visual::before { z-index: 1; mix-blend-mode: screen; }
.hero-visual .orbital-wave { z-index: 1; opacity: .34; }
@keyframes hero-art-drift { to { transform: scale(1.095) translate3d(-1.2%,.6%,0); } }

.signal-section { padding-block: 34px 96px; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
.signal-card { min-height: 120px; padding: 24px; display: flex; flex-direction: column; justify-content: flex-end; border: 1px solid rgba(255,255,255,.82); border-radius: 24px; background: rgba(255,255,255,.76); box-shadow: 0 14px 40px rgba(0,0,0,.045); backdrop-filter: blur(20px); }
.signal-card { position: relative; overflow: hidden; }
.signal-card::before { content: ""; position: absolute; width: 95px; height: 95px; right: -38px; top: -45px; border-radius: 50%; background: radial-gradient(circle,rgba(10,132,255,.26),transparent 68%); animation: signal-pulse 4.8s ease-in-out infinite alternate; }
@keyframes signal-pulse { to { transform: translate(-12px,14px) scale(1.25); opacity: .45; } }
.signal-card strong { font-size: clamp(25px,3vw,38px); line-height: 1; letter-spacing: -.045em; }
.signal-card span { margin-top: 9px; color: var(--secondary); font-size: 13px; }

.audience-section { padding: 118px 0; }
.audience-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.audience-grid article { min-height: 275px; padding: 30px; display: flex; flex-direction: column; justify-content: flex-end; border: 1px solid var(--line); border-radius: 28px; background: linear-gradient(145deg,#fff,#f2f2f5); transition: transform 300ms cubic-bezier(.2,.8,.2,1), box-shadow 300ms ease; }
.audience-grid article { position: relative; overflow: hidden; isolation: isolate; }
.audience-grid article::before { content: ""; position: absolute; z-index: -1; width: 220px; height: 220px; right: -105px; top: -105px; border: 1px solid rgba(0,113,227,.15); border-radius: 50%; box-shadow: 0 0 0 32px rgba(0,113,227,.035),0 0 0 65px rgba(0,113,227,.025); transition: transform 700ms cubic-bezier(.2,.8,.2,1); }
.audience-grid article:hover::before { transform: translate(-28px,26px) scale(1.18) rotate(18deg); }
.audience-grid article:hover { transform: translateY(-5px); box-shadow: 0 28px 70px rgba(0,0,0,.09); }
.audience-grid article > span { margin-bottom: auto; color: var(--blue); font-size: 12px; font-weight: 800; letter-spacing: .12em; }
.audience-grid h3 { margin: 0; font-size: 32px; letter-spacing: -.045em; }
.audience-grid p { margin: 12px 0 0; color: var(--secondary); font-size: 15px; line-height: 1.48; }

.faq-section { padding: 118px 0 30px; }
.faq-list { max-width: 820px; margin-inline: auto; border-top: 1px solid #d2d2d7; }
.faq-list details { border-bottom: 1px solid #d2d2d7; }
.faq-list summary { position: relative; padding: 24px 44px 24px 0; cursor: pointer; list-style: none; font-size: 19px; font-weight: 650; letter-spacing: -.02em; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; position: absolute; right: 5px; top: 20px; color: var(--blue); font-size: 26px; font-weight: 350; transition: transform 220ms ease; }
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list p { max-width: 690px; margin: -5px 0 24px; color: var(--secondary); font-size: 15px; line-height: 1.6; }

.price-card { transition: transform 300ms cubic-bezier(.2,.8,.2,1), box-shadow 300ms ease; }
.price-card:hover { transform: translateY(-5px); box-shadow: 0 28px 80px rgba(0,0,0,.1); }
.price-card.featured:hover { transform: translateY(-15px); }
.price-card { overflow: hidden; }
.price-card::before { content: ""; position: absolute; inset: -45% auto -45% -70%; width: 38%; transform: rotate(18deg); background: linear-gradient(90deg,transparent,rgba(255,255,255,.72),transparent); transition: left 650ms cubic-bezier(.2,.8,.2,1); pointer-events: none; }
.price-card:hover::before { left: 140%; }
.price-card.featured { animation: featured-glow 4.6s ease-in-out infinite alternate; }
@keyframes featured-glow { to { box-shadow: 0 28px 84px rgba(0,113,227,.24); } }
.pricing-note[data-ready="true"] { color: #1b7f38; }

.payment-dialog { width: min(580px,calc(100% - 28px)); }
.payment-dialog .dialog-shell > h2 { max-width: 440px; margin: 13px 0 0; font-size: 34px; line-height: 1.04; letter-spacing: -.045em; }
.payment-summary { margin: 16px 0 0; padding: 15px; display: grid; gap: 5px; border: 1px solid #d8e9fb; border-radius: 14px; background: #f1f7ff; }
.payment-summary strong { color: var(--blue); font-size: 16px; }
.payment-summary span { color: var(--secondary); font-size: 12px; line-height: 1.45; }
.payment-coming-soon { margin-top: 16px; padding: 18px; display: flex; align-items: flex-start; gap: 14px; border: 1px solid rgba(0,113,227,.2); border-radius: 18px; background: linear-gradient(135deg,rgba(0,113,227,.08),rgba(94,92,230,.06)); }
.payment-coming-soon > span { width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; border-radius: 50%; background: var(--blue); color: white; font-weight: 800; box-shadow: 0 8px 22px rgba(0,113,227,.22); }
.payment-coming-soon strong { display: block; font-size: 15px; }.payment-coming-soon p { margin: 6px 0 0; color: var(--secondary); font-size: 13px; line-height: 1.55; }
.auth-form label span small { margin-left: 5px; color: var(--tertiary); font-size: 11px; font-weight: 520; }
.membership-code-box { padding: 14px; display: grid; gap: 10px; border: 1px solid #d8e9fb; border-radius: 14px; background: linear-gradient(125deg,#f5faff,#f6f3ff); }
.membership-code-box > div:first-child { display: grid; gap: 3px; }
.membership-code-box > div:first-child > span { color: var(--text); font-size: 14px; font-weight: 720; }
.membership-code-box > div:first-child > small { color: var(--secondary); font-size: 12px; }
.membership-code-control { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; }
.auth-form .membership-code-control input { min-width: 0; height: 43px; text-transform: uppercase; }
.membership-code-control button { min-width: 112px; padding: 0 14px; border: 0; border-radius: 10px; background: #1d1d1f; color: white; font-size: 13px; font-weight: 700; cursor: pointer; }
.membership-code-control button:disabled { opacity: .55; cursor: wait; }
.membership-code-box p { min-height: 16px; margin: 0; color: var(--secondary); font-size: 12px; line-height: 1.35; }
.membership-code-box p[data-tone="success"] { color: #168039; }
.membership-code-box p[data-tone="error"] { color: #d70015; }
.cancel-plan-button { width: 100%; min-height: 44px; margin-top: 22px; border: 1px solid #e3b9bc; border-radius: 11px; background: #fff7f7; color: #b4232c; font-size: 13px; font-weight: 680; cursor: pointer; }
.cancel-plan-button + .logout-button { margin-top: 10px; }
.payment-name-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.terms-check { grid-template-columns: auto 1fr !important; align-items: start; gap: 10px !important; padding: 5px 1px; }
.auth-form .terms-check input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--blue); }
.auth-form .terms-check span { font-size: 12px; font-weight: 500; line-height: 1.45; }
.auth-form > button:disabled { opacity: .55; cursor: wait; }
.site-toast { position: fixed; z-index: 80; left: 50%; bottom: 24px; width: min(520px,calc(100% - 28px)); padding: 15px 18px; transform: translateX(-50%); border: 1px solid rgba(255,255,255,.22); border-radius: 15px; background: rgba(29,29,31,.92); color: white; box-shadow: 0 22px 60px rgba(0,0,0,.25); backdrop-filter: blur(18px); font-size: 14px; text-align: center; animation: toast-in 300ms cubic-bezier(.2,.8,.2,1); }
.site-toast[data-tone="error"] { background: rgba(150,15,25,.94); }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%,15px) scale(.97); } }

.js [data-reveal] { opacity: 0; translate: 0 34px; scale: .982; filter: blur(8px); transition: opacity 820ms var(--reveal-delay,0ms) cubic-bezier(.16,.78,.24,1),translate 820ms var(--reveal-delay,0ms) cubic-bezier(.16,.78,.24,1),scale 820ms var(--reveal-delay,0ms) cubic-bezier(.16,.78,.24,1),filter 820ms var(--reveal-delay,0ms) ease; }
.js [data-reveal].is-visible { opacity: 1; translate: none; scale: 1; filter: none; }
.js main > section.section-flow { opacity: .08; transform: translateY(30px); filter: blur(5px); transition: opacity 900ms cubic-bezier(.16,.78,.24,1),transform 900ms cubic-bezier(.16,.78,.24,1),filter 900ms ease; }
.js main > section.section-flow.section-visible { opacity: 1; transform: none; filter: none; }
.section-heading { transform: translate3d(0,var(--section-drift,0px),0); will-change: transform; }
.signal-card:nth-child(2),.audience-grid article:nth-child(2),.pricing-grid .price-card:nth-child(2) { transition-delay: 80ms; }
.signal-card:nth-child(3),.audience-grid article:nth-child(3),.pricing-grid .price-card:nth-child(3) { transition-delay: 160ms; }
.signal-card:nth-child(4) { transition-delay: 240ms; }

.audio-meter i { transform-origin: center; animation: meter-flow 1.9s ease-in-out infinite alternate; }
.audio-meter i:nth-child(3n+1) { animation-delay: -.55s; }.audio-meter i:nth-child(3n+2) { animation-delay: -1.2s; }
@keyframes meter-flow { 35% { transform: scaleY(.45); filter: hue-rotate(0deg); } 75% { transform: scaleY(1.08); filter: hue-rotate(20deg); } }
.caption-stack strong { background: linear-gradient(100deg,#0071e3 15%,#64d2ff 45%,#0071e3 75%); background-size: 220% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: caption-shine 4s linear infinite; }
@keyframes caption-shine { to { background-position: 220% center; } }
.privacy-symbol { animation: lock-float 4s ease-in-out infinite alternate; }
@keyframes lock-float { to { translate: 0 -10px; filter: drop-shadow(0 18px 14px rgba(0,113,227,.16)); } }
.offer-orbit { animation: orbit-spin 24s linear infinite; }
.offer-orbit i { animation: orbit-breathe 3s ease-in-out infinite alternate; }
@keyframes orbit-spin { to { transform: rotate(360deg); } }
@keyframes orbit-breathe { to { transform: scale(.68); opacity: .5; } }
.primary-button,.hero-primary,.closing-section > a,.price-card > a { position: relative; overflow: hidden; }
.primary-button::after,.hero-primary::after,.closing-section > a::after { content: ""; position: absolute; inset: 0; transform: translateX(-110%); background: linear-gradient(100deg,transparent,rgba(255,255,255,.3),transparent); transition: transform 650ms cubic-bezier(.2,.8,.2,1); }
.primary-button:hover::after,.hero-primary:hover::after,.closing-section > a:hover::after { transform: translateX(110%); }

.billing-switch { position: relative; width: fit-content; margin: -15px auto 42px; padding: 5px; display: grid; grid-template-columns: 1fr 1fr; border: 1px solid rgba(0,0,0,.08); border-radius: 999px; background: rgba(231,231,236,.78); box-shadow: inset 0 1px 2px rgba(0,0,0,.04),0 14px 38px rgba(0,0,0,.06); backdrop-filter: blur(18px); }
.billing-switch i { position: absolute; z-index: 0; left: 5px; top: 5px; width: calc(50% - 5px); height: calc(100% - 10px); border-radius: 999px; background: white; box-shadow: 0 4px 14px rgba(0,0,0,.12); transition: transform 420ms cubic-bezier(.2,.85,.2,1); }
.billing-switch[data-cycle="annual"] i { transform: translateX(100%); }
.billing-switch button { position: relative; z-index: 1; min-width: 132px; min-height: 42px; padding: 0 17px; border: 0; border-radius: 999px; background: transparent; color: var(--secondary); font-size: 14px; font-weight: 700; cursor: pointer; transition: color 250ms ease,transform 250ms ease; }
.billing-switch button:hover { transform: translateY(-1px); }.billing-switch button[aria-pressed="true"] { color: var(--text); }
.billing-switch button span { margin-left: 5px; padding: 4px 7px; border-radius: 999px; background: #e8f5ec; color: #15803d; font-size: 10px; white-space: nowrap; }
.referral-banner { width: min(720px,100%); margin: -22px auto 34px; padding: 17px 20px; display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 15px; overflow: hidden; border: 1px solid rgba(10,132,255,.16); border-radius: 18px; background: linear-gradient(120deg,rgba(232,244,255,.95),rgba(242,236,255,.9)); box-shadow: 0 14px 40px rgba(25,70,140,.08); }.referral-banner[hidden] { display: none; }.referral-banner > span { grid-row: 1 / 3; padding: 8px 10px; border-radius: 9px; background: #0a84ff; color: white; font-size: 9px; font-weight: 800; letter-spacing: .08em; }.referral-banner strong { font-size: 15px; letter-spacing: -.015em; }.referral-banner p { margin: 3px 0 0; color: #5d6470; font-size: 12px; }
.annual-equivalent { min-height: 21px; margin: -5px 0 1px; color: #16813b; font-size: 12px; font-weight: 720; animation: annual-arrive 380ms cubic-bezier(.2,.85,.2,1); }
@keyframes annual-arrive { from { opacity: 0; transform: translateY(6px); } }

.account-dialog { width: min(900px,calc(100% - 28px)); max-height: min(880px,calc(100vh - 28px)); border-radius: 32px; background: rgba(255,255,255,.98); }
.account-dialog[open] { animation: account-arrive 440ms cubic-bezier(.16,.86,.26,1); }
.account-dialog.payment-dialog { width: min(580px,calc(100% - 28px)); }
.account-dialog .dialog-shell { min-height: 100%; border-radius: inherit; background: linear-gradient(145deg,rgba(255,255,255,.99),rgba(245,248,255,.97)); }
.account-auth { width: min(100%,520px); margin-inline: auto; }
.account-profile { min-height: 590px; }
.profile-identity { padding-right: 42px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; }
.profile-avatar { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 18px; background: linear-gradient(145deg,#087cff,#63d9ff); color: white; box-shadow: 0 13px 30px rgba(10,132,255,.24); font-size: 18px; font-weight: 800; letter-spacing: -.03em; animation: avatar-float 3.8s ease-in-out infinite alternate; }
.profile-identity h2 { margin: 5px 0 0; font-size: 28px; }.profile-identity p { margin: 5px 0 0; color: var(--secondary); font-size: 14px; }
.profile-status { padding: 7px 10px; border-radius: 999px; background: #e9f8ee; color: #16743b; font-size: 11px; font-weight: 750; white-space: nowrap; }.profile-status[data-tone="cancelled"] { background: #fff0f1; color: #b4232c; }
.profile-plan-hero { position: relative; min-height: 172px; margin-top: 25px; padding: 28px; display: flex; align-items: flex-end; justify-content: space-between; gap: 25px; overflow: hidden; border-radius: 25px; background: linear-gradient(135deg,#07111f,#0b3c78 65%,#087fff); color: white; box-shadow: 0 24px 55px rgba(11,67,135,.22); isolation: isolate; }
.profile-plan-hero > div { position: relative; z-index: 2; }.profile-plan-hero > div > span { color: rgba(255,255,255,.55); font-size: 10px; font-weight: 800; letter-spacing: .14em; }.profile-plan-hero strong { margin-top: 8px; display: block; font-size: 34px; letter-spacing: -.05em; }.profile-plan-hero p { max-width: 460px; margin: 8px 0 0; color: rgba(255,255,255,.7); font-size: 14px; line-height: 1.45; }
.profile-cycle { position: relative; z-index: 2; flex: none; padding: 8px 12px; border: 1px solid rgba(255,255,255,.25); border-radius: 999px; background: rgba(255,255,255,.11); color: white; font-size: 12px; font-weight: 700; backdrop-filter: blur(12px); }
.profile-plan-hero > i { position: absolute; z-index: 0; width: 210px; height: 210px; right: -45px; top: -95px; border: 1px solid rgba(255,255,255,.14); border-radius: 50%; box-shadow: 0 0 0 42px rgba(255,255,255,.035),0 0 0 82px rgba(255,255,255,.022); animation: profile-orbit 13s linear infinite; }.profile-plan-hero > i:last-child { width: 11px; height: 11px; right: 118px; top: 25px; border: 0; background: #75ddff; box-shadow: 0 0 22px #75ddff; animation-duration: 7s; }
.profile-stat-grid { margin-top: 17px; display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }.profile-stat-grid article { min-height: 112px; padding: 17px; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,.8); transition: transform 260ms ease,box-shadow 260ms ease; }.profile-stat-grid article:hover { transform: translateY(-3px); box-shadow: 0 15px 36px rgba(0,0,0,.07); }.profile-stat-grid span { color: var(--secondary); font-size: 12px; }.profile-stat-grid strong { margin-top: 8px; font-size: 27px; letter-spacing: -.04em; }.profile-stat-grid small { margin-top: auto; color: var(--tertiary); font-size: 11px; }
.profile-detail-grid { margin-top: 17px; padding: 17px 2px; display: grid; grid-template-columns: 1fr 1fr; gap: 22px; border-block: 1px solid var(--line); }.profile-detail-grid div { display: grid; gap: 5px; }.profile-detail-grid span { color: var(--tertiary); font-size: 11px; font-weight: 650; text-transform: uppercase; letter-spacing: .06em; }.profile-detail-grid strong { font-size: 14px; }
.profile-benefits { margin-top: 16px; }.profile-benefits > span { color: var(--tertiary); font-size: 10px; font-weight: 800; letter-spacing: .1em; }.profile-benefits p { margin: 7px 0 0; color: var(--secondary); font-size: 13px; line-height: 1.5; }
.profile-actions { margin-top: 23px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }.manage-plan-button,.profile-actions .logout-button { min-height: 47px; margin: 0; border: 0; border-radius: 12px; font-size: 14px; font-weight: 720; cursor: pointer; }.manage-plan-button { background: var(--blue); color: white; }.profile-actions .logout-button { background: #e9e9ed; color: var(--text); }.account-profile .cancel-plan-button { margin-top: 10px; }
.manage-plan-button[hidden] + .logout-button { grid-column:1/-1; }
@keyframes account-arrive { from { opacity: 0; transform: translateY(24px) scale(.965); } }
@keyframes avatar-float { to { transform: translateY(-4px) rotate(2deg); box-shadow: 0 20px 36px rgba(10,132,255,.31); } }
@keyframes profile-orbit { to { transform: rotate(360deg); } }

body { background-image: radial-gradient(circle at 8% 18%,rgba(10,132,255,.09),transparent 28%),radial-gradient(circle at 90% 63%,rgba(100,210,255,.08),transparent 28%); }
.cyber-network { opacity: .56; filter: saturate(1.2); }
.site-ambient { opacity: .9; }.site-ambient i { filter: blur(80px) saturate(1.3); }
.feature-card,.studio-card,.preview-card { position: relative; overflow: hidden; }
.feature-card::after,.studio-card::after,.preview-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(420px circle at var(--glow-x,50%) var(--glow-y,50%),rgba(10,132,255,.14),transparent 42%); transition: opacity 280ms ease; }.feature-card:hover::after,.studio-card:hover::after,.preview-card:hover::after { opacity: 1; }
.price-card { background-image: radial-gradient(420px circle at var(--glow-x,50%) var(--glow-y,50%),rgba(10,132,255,.1),transparent 42%); }

/* Fixudio creative suite */
.product-suite,.audio-workspace,.ai-studio-section { padding-block: 118px; scroll-margin-top: 62px; }
.product-suite { padding-top: 132px; }
.product-suite-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.suite-card { position: relative; min-height: 440px; overflow: hidden; padding: 30px; display: flex; flex-direction: column; border: 1px solid rgba(0,0,0,.08); border-radius: 32px; background: rgba(255,255,255,.82); color: var(--text); box-shadow: 0 26px 80px rgba(0,0,0,.075),inset 0 1px 0 rgba(255,255,255,.8); text-decoration: none; backdrop-filter: blur(24px); transition: transform 420ms cubic-bezier(.2,.82,.2,1),box-shadow 420ms ease,border-color 420ms ease; isolation: isolate; }
.suite-card::before { content: ""; position: absolute; z-index: -1; width: 310px; height: 310px; right: -120px; top: -110px; border-radius: 50%; background: var(--suite-color,#0a84ff); filter: blur(78px); opacity: .16; transition: opacity 380ms ease,transform 650ms cubic-bezier(.2,.82,.2,1); }
.suite-card:hover { transform: translateY(-9px); border-color: rgba(10,132,255,.2); box-shadow: 0 36px 100px rgba(0,0,0,.12); }.suite-card:hover::before { opacity: .3; transform: translate(-28px,28px) scale(1.18); }
.suite-video { --suite-color: #0a84ff; }.suite-audio { --suite-color: #30d158; }.suite-ai { --suite-color: #bf5af2; }
.suite-number { position: absolute; right: 25px; top: 25px; color: #a1a1a6; font-size: 11px; font-weight: 750; letter-spacing: .1em; }
.suite-card > small { margin-top: auto; color: var(--suite-color); font-size: 10px; font-weight: 820; letter-spacing: .12em; }.suite-card h3 { max-width: 290px; margin: 11px 0 0; font-size: 31px; line-height: 1.04; letter-spacing: -.045em; }.suite-card p { max-width: 310px; min-height: 68px; margin: 15px 0 0; color: var(--secondary); font-size: 15px; line-height: 1.5; }.suite-card > b { margin-top: 24px; display: flex; align-items: center; justify-content: space-between; color: var(--text); font-size: 13px; }.suite-card > b span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--text); color: white; transition: transform 260ms ease; }.suite-card:hover > b span { transform: rotate(45deg); }
.suite-icon { position: relative; width: 125px; height: 125px; margin: 16px 0 45px; display: grid; place-items: center; border-radius: 34px; background: linear-gradient(145deg,#0d1017,#252a34); box-shadow: 0 22px 55px rgba(0,0,0,.2); transform: rotate(-3deg); transition: transform 520ms cubic-bezier(.2,.82,.2,1); }.suite-card:hover .suite-icon { transform: rotate(0) scale(1.04); }
.suite-video .suite-icon i { position: absolute; width: 44px; height: 5px; border-radius: 99px; background: white; box-shadow: 0 0 20px #0a84ff; }.suite-video .suite-icon i:first-child { transform: translateY(-16px) scaleX(.62); }.suite-video .suite-icon i:last-child { transform: translateY(16px) scaleX(.78); }
.audio-glyph { display: flex; align-items: center; justify-content: center; gap: 6px; }.audio-glyph i { position: static; width: 5px; height: 42px; border-radius: 99px; background: linear-gradient(#30d158,#9cffb4); box-shadow: 0 0 18px rgba(48,209,88,.5); animation: suite-wave 1.5s ease-in-out infinite alternate; }.audio-glyph i:nth-child(2),.audio-glyph i:nth-child(4) { height: 66px; animation-delay: -.8s; }.audio-glyph i:nth-child(3) { height: 84px; animation-delay: -.4s; }
.studio-glyph i { position: absolute; width: 47px; height: 47px; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; }.studio-glyph i:nth-child(2) { width: 74px; height: 74px; border-color: rgba(191,90,242,.68); }.studio-glyph i:last-child { width: 12px; height: 12px; border: 0; background: white; box-shadow: 0 0 22px #bf5af2; animation: studio-spark 2.4s ease-in-out infinite alternate; }
@keyframes suite-wave { to { transform: scaleY(.38); opacity: .58; } }@keyframes studio-spark { to { transform: translate(25px,-25px) scale(.6); opacity: .45; } }

.audio-workspace { position: relative; width: 100%; max-width: none; padding-inline: max(24px,calc((100vw - 1180px)/2)); overflow: hidden; background: #07090f; color: white; }
.audio-workspace::before { content: ""; position: absolute; width: 720px; height: 720px; right: -240px; top: 8%; border-radius: 50%; background: radial-gradient(circle,rgba(48,209,88,.2),rgba(10,132,255,.1) 42%,transparent 67%); filter: blur(30px); pointer-events: none; }
.audio-heading h2,.studio-ai-heading h2 { color: inherit; }.audio-heading p,.studio-ai-heading p { color: rgba(255,255,255,.62); }.audio-heading .eyebrow { color: #65e684; }
.tool-workspace { position: relative; display: grid; grid-template-columns: minmax(0,1.08fr) minmax(360px,.92fr); gap: 16px; }
.tool-card,.audio-showcase { min-width: 0; min-height: 610px; padding: 30px; border: 1px solid rgba(255,255,255,.11); border-radius: 30px; background: rgba(18,22,32,.76); box-shadow: inset 0 1px 0 rgba(255,255,255,.055),0 28px 80px rgba(0,0,0,.25); backdrop-filter: blur(24px); }
.tool-card-heading,.ai-form-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }.tool-card-heading span,.ai-form-heading span { color: #65e684; font-size: 10px; font-weight: 820; letter-spacing: .13em; }.tool-card-heading h3,.ai-form-heading h3 { margin: 8px 0 0; font-size: 28px; letter-spacing: -.04em; }.tool-card-heading p { margin: 9px 0 0; color: rgba(255,255,255,.55); font-size: 13px; }.tool-card-heading > b,.ai-form-heading > b { padding: 7px 10px; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; color: rgba(255,255,255,.78); font-size: 11px; white-space: nowrap; }
.media-dropzone { min-height: 142px; margin-top: 25px; padding: 22px; display: grid; place-items: center; align-content: center; gap: 6px; border: 1px dashed rgba(255,255,255,.23); border-radius: 20px; background: rgba(255,255,255,.035); text-align: center; transition: border-color 220ms ease,background 220ms ease,transform 220ms ease; }.media-dropzone:hover,.media-dropzone.has-file { border-color: rgba(101,230,132,.65); background: rgba(48,209,88,.06); transform: translateY(-2px); }.media-dropzone input { position: absolute; width: 1px; height: 1px; opacity: 0; }.media-dropzone strong { font-size: 15px; }.media-dropzone small { color: rgba(255,255,255,.48); font-size: 12px; }.media-upload-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: rgba(48,209,88,.11); color: #65e684; font-size: 23px; }
.tool-settings-grid { margin-top: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }.tool-settings-grid label { min-width: 0; padding: 13px; display: grid; gap: 8px; border: 1px solid rgba(255,255,255,.075); border-radius: 15px; background: rgba(255,255,255,.025); }.tool-settings-grid label > span { color: rgba(255,255,255,.57); font-size: 11px; font-weight: 660; }.tool-settings-grid select { width: 100%; min-width: 0; height: 35px; padding: 0 8px; border: 1px solid rgba(255,255,255,.09); border-radius: 9px; background: rgba(255,255,255,.06); color: white; color-scheme: dark; outline: none; }.tool-setting-wide { grid-column: 1 / -1; }.tool-range { display: flex; align-items: center; gap: 11px; }.tool-range input { min-width: 0; flex: 1; accent-color: #30d158; }.tool-range output { min-width: 40px; color: white; font-size: 12px; text-align: right; }
.tool-submit { width: 100%; min-height: 51px; margin-top: 18px; border: 0; border-radius: 14px; background: linear-gradient(100deg,#1faf49,#30d158); color: #041208; font-size: 14px; font-weight: 780; box-shadow: 0 15px 40px rgba(48,209,88,.18); }.tool-submit span { margin-left: 8px; }.tool-submit:disabled { opacity: .48; }.tool-privacy { margin: 11px 0 0; color: rgba(255,255,255,.4); font-size: 11px; text-align: center; }
.audio-showcase { position: relative; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; background: radial-gradient(circle at 50% 25%,rgba(48,209,88,.12),transparent 36%),linear-gradient(145deg,#101621,#090b10); }
.sound-orbit { position: absolute; width: 360px; height: 360px; left: 50%; top: 44%; transform: translate(-50%,-50%); border: 1px solid rgba(101,230,132,.18); border-radius: 50%; animation: sound-spin 22s linear infinite; }.sound-orbit::before,.sound-orbit::after { content: ""; position: absolute; border: 1px solid rgba(10,132,255,.16); border-radius: 50%; }.sound-orbit::before { inset: 15%; }.sound-orbit::after { inset: 31%; }.sound-orbit i { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: #65e684; box-shadow: 0 0 22px #30d158; }.sound-orbit i:nth-child(1) { left: 9%; top: 28%; }.sound-orbit i:nth-child(2) { right: 18%; top: 11%; }.sound-orbit i:nth-child(3) { right: 8%; bottom: 28%; }.sound-orbit span { position: absolute; inset: 41%; border-radius: 50%; background: white; box-shadow: 0 0 30px #30d158,0 0 80px rgba(10,132,255,.6); animation: sound-core 2.2s ease-in-out infinite alternate; }
.before-after { position: relative; z-index: 2; padding: 15px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 13px; border: 1px solid rgba(255,255,255,.09); border-radius: 17px; background: rgba(6,9,14,.74); backdrop-filter: blur(16px); }.before-after > span { display: grid; gap: 5px; }.before-after > span:last-child { text-align: right; }.before-after small { color: rgba(255,255,255,.38); font-size: 9px; letter-spacing: .12em; }.before-after b { font-size: 11px; }.before-after > i { width: 1px; height: 28px; background: rgba(255,255,255,.12); }.audio-benefits { position: relative; z-index: 2; margin-top: 13px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }.audio-benefits span { padding: 11px; border: 1px solid rgba(255,255,255,.07); border-radius: 12px; background: rgba(255,255,255,.035); color: rgba(255,255,255,.65); font-size: 10px; }.audio-benefits span::before { content: "✓"; margin-right: 6px; color: #65e684; }
@keyframes sound-spin { to { transform: translate(-50%,-50%) rotate(360deg); } }@keyframes sound-core { to { transform: scale(.58); opacity: .55; } }
.tool-progress { position: relative; z-index: 2; margin-top: 16px; padding: 22px; border: 1px solid rgba(255,255,255,.1); border-radius: 20px; background: rgba(17,21,31,.82); }.tool-progress > div:first-child,.ai-result-top { display: flex; align-items: center; gap: 9px; }.tool-progress > div:first-child > b,.ai-result-top > b { margin-left: auto; }.tool-progress .progress-track,.ai-result-progress .progress-track { margin-top: 14px; }.tool-progress p,.ai-result-progress p { margin: 12px 0 0; color: rgba(255,255,255,.53); font-size: 12px; }.tool-progress .download-button { width: fit-content; margin-top: 15px; display: inline-flex; }

.ai-studio-section { position: relative; width: 100%; max-width: none; padding-inline: max(24px,calc((100vw - 1180px)/2)); overflow: hidden; background: linear-gradient(180deg,#0b0710,#11091b 70%,#0d0814); color: white; }
.ai-studio-section::before { content: ""; position: absolute; width: 850px; height: 850px; left: -330px; top: 0; border-radius: 50%; background: radial-gradient(circle,rgba(191,90,242,.18),rgba(10,132,255,.08) 45%,transparent 68%); filter: blur(32px); }.studio-ai-heading .eyebrow { color: #d69bff; }
.studio-mode-switch { position: relative; width: min(500px,100%); margin: -26px 0 22px; padding: 5px; display: grid; grid-template-columns: 1fr 1fr; border: 1px solid rgba(255,255,255,.1); border-radius: 999px; background: rgba(255,255,255,.05); }.studio-mode-switch i { position: absolute; left: 5px; top: 5px; width: calc(50% - 5px); height: calc(100% - 10px); border-radius: 999px; background: rgba(255,255,255,.13); box-shadow: inset 0 1px 0 rgba(255,255,255,.1); transition: transform 350ms cubic-bezier(.2,.82,.2,1); }.studio-mode-switch[data-mode="transcribe"] i { transform: translateX(100%); }.studio-mode-switch button { position: relative; z-index: 1; min-height: 41px; border: 0; background: transparent; color: rgba(255,255,255,.52); font-weight: 700; }.studio-mode-switch button[aria-selected="true"] { color: white; }
.studio-ai-shell { position: relative; min-height: 610px; display: grid; grid-template-columns: minmax(0,1.08fr) minmax(350px,.92fr); overflow: hidden; border: 1px solid rgba(255,255,255,.11); border-radius: 32px; background: rgba(18,13,27,.76); box-shadow: inset 0 1px 0 rgba(255,255,255,.055),0 34px 100px rgba(0,0,0,.3); backdrop-filter: blur(25px); }.ai-tool-form { min-width: 0; padding: 32px; border-right: 1px solid rgba(255,255,255,.09); }.ai-form-heading span { color: #d69bff; }.ai-text-field { position: relative; margin-top: 25px; display: grid; gap: 8px; }.ai-text-field > span { color: rgba(255,255,255,.58); font-size: 11px; font-weight: 680; }.ai-text-field textarea,.ai-result-progress textarea { width: 100%; resize: vertical; padding: 15px; border: 1px solid rgba(255,255,255,.1); border-radius: 17px; background: rgba(255,255,255,.045); color: white; outline: none; font: inherit; line-height: 1.55; }.ai-text-field textarea:focus { border-color: rgba(191,90,242,.65); box-shadow: 0 0 0 4px rgba(191,90,242,.1); }.ai-text-field > small { position: absolute; right: 12px; bottom: 10px; padding: 3px 6px; border-radius: 7px; background: rgba(9,6,14,.7); color: rgba(255,255,255,.38); font-size: 10px; }.studio-settings label { background: rgba(255,255,255,.025); }.studio-settings .tool-range input { accent-color: #bf5af2; }.studio-submit { background: linear-gradient(100deg,#8f35d0,#bf5af2); color: white; box-shadow: 0 15px 42px rgba(191,90,242,.19); }.studio-dropzone { min-height: 220px; }.studio-dropzone:hover,.studio-dropzone.has-file { border-color: rgba(214,155,255,.6); background: rgba(191,90,242,.06); }.studio-dropzone .media-upload-icon { background: rgba(191,90,242,.12); color: #d69bff; font-size: 14px; font-weight: 800; }
.ai-result-panel { position: relative; min-width: 0; padding: 30px; display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle at 50% 30%,rgba(191,90,242,.13),transparent 36%); }.ai-result-panel::before { content: ""; position: absolute; width: 340px; height: 340px; border: 1px solid rgba(214,155,255,.13); border-radius: 50%; box-shadow: 0 0 0 55px rgba(191,90,242,.025),0 0 0 110px rgba(10,132,255,.018); animation: result-orbit 18s linear infinite; }.ai-result-idle { position: relative; z-index: 1; max-width: 300px; text-align: center; }.spark-symbol { width: 60px; height: 60px; margin: 0 auto 18px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.13); border-radius: 19px; background: rgba(255,255,255,.055); color: #d69bff; box-shadow: 0 15px 50px rgba(191,90,242,.18); font-size: 25px; animation: spark-float 2.7s ease-in-out infinite alternate; }.ai-result-idle h3 { margin: 0; font-size: 25px; letter-spacing: -.04em; }.ai-result-idle p { margin: 11px 0 0; color: rgba(255,255,255,.5); font-size: 13px; line-height: 1.55; }.ai-result-progress { position: relative; z-index: 2; width: 100%; }.ai-result-progress textarea { min-height: 230px; margin-top: 16px; resize: vertical; background: rgba(5,3,9,.64); }.ai-result-progress .download-button { width: 100%; margin-top: 15px; display: flex; }
@keyframes result-orbit { to { transform: rotate(360deg); } }@keyframes spark-float { to { transform: translateY(-7px) rotate(5deg); } }

/* Light, product-wide workspace language */
.audio-workspace,.ai-studio-section { color: var(--text); background: linear-gradient(180deg,rgba(255,255,255,.84),rgba(246,247,249,.94)); border-block: 1px solid rgba(0,0,0,.055); }
.audio-workspace::before { right: -290px; top: -100px; opacity: .72; background: radial-gradient(circle,rgba(48,209,88,.2),rgba(10,132,255,.08) 43%,transparent 68%); }
.ai-studio-section::before { left: -360px; top: -120px; opacity: .72; background: radial-gradient(circle,rgba(191,90,242,.17),rgba(10,132,255,.07) 45%,transparent 68%); }
.audio-heading p,.studio-ai-heading p { color: var(--secondary); }
.audio-heading .eyebrow { color: #18883c; }.studio-ai-heading .eyebrow { color: #8b32bd; }
.tool-card { color: var(--text); border-color: rgba(0,0,0,.075); background: rgba(255,255,255,.91); box-shadow: inset 0 1px 0 white,0 26px 80px rgba(20,28,45,.085); }
.tool-card-heading span,.ai-form-heading span { font-size: 12px; }.tool-card-heading p { color: var(--secondary); font-size: 14px; line-height: 1.5; }
.tool-card-heading > b,.ai-form-heading > b { border-color: rgba(0,0,0,.09); color: #55555a; background: #f4f4f6; font-size: 12px; }
.media-dropzone { border-color: rgba(0,0,0,.17); background: #f7f7f9; }.media-dropzone:hover,.media-dropzone.has-file { border-color: rgba(24,136,60,.55); background: rgba(48,209,88,.065); }.media-dropzone strong { font-size: 16px; }.media-dropzone small { color: #737378; font-size: 13px; line-height: 1.4; }
.tool-settings-grid label,.studio-settings label { border-color: rgba(0,0,0,.07); background: #f7f7f9; }.tool-settings-grid label > span { color: #636368; font-size: 14px; }.tool-settings-grid select { height: 40px; border-color: rgba(0,0,0,.08); background: white; color: var(--text); color-scheme: light; font-size: 14px; }.tool-range output { color: var(--text); font-size: 13px; }.tool-submit { min-height: 54px; font-size: 15px; cursor: pointer; transition: transform 220ms ease,filter 220ms ease,box-shadow 220ms ease; }.tool-submit:hover:not(:disabled) { transform: translateY(-2px); filter: saturate(1.08); box-shadow: 0 19px 45px rgba(48,209,88,.24); }.studio-submit:hover:not(:disabled) { box-shadow: 0 19px 45px rgba(191,90,242,.25); }.tool-privacy { color: #77777c; font-size: 13px; }
.tool-progress { border-color: rgba(0,0,0,.075); background: rgba(255,255,255,.93); box-shadow: 0 20px 55px rgba(20,28,45,.07); }.tool-progress p { color: var(--secondary); font-size: 13px; }
.audio-showcase { color: white; border-color: rgba(255,255,255,.1); }
.before-after small { font-size: 11px; }.before-after b { font-size: 13px; }.audio-benefits span { font-size: 12px; line-height: 1.35; }
.studio-mode-switch { border-color: rgba(0,0,0,.075); background: rgba(255,255,255,.72); box-shadow: 0 12px 34px rgba(20,28,45,.065); }.studio-mode-switch i { background: white; box-shadow: 0 3px 14px rgba(0,0,0,.09); }.studio-mode-switch button { color: #77777c; font-size: 14px; cursor: pointer; }.studio-mode-switch button[aria-selected="true"] { color: var(--text); }
.studio-ai-shell { border-color: rgba(0,0,0,.075); background: rgba(255,255,255,.9); box-shadow: inset 0 1px 0 white,0 30px 90px rgba(20,28,45,.1); }.ai-tool-form { color: var(--text); border-right-color: rgba(0,0,0,.075); }.ai-form-heading span { color: #8b32bd; }.ai-text-field > span { color: #636368; font-size: 14px; }.ai-text-field textarea { border-color: rgba(0,0,0,.08); background: #f7f7f9; color: var(--text); font-size: 15px; }.ai-text-field > small { background: rgba(255,255,255,.88); color: #77777c; font-size: 12px; }.studio-dropzone:hover,.studio-dropzone.has-file { border-color: rgba(139,50,189,.5); background: rgba(191,90,242,.055); }
.voice-choice { margin: 17px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; border: 0; }.voice-choice legend { margin-bottom: 9px; color: #636368; font-size: 14px; font-weight: 680; }.voice-choice label { position: relative; min-height: 64px; padding: 12px 14px; display: flex; align-items: center; border: 1px solid rgba(0,0,0,.075); border-radius: 15px; background: #f7f7f9; cursor: pointer; transition: border-color 200ms ease,background 200ms ease,box-shadow 200ms ease; }.voice-choice input { position: absolute; opacity: 0; pointer-events: none; }.voice-choice span { display: grid; gap: 4px; }.voice-choice b { font-size: 14px; }.voice-choice small { color: #77777c; font-size: 12px; }.voice-choice label:has(input:checked) { border-color: rgba(139,50,189,.46); background: rgba(191,90,242,.07); box-shadow: 0 0 0 3px rgba(191,90,242,.08); }.voice-choice label:has(input:checked)::after { content: "✓"; margin-left: auto; width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; background: #9b3fd1; color: white; font-size: 12px; font-weight: 800; }
.ai-result-panel { color: white; background: radial-gradient(circle at 50% 30%,rgba(191,90,242,.17),transparent 37%),linear-gradient(145deg,#17101f,#0d0b13); }.ai-result-idle p { font-size: 14px; }.ai-result-progress p { font-size: 13px; }

/* Fixudio select menus */
.fx-select { position: relative; width: 100%; min-width: 0; }.fx-native-select { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; opacity: 0 !important; pointer-events: none !important; }.fx-select-trigger { width: 100%; min-height: 40px; padding: 0 38px 0 12px; display: flex; align-items: center; border: 1px solid rgba(0,0,0,.08); border-radius: 11px; background: rgba(255,255,255,.9); color: var(--text); font-size: 14px; font-weight: 620; text-align: left; box-shadow: inset 0 1px 0 white; cursor: pointer; transition: border-color 180ms ease,box-shadow 180ms ease,background 180ms ease; }.fx-select-trigger::after { content: ""; position: absolute; right: 14px; width: 7px; height: 7px; border-right: 1.5px solid #74747a; border-bottom: 1.5px solid #74747a; transform: translateY(-2px) rotate(45deg); transition: transform 200ms ease; }.fx-select.is-open .fx-select-trigger { border-color: rgba(10,132,255,.48); box-shadow: 0 0 0 4px rgba(10,132,255,.1); }.fx-select.is-open .fx-select-trigger::after { transform: translateY(2px) rotate(225deg); }.fx-select-trigger:focus-visible { outline: 3px solid rgba(10,132,255,.22); outline-offset: 2px; }.fx-select-menu { position: absolute; z-index: 80; left: 0; right: 0; top: calc(100% + 7px); max-height: 260px; padding: 6px; overflow: auto; border: 1px solid rgba(0,0,0,.09); border-radius: 14px; background: rgba(255,255,255,.97); box-shadow: 0 22px 55px rgba(18,24,38,.18); backdrop-filter: blur(24px); opacity: 0; visibility: hidden; transform: translateY(-7px) scale(.985); transform-origin: top; transition: opacity 160ms ease,visibility 160ms ease,transform 200ms cubic-bezier(.2,.82,.2,1); }.fx-select.is-open .fx-select-menu { opacity: 1; visibility: visible; transform: none; }.fx-select-option { width: 100%; min-height: 39px; padding: 8px 32px 8px 10px; display: flex; align-items: center; border: 0; border-radius: 9px; background: transparent; color: #343438; font-size: 14px; font-weight: 560; text-align: left; cursor: pointer; }.fx-select-option:hover,.fx-select-option.is-focused { background: #f0f5fc; }.fx-select-option[aria-selected="true"] { position: relative; background: #edf5ff; color: #0065c4; font-weight: 720; }.fx-select-option[aria-selected="true"]::after { content: "✓"; position: absolute; right: 11px; color: #0a84ff; font-weight: 800; }.fx-select-option:disabled { color: #aaaab0; background: transparent; cursor: not-allowed; }.setting .fx-select-trigger { min-height: 34px; padding-left: 0; border-color: transparent; background: transparent; box-shadow: none; font-size: 15px; }.setting .fx-select.is-open .fx-select-trigger { border-color: rgba(10,132,255,.35); padding-left: 10px; background: white; }.setting .fx-select-menu { min-width: 220px; }.tool-settings-grid .fx-select-trigger { min-height: 40px; }.fx-select-menu::-webkit-scrollbar { width: 8px; }.fx-select-menu::-webkit-scrollbar-thumb { border: 2px solid white; border-radius: 99px; background: #c7c7cc; }

/* Contact */
.contact-section { padding-block: 118px; scroll-margin-top: 62px; }.contact-shell { position: relative; overflow: hidden; padding: 54px; display: grid; grid-template-columns: minmax(0,.88fr) minmax(420px,1.12fr); gap: 55px; border: 1px solid rgba(0,0,0,.075); border-radius: 34px; background: linear-gradient(145deg,rgba(255,255,255,.96),rgba(245,247,251,.9)); box-shadow: 0 30px 90px rgba(20,28,45,.085); }.contact-shell::before { content: ""; position: absolute; width: 420px; height: 420px; left: -180px; bottom: -260px; border-radius: 50%; background: radial-gradient(circle,rgba(10,132,255,.2),transparent 68%); filter: blur(20px); pointer-events: none; }.contact-copy,.contact-form { position: relative; z-index: 1; }.contact-copy h2 { margin: 15px 0 0; font-size: clamp(42px,5vw,68px); line-height: .98; letter-spacing: -.058em; }.contact-copy > p { max-width: 490px; margin: 22px 0 0; color: var(--secondary); font-size: 16px; line-height: 1.55; }.contact-promise { margin-top: 31px; display: grid; gap: 12px; }.contact-promise span { display: flex; align-items: center; gap: 12px; color: #55555a; font-size: 14px; font-weight: 650; }.contact-promise b { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: #eaf3ff; color: var(--blue); font-size: 11px; }.contact-form { padding: 27px; border: 1px solid rgba(0,0,0,.065); border-radius: 24px; background: rgba(255,255,255,.86); box-shadow: inset 0 1px 0 white,0 18px 50px rgba(20,28,45,.06); }.contact-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }.contact-form label { display: grid; gap: 8px; }.contact-form > label { margin-top: 13px; }.contact-form label > span { color: #626267; font-size: 14px; font-weight: 650; }.contact-form input,.contact-form textarea { width: 100%; min-width: 0; padding: 12px 13px; border: 1px solid rgba(0,0,0,.09); border-radius: 12px; background: #f7f7f9; color: var(--text); font: inherit; font-size: 15px; outline: none; transition: border-color 180ms ease,box-shadow 180ms ease,background 180ms ease; }.contact-form input { min-height: 47px; }.contact-form textarea { resize: vertical; line-height: 1.5; }.contact-form input:focus,.contact-form textarea:focus { border-color: rgba(10,132,255,.48); background: white; box-shadow: 0 0 0 4px rgba(10,132,255,.1); }.contact-form button { width: 100%; min-height: 50px; margin-top: 15px; border: 0; border-radius: 13px; background: linear-gradient(100deg,#0878e4,#0a84ff); color: white; font-size: 15px; font-weight: 750; box-shadow: 0 15px 35px rgba(10,132,255,.19); cursor: pointer; }.contact-form button:disabled { opacity: .55; }.contact-form button span { margin-left: 7px; }.contact-form > p { min-height: 19px; margin: 10px 0 0; color: #18883c; font-size: 13px; text-align: center; }.contact-form > p.error { color: #c93442; }

@media (max-width: 960px) {
  .nav-shell { grid-template-columns: 1fr auto; }.menu-toggle { position: relative; display: grid; }.nav-links { position: absolute; left: 24px; right: 24px; top: calc(100% + 10px); padding: 9px; display: flex; flex-direction: column; align-items: stretch; gap: 3px; border-radius: 22px; background: rgba(250,250,252,.96); box-shadow: 0 24px 65px rgba(0,0,0,.16); backdrop-filter: blur(26px); opacity: 0; visibility: hidden; transform: translateY(-10px) scale(.98); transform-origin: top; transition: opacity 230ms ease,visibility 230ms ease,transform 300ms cubic-bezier(.2,.8,.2,1); }.nav-links.is-open { opacity: 1; visibility: visible; transform: none; }.nav-links a { min-height: 45px; padding-inline: 16px; border-radius: 14px; }.nav-links a.is-active { box-shadow: none; }
  .hero { min-height: auto; grid-template-columns: 1fr; padding-top: 72px; text-align: center; }.hero-copy { display: flex; flex-direction: column; align-items: center; }.hero-quick-start { width: min(100%,680px); text-align: left; }.hero-visual { justify-self: center; }
  .product-proof .page-shell { padding-block: 24px; flex-direction: column; gap: 14px; }.product-proof div div { flex-wrap: wrap; justify-content: center; }
  .studio-layout { grid-template-columns: 1fr; }.preview-column { grid-template-columns: 1fr 1fr; }.preview-card,.side-promo { grid-column: auto; }
  .audio-feature { grid-template-columns: 1fr; }.audio-meter { min-height: 190px; }.feature-card { min-height: 430px; }
  .pricing-grid { grid-template-columns: 1fr; max-width: 620px; margin-inline: auto; }.price-card { min-height: auto; }.price-card.featured { transform: none; }.price-card > p { min-height: 0; }
  .signal-section { grid-template-columns: repeat(2,minmax(0,1fr)); }.audience-grid { grid-template-columns: 1fr; }.audience-grid article { min-height: 220px; }
  .price-card.featured:hover { transform: translateY(-5px); }
}

@media (max-width: 960px) {
  .product-suite-grid { grid-template-columns: 1fr; }.suite-card { min-height: 350px; }.suite-icon { margin-bottom: 32px; }.suite-card p { min-height: 0; }
  .tool-workspace,.studio-ai-shell { grid-template-columns: 1fr; }.tool-card,.audio-showcase { min-height: 570px; }.audio-showcase { min-height: 520px; }.ai-tool-form { border-right: 0; border-bottom: 1px solid rgba(0,0,0,.075); }.ai-result-panel { min-height: 470px; }
  .contact-shell { padding: 38px; grid-template-columns: 1fr; gap: 34px; }.contact-copy h2 { max-width: 650px; }
}

@media (max-width: 650px) {
  .page-shell,.nav-shell { width: min(100% - 28px,1180px); }.campaign-strip { gap: 7px; font-size: 11px; }.campaign-strip p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.campaign-strip a { flex: none; }.topbar { height: 58px; }.topbar.is-scrolled { height: 54px; }.nav-cta { max-width: 112px; min-height: 32px; padding-inline: 11px; overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }.nav-actions { gap: 6px; }.language-switch { height: 32px; }.language-switch button { width: 29px; }.menu-toggle { width: 34px; height: 32px; }.nav-links { left: 14px; right: 14px; }
  .hero { padding-block: 50px 58px; gap: 42px; overflow: hidden; }.hero h1 { width: 100%; font-size: 47px; text-wrap: balance; }.hero h1 br { display: none; }.hero-line { display: block; max-width: 100%; overflow-wrap: anywhere; }.hero-line-color { background:none; color:#1687ff; -webkit-text-fill-color:#1687ff; }.hero-copy > p { font-size: 16px; }.hero-actions { width: 100%; flex-direction: column; }.hero-actions a { width: 100%; }.hero-assurance { justify-content: center; }.hero-quick-start { grid-template-columns: 1fr; }.hero-quick-start a { min-height: 62px; }.hero-visual { min-height: 510px; padding: 20px; border-radius: 30px; }.hero-result { margin-bottom: 18px; }
  .product-proof div div i { display: none; }.product-proof div div { gap: 9px 15px; font-size: 12px; }
  .studio-section,.features-section,.pricing-section,.audience-section,.faq-section,.contact-section { padding-block: 82px; }.section-heading { margin-bottom: 35px; }.section-heading h2,.section-heading.compact h2 { font-size: 40px; }.section-heading p { font-size: 16px; }
  .studio-card { padding: 20px; border-radius: 23px; }.settings-grid { grid-template-columns: 1fr; }.setting-wide { grid-column: auto; }.preview-column { grid-template-columns: 1fr; }.preview-card,.what-happens,.side-promo { border-radius: 22px; }
  .position-toolbar { align-items: flex-start; }.orientation-switch button { min-width: 55px; }.position-stage { min-height: 170px; }.position-caption { align-items: flex-start; }
  .feature-grid { grid-template-columns: 1fr; }.audio-feature { grid-column: auto; min-height: 500px; }.feature-card { min-height: 420px; padding: 28px; border-radius: 26px; }.audio-meter { gap: 6px; transform: scale(.8); }.caption-stack { left: 28px; right: 28px; bottom: 30px; }.privacy-symbol { top: 23%; }
  .offer-section { padding-bottom: 82px; }.offer-card { min-height: 470px; padding: 34px; border-radius: 28px; }.offer-card h2 { font-size: 54px; }.offer-orbit { right: -280px; top: 10px; opacity: .58; }
  .signal-section { padding-block: 24px 70px; gap: 10px; }.signal-card { min-height: 105px; padding: 19px; border-radius: 20px; }.signal-card span { font-size: 12px; }.audience-grid article { padding: 25px; border-radius: 23px; }.price-card { padding: 27px; border-radius: 23px; }.closing-section { padding-block: 100px 110px; }.closing-section h2 { font-size: 64px; }.site-footer .page-shell { padding-block: 28px; grid-template-columns: 1fr; justify-items: center; gap: 16px; text-align: center; }.footer-brand,.site-footer .page-shell > span,.footer-legal { justify-self: center; }.footer-legal { flex-wrap: wrap; justify-content: center; }.dialog-shell { padding: 34px 22px 25px; }.account-auth h2,.account-profile h2,.payment-dialog .dialog-shell > h2 { font-size: 29px; }.payment-name-row { grid-template-columns: 1fr; }
  .billing-switch { width: 100%; margin-bottom: 30px; }.billing-switch button { min-width: 0; padding-inline: 8px; }.billing-switch button span { display: block; width: fit-content; margin: 2px auto 0; padding: 2px 6px; }.membership-code-control,.auth-name-row { grid-template-columns: 1fr; }.membership-code-control button { min-height: 42px; }.profile-identity { grid-template-columns: auto 1fr; padding-right: 28px; }.profile-status { grid-column: 1 / -1; justify-self: start; }.profile-plan-hero { min-height: 205px; padding: 23px; align-items: flex-start; flex-direction: column; }.profile-plan-hero strong { font-size: 30px; }.profile-stat-grid { grid-template-columns: 1fr 1fr; }.profile-stat-grid article:last-child { grid-column: 1 / -1; }.profile-detail-grid,.profile-actions { grid-template-columns: 1fr; }.account-profile { min-height: 0; }
}

@media (max-width: 650px) {
  .product-suite,.audio-workspace,.ai-studio-section { padding-block: 82px; }.product-suite { padding-top: 94px; }.suite-card { min-height: 385px; padding: 25px; border-radius: 26px; }.suite-card h3 { font-size: 28px; }.suite-icon { width: 105px; height: 105px; border-radius: 29px; }
  .audio-workspace,.ai-studio-section { padding-inline: 14px; }.tool-card,.audio-showcase { min-height: 0; padding: 21px; border-radius: 24px; }.tool-card-heading,.ai-form-heading { align-items: stretch; flex-direction: column; }.tool-card-heading > b,.ai-form-heading > b { width: fit-content; }.tool-settings-grid { grid-template-columns: 1fr; }.tool-setting-wide { grid-column: auto; }.media-dropzone { min-height: 150px; }.audio-showcase { min-height: 450px; }.sound-orbit { width: 300px; height: 300px; }.audio-benefits { grid-template-columns: 1fr; }
  .studio-mode-switch { margin-top: -10px; }.studio-ai-shell { border-radius: 25px; }.ai-tool-form,.ai-result-panel { padding: 22px; }.ai-result-panel { min-height: 390px; }.ai-form-heading h3 { font-size: 25px; }.studio-dropzone { min-height: 190px; }.tool-progress { padding: 18px; }
  .contact-shell { padding: 25px 20px; border-radius: 25px; }.contact-copy h2 { font-size: 42px; }.contact-fields { grid-template-columns: 1fr; }.contact-form { padding: 21px 17px; border-radius: 20px; }
}

@media (max-width: 430px) {
  .nav-shell { gap: 10px; }.brand { gap: 7px; }.brand-copy small { display: none; }.nav-cta { width: 34px; padding: 0; justify-content: center; border-radius: 50%; color: transparent; font-size: 0; }.nav-cta::before { content: ""; width: 9px; height: 9px; border: 1.5px solid white; border-radius: 50%; box-shadow: 0 8px 0 -1px white; }.language-switch button { width: 27px; }.hero h1 { font-size: clamp(35px,10.2vw,40px); }.hero-copy > p { font-size: 15px; }.hero-assurance { gap: 7px 12px; font-size: 11px; }.hero-quick-start small { font-size: 10px; }.hero-visual { min-height: 475px; padding: 17px; }.hero-device-badge { padding-inline: 7px; }.hero-result p { font-size: 22px; }.hero-journey { padding: 11px 7px; }.hero-journey b { font-size: 8px; }
}

/* Phone ergonomics: no horizontal drift, iOS form zoom or cramped dialogs. */
@media (max-width: 650px) {
  button,a,input,select,textarea,summary { touch-action:manipulation; }
  .auth-form input,.contact-form input,.contact-form textarea,.profile-security-form input { font-size:16px; }
  .account-dialog { width:calc(100% - 16px); max-height:calc(100dvh - 16px); border-radius:22px; }
  .account-dialog .dialog-shell { padding:25px 18px calc(22px + env(safe-area-inset-bottom)); }
  .account-dialog .dialog-close { width:40px; height:40px; margin:-9px -5px 0 0; }
  .auth-tabs button,.auth-form > button,.tool-submit,.primary-button,.contact-form button { min-height:46px; }
  .fx-select-menu { max-width:calc(100vw - 44px); max-height:min(260px,42dvh); }
  .preview-live-settings { grid-template-columns:1fr 1fr; }
  .preview-specs span { font-size:9px; text-align:center; }
  .progress-card,.tool-progress,.convert-progress { overflow-wrap:anywhere; }
  .profile-identity p { font-size:12px; }
  .profile-identity p + p { margin-top:2px; }
}

@media (max-width: 370px) {
  .page-shell,.nav-shell { width:calc(100% - 20px); }
  .nav-shell { gap:6px; }
  .nav-actions { gap:4px; }
  .theme-toggle { display:none; }
  .hero { padding-top:38px; }
  .hero-visual { min-height:440px; }
  .preview-card,.studio-card,.tool-card { padding:17px; }
}

@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }.js [data-reveal],.js .hero-copy .eyebrow,.js .hero-line,.js .hero-copy > p,.js .hero-actions,.js .hero-trial-offer,.js .hero-assurance,.js .hero-quick-start { opacity: 1; translate: none; scale: 1; transform: none; filter: none; transition: none; }.js .hero-visual { opacity: 1; transform: none; filter: none; clip-path: none; transition: none; }.js main > section.section-flow { opacity: 1; transform: none; filter: none; transition: none; } }

/* Convert workspace and sponsor-ready placements */
.product-suite-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.suite-card { min-height: 400px; }
.suite-convert { --suite-color: #ff9f0a; }
.convert-glyph i { position: absolute; width: 50px; height: 18px; border: 2px solid rgba(255,255,255,.86); border-radius: 99px; }
.convert-glyph i:first-child { transform: translateY(-20px); }
.convert-glyph i:nth-child(2) { width: 7px; height: 7px; border-width: 0 2px 2px 0; border-radius: 0; transform: translate(23px,-20px) rotate(-45deg); }
.convert-glyph i:last-child { transform: translateY(20px) rotate(180deg); box-shadow: 0 0 20px rgba(255,159,10,.45); }
.profile-detail-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }

.ad-section { padding-block: 26px; }
.ad-placement { position: relative; min-height: 144px; overflow: hidden; padding: 27px 30px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 24px; border: 1px solid rgba(255,255,255,.12); border-radius: 26px; background: radial-gradient(circle at 18% 0,rgba(10,132,255,.38),transparent 37%),linear-gradient(125deg,#0a0d14,#171d2a 58%,#0b0d13); color: white; box-shadow: 0 25px 70px rgba(16,23,39,.16); isolation: isolate; }
.ad-placement::after { content: ""; position: absolute; z-index: -1; width: 340px; height: 340px; right: -85px; top: -150px; border: 1px solid rgba(255,255,255,.13); border-radius: 50%; box-shadow: 0 0 0 46px rgba(255,255,255,.025),0 0 0 92px rgba(255,255,255,.015); animation: ad-orbit 18s linear infinite; }
.ad-label { position: absolute; left: 17px; top: 12px; color: rgba(255,255,255,.42); font-size: 9px; font-weight: 800; letter-spacing: .13em; }
.ad-placement > div { padding-top: 12px; }
.ad-placement small { display: block; color: #75b8ff; font-size: 10px; font-weight: 820; letter-spacing: .13em; }
.ad-placement strong { display: block; margin-top: 7px; font-size: clamp(24px,3vw,36px); line-height: 1; letter-spacing: -.045em; }
.ad-placement p { margin: 8px 0 0; color: rgba(255,255,255,.58); font-size: 13px; }
.ad-placement > a { position: relative; z-index: 2; min-height: 42px; padding: 0 17px; display: inline-flex; align-items: center; gap: 10px; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; background: rgba(255,255,255,.1); color: white; font-size: 13px; font-weight: 700; text-decoration: none; backdrop-filter: blur(12px); }
.ad-placement > a:hover { background: rgba(255,255,255,.16); }
.ad-inline { background: radial-gradient(circle at 75% 20%,rgba(191,90,242,.31),transparent 38%),linear-gradient(125deg,#111019,#1a1223 58%,#0c0d13); }
.ad-inline small { color: #daa6ff; }
.ad-section-inline { padding-block: 30px 54px; }
@keyframes ad-orbit { to { transform: rotate(360deg); } }

.convert-section { position: relative; width: 100%; max-width: none; padding: 120px max(24px,calc((100vw - 1180px)/2)); overflow: hidden; scroll-margin-top: 62px; border-block: 1px solid rgba(0,0,0,.055); background: radial-gradient(circle at 80% 10%,rgba(255,159,10,.15),transparent 32%),linear-gradient(180deg,rgba(255,255,255,.92),rgba(246,247,250,.96)); }
.convert-section::before { content: ""; position: absolute; width: 700px; height: 700px; left: -330px; bottom: -420px; border-radius: 50%; background: radial-gradient(circle,rgba(10,132,255,.17),transparent 67%); filter: blur(25px); pointer-events: none; }
.convert-heading .eyebrow { color: #bc6b00; }
.convert-shell { position: relative; display: grid; grid-template-columns: minmax(0,1.08fr) minmax(350px,.92fr); overflow: hidden; border: 1px solid rgba(0,0,0,.075); border-radius: 32px; background: rgba(255,255,255,.91); box-shadow: inset 0 1px 0 white,0 30px 90px rgba(20,28,45,.1); }
.convert-form { min-width: 0; padding: 32px; border-right: 1px solid rgba(0,0,0,.075); }
.convert-form-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.convert-form-heading span { color: #bc6b00; font-size: 12px; font-weight: 820; letter-spacing: .13em; }
.convert-form-heading h3 { margin: 8px 0 0; font-size: 28px; letter-spacing: -.04em; }
.convert-form-heading > b { padding: 7px 10px; border: 1px solid rgba(0,0,0,.08); border-radius: 999px; background: #fff7e8; color: #a65e00; font-size: 11px; letter-spacing: .05em; }
.convert-dropzone { min-height: 214px; margin-top: 25px; border-color: rgba(0,0,0,.16); background: #f7f7f9; }
.convert-dropzone:hover,.convert-dropzone.dragging,.convert-dropzone.has-file { border-color: rgba(255,159,10,.62); background: rgba(255,159,10,.065); }
.convert-upload-icon { position: relative; width: 104px; height: 70px; margin-bottom: 7px; display: block; }
.convert-upload-icon i { position: absolute; width: 54px; height: 38px; display: grid; place-items: center; border: 1px solid rgba(0,0,0,.08); border-radius: 11px; background: white; color: #55555a; box-shadow: 0 10px 24px rgba(20,28,45,.1); font-size: 9px; font-style: normal; font-weight: 850; letter-spacing: .06em; }
.convert-upload-icon i:first-child { left: 0; top: 15px; transform: rotate(-9deg); }
.convert-upload-icon i:nth-child(2) { left: 27px; top: 0; z-index: 2; color: #006fd6; }
.convert-upload-icon i:last-child { right: 0; top: 20px; transform: rotate(9deg); color: #b76600; }
.convert-target-row { margin-top: 17px; display: grid; grid-template-columns: minmax(0,1fr) minmax(230px,.92fr); gap: 12px; }
.convert-target-row > label { min-width: 0; padding: 13px; display: grid; gap: 8px; border: 1px solid rgba(0,0,0,.07); border-radius: 15px; background: #f7f7f9; }
.convert-target-row > label > span { color: #636368; font-size: 14px; font-weight: 660; }
.convert-local-badge { padding: 13px; display: flex; align-items: center; gap: 11px; border: 1px solid rgba(48,209,88,.15); border-radius: 15px; background: rgba(48,209,88,.055); }
.convert-local-badge > i { width: 30px; height: 30px; flex: none; border: 1px solid rgba(24,136,60,.23); border-radius: 10px; background: white; }
.convert-local-badge > i::before { content: "✓"; width: 100%; height: 100%; display: grid; place-items: center; color: #18883c; font-size: 13px; font-style: normal; font-weight: 900; }
.convert-local-badge span { display: grid; gap: 3px; }
.convert-local-badge strong { font-size: 13px; }
.convert-local-badge small { color: #6e756f; font-size: 11px; line-height: 1.3; }
.convert-submit { background: linear-gradient(100deg,#e68700,#ff9f0a); color: #211300; box-shadow: 0 15px 40px rgba(255,159,10,.2); }
.convert-submit:hover:not(:disabled) { box-shadow: 0 19px 45px rgba(255,159,10,.26); }
.convert-result-panel { position: relative; min-width: 0; min-height: 580px; padding: 31px; display: grid; place-items: center; overflow: hidden; color: white; background: radial-gradient(circle at 50% 28%,rgba(255,159,10,.14),transparent 35%),linear-gradient(145deg,#17140f,#0c0d11 68%); }
.convert-result-idle { position: relative; z-index: 2; max-width: 330px; text-align: center; }
.convert-result-idle h3 { margin: 26px 0 0; font-size: 27px; letter-spacing: -.045em; }
.convert-result-idle p { margin: 11px 0 0; color: rgba(255,255,255,.53); font-size: 14px; line-height: 1.55; }
.convert-orbit { position: relative; width: 185px; height: 185px; margin-inline: auto; border: 1px solid rgba(255,159,10,.19); border-radius: 50%; animation: convert-spin 18s linear infinite; }
.convert-orbit::before,.convert-orbit::after { content: ""; position: absolute; border: 1px solid rgba(117,184,255,.12); border-radius: 50%; }
.convert-orbit::before { inset: 17%; }.convert-orbit::after { inset: 34%; }
.convert-orbit > i { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: #ffb33c; box-shadow: 0 0 20px rgba(255,159,10,.75); }
.convert-orbit > i:first-child { left: 12%; top: 25%; }.convert-orbit > i:nth-child(2) { right: 15%; top: 18%; }.convert-orbit > i:nth-child(3) { right: 8%; bottom: 28%; }
.convert-orbit > span { position: absolute; inset: 38%; display: grid; place-items: center; border-radius: 50%; background: white; color: #121317; box-shadow: 0 0 35px rgba(255,159,10,.55); font-size: 11px; font-weight: 900; }
.format-cloud { margin-top: 22px; display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; }
.format-cloud span { padding: 7px 9px; border: 1px solid rgba(255,255,255,.09); border-radius: 999px; background: rgba(255,255,255,.055); color: rgba(255,255,255,.67); font-size: 10px; font-weight: 700; }
.convert-progress { position: relative; z-index: 3; width: 100%; }
.convert-progress > div:first-child { display: flex; align-items: center; gap: 9px; }
.convert-progress > div:first-child > b { margin-left: auto; }
.convert-progress .progress-track { margin-top: 15px; background: rgba(255,255,255,.12); }
.convert-progress .progress-track i { background: linear-gradient(90deg,#ff9f0a,#ffd37a); }
.convert-progress > p { margin: 13px 0 0; color: rgba(255,255,255,.56); font-size: 13px; line-height: 1.5; }
.convert-progress .download-button { width: 100%; margin-top: 18px; display: flex; background: white; color: #171717; }
.convert-progress.error .status-dot { background: #ff453a; box-shadow: 0 0 0 5px rgba(255,69,58,.13); }
@keyframes convert-spin { to { transform: rotate(360deg); } }

/* Keep the live caption preview visible while editing long video settings. */
@media (min-width: 961px) {
  .studio-layout > .preview-column { align-self: stretch; align-content: start; }
  .studio-layout > .preview-column > .preview-card {
    position: sticky;
    top: 82px;
    z-index: 2;
    transform: translateZ(0);
    transition: box-shadow 260ms ease, border-color 260ms ease;
  }
  .studio-layout > .preview-column > .preview-card:hover {
    border-color: color-mix(in srgb,var(--blue) 22%,rgba(255,255,255,.82));
    box-shadow: 0 24px 72px rgba(0,0,0,.11);
  }
  .studio-layout > .studio-card:has(.fx-select.is-open) { z-index: 20; overflow: visible; }
}

@media (max-width: 960px) {
  .product-suite-grid { grid-template-columns: 1fr; }
  .video-support-row { grid-template-columns:1fr 1fr; }
  .convert-shell { grid-template-columns: 1fr; }
  .convert-form { border-right: 0; border-bottom: 1px solid rgba(0,0,0,.075); }
  .convert-result-panel { min-height: 480px; }
}

@media (max-width: 650px) {
  .video-support-row { grid-template-columns:1fr; }
  .profile-detail-grid { grid-template-columns: 1fr; }
  .ad-section { width: min(100% - 28px,1180px); padding-block: 16px; }
  .ad-placement { min-height: 245px; padding: 37px 22px 22px; grid-template-columns: 1fr; align-content: center; gap: 18px; border-radius: 23px; }
  .ad-placement > a { width: fit-content; }
  .ad-placement strong { font-size: 29px; }
  .convert-section { padding: 82px 14px; }
  .convert-form,.convert-result-panel { padding: 22px; }
  .convert-shell { border-radius: 25px; }
  .convert-form-heading { flex-direction: column; }
  .convert-target-row { grid-template-columns: 1fr; }
  .convert-dropzone { min-height: 190px; }
  .convert-result-panel { min-height: 420px; }
}

@media (prefers-reduced-motion: reduce) {
  .ad-placement::after,.convert-orbit,.suite-convert .suite-icon,.subtitle-demo b { animation: none !important; }
}

/* Paid membership view contains only Creator and Studio. */
.pricing-grid { width: min(900px,100%); margin-inline: auto; grid-template-columns: repeat(2,minmax(0,1fr)); }
@media (max-width: 820px) { .pricing-grid { grid-template-columns: 1fr; } }