/* Frontiers Quantum signature visuals: cinematic hero + procedural 3D intelligence unit. */
.hero { min-height: min(820px, calc(100svh - 109px)); }
.hero:before {
  background:
    linear-gradient(90deg, rgba(5, 10, 22, .96) 0%, rgba(5, 10, 22, .86) 33%, rgba(5, 10, 22, .48) 66%, rgba(5, 10, 22, .22) 100%),
    linear-gradient(0deg, rgba(5, 10, 22, .72), transparent 32%, rgba(5, 10, 22, .12));
}
.hero:after { content: none; }
.hero-video {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 48%;
  opacity: .62;
  filter: saturate(.82) contrast(1.08) brightness(.82);
  pointer-events: none;
}
.hero-video-shade {
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 73% 46%, rgba(255, 128, 56, .10), transparent 38%),
              linear-gradient(90deg, rgba(6, 11, 23, .28), transparent 62%);
}
.hero-grid { z-index: 1; opacity: .16; }
.hero-layout { min-height: clamp(570px, calc(100svh - 176px), 730px); }
.hero h1 {
  position: relative;
  width: fit-content;
  max-width: 100%;
  padding-bottom: .12em;
  font-family: 'Anton', Impact, sans-serif;
  font-size: clamp(56px, 6.3vw, 88px);
  font-weight: 400;
  line-height: .99;
  letter-spacing: .005em;
  text-transform: uppercase;
}
.hero h1 .hero-highlight { white-space: nowrap; }
.hero h1 .hero-highlight:after { height: 2px; }
.hero h1 .hero-script {
  position: absolute;
  z-index: 3;
  right: -.12em;
  bottom: -.28em;
  font-family: 'Condiment', cursive;
  font-size: clamp(42px, 4.5vw, 66px);
  font-weight: 400;
  line-height: .9;
  letter-spacing: .01em;
  text-transform: none;
  color: #63dce8;
  -webkit-text-fill-color: #63dce8;
  text-shadow: 0 0 22px rgba(85, 217, 232, .30);
  transform: rotate(-7deg);
  white-space: nowrap;
  pointer-events: none;
}
.hero-lead { max-width: 475px; }
.hero-proof { margin-top: 54px; }

