/* ================================================= */

/* ============ CODE STARTS HERE =================== */

/* ================================================= */



/* src/styles/04-sections.css */



/* =========================

   GLOBAL & CURSOR

   ========================= */

#cursorCanvas {

    position: fixed;
    top: 0;
    left: 0;

    width: 100%;

    height: 100%;

    pointer-events: none;

    z-index: 9999;

}



@media (hover: none) {

    #cursorCanvas {

        display: none;

    }

}



/* =========================

   HERO SECTION (Desktop & Mobile)

   ========================= */

.hero-container-one {

    position: relative;

    width: 100%;

    --evmt-ink: #020408;

    background-color: var(--evmt-ink);

    overflow: hidden;

    height: 100vh;

    min-height: 750px;

    display: flex;

    align-items: center;

    margin-top: 0;

}



.hero-bg-layer {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    z-index: 1;

    background-image:
        linear-gradient(90deg, rgba(2, 4, 8, 0.8) 0%, rgba(2, 4, 8, 0.4) 45%, transparent 100%),
        url("../assets/img/hero/desktop-hero-background-evmt-web.png");

    background-repeat: no-repeat;

    background-size: cover;

    background-position: right center;

}



@keyframes kenBurnsZoom {

    from {

        transform: scale(1);

    }



    to {

        transform: scale(1.08);

    }

}



#evmt-hero-canvas {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    pointer-events: none;

    z-index: 2;

    mix-blend-mode: screen;

}



.evmt-desktop-clock {

    display: none;

}



@media (min-width: 1024px) {

    .evmt-desktop-clock {

        display: flex;

        flex-direction: column;

        position: absolute;

        bottom: 140px;

        right: 40px;

        z-index: 20;

        pointer-events: none;

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

        backdrop-filter: blur(12px);

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

        border-radius: 12px;

        padding: 14px 20px;

        text-align: right;

        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);

    }



    .evmt-clock-time {

        font-family: var(--font-primary);

        font-size: 22px;

        font-weight: 700;

        color: #fff;

        letter-spacing: 0.5px;

    }



    .evmt-clock-date {

        font-family: var(--font-secondary);

        font-size: 11px;

        font-weight: 600;

        text-transform: uppercase;

        letter-spacing: 1.5px;

        color: var(--evmt-gold);

        margin-top: 4px;

    }

}



.evmt-pro-wrapper {

    position: relative;

    z-index: 5;

    width: 100%;

    max-width: var(--max-width);

    margin: 0 auto;

    padding: 0 30px;

    height: 100%;

    display: flex;

    flex-direction: column;

    justify-content: center;

}



.evmt-content-col {

    max-width: 720px;

    margin-top: -40px;

}



.evmt-tag {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 8px 14px;

    margin-bottom: 24px;

    width: fit-content;

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

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

    border-radius: 8px;

    font-family: var(--font-secondary);

    font-size: 11px;

    font-weight: 600;

    letter-spacing: 1.2px;

    text-transform: uppercase;

    color: rgba(255, 255, 255, 0.95);

    backdrop-filter: blur(10px);

}



.evmt-tag::before {

    content: "";

    width: 6px;

    height: 6px;

    border-radius: 50%;

    background: var(--evmt-gold);

    box-shadow: 0 0 12px rgba(211, 160, 47, 0.6);

}



.evmt-headline {

    font-family: var(--font-primary);

    font-size: clamp(36px, 4vw, 52px);

    line-height: 1.15;

    font-weight: 700;

    letter-spacing: -0.02em;

    color: #fff;

    margin: 0 0 24px 0;

}



