/* Product-only experiment: five spaced moments, native scrolling throughout. */
.ig-immersive .hero { isolation: isolate; perspective: 1400px; }
.ig-immersive .hero-inner { position: relative; z-index: 2; }
.ig-immersive .hero-inner.hero-solo h1 {
  width: 100%; max-width: calc(100% - clamp(100px, 14vw, 280px));
  margin-left: auto; margin-right: auto;
}
.ig-immersive .ig-depth-portal {
  position: absolute; z-index: 0; pointer-events: none;
  inset: 24px max(20px, 4vw) -80px; border-radius: 48px;
  border: 1px solid rgba(245,188,79,.26);
  background: radial-gradient(ellipse at var(--ig-x, 50%) 70%, rgba(184,94,204,.14), transparent 62%),
    linear-gradient(160deg, rgba(247,182,70,.07), transparent 35%, rgba(142,92,205,.09));
  box-shadow: inset 0 0 80px rgba(249,174,62,.025), 0 0 0 18px rgba(214,155,64,.018);
  transform: perspective(1200px) rotateX(calc(7deg + var(--ig-angle, 0deg))) translateY(var(--ig-travel, 0px));
  transform-origin: center 70%;
}
.ig-depth-portal::before, .ig-depth-portal::after {
  content: ''; position: absolute; pointer-events: none; border-radius: inherit;
  inset: 22px; border: 1px solid rgba(236,188,100,.1);
}
.ig-depth-portal::after { inset: 48px; border-color: rgba(174,131,238,.08); }
.ig-immersive .hero.ig-in-view .ig-depth-portal::before { animation: ig-portal-open 1.1s cubic-bezier(.2,.7,.2,1) both; }
@keyframes ig-portal-open { from { opacity: .2; clip-path: inset(0 46% round 40px); } to { opacity: 1; clip-path: inset(0 round 40px); } }
.ig-immersive .hero::after {
  content: ''; position: absolute; pointer-events: none; z-index: 1;
  height: 1px; bottom: 0; left: 12%; right: 12%;
  background: linear-gradient(90deg, transparent, #edb853, #ba85dd, transparent);
  box-shadow: 0 -8px 50px rgba(230,166,73,.3);
}
.ig-immersive .hero-cta { perspective: 1000px; }
.ig-immersive #demo { perspective: 1400px; isolation: isolate; }
.ig-immersive #demo::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 62%, rgba(146,100,188,.12), transparent 67%);
}
.ig-immersive #demo .video-wrap {
  transform: perspective(1400px) rotateX(calc(-1 * var(--ig-angle, 0deg))) translateY(var(--ig-travel, 0px));
}
.ig-immersive #demo .video-frame {
  border-color: rgba(245,190,92,.35);
  box-shadow: 0 0 0 8px rgba(248,193,100,.025), 0 0 0 25px rgba(159,105,213,.022), 0 35px 85px -38px #000;
}
.ig-immersive #features { border-top: 1px solid rgba(229,179,88,.16); }
.ig-immersive .feature-visual-card .feature-visual {
  transform: scale(1.065) translateY(calc(-1 * var(--ig-travel, 0px)));
  transition: transform .75s cubic-bezier(.2,.7,.2,1), filter .5s ease;
}
.ig-immersive .feature-visual-card.ig-in-view .feature-visual { filter: brightness(1.22) saturate(1.06); }
.ig-immersive .feature-visual-card::after {
  background: linear-gradient(115deg, transparent 25%, rgba(253,207,126,.10) 46%, transparent 68%);
  transform: translateX(calc(var(--ig-p, .5) * 40% - 20%));
}
.ig-immersive .feature-copy { background: linear-gradient(180deg, transparent, rgba(7,8,12,.48) 42%, rgba(7,8,12,.88)); }
.ig-immersive .feature-copy .fic { box-shadow: 0 0 24px rgba(247,192,76,.19), inset 0 0 18px rgba(239,177,64,.12); }
/* Hyperframe: a single illustration advances into focus. Labels stay on-plane. */
.ig-immersive .industry-system-visual {
  transform: perspective(1500px) rotateX(var(--ig-angle, 0deg)) scale(calc(.975 + var(--ig-p, .5) * .025));
  transform-origin: center; border-color: rgba(247,194,90,.42);
  box-shadow: 0 0 0 8px rgba(243,181,78,.035), 0 0 0 20px rgba(175,108,208,.025), 0 42px 75px -35px #000;
}
.ig-immersive .industry-system-visual > img { transform: scale(1.025) translateY(calc(var(--ig-travel, 0px) * -.35)); }
.ig-immersive .industry-annotation {
  transition: box-shadow .5s ease, border-color .5s ease, background .5s ease;
}
.ig-immersive .industry-system-visual:not(.ig-in-view) .industry-annotation::before { animation-play-state: paused; }
.ig-immersive [data-ig-stage="0"] .industry-annotation-1,
.ig-immersive [data-ig-stage="1"] .industry-annotation-2,
.ig-immersive [data-ig-stage="2"] .industry-annotation-3,
.ig-immersive [data-ig-stage="3"] .industry-annotation-4,
.ig-immersive [data-ig-stage="4"] .industry-annotation-5,
.ig-immersive [data-ig-stage="5"] .industry-annotation-6 {
  border-color: #ffe0a2; background: rgba(36,28,19,.97);
  box-shadow: 0 0 25px rgba(244,180,61,.36), 0 12px 24px rgba(0,0,0,.6);
}
.ig-immersive #how .how-grid { perspective: 1400px; }
.ig-immersive #how .stp.in { box-shadow: 0 22px 44px -30px rgba(246,187,80,.28); }
/* Pricing has a quiet light-stage. No plan acquires a new selection state. */
.ig-immersive #pricing {
  background: radial-gradient(ellipse at 50% 38%, rgba(172,113,193,.09), transparent 64%), var(--surface-2);
  border-top: 1px solid rgba(247,195,99,.2);
}
.ig-immersive #pricing::before {
  content: ''; position: absolute; top: 0; left: 16%; right: 16%; height: 1px;
  background: linear-gradient(90deg, transparent, #eaba63, transparent); pointer-events: none;
}
.ig-immersive .plan { transition: rotate .3s ease, box-shadow .35s ease; }
.ig-immersive .plan::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(circle at var(--ig-x, 50%) var(--ig-y, 0%), rgba(248,193,85,.08), transparent 58%);
  opacity: 0; transition: opacity .3s ease;
}
@media (hover: hover) and (pointer: fine) and (min-width: 701px) {
  .ig-immersive .feature-visual-card:hover .feature-visual {
    transform: scale(1.105) translateY(calc(-1 * var(--ig-travel, 0px)));
    filter: brightness(1.28) saturate(1.1) contrast(1.03);
  }
  .ig-immersive .plan:hover { rotate: y var(--ig-ry, 0deg); box-shadow: 0 20px 48px -28px rgba(241,184,77,.38); }
  .ig-immersive .plan:hover::after { opacity: 1; }
}
.ig-immersive .faq-a { transition: grid-template-rows .45s cubic-bezier(.22,.75,.28,1); }
.ig-immersive .faq-item.open { background: linear-gradient(115deg, rgba(239,176,61,.04), transparent 75%), var(--surface); }
.ig-immersive .faq-item.open .faq-a-in { animation: ig-answer .4s ease-out; }
@keyframes ig-answer { from { opacity: .7; } to { opacity: 1; } }
@media (max-width: 700px) {
  .ig-immersive .hero-inner.hero-solo h1 { max-width: calc(100% - 28px); }
  .ig-immersive .ig-depth-portal { inset: 10px 10px -28px; border-radius: 26px; transform: none; }
  .ig-depth-portal::before { inset: 12px; }
  .ig-depth-portal::after { display: none; }
  .ig-immersive #demo .video-wrap, .ig-immersive .industry-system-visual { transform: none; }
  .ig-immersive .industry-system-visual { box-shadow: 0 0 0 5px rgba(243,181,78,.035), 0 20px 50px -30px #000; }
  .ig-immersive .industry-system-visual > img { transform: none; }
  .ig-immersive .feature-visual-card .feature-visual { transform: scale(1.025); }
  .ig-immersive .feature-visual-card::after { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ig-immersive *, .ig-immersive *::before, .ig-immersive *::after {
    animation: none !important; transition: none !important; scroll-behavior: auto !important;
  }
  .ig-immersive .reveal { opacity: 1 !important; transform: none !important; }
  .ig-immersive .ig-depth-portal, .ig-immersive #demo .video-wrap,
  .ig-immersive .industry-system-visual, .ig-immersive .industry-system-visual > img,
  .ig-immersive .feature-visual, .ig-immersive .feature-visual-card::after { transform: none !important; }
  .ig-immersive .plan { rotate: none !important; }
  .ig-immersive #rotator { opacity: 1 !important; transform: none !important; }
}