/* IndoorNav website. Palette and type follow the Company Profile 2026. */
:root{
  --navy:#343C4C; --slate:#4C5C77; --greyblue:#7F8BA1; --taupe:#A6998B; --blush:#DCD2CB; --offwhite:#F2F0F1; --lightgrey:#D7D3D5; --grey:#A9ACB3;
  --bg:#FCFBFB; --surface:#FFFFFF; --blush-soft:#EFE8E3; --ink:var(--navy); --muted:var(--slate); --line:var(--lightgrey);
  --shadow:0 16px 40px rgba(52,60,76,.12);
  --display:"Julius Sans One","DM Sans",system-ui,sans-serif;
  --body:"DM Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--body); font-size:1rem; line-height:1.55; min-height:100vh; display:flex; flex-direction:column}
main{flex:1}
img{max-width:100%; height:auto; display:block}
h1,h2,h3,p,ul,ol{margin:0}
ul,ol{padding:0; list-style:none}
a{color:var(--slate)}
a:hover{color:var(--navy)}
:focus-visible{outline:2px solid var(--slate); outline-offset:3px}
.wrap{max-width:1120px; margin:0 auto; padding-left:max(20px, env(safe-area-inset-left)); padding-right:max(20px, env(safe-area-inset-right))}

/* header */
.site-hdr{border-bottom:1px solid var(--line); background:var(--bg)}
.site-hdr .wrap{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:6px 24px; padding-top:14px; padding-bottom:14px}
.site-hdr .logo{display:flex; align-items:center; min-height:44px}
.site-hdr .logo img{height:20px; width:auto; max-width:none}
.nav{display:flex; flex-wrap:wrap; align-items:center; gap:4px 6px; font-size:.95rem}
.nav a{display:inline-flex; align-items:center; min-height:44px; padding:0 12px; color:var(--slate); text-decoration:none; border-radius:10px; font-weight:500}
.nav a:hover{color:var(--navy); background:var(--offwhite)}
.nav a[aria-current="page"]{color:var(--navy); font-weight:700; box-shadow:inset 0 -2px 0 var(--navy); border-radius:0}
.nav a.cta{background:var(--navy); color:#FFFFFF; font-weight:600; padding:0 16px; margin-left:6px; min-height:40px}
.nav a.cta:hover{background:var(--slate); color:#FFFFFF}

/* type */
.eyebrow{font-size:.8rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--slate)}
.title{font-family:var(--display); text-transform:uppercase; font-weight:400; font-size:clamp(1.7rem, 3.8vw, 2.4rem); line-height:1.15; letter-spacing:.04em}
.title.plain{font-family:var(--body); text-transform:none; font-weight:600; letter-spacing:-.01em; max-width:22em; text-wrap:balance}
.h2{font-family:var(--display); text-transform:uppercase; font-weight:400; font-size:clamp(1.3rem, 2.6vw, 1.7rem); line-height:1.2; letter-spacing:.04em}
.rule{width:64px; height:2px; background:var(--taupe); border:0; margin:0}
.lede{font-size:1.1rem; color:var(--slate); max-width:42rem}
.muted{color:var(--slate)}
.small{font-size:.9rem}

/* buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:0 22px; border-radius:12px; font-weight:600; text-decoration:none; border:1px solid var(--navy); background:var(--navy); color:#FFFFFF; font:inherit; font-weight:600; cursor:pointer}
.btn:hover{background:var(--slate); border-color:var(--slate); color:#FFFFFF}
.btn.ghost{background:var(--surface); color:var(--navy); border-color:var(--grey)}
.btn.ghost:hover{background:var(--offwhite); color:var(--navy); border-color:var(--slate)}
.btn.light{background:#FFFFFF; color:var(--navy); border-color:#FFFFFF}
.btn.light:hover{background:var(--blush); border-color:var(--blush); color:var(--navy)}
.btns{display:flex; flex-wrap:wrap; gap:12px}

/* sections */
.sec{padding:56px 0}
.sec.tint{background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.sec.blush{background:var(--blush-soft)}
.stack{display:flex; flex-direction:column; gap:28px}
.head{display:flex; flex-direction:column; gap:14px}
.grid3{display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:20px}
.grid2{display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:20px}
.card{background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:22px; display:flex; flex-direction:column; gap:10px; min-width:0}
.card.blush{background:var(--blush-soft); border-color:transparent}
.card h3{font-size:1.1rem; font-weight:700; line-height:1.3}
.card p,.card li{color:var(--slate)}
.ticks{display:flex; flex-direction:column; gap:6px}
.ticks li{position:relative; padding-left:18px}
.ticks li::before{content:""; position:absolute; left:2px; top:.62em; width:6px; height:6px; border-radius:50%; background:var(--taupe)}
.icon{width:44px; height:44px; border-radius:50%; background:var(--slate); color:#FFFFFF; display:grid; place-items:center; flex:none}
.icon svg{width:22px; height:22px}
.num{font-family:var(--display); font-size:2rem; line-height:1; color:var(--taupe)}
.plain a{font-weight:600}

/* hero */
.hero{padding:48px 0 64px}
.hero .wrap{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap:40px 48px; align-items:center}
.hero-copy{display:flex; flex-direction:column; gap:20px; min-width:0}
.hero h1{font-size:clamp(2.2rem, 5.4vw, 3.5rem); line-height:1.05; font-weight:600; letter-spacing:-.015em; text-wrap:balance}
.demo-card{background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:18px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:12px; min-width:0}
.demo-search{display:flex; align-items:center; gap:10px; border:1px solid var(--line); border-radius:12px; padding:10px 14px; color:var(--slate)}
.demo-search svg{width:18px; height:18px; flex:none}
.demo-search b{color:var(--navy); font-weight:600}
.demo-map{position:relative; border-radius:12px; overflow:hidden; background:var(--offwhite); border:1px solid var(--line)}
.demo-map svg{display:block; width:100%; height:auto}
.livebtn{position:absolute; left:10px; top:10px; display:inline-flex; align-items:center; gap:9px; min-height:44px; padding:0 16px 0 13px; border:0; border-radius:999px; background:var(--navy); color:#FFFFFF; font:inherit; font-size:.9rem; font-weight:600; cursor:pointer; box-shadow:0 6px 18px rgba(52,60,76,.25)}
.livebtn:hover{background:var(--slate)}
.livebtn i{width:10px; height:10px; border-radius:50%; background:#FFFFFF; animation:livepulse 1.8s ease-out infinite}
@keyframes livepulse{from{box-shadow:0 0 0 0 rgba(255,255,255,.65)} to{box-shadow:0 0 0 9px rgba(255,255,255,0)}}
.halo{transform-box:fill-box; transform-origin:center; animation:halo 1.8s ease-out infinite}
@keyframes halo{from{transform:scale(.6); opacity:.5} to{transform:scale(1.5); opacity:0}}
.demo-foot{display:flex; align-items:center; justify-content:space-between; gap:12px}
.demo-foot .nm{font-weight:700}
.demo-foot .eta{font-size:1.4rem; font-weight:700; color:var(--slate); white-space:nowrap; font-variant-numeric:tabular-nums}
.demo-status{font-size:.85rem; color:var(--slate); min-height:1.4em}

/* dark band */
.band{background:var(--navy); color:#FFFFFF}
.band .wrap{padding-top:48px; padding-bottom:48px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:28px 40px}
.band .copy{flex:1 1 380px; min-width:0; display:flex; flex-direction:column; gap:14px; align-items:flex-start}
.band p{color:var(--lightgrey)}
.band .qr{display:flex; align-items:center; gap:16px; flex:0 1 auto}
.band .qr img{width:148px; height:148px; border-radius:12px; background:#FFFFFF; padding:8px}
.band .qr span{font-size:.9rem; color:var(--lightgrey); max-width:11rem}

/* about */
.story{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap:32px 48px; align-items:start}
.story .text{display:flex; flex-direction:column; gap:16px; color:var(--slate)}
.story .sig{color:var(--navy); font-weight:700}
.stat{background:var(--blush-soft); border-radius:16px; padding:22px; display:flex; align-items:center; gap:18px}
.stat b{flex:none; background:var(--slate); color:#FFFFFF; font-size:2.4rem; font-weight:700; line-height:1; padding:14px 18px; border-radius:12px}
.stat span{font-size:1.1rem}
.mission{background:var(--slate); color:#FFFFFF; border-radius:16px; padding:22px; display:flex; flex-direction:column; gap:4px}
.mission b{font-size:1.05rem}
.mission span{font-size:1.15rem}
.side{display:flex; flex-direction:column; gap:16px}
.values{display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); gap:16px}
.values li{display:flex; flex-direction:column; gap:4px}
.values b{font-size:1rem}
.values span{color:var(--slate); font-size:.95rem}
.person{background:var(--blush-soft); border-radius:16px; padding:18px; display:flex; flex-direction:column; gap:12px; min-width:0}
.person img{width:100%; max-width:260px; aspect-ratio:207/132; object-fit:cover; border-radius:10px}
.person h3{font-size:1.1rem; font-weight:700}
.person .role{font-style:italic; color:var(--slate)}
.person .ticks li{font-size:.95rem; color:var(--slate)}
.backers{display:flex; flex-wrap:wrap; gap:12px}
.backers li{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:12px 18px; font-weight:600}
.timeline{display:flex; flex-direction:column; gap:14px; border-left:2px solid var(--slate); padding-left:20px; margin-left:6px}
.timeline li{position:relative; color:var(--slate)}
.timeline li::before{content:""; position:absolute; left:-27px; top:.45em; width:12px; height:12px; border-radius:50%; background:var(--slate)}
.timeline b{color:var(--navy)}
.callout{display:flex; gap:14px; align-items:center; background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:16px 18px}

/* contact */
.contact{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap:32px 48px; align-items:start}
.contact-list{display:flex; flex-direction:column; gap:14px}
.contact-list li{display:flex; align-items:center; gap:14px; min-width:0}
.contact-list a,.contact-list span{overflow-wrap:anywhere}
.contact-list .icon{width:40px; height:40px}
.contact-list .icon svg{width:18px; height:18px}
.details{background:var(--blush-soft); border-radius:16px; padding:22px; display:flex; flex-direction:column; gap:12px}
.details h2{font-size:1.1rem; font-weight:700}
.details dl{margin:0; display:flex; flex-direction:column}
.details dl div{display:flex; flex-wrap:wrap; gap:2px 12px; padding:10px 0; border-top:1px solid rgba(52,60,76,.16)}
.details dt{font-weight:700; flex:0 0 11rem}
.details dd{margin:0; color:var(--slate); flex:1 1 12rem; min-width:0}

/* footer */
.site-ftr{background:var(--navy); color:var(--lightgrey); font-size:.9rem}
.site-ftr .wrap{padding-top:28px; padding-bottom:28px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px 32px}
.site-ftr img{height:16px; width:auto}
.site-ftr a{color:#FFFFFF}
.site-ftr .links{display:flex; flex-wrap:wrap; gap:6px 20px}
.site-ftr .legal{flex-basis:100%; color:var(--grey); font-size:.82rem}
.band + .site-ftr{border-top:1px solid rgba(255,255,255,.14)}

@media (max-width:640px){
  .sec{padding:40px 0}
  .hero{padding:28px 0 44px}
  .nav{width:100%; gap:2px}
  .nav a{padding:0 10px}
  .nav a.cta{margin-left:auto}
  .band .qr img{width:120px; height:120px}
}
@media (prefers-reduced-motion:reduce){ .livebtn i,.halo{animation:none} }