:root{--gold:#f2b71c;--gold2:#ffd867;--ink:#020404;--panel:#0e1010;--line:rgba(242,183,28,.34);--muted:#adaeaf}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:#f8f8f4;font-family:Inter,Arial,sans-serif}
a{color:inherit;text-decoration:none}
.topbar{height:98px;padding:0 clamp(26px,4.8vw,76px);display:grid;grid-template-columns:250px 1fr 125px;align-items:center;gap:20px;border-bottom:1px solid var(--line);background:rgba(1,3,3,.97);position:relative;z-index:5}
.brand{display:flex;align-items:center;gap:11px;color:var(--gold);width:max-content}
.brand-mark{font-size:35px;transform:rotate(90deg)}
.brand b{font-size:45px;letter-spacing:-3px;line-height:.75}
.brand small{display:block;font-size:12px;letter-spacing:8px;margin-top:9px}
.topbar nav{display:flex;justify-content:center;gap:clamp(26px,4vw,64px);height:100%;align-items:center}
.topbar nav a{font-family:Oswald,Arial,sans-serif;font-weight:600;position:relative}
.topbar nav a.active{color:var(--gold)}
.topbar nav a.active:after{content:"";position:absolute;left:0;right:0;height:2px;background:var(--gold);bottom:-29px}
.btn{min-height:52px;border-radius:6px;padding:0 27px;display:inline-flex;align-items:center;justify-content:center;font:700 17px Oswald,Arial,sans-serif;border:1px solid #a97400;color:var(--gold2);background:rgba(0,0,0,.25)}
.btn.gold{background:linear-gradient(135deg,#ffe17b,#e4a009);color:#171005;border:0}
.hero{min-height:650px;display:grid;grid-template-columns:49% 51%;position:relative;overflow:hidden;border-bottom:1px solid var(--line);background:radial-gradient(circle at 31% 54%,rgba(213,139,0,.1),transparent 35%),#030505}
.hero-copy{padding:72px 30px 62px clamp(46px,11vw,174px);align-self:center;position:relative;z-index:2}
.eyebrow{font:600 12px Oswald,Arial;color:var(--gold);letter-spacing:4px}
.hero h1{margin:22px 0 14px;font:italic 800 clamp(62px,6.4vw,95px)/.95 Oswald,Arial;background:linear-gradient(#ffe98c,#f0b017 54%,#966000);-webkit-background-clip:text;color:transparent;letter-spacing:-2px}
.hero h2{font:600 clamp(18px,1.8vw,25px) Oswald,Arial}
.hero p.lead{max-width:530px;color:#d1d1d1;font-size:19px;line-height:1.5}
.hero p.lead strong{color:var(--gold)}
.features{display:flex;gap:clamp(25px,4vw,62px);margin:32px 0}
.feature{text-align:center}
.feature span{display:block;color:var(--gold);font:700 45px Oswald}
.feature small{font:600 12px Oswald;white-space:nowrap}
.actions{display:flex;gap:18px;flex-wrap:wrap}
.phone-stage{position:relative;min-width:0;overflow:hidden}
.phone-stage img{position:absolute;width:1536px;max-width:none;height:1024px;top:-98px;left:calc(50% - 1080px);pointer-events:none}
.libraries{padding:32px clamp(26px,4.8vw,75px) 50px;background:linear-gradient(#080a0a,#030505)}
.title-row{display:grid;grid-template-columns:auto 1fr auto;gap:20px;align-items:center;margin-bottom:28px}
.title-row h2{color:var(--gold);font:600 20px Oswald;margin:0}
.title-row .line{height:1px;background:var(--line)}
.title-row a{color:var(--gold);font:600 14px Oswald}
.library-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.library-card{min-height:180px;border:1px solid #292c2c;border-radius:9px;background:linear-gradient(135deg,#111414,#0b0d0d);padding:10px;display:grid;grid-template-columns:46% 54%;overflow:hidden}
.library-card:hover{border-color:#7e5e11;transform:translateY(-2px)}
.library-cover{height:158px;border-radius:6px;overflow:hidden;background:radial-gradient(circle at 50% 33%,#4c3308,#050707 64%);box-shadow:inset 0 0 32px #000,0 8px 18px #000}
.library-cover img{width:100%;height:100%;object-fit:cover;display:block}
.library-info{padding:9px 6px 4px 20px;display:flex;flex-direction:column}
.library-info h3{font:600 17px Oswald;margin:2px 0 15px}
.library-info p{font-size:12px;color:#c2c2c2;margin:0 0 10px}
.library-info .btn{min-height:38px;padding:0 10px;margin-top:auto;font-size:13px}
.update-banner{margin:0 clamp(26px,4.8vw,75px) 60px;border:1px solid var(--line);border-radius:14px;overflow:hidden;display:grid;grid-template-columns:160px 1fr auto;align-items:center;background:#0b0d0d;padding:14px;gap:24px}
.update-banner img{width:160px;height:90px;object-fit:cover;border-radius:8px}
.update-banner h3{margin:0 0 8px;font:600 21px Oswald;color:var(--gold2)}
.update-banner p{margin:0;color:var(--muted)}
.empty{grid-column:1/-1;padding:40px;border:1px dashed #4c411f;border-radius:12px;text-align:center;color:#aaa}
.about{text-align:center;padding:86px 22px;background:radial-gradient(circle,rgba(180,111,0,.12),transparent 50%)}
.about small{color:var(--gold);letter-spacing:5px}
.about h2{max-width:760px;margin:14px auto;font:700 clamp(34px,4vw,58px)/1.1 Oswald}
.about p{color:var(--muted)}
footer{border-top:1px solid var(--line);padding:30px clamp(25px,5vw,76px);display:flex;align-items:center;justify-content:space-between;color:#858585;font-size:12px}
footer a{color:#b98b26}
@media(max-width:1080px){.topbar{grid-template-columns:210px 1fr 110px;padding-inline:28px}
.topbar nav{gap:22px}
.hero{grid-template-columns:56% 44%}
.hero-copy{padding-left:48px}
.phone-stage img{left:calc(50% - 1050px)}
.library-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){.topbar{height:auto;grid-template-columns:1fr auto;padding:14px 20px}
.brand b{font-size:34px}
.brand small{font-size:9px;letter-spacing:5px}
.topbar nav{grid-column:1/-1;order:3;height:44px;overflow-x:auto;justify-content:flex-start}
.topbar nav a{white-space:nowrap;font-size:13px}
.topbar nav a.active:after{bottom:-12px}
.topbar>.btn{min-height:42px;padding:0 15px}
.hero{grid-template-columns:1fr}
.hero-copy{text-align:center;padding:50px 22px 28px}
.hero p.lead{margin-inline:auto}
.features,.actions{justify-content:center}
.features{gap:18px;flex-wrap:wrap}
.feature{min-width:70px}
.phone-stage{height:390px}
.phone-stage img{width:940px;height:auto;top:-40px;left:calc(50% - 650px)}
.library-grid{grid-template-columns:1fr}
.libraries{padding-inline:20px}
.update-banner{grid-template-columns:90px 1fr;margin-inline:20px}
.update-banner img{width:90px;height:90px}
.update-banner>.btn{grid-column:1/-1}
.about{padding:60px 22px}
footer{flex-direction:column;text-align:center;gap:12px}
}
.contact{text-align:center;padding:78px 22px;border-top:1px solid var(--line);background:#080a0a}
.contact small,.app-library-note small{color:var(--gold);letter-spacing:5px}
.contact h2{font:700 clamp(34px,4vw,52px) Oswald;margin:14px auto}
.contact p{max-width:650px;margin:0 auto 25px;color:var(--muted);line-height:1.6}
.library-page{width:min(1240px,92%);margin:0 auto;padding:48px 0 80px}
.back-link{display:inline-block;color:var(--gold);font:600 14px Oswald;margin-bottom:26px}
.library-hero{display:grid;grid-template-columns:minmax(280px,430px) 1fr;gap:clamp(35px,6vw,80px);align-items:center;padding:34px;border:1px solid var(--line);border-radius:18px;background:radial-gradient(circle at 25% 45%,rgba(242,183,28,.12),transparent 35%),#090b0b}
.library-hero-cover{aspect-ratio:1;border-radius:15px;overflow:hidden;box-shadow:0 24px 50px #000}
.library-hero-cover img{width:100%;height:100%;object-fit:cover}
.library-hero-copy h1{font:700 clamp(42px,5vw,72px)/1 Oswald;margin:15px 0;color:var(--gold2)}
.library-hero-copy>p:not(.library-meta){color:#d0d0d0;line-height:1.7;max-width:650px}
.library-meta{color:var(--muted);font-size:13px}
.coming-soon{display:inline-flex;margin-top:18px;padding:13px 18px;border:1px solid var(--line);border-radius:7px;color:var(--gold);font:600 13px Oswald}
.sound-catalog{padding:60px 0 30px}
.sound-catalog .title-row>span{color:var(--gold);font:600 14px Oswald}
.sound-list{display:grid;gap:12px}
.sound-row{display:grid;grid-template-columns:74px minmax(180px,1fr) minmax(280px,440px);gap:20px;align-items:center;padding:10px 18px 10px 10px;border:1px solid #292c2c;border-radius:11px;background:#0b0e0e}
.sound-row img{width:74px;height:74px;object-fit:cover;border-radius:8px}
.sound-copy h3{margin:0 0 7px;font:600 18px Oswald}
.sound-copy p{margin:0;color:var(--muted);font-size:12px}
.sound-row audio{width:100%;height:42px;accent-color:var(--gold)}
.app-library-note{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center;margin-top:35px;padding:35px;border:1px solid var(--line);border-radius:15px;background:linear-gradient(135deg,#101313,#080a0a)}
.app-library-note h2{font:600 32px Oswald;margin:12px 0}
.app-library-note p{color:var(--muted);line-height:1.6;max-width:760px}
.app-library-note>span{text-align:center;border:1px solid var(--line);border-radius:10px;padding:24px;color:#aaa;font:600 12px Oswald;letter-spacing:2px}
.app-library-note>span b{display:block;color:var(--gold);font-size:28px;margin-top:6px}
@media(max-width:760px){.library-page{padding-top:30px}.library-hero{grid-template-columns:1fr;padding:20px}.library-hero-copy{text-align:center}.sound-row{grid-template-columns:58px 1fr;padding:9px}.sound-row img{width:58px;height:58px}.sound-row audio{grid-column:1/-1}.app-library-note{grid-template-columns:1fr;text-align:center}.app-library-note>span{justify-self:center}}