/* QBalance live landing-page enhancement — loaded after the compiled application CSS. */
:root {
  --qb-enhance-navy: #071b48;
  --qb-enhance-blue: #2e83f4;
  --qb-enhance-ink: #12213c;
  --qb-enhance-mist: #eef5ff;
}

#hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 650px;
  background: #071b48;
}

#hero::before {
  position: absolute;
  z-index: -2;
  inset: 0;
  content: "";
  background:
    linear-gradient(90deg, rgba(7, 27, 72, 0.98) 0%, rgba(7, 27, 72, 0.9) 34%, rgba(7, 27, 72, 0.45) 63%, rgba(7, 27, 72, 0.28) 100%),
    linear-gradient(0deg, rgba(7, 27, 72, 0.7), transparent 48%),
    url("/media/microgrid-campus-hero-20260728.png") center / cover no-repeat;
}

#hero::after {
  position: absolute;
  z-index: -1;
  inset: auto -10vw -16rem auto;
  width: 42rem;
  height: 42rem;
  content: "";
  opacity: 0.35;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(58, 142, 255, 0.46), transparent 67%);
  filter: blur(2px);
}

#hero .qb-section-inner {
  position: relative;
  z-index: 1;
  min-height: 520px;
  padding-right: clamp(0px, 4vw, 80px);
}

#hero .qb-h1 {
  max-width: 650px;
  color: #fff;
  text-wrap: balance;
  text-shadow: 0 3px 24px rgba(0, 0, 0, 0.22);
}

#hero .qb-lead {
  max-width: 570px;
  color: rgba(238, 247, 255, 0.88);
  text-wrap: pretty;
}

#hero .qb-card {
  border-color: rgba(174, 215, 255, 0.4);
  background: rgba(7, 29, 74, 0.7);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(10px);
}

#hero .qb-btn-primary {
  box-shadow: 0 10px 28px rgba(35, 127, 244, 0.36);
}

.qb-enhance-hero {
  display: none;
}

.qb-energy-routes {
  position: absolute;
  z-index: 0;
  right: -3rem;
  bottom: -2.5rem;
  width: min(48vw, 610px);
  height: 330px;
  overflow: hidden;
  opacity: 0.88;
  pointer-events: none;
}

.qb-energy-route {
  position: absolute;
  display: block;
  width: 94%;
  height: 104px;
  border: 1px solid rgba(145, 214, 255, 0.3);
  border-left-color: transparent;
  border-radius: 999px;
  transform: rotate(-20deg);
}

.qb-energy-route::before,
.qb-energy-route::after {
  position: absolute;
  top: 50%;
  width: 14px;
  height: 14px;
  content: "";
  border-radius: 50%;
  background: #9ae0ff;
  box-shadow: 0 0 0 5px rgba(94, 194, 255, 0.12), 0 0 20px rgba(124, 219, 255, 0.95);
  transform: translateY(-50%);
  animation: qb-route-packet 2.8s cubic-bezier(0.35, 0.05, 0.25, 1) infinite;
}

.qb-energy-route::after {
  width: 7px;
  height: 7px;
  background: #fff2ae;
  box-shadow: 0 0 14px rgba(255, 234, 132, 0.95);
  animation-delay: 1.35s;
}

.qb-energy-route-a { top: 22px; left: 25px; }
.qb-energy-route-b { top: 104px; left: 78px; opacity: 0.72; transform: rotate(-20deg) scaleX(0.84); }
.qb-energy-route-c { top: 184px; left: 22px; opacity: 0.5; transform: rotate(-20deg) scaleX(0.7); }

#scenarios {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #e8f0fe 0%, #f8fbff 100%);
}

#scenarios::before {
  position: absolute;
  width: min(760px, 72vw);
  height: 470px;
  right: -290px;
  top: 140px;
  content: "";
  opacity: 0.13;
  background: url("/media/microgrid-campus-hero-20260728.png") center / cover no-repeat;
  transform: rotate(-8deg);
  border-radius: 36px;
}

#scenarios .qb-section-inner {
  position: relative;
}

