<style>

/* =====================================================
   RESET
===================================================== */

.ios27-header,
.ios27-header * {
    box-sizing: border-box;
}


/* =====================================================
   HEADER
===================================================== */

.ios27-header {

    --blue: #4d9aff;
    --blue-light: #7fc1ff;

    position: fixed;

    top: 18px;
    left: 50%;

    transform: translateX(-50%);

    width: min(1440px, calc(100% - 50px));

    z-index: 99999;

    transition:
        top .4s ease,
        width .4s ease;

}


/* =====================================================
   GLASS HEADER
===================================================== */

.ios27-header-inner {

    position: relative;

    min-height: 82px;

    display: flex;

    align-items: center;
    color: white;
    padding: 9px 24px 9px 28px;

    border-radius: 30px;

    background: linear-gradient(135deg, rgba(255, 255, 255, .11), rgba(255, 255, 255, .025)), rgb(1 5 18 / 76%);

    border: 1px solid
        rgba(125,170,255,.27);

    backdrop-filter:
        blur(28px)
        saturate(170%);

    -webkit-backdrop-filter:
        blur(28px)
        saturate(170%);

    box-shadow:

        0 20px 60px
        rgba(0,0,0,.32),

        inset 0 1px 1px
        rgba(255,255,255,.18),

        inset 0 -1px 1px
        rgba(255,255,255,.04);

}


/* =====================================================
   TOP LIGHT
===================================================== */

.ios27-header-inner::before {

    content: "";

    position: absolute;

    top: -1px;

    left: 12%;

    width: 76%;

    height: 1px;

    filter: blur(1px);

}


/* =====================================================
   BLUE GLOW
===================================================== */

.ios27-header-inner::after {

    content: "";

    position: absolute;

    left: 35%;

    bottom: -60px;

    width: 300px;

    height: 100px;

    background:
        rgba(40,120,255,.20);

    filter: blur(50px);

    pointer-events: none;

}


/* =====================================================
   LOGO
===================================================== */

.ios27-logo {

    position: relative;

    min-width: 285px;

    display: flex;

    align-items: center;

    text-decoration: none;

    color: white;

    z-index: 5;

}


/* G */

.logo-g {

    position: relative;

    width: 65px;
    height: 65px;

    display: flex;

    align-items: center;
    justify-content: center;

    font-family: Arial, sans-serif;

    font-size: 62px;

    font-weight: 800;

    line-height: 1;

    color: white;

}


/* ORANGE PIXELS */

.logo-g::before {

    content: "";

    position: absolute;

    width: 19px;
    height: 19px;

    top: 2px;
    right: 8px;

    background: #ff5b17;

    box-shadow:

        25px -14px 0 -4px #ff5b17,

        28px 10px 0 -7px #ff5b17;

}


/* LOGO TEXT */

.logo-text {

    margin-left: 2px;

    font-family: Arial, sans-serif;

    font-size: 25px;

    font-weight: 300;

    letter-spacing: -1px;

    color:
        rgba(255,255,255,.94);

}


/* =====================================================
   NAVIGATION
===================================================== */

.ios27-nav {

    flex: 1;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    z-index: 10;

}


/* NAV LINK */

.ios27-nav-link {

    position: relative;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 45px;

    padding: 0 22px;

    border-radius: 18px;

    color:
        rgba(255,255,255,.88);

    text-decoration: none;

    font-family:

        -apple-system,
        BlinkMacSystemFont,
        "SF Pro Display",
        "Segoe UI",
        sans-serif;

    font-size: 16px;

    font-weight: 600;

    white-space: nowrap;

    transition:

        color .3s ease,
        transform .3s ease;

}


/* NAV BACKGROUND */

.ios27-nav-link::before {

    content: "";

    position: absolute;

    inset: 4px;

    border-radius: 15px;

    background:

        linear-gradient(135deg, #e95924, rgb(0 0 0 / 15%));

    opacity: 0;

    transform: scale(.72);

    transition:

        opacity .3s ease,

        transform
        .35s cubic-bezier(.2,.8,.2,1);

    z-index: -1;

}


/* HOVER */

.ios27-nav-link:hover {

    color: white;


}


.ios27-nav-link:hover::before {

    opacity: 1;

    transform: scale(1);

}


/* ACTIVE */

.ios27-nav-link.active::before {

    opacity: 1;


    border:
        1px solid
        rgba(130,195,255,.25);

    box-shadow:

        0 8px 25px
        rgba(40,120,255,.28),

        inset 0 1px
        rgba(255,255,255,.18);

}


/* =====================================================
   COMPANY
===================================================== */

.company-dropdown-wrapper {

    position: relative;

    display: flex;

    align-items: center;

}


/* PLUS */

.company-plus {

    display: inline-block;

    margin-left: 8px;

    font-size: 20px;

    line-height: 1;

    transition:

        transform .35s ease,
        color .3s ease;

}


/* =====================================================
   COMPANY DROPDOWN
===================================================== */

.company-dropdown {

    position: absolute;

    top: calc(78% + 10px);

    left: 50%;

    width: 225px;

    padding: 9px;

    border-radius: 20px;

    background:
        linear-gradient(135deg, rgba(255, 255, 255, .11), rgba(255, 255, 255, .025)), rgb(1 5 18 / 76%);

    border:
        1px solid
        rgba(125,175,255,.28);

    backdrop-filter:
        blur(28px)
        saturate(160%);

    -webkit-backdrop-filter:
        blur(28px)
        saturate(160%);

    box-shadow:

        0 25px 60px
        rgba(0,0,0,.40),

        inset 0 1px
        rgba(255,255,255,.13);

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transform:
        translateX(-50%)
        translateY(-12px)
        scale(.94);

    transform-origin: top center;

    transition:

        opacity .25s ease,
        visibility .25s ease,

        transform
        .35s cubic-bezier(.2,.8,.2,1);

}


/* DROPDOWN TOP GLOW */

.company-dropdown::before {

    content: "";

    position: absolute;

    top: -1px;

    left: 20%;

    width: 60%;

    height: 1px;

    background:

        linear-gradient(
            90deg,
            transparent,
            rgba(80,165,255,.95),
            transparent
        );

}


/* LIST */

.company-dropdown ul {

    margin: 0;

    padding: 0;

    list-style: none;

}


/* ITEM */

.company-dropdown li {

    margin: 0;

    padding: 0;

}


/* DROPDOWN LINK */

.company-dropdown li a {

    position: relative;

    display: flex;

    align-items: center;

    padding: 13px 15px;

    border-radius: 13px;

    color:
        rgba(255,255,255,.87);

    text-decoration: none;

    font-family:

        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    font-size: 14px;

    font-weight: 500;

    transition:

        background .25s ease,
        color .25s ease,
        transform .25s ease;

}


/* DROPDOWN HOVER */

.company-dropdown li a:hover {

    color: white;

    background:

        linear-gradient(135deg, #e95924, rgb(0 0 0 / 14%));

    transform:
        translateX(4px);

}


/* DOT */

.company-dropdown li a::after {

    content: "";

    position: absolute;

    right: 14px;

    width: 5px;

    height: 5px;

    border-radius: 50%;

    background:
        #e95924;

    opacity: 0;

    transform: scale(0);

    transition: .25s ease;

}


.company-dropdown li a:hover::after {

    opacity: 1;

    transform: scale(1);

}


/* SHOW COMPANY DROPDOWN */

.company-dropdown-wrapper:hover
.company-dropdown {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    transform:

        translateX(-50%)
        translateY(0)
        scale(1);

}


/* PLUS ROTATION */

.company-dropdown-wrapper:hover
.company-plus {

    transform:
        rotate(45deg)
        scale(1.15);

    color:
        #ffffff;

}


/* =====================================================
   LANGUAGE
===================================================== */

.language-wrapper {

    position: relative;

    margin-left: 10px;

    z-index: 50;

}


/* BUTTON */

.language-button {

    display: flex;

    align-items: center;

    gap: 9px;

    height: 48px;

    padding: 0 15px;

    border-radius: 15px;

    border:
        1px solid
        rgba(255,255,255,.18);

    background:

        linear-gradient(
            135deg,
            rgba(255,255,255,.13),
            rgba(255,255,255,.035)
        );

    color: white;

    cursor: pointer;

    font-family:

        -apple-system,
        BlinkMacSystemFont,
        "SF Pro Display",
        "Segoe UI",
        sans-serif;

    font-size: 15px;

    font-weight: 600;

    transition:

        transform .3s ease,
        border-color .3s ease,
        box-shadow .3s ease,
        background .3s ease;

}


/* BUTTON HOVER */

.language-button:hover {

    transform:
        translateY(-2px);

    border-color:
        #e95924;

    background:

        linear-gradient(135deg, #e95924, rgb(0 0 0 / 18%));

    box-shadow:

        0 8px 25px
        rgba(50,120,255,.25);

}


/* FLAG */

.flag {

    font-size: 19px;

    line-height: 1;

}


/* ARROW */

.language-arrow {

    display: flex;

    transition:
        transform .3s ease;

}


.language-arrow svg {

    width: 16px;

    height: 16px;

}


/* =====================================================
   LANGUAGE DROPDOWN
===================================================== */

.language-dropdown {

    position: absolute;

    top: calc(100% + 10px);

    right: 0;

    width: 175px;

    padding: 8px;

    border-radius: 18px;

    background:
        linear-gradient(135deg, rgba(255, 255, 255, .11), rgba(255, 255, 255, .025)), rgb(1 5 18 / 76%);

    border:
        1px solid
        rgba(125,175,255,.28);

    backdrop-filter:
        blur(25px);

    -webkit-backdrop-filter:
        blur(25px);

    box-shadow:

        0 20px 50px
        rgba(0,0,0,.40);

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transform:
        translateY(-8px)
        scale(.95);

    transition:

        opacity .25s ease,
        visibility .25s ease,

        transform
        .3s cubic-bezier(.2,.8,.2,1);

}


/* LANGUAGE LINKS */

.language-dropdown a {

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 11px 13px;

    border-radius: 12px;

    color: white;

    text-decoration: none;

    font-size: 14px;

    transition:

        background .25s ease,
        transform .25s ease;

}


.language-dropdown a:hover {

    background:
       linear-gradient(135deg, #e95924, rgb(0 0 0 / 18%));

    transform:
        translateX(3px);

}


/* OPEN */

.language-wrapper.open
.language-dropdown {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    transform:
        translateY(0)
        scale(1);

}


.language-wrapper.open
.language-arrow {

    transform:
        rotate(180deg);

}


/* =====================================================
   MOBILE BUTTON
===================================================== */

.mobile-menu-button {

    display: none;

    width: 48px;

    height: 48px;

    border-radius: 15px;

    border:
        1px solid
        rgba(255,255,255,.18);

    background:
        rgba(255,255,255,.08);

    cursor: pointer;

    align-items: center;

    justify-content: center;

    flex-direction: column;

    gap: 5px;

}


.mobile-menu-button span {

    display: block;

    width: 20px;

    height: 2px;

    border-radius: 10px;

    background: white;

    transition: .3s ease;

}


/* =====================================================
   MOBILE NAV
===================================================== */

.mobile-navigation {

    display: none;

}


/* =====================================================
   SCROLL EFFECT
===================================================== */

.ios27-header.scrolled {

    top: 8px;

    width:
        min(1380px, calc(100% - 35px));

}


.ios27-header.scrolled
.ios27-header-inner {

    min-height: 72px;

    border-radius: 25px;

    background:
        linear-gradient(135deg, rgba(255, 255, 255, .11), rgba(255, 255, 255, .025)), rgb(1 5 18 / 76%);

    box-shadow:

        0 15px 45px
        rgba(0,0,0,.40),

        inset 0 1px
        rgba(255,255,255,.12);

}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 1100px) {

    .ios27-logo {

        min-width: 220px;

    }


    .logo-g {

        width: 55px;

        height: 55px;

        font-size: 53px;

    }


    .logo-text {

        font-size: 21px;

    }


    .ios27-nav-link {

        padding: 0 13px;

        font-size: 14px;

    }

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 850px) {

    .ios27-header {

        top: 10px;

        width:
            calc(100% - 20px);

    }


    .ios27-header-inner {

        min-height: 68px;

        padding:
            8px 10px 8px 15px;

        border-radius: 22px;

    }


    .ios27-logo {

        min-width: 0;

        flex: 1;

    }


    .logo-g {

        width: 45px;

        height: 45px;

        font-size: 44px;

    }


    .logo-g::before {

        width: 13px;

        height: 13px;

        top: 1px;

        right: 6px;

        box-shadow:

            17px -10px 0 -3px #ff5b17,

            20px 8px 0 -5px #ff5b17;

    }


    .logo-text {

        font-size: 18px;

    }


    /* HIDE DESKTOP NAV */

    .ios27-nav {

        display: none;

    }


    /* LANGUAGE */

    .language-wrapper {

        margin-left: 5px;

    }


    .language-button {

        width: 45px;

        height: 45px;

        padding: 0;

        justify-content: center;

        border-radius: 14px;

    }

/* 
    .language-text,
    .language-arrow {

        display: none;

    } */


    /* MENU */

    .mobile-menu-button {

        display: flex;

        margin-left: 7px;

    }


    /* MOBILE NAV */

    .mobile-navigation {

        display: flex;

        flex-direction: column;

        gap: 5px;

        margin-top: 8px;

        padding: 9px;

        border-radius: 22px;

        background:
            rgba(5,14,43,.94);

        border:
            1px solid
            rgba(130,170,255,.22);

        backdrop-filter:
            blur(25px);

        -webkit-backdrop-filter:
            blur(25px);

        box-shadow:

            0 20px 50px
            rgba(0,0,0,.38);

        opacity: 0;

        visibility: hidden;

        pointer-events: none;

        transform:
            translateY(-12px)
            scale(.97);

        transition: .3s ease;

    }


    .mobile-navigation.open {

        opacity: 1;

        visibility: visible;

        pointer-events: auto;

        transform:
            translateY(0)
            scale(1);

    }


    /* MOBILE LINKS */

    .mobile-nav-link {

        display: flex;

        align-items: center;

        justify-content: space-between;

        padding:
            14px 16px;

        border-radius: 14px;

        color: white;

        text-decoration: none;

        font-family:

            -apple-system,
            BlinkMacSystemFont,
            "Segoe UI",
            sans-serif;

        font-size: 15px;

        font-weight: 600;

        transition: .25s ease;

    }


    .mobile-nav-link:hover,
    .mobile-nav-link.active {

        background:

            linear-gradient(
                135deg,
                rgba(55,135,255,.40),
                rgba(80,80,255,.18)
            );

    }


    /* MOBILE COMPANY LINKS */

    .mobile-company-links {

        display: flex;

        flex-direction: column;

        gap: 3px;

        padding:
            0 8px 5px 20px;

    }


    .mobile-company-links a {

        padding:
            10px 14px;

        color:
            rgba(255,255,255,.72);

        text-decoration: none;

        font-size: 13px;

        border-radius: 10px;

        transition: .25s ease;

    }


    .mobile-company-links a:hover {

        color: white;

        background:
            rgba(70,140,255,.18);

        transform:
            translateX(3px);

    }


    /* HAMBURGER */

    .mobile-menu-button.active
    span:nth-child(1) {

        transform:
            translateY(7px)
            rotate(45deg);

    }


    .mobile-menu-button.active
    span:nth-child(2) {

        opacity: 0;

        transform: scale(0);

    }


    .mobile-menu-button.active
    span:nth-child(3) {

        transform:
            translateY(-7px)
            rotate(-45deg);

    }

}


/* =====================================================
   SMALL MOBILE
===================================================== */

@media (max-width: 480px) {

    .ios27-header {

        width:
            calc(100% - 14px);

    }


    .ios27-header-inner {

        padding-left: 10px;

    }


    .logo-g {

        width: 40px;

        font-size: 39px;

    }


    .logo-text {

        font-size: 16px;

    }

}


/* =====================================================
   REDUCE MOTION
===================================================== */

@media (prefers-reduced-motion: reduce) {

    .ios27-header,
    .ios27-header *,
    .ios27-header *::before,
    .ios27-header *::after {

        transition: none !important;

    }

}




/* =========================================================
   RESET
========================================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    min-height: 100%;
}

body {
    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
    color: #fff;
}


/* =========================================================
   SLIDER
========================================================= */

.hero-slider {

    --color-1: #1d6a49;
    --color-2: #0d3524;
    --color-3: #07130d;

    position: relative;

    width: 100%;
    min-height: 760px;

    overflow: hidden;

    background:
        radial-gradient(
            100% 120% at 78% 20%,
            var(--color-1) 0%,
            var(--color-2) 42%,
            var(--color-3) 100%
        );

    transition:
        background 1s ease;
}


/* =========================================================
   BACKGROUND
========================================================= */

.hero-slider::before {

    content: "";

    position: absolute;

    inset: 0;

    background:
        radial-gradient(
            circle at 15% 85%,
            rgba(255,255,255,.035),
            transparent 30%
        );

    pointer-events: none;
}


.hero-slider::after {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.30),
            transparent 55%,
            rgba(0,0,0,.15)
        );

    pointer-events: none;
}


/* =========================================================
   SLIDES
========================================================= */

.slides {
    position: relative;
    width: 100%;
    min-height: 760px;
}


.slide {

    position: absolute;

    inset: 0;

    width: 100%;
    min-height: 760px;

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transition:
        opacity .8s ease,
        visibility .8s ease;
}


.slide.active {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    z-index: 2;
}


/* =========================================================
   AMBIENT COLOR
========================================================= */

.slide__ambient {

    position: absolute;

    width: 700px;
    height: 700px;

    right: 0;
    top: 50%;

    transform:
        translateY(-50%);

    border-radius: 50%;

    background:
        var(--ambient-color, #1d6a49);

    filter: blur(120px);

    opacity: .40;

    transition:
        background 1s ease,
        opacity 1s ease;

    pointer-events: none;
}


/* =========================================================
   CONTENT WRAPPER
========================================================= */

.slide__inner {

    position: relative;

    z-index: 5;

    width: min(1380px, 92%);

    min-height: 760px;

    margin: auto;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(450px, .9fr);

    align-items: center;

    gap: 60px;

    padding:
        135px 0
        100px;
}


/* =========================================================
   CONTENT
========================================================= */

.slide__content {

    max-width: 720px;

    transform:
        translateY(25px);

    opacity: 0;

    transition:
        transform .9s cubic-bezier(.22,.61,.36,1) .15s,
        opacity .8s ease .15s;
}


.slide.active .slide__content {

    transform:
        translateY(0);

    opacity: 1;
}


/* =========================================================
   BADGE
========================================================= */

.slide__badge {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    padding:
        9px 15px;

    margin-bottom: 24px;

    border:
        1px solid
        rgba(255,255,255,.16);

    border-radius: 100px;

    background:
        rgba(255,255,255,.07);

    backdrop-filter:
        blur(15px);

    -webkit-backdrop-filter:
        blur(15px);

    color:
        rgba(255,255,255,.88);

    font-size: 13px;

    font-weight: 600;

    letter-spacing: .02em;
}


.dot {

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background:
        var(--color-1);

    box-shadow:
        0 0 14px
        var(--color-1);

    animation:
        pulse 2s infinite;
}


@keyframes pulse {

    0%,
    100% {
        opacity: .5;
        transform: scale(.8);
    }

    50% {
        opacity: 1;
        transform: scale(1.1);
    }
}


/* =========================================================
   HEADING
========================================================= */

.slide h1 {

    max-width: 720px;

    font-size:
        clamp(42px, 5vw, 76px);

    line-height:
        .98;

    letter-spacing:
        -.055em;

    font-weight:
        650;

    margin-bottom:
        27px;
}


.slide__sub {

    max-width:
        650px;

    font-size:
        clamp(18px, 1.7vw, 23px);

    line-height:
        1.5;

    color:
        rgba(255,255,255,.82);

    margin-bottom:
        18px;
}


.slide__desc {

    max-width:
        620px;

    font-size:
        15px;

    line-height:
        1.75;

    color:
        rgba(255,255,255,.58);

    margin-bottom:
        34px;
}


/* =========================================================
   BUTTONS
========================================================= */

.slide__ctas {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        12px;
}


.btn {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        12px;

    min-height:
        52px;

    padding:
        0 20px;

    border-radius:
        12px;

    text-decoration:
        none;

    font-size:
        14px;

    font-weight:
        650;

    transition:
        transform .25s ease,
        background .25s ease,
        border-color .25s ease;
}


.btn:hover {

    transform:
        translateY(-3px);
}


.btn span {

    font-size:
        19px;

    transition:
        transform .25s ease;
}


.btn:hover span {

    transform:
        translateX(4px);
}


.btn--primary {

    color:
        #fff;

    background:
        var(--color-1);

    box-shadow:
        0 15px 40px
        color-mix(
            in srgb,
            var(--color-1) 35%,
            transparent
        );
}


.btn--ghost {

    color:
        rgba(255,255,255,.88);

    border:
        1px solid
        rgba(255,255,255,.18);

    background:
        rgba(255,255,255,.055);

    backdrop-filter:
        blur(12px);
}


.btn--ghost:hover {

    background:
        rgba(255,255,255,.11);

    border-color:
        rgba(255,255,255,.30);
}


/* =========================================================
   IMAGE AREA
========================================================= */

.slide__media {

    position:
        relative;

    min-height:
        570px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;
}


.image-wrap {

    position:
        relative;

    width:
        auto;

    height:
        570px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;
}


/* =========================================================
   IMAGE GLOW
========================================================= */

.image-glow {

    position:
        absolute;

    width:
        80%;

    height:
        80%;

    border-radius:
        50%;

    background:
        var(--image-color, #1d6a49);

    filter:
        blur(80px);

    opacity:
        .55;

    transform:
        scale(.9);

    transition:
        background 1s ease,
        transform 1.2s ease;
}


.slide.active .image-glow {

    transform:
        scale(1.08);
}


/* =========================================================
   IMAGE
========================================================= */

.slide-image {

    position:
        relative;

    z-index:
        2;

    width:
        100%;

    height:
        520px;

    object-fit:
        cover;

    border-radius:
        30px;

    opacity:
        0;

    transform:
        scale(.94)
        translateY(20px);

    box-shadow:
        0 40px 100px
        rgba(0,0,0,.38);

    transition:
        opacity .8s ease,
        transform 1.1s cubic-bezier(.22,.61,.36,1);

    border:
        1px solid
        rgba(255,255,255,.13);
}


.slide.active .slide-image {

    opacity:
        1;

    transform:
        scale(1)
        translateY(0);
}


.slide.active .slide-image:hover {

    transform:
        scale(1.025);
}


/* =========================================================
   IMAGE OVERLAY
========================================================= */

.image-wrap::after {

    content:
        "";

    position:
        absolute;

    z-index:
        3;

    inset:
        0;

    margin:
        auto;

    width:
        100%;

    height:
        520px;

    border-radius:
        30px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.08),
            transparent 35%,
            rgba(0,0,0,.20)
        );

    pointer-events:
        none;
}


/* =========================================================
   SLIDE NUMBER
========================================================= */

.slide__num {

    position:
        absolute;

    z-index:
        6;

    right:
        5%;

    bottom:
        35px;

    font-size:
        13px;

    font-weight:
        600;

    letter-spacing:
        .15em;

    color:
        rgba(255,255,255,.45);
}


/* =========================================================
   NAVIGATION
========================================================= */

.slider-nav {

    position:
        absolute;

    z-index:
        20;

    left:
        4%;

    bottom:
        35px;

    display:
        flex;

    align-items:
        center;

    gap:
        9px;
}


.slider-dot {

    width:
        30px;

    height:
        3px;

    padding:
        0;

    border:
        0;

    border-radius:
        10px;

    cursor:
        pointer;

    background:
        rgba(255,255,255,.20);

    transition:
        width .35s ease,
        background .35s ease;
}


.slider-dot.active {

    width:
        70px;

    background:
        rgba(255,255,255,.9);
}


/* =========================================================
   ARROWS
========================================================= */

.slider-arrows {

    position:
        absolute;

    z-index:
        20;

    right:
        4%;

    bottom:
        26px;

    display:
        flex;

    gap:
        8px;
}


.slider-arrow {

    width:
        45px;

    height:
        45px;

    border:
        1px solid
        rgba(255,255,255,.15);

    border-radius:
        50%;

    background:
        rgba(255,255,255,.06);

    color:
        white;

    cursor:
        pointer;

    font-size:
        18px;

    transition:
        background .25s ease,
        transform .25s ease;
}


.slider-arrow:hover {

    background:
        rgba(255,255,255,.13);

    transform:
        translateY(-2px);
}


/* =========================================================
   PROGRESS
========================================================= */

.slider-progress {

    position:
        absolute;

    z-index:
        30;

    left:
        0;

    bottom:
        0;

    width:
        100%;

    height:
        2px;

    background:
        rgba(255,255,255,.08);
}


.slider-progress-bar {

    width:
        0%;

    height:
        100%;

    background:
        var(--color-1);

    transition:
        width .1s linear,
        background 1s ease;
}


/* =========================================================
   DECORATIVE GRID
========================================================= */

.grid-effect {

    position:
        absolute;

    z-index:
        1;

    right:
        -100px;

    bottom:
        -120px;

    width:
        500px;

    height:
        500px;

    opacity:
        .08;

    background-image:
        linear-gradient(
            rgba(255,255,255,.3) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.3) 1px,
            transparent 1px
        );

    background-size:
        40px 40px;

    mask-image:
        radial-gradient(
            circle,
            black 0%,
            transparent 70%
        );

    -webkit-mask-image:
        radial-gradient(
            circle,
            black 0%,
            transparent 70%
        );
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

    .hero-slider,
    .slides,
    .slide {

        min-height:
            850px;
    }


    .slide__inner {

        grid-template-columns:
            1fr;

        gap:
            30px;

        padding:
            70px 0
            90px;
    }


    .slide__content {

        max-width:
            850px;
    }


    .slide__media {

        min-height:
            400px;
    }


    .image-wrap {

        height:
            400px;

        width:
            min(550px, 90%);
    }


    .slide-image,
    .image-wrap::after {

        height:
            400px;
    }


    .slide__ambient {

        width:
            550px;

        height:
            550px;

        right:
            10%;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .hero-slider,
    .slides,
    .slide {

        min-height:
            820px;
    }


    .slide__inner {

        width:
            88%;

        padding:
            55px 0
            80px;

        gap:
            25px;
    }


    .slide h1 {

        font-size:
            clamp(38px, 11vw, 54px);

        letter-spacing:
            -.045em;
    }


    .slide__sub {

        font-size:
            16px;
    }


    .slide__desc {

        font-size:
            13px;

        line-height:
            1.65;
    }


    .slide__badge {

        font-size:
            11px;

        margin-bottom:
            18px;
    }


    .slide__media {

        min-height:
            300px;
    }


    .image-wrap {

        height:
            300px;

        width:
            100%;
    }


    .slide-image,
    .image-wrap::after {

        height:
            300px;

        border-radius:
            22px;
    }


    .slide__ambient {

        width:
            350px;

        height:
            350px;

        filter:
            blur(90px);

        opacity:
            .32;
    }


    .slide__ctas {

        flex-direction:
            column;

        align-items:
            stretch;
    }


    .btn {

        justify-content:
            center;
    }


    .slider-nav {

        left:
            6%;

        bottom:
            25px;
    }


    .slider-arrows {

        right:
            6%;

        bottom:
            14px;
    }


    .slider-arrow {

        width:
            38px;

        height:
            38px;

        font-size:
            15px;
    }


    .slide__num {

        display:
            none;
    }


    .slider-dot {

        width:
            20px;
    }


    .slider-dot.active {

        width:
            45px;
    }
}




/* =========================================================
   GLOTEFEWO   LIQUID GLASS FOOTER
   iOS-inspired / Dark Luxury / Futuristic
========================================================= */

.gf-footer {
  --gf-bg: #070809;
  --gf-surface: rgba(255,255,255,.045);
  --gf-border: rgba(255,255,255,.10);
  --gf-text: #f5f7f8;
  --gf-muted: #858b91;
  --gf-orange: #e4610e;
  --gf-green: #27b074;

  position: relative;
  overflow: hidden;
  background:
    radial-gradient(
      circle at 12% 15%,
      rgba(228,97,14,.08),
      transparent 30%
    ),
    radial-gradient(
      circle at 85% 60%,
      rgba(39,176,116,.055),
      transparent 32%
    ),
    var(--gf-bg);

  color: var(--gf-text);
  padding: 90px 24px 24px;

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Display",
    "SF Pro Text",
    Inter,
    Helvetica,
    Arial,
    sans-serif;
}


/* Ambient lights */

.gf-footer-glow {
  position: absolute;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  filter: blur(110px);
  opacity: .13;
  pointer-events: none;
}

.gf-glow-orange {
  top: -260px;
  left: -170px;
  background: var(--gf-orange);
}

.gf-glow-green {
  right: -260px;
  bottom: -250px;
  background: var(--gf-green);
}


/* Main container */

.gf-footer-inner {
  position: relative;
  max-width: 1450px;
  margin: auto;
}


/* =========================================================
   MAIN GRID
========================================================= */

.gf-footer-main {
  display: grid;
  grid-template-columns:
    1.65fr
    1fr
    .8fr
    1fr
    .85fr;

  gap: 60px;

  padding: 44px;

  border: 1px solid var(--gf-border);
  border-radius: 34px;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.075),
      rgba(255,255,255,.025)
    );

  backdrop-filter: blur(28px) saturate(140%);
  -webkit-backdrop-filter: blur(28px) saturate(140%);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 30px 100px rgba(0,0,0,.45);
}


/* =========================================================
   BRAND
========================================================= */

.gf-brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;

  color: white;
  text-decoration: none;
}

.gf-brand-icon {
  width: 58px;
  height: 58px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 17px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.12),
      rgba(255,255,255,.035)
    );

  border: 1px solid rgba(255,255,255,.13);

  box-shadow:
    0 10px 35px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.12);

  transition: .35s ease;
}

.gf-brand-icon svg {
  width: 58px;
  height: 58px;
  display: block;
}

.gf-brand:hover .gf-brand-icon {
  transform: translateY(-3px) rotate(-2deg);

  box-shadow:
    0 14px 45px rgba(228,97,14,.16),
    inset 0 1px 0 rgba(255,255,255,.15);
}


.gf-brand-text {
  display: flex;
  flex-direction: column;
}

.gf-brand-text strong {
  font-size: 21px;
  font-weight: 650;
  letter-spacing: -.6px;
}

.gf-brand-text small {
  margin-top: 3px;

  color: #777d83;

  font-size: 9px;
  font-weight: 600;
  letter-spacing: 1.3px;
  text-transform: uppercase;
}


/* Brand description */

.gf-brand-description {
  margin-top: 28px;
  max-width: 330px;
}

.gf-eyebrow {
  display: inline-block;

  color: #e95924;

  font-size: 10px;
  font-weight: 650;
  letter-spacing: 1.7px;
  text-transform: uppercase;
}

.gf-brand-description p {
  margin: 12px 0 0;

  color: var(--gf-muted);

  font-size: 14px;
  line-height: 1.75;
}


/* =========================================================
   SOCIAL
========================================================= */

.gf-social {
  display: flex;
  gap: 9px;
  margin-top: 28px;
}

.gf-social a {
  width: 39px;
  height: 39px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 13px;

  color: #9da2a7;

  border: 1px solid rgba(255,255,255,.09);

  background: rgba(255,255,255,.035);

  transition:
    transform .3s ease,
    color .3s ease,
    background .3s ease,
    border-color .3s ease,
    box-shadow .3s ease;
}

.gf-social svg {
  width: 17px;
  height: 17px;

  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.gf-social a:hover {
  color: white;

  transform: translateY(-4px);

  border-color: rgba(228,97,14,.45);

  background:
    linear-gradient(
      145deg,
      rgba(228,97,14,.18),
      rgba(255,255,255,.045)
    );

  box-shadow:
    0 12px 28px rgba(0,0,0,.35),
    0 0 25px rgba(228,97,14,.08);
}


/* =========================================================
   COLUMNS
========================================================= */

.gf-column-title {
  display: flex;
  align-items: center;
  gap: 10px;

  margin-bottom: 22px;
}

.gf-column-title span {
  color: var(--gf-orange);

  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
}

.gf-column-title h4 {
  margin: 0;

  font-size: 12px;
  font-weight: 650;

  letter-spacing: 1.2px;
  text-transform: uppercase;
}


.gf-column > a {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  padding: 9px 0;

  color: #858a90;

  font-size: 13px;
  line-height: 1.45;

  text-decoration: none;

  transition:
    color .25s ease,
    transform .25s ease;
}

.gf-column > a span {
  color: #555b60;

  font-size: 13px;

  opacity: 0;
  transform: translateX(-5px);

  transition: .25s ease;
}

.gf-column > a:hover {
  color: #fff;
  transform: translateX(4px);
}

.gf-column > a:hover span {
  color: var(--gf-orange);
  opacity: 1;
  transform: translateX(0);
}


/* =========================================================
   CTA
========================================================= */

.gf-footer-cta {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;

  margin-top: 18px;
  padding: 31px 34px;

  border: 1px solid rgba(255,255,255,.09);
  border-radius: 27px;

  background:
    linear-gradient(
      105deg,
      rgba(255,255,255,.065),
      rgba(255,255,255,.025)
    );

  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);

  overflow: hidden;
}

.gf-footer-cta::before {
  content: "";

  position: absolute;

  width: 280px;
  height: 280px;

  right: 10%;
  top: -210px;

  border-radius: 50%;

  background: rgba(228,97,14,.09);

  filter: blur(70px);

  pointer-events: none;
}


.gf-cta-copy {
  position: relative;
  z-index: 1;
}

.gf-cta-copy > span {
  color: #72787e;

  font-size: 9px;
  font-weight: 700;

  letter-spacing: 2px;
}

.gf-cta-copy h3 {
  margin: 8px 0 0;

  font-size: clamp(22px, 3vw, 34px);
  line-height: 1.15;

  font-weight: 550;
  letter-spacing: -1.2px;
}

.gf-cta-copy em {
  color: var(--gf-orange);
  font-style: normal;
}


.gf-cta-button {
  position: relative;
  z-index: 1;

  display: flex;
  align-items: center;
  gap: 14px;

  padding: 7px 7px 7px 19px;

  border: 1px solid rgba(255,255,255,.13);
  border-radius: 100px;

  color: white;

  background:
    rgba(255,255,255,.065);

  text-decoration: none;

  font-size: 12px;
  font-weight: 600;

  transition: .35s ease;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.09);
}

.gf-cta-button i {
  width: 38px;
  height: 38px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background: var(--gf-orange);

  box-shadow:
    0 6px 20px rgba(228,97,14,.28);

  transition: .35s ease;
}

.gf-cta-button svg {
  width: 17px;
  height: 17px;

  fill: none;
  stroke: white;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.gf-cta-button:hover {
  transform: translateY(-3px);

  border-color: rgba(228,97,14,.4);

  background: rgba(255,255,255,.09);

  box-shadow:
    0 15px 40px rgba(0,0,0,.3);
}

.gf-cta-button:hover i {
  transform: rotate(-45deg);
}


/* =========================================================
   BOTTOM
========================================================= */

.gf-footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;

  padding: 22px 5px 0;

  color: #fafbfc;

  font-size: 10px;
}

.gf-copyright {
  display: flex;
  align-items: center;
  gap: 9px;
}

.gf-copyright p,
.gf-registered {
  margin: 0;
}

.gf-copyright b {
  margin: 0 5px;
  color: #303438;
}

.gf-registered {
  text-align: right;
}

.gf-registered span {
  padding: 0 6px;
  color: #303438;
}


/* Green live/status dot */

.gf-status-dot {
  position: relative;

  width: 6px;
  height: 6px;

  flex: 0 0 6px;

  border-radius: 50%;

  background: var(--gf-green);

  box-shadow:
    0 0 0 4px rgba(39,176,116,.08),
    0 0 14px rgba(39,176,116,.45);
}

.gf-status-dot::after {
  content: "";

  position: absolute;

  inset: -4px;

  border-radius: inherit;

  border: 1px solid rgba(39,176,116,.25);

  animation: gfPulse 2.2s infinite;
}

@keyframes gfPulse {
  0% {
    transform: scale(.7);
    opacity: .8;
  }

  70% {
    transform: scale(1.5);
    opacity: 0;
  }

  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1100px) {

  .gf-footer-main {
    grid-template-columns:
      1.5fr
      1fr
      1fr;

    gap: 45px;
  }

  .gf-footer-brand {
    grid-column: 1 / -1;
  }

}


@media (max-width: 760px) {

  .gf-footer {
    padding: 55px 15px 15px;
  }

  .gf-footer-main {
    grid-template-columns: 1fr 1fr;

    padding: 28px 24px;

    gap: 38px 25px;

    border-radius: 27px;
  }

  .gf-footer-brand {
    grid-column: 1 / -1;
  }

  .gf-column-title {
    margin-bottom: 14px;
  }

  .gf-column > a {
    font-size: 12px;
  }

  .gf-footer-cta {
    align-items: flex-start;
    flex-direction: column;

    padding: 27px 24px;

    border-radius: 25px;
  }

  .gf-cta-button {
    width: 100%;
    justify-content: space-between;
  }

  .gf-footer-bottom {
    flex-direction: column;
    align-items: flex-start;

    padding: 20px 4px 0;

    line-height: 1.6;
  }

  .gf-registered {
    text-align: left;
  }

}


@media (max-width: 480px) {

  .gf-footer-main {
    grid-template-columns: 1fr;
  }

  .gf-footer-brand {
    grid-column: auto;
  }

  .gf-brand-icon {
    width: 52px;
    height: 52px;
  }

  .gf-brand-icon svg {
    width: 52px;
    height: 52px;
  }

  .gf-brand-text strong {
    font-size: 19px;
  }

  .gf-brand-description {
    margin-top: 22px;
  }

  .gf-column {
    padding-top: 5px;
  }

  .gf-footer-cta {
    margin-top: 14px;
  }

  .gf-cta-copy h3 {
    font-size: 25px;
  }

  .gf-copyright {
    align-items: flex-start;
  }

}




