@font-face {
    font-family: "Noto Sans";
    src: url("../assets/fonts/noto/static/NotoSans-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Noto Sans";
    src: url("../assets/fonts/noto/static/NotoSans-Medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Noto Sans";
    src: url("../assets/fonts/noto/static/NotoSans-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    --ink: #ffffff;
    --ink-soft: rgba(255, 255, 255, 0.9);
    --accent: #c56636;
    --accent-dark: #a54f27;
    --navbar-bg: rgba(13, 21, 58, 0.92);
    --brand-name-color: #ffffff;
    --footer-bg: #0a1439;
    --footer-text: #ffffff;
    --button-brand: var(--accent);
    --button-brand-dark: var(--accent-dark);
    --line: rgba(255, 255, 255, 0.16);
    --shadow: 0 20px 48px rgba(0, 0, 0, 0.24);
    --footer-height: 36px;
    --surface: #f6f1ea;
    --surface-strong: #efe6dc;
    --surface-card: rgba(255, 255, 255, 0.82);
    --ink-dark: #1f2430;
    --ink-muted: #5d6576;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: "Noto Sans", Georgia, "Times New Roman", serif;
    color: var(--ink);
    background: linear-gradient(135deg, #0b1a4a, #1e3c72);
    overflow-x: hidden;
    overflow-y: auto;
}

a {
    color: inherit;
    text-decoration: none;
}

main {
    display: block;
}

.container {
    width: min(1240px, calc(100% - 2rem));
    margin: 0 auto;
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 180px;
    padding: 0.9rem 1.25rem;
    border-radius: 999px;
    border: 1px solid var(--button-brand);
    background: var(--button-brand);
    color: #fff;
    font-size: 0.98rem;
    font-weight: 700;
    transition: 180ms ease;
    box-shadow: var(--shadow);
}

.button.secondary {
    border: 1px solid rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.04);
    color: #fff;
    box-shadow: none;
}

.button:hover {
    background: var(--button-brand-dark);
    border-color: var(--button-brand-dark);
    color: #fff;
}

.button.secondary:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.4);
    color: #fff;
}

.actions {
    display: flex;
    gap: 0.9rem;
    flex-wrap: wrap;
    margin-top: 1.5rem;
}

@media (max-width: 720px) {
    .container {
        width: min(100%, calc(100% - 1.25rem));
    }

    .button {
        width: 100%;
    }
}