/* ============================================================
   ADVOPTIX 2027
   REGISTRATION SECTION
   NEW LIGHT PREMIUM THEME

   HTML DOES NOT NEED TO BE CHANGED.

   Existing HTML classes preserved:
   .registration-section
   .registration-wrap
   .registration-header
   .registration-plans
   .registration-plan
   .registration-plan-top
   .registration-number
   .registration-category
   .registration-price
   .registration-period
   .registration-divider
   .registration-features
   .registration-btn
   .registration-plan-featured
   .registration-popular
   .registration-early-note
============================================================ */


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

.registration-section {

    --reg-navy: #111b52;
    --reg-navy-dark: #0b1544;

    --reg-purple: #4730c5;
    --reg-purple-dark: #3524a8;
    --reg-purple-soft: #7569df;

    --reg-gold: #dfad3e;
    --reg-gold-light: #edca78;

    --reg-white: #ffffff;
    --reg-paper: #fbfcff;
    --reg-soft: #f5f7fd;

    --reg-text: #142052;
    --reg-text-soft: #61709d;
    --reg-muted: #8791af;

    --reg-border: #e2e6f2;
    --reg-border-soft: #edf0f8;

    --reg-shadow:
        0 18px 45px rgba(25, 38, 95, .09);

    --reg-shadow-lg:
        0 25px 65px rgba(20, 32, 85, .14);

    --reg-ease:
        cubic-bezier(.16, 1, .3, 1);

}


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

.registration-section {

    position: relative;

    width: 100%;

    padding:
        90px 0 100px;

    overflow: hidden;

    background:

        radial-gradient(
            circle at 8% 20%,
            rgba(71, 48, 197, .055),
            transparent 25%
        ),

        radial-gradient(
            circle at 92% 75%,
            rgba(223, 173, 62, .055),
            transparent 24%
        ),

        linear-gradient(
            135deg,
            #ffffff 0%,
            #fbfcff 52%,
            #f5f7fd 100%
        );

}


/* ============================================================
   DECORATIVE BACKGROUND
============================================================ */

.registration-section::before {

    content: "";

    position: absolute;

    width: 620px;
    height: 620px;

    left: -470px;
    top: -270px;

    border-radius: 50%;

    border:
        1px solid
        rgba(71, 48, 197, .075);

    box-shadow:

        0 0 0 20px
        rgba(71, 48, 197, .018),

        0 0 0 45px
        rgba(71, 48, 197, .012),

        0 0 0 75px
        rgba(223, 173, 62, .012);

    pointer-events: none;

}


.registration-section::after {

    content: "";

    position: absolute;

    width: 650px;
    height: 650px;

    right: -500px;
    bottom: -440px;

    border-radius: 50%;

    border:
        1px solid
        rgba(71, 48, 197, .075);

    box-shadow:

        0 0 0 20px
        rgba(71, 48, 197, .018),

        0 0 0 45px
        rgba(71, 48, 197, .012),

        0 0 0 75px
        rgba(223, 173, 62, .012);

    pointer-events: none;

}


/* ============================================================
   WRAPPER
============================================================ */

.registration-wrap {

    position: relative;

    z-index: 2;

    width:
        min(
            1380px,
            calc(100% - 50px)
        );

    max-width: 1380px;

    margin:
        0 auto;

}


/* ============================================================
   HEADER
============================================================ */

.registration-header {

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        390px;

    align-items: end;

    gap: 65px;

    margin-bottom: 55px;

}


/* ============================================================
   HEADER LEFT
============================================================ */

.registration-header > div {

    position: relative;

}


/* HEADER UNDERLINE */

.registration-header > div::after {

    content: "";

    display: block;

    width: 100%;

    max-width: 670px;

    height: 1px;

    margin-top: 25px;

    background:

        linear-gradient(
            90deg,
            var(--reg-gold),
            var(--reg-purple),
            transparent
        );

}


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

.registration-header .section-label {

    display: inline-flex;

    align-items: center;

    gap: 13px;

    margin-bottom: 14px;

    color:
        var(--reg-purple);

    font-family:
        "Space Mono",
        "IBM Plex Mono",
        "Courier New",
        monospace;

    font-size:
        .68rem;

    font-weight:
        700;

    letter-spacing:
        .24em;

    text-transform:
        uppercase;

}


