:root {
  --y:#F9C74F;
  --t:#0F4C5C;
  --c:#E36414;
  --cr:#FFF6E9;
  --g:#2A9D8F;
  --p:#7B5EA7;
  --pk:#E5989B;
  --ink:#1B2A30;
  color-scheme:light;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px)
}


*,*:before,*:after {
  box-sizing:inherit
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:90px
}


body {
  margin:0;
  background:#fff;
  color:var(--ink);
  font:18px/1.6 Nunito,'Nunito Sans',system-ui,sans-serif
}


h1,h2,h3 {
  font-family:Fredoka,'Baloo 2',system-ui,sans-serif;
  font-weight:600;
  color:var(--t);
  line-height:1.08;
  margin:0 0 .4em
}


h1 {
  font-size:clamp(42px,7.2vw,84px)
}

h2 {
  font-size:clamp(32px,5vw,56px)
}

h3 {
  font-size:26px
}

a {
  color:var(--t)
}

.w {
  max-width:1160px;
  margin:0 auto;
  padding:0 24px
}


header {
  position:sticky;
  top:env(safe-area-inset-top,0px);
  z-index:50;
  background:var(--cr);
  border-bottom:4px solid var(--y)
}


.hb {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  height:84px
}

.logo img {
  height:64px;
  display:block
}


.nav {
  display:flex;
  align-items:center;
  gap:6px
}

.nav a,.nav button {
  font:800 16px Nunito,sans-serif;
  color:var(--t);
  background:none;
  border:0;
  padding:10px 14px;
  border-radius:99px;
  cursor:pointer;
  text-decoration:none
}


.nav a:hover,.nav button:hover,.grp:focus-within>button {
  background:var(--y)
}

.grp {
  position:relative
}


.drop {
  display:none;
  position:absolute;
  top:100%;
  left:0;
  min-width:240px;
  background:#fff;
  border:4px solid var(--y);
  border-radius:22px;
  padding:8px;
  box-shadow:0 12px 30px rgba(15,76,92,.18)
}

.drop a {
  display:block;
  border-radius:14px
}

.grp:hover .drop,.grp:focus-within .drop {
  display:block
}


.nav .don {
  background:var(--c);
  color:#fff;
  font-size:18px;
  padding:10px 24px
}

.nav .don:hover {
  background:var(--t)
}


.burger {
  display:none;
  background:var(--t);
  color:var(--cr);
  border:0;
  border-radius:99px;
  padding:10px 18px;
  font:800 15px Nunito,sans-serif
}


.btn {
  display:inline-block;
  background:var(--t);
  color:var(--cr)!important;
  font:800 19px Nunito,sans-serif;
  padding:15px 30px;
  border-radius:99px;
  text-decoration:none;
  margin:10px 12px 0 0;
  transition:transform .2s,background .2s
}

.btn:hover {
  background:var(--c);
  transform:translateY(-3px) rotate(-1deg)
}


.btn.c {
  background:var(--c);
  color:#fff!important
}

.btn.c:hover {
  background:var(--t)
}

.btn.o {
  background:#fff;
  color:var(--t)!important;
  box-shadow:inset 0 0 0 3px var(--t)
}

.btn.o:hover {
  background:var(--t);
  color:var(--cr)!important
}


.wave {
  display:block;
  width:100%;
  height:60px;
  margin-top:-1px
}

.s {
  padding:72px 0;
  position:relative
}

.cr {
  background:var(--cr)
}

.y {
  background:var(--y)
}

.t {
  background:var(--t);
  color:#fff
}

.t h2,.t h3 {
  color:#fff
}


.eb {
  display:inline-block;
  background:var(--c);
  color:#fff;
  font:800 14px Nunito;
  letter-spacing:.12em;
  text-transform:uppercase;
  padding:6px 16px;
  border-radius:99px;
  margin-bottom:16px
}

.y .eb {
  background:var(--t)
}


.hero {
  padding:56px 0 24px
}

.hrow {
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:32px;
  align-items:center
}

.lead {
  font-size:22px;
  max-width:560px
}


.mark {
  background:linear-gradient(transparent 58%,var(--c) 58%,var(--c) 92%,transparent 92%);
  padding:0 6px;
  border-radius:6px;
  color:var(--t)
}


.float {
  animation:bob 5s ease-in-out infinite
}

@keyframes bob {
  50% {
    transform:translateY(-12px)
  }
}


.rib {
  background:var(--c);
  color:#fff;
  overflow:hidden;
  white-space:nowrap;
  padding:16px 0;
  transform:rotate(-1.2deg);
  margin:-8px -10px 0;
  position:relative;
  z-index:3;
  box-shadow:0 6px 0 var(--t)
}


.rib div {
  display:inline-block;
  animation:mq 28s linear infinite;
  font:600 28px Fredoka,sans-serif;
  letter-spacing:.06em
}

@keyframes mq {
  to {
    transform:translateX(-50%)
  }
}


.grid4 {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:24px;
  margin-top:36px
}

.tile {
  border-radius:36px;
  padding:20px 20px 28px;
  text-align:center;
  transition:transform .25s
}

.tile:hover {
  transform:rotate(-2deg) scale(1.03)
}


.tile h3 {
  margin:6px 0 4px;
  font-size:30px
}

.tile p {
  margin:0 8px;
  font-size:17px
}

.tile img {
  width:100%;
  max-width:260px
}


