/* =========================================================
   TREKeFORCE
   PREMIUM FIELD SALES EXPERIENCE
   ========================================================= */

.trekeforce-page {

    background: #05080d;
    color: #f5f8fc;

    overflow-x: hidden;

}


/* =========================================================
   GLOBAL
   ========================================================= */

.trekeforce-page .container {

    width: min(1380px, 92%);

    margin: auto;

}


.ef-gradient {

    color: transparent;

    background:
        linear-gradient(
            100deg,
            #ffffff 0%,
            #67d5ff 45%,
            #008cff 100%
        );

    -webkit-background-clip: text;
    background-clip: text;

}


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

.ef-hero {

    position: relative;

    min-height: 100vh;

    display: flex;

    align-items: center;

    overflow: hidden;

    background:

        radial-gradient(
            circle at 75% 35%,
            rgba(0,145,255,.18),
            transparent 35%
        ),

        radial-gradient(
            circle at 20% 80%,
            rgba(80,30,255,.08),
            transparent 30%
        ),

        linear-gradient(
            135deg,
            #04070b,
            #08111b
        );

}


.ef-grid {

    position: absolute;

    inset: 0;

    opacity: .4;

    background-image:

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

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

    background-size: 65px 65px;

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

}


.ef-noise {

    position: absolute;

    inset: 0;

    opacity: .035;

    pointer-events: none;

    background-image:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E");

}


.ef-orb {

    position: absolute;

    border-radius: 50%;

    filter: blur(100px);

    pointer-events: none;

}


.ef-orb-1 {

    width: 450px;

    height: 450px;

    right: -180px;

    top: 10%;

    background: #008cff;

    opacity: .13;

    animation:
        efOrbOne 10s ease-in-out infinite;

}


.ef-orb-2 {

    width: 350px;

    height: 350px;

    left: -180px;

    bottom: -100px;

    background: #5035ff;

    opacity: .08;

    animation:
        efOrbTwo 12s ease-in-out infinite;

}


.ef-orb-3 {

    width: 180px;

    height: 180px;

    right: 35%;

    top: 10%;

    background: #24c8ff;

    opacity: .08;

}


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

.ef-hero-container {

    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        1fr
        1fr;

    gap: 60px;

    align-items: center;

    padding:
        140px
        0
        100px;

}


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

.ef-eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    padding:
        8px
        14px;

    border:
        1px solid
        rgba(0,150,255,.25);

    border-radius: 100px;

    color: #8bdcff;

    font-size: 10px;

    font-weight: 900;

    letter-spacing: .18em;

}


.ef-live-dot {

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background: #25d9ff;

    box-shadow:
        0 0 18px
        #25d9ff;

    animation:
        efPulse 1.7s ease-in-out infinite;

}


.ef-brand {

    display: flex;

    align-items: baseline;

    gap: 4px;

    margin:
        28px
        0
        12px;

    font-size: 25px;

    font-weight: 900;

    letter-spacing: -.04em;

}


.ef-brand-trek {

    color: #ffffff;

}


.ef-brand-force {

    color: #22b9ff;

}


.ef-hero h1 {

    max-width: 760px;

    margin:
        10px
        0
        24px;

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

    line-height: .97;

    letter-spacing: -.065em;

}


.ef-hero-description {

    max-width: 620px;

    color: #8d9baa;

    font-size: 17px;

    line-height: 1.8;

}


.ef-actions {

    display: flex;

    flex-wrap: wrap;

    gap: 13px;

    margin-top: 32px;

}


.ef-btn {

    min-height: 55px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    padding:
        0
        22px;

    border-radius: 12px;

    font-size: 12px;

    font-weight: 900;

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

}


.ef-btn:hover {

    transform:
        translateY(-4px);

}


.ef-btn-primary {

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #0097ff,
            #0066e9
        );

    box-shadow:
        0 18px 50px
        rgba(0,130,255,.25);

}


.ef-btn-primary:hover {

    box-shadow:
        0 25px 70px
        rgba(0,140,255,.38);

}


.ef-btn-outline {

    color: #d8e5f0;

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

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

}


