/* ── Fonts ── */
@font-face {
    font-family: 'Fixel Text';
    src: url('../../inc/font/FixelText-Regular.woff2') format('woff2'),
         url('../../inc/font/FixelText-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Fixel Text';
    src: url('../../inc/font/FixelText-Medium.woff2') format('woff2'),
         url('../../inc/font/FixelText-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Fixel Text';
    src: url('../../inc/font/FixelText-SemiBold.woff2') format('woff2'),
         url('../../inc/font/FixelText-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Fixel Text';
    src: url('../../inc/font/FixelText-Bold.woff2') format('woff2'),
         url('../../inc/font/FixelText-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ── Tokens ── */
:root {
    /* Text */
    --color-text-primary:   #0B101F;
    --color-text-secondary: #303D60;
    --color-text-tertiary:  #8A9BCF;
    --color-text-accent:    #FF4171;
    --color-text-white:     #FFFFFF;

    /* Primary */
    --color-primary:          #162F6F;
    --color-primary-dark:     #0F204D;
    --color-primary-light:    #44588B;
    --color-primary-hover:    rgba(22, 47, 111, 0.04);
    --color-primary-selected: rgba(22, 47, 111, 0.08);
    --color-primary-focus:    rgba(22, 47, 111, 0.12);
    --color-primary-border:   rgba(22, 47, 111, 0.50);

    /* Accent */
    --color-accent:          #FF4171;
    --color-accent-dark:     #F1005B;
    --color-accent-light:    #FF7A92;
    --color-accent-hover:    rgba(255, 65, 113, 0.04);
    --color-accent-selected: rgba(255, 65, 113, 0.08);
    --color-accent-focus:    rgba(255, 65, 113, 0.12);
    --color-accent-border:   rgba(255, 65, 113, 0.50);

    /* Error */
    --color-error:        #F44336;
    --color-error-dark:   #D32F2F;
    --color-error-light:  #E57373;

    /* Warning */
    --color-warning:      #FF9800;
    --color-warning-dark: #F57C00;
    --color-warning-light:#FFB74D;

    /* Success */
    --color-success:      #4CAF50;
    --color-success-dark: #388E3C;
    --color-success-light:#81C784;

    /* Background */
    --color-bg:           #FFFFFF;
    --color-bg-secondary: #F5F6FA;

    /* Lines */
    --color-line:         #D5DAFA;
    --color-line-light:   #EEF0FD;
    --color-line-blue:    #889CF1;
    --color-line-white:   #FFFFFF;

    /* Container */
    --container-max:  1208px;
    --container-px:   24px;
}

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

html {
    font-family: 'Fixel Text', sans-serif;
    font-size: 16px;
    color: var(--color-text-primary);
    background: var(--color-bg);
    -webkit-font-smoothing: antialiased;
}

body { margin: 0; }

.nml-header--dark-text ~ main {
    padding-top: 75px;
}

img, svg { display: block; max-width: 100%; }

a { color: inherit; }

/* ── Container ── */
.container {
    width: 100%;
    max-width: calc(var(--container-max) + var(--container-px) * 2);
    margin-inline: auto;
    padding-inline: var(--container-px);
}

/* ── Typography — Desktop ── */
h1, .h1 { font-size: 56px; line-height: 64px; font-weight: 700; margin: 0; }
h2, .h2 { font-size: 48px; line-height: 56px; font-weight: 700; margin: 0; }
h3, .h3 { font-size: 40px; line-height: 48px; font-weight: 700; margin: 0; }
h4, .h4 { font-size: 32px; line-height: 40px; font-weight: 700; margin: 0; }
h5, .h5 { font-size: 24px; line-height: 32px; font-weight: 700; margin: 0; }

@media (max-width: 768px) {
    h1, .h1 { font-size: 40px; line-height: 48px; }
    h2, .h2 { font-size: 32px; line-height: 40px; }
    h3, .h3 { font-size: 24px; line-height: 32px; }
    h4, .h4 { font-size: 24px; line-height: 32px; }
    h5, .h5 { font-size: 18px; line-height: 26px; }
}

/* ── Badge ── */
.nml-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    padding: 6px 12px;
    background: #FFFFFF;
    border: 1px solid #D5DAFA;
    border-radius: 8px;
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
    color: #0B101F;
}

.nml-badge img {
    display: block;
    width: 16px;
    height: 16px;
    object-fit: contain;
    flex-shrink: 0;
}

@media (max-width: 768px){
    .nml-badge {
        padding: 6px 8px;
        gap: 4px;
        border-radius: 4px;
    }

    .nml-badge span{
        font-size: 14px;
        line-height: 20px;
    }
}

.btn-primary-black {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 12px 40px;
    gap: 8px;
    background: #040F2D;
    border-radius: 8px;
    font-weight: 700;
    font-size: 16px;
    line-height: 150%;
    color: #FFFFFF;
    text-decoration: none;
    transition: all 0.3s;
}
.btn-primary-black:hover {
    background: var(--color-primary-dark);
}
.btn-primary-black:active {
    background: rgba(4, 15, 45, 0.8);
    backdrop-filter: blur(4px);
}

.btn-primary {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 12px 20px;
    background: #162F6F;
    border: 1px solid #0F204D;
    border-radius: 8px;
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
    color: #FFFFFF;
    text-decoration: none;
    transition: background 0.3s;
    cursor: pointer;
}

.btn-primary:hover {
    background: #0F204D;
}

.btn-primary:active {
    background: #040F2D;
}

.btn-outlined {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 6px;
    height: 40px;
    padding: 10px 18px;
    background: transparent;
    border: 1px solid #162F6F;
    border-radius: 8px;
    font-size: 16px;
    line-height: 1;
    font-weight: 700;
    color: #162F6F;
    text-decoration: none;
    transition: all 0.3s;
    cursor: pointer;
}

.btn-outlined span {
    font-size: 14px;
    line-height: 20px;
    font-weight: 700;
    color: #162F6F;
    text-decoration: none;
    transition: all 0.3s;
}

.btn-outlined svg {
    width: 20px;
    height: 20px;
}

.btn-outlined:hover {
    background: rgba(22, 47, 111, 0.04);
    color: #0F204D;
}

.btn-outlined:hover .btn-outlined span {
    color: #0F204D;
}

.btn-outlined:active {
    background: rgba(22, 47, 111, 0.08);
    color: #040F2D;
}

.btn-outlined:active .btn-outlined span {
    color: #040F2D;
}

.wp-block-table {
    max-width: 99.7%;
}

@media (max-width: 991px) {
    :root {
        --container-px: 20px;
    }

    .btn-primary-black,
    .btn-primary,
    .btn-outlined {
        height: 44px;
        font-size: 14px;
        line-height: 20px;
    }

    .btn-primary-black span,
    .btn-primary span,
    .btn-outlined span {
        font-size: 14px;
        line-height: 20px;
    }
}