/* ====================================================================
   GUREXA — PROFESSIONAL GLOBAL DESIGN SYSTEM V2.0
   ==================================================================== */


/* ====================================================================
   1. DESIGN TOKENS
   ==================================================================== */

:root {

    /* --------------------------------------------------------------
       TYPOGRAPHY
       -------------------------------------------------------------- */

    --gx-font:
        Calibri,
        Carlito,
        "Segoe UI",
        Arial,
        sans-serif;

    --gx-body-size: 18px;
    --gx-body-line: 1.56;

    --gx-small-size: 16px;
    --gx-label-size: 17px;
    --gx-nav-size: 17px;
    --gx-button-size: 17px;

    --gx-card-title-size: 20px;
    --gx-card-body-size: 16px;

    --gx-h1-size: clamp(54px, 4.2vw, 68px);
    --gx-h2-size: clamp(38px, 2.8vw, 46px);
    --gx-h3-size: clamp(29px, 2vw, 34px);
    --gx-h4-size: 24px;
    --gx-h5-size: 21px;
    --gx-h6-size: 19px;

    /* --------------------------------------------------------------
       COLOR
       -------------------------------------------------------------- */

    --gx-navy: #061832;
    --gx-navy-soft: #263a58;
    --gx-text: #10233f;
    --gx-muted: #596b83;
    --gx-border: #c9d3e0;
    --gx-border-strong: #aebdd0;

    --gx-orange: #c87900;
    --gx-white: #ffffff;
    --gx-bg-soft: #f7f9fc;

    /* --------------------------------------------------------------
       LAYOUT
       -------------------------------------------------------------- */

    --gx-page-max: 1440px;
    --gx-gutter: clamp(24px, 4vw, 64px);

    --gx-section-y: clamp(42px, 5vw, 72px);
    --gx-card-radius: 12px;

}


/* ====================================================================
   2. DOCUMENT TYPOGRAPHY
   ==================================================================== */

html {
    font-family: var(--gx-font);
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
    text-rendering: optimizeLegibility;
}

body {
    font-family: var(--gx-font) !important;
    font-size: var(--gx-body-size) !important;
    line-height: var(--gx-body-line) !important;
    color: var(--gx-text);
}


/* ====================================================================
   3. NORMAL BODY TEXT
   ==================================================================== */

p,
li,
dd,
dt,
blockquote {
    font-family: var(--gx-font) !important;
    font-size: var(--gx-body-size) !important;
    line-height: var(--gx-body-line) !important;
}

p {
    margin-top: 0;
    margin-bottom: 1rem;
}


/* ====================================================================
   4. HEADING HIERARCHY
   ==================================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--gx-font) !important;
    color: var(--gx-navy);
    font-weight: 700 !important;
    line-height: 1.10 !important;
    letter-spacing: -0.015em;
    margin-top: 0;
}

h1 {
    font-size: var(--gx-h1-size) !important;
    margin-bottom: 22px;
}

h2 {
    font-size: var(--gx-h2-size) !important;
    margin-bottom: 16px;
}

h3 {
    font-size: var(--gx-h3-size) !important;
    margin-bottom: 14px;
}

h4 {
    font-size: var(--gx-h4-size) !important;
    margin-bottom: 10px;
}

h5 {
    font-size: var(--gx-h5-size) !important;
}

h6 {
    font-size: var(--gx-h6-size) !important;
}


/* ====================================================================
   5. GENERIC SECTION HEADINGS
   ==================================================================== */

.section-title,
.section-heading,
.gx-section-title,
.gx-section-heading,
[class*="section-title"],
[class*="section-heading"] {
    font-family: var(--gx-font) !important;
    font-size: var(--gx-h2-size) !important;
    line-height: 1.10 !important;
    font-weight: 700 !important;
}


/* ====================================================================
   6. CARD TITLES
   ==================================================================== */

.card-title,
.feature-title,
.panel-title,
.block-title,
.gx-card-title,
.gx-feature-title,
[class*="card-title"],
[class*="feature-title"],
[class*="panel-title"] {
    font-family: var(--gx-font) !important;
    font-size: var(--gx-card-title-size) !important;
    line-height: 1.20 !important;
    font-weight: 700 !important;
}


/* ====================================================================
   7. SMALL TEXT — NEVER MICROSCOPIC
   ==================================================================== */

small,
.small,
.meta,
.caption,
.helper-text,
.subtitle,
.gx-meta,
.gx-caption,
.gx-subtitle {
    font-family: var(--gx-font) !important;
    font-size: var(--gx-small-size) !important;
    line-height: 1.45 !important;
}


