:root {
  --bg: #02050d;
  --bg-2: #050b18;
  --panel: #071329;
  --panel-2: #091a35;
  --panel-soft: #0b1d38;
  --line: #173963;
  --line-bright: #206db0;
  --text: #f6f9ff;
  --muted: #a9b9d1;
  --cyan: #17ddff;
  --blue: #2683ff;
  --violet: #8c62ff;
  --pink: #ff48c4;
  --green: #35e39a;
  --gold: #ffc857;
  --danger: #ff547b;
  --radius: 18px;
  --shadow: 18px 22px 40px rgba(0, 0, 0, .48);
  --shell: min(1280px, calc(100% - 44px));
}

* { box-sizing: border-box; }
html { overflow-x: hidden; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; overflow-x: hidden; color: var(--text); background: radial-gradient(circle at 50% -20%, #0a2454 0, #040b19 38%, var(--bg) 72%); font-family: Manrope, system-ui, sans-serif; }
body::before { content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none; background-image: linear-gradient(rgba(68,128,213,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(68,128,213,.035) 1px, transparent 1px); background-size: 64px 64px; mask-image: linear-gradient(to bottom, #000, transparent 75%); }
a { color: inherit; }
img { display: block; max-width: 100%; }
button, input { font: inherit; }
.ambient { position: fixed; z-index: -1; pointer-events: none; width: 36rem; height: 36rem; border-radius: 50%; filter: blur(110px); opacity: .11; }
.ambient-cyan { top: 20%; left: -20rem; background: var(--cyan); }
.ambient-pink { top: 58%; right: -22rem; background: var(--pink); }

.site-header { width: var(--shell); min-height: 82px; margin: 18px auto 0; padding: 12px 16px; display: flex; align-items: center; gap: 28px; position: relative; z-index: 50; border: 1px solid var(--line); border-radius: var(--radius); background: #061127; box-shadow: var(--shadow), inset 0 1px rgba(255,255,255,.035); }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; flex: 0 0 auto; }
.brand-logo { width: 52px; height: 52px; object-fit: contain; filter: drop-shadow(0 0 9px rgba(23,221,255,.25)); }
.brand-wordmark { font: 700 1.22rem/1 Space Grotesk, sans-serif; letter-spacing: -.055em; background: linear-gradient(90deg, #39eaff 0%, #49a9ff 45%, #b977ff 70%, #ff50cc 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.brand-wordmark > span { color: transparent; }
.brand-copy { display: grid; gap: 2px; }
.brand-kicker { color: var(--cyan); font: 800 .65rem/1 Space Grotesk, sans-serif; letter-spacing: .14em; }
.brand-title { font: 700 1.08rem/1.1 Space Grotesk, sans-serif; letter-spacing: -.04em; background: linear-gradient(90deg, #39eaff, #6a94ff 55%, #ff50cc); -webkit-background-clip: text; background-clip: text; color: transparent; }
.topnav { margin-left: auto; display: flex; align-items: center; gap: 5px; }
.topnav a { padding: 10px 13px; border-radius: 10px; color: #c0cde0; text-decoration: none; font-size: .88rem; font-weight: 700; transition: color .18s, background .18s, transform .18s, box-shadow .18s; }
.topnav a:hover, .topnav a:focus-visible { outline: none; color: white; background: #0a2042; transform: translateY(-1px); box-shadow: 0 0 18px rgba(23,221,255,.11); }
.topnav .nav-account { margin-left: 5px; border: 1px solid #245187; color: #e5efff; }
.nav-toggle { display: none; margin-left: auto; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; color: white; background: #0a1d3a; }

main { width: var(--shell); margin: 0 auto; }
.panel { border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(145deg, #08172e, #061125); box-shadow: var(--shadow), inset 0 1px rgba(255,255,255,.035); }
.eyebrow { color: var(--cyan); font: 800 .72rem/1.2 Space Grotesk, sans-serif; letter-spacing: .15em; text-transform: uppercase; }

.referral-panel { margin-top: 18px; padding: 22px; display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; border-color: rgba(53,227,154,.42); }
.referral-panel[hidden] { display: none; }
.referral-panel h2 { margin: 8px 0 6px; font: 700 1.45rem/1.15 Space Grotesk, sans-serif; }
.referral-panel p { margin: 0; color: var(--muted); }
.referral-code-box { min-width: 250px; display: grid; grid-template-columns: 1fr auto; gap: 7px 12px; padding: 14px; border: 1px solid rgba(53,227,154,.25); border-radius: 14px; background: #04101c; }
.referral-code-box > span { grid-column: 1/-1; color: var(--muted); font-size: .72rem; text-transform: uppercase; }
.referral-code-box strong { color: var(--green); font-size: 1.3rem; align-self: center; }

.hero { min-height: 700px; padding: 86px 0 76px; display: grid; grid-template-columns: .84fr 1.16fr; align-items: center; gap: clamp(34px, 5vw, 78px); }
.hero-copy { position: relative; z-index: 3; }
.hero-kicker { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 22px; color: #b9cae2; font-size: .79rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 5px rgba(53,227,154,.09), 0 0 15px rgba(53,227,154,.8); }
.hero h1 { max-width: 690px; margin: 0; font: 700 clamp(3rem, 5.7vw, 5.25rem)/.95 Space Grotesk, sans-serif; letter-spacing: -.075em; text-wrap: balance; }
.hero h1 span { color: transparent; background: linear-gradient(95deg, var(--cyan), #5c8dff 45%, var(--pink)); -webkit-background-clip: text; background-clip: text; }
.hero-lead { max-width: 660px; margin: 25px 0 0; color: #b7c5d9; font-size: clamp(1.03rem, 1.3vw, 1.18rem); line-height: 1.72; }
.hero-actions { margin-top: 30px; display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.button { min-height: 50px; padding: 0 20px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; border: 1px solid transparent; border-radius: 12px; text-decoration: none; color: white; font-weight: 800; font-size: .94rem; cursor: pointer; transition: transform .18s, box-shadow .18s, border-color .18s, filter .18s; }
.button:hover, .button:focus-visible { outline: none; transform: translateY(-2px); filter: brightness(1.08); }
.button-primary { color: #021221; background: linear-gradient(120deg, #12e1f7, #45a9ff); box-shadow: 0 10px 28px rgba(25,181,255,.18); }
.button-primary:hover { box-shadow: 0 12px 34px rgba(25,181,255,.29); }
.button-secondary { border-color: #6051c4; background: linear-gradient(145deg, #172451, #24183f); box-shadow: 0 10px 28px rgba(125,73,255,.13); }
.button-ghost { border-color: #274d79; background: #0a1a33; }
.hero-meta { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 10px 18px; color: #91a7c4; font-size: .78rem; font-weight: 700; }
.hero-meta span { display: inline-flex; align-items: center; gap: 7px; }
.hero-meta i { width: 18px; height: 18px; display: inline-grid; place-items: center; border-radius: 50%; color: var(--green); background: rgba(53,227,154,.1); font-style: normal; font-size: .68rem; }

.app-stage { position: relative; perspective: 1400px; }
.real-dashboard-image { width: 112%; max-width: none; margin-left: -4%; border: 1px solid #1e5794; border-radius: 17px; background: #030b1a; box-shadow: 26px 32px 55px rgba(0,0,0,.57), 0 0 34px rgba(28,121,255,.14), inset 0 1px rgba(255,255,255,.05); transform: rotateY(-2deg) rotateX(1deg); transform-origin: center; }
.app-stage > .app-frame,
.app-stage > .floating-chip { display: none; }
.app-frame { overflow: hidden; border: 1px solid #1e5794; border-radius: 18px; background: #030b1a; box-shadow: 26px 32px 55px rgba(0,0,0,.57), 0 0 34px rgba(28,121,255,.12), inset 0 1px rgba(255,255,255,.05); transform: rotateY(-3deg) rotateX(1deg); transform-origin: center; }
.app-frame::before { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: linear-gradient(115deg, rgba(47,169,255,.055), transparent 38%, rgba(255,67,194,.025)); }
.app-topbar { height: 59px; padding: 9px 12px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid #15365f; background: #06142c; }
.app-mini-brand { display: flex; align-items: center; gap: 7px; margin-right: auto; font-size: .73rem; }
.app-mini-brand img { width: 31px; height: 31px; object-fit: contain; }
.app-mini-brand span { color: var(--pink); }
.app-connect { padding: 8px 10px; display: flex; align-items: center; gap: 6px; border: 1px solid #1d426e; border-radius: 9px; color: #a9b9d1; background: #08182f; font-size: .51rem; font-weight: 800; }
.app-connect span { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); }
.app-avatar { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--cyan); border-radius: 50%; color: white; background: #0d4ba1; font-size: .67rem; }
.app-layout { display: grid; grid-template-columns: 142px 1fr; min-height: 440px; }
.app-sidebar { padding: 12px 9px; display: grid; align-content: start; gap: 7px; border-right: 1px solid #132f54; background: #061227; }
.app-nav { min-height: 52px; padding: 8px; display: flex; align-items: center; gap: 9px; border: 1px solid transparent; border-radius: 8px; color: #8ea4c2; font-size: .58rem; font-weight: 800; }
.app-nav b { width: 24px; color: #7c76ff; font-size: .88rem; text-align: center; }
.app-nav span { display: grid; gap: 3px; }
.app-nav small { color: #64809f; font-size: .45rem; font-weight: 600; }
.app-nav.active { border-color: #147bdd; color: white; background: linear-gradient(90deg, #0758ba, #0a326c); box-shadow: 0 7px 16px rgba(4,104,226,.2); }
.app-nav.active b { color: var(--cyan); }
.app-content { padding: 12px; display: grid; grid-template-columns: 1.25fr .75fr; grid-template-rows: 1.32fr .68fr; gap: 10px; background: radial-gradient(circle at 40% 20%, #071b3c, #030916 70%); }
.preview-card { padding: 12px; overflow: hidden; border: 1px solid #143a69; border-radius: 10px; background: linear-gradient(145deg, #07172f, #050e21); box-shadow: 8px 10px 18px rgba(0,0,0,.34); }
.preview-head { display: flex; justify-content: space-between; gap: 8px; color: #eaf3ff; font-size: .55rem; font-weight: 800; letter-spacing: .04em; }
.preview-head em { color: var(--cyan); font-style: normal; font-size: .46rem; }
.voice-display { min-height: 132px; display: grid; grid-template-columns: 104px 1fr; align-items: center; gap: 15px; }
.voice-orb { width: 94px; height: 94px; display: grid; place-items: center; position: relative; border: 3px solid transparent; border-radius: 50%; background: linear-gradient(#06132a,#06132a) padding-box, conic-gradient(var(--cyan), var(--violet), var(--pink), var(--cyan)) border-box; box-shadow: 0 0 23px rgba(48,142,255,.26), inset 0 0 18px rgba(62,105,255,.16); }
.mic { width: 44px; height: 59px; display: grid; place-items: center; border: 2px solid #3f8fff; border-radius: 24px; color: var(--cyan); text-shadow: 0 0 10px var(--cyan); }
.preview-label { color: #839ab8; font-size: .46rem; font-weight: 800; letter-spacing: .12em; }
.voice-display h3 { margin: 5px 0 4px; font: 700 1rem/1.1 Space Grotesk; }
.voice-display p { margin: 0; color: var(--cyan); font-size: .59rem; font-style: italic; }
.wave { height: 34px; display: flex; align-items: center; justify-content: center; gap: 4px; }
.wave i, .sound-bars i { width: 3px; border-radius: 3px; background: linear-gradient(to top, #287dff, var(--cyan), var(--pink)); box-shadow: 0 0 6px rgba(41,185,255,.4); }
.wave i:nth-child(3n+1) { height: 14px; }.wave i:nth-child(3n+2) { height: 30px; }.wave i:nth-child(3n) { height: 21px; }
.event-card { display: grid; align-content: start; gap: 5px; }
.event-row { padding: 8px 2px; display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 7px; border-bottom: 1px solid #102b50; }
.event-row:last-child { border-bottom: 0; }
.event-icon { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 7px; background: rgba(255,255,255,.05); font-size: .72rem; }
.event-icon.pink { color: var(--pink); }.event-icon.cyan { color: var(--cyan); }.event-icon.gold { color: var(--gold); }
.event-row span { display: grid; gap: 2px; font-size: .57rem; }.event-row small { color: #7187a7; font-size: .45rem; }.event-row > em { color: #627692; font-size: .43rem; font-style: normal; }
.controls-card { display: grid; align-content: start; gap: 14px; }
.control-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; }
.control-grid > span { height: 63px; display: grid; place-items: center; align-content: center; gap: 5px; border: 1px solid #1c3d67; border-radius: 8px; background: #081831; font-size: 1rem; font-weight: 800; }
.control-grid small { font-size: .47rem; color: #b7c6db; }.cyan-control { color: var(--cyan); }.violet-control { color: var(--violet); }.pink-control { color: var(--pink); }
.queue-card { display: grid; align-content: start; gap: 4px; }
.queue-row { padding: 8px 0; display: grid; grid-template-columns: 22px 1fr; align-items: center; gap: 8px; border-bottom: 1px solid #102b50; }
.queue-row b { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 6px; background: #102340; color: #a8b9d0; font-size: .5rem; }
.queue-row span { display: grid; gap: 2px; font-size: .55rem; }.queue-row small { color: #7187a7; font-size: .45rem; }
.floating-chip { position: absolute; z-index: 4; min-width: 160px; padding: 11px 14px; display: grid; grid-template-columns: 28px 1fr; align-items: center; border: 1px solid #285993; border-radius: 12px; background: #081a35; box-shadow: 12px 15px 30px rgba(0,0,0,.52), 0 0 18px rgba(32,136,255,.14); }
.floating-chip > span { grid-row: 1/3; font-size: 1.25rem; color: var(--pink); }.floating-chip strong { font-size: .7rem; }.floating-chip small { color: #8196b3; font-size: .5rem; }.chip-left { left: -35px; bottom: -25px; }.chip-right { right: -28px; top: 94px; }

.trust-strip { min-height: 78px; padding: 18px 26px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px 22px; color: #a8bad2; }
.trust-strip > span { color: #607b9c; font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }.trust-strip strong { font: 700 .9rem/1 Space Grotesk; }.trust-strip i { width: 4px; height: 4px; border-radius: 50%; background: #2b5685; }

.section-block { padding: 104px 0 0; }
.section-heading { margin-bottom: 34px; display: grid; grid-template-columns: 1fr .7fr; align-items: end; gap: 36px; }
.section-heading h2, .overlay-copy h2, .platform-card h2, .final-cta h2 { margin: 9px 0 0; font: 700 clamp(2rem, 4vw, 3.4rem)/1.02 Space Grotesk; letter-spacing: -.055em; }
.section-heading p, .overlay-copy > p, .platform-card > p, .final-cta p { margin: 0; color: var(--muted); line-height: 1.7; }
.feature-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.tts-showcase { margin-bottom: 20px; padding: clamp(26px,4vw,46px); display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(30px,5vw,64px); align-items: center; overflow: hidden; }
.feature-title-row { display: flex; align-items: center; gap: 14px; }
.feature-title-row .feature-number { position: static; color: #7090b5; }
.tts-copy h3 { max-width: 770px; margin: 24px 0 14px; font: 700 clamp(1.9rem,3.4vw,3.15rem)/1.04 Space Grotesk; letter-spacing: -.05em; }
.tts-copy > p { margin: 0; color: #b2c2d8; line-height: 1.72; }
.detail-grid { margin-top: 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.detail-grid > div { min-height: 112px; padding: 15px; display: grid; align-content: start; gap: 7px; border: 1px solid #173b68; border-radius: 12px; background: #061328; box-shadow: 8px 10px 18px rgba(0,0,0,.2); }
.detail-grid strong { color: #eaf3ff; font: 700 .86rem/1.2 Space Grotesk; }
.detail-grid span { color: #91a7c3; font-size: .74rem; line-height: 1.52; }
.detail-grid code { padding: 2px 5px; border: 1px solid #24578b; border-radius: 5px; color: var(--cyan); background: #071d38; font: 700 .67rem/1.2 Manrope; white-space: nowrap; }
.tts-ui { padding: 15px; border: 1px solid #2065a3; border-radius: 17px; background: linear-gradient(145deg,#081a36,#040d1d); box-shadow: 20px 25px 44px rgba(0,0,0,.48), 0 0 30px rgba(23,221,255,.08); transform: rotateY(-2deg); }
.ui-window-head,.voice-list-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #dce9fa; font-size: .61rem; font-weight: 800; letter-spacing: .08em; }
.ui-window-head { padding-bottom: 12px; border-bottom: 1px solid #17416f; }
.ui-window-head em { padding: 5px 7px; border: 1px solid rgba(53,227,154,.28); border-radius: 999px; color: var(--green); background: rgba(53,227,154,.08); font-style: normal; font-size: .5rem; }
.voice-command-card { margin: 13px 0; padding: 11px; display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px; border: 1px solid rgba(23,221,255,.34); border-radius: 11px; background: rgba(23,221,255,.055); }
.viewer-avatar,.viewer-dot { display: grid; place-items: center; border-radius: 50%; color: white; font-weight: 800; }
.viewer-avatar { width: 34px; height: 34px; border: 1px solid var(--cyan); background: #105096; }
.voice-command-card > div { display: grid; gap: 3px; }.voice-command-card small { color: #7992b2; font-size: .55rem; }.voice-command-card strong { font-size: .74rem; }
.success-badge { padding: 5px 7px; border-radius: 6px; color: var(--green); background: rgba(53,227,154,.1); font-size: .47rem; font-weight: 800; }
.voice-list-head { padding: 6px 2px 9px; color: #8aa0bd; font-size: .52rem; }.voice-list-head small { font-size: .5rem; }
.assigned-voice { min-height: 49px; padding: 8px; display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 9px; border-top: 1px solid #112f53; }
.viewer-dot { width: 29px; height: 29px; font-size: .62rem; }.cyan-dot { background: #125e91; border: 1px solid var(--cyan); }.pink-dot { background: #762b67; border: 1px solid var(--pink); }.violet-dot { background: #432b79; border: 1px solid var(--violet); }
.assigned-voice > div { display: grid; gap: 2px; }.assigned-voice strong { font-size: .65rem; }.assigned-voice small { color: #6f87a7; font-size: .52rem; }.assigned-voice > b,.assigned-voice > em { padding: 5px 6px; border-radius: 6px; font-size: .45rem; font-style: normal; }.assigned-voice > b { color: var(--gold); background: rgba(255,200,87,.1); }.assigned-voice > em { color: #92b2da; border: 1px solid #264b77; }
.moderation-panel { margin-top: 12px; padding: 11px; display: grid; grid-template-columns: 1fr auto; gap: 7px 10px; border: 1px solid rgba(255,84,123,.28); border-radius: 11px; background: rgba(255,84,123,.055); }
.moderation-panel > div { display: grid; gap: 2px; }.moderation-panel span { color: #ff7c9b; font-size: .55rem; font-weight: 800; }.moderation-panel small { color: #856f83; font-size: .48rem; }.moderation-panel code { grid-column: 1; color: #f2ddea; font: 700 .59rem/1.3 Manrope; }.moderation-panel > strong { grid-column: 2; grid-row: 1/3; align-self: center; padding: 6px 8px; border-radius: 7px; color: #ff92aa; background: rgba(255,84,123,.12); font-size: .48rem; }
.audience-access { margin-top: 11px; display: grid; grid-template-columns: repeat(4,1fr); gap: 6px; }.audience-access span { padding: 7px 4px; border: 1px solid #1c466f; border-radius: 7px; color: #8eafd2; background: #07162b; font-size: .43rem; font-weight: 800; text-align: center; }
.visual-feature-grid .feature-card { min-height: 560px; display: flex; flex-direction: column; }
.visual-feature-grid .feature-card > ul { margin-bottom: 20px; }
.visual-feature-grid .feature-card > ul li { color: #9eb1ca; line-height: 1.5; }
.visual-feature-grid .feature-card > ul li::before { color: currentColor; }
.sound-rule-ui,.automation-ui,.heart-visual-ui,.obs-ui,.profile-ui,.overlay-mini-ui { margin-top: auto; overflow: hidden; border: 1px solid #1c436e; border-radius: 12px; background: #040e20; box-shadow: 9px 12px 22px rgba(0,0,0,.32); }
.sound-rule-ui { padding: 12px; display: grid; grid-template-columns: 1fr auto; gap: 12px; }.sound-rule-ui > div:first-child { grid-column: 1/-1; display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 9px; }.rule-gift { grid-row: 1/3; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 9px; background: #1a1734; font-size: 1.25rem; }.sound-rule-ui strong { font-size: .7rem; }.sound-rule-ui small { grid-column: 2; color: #7189a8; font-size: .5rem; }.sound-rule-ui b { grid-column: 3; grid-row: 1/3; padding: 5px 7px; border-radius: 999px; color: var(--green); background: rgba(53,227,154,.1); font-size: .48rem; }.sound-rule-ui button { border: 1px solid #285b91; border-radius: 8px; color: var(--cyan); background: #082041; font-size: .5rem; font-weight: 800; }
.sound-wave { height: 36px; display: flex; align-items: center; gap: 4px; }.sound-wave i { width: 3px; border-radius: 2px; background: linear-gradient(to top,var(--violet),var(--pink)); }.sound-wave i:nth-child(odd){height:15px}.sound-wave i:nth-child(even){height:30px}.sound-wave i:nth-child(3n){height:22px}
.preview-sound-button { min-width: 68px; display: grid; place-items: center; border: 1px solid #285b91; border-radius: 8px; color: var(--cyan); background: #082041; font-size: .5rem; font-weight: 800; }
.automation-head { padding: 10px 12px; display: flex; justify-content: space-between; border-bottom: 1px solid #193c67; color: #cbd9ea; font-size: .55rem; font-weight: 800; }.automation-head em { color: var(--green); font-style: normal; }.automation-ui ol { margin: 0; padding: 8px 12px 12px; list-style: none; }.automation-ui li { min-height: 48px; display: grid; grid-template-columns: 25px 1fr; align-items: center; gap: 9px; position: relative; }.automation-ui li:not(:last-child)::after { content:""; position:absolute; left:12px; bottom:-3px; width:1px; height:11px; background:#5e43a8; }.automation-ui li > b { width:25px; height:25px; display:grid; place-items:center; border:1px solid var(--violet); border-radius:7px; color:#c3afff; background:#211846; font-size:.52rem; }.automation-ui li > span { display:grid; gap:2px; color:#d9e4f2; font-size:.62rem; font-weight:700; }.automation-ui li small { color:#7086a4; font-size:.48rem; font-weight:500; }
.heart-visual-ui { min-height: 148px; padding: 14px; display: grid; grid-template-columns: 56px 1fr; align-items: center; gap: 8px; position: relative; background: radial-gradient(circle at 20% 50%,rgba(255,50,96,.15),transparent 45%),#090c1c; }.pulse-heart { grid-row:1/3; color:#ff3f68; font-size:3.2rem; text-align:center; text-shadow:0 0 18px rgba(255,44,91,.65); }.heart-visual-ui > div:nth-child(2) { display:flex; align-items:end; gap:7px; }.heart-visual-ui strong { color:white; font:700 2.1rem/1 Space Grotesk; }.heart-visual-ui small { color:#ff9bb0; font-size:.5rem; }.threshold-track { grid-column:2; height:28px; position:relative; display:flex; align-items:end; justify-content:space-between; border-top:4px solid #223552; }.threshold-track i { width:72%; height:4px; position:absolute; left:0; top:-4px; background:linear-gradient(90deg,var(--green),var(--gold),var(--danger)); box-shadow:0 0 9px rgba(255,84,123,.4); }.threshold-track span { color:#667b99; font-size:.46rem; }.heart-visual-ui > em { grid-column:1/-1; padding:6px; border-radius:6px; color:#ff6d8e; background:rgba(255,84,123,.08); font-size:.48rem; font-style:normal; font-weight:800; text-align:center; letter-spacing:.08em; }
.obs-status { padding:12px; display:grid; grid-template-columns:9px 1fr; gap:3px 8px; align-items:center; border-bottom:1px solid #183b64; }.obs-status i { grid-row:1/3; width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 9px var(--green); }.obs-status span { color:var(--green); font-size:.55rem; font-weight:800; }.obs-status small { color:#667f9f; font-size:.48rem; }.scene-list { padding:8px; display:grid; gap:5px; }.scene-list span { min-height:34px; padding:7px 9px; display:flex; align-items:center; gap:8px; border:1px solid #17395f; border-radius:7px; color:#a8bad1; background:#07162c; font-size:.56rem; }.scene-list b { padding:3px 5px; border-radius:4px; color:#09111d; background:var(--green); font-size:.4rem; }
.profile-switch { padding:12px; display:grid; grid-template-columns:38px 1fr auto; gap:10px; align-items:center; border-bottom:1px solid #183b64; }.profile-avatar { width:38px; height:38px; display:grid; place-items:center; border:1px solid var(--cyan); border-radius:50%; color:white; background:#0c4b8d; font-weight:800; }.profile-switch > div { display:grid; gap:3px; }.profile-switch small { color:#7289a8; font-size:.46rem; }.profile-switch strong { font-size:.68rem; }.profile-switch b { color:#7d9dc4; }.permission-row { padding:12px; display:flex; align-items:center; gap:7px; }.permission-row span { width:31px; height:31px; display:grid; place-items:center; border:1px solid #27517e; border-radius:50%; color:#99bde4; background:#0a1d38; font-size:.43rem; font-weight:800; }.permission-row em { margin-left:auto; color:#637c9b; font-size:.45rem; font-style:normal; font-weight:800; }
.overlay-mini-ui { padding:10px; display:grid; gap:7px; }.overlay-mini-ui > div { padding:9px; display:grid; grid-template-columns:38px 1fr; align-items:center; gap:8px; border:1px solid #1c5b85; border-radius:8px; background:#102641; }.overlay-mini-ui > div > span { grid-row:1/3; font-size:1.35rem; }.overlay-mini-ui strong { font-size:.62rem; }.overlay-mini-ui small { color:#7f95b2; font-size:.48rem; }
.feature-card { min-height: 340px; padding: 24px; position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(145deg, #091a35, #061126 70%); box-shadow: var(--shadow), inset 0 1px rgba(255,255,255,.035); }
.feature-card::after { content: ""; position: absolute; width: 190px; height: 190px; right: -90px; top: -90px; border-radius: 50%; background: currentColor; filter: blur(60px); opacity: .065; }
.feature-large { grid-column: span 2; }
.feature-icon { width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid currentColor; border-radius: 14px; background: color-mix(in srgb, currentColor 10%, transparent); box-shadow: inset 0 1px rgba(255,255,255,.08), 0 7px 16px rgba(0,0,0,.22); font-size: 1.2rem; font-weight: 800; }
.feature-number { position: absolute; top: 24px; right: 24px; color: #436080; font: 700 .72rem/1 Space Grotesk; letter-spacing: .1em; }
.feature-card h3 { margin: 22px 0 10px; color: white; font: 700 1.35rem/1.15 Space Grotesk; letter-spacing: -.025em; }
.feature-card p { margin: 0; color: #a7b8cf; line-height: 1.65; font-size: .93rem; }
.feature-card ul, .platform-card ul { margin: 18px 0 0; padding: 0; display: grid; gap: 8px; list-style: none; color: #b8c7da; font-size: .82rem; }
.feature-card li::before, .platform-card li::before { content: "✓"; margin-right: 8px; color: currentColor; font-weight: 900; }
.accent-cyan { color: var(--cyan); }.accent-pink { color: var(--pink); }.accent-violet { color: var(--violet); }.accent-green { color: var(--green); }.accent-gold { color: var(--gold); }.accent-blue { color: #4a9dff; }
.mini-console { max-width: 480px; margin-top: 22px; padding: 12px 14px; display: grid; grid-template-columns: auto 1fr auto; gap: 12px; border: 1px solid #1f4b7a; border-radius: 11px; background: #04101f; color: #8ca4c2; font-size: .7rem; }.mini-console strong { color: white; }.mini-console em { color: var(--green); font-style: normal; }
.sound-bars { height: 68px; margin-top: 22px; display: flex; align-items: center; gap: 7px; }.sound-bars i:nth-child(1){height:22%}.sound-bars i:nth-child(2){height:52%}.sound-bars i:nth-child(3){height:86%}.sound-bars i:nth-child(4){height:45%}.sound-bars i:nth-child(5){height:100%}.sound-bars i:nth-child(6){height:68%}.sound-bars i:nth-child(7){height:32%}
.action-chain { margin-top: 26px; display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }.action-chain span { padding: 8px 9px; border: 1px solid #2a4e7c; border-radius: 8px; color: #d8e5f6; background: #091a34; font-size: .65rem; font-weight: 800; }.action-chain b { color: var(--violet); }
.bpm-widget { margin-top: 22px; padding: 13px; display: grid; grid-template-columns: auto auto 1fr; align-items: center; column-gap: 7px; border: 1px solid rgba(255,84,123,.34); border-radius: 12px; background: #190d1d; }.bpm-widget > span { grid-row: 1/3; color: var(--danger); font-size: 2rem; text-shadow: 0 0 14px rgba(255,84,123,.6); }.bpm-widget strong { color: white; font: 700 1.8rem/1 Space Grotesk; }.bpm-widget small { align-self: end; color: #a697a8; }.bpm-widget em { grid-column: 2/4; color: var(--danger); font-size: .55rem; font-style: normal; font-weight: 800; letter-spacing: .1em; }
.integration-pills, .role-row { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 8px; }.integration-pills span, .role-row span { padding: 8px 10px; border: 1px solid #2a4f7c; border-radius: 999px; color: #c3d2e6; background: #08172e; font-size: .63rem; font-weight: 800; }.role-row span { width: 42px; height: 42px; padding: 0; display: grid; place-items: center; border-radius: 50%; color: #a9cfff; }

.overlay-showcase { min-height: 570px; margin-top: 104px; padding: clamp(28px,5vw,58px); display: grid; grid-template-columns: .74fr 1.26fr; align-items: center; gap: 52px; overflow: hidden; }
.overlay-copy h2 { margin-bottom: 18px; }.overlay-list { margin: 24px 0; display: flex; flex-wrap: wrap; gap: 9px; }.overlay-list span { padding: 8px 11px; border: 1px solid #224d7d; border-radius: 999px; color: #c7d7eb; background: #071932; font-size: .72rem; font-weight: 700; }.text-link { display: inline-flex; gap: 10px; color: var(--cyan); font-weight: 800; text-decoration: none; }.text-link:hover span { transform: translateX(3px); }.text-link span { transition: transform .18s; }
.overlay-art { min-height: 430px; position: relative; perspective: 1000px; }
.slider-track { width: 115%; padding: 11px; display: flex; gap: 12px; position: absolute; left: -4%; top: 16px; overflow: hidden; border: 1px solid #1d558f; border-radius: 13px; background: #030a16; box-shadow: 18px 22px 34px rgba(0,0,0,.55); transform: rotateX(2deg) rotateY(-2deg); }
.slider-track article { min-width: 210px; padding: 11px; display: grid; grid-template-columns: 54px 1fr; align-items: center; gap: 11px; border: 1px solid #1e7cb4; border-radius: 11px; background: #102542; box-shadow: 8px 10px 18px rgba(0,0,0,.42); }.gift-art { font-size: 2.1rem; text-align: center; }.slider-track span { display: grid; }.slider-track small { color: var(--cyan); font-size: .48rem; font-weight: 800; letter-spacing: .1em; }.slider-track strong { font: 700 .8rem/1.2 Space Grotesk; }.slider-track em { color: #91a4bd; font-size: .58rem; font-style: normal; }
.wheel-card { width: 260px; height: 276px; padding-top: 16px; display: grid; justify-items: center; position: absolute; left: 55px; bottom: -10px; border: 1px solid #254b7a; border-radius: 18px; background: #071630; box-shadow: 18px 22px 38px rgba(0,0,0,.58); transform: rotateY(5deg); }.wheel-card > strong { margin-top: -5px; color: #b8c8dc; font-size: .62rem; letter-spacing: .12em; }.wheel { width: 205px; height: 205px; position: relative; display: grid; place-items: center; border: 9px solid #311e58; border-radius: 50%; background: repeating-conic-gradient(from -18deg, #ff3b99 0 30deg, #ff8c22 30deg 60deg, #ffca2c 60deg 90deg, #29bb79 90deg 120deg, #22aacf 120deg 150deg, #7045e7 150deg 180deg); box-shadow: 0 0 0 3px #9c55ff, 0 0 28px rgba(206,68,255,.35), inset 0 0 24px rgba(0,0,0,.35); }.wheel::before { content:""; position:absolute; width:82px; height:82px; border:6px solid #ae59ff; border-radius:50%; background: radial-gradient(circle,#173f75,#061225 68%); box-shadow: 0 0 18px #cc49ff; }.wheel-user { position:relative; z-index:2; font-size:.63rem; font-weight:800; }.wheel-pointer { width:0; height:0; position:absolute; top:6px; z-index:3; border-left:14px solid transparent; border-right:14px solid transparent; border-top:28px solid #ff4ec6; filter:drop-shadow(0 0 6px #ff4ec6); }
.heart-card { width: 205px; height: 170px; display: grid; grid-template-columns: 1fr auto; align-content: center; position: absolute; right: 7px; bottom: 35px; padding: 20px; border: 1px solid #8d274b; border-radius: 17px; background: #1a0a19; box-shadow: 18px 22px 38px rgba(0,0,0,.58), 0 0 24px rgba(255,42,102,.12); transform: rotateY(-5deg); }.heart-line { grid-row:1/3; color:#ff345f; font-size:4.2rem; text-shadow:0 0 14px #ff234f; }.heart-card strong { font:700 2.3rem/1 Space Grotesk; }.heart-card > span { color:#ff9eb3; font-size:.62rem; }.heart-card small { grid-column:1/-1; margin-top:8px; color:#ff5079; font-weight:800; text-align:center; }

.compact-heading { align-items: center; }.steps-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }.steps-grid article { min-height: 150px; padding: 22px; display: grid; grid-template-columns: 48px 1fr; gap: 15px; border: 1px solid var(--line); border-radius: var(--radius); background: #07152b; box-shadow: var(--shadow); }.steps-grid article > span { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid #23669f; border-radius: 13px; color: var(--cyan); background:#0a2444; font:700 1.05rem/1 Space Grotesk; }.steps-grid h3 { margin: 3px 0 8px; font:700 1.03rem/1.2 Space Grotesk; }.steps-grid p { margin:0; color:var(--muted); font-size:.85rem; line-height:1.6; }

.platform-choice { padding-top: 104px; display:grid; grid-template-columns:1fr 1fr; gap:20px; }.platform-card { min-height:490px; padding:clamp(28px,4vw,44px); position:relative; overflow:hidden; border:1px solid var(--line); border-radius:var(--radius); background:#07152b; box-shadow:var(--shadow),inset 0 1px rgba(255,255,255,.04); }.platform-card::after { content:""; position:absolute; width:330px; height:330px; right:-180px; top:-180px; border-radius:50%; filter:blur(50px); opacity:.18; }.web-card::after { background:var(--cyan); }.desktop-card::after { background:var(--violet); }.platform-icon { width:58px; height:58px; margin-bottom:30px; display:grid; place-items:center; border:1px solid #2e77b2; border-radius:16px; color:var(--cyan); background:#0a2545; box-shadow:8px 10px 18px rgba(0,0,0,.34); font-size:1.3rem; }.desktop-card .platform-icon { color:#b491ff; border-color:#6946a7; background:#20163e; }.platform-card h2 { font-size:2.35rem; }.platform-card > p { margin-top:16px; }.platform-card ul { margin:25px 0 30px; font-size:.88rem; }.platform-card li::before { color:var(--green); }.installer-note { max-width:540px; margin-top:15px; display:block; color:#8095b1; font-size:.7rem; line-height:1.55; }
.final-cta { margin-top:104px; padding:clamp(30px,5vw,54px); display:flex; align-items:center; justify-content:space-between; gap:30px; }.final-cta h2 { font-size:clamp(1.9rem,3.4vw,3.2rem); }.final-cta p { margin-top:10px; }.final-cta .hero-actions { margin-top:0; flex:0 0 auto; }

.site-footer { width:var(--shell); margin:70px auto 0; padding:30px 0 38px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:24px; border-top:1px solid #122d50; color:#7289a8; font-size:.75rem; }.footer-brand img { width:42px; height:42px; }.site-footer p { max-width:510px; margin:0; line-height:1.5; }.site-footer nav { display:flex; gap:14px; }.site-footer nav a { color:#91a6c1; text-decoration:none; font-weight:700; }.site-footer nav a:hover { color:white; }.copyright { grid-column:1/-1; color:#4f6685; }

/* Existing contact and legal pages keep the same theme. */
.site-shell, .legal-shell { width:var(--shell); margin:0 auto; padding:20px 0 50px; }.topbar { min-height:82px; margin-bottom:28px; padding:12px 16px; display:flex; align-items:center; gap:28px; border:1px solid var(--line); border-radius:var(--radius); background:#061127; box-shadow:var(--shadow); }.topbar .topnav { margin-left:auto; }.card { overflow:hidden; border:1px solid var(--line); border-radius:var(--radius); background:linear-gradient(145deg,#08172e,#061125); box-shadow:var(--shadow); }.card-header { min-height:54px; padding:15px 22px; display:flex; align-items:center; border-bottom:1px solid #14345b; background:#061329; }.card-body { padding:24px; }.card-title { margin:0 0 12px; font:700 clamp(1.4rem,3vw,2rem)/1.1 Space Grotesk; }.card p,.legal-section p,.legal-section li,.contact-panel p,.contact-form-heading p { color:var(--muted); line-height:1.7; }.legal-page,.legal-grid,.contact-panel,.contact-points,.contact-form,.contact-form-heading { display:grid; gap:16px; }.legal-section,.contact-panel-intro,.contact-form-shell,.contact-point,.contact-hero-stat { padding:18px; border:1px solid #17365c; border-radius:14px; background:#08162c; }.legal-section h2,.contact-panel-intro h2,.contact-form-heading h2 { margin:0; font:700 1.18rem/1.2 Space Grotesk; }.legal-section p,.legal-section ul,.contact-form-heading p { margin:0; }.contact-hero,.contact-layout,.contact-form-grid,.contact-hero-meta { display:grid; gap:18px; }.contact-hero { grid-template-columns:1fr .7fr; align-items:end; }.contact-layout { grid-template-columns:.75fr 1.25fr; }.contact-form-grid,.contact-hero-meta { grid-template-columns:repeat(2,1fr); }.contact-form-shell { padding:22px; }.contact-form label { display:grid; gap:8px; color:#c0cde0; font-weight:700; }.contact-form input,.contact-form select,.contact-form textarea { width:100%; border:1px solid #244c7c; border-radius:11px; color:white; background:#040d1d; outline:none; }.contact-form input,.contact-form select { height:48px; padding:0 13px; }.contact-form textarea { min-height:160px; padding:13px; resize:vertical; }.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus { border-color:var(--cyan); box-shadow:0 0 0 3px rgba(23,221,255,.08); }.contact-form-actions { display:flex; align-items:center; gap:12px; }.form-status { flex:1; margin:0; padding:12px; border:1px solid #17365c; border-radius:10px; color:var(--muted); background:#07152a; }.status-chip,.contact-panel-chip,.beta-pill { padding:7px 11px; display:inline-flex; border:1px solid #285a8d; border-radius:999px; color:#b8d6f3; background:#0a2342; font-size:.72rem; font-weight:800; }.contact-panel-compact { display:flex; flex-wrap:wrap; gap:8px; }

@media (max-width:1100px) {
  .hero { grid-template-columns:1fr; padding-top:64px; }.hero-copy { max-width:820px; }.app-stage { max-width:940px; margin:0 auto; }.real-dashboard-image { width:100%; margin-left:0; transform:none; }.feature-grid { grid-template-columns:repeat(2,1fr); }.feature-large { grid-column:span 2; }.overlay-showcase { grid-template-columns:1fr; }.overlay-copy { max-width:760px; }.overlay-art { max-width:760px; width:100%; margin:0 auto; }.site-footer { grid-template-columns:1fr auto; }.site-footer p { grid-column:1/-1; grid-row:2; }
}
@media (max-width:820px) {
  :root { --shell:min(100% - 24px,100%); }.site-header { min-height:68px; margin-top:12px; padding:8px 10px; }.brand-logo { width:46px; height:46px; }.nav-toggle { display:block; }.site-header .topnav { display:none; width:100%; padding:8px; position:absolute; left:0; right:0; top:calc(100% + 8px); border:1px solid var(--line); border-radius:13px; background:#061329; box-shadow:var(--shadow); }.site-header .topnav.is-open { display:grid; }.topnav .nav-account { margin-left:0; }.hero { min-height:0; padding:58px 0 64px; }.app-layout { grid-template-columns:92px 1fr; }.app-sidebar { padding:8px 5px; }.app-nav { min-height:44px; padding:5px; }.app-nav b { width:18px; }.app-nav small { display:none; }.app-content { grid-template-columns:1fr 1fr; }.voice-display { grid-template-columns:82px 1fr; }.voice-orb { width:74px; height:74px; }.mic { width:35px; height:46px; }.chip-left { left:-4px; }.chip-right { right:-4px; }.section-heading,.compact-heading { grid-template-columns:1fr; gap:14px; }.steps-grid,.platform-choice { grid-template-columns:1fr; }.final-cta { align-items:flex-start; flex-direction:column; }.final-cta .hero-actions { margin-top:0; }.contact-hero,.contact-layout { grid-template-columns:1fr; }
}
@media (max-width:620px) {
  .hero h1 { font-size:clamp(2.65rem,14vw,4rem); }.hero-actions { align-items:stretch; flex-direction:column; }.hero-actions .button { width:100%; }.hero-meta { display:grid; }.app-frame { transform:none; }.app-topbar { height:52px; }.app-mini-brand strong { display:none; }.app-layout { display:block; min-height:390px; }.app-sidebar { display:flex; overflow-x:auto; border-right:0; border-bottom:1px solid #132f54; }.app-nav { min-width:42px; }.app-nav span { display:none; }.app-content { min-height:340px; grid-template-columns:1fr; grid-template-rows:auto; }.event-card,.controls-card,.queue-card { display:none; }.floating-chip { display:none; }.trust-strip { justify-content:flex-start; }.trust-strip i { display:none; }.section-block { padding-top:78px; }.feature-grid { grid-template-columns:1fr; }.feature-large { grid-column:auto; }.feature-card { min-height:auto; }.mini-console { grid-template-columns:1fr; }.overlay-showcase { margin-top:78px; padding:25px 18px; }.overlay-art { min-height:620px; }.slider-track { width:110%; left:-5%; overflow:hidden; }.slider-track article { min-width:190px; }.wheel-card { left:50%; bottom:170px; transform:translateX(-50%); }.heart-card { right:50%; bottom:0; transform:translateX(50%); }.platform-choice { padding-top:78px; }.platform-card { min-height:auto; }.final-cta { margin-top:78px; }.site-footer { grid-template-columns:1fr; align-items:start; }.site-footer p,.site-footer nav,.copyright { grid-column:1; grid-row:auto; }.site-footer nav { flex-wrap:wrap; }.referral-panel { grid-template-columns:1fr; }.referral-code-box { min-width:0; }.topbar { align-items:flex-start; flex-direction:column; }.topbar .topnav { position:static; display:flex; margin-left:0; padding:0; border:0; box-shadow:none; background:transparent; }.contact-form-grid,.contact-hero-meta { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; } }

@media (max-width: 1040px) {
  .tts-showcase { grid-template-columns: 1fr; }
  .tts-ui { max-width: 700px; width: 100%; margin: 0 auto; transform: none; }
}

@media (max-width: 620px) {
  .tts-showcase { padding: 22px 16px; }
  .detail-grid { grid-template-columns: 1fr; }
  .detail-grid > div { min-height: auto; }
  .voice-command-card { grid-template-columns: 34px 1fr; }
  .success-badge { grid-column: 2; justify-self: start; }
  .moderation-panel { grid-template-columns: 1fr; }
  .moderation-panel > strong { grid-column: 1; grid-row: auto; justify-self: start; }
  .audience-access { grid-template-columns: 1fr 1fr; }
  .visual-feature-grid .feature-card { min-height: auto; }
}
/* Pricing */
.pricing-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}.pricing-card{display:flex;flex-direction:column;padding:30px;border:1px solid rgba(91,205,255,.26);border-radius:24px;background:#08162d;box-shadow:12px 16px 38px rgba(0,0,0,.34)}.pricing-card.pricing-featured{border-color:rgba(202,91,255,.55);background:#0d1734}.pricing-label{color:#53ddff;font:800 .78rem/1.2 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.13em}.pricing-card h3{margin:14px 0 18px}.pricing-card h3 strong{font-size:clamp(2.5rem,5vw,4rem);line-height:1;color:#f6f9ff}.pricing-card h3 small{color:#acbddc;font-size:1rem}.pricing-card p,.pricing-card li{color:#b8c7e2;line-height:1.65}.pricing-card ul{display:grid;gap:8px;margin:14px 0 26px;padding-left:20px}.pricing-card .button{margin-top:auto}.pricing-note{margin:18px 0 0;text-align:center;color:#aabbd9}@media(max-width:760px){.pricing-grid{grid-template-columns:1fr}.pricing-card{padding:23px}}