/* =====================================================
   EVERMORE — LUXURY AI EXPERIENCE
   EVERAI-INSPIRED BRAND COLORS
===================================================== */

:root{

    /* ==============================
       BRAND COLORS
    ============================== */

    --bg:#031426;
    --surface:#071D2E;
    --surface2:#0A2937;

    --text:#F5FFFA;
    --muted:#A9C4C0;

    /* Neon Green */
    --cyan:#39FF88;
    --cyan2:#8CFFB5;

    /* Emerald / Teal */
    --blue:#0FAF68;
    --blue2:#087A58;

    /* Deep Navy */
    --dark:#02101D;
    --line:rgba(57,255,136,.14);

    /* Orange CTA Glow */
    --orange:#FF9A3D;

    /* Shadows */
    --shadow:
        0 30px 90px rgba(0,0,0,.38);

    --radius:28px;

}


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

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

html{
    scroll-behavior:smooth;
}

body{

    font-family:"DM Sans",sans-serif;

    background:
        radial-gradient(
            circle at 80% 0%,
            rgba(20,145,91,.18),
            transparent 32%
        ),
        radial-gradient(
            circle at 15% 30%,
            rgba(7,78,86,.16),
            transparent 35%
        ),
        var(--bg);

    color:var(--text);

    overflow-x:hidden;

}


/* =====================================================
   AMBIENT BRAND GLOW
===================================================== */

body::before{

    content:"";

    position:fixed;

    width:600px;
    height:600px;

    background:
        radial-gradient(
            circle,
            rgba(57,255,136,.18) 0%,
            rgba(15,175,104,.10) 35%,
            transparent 70%
        );

    filter:blur(100px);

    border-radius:50%;

    top:-300px;
    right:-200px;

    pointer-events:none;

    z-index:-1;

}


/* =====================================================
   SECONDARY AMBIENT GLOW
===================================================== */

body::after{

    content:"";

    position:fixed;

    width:450px;
    height:450px;

    background:rgba(57,255,136,.06);

    filter:blur(120px);

    border-radius:50%;

    bottom:-250px;
    left:-180px;

    pointer-events:none;

    z-index:-1;

}


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

button{
    font-family:inherit;
}


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

.container{

    width:min(1180px,92%);

    margin:auto;

}


/* =====================================================
   NAVIGATION
===================================================== */

header{

    position:fixed;

    top:0;
    left:0;
    right:0;

    z-index:999;

    padding:18px 0;

}


.nav{

    height:66px;

    padding:0 10px 0 20px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    background:rgba(3,20,38,.78);

    backdrop-filter:blur(22px);

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

    border:1px solid rgba(57,255,136,.12);

    border-radius:22px;

    box-shadow:
        0 10px 40px rgba(0,0,0,.25),
        inset 0 1px 0 rgba(255,255,255,.035);

}


/* =====================================================
   LOGO
===================================================== */

.logo{

    display:flex;

    align-items:center;

    gap:11px;

    font-family:"Manrope";

    font-weight:800;

    font-size:18px;

    letter-spacing:-.7px;

    color:var(--text);

}


.logo-symbol{

    width:39px;
    height:39px;

    border-radius:13px;

    display:grid;

    place-items:center;

    color:#031426;

    background:
        linear-gradient(
            135deg,
            var(--cyan),
            var(--cyan2)
        );

    font-size:22px;

    box-shadow:
        0 0 18px rgba(57,255,136,.30),
        0 0 35px rgba(57,255,136,.12);

}


/* =====================================================
   NAV CENTER
===================================================== */

.nav-center{

    display:flex;

    gap:30px;

    font-size:13px;

    color:var(--muted);

}


.nav-center a{

    transition:.25s;

    position:relative;

}


.nav-center a:hover{

    color:var(--cyan);

}


.nav-center a::after{

    content:"";

    position:absolute;

    left:0;
    bottom:-7px;

    width:0;
    height:2px;

    border-radius:10px;

    background:var(--cyan);

    box-shadow:
        0 0 8px rgba(57,255,136,.65);

    transition:.25s;

}


.nav-center a:hover::after{

    width:100%;

}


/* =====================================================
   NAV ACTION
===================================================== */

.nav-action{

    padding:11px 18px;

    background:
        linear-gradient(
            135deg,
            var(--cyan),
            #21D976
        );

    color:#031426;

    border-radius:14px;

    font-size:12px;

    font-weight:800;

    transition:.25s;

    box-shadow:
        0 0 18px rgba(57,255,136,.18);

}


.nav-action:hover{

    transform:translateY(-2px);

    box-shadow:
        0 10px 30px rgba(57,255,136,.25),
        0 0 25px rgba(57,255,136,.18);

}


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

.hero{

    min-height:100vh;

    padding:160px 0 80px;

    display:flex;

    align-items:center;

    position:relative;

}


/* =====================================================
   HERO BACKGROUND GLOW
===================================================== */

.hero::before{

    content:"";

    position:absolute;

    width:520px;
    height:520px;

    right:-180px;
    top:10%;

    background:rgba(57,255,136,.10);

    filter:blur(120px);

    border-radius:50%;

    pointer-events:none;

    z-index:-1;

}


.hero-grid{

    display:grid;

    grid-template-columns:.95fr 1.05fr;

    gap:70px;

    align-items:center;

}


/* =====================================================
   LEFT — HERO COPY
===================================================== */

.hero-copy{

    position:relative;

}


/* =====================================================
   BRAND PILL
===================================================== */

.pill{

    display:inline-flex;

    align-items:center;

    gap:9px;

    padding:7px 11px;

    border-radius:100px;

    background:rgba(57,255,136,.08);

    border:1px solid rgba(57,255,136,.24);

    color:var(--cyan);

    font-size:10px;

    font-weight:800;

    letter-spacing:1.4px;

    text-transform:uppercase;

    margin-bottom:25px;

    box-shadow:
        0 0 20px rgba(57,255,136,.06);

}


.pill span{

    width:6px;
    height:6px;

    border-radius:50%;

    background:var(--cyan);

    box-shadow:
        0 0 0 5px rgba(57,255,136,.10),
        0 0 12px rgba(57,255,136,.70);

}


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

.hero h1{

    font-family:"Manrope";

    font-size:clamp(50px,6.4vw,84px);

    line-height:.98;

    letter-spacing:-5px;

    font-weight:800;

    max-width:700px;

    color:var(--text);

}


/* GREEN EMPHASIS */

.hero h1 .soft{

    color:var(--cyan);

    text-shadow:
        0 0 25px rgba(57,255,136,.15);

}


/* OUTLINE TEXT */

.hero h1 .outline{

    color:transparent;

    -webkit-text-stroke:1.4px var(--text);

}


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

.hero-description{

    margin-top:28px;

    max-width:540px;

    color:var(--muted);

    font-size:15px;

    line-height:1.9;

}


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

.hero-actions{

    margin-top:32px;

    display:flex;

    align-items:center;

    gap:13px;

}


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

.btn-main{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:16px 22px;

    background:
        linear-gradient(
            135deg,
            var(--cyan),
            #20D976
        );

    color:#031426;

    border-radius:15px;

    font-size:13px;

    font-weight:800;

    transition:.3s;

    box-shadow:
        0 10px 30px rgba(57,255,136,.16),
        0 0 20px rgba(57,255,136,.08);

}


.btn-main:hover{

    transform:translateY(-3px);

    box-shadow:
        0 18px 40px rgba(57,255,136,.22),
        0 0 30px rgba(57,255,136,.16);

}


/* =====================================================
   CTA ICON
===================================================== */

.btn-main i{

    transition:.3s;

}


.btn-main:hover i{

    transform:translate(3px,-3px);

}


/* =====================================================
   SECONDARY BUTTON
===================================================== */

.btn-plain{

    display:flex;

    align-items:center;

    gap:8px;

    color:var(--text);

    font-size:12px;

    font-weight:700;

    transition:.25s;

}


.btn-plain:hover{

    color:var(--cyan);

}


/* =====================================================
   SECONDARY BUTTON ICON
===================================================== */

.btn-plain i{

    width:32px;
    height:32px;

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

    border-radius:50%;

    display:grid;

    place-items:center;

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

    color:var(--cyan);

    transition:.25s;

}


.btn-plain:hover i{

    border-color:rgba(57,255,136,.35);

    background:rgba(57,255,136,.08);

    box-shadow:
        0 0 18px rgba(57,255,136,.12);

}


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

.ai-stage{

    position:relative;

    height:570px;

}


/* =====================================================
   AI ORBIT
===================================================== */

.ai-orbit{

    position:absolute;

    width:510px;
    height:510px;

    border:1px solid rgba(57,255,136,.13);

    border-radius:50%;

    top:25px;
    right:10px;

    box-shadow:
        0 0 60px rgba(57,255,136,.035);

}

.ai-orbit::before{

    content:"";

    position:absolute;

    inset:65px;

    border:1px dashed rgba(57,255,136,.18);

    border-radius:50%;

}


/* =====================================================
   AI CORE
===================================================== */

.ai-core{

    position:absolute;

    width:370px;
    height:450px;

    top:60px;
    right:70px;

    border-radius:34px;

    background:
        linear-gradient(
            145deg,
            rgba(10,41,55,.96),
            rgba(4,25,38,.94)
        );

    border:1px solid rgba(57,255,136,.16);

    box-shadow:

        0 50px 100px rgba(0,0,0,.42),

        0 0 50px rgba(57,255,136,.06),

        inset 0 1px 0 rgba(255,255,255,.06);

    overflow:hidden;

    transform:rotate(2deg);

    transition:.5s;

}


.ai-core:hover{

    transform:rotate(0deg) translateY(-5px);

    box-shadow:

        0 60px 110px rgba(0,0,0,.45),

        0 0 60px rgba(57,255,136,.10),

        inset 0 1px 0 rgba(255,255,255,.07);

}