.qb-decision-board {
  position: relative;
  margin: 0 0 2.4rem;
  padding: clamp(1.1rem, 3vw, 1.8rem);
  overflow: hidden;
  color: #f5f9ff;
  border: 1px solid rgba(58, 131, 244, 0.36);
  border-radius: 16px;
  background:
    radial-gradient(circle at 83% 15%, rgba(67, 163, 255, 0.28), transparent 38%),
    linear-gradient(128deg, #0d2e6b, #0a1f50 62%, #081a42);
  box-shadow: 0 18px 44px rgba(20, 60, 130, 0.16);
}

.qb-decision-board::after {
  position: absolute;
  top: -110px;
  right: -50px;
  width: 230px;
  height: 230px;
  content: "";
  border: 1px solid rgba(163, 222, 255, 0.18);
  border-radius: 50%;
  box-shadow: 0 0 0 32px rgba(163, 222, 255, 0.045), 0 0 0 64px rgba(163, 222, 255, 0.03);
  animation: qb-board-orbit 8s linear infinite;
}

.qb-decision-board h3 {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 0 0 0.55rem;
  color: #fff;
  font-size: clamp(1.14rem, 2.5vw, 1.5rem);
  line-height: 1.42;
}

.qb-decision-board > p {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 0;
  color: rgba(231, 244, 255, 0.78);
  font-size: 0.92rem;
  line-height: 1.75;
}

.qb-decision-flow {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 62px minmax(0, 1fr) 62px minmax(0, 1fr);
  align-items: stretch;
  gap: 0.55rem;
  margin-top: 1.35rem;
}

.qb-decision-step {
  min-height: 138px;
  padding: 1rem;
  border: 1px solid rgba(181, 221, 255, 0.26);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.075);
  backdrop-filter: blur(6px);
}

.qb-decision-step strong,
.qb-decision-step span {
  display: block;
}

.qb-decision-step strong {
  margin-bottom: 0.55rem;
  color: #9ee0ff;
  font-size: 0.9rem;
}

.qb-decision-step span {
  color: rgba(243, 249, 255, 0.86);
  font-size: 0.86rem;
  line-height: 1.68;
}

.qb-decision-link {
  position: relative;
  align-self: center;
  height: 2px;
  overflow: hidden;
  background: rgba(160, 213, 255, 0.24);
}

.qb-decision-link::after {
  position: absolute;
  inset: -3px auto -3px -28%;
  width: 28%;
  content: "";
  border-radius: 999px;
  background: #a7e6ff;
  box-shadow: 0 0 15px #a7e6ff;
  animation: qb-decision-packet 2.3s ease-in-out infinite;
}

.qb-decision-link-b::after { animation-delay: 0.68s; }

#scenarios .qb-h2,
#use-cases .qb-h2 {
  max-width: 760px;
  text-wrap: balance;
}

.qb-enhance-scene {
  display: grid;
  grid-template-columns: minmax(190px, 0.78fr) minmax(0, 1.7fr);
  gap: clamp(1.1rem, 2.5vw, 2rem);
  align-items: stretch;
  margin: -0.15rem 0 1.5rem;
  padding: 1rem;
  color: var(--qb-enhance-ink);
  border: 1px solid #d9e7fa;
  border-radius: 14px;
  background: linear-gradient(135deg, #f5f9ff, #fff 74%);
  box-shadow: 0 13px 32px rgba(38, 92, 170, 0.1);
}

.qb-enhance-scene-visual {
  position: relative;
  min-height: 225px;
  margin: 0;
  overflow: hidden;
  border-radius: 10px;
  background: var(--qb-enhance-navy);
}

.qb-enhance-scene-visual::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(180deg, transparent 42%, rgba(4, 18, 53, 0.88) 100%);
}

.qb-enhance-scene-visual img {
  width: 100%;
  height: 100%;
  min-height: 225px;
  object-fit: cover;
  object-position: 68% center;
}

.qb-enhance-scene-visual figcaption {
  position: absolute;
  z-index: 1;
  right: 0.9rem;
  bottom: 0.7rem;
  left: 0.9rem;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.73rem;
  line-height: 1.45;
}

.qb-enhance-scene-copy {
  padding: 0.2rem 0.3rem;
}

.qb-enhance-scene-kicker {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.45rem;
  color: #4f6e9d;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}

.qb-enhance-scene-kicker span {
  display: inline-grid;
  width: 2.15rem;
  height: 1.5rem;
  place-items: center;
  color: #fff;
  border-radius: 999px;
  background: var(--qb-enhance-blue);
  box-shadow: 0 5px 12px rgba(46, 131, 244, 0.25);
}

.qb-enhance-scene h3 {
  margin: 0 0 0.9rem;
  color: #10264d;
  font-size: clamp(1.08rem, 2vw, 1.35rem);
  line-height: 1.35;
}

.qb-enhance-scene dl {
  display: grid;
  gap: 0.55rem;
  margin: 0;
}

.qb-enhance-scene dl > div {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: 0.65rem;
  align-items: baseline;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid #e6edf8;
}

.qb-enhance-scene dl > div:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.qb-enhance-scene dt {
  color: #2769bd;
  font-weight: 700;
  font-size: 0.8rem;
}

.qb-enhance-scene dd {
  margin: 0;
  color: #52617b;
  font-size: 0.89rem;
  line-height: 1.65;
}

#use-cases .uc-grid > article {
  position: relative;
  overflow: hidden;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

#use-cases .uc-grid > article::after {
  position: absolute;
  right: -32px;
  bottom: -38px;
  width: 145px;
  height: 100px;
  content: "";
  opacity: 0.11;
  background: url("/media/microgrid-campus-hero-20260728.png") right bottom / 260px auto no-repeat;
  transform: rotate(-5deg);
  pointer-events: none;
}

