/* ===== Tech upgrade ===== */
body::after{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:.28;
  background-image:
    linear-gradient(rgba(72,128,255,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(72,128,255,.08) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:linear-gradient(180deg, transparent 0%, rgba(0,0,0,.9) 10%, rgba(0,0,0,.95) 85%, transparent 100%);
  animation:gridDrift 18s linear infinite;}

.section-grid{position:relative;isolation:isolate}
.section-grid::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.34;
  background:
    radial-gradient(520px 220px at 8% 12%, rgba(45,124,255,.12), transparent 75%),
    radial-gradient(440px 220px at 92% 78%, rgba(0,184,255,.09), transparent 72%),
    linear-gradient(90deg, transparent 0%, rgba(72,128,255,.08) 50%, transparent 100%);
  filter:blur(0px);transition:opacity .45s ease, transform .45s ease;}
.section-grid::after{content:"";position:absolute;left:4%;right:4%;top:0;height:1px;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(70,145,255,.32), rgba(0,184,255,.58), rgba(70,145,255,.32), transparent);
  opacity:.48}
.section-grid.section-active::before{opacity:.52;transform:scale(1.01)}

.hero{overflow:hidden}
.hero::before{content:"";position:absolute;inset:auto -8% 12% auto;width:48vw;min-width:320px;height:48vw;min-height:320px;max-width:760px;max-height:760px;border-radius:50%;
  background:radial-gradient(circle, rgba(0,184,255,.16), rgba(7,105,245,.06) 42%, transparent 72%);
  filter:blur(18px);animation:orbPulse 10s ease-in-out infinite;pointer-events:none;z-index:-1}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;opacity:.15;
  background:linear-gradient(110deg, transparent 15%, rgba(20,83,179,.24) 48%, rgba(0,184,255,.12) 55%, transparent 72%);
  transform:translateX(-35%);animation:heroSweep 11s ease-in-out infinite}

.gradient-text{background-size:220% 220%;animation:gradientShift 8s linear infinite}
.live-chip{box-shadow:0 0 0 0 rgba(0,184,255,.42);animation:chipPulse 2.8s ease-in-out infinite}
.eyebrow-glyph{display:inline-block;animation:softBlink 3s ease-in-out infinite}

.button-primary,.button-outline{position:relative;overflow:hidden}
.button-primary::before,.button-outline::before{content:"";position:absolute;inset:-150% auto -150% -30%;width:42%;transform:rotate(18deg);background:linear-gradient(180deg, transparent, rgba(255,255,255,.18), transparent);animation:buttonSweep 4.8s ease-in-out infinite}
.button-primary{box-shadow:0 12px 32px rgba(7,105,245,.26), 0 0 0 1px rgba(117,173,255,.18) inset;transition:transform .28s ease, box-shadow .28s ease}
.button-primary:hover{transform:translateY(-3px);box-shadow:0 18px 42px rgba(7,105,245,.34), 0 0 0 1px rgba(117,173,255,.28) inset}

.hero-visual{position:relative;overflow:visible}
.visual-frame{will-change:transform;animation:frameFloat 7.5s ease-in-out infinite}
.frame-chrome{position:relative;overflow:hidden}
.frame-chrome::after{content:"";position:absolute;left:-30%;top:0;bottom:0;width:26%;background:linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);transform:skewX(-24deg);animation:chromeSweep 6s ease-in-out infinite}
.frame-chrome small{animation:softBlink 4s ease-in-out infinite}

