/* =====================================
   WHITE LABEL BASE
===================================== */

.wl-shell {
    width:
        min(
            calc(100% - 80px),
            1180px
        );

    margin: 0 auto;
}


.wl-section {
    padding:
        135px 0;

    border-top:
        1px solid
        rgba(255, 255, 255, 0.035);
}


.wl-centered-heading {
    max-width: 850px;

    margin: 0 auto;

    text-align: center;
}


.wl-centered-heading h2,
.wl-split-heading h2,
.wl-voice-grid h2,
.wl-api-card h2,
.wl-final-inner h2 {
    margin: 0;

    font-size:
        clamp(
            44px,
            5vw,
            72px
        );

    line-height: 1.03;

    letter-spacing: -0.045em;

    font-weight: 500;
}


.wl-centered-heading h2 span,
.wl-split-heading h2 span,
.wl-voice-grid h2 span,
.wl-api-card h2 span,
.wl-final-inner h2 span {
    display: block;

    color: #c7afe0;
}


.wl-centered-heading > p:last-child {
    max-width: 720px;

    margin:
        27px auto
        0;

    color: #948b99;

    font-size: 18px;

    line-height: 1.7;
}


.wl-split-heading {
    display: grid;

    grid-template-columns:
        1fr
        0.7fr;

    gap: 85px;

    align-items: end;
}


.wl-split-heading > div:last-child p {
    margin: 0;

    color: #958b99;

    font-size: 18px;

    line-height: 1.72;
}



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

.wl-hero {
    position: relative;

    overflow: hidden;

    padding:
        165px 0
        120px;

    background:
        radial-gradient(
            circle at 80% 28%,
            rgba(108, 57, 157, 0.18),
            transparent 32%
        ),
        #09070f;
}


.wl-hero-glow {
    position: absolute;

    right: -200px;
    top: -150px;

    width: 850px;
    height: 700px;

    background:
        radial-gradient(
            circle,
            rgba(130, 65, 183, 0.13),
            transparent 67%
        );

    pointer-events: none;
}


.wl-hero-grid {
    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        1fr
        0.85fr;

    gap: 85px;

    align-items: center;
}


.wl-hero h1 {
    margin: 0;

    max-width: 720px;

    font-size:
        clamp(
            58px,
            6vw,
            88px
        );

    line-height: 0.98;

    letter-spacing: -0.055em;

    font-weight: 500;
}


.wl-hero h1 span {
    display: block;

    color: #c9afe2;
}


.wl-hero-lead {
    max-width: 650px;

    margin:
        30px 0
        0;

    color: #9b919f;

    font-size: 19px;

    line-height: 1.72;
}


.wl-hero-note {
    margin:
        21px 0
        0;

    color: #c6bdca;

    font-size: 17px;

    line-height: 1.6;
}


.wl-hero-actions {
    display: flex;

    gap: 12px;

    flex-wrap: wrap;

    margin-top: 34px;
}



/* =====================================
   DOMAIN PREVIEW
===================================== */