/* =====================================================
   AI GLOW
===================================================== */

.ai-glow{

    position:absolute;

    width:260px;
    height:260px;

    background:
        radial-gradient(
            circle,
            rgba(57,255,136,.42),
            rgba(15,175,104,.16),
            transparent 70%
        );

    filter:blur(60px);

    border-radius:50%;

    top:-80px;
    right:-80px;

    opacity:.85;

}


/* =====================================================
   AI TOP BAR
===================================================== */

.ai-top{

    height:65px;

    padding:0 20px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    border-bottom:1px solid rgba(57,255,136,.10);

}


.ai-brand{

    display:flex;

    align-items:center;

    gap:8px;

    font-family:"Manrope";

    font-weight:800;

    font-size:13px;

    color:var(--text);

}


.ai-brand-icon{

    width:28px;
    height:28px;

    display:grid;

    place-items:center;

    background:
        linear-gradient(
            135deg,
            var(--cyan),
            var(--cyan2)
        );

    color:#031426;

    border-radius:9px;

    font-size:13px;

    box-shadow:
        0 0 15px rgba(57,255,136,.20);

}


/* =====================================================
   AI STATUS
===================================================== */

.ai-status{

    display:flex;

    align-items:center;

    gap:6px;

    color:var(--cyan2);

    font-size:9px;

    font-weight:700;

}


.ai-status span{

    width:6px;
    height:6px;

    border-radius:50%;

    background:var(--cyan);

    box-shadow:
        0 0 8px rgba(57,255,136,.75);

}


/* =====================================================
   AI BODY
===================================================== */

.ai-body{

    padding:24px;

}


/* =====================================================
   PROMPT LABEL
===================================================== */

.prompt-label{

    color:var(--muted);

    font-size:9px;

    text-transform:uppercase;

    letter-spacing:1.5px;

    font-weight:800;

    margin-bottom:9px;

}


/* =====================================================
   PROMPT
===================================================== */

.prompt{

    padding:13px 14px;

    border-radius:14px;

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

    border:1px solid rgba(57,255,136,.12);

    color:var(--text);

    font-size:11px;

    line-height:1.6;

    box-shadow:
        0 10px 25px rgba(0,0,0,.16);

}


/* =====================================================
   AI RESPONSE
===================================================== */

.response{

    margin-top:18px;

    padding:17px;

    background:
        linear-gradient(
            145deg,
            #031A27,
            #052C2D
        );

    border:1px solid rgba(57,255,136,.10);

    color:#DDF9ED;

    border-radius:16px;

    font-size:11px;

    line-height:1.8;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.035);

}


.response-head{

    display:flex;

    align-items:center;

    gap:7px;

    color:var(--cyan);

    font-size:9px;

    font-weight:800;

    margin-bottom:9px;

}


.response-head i{

    font-size:12px;

}


/* =====================================================
   AI LINES
===================================================== */

.ai-lines{

    margin-top:25px;

    display:grid;

    gap:9px;

}


.ai-line{

    height:7px;

    border-radius:100px;

    background:
        linear-gradient(
            90deg,
            rgba(57,255,136,.18),
            rgba(57,255,136,.05)
        );

}


.ai-line:nth-child(1){
    width:92%;
}

.ai-line:nth-child(2){
    width:78%;
}

.ai-line:nth-child(3){
    width:84%;
}

.ai-line:nth-child(4){
    width:55%;
}


/* =====================================================
   FLOATING LABELS
===================================================== */

.float{

    position:absolute;

    z-index:3;

    background:
        rgba(6,29,46,.88);

    border:1px solid rgba(57,255,136,.14);

    border-radius:17px;

    box-shadow:
        0 25px 60px rgba(0,0,0,.35),
        0 0 25px rgba(57,255,136,.04);

    padding:13px 15px;

    display:flex;

    align-items:center;

    gap:10px;

    animation:float 4s ease-in-out infinite;

    backdrop-filter:blur(15px);

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

}


.float-icon{

    width:34px;
    height:34px;

    border-radius:11px;

    background:
        rgba(57,255,136,.10);

    color:var(--cyan);

    border:1px solid rgba(57,255,136,.18);

    display:grid;

    place-items:center;

    box-shadow:
        0 0 15px rgba(57,255,136,.08);

}


.float strong{

    display:block;

    font-size:10px;

    color:var(--text);

}


.float small{

    display:block;

    color:var(--muted);

    font-size:8px;

    margin-top:2px;

}


.float.a{

    left:0;
    bottom:115px;

}


.float.b{

    right:-10px;
    top:105px;

    animation-delay:1.3s;

}


@keyframes float{

    0%,100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-10px);
    }

}


/* =====================================================
   MARQUEE
===================================================== */

.marquee{

    overflow:hidden;

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

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

    background:
        rgba(3,20,38,.55);

}


.marquee-track{

    display:flex;

    width:max-content;

    animation:marquee 28s linear infinite;

}


.marquee-item{

    display:flex;

    align-items:center;

    gap:28px;

    padding:20px 28px;

    color:var(--muted);

    font-size:11px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:1.5px;

}


.marquee-item::after{

    content:"∞";

    color:var(--cyan);

    font-size:18px;

    text-shadow:
        0 0 12px rgba(57,255,136,.45);

}


@keyframes marquee{

    to{
        transform:translateX(-50%);
    }

}


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

.intro{

    padding:130px 0;

}


.intro-grid{

    display:grid;

    grid-template-columns:.7fr 1.3fr;

    gap:80px;

}


.kicker{

    color:var(--cyan);

    font-size:10px;

    letter-spacing:2px;

    text-transform:uppercase;

    font-weight:800;

}


.intro h2{

    margin-top:15px;

    font-family:"Manrope";

    font-size:clamp(35px,4.4vw,60px);

    line-height:1.05;

    letter-spacing:-3px;

    color:var(--text);

}


.intro-content p{

    color:var(--muted);

    font-size:17px;

    line-height:1.9;

    max-width:680px;

}


.intro-content p + p{

    margin-top:18px;

}


.intro-highlight{

    display:inline;

    color:var(--text);

    font-weight:700;

}


/* =====================================================
   INTERACTIVE OPPORTUNITY SECTION
===================================================== */

.opportunities{

    padding:80px 0 130px;

}

.opportunity-header{

    display:flex;

    justify-content:space-between;

    align-items:end;

    gap:30px;

    margin-bottom:40px;

}

.opportunity-header h2{

    font-family:"Manrope";

    font-size:clamp(35px,4vw,55px);

    letter-spacing:-3px;

    line-height:1;

    color:var(--text);

}

.opportunity-header p{

    color:var(--muted);

    max-width:370px;

    font-size:13px;

    line-height:1.8;

}


/* =====================================================
   OPPORTUNITY CARDS
===================================================== */

.opportunity-track{

    display:grid;

    grid-template-columns:1.3fr .85fr .85fr;

    gap:16px;

}

.opp-card{

    min-height:410px;

    position:relative;

    overflow:hidden;

    border-radius:28px;

    padding:30px;

    background:
        linear-gradient(
            145deg,
            rgba(10,41,55,.96),
            rgba(5,27,42,.96)
        );

    border:1px solid rgba(57,255,136,.11);

    transition:.4s;

    box-shadow:
        0 15px 45px rgba(0,0,0,.15);

}

.opp-card:hover{

    transform:translateY(-7px);

    border-color:rgba(57,255,136,.25);

    box-shadow:
        0 30px 80px rgba(0,0,0,.30),
        0 0 35px rgba(57,255,136,.06);

}

.opp-card.primary{

    background:
        linear-gradient(
            145deg,
            #021A28,
            #063D35
        );

    color:white;

    border-color:rgba(57,255,136,.18);

}


/* =====================================================
   OPPORTUNITY NUMBER
===================================================== */

.opp-number{

    font-size:10px;

    color:var(--cyan);

    font-weight:800;

    letter-spacing:1.5px;

}

.primary .opp-number{

    color:var(--cyan2);

}


/* =====================================================
   OPPORTUNITY TITLE
===================================================== */

.opp-card h3{

    position:absolute;

    left:30px;
    bottom:68px;

    font-family:"Manrope";

    font-size:29px;

    letter-spacing:-1.5px;

    max-width:300px;

    color:var(--text);

}

.primary h3{

    color:white;

}


/* =====================================================
   OPPORTUNITY DESCRIPTION
===================================================== */

.opp-card p{

    position:absolute;

    left:30px;
    bottom:28px;

    color:var(--muted);

    font-size:11px;

}

.primary p{

    color:#B9D8D0;

}


/* =====================================================
   OPPORTUNITY ICON
===================================================== */

.opp-icon{

    position:absolute;

    right:28px;
    top:28px;

    width:55px;
    height:55px;

    display:grid;

    place-items:center;

    border-radius:17px;

    background:
        rgba(57,255,136,.08);

    border:1px solid rgba(57,255,136,.13);

    color:var(--cyan);

    font-size:23px;

    box-shadow:
        0 0 20px rgba(57,255,136,.05);

}

.primary .opp-icon{

    background:rgba(57,255,136,.10);

    color:var(--cyan);

    border-color:rgba(57,255,136,.20);

}


/* =====================================================
   OPPORTUNITY ORB
===================================================== */

.opp-orb{

    position:absolute;

    width:230px;
    height:230px;

    right:-80px;
    top:80px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(57,255,136,.28),
            rgba(15,175,104,.10),
            transparent 70%
        );

    filter:blur(8px);

    opacity:.7;

}

.primary .opp-orb{

    background:
        radial-gradient(
            circle,
            rgba(57,255,136,.40),
            rgba(8,122,88,.15),
            transparent 70%
        );

    opacity:.65;

}


/* =====================================================
   AI HUMAN SECTION
===================================================== */

