:root {

    --dna-primary: #0f68a8;
    --dna-primary-dark: #084a77;
    --dna-primary-soft: #eaf4fb;

    --dna-green: #16846b;
    --dna-green-soft: #eaf7f3;

    --dna-orange: #b77717;
    --dna-orange-soft: #fff5e5;

    --dna-purple: #6352b8;
    --dna-purple-soft: #f1effb;

    --dna-blue: #3570c8;
    --dna-blue-soft: #edf4ff;

    --dna-teal: #237e70;
    --dna-teal-soft: #eaf6f4;

    --dna-bg: #f5f7fa;

    --dna-card: #ffffff;

    --dna-text: #1d2939;
    --dna-muted: #667085;

    --dna-border: #e4e9ef;

    --dna-radius: 15px;

    --dna-shadow:
        0 4px 14px rgba(30, 50, 75, .05);

    --dna-shadow-hover:
        0 11px 28px rgba(30, 50, 75, .12);
}


/* ==========================================================
   BASE
========================================================== */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {

    margin: 0;

    background:
        linear-gradient(
            180deg,
            #ffffff 0,
            #f8fafc 270px,
            var(--dna-bg) 100%
        );

    color:
        var(--dna-text);

    font-family:
        "Inter",
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    -webkit-font-smoothing:
        antialiased;
}


.dna-shell {

    min-height:
        100vh;

}


/* ==========================================================
   HEADER
========================================================== */

.dna-header {

    position:
        sticky;

    top:
        0;

    z-index:
        1000;

    background:
        rgba(255,255,255,.95);

    border-bottom:
        1px solid var(--dna-border);

    backdrop-filter:
        blur(14px);

}


.dna-header-inner {

    min-height:
        72px;

    padding-left:
        34px;

    padding-right:
        34px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

}


.dna-brand {

    display:
        flex;

    align-items:
        center;

    gap:
        13px;

}


.dna-logo {

    width:
        58px;

    height:
        48px;

    object-fit:
        contain;

}


.dna-brand-overline {

    display:
        block;

    color:
        var(--dna-primary);

    font-size:
        9px;

    font-weight:
        800;

    text-transform:
        uppercase;

    letter-spacing:
        .08em;

}


.dna-brand-title {

    margin:
        1px 0;

    color:
        var(--dna-primary-dark);

    font-size:
        20px;

    font-weight:
        800;

}


.dna-brand-subtitle {

    color:
        var(--dna-muted);

    font-size:
        10px;

}


.dna-header-actions {

    display:
        flex;

    align-items:
        center;

    gap:
        20px;

}


.dna-system-status {

    align-items:
        center;

    gap:
        8px;

    padding:
        7px 11px;

    border:
        1px solid var(--dna-border);

    border-radius:
        999px;

    color:
        #536274;

    font-size:
        10px;

    font-weight:
        600;

    background:
        #fff;

}


.dna-status-dot {

    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        #20a273;

    box-shadow:
        0 0 0 3px rgba(32,162,115,.12);

}


.dna-suias {

    max-width:
        88px;

    max-height:
        43px;

    object-fit:
        contain;

}


/* ==========================================================
   HERO
========================================================== */

.dna-hero {

    padding:
        35px 0 23px;

}


.dna-hero-row {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        30px;

}


.dna-chip {

    display:
        inline-flex;

    padding:
        5px 9px;

    border-radius:
        999px;

    color:
        var(--dna-primary);

    background:
        var(--dna-primary-soft);

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        .07em;

}


.dna-hero h1 {

    margin:
        9px 0 4px;

    font-size:
        clamp(26px,3vw,34px);

    font-weight:
        800;

    letter-spacing:
        -.035em;

}


.dna-hero p {

    margin:
        0;

    color:
        var(--dna-muted);

    font-size:
        13px;

}


.dna-hero-indicator {

    display:
        flex;

    align-items:
        center;

    gap:
        11px;

    padding:
        11px 15px;

    border:
        1px solid var(--dna-border);

    border-radius:
        13px;

    background:
        #fff;

    box-shadow:
        var(--dna-shadow);

}


.dna-hero-indicator-icon {

    width:
        36px;

    height:
        36px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        10px;

    color:
        var(--dna-primary);

    background:
        var(--dna-primary-soft);

    font-size:
        23px;

}


.dna-hero-indicator strong {

    display:
        block;

    font-size:
        11px;

}


.dna-hero-indicator span {

    display:
        block;

    margin-top:
        2px;

    color:
        var(--dna-muted);

    font-size:
        9px;

}


/* ==========================================================
   SEARCH
========================================================== */

.dna-search {

    max-width:
        680px;

    min-height:
        50px;

    margin-top:
        19px;

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    padding:
        0 16px;

    border:
        1px solid var(--dna-border);

    border-radius:
        13px;

    background:
        #fff;

    box-shadow:
        var(--dna-shadow);

}


.dna-search svg {

    color:
        #8995a5;

}


.dna-search input {

    flex:
        1;

    border:
        0;

    outline:
        0;

    background:
        transparent;

    color:
        var(--dna-text);

    font-size:
        13px;

}


.dna-search input::placeholder {

    color:
        #98a2b3;

}


/* ==========================================================
   MAIN
========================================================== */

.dna-main {

    padding-top:
        9px;

    padding-bottom:
        35px;

}


