/* ================================
   STEPsART LANDING PAGE
   ================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');


/* ================================
   VARIABLES
   ================================ */

:root {
    --bg: #f5fafa;
    --white: #ffffff;
    --dark: #302b3d;
    --purple: #8b7ab8;
    --purple-dark: #72608b;
    --light-purple: #eeeaf7;
    --text-light: #746f7d;
}


/* ================================
   RESET
   ================================ */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'DM Sans', sans-serif;
    background: var(--bg);
    color: var(--dark);
    overflow-x: hidden;
}

a {
    text-decoration: none;
    color: inherit;
}


/* ================================
   NAVBAR
   ================================ */

.navbar {
    width: 100%;
    height: 82px;

    padding: 0 8%;

    display: flex;
    align-items: center;
    justify-content: space-between;

    background: rgba(245, 250, 250, 0.92);

    position: sticky;
    top: 0;
    z-index: 100;

    backdrop-filter: blur(12px);

    border-bottom: 1px solid rgba(48, 43, 61, 0.05);
}

.logo {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -1px;
}

.logo span {
    color: var(--purple);
}

.navbar nav {
    display: flex;
    gap: 38px;
}

.navbar nav a {
    font-size: 14px;
    font-weight: 600;
    color: var(--dark);

    position: relative;

    transition: 0.3s ease;
}

.navbar nav a::after {
    content: "";

    position: absolute;
    left: 0;
    bottom: -7px;

    width: 0;
    height: 2px;

    background: var(--purple);

    transition: 0.3s ease;
}

.navbar nav a:hover {
    color: var(--purple);
}

.navbar nav a:hover::after {
    width: 100%;
}


/* ================================
   HERO
   ================================ */

.hero {
    min-height: calc(100vh - 82px);

    padding: 70px 9%;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 60px;

    overflow: hidden;
}

.hero-content {
    max-width: 650px;

    animation: fadeUp 0.9s ease forwards;
}

.small-title,
.section-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 3px;
    color: var(--purple);
    margin-bottom: 20px;
}

.hero h1 {
    font-family: 'Space Grotesk', sans-serif;

    font-size: clamp(54px, 7vw, 88px);

    line-height: 0.98;

    letter-spacing: -4px;

    margin-bottom: 28px;
}

.hero h1 span {
    color: var(--purple);
}

.hero-description {
    font-size: 18px;
    line-height: 1.7;
    color: var(--text-light);

    margin-bottom: 35px;
}


/* BUTTON */

.start-button {
    display: inline-flex;
    align-items: center;
    gap: 18px;

    padding: 15px 23px;

    background: var(--dark);
    color: white;

    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;

    border-radius: 3px;

    transition:
        transform 0.3s ease,
        background 0.3s ease,
        box-shadow 0.3s ease;
}

.start-button span {
    font-size: 19px;

    transition: transform 0.3s ease;
}

.start-button:hover {
    background: var(--purple);

    transform: translateY(-4px);

    box-shadow: 0 12px 25px rgba(139, 122, 184, 0.25);
}

.start-button:hover span {
    transform: translateX(5px);
}


/* ================================
   HERO VISUAL
   ================================ */

.hero-visual {
    width: 430px;
    height: 430px;

    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    animation: fadeIn 1.2s ease forwards;
}

.circle {
    position: absolute;

    border-radius: 50%;
}

.circle-one {
    width: 370px;
    height: 370px;

    background: var(--light-purple);

    animation: float 5s ease-in-out infinite;
}

.circle-two {
    width: 275px;
    height: 275px;

    border: 2px solid rgba(139, 122, 184, 0.25);

    animation: pulse 4s ease-in-out infinite;
}

.step-visual {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;

    gap: 22px;

    transform: rotate(-8deg);
}

.shoe {
    font-size: 90px;

    animation: shoeFloat 3s ease-in-out infinite;
}

.step-text {
    font-family: 'Space Grotesk', sans-serif;

    font-size: 28px;
    line-height: 0.95;

    font-weight: 700;

    letter-spacing: -1px;

    color: var(--dark);
}


/* ================================
   ABOUT
   ================================ */

.about {
    padding: 120px 9%;

    background: white;

    text-align: center;
}

.about h2,
.why h2,
.contact h2,
.final-cta h2 {
    font-family: 'Space Grotesk', sans-serif;

    font-size: clamp(42px, 5vw, 65px);

    line-height: 1;

    letter-spacing: -3px;
}

.about h2 span,
.why h2 span {
    color: var(--purple);
}

.about-description {
    max-width: 620px;

    margin: 28px auto 55px;

    color: var(--text-light);

    line-height: 1.8;

    font-size: 16px;
}


