:root { --blue: #0b4b9a; --deep-blue: #073b7a; --green: #70aa28; --ink: #14314b; --muted: #65798c; --paper: #f5f8fa; --line: #dce6ed; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); font-family: "DM Sans", Arial, sans-serif; background: var(--paper); }
.topbar { height: 78px; padding: 0 clamp(24px, 6vw, 92px); background: var(--blue); display: flex; align-items: center; justify-content: space-between; color: #fff; position: sticky; top: 0; z-index: 4; }
.brand { display: inline-flex; align-items: center; text-decoration: none; }
.brand img { width: 160px; height: auto; display: block; filter: brightness(0) invert(1); }
nav { display: flex; align-self: stretch; align-items: center; gap: 29px; } nav a { color: #dceafb; font-size: 14px; text-decoration: none; height: 100%; display: grid; place-items: center; border-bottom: 3px solid transparent; } nav a:hover, nav a.active { color: #fff; border-color: #f8dc24; }
.menu-toggle { display: none; background: transparent; border: 0; padding: 8px; color: white; }.menu-toggle span { display: block; width: 23px; height: 2px; margin: 4px 0; background: currentColor; }
.hero { height: 380px; min-height: 0; overflow: hidden; position: relative; padding: 68px clamp(24px, 10vw, 160px); display: flex; align-items: center; background: linear-gradient(105deg, #e8f5f9 0%, #f8fbfc 57%, #d6ecf4 100%); transition: height .42s ease, padding .42s ease, opacity .26s ease, transform .42s ease; }.hero.is-scrolling-away { height: 0; min-height: 0; padding-top: 0; padding-bottom: 0; opacity: 0; transform: translateY(-18px); pointer-events: none; }
.hero::before { content: ""; position: absolute; width: 420px; height: 420px; right: -85px; top: -235px; border: 65px solid rgba(112,170,40,.12); border-radius: 50%; }.hero-copy { position: relative; z-index: 1; max-width: 640px; }.eyebrow { color: #4a7c18; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.3px; margin: 0 0 13px; }.hero h1 { font: 600 clamp(44px, 5vw, 72px)/.97 "Outfit", sans-serif; letter-spacing: -2.5px; margin: 0; color: var(--deep-blue); }.hero h1 em { color: var(--green); font-style: normal; }.hero-text { max-width: 560px; font-size: 17px; line-height: 1.55; color: #446278; margin: 22px 0 24px; }.scroll-link { color: var(--blue); font-weight: 700; text-decoration: none; font-size: 15px; }.scroll-link span { font-size: 21px; padding-left: 7px; }
.hero-graphic { position: absolute; width: 350px; right: clamp(32px, 11vw, 200px); top: 43px; color: rgba(10,75,154,.17); }.hero-graphic svg { width: 100%; }.orb { border-radius: 50%; position: absolute; }.orb-one { width: 54px; height: 54px; background: #79af31; right: 16px; top: 28px; opacity: .8; }.orb-two { width: 23px; height: 23px; border: 5px solid #0b4b9a; left: 9px; bottom: 46px; }
.hero { min-height: 380px; overflow: hidden; position: relative; padding: 68px clamp(24px, 10vw, 160px); display: flex; align-items: center; background: linear-gradient(105deg, #e8f5f9 0%, #f8fbfc 57%, #d6ecf4 100%); }.hero::before { content: ""; position: absolute; width: 420px; height: 420px; right: -85px; top: -235px; border: 65px solid rgba(112,170,40,.12); border-radius: 50%; }.hero-copy { position: relative; z-index: 1; max-width: 640px; }.eyebrow { color: #4a7c18; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.3px; margin: 0 0 13px; }.hero h1 { font: 600 clamp(44px, 5vw, 72px)/.97 "Outfit", sans-serif; letter-spacing: -2.5px; margin: 0; color: var(--deep-blue); }.hero h1 em { color: var(--green); font-style: normal; }.hero-text { max-width: 560px; font-size: 17px; line-height: 1.55; color: #446278; margin: 22px 0 24px; }.scroll-link { color: var(--blue); font-weight: 700; text-decoration: none; font-size: 15px; }.scroll-link span { font-size: 21px; padding-left: 7px; }.hero-graphic { position: absolute; width: 350px; right: clamp(32px, 11vw, 200px); top: 43px; color: rgba(10,75,154,.17); }.hero-graphic svg { width: 100%; }.orb { border-radius: 50%; position: absolute; }.orb-one { width: 54px; height: 54px; background: #79af31; right: 16px; top: 28px; opacity: .8; }.orb-two { width: 23px; height: 23px; border: 5px solid #0b4b9a; left: 9px; bottom: 46px; }
.solutions { max-width: 1210px; margin: 0 auto; padding: clamp(42px, 8vh, 96px) 28px; }.cards-grid { width: 100%; display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; }.solution-card { grid-column: span 2; min-height: 225px; padding: 29px; border: 1px solid var(--line); border-radius: 18px; background: #fff; display: flex; flex-direction: column; text-decoration: none; color: var(--ink); position: relative; overflow: hidden; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; animation: float 10s ease-in-out infinite alternate; transform-origin: center center; }.solution-card::after { content: ""; position: absolute; width: 150px; height: 150px; right: -75px; bottom: -88px; border-radius: 50%; background: #e7f1fb; opacity: .7; transition: transform .25s ease; }.verde::after { background: #e8f3db; }.solution-card:hover, .solution-card:focus-visible { transform: translateY(-8px) scale(1.01); box-shadow: 0 20px 36px rgba(12,57,94,.16); border-color: #afc7d7; outline: none; }.solution-card:hover::after { transform: scale(1.25); }
.solution-card:nth-child(1) { animation-delay: 0s; }
.solution-card:nth-child(2) { animation-delay: 0.7s; }
.solution-card:nth-child(3) { animation-delay: 1.2s; }
.solution-card:nth-child(4) { animation-delay: 0.4s; }
.solution-card:nth-child(5) { animation-delay: 0.9s; }
.solution-card:nth-child(6) { animation-delay: 1.5s; }
@keyframes float {
  0% { transform: translate3d(0, 0, 0) rotate(0deg); }
  25% { transform: translate3d(4px, -10px, 0) rotate(-0.35deg); }
  50% { transform: translate3d(-5px, -4px, 0) rotate(0.25deg); }
  75% { transform: translate3d(3px, 8px, 0) rotate(-0.15deg); }
  100% { transform: translate3d(0, 0, 0) rotate(0deg); }
}
.card-icon, .card-content, .arrow { z-index: 1; }.card-icon { height: 50px; width: 50px; display: grid; place-items: center; border-radius: 14px; background: #e7f1fb; color: var(--blue); }.verde .card-icon { background: #edf5df; color: #5d951e; }.card-icon svg { width: 28px; height: 28px; }.card-content { display: block; margin-top: 23px; padding-right: 10px; }.card-title { display: block; color: #163953; font: 600 20px/1.13 "Outfit", sans-serif; }.card-description { color: #62788a; display: block; font-size: 13px; line-height: 1.48; margin-top: 9px; }.arrow { position: absolute; top: 29px; right: 28px; color: var(--blue); font-size: 23px; }.verde .arrow { color: #5d951e; }.cards-grid .solution-card:nth-child(4) { grid-column: 2 / span 2; }.cards-grid .solution-card:nth-child(5) { grid-column: 4 / span 2; }
.cards-grid { display: flex; flex-wrap: wrap; justify-content: center; }
.solution-card { width: calc((100% - 40px) / 3); }
@media (max-width: 850px) { .solution-card { width: calc((100% - 20px) / 2); } }
@media (max-width: 620px) { .solution-card { width: 100%; } }
footer { min-height: 130px; padding: 26px 24px; color: #fff; background: #073b7a; display: flex; justify-content: center; align-items: center; text-align: center; } footer div { display: flex; flex-direction: column; align-items: center; gap: 6px; } footer strong { color: #f7d91e; font: 700 23px "Outfit", sans-serif; letter-spacing: .5px; } footer div span { max-width: 850px; color: #fff; font-size: 14px; line-height: 1.4; } footer > span { color: #d5e6f5; font-size: 13px; }
@media (max-width: 850px) { .hero-graphic { right: -74px; opacity: .65; }.cards-grid { grid-template-columns: repeat(2, 1fr); }.solution-card, .cards-grid .solution-card:nth-child(4), .cards-grid .solution-card:nth-child(5) { grid-column: auto; } }
@media (max-width: 620px) { .topbar { height: 66px; padding: 0 22px; }.brand img { width: 127px; }.hero { height: 440px; min-height: 0; padding: 57px 25px; align-items: start; }.hero h1 { font-size: 48px; }.hero-text { font-size: 16px; max-width: 320px; }.hero-graphic { width: 220px; right: -75px; top: 185px; }.solutions { padding: 34px 20px 48px; }.cards-grid { grid-template-columns: 1fr; gap: 13px; }.solution-card, .cards-grid .solution-card:nth-child(4), .cards-grid .solution-card:nth-child(5) { grid-column: auto; min-height: 184px; padding: 25px; } footer { min-height: 145px; } footer div span { font-size: 12px; } }