:root{
  --bg1: #0f172a;
  --bg2: #0b1220;
  --accent: #ffd166;
  --frame-bg: rgba(255,255,255,0.03);
  --frame-border: rgba(255,255,255,0.12);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: linear-gradient(135deg,var(--bg1),var(--bg2));
  color:#fff;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow:hidden;
}

.scene{position:relative;width:100vw;height:100vh}
.background-gradient{position:absolute;inset:0;background: radial-gradient(600px 300px at 20% 70%, rgba(255,193,7,0.06), transparent 15%), radial-gradient(500px 300px at 80% 30%, rgba(0,150,255,0.03), transparent 10%);pointer-events:none}

.frame{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:68%;max-width:980px;height:48%;min-height:260px;border-radius:14px;background:var(--frame-bg);border:1px solid var(--frame-border);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 40px rgba(2,6,23,0.6), inset 0 1px 0 rgba(255,255,255,0.02);backdrop-filter: blur(4px);z-index:2;padding:28px;text-align:center}
.content{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}
.content h1{font-size:clamp(28px,6vw,48px);letter-spacing:0.6px;color:var(--accent);margin-bottom:10px}
.content p{opacity:0.86}
.cta-link{display:inline-block;margin-top:8px;padding:10px 20px;background:var(--accent);color:#000;text-decoration:none;border-radius:6px;font-weight:500;font-size:14px;transition:all 0.3s ease;cursor:pointer}
.cta-link:hover{transform:scale(1.05);box-shadow:0 4px 12px rgba(255,209,102,0.3)}

.cheetah-3d{position:absolute;left:-30%;bottom:20%;width:clamp(220px,38vw,550px);height:clamp(200px,65vh,750px);z-index:1;pointer-events:none;filter: drop-shadow(0 10px 30px rgba(0,0,0,0.55));will-change:left, transform}
.cheetah-3d canvas{width:100%;height:100%;display:block}

/* classes used/added by JS to control entry */
.cheetah-3d.start{animation: runToFrame 1.6s cubic-bezier(.22,.9,.22,1) forwards}
.cheetah-3d.running .leg{animation: legCycle 0.22s steps(2) infinite;transform-origin:center top}
.cheetah-3d.running #tail{animation: tailWobble 0.9s ease-in-out infinite}

@keyframes runToFrame{0%{left:-30%;transform:scale(1) translateY(0) rotate(0deg)}60%{left:53%;transform:translateX(-50%) translateY(-6px) scale(1.04) rotate(-1deg)}85%{left:51.6%;transform:translateX(-50%) translateY(0) scale(1.02) rotate(0deg)}100%{left:51%;transform:translateX(-50%) translateY(0) scale(1) rotate(0deg)}}

@keyframes legCycle{0%{transform: translateY(0) rotate(0deg)}50%{transform: translateY(-6px) rotate(-6deg)}100%{transform: translateY(0) rotate(0deg)}}
@keyframes tailWobble{0%{transform: translateY(0)}50%{transform: translateY(-1px)}100%{transform: translateY(0)}}

@media (max-width:920px){.frame{width:92%;height:46%;padding:18px}.cheetah-3d{width:32vw}}
@media (max-width:720px){.frame{width:94%;height:46%;padding:14px}.cheetah-3d{width:46vw;left:-40%;bottom:8%}}