/* Fleet Manager — page-specific layout */
body{--accent:var(--red)}
.glow span:nth-child(1){left:-6%;top:4%;width:520px;height:520px;background:radial-gradient(circle,#ec2024,transparent 70%)}
.glow span:nth-child(2){right:-8%;top:38%;width:560px;height:560px;background:radial-gradient(circle,#2b1c5e,transparent 70%);opacity:.22}

/* ---- hero node stage: floating node + notification cards ---- */
.nodestage{position:relative;aspect-ratio:1.15/1;max-width:560px;margin:0 auto;isolation:isolate}
.nodestage::before{content:'';position:absolute;inset:8% 4%;background:radial-gradient(ellipse at 50% 60%,rgba(0,229,232,.16),transparent 62%);filter:blur(24px);z-index:0}
.nodestage .node{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .45s ease;z-index:1;
  animation:nodefloat 4s ease-in-out infinite}
.nodestage .node img{width:100%;height:auto;filter:drop-shadow(0 30px 40px rgba(0,0,0,.55))}
.nodestage .node.on{opacity:1}
@keyframes nodefloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.nodestage .notif{position:absolute;right:-2%;bottom:6%;width:min(52%,300px);z-index:3;opacity:0;transform:translateX(18px) translateY(4px);
  transition:opacity .3s ease,transform .3s cubic-bezier(.2,.8,.2,1);filter:drop-shadow(0 18px 34px rgba(0,0,0,.6))}
.nodestage .notif.in{opacity:1;transform:none}
.nodestage .notif img{width:100%;height:auto}
.nodestage .legend{display:none}
.nodestage.static .node[data-state="healthy"]{opacity:1;animation:none}
.nodestage.static .notif{display:none}
.nodestage.static .legend{display:flex;gap:8px;justify-content:center;position:absolute;left:0;right:0;bottom:0;z-index:3}
.nodestage.static .legend img{width:32%;height:auto}
@media (max-width:860px){.nodestage{max-width:440px}.nodestage .notif{right:0;width:56%}}

/* ---- Fleet 1.0 bento: one uniform gutter, engineering draft the smallest tile ---- */
.bento1{--g:16px;display:grid;grid-template-columns:repeat(12,1fr);gap:var(--g);margin-top:30px}
.bento1 .hud{aspect-ratio:16/10}
.bento1 .a{grid-column:span 4;aspect-ratio:auto;align-self:stretch}
.bento1 .b{grid-column:span 8}
.bento1 .c{grid-column:span 6}.bento1 .d{grid-column:span 6}
/* dense table screenshot: fill the tile but anchor the crop where the content actually reads */
.bento1 .a img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top left}
.bento1 .hud img{transition:transform .6s ease}
.bento1 .hud:hover img{transform:scale(1.03)}
@media (max-width:760px){.bento1{--g:12px;grid-template-columns:1fr 1fr}.bento1 .a{grid-column:span 1;aspect-ratio:16/10;align-self:auto}.bento1 .b{grid-column:span 1}.bento1 .c,.bento1 .d{grid-column:span 2}}
@media (max-width:560px){.bento1{grid-template-columns:1fr}.bento1 .a,.bento1 .b,.bento1 .c,.bento1 .d{grid-column:1}}

/* ---- shipped: navy-framed floating icon + marketing key ---- */
.shipped{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(24px,5vw,64px);align-items:center;margin-top:30px}
.iconcard{position:relative;aspect-ratio:1;border-radius:18px;display:grid;place-items:center;
  background:radial-gradient(ellipse at 50% 45%,#0f1a3a 0%,#0a1024 55%,#070b18 100%);
  border:1px solid rgba(56,120,248,.28);box-shadow:inset 0 0 0 1px rgba(0,0,0,.4),inset 0 0 60px rgba(30,64,175,.25),0 30px 70px -30px rgba(0,0,0,.8)}
.iconcard::before,.iconcard::after{content:'';position:absolute;width:26px;height:26px;border:1.5px solid rgba(96,165,250,.45)}
.iconcard::before{top:14px;left:14px;border-right:0;border-bottom:0}
.iconcard::after{bottom:14px;right:14px;border-left:0;border-top:0}
.iconcard img{width:68%;height:auto;filter:drop-shadow(0 26px 34px rgba(0,0,0,.65)) drop-shadow(0 0 30px rgba(59,130,246,.25));animation:iconfloat 4.4s ease-in-out infinite}
@keyframes iconfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.shipped .key img{filter:drop-shadow(0 30px 60px rgba(0,0,0,.6))}
@media (max-width:860px){.shipped{grid-template-columns:1fr}.iconcard{max-width:360px;margin:0 auto;width:100%}}

/* ---- 2.0 text bridge into the slider ---- */
.sec.two{max-width:760px;margin-left:auto;margin-right:auto}
.sec.two .lede{max-width:680px}
.sec.two .lede+.lede{margin-top:18px}
.cmp-sec{margin-top:clamp(28px,4vh,44px)}