/* DashTW 對外站共用樣式：產品首頁與政策／支援頁皆不依賴外部字型或腳本。 */

:root {
  --bg: #ffffff;
  --bg-soft: #f5f6f8;
  --text: #1c1d21;
  --text-soft: #5a5e68;
  --line: #e2e4e9;
  --accent: #0a6ec4;
  --radius: 12px;
  font: 100%/1.5 system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text",
    "Segoe UI", "Noto Sans TC", "Hiragino Sans", "Apple SD Gothic Neo",
    "Microsoft JhengHei", sans-serif;
  font-optical-sizing: auto;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  padding: 0 1.25rem 4rem;
  background: var(--bg);
  color: var(--text);
  font-size: 1.0625rem;
  line-height: 1.75;
  overflow-wrap: break-word;
}
a { color: var(--accent); }
p { margin: 0 0 1rem; }
ul, ol { margin: 0 0 1rem; padding-left: 1.4rem; }
li { margin-bottom: 0.4rem; }
strong { font-weight: 680; }
h1 { margin: 0 0 .35rem; font-size: 1.9rem; line-height: 1.3; letter-spacing: -.02em; }
h2 { margin: 2.5rem 0 .75rem; font-size: 1.25rem; line-height: 1.4; }
h3 { margin: 1.75rem 0 .4rem; font-size: 1.02rem; }
.wrap { max-width: 46rem; margin: 0 auto; }

/* 政策與支援頁 */
header.site {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1rem;
  align-items: baseline;
  justify-content: space-between;
  padding: 1.75rem 0 1.25rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--line);
}
header.site .brand { color: var(--text); font-size: 1.05rem; font-weight: 700; letter-spacing: .01em; text-decoration: none; }
header.site .brand span { color: var(--text-soft); font-weight: 400; }
nav.lang { color: var(--text-soft); font-size: .85rem; letter-spacing: .01em; }
nav.lang a { padding: .2rem .15rem; color: var(--text-soft); text-decoration: none; }
nav.lang a:hover { color: var(--accent); text-decoration: underline; }
nav.lang a[aria-current="true"] { color: var(--text); font-weight: 650; }
nav.lang .sep { opacity: .4; }
.updated { margin: 0 0 2rem; color: var(--text-soft); font-size: .9rem; }
.summary { padding: 1.1rem 1.25rem .6rem; margin: 0 0 2rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-soft); }
.summary p:last-child { margin-bottom: .5rem; }
.summary ul { margin-bottom: .6rem; }
.table-scroll { overflow-x: auto; margin: 0 0 1.25rem; }
table { width: 100%; min-width: 32rem; border-collapse: collapse; font-size: .92rem; }
th, td { padding: .55rem .7rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
th { font-weight: 650; white-space: nowrap; }
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: .75rem 1.5rem; padding: 0; list-style: none; }
.features li { margin: 0; }
.features .k { display: block; font-weight: 650; }
.features .v { color: var(--text-soft); font-size: .93rem; }
footer.site { padding-top: 1.25rem; margin-top: 3.5rem; border-top: 1px solid var(--line); color: var(--text-soft); font-size: .88rem; }
footer.site a { color: var(--text-soft); }
footer.site nav { margin-bottom: .5rem; }
footer.site nav a { margin-right: 1rem; }

/* 產品首頁 */
body.landing {
  --page: #f7fafc;
  --surface: #ffffff;
  --surface-raised: rgba(255, 255, 255, .72);
  --ink: #071520;
  --secondary: #5d6b76;
  --tertiary: #84919a;
  --hairline: rgba(21, 48, 67, .1);
  --blue: #087dd1;
  --cyan: #03b9d3;
  --green: #19ad75;
  --purple: #5759e9;
  --shadow: 0 2rem 5rem rgba(28, 76, 107, .16);
  padding: 0;
  overflow-x: hidden;
  background: var(--page);
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.65;
}
.landing main { position: relative; }
/* 窄螢幕換行時不讓最後一行只剩一兩個字：標題平均分配各行，內文避開孤字 */
.landing main :is(h1, h2, h3) { text-wrap: balance; }
.landing main :is(p, li) { text-wrap: pretty; }
/* 韓文以詞為單位換行，不從詞中間斷開 */
.landing:lang(ko) { word-break: keep-all; overflow-wrap: break-word; }
/* 日文標題只在標好的詞組處（<wbr>）換行，不把片假名詞拆開；真的放不下時才強制斷 */
.landing:lang(ja) main :is(h1, h2, h3) { word-break: keep-all; overflow-wrap: anywhere; }
/* 「リアルタイム」六個字要能放進手機一行：日文大標題字級不超過 14vw */
.landing:lang(ja) .hero h1 { font-size: min(clamp(3.8rem, 7vw, 6.8rem), 14vw); }
/* 韓文副標題平均分成兩行，不讓最後一行只掛一個詞（中日文靠標點斷行就夠了） */
.landing:lang(ko) main .hero-answer { text-wrap: balance; }