.human-ai{

    padding:100px 0;

}

.human-box{

    background:
        linear-gradient(
            145deg,
            #021522,
            #052F32
        );

    color:white;

    border-radius:34px;

    overflow:hidden;

    display:grid;

    grid-template-columns:1fr 1fr;

    min-height:550px;

    border:1px solid rgba(57,255,136,.12);

    box-shadow:
        0 35px 90px rgba(0,0,0,.28);

}

.human-copy{

    padding:65px;

    display:flex;

    flex-direction:column;

    justify-content:center;

}

.human-copy .kicker{

    color:var(--cyan);

}

.human-copy h2{

    font-family:"Manrope";

    font-size:clamp(38px,4.5vw,62px);

    line-height:1;

    letter-spacing:-3px;

    margin:16px 0 24px;

}

.human-copy p{

    color:#B7D3D0;

    font-size:14px;

    line-height:1.9;

    max-width:520px;

}


/* =====================================================
   HUMAN AI VISUAL
===================================================== */

.human-visual{

    position:relative;

    min-height:550px;

    background:

        radial-gradient(
            circle at 50% 50%,
            rgba(57,255,136,.16),
            rgba(15,175,104,.06) 25%,
            transparent 55%
        );

    display:flex;

    align-items:center;

    justify-content:center;

}


.human-ring{

    width:330px;
    height:330px;

    border-radius:50%;

    border:1px solid rgba(57,255,136,.25);

    display:grid;

    place-items:center;

    animation:spin 18s linear infinite;

    box-shadow:
        0 0 60px rgba(57,255,136,.05);

}

.human-ring::before{

    content:"";

    width:220px;
    height:220px;

    border-radius:50%;

    border:1px dashed rgba(57,255,136,.30);

}


.human-core{

    position:absolute;

    width:130px;
    height:130px;

    border-radius:50%;

    background:

        radial-gradient(
            circle at 35% 30%,
            #F5FFFA,
            var(--cyan) 25%,
            var(--blue)
        );

    box-shadow:

        0 0 45px rgba(57,255,136,.35),
        0 0 90px rgba(57,255,136,.18);

}

@keyframes spin{

    to{
        transform:rotate(360deg);
    }

}


/* =====================================================
   MENTOR
===================================================== */

.mentor-section{

    padding:130px 0;

}

.mentor-grid{

    display:grid;

    grid-template-columns:1fr .9fr;

    gap:90px;

    align-items:center;

}

.mentor-grid h2{

    font-family:"Manrope";

    font-size:clamp(38px,4vw,58px);

    letter-spacing:-3px;

    line-height:1.03;

    color:var(--text);

}

.mentor-grid p{

    color:var(--muted);

    font-size:14px;

    line-height:1.9;

    margin-top:20px;

    max-width:560px;

}

.mentor-list{

    display:grid;

    gap:10px;

}

.mentor-row{

    padding:18px;

    border:1px solid rgba(57,255,136,.11);

    background:
        rgba(7,29,46,.80);

    border-radius:17px;

    display:flex;

    align-items:center;

    gap:14px;

    transition:.25s;

}

.mentor-row:hover{

    transform:translateX(5px);

    border-color:rgba(57,255,136,.30);

    background:
        rgba(10,41,55,.95);

    box-shadow:
        0 12px 35px rgba(0,0,0,.18);

}

.mentor-row i{

    width:37px;
    height:37px;

    border-radius:11px;

    background:
        rgba(57,255,136,.10);

    color:var(--cyan);

    border:1px solid rgba(57,255,136,.15);

    display:grid;

    place-items:center;

}

.mentor-row strong{

    font-size:12px;

    color:var(--text);

}

.mentor-row span{

    display:block;

    color:var(--muted);

    font-size:10px;

    margin-top:2px;

}


/* =====================================================
   ACTIVATION
===================================================== */

.activate{

    padding:100px 0;

}

.activation-card{

    position:relative;

    overflow:hidden;

    padding:75px;

    border-radius:35px;

    background:

        radial-gradient(
            circle at 85% 20%,
            rgba(57,255,136,.18),
            transparent 30%
        ),

        linear-gradient(
            145deg,
            #071F2E,
            #052E31
        );

    border:1px solid rgba(57,255,136,.14);

    box-shadow:
        0 35px 90px rgba(0,0,0,.28);

}


.activation-card::after{

    content:"∞";

    position:absolute;

    right:-30px;
    bottom:-90px;

    font-family:"Manrope";

    font-size:300px;

    font-weight:800;

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

}


.activation-content{

    position:relative;

    z-index:2;

    max-width:650px;

}

.activation-content h2{

    font-family:"Manrope";

    font-size:clamp(40px,5vw,67px);

    letter-spacing:-4px;

    line-height:.98;

    margin:14px 0 20px;

    color:var(--text);

}

.activation-content p{

    color:var(--muted);

    font-size:14px;

    line-height:1.9;

    max-width:580px;

}


.price-row{

    margin:30px 0;

    display:flex;

    align-items:baseline;

    gap:12px;

}

.price{

    font-family:"Manrope";

    font-size:50px;

    font-weight:800;

    letter-spacing:-3px;

    color:var(--cyan);

    text-shadow:
        0 0 25px rgba(57,255,136,.12);

}

.price-label{

    color:var(--muted);

    font-size:11px;

}


/* =====================================================
   IMAGE MANAGEMENT
===================================================== */

.assets{

    padding:70px 0 120px;

}

.assets-title{

    display:flex;

    justify-content:space-between;

    align-items:end;

    margin-bottom:25px;

}

.assets-title h2{

    font-family:"Manrope";

    font-size:28px;

    letter-spacing:-1.5px;

    color:var(--text);

}

.assets-title p{

    color:var(--muted);

    font-size:11px;

}

.asset-grid{

    display:grid;

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

    gap:12px;

}

.asset{

    height:150px;

    position:relative;

    overflow:hidden;

    border-radius:18px;

    background:
        linear-gradient(
            145deg,
            rgba(7,31,47,.96),
            rgba(5,43,45,.92)
        );

    border:1px solid rgba(57,255,136,.11);

    box-shadow:
        0 12px 35px rgba(0,0,0,.12);

}

.asset input{

    display:none;

}

.asset-label{

    position:absolute;

    inset:0;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-direction:column;

    cursor:pointer;

    color:var(--muted);

    transition:.3s;

}

.asset-label:hover{

    background:
        rgba(57,255,136,.055);

}

.asset-label i{

    color:var(--cyan);

    font-size:22px;

    margin-bottom:7px;

    text-shadow:
        0 0 15px rgba(57,255,136,.25);

}

.asset-label strong{

    font-size:10px;

    color:var(--text);

}

.asset-label span{

    font-size:8px;

    margin-top:2px;

    color:var(--muted);

}

.asset-preview{

    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;

    display:none;

}


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

footer{

    padding:30px 0;

    border-top:1px solid rgba(57,255,136,.10);

    background:
        rgba(3,20,38,.72);

}

.footer{

    display:flex;

    justify-content:space-between;

    align-items:center;

    color:var(--muted);

    font-size:10px;

}

.footer-logo{

    font-family:"Manrope";

    font-weight:800;

    color:var(--text);

}


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

.reveal{

    opacity:0;

    transform:translateY(30px);

    transition:

        opacity .8s ease,

        transform .8s ease;

}

.reveal.show{

    opacity:1;

    transform:none;

}


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

@media(max-width:950px){

    .nav-center{
        display:none;
    }

    .hero-grid,
    .intro-grid,
    .human-box,
    .mentor-grid{
        grid-template-columns:1fr;
    }

    .hero{
        padding-top:130px;
    }

    .ai-stage{
        height:500px;
    }

    .ai-core{
        right:50%;
        transform:translateX(50%) rotate(2deg);
    }

    .ai-orbit{
        right:50%;
        transform:translateX(50%);
    }

    .float.a{
        left:5%;
    }

    .float.b{
        right:5%;
    }

    .opportunity-track{
        grid-template-columns:1fr 1fr;
    }

    .opp-card.primary{
        grid-column:span 2;
    }

    .human-visual{
        min-height:400px;
    }

    .human-copy{
        padding:50px;
    }

    .asset-grid{
        grid-template-columns:repeat(3,1fr);
    }

}


@media(max-width:600px){

    .container{
        width:90%;
    }

    header{
        padding:10px 0;
    }

    .nav{
        height:60px;
    }

    .nav-action{
        padding:10px 14px;
        font-size:10px;
    }

    .hero{
        padding:110px 0 55px;
    }

    .hero h1{
        font-size:48px;
        letter-spacing:-3px;
    }

    .hero-description{
        font-size:13px;
    }

    .hero-actions{
        align-items:flex-start;
        flex-direction:column;
    }

    .ai-stage{
        height:430px;
        margin-top:20px;
    }

    .ai-orbit{
        width:360px;
        height:360px;
        top:35px;
    }

    .ai-core{
        width:300px;
        height:380px;
        top:25px;
    }

    .float{
        transform:scale(.85);
    }

    .float.a{
        left:-8px;
        bottom:35px;
    }

    .float.b{
        right:-8px;
        top:55px;
    }

    .intro,
    .mentor-section{
        padding:80px 0;
    }

    .intro-grid{
        gap:35px;
    }

    .intro h2,
    .mentor-grid h2{
        font-size:39px;
        letter-spacing:-2px;
    }

    .opportunity-header{
        display:block;
    }

    .opportunity-header p{
        margin-top:18px;
    }

    .opportunity-track{
        grid-template-columns:1fr;
    }

    .opp-card.primary{
        grid-column:auto;
    }

    .opp-card{
        min-height:350px;
    }

    .human-copy{
        padding:40px 28px;
    }

    .human-copy h2{
        font-size:41px;
    }

    .human-visual{
        min-height:330px;
    }

    .human-ring{
        width:250px;
        height:250px;
    }

    .activation-card{
        padding:45px 25px;
    }

    .activation-content h2{
        font-size:43px;
        letter-spacing:-2.5px;
    }

    .price{
        font-size:42px;
    }

    .asset-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .asset{
        height:130px;
    }

    .footer{
        flex-direction:column;
        align-items:flex-start;
        gap:10px;
    }

}

