/* ================= 3D HOME, hero ring + scroll showcase ================= */
.x3d{position:relative;}
.x3d-canvas{position:fixed; top:0; left:0; width:100%; height:100vh; z-index:0; pointer-events:none; display:block;}
html:not(.x3d-ready) .x3d-canvas{display:none;}

/* hero */
.hero.hero-3d{background:transparent; z-index:auto; isolation:auto; padding:128px 0 0; touch-action:pan-y;}
html.x3d-ready .hero.hero-3d{min-height:100vh; min-height:100svh; padding-bottom:84px;}
html:not(.x3d-ready) .hero.hero-3d{padding-bottom:90px;}
.hero.hero-3d::before,.hero.hero-3d::after{z-index:-1;}
.hero3d-copy{position:relative; z-index:2; max-width:860px; margin:0 auto; text-align:center; display:flex; flex-direction:column; align-items:center;}
.hero3d-copy::before{content:""; position:absolute; left:50%; top:46%; width:125%; height:120%; transform:translate(-50%,-50%); background:radial-gradient(closest-side, var(--paper) 60%, transparent); opacity:.9; z-index:-1; pointer-events:none;}
.hero3d-copy h1{font-size:clamp(38px,6.2vw,84px); line-height:1.02; letter-spacing:-0.035em; margin-bottom:20px;}
.hero3d-copy .lead{max-width:600px; margin:0 auto 28px;}
.hero3d-copy .hero-ctas{justify-content:center; margin-bottom:24px;}
.hero3d-copy .hero-marks{justify-content:center; border-top:0; padding-top:0; max-width:660px;}
.hero3d-hint{position:absolute; left:50%; bottom:26px; transform:translateX(-50%); z-index:2; display:flex; align-items:center; gap:12px; padding:9px 16px; border-radius:100px; background:var(--white); border:1px solid var(--line); font-family:var(--ff-mono); font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink); white-space:nowrap; pointer-events:none; transition:opacity .4s ease, transform .4s ease;}
.hero3d-hint .hint-line{width:22px; height:1px; background:var(--muted); opacity:.5;}
.hero3d-hint.is-hidden{opacity:0; transform:translate(-50%,10px);}
html:not(.x3d-ready) .hero3d-hint{display:none;}

/* showcase */
html.x3d-ready .showcase{height:calc((var(--n) * 180 + 160) * 1vh); padding:0; background:transparent; position:relative;}
html.x3d-ready .sc3-fallback{display:none;}
html:not(.x3d-ready) .sc3-sticky{display:none;}
.sc3-sticky{position:sticky; top:0; height:100vh; height:100svh; overflow:hidden; pointer-events:none; z-index:2;}
.sc3-ui{position:relative; height:100%; max-width:1240px; margin:0 auto; padding:112px 28px 36px;}
.sc3-head{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; transition:opacity .4s ease;}
.sc3-head .sc3-all{pointer-events:auto;}
.sc3-caps{list-style:none; position:absolute; left:28px; bottom:36px; width:min(380px, calc(100% - 56px)); height:176px;}
.sc3-cap{position:absolute; left:0; right:0; bottom:0; background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg); padding:22px 24px; box-shadow:var(--shadow-card); opacity:0; transform:translateY(22px); transition:opacity .45s ease, transform .6s cubic-bezier(.2,.8,.2,1); pointer-events:none;}
.sc3-cap.is-active{opacity:1; transform:none; pointer-events:auto;}
.sc3-count{display:flex; align-items:center; gap:10px; font-family:var(--ff-mono); font-size:12px; font-weight:600; letter-spacing:.14em; color:var(--ink);}
.sc3-count i{font-style:normal; color:var(--muted);}
.sc3-count b{font-weight:600; color:var(--accent-ink); text-transform:uppercase;}
.sc3-cap h3{font-size:clamp(20px,2.1vw,27px); margin:10px 0 16px; text-wrap:balance;}
.sc3-rail{position:absolute; right:28px; top:50%; transform:translateY(-50%); display:flex; flex-direction:column; gap:9px; transition:opacity .4s ease;}
.sc3-tick{width:3px; height:24px; border-radius:3px; background:var(--line); transition:height .4s ease, background .4s ease;}
.sc3-tick.is-active{height:46px; background:var(--lime-deep);}
.sc3-end{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; opacity:0; transform:scale(.94); transition:opacity .5s ease, transform .7s cubic-bezier(.2,.8,.2,1); pointer-events:none;}
.sc3-ui.is-end .sc3-end{opacity:1; transform:none;}
.sc3-ui.is-end .sc3-end a{pointer-events:auto;}
.sc3-ui.is-end .sc3-head,.sc3-ui.is-end .sc3-rail{opacity:0;}
.sc3-ui.is-end .sc3-cap{opacity:0; pointer-events:none;}
.sc3-ui.is-end .sc3-head .sc3-all{pointer-events:none;}

@media (max-width:759px){
  .hero.hero-3d{padding-top:106px;}
  .hero3d-copy h1{font-size:clamp(34px,9.6vw,46px);}
  .hero3d-copy .hero-marks{gap:8px 16px;}
  .hero3d-copy .hero-marks span{font-size:12.5px;}
  .hero3d-hint{bottom:16px;}
  .hero3d-hint .hint-drag,.hero3d-hint .hint-line{display:none;}
  .sc3-ui{padding:92px 20px 20px;}
  .sc3-head .sc3-all,.sc3-rail{display:none;}
  .sc3-caps{left:20px; bottom:20px; width:calc(100% - 40px); height:150px;}
  .sc3-cap{padding:18px 20px;}
}

/* ================= motion helpers ================= */
.mw{display:inline-block; overflow:hidden; vertical-align:top; padding:0 .04em .1em; margin:0 -.04em -.1em;}
.mwi{display:inline-block;}
.scroll-progress{position:fixed; top:0; left:0; right:0; height:3px; background:var(--lime-deep); transform-origin:0 50%; transform:scaleX(0); z-index:1001; pointer-events:none;}
.tilt-glare{position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0; transition:opacity .35s ease; background:radial-gradient(380px circle at var(--gx,50%) var(--gy,0%), rgba(255,255,255,.5), transparent 50%); mix-blend-mode:soft-light;}
.service-card:hover .tilt-glare{opacity:1;}
.x3d-motion .service-card{transition:box-shadow .3s ease, border-color .3s ease, background .3s ease;}
.x3d-motion .magnetic{transition:background .25s ease, color .25s ease, box-shadow .25s ease, border-color .25s ease;}

/* skip showcase */
.sc3-skip{position:absolute; right:28px; bottom:36px; display:inline-flex; align-items:center; gap:8px; padding:11px 18px; border-radius:100px; background:var(--white); border:1px solid var(--line); color:var(--ink); font-size:14px; font-weight:600; text-decoration:none; box-shadow:var(--shadow-card); opacity:0; transform:translateY(12px); pointer-events:none; transition:opacity .35s ease, transform .35s ease, background .2s ease;}
.sc3-skip.is-on{opacity:1; transform:none; pointer-events:auto;}
.sc3-skip:hover{background:var(--paper-2); color:var(--ink);}
@media (max-width:759px){ .sc3-skip{right:20px; bottom:auto; top:92px; padding:9px 14px; font-size:13px;} }