/* Hero composition: one source of truth. Layers: orb 0, platform 1, cards 2/3.
   Desktop gets real depth; compact/touch layouts get ordered, flat surfaces. */
.hero-stage{position:relative;width:100%;max-width:610px;height:540px;margin:auto;perspective:1500px;transform-style:preserve-3d;pointer-events:none;z-index:1}
.stage-orb{position:absolute;inset:11% 8% 9%;border-radius:46%;z-index:0;background:radial-gradient(circle at 35% 28%,#fff 0 4%,#b6a1ff 25%,#6754ef 52%,#151a37 76%,#070910 100%);transform:translateZ(-90px);box-shadow:0 35px 65px rgba(63,52,180,.16)}
.device-card{position:absolute;border:1px solid #dce1ed;box-shadow:0 22px 48px rgba(30,35,62,.16);background:linear-gradient(160deg,#fff,#edf1f8);color:#141a29;backface-visibility:hidden;overflow:hidden}
.device-card.one{left:2%;top:16%;width:51%;height:260px;border-radius:27px;z-index:2;transform:rotateY(14deg) rotateX(7deg) rotateZ(-5deg) translateZ(24px)}
.device-card.two{right:1%;top:24%;width:45%;height:280px;border-radius:29px;z-index:3;transform:rotateY(-16deg) rotateX(5deg) rotateZ(5deg) translateZ(40px)}
.device-card.three{left:23%;bottom:7%;width:54%;height:15%;border-radius:20px;z-index:1;transform:translateZ(52px) rotateX(67deg);opacity:.78}
.mock-top{height:34px;border-bottom:1px solid #e0e4ed;display:flex;align-items:center;gap:6px;padding:0 14px}
.mock-top i{width:7px;height:7px;border-radius:50%;background:#c5cad5}
.mock-body{padding:14px}
.mock-label{font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:#667186}
.mock-title{font-size:24px;line-height:1.15;letter-spacing:-.04em;font-weight:800;margin-top:6px}
.mock-chart{height:60px;border-radius:12px;margin-top:14px;background:linear-gradient(180deg,rgba(91,79,246,.22),transparent),repeating-linear-gradient(90deg,transparent 0 35px,rgba(100,110,140,.09) 36px)}
.mock-list{display:grid;gap:6px;margin-top:14px}
.mock-list span{height:8px;border-radius:8px;background:rgba(110,120,145,.15)}
.mock-list span:nth-child(2){width:82%}.mock-list span:nth-child(3){width:61%}
@media(min-width:1280px) and (max-height:860px){.hero-stage{height:500px;max-width:575px}}
@media(max-width:1024px),(hover:none),(pointer:coarse){
  .hero-stage{max-width:520px;height:350px;perspective:none;transform-style:flat;isolation:isolate;transform:none;translate:none}
  .stage-orb{inset:10% 7% 9%;transform:none;box-shadow:0 22px 40px rgba(63,52,180,.14)}
  .device-card{box-shadow:0 14px 28px rgba(10,12,30,.14);border-radius:22px}
  .device-card.one{left:3%;top:22px;width:56%;height:208px;transform:rotate(-4deg)}
  .device-card.two{right:3%;top:128px;width:48%;height:190px;transform:rotate(4deg)}
  .device-card.three{left:20%;bottom:10px;width:60%;height:20px;transform:none;border-radius:50%;opacity:.65}
  .mock-top{height:28px}.mock-body{padding:12px}.mock-label{font-size:8px;letter-spacing:.06em}
  .mock-title{font-size:20px}.mock-chart{height:44px;margin-top:12px;border-radius:9px}
  .mock-list{margin-top:12px;gap:5px}.mock-list span{height:6px}
}

/* Motion is opt-in after the local module loads. Nothing is hidden without JS. */
.studio-motion-ready [data-motion-waiting]{opacity:0}
.studio-motion-ready :is([data-motion],.reveal){transition-property:box-shadow,border-color,background-color,color;transition-duration:.25s}
.studio-motion-ready .catalog-enter{animation:none}
.scroll-progress span{background:var(--brand);will-change:auto}
[data-scroll-depth],.tilt{will-change:auto}

/* A quieter hierarchy and consistent spacing, retaining Zem's brand and routes. */
body[data-page="home"] .hero-grid{opacity:.35}
body[data-page="home"] .hero-copy .display{line-height:1.03;letter-spacing:-.055em}
@media(min-width:1025px){
  body[data-page="home"] .hero{min-height:760px}
  body[data-page="home"] .hero-copy .display{font-size:clamp(54px,5.2vw,76px);max-width:640px;text-wrap:initial}
  body[data-page="home"] .hero-inner{padding-top:104px;padding-bottom:64px}
}
body[data-page="home"] .hero-copy p{max-width:52ch}
body[data-page="home"] .home-section .section-head{align-items:flex-start;gap:20px}
body[data-page="home"] .section-head p{max-width:54ch}
.btn{transition:background-color .25s,border-color .25s,box-shadow .25s,translate .25s cubic-bezier(.22,1,.36,1)}
.btn:active{translate:0 1px}
.btn:focus-visible,.process-link:focus-visible{outline:3px solid #7767e8;outline-offset:5px}
.mobile-nav{max-height:calc(100dvh - 88px - env(safe-area-inset-top));overflow-y:auto;overscroll-behavior:contain}
@media(min-width:1121px){.mobile-nav{display:none!important}}
.mobile-nav.open{animation:menu-arrive .22s cubic-bezier(.22,1,.36,1)}
@keyframes menu-arrive{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
.faq-list summary{min-height:52px;align-content:center}
.faq-list details[open] p{animation:answer-arrive .3s cubic-bezier(.22,1,.36,1)}
@keyframes answer-arrive{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}

/* Process content stays in document flow and readable to keyboard/screen readers. */
.process-section{padding:100px 0;background:#f0f2f8;border-block:1px solid #e0e4ee}
.process-layout{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(32px,7vw,100px);align-items:start}
.process-intro{position:sticky;top:120px}
.process-intro p{color:var(--muted);font-size:18px;line-height:1.7;max-width:40ch}
.process-link{display:inline-flex;gap:12px;align-items:center;margin-top:16px;font-weight:750;color:var(--brand);min-height:44px}
.process-list{list-style:none;padding:0;margin:0;display:grid;gap:24px;counter-reset:process}
.process-card{counter-increment:process;background:#fff;border:1px solid #dce1ed;border-radius:26px;padding:clamp(24px,3vw,40px);box-shadow:0 12px 32px rgba(33,43,68,.04)}
.process-card::before{content:counter(process,decimal-leading-zero);display:block;color:#6a5bd1;font-size:13px;font-weight:750;letter-spacing:.08em;margin-bottom:30px}
.process-card h3{font-size:clamp(25px,2.5vw,34px);letter-spacing:-.04em;margin:0 0 16px;line-height:1.15}
.process-card p{color:var(--muted);line-height:1.75;margin:0;max-width:48ch}
.process-card ul{padding:20px 0 0;margin:24px 0 0;border-top:1px solid #e9ecf3;display:flex;flex-wrap:wrap;gap:8px 20px;list-style:none;font-size:12px;font-weight:650;color:#59647a}
@media(max-width:768px){
  .process-section{padding:64px 0}.process-layout{grid-template-columns:1fr;gap:28px}.process-intro{position:static}.process-list{gap:16px}.process-card::before{margin-bottom:20px}
  body[data-page="home"] .hero-inner{padding-top:30px;gap:22px}
  body[data-page="home"] .hero-copy .display{font-size:clamp(40px,11.5vw,64px)}
  body[data-page="home"] .hero-copy p{font-size:17px;line-height:1.65;margin:20px 0 24px}
}
@media(prefers-reduced-transparency:reduce){.site-header,.mobile-nav{backdrop-filter:none;background:#f8f9fc}}
@media(prefers-reduced-motion:reduce){
  .studio-motion-ready [data-motion-waiting]{opacity:1!important}
  .hero-stage,.device-card,.stage-orb{transform:none!important;translate:none!important;animation:none!important}
  .mobile-nav.open,.faq-list details[open] p{animation:none}
  .process-intro{position:static}
}