:root {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --motion-press: 160ms;
}

/* Native scrolling drives the sequence. There is no wheel/touch interception. */
.scroll-progress {
  position: fixed;
  inset: 0 0 auto;
  height: 3px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  z-index: 50;
  pointer-events: none;
}
.hero-scene {
  position: relative;
  height: calc(min(1000px, 100svh) + 68svh);
  min-height: calc(780px + 68svh);
}
.hero-scene > .hero { position: sticky; top: 0; }
.hero-line {
  display: block;
  overflow: clip;
  padding: .12em .04em;
  margin: -.12em -.04em;
}
.hero-line-drift, .hero-line-enter { display: block; }
.hero-product-stage { opacity: 1; perspective: 1500px; transform-style: preserve-3d; pointer-events: none; }
.hero-browser-entry { position: absolute; top: 19%; right: 10%; width: 43%; max-width: 760px; transform-style: preserve-3d; }
.hero-mobile-entry { position: absolute; top: 25%; right: 12%; width: 16%; max-width: 235px; transform-style: preserve-3d; }
.hero-web-scroll, .hero-mobile-scroll { transform-style: preserve-3d; }
.hero-web-scroll { transform: rotateX(7deg) rotateY(-14deg) rotateZ(-8deg); }
.hero-mobile-scroll { transform: translateZ(80px) rotateY(-12deg) rotateZ(9deg); }
.hero-browser-frame { border: 1px solid #55584d; border-radius: 12px; overflow: hidden; background: #151713; box-shadow: 0 40px 70px #000a; }
.hero-browser-frame > img { display: block; width: 100%; height: auto; filter: grayscale(1); }
.browser-chrome { min-height: 32px; padding: 10px 14px; display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 8px; letter-spacing: .07em; color: #c9cec0; }
.window-dots { display: flex; gap: 5px; }
.window-dots i { display: block; width: 5px; height: 5px; border-radius: 50%; background: #787e6c; }
.hero-phone-frame { border: 7px solid #282b23; border-radius: 30px; overflow: hidden; background: #080a07; box-shadow: 0 30px 60px #000c; }
.hero-phone-frame > img { display: block; width: 100%; height: auto; filter: grayscale(1); }
.hero-device-caption { display: block; margin-top: 14px; color: #abb29f; font-size: 8px; letter-spacing: .08em; text-align: center; }
.hero:after { background: linear-gradient(0deg,#0c0d0b 0%,#0c0d0bea 21%,#0c0d0b70 47%,transparent 72%),linear-gradient(90deg,#0c0d0b66,transparent 64%); }
.motion-enabled .hero-browser-entry { animation: device-arrive-web 1400ms var(--ease-out) both !important; }
.motion-enabled .hero-mobile-entry { animation: device-arrive-mobile 1400ms 80ms var(--ease-out) both !important; }
.motion-enabled .hero-browser-float { animation: device-float-web 8s var(--ease-in-out) infinite alternate !important; }
.motion-enabled .hero-mobile-float { animation: device-float-mobile 7s var(--ease-in-out) infinite alternate !important; }
.motion-toggle { display: inline-flex; align-items: center; gap: 7px; padding: 9px 0; font-size: 10px; white-space: nowrap; }
.motion-toggle-state { color: var(--accent); font-weight: 650; }
.motion-toggle[aria-pressed="false"] .motion-toggle-state { color: var(--muted); }
html[data-motion="reduced"] { scroll-behavior: auto; }
@keyframes device-arrive-web { from { transform: translate3d(160px,130px,-180px); } to { transform: translate3d(0,0,0); } }
@keyframes device-arrive-mobile { from { transform: translate3d(80px,200px,-140px); } to { transform: translate3d(0,0,0); } }
@keyframes device-float-web { from { transform: translateY(-10px) rotate(-1deg); } to { transform: translateY(12px) rotate(1deg); } }
@keyframes device-float-mobile { from { transform: translateY(14px) rotate(1deg); } to { transform: translateY(-12px) rotate(-1deg); } }
@media (prefers-reduced-motion: no-preference) {
  html:not([data-motion="reduced"]) .hero-browser-entry { animation: device-arrive-web 1400ms var(--ease-out) both; }
  html:not([data-motion="reduced"]) .hero-mobile-entry { animation: device-arrive-mobile 1400ms 80ms var(--ease-out) both; }
  html:not([data-motion="reduced"]) .hero-browser-float { animation: device-float-web 8s var(--ease-in-out) infinite alternate; }
  html:not([data-motion="reduced"]) .hero-mobile-float { animation: device-float-mobile 7s var(--ease-in-out) infinite alternate; }
}
.hero-line-enter > span { white-space: nowrap; }
.motion-word-mask {
  display: inline-block;
  vertical-align: top;
  clip-path: inset(-.12em -.08em -.12em -.08em);
}
.motion-word { display: inline-block; }
.motion-word-mask.word-rested { clip-path: none; }
.project-media { display: block; width: 100%; height: 100%; }
.project-media > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero-art.motion-track-active, .hero-web-scroll.motion-track-active, .hero-mobile-scroll.motion-track-active, .project-media.motion-track-active { will-change: transform; }
.project-media > img { transition: transform 250ms var(--ease-out); }
.project-open { transition: transform 200ms var(--ease-out); }
.button, .round-arrow { transition: transform var(--motion-press) var(--ease-out); }
.button-light:hover, .button-dark:hover, .round-link:hover .round-arrow { transform: none; }
.project-visual:hover .project-open { transform: none; }
.button:active { transform: scale(.97); }

@media (min-width: 1101px) and (prefers-reduced-motion: no-preference) {
  .motion-enabled .service-heading { position: sticky; top: 72px; align-self: start; }
}
@media (max-width: 1100px) {
  .hero-scene { height: calc(95svh + 52svh); min-height: calc(740px + 52svh); }
  .hero-browser-entry { top: 23%; width: 52%; right: 13%; }
  .hero-mobile-entry { top: 25%; width: 19%; right: 10%; }
  .header { gap: 20px; }
  .header-cta { margin-left: 8px; gap: 20px; }
  .desktop-nav { gap: 22px; }
}
@media (min-width: 761px) and (max-width: 1000px) {
  .header-name { display: none; }
}
@media (max-width: 760px) {
  .hero-scene { height: calc(100svh - 8px + 24svh); min-height: calc(710px + 24svh); }
  .hero h1 > .hero-line { white-space: nowrap; }
  .scroll-progress { height: 2px; }
  .hero .hero-product-stage { width: 100%; left: 0; opacity: 1; }
  .hero-browser-entry { top: 24%; right: 8%; width: 82%; }
  .hero-mobile-entry { top: 23%; right: 11%; width: 28%; }
  .hero-browser-frame { border-radius: 7px; }
  .browser-chrome { min-height: 20px; padding: 6px 8px; font-size: 5px; gap: 8px; }
  .window-dots { gap: 3px; }
  .window-dots i { width: 3px; height: 3px; }
  .hero-phone-frame { border-width: 4px; border-radius: 16px; }
  .hero-device-caption { font-size: 5px; margin-top: 8px; }
  .header { gap: 12px; }
  .header-name { display: block; max-width: 90px; font-size: 9px; }
  .header-name span { display: none; }
  .motion-toggle { margin-left: auto; gap: 5px; font-size: 9px; }
  .menu-button { margin-left: 0; gap: 10px; }
}
@media (max-width: 370px) {
  .hero-scene { min-height: calc(690px + 24svh); }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .button-light:hover, .button-dark:hover { transform: translateY(-2px); }
  .round-link:hover .round-arrow { transform: translateY(3px); }
  .project-visual:hover .project-media > img { transform: scale(1.035); }
  .project-visual:hover .project-open { transform: rotate(-45deg); }
}
@media (prefers-reduced-motion: reduce) {
  body:not(.motion-enabled) .motion-track-active { will-change: auto; }
  .button:active { transform: none; }
}