*{margin:0;padding:0;box-sizing:border-box}
:root{
  --gold:#d2b164;
}
html,body{min-height:100%;background:#000}
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:
    radial-gradient(46% 28% at 50% 19%, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.07) 24%, rgba(255,255,255,0.02) 45%, rgba(0,0,0,0) 70%),
    linear-gradient(180deg, #181818 0%, #000000 100%);
  color:#fff;display:flex;justify-content:center;overflow-x:hidden;
}
.container{
  width:100%;max-width:480px;min-height:100dvh;padding:34px 24px 0;text-align:center;
  display:flex;flex-direction:column;align-items:center;position:relative;overflow:hidden;
}
.noise{
  position:absolute;inset:0;pointer-events:none;opacity:.07;
  background-image:radial-gradient(rgba(255,255,255,.65) .45px, transparent .65px);
  background-size:14px 14px;mask-image:linear-gradient(180deg, rgba(0,0,0,.9), rgba(0,0,0,.25));
}
.ambient{position:absolute;border-radius:999px;pointer-events:none;filter:blur(50px)}
.ambient-top{
  width:70%;height:22%;top:12%;left:15%;
  background:radial-gradient(circle, rgba(255,255,255,.14), rgba(255,255,255,.03) 45%, transparent 75%);
}
.ambient-mid{
  width:78%;height:22%;top:54%;left:11%;
  background:radial-gradient(circle, rgba(210,177,100,.16), rgba(210,177,100,.03) 45%, transparent 75%);
}
.header{margin-bottom:30px;display:flex;align-items:center;justify-content:center;position:relative;z-index:2}
.logo{width:280px;max-width:82vw;height:auto;display:block;filter:drop-shadow(0 10px 18px rgba(0,0,0,.22))}
.hero{width:100%;display:flex;flex-direction:column;align-items:center;position:relative;z-index:2}
.headline{
  max-width:11ch;font-size:clamp(42px, 9.3vw, 56px);font-weight:800;line-height:.96;letter-spacing:-.055em;margin-bottom:18px;
}
.subheadline{
  max-width:18ch;font-size:21px;font-weight:400;line-height:1.28;letter-spacing:-.03em;color:#e0e0e0;margin-bottom:28px;
}
.subheadline strong{color:#fff;font-weight:700}
.app-buttons{display:flex;flex-direction:column;gap:12px;margin-bottom:34px;width:100%;align-items:center}
.store-wrap{
  width:100%;max-width:360px;min-height:74px;padding:14px 18px;border-radius:22px;
  display:flex;align-items:center;justify-content:center;gap:14px;text-decoration:none;color:#fff;
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 18px 40px rgba(0,0,0,.30), 0 0 0 1px rgba(255,255,255,.02);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.store-wrap:hover{
  border-color:rgba(210,177,100,.34);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 20px 44px rgba(0,0,0,.34), 0 0 26px rgba(210,177,100,.08);
}
.store-wrap:active{transform:scale(.985)}
.store-icon{
  width:42px;height:42px;border-radius:14px;display:grid;place-items:center;flex:0 0 auto;
  background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.05));
  border:1px solid rgba(255,255,255,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  font-weight:700;
}
.store-icon.apple{font-size:1.45rem}
.store-icon.play{font-size:.95rem;padding-left:2px}
.store-copy{display:flex;flex-direction:column;align-items:flex-start;line-height:1.02;min-width:148px}
.store-copy small{font-size:.74rem;color:rgba(255,255,255,.68);font-weight:500}
.store-copy strong{font-size:1.16rem;font-weight:800;letter-spacing:-.02em}
.card-image-container{
  width:100%;display:flex;justify-content:center;position:relative;margin-top:4px;min-height:270px;overflow:visible;
}
.card-glow{
  position:absolute;width:115%;height:70%;left:50%;top:16%;transform:translateX(-50%);
  background:
    radial-gradient(circle at center, rgba(255,255,255,.15) 0%, rgba(255,255,255,.06) 26%, rgba(210,177,100,.09) 42%, rgba(0,0,0,0) 72%);
  filter:blur(8px);
}
.card-image{
  width:132%;max-width:560px;height:auto;position:relative;z-index:2;transform:translateY(4px);
  filter:drop-shadow(0 -8px 22px rgba(0,0,0,0.42)) drop-shadow(0 14px 28px rgba(0,0,0,0.52));
  animation: floatCards 5.5s ease-in-out infinite;
  transform-origin:center center;
}
@keyframes floatCards{
  0%{transform:translateY(6px) rotate(0deg)}
  50%{transform:translateY(-4px) rotate(-1deg)}
  100%{transform:translateY(6px) rotate(0deg)}
}
@media (min-width:420px){.card-image{width:136%}}