/* =====================================================
   HUMAN + AI CSS
===================================================== */


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

.human-ai{

    position:relative;

    overflow:hidden;

    padding:
        130px 0;

    background:
        linear-gradient(
            180deg,
            #031426 0%,
            #041B2A 100%
        );

}


/* =====================================================
   HUMAN BOX
===================================================== */

.human-box{

    position:relative;

    display:grid;

    grid-template-columns:
        .85fr 1.15fr;

    align-items:center;

    min-height:600px;

    padding:
        70px;

    overflow:hidden;

    border:
        1px solid
        rgba(57,255,136,.12);

    border-radius:32px;

    background:

        radial-gradient(
            circle at 80% 50%,
            rgba(57,255,136,.13),
            transparent 38%
        ),

        linear-gradient(
            145deg,
            rgba(7,31,47,.97),
            rgba(4,38,43,.96)
        );

    box-shadow:

        0 30px 100px
        rgba(0,0,0,.32),

        0 0 50px
        rgba(57,255,136,.035);

}


/* =====================================================
   COPY
===================================================== */

.human-copy{

    position:relative;

    z-index:5;

    max-width:430px;

}


.human-copy .kicker{

    display:flex;

    align-items:center;

    gap:10px;

    margin-bottom:22px;

    color:var(--cyan);

    font-size:9px;

    font-weight:800;

    letter-spacing:2px;

    text-transform:uppercase;

}


.human-copy .kicker::before{

    content:"";

    width:24px;

    height:1px;

    background:var(--cyan);

    box-shadow:
        0 0 8px rgba(57,255,136,.35);

}


.human-copy h2{

    margin:0;

    color:var(--text);

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

    font-size:
        clamp(45px,5vw,68px);

    line-height:.98;

    letter-spacing:-4px;

    font-weight:700;

}


.human-copy h2 span{

    color:var(--cyan);

    font-weight:500;

    text-shadow:
        0 0 25px rgba(57,255,136,.12);

}


.human-copy p{

    max-width:390px;

    margin:28px 0 0;

    color:var(--muted);

    font-size:12px;

    line-height:1.9;

}


/* =====================================================
   STATUS
===================================================== */

.human-status{

    display:flex;

    align-items:center;

    gap:9px;

    margin-top:35px;

    color:var(--muted);

    font-size:7px;

    font-weight:800;

    letter-spacing:1.6px;

}


.status-dot{

    width:6px;

    height:6px;

    border-radius:50%;

    background:var(--cyan);

    box-shadow:

        0 0 0 5px
        rgba(57,255,136,.08),

        0 0 12px
        rgba(57,255,136,.65);

    animation:
        statusPulse 2s infinite;

}


.status-line{

    width:35px;

    height:1px;

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

}


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

.human-visual{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    min-height:520px;

}


.orbit-scene{

    position:relative;

    width:560px;

    height:560px;

}


/* =====================================================
   AMBIENT GLOW
===================================================== */

.orbit-glow{

    position:absolute;

    left:50%;

    top:50%;

    width:260px;

    height:260px;

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

    border-radius:50%;

    background:

        radial-gradient(
            circle,
            rgba(57,255,136,.28),
            rgba(15,175,104,.12),
            transparent 70%
        );

    filter:
        blur(70px);

    animation:
        glowPulse 4s ease-in-out infinite;

}


/* =====================================================
   SVG
===================================================== */

.orbit-svg{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    overflow:visible;

}


/* =====================================================
   ORBIT PATHS
===================================================== */

.orbit{

    fill:none;

    stroke:
        rgba(57,255,136,.18);

    stroke-width:1;

    stroke-dasharray:
        3 8;

    transform-box:fill-box;

    transform-origin:center;

}


.orbit-one{

    animation:
        orbitRotateOne
        18s
        linear
        infinite;

}


.orbit-two{

    animation:
        orbitRotateTwo
        24s
        linear
        infinite;

}


.orbit-three{

    animation:
        orbitRotateThree
        21s
        linear
        infinite;

}


.orbit-four{

    stroke:
        rgba(57,255,136,.10);

    stroke-dasharray:
        2 10;

    animation:
        orbitRotateFour
        14s
        linear
        infinite reverse;

}


.orbit-five{

    stroke:
        rgba(57,255,136,.10);

    stroke-dasharray:
        2 10;

    animation:
        orbitRotateFive
        17s
        linear
        infinite;

}

/* =====================================================
   NODES
===================================================== */

