/* One steady hero: the handheld stays assembled while its game plays. */
:root { --accent:#8bb9ff; --accent-solid:#3478ef; --header:rgba(16,17,19,.85); }
:root[data-theme=light] { --accent:#245db5; --accent-solid:#2563d4; --header:rgba(255,255,255,.85); }
html { scroll-padding-top:105px; }
.site-header { border-bottom:0; }
.header-inner { max-width:none; padding-inline:3.6%; height:80px; }
.wordmark { font-size:37px; font-weight:750; letter-spacing:-2.4px; }
.desktop-nav { margin-left:auto; gap:32px; font-size:13px; }
.header-actions { gap:20px; }
.header-cta { border:1px solid var(--muted); background:transparent; color:var(--ink); padding:10px 21px; }
.header-cta:hover { background:var(--surface); border-color:var(--ink); }
.software-story { position:relative; isolation:isolate; background:var(--bg); }
.story-stage { position:relative; display:flex; align-items:center; width:100%; max-width:2000px; height:calc(100svh - 80px); min-height:560px; margin-inline:auto; padding:0 3.6% 88px; overflow:clip; }
.story-copy-stack { position:relative; z-index:3; width:44%; }
.story-copy { margin:0; min-height:0; }
.story-copy h1 { font-family:Manrope,var(--font); font-size:clamp(66px,8.5vw,150px); font-weight:800; line-height:.99; letter-spacing:-.072em; text-wrap:initial; margin:0; }
.story-description { margin-top:30px; max-width:515px; font-size:clamp(16px,1.43vw,23px); letter-spacing:-.025em; line-height:1.55; color:var(--muted); }
.story-copy .idea-form { width:min(100%,445px); margin:40px 0 0; padding:5px 6px 5px 23px; background:transparent; border:1px solid var(--muted); }
.story-copy .idea-form input { font-size:16px; height:46px; }
.story-copy .idea-form button { width:46px; height:46px; font-size:28px; }
.software-world { position:absolute; top:0; right:-2%; width:62%; height:calc(100% - 122px); min-height:0; z-index:1; touch-action:pan-y pinch-zoom; }
.world-canvas { position:absolute; inset:0; }
.world-canvas canvas { display:block; width:100%; height:100%; }
.software-world-fallback { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.software-world:has([data-renderer=webgl]) .software-world-fallback { opacity:0; }
.story-footer { position:absolute; bottom:28px; left:3.6%; right:3.6%; display:flex; justify-content:space-between; align-items:center; gap:20px; z-index:4; font-size:12px; color:var(--muted); }
.story-footer-actions { display:flex; align-items:center; }
.story-next { display:flex; align-items:center; gap:13px; min-height:44px; color:var(--ink); }
.story-next>span { font-size:18px; }

/* Page foundation shared with the illustrated service sections. */
.section { padding-block:125px; }
.section-heading h2 { font-family:Manrope,var(--font); font-weight:700; letter-spacing:-.055em; }
.section-heading { margin-bottom:65px; }
.capability-art { border-radius:12px; border:1px solid #cfd5de; }
.world-example { border-radius:12px; border:1px solid var(--line); }
.world-example>div { transform:perspective(1000px) rotateX(5deg); transform-origin:center bottom; }
.engineering-item:before { background:linear-gradient(90deg,color-mix(in srgb,var(--accent),transparent 40%),var(--line) 30%); }
.connections { position:relative; }
.system-canvas { transform:perspective(1200px) rotateX(7deg); }
.header-actions .motion-toggle { width:32px; height:38px; padding:0; display:grid; place-items:center; flex:none; }
.header-actions .motion-indicator { font-size:14px; }
.header-actions .motion-label { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.story-copy:focus,.story-stage:focus { outline:none; }

@media(min-width:1800px) { .story-stage { max-width:1850px; } }
@media(max-height:800px) and (min-width:761px) {
  .story-copy h1 { font-size:clamp(60px,6.9vw,106px); }
  .story-description { margin-top:22px; font-size:17px; }
  .story-copy .idea-form { margin-top:27px; }
}
@media(max-width:1100px) {
  .header-inner { padding-inline:28px; }
  .desktop-nav { gap:21px; font-size:12px; }
  .header-actions { gap:12px; }
  .story-copy h1 { font-size:clamp(64px,7.2vw,80px); }
  .story-description { font-size:16px; }
  .story-description br { display:none; }
}
@media(min-width:761px) and (max-width:1100px) { .software-world { right:0; width:56%; } }
@media(max-width:760px) {
  html { scroll-padding-top:88px; }
  .header-inner { height:64px; padding-inline:24px; }
  .wordmark { font-size:30px; }
  .header-cta { padding:8px 13px; font-size:11px; }
  .header-actions { gap:6px; }
  .header-actions .motion-toggle { width:26px; }
  .story-stage { flex-direction:column; align-items:stretch; height:auto; min-height:calc(100svh - 64px); padding:26px 24px 17px; }
  .story-copy-stack { width:100%; }
  .story-copy h1 { font-size:clamp(46px,10.3vw,72px); line-height:1.02; letter-spacing:-.065em; }
  .story-description { font-size:14px; line-height:1.55; margin-top:15px; max-width:350px; }
  .story-copy .idea-form { margin-top:21px; width:min(100%,365px); padding:3px 4px 3px 17px; }
  .story-copy .idea-form input { height:38px; font-size:16px; }
  .story-copy .idea-form button { width:40px; height:40px; }
  .software-world { position:relative; top:auto; right:auto; width:calc(100% + 32px); height:clamp(280px,calc(100svh - 390px),460px); flex:none; margin:20px -16px 8px; }
  .story-footer { position:static; margin-top:auto; gap:16px; font-size:10px; }
  .story-location { max-width:160px; }
  .story-next { font-size:10px; gap:6px; }
  .section { padding-block:84px; }
  .section-heading { margin-bottom:40px; }
}
@media(max-width:370px) {
  .header-inner { gap:10px; padding-inline:18px; }
  .wordmark { font-size:28px; }
  .header-cta { padding:7px 10px; font-size:10px; }
  .story-stage { padding-inline:18px; }
  .story-copy h1 { font-size:43px; }
  .story-location { max-width:125px; font-size:9px; }
}