.ef-btn-outline:hover {

    border-color:
        rgba(0,160,255,.35);

}


.ef-trust {

    display: flex;

    flex-wrap: wrap;

    gap: 25px;

    margin-top: 38px;

}


.ef-trust-item {

    display: flex;

    align-items: center;

    gap: 8px;

    color: #718092;

    font-size: 10px;

}


.ef-trust-item i {

    color: #42caff;

}


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

.ef-hero-visual {

    position: relative;

    min-height: 640px;

    display: flex;

    align-items: center;

    justify-content: center;

}


.ef-orbit {

    position: absolute;

    border:
        1px solid
        rgba(0,150,255,.14);

    border-radius: 50%;

}


.ef-orbit-outer {

    width: 570px;

    height: 570px;

    animation:
        efRotate 25s linear infinite;

}


.ef-orbit-inner {

    width: 430px;

    height: 430px;

    border-color:
        rgba(0,190,255,.1);

    animation:
        efRotateReverse 18s linear infinite;

}


.ef-phone {

    position: relative;

    z-index: 4;

    width: 295px;

    height: 570px;

    padding:
        12px;

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

    border-radius: 40px;

    background:
        linear-gradient(
            145deg,
            #1a2430,
            #080d13
        );

    box-shadow:

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

        0 0 80px
        rgba(0,140,255,.12);

    transform:
        perspective(1200px)
        rotateY(-8deg)
        rotateX(3deg);

    transition:
        transform .6s ease;

}


.ef-phone:hover {

    transform:
        perspective(1200px)
        rotateY(0)
        rotateX(0)
        translateY(-8px);

}


.ef-phone::before {

    content: "";

    position: absolute;

    top: 9px;

    left: 50%;

    transform:
        translateX(-50%);

    width: 90px;

    height: 22px;

    border-radius: 20px;

    background: #020407;

}


.ef-phone-top {

    height: 32px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding:
        0
        8px;

    font-size: 8px;

}


.ef-phone-icons {

    display: flex;

    gap: 5px;

}


.ef-phone-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding:
        22px
        8px
        14px;

}


.ef-phone-header small {

    color: #5e7184;

    font-size: 7px;

    letter-spacing: .16em;

}


.ef-phone-header h3 {

    margin:
        4px
        0
        0;

    font-size: 21px;

}


.ef-user {

    width: 34px;

    height: 34px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    color: #55caff;

    background:
        rgba(0,150,255,.1);

}


/* =========================================================
   ROUTE CARD
   ========================================================= */

.ef-route-card {

    padding:
        13px;

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

    border-radius: 14px;

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

}


.ef-route-head {

    display: flex;

    align-items: center;

    justify-content: space-between;

}


.ef-route-head small {

    display: block;

    color: #627487;

    font-size: 6px;

    letter-spacing: .15em;

}


.ef-route-head strong {

    display: block;

    margin-top: 4px;

    font-size: 9px;

}


.ef-route-status {

    color: #5ce6a1;

    font-size: 7px;

}


.ef-route-status i {

    font-size: 5px;

}


.ef-route-line {

    display: flex;

    align-items: center;

    margin-top: 17px;

}


.ef-route-point {

    width: 19px;

    height: 19px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    color: #698092;

    background:
        #101a24;

    font-size: 7px;

}


.ef-route-point.active {

    color: #ffffff;

    background:
        #008fff;

    box-shadow:
        0 0 18px
        rgba(0,150,255,.5);

}


.ef-route-path {

    flex: 1;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            #008fff,
            #284456
        );

}


/* =========================================================
   CUSTOMER
   ========================================================= */

.ef-customer-card {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-top: 12px;

    padding: 12px;

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

    border-radius: 14px;

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

}


.ef-customer-icon {

    width: 36px;

    height: 36px;

    display: grid;

    place-items: center;

    border-radius: 10px;

    color: #59cbff;

    background:
        rgba(0,150,255,.1);

}


.ef-customer-info {

    flex: 1;

}


.ef-customer-info strong {

    display: block;

    font-size: 9px;

}


