/* =========================================================
   PROGRAM PERSONALIZAT — 3C
========================================================= */


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

.premium-page {
    --premium-blue: #4192ff;
    --premium-green: #46f484;
    --premium-yellow: #e1ff58;

    --premium-dark: #0d1722;
    --premium-dark-soft: #111d29;

    --premium-text: #15212d;
    --premium-soft-text: #61707d;

    --premium-white: #ffffff;
    --premium-soft: #f7fafc;

    --premium-line: rgba(13, 23, 34, .09);

    --premium-max: 1180px;

    width: 100%;

    overflow: hidden;

    background: #fff;

    color: var(--premium-text);

    font-family:
        "Inter",
        system-ui,
        sans-serif;

    line-height: 1.7;
}


.premium-page *,
.premium-page *::before,
.premium-page *::after {
    box-sizing: border-box;
}


.premium-page h1,
.premium-page h2,
.premium-page h3 {
    margin-top: 0;

    font-family:
        "Manrope",
        sans-serif;

    color:
        var(--premium-text);
}


.premium-page p {
    margin-top: 0;

    color:
        var(--premium-soft-text);
}


.premium-page a {
    text-decoration: none;
}


/* =========================================================
   CONTAINER
========================================================= */

.premium-container {
    width:
        min(
            calc(100% - 48px),
            var(--premium-max)
        );

    margin:
        0 auto;
}


/* =========================================================
   SECTION
========================================================= */

.premium-section {
    position: relative;

    padding:
        clamp(64px, 7vw, 96px)
        0;
}


/* =========================================================
   KICKER
========================================================= */

.premium-kicker {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    margin-bottom: 16px;

    color:
        var(--premium-blue);

    font-size: .64rem;

    font-weight: 800;

    line-height: 1.4;

    letter-spacing: .15em;

    text-transform: uppercase;
}


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

    width: 25px;
    height: 2px;

    flex: 0 0 25px;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            var(--premium-blue),
            var(--premium-green)
        );
}


/* =========================================================
   SECTION HEADING
========================================================= */

.premium-section__heading {
    max-width: 760px;

    margin-bottom: 42px;
}


.premium-section__heading h2 {
    margin-bottom: 18px;

    font-size:
        clamp(
            1.8rem,
            3.3vw,
            3rem
        );

    font-weight: 780;

    line-height: 1.13;

    letter-spacing: -.04em;
}


.premium-section__heading > p {
    max-width: 650px;

    margin-bottom: 0;

    font-size: .94rem;

    line-height: 1.75;
}


.premium-section__heading--center {
    margin:
        0
        auto
        46px;

    text-align: center;
}


.premium-section__heading--center .premium-kicker::before {
    display: none;
}


.premium-section__heading--center > p {
    margin-left: auto;
    margin-right: auto;
}


/* =========================================================
   BUTTONS
========================================================= */

.premium-btn {
    min-height: 49px;

    display: inline-flex;

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

    gap: 9px;

    padding:
        11px
        18px;

    border:
        1px solid transparent;

    border-radius: 10px;

    font-family:
        "Inter",
        sans-serif;

    font-size: .79rem;

    font-weight: 700;

    line-height: 1.3;

    transition:
        transform .3s
            cubic-bezier(.22, 1, .36, 1),
        box-shadow .3s ease,
        background-color .3s ease,
        border-color .3s ease;
}


.premium-btn i {
    font-size: 1.08rem;
}


.premium-btn--primary {
    background:
        var(--premium-blue);

    color:
        #fff !important;

    box-shadow:
        8px
        13px
        26px
        rgba(65, 146, 255, .20);
}


.premium-btn--soft {
    border-color:
        rgba(65, 146, 255, .18);

    background:
        rgba(255, 255, 255, .84);

    color:
        var(--premium-text) !important;
}


@media (hover: hover) {

    .premium-btn:hover {
        transform:
            translateY(-2px);
    }


    .premium-btn--primary:hover {
        box-shadow:
            10px
            16px
            30px
            rgba(65, 146, 255, .27);
    }


    .premium-btn--soft:hover {
        border-color:
            rgba(65, 146, 255, .38);

        background:
            #fff;
    }

}


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

