:root {
  --ink: #26364a;
  --muted: #667085;
  --blue: #118ab2;
  --sky: #eaf9fe;
  --pink: #ffe6ee;
  --yellow: #fff4cb;
  --green: #eaf5d5;
  --purple: #f1e8fc;
  --cream: #fffdf8;
  --line: #dde5e8;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--cream); color: var(--ink); font-family: "DM Sans", sans-serif; font-size: 16px; line-height: 1.5; }
a { color: inherit; text-decoration: none; }
.page-shell { margin: 0 auto; max-width: 1280px; overflow: hidden; padding: 0 48px; }
.site-header { align-items: center; display: flex; justify-content: space-between; padding: 28px 0; }
.brand { align-items: center; display: inline-flex; font-family: Nunito, sans-serif; font-size: 25px; font-weight: 900; gap: 10px; letter-spacing: -.8px; }
.brand > span:last-child > span { color: var(--blue); }
.brand-mark { background: var(--blue); border-radius: 13px; display: inline-block; height: 34px; position: relative; transform: rotate(-5deg); width: 34px; }
.eye { background: white; border-radius: 50%; height: 5px; position: absolute; top: 11px; width: 5px; }
.eye-left { left: 9px; } .eye-right { right: 9px; }
.smile { border-bottom: 3px solid white; border-radius: 0 0 18px 18px; height: 10px; left: 9px; position: absolute; top: 17px; width: 16px; }
.nav-links { align-items: center; display: flex; gap: 30px; }
.language-switcher { align-items: center; display: flex; gap: 5px; margin-left: -10px; }
.language-switcher > span { color: var(--line); font-size: 12px; }
.language-button { background: transparent; border: 0; color: var(--muted); cursor: pointer; font: 700 12px "DM Sans", sans-serif; padding: 6px 2px; }
.language-button:hover, .language-button.is-active { color: var(--blue); }
.language-button:focus-visible { border-radius: 4px; outline: 2px solid var(--blue); outline-offset: 2px; }
.nav-links a, .footer-links a { color: var(--muted); font-size: 14px; font-weight: 600; }
.nav-links a:hover, .footer-links a:hover, .text-link:hover { color: var(--blue); }
.nav-cta { border: 1px solid var(--line); border-radius: 999px; color: var(--ink) !important; padding: 10px 17px; }
.hero { align-items: center; display: grid; gap: 56px; grid-template-columns: 1fr .95fr; min-height: 620px; padding: 62px 0 76px; }
.eyebrow, .section-kicker { color: var(--blue); font-size: 12px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.eyebrow { align-items: center; display: flex; gap: 9px; }
.eyebrow-dot { background: #96c220; border-radius: 50%; height: 8px; width: 8px; }
h1, h2 { font-family: Nunito, sans-serif; letter-spacing: -2.8px; line-height: .98; margin: 20px 0; }
h1 { font-size: clamp(54px, 7vw, 88px); }
h1 em { color: var(--blue); font-style: normal; }
.hero-description { color: var(--muted); font-size: 19px; line-height: 1.65; max-width: 490px; }
.hero-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 24px; margin-top: 34px; }
.button { border-radius: 999px; display: inline-flex; font-size: 15px; font-weight: 700; gap: 12px; padding: 15px 23px; transition: transform .2s, box-shadow .2s; }
.button-primary { background: var(--blue); box-shadow: 0 10px 22px #118ab230; color: white; }
.button:hover { box-shadow: 0 14px 28px #118ab238; transform: translateY(-2px); }
.text-link { color: var(--ink); font-size: 15px; font-weight: 700; }
.text-link span { color: var(--blue); margin-left: 5px; }
.hero-art { background: var(--sky); border-radius: 47% 53% 52% 48% / 44% 45% 55% 56%; height: 490px; overflow: hidden; position: relative; }
.orbit { border: 1px dashed #118ab250; border-radius: 50%; height: 370px; left: 50%; position: absolute; top: 53%; transform: translate(-50%, -50%) rotate(-23deg); width: 260px; }
.orbit-two { height: 440px; transform: translate(-50%, -50%) rotate(57deg); width: 345px; }
.hero-bubble { background: linear-gradient(145deg, #51bcf9, #118ab2); border-radius: 44% 56% 58% 42% / 47% 43% 57% 53%; box-shadow: 13px 18px 0 #118ab21c; height: 220px; left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%) rotate(7deg); width: 220px; }
.bubble-face { left: 63px; position: absolute; top: 83px; }
.bubble-face span { background: white; border-radius: 50%; display: inline-block; height: 13px; margin-right: 44px; width: 13px; }
.bubble-face i { border-bottom: 5px solid white; border-radius: 0 0 25px 25px; display: block; height: 24px; margin: 8px auto 0; width: 62px; }
.bubble-spark { color: #fff3b0; font-size: 39px; position: absolute; right: 20px; top: 22px; }
.floating-card { align-items: center; border-radius: 18px; box-shadow: 0 13px 26px #26364a18; display: flex; flex-direction: column; font-family: Nunito, sans-serif; justify-content: center; position: absolute; transform: rotate(-8deg); }
.floating-card span { font-size: 28px; font-weight: 900; } .floating-card small { color: #26364a9e; font-family: "DM Sans", sans-serif; font-size: 11px; font-weight: 700; text-transform: uppercase; }
.card-yellow { background: #fff3b0; height: 94px; left: 14%; top: 17%; width: 94px; } .card-coral { background: #ffe8e2; height: 84px; right: 13%; top: 28%; transform: rotate(11deg); width: 84px; } .card-green { background: #eaf5d5; bottom: 15%; height: 100px; right: 15%; transform: rotate(-7deg); width: 120px; }
.star { color: #eec94c; font-size: 29px; position: absolute; } .star-one { left: 17%; top: 62%; } .star-two { color: #a064e4; right: 19%; top: 13%; }
.trust-strip { border-bottom: 1px solid var(--line); border-top: 1px solid var(--line); display: grid; gap: 24px; grid-template-columns: repeat(3, 1fr); padding: 29px 0; }
.trust-strip div { border-left: 2px solid #51bcf9; display: flex; flex-direction: column; padding-left: 18px; } .trust-strip div:nth-child(2) { border-color: #eec94c; } .trust-strip div:nth-child(3) { border-color: #96c220; }
.trust-strip strong { font-family: Nunito, sans-serif; font-size: 17px; } .trust-strip span { color: var(--muted); font-size: 13px; margin-top: 2px; }
.about-section { padding: 140px 0 126px; } .about-grid { align-items: end; display: grid; gap: 90px; grid-template-columns: 1fr 1fr; margin-top: 25px; }
h2 { font-size: clamp(42px, 5vw, 67px); } h2 span { color: var(--blue); } .about-grid p, .resources-heading > p { color: var(--muted); font-size: 18px; line-height: 1.7; max-width: 445px; }
.resources-section { background: #f6fbfc; border-radius: 34px; padding: 68px 62px 73px; } .resources-heading { align-items: end; display: flex; justify-content: space-between; } .resources-heading h2 { margin-bottom: 0; margin-top: 18px; }
.resource-grid { display: grid; gap: 14px; grid-template-columns: repeat(6, 1fr); margin-top: 50px; } .resource-card { align-items: center; border-radius: 18px; display: flex; flex-direction: column; gap: 18px; grid-column: span 2; justify-content: center; min-height: 175px; padding: 24px; position: relative; text-align: center; transition: transform .2s, box-shadow .2s; } .resource-card:hover { box-shadow: 0 12px 24px #26364a16; transform: translateY(-4px); }
.resource-blue { background: var(--sky); } .resource-pink { background: var(--pink); } .resource-yellow { background: var(--yellow); } .resource-green { background: var(--green); } .resource-purple { background: var(--purple); } .resource-support { grid-column: 3 / span 2; }
.resource-icon { align-items: center; background: #ffffff9c; border-radius: 50%; display: flex; font-size: 27px; height: 52px; justify-content: center; width: 52px; } .resource-card strong, .resource-card small { display: block; } .resource-card strong { font-family: Nunito, sans-serif; font-size: 18px; } .resource-card small { color: var(--muted); font-size: 12px; margin-top: 3px; } .resource-card b { font-size: 18px; position: absolute; right: 20px; top: 18px; }
.site-footer { align-items: center; display: flex; justify-content: space-between; padding: 43px 0 48px; } .site-footer p { color: var(--muted); font-size: 13px; margin: 0; } .footer-links { display: flex; gap: 22px; }
@media (max-width: 800px) { .page-shell { padding: 0 22px; } .nav-links { gap: 12px; } .nav-links a:not(.nav-cta) { display: none; } .nav-cta { padding: 9px 12px; } .language-switcher { margin-left: 0; } .hero { gap: 36px; grid-template-columns: 1fr; padding: 52px 0 66px; } .hero-art { height: 380px; margin: 0 auto; max-width: 530px; width: 100%; } .trust-strip { grid-template-columns: 1fr; } .about-section { padding: 90px 0; } .about-grid, .resources-heading { align-items: start; display: block; } .about-grid p, .resources-heading > p { margin-top: 28px; } .resources-section { padding: 44px 22px; } .resource-card { grid-column: span 2; } .resource-support { grid-column: auto; } .site-footer { align-items: flex-start; flex-direction: column; gap: 22px; } }
@media (max-width: 480px) { h1 { font-size: 54px; } .hero-description { font-size: 17px; } .hero-art { height: 330px; } .hero-bubble { height: 165px; width: 165px; } .bubble-face { left: 45px; top: 58px; } .bubble-face span { height: 10px; margin-right: 31px; width: 10px; } .bubble-face i { border-width: 4px; height: 18px; width: 48px; } .card-yellow { left: 5%; } .card-coral { right: 5%; } .card-green { bottom: 7%; right: 5%; } .resource-card { grid-column: span 6; } .resource-support { grid-column: span 6; } .footer-links { flex-wrap: wrap; } }