/* Design A — Flight Deck. Dark, instrument-panel feel. Matches the Checklist app icon (navy, cyan, green). */
:root{
  --bg:#07111F;--surface:#0E1C30;--surface2:#0B1728;--line:#1D3350;--line-strong:#2D4A70;
  --text:#DCE6F3;--muted:#8FA3BF;--head:#F4F8FD;--link:#5CC8E8;
  --accent:#00B4D8;--on-accent:#04121F;--accent-text:#5CD3EE;
  --ok:#2BD68A;--ok-bg:#0E2F2A;--warn:#FFB547;
  --font-head:"Space Grotesk",system-ui,sans-serif;--font-body:"Inter",system-ui,sans-serif;--font-label:"Plex Mono",ui-monospace,monospace;
  --head-weight:600;--head-track:-.02em;--brand-track:.06em;
  --radius:14px;--radius-s:8px;--radius-btn:10px;--shadow:none;
  --head-bg:rgba(7,17,31,.82);--foot-bg:#040B15;--foot-text:#8FA3BF;--foot-link:#BFD3EA;--foot-head:#5CD3EE;--foot-line:#1D3350;
  --ghost-text:#F4F8FD;--ghost-line:#3B5B86;
}
.brand{text-transform:uppercase;font-size:1rem}
.hero{position:relative;padding:0;min-height:min(86vh,820px);display:grid;align-items:end;overflow:hidden;border-bottom:1px solid var(--line)}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.9}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,17,31,.35) 0%,rgba(7,17,31,.55) 45%,#07111F 100%)}
.hero .wrap{position:relative;z-index:2;padding:clamp(120px,22vh,220px) 0 clamp(48px,7vw,84px)}
.hero h1{max-width:13ch}
.hero .lede{color:#C4D3E6}
.readouts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin-top:44px;max-width:760px}
.readouts div{background:rgba(9,20,36,.9);padding:16px 18px}
.readouts b{display:block;font-family:var(--font-label);font-size:.68rem;letter-spacing:.14em;color:var(--muted);text-transform:uppercase}
.readouts span{font-family:var(--font-head);font-size:1.15rem;color:var(--head)}
@media(max-width:600px){.readouts{grid-template-columns:1fr}}
.card{background:linear-gradient(180deg,#0F1F36,#0B1829)}
.card:hover{border-color:var(--accent)}
.panel-grid{background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:56px 56px;background-position:center}
.band{background:#0A1626;border-block:1px solid var(--line)}
.phone{box-shadow:0 0 0 1px #24405F,0 40px 80px -30px rgba(0,180,216,.35)}
.horizon{animation:roll 14s ease-in-out infinite;transform-origin:50% 50%}
@keyframes roll{0%,100%{transform:rotate(-7deg) translateY(1px)}50%{transform:rotate(7deg) translateY(-1px)}}
.photo{border-radius:var(--radius);border:1px solid var(--line);width:100%;height:auto}