/* =====================================================
   SUJOY.IN 2.0 — HOMEPAGE ONLY
===================================================== */


/* =====================================================
   MAIN
===================================================== */

main {
    position: relative;
}


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

.hero {
    min-height: 92vh;

    width:
        min(
            calc(100% - 40px),
            var(--max-width)
        );

    margin: auto;

    padding-top:
        calc(
            var(--header-height) + 90px
        );

    padding-bottom: 90px;

    display: flex;
    align-items: center;
}


.hero-content {
    max-width: 900px;
}


.hero-kicker {
    display: inline-flex;
    align-items: center;

    gap: 9px;

    margin-bottom: 26px;

    color: var(--accent);

    font-size: 0.82rem;
    font-weight: 650;

    letter-spacing: 0.09em;
    text-transform: uppercase;
}


.hero-kicker::before {
    content: "";

    width: 26px;
    height: 1px;

    background: var(--accent);
}


.hero h1 {
    max-width: 880px;

    font-size:
        clamp(
            3.3rem,
            8vw,
            7.5rem
        );

    line-height: 0.98;

    letter-spacing: -0.065em;

    font-weight: 760;
}


.hero h1 .soft {
    color: #9aa4b6;
}


.hero-description {
    max-width: 690px;

    margin-top: 34px;

    color: var(--muted);

    font-size:
        clamp(
            1.05rem,
            2vw,
            1.25rem
        );

    line-height: 1.75;
}


.hero-actions {
    margin-top: 39px;

    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 13px;
}


.primary-button,
.secondary-button {
    min-height: 48px;

    padding: 0 21px;

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

    border-radius: 100px;

    font-size: 0.91rem;
    font-weight: 600;

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


.primary-button {
    color: white;

    background: var(--text);

    box-shadow:
        0 12px 30px
        rgba(23, 32, 51, 0.13);
}


.primary-button:hover {
    transform:
        translateY(-2px);

    box-shadow:
        0 16px 35px
        rgba(23, 32, 51, 0.17);
}


.secondary-button {
    border:
        1px solid var(--line);

    background:
        rgba(255, 255, 255, 0.52);
}


.secondary-button:hover {
    background: white;

    transform:
        translateY(-2px);
}


/* =====================================================
   DISCOVERY LINE
===================================================== */

.discovery-line {
    width:
        min(
            calc(100% - 40px),
            var(--max-width)
        );

    margin: auto;

    padding:
        15px 0 95px;

    border-top:
        1px solid var(--line);
}


.discovery-line p {
    max-width: 620px;

    color: var(--muted);

    font-size: 0.91rem;
}


/* =====================================================
   FORMULAS
===================================================== */

.formula-area {
    width:
        min(
            calc(100% - 40px),
            var(--max-width)
        );

    margin: auto;

    padding:
        35px 0 130px;
}


.formula-heading {
    max-width: 750px;

    margin-bottom: 65px;
}


.formula-heading h2 {
    font-size:
        clamp(
            2.3rem,
            5vw,
            4.4rem
        );

    line-height: 1.04;

    letter-spacing: -0.05em;

    font-weight: 700;
}


.formula-heading p {
    max-width: 580px;

    margin-top: 19px;

    color: var(--muted);

    font-size: 1rem;
}


.formula-list {
    border-top:
        1px solid var(--line);
}


.formula-item {
    position: relative;

    display: grid;

    grid-template-columns:
        minmax(240px, 0.8fr)
        1.4fr;

    gap: 60px;

    padding:
        45px 0;

    border-bottom:
        1px solid var(--line);

    transition:
        padding-left 0.3s ease,
        padding-right 0.3s ease;
}


.formula-item::before {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(83, 103, 232, 0.045),
            transparent 65%
        );

    opacity: 0;

    transition:
        opacity 0.3s ease;

    pointer-events: none;
}


.formula-item:hover {
    padding-left: 18px;
    padding-right: 18px;
}


.formula-item:hover::before {
    opacity: 1;
}


.formula {
    position: relative;

    z-index: 1;

    font-family:
        "Times New Roman",
        Times,
        serif;

    font-size:
        clamp(
            2.1rem,
            5vw,
            3.5rem
        );

    line-height: 1.1;

    letter-spacing: -0.04em;
}


