:root { --navy: #03162d; --blue: #174b9b; --cyan: #09bceb; --text: #102b58; --muted: #5f7189; --border: #d9e5ee; --bg: #f7fbfe; }

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body { margin: 0; color: var(--text); font-family: "Montserrat", sans-serif; }

a { text-decoration: none; }

.site-navbar { min-height: 80px; background: rgba(2, 20, 40, .97); border-bottom: 1px solid rgba(38, 188, 235, .22); }

.navbar-brand, .footer-brand { display: inline-flex; align-items: center; color: #fff; }

.site-logo { display: block; width: 188px; height: auto; max-height: 54px; object-fit: contain; }

.site-navbar .nav-link { position: relative; margin: 0 .55rem; padding: 1.8rem .1rem !important; color: #fff !important; font-size: .72rem; font-weight: 700; letter-spacing: .025em; text-transform: uppercase; }

.site-navbar .nav-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 13px; height: 2px; background: var(--cyan); transform: scaleX(0); transition: transform .2s ease; }

.site-navbar .nav-link:hover::after, .site-navbar .nav-link.active::after { transform: scaleX(1); }

.navbar-toggler { border-color: rgba(255,255,255,.3); } .navbar-toggler-icon { filter: invert(1); }

.btn-lunar, .btn-lunar-outline { padding: .8rem 1.35rem; border-radius: 7px; font-size: .75rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }

.btn-lunar { border: 1px solid var(--cyan); background: var(--cyan); color: #02182d; } .btn-lunar:hover { border-color: #fff; background: #fff; color: var(--navy); }

.btn-lunar-outline { border: 1px solid rgba(255,255,255,.85); background: rgba(0,0,0,.16); color: #fff; } .btn-lunar-outline:hover { background: #fff; color: var(--navy); }

.hero { position: relative; min-height: 475px; display: flex; align-items: center; background: linear-gradient(90deg, rgba(1,15,34,.96), rgba(1,19,39,.83) 35%, rgba(1,22,43,.35) 68%, rgba(1,22,43,.12)), url("https://images.unsplash.com/photo-1443631338765-3ff3f7fa5ea6?q=80&w=1740&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D") center/cover; color: #fff; overflow: hidden; }

.hero-content { position: relative; z-index: 3; max-width: 680px; padding: 4.5rem 0 6.5rem; }

.hero-eyebrow { margin-bottom: 1rem; color: #fff; font-size: .72rem; font-weight: 500; letter-spacing: .25em; text-transform: uppercase; } .hero-eyebrow span, footer span { color: var(--cyan); }

.hero-logo { margin-bottom: 1.3rem; } .hero-logo img { display: block; width: min(610px, 90%); max-height: 150px; object-fit: contain; object-position: left center; }

.hero-description { max-width: 620px; margin-bottom: 1.5rem; color: rgba(255,255,255,.95); font-size: 1rem; line-height: 1.55; } .hero-actions { display: flex; gap: .8rem; flex-wrap: wrap; }

.hero-wave { position: absolute; z-index: 4; left: -3%; right: -3%; bottom: -56px; height: 105px; background: #fff; border-top: 5px solid var(--cyan); border-radius: 50% 50% 0 0 / 35% 35% 0 0; transform: rotate(-1deg); }

.support-bar { position: relative; z-index: 6; margin-top: -20px; padding: 2rem 0 1.8rem; background: #fff; } .support-item { min-height: 74px; display: flex; align-items: center; gap: 1rem; padding: .5rem 1.2rem; border-right: 1px solid var(--border); } .support-col:last-child .support-item { border-right: 0; }

.support-icon { min-width: 52px; color: #1350a0; font-size: 2.4rem; line-height: 1; } .support-title { margin-bottom: .25rem; color: #112e65; font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; } .support-text { margin: 0; color: #536a87; font-size: .72rem; }

.feature-section { padding: 1rem 0 4rem; background: #fff; } .bingo-feature, .volunteer-feature { min-height: 265px; padding: 2rem; border-radius: 8px; overflow: hidden; }

.bingo-feature { background: linear-gradient(90deg, rgba(3,17,43,.98), rgba(3,22,52,.86)), url("https://images.unsplash.com/photo-1443631338765-3ff3f7fa5ea6?q=80&w=1740&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D") center/cover; color: #fff; } .bingo-eyebrow, .section-eyebrow { font-size: .65rem; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; }

.bingo-title { margin: .6rem 0 1rem; color: var(--cyan); font-size: clamp(2.5rem, 5vw, 4.4rem); font-weight: 800; font-style: italic; line-height: .9; text-transform: uppercase; } .bingo-copy { max-width: 440px; color: rgba(255,255,255,.9); font-size: .83rem; line-height: 1.6; }

.volunteer-feature { height: 100%; border: 1px solid #d7e7f1; background: linear-gradient(90deg, rgba(240,248,252,.98), rgba(240,248,252,.84) 52%, rgba(240,248,252,.28)), url("https://images.unsplash.com/photo-1443631338765-3ff3f7fa5ea6?q=80&w=1740&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D") center right/cover; } .section-eyebrow, .section-label { color: #7197bb; }

.volunteer-feature h2 { max-width: 360px; margin: .6rem 0 .7rem; color: #09295b; font-size: 1.75rem; font-weight: 800; line-height: 1.08; } .volunteer-feature p { max-width: 410px; color: #365675; font-size: .78rem; line-height: 1.6; }

.content-section { padding: 4.5rem 0; } .content-section.alt { background: var(--bg); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .section-label { color: var(--cyan); font-size: .68rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; } .section-title { margin: .5rem 0 1rem; color: #0b2d64; font-size: clamp(2rem, 4vw, 3.25rem); font-weight: 800; letter-spacing: -.04em; } .section-copy { color: var(--muted); font-size: .92rem; line-height: 1.8; }

.contact-item { height: 100%; padding: 1.35rem; border: 1px solid var(--border); border-radius: 7px; background: #fff; } .contact-item small { display: block; margin-bottom: .35rem; color: #7790a7; font-size: .62rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; } .contact-item strong { color: #153d71; font-size: .85rem; overflow-wrap: anywhere; }

footer { padding: 2.7rem 0; background: var(--navy); color: #91a9bf; font-size: .75rem; } footer a { color: #b5c7d8; } footer a:hover { color: var(--cyan); } .footer-brand { margin-bottom: .8rem; }

@media (max-width: 991px) { .site-navbar .nav-link { padding: .7rem 0 !important; } .site-navbar .nav-link::after { display: none; } .hero { min-height: 520px; background-position: 62% center; } .hero-content { padding-top: 4rem; } .support-item { border-right: 0; border-bottom: 1px solid var(--border); } .support-col:last-child .support-item { border-bottom: 0; } }

@media (max-width: 576px) { .site-logo { width: 250px; } .hero { min-height: 540px; } .hero-eyebrow { letter-spacing: .12em; } .hero-description { font-size: .9rem; } .bingo-feature, .volunteer-feature { padding: 1.5rem; } .hero-actions .btn { width: 100%; } }