*, *::before, *::after {
    box-sizing: border-box;
}

:root {
    --color-primary: #00a859;
    --color-primary-dark: #006b3f;
    --color-secondary: #0057b8;
    --color-accent: #ffdf2e;
    --color-accent-dark: #f3aa18;
    --color-carnival: #ff2f8f;
    --color-atlantic: #042d6f;
    --color-bg: #04170f;
    --color-bg-alt: #06241a;
    --color-text: #f7fff7;
    --color-muted: #c8dccb;
    --color-border: rgba(255, 255, 255, 0.2);
    --color-border-subtle: rgba(255, 255, 255, 0.12);
    --color-surface: rgba(7, 40, 36, 0.72);
    --color-soft: rgba(255, 255, 255, 0.1);
    --color-dark: #03110e;
    --color-action: #ffdf2e;
    --glass-bg: linear-gradient(145deg, rgba(9, 54, 42, 0.82), rgba(5, 34, 65, 0.68));
    --glass-bg-strong: linear-gradient(145deg, rgba(5, 28, 25, 0.92), rgba(5, 38, 74, 0.8));
    --glass-border: rgba(255, 255, 255, 0.24);
    --glass-highlight: rgba(255, 255, 255, 0.18);
    --radius-card: 8px;
    --radius-control: 6px;
    --shadow-card: 0 10px 28px rgba(0, 0, 0, 0.32), inset 0 1px 0 var(--glass-highlight);
    --shadow-raised: 0 18px 52px rgba(0, 0, 0, 0.44), 0 0 28px rgba(255, 223, 46, 0.12);
    --shadow-material: 0 8px 26px rgba(0, 0, 0, 0.34), inset 0 1px 0 var(--glass-highlight);
    --container: 1400px;
}

body {
    margin: 0;
    color: var(--color-text);
    background:
        radial-gradient(circle at 12% 8%, rgba(255, 223, 46, 0.22) 0 10%, transparent 24%),
        radial-gradient(circle at 86% 18%, rgba(255, 47, 143, 0.18) 0 8%, transparent 23%),
        radial-gradient(circle at 80% 80%, rgba(0, 168, 89, 0.22) 0 12%, transparent 30%),
        repeating-linear-gradient(128deg, rgba(255, 255, 255, 0.045) 0 2px, transparent 2px 26px),
        linear-gradient(135deg, #04170f 0%, #062a39 38%, #042d6f 68%, #01120f 100%);
    font-family: 'Inter', 'Segoe UI Variable', 'Segoe UI', Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

a {
    color: var(--color-accent);
    text-decoration: none;
}

a:hover,
a:focus {
    color: #ffffff;
    text-decoration: underline;
}

h1,
h2,
h3,
h4,
p {
    margin-top: 0;
}

h1,
h2,
h3 {
    line-height: 1.18;
}

h1 {
    font-size: 42px;
    margin-bottom: 14px;
}

h2 {
    font-size: 28px;
    margin-bottom: 12px;
}

h3 {
    font-size: 20px;
    margin-bottom: 8px;
}

p {
    margin-bottom: 14px;
}

.container {
    width: min(var(--container), calc(100% - 32px));
    margin-inline: auto;
}

.section {
    padding: 24px 0;
}

.section-muted {
    background: rgba(0, 87, 184, 0.16);
    border-block: 1px solid var(--color-border-subtle);
}

.section-heading {
    margin-bottom: 20px;
}

.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.site-main {
    min-height: 58vh;
}

.text-primary {
    color: var(--color-primary);
}

.text-accent {
    color: var(--color-accent);
}

.bg-primary {
    background-color: var(--color-primary);
}

.bg-accent {
    background-color: var(--color-accent);
}

.border-light {
    border-color: var(--color-border);
}