:root {
    color-scheme: dark;
    --bg: #05070a;
    --panel: #0a1018;
    --panel-2: #0d1520;
    --text: #e7ffff;
    --muted: #9ab0bf;
    --line: #20303e;
    --orange: #ff9c33;
    --pink: #ec87b8;
    --purple: #a59cff;
    --blue: #4aafe5;
    --cyan: #8ce8f1;
    --red: #cf6d76;
    --yellow: #f4ef55;
    --max: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    min-width: 320px;
    margin: 0;
    background:
        radial-gradient(circle at 76% 7%, rgba(74, 175, 229, 0.11), transparent 27rem),
        radial-gradient(circle at 15% 30%, rgba(165, 156, 255, 0.07), transparent 24rem),
        var(--bg);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

body::before {
    position: fixed;
    inset: 0;
    z-index: -1;
    background-image: linear-gradient(rgba(140, 232, 241, 0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(140, 232, 241, 0.025) 1px, transparent 1px);
    background-size: 48px 48px;
    content: "";
    pointer-events: none;
}

a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--yellow); outline-offset: 4px; }
[hidden] { display: none !important; }
img { display: block; max-width: 100%; }
.skip-link { position: fixed; top: 10px; left: 10px; z-index: 100; padding: 10px 16px; border-radius: 999px; background: var(--yellow); color: #05070a; font-weight: 800; transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }

.topbar, main, .footer { width: min(calc(100% - 36px), var(--max)); margin-inline: auto; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 22px; }
.wordmark { display: flex; flex-direction: column; min-width: 0; text-decoration: none; }
.wordmark span { font-size: 1.2rem; font-weight: 950; letter-spacing: 0.17em; line-height: 1; }
.wordmark small { margin-top: 6px; color: var(--purple); font-size: 0.58rem; font-weight: 800; letter-spacing: 0.17em; text-transform: uppercase; }
.topnav { display: flex; align-items: center; gap: 22px; }
.topnav > a { color: var(--muted); font-size: 0.76rem; font-weight: 800; letter-spacing: 0.1em; text-decoration: none; text-transform: uppercase; }
.topnav > a:hover { color: var(--cyan); }
.language-switch { display: flex; align-items: center; gap: 6px; padding: 5px 9px; border: 1px solid var(--line); border-radius: 999px; color: #6f8492; }
.language-switch button, .language-switch a { text-decoration: none; border: 0; background: transparent; color: inherit; cursor: pointer; font: inherit; font-size: 0.7rem; font-weight: 900; }
.language-switch button[aria-pressed="true"], .language-switch a[aria-current="page"] { color: var(--yellow); }

.hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.72fr); gap: clamp(42px, 8vw, 104px); align-items: center; min-height: min(790px, calc(100vh - 88px)); padding: 64px 0 90px; }
.eyebrow, .section-index { color: var(--orange); font-size: 0.7rem; font-weight: 900; letter-spacing: 0.18em; text-transform: uppercase; }
.eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 28px; }
.status-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 15px var(--cyan); }
h1, h2, h3, p { margin-top: 0; }
.hero-brand { display: block; margin-bottom: 22px; }
h1 .hero-title { display: block; text-shadow: none; }
.sensor-intro { max-width: 860px; padding-bottom: 24px; color: #b5cbd8; font-size: 1.08rem; }
h1 { margin-bottom: 20px; font-size: clamp(3.7rem, 9.5vw, 8.4rem); font-weight: 950; letter-spacing: -0.065em; line-height: 0.82; text-shadow: 0 0 44px rgba(140, 232, 241, 0.1); }
.hero-title { max-width: 730px; margin-bottom: 20px; font-size: clamp(1.9rem, 4vw, 3.45rem); font-weight: 760; letter-spacing: -0.035em; line-height: 1.05; text-wrap: balance; }
.hero-lead { max-width: 610px; margin-bottom: 31px; color: #b5cbd8; font-size: clamp(1.05rem, 1.7vw, 1.28rem); }
.launch-offer { width: fit-content; max-width: 100%; margin: 0 0 28px; padding: 15px 20px 13px; border: 1px solid rgba(244, 239, 85, 0.5); border-left: 7px solid var(--yellow); border-radius: 5px 18px 5px 5px; background: linear-gradient(110deg, rgba(244, 239, 85, 0.12), rgba(255, 156, 51, 0.05)); box-shadow: 0 13px 35px rgba(0, 0, 0, 0.22); }
.launch-offer-label { display: block; margin-bottom: 5px; color: var(--yellow); font: 900 0.64rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.16em; text-transform: uppercase; }
.launch-offer-price { display: flex; align-items: baseline; gap: 16px; }
.launch-offer-price strong { color: #fff; font-size: clamp(1.8rem, 3.5vw, 2.6rem); line-height: 1.1; }
.launch-offer-price span { color: #c8d7df; font-size: 0.8rem; font-weight: 750; line-height: 1.5; }
.launch-offer-price s { color: #8ea1ad; }
.launch-offer small { display: block; margin-top: 5px; color: #718692; font-size: 0.65rem; }
.hero-actions { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.app-store-badge-link { display: inline-flex; padding: 12px; line-height: 0; transition: transform 180ms ease, filter 180ms ease; }
.app-store-badge-link:hover { transform: translateY(-2px); filter: drop-shadow(0 12px 22px rgba(140, 232, 241, 0.18)); }
.app-store-badge-link[aria-disabled="true"] { opacity: 0.82; cursor: default; }
.app-store-badge-link[aria-disabled="true"]:hover { transform: none; filter: none; }
.app-store-badge { width: auto; height: 48px; }
.video-link { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 10px 18px; border: 1px solid #ff4e58; border-radius: 13px; background: rgba(255, 33, 46, 0.1); color: #fff; font-size: 0.82rem; font-weight: 850; letter-spacing: 0.06em; text-decoration: none; text-transform: uppercase; transition: transform 180ms ease, background 180ms ease, box-shadow 180ms ease; }
.video-link:hover { transform: translateY(-2px); background: rgba(255, 33, 46, 0.2); color: #fff; box-shadow: 0 12px 34px rgba(255, 33, 46, 0.18); }
.play-mark { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 50%; background: #ff2130; color: #fff; font-size: 0.65rem; line-height: 1; }
.text-link { color: var(--cyan); font-size: 0.85rem; font-weight: 850; letter-spacing: 0.08em; text-underline-offset: 5px; text-transform: uppercase; }
.availability-note { margin: 10px 0 0; color: #758996; font-size: 0.72rem; }

.hero-instrument { position: relative; padding: 13px; border: 1px solid #2b3b49; border-radius: 34px 8px 34px 8px; background: linear-gradient(145deg, #101a25, #070b10); box-shadow: 0 28px 80px rgba(0,0,0,0.55), 0 0 55px rgba(74, 175, 229, 0.07); }
.instrument-label { display: flex; justify-content: space-between; padding: 4px 8px 12px; color: var(--cyan); font-size: 0.58rem; font-weight: 900; letter-spacing: 0.15em; }
.phone-shell { position: relative; max-height: 510px; overflow: hidden; border: 1px solid #3b5364; border-radius: 23px; background: #000; }
.phone-shell img { width: 100%; height: 100%; max-height: 510px; object-fit: cover; object-position: center 20%; }
.readout-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin-top: 8px; }
.readout-row span { padding: 8px; border-radius: 8px; background: #111d28; color: #708796; font: 700 0.52rem/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; }
.readout-row b { display: block; margin-top: 3px; color: var(--orange); font-size: 0.68rem; }

.signal-strip { display: flex; justify-content: space-between; gap: 10px; overflow: hidden; margin-bottom: 20px; padding: 13px 20px; border-block: 1px solid var(--line); color: #6f8797; font: 800 0.6rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.14em; white-space: nowrap; }
.section { padding-block: clamp(76px, 10vw, 132px); }
.section-heading { max-width: 760px; margin-bottom: 42px; }
.section-index { margin-bottom: 14px; }
h2 { margin-bottom: 18px; font-size: clamp(2rem, 5vw, 4.3rem); letter-spacing: -0.045em; line-height: 1.02; text-wrap: balance; }
.section-heading > p:last-child { color: var(--muted); font-size: 1.08rem; }

.screenshot-rail { display: grid; grid-auto-columns: minmax(280px, 32%); grid-auto-flow: column; gap: 22px; overflow-x: auto; padding: 10px 4px 28px; scroll-snap-type: x mandatory; scrollbar-color: var(--purple) var(--panel); }
.shot { position: relative; align-self: stretch; min-width: 0; margin: 0; padding: 10px; border: 1px solid #283c4c; border-radius: 28px 28px 10px 10px; background: #070a0e; scroll-snap-align: start; }
.shot-media { width: 100%; aspect-ratio: 1284 / 2778; overflow: hidden; border-radius: 19px; background: #000; }
.shot-media img { display: block; width: 100%; height: 100%; max-width: none; border-radius: inherit; object-fit: contain; }
.shot figcaption { padding: 22px 12px 15px; }
.shot-code { display: block; margin-bottom: 11px; color: var(--cyan); font: 900 0.62rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.14em; }
.shot figcaption strong { display: block; color: var(--text); font-size: 1.08rem; line-height: 1.25; }
.shot figcaption p { margin: 10px 0 0; color: var(--muted); font-size: 0.82rem; line-height: 1.6; }
.shot--featured { transform: translateY(-7px); }
.swipe-note { display: none; margin: 6px 0 0; color: var(--muted); font-size: 0.75rem; }

.capability-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.capability-card { --accent: var(--blue); min-height: 275px; padding: 25px; border: 1px solid var(--line); border-top: 7px solid var(--accent); border-radius: 6px 6px 24px 6px; background: linear-gradient(145deg, rgba(255,255,255,0.025), transparent), var(--panel); transition: transform 180ms ease, border-color 180ms ease; }
.capability-card:hover { transform: translateY(-4px); border-color: var(--accent); }
.accent-red { --accent: var(--red); } .accent-blue { --accent: var(--blue); } .accent-purple { --accent: var(--purple); } .accent-orange { --accent: var(--orange); } .accent-pink { --accent: var(--pink); } .accent-cyan { --accent: var(--cyan); }
.card-code { color: var(--accent); font: 900 0.64rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.15em; }
.capability-card h3 { margin: 30px 0 13px; font-size: 1.35rem; }
.capability-card p { margin-bottom: 0; color: var(--muted); font-size: 0.92rem; }
.technical-note { margin: 22px 0 0; color: #738895; font-size: 0.75rem; }

.sensor-section, .science-section { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(42px, 9vw, 110px); align-items: center; }
.sensor-diagram { position: relative; aspect-ratio: 1; max-width: 480px; border: 1px solid #263b49; border-radius: 50%; background: repeating-radial-gradient(circle, transparent 0 48px, rgba(74,175,229,0.12) 49px 50px), radial-gradient(circle, rgba(74,175,229,0.08), transparent 66%); }
.sensor-diagram::before, .sensor-diagram::after { position: absolute; inset: 50% 0 auto; height: 1px; background: #243947; content: ""; }
.sensor-diagram::after { transform: rotate(90deg); }
.sensor-core { position: absolute; inset: 50% auto auto 50%; z-index: 1; display: grid; place-content: center; width: 40%; aspect-ratio: 1; border: 12px solid var(--purple); border-radius: 50% 16% 50% 50%; background: #070b10; text-align: center; transform: translate(-50%, -50%); }
.sensor-core span { color: var(--purple); font-size: 0.58rem; font-weight: 900; letter-spacing: 0.18em; }
.sensor-core strong { margin-top: 5px; font: 900 clamp(0.9rem, 2vw, 1.4rem)/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.orbit { position: absolute; z-index: 2; padding: 5px 9px; border-radius: 999px; background: var(--bg); color: var(--cyan); font: 900 0.58rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.12em; }
.orbit-a { top: 11%; left: 46%; } .orbit-b { top: 49%; right: -2%; } .orbit-c { bottom: 8%; left: 45%; } .orbit-d { top: 48%; left: -5%; }
.sensor-copy > p:not(.section-index), .science-copy > p:not(.section-index) { color: var(--muted); }
.sensor-copy .large-statement { color: var(--orange); font-size: clamp(1.35rem, 2.7vw, 2rem); font-weight: 850; }
.sensor-copy .muted { font-size: 0.8rem; }
.science-section { grid-template-columns: 1fr 1fr; }
.science-copy > p:last-child { font-size: 1.13rem; line-height: 1.75; }
.spectrum-panel { padding: 24px; border: 1px solid #2d3d49; border-radius: 8px 28px 8px 28px; background: var(--panel); }
.spectrum-header { display: flex; justify-content: space-between; gap: 15px; margin-bottom: 30px; color: var(--pink); font: 900 0.6rem/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.12em; }
.spectrum-bars { display: flex; align-items: end; gap: 5px; height: 175px; padding: 8px; border: 1px solid #1f303c; background-image: linear-gradient(rgba(140,232,241,.08) 1px, transparent 1px); background-size: 100% 25%; }
.spectrum-bars i { flex: 1; height: 42%; border-radius: 4px 4px 0 0; background: var(--blue); box-shadow: 0 0 11px rgba(74,175,229,.25); }
.spectrum-bars i:nth-child(3n) { height: 68%; background: var(--purple); } .spectrum-bars i:nth-child(4n) { height: 88%; background: var(--pink); } .spectrum-bars i:nth-child(5n) { height: 55%; background: var(--orange); } .spectrum-bars i:nth-child(7n) { height: 100%; background: var(--yellow); }
.spectrum-panel p { margin: 15px 0 0; color: #70838f; font-size: 0.65rem; }

.history-section { display: grid; grid-template-columns: minmax(260px, 0.72fr) minmax(0, 1.28fr); gap: clamp(46px, 9vw, 120px); align-items: start; }
.history-heading { position: sticky; top: 42px; }
.history-heading h2 { margin-bottom: 38px; }
.history-timeline { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; max-width: 390px; }
.history-timeline span { display: flex; flex-direction: column; }
.history-timeline b { color: var(--text); font: 900 1.08rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.08em; }
.history-timeline small { margin-top: 7px; color: var(--orange); font: 900 0.52rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.14em; }
.history-timeline i { position: relative; height: 1px; background: linear-gradient(90deg, var(--orange), var(--cyan)); }
.history-timeline i::before, .history-timeline i::after { position: absolute; top: 50%; width: 7px; height: 7px; border-radius: 50%; background: currentColor; content: ""; transform: translateY(-50%); }
.history-timeline i::before { left: 0; color: var(--orange); }
.history-timeline i::after { right: 0; color: var(--cyan); box-shadow: 0 0 12px var(--cyan); }
.history-video-link { margin-top: 34px; }
.history-story { max-width: 680px; padding: clamp(27px, 5vw, 54px); border: 1px solid #2c3e4c; border-left: 7px solid var(--orange); border-radius: 6px 34px 6px 6px; background: linear-gradient(145deg, rgba(255,156,51,.06), transparent 28%), var(--panel); }
.history-story p { margin-bottom: 1.35em; color: #b2c5d1; font-size: 1rem; line-height: 1.82; }
.history-story cite { font-style: italic; }
.history-story .history-lead { color: var(--text); font-size: clamp(1.28rem, 2.4vw, 1.75rem); font-weight: 800; line-height: 1.35; }
.history-story .history-manifesto { padding-left: 20px; border-left: 2px solid var(--purple); color: var(--purple); font: 850 clamp(1.05rem, 2vw, 1.32rem)/1.65 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.03em; }
.history-story blockquote { margin: 31px 0; color: var(--cyan); font-size: clamp(1.28rem, 2.7vw, 1.82rem); font-weight: 780; letter-spacing: -0.02em; line-height: 1.4; }
.history-signoff { display: flex; justify-content: space-between; gap: 18px; margin: 45px 0 0 !important; padding-top: 20px; border-top: 1px solid var(--line); color: var(--orange) !important; font: 900 0.68rem/1.3 ui-monospace, SFMono-Regular, Menlo, monospace !important; letter-spacing: 0.11em; }

.audience-section .section-heading { margin-bottom: 30px; }
.audience-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.audience-grid > span { display: flex; align-items: center; gap: 15px; min-height: 74px; padding: 16px 20px; border-radius: 4px 17px 4px 17px; background: var(--panel-2); }
.audience-grid b { color: var(--orange); font: 900 0.63rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.audience-grid em { font-size: 0.94rem; font-style: normal; font-weight: 780; }

.final-cta { margin: 50px 0 110px; padding: clamp(42px, 8vw, 86px); border: 1px solid #354452; border-radius: 42px 8px 42px 8px; background: radial-gradient(circle at 100% 0, rgba(236,135,184,.16), transparent 38%), linear-gradient(135deg, #101b27, #080c12); text-align: center; }
.final-cta h2 { max-width: 900px; margin-inline: auto; }
.cta-price { width: fit-content; max-width: 100%; margin: 26px auto 4px; padding: 10px 17px; border: 1px solid rgba(244, 239, 85, 0.35); border-radius: 999px; background: rgba(244, 239, 85, 0.08); color: #c8d7df; font-size: 0.82rem; }
.cta-price strong { color: var(--yellow); }
.cta-price span { color: #8295a1; }
.app-store-text-link { display: inline-block; margin-top: 24px; color: var(--cyan); font-size: 0.88rem; font-weight: 850; letter-spacing: 0.06em; text-underline-offset: 5px; text-transform: uppercase; }
.footer { display: grid; grid-template-columns: 1fr auto; gap: 30px; padding: 40px 0 48px; border-top: 1px solid var(--line); }
.footer-brand { display: flex; flex-direction: column; }
.footer-brand strong { letter-spacing: 0.16em; }
.footer-brand span { margin-top: 5px; color: var(--purple); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; }
.footer nav { display: flex; justify-content: flex-end; gap: 12px 24px; flex-wrap: wrap; }
.footer nav a { color: var(--muted); font-size: 0.78rem; text-underline-offset: 4px; }
.footer-meta { grid-column: 1 / -1; color: #6e818c; font-size: 0.68rem; }
.footer-meta p { margin-bottom: 5px; }

.js .reveal { opacity: 0; transform: translateY(20px); transition: opacity 700ms ease, transform 700ms ease; }
.js .reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (max-width: 860px) {
    .hero { grid-template-columns: 1fr; min-height: auto; padding-top: 48px; }
    .hero-copy { max-width: 700px; }
    .hero-instrument { width: min(78vw, 430px); margin-inline: auto; }
    .capability-grid { grid-template-columns: repeat(2, 1fr); }
    .sensor-section, .science-section, .history-section { grid-template-columns: 1fr; }
    .sensor-diagram { width: min(80vw, 440px); margin-inline: auto; }
    .history-heading { position: static; }
    .audience-grid { grid-template-columns: repeat(2, 1fr); }
    .screenshot-rail { grid-auto-columns: minmax(235px, 42%); }
}

@media (max-width: 600px) {
    .topbar, main, .footer { width: min(calc(100% - 24px), var(--max)); }
    .topbar { align-items: flex-start; padding-block: 17px; }
    .wordmark small { max-width: 145px; }
    .topnav { gap: 10px; }
    .topnav > a:nth-child(-n + 2) { display: none; }
    .topnav > a { font-size: 0.65rem; }
    .hero { gap: 50px; padding: 54px 0 70px; }
    h1 { font-size: clamp(3.25rem, 18vw, 5.1rem); }
    .hero-title { font-size: clamp(1.85rem, 9.5vw, 2.75rem); }
    .launch-offer-price { align-items: flex-start; flex-direction: column; gap: 4px; }
    .hero-actions { align-items: flex-start; flex-direction: column; gap: 18px; }
    .hero-instrument { width: 88vw; max-width: 390px; }
    .signal-strip { margin-inline: -12px; }
    .section { padding-block: 78px; }
    h2 { font-size: clamp(2.1rem, 11vw, 3.2rem); }
    .screenshot-rail { grid-auto-columns: minmax(245px, 78%); margin-inline: -12px; padding-inline: 12px; }
    .swipe-note { display: block; }
    .capability-grid { grid-template-columns: 1fr; }
    .capability-card { min-height: 0; }
    .sensor-diagram { width: 88vw; }
    .history-section { gap: 34px; }
    .history-story { padding: 26px 22px; }
    .history-signoff { align-items: flex-start; flex-direction: column; }
    .audience-grid { grid-template-columns: 1fr; }
    .final-cta { margin-bottom: 80px; padding-inline: 22px; }
    .cta-price { border-radius: 18px; }
    .cta-price span { display: block; margin-top: 2px; }
    .footer { grid-template-columns: 1fr; }
    .footer nav { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
    .reveal { opacity: 1; transform: none; }
}