/* =========================================================
   GLOTEFEWO   ABOUT / INTRO SECTION
   Premium Editorial + Futuristic
========================================================= */

.gf-about-section {

  --orange: #e4610e;
  --dark: #15181d;
  --text: #20242a;
  --muted: #52606d;

  position: relative;

  width: 100%;

  padding: 145px 40px;

  overflow: hidden;

  background:
    radial-gradient(
      circle at 5% 20%,
      rgba(228,97,14,.055),
      transparent 25%
    ),
    radial-gradient(
      circle at 92% 75%,
      rgba(39,176,116,.035),
      transparent 25%
    ),
    #fff;

  color: var(--text);
}


/* =========================================================
   CONTAINER
========================================================= */

.gf-about-container {

  position: relative;

  z-index: 2;

  max-width: 1450px;

  margin: auto;

  display: grid;

  grid-template-columns:
    minmax(0, .95fr)
    minmax(0, 1fr);

  column-gap: 120px;

  align-items: start;
}


/* =========================================================
   BACKGROUND GRID
========================================================= */

.gf-about-grid {

  position: absolute;

  inset: 0;

  opacity: .42;

  background-image:
    linear-gradient(
      rgba(25,30,35,.035) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(25,30,35,.035) 1px,
      transparent 1px
    );

  background-size: 80px 80px;

  mask-image:
    linear-gradient(
      to bottom,
      transparent,
      black 25%,
      black 75%,
      transparent
    );

  pointer-events: none;
}


/* =========================================================
   AMBIENT ORBS
========================================================= */

.gf-about-orb {

  position: absolute;

  width: 420px;
  height: 420px;

  border-radius: 50%;

  filter: blur(100px);

  pointer-events: none;

  opacity: .12;
}

.gf-about-orb-1 {

  left: -250px;
  top: 20%;

  background: var(--orange);
}

.gf-about-orb-2 {

  right: -250px;
  bottom: -200px;

  background: #27b074;
}


/* =========================================================
   LEFT SIDE
========================================================= */

.gf-about-left {

  position: relative;

  padding-top: 15px;
}


/* EYEBROW */

.gf-about-eyebrow {

  display: flex;

  align-items: center;

  gap: 12px;

  margin-bottom: 30px;

  color: var(--orange);

  font-size: 12px;

  font-weight: 700;

  letter-spacing: 2.7px;
}


.gf-line {

  width: 31px;
  height: 2px;

  display: block;

  background: var(--orange);

  position: relative;

  overflow: hidden;
}


.gf-line::after {

  content: "";

  position: absolute;

  inset: 0;

  background: white;

  transform: translateX(-100%);

  animation: gfLineMove 3s infinite;
}


@keyframes gfLineMove {

  0%,
  55% {
    transform: translateX(-100%);
  }

  75%,
  100% {
    transform: translateX(100%);
  }
}


/* TITLE */

.gf-about-title {

  max-width: 700px;

  margin: 0;

  color: #191d23;

  font-size: 70px;

  line-height: .99;

  font-weight: 650;

  letter-spacing: -4.8px;
}


.gf-about-title span {

  position: relative;

  display: inline-block;
}


/* Orange underline under selected words */

.gf-about-title span::after {

  content: "";

  position: absolute;

  left: 3px;
  right: 5px;
  bottom: 5px;

  height: 6px;


  transform:
    scaleX(.35);

  transform-origin: left;

  opacity: .8;

  transition:
    transform .6s cubic-bezier(.2,.8,.2,1);
}


.gf-about-section:hover
.gf-about-title span::after {


}


/* INDEX */

.gf-about-index {

  display: flex;

  align-items: center;

  gap: 14px;

  margin-top: 65px;

  color: #9ca3a9;

  font-size: 10px;

  font-weight: 650;

  letter-spacing: 2px;
}


.gf-about-index span:first-child {

  display: flex;

  align-items: center;
  justify-content: center;

  width: 34px;
  height: 34px;

  border-radius: 50%;

  color: var(--orange);

  border: 1px solid
    rgba(228,97,14,.25);

  background:
    rgba(228,97,14,.035);
}


/* =========================================================
   RIGHT SIDE
========================================================= */

.gf-about-right {

  position: relative;

  padding-top: 10px;
}


/* INTRO */

.gf-about-intro {

  max-width: 680px;

  color: #415365;

  font-size:
    clamp(25px, 2vw, 31px);

  line-height: 1.42;

  letter-spacing: -.8px;

  font-weight: 420;
}


.gf-about-intro strong {

  color: #1d242b;

  font-weight: 600;
}


/* COPY */

.gf-about-copy {

  max-width: 680px;

  margin-top: 38px;
}


.gf-about-copy p {

  margin: 0 0 25px;

  color: #536171;

  font-size: 17px;

  line-height: 1.72;

  letter-spacing: -.15px;
}


.gf-about-final {

  padding-left: 22px;

  border-left:
    2px solid var(--orange);

  color: #3e4b58 !important;
}


.gf-about-final strong {

  color: #1e252b;

  font-weight: 650;
}


/* =========================================================
   LINK
========================================================= */

.gf-about-link {

  position: relative;

  display: inline-flex;

  align-items: center;

  gap: 13px;

  margin-top: 20px;

  padding: 13px 0;

  color: var(--orange);

  text-decoration: none;

  font-size: 16px;

  font-weight: 650;

  transition:
    color .3s ease;
}


.gf-about-link::after {

  content: "";

  position: absolute;

  left: 0;
  bottom: 4px;

  width: 100%;
  height: 1px;

  background: var(--orange);

  transform:
    scaleX(.2);

  transform-origin: left;

  transition:
    transform .4s
    cubic-bezier(.2,.8,.2,1);
}


.gf-about-link:hover::after {

  transform:
    scaleX(1);
}


.gf-about-arrow {

  width: 30px;
  height: 30px;

  display: flex;

  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background:
    rgba(228,97,14,.08);

  transition:
    transform .35s ease,
    background .35s ease;
}


.gf-about-arrow svg {

  width: 17px;
  height: 17px;

  fill: none;

  stroke: currentColor;

  stroke-width: 1.8;

  stroke-linecap: round;

  stroke-linejoin: round;
}


.gf-about-link:hover
.gf-about-arrow {

  transform:
    translateX(6px);

  background:
    rgba(228,97,14,.15);
}


/* =========================================================
   BOTTOM LINE
========================================================= */

.gf-about-bottom-line {

  position: relative;

  z-index: 2;

  max-width: 1450px;

  margin: 100px auto 0;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(20,25,30,.13) 15%,
      rgba(20,25,30,.13) 85%,
      transparent
    );
}


.gf-about-bottom-line span {

  display: block;

  width: 90px;
  height: 2px;

  background: var(--orange);

  transform:
    translateX(20%);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1050px) {

  .gf-about-section {

    padding: 110px 35px;
  }

  .gf-about-container {

    grid-template-columns: 1fr 1fr;

    column-gap: 65px;
  }

  .gf-about-title {

    font-size:
      clamp(48px, 6vw, 70px);

    letter-spacing: -3.5px;
  }

  .gf-about-intro {

    font-size: 24px;
  }

  .gf-about-copy p {

    font-size: 16px;
  }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 760px) {

  .gf-about-section {

    padding: 80px 22px;
  }

  .gf-about-container {

    grid-template-columns: 1fr;

    gap: 65px;
  }

  .gf-about-title {

    font-size:
      clamp(47px, 13vw, 68px);

    line-height: 1;

    letter-spacing: -3.5px;
  }

  .gf-about-eyebrow {

    font-size: 10px;

    letter-spacing: 2px;
  }

  .gf-about-index {

    margin-top: 40px;
  }

  .gf-about-right {

    padding-top: 0;
  }

  .gf-about-intro {

    font-size: 24px;

    line-height: 1.4;
  }

  .gf-about-copy {

    margin-top: 28px;
  }

  .gf-about-copy p {

    font-size: 15px;

    line-height: 1.75;
  }

  .gf-about-bottom-line {

    margin-top: 65px;
  }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 420px) {

  .gf-about-section {

    padding:
      65px 18px;
  }

  .gf-about-title {

    font-size: 46px;

    letter-spacing: -2.8px;
  }

  .gf-about-title span::after {

    height: 4px;
  }

  .gf-about-intro {

    font-size: 21px;
  }

  .gf-about-copy p {

    font-size: 14px;
  }
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .gf-line::after {

    animation: none;
  }

  .gf-about-title span::after,
  .gf-about-link::after,
  .gf-about-arrow {

    transition: none;
  }
}

/* services */

/* =========================================================
   GLOTEFEWO SERVICES
   iOS 27 / Spatial Glass / Premium Dark UI
========================================================= */

.gf-services {

  --orange: #e4610e;
  --orange-light: #ff7c28;

  --green: #27b074;
  --blue: #557dff;

  position: relative;

  width: 100%;


  padding: 125px 30px 70px;

  overflow: hidden;

  color: #fff;

  background:

    radial-gradient(
      circle at 50% 48%,
      rgba(228,97,14,.08),
      transparent 28%
    ),

    radial-gradient(
      circle at 10% 20%,
      rgba(39,176,116,.08),
      transparent 25%
    ),

    #050708;

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Display",
    "SF Pro Text",
    Inter,
    Arial,
    sans-serif;
}


/* =========================================================
   BACKGROUND
========================================================= */

.gf-services-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='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
}


.gf-services-glow {

  position: absolute;

  width: 500px;
  height: 500px;

  border-radius: 50%;

  filter: blur(130px);

  pointer-events: none;

  opacity: .13;
}


.gf-services-glow-orange {

  left: -280px;
  top: 35%;

  background: var(--orange);
}


.gf-services-glow-green {

  right: -300px;
  top: 10%;

  background: var(--green);
}


/* =========================================================
   CONTAINER
========================================================= */

.gf-services-container {

  position: relative;

  z-index: 2;

  max-width: 1450px;

  margin: auto;
}


/* =========================================================
   HEADER
========================================================= */

.gf-services-header {

  max-width: 780px;

  margin: 0 auto;

  text-align: center;
}


.gf-services-kicker {

  display: inline-flex;

  align-items: center;

  gap: 10px;

  margin-bottom: 25px;

  color: #a9b2b7;

  font-size: 11px;

  font-weight: 700;

  letter-spacing: 3px;
}


.gf-services-kicker span {

  width: 25px;
  height: 2px;

  background: var(--orange);

  box-shadow:
    0 0 14px
    rgba(228,97,14,.5);
}


.gf-services-header h2 {

  margin: 0;

  color: #f5f7f8;

  font-size:
    clamp(48px, 6vw, 86px);

  line-height: .98;

  letter-spacing: -4.5px;

  font-weight: 680;
}


.gf-services-header h2 em {

  display: block;

  color: transparent;

  font-style: normal;

  background:
    linear-gradient(
      90deg,
      #fff 0%,
      #9ca7ad 45%,
      var(--orange) 100%
    );

  -webkit-background-clip: text;

  background-clip: text;
}


.gf-services-header p {

  max-width: 580px;

  margin: 27px auto 0;

  color: #8d989e;

  font-size: 15px;

  line-height: 1.75;
}


/* =========================================================
   STAGE
========================================================= */

.gf-services-stage {

  position: relative;

  height: 570px;

  margin-top: 80px;

  perspective: 1300px;
}


/* =========================================================
   SERVICE CARD
========================================================= */

/* =========================================================
   SECTION
========================================================= */

.gf-platforms-section {

    width: 100%;

    padding: 30px 3.35vw;


    overflow: hidden;

}


/* =========================================================
   4 COLUMN GRID
========================================================= */

.gf-platforms-grid {

    width: 100%;

    max-width: 1450px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 40px;

    align-items: stretch;

}


/* =========================================================
   CARD
========================================================= */

.gf-platform-card {

    position: relative;

    width: 100%;

    min-width: 0;

    min-height: 450px;

    box-sizing: border-box;

    padding: 32px 37px 44px;

    display: flex;

    flex-direction: column;

    text-decoration: none;

    color: #ffffff;

    overflow: hidden;

    border-radius: 28px;

    /* 3PX BORDER */
    border:
        3px solid rgba(255,255,255,0.105);

    background:
        #15171b;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.025);

    transition:
        transform 0.5s cubic-bezier(.22,1,.36,1),
        border-color 0.45s ease,
        box-shadow 0.45s ease,
        background 0.45s ease;

}


/* =========================================================
   HIDDEN GLOW
   Only appears on hover
========================================================= */

.gf-platform-card::before {

    content: "";

    position: absolute;

    width: 250px;
    height: 250px;

    left: -120px;
    bottom: -140px;

    border-radius: 50%;

    background:
        rgba(233,89,36,0.15);

    filter: blur(75px);

    opacity: 0;

    pointer-events: none;

    transition:
        opacity 0.55s ease,
        transform 0.65s ease;

}


/* =========================================================
   GREEN CARD
========================================================= */


.gf-green-card::before {

    background:
        rgba(25,190,120,0.16);

}


/* =========================================================
   TOP PILL
========================================================= */

.gf-platform-top {

    position: relative;

    z-index: 2;

    min-height: 42px;

    display: flex;

    align-items: flex-start;

    justify-content: flex-end;

}


.gf-platform-pill {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 34px;

    padding: 0 14px;

    border-radius: 100px;

    border:
        1px solid rgba(233,89,36,0.62);

    color:
        #E95924;

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    font-size: 12px;

    line-height: 1;

    font-weight: 500;

    letter-spacing: 0.12em;

    white-space: nowrap;

}


.gf-green-card .gf-platform-pill {

    border-color:
        rgba(25,190,120,0.60);

    color:
        #20bd78;

}


/* =========================================================
   ICON
========================================================= */

.gf-platform-icon {

    position: relative;

    z-index: 2;

    width: 60px;
    height: 60px;

    margin-top: -45px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 15px;

    background:
        rgba(255,255,255,0.055);

    color:
        #E95924;

    transition:
        transform 0.45s cubic-bezier(.22,1,.36,1),
        background 0.35s ease,
        box-shadow 0.35s ease;

}


.gf-platform-icon svg {

    width: 22px;
    height: 22px;

}


.gf-green-card .gf-platform-icon {

    color:
        #20bd78;

}


/* =========================================================
   HEADING
========================================================= */

.gf-platform-content {

    position: relative;

    z-index: 2;

    margin-top: 22px;

}


.gf-platform-content h3 {

    margin: 0 0 14px;

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    font-style: normal;

    font-weight: 650;

    color:
        rgb(245, 246, 247);

    font-size: 24px;

    line-height: 31px;

    letter-spacing: -0.025em;

}


/* =========================================================
   PARAGRAPH
========================================================= */

.gf-platform-content p {

    margin: 0;

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    font-style: normal;

    font-weight: 400;

    color:
        rgba(166, 176, 185, 0.9);

    font-size: 15px;

    line-height: 26px;

    letter-spacing: 0;

}


/* =========================================================
   LEARN MORE
========================================================= */

.gf-platform-link {

    position: relative;

    z-index: 2;

    margin-top: auto;

    padding-top: 22px;

    display: flex;

    align-items: center;

    gap: 11px;

    color:
        #E95924;

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    font-size: 15px;

    line-height: 1;

    font-weight: 600;

}


.gf-platform-link svg {

    width: 18px;
    height: 18px;

    transition:
        transform 0.4s cubic-bezier(.22,1,.36,1);

}


.gf-green-card .gf-platform-link {

    color:
        #20bd78;

}


/* =========================================================
   HOVER ONLY
========================================================= */

.gf-platform-card:hover {

    transform:
        translateY(-7px);

    border-color:
       rgb(233 89 36);

    background:
        #17191d;

    box-shadow:
        0 24px 55px rgba(0,0,0,0.40),
        0 0 35px rgba(233,89,36,0.10),
        inset 0 1px 0 rgba(255,255,255,0.06);

}

.gf-platform-card-1:hover {

    transform:
        translateY(-7px);

    border-color:
        rgb(1 62 137);

    background:
        #17191d;

    box-shadow:
        0 24px 55px rgba(0,0,0,0.40),
        0 0 35px rgba(233,89,36,0.10),
        inset 0 1px 0 rgba(255,255,255,0.06);

}




.gf-green-card:hover {

    border-color:
        rgba(25,190,120,0.95);

    box-shadow:
        0 24px 55px rgba(0,0,0,0.40),
        0 0 35px rgba(25,190,120,0.12),
        inset 0 1px 0 rgba(255,255,255,0.06);

}


/* Glow ONLY on hover */

.gf-platform-card:hover::before {

    opacity: 1;

    transform:
        translate(45px,-35px)
        scale(1.15);

}


/* Icon ONLY on hover */

.gf-platform-card:hover .gf-platform-icon {

    transform:
        translateY(-3px);

    background:
        rgba(233,89,36,0.12);

    box-shadow:
        0 0 22px rgba(233,89,36,0.14);

}


.gf-green-card:hover .gf-platform-icon {

    background:
        rgba(25,190,120,0.12);

    box-shadow:
        0 0 22px rgba(25,190,120,0.14);

}


/* Arrow ONLY on hover */

.gf-platform-card:hover
.gf-platform-link svg {

    transform:
        translateX(5px);

}


/* =========================================================
   3RD BOX — BLUE HOVER OVERRIDE
   Only the 3rd service card changes on hover
========================================================= */

.gf-platform-card:nth-child(3):hover {
    border-color:#63a3f3 !important;
    box-shadow:
        0 24px 55px rgba(0,0,0,0.40),
        0 0 35px rgba(85,125,255,0.18),
        inset 0 1px 0 rgba(255,255,255,0.06) !important;
}

/* 3rd card: orange hidden glow becomes blue */
.gf-platform-card:nth-child(3)::before {
    background: rgba(85,125,255,0.18);
}

/* 3rd card: blue glow appears on hover */
.gf-platform-card:nth-child(3):hover::before {
    opacity: 1;
}

/* 3rd card: icon hover glow becomes blue */
.gf-platform-card:nth-child(3):hover .gf-platform-icon {
    background: rgba(85,125,255,0.12);
    box-shadow: 0 0 22px rgba(85,125,255,0.18);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1150px) {

    .gf-platforms-grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 24px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 650px) {

    .gf-platforms-section {

        padding:
            20px 16px;

    }

    .gf-platforms-grid {

        grid-template-columns: 1fr;

        gap: 18px;

    }

    .gf-platform-card {

        min-height: 460px;

        padding:
            27px 27px 35px;

        border-radius: 25px;

    }

}



/* --------------------- */

/* services */

/* marque */


/* ==========================================
   GLOTEFEWO   PREMIUM IOS-INSPIRED MARQUEE
========================================== */

.gf-marquee-section {
  --gf-orange: #e4610e;
  --gf-green: #27b074;

  position: relative;
  width: 100%;
  padding: 35px 0 35px;
  overflow: hidden;

  background:
    radial-gradient(
      ellipse at 15% 20%,
      rgba(228, 97, 14, .07),
      transparent 40%
    ),
    radial-gradient(
      ellipse at 85% 80%,
      rgba(39, 176, 116, .06),
      transparent 40%
    ),
    #fff;

  color: #17191d;

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Display",
    "Inter",
    sans-serif;
}


/* HEADER */

.gf-marquee-heading {
  max-width: 900px;
  margin: 0 auto 65px;
  padding: 0 24px;
  text-align: center;
}

.gf-marquee-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;

  margin-bottom: 22px;

  color: #7d858c;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 3px;
}

.gf-marquee-label i {
  width: 25px;
  height: 2px;
  background: var(--gf-orange);
  border-radius: 10px;
}

.gf-marquee-heading h2 {
  margin: 0;

  font-size: clamp(42px, 6vw, 76px);
  line-height: 1.02;
  font-weight: 650;
  letter-spacing: -4px;
}

.gf-marquee-heading h2 span {
  display: block;

  color: transparent;

  background: linear-gradient(
    100deg,
    #e4610e,
    #f28c42,
    #27b074
  );

  -webkit-background-clip: text;
  background-clip: text;
}

.gf-marquee-heading p {
  max-width: 550px;
  margin: 23px auto 0;

  color: #737d85;
  font-size: 15px;
  line-height: 1.8;
}


/* MARQUEE FRAME */

.gf-marquee {
  position: relative;
  width: 100%;

  padding: 27px 0;

  overflow: hidden;

  border-top: 1px solid rgba(25, 30, 35, .08);
  border-bottom: 1px solid rgba(25, 30, 35, .08);

  background: rgb(6 8 9);

  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}


/* LEFT + RIGHT FADE */

.gf-marquee::before,
.gf-marquee::after {
  content: "";
  position: absolute;
  z-index: 3;

  top: 0;
  bottom: 0;

  width: 100px;

  pointer-events: none;
}

.gf-marquee::before {
  left: 0;

  background: linear-gradient(
    90deg,
    #fff,
    rgba(255,255,255,0)
  );
}

.gf-marquee::after {
  right: 0;

  background: linear-gradient(
    270deg,
    #fff,
    rgba(255,255,255,0)
  );
}


/* TRACK */

.gf-marquee-track {
  display: flex;
  width: max-content;

  animation: gf-marquee-scroll 42s linear infinite;

  will-change: transform;
}

.gf-marquee:hover .gf-marquee-track {
  animation-play-state: paused;
}


/* DUPLICATED GROUP */

.gf-marquee-group {
  display: flex;
  align-items: center;
  flex-shrink: 0;

  gap: 28px;
  padding-right: 28px;
}


/* ITEMS */

.gf-marquee-item {
  display: inline-flex;
  align-items: center;
  gap: 13px;

  white-space: nowrap;

  color: #f6f7f8;

  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.3px;

  transition:
    color .3s ease,
    transform .3s ease;
}

.gf-marquee-item:hover {
  color: var(--gf-orange);
  transform: translateY(-2px);
}


/* SVG ICONS */

.gf-marquee-item svg {
  width: 23px;
  height: 23px;

  flex-shrink: 0;

  fill: none;
  stroke: var(--gf-orange);

  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;

  transition:
    stroke .3s ease,
    transform .3s ease;
}

.gf-marquee-item.green svg {
  stroke: var(--gf-green);
}

.gf-marquee-item:hover svg {
  transform: scale(1.12);
}


/* SEPARATOR */

.gf-marquee-separator {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 24px;
  height: 24px;

  flex-shrink: 0;
}

.gf-marquee-separator i {
  width: 6px;
  height: 6px;

  border-radius: 50%;

  background: var(--gf-orange);

  box-shadow:
    0 0 0 5px rgba(228, 97, 14, .08),
    0 0 15px rgba(228, 97, 14, .2);
}


/* CONTINUOUS ANIMATION */

@keyframes gf-marquee-scroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}


/* FOOTER LABEL */

.gf-marquee-footer {
  max-width: 1350px;
  margin: 30px auto 0;
  padding: 0 30px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;

  color: #92999e;

  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2px;
}

.gf-marquee-footer-dot {
  width: 5px;
  height: 5px;

  border-radius: 50%;

  background: var(--gf-green);

  box-shadow: 0 0 10px rgba(39, 176, 116, .5);
}


/* TABLET */

@media (max-width: 768px) {
  .gf-marquee-section {
    padding-top: 75px;
  }

  .gf-marquee-heading {
    margin-bottom: 45px;
  }

  .gf-marquee-heading h2 {
    font-size: clamp(38px, 8vw, 58px);
    letter-spacing: -2.5px;
  }

  .gf-marquee {
    padding: 23px 0;
  }

  .gf-marquee-group {
    gap: 22px;
    padding-right: 22px;
  }

  .gf-marquee-item {
    font-size: 13px;
    gap: 10px;
  }

  .gf-marquee-item svg {
    width: 20px;
    height: 20px;
  }

  .gf-marquee-footer {
    padding: 0 20px;
    font-size: 8px;
    letter-spacing: 1px;
  }
}


/* MOBILE */

@media (max-width: 480px) {
  .gf-marquee-section {
    padding: 65px 0 25px;
  }

  .gf-marquee-heading {
    text-align: left;
    padding: 0 20px;
  }

  .gf-marquee-heading h2 {
    font-size: 43px;
    line-height: 1.04;
    letter-spacing: -2.5px;
  }

  .gf-marquee-heading p {
    font-size: 14px;
    line-height: 1.7;
  }

  .gf-marquee {
    padding: 20px 0;
  }

  .gf-marquee::before,
  .gf-marquee::after {
    width: 35px;
  }

  .gf-marquee-track {
    animation-duration: 35s;
  }

  .gf-marquee-group {
    gap: 18px;
    padding-right: 18px;
  }

  .gf-marquee-item {
    font-size: 12px;
  }

  .gf-marquee-item svg {
    width: 19px;
    height: 19px;
  }

  .gf-marquee-footer {
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;

    margin-top: 23px;
    padding: 0 15px;

    font-size: 7px;
    letter-spacing: 1px;
  }
}


/* ACCESSIBILITY */

@media (prefers-reduced-motion: reduce) {
  .gf-marquee-track {
    animation: none;
    transform: none;
  }

  .gf-marquee {
    overflow-x: auto;
  }

  .gf-marquee-group {
    flex-shrink: 0;
  }
}

/* marque */

/* about us section  */


/* ==============================
   GLOTEFEWO GLOBAL SECTION
   iOS-inspired / Glass UI
============================== */

.global-section {
  --orange: #E4610E;
  --green: #27b074;
  --ink: #111827;
  --muted: #697386;

  position: relative;
  overflow: hidden;
  padding: 5% 0 5% 0;
  background:
    radial-gradient(
      circle at 8% 15%,
      rgba(228, 97, 14, .045),
      transparent 28%
    ),
    radial-gradient(
      circle at 90% 85%,
      rgba(39, 176, 116, .055),
      transparent 30%
    ),
    #f8f9fb;
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont,
    "SF Pro Display", "SF Pro Text", "Inter",
    "Segoe UI", sans-serif;
}

.global-container {
  width: min(1180px, 100%);
  margin: 0 auto;
}

.global-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(45px, 7vw, 100px);
}

/* ==============================
   VISUAL / MAP
============================== */

.global-visual {
  min-width: 0;
}

.global-map {
  position: relative;
  min-height: 510px;
  aspect-ratio: 4 / 4.5;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(255, 255, 255, .75);
  border-radius: 32px;
  background:
    radial-gradient(
      ellipse at 20% 20%,
      rgba(31, 143, 95, .25),
      transparent 45%
    ),
    radial-gradient(
      ellipse at 90% 80%,
      rgba(228, 97, 14, .18),
      transparent 45%
    ),
    linear-gradient(145deg, #172b3b, #0c1119 70%);
  box-shadow:
    0 30px 80px rgba(20, 35, 50, .16),
    0 5px 18px rgba(20, 35, 50, .07),
    inset 0 1px 0 rgba(255, 255, 255, .18);
}

.map-glow {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(
      circle at 45% 45%,
      rgba(255, 255, 255, .055),
      transparent 55%
    );
  pointer-events: none;
}

.map-grid {
  position: absolute;
  inset: 0;
  opacity: .17;
  background-image:
    linear-gradient(
      rgba(255,255,255,.2) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.2) 1px,
      transparent 1px
    );
  background-size: 54px 54px;
  mask-image: linear-gradient(
    to bottom,
    black,
    transparent 95%
  );
}

.map-top {
  position: absolute;
  top: 26px;
  left: 26px;
  right: 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  z-index: 4;
}

.map-status,
.map-coordinate {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 13px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 100px;
  background: rgba(255,255,255,.075);
  color: rgba(255,255,255,.8);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .12em;
}

.status-dot,
.map-bottom-dot {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: #42d99a;
  box-shadow: 0 0 12px rgba(66,217,154,.7);
}

.route-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  z-index: 1;
}

.route-base {
  fill: none;
  stroke: rgba(255,255,255,.23);
  stroke-width: 1.6;
  stroke-dasharray: 4 8;
}

.route-flow {
  fill: none;
  stroke: url(#routeGradient);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 8 13;
  animation: routeTravel 8s linear infinite;
  filter: drop-shadow(0 0 5px rgba(39,176,116,.4));
}

@keyframes routeTravel {
  to {
    stroke-dashoffset: -168;
  }
}

/* Map pins */

.map-point {
  position: absolute;
  z-index: 3;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
}

.point-eu {
  left: 24%;
  top: 34%;
}

.point-pk {
  left: 76%;
  top: 61%;
}

.point-ring {
  position: absolute;
  width: 18px;
  height: 18px;
  border: 1px solid rgba(255,255,255,.8);
  border-radius: 50%;
  animation: pointPulse 2.6s ease-out infinite;
}

.point-core {
  width: 9px;
  height: 9px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 15px rgba(228,97,14,.75);
}

.point-pk .point-core {
  background: #32d995;
  box-shadow: 0 0 15px rgba(50,217,149,.75);
}

@keyframes pointPulse {
  0% {
    transform: scale(.8);
    opacity: .9;
  }
  100% {
    transform: scale(3.2);
    opacity: 0;
  }
}

/* Floating location cards */

.location-card {
  position: absolute;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 12px;
  width: max-content;
  max-width: calc(100% - 30px);
  padding: 15px 18px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 18px;
  background: rgba(255,255,255,.105);
  box-shadow:
    0 12px 35px rgba(0,0,0,.14),
    inset 0 1px 0 rgba(255,255,255,.12);
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  color: white;
  animation: cardFloat 6s ease-in-out infinite;
}

.card-eu {
  top: 26%;
  left: 9%;
}

.card-pk {
  right: 7%;
  bottom: 25%;
  animation-delay: -3s;
}

.location-icon {
  width: 37px;
  height: 37px;
  display: grid;
  place-items: center;
  flex: 0 0 37px;
  border: 1px solid rgba(228,97,14,.28);
  border-radius: 12px;
  background: rgba(228,97,14,.15);
  color: #ff9856;
  font-size: 23px;
}

.green-icon {
  border-color: rgba(39,176,116,.3);
  background: rgba(39,176,116,.15);
  color: #57e6a4;
}

.location-card div {
  display: grid;
  gap: 4px;
}

.location-label {
  color: rgba(255,255,255,.55);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .15em;
}

.location-card strong {
  font-size: 13px;
  font-weight: 650;
  letter-spacing: -.02em;
}

.location-card small {
  color: rgba(255,255,255,.55);
  font-size: 10px;
}

@keyframes cardFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

.map-bottom {
  position: absolute;
  left: 26px;
  right: 26px;
  bottom: 25px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255,255,255,.62);
  font-size: 11px;
  letter-spacing: .01em;
}

.map-orb {
  position: absolute;
  z-index: -1;
  width: 170px;
  height: 170px;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 50%;
  pointer-events: none;
}

.orb-one {
  top: 35%;
  left: 20%;
  box-shadow:
    0 0 0 30px rgba(255,255,255,.018),
    0 0 0 60px rgba(255,255,255,.012);
}

.orb-two {
  right: -60px;
  bottom: -70px;
  width: 240px;
  height: 240px;
  border-color: rgba(39,176,116,.16);
  box-shadow:
    0 0 0 30px rgba(39,176,116,.025),
    0 0 0 65px rgba(39,176,116,.018);
}

.visual-caption {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  margin-top: 18px;
  color: #9299a5;
  font-size: 9px;
  font-weight: 650;
  letter-spacing: .13em;
}

/* ==============================
   CONTENT
============================== */

.global-content {
  min-width: 0;
}

.global-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  color: var(--orange);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.eyebrow-line {
  width: 27px;
  height: 2px;
  border-radius: 10px;
  background: var(--orange);
}

.global-heading {
  margin: 0;
  max-width: 600px;
  font-size: clamp(34px, 4.1vw, 55px);
  line-height: 1.08;
  font-weight: 680;
  letter-spacing: -.065em;
  color: #131923;
}

.global-heading span {
  display: block;
  margin-top: 5px;
  color: #9299a5;
}

.global-lead {
  margin: 26px 0 0;
  color: #697386;
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.65;
  letter-spacing: -.025em;
}

.global-lead strong {
  display: block;
  color: #202938;
  font-weight: 600;
}

.global-divider {
  width: 100%;
  height: 1px;
  margin: 28px 0;
  background: linear-gradient(
    90deg,
    rgba(17,24,39,.13),
    rgba(17,24,39,.025)
  );
}

.global-description {
  margin: 0 0 16px;
  color: #727b8a;
  font-size: 14px;
  line-height: 1.9;
  letter-spacing: -.01em;
}

/* ==============================
   FEATURE CARDS
============================== */

.global-features {
  display: grid;
  gap: 10px;
  margin-top: 30px;
}

.feature-card {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid rgba(21,31,46,.065);
  border-radius: 17px;
  background: rgba(255,255,255,.76);
  box-shadow:
    0 3px 12px rgba(20,30,45,.025),
    inset 0 1px 0 rgba(255,255,255,.9);
  transition:
    transform .3s ease,
    border-color .3s ease,
    box-shadow .3s ease,
    background .3s ease;
}

.feature-card:hover {
  transform: translateY(-3px);
  border-color: rgba(228,97,14,.2);
  background: #fff;
  box-shadow: 0 12px 28px rgba(20,30,45,.07);
}

.feature-icon {
  display: grid;
  place-items: center;
  width: 43px;
  height: 43px;
  flex: 0 0 43px;
  border: 1px solid rgba(228,97,14,.13);
  border-radius: 14px;
  background: #fff5ee;
  color: var(--orange);
}

.feature-icon svg {
  width: 21px;
  height: 21px;
}

.feature-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.feature-copy span {
  color: #a0a6b1;
  font-size: 9px;
  font-weight: 750;
  letter-spacing: .12em;
}

.feature-copy strong {
  color: #252d39;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: -.02em;
}

.feature-arrow {
  margin-left: auto;
  color: #a2a8b2;
  font-size: 17px;
  transition: transform .3s ease, color .3s ease;
}

.feature-card:hover .feature-arrow {
  transform: translate(3px, -3px);
  color: var(--orange);
}

.feature-green .feature-icon {
  border-color: rgba(39,176,116,.15);
  background: #effaf4;
  color: var(--green);
}

.feature-green:hover {
  border-color: rgba(39,176,116,.24);
}

.feature-green:hover .feature-arrow {
  color: var(--green);
}

/* Bottom note */

.global-footnote {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 25px;
  color: #9299a5;
  font-size: 11px;
  line-height: 1.6;
}

.footnote-icon {
  display: grid;
  place-items: center;
  width: 23px;
  height: 23px;
  flex: 0 0 23px;
  border-radius: 50%;
  background: #fff0e6;
  color: var(--orange);
  font-size: 13px;
}

/* ==============================
   RESPONSIVE
============================== */

@media (max-width: 900px) {
  .global-grid {
    grid-template-columns: 1fr;
    gap: 55px;
  }

  .global-visual {
    width: min(600px, 100%);
    margin: 0 auto;
  }

  .global-map {
    min-height: 440px;
  }

  .global-content {
    max-width: 680px;
  }

  .global-heading {
    max-width: 650px;
  }
}

@media (max-width: 560px) {
  .global-section {
    padding: 70px 18px;
  }

  .global-grid {
    gap: 42px;
  }

  .global-map {
    min-height: 390px;
    aspect-ratio: 4 / 4.5;
    border-radius: 25px;
  }

  .map-top {
    top: 17px;
    left: 15px;
    right: 15px;
  }

  .map-status,
  .map-coordinate {
    padding: 8px 10px;
    font-size: 8px;
  }

  .card-eu {
    left: 5%;
    top: 27%;
  }

  .card-pk {
    right: 4%;
    bottom: 24%;
  }

  .location-card {
    gap: 9px;
    padding: 11px 12px;
    border-radius: 15px;
  }

  .location-icon {
    width: 31px;
    height: 31px;
    flex-basis: 31px;
    border-radius: 10px;
    font-size: 19px;
  }

  .location-card strong {
    font-size: 11px;
  }

  .location-card small {
    font-size: 9px;
  }

  .location-label {
    font-size: 8px;
  }

  .map-bottom {
    left: 16px;
    right: 16px;
    bottom: 17px;
    font-size: 9px;
  }

  .visual-caption {
    font-size: 8px;
  }

  .global-heading {
    font-size: clamp(34px, 9vw, 45px);
  }

  .global-description {
    font-size: 13px;
    line-height: 1.85;
  }

  .feature-card {
    padding: 12px;
    gap: 11px;
  }

  .feature-copy strong {
    font-size: 12px;
  }
}

/* Accessibility: respect reduced motion */

@media (prefers-reduced-motion: reduce) {
  .route-flow,
  .point-ring,
  .location-card {
    animation: none !important;
  }

  .feature-card,
  .feature-arrow {
    transition: none !important;
  }
}

/* about us section  */

/* center text  */


/* ==============================
   TSI   PREMIUM IOS GLASS SECTION
============================== */

.tsi-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 5% 0 5% 0;
  background: #080d14;
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont,
    "SF Pro Display", "SF Pro Text", "Inter",
    "Segoe UI", sans-serif;
}

.tsi-container {
  position: relative;
  z-index: 2;
  width: min(1050px, 100%);
  margin: 0 auto;
  text-align: center;
}

/* Background */

.tsi-background {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.tsi-grid {
  position: absolute;
  inset: 0;
  opacity: .17;
  background-image:
    linear-gradient(
      rgba(255,255,255,.09) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.09) 1px,
      transparent 1px
    );
  background-size: 72px 72px;
  mask-image: radial-gradient(
    ellipse at center,
    black 0%,
    transparent 78%
  );
}

.tsi-glow {
  position: absolute;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  filter: blur(100px);
  opacity: .2;
  animation: tsiGlow 12s ease-in-out infinite alternate;
}

.tsi-glow--orange {
  top: -320px;
  left: -130px;
  background: #e4610e;
}

.tsi-glow--green {
  right: -160px;
  bottom: -350px;
  background: #19b879;
  animation-delay: -5s;
}

@keyframes tsiGlow {
  from {
    transform: translate3d(0, 0, 0) scale(.9);
  }
  to {
    transform: translate3d(40px, 30px, 0) scale(1.15);
  }
}

/* Eyebrow */

