@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@600;700;800&display=swap');

:root {
    --public-navy: #061a36;
    --public-navy-soft: #0a2c58;
    --public-blue: #1578ed;
    --public-green: #73dc43;
    --public-ink: #10233e;
    --public-muted: #68778b;
    --public-line: #dfe6ef;
    --public-paper: #f4f7fb;
    --public-white: #ffffff;
    --public-font: 'DM Sans', Arial, sans-serif;
    --public-display: 'Manrope', Arial, sans-serif;
    --public-width: 1240px;
    --public-gutter: 30px;
    --public-header-height: 78px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--public-header-height) + 8px); }
body { margin: 0; color: var(--public-ink); font-family: var(--public-font); }
button, input, select, textarea { font: inherit; }
img { max-width: 100%; }

.site-header {
    background: rgba(6, 26, 54, .96);
    border-bottom: 1px solid transparent;
    height: var(--public-header-height);
    inset: 0 0 auto;
    position: sticky;
    top: 0;
    transition: border-color .2s, box-shadow .2s;
    z-index: 100;
}

.site-header.scrolled {
    backdrop-filter: blur(14px);
    border-color: rgba(255, 255, 255, .08);
    box-shadow: 0 8px 30px rgba(3, 17, 39, .18);
}

.header-inner {
    align-items: center;
    display: flex;
    gap: 42px;
    height: 100%;
    margin: 0 auto;
    max-width: var(--public-width);
    padding: 0 var(--public-gutter);
}

.site-header .brand {
    align-items: center;
    display: flex;
    flex: none;
    height: 60px;
    padding: 0;
}

.site-header .brand img { display: block; height: auto; object-fit: contain; width: 200px; }

.main-menu {
    align-items: center;
    display: flex;
    gap: 26px;
    height: 100%;
}

.main-menu a,
.main-menu .future-link {
    align-items: center;
    color: #b8c8dc;
    display: flex;
    font: 700 11px var(--public-display);
    height: 100%;
    letter-spacing: .055em;
    position: relative;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
}

.main-menu a:hover,
.main-menu a.active { color: var(--public-white); }
.main-menu a::after { background: var(--public-green); bottom: 0; content: ''; height: 3px; left: 0; position: absolute; right: 100%; transition: right .25s ease; }
.main-menu a:hover::after { right: 0; }
.main-menu a.active::after { right: 0; transition: none; }
.main-menu .future-link { cursor: default; gap: 6px; opacity: .62; }
.future-link small { border: 1px solid rgba(115, 220, 67, .4); border-radius: 10px; color: var(--public-green); font-size: 7px; padding: 2px 5px; }

.login-link {
    color: #c1d0e2;
    font: 700 11px var(--public-display);
    margin-left: auto;
    position: relative;
    text-decoration: none;
    white-space: nowrap;
}

.login-link::after {
    background: var(--public-green);
    bottom: -5px;
    content: '';
    height: 1px;
    left: 0;
    position: absolute;
    right: 100%;
    transition: right .25s ease;
}

.login-link:hover { color: var(--public-white); }
.login-link:hover::after { right: 0; }

.access-link,
.public-button-primary {
    background: var(--public-green);
    border: 0;
    border-radius: 10px;
    color: var(--public-navy);
    display: inline-flex;
    font: 800 12px var(--public-display);
    justify-content: center;
    padding: 11px 17px;
    text-decoration: none;
    transition: transform .22s ease, box-shadow .22s ease;
    white-space: nowrap;
}

.access-link:hover,
.public-button-primary:hover {
    box-shadow: 0 10px 24px rgba(115, 220, 67, .35);
    transform: translateY(-2px);
}

.access-link span,
.public-button-primary span { margin-left: 7px; }
.menu-toggle { display: none; }

.site-footer {
    background: #04142b;
    color: #91a5be;
    display: block;
    min-height: 0;
    padding: 60px max(var(--public-gutter), calc((100vw - 1180px) / 2)) 22px;
}

.site-footer span { margin-left: 0; }

.footer-main {
    display: grid;
    gap: 60px;
    grid-template-columns: 1.7fr .65fr .65fr;
    padding-bottom: 42px;
}

