/* NexusHome landing page styles. Ported verbatim from the approved design
   (airnexus-marketing/nexushome-landing). Scoped entirely under .nx so nothing here
   touches the site's shared CSS or tokens. Accent uses the site --red (#CC2222),
   applied via the .nx root inline style. Approved design exception (see CLAUDE.md). */

<style>
@property --air {
  syntax: '<color>';
  inherits: true;
  initial-value: #45d4e6;
}
html, body { margin: 0; background: #000; }
html { scroll-behavior: smooth; }

/* ---------- tokens ---------- */
.nx {
  --ink: #f5f5f7;
  --mute: #86868b;
  --cool: #45d4e6;
  --accent-hi: #ff5f52;
  --ease: cubic-bezier(.22, .8, .2, 1);
  --spring: cubic-bezier(.3, 1.35, .55, 1);
  --nav: 52px;
  --devW: min(1040px, 88vw);
  position: relative;
  width: 100%;
  min-height: 100%;
  background: #000;
  color: var(--ink);
  font-family: var(--fb);
  font-size: 17px;
  line-height: 1.47;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
@supports (color: oklch(from red max(l, 0.7) c h)) {
  .nx { --accent-hi: oklch(from var(--accent) max(l, 0.7) c h); }
}
.nx *, .nx *::before, .nx *::after { box-sizing: border-box; }
.nx img { display: block; max-width: 100%; }
.nx a { color: inherit; }
.nx button { font-family: inherit; -webkit-tap-highlight-color: transparent; }
.nx :focus-visible { outline: 3px solid var(--cool); outline-offset: 3px; }
.nx ::selection { background: rgba(69, 212, 230, .32); }
.nx sup { font-size: .58em; line-height: 0; vertical-align: .62em; }

/* ---------- type ---------- */
.eyebrow { margin: 0 0 16px; font-family: var(--fd); font-weight: 600; font-size: clamp(19px, 1.6vw, 24px); line-height: 1.2; letter-spacing: -0.018em; color: var(--mute); }
.h1, .h2, .h3 { margin: 0; font-family: var(--fd); text-wrap: balance; }
.h1 { font-weight: 700; font-size: clamp(50px, 7.4vw, 108px); line-height: 1; letter-spacing: -0.036em; }
.h2 { font-weight: 650; font-size: clamp(40px, 5.8vw, 80px); line-height: 1.05; letter-spacing: -0.031em; }
.h2-sm { font-size: clamp(36px, 4.6vw, 64px); }
.h3 { font-weight: 600; font-size: clamp(26px, 2.4vw, 34px); line-height: 1.15; letter-spacing: -0.022em; }
.h1 > span, .h2 > span { display: block; }
.h1 > span.grad { display: inline-block; padding-bottom: .06em; }
.lede { margin: 24px 0 0; max-width: 34em; font-size: clamp(19px, 1.55vw, 22px); line-height: 1.45; font-weight: 500; letter-spacing: -0.014em; color: var(--mute); text-wrap: pretty; }
.dim { color: var(--mute); }
.red { color: var(--accent-hi); }
.grad { background-image: linear-gradient(92deg, #45d4e6 0%, #72b6ff 26%, #b48dff 52%, #ff7c6d 78%, #ffa55f 100%); background-size: 200% 100%; background-position: 0% 50%; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.fine { margin: 18px 0 0; font-size: 12px; line-height: 1.5; color: var(--mute); }
.lt, .wh { color: #1d1d1f; }
.lt { background: #f5f5f7; }
.wh { background: #fff; }
.lt .lede, .wh .lede, .lt .fine, .wh .fine, .lt .eyebrow, .wh .eyebrow { color: #6e6e73; }
.lt .red, .wh .red { color: var(--accent); }
.lt .dim, .wh .dim { color: #86868b; }

/* ---------- layout ---------- */
.wrap { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }
.sec { position: relative; padding: clamp(96px, 12vw, 176px) 0; scroll-margin-top: var(--nav); }
.sec-head { max-width: 920px; margin: 0 auto clamp(48px, 6vw, 80px); text-align: center; }
.sec-head .lede { margin-inline: auto; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 24px; border: 0; border-radius: 999px; background: var(--accent); color: #fff; font: 600 17px/1 var(--fb); letter-spacing: -0.01em; text-decoration: none; cursor: pointer; box-shadow: 0 10px 28px -10px var(--accent); transition: transform .3s var(--spring), filter .25s; }
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: scale(.97); }
.btn-sm { min-height: 34px; padding: 0 15px; font-size: 14px; box-shadow: none; }
.btn-lg { min-height: 54px; width: 100%; }
.tlink { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--cool); font: 500 19px/1 var(--fb); letter-spacing: -0.012em; text-decoration: none; }
.tlink:hover { text-decoration: underline; text-underline-offset: 5px; }
.tlink svg { width: 8px; height: 14px; }

/* ---------- local nav ---------- */
.lnav { position: sticky; top: 0; z-index: 60; height: var(--nav); background: rgba(14, 14, 16, .66); -webkit-backdrop-filter: saturate(180%) blur(22px); backdrop-filter: saturate(180%) blur(22px); box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .08); }
.lnav-in { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; color: var(--ink); text-decoration: none; }
.brand img { width: 20px; height: auto; }
.wordmark { font-family: 'Exo 2', sans-serif; font-weight: 200; font-size: 14px; line-height: 1; letter-spacing: .32em; color: #e5e5ea; }
.brand-div { width: 1px; height: 16px; background: rgba(255, 255, 255, .22); }
.brand-prod { font-family: var(--fd); font-weight: 600; font-size: 16px; letter-spacing: -0.02em; }
.lnav-links { display: flex; align-items: center; gap: 28px; }
.nl { display: inline-flex; align-items: center; min-height: 44px; font-size: 13px; color: rgba(245, 245, 247, .78); text-decoration: none; transition: color .2s; }
.nl:hover { color: #fff; }

/* ---------- hero ---------- */
.hero { position: relative; }
.hero-stage { position: relative; display: flex; flex-direction: column; align-items: center; padding: clamp(56px, 9vh, 104px) 0 clamp(72px, 9vw, 120px); }
.hero-copy { position: relative; z-index: 1; width: min(980px, calc(100% - 40px)); margin-inline: auto; text-align: center; }
.hero-copy .eyebrow { color: #a1a1a6; }
.hero-copy .lede { margin-inline: auto; max-width: 25em; }
.ctas { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 28px; margin-top: 32px; }
.hero-device { position: relative; z-index: 2; width: var(--devW); margin: clamp(48px, 7vw, 88px) auto 0; isolation: isolate; }
.hero-glow { position: absolute; left: 50%; top: 58%; z-index: -1; width: 112%; height: 72%; transform: translateX(-50%); background: radial-gradient(50% 50% at 50% 50%, rgba(69, 212, 230, .38), rgba(69, 212, 230, 0) 70%); filter: blur(28px); pointer-events: none; }

/* ---------- devices ---------- */
.dev-box { container-type: inline-size; position: relative; }
.device { position: relative; padding: 2.1cqi; border-radius: 3.3cqi; background: linear-gradient(180deg, #212226 0%, #0c0d0f 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), inset 0 1.5px 0 rgba(255, 255, 255, .2), 0 0 0 1px rgba(0, 0, 0, .85), 0 50px 90px -30px rgba(0, 0, 0, .85); }
.lt .device, .wh .device { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), inset 0 1.5px 0 rgba(255, 255, 255, .2), 0 0 0 1px rgba(0, 0, 0, .9), 0 44px 70px -34px rgba(0, 0, 0, .5), 0 14px 26px -14px rgba(0, 0, 0, .3); }
.device-screen { position: relative; aspect-ratio: 1.706; overflow: hidden; border-radius: 1.3cqi; background: #000; }
.device-screen > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.glare { position: absolute; top: 0; bottom: 0; left: -40%; right: -40%; background: linear-gradient(100deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, .13) 50%, rgba(255, 255, 255, 0) 62%); opacity: 0; pointer-events: none; }
.scr { opacity: 0; transform: scale(1.015); transition: opacity .7s var(--ease), transform 1s var(--ease); }
.scr[data-on="true"] { opacity: 1; transform: scale(1); }

/* ---------- segmented control ---------- */
.seg { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); isolation: isolate; }
.seg-thumb { position: absolute; z-index: -1; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / var(--n)); border-radius: 999px; background: linear-gradient(180deg, #fff, #ececf0); box-shadow: 0 4px 12px rgba(0, 0, 0, .28), inset 0 1px 0 #fff; transition: transform .55s var(--spring), background-color .5s; }
.seg button { min-height: 40px; padding: 0 12px; border: 0; border-radius: 999px; background: transparent; color: rgba(245, 245, 247, .86); font: 600 14px/1 var(--fb); letter-spacing: -0.005em; white-space: nowrap; cursor: pointer; transition: color .3s; }
.seg button[aria-pressed="true"] { color: #000; }
.seg-mode .seg-thumb { background: var(--air); box-shadow: 0 6px 18px -4px var(--air), inset 0 1px 0 rgba(255, 255, 255, .5); }
.seg-sm button { min-height: 34px; font-size: 13px; }
.seg-lt { background: rgba(0, 0, 0, .06); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .04); }
.seg-lt .seg-thumb { background: #fff; box-shadow: 0 3px 10px rgba(0, 0, 0, .12); }
.seg-lt button { color: #1d1d1f; }
.seg-lt button[aria-pressed="true"] { color: #000; }

/* ---------- the point ---------- */
.point { padding-top: clamp(120px, 15vw, 210px); }
.point-text { margin: 0; max-width: 16.5em; font-family: var(--fd); font-weight: 650; font-size: clamp(34px, 4.7vw, 64px); line-height: 1.12; letter-spacing: -0.03em; }
.w { display: inline-block; }
.w.s1 { color: var(--mute); }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; margin-top: clamp(64px, 8vw, 112px); padding-top: 30px; border-top: 1px solid rgba(255, 255, 255, .14); }
.stat-big { margin: 0 0 10px; font: 700 clamp(32px, 3.4vw, 50px)/1 var(--fd); letter-spacing: -0.04em; }
.stat-cap { margin: 0; font-size: 15px; line-height: 1.4; color: var(--mute); max-width: 15em; }

/* ---------- try it ---------- */
.try { --air: #45d4e6; transition: --air .8s var(--ease); background: radial-gradient(80% 55% at 50% 44%, color-mix(in oklab, var(--air) 13%, #000) 0%, #000 72%); }
.try-grid { display: grid; grid-template-columns: minmax(0, 1.58fr) minmax(340px, 1fr); gap: 24px; align-items: start; }
.plan-col { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.house { position: relative; container-type: inline-size; aspect-ratio: 16 / 11; }
.scene { position: absolute; inset: 0; perspective: 150cqi; perspective-origin: 50% 30%; pointer-events: none; }
.world { position: absolute; left: 50%; top: 47%; width: 72cqi; height: 47.6cqi; margin: -23.8cqi 0 0 -36cqi; transform-style: preserve-3d; transform: rotateX(55deg) rotateZ(-33deg); --wh: 3.8cqi; --dz: 7cqi; }
.world * { transform-style: preserve-3d; }
.pool { position: absolute; inset: -30%; transform: translateZ(-3cqi); background: radial-gradient(50% 50% at 50% 50%, color-mix(in oklab, var(--air) 26%, transparent), transparent 70%); }
.slab-under { position: absolute; inset: 0; border-radius: 1.2cqi; transform: translateZ(-1.3cqi); background: linear-gradient(135deg, #2a2d33, #0d0e10 70%); box-shadow: 0 0 0 .12cqi rgba(255, 255, 255, .07); }
.slab { position: absolute; inset: 0; border-radius: 1.2cqi; background: linear-gradient(135deg, #202328 0%, #15171a 60%, #111315 100%); box-shadow: inset 0 0 0 .12cqi rgba(255, 255, 255, .1); }
.rm { position: absolute; }
.rm-floor { position: absolute; inset: .35cqi; border-radius: .5cqi; background: #1a1d21; box-shadow: inset 0 0 2.2cqi rgba(0, 0, 0, .55), inset 0 0 0 .1cqi rgba(255, 255, 255, .04); }
.rm-hall .rm-floor { background: #16181c; }
.rm-glow { position: absolute; inset: .35cqi; border-radius: .5cqi; opacity: 0; transition: opacity .8s var(--ease); background: radial-gradient(60% 70% at var(--gx, 50%) var(--gy, 50%), color-mix(in oklab, var(--air) 70%, transparent) 0%, color-mix(in oklab, var(--air) 18%, transparent) 55%, transparent 100%); }
.rm[data-on="true"] .rm-glow { opacity: 1; }
.fu { position: absolute; border-radius: .5cqi; transform: translateZ(var(--fh, .9cqi)); background: linear-gradient(135deg, #34373d, #22252a); box-shadow: inset 0 0 0 .1cqi rgba(255, 255, 255, .12); }
.fu-s { position: absolute; border-radius: .6cqi; transform: translate(.5cqi, .6cqi); background: rgba(0, 0, 0, .45); filter: blur(.35cqi); }
.wl { position: absolute; }
.wl.h { height: var(--wh); transform-origin: 0 0; transform: rotateX(90deg); background: linear-gradient(to bottom, rgba(255, 255, 255, .07), rgba(255, 255, 255, .24)); border-bottom: .18cqi solid rgba(255, 255, 255, .75); }
.wl.v { width: var(--wh); transform-origin: 0 0; transform: rotateY(-90deg); background: linear-gradient(to right, rgba(255, 255, 255, .07), rgba(255, 255, 255, .24)); border-right: .18cqi solid rgba(255, 255, 255, .75); }
.wl.lo { --wh: 1.2cqi; }
.dc { position: absolute; transform: translateZ(var(--dz)); border-radius: 1cqi; background: rgba(255, 255, 255, .12); transition: background-color .6s var(--ease), box-shadow .6s var(--ease); }
.dc.h { height: .6cqi; margin-top: -.3cqi; }
.dc.v { width: .6cqi; margin-left: -.3cqi; }
.dc::after { content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: 0; transition: opacity .5s; }
.dc.h::after { background: linear-gradient(90deg, transparent 0, rgba(255, 255, 255, .95) 50%, transparent 100%) no-repeat; background-size: 9cqi 100%; }
.dc.v::after { background: linear-gradient(180deg, transparent 0, rgba(255, 255, 255, .95) 50%, transparent 100%) no-repeat; background-size: 100% 9cqi; }
.dc[data-on="true"] { background: var(--air); box-shadow: 0 0 1.4cqi color-mix(in oklab, var(--air) 80%, transparent), 0 0 .3cqi var(--air); }
.dc[data-on="true"]::after { opacity: .9; }
.dp { position: absolute; width: 1.7cqi; height: 1.7cqi; margin: -.85cqi 0 0 -.85cqi; transform: translateZ(calc(var(--dz) + .06cqi)); border-radius: 50%; background: rgba(12, 14, 16, .92); box-shadow: inset 0 0 0 .14cqi rgba(255, 255, 255, .7); }
.dp i { position: absolute; left: 20%; right: 20%; top: 50%; height: .3cqi; margin-top: -.15cqi; border-radius: .2cqi; background: #fff; transition: transform .6s var(--spring), background-color .4s; }
.dp[data-on="false"] i { transform: rotate(90deg); background: #8e8e93; }
.ot { position: absolute; width: 0; height: 0; }
.ot .ld { position: absolute; left: -.08cqi; top: 0; width: .16cqi; height: var(--lh, 3.8cqi); transform-origin: 50% 0; transform: translateZ(var(--dz)) rotateX(90deg); background: linear-gradient(to bottom, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0)); }
.ot .col { position: absolute; left: -1.6cqi; top: 0; width: 3.2cqi; height: var(--dz); transform-origin: 50% 0; transform: rotateX(90deg); background: linear-gradient(to bottom, transparent, color-mix(in oklab, var(--air) 45%, transparent)); opacity: 0; transition: opacity .6s; -webkit-mask-image: linear-gradient(90deg, transparent, #000 35%, #000 65%, transparent); mask-image: linear-gradient(90deg, transparent, #000 35%, #000 65%, transparent); }
.ot .col.c2 { transform: rotateZ(90deg) rotateX(90deg); }
.ot .pt { position: absolute; left: -.45cqi; top: -.45cqi; width: .9cqi; height: .9cqi; border-radius: 50%; background: #fff; box-shadow: 0 0 .8cqi var(--air), 0 0 .3cqi #fff; opacity: 0; }
.ot .pt.p2 { left: .5cqi; }
.ot .pt.p3 { left: -1.3cqi; }
.ot .rp { position: absolute; left: -3cqi; top: -3cqi; width: 6cqi; height: 6cqi; border-radius: 50%; box-shadow: inset 0 0 0 .22cqi var(--air); opacity: 0; transform: translateZ(.1cqi); }
.ot[data-on="true"] .col { opacity: 1; }
.unit { position: absolute; transform: translateZ(calc(var(--dz) - 1cqi)); }
.unit > b { position: absolute; display: block; }
.unit .u-top { inset: 0; transform: translateZ(2cqi); border-radius: .5cqi; background: linear-gradient(135deg, #3a3e44, #1d2024); box-shadow: inset 0 0 0 .14cqi rgba(255, 255, 255, .28); }
.unit .u-front { left: 0; right: 0; top: 100%; height: 2cqi; transform-origin: 0 0; transform: rotateX(90deg); background: linear-gradient(to bottom, #15171a, #2e3136); }
.unit .u-left { top: 0; bottom: 0; left: 0; width: 2cqi; transform-origin: 0 0; transform: rotateY(-90deg); background: linear-gradient(to right, #15171a, #26292e); }
.grille { position: absolute; left: 50%; top: 50%; width: 3.8cqi; height: 3.8cqi; margin: -1.9cqi 0 0 -1.9cqi; border-radius: 50%; background: #111316; box-shadow: inset 0 0 0 .16cqi rgba(255, 255, 255, .35); transform: translateZ(.02cqi); transition: box-shadow .6s; }
.unit[data-run="true"] .grille { box-shadow: inset 0 0 0 .16cqi rgba(255, 255, 255, .35), 0 0 1.8cqi color-mix(in oklab, var(--air) 70%, transparent); }
.blades { position: absolute; inset: .45cqi; border-radius: 50%; background: conic-gradient(#e5e5ea 0 22deg, transparent 22deg 90deg, #e5e5ea 90deg 112deg, transparent 112deg 180deg, #e5e5ea 180deg 202deg, transparent 202deg 270deg, #e5e5ea 270deg 292deg, transparent 292deg); }
.pill { position: absolute; z-index: 3; transform: translate(-50%, -100%); display: inline-flex; align-items: center; gap: .55em; min-height: 2.7em; padding: 0 1em 0 .8em; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .95); color: #1d1d1f; font: 600 clamp(10px, 2cqi, 15px)/1 var(--fb); letter-spacing: -0.01em; white-space: nowrap; cursor: pointer; box-shadow: 0 12px 30px rgba(0, 0, 0, .45); transition: background-color .45s var(--ease), color .45s var(--ease), box-shadow .35s var(--ease), transform .45s var(--spring); }
.pill:hover { transform: translate(-50%, -100%) scale(1.04); }
.pill:active { transform: translate(-50%, -100%) scale(.95); }
.pdot { width: .6em; height: .6em; border-radius: 50%; background: var(--air); box-shadow: 0 0 12px var(--air); transition: background-color .4s, box-shadow .4s; }
.ptemp { color: #6e6e73; font-weight: 500; font-variant-numeric: tabular-nums; }
.pill[data-on="false"] { background: rgba(40, 40, 44, .9); color: #d1d1d6; box-shadow: 0 8px 20px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(255, 255, 255, .1); }
.pill[data-on="false"] .pdot { background: #636366; box-shadow: none; }
.pill[data-on="false"] .ptemp { color: #98989d; }
.pill[data-sel="true"] { box-shadow: 0 0 0 2.5px var(--air), 0 12px 30px rgba(0, 0, 0, .45); }
.pill[data-sel="true"][data-on="false"] { box-shadow: 0 0 0 2px rgba(255, 255, 255, .7), 0 8px 20px rgba(0, 0, 0, .45); }
@container (max-width: 560px) {
  .unit-label { display: none; }
}
.unit-label { position: absolute; z-index: 2; transform: translate(-50%, -100%); text-shadow: 0 1px 6px #000; font-size: clamp(8px, 1.45cqi, 11px); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #a1a1a6; white-space: nowrap; pointer-events: none; }
.plan-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; padding: 0 6px; }
.plan-cap { margin: 0; max-width: 30em; font-size: 14px; line-height: 1.45; color: var(--mute); }
.presets { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.presets-k { margin-right: 4px; font-size: 13px; font-weight: 600; color: var(--mute); }
.preset { min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); color: #f5f5f7; font: 600 14px/1 var(--fb); cursor: pointer; transition: background-color .2s, transform .25s var(--spring); }
.preset:hover { background: rgba(255, 255, 255, .15); }
.preset:active { transform: scale(.95); }

.plan-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.plan-ctl .seg { width: min(360px, 100%); }
.sn { position: absolute; width: 1.5cqi; height: 1.5cqi; margin: -.75cqi 0 0 -.75cqi; transform: translateZ(2.3cqi) rotateX(90deg); }
.sn i { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #d4d8dd 72%); box-shadow: 0 0 0 .1cqi rgba(0, 0, 0, .4), 0 0 .8cqi rgba(255, 255, 255, .35); }
.sn::after { content: ""; position: absolute; inset: -.15cqi; border-radius: 50%; box-shadow: 0 0 0 .16cqi var(--air); opacity: 0; }
.appdev { justify-self: center; width: min(392px, 100%); padding: 10px; border-radius: 54px; background: linear-gradient(145deg, #3a3a3c, #1c1c1e 42%, #2c2c2e); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .16), 0 50px 100px -40px #000; }
.appui { --mc: var(--air); position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; min-height: 660px; padding: 14px 14px 20px; border-radius: 44px; color: #fff; text-align: left; font-family: var(--fb); background: radial-gradient(130% 55% at 50% 118%, rgba(70, 120, 255, .42), rgba(70, 120, 255, 0) 62%), linear-gradient(#0b1225, #04060d); }
.appui::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .75; background-image: radial-gradient(1.2px 1.2px at 9% 14%, #fff, transparent), radial-gradient(1px 1px at 27% 31%, #cfd8ff, transparent), radial-gradient(1.2px 1.2px at 74% 9%, #fff, transparent), radial-gradient(1px 1px at 91% 38%, #dfe6ff, transparent), radial-gradient(1px 1px at 58% 22%, #fff, transparent), radial-gradient(1.1px 1.1px at 16% 67%, #dfe6ff, transparent), radial-gradient(1px 1px at 84% 72%, #fff, transparent), radial-gradient(1px 1px at 47% 88%, #cfd8ff, transparent), radial-gradient(1px 1px at 36% 52%, #fff, transparent), radial-gradient(1.2px 1.2px at 66% 60%, #dfe6ff, transparent); }
.appui::after { content: ""; position: absolute; left: -40%; right: -40%; top: 88%; height: 60%; z-index: -1; border-radius: 50%; pointer-events: none; box-shadow: 0 -1px 0 rgba(160, 190, 255, .55), inset 0 24px 50px rgba(70, 120, 255, .2); }
.au-bar { display: flex; align-items: center; justify-content: space-between; height: 40px; }
.au-back { width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: #fff; cursor: pointer; opacity: .45; transition: opacity .3s, background-color .2s; }
.appui[data-screen="detail"] .au-back { opacity: 1; }
.au-back:hover { background: rgba(255, 255, 255, .08); }
.au-logo { display: flex; align-items: center; gap: 7px; }
.au-logo img { width: 17px; height: auto; }
.au-logo span { font: 200 13px/1 'Exo 2', sans-serif; letter-spacing: .32em; }
.au-icons { display: flex; gap: 12px; padding-right: 6px; }
.au-dots { display: flex; justify-content: center; gap: 5px; margin: 4px 0 12px; }
.au-dots i { width: 5px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .28); }
.au-dots i.on { width: 16px; background: #4a7dff; }
.au-screen { position: relative; flex: 1 1 auto; animation: auin .45s cubic-bezier(.2, .8, .2, 1) both; }
.au-card { padding: 12px 14px; border-radius: 16px; background: rgba(255, 255, 255, .035); border: 1px solid rgba(255, 255, 255, .13); }
.au-sum-h { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.au-ic { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; background: rgba(74, 125, 255, .24); color: #9db7ff; }
.au-sum-b { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.au-ringw { position: relative; flex: none; width: 48px; height: 48px; }
.au-ring { display: block; width: 48px; height: 48px; }
.au-rn { position: absolute; inset: 0; display: grid; place-items: center; font-size: 16px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.au-rtrack { fill: none; stroke: rgba(255, 255, 255, .12); stroke-width: 4; }
.au-rval { fill: none; stroke: #4a7dff; stroke-width: 4; stroke-linecap: round; transition: stroke-dasharray .5s ease; }
.au-sum-b b { display: block; font-size: 17px; font-weight: 700; }
.au-sum-b small { display: block; margin-top: 2px; font-size: 12.5px; color: #9aa3b5; }
.au-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.au-tile { display: flex; flex-direction: column; align-items: center; padding: 8px 6px 12px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, .14); background: linear-gradient(160deg, rgba(66, 98, 190, .3), rgba(18, 28, 66, .4)); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #fff; font: inherit; cursor: pointer; transition: transform .15s, border-color .3s, background-color .3s; -webkit-tap-highlight-color: transparent; }
.au-tile:active { transform: scale(.97); }
.au-tile[data-sel="true"] { border-color: rgba(255, 255, 255, .55); }
.au-dial { position: relative; display: block; width: 100%; max-width: 116px; container-type: inline-size; }
.au-dial svg { display: block; width: 100%; height: auto; }
.au-track { fill: none; stroke: rgba(255, 255, 255, .13); stroke-width: 5.5; stroke-linecap: round; }
.au-val { fill: none; stroke: var(--mc); stroke-width: 5.5; stroke-linecap: round; transition: stroke-dasharray .6s ease, stroke .4s; }
.au-knob { fill: #fff; transform-origin: 50px 48px; transition: transform .6s ease, fill .4s; }
.au-big .au-knob { transform-origin: 100px 100px; }
.au-read { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2.6cqi; padding-top: 1cqi; line-height: 1; white-space: nowrap; pointer-events: none; }
.au-read-big { gap: 3.6cqi; padding-top: 3cqi; }
.au-tt { font-size: 14cqi; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }
.au-tm { font-size: 8.4cqi; font-weight: 500; color: var(--mc); transition: color .4s; }
.au-tn { margin-top: -4px; font-size: 13.5px; font-weight: 600; }
.au-tile[data-on="false"] { background: rgba(255, 255, 255, .03); border-color: rgba(255, 255, 255, .1); }
.au-tile[data-on="false"] .au-val { stroke: rgba(255, 255, 255, .28); }
.au-tile[data-on="false"] .au-tm { color: #8e8e93; }
.au-tile[data-on="false"] .au-knob { fill: #8e8e93; }
.au-detail { display: flex; flex-direction: column; justify-content: center; padding: 6px 0 36px; text-align: center; }
.au-d-title { margin: 0 0 2px; font-size: 17px; font-weight: 600; }
.au-bigw { position: relative; width: min(64vw, 250px); margin: 4px auto 0; container-type: inline-size; }
.au-big { display: block; width: 100%; height: auto; }
.au-big .au-track, .au-big .au-val { stroke-width: 9; }
.au-dt { font-size: 12.5cqi; font-weight: 600; color: #fff; font-variant-numeric: tabular-nums; }
.au-dm { font-size: 6.3cqi; font-weight: 500; color: var(--mc); transition: color .4s; }
.appui[data-zone="off"] .au-big .au-val { stroke: rgba(255, 255, 255, .28); }
.appui[data-zone="off"] .au-dm { color: #8e8e93; }
.appui[data-zone="off"] .au-big .au-knob { fill: #8e8e93; }
.au-set { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: -8px; color: #c9ccd6; font-size: 18px; }
.au-set output { min-width: 4.6em; text-align: center; font-variant-numeric: tabular-nums; }
.au-set button { width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: #c9ccd6; cursor: pointer; transition: background-color .2s, opacity .2s; }
.au-set button:hover { background: rgba(255, 255, 255, .08); }
.au-set button:disabled { opacity: .3; cursor: default; }
.au-ctl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 18px; }
.au-ctl button { min-height: 72px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .03); color: #e5e5ea; font-size: 11.5px; font-weight: 600; letter-spacing: .05em; cursor: pointer; transition: background-color .2s; }
.au-ctl button:hover { background: rgba(255, 255, 255, .07); }
.au-ctl .au-p svg, .au-ctl .au-m svg { color: var(--mc); }
.appui[data-zone="off"] .au-ctl .au-p svg { color: #8e8e93; }

/* ---------- panel and app ---------- */
.scr-stage { display: flex; justify-content: center; }
.scr-stage .dev-box { width: min(980px, 100%); }
.scr-controls { display: flex; flex-direction: column; align-items: center; gap: 18px; margin-top: 44px; }
.seg-scr { width: min(460px, 100%); }
.scr-cap { margin: 0; max-width: 34em; min-height: 3em; text-align: center; font-size: 17px; line-height: 1.45; color: #6e6e73; }
.scr-controls .fine { margin: -8px 0 0; text-align: center; max-width: 40em; }

.pocket { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(40px, 7vw, 110px); align-items: center; margin: clamp(110px, 13vw, 180px) 0; }
.phone-box { container-type: inline-size; width: min(320px, 74vw); justify-self: center; }
.phone { padding: 3.4cqi; border-radius: 15.5cqi; background: linear-gradient(145deg, #3a3a3c, #1c1c1e 42%, #2c2c2e); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .18), 0 44px 70px -34px rgba(0, 0, 0, .5), 0 14px 24px -14px rgba(0, 0, 0, .3); }
.phone-scr { position: relative; aspect-ratio: 620 / 1180; overflow: hidden; border-radius: 12.4cqi; background: #000; }
.phone-scr img { width: 100%; height: auto; }
.phone-scr::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 22%; background: linear-gradient(180deg, rgba(4, 7, 16, 0), rgba(4, 7, 16, .95)); }
.feats { list-style: none; margin: 36px 0 0; padding: 0; display: grid; gap: 22px; }
.feats li { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 16px; align-items: start; font-size: 17px; line-height: 1.45; color: #6e6e73; }
.feats strong { color: #1d1d1f; font-weight: 600; }
.ficon { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; background: #fff; color: #1d1d1f; box-shadow: 0 1px 2px rgba(0, 0, 0, .06); }
.ficon svg { width: 22px; height: 22px; }
.get { margin: 36px 0 0; font-size: 14px; font-weight: 600; color: #1d1d1f; }
.stores { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.stores a { display: inline-flex; align-items: center; min-height: 44px; border-radius: 9px; }
.stores img { height: 44px; width: auto; }

.bento-head { margin-bottom: clamp(36px, 4vw, 56px); }
.bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(240px, auto); gap: 16px; }
.tile { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 12px; padding: 30px; border-radius: 30px; background: #fff; }
.t-hero { grid-column: span 2; grid-row: span 2; }
.t-k { margin: 0; font-size: 14px; font-weight: 600; color: #6e6e73; }
.t-h { margin: 0; font: 650 clamp(26px, 2.5vw, 34px)/1.12 var(--fd); letter-spacing: -0.025em; color: #1d1d1f; }
.t-h span { display: block; color: #86868b; }
.t-p { margin: auto 0 0; font-size: 17px; line-height: 1.4; color: #1d1d1f; font-weight: 600; letter-spacing: -0.015em; }
.t-hero .seg { width: min(300px, 100%); margin-top: 8px; }
.t-stage { flex: 1; width: 100%; max-width: 580px; align-self: center; display: flex; align-items: center; justify-content: center; padding: 28px 0 6px; min-height: 280px; }
.t-dev { transition: width .8s var(--spring); }
.t-big { margin: 8px 0 0; font: 650 clamp(56px, 5.4vw, 76px)/1 var(--fd); letter-spacing: -0.045em; color: #1d1d1f; font-variant-numeric: tabular-nums; }
.mchips, .nchips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.mchip { display: inline-flex; align-items: center; gap: 7px; min-height: 32px; padding: 0 12px 0 10px; border-radius: 999px; background: #f5f5f7; font-size: 14px; font-weight: 600; color: #1d1d1f; }
.mchip i { width: 9px; height: 9px; border-radius: 50%; }
.fbars { display: flex; align-items: flex-end; gap: 7px; margin-top: 12px; }
.fbars i { width: 12px; border-radius: 4px; background: #d2d2d7; }
.fbars b { margin-left: 10px; display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px; border-radius: 999px; background: #1d1d1f; color: #fff; font-size: 13px; font-weight: 600; }
.sense { display: grid; gap: 8px; margin-top: 10px; }
.sense-row { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px; border-radius: 14px; background: #f5f5f7; color: #86868b; font-size: 15px; font-weight: 600; transition: background-color .3s; }
.sense-row.on { background: #1d1d1f; color: #fff; }
.sense-dot { width: 8px; height: 8px; border-radius: 50%; background: #c7c7cc; }
.sense-row.on .sense-dot { background: #45d4e6; box-shadow: 0 0 10px #45d4e6; }
.sense-n { flex: 1; }
.sense-v { font-size: 17px; font-variant-numeric: tabular-nums; }
.nchip { display: inline-flex; align-items: center; min-height: 32px; padding: 0 14px; border-radius: 999px; background: #f5f5f7; font-size: 14px; font-weight: 600; color: #1d1d1f; }

/* ---------- nexus connector ---------- */
.nc { overflow: clip; }
.nc-eyebrow { margin: 0 0 26px; font-family: var(--fd); font-weight: 600; font-size: clamp(24px, 2.6vw, 36px); letter-spacing: -0.024em; color: var(--mute); }
.nc-name { margin: 0 0 12px; font: 600 clamp(19px, 1.6vw, 24px)/1.2 var(--fd); letter-spacing: -0.015em; }
.nc-hero { width: min(1400px, 100%); margin: clamp(32px, 5vw, 72px) auto 0; padding: 0 20px; }
.nc-hero img { width: 100%; height: auto; }
.nc-body { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 56px; align-items: start; margin-top: clamp(40px, 5vw, 72px); }
.nc-lede { margin: 0; font: 600 clamp(22px, 2.2vw, 30px)/1.3 var(--fd); letter-spacing: -0.02em; color: var(--mute); }
.nc-lede strong { color: var(--ink); font-weight: inherit; }
.nc-stats { display: grid; gap: 26px; }
.nc-stat { padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .14); }
.nc-big { margin: 0 0 8px; font: 700 clamp(34px, 3.3vw, 48px)/1 var(--fd); letter-spacing: -0.035em; }
.nc-stat p:last-child { margin: 0; font-size: 17px; color: var(--mute); }

/* ---------- autopilot ---------- */
.ap-bar { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 auto clamp(40px, 5vw, 64px); }
.ap-tabs { display: flex; gap: 8px; min-width: 0; padding: 2px; overflow-x: auto; scrollbar-width: none; }
.ap-tabs::-webkit-scrollbar { display: none; }
.ap-tab { position: relative; flex: none; overflow: hidden; min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); color: #f5f5f7; font: 600 15px/1 var(--fb); white-space: nowrap; cursor: pointer; transition: background-color .35s var(--ease), color .35s var(--ease); }
.ap-tab:hover { background: rgba(255, 255, 255, .15); }
.ap-tab[aria-pressed="true"] { background: #f5f5f7; color: #000; box-shadow: none; }
.ap-prog { position: absolute; left: 16px; right: 16px; bottom: 5px; height: 2.5px; border-radius: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left center; animation-timing-function: linear; animation-fill-mode: forwards; }
.ap-play { flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); color: #f5f5f7; cursor: pointer; }
.ap-play:hover { background: rgba(255, 255, 255, .15); }
.ap-stage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 100px); align-items: center; }
.ap-copy { max-width: 30em; }
.ap-time { display: inline-flex; align-items: center; min-height: 30px; margin: 0 0 22px; padding: 0 12px; border-radius: 999px; background: rgba(255, 255, 255, .08); color: #d1d1d6; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ap-copy .h3 { font-size: clamp(32px, 3.6vw, 52px); letter-spacing: -0.03em; }
.ap-p { margin: 18px 0 0; font-size: clamp(18px, 1.5vw, 21px); line-height: 1.45; color: var(--mute); }
.ap-uses { margin-top: 32px; }
.ap-uses-k { margin: 0 0 10px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #8e8e93; }
.ap-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ap-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 12px 0 9px; border-radius: 999px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); font-size: 13px; font-weight: 600; color: #e5e5ea; }
.ap-chip i { width: 18px; height: 13px; border-radius: 4px; background: linear-gradient(180deg, #3d8af0, #2159bb); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .2); }
.ap-chip[data-conn="false"] i { background: linear-gradient(180deg, #2c2c2e, #0b0b0c); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); }
.ap-screen { position: relative; justify-self: center; width: min(460px, 100%); min-height: 680px; display: flex; flex-direction: column; overflow: hidden; border-radius: 44px; isolation: isolate; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 50px 120px -50px #000; }
.sky { position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity 1.1s var(--ease); }
.sky[data-on="true"] { opacity: 1; }
.ap-clock { margin: 0; padding-top: 46px; text-align: center; color: #fff; font: 700 clamp(72px, 7.5vw, 100px)/1 var(--fd); letter-spacing: -0.045em; font-variant-numeric: tabular-nums; text-shadow: 0 2px 24px rgba(0, 0, 0, .2); }
.ap-clock span { display: inline-block; margin: .32em 0 0 .18em; vertical-align: top; font-size: .26em; font-weight: 600; letter-spacing: -0.01em; }
.ap-label { margin: 10px 0 0; text-align: center; font-size: 16px; font-weight: 600; color: rgba(255, 255, 255, .9); }
.ap-stack { margin-top: auto; padding: 16px; }
.ap-notes { display: none; flex-direction: column; gap: 8px; }
.ap-notes[data-on="true"] { display: flex; }
.note { display: flex; align-items: center; gap: 12px; padding: 11px 14px 11px 11px; border-radius: 22px; background: rgba(252, 252, 253, .8); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); color: #1d1d1f; box-shadow: 0 10px 30px rgba(0, 0, 0, .16), inset 0 1px 0 rgba(255, 255, 255, .7); }
.note-ic { flex: none; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: #0b0c0e; }
.note-ic img { width: 20px; height: auto; }
.note-b { flex: 1; min-width: 0; }
.note-top { margin: 0; display: flex; justify-content: space-between; gap: 10px; font-size: 13px; font-weight: 650; }
.note-top span { font-weight: 500; color: #6e6e73; }
.note-msg { margin: 2px 0 0; font-size: 14px; line-height: 1.3; color: #3a3a3c; }

/* ---------- range ---------- */
.range-hero { width: min(1040px, 100%); margin: 0 auto; overflow: hidden; -webkit-mask-image: radial-gradient(72% 78% at 50% 50%, #000 72%, transparent 100%); mask-image: radial-gradient(72% 78% at 50% 50%, #000 72%, transparent 100%); }
.range-hero img { width: 100%; height: auto; }
.range-ctl { display: flex; justify-content: center; margin: 48px 0 28px; }
.seg-range { width: min(500px, 100%); }
.cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.card { display: flex; flex-direction: column; padding: 16px 22px 24px; border-radius: 28px; background: #fff; transition: transform .45s var(--ease), box-shadow .45s var(--ease); animation: pop .5s var(--ease) backwards; }
.card:hover { transform: translateY(-4px); box-shadow: 0 24px 48px -24px rgba(0, 0, 0, .22); }
.card[data-show="false"] { display: none; }
.card-img { height: 186px; margin: 0 -10px 18px; display: flex; align-items: center; justify-content: center; }
.card-img img { width: auto; max-width: 100%; max-height: 100%; filter: drop-shadow(0 18px 16px rgba(0, 0, 0, .16)) drop-shadow(0 4px 4px rgba(0, 0, 0, .08)); transition: transform .6s var(--spring); }
.card:hover .card-img img { transform: scale(1.04) translateY(-3px); }
.card-g { margin: 0 0 4px; font-size: 12px; font-weight: 600; letter-spacing: .02em; color: #6e6e73; }
.card-n { margin: 0; font: 650 21px/1.2 var(--fd); letter-spacing: -0.02em; color: #1d1d1f; }
.card-d { margin: 8px 0 0; font-size: 15px; line-height: 1.45; color: #6e6e73; }

/* ---------- in the box, features ---------- */
.box-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 3vw, 40px); }
.box-it { margin: 0; text-align: center; }
.box-img { height: clamp(150px, 16vw, 210px); display: flex; align-items: center; justify-content: center; }
.box-img img { max-height: 100%; width: auto; object-fit: contain; }
.box-it figcaption { margin-top: 20px; }
.box-it strong { display: block; font: 650 19px/1.25 var(--fd); letter-spacing: -0.02em; color: #1d1d1f; }
.box-it span { display: block; max-width: 18em; margin: 6px auto 0; font-size: 15px; line-height: 1.45; color: #6e6e73; }
.box-warranty { display: flex; align-items: center; justify-content: center; gap: 8px; margin: clamp(40px, 5vw, 60px) 0 0; font-size: 17px; color: #424245; }
.box-warranty svg { flex: none; color: #1d1d1f; }
.box-warranty strong { font-weight: 600; color: #1d1d1f; }
.addon { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); grid-template-rows: auto 1fr; grid-template-areas: "h p" "f p"; gap: 12px clamp(16px, 4vw, 56px); align-items: start; margin-top: clamp(40px, 5vw, 60px); padding: clamp(24px, 3.4vw, 44px); border-radius: 32px; background: #f5f5f7; }
.addon .h3 { grid-area: h; }
.addon-p { grid-area: p; margin: 0; max-width: 34em; font-size: 19px; line-height: 1.47; color: #424245; }
.addon .fine { grid-area: f; margin: 0; }
.specs { padding-top: 0; }
.specs-h { margin: 0 0 36px; font: 650 clamp(32px, 3.6vw, 48px)/1.1 var(--fd); letter-spacing: -0.03em; }
.spec-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(24px, 4vw, 56px); }
.spec { padding-top: 24px; border-top: 1px solid #d2d2d7; }
.spec h3 { margin: 0 0 16px; font: 650 21px/1.2 var(--fd); letter-spacing: -0.02em; color: #1d1d1f; }
.spec ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.spec li { font-size: 16px; line-height: 1.4; color: #424245; }

/* ---------- enquire ---------- */
.enq { background: radial-gradient(70% 50% at 50% 0%, #0f1a1e 0%, #000 70%); }
.enq-head { text-align: center; }
.enq-head .lede { margin-inline: auto; }
.enq-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(36px, 6vw, 96px); align-items: start; margin-top: clamp(56px, 7vw, 96px); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 30px; }
.steps li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; }
.step-n { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); font: 700 17px/1 var(--fd); }
.steps strong { display: block; font: 600 21px/1.25 var(--fd); letter-spacing: -0.02em; }
.steps li span:not(.step-n) { display: block; margin-top: 6px; font-size: 17px; color: var(--mute); }
.form { position: relative; display: grid; gap: 16px; padding: clamp(24px, 3vw, 40px); border-radius: 32px; background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .03)); -webkit-backdrop-filter: blur(30px) saturate(160%); backdrop-filter: blur(30px) saturate(160%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), inset 0 1px 0 rgba(255, 255, 255, .16), 0 40px 90px -40px #000; }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.field { display: grid; gap: 8px; }
.field > span { font-size: 13px; font-weight: 600; color: #c7c7cc; }
.field input { height: 52px; padding: 0 16px; border: 0; border-radius: 14px; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); color: #fff; font: 500 17px/1 var(--fb); outline: none; transition: box-shadow .2s, background-color .2s; }
.field input:focus { background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 2px var(--cool); }
.want { margin: 4px 0 0; padding: 0; border: 0; }
.want legend { margin-bottom: 10px; padding: 0; font-size: 13px; font-weight: 600; color: #c7c7cc; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); color: #f5f5f7; font: 600 14px/1 var(--fb); cursor: pointer; transition: background-color .25s, color .25s, box-shadow .25s, transform .25s var(--spring); }
.chip:active { transform: scale(.95); }
.chip[aria-pressed="true"] { background: #f5f5f7; color: #000; box-shadow: none; }
.form-msg { margin: 0; padding: 12px 14px; border-radius: 14px; background: rgba(255, 95, 82, .12); color: #ff9a90; font-size: 14px; font-weight: 600; }
.form .fine { margin: 0; text-align: center; }
.sent { text-align: center; padding: 64px 32px; display: flex; flex-direction: column; align-items: center; gap: 12px; animation: pop .6s var(--spring) both; }
.sent-ic { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--cool); color: #000; }
.sent-h { margin: 8px 0 0; font: 650 28px/1.2 var(--fd); letter-spacing: -0.025em; }
.sent p { margin: 0; font-size: 17px; color: var(--mute); }

/* ---------- footer ---------- */
.foot { padding: 40px 0 56px; background: #000; color: var(--mute); font-size: 12px; line-height: 1.5; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); }
.foot-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.foot-brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--ink); text-decoration: none; }
.foot-brand img { width: 22px; height: auto; }
.foot-brand span { font: 200 16px/1 'Exo 2', sans-serif; letter-spacing: .32em; }
.foot-nav { display: flex; flex-wrap: wrap; gap: 4px 22px; }
.foot-nav a { display: inline-flex; align-items: center; min-height: 36px; color: #d1d1d6; text-decoration: none; }
.foot-nav a:hover { text-decoration: underline; }
.foot-fine p { margin: 0 0 8px; max-width: 1000px; }

/* ---------- responsive ---------- */
@media (max-width: 1068px) {
  .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .t-hero { grid-column: span 2; grid-row: auto; }
}
@media (max-width: 1000px) {
  .try-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .nl { display: none; }
  .pocket, .nc-body, .enq-grid, .ap-stage { grid-template-columns: minmax(0, 1fr); }
  .ap-bar { justify-content: flex-start; }
  .ap-tabs { -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent); mask-image: linear-gradient(90deg, #000 86%, transparent); }
  .ap-copy { max-width: none; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 36px; }
}
@media (max-width: 734px) {
  .wrap { width: calc(100% - 40px); }
  .wordmark, .brand-div { display: none; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .house { margin-inline: -20px; }
  .card { padding: 12px 14px 18px; }
  .card-img { height: 128px; margin: 0 -6px 12px; }
  .bento { grid-template-columns: minmax(0, 1fr); }
  .t-hero { grid-column: auto; }
  .box-row { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
  .addon { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "h" "p" "f"; row-gap: 14px; }
  .spec-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .field-row { grid-template-columns: minmax(0, 1fr); }
  .ap-screen { min-height: 640px; border-radius: 36px; }
  .seg button { padding: 0 8px; }
}
@media (pointer: coarse) {
  .btn-sm { min-height: 40px; }
  .seg-sm button { min-height: 40px; }
  .foot-nav a { min-height: 44px; }
}

/* ---------- motion ---------- */
@keyframes heroCopy {
  from { opacity: 1; transform: translateY(0) scale(1); filter: blur(0px); }
  to { opacity: 0; transform: translateY(-70px) scale(.96); filter: blur(10px); }
}
@keyframes heroDevice {
  from { transform: perspective(1800px) translateY(var(--y0)) rotateX(24deg) scale(.86); }
  to { transform: perspective(1800px) translateY(var(--y1)) rotateX(0deg) scale(1); }
}
@keyframes screenWake {
  from { filter: brightness(.3) saturate(.6); }
  to { filter: brightness(1) saturate(1); }
}
@keyframes glareSweep {
  from { opacity: 1; transform: translateX(-60%); }
  to { opacity: 1; transform: translateX(60%); }
}
@keyframes wordOn {
  from { opacity: .14; }
  to { opacity: 1; }
}
@keyframes rvUp {
  from { opacity: 0; transform: translateY(56px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes ncZoom {
  from { opacity: .15; transform: scale(.76) translateY(12%); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes settle {
  from { transform: scale(1.1); }
  to { transform: scale(1); }
}
@keyframes gradShift {
  from { background-position: 0% 50%; }
  to { background-position: 100% 50%; }
}
@keyframes breathe {
  0%, 100% { opacity: .7; transform: translateX(-50%) scale(1); }
  50% { opacity: 1; transform: translateX(-50%) scale(1.06); }
}
@keyframes ductL {
  from { background-position: calc(100% + 9cqi) 0; }
  to { background-position: -9cqi 0; }
}
@keyframes ductR {
  from { background-position: -9cqi 0; }
  to { background-position: calc(100% + 9cqi) 0; }
}
@keyframes ductU {
  from { background-position: 0 calc(100% + 9cqi); }
  to { background-position: 0 -9cqi; }
}
@keyframes airFall {
  0% { opacity: 0; transform: translateZ(var(--dz)); }
  15% { opacity: 1; }
  85% { opacity: .9; }
  100% { opacity: 0; transform: translateZ(.3cqi); }
}
@keyframes splash {
  0% { opacity: .8; transform: translateZ(.1cqi) scale(.2); }
  100% { opacity: 0; transform: translateZ(.1cqi) scale(1.6); }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
@keyframes noteIn {
  from { opacity: 0; transform: translateY(26px) scale(.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes apfillA {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
@keyframes apfillB {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
@keyframes auin {
  from { opacity: 0; transform: translateX(14px); }
  to { opacity: 1; transform: none; }
}
@keyframes sense {
  0% { opacity: .9; transform: scale(1); }
  100% { opacity: 0; transform: scale(2.8); }
}
@keyframes pop {
  from { opacity: 0; transform: scale(.94); }
  to { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: no-preference) {
  .nx[data-motion="on"] .grad { animation: gradShift 9s ease-in-out infinite alternate; }
  .nx[data-motion="on"] .hero-glow { animation: breathe 6s ease-in-out infinite; }
  .nx[data-motion="on"] .dc.go-l[data-on="true"]::after { animation: ductL 1.6s cubic-bezier(.4, 0, .6, 1) infinite; }
  .nx[data-motion="on"] .dc.go-r[data-on="true"]::after { animation: ductR 1.6s cubic-bezier(.4, 0, .6, 1) infinite; }
  .nx[data-motion="on"] .dc.go-u[data-on="true"]::after { animation: ductU 1.6s cubic-bezier(.4, 0, .6, 1) infinite; }
  .nx[data-motion="on"] .ot[data-on="true"] .pt { animation: airFall 1.8s cubic-bezier(.5, 0, .8, .6) infinite; }
  .nx[data-motion="on"] .ot[data-on="true"] .pt.p2 { animation-delay: .6s; }
  .nx[data-motion="on"] .ot[data-on="true"] .pt.p3 { animation-delay: 1.2s; }
  .nx[data-motion="on"] .ot[data-on="true"] .rp { animation: splash 1.8s ease-out infinite; }
  .nx[data-motion="on"] .ot[data-on="true"] .rp.r2 { animation-delay: .9s; }
  .nx[data-motion="on"] .sn[data-on="true"]::after { animation: sense 2.4s ease-out infinite; }
  .nx[data-motion="on"] .unit[data-run="true"] .blades { animation-name: spin; animation-timing-function: linear; animation-iteration-count: infinite; }
  .nx[data-motion="on"] .note { animation: noteIn .8s var(--spring) both; animation-delay: calc(var(--i) * .9s + .35s); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* scroll-linked choreography, where the browser supports it */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .nx[data-motion="on"] {
      --devW: min(1040px, 88vw, calc((100vh - 170px) * 1.62));
      --y0: calc(6.5vh + 505px - var(--devW) * .0423);
      --y1: calc(50vh + 26px - var(--devW) / 3.314);
    }
    .nx[data-motion="on"] .hero { height: 200vh; view-timeline: --hero block; }
    .nx[data-motion="on"] .hero-stage { position: sticky; top: 0; height: 100vh; min-height: 600px; padding: 0; display: block; overflow: clip; }
    .nx[data-motion="on"] .hero-copy { position: absolute; left: 0; right: 0; top: calc(var(--nav) + clamp(24px, 6.5vh, 76px)); animation: heroCopy linear both; animation-timeline: --hero; animation-range: contain 0% contain 36%; }
    .nx[data-motion="on"] .hero-device { position: absolute; left: 0; right: 0; top: 0; margin: 0 auto; will-change: transform; animation: heroDevice linear both; animation-timeline: --hero; animation-range: contain 0% contain 80%; }
    .nx[data-motion="on"] .hero .device-screen > img { animation: screenWake linear both; animation-timeline: --hero; animation-range: contain 4% contain 62%; }
    .nx[data-motion="on"] .hero .glare { animation: glareSweep linear both; animation-timeline: --hero; animation-range: contain 34% contain 96%; }
    .nx[data-motion="on"] .w { animation: wordOn linear both; animation-timeline: view(); animation-range: cover 18% cover 36%; }
    .nx[data-motion="on"] .rv { animation: rvUp linear both; animation-timeline: view(); animation-range: entry 0% cover 26%; }
    .nx[data-motion="on"] .nc-hero img { animation: ncZoom linear both; animation-timeline: view(); animation-range: entry 0% cover 50%; }
    .nx[data-motion="on"] .range-hero img { animation: settle linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; }
  }
}
@media (max-width: 734px) {
  .nx[data-motion="on"] { --y0: calc(6.5vh + 540px - var(--devW) * .0423); }
}
</style>

/* Native-port support: the approved design used a client runtime that mounted only one
   app screen at a time. This static page keeps both screens in the DOM (no innerHTML
   re-render, per the brief) and toggles them by the appui data-screen state. Scoped to .nx. */
.nx .appui[data-screen="detail"] .au-zones { display: none; }
.nx .appui[data-screen="zones"] .au-detail { display: none; }

/* ============================================================
   Standard site footer, trimmed for /nexushome (homes).
   Footer-only rules brought in from the site's shared stylesheet
   (main.css + v2-theme.css) and scoped under .nx, so the shared
   stylesheet is NOT loaded on this page. Body text uses the page's
   Geist; the small uppercase headings use JetBrains Mono (one
   weight); the AIRNEXUS wordmark stays Exo 2.
   ============================================================ */
.nx .footer-new { background: #1a252e; padding: 60px 48px 28px; }
.nx .footer-fine { max-width: 1200px; margin: 0 auto 32px; padding-bottom: 28px; border-bottom: 1px solid rgba(255,255,255,.06); }
.nx .footer-fine p { font-size: 11px; line-height: 1.6; color: rgba(255,255,255,.4); margin: 0 0 10px; }
.nx .footer-fine p:last-child { margin-bottom: 0; }
.nx .footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; max-width: 1200px; margin: 0 auto; }
.nx .footer-col h3 { font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 500; color: rgba(255,255,255,.6); letter-spacing: 1.5px; text-transform: uppercase; margin: 0 0 16px; }
.nx .footer-col a { display: block; font-size: 13px; color: rgba(255,255,255,.5); text-decoration: none; padding: 4px 0; transition: color .3s; }
.nx .footer-col a:hover { color: #CC2222; }
.nx .footer-brand-mark { font-family: 'Exo 2', sans-serif; font-weight: 200; font-size: 14px; color: rgba(255,255,255,.6); letter-spacing: 3px; display: block; margin-top: 8px; }
.nx .footer-social { display: flex; gap: 12px; margin-top: 16px; }
.nx .footer-social a { opacity: .4; transition: opacity .3s; line-height: 0; }
.nx .footer-social a:hover { opacity: 1; }
.nx .ax-footer-award { display: flex; align-items: center; justify-content: center; width: auto; margin: 0 -48px; padding: 18px 48px; border-top: 1px solid rgba(255,255,255,.08); box-sizing: border-box; text-align: center; }
.nx .ax-footer-award a { display: inline-flex; align-items: center; justify-content: center; gap: 18px; margin: 0 auto; text-decoration: none; color: rgba(255,255,255,.72); font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; transition: color .25s; }
.nx .ax-footer-award a:hover { color: #fff; }
.nx .ax-footer-award img { width: 104px; height: 104px; object-fit: contain; display: block; }
.nx .ax-footer-app { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; width: auto; margin: 0 -48px; padding: 18px 48px 22px; border-top: 1px solid rgba(255,255,255,.06); box-sizing: border-box; text-align: center; gap: 18px; }
.nx .ax-footer-app-lbl { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.nx .ax-footer-app a { display: inline-flex; align-items: center; min-height: 48px; text-decoration: none; transition: opacity .25s, transform .25s; }
.nx .ax-footer-app a img { display: block; height: 40px; width: auto; }
.nx .ax-footer-app a:hover { opacity: .78; transform: translateY(-1px); }
.nx .footer-bottom { border-top: 1px solid rgba(255,255,255,.06); margin-top: 40px; padding-top: 20px; text-align: center; }
.nx .footer-bottom p { font-size: 11px; color: rgba(255,255,255,.5); margin: 0; }
@media (max-width: 768px) {
  .nx .footer-new { padding: 40px 24px 20px; }
  .nx .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .nx .ax-footer-award { margin: 0 -24px; padding-left: 24px; padding-right: 24px; }
  .nx .ax-footer-app { margin: 0 -24px; padding-left: 24px; padding-right: 24px; }
}
@media (max-width: 640px) {
  .nx .ax-footer-award { padding: 14px 16px; }
  .nx .ax-footer-award a { font-size: 11px; gap: 14px; flex-wrap: wrap; justify-content: center; text-align: center; }
  .nx .ax-footer-award img { width: 80px; height: 80px; }
  .nx .ax-footer-app { padding-top: 14px; padding-bottom: 18px; padding-left: 16px; padding-right: 16px; gap: 12px; }
  .nx .ax-footer-app-lbl { flex-basis: 100%; text-align: center; }
}
@media (max-width: 480px) {
  .nx .footer-grid { grid-template-columns: 1fr; gap: 24px; text-align: center; }
  .nx .footer-social { justify-content: center; }
}