:root {
  --bg: #080a24;
  --bg-deep: #050618;
  --surface: #111638;
  --surface-2: #181e4b;
  --surface-3: #252d68;
  --text: #ffffff;
  --muted: rgba(255,255,255,.68);
  --muted-2: rgba(255,255,255,.45);
  --stroke: rgba(255,255,255,.13);
  --teal: #13e6c2;
  --purple: #655ff2;
  --orange: #ff963f;
  --pink: #f64d91;
  --gold: #f4c642;
  --sans: 'Poppins', Arial, sans-serif;
  --mono: 'DM Mono', monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
.site-shell { overflow: hidden; background: var(--bg); }

.nav-wrap { height: 88px; display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(24px,5vw,80px); background: rgba(8,10,36,.88); border-bottom: 1px solid var(--stroke); position: relative; z-index: 5; }
.brand { display: inline-flex; align-items: center; gap: 11px; color: inherit; text-decoration: none; font-size: 14px; font-weight: 800; letter-spacing: .14em; }
.brand-light { font-weight: 400; opacity: .58; }
.brand-mark { display: flex; align-items: end; gap: 2px; width: 22px; height: 20px; }
.brand-mark span { display: block; width: 4px; border-radius: 3px; background: var(--teal); box-shadow: 0 0 10px rgba(19,230,194,.35); }
.brand-mark span:nth-child(1) { height: 8px; }.brand-mark span:nth-child(2) { height: 14px; }.brand-mark span:nth-child(3) { height: 20px; }.brand-mark span:nth-child(4) { height: 11px; }
.site-nav { display: flex; align-items: center; gap: 31px; font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .04em; }
.site-nav a, .footer-links a { color: inherit; text-decoration: none; }
.site-nav a:not(.nav-cta):hover, .footer-links a:hover, .text-link:hover, .back-link:hover { text-decoration: underline; text-underline-offset: 5px; }
.nav-cta { padding: 12px 15px; border: 1px solid var(--teal); border-radius: 14px; color: var(--teal) !important; }
.nav-cta span, .button span { margin-left: 9px; font-size: 15px; }
.menu-toggle { display: none; background: none; color: var(--text); border: 0; font-family: var(--mono); text-transform: uppercase; font-size: 10px; }

.section-grid { display: grid; grid-template-columns: 1fr 1fr; }
.hero { min-height: 650px; background: linear-gradient(135deg,#0a0d31 0%,#121849 56%,#17195c 100%); }
.hero-copy { padding: clamp(70px,10vw,145px) clamp(24px,7vw,115px) 80px; }
.eyebrow { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 27px; line-height: 1.5; color: var(--teal); }
.eyebrow-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--teal); margin-right: 8px; box-shadow: 0 0 12px var(--teal); }
.hero h1, .intent-hero h1 { font-size: clamp(58px,7.3vw,112px); line-height: .94; letter-spacing: -.075em; margin: 0; font-weight: 700; }
.hero h1 em, .intent-hero h1 em, h2 em { font-style: normal; color: var(--teal); letter-spacing: -.075em; }
.hero-lede { font-size: 15px; line-height: 1.7; max-width: 445px; margin: 35px 0 31px; color: var(--muted); }
.hero-actions { display: flex; align-items: center; gap: 28px; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 51px; padding: 0 21px; border-radius: 15px; text-decoration: none; font-size: 12px; font-weight: 700; letter-spacing: -.01em; transition: transform .2s ease, filter .2s ease, box-shadow .2s ease; }
.button:hover { transform: translateY(-2px); filter: brightness(1.08); }
.button-primary, .button-dark { background: linear-gradient(100deg,var(--orange),var(--pink)); color: var(--text); box-shadow: 0 12px 28px rgba(246,77,145,.22); }
.text-link { font-size: 12px; color: var(--text); text-decoration: none; font-weight: 600; }.text-link span { margin-left: 7px; }
.microcopy { font-family: var(--mono); font-size: 10px; color: var(--muted-2); margin-top: 28px; }.mini-star { color: var(--gold); font-size: 13px; margin-right: 7px; }

.hero-art { min-height: 650px; background: radial-gradient(circle at 50% 43%,rgba(101,95,242,.32),transparent 32%),linear-gradient(145deg,#131842,#090b2a); position: relative; display: flex; align-items: center; justify-content: center; isolation: isolate; }
.hero-art:after { content: ''; position: absolute; width: 450px; height: 450px; border: 1px solid rgba(19,230,194,.21); border-radius: 50%; box-shadow: 0 0 0 45px rgba(101,95,242,.08),0 0 0 110px rgba(101,95,242,.06); z-index: -1; }
.orb { position: absolute; border-radius: 50%; filter: blur(1px); }.orb-one { width: 100px; height: 100px; background: var(--purple); opacity: .8; top: 16%; right: 15%; box-shadow: 0 0 70px 25px rgba(101,95,242,.38); }.orb-two { width: 21px; height: 21px; background: var(--teal); bottom: 20%; left: 18%; box-shadow: 0 0 25px 12px rgba(19,230,194,.4); }
.hero-card { color: var(--text); background: rgba(17,22,56,.88); border: 1px solid rgba(19,230,194,.45); border-radius: 24px; width: min(390px,72%); padding: 27px 27px 22px; box-shadow: 0 24px 90px rgba(0,0,0,.4); transform: rotate(-4deg); }
.card-topline, .card-bottomline, .track-meta { display: flex; align-items: center; justify-content: space-between; font-family: var(--mono); font-size: 9px; letter-spacing: .06em; color: var(--muted); }.live-dot { width: 6px; height: 6px; background: var(--teal); border-radius: 50%; box-shadow: 0 0 10px var(--teal); }
.track-title { font-size: 34px; line-height: .96; letter-spacing: -.06em; font-weight: 700; margin: 51px 0 26px; }.track-title span { color: var(--teal); font-weight: 500; }.track-meta { padding-bottom: 16px; }
.waveform { height: 53px; display: flex; align-items: center; gap: 3px; overflow: hidden; }.waveform:before { content: ''; display: block; width: 100%; height: 100%; background: repeating-linear-gradient(90deg,transparent 0 5px,var(--teal) 5px 7px,transparent 7px 12px); opacity: .9; clip-path: polygon(0 49%,2% 35%,4% 60%,6% 22%,8% 71%,10% 39%,12% 58%,14% 17%,16% 70%,18% 46%,20% 56%,22% 27%,24% 80%,26% 44%,28% 54%,30% 25%,32% 70%,34% 36%,36% 59%,38% 19%,40% 68%,42% 38%,44% 55%,46% 22%,48% 74%,50% 43%,52% 58%,54% 25%,56% 69%,58% 36%,60% 53%,62% 18%,64% 66%,66% 40%,68% 57%,70% 26%,72% 72%,74% 42%,76% 55%,78% 21%,80% 68%,82% 38%,84% 60%,86% 23%,88% 73%,90% 43%,92% 58%,94% 25%,96% 64%,98% 40%,100% 52%); }
.card-bottomline { border-top: 1px solid var(--stroke); padding-top: 16px; justify-content: flex-start; gap: 11px; }.play-button { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 10px; background: var(--teal); color: var(--bg); font-size: 9px; }.loader { margin-left: auto; width: 8px; height: 8px; border: 1px solid var(--teal); border-top-color: transparent; border-radius: 50%; animation: spin 1.1s linear infinite; }
.floating-note { position: absolute; padding: 10px 12px; border-radius: 12px; color: var(--teal); font-family: var(--mono); font-size: 10px; border: 1px solid rgba(19,230,194,.35); background: rgba(10,12,40,.72); }.note-one { top: 24%; left: 12%; transform: rotate(-8deg); }.note-two { bottom: 25%; right: 12%; transform: rotate(6deg); }.hero-sticker { position: absolute; bottom: 14%; left: 13%; color: var(--bg); background: var(--gold); width: 82px; height: 82px; border-radius: 22px; display: grid; place-content: center; text-align: center; font-size: 9px; line-height: .9; transform: rotate(12deg); }.hero-sticker strong { font-size: 18px; letter-spacing: -.08em; }

.proof-strip { min-height: 74px; background: var(--surface-2); border-top: 1px solid var(--stroke); border-bottom: 1px solid var(--stroke); display: flex; align-items: center; justify-content: center; gap: clamp(14px,4vw,57px); font-family: var(--mono); font-size: 10px; letter-spacing: .09em; color: var(--muted); }.proof-strip p:last-child { color: var(--teal); }.proof-strip span { font-size: 18px; color: var(--purple); }
.section { padding: clamp(90px,11vw,165px) clamp(24px,8vw,130px); }.section-light { background: linear-gradient(180deg,var(--bg) 0%,#0a0d2c 100%); }.section-dark { background: var(--bg-deep); color: var(--text); }.split-heading { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; }.section-heading h2, .manifesto h2, .final-cta h2, .mini-cta h2 { font-size: clamp(52px,6.2vw,88px); line-height: .96; letter-spacing: -.07em; margin: 0; }.section-intro { align-self: end; max-width: 390px; margin: 0 0 4px; font-size: 15px; line-height: 1.7; color: var(--muted); }
.steps-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-top: 95px; }.step-card { position: relative; padding: 26px 25px 27px; border: 1px solid var(--stroke); border-radius: 22px; background: linear-gradient(145deg,var(--surface-2),var(--surface)); min-height: 270px; }.step-number,.feature-index { font-family: var(--mono); font-size: 10px; color: var(--muted-2); }.step-icon { margin: 34px 0 24px; width: 46px; height: 46px; display: grid; place-items: center; font-weight: 700; border-radius: 14px; }.icon-prompt { background: var(--teal); color: var(--bg); font-size: 19px; box-shadow: 0 0 22px rgba(19,230,194,.18); }.icon-lyrics { font-size: 23px; color: var(--text); background: var(--purple); }.icon-voice { border: 1px solid rgba(19,230,194,.5); color: var(--teal); background: rgba(19,230,194,.1); font-size: 13px; }.step-card h3 { font-size: 18px; margin: 0 0 11px; letter-spacing: -.04em; }.step-card p { font-size: 13px; line-height: 1.65; color: var(--muted); max-width: 280px; margin: 0; }

.feature-section { padding: clamp(90px,11vw,150px) clamp(24px,8vw,130px); background: var(--bg-deep); color: var(--text); position: relative; }.feature-section:after { content: '✦'; position: absolute; right: 9vw; top: 16%; font-size: 100px; color: var(--teal); opacity: .17; }.feature-section .eyebrow { color: var(--teal); }.feature-list { margin-top: 100px; border-top: 1px solid var(--stroke); }.feature-row { display: grid; grid-template-columns: 80px 1.4fr 1fr 30px; gap: 20px; align-items: center; min-height: 97px; color: inherit; text-decoration: none; border-bottom: 1px solid var(--stroke); transition: padding .2s ease,color .2s ease; }.feature-row:hover { padding-left: 12px; color: var(--teal); }.feature-name { font-size: clamp(22px,3vw,38px); font-weight: 600; letter-spacing: -.06em; }.feature-detail { font-family: var(--mono); font-size: 10px; color: var(--muted-2); }.feature-arrow { font-size: 21px; color: var(--teal); text-align: right; }.feature-row-static:hover { padding-left: 0; color: inherit; }
.manifesto { padding: clamp(110px,13vw,190px) 24px; text-align: center; }.manifesto .eyebrow { color: var(--teal); }.manifesto h2 { max-width: 800px; margin: 0 auto; }.manifesto > p:not(.eyebrow) { font-size: 15px; line-height: 1.7; color: var(--muted); max-width: 450px; margin: 35px auto 31px; }
.faq-section { padding-top: 40px; padding-bottom: 140px; display: grid; grid-template-columns: 1fr 1.15fr; gap: 12vw; }.faq-list { border-top: 1px solid var(--stroke); margin-top: 2px; }.faq-list details { border-bottom: 1px solid var(--stroke); padding: 22px 0; }.faq-list summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; font-size: 16px; font-weight: 600; }.faq-list summary::-webkit-details-marker { display: none; }.faq-list summary span { font-size: 24px; font-weight: 400; color: var(--teal); transition: transform .2s; }.faq-list details[open] summary span { transform: rotate(45deg); }.faq-list p { max-width: 520px; margin: 16px 30px 3px 0; color: var(--muted); font-size: 14px; line-height: 1.65; }
.final-cta { position: relative; padding: clamp(100px,13vw,175px) 24px; text-align: center; isolation: isolate; background: linear-gradient(135deg,#11164b,#251e64 57%,#321942); }.final-cta .eyebrow { color: var(--teal); }.final-cta-glow { position: absolute; width: 500px; height: 500px; background: var(--purple); opacity: .25; filter: blur(100px); border-radius: 50%; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: -1; }.final-cta h2 { margin-bottom: 36px; }.site-footer { background: var(--bg-deep); padding: 57px clamp(24px,5vw,80px) 26px; display: grid; grid-template-columns: 1fr auto; gap: 60px; border-top: 1px solid var(--stroke); }.footer-brand p { color: var(--muted-2); font-size: 12px; margin: 18px 0 0; }.footer-links { display: flex; gap: 28px; font-family: var(--mono); font-size: 10px; text-transform: uppercase; align-items: start; color: var(--muted); }.footer-legal { grid-column: 1/-1; padding-top: 20px; margin: 0; border-top: 1px solid var(--stroke); font-family: var(--mono); font-size: 9px; color: var(--muted-2); text-transform: uppercase; }

.intent-hero { padding: clamp(90px,11vw,155px) clamp(24px,13vw,200px) 120px; position: relative; }.intent-hero h1 { font-size: clamp(60px,8vw,120px); max-width: 900px; }.intent-lede { max-width: 500px; color: var(--muted); line-height: 1.7; font-size: 16px; margin: 37px 0 30px; }.intent-visual { max-width: 780px; margin: 105px auto 0; position: relative; min-height: 230px; background: linear-gradient(145deg,var(--surface-3),var(--surface)); border: 1px solid var(--stroke); border-radius: 24px; padding: 34px; overflow: hidden; box-shadow: 0 24px 75px rgba(0,0,0,.22); }.prompt-line { font-family: var(--mono); font-size: 13px; display: flex; gap: 22px; align-items: start; max-width: 650px; }.prompt-label,.intent-result > span,.voice-caption > span,.sheet-label { font-size: 9px; color: var(--muted-2); letter-spacing: .09em; white-space: nowrap; }.waveform-intent { height: 78px; margin: 35px 0 22px; }.intent-result { display: flex; align-items: center; gap: 18px; border-top: 1px solid var(--stroke); padding-top: 17px; font-family: var(--mono); }.intent-result strong { font-family: var(--sans); font-size: 17px; letter-spacing: -.05em; }.result-status { color: var(--teal) !important; margin-left: auto; }.article-section { padding-top: 100px; }.article-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; max-width: 820px; margin: 65px 0 0 auto; }.article-columns p { font-size: 16px; line-height: 1.75; color: var(--muted); margin: 0; }.mini-cta { padding: 100px clamp(24px,8vw,130px); display: flex; align-items: center; justify-content: space-between; gap: 40px; }.mini-cta h2 { font-size: clamp(49px,5.8vw,78px); }
.lyrics-sheet { position: relative; max-width: 620px; margin: 100px auto 0; padding: 33px 42px 38px; background: linear-gradient(145deg,var(--surface-3),var(--surface)); border: 1px solid var(--stroke); border-radius: 22px; box-shadow: 18px 20px 0 rgba(101,95,242,.18); transform: rotate(-2deg); min-height: 240px; }.lyrics-sheet p { font-size: 30px; line-height: 1.15; margin: 28px 0 0; letter-spacing: -.04em; color: var(--text); }.sheet-note { position: absolute; right: 28px; bottom: 20px; color: var(--teal); font-family: var(--mono); font-size: 10px; }.voice-hero { overflow: hidden; }.voice-visual { height: 350px; max-width: 780px; margin: 95px auto -20px; position: relative; background: linear-gradient(145deg,#181e55,#0a0d2e); border: 1px solid var(--stroke); border-radius: 24px; display: grid; place-items: center; }.voice-visual:before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle,#13e6c2 0,rgba(19,230,194,.12) 18%,transparent 44%); opacity: .32; }.voice-circle { width: 128px; height: 128px; border: 1px solid var(--teal); border-radius: 50%; display: grid; place-items: center; position: relative; z-index: 1; box-shadow: 0 0 40px rgba(19,230,194,.15); }.voice-mic { width: 58px; height: 58px; border-radius: 16px; background: var(--teal); color: var(--bg); display: grid; place-items: center; font-size: 25px; }.voice-rings { position: absolute; inset: -35px; border: 1px solid rgba(19,230,194,.32); border-radius: 50%; box-shadow: 0 0 0 35px rgba(19,230,194,.07),0 0 0 70px rgba(101,95,242,.08); }.voice-caption { position: absolute; left: 30px; bottom: 29px; display: flex; flex-direction: column; gap: 6px; color: var(--text); font-family: var(--mono); }.voice-caption strong { font-size: 22px; font-weight: 500; color: var(--teal); }.voice-wave { position: absolute; right: 27px; bottom: 30px; width: 160px; }.voice-wave:before { opacity: .7; }

/* SEO guide pages */
.guides-section { padding: clamp(90px,11vw,150px) clamp(24px,8vw,130px); }.guide-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-top: 70px; }.guide-card { display: flex; flex-direction: column; min-height: 285px; padding: 27px 25px; border: 1px solid var(--stroke); border-radius: 22px; background: linear-gradient(145deg,var(--surface-2),var(--surface)); color: var(--text); text-decoration: none; transition: transform .2s ease,border-color .2s ease; }.guide-card:hover { transform: translateY(-4px); border-color: rgba(19,230,194,.6); }.guide-tag { font-family: var(--mono); font-size: 9px; color: var(--teal); letter-spacing: .1em; }.guide-card h3 { font-size: 22px; line-height: 1.15; letter-spacing: -.055em; margin: 50px 0 13px; }.guide-card p { color: var(--muted); font-size: 13px; line-height: 1.6; margin: 0; }.guide-arrow { font-family: var(--mono); font-size: 10px; color: var(--teal); margin-top: auto; padding-top: 25px; }.guide-index-hero { padding: clamp(90px,12vw,165px) clamp(24px,13vw,200px) 90px; }.guide-index-hero h1 { font-size: clamp(62px,8vw,120px); line-height: .94; letter-spacing: -.075em; margin: 0; }.guide-index-hero h1 em { font-style: normal; color: var(--teal); }.guide-index-list { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; padding: 20px clamp(24px,8vw,130px) 150px; }.guide-card-wide { min-height: 320px; }.guide-card-wide h2 { font-size: clamp(25px,3vw,40px); line-height: 1.02; letter-spacing: -.065em; margin: 55px 0 15px; }.guide-article { padding: 70px clamp(24px,8vw,130px) 150px; }.back-link { display: inline-block; color: var(--muted); font-family: var(--mono); font-size: 10px; text-decoration: none; margin-bottom: 70px; }.guide-article h1 { font-size: clamp(58px,8vw,116px); line-height: .94; letter-spacing: -.075em; margin: 0; max-width: 900px; }.guide-article h1 em { font-style: normal; color: var(--teal); }.article-intro { font-size: 18px; line-height: 1.7; color: var(--muted); max-width: 630px; margin: 38px 0 90px; }.article-body { max-width: 700px; margin-left: min(18vw,240px); }.article-body h2 { font-size: clamp(25px,3vw,38px); line-height: 1.1; letter-spacing: -.06em; margin: 56px 0 17px; }.article-body h2:first-child { margin-top: 0; }.article-body p,.article-body li { font-size: 16px; line-height: 1.8; color: var(--muted); }.article-body strong { color: var(--text); font-weight: 600; }.article-body ul { padding-left: 22px; margin: 18px 0 28px; }.guide-callout { margin: 55px 0 35px; padding: 25px 28px; border: 1px solid rgba(19,230,194,.38); border-radius: 18px; background: rgba(19,230,194,.07); }.guide-callout .eyebrow { margin-bottom: 14px; }.guide-callout p { font-size: 18px; line-height: 1.55; color: var(--text); margin: 0; }.not-found { min-height: 100vh; padding: clamp(80px,12vw,180px) clamp(24px,8vw,130px); }.not-found h1 { font-size: clamp(60px,8vw,120px); line-height: .94; letter-spacing: -.075em; margin: 0; }.not-found h1 em { font-style: normal; color: var(--teal); }.not-found p:not(.eyebrow) { color: var(--muted); max-width: 420px; line-height: 1.7; margin: 30px 0; }.not-found .button { margin-top: 12px; }

@keyframes spin { to { transform: rotate(360deg); } } @keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }.reveal { animation: rise .75s ease both; }.reveal-delay { animation-delay: .12s; }

@media(max-width:800px){
  .nav-wrap{height:72px}.menu-toggle{display:block}.site-nav{display:none;position:absolute;top:72px;left:0;right:0;padding:16px 24px 25px;background:var(--surface);border-bottom:1px solid var(--stroke);flex-direction:column;align-items:stretch;gap:18px}.site-nav.open{display:flex}.site-nav .nav-cta{text-align:center}
  .hero{grid-template-columns:1fr}.hero-copy{padding-top:80px;padding-bottom:75px}.hero-art{min-height:510px}.proof-strip{padding:0 24px;justify-content:space-between;gap:8px;font-size:8px}.proof-strip span{font-size:14px}.section-grid,.split-heading,.faq-section{grid-template-columns:1fr}.split-heading{gap:34px}.steps-grid{grid-template-columns:1fr;margin-top:60px}.step-card{padding:27px 22px;min-height:0}.step-icon{margin-top:25px}.feature-list{margin-top:65px}.feature-row{grid-template-columns:40px 1fr 25px;gap:12px;min-height:88px}.feature-detail{display:none}.feature-row-static{display:grid}.manifesto{padding-top:110px;padding-bottom:110px}.faq-section{gap:60px;padding-top:0}.site-footer{grid-template-columns:1fr;gap:35px}.footer-links{align-items:start;flex-wrap:wrap}.footer-legal{grid-column:auto}.intent-hero{padding:80px 24px}.intent-hero h1{font-size:clamp(57px,16vw,95px)}.intent-visual{margin-top:75px;padding:25px 20px}.prompt-line{font-size:11px;gap:13px}.intent-result{gap:9px;flex-wrap:wrap}.result-status{margin-left:0}.lyrics-sheet{margin-top:75px;padding:27px 25px;min-height:245px}.lyrics-sheet p{font-size:26px}.article-section{padding-top:80px}.article-columns{grid-template-columns:1fr;gap:22px;margin-top:45px}.mini-cta{align-items:start;flex-direction:column;padding-top:80px;padding-bottom:80px}.voice-visual{margin-top:75px;height:300px}.voice-caption{left:20px}.voice-wave{right:18px;width:130px}.guide-grid,.guide-index-list{grid-template-columns:1fr}.guide-index-list{padding-top:0;padding-bottom:100px}.guide-index-hero{padding-bottom:70px}.guide-card{min-height:245px}.guide-card h3,.guide-card-wide h2{margin-top:38px}.guide-article{padding-top:55px}.back-link{margin-bottom:50px}.article-intro{font-size:16px;margin-bottom:65px}.article-body{margin-left:0}.article-body p,.article-body li{font-size:15px}.guide-callout p{font-size:16px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{animation:none}.loader{animation:none}.button{transition:none}}