
:root {
  --bg: #070A0F;
  --bg-soft: #0B1018;
  --panel: #0E141E;
  --panel-2: #111927;
  --line: #263142;
  --line-soft: #182231;
  --text: #E5E7EB;
  --muted: #A5AFBE;
  --dim: #7C8796;
  --cyan: #28D7FF;
  --purple: #B35CFF;
  --green: #5CE1B9;
  --max: 1180px;
}
* { box-sizing: border-box; }
html { color-scheme: dark; scroll-behavior: smooth; }
body { margin:0; background:var(--bg); color:var(--text); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Helvetica,Arial,sans-serif; line-height:1.55; }
a { color:inherit; }
img,svg { max-width:100%; }
.container { width:min(var(--max), calc(100% - 40px)); margin-inline:auto; }
.site-header { position:sticky; top:0; z-index:20; background:rgba(7,10,15,.92); backdrop-filter:blur(18px); border-bottom:1px solid var(--line-soft); }
.nav { min-height:74px; display:flex; align-items:center; gap:28px; }
.brand { display:flex; align-items:center; gap:11px; text-decoration:none; min-width:max-content; }
.brand img { width:38px; height:28px; }
.wordmark { font-weight:760; font-size:1.28rem; letter-spacing:-.025em; }
.wordmark .midi { color:var(--cyan); }
.wordmark .braid { color:var(--purple); }
.nav-links { margin-left:auto; display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.nav-links a { text-decoration:none; color:var(--muted); font-size:.92rem; padding:9px 11px; border-radius:9px; }
.nav-links a:hover,.nav-links a[aria-current="page"] { color:var(--text); background:var(--panel); }
.status-pill { display:inline-flex; align-items:center; gap:8px; border:1px solid #334154; background:#0C121B; color:#C8D0DA; padding:6px 10px; border-radius:999px; font-size:.78rem; font-weight:650; letter-spacing:.025em; }
.status-dot { width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 14px rgba(92,225,185,.45); }
.hero { position:relative; overflow:hidden; padding:92px 0 70px; border-bottom:1px solid var(--line-soft); }
.hero::before { content:""; position:absolute; inset:-15% -10% auto auto; width:620px; height:620px; background:radial-gradient(circle,rgba(40,215,255,.08),transparent 62%); pointer-events:none; }
.hero::after { content:""; position:absolute; inset:auto auto -35% -15%; width:620px; height:620px; background:radial-gradient(circle,rgba(179,92,255,.08),transparent 62%); pointer-events:none; }
.hero-grid { position:relative; display:grid; grid-template-columns:1fr; gap:28px; align-items:start; }
.hero-grid > :first-child { max-width:760px; }
.eyebrow { color:#B8C2CE; text-transform:uppercase; letter-spacing:.18em; font-size:.72rem; font-weight:700; }
h1 { font-size:clamp(3.3rem,7.2vw,6.6rem); line-height:.92; margin:18px 0 24px; letter-spacing:-.055em; }
h1 .midi { color:var(--cyan); } h1 .braid { color:var(--purple); }
.hero-copy { font-size:1.13rem; color:#C3CBD5; max-width:690px; }
.actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:44px; border-radius:11px; padding:10px 16px; text-decoration:none; border:1px solid var(--line); background:var(--panel); font-weight:680; }
.button.primary { background:linear-gradient(110deg,rgba(40,215,255,.16),rgba(179,92,255,.16)); border-color:#3A5269; }
.button:hover { transform:translateY(-1px); border-color:#4B617A; }
.hero-card { background:linear-gradient(180deg,#0D131C,#090D14); border:1px solid #263345; border-radius:24px; padding:18px; box-shadow:0 28px 70px rgba(0,0,0,.25); }
.hero-art-card { padding:0; overflow:hidden; background:#030407; border-color:#233246; box-shadow:0 28px 78px rgba(0,0,0,.38),0 0 44px rgba(40,215,255,.035); width:100%; max-width:none; }
.hero-art-card picture { display:block; }
.hero-art { display:block; width:100%; height:auto; aspect-ratio:1672/941; object-fit:cover; object-position:center; }

.mock-window { border:1px solid #2A394D; border-radius:17px; overflow:hidden; background:#080C12; }
.mock-top { height:34px; display:flex; align-items:center; gap:6px; padding:0 12px; border-bottom:1px solid #202A38; }
.dot { width:8px; height:8px; border-radius:50%; background:#2B3543; }
.mock-content { padding:16px; display:grid; gap:11px; }
.mock-row { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; }
.voice { height:44px; border:1px solid #314154; border-radius:9px; background:#0D1520; }
.voice.on { border-color:#3C9EBA; box-shadow:inset 0 0 0 1px rgba(40,215,255,.16); }
.keybed { height:86px; border:1px solid #2B3748; border-radius:8px; background:repeating-linear-gradient(90deg,#E8EAED 0 14px,#A8B0BA 15px 16px); position:relative; overflow:hidden; }
.keybed::after { content:""; position:absolute; left:42%; top:0; bottom:0; width:34%; background:linear-gradient(90deg,rgba(40,215,255,.10),rgba(179,92,255,.16)); border-left:2px solid var(--cyan); }
.section { padding:78px 0; }
.section.alt { background:#080C12; border-block:1px solid var(--line-soft); }
.section-title { max-width:760px; margin-bottom:34px; }
.section-title h2 { margin:10px 0 12px; font-size:clamp(2rem,4vw,3.2rem); letter-spacing:-.04em; }
.section-title p { margin:0; color:var(--muted); font-size:1.04rem; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.card { border:1px solid var(--line-soft); border-radius:17px; background:linear-gradient(180deg,var(--panel),#0A0F16); padding:22px; }
.card h3 { margin:10px 0 8px; font-size:1.13rem; }
.card p { margin:0; color:var(--muted); }
.icon-box { width:38px; height:38px; border-radius:10px; display:grid; place-items:center; background:#111A26; border:1px solid #28384B; color:var(--cyan); font-weight:760; }
.stat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:24px; }
.stat { padding:18px; border:1px solid var(--line-soft); border-radius:14px; background:#0A0F16; }
.stat strong { display:block; font-size:1.65rem; line-height:1.15; }
.stat span { color:var(--dim); font-size:.88rem; }
.split { display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start; }
.checks { display:grid; gap:12px; }
.check { display:flex; gap:10px; color:#C5CDD7; }
.check::before { content:"✓"; color:var(--green); font-weight:800; }
.page-hero { padding:68px 0 44px; border-bottom:1px solid var(--line-soft); }
.page-hero h1 { font-size:clamp(2.7rem,6vw,4.8rem); }
.page-hero p { max-width:760px; color:var(--muted); font-size:1.08rem; }
.prose { max-width:840px; }
.prose h2 { margin-top:42px; font-size:1.65rem; letter-spacing:-.025em; }
.prose h3 { margin-top:28px; }
.prose p,.prose li { color:#C0C8D2; }
.prose ul,.prose ol { padding-left:1.25rem; }
.notice { border:1px solid #35465B; border-left:3px solid var(--cyan); border-radius:12px; background:#0B111A; padding:16px 18px; color:#C8D0DB; }
.kicker { font-size:.78rem; text-transform:uppercase; letter-spacing:.15em; color:var(--dim); font-weight:700; }
.contact-card { margin-top:24px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:18px; padding:20px; border:1px solid var(--line); background:var(--panel); border-radius:15px; }
.contact-card a { color:var(--cyan); font-weight:700; }
.release { border-left:2px solid var(--purple); padding-left:18px; margin:28px 0; }
.site-footer { border-top:1px solid var(--line-soft); padding:32px 0 40px; background:#06080C; }
.footer-grid { display:flex; flex-wrap:wrap; justify-content:space-between; gap:24px; align-items:center; }
.footer-brand { display:flex; align-items:center; gap:10px; }
.footer-brand img { width:30px; }
.footer-links { display:flex; flex-wrap:wrap; gap:16px; }
.footer-links a { color:var(--dim); text-decoration:none; font-size:.88rem; }
.footer-meta { width:100%; color:#66717F; font-size:.8rem; padding-top:10px; }
@media (max-width:900px){ .hero-grid,.split{grid-template-columns:1fr;} .hero{padding-top:68px;} .grid-3{grid-template-columns:1fr 1fr;} .stat-grid{grid-template-columns:1fr 1fr;} .hero-grid > :first-child{max-width:none;} }
@media (max-width:700px){ .container{width:min(100% - 28px,var(--max));}.nav{align-items:flex-start;padding:14px 0;gap:12px;flex-wrap:wrap}.nav-links{width:100%;margin-left:0;gap:3px}.nav-links a{padding:7px 9px}.status-pill{margin-left:auto}.grid-3{grid-template-columns:1fr}.hero{padding:58px 0 52px}.section{padding:56px 0}.mock-row{grid-template-columns:repeat(2,1fr)} }
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.button:hover{transform:none}}

/* Performance imagery and story sections */
.performance-showcase{padding:0 0 78px;border-bottom:1px solid var(--line-soft);background:linear-gradient(180deg,#070A0F 0%,#080C12 100%)}
.performance-frame{position:relative;overflow:hidden;border:1px solid #2A394D;border-radius:24px;background:#05070A;box-shadow:0 34px 90px rgba(0,0,0,.42),0 0 55px rgba(40,215,255,.045)}
.performance-frame::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.025);border-radius:inherit}
.performance-frame img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:center}
.performance-caption{display:grid;grid-template-columns:1.05fr .95fr;gap:42px;align-items:end;padding:28px 6px 0}
.performance-caption h2{margin:9px 0 0;font-size:clamp(2rem,4vw,3.25rem);line-height:1.05;letter-spacing:-.04em}.performance-caption p{margin:0;color:var(--muted);font-size:1.04rem}
.workflow{position:relative;overflow:hidden}.workflow::before{content:"";position:absolute;width:560px;height:560px;right:-220px;top:-180px;background:radial-gradient(circle,rgba(179,92,255,.07),transparent 66%);pointer-events:none}
.flow-grid{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.flow-card{min-height:210px;padding:24px;border:1px solid var(--line-soft);border-radius:18px;background:linear-gradient(145deg,#0E141E,#090D14)}
.flow-card span{display:inline-grid;place-items:center;width:38px;height:30px;border:1px solid #34475D;border-radius:999px;color:var(--cyan);font-size:.76rem;font-weight:800;letter-spacing:.08em}.flow-card:nth-child(2) span{color:#D49AFF}.flow-card:nth-child(3) span{color:var(--green)}
.flow-card h3{margin:28px 0 8px;font-size:1.35rem}.flow-card p{margin:0;color:var(--muted)}.stage-quote{margin-top:18px;padding:18px 22px;border:1px solid #26374A;border-radius:14px;background:linear-gradient(90deg,rgba(40,215,255,.06),rgba(179,92,255,.06));color:#C7D0DB}.stage-quote strong{color:var(--text)}
.final-cta{padding-top:64px}.final-cta-inner{display:flex;align-items:flex-end;justify-content:space-between;gap:36px;padding:32px;border:1px solid #304158;border-radius:22px;background:linear-gradient(120deg,rgba(40,215,255,.07),rgba(179,92,255,.07))}.final-cta h2{margin:8px 0 8px;font-size:clamp(1.9rem,3.5vw,2.8rem);letter-spacing:-.035em}.final-cta p{margin:0;max-width:690px;color:var(--muted)}.final-cta .actions{margin-top:0;flex-shrink:0}
@media(max-width:900px){.performance-caption{grid-template-columns:1fr;gap:14px}.flow-grid{grid-template-columns:1fr}.flow-card{min-height:0}.final-cta-inner{align-items:flex-start;flex-direction:column}.final-cta .actions{margin-top:4px}}
@media(max-width:700px){.performance-showcase{padding-bottom:56px}.performance-frame{border-radius:16px}.performance-caption{padding-top:22px}.final-cta-inner{padding:22px}}