.premium-hero {
    position: relative;

    padding:
        clamp(62px, 7vw, 105px)
        0
        clamp(86px, 8vw, 120px);

    overflow: hidden;

    background:
        radial-gradient(
            circle at 7% 12%,
            rgba(65, 146, 255, .11),
            transparent 28%
        ),
        radial-gradient(
            circle at 93% 17%,
            rgba(70, 244, 132, .09),
            transparent 25%
        ),
        radial-gradient(
            circle at 75% 93%,
            rgba(225, 255, 88, .09),
            transparent 24%
        ),
        linear-gradient(
            180deg,
            #fff,
            #fbfdff
        );
}


.premium-hero::after {
    content: "";

    position: absolute;

    left: 50%;
    bottom: 0;

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

    height: 1px;

    transform:
        translateX(-50%);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(65, 146, 255, .25),
            rgba(70, 244, 132, .22),
            transparent
        );
}


.premium-hero__grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.12fr)
        minmax(330px, .78fr);

    align-items: center;

    gap:
        clamp(
            46px,
            7vw,
            90px
        );
}


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

.premium-hero__title {
    max-width: 670px;

    margin:
        0
        0
        24px;

    font-size:
        clamp(
            2.4rem,
            4.8vw,
            4.35rem
        );

    font-weight: 820;

    line-height: 1.01;

    letter-spacing: -.055em;
}


.premium-hero__title span {
    display: block;

    color:
        var(--premium-blue);
}


.premium-hero__lead {
    max-width: 680px;

    margin-bottom: 16px;

    color:
        var(--premium-text) !important;

    font-size:
        clamp(
            1.03rem,
            1.35vw,
            1.16rem
        );

    line-height: 1.67;
}


.premium-hero__text {
    max-width: 665px;

    margin-bottom: 23px;

    font-size: .91rem;

    line-height: 1.75;
}


.premium-hero__text strong {
    color:
        var(--premium-text);
}


.premium-hero__facts {
    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin-bottom: 25px;
}


.premium-hero__facts span {
    display: inline-flex;

    align-items: center;

    gap: 6px;

    padding:
        7px
        10px;

    border:
        1px solid
        rgba(65, 146, 255, .11);

    border-radius: 999px;

    background:
        rgba(255, 255, 255, .67);

    color:
        var(--premium-text);

    font-size: .66rem;

    font-weight: 650;

    box-shadow:
        4px
        7px
        17px
        rgba(13, 23, 34, .04);
}


.premium-hero__facts i {
    color:
        var(--premium-blue);

    font-size: .92rem;
}


.premium-hero__actions {
    display: flex;

    flex-wrap: wrap;

    gap: 10px;
}


.premium-hero__note {
    max-width: 600px;

    margin:
        16px
        0
        0 !important;

    padding-left: 12px;

    border-left:
        2px solid
        var(--premium-green);

    color:
        var(--premium-soft-text);

    font-size: .69rem;

    line-height: 1.6;
}


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

.premium-hero__visual {
    position: relative;

    width: 100%;

    max-width: 430px;

    margin-left: auto;

    padding-bottom: 54px;

    isolation: isolate;
}


.premium-hero__visual::before,
.premium-hero__visual::after {
    content: "";

    position: absolute;

    z-index: -2;

    border-radius: 50%;

    filter: blur(34px);

    pointer-events: none;
}


.premium-hero__visual::before {
    width: 180px;
    height: 180px;

    top: -20px;
    right: -22px;

    background:
        rgba(65, 146, 255, .18);
}


.premium-hero__visual::after {
    width: 170px;
    height: 170px;

    bottom: 15px;
    left: -25px;

    background:
        rgba(70, 244, 132, .16);
}

/* =========================================================
   HERO PHOTO — RAMĂ 3C CIRCULARĂ ANIMATĂ
========================================================= */

@property --premium-frame-angle {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}


.premium-hero__photo {
    --premium-frame-angle: 0deg;

    /* viteza rotației */
    --premium-frame-speed: 4s;

    position: relative;

    padding: 7px;

    border-radius: 26px;

    background:
        conic-gradient(
            from var(--premium-frame-angle),

            var(--premium-blue) 0deg,

            var(--premium-green) 120deg,

            var(--premium-yellow) 240deg,

            var(--premium-blue) 360deg
        );

    animation:
        premiumFrameSpin
        var(--premium-frame-speed)
        linear
        infinite;

    box-shadow:
        0 26px 52px
        rgba(13, 23, 34, .15),

        13px 19px 38px
        rgba(65, 146, 255, .13),

        -8px 15px 30px
        rgba(70, 244, 132, .09);
}