.tsi-eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  margin-bottom: 32px;
  padding: 10px 16px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 100px;
  background: rgba(255,255,255,.045);
  color: #ffad78;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .13em;
  text-transform: uppercase;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.tsi-eyebrow-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ff8b45;
  box-shadow: 0 0 12px rgba(255,139,69,.8);
}

/* Heading */

.tsi-heading {
  margin: 0 auto;
  font-size: clamp(38px, 6.5vw, 76px);
  font-weight: 680;
  line-height: 1.06;
  letter-spacing: -.065em;
  color: #fff;
  text-wrap: nowrap;
}

.tsi-heading span {
  display: block;
  background: linear-gradient(
    100deg,
    #fff 0%,
    #dce5ed 42%,
    #9baab9 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.tsi-heading .tsi-heading-last {
  background: linear-gradient(
    100deg,
    #ff9a5a 0%,
    #f8d1b3 45%,
    #7de3b2 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Supporting text */

.tsi-description {
  max-width: 650px;
  margin: 28px auto 0;
  color: rgba(226,234,242,.62);
  font-size: clamp(14px, 1.5vw, 17px);
  line-height: 1.85;
  letter-spacing: -.015em;
}

/* Glass pills */

.tsi-pill-row {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 48px;
}

.tsi-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 13px;
  min-height: 66px;
  padding: 0 21px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 20px;
  background: linear-gradient(
    145deg,
    rgba(255,255,255,.095),
    rgba(255,255,255,.035)
  );
  color: rgba(255,255,255,.9);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.015em;
  box-shadow:
    0 12px 35px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.1);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  transition:
    transform .35s cubic-bezier(.2,.8,.2,1),
    border-color .35s ease,
    background .35s ease,
    box-shadow .35s ease;
}

.tsi-pill:hover {
  transform: translateY(-6px);
  background: rgba(255,255,255,.1);
  box-shadow:
    0 20px 45px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.15);
}

.tsi-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 13px;
  background: rgba(255,255,255,.055);
}

.tsi-icon svg {
  width: 20px;
  height: 20px;
}

.tsi-pill-arrow {
  margin-left: 5px;
  color: rgba(255,255,255,.38);
  font-size: 17px;
  transition:
    transform .3s ease,
    color .3s ease;
}

.tsi-pill:hover .tsi-pill-arrow {
  transform: translate(3px, -3px);
  color: #fff;
}

/* Accent colors */

.tsi-pill--orange .tsi-icon {
  color: #ff9a5a;
  background: rgba(228,97,14,.12);
  border-color: rgba(228,97,14,.2);
}

.tsi-pill--orange:hover {
  border-color: rgba(228,97,14,.4);
  box-shadow: 0 18px 45px rgba(228,97,14,.1);
}

.tsi-pill--green .tsi-icon {
  color: #55dfa0;
  background: rgba(39,176,116,.12);
  border-color: rgba(39,176,116,.2);
}

.tsi-pill--green:hover {
  border-color: rgba(39,176,116,.4);
  box-shadow: 0 18px 45px rgba(39,176,116,.1);
}

.tsi-pill--blue .tsi-icon {
  color: #83baff;
  background: rgba(82,145,255,.12);
  border-color: rgba(82,145,255,.2);
}

.tsi-pill--blue:hover {
  border-color: rgba(82,145,255,.4);
  box-shadow: 0 18px 45px rgba(82,145,255,.1);
}

/* Bottom signature */

.tsi-bottom {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 17px;
  margin-top: 66px;
  color: rgba(255,255,255,.38);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .2em;
}

.tsi-bottom-line {
  width: 48px;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.25)
  );
}

.tsi-bottom-line:last-child {
  transform: rotate(180deg);
}

/* Responsive */

@media (max-width: 650px) {
  .tsi-section {
    padding: 80px 20px;
  }

  .tsi-eyebrow {
    gap: 8px;
    padding: 9px 12px;
    margin-bottom: 26px;
    font-size: 9px;
    letter-spacing: .08em;
  }

  .tsi-heading {
    font-size: clamp(36px, 10vw, 54px);
    line-height: 1.08;
  }

  .tsi-description {
    margin-top: 22px;
    font-size: 14px;
  }

  .tsi-pill-row {
    gap: 10px;
    margin-top: 34px;
  }

  .tsi-pill {
    width: 100%;
    min-height: 60px;
    justify-content: flex-start;
    padding: 0 15px;
    border-radius: 17px;
    font-size: 13px;
  }

  .tsi-pill-arrow {
    margin-left: auto;
  }

  .tsi-bottom {
    gap: 10px;
    margin-top: 45px;
    font-size: 8px;
    letter-spacing: .12em;
  }

  .tsi-bottom-line {
    width: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tsi-glow {
    animation: none;
  }

  .tsi-pill,
  .tsi-pill-arrow {
    transition: none;
  }
}

/* center text  */

/* blogs section */


/* =====================================
   GLOTEFEWO INSIGHTS
   Advanced iOS-inspired card layout
===================================== */

.insights-section {
  --ins-orange: #e4610e;
  --ins-green: #179b68;
  --ins-blue: #397edb;
  --ins-ink: #151b27;
  --ins-muted: #737d8c;

  position: relative;
  overflow: hidden;
  padding: 5% 0 5% 0;
  background:
    radial-gradient(
      ellipse at 0% 10%,
      rgba(228, 97, 14, .035),
      transparent 32%
    ),
    radial-gradient(
      ellipse at 100% 90%,
      rgba(39, 176, 116, .045),
      transparent 35%
    ),
    #fafbfc;
  color: var(--ins-ink);
  font-family: -apple-system, BlinkMacSystemFont,
    "SF Pro Display", "SF Pro Text", "Inter",
    "Segoe UI", sans-serif;
}

.insights-container {
  max-width: 1180px;
  margin: 0 auto;
}

/* =====================================
   HEADER
===================================== */

.insights-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 35px;
  margin-bottom: 44px;
}

.insights-heading-group {
  max-width: 750px;
}

.insights-eyebrow {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 22px;
  color: var(--ins-orange);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .16em;
}

.insights-eyebrow-line {
  width: 26px;
  height: 2px;
  border-radius: 10px;
  background: var(--ins-orange);
}

.insights-title {
  margin: 0;
  font-size: clamp(38px, 5vw, 61px);
  font-weight: 680;
  line-height: 1.08;
  letter-spacing: -.065em;
  color: #151b27;
  text-wrap: balance;
}

.insights-title span {
  display: block;
  color: #8c95a2;
}

.insights-intro {
  max-width: 680px;
  margin: 22px 0 0;
  color: #6e7888;
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: -.015em;
}

/* Header button */

.insights-all-link {
  display: inline-flex;
  align-items: center;
  gap: 17px;
  flex: 0 0 auto;
  padding: 14px 18px;
  border: 1px solid rgba(20, 30, 45, .1);
  border-radius: 100px;
  background: rgba(255,255,255,.72);
  color: #293241;
  text-decoration: none;
  font-size: 12px;
  font-weight: 650;
  box-shadow: 0 4px 16px rgba(20,30,45,.035);
  transition: .3s ease;
}

.insights-all-link span {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #f3f5f7;
  color: var(--ins-orange);
  font-size: 16px;
  transition: .3s ease;
}

.insights-all-link:hover {
  transform: translateY(-3px);
  border-color: rgba(228,97,14,.25);
  box-shadow: 0 12px 28px rgba(20,30,45,.07);
}

.insights-all-link:hover span {
  transform: rotate(45deg);
}

/* =====================================
   FILTER BAR
===================================== */

.insights-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
}

.insights-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  padding: 5px;
  border: 1px solid rgba(20,30,45,.07);
  border-radius: 100px;
  background: rgba(241,243,246,.8);
}

.insight-filter {
  appearance: none;
  border: 0;
  border-radius: 100px;
  padding: 10px 17px;
  background: transparent;
  color: #77808d;
  font: inherit;
  font-size: 11px;
  font-weight: 650;
  cursor: pointer;
  transition: .25s ease;
}

.insight-filter:hover {
  color: #222b38;
}

.insight-filter.is-active {
  background: #fff;
  color: #1b2430;
  box-shadow:
    0 2px 8px rgba(20,30,45,.07),
    inset 0 0 0 1px rgba(20,30,45,.04);
}

.insights-count {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #929aa5;
  font-size: 9px;
  font-weight: 750;
  letter-spacing: .14em;
  white-space: nowrap;
}

.insights-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #28b57b;
  box-shadow: 0 0 0 4px rgba(40,181,123,.1);
}

/* =====================================
   CARD GRID
===================================== */

.insights-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
}

.insight-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #e6e9ed;
  border-radius: 25px;
  background: rgba(255,255,255,.88);
  box-shadow:
    0 5px 18px rgba(20,30,45,.025),
    inset 0 1px 0 rgba(255,255,255,.9);
  transition:
    transform .4s cubic-bezier(.2,.8,.2,1),
    border-color .35s ease,
    box-shadow .35s ease;
}

.insight-card:hover {
  transform: translateY(-7px);
  border-color: #d7dce3;
  box-shadow:
    0 24px 55px rgba(20,30,45,.09),
    0 5px 15px rgba(20,30,45,.035);
}

.insight-card-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

/* =====================================
   COVER VISUAL
===================================== */

.insight-cover {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 225px;
  aspect-ratio: 1.55 / 1;
  background: #111923;
  color: #fff;
}

.cover-glow {
  position: absolute;
  inset: -20%;
  z-index: -2;
  opacity: .75;
  transition: transform .7s ease;
}

.insight-card:hover .cover-glow {
  transform: scale(1.15);
}

.cover-grid {
    position: absolute;
    inset: 0;
    z-index: -1;
    /* opacity: .15; */
    background-image: url(http://117.102.26.14/glotefewo/v2/assets/img/business-4/news/glotefewo-donarev-main.webp);
    background-size: cover;
}

.insight-cover--environment {
  background:
    radial-gradient(
      ellipse at 50% 60%,
      #1a644e,
      transparent 60%
    ),
    linear-gradient(140deg, #183d39, #0d1720);
}

.insight-cover--environment .cover-glow {
  background: radial-gradient(
    circle at 50% 50%,
    rgba(64,220,151,.4),
    transparent 55%
  );
}

.insight-cover--mobility {
  background:
    radial-gradient(
      ellipse at 50% 55%,
      #754021,
      transparent 60%
    ),
    linear-gradient(140deg, #39251d, #14171e);
}

.insight-cover--mobility .cover-glow {
  background: radial-gradient(
    circle at 50% 50%,
    rgba(255,144,72,.4),
    transparent 55%
  );
}

.insight-cover--digital {
  background:
    radial-gradient(
      ellipse at 50% 55%,
      #234e83,
      transparent 65%
    ),
    linear-gradient(140deg, #172b45, #0c1420);
}

.insight-cover--digital .cover-glow {
  background: radial-gradient(
    circle at 50% 50%,
    rgba(90,164,255,.42),
    transparent 55%
  );
}

/* Cover labels */

.insight-category {
  position: absolute;
  top: 17px;
  left: 17px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 11px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 100px;
  background: rgba(255,255,255,.1);
  color: rgba(255,255,255,.9);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  font-size: 9px;
  font-weight: 750;
  letter-spacing: .12em;
}

.category-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #6be3ad;
}

.category-orange .category-dot {
  background: #ff9a5a;
}

.category-blue .category-dot {
  background: #86baff;
}

.cover-index {
  position: absolute;
  top: 23px;
  right: 17px;
  color: rgba(255,255,255,.45);
  font-size: 9px;
  font-weight: 650;
  letter-spacing: .12em;
}

.cover-bottom-label {
  position: absolute;
  bottom: 17px;
  left: 18px;
  color: rgba(255,255,255,.58);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .08em;
}

/* =====================================
   ENVIRONMENT ART
===================================== */

.cover-illustration {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

.eco-orbit {
  position: absolute;
  width: 130px;
  height: 130px;
  border: 1px solid rgba(151,255,205,.25);
  border-radius: 50%;
  transition: transform .7s ease;
}

.orbit-a {
  transform: scale(1);
}

.orbit-b {
  width: 175px;
  height: 175px;
  border-color: rgba(151,255,205,.12);
}

.insight-card:hover .orbit-a {
  transform: scale(1.16);
}

.insight-card:hover .orbit-b {
  transform: scale(.94);
}

.eco-core {
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 28px;
  background: rgba(255,255,255,.09);
  color: #7fe5b2;
  box-shadow:
    0 15px 40px rgba(0,0,0,.16),
    inset 0 1px 0 rgba(255,255,255,.18);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  transform: rotate(-7deg);
}

.eco-core svg {
  width: 46px;
  height: 46px;
}

.eco-label {
  position: absolute;
  bottom: 55px;
  color: rgba(255,255,255,.55);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .18em;
}

/* =====================================
   MOBILITY ART
===================================== */

.mobility-art {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

.mobility-ring {
  position: absolute;
  border: 1px solid rgba(255,174,120,.18);
  border-radius: 50%;
}

.ring-one {
  width: 140px;
  height: 140px;
}

.ring-two {
  width: 190px;
  height: 190px;
  border-style: dashed;
  animation: mobilityRotate 35s linear infinite;
}

.mobility-symbol {
  display: grid;
  place-items: center;
  width: 88px;
  height: 88px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 28px;
  background: rgba(255,255,255,.09);
  color: #ffad78;
  box-shadow:
    0 15px 40px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.15);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  transform: rotate(7deg);
}

.mobility-symbol svg {
  width: 52px;
  height: 52px;
}

.mobility-label {
  position: absolute;
  bottom: 55px;
  color: rgba(255,255,255,.55);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .18em;
}

@keyframes mobilityRotate {
  to {
    transform: rotate(360deg);
  }
}

/* =====================================
   DIGITAL ART
===================================== */

.digital-art {
  position: absolute;
  inset: 0;
}

.digital-art > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.digital-center {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 65px;
  height: 65px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 22px;
  background: rgba(255,255,255,.1);
  color: #91c4ff;
  box-shadow:
    0 15px 40px rgba(0,0,0,.2),
    inset 0 1px 0 rgba(255,255,255,.15);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transform: translate(-50%, -50%);
}

.digital-center svg {
  width: 31px;
  height: 31px;
}

.digital-node {
  position: absolute;
  z-index: 2;
  width: 10px;
  height: 10px;
  border: 2px solid rgba(255,255,255,.8);
  border-radius: 50%;
  background: #6faeff;
  box-shadow: 0 0 15px rgba(111,174,255,.7);
}

.node-a {
  top: 28%;
  left: 18%;
}

.node-b {
  top: 25%;
  right: 18%;
}

.node-c {
  bottom: 20%;
  left: 28%;
}

.node-d {
  right: 25%;
  bottom: 23%;
}

.digital-label {
  position: absolute;
  right: 0;
  bottom: 55px;
  left: 0;
  color: rgba(255,255,255,.55);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .18em;
  text-align: center;
}

/* =====================================
   CARD CONTENT
===================================== */

.insight-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 24px 24px 21px;
}

.insight-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: 16px;
  color: #929aa6;
  font-size: 9px;
  font-weight: 750;
  letter-spacing: .1em;
}

.meta-separator {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #c1c7cf;
}

.insight-card-body h3 {
  margin: 0;
  color: #1c2431;
  font-size: clamp(19px, 1.7vw, 23px);
  font-weight: 670;
  line-height: 1.3;
  letter-spacing: -.045em;
  transition: color .3s ease;
}

.insight-card:hover .insight-card-body h3 {
  color: #b94f0c;
}

.insight-card-body p {
  margin: 13px 0 24px;
  color: #737d8b;
  font-size: 13px;
  line-height: 1.8;
}

.insight-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 17px;
  border-top: 1px solid #edf0f3;
}

.insight-read {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #e95924;
  font-size: 15px;
  font-weight: 700;
}

.read-arrow {
  color: var(--ins-orange);
  font-size: 16px;
  transition: transform .3s ease;
}

.insight-card:hover .read-arrow {
  transform: translate(3px, -3px);
}

.insight-date {
  color: #a0a7b1;
  font-size: 10px;
  white-space: nowrap;
}

/* =====================================
   BOTTOM CTA
===================================== */

.insights-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 30px;
  padding: 19px 22px;
  border: 1px solid rgba(20,30,45,.07);
  border-radius: 18px;
  background: rgba(255,255,255,.65);
  box-shadow: 0 4px 15px rgba(20,30,45,.02);
}

.insights-bottom-copy {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #7d8794;
  font-size: 12px;
}

.bottom-spark {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 10px;
  background: #fff1e8;
  color: var(--ins-orange);
  font-size: 16px;
}

.insights-bottom-link {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  color: #252e3a;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}

.insights-bottom-link span {
  color: var(--ins-orange);
  font-size: 19px;
  transition: transform .3s ease;
}

.insights-bottom-link:hover span {
  transform: translateX(5px);
}

/* =====================================
   FILTER FUNCTIONALITY
===================================== */

.insight-card.is-hidden {
  display: none;
}

/* =====================================
   RESPONSIVE
===================================== */

@media (max-width: 1000px) {
  .insights-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }

  .insight-card:last-child {
    grid-column: 1 / -1;
  }

  .insight-card:last-child .insight-card-link {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .insight-card:last-child .insight-cover {
    height: 100%;
    min-height: 260px;
    aspect-ratio: auto;
  }
}

@media (max-width: 680px) {
  .insights-section {
    padding: 75px 18px;
  }

  .insights-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 24px;
    margin-bottom: 30px;
  }

  .insights-title {
    font-size: clamp(36px, 9vw, 49px);
  }

  .insights-intro {
    margin-top: 18px;
    font-size: 14px;
  }

  .insights-toolbar {
    align-items: flex-start;
    flex-direction: column;
    gap: 15px;
  }

  .insights-filters {
    width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
    border-radius: 16px;
  }

  .insight-filter {
    flex: 0 0 auto;
    padding: 10px 14px;
  }

  .insights-count {
    padding-left: 4px;
  }

  .insights-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .insight-card:last-child {
    grid-column: auto;
  }

  .insight-card:last-child .insight-card-link {
    display: flex;
  }

  .insight-card:last-child .insight-cover {
    min-height: 225px;
    aspect-ratio: 1.55 / 1;
  }

  .insight-cover {
    min-height: 220px;
  }

  .insight-card-body {
    padding: 21px 20px;
  }

  .insight-card-body h3 {
    font-size: 22px;
  }

  .insights-bottom {
    align-items: flex-start;
    flex-direction: column;
    padding: 17px;
  }

  .insights-bottom-copy {
    align-items: flex-start;
    font-size: 11px;
    line-height: 1.7;
  }
}

@media (prefers-reduced-motion: reduce) {
  .insight-card,
  .insight-card *,
  .insights-section * {
    animation: none !important;
    transition: none !important;
  }
}

/* blogs section */

/* 4 columes */


/* 4 columns */


/* ========================================

   GLOTEFEWO   WHO WE SUPPORT

   Premium iOS-inspired UI

======================================== */

.audience-section {

  --aud-orange: #e4610e;

  --aud-green: #199b68;

  --aud-ink: #171c27;

  --aud-muted: #737d8b;

  position: relative;

  overflow: hidden;

  padding: 5% 0 5% 0;

  background:
    radial-gradient(ellipse at 5% 10%, rgba(228, 97, 14, .035), transparent 35%),
    radial-gradient(ellipse at 95% 85%, rgba(39, 176, 116, .035), transparent 35%),
    #f6f8f7;

  color: var(--aud-ink);

  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", "Segoe UI", sans-serif;

}

.audience-container {

  width: 100%;

  max-width: 1240px;

  margin: 0 auto;

}


/* ========================================

   HEADING

======================================== */

.audience-heading {

  max-width: 850px;

  margin-bottom: 55px;

}

.audience-eyebrow {

  display: flex;

  align-items: center;

  gap: 11px;

  margin-bottom: 24px;

  color: var(--aud-orange);

  font-size: 11px;

  font-weight: 750;

  letter-spacing: .18em;

}

.audience-eyebrow > span {

  width: 27px;

  height: 2px;

  border-radius: 10px;

  background: var(--aud-orange);

}

.audience-title {

  margin: 0;

  font-size: clamp(38px, 5.3vw, 66px);

  line-height: 1.08;

  letter-spacing: -.065em;

  font-weight: 700;

  color: #171c27;

  text-wrap: nowrap;

}

.audience-title span {

  display: block;

  color: #89929d;

}

.audience-description {

  max-width: 690px;

  margin: 23px 0 0;

  color: #727c89;

  font-size: 16px;

  line-height: 1.8;

  letter-spacing: -.015em;

}


/* ========================================

   GRID

======================================== */

.audience-grid {

  display: grid;

  grid-template-columns: repeat(4, minmax(0, 1fr));

  gap: 19px;

  align-items: stretch;

}


/* ========================================

   CARDS

======================================== */

.audience-card {

  position: relative;

  isolation: isolate;

  display: flex;

  flex-direction: column;
  height:90%;

  min-width: 0;

  overflow: hidden;

  padding: 27px 25px 23px;

  border: 1px solid rgba(31, 43, 55, .09);

  border-radius: 25px;

  background: rgba(255, 255, 255, .82);

  box-shadow:
    0 4px 18px rgba(23, 34, 45, .025),
    inset 0 1px 0 rgba(255,255,255,.95);

  transition:
    transform .45s cubic-bezier(.2,.8,.2,1),
    border-color .45s ease,
    box-shadow .45s ease,
    background-color .5s ease,
    color .45s ease;

  will-change: transform, background-color, box-shadow;

}

.audience-card:hover {

  transform: translateY(-7px);

  border-color: rgba(228, 97, 14, .2);

  box-shadow:
    0 22px 48px rgba(23, 34, 45, .075),
    0 5px 14px rgba(23, 34, 45, .025),
    inset 0 1px 0 rgba(255,255,255,.95);

  background-color: #000000;

}


/* Card ambient glow */

.audience-card-glow {

  position: absolute;

  z-index: -1;

  top: -100px;

  right: -100px;

  width: 220px;

  height: 220px;

  border-radius: 50%;

  background: rgba(228, 97, 14, .07);

  filter: blur(55px);

  opacity: 0;

  transition: opacity .5s ease, transform .5s ease;

  pointer-events: none;

}

.audience-card:hover .audience-card-glow {

  opacity: 1;

}


/* ========================================

   CARD TOP

======================================== */

.audience-card-top {

  display: flex;

  align-items: flex-start;

  justify-content: space-between;

  gap: 15px;

  margin-bottom: 27px;

}

.audience-icon {

  display: grid;

  place-items: center;

  width: 61px;

  height: 61px;

  flex: 0 0 61px;

  border: 1px solid rgba(255,255,255,.8);

  border-radius: 19px;

  box-shadow:
    0 5px 14px rgba(25,35,45,.035),
    inset 0 1px 0 rgba(255,255,255,.8);

  transition:
    transform .45s cubic-bezier(.2,.8,.2,1),
    border-radius .4s ease;

}

.audience-card:hover .audience-icon {

  transform: translateY(-3px) scale(1.04);

  border-radius: 22px;

}

.audience-icon svg {

  width: 25px;

  height: 25px;

}

.icon-orange {

  color: #e4610e;

  background: #fff0e6;

}

.icon-green {

  color: #168b60;

  background: #e6f5ed;

}

.icon-blue {

  color: #397edb;

  background: #eaf1ff;

}

.icon-purple {

  color: #8263c5;

  background: #f1ebff;

}

.audience-number {

  padding-top: 5px;

  color: #e95924;

  font-size: 25px;

  font-weight: 750;

  letter-spacing: .1em;

}


/* ========================================

   CARD CONTENT

======================================== */

.audience-card-content {

  flex: 1;

}


/* Normal label color */

.audience-card-label {

  display: block;

  margin-bottom: 11px;

  color: #eb9f6d;

  font-size: 13px;

  font-weight: 750;

  letter-spacing: .12em;

  line-height: 1.5;

  transition: color .45s ease;

}


/* ========================================

   LABEL HOVER — WHITE

======================================== */

.audience-card:hover .audience-card-label {

  color: #eb9f6d;

}


.audience-card h3 {

  margin: 0;

  color: #1b2330;

  font-size: clamp(20px, 1.65vw, 24px);

  font-weight: 680;

  line-height: 1.22;

  letter-spacing: -.045em;

  overflow-wrap: break-word;

  transition: color .45s ease;

}

.audience-card:hover h3 {

  color: #ffffff;

}

.audience-card p {

  margin: 15px 0 25px;

  color: #737d8b;

  font-size: 13px;

  line-height: 1.8;

  letter-spacing: -.01em;

  transition: color .45s ease;

}

.audience-card:hover p {

  margin: 15px 0 25px;

  color: #fff;

  font-size: 13px;

  line-height: 1.8;

  letter-spacing: -.01em;

}


/* ========================================

   CARD LINK

======================================== */

.audience-card-link {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 10px;

  margin-top: auto;

  padding-top: 17px;

  border-top: 1px solid #edf0f2;

  color: #323c49;

  font-size: 11px;

  font-weight: 700;

  text-decoration: none;

  transition: color .45s ease, border-color .45s ease;

}

.audience-arrow {

  display: grid;

  place-items: center;

  width: 30px;

  height: 30px;

  flex: 0 0 30px;

  border: 1px solid rgba(31,43,55,.07);

  border-radius: 50%;

  background: #f7f8f9;

  color: var(--aud-orange);

  font-size: 16px;

  transition:
    transform .4s cubic-bezier(.2,.8,.2,1),
    background-color .45s ease,
    color .45s ease,
    border-color .45s ease;

}

.audience-card:hover .audience-arrow {

  transform: rotate(45deg);

  background: #fff0e6;

  color: #d65307;

}


/* ========================================

   BOTTOM BAR

======================================== */

.audience-bottom {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 20px;

  margin-top: 28px;

  padding: 18px 22px;

  border: 1px solid rgba(31,43,55,.07);

  border-radius: 18px;

  background: rgba(255,255,255,.65);

  box-shadow: 0 4px 15px rgba(23,34,45,.02);

  backdrop-filter: blur(16px);

  -webkit-backdrop-filter: blur(16px);

}

.audience-bottom-left {

  display: flex;

  align-items: center;

  gap: 11px;

  color: #7c8693;

  font-size: 12px;

  line-height: 1.5;

}

.audience-status-dot {

  width: 7px;

  height: 7px;

  flex: 0 0 7px;

  border-radius: 50%;

  background: #25ae77;

  box-shadow: 0 0 0 4px rgba(37,174,119,.1);

}

.audience-bottom-link {

  display: inline-flex;

  align-items: center;

  gap: 12px;

  color: #27313e;

  font-size: 12px;

  font-weight: 700;

  text-decoration: none;

  white-space: nowrap;

}

.audience-bottom-link span {

  color: var(--aud-orange);

  font-size: 19px;

  transition: transform .3s ease;

}

.audience-bottom-link:hover span {

  transform: translateX(5px);

}


/* ========================================

   TABLET

======================================== */

@media (max-width: 1050px) {

  .audience-grid {

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 20px;

  }

  .audience-card {

    min-height: 325px;

    padding: 26px;

  }

  .audience-card h3 {

    font-size: 24px;

  }

}


/* ========================================

   MOBILE

======================================== */

@media (max-width: 600px) {

  .audience-section {

    padding: 72px 17px;

  }

  .audience-heading {

    margin-bottom: 34px;

  }

  .audience-title {

    font-size: clamp(36px, 9vw, 49px);

    line-height: 1.1;

  }

  .audience-description {

    margin-top: 19px;

    font-size: 14px;

    line-height: 1.8;

  }

  .audience-grid {

    grid-template-columns: 1fr;

    gap: 15px;

  }

  .audience-card {

    min-height: 0;

    padding: 24px 23px 20px;

    border-radius: 23px;

  }

  .audience-card-top {

    margin-bottom: 22px;

  }

  .audience-card h3 {

    font-size: 24px;

  }

  .audience-card p {

    font-size: 13px;

    margin-bottom: 23px;

  }

  .audience-bottom {

    align-items: flex-start;

    flex-direction: column;

    gap: 15px;

    padding: 18px;

  }

  .audience-bottom-left {

    font-size: 11px;

  }

}


/* ========================================

   ACCESSIBILITY

======================================== */

@media (prefers-reduced-motion: reduce) {

  .audience-section *,

  .audience-section *::before,

  .audience-section *::after {

    animation: none !important;

    transition: none !important;

    scroll-behavior: auto !important;

  }

}


/* 4 columes */

/* about hero section */


/* =====================================
   GLOTEFEWO   PURPOSE SECTION
   Premium iOS-inspired design
===================================== */

.purpose-section {
  --purpose-orange: #e4610e;
  --purpose-green: #27b074;
  --purpose-ink: #171c27;
  --purpose-muted: #727d8b;

  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(80px, 9vw, 125px) 24px;
  background:
    radial-gradient(
      ellipse at 5% 10%,
      rgba(228,97,14,.035),
      transparent 36%
    ),
    radial-gradient(
      ellipse at 95% 90%,
      rgba(39,176,116,.04),
      transparent 35%
    ),
    #f7f9f8;
  color: var(--purpose-ink);
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Display",
    "SF Pro Text",
    "Inter",
    "Segoe UI",
    sans-serif;
}

.purpose-container {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr);
  align-items: center;
  gap: clamp(45px, 7vw, 100px);
}
.purpose-container-pri {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  align-items: center;
  gap: clamp(45px, 7vw, 100px);
}

/* =====================================
   LEFT CONTENT
===================================== */

.purpose-copy {
  min-width: 0;
}

.purpose-eyebrow {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 25px;
  color: var(--purpose-orange);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .19em;
}

.purpose-eyebrow-line {
  width: 27px;
  height: 2px;
  border-radius: 20px;
  background: var(--purpose-orange);
}

.purpose-heading {
  margin: 0;
  color: #171c27;
  font-size: 25px !important;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.065em;
  text-wrap: balance;
}

.purpose-heading span {
  display: block;
  margin-top: 4px;
  color: #89929d;
}

.purpose-lead {
  margin: 24px 0 0;
  color: #4e5968;
  font-size: clamp(17px, 1.6vw, 21px);
  line-height: 1.7;
  letter-spacing: -.02em;
}

.purpose-text {
  margin: 22px 0 22px;
  color: #747e8b;
  font-size: 14px;
  line-height: 1.9;
  letter-spacing: -.005em;
}

/* Small value tags */

.purpose-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 27px;
}

.purpose-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 13px;
  border: 1px solid rgba(30,42,54,.07);
  border-radius: 100px;
  background: rgba(255,255,255,.75);
  color: #5c6674;
  font-size: 10px;
  font-weight: 650;
  box-shadow: 0 3px 10px rgba(20,30,45,.025);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition:
    transform .3s ease,
    border-color .3s ease,
    box-shadow .3s ease;
}

.purpose-tag:hover {
  transform: translateY(-2px);
  border-color: rgba(228,97,14,.2);
  box-shadow: 0 8px 18px rgba(20,30,45,.05);
}

.tag-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.tag-dot--orange {
  background: #e4610e;
}

.tag-dot--green {
  background: #27b074;
}

.tag-dot--blue {
  background: #548fe2;
}

/* =====================================
   DARK VISION / MISSION PANEL
===================================== */

.purpose-panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 28px;
  background:
    linear-gradient(
      145deg,
      #191a20 0%,
      #15161c 55%,
      #191714 100%
    );
  color: #fff;
  box-shadow:
    0 25px 65px rgba(18,25,35,.12),
    0 5px 16px rgba(18,25,35,.04),
    inset 0 1px 0 rgba(255,255,255,.07);
}

/* Soft ambient light */

.purpose-panel-glow {
  position: absolute;
  z-index: -1;
  top: -180px;
  right: -150px;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: rgba(228,97,14,.13);
  filter: blur(100px);
  pointer-events: none;
}

.purpose-panel::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: .12;
  background-image:
    linear-gradient(
      rgba(255,255,255,.08) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.08) 1px,
      transparent 1px
    );
  background-size: 45px 45px;
  mask-image: linear-gradient(
    135deg,
    black,
    transparent 70%
  );
  pointer-events: none;
}

/* =====================================
   PANEL ITEMS
===================================== */

.purpose-item {
  position: relative;
  padding: clamp(27px, 3.5vw, 43px);
  transition: background .3s ease;
}

.purpose-item:hover {
  background: rgba(255,255,255,.018);
}

.purpose-item-heading {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 17px;
}

.purpose-icon {
  display: grid;
  place-items: center;
  width: 43px;
  height: 43px;
  flex: 0 0 43px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 15px;
  background: rgba(255,255,255,.055);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
  transition:
    transform .3s ease,
    background .3s ease;
}

.purpose-icon svg {
  width: 21px;
  height: 21px;
}

.purpose-icon--vision {
  color: #ff8a3d;
}

.purpose-icon--mission {
  color: #ff9a5a;
}

.purpose-item:hover .purpose-icon {
  transform: translateY(-2px);
  background: rgba(255,255,255,.09);
}

.purpose-item-heading > div:nth-child(2) {
  min-width: 0;
}

.purpose-item-kicker {
  display: block;
  margin-bottom: 4px;
  color: rgba(255,255,255,.4);
  font-size: 8px;
  font-weight: 750;
  letter-spacing: .16em;
}

.purpose-item h3 {
  margin: 0;
  color: #fff;
  font-size: 21px;
  font-weight: 680;
  letter-spacing: -.04em;
}

.purpose-item-number {
  margin-left: auto;
  color: rgba(255,255,255,.24);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .12em;
}

/* Item descriptions */

.purpose-vision-text,
.purpose-mission-text {
  margin: 0;
  color: rgba(226,231,239,.72);
  font-size: 14px;
  line-height: 1.85;
  letter-spacing: -.01em;
}

.purpose-vision-text strong {
  color: #fff;
  font-weight: 650;
}

/* Item footer */

.purpose-item-footer {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 22px;
  color: rgba(255,255,255,.38);
  font-size: 10px;
  font-weight: 550;
  letter-spacing: .015em;
}

.purpose-footer-line {
  width: 20px;
  height: 1px;
  background: #e4610e;
}

/* Divider */

.purpose-divider {
  height: 1px;
  margin: 0 28px;
  background: rgba(255,255,255,.1);
}

/* Bottom signature */

.purpose-panel-bottom {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 17px 35px;
  border-top: 1px solid rgba(255,255,255,.055);
  background: rgba(255,255,255,.018);
  color: rgba(255,255,255,.36);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .1em;
}

.purpose-panel-mark {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.purpose-panel-mark span {
  display: block;
  width: 3px;
  border-radius: 5px;
  background: #e4610e;
}

.purpose-panel-mark span:nth-child(1) {
  height: 6px;
}

.purpose-panel-mark span:nth-child(2) {
  height: 12px;
  background: #ff9a5a;
}

.purpose-panel-mark span:nth-child(3) {
  height: 8px;
  background: #27b074;
}

/* =====================================
   TABLET
===================================== */

@media (max-width: 950px) {
  .purpose-container {
    grid-template-columns: 1fr;
    gap: 42px;
    max-width: 720px;
  }

  .purpose-heading {
    max-width: 700px;
  }

  .purpose-panel {
    width: 100%;
  }
}

/* =====================================
   MOBILE
===================================== */

@media (max-width: 600px) {
  .purpose-section {
    padding: 70px 17px;
  }

  .purpose-container {
    gap: 32px;
  }

  .purpose-eyebrow {
    margin-bottom: 20px;
    font-size: 9px;
  }

  .purpose-heading {
    font-size: clamp(35px, 9vw, 48px);
    line-height: 1.1;
  }

  .purpose-lead {
    margin-top: 20px;
    font-size: 16px;
    line-height: 1.75;
  }

  .purpose-text {
    margin-top: 18px;
    font-size: 13px;
    line-height: 1.85;
  }

  .purpose-tags {
    gap: 7px;
    margin-top: 22px;
  }

  .purpose-tag {
    padding: 9px 11px;
    font-size: 9px;
  }

  .purpose-panel {
    border-radius: 23px;
  }

  .purpose-item {
    padding: 25px 21px;
  }

  .purpose-item-heading {
    gap: 12px;
  }

  .purpose-icon {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
    border-radius: 14px;
  }

  .purpose-item h3 {
    font-size: 19px;
  }

  .purpose-item-kicker {
    font-size: 7px;
  }

  .purpose-vision-text,
  .purpose-mission-text {
    font-size: 13px;
    line-height: 1.8;
  }

  .purpose-divider {
    margin: 0 20px;
  }

  .purpose-panel-bottom {
    padding: 16px 22px;
  }
}

/* =====================================
   ACCESSIBILITY
===================================== */

@media (prefers-reduced-motion: reduce) {
  .purpose-section *,
  .purpose-section *::before,
  .purpose-section *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* about hero section */

/* end section */


/* ==================================
   GLOTEFEWO   PREMIUM CTA
   Classic + iOS-inspired
================================== */

.next-cta {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    margin: 40px auto;
    width: 85%;
    max-width: 1526px;
    padding: 40px 0 40px 0;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 32px;
    background: linear-gradient(
      135deg,
      #171719 0%,
      #111113 48%,
      #171411 100%
    );
    color: #fff;
    font-family: -apple-system, BlinkMacSystemFont,
    "SF Pro Display", "SF Pro Text", "Inter",
    "Segoe UI", sans-serif;
    box-shadow: 0 25px 75px rgba(15, 20, 30, .12),
    inset 0 1px 0 rgba(255,255,255,.06);
}

/* Background effects */

.next-cta__glow {
  position: absolute;
  z-index: -1;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  filter: blur(110px);
  opacity: .18;
  pointer-events: none;
}

.next-cta__glow--orange {
  top: -350px;
  left: 10%;
  background: #e4610e;
}

.next-cta__glow--green {
  right: -250px;
  bottom: -380px;
  background: #1eae76;
  opacity: .13;
}

.next-cta__grid {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .13;
  background-image:
    linear-gradient(
      rgba(255,255,255,.1) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.1) 1px,
      transparent 1px
    );
  background-size: 70px 70px;
  mask-image: radial-gradient(
    ellipse at center,
    black,
    transparent 75%
  );
  pointer-events: none;
}

/* Inner content */

.next-cta__inner {
  position: relative;
  z-index: 1;
  width: min(1050px, 100%);
  margin: 0 auto;
  text-align: center;
}

/* Eyebrow */

.next-cta__eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 25px;
  color: #ff9a5a;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .19em;
  line-height: 1.5;
}