.orbit-node{

    fill:var(--cyan);

    filter:
        url(#nodeGlow);

    animation:
        nodeBlink
        2.8s
        ease-in-out
        infinite;

}


.node-two{

    animation-delay:.5s;

}


.node-three{

    animation-delay:1.2s;

}


.node-four{

    animation-delay:1.8s;

}


.node-five{

    animation-delay:2.3s;

}



/* =====================================================
   CORE
===================================================== */

.core-halo{

    fill:
        url(#coreGradient);

    opacity:.6;

    animation:
        corePulse
        3s
        ease-in-out
        infinite;

}


.core-circle{

    fill:
        rgba(255,255,255,.92);

    stroke:
        rgba(57,255,136,.18);

    stroke-width:1;

    filter:
        url(#orbitGlow);

    animation:
        coreBreath
        4s
        ease-in-out
        infinite;

}



/* =====================================================
   CENTER
===================================================== */

.orbit-center{

    position:absolute;

    left:50%;

    top:50%;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    width:110px;

    height:110px;

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

    text-align:center;

}


.center-symbol{

    margin-bottom:2px;

    color:var(--cyan);

    font-family:
        Georgia,
        serif;

    font-size:40px;

    line-height:1;

    animation:
        symbolPulse
        4s
        ease-in-out
        infinite;

}


.orbit-center span{

    color:var(--text);

    font-size:8px;

    font-weight:900;

    letter-spacing:2px;

}


.orbit-center small{

    margin-top:5px;

    color:var(--muted);

    font-size:6px;

    font-weight:700;

    letter-spacing:1.4px;

}



/* =====================================================
   FLOATING LABELS
===================================================== */

.orbit-label{

    position:absolute;

    z-index:10;

    display:flex;

    align-items:center;

    gap:7px;

    padding:8px 12px;

    border:
        1px solid
        rgba(57,255,136,.14);

    border-radius:30px;

    background:
        rgba(4,27,42,.78);

    box-shadow:

        0 10px 30px
        rgba(0,0,0,.22),

        0 0 20px
        rgba(57,255,136,.035);

    backdrop-filter:
        blur(12px);

    color:var(--muted);

    font-size:7px;

    font-weight:800;

    letter-spacing:1.5px;

}


.label-dot{

    width:5px;

    height:5px;

    border-radius:50%;

    background:var(--cyan);

    box-shadow:
        0 0 10px
        rgba(57,255,136,.55);

    animation:
        nodeBlink
        2s
        ease-in-out
        infinite;

}


.label-human{

    left:5%;

    top:43%;

    animation:
        floatingLabel
        5s
        ease-in-out
        infinite;

}


.label-ai{

    right:4%;

    top:26%;

    animation:
        floatingLabel
        5s
        1.5s
        ease-in-out
        infinite;

}


.label-context{

    right:12%;

    bottom:19%;

    opacity:.7;

    animation:
        floatingLabel
        6s
        1s
        ease-in-out
        infinite;

}


.label-feedback{

    left:15%;

    bottom:17%;

    opacity:.7;

    animation:
        floatingLabel
        6s
        2s
        ease-in-out
        infinite;

}



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

@keyframes orbitRotateOne{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }

}


@keyframes orbitRotateTwo{

    from{
        transform:rotate(60deg);
    }

    to{
        transform:rotate(420deg);
    }

}


@keyframes orbitRotateThree{

    from{
        transform:rotate(-60deg);
    }

    to{
        transform:rotate(300deg);
    }

}


@keyframes orbitRotateFour{

    from{
        transform:rotate(30deg);
    }

    to{
        transform:rotate(-330deg);
    }

}


@keyframes orbitRotateFive{

    from{
        transform:rotate(-30deg);
    }

    to{
        transform:rotate(330deg);
    }

}


@keyframes nodeBlink{

    0%,
    100%{

        opacity:.25;

        transform:scale(.7);

    }

    50%{

        opacity:1;

        transform:scale(1.7);

    }

}


@keyframes corePulse{

    0%,
    100%{

        opacity:.3;

        transform:scale(.85);

    }

    50%{

        opacity:.8;

        transform:scale(1.15);

    }

}


@keyframes coreBreath{

    0%,
    100%{

        transform:scale(.96);

    }

    50%{

        transform:scale(1.04);

    }

}


@keyframes symbolPulse{

    0%,
    100%{

        transform:scale(1);

        opacity:.8;

    }

    50%{

        transform:scale(1.12);

        opacity:1;

    }

}


@keyframes glowPulse{

    0%,
    100%{

        opacity:.45;

        transform:
            translate(-50%,-50%)
            scale(.8);

    }

    50%{

        opacity:.85;

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

    }

}


@keyframes floatingLabel{

    0%,
    100%{

        transform:
            translateY(0);

    }

    50%{

        transform:
            translateY(-9px);

    }

}


@keyframes statusPulse{

    0%,
    100%{

        opacity:.35;

    }

    50%{

        opacity:1;

    }

}

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

@media(max-width:950px){

    .human-box{

        grid-template-columns:
            1fr;

        padding:
            60px 45px;

    }


    .human-copy{

        max-width:600px;

    }


    .human-visual{

        width:100%;

        min-height:500px;

        overflow:visible;

    }


    .orbit-scene{

        width:min(560px, 100%);

        height:auto;

        aspect-ratio:1 / 1;

    }

}



/* =====================================================
   MOBILE — FULLY RESPONSIVE ORBIT
===================================================== */

@media(max-width:600px){

    .human-ai{

        padding:70px 0;

        overflow:hidden;

    }


    .human-box{

        width:calc(100% - 24px);

        margin:0 auto;

        padding:42px 18px;

        border-radius:24px;

        overflow:hidden;

    }


    /* ---------------------------------------------
       TEXT
    --------------------------------------------- */

    .human-copy{

        width:100%;

        max-width:none;

    }


    .human-copy .kicker{

        margin-bottom:18px;

        font-size:8px;

        letter-spacing:1.6px;

    }


    .human-copy h2{

        max-width:100%;

        font-size:
            clamp(38px, 11vw, 46px);

        line-height:1;

        letter-spacing:-2.5px;

    }


    .human-copy p{

        max-width:100%;

        margin-top:22px;

        font-size:10.5px;

        line-height:1.8;

    }


    .human-status{

        flex-wrap:wrap;

        gap:8px;

        margin-top:28px;

        font-size:6.5px;

        letter-spacing:1.2px;

    }


    .status-line{

        width:22px;

    }



    /* ---------------------------------------------
       VISUAL CONTAINER
    --------------------------------------------- */

    .human-visual{

        width:100%;

        min-height:0;

        height:auto;

        margin-top:15px;

        padding:0;

        display:flex;

        align-items:center;

        justify-content:center;

        overflow:visible;

    }


    /* ---------------------------------------------
       RESPONSIVE ORBIT
    --------------------------------------------- */

    .orbit-scene{

        position:relative;

        width:100%;

        max-width:430px;

        height:auto;

        aspect-ratio:1 / 1;

        margin:0 auto;

    }


    .orbit-svg{

        position:absolute;

        inset:0;

        width:100%;

        height:100%;

        max-width:100%;

        display:block;

    }


    /* ---------------------------------------------
       GLOW
    --------------------------------------------- */

    .orbit-glow{

        width:45%;

        height:45%;

        filter:blur(45px);

    }


    /* ---------------------------------------------
       CENTER
    --------------------------------------------- */

    .orbit-center{

        width:20%;

        height:20%;

    }


    .center-symbol{

        font-size:
            clamp(28px, 9vw, 38px);

    }


    .orbit-center span{

        font-size:6px;

        letter-spacing:1.5px;

    }


    .orbit-center small{

        font-size:5px;

        letter-spacing:1px;

    }



    /* ---------------------------------------------
       FLOATING LABELS
    --------------------------------------------- */

    .orbit-label{

        max-width:30%;

        padding:6px 8px;

        gap:5px;

        white-space:nowrap;

        font-size:5.5px;

        letter-spacing:1px;

    }


    .label-dot{

        width:4px;

        height:4px;

        flex-shrink:0;

    }


    .label-human{

        left:0;

        top:42%;

    }


    .label-ai{

        right:0;

        top:24%;

    }


    .label-context{

        right:3%;

        bottom:12%;

    }


    .label-feedback{

        left:3%;

        bottom:12%;

    }

}



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

@media(max-width:380px){

    .human-ai{

        padding:55px 0;

    }


    .human-box{

        width:calc(100% - 16px);

        padding:35px 14px;

        border-radius:21px;

    }


    .human-copy h2{

        font-size:36px;

        letter-spacing:-2.2px;

    }


    .human-copy p{

        font-size:10px;

    }


    .human-status{

        font-size:6px;

    }


    .human-visual{

        margin-top:10px;

    }


    .orbit-scene{

        width:100%;

        max-width:330px;

    }


    .orbit-label{

        padding:5px 7px;

        font-size:5px;

    }


    .orbit-center{

        transform:
            translate(-50%,-50%)
            scale(.9);

    }

}

/* =====================================================
   EXTRA-SMALL PHONES
===================================================== */

@media(max-width:330px){

    .human-box{

        padding-left:12px;

        padding-right:12px;

    }


    .orbit-scene{

        max-width:290px;

    }


    .orbit-label{

        font-size:4.5px;

        padding:4px 6px;

    }


    .label-human{

        left:-2px;

    }


    .label-ai{

        right:-2px;

    }


    .label-context{

        right:1%;

    }


    .label-feedback{

        left:1%;

    }

}



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

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

    .orbit,
    .orbit-node,
    .core-halo,
    .core-circle,
    .center-symbol,
    .orbit-glow,
    .orbit-label,
    .status-dot{

        animation:none !important;

    }

}


/* =====================================================
   EVERMORE VISUAL EXPERIENCE CSS
===================================================== */

/* =====================================================
   ROOT
===================================================== */

.ever-visual-showcase{

    --ever-bg:#031426;
    --ever-surface:#071F2F;
    --ever-cyan:#39FF88;
    --ever-blue:#20D976;
    --ever-dark:#F4FFF8;
    --ever-muted:#8AA9A5;
    --ever-line:rgba(57,255,136,.12);

    position:relative;

    width:100%;

    overflow:hidden;

    padding:125px 0 135px;

    background:

        radial-gradient(
            circle at 18% 22%,
            rgba(57,255,136,.10),
            transparent 28%
        ),

        radial-gradient(
            circle at 85% 78%,
            rgba(32,217,118,.08),
            transparent 28%
        ),

        var(--ever-bg);

}



/* =====================================================
   BACKGROUND GRID
===================================================== */

.ever-bg-grid{

    position:absolute;

    inset:0;

    opacity:.32;

    pointer-events:none;

    background-image:

        linear-gradient(
            rgba(57,255,136,.035) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(57,255,136,.035) 1px,
            transparent 1px
        );

    background-size:
        70px 70px;

    mask-image:
        linear-gradient(
            to bottom,
            transparent,
            black 20%,
            black 80%,
            transparent
        );

}



/* =====================================================
   BACKGROUND GLOWS
===================================================== */

.ever-bg-glow{

    position:absolute;

    border-radius:50%;

    pointer-events:none;

    filter:blur(100px);

}


.ever-glow-a{

    width:350px;

    height:350px;

    left:-150px;

    top:25%;

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

}


.ever-glow-b{

    width:420px;

    height:420px;

    right:-180px;

    bottom:5%;

    background:
        rgba(32,217,118,.08);

}



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

.ever-visual-container{

    position:relative;

    width:min(
        1200px,
        calc(100% - 48px)
    );

    margin:auto;

}



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

.ever-visual-heading{

    position:relative;

    z-index:2;

    display:flex;

    justify-content:space-between;

    align-items:flex-end;

    gap:60px;

    margin-bottom:58px;

}


.ever-heading-left{

    max-width:720px;

}


.ever-visual-kicker{

    display:flex;

    align-items:center;

    gap:11px;

    color:var(--ever-cyan);

    font-size:10px;

    line-height:1;

    font-weight:800;

    letter-spacing:2.5px;

}


.ever-kicker-dot{

    position:relative;

    display:block;

    width:7px;

    height:7px;

    border-radius:50%;

    background:var(--ever-cyan);

    box-shadow:
        0 0 12px
        rgba(57,255,136,.55);

}


.ever-kicker-dot::after{

    content:"";

    position:absolute;

    inset:-5px;

    border:1px solid
        rgba(57,255,136,.3);

    border-radius:50%;

    animation:
        everPulse 2s infinite;

}


@keyframes everPulse{

    0%{
        transform:scale(.8);
        opacity:.8;
    }

    70%{
        transform:scale(1.35);
        opacity:0;
    }

    100%{
        opacity:0;
    }

}


.ever-visual-heading h2{

    margin:18px 0 0;

    color:var(--ever-dark);

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

    font-size:
        clamp(43px,6vw,78px);

    line-height:.93;

    letter-spacing:-4.5px;

    font-weight:700;

}


.ever-visual-heading h2 span{

    color:var(--ever-cyan);

    font-weight:500;

    text-shadow:
        0 0 28px
        rgba(57,255,136,.10);

}



/* =====================================================
   HEADING RIGHT
===================================================== */

.ever-heading-right{

    width:310px;

    display:flex;

    flex-direction:column;

    gap:18px;

}


.ever-heading-counter{

    display:flex;

    align-items:baseline;

    gap:8px;

}


.ever-heading-counter strong{

    color:var(--ever-dark);

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

    font-size:38px;

    letter-spacing:-2px;

}


.ever-heading-counter span{

    color:var(--ever-muted);

    font-size:10px;

    text-transform:uppercase;

    letter-spacing:1.5px;

}


.ever-heading-right p{

    margin:0;

    color:var(--ever-muted);

    font-size:12px;

    line-height:1.9;

}

/* =====================================================
   STAGE
===================================================== */

.ever-stage{

    position:relative;

    height:680px;

}



/* =====================================================
   ORBITS
===================================================== */

.ever-orbit{

    position:absolute;

    left:48%;

    top:50%;

    border:1px solid
        rgba(57,255,136,.11);

    border-radius:50%;

    pointer-events:none;

}


.ever-orbit-one{

    width:700px;

    height:700px;

    transform:
        translate(-50%,-50%)
        rotate(12deg);

}


.ever-orbit-two{

    width:550px;

    height:550px;

    border-style:dashed;

    transform:
        translate(-50%,-50%)
        rotate(-18deg);

}


.ever-orbit-dot{

    position:absolute;

    width:8px;

    height:8px;

    left:calc(48% + 347px);

    top:50%;

    border-radius:50%;

    background:var(--ever-cyan);

    box-shadow:
        0 0 0 7px
        rgba(57,255,136,.08),

        0 0 16px
        rgba(57,255,136,.45);

    animation:
        everOrbitFloat 5s linear infinite;

}


@keyframes everOrbitFloat{

    0%{
        transform:
            rotate(0deg)
            translateX(0);
    }

    25%{
        transform:
            translateX(-12px)
            translateY(-18px);
    }

    50%{
        transform:
            translateX(0)
            translateY(-28px);
    }

    75%{
        transform:
            translateX(12px)
            translateY(-18px);
    }

    100%{
        transform:
            translateX(0)
            translateY(0);
    }

}



/* =====================================================
   IMAGE STACK
===================================================== */

.ever-image-stack{

    position:absolute;

    width:660px;

    height:590px;

    left:47%;

    top:50%;

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

}



/* =====================================================
   IMAGE CARDS
===================================================== */

.ever-image-card{

    position:absolute;

    overflow:hidden;

    border-radius:32px;

    background:#071F2F;

    border:1px solid
        rgba(57,255,136,.14);

    box-shadow:

        0 40px 100px
        rgba(0,0,0,.30),

        0 0 35px
        rgba(57,255,136,.025);

}


.ever-image-card img{

    display:block;

    width:100%;

    height:100%;

    object-fit:cover;

}



/* =====================================================
   BACK CARD TWO
===================================================== */

.ever-card-back-two{

    width:430px;

    height:500px;

    left:-20px;

    top:45px;

    opacity:.48;

    filter:saturate(.65);

    transform:
        rotate(-8deg)
        translateX(-25px);

    transition:
        transform .8s
        cubic-bezier(.2,.8,.2,1);

}


.ever-image-stack:hover
.ever-card-back-two{

    transform:
        rotate(-11deg)
        translateX(-42px)
        translateY(5px);

}



/* =====================================================
   BACK CARD ONE
===================================================== */

.ever-card-back-one{

    width:470px;

    height:530px;

    right:-20px;

    top:28px;

    opacity:.7;

    filter:saturate(.8);

    transform:
        rotate(7deg)
        translateX(25px);

    transition:
        transform .8s
        cubic-bezier(.2,.8,.2,1);

}


.ever-image-stack:hover
.ever-card-back-one{

    transform:
        rotate(10deg)
        translateX(42px)
        translateY(4px);

}



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

.ever-card-main{

    z-index:5;

    width:510px;

    height:590px;

    left:70px;

    top:0;

    transform:rotate(-1deg);

    transition:
        transform .7s
        cubic-bezier(.2,.8,.2,1),
        box-shadow .5s;

}


.ever-card-main:hover{

    transform:
        rotate(0deg)
        translateY(-8px);

    box-shadow:

        0 50px 120px
        rgba(0,0,0,.38),

        0 0 45px
        rgba(57,255,136,.045);

}



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

.ever-image-wrapper{

    position:absolute;

    inset:0;

    overflow:hidden;

}


.ever-image-wrapper img{

    transition:

        opacity .35s ease,

        transform
        1.2s
        cubic-bezier(.2,.8,.2,1);

}


.ever-card-main:hover
.ever-image-wrapper img{

    transform:scale(1.06);

}



/* =====================================================
   IMAGE LIGHT
===================================================== */

.ever-image-light{

    position:absolute;

    width:280px;

    height:280px;

    top:-120px;

    right:-100px;

    border-radius:50%;

    background:
        rgba(57,255,136,.14);

    filter:blur(50px);

    pointer-events:none;

}



/* =====================================================
   IMAGE OVERLAY
===================================================== */

.ever-image-overlay{

    position:absolute;

    inset:0;

    background:

        linear-gradient(
            to bottom,
            rgba(3,20,38,.10),
            transparent 30%
        ),

        linear-gradient(
            to top,
            rgba(3,20,38,.96) 0%,
            rgba(3,20,38,.68) 35%,
            transparent 72%
        );

}



/* =====================================================
   TOP IMAGE UI
===================================================== */

.ever-image-top{

    position:absolute;

    top:24px;

    left:25px;

    right:25px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    z-index:4;

}


.ever-live-tag{

    display:flex;

    align-items:center;

    gap:7px;

    padding:8px 11px;

    border-radius:50px;

    color:white;

    background:
        rgba(4,27,42,.58);

    border:1px solid
        rgba(57,255,136,.18);

    backdrop-filter:blur(12px);

    font-size:8px;

    font-weight:800;

    letter-spacing:1.3px;

}


.ever-live-tag span{

    width:5px;

    height:5px;

    border-radius:50%;

    background:var(--ever-cyan);

    box-shadow:
        0 0 0 4px
        rgba(57,255,136,.12),

        0 0 10px
        rgba(57,255,136,.55);

}


.ever-image-index{

    display:flex;

    align-items:center;

    gap:8px;

    color:white;

    font-size:9px;

    font-weight:800;

    letter-spacing:1px;

}


.ever-image-index i{

    display:block;

    width:22px;

    height:1px;

    background:
        rgba(57,255,136,.55);

}



/* =====================================================
   IMAGE CONTENT
===================================================== */

.ever-image-content{

    position:absolute;

    z-index:4;

    left:30px;

    right:30px;

    bottom:30px;

}


.ever-image-label{

    margin-bottom:9px;

    color:var(--ever-cyan);

    font-size:9px;

    font-weight:800;

    letter-spacing:2.4px;

    text-shadow:
        0 0 18px
        rgba(57,255,136,.12);

}


.ever-image-content h3{

    max-width:420px;

    margin:0 0 10px;

    color:white;

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

    font-size:34px;

    line-height:1.02;

    letter-spacing:-1.8px;

    font-weight:700;

}


.ever-image-content p{

    max-width:370px;

    margin:0;

    color:#C3D8D5;

    font-size:11px;

    line-height:1.8;

}

/* =====================================================
   EXPLORE
===================================================== */

.ever-explore{

    display:flex;

    align-items:center;

    gap:12px;

    margin-top:21px;

    color:white;

    font-size:9px;

    font-weight:700;

}


.ever-explore-arrow{

    display:grid;

    place-items:center;

    width:30px;

    height:30px;

    border-radius:50%;

    background:var(--ever-cyan);

    color:#031426;

    box-shadow:
        0 0 18px
        rgba(57,255,136,.12);

    transition:.3s;

}


.ever-card-main:hover
.ever-explore-arrow{

    transform:
        translateX(5px)
        rotate(45deg);

}



/* =====================================================
   CORNER BUTTON
===================================================== */

.ever-corner-button{

    position:absolute;

    z-index:7;

    right:24px;

    bottom:25px;

    width:46px;

    height:46px;

    border:1px solid
        rgba(57,255,136,.22);

    border-radius:50%;

    display:grid;

    place-items:center;

    color:white;

    background:
        rgba(4,27,42,.52);

    backdrop-filter:blur(12px);

    cursor:pointer;

    transition:.35s;

}


.ever-corner-button:hover{

    background:var(--ever-cyan);

    color:#031426;

    border-color:var(--ever-cyan);

    box-shadow:
        0 0 22px
        rgba(57,255,136,.22);

    transform:
        rotate(45deg);

}



/* =====================================================
   SHINE EFFECT
===================================================== */

.ever-image-shine{

    position:absolute;

    z-index:6;

    top:-100%;

    left:-40%;

    width:35%;

    height:300%;

    transform:rotate(20deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(57,255,136,.12),
            transparent
        );

    pointer-events:none;

    transition:
        left 1s
        cubic-bezier(.2,.8,.2,1);

}


.ever-card-main:hover
.ever-image-shine{

    left:130%;

}



/* =====================================================
   SIDE NAVIGATION
===================================================== */

.ever-side-navigation{

    position:absolute;

    right:0;

    top:50%;

    transform:
        translateY(-50%);

    width:220px;

    display:flex;

    flex-direction:column;

    gap:5px;

    z-index:10;

}


.ever-nav-item{

    position:relative;

    display:grid;

    grid-template-columns:
        28px 1fr 0px;

    align-items:center;

    gap:7px;

    width:100%;

    padding:14px 15px;

    border:0;

    border-radius:13px;

    background:transparent;

    color:var(--ever-muted);

    text-align:left;

    cursor:pointer;

    transition:
        .35s
        cubic-bezier(.2,.8,.2,1);

}


.ever-nav-item:hover{

    background:
        rgba(57,255,136,.07);

    color:var(--ever-dark);

}


.ever-nav-item.active{

    grid-template-columns:
        28px 1fr 24px;

    background:
        rgba(7,31,47,.96);

    color:var(--ever-dark);

    border:1px solid
        rgba(57,255,136,.12);

    box-shadow:

        0 15px 35px
        rgba(0,0,0,.20),

        0 0 25px
        rgba(57,255,136,.035);

}


.ever-nav-number{

    color:var(--ever-cyan);

    font-size:9px;

    font-weight:800;

}


.ever-nav-text{

    font-size:11px;

    font-weight:700;

}


.ever-nav-line{

    width:20px;

    height:1px;

    background:var(--ever-cyan);

    transform:
        scaleX(0);

    transform-origin:right;

    transition:.35s;

}


.ever-nav-item.active
.ever-nav-line{

    transform:
        scaleX(1);

}



/* =====================================================
   STATUS CARD
===================================================== */

.ever-floating-status{

    position:absolute;

    z-index:12;

    left:0;

    top:70px;

    display:flex;

    align-items:center;

    gap:11px;

    padding:12px 15px;

    border:1px solid
        rgba(57,255,136,.14);

    border-radius:15px;

    background:
        rgba(7,31,47,.82);

    box-shadow:

        0 18px 45px
        rgba(0,0,0,.24),

        0 0 25px
        rgba(57,255,136,.035);

    backdrop-filter:blur(18px);

    animation:
        everFloat 5s ease-in-out infinite;

}


@keyframes everFloat{

    0%,
    100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-9px);
    }

}


