/* Caravel Suite home. Dark, futuristic hero and story sections; no third parties; works with no JS. */
.dk{--bg:#060d1a;--bg2:#0a1526;--card:#0e1b30;--fg:#eef4fc;--muted:#a9b9cf;--line:#20314c;--brand:#7fd4ff;--brand2:#4fb6f5;--link:#8fd3ff;--shadow:0 1px 2px rgba(0,0,0,.4),0 12px 40px rgba(0,0,0,.35);color-scheme:dark;background:var(--bg);color:var(--fg)}
.dk .btn-p{background:linear-gradient(135deg,#6ee7ff,#58a6ff)!important;color:#04101f}
.dk .bad{color:#fca5a5}
.dk .btn-s{background:rgba(255,255,255,.05);color:var(--fg);border-color:rgba(255,255,255,.2)}
.dk .btn-s:hover{background:rgba(255,255,255,.1)}

/* header sits over the hero on this page */
body:has(.hx) .hdr{--bg:#060d1a;--bg2:#13233c;--card:#0e1b30;--fg:#eef4fc;--line:#2a3e5c;--brand2:#6ee7ff;color-scheme:dark;color:var(--fg);background:rgba(6,13,26,.9);border-bottom-color:rgba(255,255,255,.08)}
body:has(.hx) main{margin-top:-65px}

/* hero */
.hx{position:relative;overflow:hidden;padding:106px 0 40px;min-height:min(100svh,900px);display:flex;flex-direction:column;justify-content:center;--gx:72%;--gy:30%;isolation:isolate}
.hx::before{content:"";position:absolute;inset:0;z-index:-2;background:radial-gradient(760px 520px at 82% 12%,rgba(79,182,245,.22),transparent 65%),radial-gradient(620px 460px at 8% 2%,rgba(124,92,255,.17),transparent 62%),radial-gradient(900px 300px at 50% 104%,rgba(245,158,11,.11),transparent 70%)}
.hx::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(360px 360px at var(--gx) var(--gy),rgba(110,231,255,.09),transparent 70%)}
#hx-sea{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.hx-grid{display:grid;grid-template-columns:minmax(0,1.28fr) minmax(0,.72fr);gap:36px;align-items:center;width:100%}
.hx-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.hx-chip{display:inline-flex;align-items:center;gap:8px;padding:6px 13px;border:1px solid rgba(255,255,255,.17);border-radius:999px;font-size:.84rem;font-weight:500;color:#dbe7f6;background:rgba(255,255,255,.05);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.hx-dot{width:8px;height:8px;border-radius:50%;background:#fbbf24;box-shadow:0 0 0 0 rgba(251,191,36,.7);animation:hx-ping 2.2s infinite}
@keyframes hx-ping{70%{box-shadow:0 0 0 9px rgba(251,191,36,0)}100%{box-shadow:0 0 0 0 rgba(251,191,36,0)}}
.hx h1{font-size:clamp(2.5rem,5.1vw,4.3rem);line-height:1.04;letter-spacing:-.045em;font-weight:680;margin:0 0 22px;text-wrap:balance}
.hx-grad{background:linear-gradient(100deg,#6ee7ff 0%,#58a6ff 34%,#a78bfa 62%,#fbbf24 100%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:hx-flow 9s ease-in-out infinite alternate}
@keyframes hx-flow{to{background-position:100% 0}}
.hx-lead{font-size:clamp(1.05rem,1.5vw,1.24rem);line-height:1.55;color:#bdcbdd;max-width:36em;margin:0 0 28px}
.hx .cta{margin:0}
.hx-hud{display:flex;align-items:center;gap:12px;margin-top:22px;min-height:58px;padding:9px 16px 9px 10px;max-width:520px;border:1px solid rgba(110,231,255,.2);border-radius:14px;background:rgba(10,21,38,.62);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.hx-hud img{width:38px;height:38px;border-radius:10px;flex:none}
.hx-hud small{display:block;font:600 .69rem/1.3 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.14em;text-transform:uppercase;color:#6ee7ff}
.hx-hud span{display:block;font-size:.92rem;line-height:1.35;color:#e6eefa;min-height:1.35em}

/* radar + orbiting apps */
.hx-orbit{position:relative;aspect-ratio:1;width:min(100%,480px);margin-inline:auto;--r1:31%;--r2:47%}
.hx-orbit::before{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,rgba(79,182,245,.13),transparent 66%)}
.hx-ring{position:absolute;inset:7%;border:1px dashed rgba(110,231,255,.22);border-radius:50%}
.hx-ring.b{inset:21%;border-style:solid;border-color:rgba(110,231,255,.15)}
.hx-ring.c{inset:34%;border-color:rgba(110,231,255,.11)}
.hx-sweep{position:absolute;inset:7%;border-radius:50%;background:conic-gradient(from 0deg,rgba(110,231,255,.2),rgba(110,231,255,0) 80deg,transparent 360deg);animation:hx-spin 6s linear infinite;-webkit-mask:radial-gradient(circle,#000 69%,transparent 70.5%);mask:radial-gradient(circle,#000 69%,transparent 70.5%)}
.hx-core{position:absolute;left:50%;top:50%;width:21%;aspect-ratio:1;transform:translate(-50%,-50%);display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle at 35% 30%,#17365a,#081426);border:1px solid rgba(110,231,255,.4);box-shadow:0 0 44px rgba(79,182,245,.42),inset 0 0 18px rgba(110,231,255,.16);z-index:2}
.hx-core img{width:64%;height:auto;border-radius:22%}
.hx-fleet{position:absolute;inset:0;list-style:none;margin:0;padding:0;animation:hx-spin 90s linear infinite}
.hx-fleet li{position:absolute;left:50%;top:50%;width:13%;aspect-ratio:1;margin:-6.5% 0 0 -6.5%}
.hx-fleet a{display:block;width:100%;height:100%;border-radius:24%;animation:hx-spin 90s linear infinite reverse;transition:box-shadow .25s ease}
.hx-fleet img{width:100%;height:100%;border-radius:24%;box-shadow:0 10px 26px rgba(0,0,0,.55);transition:transform .25s ease}
.hx-fleet a.on img,.hx-fleet a:hover img,.hx-fleet a:focus-visible img{transform:scale(1.2)}
.hx-fleet a.on{box-shadow:0 0 0 2px #6ee7ff,0 0 26px rgba(110,231,255,.7)}
.hx-orbit:hover .hx-fleet,.hx-orbit:hover .hx-fleet a,.hx-orbit:focus-within .hx-fleet,.hx-orbit:focus-within .hx-fleet a{animation-play-state:paused}
@keyframes hx-spin{to{transform:rotate(360deg)}}

/* readings */
.hx-stats{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;margin-top:30px;border:1px solid rgba(255,255,255,.1);border-radius:16px;overflow:hidden;background:rgba(255,255,255,.08);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.hx-stat{padding:15px 18px;background:rgba(8,17,31,.78)}
.hx-stat .count,.hx-stat b{display:block;font-family:var(--display);font-size:clamp(1.45rem,2.5vw,2.05rem);font-weight:650;font-variant-numeric:tabular-nums;line-height:1.12;letter-spacing:-.02em;color:#fff}
.hx-stat small{display:block;margin-top:3px;font-size:.81rem;line-height:1.3;color:#afc0d6}

/* carrier strip */
.mq{padding:26px 0;overflow:hidden;border-top:1px solid rgba(255,255,255,.07);border-bottom:1px solid rgba(255,255,255,.07)}
.mq-h{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;justify-content:space-between;margin-bottom:16px}
.mq-h h2{font-size:1.03rem;font-weight:600;letter-spacing:0;margin:0}
.mq-h p{margin:0;font-size:.87rem;color:var(--muted)}
.mq-mask{-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);overflow:hidden}
.mq-track{display:flex;width:max-content;animation:mq 44s linear infinite}
.mq:hover .mq-track{animation-play-state:paused}
.mq-track span{padding:0 22px;font-family:var(--display);font-weight:500;font-size:1.12rem;color:#c3d1e4;white-space:nowrap}
@keyframes mq{to{transform:translateX(-50%)}}

/* fleet story */
.fl{padding:96px 0 72px}
.fl-grid{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:48px}
.fl-steps{list-style:none;margin:0;padding:0}
.fl-step{padding:21vh 18px 21vh 24px;border-left:2px solid var(--line);margin:0;transition:border-color .3s ease,background .3s ease}
.fl-step:first-child{padding-top:6vh}.fl-step:last-child{padding-bottom:18vh}
.js .fl-step.on{border-color:var(--brand2)}
.js .fl-step.on h3{color:var(--brand2)}
.fl-step .hd{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.fl-step .hd img{width:58px;height:58px;border-radius:15px;box-shadow:var(--shadow)}
.fl-step h3{font-family:var(--display);font-size:clamp(1.35rem,2.2vw,1.8rem);font-weight:600;letter-spacing:-.02em;margin:0}
.fl-step p{color:var(--muted);font-size:1.08rem;max-width:30em;margin-bottom:12px}
.fl-step .go{font-weight:600}
.fl-inline{display:none}
.fl-stage{position:sticky;top:calc(50vh - 240px);align-self:start}
.fl-browser{border:1px solid var(--line);border-radius:16px;background:var(--card);overflow:hidden;box-shadow:0 30px 70px -18px rgba(8,30,60,.42),0 0 0 1px rgba(79,182,245,.1)}
.fl-bar{display:flex;align-items:center;gap:7px;padding:11px 14px;border-bottom:1px solid var(--line);font-size:.83rem;color:var(--muted)}
.fl-bar i{width:10px;height:10px;border-radius:50%;background:var(--line)}
.fl-bar span{margin-left:8px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.fl-view{position:relative;aspect-ratio:16/9}
.fl-frame{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.025) translateY(8px);transition:opacity .45s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.fl-frame.on{opacity:1;transform:none}
html:not(.js) .fl-frame:first-child{opacity:1;transform:none}
@media (max-width:900px){
  .fl-grid{grid-template-columns:1fr}.fl-stage{display:none}
  .fl-step{padding:0 0 38px;border-left:0}
.js .fl-step.on h3{color:inherit}
  .fl-step:first-child{padding-top:0}.fl-step:last-child{padding-bottom:0}
  .fl-inline{display:block;margin:14px 0 10px;border:1px solid var(--line);border-radius:12px;width:100%;height:auto;box-shadow:var(--shadow)}
}

/* demo */
.de{padding:96px 0;position:relative;overflow:hidden;background:radial-gradient(800px 420px at 90% 0,rgba(124,92,255,.17),transparent 62%),radial-gradient(700px 400px at 0 100%,rgba(79,182,245,.15),transparent 62%),var(--bg)}
.de-box{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:26px;align-items:stretch}
.de-chart,.de-ctl{border:1px solid var(--line);border-radius:18px;background:rgba(14,27,48,.72);padding:22px}
.de-chart svg{display:block;width:100%;height:auto}
.d-bar{fill:#3f6ea3;transition:height .22s ease,y .22s ease,fill .22s ease}
.d-bar.low{fill:#fbbf24}
.d-bar.now{fill:#6ee7ff}
.d-axis{stroke:#30435f;stroke-width:1}
.d-lab{font:12px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;fill:#a9b9cf}
.de-read{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:18px}
.de-read div{padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:rgba(6,13,26,.6)}
.de-read small{display:block;color:var(--muted);font-size:.83rem}
.de-read b{display:block;font-family:var(--display);font-size:1.46rem;font-weight:600;color:#fff;font-variant-numeric:tabular-nums}
.de-read .hero-v b{color:#6ee7ff}.de-read .hero-v.bad b{color:#fca5a5}
.de-ctl label{display:flex;justify-content:space-between;gap:10px;font-weight:600;margin-bottom:6px}
.de-ctl label output{font-family:var(--display);color:#6ee7ff;font-variant-numeric:tabular-nums;white-space:nowrap}
.de-ctl input[type=range]{width:100%;margin:0 0 22px;accent-color:#6ee7ff;height:28px;cursor:grab}
.de-msg{min-height:4.4em;padding:12px 14px;border-left:3px solid #fbbf24;background:rgba(251,191,36,.08);border-radius:0 10px 10px 0;font-size:.95rem;margin:0 0 16px}
.de .note{margin:12px 0 0}
@media (max-width:860px){.de-box{grid-template-columns:1fr}}

/* why bento with cursor spotlight */
.wh{padding:96px 0}
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.bento .spot{grid-column:span 2;min-height:206px;padding:26px}
.bento .spot:nth-child(1),.bento .spot:nth-child(2){grid-column:span 3}
.bento h3{font-family:var(--display);font-size:1.32rem;font-weight:600;letter-spacing:-.015em;margin:0 0 8px}
.bento p{margin:0}
.bento svg{width:40px;height:40px;margin-bottom:18px;stroke:var(--brand2);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:860px){.bento{grid-template-columns:1fr}.bento .spot,.bento .spot:nth-child(1),.bento .spot:nth-child(2){grid-column:auto;min-height:0}}

/* dark laboratory block around the measured results */
.lab .tests-sec,.lab section{background:transparent}
.lab{background:linear-gradient(180deg,#060d1a,#0a1526)}

/* final call */
.end{padding:112px 0;text-align:center;position:relative;overflow:hidden;background:radial-gradient(620px 340px at 50% 110%,rgba(110,231,255,.28),transparent 70%),radial-gradient(800px 320px at 50% -20%,rgba(124,92,255,.16),transparent 70%),var(--bg)}
.end h2{font-size:clamp(2.1rem,5vw,3.7rem);letter-spacing:-.04em;font-weight:680;max-width:17em;margin:8px auto 18px;text-wrap:balance}
.end p{max-width:44em;margin:0 auto 28px;color:var(--muted);font-size:1.08rem}
.end .cta{justify-content:center;margin:0}
.eyebrow{display:inline-block;margin-bottom:12px;font:600 .75rem/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.17em;text-transform:uppercase;color:var(--brand2)}

@media (max-width:980px){
  .hx{padding-top:108px;min-height:0}
  .hx-grid{grid-template-columns:1fr;gap:30px}
  .hx-orbit{width:min(88%,380px)}
  .hx-stats{grid-template-columns:repeat(2,1fr)}
  .hx-stat:last-child{grid-column:1/-1}
}
@media (prefers-reduced-motion:reduce){.fl-frame{transition:none}}

/* orbit positions */
.hx-fleet .p0{transform:translate(0.0%,-330.8%)}
.hx-fleet .p1{transform:translate(178.8%,-278.3%)}
.hx-fleet .p2{transform:translate(300.9%,-137.4%)}
.hx-fleet .p3{transform:translate(327.4%,47.1%)}
.hx-fleet .p4{transform:translate(250.0%,216.6%)}
.hx-fleet .p5{transform:translate(93.2%,317.4%)}
.hx-fleet .p6{transform:translate(-93.2%,317.4%)}
.hx-fleet .p7{transform:translate(-250.0%,216.6%)}
.hx-fleet .p8{transform:translate(-327.4%,47.1%)}
.hx-fleet .p9{transform:translate(-300.9%,-137.4%)}
.hx-fleet .p10{transform:translate(-178.8%,-278.3%)}