#use-cases .uc-grid > article:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(24, 67, 132, 0.12);
}

@keyframes qb-hero-drift {
  from { transform: scale(1.015) translate3d(-0.35%, 0, 0); }
  to { transform: scale(1.07) translate3d(0.55%, -0.5%, 0); }
}

@keyframes qb-glow-pulse {
  0%, 100% { opacity: 0.22; transform: scale(0.94); }
  50% { opacity: 0.52; transform: scale(1.08); }
}

@keyframes qb-energy-flow {
  from { transform: translateX(-22%) scaleX(0.6); opacity: 0; }
  20% { opacity: 0.68; }
  70% { opacity: 0.68; }
  to { transform: translateX(160%) scaleX(1); opacity: 0; }
}

@keyframes qb-panel-float {
  0%, 100% { transform: translateY(0); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18); }
  50% { transform: translateY(-5px); box-shadow: 0 30px 72px rgba(0, 0, 0, 0.24); }
}

@keyframes qb-scene-in {
  from { opacity: 0; transform: translateY(12px) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes qb-image-drift {
  0%, 100% { transform: scale(1.015) translate3d(-0.45%, 0, 0); }
  50% { transform: scale(1.07) translate3d(0.7%, -0.55%, 0); }
}

@keyframes qb-tab-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(46, 131, 244, 0); }
  45% { box-shadow: 0 0 0 7px rgba(46, 131, 244, 0.15); }
}

@keyframes qb-route-packet {
  0% { left: 2%; opacity: 0; transform: translateY(-50%) scale(0.5); }
  12% { opacity: 1; }
  82% { opacity: 1; }
  100% { left: 96%; opacity: 0; transform: translateY(-50%) scale(1); }
}

@keyframes qb-decision-packet {
  0% { transform: translateX(0); opacity: 0; }
  12% { opacity: 1; }
  80% { opacity: 1; }
  100% { transform: translateX(470%); opacity: 0; }
}

@keyframes qb-board-orbit {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

#hero::before {
  animation: qb-hero-drift 13s ease-in-out infinite alternate;
  transform-origin: 72% 56%;
}

#hero::after {
  animation: qb-glow-pulse 4.5s ease-in-out infinite;
}

#hero .qb-section-inner::before {
  position: absolute;
  right: 2%;
  bottom: 4.75rem;
  width: clamp(180px, 30vw, 390px);
  height: 2px;
  content: "";
  opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(103, 201, 255, 0.15) 15%, #8cd7ff 48%, rgba(103, 201, 255, 0.15) 82%, transparent);
  box-shadow: 0 0 10px rgba(112, 205, 255, 0.9), 0 0 26px rgba(53, 141, 255, 0.52);
  animation: qb-energy-flow 3.1s ease-in-out infinite;
  pointer-events: none;
}

#hero .qb-card {
  animation: qb-panel-float 4.8s ease-in-out infinite;
}

.qb-enhance-scene {
  animation: qb-scene-in 460ms cubic-bezier(0.22, 0.9, 0.24, 1) both;
}

.qb-enhance-scene-visual img {
  animation: qb-image-drift 7.2s ease-in-out infinite;
}

.qb-enhance-scene[data-scene="S2"] .qb-enhance-scene-visual img { object-position: 56% center; }
.qb-enhance-scene[data-scene="S3"] .qb-enhance-scene-visual img { object-position: 78% center; }
.qb-enhance-scene[data-scene="S4"] .qb-enhance-scene-visual img { object-position: 64% center; }
.qb-enhance-scene[data-scene="S5"] .qb-enhance-scene-visual img { object-position: 87% center; }

#scenarios .qbsc-tabs button {
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

#scenarios .qbsc-tabs button:hover {
  transform: translateY(-3px);
  box-shadow: 0 11px 22px rgba(36, 95, 181, 0.16);
}

#scenarios .qbsc-tabs button[aria-pressed="true"] {
  animation: qb-tab-pulse 1.35s ease-out infinite;
}

.qb-motion-enabled .qb-motion-target {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 700ms ease, transform 700ms cubic-bezier(0.22, 0.9, 0.24, 1);
}

