:root {
  --blue: #08245c;
  --green: #3c9c35;
  --leaf: #62b648;
  --yellow: #f7ce4b;
  --cream: #fbfaf6;
  --ink: #17213b;
  --muted: #5d6780;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #fffefa; color: var(--ink); }
a, button { font: inherit; }
a { color: inherit; }
button { cursor: pointer; border: 0; background: none; }
main { overflow: hidden; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: 250px 1fr auto auto;
  align-items: center;
  gap: 24px;
  max-width: 1240px;
  margin: 0 auto;
  padding: 28px 24px 12px;
  background: rgba(255, 254, 250, 0.88);
  backdrop-filter: blur(14px);
}

.brand { display: inline-flex; align-items: center; text-decoration: none; }
.brand img { width: 155px; height: auto; display: block; }
.brand.static { pointer-events: none; }
.brand.static img { width: 132px; }

nav { display: flex; justify-content: center; gap: 48px; }
nav a {
  position: relative;
  color: #11182a;
  font-weight: 800;
  padding: 10px 0 16px;
  text-decoration: none;
}
nav a:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4px;
  height: 8px;
  opacity: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='48' height='8' viewBox='0 0 48 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 4c5.75-5.3 10.25 5.3 16 0s10.25-5.3 16 0 10.25 5.3 14 0' fill='none' stroke='%236bb6d9' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 48px 8px;
  transform: translateY(3px);
  transition: opacity .18s ease, transform .18s ease;
}
nav a:hover:after,
nav a.active:after {
  opacity: 1;
  transform: translateY(0);
}
nav a:hover,
nav a.active { color: var(--green); }
.client {
  border: 1.5px solid var(--green);
  border-radius: 10px;
  padding: 14px 20px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  color: #1c2b25;
  background: white;
}
.client svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}
.menu { display: none; color: var(--blue); }

