@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700&family=Inter:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap");

:root { color-scheme:dark; --ink:#f2f6fc; --muted:#8da4c1; --black:#030507; --surface:#080c11; --raised:#0d1219; --line:#0b3d5e; --blue:#14c7ff; --electric:#058fff; --purple:#a94fff; }
* { box-sizing:border-box; }
html { background:var(--black); scroll-behavior:smooth; scrollbar-width:none; -ms-overflow-style:none; }
body { min-width:320px; margin:0; color:var(--ink); background:var(--black); font-family:Inter,system-ui,sans-serif; }
html::-webkit-scrollbar,body::-webkit-scrollbar { display:none; width:0; height:0; }
main { overflow:hidden; }
section,footer { padding-right:max(24px,calc((100vw - 1200px)/2)); padding-left:max(24px,calc((100vw - 1200px)/2)); }
.home-link { position:absolute; top:28px; right:max(24px,calc((100vw - 1200px)/2)); z-index:3; padding:10px 14px; color:var(--ink); background:rgba(3,5,7,.68); border:1px solid rgba(20,199,255,.32); border-radius:7px; font:700 11px/1 "Space Mono",monospace; letter-spacing:.1em; text-decoration:none; text-transform:uppercase; transition:color .18s ease,border-color .18s ease,transform .18s ease; }.home-link:hover,.home-link:focus-visible { color:var(--blue); border-color:var(--blue); outline:none; transform:translateY(-2px); }
h1,h2,p { margin-top:0; }
.eyebrow { margin-bottom:10px; color:var(--blue); font:700 11px/1.25 "Space Mono",monospace; letter-spacing:.16em; text-transform:uppercase; }
h1 { margin-bottom:18px; font-family:"Barlow Condensed",Inter,sans-serif; font-size:clamp(58px,7vw,92px); line-height:.88; letter-spacing:-.025em; text-transform:uppercase; }
h2 { margin-bottom:16px; font-size:clamp(29px,3.2vw,43px); line-height:1; letter-spacing:-.045em; }
.hero { position:relative; display:grid; grid-template-columns:minmax(0,.94fr) minmax(450px,1.06fr); gap:64px; align-items:center; min-height:720px; padding-top:112px; padding-bottom:86px; background:radial-gradient(circle at 82% 20%,rgba(20,199,255,.11),transparent 27%),radial-gradient(circle at 5% 90%,rgba(169,79,255,.1),transparent 33%),var(--black); }
.hero::after { position:absolute; right:-180px; bottom:-250px; z-index:0; width:550px; height:550px; content:""; border:1px solid rgba(20,199,255,.18); border-radius:50%; box-shadow:0 0 0 44px rgba(20,199,255,.025),0 0 0 88px rgba(20,199,255,.02); }
.hero-copy,.hero-video { position:relative; z-index:1; }
.brand-line,.title-line { display:flex; align-items:center; gap:14px; }
.brand-line > img { width:44px; height:44px; object-fit:cover; border-radius:50%; }
.brand-line .eyebrow { margin:0; }
.title-line { margin-top:20px; }.title-line > img { width:58px; height:58px; object-fit:cover; border:1px solid rgba(20,199,255,.35); border-radius:14px; box-shadow:0 0 25px rgba(20,199,255,.15); }
.title-line h1 { margin:0; }
.lead { max-width:580px; margin-bottom:24px; color:var(--muted); font-size:19px; line-height:1.52; }
.hero-meta { display:flex; flex-wrap:wrap; gap:9px; margin-bottom:25px; }.hero-meta span { padding:9px 11px; color:#b9cff0; background:rgba(13,18,25,.74); border:1px solid rgba(20,199,255,.22); border-radius:6px; font:400 10px/1 "Space Mono",monospace; letter-spacing:.07em; text-transform:uppercase; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:14px 19px; color:#020407; background:var(--blue); border:1px solid var(--blue); border-radius:7px; font:700 12px/1 Inter,sans-serif; letter-spacing:.07em; text-decoration:none; text-transform:uppercase; transition:transform .18s ease,box-shadow .18s ease,filter .18s ease; }.button:hover,.button:focus-visible { outline:none; filter:brightness(1.08); box-shadow:0 7px 28px rgba(20,199,255,.26); transform:translateY(-2px); }.button img { width:18px; height:18px; object-fit:contain; }
.hero-video { margin:0; padding:12px; overflow:hidden; background:linear-gradient(145deg,rgba(15,28,43,.92),rgba(4,7,11,.95)); border:1px solid rgba(20,199,255,.48); border-radius:18px; box-shadow:0 34px 80px rgba(0,0,0,.4); }.hero-video video { display:block; width:100%; aspect-ratio:16/9; object-fit:cover; background:#020306; border-radius:9px; }.hero-video figcaption,.feature-shot figcaption { padding:11px 3px 1px; color:var(--muted); font:400 11px/1.45 "Space Mono",monospace; }
.proof { padding-top:82px; padding-bottom:82px; background:var(--surface); border-top:1px solid rgba(20,199,255,.42); }.section-heading { display:flex; justify-content:space-between; gap:60px; align-items:flex-end; margin-bottom:32px; }.section-heading > div { max-width:655px; }.section-heading > p { max-width:390px; margin:0; color:var(--muted); font-size:15px; line-height:1.5; }
.feature-shot { min-width:0; margin:0; padding:11px; overflow:hidden; background:var(--black); border:1px solid var(--line); border-radius:14px; }.feature-shot img { display:block; width:100%; height:auto; border-radius:7px; }.feature-shot-wide { margin-bottom:18px; box-shadow:0 22px 48px rgba(0,0,0,.3); }.screens { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(220px,.65fr); gap:18px; align-items:start; }.progress-shot { margin-top:34px; }.progress-shot figcaption { font-size:10px; }
.capabilities { display:grid; grid-template-columns:.8fr 1.2fr; gap:80px; align-items:start; padding-top:82px; padding-bottom:82px; background:linear-gradient(105deg,#05090e,#0a1017 65%,#070b11); }.capability-copy p:not(.eyebrow),.studio-copy p:not(.eyebrow),.musehub-copy > p:not(.eyebrow) { max-width:480px; margin-bottom:0; color:var(--muted); font-size:16px; line-height:1.55; }.capability-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:0; margin:0; list-style:none; }.capability-grid li { display:flex; align-items:center; min-height:54px; padding:14px 16px; background:rgba(3,5,7,.65); border:1px solid rgba(20,199,255,.16); border-radius:7px; font-size:14px; }.capability-grid li::before { width:7px; height:7px; margin-right:11px; content:""; background:var(--blue); border-radius:50%; box-shadow:0 0 12px rgba(20,199,255,.65); }
.studio { display:grid; grid-template-columns:.7fr 1.3fr; gap:70px; align-items:center; padding-top:72px; padding-bottom:72px; background:var(--black); }.cassette-art { display:block; width:100%; border:1px solid rgba(20,199,255,.22); border-radius:14px; box-shadow:0 30px 55px rgba(0,0,0,.45); }
.musehub { display:grid; grid-template-columns:minmax(240px,.62fr) minmax(0,1.38fr); gap:68px; align-items:center; padding-top:86px; padding-bottom:86px; background:radial-gradient(circle at 6% 58%,rgba(169,79,255,.26),transparent 26%),linear-gradient(115deg,#09060f,#12111a 58%,#070910); }.musehub-promo { max-width:300px; padding:10px; background:#14053c; border:1px solid rgba(196,147,255,.45); border-radius:16px; box-shadow:0 22px 58px rgba(0,0,0,.3); }.musehub-promo img { display:block; width:100%; border-radius:9px; }.musehub-marks { display:flex; align-items:center; gap:12px; margin-bottom:24px; }.musehub-marks span { display:grid; place-items:center; height:54px; padding:8px 13px; border-radius:8px; }.musehub-marks img { display:block; max-height:34px; max-width:130px; object-fit:contain; }.purple-mark { min-width:64px; background:#07050d; border:1px solid rgba(196,147,255,.48); }.dark-mark { width:96px; height:78px !important; background:#f1f1f1; }.dark-mark img { max-height:62px; }
.musehub-actions { display:flex; flex-wrap:wrap; align-items:center; gap:20px; margin-top:27px; }.musehub-actions .button { background:#e6d1ff; border-color:#e6d1ff; }.text-link { color:#f7eeff; font:600 13px/1.4 Inter,sans-serif; text-decoration-color:rgba(247,238,255,.6); text-underline-offset:4px; }.text-link:hover,.text-link:focus-visible { color:#fff; outline:none; }
footer { display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:140px; color:var(--muted); background:#020305; border-top:1px solid rgba(20,199,255,.14); font-size:14px; } footer img { width:54px; height:54px; object-fit:cover; border-radius:50%; }.footer-brand { display:flex; align-items:center; gap:16px; }.footer-brand a { color:var(--blue); font:600 14px/1.3 "Space Mono",monospace; text-decoration:none; }.footer-brand a:hover,.footer-brand a:focus-visible { color:var(--ink); outline:none; text-decoration:underline; text-underline-offset:4px; }
@media (max-width:900px) { .hero,.capabilities,.studio,.musehub { grid-template-columns:1fr; gap:42px; }.hero { min-height:auto; padding-top:78px; }.section-heading { flex-direction:column; align-items:start; gap:16px; }.section-heading > p { max-width:540px; }.cassette-art,.musehub-promo { max-width:620px; }.musehub-promo { width:100%; }.musehub { background:linear-gradient(160deg,#09060f,#12111a 55%,#070910); } }
@media (max-width:560px) { section,footer { padding-right:20px; padding-left:20px; }.home-link { top:18px; right:20px; }.screens,.capability-grid { grid-template-columns:1fr; }.progress-shot { margin-top:0; }.hero { gap:34px; padding-bottom:62px; }.lead { font-size:17px; }.title-line > img { width:48px; height:48px; }.brand-line > img { width:36px; height:36px; } footer { flex-direction:column; align-items:flex-start; justify-content:center; }.footer-brand { gap:12px; }.footer-brand a { font-size:12px; } }


/* Final review: subtle pointer-reactive depth for Music Meter product cards */
.mm-tilt-card{
  --mm-rx:0deg;
  --mm-ry:0deg;
  --mm-lift:0px;
  transform:
    perspective(1100px)
    rotateX(var(--mm-rx))
    rotateY(var(--mm-ry))
    translateY(var(--mm-lift));
  transform-style:preserve-3d;
  transition:transform .18s ease-out,box-shadow .22s ease,border-color .22s ease;
  will-change:transform;
}
.mm-tilt-card:hover{
  --mm-lift:-3px;
}
.capability-grid .mm-tilt-card{
  transform:
    perspective(850px)
    rotateX(var(--mm-rx))
    rotateY(var(--mm-ry))
    translateY(var(--mm-lift));
}
@media (prefers-reduced-motion:reduce){
  .mm-tilt-card{
    transform:none!important;
    transition:none!important;
  }
}