/* ═══ Proof-First Build: floating glass panels ═══
   Same glass language as the hero mark: dark clear glass, bright thin continuous rim,
   a hairline rainbow fringe only at the edge, soft blue backlight behind.
   proof3d.js adds .p3d-on + .p3d-float (desktop, scroll-pinned) | .p3d-swipe (≤760px).
   Without those (no JS / reduced motion) the five panels sit in the static grid from home.css, still glass. */
.p3d{--g-fill:rgba(255,255,255,.035);--g-tint:rgba(9,11,17,.5);--g-ink:#fff;--g-mut:rgba(255,255,255,.66);--g-rim:rgba(255,255,255,.9);--g-rim2:rgba(255,255,255,.2);
  --g-shadow:0 60px 90px -50px rgba(0,0,0,.95),0 24px 40px -24px rgba(0,0,0,.6);--g-glow:rgba(46,104,255,.34);--g-glow2:rgba(80,150,255,.14);--g-line:rgba(255,255,255,.14);
  position:relative}
html.light .p3d{--g-fill:rgba(255,255,255,.5);--g-tint:rgba(255,255,255,.34);--g-ink:#0a0a0a;--g-mut:rgba(0,0,0,.6);--g-rim:#fff;--g-rim2:rgba(255,255,255,.55);
  --g-shadow:0 60px 90px -54px rgba(20,40,90,.42),0 22px 40px -26px rgba(20,40,90,.22);--g-glow:rgba(31,107,255,.16);--g-glow2:rgba(120,170,255,.12);--g-line:rgba(0,0,0,.1)}

/* ───────── the glass panel (all modes) ───────── */
.p3d .hx-st{border-radius:28px;border-color:transparent;color:var(--g-ink);
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.012) 46%,rgba(255,255,255,.02)),var(--g-fill);
  background-color:var(--g-tint);
  -webkit-backdrop-filter:blur(22px) saturate(1.35);backdrop-filter:blur(22px) saturate(1.35);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34),inset 0 0 0 1px rgba(255,255,255,.05),inset 0 -24px 48px -36px rgba(120,170,255,.22),var(--g-shadow)}
html.light .p3d .hx-st{background:linear-gradient(180deg,rgba(255,255,255,.75),rgba(255,255,255,.4) 50%,rgba(255,255,255,.55));background-color:var(--g-tint);
  box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(255,255,255,.6),inset 0 -24px 48px -36px rgba(31,107,255,.12),var(--g-shadow)}
/* bright thin continuous rim, strongest along the top edge */
.p3d .hx-st::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;padding:1px;
  background:linear-gradient(180deg,var(--g-rim),var(--g-rim2) 22%,rgba(255,255,255,.1) 55%,rgba(255,255,255,.26) 92%,rgba(255,255,255,.4));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
