:root {
    --theme: #ff7750;
    --theme-dark: #4e37b2;
}

body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont;
}

/* HEADER */
.navbar-brand span {
    background: var(--theme-dark);
    color: #fff;
    border-radius: 10px;
    padding: 6px 10px;
    margin-right: 8px;
}

/* HERO */
.hero {
    min-height: 90vh;
    background: linear-gradient(135deg, var(--theme) 0%, #ff9770 50%, #ffb790 100%);
    color: #fff;
    position: relative;
    overflow: hidden;
}

.hero::after {
    content: "";
    position: absolute;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(255, 255, 255, .25), transparent 70%);
    top: -200px;
    right: -200px;
    border-radius: 50%;
}

.hero h1 span {
    color: var(--theme-dark);
    background: #fff;
    padding: 0 10px;
    border-radius: 8px;
}

.btn-theme {
    background: linear-gradient(135deg, var(--theme-dark), #6a55d4);
    border: none;
    color: #fff;
}

.btn-theme-outline {
    border: 2px solid #fff;
    color: #fff;
    background: transparent;
}

.btn-theme-outline:hover {
    background: #fff;
    color: var(--theme-dark);
}

.btn-theme,
.btn-theme-outline {
    transition: all .25s ease;
}

.btn-theme:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(78, 55, 178, .35);
}

/* FOOTER */
footer {
    background: #111;
    color: #aaa;
}