@keyframes premiumFrameSpin {

    from {
        --premium-frame-angle: 0deg;
    }

    to {
        --premium-frame-angle: 360deg;
    }

}


.premium-hero__photo img {
    display: block;

    width: 100%;

    min-height: 480px;

    aspect-ratio: 4 / 5;

    border-radius: 20px;

    object-fit: cover;
    object-position: center;

    background:
        #edf3f8;
}


.premium-hero__badge {
    position: absolute;

    z-index: 4;

    top: 22px;
    left: -19px;

    max-width: 250px;

    display: flex;

    align-items: center;

    gap: 9px;

    padding:
        10px
        12px;

    border:
        1px solid
        rgba(255, 255, 255, .67);

    border-radius: 12px;

    background:
        rgba(255, 255, 255, .88);

    backdrop-filter:
        blur(14px);

    -webkit-backdrop-filter:
        blur(14px);

    box-shadow:
        6px
        11px
        26px
        rgba(13, 23, 34, .11);

    color:
        var(--premium-text);

    font-size: .66rem;

    line-height: 1.45;
}


.premium-hero__badge i {
    color:
        var(--premium-blue);

    font-size: 1.1rem;
}


.premium-hero__badge span,
.premium-hero__badge strong {
    display: block;
}


/* =========================================================
   HERO FORMULA — VARIANTĂ MAI ELEGANTĂ
========================================================= */

.premium-hero__formula {
    position: absolute;

    z-index: 5;

    right: -12px;
    bottom: 4px;

    width:
        min(
            92%,
            380px
        );

    padding:
        16px
        18px;

    display: flex;

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

    flex-wrap: wrap;

    gap: 8px;

    border:
        1px solid
        rgba(255, 255, 255, .75);

    border-radius: 18px;

    background:
        rgba(255, 255, 255, .82);

    backdrop-filter:
        blur(16px);

    -webkit-backdrop-filter:
        blur(16px);

    box-shadow:
        0 18px 34px
        rgba(13, 23, 34, .10),

        0 8px 18px
        rgba(65, 146, 255, .05);

    overflow: hidden;

    isolation: isolate;
}


/* gradient discret în fundal */

.premium-hero__formula::before {
    content: "";

    position: absolute;

    inset: 0;

    z-index: -1;

    background:
        linear-gradient(
            135deg,
            rgba(65, 146, 255, .10) 0%,
            rgba(70, 244, 132, .07) 50%,
            rgba(225, 255, 88, .10) 100%
        );

    pointer-events: none;
}


/* textele devin chip-uri elegante */

.premium-hero__formula span {
    display: inline-flex;

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

    min-height: 30px;

    padding:
        7px
        12px;

    border:
        1px solid
        rgba(23, 35, 52, .06);

    border-radius: 999px;

    background:
        rgba(255, 255, 255, .58);

    box-shadow:
        0 4px 10px
        rgba(13, 23, 34, .04);

    color:
        var(--premium-text);

    font-size: .54rem;

    font-weight: 800;

    letter-spacing: .07em;

    text-align: center;

    line-height: 1.35;

    text-transform: uppercase;
}


/* punctele dintre ele */

.premium-hero__formula i {
    width: 6px;
    height: 6px;

    flex: 0 0 6px;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            var(--premium-blue),
            var(--premium-green)
        );

    box-shadow:
        0 0 0 4px
        rgba(70, 244, 132, .08);
}


/* =========================================================
   PROBLEM
========================================================= */

.premium-problem {
    background: #fff;
}


.premium-problem__grid {
    display: grid;

    grid-template-columns:
        minmax(0, .78fr)
        minmax(0, 1.22fr);

    gap:
        clamp(
            45px,
            7vw,
            90px
        );

    align-items: start;
}


.premium-problem__grid >
.premium-section__heading {
    position: sticky;

    top: 100px;

    margin-bottom: 0;
}


.premium-problem__content > p {
    max-width: 690px;

    margin-bottom: 17px;

    font-size: .93rem;

    line-height: 1.77;
}


.premium-problem__cards {
    margin-top: 28px;

    display: grid;

    gap: 12px;
}


.premium-mini-card {
    position: relative;

    padding:
        21px
        22px
        21px
        64px;

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

    border-radius: 2px;

    background:
        #fff;

    box-shadow:
        7px
        11px
        24px
        rgba(13, 32, 48, .05);
}


