/* iPhone 18 Pro Max inspired hardware: 78 × 163.4 body, 1320 × 2868 display.
   Small perspective angles keep the actual client screens readable. */
.hero-refined .hero-visual { height: 660px; }
.hero-refined .hero-visual::before {
  inset: 100px -25px 75px;
  background: radial-gradient(ellipse at 75% 72%, #fbc6a778, transparent 63%),
    radial-gradient(ellipse at 34% 32%, #adbdff91, #dce3ff30 50%, transparent 73%);
}
.hero-refined .hero-visual::after { opacity: .5; inset: 140px 5px 135px; }
.hero-refined .stage-label { top: 13px; left: 14px; font-size: 10px; letter-spacing: .095em; }
.hero-refined .motion-toggle { top: 0; right: 3px; }
.hero-refined .device-scene {
  width: 600px; height: 640px; left: 50%; top: 47%;
  perspective: 1500px; transform-style: preserve-3d;
  transform: translate(-50%, -50%) scale(var(--device-scale, .82));
}
.hero-device {
  position: absolute; width: 254px; height: 532px;
  transform-style: preserve-3d; will-change: transform;
}
.hero-device-lumi {
  left: 37px; top: 84px; z-index: 2;
  transform: translate3d(0, 0, 24px) rotateZ(-7deg) rotateY(5deg) rotateX(2deg);
  animation: hero-lumi-float 14s ease-in-out infinite;
}
.hero-device-pulse {
  right: 30px; top: 29px; z-index: 1;
  transform: translate3d(0, 0, 0) rotateZ(8deg) rotateY(-7deg) rotateX(-2deg);
  animation: hero-pulse-float 14s ease-in-out infinite;
}
.iphone-body {
  position: absolute; inset: 0; border-radius: 43px;
  background: linear-gradient(108deg, #fff 0%, #a9afb6 5%, #eff2f4 13%, #899198 33%, #d2d8de 54%, #f4f7fa 79%, #89929c 95%, #eff4f7);
  border: 1px solid #767d84;
  box-shadow: inset 0 0 0 1px #f5f8fd, inset 0 0 0 2.4px #8e969e,
    1px 0 0 #a3adb5, 2px 1px 0 #dce1e5, 3px 2px 0 #89949e,
    4px 3px 0 #aab4bd, 5px 4px 0 #5f6973,
    10px 16px 19px #23364917, 22px 35px 42px #23364929;
  transform-style: preserve-3d;
}
.hero-device-lumi .iphone-body {
  background: linear-gradient(105deg, #e7dbdc, #97898d 6%, #ebe1e3 15%, #73616a 36%, #c9babc 65%, #f5ecec 87%, #8f7d85);
  border-color: #8e7e85;
  box-shadow: inset 0 0 0 1px #eee4e5, inset 0 0 0 2.4px #9d8e93,
    1px 0 0 #b3a6ac, 2px 1px 0 #d7cbcf, 3px 2px 0 #9c8d94,
    4px 3px 0 #b9a9b0, 5px 4px 0 #6f5e67,
    10px 16px 19px #3822301a, 22px 35px 42px #38223029;
}
.iphone-body::before {
  content: ''; position: absolute; inset: 4px; border-radius: 39px;
  background: #101114; box-shadow: 0 0 0 .7px #ffffffb0;
}
.iphone-display {
  position: absolute; inset: 8px; border-radius: 35px; overflow: hidden;
  background: #faf7f3; container-type: inline-size;
  transform: translateZ(.1px); backface-visibility: hidden;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}
.iphone-glass {
  position: absolute; inset: 5px; border-radius: 38px; pointer-events: none;
  border: 1px solid #ffffff34;
  background: linear-gradient(115deg, #fff0 32%, #ffffff0c 43%, #ffffff27 44%, #ffffff06 46%, #fff0 61%);
  box-shadow: inset 1px 1px 1px #ffffff38, inset -1px -1px 1px #00000050;
  transform: translateZ(1px);
}
.iphone-button {
  position: absolute; width: 3px; left: -3px; border-radius: 2px 0 0 2px;
  background: linear-gradient(90deg, #6a6c73, #e2e1e5 48%, #9b969c);
  box-shadow: 0 0 0 .5px #63616b; transform: translateZ(-1px);
}
.iphone-action { top: 86px; height: 20px; }
.iphone-volume-up { top: 127px; height: 36px; }
.iphone-volume-down { top: 176px; height: 36px; }
.iphone-power { left: auto; right: -5px; top: 146px; height: 58px; border-radius: 0 3px 3px 0; }
.iphone-camera { left: auto; right: -5px; top: 361px; height: 36px; border-radius: 0 3px 3px 0; }
.iphone-antenna { position: absolute; left: 0; right: -4px; height: 2px; background: #b6b3b9; transform: translateZ(-2px); }
.iphone-antenna-top { top: 62px; }
.iphone-antenna-bottom { bottom: 64px; }
.iphone-display .lumi-hero-preview { container-type: inline-size; }
.iphone-display .lumi-hero-preview > .lumi-display { container-type: inline-size; }
.iphone-display .lumi-hero-preview .lumi-status { height: 13.2cqw; min-height: 13.2cqw; }
.iphone-display .lumi-hero-preview .lumi-tabbar { display: flex; }
.iphone-display .lumi-hero-preview .lumi-home-indicator { display: block; }
.iphone-display .lumi-hero-preview .lumi-master-teaser { display: flex; margin-top: 4cqw; }
.iphone-display .lumi-hero-preview .lumi-scroll { overflow: hidden; }
.iphone-display .lumi-hero-preview .lumi-hero { height: 53cqw; }
.iphone-display .lumi-hero-preview .lumi-bottom-action { padding-block: 3cqw; }
.iphone-display .lumi-island { width: 20cqw; height: 6cqw; top: 2.5cqw; }
.iphone-display .lumi-island i { top: 1.65cqw; width: 2.5cqw; height: 2.5cqw; background: radial-gradient(circle at 35% 30%, #375276, #0b1728 35%, #040609 70%); }
.hero-pulse-display { display: flex; flex-direction: column; width: 100%; height: 100%; background: #fff; }
.hero-pulse-display .lumi-status { background: #fff; flex-shrink: 0; }
.hero-pulse-display .lumi-icon { fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.hero-pulse-viewport { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.hero-pulse-viewport iframe { display: block; width: 360px; height: 680px; border: 0; transform-origin: top left; pointer-events: none; }
.hero-phone-home { height: 6cqw; min-height: 6cqw; background: #fff; display: grid; place-items: center; }
.hero-phone-home i { display: block; width: 30cqw; height: 1.2cqw; border-radius: 1cqw; background: #22242a; }
.hero-app-labels {
  position: absolute; bottom: 48px; left: 0; right: 0;
  display: flex; align-items: center; justify-content: center; gap: 34px;
  font-size: 14px; color: #343b54;
}
.hero-app-labels > span { display: flex; align-items: center; gap: 7px; font-weight: 650; }
.hero-app-labels small { font-size: 11px; color: #77829a; font-weight: 400; }
.hero-app-labels i { width: 6px; height: 6px; border-radius: 50%; background: #8d586f; }
.hero-app-labels > span + span i { background: #5b70ec; }
.hero-refined .hero-visual-note { bottom: 16px; }
@keyframes hero-lumi-float {
  0%, 100% { transform: translate3d(0, 0, 24px) rotateZ(-7deg) rotateY(5deg) rotateX(2deg); }
  50% { transform: translate3d(4px, -12px, 24px) rotateZ(-5deg) rotateY(-3deg) rotateX(0); }
}
@keyframes hero-pulse-float {
  0%, 100% { transform: translate3d(0, 0, 0) rotateZ(8deg) rotateY(-7deg) rotateX(-2deg); }
  50% { transform: translate3d(-3px, 10px, 0) rotateZ(6deg) rotateY(-2deg) rotateX(1deg); }
}
.hero-motion-stopped .hero-device { animation-play-state: paused; }
.hero-reduced-motion .hero-device { animation: none; }
@media (min-width: 1101px) and (max-height: 850px) { .hero-refined .hero-visual { height: 610px; } }
@media (min-width: 801px) and (max-width: 1100px) {
  .hero-refined .hero-visual { height: 560px; }
  .hero-refined .stage-label { max-width: calc(100% - 105px); font-size: 9px; }
  .hero-app-labels { gap: 20px; }
  .hero-app-labels small { display: none; }
}
@media (max-width: 800px) { .hero-refined .hero-visual { height: 630px; max-width: 600px; } }
@media (max-width: 600px) {
  .hero-refined .hero-visual { height: clamp(430px, 119vw, 610px); }
  .hero-refined .stage-label { top: 13px; left: 5px; font-size: 8px; max-width: calc(100% - 115px); }
  .hero-refined .motion-toggle { right: 0; font-size: 11px; }
  .hero-app-labels { bottom: 42px; gap: 23px; font-size: 13px; }
  .hero-app-labels small { font-size: 10px; }
  .hero-refined .hero-visual-note { bottom: 11px; font-size: 11px; }
}
@media (max-width: 360px) { .hero-app-labels { gap: 19px; } .hero-app-labels small { font-size: 9px; } }
@media (prefers-reduced-motion: reduce) { .hero-device { animation: none !important; } }