.footer-brand-lockup { align-items: center; display: flex; width: max-content; }
.footer-brand-lockup > img { height: auto; object-fit: contain; width: 230px; }
.footer-main p { color: #b4c4d8; font-size: 15px; line-height: 1.6; margin: 15px 0 0; }
.footer-links { display: flex; flex-direction: column; font-size: 13px; gap: 12px; }
.footer-links strong { color: var(--public-white); font: 800 13px var(--public-display); margin-bottom: 6px; }
.footer-links a { text-decoration: none; }
.footer-links a:hover { color: var(--public-white); }
.footer-links span { color: #91a5be; }
.footer-links small { color: var(--public-green); font-size: 8px; margin-left: 4px; text-transform: uppercase; }
.footer-bottom { align-items: center; border-top: 1px solid rgba(255, 255, 255, .12); display: flex; font-size: 13px; justify-content: space-between; padding-top: 24px; color: #aebdd0; }
.footer-bottom span:last-child { align-items: center; color: #f4f8fc; display: flex; font-family: var(--public-display); font-size: 17px; font-weight: 800; letter-spacing: -.01em; }
.footer-bottom span:last-child::before { background: var(--public-green); border-radius: 50%; box-shadow: 0 0 0 5px rgba(115, 220, 67, .12); content: ''; height: 7px; margin-right: 11px; width: 7px; }

@media (max-width: 1050px) {
    .header-inner { gap: 24px; }
    .main-menu { gap: 16px; }
    .main-menu a, .main-menu .future-link { font-size: 9px; }
}

@media (max-width: 820px) {
    :root { --public-header-height: 68px; --public-gutter: 20px; }
    .site-header .brand { height: 50px; }
    .site-header .brand img { height: auto; width: 175px; }
    .menu-toggle { align-content: center; background: transparent; border: 0; color: white; display: grid; gap: 4px; height: 38px; margin-left: auto; padding: 8px; width: 42px; }
    .menu-toggle span { background: white; height: 2px; width: 22px; }
    .menu-toggle b { clip: rect(0 0 0 0); position: absolute; }
    .main-menu { align-items: stretch; background: #071d3d; border-top: 1px solid rgba(255, 255, 255, .09); box-shadow: 0 16px 30px rgba(2, 12, 29, .5); display: none; flex-direction: column; gap: 0; height: auto; left: 0; padding: 15px 20px 22px; position: absolute; right: 0; top: var(--public-header-height); }
    .main-menu.open { display: flex; }
    .main-menu a, .main-menu .future-link { border-bottom: 1px solid rgba(255, 255, 255, .07); height: auto; padding: 12px 0; }
    .main-menu a.active::after { display: none; }
    .login-link { margin-left: 0; }
    .footer-main { grid-template-columns: 1fr 1fr; }
    .footer-main > div:first-child { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
    :root { --public-gutter: 14px; }
    .header-inner { gap: 7px; }
    .site-header .brand { height: 44px; }
    .site-header .brand img { height: auto; width: 122px; }
    .menu-toggle { flex: none; margin-left: auto; padding-left: 6px; padding-right: 6px; width: 36px; }
    .login-link { align-items: center; border: 1px solid rgba(255,255,255,.28); border-radius: 9px; color: #fff; display: inline-flex; flex: none; font-size: 9px; height: 36px; justify-content: center; margin-left: 0; padding: 0 9px; }
    .login-link::after { display: none; }
    .access-link { align-items:center; display:inline-flex; flex:none; font-size: 9px; height:36px; padding: 0 9px; }
    .access-link span { display:none; }
    .site-footer { padding-top: 48px; }
    .footer-main { gap: 34px; grid-template-columns: 1fr; }
    .footer-main > div:first-child { grid-column: auto; }
    .footer-bottom { flex-direction: column; gap: 9px; }
    .footer-bottom span:last-child { font-size: 15px; }
}

@media (max-width: 360px) {
    .site-header .brand img { width: 108px; }
    .header-inner { gap: 5px; }
    .login-link,.access-link { padding-left:7px; padding-right:7px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}