/* FEATURES */

.features {
    max-width: 1050px;

    margin: 0 auto;

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 18px;
}

.feature-card {
    padding: 32px 20px;

    background: var(--bg);

    border: 1px solid rgba(48, 43, 61, 0.06);

    border-radius: 12px;

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        background 0.35s ease;
}

.feature-card:hover {
    transform: translateY(-9px);

    background: white;

    box-shadow: 0 18px 40px rgba(48, 43, 61, 0.09);
}

.feature-icon {
    font-size: 32px;

    margin-bottom: 18px;

    display: inline-block;

    transition: transform 0.35s ease;
}

.feature-card:hover .feature-icon {
    transform: scale(1.15) rotate(-5deg);
}

.feature-card h3 {
    font-family: 'Space Grotesk', sans-serif;

    font-size: 20px;

    margin-bottom: 9px;
}

.feature-card p {
    color: var(--text-light);

    font-size: 14px;
}

.feature-card strong {
    color: var(--purple);
}


/* ================================
   WHY
   ================================ */

.why {
    padding: 120px 9%;

    background: var(--dark);

    color: white;

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 90px;

    align-items: center;
}

.why .section-label {
    color: #b8a9db;
}

.why h2 {
    margin-bottom: 30px;
}

.why h2 span {
    color: #b9a8dc;
}

.why-content > p:not(.section-label) {
    max-width: 510px;

    color: #c9c5cf;

    line-height: 1.8;

    font-size: 16px;
}


/* 7000 */

.steps-highlight {
    margin: 38px 0;

    display: flex;
    align-items: baseline;

    gap: 15px;
}

.steps-highlight strong {
    font-family: 'Space Grotesk', sans-serif;

    font-size: 85px;

    line-height: 1;

    letter-spacing: -5px;

    color: white;
}

.steps-highlight span {
    font-size: 13px;

    font-weight: 700;

    letter-spacing: 2px;

    color: #b8a9db;
}

.research-text {
    margin-bottom: 20px;
}

.read-study {
    display: inline-block;

    margin-top: 15px;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 1.5px;

    color: #c5b6e4;

    border-bottom: 1px solid #c5b6e4;

    padding-bottom: 5px;

    transition: 0.3s ease;
}

.read-study:hover {
    color: white;

    border-color: white;

    transform: translateX(5px);
}


/* NUMBERS */

.numbers-title {
    font-size: 12px;

    font-weight: 700;

    letter-spacing: 3px;

    color: #b8a9db;

    margin-bottom: 25px;
}

.number-grid {
    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 15px;
}

.number-item {
    padding: 25px 20px;

    border: 1px solid rgba(255, 255, 255, 0.1);

    border-radius: 8px;

    transition:
        background 0.3s ease,
        transform 0.3s ease;
}

.number-item:hover {
    background: rgba(255, 255, 255, 0.05);

    transform: translateY(-5px);
}

.number-item strong {
    display: block;

    font-family: 'Space Grotesk', sans-serif;

    font-size: 35px;

    color: #c5b6e4;

    margin-bottom: 5px;
}

.number-item span {
    display: block;

    color: #c6c2ca;

    font-size: 12px;

    line-height: 1.4;
}


/* ================================
   CONTACT
   ================================ */

.contact {
    padding: 120px 9%;

    text-align: center;

    background: white;
}

.contact h2 {
    margin-bottom: 25px;
}

.contact > p:not(.section-label) {
    color: var(--text-light);

    margin-bottom: 25px;
}

.email-link {
    display: inline-block;

    font-family: 'Space Grotesk', sans-serif;

    font-size: 20px;

    font-weight: 600;

    color: var(--purple);

    border-bottom: 1px solid transparent;

    transition: 0.3s ease;
}

.email-link:hover {
    border-color: var(--purple);

    transform: translateY(-2px);
}


/* ================================
   FINAL CTA
   ================================ */

.final-cta {
    padding: 120px 20px;

    text-align: center;

    background: var(--light-purple);
}

.final-cta h2 {
    margin-bottom: 25px;
}

.final-cta p {
    color: var(--text-light);

    margin-bottom: 30px;
}


/* ================================
   FOOTER
   ================================ */

footer {
    padding: 45px 9%;

    background: var(--dark);

    color: white;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;
}

footer .logo {
    font-size: 21px;
}

footer p {
    color: #aaa5b0;

    font-size: 13px;
}

footer small {
    color: #85818b;

    font-size: 11px;
}


/* ================================
   ANIMATIONS
   ================================ */

@keyframes fadeUp {

    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}

@keyframes fadeIn {

    from {