.premium-mini-card > span {
    position: absolute;

    top: 18px;
    left: 18px;

    color:
        rgba(65, 146, 255, .55);

    font-size: .56rem;

    font-weight: 800;
}


.premium-mini-card > i {
    position: absolute;

    left: 18px;
    bottom: 19px;

    color:
        var(--premium-blue);

    font-size: 1.2rem;
}


.premium-mini-card h3 {
    margin:
        0
        0
        6px;

    font-size: .9rem;
}


.premium-mini-card p {
    margin: 0;

    font-size: .76rem;

    line-height: 1.65;
}


/* =========================================================
   REPERE
========================================================= */

.premium-repere {
    background:
        var(--premium-soft);
}


.premium-repere__grid {
    display: grid;

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

    gap: 18px;
}


.premium-reper {
    position: relative;

    min-height: 315px;

    padding:
        28px
        24px;

    overflow: hidden;

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

    border-radius: 2px;

    background: #fff;

    box-shadow:
        8px
        13px
        26px
        rgba(13, 32, 48, .055);
}


.premium-reper::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 3px;
}


.premium-reper--blue::before {
    background:
        var(--premium-blue);
}


.premium-reper--green::before {
    background:
        var(--premium-green);
}


.premium-reper--yellow::before {
    background:
        var(--premium-yellow);
}


.premium-reper__number {
    position: absolute;

    top: 17px;
    right: 20px;

    color:
        rgba(13, 23, 34, .09);

    font-family:
        "Manrope",
        sans-serif;

    font-size: 2.4rem;

    font-weight: 800;
}


.premium-reper__icon {
    width: 47px;
    height: 47px;

    margin-bottom: 21px;

    display: flex;

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

    border-radius: 50%;

    font-size: 1.3rem;
}


.premium-reper--blue
.premium-reper__icon {
    background:
        rgba(65, 146, 255, .09);

    color:
        var(--premium-blue);
}


.premium-reper--green
.premium-reper__icon {
    background:
        rgba(70, 244, 132, .12);

    color:
        #149550;
}


.premium-reper--yellow
.premium-reper__icon {
    background:
        rgba(225, 255, 88, .22);

    color:
        #849300;
}


.premium-reper h3 {
    margin:
        0
        0
        10px;

    font-size: 1.02rem;
}


.premium-reper p {
    margin-bottom: 20px;

    font-size: .79rem;

    line-height: 1.67;
}


.premium-reper > strong {
    display: block;

    padding-top: 16px;

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

    color:
        var(--premium-text);

    font-size: .73rem;

    line-height: 1.5;
}


/* =========================================================
   3C DARK
========================================================= */

.premium-3c {
    background:
        var(--premium-dark);
}


.premium-3c
.premium-section__heading h2 {
    color: #fff;
}


.premium-3c
.premium-section__heading p {
    color:
        rgba(255, 255, 255, .58);
}


.premium-3c
.premium-kicker {
    color:
        var(--premium-green);
}


.premium-3c__grid {
    display: grid;

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

    gap: 1px;

    background:
        rgba(255, 255, 255, .09);
}


.premium-3c__item {
    min-height: 395px;

    padding:
        30px
        27px;

    background:
        var(--premium-dark-soft);
}


.premium-3c__letter {
    width: 46px;
    height: 46px;

    margin-bottom: 22px;

    display: flex;

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

    border-radius: 50%;

    font-family:
        "Manrope",
        sans-serif;

    font-size: 1.08rem;

    font-weight: 800;
}


.premium-3c__item--blue
.premium-3c__letter {
    background:
        rgba(65, 146, 255, .14);

    color:
        var(--premium-blue);
}


.premium-3c__item--green
.premium-3c__letter {
    background:
        rgba(70, 244, 132, .12);

    color:
        var(--premium-green);
}


.premium-3c__item--yellow
.premium-3c__letter {
    background:
        rgba(225, 255, 88, .12);

    color:
        var(--premium-yellow);
}


.premium-3c__item > span {
    display: block;

    margin-bottom: 5px;

    color:
        rgba(255, 255, 255, .35);

    font-size: .55rem;

    font-weight: 800;

    letter-spacing: .12em;
}


.premium-3c__item h3 {
    margin:
        0
        0
        12px;

    color: #fff;

    font-size: 1.28rem;
}


.premium-3c__item p {
    margin-bottom: 20px;

    color:
        rgba(255, 255, 255, .57);

    font-size: .78rem;

    line-height: 1.65;
}