header.site.landing-nav {
  position: sticky;
  z-index: 50;
  top: 0;
  display: block;
  min-height: 0;
  padding: 0;
  margin: 0;
  border: 0;
  background: rgba(247, 250, 252, .68);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
}
.landing-nav::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -.8rem;
  left: 0;
  height: .8rem;
  background: linear-gradient(to bottom, rgba(247, 250, 252, .52), transparent);
  pointer-events: none;
}
.nav-inner {
  display: flex;
  align-items: center;
  width: min(100% - 2.5rem, 72rem);
  min-height: 4.5rem;
  margin: 0 auto;
  gap: 2rem;
}
.landing-nav .brand { display: flex; align-items: center; gap: .65rem; flex: none; }
.landing-nav .brand img { border-radius: .72rem; box-shadow: 0 .35rem 1rem rgba(16, 112, 169, .15); }
.landing-nav .brand-copy { display: flex; flex-direction: column; color: var(--ink); line-height: 1.05; }
.landing-nav .brand-copy strong { font-size: .96rem; letter-spacing: -.015em; }
.landing-nav .brand-copy small { margin-top: .22rem; color: var(--secondary); font-size: .625rem; font-weight: 520; letter-spacing: .035em; }
.primary-nav { display: flex; gap: 1.6rem; margin-left: auto; }
.primary-nav a, .landing-nav .lang a { min-height: 2.75rem; display: inline-flex; align-items: center; color: var(--secondary); font-size: .78rem; font-weight: 580; text-decoration: none; }
.primary-nav a:hover, .landing-nav .lang a:hover { color: var(--ink); text-decoration: none; }
.primary-nav a:active, .landing-nav .lang a:active, .quiet-button:active, .landing-footer a:active { opacity: .56; transition: opacity 80ms linear; }
.landing-nav .lang { display: flex; align-items: center; padding-left: 1.2rem; border-left: 1px solid var(--hairline); white-space: nowrap; }
.landing-nav .lang a[aria-current="true"] { color: var(--ink); }

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(24rem, .8fr);
  align-items: center;
  gap: clamp(2rem, 7vw, 7rem);
  width: min(100% - 3rem, 72rem);
  min-height: calc(100svh - 4.5rem);
  padding: 5rem 0 6rem;
  margin: 0 auto;
}
.hero-copy { max-width: 40rem; }
.eyebrow, .section-kicker {
  margin: 0 0 1.15rem;
  color: var(--blue);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
}
.hero h1 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(3.8rem, 7vw, 6.8rem);
  font-weight: 750;
  line-height: .96;
  letter-spacing: -.065em;
}
.hero-answer {
  margin: 1.35rem 0 1.1rem;
  color: transparent;
  background: linear-gradient(95deg, var(--blue), var(--cyan) 52%, var(--purple));
  -webkit-background-clip: text;
  background-clip: text;
  font-size: clamp(1.6rem, 3vw, 2.45rem);
  font-weight: 680;
  line-height: 1.15;
  letter-spacing: -.035em;
  /* 只在標點處換行：窄螢幕斷在逗號後，不讓最後一個字單獨掉到下一行 */
  word-break: keep-all;
}
.lead { max-width: 34rem; margin: 0; color: var(--secondary); font-size: 1.06rem; line-height: 1.8; }
/* 首頁引言只在標點處換行，窄螢幕不讓字落單 */
.hero-copy .lead { word-break: keep-all; }
.hero-actions { display: flex; align-items: center; gap: .75rem; margin: 2rem 0 1.5rem; }
.store-pill, .quiet-button {
  min-height: 3.15rem;
  border-radius: 999px;
  line-height: 1.05;
}
.store-pill { display: inline-flex; flex-direction: column; justify-content: center; min-width: 9.6rem; padding: .58rem 1.25rem .65rem; background: var(--ink); color: var(--page); box-shadow: 0 .7rem 1.8rem rgba(7, 21, 32, .13); }
.store-pill small { margin-bottom: .18rem; font-size: .56rem; opacity: .72; }
.store-pill strong { font-size: .94rem; letter-spacing: -.01em; }
.quiet-button { display: inline-flex; align-items: center; gap: .55rem; padding: 0 1.15rem; border: 1px solid var(--hairline); background: var(--surface); color: var(--ink); font-size: .78rem; font-weight: 650; text-decoration: none; box-shadow: 0 .3rem 1rem rgba(30, 73, 99, .04); }
.quiet-button span { color: var(--blue); font-size: 1rem; }
.trust-row { display: flex; flex-wrap: wrap; gap: .5rem 1.15rem; padding: 0; margin: 0; color: var(--tertiary); font-size: .72rem; list-style: none; }
.trust-row li { position: relative; padding-left: .82rem; margin: 0; }
.trust-row li::before { content: ""; position: absolute; left: 0; top: .57rem; width: .28rem; height: .28rem; border-radius: 50%; background: var(--green); }

