*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#041f13;
  --bg2:#07351e;
  --gold:#f4c43c;
  --gold2:#b97810;
  --cream:#fff8df;
  --red:#c91912;
  --green:#0d5d30;
  --muted:#c6cbbf;
}
html{scroll-behavior:smooth}
body{
  min-height:100vh;
  font-family:"DM Sans",sans-serif;
  color:#fff;
  background:#03180e;
}
body::selection{background:var(--gold);color:#09130d}
.page{
  min-height:100vh;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 10%,rgba(21,95,49,.28),transparent 34%),
    radial-gradient(circle at 50% 70%,rgba(12,83,43,.18),transparent 38%),
    linear-gradient(180deg,#02170d 0%,#06311c 42%,#03180e 100%);
}
.page::before{
  content:"";
  position:absolute;inset:0;pointer-events:none;opacity:.22;
  background-image:
    radial-gradient(circle,rgba(255,211,83,.3) 0 1px,transparent 1.5px),
    linear-gradient(115deg,transparent 45%,rgba(255,255,255,.02) 46%,transparent 47%);
  background-size:38px 38px,120px 120px;
}
.topbar,.content{position:relative;z-index:3}
.topbar{
  width:min(1180px,92%);
  margin:auto;
  padding:26px 0;
  display:flex;align-items:center;justify-content:space-between;
}
.mini-brand{display:flex;align-items:center;gap:11px;font-weight:800;letter-spacing:1.8px;font-size:13px}
.mini-brand small{display:block;color:var(--gold);font-size:7px;letter-spacing:3px;margin-top:3px}
.brand-g{
  width:44px;height:44px;display:grid;place-items:center;
  border:1px solid var(--gold);border-radius:50%;
  color:var(--gold);font:700 24px "Playfair Display";
}
.ghost-btn{
  color:#fff;text-decoration:none;border:1px solid rgba(244,196,60,.55);
  padding:10px 16px;border-radius:3px;font-size:11px;font-weight:800;letter-spacing:1px;
  background:rgba(0,0,0,.18)
}
.content{width:min(1120px,92%);margin:auto}
.hero{text-align:center;padding:54px 0 42px}
.eyebrow{font-size:13px;letter-spacing:5px;font-weight:600;margin-bottom:20px}
.eyebrow span{color:var(--gold)}
.main-title{
  position:relative;display:inline-flex;flex-direction:column;align-items:center;
  line-height:.78;margin-bottom:30px;
}
.gusii{
  font-family:"Playfair Display",serif;font-weight:700;
  font-size:clamp(76px,11vw,150px);
  color:transparent;
  background:linear-gradient(#fff7bf 0%,#f4c43c 28%,#a56a10 58%,#ffe995 78%,#d6961d);
  -webkit-background-clip:text;background-clip:text;
  filter:drop-shadow(0 6px 0 #573207);
}
.fest{
  font-size:clamp(88px,13vw,178px);font-weight:900;letter-spacing:-9px;
  color:transparent;
  background:linear-gradient(#fff7bf 0%,#f4c43c 32%,#a7650b 60%,#ffe995 78%,#c17e12);
  -webkit-background-clip:text;background-clip:text;
  filter:drop-shadow(0 7px 0 #593508);
}
.ribbon{
  position:absolute;left:50%;top:48%;transform:translate(-50%,-50%) rotate(-8deg);
  background:linear-gradient(#ee3f32,#9a0905);
  border:2px solid #ff6b60;
  padding:9px 34px;
  min-width:260px;
  color:#fff;font-weight:900;font-size:clamp(16px,2vw,28px);letter-spacing:2px;
  clip-path:polygon(4% 8%,96% 0,92% 100%,5% 92%,0 50%);
  box-shadow:0 8px 18px rgba(0,0,0,.45)
}
.event-grid{
  width:min(900px,100%);margin:0 auto;
  display:grid;grid-template-columns:1fr 80px 1fr;gap:16px;align-items:center;
}
.event-card{
  padding:18px 18px 16px;
  border:2px solid var(--gold);border-radius:22px;
  background:linear-gradient(180deg,rgba(5,31,18,.92),rgba(2,20,12,.82));
  box-shadow:inset 0 0 24px rgba(244,196,60,.05),0 12px 30px rgba(0,0,0,.24);
}
.date-tag{
  display:inline-block;background:linear-gradient(90deg,#d98d12,#ffd55b,#d98d12);
  color:#111d10;padding:5px 25px;font-weight:900;font-size:23px;min-width:170px;
  clip-path:polygon(8% 0,92% 0,100% 50%,92% 100%,8% 100%,0 50%)
}
.event-card h2{font-size:clamp(31px,4.3vw,53px);line-height:1;margin:12px 0 7px;font-weight:900}
.year{color:var(--gold);font-size:28px;font-weight:900}
.event-type{font-size:14px;color:var(--gold);font-weight:800;margin-top:6px}
.event-type strong{display:block;color:#fff;font-size:21px;letter-spacing:1px}
.time{margin-top:12px;padding-top:10px;border-top:1px solid rgba(244,196,60,.35);color:var(--gold);font-size:13px;font-weight:900}
.time strong{color:#fff}
.and{font:700 68px "Playfair Display";color:var(--gold)}
.family-banner{
  width:min(980px,100%);margin:18px auto 0;padding:9px 18px;
  border:2px solid var(--gold);background:#06180f;
  font-size:clamp(19px,3vw,34px);font-weight:900;line-height:1.05;
}
.family-banner span{display:block}
.family-banner strong{color:#121a0f;background:var(--gold);padding:0 8px;border-radius:4px}
.location{
  width:min(670px,100%);margin:22px auto 0;padding:12px 18px;
  border:1px solid var(--gold);background:rgba(0,0,0,.22);
  font-weight:900;font-size:clamp(19px,3vw,31px);letter-spacing:2px;
}
.pin{color:#e32618;margin-right:9px}
.feature-row{
  width:min(760px,100%);margin:20px auto 0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:8px;
}
.feature-row span{
  border-right:1px solid rgba(244,196,60,.35);
  color:var(--gold);font-size:11px;font-weight:900;letter-spacing:.7px
}
.feature-row span:last-child{border-right:0}
.feature-row small{color:#fff;font-size:10px}
.cta-row{display:flex;justify-content:center;gap:10px;margin-top:28px;flex-wrap:wrap}
.ticket-btn,.whatsapp-btn{
  text-decoration:none;font-weight:900;letter-spacing:1px;
  padding:15px 24px;border-radius:4px;font-size:13px;
}
.ticket-btn{
  background:linear-gradient(90deg,#d99a16,#ffd85d,#d79312);color:#111d10;
  box-shadow:0 10px 30px rgba(244,196,60,.18)
}
.ticket-btn span{margin-left:10px}
.whatsapp-btn{background:#25d366;color:#082413}
.register{
  margin:18px auto 30px;
  padding:28px;
  display:grid;grid-template-columns:.9fr 1.1fr;gap:28px;align-items:center;
  border:1px solid rgba(244,196,60,.3);
  background:linear-gradient(135deg,rgba(2,22,13,.92),rgba(7,53,30,.78));
}
.section-kicker{color:var(--gold);font-weight:900;font-size:10px;letter-spacing:3px}
.register h3,.ticket-strip h3{font-size:clamp(27px,4vw,42px);margin:8px 0 8px;line-height:1}
.register p{color:var(--muted);font-size:13px;line-height:1.6}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
label{display:block;font-size:10px;font-weight:800;letter-spacing:1px;margin-bottom:6px;color:#e7eadf}
input{
  width:100%;height:50px;padding:0 13px;color:#fff;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.13);outline:0
}
input:focus{border-color:var(--gold)}
#submitBtn{
  width:100%;height:50px;margin-top:10px;border:0;cursor:pointer;
  background:var(--gold);color:#0b170e;font-weight:900;letter-spacing:1px
}
#submitBtn:disabled{opacity:.6;cursor:not-allowed}
.form-note{text-align:center!important;color:#737c72!important;font-size:9px!important;margin-top:7px}
.form-message{font-size:12px;margin-top:9px;min-height:16px}
.form-message.success{color:#69e991}.form-message.error{color:#ff8b82}
.ticket-strip{
  margin-bottom:28px;padding:23px 26px;
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  border-top:1px solid var(--gold);border-bottom:1px solid var(--gold);
}
.ticket-strip a{color:#111c0e;background:var(--gold);padding:12px 18px;text-decoration:none;font-size:12px;font-weight:900}
footer{
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:22px 0 28px;border-top:1px solid rgba(255,255,255,.08);color:#879087;font-size:10px
}
footer strong{display:block;color:var(--gold);font-size:20px;margin-bottom:3px}
.footer-right{text-align:right}.footer-right a{display:block;color:#fff;text-decoration:none;margin-bottom:4px}
.edge{position:absolute;z-index:1;top:0;bottom:0;width:150px;pointer-events:none}
.edge-left{left:0}.edge-right{right:0;transform:scaleX(-1)}
.leaf{
  position:absolute;width:150px;height:54px;border-radius:100% 0 100% 0;
  background:linear-gradient(135deg,#0d6b34,#063a20 65%,#02190e);
  box-shadow:inset 0 -5px 14px rgba(0,0,0,.32);
  transform:rotate(-32deg);opacity:.78
}
.l1{top:6%;left:-46px}.l2{top:35%;left:-70px;transform:rotate(18deg)}.l3{bottom:8%;left:-38px;transform:rotate(-18deg)}
.banana{
  position:absolute;width:26px;height:84px;border-radius:60% 35% 60% 35%;
  border:2px solid rgba(255,255,255,.08);transform:rotate(22deg);opacity:.82
}
.banana::after{
  content:"";position:absolute;width:18px;height:75px;border-radius:60% 35% 60% 35%;left:22px;top:4px;background:inherit
}
.b1{top:15%;left:16px}.b2{bottom:18%;left:14px}
.banana.green{background:linear-gradient(90deg,#215f25,#75a636,#173d1b)}
.banana.ripe{background:linear-gradient(90deg,#d89d17,#ffd25b,#a86e0c)}
.firework{
  position:absolute;z-index:1;width:190px;height:190px;border-radius:50%;pointer-events:none;opacity:.55;
  background:repeating-conic-gradient(from 0deg,rgba(255,204,69,.95) 0 1deg,transparent 1deg 7deg);
  mask-image:radial-gradient(circle,transparent 0 13%,#000 14% 58%,transparent 59%)
}
.fw1{top:-45px;left:-40px}.fw2{top:-55px;right:-35px}.fw3{bottom:-55px;left:-40px}.fw4{bottom:-60px;right:-30px}
@media(max-width:780px){
  .topbar{width:91%;padding:18px 0}
   .topbar{display:none;}
  .ghost-btn{display:none}
  .content{width:92%}
  .hero{padding-top:32px}
  .eyebrow{font-size:8px;letter-spacing:2.2px;line-height:1.6}
  .main-title{margin-bottom:22px}
  .gusii{font-size:clamp(72px,23vw,105px)}
  .fest{font-size:clamp(88px,28vw,132px);letter-spacing:-6px}
  .ribbon{top:45%;min-width:0;padding:6px 21px;font-size:15px}
  .event-grid{grid-template-columns:1fr;max-width:390px;gap:10px}
  .and{font-size:34px;line-height:.8}
  .event-card{border-radius:15px;padding:14px 12px}
  .date-tag{font-size:17px;min-width:145px;padding:5px 18px}
  .event-card h2{font-size:38px}
  .year{font-size:23px}
  .event-type strong{font-size:17px}
  .family-banner{font-size:18px;line-height:1.2;padding:10px 8px}
  .family-banner span{margin-top:3px}
  .location{font-size:16px;letter-spacing:1px}
  .feature-row{grid-template-columns:1fr 1fr;max-width:390px;row-gap:12px}
  .feature-row span:nth-child(2){border-right:0}
  .register{grid-template-columns:1fr;padding:20px 14px;gap:18px}
  .form-grid{grid-template-columns:1fr}
  .ticket-strip{flex-direction:column;align-items:flex-start}
  .ticket-strip a{width:100%;text-align:center;word-break:break-all}
  footer{flex-direction:column;align-items:flex-start}.footer-right{text-align:left}
  .edge{width:65px;opacity:.55}.leaf{width:88px;height:35px}.banana{transform:scale(.7) rotate(22deg)}
  .firework{width:120px;height:120px;opacity:.4}
}
@media(max-width:420px){
  .topbar{display:none;}
  .main-title .gusii{font-size:76px}
  .main-title .fest{font-size:98px}
  /*.event-card h2{font-size:34px}
  
  .event-grid{grid-template-columns:2fr;max-width:170px;gap:5px}
  display:grid;grid-template-columns:1fr 80px 1fr;gap:16px;align-items:center;
  .event-grid{
  width:min(90px,100%);margin:0 auto;
  grid-template-columns:1fr 1fr;
  
  }
  .and{font-size:28px;line-height:.8
      display:none;
  }
  .event-card{border-radius:15px;padding:14px 12px}
  .date-tag{font-size:10px;min-width:60px;padding:3px 10px}
  .event-card h2{font-size:16px}
  .year{font-size:14px}
  .event-type strong{font-size:17px}*/
  
  
  .cta-row{display:grid;grid-template-columns:1fr;width:100%}
  .ticket-btn,.whatsapp-btn{text-align:center}
}