:root {
  --ink: #0d2031;
  --muted: #66788a;
  --teal: #00a99d;
  --teal-deep: #007d76;
  --lime: #b9e33d;
  --line: #dbe4e9;
  --paper: #f7faf9;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--paper); }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: Arial, Helvetica, sans-serif; }
button, input { font: inherit; }
a { color: inherit; }

.page-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(430px, .88fr); overflow: hidden; position: relative; }
.story-panel { position: relative; isolation: isolate; min-height: 100vh; overflow: hidden; padding: clamp(34px, 4.2vw, 72px); color: white; background: radial-gradient(circle at 12% 8%, #183f50 0, transparent 34%), linear-gradient(145deg, #071e2d 0%, #0b2d3a 50%, #0a2534 100%); display: flex; flex-direction: column; }
.story-panel::before { content: ""; position: absolute; inset: 0; z-index: -2; opacity: .36; background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px); background-size: 46px 46px; mask-image: linear-gradient(to bottom right, #000, transparent 65%); }
.story-panel::after { content: ""; position: absolute; width: 450px; height: 450px; border: 1px solid rgba(72,226,211,.13); border-radius: 50%; right: -240px; top: -200px; box-shadow: 0 0 0 70px rgba(72,226,211,.025), 0 0 0 140px rgba(72,226,211,.02); }
.brand-lockup { display: flex; gap: 13px; align-items: center; position: relative; z-index: 2; }
.brand-mark { width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.23); border-radius: 12px; display: grid; place-content: center; grid-template-columns: repeat(3, 4px); gap: 4px; transform: rotate(-4deg); background: rgba(255,255,255,.06); box-shadow: inset 0 1px rgba(255,255,255,.1); }
.brand-mark span { display: block; width: 4px; border-radius: 4px; background: var(--lime); align-self: end; }
.brand-mark span:nth-child(1) { height: 10px; opacity: .58; }
.brand-mark span:nth-child(2) { height: 21px; }
.brand-mark span:nth-child(3) { height: 15px; opacity: .78; }
.brand-name { margin: 0; font-size: 24px; font-weight: 750; letter-spacing: -.8px; line-height: 1; }
.brand-name span { color: var(--lime); }
.brand-owner { margin: 5px 0 0; color: #9fb4be; font-size: 10px; text-transform: uppercase; letter-spacing: 1.7px; }

.story-copy { max-width: 750px; margin-top: clamp(58px, 9vh, 110px); position: relative; z-index: 3; }
.eyebrow { margin: 0 0 22px; display: flex; align-items: center; gap: 9px; color: #9ccbc8; text-transform: uppercase; letter-spacing: 2.4px; font-weight: 700; font-size: 11px; }
.eyebrow span { width: 25px; height: 1px; background: var(--lime); box-shadow: 0 0 12px var(--lime); }
.story-copy h1 { max-width: 670px; margin: 0; font-size: clamp(46px, 5.8vw, 78px); line-height: .98; letter-spacing: -3.9px; font-weight: 500; }
.story-copy h1 em { display: block; font-style: normal; color: var(--lime); }
.intro { max-width: 620px; color: #b6c8cf; font-size: clamp(16px, 1.45vw, 20px); line-height: 1.65; margin: 28px 0 0; }
.capability-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; max-width: 640px; margin-top: 42px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.14); border-radius: 16px; overflow: hidden; }
.capability-row div { min-height: 79px; padding: 17px 19px; background: rgba(10,39,52,.8); display: flex; gap: 11px; align-items: flex-start; }
.capability-row b { color: var(--lime); font-family: ui-monospace, monospace; font-size: 10px; letter-spacing: 1px; }
.capability-row span { font-size: 12px; color: #c6d5da; line-height: 1.45; }

.instrument-scene { position: absolute; width: min(47vw, 680px); height: 370px; right: -45px; bottom: 28px; z-index: -1; opacity: .72; }
.scene-grid { position: absolute; inset: 0; opacity: .16; background-image: linear-gradient(rgba(102,225,215,.16) 1px, transparent 1px), linear-gradient(90deg, rgba(102,225,215,.16) 1px, transparent 1px); background-size: 24px 24px; mask-image: radial-gradient(circle at 58% 55%, black 2%, transparent 69%); }
.signal-line { position: absolute; left: 20px; right: 40px; top: 210px; height: 2px; background: linear-gradient(90deg, transparent, #3fd6cb 18%, #3fd6cb 78%, transparent); box-shadow: 0 0 8px rgba(63,214,203,.7); }
.signal-line i { position: absolute; width: 8px; height: 8px; top: -3px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 13px var(--lime); animation: signal 4s linear infinite; }
.signal-line i:nth-child(2) { animation-delay: -1.3s; }.signal-line i:nth-child(3) { animation-delay: -2.6s; }
@keyframes signal { from { left: 0; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } to { left: 100%; opacity: 0; } }
.device-card { position: absolute; border: 1px solid rgba(148,224,219,.3); background: rgba(6,29,41,.78); backdrop-filter: blur(7px); box-shadow: 0 22px 40px rgba(0,0,0,.16); }
.transmitter { right: 95px; top: 87px; width: 170px; border-radius: 18px; padding: 18px; }
.device-top { display: flex; justify-content: space-between; align-items: center; color: #84a5b1; font: 10px ui-monospace, monospace; letter-spacing: 1px; }.device-top span { color: var(--lime); border: 1px solid rgba(185,227,61,.4); border-radius: 50%; padding: 7px; }
.reading { font: 32px ui-monospace, monospace; color: white; margin: 17px 0 13px; }.reading small { font-size: 11px; color: #8daab4; }
.health { display: flex; gap: 7px; align-items: center; color: #8eb9b5; font-size: 9px; text-transform: uppercase; letter-spacing: .8px; }.health i { width: 6px; height: 6px; background: var(--lime); border-radius: 50%; box-shadow: 0 0 8px var(--lime); }
.valve { left: 55px; top: 173px; width: 118px; height: 105px; padding: 15px; border-radius: 16px; }.valve p { margin: 12px 0 4px; color: #7897a3; font-size: 9px; text-transform: uppercase; letter-spacing: 1px; }.valve b { font: 13px ui-monospace, monospace; }
.valve-symbol { height: 20px; display: flex; justify-content: center; position: relative; }.valve-symbol::before,.valve-symbol::after { content:""; border-top: 8px solid transparent; border-bottom: 8px solid transparent; position: absolute; top: 2px; }.valve-symbol::before { border-right: 18px solid #3fd6cb; left: 26px; }.valve-symbol::after { border-left: 18px solid #3fd6cb; right: 26px; }
.evidence-chip { position: absolute; padding: 10px 13px; border-radius: 10px; color: #b9d0d2; background: rgba(7,35,47,.92); border: 1px solid rgba(73,205,194,.26); font-size: 9px; text-transform: uppercase; letter-spacing: .8px; white-space: nowrap; }.evidence-chip i { display:inline-block; width:5px; height:5px; margin-right:7px; border-radius:50%; background:var(--lime); box-shadow:0 0 7px var(--lime); }.chip-one { right: 20px; top: 49px; }.chip-two { right: 8px; bottom: 65px; }
.pulse-ring { position:absolute; border:1px solid rgba(63,214,203,.18); border-radius:50%; }.ring-one { width:260px; height:260px; right:48px; top:35px; }.ring-two { width:330px; height:330px; right:12px; top:0; opacity:.55; }
.story-footer { margin-top: auto; display: flex; justify-content: space-between; align-items: center; color: #7895a0; font-size: 10px; text-transform: uppercase; letter-spacing: 1.5px; position: relative; z-index: 4; }
.secure-label { display:flex; align-items:center; gap:8px; }.secure-label i { width:5px; height:5px; border-radius:50%; background:var(--lime); }

.login-panel { min-height: 100vh; padding: 44px clamp(34px, 5vw, 90px) 25px; display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; background: linear-gradient(135deg, #fbfdfd 0%, #f1f7f5 100%); }
.login-panel::before { content:""; position:absolute; width:300px; height:300px; border-radius:50%; top:-180px; right:-120px; border:1px solid rgba(0,169,157,.08); box-shadow:0 0 0 54px rgba(0,169,157,.025),0 0 0 108px rgba(0,169,157,.018); }
.login-card { width: min(100%, 440px); position: relative; z-index: 2; }
.mobile-brand { display:none; }
.access-pill { width:max-content; padding:8px 12px; border-radius:99px; color:var(--teal-deep); background:#e4f5f1; text-transform:uppercase; letter-spacing:1.25px; font-size:9px; font-weight:800; display:flex; align-items:center; gap:7px; }
.access-pill span { width:6px; height:6px; border-radius:50%; background:var(--teal); box-shadow:0 0 0 4px rgba(0,169,157,.12); }
.login-card h2 { margin:23px 0 8px; font-size:42px; letter-spacing:-1.8px; font-weight:650; }
.login-lead { margin:0 0 32px; color:var(--muted); font-size:15px; line-height:1.55; }
form label { display:block; font-weight:700; font-size:12px; margin-bottom:9px; }
.label-row { display:flex; align-items:center; justify-content:space-between; margin-top:20px; }.label-row label { margin:0; }.label-row a { color:var(--teal-deep); font-size:11px; font-weight:700; text-decoration:none; }.label-row a:hover { text-decoration:underline; }
.input-wrap { min-height:54px; display:flex; align-items:center; border:1px solid var(--line); border-radius:13px; background:white; box-shadow:0 5px 14px rgba(18,47,61,.035); transition:.2s ease; }
.input-wrap:focus-within { border-color:var(--teal); box-shadow:0 0 0 4px rgba(0,169,157,.1); }
.input-wrap > svg { width:18px; height:18px; margin-left:17px; fill:none; stroke:#7f929e; stroke-width:1.7; }
.input-wrap input { min-width:0; width:100%; border:0; outline:0; background:transparent; padding:15px 13px; color:var(--ink); font-size:14px; }.input-wrap input::placeholder { color:#a7b3ba; }
.password-toggle { border:0; background:transparent; width:48px; height:50px; display:grid; place-content:center; cursor:pointer; color:#82949e; }.password-toggle svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.6; }
.password-toggle .eye-slash { display:none; }.password-toggle[aria-pressed="true"] .eye-slash { display:block; }
.remember-row { display:flex; align-items:center; gap:9px; color:#637887; font-weight:500; margin:17px 0 23px; cursor:pointer; }.remember-row input { width:15px; height:15px; accent-color:var(--teal); }.remember-row span { font-size:11px; }
.sign-in-button { width:100%; min-height:55px; border:0; border-radius:13px; color:white; background:linear-gradient(135deg,#008f87,#006d6b); box-shadow:0 12px 26px rgba(0,125,118,.22); cursor:pointer; display:flex; align-items:center; justify-content:center; gap:12px; font-size:13px; font-weight:800; transition:transform .2s, box-shadow .2s; }.sign-in-button:hover { transform:translateY(-1px); box-shadow:0 15px 30px rgba(0,125,118,.28); }.sign-in-button:focus-visible { outline:3px solid rgba(0,169,157,.28); outline-offset:3px; }.sign-in-button svg { width:17px; fill:none; stroke:white; stroke-width:1.7; }
.sign-in-button:disabled { cursor:not-allowed; opacity:.55; transform:none; box-shadow:none; }
.form-message { min-height:0; margin:0; opacity:0; color:var(--teal-deep); font-size:11px; line-height:1.45; text-align:center; transition:.2s; }.form-message.visible { min-height:34px; padding-top:12px; opacity:1; }
.form-message.form-error { color:#a53b46; }
.divider { display:flex; align-items:center; gap:13px; color:#92a1a9; text-transform:uppercase; letter-spacing:1.1px; font-size:8px; margin:20px 0 14px; }.divider::before,.divider::after { content:""; height:1px; background:var(--line); flex:1; }
.pilot-link { min-height:49px; display:flex; justify-content:center; align-items:center; border:1px solid #ccdadd; border-radius:12px; color:#254353; background:rgba(255,255,255,.48); text-decoration:none; font-weight:750; font-size:12px; transition:.2s; }.pilot-link:hover { border-color:#8fcac5; color:var(--teal-deep); background:white; }
.account-note { color:#7b8d98; font-size:10px; line-height:1.5; text-align:center; margin:11px 22px 0; }
.trust-row { display:flex; justify-content:center; gap:24px; margin-top:29px; padding-top:20px; border-top:1px solid var(--line); color:#758892; font-size:9px; text-transform:uppercase; letter-spacing:.7px; }.trust-row span { display:flex; align-items:center; gap:6px; }.trust-row i { font-style:normal; color:var(--teal); font-size:11px; }
.legal { position:absolute; bottom:20px; margin:0; color:#8a9aa2; font-size:9px; letter-spacing:.3px; }.legal a { text-decoration:none; }.legal a:hover { color:var(--teal-deep); }
.ambient { display:none; }

@media (max-width: 980px) {
  .page-shell { grid-template-columns: 1fr; }
  .story-panel { min-height:auto; padding:26px 30px; flex-direction:row; justify-content:space-between; align-items:center; }
  .brand-owner,.story-copy,.instrument-scene,.story-footer { display:none; }
  .story-panel::after { width:220px; height:220px; right:-130px; top:-130px; }
  .login-panel { min-height:calc(100vh - 94px); padding:46px 28px 50px; }
  .legal { bottom:16px; }
}

@media (max-width: 560px) {
  .story-panel { display:none; }
  .login-panel { min-height:100vh; justify-content:flex-start; padding:28px 22px 55px; }
  .mobile-brand { display:flex; align-items:center; gap:11px; margin-bottom:54px; }.mobile-brand .brand-mark { border-color:rgba(13,32,49,.14); background:#0b2938; width:40px; height:40px; }.mobile-brand .brand-name { color:var(--ink); }
  .login-card h2 { font-size:36px; }
  .trust-row { gap:13px; flex-wrap:wrap; }
  .legal { position:static; margin-top:35px; }
}

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