.qb-motion-enabled .qb-motion-target.qb-motion-in {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  #hero::before,
  #hero::after,
  #hero .qb-section-inner::before,
  #hero .qb-card,
  .qb-energy-route::before,
  .qb-energy-route::after,
  .qb-decision-board::after,
  .qb-decision-link::after,
  .qb-enhance-scene,
  .qb-enhance-scene-visual img,
  #scenarios .qbsc-tabs button[aria-pressed="true"] {
    animation: none !important;
  }

  .qb-motion-enabled .qb-motion-target,
  .qb-motion-enabled .qb-motion-target.qb-motion-in {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.qb-motion-toggle {
  position: absolute;
  top: 1.15rem;
  right: 0;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 0.8rem;
  color: #eaf5ff;
  border: 1px solid rgba(183, 222, 255, 0.72);
  border-radius: 999px;
  background: rgba(7, 29, 74, 0.72);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  backdrop-filter: blur(8px);
}

.qb-motion-toggle::before {
  width: 0.55rem;
  height: 0.55rem;
  content: "";
  border-radius: 50%;
  background: #8cd7ff;
  box-shadow: 0 0 0 4px rgba(140, 215, 255, 0.16);
}

.qb-motion-toggle:hover {
  background: rgba(22, 81, 156, 0.86);
  transform: translateY(-1px);
}

@media (prefers-reduced-motion: no-preference) {
  .qb-motion-toggle {
    display: none;
  }
}

html[data-qb-motion-preference="full"] #hero::before {
  animation: qb-hero-drift 13s ease-in-out infinite alternate !important;
}

html[data-qb-motion-preference="full"] #hero::after {
  animation: qb-glow-pulse 4.5s ease-in-out infinite !important;
}

html[data-qb-motion-preference="full"] #hero .qb-section-inner::before {
  animation: qb-energy-flow 3.1s ease-in-out infinite !important;
}

html[data-qb-motion-preference="full"] #hero .qb-card {
  animation: qb-panel-float 4.8s ease-in-out infinite !important;
}

html[data-qb-motion-preference="full"] .qb-energy-route::before,
html[data-qb-motion-preference="full"] .qb-energy-route::after {
  animation: qb-route-packet 2.8s cubic-bezier(0.35, 0.05, 0.25, 1) infinite !important;
}

html[data-qb-motion-preference="full"] .qb-decision-board::after {
  animation: qb-board-orbit 8s linear infinite !important;
}

html[data-qb-motion-preference="full"] .qb-decision-link::after {
  animation: qb-decision-packet 2.3s ease-in-out infinite !important;
}

html[data-qb-motion-preference="full"] .qb-enhance-scene {
  animation: qb-scene-in 460ms cubic-bezier(0.22, 0.9, 0.24, 1) both !important;
}

html[data-qb-motion-preference="full"] .qb-enhance-scene-visual img {
  animation: qb-image-drift 7.2s ease-in-out infinite !important;
}

html[data-qb-motion-preference="full"] #scenarios .qbsc-tabs button[aria-pressed="true"] {
  animation: qb-tab-pulse 1.35s ease-out infinite !important;
}

@media (max-width: 720px) {
  .qb-motion-toggle {
    position: static;
    margin: 0 0 1.1rem;
  }
}

@media (max-width: 720px) {
  #hero {
    min-height: auto;
  }

  #hero::before {
    background:
      linear-gradient(180deg, rgba(7, 27, 72, 0.9), rgba(7, 27, 72, 0.94) 54%, rgba(7, 27, 72, 0.84)),
      url("/media/microgrid-campus-hero-20260728.png") 61% center / cover no-repeat;
  }

  #hero .qb-section-inner {
    min-height: 0;
  }

  .qb-enhance-scene {
    grid-template-columns: 1fr;
  }

  .qb-energy-routes {
    right: -8rem;
    bottom: -3.5rem;
    width: 540px;
    opacity: 0.56;
  }

  .qb-decision-flow {
    grid-template-columns: 1fr;
  }

  .qb-decision-link {
    width: 2px;
    height: 30px;
    justify-self: center;
  }

  .qb-decision-link::after {
    inset: -28% -3px auto -3px;
    width: auto;
    height: 28%;
    animation-name: qb-decision-packet-vertical;
  }

  html[data-qb-motion-preference="full"] .qb-decision-link::after {
    animation: qb-decision-packet-vertical 2.3s ease-in-out infinite !important;
  }

  .qb-enhance-scene-visual,
  .qb-enhance-scene-visual img {
    min-height: 175px;
  }

  .qb-enhance-scene dl > div {
    grid-template-columns: 1fr;
    gap: 0.18rem;
  }
}

@keyframes qb-decision-packet-vertical {
  0% { transform: translateY(0); opacity: 0; }
  12% { opacity: 1; }
  80% { opacity: 1; }
  100% { transform: translateY(470%); opacity: 0; }
}