*{box-sizing:border-box}
:root{--blue:#2B388F;--yellow:#D6DE23;--white:#fff;--line:rgba(255,255,255,.42)}
html{scroll-behavior:smooth}
body{margin:0;background:var(--blue);color:var(--white);font-family:"Sora",sans-serif;overflow-x:hidden}
a{text-decoration:none;color:inherit}img{display:block;max-width:100%}

/* HEADER */
.topbar{height:120px;padding:0 4.4vw;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:34px;position:sticky;top:0;z-index:100;background:rgba(43,56,143,.97)}
.school{display:flex;align-items:center;margin-right:auto}.school img{width:200px;height:200px;object-fit:contain}.school span{display:flex;flex-direction:column}.school b{font:900 16px/1 "Open Sauce Sans"}.school small{font:400 12px/1.1 "Open Sauce Sans";margin-top:2px}
.topbar nav{display:flex;gap:34px}.topbar nav a,.top-register{font:500 14px "Chakra Petch";letter-spacing:.07em}.top-register{border:1px solid var(--yellow);color:var(--yellow);border-radius:16px;padding:6px 19px}
.hamburger,.mobile-nav{display:none}

/* HERO */
.hero{height:640px;position:relative;overflow:hidden;display:flex;justify-content:center;align-items:center;padding:20px 4.4vw 24px}
.map{position:absolute;width:100%;height:100%;left:0;top:0;object-fit:contain;opacity:.23;z-index:0}
.hero-center{position:relative;z-index:5;text-align:center;margin-top:-17px}
.present{font:500 15px "Sora";margin:0 0 13px}
.hero h1{margin:0;color:var(--yellow);font:700 140px/.84 "Chakra Petch";letter-spacing:-.05em}
.hero h1 span{display:block}.tagline{max-width:720px;margin:22px auto 17px;font:600 18px/1.48 "Sora"}
.count{display:flex;justify-content:center;align-items:flex-start;gap:10px;color:#aeb4cf;margin-bottom:17px}.count div{text-align:center;min-width:62px}.count strong{font:400 60px/1 "Chakra Petch"}.count small{display:block;font:400 12px "Sora";margin-top:3px}.count i{font:400 32px/1 "Chakra Petch";font-style:normal}
.hero-buttons{display:flex;justify-content:center;gap:65px}.hero-buttons a{border:1px solid var(--yellow);color:var(--yellow);padding:6px 16px;font:600 18px "Chakra Petch"}
.hero-facts{position:absolute;z-index:6;left:10%;bottom:45px;display:flex;gap:54px}.hero-facts div{display:flex;flex-direction:column}.hero-facts b{color:var(--yellow);font:700 24px "Chakra Petch"}.hero-facts small{font:500 12px "Sora"}

.coin{position:absolute;z-index:4;pointer-events:none;animation:float 6.2s ease-in-out infinite}.coin img{width:100%}
.c1{width:300px;left:14%;top:12%;animation-delay:-2s}.c2{width:300px;right:16%;top:16%;animation-delay:-4s}.c3{width:300px;right:8%;bottom:12%;animation-delay:-1s}.c4{width:300px;left:-1%;bottom:3%;animation-delay:-3s}.c5{width:300px;right:37%;bottom:7%;animation-delay:-5s}
.spark{position:absolute;z-index:4;width:20px;animation:spark 4.5s ease-in-out infinite}.spark img{width:100%}.s1{right:8%;bottom:11%}.s2{left:7%;bottom:22%;animation-delay:-2s}
@keyframes float{0%,100%{transform:translate3d(0,0,0) rotate(0)}25%{transform:translate3d(7px,-10px,0) rotate(3deg)}50%{transform:translate3d(-3px,-17px,0) rotate(-2deg)}75%{transform:translate3d(-8px,-7px,0) rotate(2deg)}}@keyframes spark{50%{transform:translateY(-10px) scale(1.06)}}

/* CONTENT */
.section{position:relative;padding:48px 4.4vw;border-top:1px solid var(--line)}
.section h2,.contact h2{margin:0;color:var(--yellow);font:700 52px/.94 "Chakra Petch";letter-spacing:-.02em}
.event-grid{display:grid;grid-template-columns:1.35fr .85fr;gap:55px;margin-top:26px}.event-grid h3{font:600 29px/1.15 "Sora";margin:0 0 13px}.event-grid p{font:600 18px/1.55 "Sora";max-width:650px}
.details{border-left:1px solid var(--line);padding-left:17px}.details div{border-bottom:1px solid var(--line);padding:0 0 10px;margin-bottom:10px}.details label{display:block;color:var(--yellow);font:600 14px "Chakra Petch";margin-bottom:4px}.details b{font:500 16px/1.35 "Sora"}

.challenge{padding-top:42px}.intro{font:600 17px/1.5 "Sora";margin:12px 0 22px}.topics{display:grid;grid-template-columns:1fr 1fr;max-width:1000px;border-top:1px solid var(--line)}.topics div{min-height:42px;border-bottom:1px solid var(--line);display:grid;grid-template-columns:36px 1fr;align-items:center}.topics div:nth-child(odd){border-right:1px solid var(--line)}.topics div:nth-child(even){padding-left:34px}.topics b{color:var(--yellow);font:600 16px "Chakra Petch"}.topics span{font:600 16px "Sora"}.challenge-coin{width:45px;right:42%;top:12px}.challenge-spark{position:absolute;right:7%;bottom:28px;width:18px}.challenge-spark img{width:100%}

.process{padding-top:45px}.process-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:22px}.process-grid article{border:1px solid var(--line);padding:17px 13px;min-height:125px}.process-grid h3{color:var(--yellow);font:700 22px "Chakra Petch";margin:0 0 11px}.process-grid p{font:600 14px/1.5 "Sora";margin:0}.facts{border-bottom:1px solid var(--line);display:flex;align-items:center;gap:14px;padding:12px 0 10px;font:600 9px "Sora"}.facts b{color:var(--yellow);font:700 14px "Chakra Petch"}.process-coin{width:70px;right:7%;top:0}

.prizes{padding-top:43px}.prize-grid{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);margin-top:22px}.prize-grid>div{text-align:center;padding:18px 10px;border-right:1px solid var(--line)}.prize-grid>div:last-child{border-right:0}.prize-grid span,.prize-grid small{display:block;font:600 14px "Sora"}.prize-grid strong{display:block;color:var(--yellow);font:700 50px/.9 "Chakra Petch";margin:15px 0 7px}.prize-grid .check{font-size:44px}.prize-grid small{font-size:14px}.prize-coin{width:67px;left:2%;top:-5px}