.premium-3c__item ul {
    margin: 0;

    padding: 0;

    list-style: none;
}


.premium-3c__item li {
    position: relative;

    padding:
        7px
        0
        7px
        17px;

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

    color:
        rgba(255, 255, 255, .71);

    font-size: .69rem;
}


.premium-3c__item li::before {
    content: "";

    position: absolute;

    top: 14px;
    left: 1px;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background:
        var(--premium-green);
}


/* =========================================================
   PROCESS
========================================================= */

.premium-process {
    background:
        #fff;
}


.premium-process__timeline {
    max-width: 850px;

    margin-left: auto;
}


.premium-process__step {
    position: relative;

    display: grid;

    grid-template-columns:
        62px
        1fr;

    gap: 22px;

    padding-bottom: 38px;
}


.premium-process__step:last-child {
    padding-bottom: 0;
}


.premium-process__step::before {
    content: "";

    position: absolute;

    top: 51px;
    bottom: 0;

    left: 24px;

    width: 1px;

    background:
        linear-gradient(
            180deg,
            rgba(65, 146, 255, .33),
            rgba(70, 244, 132, .24)
        );
}


.premium-process__step:last-child::before {
    display: none;
}


.premium-process__step > span {
    width: 49px;
    height: 49px;

    display: flex;

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

    border:
        1px solid
        rgba(65, 146, 255, .14);

    border-radius: 50%;

    background:
        #fff;

    color:
        var(--premium-blue);

    font-size: .63rem;

    font-weight: 800;

    box-shadow:
        5px
        9px
        20px
        rgba(13, 23, 34, .07);
}


.premium-process__step small {
    display: block;

    margin-bottom: 4px;

    color:
        var(--premium-blue);

    font-size: .52rem;

    font-weight: 800;

    letter-spacing: .11em;
}


.premium-process__step h3 {
    margin:
        0
        0
        7px;

    font-size: .97rem;
}


.premium-process__step p {
    max-width: 670px;

    margin: 0;

    font-size: .77rem;

    line-height: 1.66;
}


/* =========================================================
   LESSONS
========================================================= */

.premium-lessons {
    background:
        var(--premium-soft);
}


.premium-lessons__grid {
    display: grid;

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

    gap: 12px;
}


.premium-lesson {
    position: relative;

    min-height: 210px;

    padding:
        23px
        21px;

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

    border-radius: 2px;

    background:
        #fff;

    box-shadow:
        6px
        10px
        22px
        rgba(13, 32, 48, .04);

    transition:
        transform .32s
            cubic-bezier(.22, 1, .36, 1),
        box-shadow .32s ease;
}


.premium-lesson > span {
    position: absolute;

    top: 18px;
    right: 18px;

    color:
        rgba(13, 23, 34, .09);

    font-family:
        "Manrope",
        sans-serif;

    font-size: 1.7rem;

    font-weight: 800;
}


.premium-lesson > i {
    width: 39px;
    height: 39px;

    margin-bottom: 20px;

    display: flex;

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

    border-radius: 50%;

    background:
        rgba(65, 146, 255, .08);

    color:
        var(--premium-blue);

    font-size: 1.12rem;
}


.premium-lesson:nth-child(3n+2) > i {
    background:
        rgba(70, 244, 132, .10);

    color:
        #179253;
}


.premium-lesson:nth-child(3n) > i {
    background:
        rgba(225, 255, 88, .19);

    color:
        #819000;
}


.premium-lesson h3 {
    margin:
        0
        0
        8px;

    font-size: .88rem;
}


.premium-lesson p {
    margin: 0;

    font-size: .69rem;

    line-height: 1.62;
}


@media (hover: hover) {

    .premium-lesson:hover {
        transform:
            translateY(-3px);

        box-shadow:
            8px
            14px
            27px
            rgba(13, 32, 48, .07);
    }

}


/* =========================================================
   INCLUDES
========================================================= */

.premium-includes {
    background: #fff;
}


.premium-includes__grid {
    display: grid;

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

    gap: 13px;
}


.premium-include {
    padding:
        25px
        22px;

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

    border-radius: 2px;

    background:
        #fff;
}


.premium-include > i {
    width: 43px;
    height: 43px;

    margin-bottom: 18px;

    display: flex;

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

    border-radius: 50%;

    background:
        rgba(65, 146, 255, .08);

    color:
        var(--premium-blue);

    font-size: 1.18rem;
}