.ever-status-indicator{

    width:8px;

    height:8px;

    border-radius:50%;

    background:var(--ever-cyan);

    box-shadow:
        0 0 0 5px
        rgba(57,255,136,.1),

        0 0 12px
        rgba(57,255,136,.55);

}


.ever-floating-status strong{

    display:block;

    color:var(--ever-dark);

    font-size:8px;

    letter-spacing:1.1px;

}


.ever-floating-status span{

    display:block;

    margin-top:3px;

    color:var(--ever-muted);

    font-size:8px;

}



/* =====================================================
   INFINITY CARD
===================================================== */

.ever-infinity-card{

    position:absolute;

    z-index:12;

    right:0;

    bottom:92px;

    display:flex;

    align-items:center;

    gap:10px;

    padding:13px 15px;

    border-radius:15px;

    background:
        rgba(7,31,47,.84);

    border:1px solid
        rgba(57,255,136,.14);

    box-shadow:

        0 18px 45px
        rgba(0,0,0,.24),

        0 0 25px
        rgba(57,255,136,.035);

    backdrop-filter:blur(18px);

    animation:
        everFloat 6s
        ease-in-out
        infinite;

}


.ever-infinity-icon{

    display:grid;

    place-items:center;

    width:34px;

    height:34px;

    border-radius:10px;

    background:
        rgba(57,255,136,.12);

    border:1px solid
        rgba(57,255,136,.18);

    color:var(--ever-cyan);

    font-size:23px;

    font-weight:500;

    box-shadow:
        0 0 18px
        rgba(57,255,136,.07);

}


