.hero{height:auto;min-height:850px;padding:132px 0 76px;align-items:center}
.hero-layout{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,.95fr) minmax(450px,1.05fr);gap:clamp(28px,4vw,72px);align-items:center}
.hero-copy{padding-top:0;min-width:0}
.hero h1{font-size:clamp(68px,8.2vw,128px);margin:28px 0}
.hero-platforms{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:34px}
.hero-platform{min-height:106px;padding:13px 12px;background:#100d0bcf;border:1px solid #77634b;display:flex;flex-direction:column;text-decoration:none;color:var(--cream);backdrop-filter:blur(9px)}
.hero-platform strong{font:800 24px/1 var(--condensed);text-transform:uppercase}
.hero-platform span{font-size:11px;color:#bdb2a3;margin-top:5px}
.hero-platform small{font-size:10px;color:#9a8d7d;margin-top:auto;line-height:1.2}
.hero-platform-ready{border-color:var(--orange);background:#302014e8}
.hero-platform-ready small{color:var(--orange)}
.hero-platform-ready:hover{background:#4b2b13}
.hero-detail-link{display:inline-block;color:var(--cream);margin-top:18px;font-size:12px;letter-spacing:.04em;text-underline-offset:5px}
.hero-detail-link:hover{color:var(--orange)}
.hero-interface{min-width:0;padding:23px 26px 15px;border:1px solid #856747;background:linear-gradient(145deg,#211913f2,#0e0c0bf5);box-shadow:0 30px 85px #000b,0 0 0 7px #08070677;transform:rotate(1.5deg);backdrop-filter:blur(12px)}
.interface-top{display:flex;align-items:start;justify-content:space-between;gap:14px;padding-bottom:18px;border-bottom:1px solid #5a4534}
.interface-top>div{display:grid;gap:5px}
.interface-top span:first-child{font-size:11px;letter-spacing:.15em;color:var(--orange)}
.interface-top strong{font:800 29px/1 var(--condensed);letter-spacing:.06em}
.interface-live{border:1px solid var(--orange);color:var(--orange);font-size:11px;letter-spacing:.1em;padding:7px 9px}
.interface-preset{display:flex;justify-content:space-between;gap:15px;padding:14px 15px;margin:22px 0;background:#0a0908;border:1px solid #68513a;color:var(--cream);font-size:13px;letter-spacing:.1em}
.interface-preset span:last-child{color:var(--orange);font-size:11px}
.interface-faders{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:27px;row-gap:20px}
.interface-fader>div{display:flex;justify-content:space-between;gap:5px;font-size:11px;letter-spacing:.08em;color:#c2b7a8}
.interface-fader b{color:var(--orange);white-space:nowrap}
.interface-fader i{position:relative;display:block;height:7px;background:#59483a;margin-top:13px;border-radius:6px}
.interface-fader i:before{content:"";position:absolute;left:0;top:0;height:7px;width:var(--value);background:var(--orange);border-radius:6px}
.interface-fader i:after{content:"";position:absolute;left:var(--value);top:50%;width:15px;height:15px;border-radius:50%;background:var(--cream);border:3px solid var(--orange);transform:translate(-50%,-50%);box-shadow:0 1px 8px #000}
.interface-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:28px;padding-top:18px;border-top:1px solid #5a4534}
.interface-bottom span{color:#a69b8c;font-size:10px;line-height:1.5}
.interface-bottom strong{background:var(--orange);color:#211207;padding:11px 12px;font-size:10px;letter-spacing:.05em;white-space:nowrap}
.hero-interface>p{color:#9a8d7d;font-size:11px;margin:14px 0 0}
@media(max-width:1080px){.hero{padding-top:125px}.hero-layout{grid-template-columns:1fr;gap:50px}.hero-copy{max-width:720px}.hero-interface{width:min(100%,700px);justify-self:center;transform:none}.hero h1{font-size:clamp(75px,12vw,120px)}}
@media(max-width:600px){.hero{padding:115px 0 70px}.hero-layout{gap:40px}.hero h1{font-size:clamp(60px,15vw,82px)}.hero-platforms{gap:6px}.hero-platform{padding:10px 8px;min-height:105px}.hero-platform strong{font-size:21px}.hero-platform span{font-size:10px}.hero-platform small{font-size:9px}.hero-interface{padding:17px 15px 12px}.interface-top strong{font-size:23px}.interface-faders{column-gap:16px;row-gap:18px}.interface-fader>div{font-size:10px}.interface-bottom{flex-direction:column;align-items:stretch}.interface-bottom strong{text-align:center}.nav{height:72px}.nav nav{gap:12px}.nav nav a{font-size:10px}.nav nav a:nth-child(2),.nav nav a:nth-child(3){display:none}.wordmark{font-size:21px}}