.premium-include h3 {
    margin:
        0
        0
        7px;

    font-size: .87rem;
}


.premium-include p {
    margin: 0;

    font-size: .69rem;

    line-height: 1.62;
}


/* =========================================================
   FIT
========================================================= */

.premium-fit {
    background:
        linear-gradient(
            180deg,
            #f8fbfd,
            #fff
        );
}


.premium-fit__grid {
    max-width: 1000px;

    margin:
        0
        auto;

    display: grid;

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

    gap: 18px;
}


.premium-fit__card {
    padding:
        28px
        27px;

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

    border-radius: 2px;

    background:
        #fff;

    box-shadow:
        7px
        12px
        26px
        rgba(13, 32, 48, .05);
}


.premium-fit__card > span {
    display: block;

    margin-bottom: 18px;

    font-size: .58rem;

    font-weight: 850;

    letter-spacing: .11em;
}


.premium-fit__card--yes > span {
    color:
        #188c51;
}


.premium-fit__card--no > span {
    color:
        #a15c5c;
}


.premium-fit__card ul {
    margin: 0;

    padding: 0;

    list-style: none;
}


.premium-fit__card li {
    display: grid;

    grid-template-columns:
        23px
        1fr;

    gap: 8px;

    padding:
        10px
        0;

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

    color:
        var(--premium-text);

    font-size: .73rem;

    line-height: 1.55;
}


.premium-fit__card li:last-child {
    border-bottom: 0;
}


.premium-fit__card li i {
    margin-top: 2px;

    font-size: 1rem;
}


.premium-fit__card--yes li i {
    color:
        #1aa15d;
}


.premium-fit__card--no li i {
    color:
        #bf6767;
}


.premium-fit__card > p {
    margin:
        18px
        0
        0;

    padding-top: 17px;

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

    font-size: .68rem;

    line-height: 1.6;
}


/* =========================================================
   ROLE
========================================================= */

.premium-role {
    background: #fff;
}


.premium-role__grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(300px, .76fr);

    align-items: center;

    gap:
        clamp(
            42px,
            7vw,
            90px
        );
}


.premium-role__content {
    max-width: 690px;
}


.premium-role__content h2 {
    margin:
        0
        0
        18px;

    font-size:
        clamp(
            1.8rem,
            3vw,
            2.8rem
        );

    letter-spacing: -.04em;
}


.premium-role__content p {
    margin-bottom: 14px;

    font-size: .88rem;

    line-height: 1.74;
}


.premium-role__content
.premium-btn {
    margin-top: 10px;
}


.premium-role__quote {
    margin: 0;

    padding:
        31px
        28px;

    border-radius: 2px;

    background:
        var(--premium-dark);

    box-shadow:
        12px
        18px
        34px
        rgba(13, 23, 34, .17);
}


.premium-role__quote > span {
    display: block;

    margin-bottom: 16px;

    color:
        var(--premium-green);

    font-family:
        "Inter",
        sans-serif;

    font-size: .56rem;

    font-weight: 800;

    letter-spacing: .14em;
}


.premium-role__quote > p {
    margin:
        0
        0
        8px;

    color: #fff;

    font-family:
        "Lora",
        serif;

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

    font-style: italic;

    line-height: 1.55;
}


.premium-role__quote cite {
    display: block;

    color:
        rgba(255, 255, 255, .47);

    font-size: .66rem;

    font-style: normal;
}


.premium-role__quote > div {
    width: 53px;
    height: 2px;

    margin:
        21px
        0;

    background:
        linear-gradient(
            90deg,
            var(--premium-blue),
            var(--premium-green),
            var(--premium-yellow)
        );
}


.premium-role__quote small {
    display: block;

    color:
        rgba(255, 255, 255, .58);

    font-family:
        "Inter",
        sans-serif;

    font-size: .68rem;

    line-height: 1.62;
}


/* =========================================================
   RESULT
========================================================= */

.premium-result {
    background:
        var(--premium-soft);
}


.premium-result__grid {
    max-width: 1000px;

    margin:
        0
        auto;

    display: grid;

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

    gap: 14px;
}


.premium-result__item {
    padding:
        25px
        22px;

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

    border-radius: 2px;

    background:
        #fff;
}


.premium-result__item > span {
    display: block;

    margin-bottom: 19px;

    color:
        rgba(65, 146, 255, .55);

    font-size: .58rem;

    font-weight: 800;
}


