:root {
  color-scheme: light;
  --navy: #101d37;
  --navy-2: #16294a;
  --blue: #2877d4;
  --blue-bright: #55a6ff;
  --cyan: #7bd5e6;
  --ink: #17243a;
  --muted: #61718a;
  --paper: #f4f8fc;
  --line: #dbe5ef;
  --white: #fff;
  font-family: 'DM Sans', sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); }
a { color: inherit; text-decoration: none; }
.site-header { height: 82px; padding: 0 max(6.5vw, calc((100vw - 1320px)/2)); display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 5; background: rgba(244,248,252,.88); border-bottom: 1px solid rgba(219,229,239,.68); }
.brand { display: inline-flex; gap: 10px; align-items: center; font: 800 21px/1 'Manrope', sans-serif; letter-spacing: -1.1px; color: var(--navy); }
.brand-period { color: var(--blue); }
.brand-mark { display: flex; align-items: flex-end; gap: 2px; width: 19px; height: 19px; padding: 3px 2px; border-radius: 5px; background: var(--blue); transform: skew(-7deg); }
.brand-mark i { display: block; width: 3px; border-radius: 2px; background: #fff; }
.brand-mark i:nth-child(1) { height: 6px; opacity: .72; }.brand-mark i:nth-child(2) { height: 10px; opacity: .86; }.brand-mark i:nth-child(3) { height: 13px; }
.main-nav { display: flex; align-items: center; gap: 37px; color: #50617a; font-size: 13px; font-weight: 600; }
.main-nav a { transition: color .2s ease; }.main-nav a:hover { color: var(--blue); }
.main-nav .nav-product { color: var(--blue); display: flex; align-items: center; gap: 7px; }
.nav-product span { font-size: 17px; }
.menu-toggle { display: none; }
.section-shell { width: min(1320px, 87%); margin: 0 auto; }
.hero { min-height: 655px; display: grid; grid-template-columns: 1fr 1fr; align-items: center; position: relative; padding-top: 12px; padding-bottom: 58px; }
.hero-copy { padding: 17px 0 0 3.3%; position: relative; z-index: 2; }
.eyebrow { display: flex; align-items: center; gap: 11px; margin: 0 0 26px; color: var(--blue); font-size: 10px; line-height: 1; font-weight: 700; letter-spacing: 1.55px; text-transform: uppercase; }
.eyebrow-line { height: 1px; width: 25px; background: currentColor; }
h1,h2,h3,p { margin-top: 0; }
h1,h2,h3 { font-family: 'Manrope', sans-serif; }
h1 { margin-bottom: 22px; color: var(--navy); font-size: clamp(40px,4vw,53px); line-height: 1.12; letter-spacing: -2.8px; font-weight: 700; }
h1 span { color: var(--blue); }
.hero-description { max-width: 390px; margin-bottom: 29px; color: #63738a; font-size: 16px; line-height: 1.72; }
.button { min-height: 49px; padding: 0 20px; display: inline-flex; justify-content: center; align-items: center; gap: 28px; border-radius: 5px; font-size: 12px; font-weight: 700; transition: transform .2s, background .2s; }
.button:hover { transform: translateY(-2px); }
.button-primary { color: #fff; background: var(--blue); box-shadow: 0 9px 22px rgba(40,119,212,.17); }.button-primary:hover { background: #1d67bd; }
.button-primary span { font-size: 16px; }
.hero-note { display: flex; align-items: center; gap: 9px; margin-top: 47px; color: #8290a4; font-size: 11px; }
.note-dot { height: 7px; width: 7px; border-radius: 50%; background: #45b3a8; box-shadow: 0 0 0 4px rgba(69,179,168,.12); }
.hero-visual { height: min(475px, 70vw); min-height: 370px; position: relative; margin: 0 0 0 1%; padding: 18px 22px 16px; overflow: hidden; color: #d7e9fd; background: linear-gradient(145deg,#11213f 0%,#142c52 64%,#17335d 100%); border-radius: 8px; box-shadow: 0 27px 65px rgba(20,44,82,.16); }
.hero-visual::before { content: ''; position: absolute; width: 390px; height: 390px; border: 1px solid rgba(112,173,232,.09); border-radius: 50%; top: 25px; left: 15%; box-shadow: 0 0 0 38px rgba(112,173,232,.025),0 0 0 82px rgba(112,173,232,.02); }
.visual-topline,.visual-bottomline { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: center; color: #8fa9c9; font-size: 8px; letter-spacing: 1.45px; font-weight: 700; }
.live-indicator { color: #92dbc8; display: flex; align-items: center; gap: 6px; }.live-indicator::before { content: ''; width: 5px; height: 5px; background: #74d7b7; border-radius: 50%; }
.map-scene { position: absolute; inset: 53px 0 43px; overflow: hidden; }
.map-grid { position: absolute; inset: 0; opacity: .33; background-image: linear-gradient(rgba(143,177,211,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(143,177,211,.12) 1px,transparent 1px); background-size: 35px 35px; transform: perspective(420px) rotateX(24deg) scale(1.2); transform-origin: center 60%; }
.street-map { position: absolute; width: 112%; height: 110%; inset: -5% -6%; }
.street-map path { stroke: #5279a5; stroke-width: 1.15; opacity: .53; }
.street-map path:nth-child(2n) { stroke: #7195b9; opacity: .42; }
.street-map .route { stroke: #66c6d3; stroke-width: 2.2; opacity: .95; stroke-dasharray: 3 5; }
.map-pin { position: absolute; width: 14px; height: 14px; display: grid; place-items: center; border-radius: 50% 50% 50% 0; background: #78d4e3; transform: rotate(-45deg); box-shadow: 0 0 0 5px rgba(120,212,227,.13),0 0 24px rgba(120,212,227,.48); }
.map-pin span { display: block; width: 4px; height: 4px; border-radius: 50%; background: #173657; }.pin-one { left: 34%; top: 58%; }.pin-two { left: 69%; top: 34%; transform: scale(.7) rotate(-45deg); background: #68aaff; }.pin-three { left: 78%; top: 72%; transform: scale(.55) rotate(-45deg); opacity: .8; }
.map-label { position: absolute; display: flex; flex-direction: column; gap: 4px; min-width: 131px; padding: 9px 12px; background: rgba(11,28,53,.8); border: 1px solid rgba(129,175,218,.23); border-radius: 3px; box-shadow: 0 7px 22px rgba(7,18,36,.2); }
.map-label b { color: #e5f2ff; font-size: 9px; font-weight: 600; }.map-label small { color: #80cfc7; font-size: 8px; }.label-one { top: 25%; left: 39%; }.label-two { top: 60%; left: 58%; }
.visual-bottomline { position: absolute; left: 22px; right: 22px; bottom: 16px; }.bottom-coordinates { color: #7794b7; letter-spacing: .6px; }
.visual-orbit { position: absolute; border: 1px solid rgba(109,169,226,.08); border-radius: 50%; pointer-events: none; }.orbit-a { width: 580px; height: 240px; right: -130px; bottom: -180px; transform: rotate(-22deg); }.orbit-b { width: 540px; height: 220px; right: -100px; bottom: -163px; transform: rotate(-22deg); }
.approach { padding-top: 108px; padding-bottom: 119px; border-top: 1px solid var(--line); display: grid; grid-template-columns: .95fr 1.05fr; gap: 8%; }
.section-intro { padding-left: 3.3%; }.section-intro .eyebrow { margin-bottom: 22px; }
h2 { margin-bottom: 0; color: var(--navy); font-size: clamp(32px,3.45vw,47px); line-height: 1.2; letter-spacing: -2px; font-weight: 650; }
.section-intro h2 span { color: #6485ab; }
.approach-body { padding: 5px 4% 0 0; }.approach-lead { max-width: 530px; margin-bottom: 35px; color: #63738a; font-size: 14px; line-height: 1.8; }
.principles { border-top: 1px solid var(--line); }
.principle { display: grid; grid-template-columns: 43px 1fr 20px; gap: 9px; align-items: center; min-height: 77px; border-bottom: 1px solid var(--line); }
.principle-number { align-self: start; padding-top: 21px; color: var(--blue); font-size: 9px; font-weight: 700; letter-spacing: .7px; }
.principle h3 { margin: 0 0 4px; color: var(--navy); font-size: 14px; font-weight: 700; letter-spacing: -.2px; }.principle p { margin: 0; color: #7c899b; font-size: 11px; }.principle-arrow { color: #8396ad; font-size: 15px; }
.product-section { overflow: hidden; color: white; background: var(--navy); }
.product-inner { min-height: 420px; padding-top: 83px; padding-bottom: 68px; display: grid; grid-template-columns: 1fr 1fr; align-items: center; position: relative; }
.product-copy { position: relative; z-index: 2; padding-left: 3.3%; padding-bottom: 20px; }.eyebrow-light { color: #8cc8ff; margin-bottom: 24px; }
.product-copy h2 { color: #fff; font-size: clamp(38px,4vw,53px); margin-bottom: 16px; }.product-copy h2 span { color: #83c7ff; }.product-copy > p:not(.eyebrow) { max-width: 410px; color: #abbdd5; font-size: 14px; line-height: 1.75; margin-bottom: 25px; }
.button-light { color: var(--navy); background: #e4f3ff; }.button-light:hover { background: white; }.button-light span { font-size: 16px; }
.product-art { height: 285px; width: min(100%,480px); justify-self: end; position: relative; overflow: hidden; border: 1px solid rgba(142,183,226,.18); background: radial-gradient(ellipse at 52% 49%,rgba(42,106,170,.28),transparent 59%),linear-gradient(140deg,rgba(23,48,83,.7),rgba(15,29,53,.15)); }
.product-art::before,.product-art::after { content:''; position:absolute; inset:0; opacity:.2; background-image:linear-gradient(30deg,transparent 48%,rgba(128,180,225,.3) 49%,transparent 50%),linear-gradient(150deg,transparent 48%,rgba(128,180,225,.22) 49%,transparent 50%); background-size:73px 73px; }
.art-ring { position:absolute; border:1px solid rgba(128,195,245,.36); border-radius:50%; left:50%; top:50%; transform:translate(-50%,-50%); }.ring-one { width:148px;height:148px; }.ring-two { width:220px;height:220px;opacity:.7; }.ring-three { width:300px;height:300px;opacity:.42; }
.art-cross { position:absolute; width:1px; height:100%; background:rgba(139,186,230,.16); left:50%; top:0; }.cross-two { transform:rotate(90deg); }.art-core { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:105px;height:105px; display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;border:1px solid rgba(143,207,255,.54);border-radius:50%;background:rgba(18,43,74,.88);box-shadow:0 0 36px rgba(78,165,238,.2); color:#d8edff;font:700 10px/1.15 'Manrope',sans-serif;letter-spacing:1.2px;text-align:center; }
.core-mark { width:18px;height:15px;display:flex;gap:2px;align-items:flex-end;justify-content:center; }.core-mark i { width:3px;background:#82d5e3;border-radius:2px; }.core-mark i:nth-child(1){height:7px}.core-mark i:nth-child(2){height:11px}.core-mark i:nth-child(3){height:15px}
.art-caption { position:absolute; color:#779cc4; font-size:8px; letter-spacing:1.5px; }.caption-top { top:19px;left:21px; }.caption-bottom { bottom:19px;left:21px; }
.product-footer { position:absolute; bottom:22px; left:3.3%; right:3.3%; display:flex;align-items:center;gap:14px;color:#7890ac;font-size:9px;letter-spacing:.6px; }.footer-line { height:1px; width:43px; background:#3e597b; }
.site-footer { min-height:79px; padding:0 max(6.5vw,calc((100vw - 1320px)/2)); display:flex;align-items:center;justify-content:space-between;background:#0c172c;color:#7e8fa8;font-size:10px; }.footer-brand { color:#d6e2f0;font-size:16px; }.footer-brand .brand-mark { width:16px;height:16px; }.back-top { color:#a6b7ce; }
@media (max-width: 850px) {
  .site-header { height:72px; padding:0 6.5%; }.section-shell { width:87%; }
  .hero { min-height:auto; grid-template-columns:1fr; gap:32px; padding-top:59px; padding-bottom:62px; }.hero-copy { padding-left:0; }.hero-visual { width:100%; height:430px; min-height:0; margin:0; }.hero-note { margin-top:30px; }
  .approach { grid-template-columns:1fr; gap:31px; padding-top:78px; padding-bottom:85px; }.section-intro { padding-left:0; }.approach-body { padding-right:0; }.approach-lead { max-width:600px; }
  .product-inner { min-height:auto; grid-template-columns:1fr; gap:35px; padding-top:67px; padding-bottom:73px; }.product-copy { padding-left:0; }.product-art { justify-self:start; width:100%; }.product-footer { left:0;right:0;bottom:24px; }
  .site-footer { padding:0 6.5%; gap:12px; }.site-footer > span { display:none; }
}
@media (max-width: 560px) {
  .brand { font-size:19px; }.menu-toggle { display:flex; flex-direction:column; justify-content:center; gap:5px; width:40px;height:40px;border:0;background:transparent;cursor:pointer; }.menu-toggle span { width:21px;height:1.5px;background:var(--navy);transition:transform .2s; }.menu-toggle[aria-expanded="true"] span:first-child { transform:translateY(3.25px) rotate(45deg); }.menu-toggle[aria-expanded="true"] span:last-child { transform:translateY(-3.25px) rotate(-45deg); }
  .main-nav { display:none; position:absolute; left:0;right:0;top:71px;padding:10px 6.5% 20px;flex-direction:column;align-items:stretch;gap:0;background:var(--paper);border-bottom:1px solid var(--line);box-shadow:0 16px 25px rgba(16,29,55,.06); }.main-nav.is-open { display:flex; }.main-nav a { padding:13px 0;border-bottom:1px solid var(--line); }.main-nav a:last-child { border:0; }
  .hero { padding-top:46px; gap:28px; }.eyebrow { font-size:9px;letter-spacing:1.3px;margin-bottom:20px; }h1 { font-size:36px;letter-spacing:-2px; }.hero-description { font-size:14px; }.hero-visual { height:340px;padding-left:15px;padding-right:15px; }.visual-topline,.visual-bottomline { font-size:7px; }.visual-bottomline { left:15px;right:15px; }.map-label { min-width:110px;padding:7px 8px; }.label-one { left:35%; }.label-two { left:51%;top:62%; }.map-label b { font-size:8px; }.map-label small { font-size:7px; }.pin-two { left:66%; }.pin-three { left:79%; }.section-intro h2,h2 { letter-spacing:-1.4px; }.section-intro h2 { font-size:34px; }.principle { grid-template-columns:34px 1fr 18px; }.principle h3 { font-size:13px; }.principle p { font-size:10px; }
  .product-copy h2 { font-size:39px; }.product-art { height:240px; }.product-footer { font-size:8px;gap:9px; }.footer-line { width:22px; }.site-footer { min-height:68px; }.footer-brand { font-size:15px; }.back-top { font-size:9px; }
}
@media (max-width: 360px) {
  h1 { font-size:32px; letter-spacing:-1.8px; }
}