:root {
    /* ─── Colors ─────────────────────────────────── */

    /* Primary */
    --color-red:    hsl(0, 78%, 62%);
    --color-cyan:   hsl(180, 62%, 55%);
    --color-orange: hsl(34, 97%, 64%);
    --color-blue:   hsl(212, 86%, 64%);

    /* Neutral */
    --color-grey-500: hsl(234, 12%, 34%);
    --color-grey-400: hsl(212, 6%, 44%);
    --color-white:    hsl(0, 0%, 100%);

    /* ─── Typography ─────────────────────────────── */
    --font-body: 'Poppins', sans-serif;

    /* Font weights */
    --font-weight-light:    200;
    --font-weight-regular:  400;
    --font-weight-semibold: 600;

    /* ─── Spacing ─────────────────────────────────── */
    --space-100: 0.5rem;   /*  8px */
    --space-150: 0.75rem;  /*  12px */
    --space-200: 1rem;     /* 16px */
    --space-300: 1.5rem;   /* 24px */
    --space-400: 2rem;     /* 32px */
    --space-500: 2.5rem;   /* 40px */

    /* ─── Border radius ──────────────────────────── */
    --radius-sm:   8px;
    --radius-md:   12px;
    --radius-lg:   24px;
    --radius-full: 50%;
}

/* ─── Text Presets ───────────────────────────────── */

/* text-preset-1 — Poppins Semibold, 36px, 140% line-height, 0.25px ls */
.text-preset-1 {
    font-family: var(--font-body);
    font-size: 1.5rem;
    font-weight: var(--font-weight-semibold);
    line-height: 1.4;
    letter-spacing: 0.25px;
}

/* text-preset-2 — Poppins Extra Light, 36px, 140% line-height, 0.25px ls */
.text-preset-2 {
    font-family: var(--font-body);
    font-size: 1.5rem;
    font-weight: var(--font-weight-light);
    line-height: 1.4;
    letter-spacing: 0.25px;
}

/* text-preset-3 — Poppins Semibold, 20px, 135% line-height, 0px ls */
.text-preset-3 {
    font-family: var(--font-body);
    font-size: 1.25rem;
    font-weight: var(--font-weight-semibold);
    line-height: 1.35;
    letter-spacing: 0;
}

/* text-preset-4 — Poppins Regular, 15px, 140% line-height, 0px ls */
.text-preset-4 {
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: var(--font-weight-regular);
    line-height: 1.4;
    letter-spacing: 0;
}

/* text-preset-5 — Poppins Regular, 13px, 160% line-height, 0px ls */
.text-preset-5 {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: var(--font-weight-regular);
    line-height: 1.6;
    letter-spacing: 0;
}

html {
    font-size: 100%;
    box-sizing: border-box;
}

*, *::before, *::after {
    box-sizing: inherit;
    margin: 0;
    padding: 0;
}

body {
    background-color: #FAFAFA;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin: 0 30px;
}

.hero {
    margin-top: 56px;
    text-align: center;
    color: var(--color-grey-500);
}

.hero__title {
}

.hero__subtitle {
}

.hero__description {
    margin-block-start: var(--space-200);
}

.features {
    margin-block-start: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-400);
}

.features__column--center {
    display: flex;
    flex-direction: column;
    gap: var(--space-400);
}

.feature-card {
    border-radius: var(--radius-sm);
    background-color: var(--color-white);
    box-shadow: 0px 15px 30px -11px rgba(131, 166, 210, 0.5);
    padding: var(--space-400);
    max-width: 314px;
}

.feature-card--cyan {
    border-top: 4px solid var(--color-cyan);
}

.feature-card--red {
    border-top: 4px solid var(--color-red);
}

.feature-card--orange {
    border-top: 4px solid var(--color-orange);
}

.feature-card--blue {
    border-top: 4px solid var(--color-blue);
}

.feature-card__title {
    color: var(--color-grey-500);
}

.feature-card__description {
    color: var(--color-grey-400);
    margin-block-start: 6px;
}

.feature-card__icon {
    margin-block-start: var(--space-400);
    margin-block-end: var(--space-150);
    display: block;
    margin-inline-start: auto;
}

.attribution {
    text-align: center;
    margin: var(--space-400) 0;
    color: var(--color-grey-400);
}

.attribution a {
    color: var(--color-grey-500);
}

.attribution a:focus-visible {
    outline: 2px solid var(--color-grey-500);
}



@media (min-width: 768px) {
    .text-preset-1, .text-preset-2 {
        font-size: 2.25rem;
    }

    .hero {
        margin-top: 80px;
    }

    .hero__description {
        max-width: 540px;
        margin-inline: auto;
    }

    .features {
        margin-block-start: 74px;
    }

    .features__column--center {
        flex-direction: row;
    }
}

@media (min-width: 1440px) {
    .hero {
        margin-top: 102px;
    }

    .features {
        flex-direction: row;
        justify-content: center;
    }

    .feature-card {
        max-width: 350px;
    }

    .features__column--center {
        flex-direction: column;
    }
}