:root {
      --blue: #2d73b9;
      --dark: #111418;
      --grey: #8b929a;
      --light-grey: #e8eaed;
      --white: #ffffff;
    }

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

    html {
      scroll-behavior: smooth;
    }

    body {
      font-family: "Inter", sans-serif;
      background: var(--white);
      color: var(--dark);
      line-height: 1.6;
    }

    /* HEADER */

    header {
      position: sticky;
      top: 0;
      z-index: 1000;

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

      padding: 18px 6%;

      background: rgba(255, 255, 255, 0.95);
      border-bottom: 1px solid var(--light-grey);
    }

    .logo {
      text-decoration: none;
    }

    .logo-main {
      font-family: "Play", sans-serif;
      font-size: 30px;
      font-weight: 700;
      color: var(--blue);
      line-height: 1;
    }

    nav {
      display: flex;
      gap: 30px;
    }

    nav a {
      color: var(--dark);
      text-decoration: none;
      font-size: 15px;
      font-weight: 600;
    }

    nav a:hover {
      color: var(--blue);
    }

    /* HERO */

    .hero {
      min-height: calc(100vh - 80px);

      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      text-align: center;
      padding: 80px 20px;
    }

    .hero h1 {
      font-family: "Play", sans-serif;
      font-size: clamp(55px, 9vw, 110px);
      color: var(--blue);
      line-height: 0.95;
    }

    .hero .development {
      margin-top: 10px;

      font-family: "Inter", sans-serif;
      font-size: clamp(22px, 3vw, 36px);
      font-weight: 700;

      color: var(--grey);

      letter-spacing: 6px;
      text-transform: uppercase;
    }

    /* Hero description ONLY */

    #home > p {
      max-width: 650px;
      margin-top: 35px;

      font-size: 18px;
      color: #555d66;
    }

    /* Blue button ONLY */

    #home > a.hero-button {
      display: inline-block;

      margin-top: 35px;
      padding: 13px 28px;

      background: var(--blue);
      color: #ffffff;

      border-radius: 6px;

      text-decoration: none;
      font-weight: 700;
    }

    #home > a.hero-button:hover {
      opacity: 0.88;
    }

    /* GENERAL SECTIONS */

    section {
      padding: 100px 8%;
      scroll-margin-top: 80px;
    }

    section h2 {
      font-family: "Play", sans-serif;
      font-size: 45px;
      margin-bottom: 15px;
    }

    .section-intro {
      max-width: 650px;
      color: #60666d;
      margin-bottom: 45px;
    }

    /* APPS */

    #apps {
      background: #f6f7f8;
    }

    .cards {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: 22px;
    }

    .card {
      background: var(--white);
      padding: 28px;

      border: 1px solid var(--light-grey);
      border-radius: 8px;
    }

    .card h3 {
      font-family: "Play", sans-serif;
      font-size: 24px;
      color: var(--blue);
      margin-bottom: 8px;
    }

    .card p {
      color: #61676e;
    }

    /* ABOUT */

    #about {
      max-width: 1100px;
      margin: auto;
    }

    /* CONTACT */

    #contact {
      background: var(--dark);
      color: var(--white);
      text-align: center;
    }

    #contact h2 {
      color: var(--white);
    }

    #contact p {
      color: #adb3ba;
    }

    /* FOOTER */

    footer {
      padding: 25px;
      text-align: center;

      background: #090b0d;
      color: #777f87;

      font-size: 13px;
    }

    /* MOBILE */

    @media (max-width: 700px) {
      header {
        flex-direction: column;
        gap: 16px;
      }

      nav {
        gap: 16px;
        flex-wrap: wrap;
        justify-content: center;
      }

      .hero {
        min-height: 85vh;
      }

      .hero .development {
        letter-spacing: 3px;
      }

      section {
        padding: 75px 7%;
      }
    }