
:root{
  --bg:#0a0b0f;--panel:#101219;--panel2:#151824;--line:#24222e;--text:#f4f7fb;
  --muted:#94a3b8;--blue:#8b7bff;--blue2:#b4a9ff;--green:#22c55e;--orange:#f97316;
  --radius:22px;--max:1180px
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,sans-serif;line-height:1.6;overflow-x:hidden}
body:before{content:"";position:fixed;inset:0;background:radial-gradient(circle at 70% 5%,rgba(139,123,255,.16),transparent 30%),radial-gradient(circle at 10% 45%,rgba(139,123,255,.08),transparent 25%);pointer-events:none;z-index:-2}
.noise{position:fixed;inset:0;opacity:.025;z-index:-1;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E")}
a{color:inherit;text-decoration:none}.section{width:min(var(--max),calc(100% - 40px));margin:auto;padding:110px 0}.site-header{height:78px;padding:0 max(24px,calc((100vw - var(--max))/2));display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(148,163,184,.15);position:sticky;top:0;background:rgba(7,10,15,.75);backdrop-filter:blur(18px);z-index:20}
.brand{display:flex;align-items:center;gap:10px;font-family:"Space Grotesk";font-size:21px;font-weight:700}.brand-mark{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:linear-gradient(135deg,var(--blue),#8b7bff);box-shadow:0 8px 26px rgba(139,123,255,.35);font-size:13px}.brand-mark.large{width:58px;height:58px;border-radius:18px;margin:auto;font-size:21px}
nav{display:flex;gap:30px;color:#bdc8d8;font-size:14px}nav a:hover{color:white}.button{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:linear-gradient(135deg,#9d8fff,#8b7bff);border:1px solid #b4a9ff;color:white;padding:14px 21px;border-radius:12px;font-weight:700;box-shadow:0 12px 30px rgba(139,123,255,.22);transition:.2s;cursor:pointer}.button:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(139,123,255,.32)}.button-small{padding:9px 15px;font-size:13px}.button-ghost{background:#151824;border-color:#2b2838;box-shadow:none;color:#dbe7f6}
.hero{min-height:750px;display:grid;grid-template-columns:.9fr 1.3fr;gap:55px;align-items:center;padding-top:95px}.hero h1,.section h2{font-family:"Space Grotesk";letter-spacing:-.045em;line-height:1.04}.hero h1{font-size:clamp(48px,5.4vw,76px);margin:18px 0 24px}.hero h1 em{font-style:normal;color:var(--blue2)}.hero-text{font-size:18px;color:#a9b6c8;max-width:590px}.eyebrow{display:flex;align-items:center;gap:9px;text-transform:uppercase;letter-spacing:.13em;font-size:12px;font-weight:700;color:#b4a9ff}.eyebrow span{width:24px;height:2px;background:var(--blue)}.hero-actions{display:flex;gap:12px;margin:32px 0 24px}.trust-row{display:flex;gap:20px;flex-wrap:wrap;color:#93a4ba;font-size:13px}.hero-visual{position:relative}.glow{position:absolute;inset:8% 10%;background:#8b7bff;filter:blur(100px);opacity:.24}.window{position:relative;background:#0a0b0f;border:1px solid #2b2838;border-radius:18px;padding:8px;box-shadow:0 35px 90px rgba(0,0,0,.55);overflow:hidden}.window-top{height:34px;display:flex;align-items:center;gap:7px;padding:0 10px;color:#74859c;font-size:11px}.window-top i{width:8px;height:8px;border-radius:50%;background:#334155}.window-top span{margin-left:8px}.window img{display:block;width:100%;border-radius:11px}.floating-card{position:absolute;background:rgba(12,19,29,.94);border:1px solid #302c40;border-radius:14px;padding:12px 16px;box-shadow:0 18px 35px rgba(0,0,0,.4)}.floating-card b,.floating-card span{display:block}.floating-card b{font-size:18px}.floating-card span{font-size:11px;color:#8293a8}.card-a{right:-24px;top:16%}.card-b{left:-20px;bottom:10%}.logo-strip{border-block:1px solid rgba(148,163,184,.14);min-height:88px;display:flex;align-items:center;justify-content:center;gap:44px;color:#8290a4;font-size:12px;letter-spacing:.12em}.logo-strip b{color:#b9c4d3}
.section-heading{max-width:720px;margin-bottom:48px}.section-heading.centered{text-align:center;margin-inline:auto}.section-heading.centered .eyebrow{justify-content:center}.section h2{font-size:clamp(36px,4vw,56px);margin:17px 0}.section-heading p{color:#96a6ba;font-size:17px}.before-after{display:grid;grid-template-columns:1fr 70px 1fr;align-items:center}.process-card{border:1px solid var(--line);border-radius:var(--radius);padding:32px;min-height:390px;background:linear-gradient(145deg,#101219,#0b0c12)}.process-card.active{border-color:#5b4fd6;box-shadow:inset 0 0 50px rgba(139,123,255,.05),0 25px 70px rgba(0,0,0,.32)}.process-label{font-size:12px;letter-spacing:.14em;color:#7f91a8;font-weight:700}.process-list{display:grid;grid-template-columns:38px 1fr;margin:35px 0}.process-list span{color:#6a659a;font-size:12px}.process-list p{margin:0 0 24px;color:#a7b3c3}.process-card strong{color:#e8edf5}.big-play{width:68px;height:68px;border-radius:20px;background:#8b7bff;display:grid;place-items:center;margin:52px 0 26px;box-shadow:0 18px 44px rgba(139,123,255,.3)}.process-card.active h3{font-size:28px;margin:0 0 10px}.process-card.active p{color:#9aabc0;max-width:430px}.process-card.active strong{display:block;margin-top:50px;color:#b4a9ff}.arrow-orbit{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;margin:auto;border:1px solid #2d2a3c;background:#14131e;color:#b4a9ff;font-size:22px}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.steps article{position:relative;border:1px solid var(--line);background:#0d0f16;border-radius:18px;padding:24px;min-height:260px}.steps article>span{color:#585575;font-size:11px;font-weight:700}.step-icon{margin:35px 0 22px;width:48px;height:48px;display:grid;place-items:center;border-radius:14px;background:#1a1730;color:#b4a9ff;font-size:23px}.steps h3{font-size:18px}.steps p,.feature p,.mode-card p{color:#8fa0b5;font-size:14px}
.showcase,.local-section{display:grid;grid-template-columns:.85fr 1.35fr;gap:60px;align-items:center}.showcase-copy ul,.mode-card ul{list-style:none;padding:0}.showcase-copy li,.mode-card li{margin:13px 0;color:#b3c0d0}.showcase-copy li:before,.mode-card li:before{content:"\2713";color:#9d8fff;margin-right:10px}.showcase-window{transform:perspective(1400px) rotateY(-4deg)}.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.feature{border:1px solid var(--line);border-radius:18px;padding:26px;background:linear-gradient(150deg,#0d141e,#0a0b0f);min-height:220px}.feature-wide{grid-column:span 2;display:flex;justify-content:space-between;align-items:center;gap:30px}.feature-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:#1a1730;color:#b4a9ff;margin-bottom:25px}.feature h3{font-size:19px}.mini-flow{display:flex;align-items:center;gap:10px;white-space:nowrap}.mini-flow b{background:#161426;border:1px solid #272536;border-radius:10px;padding:10px 14px;font-size:12px}.mini-flow i{color:#8479c4}
.mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;max-width:980px;margin:auto}.mode-card{border:1px solid var(--line);border-radius:24px;padding:34px;background:#0d0f16;position:relative}.mode-card.recommended{border-color:#6f63c9;box-shadow:0 30px 80px rgba(139,123,255,.12)}.recommended-badge{position:absolute;top:-14px;right:24px;background:#8b7bff;border:1px solid #b4a9ff;border-radius:999px;padding:6px 12px;font-size:10px;font-weight:800;letter-spacing:.11em}.mode-top{display:flex;justify-content:space-between;align-items:center}.mode-top span{color:#b4a9ff;font-size:12px;font-weight:800;letter-spacing:.12em}.mode-top small{color:#687a91}.mode-card h3{font-family:"Space Grotesk";font-size:30px;line-height:1.15;margin:35px 0 15px}.mode-card .button{width:100%;margin-top:22px}
.local-section{grid-template-columns:1.35fr .85fr}.settings-window{transform:perspective(1400px) rotateY(4deg)}.local-copy p{color:#96a6ba}.stat-pills{display:flex;flex-wrap:wrap;gap:9px;margin-top:25px}.stat-pills span{border:1px solid #2b2838;background:#151824;border-radius:999px;padding:8px 12px;font-size:12px;color:#b5c3d3}
.faq{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px}.faq-list details{border-bottom:1px solid #242231;padding:20px 0}.faq-list summary{font-weight:700;cursor:pointer;list-style:none}.faq-list summary:after{content:"+";float:right;color:#b4a9ff;font-size:20px}.faq-list details[open] summary:after{content:"\2013"}.faq-list p{color:#91a2b7;max-width:650px}
.final-cta{position:relative;text-align:center;border:1px solid #3a3560;border-radius:30px;padding:75px 30px;margin-bottom:90px;background:linear-gradient(145deg,#131120,#0a0b0f);overflow:hidden}.cta-glow{position:absolute;width:500px;height:240px;background:#8b7bff;filter:blur(100px);opacity:.15;left:50%;transform:translateX(-50%);top:-90px}.final-cta h2{font-size:clamp(40px,5vw,64px);position:relative}.final-cta p{color:#9cacbf;max-width:620px;margin:0 auto 28px}.signup{display:flex;max-width:560px;margin:auto;gap:10px}.signup input{flex:1;background:#0b0c12;border:1px solid #2a2838;color:white;border-radius:12px;padding:0 16px;min-width:0}.final-cta small{display:block;color:#5f7086;margin-top:15px}.price{display:flex;flex-direction:column;align-items:center;gap:7px;margin:4px 0 24px}.price-badge{font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:#c9c0ff;background:rgba(139,123,255,.16);border:1px solid #3a3560;border-radius:999px;padding:4px 12px}.price-amount{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:56px;line-height:1;color:#fff}.price-amount .was{color:#5f7086;text-decoration:line-through;font-size:.5em;font-weight:600;margin-right:8px;vertical-align:middle}.price-meta{color:#8494a8;font-size:13px;letter-spacing:.3px}.cta-buttons{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}.cta-note{max-width:560px;margin-left:auto;margin-right:auto}.buy-steps{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;max-width:760px;margin:26px auto 4px}.buy-step{display:flex;align-items:center;gap:10px;font-size:13px;color:#9cacbf;text-align:left}.buy-step p{margin:0}.buy-step b{color:#e6ecf3}.buy-step span{flex-shrink:0;width:26px;height:26px;border-radius:999px;display:grid;place-items:center;font-weight:700;font-size:13px;color:#c9c0ff;background:rgba(139,123,255,.16);border:1px solid #3a3560}
.footer-links{display:flex;gap:16px;flex-wrap:wrap}.footer-links a{color:#8ea0b5;text-decoration:none;font-size:13px}.footer-links a:hover{color:#fff}
.legal{max-width:780px;margin:0 auto;padding:56px 22px 90px}.legal .back{display:inline-block;margin-bottom:22px;color:#b4a9ff;text-decoration:none;font-size:14px}.legal h1{font-size:clamp(30px,4vw,40px);margin:0 0 6px}.legal .updated{color:#5f7086;font-size:13px;margin:0 0 32px}.legal h2{font-size:21px;margin:32px 0 10px;color:#eef2f6}.legal p,.legal li{color:#c3ccd6;line-height:1.72;font-size:15px}.legal ul,.legal ol{padding-left:20px}.legal li{margin:5px 0}.legal a{color:#b4a9ff}.legal strong{color:#eef2f6}.legal .note{background:#131120;border:1px solid #3a3560;border-radius:12px;padding:14px 16px;color:#9cacbf;font-size:13.5px}
footer{width:min(var(--max),calc(100% - 40px));margin:auto;padding:30px 0 50px;border-top:1px solid rgba(148,163,184,.14);display:flex;justify-content:space-between;align-items:center;color:#68798f;font-size:12px}footer .brand{color:#d8e2ef}
@media(max-width:980px){nav{display:none}.hero,.showcase,.local-section,.faq{grid-template-columns:1fr}.hero{padding-top:65px}.hero-copy{text-align:center}.hero-copy .eyebrow,.trust-row{justify-content:center}.hero-text{margin-inline:auto}.hero-actions{justify-content:center}.steps,.feature-grid{grid-template-columns:1fr 1fr}.feature-wide{grid-column:span 2}.before-after{grid-template-columns:1fr}.arrow-orbit{transform:rotate(90deg);margin:18px auto}.logo-strip{gap:20px;flex-wrap:wrap;padding:20px}.showcase-window,.settings-window{transform:none}.faq{gap:20px}}
@media(max-width:640px){.section{width:min(100% - 26px, var(--max));padding:75px 0}.site-header{padding:0 14px}.site-header>.button{display:none}.hero{display:block;min-height:auto}.hero h1{font-size:44px}.hero-visual{margin-top:50px}.floating-card{display:none}.hero-actions,.signup,.cta-buttons{flex-direction:column}.button{width:100%}.trust-row{gap:10px}.steps,.feature-grid,.mode-grid{grid-template-columns:1fr}.feature-wide{grid-column:auto;display:block}.mini-flow{margin-top:20px;flex-wrap:wrap}.logo-strip b{font-size:10px}.process-card{min-height:auto}.mode-card h3{font-size:25px}.showcase,.local-section{gap:30px}.local-section .settings-window{order:2}.faq{display:block}.final-cta{border-radius:20px}.signup input{min-height:50px}footer{flex-direction:column;gap:15px;text-align:center}}

/* AI toolkit: 2x2 layout for its four cards; stacks on mobile. */
.feature-grid.ai-grid{grid-template-columns:repeat(2,1fr);max-width:860px;margin-inline:auto}
@media(max-width:720px){.feature-grid.ai-grid{grid-template-columns:1fr}}

/* ---- Animated output demo (karaoke word-pop in a phone frame) ---- */
.demo-band{display:grid;grid-template-columns:1fr 300px;gap:56px;align-items:center}
.demo-phone{width:260px;height:462px;justify-self:center;border-radius:30px;border:1px solid #262437;overflow:hidden;position:relative;background:linear-gradient(165deg,#33465f,#141d29 70%);box-shadow:0 34px 80px -22px rgba(0,0,0,.65)}
.demo-phone:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 40%,rgba(120,150,190,.35),transparent 46%)}
.demo-subject{position:absolute;left:50%;top:30%;width:150px;height:150px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(circle at 45% 40%,#5b7a9a,#3a4d68 62%,transparent 74%)}
.demo-wm{position:absolute;top:14px;right:16px;font-size:12px;font-weight:700;color:rgba(255,255,255,.8);text-shadow:0 1px 2px rgba(0,0,0,.6)}
.demo-caption{position:absolute;left:50%;bottom:12%;transform:translateX(-50%);width:88%;text-align:center;font-family:Impact,"Arial Narrow",sans-serif;font-weight:800;font-size:30px;line-height:1.15;letter-spacing:.5px;text-shadow:-1.6px -1.6px 0 #000,1.6px -1.6px 0 #000,-1.6px 1.6px 0 #000,1.6px 1.6px 0 #000}
.demo-caption .w{color:#fff;display:inline-block;animation:wpop 3.6s infinite}
.demo-caption .w2{animation-delay:.55s}
.demo-caption .w3{animation-delay:1.1s}
.demo-caption .w4{animation-delay:1.65s}
@keyframes wpop{0%{color:#fff;transform:scale(1)}6%{color:#ffe600;transform:scale(1.18)}18%{color:#fff;transform:scale(1)}100%{color:#fff;transform:scale(1)}}
.demo-badge{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:#7fd7a0;background:rgba(34,197,94,.1);border:1px solid #1f5137;border-radius:999px;padding:5px 12px;margin-bottom:6px}
@media(max-width:860px){.demo-band{grid-template-columns:1fr}.demo-phone{margin-top:8px}}
@media(prefers-reduced-motion:reduce){.demo-caption .w{animation:none}.demo-caption .w2{color:#ffe600}}
