*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --purple:#a855f7;
  --pink:#ec4899;
  --cyan:#06b6d4;
  --dark:#0f0f1a;
  --darker:#080812;
  --surface:#1a1a2e;
  --text:#e2e8f0;
  --text-dim:#94a3b8;
}

body{
  font-family:system-ui,-apple-system,sans-serif;
  background:var(--darker);
  color:var(--text);
  overflow-x:hidden;
  min-height:100vh;
}

.grid-bg{
  position:fixed;
  inset:0;
  background-image:
    linear-gradient(rgba(168,85,247,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(168,85,247,.03) 1px,transparent 1px);
  background-size:40px 40px;
  pointer-events:none;
  z-index:0;
}

header{
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(8,8,18,.85);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(168,85,247,.15);
}

nav{
  max-width:1100px;
  margin:0 auto;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:1rem 1.5rem;
}

.logo{
  font-weight:800;
  font-size:1.2rem;
  letter-spacing:.15em;
  background:linear-gradient(135deg,var(--purple),var(--pink));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  text-decoration:none;
}

.nav-links{display:flex;gap:1.5rem}
.nav-links a{color:var(--text-dim);text-decoration:none;font-weight:500;transition:color .2s}
.nav-links a:hover{color:var(--purple)}

main{position:relative;z-index:1}

.hero{
  max-width:800px;
  margin:0 auto;
  padding:6rem 1.5rem 4rem;
  text-align:center;
}

.gradient-text{
  font-size:clamp(2.5rem,8vw,5rem);
  font-weight:900;
  background:linear-gradient(135deg,var(--purple),var(--pink),var(--cyan));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:gradientShift 3s ease infinite;
  background-size:200% 200%;
}

@keyframes gradientShift{
  0%,100%{background-position:0% 50%}
  50%{background-position:100% 50%}
}

.hero-sub{
  font-size:1.15rem;
  color:var(--text-dim);
  max-width:600px;
  margin:.75rem auto 2rem;
  line-height:1.7;
}

.hero-buttons{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}

.btn{
  display:inline-block;
  padding:.75rem 1.75rem;
  border-radius:12px;
  font-weight:600;
  font-size:1rem;
  text-decoration:none;
  cursor:pointer;
  border:none;
  transition:all .25s;
}

.btn-primary{
  background:linear-gradient(135deg,var(--purple),var(--pink));
  color:#fff;
  box-shadow:0 4px 20px rgba(168,85,247,.3);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 30px rgba(168,85,247,.5)}

.btn-secondary{
  background:rgba(168,85,247,.1);
  color:var(--purple);
  border:1px solid rgba(168,85,247,.3);
}
.btn-secondary:hover{background:rgba(168,85,247,.2)}

.btn-small{padding:.4rem 1rem;font-size:.85rem;border-radius:8px;background:var(--surface);color:var(--text);border:1px solid rgba(168,85,247,.2)}
.btn-small:hover{background:rgba(168,85,247,.15)}

.btn-large{padding:1rem 3rem;font-size:1.25rem;border-radius:16px;background:linear-gradient(135deg,var(--pink),var(--purple));color:#fff;box-shadow:0 4px 30px rgba(236,72,153,.3)}
.btn-large:hover{transform:scale(1.05);box-shadow:0 8px 40px rgba(236,72,153,.5)}
.btn-large:active{transform:scale(.95)}

.btn-confetti{
  background:linear-gradient(135deg,#f59e0b,#ef4444,#ec4899,var(--purple),var(--cyan));
  background-size:300% 300%;
  color:#fff;
  font-size:1.1rem;
  padding:.85rem 2rem;
  animation:gradientShift 2s ease infinite;
}
.btn-confetti:hover{transform:scale(1.08)}

section{padding:4rem 1.5rem}

h2{
  text-align:center;
  font-size:clamp(1.6rem,4vw,2.2rem);
  margin-bottom:.5rem;
  background:linear-gradient(135deg,var(--text),var(--purple));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

section>p{text-align:center;color:var(--text-dim);max-width:550px;margin:.5rem auto 2rem;line-height:1.6}

.canvas-controls{
  display:flex;align-items:center;gap:.75rem;justify-content:center;flex-wrap:wrap;
  margin-bottom:1rem;
}
.canvas-controls input[type=color]{
  width:40px;height:40px;border-radius:8px;border:2px solid rgba(168,85,247,.3);
  background:transparent;cursor:pointer;padding:2px;
}
.pixel-count{color:var(--text-dim);font-size:.9rem;margin-left:.5rem}

.canvas-wrapper{
  max-width:500px;margin:0 auto;
  border:1px solid rgba(168,85,247,.2);
  border-radius:16px;overflow:hidden;
  background:var(--dark);
}
canvas{display:block;width:100%;cursor:crosshair;touch-action:none}

.about-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:1.5rem;max-width:900px;margin:0 auto;
}

.about-card{
  background:var(--surface);
  border:1px solid rgba(168,85,247,.1);
  border-radius:16px;padding:2rem 1.5rem;text-align:center;
  transition:border-color .3s,transform .3s;
}
.about-card:hover{border-color:rgba(168,85,247,.4);transform:translateY(-4px)}
.about-icon{font-size:2.5rem;margin-bottom:.75rem}
.about-card h3{margin-bottom:.5rem;font-size:1.1rem}
.about-card p{color:var(--text-dim);font-size:.9rem;line-height:1.6}

.surprise-section,.confetti-section{text-align:center}
.surprise-output{
  margin-top:1.5rem;
  min-height:60px;
  display:flex;align-items:center;justify-content:center;
  flex-wrap:wrap;gap:.5rem;
  transition:opacity .3s;
}
.surprise-output.hidden{opacity:0}
.surprise-output:not(.hidden){opacity:1}
.surprise-output .emoji-burst{font-size:2rem;animation:popIn .4s cubic-bezier(.68,-.55,.27,1.55) both}

@keyframes popIn{
  0%{transform:scale(0) rotate(-20deg);opacity:0}
  100%{transform:scale(1) rotate(0);opacity:1}
}

.confetti-section{padding:2rem 1.5rem 5rem}

footer{
  text-align:center;
  padding:2rem 1.5rem;
  color:var(--text-dim);
  font-size:.85rem;
  border-top:1px solid rgba(168,85,247,.1);
}
footer a{color:var(--purple);text-decoration:none}

.confetti-piece{
  position:fixed;
  width:10px;height:10px;
  pointer-events:none;
  z-index:999;
  animation:confettiFall linear forwards;
}
@keyframes confettiFall{
  0%{transform:translateY(-10vh) rotate(0);opacity:1}
  100%{transform:translateY(110vh) rotate(720deg);opacity:0}
}

@media(max-width:640px){
  .hero{padding:4rem 1rem 2rem}
  .nav-links{gap:1rem}
  .btn{padding:.6rem 1.25rem;font-size:.9rem}
}