.wl-domain-preview {
    padding:
        32px;

    border:
        1px solid
        rgba(150, 91, 198, 0.18);

    border-radius: 21px;

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


.wl-browser {
    margin-top: 16px;

    overflow: hidden;

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

    border-radius: 13px;

    background: #08050c;
}


.wl-browser-top {
    display: flex;

    align-items: center;

    gap: 12px;

    padding:
        12px;

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.05);

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


.wl-browser-dots {
    display: flex;

    gap: 5px;
}


.wl-browser-dots span {
    width: 7px;
    height: 7px;

    border-radius: 50%;

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


.wl-browser-address {
    flex: 1;

    padding:
        7px 10px;

    border-radius: 7px;

    background:
        rgba(255, 255, 255, 0.025);

    color: #776e7b;

    font-size: 10px;

    text-align: center;
}


.wl-browser-body {
    display: flex;

    flex-direction: column;

    align-items: center;

    min-height: 450px;

    padding:
        45px 30px;

    text-align: center;
}


.wl-demo-brand {
    color: #cfbfda;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 2px;
}


.wl-demo-orb {
    margin-top: 35px;
}


.wl-demo-orb .elah-orb-shell {
    width: 135px !important;
    height: 135px !important;

    min-width: 135px;
    min-height: 135px;

    max-width: 135px;
    max-height: 135px;

    flex:
        0 0 135px;
}


.wl-demo-orb .elah-orb-shell video {
    width: 135px !important;
    height: 135px !important;
}


.wl-demo-label {
    margin-top: 30px;

    color: #9769b4;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1.5px;
}


.wl-browser-body h3 {
    max-width: 330px;

    margin:
        13px 0
        0;

    color: #e1dbe4;

    font-size: 20px;

    line-height: 1.45;

    font-weight: 500;
}


.wl-browser-body p {
    margin:
        20px 0
        0;

    color: #675f6b;

    font-size: 11px;
}



/* =====================================
   INTRO FEATURES
===================================== */

.wl-intro-section {
    background: #0b0810;
}


.wl-feature-grid {
    display: grid;

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

    gap: 13px;

    margin-top: 65px;
}


.wl-feature-grid article,
.wl-included-grid article {
    padding:
        27px;

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

    border-radius: 15px;

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


.wl-feature-grid article {
    min-height: 250px;
}


.wl-feature-grid strong,
.wl-included-grid strong {
    display: block;

    margin-top: 11px;

    color: #d2cad5;

    font-size: 19px;

    line-height: 1.4;
}


.wl-feature-grid p,
.wl-included-grid p {
    margin:
        13px 0
        0;

    color: #8c8390;

    font-size: 15px;

    line-height: 1.68;
}



/* =====================================
   FLOW
===================================== */

.wl-flow-section {
    background: #09070f;
}


.wl-flow {
    display: grid;

    grid-template-columns:
        1fr
        auto
        1fr
        auto
        1fr
        auto
        1fr;

    gap: 17px;

    align-items: center;

    margin-top: 65px;
}


.wl-flow article {
    min-height: 225px;

    padding:
        25px;

    border:
        1px solid
        rgba(143, 85, 188, 0.14);

    border-radius: 14px;
}


.wl-flow article > span {
    color: #986bb6;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1px;
}


.wl-flow strong {
    display: block;

    margin-top: 18px;

    color: #d0c9d3;

    font-size: 18px;

    line-height: 1.4;
}


.wl-flow p {
    margin:
        13px 0
        0;

    color: #89808d;

    font-size: 15px;

    line-height: 1.65;
}


.wl-flow b {
    color: #694779;

    font-size: 20px;

    font-weight: 400;
}



/* =====================================
   VOICE
===================================== */

.wl-voice-section {
    background:
        radial-gradient(
            circle at 80% 50%,
            rgba(111, 56, 160, 0.11),
            transparent 30%
        ),
        #0b0810;
}


.wl-voice-grid {
    display: grid;

    grid-template-columns:
        1fr
        0.75fr;

    gap: 90px;

    align-items: center;
}


.wl-voice-grid > div:first-child > p:last-child {
    max-width: 620px;

    margin:
        27px 0
        0;

    color: #958b99;

    font-size: 18px;

    line-height: 1.7;
}


.wl-voice-card {
    padding:
        38px;

    border:
        1px solid
        rgba(160, 97, 207, 0.22);

    border-radius: 18px;

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


.wl-voice-card strong {
    display: block;

    margin-top: 12px;

    color: #d8d0dc;

    font-size: 21px;

    line-height: 1.4;
}


.wl-wave {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 5px;

    height: 90px;

    margin:
        28px 0;
}


.wl-wave span {
    display: block;

    width: 4px;

    border-radius: 4px;

    background: #9d60c6;
}


.wl-wave span:nth-child(1),
.wl-wave span:nth-child(11) {
    height: 18px;
}


.wl-wave span:nth-child(2),
.wl-wave span:nth-child(10) {
    height: 31px;
}


.wl-wave span:nth-child(3),
.wl-wave span:nth-child(9) {
    height: 45px;
}


.wl-wave span:nth-child(4),
.wl-wave span:nth-child(8) {
    height: 61px;
}


.wl-wave span:nth-child(5),
.wl-wave span:nth-child(7) {
    height: 74px;
}


.wl-wave span:nth-child(6) {
    height: 52px;
}


.wl-voice-card p {
    margin: 0;

    color: #817887;

    font-size: 14px;

    line-height: 1.65;

    text-align: center;
}



/* =====================================
   GOALS
===================================== */

.wl-goals-section {
    background: #09070f;
}


.wl-goal-grid {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 13px;

    margin-top: 65px;
}


.wl-goal-grid article {
    display: flex;

    align-items: center;

    justify-content: center;

    min-height: 120px;

    padding:
        22px;

    border:
        1px solid
        rgba(146, 88, 190, 0.15);

    border-radius: 13px;

    color: #978c9d;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1px;

    text-align: center;
}


.wl-goal-grid .wl-goal-custom {
    border-color:
        rgba(165, 99, 216, 0.38);

    background:
        rgba(112, 60, 151, 0.10);

    color: #c09bd6;
}


.wl-goal-note {
    display: grid;

    grid-template-columns:
        0.9fr
        1.1fr;

    gap: 55px;

    align-items: center;

    margin-top: 30px;

    padding:
        32px 34px;

    border-top:
        1px solid
        rgba(255, 255, 255, 0.055);

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.055);
}


.wl-goal-note strong {
    color: #cec6d1;

    font-size: 20px;

    line-height: 1.5;
}


.wl-goal-note p {
    margin: 0;

    color: #8c8390;

    font-size: 16px;

    line-height: 1.7;
}



/* =====================================
   INCLUDED
===================================== */

.wl-included-section {
    background: #0b0810;
}


.wl-included-grid {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 13px;

    margin-top: 65px;
}


.wl-included-grid article {
    min-height: 225px;
}



/* =====================================
   API
===================================== */

.wl-api-section {
    background:
        radial-gradient(
            circle at 20% 50%,
            rgba(105, 57, 149, 0.09),
            transparent 31%
        ),
        #09070f;
}


.wl-api-card {
    display: grid;

    grid-template-columns:
        1fr
        0.8fr;

    gap: 85px;

    align-items: center;

    padding:
        50px;

    border:
        1px solid
        rgba(151, 91, 197, 0.17);

    border-radius: 20px;

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


.wl-api-card > div:last-child p {
    margin:
        0 0
        17px;

    color: #948a98;

    font-size: 18px;

    line-height: 1.7;
}



/* =====================================
   BOUNDARIES
===================================== */

.wl-boundaries-section {
    background: #0b0810;
}


.wl-boundary-grid {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 13px;

    margin-top: 60px;
}


.wl-boundary-grid article {
    min-height: 230px;

    padding:
        27px;

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

    border-radius: 14px;
}


.wl-boundary-grid article > span {
    color: #9a6bb8;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1.2px;
}


.wl-boundary-grid strong {
    display: block;

    margin-top: 13px;

    color: #d0c8d3;

    font-size: 19px;

    line-height: 1.4;
}


.wl-boundary-grid p {
    margin:
        13px 0
        0;

    color: #8b8290;

    font-size: 15px;

    line-height: 1.68;
}



/* =====================================
   PRICING
===================================== */

.wl-pricing-section {
    background:
        radial-gradient(
            circle at 50% 30%,
            rgba(111, 54, 163, 0.15),
            transparent 38%
        ),
        #09070f;
}


.wl-pricing-card {
    display: grid;

    grid-template-columns:
        0.75fr
        1.25fr;

    gap: 70px;

    align-items: center;

    max-width: 950px;

    margin: 0 auto;

    padding:
        50px;

    border:
        1px solid
        rgba(164, 99, 214, 0.31);

    border-radius: 20px;

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


.wl-price {
    margin-top: 26px;
}


.wl-price small {
    display: block;

    color: #756a7c;

    font-size: 9px;

    letter-spacing: 1.2px;
}


.wl-price strong {
    display: block;

    margin-top: 10px;

    color: #f0ebf2;

    font-size:
        clamp(
            55px,
            5vw,
            72px
        );

    line-height: 0.95;

    letter-spacing: -0.045em;

    font-weight: 500;
}


.wl-price span {
    display: block;

    margin-top: 10px;

    color: #8f8594;

    font-size: 15px;
}


.wl-pricing-card > div:first-child > p {
    margin:
        20px 0
        0;

    color: #bea6cd;

    font-size: 15px;

    line-height: 1.5;
}


.wl-pricing-details strong {
    color: #d7cfda;

    font-size: 20px;
}


.wl-pricing-details p {
    margin:
        14px 0
        0;

    color: #918794;

    font-size: 16px;

    line-height: 1.7;
}


.wl-pricing-details .button {
    margin-top: 28px;
}



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

.wl-final {
    padding:
        145px 0;

    background:
        radial-gradient(
            ellipse at 50% 100%,
            rgba(112, 55, 164, 0.27),
            transparent 52%
        ),
        #09060e;

    text-align: center;
}


.wl-final-inner {
    max-width: 900px;
}


.wl-final-inner > p:not(.eyebrow) {
    max-width: 680px;

    margin:
        25px auto
        0;

    color: #958b99;

    font-size: 18px;

    line-height: 1.7;
}


.wl-final-inner .button {
    margin-top: 34px;
}


.wl-final-inner small {
    display: block;

    margin-top: 16px;

    color: #645c69;

    font-size: 11px;
}



/* =====================================
   RESPONSIVE
===================================== */

@media (max-width: 1000px) {

    .wl-feature-grid {
        grid-template-columns:
            1fr 1fr;
    }


    .wl-flow {
        grid-template-columns: 1fr 1fr;
    }


    .wl-flow b {
        display: none;
    }


    .wl-voice-grid,
    .wl-api-card {
        grid-template-columns: 1fr;

        gap: 40px;
    }

}


@media (max-width: 850px) {

    .wl-shell {
        width:
            calc(100% - 40px);
    }


    .wl-section {
        padding:
            105px 0;
    }


    .wl-hero-grid,
    .wl-split-heading,
    .wl-goal-note,
    .wl-pricing-card {
        grid-template-columns: 1fr;
    }


    .wl-hero-grid {
        gap: 55px;
    }


    .wl-split-heading,
    .wl-goal-note,
    .wl-pricing-card {
        gap: 32px;
    }


    .wl-domain-preview {
        max-width: 620px;
    }


    .wl-included-grid,
    .wl-boundary-grid {
        grid-template-columns:
            1fr 1fr;
    }

}


@media (max-width: 600px) {

    .wl-shell {
        width:
            calc(100% - 28px);
    }


    .wl-hero {
        padding:
            125px 0
            85px;
    }


    .wl-hero h1 {
        font-size: 50px;
    }


    .wl-feature-grid,
    .wl-flow,
    .wl-goal-grid,
    .wl-included-grid,
    .wl-boundary-grid {
        grid-template-columns: 1fr;
    }


    .wl-domain-preview {
        padding:
            22px;
    }


    .wl-browser-body {
        min-height: 410px;

        padding:
            38px 20px;
    }


    .wl-api-card,
    .wl-pricing-card {
        padding:
            31px 23px;
    }


    .wl-centered-heading h2,
    .wl-split-heading h2,
    .wl-voice-grid h2,
    .wl-api-card h2,
    .wl-final-inner h2 {
        font-size: 42px;
    }

}