:root{
  --ink: #2f2b4a;
  --pink: #ff6b8a;
  --pink2:#ff9bb0;
  --purple:#b78cff;
  --blue:#6aa9ff;
  --sky1:#8fd3ff;
  --sky2:#ffd1e0;
  --card:#ffffffcc;
  --shadow: 0 18px 40px rgba(19, 18, 37, .12);
  --radius: 28px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: "Nunito", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--ink);
  background:
    radial-gradient(1200px 800px at 20% 0%, rgba(255,255,255,.75), rgba(255,255,255,0)),
    linear-gradient(180deg, var(--sky1), var(--sky2));
  overflow-x:hidden;
}

a{color:inherit}
.container{
  width:min(1100px, 92vw);
  margin:0 auto;
  padding: 28px 0 80px;
  position:relative;
}

.bg-sparkles{
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.65;
  background-image:
    radial-gradient(circle at 15% 20%, rgba(255,255,255,.9) 0 2px, transparent 3px),
    radial-gradient(circle at 80% 30%, rgba(255,255,255,.85) 0 2px, transparent 3px),
    radial-gradient(circle at 60% 70%, rgba(255,255,255,.8) 0 2px, transparent 3px),
    radial-gradient(circle at 25% 80%, rgba(255,255,255,.75) 0 2px, transparent 3px);
  background-size: 680px 420px;
  animation: drift 16s linear infinite;
}
@keyframes drift{
  0%{transform:translate3d(0,0,0)}
  100%{transform:translate3d(-40px, -30px, 0)}
}

.top-hero{
  position:relative;
  padding: 26px 22px 34px;
  border-radius: calc(var(--radius) + 10px);
  background: rgba(255,255,255,.32);
  box-shadow: var(--shadow);
  overflow:hidden;
  border: 3px solid rgba(255,255,255,.45);
  backdrop-filter: blur(8px);
}

.clouds{
  position:absolute;
  inset:-60px -80px -60px -80px;
  background:
    radial-gradient(140px 90px at 12% 22%, rgba(255,255,255,.9) 0 60%, rgba(255,255,255,0) 61%),
    radial-gradient(180px 110px at 25% 18%, rgba(255,255,255,.85) 0 58%, rgba(255,255,255,0) 59%),
    radial-gradient(200px 120px at 45% 16%, rgba(255,255,255,.8) 0 56%, rgba(255,255,255,0) 57%),
    radial-gradient(190px 120px at 70% 20%, rgba(255,255,255,.85) 0 58%, rgba(255,255,255,0) 59%),
    radial-gradient(150px 95px at 86% 26%, rgba(255,255,255,.9) 0 60%, rgba(255,255,255,0) 61%),
    radial-gradient(220px 140px at 30% 85%, rgba(255,255,255,.75) 0 58%, rgba(255,255,255,0) 59%),
    radial-gradient(260px 160px at 70% 88%, rgba(255,255,255,.72) 0 58%, rgba(255,255,255,0) 59%);
  opacity:.85;
  pointer-events:none;
}

.hero-grid{
  position:relative;
  display:grid;
  grid-template-columns: 1fr minmax(260px, 560px) 1fr;
  gap: 12px;
  align-items:center;
}

.hero-ill{
  width:min(220px, 30vw);
  justify-self:center;
  filter: drop-shadow(0 18px 28px rgba(0,0,0,.14));
  animation: floaty 3.8s ease-in-out infinite;
}
.hero-ill.pencil{animation-delay:-1.2s}
@keyframes floaty{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-10px)}
}

.hero-center{
  text-align:center;
  padding: 12px 10px 0;
  position: relative;
}

.rainbow{
  width:min(700px, 96%);
  display:block;
  position:absolute;
  left:50%;
  top:-18px;
  transform: translateX(-50%);
  z-index: 0;
  pointer-events:none;
}

h1{
  position: relative;
  z-index: 2;
  margin: 110px 0 10px;
  font-family: "Baloo 2", "Nunito", system-ui, sans-serif;
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  line-height:1.05;
  letter-spacing: .5px;
  text-shadow: 0 6px 0 rgba(255,255,255,.7);
}

