:root {
    --bg: #0f1720;
    --card: #121a24;
    --muted: #8aa0b2;
    --text: #e9f0f6;
    --accent: #3aa0ff;
    --accent-2: #71c6ff;
}
* { box-sizing: border-box }
html, body { margin:0; padding:0; font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Ubuntu,Helvetica,Arial,sans-serif; color: var(--text); background: var(--bg) }
a { color: var(--accent); text-decoration: none }
a:hover { text-decoration: underline }
.container { max-width: 1100px; margin: 0 auto; padding: 24px }
.header { display:flex; align-items:center; gap:18px; padding:12px 0 }
.header img { height:78px; width:auto }
.nav { margin-left:auto; display:flex; gap:16px; flex-wrap:wrap }
.nav a { padding:8px 12px; border-radius:12px; border:1px solid transparent }
.nav a:hover { border-color: var(--accent) }
.hero-bg { position:relative; border-radius:18px; overflow:hidden; border:1px solid #213140; min-height:360px; display:flex; align-items:flex-end; background-size:cover; background-position:center }
.hero-overlay { position:absolute; inset:0; background:linear-gradient(180deg,rgba(5,12,20,0.25),rgba(5,12,20,0.65) 60%,rgba(5,12,20,0.85)) }
.hero-content { position:relative; padding:22px; max-width:820px }
.tagline { color: var(--accent-2); letter-spacing:0.08em; font-weight:600; text-transform:uppercase; font-size:12px }
h1 { font-size:40px; margin:0.4em 0 0.3em }
p { color:#cfe1ef; line-height:1.7 }
.lead { font-size:18px }
.btn { display:inline-block; background: var(--accent); color:#07131e; padding:12px 18px; border-radius:12px; font-weight:700 }
.btn.secondary { background: transparent; color: var(--text); border:1px solid var(--accent) }
.cta { display:flex; gap:12px; flex-wrap:wrap; margin-top:10px }
.section { margin-top:16px }
.footer { padding:28px 0; color:var(--muted); border-top:1px solid #1f2b37; margin-top:32px }
.small { font-size:12px; color:#a7bdd0 }
.card { background: var(--card); border:1px solid #213140; border-radius:16px; padding:18px }