/* entrance: staggered reveal on load */
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{transform:none}}
@keyframes cardIn{from{opacity:0;transform:translateY(48px) scale(.96)}to{transform:none}}
@keyframes fadeIn{from{opacity:0}}
.header{animation:fadeIn .9s var(--ease) both}
h1{animation:rise .9s var(--ease) both .1s}
.tiles{animation:rise .9s var(--ease) both .25s}
.lead{animation:rise .9s var(--ease) both .38s}
.stage{animation:cardIn 1.2s var(--ease) both .3s}
.desc{animation:rise .9s var(--ease) both .75s}
.track>*{animation:rise .8s var(--ease) both}
.track>:nth-child(1){animation-delay:.9s}.track>:nth-child(2){animation-delay:.96s}.track>:nth-child(3){animation-delay:1.02s}
.track>:nth-child(4){animation-delay:1.08s}.track>:nth-child(5){animation-delay:1.14s}.track>:nth-child(6){animation-delay:1.2s}.track>:nth-child(7){animation-delay:1.26s}
#gradient{animation:fadeIn 1.6s ease both}
@media (prefers-reduced-motion:reduce){.header,h1,.tiles,.lead,.stage,.desc,.track>*,#gradient{animation:none}}

@keyframes runline{to{transform:translateX(-50%)}}
/* ---------- small screens: stacked flow layout ---------- */
@media (max-width:1199px){
  .frame{width:auto;height:auto;padding:0 16px 40px;transform:none!important;display:flex;flex-direction:column;gap:28px}
  .header,.copy,.lead,.stage,.desc,.badges{position:relative;left:auto;top:auto;bottom:auto;width:auto}
  .header{padding:16px 0}
  .menu{display:none}
  .contact{padding:10px 12px 10px 14px;font-size:14px}
  .copy{gap:24px}
  h1{font-size:34px}
  .tiles{gap:12px}
  .stage{height:auto}
  .desc{margin-top:-60px;margin-left:12px;width:250px;max-width:calc(100% - 24px)}
  .desc h2{white-space:normal}
  .badges{display:block;overflow:hidden;margin-inline:-16px;padding:8px 0;
    -webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
  .track{display:flex;align-items:center;gap:40px;width:max-content;padding-right:40px;animation:runline 28s linear infinite}
  .badges .dup{display:flex}
  .badges:hover .track{animation-play-state:paused}
  .track>*{flex:none}
  .clutch{width:180px;height:150px}
  .clutch b{font-size:46px}.clutch .st{font-size:20px}.clutch small{font-size:16px}.clutch em{font-size:13px}
  .fade{display:none}
}
@media (prefers-reduced-motion:reduce){
  .track{animation:none!important}
  .badges .dup{display:none!important}
  .badges{overflow-x:auto}
  .z,.btn,.btn svg,.contact svg,.dots button,.tip{transition:none}
  .desc.swap *{animation:none}
}