.ef-customer-info small {

    display: block;

    margin-top: 3px;

    color: #637486;

    font-size: 7px;

}


.ef-customer-card button {

    width: 27px;

    height: 27px;

    border: 0;

    border-radius: 8px;

    color: #ffffff;

    background:
        #008fff;

}


/* =========================================================
   ORDER
   ========================================================= */

.ef-order-card {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-top: 12px;

    padding: 12px;

    border:
        1px solid
        rgba(0,150,255,.15);

    border-radius: 14px;

    background:
        rgba(0,130,255,.06);

}


.ef-order-icon {

    width: 34px;

    height: 34px;

    display: grid;

    place-items: center;

    border-radius: 9px;

    color: #58d2ff;

    background:
        rgba(0,150,255,.12);

}


.ef-order-card small {

    display: block;

    color: #627487;

    font-size: 6px;

    letter-spacing: .13em;

}


.ef-order-card strong {

    display: block;

    margin-top: 3px;

    font-size: 13px;

}


.ef-order-check {

    margin-left: auto;

    width: 22px;

    height: 22px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    color: #62e9a5;

    background:
        rgba(50,220,140,.1);

    font-size: 8px;

}


/* =========================================================
   PHONE NAV
   ========================================================= */

.ef-phone-nav {

    position: absolute;

    left: 12px;

    right: 12px;

    bottom: 12px;

    display: grid;

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

    padding: 8px;

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

    border-radius: 17px;

    background:
        rgba(5,9,14,.95);

}


.ef-phone-nav div {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 4px;

    padding: 7px 0;

    color: #607285;

    font-size: 6px;

}


.ef-phone-nav i {

    font-size: 10px;

}


.ef-phone-nav .active {

    color: #4ccaff;

}


/* =========================================================
   FLOATING CARDS
   ========================================================= */

.ef-floating-card {

    position: absolute;

    z-index: 7;

    display: flex;

    align-items: center;

    gap: 10px;

    padding:
        12px
        14px;

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

    border-radius: 14px;

    background:
        rgba(7,13,20,.9);

    backdrop-filter:
        blur(18px);

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

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

}


.ef-gps-card {

    top: 16%;

    left: 0;

}


.ef-sync-card {

    right: 0;

    top: 35%;

    animation-delay:
        -2s;

}


.ef-sales-card {

    right: 5%;

    bottom: 12%;

    animation-delay:
        -3.5s;

}


.ef-float-icon {

    width: 36px;

    height: 36px;

    display: grid;

    place-items: center;

    border-radius: 10px;

}


.ef-float-icon.gps {

    color: #50d4ff;

    background:
        rgba(0,150,255,.1);

}


.ef-float-icon.sync {

    color: #63eaa4;

    background:
        rgba(50,220,140,.1);

}


.ef-floating-card small {

    display: block;

    color: #647689;

    font-size: 6px;

    letter-spacing: .12em;

}


.ef-floating-card strong {

    display: block;

    margin-top: 3px;

    font-size: 9px;

}


.ef-pulse {

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background: #43e59b;

    box-shadow:
        0 0 15px
        #43e59b;

}


.ef-sync-check {

    color: #5ceaa1;

    font-size: 9px;

}


.ef-sales-chart {

    display: flex;

    align-items: end;

    gap: 3px;

    height: 28px;

}


.ef-sales-chart span {

    width: 4px;

    border-radius: 5px;

    background:
        linear-gradient(
            to top,
            #008fff,
            #58d6ff
        );

}


.ef-sales-chart span:nth-child(1) {
    height: 35%;
}

.ef-sales-chart span:nth-child(2) {
    height: 50%;
}

.ef-sales-chart span:nth-child(3) {
    height: 40%;
}

.ef-sales-chart span:nth-child(4) {
    height: 70%;
}

.ef-sales-chart span:nth-child(5) {
    height: 65%;
}

.ef-sales-chart span:nth-child(6) {
    height: 100%;
}


/* =========================================================
   SCROLL
   ========================================================= */