.next-cta__eyebrow-line {
  display: block;
  width: 25px;
  height: 1px;
  border-radius: 10px;
  background: linear-gradient(
    90deg,
    #e4610e,
    #ff9a5a
  );
}

/* Heading */

.next-cta__title {
  max-width: 950px;
  margin: 0 auto;
  color: #fff;
  font-size: 50px;
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -.065em;
  text-wrap: balance;
}

.next-cta__title span {
  display: block;
  margin-top: 5px;
  background: linear-gradient(
    100deg,
    #fff 5%,
    #e5e5e8 48%,
    #a7abb4 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Description */

.next-cta__description {
  max-width: 990px;
  margin: 25px auto 0;
  color: rgba(235,238,244,.76);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: -.018em;
}

/* Buttons */

.next-cta__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 36px;
}

.next-cta__button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  min-height: 54px;
  padding: 0 24px;
  border: 1px solid transparent;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: -.015em;
  text-decoration: none;
  transition:
    transform .3s cubic-bezier(.2,.8,.2,1),
    background .3s ease,
    border-color .3s ease,
    box-shadow .3s ease;
}

.next-cta__button svg {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  transition: transform .3s ease;
}

/* Primary button */

.next-cta__button--primary {
  color: #fff;
  background: linear-gradient(
    135deg,
    #f16b16,
    #d95106
  );
  box-shadow:
    0 8px 25px rgba(228,97,14,.2),
    inset 0 1px 0 rgba(255,255,255,.25);
}

.next-cta__button--primary:hover {
  transform: translateY(-3px);
  background: linear-gradient(
    135deg,
    #ff7a25,
    #e45a08
  );
  box-shadow:
    0 14px 35px rgba(228,97,14,.3),
    inset 0 1px 0 rgba(255,255,255,.3);
}

.next-cta__button--primary:hover svg {
  transform: translateX(4px);
}

/* Secondary button */

.next-cta__button--secondary {
  color: rgba(255,255,255,.92);
  border-color: rgba(255,255,255,.32);
  background: rgba(255,255,255,.045);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.next-cta__button--secondary:hover {
  transform: translateY(-3px);
  border-color: rgba(255,255,255,.6);
  background: rgba(255,255,255,.1);
  box-shadow: 0 12px 30px rgba(0,0,0,.15);
}

.next-cta__button--secondary:hover svg {
  transform: translate(3px, -3px);
}

/* Bottom signature */

.next-cta__footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 53px;
  color: rgba(255,255,255,.42);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .11em;
}

.next-cta__footer-mark {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 15px;
}

.next-cta__footer-mark span {
  display: block;
  width: 3px;
  border-radius: 5px;
  background: #e4610e;
}

.next-cta__footer-mark span:nth-child(1) {
  height: 7px;
}

.next-cta__footer-mark span:nth-child(2) {
  height: 14px;
  background: #f18a4d;
}

.next-cta__footer-mark span:nth-child(3) {
  height: 9px;
  background: #35b985;
}

/* ==================================
   RESPONSIVE
================================== */

@media (max-width: 700px) {
  .next-cta {
    width: calc(100% - 28px);
    margin: 24px auto;
    padding: 70px 20px;
    border-radius: 25px;
  }

  .next-cta__eyebrow {
    gap: 8px;
    margin-bottom: 23px;
    font-size: 9px;
    letter-spacing: .12em;
  }

  .next-cta__eyebrow-line {
    width: 16px;
  }

  .next-cta__title {
    font-size: clamp(36px, 9.5vw, 54px);
    line-height: 1.08;
  }

  .next-cta__description {
    margin-top: 22px;
    font-size: 14px;
    line-height: 1.8;
  }

  .next-cta__actions {
    flex-direction: column;
    gap: 12px;
    margin-top: 30px;
  }

  .next-cta__button {
    width: min(100%, 300px);
    min-height: 53px;
    box-sizing: border-box;
  }

  .next-cta__footer {
    margin-top: 38px;
    font-size: 9px;
    letter-spacing: .07em;
  }
}

/* Accessibility */

@media (prefers-reduced-motion: reduce) {
  .next-cta *,
  .next-cta *::before,
  .next-cta *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* end section */

/* banner section  */


/* =========================================
   GLOTEFEWO   ABOUT HERO
   Dark premium / iOS-inspired aesthetic
========================================= */

.about-hero {
  --hero-orange: #e4610e;
  --hero-orange-light: #ff8b45;
  --hero-blue: #18294b;
  --hero-bg: #0d0e12;

  position: relative;
  isolation: isolate;
  min-height: 590px;
  overflow: hidden;
  display: flex;
  align-items: stretch;
  background-image: url('../img/business-4/banner abt g.f. v2.png');
  background-repeat:no-repeat;
  background-size: cover;
  color: #f8f9fb;
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Display",
    "SF Pro Text",
    "Inter",
    "Segoe UI",
    sans-serif;
}

.contact-hero {
  --hero-orange: #e4610e;
  --hero-orange-light: #ff8b45;
  --hero-blue: #18294b;
  --hero-bg: #0d0e12;

  position: relative;
  isolation: isolate;
  min-height: 590px;
  overflow: hidden;
  display: flex;
  align-items: stretch;
  background-image: url('../img/business-4/banner-contactpg-g.f..png');
  background-repeat:no-repeat;
  background-size: cover;
  color: #f8f9fb;
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Display",
    "SF Pro Text",
    "Inter",
    "Segoe UI",
    sans-serif;
}

.privacy-hero {
  --hero-orange: #e4610e;
  --hero-orange-light: #ff8b45;
  --hero-blue: #18294b;
  --hero-bg: #0d0e12;

  position: relative;
  isolation: isolate;
  min-height: 590px;
  overflow: hidden;
  display: flex;
  align-items: stretch;
  background-image: url('../img/business-4/banner-privacy-policy-g.f..png');
  background-repeat:no-repeat;
  background-size: cover;
  color: #f8f9fb;
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Display",
    "SF Pro Text",
    "Inter",
    "Segoe UI",
    sans-serif;
}

.cookies-hero {
  --hero-orange: #e4610e;
  --hero-orange-light: #ff8b45;
  --hero-blue: #18294b;
  --hero-bg: #0d0e12;

  position: relative;
  isolation: isolate;
  min-height: 590px;
  overflow: hidden;
  display: flex;
  align-items: stretch;
  background-image: url('../img/business-4/banner-cookie-policy-g.f..png');
  background-repeat:no-repeat;
  background-size: cover;
  color: #f8f9fb;
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Display",
    "SF Pro Text",
    "Inter",
    "Segoe UI",
    sans-serif;
}

.terms-hero {
  --hero-orange: #e4610e;
  --hero-orange-light: #ff8b45;
  --hero-blue: #18294b;
  --hero-bg: #0d0e12;

  position: relative;
  isolation: isolate;
  min-height: 590px;
  overflow: hidden;
  display: flex;
  align-items: stretch;
  background-image: url('../img/business-4/banner-t&c-g.f..png');
  background-repeat:no-repeat;
  background-size: cover;
  color: #f8f9fb;
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Display",
    "SF Pro Text",
    "Inter",
    "Segoe UI",
    sans-serif;
}

.news-hero {
  --hero-orange: #e4610e;
  --hero-orange-light: #ff8b45;
  --hero-blue: #18294b;
  --hero-bg: #0d0e12;

  position: relative;
  isolation: isolate;
  min-height: 590px;
  overflow: hidden;
  display: flex;
  align-items: stretch;
  background-image: url('../img/business-4/banner-news-g.f..png');
  background-repeat:no-repeat;
  background-position : center;
  background-size: cover;
  color: #f8f9fb;
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Display",
    "SF Pro Text",
    "Inter",
    "Segoe UI",
    sans-serif;
}

.newsdetail-hero {
  --hero-orange: #e4610e;
  --hero-orange-light: #ff8b45;
  --hero-blue: #18294b;
  --hero-bg: #0d0e12;

  position: relative;
  isolation: isolate;
  min-height: 590px;
  overflow: hidden;
  display: flex;
  align-items: stretch;
  background-image: url('../img/business-4/news/glotefewo-donarev.png');
  background-repeat:no-repeat;
  background-position : center;
  background-size: cover;
  color: #f8f9fb;
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Display",
    "SF Pro Text",
    "Inter",
    "Segoe UI",
    sans-serif;
}

/* =========================================
   AMBIENT COLOR LIGHTING
========================================= */

.about-hero__glow {
  position: absolute;
  z-index: -2;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(85px);
  will-change: transform;
}

/* Warm orange glow   top right */

.about-hero__glow--orange {
  width: min(55vw, 850px);
  height: min(55vw, 850px);
  top: -57%;
  right: -16%;
  background: radial-gradient(
    circle,
    rgba(180, 66, 12, .52) 0%,
    rgba(130, 48, 13, .30) 34%,
    rgba(80, 33, 16, .12) 58%,
    transparent 73%
  );
  animation: hero-orange-drift 13s ease-in-out infinite alternate;
}

/* Deep blue glow   bottom left */

.about-hero__glow--blue {
  width: min(65vw, 950px);
  height: min(65vw, 950px);
  left: -28%;
  bottom: -90%;
  background: radial-gradient(
    circle,
    rgba(28, 49, 91, .68) 0%,
    rgba(24, 41, 75, .42) 36%,
    rgba(18, 28, 52, .18) 59%,
    transparent 74%
  );
  animation: hero-blue-drift 16s ease-in-out infinite alternate;
}

@keyframes hero-orange-drift {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }
  to {
    transform: translate3d(-4%, 5%, 0) scale(1.08);
  }
}

@keyframes hero-blue-drift {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }
  to {
    transform: translate3d(5%, -4%, 0) scale(1.07);
  }
}

/* Subtle texture */

.about-hero__noise {
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  opacity: .13;
  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='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.2'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

/* =========================================
   CONTAINER
========================================= */

.about-hero__container {
  position: relative;
  width: 100%;
  max-width: 1440px;
  min-height: inherit;
  margin: 0 auto;
  padding: 160px clamp(24px, 11.6vw, 175px) 40px;
  display: flex;
  flex-direction: column;
}

/* =========================================
   BREADCRUMB
========================================= */

.about-hero__breadcrumb {
  display: flex;
  align-items: center;
  gap: 13px;
  color: rgba(255,255,255,.88);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -.01em;
}

.about-hero__breadcrumb a {
  color: rgba(215,223,235,.78);
  text-decoration: none;
  transition: color .25s ease;
}

.about-hero__breadcrumb a:hover {
  color: var(--hero-orange-light);
}

.about-hero__slash {
  color: rgba(255,255,255,.28);
}

.about-hero__breadcrumb [aria-current="page"] {
  color: #fff;
}

/* =========================================
   MAIN CONTENT
========================================= */

.about-hero__content {
  max-width: 900px;
  margin-top: 48px;
  padding-bottom: 55px;
}

.about-hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 27px;
  color: var(--hero-orange-light);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .2em;
}

.about-hero__eyebrow-line {
  width: 31px;
  height: 2px;
  flex: 0 0 31px;
  border-radius: 10px;
  background: var(--hero-orange);
  box-shadow: 0 0 12px rgba(228,97,14,.35);
}

/* =========================================
   TYPOGRAPHY
========================================= */

.about-hero__title {
    max-width: 950px;
    margin: 0;
    color: #f8f8fa;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 74px;
    font-weight: 650;
    line-height: .99;
    letter-spacing: -.055em;
    text-wrap: balance;
}

.about-hero__title span {
  display: block;
  color: #f1f2f5;
  background: linear-gradient(
    100deg,
    #ffffff 0%,
    #f4e9df 56%,
    #e6a77e 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.about-hero__description {
  max-width: 790px;
  margin: 27px 0 0;
  color: rgba(224,230,240,.83);
  font-size: clamp(16px, 1.65vw, 21px);
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: -.025em;
}

/* =========================================
   META TAGS
========================================= */

.about-hero__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 31px;
  color: rgba(218,225,236,.63);
  font-size: 11px;
  font-weight: 550;
  letter-spacing: .035em;
}

.about-hero__meta-dot {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: #36c58a;
  box-shadow: 0 0 0 4px rgba(54,197,138,.1),
              0 0 13px rgba(54,197,138,.28);
}

.about-hero__meta-separator {
  color: rgba(255,255,255,.25);
}

/* =========================================
   SCROLL INDICATOR
========================================= */

.about-hero__scroll {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: 20px;
  color: rgba(220,227,238,.4);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .18em;
}

.about-hero__scroll-line {
  position: relative;
  width: 35px;
  height: 1px;
  overflow: hidden;
  background: rgba(255,255,255,.2);
}

.about-hero__scroll-line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--hero-orange-light);
  transform: translateX(-100%);
  animation: hero-scroll-line 2.5s ease-in-out infinite;
}

@keyframes hero-scroll-line {
  0% {
    transform: translateX(-100%);
  }
  55%, 100% {
    transform: translateX(100%);
  }
}

/* =========================================
   TABLET
========================================= */

@media (max-width: 900px) {
  .about-hero {
    min-height: 560px;
  }

  .about-hero__container {
    padding: 48px 7vw 35px;
  }

  .about-hero__content {
    margin-top: 55px;
  }

  .about-hero__glow--orange {
    width: 80vw;
    height: 80vw;
    right: -35%;
    top: -40%;
  }

  .about-hero__glow--blue {
    width: 90vw;
    height: 90vw;
    left: -45%;
    bottom: -70%;
  }
}

/* =========================================
   MOBILE
========================================= */

@media (max-width: 600px) {
  .about-hero {
    min-height: 590px;
  }

  .about-hero__container {
    padding: 30px 22px 27px;
  }

  .about-hero__breadcrumb {
    gap: 10px;
    font-size: 12px;
  }

  .about-hero__content {
    margin-top: 68px;
    padding-bottom: 45px;
  }

  .about-hero__eyebrow {
    margin-bottom: 23px;
    font-size: 9px;
    letter-spacing: .16em;
  }

  .about-hero__eyebrow-line {
    width: 25px;
    flex-basis: 25px;
  }

  .about-hero__title {
    font-size: clamp(46px, 12vw, 65px);
    line-height: 1.02;
    letter-spacing: -.055em;
  }

  .about-hero__description {
    margin-top: 23px;
    font-size: 15px;
    line-height: 1.8;
  }

  .about-hero__meta {
    gap: 9px;
    margin-top: 26px;
    font-size: 9px;
  }

  .about-hero__scroll {
    font-size: 8px;
    letter-spacing: .15em;
  }

  .about-hero__glow--orange {
    width: 110vw;
    height: 110vw;
    top: -22%;
    right: -58%;
    filter: blur(65px);
  }

  .about-hero__glow--blue {
    width: 120vw;
    height: 120vw;
    left: -65%;
    bottom: -48%;
    filter: blur(70px);
  }
}

/* =========================================
   ACCESSIBILITY
========================================= */

@media (prefers-reduced-motion: reduce) {
  .about-hero__glow,
  .about-hero__scroll-line::after {
    animation: none !important;
  }

  .about-hero__breadcrumb a {
    transition: none;
  }
}

/* banner section  */

/* area we hire */


/* =========================================
   GLOTEFEWO   CAREER AREAS
   Premium iOS-inspired cards
========================================= */

.career-section {
  --career-orange: #e4610e;
  --career-green: #27b074;
  --career-ink: #18202b;
  --career-muted: #737e8b;

  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(80px, 9vw, 125px) 24px;
  background:
    radial-gradient(
      ellipse at 0% 0%,
      rgba(228,97,14,.045),
      transparent 34%
    ),
    radial-gradient(
      ellipse at 100% 100%,
      rgba(39,176,116,.045),
      transparent 35%
    ),
    #f6f8f7;
  color: var(--career-ink);
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Display",
    "SF Pro Text",
    "Inter",
    "Segoe UI",
    sans-serif;
}

.career-container {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
}

/* =========================================
   HEADER
========================================= */

.career-header {
  margin-bottom: 43px;
}

.career-eyebrow {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 23px;
  color: var(--career-orange);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .19em;
}

.career-eyebrow-line {
  width: 27px;
  height: 2px;
  border-radius: 10px;
  background: var(--career-orange);
}

.career-heading-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
}

.career-title {
  max-width: 780px;
  margin: 0;
  color: #18202b;
  font-size: clamp(38px, 5.1vw, 64px);
  line-height: 1.08;
  font-weight: 720;
  letter-spacing: -.065em;
  text-wrap: balance;
}

.career-title span {
  display: block;
  color: #8b949f;
}

.career-description {
  max-width: 650px;
  margin: 20px 0 0;
  color: var(--career-muted);
  font-size: 15px;
  line-height: 1.8;
}

/* Career count */

.career-count {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 0 0 105px;
  width: 105px;
  height: 105px;
  border: 1px solid rgba(30,42,54,.08);
  border-radius: 28px;
  background: rgba(255,255,255,.7);
  box-shadow:
    0 8px 25px rgba(20,30,45,.035),
    inset 0 1px 0 rgba(255,255,255,.9);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.career-count-number {
  color: var(--career-orange);
  font-size: 32px;
  font-weight: 750;
  line-height: 1;
  letter-spacing: -.06em;
}

.career-count-label {
  margin-top: 8px;
  color: #8c96a2;
  font-size: 8px;
  font-weight: 750;
  letter-spacing: .12em;
}

/* =========================================
   GRID
========================================= */

.career-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 17px;
  align-items: stretch;
}

/* =========================================
   CAREER CARD
========================================= */

.career-card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 315px;
  overflow: hidden;
  padding: 25px;
  border: 1px solid rgba(31,43,55,.085);
  border-radius: 24px;
  background: rgba(255,255,255,.82);
  box-shadow:
    0 4px 18px rgba(23,34,45,.025),
    inset 0 1px 0 rgba(255,255,255,.95);
  color: inherit;
  text-decoration: none;
  transition:
    transform .4s cubic-bezier(.2,.8,.2,1),
    border-color .35s ease,
    box-shadow .35s ease;
}

.career-card:hover {
  transform: translateY(-6px);
  border-color: rgba(228,97,14,.22);
  box-shadow:
    0 20px 45px rgba(23,34,45,.075),
    0 4px 12px rgba(23,34,45,.025),
    inset 0 1px 0 rgba(255,255,255,.95);
}

.career-card:focus-visible {
  outline: 3px solid rgba(228,97,14,.5);
  outline-offset: 4px;
}

/* Ambient glow */

.career-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -115px;
  right: -115px;
  width: 230px;
  height: 230px;
  border-radius: 50%;
  background: rgba(228,97,14,.09);
  filter: blur(55px);
  opacity: 0;
  transition: opacity .4s ease;
  pointer-events: none;
}

.career-card:hover::before {
  opacity: 1;
}

/* =========================================
   CARD TOP / ICON
========================================= */

.career-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 25px;
}

.career-icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  border: 1px solid rgba(255,255,255,.85);
  border-radius: 18px;
  box-shadow:
    0 5px 14px rgba(20,30,45,.035),
    inset 0 1px 0 rgba(255,255,255,.8);
  transition:
    transform .35s ease,
    border-radius .35s ease;
}

.career-icon svg {
  width: 24px;
  height: 24px;
}

.career-card:hover .career-icon {
  transform: translateY(-3px) scale(1.04);
  border-radius: 21px;
}

.career-icon--orange {
  color: #e4610e;
  background: #fff0e6;
}

.career-icon--green {
  color: #168b60;
  background: #e6f5ed;
}

.career-icon--blue {
  color: #397edb;
  background: #eaf1ff;
}

.career-icon--purple {
  color: #8263c5;
  background: #f1ebff;
}

.career-number {
  padding-top: 5px;
  color: #b7bec7;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .12em;
}

/* =========================================
   CARD CONTENT
========================================= */

.career-card-content {
  flex: 1;
}

.career-category {
  display: block;
  margin-bottom: 10px;
  color: #9aa3ad;
  font-size: 8px;
  font-weight: 750;
  line-height: 1.5;
  letter-spacing: .13em;
}

.career-card h3 {
  margin: 0;
  color: #1b2330;
  font-size: clamp(19px, 1.7vw, 23px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.045em;
  overflow-wrap: break-word;
  transition: color .3s ease;
}

.career-card:hover h3 {
  color: #c6530b;
}

.career-card p {
  margin: 13px 0 24px;
  color: #737d8b;
  font-size: 12px;
  line-height: 1.8;
  letter-spacing: -.005em;
}

/* =========================================
   CARD BOTTOM
========================================= */

.career-card-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid #edf0f2;
}

.career-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.career-tags span {
  display: inline-flex;
  align-items: center;
  padding: 6px 8px;
  border: 1px solid rgba(31,43,55,.055);
  border-radius: 100px;
  background: #f7f8f9;
  color: #7a8491;
  font-size: 8px;
  font-weight: 600;
  line-height: 1.2;
}

.career-arrow {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border: 1px solid rgba(31,43,55,.07);
  border-radius: 50%;
  background: #f7f8f9;
  color: var(--career-orange);
  font-size: 17px;
  transition:
    transform .3s ease,
    background .3s ease,
    color .3s ease;
}

.career-card:hover .career-arrow {
  transform: rotate(45deg);
  background: #fff0e6;
  color: #d65307;
}

/* =========================================
   BOTTOM CALLOUT
========================================= */

.career-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  margin-top: 24px;
  padding: 21px 24px;
  border: 1px solid rgba(31,43,55,.07);
  border-radius: 20px;
  background: rgba(255,255,255,.67);
  box-shadow: 0 4px 15px rgba(23,34,45,.02);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.career-footer-copy {
  display: flex;
  align-items: center;
  gap: 12px;
}

.career-footer-dot {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: 50%;
  background: #27b074;
  box-shadow: 0 0 0 4px rgba(39,176,116,.1);
}

.career-footer-copy p {
  margin: 0;
  color: #35404d;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.6;
}

.career-footer-copy p span {
  color: #87919d;
  font-weight: 450;
}

.career-footer-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #27313e;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.career-footer-link span {
  color: var(--career-orange);
  font-size: 19px;
  transition: transform .3s ease;
}

.career-footer-link:hover span {
  transform: translate(3px, -3px);
}

/* =========================================
   TABLET
========================================= */

@media (max-width: 1000px) {
  .career-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  .career-card {
    min-height: 300px;
  }

  .career-heading-row {
    align-items: flex-start;
  }
}

/* =========================================
   MOBILE
========================================= */

@media (max-width: 600px) {
  .career-section {
    padding: 70px 17px;
  }

  .career-header {
    margin-bottom: 32px;
  }

  .career-eyebrow {
    margin-bottom: 19px;
    font-size: 9px;
  }

  .career-heading-row {
    gap: 15px;
  }

  .career-title {
    font-size: clamp(35px, 9vw, 48px);
    line-height: 1.1;
  }

  .career-description {
    margin-top: 17px;
    font-size: 13px;
    line-height: 1.8;
  }

  .career-count {
    flex-basis: 68px;
    width: 68px;
    height: 68px;
    border-radius: 19px;
  }

  .career-count-number {
    font-size: 23px;
  }

  .career-count-label {
    margin-top: 5px;
    font-size: 6px;
    letter-spacing: .08em;
  }

  .career-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .career-card {
    min-height: 0;
    padding: 23px;
    border-radius: 22px;
  }

  .career-card-top {
    margin-bottom: 21px;
  }

  .career-icon {
    width: 51px;
    height: 51px;
    flex-basis: 51px;
    border-radius: 17px;
  }

  .career-card h3 {
    font-size: 22px;
  }

  .career-card p {
    font-size: 12px;
    margin-bottom: 22px;
  }

  .career-footer {
    align-items: flex-start;
    flex-direction: column;
    gap: 15px;
    padding: 19px;
    border-radius: 18px;
  }

  .career-footer-copy p {
    font-size: 11px;
  }

  .career-footer-link {
    font-size: 11px;
  }
}

/* =========================================
   ACCESSIBILITY
========================================= */

@media (prefers-reduced-motion: reduce) {
  .career-section *,
  .career-section *::before,
  .career-section *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* area we hire */

/* inner contact area */


/* =========================================
   GLOTEFEWO   CONTACT LUXE
   iOS-inspired glassmorphism design
========================================= */

.contact-luxe {
  --cl-orange: #e4610e;
  --cl-green: #27b074;
  --cl-ink: #141820;
  --cl-muted: #89919d;

  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(75px, 9vw, 125px) 24px;
  background: #f5f7f6;
  color: var(--cl-ink);
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Display",
    "SF Pro Text",
    "Inter",
    "Segoe UI",
    sans-serif;
}

.contact-luxe *,
.contact-luxe *::before,
.contact-luxe *::after {
  box-sizing: border-box;
}

.contact-luxe__container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1220px;
  margin: 0 auto;
}

/* =========================================
   AMBIENT BACKGROUND GLOW
========================================= */

.contact-luxe__glow {
  position: absolute;
  z-index: -1;
  width: 550px;
  height: 550px;
  border-radius: 50%;
  filter: blur(100px);
  pointer-events: none;
}

.contact-luxe__glow--orange {
  top: -250px;
  right: -160px;
  background: rgba(228, 97, 14, .12);
}

.contact-luxe__glow--green {
  bottom: -270px;
  left: -180px;
  background: rgba(39, 176, 116, .10);
}

/* =========================================
   HEADER
========================================= */

.contact-luxe__header {
  max-width: 850px;
  margin-bottom: 48px;
}

.contact-luxe__eyebrow {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 23px;
  color: var(--cl-orange);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .19em;
}

.contact-luxe__eyebrow > span {
  width: 26px;
  height: 2px;
  border-radius: 10px;
  background: var(--cl-orange);
}

.contact-luxe__header h2 {
  margin: 0;
  color: #171d27;
  font-size: clamp(40px, 5.5vw, 70px);
  font-weight: 730;
  line-height: 1.05;
  letter-spacing: -.065em;
  text-wrap: balance;
}

.contact-luxe__header h2 span {
  display: block;
  color: #929aa5;
}

.contact-luxe__header > p {
  max-width: 650px;
  margin: 22px 0 0;
  color: #75808d;
  font-size: 15px;
  line-height: 1.85;
}

/* =========================================
   MAIN LAYOUT
========================================= */

.contact-luxe__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(310px, .85fr);
  align-items: start;
  gap: 22px;
}

/* =========================================
   FORM PANEL
========================================= */

.contact-luxe__form-wrap {
  min-width: 0;
  padding: clamp(24px, 4vw, 42px);
  border: 1px solid rgba(255,255,255,.85);
  border-radius: 30px;
  background: rgba(255,255,255,.78);
  box-shadow:
    0 18px 60px rgba(24,34,46,.055),
    inset 0 1px 0 rgba(255,255,255,.95);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

.contact-luxe__form-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 30px;
}

.contact-luxe__step {
  display: block;
  margin-bottom: 11px;
  color: var(--cl-orange);
  font-size: 9px;
  font-weight: 750;
  letter-spacing: .15em;
}

.contact-luxe__form-heading h3 {
  margin: 0;
  color: #19212d;
  font-size: clamp(25px, 3vw, 33px);
  font-weight: 720;
  letter-spacing: -.05em;
}

.contact-luxe__form-heading p {
  margin: 9px 0 0;
  color: #8a939e;
  font-size: 12px;
  line-height: 1.7;
}

.contact-luxe__form-icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  border: 1px solid rgba(228,97,14,.12);
  border-radius: 18px;
  background: #fff0e6;
  color: var(--cl-orange);
}

.contact-luxe__form-icon svg {
  width: 23px;
  height: 23px;
}

/* =========================================
   FORM FIELDS
========================================= */

.contact-luxe__fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 21px 16px;
}

.contact-luxe__field {
  min-width: 0;
}

.contact-luxe__field--full {
  grid-column: 1 / -1;
}

.contact-luxe__field label {
  display: block;
  margin-bottom: 9px;
  color: #394352;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -.01em;
}

.contact-luxe__field label span {
  color: var(--cl-orange);
}

.contact-luxe__field input,
.contact-luxe__field select,
.contact-luxe__field textarea {
  display: block;
  width: 100%;
  min-width: 0;
  border: 1px solid #e7eaed;
  border-radius: 14px;
  outline: none;
  background: rgba(248,249,250,.88);
  color: #1d2632;
  font: inherit;
  font-size: 15px;
  transition:
    border-color .25s ease,
    box-shadow .25s ease,
    background .25s ease,
    transform .25s ease;
}

.contact-luxe__field input,
.contact-luxe__field select {
  height: 52px;
  padding: 0 15px;
}

.contact-luxe__field textarea {
  min-height: 145px;
  padding: 15px;
  line-height: 1.7;
  resize: vertical;
}

.contact-luxe__field input::placeholder,
.contact-luxe__field textarea::placeholder {
  color: #a3abb5;
}

.contact-luxe__field input:hover,
.contact-luxe__field select:hover,
.contact-luxe__field textarea:hover {
  border-color: #d5dbe1;
  background: #fff;
}

.contact-luxe__field input:focus,
.contact-luxe__field select:focus,
.contact-luxe__field textarea:focus {
  border-color: rgba(228,97,14,.6);
  background: #fff;
  box-shadow:
    0 0 0 4px rgba(228,97,14,.075),
    0 4px 15px rgba(30,40,50,.025);
}

/* Custom select */

.contact-luxe__select-wrap {
  position: relative;
}

.contact-luxe__field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 45px;
  cursor: pointer;
}

.contact-luxe__select-wrap > svg {
  position: absolute;
  top: 50%;
  right: 16px;
  width: 17px;
  height: 17px;
  color: #7f8996;
  transform: translateY(-50%);
  pointer-events: none;
}

/* =========================================
   FORM FOOTER / BUTTON
========================================= */

.contact-luxe__form-bottom {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 17px;
  margin-top: 25px;
}

.contact-luxe__submit {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 23px;
  min-height: 54px;
  padding: 7px 8px 7px 22px;
  border: 0;
  border-radius: 100px;
  background: var(--cl-orange);
  box-shadow:
    0 8px 22px rgba(228,97,14,.19),
    inset 0 1px 0 rgba(255,255,255,.2);
  color: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition:
    transform .3s ease,
    box-shadow .3s ease,
    background .3s ease;
}

.contact-luxe__submit:hover {
  transform: translateY(-3px);
  background: #cf5409;
  box-shadow: 0 12px 28px rgba(228,97,14,.25);
}

.contact-luxe__submit:active {
  transform: scale(.98);
}

.contact-luxe__submit-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 50%;
  background: rgba(255,255,255,.15);
}

.contact-luxe__submit-icon svg {
  width: 17px;
  height: 17px;
  transition: transform .3s ease;
}

.contact-luxe__submit:hover .contact-luxe__submit-icon svg {
  transform: translateX(2px);
}

.contact-luxe__privacy {
  margin: 0;
  color: #929ba6;
  font-size: 10px;
  line-height: 1.8;
}

.contact-luxe__privacy a {
  color: #4c5968;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: rgba(76,89,104,.3);
  text-underline-offset: 3px;
}

.contact-luxe__privacy a:hover {
  color: var(--cl-orange);
}

/* Demo form message */

.contact-luxe__success {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  margin-top: 22px;
  padding: 17px;
  border: 1px solid rgba(39,176,116,.2);
  border-radius: 16px;
  background: #effaf4;
  color: #176e4a;
}

.contact-luxe__success-icon {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  flex: 0 0 27px;
  border-radius: 50%;
  background: #d7f2e3;
  font-size: 14px;
  font-weight: 800;
}

.contact-luxe__success strong {
  font-size: 12px;
}

.contact-luxe__success p {
  margin: 5px 0 0;
  color: #58816d;
  font-size: 11px;
  line-height: 1.7;
}

/* =========================================
   SIDEBAR
========================================= */

.contact-luxe__sidebar {
  display: grid;
  gap: 18px;
  min-width: 0;
}

.contact-luxe__info-card {
  position: relative;
  overflow: hidden;
  padding: 27px;
  border-radius: 25px;
}

.contact-luxe__info-card--dark {
  border: 1px solid rgba(255,255,255,.09);
  background:
    radial-gradient(
      ellipse at 100% 0%,
      rgba(228,97,14,.17),
      transparent 48%
    ),
    #171a21;
  box-shadow: 0 18px 40px rgba(15,20,28,.12);
  color: #fff;
}

.contact-luxe__info-card--light {
  border: 1px solid rgba(31,43,55,.07);
  background: rgba(255,255,255,.76);
  box-shadow:
    0 12px 35px rgba(24,34,46,.04),
    inset 0 1px 0 rgba(255,255,255,.95);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}

.contact-luxe__info-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}

.contact-luxe__info-label {
  color: #a7afb9;
  font-size: 9px;
  font-weight: 750;
  letter-spacing: .15em;
}

.contact-luxe__info-number {
  color: rgba(255,255,255,.28);
  font-size: 11px;
  font-weight: 750;
}

.contact-luxe__info-card--light .contact-luxe__info-number {
  color: #b9c0c8;
}

.contact-luxe__info-icon {
  display: grid;
  place-items: center;
  width: 51px;
  height: 51px;
  margin-top: 25px;
  border: 1px solid rgba(228,97,14,.24);
  border-radius: 17px;
  background: rgba(228,97,14,.12);
  color: #ff8a43;
}

.contact-luxe__info-icon svg {
  width: 23px;
  height: 23px;
}

.contact-luxe__info-card h3 {
  margin: 21px 0 10px;
  color: #fff;
  font-size: 23px;
  font-weight: 720;
  letter-spacing: -.045em;
}

.contact-luxe__info-card--light h3 {
  color: #1b2330;
}

.contact-luxe__info-card > p {
  margin: 0;
  color: #aab2bd;
  font-size: 12px;
  line-height: 1.85;
}

.contact-luxe__info-card--light > p {
  color: #7e8996;
}

/* Info divider */

.contact-luxe__info-divider {
  height: 1px;
  margin: 23px 0;
  background: rgba(255,255,255,.1);
}

/* Contact details */

.contact-luxe__detail {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-top: 17px;
}

.contact-luxe__detail-icon {
  display: grid;
  place-items: center;
  width: 39px;
  height: 39px;
  flex: 0 0 39px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 13px;
  background: rgba(255,255,255,.055);
  color: #ff9a5a;
}

.contact-luxe__detail-icon svg {
  width: 18px;
  height: 18px;
}

.contact-luxe__detail > div {
  min-width: 0;
}

.contact-luxe__detail small {
  display: block;
  margin-bottom: 5px;
  color: #858e9a;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .13em;
}

.contact-luxe__detail strong {
  display: block;
  color: #f2f4f6;
  font-size: 15px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.contact-luxe__placeholder-note {
  display: block;
  margin-top: 19px;
  color: #858e9a;
  font-size: 9px;
  line-height: 1.7;
}

/* =========================================
   PARTNERSHIP LIST
========================================= */

.contact-luxe__partnership-list {
  margin-top: 22px;
  border-top: 1px solid #e9edf0;
}

.contact-luxe__partnership {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 6px 0;
  border-bottom: 1px solid #edf0f2;
  color: #424d5a;
  font-size: 12px;
  font-weight: 600;
  transition: color .25s ease;
}

.contact-luxe__partnership_environmentalbullets {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 7px 0;
  color: rgb(102, 115, 111);
  font-size: 15px;
  transition: color .25s ease;
}

.tick{
  color: #e95924;
}

.contact-luxe__partnership:hover {
  color: #424d5a;
}

.contact-luxe__check {
    display: grid;
    place-items: center;
    width: 23px;
    height: 23px;
    flex: 0 0 23px;
    border: 1px solid rgba(39,176,116,.15);
    border-radius: 8px;
    background: #00000017;
    color: #e95924;
    font-size: 11px;
    font-weight: 800;
}

.contact-luxe__partnership > span:nth-child(2) {
  flex: 1;
}

.contact-luxe__mini-arrow {
  color: #b2bac3;
  font-size: 15px;
  transition:
    transform .25s ease,
    color .25s ease;
}

.contact-luxe__partnership:hover .contact-luxe__mini-arrow {
  transform: translate(2px, -2px);
  color: var(--cl-orange);
}

/* Availability pill */

.contact-luxe__availability {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 22px;
  padding: 9px 12px;
  border: 1px solid rgba(39,176,116,.13);
  border-radius: 100px;
  background: #edf8f1;
  color: #458267;
  font-size: 9px;
  font-weight: 650;
}

.contact-luxe__availability > span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #27b074;
  box-shadow: 0 0 0 4px rgba(39,176,116,.1);
}

/* =========================================
   BOTTOM BRAND STRIP
========================================= */

.contact-luxe__bottom {
  display: flex;
  align-items: center;
  gap: 17px;
  margin-top: 35px;
  color: #929ba5;
}

.contact-luxe__bottom > span:first-child {
  color: #3b4653;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .16em;
}

.contact-luxe__bottom-line {
  width: 35px;
  height: 1px;
  background: #d9dee2;
}

.contact-luxe__bottom p {
  margin: 0;
  font-size: 10px;
  letter-spacing: .025em;
}

/* =========================================
   TABLET
========================================= */

@media (max-width: 950px) {
  .contact-luxe__layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .contact-luxe__sidebar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
  }

  .contact-luxe__info-card {
    height: 100%;
  }
}

/* =========================================
   MOBILE
========================================= */

