:root {
    --bg-body: #ebe9ef;
    --radius-wrap: 0.125rem;
    --wrapper: #ffffff;
    --text: #2a2a2e;
    --text-active: #1c3a50;
    --muted: #5b5b67;
    --line: rgba(44, 44, 55, .12);

    --shadow-wrap: 0 18px 55px rgba(19, 16, 28, .16);
    --shadow-wrap: 0 6px 12px rgba(19, 16, 28, .1);
    --shadow-card: 0 16px 44px rgba(24, 18, 40, .12);
    --shadow-btn: 0 10px 20px rgba(24, 18, 40, .14);

    --radius-lg: 0.125rem;
    --radius-md: 0.25rem;
    --radius-sm: 0.125rem;
}

html, body {
    background-image: url('/assets/img/bg.jpg');
    background-size: contain;
    background-attachment: fixed;

    background: var(--bg-body);
    color: var(--text);
    font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    letter-spacing: 0.1px;
}


.site-wrap {
    background: var(--wrapper);
    box-shadow: var(--shadow-wrap);
    border-radius: var(--radius-lg);
    /*
     border: 1px solid rgba(31, 42, 51, .05);
     */
}

.hero {
    background-image: linear-gradient(100deg, rgba(31, 42, 51, .172), rgba(20, 184, 166, .118)), url("/assets/img/gradient01.png");
    background-image: url("/assets/img/pattern02.png");
}

.topbar-wrap {
    /*
    background: linear-gradient(#f4f1f6, #f5f2f5);
     */
    box-shadow: var(--shadow-wrap);
}

.topbar-wrap::before {
    display: none;
    background-image: url("/assets/img/pattern01.png");
}

.topbar-wrap::after {
    display: none;
}

.wrap-clip {
    padding-top: 0;
}

.wrap-clip::before {
    display: none;
}

.wrap-clip,
.topbar-wrap::before,
.topbar-wrap::after {
    border-top-left-radius: var(--radius-wrap);
    border-top-right-radius: var(--radius-wrap);
}

.nav-links a {
    font-weight: 400;
}

.nav-links a:not(.button) {
    color: var(--text);
}

.nav-links a.active:not(.button),
.nav-links a:hover:not(.button) {
    color: var(--text-active);
}

.hero h1 {
    color: var(--text);
    text-shadow: none;
}

.hero p {
    color: var(--text);
}

.hero .hero-inner {
    padding: 0 1.5rem 1rem;
    align-self: center;
}