/* LABEL GOLD LINE */

.registration-header .section-label::after {

    content: "";

    width: 45px;

    height: 1px;

    background:
        var(--reg-gold);

}


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

.registration-header h2 {

    margin: 0;

    color:
        var(--reg-navy);

    font-family:
        "Cormorant Garamond",
        "Cormorant",
        Georgia,
        serif;

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

    font-weight:
        500;

    line-height:
        .92;

    letter-spacing:
        -.045em;

}


/* ============================================================
   HEADER DESCRIPTION
============================================================ */

.registration-header > p {

    position: relative;

    margin: 0;

    padding-left: 22px;

    border-left:
        2px solid
        var(--reg-gold);

    max-width:
        38ch;

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

    font-family:
        "Inter",
        "Segoe UI",
        Arial,
        sans-serif;

    font-size:
        .95rem;

    line-height:
        1.75;

}


/* ============================================================
   REGISTRATION GRID
============================================================ */

.registration-plans {

    display: grid;

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

    gap:
        18px;

    width:
        100%;

    background:
        transparent;

    border:
        0;

}


/* ============================================================
   INDIVIDUAL REGISTRATION CARD
============================================================ */

.registration-plan {

    position: relative;

    display: flex;

    flex-direction: column;

    min-height:
        610px;

    padding:
        27px 24px 23px;

    overflow: hidden;

    border:
        1px solid
        var(--reg-border);

    border-radius:
        16px;

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

    box-shadow:
        0 12px 35px
        rgba(25,38,95,.065);

    transition:

        transform .35s
        var(--reg-ease),

        box-shadow .35s
        var(--reg-ease),

        border-color .35s
        ease;

}


/* CARD HOVER */

.registration-plan:hover {

    transform:
        translateY(-7px);

    border-color:
        rgba(71,48,197,.22);

    box-shadow:
        var(--reg-shadow-lg);

}


/* ============================================================
   TOP GOLD / PURPLE LINE
============================================================ */

.registration-plan::before {

    content: "";

    position: absolute;

    top: 0;

    left: 24px;

    width: 55px;

    height: 3px;

    border-radius:
        0 0 8px 8px;

    background:

        linear-gradient(
            90deg,
            var(--reg-gold),
            var(--reg-purple)
        );

}


/* ============================================================
   CARD BOTTOM DECORATION
============================================================ */

.registration-plan::after {

    content: "";

    position: absolute;

    left: 0;

    right: 0;

    bottom: 0;

    height: 22px;

    background:

        repeating-radial-gradient(
            ellipse at 50% 100%,
            transparent 0 6px,
            rgba(71,48,197,.07) 7px 8px,
            transparent 9px 15px
        );

    opacity:
        .8;

    pointer-events:
        none;

}


/* ============================================================
   CARD TOP
============================================================ */

.registration-plan-top {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap:
        15px;

    margin-bottom:
        24px;

    padding-bottom:
        16px;

    border-bottom:
        1px solid
        var(--reg-border-soft);

}


/* ============================================================
   REGISTRATION NUMBER
============================================================ */

.registration-number {

    display: flex;

    align-items: center;

    justify-content: center;

    width:
        58px;

    height:
        58px;

    flex-shrink:
        0;

    border:
        1px dashed
        var(--reg-purple);

    border-radius:
        50%;

    color:
        var(--reg-purple);

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size:
        1.65rem;

    font-weight:
        600;

    font-style:
        italic;

}


/* ============================================================
   CATEGORY
============================================================ */

.registration-category {

    color:
        var(--reg-purple);

    font-family:
        "Space Mono",
        "IBM Plex Mono",
        monospace;

    font-size:
        .61rem;

    font-weight:
        700;

    letter-spacing:
        .14em;

    line-height:
        1.5;

    text-align:
        right;

    text-transform:
        uppercase;

}


/* ============================================================
   CATEGORY VARIATIONS
============================================================ */

.registration-plan:nth-child(2)
.registration-number,

.registration-plan:nth-child(2)
.registration-category {

    color:
        var(--reg-gold);

}


.registration-plan:nth-child(2)
.registration-number {

    border-color:
        var(--reg-gold);

}


.registration-plan:nth-child(3)
.registration-number,

.registration-plan:nth-child(3)
.registration-category {

    color:
        var(--reg-purple-soft);

}


