:root {
    --page-bg: #f6f8fc;
    --text-primary: #0f1620;
    --text-secondary: #4a596b;
    --accent: #f0c36a;
    --muted: rgba(15, 22, 32, 0.07);
    --muted-strong: rgba(15, 22, 32, 0.14);
    --panel-border: rgba(15, 22, 32, 0.12);
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-pill: 999px;
    --shadow-soft: 0 10px 30px rgba(12, 22, 44, 0.12);
    --shadow-card: 0 16px 48px rgba(12, 22, 44, 0.14);
    --shadow-accent: 0 16px 40px rgba(240, 195, 106, 0.32);
    --shadow-focus: 0 0 0 3px rgba(126, 174, 255, 0.25);
    --shadow: var(--shadow-card);
    --transition: 0.3s ease;
    --font-sans: "Archivo", "TT Wellingtons", "Helvetica Neue", Arial, sans-serif;
    --font-display: "TT Wellingtons", "Archivo", "Helvetica Neue", Arial, sans-serif;
}

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

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-primary);
    background: var(--page-bg);
}

a {
    color: var(--text-primary);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
    text-decoration-color: var(--muted-strong);
    font-weight: 600;
    transition: color var(--transition), text-decoration-color var(--transition);
}

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

a:focus-visible {
    outline: 2px solid rgba(126, 174, 255, 0.9);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

label {
    display: inline-block;
    font-family: var(--font-sans);
    font-size: 0.95rem;
    line-height: 1.4;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 6px;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 0.6em;
    font-family: var(--font-display);
    color: var(--text-primary);
}

h1 {
    font-size: clamp(2.2rem, 3vw, 2.8rem);
    line-height: 1.12;
    font-weight: 800;
}

h2 {
    font-size: clamp(1.9rem, 2.5vw, 2.4rem);
    line-height: 1.18;
    font-weight: 800;
}

h3 {
    font-size: clamp(1.5rem, 2vw, 1.9rem);
    line-height: 1.22;
    font-weight: 700;
}

h4 {
    font-size: 1.25rem;
    line-height: 1.28;
    font-weight: 700;
}

h5 {
    font-size: 1.1rem;
    line-height: 1.3;
    font-weight: 600;
}

h6 {
    font-size: 1rem;
    line-height: 1.35;
    font-weight: 600;
}

p {
    margin: 0 0 1em;
    line-height: 1.7;
    color: var(--text-secondary);
}

ul,
ol {
    margin: 0 0 1.1em 1.25em;
    padding: 0;
    color: var(--text-secondary);
    line-height: 1.7;
}

ul li,
ol li {
    margin-bottom: 0.35em;
}

/* Breakpoints */
@media (max-width: 1920px) and (min-width: 1441px) {
    h1 { font-size: clamp(2.05rem, 2.6vw, 2.6rem); }
    h2 { font-size: clamp(1.8rem, 2.2vw, 2.2rem); }
    h3 { font-size: clamp(1.45rem, 1.9vw, 1.8rem); }
}

@media (max-width: 1440px) and (min-width: 1281px) {
    h1 { font-size: clamp(1.95rem, 2.4vw, 2.5rem); }
    h2 { font-size: clamp(1.75rem, 2.1vw, 2.15rem); }
    h3 { font-size: clamp(1.4rem, 1.8vw, 1.7rem); }
    p { line-height: 1.65; }
}

@media (max-width: 1280px) and (min-width: 901px) {
    h1 { font-size: clamp(1.85rem, 2.3vw, 2.35rem); }
    h2 { font-size: clamp(1.65rem, 2vw, 2.05rem); }
    h3 { font-size: clamp(1.35rem, 1.7vw, 1.6rem); }
    h4 { font-size: 1.15rem; }
    p { font-size: 15px; }
}

@media (max-width: 900px) and (min-width: 769px) {
    h1 { font-size: clamp(1.75rem, 2.2vw, 2.2rem); }
    h2 { font-size: clamp(1.55rem, 1.9vw, 1.9rem); }
    h3 { font-size: clamp(1.25rem, 1.6vw, 1.45rem); }
    h4 { font-size: 1.08rem; }
    h5 { font-size: 1rem; }
    p { font-size: 15px; line-height: 1.6; }
}

@media (max-width: 768px) and (min-width: 569px) {
    h1 { font-size: clamp(1.65rem, 6vw, 2rem); }
    h2 { font-size: clamp(1.45rem, 5vw, 1.75rem); }
    h3 { font-size: clamp(1.2rem, 4vw, 1.35rem); }
    h4 { font-size: 1.02rem; }
    h5 { font-size: 0.96rem; }
    h6 { font-size: 0.94rem; }
    p  { font-size: 14px; line-height: 1.6; }
    ul, ol { margin-left: 1.1em; }
}

@media (max-width: 568px) and (min-width: 321px) {
    h1 { font-size: clamp(1.5rem, 7vw, 1.85rem); }
    h2 { font-size: clamp(1.3rem, 6vw, 1.6rem); }
    h3 { font-size: clamp(1.1rem, 5vw, 1.25rem); }
    h4 { font-size: 0.98rem; }
    h5 { font-size: 0.94rem; }
    h6 { font-size: 0.9rem; }
    p  { font-size: 14px; line-height: 1.55; }
    label { font-size: 0.9rem; }
    ul, ol { margin-left: 1em; }
}

@media (max-width: 320px) {
    h1 { font-size: 1.4rem; }
    h2 { font-size: 1.25rem; }
    h3 { font-size: 1.05rem; }
    h4 { font-size: 0.95rem; }
    h5 { font-size: 0.9rem; }
    h6 { font-size: 0.88rem; }
    p  { font-size: 13px; line-height: 1.5; }
    label { font-size: 0.88rem; }
    ul, ol { margin-left: 0.95em; }
}