@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');
:root{--ink:#101820;--muted:#65727c;--mint:#69e3cb;--paper:#f4f7f6;--white:#fff;--line:#dfe7e4}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',Arial,sans-serif}.topbar{height:76px;padding:0 6.5%;display:flex;align-items:center;justify-content:space-between;background:#101820;color:white;position:sticky;top:0;z-index:5}.brand{display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none;font:700 21px 'Space Grotesk',sans-serif;letter-spacing:-.8px}.brand-mark{width:30px;height:30px;border:1px solid var(--mint);color:var(--mint);display:grid;place-items:center;border-radius:9px}.accent{color:var(--mint)}nav{display:flex;gap:30px}nav a{color:#dce5e2;text-decoration:none;font-size:13px}.cart-button{background:transparent;color:white;border:1px solid #53615f;border-radius:30px;padding:10px 15px;font-weight:700}.cart-button span{background:var(--mint);color:var(--ink);border-radius:20px;padding:2px 7px;margin-left:7px}.hero{min-height:520px;background:#101820;color:white;padding:75px 10% 85px;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;overflow:hidden}.eyebrow{font-size:10px;letter-spacing:2.5px;font-weight:700;color:#24b99c}.hero h1{font:700 clamp(42px,6vw,72px)/1.02 'Space Grotesk',sans-serif;letter-spacing:-3px;margin:18px 0}.hero-text{color:#bdc9c7;line-height:1.8;max-width:470px;font-size:15px}.primary-button{display:inline-flex;gap:24px;align-items:center;justify-content:center;background:var(--mint);color:#10201f;text-decoration:none;border:0;border-radius:4px;padding:15px 20px;font-weight:700;cursor:pointer}.hero .primary-button{margin-top:20px}.microcopy{font-size:11px;color:#8b9997;margin-top:16px}.hero-art{height:330px;position:relative;display:grid;place-items:center}.hero-disc{width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,#172c31 0 18%,#69e3cb 19% 20%,#182e35 21% 45%,#284b50 46% 47%,#0e171e 48%);display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 20px 80px #0008;transform:rotate(-16deg);border:1px solid #79e9d1}.hero-disc span{font:700 64px 'Space Grotesk';color:var(--mint)}.hero-disc small{font-size:8px;letter-spacing:3px;color:white}.orbit{position:absolute;border:1px solid #69e3cb55;border-radius:50%;width:330px;height:150px;transform:rotate(-28deg)}.orbit-two{transform:rotate(55deg);width:380px;height:180px}.hero-tag{position:absolute;right:2%;bottom:20px;background:var(--mint);color:#10201f;padding:13px 17px;font:700 13px 'Space Grotesk';transform:rotate(5deg)}.trust-strip{display:flex;justify-content:space-around;padding:24px 8%;background:#e8efed;border-bottom:1px solid var(--line)}.trust-strip div{display:flex;gap:12px;align-items:center;font-size:12px;color:#53615f}.trust-strip strong{font:700 18px 'Space Grotesk';color:#17a98e}.section{padding:85px 9%}.section-heading{display:flex;justify-content:space-between;align-items:end;gap:30px}.section h2,.banner h2,.contact h2{font:700 clamp(32px,4vw,46px)/1.1 'Space Grotesk';letter-spacing:-1.5px;margin:10px 0}.section-heading>p{max-width:300px;color:var(--muted);font-size:13px;line-height:1.7}.filters{display:flex;gap:8px;margin:28px 0}.filter{border:1px solid var(--line);background:white;border-radius:30px;padding:9px 16px;color:#56625f;font-size:12px;cursor:pointer}.filter.active{background:#101820;color:white;border-color:#101820}.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.product-card{background:white;border:1px solid var(--line);padding:14px;transition:transform .2s}.product-card:hover{transform:translateY(-4px)}.product-art{height:190px;background:linear-gradient(135deg,#eaf2ef,#d7e5e0);display:grid;place-items:center;position:relative;overflow:hidden}.product-art:before{content:"";width:105px;height:135px;border-radius:12px 12px 20px 20px;background:linear-gradient(90deg,#1c2c31,#344f50 50%,#142329);box-shadow:15px 16px 25px #14232933;position:absolute}.product-art:after{content:"METRO\\A BEATS";white-space:pre;text-align:center;line-height:1.1;letter-spacing:2px;font:700 14px 'Space Grotesk';color:var(--mint);position:relative;z-index:1}.product-category{font-size:9px;letter-spacing:1.5px;color:#17a98e;font-weight:700;margin:18px 0 7px}.product-card h3{font:600 17px 'Space Grotesk';margin:0 0 8px}.product-card p{font-size:12px;color:var(--muted);line-height:1.6;min-height:38px}.product-meta{display:flex;align-items:center;justify-content:space-between;margin-top:16px}.price{font-weight:700;font-size:14px}.add-button{background:#101820;color:white;border:0;border-radius:3px;padding:10px 12px;font-size:11px;cursor:pointer}.banner{margin:0 9% 30px;background:#101820;color:white;padding:48px 6%;display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}.banner>p,.contact p{font-size:13px;line-height:1.9;color:#b5c3c0}.contact{display:flex;justify-content:space-between;align-items:center;gap:25px}.contact p{color:var(--muted)}footer{background:#101820;color:white;padding:30px 9%;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}footer p{font-size:11px;color:#aab7b4}.footer-note{width:100%;margin:0}.overlay{position:fixed;inset:0;background:#07101499;z-index:9;opacity:0;pointer-events:none;transition:.2s}.overlay.show{opacity:1;pointer-events:auto}.cart-panel{position:fixed;z-index:10;right:0;top:0;height:100%;width:min(420px,100%);background:white;padding:25px;display:flex;flex-direction:column;transform:translateX(105%);transition:.25s}.cart-panel.open{transform:translateX(0)}.cart-head,.total{display:flex;justify-content:space-between;align-items:center}.cart-head h2{font:700 24px 'Space Grotesk'}.icon-button{border:0;background:#edf2f0;padding:10px;border-radius:50%;cursor:pointer}.cart-items{overflow:auto;flex:1}.empty{color:var(--muted);font-size:13px;margin-top:30px}.cart-row{display:flex;justify-content:space-between;gap:15px;padding:15px 0;border-bottom:1px solid var(--line);font-size:13px}.cart-row button{border:0;background:none;color:#b44;cursor:pointer}.cart-bottom{border-top:1px solid var(--line);padding-top:18px}.total{margin-bottom:18px}.full{width:100%}.cart-bottom .microcopy{color:var(--muted);line-height:1.5}
@media(max-width:760px){.topbar{padding:0 5%;height:66px}nav{display:none}.hero{grid-template-columns:1fr;padding:58px 7% 35px}.hero-art{height:250px}.hero-disc{width:205px;height:205px}.hero-disc span{font-size:48px}.orbit{width:280px;height:120px}.orbit-two{width:300px}.trust-strip{padding:18px 5%;gap:10px}.trust-strip div{gap:6px;flex-direction:column;text-align:center;font-size:10px}.section{padding:60px 6%}.section-heading{display:block}.product-grid{grid-template-columns:repeat(2,1fr);gap:10px}.product-art{height:145px}.product-art:before{transform:scale(.8)}.product-card{padding:9px}.product-card h3{font-size:14px}.product-card p{font-size:11px}.product-meta{align-items:flex-start;gap:6px;flex-direction:column}.banner{margin:0 6% 20px;padding:30px 7%;grid-template-columns:1fr;gap:10px}.contact{display:block}.contact .primary-button{margin-top:15px}footer{padding:28px 6%}}