*{box-sizing:border-box}
html,body{margin:0;background:#0E1218}
a{color:#F6F6FC}a:hover{color:#D3F54F}
::selection{background:#D3F54F;color:#0E1218}

.z-root{position:relative;min-height:100vh;min-height:100svh;width:100%;overflow:hidden;background:#0E1218;color:#F6F6FC;font-family:'Inter',system-ui,sans-serif;display:flex;flex-direction:column}
.z-layer{position:absolute;inset:0;pointer-events:none}

/* ---- clip wall behind the hero ---- */
.z-wall{position:absolute;top:-18%;bottom:-18%;right:-10%;width:74%;pointer-events:none;opacity:0;animation:zwall 2.4s ease .2s forwards}
@keyframes zwall{to{opacity:1}}
.z-tilt{position:absolute;inset:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(8px,.9vw,14px);transform:perspective(1400px) rotateX(10deg) rotateY(16deg) rotateZ(-7deg) scale(1.1);transform-origin:50% 50%}
.z-col{display:flex;flex-direction:column;gap:clamp(8px,.9vw,14px);will-change:transform}
.z-c1{animation:zdown 88s linear infinite}
.z-c2{animation:zupw 104s linear infinite}
.z-c3{animation:zdown 96s linear infinite}
.z-c4{animation:zupw 112s linear infinite}
.z-c5{animation:zdown 92s linear infinite}
.z-c6{animation:zupw 100s linear infinite}
@keyframes zupw{to{transform:translateY(-50%)}}
@keyframes zdown{from{transform:translateY(-50%)}to{transform:translateY(0)}}
.z-tile{flex:0 0 auto;width:100%;aspect-ratio:9/16;border-radius:clamp(10px,1.1vw,18px);overflow:hidden;position:relative;background:#141820;box-shadow:0 10px 30px rgba(0,0,0,.45)}
.z-tile img{width:100%;height:100%;object-fit:cover;display:block}
.z-tile::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}

/* veils: fade the wall into the dark on the left and at the edges */
.z-veil-x{background:linear-gradient(90deg,#0E1218 0%,rgba(14,18,24,.96) 26%,rgba(14,18,24,.82) 44%,rgba(14,18,24,.5) 62%,rgba(14,18,24,.3) 82%,rgba(14,18,24,.5) 100%)}
.z-veil-y{background:linear-gradient(180deg,rgba(14,18,24,.85) 0%,rgba(14,18,24,.25) 22%,rgba(14,18,24,.3) 66%,#0E1218 100%)}

/* colour behind the wordmark */
.z-glows{overflow:hidden}
.z-glow{position:absolute;border-radius:50%}
.z-glow1{left:-8%;top:22%;width:54vw;height:54vw;max-width:820px;max-height:820px;background:radial-gradient(circle,rgba(211,245,79,.22) 0%,rgba(211,245,79,.08) 35%,transparent 68%);filter:blur(70px);animation:zglow1 14s ease-in-out infinite alternate}
.z-glow2{left:14%;top:40%;width:46vw;height:46vw;max-width:700px;max-height:700px;background:radial-gradient(circle,rgba(120,70,200,.26) 0%,rgba(120,70,200,.08) 40%,transparent 70%);filter:blur(80px);animation:zglow2 18s ease-in-out infinite alternate}
.z-glow3{left:30%;top:10%;width:36vw;height:36vw;max-width:560px;max-height:560px;background:radial-gradient(circle,rgba(255,120,80,.14) 0%,transparent 65%);filter:blur(80px)}
@keyframes zglow1{0%{transform:translate(-6%,-4%) scale(1)}100%{transform:translate(8%,6%) scale(1.15)}}
@keyframes zglow2{0%{transform:translate(6%,4%) scale(1.1)}100%{transform:translate(-8%,-6%) scale(.95)}}

/* ---- layout ---- */
.z-nav{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px clamp(20px,5vw,64px)}
.z-brand{display:flex;align-items:center;gap:9px}
.z-brand img{height:22px;width:auto;display:block}
.z-brand span{font-size:15px;letter-spacing:-.01em}
.z-main{position:relative;z-index:2;flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;padding:16px clamp(20px,5vw,64px) 48px}
.z-hero{display:flex;flex-direction:column;gap:22px;max-width:980px}
.z-title{margin:0;display:flex;align-items:center;flex-wrap:wrap;gap:0 clamp(14px,1.6vw,24px);font-weight:700;font-size:clamp(52px,8.6vw,128px);line-height:1;letter-spacing:-.045em}
.z-title img{height:.78em;width:auto;display:block}
.z-muted{font-weight:400;color:#B0B0B8}
.z-tagline{display:flex;align-items:center;font-weight:600;font-size:clamp(22px,2.6vw,36px);line-height:1.15;letter-spacing:-.025em;color:#F6F6FC}
.z-lede{margin:0;max-width:520px;font-size:clamp(15px,1.25vw,18px);line-height:1.55;color:#B0B0B8}
.z-foot{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 clamp(20px,5vw,64px) 28px;font-size:12px;color:#6D6C75}

/* ---- reveals ---- */
.z-up{opacity:0;transform:translateY(18px);animation:zup 1s cubic-bezier(.2,.8,.2,1) forwards}
.z-d0{animation-delay:.2s}.z-d1{animation-delay:.5s}.z-d2{animation-delay:1.4s}.z-d3{animation-delay:1.6s}
@keyframes zup{to{opacity:1;transform:none}}
.z-mask{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.1em;margin-bottom:-.1em}
.z-rise{display:inline-block;transform:translateY(105%);animation:zrise 1.1s cubic-bezier(.2,.8,.2,1) forwards}
.z-r1{animation-delay:.6s}.z-r2{animation-delay:.72s}
@keyframes zrise{to{transform:translateY(0)}}
.z-logo{opacity:0;transform:scale(.6) rotate(-25deg);animation:zlogo 1.2s cubic-bezier(.2,.8,.2,1) .45s forwards}
@keyframes zlogo{to{opacity:1;transform:none}}

/* lime line typing in */
.z-type{display:block;overflow:hidden;white-space:nowrap;max-width:0;animation:ztype 1.4s steps(28) 1.5s forwards}
@keyframes ztype{to{max-width:100%}}
.z-caret{flex:0 0 auto;width:2px;height:.9em;background:#D3F54F;margin-left:6px;animation:zcaret 1s steps(1) infinite}
@keyframes zcaret{50%{opacity:0}}

.z-par{transition:transform 1.4s cubic-bezier(.2,.8,.2,1);will-change:transform}

@media (max-width:860px){.z-hide-m{display:none !important}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms !important;animation-delay:0s !important;animation-iteration-count:1 !important;transition:none !important}}