/* ============================================================
   CLEAN GLOBAL CONTAINER — Modern Layout (Safe + Simple)
   ============================================================ */

.container {
    width: 100%;
    max-width: 1250px;
    margin-left: auto;
    margin-right: auto;

    /* DEFAULT: NO desktop padding */
    padding-left: 0;
    padding-right: 0;
}

/* Desktop Large — stays flush */
@media (min-width: 1200px) {
    .container {
        padding-left: 0;
        padding-right: 0;
    }
}

/* Tablet — safe edges (prevent touching screen) */
@media (max-width: 900px) {
    .container {
        padding-left: 24px;
        padding-right: 24px;
    }
}

/* Mobile — strongest safe padding */
@media (max-width: 600px) {
    .container {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* ============================================================
 GLOBAL MAX-WIDTH ENFORCER
   Ensures ALL layout containers follow the 1250px hard cap
   ============================================================ */

/* Anything that behaves like a container */
.container,

.why-card > .container,
section.services > .container,
.cta-section > .container,
.hero .container,
.footer-top .container {
    max-width: 1250px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ============================================================
   1) UNIVERSAL RESET (legacy-safe)
   ============================================================ */

* {
    margin: 0;
    padding: 0;
}

html {
    box-sizing: border-box;
}

*, *::before, *::after {
    box-sizing: inherit;
}


/* ============================================================
   2) BASE DOCUMENT ENVIRONMENT
   ============================================================ */
/* =====================================
   UNIVERSAL HEADING WRAPPER (1250px)
===================================== */

section {
    max-width: 1250px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}


html, body {
    width: 100%;
    min-height: 100%;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

    background: var(--bg);
    color: var(--ink);

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    overflow-x: hidden;
}

img, svg, video, canvas {
    display: block;
    max-width: 100%;
    height: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
}

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

/* ============================================================
   UNIVERSAL SAFE-EDGE PADDING (Desktop + Mobile)
   Ensures NOTHING ever touches the viewport edges — except header/footer.
   ============================================================ */


/* No padding on body so header/footer remain full-bleed */
body {
    padding: 0;
}

/* Apply safe padding to ONLY the page content area */
.page-content {
    padding-left: 32px;
    padding-right: 32px;
}

/* Tablet refinement */
@media (max-width: 900px) {
    .page-content {
        padding-left: 24px;
        padding-right: 24px;
    }
}

/* Mobile refinement */
@media (max-width: 600px) {
    .page-content {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* ============================================================
   3) DESIGN TOKENS
   ============================================================ */

:root {
    --bg: #f7f9fc;
    --bg-light: #ffffff;

    --ink: #1e293b;
    --ink-light: #475569;
    --ink-muted: #64748b;

    --accent: #2f7ae5;
    --accent-hover: #3f8bff;

    --border: #d8e0ec;
    --border-light: #e5e9f2;

    --hover: #e6eefc;

    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;

    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --shadow-md: 0 2px 6px rgba(0,0,0,0.08);
    --shadow-lg: 0 4px 12px rgba(0,0,0,0.12);
}