@media (max-width: 600px) {
  .contact-luxe {
    padding: 70px 16px;
  }

  .contact-luxe__header {
    margin-bottom: 32px;
  }

  .contact-luxe__eyebrow {
    font-size: 9px;
    letter-spacing: .14em;
  }

  .contact-luxe__header h2 {
    font-size: clamp(37px, 10vw, 49px);
  }

  .contact-luxe__header > p {
    font-size: 13px;
    line-height: 1.8;
  }

  .contact-luxe__layout {
    gap: 16px;
  }

  .contact-luxe__form-wrap {
    padding: 22px 17px;
    border-radius: 24px;
  }

  .contact-luxe__form-heading {
    gap: 12px;
    margin-bottom: 25px;
  }

  .contact-luxe__form-heading h3 {
    font-size: 25px;
  }

  .contact-luxe__form-heading p {
    font-size: 11px;
  }

  .contact-luxe__form-icon {
    width: 43px;
    height: 43px;
    flex-basis: 43px;
    border-radius: 15px;
  }

  .contact-luxe__fields {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }

  .contact-luxe__field--full {
    grid-column: auto;
  }

  .contact-luxe__field input,
  .contact-luxe__field select {
    height: 51px;
  }

  .contact-luxe__form-bottom {
    align-items: flex-start;
    flex-direction: column;
    gap: 13px;
  }

  .contact-luxe__submit {
    width: 100%;
  }

  .contact-luxe__sidebar {
    grid-template-columns: minmax(0, 1fr);
    gap: 15px;
  }

  .contact-luxe__info-card {
    padding: 24px;
    border-radius: 23px;
  }

  .contact-luxe__info-card h3 {
    font-size: 22px;
  }

  .contact-luxe__bottom {
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 25px;
  }

  .contact-luxe__bottom p {
    width: 100%;
  }
}

/* =========================================
   REDUCED MOTION
========================================= */

@media (prefers-reduced-motion: reduce) {
  .contact-luxe *,
  .contact-luxe *::before,
  .contact-luxe *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}

/* inner contact area */

/* environmental section 1 */

/* ========================================================= GAIAOFFSET — PREMIUM iOS 27 SECTION ========================================================= */
.go-climate-section {
  width: 100%;
  position: relative;
  padding: 5% 0 5% 0;
  overflow: hidden;
  background: #ffffff;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI",
    sans-serif;
} /* ========================================================= SOFT AMBIENT LIGHT ========================================================= */
.go-climate-section::before {
  content: "";
  position: absolute;
  width: 700px;
  height: 700px;
  left: -360px;
  top: -180px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(61, 190, 132, 0.075),
    transparent 70%
  );
  filter: blur(55px);
  pointer-events: none;
}
.go-climate-section::after {
  content: "";
  position: absolute;
  width: 650px;
  height: 650px;
  right: -350px;
  bottom: -280px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(74, 157, 121, 0.06),
    transparent 70%
  );
  filter: blur(60px);
  pointer-events: none;
} /* ========================================================= CONTAINER ========================================================= */
.go-climate-container {
  width: min(1400px, calc(100% - 100px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: 105px;
  align-items: center;
  position: relative;
  z-index: 2;
} /* ========================================================= LEFT CONTENT ========================================================= */
.go-climate-content {
  max-width: 650px;
} /* ========================================================= EYEBROW ========================================================= */
.go-climate-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 15px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(211, 225, 219, 0.9);
  box-shadow: 0 8px 28px rgba(30, 65, 52, 0.055),
    inset 0 1px 0 rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI",
    sans-serif;
  font-style: normal;
  font-weight: 400;
  color: rgb(102, 115, 111);
  font-size: 13px;
  line-height: 20px;
}
.go-climate-dot {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: 50%;
  background: #39c98a;
  box-shadow: 0 0 0 5px rgba(57, 201, 138, 0.1),
    0 0 15px rgba(57, 201, 138, 0.3);
} /* ========================================================= HEADING EXACT USER TYPOGRAPHY ========================================================= */
.go-climate-title {
  margin: 0 0 24px;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI",
    sans-serif;
  font-style: normal;
  font-weight: 700;
  color: rgb(23, 33, 31);
  font-size: 48px;
  line-height: 55px;
  letter-spacing: -0.025em;
}
.go-climate-title span {
  display: block;
  color: rgb(23, 33, 31);
  font-weight: 700;
} /* ========================================================= LEAD ========================================================= */
.go-climate-lead {
  margin: 0 0 14px;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI",
    sans-serif;
  font-style: normal;
  font-weight: 400;
  color: rgb(102, 115, 111);
  font-size: 15px;
  line-height: 26px;
} /* ========================================================= DESCRIPTION ========================================================= */
.go-climate-description {
  max-width: 620px;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI",
    sans-serif;
  font-style: normal;
  font-weight: 400;
  color: rgb(102, 115, 111);
  font-size: 15px;
  line-height: 26px;
  letter-spacing: 0;
} /* ========================================================= RIGHT FEATURES ========================================================= */
.go-climate-features {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  position: relative;
} /* ========================================================= FEATURE CARD ========================================================= */
.go-feature-card {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 16px 18px;
  border-radius: 22px;
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
    border-color 0.35s ease, box-shadow 0.35s ease, background 0.35s ease;
} /* ========================================================= HOVER ========================================================= */
.go-feature-card:hover {
  transform: translateY(-5px);
  border-color: rgba(54, 190, 132, 0.38);
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.98),
    rgba(241, 251, 246, 0.88)
  );
  box-shadow: 0 22px 48px rgba(25, 75, 57, 0.1),
    0 0 0 1px rgba(54, 190, 132, 0.04), inset 0 1px 0 rgba(255, 255, 255, 1);
} /* ========================================================= FEATURE ICON ========================================================= */
.go-feature-icon {
  width: 39px;
  height: 39px;
  flex: 0 0 39px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
  background: linear-gradient(145deg, #e1590b, #dd5609);
  border: 1px solid rgba(102, 208, 157, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 7px 18px rgba(40, 180, 120, 0.09);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.go-feature-card:hover .go-feature-icon {
  transform: scale(1.06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1),
    0 9px 23px rgba(40, 180, 120, 0.15);
}
.go-feature-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: #ffffff;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
} /* ========================================================= FEATURE TEXT ========================================================= */
.go-feature-text {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI",
    sans-serif;
  font-style: normal;
  font-weight: 400;
  color: rgb(102, 115, 111);
  font-size: 14px;
  line-height: 21px;
} /* ========================================================= TABLET ========================================================= */
@media (max-width: 1100px) {
  .go-climate-section {
    padding: 95px 0;
  }
  .go-climate-container {
    width: min(900px, calc(100% - 60px));
    grid-template-columns: 1fr;
    gap: 55px;
  }
  .go-climate-content {
    max-width: 800px;
  }
  .go-climate-description {
    max-width: 760px;
  }
} /* ========================================================= MOBILE ========================================================= */
@media (max-width: 700px) {
  .go-climate-section {
    padding: 70px 0;
  }
  .go-climate-container {
    width: calc(100% - 32px);
    gap: 40px;
  }
  .go-climate-title {
    margin-top: 22px;
    font-size: 42px;
    line-height: 50px;
  }
  .go-climate-lead,
  .go-climate-description {
    font-size: 15px;
    line-height: 26px;
  }
  .go-climate-features {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .go-feature-card {
    min-height: 78px;
    border-radius: 19px;
    padding: 14px 15px;
  }
} /* ========================================================= SMALL MOBILE ========================================================= */
@media (max-width: 430px) {
  .go-climate-section {
    padding: 55px 0;
  }
  .go-climate-container {
    width: calc(100% - 24px);
  }
  .go-climate-title {
    font-size: 38px;
    line-height: 46px;
  }
  .go-climate-eyebrow {
    font-size: 12px;
    padding: 8px 12px;
  }
  .go-feature-text {
    font-size: 13px;
    line-height: 20px;
  }
}


/* environmental section 1 */

/* section 1 */

/* =========================================================
   GLOTEFEWO — PREMIUM SUSTAINABLE MOBILITY
   iOS 27 STYLE
========================================================= */

.gf-mobility-section {
  width: 100%;
  position: relative;
  overflow: hidden;

  padding: 69px 0;

  background: #ffffff;

  font-family:
    -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
}


/* =========================================================
   SOFT BACKGROUND GLOW
========================================================= */

.gf-mobility-section::before {
  content: "";

  position: absolute;

  width: 520px;
  height: 520px;

  left: -260px;
  top: 40px;

  border-radius: 50%;

  background: rgba(48, 211, 139, .055);

  filter: blur(100px);

  pointer-events: none;
}


.gf-mobility-section::after {
  content: "";

  position: absolute;

  width: 520px;
  height: 520px;

  right: -260px;
  bottom: -100px;

  border-radius: 50%;

  background: rgba(74, 133, 255, .045);

  filter: blur(110px);

  pointer-events: none;
}


/* =========================================================
   MAIN 2 COLUMN LAYOUT
========================================================= */

.gf-mobility-container {

  width: min(1400px, calc(100% - 100px));

  margin: 0 auto;

  display: grid;

  grid-template-columns:
    minmax(0, .9fr)
    minmax(0, 1.1fr);

  gap: 100px;

  align-items: center;

  position: relative;

  z-index: 2;
}


/* =========================================================
   LEFT CONTENT
========================================================= */

.gf-mobility-content {
  padding-right: 20px;
}


/* =========================================================
   LOCATION BADGE
========================================================= */

.gf-location-badge {

  display: inline-flex;

  align-items: center;

  gap: 9px;

  padding: 8px 16px 8px 10px;

  border-radius: 999px;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.96),
      rgba(235,250,243,.75)
    );

  border: 1px solid rgba(40, 194, 126, .17);

  box-shadow:
    0 10px 30px rgba(30, 180, 110, .07),
    inset 0 1px 0 rgba(255,255,255,.95);

  color: #15955e;

  font-size: 14px;

  font-weight: 600;
}


.gf-location-icon {

  width: 28px;
  height: 28px;

  display: flex;

  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background:
    linear-gradient(
      145deg,
      #eafff4,
      #cef7df
    );

  box-shadow:
    0 5px 15px rgba(40, 195, 125, .12);
}


.gf-location-icon svg {

  width: 15px;
  height: 15px;

  fill: none;

  stroke: #16a566;

  stroke-width: 1.8;
}


/* =========================================================
   HEADING
========================================================= */

.gf-mobility-title {

  margin: 28px 0 25px;

  max-width: 680px;

  font-family:
    -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;

  font-size: 48px;

  line-height: 55px;

  letter-spacing: -0.055em;

  font-weight: 760;

  color: rgb(23, 28, 39);
}


/* =========================================================
   MAIN PARAGRAPH
========================================================= */

.gf-mobility-text {

  max-width: 600px;

  margin: 0 0 24px;

  font-size: 16px;

  line-height: 1.75;

  letter-spacing: -0.01em;

  color: rgb(114, 124, 137);
}


/* =========================================================
   INTRO
========================================================= */

.gf-mobility-intro {

  margin: 0;

  font-size: 16px;

  line-height: 1.6;

  color: #657388;

  font-weight: 500;
}


/* =========================================================
   SMALL PROGRESS LINE
========================================================= */

.gf-progress {

  display: flex;

  align-items: center;

  gap: 8px;

  margin-top: 25px;
}


.gf-progress-main {

  width: 72px;
  height: 6px;

  border-radius: 999px;

  background:
    linear-gradient(
      90deg,
      #3ed997,
      #438fff
    );

  box-shadow:
    0 5px 15px rgba(62, 158, 245, .16);
}


.gf-progress-small {

  width: 68px;
  height: 6px;

  border-radius: 999px;

  background: #edf1f6;
}


/* =========================================================
   RIGHT BULLETS
========================================================= */

.gf-mobility-bullets {

  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  column-gap: 70px;

  padding: 10px 0;
}


/* =========================================================
   BULLET ITEM
========================================================= */

.gf-bullet {

  min-height: 64px;

  display: flex;

  align-items: center;

  gap: 15px;

  padding: 8px 0;

  font-size: 16px;

  font-weight: 500;

  letter-spacing: -0.015em;

  color: rgb(35, 43, 57);

  border-bottom: 1px solid rgba(226, 231, 238, .65);

  transition:
    transform .3s cubic-bezier(.2,.8,.2,1),
    color .3s ease,
    border-color .3s ease;
}


/* =========================================================
   CHECK
========================================================= */

.gf-check {

  width: 34px;
  height: 34px;

  flex: 0 0 34px;

  display: flex;

  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background:
    linear-gradient(118deg, #e95924, #232f4b);

  border: 1px solid rgb(233 89 36);

  box-shadow:
    0 7px 18px rgba(40, 190, 120, .09),
    inset 0 1px 0 rgba(255,255,255,.95);

  transition:
    transform .3s ease,
    box-shadow .3s ease,
    background .3s ease;
}


.gf-check svg {

  width: 17px;
  height: 17px;

  fill: none;

  stroke: #ffffff;

  stroke-width: 2.3;

  stroke-linecap: round;

  stroke-linejoin: round;
}


/* =========================================================
   HOVER
========================================================= */

.gf-bullet:hover {
    transform: translateX(7px);
    color: #e95924;
    border-color: rgb(233 89 36);
}


.gf-bullet:hover .gf-check {

  transform: scale(1.1);

  background:
    linear-gradient(145deg, #e95924, #232e4a);

  box-shadow:
    0 10px 25px rgba(38, 190, 119, .17),
    inset 0 1px 0 rgba(255,255,255,1);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

  .gf-mobility-section {
    padding: 90px 0;
  }

  .gf-mobility-container {

    width: min(900px, calc(100% - 60px));

    grid-template-columns: 1fr;

    gap: 55px;
  }

  .gf-mobility-content {
    padding-right: 0;
  }

  .gf-mobility-title {
    max-width: 800px;
  }

  .gf-mobility-text {
    max-width: 750px;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

  .gf-mobility-section {

    padding: 70px 0;
  }

  .gf-mobility-container {

    width: calc(100% - 32px);

    gap: 40px;
  }

  .gf-mobility-title {

    margin-top: 22px;

    font-size: 42px;

    line-height: 1.08;

    letter-spacing: -0.045em;
  }

  .gf-mobility-text {

    font-size: 15.5px;

    line-height: 1.7;
  }

  .gf-mobility-intro {

    font-size: 15px;
  }

  .gf-mobility-bullets {

    grid-template-columns: 1fr;

    row-gap: 0;
  }

  .gf-bullet {

    min-height: 58px;

    font-size: 15px;

    gap: 13px;
  }

  .gf-check {

    width: 32px;
    height: 32px;

    flex-basis: 32px;
  }

  .gf-check svg {

    width: 16px;
    height: 16px;
  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 430px) {

  .gf-mobility-section {
    padding: 55px 0;
  }

  .gf-mobility-container {
    width: calc(100% - 24px);
  }

  .gf-mobility-title {
    font-size: 36px;
  }

  .gf-bullet {
    font-size: 14.5px;
  }

}


/* section 1 */

/* section 2 */

/* =========================
   CARBON LIFECYCLE
   iOS-inspired glass UI
========================= */

.carbon-flow {
  --carbon-green: #20e0a0;
  --carbon-orange: #ff8b3d;
  --carbon-bg: #050e0c;
  --carbon-text: #f5faf8;
  --carbon-muted: #a5b9b5;

  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 110px 24px 80px;
  background:
    radial-gradient(
      ellipse at 50% 0%,
      rgba(24, 100, 74, .18),
      transparent 55%
    ),
    linear-gradient(135deg, #080e0d, #03110e 60%, #080d0c);
  color: var(--carbon-text);
  font-family: -apple-system, BlinkMacSystemFont,
    "SF Pro Display", "Segoe UI", sans-serif;
}

.carbon-flow *,
.carbon-flow *::before,
.carbon-flow *::after {
  box-sizing: border-box;
}

.carbon-container {
  position: relative;
  z-index: 2;
  max-width: 1320px;
  margin: 0 auto;
}

/* Background glow */

.carbon-glow {
  position: absolute;
  z-index: -1;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  filter: blur(100px);
  pointer-events: none;
  opacity: .22;
}

.carbon-glow--green {
  top: 5%;
  left: -280px;
  background: #00e6a0;
}

.carbon-glow--orange {
  top: -200px;
  right: -250px;
  background: #ff771c;
}

/* Header */

.carbon-header {
  max-width: 850px;
  margin: 0 auto 70px;
  text-align: center;
}

.carbon-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 11px 20px;
  margin-bottom: 25px;
  border: 1px solid rgba(32, 224, 160, .3);
  border-radius: 100px;
  background: rgba(255, 255, 255, .035);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  color: #a5f5d9;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2.5px;
}

.eyebrow-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--carbon-green);
  box-shadow: 0 0 15px var(--carbon-green);
}

.carbon-header h2 {
  margin: 0 0 22px;
  color: #f8faf9;
  font-size: clamp(38px, 5.5vw, 68px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -2.8px;
}

.carbon-header h2 span {
  display: block;
  background: linear-gradient(
    90deg,
    #37edb2,
    #c5f5cf 48%,
    #ffad65
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 18px rgba(32, 224, 160, .12));
}

.carbon-header p {
  margin: 0 auto;
  color: #b2c3bf;
  font-size: 17px;
  line-height: 1.8;
}

/* Cards grid */

.carbon-timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
}

/* Decorative connecting line */

.carbon-timeline::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 2%;
  width: 96%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(32, 224, 160, .6),
    rgba(255, 139, 61, .5),
    transparent
  );
  box-shadow: 0 0 18px rgba(32, 224, 160, .25);
}

/* Individual card */

.carbon-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 213px;
  padding: 27px 26px 25px;
  overflow: hidden;

  border: 1px solid rgba(176, 226, 210, .16);
  border-radius: 26px;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, .085),
      rgba(255, 255, 255, .025) 55%,
      rgba(20, 224, 160, .035)
    );

  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .07),
    0 18px 45px rgba(0, 0, 0, .13);

  transition:
    transform .35s ease,
    border-color .35s ease,
    box-shadow .35s ease;
}

.carbon-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 18%;
  width: 64%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(32, 224, 160, .65),
    transparent
  );
  opacity: .6;
}

.carbon-card::after {
  content: "";
  position: absolute;
  right: -80px;
  bottom: -110px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: rgba(32, 224, 160, .07);
  filter: blur(45px);
  pointer-events: none;
}

.carbon-card:nth-child(even)::after {
  background: rgba(255, 139, 61, .08);
}

.carbon-card:hover {
  transform: translateY(-8px);
  border-color: rgba(32, 224, 160, .5);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .12),
    0 25px 65px rgba(0, 0, 0, .3),
    0 0 30px rgba(32, 224, 160, .07);
}

/* Card top */

.carbon-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
}

.carbon-icon {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border: 1px solid rgba(32, 224, 160, .35);
  border-radius: 19px;
  color: #5ff3c1;

  background: linear-gradient(
    145deg,
    rgba(32, 224, 160, .17),
    rgba(32, 224, 160, .035)
  );

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .08),
    0 0 24px rgba(32, 224, 160, .07);
}

.carbon-icon.orange {
  color: #ffb16f;
  border-color: rgba(255, 139, 61, .4);
  background: linear-gradient(
    145deg,
    rgba(255, 139, 61, .18),
    rgba(255, 139, 61, .035)
  );
}

.carbon-icon svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.carbon-number {
  align-self: flex-start;
  color: #7cebc4;
  font-size: 22px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.carbon-card:nth-child(even) .carbon-number {
  color: #ffb16f;
}

/* Card text */

.carbon-card h3 {
  position: relative;
  z-index: 1;
  margin: 0 0 12px;
  color: #f4faf7;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -.4px;
}

.carbon-card p {
  position: relative;
  z-index: 1;
  margin: 0 0 23px;
  color: #a9bbb6;
  font-size: 14px;
  line-height: 1.7;
}

/* Bottom tag */

.carbon-tag {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 7px;
  margin-top: auto;
  padding: 8px 13px;
  border: 1px solid rgba(32, 224, 160, .22);
  border-radius: 100px;
  background: rgba(32, 224, 160, .06);
  color: #a6f5d8;
  font-size: 11px;
  font-weight: 500;
}

.carbon-tag.orange {
  color: #ffc08e;
  border-color: rgba(255, 139, 61, .25);
  background: rgba(255, 139, 61, .06);
}

/* Footer */

.carbon-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  max-width: 750px;
  margin: 55px auto 20px;
}

.footer-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(32, 224, 160, .3)
  );
}

.footer-line:last-child {
  transform: rotate(180deg);
}

.footer-leaf {
  color: var(--carbon-green);
  font-size: 19px;
  text-shadow: 0 0 20px rgba(32, 224, 160, .5);
}

.carbon-footer-text {
  color: #849d96;
  text-align: center;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 3px;
  line-height: 2;
}

.carbon-footer-text i {
  margin: 0 9px;
  color: var(--carbon-orange);
  font-style: normal;
}

/* Tablet */

@media (max-width: 1050px) {
  .carbon-flow {
    padding: 85px 24px 65px;
  }

  .carbon-timeline {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }

  .carbon-timeline::before {
    display: none;
  }

  .carbon-card {
    min-height: 245px;
  }

  .carbon-header {
    margin-bottom: 50px;
  }
}

/* Mobile */

@media (max-width: 600px) {
  .carbon-flow {
    padding: 70px 17px 55px;
  }

  .carbon-header {
    margin-bottom: 38px;
  }

  .carbon-eyebrow {
    padding: 9px 14px;
    font-size: 9px;
    letter-spacing: 1.7px;
  }

  .carbon-header h2 {
    font-size: clamp(34px, 9vw, 46px);
    letter-spacing: -1.7px;
  }

  .carbon-header p {
    font-size: 15px;
    line-height: 1.7;
  }

  .carbon-timeline {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .carbon-card {
    min-height: auto;
    padding: 23px;
    border-radius: 23px;
  }

  .carbon-card-top {
    margin-bottom: 19px;
  }

  .carbon-card h3 {
    font-size: 19px;
  }

  .carbon-card p {
    margin-bottom: 20px;
    font-size: 14px;
  }

  .carbon-footer {
    margin-top: 38px;
    gap: 13px;
  }

  .carbon-footer-text {
    font-size: 8px;
    letter-spacing: 1.5px;
  }

  .carbon-footer-text i {
    margin: 0 4px;
  }
}

/* Motion accessibility */

@media (prefers-reduced-motion: reduce) {
  .carbon-card {
    transition: none;
  }

  .carbon-card:hover {
    transform: none;
  }
}

/* ===== WHITE iOS-INSPIRED THEME ===== */

.carbon-flow {
  background:
    radial-gradient(
      ellipse at 5% 10%,
      rgba(32, 224, 160, .09),
      transparent 35%
    ),
    radial-gradient(
      ellipse at 95% 0%,
      rgba(255, 139, 61, .10),
      transparent 35%
    ),
    #ffffff !important;

  color: #17211f;
}

/* Soft background glows */

.carbon-glow {
  opacity: .12;
  filter: blur(110px);
}

/* Header */

.carbon-header h2 {
  color: #17211f;
}

.carbon-header h2 span {
  background: linear-gradient(
    100deg,
    #15976b,
    #27b879 45%,
    #f17b32
  );

  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.carbon-header p {
  color: #66736f;
}

.carbon-eyebrow {
  background: rgba(255, 255, 255, .8);
  border-color: rgba(21, 151, 107, .2);
  color: #16865f;
  box-shadow: 0 5px 20px rgba(20, 50, 40, .04);
}

/* Glass cards */

.carbon-card {
  background: rgba(255, 255, 255, .78);

  border: 1px solid #e5ebe8;

  box-shadow:
    0 8px 30px rgba(20, 40, 32, .045),
    inset 0 1px 0 rgba(255, 255, 255, .95);

  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

.carbon-card::before {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(32, 180, 125, .45),
    transparent
  );
}

.carbon-card::after {
  background: rgba(32, 224, 160, .07);
}

/* Alternate orange glow */

.carbon-card:nth-child(even)::after {
  background: rgba(255, 139, 61, .08);
}

/* Hover */

.carbon-card:hover {
  transform: translateY(-7px);

  background: #ffffff;

  border-color: rgba(32, 180, 125, .35);

  box-shadow:
    0 20px 50px rgba(20, 40, 32, .09),
    0 0 25px rgba(32, 180, 125, .06);
}

/* Card text */

.carbon-card h3 {
  color: #17211f;
  margin: -45px 0 35px 75px;
}

.carbon-card p {
  color: #687671;
}

/* Number */

.carbon-number {
  color: #15976b;
}

.carbon-card:nth-child(even) .carbon-number {
  color: #e97932;
}

/* Icon glass */

.carbon-icon {
  background: linear-gradient(
    145deg,
    rgba(32, 224, 160, .13),
    rgba(32, 224, 160, .035)
  );

  color: #15976b;
  border-color: rgba(32, 180, 125, .22);
}

.carbon-icon.orange {
  color: #e97932;

  background: linear-gradient(
    145deg,
    rgba(255, 139, 61, .14),
    rgba(255, 139, 61, .035)
  );

  border-color: rgba(255, 139, 61, .25);
}

/* Tags */

.carbon-tag {
  background: rgba(32, 180, 125, .07);
  border-color: rgba(32, 180, 125, .18);
  color: #16865f;
}

.carbon-tag.orange {
  background: rgba(255, 139, 61, .07);
  border-color: rgba(255, 139, 61, .2);
  color: #c96827;
}

/* Timeline */

.carbon-timeline::before {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(32, 180, 125, .35),
    rgba(255, 139, 61, .3),
    transparent
  );

  box-shadow: none;
}

/* Footer */

.footer-leaf {
  color: #15976b;
  text-shadow: 0 0 15px rgba(32, 180, 125, .2);
}

.footer-line {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(32, 180, 125, .3)
  );
}

.carbon-footer-text {
  color: #89958f;
}

/* section 2 */

/* section 3 */

/* ==========================================
   CARBON STANDARDS
   Advanced iOS-inspired white design
========================================== */

.standards-section {
  --s-green: #15976b;
  --s-orange: #ef792f;
  --s-ink: #171a22;
  --s-muted: #66716e;

  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 105px 24px 90px;
  background: #fff;
  color: var(--s-ink);

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Display",
    "Segoe UI",
    sans-serif;
}

.standards-section *,
.standards-section *::before,
.standards-section *::after {
  box-sizing: border-box;
}

.standards-container {
  position: relative;
  z-index: 2;
  max-width: 1420px;
  margin: 0 auto;
}

/* Ambient background shades */

.standards-glow {
  position: absolute;
  z-index: -1;
  width: 430px;
  height: 430px;
  border-radius: 50%;
  filter: blur(115px);
  pointer-events: none;
  opacity: .12;
}

.standards-glow--green {
  top: 0;
  left: -230px;
  background: #20d99a;
}

.standards-glow--orange {
  top: 20px;
  right: -240px;
  background: #ff8c43;
}

/* Header */

.standards-header {
  max-width: 920px;
  margin: 0 auto 68px;
  text-align: center;
}

.standards-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 17px;
  margin-bottom: 26px;

  border: 1px solid rgba(21, 151, 107, .2);
  border-radius: 100px;

  background: rgba(231, 248, 240, .78);
  color: #16845e;

  font-size: 12px;
  font-weight: 650;
  letter-spacing: 1.2px;

  box-shadow:
    0 5px 18px rgba(21, 151, 107, .045),
    inset 0 1px 0 rgba(255, 255, 255, .9);

  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.standards-badge svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.standards-header h2 {
  margin: 0 auto 24px;
  max-width: 950px;

  color: #1b1d24;
  font-size: clamp(38px, 5vw, 66px);
  font-weight: 750;
  line-height: 1.1;
  letter-spacing: -2.8px;
}

.standards-header h2 span {
  display: block;
  margin-top: 4px;

  background: linear-gradient(
    100deg,
    #15976b 5%,
    #26ad7d 45%,
    #ed843e 100%
  );

  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.standards-header p {
  margin: 0 auto;

  color: #59635f;
  font-size: 18px;
  line-height: 1.8;
  font-weight: 400;
}

/* Cards grid */

.standards-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
}

/* Individual cards */

.standard-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 20px 25px 15px;
  overflow: hidden;

  border: 1px solid #292d37;
  border-radius: 25px;

  background:
    radial-gradient(
      circle at 50% 15%,
      rgba(255, 255, 255, .045),
      transparent 42%
    ),
    #171920;

  color: #fff;

  box-shadow:
    0 12px 35px rgba(20, 28, 25, .07),
    inset 0 1px 0 rgba(255, 255, 255, .07);

  transition:
    transform .35s ease,
    box-shadow .35s ease,
    border-color .35s ease;
}

.standard-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 15%;
  width: 70%;
  height: 1px;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, .24),
    transparent
  );
}

.environmental-top-paragraph {
    color: rgb(0 0 0);
    padding: 0 0 10px 0px;
}
.environmental-bottom-paragraph{
  color:rgb(0 0 0);
  padding: 10px 0 0 0px;
}

.standard-card::after {
  content: "";
  position: absolute;
  right: -65px;
  bottom: -95px;
  width: 180px;
  height: 180px;

  border-radius: 50%;
  background: rgba(30, 210, 145, .13);
  filter: blur(48px);
  pointer-events: none;
  transition: opacity .35s ease;
}

.standard-card:nth-child(even)::after {
  background: rgba(255, 137, 63, .13);
}

.standard-card:hover {
  transform: translateY(-8px);
  border-color: rgba(32, 208, 147, .48);

  box-shadow:
    0 25px 55px rgba(15, 25, 22, .13),
    0 0 30px rgba(21, 151, 107, .08);
}

.standard-card:hover::after {
  opacity: 1.5;
}

/* Card top row */

.standard-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 27px;
}

.standard-index {
  color: #8e9b99;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.3px;
}

.standard-arrow {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;

  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 50%;

  color: #9aaca6;
  font-size: 16px;

  transition:
    background .3s ease,
    color .3s ease,
    transform .3s ease;
}

.standard-card:hover .standard-arrow {
  background: rgba(32, 224, 160, .12);
  color: #5ce6b5;
  transform: rotate(45deg);
}

/* Logo tile */

.standard-logo {
  position: relative;
  display: grid;
  place-items: center;

  width: 82px;
  height: 82px;
  margin: 0 auto 24px;

  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 24px;

  background: rgba(255, 255, 255, .045);
  color: #55e2ad;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .08),
    0 12px 28px rgba(0, 0, 0, .1);

  transition:
    transform .35s ease,
    border-color .35s ease;
}

.standard-logo::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(255, 255, 255, .045);
  border-radius: 19px;
}

.standard-logo span {
  position: relative;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 27px;
  font-weight: 700;
  letter-spacing: -1px;
}

.standard-card:hover .standard-logo {
  transform: translateY(-3px) scale(1.04);
  border-color: rgba(255, 255, 255, .22);
}

.standard-logo--green {
  color: #40dba1;
  background: rgba(30, 190, 130, .1);
  border-color: rgba(50, 213, 155, .23);
}

.standard-logo--orange {
  color: #ffb36e;
  background: rgba(239, 121, 47, .1);
  border-color: rgba(239, 121, 47, .25);
}

.standard-logo--blue {
  color: #9bc8ff;
  background: rgba(88, 155, 235, .1);
  border-color: rgba(88, 155, 235, .25);
}

.standard-logo--purple {
  color: #c3b1ff;
  background: rgba(148, 115, 235, .1);
  border-color: rgba(148, 115, 235, .25);
}

/* Card content */

.standard-card h3 {
  position: relative;
  z-index: 1;

  margin: 0 0 12px;
  color: #fff;

  font-size: 20px;
  font-weight: 650;
  line-height: 1.35;
  letter-spacing: -.5px;
  text-align: center;
}

.standard-card p {
  position: relative;
  z-index: 1;

  max-width: 290px;
  margin: 0 auto 25px;

  color: #aeb8c4;
  font-size: 14px;
  line-height: 1.75;
  text-align: center;
}

/* Card bottom status */

.standard-card__bottom {
  position: relative;
  z-index: 1;
  margin-top: auto;
  padding-top: 17px;
  border-top: 1px solid rgba(255, 255, 255, .09);
  text-align: center;
}

.standard-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  color: #82e8bd;
  font-size: 11px;
  font-weight: 500;
}

.standard-status > span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #35d99c;
  box-shadow: 0 0 10px rgba(53, 217, 156, .5);
}

.standard-status--orange {
  color: #ffbd8a;
}

.standard-status--orange > span {
  background: #ff9a51;
  box-shadow: 0 0 10px rgba(255, 154, 81, .5);
}

.standard-status--blue {
  color: #a5caff;
}

.standard-status--blue > span {
  background: #80b6ff;
  box-shadow: 0 0 10px rgba(128, 182, 255, .5);
}

.standard-status--purple {
  color: #c7b7ff;
}

.standard-status--purple > span {
  background: #aa91ff;
  box-shadow: 0 0 10px rgba(170, 145, 255, .5);
}

/* Supporting principles */

.standards-support {
  max-width: 1060px;
  margin: 43px auto 0;
}

.support-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 17px;
  margin-bottom: 22px;

  color: #7b8782;
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 2px;
}

.support-line {
  width: 55px;
  height: 1px;
  background: #dfe7e2;
}

.support-pills {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.support-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;

  padding: 13px 18px;
  border: 1px solid rgba(21, 151, 107, .18);
  border-radius: 100px;

  background: rgba(233, 247, 240, .78);
  color: #276d53;

  font-size: 13px;
  font-weight: 550;

  box-shadow:
    0 5px 18px rgba(21, 151, 107, .035),
    inset 0 1px 0 rgba(255, 255, 255, .9);

  transition:
    transform .25s ease,
    background .25s ease,
    border-color .25s ease;
}

.support-pill:hover {
  transform: translateY(-3px);
  background: #e3f5eb;
  border-color: rgba(21, 151, 107, .35);
}

.support-check {
  display: grid;
  place-items: center;

  width: 20px;
  height: 20px;
  border-radius: 50%;

  background: #d3f0e1;
  color: #14855d;

  font-size: 12px;
  font-weight: 700;
}

/* Disclaimer */

.standards-note {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 11px;

  max-width: 850px;
  margin: 35px auto 0;
  padding: 17px 22px;

  border: 1px solid #e9eeeb;
  border-radius: 18px;
  background: rgba(248, 250, 249, .8);
}

.note-icon {
  display: grid;
  place-items: center;
  flex: 0 0 21px;

  width: 21px;
  height: 21px;
  border: 1px solid #cbd8d1;
  border-radius: 50%;

  color: #718078;
  font-family: Georgia, serif;
  font-size: 13px;
  font-style: italic;
}

.standards-note p {
  margin: 0;
  color: #77817c;
  font-size: 12px;
  line-height: 1.7;
}

/* Tablet */

@media (max-width: 1100px) {
  .standards-section {
    padding: 85px 22px 75px;
  }

  .standards-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }

  .standard-card {
    min-height: 315px;
  }

  .standards-header {
    margin-bottom: 50px;
  }
}

/* Mobile */

@media (max-width: 600px) {
  .standards-section {
    padding: 65px 16px 55px;
  }

  .standards-header {
    margin-bottom: 35px;
  }

  .standards-badge {
    padding: 9px 13px;
    font-size: 10px;
  }

  .standards-header h2 {
    font-size: clamp(34px, 9vw, 45px);
    letter-spacing: -1.7px;
    line-height: 1.12;
  }

  .standards-header p {
    font-size: 15px;
    line-height: 1.75;
  }

  .standards-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .standard-card {
    min-height: 300px;
    padding: 23px;
    border-radius: 23px;
  }

  .standard-card__top {
    margin-bottom: 20px;
  }

  .standard-logo {
    width: 74px;
    height: 74px;
    margin-bottom: 21px;
    border-radius: 22px;
  }

  .standard-card h3 {
    font-size: 20px;
  }

  .standard-card p {
    font-size: 14px;
  }

  .standards-support {
    margin-top: 35px;
  }

  .support-pills {
    gap: 9px;
  }

  .support-pill {
    padding: 11px 14px;
    font-size: 12px;
  }

  .standards-note {
    margin-top: 27px;
    padding: 15px;
  }
}

/* Reduced motion */

@media (prefers-reduced-motion: reduce) {
  .standard-card,
  .standard-logo,
  .standard-arrow,
  .support-pill {
    transition: none;
  }

  .standard-card:hover,
  .support-pill:hover {
    transform: none;
  }
}

/* section 3 */

/* scroll on top */


/* iOS-inspired Back to Top */
.back-to-top {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 99999;

  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;

  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: 22px;

  color: #fff;
  background: rgba(20, 22, 28, 0.78);

  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);

  box-shadow:
    0 8px 30px rgba(0, 0, 0, 0.16),
    0 0 24px rgba(228, 97, 14, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);

  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transform: translateY(16px) scale(0.92);
  transition:
    opacity 0.35s ease,
    visibility 0.35s ease,
    transform 0.35s cubic-bezier(.2,.8,.2,1),
    background 0.3s ease,
    box-shadow 0.3s ease;
}

.back-to-top svg {
  width: 24px;
  height: 24px;
  transition: transform 0.3s ease;
}

/* Visible state */
.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

/* Hover effect */
.back-to-top:hover {
  background: rgba(228, 97, 14, 0.95);
  box-shadow:
    0 10px 35px rgba(228, 97, 14, 0.28),
    0 0 30px rgba(228, 97, 14, 0.2);
  transform: translateY(-4px) scale(1.04);
}

.back-to-top:hover svg {
  transform: translateY(-3px);
}

.back-to-top:active {
  transform: scale(0.94);
}

.back-to-top:focus-visible {
  outline: 3px solid #E4610E;
  outline-offset: 4px;
}

/* Mobile */
@media (max-width: 768px) {
  .back-to-top {
    width: 50px;
    height: 50px;
    right: 18px;
    bottom: 18px;
    border-radius: 18px;
  }

  .back-to-top svg {
    width: 21px;
    height: 21px;
  }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  .back-to-top,
  .back-to-top svg {
    transition: none;
  }
}

/* scroll on top */

/* sustainable section 1.1 */

