/* 
--- 01 TYPOGRAPHY SYSTEM
- Font sizes (px)
10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98

- Font wetghts
Default: 400
Medium: 500
Semi-bold: 600
Bold: 700

- Line heights
Default: 1
Small: 1.05
Paragraph defauld: 1.6

- Letter spacing
-1.05px
0.75px

--- 02 COLORS
- Primary: #276DCD
- Tints: #
    Lighter: #
- Shades: 
- Accents: #
Darker accent:
  #
  #
- Greys: #D9E1EC
#a9c5eb
#F4F5F8

--- 03 SHADOWS
0 2.4rem 4.8rem rgb(0, 0, 0, 0.075);

--- 04 BORDER RADIUS
Default: 15px
Medium: 

--- 05 WHITESPACE
- Spacing system (px)
2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128
*/

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

html {
    font-size: 62.5%;
    scroll-behavior: smooth;
    border-bottom: 7px solid #1357B6;
}

body {
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    line-height: 1;
    font-weight: 400;
    color: #262D63;
    background-color: #F4F5F8;
}

.container {
    width: 120rem;
    margin: 0 auto;
}

.section-hero,
.section-problem,
.section-quote,
.section-solution,
.section-objections,
.section-air-com,
.section-faq,
.section-comparison,
.section-ticker {
    padding: 6.4rem 0;
}

.section-problem,
.section-solution,
.section-faq {
    background-color: #276DCD;
}

.section-problem .subtitle,
.section-solution .subtitle,
.section-faq .subtitle {
    color: #F4F5F8;
}

/* ============================================================
   SKELETON LOADERS (Zapobieganie skakaniu strony - CLS)
   ============================================================ */
#nav-container:empty {
    min-height: 8rem; /* Wysokość nawigacji z pliku nav.css */
    width: 100%;
    background-color: #e0e0e0;
    animation: pulse 1.5s infinite ease-in-out;
}

@keyframes pulse {
    0% { opacity: 0.6; }
    50% { opacity: 0.8; }
    100% { opacity: 0.6; }
}

.subtitle {
    font-size: 2rem;
    font-weight: 700;
    color: #276DCD;
    letter-spacing: 1.5px;
    text-align: center;
}

.subtitle-subtext {
    margin-top: 1rem;
    font-size: 1.4rem;
    font-weight: 300;
    color: #F4F5F8;
}

.grid-2-col {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.grid-3-col {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.grid-4-col {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}