/* Ultra Datastream field - hero/journey/hardware ambient renderer styles
   Served from UltraCDN. Bump ?v= in index.html on changes. */
/* --- Datastream background: spans hero + journey --- */
#ultra-v4 .uds-stream-wrap{position:relative}
#ultra-v4 .uds-stream-wrap > section{position:relative;z-index:1}
#ultra-v4 .uds-hero-bg{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(55% 40% at 78% 6%,rgba(120,190,255,.30),transparent 65%),
             linear-gradient(180deg,#1b6abe 0%,#0d4d89 100%)}
html:not([data-theme="light"]) #ultra-v4 .uds-hero-bg{
  background:radial-gradient(55% 40% at 78% 6%,rgba(30,80,150,.45),transparent 65%),
             linear-gradient(180deg,#08152b 0%,#050d1a 100%)}
#ultra-v4 .uds-hero-bg canvas{position:sticky;top:0;display:block;width:100%;height:100vh}
/* readability scrim: light at the hero, gradually heavier through the journey */
#ultra-v4 .uds-hero-bg::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,
    rgba(8,38,72,.18) 0%,rgba(8,38,72,0) 14%,
    rgba(8,38,72,.04) 38%,rgba(8,38,72,.26) 52%,
    rgba(8,38,72,.32) 74%,rgba(8,38,72,.45) 100%)}
html:not([data-theme="light"]) #ultra-v4 .uds-hero-bg::after{
  background:linear-gradient(180deg,
    rgba(6,16,31,.28) 0%,rgba(6,16,31,0) 14%,
    rgba(6,16,31,.05) 38%,rgba(6,16,31,.40) 52%,
    rgba(6,16,31,.48) 74%,rgba(6,16,31,.66) 100%)}
#ultra-v4 .hero-slider{position:relative;overflow:hidden;
  background:transparent !important;background-image:none !important}
html[data-theme="light"] #ultra-v4 .hero-slider{background:transparent !important}
#ultra-v4 .hero-slider::before,
#ultra-v4 .hero-slider::after{display:none !important}
#ultra-v4 .hero-slider .hero-slide{background:transparent !important;background-image:none !important}
html #ultra-v4 .hero-slider .hero-slide.slide-1,
html #ultra-v4 .hero-slider .hero-slide.slide-2,
html #ultra-v4 .hero-slider .hero-slide.slide-3,
html[data-theme="light"] #ultra-v4 .hero-slider .hero-slide.slide-1,
html[data-theme="light"] #ultra-v4 .hero-slider .hero-slide.slide-2,
html[data-theme="light"] #ultra-v4 .hero-slider .hero-slide.slide-3{
  background:transparent !important;background-image:none !important}
#ultra-v4 .hero-badge.ai{color:#8ec5ff !important;
  border-color:rgba(120,180,250,.45) !important;
  background:rgba(33,150,243,.10) !important}
#ultra-v4 .hero-badge.ai i{color:#8ec5ff !important}
#ultra-v4 .hero-slider .hero-slide::before,
#ultra-v4 .hero-slider .hero-slide::after{display:none !important}
#ultra-v4 .hero-slider .hero-slide .shell{position:relative;z-index:2}
#ultra-v4 .hero-slider .hero-arrows,
#ultra-v4 .hero-slider .hero-controls{z-index:3}

/* --- Journey + Hardware sections --- */
#ultra-v4 .journey,#ultra-v4 .hardware{padding:90px 0}
#ultra-v4 .journey-grid{display:grid;grid-template-columns:1fr 1fr;gap:44px;margin-top:48px;align-items:start}
#ultra-v4 .uds-layers{display:flex;flex-direction:column;gap:10px}
#ultra-v4 .uds-layer{text-align:left;width:100%;display:flex;align-items:center;gap:16px;
  background:#ffffff;border:1px solid #e3e9f2;border-radius:10px;padding:16px 20px;
  color:#1c2b3a;cursor:pointer;font-family:inherit;font-size:15px;
  transition:transform .25s,border-color .25s,box-shadow .25s,background .25s}
#ultra-v4 .uds-layer:hover{transform:translateX(6px)}
#ultra-v4 .uds-layer.active{border-color:#1a7fd4;box-shadow:0 0 0 1px #1a7fd4,0 10px 32px rgba(26,127,212,.14)}
#ultra-v4 .uds-layer .idx{font-family:SFMono-Regular,Consolas,'Liberation Mono',monospace;
  font-size:12px;color:#8aa0bd;width:30px;flex-shrink:0}
