:root {
--bg:#ffffff;
--text:#1b1f23;
--muted:#5a636d;
--brand:#0f172a;
--accent:#0f766e;
--card:#f0f4f8;
--maxw:1100px;
--radius:16px;
--shadow:0 8px 24px rgba(0,0,0,.08)
}

html,body { height:100% }

body {
margin:0;
font-family:'Lato',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
line-height:1.65;
color:var(--text);
background:var(--bg);
}

/* Topbar */
.topbar {
position:sticky; top:0; z-index:10;
backdrop-filter:saturate(140%) blur(8px);
background:rgba(255,255,255,.8);
border-bottom:1px solid #eaeef2
}

.wrap {
margin:0 auto; max-width:var(--maxw); padding:12px 20px;
display:flex; align-items:center; justify-content:space-between
}

.brand img { height:96px; display:block }
.brand img.dark { display:none }

@media (prefers-color-scheme: dark) {
.brand img.light{display:none}
.brand img.dark{display:block}
}

.site-title {
    font-weight: 700;
    font-size: 1.8rem;
    letter-spacing: .02em;
    color: var(--text);
    text-align: center;
    flex-grow: 1;
}

.site-title .brand-tagline {
    color: #999DAD;
    font-weight: 400;
    font-size: 1rem;
}

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

.nav-link a {
font-weight:600; letter-spacing:.02em; color:var(--brand);
font-size:.9rem; text-decoration:none
}

.nav-link a:hover { color:var(--accent) }

.flags a { font-size:1.1rem; line-height:1; text-decoration:none }

/* Hero + header */
header { margin:40px auto 24px; max-width:var(--maxw); padding:0 20px; text-align:center }
.subtitle { font-size:1.4rem; font-weight:400; color:var(--muted); margin:0 0 1.2rem; text-align:center }
.hero { margin:0 auto; max-width:var(--maxw); padding:0 20px }
.hero img { width:100%; border-radius:var(--radius); box-shadow:var(--shadow); display:block }

/* Hero banner styling */
.hero.hero-banner {
width: 100%;
aspect-ratio: 1536 / 718;
overflow: hidden;
}

.hero.hero-banner img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
display: block;
border-radius: 0;
box-shadow: none;
}

/* Main content */
main { margin:28px auto; max-width:var(--maxw); padding:0 20px }
section { margin:38px 0 }
h2 { font-weight:700; font-size:1.35rem; margin:0 0 .6rem; text-align:center }
p { margin:.4rem 0; color:var(--text) }
.muted { color:var(--muted) }

/* CTA */
.cta {
margin:46px 0; text-align:center;
background:var(--card); border:2px solid var(--accent);
border-radius:var(--radius); padding:28px;
box-shadow:var(--shadow)
}

.cta h2 { font-size:2rem; margin-bottom:1rem }

.btn {
display:inline-block; margin-top:12px; padding:14px 22px;
border-radius:999px; border:1px solid transparent;
background:var(--accent); color:#fff;
text-decoration:none; font-weight:600; font-size:1rem
}

.btn:hover { filter:brightness(1.05) }

/* Footer */
footer { margin:56px auto 0; max-width:var(--maxw); padding:0 20px; font-size:.95rem; color:var(--muted) }
.footline { border-top:1px solid #eaeef2; padding-top:18px; text-align:center }
a { color:var(--accent); text-decoration:underline; text-underline-offset:3px }

/* Dark mode */
@media (prefers-color-scheme: dark) {
:root {
--bg:#0b0f14; --text:#e7eef6; --muted:#95a3b3; --brand:#e7eef6;
--card:#1a202c; --accent:#33d1c0
}

.topbar { background:rgba(11,15,20,.7); border-bottom-color:#1b2430 }
.hero img { box-shadow:none }
.cta { border-color:var(--accent) }
a { color:#6be6d9 }
}

/* Mobile tweaks */
@media (max-width: 600px) {
.wrap { padding:10px 14px }
.brand img { height:64px }
.site-title { font-size:1.6rem }
header { margin:24px auto 16px }
.subtitle { font-size:1.1rem }
}