@font-face{font-family:Game Sans;src:url('/assets/interface.ttf') format('truetype');font-display:swap}
@font-face{font-family:Game Sans;src:url('/assets/interface-bold.ttf') format('truetype');font-weight:700;font-display:swap}
:root{color-scheme:dark;--page:#202622;--deep:#181d1a;--line:#3a463b;--ink:#ecede3;--muted:#bdc7b9;--lcd:#becba0;--mono:ui-monospace,SFMono-Regular,monospace;font-family:Game Sans,system-ui,sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--page);color:var(--ink)}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:2px solid #dce8a9;outline-offset:5px}
h1,h2,h3,p{margin:0}
.wrap{max-width:1280px;margin-inline:auto;padding-inline:clamp(20px,6vw,80px)}
.masthead{background:var(--deep);border-bottom:1px solid var(--line)}
.masthead-inner{height:68px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:inline-flex;align-items:center;gap:11px;font:700 15px/1 var(--mono);letter-spacing:.17em;width:fit-content}
.brand-icon{width:24px;height:24px;border:1px solid #87978a;border-radius:50%;display:grid;place-items:center}
.brand-icon::before{content:"";width:8px;height:8px;border-radius:50%;background:#b6c39c;box-shadow:0 0 0 2px #344437}
nav{display:flex;gap:25px;font-size:14px;color:var(--muted)}
nav a:hover{text-decoration:underline;text-underline-offset:5px}
.hero{border-bottom:1px solid var(--line);background:radial-gradient(ellipse at 74% 38%,#424d3b 0%,#2b342d 35%,#202622 68%);overflow:hidden}
.hero-grid{min-height:560px;display:grid;grid-template-columns:1.22fr .78fr;align-items:center;gap:32px;padding-block:45px}
h1{font-size:clamp(54px,8vw,110px);font-weight:700;line-height:.99;letter-spacing:-.075em}
.hero-copy p{max-width:43ch;margin-top:24px;color:var(--muted);font-size:clamp(16px,2vw,19px);line-height:1.55}
.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.button{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:48px;padding:0 15px;border:1px solid #75816e;border-radius:5px;font-size:14px;font-weight:700}
.button.primary{color:#222c22;background:#c5d29d;border-color:#d2dea9}
.button.primary:hover{background:#dce5bc}
.button.secondary:hover{background:#3a463b}
.device{display:block;isolation:isolate;position:relative;width:min(100%,270px);aspect-ratio:412/760;justify-self:center;transform:rotate(9deg);filter:drop-shadow(15px 22px 22px #0c100b9f);color:#f7f9ea;container-type:inline-size}
.device-shell{position:absolute;inset:0;width:100%;height:100%}
.device-title,.device-brand{position:absolute;left:10%;font-family:var(--mono);font-weight:700;letter-spacing:.06em}
.device-title{top:9%;font-size:8cqw}
.device-brand{top:73.3%;font-size:3.25cqw;letter-spacing:.19em}
.speaker{position:absolute;right:11%;top:7.9%;width:12%;height:3.4%;background:repeating-linear-gradient(90deg,#292e29 0 3px,#727870 3px 5px,transparent 5px 8px)}
.lcd{position:absolute;inset:17.4% 6.7% 28.4%;display:grid;grid-template-rows:auto 1fr;overflow:hidden;border-radius:4%;color:#354133;background:#bbc69f;box-shadow:inset 2px 3px 8px #455b4999,inset -1px -2px 5px #e1e8bf}
.lcd-top{display:flex;gap:8%;align-items:center;justify-content:space-between;margin:8% 7% 0;padding-bottom:6%;border-bottom:1px solid #7d8b6c;font:700 3.9cqw var(--mono)}
.lcd-top b{font-size:5cqw}
.lcd-top span{white-space:nowrap}
.lcd img{width:95%;height:100%;justify-self:center;object-fit:contain;min-height:0}
.device-key{position:absolute;top:82.5%;width:19%;aspect-ratio:1;display:grid;place-items:center;border:2px solid #161a18;border-radius:50%;background:radial-gradient(circle at 38% 24%,#6c746c,#383d39 60%,#272d29 62%);box-shadow:0 4px 2px #101512; color:#e4e7db;font:700 9cqw var(--mono)}
.device-key.left{left:16%}.device-key.right{right:16%}
.collection{padding-block:50px 62px}
.section-heading{display:flex;justify-content:space-between;align-items:baseline;gap:12px;border-bottom:1px solid #566353;padding-bottom:12px;margin-bottom:17px}
.section-heading h2,.install-grid h2{font-size:clamp(31px,5vw,49px);letter-spacing:-.055em;line-height:1.05}
.section-heading span{font:700 11px var(--mono);letter-spacing:.12em;color:#b6c397;white-space:nowrap}
.catalogue{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;padding:0;margin:0}
.tile a{height:100%;display:flex;align-items:center;min-height:90px;gap:12px;padding:12px 10px 12px 12px;border:1px solid #414b40;border-radius:7px;background:#252d27;transition:background .14s,border-color .14s}
.tile a:hover{background:#313c32;border-color:#829078}
.tile img{width:54px;height:54px;flex:none;border-radius:9px}
.tile h3{font-size:15px;line-height:1.25}
.tile .arrow{margin-left:auto;flex:none;color:#b9ca9b;font:18px var(--mono)}
.install-band{background:#303a30;border-block:1px solid #465345}
.install-grid{padding-block:33px;display:grid;grid-template-columns:1fr 1.3fr;align-items:start;gap:22px}
.install-grid p{line-height:1.65;color:#d9e0d2;max-width:63ch}
footer .wrap{min-height:88px;display:flex;align-items:center}
@media(max-width:1000px){.catalogue{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:700px){.hero-grid{min-height:0;grid-template-columns:1fr .62fr;gap:12px;padding-block:33px 38px}.device{width:90%;transform:rotate(6deg)}.catalogue{grid-template-columns:repeat(2,minmax(0,1fr))}.hero-copy p{margin-top:18px}.actions{margin-top:18px}.install-grid{grid-template-columns:1fr}.masthead-inner{height:58px}}
@media(max-width:480px){.hero-grid{grid-template-columns:1fr;padding-block:29px;gap:22px}.hero-copy h1{font-size:clamp(49px,13vw,64px)}.device{width:142px;justify-self:center}.collection{padding-block:34px 42px}.tile{min-width:0}.tile a{gap:8px;padding:8px;min-height:67px}.tile img{width:35px;height:35px}.tile h3{font-size:13px}.tile .arrow{font-size:13px}.catalogue{gap:7px}nav{gap:13px}.brand{font-size:13px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.tile a{transition:none}}