.ef-scroll {

    position: absolute;

    z-index: 4;

    left: 50%;

    bottom: 25px;

    transform:
        translateX(-50%);

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 7px;

    color: #617183;

    font-size: 8px;

    letter-spacing: .15em;

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

}


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

.ef-intro {

    padding:
        150px
        0;

    background:
        #080d13;

}


.ef-section-heading {

    max-width: 850px;

}


.ef-section-heading.centered {

    margin:
        0
        auto
        70px;

    text-align: center;

}


.ef-kicker {

    display: block;

    margin-bottom: 18px;

    color: #36bdff;

    font-size: 9px;

    font-weight: 900;

    letter-spacing: .2em;

}


.ef-section-heading h2 {

    margin: 0;

    font-size:
        clamp(
            42px,
            5vw,
            70px
        );

    line-height: 1.04;

    letter-spacing: -.05em;

}


.ef-section-heading p {

    max-width: 700px;

    margin-top: 25px;

    color: #8291a2;

    font-size: 16px;

    line-height: 1.8;

}


/* =========================================================
   METRICS
   ========================================================= */

.ef-metrics {

    display: grid;

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

    gap: 1px;

    margin-top: 80px;

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

}


.ef-metric {

    position: relative;

    min-height: 280px;

    padding: 35px;

    background:
        #0a1118;

    transition:
        transform .35s ease;

}


.ef-metric:hover {

    transform:
        translateY(-8px);

}


.ef-metric-number {

    position: absolute;

    top: 20px;

    right: 25px;

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

    font-size: 42px;

    font-weight: 900;

}


.ef-metric-icon {

    width: 52px;

    height: 52px;

    display: grid;

    place-items: center;

    margin-bottom: 30px;

    border-radius: 13px;

    color: #52ceff;

    background:
        rgba(0,150,255,.1);

}


.ef-metric h3 {

    font-size: 21px;

}


.ef-metric p {

    color: #788899;

    font-size: 13px;

    line-height: 1.7;

}


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

.ef-features {

    padding:
        150px
        0;

    background:
        #05090e;

}


.ef-feature-grid {

    display: grid;

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

    gap: 18px;

}


.ef-feature-card {

    position: relative;

    min-height: 350px;

    padding: 36px;

    overflow: hidden;

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

    border-radius: 23px;

    background:
        linear-gradient(
            145deg,
            #111923,
            #090f16
        );

    transition:
        transform .4s ease,
        border-color .4s ease;

}


.ef-feature-card:hover {

    transform:
        translateY(-9px);

    border-color:
        rgba(0,150,255,.3);

}


.ef-dark-card {

    background:
        linear-gradient(
            145deg,
            #0a1420,
            #06101a
        );

}


.ef-blue-card {

    background:
        linear-gradient(
            145deg,
            #061b2c,
            #07101a
        );

}


.ef-purple-card {

    background:
        linear-gradient(
            145deg,
            #111029,
            #090b17
        );

}


.ef-card-number {

    position: absolute;

    top: 22px;

    right: 28px;

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

    font-size: 55px;

    font-weight: 900;

}


.ef-feature-icon {

    width: 57px;

    height: 57px;

    display: grid;

    place-items: center;

    margin-bottom: 35px;

    border-radius: 14px;

    color: #53ceff;

    background:
        rgba(0,150,255,.1);

    font-size: 20px;

}


.ef-feature-card h3 {

    font-size: 26px;

    margin-bottom: 14px;

}


.ef-feature-card p {

    max-width: 600px;

    color: #8190a1;

    line-height: 1.75;

}


/* =========================================================
   FEATURE MINI VISUALS
   ========================================================= */

.ef-route-animation {

    display: flex;

    align-items: center;

    margin-top: 35px;

}


.ef-route-dot {

    width: 13px;

    height: 13px;

    border-radius: 50%;

    background:
        #0797ff;

    box-shadow:
        0 0 15px
        rgba(0,150,255,.6);

}


.ef-route-dash {

    width: 80px;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            #008fff,
            transparent
        );

    animation:
        efDash 2s linear infinite;

}


.ef-mini-users {

    display: flex;

    margin-top: 35px;

}