/* hairline rainbow fringe just outside the rim (very faint) */
.p3d .hx-st::after{content:"";position:absolute;inset:-1px;z-index:0;pointer-events:none;border-radius:29px;padding:1.5px;opacity:.32;
  background:conic-gradient(from 200deg,#ff7a9a,#ffd27a,#8affc0,#78c8ff,#b694ff,#ff7a9a);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);filter:blur(.4px)}
html.light .p3d .hx-st::after{opacity:.22}
.p3d .hx-st>*{position:relative;z-index:2}
/* soft light caustic on the surface: follows the pointer on the front panel (proof3d.js sets --mx/--my) */
.p3d-cau{position:absolute!important;inset:0;z-index:1!important;border-radius:inherit;pointer-events:none;overflow:hidden}
.p3d-cau::before{content:"";position:absolute;inset:0;
  background:radial-gradient(260px 200px at var(--mx,24%) var(--my,-6%),rgba(255,255,255,.1),rgba(160,200,255,.035) 45%,transparent 70%),
    linear-gradient(115deg,transparent 30%,rgba(255,255,255,.035) 44%,transparent 52%);transition:opacity .6s}
html.light .p3d-cau::before{background:radial-gradient(260px 200px at var(--mx,24%) var(--my,-6%),rgba(255,255,255,.7),transparent 70%)}

/* text on glass: crisp, no tech accents */
.p3d .hx-st-w{color:var(--g-mut);border-color:var(--g-line);background:rgba(255,255,255,.04);box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
html.light .p3d .hx-st-w{background:rgba(255,255,255,.6);box-shadow:inset 0 1px 0 #fff}
.p3d .hx-st-t i{color:var(--g-mut)}
.p3d .hx-st-d{color:var(--g-mut)}
.p3d .hx-st-g{color:var(--g-ink);border-color:var(--g-line)}
.p3d .hx-st-g b{color:var(--g-mut)}

/* soft blue backlight, like the hero glass */
.p3d-glow{position:absolute;z-index:0;left:50%;top:50%;width:min(1100px,96vw);height:min(760px,90vh);translate:-50% -50%;pointer-events:none;will-change:transform}
.p3d-glow i{position:absolute;inset:0;border-radius:50%;background:radial-gradient(closest-side,var(--g-glow),rgba(46,104,255,.08) 55%,transparent)}
.p3d-glow i+i{inset:18% 28% 30% 20%;background:radial-gradient(closest-side,var(--g-glow2),transparent);filter:blur(10px)}
html.light .p3d-glow i{background:radial-gradient(closest-side,var(--g-glow),rgba(31,107,255,.04) 55%,transparent)}
.p3d-stage{position:relative}
.p3d-stage>.hx-steps{position:relative;z-index:1}

/* ───────── controls: arrows + dots with step names ───────── */
.p3d-on .p3d-stage{outline:none}
.p3d-on .hx-st{transition:none!important;user-select:none;-webkit-user-select:none}
.p3d-ctrl{position:relative;z-index:3;display:flex;align-items:center;gap:20px;margin:0 auto;width:min(640px,100%)}
.p3d-arr{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;border:1px solid var(--g-line);background:rgba(255,255,255,.03);color:var(--g-ink);cursor:pointer;
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:inset 0 1px 0 rgba(255,255,255,.12);transition:background .3s,border-color .3s,opacity .3s}
.p3d-arr svg{width:18px;height:18px}
.p3d-next svg{transform:scaleX(-1)}
.p3d-arr:hover:not(:disabled){border-color:rgba(255,255,255,.34);background:rgba(255,255,255,.08)}
html.light .p3d-arr{background:rgba(255,255,255,.6);box-shadow:inset 0 1px 0 #fff}
html.light .p3d-arr:hover:not(:disabled){border-color:rgba(0,0,0,.28);background:#fff}
.p3d-arr:focus-visible{outline:2px solid var(--g-ink);outline-offset:3px}
.p3d-arr:disabled{opacity:.28;cursor:default}
.p3d-tl{position:relative;flex:1;min-width:0;height:42px}
.p3d-line{position:absolute;left:30px;right:30px;top:13px;height:1px;background:var(--g-line)}
.p3d-line i{position:absolute;inset:0;background:var(--g-mut);transform-origin:0 50%;transform:scaleX(0)}
.p3d-dots{position:absolute;inset:0 30px}
.p3d-dot{position:absolute;top:0;translate:-50% 0;display:flex;flex-direction:column;align-items:center;gap:9px;padding:9px 4px 4px;margin:0;border:0;background:none;color:var(--g-mut);
  font:500 12.5px/1 var(--sans);white-space:nowrap;cursor:pointer;opacity:.75;transition:color .4s,opacity .4s}
.p3d-dot i{width:7px;height:7px;border-radius:50%;background:var(--bg,#000);box-shadow:inset 0 0 0 1px var(--g-mut);transition:background .4s,box-shadow .4s,transform .4s}
.p3d-dot.done i{background:var(--g-mut);box-shadow:none}
.p3d-dot.on{color:var(--g-ink);opacity:1}
.p3d-dot.on i{background:var(--g-ink);box-shadow:0 0 0 4px rgba(255,255,255,.08),0 0 14px 2px rgba(120,170,255,.45);transform:scale(1.25)}
html.light .p3d-dot.on i{box-shadow:0 0 0 4px rgba(0,0,0,.05)}
.p3d-dot:hover{color:var(--g-ink);opacity:1}
.p3d-dot:focus-visible{outline:2px solid var(--g-ink);outline-offset:2px;border-radius:6px}

/* ───────── float mode (desktop / tablet, scroll-pinned) ───────── */
.p3d-float{height:170vh;--cw:clamp(330px,30vw,420px)}
.p3d-float .p3d-pin{position:sticky;top:0;height:100vh;height:100svh;display:flex;flex-direction:column;justify-content:center;padding:clamp(76px,10vh,96px) 0 clamp(16px,3vh,34px);box-sizing:border-box}
.p3d-float .hx-head{position:relative;z-index:3;margin-bottom:clamp(26px,4.4vh,50px)}
.p3d-float .hx-head .aheading{font-size:clamp(34px,min(4.4vw,6.4vh),60px)}
.p3d-float .hx-lead{margin-top:clamp(8px,1.4vh,18px)}
.p3d-float .p3d-stage{z-index:1;perspective:1500px;perspective-origin:50% 40%;margin:0 auto clamp(64px,10vh,104px);touch-action:pan-y}
.p3d-float .hx-steps{display:grid;grid-template-columns:var(--cw);justify-content:center;gap:0;transform-style:preserve-3d}
.p3d-float .hx-steps .hx-st{grid-area:1/1;width:var(--cw);min-height:clamp(290px,39vh,370px);box-sizing:border-box;padding:clamp(24px,3.2vh,32px) 32px clamp(22px,3vh,30px);
  will-change:transform,opacity;backface-visibility:hidden;cursor:pointer}
/* panels further back are blurred anyway: skip their backdrop pass */
.p3d-float .hx-st.p3d-far{-webkit-backdrop-filter:none;backdrop-filter:none;background-color:rgba(9,11,17,.62)}
html.light .p3d-float .hx-st.p3d-far{background-color:rgba(255,255,255,.55)}
.p3d-float .hx-st.is-on{cursor:default;-webkit-box-reflect:below 16px linear-gradient(transparent 84%,rgba(255,255,255,.075))}
html.light .p3d-float .hx-st.is-on{-webkit-box-reflect:below 16px linear-gradient(transparent 84%,rgba(255,255,255,.16))}
.p3d-float .hx-st-t{margin-top:clamp(18px,2.8vh,28px);font-size:clamp(30px,min(2.7vw,4.4vh),40px);gap:12px}
.p3d-float .hx-st-d{margin:12px 0 22px;font-size:clamp(15px,min(1.15vw,2vh),16.5px)}
.p3d-float .hx-st-g{margin:auto 0 0;border-left:0;border-top:1px solid var(--g-line);padding:16px 0 0;font-size:clamp(15px,min(1.15vw,2vh),16.5px)}
.p3d-float .p3d-cau::before{opacity:.35}
.p3d-float .hx-st.is-on .p3d-cau::before{opacity:1}
@media(min-width:761px) and (max-height:780px){
  .p3d-float .hx-lead{display:none}
  .p3d-float .hx-st-d{line-height:1.42}
}

/* ───────── swipe mode (≤760px): one panel at a time, neighbours peek ───────── */
.p3d-swipe .p3d-glow{width:100%;height:110%}
.p3d-swipe .hx-steps{display:flex;gap:14px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scrollbar-width:none;
  margin:0 calc(50% - 50vw);padding:22px calc(50vw - min(39vw,170px)) 54px;box-sizing:border-box;width:auto}
.p3d-swipe .hx-steps::-webkit-scrollbar{display:none}
.p3d-swipe .hx-steps .hx-st{flex:0 0 min(78vw,340px);scroll-snap-align:center;scroll-snap-stop:always;padding:24px 22px 22px;transform-origin:50% 50%;
  transform:scale(calc(1 - var(--d,0)*.06));opacity:calc(1 - var(--d,0)*.4);animation:p3dBob 7s ease-in-out infinite}
.p3d-swipe .hx-st:nth-child(2){animation-delay:-1.6s;animation-duration:7.8s}
.p3d-swipe .hx-st:nth-child(3){animation-delay:-3.1s;animation-duration:6.6s}
.p3d-swipe .hx-st:nth-child(4){animation-delay:-4.4s;animation-duration:8.2s}
.p3d-swipe .hx-st:nth-child(5){animation-delay:-5.7s;animation-duration:7.2s}
.p3d-swipe.p3d-idle .hx-st{animation-play-state:paused}
@keyframes p3dBob{0%,100%{translate:0 -4px}50%{translate:0 5px}}
.p3d-swipe .hx-st-t{font-size:30px}
.p3d-swipe .hx-st-g{border-left:0}
.p3d-swipe .p3d-stage:focus-visible .hx-st.is-on{outline:2px solid var(--g-ink);outline-offset:4px}
.p3d-swipe .p3d-ctrl{gap:12px;margin-top:-18px}
.p3d-swipe .p3d-arr{width:38px;height:38px}
.p3d-swipe .p3d-dot span{display:none}
.p3d-swipe .p3d-tl{height:24px}
.p3d-swipe .p3d-line{top:12px}

/* reduced transparency: solid panels */
@media (prefers-reduced-transparency: reduce){
  .p3d .hx-st{-webkit-backdrop-filter:none;backdrop-filter:none;background:#111216}
  html.light .p3d .hx-st{background:#f6f6f7}
}