.register{padding-top:45px}.register-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:60px;margin-top:23px}.register-grid h3{font:600 29px/1.2 "Sora";margin:0 0 13px}.register-grid p{font:600 16px/1.5 "Sora";max-width:690px}.register-buttons{display:flex;gap:32px;margin-top:25px}.register-buttons a{border:1px solid var(--yellow);color:var(--yellow);padding:12px 22px;font:700 15.6px "Chakra Petch"}
.payment{width:245px;border:1px solid var(--line);padding:13px 14px 11px;text-align:center;display:flex;flex-direction:column;align-items:center;margin-left:auto}.payment>strong{color:var(--yellow);font:700 46px "Chakra Petch";margin:5px 0}.payment>strong small{font:700 11px "Sora"}.payment>b{color:var(--yellow);font:700 13px "Chakra Petch"}.payment img{width:145px;height:145px;object-fit:contain;margin:4px 0}.payment>small{font:500 7px "Sora"}.register-coin{width:42px;right:30%;top:-9px}

.contact{padding-top:42px;padding-bottom:45px}.contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:55px;align-items:center}.contact h3{font:600 22px "Sora";margin:13px 0 4px}.contact p{font:600 14px "Sora";margin:4px 0}.contact .email{font-size:12px}.contact small{display:block;color:var(--yellow);font:500 10px/1.45 "Sora";margin-top:9px}.map-card{height:205px;border:1px solid var(--line);background:rgba(255,255,255,.045);display:flex;align-items:stretch;padding:0;overflow:hidden}.contact-coin{width:50px;left:30%;top:-5px}
footer{height:31px;background:var(--yellow);color:var(--blue);display:flex;align-items:center;justify-content:space-between;padding:0 4.4vw;font:600 12px "Chakra Petch"}