/* ========================================================= SEAVELA — PREMIUM iOS 27 ========================================================= */
.sv-about-section {
  width: 100%;
  position: relative;
  padding: 5% 0 5% 0;
  overflow: hidden;
  background: #ffffff;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI",
    sans-serif;
} /* ========================================================= AMBIENT LIGHT ========================================================= */
.sv-about-section::before {
  content: "";
  position: absolute;
  width: 650px;
  height: 650px;
  left: -300px;
  top: 0;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(55, 205, 150, 0.07),
    transparent 70%
  );
  filter: blur(50px);
  pointer-events: none;
}
.sv-about-section::after {
  content: "";
  position: absolute;
  width: 600px;
  height: 600px;
  right: -300px;
  bottom: -200px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(70, 125, 255, 0.065),
    transparent 70%
  );
  filter: blur(60px);
  pointer-events: none;
} /* ========================================================= CONTAINER ========================================================= */
.sv-container {
  width: min(1400px, calc(100% - 100px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
  gap: 100px;
  align-items: center;
  position: relative;
  z-index: 2;
} /* ========================================================= LEFT CONTENT ========================================================= */
.sv-content {
  max-width: 650px;
} /* ========================================================= EYEBROW ========================================================= */
.sv-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 15px;
  border-radius: 999px;
  color: rgb(104, 112, 128);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI",
    sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 13px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(221, 228, 237, 0.9);
  box-shadow: 0 8px 25px rgba(30, 50, 80, 0.055),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.sv-eyebrow-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #32c98a;
  box-shadow: 0 0 0 5px rgba(50, 201, 138, 0.1),
    0 0 14px rgba(50, 201, 138, 0.35);
} /* ========================================================= MAIN HEADING EXACT: Family: SF Pro / Segoe UI Weight: 760 Color: rgb(23,26,33) Size: 48px Line Height: 55px ========================================================= */
.sv-title {
  margin: 28px 0 25px;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI",
    sans-serif;
  font-style: normal;
  font-weight: 760;
  color: rgb(23, 26, 33);
  font-size: 48px;
  line-height: 55px;
  letter-spacing: -0.025em;
}
.sv-title span {
  display: block;
  color: rgb(23, 26, 33);
  font-weight: 760;
} /* ========================================================= PARAGRAPH Segoe UI Weight: 400 Color: rgb(104,112,128) Size: 15px Line Height: 26px ========================================================= */
.sv-description {
  max-width: 610px;
  margin: 0;
  font-family: "Segoe UI", sans-serif;
  font-style: normal;
  font-weight: 400;
  color: rgb(104, 112, 128);
  font-size: 15px;
  line-height: 26px;
  letter-spacing: 0;
} /* ========================================================= STATUS CARD ========================================================= */
.sv-status {
  margin-top: 32px;
  width: fit-content;
  min-width: 300px;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 12px 14px;
  border-radius: 18px;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.94),
    rgba(246, 251, 249, 0.78)
  );
  border: 1px solid rgba(217, 230, 224, 0.85);
  box-shadow: 0 15px 35px rgba(25, 60, 45, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.98);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.sv-status:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 45px rgba(25, 60, 45, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 1);
} /* ========================================================= STATUS ICON ========================================================= */
.sv-status-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
  background: linear-gradient(145deg, #e4fff1, #c8f5dc);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 7px 20px rgba(37, 190, 120, 0.12);
}
.sv-status-icon svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: rgb(104, 112, 128);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI",
    sans-serif;
  font-weight: 400;
} /* ========================================================= STATUS TEXT ========================================================= */
.sv-status-text {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI",
    sans-serif;
  font-style: normal;
  font-weight: 400;
}
.sv-status-text strong {
  display: block;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI",
    sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: rgb(23, 26, 33);
}
.sv-status-text small {
  display: block;
  margin-top: 2px;
  font-family: "Segoe UI", sans-serif;
  font-weight: 400;
  font-size: 11px;
  line-height: 18px;
  color: rgb(104, 112, 128);
}
.sv-status-arrow {
  margin-left: auto;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(225, 230, 237, 0.8);
  color: rgb(104, 112, 128);
  font-family: "Segoe UI", sans-serif;
  font-weight: 400;
  transition: transform 0.3s ease;
}
.sv-status:hover .sv-status-arrow {
  transform: translate(3px, -3px);
} /* ========================================================= IMAGE AREA ========================================================= */
.sv-image-wrap {
  position: relative;
  padding: 15px;
}
.sv-image-card {
  position: relative;
  width: 100%;
  height: 540px;
  overflow: hidden;
  border-radius: 38px;
  background: #e9eef3;
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 40px 90px rgba(20, 48, 75, 0.13),
    0 8px 30px rgba(20, 48, 75, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  isolation: isolate;
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.5s ease;
}
.sv-image-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 50px 110px rgba(20, 48, 75, 0.17),
    0 10px 35px rgba(20, 48, 75, 0.08), inset 0 1px 0 rgba(255, 255, 255, 1);
} /* ========================================================= MAIN IMAGE ========================================================= */
.sv-main-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: left;
  transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.sv-image-card:hover .sv-main-image {
  transform: scale(1.035);
} /* ========================================================= IMAGE OVERLAY ========================================================= */
.sv-image-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(10, 35, 55, 0.04) 0%,
    transparent 45%,
    rgba(5, 25, 40, 0.38) 100%
  );
} /* ========================================================= LOCATION ========================================================= */
.sv-image-location {
  position: absolute;
  top: 25px;
  right: 25px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  color: rgb(104, 112, 128);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI",
    sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 11px;
  background: rgba(255, 255, 255, 0.67);
  border: 1px solid rgba(255, 255, 255, 0.82);
  box-shadow: 0 10px 25px rgba(20, 50, 70, 0.09);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.sv-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #32c98a;
  box-shadow: 0 0 0 5px rgba(50, 201, 138, 0.12),
    0 0 12px rgba(50, 201, 138, 0.3);
} /* ========================================================= IMAGE INFORMATION CARD ========================================================= */
.sv-image-info {
  position: absolute;
  left: 25px;
  right: 25px;
  bottom: 25px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 14px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.68);
  border: 1px solid rgba(255, 255, 255, 0.82);
  box-shadow: 0 20px 45px rgba(5, 30, 50, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  transition: transform 0.4s ease;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI",
    sans-serif;
  font-weight: 400;
}
.sv-image-card:hover .sv-image-info {
  transform: translateY(-4px);
} /* ========================================================= IMAGE ICON ========================================================= */
.sv-image-info-icon {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95);
}
.sv-image-info-icon svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: rgb(104, 112, 128);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  font-family: "Segoe UI", sans-serif;
  font-weight: 400;
} /* ========================================================= IMAGE INFO TEXT ========================================================= */
.sv-image-info-content {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI",
    sans-serif;
  font-style: normal;
  font-weight: 400;
}
.sv-image-info-content strong {
  display: block;
  color: rgb(23, 26, 33);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI",
    sans-serif;
  font-weight: 400;
  font-size: 13px;
  line-height: 20px;
}
.sv-image-info-content span {
  display: block;
  margin-top: 3px;
  color: rgb(104, 112, 128);
  font-family: "Segoe UI", sans-serif;
  font-weight: 400;
  font-size: 10px;
  line-height: 16px;
}
.sv-image-arrow {
  margin-left: auto;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: rgb(104, 112, 128);
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.8);
  font-family: "Segoe UI", sans-serif;
  font-weight: 400;
  transition: transform 0.3s ease;
}
.sv-image-card:hover .sv-image-arrow {
  transform: translate(3px, -3px);
} /* ========================================================= TABLET ========================================================= */
@media (max-width: 1100px) {
  .sv-about-section {
    padding: 90px 0;
  }
  .sv-container {
    width: min(900px, calc(100% - 60px));
    grid-template-columns: 1fr;
    gap: 60px;
  }
  .sv-content {
    max-width: 800px;
  }
  .sv-description {
    max-width: 750px;
  }
  .sv-image-card {
    height: 520px;
  }
} /* ========================================================= MOBILE ========================================================= */
@media (max-width: 700px) {
  .sv-about-section {
    padding: 70px 0;
  }
  .sv-container {
    width: calc(100% - 32px);
    gap: 42px;
  }
  .sv-title {
    margin-top: 22px;
    font-size: 42px;
    line-height: 50px;
    letter-spacing: -0.025em;
  }
  .sv-description {
    font-family: "Segoe UI", sans-serif;
    font-size: 15px;
    line-height: 26px;
  }
  .sv-status {
    width: 100%;
    min-width: 0;
  }
  .sv-image-wrap {
    padding: 0;
  }
  .sv-image-card {
    height: 440px;
    border-radius: 30px;
  }
  .sv-image-location {
    top: 16px;
    right: 16px;
  }
  .sv-image-info {
    left: 16px;
    right: 16px;
    bottom: 16px;
    padding: 11px;
  }
} /* ========================================================= SMALL MOBILE ========================================================= */
@media (max-width: 430px) {
  .sv-about-section {
    padding: 55px 0;
  }
  .sv-container {
    width: calc(100% - 24px);
  }
  .sv-title {
    font-size: 40px;
    line-height: 47px;
  }
  .sv-image-card {
    height: 390px;
    border-radius: 26px;
  }
  .sv-image-info-content span {
    font-size: 9px;
  }
}


/* sustainable section 1.1 */


/* sustainable section 1 */


/* =========================================
   SMART EV CHARGING   iOS INSPIRED
========================================= */

.ev-section {
  --ev-orange: #e4610e;
  --ev-green: #159b68;
  --ev-ink: #171a21;
  --ev-muted: #687080;

  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 5% 0 5% 0;
  background: #fff;
  font-family: -apple-system, BlinkMacSystemFont,
    "SF Pro Display", "Segoe UI", sans-serif;
}

/* Soft ambient background */
.ev-section::before,
.ev-section::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 430px;
  height: 430px;
  border-radius: 50%;
  filter: blur(100px);
  pointer-events: none;
  opacity: .11;
}

.ev-section::before {
  top: 60px;
  left: -280px;
  background: #ff8b42;
}

.ev-section::after {
  right: -280px;
  bottom: 0;
  background: #42c99a;
}

.ev-container {
  width: min(1240px, 100%);
  margin-inline: auto;
}

/* Heading */
.ev-heading {
  max-width: 930px;
  margin: 0 auto 58px;
  text-align: center;
}

.ev-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;

  color: var(--ev-orange);
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 2.5px;
}

.ev-eyebrow-line {
  width: 28px;
  height: 2px;
  background: var(--ev-orange);
  border-radius: 20px;
}

.ev-heading h2 {
  margin: 0;
  color: var(--ev-ink);
  font-size: clamp(34px, 4.5vw, 58px);
  font-weight: 750;
  line-height: 1.08;
  letter-spacing: -2.5px;
}

.ev-heading h2 span {
  display: block;
  color: #89909c;
}

.ev-heading p {
  max-width: 980px;
  margin: 22px auto 0;
  color: var(--ev-muted);
  font-size: 17px;
  line-height: 1.8;
}

/* Grid */
.ev-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

/* Cards */
.ev-card {
  --accent: #e4610e;
  --tint: 228, 97, 14;

  position: relative;
  display: flex;
  flex-direction: column;
  padding: 30px;

  overflow: hidden;
  isolation: isolate;

  border: 1px solid #e9ebef;
  border-radius: 28px;
  background: rgba(255, 255, 255, .82);

  box-shadow:
    0 2px 5px rgba(18, 25, 38, .025),
    0 14px 38px rgba(18, 25, 38, .035),
    inset 0 1px 0 rgba(255, 255, 255, .9);

  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);

  transition:
    transform .4s cubic-bezier(.2,.8,.2,1),
    box-shadow .4s ease,
    border-color .3s ease;
}

/* Card-specific accents */
.ev-orange {
  --accent: #e4610e;
  --tint: 228, 97, 14;
}

.ev-green {
  --accent: #159b68;
  --tint: 21, 155, 104;
}

.ev-blue {
  --accent: #3978d4;
  --tint: 57, 120, 212;
}

.ev-purple {
  --accent: #8b5bd6;
  --tint: 139, 91, 214;
}

.ev-teal {
  --accent: #129b9b;
  --tint: 18, 155, 155;
}

.ev-lime {
  --accent: #719c2a;
  --tint: 113, 156, 42;
}

/* Ambient glow inside each card */
.ev-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -95px;
  right: -90px;

  width: 220px;
  height: 220px;
  border-radius: 50%;

  background: radial-gradient(
    circle,
    rgba(var(--tint), .15) 0%,
    rgba(var(--tint), .055) 38%,
    transparent 72%
  );

  opacity: .75;
  transition: transform .5s ease, opacity .4s ease;
}

/* Subtle bottom accent */
.ev-card::after {
  content: "";
  position: absolute;
  left: 30px;
  right: 30px;
  bottom: 0;

  height: 2px;
  border-radius: 10px 10px 0 0;

  background: linear-gradient(
    90deg,
    transparent,
    var(--accent),
    transparent
  );

  opacity: 0;
  transform: scaleX(.4);
  transition: .4s ease;
}

/* Top row */
.ev-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
}

.ev-icon {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;

  color: var(--accent);
  background: rgba(var(--tint), .085);
  border: 1px solid rgba(var(--tint), .13);
  border-radius: 19px;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    0 5px 14px rgba(var(--tint), .045);

  transition:
    transform .4s cubic-bezier(.2,.8,.2,1),
    background .3s ease;
}

.ev-icon svg {
  width: 25px;
  height: 25px;
  stroke: rgb(228 97 14);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ev-number {
  color: #a4aab4;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
}

/* Card content */
.ev-card h3 {
    color: var(--ev-ink);
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -.6px;
}

.ev-card p {
  margin: 0;
  color: var(--ev-muted);
  font-size: 15px;
  line-height: 1.75;
}

/* Bottom line */
.ev-card-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  margin-top: auto;
  padding-top: 26px;

  color: var(--accent);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .1px;
}

.ev-arrow {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;

  border: 1px solid rgba(var(--tint), .18);
  border-radius: 50%;
  background: rgba(var(--tint), .055);

  font-size: 17px;
  transition: transform .3s ease, background .3s ease;
}

/* Hover */
@media (hover: hover) {
  .ev-card:hover {
    transform: translateY(-7px);
    border-color: rgba(var(--tint), .3);

    box-shadow:
      0 18px 45px rgba(18, 25, 38, .075),
      0 0 35px rgba(var(--tint), .07),
      inset 0 1px 0 #fff;
  }

  .ev-card:hover::before {
    opacity: 1;
    transform: scale(1.25);
  }

  .ev-card:hover::after {
    opacity: .75;
    transform: scaleX(1);
  }

  .ev-card:hover .ev-icon {
    transform: translateY(-3px) scale(1.04);
    background: rgba(var(--tint), .13);
  }

  .ev-card:hover .ev-arrow {
    transform: translate(3px, -3px);
    background: rgba(var(--tint), .12);
  }
}

/* Footer note */
.ev-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;

  margin-top: 38px;
  text-align: center;
}

.ev-footer-dot {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: var(--ev-green);
  box-shadow: 0 0 0 5px rgba(21, 155, 104, .09);
}

.ev-footer p {
  margin: 0;
  color: #858c98;
  font-size: 13px;
  line-height: 1.6;
}

/* Tablet */
@media (max-width: 1024px) {
  .ev-section {
    padding: 85px 24px;
  }

  .ev-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  .ev-card {
    min-height: 290px;
    padding: 26px;
    border-radius: 25px;
  }

  .ev-heading {
    margin-bottom: 45px;
  }
}

/* Mobile */
@media (max-width: 600px) {
  .ev-section {
    padding: 68px 18px;
  }

  .ev-heading {
    margin-bottom: 34px;
  }

  .ev-heading h2 {
    font-size: clamp(32px, 9vw, 43px);
    letter-spacing: -1.7px;
  }

  .ev-heading p {
    font-size: 15px;
    line-height: 1.75;
  }

  .ev-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .ev-card {
    min-height: 0;
    padding: 25px;
    border-radius: 23px;
  }

  .ev-card-top {
    margin-bottom: 23px;
  }

  .ev-card h3 {
    font-size: 20px;
  }

  .ev-card p {
    font-size: 14px;
  }

  .ev-card-bottom {
    padding-top: 22px;
  }

  .ev-footer {
    align-items: flex-start;
    margin-top: 28px;
  }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  .ev-card,
  .ev-card::before,
  .ev-card::after,
  .ev-icon,
  .ev-arrow {
    transition: none !important;
  }
}

/* sustainable section 1 */

/* sustainable section 2 */


/* =========================================
   EV CHARGING JOURNEY   iOS INSPIRED
========================================= */

.ev-journey {
  --ev-orange: #f06416;
  --ev-green: #15966a;
  --ev-ink: #17191f;
  --ev-muted: #737b88;

  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 110px 24px;
  background: radial-gradient(130% 120% at 100% 0%,#3a2412,#161a1f 55%,#0e0f12);
  color: var(--ev-ink);
  font-family: -apple-system, BlinkMacSystemFont,
    "SF Pro Display", "Segoe UI", sans-serif;
}

.ev-journey *,
.ev-journey *::before,
.ev-journey *::after {
  box-sizing: border-box;
}

.ev-container {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
}

/* Soft ambient background */

.ev-journey__glow {
  position: absolute;
  z-index: -1;
  top: 100px;
  right: -180px;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(240, 100, 22, .10),
    rgba(240, 100, 22, 0) 70%
  );
  pointer-events: none;
}

.ev-journey::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -220px;
  bottom: -220px;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(21, 150, 106, .09),
    transparent 70%
  );
  pointer-events: none;
}

/* Heading */

.ev-heading {
  max-width: 980px;
  margin: 0 auto 72px;
  text-align: center;
}

.ev-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 23px;
  color: var(--ev-green);
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 2px;
}

.ev-eyebrow__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ev-orange);
  box-shadow: 0 0 0 5px rgba(240, 100, 22, .10);
}

.ev-heading h2 {
  margin: 0;
  font-size: clamp(36px, 5vw, 62px);
  line-height: 1.08;
  letter-spacing: -2.8px;
  font-weight: 760;
}

.ev-heading h2 span {
  color: var(--ev-green);
}

.ev-heading > p {
  max-width: 980px;
  margin: 23px auto 0;
  color: var(--ev-muted);
  font-size: 17px;
  line-height: 1.8;
}

/* Main layout */

.ev-journey__layout {
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  align-items: start;
  gap: 56px;
}

/* Left panel */

.ev-intro {
  position: sticky;
  top: 30px;
  min-height: 440px;
  padding: 36px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .8);
  border-radius: 32px;
  background:
    radial-gradient(circle at 90% 5%, rgb(207 93 29 / 16%), #c7111100 38%), radial-gradient(circle at 0% 100%, rgba(21, 150, 106, .12), #ffffff00 42%), rgb(255 255 255);
  box-shadow:
    0 24px 70px rgba(26, 36, 48, .07),
    inset 0 1px 0 #fff;
}

.ev-intro__icon {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin-bottom: 36px;
  border: 1px solid rgba(240, 100, 22, .18);
  border-radius: 19px;
  background: rgba(255, 255, 255, .8);
  box-shadow: 0 8px 25px rgba(26, 36, 48, .06);
}

.ev-intro__icon svg {
  width: 27px;
  height: 27px;
  stroke: var(--ev-orange);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ev-intro__label {
  color: var(--ev-green);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.8px;
}

.ev-intro h3 {
  position: relative;
  z-index: 1;
  margin: 17px 0;
  font-size: clamp(34px, 3.4vw, 48px);
  line-height: 1.1;
  letter-spacing: -2px;
}

.ev-intro h3 span {
  color: var(--ev-orange);
}

.ev-intro > p {
  position: relative;
  z-index: 1;
  margin: 0;
  color: #68717e;
  font-size: 15px;
  line-height: 1.85;
}

.ev-intro__footer {
  position: absolute;
  right: 30px;
  bottom: 30px;
  left: 30px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 20px;
  border-top: 1px solid rgba(23, 25, 31, .09);
  color: #737b88;
  font-size: 12px;
  font-weight: 650;
}

.ev-status {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ev-green);
  box-shadow: 0 0 0 5px rgba(21, 150, 106, .10);
}

/* Decorative orbit */

.ev-orbit {
  position: absolute;
  right: -75px;
  bottom: 70px;
  width: 220px;
  height: 220px;
  border: 1px solid rgba(21, 150, 106, .13);
  border-radius: 50%;
  pointer-events: none;
}

.ev-orbit--two {
  right: -35px;
  bottom: 30px;
  width: 140px;
  height: 140px;
  border-color: rgba(240, 100, 22, .14);
}

/* Timeline */

.ev-timeline {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ev-step {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 17px;
  min-width: 0;
}

.ev-step__rail {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ev-step__number {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 43px;
  height: 43px;
  border: 1px solid rgba(21, 150, 106, .18);
  border-radius: 15px;
  background: #eaf6f0;
  color: var(--ev-green);
  font-size: 12px;
  font-weight: 800;
  transition: .3s ease;
}

.ev-step__line {
  width: 1px;
  flex: 1;
  min-height: 35px;
  margin: 10px 0;
  background: linear-gradient(
    to bottom,
    rgba(21, 150, 106, .35),
    rgba(21, 150, 106, .05)
  );
}

/* Service cards */

.ev-step__card {
  min-width: 0;
  padding: 15px 27px;
  border: 1px solid #e9ecef;
  border-radius: 25px;
  background: rgb(255 255 255);
  box-shadow:
    0 5px 18px rgba(26, 36, 48, .025),
    inset 0 1px 0 #fff;
  transition:
    transform .35s ease,
    box-shadow .35s ease,
    border-color .35s ease;
}

.ev-step__card:hover {
  transform: translateY(-4px);
  border-color: rgba(21, 150, 106, .3);
  box-shadow:
    0 20px 45px rgba(26, 36, 48, .08),
    0 0 0 4px rgba(21, 150, 106, .035);
}

.ev-step__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 17px;
}

.ev-step__tag {
  color: #9299a4;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.5px;
}

.ev-step__icon {
  display: grid;
  place-items: center;
  width: 43px;
  height: 43px;
  flex: 0 0 auto;
  border: 1px solid rgba(240, 100, 22, .13);
  border-radius: 15px;
  background: #fff4ed;
  transition: .3s ease;
}

.ev-step__icon svg {
  width: 21px;
  height: 21px;
  stroke: var(--ev-orange);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ev-step__card:hover .ev-step__icon {
  transform: rotate(-5deg) scale(1.06);
  background: #ffeadc;
}

.ev-step__card h3 {
  margin: 0 0 10px;
  color: var(--ev-ink);
  font-size: 21px;
  font-weight: 730;
  letter-spacing: -.6px;
}

.ev-step__card > p {
  margin: 0;
  color: #727b87;
  font-size: 14px;
  line-height: 1.8;
}

.ev-step__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 19px;
}

.ev-step__meta span {
  padding: 7px 11px;
  border: 1px solid #edf0f1;
  border-radius: 100px;
  background: #f8f9fa;
  color: #626c77;
  font-size: 10px;
  font-weight: 650;
}

.ev-step--last .ev-step__number {
  background: #fff0e6;
  border-color: rgba(240, 100, 22, .2);
  color: var(--ev-orange);
}

/* Responsive */

@media (max-width: 900px) {
  .ev-journey {
    padding: 85px 22px;
  }

  .ev-journey__layout {
    grid-template-columns: 1fr;
    gap: 35px;
  }

  .ev-intro {
    position: relative;
    top: auto;
    min-height: 350px;
  }

  .ev-heading {
    margin-bottom: 50px;
  }
}

@media (max-width: 560px) {
  .ev-journey {
    padding: 65px 16px;
  }

  .ev-heading {
    margin-bottom: 38px;
  }

  .ev-heading h2 {
    font-size: 38px;
    letter-spacing: -1.7px;
  }

  .ev-heading > p {
    font-size: 15px;
  }

  .ev-intro {
    min-height: 365px;
    padding: 27px;
    border-radius: 25px;
  }

  .ev-intro h3 {
    font-size: 38px;
  }

  .ev-step {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 11px;
  }

  .ev-step__number {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    font-size: 10px;
  }

  .ev-step__card {
    padding: 21px 18px;
    border-radius: 21px;
  }

  .ev-step__card h3 {
    font-size: 19px;
  }

  .ev-step__card > p {
    font-size: 13px;
  }

  .ev-step__icon {
    width: 38px;
    height: 38px;
  }
}

/* Respect reduced-motion preferences */

@media (prefers-reduced-motion: reduce) {
  .ev-step__card,
  .ev-step__icon,
  .ev-step__number {
    transition: none;
  }
}

/* sustainable section 2 */

/* sustainable section 3 */

  
/* =====================================
   GLOTEFEWO   iOS-inspired audience UI
===================================== */

.mobility-audience {
  --mobility-orange: #f06416;
  --mobility-green: #159b69;
  --mobility-ink: #17191f;
  --mobility-muted: #707782;

  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 110px 24px 100px;
  background: #fff;
  font-family: -apple-system, BlinkMacSystemFont,
    "SF Pro Display", "Segoe UI", sans-serif;
}

.mobility-audience *,
.mobility-audience *::before,
.mobility-audience *::after {
  box-sizing: border-box;
}

.mobility-container {
  position: relative;
  z-index: 1;
  width: min(1180px, 100%);
  margin-inline: auto;
}

/* Soft ambient color shades */

.mobility-audience::before,
.mobility-audience::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  filter: blur(100px);
  opacity: .13;
  pointer-events: none;
}

.mobility-audience::before {
  top: 80px;
  left: -280px;
  background: #ff8b45;
}

.mobility-audience::after {
  right: -280px;
  bottom: 30px;
  background: #36c994;
}

/* Heading */

.mobility-heading {
  max-width: 760px;
  margin: 0 auto 58px;
  text-align: center;
}

.mobility-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 23px;
  color: var(--mobility-orange);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 2.1px;
}

.eyebrow-line {
  width: 25px;
  height: 2px;
  background: var(--mobility-orange);
  border-radius: 5px;
}

.mobility-heading h2 {
  margin: 0;
  color: var(--mobility-ink);
  font-size: clamp(38px, 5vw, 62px);
  font-weight: 760;
  letter-spacing: -2.8px;
  line-height: 1.06;
}

.mobility-heading h2 span {
  color: #a0a5ad;
}

.mobility-heading > p {
  margin: 22px auto 0;
  color: var(--mobility-muted);
  font-size: 17px;
  line-height: 1.8;
}

/* Main grid */

.mobility-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
}

/* Glass-inspired cards */

.mobility-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 32px;
  overflow: hidden;
  border: 1px solid rgba(25, 30, 40, .09);
  border-radius: 30px;
  background: rgba(255, 255, 255, .82);
  box-shadow:
    0 2px 4px rgba(20, 30, 40, .02),
    0 20px 65px rgba(20, 30, 40, .055),
    inset 0 1px 0 rgba(255, 255, 255, .95);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  transition:
    transform .35s ease,
    box-shadow .35s ease,
    border-color .35s ease;
}

.mobility-card--partner {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 32px;
  overflow: hidden;
  border: 1px solid rgba(25, 30, 40, .09);
  border-radius: 30px;
  background: radial-gradient(130% 120% at 100% 0%,#3a2412,#161a1f 55%,#0e0f12);
  box-shadow:
    0 2px 4px rgba(20, 30, 40, .02),
    0 20px 65px rgba(20, 30, 40, .055),
    inset 0 1px 0 rgba(255, 255, 255, .95);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  transition:
    transform .35s ease,
    box-shadow .35s ease,
    border-color .35s ease;
}

.mobility-card:hover {
  transform: translateY(-7px);
  box-shadow:
    0 24px 70px rgba(20, 30, 40, .10),
    inset 0 1px 0 rgba(255, 255, 255, .95);
}

.mobility-card--customer:hover {
  border-color: rgba(240, 100, 22, .25);
}

.mobility-card--partner:hover {
  border-color: rgba(21, 155, 105, .25);
}

.mobility-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}

.mobility-icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, .8);
  border-radius: 18px;
  background: #fff0e7;
  color: var(--mobility-orange);
  box-shadow: 0 5px 18px rgba(240, 100, 22, .07);
}

.mobility-icon svg {
  width: 25px;
  height: 25px;
}

.mobility-card--partner .mobility-icon {
  color: var(--mobility-green);
  background: #e8f7f0;
  box-shadow: 0 5px 18px rgba(21, 155, 105, .07);
}

.mobility-index {
  color: #9298a1;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
}

.mobility-card-content {
  margin-top: 32px;
}

.mobility-label {
  display: inline-block;
  margin-bottom: 12px;
  color: var(--mobility-orange);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .4px;
}

.mobility-card--partner .mobility-label {
  color: var(--mobility-green);
}

.mobility-card-content h3 {
  margin: 0;
  color: var(--mobility-ink);
  font-size: clamp(31px, 3vw, 42px);
  font-weight: 740;
  letter-spacing: -1.7px;
  line-height: 1.13;
}

.mobility-card-content h3 span {
  color: var(--mobility-orange);
}

.mobility-card--partner .mobility-card-content h3 span {
  color: var(--mobility-green);
}

.mobility-card--partner .mobility-card-content h3 {
  color: #ffffff;
}

.mobility-card-content p {
  max-width: 430px;
  margin: 16px 0 0;
  color: var(--mobility-muted);
  font-size: 15px;
  line-height: 1.8;
}


/* Decorative visual panels */

.mobility-visual {
  position: relative;
  display: grid;
  place-items: center;
  height: 180px;
  margin: 27px 0 25px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .8);
  border-radius: 24px;
}

.mobility-visual--customer {
  background:
    radial-gradient(ellipse at 50% 50%,
      rgba(255, 255, 255, .98) 0%,
      rgba(255, 238, 226, .8) 38%,
      rgba(255, 248, 242, .3) 75%);
}

.mobility-visual--partner {
  background:
    radial-gradient(ellipse at 50% 50%,
      rgba(255, 255, 255, .98) 0%,
      rgba(224, 247, 237, .85) 42%,
      rgba(245, 252, 248, .3) 80%);
}

.visual-orbit {
  position: absolute;
  width: 130px;
  height: 130px;
  border: 1px solid rgba(240, 100, 22, .2);
  border-radius: 50%;
}

.orbit-two {
  width: 175px;
  height: 175px;
  border-color: rgba(240, 100, 22, .11);
}

.visual-core {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border: 1px solid rgba(240, 100, 22, .18);
  border-radius: 24px;
  background: rgba(255, 255, 255, .88);
  color: var(--mobility-orange);
  box-shadow:
    0 10px 35px rgba(240, 100, 22, .12),
    inset 0 1px 0 #fff;
  backdrop-filter: blur(12px);
}

.visual-core svg {
  width: 31px;
  height: 31px;
}

.visual-caption {
  position: absolute;
  bottom: 15px;
  color: #858b94;
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 1.1px;
  text-transform: uppercase;
}

/* Partner network illustration */

.partner-network {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: rgba(21, 155, 105, .45);
}

.partner-center {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border: 1px solid rgba(21, 155, 105, .18);
  border-radius: 22px;
  background: rgba(255, 255, 255, .92);
  color: var(--mobility-green);
  box-shadow: 0 10px 35px rgba(21, 155, 105, .12);
  backdrop-filter: blur(12px);
}

.partner-center svg {
  width: 30px;
  height: 30px;
}

.partner-node {
  position: absolute;
  z-index: 1;
  width: 12px;
  height: 12px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--mobility-green);
  box-shadow: 0 0 0 5px rgba(21, 155, 105, .10);
}

.node-a { left: 16%; top: 56%; }
.node-b { left: 37%; top: 20%; }
.node-c { right: 35%; top: 64%; }
.node-d { right: 15%; top: 23%; }

/* Benefits */

.mobility-benefits {
  display: grid;
  gap: 15px;
  margin: 0;
  padding: 25px 0;
  list-style: none;
  border-top: 1px solid rgba(25, 30, 40, .08);
}

.mobility-benefits li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  color: #454b55;
  font-size: 14px;
  line-height: 1.6;
}

.benefit-check {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #fff0e7;
  color: var(--mobility-orange);
  font-size: 12px;
  font-weight: 800;
}

.mobility-card--partner .benefit-check {
  background: #e8f7f0;
  color: var(--mobility-green);
}

/* Bottom links */

.mobility-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-top: auto;
  padding: 18px 20px;
  border: 1px solid rgba(25, 30, 40, .09);
  border-radius: 17px;
  background: rgba(255, 255, 255, .75);
  color: var(--mobility-ink);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: background .25s ease, color .25s ease;
}

.mobility-link:hover {
  background: var(--mobility-orange);
  color: #fff;
}

.mobility-card--partner .mobility-link:hover {
  background: var(--mobility-green);
}

.link-arrow {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(25, 30, 40, .05);
  font-size: 17px;
  transition: transform .25s ease;
}

.mobility-link:hover .link-arrow {
  transform: translate(2px, -2px);
  background: rgba(255, 255, 255, .2);
}

/* Footer note */

.mobility-footnote {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 35px;
  color: #8a9099;
  font-size: 12px;
  letter-spacing: .2px;
}

.footnote-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--mobility-green);
  box-shadow: 0 0 0 5px rgba(21, 155, 105, .09);
}

/* Responsive */

@media (max-width: 800px) {
  .mobility-audience {
    padding: 80px 20px;
  }

  .mobility-grid {
    grid-template-columns: 1fr;
    max-width: 600px;
    margin-inline: auto;
  }

  .mobility-heading {
    margin-bottom: 40px;
  }

  .mobility-heading h2 {
    letter-spacing: -1.8px;
  }

  .mobility-card {
    padding: 27px;
    border-radius: 26px;
  }
}

@media (max-width: 480px) {
  .mobility-audience {
    padding: 65px 15px;
  }

  .mobility-heading > p {
    font-size: 15px;
  }

  .mobility-card {
    padding: 22px;
    border-radius: 23px;
  }

  .mobility-card-content {
    margin-top: 25px;
  }

  .mobility-card-content h3 {
    font-size: 34px;
  }

  .mobility-visual {
    height: 155px;
  }

  .mobility-index {
    font-size: 9px;
    letter-spacing: 1px;
  }
}

/* Accessibility */

@media (prefers-reduced-motion: reduce) {
  .mobility-card,
  .mobility-link,
  .link-arrow {
    transition: none;
  }
}

/* sustainable section 3 */

/* business section 1 */


/* =====================================
   GLOTEFEWO   Dark iOS-inspired workflow
===================================== */

.delivery-flow {
  --df-orange: #ff792f;
  --df-green: #39d69b;
  --df-white: #f7f8fa;
  --df-muted: #a0a7b3;

  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 110px 24px;
  background: #080a0e;
  color: var(--df-white);
  font-family: -apple-system, BlinkMacSystemFont,
    "SF Pro Display", "Segoe UI", sans-serif;
}

.delivery-flow *,
.delivery-flow *::before,
.delivery-flow *::after {
  box-sizing: border-box;
}

.delivery-container {
  width: min(1180px, 100%);
  margin-inline: auto;
  position: relative;
  z-index: 1;
}

/* Ambient background */

.delivery-flow::before,
.delivery-flow::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 550px;
  height: 550px;
  border-radius: 50%;
  filter: blur(120px);
  opacity: .13;
  pointer-events: none;
}

.delivery-flow::before {
  top: -260px;
  left: -220px;
  background: #ff7028;
}

.delivery-flow::after {
  right: -280px;
  bottom: -230px;
  background: #168bba;
}

/* Header */

.delivery-header {
  margin-bottom: 60px;
}

.delivery-eyebrow {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 25px;
  color: #ff9a64;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 2px;
}

.delivery-eyebrow-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--df-orange);
  box-shadow: 0 0 14px rgba(255, 121, 47, .8);
}

.delivery-eyebrow-line {
  width: 38px;
  height: 1px;
  background: rgba(255, 255, 255, .2);
}

.delivery-eyebrow-count {
  color: #777f8c;
}

.delivery-header h2 {
  margin: 0;
  font-size: clamp(42px, 6vw, 74px);
  font-weight: 760;
  letter-spacing: -3.5px;
  line-height: 1.02;
}

.delivery-header h2 span {
  color: transparent;
  background: linear-gradient(
    100deg,
    #ff9a61 0%,
    #ff792f 38%,
    #f3c18d 70%,
    #d8e4e9 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
}

.delivery-header > p {
  margin: 24px 0 0;
  color: var(--df-muted);
  font-size: 16px;
  line-height: 1.85;
}

/* Journey track */

.delivery-journey {
  padding: 25px 28px 30px;
  margin-bottom: 28px;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 24px;
  background: rgba(255, 255, 255, .035);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.journey-label {
  display: block;
  margin-bottom: 25px;
  color: #858d99;
  font-size: 9px;
  font-weight: 750;
  letter-spacing: 1.8px;
}

.journey-track {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}

.journey-track::before,
.journey-progress {
  position: absolute;
  top: 6px;
  left: 0;
  height: 1px;
  content: "";
}

.journey-track::before {
  width: 100%;
  background: rgba(255, 255, 255, .13);
}

.journey-progress {
  width: 20%;
  background: linear-gradient(
    90deg, #ff792f, #ffb16d
  );
  box-shadow: 0 0 12px rgba(255, 121, 47, .6);
}

.journey-point {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 13px;
  color: #7f8793;
  font-size: 11px;
  font-weight: 600;
}

.journey-point-inner {
  width: 13px;
  height: 13px;
  border: 1px solid #555d69;
  border-radius: 50%;
  background: #11151b;
}

.journey-point.active {
  color: #ffab79;
}

.journey-point.active .journey-point-inner {
  border-color: var(--df-orange);
  background: var(--df-orange);
  box-shadow: 0 0 0 5px rgba(255, 121, 47, .12),
              0 0 18px rgba(255, 121, 47, .5);
}

/* Cards grid */

.delivery-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.delivery-card {
  --card-accent: var(--df-orange);
  --card-glow: rgba(255, 121, 47, .15);

  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 310px;
  padding: 25px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .095);
  border-radius: 25px;
  background:
    radial-gradient(
      ellipse at 100% 0%,
      var(--card-glow),
      transparent 58%
    ),
    linear-gradient(
      145deg,
      rgba(255, 255, 255, .065),
      rgba(255, 255, 255, .018) 70%
    );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .055),
    0 14px 40px rgba(0, 0, 0, .15);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  transition:
    transform .35s ease,
    border-color .35s ease,
    box-shadow .35s ease;
}

