/* 3D exploded-view section */
.xp{position:relative;height:900vh;padding:0;background:var(--navy)}
.xp-pin{position:sticky;top:0;height:100vh;overflow:hidden;background:var(--navy)}
.xp canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity 1s ease}
.xp.ready canvas{opacity:1}
.xp-vignette{position:absolute;inset:0;pointer-events:none;z-index:2;background:
  radial-gradient(ellipse 70% 80% at 62% 48%,transparent 55%,rgba(7,15,29,.55) 100%),
  linear-gradient(180deg,rgba(12,26,48,.6) 0,transparent 16%,transparent 84%,rgba(12,26,48,.7) 100%)}
.xp.priority .xp-vignette{animation:xpPulse 0.74s ease-in-out infinite}
@keyframes xpPulse{50%{box-shadow:inset 0 0 180px rgba(41,121,255,.18)}}

.xp-labels{position:absolute;inset:0;z-index:3;pointer-events:none}
.xp-label{position:absolute;left:0;top:0;display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600;white-space:nowrap;opacity:0;will-change:transform,opacity;color:#E8EFFB}
.xp-label .dot{width:10px;height:10px;border-radius:50%;background:#fff;border:2px solid var(--blue2);box-shadow:0 0 0 5px rgba(41,121,255,.22);flex:none}
.xp-label.hot .dot{background:var(--blue);border-color:#fff;box-shadow:0 0 0 5px rgba(41,121,255,.35),0 0 16px var(--blue2)}
.xp-label .line{width:46px;height:1px;background:#C7D6EE;opacity:.5}
.xp-label .txt{background:rgba(12,26,48,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:6px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.14)}
.xp-label.left{flex-direction:row-reverse;transform-origin:right center}

.xp-panels{position:absolute;inset:0;z-index:4;pointer-events:none}
.xp-panel{position:absolute;left:max(24px,calc((100vw - var(--max))/2 + 24px));top:50%;width:min(440px,38vw);opacity:0;transform:translateY(calc(-50% + var(--y,0px)));will-change:opacity,transform}
.xp-panel.visible{pointer-events:auto}
.xp-panel h2{font-size:clamp(30px,3.4vw,48px);margin-bottom:16px}
.xp-panel p{color:#B8C7E3;font-size:17px;max-width:400px}
.xp-panel .xp-num{display:block;font-family:var(--head);font-weight:800;font-size:15px;letter-spacing:.08em;color:var(--blue2);margin-bottom:12px}
.xp-panel ul{list-style:none;margin-top:18px;display:grid;gap:8px;font-size:15px;color:#D6E1F5}
.xp-panel li{display:flex;gap:10px;align-items:flex-start}
.xp-panel li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--blue2);margin-top:8px;flex:none;box-shadow:0 0 10px var(--blue2)}
.xp-panel .hero-cta{margin-top:26px}
.xp-pill{display:inline-flex;align-items:center;gap:8px;padding:7px 13px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#D6E1F5;margin-bottom:18px}
.xp-pill i{width:8px;height:8px;border-radius:50%;background:var(--red);box-shadow:0 0 10px var(--red)}
.xp-pill i+i{background:var(--blue);box-shadow:0 0 12px var(--blue2);animation:blink .74s infinite}

.xp-chapters{position:absolute;right:28px;top:50%;transform:translateY(-50%);z-index:5;display:flex;flex-direction:column;gap:12px;text-align:right}
.xp-chapters button{background:none;border:0;cursor:pointer;font:600 12px var(--font);color:#8FA3C4;opacity:.7;transition:color .4s,transform .4s,opacity .4s;text-align:right}
.xp-chapters button:hover{opacity:1}
.xp-chapters button.active{color:#fff;opacity:1;transform:translateX(-8px)}
.xp-chapters button.active::after{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--blue2);margin-left:8px;vertical-align:middle;box-shadow:0 0 8px var(--blue2)}

.xp-progress{position:absolute;left:0;right:0;bottom:0;height:3px;z-index:5;background:rgba(255,255,255,.06)}
.xp-progress i{display:block;height:100%;background:linear-gradient(90deg,var(--red),var(--blue));transform-origin:left;transform:scaleX(0)}
.xp-hint{position:absolute;left:50%;bottom:34px;transform:translateX(-50%);z-index:4;font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:#8FA3C4;display:flex;flex-direction:column;align-items:center;gap:10px}
.xp-hint span{width:1px;height:38px;background:linear-gradient(#fff,transparent);animation:xpHint 1.8s ease-in-out infinite;transform-origin:top}
@keyframes xpHint{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}
.xp-note{position:absolute;left:24px;bottom:16px;z-index:4;font-size:11px;color:#5A6B85}

.xp-loader{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:#8FA3C4;font-size:13px;font-weight:600;transition:opacity .8s,visibility .8s}
.xp-loader i{width:120px;height:2px;background:rgba(255,255,255,.1);overflow:hidden;position:relative}
.xp-loader i::after{content:"";position:absolute;inset:0;background:var(--blue);animation:xpLoad 1.1s ease-in-out infinite}
@keyframes xpLoad{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
.xp.ready .xp-loader{opacity:0;visibility:hidden}

.xp.xp-fail{height:auto}
.xp.xp-fail .xp-pin{position:relative;height:auto;padding:96px 0}
.xp.xp-fail canvas,.xp.xp-fail .xp-labels,.xp.xp-fail .xp-chapters,.xp.xp-fail .xp-hint,.xp.xp-fail .xp-loader,.xp.xp-fail .xp-progress,.xp.xp-fail .xp-vignette{display:none}
.xp.xp-fail .xp-panels{position:relative;display:grid;gap:40px;max-width:var(--max);margin:0 auto;padding:0 24px}
.xp.xp-fail .xp-panel{position:relative;left:auto;top:auto;width:auto;opacity:1;transform:none}

@media(max-width:820px){
  .xp{height:820vh}
  .xp-panel{left:16px;right:16px;width:auto;top:auto;bottom:34px;transform:translateY(var(--y,0px));background:rgba(12,26,48,.78);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);padding:18px 20px;border-radius:18px;border:1px solid rgba(255,255,255,.1)}
  .xp-panel h2{font-size:26px;margin-bottom:10px}
  .xp-panel p{font-size:15px}
  .xp-panel .eyebrow{margin-bottom:10px}
  .xp-panel ul{display:none}
  .xp-panel .hero-cta{margin-top:16px}
  .xp-panel .btn{padding:12px 18px;font-size:14px}
  .xp-chapters,.xp-note{display:none}
  .xp-label{font-size:11px}
  .xp-label .line{width:26px}
  .xp-hint{bottom:auto;top:84px}
}