/* RESPONSIVE */
@media(max-width:850px){
  .topbar nav{display:none}.hamburger{display:block;border:0;background:none;color:var(--yellow);font-size:23px;cursor:pointer}.mobile-nav{display:flex;position:fixed;top:90px;left:0;right:0;z-index:90;flex-direction:column;background:var(--blue);border-bottom:1px solid var(--line);transform:translateY(-130%);transition:.25s}.mobile-nav.open{transform:translateY(0)}.mobile-nav a{padding:16px 6vw;border-bottom:1px solid rgba(255,255,255,.2);color:var(--yellow);font:700 12px "Chakra Petch"}
  .hero{height:720px}.hero h1{font-size:140px}.hero-facts{left:7%;gap:30px}
  .event-grid,.register-grid,.contact-grid{grid-template-columns:1fr;gap:35px}.details{border-left:0;border-top:1px solid var(--line);padding:16px 0 0}.payment{margin:0}.prize-grid{grid-template-columns:1fr}.prize-grid>div{border-right:0;border-bottom:1px solid var(--line)}.prize-grid>div:last-child{border-bottom:0}.process-grid{grid-template-columns:1fr}
}
@media(max-width:560px){
  .topbar{height:90px;padding:0 5vw}.school b{font-size:16px}.school small{font-size:12px}.top-register{display:none}.mobile-nav{top:90px}
  .hero{height:auto;min-height:760px;padding:65px 5vw 26px;align-items:flex-start}.hero-center{width:100%;margin-top:20px}.present{font-size:10px}.hero h1{font-size:clamp(72px,20vw,140px)}.tagline{font-size:13px;max-width:340px;line-height:1.5}.count{gap:4px}.count div{min-width:45px}.count strong{font-size:60px}.count i{font-size:21px}.hero-buttons{gap:30px}.hero-buttons a{font-size:18px}.hero-facts{left:5vw;right:5vw;bottom:25px;justify-content:space-between;gap:0}.hero-facts b{font-size:24px}.hero-facts small{font-size:12px}
  .c1{width:46px;left:5%;top:10%}.c2{width:57px;right:3%;top:16%}.c3{width:53px;right:4%;bottom:13%}.c4{width:47px;left:-4%;bottom:4%}.c5{width:37px;right:34%;bottom:7%}.s1{right:5%;bottom:24%;width:16px}.s2{left:5%;bottom:28%;width:14px}
  .section{padding:43px 5vw 47px}.section h2,.contact h2{font-size:40px}.event-grid{margin-top:22px}.event-grid h3,.register-grid h3{font-size:22px}.event-grid p,.register-grid p{font-size:14px}.intro{font-size:14px}.topics{grid-template-columns:1fr}.topics div:nth-child(odd){border-right:0}.topics div:nth-child(even){padding-left:0}.topics div{min-height:40px}.topics span{font-size:16px}.process-grid h3{font-size:22px}.process-grid p{font-size:14px}.facts{flex-wrap:wrap;gap:8px 12px;font-size:8px}.register-buttons{flex-direction:column;gap:10px}.register-buttons a{text-align:center}.payment{width:100%;max-width:250px}.contact-grid{gap:28px}.map-card{height:180px}footer{height:auto;padding:11px 5vw;flex-direction:column;align-items:flex-start;gap:6px;font-size:12px}
}

.map-card-inner{width:100%;height:100%;position:relative;display:flex;flex-direction:column;justify-content:flex-end;padding:22px;background:
  radial-gradient(circle at 68% 36%,rgba(214,222,35,.16) 0 2px,transparent 3px),
  radial-gradient(circle at 73% 50%,rgba(255,255,255,.18) 0 1px,transparent 2px),
  linear-gradient(125deg,rgba(214,222,35,.10),transparent 40%);
}
.map-card-inner:before{content:"";position:absolute;left:12%;right:8%;top:20%;height:1px;background:rgba(255,255,255,.18);transform:rotate(-12deg)}
.map-card-inner:after{content:"";position:absolute;left:20%;right:17%;top:54%;height:1px;background:rgba(255,255,255,.14);transform:rotate(7deg)}
.map-card-inner>div{position:relative;z-index:2;display:flex;flex-direction:column;gap:5px}
.map-card-inner strong{font:700 16px "Chakra Petch";color:var(--yellow)}
.map-card-inner small{font:500 10px "Sora"}
.map-card-inner>span{position:relative;z-index:2;align-self:flex-end;margin-top:13px;color:var(--yellow);font:700 11px "Chakra Petch"}
.map-pin{position:absolute!important;top:36%;left:66%;width:14px;height:14px;border:2px solid var(--yellow);border-radius:50%;color:transparent;box-shadow:0 0 0 7px rgba(214,222,35,.10)}
.map-card{position:relative;background:var(--blue)}
.map-card iframe{width:100%;height:100%;border:0;display:block;filter:saturate(.8)}
.map-open{position:absolute;right:12px;bottom:12px;z-index:3;background:var(--blue);color:var(--yellow);border:1px solid var(--yellow);padding:8px 12px;font:700 11px "Chakra Petch"}
