:root {
  color-scheme: light;
  --ink: #153932;
  --muted: #66847b;
  --brand: #0b5d4b;
  --brand-deep: #073d33;
  --emerald: #10977b;
  --mint: #e8f7ef;
  --line: rgba(12, 94, 75, 0.13);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; color: var(--ink); background: linear-gradient(180deg, #f6fbf8 0%, #fff 58%, #f3faf6 100%); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif; }
a { color: inherit; }
.site-shell { overflow: hidden; }

.hero { position: relative; min-height: 700px; color: #fff; isolation: isolate; background: #07503f; }
.hero-background, .hero::after { position: absolute; inset: 0; content: ""; pointer-events: none; }
.hero-background { z-index: -2; background: url("./assets/hero-wellness-v1.png") center / cover no-repeat; transform: scale(1.02); }
.hero::after { z-index: -1; background: linear-gradient(93deg, rgba(5, 62, 50, .95) 0%, rgba(7, 79, 62, .91) 42%, rgba(8, 101, 76, .33) 74%, rgba(7, 84, 65, .13) 100%); }
.hero-content, .section, .trust-strip { width: min(1120px, calc(100% - 40px)); margin: 0 auto; }

.topbar { display: flex; align-items: center; justify-content: space-between; padding: 24px 0; }
.brand { display: inline-flex; align-items: center; gap: 11px; color: #fff; text-decoration: none; }
.brand-mark { display: grid; width: 37px; height: 37px; place-items: center; border: 1px solid rgba(255,255,255,.35); border-radius: 12px; background: rgba(255,255,255,.16); box-shadow: inset 0 1px rgba(255,255,255,.2); font-size: 19px; font-weight: 800; }
.brand-name { font-size: 18px; font-weight: 800; letter-spacing: .06em; }
.topbar-note { color: rgba(255,255,255,.74); font-size: 13px; }

.hero-grid { display: grid; min-height: 620px; grid-template-columns: minmax(0,1.04fr) minmax(380px,.96fr); align-items: center; gap: 24px; }
.hero-copy { position: relative; z-index: 2; max-width: 555px; padding: 42px 0 70px; }
.eyebrow, .section-kicker { margin: 0; font-size: 12px; font-weight: 800; letter-spacing: .13em; }
.eyebrow { display: flex; align-items: center; gap: 8px; color: #c8f3de; }
.pulse-dot { width: 8px; height: 8px; border-radius: 99px; background: #89edbb; box-shadow: 0 0 0 6px rgba(137,237,187,.14); }
h1, h2, h3, p { margin-top: 0; }
h1 { max-width: 620px; margin: 18px 0 20px; font-size: clamp(45px,5.6vw,72px); line-height: 1.12; letter-spacing: -.055em; }
h1 em { color: #b7f6d5; font-style: normal; }
.hero-description { max-width: 490px; margin-bottom: 21px; color: rgba(255,255,255,.84); font-size: 17px; line-height: 1.85; }
.hero-points { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 28px; padding: 0; list-style: none; }
.hero-points li { padding: 8px 12px; border: 1px solid rgba(203,255,229,.24); border-radius: 999px; background: rgba(255,255,255,.1); color: #e4fff0; font-size: 13px; }
.download-actions { max-width: 342px; }
.download-button, .secondary-download { display: inline-flex; align-items: center; justify-content: center; gap: 12px; text-decoration: none; transition: transform 180ms ease, box-shadow 180ms ease, opacity 180ms ease; }
.download-button { width: 100%; min-height: 68px; padding: 12px 20px; border-radius: 18px; background: #fff; color: var(--brand-deep); box-shadow: 0 18px 34px rgba(0,26,18,.24); }
.download-button:hover, .secondary-download:hover { transform: translateY(-2px); }
.download-button strong, .download-button small { display: block; text-align: left; }
.download-button strong { font-size: 16px; }
.download-button small { margin-top: 3px; color: #74958a; font-size: 12px; }
.download-icon { display: grid; width: 35px; height: 35px; place-items: center; border-radius: 12px; background: var(--mint); color: var(--emerald); font-size: 25px; font-weight: 700; line-height: 1; }
.download-button.disabled { cursor: not-allowed; background: #e6eeea; color: #80978e; box-shadow: none; pointer-events: none; }
.platform-tip { min-height: 22px; margin: 12px 0 0; color: rgba(255,255,255,.73); font-size: 13px; line-height: 1.55; text-align: center; }
.hero-legal { margin: 15px 0 0; color: rgba(255,255,255,.58); font-size: 12px; }

.hero-product { position: relative; height: 100%; min-height: 565px; }
.hero-product > img { position: absolute; z-index: 2; right: -5%; bottom: -3%; width: min(630px,115%); max-height: 645px; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 32px 26px rgba(0,34,24,.39)); }
.product-glow { position: absolute; z-index: 0; top: 20%; right: 5%; width: 66%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(198,255,218,.59), rgba(82,224,165,.17) 44%, transparent 70%); filter: blur(6px); }
.hero-orbit { position: absolute; z-index: 1; border: 1px solid rgba(214,255,231,.42); border-radius: 50%; transform: rotate(-21deg); }
.orbit-one { top: 18%; right: 1%; width: 430px; height: 200px; }
.orbit-two { top: 36%; right: -5%; width: 510px; height: 235px; opacity: .4; }
.floating-chip { position: absolute; z-index: 3; display: flex; align-items: center; gap: 8px; padding: 10px 13px; border: 1px solid rgba(255,255,255,.35); border-radius: 14px; background: rgba(5,72,56,.56); box-shadow: 0 13px 28px rgba(0,32,23,.22); backdrop-filter: blur(12px); color: #fff; font-size: 13px; }
.floating-chip span { color: #9df7c7; font-size: 17px; }
.chip-heart { top: 24%; left: 2%; }
.chip-family { right: 5%; bottom: 20%; }

.trust-strip { position: relative; z-index: 4; display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; margin-top: -38px; overflow: hidden; border: 1px solid rgba(255,255,255,.74); border-radius: 21px; background: rgba(255,255,255,.48); box-shadow: 0 16px 37px rgba(10,75,59,.12); backdrop-filter: blur(15px); }
.trust-strip > div { display: grid; grid-template-columns: 38px 1fr; column-gap: 11px; padding: 18px 20px; background: rgba(255,255,255,.85); }
.strip-icon { display: grid; grid-row: span 2; width: 34px; height: 34px; place-items: center; border-radius: 11px; background: #e8f7ee; color: var(--emerald); font-size: 20px; }
.trust-strip strong { font-size: 14px; }
.trust-strip small { margin-top: 4px; color: var(--muted); font-size: 12px; }

.section { padding: 104px 0 0; }
.section-heading { max-width: 590px; margin: 0 auto 34px; text-align: center; }
.section-kicker { color: var(--emerald); }
h2 { margin: 10px 0 12px; font-size: clamp(30px,3.5vw,45px); letter-spacing: -.045em; line-height: 1.18; }
.section-heading > p:last-child { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.8; }

.about-brand { display: grid; grid-template-columns: minmax(0,1fr) minmax(280px,.8fr); gap: 30px 56px; align-items: center; padding: 52px 56px; border: 1px solid var(--line); border-radius: 28px; background: linear-gradient(135deg,#f7fcf9,#e7f7ee); box-shadow: 0 16px 38px rgba(12,78,59,.07); }
.about-brand-copy h2 { max-width: 610px; margin-top: 11px; }
.about-brand-copy > p:last-child { max-width: 635px; margin: 0; color: #53756b; font-size: 15px; line-height: 1.9; }
.brand-search-terms { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.brand-search-terms span { padding: 10px 13px; border: 1px solid rgba(16,151,123,.2); border-radius: 999px; background: rgba(255,255,255,.75); color: var(--brand); font-size: 13px; font-weight: 700; }
.about-brand-note { grid-column: 1 / -1; margin: 0; padding-top: 18px; border-top: 1px solid rgba(12,94,75,.11); color: #6a897f; font-size: 12px; line-height: 1.7; }

.device-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; }
.device-card { min-height: 270px; overflow: hidden; border: 1px solid var(--line); border-radius: 20px; background: linear-gradient(145deg,#eff9f3,#fff 68%); box-shadow: 0 12px 28px rgba(12,78,59,.07); }
.device-card:hover { border-color: rgba(16,151,123,.4); box-shadow: 0 17px 34px rgba(12,78,59,.12); }
.device-image { position: relative; display: flex; height: 194px; align-items: center; justify-content: center; overflow: hidden; }
.device-image::after { position: absolute; right: 13%; bottom: 12%; left: 13%; height: 17px; border-radius: 50%; background: rgba(8,67,52,.16); content: ""; filter: blur(9px); }
.device-image img { position: relative; z-index: 1; width: 142%; height: 138%; object-fit: contain; transform: translateY(8%); filter: drop-shadow(0 9px 9px rgba(1,40,29,.18)); }
.device-g20 .device-image img { width: 155%; height: 160%; transform: translateY(11%) rotate(-8deg); }
.device-light .device-image { background: linear-gradient(135deg,#f8fbef,#f2eee4); }
.device-light .device-image img { width: 134%; transform: translateY(8%); }
.device-card > div:last-child { padding: 2px 18px 18px; }
.device-card span { color: var(--muted); font-size: 12px; }
.device-card h3 { margin: 3px 0 0; font-size: 22px; letter-spacing: -.02em; }

.download-panel { display: grid; grid-template-columns: 1fr 390px; align-items: center; gap: 60px; margin-top: 104px; padding: 72px; border-radius: 32px; background: linear-gradient(135deg,#e7f8ee 0%,#f9fffb 47%,#d8f2e4 100%); }
.download-copy h2 { margin-top: 12px; }
.download-copy > p:not(.section-kicker):not(.version-note) { max-width: 475px; color: #4f7268; font-size: 16px; line-height: 1.85; }
.secondary-download { margin-top: 11px; padding: 15px 18px; border-radius: 14px; background: var(--brand); color: #fff; font-size: 15px; font-weight: 800; box-shadow: 0 11px 22px rgba(9,89,70,.18); }
.secondary-download span { font-size: 21px; }
.version-note { margin: 15px 0 0; color: #79978e; font-size: 12px; }
.qr-card { padding: 24px; border: 1px solid rgba(11,93,75,.15); border-radius: 24px; background: rgba(255,255,255,.85); box-shadow: 0 18px 40px rgba(7,85,62,.12); text-align: center; }
.qr-label { display: flex; align-items: center; justify-content: center; gap: 7px; color: var(--brand); font-size: 14px; font-weight: 800; }
.qr-label-dot { width: 7px; height: 7px; border-radius: 50%; background: #72d9a2; box-shadow: 0 0 0 5px rgba(114,217,162,.18); }
.qr-frame { display: grid; width: 238px; height: 238px; margin: 20px auto 14px; place-items: center; border: 1px solid #d4e9dd; border-radius: 18px; background: #fff; }
.qr-frame img { display: block; width: 218px; height: 218px; }
.qr-card p { margin: 0; color: #67877d; font-size: 12px; word-break: break-all; }

.install-guide { padding-bottom: 92px; }
.section-heading.compact { margin-bottom: 28px; }
.install-guide ol { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; margin: 0; padding: 0; list-style: none; }
.install-guide li { display: grid; grid-template-columns: 46px 1fr; gap: 14px; padding: 22px 0; border-top: 1px solid var(--line); }
.install-guide li > span { color: #a2d5b9; font-size: 16px; font-weight: 800; }
.install-guide h3 { margin: 0 0 7px; font-size: 17px; }
.install-guide p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.75; }

.faq-section { padding-top: 86px; padding-bottom: 94px; }
.faq-list { max-width: 790px; margin: 0 auto; border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { position: relative; padding: 21px 38px 21px 0; cursor: pointer; color: var(--ink); font-size: 16px; font-weight: 800; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { position: absolute; top: 50%; right: 5px; width: 10px; height: 10px; border-right: 2px solid var(--emerald); border-bottom: 2px solid var(--emerald); content: ""; transform: translateY(-68%) rotate(45deg); transition: transform 180ms ease; }
.faq-list details[open] summary::after { transform: translateY(-34%) rotate(225deg); }
.faq-list details p { max-width: 690px; margin: -4px 0 21px; color: var(--muted); font-size: 14px; line-height: 1.85; }
.faq-list details p a { color: var(--brand); overflow-wrap: anywhere; }

.site-footer { padding: 36px 20px 42px; border-top: 1px solid var(--line); color: #718c83; text-align: center; }
.site-footer > p { margin-bottom: 14px; color: #49766a; font-size: 14px; font-weight: 700; }
.footer-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 18px; font-size: 12px; }
.footer-links a { color: inherit; text-decoration: none; }
.police-record { display: inline-flex; align-items: center; gap: 4px; }
.police-record img { width: 15px; height: 15px; }

@media (max-width: 820px) {
  .hero { min-height: auto; }
  .hero-grid { min-height: 0; grid-template-columns: 1fr; gap: 0; }
  .hero-copy { max-width: 585px; padding: 30px 0 15px; }
  .hero-product { min-height: 400px; margin-top: -18px; }
  .hero-product > img { right: 50%; width: min(510px,110%); max-height: 495px; transform: translateX(50%); }
  .product-glow { top: 14%; right: 50%; width: 70%; transform: translateX(50%); }
  .orbit-one { right: 50%; transform: translateX(50%) rotate(-21deg); }
  .orbit-two { right: 50%; transform: translateX(50%) rotate(-21deg); }
  .chip-heart { left: max(1%,calc(50% - 235px)); }
  .chip-family { right: max(1%,calc(50% - 235px)); bottom: 13%; }
  .trust-strip { grid-template-columns: 1fr; width: min(640px,calc(100% - 40px)); margin-top: -18px; }
  .trust-strip > div { padding: 14px 18px; }
  .device-grid { grid-template-columns: repeat(2,1fr); }
  .about-brand { grid-template-columns: 1fr; gap: 26px; }
  .brand-search-terms { justify-content: flex-start; }
  .download-panel { grid-template-columns: 1fr; gap: 38px; padding: 48px; }
}

@media (max-width: 520px) {
  .hero-content, .section, .trust-strip { width: min(100% - 32px,1120px); }
  .topbar { padding: 18px 0; }
  .topbar-note { font-size: 11px; }
  .hero-copy { padding-top: 31px; }
  h1 { margin: 15px 0 16px; font-size: clamp(42px,12vw,56px); }
  .hero-description { font-size: 15px; line-height: 1.75; }
  .hero-points { gap: 7px; margin-bottom: 23px; }
  .hero-points li { padding: 7px 10px; font-size: 12px; }
  .hero-product { min-height: 345px; }
  .hero-product > img { width: min(450px,122%); max-height: 420px; }
  .orbit-one { width: 330px; height: 155px; }
  .orbit-two { width: 400px; height: 185px; }
  .floating-chip { padding: 8px 10px; font-size: 11px; }
  .chip-heart { top: 22%; left: 0; }
  .chip-family { right: 0; bottom: 11%; }
  .trust-strip { margin-top: -10px; border-radius: 18px; }
  .section { padding-top: 70px; }
  .device-grid { gap: 10px; }
  .device-card { min-height: 224px; border-radius: 16px; }
  .device-image { height: 158px; }
  .device-card > div:last-child { padding: 2px 13px 14px; }
  .device-card span { font-size: 10px; }
  .device-card h3 { font-size: 18px; }
  .about-brand { padding: 34px 23px; border-radius: 22px; }
  .about-brand-copy > p:last-child { font-size: 14px; }
  .brand-search-terms { gap: 8px; }
  .brand-search-terms span { padding: 8px 10px; font-size: 11px; }
  .download-panel { width: min(100% - 32px,1120px); margin-top: 70px; padding: 38px 22px; border-radius: 24px; }
  .qr-frame { width: 224px; height: 224px; }
  .qr-frame img { width: 204px; height: 204px; }
  .install-guide { padding-bottom: 64px; }
  .install-guide ol { grid-template-columns: 1fr; gap: 0; }
  .faq-section { padding-top: 66px; padding-bottom: 70px; }
  .faq-list summary { padding: 18px 32px 18px 0; font-size: 15px; }
  .faq-list details p { margin-bottom: 18px; font-size: 13px; }
  .site-footer { padding-right: 24px; padding-left: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .download-button, .secondary-download { transition: none; }
}