/* ============================================================
   SHINDO — Air & Environment page (Build_10)
   Palette from the app's four cards: UV amber, air-quality sage, pollen orchid, humidity sky.
   ============================================================ */
.mod--air { --mc: #5BD6A0; --mc-ink: #2E8A63; --air-amber: #E8B04A; --air-orchid: #E07BB5; --air-sky: #5DA9E9; }

/* ---------- 1 · Hero ---------- */
.air-hero { position: relative; height: 100svh; min-height: 720px; overflow: hidden; color: #fff; isolation: isolate;
  background: radial-gradient(60% 55% at 70% 55%, rgba(91,214,160,0.20) 0%, rgba(91,214,160,0) 60%), radial-gradient(50% 50% at 15% 15%, rgba(232,176,74,0.28) 0%, rgba(232,176,74,0) 60%), linear-gradient(180deg, #3a2a14 0%, #14231d 55%, #0b0f0d 100%); }
.air-hero__motes { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.air-hero__breath { position: absolute; z-index: 0; left: 68%; top: 54%; width: min(60vw, 720px); aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none; }
.air-hero__breath i { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(160,240,205,0.28); background: radial-gradient(circle, rgba(91,214,160,0.16) 0%, rgba(91,214,160,0) 62%); animation: breathe 8s ease-in-out infinite; }
.air-hero__breath i + i { animation-delay: -4s; border-color: rgba(232,176,74,0.2); }
@keyframes breathe { 0%, 100% { transform: scale(0.62); opacity: 0.4; } 50% { transform: scale(1); opacity: 1; } }
.air-hero__copy { position: absolute; z-index: 3; left: clamp(24px, 4.6vw, 88px); top: calc(var(--nav-h) + clamp(30px, 8vh, 96px)); max-width: min(560px, 88vw); display: grid; gap: 20px; pointer-events: none; will-change: transform, opacity; }
.air-hero__title { margin: 0; font-family: var(--font-display); font-weight: 300; font-size: clamp(42px, 4.6vw, 78px); line-height: 1.02; letter-spacing: -0.04em; }
.air-hero__hint { margin: 0; font-size: 15px; color: rgba(255,255,255,0.6); max-width: 34ch; }
.air-hero__phone.iphone { position: absolute; z-index: 2; left: 68%; top: 54%; width: clamp(240px, 21vw, 340px); transform: translate(-50%, 0); margin-top: calc(clamp(240px, 21vw, 340px) * -1.08); }

/* ---------- 2 · Four cards split out (sticky) ---------- */
.air-four { position: relative; height: 240vh; margin: 0 var(--inset); border-radius: var(--radius-xl);
  background: radial-gradient(60% 50% at 50% 50%, #22302a 0%, #121614 70%); }
.air-four__sticky { position: sticky; top: 0; height: 100vh; min-height: 600px; overflow: hidden; border-radius: var(--radius-xl); }
.air-four__stage { position: absolute; inset: 0; }
.air-tile { position: absolute; left: 50%; top: 50%; margin: 0; width: min(300px, 30vw, 31vh); will-change: transform; }
.air-tile img { display: block; width: 100%; height: auto; border-radius: 30px; box-shadow: 0 40px 90px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.08); }
.air-tile figcaption { position: absolute; top: 50%; width: 220px; translate: 0 -50%; display: grid; gap: 2px; color: #fff; opacity: 0; transform: translateY(-8px); transition: opacity 500ms var(--ease), transform 500ms var(--ease); }
.air-tile.is-out figcaption { opacity: 1; transform: none; }
.air-tile figcaption b { font-family: var(--font-display); font-weight: 500; font-size: 18px; color: var(--tc); }
.air-tile figcaption span { font-size: 14px; color: rgba(255,255,255,0.7); }
.air-tile[data-k="uv"] figcaption, .air-tile[data-k="pollen"] figcaption { right: calc(100% + 22px); text-align: right; }
.air-tile[data-k="aq"] figcaption, .air-tile[data-k="dry"] figcaption { left: calc(100% + 22px); }
.air-four__core { position: absolute; left: 50%; top: 50%; padding: 12px 20px; border-radius: 99px; color: #fff; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); opacity: 0; }
.air-four__core::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--mc); margin-right: 10px; box-shadow: 0 0 0 4px rgba(91,214,160,0.2); }

/* ---------- 3 · Sun (sticky) ---------- */
.air-sun { position: relative; height: 320vh; margin: var(--inset) var(--inset) 0; border-radius: var(--radius-xl); }
.air-sun__sticky { position: sticky; top: 0; height: 100vh; min-height: 640px; overflow: hidden; border-radius: var(--radius-xl); color: #fff; }
.air-sun__sky { position: absolute; inset: 0; background: linear-gradient(180deg, #14182e, #34284a); }
.air-sun__arc { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 78%; overflow: visible; }
.air-sun__path { stroke: rgba(255,255,255,0.22); stroke-width: 2; stroke-dasharray: 2 10; stroke-linecap: round; }
.air-sun__uvwin { stroke: url(#uvband); stroke-width: 10; stroke-linecap: round; opacity: 0.45; transition: opacity 500ms; }
.air-sun__uvwin.is-in { opacity: 1; }
.t-dot { fill: #fff; } .t-lbl { fill: #fff; font-family: var(--font-mono); font-size: 18px; letter-spacing: 0.06em; }
.air-sun__copy { position: absolute; z-index: 2; left: clamp(24px, 4vw, 72px); top: clamp(90px, 13vh, 130px); max-width: min(520px, 40%); display: grid; gap: 16px; }
.air-sun__read { position: absolute; z-index: 2; left: clamp(24px, 4vw, 72px); bottom: clamp(32px, 7vh, 72px); max-width: min(460px, 40%); display: grid; gap: 6px; }
.air-sun__time { font-family: var(--font-display); font-weight: 600; font-size: clamp(56px, 6vw, 96px); line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.air-sun__phase { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: #FFE49A; }
.air-sun__tip { font-size: 17px; line-height: 1.5; color: rgba(255,255,255,0.88); min-height: 3em; }
.air-sun__phone.iphone { position: absolute; z-index: 2; right: clamp(24px, 5vw, 96px); top: 50%; width: min(290px, 22vw); transform: translateY(-46%); }
.air-sun__scale { position: absolute; z-index: 2; right: clamp(24px, 5vw, 96px); bottom: 22px; margin: 0; padding: 0; list-style: none; display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; }
.air-sun__scale li { display: flex; align-items: center; gap: 6px; color: rgba(255,255,255,0.8); } .air-sun__scale li::before { content: ""; width: 14px; height: 4px; border-radius: 4px; background: var(--c); }
.air-sun__scale b { font-weight: 600; color: #fff; }

/* ---------- 4 · Zoom into a hair (sticky) ---------- */
.air-zoom { position: relative; height: 280vh; margin: var(--inset) var(--inset) 0; border-radius: var(--radius-xl); background: #0d1210; }
.air-zoom__sticky { position: sticky; top: 0; height: 100vh; min-height: 620px; overflow: hidden; border-radius: var(--radius-xl); color: #fff;
  background: radial-gradient(60% 60% at 60% 50%, #1b2a24 0%, #0d1210 70%); }
.air-zoom__svg { position: absolute; right: 0; top: 0; width: 70%; height: 100%; }
.z-hair { fill: #6b4a33; stroke: #a07650; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.z-sand { fill: rgba(232,200,140,0.5); stroke: rgba(232,200,140,0.8); stroke-width: 1; vector-effect: non-scaling-stroke; }
.z-pm10 circle { fill: #E8B04A; opacity: 0; transition: opacity 600ms; }
.z-pm25 circle { fill: #F07C74; opacity: 0; transition: opacity 600ms; }
.air-zoom[data-stage="1"] .z-pm10 circle, .air-zoom[data-stage="2"] .z-pm10 circle { opacity: 0.95; }
.air-zoom[data-stage="2"] .z-pm25 circle { opacity: 1; }
.air-zoom__copy { position: absolute; z-index: 2; left: clamp(24px, 4vw, 72px); top: clamp(90px, 13vh, 130px); max-width: min(460px, 36%); display: grid; gap: 16px; }
.air-zoom__copy p { margin: 0; font-size: 17px; line-height: 1.55; color: rgba(255,255,255,0.75); }
.air-zoom__legend { position: absolute; z-index: 2; left: clamp(24px, 4vw, 72px); bottom: clamp(70px, 10vh, 100px); margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.air-zoom__legend li { display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; align-items: center; min-width: 260px; font-size: 15px; transition: opacity 500ms; }
.air-zoom__legend i { width: 14px; height: 14px; border-radius: 50%; justify-self: center; }
.zl-hair i { background: #6b4a33; box-shadow: 0 0 0 2px #a07650; } .zl-sand i { background: rgba(232,200,140,0.7); } .zl-pm10 i { background: #E8B04A; width: 9px; height: 9px; } .zl-pm25 i { background: #F07C74; width: 5px; height: 5px; }
.air-zoom__legend span { font-family: var(--font-mono); font-size: 13px; color: rgba(255,255,255,0.6); }
.air-zoom[data-stage="0"] .zl-pm10, .air-zoom[data-stage="0"] .zl-pm25, .air-zoom[data-stage="1"] .zl-pm25 { opacity: 0.3; }
.air-zoom__mag { position: absolute; z-index: 2; right: clamp(24px, 4vw, 72px); bottom: clamp(60px, 9vh, 90px); margin: 0; font-family: var(--font-display); font-weight: 600; font-size: clamp(48px, 5vw, 80px); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: rgba(255,255,255,0.9); }
.air-zoom__src { position: absolute; z-index: 2; left: clamp(24px, 4vw, 72px); right: 24px; bottom: 22px; margin: 0; font-size: 12px; color: rgba(255,255,255,0.45); }

/* ---------- 5 · Pollutant tiles ---------- */
.air-mix { --pc: #E8B04A; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(28px, 5vw, 96px); align-items: center;
  padding: clamp(100px, 11vw, 170px) clamp(24px, 5vw, 110px); }
.air-mix__copy { display: grid; gap: 22px; }
.air-mix__table { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 8px; }
.air-mix__table button { position: relative; appearance: none; cursor: pointer; text-align: left; font: inherit; color: var(--ink); aspect-ratio: 1; padding: 12px 14px; border-radius: 18px;
  background: #fff; border: 1px solid rgba(26,29,33,0.08); display: grid; grid-template-rows: auto 1fr auto auto; transition: transform 400ms cubic-bezier(.34,1.56,.5,1), background 300ms, color 300ms, box-shadow 300ms; }
.air-mix__table button:first-child { grid-column: span 2; aspect-ratio: auto; }
.air-mix__table sup { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; color: var(--ink-faint); justify-self: end; }
.air-mix__table b { align-self: end; font-family: var(--font-display); font-weight: 600; font-size: clamp(26px, 2.3vw, 38px); letter-spacing: -0.03em; line-height: 1; }
.air-mix__table b sub { font-size: 0.5em; vertical-align: baseline; position: relative; top: 0.15em; }
.air-mix__table small { font-size: 12px; color: var(--ink-soft); margin-top: 4px; }
.air-mix__table em { position: absolute; left: 14px; top: 12px; font-style: normal; font-family: var(--font-mono); font-size: 12px; color: var(--pc); font-weight: 600; }
.air-mix__table button:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(26,29,33,0.1); }
.air-mix__table button[aria-checked="true"] { background: var(--pc); color: #10140f; transform: translateY(-3px) scale(1.03); box-shadow: 0 20px 40px color-mix(in srgb, var(--pc) 40%, transparent); }
.air-mix__table button[aria-checked="true"] sup, .air-mix__table button[aria-checked="true"] small, .air-mix__table button[aria-checked="true"] em { color: rgba(16,20,15,0.7); }
.air-mix__table button:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.air-mix__about { margin: 0; min-height: 4.6em; font-size: 17px; line-height: 1.55; color: var(--ink); padding-left: 16px; border-left: 3px solid var(--pc); transition: border-color 400ms; }
.air-mix__fine { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-faint); }
.air-mix__phone.iphone { width: min(360px, 100%); justify-self: center; }
.air-mix__phone .iphone__screen > img { opacity: 0; }
.air-mix__phone .iphone__screen > img.is-on, .air-mix__phone .iphone__screen > img.is-prev { opacity: 1; }
.air-mix__phone .iphone__screen > img.is-prev { z-index: 0; } .air-mix__phone .iphone__screen > img.is-on { z-index: 1; }
.air-mix__phone .iphone__screen > img.is-in { animation: sweep 900ms cubic-bezier(.65,0,.35,1) both; }
@keyframes sweep { from { clip-path: circle(0% at var(--ox, 50%) 30%); filter: brightness(1.6) saturate(1.4); } to { clip-path: circle(150% at var(--ox, 50%) 30%); filter: none; } }

/* ---------- 6 · Haze ---------- */
.air-haze { --hz: 0.35; position: relative; margin: 0 var(--inset); border-radius: var(--radius-xl); overflow: hidden; color: #fff; isolation: isolate; min-height: clamp(720px, 100vh, 980px);
  background: linear-gradient(180deg, color-mix(in srgb, #5f8fb8 calc((1 - var(--hz)) * 100%), #9a8466) 0%, color-mix(in srgb, #c9dceb calc((1 - var(--hz)) * 100%), #c7a87a) 70%); transition: background 300ms; }
.air-haze.is-night { background: linear-gradient(180deg, #0c1224 0%, color-mix(in srgb, #1e2a44 calc((1 - var(--hz)) * 100%), #4a3a2a) 75%); }
.air-haze__scene { position: absolute; inset: 0; z-index: 0; }
.air-haze__city { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 48%; }
.air-haze__city .c-back { fill: color-mix(in srgb, #3b5168 calc((1 - var(--hz)) * 100%), #8a7458); opacity: calc(1 - var(--hz) * 0.85); }
.air-haze__city .c-front { fill: #1b2430; opacity: calc(1 - var(--hz) * 0.55); }
.air-haze__city .w { fill: #ffd98a; opacity: 0; transition: opacity 500ms; }
.air-haze.is-night .air-haze__city .w { opacity: 0.8; }
.air-haze__fog { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(210,180,130,0) 0%, rgba(210,180,130, calc(var(--hz) * 0.75)) 60%, rgba(200,170,120, calc(var(--hz) * 0.85)) 100%);
  -webkit-backdrop-filter: blur(calc(var(--hz) * 6px)); backdrop-filter: blur(calc(var(--hz) * 6px)); }
.air-haze__dust { position: absolute; inset: 0; width: 100%; height: 100%; }
.air-haze__inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); gap: clamp(28px, 5vw, 90px); align-items: start; padding: clamp(70px, 8vw, 120px) clamp(24px, 5vw, 96px); }
.air-haze__copy { display: grid; gap: 20px; text-shadow: 0 1px 18px rgba(0,0,0,0.25); }
.air-haze__copy > p { margin: 0; max-width: 46ch; font-size: 17px; line-height: 1.55; color: rgba(255,255,255,0.9); }
.air-haze__ctrl { display: grid; gap: 16px; margin-top: 6px; padding: 22px; border-radius: 26px; background: rgba(12,16,22,0.35); border: 1px solid rgba(255,255,255,0.18); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); text-shadow: none; max-width: 520px; }
.air-haze__gauge { position: relative; height: 34px; }
.air-haze__bands { position: absolute; left: 0; right: 0; top: 13px; height: 8px; display: grid; grid-template-columns: 20fr 20fr 20fr 20fr 20fr 20fr; gap: 3px; }
.air-haze__bands i { border-radius: 4px; } .air-haze__bands i:nth-child(1) { background: #7DBE6E; } .air-haze__bands i:nth-child(2) { background: #C8D86A; } .air-haze__bands i:nth-child(3) { background: #F2C14E; } .air-haze__bands i:nth-child(4) { background: #F29A3A; } .air-haze__bands i:nth-child(5) { background: #F07C74; } .air-haze__bands i:nth-child(6) { background: #C94BD8; }
.air-haze__range { position: absolute; inset: 0; width: 100%; height: 34px; margin: 0; -webkit-appearance: none; appearance: none; background: transparent; cursor: grab; }
.air-haze__range::-webkit-slider-runnable-track { height: 34px; background: transparent; }
.air-haze__range::-moz-range-track { height: 34px; background: transparent; }
.air-haze__range::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; margin-top: 2px; border-radius: 50%; background: #fff; box-shadow: 0 4px 14px rgba(0,0,0,0.35), 0 0 0 5px rgba(255,255,255,0.25); }
.air-haze__range::-moz-range-thumb { width: 30px; height: 30px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 4px 14px rgba(0,0,0,0.35); }
.air-haze__range:focus-visible { outline: 2px solid #fff; outline-offset: 4px; border-radius: 99px; }
.air-haze__read { display: flex; align-items: baseline; gap: 14px; }
.air-haze__read b { font-family: var(--font-display); font-weight: 600; font-size: 54px; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.air-haze__read span { font-size: 18px; font-weight: 500; }
.air-haze[data-band="3"] .air-haze__read span { color: #FFB46B; } .air-haze[data-band="4"] .air-haze__read span { color: #FF948C; } .air-haze[data-band="5"] .air-haze__read span { color: #E58AF0; }
.air-haze__time { justify-self: start; }
.air-haze__push { display: grid; gap: 16px; justify-items: stretch; align-self: center; }
.air-push { display: grid; grid-template-columns: 42px 1fr; gap: 12px; padding: 14px 16px; border-radius: 24px; color: var(--ink);
  background: rgba(245,246,248,0.86); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); box-shadow: 0 24px 60px rgba(0,0,0,0.3); }
.air-push[hidden] { display: none; }
.air-push.is-pop { animation: drop 650ms cubic-bezier(.34,1.56,.5,1); }
@keyframes drop { from { opacity: 0; transform: translateY(-24px) scale(0.95); } to { opacity: 1; transform: none; } }
.air-push.is-held { opacity: 0.55; filter: grayscale(0.6); }
.air-push__ic { width: 42px; height: 42px; border-radius: 11px; background: #12171c; color: var(--mc); display: grid; place-items: center; font-family: var(--font-jp); font-weight: 700; font-size: 12px; }
.air-push__top { display: flex; justify-content: space-between; font-size: 12px; color: rgba(26,29,33,0.55); } .air-push__top b { color: rgba(26,29,33,0.8); }
.air-push__title { display: block; margin-top: 2px; font-size: 15px; font-weight: 600; }
.air-push__text { display: block; margin-top: 2px; font-size: 14px; line-height: 1.4; }
.air-haze__held { margin: 0; padding: 12px 16px; border-radius: 16px; font-size: 14px; line-height: 1.45; background: rgba(12,16,22,0.4); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.air-haze__card { display: block; width: 100%; border-radius: 22px; box-shadow: 0 20px 50px rgba(0,0,0,0.3); }

/* ---------- 7 · Pollen wheel ---------- */
.air-wheel { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 96px); align-items: center; padding: clamp(100px, 11vw, 170px) clamp(24px, 5vw, 110px); }
.air-wheel__copy { display: grid; gap: 20px; }
.air-wheel__copy > p { margin: 0; font-size: 17px; line-height: 1.55; color: var(--ink-soft); max-width: 48ch; }
.air-wheel__keys { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.air-wheel__keys li { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 99px; background: #fff; border: 1px solid rgba(26,29,33,0.08); cursor: default; font-size: 14px; transition: transform 300ms var(--ease), box-shadow 300ms; }
.air-wheel__keys li:hover, .air-wheel__keys li:focus-visible { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(26,29,33,0.1); outline: none; }
.air-wheel__keys i { width: 10px; height: 10px; border-radius: 50%; background: var(--sc); }
.air-wheel__keys span { color: var(--ink-faint); font-family: var(--font-jp); font-size: 12px; }
.air-wheel__fine { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-faint); }
.air-wheel__stage { position: relative; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #2a1b26 0%, #1b1219 70%); box-shadow: var(--shadow-card); }
.air-wheel__svg { width: 100%; height: 100%; display: block; overflow: visible; }
.air-wheel__svg .wh-rot { transition: transform 120ms linear; }
.wh-grid { stroke: rgba(255,255,255,0.07); } .wh-m { fill: rgba(255,255,255,0.55); font-family: var(--font-mono); font-size: 11px; }
.wh-track { fill: none; stroke: rgba(255,255,255,0.05); stroke-width: 16; }
.wh-arc { fill: none; stroke-width: 16; stroke-linecap: round; transition: opacity 300ms, stroke-width 300ms; }
.wh-tail { fill: none; stroke-width: 16; stroke-linecap: round; opacity: 0.22; }
.air-wheel[data-hl] .wh-sp { opacity: 0.18; transition: opacity 300ms; }
.air-wheel[data-hl="cedar"] .wh-sp[data-s="cedar"], .air-wheel[data-hl="cypress"] .wh-sp[data-s="cypress"], .air-wheel[data-hl="grass"] .wh-sp[data-s="grass"], .air-wheel[data-hl="ragweed"] .wh-sp[data-s="ragweed"], .air-wheel[data-hl="mugwort"] .wh-sp[data-s="mugwort"] { opacity: 1; }
.wh-today line { stroke: #fff; stroke-width: 2; stroke-dasharray: 3 4; } .wh-today circle { fill: #fff; filter: drop-shadow(0 0 6px rgba(255,255,255,0.8)); }
.wh-c1 { fill: #fff; font-family: var(--font-display); font-size: 17px; font-weight: 500; } .wh-c2 { fill: rgba(255,255,255,0.55); font-family: var(--font-mono); font-size: 13px; }
.air-wheel__phone.iphone { position: absolute; right: -6%; bottom: -14%; width: 34%; transform: rotate(6deg); }

/* ---------- 8 · Humidity glass ---------- */
.air-glass { position: relative; margin: 0 var(--inset); border-radius: var(--radius-xl); overflow: hidden; color: #fff; display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1fr) minmax(0, 0.7fr); gap: clamp(24px, 4vw, 70px); align-items: center;
  padding: clamp(70px, 8vw, 120px) clamp(24px, 5vw, 96px); background: radial-gradient(60% 60% at 30% 40%, rgba(93,169,233,0.3), rgba(93,169,233,0) 60%), linear-gradient(180deg, #13283a 0%, #0b131b 100%); }
.air-glass__vessel svg { display: block; width: 100%; max-width: 300px; margin: 0 auto; overflow: visible; }
.g-mk { stroke: rgba(255,255,255,0.6); stroke-width: 2; } .g-mt { fill: rgba(255,255,255,0.7); font-family: var(--font-mono); font-size: 13px; }
.g-bubbles circle { fill: rgba(255,255,255,0.5); animation: rise var(--s) linear var(--d) infinite; }
@keyframes rise { from { transform: translateY(0); opacity: 0.8; } to { transform: translateY(calc(var(--top, 220px) - 440px)); opacity: 0; } }
.air-glass__copy { display: grid; gap: 18px; }
.air-glass__copy > p { margin: 0; font-size: 17px; line-height: 1.55; color: rgba(255,255,255,0.78); }
.air-glass__stats { margin: 6px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 22px; }
.air-glass__stats div { display: grid; gap: 4px; } .air-glass__stats dt { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.55); }
.air-glass__stats dd { margin: 0; font-family: var(--font-display); font-size: 28px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .air-glass__stats dd small { font-size: 0.55em; font-weight: 400; color: rgba(255,255,255,0.6); }
.air-glass__stats div:first-child dd { color: #7FE3F0; }
.air-glass__phone.iphone { width: min(300px, 100%); justify-self: center; }

/* ---------- 9 · Statement clearing ---------- */
.air-clear { padding: clamp(120px, 14vw, 220px) 24px clamp(80px, 9vw, 140px); text-align: center; }
.air-clear h2 { margin: 0 auto; max-width: 1100px; font-family: var(--font-display); font-weight: 300; font-size: clamp(30px, 3.4vw, 54px); line-height: 1.16; letter-spacing: -0.025em; }
.air-clear__a, .air-clear__b { display: inline-block; will-change: filter, opacity; }
.air-clear__b { color: var(--mc-ink); }

/* ---------- Homepage row ---------- */
.air-home { position: relative; border-radius: var(--radius-xl); overflow: hidden; min-height: clamp(560px, 58vw, 820px); display: grid; place-items: center; padding: 40px;
  background: radial-gradient(60% 50% at 30% 20%, rgba(232,176,74,0.32), rgba(232,176,74,0) 60%), radial-gradient(60% 50% at 75% 80%, rgba(91,214,160,0.25), rgba(91,214,160,0) 60%), linear-gradient(180deg, #2c2214 0%, #111613 100%); perspective: 1400px; }
.air-home__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; width: min(520px, 100%); transform-style: preserve-3d; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 600ms var(--ease); }
.air-home__grid img { display: block; width: 100%; border-radius: 24px; box-shadow: 0 30px 60px rgba(0,0,0,0.45); transition: transform 600ms var(--ease); }
.air-home__grid img:nth-child(1) { transform: translateZ(40px); } .air-home__grid img:nth-child(2) { transform: translateZ(70px); } .air-home__grid img:nth-child(3) { transform: translateZ(20px); } .air-home__grid img:nth-child(4) { transform: translateZ(55px); }
.air-home__motes { position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(circle, rgba(255,230,190,0.55) 1px, transparent 1.6px), radial-gradient(circle, rgba(200,245,225,0.45) 1px, transparent 1.6px); background-size: 90px 90px, 140px 140px; background-position: 0 0, 40px 60px; animation: drift 30s linear infinite; opacity: 0.7; }
@keyframes drift { to { background-position: 900px -300px, 1440px -420px; } }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .air-mix, .air-wheel, .air-haze__inner { grid-template-columns: minmax(0, 1fr); }
  .air-glass { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .air-glass__copy { grid-column: 1 / -1; order: -1; }
  .air-sun__phone.iphone { width: 34vw; top: auto; bottom: 90px; transform: none; }
  .air-sun__copy { max-width: 60%; } .air-sun__read { max-width: 60%; }
  .air-zoom__svg { width: 100%; opacity: 0.85; } .air-zoom__copy { max-width: 70%; }
}
@media (max-width: 760px) {
  .air-hero__breath, .air-hero__phone.iphone { left: 50%; }
  .air-hero__phone.iphone { top: 70%; width: 52vw; margin-top: calc(52vw * -1.08); }
  .air-hero__title { font-size: 40px; }
  .air-tile { width: 42vw; } .air-tile img { border-radius: 18px; }
  .air-tile { width: 42vw; } .air-tile figcaption { display: none; }
  .air-sun__arc { left: -55%; right: auto; width: 210%; height: 62%; }
  .air-sun__copy, .air-sun__read, .air-zoom__copy { max-width: none; right: 20px; }
  .air-sun__copy .ap-h2, .air-zoom__copy .ap-h2 { font-size: 28px; }
  .air-sun__phone.iphone { display: none; }
  .air-sun__scale { left: 20px; right: 20px; gap: 8px; font-size: 11px; }
  .air-sun__read { bottom: 64px; } .air-sun__time { font-size: 52px; } .air-sun__tip { font-size: 15px; }
  .air-zoom__legend li { min-width: 0; font-size: 13px; } .air-zoom__copy p { font-size: 15px; } .air-zoom__mag { bottom: 50px; font-size: 40px; }
  .air-mix__table { grid-template-columns: repeat(3, minmax(0, 1fr)); } .air-mix__table button:first-child { grid-column: span 3; }
  .air-haze__inner { padding: 60px 18px; } .air-haze__read b { font-size: 44px; }
  .air-wheel__phone.iphone { width: 38%; right: -4%; bottom: -18%; }
  .air-glass { grid-template-columns: minmax(0, 1fr); } .air-glass__vessel svg { max-width: 200px; } .air-glass__phone.iphone { width: 62%; }
  .air-glass__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .air-hero__breath i, .g-bubbles circle, .air-home__motes { animation: none; }
  .air-four, .air-sun, .air-zoom { height: auto; } .air-four__sticky, .air-sun__sticky, .air-zoom__sticky { position: relative; }
}