.formula-details {
    position: relative;

    z-index: 1;

    display: flex;
    flex-direction: column;
    justify-content: center;
}


.formula-name {
    margin-bottom: 7px;

    font-size: 1rem;
    font-weight: 650;
}


.formula-description {
    max-width: 590px;

    color: var(--muted);

    font-size: 0.97rem;
}


/* =====================================================
   THOUGHT
===================================================== */

.thought {
    width:
        min(
            calc(100% - 40px),
            var(--max-width)
        );

    margin: auto;

    padding:
        30px 0 135px;
}


.thought-inner {
    max-width: 820px;
}


.thought-text {
    font-size:
        clamp(
            2rem,
            5vw,
            4.2rem
        );

    line-height: 1.14;

    letter-spacing: -0.045em;

    font-weight: 610;
}


.thought-text span {
    color: #9ca6b8;
}


/* =====================================================
   HOMEPAGE CONTACT SECTION
===================================================== */

.contact {
    width:
        min(
            calc(100% - 40px),
            var(--max-width)
        );

    margin: auto;

    padding:
        85px 0 120px;

    border-top:
        1px solid var(--line);
}


.contact-grid {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 60px;
}


.contact h2 {
    max-width: 500px;

    font-size:
        clamp(
            2.3rem,
            5vw,
            4.6rem
        );

    line-height: 1;

    letter-spacing: -0.05em;
}


.contact-content {
    max-width: 500px;
}


.contact-content p {
    color: var(--muted);

    margin-bottom: 25px;
}


.contact-link {
    display: inline-flex;
    align-items: center;

    gap: 9px;

    padding-bottom: 4px;

    border-bottom:
        1px solid var(--text);

    font-size: 0.95rem;
    font-weight: 600;
}


.contact-link span {
    transition:
        transform 0.2s ease;
}


.contact-link:hover span {
    transform:
        translateX(4px);
}


/* =====================================================
   SCROLL REVEAL
===================================================== */

.reveal {
    opacity: 0;

    transform:
        translateY(22px);

    transition:
        opacity 0.8s
        cubic-bezier(.2, .7, .2, 1),

        transform 0.8s
        cubic-bezier(.2, .7, .2, 1);
}


.reveal.visible {
    opacity: 1;

    transform:
        translateY(0);
}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 900px) {

    .hero {
        min-height: auto;

        padding-top: 170px;
        padding-bottom: 110px;
    }


    .formula-item {
        grid-template-columns: 1fr;

        gap: 20px;
    }


    .formula-item:hover {
        padding-left: 0;
        padding-right: 0;
    }


    .contact-grid {
        grid-template-columns: 1fr;

        gap: 35px;
    }

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 600px) {


    /* PAGE WIDTH */

    .hero,
    .formula-area,
    .thought,
    .contact,
    .discovery-line {

        width:
            min(
                calc(100% - 32px),
                var(--max-width)
            );
    }


    /* HERO */

    .hero {
        min-height: auto;

        padding-top: 145px;
        padding-bottom: 85px;
    }


    .hero h1 {
        font-size:
            clamp(
                3.1rem,
                16vw,
                5.1rem
            );
    }


    .hero-description {
        margin-top: 27px;

        font-size: 1rem;
    }


    .hero-actions {
        margin-top: 31px;
    }


    .primary-button,
    .secondary-button {
        width: 100%;
    }


    /* DISCOVERY */

    .discovery-line {
        padding-bottom: 75px;
    }


    /* FORMULAS */

    .formula-area {
        padding-bottom: 100px;
    }


    .formula-heading {
        margin-bottom: 45px;
    }


    .formula-item {
        grid-template-columns: 1fr;

        gap: 20px;

        padding:
            35px 0;
    }


    .formula-item:hover {
        padding-left: 0;
        padding-right: 0;
    }


    .formula {
        font-size: 2.5rem;
    }


    /* THOUGHT */

    .thought {
        padding-bottom: 100px;
    }


    /* CONTACT */

    .contact {
        padding-top: 70px;
        padding-bottom: 90px;
    }


    .contact-grid {
        grid-template-columns: 1fr;

        gap: 35px;
    }

}


/* =====================================================
   VERY SMALL PHONES
===================================================== */

@media (max-width: 380px) {

    .hero h1 {
        font-size: 2.9rem;
    }

}