.ever-infinity-card strong{

    display:block;

    color:var(--ever-dark);

    font-size:8px;

    letter-spacing:1.2px;

}


.ever-infinity-card span{

    display:block;

    margin-top:2px;

    color:var(--ever-cyan);

    font-size:8px;

    letter-spacing:1.2px;

    font-weight:800;

}



/* =====================================================
   CONTROLS
===================================================== */

.ever-controls{

    position:absolute;

    z-index:15;

    left:0;

    bottom:10px;

    display:flex;

    align-items:center;

    gap:20px;

}


.ever-progress-wrapper{

    width:200px;

}


.ever-progress-track{

    width:100%;

    height:2px;

    overflow:hidden;

    background:
        rgba(57,255,136,.12);

}


.ever-progress-track span{

    display:block;

    width:20%;

    height:100%;

    background:var(--ever-cyan);

    box-shadow:
        0 0 10px
        rgba(57,255,136,.35);

    transition:
        width .55s
        cubic-bezier(.2,.8,.2,1);

}


.ever-progress-label{

    display:flex;

    justify-content:space-between;

    margin-top:8px;

    color:var(--ever-muted);

    font-size:7px;

    font-weight:800;

    letter-spacing:1.5px;

}


.ever-control-buttons{

    display:flex;

    gap:7px;

}


.ever-control-buttons button{

    display:grid;

    place-items:center;

    width:40px;

    height:40px;

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

    border-radius:50%;

    background:
        rgba(7,31,47,.88);

    color:var(--ever-dark);

    cursor:pointer;

    transition:.3s;

}


.ever-control-buttons button:hover{

    background:var(--ever-cyan);

    color:#031426;

    border-color:var(--ever-cyan);

    box-shadow:
        0 0 20px
        rgba(57,255,136,.15);

    transform:translateY(-3px);

}



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

.ever-mobile-navigation{

    display:none;

}



/* =====================================================
   RESPONSIVE — 1100
===================================================== */

@media(max-width:1100px){

    .ever-side-navigation{

        right:-15px;

        width:185px;

    }


    .ever-image-stack{

        left:44%;

        transform:
            translate(-50%,-50%)
            scale(.9);

    }


    .ever-floating-status{

        left:-5px;

    }


    .ever-infinity-card{

        right:-5px;

    }

}



/* =====================================================
   RESPONSIVE — 900
===================================================== */

@media(max-width:900px){

    .ever-visual-heading{

        align-items:flex-start;

        flex-direction:column;

        gap:22px;

    }


    .ever-heading-right{

        width:100%;

        max-width:430px;

    }


    .ever-stage{

        height:630px;

    }


    .ever-side-navigation{

        display:none;

    }


    .ever-image-stack{

        left:50%;

        transform:
            translate(-50%,-50%)
            scale(.9);

    }


    .ever-floating-status{

        left:10px;

        top:45px;

    }


    .ever-infinity-card{

        right:10px;

        bottom:85px;

    }


    .ever-controls{

        left:50%;

        transform:
            translateX(-50%);

    }

}



/* =====================================================
   RESPONSIVE — 650
===================================================== */

@media(max-width:650px){

    .ever-visual-showcase{

        padding:
            85px 0
            95px;

    }


    .ever-visual-container{

        width:
            calc(100% - 30px);

    }


    .ever-visual-heading{

        margin-bottom:20px;

    }


    .ever-visual-heading h2{

        font-size:43px;

        letter-spacing:-2.8px;

        line-height:.96;

    }


    .ever-visual-kicker{

        font-size:8px;

        letter-spacing:1.8px;

    }


    .ever-heading-right{

        max-width:100%;

    }


    .ever-heading-counter{

        display:none;

    }


    .ever-heading-right p{

        font-size:11px;

        line-height:1.8;

    }


    .ever-stage{

        height:540px;

    }


    .ever-orbit{

        display:none;

    }


    .ever-orbit-dot{

        display:none;

    }


    .ever-image-stack{

        width:100%;

        height:490px;

        left:50%;

        top:48%;

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

    }


    .ever-card-main{

        width:84%;

        height:460px;

        left:8%;

    }


    .ever-card-back-one{

        width:74%;

        height:415px;

        right:-2%;

        top:22px;

        transform:
            rotate(6deg)
            translateX(5px);

    }


    .ever-card-back-two{

        width:72%;

        height:395px;

        left:-1%;

        top:35px;

        transform:
            rotate(-6deg)
            translateX(-5px);

    }


    .ever-floating-status{

        left:5px;

        top:20px;

        transform:scale(.85);

        transform-origin:left top;

    }


    .ever-infinity-card{

        right:5px;

        bottom:60px;

        transform:scale(.82);

        transform-origin:right bottom;

    }


    .ever-image-top{

        top:18px;

        left:18px;

        right:18px;

    }


    .ever-image-content{

        left:20px;

        right:20px;

        bottom:22px;

    }


    .ever-image-content h3{

        font-size:27px;

        letter-spacing:-1.3px;

    }


    .ever-image-content p{

        font-size:10px;

        line-height:1.65;

    }


    .ever-explore{

        margin-top:16px;

    }


    .ever-corner-button{

        width:40px;

        height:40px;

        right:18px;

        bottom:18px;

    }


    .ever-controls{

        bottom:0;

    }


    .ever-progress-wrapper{

        width:135px;

    }


    .ever-control-buttons button{

        width:36px;

        height:36px;

    }


    .ever-mobile-navigation{

        display:flex;

        justify-content:center;

        align-items:center;

        gap:6px;

        margin-top:4px;

    }


    .ever-mobile-dot{

        width:7px;

        height:7px;

        padding:0;

        border:0;

        border-radius:20px;

        background:
            rgba(138,169,165,.35);

        cursor:pointer;

        transition:.35s;

    }


    .ever-mobile-dot.active{

        width:24px;

        background:var(--ever-cyan);

        box-shadow:
            0 0 12px
            rgba(57,255,136,.22);

    }

}



/* =====================================================
   RESPONSIVE — 420
===================================================== */

@media(max-width:420px){

    .ever-visual-heading h2{

        font-size:38px;

    }


    .ever-stage{

        height:510px;

    }


    .ever-image-stack{

        height:460px;

    }


    .ever-card-main{

        height:435px;

    }


    .ever-card-back-one{

        height:390px;

    }


    .ever-card-back-two{

        height:375px;

    }


    .ever-image-content h3{

        font-size:24px;

    }


    .ever-image-content p{

        max-width:270px;

    }


    .ever-live-tag{

        font-size:7px;

        padding:7px 9px;

    }


    .ever-image-index{

        font-size:8px;

    }


    .ever-infinity-card{

        display:none;

    }

}



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

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

    .ever-kicker-dot::after,
    .ever-floating-status,
    .ever-infinity-card,
    .ever-orbit-dot{

        animation:none;

    }

    .ever-image-card,
    .ever-image-card img,
    .ever-nav-item,
    .ever-control-buttons button{

        transition:none;

    }

}


/* =====================================================
   EVERMORE FAQ CSS
===================================================== */

.ever-faq{

    --faq-bg:#031426;
    --faq-white:#071F2F;
    --faq-dark:#F4FFF8;
    --faq-blue:#20D976;
    --faq-cyan:#39FF88;
    --faq-muted:#8AA9A5;
    --faq-line:rgba(57,255,136,.12);

    position:relative;

    overflow:hidden;

    padding:125px 0 110px;

    background:var(--faq-bg);

}


.ever-faq-grid{

    position:absolute;

    inset:0;

    opacity:.25;

    pointer-events:none;

    background-image:

        linear-gradient(
            rgba(57,255,136,.035) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(57,255,136,.035) 1px,
            transparent 1px
        );

    background-size:70px 70px;

    mask-image:
        linear-gradient(
            to bottom,
            transparent,
            black 20%,
            black 80%,
            transparent
        );

}


.ever-faq-glow{

    position:absolute;

    width:520px;

    height:520px;

    right:-260px;

    top:5%;

    border-radius:50%;

    background:
        rgba(57,255,136,.13);

    filter:blur(100px);

    pointer-events:none;

}



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