.registration-plan:nth-child(3)
.registration-number {

    border-color:
        var(--reg-purple-soft);

}


.registration-plan:nth-child(4)
.registration-number,

.registration-plan:nth-child(4)
.registration-category {

    color:
        #5e6ad6;

}


.registration-plan:nth-child(4)
.registration-number {

    border-color:
        #5e6ad6;

}


/* ============================================================
   PRICE
============================================================ */

.registration-price {

    display: flex;

    align-items: flex-start;

    gap:
        5px;

    margin-top:
        16px;

    margin-bottom:
        0;

    color:
        var(--reg-navy);

}


/* CURRENCY */

.registration-price .currency {
    padding-top: 9px;
    color: var(--reg-purple);
    /* font-family: "Space Mono", monospace; */
    font-size: 2.45rem;
    font-weight: 500;
}



/* AMOUNT */

.registration-price .amount {

    color:
        var(--reg-navy);

    font-family:
        "Inter",
        "Segoe UI",
        Arial,
        sans-serif;

    font-size:
        clamp(
            3rem,
            4.4vw,
            4.2rem
        );

    font-weight:
        600;

    line-height:
        .95;

    letter-spacing:
        -.055em;

}


/* ============================================================
   PERIOD
============================================================ */

.registration-period {

    display: flex;

    align-items: center;

    gap:
        10px;

    margin-top:
        13px;

    color:
        var(--reg-muted);

    font-family:
        "Space Mono",
        monospace;

    font-size:
        .58rem;

    font-weight:
        700;

    letter-spacing:
        .15em;

    text-transform:
        uppercase;

}


.registration-period::before,
.registration-period::after {

    content: "";

    width:
        22px;

    height:
        1px;

    background:
        var(--reg-gold);

}


/* ============================================================
   DIVIDER
============================================================ */

.registration-divider {

    position: relative;

    height:
        1px;

    margin:
        27px 0 24px;

    background:
        var(--reg-border);

}


/* CENTER DIAMOND */

.registration-divider::after {

    content:
        "◆";

    position: absolute;

    left:
        50%;

    top:
        50%;

    transform:
        translate(
            -50%,
            -50%
        );

    padding:
        0 8px;

    background:
        var(--reg-white);

    color:
        var(--reg-gold);

    font-size:
        .42rem;

}


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

.registration-features {

    display: flex;

    flex-direction: column;

    gap:
        13px;

    flex:
        1;

    margin:
        0;

    padding:
        0;

    list-style:
        none;

}


/* FEATURE */

.registration-features li {

    display: flex;

    align-items:
        flex-start;

    gap:
        10px;

    color:
        var(--reg-text);

    font-family:
        "Inter",
        "Segoe UI",
        Arial,
        sans-serif;

    font-size:
        .78rem;

    line-height:
        1.55;

}


/* FEATURE ICON */

.registration-features li i {

    display: flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        21px;

    height:
        21px;

    flex-shrink:
        0;

    margin-top:
        0;

    border:
        1px solid
        var(--reg-purple);

    border-radius:
        50%;

    color:
        var(--reg-purple);

    font-size:
        .55rem;

}


/* SECOND */

.registration-plan:nth-child(2)
.registration-features li i {

    border-color:
        var(--reg-gold);

    color:
        var(--reg-gold);

}


/* THIRD */

.registration-plan:nth-child(3)
.registration-features li i {

    border-color:
        var(--reg-purple-soft);

    color:
        var(--reg-purple-soft);

}


/* FOURTH */

.registration-plan:nth-child(4)
.registration-features li i {

    border-color:
        #5e6ad6;

    color:
        #5e6ad6;

}


/* ============================================================
   REGISTRATION BUTTON
============================================================ */

.registration-btn {

    position:
        relative;

    z-index:
        2;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        12px;

    width:
        100%;

    margin-top:
        28px;

    padding:
        13px 15px;

    border:
        1px solid
        var(--reg-navy);

    border-radius:
        5px;

    background:
        transparent;

    color:
        var(--reg-navy);

    font-family:
        "Space Mono",
        monospace;

    font-size:
        .61rem;

    font-weight:
        700;

    letter-spacing:
        .09em;

    text-decoration:
        none;

    text-transform:
        uppercase;

    transition:

        background .3s
        var(--reg-ease),

        color .3s
        var(--reg-ease),

        border-color .3s
        ease,

        transform .3s
        var(--reg-ease);

}