.delivery-card::before {
  position: absolute;
  top: 0;
  left: 25px;
  right: 25px;
  height: 1px;
  content: "";
  background: linear-gradient(
    90deg,
    transparent,
    var(--card-accent),
    transparent
  );
  opacity: .55;
}

.delivery-card:hover {
  transform: translateY(-6px);
  border-color: color-mix(
    in srgb, var(--card-accent) 38%, transparent
  );
  box-shadow:
    0 22px 55px rgba(0, 0, 0, .28),
    0 0 35px var(--card-glow);
}

.delivery-card--orange {
  --card-accent: #ff8745;
  --card-glow: rgba(255, 121, 47, .15);
}

.delivery-card--green {
  --card-accent: #48d7a0;
  --card-glow: rgba(42, 198, 139, .13);
}

.delivery-card--blue {
  --card-accent: #72b9ff;
  --card-glow: rgba(66, 148, 255, .13);
}

.delivery-card--purple {
  --card-accent: #b6a0ff;
  --card-glow: rgba(145, 107, 255, .14);
}

/* Card top */

.delivery-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.delivery-number {
  color: #7d8693;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 1.5px;
}

.delivery-symbol {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid color-mix(
    in srgb, var(--card-accent) 25%, transparent
  );
  border-radius: 16px;
  background: color-mix(
    in srgb, var(--card-accent) 9%, transparent
  );
  color: var(--card-accent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}

.delivery-symbol svg {
  width: 23px;
  height: 23px;
}

/* Card content */

.delivery-card-body {
  margin-top: 28px;
}

.delivery-stage {
  color: var(--card-accent);
  font-size: 9px;
  font-weight: 750;
  letter-spacing: 1.8px;
}

.delivery-card h3 {
  margin: 10px 0 12px;
  color: #f4f6f8;
  font-size: 27px;
  font-weight: 720;
  letter-spacing: -.9px;
}

.delivery-card p {
  margin: 0;
  color: #9ba3af;
  font-size: 13px;
  line-height: 1.8;
}

/* Card bottom */

.delivery-card-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 28px;
}

.delivery-card-bottom > span:first-child {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #68717e;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
}

.delivery-card-bottom i {
  display: block;
  width: 28px;
  height: 1px;
  background: rgba(255, 255, 255, .2);
}

.delivery-arrow {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 50%;
  color: var(--card-accent);
  font-size: 17px;
  transition: transform .3s ease;
}

.delivery-card:hover .delivery-arrow {
  transform: translate(2px, -2px);
}

/* Closing banner */

.delivery-footer {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 28px;
  padding: 25px 28px;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 23px;
  background: linear-gradient(
    110deg,
    rgba(255, 121, 47, .09),
    rgba(255, 255, 255, .025) 50%,
    rgba(55, 198, 144, .06)
  );
}

.delivery-footer-mark {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 29px;
  padding: 5px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 10px;
  background: rgba(255, 255, 255, .04);
}

.delivery-footer-mark span {
  width: 4px;
  border-radius: 5px;
  background: var(--df-orange);
}

.delivery-footer-mark span:nth-child(1) {
  height: 10px;
}

.delivery-footer-mark span:nth-child(2) {
  height: 17px;
}

.delivery-footer-mark span:nth-child(3) {
  height: 23px;
  background: var(--df-green);
}

.delivery-footer strong {
  display: block;
  color: #f4f6f8;
  font-size: 14px;
  font-weight: 700;
}

.delivery-footer p {
  margin: 5px 0 0;
  color: #929aa6;
  font-size: 12px;
  line-height: 1.6;
}

.delivery-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-left: auto;
  padding: 13px 17px;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 14px;
  background: rgba(255, 255, 255, .07);
  color: #f8f9fa;
  font-size: 12px;
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;
  transition: background .25s ease, border-color .25s ease;
}

.delivery-cta:hover {
  border-color: rgba(255, 121, 47, .4);
  background: rgba(255, 121, 47, .13);
}

.delivery-cta span {
  color: #ff9b62;
  font-size: 17px;
}

/* Responsive */

@media (max-width: 900px) {
  .delivery-flow {
    padding: 85px 22px;
  }

  .delivery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .delivery-header h2 {
    letter-spacing: -2.5px;
  }

  .delivery-card {
    min-height: 300px;
  }
}

@media (max-width: 600px) {
  .delivery-flow {
    padding: 70px 16px;
  }

  .delivery-header {
    margin-bottom: 40px;
  }

  .delivery-header h2 {
    font-size: clamp(39px, 11vw, 55px);
    letter-spacing: -2px;
  }

  .delivery-header > p {
    font-size: 14px;
  }

  .delivery-journey {
    padding: 20px 16px 23px;
    overflow: hidden;
  }

  .journey-track {
    gap: 8px;
  }

  .journey-point {
    font-size: 9px;
  }

  .journey-point-inner {
    width: 11px;
    height: 11px;
  }

  .delivery-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .delivery-card {
    min-height: 0;
    padding: 24px;
    border-radius: 22px;
  }

  .delivery-card-body {
    margin-top: 22px;
  }

  .delivery-card-bottom {
    padding-top: 22px;
  }

  .delivery-footer {
    flex-wrap: wrap;
    padding: 22px;
    gap: 14px;
  }

  .delivery-footer > div:nth-child(2) {
    flex: 1;
    min-width: 180px;
  }

  .delivery-cta {
    width: 100%;
    margin: 4px 0 0;
  }
}

/* Reduced motion */

@media (prefers-reduced-motion: reduce) {
  .delivery-card,
  .delivery-arrow,
  .delivery-cta {
    transition: none;
  }
}

/* business section 1 */

/* header extra css */

/* =====================================================
   GLOTEFEWO - ACTIVE NAV + SMART STICKY HEADER
===================================================== */




/* -----------------------------
   ACTIVE DESKTOP BUTTON
------------------------------ */

.ios27-nav-link.active {
    position: relative;

    background: #e95924;

    border: 1px solid rgba(233, 89, 36, 0.28);

    border-radius: 14px;

    box-shadow:
        0 0 18px rgba(233, 89, 36, 0.10),
        inset 0 1px 0 rgba(255,255,255,0.08);

    transition:
        background 0.3s ease,
        border 0.3s ease,
        box-shadow 0.3s ease;
}



/* -----------------------------
   DROPDOWN PARENT ACTIVE
------------------------------ */

.company-link.active {

    background: #e95924;

    border-radius: 14px;

    box-shadow:
        0 0 18px rgba(233, 89, 36, 0.08);
}


/* -----------------------------
   MOBILE ACTIVE
------------------------------ */

.mobile-nav-link {
    position: relative;
}

.mobile-nav-link.active {

    color: #E95924 !important;

    background: rgba(233, 89, 36, 0.10);

    border-radius: 14px;

    box-shadow:
        inset 0 0 20px rgba(233, 89, 36, 0.06);
}







/* -----------------------------
   SCROLL DOWN = HIDE
------------------------------ */

.ios27-header.header-hidden {

    transform: translateY(-110%);

}


/* -----------------------------
   REDUCE MOTION
------------------------------ */

@media (prefers-reduced-motion: reduce) {

    .ios27-header {

        transition: none;

    }

}


/* header extra css */

/* services 2 */

/* =========================================================
   GLOTEFEWO   PREMIUM SOLUTIONS CARDS
========================================================= */

.gf-solutions-section {

    width: 100%;

    padding: 30px 24px;


    overflow: hidden;
}


/* =========================================================
   GRID
========================================================= */

.gf-solutions-grid {

    width: 100%;
    max-width: 1800px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 30px;
}


/* =========================================================
   CARD
========================================================= */

.gf-solution-card {

    position: relative;

    min-height: 485px;

    padding: 31px 32px 30px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    text-decoration: none;

    color: #ffffff;

    overflow: hidden;

    border-radius: 36px;

    border:
        1px solid rgba(255,255,255,0.17);

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.075),
            rgba(255,255,255,0.025) 48%,
            rgba(0,0,0,0.25)
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.08),
        0 18px 50px rgba(0,0,0,0.22);

    backdrop-filter:
        blur(24px)
        saturate(135%);

    -webkit-backdrop-filter:
        blur(24px)
        saturate(135%);

    transition:
        transform 0.55s cubic-bezier(.22,1,.36,1),
        border-color 0.45s ease,
        box-shadow 0.45s ease;
}


/* =========================================================
   CARD GLOW
========================================================= */

.gf-solution-card::before {

    content: "";

    position: absolute;

    width: 330px;
    height: 330px;

    left: -110px;
    bottom: -145px;

    border-radius: 50%;

    filter: blur(70px);

    opacity: 0.13;

    pointer-events: none;

    transition:
        transform 0.7s ease,
        opacity 0.5s ease;
}


/* Orange */

.gf-card-orange::before {

    background: #E95924;

}


/* Purple */

.gf-card-purple::before {

    background: #7654A8;

}


/* Blue */

.gf-card-blue::before {

    background: #5275A0;

}


/* Green */

.gf-card-green::before {

    background: #3C8C73;

}


/* =========================================================
   TOP NUMBER
========================================================= */

.gf-card-number {

    position: relative;

    z-index: 2;

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    font-size: 15px;

    line-height: 1;

    font-weight: 600;

    letter-spacing: 0.08em;

    color: rgba(218,225,231,0.68);
}


/* =========================================================
   CARD CONTENT
========================================================= */

.gf-card-content {

    position: relative;

    z-index: 2;

    margin-top: auto;

    margin-bottom: auto;

    padding-top: 30px;

    padding-bottom: 25px;
}


.gf-card-content h3 {

    margin: 0 0 24px;

    max-width: 95%;

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    font-size: clamp(25px, 1.65vw, 34px);

    line-height: 1.03;

    font-weight: 650;

    letter-spacing: -0.045em;

    color: #f5f6f7;
}


.gf-card-content p {

    max-width: 96%;

    margin: 0;

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    font-size: 16px;

    line-height: 1.65;

    font-weight: 400;

    letter-spacing: -0.01em;

    color: rgba(166,176,185,0.90);
}


/* =========================================================
   BOTTOM
========================================================= */

.gf-card-bottom {

    position: relative;

    z-index: 2;

    min-height: 61px;

    padding-top: 21px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    border-top:
        1px solid rgba(255,255,255,0.10);
}


.gf-card-bottom > span:first-child {

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    font-size: 14px;

    line-height: 1.3;

    font-weight: 500;

    color: rgba(206,213,219,0.88);
}


/* =========================================================
   ARROW
========================================================= */

.gf-arrow {

    flex: 0 0 auto;

    width: 38px;
    height: 38px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background:
        rgba(255,255,255,0.085);

    border:
        1px solid rgba(255,255,255,0.055);

    color: #ffffff;

    font-size: 22px;

    line-height: 1;

    font-weight: 400;

    transition:
        transform 0.45s cubic-bezier(.22,1,.36,1),
        background 0.35s ease,
        box-shadow 0.35s ease;
}


/* =========================================================
   HOVER
========================================================= */

.gf-solution-card:hover {

    transform:
        translateY(-8px);

    border-color:
        rgba(255,255,255,0.28);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.10),
        0 28px 70px rgba(0,0,0,0.35);
}


.gf-solution-card:hover::before {

    transform:
        scale(1.35)
        translate(35px,-20px);

    opacity: 0.22;
}


.gf-solution-card:hover .gf-arrow {

    transform:
        translate(3px,-3px);

    background:
        #E95924;

    border-color:
        #E95924;

    box-shadow:
        0 0 22px rgba(233,89,36,0.35);
}


/* =========================================================
   ORANGE CARD HOVER
========================================================= */

.gf-card-orange:hover {

    border-color:
        rgba(233,89,36,0.40);

}


/* =========================================================
   RESPONSIVE   TABLET
========================================================= */

@media (max-width: 1200px) {

    .gf-solutions-grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

    }

    .gf-solution-card {

        min-height: 440px;

    }

}


/* =========================================================
   RESPONSIVE   MOBILE
========================================================= */

@media (max-width: 700px) {

    .gf-solutions-section {

        padding:
            20px 16px;

    }

    .gf-solutions-grid {

        grid-template-columns: 1fr;

        gap: 18px;

    }

    .gf-solution-card {

        min-height: 410px;

        padding:
            27px 25px 25px;

        border-radius: 29px;

    }

    .gf-card-content h3 {

        font-size: 28px;

    }

    .gf-card-content p {

        font-size: 15px;

        line-height: 1.6;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 420px) {

    .gf-solution-card {

        min-height: 390px;

        padding:
            24px 21px 22px;

        border-radius: 25px;

    }

    .gf-card-content h3 {

        font-size: 25px;

    }

    .gf-card-bottom > span:first-child {

        font-size: 13px;

    }

}


/* services 2 */

/* page reload */

/* Page Loader */
#page-loader {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: #442111;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.7s ease, visibility 0.7s ease;
}

#page-loader.hide {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.loader-logo {
    font-size: 32px;
    font-weight: 700;
    letter-spacing: 2px;
    animation: loaderLogo 1.2s ease-in-out infinite alternate;
}

.loader-line {
    width: 180px;
    height: 3px;
    background: #e5e5e5;
    margin-top: 25px;
    overflow: hidden;
    border-radius: 10px;
}

.loader-line span {
    display: block;
    width: 45%;
    height: 100%;
    background: #222;
    border-radius: 10px;
    animation: loaderLine 1.2s ease-in-out infinite;
}

@keyframes loaderLogo {
    from {
        opacity: 0.4;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes loaderLine {
    0% {
        transform: translateX(-120%);
    }

    100% {
        transform: translateX(400%);
    }
}
/* page reload */

/* about section1 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;650;700;750;800&display=swap');

.globe-section {
    --orange: #E95924;
    --dark: #080b11;
    --text: #f5f6f7;
    --muted: rgba(166,176,185,.9);

    position: relative;
    overflow: hidden;
    padding: 100px 24px 110px;
    background:
        radial-gradient(ellipse at 50% 65%, rgba(16, 51, 83, .23), transparent 40%), 
        radial-gradient(ellipse at 0% 100%, rgba(233, 89, 36, .09), transparent 30%), 
        #ffffff;
    font-family: Inter, -apple-system, BlinkMacSystemFont,
                 "Segoe UI", sans-serif;
    color: var(--text);
}

.globe-section *,
.globe-section *::before,
.globe-section *::after {
    box-sizing: border-box;
}

.globe-container {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
}

/* HEADER */

.globe-header {
    margin: 0 auto 65px;
    text-align: center;
    position: relative;
    z-index: 2;
}

.globe-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 9px 17px;
    border: 1px solid rgba(233,89,36,.32);
    border-radius: 50px;
    background: rgba(233,89,36,.07);
    color: #ff7944;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    margin-bottom: 24px;
    box-shadow: 0 0 25px rgba(233,89,36,.06);
}

.badge-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--orange);
    box-shadow: 0 0 12px var(--orange);
    animation: badgePulse 1.8s infinite;
}

.globe-header h2 {
    margin: 0 0 22px;
    font-size: clamp(34px, 5.3vw, 62px);
    line-height: 1.13;
    letter-spacing: -2.8px;
    font-weight: 680;
    color: #000000;
}

.globe-header h2 span {
    display: block;
    color: var(--orange);
}

.globe-header > p {
    margin: 0 auto;
    width: 90%;
    color: rgb(76 76 76 / 90%)  ;
    font-size: 15px;
    font-weight: 400;
    line-height: 26px;
}

.globe-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
    margin-top: 29px;
}

.globe-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 23px;
    padding: 14px 22px;
    border-radius: 13px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 650;
    transition: .3s ease;
}

.globe-btn span {
    font-size: 21px;
    line-height: 1;
    transition: transform .3s ease;
}

.globe-btn:hover span {
    transform: translateX(5px);
}

.globe-btn.primary {
    background: linear-gradient(135deg, #ff702f, #e64c16);
    color: #fff;
    border: 1px solid #ff864d;
    box-shadow: 0 8px 28px rgba(233,89,36,.2);
}

.globe-btn.primary:hover {
    box-shadow: 0 10px 35px rgba(233,89,36,.4);
    transform: translateY(-3px);
}

.globe-btn.secondary {
    background: rgba(255,255,255,.045);
    color: #e5eaf0;
    border: 1px solid rgba(160,180,200,.2);
    backdrop-filter: blur(20px);
}

.globe-btn.secondary:hover {
    border-color: var(--orange);
    background: rgba(233,89,36,.08);
    transform: translateY(-3px);
}


/* MAIN LAYOUT */

.globe-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(340px, 1.1fr);
    align-items: center;
    gap: 22px;
    position: relative;
}

.globe-cards {
    display: flex;
    flex-direction: column;
    gap: 22px;
    position: relative;
    z-index: 3;
}

.left-cards {
    padding: 0 0 0 5px;
}

.right-cards {
    padding: 0 5px 0 0;
}


/* GLASS CARDS */

.globe-card {
    position: relative;
    min-height: 150px;
    width: 600px;
    margin-left: 50px;
    padding: 15px 23px 15px;
    overflow: hidden;
    border: 1px solid rgba(130,160,190,.22);
    border-radius: 20px;
    background: linear-gradient(145deg,
            rgba(255,255,255,.065),
            rgba(255,255,255,.018) 55%,
            rgba(255,255,255,.025));
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035),
        0 12px 35px rgba(0,0,0,.18);
    transition: transform .4s cubic-bezier(.2,.8,.2,1),
        border-color .4s ease,
        background .4s ease,
        box-shadow .4s ease;
}

.globe-card::before {
    content: "";
    position: absolute;
    left: 22px;
    top: 0;
    width: 40px;
    height: 2px;
    background: var(--orange);
    box-shadow: 0 0 13px rgba(233,89,36,.65);
    transition: width .4s ease;
}

.globe-card::after {
    content: "";
    position: absolute;
    width: 150px;
    height: 150px;
    right: -100px;
    bottom: -100px;
    border-radius: 50%;
    background: rgba(233,89,36,.12);
    filter: blur(40px);
    opacity: 0;
    transition: opacity .4s ease;
}

.globe-card:hover {
    transform: translateY(-7px);
    border-color: rgba(233,89,36,.7);
    background:
        linear-gradient(145deg,
            rgba(233,89,36,.09),
            rgba(255,255,255,.035));
    box-shadow:
        0 15px 40px rgba(0,0,0,.25),
        0 0 30px rgba(233,89,36,.07),
        inset 0 1px 0 rgba(255,255,255,.08);
}

.globe-card:hover::before {
    width: 85px;
}

.globe-card:hover::after {
    opacity: 1;
}

.card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 47px;
    height: 47px;
    margin-bottom: 17px;
    border-radius: 13px;
    color: #ff7439;
    background: rgba(233,89,36,.09);
    border: 1px solid rgba(233,89,36,.32);
    transition: .4s ease;
}

.card-icon svg {
    width: 23px;
    height: 23px;
}

.globe-card:hover .card-icon {
    background: rgba(233,89,36,.18);
    box-shadow: 0 0 22px rgba(233,89,36,.14);
    transform: rotate(-5deg) scale(1.08);
}

.globe-card h3 {
    position: relative;
    z-index: 1;
    margin: -54px 66px 20px;
    color: #000000;
    font-size: 21px;
    line-height: 1.35;
    font-weight: 650;
    letter-spacing: -.55px;
}

.globe-card p {
    position: relative;
    z-index: 1;
    margin: 0;
    color: rgb(69 70 70 / 90%);
    font-size: 14px;
    font-weight: 400;
    line-height: 23px;
}

.card-arrow {
    position: absolute;
    right: 20px;
    bottom: 19px;
    color: var(--orange);
    font-size: 20px;
    opacity: 0;
    transform: translate(-5px, 5px);
    transition: .35s ease;
}

.globe-card:hover .card-arrow {
    opacity: 1;
    transform: translate(0, 0);
}


/* GLOBE */

.globe-visual {
    position: relative;
    width: 100%;
    max-width: 490px;
    aspect-ratio: 1;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.globe-sphere {
    width: 91%;
    aspect-ratio: 1;
    position: relative;
    overflow: hidden;
    border-radius: 50%;
    background:
        radial-gradient(circle at 35% 30%,
            rgba(25,75,115,.75),
            rgba(5,20,39,.97) 65%,
            #020811 100%);
    border: 1px solid rgba(93,166,226,.6);
    box-shadow:
        0 0 35px rgba(40,130,220,.16),
        inset -25px -20px 65px rgba(0,0,0,.7),
        inset 10px 5px 40px rgba(50,125,190,.13);
    animation: globeFloat 6s ease-in-out infinite;
}

.globe-sphere::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: 50%;
    z-index: 3;
    pointer-events: none;
    background: linear-gradient(
        125deg,
        rgba(125,190,255,.32),
        transparent 24%,
        transparent 70%,
        rgba(233,89,36,.12)
    );
}

.globe-grid {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: 50%;
    opacity: .32;
    background-image:
        linear-gradient(rgba(75,146,205,.24) 1px, transparent 1px),
        linear-gradient(90deg, rgba(75,146,205,.24) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(circle, black 45%, transparent 75%);
    -webkit-mask-image: radial-gradient(circle, black 45%, transparent 75%);
}

.globe-grid::before,
.globe-grid::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid rgba(75,146,205,.25);
    border-radius: 50%;
}

.globe-grid::after {
    inset: 0 25%;
}

.globe-map {
    position: absolute;
    width: 100%;
    height: 100%;
    inset: 0;
    z-index: 2;
    filter: drop-shadow(0 0 5px rgba(50,130,190,.1));
}

.globe-glow {
    position: absolute;
    width: 70%;
    height: 70%;
    left: 15%;
    top: 15%;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(233,89,36,.09),
        transparent 70%
    );
    pointer-events: none;
    z-index: 2;
}


/* ORBITS */

.globe-orbit {
    position: absolute;
    width: 115%;
    height: 42%;
    left: -7.5%;
    top: 29%;
    border: 1px solid rgba(233,89,36,.28);
    border-radius: 50%;
    transform: rotate(-33deg);
    pointer-events: none;
}

.orbit-one {
    animation: orbitRotate 16s linear infinite;
}

.orbit-two {
    width: 122%;
    height: 55%;
    left: -11%;
    top: 23%;
    border-color: rgba(80,145,200,.23);
    transform: rotate(45deg);
    animation: orbitRotateReverse 22s linear infinite;
}

.orbit-three {
    width: 110%;
    height: 68%;
    left: -5%;
    top: 16%;
    border-color: rgba(233,89,36,.13);
    transform: rotate(75deg);
    animation: orbitRotate 30s linear infinite;
}


/* COUNTRY LABELS */

.globe-label {
    position: absolute;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 13px;
    border-radius: 30px;
    background: rgba(9,16,27,.9);
    border: 1px solid rgba(120,157,191,.36);
    box-shadow: 0 5px 20px rgba(0,0,0,.3);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    color: #e9edf2;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .4px;
    white-space: nowrap;
}

.globe-label span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--orange);
    box-shadow: 0 0 9px var(--orange);
}

.portugal-label {
    top: 37%;
    left: 9%;
}

.pakistan-label {
    top: 62%;
    right: -7%;
}

.europe-label {
    top: 17%;
    right: 9%;
}

.europe-label span {
    background: #67b9ff;
    box-shadow: 0 0 9px #67b9ff;
}


/* ANIMATIONS */

@keyframes globeFloat {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-9px);
    }
}

@keyframes orbitRotate {
    from {
        transform: rotate(-33deg);
    }
    to {
        transform: rotate(327deg);
    }
}

@keyframes orbitRotateReverse {
    from {
        transform: rotate(45deg);
    }
    to {
        transform: rotate(-315deg);
    }
}

@keyframes badgePulse {
    0%, 100% {
        opacity: 1;
        box-shadow: 0 0 10px var(--orange);
    }
    50% {
        opacity: .5;
        box-shadow: 0 0 3px var(--orange);
    }
}


/* TABLET */

@media (max-width: 1050px) {
    .globe-layout {
        grid-template-columns: 1fr 1fr;
        gap: 25px;
    }

    .globe-visual {
        grid-column: 1 / -1;
        grid-row: 1;
        width: min(80%, 460px);
        margin-bottom: 15px;
    }

    .left-cards {
        grid-column: 1;
        grid-row: 2;
        padding: 0;
    }

    .right-cards {
        grid-column: 2;
        grid-row: 2;
        padding: 0;
    }

    .globe-card {
        min-height: 205px;
    }
}


/* MOBILE */

@media (max-width: 600px) {
    .globe-section {
        padding: 75px 18px;
    }

    .globe-header {
        margin-bottom: 42px;
    }

    .globe-header h2 {
        font-size: 35px;
        letter-spacing: -1.5px;
        line-height: 1.18;
    }

    .globe-header > p {
        font-size: 14px;
        line-height: 24px;
    }

    .globe-buttons {
        flex-direction: column;
        gap: 12px;
    }

    .globe-btn {
        width: 100%;
        max-width: 280px;
    }

    .globe-layout {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .globe-visual {
        order: 0;
        width: 100%;
        max-width: 370px;
        margin: 0 auto 10px;
    }

    .left-cards,
    .right-cards {
        width: 100%;
        padding: 0;
        gap: 16px;
    }

    .left-cards {
        order: 1;
    }

    .right-cards {
        order: 2;
    }

    .globe-card {
        min-height: 0;
        padding: 23px 21px 28px;
        border-radius: 18px;
    }

    .globe-card h3 {
        font-size: 20px;
    }

    .globe-card p {
        font-size: 14px;
        line-height: 23px;
    }

    .globe-label {
        font-size: 9px;
        padding: 7px 10px;
    }

    .portugal-label {
        left: 4%;
    }

    .pakistan-label {
        right: -1%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .globe-section *,
    .globe-section *::before,
    .globe-section *::after {
        animation: none !important;
        transition: none !important;
    }
}

/* about section1 */

/* globe new */



/* EARTH IMAGE */
.earth-image {
    width: 600px;
    height: 100%;
    max-width: 750px;
    object-fit: contain;
    display: block;
    border: none;
    outline: none;
    box-shadow: none;
    animation: earthFloat 6s ease-in-out infinite;
}

/* SMOOTH FLOATING ANIMATION */
@keyframes earthFloat {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

/* TABLET */
@media (max-width: 1024px) {
    .globe-visual {
        height: 500px;
    }

    .earth-image {
        max-width: 600px;
    }
}

/* MOBILE */
@media (max-width: 600px) {
    .globe-visual {
        height: 380px;
    }

    .earth-image {
        max-width: 100%;
    }
}

/* REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
    .earth-image {
        animation: none;
    }
}

/* globe new */

/* platforms */

/* =========================================
   IOS 27 DIGITAL PLATFORMS
========================================= */

.ios-platforms {
    --ios-green: #72e6b0;
    --ios-blue: #75c8ff;

    position: relative;
    width: 100%;
    padding: 4% 24px 5%;
    overflow: hidden;

    background:
        radial-gradient(
            ellipse at 15% 10%,
            rgba(31,112,87,.16),
            transparent 38%
        ),
        radial-gradient(
            ellipse at 90% 85%,
            rgba(36,105,173,.15),
            transparent 40%
        ),
        #080d17;

    font-family: -apple-system, BlinkMacSystemFont,
        "SF Pro Display", "SF Pro Text",
        Inter, "Segoe UI", sans-serif;
}

.ios-platforms,
.ios-platforms * {
    box-sizing: border-box;
}

.ios-platforms::before {
    content: "";
    position: absolute;
    width: 500px;
    height: 500px;
    top: -250px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255,255,255,.035);
    filter: blur(100px);
    border-radius: 50%;
    pointer-events: none;
}

.ios-platforms-container {
    position: relative;
    z-index: 1;
    max-width: 1250px;
    margin: 0 auto;
}

/* =========================================
   HEADER
========================================= */

.ios-platforms-header {
    max-width: 780px;
    margin: 0 auto 65px;
    text-align: center;
}

.ios-platforms-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 22px;
    color: #b9c5d5;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
}

.eyebrow-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #70e6ae;
    box-shadow: 0 0 14px rgba(112,230,174,.8);
}

.eyebrow-line {
    width: 35px;
    height: 1px;
    background: linear-gradient(
        90deg,
        #70e6ae,
        transparent
    );
}

/* UPDATED HEADING */
.ios-platforms-header h2 {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont,
        "SF Pro Display", "SF Pro Text",
        Inter, "Segoe UI", sans-serif;
    font-style: normal;
    font-weight: 700;
    color: rgb(255 255 255);
    font-size: 45px !important;
    line-height: 55px;
    letter-spacing: normal;
}

.ios-platforms-header h2 span {
    display: block;
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    -webkit-text-fill-color: rgb(23, 28, 39);
    color: rgb(23, 28, 39);
}

/* UPDATED PARAGRAPH */
.ios-platforms-header p {
    max-width: 610px;
    margin: 22px auto 0;
    font-family: -apple-system, BlinkMacSystemFont,
        "SF Pro Display", "SF Pro Text",
        Inter, "Segoe UI", sans-serif;
    font-style: normal;
    font-weight: 400;
    color: rgb(255 255 255);
    font-size: 15px;
    line-height: 26px;
}

/* =========================================
   GRID
========================================= */

.ios-platforms-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
    align-items: stretch;
}

/* =========================================
   CARDS
========================================= */

.ios-platform-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 330px;
    padding: 30px;
    overflow: hidden;
    isolation: isolate;

    text-decoration: none !important;
    color: #fff !important;

    border: 1px solid rgba(255,255,255,.11);
    border-radius: 30px;

    background: linear-gradient(
        145deg,
        rgba(255,255,255,.085),
        rgba(255,255,255,.025) 55%,
        rgba(255,255,255,.045)
    );

    -webkit-backdrop-filter: blur(30px);
    backdrop-filter: blur(30px);

    box-shadow:
        0 25px 70px rgba(0,0,0,.28),
        inset 0 1px 0 rgba(255,255,255,.10);

    transition:
        transform .55s cubic-bezier(.2,.8,.2,1),
        border-color .4s ease,
        box-shadow .4s ease;
}

.ios-platform-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: .7;

    background: linear-gradient(
        135deg,
        rgba(255,255,255,.10),
        transparent 28%,
        transparent 72%,
        rgba(255,255,255,.025)
    );
}

.ios-platform-card::after {
    content: "";
    position: absolute;
    top: 0;
    left: 15%;
    width: 70%;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.35),
        transparent
    );
    pointer-events: none;
}

.ios-platform-card:hover {
    transform: translateY(-10px);
    box-shadow:
        0 35px 90px rgba(0,0,0,.4),
        inset 0 1px 0 rgba(255,255,255,.16);
}

.gaia-card:hover {
    border-color: rgba(114,230,176,.5);
}

.sea-card:hover {
    border-color: rgba(117,200,255,.5);
}

/* CARD GLOW */

.platform-card-glow {
    position: absolute;
    z-index: -1;
    width: 300px;
    height: 300px;
    top: -170px;
    right: -120px;
    border-radius: 50%;
    filter: blur(85px);
    opacity: .16;
    transition: opacity .5s ease;
    pointer-events: none;
}

.gaia-card .platform-card-glow {
    background: #48e5a0;
}

.sea-card .platform-card-glow {
    background: #39aaff;
}

.ios-platform-card:hover .platform-card-glow {
    opacity: .36;
}

/* =========================================
   CARD TOP
========================================= */

.platform-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    position: relative;
    z-index: 2;
}

.platform-icon {
    width: 55px;
    height: 55px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.055);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}

.platform-icon svg {
    width: 32px;
    height: 32px;
}

.gaia-icon {
    color: #7aefb8;
}

.sea-icon {
    color: #7acaff;
}

/* BADGES */

.platform-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 100px;
    background: rgba(255,255,255,.045);
    color: #bfc9d8;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .3px;
    white-space: nowrap;
}

.platform-badge span {
    width: 6px;
    height: 6px;
    flex-shrink: 0;
    border-radius: 50%;
    animation: badgePulse 2s infinite;
}

.gaia-badge span {
    background: #72e6b0;
    box-shadow: 0 0 10px #72e6b0;
}

.sea-badge span {
    background: #75c8ff;
    box-shadow: 0 0 10px #75c8ff;
}

@keyframes badgePulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .35; }
}

/* ARROW */

.platform-arrow {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.055);
    color: #dce5f1;
    transition: all .4s ease;
}

.platform-arrow svg {
    width: 19px;
    height: 19px;
}

.ios-platform-card:hover .platform-arrow {
    transform: rotate(45deg);
    background: rgba(255,255,255,.14);
    border-color: rgba(255,255,255,.28);
}

/* =========================================
   CARD CONTENT
========================================= */

.platform-card-content {
    position: relative;
    z-index: 2;
    margin-top: 30px;
}

.platform-index {
    display: block;
    margin-bottom: 12px;
    color: #7f8da1;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
}

.platform-card-content h3 {
    margin: 0 0 13px;
    color: #f7f9fc;
    font-size: 29px !important;
    font-weight: 750;
    line-height: 1.1;
    letter-spacing: -1.8px;
}

.gaia-card .platform-card-content h3 span {
    color: #72e6b0;
}

.sea-card .platform-card-content h3 span {
    color: #75c8ff;
}

.platform-card-content p {
    max-width: 440px;
    margin: 0;
    color: #aab5c5;
    font-size: 14px;
    line-height: 1.8;
    font-weight: 400;
}

/* =========================================
   VISUALS
========================================= */

.platform-visual {
    position: relative;
    height: 190px;
    margin: 12px -10px 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 22px;
    isolation: isolate;
}

/* GAIA */

.gaia-visual {
    background:
        radial-gradient(
            circle at 50% 50%,
            rgba(71,219,153,.12),
            transparent 48%
        ),
        linear-gradient(
            135deg,
            rgba(42,105,80,.12),
            rgba(15,30,34,.1)
        );
}

.gaia-orbit {
    position: absolute;
    width: 155px;
    height: 155px;
    border: 1px solid rgba(114,230,176,.13);
    border-radius: 50%;
}

.orbit-a {
    width: 120px;
    height: 120px;
}

.orbit-b {
    width: 165px;
    height: 165px;
}

.orbit-c {
    width: 210px;
    height: 210px;
    border-style: dashed;
    animation: orbitRotate 30s linear infinite;
}

@keyframes orbitRotate {
    to { transform: rotate(360deg); }
}

.gaia-center {
    position: relative;
    z-index: 2;
    width: 92px;
    height: 92px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #80efbb;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(94,229,163,.20),
        rgba(94,229,163,.025) 70%
    );
    box-shadow: 0 0 45px rgba(94,229,163,.14);
    animation: centerFloat 5s ease-in-out infinite;
}

.gaia-center svg {
    width: 65px;
    height: 65px;
    filter: drop-shadow(0 0 10px rgba(114,230,176,.25));
}

@keyframes centerFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-7px); }
}

/* VISUAL LABELS */

.visual-label {
    position: absolute;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 11px;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 100px;
    background: rgba(12,25,30,.75);
    color: #c6d5d0;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .2px;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    box-shadow: 0 8px 20px rgba(0,0,0,.15);
}

.visual-label-one {
    top: 25px;
    left: 8%;
}

.visual-label-two {
    bottom: 23px;
    right: 7%;
}

.visual-pulse {
    width: 6px;
    height: 6px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #72e6b0;
    box-shadow: 0 0 8px #72e6b0;
}

/* =========================================
   SEAVELA
========================================= */

.sea-visual {
    background:
        radial-gradient(
            circle at 50% 40%,
            rgba(65,173,239,.17),
            transparent 50%
        ),
        linear-gradient(
            145deg,
            rgba(35,89,139,.12),
            rgba(12,27,49,.15)
        );
}

.sea-sun {
    position: absolute;
    top: 23px;
    right: 24%;
    width: 43px;
    height: 43px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(132,208,255,.85),
        rgba(80,168,231,.2)
    );
    filter: blur(1px);
    box-shadow: 0 0 35px rgba(86,180,250,.24);
}

.sea-wave {
    position: absolute;
    width: 180%;
    height: 100px;
    left: -40%;
    bottom: -65px;
    border: 1px solid rgba(117,200,255,.2);
    border-radius: 50%;
    transform: rotate(-7deg);
}

.sea-wave-one {
    bottom: -40px;
    background: rgba(70,157,216,.07);
}

.sea-wave-two {
    bottom: -60px;
    left: -30%;
    border-color: rgba(117,200,255,.14);
    transform: rotate(5deg);
}

.sea-wave-three {
    bottom: -80px;
    left: -50%;
    border-color: rgba(117,200,255,.1);
    transform: rotate(-3deg);
}

.sea-boat {
    position: relative;
    z-index: 2;
    width: 180px;
    color: #83d0ff;
    filter: drop-shadow(0 12px 15px rgba(48,153,220,.23));
    animation: boatFloat 5s ease-in-out infinite;
}

.sea-boat svg {
    width: 100%;
    height: auto;
}

@keyframes boatFloat {
    0%, 100% {
        transform: translateY(0) rotate(-1deg);
    }
    50% {
        transform: translateY(-8px) rotate(1deg);
    }
}

.sea-visual-label {
    position: absolute;
    z-index: 3;
    bottom: 20px;
    right: 7%;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 11px;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 100px;
    background: rgba(10,24,42,.75);
    color: #c7dcec;
    font-size: 9px;
    font-weight: 600;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}

.sea-visual-label .visual-pulse {
    background: #75c8ff;
    box-shadow: 0 0 8px #75c8ff;
}

/* =========================================
   FOOTER
========================================= */

.platform-card-footer {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,.09);
}

.platform-explore {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 700;
    transition: gap .35s ease;
}

.gaia-card .platform-explore {
    color: #80edb9;
}

.sea-card .platform-explore {
    color: #82ccff;
}

.platform-explore svg {
    width: 18px;
    height: 18px;
    transition: transform .35s ease;
}

.ios-platform-card:hover .platform-explore {
    gap: 16px;
}

.ios-platform-card:hover .platform-explore svg {
    transform: translateX(4px);
}