.hero-product { position: relative; min-height: 40rem; display: grid; place-items: center; }
.hero-halo { position: absolute; width: min(38rem, 48vw); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(12, 176, 217, .19), rgba(42, 115, 231, .07) 42%, transparent 70%); }
.hero-halo::before, .hero-halo::after { content: ""; position: absolute; inset: 13%; border: 1px solid rgba(13, 145, 203, .14); border-radius: 50%; }
.hero-halo::after { inset: 29%; }
.device { position: relative; overflow: hidden; border: .42rem solid #10161b; border-radius: 2.5rem; background: #10161b; box-shadow: var(--shadow); }
.device::after { content: ""; position: absolute; inset: 0; border-radius: 2.05rem; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); pointer-events: none; }
.device img { display: block; width: 100%; height: auto; }
.device-hero { z-index: 2; width: min(18rem, 72vw); }
.status-material {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: .65rem;
  min-width: 9.6rem;
  padding: .7rem .9rem;
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 1rem;
  background: rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: blur(18px) saturate(170%);
  backdrop-filter: blur(18px) saturate(170%);
  box-shadow: 0 1rem 2.5rem rgba(34, 82, 110, .15);
  color: #102637;
  line-height: 1.15;
}
.status-material > span:last-child { display: flex; flex-direction: column; }
.status-material small { color: #677b88; font-size: .58rem; font-weight: 580; letter-spacing: .025em; }
.status-material strong { margin-top: .18rem; font-size: .73rem; }
.status-radar { top: 16%; left: -4%; }
.status-source { right: -5%; bottom: 20%; }
.status-dot, .status-check { flex: none; display: grid; place-items: center; width: 1.25rem; height: 1.25rem; border-radius: 50%; }
.status-dot { background: var(--cyan); box-shadow: 0 0 0 .35rem rgba(3, 185, 211, .13); }
.status-check { background: var(--green); color: white; font-size: .65rem; }

.facts { display: grid; grid-template-columns: repeat(3, 1fr); width: min(100% - 3rem, 72rem); margin: 0 auto; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.facts p { display: flex; flex-direction: column; align-items: center; gap: .18rem; padding: 1.45rem 1rem; margin: 0; text-align: center; }
.facts p + p { border-left: 1px solid var(--hairline); }
.facts strong { color: var(--ink); font-size: .88rem; letter-spacing: -.012em; }
.facts span { color: var(--tertiary); font-size: .66rem; }

.section { width: min(100% - 3rem, 72rem); padding: 8rem 0; margin: 0 auto; }
.section-intro { max-width: 48rem; margin-bottom: 3.25rem; }
.section-intro.centered { margin-right: auto; margin-left: auto; text-align: center; }
.section-intro h2, .premium h2, .download h2 { margin: 0; color: var(--ink); font-size: clamp(2.45rem, 5vw, 4.7rem); font-weight: 730; line-height: 1.04; letter-spacing: -.055em; }
.section-intro > p:last-child { max-width: 34rem; margin: 1rem auto 0; color: var(--secondary); line-height: 1.75; }

.layer-explorer { position: relative; }
.layer-radio { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.layer-tabs {
  position: relative;
  z-index: 4;
  display: flex;
  width: fit-content;
  max-width: 100%;
  padding: .32rem;
  margin: 0 auto 1rem;
  overflow-x: auto;
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 999px;
  background: var(--surface-raised);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  box-shadow: 0 .65rem 2rem rgba(34, 82, 110, .08);
  scrollbar-width: none;
}
.layer-tabs::-webkit-scrollbar { display: none; }
.layer-tabs label { display: inline-flex; align-items: center; justify-content: center; gap: .42rem; min-height: 2.8rem; padding: 0 1.15rem; border-radius: 999px; color: var(--secondary); font-size: .78rem; font-weight: 620; white-space: nowrap; cursor: pointer; user-select: none; transition: color 180ms ease, background 180ms ease, box-shadow 180ms ease, transform 100ms ease-out; }
.layer-tabs label span { color: var(--blue); font-size: .95rem; }
.layer-tabs label:active { transform: scale(.97); transition-duration: 80ms; }
#layer-weather:focus-visible ~ .layer-tabs label[for="layer-weather"],
#layer-air:focus-visible ~ .layer-tabs label[for="layer-air"],
#layer-resource:focus-visible ~ .layer-tabs label[for="layer-resource"] { outline: .18rem solid rgba(10, 110, 196, .35); outline-offset: .1rem; }
#layer-weather:checked ~ .layer-tabs label[for="layer-weather"],
#layer-air:checked ~ .layer-tabs label[for="layer-air"],
#layer-resource:checked ~ .layer-tabs label[for="layer-resource"] { background: var(--ink); color: var(--page); box-shadow: 0 .35rem .9rem rgba(7, 21, 32, .16); }
#layer-weather:checked ~ .layer-tabs label[for="layer-weather"] span,
#layer-air:checked ~ .layer-tabs label[for="layer-air"] span,
#layer-resource:checked ~ .layer-tabs label[for="layer-resource"] span { color: #72dcf0; }

.layer-stage { display: grid; min-height: 42rem; }
.layer-panel {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: .86fr 1.14fr;
  align-items: center;
  gap: clamp(2rem, 7vw, 7rem);
  min-width: 0;
  min-height: 42rem;
  padding: 4.5rem clamp(2rem, 6vw, 6rem);
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
  border: 1px solid var(--hairline);
  border-radius: 2.4rem;
  background: var(--surface);
  transform: translateX(.65rem) scale(.995);
  transition: opacity 220ms ease, transform 360ms cubic-bezier(.2, .75, .2, 1), visibility 0s linear 360ms;
}
#layer-weather:checked ~ .layer-stage .panel-weather,
#layer-air:checked ~ .layer-stage .panel-air,
#layer-resource:checked ~ .layer-stage .panel-resource { z-index: 2; visibility: visible; opacity: 1; transform: translateX(0) scale(1); transition-delay: 0s; }
.panel-weather { background: linear-gradient(135deg, #edfaff 0%, var(--surface) 56%); }
.panel-air { background: linear-gradient(135deg, #f5fff3 0%, var(--surface) 56%); }
.panel-resource { background: linear-gradient(135deg, #f2f1ff 0%, var(--surface) 56%); }
.panel-copy { max-width: 30rem; }
.panel-label { margin: 0 0 .8rem; color: var(--blue); font-size: .68rem; font-weight: 700; letter-spacing: .07em; }
.panel-copy h3 { margin: 0 0 1rem; color: var(--ink); font-size: clamp(2rem, 3.5vw, 3.4rem); font-weight: 720; line-height: 1.06; letter-spacing: -.05em; }
.panel-copy > p:not(.panel-label) { color: var(--secondary); line-height: 1.8; }
.panel-copy ul { display: flex; flex-wrap: wrap; gap: .45rem; padding: 0; margin-top: 1.5rem; list-style: none; }
.panel-copy li { padding: .35rem .7rem; margin: 0; border: 1px solid var(--hairline); border-radius: 999px; background: rgba(255, 255, 255, .64); color: #51636f; font-size: .65rem; font-weight: 570; }
.panel-device { position: relative; min-height: 34rem; display: grid; place-items: center; }
.panel-device::before { content: ""; position: absolute; width: 28rem; max-width: 100%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(10, 159, 214, .17), transparent 67%); }
.panel-air .panel-device::before { background: radial-gradient(circle, rgba(55, 195, 107, .15), transparent 67%); }
.panel-resource .panel-device::before { background: radial-gradient(circle, rgba(91, 83, 232, .17), transparent 67%); }
.panel-device .device { width: min(16.5rem, 70vw); }

.also-included { padding: 2.5rem 0 0; text-align: center; }
.also-included > p { margin-bottom: .8rem; color: var(--tertiary); font-size: .68rem; font-weight: 630; letter-spacing: .04em; }
.also-included ul { display: flex; justify-content: center; flex-wrap: wrap; gap: .45rem; padding: 0; margin: 0; list-style: none; }
.also-included li { padding: .3rem .72rem; margin: 0; border-radius: 999px; background: rgba(96, 118, 132, .08); color: var(--secondary); font-size: .68rem; }

.parking-search {
  width: 100%;
  padding: 8rem max(1.5rem, calc((100vw - 72rem) / 2));
  overflow: hidden;
  background: var(--surface);
}
.parking-search-inner { display: grid; grid-template-columns: 1.08fr .92fr; align-items: center; gap: clamp(3rem, 8vw, 8rem); max-width: 72rem; margin: 0 auto; }
.parking-copy { max-width: 36rem; }
.parking-copy h2 { margin: 0; color: var(--ink); font-size: clamp(2.45rem, 5vw, 4.7rem); font-weight: 730; line-height: 1.04; letter-spacing: -.055em; }
.parking-copy > p:not(.section-kicker):not(.parking-caveat) { margin: 1.35rem 0 1.8rem; color: var(--secondary); line-height: 1.8; }
.parking-points { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; padding: 0; margin: 0; list-style: none; }
.parking-points li { min-height: 8.2rem; padding: 1rem; margin: 0; border: 1px solid var(--hairline); border-radius: 1rem; background: var(--page); }
.parking-points strong, .parking-points span { display: block; }
.parking-points strong { margin-bottom: .42rem; color: var(--ink); font-size: .75rem; }
.parking-points span { color: var(--secondary); font-size: .65rem; line-height: 1.65; }
.parking-caveat { margin: 1.35rem 0 0; color: var(--tertiary); font-size: .68rem; line-height: 1.7; }
.parking-caveat span { display: inline-block; padding: .12rem .48rem; margin-right: .35rem; border-radius: 999px; background: rgba(25, 173, 117, .11); color: var(--green); font-weight: 700; }
.parking-visual { position: relative; aspect-ratio: 960 / 1210; border: 1px solid var(--hairline); border-radius: 2.4rem; background: #e6edf0; box-shadow: 0 2rem 5rem rgba(34, 82, 110, .13); isolation: isolate; }
.parking-map { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; }
.parking-map img { display: block; width: 100%; height: 100%; object-fit: cover; }
.parking-update, .parking-road-card { position: absolute; z-index: 5; border: 1px solid rgba(255, 255, 255, .8); background: rgba(255, 255, 255, .8); -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%); box-shadow: 0 1rem 2.5rem rgba(34, 82, 110, .17); color: #102637; }
.parking-update { right: -4%; top: 44%; display: flex; align-items: center; gap: .6rem; padding: .72rem .9rem; border-radius: 1rem; line-height: 1.15; }
.parking-update i { width: .55rem; height: .55rem; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 .32rem rgba(25, 173, 117, .14); }
.parking-update span { display: flex; flex-direction: column; }
.parking-update small, .parking-road-card small { color: #677b88; font-size: .55rem; font-weight: 580; }
.parking-update strong { margin-top: .18rem; font-size: .7rem; }
.parking-road-card { top: 5%; left: -4%; display: flex; flex-direction: column; min-width: 11.8rem; padding: .85rem 1rem; border-radius: 1rem; line-height: 1.25; }
.parking-road-card strong { margin: .22rem 0 .12rem; font-size: .76rem; }
.parking-road-card > span { color: #70838e; font-size: .58rem; }

.playback {
  width: 100%;
  padding: 8rem max(1.5rem, calc((100vw - 72rem) / 2));
  overflow: hidden;
  background: linear-gradient(145deg, #eaf8ff 0%, #f5f3ff 55%, #f7fafc 100%);
}
.playback-inner { display: grid; grid-template-columns: .95fr 1.05fr; align-items: center; gap: clamp(3rem, 8vw, 8rem); max-width: 72rem; margin: 0 auto; }
.playback-copy { position: relative; z-index: 3; max-width: 36rem; }
.playback-copy h2 { margin: 0; color: var(--ink); font-size: clamp(2.45rem, 5vw, 4.7rem); font-weight: 730; line-height: 1.04; letter-spacing: -.055em; }
.playback-copy > p:not(.section-kicker):not(.playback-access) { margin: 1.35rem 0 1.8rem; color: var(--secondary); line-height: 1.8; }
.playback-points { display: grid; gap: 0; padding: 0; margin: 0; list-style: none; }
.playback-points li { display: grid; grid-template-columns: 9.2rem 1fr; gap: 1rem; padding: .82rem 0; margin: 0; border-top: 1px solid var(--hairline); }
.playback-points li:last-child { border-bottom: 1px solid var(--hairline); }
.playback-points strong { color: var(--ink); font-size: .8rem; }
.playback-points span { color: var(--secondary); font-size: .76rem; }
.playback-access { margin: 1.4rem 0 0; color: var(--tertiary); font-size: .68rem; line-height: 1.7; }
.playback-access span { display: inline-block; padding: .12rem .48rem; margin-right: .35rem; border-radius: 999px; background: rgba(8, 125, 209, .1); color: var(--blue); font-weight: 700; }
.playback-visual { position: relative; display: grid; place-items: center; min-height: 42rem; }
.playback-halo { position: absolute; width: min(37rem, 48vw); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(3, 185, 211, .2), rgba(87, 89, 233, .08) 48%, transparent 70%); }
.playback-halo::before, .playback-halo::after { content: ""; position: absolute; inset: 16%; border: 1px solid rgba(8, 125, 209, .13); border-radius: 50%; }
.playback-halo::after { inset: 34%; }
.playback-device { z-index: 2; width: min(17rem, 70vw); }
.playback-controller {
  position: absolute;
  z-index: 4;
  right: -2%;
  bottom: 14%;
  width: min(20rem, 76vw);
  padding: .95rem 1rem .75rem;
  border: 1px solid rgba(255, 255, 255, .8);
  border-radius: 1.15rem;
  background: rgba(255, 255, 255, .78);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  backdrop-filter: blur(20px) saturate(170%);
  box-shadow: 0 1.4rem 3.5rem rgba(34, 82, 110, .2);
  color: #102637;
}
.playback-controller-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .75rem; font-size: .7rem; }
.playback-controller-head > span { display: flex; align-items: center; gap: .42rem; color: #5e7481; font-weight: 620; }
.playback-controller-head i { width: .42rem; height: .42rem; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 .25rem rgba(3, 185, 211, .12); }
.playback-controller-head strong { font-size: .8rem; font-variant-numeric: tabular-nums; }
.playback-controller-row { display: flex; align-items: center; gap: .8rem; }
.playback-play { display: grid; place-items: center; flex: none; width: 1.8rem; height: 1.8rem; padding-left: .1rem; border-radius: 50%; background: var(--blue); color: #fff; font-size: .58rem; }
.playback-timeline { position: relative; flex: 1; height: .28rem; border-radius: 999px; background: rgba(73, 101, 119, .18); }
.playback-timeline::before { content: ""; position: absolute; inset: 0 34% 0 0; border-radius: inherit; background: linear-gradient(90deg, var(--blue), var(--cyan)); }
.playback-timeline i { position: absolute; z-index: 1; top: 50%; left: 66%; width: .85rem; height: .85rem; border: .16rem solid #fff; border-radius: 50%; background: var(--blue); box-shadow: 0 .15rem .5rem rgba(8, 80, 128, .26); transform: translate(-50%, -50%); }
.playback-times { display: flex; justify-content: space-between; padding-left: 2.6rem; margin-top: .3rem; color: #81929c; font-size: .53rem; font-variant-numeric: tabular-nums; }
.quake-sequence {
  position: absolute;
  z-index: 3;
  top: 15%;
  left: -4%;
  display: flex;
  align-items: center;
  gap: .62rem;
  padding: .72rem .9rem;
  border: 1px solid rgba(255, 255, 255, .75);
  border-radius: 1rem;
  background: rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: blur(18px) saturate(170%);
  backdrop-filter: blur(18px) saturate(170%);
  box-shadow: 0 1rem 2.5rem rgba(34, 82, 110, .14);
  color: #102637;
  line-height: 1.15;
}
.quake-sequence > span:last-child { display: flex; flex-direction: column; }
.quake-sequence small { color: #677b88; font-size: .56rem; font-weight: 580; }
.quake-sequence strong { margin-top: .18rem; font-size: .7rem; }
.quake-icon { display: grid; place-items: center; width: 1.35rem; height: 1.35rem; border-radius: 50%; background: rgba(87, 89, 233, .12); color: var(--purple); font-weight: 750; }

.premium { width: 100%; padding: 8rem max(1.5rem, calc((100vw - 72rem) / 2)); background: #07141e; color: #fff; }
.premium-inner { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(3rem, 9vw, 8rem); max-width: 72rem; margin: 0 auto; }
.premium-visual { position: relative; display: grid; place-items: center; min-height: 37rem; }
.premium-orbit { position: absolute; width: min(33rem, 48vw); aspect-ratio: 1; border: 1px solid rgba(112, 209, 240, .16); border-radius: 50%; }
.premium-orbit::before { content: ""; position: absolute; inset: 20%; border: 1px solid rgba(139, 111, 247, .18); border-radius: 50%; }
.premium-device { width: min(17rem, 70vw); border-color: #202831; box-shadow: 0 2.5rem 5rem rgba(0, 0, 0, .38); }
.premium-copy { max-width: 35rem; }
.premium .section-kicker { color: #6cdaee; }
.premium h2 { color: #fff; }
.premium-copy > p:not(.section-kicker):not(.premium-note) { margin: 1.5rem 0; color: #aabac5; font-size: 1rem; line-height: 1.8; }
.check-list { padding: 0; margin: 1.5rem 0; list-style: none; }
.check-list li { display: flex; align-items: center; gap: .7rem; padding: .62rem 0; margin: 0; color: #d7e0e6; font-size: .85rem; }
.check-list li span { display: grid; place-items: center; flex: none; width: 1.3rem; height: 1.3rem; border-radius: 50%; background: rgba(108, 218, 238, .14); color: #73def1; font-size: .62rem; }
.premium-note { max-width: 30rem; color: #718794; font-size: .68rem; }

.principles .section-intro { max-width: 52rem; }
.principle-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.principle-grid article { min-height: 17rem; padding: 2rem; border: 1px solid var(--hairline); border-radius: 1.75rem; background: var(--surface); }
.principle-icon { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; margin-bottom: 3.25rem; border-radius: 50%; background: rgba(8, 125, 209, .09); color: var(--blue); font-size: 1rem; font-weight: 680; }
.principle-grid h3 { margin: 0 0 .55rem; color: var(--ink); font-size: 1.08rem; letter-spacing: -.018em; }
.principle-grid p { margin: 0; color: var(--secondary); font-size: .83rem; line-height: 1.75; }

.download { padding: 8rem 1.5rem; text-align: center; background: linear-gradient(180deg, #eef8fd, #f8fafc); color: var(--ink); }
.download img { border-radius: 1.45rem; box-shadow: 0 1rem 2.5rem rgba(16, 112, 169, .18); }
.download .section-kicker { margin: 1.6rem 0 .8rem; }
.download h2 { max-width: 46rem; margin: 0 auto; }
.download > p:not(.section-kicker) { margin-top: 1rem; color: var(--secondary); }
.store-pill-light { margin-top: .9rem; background: var(--ink); color: var(--page); text-align: left; }

footer.site.landing-footer { display: grid; grid-template-columns: 1fr auto; align-items: start; gap: 1rem 2rem; max-width: none; padding: 2.5rem max(1.5rem, calc((100vw - 72rem) / 2)); margin: 0; border: 0; background: #061019; color: #718692; }
.footer-brand { display: flex; flex-direction: column; }
.footer-brand strong { color: #fff; font-size: .94rem; }
.footer-brand span { font-size: .65rem; }
.landing-footer nav { margin: 0; }
.landing-footer nav a { display: inline-flex; min-height: 2.75rem; align-items: center; margin: 0 0 0 1.2rem; color: #a5b5bf; text-decoration: none; }
.landing-footer > p { grid-column: 1 / -1; max-width: 54rem; margin: .5rem 0 0; font-size: .63rem; line-height: 1.7; }

@media (max-width: 62rem) {
  .hero { grid-template-columns: minmax(0, 1fr) 22rem; gap: 2rem; }
  .hero-product { min-height: 35rem; }
  .status-radar { left: -10%; }
  .status-source { right: -8%; }
  .layer-panel { gap: 2rem; padding: 3.5rem 2.5rem; }
  .parking-search-inner { gap: 2rem; }
  .parking-points { grid-template-columns: 1fr; }
  .parking-points li { min-height: 0; }
  .playback-inner { gap: 2rem; }
  .playback-controller { right: -5%; }
}

@media (max-width: 48rem) {
  .primary-nav { display: none; }
  .landing-nav .lang { margin-left: auto; }
  .hero { grid-template-columns: 1fr; min-height: auto; padding-top: 4rem; text-align: center; }
  .hero-copy { margin: 0 auto; }
  .lead { margin: 0 auto; }
  .hero-actions, .trust-row { justify-content: center; }
  .hero-product { min-height: 36rem; }
  .hero-halo { width: min(38rem, 88vw); }
  .status-radar { left: 9%; }
  .status-source { right: 8%; }
  .layer-panel { grid-template-columns: 1fr; min-height: 66rem; text-align: center; }
  .panel-copy { margin: 0 auto; }
  .panel-copy ul { justify-content: center; }
  .panel-device { min-height: 34rem; }
  .parking-search-inner { grid-template-columns: 1fr; text-align: center; }
  .parking-copy { grid-row: 1; margin: 0 auto; }
  .parking-points { grid-template-columns: repeat(3, 1fr); text-align: left; }
  .parking-visual { width: min(100%, 34rem); margin: 0 auto; }
  .playback-inner { grid-template-columns: 1fr; text-align: center; }
  .playback-copy { margin: 0 auto; }
  .playback-points { text-align: left; }
  .playback-visual { min-height: 38rem; }
  .playback-halo { width: min(37rem, 88vw); }
  .playback-controller { right: 7%; }
  .quake-sequence { left: 8%; }
  .premium-inner { grid-template-columns: 1fr; text-align: center; }
  .premium-visual { min-height: 34rem; }
  .premium-copy { margin: 0 auto; }
  .check-list { width: fit-content; margin-right: auto; margin-left: auto; text-align: left; }
  .premium-note { margin-right: auto; margin-left: auto; }
  .principle-grid { grid-template-columns: 1fr; }
  .principle-grid article { min-height: 0; }
  .principle-icon { margin-bottom: 2rem; }
}

@media (max-width: 36rem) {
  .nav-inner { width: min(100% - 1.5rem, 72rem); min-height: 4.25rem; gap: .7rem; }
  .landing-nav .brand img { width: 2.1rem; height: 2.1rem; border-radius: .62rem; }
  .landing-nav .brand-copy small { display: none; }
  .landing-nav .lang { padding-left: .65rem; font-size: .7rem; }
  .landing-nav .lang a:nth-of-type(3), .landing-nav .lang a:nth-of-type(4), .landing-nav .lang .sep:nth-of-type(2), .landing-nav .lang .sep:nth-of-type(3) { display: none; }
  .hero { width: min(100% - 2rem, 72rem); padding: 3.5rem 0 4.5rem; }
  .hero h1 { font-size: clamp(3.25rem, 17vw, 4.8rem); }
  .hero-answer { font-size: 1.65rem; }
  .lead { font-size: .95rem; }
  .hero-actions { flex-direction: column; }
  .hero-product { min-height: 31rem; }
  .device-hero { width: 14rem; }
  .status-material { min-width: 8.2rem; padding: .6rem .7rem; transform: scale(.88); }
  .status-radar { top: 15%; left: -2%; }
  .status-source { right: -3%; bottom: 15%; }
  .facts { grid-template-columns: 1fr; width: min(100% - 2rem, 72rem); }
  .facts p { flex-direction: row; justify-content: space-between; text-align: left; }
  .facts p + p { border-top: 1px solid var(--hairline); border-left: 0; }
  .section { width: min(100% - 2rem, 72rem); padding: 6rem 0; }
  .section-intro h2, .premium h2, .download h2 { font-size: 2.65rem; }
  .layer-tabs { width: 100%; }
  .layer-tabs label { flex: 1 0 auto; padding: 0 .85rem; }
  .layer-panel { min-height: 59rem; padding: 2.75rem 1.25rem; border-radius: 1.75rem; }
  .panel-copy h3 { font-size: 2.25rem; }
  .panel-device { min-height: 30rem; }
  .panel-device .device { width: 14rem; }
  .parking-search { padding: 6rem 1rem; }
  .parking-copy h2 { font-size: 2.65rem; }
  .parking-points { grid-template-columns: 1fr; }
  .parking-visual { border-radius: 1.75rem; }
  .parking-update { right: -3%; transform: scale(.9); transform-origin: right center; }
  .parking-road-card { left: -3%; transform: scale(.9); transform-origin: left center; }
  .playback { padding: 6rem 1rem; }
  .playback-copy h2 { font-size: 2.65rem; }
  .playback-points li { grid-template-columns: 1fr; gap: .15rem; }
  .playback-visual { min-height: 34rem; }
  .playback-device { width: 14.5rem; }
  .playback-controller { right: -3%; bottom: 12%; width: min(18rem, 88vw); }
  .quake-sequence { top: 12%; left: -3%; transform: scale(.9); transform-origin: left center; }
  .premium { padding: 6rem 1rem; }
  .premium-device { width: 14.5rem; }
  .download { padding: 6rem 1rem; }
  footer.site.landing-footer { grid-template-columns: 1fr; padding-right: 1rem; padding-left: 1rem; text-align: center; }
  .landing-footer nav a { margin: 0 .5rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .layer-tabs label, .layer-panel { transition: none; }
  .layer-panel { transform: none; }
}

@media (prefers-reduced-transparency: reduce) {
  header.site.landing-nav, .layer-tabs, .status-material, .parking-update, .parking-road-card, .playback-controller, .quake-sequence { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--surface); }
  .landing-nav::after { display: none; }
}

@media (prefers-contrast: more) {
  body.landing { --hairline: rgba(0, 0, 0, .42); }
  .layer-tabs, .status-material, .parking-update, .parking-road-card, .playback-controller, .quake-sequence { background: var(--surface); border-color: var(--hairline); }
  .quiet-button, .layer-panel, .playback-controller, .principle-grid article { border-width: 2px; }
}

@media (prefers-color-scheme: dark) {
  body:not(.landing) {
    --bg: #111214;
    --bg-soft: #1a1c20;
    --text: #e9eaec;
    --text-soft: #a2a7b0;
    --line: #2c2f35;
    --accent: #63b3f2;
  }
  body.landing {
    --page: #05090c;
    --surface: #10161b;
    --surface-raised: rgba(20, 29, 35, .76);
    --ink: #f4f8fa;
    --secondary: #a2b0b9;
    --tertiary: #748691;
    --hairline: rgba(210, 232, 243, .12);
    --blue: #63b8f3;
    --cyan: #53d7e9;
    --green: #57d29c;
    --purple: #9c9aff;
    --shadow: 0 2rem 5rem rgba(0, 0, 0, .42);
  }
  header.site.landing-nav { background: rgba(5, 9, 12, .7); }
  .landing-nav::after { background: linear-gradient(to bottom, rgba(5, 9, 12, .55), transparent); }
  .quiet-button { background: #11191f; }
  .store-pill, .store-pill-light { background: #f3f7f9; color: #071119; }
  .status-material { border-color: rgba(255, 255, 255, .12); background: rgba(22, 31, 38, .76); color: #edf5f8; }
  .status-material small { color: #8da0ab; }
  #layer-weather:checked ~ .layer-tabs label[for="layer-weather"],
  #layer-air:checked ~ .layer-tabs label[for="layer-air"],
  #layer-resource:checked ~ .layer-tabs label[for="layer-resource"] { background: #f1f6f8; color: #071119; }
  #layer-weather:checked ~ .layer-tabs label[for="layer-weather"] span,
  #layer-air:checked ~ .layer-tabs label[for="layer-air"] span,
  #layer-resource:checked ~ .layer-tabs label[for="layer-resource"] span { color: #137ebd; }
  .panel-weather { background: linear-gradient(135deg, #10252e 0%, var(--surface) 56%); }
  .panel-air { background: linear-gradient(135deg, #11251b 0%, var(--surface) 56%); }
  .panel-resource { background: linear-gradient(135deg, #1b1933 0%, var(--surface) 56%); }
  .panel-copy li { background: rgba(255, 255, 255, .04); color: #a9bac4; }
  .also-included li { background: rgba(220, 238, 247, .08); }
  .parking-visual { background: #172126; }
  .parking-update, .parking-road-card { border-color: rgba(255, 255, 255, .12); background: rgba(22, 31, 38, .82); color: #edf5f8; }
  .parking-update small, .parking-road-card small, .parking-road-card > span { color: #8da0ab; }
  .playback { background: linear-gradient(145deg, #0b1b23 0%, #151429 55%, #05090c 100%); }
  .playback-controller, .quake-sequence { border-color: rgba(255, 255, 255, .12); background: rgba(22, 31, 38, .8); color: #edf5f8; }
  .playback-controller-head > span, .quake-sequence small { color: #8da0ab; }
  .playback-timeline { background: rgba(213, 233, 243, .18); }
  .premium { background: #020609; }
  .download { background: linear-gradient(180deg, #0c1820, #05090c); }
}

@media (max-width: 30rem) {
  body:not(.landing) { font-size: 1rem; }
  body:not(.landing) h1 { font-size: 1.6rem; }
}