/* =====================================================
   GLOBAL RESET
===================================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* =====================================================
   COLOR VARIABLES
===================================================== */
:root {
    --background: #020b18;
    --background-light: #071426;
    --card: #101d30;
    --card-hover: #14243a;
    --border: rgba(255, 255, 255, 0.10);
    --text: #ffffff;
    --text-light: #c3ccd8;
    --text-muted: #8e9aaa;
    --blue: #1677ff;
    --blue-light: #318bff;
}

/* =====================================================
   HTML
===================================================== */
html {
    scroll-behavior: smooth;
}

/* =====================================================
   BODY
===================================================== */
body {
    font-family: Arial, Helvetica, sans-serif;
    background: var(--background);
    color: var(--text);
    min-height: 100vh;
    overflow-x: hidden;
}

/* =====================================================
   LINKS
===================================================== */
a {
    text-decoration: none;
    color: inherit;
}

/* =====================================================
   IMAGES
===================================================== */
img {
    max-width: 100%;
    display: block;
}

/* =====================================================
   SECTIONS
===================================================== */
section {
    position: relative;
}

/* =====================================================
   COMMON CONTAINER
===================================================== */
.header-container,
.hero-container,
.section-container {
    width: 90%;
    max-width: 1180px;
    margin: 0 auto;
}