.ef-mini-users span {

    width: 43px;

    height: 43px;

    display: grid;

    place-items: center;

    margin-left: -8px;

    border:
        2px solid
        #111923;

    border-radius: 50%;

    color: #65d5ff;

    background:
        #14202d;

    font-size: 11px;

}


.ef-mini-users span:first-child {

    margin-left: 0;

}


.ef-mini-order {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-top: 35px;

    padding: 15px;

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

    border-radius: 12px;

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

}


.ef-mini-order div {

    display: flex;

    gap: 5px;

}


.ef-mini-order span {

    width: 8px;

    height: 28px;

    border-radius: 3px;

    background:
        #37bfff;

}


.ef-mini-order span:nth-child(2) {

    height: 20px;

}


.ef-mini-order span:nth-child(3) {

    height: 25px;

}


.ef-sync-visual {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 15px;

    margin-top: 35px;

}


.ef-sync-visual div {

    width: 55px;

    height: 55px;

    display: grid;

    place-items: center;

    border:
        1px solid
        rgba(0,150,255,.25);

    border-radius: 14px;

    color: #53cfff;

    background:
        rgba(0,150,255,.08);

}


.ef-sync-visual > span {

    width: 90px;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            #008fff,
            transparent,
            #008fff
        );

    animation:
        efDataFlow 2s linear infinite;

}


.ef-proof-icons {

    display: flex;

    gap: 12px;

    margin-top: 35px;

}


.ef-proof-icons span {

    width: 48px;

    height: 48px;

    display: grid;

    place-items: center;

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

    border-radius: 12px;

    color: #53cfff;

    background:
        rgba(0,150,255,.07);

}


.ef-integration {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 15px;

    margin-top: 35px;

}


.ef-integration div {

    padding:
        12px
        22px;

    border:
        1px solid
        rgba(120,90,255,.2);

    border-radius: 10px;

    color: #b6a9ff;

    background:
        rgba(100,70,255,.07);

    font-size: 11px;

    font-weight: 900;

}


.ef-integration span {

    color: #8b7aff;

}


/* =========================================================
   WORKFLOW
   ========================================================= */

.ef-workflow {

    padding:
        150px
        0;

    background:
        #080d13;

}


.ef-workflow-heading {

    max-width: 800px;

}


.ef-workflow-heading h2 {

    font-size:
        clamp(
            42px,
            5vw,
            70px
        );

    line-height: 1.04;

    letter-spacing: -.05em;

}


.ef-timeline {

    position: relative;

    display: grid;

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

    gap: 20px;

    margin-top: 100px;

}


.ef-timeline-line {

    position: absolute;

    top: 38px;

    left: 7%;

    right: 7%;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #168fff,
            #168fff,
            transparent
        );

}


.ef-timeline-item {

    position: relative;

}


.ef-timeline-number {

    position: relative;

    z-index: 2;

    width: 76px;

    height: 76px;

    display: grid;

    place-items: center;

    margin-bottom: 30px;

    border:
        1px solid
        rgba(0,150,255,.3);

    border-radius: 50%;

    color: #54cfff;

    background:
        #09121c;

    font-size: 11px;

    font-weight: 900;

    box-shadow:
        0 0 35px
        rgba(0,150,255,.1);

}


.ef-timeline-content {

    padding:
        30px;

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

    border-radius: 18px;

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

}


.ef-timeline-icon {

    width: 45px;

    height: 45px;

    display: grid;

    place-items: center;

    margin-bottom: 22px;

    border-radius: 11px;

    color: #51cfff;

    background:
        rgba(0,150,255,.1);

}


.ef-timeline-content h3 {

    margin-bottom: 10px;

    font-size: 20px;

}


.ef-timeline-content p {

    color: #7c8b9c;

    line-height: 1.7;

    font-size: 13px;

}


/* =========================================================
   OFFLINE
   ========================================================= */

.ef-offline {

    padding:
        150px
        0;

    background:
        #05090e;

}


