:root {
      --jumbo-yellow: #FFD200;
        --jumbo-blue: #003A8F;
          --bg: #F3F5F7;
            --card: #ffffff;
              --text: #1f2937;
                --muted: #6b7280;
                }

                * {
                  box-sizing: border-box;
                  }

                  body {
                    margin: 0;
                      font-family: "Segoe UI", Arial, sans-serif;
                        background: var(--bg);
                          color: var(--text);
                          }

                          /* HEADER */
                          header {
                            background: var(--jumbo-yellow);
                              padding: 18px 40px;
                                display: flex;
                                  justify-content: space-between;
                                    align-items: center;
                                    }

                                    header h1 {
                                      margin: 0;
                                        color: var(--jumbo-blue);
                                        }

                                        nav a {
                                          margin-left: 25px;
                                            text-decoration: none;
                                              font-weight: 600;
                                                color: var(--jumbo-blue);
                                                }

                                                /* PAGE */
                                                .page {
                                                  max-width: 1200px;
                                                    margin: auto;
                                                      padding: 50px 30px;
                                                      }

                                                      /* HERO */
                                                      .hero {
                                                        background: linear-gradient(135deg, var(--jumbo-blue), #002a66);
                                                          color: white;
                                                            padding: 90px 30px;
                                                              text-align: center;
                                                              }

                                                              .hero h2 {
                                                                font-size: 42px;
                                                                  margin-bottom: 15px;
                                                                  }

                                                                  .hero p {
                                                                    max-width: 720px;
                                                                      margin: auto;
                                                                        font-size: 18px;
                                                                          opacity: 0.9;
                                                                          }

                                                                          /* BUTTON */
                                                                          .btn {
                                                                            background: var(--jumbo-blue);
                                                                              color: white;
                                                                                padding: 12px 22px;
                                                                                  border-radius: 8px;
                                                                                    text-decoration: none;
                                                                                      font-weight: 600;
                                                                                        border: none;
                                                                                          cursor: pointer;
                                                                                          }

                                                                                          .btn.yellow {
                                                                                            background: var(--jumbo-yellow);
                                                                                              color: var(--jumbo-blue);
                                                                                              }

                                                                                              /* CARDS */
                                                                                              .cards {
                                                                                                display: grid;
                                                                                                  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
                                                                                                    gap: 28px;
                                                                                                    }

                                                                                                    .card {
                                                                                                      background: var(--card);
                                                                                                        padding: 26px;
                                                                                                          border-radius: 16px;
                                                                                                            box-shadow: 0 10px 30px rgba(0,0,0,0.08);
                                                                                                            }

                                                                                                            .card h3 {
                                                                                                              margin-top: 0;
                                                                                                                color: var(--jumbo-blue);
                                                                                                                }

                                                                                                                .card p {
                                                                                                                  color: var(--muted);
                                                                                                                  }

                                                                                                                  /* PROFILE */
                                                                                                                  .profile {
                                                                                                                    display: flex;
                                                                                                                      align-items: center;
                                                                                                                        gap: 25px;
                                                                                                                        }

                                                                                                                        .profile img {
                                                                                                                          width: 90px;
                                                                                                                            height: 90px;
                                                                                                                              border-radius: 50%;
                                                                                                                              }

                                                                                                                              /* FOOTER */
                                                                                                                              footer {
                                                                                                                                text-align: center;
                                                                                                                                  padding: 30px;
                                                                                                                                    color: var(--muted);
                                                                                                                                    }
}