/* BUTTON ARROW */

.registration-btn span {

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

    font-size:
        1rem;

    transition:
        transform .3s
        var(--reg-ease);

}


/* BUTTON HOVER */

.registration-btn:hover {

    background:
        var(--reg-purple);

    border-color:
        var(--reg-purple);

    color:
        #ffffff !important;

    transform:
        translateY(-2px);

}


.registration-btn:hover span {

    transform:
        translateX(5px);

}


/* ============================================================
   FEATURED CARD
============================================================ */

.registration-plan-featured {

    position:
        relative;

    background:

        radial-gradient(
            circle at 75% 85%,
            rgba(223,173,62,.15),
            transparent 38%
        ),

        radial-gradient(
            circle at 10% 10%,
            rgba(117,105,223,.22),
            transparent 40%
        ),

        linear-gradient(
            145deg,
            #111b52 0%,
            #0b1544 58%,
            #3524a8 100%
        );

    border:
        1px solid
        rgba(237,202,120,.55);

    box-shadow:
        0 22px 55px
        rgba(17,27,82,.20);

    transform:
        translateY(-9px);

    color:
        #ffffff;

    z-index:
        3;

}


/* FEATURED HOVER */

.registration-plan-featured:hover {

    transform:
        translateY(-15px);

    box-shadow:
        0 28px 65px
        rgba(17,27,82,.25);

}


/* FEATURED TOP BORDER */

.registration-plan-featured::before {

    left:
        0;

    width:
        100%;

    height:
        3px;

    border-radius:
        0;

    background:

        linear-gradient(
            90deg,
            var(--reg-gold),
            var(--reg-purple-soft),
            var(--reg-gold)
        );

}


/* FEATURED TOP */

.registration-plan-featured
.registration-plan-top {

    border-color:
        rgba(237,202,120,.20);

}


/* FEATURED NUMBER */

.registration-plan-featured
.registration-number {

    color:
        var(--reg-gold-light);

    border-color:
        var(--reg-gold-light);

}


/* FEATURED CATEGORY */

.registration-plan-featured
.registration-category {

    color:
        var(--reg-gold-light);

}


/* FEATURED PRICE */

.registration-plan-featured
.registration-price {

    color:
        #ffffff;

}


.registration-plan-featured
.registration-price .currency {

    color:
        var(--reg-gold-light);

}


.registration-plan-featured
.registration-price .amount {

    color:
        #ffffff;

}


/* FEATURED PERIOD */

.registration-plan-featured
.registration-period {

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

}


.registration-plan-featured
.registration-period::before,

.registration-plan-featured
.registration-period::after {

    background:
        var(--reg-gold);

}


/* FEATURED DIVIDER */

.registration-plan-featured
.registration-divider {

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

}


.registration-plan-featured
.registration-divider::after {

    background:
        #111b52;

    color:
        var(--reg-gold);

}


/* FEATURED FEATURES */

.registration-plan-featured
.registration-features li {

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

}


/* FEATURED ICONS */

.registration-plan-featured
.registration-features li i {

    border-color:
        var(--reg-gold-light);

    color:
        var(--reg-gold-light);

}


/* FEATURED BUTTON */

.registration-plan-featured
.registration-btn {

    background:

        linear-gradient(
            135deg,
            var(--reg-gold),
            var(--reg-gold-light)
        );

    border-color:
        var(--reg-gold);

    color:
        var(--reg-navy);

}


/* FEATURED BUTTON HOVER */

.registration-plan-featured
.registration-btn:hover {

    background:
        #ffffff;

    border-color:
        #ffffff;

    color:
        var(--reg-navy) !important;

}


/* ============================================================
   MOST POPULAR LABEL
============================================================ */

.registration-popular {

    position:
        absolute;

    top:
        0;

    left:
        50%;

    transform:
        translateX(-50%);

    padding:
        8px 20px;

    border-radius:
        0 0 8px 8px;

    background:
        var(--reg-gold);

    color:
        var(--reg-navy);

    font-family:
        "Space Mono",
        monospace;

    font-size:
        .58rem;

    font-weight:
        700;

    letter-spacing:
        .12em;

    text-transform:
        uppercase;

    white-space:
        nowrap;

    z-index:
        5;

}


