:root{
  --paper:#FFF6E5;
  --paper-2:#FFEFC9;
  --ink:#1B2A4A;
  --ink-soft:#4A5878;
  --sun:#FFC93C;
  --coral:#FF6B4A;
  --mint:#2FBF9B;
  --sky:#5AA9FF;
  --line:rgba(27,42,74,.14);
  --radius:22px;
  --font:'Rubik',system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;font-family:var(--font);color:var(--ink);background:var(--paper);
  background-image:
    radial-gradient(60vw 60vw at 110% -10%, #FFE39A 0%, transparent 60%),
    radial-gradient(50vw 50vw at -20% 110%, #CFEAFF 0%, transparent 60%);
  min-height:100vh;line-height:1.45;overflow-x:hidden;
}
body::after{content:"";position:fixed;inset:0;pointer-events:none;opacity:.35;mix-blend-mode:multiply;
  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='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .18 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}

/* confetti */
.confetti{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.confetti i{position:absolute;top:-6vh;width:12px;height:18px;border-radius:3px;
  left:calc(var(--i) * 5.6%);background:var(--sun);opacity:.85;
  animation:fall 11s linear infinite;animation-delay:calc(var(--i) * -.7s);}
.confetti i:nth-child(3n){background:var(--coral);width:9px;height:9px;border-radius:50%}
.confetti i:nth-child(4n){background:var(--mint);height:24px;width:7px}
.confetti i:nth-child(5n){background:var(--sky)}
.confetti i:nth-child(7n){background:var(--ink);width:6px;height:14px}
@keyframes fall{0%{transform:translateY(0) rotate(0);}100%{transform:translateY(112vh) rotate(720deg);}}
@media (prefers-reduced-motion:reduce){.confetti{display:none}}

.langs{position:absolute;top:14px;inset-inline-end:14px;z-index:5;display:flex;gap:4px;
  background:rgba(255,255,255,.7);backdrop-filter:blur(6px);padding:4px;border-radius:999px;border:1px solid var(--line)}
.langs a{text-decoration:none;color:var(--ink-soft);font-size:13px;font-weight:500;padding:6px 11px;border-radius:999px}
.langs a.on{background:var(--ink);color:#fff}

.page{position:relative;z-index:1;max-width:760px;margin:0 auto;padding:84px 20px 60px}

/* hero */
.hero{text-align:center;animation:rise .7s cubic-bezier(.2,.8,.2,1) both}
.eyebrow{display:inline-block;letter-spacing:.18em;text-transform:uppercase;font-size:12px;font-weight:700;
  color:var(--coral);border:2px solid var(--coral);padding:5px 12px;border-radius:999px;margin:0 0 18px;transform:rotate(-2deg)}
.hero-title{margin:0;font-weight:900;line-height:.95;letter-spacing:-.01em}
.hero-title .line{display:block;font-size:clamp(28px,5vw,44px);color:var(--ink-soft);font-weight:700}
.hero-title .age{display:inline-flex;align-items:baseline;gap:.15em;margin-top:8px}
.hero-title .num{font-size:clamp(120px,28vw,220px);color:var(--ink);
  text-shadow:6px 6px 0 var(--sun),12px 12px 0 var(--coral);display:inline-block;animation:pop .9s .2s cubic-bezier(.2,1.4,.3,1) both}
.hero-title .yrs{font-size:clamp(28px,5vw,44px);color:var(--ink-soft);font-weight:700}
.intro{max-width:560px;margin:26px auto 0;font-size:clamp(17px,2.4vw,20px);color:var(--ink);font-weight:500}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;transform:scale(.6) rotate(-8deg)}to{opacity:1;transform:none}}

/* details */
.details{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:44px 0 0}
.card{background:#fff;border:2px solid var(--ink);border-radius:var(--radius);padding:22px 22px 20px;
  box-shadow:6px 6px 0 var(--ink);display:flex;flex-direction:column;gap:6px;animation:rise .7s .15s both}
.card.when{background:var(--sun)}
.card.where{transform:rotate(1deg)}
.card.bring{grid-column:1/-1;background:var(--paper-2);flex-direction:row;align-items:baseline;gap:16px;flex-wrap:wrap;animation-delay:.3s}
.label{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.big{font-size:clamp(20px,3.2vw,26px);font-weight:900;line-height:1.15}
.sub{color:var(--ink-soft);font-weight:500}
.maplink{margin-top:6px;color:var(--ink);font-weight:700;text-decoration:none;border-bottom:2px solid var(--coral);align-self:flex-start}
.maplink:hover{background:var(--coral);color:#fff;border-radius:4px;padding:0 4px}

/* ticket */
.ticket{margin:48px 0 0;position:relative;animation:rise .7s .4s both}
.ticket-in{background:#fff;border-radius:var(--radius);padding:34px 28px;position:relative;
  border:2px solid var(--ink);box-shadow:8px 8px 0 var(--coral)}
.ticket-in::before,.ticket-in::after{content:"";position:absolute;top:-2px;bottom:-2px;width:14px;
  background-image:radial-gradient(circle at 50% 50%, var(--paper) 5px, transparent 5.5px);
  background-size:14px 26px;background-repeat:repeat-y}
.ticket-in::before{left:-9px}.ticket-in::after{right:-9px}
.ticket h2{margin:0 0 6px;font-size:clamp(30px,5vw,40px);font-weight:900;letter-spacing:-.01em}
.form-sub{margin:0;color:var(--ink-soft);font-weight:500}
.deadline{display:inline-block;margin:14px 0 0;background:var(--paper-2);border-radius:10px;padding:8px 12px;font-weight:700;font-size:14px}

.errors{margin:18px 0 0;background:#FFE3DC;border:2px dashed var(--coral);border-radius:14px;padding:12px 16px;font-weight:600;color:#9A2B14}

.form{margin-top:22px}
.hp{position:absolute;left:-9999px;top:-9999px;height:0;width:0;opacity:0}
.choice{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.opt{position:relative;cursor:pointer}
.opt input{position:absolute;opacity:0;inset:0}
.opt span{display:flex;align-items:center;justify-content:center;text-align:center;min-height:64px;padding:12px 14px;border-radius:16px;
  border:2px solid var(--ink);font-weight:700;font-size:17px;background:#fff;transition:transform .15s,background .15s,color .15s}
.opt input:focus-visible+span{outline:3px solid var(--sky);outline-offset:3px}
.opt.yes input:checked+span{background:var(--mint);color:#fff;border-color:var(--mint);transform:translateY(-2px);box-shadow:4px 4px 0 var(--ink)}
.opt.no input:checked+span{background:var(--ink);color:#fff;transform:translateY(-2px);box-shadow:4px 4px 0 var(--coral)}
.opt:hover span{transform:translateY(-2px)}

.grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:18px}
.field{display:flex;flex-direction:column;gap:6px}
.field.wide{grid-column:1/-1}
.field span{font-size:13px;font-weight:700;color:var(--ink-soft)}
.field input,.field select,.field textarea{font:inherit;font-size:16px;font-weight:500;color:var(--ink);padding:12px 14px;
  border:2px solid var(--line);border-radius:12px;background:var(--paper);outline:none;transition:border-color .15s,box-shadow .15s;width:100%}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--ink);box-shadow:3px 3px 0 var(--sun);background:#fff}
.field textarea{resize:vertical}
.field[hidden]{display:none}

.btn{display:inline-block;margin-top:22px;background:var(--coral);color:#fff;border:2px solid var(--ink);border-radius:999px;
  padding:16px 30px;font:inherit;font-size:18px;font-weight:900;cursor:pointer;box-shadow:5px 5px 0 var(--ink);
  transition:transform .12s,box-shadow .12s;text-decoration:none;width:100%}
.btn:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--ink)}
.btn:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
.btn.ghost{background:#fff;color:var(--ink);width:auto;font-size:15px;padding:12px 22px;box-shadow:3px 3px 0 var(--ink)}

.thanks{text-align:center;padding:10px 0}
.stamp{width:88px;height:88px;margin:0 auto 14px;border-radius:50%;display:grid;place-items:center;font-size:44px;font-weight:900;
  color:#fff;background:var(--mint);border:3px solid var(--ink);box-shadow:5px 5px 0 var(--ink);transform:rotate(-8deg);animation:pop .7s cubic-bezier(.2,1.4,.3,1) both}
.thanks p{color:var(--ink-soft);font-weight:500;font-size:17px}

.foot{margin-top:40px;text-align:center;color:var(--ink-soft);font-weight:500;font-style:italic}

@media (max-width:640px){
  .page{padding-top:70px}
  .details,.grid,.choice{grid-template-columns:1fr}
  .card.where{transform:none}
  .ticket-in{padding:26px 20px}
  .langs{top:10px;inset-inline-end:10px}
}

.hero-img{display:block;width:min(360px,70vw);height:auto;margin:18px auto 0;animation:pop .9s .35s cubic-bezier(.2,1.4,.3,1) both;filter:drop-shadow(6px 8px 0 rgba(27,42,74,.15))}