/* 3D innovation companion stage */
.fq-robot-stage {
  min-height: 360px;
  overflow: hidden;
  border: 1px solid rgba(124, 158, 207, .12);
  background:
    radial-gradient(ellipse at 50% 60%, rgba(255, 125, 55, .13), transparent 34%),
    radial-gradient(ellipse at 50% 36%, rgba(73, 169, 200, .12), transparent 54%),
    linear-gradient(145deg, rgba(10, 21, 43, .58), rgba(5, 12, 27, .26));
  box-shadow: inset 0 0 55px rgba(2, 8, 20, .22);
  isolation: isolate;
}
.robot-stage-grid {
  position: absolute;
  z-index: 0;
  inset: 7% 2% 8%;
  opacity: .3;
  background-image: linear-gradient(rgba(117, 150, 196, .12) 1px, transparent 1px), linear-gradient(90deg, rgba(117, 150, 196, .12) 1px, transparent 1px);
  background-size: 31px 31px;
  mask-image: radial-gradient(ellipse at center, #000 0%, transparent 77%);
  pointer-events: none;
}
.robot-stage-halo {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 53%;
  width: 76%;
  aspect-ratio: 1;
  border: 1px solid rgba(255, 133, 66, .22);
  border-radius: 50%;
  transform: translate(-50%, -50%) scaleY(.36) rotate(-18deg);
  box-shadow: 0 0 35px rgba(255, 129, 58, .06), inset 0 0 35px rgba(255, 129, 58, .04);
  pointer-events: none;
}
.robot-stage-halo--two {
  width: 91%;
  border-color: rgba(85, 217, 232, .19);
  transform: translate(-50%, -50%) scaleY(.26) rotate(22deg);
}
.fq-robot-canvas {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity .4s ease;
  touch-action: pan-y;
}
.fq-robot-stage.is-rendered .fq-robot-canvas { opacity: 1; }
.robot-hud {
  position: absolute;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #8499bb;
  font: 700 7px/1.2 'DM Sans', sans-serif;
  letter-spacing: .16em;
  pointer-events: none;
}
.robot-hud--top {
  top: 17px;
  left: 17px;
  right: 17px;
  justify-content: space-between;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(130, 160, 203, .18);
}
.robot-hud--top span:first-child { color: #ff9b5d; }
.robot-hud--left { left: 15px; top: 48%; writing-mode: vertical-rl; transform: rotate(180deg); }
.robot-hud--right { right: 15px; top: 48%; writing-mode: vertical-rl; }
.robot-hud i { width: 5px; height: 5px; border-radius: 50%; background: #58d9e8; box-shadow: 0 0 9px rgba(88, 217, 232, .9); }
.robot-hud--right i { background: #ff934d; box-shadow: 0 0 9px rgba(255, 147, 77, .9); }
.robot-stage-caption {
  position: absolute;
  z-index: 4;
  left: 0;
  right: 0;
  bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  color: #91a5c4;
  font: 700 7px/1 'DM Sans', sans-serif;
  letter-spacing: .17em;
  pointer-events: none;
}
.robot-stage-caption i { width: 13px; height: 1px; background: linear-gradient(90deg, #ff8a44, #58d9e8); }
.robot-fallback {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 51%;
  width: 120px;
  height: 190px;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 16px 22px rgba(0, 0, 0, .4));
  pointer-events: none;
}
.fq-robot-stage.is-rendered .robot-fallback { display: none; }
.robot-fallback-head {
  position: absolute;
  top: 7px;
  left: 15px;
  width: 90px;
  height: 74px;
  border-radius: 21px;
  background: linear-gradient(145deg, #fff, #c9d2df);
  box-shadow: inset 0 -4px 8px rgba(21, 34, 57, .18), 0 0 0 5px rgba(255, 255, 255, .035);
}
.robot-fallback-head:before {
  content: '';
  position: absolute;
  inset: 15px 12px;
  border-radius: 11px;
  background: #07101e;
  box-shadow: 0 0 0 2px rgba(255, 135, 61, .72), 0 0 0 4px rgba(85, 217, 232, .3);
}
.robot-fallback-head span {
  position: absolute;
  z-index: 1;
  top: 35px;
  left: 32px;
  width: 8px;
  height: 12px;
  border-radius: 50%;
  background: #ff9b58;
  box-shadow: 26px 0 0 #58d9e8, 0 0 9px #ff9b58, 26px 0 9px #58d9e8;
}
.robot-fallback-body {
  position: absolute;
  left: 25px;
  top: 91px;
  width: 70px;
  height: 60px;
  border-radius: 15px;
  background: linear-gradient(135deg, #f7f7f4, #bcc8d7);
}
.robot-fallback-body:before,.robot-fallback-body:after {
  content: '';
  position: absolute;
  top: 12px;
  width: 7px;
  height: 36px;
  border-radius: 6px;
  background: linear-gradient(#ff914e, #58d9e8);
}
.robot-fallback-body:before { left: -13px; transform: rotate(8deg); }
.robot-fallback-body:after { right: -13px; transform: rotate(-8deg); }
.robot-fallback-body i {
  position: absolute;
  left: 26px;
  top: 22px;
  width: 18px;
  height: 10px;
  border: 2px solid #ff914e;
  border-right-color: #58d9e8;
  border-radius: 50%;
  transform: rotate(-25deg);
}

@media (max-width: 920px) {
  .hero { min-height: 650px; }
  .hero-layout { min-height: 560px; }
  .hero h1 { font-size: clamp(54px, 8vw, 76px); }
  .fq-robot-stage { min-height: 320px; }
}
@media (max-width: 780px) {
  .hero-video { opacity: .42; object-position: 58% center; }
  .hero:before { background: linear-gradient(90deg, rgba(5, 10, 22, .88), rgba(5, 10, 22, .56)), linear-gradient(0deg, rgba(5, 10, 22, .76), transparent 45%); }
  .hero h1 { font-size: clamp(52px, 10vw, 72px); }
  .hero h1 .hero-script { right: -.02em; bottom: -.3em; font-size: clamp(40px, 8vw, 56px); }
  .hero-proof { margin-top: 45px; }
  .fq-robot-stage { min-height: 280px; max-width: 520px; margin: 0 auto; width: 100%; }
}
@media (max-width: 560px) {
  .hero { min-height: 730px; }
  .hero-layout { min-height: 655px; padding-top: 34px; }
  .hero h1 { font-size: clamp(48px, 13vw, 64px); }
  .hero h1 .hero-script { font-size: 42px; right: 0; bottom: -.32em; }
  .hero-lead { max-width: 370px; font-size: 13px; }
  .hero-video { opacity: .34; object-position: 60% center; }
  .hero:before { background: linear-gradient(90deg, rgba(5, 10, 22, .82), rgba(5, 10, 22, .5)), linear-gradient(0deg, rgba(5, 10, 22, .84), transparent 50%); }
  .fq-robot-stage { min-height: 250px; }
  .robot-hud--left { left: 9px; }
  .robot-hud--right { right: 9px; }
  .robot-stage-caption { gap: 6px; font-size: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-video { display: none; }
  .fq-robot-canvas { transition: none; }
}