@import url(./color.css);
@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@300;400;500;600;700;800&display=swap');

:root {
    /* Brand Colors */
    --color-navy:        #0d2b3e;
    --color-navy-dark:   #091e2d;
    --color-navy-light:  #163a52;
    --color-teal:        #1abcb0;
    --color-teal-light:  #21d4c7;
    --color-teal-dark:   #13a099;

    /* Neutrals */
    --color-white:       #ffffff;
    --color-off-white:   #f4f8fb;
    --color-gray-100:    #f0f4f8;
    --color-gray-200:    #e2eaf0;
    --color-gray-300:    #c8d6e0;
    --color-gray-400:    #8fa8bc;
    --color-gray-500:    #5a7a90;
    --color-gray-700:    #2d4a5e;
    --color-gray-900:    #0d2b3e;

    /* Text */
    --text-primary:      #0d2b3e;
    --text-secondary:    #3d6070;
    --text-muted:        #7a9aac;
    --text-white:        #ffffff;
    --text-white-muted:  rgba(255,255,255,0.72);

    /* Typography */
    --font-heading:      'Inter Tight', sans-serif;
    --font-body:         'Inter Tight', sans-serif;
    /* Font Sizes */

  --fluid-12-12: clamp(12px, 12px + 0vw, 12px);
  --fluid-14-14: clamp(14px, 14px + 0vw, 14px);
  --fluid-14-16: clamp(14px, 13.4603px + 0.1587vw, 16px);
  --fluid-15-18: clamp(15px, 14.1905px + 0.2381vw, 18px);
  --fluid-16-20: clamp(16px, 14.9206px + 0.3175vw, 20px);
  --fluid-18-24: clamp(18px, 16.381px + 0.4762vw, 24px);
  --fluid-22-32: clamp(22px, 19.3016px + 0.7937vw, 32px);
  --fluid-24-40: clamp(24px, 19.6825px + 1.2698vw, 40px);
  --fluid-32-64: clamp(32px, 23.3651px + 2.5397vw, 64px);   

    /* Spacing */
    --space-1:   0.25rem;
    --space-2:   0.5rem;
    --space-3:   0.75rem;
    --space-4:   1rem;
    --space-5:   1.25rem;
    --space-6:   1.5rem;
    --space-8:   2rem;
    --space-10:  2.5rem;
    --space-12:  3rem;
    --space-16:  4rem;
    --space-20:  7.5rem;
    --space-24:  6rem;

    /* Layout */
    --container-max:     1600px;
    --container-pad:     clamp(1rem, 4vw, 2rem);

    /* Border Radius */
    --radius-sm:   4px;
    --radius-md:   8px;
    --radius-lg:   12px;
    --radius-xl:   20px;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm:   0 1px 3px rgba(13,43,62,0.08), 0 1px 2px rgba(13,43,62,0.06);
    --shadow-md:   0 4px 16px rgba(13,43,62,0.10), 0 2px 6px rgba(13,43,62,0.08);
    --shadow-lg:   0 8px 32px rgba(13,43,62,0.14), 0 4px 12px rgba(13,43,62,0.08);
    --shadow-nav:  0 2px 20px rgba(13,43,62,0.08);

    /* Transitions */
    --transition-fast:   150ms ease;
    --transition-base:   250ms ease;
    --transition-slow:   400ms ease;

    /* Z-index */
    --z-topbar:   100;
    --z-navbar:   200;
    --z-dropdown: 300;
    --z-overlay:  400;
    --z-modal:    500;
}

/* ── Reset & Base ─────────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.6;
    color: var(--text-darker-blue);
    background-color: var(--bg-white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

a {
    color: inherit;
    text-decoration: none;
}

ul, ol {
    list-style: none;
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
}

input, textarea, select {
    font-family: inherit;
}

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

/* ── Utility: Visually Hidden ─────────────────────────────── */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border-width: 0;
}

/* ── Buttons (global) ─────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 0.65rem 1.5rem;
    border-radius: var(--radius-full);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    transition:
        background-color var(--transition-base),
        color var(--transition-base),
        border-color var(--transition-base),
        box-shadow var(--transition-base),
        transform var(--transition-fast);
    cursor: pointer;
}

.btn:active {
    transform: translateY(1px);
}

.btn-primary {
    background-color: var(--text-darker-blue);
    color: var(--text-white);
    border: 1px solid var(--text-darker-blue);
    border-radius: 50px;
    padding: 14px 20px;

}

.btn-primary:hover {
    background-color: var(--bg-white);
    border-color: var(--bg-white);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--text-darker-blue);
}

.btn-outline {
    background-color: var(--bg-white);
    color: var(--text-darker-blue);
    border: 1px solid var(--text-darker-blue);
}

.btn-outline:hover {
    background-color: var(--text-darker-blue);
    border-color: var(--text-darker-blue);
    box-shadow: var(--shadow-md);
    color: var(--text-white);
}

.btn-teal {
    background-color: var(--color-teal);
    color: var(--color-white);
    border: 2px solid var(--color-teal);
}

.btn-teal:hover {
    background-color: var(--color-teal-dark);
    border-color: var(--color-teal-dark);
    box-shadow: var(--shadow-md);
}

/* ── Section Spacing ──────────────────────────────────────── */
.section {
    padding-block: var(--space-20);
}

.section-sm {
    padding-block: var(--space-12);
}

/* ── Section Headings ─────────────────────────────────────── */
.section-label {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-teal);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: var(--space-3);
}

.section-title {
    font-family: var(--font-heading);
    font-size: var(--fluid-24-40);
    font-weight: 500;
    color: var(--text-darker-blue);
    line-height: 1.1;
    margin-bottom: var(--space-4);
}

.section-subtitle {
    font-size: var(--fluid-15-18);
    color: var(--text-darker-blue);
    line-height: 1.2;
    max-width: 500px;
}

.section-header {
    text-align: center;
    margin-bottom: var(--space-12);
}

.section-header .section-subtitle {
    margin-inline: auto;
}

/* ── Responsive Helpers ───────────────────────────────────── */
@media (max-width: 768px) {
    .hide-mobile { display: none !important; }
}

@media (min-width: 769px) {
    .hide-desktop { display: none !important; }
}