/* Public site tokens aligned with the current TrackMe app (Material 3 + web UI). */
:root {
  --brand: #2563eb;
  --brand-dark: #1d4ed8;
  --brand-field: #1e293b;
  --brand-50: #eff6ff;
  --brand-100: #dbeafe;
  --ink-900: #0f172a;
  --ink-700: #475569;
  --ink-500: #64748b;
  --ink-400: #94a3b8;
  --ink-200: #e2e8f0;
  --ink-100: #f1f5f9;
  --ink-50: #f8fafc;
  --font-heading: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  background: #f8fafc;
  color: #0f172a;
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3 {
  color: #0f172a;
  font-family: var(--font-heading);
  font-weight: 650;
  letter-spacing: -0.035em;
  line-height: 1.15;
}
h1 { font-size: clamp(2.1rem, 4.6vw, 3.5rem); }
h2 { font-size: clamp(1.65rem, 3vw, 2.25rem); }
h3 { letter-spacing: -0.02em; }
p, li { line-height: 1.7; }
a { color: #1d4ed8; text-underline-offset: 3px; }
a:hover { color: #1e40af; }

.wrap { max-width: 1160px; }
main.wrap { max-width: 850px; }
header {
  background: rgba(248, 250, 252, 0.9);
  border-bottom-color: #e2e8f0;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.025);
}
.nav { min-height: 72px; }
.brand-name, .foot-brand span { font-family: var(--font-heading); letter-spacing: -0.03em; text-transform: none; }
.brand-name { font-size: 21px; font-weight: 700; }
.nav-links { gap: 24px; }
.nav-links a, .foot-links a { color: #475569; font-weight: 500; text-decoration: none; transition: color .16s ease; }
.nav-links a:hover, .foot-links a:hover { color: #1d4ed8; }

.btn, a.btn {
  align-items: center;
  border-radius: 999px;
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 650;
  letter-spacing: 0;
  min-height: 42px;
  padding: 10px 20px;
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.btn-primary, a.btn-primary, a.btn {
  background: #2563eb;
  border-color: #2563eb;
  color: #fff;
}
.btn-primary:hover, a.btn-primary:hover, a.btn:hover {
  background: #1d4ed8;
  border-color: #1d4ed8;
  box-shadow: 0 5px 14px rgba(37, 99, 235, .2);
  color: #fff;
  transform: translateY(-1px);
}
.btn-outline, a.btn-outline {
  background: #fff;
  border-color: #cbd5e1;
  color: #1e293b;
}
.btn-outline:hover, a.btn-outline:hover { background: #eff6ff; border-color: #93c5fd; color: #1d4ed8; }
.btn-ghost { color: #1d4ed8; }
.btn-lg { min-height: 48px; padding: 13px 24px; }

.eyebrow, .kicker {
  color: #1d4ed8;
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .11em;
}
.eyebrow { background: #eff6ff; border: 1px solid #dbeafe; border-radius: 999px; }
.hero { padding-top: 52px; }
.hero-copy h1 { max-width: 700px; line-height: 1.08; }
.hero-copy .lead { font-size: 17px; line-height: 1.7; }
.hero-copy .lead-def { color: #0f172a; }
.hero .accent { color: #2563eb; }
.hero-note, .section-sub, .lead, .audience-text { color: #475569; }
.app-preview {
  background: linear-gradient(145deg, #eff6ff 0%, #f8fafc 72%);
  border: 1px solid #dbeafe;
  border-radius: 24px;
  box-shadow: 0 20px 55px -36px rgba(30, 64, 175, .38);
}
.app-preview-note { border-radius: 999px; box-shadow: 0 4px 14px rgba(15, 23, 42, .08); }
.product-preview-head { margin-top: 72px; }

section { padding: 76px 0; }
.section-head { margin-bottom: 36px; }
.features { background: #f1f5f9; border-color: #e2e8f0; }
.feature-grid { gap: 16px; }
.feature-card, .pricing-card, .faq-item, details, .callout, .step {
  border-radius: 16px;
}
.feature-card, .pricing-card, details, .callout {
  background: #fff;
  border-color: #e2e8f0;
  box-shadow: 0 2px 8px rgba(15, 23, 42, .035);
}
.feature-card { padding: 24px; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.feature-card:hover { border-color: #bfdbfe; box-shadow: 0 12px 28px rgba(15, 23, 42, .07); transform: translateY(-2px); }
.feature-icon { background: #eff6ff; border-radius: 12px; color: #2563eb; }
.feature-card h3, .pricing-card h3, .step h3 { color: #0f172a; font-family: var(--font-heading); font-size: 17px; font-weight: 650; }
.feature-card p, .step p, .faq-item p { color: #475569; }
.card-link { color: #1d4ed8; text-decoration: none; }
.card-link:hover { text-decoration: underline; }

.blueprint { border-color: #e2e8f0; border-radius: 18px; }
.blueprint > .corner { display: none; }
.shot-carousel { overflow: hidden; background: #fff; box-shadow: 0 18px 45px -32px rgba(15, 23, 42, .32); }
.shot-frame { background: #fff; border-color: #e2e8f0; border-radius: 18px 18px 0 0; }
.shot-caption { background: #fff; color: #475569; }
.shot-dots { background: #fff; }
.shot-nav { border-color: #dbeafe; border-radius: 999px; box-shadow: 0 2px 10px rgba(15, 23, 42, .1); color: #1d4ed8; }
.shot-nav:hover { background: #eff6ff; border-color: #93c5fd; }
.shot-dot { background: #cbd5e1; }
.shot-dot.active { background: #2563eb; }

.pricing { background: #f1f5f9; border-color: #e2e8f0; }
.pricing-card { padding: 30px; }
.pricing-card.featured { border-color: #93c5fd; box-shadow: 0 8px 28px rgba(37, 99, 235, .08); }
.pricing-card .price { color: #0f172a; font-family: var(--font-heading); }
.pricing-card .price small, .pricing-card .plan-note { color: #64748b; }
.pricing-card li { color: #475569; }
.pricing-card li::before { color: #2563eb; }
.step .num { background: #2563eb; border-radius: 12px; font-family: var(--font-heading); }

.faq-list { gap: 12px; }
details { transition: border-color .16s ease, box-shadow .16s ease; }
details[open] { border-color: #bfdbfe; box-shadow: 0 6px 18px rgba(15, 23, 42, .045); }
summary { font-family: var(--font-heading); font-size: 16px; font-weight: 600; }
summary .plus::before, summary .plus::after { background: #2563eb; }
.faq-answer { color: #475569; }
.contact-note { border-radius: 14px; background: #eff6ff; padding: 16px 18px; }

.related { border-color: #e2e8f0; }
.related-links a { color: #1d4ed8; text-decoration: none; }
.related-links a:hover { text-decoration: underline; }
.callout { background: #eff6ff; border-color: #dbeafe; }
.updated { color: #64748b; }
.cta-band {
  border: 1px solid #1e3a8a;
  border-radius: 24px;
  background: linear-gradient(135deg, #1e3a8a, #1e293b 78%);
  background-image: radial-gradient(circle at 12% 16%, rgba(96, 165, 250, .34), transparent 42%), linear-gradient(135deg, #1e3a8a, #1e293b 78%);
}
.cta-band p { color: #dbeafe; }
footer { background: #fff; border-top-color: #e2e8f0; }
.foot-row { max-width: 1160px; }
.foot-brand span { color: #0f172a; }
.foot-links { flex-wrap: wrap; gap: 12px 20px; }
.foot-copy { color: #64748b; }
body > main.wrap {
  border: 1px solid #e2e8f0;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 20px 55px -36px rgba(15, 23, 42, .25);
  padding: 48px;
}

@media (max-width: 820px) {
  .wrap { padding-left: 20px; padding-right: 20px; }
  section { padding: 60px 0; }
  .hero { padding-top: 36px; }
}
@media (max-width: 600px) {
  .nav { min-height: 64px; padding-left: 18px; padding-right: 18px; }
  .brand-mark { width: 28px; height: 28px; }
  .brand-name { font-size: 19px; }
  main.wrap { padding-top: 36px; padding-bottom: 56px; }
  body > main.wrap { padding: 32px 24px; }
  .hero-copy .lead { font-size: 15.5px; }
  .app-preview { min-height: 350px; }
  .product-preview-head { margin-top: 44px; }
  .shot-frame { aspect-ratio: 4 / 3; }
  .shot-nav { width: 34px; height: 34px; }
  .shot-nav.prev { left: 8px; }
  .shot-nav.next { right: 8px; }
  .foot-row { align-items: flex-start; }
  .foot-links { gap: 10px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Editorial operations aesthetic: confident, spacious, and tailored to TrackMe. */
body { background: #f5f7fb; }
.wrap { width: 100%; max-width: 1440px; margin-inline: auto; padding-inline: clamp(20px, 4vw, 72px); }
header { position: sticky; top: 0; z-index: 20; background: rgba(255,255,255,.94); backdrop-filter: blur(18px); }
.nav { max-width: 1440px; min-height: 78px; }
.brand-mark { box-shadow: 0 5px 14px rgba(37,99,235,.24); }
.nav-links a { font-size: 14px; }
.nav-cta .btn { min-height: 44px; padding-inline: 23px; }
.btn, a.btn { border-radius: 12px; min-height: 48px; padding: 12px 22px; box-shadow: none; }
.btn-primary, a.btn-primary, a.btn { box-shadow: 0 8px 18px rgba(37,99,235,.22); }
.btn-primary:hover, a.btn-primary:hover, a.btn:hover { box-shadow: 0 12px 24px rgba(37,99,235,.3); transform: translateY(-2px); }
.hero .btn-outline, .hero a.btn-outline { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.35); color: #fff; }
.hero .btn-outline:hover, .hero a.btn-outline:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.65); color: #fff; }

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(68px, 8vw, 112px) 0 84px;
  color: #fff;
  background: #09172d;
}
.hero::before, .hero::after { content: ""; position: absolute; z-index: -1; pointer-events: none; }
.hero::before {
  inset: 0;
  background: radial-gradient(ellipse at 77% 28%, rgba(37,99,235,.62), transparent 34%), radial-gradient(ellipse at 9% 100%, rgba(14,165,233,.2), transparent 34%), linear-gradient(115deg,#081426 0%,#0d1f3b 50%,#112d5e 100%);
}
.hero::after { width: 520px; height: 520px; border: 1px solid rgba(191,219,254,.1); border-radius: 50%; right: -190px; top: -210px; box-shadow: 0 0 0 42px rgba(191,219,254,.025), 0 0 0 88px rgba(191,219,254,.02); }
.hero .wrap { max-width: 1440px; }
.hero-layout { grid-template-columns: minmax(0,1.1fr) minmax(340px,.9fr); gap: clamp(42px,7vw,96px); }
.hero-copy { max-width: 670px; }
.eyebrow { display: inline-flex; padding: 9px 14px; color: #bfdbfe; background: rgba(96,165,250,.12); border-color: rgba(147,197,253,.24); letter-spacing: .045em; font-size: 12px; }
.hero-copy h1 { margin: 25px 0 22px; max-width: 680px; color: #fff; font-size: clamp(3rem,5.5vw,5.25rem); letter-spacing: -.065em; line-height: 1.01; }
.hero .accent { color: #77b7ff; }
.hero-copy .lead, .hero .hero-note { max-width: 590px; color: #c4d0e1; font-size: 17px; line-height: 1.75; }
.hero-copy .lead-def { color: #f1f5f9; font-size: 19px; line-height: 1.6; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 29px; }
.hero-ctas .btn { min-height: 54px; padding-inline: 25px; }
.hero .hero-note { margin-top: 21px; font-size: 13px; color: #9aacc4; }
.app-preview { width: min(100%,500px); min-height: 0; justify-self: center; overflow: visible; border: 1px solid rgba(191,219,254,.28); border-radius: 30px; background: linear-gradient(145deg,rgba(255,255,255,.16),rgba(255,255,255,.055)); box-shadow: 0 35px 100px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.18); transform: rotate(1.3deg); }
.app-preview img { max-height: 560px; object-fit: contain; filter: drop-shadow(0 28px 25px rgba(0,0,0,.3)); }
.app-preview-note { bottom: -18px; background: #fff; color: #17315a; border: 1px solid #dbeafe; font-size: 12px; font-weight: 650; }

.web-preview { padding: 88px 0 104px; background: #f5f7fb; }
.web-preview .wrap { max-width: 1440px; }
.product-preview-head { margin: 0 auto 34px; text-align: center; }
.product-preview-head .kicker { color: #2563eb; font-size: 11px; text-transform: uppercase; letter-spacing: .16em; }
.product-preview-head h2 { font-size: clamp(2rem,3.2vw,3rem); }
.product-preview-head .section-sub { max-width: 590px; margin: 12px auto 0; }
.shot-carousel { border: 1px solid #dbe2ec; border-radius: 22px; box-shadow: 0 32px 75px -45px rgba(15,35,68,.45); }
.shot-frame { aspect-ratio: 16/8.5; border: 0; border-bottom: 1px solid #e2e8f0; }
.shot-slide { object-fit: cover; }
.shot-caption { padding: 18px 22px 8px; color: #334155; font-size: 14px; }
.shot-dots { padding: 8px 22px 18px; }

section { padding-top: 100px; padding-bottom: 100px; }
.section-head { max-width: 720px; margin: 0 auto 46px; text-align: center; }
.section-head h2 { font-size: clamp(2rem,3.4vw,3.1rem); }
.section-head .section-sub { max-width: 590px; margin: 14px auto 0; }
.features { background: #fff; border: 0; }
.feature-grid { gap: 18px; }
.feature-card { min-height: 224px; padding: 30px; border: 1px solid #e4eaf2; border-radius: 18px; box-shadow: 0 5px 20px rgba(20,43,78,.035); }
.feature-card:hover { border-color: #9cc5ff; box-shadow: 0 20px 40px rgba(20,43,78,.1); transform: translateY(-4px); }
.feature-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: #eaf2ff; }
.feature-card h3 { margin-top: 22px; font-size: 18px; }
.feature-card p { font-size: 14px; line-height: 1.7; }
.steps { background: #f0f4fa; }
.step { padding: 28px; background: #fff; border: 1px solid #e0e7f0; border-radius: 18px; }
.step .num { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; }
.pricing { background: #edf2f8; border: 0; }
.pricing-card { border-radius: 20px; padding: 34px; }
.pricing-card.featured { border: 2px solid #3779ed; box-shadow: 0 22px 55px rgba(37,99,235,.13); }
.cta-band { max-width: 1296px; margin: 24px auto 100px; padding: clamp(34px,6vw,70px); border-radius: 26px; background: radial-gradient(ellipse at 90% 0%,rgba(59,130,246,.52),transparent 42%),linear-gradient(120deg,#0b1b34,#153c78); box-shadow: 0 25px 55px rgba(15,35,68,.18); }
.cta-band h2 { color: white; }
footer { background: #09172d; border: 0; }
.foot-row { max-width: 1440px; min-height: 110px; }
.foot-brand span { color: white; }
.foot-links a, .foot-copy { color: #9aacc4; }
.foot-links a:hover { color: #fff; }

body:has(> main.wrap) { background: #edf2f8; }
body > main.wrap { width: min(100% - 40px, 980px); margin: 52px auto 80px; padding: clamp(30px,6vw,68px); border: 1px solid #e1e8f1; border-radius: 22px; box-shadow: 0 24px 70px rgba(20,43,78,.08); }
body > main.wrap h1 { margin-bottom: 18px; font-size: clamp(2.3rem,4.8vw,3.6rem); }
body > main.wrap h2 { margin-top: 2.2em; padding-bottom: 10px; border-bottom: 1px solid #e8edf4; font-size: 1.65rem; }
body > main.wrap p, body > main.wrap li { color: #475569; }
body > main.wrap a { font-weight: 550; }

@media (max-width: 820px) {
  .hero { padding: 68px 0 78px; }
  .hero-layout { grid-template-columns: 1fr; gap: 42px; }
  .hero-copy { max-width: 680px; margin: 0 auto; text-align: center; }
  .hero-copy h1, .hero-copy .lead, .hero .hero-note { margin-left: auto; margin-right: auto; }
  .hero-ctas { justify-content: center; }
  .app-preview { width: min(82%,390px); }
  .app-preview img { max-height: 490px; }
  .web-preview, section { padding-top: 72px; padding-bottom: 72px; }
  .cta-band { margin: 18px 20px 72px; }
}
@media (max-width: 600px) {
  .nav { min-height: 66px; }
  .hero { padding: 54px 0 66px; }
  .hero-copy h1 { font-size: clamp(2.55rem,12vw,3.65rem); }
  .hero-copy .lead-def { font-size: 17px; }
  .hero-copy .lead { font-size: 15px; }
  .hero-ctas { display: grid; grid-template-columns: 1fr; }
  .hero-ctas .btn { width: 100%; }
  .app-preview { width: 88%; border-radius: 23px; }
  .app-preview img { max-height: 400px; }
  .web-preview, section { padding-top: 60px; padding-bottom: 60px; }
  .product-preview-head h2, .section-head h2 { font-size: 1.9rem; }
  .shot-frame { aspect-ratio: 4/3; }
  .feature-card { min-height: 0; padding: 24px; }
  body > main.wrap { width: calc(100% - 28px); margin: 24px 14px 48px; padding: 30px 23px; border-radius: 17px; }
  .cta-band { margin-inline: 14px; border-radius: 20px; }
}

/* Device intelligence showcase. Values in the visual are clearly marked as example data. */
.telemetry-spotlight {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(145deg, #eaf2ff 0%, #f7faff 48%, #edf5ff 100%);
  border-block: 1px solid #dce9fa;
}
.telemetry-spotlight::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 690px;
  height: 690px;
  right: -190px;
  top: -220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(94, 153, 249, .27), rgba(94, 153, 249, 0) 65%);
  transform: translate3d(0, var(--telemetry-parallax, 0px), 0);
  pointer-events: none;
}
.telemetry-layout { display: grid; grid-template-columns: minmax(0, .96fr) minmax(0, 1.04fr); gap: clamp(42px, 6vw, 92px); align-items: center; }
.telemetry-copy { max-width: 600px; }
.telemetry-copy .kicker { margin-bottom: 18px; color: #1d5fd0; }
.telemetry-copy h2 { max-width: 580px; margin-bottom: 20px; font-size: clamp(2.5rem, 4.2vw, 4rem); line-height: 1.06; letter-spacing: -.055em; }
.telemetry-intro { max-width: 570px; margin: 0; color: #425570; font-size: 17px; line-height: 1.75; }
.telemetry-points { display: grid; gap: 24px; margin-top: 36px; }
.telemetry-point { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 16px; align-items: start; }
.telemetry-point-icon { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid #c5dbfc; border-radius: 12px; background: #fff; color: #2563eb; font-size: 12px; font-weight: 750; box-shadow: 0 4px 12px rgba(37, 99, 235, .07); }
.telemetry-point h3 { margin: 0 0 5px; font-size: 16px; letter-spacing: -.025em; }
.telemetry-point p { max-width: 500px; margin: 0; color: #536780; font-size: 14px; line-height: 1.65; }
.telemetry-link { display: inline-flex; align-items: center; gap: 12px; margin-top: 34px; color: #1556be; font-size: 14px; font-weight: 700; text-decoration: none; }
.telemetry-link span { display: inline-block; transition: transform .2s ease; }
.telemetry-link:hover span { transform: translateX(5px); }

.telemetry-window { min-width: 0; margin: 0; overflow: hidden; border: 1px solid #cad9eb; border-radius: 22px; background: #fff; box-shadow: 0 36px 80px -42px rgba(28, 64, 122, .4), 0 4px 14px rgba(28, 64, 122, .06); }
.telemetry-window-bar { display: flex; align-items: center; gap: 14px; min-height: 54px; padding: 0 20px; border-bottom: 1px solid #e6ebf2; background: #f7f9fc; color: #475569; font-size: 12px; font-weight: 700; }
.telemetry-window-dots { display: flex; gap: 5px; }
.telemetry-window-dots i { display: block; width: 7px; height: 7px; border-radius: 50%; background: #c9d5e5; }
.telemetry-window-dots i:first-child { background: #6fa7f8; }
.telemetry-example { margin-left: auto; padding: 5px 9px; border-radius: 999px; background: #e7effd; color: #42649a; font-size: 10px; font-weight: 700; white-space: nowrap; }
.telemetry-window-body { padding: clamp(20px, 3vw, 34px); }
.telemetry-device-row { display: flex; align-items: center; gap: 14px; }
.telemetry-device-icon { display: grid; flex: none; place-items: center; width: 54px; height: 54px; border-radius: 14px; background: #e8f0ff; color: #2563eb; }
.telemetry-device-name { display: grid; gap: 4px; min-width: 0; }
.telemetry-device-name strong { overflow: hidden; color: #13233c; font-size: 16px; letter-spacing: -.02em; text-overflow: ellipsis; white-space: nowrap; }
.telemetry-device-name span { color: #748299; font-size: 12px; }
.telemetry-reporting { display: inline-flex; flex: none; align-items: center; gap: 6px; margin-left: auto; padding: 7px 10px; border-radius: 999px; background: #eaf8ef; color: #1d8047; font-size: 11px; font-weight: 700; }
.telemetry-reporting i, .telemetry-foot-pulse { display: block; width: 7px; height: 7px; border-radius: 50%; background: #32b66b; box-shadow: 0 0 0 4px rgba(50, 182, 107, .12); }
.telemetry-rule { height: 1px; margin: 27px 0; background: #e8edf4; }
.telemetry-spec-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.telemetry-spec-grid > div { display: grid; gap: 9px; min-height: 83px; padding: 15px 17px; border: 1px solid #e9eef6; border-radius: 12px; background: #fbfcfe; }
.telemetry-spec-grid span { color: #728198; font-size: 11px; font-weight: 650; text-transform: uppercase; letter-spacing: .08em; }
.telemetry-spec-grid strong { overflow: hidden; color: #183050; font-size: 14px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.telemetry-window-foot { display: flex; align-items: center; gap: 10px; margin-top: 22px; color: #6f7f94; font-size: 11px; line-height: 1.4; }
.telemetry-foot-pulse { flex: none; width: 6px; height: 6px; background: #3b82f6; box-shadow: 0 0 0 4px #e8f1ff; }

/* Content stays visible without JavaScript. Motion is enabled only after setup. */
html.motion-ready .reveal-item { opacity: 0; transform: translate3d(0, 24px, 0); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); transition-delay: var(--reveal-delay, 0ms); }
html.motion-ready .reveal-item.is-visible { opacity: 1; transform: translate3d(0, 0, 0); }
.hero-copy { animation: hero-enter .8s cubic-bezier(.2,.8,.2,1) both; }
.app-preview { animation: preview-enter .9s .15s cubic-bezier(.2,.8,.2,1) both; }
.hero::after { transform: translate3d(0, var(--hero-parallax, 0px), 0); }
@keyframes hero-enter { from { opacity: 0; transform: translate3d(0, 24px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes preview-enter { from { opacity: 0; transform: translate3d(0, 28px, 0) rotate(1.3deg); } to { opacity: 1; transform: translate3d(0, 0, 0) rotate(1.3deg); } }

@media (max-width: 1000px) {
  .telemetry-layout { grid-template-columns: 1fr; gap: 44px; }
  .telemetry-copy { max-width: 760px; }
  .telemetry-window { width: min(100%, 760px); }
}
@media (max-width: 600px) {
  .telemetry-copy h2 { font-size: clamp(2.25rem, 9vw, 3rem); }
  .telemetry-intro { font-size: 15px; }
  .telemetry-points { gap: 20px; }
  .telemetry-device-row { flex-wrap: wrap; }
  .telemetry-reporting { margin-left: 0; }
  .telemetry-spec-grid { gap: 8px; }
  .telemetry-spec-grid > div { min-height: 76px; padding: 12px; }
  .telemetry-spec-grid strong { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-copy, .app-preview { animation: none; }
  html.motion-ready .reveal-item { opacity: 1; transform: none; transition: none; }
  .hero::after, .telemetry-spotlight::before { transform: none; }
  .telemetry-link span { transition: none; }
}

/* Scroll story: the rail stays beside the asset journey as each scene advances. */
.asset-roadmap { background: radial-gradient(ellipse at 90% 4%, #163b72 0%, transparent 38%), #081a32; color: #d5e2f3; }
.asset-roadmap .wrap { max-width: 1440px; }
.roadmap-intro { max-width: 830px; margin-bottom: 66px; }
.roadmap-intro .kicker { color: #8fc2ff; }
.roadmap-intro h2 { max-width: 790px; margin: 10px 0 18px; color: #fff; font-size: clamp(2.6rem, 4.9vw, 4.8rem); line-height: 1.04; letter-spacing: -.06em; }
.roadmap-intro p { max-width: 700px; margin: 0; color: #b2c7df; font-size: 17px; line-height: 1.7; }
.roadmap-layout { display: grid; grid-template-columns: minmax(250px, .3fr) minmax(0, 1fr); align-items: start; gap: clamp(32px, 5vw, 76px); }
.roadmap-rail { position: sticky; top: 112px; align-self: start; min-width: 0; padding: 10px 0 18px; }
.roadmap-rail-title { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 25px; color: #fff; font-size: 13px; font-weight: 750; letter-spacing: .015em; }
.roadmap-rail-title span { color: #90bff7; font-variant-numeric: tabular-nums; font-size: 12px; letter-spacing: .08em; }
.roadmap-rail ol { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.roadmap-rail li { position: relative; z-index: 1; }
.roadmap-rail-track { position: absolute; top: 80px; bottom: 102px; left: 17px; width: 2px; background: #27415f; }
.roadmap-rail-track span { display: block; width: 100%; height: var(--roadmap-progress, 0%); background: #7db8ff; box-shadow: 0 0 12px rgba(114, 177, 255, .5); transition: height .25s linear; }
.roadmap-link { display: grid; grid-template-columns: 36px minmax(0,1fr); align-items: center; gap: 17px; min-height: 80px; color: #92a8c1; text-decoration: none; transition: color .25s ease; }
.roadmap-link:hover, .roadmap-link.is-active { color: #fff; }
.roadmap-number { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid #33516f; border-radius: 50%; background: #0b213d; color: #9cb5d0; font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums; transition: background .25s ease, border-color .25s ease, color .25s ease, box-shadow .25s ease; }
.roadmap-link.is-active .roadmap-number { border-color: #8fc2ff; background: #438cec; color: #fff; box-shadow: 0 0 0 5px rgba(98, 168, 255, .13); }
.roadmap-link strong, .roadmap-link small { display: block; }
.roadmap-link strong { font-size: 14px; line-height: 1.35; }
.roadmap-link small { margin-top: 3px; color: #7e95b0; font-size: 12px; line-height: 1.3; }
.roadmap-link.is-active small { color: #a9c5e5; }
.roadmap-rail-note { max-width: 250px; margin: 27px 0 0 53px; color: #7692b1; font-size: 12px; line-height: 1.6; }
.roadmap-scenes { display: grid; gap: 26px; min-width: 0; }
.roadmap-scene { display: grid; grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr); align-items: center; gap: clamp(22px, 4vw, 58px); min-height: 500px; padding: clamp(26px, 3.5vw, 54px); border: 1px solid #24466f; border-radius: 26px; background: linear-gradient(145deg, #102e54, #0d2443 72%); box-shadow: 0 24px 45px rgba(0, 0, 0, .12); scroll-margin-top: 115px; transition: border-color .3s ease, box-shadow .3s ease; }
.roadmap-scene.is-active { border-color: #5d99e4; box-shadow: 0 26px 58px rgba(0, 0, 0, .2), inset 0 1px 0 rgba(171, 208, 255, .09); }
.roadmap-ready .roadmap-scene .roadmap-art { opacity: .8; transform: translate3d(0, 8px, 0) scale(.985); transition: opacity .45s ease, transform .55s cubic-bezier(.2,.8,.2,1); }
.roadmap-ready .roadmap-scene.is-active .roadmap-art { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
.roadmap-overline { color: #89bdff; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.roadmap-scene h3 { margin: 18px 0 16px; color: #fff; font-size: clamp(1.9rem, 2.7vw, 2.8rem); line-height: 1.1; letter-spacing: -.045em; }
.roadmap-scene-copy p { max-width: 410px; margin: 0; color: #b5c9e1; font-size: 15px; line-height: 1.75; }
.roadmap-scene-outcome { display: inline-flex; align-items: center; gap: 9px; margin-top: 28px; color: #9dd4b8; font-size: 12px; font-weight: 700; }
.roadmap-scene-outcome i { display: block; width: 7px; height: 7px; border-radius: 50%; background: #66dc9c; box-shadow: 0 0 0 4px rgba(102, 220, 156, .13); }
.roadmap-art { min-width: 0; overflow: hidden; border: 1px solid #d4e0ee; border-radius: 18px; background: #fff; box-shadow: 0 24px 45px rgba(0, 9, 26, .18); color: #183050; }
.roadmap-art-top { display: flex; align-items: center; gap: 9px; min-height: 45px; padding: 0 17px; border-bottom: 1px solid #e5ebf3; background: #f7f9fc; color: #526783; font-size: 11px; font-weight: 700; }
.roadmap-art-dot { width: 7px; height: 7px; border-radius: 50%; background: #6ca6f1; }
.roadmap-art-example { margin-left: auto; color: #8b9bb0; font-size: 10px; font-weight: 600; }
.roadmap-form-title { display: flex; align-items: center; gap: 13px; padding: 24px 23px 21px; }
.roadmap-form-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 11px; background: #e8f0ff; color: #2b70d6; font-size: 27px; line-height: 1; }
.roadmap-form-title strong, .roadmap-form-title small { display: block; }
.roadmap-form-title strong { color: #172d4b; font-size: 15px; }
.roadmap-form-title small { margin-top: 4px; color: #7889a0; font-size: 11px; }
.roadmap-form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; padding: 0 23px 22px; }
.roadmap-form-grid div { min-width: 0; padding: 12px; border: 1px solid #e9eef5; border-radius: 9px; background: #fafcff; }
.roadmap-form-grid small, .roadmap-form-grid strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.roadmap-form-grid small { margin-bottom: 5px; color: #8696a9; font-size: 10px; }
.roadmap-form-grid strong { color: #25405f; font-size: 12px; }
.roadmap-form-footer { display: flex; align-items: center; gap: 9px; padding: 13px 23px; border-top: 1px solid #e9eef5; background: #f7fbf9; color: #3b8062; font-size: 11px; font-weight: 700; }
.roadmap-check { display: grid; place-items: center; width: 19px; height: 19px; border-radius: 50%; background: #dbf5e6; color: #218b57; font-size: 12px; font-weight: 800; }
.roadmap-label-sheet { display: grid; place-items: center; min-height: 300px; padding: 30px 15px 23px; background: radial-gradient(#dce6f2 1px,transparent 1px) 0 0 / 18px 18px, #f7faff; }
.roadmap-label { display: flex; align-items: center; gap: 19px; width: min(100%,330px); padding: 19px; border: 1px solid #cdd8e7; border-radius: 8px; background: white; box-shadow: 0 16px 30px rgba(24, 54, 93, .16); transform: rotate(-3deg); }
.roadmap-qr { flex: none; width: 100px; height: 100px; }
.roadmap-qr svg { width: 100%; height: 100%; }
.roadmap-label-copy { min-width: 0; }
.roadmap-label-copy span, .roadmap-label-copy strong, .roadmap-label-copy small { display: block; }
.roadmap-label-copy span { color: #597494; font-size: 9px; font-weight: 800; letter-spacing: .08em; }
.roadmap-label-copy strong { margin: 10px 0 4px; color: #142a4c; font-size: 25px; letter-spacing: -.045em; }
.roadmap-label-copy small { color: #69809a; font-size: 11px; }
.roadmap-label-caption { margin-top: 24px; color: #7c8fa7; font-size: 10px; text-align: center; }
.roadmap-print-footer { display: flex; align-items: center; gap: 9px; padding: 13px 18px; border-top: 1px solid #e5ebf3; color: #668099; font-size: 11px; }
.roadmap-print-button { margin-left: auto; padding: 8px 10px; border-radius: 7px; background: #2d72dd; color: white; font-weight: 700; }
.roadmap-art-scan { background: #eaf1fa; }
.roadmap-art-scan .roadmap-art-top { background: #f7f9fc; }
.roadmap-phone { position: relative; width: min(230px, 76%); margin: 24px auto -48px; padding: 18px 12px 75px; border: 7px solid #182941; border-radius: 31px; background: #101f33; box-shadow: 0 20px 35px rgba(13, 39, 76, .25); color: white; }
.roadmap-phone-notch { width: 52px; height: 6px; margin: -8px auto 24px; border-radius: 99px; background: #30455f; }
.roadmap-phone-heading { margin: 0 5px 15px; font-size: 12px; font-weight: 700; }
.roadmap-phone-view { position: relative; display: grid; place-items: center; height: 180px; overflow: hidden; border-radius: 12px; background: linear-gradient(135deg, #274c70, #0d2b48); }
.roadmap-phone-code { color: rgba(255,255,255,.55); font-size: 86px; line-height: 1; }
.roadmap-scan-corner { position: absolute; z-index: 1; width: 22px; height: 22px; border: solid #8fc7ff; }
.roadmap-scan-corner.tl { top: 20px; left: 20px; border-width: 3px 0 0 3px; }
.roadmap-scan-corner.tr { top: 20px; right: 20px; border-width: 3px 3px 0 0; }
.roadmap-scan-corner.bl { bottom: 20px; left: 20px; border-width: 0 0 3px 3px; }
.roadmap-scan-corner.br { bottom: 20px; right: 20px; border-width: 0 3px 3px 0; }
.roadmap-scan-line { position: absolute; z-index: 2; left: 22px; right: 22px; top: 28px; height: 2px; background: #80d8ff; box-shadow: 0 0 15px #80d8ff; animation: scan-pass 3s ease-in-out infinite alternate; }
@keyframes scan-pass { to { transform: translateY(122px); } }
.roadmap-phone-result { position: absolute; right: -35px; bottom: 30px; left: -35px; display: flex; align-items: center; gap: 8px; padding: 11px; border: 1px solid #dceee4; border-radius: 10px; background: white; box-shadow: 0 10px 24px rgba(10, 29, 53, .22); color: #173752; }
.roadmap-phone-result strong, .roadmap-phone-result small { display: block; }
.roadmap-phone-result strong { font-size: 10px; }
.roadmap-phone-result small { margin-top: 3px; color: #7891a5; font-size: 9px; }

@media (max-width: 1120px) {
  .roadmap-layout { grid-template-columns: 230px minmax(0,1fr); gap: 28px; }
  .roadmap-scene { grid-template-columns: 1fr; gap: 26px; min-height: 0; }
  .roadmap-scene-copy p { max-width: 650px; }
}
@media (max-width: 760px) {
  .roadmap-intro { margin-bottom: 28px; }
  .roadmap-intro h2 { font-size: clamp(2.35rem, 8vw, 3.6rem); }
  .roadmap-layout { display: block; }
  .roadmap-rail { z-index: 5; top: 78px; margin: 0 -20px 22px; padding: 12px 20px; border-block: 1px solid #294664; background: rgba(8, 26, 50, .97); backdrop-filter: blur(14px); }
  .roadmap-rail-title { margin-bottom: 9px; font-size: 11px; }
  .roadmap-rail ol { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
  .roadmap-link { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-height: 0; }
  .roadmap-number { width: 25px; height: 25px; font-size: 9px; }
  .roadmap-link strong { font-size: 10px; }
  .roadmap-link small, .roadmap-rail-note, .roadmap-rail-track { display: none; }
  .roadmap-scenes { gap: 18px; }
  .roadmap-scene { scroll-margin-top: 190px; padding: 25px; border-radius: 18px; }
}
@media (max-width: 420px) {
  .roadmap-scene { padding: 20px; }
  .roadmap-scene h3 { font-size: 1.9rem; }
  .roadmap-form-grid { padding-inline: 14px; }
  .roadmap-form-title { padding-inline: 14px; }
  .roadmap-label { gap: 10px; padding: 12px; }
  .roadmap-qr { width: 76px; height: 76px; }
  .roadmap-label-copy strong { font-size: 19px; }
}
@media (max-width: 600px) {
  .roadmap-rail { top: 66px; }
}
@media (prefers-reduced-motion: reduce) {
  .roadmap-rail-track span, .roadmap-link, .roadmap-number, .roadmap-scene { transition: none; }
  .roadmap-ready .roadmap-scene .roadmap-art { opacity: 1; transform: none; transition: none; }
  .roadmap-scan-line { animation: none; top: 50%; }
}