/* Six layers, in order · Oct 29 2026 */
.h2 .stack{height:420vh}
.h2 .xstage{width:min(760px,74vw,calc((100vh - 330px) * 1.6));container-type:inline-size;font-family:Manrope,system-ui,sans-serif}
.h2 .xl{position:absolute;inset:0;border-radius:2.4cqw;transform-style:preserve-3d;background:transparent;border:0}
.h2 .xl.L1{background-image:linear-gradient(#fff,#fff);box-shadow:0 40px 80px -30px rgba(18,16,46,.35),0 0 0 1px rgba(18,16,46,.06)}
/* plate thickness (visible only when exploded) */
.h2 .xl:before{content:"";position:absolute;inset:0;border-radius:inherit;transform:translateZ(-7px);background:linear-gradient(135deg,rgba(108,92,231,.55),rgba(184,230,46,.45));opacity:0}
.h2 .xl:after{content:"";position:absolute;inset:0;border-radius:inherit;border:1.5px solid rgba(255,255,255,.95);box-shadow:inset 0 0 0 1px rgba(108,92,231,.25);opacity:0;pointer-events:none}
.h2 .xo{opacity:0}
.h2 .x-tag{position:absolute;left:2.2cqw;bottom:2.2cqw;display:inline-flex;align-items:center;gap:1cqw;padding:1cqw 2cqw 1cqw 1cqw;border-radius:99px;background:#12102E;color:#fff;font-size:2.1cqw;font-weight:800;white-space:nowrap;box-shadow:0 1cqw 3cqw -1cqw rgba(18,16,46,.5)}
.h2 .x-tag i{width:3.2cqw;height:3.2cqw;border-radius:50%;background:#B8E62E;color:#12102E;font-style:normal;display:inline-flex;align-items:center;justify-content:center;font-size:1.7cqw}
/* L1 structure */
.h2 .x-chrome{display:flex;align-items:center;gap:.9cqw;height:5cqw;padding:0 2cqw;border-bottom:1px solid #ECECF0}
.h2 .x-chrome span{width:1.2cqw;height:1.2cqw;border-radius:50%}
.h2 .x-chrome em{margin-left:1.5cqw;height:1cqw;width:34%;border-radius:1cqw;background:#ECECF0}
.h2 .x-navbar{position:absolute;left:0;right:0;top:5cqw;height:6cqw;border-bottom:1px solid #F0F0F4}
.h2 .x-cards{position:absolute;left:6%;right:6%;top:72%;bottom:5%;display:grid;grid-template-columns:repeat(3,1fr);gap:2.2cqw}
.h2 .x-cards div{border-radius:1.8cqw;background:#F4F8F7;border:1px solid #E6EEEC}
.h2 .x-wire b{position:absolute;display:flex;align-items:center;justify-content:center;text-align:center;border:.25cqw dashed rgba(108,92,231,.6);border-radius:1.6cqw;background:rgba(108,92,231,.06);color:#5A4BD6;font-size:1.7cqw;font-weight:800}
/* L2 brand */
.h2 .x-logo{position:absolute;left:4%;top:6.4cqw;display:flex;align-items:center;gap:1cqw;font-size:2.4cqw;font-weight:800;color:#0B3A44;letter-spacing:-.02em}
.h2 .x-logo i{width:3cqw;height:3cqw;border-radius:.9cqw;background:linear-gradient(135deg,#B8E62E,#18B4B4)}
.h2 .x-brand{position:absolute;right:5%;bottom:6%;display:flex;align-items:center;gap:1.2cqw;padding:1.6cqw 2cqw;border-radius:2cqw;background:#fff;box-shadow:0 1cqw 3cqw -1cqw rgba(18,16,46,.35)}
.h2 .x-brand span{width:4cqw;height:4cqw;border-radius:1.2cqw}
.h2 .x-brand b{margin-left:1cqw;font-size:4.4cqw;line-height:1;color:#0B3A44}
.h2 .x-brand small{max-width:16cqw;font-size:1.5cqw;line-height:1.3;color:#5B6B74}
/* L3 photo */
.h2 .x-hero{position:absolute;right:6%;top:16%;width:42%;height:50%;object-fit:cover;border-radius:2cqw;box-shadow:0 2cqw 4cqw -2cqw rgba(11,58,68,.5)}
.h2 .x-thumbs{position:absolute;left:6%;right:6%;top:72%;height:12%;grid-template-rows:100%;display:grid;grid-template-columns:repeat(3,1fr);gap:2.2cqw}
.h2 .x-thumbs img{width:100%;height:100%!important;max-height:none;min-height:0;object-fit:cover;border-radius:1.8cqw 1.8cqw 0 0}
/* L4 copy */
.h2 .x-copy{position:absolute;left:6%;top:17%;width:42%}
.h2 .x-copy p{margin:0;font-size:1.6cqw;font-weight:800;color:#14A3A3}
.h2 .x-copy h4{margin:.8cqw 0 0;font-size:5.4cqw;line-height:1;font-weight:800;letter-spacing:-.045em;color:#0B3A44}
.h2 .x-copy span{display:block;margin-top:1.4cqw;font-size:1.7cqw;line-height:1.45;color:#5B6B74}
.h2 .x-ctitles{position:absolute;left:6%;right:6%;top:86%;display:grid;grid-template-columns:repeat(3,1fr);gap:2.2cqw}
.h2 .x-ctitles b{padding-left:1.4cqw;font-size:1.8cqw;color:#0B3A44}
/* L5 conversion */
.h2 .x-cta{position:absolute;left:6%;top:57%;padding:1.5cqw 2.8cqw;border-radius:99px;background:#B8E62E;color:#0B2A10;font-size:1.8cqw;font-weight:800;box-shadow:0 1.2cqw 3cqw -1cqw rgba(184,230,46,.9)}
.h2 .x-call{position:absolute;left:28%;top:57.6%;padding:1.2cqw 2cqw;border-radius:99px;background:#F4F8F7;color:#0B3A44;font-size:1.6cqw;font-weight:800}
.h2 .x-quote{position:absolute;right:4%;top:6.2cqw;padding:1cqw 2cqw;border-radius:99px;background:#0B3A44;color:#fff;font-size:1.5cqw;font-weight:800}
/* L6 search & AI */
.h2 .x-g{position:absolute;right:9%;top:52%;padding:1.4cqw 2cqw;border-radius:1.8cqw;background:rgba(255,255,255,.92);box-shadow:0 1.5cqw 4cqw -1.5cqw rgba(18,16,46,.45);border:1px solid #ECECF0}
.h2 .x-g small{display:block;font-size:1.3cqw;font-weight:800;color:#4285F4}
.h2 .x-g b{display:block;margin-top:.3cqw;font-size:1.8cqw;color:#1A0DAB}
.h2 .x-g span{font-size:1.4cqw;color:#E2A400}
.h2 .x-schema{position:absolute;left:5%;top:15%;padding:1.2cqw 1.6cqw;border-radius:1.4cqw;background:#12102E;color:#C9EE5A;font:1.35cqw/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;max-width:44%}
.h2 .x-ai{position:absolute;left:5%;top:33%;max-width:44%;display:flex;gap:1cqw;padding:1.4cqw 1.8cqw;border-radius:1.6cqw;background:linear-gradient(135deg,#6C5CE7,#8D7FF0);color:#fff;font-size:1.5cqw;line-height:1.4;font-weight:700}
.h2 .x-ai i{font-style:normal;color:#E2F98C}
/* legend */
.h2 .legend div{opacity:.35;transition:none}
.h2 .legend i{background:#F4F4F6;color:#12102E}
@media (max-width:760px){.h2 .x-tag{font-size:4.4cqw;padding:1.4cqw 3cqw 1.4cqw 1.4cqw}.h2 .x-tag i{width:5cqw;height:5cqw;font-size:3cqw}}

@supports (animation-timeline: view()){
  .h2 .xstage{animation:xstage2 linear both;animation-timeline:--stack;animation-range:contain 0% contain 100%}
  .h2 .xl{animation:xlayer2 linear both;animation-timeline:--stack;animation-range:contain 0% contain 100%}
  .h2 .xl:before,.h2 .xl:after,.h2 .xo{animation:xshow linear both;animation-timeline:--stack;animation-range:contain 0% contain 100%}
  .h2 .legend{animation:xlegend2 linear both;animation-timeline:--stack;animation-range:contain 0% contain 100%}
  /* each layer gets its moment, bottom to top */
  .h2 .xl.L1 .x-tag,.h2 .legend .lg1{--r0:28%;--r1:36%}
  .h2 .xl.L2 .x-tag,.h2 .legend .lg2{--r0:36%;--r1:44%}
  .h2 .xl.L3 .x-tag,.h2 .legend .lg3{--r0:44%;--r1:52%}
  .h2 .xl.L4 .x-tag,.h2 .legend .lg4{--r0:52%;--r1:60%}
  .h2 .xl.L5 .x-tag,.h2 .legend .lg5{--r0:60%;--r1:68%}
  .h2 .xl.L6 .x-tag,.h2 .legend .lg6{--r0:68%;--r1:76%}
  .h2 .xl .x-tag.xo{animation:xshow linear both,xtag linear both;animation-timeline:--stack,--stack;animation-range:contain 0% contain 100%,contain var(--r0) contain var(--r1)}
  .h2 .legend div{animation:xleg linear both;animation-timeline:--stack;animation-range:contain var(--r0) contain var(--r1)}
}
@keyframes xstage2{0%,6%{transform:rotateX(0) rotateZ(0) scale(1)}24%,78%{transform:translateY(6%) rotateX(56deg) rotateZ(-34deg) scale(.66)}94%,100%{transform:rotateX(0) rotateZ(0) scale(1)}}
@keyframes xlayer2{0%,6%{transform:translateZ(0);background-color:transparent}24%,78%{transform:translateZ(var(--z));background-color:var(--tint)}94%,100%{transform:translateZ(0);background-color:transparent}}
@keyframes xshow{0%,12%{opacity:0}24%,78%{opacity:1}88%,100%{opacity:0}}
@keyframes xlegend2{0%,18%{opacity:0;transform:translateX(16px)}26%,78%{opacity:1;transform:none}86%,100%{opacity:0;transform:translateX(-16px)}}
@keyframes xtag{0%{transform:none;background:#12102E}25%,75%{transform:scale(1.25) translateZ(30px);background:#5A4BD6}100%{transform:none;background:#12102E}}
@keyframes xleg{0%{opacity:.35}25%{opacity:1}100%{opacity:1}}
@media (max-width:760px){
  @supports (animation-timeline: view()){.h2 .xstage{animation-name:xstage2m}}
}
@keyframes xstage2m{0%,6%{transform:rotateX(0) rotateZ(0) scale(1)}24%,78%{transform:translateY(34%) rotateX(56deg) rotateZ(-34deg) scale(.8)}94%,100%{transform:rotateX(0) rotateZ(0) scale(1)}}
@supports (animation-timeline: view()){
  .h2 .stack .pin>div:first-child,.h2 .stack .pin>p{animation:xhead linear both;animation-timeline:--stack;animation-range:contain 0% contain 100%}
}
@keyframes xhead{0%,12%{opacity:1;filter:none}22%,80%{opacity:0;filter:blur(8px)}90%,100%{opacity:1;filter:none}}