/* ====================================================================
   8. NAVIGATION
   ==================================================================== */

nav,
nav a,
.navbar,
.navbar a,
.gx-nav,
.gx-nav a,
[class*="navbar"] a,
[class*="nav-link"] {
    font-family: var(--gx-font) !important;
    font-size: var(--gx-nav-size) !important;
    line-height: 1.25 !important;
}


/* ====================================================================
   9. BUTTONS
   ==================================================================== */

button,
.btn,
.button,
a.btn,
a.button,
[class*="btn-"],
[class*="button-"] {
    font-family: var(--gx-font) !important;
    font-size: var(--gx-button-size) !important;
    line-height: 1.2 !important;
    font-weight: 600 !important;
}


/* ====================================================================
   10. FORMS
   ==================================================================== */

input,
textarea,
select {
    font-family: var(--gx-font) !important;
    font-size: 17px !important;
}

label {
    font-family: var(--gx-font) !important;
    font-size: 17px !important;
    font-weight: 600 !important;
}


/* ====================================================================
   11. TABLES
   ==================================================================== */

table,
th,
td {
    font-family: var(--gx-font) !important;
    font-size: 17px !important;
}

th {
    font-weight: 700 !important;
}


/* ====================================================================
   12. GLOBAL PAGE FRAME
   ==================================================================== */

.gx-professional-page-frame {
    width: min(
        calc(100% - (2 * var(--gx-gutter))),
        var(--gx-page-max)
    ) !important;

    margin-inline: auto !important;
}


/* ====================================================================
   13. PROFESSIONAL SECTION SPACING
   ==================================================================== */

.gx-professional-section {
    padding-top: var(--gx-section-y) !important;
    padding-bottom: var(--gx-section-y) !important;
}

.gx-professional-section-header {
    text-align: center;
    max-width: 920px;
    margin: 0 auto 30px;
}

.gx-professional-section-header h1,
.gx-professional-section-header h2,
.gx-professional-section-header h3 {
    margin-bottom: 8px;
}

.gx-professional-section-header p {
    color: var(--gx-navy-soft);
    font-size: 18px !important;
    margin-bottom: 0;
}


/* ====================================================================
   14. "WHAT CAN GUREXA HELP YOU DO?"
   ==================================================================== */

.gx-objectives-section {
    padding:
        32px
        var(--gx-gutter)
        40px !important;
}

.gx-objectives-section .gx-detected-section-heading {
    text-align: center;
}

.gx-objectives-section .gx-detected-section-heading h1,
.gx-objectives-section .gx-detected-section-heading h2,
.gx-objectives-section .gx-detected-section-heading h3 {
    font-size: clamp(36px, 2.6vw, 44px) !important;
    margin-bottom: 7px !important;
}

.gx-objectives-section .gx-detected-section-heading p {
    font-size: 18px !important;
    line-height: 1.45 !important;
    margin-bottom: 26px !important;
}


/*
   Ten tiny cards in one row are replaced by a professional
   five-column desktop grid.
*/

.gx-objective-grid {
    display: grid !important;

    grid-template-columns:
        repeat(5, minmax(180px, 1fr)) !important;

    gap: 16px !important;

    width: min(100%, var(--gx-page-max)) !important;
    margin: 0 auto !important;
}

.gx-objective-grid > * {
    min-width: 0 !important;
    min-height: 142px !important;

    padding: 20px 18px !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    text-align: center !important;

    border-radius: var(--gx-card-radius) !important;
}

.gx-objective-grid > * strong,
.gx-objective-grid > * b,
.gx-objective-grid > * h3,
.gx-objective-grid > * h4,
.gx-objective-grid > * [class*="title"] {
    font-size: 20px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
}

.gx-objective-grid > * p,
.gx-objective-grid > * small,
.gx-objective-grid > * span:not([class*="icon"]) {
    font-size: 16px !important;
    line-height: 1.35 !important;
}


/* ====================================================================
   15. MEET ATHENA / INTELLIGENCE PROCESS
   ==================================================================== */

.gx-athena-process-section {
    padding:
        42px
        var(--gx-gutter)
        46px !important;
}

.gx-athena-process-section > .gx-professional-page-frame {
    display: grid;
    grid-template-columns: minmax(240px, .9fr) minmax(0, 3.4fr);
    gap: 42px;
    align-items: start;
}