#ultra-v4 .uds-layer.active .idx{color:#1a7fd4}
#ultra-v4 .uds-layer .l-name{font-weight:700;font-size:15.5px}
#ultra-v4 .uds-layer .l-ms{margin-left:auto;font-family:SFMono-Regular,Consolas,'Liberation Mono',monospace;
  font-size:12.5px;color:#f7941e;flex-shrink:0}
#ultra-v4 .uds-journey-detail{position:sticky;top:120px;background:#ffffff;border:1px solid #e3e9f2;
  border-radius:12px;padding:32px;min-height:320px;display:flex;flex-direction:column;
  box-shadow:0 14px 40px rgba(12,25,41,.08)}
#ultra-v4 .uds-jd-tag{font-size:11.5px;letter-spacing:.14em;color:#1a7fd4;text-transform:uppercase;font-weight:600}
#ultra-v4 .uds-jd-title{font-size:24px;font-weight:800;margin:10px 0 12px;color:#1c2b3a}
#ultra-v4 .uds-jd-body{color:#5b6b85;font-size:15.5px;line-height:1.65}
#ultra-v4 .uds-ttfb{margin-top:auto;padding-top:28px}
#ultra-v4 .uds-ttfb-label{display:flex;justify-content:space-between;
  font-family:SFMono-Regular,Consolas,'Liberation Mono',monospace;font-size:11.5px;color:#8aa0bd;margin-bottom:9px}
#ultra-v4 .uds-ttfb-label b{color:#1c2b3a;font-size:13.5px}
#ultra-v4 .uds-ttfb-track{height:9px;border-radius:5px;background:#e8eef6;overflow:hidden;border:1px solid #dbe4ef}
#ultra-v4 .uds-ttfb-fill{height:100%;width:0%;border-radius:5px;
  background:linear-gradient(90deg,#1a7fd4,#f7941e);transition:width .6s cubic-bezier(.2,.8,.2,1)}

#ultra-v4 .hardware-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;margin-top:48px;align-items:center}
#ultra-v4 .uds-hw-points{display:grid;gap:14px;margin-top:8px}
#ultra-v4 .uds-hw-point{display:flex;gap:14px;align-items:flex-start;text-align:left}
#ultra-v4 .uds-hw-point .dot{width:8px;height:8px;border-radius:50%;background:#f7941e;margin-top:9px;flex-shrink:0}
#ultra-v4 .uds-hw-point b{display:block;font-size:15.5px;color:#1c2b3a}
#ultra-v4 .uds-hw-point span{color:#5b6b85;font-size:14.5px;line-height:1.6}
#ultra-v4 .uds-fleet{background:#0c1929;border:1px solid #1c2c4a;border-radius:12px;padding:24px;
  font-family:SFMono-Regular,Consolas,'Liberation Mono',monospace;font-size:12.5px;
  box-shadow:0 20px 50px rgba(12,25,41,.25);text-align:left}
#ultra-v4 .uds-fleet-head{display:flex;align-items:center;gap:8px;padding-bottom:14px;margin-bottom:14px;
  border-bottom:1px solid #1c2c4a;color:#7d93b8;font-size:11.5px;letter-spacing:.1em}
#ultra-v4 .uds-fleet-head .led{width:9px;height:9px;border-radius:50%}
#ultra-v4 .uds-fleet ul{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:9px 22px;margin:0;padding:0}
#ultra-v4 .uds-fleet li{display:flex;align-items:center;gap:9px;color:#a9c2e8}
#ultra-v4 .uds-fleet li::before{content:'';width:7px;height:7px;border-radius:50%;background:#34e29a;
  box-shadow:0 0 8px rgba(52,226,154,.7);animation:uds-pulse 2.6s infinite}
#ultra-v4 .uds-fleet li:nth-child(3n)::before{animation-delay:.9s}
#ultra-v4 .uds-fleet li:nth-child(3n+1)::before{animation-delay:1.7s}
#ultra-v4 .uds-fleet li small{margin-left:auto;color:#7d93b8}
#ultra-v4 .uds-fleet-note{margin-top:14px;font-size:10.5px;color:#5e759c;letter-spacing:.04em}
@keyframes uds-pulse{0%,100%{opacity:1}50%{opacity:.45}}

/* --- dark mode overrides (attribute absent = dark) --- */
html:not([data-theme="light"]) #ultra-v4 .uds-layer{background:#162a42;border-color:rgba(255,255,255,.1);color:#fff}
html:not([data-theme="light"]) #ultra-v4 .uds-layer.active{border-color:#1a7fd4;background:#1a3050;
  box-shadow:0 0 0 1px #1a7fd4,0 10px 32px rgba(26,127,212,.18)}
