:root { color-scheme: dark; --bg:#101013; --surface:#17171c; --text:#f4f2ee; --muted:#b6b3bd; --accent:#b9a0ff; --line:#35343e; --button:#bca5ff; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:2rem; }
body { margin:0; background:var(--bg); color:var(--text); font-family:Inter,"Segoe UI",Arial,sans-serif; font-size:16px; line-height:1.65; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration-thickness:1px; text-underline-offset:.25em; }
a:hover { color:var(--accent); }
:focus-visible { outline:3px solid #e0ceff; outline-offset:6px; border-radius:2px; }
::selection { color:#101013; background:#c5b0ff; }
svg { display:block; flex-shrink:0; }
h1,h2,h3,p { margin-top:0; }
h1,h2,h3 { line-height:1.12; font-weight:600; }
h1,h2 { letter-spacing:-.045em; }
h2 { font-size:clamp(2rem,3.7vw,3.15rem); margin-bottom:0; }
h3 { font-size:1.35rem; letter-spacing:-.025em; }
p { margin-bottom:1.25rem; }
.wrap { width:min(1200px,calc(100% - 112px)); margin-inline:auto; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.skip-link { position:fixed; top:1rem; left:1rem; z-index:10; padding:.8rem 1.3rem; background:var(--text); color:var(--bg); transform:translateY(-200%); }
.skip-link:focus { transform:none; }
.site-header { min-height:106px; display:flex; align-items:center; gap:36px; border-bottom:1px solid var(--line); }
.brand { display:flex; gap:12px; align-items:center; color:var(--text); text-decoration:none; font-size:10px; font-weight:650; line-height:1.4; letter-spacing:.12em; }
.brand-mark { font-size:43px; font-weight:700; line-height:1; letter-spacing:-.07em; }
.brand-mark span,.about-signature span { color:var(--accent); }
.main-nav { margin-left:auto; display:flex; gap:28px; }
.main-nav a,.languages a,.site-footer nav a { min-height:44px; display:inline-flex; align-items:center; text-decoration:none; font-size:13px; color:var(--muted); }
.main-nav a:hover,.site-footer nav a:hover { color:var(--text); }
.languages { display:flex; align-items:center; gap:2px; font-size:11px; color:#797681; }
.languages a { min-width:34px; justify-content:center; font-size:11px; letter-spacing:.07em; }
.languages [aria-current="page"] { color:var(--text); text-decoration:underline; }
.header-contact { display:inline-flex; align-items:center; gap:12px; min-height:44px; font-size:13px; text-decoration:none; }
.hero { display:grid; grid-template-columns:1.22fr 1fr; gap:5%; align-items:center; padding-block:91px 90px; }
.eyebrow { display:flex; align-items:center; gap:12px; color:var(--accent); text-transform:uppercase; font-size:10px; line-height:1.7; letter-spacing:.16em; font-weight:600; margin-bottom:28px; }
.small-line { display:inline-block; width:24px; height:1px; background:currentColor; }
h1 { font-size:clamp(3.35rem,5.75vw,5.5rem); margin-bottom:30px; line-height:1.02; }
h1 em { color:var(--accent); font-style:normal; }
.hero-intro { max-width:450px; font-size:16px; line-height:1.8; color:var(--muted); margin-bottom:31px; }
.hero-actions { display:flex; align-items:center; gap:25px; flex-wrap:wrap; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:24px; min-height:52px; padding:13px 22px; background:var(--button); color:#171021; text-decoration:none; font-weight:650; font-size:13px; border:1px solid var(--button); border-radius:3px; transition:background-color .18s,border-color .18s; }
.button:hover { background:#d5c4ff; border-color:#d5c4ff; color:#171021; }
.text-link { min-height:44px; display:inline-flex; align-items:center; gap:10px; font-size:13px; text-decoration-color:#68616f; }
.formats { list-style:none; padding:0; margin:31px 0 0; display:flex; gap:19px; flex-wrap:wrap; font-size:10px; letter-spacing:.055em; color:var(--muted); }
.formats li { display:flex; align-items:center; gap:8px; }
.formats li::before { content:""; width:3px; height:3px; border-radius:50%; background:#a899bd; }
.signal { min-width:0; align-self:stretch; margin-top:12px; max-height:420px; display:flex; flex-direction:column; justify-content:center; border:1px solid #33313d; border-radius:4px; background:#141319; overflow:hidden; }
.signal-top { display:flex; justify-content:space-between; align-items:center; color:var(--muted); font-size:9px; text-transform:uppercase; letter-spacing:.18em; padding:27px 27px 0; }
.signal-dot { width:5px; height:5px; background:var(--accent); border-radius:50%; }
.signal-art { position:relative; margin-top:37px; padding-block:18px; background:repeating-linear-gradient(90deg,transparent,transparent calc(25% - 1px),#22202b calc(25% - 1px),#22202b 25%); }
.signal-axis { position:absolute; top:50%; width:100%; border-top:1px solid #39303f; }
.waveform { width:100%; height:auto; position:relative; fill:var(--accent); }
.signal-cursor { position:absolute; width:1px; background:#e8e0ff; height:100%; top:0; left:61%; opacity:.7; }
.signal-cursor::before { content:""; position:absolute; width:5px; height:5px; background:inherit; left:-2px; }
.signal-scale { display:flex; justify-content:space-between; padding:14px 27px 0; color:#98929f; font-size:8px; letter-spacing:.13em; }
.signal-bottom { padding:29px 27px 24px; margin-top:auto; }
.signal-bottom p { margin-bottom:4px; font-size:15px; letter-spacing:-.015em; }
.signal-bottom>span { color:var(--muted); font-size:10px; }
.section { padding-block:88px; }
.services { background:var(--surface); border-block:1px solid #27262f; }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:55px; margin-bottom:54px; }
.section-heading .eyebrow { margin-bottom:18px; }
.section-intro { max-width:315px; color:var(--muted); font-size:14px; line-height:1.8; margin-bottom:3px; }
.service-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:38px; }
.service { border-top:1px solid #565060; padding-top:26px; }
.service-number { display:block; color:var(--accent); font-size:11px; margin-bottom:24px; }
.service h3 { margin-bottom:18px; max-width:230px; line-height:1.25; }
.service p { color:var(--muted); font-size:14px; line-height:1.85; margin-bottom:0; }
.portfolio { display:grid; grid-template-columns:1fr 1.1fr; gap:11%; align-items:center; border-bottom:1px solid var(--line); }
.portfolio .eyebrow { margin-bottom:21px; }
.portfolio-intro { color:var(--muted); font-size:15px; margin:25px 0 0; max-width:400px; }
.playlist-card { min-width:0; }
.playlist-player { min-height:352px; border-radius:12px; overflow:hidden; background:#201a2b; border:1px solid #3e314e; }
.playlist-cover { min-height:350px; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; padding:32px; }
.playlist-cover h3 { font-size:clamp(2.8rem,4.5vw,4rem); letter-spacing:-.055em; margin-bottom:15px; }
.playlist-cover h3 span { color:var(--accent); }
.playlist-cover>p:not(.eyebrow) { color:var(--muted); font-size:14px; }
.process { display:grid; grid-template-columns:1fr 1.1fr; gap:11%; }
.process .eyebrow,.about .eyebrow,.faq .eyebrow { margin-bottom:21px; }
.steps { list-style:none; counter-reset:step; margin:0; padding:0; }
.steps li { position:relative; padding:0 0 29px 48px; counter-increment:step; }
.steps li+li { border-top:1px solid var(--line); padding-top:29px; }
.steps li:last-child { padding-bottom:0; }
.steps li::before { content:"0" counter(step); position:absolute; left:0; color:var(--accent); font-size:11px; padding-top:5px; }
.steps h3 { font-size:18px; margin-bottom:12px; }
.steps p { color:var(--muted); font-size:14px; margin:0; }
.about { background:#16151a; border-block:1px solid #27262f; }
.about-grid { display:grid; grid-template-columns:1fr 1.1fr; gap:11%; }
.about-intro { margin-top:24px; color:var(--muted); font-size:19px; line-height:1.6; }
.about-signature { margin-top:20px; color:#eee9f6; font-weight:650; font-size:80px; line-height:1; letter-spacing:-.08em; }
.about-copy>p { font-size:14px; color:var(--muted); line-height:1.9; }
.complementary { border-top:1px solid #514657; margin-top:30px; padding-top:25px; }
.complementary h3 { font-size:16px; }
.complementary p { font-size:13px; color:var(--muted); margin-bottom:0; }
.faq { display:grid; grid-template-columns:1fr 1.1fr; gap:11%; }
.faq h2 { max-width:410px; }
details { border-bottom:1px solid var(--line); }
details:first-child { border-top:1px solid var(--line); }
summary { padding:24px 30px 24px 0; min-height:56px; cursor:pointer; font-size:15px; line-height:1.6; position:relative; list-style:none; }
summary::-webkit-details-marker { display:none; }
summary::after { content:"+"; position:absolute; right:3px; top:22px; color:var(--accent); font-size:20px; font-weight:400; }
details[open] summary::after { content:"−"; }
details p { font-size:14px; color:var(--muted); margin-bottom:24px; padding-right:20px; }
.contact { background:#201a2b; border-block:1px solid #3e314e; }
.contact-grid { display:grid; grid-template-columns:1.1fr 1fr; gap:11%; align-items:center; }
.contact h2 { font-size:clamp(2.75rem,5vw,4.6rem); }
.contact-copy>p { color:#c8c0d2; max-width:385px; font-size:15px; }
.contact .button { margin-top:6px; }
.email-address { display:block; width:fit-content; min-height:44px; padding-block:12px; font-size:13px; overflow-wrap:anywhere; color:#d9cceb; }
.contact .text-link { color:#d9cceb; font-size:12px; }
.site-footer { display:flex; align-items:center; flex-wrap:wrap; column-gap:45px; row-gap:20px; padding-block:35px; }
.site-footer p { margin-bottom:0; font-size:10px; color:var(--muted); }
.site-footer .footer-name { color:var(--text); font-size:13px; font-weight:600; margin-bottom:5px; }
.site-footer nav { display:flex; gap:25px; margin-left:auto; }
.site-footer nav a { font-size:11px; }
.site-footer .copyright { font-size:9px; }
@media(min-width:1600px) { .hero { padding-block:115px; } }
@media(max-width:1050px) {
  .wrap { width:calc(100% - 64px); } .site-header { gap:22px; min-height:92px; } .main-nav { gap:20px; } .header-contact { display:none; }
  .hero { padding-block:70px; gap:5%; grid-template-columns:1.1fr 1fr; } h1 { font-size:clamp(2.9rem,5.8vw,4.5rem); } .hero-intro { font-size:15px; } .hero-actions { gap:14px; }
  .signal { max-height:365px; align-self:center; } .signal-top { padding-inline:20px; } .signal-art { margin-top:26px; } .signal-bottom { padding:24px 20px; }
  .section { padding-block:68px; } .process,.about-grid,.faq,.contact-grid,.portfolio { gap:7%; } .service-grid { gap:25px; }
}
@media(max-width:720px) {
  .wrap { width:calc(100% - 40px); } .site-header { flex-wrap:wrap; padding-block:18px 6px; gap:10px; } .brand { font-size:9px; } .brand-mark { font-size:38px; } .languages { margin-left:auto; }
  .main-nav { order:3; width:100%; margin:3px 0 0; justify-content:space-between; gap:10px; } .main-nav a { font-size:12px; }
  .hero { grid-template-columns:1fr; gap:40px; padding-block:45px 48px; } h1 { font-size:clamp(2.75rem,10.7vw,4.6rem); margin-bottom:24px; } .hero .eyebrow { margin-bottom:23px; }
  .hero-intro { font-size:15px; max-width:480px; } .hero-actions { gap:13px 22px; } .formats { margin-top:25px; gap:14px; font-size:9px; }
  .signal { margin:0; min-height:0; max-height:none; } .signal-top { padding:18px 20px 0; } .signal-art { padding:0; margin-top:20px; } .waveform { max-height:120px; }
  .signal-scale { padding:9px 20px 0; } .signal-bottom { padding:20px; display:flex; gap:15px; align-items:baseline; justify-content:space-between; } .signal-bottom p { font-size:12px; margin:0; } .signal-bottom>span { font-size:9px; }
  .section { padding-block:52px; } h2 { font-size:2rem; } .eyebrow { font-size:9px; } .section-heading { display:block; margin-bottom:32px; } .section-intro { margin-top:23px; max-width:none; }
  .service-grid { grid-template-columns:1fr; gap:28px; } .service { padding-top:23px; } .service-number { margin-bottom:13px; } .service h3 { max-width:none; font-size:1.25rem; margin-bottom:12px; }
  .process,.about-grid,.faq,.contact-grid,.portfolio { grid-template-columns:1fr; gap:32px; } .steps li { padding-left:38px; } .about-signature { display:none; } .about-intro { margin-bottom:0; font-size:17px; } .about-grid { gap:25px; }
  .playlist-cover { padding:25px; }
  .contact h2 { font-size:clamp(2.65rem,10vw,4rem); } .site-footer { padding-block:28px; gap:17px; } .site-footer nav { margin-left:0; width:100%; gap:25px; } .site-footer .copyright { width:100%; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { transition:none!important; } }
@media(forced-colors:active) { .button,.signal { border:1px solid ButtonText; } :focus-visible { outline-color:Highlight; } }