.gx-athena-process-intro h2,
.gx-athena-process-intro h3,
.gx-athena-process-intro h4 {
    font-size: 30px !important;
    margin-bottom: 14px !important;
}

.gx-athena-process-intro p {
    font-size: 18px !important;
    line-height: 1.55 !important;
}

.gx-athena-process-grid {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(130px,1fr)) !important;
    gap: 22px !important;
}

.gx-athena-process-grid > * {
    min-width: 0;
    text-align: center;
}

.gx-athena-process-grid > * strong,
.gx-athena-process-grid > * b,
.gx-athena-process-grid > * h3,
.gx-athena-process-grid > * h4,
.gx-athena-process-grid > * [class*="title"] {
    font-size: 19px !important;
    line-height: 1.2 !important;
}

.gx-athena-process-grid > * p,
.gx-athena-process-grid > * small {
    font-size: 16px !important;
    line-height: 1.5 !important;
}


/* ====================================================================
   16. GUREXA INTELLIGENCE UNIVERSE
   ==================================================================== */

.gx-universe-section {
    padding:
        42px
        var(--gx-gutter)
        48px !important;
}

.gx-universe-section .gx-detected-section-heading {
    text-align: center;
    margin-bottom: 28px;
}

.gx-universe-section .gx-detected-section-heading h1,
.gx-universe-section .gx-detected-section-heading h2,
.gx-universe-section .gx-detected-section-heading h3 {
    font-size: clamp(36px, 2.6vw, 44px) !important;
    margin-bottom: 7px !important;
}

.gx-universe-section .gx-detected-section-heading p {
    font-size: 18px !important;
}

.gx-universe-grid {
    display: grid !important;

    grid-template-columns:
        repeat(5, minmax(210px, 1fr)) !important;

    gap: 18px !important;

    width: min(100%, var(--gx-page-max)) !important;
    margin: 0 auto !important;
}

.gx-universe-grid > * {
    min-width: 0 !important;
    padding: 24px !important;
    border-radius: var(--gx-card-radius) !important;
}

.gx-universe-grid > * strong,
.gx-universe-grid > * b,
.gx-universe-grid > * h3,
.gx-universe-grid > * h4,
.gx-universe-grid > * [class*="title"] {
    font-size: 19px !important;
    line-height: 1.25 !important;
}

.gx-universe-grid > * p,
.gx-universe-grid > * small,
.gx-universe-grid > * li,
.gx-universe-grid > * span {
    font-size: 16px !important;
    line-height: 1.45 !important;
}


/* ====================================================================
   17. GENERIC CARD READABILITY
   ==================================================================== */

.card,
.gx-card,
.feature-card,
.product-card,
[class*="feature-card"],
[class*="product-card"] {
    line-height: 1.45;
}

.card p,
.gx-card p,
.feature-card p,
.product-card p {
    font-size: var(--gx-card-body-size) !important;
}


/* ====================================================================
   18. TABLET
   ==================================================================== */

@media (max-width: 1180px) {

    :root {
        --gx-body-size: 18px;
        --gx-gutter: 30px;
    }

    .gx-objective-grid {
        grid-template-columns:
            repeat(3, minmax(180px, 1fr)) !important;
    }

    .gx-universe-grid {
        grid-template-columns:
            repeat(3, minmax(210px, 1fr)) !important;
    }

    .gx-athena-process-section > .gx-professional-page-frame {
        grid-template-columns: 1fr !important;
    }

    .gx-athena-process-grid {
        grid-template-columns:
            repeat(3, minmax(160px, 1fr)) !important;
    }
}


/* ====================================================================
   19. MOBILE
   ==================================================================== */

@media (max-width: 768px) {

    :root {
        --gx-body-size: 17px;
        --gx-gutter: 20px;

        --gx-h1-size: clamp(38px, 10vw, 48px);
        --gx-h2-size: clamp(31px, 8vw, 39px);
        --gx-h3-size: 27px;
    }

    .gx-objective-grid {
        grid-template-columns:
            repeat(2, minmax(140px,1fr)) !important;
    }

    .gx-universe-grid {
        grid-template-columns:
            1fr !important;
    }

    .gx-athena-process-grid {
        grid-template-columns:
            repeat(2, minmax(140px,1fr)) !important;
    }
}


/* ====================================================================
   20. SMALL MOBILE
   ==================================================================== */

@media (max-width: 470px) {

    .gx-objective-grid,
    .gx-athena-process-grid {
        grid-template-columns:
            1fr !important;
    }

}