.tech-orbit{position:absolute;right:-6%;top:10%;width:220px;height:220px;pointer-events:none;z-index:4}
.orbit-ring{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(118,166,255,.22);box-shadow:0 0 22px rgba(0,184,255,.08) inset}
.orbit-ring-one{animation:rotateSlow 16s linear infinite}
.orbit-ring-two{inset:16px;border-style:dashed;opacity:.68;animation:rotateReverse 12s linear infinite}
.orbit-ring-three{inset:34px;border-color:rgba(0,184,255,.24);animation:rotateSlow 9s linear infinite}
.tech-node{position:absolute;width:10px;height:10px;border-radius:50%;background:radial-gradient(circle at 30% 30%, #fff, #89b7ff 40%, #0b55ca 70%);box-shadow:0 0 18px rgba(0,184,255,.75)}
.tech-node.node-one{top:18px;left:48%;animation:nodeFloat 4.2s ease-in-out infinite}
.tech-node.node-two{right:34px;top:45%;animation:nodeFloat 4.8s ease-in-out infinite .4s}
.tech-node.node-three{left:40px;bottom:46px;animation:nodeFloat 4.6s ease-in-out infinite .8s}
.data-pill{position:absolute;display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:14px;border:1px solid rgba(125,171,255,.22);background:linear-gradient(180deg, rgba(10,20,37,.82), rgba(6,13,25,.82));backdrop-filter:blur(10px);box-shadow:0 16px 28px rgba(0,0,0,.28)}
.data-pill strong{font-size:12px;line-height:1;text-transform:uppercase;letter-spacing:.16em;color:#f7fbff}
.data-pill small{font-size:10px;line-height:1;color:#93b8f3;letter-spacing:.18em}
.pill-one{top:-8px;left:-8px;animation:floatTag 6s ease-in-out infinite}
.pill-two{top:84px;right:-26px;animation:floatTag 5.6s ease-in-out infinite .8s}
.pill-three{bottom:4px;left:8px;animation:floatTag 6.3s ease-in-out infinite 1.2s}

.tech-particles{position:absolute;inset:-8%;overflow:hidden;pointer-events:none;z-index:2}
.tech-particle{position:absolute;left:var(--x);top:var(--y);width:var(--size);height:var(--size);border-radius:50%;
  background:radial-gradient(circle at 35% 35%, rgba(255,255,255,.95), rgba(111,171,255,.82) 42%, rgba(0,184,255,.15) 72%, transparent 75%);
  opacity:.8;filter:drop-shadow(0 0 10px rgba(0,184,255,.35));animation:particleFloat var(--duration) ease-in-out infinite var(--delay)}

.feature-card,.segment-card,.value-panel,.compare-card,.economy-panel,.photo-frame,.services-console,.expert-image,.before-card,.after-card{position:relative;overflow:hidden;transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease}
.feature-card::before,.segment-card::before,.value-panel::before,.compare-card::before,.economy-panel::before,.photo-frame::before,.services-console::before,.expert-image::before,.before-card::before,.after-card::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(130deg, transparent 14%, rgba(60,137,255,.1) 45%, rgba(0,184,255,.08) 52%, transparent 74%);transform:translateX(-120%);transition:transform .9s ease}
.feature-card:hover,.segment-card:hover,.value-panel:hover,.compare-card:hover,.economy-panel:hover,.photo-frame:hover,.services-console:hover,.expert-image:hover,.before-card:hover,.after-card:hover{transform:translateY(-8px);box-shadow:0 24px 46px rgba(0,0,0,.26), 0 0 0 1px rgba(116,166,255,.18) inset}
.feature-card:hover::before,.segment-card:hover::before,.value-panel:hover::before,.compare-card:hover::before,.economy-panel:hover::before,.photo-frame:hover::before,.services-console:hover::before,.expert-image:hover::before,.before-card:hover::before,.after-card:hover::before{transform:translateX(120%)}

.chart-grid,.ghost-grid,.kanban-grid{background-size:cover;animation:gridGlow 8s ease-in-out infinite}
.services-console,.service-orbit,.console-metrics,.metric,.retail-status,.retail-metrics{position:relative}
.metric::after,.retail-status::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;background:linear-gradient(90deg, rgba(0,184,255,.0), rgba(0,184,255,.45), rgba(0,184,255,0));opacity:.55}
.console-metrics .metric{animation:metricLift 5.2s ease-in-out infinite}
.console-metrics .metric:nth-child(2){animation-delay:.35s}
.console-metrics .metric:nth-child(3){animation-delay:.7s}
.console-metrics .metric:nth-child(4){animation-delay:1.05s}
.service-orbit{animation:rotateSlow 22s linear infinite}
.status-dot{box-shadow:0 0 0 0 rgba(51,211,154,.48);animation:statusPulse 2.2s ease-in-out infinite}

.reveal{opacity:0;transform:translateY(32px) scale(.985);filter:blur(8px);transition:opacity .9s cubic-bezier(.2,.8,.2,1), transform .9s cubic-bezier(.2,.8,.2,1), filter .9s cubic-bezier(.2,.8,.2,1)}
.reveal.in-view{opacity:1;transform:none;filter:none}
.reveal-delay-1{transition-delay:.08s}
.reveal-delay-2{transition-delay:.16s}
.reveal-delay-3{transition-delay:.24s}

.site-header.scrolled .nav-shell{box-shadow:0 10px 34px rgba(0,0,0,.28), 0 0 0 1px rgba(123,169,255,.14) inset}
.nav-shell{transition:box-shadow .28s ease, background .28s ease, border-color .28s ease}
.nav-shell::after{content:"";position:absolute;left:12px;right:12px;bottom:0;height:1px;background:linear-gradient(90deg, transparent, rgba(0,184,255,.2), transparent);opacity:.55}

@keyframes gradientShift{0%{background-position:0% 50%}100%{background-position:200% 50%}}
@keyframes chipPulse{0%,100%{box-shadow:0 0 0 0 rgba(0,184,255,.12)}50%{box-shadow:0 0 0 10px rgba(0,184,255,0)}}
@keyframes softBlink{0%,100%{opacity:1}50%{opacity:.7}}
@keyframes buttonSweep{0%,100%{transform:translateX(-170%) rotate(18deg)}45%,60%{transform:translateX(340%) rotate(18deg)}}
@keyframes frameFloat{0%,100%{transform:translateY(0px)}50%{transform:translateY(-10px)}}
@keyframes chromeSweep{0%,100%{transform:translateX(-150%) skewX(-24deg)}45%,58%{transform:translateX(520%) skewX(-24deg)}}
@keyframes rotateSlow{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes rotateReverse{from{transform:rotate(360deg)}to{transform:rotate(0deg)}}
@keyframes nodeFloat{0%,100%{transform:translateY(0px) scale(1)}50%{transform:translateY(-6px) scale(1.08)}}
@keyframes floatTag{0%,100%{transform:translateY(0px)}50%{transform:translateY(-8px)}}
@keyframes particleFloat{0%,100%{transform:translate3d(0,0,0) scale(.92);opacity:.35}50%{transform:translate3d(var(--travel-x), calc(var(--travel-y) * -1), 0) scale(1.15);opacity:.95}}
@keyframes heroSweep{0%,100%{transform:translateX(-35%)}50%{transform:translateX(40%)}}
@keyframes orbPulse{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.08);opacity:1}}
@keyframes gridDrift{0%{transform:translate3d(0,0,0)}100%{transform:translate3d(56px,56px,0)}}
@keyframes statusPulse{0%,100%{box-shadow:0 0 0 0 rgba(51,211,154,.34)}50%{box-shadow:0 0 0 10px rgba(51,211,154,0)}}
@keyframes metricLift{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes gridGlow{0%,100%{filter:brightness(1)}50%{filter:brightness(1.1)}}

@media (max-width: 1100px){
  .tech-orbit{right:-4%;top:6%;width:180px;height:180px}
  .pill-two{right:-10px}
}
@media (max-width: 860px){
  body::after{background-size:40px 40px}
  .tech-orbit{display:none}
  .hero::before{width:72vw;height:72vw;right:-18vw;top:auto;bottom:14%}
}
@media (prefers-reduced-motion: reduce){
  body::after,.hero::before,.hero::after,.gradient-text,.live-chip,.eyebrow-glyph,.button-primary::before,.button-outline::before,.visual-frame,.frame-chrome::after,.orbit-ring,.tech-node,.data-pill,.tech-particle,.chart-grid,.ghost-grid,.kanban-grid,.console-metrics .metric,.service-orbit,.status-dot{animation:none !important}
  .reveal{transition:none;opacity:1;transform:none;filter:none}
}