:root { color-scheme: light; --ink:#18283a; --muted:#657386; --line:#dce6ef; --bg:#f7fbff; --accent:#1f8fbd; }
* { box-sizing: border-box; }
body { margin: 0; font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--ink); background: linear-gradient(180deg,#fff 0%, var(--bg) 100%); line-height: 1.55; }
.page { width: min(1060px, calc(100% - 40px)); margin: 0 auto; padding: 72px 0; }
.hero { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 54px; align-items: center; min-height: 430px; }
.eyebrow { margin: 0 0 16px; color: var(--accent); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; font-size: 12px; }
h1 { margin: 0; max-width: 720px; font-size: clamp(42px, 6vw, 76px); line-height: .97; letter-spacing: 0; }
.lead { max-width: 620px; margin: 24px 0 0; color: var(--muted); font-size: 19px; }
.art { position: relative; height: 360px; border: 1px solid var(--line); border-radius: 8px; background: #fff; overflow: hidden; box-shadow: 0 24px 70px rgba(40,66,92,.12); }
.piano { position:absolute; left:38px; right:38px; bottom:58px; height:92px; background:linear-gradient(#fff,#eef4f8); border:1px solid var(--line); border-radius:8px; }
.piano:before { content:""; position:absolute; left:28px; right:28px; top:0; height:58px; background:repeating-linear-gradient(90deg,#25384e 0 20px,transparent 20px 48px); opacity:.9; }
.violin { position:absolute; width:150px; height:230px; right:48px; top:50px; border-radius:52% 48% 48% 52%; background:linear-gradient(145deg,#d69a48,#9e642d); transform:rotate(14deg); }
.violin:before { content:""; position:absolute; width:11px; height:230px; left:66px; top:-40px; background:#644225; border-radius:8px; }
.violin:after { content:""; position:absolute; left:26px; right:26px; top:58px; height:96px; border-left:3px solid rgba(255,255,255,.65); border-right:3px solid rgba(255,255,255,.65); transform:rotate(-12deg); }
.grid { display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:18px; margin-top:48px; }
article { background:#fff; border:1px solid var(--line); border-radius:8px; padding:24px; }
h2 { margin:0 0 10px; font-size:20px; }
p { margin:0; }
@media (max-width: 820px) { .page { width:min(100% - 28px, 640px); padding:40px 0; } .hero { grid-template-columns:1fr; gap:28px; } .art { height:260px; } .grid { grid-template-columns:1fr; } }