.ef-offline-panel {

    display: grid;

    grid-template-columns:
        1fr
        1fr;

    gap: 70px;

    align-items: center;

    padding:
        75px;

    overflow: hidden;

    border:
        1px solid
        rgba(0,150,255,.17);

    border-radius: 32px;

    background:

        radial-gradient(
            circle at 80% 50%,
            rgba(0,150,255,.1),
            transparent 45%
        ),

        #08111a;

}


.ef-offline-content h2 {

    font-size:
        clamp(
            42px,
            5vw,
            65px
        );

    line-height: 1;

    letter-spacing: -.05em;

}


.ef-offline-content p {

    max-width: 600px;

    color: #8291a2;

    line-height: 1.8;

}


.ef-sync-status {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-top: 28px;

    padding:
        12px
        16px;

    border:
        1px solid
        rgba(50,220,140,.15);

    border-radius: 100px;

    background:
        rgba(50,220,140,.04);

}


.ef-status-dot {

    width: 8px;

    height: 8px;

    border-radius: 50%;

    background:
        #39e68d;

    box-shadow:
        0 0 15px
        #39e68d;

    animation:
        efPulse 1.5s infinite;

}


.ef-sync-status strong {

    font-size: 10px;

}


.ef-sync-percent {

    color: #54e89d;

    font-size: 9px;

    font-weight: 900;

}


/* =========================================================
   NETWORK
   ========================================================= */

.ef-network {

    position: relative;

    min-height: 400px;

}


.ef-network-center {

    position: absolute;

    top: 50%;

    left: 50%;

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

    width: 135px;

    height: 135px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 8px;

    border:
        1px solid
        rgba(0,150,255,.4);

    border-radius: 50%;

    color: #55ceff;

    background:
        #07131f;

    z-index: 3;

    box-shadow:
        0 0 60px
        rgba(0,150,255,.1);

}


.ef-network-center i {

    font-size: 28px;

}


.ef-network-center span {

    color: #ffffff;

    font-size: 10px;

    font-weight: 900;

}


.ef-network-node {

    position: absolute;

    width: 65px;

    height: 65px;

    display: grid;

    place-items: center;

    border:
        1px solid
        rgba(0,150,255,.25);

    border-radius: 50%;

    color: #4dcfff;

    background:
        #0b1824;

}


.node-a {

    top: 8%;

    left: 18%;

}


.node-b {

    top: 20%;

    right: 8%;

}


.node-c {

    bottom: 8%;

    left: 25%;

}


.ef-network-line {

    position: absolute;

    height: 1px;

    transform-origin: left center;

    background:
        linear-gradient(
            90deg,
            rgba(0,150,255,.1),
            #008fff,
            rgba(0,150,255,.05)
        );

}


.line-a {

    width: 180px;

    top: 35%;

    left: 25%;

    transform:
        rotate(25deg);

}


.line-b {

    width: 190px;

    top: 38%;

    right: 17%;

    transform:
        rotate(155deg);

}


.line-c {

    width: 180px;

    bottom: 28%;

    left: 28%;

    transform:
        rotate(-20deg);

}


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

.ef-cta {

    position: relative;

    padding:
        160px
        0;

    overflow: hidden;

    text-align: center;

    background:

        radial-gradient(
            circle at 50% 50%,
            rgba(0,140,255,.13),
            transparent 40%
        ),

        linear-gradient(
            135deg,
            #06101a,
            #071a2a,
            #050c14
        );

}


.ef-cta-grid {

    position: absolute;

    inset: 0;

    opacity: .2;

    background-image:

        linear-gradient(
            rgba(255,255,255,.04) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,.04) 1px,
            transparent 1px
        );

    background-size:
        50px
        50px;

}


.ef-cta-glow {

    position: absolute;

    width: 500px;

    height: 500px;

    left: 50%;

    top: 50%;

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

    border-radius: 50%;

    background:
        #008fff;

    opacity: .08;

    filter:
        blur(120px);

}


.ef-cta-content {

    position: relative;

    z-index: 2;

    max-width: 850px;

    margin: auto;

}


.ef-cta-brand {

    justify-content: center;

    font-size: 32px;

}