.platform-footer-tag {
    color: #78869a;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

/* =========================================
   TABLET
========================================= */

@media (max-width: 900px) {
    .ios-platforms {
        padding: 85px 22px;
    }

    .ios-platforms-grid {
        gap: 20px;
    }

    .ios-platform-card {
        padding: 24px;
        min-height: 540px;
    }

    .platform-badge {
        font-size: 9px;
        padding: 8px 9px;
    }

    .platform-icon {
        width: 48px;
        height: 48px;
    }

    .platform-icon svg {
        width: 28px;
        height: 28px;
    }
}

/* =========================================
   MOBILE
========================================= */

@media (max-width: 650px) {
    .ios-platforms {
        padding: 70px 18px;
    }

    .ios-platforms-header {
        margin-bottom: 38px;
    }

    .ios-platforms-header h2 {
        font-size: 36px;
        line-height: 43px;
    }

    .ios-platforms-header p {
        font-size: 15px;
        line-height: 26px;
        margin-top: 17px;
    }

    .ios-platforms-grid {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .ios-platform-card {
        min-height: 530px;
        padding: 24px;
        border-radius: 25px;
    }

    .platform-card-content h3 {
        font-size: 38px;
    }

    .platform-card-content p {
        font-size: 13px;
    }

    .platform-visual {
        height: 180px;
    }

    .platform-card-footer {
        padding-top: 17px;
    }
}

/* SMALL MOBILE */

@media (max-width: 380px) {
    .ios-platforms {
        padding: 60px 13px;
    }

    .ios-platform-card {
        padding: 20px;
    }

    .platform-badge {
        font-size: 8px;
        padding: 7px;
    }

    .platform-icon {
        width: 43px;
        height: 43px;
    }

    .platform-arrow {
        width: 32px;
        height: 32px;
    }

    .ios-platforms-header h2 {
        font-size: 32px;
        line-height: 40px;
    }
}

/* ACCESSIBILITY */

@media (prefers-reduced-motion: reduce) {
    .ios-platform-card,
    .platform-arrow,
    .platform-explore,
    .platform-explore svg,
    .gaia-center,
    .gaia-orbit,
    .sea-boat,
    .platform-badge span {
        animation: none !important;
        transition: none !important;
    }
}

/* platforms */

/* running line ornage */

/* =========================================
   SEAVELA JOURNEY — ICON BOX UPGRADE
========================================= */

.delivery-journey .journey-track {
    height: 76px;
    align-items: flex-start;
}

/* Grey line through icon-box centers */
.delivery-journey .journey-track::before {
    top: 19px;
    left: 19px;
    right: 19px;
    height: 1px;
}

/* Animated orange line */
.delivery-journey .journey-progress {
    top: 19px;
    left: 19px;
    width: 0;
    height: 2px;
    border-radius: 10px;
    background: #ff8233;
    box-shadow: 0 0 10px rgba(255,130,51,.22);
    transition: width 1s cubic-bezier(.65,0,.25,1);
}

/* Moving endpoint */
.delivery-journey .journey-progress::after {
    right: -4px;
    width: 8px;
    height: 8px;
}

/* Each stage */
.delivery-journey .journey-point {
    width: 25%;
    gap: 11px;
    align-items: center;
    text-align: center;
    line-height: 1.3;
}

/* Icon box */
.delivery-journey .journey-point-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;

    width: 38px;
    height: 38px;
    margin: 0;

    border: 1px solid rgba(255,255,255,.13);
    border-radius: 12px;

    background: linear-gradient(
        145deg,
        rgba(255,255,255,.08),
        rgba(255,255,255,.025)
    );

    color: #929ba8;

    box-shadow: 0 5px 16px rgba(0,0,0,.12);

    transition:
        background .4s ease,
        color .4s ease,
        border-color .4s ease,
        box-shadow .4s ease,
        transform .4s ease;
}

/* SVG icons */
.delivery-journey .journey-point-inner svg {
    width: 19px;
    height: 19px;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Active stage */
.delivery-journey .journey-point.active {
    color: #ff9a55;
}

.delivery-journey .journey-point.active .journey-point-inner {
    color: #ff974f;

    border-color: rgba(255,130,51,.85);

    background: linear-gradient(
        145deg,
        rgba(255,130,51,.24),
        rgba(255,130,51,.09)
    );

    box-shadow:
        0 0 0 4px rgba(255,130,51,.07),
        0 0 20px rgba(255,130,51,.16),
        inset 0 1px 0 rgba(255,255,255,.08);

    transform: translateY(-2px);
}

/* Mobile */
@media (max-width: 767px) {
    .delivery-journey {
        padding: 25px 15px 30px;
    }

    .delivery-journey .journey-track {
        height: 68px;
    }

    .delivery-journey .journey-track::before {
        left: 17px;
        right: 17px;
        top: 17px;
    }

    .delivery-journey .journey-progress {
        left: 17px;
        top: 17px;
    }

    .delivery-journey .journey-point {
        width: 25%;
        gap: 9px;
        font-size: 9px;
    }

    .delivery-journey .journey-point-inner {
        width: 34px;
        height: 34px;
        border-radius: 10px;
    }

    .delivery-journey .journey-point-inner svg {
        width: 17px;
        height: 17px;
    }
}
/* ==========================================
   4-POINT JOURNEY — HIDE LINE BEHIND ICONS
========================================== */

.delivery-journey .journey-point {
    position: relative;
    z-index: 5;
}

.delivery-journey .journey-point-inner {
    position: relative;
    z-index: 6;

    /* Hide line behind icon box */
    background: #17191c;
}

/* Active icon box */
.delivery-journey
.journey-point.active
.journey-point-inner {
    background: linear-gradient(
        145deg,
        #3a281e,
        #211a16
    );

    border-color: #ff8233;

    box-shadow:
        0 0 0 4px rgba(255,130,51,.08),
        0 0 18px rgba(255,130,51,.22);
}

/* ---------6 points -------------- */
/* ==========================================
   MAIN CONTAINER
========================================== */

.seavela-six-journey {
    width: 100%;
    max-width: 1475px;
    margin: 0 auto;
    padding: 32px 35px 36px;

    background: linear-gradient(
        135deg,
        rgba(20,20,22,.96),
        rgba(14,18,21,.94)
    );

    border: 1px solid rgba(255,255,255,.12);
    border-radius: 30px;
    box-sizing: border-box;

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "SF Pro Display",
        "SF Pro Text",
        Inter,
        "Segoe UI",
        sans-serif;
}

/* LABEL */

.seavela-six-label {
    display: block;
    margin-bottom: 36px;

    color: #9298a2;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .14em;
    line-height: 1;
}

/* ==========================================
   TRACK
========================================== */

.seavela-six-track {
    position: relative;
    width: 100%;
    height: 78px;

    display: flex;
    align-items: flex-start;
}

/* GREY LINE */

.seavela-six-track::before {
    content: "";
    position: absolute;

    left: 19px;
    right: 19px;
    top: 19px;

    height: 1px;
    background: rgba(139,147,158,.24);

    z-index: 1;
}

/* ==========================================
   ANIMATED ORANGE LINE
========================================== */

.seavela-six-progress {
    position: absolute;

    left: 19px;
    top: 19px;

    width: 0;
    height: 2px;

    background: #ff8233;
    border-radius: 10px;

    box-shadow: 0 0 10px rgba(255,130,51,.25);

    z-index: 2;

    transition: width 1s cubic-bezier(.65,0,.25,1);
}

/* ORANGE MOVING ENDPOINT */

.seavela-six-progress::after {
    content: "";

    position: absolute;
    right: -4px;
    top: 50%;

    width: 8px;
    height: 8px;

    transform: translateY(-50%);
    border-radius: 50%;

    background: #ff8233;

    box-shadow:
        0 0 0 5px rgba(255,130,51,.10),
        0 0 16px rgba(255,130,51,.45);
}

/* ==========================================
   SIX STAGES
========================================== */

.seavela-six-point {
    position: relative;
    z-index: 5;

    flex: 1 1 0;
    width: auto;
    min-width: 0;

    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 11px;

    color: #858c98;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
    text-align: center;

    transition: color .35s ease;
}

/* ==========================================
   ICON BOXES
========================================== */

.seavela-six-dot {
    width: 38px;
    height: 38px;
    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    margin: 0;
    box-sizing: border-box;

    border: 1px solid rgba(255,255,255,.13);
    border-radius: 12px;

    background: linear-gradient(
        145deg,
        rgba(255,255,255,.08),
        rgba(255,255,255,.025)
    );

    color: #929ba8;

    box-shadow: 0 5px 16px rgba(0,0,0,.12);

    transition:
        background .4s ease,
        color .4s ease,
        border-color .4s ease,
        box-shadow .4s ease,
        transform .4s ease;
}

/* ICONS */

.seavela-six-dot svg {
    display: block;
    width: 19px;
    height: 19px;

    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ==========================================
   ACTIVE STAGE
========================================== */

.seavela-six-point.is-active {
    color: #ff9a55;
}

.seavela-six-point.is-active .seavela-six-dot {
    color: #ff974f;

    border-color: rgba(255,130,51,.85);

    background: linear-gradient(
        145deg,
        rgba(255,130,51,.24),
        rgba(255,130,51,.09)
    );

    box-shadow:
        0 0 0 4px rgba(255,130,51,.07),
        0 0 20px rgba(255,130,51,.16),
        inset 0 1px 0 rgba(255,255,255,.08);

    transform: translateY(-2px);
}

/* ==========================================
   MOBILE RESPONSIVE
========================================== */

@media (max-width: 767px) {

    .seavela-six-journey {
        padding: 25px 12px 30px;
        border-radius: 22px;
    }

    .seavela-six-label {
        margin-bottom: 30px;
        font-size: 10px;
    }

    .seavela-six-track {
        height: 68px;
    }

    .seavela-six-track::before {
        left: 16px;
        right: 16px;
        top: 16px;
    }

    .seavela-six-progress {
        left: 16px;
        top: 16px;
    }

    .seavela-six-progress::after {
        width: 7px;
        height: 7px;
    }

    .seavela-six-point {
        gap: 9px;
        font-size: 9px;
        overflow-wrap: anywhere;
    }

    .seavela-six-dot {
        width: 32px;
        height: 32px;
        border-radius: 9px;
    }

    .seavela-six-dot svg {
        width: 16px;
        height: 16px;
    }
}
/* Hide orange line behind icon boxes */
.seavela-six-journey .seavela-six-point {
    z-index: 5;
    position: relative;
}

.seavela-six-journey .seavela-six-dot {
    position: relative;
    z-index: 6;

    /* Opaque background hides line underneath */
    background: #17191c;
}

/* Active icon retains orange glass effect */
.seavela-six-journey
.seavela-six-point.is-active
.seavela-six-dot {
    background: linear-gradient(
        145deg,
        #3a281e,
        #211a16
    );

    border-color: #ff8233;

    box-shadow:
        0 0 0 4px rgba(255,130,51,.08),
        0 0 18px rgba(255,130,51,.22);
}

/* running line ornage */

/* icons */
.ev-search-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: rgba(255, 145, 0, 0.10);
  border: 1px solid rgba(255, 145, 0, 0.22);
  color: #ff8a00;
  transition: all 0.3s ease;
}

.ev-search-icon svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  fill: none;
  transition: transform 0.3s ease;
}

.ev-search-icon:hover {
  background: rgba(255, 145, 0, 0.16);
  box-shadow: 0 8px 24px rgba(255, 138, 0, 0.18);
}

.ev-search-icon:hover svg {
  transform: scale(1.08);
}

/* ----------------------- */


.ev-doc-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: rgba(255, 145, 0, 0.10);
  border: 1px solid rgba(255, 145, 0, 0.22);
  color: #ff8a00;
  transition: all 0.3s ease;
}

.ev-doc-icon svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  fill: none;
  transition: transform 0.3s ease;
}

.ev-doc-icon:hover {
  background: rgba(255, 145, 0, 0.16);
  box-shadow: 0 8px 24px rgba(255, 138, 0, 0.18);
}

.ev-doc-icon:hover svg {
  transform: scale(1.08);
}

/* ----------------------- */


.ev-verification-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: rgba(255, 145, 0, 0.10);
  border: 1px solid rgba(255, 145, 0, 0.22);
  color: #ff8a00;
  transition: all 0.3s ease;
}

.ev-verification-icon svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  fill: none;
  transition: transform 0.3s ease;
}

.ev-verification-icon:hover {
  background: rgba(255, 145, 0, 0.16);
  box-shadow: 0 8px 24px rgba(255, 138, 0, 0.18);
}

.ev-verification-icon:hover svg {
  transform: scale(1.08);
}

/* ----------------------- */


.ev-calculation-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: rgba(255, 145, 0, 0.10);
  border: 1px solid rgba(255, 145, 0, 0.22);
  color: #ff8a00;
  transition: all 0.3s ease;
}

.ev-calculation-icon svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  fill: none;
  transition: transform 0.3s ease;
}

.ev-calculation-icon:hover {
  background: rgba(255, 145, 0, 0.16);
  box-shadow: 0 8px 24px rgba(255, 138, 0, 0.18);
}

.ev-calculation-icon:hover svg {
  transform: scale(1.08);
}

/* ----------------------- */


.ev-credit-lifecycle-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: rgba(255, 145, 0, 0.10);
  border: 1px solid rgba(255, 145, 0, 0.22);
  color: #ff8a00;
  transition: all 0.3s ease;
}

.ev-credit-lifecycle-icon svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  fill: none;
  transition: transform 0.3s ease;
}

.ev-credit-lifecycle-icon:hover {
  background: rgba(255, 145, 0, 0.16);
  box-shadow: 0 8px 24px rgba(255, 138, 0, 0.18);
}

.ev-credit-lifecycle-icon:hover svg {
  transform: scale(1.08);
}

/* ----------------------- */


.ev-boat-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: rgba(255, 145, 0, 0.10);
  border: 1px solid rgba(255, 145, 0, 0.22);
  color: #ff8a00;
  transition: all 0.3s ease;
}

.ev-boat-icon svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  fill: none;
  transition: transform 0.3s ease;
}

.ev-boat-icon:hover {
  background: rgba(255, 145, 0, 0.16);
  box-shadow: 0 8px 24px rgba(255, 138, 0, 0.18);
}

.ev-boat-icon:hover svg {
  transform: scale(1.08);
}

/* ----------------------- */


.ev-yacht-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: rgba(255, 145, 0, 0.10);
  border: 1px solid rgba(255, 145, 0, 0.22);
  color: #ff8a00;
  transition: all 0.3s ease;
}

.ev-yacht-icon svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  fill: none;
  transition: transform 0.3s ease;
}

.ev-yacht-icon:hover {
  background: rgba(255, 145, 0, 0.16);
  box-shadow: 0 8px 24px rgba(255, 138, 0, 0.18);
}

.ev-yacht-icon:hover svg {
  transform: scale(1.08);
}

/* ----------------------- */


.ev-captain-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: rgba(255, 145, 0, 0.10);
  border: 1px solid rgba(255, 145, 0, 0.22);
  color: #ff8a00;
  transition: all 0.3s ease;
}

.ev-captain-icon svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  fill: none;
  transition: transform 0.3s ease;
}

.ev-captain-icon:hover {
  background: rgba(255, 145, 0, 0.16);
  box-shadow: 0 8px 24px rgba(255, 138, 0, 0.18);
}

.ev-captain-icon:hover svg {
  transform: scale(1.08);
}

/* ----------------------- */


.ev-yacht-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: rgba(255, 145, 0, 0.10);
  border: 1px solid rgba(255, 145, 0, 0.22);
  color: #ff8a00;
  transition: all 0.3s ease;
}

.ev-yacht-icon svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  fill: none;
  transition: transform 0.3s ease;
}

.ev-yacht-icon:hover {
  background: rgba(255, 145, 0, 0.16);
  box-shadow: 0 8px 24px rgba(255, 138, 0, 0.18);
}

.ev-yacht-icon:hover svg {
  transform: scale(1.08);
}
/* icons */

/* team section */


/* ==========================================
   GLOTEFEWO TEAM — RESPONSIVE 3-CARD GRID
   Premium iOS Glassmorphism Style
========================================== */

.glotefewo-team {
  width: 100%;
  position: relative;
  padding: 90px 0;
  overflow: hidden;
  box-sizing: border-box;
}

.glotefewo-team *,
.glotefewo-team *::before,
.glotefewo-team *::after {
  box-sizing: border-box;
}

/* Main Container */
.glotefewo-team .container {
  width: 100%;
  max-width: 1320px;
  margin-inline: auto;
  padding-inline: 24px;
}

/* Heading */
.glotefewo-team .glotefewo-team-heading,
.glotefewo-team h2 {
  font-family: -apple-system, BlinkMacSystemFont,
    "SF Pro Display", "SF Pro Text", Inter,
    "Segoe UI", sans-serif;
  font-style: normal;
  font-weight: 680;
  color: rgb(19, 25, 35);
  font-size: 48px;
  line-height: 55px;
  letter-spacing: -1.5px;
}

/* Paragraph */
.glotefewo-team p {
  font-family: -apple-system, BlinkMacSystemFont,
    "SF Pro Display", "SF Pro Text", Inter,
    "Segoe UI", sans-serif;
  font-style: normal;
  font-weight: 400;
  color: rgb(114, 123, 138);
  font-size: 15px;
  line-height: 26px;
}

/* THREE-COLUMN GRID */
.glotefewo-team .glotefewo-team-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;

  width: 100%;
  margin: 42px 0 0 !important;
  padding: 0 !important;

  --bs-gutter-x: 0;
  --bs-gutter-y: 0;
}

/* Override Bootstrap Columns */
.glotefewo-team .glotefewo-team-grid > div,
.glotefewo-team .glotefewo-team-grid > [class*="col-"] {
  width: 100% !important;
  max-width: none !important;
  min-width: 0;
  flex: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Team Card */
.glotefewo-team .glotefewo-team-card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-width: 0;

  padding: 14px;
  overflow: hidden;
  border-radius: 28px;

  background: rgba(255, 255, 255, 0.76);
  border: 1px solid rgba(255, 255, 255, 0.9);

  box-shadow:
    0 12px 35px rgba(26, 43, 73, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);

  backdrop-filter: blur(24px) saturate(165%);
  -webkit-backdrop-filter: blur(24px) saturate(165%);

  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease,
    border-color 0.35s ease;
}

/* Hover Effect */
.glotefewo-team .glotefewo-team-card:hover {
  transform: translateY(-7px);
  border-color: rgba(100, 130, 220, 0.35);

  box-shadow:
    0 22px 48px rgba(35, 55, 95, 0.13),
    0 0 0 1px rgba(110, 140, 225, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

/* Director Image */
.glotefewo-team .glotefewo-team-card img {
  display: block;
  width: 100%;
  height: 340px;
  object-fit: cover;
  object-position: center top;

  border-radius: 20px;
  background: #f1f3f7;

  transition: transform 0.45s ease;
}

.glotefewo-team .glotefewo-team-card:hover img {
  transform: scale(1.015);
}

/* Card Content */
.glotefewo-team .glotefewo-team-card-content {
  padding: 22px 10px 12px;
}

/* Director Name */
.glotefewo-team .glotefewo-team-card h3 {
  margin: 0 0 8px;

  font-family: -apple-system, BlinkMacSystemFont,
    "SF Pro Display", "SF Pro Text", Inter,
    "Segoe UI", sans-serif;
  font-size: 23px;
  line-height: 1.3;
  font-weight: 650;
  letter-spacing: -0.5px;
  color: #171d29;
}

/* Position */
.glotefewo-team .glotefewo-team-card .glotefewo-team-role {
  display: inline-flex;
  align-items: center;
  gap: 7px;

  margin: 0;
  color: #738096;
  font-size: 13px;
  line-height: 1.5;
  font-weight: 500;
  letter-spacing: 0.3px;
}

/* Small Role Indicator */
.glotefewo-team .glotefewo-team-card .glotefewo-team-role::before {
  content: "";
  display: inline-block;
  flex: 0 0 7px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #38a879;
  box-shadow: 0 0 10px rgba(56, 168, 121, 0.25);
}

/* Tablet: Two Cards */
@media (max-width: 991.98px) {
  .glotefewo-team {
    padding: 70px 0;
  }

  .glotefewo-team .glotefewo-team-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
  }

  .glotefewo-team .glotefewo-team-card img {
    height: 320px;
  }

  .glotefewo-team .glotefewo-team-heading,
  .glotefewo-team h2 {
    font-size: 40px;
    line-height: 1.15;
  }
}

/* Mobile: One Card */
@media (max-width: 575.98px) {
  .glotefewo-team {
    padding: 55px 0;
  }

  .glotefewo-team .container {
    padding-inline: 18px;
  }

  .glotefewo-team .glotefewo-team-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    margin-top: 30px !important;
  }

  .glotefewo-team .glotefewo-team-card {
    padding: 11px;
    border-radius: 23px;
  }

  .glotefewo-team .glotefewo-team-card img {
    height: 360px;
    border-radius: 16px;
  }

  .glotefewo-team .glotefewo-team-card-content {
    padding: 18px 8px 10px;
  }

  .glotefewo-team .glotefewo-team-card h3 {
    font-size: 21px;
  }

  .glotefewo-team .glotefewo-team-heading,
  .glotefewo-team h2 {
    font-size: 34px;
    line-height: 1.2;
    letter-spacing: -0.8px;
  }
}

/* Small Mobile */
@media (max-width: 380px) {
  .glotefewo-team .glotefewo-team-card img {
    height: 300px;
  }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  .glotefewo-team .glotefewo-team-card,
  .glotefewo-team .glotefewo-team-card img {
    transition: none;
  }

  .glotefewo-team .glotefewo-team-card:hover,
  .glotefewo-team .glotefewo-team-card:hover img {
    transform: none;
  }
}

/* team section */

/* blog section 1 */

/* =========================================================
   01. SECTION FOUNDATION
========================================================= */

.gf27-editorial,
.gf27-editorial * {
  box-sizing: border-box;
}

.gf27-editorial {
  --gf27-accent: #7be0b1;
  --gf27-border: rgba(255, 255, 255, 0.105);
  --gf27-muted: rgba(235, 238, 244, 0.76);
  --gf27-panel: rgba(255, 255, 255, 0.045);

  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 70px 68px 85px;
  color: #ffffff;
  background:
    radial-gradient(ellipse at 12% 5%, rgba(61, 133, 116, 0.15), transparent 39%), radial-gradient(ellipse at 95% 70%, rgba(67, 103, 159, 0.13), transparent 36%), #ffffff;

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Display",
    "SF Pro Text",
    Inter,
    "Segoe UI",
    sans-serif;
}

.gf27-container {
  width: 100%;
  max-width: 1540px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.95fr) minmax(320px, 0.95fr);
  gap: 48px;
  align-items: start;
}

/* =========================================================
   02. FEATURED IMAGE
========================================================= */

.gf27-hero-media {
  display: block;
  position: relative;
  height: clamp(320px, 37vw, 550px);
  overflow: hidden;
  border-radius: 25px;
  background: #222d38;
  border: 1px solid rgba(255, 255, 255, 0.12);
  text-decoration: none;
  isolation: isolate;
  box-shadow:
    0 25px 65px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.gf27-hero-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition:
    transform 1s cubic-bezier(.2, .75, .25, 1),
    filter 0.7s ease;
}

.gf27-image-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(8, 15, 22, 0.16) 0%,
    transparent 36%,
    rgba(8, 15, 22, 0.22) 100%
  );
  pointer-events: none;
}

.gf27-hero-media:hover .gf27-hero-image {
  transform: scale(1.045);
  filter: saturate(1.08);
}

.gf27-image-label {
  position: absolute;
  top: 22px;
  left: 22px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 15px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50px;
  color: #fff;
  background: rgba(17, 25, 32, 0.47);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2px;
}

.gf27-live-dot {
  width: 7px;
  height: 7px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--gf27-accent);
  box-shadow: 0 0 12px rgba(123, 224, 177, 0.7);
}

.gf27-image-arrow {
  position: absolute;
  right: 22px;
  bottom: 22px;
  width: 49px;
  height: 49px;
  display: grid;
  place-items: center;
  border-radius: 17px;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.26);
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transition:
    background 0.3s ease,
    transform 0.3s ease;
}

.gf27-image-arrow svg,
.gf27-read-more svg {
  width: 21px;
  height: 21px;
}

.gf27-hero-media:hover .gf27-image-arrow {
  transform: translate(2px, -2px);
  background: rgba(123, 224, 177, 0.23);
}

/* =========================================================
   03. ARTICLE TYPOGRAPHY
========================================================= */

.gf27-article-content {
  padding-top: 29px;
}

.gf27-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 11px;
  margin-bottom: 15px;
  color: rgba(235, 238, 244, 0.57);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.15px;
}

.gf27-category {
  color: var(--gf27-accent);
}

.gf27-meta-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(235, 238, 244, 0.42);
}

.gf27-heading {
  margin: 0 0 21px;
  max-width: 1000px;
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Display",
    "SF Pro Text",
    Inter,
    "Segoe UI",
    sans-serif;
  font-style: normal;
  font-size: 30px !important;
  line-height: 55px;
  font-weight: 680;
  letter-spacing: -1.65px;
  color: rgb(0 0 0);
  text-wrap: balance;
}

.gf27-intro {
  margin: 0 0 17px;
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Display",
    "SF Pro Text",
    Inter,
    "Segoe UI",
    sans-serif;
  font-size: 15px;
  line-height: 26px;
  font-weight: 400;
  color: rgb(0 0 0 / 78%);
}

.gf27-paragraph {
  margin: 0 0 14px;
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Display",
    "SF Pro Text",
    Inter,
    "Segoe UI",
    sans-serif;
  font-size: 15px;
  line-height: 26px;
  font-weight: 400;
  color: rgb(0 0 0 / 78%);
}

/* =========================================================
   04. ARTICLE FOOTER
========================================================= */

.gf27-article-footer {
  margin-top: 28px;
  padding-top: 21px;
  border-top: 1px solid var(--gf27-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.gf27-author {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.gf27-author-avatar {
  width: 43px;
  height: 43px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  border: 1px solid rgba(123, 224, 177, 0.35);
  border-radius: 15px;
  background: linear-gradient(
    145deg,
    rgba(123, 224, 177, 0.24),
    rgba(123, 224, 177, 0.06)
  );
  color: var(--gf27-accent);
  font-size: 20px;
  font-weight: 700;
}

.gf27-author strong,
.gf27-author span {
  display: block;
}

.gf27-author strong {
  margin-bottom: 5px;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
}

.gf27-author span {
  color: rgba(235, 238, 244, 0.54);
  font-size: 12px;
}

.gf27-read-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-shrink: 0;
  padding: 12px 16px;
  border: 1px solid rgba(123, 224, 177, 0.29);
  border-radius: 14px;
  color: var(--gf27-accent);
  background: rgba(123, 224, 177, 0.07);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  transition:
    background 0.25s ease,
    transform 0.25s ease,
    border-color 0.25s ease;
}

.gf27-read-more:hover {
  color: #fff;
  background: rgba(123, 224, 177, 0.17);
  border-color: rgba(123, 224, 177, 0.55);
  transform: translateY(-2px);
}

.gf27-read-more svg {
  width: 17px;
  height: 17px;
  transition: transform 0.25s ease;
}

.gf27-read-more:hover svg {
  transform: translateX(3px);
}

/* =========================================================
   05. GLASS SIDEBAR
========================================================= */

.gf27-sidebar {
  position: relative;
  margin-top: 18px;
  padding: 1px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 26px;
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.085),
    rgba(255, 255, 255, 0.018)
  );
  box-shadow:
    0 25px 65px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.gf27-sidebar-inner {
  padding: 27px 24px 20px;
  border-radius: inherit;
  background: rgba(17, 23, 31, 0.73);
  backdrop-filter: blur(26px) saturate(150%);
  -webkit-backdrop-filter: blur(26px) saturate(150%);
}

.gf27-sidebar-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 23px;
}

.gf27-sidebar-eyebrow {
  display: block;
  margin-bottom: 9px;
  color: #e95924;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.8px;
}

.gf27-sidebar-heading h3 {
  margin: 0;
  color: #fff;
  font-size: 23px;
  line-height: 30px;
  font-weight: 650;
  letter-spacing: -0.7px;
}

.gf27-heading-mark {
  width: 42px;
  height: 4px;
  margin-bottom: 7px;
  flex-shrink: 0;
  border-radius: 10px;
  background: #e95924;
  box-shadow: 0 0 15px rgba(123, 224, 177, 0.23);
}

.gf27-sidebar-divider {
  width: 100%;
  height: 1px;
  margin-bottom: 9px;
  background: linear-gradient(
    90deg,
    rgba(123, 224, 177, 0.5),
    rgba(255, 255, 255, 0.12),
    transparent
  );
}

/* =========================================================
   06. TOPIC ROWS
========================================================= */

.gf27-topic {
  position: relative;
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 15px;
  padding: 17px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.085);
  text-decoration: none;
  transition: padding 0.3s ease;
}

.gf27-topic:last-child {
  border-bottom: 0;
}

.gf27-topic-image {
  width: 82px;
  height: 78px;
  overflow: hidden;
  border-radius: 13px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: #26313a;
}

.gf27-topic-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition:
    transform 0.45s cubic-bezier(.2, .75, .25, 1),
    filter 0.35s ease;
}

.gf27-topic-info {
  min-width: 0;
}

.gf27-topic-info h4 {
  margin: 0 0 9px;
  color: rgba(255, 255, 255, 0.91);
  font-size: 14px;
  line-height: 21px;
  font-weight: 520;
  letter-spacing: -0.15px;
  transition: color 0.25s ease;
}

.gf27-topic-date {
  display: block;
  color: rgba(235, 238, 244, 0.48);
  font-size: 10px;
  line-height: 16px;
  font-weight: 450;
}

.gf27-topic-arrow {
  display: grid;
  place-items: center;
  color: rgba(235, 238, 244, 0.34);
  font-size: 16px;
  opacity: 0;
  transform: translate(-4px, 4px);
  transition:
    opacity 0.25s ease,
    transform 0.25s ease,
    color 0.25s ease;
}

.gf27-topic:hover {
  padding-left: 5px;
  padding-right: 2px;
}

.gf27-topic:hover .gf27-topic-image img {
  transform: scale(1.09);
  filter: saturate(1.15);
}

.gf27-topic:hover .gf27-topic-info h4 {
  color: var(--gf27-accent);
}

.gf27-topic:hover .gf27-topic-arrow {
  opacity: 1;
  transform: translate(0, 0);
  color: var(--gf27-accent);
}

.gf27-all-topics {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
  padding: 14px 15px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 14px;
  color: rgba(255, 255, 255, 0.86);
  background: rgba(255, 255, 255, 0.035);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  transition:
    background 0.25s ease,
    border-color 0.25s ease,
    color 0.25s ease;
}

.gf27-all-topics span {
  color: #ffffff;
  font-size: 17px;
  transition: transform 0.25s ease;
}

.gf27-all-topics:hover {
  color: #fff;
  background: rgba(123, 224, 177, 0.08);
  border-color: rgba(123, 224, 177, 0.28);
}

.gf27-all-topics:hover span {
  transform: translate(2px, -2px);
}

/* =========================================================
   07. RESPONSIVE TABLET
========================================================= */

@media (max-width: 1100px) {
  .gf27-editorial {
    padding: 55px 24px 65px;
  }

  .gf27-container {
    grid-template-columns: minmax(0, 1.5fr) minmax(290px, 0.9fr);
    gap: 28px;
  }

  .gf27-heading {
    font-size: 40px;
    line-height: 47px;
    letter-spacing: -1.2px;
  }

  .gf27-sidebar-inner {
    padding: 23px 18px 17px;
  }

  .gf27-topic {
    grid-template-columns: 68px minmax(0, 1fr) 12px;
    gap: 11px;
  }

  .gf27-topic-image {
    width: 68px;
    height: 68px;
  }

  .gf27-topic-info h4 {
    font-size: 13px;
    line-height: 19px;
  }

  .gf27-topic-date {
    font-size: 9px;
  }
}

/* =========================================================
   08. RESPONSIVE MOBILE
========================================================= */

@media (max-width: 760px) {
  .gf27-editorial {
    padding: 35px 17px 45px;
  }

  .gf27-container {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
  }

  .gf27-hero-media {
    height: clamp(245px, 61vw, 410px);
    border-radius: 20px;
  }

  .gf27-image-label {
    top: 14px;
    left: 14px;
    padding: 9px 12px;
    font-size: 11px;
  }

  .gf27-image-arrow {
    right: 14px;
    bottom: 14px;
    width: 43px;
    height: 43px;
    border-radius: 14px;
  }

  .gf27-article-content {
    padding-top: 23px;
  }

  .gf27-heading {
    font-size: 36px;
    line-height: 43px;
    letter-spacing: -1.15px;
    margin-bottom: 17px;
  }

  .gf27-intro,
  .gf27-paragraph {
    font-size: 15px;
    line-height: 26px;
  }

  .gf27-sidebar {
    margin-top: 0;
  }

  .gf27-sidebar-inner {
    padding: 23px 19px 18px;
  }

  .gf27-sidebar-heading h3 {
    font-size: 22px;
  }

  .gf27-topic {
    grid-template-columns: 76px minmax(0, 1fr) 15px;
    gap: 13px;
    padding: 15px 0;
  }

  .gf27-topic-image {
    width: 76px;
    height: 73px;
  }

  .gf27-topic-info h4 {
    font-size: 14px;
    line-height: 20px;
  }

  .gf27-topic-date {
    font-size: 10px;
  }

  .gf27-topic-arrow {
    opacity: 0.7;
    transform: none;
  }
}

@media (max-width: 420px) {
  .gf27-heading {
    font-size: 31px;
    line-height: 38px;
    letter-spacing: -0.85px;
  }

  .gf27-article-footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .gf27-read-more {
    width: 100%;
  }

  .gf27-topic {
    grid-template-columns: 66px minmax(0, 1fr) 12px;
    gap: 10px;
  }

  .gf27-topic-image {
    width: 66px;
    height: 66px;
    border-radius: 11px;
  }

  .gf27-topic-info h4 {
    font-size: 12px;
    line-height: 18px;
  }
}

/* =========================================================
   09. ACCESSIBILITY & MOTION
========================================================= */

.gf27-editorial a:focus-visible {
  outline: 2px solid var(--gf27-accent);
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .gf27-editorial *,
  .gf27-editorial *::before,
  .gf27-editorial *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* blog section 1 */


/* =========================================================
   MOBILE HEADING SAFETY PATCH
   Mobile-only overrides: desktop/tablet styling is untouched.
   Keeps headings readable, wrapped, and inside their sections.
========================================================= */

@media (max-width: 767px) {
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  [class*="title"],
  [class*="heading"],
  [class*="headline"] {
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: normal;
    hyphens: auto;
    text-wrap: balance;
  }

  h1 {
    font-size: clamp(30px, 8.5vw, 46px) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.035em;
  }

  h2 {
    font-size: clamp(27px, 7.5vw, 40px) !important;
    line-height: 1.12 !important;
    letter-spacing: -0.03em;
  }

  h3 {
    font-size: clamp(21px, 6vw, 30px) !important;
    line-height: 1.18 !important;
    letter-spacing: -0.02em;
  }

  h4 {
    font-size: clamp(18px, 5vw, 24px) !important;
    line-height: 1.25 !important;
  }

  h5 {
    font-size: clamp(16px, 4.5vw, 20px) !important;
    line-height: 1.3 !important;
  }

  h6 {
    font-size: clamp(14px, 4vw, 17px) !important;
    line-height: 1.35 !important;
  }

  /* Custom section headings used across the existing stylesheet */
  [class*="title"],
  [class*="heading"],
  [class*="headline"] {
    letter-spacing: clamp(-1.4px, -0.25vw, -0.4px);
  }

  /* Prevent grid/flex children and heading wrappers from forcing overflow */
  section,
  section > *,
  section [class*="container"],
  section [class*="content"],
  section [class*="header"] {
    min-width: 0;
  }

  /* Keep inline heading spans from breaking the layout */
  h1 span,
  h2 span,
  h3 span,
  h4 span,
  [class*="title"] span,
  [class*="heading"] span,
  [class*="headline"] span {
    max-width: 100%;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 480px) {
  h1 {
    font-size: clamp(28px, 8.2vw, 38px) !important;
  }

  h2 {
    font-size: clamp(25px, 7.2vw, 34px) !important;
  }

  h3 {
    font-size: clamp(20px, 5.8vw, 26px) !important;
  }

  [class*="title"],
  [class*="heading"],
  [class*="headline"] {
    max-width: 100%;
    overflow-wrap: anywhere;
  }
}
/* blog section 1 */

/* contact points */

.gf-contact-partners-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: column;
    grid-template-rows: repeat(4, auto);
    gap: 20px 20px;
    width: 100%;
    font-size: 13px;
    color: #8a939e;
    padding: 24px 0 0 0;
}

.gf-contact-partner-item {
    display: flex;
    align-items: center;
    min-width: 0;
}

/* Mobile responsive */
@media (max-width: 576px) {
    .gf-contact-partners-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: repeat(4, auto);
        grid-auto-flow: column;
        gap: 12px 10px;
    }
}

/* contact points */

/* language   */

/* LANGUAGE DROPDOWN */
.language-wrapper {
  position: relative;
}

.language-button {
  cursor: pointer;
}

.language-dropdown.is-open {
  display: block;
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  z-index: 99999;
}

.language-dropdown a[aria-current="true"] {
  font-weight: 700;
}

/* MOBILE LANGUAGE DROPDOWN SAFETY */
@media (max-width: 768px) {
  .language-dropdown {
    z-index: 99999;
  }
}


/* GLOTEFEWO LANGUAGE DROPDOWN FIX */

.language-wrapper {
  position: relative;
}

.language-wrapper .language-dropdown {
  z-index: 99999;
}

/* Existing JavaScript toggles .open on the wrapper */
.language-wrapper.open .language-dropdown {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Selected language */
.language-dropdown a[aria-current="true"] {
  font-weight: 700;
}


/* language   */
</style>