/* ================================
   GLOBAL DESIGN SYSTEM
================================ */

:root {

    /* BRAND COLORS */
    --color-primary: #415462;
    --color-accent: #4da3ff;

    /* BACKGROUNDS */
    --color-page-bg: #f6f8fb;
    --color-section-bg: #ffffff;
    --color-section-muted: #eef2f6;
    --color-footer-bg: #1f2933;

    /* TEXT */
    --color-text-primary: #1f2933;
    --color-text-secondary: #4b5563;
    --color-text-light: #ffffff;
    --color-text-muted: #94a3b8;

    /* BORDERS */
    --color-border-light: #e5e7eb;

    /* TYPOGRAPHY */
    --font-primary: -apple-system, BlinkMacSystemFont,
                     "Segoe UI", Roboto,
                     "Helvetica Neue", Arial, sans-serif;

    --font-size-base: 16px;
    --font-size-small: 14px;
    --font-size-large: 18px;
    --font-size-heading: 32px;

    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* LAYOUT */
    --container-max-width: 1200px;
    --container-padding: 24px;
    --section-padding: 80px;
     --hero-padding-mobile: 20px;

    /* HEADER */
    --header-height: 76px;

    /* CTA */
    --cta-bg: var(--color-primary);
    --cta-text: #ffffff;

    /* TRANSITIONS */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;

    
}
/* LOCK IMAGES */
    img {
    max-width: 100%;
    height: auto;
    display: block;
}