/* ============================================================
   EARLY BIRD NOTICE
============================================================ */

.registration-early-note {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        15px;

    max-width:
        720px;

    margin:
        35px auto 0;

    padding:
        14px 24px;

    border:
        1px solid
        var(--reg-border);

    border-radius:
        50px;

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

    box-shadow:
        0 8px 25px
        rgba(25,38,95,.04);

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

    font-family:
        "Inter",
        "Segoe UI",
        Arial,
        sans-serif;

    font-size:
        .82rem;

    line-height:
        1.5;

    text-align:
        center;

}


/* EARLY BIRD STRONG */

.registration-early-note strong {

    color:
        var(--reg-purple);

}


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

@media (max-width: 1150px) {

    .registration-header {

        grid-template-columns:
            1fr 300px;

        gap:
            40px;

    }


    .registration-plans {

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

    }


    .registration-plan {

        min-height:
            590px;

    }


    .registration-plan-featured {

        transform:
            none;

    }


    .registration-plan-featured:hover {

        transform:
            translateY(-7px);

    }

}


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

@media (max-width: 900px) {

    .registration-section {

        padding:
            75px 0 80px;

    }


    .registration-wrap {

        width:
            calc(100% - 40px);

    }


    .registration-header {

        grid-template-columns:
            1fr;

        gap:
            25px;

        margin-bottom:
            40px;

    }


    .registration-header > p {

        max-width:
            55ch;

    }


    .registration-plans {

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

        gap:
            18px;

    }


    .registration-plan {

        min-height:
            590px;

    }


    .registration-plan-featured {

        transform:
            none;

    }

}


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

@media (max-width: 600px) {

    .registration-section {

        padding:
            58px 0 65px;

    }


    .registration-wrap {

        width:
            min(
                calc(100% - 28px),
                500px
            );

    }


    /* HEADER */

    .registration-header {

        margin-bottom:
            35px;

    }


    .registration-header .section-label {

        font-size:
            .57rem;

        letter-spacing:
            .17em;

        gap:
            9px;

    }


    .registration-header .section-label::after {

        width:
            30px;

    }


    .registration-header h2 {

        font-size:
            3rem;

        line-height:
            .95;

    }


    .registration-header > p {

        padding-left:
            15px;

        font-size:
            .82rem;

        line-height:
            1.7;

    }


    /* PLANS */

    .registration-plans {

        grid-template-columns:
            1fr;

        gap:
            18px;

    }


    /* CARD */

    .registration-plan {

        min-height:
            auto;

        padding:
            26px 21px 24px;

    }


    /* FEATURED */

    .registration-plan-featured {

        transform:
            none;

    }


    .registration-plan-featured:hover {

        transform:
            translateY(-5px);

    }


    /* NUMBER */

    .registration-number {

        width:
            55px;

        height:
            55px;

        font-size:
            1.5rem;

    }


    /* CATEGORY */

    .registration-category {

        font-size:
            .56rem;

    }


    /* PRICE */

    .registration-price .amount {

        font-size:
            3.7rem;

    }


    .registration-price .currency {

        padding-top:
            8px;

        font-size:
            1.25rem;

    }


    /* FEATURES */

    .registration-features {

        gap:
            12px;

    }


    .registration-features li {

        font-size:
            .78rem;

    }


    /* BUTTON */

    .registration-btn {

        margin-top:
            26px;

        padding:
            13px 14px;

        font-size:
            .58rem;

    }


    /* EARLY NOTICE */

    .registration-early-note {

        margin-top:
            25px;

        padding:
            13px 16px;

        border-radius:
            14px;

        font-size:
            .75rem;

    }

}


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

@media (max-width: 400px) {

    .registration-section {

        padding:
            48px 0 55px;

    }


    .registration-wrap {

        width:
            calc(100% - 20px);

    }


    .registration-header h2 {

        font-size:
            2.6rem;

    }


    .registration-header > p {

        font-size:
            .77rem;

    }


    .registration-plan {

        padding:
            23px 17px 21px;

    }


    .registration-price .amount {

        font-size:
            3.25rem;

    }


    .registration-features li {

        font-size:
            .74rem;

    }


    .registration-number {

        width:
            51px;

        height:
            51px;

        font-size:
            1.35rem;

    }


    .registration-early-note {

        font-size:
            .7rem;

    }

}