:root{--navy:#071321;--navy2:#0e2338;--panel:#132c43;--cream:#f3f0e9;--white:#f7fafc;--ink:#142b3d;--muted:#647b8b;--cyan:#65d6e3;--teal:#128b95;--blue:#3b82f6;--purple:#9b5de5;--amber:#f6bd60;--green:#55c781;--rule:#29455b}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);font-family:Aptos,"Segoe UI",Arial,sans-serif;font-size:17px;line-height:1.55}
img{display:block;max-width:100%}a{color:inherit}
.skip{position:fixed;top:10px;left:10px;z-index:100;visibility:hidden;background:var(--white);color:var(--navy);padding:.6rem 1rem;border-radius:6px}.skip:focus{visibility:visible}
.wrap{width:min(1180px,100% - 2.4rem);margin:0 auto}
.top{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.9rem clamp(1.2rem,5vw,4.5rem);background:var(--navy);color:var(--white)}
.brand{display:inline-flex;align-items:center;gap:.7rem;text-decoration:none;font-weight:800;font-size:1.1rem;letter-spacing:.02em;white-space:nowrap}
.top nav{display:flex;align-items:center;gap:1.3rem;font-size:.9rem;font-weight:700}
.top nav a{text-decoration:none;opacity:.9}.top nav a:hover,.top nav a:focus-visible,.top nav a[aria-current]{color:var(--cyan);opacity:1}
.top .cta{border:1px solid rgba(255,255,255,.5);border-radius:999px;padding:.45rem .9rem}
.hero{background:radial-gradient(900px 400px at 85% 0,rgba(101,214,227,.18),transparent 70%),var(--navy);color:var(--white);padding:4.5rem 0 3.5rem}
.eyebrow{margin:0 0 1rem;color:var(--cyan);font-size:.78rem;font-weight:800;letter-spacing:.16em}
.hero h1{margin:0;font-size:clamp(2.2rem,5.5vw,4.4rem);line-height:1;letter-spacing:-.04em;max-width:15ch}.hero h1 em{font-style:normal;color:var(--cyan)}
.lede{max-width:640px;margin:1.4rem 0 0;color:#d8e4eb;font-size:1.15rem}.count{margin:1.2rem 0 0;color:var(--amber);font-weight:800;font-size:.9rem}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;padding:1.6rem 0 .4rem;position:sticky;top:0;z-index:5;background:linear-gradient(var(--cream) 80%,transparent)}
.chip{font:inherit;font-size:.86rem;font-weight:800;border:1px solid var(--rule);background:#fff;color:var(--ink);border-radius:999px;padding:.45rem .95rem;cursor:pointer}
.chip:hover{border-color:var(--teal)}.chip.on{background:var(--navy);color:var(--cyan);border-color:var(--navy)}
.grp{padding:1.6rem 0 .6rem}.grp[hidden]{display:none}
.grp h2{margin:0;font-size:1.7rem;letter-spacing:-.02em}.grp h2 small{color:var(--muted);font-size:.9rem;font-weight:700;margin-left:.4rem}
.gd{margin:.2rem 0 1rem;color:var(--muted)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(235px,1fr));gap:1.1rem}
.card{background:#fff;border:1px solid #e0dbcf;border-radius:14px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 10px 30px rgba(7,19,33,.06);transition:transform .15s,box-shadow .15s}
.card:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(7,19,33,.14)}
.ph{display:grid;place-items:center;aspect-ratio:1/1;background:#fff;padding:.8rem}.ph img{max-height:100%;object-fit:contain}
.ph.noimg{background:var(--navy2)}.ph.noimg img{display:none}
.cb{padding:.9rem 1rem 1.1rem;display:flex;flex-direction:column;gap:.5rem;flex:1;border-top:1px solid #eee9dd}
.cb h3{margin:0;font-size:1rem;line-height:1.3}.cb h3 a{text-decoration:none}.cb h3 a:hover{color:var(--teal)}
.cb p{margin:0;color:var(--muted);font-size:.9rem;flex:1}
.tag{align-self:flex-start;font-size:.68rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:.2rem .55rem;border-radius:999px;color:var(--navy);background:var(--cyan)}
.t-fx{background:#f6d58e}.t-water{background:#9fdcf0}.t-fog{background:#c9d6e2}.t-air{background:#b9c2f2}.t-wind{background:#b8e4d1}.t-scent{background:#d9c3f5}.t-sound{background:var(--amber)}.t-control{background:#a9cbfa}.t-screen{background:#f4c7c0}.t-setup{background:#e2decf}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:42px;border-radius:999px;padding:.55rem 1.1rem;background:var(--cyan);color:var(--navy);font-weight:800;font-size:.88rem;text-decoration:none;transition:transform .15s}
.btn:hover,.btn:focus-visible{transform:translateY(-2px);background:#8be3ed}.btn.big{min-height:52px;font-size:1rem;padding:.7rem 1.6rem}
.pd{padding:2rem 0 3rem}.crumb{font-size:.88rem;color:var(--muted)}.crumb a{text-decoration:none}.crumb a:hover{color:var(--teal)}
.pdgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:2.4rem;align-items:start;margin-top:1rem}
.pimg{background:#fff;border:1px solid #e0dbcf;border-radius:16px;padding:1.4rem}.pimg img{margin:auto;max-height:520px;object-fit:contain}
.pd h1{margin:.7rem 0 .5rem;font-size:clamp(1.6rem,3vw,2.3rem);line-height:1.15;letter-spacing:-.02em}.lede2{font-size:1.1rem;color:var(--muted);margin:0 0 1.4rem}
.fine{font-size:.82rem;color:var(--muted)}.rel{margin:3rem 0 1rem}
footer{background:var(--navy);color:#b8c8d4;padding:2rem 0;margin-top:3rem}.disc{max-width:780px;margin:0 0 .8rem;font-size:.9rem}footer .fine{color:#8aa0b0}footer a:hover{color:var(--cyan)}
@media(max-width:760px){.pdgrid{grid-template-columns:1fr}.top nav a:not(.cta){display:none}.grid{grid-template-columns:repeat(2,1fr);gap:.7rem}.cb{padding:.7rem}.cb p{display:none}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}html{scroll-behavior:auto}}

.purchase-pair{grid-column:1/-1;border:2px solid var(--teal);border-radius:18px;padding:1rem;background:#eaf7fa}
.pair-note{margin:0 0 1rem;font-weight:800;color:var(--navy);font-size:1.1rem}
.pair-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
@media(max-width:480px){.pair-grid{grid-template-columns:1fr}.purchase-pair{padding:.7rem}}