.premium-result__item h3 {
    margin:
        0
        0
        8px;

    font-size: .9rem;
}


.premium-result__item p {
    margin: 0;

    font-size: .71rem;

    line-height: 1.65;
}


/* =========================================================
   FAQ
========================================================= */

.premium-faq {
    background: #fff;
}


.premium-faq__list {
    max-width: 850px;

    margin-left: auto;
}


.premium-faq__item {
    border-bottom:
        1px solid
        var(--premium-line);
}


.premium-faq__item:first-child {
    border-top:
        1px solid
        var(--premium-line);
}


.premium-faq__item summary {
    padding:
        19px
        3px;

    display: flex;

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

    gap: 20px;

    color:
        var(--premium-text);

    font-family:
        "Manrope",
        sans-serif;

    font-size: .82rem;

    font-weight: 700;

    cursor: pointer;

    list-style: none;
}


.premium-faq__item summary::-webkit-details-marker {
    display: none;
}


.premium-faq__item summary i {
    flex:
        0 0 auto;

    color:
        var(--premium-blue);

    font-size:
        1.25rem;

    transform:
        rotate(0deg);

    transition:
        transform .65s
        cubic-bezier(.22, 1, .36, 1);
}


.premium-faq__item.is-open
summary i {
    transform:
        rotate(45deg);
}


.premium-hero__content {text-align: center}
.premium-hero__content p {text-align: left}


/* =========================================================
   FAQ — ACORDEON LENT
========================================================= */

.premium-faq__item > div {
    height: 0;

    overflow: hidden;

    padding:
        0
        35px
        0
        3px;

    opacity: 0;

    transform:
        translateY(-8px);

    transition:
        height .78s
            cubic-bezier(.22, 1, .36, 1),
        padding-bottom .78s
            cubic-bezier(.22, 1, .36, 1),
        opacity .50s ease,
        transform .78s
            cubic-bezier(.22, 1, .36, 1);

    will-change:
        height,
        opacity,
        transform;
}


.premium-faq__item.is-open > div {
    padding-bottom:
        18px;

    opacity:
        1;

    transform:
        translateY(0);
}


.premium-faq__item p {
    max-width: 730px;

    margin: 0;

    font-size: .74rem;

    line-height: 1.7;
}


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

.premium-final {
    padding:
        clamp(62px, 7vw, 95px)
        0;

    background:
        linear-gradient(
            180deg,
            #fff,
            #f8fbfd
        );
}


.premium-final__card {
    position: relative;

    padding:
        clamp(
            32px,
            5vw,
            55px
        );

    overflow: hidden;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(280px, .62fr);

    align-items: center;

    gap:
        50px;

    border:
        1px solid
        rgba(65, 146, 255, .12);

    border-radius: 2px;

    background:
        #fff;

    box-shadow:
        12px
        20px
        42px
        rgba(13, 32, 48, .08);
}


.premium-final__card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 3px;

    background:
        var(--premium-blue);
}

.premium-final h2 {
    max-width: 700px;

    margin:
        0
        0
        15px;

    font-size:
        clamp(
            1.7rem,
            3vw,
            2.7rem
        );

    letter-spacing: -.04em;
}


.premium-final p {
    max-width: 660px;

    margin: 0;

    font-size: .84rem;

    line-height: 1.72;
}


.premium-final__action {
    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 12px;
}


.premium-final__action span {
    color:
        var(--premium-soft-text);

    font-size: .62rem;

    line-height: 1.5;
}


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

.js-premium-reveal
[data-premium-reveal] {
    opacity: 0;

    transform:
        translateY(22px);

    transition:
        opacity .72s ease,
        transform .82s
        cubic-bezier(.22, 1, .36, 1);

    transition-delay:
        var(
            --premium-reveal-delay,
            0ms
        );
}


.js-premium-reveal
[data-premium-reveal].is-visible {
    opacity: 1;

    transform:
        translateY(0);
}


/* =========================================================
   LAPTOP
========================================================= */

@media (max-width: 1050px) {

    .premium-container {
        width:
            calc(100% - 36px);
    }


    .premium-hero__grid {
        grid-template-columns:
            minmax(0, 1.08fr)
            minmax(280px, .78fr);

        gap: 35px;
    }


    .premium-hero__visual {
        max-width: 355px;
    }


    .premium-hero__photo img {
        min-height: 410px;
    }


    .premium-lessons__grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

}


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