h1 .gamsat{
  display:inline-block;
  background: linear-gradient(90deg, #ff6b8a, #ffbf4d, #7ee08a, #6aa9ff, #b78cff);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow:none;
}

.subline{
  position: relative;
  z-index: 2;
  display:inline-flex;
  gap:10px;
  align-items:center;
  justify-content:center;
  padding: 12px 18px;
  background: rgba(255,107,138,.18);
  border: 3px solid rgba(255,255,255,.55);
  border-radius: 999px;
  font-weight: 800;
  color: #c43158;
  box-shadow: 0 14px 25px rgba(0,0,0,.08);
}

.subline .spark{
  width: 20px;
  height: 20px;
  display:inline-block;
  background: radial-gradient(circle at 30% 30%, #fff 0 35%, rgba(255,255,255,0) 36%),
              radial-gradient(circle at 70% 70%, #fff 0 35%, rgba(255,255,255,0) 36%);
  border-radius: 6px;
  transform: rotate(12deg);
}

.section-grid{
  margin-top: 26px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.card{
  background: rgba(255,255,255,.65);
  border: 3px dashed rgba(47,43,74,.22);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px 18px 16px;
  position:relative;
  overflow:hidden;
}

.card::after{
  content:"";
  position:absolute;
  inset: -40px -40px auto auto;
  width: 140px;
  height: 140px;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.9), rgba(255,255,255,0) 55%);
  transform: rotate(12deg);
  opacity:.8;
}

.ribbon{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 10px 14px;
  border-radius: 16px;
  font-family: "Baloo 2", "Nunito", system-ui, sans-serif;
  font-weight: 800;
  font-size: 1.2rem;
  border: 3px solid rgba(255,255,255,.7);
  box-shadow: 0 14px 20px rgba(0,0,0,.08);
}

.ribbon.pink{ background: rgba(255,107,138,.35); color:#b62c50; }
.ribbon.purple{ background: rgba(183,140,255,.32); color:#4a2a9a; }

.card-inner{
  margin-top: 10px;
  display:grid;
  grid-template-columns: 170px 1fr;
  gap: 14px;
  align-items:center;
}

.card-inner img{
  width: 170px;
  height: 170px;
  object-fit: contain;
  filter: drop-shadow(0 14px 20px rgba(0,0,0,.12));
}

.card p{
  margin: 0 0 10px;
  font-weight: 700;
  color: rgba(47,43,74,.88);
}

.tagline{
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.55);
  border: 2px solid rgba(47,43,74,.12);
  font-weight: 800;
}

.mid{
  margin-top: 18px;
  padding: 20px 18px;
  border-radius: var(--radius);
  background: rgba(255,255,255,.38);
  border: 3px solid rgba(255,255,255,.55);
  box-shadow: var(--shadow);
  position:relative;
  overflow:hidden;
}
.mid::before{
  content:"";
  position:absolute;
  inset:-90px -120px auto -120px;
  height:200px;
  background: radial-gradient(180px 120px at 18% 55%, rgba(255,255,255,.85), rgba(255,255,255,0) 60%),
              radial-gradient(220px 140px at 55% 40%, rgba(255,255,255,.8), rgba(255,255,255,0) 62%),
              radial-gradient(160px 110px at 86% 65%, rgba(255,255,255,.85), rgba(255,255,255,0) 60%);
  opacity:.85;
}

.mid-title{
  text-align:center;
  margin: 0 0 10px;
  font-family: "Baloo 2", "Nunito", system-ui, sans-serif;
  font-size: clamp(1.6rem, 3.2vw, 2.2rem);
  letter-spacing:.3px;
}
.mid-title small{
  display:block;
  margin-top: 4px;
  font-size: 1.05rem;
  font-weight: 800;
  color: rgba(47,43,74,.78);
}

.icon-row{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 12px;
}

.mini{
  background: rgba(255,255,255,.62);
  border: 3px dashed rgba(47,43,74,.18);
  border-radius: 24px;
  padding: 14px 14px 12px;
  display:grid;
  grid-template-columns: 84px 1fr;
  gap: 12px;
  align-items:center;
  transition: transform .2s ease, box-shadow .2s ease;
}
.mini:hover{
  transform: translateY(-4px) rotate(-.2deg);
  box-shadow: 0 18px 28px rgba(0,0,0,.12);
}
.mini img{
  width:84px;
  height:84px;
  object-fit:contain;
  filter: drop-shadow(0 10px 16px rgba(0,0,0,.12));
}
.mini strong{
  display:block;
  font-weight: 900;
  font-size: 1.05rem;
}
.mini span{
  display:block;
  color: rgba(47,43,74,.75);
  font-weight: 700;
  margin-top: 2px;
}

.bottom{
  margin-top: 18px;
  padding: 20px 18px;
  border-radius: var(--radius);
  background: rgba(255,255,255,.52);
  border: 3px solid rgba(255,255,255,.65);
  box-shadow: var(--shadow);
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 10px;
  align-items:center;
  overflow:hidden;
  position:relative;
}
.bottom::after{
  content:"";
  position:absolute;
  inset:auto -40px -80px auto;
  width: 260px;
  height: 260px;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.9), rgba(255,255,255,0) 60%);
  transform: rotate(12deg);
  opacity:.8;
}

.love-line{
  font-family: "Baloo 2", "Nunito", system-ui, sans-serif;
  font-size: clamp(1.35rem, 3vw, 1.9rem);
  margin: 0 0 12px;
}
.love-line .heart{color: var(--pink);}

.btn-row{
  display:flex;
  gap: 12px;
  flex-wrap:wrap;
}

button{
  font-family: inherit;
  border:0;
  cursor:pointer;
  padding: 14px 16px;
  border-radius: 18px;
  font-weight: 900;
  letter-spacing:.2px;
  box-shadow: 0 16px 22px rgba(0,0,0,.10);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
  border: 3px solid rgba(255,255,255,.75);
  position:relative;
  overflow:hidden;
}
button:focus{outline: none; box-shadow: 0 0 0 6px rgba(106,169,255,.25), 0 16px 22px rgba(0,0,0,.10);}
button:hover{transform:translateY(-3px)}
button:active{transform:translateY(0)}
.btn-pink{background: rgba(255,107,138,.85); color:#fff;}
.btn-green{background: rgba(126,224,138,.85); color:#0e3b1c;}
.btn-soft{background: rgba(106,169,255,.85); color:#fff;}
button .shine{
  content:"";
  position:absolute;
  top:-40%;
  left:-40%;
  width: 60%;
  height: 160%;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.45), rgba(255,255,255,0));
  transform: rotate(18deg);
  animation: shine 3.5s ease-in-out infinite;
  opacity:.7;
  pointer-events:none;
}
@keyframes shine{
  0%{transform:translateX(-130%) rotate(18deg)}
  45%{transform:translateX(220%) rotate(18deg)}
  100%{transform:translateX(220%) rotate(18deg)}
}

.koala{
  width: min(320px, 92%);
  justify-self:center;
  filter: drop-shadow(0 16px 24px rgba(0,0,0,.14));
}

.toast{
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  padding: 14px 16px;
  background: rgba(255,255,255,.82);
  border: 3px solid rgba(255,255,255,.75);
  border-radius: 18px;
  box-shadow: 0 18px 30px rgba(0,0,0,.14);
  font-weight: 900;
  max-width: min(560px, 92vw);
  display:none;
  z-index: 50;
}

.toast.show{display:block; animation: pop .25s ease;}
@keyframes pop{from{transform:translateX(-50%) translateY(10px); opacity:0} to{transform:translateX(-50%) translateY(0); opacity:1}}

.confetti-layer{
  position: fixed;
  inset: 0;
  pointer-events:none;
  overflow:hidden;
  z-index: 40;
}

.confetti{
  position:absolute;
  font-size: 22px;
  will-change: transform, opacity;
  animation: fly 1100ms ease-out forwards;
  filter: drop-shadow(0 10px 16px rgba(0,0,0,.10));
}
@keyframes fly{
  0%{transform:translate(var(--x0), var(--y0)) rotate(0deg) scale(1); opacity:1}
  100%{transform:translate(var(--x1), var(--y1)) rotate(var(--rot)) scale(.9); opacity:0}
}

.small-note{
  position: relative;
  z-index: 2;
  margin-top: 10px;
  font-size: .95rem;
  color: rgba(47,43,74,.7);
  font-weight: 700;
}

.kbd{
  display:inline-block;
  padding: 3px 8px;
  border-radius: 10px;
  background: rgba(255,255,255,.7);
  border: 2px solid rgba(47,43,74,.12);
  font-weight: 900;
}

@media (max-width: 920px){
  .hero-grid{grid-template-columns: 1fr; gap: 8px;}
  .hero-ill{order:2}
  .hero-center{order:1}
  h1{margin: 96px 0 10px;}
  .section-grid{grid-template-columns: 1fr;}
  .icon-row{grid-template-columns: 1fr;}
  .card-inner{grid-template-columns: 140px 1fr;}
  .card-inner img{width:140px;height:140px;}
  .bottom{grid-template-columns: 1fr;}
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms!important; animation-iteration-count:1!important; transition:none!important;}
}