.hero {
  max-width: 1240px;
  margin: 0 auto;
  min-height: 650px;
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  align-items: center;
  gap: 20px;
  padding: 18px 24px 48px;
  position: relative;
}
.hero:before {
  content: "";
  position: absolute;
  left: -190px;
  bottom: 10px;
  width: 720px;
  height: 500px;
  border-radius: 42% 58% 48% 52%;
  background: #f2efe7;
  z-index: -1;
}
.hero h1, h2 {
  color: var(--blue);
  letter-spacing: 0;
  line-height: 1.05;
  margin: 0;
}
.hero h1 { font-size: clamp(42px, 5.2vw, 66px); max-width: 560px; font-weight: 950; }
.hero h1 span, h2 span { color: var(--green); display: block; }
.hero p { max-width: 500px; color: #26334f; font-size: 18px; line-height: 1.62; margin: 24px 0; }
.actions, .arrows, .hero-benefits { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.actions a, .green-button, .cta a {
  min-height: 52px;
  border-radius: 10px;
  background: var(--blue);
  color: white;
  padding: 0 26px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 900;
  text-decoration: none;
}
.actions .secondary { background: white; color: var(--blue); border: 1.5px solid var(--blue); }
.hero-benefits { margin-top: 42px; gap: 34px; }
.hero-benefits span { display: inline-flex; align-items: center; gap: 10px; max-width: 165px; font-weight: 800; color: #26334f; }
.hero-benefits svg {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  color: var(--green);
  stroke: currentColor;
  stroke-width: 1.8;
  fill: none;
}
small { color: var(--green); }

.hero-art { min-height: 590px; position: relative; display: grid; place-items: center; }
.sun { position: absolute; right: 0; top: 42px; width: min(610px, 78vw); height: min(520px, 66vw); background: #f8dc75; border-radius: 48% 52% 51% 49%; opacity: .72; }
.hero-art:before {
  content: "";
  position: absolute;
  left: 4%;
  top: 23%;
  width: 70px;
  height: 44px;
  border: 3px solid #70bff0;
  border-radius: 28px;
  border-bottom-color: #f8dc75;
}
.hero-art:after {
  content: "〰";
  position: absolute;
  right: 8%;
  bottom: 17%;
  color: var(--green);
  font-size: 86px;
  transform: rotate(-28deg);
}
.hero-art img { position: relative; width: min(520px, 78vw); margin-top: 16px; filter: drop-shadow(0 18px 18px rgba(11, 22, 52, .14)); }

section { max-width: 1240px; margin: 0 auto; padding: 50px 24px; }
.section-head { display: grid; grid-template-columns: 1fr 380px auto; align-items: end; gap: 34px; margin-bottom: 42px; }
small { display: inline-flex; gap: 8px; align-items: center; margin-bottom: 14px; font-weight: 900; }
small:before { content: ""; width: 9px; height: 9px; background: var(--green); border-radius: 50%; }
h2 { font-size: clamp(34px, 4vw, 50px); }
.section-head p { color: var(--muted); line-height: 1.55; margin: 0; }
.arrows button { width: 48px; height: 48px; border-radius: 50%; background: #edf6e9; color: var(--green); display: grid; place-items: center; }
.arrows button:last-child { background: var(--green); color: white; }

.cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 22px; }
.card {
  position: relative;
  min-height: 400px;
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 14px 28px rgba(16, 38, 84, .09);
}
.card img { width: 100%; height: 235px; object-fit: cover; display: block; }
.card:nth-child(1) img { object-position: 0 0; }
.card:nth-child(2) img { object-position: 25% 0; }
.card:nth-child(3) img { object-position: 50% 0; }
.card:nth-child(4) img { object-position: 75% 0; }
.card:nth-child(5) img { object-position: 100% 0; }
.badge { position: absolute; top: 218px; left: 22px; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: #fff8d7; color: var(--green); border: 4px solid white; }
.badge svg {
  width: 28px;
  height: 28px;
  stroke: currentColor;
  stroke-width: 1.8;
  fill: none;
}
.card h3 { color: var(--blue); font-size: 24px; margin: 46px 18px 6px; }
.card p { color: var(--muted); margin: 0 18px 20px; min-height: 45px; line-height: 1.4; }
.card a { color: var(--green); margin: 0 18px 22px; display: inline-flex; align-items: center; gap: 6px; font-weight: 900; text-decoration: none; }

.about { display: grid; grid-template-columns: .9fr .78fr 1.02fr; align-items: center; gap: 34px; }
.about p { color: var(--muted); line-height: 1.75; max-width: 465px; }
.green-button { background: var(--green); margin-top: 14px; text-decoration: none; }
.about-mascot { background: #ffe58c; border-radius: 50%; width: min(350px, 80vw); aspect-ratio: 1; display: grid; place-items: end center; overflow: hidden; }
.about-mascot img { width: 82%; align-self: end; margin-bottom: -2px; }
.photo-stack img { width: 100%; border-radius: 8px; box-shadow: 0 12px 30px rgba(16, 38, 84, .16); transform: rotate(3deg); }

.benefits { background: #fffdfa; border-radius: 8px; box-shadow: 0 12px 30px rgba(16, 38, 84, .06); display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; padding: 34px; }
.benefits div { display: grid; grid-template-columns: 54px 1fr; gap: 4px 16px; align-items: center; }
.benefits i { grid-row: span 2; color: var(--green); background: #edf6e9; border-radius: 50%; width: 54px; height: 54px; display: grid; place-items: center; font-style: normal; }
.benefits svg {
  width: 26px;
  height: 26px;
  stroke: currentColor;
  stroke-width: 1.8;
  fill: none;
}
.benefits strong { color: var(--blue); }
.benefits span { color: var(--muted); font-size: 14px; line-height: 1.4; }

.gallery { display: grid; grid-template-columns: 240px repeat(5, 1fr); gap: 18px; align-items: center; }
.gallery a { color: var(--green); font-size: 22px; font-weight: 900; display: inline-flex; align-items: center; gap: 10px; text-decoration: none; margin-top: 24px; }
.gallery img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; background: white; }

.cta {
  position: relative;
  display: grid;
  grid-template-columns: 1.15fr .95fr 240px;
  align-items: center;
  gap: 28px;
  background: var(--blue);
  color: white;
  border-radius: 34px;
  min-height: 170px;
  margin-top: 30px;
  overflow: visible;
  padding-right: 250px;
}
.cta h2 { color: white; font-size: clamp(32px, 4vw, 48px); }
.cta p { line-height: 1.6; margin: 0; }
.cta a { justify-self: start; background: var(--green); }
.cta img { position: absolute; right: 28px; bottom: 0; width: 210px; max-height: 235px; object-fit: contain; object-position: bottom center; filter: drop-shadow(0 12px 12px rgba(0,0,0,.16)); }

footer { max-width: 1240px; margin: 0 auto; padding: 58px 24px 28px; display: grid; grid-template-columns: 1.5fr repeat(4, 1fr); gap: 38px; }
footer p, footer span, footer a { color: var(--muted); line-height: 1.7; text-align: left; text-decoration: none; }
footer h4 { color: var(--blue); margin: 0 0 18px; }
footer div { display: flex; flex-direction: column; gap: 8px; }
footer span { display: inline-flex; align-items: center; gap: 9px; }
.social { flex-direction: row; color: #5a6275; margin-top: 18px; }
.map-icon { color: var(--green); width: 76px; height: 76px; }
.copy { text-align: center; color: #6b7280; padding: 0 20px 24px; }

@media (max-width: 980px) {
  .topbar { grid-template-columns: 1fr auto auto; }
  .client { display: none; }
  .menu { display: grid; }
  nav { position: absolute; right: 20px; top: 82px; flex-direction: column; gap: 8px; width: 230px; background: white; padding: 18px; border-radius: 8px; box-shadow: 0 18px 40px rgba(16,38,84,.16); transform: translateY(-12px); opacity: 0; pointer-events: none; }
  nav.open { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .hero, .about, .section-head, .cta { grid-template-columns: 1fr; }
  .hero { min-height: 0; }
  .hero-art { min-height: 430px; }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .benefits { grid-template-columns: repeat(2, 1fr); }
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .gallery > div { grid-column: 1 / -1; }
  .cta { padding-right: 24px; overflow: hidden; }
  .cta img { position: static; width: 180px; justify-self: end; margin-bottom: -20px; }
  footer { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 620px) {
  .topbar { padding: 18px 16px 12px; }
  .brand img { width: 132px; }
  .hero, section { padding-left: 16px; padding-right: 16px; }
  .hero-benefits, .actions { align-items: stretch; }
  .actions a { width: 100%; justify-content: center; }
  .cards, .benefits, .gallery, footer { grid-template-columns: 1fr; }
  .card { min-height: auto; }
  .cta { border-radius: 18px; margin-left: 16px; margin-right: 16px; }
}