.steps {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
  margin-top:40px;
  counter-reset:s
}

.step {
  text-align:center;
  position:relative
}

.step img {
  width:100%;
  max-width:280px
}


.step:before {
  counter-increment:s;
  content:counter(s);
  position:absolute;
  top:0;
  left:50%;
  margin-left:-110px;
  width:46px;
  height:46px;
  border-radius:50%;
  background:var(--t);
  color:var(--y);
  font:700 24px Fredoka;
  display:grid;
  place-items:center;
  z-index:2;
  border:4px solid #fff
}


.step:not(:last-child):after {
  content:'';
  position:absolute;
  top:60px;
  right:-22%;
  width:30%;
  border-top:5px dotted var(--c)
}


.pcards {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:28px;
  margin-top:36px
}

.pc {
  border-radius:36px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 10px 0 rgba(15,76,92,.12);
  transition:transform .25s
}

.pc:hover {
  transform:translateY(-8px)
}


.pc .art {
  padding:18px 18px 0
}

.pc .body {
  padding:18px 28px 32px
}

.pc img {
  width:100%;
  display:block
}


.stats {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:24px;
  text-align:center;
  margin-top:36px
}

.num {
  font:700 clamp(64px,9vw,112px) Fredoka;
  color:var(--y);
  line-height:1
}


.drow {
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:40px;
  align-items:center
}

.quote {
  font:600 clamp(28px,4.2vw,46px) Fredoka;
  color:var(--t);
  line-height:1.15
}


.ways {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:24px;
  margin-top:36px
}

.way {
  background:#fff;
  border-radius:36px;
  padding:28px;
  text-align:center;
  box-shadow:0 10px 0 rgba(15,76,92,.12);
  transition:transform .25s
}

.way:hover {
  transform:rotate(1.5deg) translateY(-6px)
}

.way img {
  width:96px
}


footer {
  background:var(--t);
  color:#E8F1F3;
  padding:64px 0 32px
}

footer h4 {
  color:var(--y);
  margin:0 0 10px;
  font:800 14px Nunito;
  letter-spacing:.12em;
  text-transform:uppercase
}

footer a {
  color:#fff;
  display:block;
  padding:3px 0;
  text-decoration:none
}

footer a:hover {
  color:var(--y)
}


.fcols {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:28px
}

.fl {
  background:var(--cr);
  border-radius:18px;
  padding:10px 16px;
  display:inline-block
}

.fl img {
  height:60px;
  display:block
}

.copy {
  border-top:1px solid rgba(255,255,255,.2);
  margin-top:36px;
  padding-top:20px;
  font-size:14px
}


@media(max-width:900px) {
  .hrow,.drow {
    grid-template-columns:1fr
  }
  .steps {
    grid-template-columns:1fr
  }
  .step:after,.step:before {
    display:none
  }
  .burger {
    display:block
  }
  .nav {
    display:none;
    position:absolute;
    top:84px;
    left:0;
    right:0;
    background:var(--cr);
    flex-direction:column;
    align-items:stretch;
    padding:12px 24px 24px;
    border-bottom:4px solid var(--y);
    max-height:calc(100vh - 100px);
    overflow:auto
  }
  .nav.open {
    display:flex
  }
  .drop {
    position:static;
    display:none;
    border:0;
    box-shadow:none;
    padding:0 0 0 14px;
    background:none
  }
  .grp:hover .drop {
    display:none
  }
  .grp.open .drop {
    display:block
  }
  .s {
    padding:52px 0
  }
  .logo img {
    height:52px
  }
}


@media(prefers-reduced-motion:reduce) {
  .float,.rib div {
    animation:none
  }
  .tile,.pc,.way,.btn {
    transition:none
  }
}



.icards {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:22px;
  margin-top:32px;
  text-align:left
}

.icard {
  border-radius:32px;
  padding:26px 28px;
  box-shadow:0 8px 0 rgba(15,76,92,.1);
  transition:transform .25s
}

.icard:hover {
  transform:rotate(-1deg) translateY(-5px)
}

.icard h3 {
  font-size:24px;
  margin-bottom:.3em
}

.icard p {
  margin:0
}

.icard ul {
  margin:8px 0 0;
  padding-left:20px
}


.two {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
  align-items:center
}

.two img {
  width:100%
}

.big {
  font:600 clamp(26px,3.6vw,40px) Fredoka;
  color:var(--t);
  line-height:1.2
}


.chips {
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  justify-content:center;
  margin-top:28px
}

.chip {
  background:var(--y);
  color:var(--t);
  border-radius:99px;
  padding:12px 24px;
  font:600 22px Fredoka
}

.t .lead {
  color:#fff
}


.apr {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px;
  margin-top:32px
}

.ck {
  list-style:none;
  padding:0;
  margin:14px 0 0
}

.ck li {
  padding:8px 0 8px 40px;
  position:relative;
  font-size:19px
}

.ck li:before {
  content:'';
  position:absolute;
  left:0;
  top:12px;
  width:24px;
  height:24px;
  border-radius:50%;
  background:var(--y);
  box-shadow:inset 0 0 0 6px var(--c)
}


@media(max-width:900px) {
  .two,.apr {
    grid-template-columns:1fr
  }
}


.float>img,.art>img,.drow img,.icard img {
  width:100%;
  height:auto;
  display:block
}

.tile img {
  height:auto;
  display:inline-block
}

img {
  max-width:100%
}