:root {
    --paper: #edf2f3;
    --surface: #fbfdfb;
    --ink: #18283b;
    --muted: #64748b;
    --navy: #173b57;
    --copper: #2d7a78;
    --stone: #cbd8dc;
    --line: rgba(24, 40, 59, .17);
    --shadow: 0 22px 60px rgba(23, 59, 87, .13);
}

:root[data-theme=dark] {
    --paper: #10191f;
    --surface: #18272f;
    --ink: #eef5f6;
    --muted: #b8c8cf;
    --navy: #90c8d5;
    --copper: #62bbb7;
    --stone: #3c5561;
    --line: rgba(238, 245, 246, .15);
    --shadow: 0 22px 60px rgba(0, 0, 0, .32);
}

.hero {
    background:
        radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--copper) 17%, transparent), transparent 34%),
        linear-gradient(150deg, transparent 0 45%, color-mix(in srgb, var(--navy) 5%, transparent) 45% 55%, transparent 55%);
}

.architecture-five span:nth-of-type(1) { color: #2d7a78; }
.architecture-five span:nth-of-type(2) { color: #3f7890; }
.architecture-five span:nth-of-type(3) { color: #6b70a5; }
.architecture-five span:nth-of-type(4) { color: #a87358; }
.architecture-five span:nth-of-type(5) { color: #b78532; }

@media (max-width: 580px) {
    .hero,
    .hero .subtitle,
    .hero blockquote {
        min-width: 0;
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    .architecture {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: .8rem;
        padding: 1rem .35rem;
    }

    .architecture i {
        display: none;
    }

    .architecture-five span:last-of-type {
        grid-column: 1 / -1;
    }
}