@font-face {
  font-family: 'Satoshi';
  src: url('../assets/fonts/Satoshi-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Satoshi';
  src: url('../assets/fonts/Satoshi-Black.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ==========================================================================
     1. COLOR PALETTE (From image_72ddc6.png)
     ========================================================================== */
  --clr-white:    #F5F6F7;
  --clr-gray-100: #DEE2E6;
  --clr-gray-200: #ADB5BD;
  --clr-gray-300: #495057;
  --clr-black:    #000E10;

  /* ==========================================================================
     2. TYPOGRAPHY (Figma px to rem conversion)
     ========================================================================== */
  --ff-primary: 'Satoshi', sans-serif;

   --fs-sm: 0.875rem;
   --lh-sm: 1rem;

   --fs-md: 1rem;
   --lh-md: 1.2rem;

   --fs-lg: 2rem;
   --lh-lg: 2rem;

   --fs-xl: 3rem;
   --lh-xl: 3rem;

  /* ==========================================================================
     3. BORDERS & SHAPE
     ========================================================================== */
     
  --radius-subtle: 1.875rem;
  --radius-full:   9999px;

  /* ==========================================================================
     4. SPACING SYSTEM (Linear 1rem base scale)
     ========================================================================== */
  --space-1: 1rem;
  --space-2: 2rem;
  --space-3: 3rem;
  --space-4: 4rem;
  --space-5: 5rem;
}

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--ff-primary);
}

body {
   overflow-x: hidden;
   font-size: var(--fs-sm);
   color: var(--clr-black);
   background-color: var(--clr-white);
   font-weight: 800;
}

main {
   overflow-x: hidden;
}

ul {
   list-style-type: none;
}

a {
   text-decoration: none;
   color: var(--clr-black);
}

h2, h3 {
   font-size: var(--fs-xl);
   line-height: var(--lh-xl);
   font-weight: 800;
}

p {
   font-size: var(--fs-lg);
   line-height: var(--fs-lg);
   font-weight: 700;
}

span {
   display: block;
}

.rounded-btn {
   border-radius: var(--radius-full);
   padding: var(--space-1) var(--space-2);
   border: none;
   font-size: var(--fs-sm);
   display: inline-block;
}

.sub-title {
   font-size: var(--fs-lg);
   line-height: var(--lh-lg);
   color: var(--clr-gray-200);
}

.section-padding {
    padding: var(--space-3) var(--space-1);
}

/* ==========================================================================
     HEADER
========================================================================== */

.header-meta {
    font-size: var(--fs-md);
    line-height: var(--lh-md);
    color: var(--clr-gray-100);

    display: block;
    text-align: center;
}

.header-nav {
    padding-top: var(--space-1);
}

.header-nav ul {
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.header-nav ul li:first-child a {
    color: var(--clr-white);
    background-color: var(--clr-gray-300);
}

.header-nav ul li:last-child a {
    color: var(--clr-black);
    background-color: var(--clr-gray-200);
}

/* ==========================================================================
    FOOTER
========================================================================== */

footer {
    display: block;
    justify-content: center;
}

.footer-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);

    width: 70%;
    max-width: 1200px;
    margin: 0 auto;

    background-color: var(--clr-gray-100);
    border-radius: 0 0 var(--radius-subtle) var(--radius-subtle);
    padding: var(--space-1) var(--space-2);
}

.footer-credits p {
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
    color: var(--clr-gray-200);
    font-weight: 800;
    text-align: center;
}

.footer-nav-list {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
}

.footer-nav-list li a {
    display: block;
    padding: var(--space-1);
    border-radius: var(--radius-full);
}

.footer-nav-list li a img {
    width: 2rem;
    height: auto;
}

@media only screen and (min-width: 48rem) {
   :root {
        --fs-sm: 1rem;
        --lh-sm: 1rem;

        --fs-md: 2.25rem;
        --lh-md: 2.5rem;

        --fs-lg: 3rem;
        --lh-lg: 3.25rem;

        --fs-xl: 6.5rem;
        --lh-xl: 6.5rem;
   }

      .section-padding {
      padding: var(--space-4);
   }

   /* ==========================================================================
        HEADER
    ========================================================================== */

    header {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    header.section-padding {
        padding-top: var(--space-3);
    }

    .header-nav {
        padding-top: 0;
    }

    .header-nav ul {
        gap: var(--space-2);
    }
}

@media only screen and (min-width: 64rem) {
   :root {
      --fs-sm: 1rem;
      --lh-sm: 1rem;

      --fs-md: 2.5rem;
      --lh-md: 2.75rem;

      --fs-lg: 3.75rem;
      --lh-lg: 4rem;

      --fs-xl: 7rem;
      --lh-xl: 7rem;
   }

   .section-padding {
      padding-inline: 12rem;
   }

   /* ==========================================================================
        Footer
    ========================================================================== */

   .footer-grid {
      flex-direction: row;
      justify-content: space-between;
   }

   .footer-credits p {
      text-align: left;
   }
}