:root { --bg:#0b0d12; --panel:#141821; --line:#28303c; --text:#f4f7fb; --muted:#9ca7b7; --cyan:#68f0d0; --blue:#79a9ff; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:radial-gradient(circle at 75% 0%,#19233a 0,transparent 34rem),var(--bg); color:var(--text); font:16px/1.6 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
a { color:inherit; text-decoration:none; }
.site-header { align-items:center; display:flex; justify-content:space-between; margin:auto; max-width:1180px; padding:25px 28px; }
.brand { align-items:center; display:flex; font-weight:700; gap:10px; letter-spacing:-.02em; }
.brand-mark { align-items:center; background:linear-gradient(135deg,var(--cyan),var(--blue)); border-radius:10px; color:#071219; display:flex; font-size:12px; height:32px; justify-content:center; width:32px; }
nav { display:flex; gap:24px; } nav a { color:var(--muted); font-size:14px; } nav a:hover { color:var(--text); }
main { margin:auto; max-width:1180px; padding:35px 28px 80px; }
.hero { align-items:center; display:grid; gap:70px; grid-template-columns:1fr 1.08fr; min-height:610px; }
.eyebrow { color:var(--cyan); font-size:12px; font-weight:700; letter-spacing:.16em; margin:0 0 14px; text-transform:uppercase; }
h1,h2,h3,p { margin-top:0; } h1 { font-size:clamp(3.2rem,7vw,6.4rem); letter-spacing:-.08em; line-height:.95; margin-bottom:28px; } h1 span { color:var(--cyan); } h2 { font-size:clamp(2rem,4vw,3.5rem); letter-spacing:-.06em; line-height:1.05; margin-bottom:18px; } h3 { margin-bottom:7px; }
.lead { color:var(--muted); font-size:19px; max-width:480px; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }
.button { border:1px solid var(--line); border-radius:9px; display:inline-block; font-size:14px; font-weight:700; padding:11px 17px; transition:transform .2s,background .2s; } .button:hover { transform:translateY(-2px); } .primary { background:var(--cyan); border-color:var(--cyan); color:#071219; } .secondary { color:var(--text); }
.hero-card { background:#1a2029; border:1px solid #3a4554; border-radius:18px; box-shadow:0 30px 80px #0008; overflow:hidden; transform:rotate(1.5deg); }
.window-dots { align-items:center; background:#242c36; color:#aab4c1; display:flex; gap:7px; padding:15px; } .window-dots i { background:#ff625c; border-radius:50%; height:9px; width:9px; } .window-dots i:nth-child(2){background:#ffc043}.window-dots i:nth-child(3){background:#27c840}.window-dots span { font-size:12px; margin-left:10px; }
.mini-toolbar,.preview-footer { color:#aab4c1; font-size:11px; padding:12px 15px; } .mini-toolbar { border-bottom:1px solid #323b47; display:flex; gap:12px; } .mini-toolbar .active { color:var(--cyan); } .mini-toolbar em { font-style:normal; margin-left:auto; }
.piano-preview { display:flex; height:260px; } .keys { background:#aeb6bd; color:#18202a; display:flex; flex-direction:column; font-size:10px; justify-content:space-around; padding:6px; width:58px; } .grid { background:repeating-linear-gradient(90deg,#2a333d 0,#2a333d 1px,transparent 1px,transparent 62px),repeating-linear-gradient(0deg,#242c34 0,#242c34 1px,transparent 1px,transparent 37px),#1c2229; flex:1; position:relative; } .note { background:linear-gradient(90deg,#5687de,#78a5f4); border-radius:8px; box-shadow:0 0 16px #699eff88; color:white; font-size:11px; padding:8px 12px; position:absolute; } .note-one { left:18%; top:32%; width:27%; } .note-two { left:51%; top:48%; width:37%; } .playhead { background:var(--cyan); box-shadow:0 0 10px var(--cyan); height:100%; left:49%; opacity:.8; position:absolute; width:2px; }
.stats { border-bottom:1px solid var(--line); border-top:1px solid var(--line); display:grid; grid-template-columns:repeat(3,1fr); margin-bottom:110px; padding:25px 0; } .stats div { border-right:1px solid var(--line); padding-left:24px; } .stats div:first-child { padding-left:0; } .stats div:last-child { border:0; } .stats strong,.stats span { display:block; } .stats strong { font-size:17px; } .stats span { color:var(--muted); font-size:13px; }
.section { margin-bottom:120px; } .feature-grid { display:grid; gap:16px; grid-template-columns:repeat(3,1fr); margin-top:38px; } article,.engine,.cta { background:linear-gradient(145deg,#151b25,#10141c); border:1px solid var(--line); border-radius:16px; padding:26px; } article { min-height:200px; } article p,.engine p,.cta p { color:var(--muted); } .icon { color:var(--cyan); font-size:27px; }
.engine { align-items:center; display:grid; gap:45px; grid-template-columns:1fr 1fr; } code { color:var(--cyan); } .notice { border-left:2px solid var(--cyan); padding-left:14px; } .pipeline { align-items:center; background:#0c1118; border:1px solid var(--line); border-radius:12px; display:flex; flex-wrap:wrap; gap:10px; justify-content:center; padding:24px 14px; } .pipeline span { background:#1b2531; border-radius:7px; font-size:12px; padding:10px; } .pipeline b { color:var(--cyan); } .pipeline .output { background:var(--cyan); color:#071219; }
.cta { margin:0 auto; max-width:760px; text-align:center; } .cta p { margin-left:auto; margin-right:auto; max-width:570px; } footer { border-top:1px solid var(--line); color:var(--muted); display:flex; font-size:12px; justify-content:space-between; margin:auto; max-width:1180px; padding:24px 28px 40px; }
@media (max-width:800px) { nav a:not(:last-child){display:none}.hero,.engine{grid-template-columns:1fr;gap:40px}.hero{min-height:auto;padding:65px 0 90px}.hero-card{transform:none}.feature-grid,.stats{grid-template-columns:1fr}.stats div{border-bottom:1px solid var(--line);border-right:0;padding:14px 0}.stats{margin-bottom:80px}.section{margin-bottom:80px}footer{display:block}footer span{display:block;margin-bottom:6px} }