:root {
  --gold:#f9ba5e;
  --peach:#e77c62;
  --rose:#be5170;
  --plum:#7b2e72;
  --indigo:#2c185d;
  --txt:#f7f3ff;
}

*{box-sizing:border-box;margin:0;padding:0}
body {
  font-family: system-ui, sans-serif;
  background: linear-gradient(135deg, var(--indigo), var(--plum) 35%, var(--rose) 70%);
  background-size: 200% 200%;
  animation: gradientShift 18s ease-in-out infinite;
  color:var(--txt);
  min-height:100vh;
  display:flex;
  flex-direction:column;
  overflow-x:hidden;
}

/* Layout */
.wrap{flex:1;display:flex;align-items:center;justify-content:center;padding:2rem}
.hero {
  text-align:center;
  padding:2rem 1rem;
  border-radius:1rem;
  background:rgba(255,255,255,.05);
  backdrop-filter:blur(6px);
  box-shadow:0 10px 30px rgba(0,0,0,.3);
  position:relative;
  overflow:hidden;
  transform-style: preserve-3d;
}
.logo {
  width:120px;
  height:120px;
  border-radius:50%;
  object-fit:cover;
  box-shadow:0 6px 20px rgba(0,0,0,.4);
  animation: float 6s ease-in-out infinite, fadeIn 1s ease-out forwards;
  transition: transform .3s, box-shadow .3s;
}
.logo:hover {
  transform: scale(1.1) rotate(5deg);
  box-shadow: 0 0 25px var(--gold);
}
h1 {
  font-size:2rem;
  margin:.5rem 0;
  background:linear-gradient(to right,var(--gold),var(--peach));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  opacity:0;
  animation: fadeSlideUp 1s ease-out forwards;
  animation-delay:.5s;
}
.tag {
  font-size:.9rem;
  color:rgba(255,255,255,.85);
  opacity:0;
  animation: fadeSlideUp .8s ease-out forwards;
  animation-delay:.3s;
}
.lead {
  font-size:1rem;
  margin:1rem auto;
  max-width:30ch;
  line-height:1.5;
  opacity:0;
  animation: fadeSlideUp 1s ease-out forwards;
  animation-delay:.8s;
}

/* CTA */
.cta {
  display:inline-block;
  margin-top:1rem;
  padding:.8rem 1.2rem;
  border-radius:.6rem;
  font-weight:bold;
  color:#1a123f;
  background:linear-gradient(90deg,var(--gold),var(--peach));
  box-shadow:0 5px 15px rgba(0,0,0,.25);
  transition:.2s;
  animation:pulse 2s infinite;
  opacity:0;
  animation: fadeSlideUp 1s ease-out forwards, pulse 2s infinite;
  animation-delay:1.2s, 1.2s;
}
.cta:hover {
  transform:translateY(-2px) scale(1.05);
  box-shadow:0 8px 20px rgba(0,0,0,.35);
}

/* Footer */
footer {
  text-align:center;
  padding:1rem;
  font-size:.9rem;
  color:#ddd;
}
footer a {color:var(--gold);text-decoration:none}
footer a:hover {text-decoration:underline}

/* Modal */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.85);display:none;align-items:center;justify-content:center;z-index:1000;padding:1rem}
.modal.show{display:flex}
.modal-inner{background:rgba(255,255,255,.08);border-radius:.8rem;padding:1rem;max-width:600px;width:100%}
.modal .close{position:absolute;top:.5rem;right:1rem;background:none;border:0;font-size:2rem;color:#fff;cursor:pointer}
.modal video{width:100%;border-radius:.6rem}

/* Sparkles */
.sparkles{position:absolute;inset:0;pointer-events:none}
.sparkles span{
  position:absolute;width:3px;height:3px;border-radius:50%;
  background:#fff;opacity:0;
  animation: sparkleFadeIn 2s forwards, twinkle 3s infinite;
}
.sparkles span:nth-child(1){top:10%;left:15%;animation-delay:.5s, 0s}
.sparkles span:nth-child(2){top:20%;left:70%;animation-delay:.7s, 1s}
.sparkles span:nth-child(3){top:35%;left:40%;animation-delay:.9s, 2s}
.sparkles span:nth-child(4){top:50%;left:80%;animation-delay:1.1s, 1.5s}
.sparkles span:nth-child(5){top:65%;left:25%;animation-delay:1.3s, .5s}
.sparkles span:nth-child(6){top:75%;left:60%;animation-delay:1.5s, 2.2s}
.sparkles span:nth-child(7){top:30%;left:90%;animation-delay:1.7s, 1.2s}
.sparkles span:nth-child(8){top:85%;left:10%;animation-delay:1.9s, 2.8s}
.sparkles span:nth-child(9){top:55%;left:50%;animation-delay:2.1s, .7s}
.sparkles span:nth-child(10){top:15%;left:85%;animation-delay:2.3s, 1.7s}

/* Shards */
.shards{position:absolute;inset:0;pointer-events:none}
.shard{
  position:absolute;width:80px;height:40px;
  background:linear-gradient(135deg,var(--rose),var(--peach));
  opacity:0;border-radius:8px;
  animation: shardEnter 1s ease-out forwards, drift 12s infinite ease-in-out alternate;
  filter: blur(1px);
}
.shard.s1{top:-20px;left:5%;animation-delay:.6s, 2s}
.shard.s2{top:10%;right:5%;animation-delay:.9s, 4s}
.shard.s3{bottom:10%;left:10%;animation-delay:1.2s, 6s}
.shard.s4{bottom:-20px;right:10%;animation-delay:1.5s, 8s}

/* Animations */
@keyframes gradientShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes pulse{0%,100%{opacity:.9;transform:scale(1)}50%{opacity:1;transform:scale(1.05)}}
@keyframes drift{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-20px) rotate(15deg)}}
@keyframes twinkle{0%,100%{opacity:.4;transform:scale(.8)}50%{opacity:1;transform:scale(1.3)}}
@keyframes fadeSlideUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes sparkleFadeIn{from{opacity:0}to{opacity:.8}}
@keyframes shardEnter{from{opacity:0;transform:translateY(30px) scale(.7)}to{opacity:.6;transform:translateY(0) scale(1)}}

/* Larger screens */
@media(min-width:768px){
  .logo{width:180px;height:180px}
  h1{font-size:2.5rem}
  .lead{font-size:1.1rem;max-width:40ch}
}