@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@700;800&family=DM+Sans:wght@400;500;700&display=swap');
:root { color-scheme: dark; background:#131414; color:#f6f2eb; font-family:"DM Sans",system-ui,sans-serif; }
* { box-sizing:border-box; }
body { margin:0; }
a { color:inherit; }
a:focus-visible { outline:3px solid #fb995c; outline-offset:4px; }
.shell { width:min(1120px,calc(100% - 40px)); margin-inline:auto; }
.nav,.footer { display:flex; align-items:center; justify-content:space-between; padding-block:20px; border-bottom:1px solid #343332; }
.brand,.nav nav,.actions { display:flex; align-items:center; gap:16px; }
.brand { font-weight:700; text-decoration:none; }
.brand img { width:36px; height:36px; object-fit:contain; border-radius:8px; }
.nav nav a,.footer a { font-size:.9rem; }
.hero { display:grid; grid-template-columns:1.4fr .75fr; align-items:center; gap:clamp(24px,7vw,100px); padding-block:56px; }
.eyebrow { color:#ffa873; font-size:.75rem; font-weight:700; letter-spacing:.1em; }
h1,h2 { font-family:"Barlow Condensed","Arial Narrow",sans-serif; line-height:.96; margin:0; }
h1 { font-size:clamp(4rem,10vw,8rem); text-transform:uppercase; }
h1 em { color:#fb995c; font-style:normal; }
h2 { font-size:clamp(2.5rem,5vw,4rem); }
.intro,p { color:#c4bfb8; line-height:1.55; }
.intro { max-width:36ch; font-size:1.15rem; }
.actions { flex-wrap:wrap; margin-top:24px; }
.primary,.secondary { display:inline-flex; padding:12px 16px; min-height:44px; align-items:center; border-radius:8px; font-weight:700; text-decoration:none; }
.primary { background:#fb995c; color:#20160f; }
.secondary { border:1px solid #817364; }
.device { margin:0; width:min(100%,295px); justify-self:center; border:6px solid #343332; border-radius:25px; overflow:hidden; box-shadow:0 18px 65px #0008; }
.device img { display:block; width:100%; height:auto; }
.features,.availability { border-top:1px solid #343332; padding-block:40px; }
.grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; margin-top:22px; background:#343332; border:1px solid #343332; border-radius:12px; overflow:hidden; }
article { background:#1b1c1c; padding:20px; }
h3 { margin:0; font-size:1.15rem; }
article p:last-child { margin-bottom:0; }
.footer { border-top:1px solid #343332; border-bottom:0; gap:12px; color:#c4bfb8; }
@media(max-width:650px) { .hero,.grid { grid-template-columns:1fr; } .hero { padding-block:36px; } .device { width:min(68%,260px); } }