/* Hero treatment tuned to the approved Physical AI reference layout. */
.physical-nav {
  height: 78px;
  padding: 0 max(7.9vw, 24px);
  background: #202121;
}

.physical-brand {
  font-size: 20px;
  gap: 9px;
}

.physical-product {
  margin-left: 48px;
  color: #f5f4ef;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -1.25px;
}

.physical-arena-link {
  color: rgba(255,255,255,.78);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}

.physical-arena-link:hover { color: #fff; }
.physical-arena-link em { color: #d8ff43; font-style: normal; }

.physical-nav-actions { margin-left: auto; }
.physical-nav-actions .nav-cta {
  padding: 10px 17px;
  font-size: 13px;
  font-weight: 500;
}

.physical-hero {
  min-height: 649px;
  padding: 226px 14.1vw 103px;
  background:
    radial-gradient(ellipse 43% 72% at 74% 54%, rgba(99, 96, 89, .17), transparent 72%),
    linear-gradient(100deg, #212222, #222323 62%, #1e1f1f);
}

.hero-grain { opacity: .045; }

.hero-copy {
  max-width: 720px;
  position: relative;
  z-index: 5;
  isolation: isolate;
}

.hero-copy::before { display: none; }

.hero-copy h1 {
  font-size: clamp(40px, 3.5vw, 52px);
  letter-spacing: -.06em;
  line-height: 1;
  white-space: nowrap;
}

.hero-description {
  max-width: 655px;
  margin: 27px 0 28px;
  color: #f0f0ee;
  font-size: 18px;
  line-height: 1.55;
}

.hero-actions { gap: 11px; }
.button-light, .button-outline {
  padding: 9px 14px;
  font-size: 14px;
  font-weight: 600;
}

.robot-stage {
  right: 8.2vw;
  bottom: -10px;
  width: min(49vw, 700px);
  height: 635px;
  overflow: visible;
}

.robot {
  right: 0;
  bottom: 0;
  width: 520px;
  height: 660px;
  transform-origin: bottom right;
  animation: robot-rise 1.1s both;
}

.robot-head {
  right: 89px;
  top: 0;
  width: 277px;
  height: 295px;
  border-radius: 47% 44% 42% 40% / 44% 38% 54% 53%;
  background: linear-gradient(132deg, #f5e8d5 0 18%, #cab89d 19% 43%, #090a0c 44%);
  transform-origin: 55% 91%;
  animation: robot-head-motion 4.8s cubic-bezier(.54, .02, .28, 1) infinite 1.2s;
}

.robot-visor {
  left: -29px;
  top: 30px;
  width: 179px;
  height: 224px;
  background: radial-gradient(circle at 42% 18%, #1c1d21, #000 43%, #273440);
}

.robot-ear { right: 4px; bottom: 65px; width: 59px; height: 50px; }
.robot-temple { right: 30px; top: 105px; width: 84px; height: 12px; }
.robot-neck {
  right: 143px;
  top: 260px;
  width: 132px;
  height: 154px;
  animation: robot-neck-motion 4.8s cubic-bezier(.54, .02, .28, 1) infinite 1.2s;
}

.robot-torso { right: -13px; width: 507px; height: 340px; }
.robot-chest { left: 172px; top: 48px; width: 137px; height: 226px; }
.robot-core { left: 218px; top: 102px; }
.robot-shoulder { top: 38px; width: 157px; height: 194px; }

.robot-halo { display: none; }
.stage-label { display: none; }

.hero-trust {
  left: 14.1vw;
  bottom: 30px;
  width: min(81vw, 1080px);
  color: rgba(255,255,255,.51);
  font: 500 12px/1 Manrope, sans-serif;
  text-shadow: 0 2px 15px rgba(0,0,0,.8);
}

.hero-trust > div {
  margin-top: 30px;
  gap: clamp(28px, 4vw, 70px);
  color: rgba(255,255,255,.81);
  font: 700 clamp(13px, 1.5vw, 18px)/1 Manrope, sans-serif;
  letter-spacing: -1px;
}

@keyframes robot-head-motion {
  0%, 14% { transform: translateX(-17px) rotate(-12deg) scaleX(.91); }
  28% { transform: translateX(-8px) translateY(-7px) rotate(-5deg) scaleX(.95); }
  46%, 60% { transform: translateX(4px) translateY(-17px) rotate(3deg) scaleX(1.01); }
  77%, 90% { transform: translateX(0) translateY(0) rotate(-2deg) scaleX(1); }
  100% { transform: translateX(-17px) rotate(-12deg) scaleX(.91); }
}

@keyframes robot-neck-motion {
  0%, 14% { transform: translateX(-5px) rotate(-3deg); }
  46%, 60% { transform: translateY(-3px) rotate(1.5deg); }
  77%, 90% { transform: none; }
  100% { transform: translateX(-5px) rotate(-3deg); }
}

@media (max-width: 900px) {
  .physical-hero { padding-left: 8vw; padding-right: 8vw; }
  .hero-copy h1 { white-space: normal; }
  .hero-trust { left: 8vw; }
  .robot-stage { right: -92px; opacity: .73; }
}

@media (max-width: 700px) {
  .physical-nav { padding: 0 20px; }
  .physical-product { margin-left: 19px; font-size: 16px; }
  .physical-arena-link { display: none; }
  .physical-nav-actions { display: none; }
  .physical-hero { min-height: 720px; padding: 120px 24px 165px; }
  .hero-copy h1 { font-size: clamp(39px, 12vw, 56px); }
  .hero-description { font-size: 15px; }
  .robot-stage { right: -143px; bottom: -75px; transform: scale(.8); transform-origin: bottom right; }
  .hero-trust { left: 24px; width: calc(100% - 48px); }
  .hero-trust > div { margin-top: 19px; }
}

/* Supplied photorealistic robot hero. The original CSS silhouette remains in
   the source as a fallback, but is intentionally replaced on this page. */
.robot-stage {
  right: -8px;
  width: min(58vw, 790px);
  height: 650px;
  filter: drop-shadow(-22px 18px 32px rgba(0, 0, 0, .52));
}

.robot-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("assets/physical-ai-robot-cutout.png") center bottom / contain no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 84%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 84%, transparent 100%);
  transform-origin: 56% 88%;
  animation: robot-presence 4.8s ease-in-out infinite;
  will-change: transform, filter;
}

.robot-stage::after {
  content: "";
  position: absolute;
  inset: 4% 9% 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 56% 28%, rgba(255,255,255,.08), transparent 36%);
  mix-blend-mode: screen;
}

.robot-stage .robot { display: none; }

@keyframes robot-presence {
  0%, 14% { transform: translate3d(-9px, 6px, 0) rotate(-.65deg) scale(1.012); filter: brightness(.96); }
  30% { transform: translate3d(-3px, -4px, 0) rotate(-.25deg) scale(1.018); filter: brightness(1.01); }
  48%, 62% { transform: translate3d(3px, -9px, 0) rotate(.42deg) scale(1.022); filter: brightness(1.05); }
  78%, 90% { transform: translate3d(0, 0, 0) rotate(0) scale(1); filter: brightness(1); }
  100% { transform: translate3d(-9px, 6px, 0) rotate(-.65deg) scale(1.012); filter: brightness(.96); }
}

@media (max-width: 900px) {
  .robot-stage { right: -65px; }
}

@media (max-width: 700px) {
  .robot-stage { right: -116px; bottom: -75px; }
}

/* Same marketing navigation, adapted to the Physical AI hero's dark canvas. */
.physical-page .shared-marketing-nav{background:rgba(29,30,31,.95);border-color:rgba(255,255,255,.16);box-shadow:0 10px 30px rgba(0,0,0,.25)}
.physical-page .shared-marketing-nav :is(.marketing-brand,.marketing-desktop>a,.shared-marketing-actions>a){color:#f5f4ef}.physical-page .shared-marketing-nav .marketing-mark::before,.physical-page .shared-marketing-nav .marketing-mark::after{background:#f5f4ef}.physical-page .shared-marketing-nav .marketing-brand>span:last-child span{color:#a8aaa7}.physical-page .shared-marketing-nav .marketing-cta{background:#f5f4ef;color:#1d1e1f!important}.physical-page .shared-marketing-nav .shared-marketing-menu span{background:#fff}