:root{
  --ink:#0d1216; --ink2:#141b20; --teal:#1a7f7a; --teal-soft:#7fd6cf;
  --paper:#eef0ef; --muted:#93a0a3;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  background:var(--ink);
  color:var(--paper);
  font-family:'Helvetica Neue',Arial,sans-serif;
  overflow-x:hidden;
}
.stage{
  position:relative;min-height:100%;display:flex;align-items:center;
  background:
    radial-gradient(62% 72% at 68% 40%, rgba(196,206,210,.20) 0%, rgba(196,206,210,0) 64%),
    radial-gradient(38% 38% at 60% 10%, rgba(226,232,234,.13) 0%, rgba(226,232,234,0) 72%),
    linear-gradient(180deg,#13181b 0%,#1d2429 55%,#151a1e 100%);
  overflow:hidden;
}
.stage:after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.35;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}
.hero{
  position:relative;z-index:2;width:100%;max-width:1320px;margin:0 auto;
  padding:80px 32px 120px;
}
.logo{width:min(420px,72vw);display:block;opacity:0;animation:rise .9s .1s cubic-bezier(.2,.7,.3,1) forwards}
.rule{width:96px;height:3px;background:var(--teal);margin:34px 0 30px;opacity:0;animation:grow .8s .5s cubic-bezier(.2,.7,.3,1) forwards}
h1{
  font-size:clamp(30px,4.4vw,52px);line-height:1.08;letter-spacing:-.02em;margin:0 0 18px;
  font-weight:400;max-width:12em;opacity:0;animation:rise .9s .35s cubic-bezier(.2,.7,.3,1) forwards;
}
h1 span{color:#c9d2d5}
p.lede{
  color:var(--muted);font-size:clamp(15px,1.5vw,19px);line-height:1.6;max-width:26em;margin:0 0 38px;
  opacity:0;animation:rise .9s .5s cubic-bezier(.2,.7,.3,1) forwards;
}
.cta{
  display:inline-block;text-decoration:none;color:#11171a;background:#e6eaeb;
  padding:17px 34px;font-size:15px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;
  border-radius:2px;transition:transform .25s,background .25s,box-shadow .25s;
  opacity:0;animation:rise .9s .65s cubic-bezier(.2,.7,.3,1) forwards;
  box-shadow:0 10px 36px rgba(0,0,0,.45);
}
.cta:hover{background:#fff;transform:translateY(-2px);box-shadow:0 16px 46px rgba(0,0,0,.55)}
.soon{
  margin-top:74px;display:flex;align-items:center;gap:14px;color:var(--muted);
  font-size:12px;letter-spacing:.22em;text-transform:uppercase;
  opacity:0;animation:rise .9s .85s cubic-bezier(.2,.7,.3,1) forwards;
}
.soon .dot{width:7px;height:7px;border-radius:50%;background:var(--teal);animation:pulse 2.4s infinite}
.socials{
  margin-top:12px;display:flex;gap:26px;
  font-size:12px;letter-spacing:.22em;text-transform:uppercase;
  opacity:0;animation:rise .9s 1s cubic-bezier(.2,.7,.3,1) forwards;
}
.socials[hidden]{display:none}
.socials a{padding:10px 0;color:var(--muted);text-decoration:none;transition:color .25s}
.socials a:hover,.socials a:focus-visible{color:var(--teal-soft)}
.person{
  position:absolute;right:2%;bottom:0;height:94%;z-index:1;
  filter:drop-shadow(0 30px 60px rgba(0,0,0,.55));
  opacity:0;animation:fade 1.3s .15s ease forwards;
}
.person img{height:100%;width:auto;display:block}
.floor{
  position:absolute;right:2%;bottom:-40px;width:520px;height:120px;z-index:0;
  background:radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,.75) 0%, rgba(0,0,0,0) 70%);
}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0;transform:translateY(24px) scale(1.01)}to{opacity:1;transform:none}}
@keyframes grow{from{opacity:0;width:0}to{opacity:1;width:96px}}
@keyframes pulse{0%,100%{opacity:.35}50%{opacity:1}}
@media (max-width:900px){
  .stage{flex-direction:column;align-items:stretch;justify-content:flex-start}
  .hero{padding:52px 22px 26px;max-width:100%;order:1}
  .person{position:relative;right:auto;bottom:auto;height:auto;width:86%;max-width:420px;margin:-10px auto 0;z-index:1;order:2}
  .person img{width:100%;height:auto;filter:drop-shadow(0 18px 38px rgba(0,0,0,.6))}
  h1{max-width:100%}
  .soon{margin-top:38px}
  .floor{display:none}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;opacity:1!important}}