@media (max-width: 760px) {

    .premium-section {
        padding:
            56px
            0;
    }


    .premium-hero {
        padding:
            52px
            0
            82px;
    }


    .premium-hero__grid,
    .premium-problem__grid,
    .premium-role__grid,
    .premium-final__card {
        grid-template-columns:
            1fr;
    }


    .premium-hero__grid {
        gap: 55px;
    }


    .premium-hero__content {
        text-align: center;
    }


    .premium-hero__lead,
    .premium-hero__text,
    .premium-hero__note {
        margin-left: auto;
        margin-right: auto;

        text-align: left;
    }


    .premium-hero__facts,
    .premium-hero__actions {
        justify-content: center;
    }


    .premium-hero__visual {
        width:
            min(
                430px,
                calc(100% - 12px)
            );

        max-width: none;

        margin:
            0 auto;
    }


    .premium-problem__grid >
    .premium-section__heading {
        position: static;

        margin-bottom: 15px;
    }


    .premium-repere__grid,
    .premium-3c__grid,
    .premium-includes__grid,
    .premium-result__grid {
        grid-template-columns:
            1fr;
    }


    .premium-3c__grid {
        gap: 1px;
    }


    .premium-3c__item,
    .premium-reper {
        min-height: 0;
    }


    .premium-fit__grid {
        grid-template-columns:
            1fr;
    }


    .premium-faq__list {
        margin-left: 0;
    }


    .premium-final__card {
        gap: 30px;
    }

}


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

@media (max-width: 620px) {

    .premium-container {
        width:
            calc(100% - 28px);
    }


    .premium-hero {
        padding:
            43px
            0
            75px;
    }


    .premium-hero__title {
        font-size:
            clamp(
                2.1rem,
                10.5vw,
                3rem
            );
    }


    .premium-hero__lead {
        font-size: .96rem;
    }


    .premium-hero__text {
        font-size: .85rem;
    }


    .premium-hero__actions {
        flex-direction: column;
    }


    .premium-btn {
        width: 100%;
    }


    .premium-hero__facts {
        gap: 6px;
    }


    .premium-hero__facts span {
        font-size: .6rem;
    }


    .premium-hero__visual {
        width: 100%;
    }


    .premium-hero__photo img {
        min-height: 0;
    }


    .premium-hero__badge {
        top: 13px;
        left: -5px;

        max-width: 220px;

        font-size: .61rem;
    }


    @media (max-width: 620px) {

    .premium-hero__formula {
        right: 8px;
        bottom: 3px;

        width:
            calc(100% - 16px);

        padding:
            12px
            10px;

        gap: 6px;

        border-radius: 16px;
    }


    .premium-hero__formula span {
        min-height: 28px;

        padding:
            6px
            10px;

        font-size: .47rem;

        letter-spacing: .06em;
    }


    .premium-hero__formula i {
        width: 5px;
        height: 5px;

        flex-basis: 5px;
    }

}

    .premium-hero__formula span {
        font-size: .45rem;
    }


    .premium-section__heading {
        margin-bottom: 30px;
    }


    .premium-section__heading h2 {
        font-size:
            1.72rem;
    }


    .premium-lessons__grid {
        grid-template-columns:
            1fr;
    }


    .premium-lesson {
        min-height: 0;
    }


    .premium-process__step {
        grid-template-columns:
            52px
            1fr;

        gap: 14px;
    }


    .premium-process__step::before {
        left: 21px;
    }


    .premium-process__step > span {
        width: 43px;
        height: 43px;
    }


    .premium-fit__card {
        padding:
            24px
            20px;
    }


    .premium-role__quote {
        padding:
            26px
            21px;
    }


    .premium-faq__item summary {
        font-size: .76rem;
    }


    .premium-final__card {
        padding:
            29px
            21px;
    }

}


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

@media (max-width: 359.98px) {

    .premium-container {
        width:
            calc(100% - 20px);
    }


    .premium-hero__facts {
        flex-direction: column;

        align-items: stretch;
    }


    .premium-hero__facts span {
        justify-content: center;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .js-premium-reveal
    [data-premium-reveal] {
        opacity: 1 !important;

        transform:
            none !important;

        transition:
            none !important;
    }


    .premium-btn,
    .premium-lesson,
    .premium-faq__item summary i {
        transition:
            none !important;
    }

}