.evmt-gold-text {

    background: linear-gradient(to right, #bf953f 0%, #fcf6ba 25%, #b38728 50%, #fbf5b7 75%, #aa771c 100%);

    background-size: 220% auto;

    -webkit-background-clip: text;

    background-clip: text;

    -webkit-text-fill-color: transparent;

    animation: evmtShine 7s linear infinite;

}



@keyframes evmtShine {

    to {

        background-position: 220% center;

    }

}



.evmt-desc {

    font-family: var(--font-secondary);

    font-size: 18px;

    line-height: 1.6;

    font-weight: 400;

    color: rgba(255, 255, 255, 0.85);

    max-width: 580px;

    margin: 0 0 40px 0;

}



.evmt-actions {

    display: flex;

    gap: 20px;

    margin-bottom: 0;

}



.evmt-btn {

    position: relative;

    overflow: hidden;

    height: 54px;

    padding: 0 36px;

    border-radius: 999px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    font-family: var(--font-secondary);

    font-size: 14px;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 1px;

    text-decoration: none;

    transition: transform .3s ease;

    background: transparent;

    z-index: 1;

    border: none !important;

}



.evmt-btn::before {

    content: "";

    position: absolute;

    inset: -50%;

    z-index: -2;

    background: conic-gradient(from 0deg, transparent 0deg, transparent 100deg, #D3A02F 180deg, #FFFFFF 220deg, transparent 300deg);

    animation: evmtBeam 6s linear infinite;

    /* Smoother, slightly faster linear rotation */

    top: -50%;

    left: -50%;

    width: 200%;

    height: 200%;

}



.evmt-btn::after {

    content: "";

    position: absolute;

    inset: 1.5px;

    background: #050810;

    border-radius: 999px;

    z-index: -1;

    /* Removed glass/gradient effects as per strict request */

}



.evmt-btn svg {

    width: 16px;

    height: 16px;

    fill: currentColor;

    transition: transform .3s ease;

}



.evmt-btn:hover svg {

    transform: translateX(4px);

}



.evmt-btn:hover {

    transform: scale(1.02);

    /* translateY(-2px) removed to match header */

}



.evmt-btn-gold {

    --btn-color: #D3A02F;

    color: #D3A02F;

}



/* Exact match of Header CTA Gradient Pattern */

.evmt-btn-gold::before {

    content: "";

    position: absolute;

    inset: -100%;

    z-index: -2;

    background: conic-gradient(from 0deg, transparent 0deg, transparent 60deg, #D3A02F 100deg, #ffffff 120deg, #D3A02F 140deg, transparent 180deg);

    animation: evmtBeam 3s linear infinite;

    top: -50%;

    left: -50%;

    width: 200%;

    height: 200%;

}



.evmt-btn-gold:hover {

    color: #fff;

    --btn-color: #fff;

    box-shadow: 0 0 25px rgba(240, 208, 117, 0.25);

    /* Exact match header hover */

}



.evmt-btn-white {

    --btn-color: #4facfe;

    color: #fff;

}



/* Exact match of Header CTA Gradient Pattern (White Version) */

.evmt-btn-white::before {

    content: "";

    position: absolute;

    inset: -100%;

    z-index: -2;

    background: conic-gradient(from 0deg, transparent 0deg, transparent 60deg, #ffffff 100deg, #ffffff 120deg, #ffffff 140deg, transparent 180deg);

    animation: evmtBeam 3s linear infinite;

    top: -50%;

    left: -50%;

    width: 200%;

    height: 200%;

}



.evmt-btn-white:hover {

    --btn-color: #fff;

    box-shadow: 0 0 25px rgba(255, 255, 255, 0.4);

    /* White glow */

}



@keyframes evmtBeam {

    0% {

        transform: rotate(0deg);

    }



    100% {

        transform: rotate(360deg);

    }

}



.evmt-trusted-section {

    margin-top: 80px;

    width: 100%;

    max-width: 600px;

}



.evmt-trusted-heading {

    font-family: var(--font-secondary);

    font-size: 11px;

    font-weight: 600;

    letter-spacing: 1.5px;

    text-transform: uppercase;

    margin-bottom: 16px;

    color: rgba(255, 255, 255, 0.4);

}



.evmt-logo-carousel-wrapper {

    position: relative;

    overflow: hidden;

    width: 100%;

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

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

    border-radius: 12px;

    backdrop-filter: blur(8px);

    padding: 18px 0;

    mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);

    -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);

}



.evmt-logo-track {

    display: flex;

    align-items: center;

    width: max-content;

    animation: evmtScroll 30s linear infinite;

}



@keyframes evmtScroll {

    0% {

        transform: translateX(0);

    }



    100% {

        transform: translateX(-50%);

    }

}



.evmt-logo-item {

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 0 40px;

}



.evmt-logo-item img {

    height: 26px;

    width: auto;

    object-fit: contain;

    filter: grayscale(100%) brightness(1.8) contrast(0.8);

    opacity: 0.5;

    transition: 0.3s;

}



.evmt-logo-item img:hover {

    filter: grayscale(0%) brightness(1);

    opacity: 1;

    transform: scale(1.1);

}



@media (max-width: 768px) {

    .hero-container-one {

        height: auto !important;

        min-height: 100dvh !important;

        /* Revert to viewport height so Trusted is visible */

        display: flex !important;

        flex-direction: column;

        justify-content: space-between !important;

        /* Push Trusted to bottom */

        padding-top: 90px !important;

        padding-bottom: 20px !important;

        /* Add padding for safe area */

        margin-top: -25px !important;

        position: relative !important;

    }



    .hero-bg-layer {

        background-image:

            linear-gradient(180deg, rgba(2, 4, 8, 0.40) 0%, rgba(2, 4, 8, 0.20) 40%, rgba(2, 4, 8, 0.00) 100%),

            url("../assets/img/hero/mobile-hero-background-evmt.png") !important;

        background-position: center 35% !important;

        background-size: cover !important;

        position: absolute !important;

        /* Ensure it stays out of flow */

        top: 0;

        left: 0;

        width: 100%;

        height: 100%;

        z-index: 1;

        min-height: 0 !important;

        /* Reset accidental min-height */

        display: block !important;

        /* Reset accidental flex */

    }



    /* Reset Trusted Section Margin since container height does the work */

    .evmt-trusted-section {

        margin-top: 0 !important;

        padding-bottom: 20px !important;

        position: relative !important;

        z-index: 2;

    }



    /* Adjust hero content to compensate for the push */

    .hero-container-one .evmt-pro-wrapper {

        margin-bottom: 20px;

    }



    .evmt-pro-wrapper {

        padding: 0 20px;

        position: static !important;

        height: auto;

        display: flex;

        flex-direction: column;

        justify-content: flex-start;

        padding-bottom: 0;

    }



    .evmt-content-col {

        padding-bottom: 0;

        margin-top: 0;

    }



    .evmt-headline {

        font-size: 32px !important;

        line-height: 1.22;

        margin-bottom: 15px;

        font-weight: 800 !important;

    }



    .evmt-desc {

        font-size: 14px !important;

        line-height: 1.55;

        margin-bottom: 25px;

    }



    .evmt-actions {

        width: 100%;

        display: flex;

        justify-content: flex-start;

        gap: 0;

    }



    .evmt-actions a:first-child {

        display: none !important;

    }



    .evmt-actions a:last-child {

        width: auto !important;

        min-width: 150px !important;

        height: 44px !important;

        padding: 0 20px !important;

        font-size: 13px !important;

        font-weight: 700 !important;

    }



    .evmt-actions a:last-child::after {

        background: rgba(21, 35, 62, 0.95) !important;

        backdrop-filter: blur(4px);

    }



    .evmt-trusted-section {

        position: absolute !important;

        bottom: 0 !important;

        left: 0 !important;

        width: 100% !important;

        margin: 0 !important;

        padding: 0 20px 30px 20px !important;

        box-sizing: border-box;

        z-index: 50;

        max-width: none !important;

        background: transparent !important;

    }



    .evmt-trusted-heading {

        font-size: 10px;

        margin-bottom: 10px;

        text-align: center !important;

        width: 100%;

        background: linear-gradient(to right, #bf953f 0%, #fcf6ba 25%, #b38728 50%, #fbf5b7 75%, #aa771c 100%);

        background-size: 200% auto;

        -webkit-background-clip: text;

        background-clip: text;

        -webkit-text-fill-color: transparent;

        color: transparent;

        font-weight: 700;

        letter-spacing: 1px;

    }



    .evmt-logo-carousel-wrapper {

        padding: 15px 0 !important;

        background: rgba(255, 255, 255, 0.03) !important;

        border: 1px solid rgba(255, 255, 255, 0.08) !important;

        border-radius: 50px !important;

        backdrop-filter: blur(10px) !important;

        -webkit-backdrop-filter: blur(10px) !important;

        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2) !important;

    }



    .evmt-logo-item {

        padding: 0;

        width: 28vw;

        flex: 0 0 28vw;

        justify-content: center;

    }



    .evmt-logo-item img {

        height: 22px;

        opacity: 0.92;

        max-width: 100%;

    }



    .evmt-logo-track {

        animation-duration: 14s;

    }

}



/* ================================================= */

/* ============ ABOUT SECTION START ================ */

/* ================================================= */

.eagle-ab-sec {

    position: relative;

    background-color: #020408;

    /* Dark Ink */

    background-image:

        radial-gradient(circle at 50% -10%, #0a1a3a 0%, transparent 70%),

        radial-gradient(circle at 80% 20%, rgba(6, 15, 31, 0.4) 0%, transparent 50%),

        linear-gradient(180deg, #020408 0%, #060F1F 100%);

    color: #fff;

    padding: 80px 0;

    /* REDUCED PADDING */

    overflow: hidden;

    margin-top: 0;

    cursor: none;

}



#bgCanvas {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    z-index: 1;

    pointer-events: none;

    opacity: 0.5;

}



.eagle-ab-burst {

    position: absolute;

    width: 900px;

    height: 900px;

    background: radial-gradient(circle, rgba(0, 36, 114, 0.4) 0%, rgba(0, 242, 255, 0.15) 30%, rgba(10, 36, 114, 0.05) 60%, transparent 85%);

    pointer-events: none;

    z-index: 2;

    opacity: 0;

    filter: blur(90px);

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

    mix-blend-mode: screen;

}



.eagle-ab-burst.active {

    animation: eagleBurstFlash 4s ease-out forwards;

}



@keyframes eagleBurstFlash {

    0% {

        opacity: 0;

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

    }



    15% {

        opacity: 1;

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

    }



    100% {

        opacity: 0;

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

    }

}



.eagle-ab-container {

    max-width: var(--max-width);

    margin: 0 auto;

    padding: 0 40px;

    display: flex;

    align-items: center;

    gap: 60px;

    position: relative;

    z-index: 5;

}



.eagle-ab-content {

    flex: 0 0 55%;

    max-width: 620px;

    position: relative;

    z-index: 10;

}



.eagle-ab-tag {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 7px 14px;

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

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

    border-radius: 10px;

    font-family: var(--font-secondary);

    font-size: 11px;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 1.1px;

    margin-bottom: 24px;

    color: rgba(255, 255, 255, 0.95);

    backdrop-filter: blur(12px);

}



.eagle-ab-tag::before {

    content: "";

    width: 6px;

    height: 6px;

    border-radius: 50%;

    background: var(--evmt-gold);

    box-shadow: 0 0 12px rgba(211, 160, 47, 0.8);

}



.eagle-ab-content h2 {

    font-family: var(--font-primary);

    font-size: clamp(30px, 3.4vw, 46px);

    font-weight: 700;

    line-height: 1.15;

    letter-spacing: -0.02em;

    margin: 0 0 20px 0;

}



.eagle-ab-highlight {

    background: linear-gradient(to right, #bf953f 0%, #fcf6ba 25%, #b38728 50%, #fbf5b7 75%, #aa771c 100%);

    background-size: 220% auto;

    -webkit-background-clip: text;

    background-clip: text;

    -webkit-text-fill-color: transparent;

    animation: evmtShine 7s linear infinite;

    display: inline-block;

}



.eagle-ab-sub {

    font-family: var(--font-secondary);

    font-size: 18px;

    line-height: 1.6;

    margin-bottom: 30px;

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

    text-shadow: 0 0 20px rgba(240, 208, 117, 0.2);

}



.eagle-ab-body {

    font-family: var(--font-secondary);

    font-size: 16px;

    line-height: 1.75;

    color: rgba(255, 255, 255, 0.85);

}



.eagle-ab-body p {

    margin-bottom: 22px;

}



.eagle-ab-stats {

    display: grid;

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

    gap: 16px;

    margin-top: 40px;

}



.eagle-ab-card {

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

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

    padding: 22px 10px;

    border-radius: 12px;

    text-align: center;

    transition: 0.4s ease;

}



.eagle-ab-card:hover {

    transform: translateY(-3px);

    border-color: rgba(211, 160, 47, 0.25);

}



.eagle-ab-val {

    display: block;

    font-family: var(--font-primary);

    font-size: 28px;

    font-weight: 800;

    background: linear-gradient(135deg, #ffffff, var(--evmt-gold));

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

}



.eagle-ab-label {

    font-family: var(--font-secondary);

    font-size: 11px;

    text-transform: uppercase;

    letter-spacing: 1px;

    color: rgba(255, 255, 255, 0.4);

}



.eagle-ab-cta {

    position: relative;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    height: 60px;

    padding: 0 48px;

    text-decoration: none;

    font-family: var(--font-secondary);

    font-size: 14px;

    font-weight: 700;

    text-transform: uppercase;

    border-radius: 100px;

    margin-top: 30px;

    cursor: pointer;

    overflow: hidden;

    background: transparent;

    transform: translateZ(0);

    animation: eagleFloat 3.5s ease-in-out infinite;

    transition: transform .3s ease, box-shadow .3s ease;

    z-index: 10;

}



.eagle-ab-cta::before {

    content: "";

    position: absolute;

    inset: -100%;

    z-index: -2;

    background: conic-gradient(from 0deg, transparent 0deg, transparent 60deg, var(--evmt-gold) 160deg, #fff 180deg, transparent 200deg);

    animation: eagleBeam 4s linear infinite;

    top: -50%;

    left: -50%;

    width: 200%;

    height: 200%;

}



.eagle-ab-cta::after {

    content: "";

    position: absolute;

    inset: 1.5px;

    border-radius: 100px;

    z-index: -1;

    background: rgba(2, 17, 36, 0.9);

    backdrop-filter: blur(4px);

}



@keyframes eagleFloat {



    0%,

    100% {

        transform: translateY(0);

    }



    50% {

        transform: translateY(-8px);

    }

}



.eagle-ab-cta span {

    position: relative;

    z-index: 5;

    display: flex;

    align-items: center;

    gap: 12px;

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

    text-shadow: 0 0 8px rgba(240, 208, 117, 0.6);

    transition: all 0.4s ease;

}





.eagle-ab-cta:hover {

    transform: translateY(-5px) scale(1.02);

    box-shadow: 0 4px 25px rgba(211, 160, 47, 0.25);

}



.eagle-ab-cta:hover span {

    color: #FFFFFF;

    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);

}



.eagle-ab-visual {

    flex: 0 0 45%;

    height: 600px;

    position: relative;

    display: flex;

    justify-content: center;

    align-items: center;

    z-index: 5;

}



.eagle-ab-canvas-wrap {

    position: absolute;

    width: 140%;

    height: 140%;

    z-index: 2;

    mask-image: radial-gradient(circle at 50% 50%, black 50%, transparent 70%);

}



.evmt-about-mob {

    position: relative;

    width: 100%;

    background-color: #020408;

    background-image: radial-gradient(circle at 50% -5%, #0a1a3a 0%, transparent 70%), linear-gradient(180deg, #020408 0%, #060F1F 100%);

    color: #fff;

    padding: 20px 0 60px 0;

    overflow: hidden;

    display: none;

    margin-top: 0;

}



.evmt-mob-visual-area {

    position: relative;

    width: 100%;

    height: 380px;

    /* INCREASED from 250px */

    display: flex;

    justify-content: center;

    align-items: center;

    z-index: 5;

}



.evmt-mob-content {

    position: relative;

    z-index: 10;

    padding: 0 24px;

    text-align: left;

    margin-top: 20px;

}



.evmt-mob-tag {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 8px 16px;

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

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

    border-radius: 10px;

    font-family: var(--font-secondary);

    font-size: 10px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 1.5px;

    margin-bottom: 20px;

    color: #FFFFFF;

    backdrop-filter: blur(14px);

}



.evmt-mob-tag::before {

    content: "";

    width: 6px;

    height: 6px;

    border-radius: 50%;

    background: var(--evmt-gold);

    box-shadow: 0 0 12px rgba(211, 160, 47, 0.8);

}



.evmt-mob-content h2 {

    font-family: var(--font-primary);

    font-size: 28px;

    font-weight: 700;

    line-height: 1.22;

    margin: 0 0 16px 0;

    letter-spacing: -0.02em;

}



.evmt-mob-highlight {

    background: linear-gradient(to right, #bf953f, #fcf6ba);

    -webkit-background-clip: text;

    background-clip: text;

    -webkit-text-fill-color: transparent;

}



.evmt-mob-subheading {

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

    text-shadow: 0 0 15px rgba(240, 208, 117, 0.2);

    font-size: 16px;

    font-weight: 600;

    margin-bottom: 15px;

}



.evmt-mob-body-p {

    font-family: var(--font-secondary);

    font-size: 15px;

    line-height: 1.6;

    color: rgba(255, 255, 255, 0.85);

    margin-bottom: 25px;

}



.evmt-mob-cta {

    display: flex;

    align-items: center;

    justify-content: center;

    margin: 30px auto 0 auto;

    width: 100%;

    max-width: 240px;

    height: 54px;

    border-radius: 100px;

    text-decoration: none;

    font-family: var(--font-secondary);

    font-size: 13px;

    font-weight: 700;

    text-transform: uppercase;

    position: relative;

    overflow: hidden;

    z-index: 10;

    background: transparent;

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

}



.evmt-mob-cta::before {

    content: "";

    position: absolute;

    z-index: -2;

    animation: eagleBeam 3.5s linear infinite;

    top: -50%;

    left: -50%;

    width: 200%;

    height: 200%;

    background: conic-gradient(from 0deg, transparent 0deg, transparent 60deg, var(--evmt-gold) 160deg, #fff 180deg, transparent 200deg);

}



.evmt-mob-cta::after {

    content: "";

    position: absolute;

    inset: 1.5px;

    border-radius: 100px;

    z-index: -1;

    background: rgba(6, 12, 24, 0.85);

    backdrop-filter: blur(10px);

}



.evmt-mob-cta span {

    display: flex;

    align-items: center;

    gap: 10px;

    position: relative;

    z-index: 5;

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

}



@media (max-width: 980px) {

    .eagle-ab-sec {

        display: none !important;

    }



    .evmt-about-mob {

        display: block !important;

    }

}