/* ==========================================================
   SECTIONS
========================================================== */

.dna-section {

    margin-bottom:
        38px;

}


.dna-section-header {

    min-height:
        45px;

    margin-bottom:
        13px;

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        20px;

}


.dna-section-kicker {

    display:
        block;

    margin-bottom:
        2px;

    color:
        var(--dna-primary);

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        .08em;

    text-transform:
        uppercase;

}


.dna-section-header h2 {

    margin:
        0;

    color:
        #1d2939;

    font-size:
        18px;

    font-weight:
        750;

    letter-spacing:
        -.02em;

}


.dna-section-count {

    padding:
        5px 9px;

    border:
        1px solid var(--dna-border);

    border-radius:
        999px;

    background:
        #fff;

    color:
        var(--dna-muted);

    font-size:
        9px;

    font-weight:
        600;

}


/* ==========================================================
   CARDS
========================================================== */

.dna-module-item {

    display:
        flex;

}


.dna-card {

    width:
        100%;

    min-height:
        178px;

    padding:
        16px;

    display:
        flex;

    flex-direction:
        column;

    color:
        inherit;

    background:
        var(--dna-card);

    border:
        1px solid var(--dna-border);

    border-radius:
        var(--dna-radius);

    box-shadow:
        var(--dna-shadow);

    text-decoration:
        none;

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        border-color .18s ease;

}


.dna-card:hover {

    transform:
        translateY(-4px);

    border-color:
        rgba(15,104,168,.25);

    box-shadow:
        var(--dna-shadow-hover);

    color:
        inherit;

    text-decoration:
        none;

}


.dna-card-top {

    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        12px;

}


/* ==========================================================
   ICONS
========================================================== */

.dna-icon {

    width:
        48px;

    height:
        48px;

    flex-shrink:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        12px;

}


.dna-icon img {

    width:
        32px;

    height:
        32px;

    object-fit:
        contain;

}


.dna-icon.clinical {
    background: var(--dna-primary-soft);
}

.dna-icon.support {
    background: var(--dna-green-soft);
}

.dna-icon.admin {
    background: var(--dna-orange-soft);
}

.dna-icon.finance {
    background: var(--dna-purple-soft);
}

.dna-icon.analytics {
    background: var(--dna-blue-soft);
}

.dna-icon.territory {
    background: var(--dna-teal-soft);
}


/* ==========================================================
   TAGS
========================================================== */

.dna-tag {

    padding:
        4px 7px;

    border-radius:
        999px;

    font-size:
        8px;

    font-weight:
        800;

}


.dna-tag.clinical {
    color: var(--dna-primary);
    background: var(--dna-primary-soft);
}

.dna-tag.support {
    color: var(--dna-green);
    background: var(--dna-green-soft);
}

.dna-tag.admin {
    color: var(--dna-orange);
    background: var(--dna-orange-soft);
}

.dna-tag.finance {
    color: var(--dna-purple);
    background: var(--dna-purple-soft);
}

.dna-tag.analytics {
    color: var(--dna-blue);
    background: var(--dna-blue-soft);
}

.dna-tag.territory {
    color: var(--dna-teal);
    background: var(--dna-teal-soft);
}


/* ==========================================================
   CARD BODY
========================================================== */

.dna-card-body {

    flex:
        1;

    margin-top:
        13px;

}


.dna-card-body h3 {

    margin:
        0 0 4px;

    color:
        #1d2939;

    font-size:
        14px;

    font-weight:
        750;

}


.dna-card-body p {

    margin:
        0;

    color:
        var(--dna-muted);

    font-size:
        10px;

    line-height:
        1.45;

}


/* ==========================================================
   CARD FOOTER
========================================================== */

.dna-card-footer {

    margin-top:
        13px;

    padding-top:
        10px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    border-top:
        1px solid var(--dna-border);

    color:
        var(--dna-primary);

    font-size:
        10px;

    font-weight:
        700;

}


.dna-card-footer span:last-child {

    font-size:
        16px;

    transition:
        transform .18s ease;

}


.dna-card:hover
.dna-card-footer span:last-child {

    transform:
        translateX(3px);

}


/* ==========================================================
   SEARCH FILTER
========================================================== */

.dna-module-item.module-hidden {

    display:
        none !important;

}

.dna-section.section-hidden {

    display:
        none;

}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 991px) {

    .dna-header-inner {

        padding-left:
            20px;

        padding-right:
            20px;

    }

}


@media (max-width: 767px) {

    .dna-header-inner {

        min-height:
            64px;

        padding-left:
            14px;

        padding-right:
            14px;

    }

    .dna-logo {

        width:
            46px;

        height:
            40px;

    }

    .dna-brand-title {

        font-size:
            17px;

    }

    .dna-brand-overline {

        font-size:
            7px;

    }

    .dna-brand-subtitle {

        display:
            none;

    }

    .dna-suias {

        max-width:
            64px;

    }

    .dna-hero {

        padding:
            25px 0 17px;

    }

    .dna-hero h1 {

        font-size:
            25px;

    }

    .dna-search {

        min-height:
            48px;

    }

    .dna-section {

        margin-bottom:
            30px;

    }

    .dna-section-count {

        display:
            none;

    }

    .dna-card {

        min-height:
            165px;

    }

}