html:not([data-theme="light"]) #ultra-v4 .uds-layer .idx{color:rgba(255,255,255,.4)}
html:not([data-theme="light"]) #ultra-v4 .uds-layer.active .idx{color:#4da6e8}
html:not([data-theme="light"]) #ultra-v4 .uds-journey-detail{background:#162a42;border-color:rgba(255,255,255,.1);
  box-shadow:0 14px 40px rgba(0,0,0,.35)}
html:not([data-theme="light"]) #ultra-v4 .uds-jd-tag{color:#4da6e8}
html:not([data-theme="light"]) #ultra-v4 .uds-jd-title{color:#fff}
html:not([data-theme="light"]) #ultra-v4 .uds-jd-body{color:rgba(255,255,255,.7)}
html:not([data-theme="light"]) #ultra-v4 .uds-ttfb-label{color:rgba(255,255,255,.4)}
html:not([data-theme="light"]) #ultra-v4 .uds-ttfb-label b{color:#fff}
html:not([data-theme="light"]) #ultra-v4 .uds-ttfb-track{background:#0f1c2e;border-color:rgba(255,255,255,.1)}
html:not([data-theme="light"]) #ultra-v4 .uds-hw-point b{color:#fff}
html:not([data-theme="light"]) #ultra-v4 .uds-hw-point span{color:rgba(255,255,255,.7)}

/* --- responsive --- */
@media(max-width:900px){
  #ultra-v4 .journey-grid,#ultra-v4 .hardware-grid{grid-template-columns:1fr}
  #ultra-v4 .uds-journey-detail{position:static}
}
@media(max-width:480px){
  #ultra-v4 .uds-fleet ul{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  #ultra-v4 .uds-fleet li::before{animation:none}
}

/* --- Taller hero so the datastream breathes --- */
#ultra-v4 .hero-slider{min-height:min(85vh,820px)}
#ultra-v4 .hero-slider .hero-slide.active{display:flex;align-items:center;min-height:min(85vh,820px)}
#ultra-v4 .hero-slider .hero-slide.active .shell{width:100%}
@media(max-width:760px){
  #ultra-v4 .hero-slider,
  #ultra-v4 .hero-slider .hero-slide.active{min-height:0}
}

/* --- Light mode: journey sits directly on the datastream canvas --- */
[data-theme="light"] #ultra-v4 .journey{background:transparent}
[data-theme="light"] #ultra-v4 .journey .section-head .eyebrow{color:#ffd9a8 !important}
[data-theme="light"] #ultra-v4 .journey .section-head h2{color:#fff !important}
[data-theme="light"] #ultra-v4 .journey .section-head p{color:rgba(255,255,255,.8) !important}
[data-theme="light"] #ultra-v4 .uds-layer{border-color:#d3e4f6}
[data-theme="light"] #ultra-v4 .uds-layer:hover{border-color:#9cc6ec}
[data-theme="light"] #ultra-v4 .uds-journey-detail{border-color:#d3e4f6;border-top:3px solid #1a7fd4}
[data-theme="light"] #ultra-v4 .uds-ttfb-track{background:#dcebfa;border-color:#c8ddf2}

/* --- Light mode: hardware becomes a brand-blue band,
       mirroring the feature_section1 light treatment --- */
[data-theme="light"] #ultra-v4 .hardware{background:transparent}
[data-theme="light"] #ultra-v4 .hardware .section-head .eyebrow{color:#ffd9a8 !important}
[data-theme="light"] #ultra-v4 .hardware .section-head h2{color:#fff !important}
[data-theme="light"] #ultra-v4 .hardware .section-head p{color:rgba(255,255,255,.78) !important}
[data-theme="light"] #ultra-v4 .hardware .uds-hw-point b{color:#fff}
[data-theme="light"] #ultra-v4 .hardware .uds-hw-point span{color:rgba(255,255,255,.75)}
[data-theme="light"] #ultra-v4 .hardware .uds-hw-point .dot{background:#ffb347}
[data-theme="light"] #ultra-v4 .hardware .uds-fleet{
  border-color:rgba(255,255,255,.22);
  box-shadow:0 20px 50px rgba(8,30,56,.45)}

/* secondary hero CTAs: brighter outline against the dark field */
html:not([data-theme="light"]) #ultra-v4 .hero-slide .cta-secondary{
  border-color:rgba(255,255,255,.42) !important;
  background:rgba(255,255,255,.05) !important}
html:not([data-theme="light"]) #ultra-v4 .hero-slide .cta-secondary:hover{
  border-color:rgba(255,255,255,.65) !important;
  background:rgba(255,255,255,.10) !important}