.ever-faq-container{

    position:relative;

    z-index:2;

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

    margin:auto;

}



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

.ever-faq-header{

    display:grid;

    grid-template-columns:
        1.25fr .75fr;

    gap:80px;

    align-items:end;

    margin-bottom:75px;

}


.ever-faq-kicker{

    display:flex;

    align-items:center;

    gap:10px;

    color:var(--faq-cyan);

    font-size:9px;

    font-weight:800;

    letter-spacing:2.3px;

}


.ever-faq-kicker span{

    width:7px;

    height:7px;

    border-radius:50%;

    background:var(--faq-cyan);

    box-shadow:
        0 0 0 6px
        rgba(57,255,136,.08),

        0 0 12px
        rgba(57,255,136,.45);

}


.ever-faq-heading h2{

    max-width:700px;

    margin:20px 0 0;

    color:var(--faq-dark);

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

    font-size:
        clamp(45px,6vw,76px);

    line-height:.94;

    letter-spacing:-4px;

    font-weight:700;

}


.ever-faq-heading h2 em{

    color:var(--faq-cyan);

    font-style:normal;

    font-weight:500;

    text-shadow:
        0 0 25px
        rgba(57,255,136,.10);

}


.ever-faq-intro{

    max-width:320px;

}


.ever-faq-intro p{

    margin:0 0 24px;

    color:var(--faq-muted);

    font-size:12px;

    line-height:1.9;

}


.ever-faq-join{

    display:inline-flex;

    align-items:center;

    gap:10px;

    color:var(--faq-dark);

    text-decoration:none;

    font-size:10px;

    font-weight:800;

}


.ever-faq-join i{

    display:grid;

    place-items:center;

    width:31px;

    height:31px;

    border-radius:50%;

    background:
        rgba(57,255,136,.12);

    border:1px solid
        rgba(57,255,136,.16);

    color:var(--faq-cyan);

    transition:.3s;

}


.ever-faq-join:hover i{

    transform:
        rotate(45deg);

}



/* =====================================================
   MAIN FAQ LAYOUT
===================================================== */

.ever-faq-layout{

    display:grid;

    grid-template-columns:
        230px 1fr;

    gap:70px;

}



/* =====================================================
   SIDE
===================================================== */

.ever-faq-side{

    position:relative;
    padding-top:10px;

}

.ever-faq-side-number{

    color:var(--faq-blue);

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

    font-size:72px;
    line-height:1;
    letter-spacing:-5px;
    opacity:.14;

}

.ever-faq-side-line{

    width:45px;
    height:1px;
    margin:24px 0;

    background:var(--faq-blue);

}

.ever-faq-side span{

    display:block;

    color:var(--faq-muted);

    font-size:8px;
    letter-spacing:2px;
    font-weight:800;

}

.ever-faq-side strong{

    display:block;
    margin-top:5px;

    color:var(--faq-dark);

    font-size:11px;
    letter-spacing:2px;

}

.ever-faq-side p{

    max-width:190px;
    margin:22px 0 0;

    color:var(--faq-muted);

    font-size:10px;
    line-height:1.8;

}


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

.ever-faq-list{

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

}


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

.ever-faq-item{

    border-bottom:1px solid var(--faq-line);
    transition:.4s;

}

.ever-faq-item.active{

    background:
        rgba(57,255,136,.045);

}


/* =====================================================
   QUESTION
===================================================== */

.ever-faq-question{

    position:relative;

    display:grid;

    grid-template-columns:
        50px 1fr 48px;

    align-items:center;

    gap:20px;

    width:100%;
    min-height:92px;

    padding:0 18px;

    border:0;

    background:transparent;

    color:var(--faq-dark);

    text-align:left;

    cursor:pointer;

}

.ever-faq-number{

    color:var(--faq-blue);

    font-size:9px;
    font-weight:800;
    letter-spacing:1px;

    opacity:.75;

}

.ever-faq-question-text{

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

    font-size:16px;
    font-weight:650;
    letter-spacing:-.3px;

    transition:.3s;

}

.ever-faq-item:hover
.ever-faq-question-text{

    color:var(--faq-cyan);

}


/* =====================================================
   ICON
===================================================== */

.ever-faq-icon{

    display:grid;
    place-items:center;

    width:38px;
    height:38px;

    margin-left:auto;

    border:1px solid var(--faq-line);
    border-radius:50%;

    color:var(--faq-cyan);

    background:#071F2F;

    transition:
        transform .45s
        cubic-bezier(.2,.8,.2,1),
        background .3s,
        color .3s;

}

.ever-faq-icon i{

    transition:
        transform .4s;

}

.ever-faq-item.active
.ever-faq-icon{

    background:var(--faq-cyan);

    color:#031426;

    transform:
        rotate(45deg);

}


/* =====================================================
   ANSWER
===================================================== */

.ever-faq-answer{

    display:grid;

    grid-template-rows:0fr;

    transition:
        grid-template-rows
        .5s
        cubic-bezier(.2,.8,.2,1);

}

.ever-faq-answer > div{

    overflow:hidden;
    min-height:0;

}

.ever-faq-item.active
.ever-faq-answer{

    grid-template-rows:1fr;

}

.ever-faq-answer > div{

    padding:
        0 85px
        0 88px;

}

.ever-faq-item.active
.ever-faq-answer > div{

    padding-bottom:30px;

}

.ever-faq-answer p{

    max-width:650px;
    margin:0 0 12px;

    color:var(--faq-muted);

    font-size:11px;
    line-height:1.9;

}

.ever-faq-answer p:last-child{

    margin-bottom:0;

}

.ever-faq-answer strong{

    color:var(--faq-dark);

}


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

.ever-faq-cta{

    position:relative;

    display:flex;
    align-items:center;

    gap:22px;

    margin-top:75px;
    padding:28px 30px;

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

    border-radius:25px;

    background:
        radial-gradient(
            circle at 15% 50%,
            rgba(57,255,136,.12),
            transparent 35%
        ),
        linear-gradient(
            105deg,
            rgba(7,31,47,.98),
            rgba(4,38,43,.96)
        );

    box-shadow:
        0 25px 70px
        rgba(0,0,0,.28),
        0 0 40px
        rgba(57,255,136,.035);

}

.ever-faq-cta-symbol{

    display:grid;
    place-items:center;

    flex:0 0 auto;

    width:55px;
    height:55px;

    border-radius:16px;

    background:var(--faq-cyan);

    color:#031426;

    font-size:32px;

    box-shadow:
        0 0 25px
        rgba(57,255,136,.16);

}

.ever-faq-cta-content{

    flex:1;

}

.ever-faq-cta-content span{

    display:block;

    margin-bottom:5px;

    color:var(--faq-cyan);

    font-size:8px;
    font-weight:800;
    letter-spacing:2px;

}

.ever-faq-cta-content h3{

    margin:0;

    color:var(--faq-dark);

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

    font-size:22px;
    letter-spacing:-.7px;

}

.ever-faq-cta-button{

    display:flex;
    align-items:center;

    gap:12px;

    padding:11px 11px 11px 20px;

    border-radius:50px;

    background:var(--faq-cyan);

    color:#031426;

    text-decoration:none;

    font-size:10px;
    font-weight:800;

    transition:.35s;

}

.ever-faq-cta-button i{

    display:grid;
    place-items:center;

    width:34px;
    height:34px;

    border-radius:50%;

    background:#031426;

    color:var(--faq-cyan);

    transition:.35s;

}

.ever-faq-cta-button:hover{

    transform:
        translateY(-3px);

    box-shadow:
        0 15px 30px
        rgba(57,255,136,.12);

}

.ever-faq-cta-button:hover i{

    transform:
        rotate(45deg);

}

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

@media(max-width:850px){

    .ever-faq-header{

        grid-template-columns:1fr;

        gap:25px;

    }


    .ever-faq-intro{

        max-width:500px;

    }


    .ever-faq-layout{

        grid-template-columns:1fr;

        gap:25px;

    }


    .ever-faq-side{

        display:none;

    }

}



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

@media(max-width:600px){

    .ever-faq{

        padding:
            85px 0
            80px;

    }


    .ever-faq-container{

        width:
            calc(100% - 30px);

    }


    .ever-faq-header{

        margin-bottom:48px;

    }


    .ever-faq-heading h2{

        font-size:43px;

        line-height:.96;

        letter-spacing:-2.8px;

    }


    .ever-faq-intro p{

        font-size:11px;

    }


    .ever-faq-question{

        grid-template-columns:
            30px 1fr 38px;

        gap:10px;

        min-height:78px;

        padding:0 8px;

    }


    .ever-faq-question-text{

        font-size:13px;

        line-height:1.35;

    }


    .ever-faq-number{

        font-size:8px;

    }


    .ever-faq-icon{

        width:34px;

        height:34px;

    }


    .ever-faq-answer > div{

        padding:
            0 40px;

    }


    .ever-faq-item.active
    .ever-faq-answer > div{

        padding-bottom:24px;

    }


    .ever-faq-answer p{

        font-size:10px;

        line-height:1.8;

    }


    .ever-faq-cta{

        flex-wrap:wrap;

        gap:15px;

        margin-top:55px;

        padding:22px;

    }


    .ever-faq-cta-symbol{

        width:46px;

        height:46px;

        border-radius:13px;

        font-size:26px;

    }


    .ever-faq-cta-content{

        width:
            calc(100% - 65px);

    }


    .ever-faq-cta-content h3{

        font-size:18px;

    }


    .ever-faq-cta-button{

        width:100%;

        justify-content:space-between;

        padding-left:18px;

    }

}



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

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

    .ever-faq-answer,
    .ever-faq-icon,
    .ever-faq-cta-button,
    .ever-faq-join i{

        transition:none;

    }

}



/* =====================================================
   TEXT SELECTION
===================================================== */

body{

    user-select:none;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;

}