:root {
  --ink: #111310;
  --ink-soft: #242721;
  --lime: #a7f33f;
  --lime-dark: #78c616;
  --paper: #f5f3ec;
  --sand: #e7dfd0;
  --line: rgba(17, 19, 16, 0.14);
  --muted: #6b7068;
  --white: #fff;
  --radius: 20px;
  --container: min(1180px, calc(100% - 48px));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: Inter, "Avenir Next", Avenir, "Segoe UI", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; }
body.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { color: inherit; }
.container { width: var(--container); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 100; top: 8px; left: 8px; padding: 10px 16px; background: var(--white); transform: translateY(-150%); }
.skip-link:focus { transform: none; }

.announcement { background: var(--ink); color: #dcdfd7; font-size: 12px; letter-spacing: .04em; }
.announcement__inner { min-height: 38px; display: flex; align-items: center; justify-content: space-between; }
.announcement p { margin: 0; }
.announcement a { color: var(--white); }
.pulse { display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 4px rgba(167,243,63,.12); }

.site-header { position: sticky; z-index: 20; top: 0; background: rgba(245,243,236,.88); border-bottom: 1px solid transparent; backdrop-filter: blur(18px); transition: border-color .25s, background .25s; }
.site-header.is-scrolled { border-color: var(--line); background: rgba(245,243,236,.96); }
.nav-wrap { min-height: 80px; display: flex; align-items: center; justify-content: space-between; gap: 34px; }
.brand { display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.brand__mark { width: 38px; height: 38px; display: grid; place-items: center; overflow: hidden; border-radius: 11px 11px 11px 3px; background: var(--lime); transform: rotate(-4deg); }
.brand__mark span { font-weight: 950; font-size: 25px; letter-spacing: -.12em; transform: rotate(4deg) translateX(-1px); }
.brand__text { font-weight: 900; font-size: 24px; line-height: .8; letter-spacing: -.055em; }
.brand__text > span { display: block; margin-top: 5px; font-size: 8px; font-weight: 800; letter-spacing: .22em; }
.desktop-nav { display: flex; align-items: center; gap: 30px; margin-left: auto; }
.desktop-nav a { position: relative; padding: 29px 0; font-size: 14px; font-weight: 650; }
.desktop-nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 20px; height: 2px; background: var(--lime-dark); transition: right .2s; }
.desktop-nav a:hover::after { right: 0; }
.nav-actions { display: flex; align-items: center; gap: 10px; }
.icon-button, .menu-button { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: transparent; cursor: pointer; }
.icon-button svg { width: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.menu-button { display: none; gap: 5px; padding: 12px; }
.menu-button span { width: 18px; height: 1.5px; background: var(--ink); transition: transform .2s; }
.mobile-nav { display: none; }

.button { min-height: 50px; padding: 0 22px; display: inline-flex; align-items: center; justify-content: center; gap: 18px; border: 1px solid transparent; border-radius: 999px; background: var(--ink); color: var(--white); font-size: 13px; font-weight: 750; cursor: pointer; transition: transform .2s, background .2s; }
.button:hover { transform: translateY(-2px); }
.button--small { min-height: 42px; padding: 0 18px; }
.button--lime { background: var(--lime); color: var(--ink); }
.button--lime:hover { background: #baff57; }
.text-link { display: inline-flex; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid currentColor; font-size: 13px; font-weight: 700; }

.hero { min-height: calc(100vh - 118px); min-height: 720px; position: relative; display: flex; flex-direction: column; overflow: hidden; background: #151714; color: var(--white); }
.hero__image, .hero__wash { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__image { object-fit: cover; object-position: center; }
.hero__wash { background: linear-gradient(90deg, rgba(10,12,9,.97) 0%, rgba(10,12,9,.76) 37%, rgba(10,12,9,.08) 72%), linear-gradient(0deg, rgba(10,12,9,.75) 0%, transparent 36%); }
.hero__content { position: relative; z-index: 2; padding-top: clamp(95px, 13vh, 150px); }
.eyebrow, .kicker { display: flex; align-items: center; gap: 11px; font-size: 10px; font-weight: 850; letter-spacing: .24em; }
.eyebrow::before, .kicker::before { content: ""; width: 25px; height: 1px; background: currentColor; }
.eyebrow { color: var(--lime); }
.hero h1 { max-width: 780px; margin: 24px 0 25px; font-size: clamp(55px, 7.2vw, 102px); line-height: .91; letter-spacing: -.067em; font-weight: 760; }
.hero h1 em, .contact-cta h2 em { font-family: Georgia, "Times New Roman", serif; font-weight: 400; letter-spacing: -.055em; }
.hero__intro { max-width: 520px; margin: 0; color: #c7cbc4; font-size: clamp(16px, 1.4vw, 20px); line-height: 1.55; }
.hero__actions { display: flex; align-items: center; gap: 30px; margin-top: 38px; }
.hero__footer { position: relative; z-index: 2; margin-top: auto; padding-block: 28px; display: flex; align-items: center; gap: 46px; border-top: 1px solid rgba(255,255,255,.2); }
.hero__footer > div { display: flex; align-items: center; gap: 11px; }
.hero__footer strong { color: var(--lime); font-size: 31px; letter-spacing: -.05em; }
.hero__footer span { color: #b8bdb5; font-size: 10px; line-height: 1.25; letter-spacing: .08em; text-transform: uppercase; }
.hero__footer > p { margin: 0 0 0 auto; color: #9da29a; font-size: 10px; letter-spacing: .17em; text-transform: uppercase; }
.reveal { animation: rise .65s both cubic-bezier(.2,.75,.25,1); }
.reveal--delay-1 { animation-delay: .09s; }.reveal--delay-2 { animation-delay: .18s; }.reveal--delay-3 { animation-delay: .27s; }
@keyframes rise { from { opacity: 0; transform: translateY(22px); } }

.section { padding: 120px 0; }
.section-heading { display: grid; grid-template-columns: 1.35fr .65fr; gap: 70px; align-items: end; margin-bottom: 56px; }
.section-heading h2, .service-intro h2, .contact-cta h2 { margin: 14px 0 0; font-size: clamp(42px, 5vw, 70px); line-height: .98; letter-spacing: -.06em; }
.section-heading > p { max-width: 410px; margin: 0 0 5px; color: var(--muted); font-size: 15px; line-height: 1.7; }
.kicker { color: #555b52; }
.kicker--light { color: var(--lime); }
.category-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.category-card { min-height: 440px; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; padding: 22px; border-radius: var(--radius); transition: transform .25s; }
.category-card:hover { transform: translateY(-5px); }
.category-card--dark { background: var(--ink); color: var(--white); }.category-card--light { background: #d9dcda; }.category-card--lime { background: var(--lime); }.category-card--sand { background: var(--sand); }
.category-card__number { font-size: 10px; font-weight: 800; opacity: .55; letter-spacing: .16em; }
.category-card h3 { margin: 0 0 8px; font-size: 25px; letter-spacing: -.04em; }
.category-card p { max-width: 190px; min-height: 40px; margin: 0; opacity: .65; font-size: 12px; line-height: 1.5; }
.device-art { position: relative; align-self: center; }
.laptop-art { width: 200px; height: 122px; border: 6px solid #bac0b7; border-radius: 9px; background: linear-gradient(145deg,#a8ef4b,#273821 64%); box-shadow: 0 30px 40px #0006; }
.laptop-art::after { content:""; position:absolute; width:225px; height:9px; left:-18px; bottom:-14px; border-radius:2px 2px 8px 8px; background:#d2d6d0; }
.phone-art { width: 110px; height: 203px; border: 6px solid #1b1e1a; border-radius: 21px; background: linear-gradient(150deg,#e8ebe5 10%,#90978d 90%); box-shadow: 17px 23px 30px #5c62584a; transform: rotate(8deg); }
.phone-art::after { content:""; position:absolute; inset:9px; border-radius:12px; background:linear-gradient(145deg,#25301f,#b6fa62); }
.audio-art { width: 155px; height: 160px; border: 17px solid var(--ink); border-bottom: 0; border-radius: 80px 80px 20px 20px; }
.audio-art::before,.audio-art::after { content:""; position:absolute; width:50px; height:75px; top:75px; border-radius:23px; background:var(--ink); }.audio-art::before{left:-23px}.audio-art::after{right:-23px}
.game-art { width: 190px; height: 108px; border-radius: 52px 52px 38px 38px; background:#262924; box-shadow:0 22px 30px #6f675755; transform:rotate(-7deg); }
.game-art::before { content:"+"; position:absolute; top:29px; left:43px; color:#e7eae5; font-size:34px; font-weight:300; }.game-art::after { content:"••"; position:absolute; right:39px; top:28px; color:var(--lime); font-size:25px; letter-spacing:4px; transform:rotate(30deg); }

.featured { background: #ebe9e2; }
.section-heading--compact { display: flex; align-items: flex-end; justify-content: space-between; }
.section-heading--compact h2 { font-size: clamp(40px,4vw,58px); }
.filters { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.filter { padding: 9px 15px; border: 1px solid var(--line); border-radius: 999px; background: transparent; font-size: 11px; font-weight: 700; cursor: pointer; }
.filter.is-active { background: var(--ink); color: var(--white); }
.product-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 42px 12px; }
.product-card { min-width: 0; transition: opacity .25s, transform .25s; }
.product-card.is-hidden { display: none; }
.product-card__visual { position: relative; min-height: 310px; display: grid; place-items: center; overflow: hidden; border-radius: var(--radius); }
.product-card__visual img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s cubic-bezier(.2,.7,.2,1); }
.product-card:hover .product-card__visual img { transform: scale(1.035); }
.product-card__visual--silver{background:#d9dcd7}.product-card__visual--ink{background:#181b17}.product-card__visual--lime{background:var(--lime)}.product-card__visual--cream{background:#eee8da}
.tag { position:absolute; z-index:2; left:14px; top:14px; padding:7px 10px; border-radius:999px; background:rgba(255,255,255,.7); backdrop-filter:blur(8px); font-size:9px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }.tag--light{color:#fff;background:rgba(255,255,255,.12)}
.product-card__body { display:flex; justify-content:space-between; align-items:flex-end; gap:10px; padding:18px 4px 0; }
.product-card__type { margin:0 0 5px; color:var(--muted); font-size:9px; text-transform:uppercase; letter-spacing:.12em; }.product-card h3{margin:0;font-size:17px;letter-spacing:-.03em}.product-card__price{margin:11px 0 0;font-size:13px;font-weight:800}.product-card__price span{display:block;margin-top:3px;color:#8a8f87;font-size:8px;font-weight:650;text-transform:uppercase;letter-spacing:.1em}
.quick-view { padding:0 0 3px; border:0; border-bottom:1px solid; background:none; white-space:nowrap; font-size:10px;font-weight:700;cursor:pointer; }
.demo-note { margin:42px 0 0; color:#858a82; font-size:10px; text-align:right; }

.service-section { background:var(--ink);color:#fff; }
.service-layout { display:grid;grid-template-columns:.82fr 1.18fr;gap:120px; }
.service-intro h2 { margin:22px 0 25px; max-width:520px; }.service-intro p{max-width:470px;color:#adb2aa;font-size:15px;line-height:1.75;margin:0 0 34px}
.service-list article { display:grid;grid-template-columns:40px 1fr;gap:20px;padding:35px 0;border-top:1px solid #3b3e38;align-items:start; }.service-list article:last-child{border-bottom:1px solid #3b3e38}
.service-list article>span{color:var(--lime);font-size:10px;letter-spacing:.12em}.service-list h3{margin:0 0 9px;font-size:22px;letter-spacing:-.035em}.service-list p{max-width:500px;margin:0;color:#959a92;font-size:13px;line-height:1.6}

.stores { background:var(--paper); }
.store-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}.store-card{overflow:hidden;border:1px solid var(--line);border-radius:var(--radius);background:#faf9f5}
.map-art{height:270px;position:relative;overflow:hidden;background:#dfe1dc}.map-art::before,.map-art::after{content:"";position:absolute;border:1px solid #bac0b8;border-radius:50%;}.map-art::before{width:330px;height:330px;left:-80px;top:-220px}.map-art::after{width:250px;height:250px;right:-70px;bottom:-170px}.map-art svg{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:#b6bbb2;stroke-width:2}.map-art strong{position:absolute;right:30px;top:25px;color:#c4c8c1;font-size:50px;line-height:.8;letter-spacing:-.07em;text-align:right}.map-art--serusop{background:#d5dbce}.map-art--serusop strong{color:#bac3b5;top:43px}
.map-pin{position:absolute;z-index:2;left:49%;top:48%;width:50px;height:50px;display:grid;place-items:center;border-radius:50% 50% 50% 8px;background:var(--lime);transform:rotate(-45deg);box-shadow:0 10px 28px #60695a55}.map-pin i{width:13px;height:13px;border-radius:50%;background:var(--ink)}
.store-card__body{padding:28px;display:grid;grid-template-columns:1fr auto;gap:20px}.store-card__body>div:first-child{position:relative;padding-left:40px}.store-card__body>div>span{position:absolute;left:0;top:4px;color:#92978f;font-size:9px}.store-card h3{margin:0 0 12px;font-size:27px;letter-spacing:-.045em}.store-card p{margin:0;color:var(--muted);font-size:12px;line-height:1.65}.store-links{display:flex;flex-direction:column;align-items:flex-end;justify-content:flex-end;gap:9px}.store-links a{font-size:11px;font-weight:700;border-bottom:1px solid var(--line);padding-bottom:3px}

.contact-cta{background:var(--ink-soft);color:#fff;padding:100px 0}.contact-cta__inner{position:relative}.contact-cta h2{font-size:clamp(52px,7.7vw,106px);margin:22px 0 55px}.contact-cta h2 em{color:var(--lime)}.contact-cta__actions{display:flex;align-items:center;justify-content:space-between}.contact-phone{font-size:21px;letter-spacing:-.03em}.contact-phone small{display:block;color:#8e948b;font-size:9px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:5px}
.site-footer{background:#0a0b09;color:#c5c9c2;padding:80px 0 25px}.footer-grid{display:grid;grid-template-columns:1.25fr .65fr 1fr 1.1fr;gap:60px}.brand--footer{color:#fff;margin-bottom:22px}.footer-grid h3{margin:0 0 19px;color:#fff;font-size:10px;text-transform:uppercase;letter-spacing:.15em}.footer-grid p{margin:0;color:#71766e;font-size:12px;line-height:1.7}.footer-grid>div>a:not(.brand){display:block;margin:0 0 12px;color:#969b93;font-size:12px}.footer-grid>div>a:hover{color:#fff}.signup-form{display:flex;margin-top:17px;border-bottom:1px solid #555a52}.signup-form input{width:100%;padding:12px 0;border:0;background:transparent;color:#fff;outline:0;font-size:12px}.signup-form button{border:0;background:transparent;color:var(--lime);cursor:pointer;font-size:19px}.footer-bottom{display:flex;justify-content:space-between;margin-top:75px;padding-top:20px;border-top:1px solid #292c27;color:#666b63;font-size:9px;text-transform:uppercase;letter-spacing:.1em}

dialog{width:min(650px,calc(100% - 32px));border:0;border-radius:24px;background:var(--paper);padding:0;color:var(--ink);box-shadow:0 30px 100px #0008}dialog::backdrop{background:rgba(0,0,0,.7);backdrop-filter:blur(5px)}.search-box,.quick-view-content{position:relative;padding:55px}.dialog-close{position:absolute;right:20px;top:18px;width:38px;height:38px;border:1px solid var(--line);border-radius:50%;background:transparent;font-size:23px;cursor:pointer}.search-box label{display:block;margin-bottom:25px;font-size:30px;font-weight:750;letter-spacing:-.04em}.search-box>div{display:flex;border-bottom:2px solid var(--ink)}.search-box input{width:100%;padding:15px 0;border:0;background:none;outline:0}.search-box>div button{border:0;background:none;font-weight:800;cursor:pointer}.search-box p{color:var(--muted);font-size:11px}.quick-view-content h2{font-size:42px;letter-spacing:-.05em;margin:8px 0 5px}.quick-view-content>p{color:var(--muted);line-height:1.6}.quick-view-content>div{display:flex;align-items:center;gap:25px;margin-top:28px}.dialog-category{margin:18px 0 0!important;color:#6d736a!important;font-size:9px!important;font-weight:800;text-transform:uppercase;letter-spacing:.16em}.dialog-price{margin:0 0 20px!important;color:var(--ink)!important;font-size:20px!important;font-weight:850}.dialog-specs{display:flex;flex-wrap:wrap;gap:7px;margin:22px 0 0;padding:0;list-style:none}.dialog-specs li{padding:8px 11px;border:1px solid var(--line);border-radius:999px;color:#555b52;font-size:10px;font-weight:650}.dialog-note{display:block;margin-top:25px;color:#8d9289;font-size:9px;line-height:1.5}.toast{position:fixed;z-index:50;right:24px;bottom:24px;padding:16px 22px;border-radius:10px;background:var(--lime);font-size:12px;font-weight:750;transform:translateY(100px);opacity:0;transition:.3s}.toast.is-visible{transform:none;opacity:1}

@media (max-width: 960px){
  .desktop-nav,.nav-actions>.button,.icon-button{display:none}.menu-button{display:grid}.mobile-nav{position:fixed;z-index:19;inset:119px 0 auto;display:flex;flex-direction:column;padding:20px 24px 35px;background:var(--paper);border-bottom:1px solid var(--line);transform:translateY(-130%);transition:transform .28s}.mobile-nav.is-open{transform:none}.mobile-nav a{padding:16px 0;border-bottom:1px solid var(--line);font-size:20px;font-weight:700}
  .hero__image{object-position:63% center}.hero__wash{background:linear-gradient(90deg,rgba(10,12,9,.96),rgba(10,12,9,.55) 62%,rgba(10,12,9,.18)),linear-gradient(0deg,rgba(10,12,9,.75),transparent 45%)}
  .category-grid,.product-grid{grid-template-columns:repeat(2,1fr)}.section-heading{grid-template-columns:1fr 1fr}.service-layout{grid-template-columns:1fr;gap:70px}.footer-grid{grid-template-columns:1.2fr 1fr;gap:50px}
}
@media (max-width: 680px){
  :root{--container:min(100% - 34px,1180px)}.announcement__inner{min-height:34px}.announcement p{font-size:9px}.announcement a{display:none}.nav-wrap{min-height:68px}.mobile-nav{inset:102px 0 auto}.hero{min-height:700px}.hero__image{object-position:67% center}.hero__wash{background:linear-gradient(90deg,rgba(10,12,9,.97),rgba(10,12,9,.75) 62%,rgba(10,12,9,.25)),linear-gradient(0deg,rgba(10,12,9,.8),transparent 48%)}.hero__content{padding-top:92px}.hero h1{font-size:54px}.hero__intro{max-width:88%;font-size:15px}.hero__actions{align-items:flex-start;flex-direction:column;gap:16px}.hero__footer{gap:25px}.hero__footer>p{display:none}.hero__footer strong{font-size:25px}
  .section{padding:82px 0}.section-heading,.section-heading--compact{display:block;margin-bottom:40px}.section-heading>p{margin-top:24px}.section-heading h2{font-size:44px}.category-grid{grid-template-columns:1fr 1fr}.category-card{min-height:325px;padding:17px}.category-card h3{font-size:20px}.category-card p{padding-right:0}.laptop-art{width:125px;height:76px;border-width:4px}.laptop-art::after{width:142px;height:6px;left:-13px;bottom:-10px}.phone-art{width:76px;height:140px}.audio-art{width:95px;height:105px;border-width:11px}.audio-art::before,.audio-art::after{width:34px;height:52px;top:49px}.audio-art::before{left:-17px}.audio-art::after{right:-17px}.game-art{width:126px;height:75px}.game-art::before{top:18px;left:29px;font-size:26px}.game-art::after{right:22px;top:16px}
  .section-heading--compact h2{margin-bottom:28px}.filters{justify-content:flex-start}.product-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:15px;margin-right:calc((100vw - var(--container))/ -2)}.product-card{min-width:80vw;scroll-snap-align:start}.product-card__visual{min-height:290px}.demo-note{text-align:left;line-height:1.5}.store-grid{grid-template-columns:1fr}.map-art{height:230px}.store-card__body{grid-template-columns:1fr}.store-links{align-items:flex-start}.contact-cta h2{font-size:55px}.contact-cta__actions{align-items:flex-start;flex-direction:column;gap:28px}.footer-grid{grid-template-columns:1fr 1fr;gap:42px 20px}.footer-grid>div:first-child,.footer-grid>div:last-child{grid-column:1/-1}.footer-bottom{flex-direction:column;gap:8px}.search-box,.quick-view-content{padding:50px 25px 30px}.quick-view-content>div{align-items:flex-start;flex-direction:column}
}
@media (max-width: 430px){.category-grid{grid-template-columns:1fr}.category-card{min-height:360px}.device-art{transform:scale(1.12)}.phone-art{transform:rotate(8deg) scale(1.08)}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
