:root {
    --color-primary: #173c35;
    --color-primary-hover: #204c43;
    --color-page: #eef4f2;
    --color-surface: #ffffff;
    --color-text: #15231f;
    --color-text-muted: #6d7b76;
    --color-border: rgb(23 60 53 / 0.12);

    font-family:
        "IBM Plex Sans Arabic",
        "Noto Sans Arabic",
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    min-width: 320px;
    background: var(--color-page);
}

body {
    min-width: 320px;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    background:
        radial-gradient(
            circle at top,
            rgb(255 255 255 / 0.95),
            transparent 38rem
        ),
        var(--color-page);
    color: var(--color-text);
    font-family: inherit;
}

.home-page {
    display: grid;
    min-height: 100vh;
    min-height: 100dvh;
    place-items: center;
    padding:
        max(1rem, env(safe-area-inset-top))
        1rem
        max(1rem, env(safe-area-inset-bottom));
}

.home-card {
    width: min(100%, 34rem);
    border: 1px solid var(--color-border);
    border-radius: 2rem;
    padding: 2.618rem 1.618rem;
    background: var(--color-surface);
    box-shadow: 0 1.5rem 4.5rem rgb(18 44 39 / 0.12);
    text-align: center;
}

.home-card__eyebrow {
    margin: 0 0 0.618rem;
    color: var(--color-primary);
    font-weight: 700;
}

.home-card h1 {
    margin: 0;
    font-size: clamp(2rem, 8vw, 3rem);
    line-height: 1.3;
}

.home-card__description {
    margin: 1rem 0 0;
    color: var(--color-text-muted);
    line-height: 1.9;
}

.home-card__actions {
    display: grid;
    margin-top: 1.618rem;
}

.home-card__primary-action {
    display: flex;
    min-height: 3.6rem;
    align-items: center;
    justify-content: center;
    border-radius: 1rem;
    padding: 0.8rem 1.2rem;
    background: var(--color-primary);
    color: #ffffff;
    text-decoration: none;
    font-weight: 700;
}

.home-card__primary-action:hover {
    background: var(--color-primary-hover);
}