html,
body {
    overscroll-behavior: none;
}
header {background-color: #2a2829;}
footer {background-color: green;}

.hero-gradient {
    background:
        linear-gradient(
            rgba(0,0,0,.55),
            rgba(0,0,0,.55)
        ),
        linear-gradient(
            120deg,
            #00b4d8,
            #5fdc4b,
            #ffd60a,
            #ff7a00,
            #ff2f92
        );

    color: #fff;
}

.hero-dark {
    background:
        radial-gradient(circle at 20% 30%, rgba(0,180,216,.35), transparent 45%),
        radial-gradient(circle at 80% 70%, rgba(255,47,146,.35), transparent 45%),
        radial-gradient(circle at 60% 20%, rgba(255,122,0,.35), transparent 45%),
        radial-gradient(circle at 40% 80%, rgba(93,220,75,.35), transparent 45%),
        #2b2b2b;

    color: #fff;
}

#top-bar {background-color: #444444;}

.nav-toggle {
    color: white;
    background: none;
    border: none;
    font-size: 1.6rem;
}

.nav-toggle:focus {
    outline: none;
    box-shadow: none;
}

.nav-toggle i {
    transition: .25s;
}

.nav-toggle:hover i {
    transform: scale(1.15);
}


/* ===== BRAND ACCENT COLORS ===== */

.icon-cyan   { color:#00b4d8; }
.icon-green  { color:#5fdc4b; }
.icon-orange { color:#ff7a00; }
.icon-pink   { color:#ff2f92; }
.icon-yellow { color:#ffd60a; }

/* subtle feature divider */
.feature-divider {
    width:250px;
    height:3px;
    background:linear-gradient(90deg,#00b4d8,#ff7a00,#ff2f92);
    border-radius:3px;
    margin-bottom:20px;
}

/* highlight panel upgrade */
.highlight-panel {
    border:2px solid transparent;
    background:
        linear-gradient(#fff,#fff) padding-box,
        linear-gradient(120deg,#00b4d8,#5fdc4b,#ffd60a,#ff7a00,#ff2f92) border-box;
}

/* icon style upgrade */
.feature-icon {
    width:60px;
    height:60px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:12px;
    background:rgba(0,0,0,.04);
    font-size:26px;
    margin-right:18px;
}