.ef-cta-content h2 {

    margin:
        15px
        0
        20px;

    font-size:
        clamp(
            46px,
            6vw,
            80px
        );

    line-height: .98;

    letter-spacing: -.06em;

}


.ef-cta-content p {

    max-width: 600px;

    margin:
        0
        auto
        30px;

    color: #8b9bab;

    line-height: 1.8;

}


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

.ef-reveal {

    opacity: 0;

    transform:
        translateY(35px);

    transition:
        opacity .85s ease,
        transform .85s ease;

}


.ef-reveal.visible {

    opacity: 1;

    transform:
        translateY(0);

}


/* =========================================================
   KEYFRAMES
   ========================================================= */

@keyframes efPulse {

    0%,
    100% {

        transform:
            scale(1);

        opacity: 1;

    }

    50% {

        transform:
            scale(1.5);

        opacity: .55;

    }

}


@keyframes efFloat {

    0%,
    100% {

        transform:
            translateY(0);

    }

    50% {

        transform:
            translateY(-13px);

    }

}


@keyframes efRotate {

    from {

        transform:
            rotate(0deg);

    }

    to {

        transform:
            rotate(360deg);

    }

}


@keyframes efRotateReverse {

    from {

        transform:
            rotate(360deg);

    }

    to {

        transform:
            rotate(0deg);

    }

}


@keyframes efScroll {

    0%,
    100% {

        transform:
            translateX(-50%)
            translateY(0);

    }

    50% {

        transform:
            translateX(-50%)
            translateY(8px);

    }

}


@keyframes efOrbOne {

    0%,
    100% {

        transform:
            translate(
                0,
                0
            );

    }

    50% {

        transform:
            translate(
                -80px,
                60px
            );

    }

}


@keyframes efOrbTwo {

    0%,
    100% {

        transform:
            translate(
                0,
                0
            );

    }

    50% {

        transform:
            translate(
                100px,
                -70px
            );

    }

}


@keyframes efDash {

    from {

        background-position:
            0 0;

    }

    to {

        background-position:
            160px 0;

    }

}


@keyframes efDataFlow {

    from {

        background-position:
            0 0;

    }

    to {

        background-position:
            180px 0;

    }

}


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

@media (max-width: 1100px) {

    .ef-hero-container {

        grid-template-columns:
            1fr;

        text-align: center;

    }


    .ef-hero-description {

        margin:
            0
            auto;

    }


    .ef-actions,
    .ef-trust {

        justify-content: center;

    }


    .ef-brand {

        justify-content: center;

    }


    .ef-hero-visual {

        min-height: 600px;

    }


    .ef-metrics {

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

    }


    .ef-timeline {

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

    }


    .ef-timeline-line {

        display: none;

    }

}


@media (max-width: 800px) {

    .ef-feature-grid {

        grid-template-columns:
            1fr;

    }


    .ef-offline-panel {

        grid-template-columns:
            1fr;

        padding:
            45px
            30px;

    }

}


@media (max-width: 600px) {

    .ef-hero-container {

        padding:
            105px
            0
            80px;

    }


    .ef-hero h1 {

        font-size:
            47px;

    }


    .ef-actions {

        flex-direction:
            column;

    }


    .ef-btn {

        width:
            100%;

    }


    .ef-trust {

        gap:
            13px;

    }


    .ef-hero-visual {

        min-height:
            520px;

        transform:
            scale(.86);

    }


    .ef-orbit-outer {

        width:
            450px;

        height:
            450px;

    }


    .ef-orbit-inner {

        width:
            350px;

        height:
            350px;

    }


    .ef-gps-card {

        left:
            -15px;

    }


    .ef-sync-card {

        right:
            -15px;

    }


    .ef-sales-card {

        right:
            0;

        bottom:
            2%;

    }


    .ef-metrics {

        grid-template-columns:
            1fr;

    }


    .ef-timeline {

        grid-template-columns:
            1fr;

    }


    .ef-section-heading h2,
    .ef-workflow-heading h2,
    .ef-offline-content h2 {

        font-size:
            42px;

    }


    .ef-cta-content h2 {

        font-size:
            47px;

    }

}