/* ==========================================
   BUBNA FINANCIAL SERVICES
   PREMIUM 3D HERO BANNER
   NAVY • SAFFRON • AMBER
========================================== */

:root {
    --bf-navy: #0B2E59;
    --bf-navy-dark: #071D38;
    --bf-navy-deep: #04152B;
    --bf-navy-light: #174779;
    --bf-orange: #F28C28;
    --bf-amber: #F5A623;
    --bf-orange-light: #FFD08A;
    --bf-orange-dark: #C96912;
    --bf-green: #1F7A4D;
    --bf-green-light: #55A878;
    --bf-white: #FFFFFF;
    --bf-cream: #FFFDF9;
    --bf-light: #EEF2F7;
    --bf-light-orange: #FFF1DF;
    --bf-text: #142B45;
    --bf-muted: #64748B;
    --bf-border: rgba(11, 46, 89, 0.12);
    --bf-font: 'DM Sans', sans-serif;
    --bf-heading: 'Playfair Display', serif;
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--bf-font);
    overflow-x: hidden;
}

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

button,
a {
    -webkit-tap-highlight-color: transparent;
}


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

.bf-hero {
    position: relative;
    isolation: isolate;
    width: 100%;
    min-height: 490px;
    overflow: hidden;
    display: flex;
    align-items: center;
    background: radial-gradient( ellipse at 78% 35%, rgba(245, 166, 35, 0.17), transparent 34% ), radial-gradient( ellipse at 10% 5%, rgba(242, 140, 40, 0.10), transparent 36% ), linear-gradient( 115deg, #FFFFFF 0%, #F8FAFD 52%, #FFF1DF 100% );
    color: var(--bf-text);
}


/* ==========================================
   BACKGROUND LIGHT
========================================== */

.bf-bg-glow {
    position: absolute;
    z-index: -2;
    top: -180px;
    right: 10%;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background: radial-gradient( circle, rgba(245, 166, 35, 0.22), rgba(242, 140, 40, 0.08) 42%, transparent 72% );
    filter: blur(90px);
    animation: bfGlow 8s ease-in-out infinite alternate;
    pointer-events: none;
}


/* ==========================================
   SUBTLE GRID
========================================== */

.bf-grid {
    position: absolute;
    z-index: -2;
    inset: 0;
    opacity: 0.18;
    background-image: linear-gradient( rgba(11, 46, 89, 0.08) 1px, transparent 1px ), linear-gradient( 90deg, rgba(11, 46, 89, 0.08) 1px, transparent 1px );
    background-size: 48px 48px;
    mask-image: linear-gradient( 90deg, black, transparent 90% );
    -webkit-mask-image: linear-gradient( 90deg, black, transparent 90% );
    pointer-events: none;
}


/* ==========================================
   ORBIT EFFECTS
========================================== */

.bf-orbit {
    position: absolute;
    z-index: -1;
    border: 1px solid rgba(242, 140, 40, 0.24);
    border-radius: 50%;
    pointer-events: none;
}

.bf-orbit-one {
    width: 480px;
    height: 480px;
    top: -300px;
    right: 18%;
    animation: bfOrbitRotate 25s linear infinite;
}

.bf-orbit-two {
    width: 570px;
    height: 570px;
    top: -340px;
    right: 15%;
    border-style: dashed;
    border-color: rgba(11, 46, 89, 0.13);
    animation: bfOrbitRotate 40s linear infinite reverse;
}


/* ==========================================
   PARTICLES
========================================== */

.bf-particles {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

    .bf-particles span {
        position: absolute;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: var(--bf-orange);
        box-shadow: 0 0 8px rgba(242, 140, 40, 0.55), 0 0 18px rgba(245, 166, 35, 0.28);
        animation: bfParticleFloat 6s ease-in-out infinite;
    }

        .bf-particles span:nth-child(1) {
            left: 7%;
            top: 22%;
        }

        .bf-particles span:nth-child(2) {
            left: 42%;
            top: 15%;
            animation-delay: -2s;
        }

        .bf-particles span:nth-child(3) {
            left: 51%;
            top: 68%;
            animation-delay: -4s;
        }

        .bf-particles span:nth-child(4) {
            right: 11%;
            top: 25%;
            animation-delay: -1s;
        }

        .bf-particles span:nth-child(5) {
            right: 22%;
            bottom: 15%;
            animation-delay: -3s;
        }

        .bf-particles span:nth-child(6) {
            left: 30%;
            bottom: 11%;
            animation-delay: -2.5s;
        }

/* =========================================================
   BUBNA FINANCIAL SERVICES — DARK PREMIUM HERO
   Unique Prefix: bnh-
   Theme: Deep Navy + Electric Blue + Orange
========================================================= */

.bnh-hero {
    --bnh-navy: #071426;
    --bnh-navy-light: #0b1d35;
    --bnh-blue: #238be6;
    --bnh-blue-light: #61bdff;
    --bnh-orange: #ff982f;
    --bnh-orange-light: #ffc16f;
    --bnh-text: #b6c5d9;
    --bnh-white: #ffffff;
    position: relative;
    isolation: isolate;
    width: 100%;
    min-height: 0;
    padding: 48px 0 54px;
    overflow: hidden;
    background: #071426;
    color: var(--bnh-white);
    font-family: 'Outfit', 'Inter', sans-serif;
}

    .bnh-hero *,
    .bnh-hero *::before,
    .bnh-hero *::after {
        box-sizing: border-box;
    }

    .bnh-hero a {
        text-decoration: none;
    }

    .bnh-hero img {
        max-width: 100%;
    }

.bnh-container {
    position: relative;
    z-index: 3;
    width: min(1280px, 91%);
    margin-inline: auto;
    display: grid;
    grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
    align-items: center;
    gap: clamp(30px, 4.2vw, 70px);
}

/* =========================================================
   01. DARK BACKGROUND
========================================================= */

.bnh-bg {
    position: absolute;
    z-index: -6;
    inset: 0;
    background: radial-gradient( ellipse at 10% 18%, rgba(28, 113, 206, .20), transparent 38% ), radial-gradient( ellipse at 85% 75%, rgba(242, 140, 40, .12), transparent 34% ), radial-gradient( ellipse at 55% 0%, rgba(35, 139, 230, .09), transparent 42% ), linear-gradient( 125deg, #071426 0%, #0a1b31 48%, #081629 100% );
}

/* Animated background grid */

.bnh-grid {
    position: absolute;
    z-index: -5;
    inset: 0;
    opacity: .20;
    pointer-events: none;
    background-image: linear-gradient( rgba(100, 169, 231, .12) 1px, transparent 1px ), linear-gradient( 90deg, rgba(100, 169, 231, .12) 1px, transparent 1px );
    background-size: 46px 46px;
    mask-image: linear-gradient( 90deg, transparent, #000 18%, #000 82%, transparent );
    animation: bnhGridMove 28s linear infinite;
}

/* Blue and orange ambient lights */

.bnh-glow {
    position: absolute;
    z-index: -4;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(8px);
    will-change: transform, opacity;
}

.bnh-glow-left {
    width: 390px;
    height: 390px;
    top: -150px;
    left: -200px;
    background: rgba(26, 126, 227, .18);
    animation: bnhGlowPulse 8s ease-in-out infinite;
}

.bnh-glow-right {
    width: 400px;
    height: 400px;
    right: -200px;
    bottom: -160px;
    background: rgba(255, 139, 34, .13);
    animation: bnhGlowPulse 9s ease-in-out infinite reverse;
}

/* Decorative floating shapes */

.bnh-decor {
    position: absolute;
    z-index: -2;
    display: block;
    pointer-events: none;
}

.bnh-decor-one {
    width: 13px;
    height: 13px;
    top: 17%;
    left: 5.5%;
    border-radius: 50%;
    background: linear-gradient( 135deg, #a6dcff, #238be6 );
    box-shadow: 0 0 18px rgba(35, 139, 230, .55), 0 0 0 6px rgba(35, 139, 230, .08);
    animation: bnhDecorFloat 5s ease-in-out infinite;
}

.bnh-decor-two {
    width: 23px;
    height: 23px;
    top: 21%;
    right: 5%;
    border: 1px solid rgba(255, 193, 111, .65);
    border-radius: 7px;
    background: linear-gradient( 135deg, #ffc16f, #f28c28 );
    box-shadow: 0 0 25px rgba(242, 140, 40, .22);
    transform: rotate(35deg);
    animation: bnhDecorRotate 12s linear infinite;
}

.bnh-decor-three {
    width: 9px;
    height: 9px;
    bottom: 15%;
    left: 47%;
    border-radius: 50%;
    background: var(--bnh-orange);
    box-shadow: 0 0 0 7px rgba(242, 140, 40, .10), 0 0 22px rgba(242, 140, 40, .38);
    animation: bnhDecorFloat 6s ease-in-out infinite reverse;
}

/* JS particles */

.bnh-particles {
    position: absolute;
    z-index: -1;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.bnh-particle {
    position: absolute;
    display: block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #65baff;
    opacity: .45;
    box-shadow: 0 0 9px rgba(72, 168, 255, .5);
    animation: bnhParticleRise linear infinite;
}

/* =========================================================
   02. LEFT CONTENT
========================================================= */

.bnh-content {
    position: relative;
    z-index: 5;
    min-width: 0;
    animation: bnhContentEnter .9s cubic-bezier(.2, .7, .2, 1) both;
}

/* Eyebrow */

.bnh-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    max-width: 100%;
    padding: 10px 15px;
    border: 1px solid rgba(112, 174, 233, .22);
    border-radius: 50px;
    background: rgba(19, 45, 75, .68);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035), 0 8px 25px rgba(0, 0, 0, .12);
    color: #d8e9fb;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.05px;
    line-height: 1.5;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.bnh-eyebrow-dot {
    position: relative;
    flex: 0 0 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--bnh-orange);
    box-shadow: 0 0 0 4px rgba(242, 140, 40, .13);
}

    .bnh-eyebrow-dot::after {
        content: "";
        position: absolute;
        inset: -4px;
        border: 1px solid rgba(242, 140, 40, .55);
        border-radius: 50%;
        animation: bnhDotPulse 2s ease-out infinite;
    }

/* Main heading */

.bnh-title {
    max-width: 650px;
    margin: 24px 0 17px;
    color: #ffffff;
    font-size: clamp(38px, 4.1vw, 58px);
    font-weight: 850;
    letter-spacing: -2.1px;
    line-height: 1.08;
    text-wrap: balance;
}

.bnh-title-highlight {
    display: block;
    margin-top: 5px;
    background: linear-gradient( 100deg, #ff9a35 0%, #ffd08d 28%, #ff9a35 55%, #f47b19 78%, #ffb15c 100% );
    background-size: 220% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: bnhTextShimmer 8s linear infinite;
}

/* Company category */

.bnh-company-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 16px;
    color: #b5c9e0;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.6;
}

.bnh-line {
    flex: 0 0 27px;
    width: 27px;
    height: 2px;
    border-radius: 5px;
    background: linear-gradient( 90deg, var(--bnh-orange), #ffd09a );
    box-shadow: 0 0 12px rgba(242, 140, 40, .25);
}

/* Description */

.bnh-description {
    max-width: 540px;
    margin: 0;
    color: #aebfd4;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.85;
}

/* =========================================================
   03. SERVICE LINKS
========================================================= */

.bnh-services {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 25px;
}

.bnh-service {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 43px;
    padding: 7px 10px;
    overflow: hidden;
    border: 1px solid rgba(121, 170, 222, .18);
    border-radius: 10px;
    background: linear-gradient( 135deg, rgba(21, 47, 77, .92), rgba(13, 33, 58, .92) );
    color: #edf5ff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035), 0 7px 20px rgba(0, 0, 0, .12);
    transition: transform .3s ease, border-color .3s ease, background .3s ease, box-shadow .3s ease;
}

    .bnh-service::before {
        content: "";
        position: absolute;
        top: 0;
        left: -120%;
        width: 70%;
        height: 100%;
        background: linear-gradient( 100deg, transparent, rgba(255, 255, 255, .12), transparent );
        transform: skewX(-20deg);
        transition: left .65s ease;
    }

    .bnh-service:hover::before {
        left: 150%;
    }

    .bnh-service:hover {
        transform: translateY(-4px);
        border-color: rgba(255, 152, 47, .55);
        background: linear-gradient( 135deg, rgba(28, 61, 96, .98), rgba(17, 42, 70, .98) );
        box-shadow: 0 12px 28px rgba(0, 0, 0, .20), 0 0 0 1px rgba(255, 152, 47, .06);
    }

.bnh-service-icon {
    position: relative;
    z-index: 1;
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    color: #75c3ff;
    background: rgba(35, 139, 230, .16);
    font-size: 12px;
    transition: transform .3s ease, box-shadow .3s ease;
}

.bnh-icon-orange {
    color: #ffb65f;
    background: rgba(242, 140, 40, .15);
}

.bnh-service:hover .bnh-service-icon {
    transform: rotate(-8deg) scale(1.08);
    box-shadow: 0 0 18px rgba(35, 139, 230, .12);
}

.bnh-service-text {
    position: relative;
    z-index: 1;
    font-size: 12px;
    font-weight: 750;
    white-space: nowrap;
}

.bnh-service-arrow {
    position: relative;
    z-index: 1;
    margin-left: 1px;
    color: #839bb7;
    font-size: 10px;
    transition: transform .3s ease, color .3s ease;
}

.bnh-service:hover .bnh-service-arrow {
    color: var(--bnh-orange);
    transform: translate(2px, -2px);
}

/* =========================================================
   04. ACTION BUTTONS
========================================================= */

.bnh-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 25px;
}

.bnh-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    min-height: 48px;
    padding: 0 19px;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 750;
    line-height: 1.4;
    transition: transform .3s ease, box-shadow .3s ease, background .3s ease, border-color .3s ease;
}

    .bnh-btn i {
        font-size: 12px;
        transition: transform .3s ease;
    }

    .bnh-btn:hover {
        transform: translateY(-3px);
    }

        .bnh-btn:hover i {
            transform: translateX(4px);
        }

/* Primary button */

.bnh-btn-primary {
    color: #ffffff;
    background: linear-gradient( 115deg, #1769b1, #0b2e59 );
    border-color: rgba(103, 180, 255, .24);
    box-shadow: 0 10px 25px rgba(0, 0, 0, .20), inset 0 1px 0 rgba(255, 255, 255, .13);
}

    .bnh-btn-primary::before {
        content: "";
        position: absolute;
        top: 0;
        left: -110%;
        width: 70%;
        height: 100%;
        background: linear-gradient( 100deg, transparent, rgba(255, 255, 255, .20), transparent );
        transform: skewX(-20deg);
        transition: left .65s ease;
    }

    .bnh-btn-primary:hover::before {
        left: 150%;
    }

    .bnh-btn-primary:hover {
        box-shadow: 0 15px 32px rgba(0, 0, 0, .25), 0 0 22px rgba(35, 139, 230, .12);
    }

/* Secondary button */

.bnh-btn-secondary {
    color: #e3efff;
    border-color: rgba(150, 185, 225, .26);
    background: rgba(17, 40, 67, .72);
}

    .bnh-btn-secondary:hover {
        border-color: rgba(255, 152, 47, .65);
        background: rgba(26, 49, 76, .95);
        box-shadow: 0 10px 25px rgba(0, 0, 0, .17);
    }

/* =========================================================
   05. TRUST ROW
========================================================= */

.bnh-trust {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 24px;
}

.bnh-trust-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #c1d0e2;
    font-size: 14px;
    font-weight: 600;
}

.bnh-trust-icon {
    width: 25px;
    height: 25px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(96, 177, 244, .12);
    border-radius: 8px;
    color: #79c5ff;
    background: rgba(35, 139, 230, .13);
    font-size: 10px;
}

.bnh-trust-orange {
    color: #ffb65f;
    background: rgba(242, 140, 40, .13);
    border-color: rgba(242, 140, 40, .12);
}

.bnh-trust-divider {
    width: 1px;
    height: 22px;
    background: rgba(164, 191, 222, .20);
}

/* =========================================================
   06. RIGHT VISUAL
========================================================= */

.bnh-visual {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 570px;
    min-width: 0;
    height: 490px;
    margin-inline: auto;
    perspective: 1100px;
    transform-style: preserve-3d;
    animation: bnhVisualEnter .95s cubic-bezier(.2, .7, .2, 1) both;
}

/* =========================================================
   07. UNIQUE ANGLED FRAME
========================================================= */

.bnh-frame {
    position: absolute;
    pointer-events: none;
    transform-style: preserve-3d;
}

.bnh-frame-outer {
    inset: 7% 7% 10%;
    border: 1px solid rgba(85, 168, 241, .44);
    border-radius: 35% 17% 31% 18%;
    box-shadow: 0 0 20px rgba(35, 139, 230, .035), inset 0 0 20px rgba(35, 139, 230, .025);
    transform: rotate(-8deg);
    animation: bnhFrameRotate 16s ease-in-out infinite;
}

.bnh-frame-inner {
    inset: 11% 11% 13%;
    border: 1px dashed rgba(255, 152, 47, .48);
    border-radius: 19% 35% 17% 31%;
    transform: rotate(6deg);
    animation: bnhFrameRotateReverse 19s ease-in-out infinite;
}

/* =========================================================
   08. ORBIT RINGS
========================================================= */

.bnh-orbit {
    position: absolute;
    z-index: 0;
    left: 50%;
    top: 47%;
    width: 91%;
    height: 75%;
    border: 1px solid rgba(63, 157, 237, .23);
    border-radius: 50%;
    transform: translate(-50%, -50%) rotate(-27deg);
    pointer-events: none;
}

.bnh-orbit-one {
    animation: bnhOrbitPulse 7s ease-in-out infinite;
}

.bnh-orbit-two {
    width: 104%;
    height: 60%;
    border-color: rgba(255, 152, 47, .30);
    transform: translate(-50%, -50%) rotate(32deg);
    animation: bnhOrbitPulse 9s ease-in-out infinite reverse;
}

/* =========================================================
   09. FLOATING ORBIT DOTS
========================================================= */

.bnh-orbit-dot {
    position: absolute;
    z-index: 5;
    display: block;
    border-radius: 50%;
    pointer-events: none;
}

.bnh-dot-one {
    width: 17px;
    height: 17px;
    top: 8%;
    left: 20%;
    background: radial-gradient( circle at 30% 25%, #c5eaff, #238be6 70% );
    box-shadow: 0 0 20px rgba(35, 139, 230, .36), 0 8px 18px rgba(0, 0, 0, .16);
    animation: bnhDotFloat 4.5s ease-in-out infinite;
}

.bnh-dot-two {
    width: 13px;
    height: 13px;
    top: 24%;
    right: 4%;
    background: radial-gradient( circle at 30% 25%, #ffe5c0, #ff982f 70% );
    box-shadow: 0 0 20px rgba(242, 140, 40, .30);
    animation: bnhDotFloat 5.5s ease-in-out infinite reverse;
}

.bnh-dot-three {
    width: 11px;
    height: 11px;
    bottom: 16%;
    left: 9%;
    background: #5ab4ff;
    box-shadow: 0 0 0 6px rgba(35, 139, 230, .10), 0 0 18px rgba(35, 139, 230, .25);
    animation: bnhDotFloat 6s ease-in-out infinite;
}

/* =========================================================
   10. IMAGE FRAME
========================================================= */

.bnh-image-scene {
    position: absolute;
    z-index: 2;
    inset: 5% 9% 10%;
    display: grid;
    place-items: center;
    transform-style: preserve-3d;
}

.bnh-image-shadow {
    position: absolute;
    z-index: -1;
    inset: 14% 10% 8%;
    border-radius: 28% 17% 25% 16%;
    background: rgba(0, 0, 0, .48);
    filter: blur(30px);
    transform: translateY(18px) rotate(-5deg);
    animation: bnhShadowFloat 5s ease-in-out infinite;
}

/* Animated gradient frame */

.bnh-image-frame {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 9px;
    overflow: hidden;
    border: 1px solid rgba(145, 204, 255, .40);
    border-radius: 27% 15% 24% 15%;
    background: linear-gradient( 135deg, #6dc1ff 0%, #123d69 24%, #ff982f 54%, #0b2e59 76%, #66bdff 100% );
    background-size: 300% 300%;
    box-shadow: 0 30px 70px rgba(0, 0, 0, .38), 0 0 28px rgba(35, 139, 230, .10), inset 0 0 0 1px rgba(255, 255, 255, .12);
    transform: rotate(-3deg) translateZ(15px);
    transform-style: preserve-3d;
    transition: border-radius .5s ease, box-shadow .5s ease;
    animation: bnhImageFloat 6s ease-in-out infinite, bnhFrameGradient 12s ease infinite;
}

    /* Animated frame border */

    .bnh-image-frame::before {
        content: "";
        position: absolute;
        z-index: 4;
        inset: 0;
        padding: 2px;
        border-radius: inherit;
        background: conic-gradient( from 0deg, #238be6, #9ddcff, #ff982f, #ffce91, #238be6 );
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        pointer-events: none;
        animation: bnhBorderRotate 8s linear infinite;
    }

/* Image clipping */

.bnh-image-inner {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 27% 15% 24% 15%;
    background: #0b1d35;
    clip-path: inset(0 round 27% 15% 24% 15%);
}

/* Main image animation */

.bnh-main-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: scale(1.02);
    filter: saturate(1.04) contrast(1.04);
    animation: bnhImageZoom 12s ease-in-out infinite alternate;
    will-change: transform;
}

/* Dark image overlay */

.bnh-image-inner::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient( 180deg, rgba(5, 18, 35, .02) 45%, rgba(5, 18, 35, .20) 100% );
}

/* Light sweeping across image */

.bnh-image-shine {
    position: absolute;
    z-index: 3;
    top: -30%;
    left: -80%;
    width: 45%;
    height: 160%;
    background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, .27), transparent );
    transform: rotate(18deg);
    pointer-events: none;
    animation: bnhImageShine 7s ease-in-out infinite;
}

/* Top orange accent */

.bnh-image-topline {
    position: absolute;
    z-index: 5;
    top: 8%;
    left: 12%;
    width: 27%;
    height: 4px;
    border-radius: 5px;
    background: linear-gradient( 90deg, #ff982f, #ffe0b1 );
    box-shadow: 0 0 18px rgba(242, 140, 40, .45);
    pointer-events: none;
}

/* Frame corner details */

.bnh-corner {
    position: absolute;
    z-index: 6;
    width: 35px;
    height: 35px;
    pointer-events: none;
}

.bnh-corner-tl {
    top: 0;
    left: 0;
    border-top: 3px solid #ff982f;
    border-left: 3px solid #ff982f;
    border-radius: 14px 0 0 0;
    filter: drop-shadow(0 0 5px rgba(255, 152, 47, .30));
}

.bnh-corner-br {
    right: 0;
    bottom: 0;
    border-right: 3px solid #4aafff;
    border-bottom: 3px solid #4aafff;
    border-radius: 0 0 14px 0;
    filter: drop-shadow(0 0 5px rgba(74, 175, 255, .30));
}

/* =========================================================
   11. FLOATING INFO CARDS
========================================================= */

.bnh-float-card {
    position: absolute;
    z-index: 7;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 205px;
    padding: 12px 13px;
    border: 1px solid rgba(151, 193, 237, .20);
    border-radius: 13px;
    background: linear-gradient( 135deg, rgba(19, 42, 70, .96), rgba(10, 27, 48, .94) );
    box-shadow: 0 17px 38px rgba(0, 0, 0, .30), inset 0 1px 0 rgba(255, 255, 255, .055);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    animation: bnhCardFloat 5s ease-in-out infinite;
    transition: border-color .3s ease, box-shadow .3s ease, background .3s ease;
}

.bnh-float-card-top {
    top: 15%;
    right: -1%;
}

.bnh-float-card-bottom {
    left: -2%;
    bottom: 19%;
    animation-delay: -2.5s;
}

.bnh-float-card:hover {
    border-color: rgba(255, 152, 47, .55);
    background: linear-gradient( 135deg, rgba(25, 53, 85, .98), rgba(12, 32, 54, .98) );
    box-shadow: 0 22px 45px rgba(0, 0, 0, .36), 0 0 20px rgba(35, 139, 230, .08);
}

.bnh-float-icon {
    flex: 0 0 37px;
    width: 37px;
    height: 37px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    font-size: 14px;
}

.bnh-float-blue {
    color: #7bc8ff;
    background: rgba(35, 139, 230, .17);
    border: 1px solid rgba(35, 139, 230, .10);
}

.bnh-float-gold {
    color: #ffbd72;
    background: rgba(242, 140, 40, .16);
    border: 1px solid rgba(242, 140, 40, .10);
}

.bnh-float-copy {
    display: flex;
    flex: 1;
    min-width: 0;
    flex-direction: column;
    gap: 4px;
}

    .bnh-float-copy strong {
        color: #f1f7ff;
        font-size: 12px;
        font-weight: 800;
        line-height: 1.35;
    }

    .bnh-float-copy small {
        color: #9fb3cb;
        font-size: 12px;
        line-height: 1.4;
    }

.bnh-float-check {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #ffffff;
    background: #176eb7;
    box-shadow: 0 0 15px rgba(35, 139, 230, .16);
    font-size: 10px;
}

/* =========================================================
   12. 3D COINS
========================================================= */

.bnh-coin {
    position: absolute;
    z-index: 6;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .42);
    border-radius: 50%;
    background: radial-gradient( circle at 28% 22%, #ffe8bf 0%, #ffb14d 35%, #f28c28 68%, #d96b0c 100% );
    color: #ffffff;
    font-weight: 850;
    box-shadow: inset -5px -6px 9px rgba(180, 86, 5, .18), inset 3px 3px 7px rgba(255, 255, 255, .42), 0 13px 26px rgba(0, 0, 0, .24), 0 0 20px rgba(242, 140, 40, .10);
    animation: bnhCoinFloat 5s ease-in-out infinite;
}

    .bnh-coin span {
        text-shadow: 0 2px 2px rgba(145, 73, 5, .25);
    }

.bnh-coin-one {
    width: 48px;
    height: 48px;
    top: 3%;
    right: 19%;
    font-size: 21px;
}

.bnh-coin-two {
    width: 34px;
    height: 34px;
    bottom: 12%;
    right: 11%;
    font-size: 14px;
    animation-delay: -2.5s;
}

/* =========================================================
   13. VISUAL LABEL
========================================================= */

.bnh-visual-label {
    position: absolute;
    z-index: 8;
    right: 11%;
    bottom: 4%;
    display: flex;
    align-items: center;
    gap: 9px;
    max-width: 80%;
    padding: 11px 14px;
    border: 1px solid rgba(142, 190, 239, .19);
    border-radius: 9px;
    background: rgba(12, 31, 53, .93);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .04);
    color: #eaf4ff;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 1px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.bnh-label-indicator {
    flex: 0 0 7px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--bnh-orange);
    box-shadow: 0 0 0 4px rgba(242, 140, 40, .12), 0 0 12px rgba(242, 140, 40, .28);
}

.bnh-visual-label > i {
    color: #ffb45d;
    font-size: 10px;
}

/* =========================================================
   14. BOTTOM ACCENT
========================================================= */

.bnh-bottom-line {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient( 90deg, transparent, rgba(35, 139, 230, .60), rgba(255, 152, 47, .95), rgba(35, 139, 230, .60), transparent );
    background-size: 200% 100%;
    animation: bnhBottomSweep 7s linear infinite;
}

/* =========================================================
   15. ANIMATIONS
========================================================= */

@keyframes bnhContentEnter {
    from {
        opacity: 0;
        transform: translateX(-22px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes bnhVisualEnter {
    from {
        opacity: 0;
        transform: translateX(22px) scale(.97);
    }

    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@keyframes bnhGridMove {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 46px 46px;
    }
}

@keyframes bnhGlowPulse {
    0%, 100% {
        opacity: .55;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.15);
    }
}

@keyframes bnhDecorFloat {
    0%, 100% {
        translate: 0 0;
    }

    50% {
        translate: 0 -12px;
    }
}

@keyframes bnhDecorRotate {
    from {
        rotate: 0deg;
    }

    to {
        rotate: 360deg;
    }
}

@keyframes bnhDotPulse {
    0% {
        transform: scale(.7);
        opacity: .8;
    }

    100% {
        transform: scale(1.9);
        opacity: 0;
    }
}

@keyframes bnhTextShimmer {
    0% {
        background-position: 100% center;
    }

    100% {
        background-position: -120% center;
    }
}

@keyframes bnhFrameRotate {
    0%, 100% {
        transform: rotate(-8deg) translateY(0);
    }

    50% {
        transform: rotate(-5deg) translateY(-7px);
    }
}

@keyframes bnhFrameRotateReverse {
    0%, 100% {
        transform: rotate(6deg) translateY(0);
    }

    50% {
        transform: rotate(3deg) translateY(7px);
    }
}

@keyframes bnhOrbitPulse {
    0%, 100% {
        opacity: .55;
    }

    50% {
        opacity: 1;
    }
}

@keyframes bnhDotFloat {
    0%, 100% {
        translate: 0 0;
    }

    50% {
        translate: 0 -13px;
    }
}

@keyframes bnhShadowFloat {
    0%, 100% {
        transform: translateY(18px) rotate(-5deg) scale(.96);
    }

    50% {
        transform: translateY(25px) rotate(-3deg) scale(1.02);
    }
}

@keyframes bnhImageFloat {
    0%, 100% {
        transform: rotate(-3deg) translate3d(0, 0, 15px);
    }

    50% {
        transform: rotate(-1.5deg) translate3d(0, -7px, 22px);
    }
}

@keyframes bnhImageZoom {
    from {
        transform: scale(1.02);
    }

    to {
        transform: scale(1.09);
    }
}

@keyframes bnhImageShine {
    0%, 20% {
        left: -80%;
        opacity: 0;
    }

    32% {
        opacity: 1;
    }

    52% {
        left: 140%;
        opacity: 0;
    }

    100% {
        left: 140%;
        opacity: 0;
    }
}

@keyframes bnhBorderRotate {
    from {
        filter: hue-rotate(0deg);
    }

    to {
        filter: hue-rotate(18deg);
    }
}

@keyframes bnhFrameGradient {
    0%, 100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

@keyframes bnhCardFloat {
    0%, 100% {
        translate: 0 0;
    }

    50% {
        translate: 0 -9px;
    }
}

@keyframes bnhCoinFloat {
    0%, 100% {
        translate: 0 0;
        rotate: 0deg;
    }

    50% {
        translate: 0 -12px;
        rotate: 8deg;
    }
}

@keyframes bnhBottomSweep {
    from {
        background-position: 100% 0;
    }

    to {
        background-position: -100% 0;
    }
}

@keyframes bnhParticleRise {
    0% {
        transform: translate3d(0, 20px, 0);
        opacity: 0;
    }

    15% {
        opacity: .45;
    }

    85% {
        opacity: .25;
    }

    100% {
        transform: translate3d(12px, -100px, 0);
        opacity: 0;
    }
}

/* =========================================================
   16. LARGE DESKTOP
========================================================= */

@media (min-width: 1400px) {
    .bnh-hero {
        padding-top: 55px;
        padding-bottom: 62px;
    }

    .bnh-container {
        gap: 65px;
    }

    .bnh-visual {
        height: 510px;
    }
}

/* =========================================================
   17. LAPTOP
========================================================= */

@media (max-width: 1150px) {
    .bnh-hero {
        padding: 42px 0 48px;
    }

    .bnh-container {
        width: 93%;
        gap: 28px;
        grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
    }

    .bnh-title {
        font-size: clamp(36px, 4.4vw, 49px);
        letter-spacing: -1.5px;
    }

    .bnh-description {
        font-size: 12px;
    }

    .bnh-visual {
        height: 430px;
    }

    .bnh-float-card {
        min-width: 185px;
        padding: 10px;
    }

    .bnh-service {
        gap: 7px;
        padding: 7px 8px;
    }

    .bnh-service-text {
        font-size: 10px;
    }
}

/* =========================================================
   18. TABLET
========================================================= */

@media (max-width: 900px) {
    .bnh-hero {
        padding: 38px 0 44px;
    }

    .bnh-container {
        grid-template-columns: minmax(0, 1fr) minmax(0, .85fr);
        gap: 20px;
    }

    .bnh-title {
        font-size: clamp(32px, 4.5vw, 43px);
        line-height: 1.12;
    }

    .bnh-eyebrow {
        gap: 8px;
        padding: 9px 11px;
        font-size: 10px;
        letter-spacing: .7px;
    }

    .bnh-company-line {
        align-items: flex-start;
        font-size: 10px;
    }

    .bnh-description {
        font-size: 12px;
        line-height: 1.8;
    }

    .bnh-services {
        gap: 7px;
        margin-top: 19px;
    }

    .bnh-service {
        min-height: 38px;
        gap: 6px;
        padding: 5px 7px;
    }

    .bnh-service-icon {
        flex-basis: 24px;
        width: 24px;
        height: 24px;
        font-size: 10px;
    }

    .bnh-service-text {
        font-size: 10px;
    }

    .bnh-service-arrow {
        font-size: 8px;
    }

    .bnh-actions {
        gap: 8px;
        margin-top: 20px;
    }

    .bnh-btn {
        min-height: 43px;
        gap: 10px;
        padding: 0 12px;
        font-size: 10px;
    }

    .bnh-trust {
        gap: 10px;
        margin-top: 19px;
    }

    .bnh-trust-item {
        gap: 6px;
        font-size: 10px;
    }

    .bnh-trust-icon {
        width: 22px;
        height: 22px;
        font-size: 10px;
    }

    .bnh-visual {
        height: 370px;
    }

    .bnh-image-scene {
        inset: 9% 7% 12%;
    }

    .bnh-float-card {
        min-width: 156px;
        gap: 7px;
        padding: 8px;
        border-radius: 10px;
    }

    .bnh-float-icon {
        flex-basis: 29px;
        width: 29px;
        height: 29px;
        font-size: 12px;
    }

    .bnh-float-copy strong {
        font-size: 10px;
    }

    .bnh-float-copy small {
        font-size: 8px;
    }

    .bnh-float-check {
        flex-basis: 18px;
        width: 18px;
        height: 18px;
        font-size: 8px;
    }

    .bnh-coin-one {
        width: 39px;
        height: 39px;
        font-size: 17px;
    }

    .bnh-coin-two {
        width: 29px;
        height: 29px;
        font-size: 12px;
    }

    .bnh-visual-label {
        right: 7%;
        bottom: 5%;
        padding: 9px 10px;
        font-size: 8px;
    }
}

/* =========================================================
   19. MOBILE
========================================================= */

@media (max-width: 650px) {
    .bnh-hero {
        padding: 32px 0 35px;
    }

    .bnh-container {
        width: min(540px, 91%);
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
    }

    .bnh-content {
        order: 1;
    }

    .bnh-visual {
        order: 2;
        width: min(100%, 450px);
        height: auto;
        aspect-ratio: 1 / .92;
        margin: 5px auto 0;
    }

    .bnh-title {
        max-width: 500px;
        margin: 20px 0 14px;
        font-size: clamp(36px, 8.6vw, 49px);
        letter-spacing: -1.4px;
        line-height: 1.08;
    }

    .bnh-title-highlight {
        margin-top: 4px;
    }

    .bnh-company-line {
        margin-bottom: 12px;
        font-size: 10px;
    }

    .bnh-description {
        max-width: 520px;
        font-size: 12px;
        line-height: 1.8;
    }

    .bnh-services {
        margin-top: 18px;
        gap: 8px;
    }

    .bnh-service {
        min-height: 41px;
        padding: 6px 9px;
    }

    .bnh-service-text {
        font-size: 10px;
    }

    .bnh-actions {
        gap: 10px;
        margin-top: 21px;
    }

    .bnh-btn {
        min-height: 46px;
        gap: 13px;
        padding: 0 15px;
        font-size: 10px;
    }

    .bnh-trust {
        margin-top: 19px;
        gap: 12px;
    }

    .bnh-trust-item {
        font-size: 10px;
    }

    .bnh-visual-label {
        right: 8%;
        bottom: 3%;
    }

    .bnh-float-card-top {
        top: 13%;
        right: -1%;
    }

    .bnh-float-card-bottom {
        left: -1%;
        bottom: 18%;
    }

    .bnh-frame-outer {
        inset: 8% 6% 10%;
    }

    .bnh-frame-inner {
        inset: 12% 10% 13%;
    }

    .bnh-glow-left {
        width: 260px;
        height: 260px;
        top: -100px;
        left: -150px;
    }

    .bnh-glow-right {
        width: 260px;
        height: 260px;
        right: -140px;
        bottom: -90px;
    }
}

/* =========================================================
   20. SMALL MOBILE
========================================================= */

@media (max-width: 420px) {
    .bnh-hero {
        padding-top: 27px;
        padding-bottom: 30px;
    }

    .bnh-container {
        width: 92%;
        gap: 13px;
    }

    .bnh-eyebrow {
        gap: 8px;
        padding: 8px 11px;
        font-size: 8px;
        letter-spacing: .5px;
    }

    .bnh-title {
        margin-top: 18px;
        font-size: clamp(33px, 9.1vw, 39px);
        letter-spacing: -1.2px;
    }

    .bnh-company-line {
        gap: 8px;
        font-size: 10px;
    }

    .bnh-line {
        flex-basis: 20px;
        width: 20px;
    }

    .bnh-description {
        font-size: 12px;
        line-height: 1.75;
    }

    .bnh-services {
        gap: 6px;
        margin-top: 16px;
    }

    .bnh-service {
        gap: 6px;
        min-height: 36px;
        padding: 5px 7px;
        border-radius: 8px;
    }

    .bnh-service-icon {
        flex-basis: 22px;
        width: 22px;
        height: 22px;
        border-radius: 6px;
        font-size: 10px;
    }

    .bnh-service-text {
        font-size: 10px;
    }

    .bnh-service-arrow {
        font-size: 7px;
    }

    .bnh-actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 9px;
    }

    .bnh-btn {
        width: 100%;
        min-height: 44px;
        justify-content: space-between;
        padding: 0 15px;
    }

    .bnh-trust {
        gap: 9px;
    }

    .bnh-trust-item {
        font-size: 10px;
    }

    .bnh-trust-divider {
        height: 18px;
    }

    .bnh-visual {
        width: 100%;
        aspect-ratio: .94 / 1;
    }

    .bnh-image-scene {
        inset: 10% 7% 12%;
    }

    .bnh-image-frame {
        padding: 6px;
        border-radius: 25% 15% 23% 15%;
    }

    .bnh-image-inner {
        border-radius: 25% 15% 23% 15%;
        clip-path: inset(0 round 25% 15% 23% 15%);
    }

    .bnh-float-card {
        min-width: 0;
        max-width: 57%;
        gap: 6px;
        padding: 7px;
    }

    .bnh-float-icon {
        flex-basis: 26px;
        width: 26px;
        height: 26px;
        border-radius: 8px;
        font-size: 10px;
    }

    .bnh-float-copy strong {
        font-size: 8px;
    }

    .bnh-float-copy small {
        font-size: 7px;
    }

    .bnh-float-check {
        display: none;
    }

    .bnh-coin-one {
        width: 33px;
        height: 33px;
        font-size: 14px;
    }

    .bnh-coin-two {
        width: 25px;
        height: 25px;
        font-size: 12px;
    }

    .bnh-visual-label {
        right: 5%;
        bottom: 2%;
        gap: 6px;
        padding: 7px 8px;
        font-size: 7px;
        letter-spacing: .6px;
    }

    .bnh-label-indicator {
        flex-basis: 6px;
        width: 6px;
        height: 6px;
    }

    .bnh-corner {
        width: 25px;
        height: 25px;
    }

    .bnh-frame-outer {
        inset: 8% 4% 10%;
    }

    .bnh-frame-inner {
        inset: 12% 8% 13%;
    }
}

/* =========================================================
   21. VERY SMALL SCREENS
========================================================= */

@media (max-width: 350px) {
    .bnh-container {
        width: 94%;
    }

    .bnh-title {
        font-size: 32px;
        letter-spacing: -1px;
    }

    .bnh-eyebrow {
        font-size: 7px;
    }

    .bnh-service {
        gap: 5px;
        padding: 5px 6px;
    }

    .bnh-service-text {
        font-size: 8px;
    }

    .bnh-float-card {
        gap: 5px;
        padding: 6px;
    }

    .bnh-float-copy strong {
        font-size: 7px;
    }

    .bnh-float-copy small {
        font-size: 6px;
    }

    .bnh-visual-label {
        font-size: 6px;
        letter-spacing: .4px;
    }
}

/* =========================================================
   22. ACCESSIBILITY
========================================================= */

@media (prefers-reduced-motion: reduce) {
    .bnh-hero *,
    .bnh-hero *::before,
    .bnh-hero *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
}
/* ==========================================
   MAIN CONTAINER
========================================== */

.bf-hero-container {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 35px 5% 52px;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    align-items: center;
    gap: 15px;
}


/* ==========================================
   LEFT CONTENT
========================================== */

.bf-hero-content {
    position: relative;
    z-index: 5;
    max-width: 680px;
    animation: bfContentEnter 0.9s ease both;
}


/* ==========================================
   EYEBROW
========================================== */

.bf-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    color: var(--bf-navy);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
    line-height: 1.5;
}

.bf-eyebrow-icon {
    width: 31px;
    height: 31px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid rgba(242, 140, 40, 0.50);
    border-radius: 50%;
    color: var(--bf-navy);
    background: linear-gradient( 135deg, #FFFFFF, #FFE3BB );
    box-shadow: 0 5px 15px rgba(11, 46, 89, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.95);
}


/* ==========================================
   MAIN TITLE
========================================== */

.bf-title {
    max-width: 680px;
    font-family: var(--bf-heading);
    font-size: clamp(34px, 3.35vw, 56px);
    font-weight: 800;
    line-height: 1.06;
    letter-spacing: -1.7px;
    color: var(--bf-navy);
    text-wrap: balance;
}

    .bf-title span {
        display: block;
        color: #174779;
        text-shadow: 0 2px 0 rgba(255, 255, 255, 0.9);
    }


/* ==========================================
   COMPANY TYPE
========================================== */

.bf-company-type {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 15px;
    color: var(--bf-navy);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
    line-height: 1.7;
    text-transform: uppercase;
}

.bf-line {
    width: 25px;
    height: 2px;
    flex-shrink: 0;
    background: linear-gradient( 90deg, var(--bf-orange-dark), var(--bf-amber) );
}

.bf-nbfc {
    color: var(--bf-orange-dark);
}


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

.bf-description {
    max-width: 480px;
    margin-top: 14px;
    color: var(--bf-muted);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.8;
}


/* ==========================================
   SERVICES
========================================== */

.bf-services {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 23px;
}

.bf-service {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--bf-text);
    font-size: 10px;
    font-weight: 700;
    line-height: 1.45;
    transition: transform 0.3s ease, color 0.3s ease;
}

    .bf-service:hover {
        color: var(--bf-navy-light);
        transform: translateY(-4px);
    }

.bf-service-icon {
    position: relative;
    width: 43px;
    height: 43px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 50%;
    color: var(--bf-navy);
    background: linear-gradient( 140deg, #FFFFFF, #FFE3BB );
    border: 1px solid rgba(242, 140, 40, 0.40);
    box-shadow: 0 7px 15px rgba(11, 46, 89, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.95);
    transition: color 0.35s ease, background 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease;
}

    .bf-service-icon i {
        font-size: 14px;
    }

.bf-service:hover .bf-service-icon {
    color: #FFFFFF;
    background: linear-gradient( 135deg, var(--bf-navy), var(--bf-navy-dark) );
    transform: rotateY(180deg);
    box-shadow: 0 8px 20px rgba(11, 46, 89, 0.20);
}

.bf-service-divider {
    width: 1px;
    height: 34px;
    flex-shrink: 0;
    background: linear-gradient( transparent, rgba(242, 140, 40, 0.55), transparent );
}


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

.bf-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 13px;
    margin-top: 27px;
}

.bf-btn {
    position: relative;
    isolation: isolate;
    min-height: 49px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    padding: 0 24px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 800;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

    .bf-btn i {
        font-size: 14px;
        transition: transform 0.3s ease;
    }

    .bf-btn:hover i {
        transform: translateX(5px);
    }

    .bf-btn:hover {
        transform: translateY(-3px);
    }


/* ==========================================
   PRIMARY BUTTON
========================================== */

.bf-btn-primary {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    color: #FFFFFF;
    background: linear-gradient( 115deg, #174779 0%, #0B2E59 55%, #071D38 100% );
    border: 1px solid rgba(245, 166, 35, 0.90);
    box-shadow: 0 8px 18px rgba(11, 46, 89, 0.20), 0 3px 0 rgba(7, 29, 56, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

    .bf-btn-primary::before {
        content: "";
        position: absolute;
        z-index: -1;
        top: -50%;
        bottom: -50%;
        left: -120%;
        width: 65%;
        background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.30), transparent );
        transform: skewX(-25deg);
        transition: left 0.7s ease;
    }

    .bf-btn-primary:hover::before {
        left: 150%;
    }

    .bf-btn-primary:hover {
        box-shadow: 0 13px 28px rgba(11, 46, 89, 0.25), 0 0 20px rgba(242, 140, 40, 0.12);
    }


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

.bf-btn-secondary {
    color: var(--bf-navy);
    background: linear-gradient( 135deg, #FFFFFF, #FFF7EC );
    border: 1px solid rgba(242, 140, 40, 0.75);
    box-shadow: 0 5px 13px rgba(11, 46, 89, 0.05), inset 0 1px 0 #FFFFFF;
}

    .bf-btn-secondary:hover {
        color: var(--bf-navy-dark);
        background: #FFFFFF;
        box-shadow: 0 9px 20px rgba(11, 46, 89, 0.10), 0 0 0 3px rgba(242, 140, 40, 0.07);
    }


/* ==========================================
   TRUST ROW
========================================== */

.bf-trust-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 21px;
}

.bf-trust-item {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #52647A;
    font-size: 10px;
    font-weight: 700;
}

    .bf-trust-item i {
        color: var(--bf-orange-dark);
        font-size: 12px;
    }

.bf-trust-divider {
    width: 1px;
    height: 15px;
    background: rgba(11, 46, 89, 0.20);
}


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

.bf-hero-visual {
    position: relative;
    min-width: 0;
    min-height: 360px;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1100px;
    transform-style: preserve-3d;
    animation: bfVisualEnter 1s 0.15s ease both;
}


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

.bf-visual-glow {
    position: absolute;
    z-index: -2;
    width: 80%;
    height: 75%;
    border-radius: 50%;
    background: radial-gradient( ellipse, rgba(245, 166, 35, 0.30), rgba(242, 140, 40, 0.13) 42%, transparent 72% );
    filter: blur(35px);
    animation: bfGlow 6s ease-in-out infinite alternate;
}


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

.bf-visual-orbit {
    position: absolute;
    width: 80%;
    height: 82%;
    border: 1px solid rgba(242, 140, 40, 0.28);
    border-radius: 50%;
    transform: rotateX(65deg) rotateZ(-18deg);
    animation: bfOrbitRotate 24s linear infinite;
}


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

.bf-visual-card {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 630px;
    transform-style: preserve-3d;
    will-change: transform;
    transition: transform 0.25s ease-out;
}

.bf-visual-image {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    filter: drop-shadow( 0 25px 25px rgba(11, 46, 89, 0.15) );
    animation: bfImageFloat 6s ease-in-out infinite;
}


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

.bf-float-card {
    position: absolute;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(242, 140, 40, 0.36);
    box-shadow: 0 12px 28px rgba(11, 46, 89, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.95);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    animation: bfFloatCard 5s ease-in-out infinite;
}

.bf-card-top {
    top: 10%;
    right: 1%;
}

.bf-card-bottom {
    left: 0;
    bottom: 12%;
    animation-delay: -2.5s;
}


/* ==========================================
   FLOATING ICONS
========================================== */

.bf-float-icon {
    width: 37px;
    height: 37px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 12px;
    color: #FFFFFF;
    background: linear-gradient( 140deg, var(--bf-navy-light), var(--bf-navy-dark) );
    box-shadow: 0 4px 10px rgba(11, 46, 89, 0.17);
}

.bf-icon-gold {
    color: var(--bf-navy);
    background: linear-gradient( 135deg, #FFE9C5, var(--bf-amber) );
    box-shadow: 0 4px 10px rgba(242, 140, 40, 0.18);
}

.bf-float-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

    .bf-float-text strong {
        color: var(--bf-navy);
        font-size: 10px;
        font-weight: 800;
        white-space: nowrap;
    }

    .bf-float-text small {
        color: var(--bf-muted);
        font-size: 10px;
        white-space: nowrap;
    }


/* ==========================================
   DECORATIVE 3D COINS
========================================== */

.bf-coin {
    position: absolute;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient( 135deg, #FFF0BD 0%, #F5A623 35%, #D97717 60%, #FFD98A 80%, #E7A02D 100% );
    border: 3px solid rgba(255, 242, 207, 0.95);
    box-shadow: 0 7px 0 #B96C17, 0 13px 20px rgba(11, 46, 89, 0.17), inset 0 0 0 3px rgba(201, 105, 18, 0.30);
    transform-style: preserve-3d;
    animation: bfCoinFloat 4s ease-in-out infinite;
}

    .bf-coin span {
        color: var(--bf-navy);
        font-family: var(--bf-heading);
        font-size: 25px;
        font-weight: 800;
        text-shadow: 0 1px 0 rgba(255, 245, 200, 0.8);
    }

.bf-coin-one {
    width: 54px;
    height: 54px;
    top: 18%;
    left: 7%;
}

.bf-coin-two {
    width: 43px;
    height: 43px;
    right: 7%;
    bottom: 20%;
    animation-delay: -2s;
}


/* ==========================================
   PLATFORM
========================================== */

.bf-platform {
    position: absolute;
    z-index: -1;
    bottom: 5%;
    width: 83%;
    height: 35px;
    border-radius: 50%;
    background: linear-gradient( 180deg, rgba(255, 255, 255, 0.90), rgba(242, 140, 40, 0.16) );
    border: 1px solid rgba(242, 140, 40, 0.40);
    box-shadow: 0 10px 0 rgba(11, 46, 89, 0.06), 0 20px 35px rgba(11, 46, 89, 0.12);
    transform: rotateX(58deg);
    animation: bfPlatformFloat 5s ease-in-out infinite;
}


/* ==========================================
   BOTTOM WAVE
========================================== */

.bf-bottom-wave {
    position: absolute;
    z-index: 3;
    left: -3%;
    right: -3%;
    bottom: -45px;
    height: 85px;
    border-radius: 50% 50% 0 0 / 35% 35% 0 0;
    background: linear-gradient( 100deg, #0B2E59 0%, #071D38 55%, #04152B 100% );
    border-top: 3px solid var(--bf-orange);
    transform: rotate(-1deg);
}

.bf-wave-line {
    position: absolute;
    top: 5px;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient( 90deg, transparent, rgba(255, 208, 138, 0.85), transparent );
}


/* ==========================================
   SLIDER DOTS
========================================== */

.bf-slider-dots {
    position: absolute;
    z-index: 4;
    left: 50%;
    bottom: 20px;
    display: flex;
    align-items: center;
    gap: 9px;
    transform: translateX(-50%);
}

.bf-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(242, 140, 40, 0.55);
    transition: all 0.3s ease;
}

    .bf-dot.active {
        width: 28px;
        border-radius: 20px;
        background: linear-gradient( 90deg, var(--bf-orange), var(--bf-orange-light) );
        box-shadow: 0 0 12px rgba(242, 140, 40, 0.25);
    }


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

@keyframes bfContentEnter {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}


@keyframes bfVisualEnter {
    from {
        opacity: 0;
        transform: translateX(25px) scale(0.96);
    }

    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}


@keyframes bfImageFloat {
    0%, 100% {
        transform: translateY(0) rotateX(0deg);
    }

    50% {
        transform: translateY(-7px) rotateX(1deg);
    }
}


@keyframes bfFloatCard {
    0%, 100% {
        transform: translateY(0) rotateY(0deg);
    }

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


@keyframes bfCoinFloat {
    0%, 100% {
        transform: translateY(0) rotateY(0deg);
    }

    50% {
        transform: translateY(-13px) rotateY(22deg);
    }
}


@keyframes bfPlatformFloat {
    0%, 100% {
        transform: rotateX(58deg) translateY(0);
    }

    50% {
        transform: rotateX(58deg) translateY(-4px);
    }
}


@keyframes bfGlow {
    from {
        opacity: 0.65;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1.08);
    }
}


@keyframes bfOrbitRotate {
    from {
        rotate: 0deg;
    }

    to {
        rotate: 360deg;
    }
}


@keyframes bfParticleFloat {
    0%, 100% {
        opacity: 0.35;
        transform: translateY(0) scale(0.8);
    }

    50% {
        opacity: 1;
        transform: translateY(-18px) scale(1.2);
    }
}


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

@media (max-width: 1250px) {

    .bf-hero {
        min-height: 455px;
    }

    .bf-hero-container {
        padding: 32px 4% 48px;
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
        gap: 5px;
    }

    .bf-title {
        font-size: clamp(32px, 3.5vw, 45px);
        letter-spacing: -1.1px;
    }

    .bf-description {
        font-size: 12px;
    }

    .bf-services {
        gap: 8px;
    }

    .bf-service {
        gap: 6px;
        font-size: 10px;
    }

    .bf-service-icon {
        width: 37px;
        height: 37px;
    }

    .bf-service-divider {
        height: 28px;
    }

    .bf-hero-visual {
        min-height: 320px;
    }

    .bf-float-card {
        padding: 9px 10px;
    }

    .bf-float-icon {
        width: 32px;
        height: 32px;
    }
}


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

@media (max-width: 950px) {

    .bf-hero {
        min-height: 0;
    }

    .bf-hero-container {
        grid-template-columns: 1fr 1fr;
        padding: 32px 4% 48px;
    }

    .bf-title {
        font-size: clamp(30px, 4vw, 39px);
    }

    .bf-company-type {
        font-size: 10px;
        letter-spacing: 1.2px;
    }

    .bf-description {
        font-size: 12px;
        line-height: 1.7;
    }

    .bf-services {
        flex-wrap: wrap;
        gap: 12px;
    }

    .bf-service-divider {
        display: none;
    }

    .bf-service {
        min-width: 42%;
    }

    .bf-hero-visual {
        min-height: 290px;
    }

    .bf-card-top {
        right: 0;
        top: 7%;
    }

    .bf-card-bottom {
        left: 0;
        bottom: 8%;
    }

    .bf-float-card {
        gap: 7px;
        padding: 8px;
    }

    .bf-float-text strong {
        font-size: 10px;
    }

    .bf-float-text small {
        font-size: 8px;
    }

    .bf-coin-one {
        width: 43px;
        height: 43px;
    }

    .bf-coin-two {
        width: 36px;
        height: 36px;
    }
}


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

@media (max-width: 650px) {

    .bf-hero {
        display: block;
        min-height: 0;
        background: radial-gradient( ellipse at 80% 40%, rgba(245, 166, 35, 0.16), transparent 45% ), linear-gradient( 150deg, #FFFFFF, #FFF4E6 );
    }

    .bf-hero-container {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 30px 20px 60px;
    }

    .bf-hero-content {
        width: 100%;
        max-width: 100%;
    }

    .bf-eyebrow {
        gap: 8px;
        margin-bottom: 14px;
        font-size: 10px;
        letter-spacing: 1.1px;
    }

    .bf-eyebrow-icon {
        width: 29px;
        height: 29px;
    }

    .bf-title {
        max-width: 100%;
        font-size: clamp(32px, 8.4vw, 44px);
        line-height: 1.08;
        letter-spacing: -0.8px;
    }

        .bf-title span {
            margin-top: 2px;
        }

    .bf-company-type {
        gap: 6px;
        margin-top: 13px;
        font-size: 8px;
        letter-spacing: 1px;
    }

    .bf-line {
        width: 17px;
    }

    .bf-description {
        margin-top: 12px;
        max-width: 100%;
        font-size: 12px;
        line-height: 1.8;
    }

    .bf-services {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        margin-top: 20px;
    }

    .bf-service {
        min-width: 0;
        gap: 9px;
        padding: 8px;
        border: 1px solid rgba(242, 140, 40, 0.22);
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.78);
        box-shadow: 0 5px 15px rgba(11, 46, 89, 0.035);
    }

    .bf-service-icon {
        width: 39px;
        height: 39px;
    }

        .bf-service-icon i {
            font-size: 14px;
        }

    .bf-service > span:last-child {
        font-size: 10px;
    }

    .bf-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin-top: 22px;
    }

    .bf-btn {
        min-height: 47px;
        gap: 8px;
        padding: 0 12px;
        font-size: 10px;
    }

        .bf-btn i {
            font-size: 12px;
        }

    .bf-trust-row {
        gap: 10px;
        margin-top: 18px;
    }

    .bf-trust-item {
        gap: 6px;
        font-size: 10px;
    }

    .bf-trust-divider {
        height: 13px;
    }


    /* VISUAL BELOW CONTENT */

    .bf-hero-visual {
        width: 100%;
        min-height: 0;
        margin-top: 15px;
        aspect-ratio: 1.35 / 1;
        overflow: hidden;
    }

    .bf-visual-card {
        width: 100%;
        max-width: none;
    }

    .bf-visual-image {
        width: 100%;
    }

    .bf-visual-orbit {
        width: 90%;
        height: 85%;
    }

    .bf-card-top {
        top: 3%;
        right: 0;
    }

    .bf-card-bottom {
        left: 0;
        bottom: 5%;
    }

    .bf-float-card {
        gap: 7px;
        padding: 7px 9px;
        border-radius: 12px;
    }

    .bf-float-icon {
        width: 28px;
        height: 28px;
        border-radius: 9px;
        font-size: 10px;
    }

    .bf-float-text strong {
        font-size: 8px;
    }

    .bf-float-text small {
        font-size: 7px;
    }

    .bf-coin-one {
        width: 34px;
        height: 34px;
        top: 18%;
        left: 4%;
    }

    .bf-coin-two {
        width: 29px;
        height: 29px;
        right: 4%;
        bottom: 19%;
    }

    .bf-coin span {
        font-size: 16px;
    }

    .bf-platform {
        bottom: 4%;
        width: 85%;
        height: 22px;
    }

    .bf-bottom-wave {
        bottom: -58px;
        height: 80px;
    }

    .bf-slider-dots {
        bottom: 15px;
    }
}


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

@media (max-width: 380px) {

    .bf-hero-container {
        padding-left: 15px;
        padding-right: 15px;
    }

    .bf-title {
        font-size: 30px;
    }

    .bf-eyebrow {
        font-size: 8px;
        letter-spacing: 0.8px;
    }

    .bf-services {
        gap: 8px;
    }

    .bf-service {
        padding: 6px;
        gap: 7px;
    }

    .bf-service-icon {
        width: 34px;
        height: 34px;
    }

    .bf-btn {
        font-size: 10px;
        padding: 0 8px;
    }

    .bf-trust-item {
        font-size: 8px;
    }
}


/* ==========================================
   ACCESSIBILITY
========================================== */

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

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}









/* =========================================================
   FINANCIAL ORBIT — BUBNA FINANCE
   LIGHT THEME | 3D | RESPONSIVE
========================================================= */


/* =========================================================
   01. ROOT
========================================================= */

:root {
    --fo-navy: #0B2E59;
    --fo-navy-dark: #082342;
    --fo-navy-light: #174776;
    --fo-orange: #F28C28;
    --fo-amber: #F5A623;
    --fo-orange-light: #FFD69B;
    --fo-white: #FFFFFF;
    --fo-background: #FFFCF7;
    --fo-background-blue: #F0F6FC;
    --fo-card: #FFFFFF;
    --fo-text: #15365C;
    --fo-muted: #687B94;
    --fo-border: rgba(11, 46, 89, 0.10);
    --fo-orange-border: rgba(242, 140, 40, 0.30);
    --fo-shadow: 0 25px 65px rgba(11, 46, 89, 0.12);
    --fo-radius: 24px;
    --fo-font: 'Inter', 'Nunito', Arial, sans-serif;
    --fo-heading: 'Playfair Display', Georgia, serif;
}


/* =========================================================
   02. SECTION BASE
========================================================= */

.fo-section {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 26px 0 0;
    background: radial-gradient( ellipse at 8% 15%, rgba(255, 216, 169, 0.24), transparent 36% ), radial-gradient( ellipse at 95% 35%, rgba(183, 218, 255, 0.35), transparent 38% ), linear-gradient( 135deg, #FFFCF7 0%, #FFFFFF 48%, #F1F7FD 100% );
    color: var(--fo-text);
    font-family: var(--fo-font);
    perspective: 1500px;
}

    .fo-section *,
    .fo-section *::before,
    .fo-section *::after {
        box-sizing: border-box;
    }

    .fo-section a {
        color: inherit;
        text-decoration: none;
    }

    .fo-section img {
        display: block;
        max-width: 100%;
    }

.fo-container {
    position: relative;
    z-index: 2;
    width: min(1440px, 92%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    align-items: center;
    gap: clamp(35px, 5vw, 85px);
}


/* =========================================================
   03. BACKGROUND DECORATIONS
========================================================= */

.fo-grid-pattern {
    position: absolute;
    z-index: -2;
    inset: 0;
    pointer-events: none;
    background-image: linear-gradient( rgba(11, 46, 89, 0.035) 1px, transparent 1px ), linear-gradient( 90deg, rgba(11, 46, 89, 0.035) 1px, transparent 1px );
    background-size: 55px 55px;
    mask-image: linear-gradient( to bottom, transparent, black 20%, black 80%, transparent );
    -webkit-mask-image: linear-gradient( to bottom, transparent, black 20%, black 80%, transparent );
}

.fo-bg-glow {
    position: absolute;
    z-index: -1;
    width: 380px;
    height: 380px;
    border-radius: 50%;
    filter: blur(90px);
    pointer-events: none;
    animation: foGlowFloat 10s ease-in-out infinite alternate;
}

.fo-bg-glow-one {
    top: 10%;
    left: -220px;
    background: rgba(242, 140, 40, 0.10);
}

.fo-bg-glow-two {
    right: -200px;
    bottom: 8%;
    background: rgba(69, 151, 235, 0.12);
    animation-delay: -5s;
}

@keyframes foGlowFloat {
    from {
        transform: translate3d(0, 0, 0) scale(1);
    }

    to {
        transform: translate3d(25px, -35px, 0) scale(1.12);
    }
}


/* =========================================================
   04. CONTENT
========================================================= */

.fo-content {
    position: relative;
    z-index: 4;
    min-width: 0;
    padding: 15px 0 30px;
}

.fo-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 24px;
    color: var(--fo-navy);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2.2px;
    line-height: 1.7;
}

.fo-eyebrow-icon {
    width: 35px;
    height: 35px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #FFFFFF;
    background: linear-gradient( 145deg, var(--fo-orange), #E77613 );
    border-radius: 12px;
    box-shadow: 0 7px 17px rgba(242, 140, 40, 0.28);
    transform: rotate(-7deg);
}

    .fo-eyebrow-icon i {
        transform: rotate(7deg);
        font-size: 14px;
    }


/* =========================================================
   05. HEADING
========================================================= */

.fo-title {
    max-width: 640px;
    margin: 0;
    font-family: var(--fo-heading);
    font-size: clamp(40px, 4.2vw, 68px);
    font-weight: 800;
    line-height: 1.06;
    letter-spacing: -1.8px;
    color: var(--fo-navy);
    text-wrap: balance;
}

.fo-title-highlight {
    position: relative;
    display: inline-block;
    color: var(--fo-orange);
    text-shadow: 0 3px 0 rgba(242, 140, 40, 0.08);
}

    .fo-title-highlight::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -5px;
        width: 100%;
        height: 4px;
        border-radius: 5px;
        background: linear-gradient( 90deg, var(--fo-orange), rgba(242, 140, 40, 0.05) );
        transform: scaleX(0);
        transform-origin: left;
        animation: foTitleUnderline 1s ease 0.7s forwards;
    }

@keyframes foTitleUnderline {
    to {
        transform: scaleX(1);
    }
}

.fo-title-last {
    display: block;
}

.fo-subtitle {
    margin: 21px 0 0;
    color: var(--fo-navy-light);
    font-size: clamp(18px, 1.8vw, 24px);
    font-weight: 750;
    letter-spacing: -0.4px;
}

.fo-description {
    max-width: 550px;
    margin: 17px 0 0;
    color: var(--fo-muted);
    font-size: 14px;
    line-height: 1.95;
}


/* =========================================================
   06. FEATURES
========================================================= */

.fo-features {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin-top: 29px;
}

.fo-feature {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.fo-feature-icon {
    position: relative;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid rgba(242, 140, 40, 0.23);
    border-radius: 16px;
    color: var(--fo-navy);
    background: linear-gradient( 145deg, #FFFFFF, #FFF0DB );
    box-shadow: 0 8px 18px rgba(11, 46, 89, 0.055);
    transition: transform 0.4s ease, box-shadow 0.4s ease, color 0.4s ease, background 0.4s ease;
}

    .fo-feature-icon i {
        font-size: 16px;
    }

.fo-feature:hover .fo-feature-icon {
    color: #FFFFFF;
    background: linear-gradient( 145deg, var(--fo-orange), #E97916 );
    transform: translateY(-5px) rotateY(18deg) rotateX(10deg);
    box-shadow: 0 13px 23px rgba(242, 140, 40, 0.24);
}

.fo-feature > span:last-child {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.fo-feature strong {
    color: var(--fo-navy);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.5;
}

.fo-feature small {
    color: var(--fo-muted);
    font-size: 13px;
    line-height: 1.5;
}


/* =========================================================
   07. BUTTONS
========================================================= */

.fo-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 13px;
    margin-top: 30px;
}

.fo-btn {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 53px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    padding: 0 23px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 800;
    transition: transform 0.35s ease, box-shadow 0.35s ease, background 0.35s ease, color 0.35s ease;
}

    .fo-btn::before {
        content: "";
        position: absolute;
        z-index: -1;
        top: -40%;
        bottom: -40%;
        left: -120%;
        width: 65%;
        background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.3), transparent );
        transform: skewX(-25deg);
        transition: left 0.65s ease;
    }

    .fo-btn:hover::before {
        left: 150%;
    }

    .fo-btn:hover {
        transform: translateY(-4px);
    }

    .fo-btn i {
        transition: transform 0.35s ease;
    }

    .fo-btn:hover i {
        transform: translateX(4px);
    }

.fo-btn-primary {
    color: #FFFFFF;
    background: linear-gradient( 120deg, #174776, #082342 );
    border: 1px solid var(--fo-orange);
    box-shadow: 0 11px 25px rgba(11, 46, 89, 0.18);
}

    .fo-btn-primary:hover {
        box-shadow: 0 16px 32px rgba(11, 46, 89, 0.25);
    }

.fo-btn-outline {
    color: var(--fo-navy);
    background: rgba(255, 255, 255, 0.84);
    border: 1px solid rgba(242, 140, 40, 0.65);
    box-shadow: 0 7px 18px rgba(11, 46, 89, 0.045);
}

    .fo-btn-outline:hover {
        background: #FFF2E1;
        box-shadow: 0 12px 25px rgba(242, 140, 40, 0.13);
    }


/* =========================================================
   08. STATISTICS
========================================================= */

.fo-stats {
    display: flex;
    align-items: stretch;
    gap: 20px;
    margin-top: 38px;
}

.fo-stat {
    flex: 1;
    min-width: 0;
}

.fo-stat-number {
    display: flex;
    align-items: baseline;
    gap: 2px;
    color: var(--fo-orange);
    font-family: var(--fo-heading);
    font-size: clamp(26px, 2.6vw, 36px);
    font-weight: 800;
    line-height: 1.2;
}

    .fo-stat-number > span:last-child {
        font-size: 0.8em;
    }

.fo-stat p {
    margin: 6px 0 0;
    color: var(--fo-muted);
    font-size: 14px;
    line-height: 1.6;
}

.fo-stat-divider {
    width: 1px;
    align-self: stretch;
    flex-shrink: 0;
    background: linear-gradient( to bottom, transparent, var(--fo-orange), transparent );
    opacity: 0.65;
}

.fo-stats-note {
    margin: 12px 0 0;
    color: #8491A2;
    font-size: 14px;
    line-height: 1.7;
}

    .fo-stats-note i {
        margin-right: 4px;
        color: var(--fo-orange);
    }


/* =========================================================
   09. RIGHT VISUAL
========================================================= */

.fo-visual {
    --fo-rotate-x: 0deg;
    --fo-rotate-y: 0deg;
    position: relative;
    width: 100%;
    min-width: 0;
    min-height: 650px;
    isolation: isolate;
    transform-style: preserve-3d;
    transform: perspective(1400px) rotateX(var(--fo-rotate-x)) rotateY(var(--fo-rotate-y));
    transition: transform 0.18s ease-out;
    will-change: transform;
}

.fo-visual-backdrop {
    position: absolute;
    z-index: -3;
    top: 10%;
    right: -7%;
    width: 100%;
    height: 78%;
    border-radius: 48% 52% 43% 57% / 43% 40% 60% 57%;
    background: radial-gradient( ellipse at 55% 45%, rgba(255, 210, 151, 0.44), rgba(255, 246, 232, 0.35) 48%, rgba(214, 232, 250, 0.38) 75%, transparent 100% );
    filter: blur(2px);
    animation: foBackdropFloat 8s ease-in-out infinite alternate;
}

@keyframes foBackdropFloat {
    from {
        transform: translate3d(0, 0, -20px) scale(0.98);
    }

    to {
        transform: translate3d(-10px, -15px, 0) scale(1.04);
    }
}


/* =========================================================
   10. MAIN OFFICE IMAGE
========================================================= */

.fo-image-card {
    position: absolute;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.85);
    background: #EAF2FA;
    transform-style: preserve-3d;
    backface-visibility: hidden;
}

.fo-office-image {
    top: 7%;
    left: 8%;
    width: 79%;
    height: 61%;
    border-radius: 34px;
    box-shadow: 0 32px 70px rgba(11, 46, 89, 0.20), 0 10px 24px rgba(11, 46, 89, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9);
    transform: translateZ(15px) rotateY(-5deg) rotateX(2deg);
    animation: foOfficeEntrance 1.15s cubic-bezier(.2, .8, .2, 1) both, foOfficeFloat 7s ease-in-out 1.2s infinite;
}

    .fo-office-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 1s cubic-bezier(.2, .8, .2, 1), filter 0.8s ease;
        filter: saturate(0.92);
    }

    .fo-office-image:hover img {
        transform: scale(1.09);
        filter: saturate(1.12);
    }

.fo-image-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient( 180deg, rgba(6, 29, 58, 0.03), transparent 45%, rgba(6, 29, 58, 0.30) );
}

@keyframes foOfficeEntrance {
    from {
        opacity: 0;
        transform: translate3d(65px, 35px, -70px) rotateY(-13deg) rotateX(7deg) scale(0.92);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 15px) rotateY(-5deg) rotateX(2deg) scale(1);
    }
}

@keyframes foOfficeFloat {
    0%, 100% {
        translate: 0 0;
    }

    50% {
        translate: 0 -9px;
    }
}


/* =========================================================
   11. IMAGE LABEL
========================================================= */

.fo-image-label {
    position: absolute;
    left: 17px;
    bottom: 17px;
    max-width: calc(100% - 34px);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 17px;
    border: 1px solid rgba(255, 255, 255, 0.85);
    border-radius: 17px;
    background: rgba(255, 255, 255, 0.91);
    box-shadow: 0 12px 35px rgba(11, 46, 89, 0.13);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    transform: translateZ(45px);
}

.fo-label-icon {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #FFFFFF;
    border-radius: 14px;
    background: linear-gradient( 145deg, var(--fo-orange), #E77815 );
    box-shadow: 0 7px 16px rgba(242, 140, 40, 0.24);
}

    .fo-label-icon i {
        font-size: 16px;
    }

.fo-image-label > span:last-child {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.fo-image-label strong {
    color: var(--fo-navy);
    font-size: 12px;
    font-weight: 800;
}

.fo-image-label small {
    color: var(--fo-muted);
    font-size: 12px;
    line-height: 1.5;
}


/* =========================================================
   12. SECONDARY CITY IMAGE
========================================================= */

.fo-city-image {
    z-index: 3;
    right: 0;
    bottom: 14%;
    width: 43%;
    height: 32%;
    border: 5px solid #FFFFFF;
    border-radius: 26px;
    box-shadow: 0 28px 55px rgba(11, 46, 89, 0.21), 0 8px 18px rgba(11, 46, 89, 0.08);
    transform: translateZ(95px) rotateY(7deg) rotateX(-3deg);
    animation: foCityEntrance 1.1s cubic-bezier(.2, .8, .2, 1) 0.25s both, foCityFloat 6s ease-in-out 1.4s infinite;
}

    .fo-city-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 1s ease, filter 0.7s ease;
    }

    .fo-city-image:hover img {
        transform: scale(1.12);
        filter: saturate(1.1);
    }

@keyframes foCityEntrance {
    from {
        opacity: 0;
        transform: translate3d(45px, 45px, 0) rotateY(17deg) rotateX(7deg) scale(0.85);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 95px) rotateY(7deg) rotateX(-3deg) scale(1);
    }
}

@keyframes foCityFloat {
    0%, 100% {
        translate: 0 0;
    }

    50% {
        translate: 0 10px;
    }
}


/* =========================================================
   13. CITY IMAGE CAPTION
========================================================= */

.fo-city-caption {
    position: absolute;
    left: 9px;
    right: 9px;
    bottom: 9px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 12px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 8px 22px rgba(11, 46, 89, 0.13);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.fo-city-caption-icon {
    width: 33px;
    height: 33px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--fo-navy);
    border-radius: 11px;
    background: #FFF0D9;
}

    .fo-city-caption-icon i {
        font-size: 12px;
    }

.fo-city-caption > span:last-child {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.fo-city-caption strong {
    color: var(--fo-navy);
    font-size: 12px;
    font-weight: 800;
}

.fo-city-caption small {
    color: var(--fo-muted);
    font-size: 12px;
    line-height: 1.5;
}


/* =========================================================
   14. CENTRAL BUBNA HUB
========================================================= */

.fo-hub-wrap {
    position: absolute;
    z-index: 5;
    top: 19%;
    left: 35%;
    width: 39%;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transform-style: preserve-3d;
    animation: foHubEntrance 1.1s cubic-bezier(.2, .8, .2, 1) 0.15s both;
}

@keyframes foHubEntrance {
    from {
        opacity: 0;
        transform: translate3d(-20px, 30px, 0) scale(0.72);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
}

.fo-hub-aura {
    position: absolute;
    inset: -18%;
    border-radius: 50%;
    background: radial-gradient( circle, rgba(255, 255, 255, 0.95) 0%, rgba(255, 224, 173, 0.47) 35%, rgba(242, 140, 40, 0.08) 65%, transparent 73% );
    filter: blur(7px);
    animation: foHubAura 4s ease-in-out infinite alternate;
}

@keyframes foHubAura {
    from {
        transform: scale(0.93);
        opacity: 0.65;
    }

    to {
        transform: scale(1.08);
        opacity: 1;
    }
}

.fo-hub-ring {
    position: absolute;
    inset: -7%;
    border: 1px solid rgba(242, 140, 40, 0.7);
    border-radius: 50%;
    pointer-events: none;
}

.fo-hub-ring-one {
    border-top-color: rgba(242, 140, 40, 0.95);
    border-right-color: transparent;
    animation: foRingRotate 8s linear infinite;
}

.fo-hub-ring-two {
    inset: -13%;
    border-color: rgba(242, 140, 40, 0.24);
    border-bottom-color: var(--fo-orange);
    animation: foRingRotateReverse 12s linear infinite;
}

@keyframes foRingRotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes foRingRotateReverse {
    from {
        transform: rotate(360deg);
    }

    to {
        transform: rotate(0deg);
    }
}

.fo-hub {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 15px;
    text-align: center;
    border: 5px solid rgba(255, 255, 255, 0.95);
    border-radius: 50%;
    background: radial-gradient( circle at 35% 22%, #FFFFFF 0%, #FFFDF8 43%, #FFE5BF 100% );
    box-shadow: 0 0 0 2px rgba(242, 140, 40, 0.55), 0 0 0 9px rgba(242, 140, 40, 0.10), 0 22px 45px rgba(11, 46, 89, 0.19), inset 0 3px 12px rgba(255, 255, 255, 0.95), inset 0 -10px 20px rgba(242, 140, 40, 0.12);
    transform: translateZ(75px);
    animation: foHubFloat 5s ease-in-out infinite;
}

@keyframes foHubFloat {
    0%, 100% {
        translate: 0 0;
    }

    50% {
        translate: 0 -8px;
    }
}


/* =========================================================
   15. HUB LOGO
========================================================= */

.fo-hub-logo {
    position: relative;
    width: 63px;
    height: 68px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 5px;
    transform-style: preserve-3d;
}

.fo-logo-b {
    position: relative;
    z-index: 2;
    color: var(--fo-navy);
    font-family: var(--fo-heading);
    font-size: 70px;
    font-weight: 900;
    line-height: 1;
    text-shadow: 2px 3px 0 rgba(11, 46, 89, 0.10);
}

.fo-logo-orange {
    position: absolute;
    z-index: 3;
    top: 8px;
    left: 6px;
    width: 24px;
    height: 9px;
    border-radius: 2px;
    background: linear-gradient( 90deg, var(--fo-orange), #FFB451 );
    transform: translateZ(12px) skewX(-25deg);
}

.fo-hub-kicker {
    margin-top: 3px;
    color: var(--fo-orange);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1.5px;
}

.fo-hub h3 {
    margin: 6px 0 0;
    color: var(--fo-navy);
    font-family: var(--fo-font);
    font-size: clamp(12px, 1.3vw, 19px);
    font-weight: 900;
    letter-spacing: -0.5px;
    line-height: 1.3;
}

.fo-hub p {
    max-width: 175px;
    margin: 5px 0 0;
    color: #536983;
    font-size: clamp(8px, 1.8vw, 11px);
    line-height: 1.55;
}

.fo-hub-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 9px;
    padding: 5px 8px;
    border: 1px solid rgba(242, 140, 40, 0.20);
    border-radius: 50px;
    color: var(--fo-navy);
    background: rgba(255, 255, 255, 0.72);
    font-size: 7px;
    font-weight: 800;
    white-space: nowrap;
}

    .fo-hub-status > span {
        width: 5px;
        height: 5px;
        flex-shrink: 0;
        border-radius: 50%;
        background: #2EAC69;
        box-shadow: 0 0 0 3px rgba(46, 172, 105, 0.12);
        animation: foStatusPulse 1.8s ease-in-out infinite;
    }

@keyframes foStatusPulse {
    0%, 100% {
        box-shadow: 0 0 0 3px rgba(46, 172, 105, 0.12);
    }

    50% {
        box-shadow: 0 0 0 6px rgba(46, 172, 105, 0.07);
    }
}


/* =========================================================
   16. PARTNER FLOATING CARDS
========================================================= */

.fo-partner-card {
    position: absolute;
    z-index: 7;
    width: 245px;
    max-width: 53%;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.94);
    border-radius: 19px;
    background: linear-gradient( 135deg, rgba(255, 255, 255, 0.98), rgba(255, 249, 239, 0.96) );
    box-shadow: 0 22px 48px rgba(11, 46, 89, 0.15), 0 5px 12px rgba(11, 46, 89, 0.05), inset 0 1px 0 #FFFFFF;
    transform-style: preserve-3d;
    transition: transform 0.25s ease, box-shadow 0.35s ease, border-color 0.35s ease;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    will-change: transform;
}

    .fo-partner-card:hover {
        border-color: rgba(242, 140, 40, 0.7);
        box-shadow: 0 30px 60px rgba(11, 46, 89, 0.20), 0 0 0 1px rgba(242, 140, 40, 0.12);
        z-index: 9;
    }

.fo-partner-turrant {
    top: 5%;
    right: 0;
    animation: foPartnerEntrance 0.95s cubic-bezier(.2, .8, .2, 1) 0.45s both, foPartnerFloat 5s ease-in-out 1.4s infinite;
}

.fo-partner-kredsetu {
    right: 53%;
    bottom: 14%;
    animation: foPartnerEntrance 0.95s cubic-bezier(.2, .8, .2, 1) 0.65s both, foPartnerFloat 6s ease-in-out 1.6s infinite;
}

@keyframes foPartnerEntrance {
    from {
        opacity: 0;
        transform: translate3d(45px, 20px, 0) rotateY(-14deg) scale(0.88);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0) rotateY(0) scale(1);
    }
}

@keyframes foPartnerFloat {
    0%, 100% {
        translate: 0 0;
    }

    50% {
        translate: 0 -8px;
    }
}

.fo-partner-logo {
    position: relative;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 15px;
    color: #FFFFFF;
    font-family: var(--fo-heading);
    font-size: 28px;
    font-weight: 900;
    box-shadow: 0 8px 18px rgba(11, 46, 89, 0.15);
    transform: translateZ(25px);
}

.fo-turrant-logo {
    background: linear-gradient( 145deg, #1A4C80, #082342 );
}

    .fo-turrant-logo::before {
        content: "";
        position: absolute;
        top: 12px;
        left: 13px;
        width: 23px;
        height: 5px;
        border-radius: 2px;
        background: var(--fo-orange);
        transform: skewX(-28deg);
    }

.fo-kredsetu-logo {
    color: #FFFFFF;
    background: linear-gradient( 145deg, #43A875, #16724E );
}

.fo-partner-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

    .fo-partner-info > strong {
        color: var(--fo-navy);
        font-size: 14px;
        font-weight: 900;
    }

    .fo-partner-info > small {
        color: var(--fo-muted);
        font-size: 12px;
        line-height: 1.6;
    }

.fo-partner-link {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 3px;
    color: #C76D12;
    font-size: 12px;
    font-weight: 800;
}

    .fo-partner-link i {
        transition: transform 0.3s ease;
    }

.fo-partner-card:hover .fo-partner-link i {
    transform: translateX(4px);
}


/* =========================================================
   17. FLOATING TRUST BADGE
========================================================= */

.fo-trust-badge {
    position: absolute;
    z-index: 8;
    top: 21%;
    left: -1%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 15px;
    border: 1px solid rgba(255, 255, 255, 0.92);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 15px 32px rgba(11, 46, 89, 0.12);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    animation: foTrustFloat 5s ease-in-out infinite;
}

.fo-trust-icon {
    width: 37px;
    height: 37px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 12px;
    color: #FFFFFF;
    background: linear-gradient( 145deg, var(--fo-navy-light), var(--fo-navy-dark) );
}

    .fo-trust-icon i {
        font-size: 14px;
    }

.fo-trust-badge > span:last-child {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.fo-trust-badge strong {
    color: var(--fo-navy);
    font-size: 12px;
    font-weight: 900;
}

.fo-trust-badge small {
    color: var(--fo-muted);
    font-size: 12px;
}

@keyframes foTrustFloat {
    0%, 100% {
        transform: translate3d(0, 0, 35px);
    }

    50% {
        transform: translate3d(0, -8px, 45px);
    }
}


/* =========================================================
   18. FLOATING ICONS
========================================================= */

.fo-floating-icon {
    position: absolute;
    z-index: 6;
    width: 49px;
    height: 49px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(242, 140, 40, 0.38);
    border-radius: 16px;
    color: var(--fo-navy);
    background: linear-gradient( 145deg, #FFFFFF, #FFF0D9 );
    box-shadow: 0 12px 25px rgba(11, 46, 89, 0.12), inset 0 1px 0 #FFFFFF;
    transform-style: preserve-3d;
}

    .fo-floating-icon i {
        font-size: 19px;
    }

.fo-floating-icon-one {
    top: 1%;
    left: 28%;
    animation: foFloatingIconOne 5s ease-in-out infinite;
}

.fo-floating-icon-two {
    top: 39%;
    right: 2%;
    animation: foFloatingIconTwo 6s ease-in-out infinite;
}

@keyframes foFloatingIconOne {
    0%, 100% {
        transform: translate3d(0, 0, 65px) rotateY(0deg) rotateZ(-5deg);
    }

    50% {
        transform: translate3d(0, -12px, 80px) rotateY(18deg) rotateZ(5deg);
    }
}

@keyframes foFloatingIconTwo {
    0%, 100% {
        transform: translate3d(0, 0, 50px) rotateY(0deg);
    }

    50% {
        transform: translate3d(0, 10px, 65px) rotateY(-20deg);
    }
}


/* =========================================================
   19. ORBIT RINGS
========================================================= */

.fo-orbit {
    position: absolute;
    z-index: -1;
    top: 17%;
    left: 13%;
    width: 72%;
    aspect-ratio: 1 / 1;
    border: 1px solid rgba(242, 140, 40, 0.35);
    border-radius: 50%;
    pointer-events: none;
}

.fo-orbit-outer {
    width: 85%;
    top: 12%;
    left: 7%;
    border-color: rgba(242, 140, 40, 0.20);
    transform: rotateX(64deg) rotateZ(-20deg);
    animation: foOrbitOuter 17s linear infinite;
}

.fo-orbit-middle {
    border-color: rgba(242, 140, 40, 0.45);
    transform: rotateX(65deg) rotateZ(20deg);
    animation: foOrbitMiddle 13s linear infinite;
}

.fo-orbit-inner {
    top: 23%;
    left: 20%;
    width: 58%;
    border-style: dashed;
    border-color: rgba(242, 140, 40, 0.26);
    transform: rotateX(66deg);
    animation: foOrbitInner 19s linear infinite;
}

@keyframes foOrbitOuter {
    from {
        transform: rotateX(64deg) rotateZ(0deg);
    }

    to {
        transform: rotateX(64deg) rotateZ(360deg);
    }
}

@keyframes foOrbitMiddle {
    from {
        transform: rotateX(65deg) rotateZ(360deg);
    }

    to {
        transform: rotateX(65deg) rotateZ(0deg);
    }
}

@keyframes foOrbitInner {
    from {
        transform: rotateX(66deg) rotateZ(0deg);
    }

    to {
        transform: rotateX(66deg) rotateZ(360deg);
    }
}


/* =========================================================
   20. ORBIT PARTICLES
========================================================= */

.fo-orbit-dot {
    position: absolute;
    z-index: 6;
    width: 13px;
    height: 13px;
    border: 2px solid rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    background: radial-gradient( circle at 35% 30%, #FFF6D9, #FFBD48 42%, #D97706 100% );
    box-shadow: 0 0 0 4px rgba(242, 140, 40, 0.11), 0 0 19px rgba(242, 140, 40, 0.38);
    animation: foParticlePulse 2.5s ease-in-out infinite alternate;
}

.fo-dot-one {
    top: 24%;
    left: 40%;
}

.fo-dot-two {
    top: 54%;
    right: 19%;
    width: 17px;
    height: 17px;
    animation-delay: -0.7s;
}

.fo-dot-three {
    bottom: 17%;
    left: 24%;
    width: 10px;
    height: 10px;
    animation-delay: -1.3s;
}

.fo-dot-four {
    top: 45%;
    left: 11%;
    animation-delay: -1.8s;
}

@keyframes foParticlePulse {
    from {
        transform: translate3d(0, 0, 20px) scale(0.85);
        opacity: 0.7;
    }

    to {
        transform: translate3d(0, -8px, 45px) scale(1.15);
        opacity: 1;
    }
}


/* =========================================================
   21. VISUAL CAPTION
========================================================= */

.fo-visual-caption {
    position: absolute;
    z-index: 3;
    left: 12%;
    bottom: 1%;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--fo-navy);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 1.5px;
}

.fo-caption-line {
    width: 35px;
    height: 2px;
    flex-shrink: 0;
    background: linear-gradient( 90deg, var(--fo-orange), transparent );
}


/* =========================================================
   22. PARTNER STRIP
========================================================= */

.fo-partners {
    position: relative;
    z-index: 5;
    margin-top: 15px;
    padding: 30px 4%;
    border-top: 1px solid rgba(11, 46, 89, 0.08);
    background: linear-gradient( 110deg, rgba(255, 255, 255, 0.92), rgba(242, 247, 253, 0.92) );
}

.fo-partners-inner {
    max-width: 1440px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
}

.fo-partners-heading {
    max-width: 320px;
}

    .fo-partners-heading > span {
        color: var(--fo-orange);
        font-size: 12px;
        font-weight: 900;
        letter-spacing: 1.8px;
    }

    .fo-partners-heading p {
        margin: 8px 0 0;
        color: var(--fo-navy);
        font-size: 14px;
        line-height: 1.8;
    }

.fo-partner-mini {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 12px 17px;
    border: 1px solid rgba(11, 46, 89, 0.07);
    border-radius: 16px;
    background: #FFFFFF;
    box-shadow: 0 7px 20px rgba(11, 46, 89, 0.045);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

    .fo-partner-mini:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 30px rgba(11, 46, 89, 0.10);
    }

    .fo-partner-mini > span:last-child {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .fo-partner-mini strong {
        color: var(--fo-navy);
        font-size: 14px;
        font-weight: 900;
    }

    .fo-partner-mini small {
        color: var(--fo-muted);
        font-size: 12px;
    }

.fo-mini-bubna,
.fo-mini-turrant,
.fo-mini-kredsetu {
    width: 43px;
    height: 43px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 13px;
    color: #FFFFFF;
    font-family: var(--fo-heading);
    font-size: 25px;
    font-weight: 900;
}

.fo-mini-bubna {
    background: linear-gradient( 145deg, #174776, #082342 );
}

.fo-mini-turrant {
    background: linear-gradient( 145deg, #1A4C80, #082342 );
}

.fo-mini-kredsetu {
    background: linear-gradient( 145deg, #43A875, #16724E );
}

.fo-partner-connector {
    color: var(--fo-orange);
    font-size: 14px;
    opacity: 0.8;
}


/* =========================================================
   23. SCROLL REVEAL
========================================================= */

.fo-section.fo-initialized .fo-reveal {
    opacity: 0;
    transform: translate3d(0, 28px, 0);
    transition: opacity 0.8s ease, transform 0.8s cubic-bezier(.2, .8, .2, 1);
}

    .fo-section.fo-initialized .fo-reveal.fo-visible {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }

.fo-content .fo-reveal:nth-child(2) {
    transition-delay: 0.08s;
}

.fo-content .fo-reveal:nth-child(3) {
    transition-delay: 0.13s;
}

.fo-content .fo-reveal:nth-child(4) {
    transition-delay: 0.18s;
}

.fo-content .fo-reveal:nth-child(5) {
    transition-delay: 0.23s;
}

.fo-content .fo-reveal:nth-child(6) {
    transition-delay: 0.28s;
}

.fo-content .fo-reveal:nth-child(7) {
    transition-delay: 0.33s;
}


/* =========================================================
   24. TABLET — 1200px
========================================================= */

@media (max-width: 1200px) {

    .fo-section {
        padding-top: 80px;
    }

    .fo-container {
        width: 94%;
        grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
        gap: 25px;
    }

    .fo-title {
        font-size: clamp(38px, 4.5vw, 56px);
    }

    .fo-visual {
        min-height: 570px;
    }

    .fo-office-image {
        width: 83%;
        height: 58%;
    }

    .fo-hub-wrap {
        top: 31%;
        left: 31%;
        width: 43%;
    }

    .fo-partner-card {
        width: 220px;
        padding: 11px;
        gap: 10px;
    }

    .fo-partner-logo {
        width: 44px;
        height: 44px;
    }

    .fo-partner-info > strong {
        font-size: 12px;
    }

    .fo-partner-info > small {
        font-size: 12px;
    }

    .fo-features {
        gap: 8px;
    }

    .fo-feature {
        gap: 7px;
    }

    .fo-feature-icon {
        width: 39px;
        height: 39px;
        border-radius: 13px;
    }

    .fo-feature strong {
        font-size: 10px;
    }

    .fo-feature small {
        font-size: 8px;
    }

    .fo-partners-inner {
        gap: 12px;
    }

    .fo-partner-mini {
        padding: 10px;
        gap: 9px;
    }

    .fo-partner-connector {
        font-size: 12px;
    }
}


/* =========================================================
   25. TABLET PORTRAIT — 950px
========================================================= */

@media (max-width: 950px) {

    .fo-section {
        padding-top: 65px;
    }

    .fo-container {
        grid-template-columns: 1fr;
        width: min(760px, 91%);
        gap: 30px;
    }

    .fo-content {
        max-width: 720px;
        margin: 0 auto;
        padding: 0;
    }

    .fo-title {
        max-width: 700px;
        font-size: clamp(43px, 7vw, 65px);
    }

    .fo-description {
        max-width: 650px;
        font-size: 14px;
    }

    .fo-features {
        max-width: 650px;
        gap: 18px;
    }

    .fo-feature-icon {
        width: 45px;
        height: 45px;
    }

    .fo-feature strong {
        font-size: 10px;
    }

    .fo-feature small {
        font-size: 10px;
    }

    .fo-visual {
        width: 100%;
        max-width: 700px;
        min-height: 630px;
        margin: 0 auto;
    }

    .fo-office-image {
        left: 7%;
        width: 80%;
        height: 60%;
    }

    .fo-hub-wrap {
        top: 30%;
        left: 33%;
        width: 40%;
    }

    .fo-city-image {
        width: 41%;
        height: 31%;
    }

    .fo-partner-turrant {
        top: 5%;
        right: 0;
    }

    .fo-partner-kredsetu {
        right: 0;
        bottom: 2%;
    }

    .fo-partners {
        margin-top: 45px;
    }

    .fo-partners-inner {
        justify-content: center;
        flex-wrap: wrap;
    }

    .fo-partners-heading {
        flex: 0 0 100%;
        max-width: 100%;
        text-align: center;
        margin-bottom: 8px;
    }

    .fo-partner-connector {
        display: none;
    }
}


/* =========================================================
   26. MOBILE — 600px
========================================================= */

@media (max-width: 600px) {

    .fo-section {
        padding-top: 53px;
    }

    .fo-container {
        width: 91%;
        gap: 12px;
    }

    .fo-eyebrow {
        gap: 8px;
        margin-bottom: 19px;
        font-size: 8px;
        letter-spacing: 1.3px;
    }

    .fo-eyebrow-icon {
        width: 31px;
        height: 31px;
        border-radius: 10px;
    }

    .fo-title {
        font-size: clamp(37px, 9.1vw, 53px);
        line-height: 1.09;
        letter-spacing: -1.3px;
    }

    .fo-title-highlight::after {
        height: 3px;
        bottom: -3px;
    }

    .fo-subtitle {
        margin-top: 16px;
        font-size: 18px;
    }

    .fo-description {
        margin-top: 12px;
        font-size: 12px;
        line-height: 1.85;
    }

    .fo-features {
        grid-template-columns: 1fr;
        gap: 11px;
        margin-top: 23px;
    }

    .fo-feature {
        gap: 11px;
    }

    .fo-feature-icon {
        width: 41px;
        height: 41px;
    }

    .fo-feature > span:last-child {
        gap: 2px;
    }

    .fo-feature strong {
        font-size: 10px;
    }

    .fo-feature small {
        font-size: 10px;
    }

    .fo-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
        margin-top: 25px;
    }

    .fo-btn {
        width: 100%;
        min-height: 49px;
        padding: 0 17px;
        font-size: 10px;
    }

    .fo-stats {
        gap: 12px;
        margin-top: 29px;
    }

    .fo-stat-number {
        font-size: clamp(22px, 6vw, 30px);
    }

    .fo-stat p {
        font-size: 8px;
    }

    .fo-stats-note {
        font-size: 8px;
    }

    .fo-visual {
        min-height: 440px;
        margin-top: 15px;
        overflow: visible;
    }

    .fo-office-image {
        top: 8%;
        left: 4%;
        width: 89%;
        height: 58%;
        border-radius: 23px;
        animation: foOfficeFloat 7s ease-in-out infinite;
    }

        .fo-office-image img {
            object-position: center;
        }

    .fo-image-label {
        left: 9px;
        bottom: 9px;
        gap: 8px;
        padding: 8px 10px;
        border-radius: 12px;
    }

    .fo-label-icon {
        width: 32px;
        height: 32px;
        border-radius: 10px;
    }

    .fo-image-label strong {
        font-size: 10px;
    }

    .fo-image-label small {
        font-size: 10px;
    }

    .fo-city-image {
        right: 0;
        bottom: 9%;
        width: 46%;
        height: 28%;
        border-width: 3px;
        border-radius: 18px;
        animation: foCityFloat 6s ease-in-out infinite;
    }

    .fo-city-caption {
        left: 5px;
        right: 5px;
        bottom: 5px;
        gap: 5px;
        padding: 7px;
        border-radius: 9px;
    }

    .fo-city-caption-icon {
        width: 25px;
        height: 25px;
        border-radius: 8px;
    }

        .fo-city-caption-icon i {
            font-size: 10px;
        }

    .fo-city-caption strong {
        font-size: 7px;
    }

    .fo-city-caption small {
        font-size: 6px;
    }

    .fo-hub-wrap {
        top: 17%;
        left: 44%;
        width: 48%;
    }

    .fo-hub {
        padding: 9px;
        border-width: 3px;
    }

    .fo-hub-logo {
        width: 46px;
        height: 48px;
        margin-bottom: 1px;
    }

    .fo-logo-b {
        font-size: 51px;
    }

    .fo-logo-orange {
        top: 6px;
        left: 4px;
        width: 18px;
        height: 6px;
    }

    .fo-hub-kicker {
        font-size: 5px;
        letter-spacing: 1px;
    }

    .fo-hub h3 {
        font-size: 12px;
    }

    .fo-hub p {
        font-size: 7px;
    }

    .fo-hub-status {
        margin-top: 6px;
        padding: 4px 6px;
        gap: 4px;
        font-size: 5px;
    }

        .fo-hub-status > span {
            width: 4px;
            height: 4px;
        }

    .fo-hub-ring {
        border-width: 1px;
    }

    .fo-partner-card {
        width: 184px;
        max-width: 59%;
        gap: 8px;
        padding: 9px;
        border-radius: 14px;
    }

    .fo-partner-turrant {
        top: 2%;
        right: -1%;
    }

    .fo-partner-kredsetu {
        right: 48%;
        bottom: 69px;
    }

    .fo-partner-logo {
        width: 35px;
        height: 35px;
        border-radius: 11px;
        font-size: 21px;
    }

    .fo-turrant-logo::before {
        top: 8px;
        left: 9px;
        width: 17px;
        height: 4px;
    }

    .fo-partner-info {
        gap: 3px;
    }

        .fo-partner-info > strong {
            font-size: 10px;
        }

        .fo-partner-info > small {
            font-size: 7px;
        }

    .fo-partner-link {
        font-size: 7px;
    }

    .fo-trust-badge {
        top: 18%;
        left: -1%;
        gap: 7px;
        padding: 8px;
        border-radius: 12px;
    }

    .fo-trust-icon {
        width: 29px;
        height: 29px;
        border-radius: 9px;
    }

        .fo-trust-icon i {
            font-size: 12px;
        }

    .fo-trust-badge strong {
        font-size: 12px;
    }

    .fo-trust-badge small {
        font-size: 7px;
    }

    .fo-floating-icon {
        width: 34px;
        height: 34px;
        border-radius: 11px;
    }

        .fo-floating-icon i {
            font-size: 12px;
        }

    .fo-floating-icon-one {
        top: 0;
        left: 26%;
    }

    .fo-floating-icon-two {
        top: 40%;
        right: 0;
    }

    .fo-orbit-outer {
        width: 95%;
        top: 10%;
        left: 1%;
    }

    .fo-orbit-middle {
        width: 80%;
        top: 17%;
        left: 8%;
    }

    .fo-orbit-inner {
        width: 65%;
        top: 23%;
        left: 15%;
    }

    .fo-dot-one {
        top: 24%;
        left: 38%;
    }

    .fo-dot-two {
        top: 53%;
        right: 16%;
    }

    .fo-dot-three {
        bottom: 16%;
        left: 18%;
    }

    .fo-dot-four {
        top: 44%;
        left: 4%;
    }

    .fo-visual-caption {
        left: 4%;
        bottom: -2%;
        gap: 7px;
        font-size: 6px;
        letter-spacing: 1px;
    }

    .fo-caption-line {
        width: 23px;
    }

    .fo-partners {
        margin-top: 45px;
        padding: 30px 5%;
    }

    .fo-partners-inner {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .fo-partners-heading {
        margin-bottom: 7px;
    }

        .fo-partners-heading p {
            font-size: 10px;
        }

    .fo-partner-mini {
        width: 100%;
        padding: 12px;
    }

        .fo-partner-mini strong {
            font-size: 10px;
        }

        .fo-partner-mini small {
            font-size: 10px;
        }
}


/* =========================================================
   27. EXTRA SMALL MOBILE
========================================================= */

@media (max-width: 370px) {

    .fo-title {
        font-size: 35px;
    }

    .fo-visual {
        min-height: 385px;
    }

    .fo-partner-card {
        width: 165px;
        padding: 7px;
        gap: 6px;
    }

    .fo-partner-logo {
        width: 30px;
        height: 30px;
        font-size: 18px;
    }

    .fo-partner-info > strong {
        font-size: 10px;
    }

    .fo-partner-info > small {
        font-size: 6px;
    }

    .fo-partner-link {
        font-size: 6px;
    }

    .fo-hub-wrap {
        top: 31%;
        left: 20%;
        width: 49%;
    }

    .fo-hub h3 {
        font-size: 10px;
    }

    .fo-hub p {
        font-size: 6px;
    }

    .fo-hub-status {
        font-size: 4px;
    }

    .fo-image-label {
        padding: 7px;
    }

        .fo-image-label strong {
            font-size: 10px;
        }

        .fo-image-label small {
            font-size: 7px;
        }
}


/* =========================================================
   28. ACCESSIBILITY
========================================================= */

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

    .fo-section *,
    .fo-section *::before,
    .fo-section *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }

    .fo-section.fo-initialized .fo-reveal {
        opacity: 1;
        transform: none;
    }

    .fo-visual {
        transform: none !important;
    }
}


/* =========================================================
   29. TOUCH DEVICES
========================================================= */

@media (hover: none) {

    .fo-office-image:hover img,
    .fo-city-image:hover img {
        transform: none;
    }

    .fo-partner-card:hover {
        box-shadow: 0 22px 48px rgba(11, 46, 89, 0.15);
    }
}


/* =========================================================
   30. JAVASCRIPT CONTROLLED PARALLAX
========================================================= */

.fo-office-image {
    translate: var(--fo-image-x, 0px) var(--fo-image-y, 0px) 0;
}

.fo-city-image {
    translate: var(--fo-image-x, 0px) var(--fo-image-y, 0px) 0;
}

.fo-trust-badge {
    translate: var(--fo-badge-x, 0px) var(--fo-badge-y, 0px) 0;
}

.fo-floating-icon-one {
    margin-left: var(--fo-float-x, 0px);
    margin-top: var(--fo-float-y, 0px);
}

.fo-floating-icon-two {
    margin-left: var(--fo-float-x, 0px);
    margin-top: var(--fo-float-y, 0px);
}












/* =====================================================
   BUBNA FINANCE
   FINANCIAL SOLUTIONS SECTION
   Navy + Saffron + Amber
===================================================== */


/* =====================================================
   01. ROOT VARIABLES
===================================================== */

:root {
    --bf-navy: #0B2E59;
    --bf-navy-dark: #061D3A;
    --bf-navy-deep: #04152B;
    --bf-saffron: #F28C28;
    --bf-amber: #F5A623;
    --bf-gold-light: #FFD58A;
    --bf-white: #FFFFFF;
    --bf-text-light: #E8EFF8;
    --bf-text-muted: #AFC2DA;
    --bf-border: rgba(242, 140, 40, 0.28);
    --bf-font: 'Inter', 'Nunito', sans-serif;
}


/* =====================================================
   02. MAIN SECTION
===================================================== */

.bf-solutions {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 33px 5% 40px;
    color: var(--bf-white);
    background: radial-gradient( ellipse at 8% 12%, rgba(20, 75, 133, 0.45), transparent 35% ), radial-gradient( ellipse at 95% 80%, rgba(242, 140, 40, 0.10), transparent 34% ), linear-gradient( 135deg, var(--bf-navy-deep), var(--bf-navy-dark) 48%, #09274B );
    font-family: var(--bf-font);
}


    .bf-solutions *,
    .bf-solutions *::before,
    .bf-solutions *::after {
        box-sizing: border-box;
    }


    .bf-solutions a {
        color: inherit;
        text-decoration: none;
    }


.bf-solutions-container {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 1450px;
    margin: 0 auto;
}


/* =====================================================
   03. ANIMATED BACKGROUND GLOWS
===================================================== */

.bf-solutions-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    perspective: 1000px;
}


.bf-bg-glow {
    position: absolute;
    width: 440px;
    height: 440px;
    border-radius: 50%;
    filter: blur(90px);
    opacity: 0.20;
    will-change: transform;
}


.bf-glow-one {
    top: -170px;
    left: -140px;
    background: #1762A9;
    animation: bfGlowFloatOne 13s ease-in-out infinite alternate;
}


.bf-glow-two {
    right: -160px;
    top: 25%;
    background: #F28C28;
    opacity: 0.12;
    animation: bfGlowFloatTwo 15s ease-in-out infinite alternate;
}


.bf-glow-three {
    bottom: -250px;
    left: 35%;
    width: 520px;
    height: 350px;
    background: #164A7C;
    animation: bfGlowFloatThree 17s ease-in-out infinite alternate;
}


@keyframes bfGlowFloatOne {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    100% {
        transform: translate3d(130px, 100px, 0) scale(1.25);
    }
}


@keyframes bfGlowFloatTwo {
    0% {
        transform: translate3d(0, 0, 0) scale(0.9);
    }

    100% {
        transform: translate3d(-120px, 100px, 0) scale(1.2);
    }
}


@keyframes bfGlowFloatThree {
    0% {
        transform: translate3d(0, 0, 0);
    }

    100% {
        transform: translate3d(80px, -90px, 0);
    }
}


/* =====================================================
   04. 3D PERSPECTIVE GRID
===================================================== */

.bf-perspective-grid {
    position: absolute;
    left: -20%;
    right: -20%;
    bottom: -35%;
    height: 75%;
    background-image: linear-gradient( rgba(242, 140, 40, 0.15) 1px, transparent 1px ), linear-gradient( 90deg, rgba(242, 140, 40, 0.15) 1px, transparent 1px );
    background-size: 68px 68px;
    transform: perspective(500px) rotateX(63deg);
    transform-origin: center top;
    opacity: 0.30;
    -webkit-mask-image: linear-gradient( to bottom, transparent, black 18%, black 72%, transparent );
    mask-image: linear-gradient( to bottom, transparent, black 18%, black 72%, transparent );
    animation: bfGridMove 18s linear infinite;
}


@keyframes bfGridMove {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 0 136px;
    }
}


/* =====================================================
   05. ROTATING ORBITAL RINGS
===================================================== */

.bf-orbit {
    position: absolute;
    width: 460px;
    height: 460px;
    border: 1px solid rgba(242, 140, 40, 0.20);
    border-radius: 50%;
    transform-style: preserve-3d;
    pointer-events: none;
}


    .bf-orbit::before,
    .bf-orbit::after {
        content: "";
        position: absolute;
        inset: 25px;
        border: 1px dashed rgba(245, 166, 35, 0.20);
        border-radius: 50%;
    }


    .bf-orbit::after {
        inset: 70px;
        border-style: solid;
        border-color: rgba(255, 213, 138, 0.13);
    }


.bf-orbit-one {
    top: 5%;
    right: -100px;
    animation: bfOrbitRotate 30s linear infinite;
}


.bf-orbit-two {
    bottom: -220px;
    left: 5%;
    width: 360px;
    height: 360px;
    opacity: 0.55;
    animation: bfOrbitRotateReverse 35s linear infinite;
}


@keyframes bfOrbitRotate {
    from {
        transform: rotateX(60deg) rotateZ(0deg);
    }

    to {
        transform: rotateX(60deg) rotateZ(360deg);
    }
}


@keyframes bfOrbitRotateReverse {
    from {
        transform: rotateX(65deg) rotateZ(360deg);
    }

    to {
        transform: rotateX(65deg) rotateZ(0deg);
    }
}


/* =====================================================
   06. PARTICLES
===================================================== */

.bf-particles {
    position: absolute;
    inset: 0;
    overflow: hidden;
}


.bf-particle {
    position: absolute;
    width: var(--particle-size, 4px);
    height: var(--particle-size, 4px);
    left: var(--particle-left, 50%);
    bottom: -20px;
    border-radius: 50%;
    background: var(--bf-gold-light);
    box-shadow: 0 0 8px rgba(245, 166, 35, 0.7), 0 0 20px rgba(242, 140, 40, 0.25);
    opacity: 0;
    animation: bfParticleFloat var(--particle-duration, 12s) var(--particle-delay, 0s) linear infinite;
}


@keyframes bfParticleFloat {
    0% {
        transform: translate3d(0, 0, 0) scale(0.4);
        opacity: 0;
    }

    15% {
        opacity: 0.7;
    }

    80% {
        opacity: 0.5;
    }

    100% {
        transform: translate3d(var(--particle-drift, 30px), -900px, 0) scale(1.1);
        opacity: 0;
    }
}


/* =====================================================
   07. SECTION INTRO
===================================================== */

.bf-solutions-intro {
    max-width: 850px;
    margin: 0 auto 65px;
    text-align: center;
}


.bf-section-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 25px;
    color: var(--bf-gold-light);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2.5px;
}


.bf-label-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    border: 1px solid var(--bf-border);
    border-radius: 11px;
    color: var(--bf-saffron);
    background: rgba(242, 140, 40, 0.09);
    box-shadow: 0 0 20px rgba(242, 140, 40, 0.08), inset 0 0 12px rgba(242, 140, 40, 0.06);
}


.bf-label-line {
    width: 42px;
    height: 1px;
    background: linear-gradient( 90deg, var(--bf-saffron), transparent );
}


.bf-solutions-title {
    margin: 0;
    font-size: clamp(34px, 4.2vw, 58px);
    font-weight: 800;
    line-height: 1.18;
    letter-spacing: -1.8px;
    color: var(--bf-white);
}


.bf-title-highlight {
    display: block;
    margin-top: 7px;
    color: var(--bf-saffron);
    background: linear-gradient( 100deg, #F28C28, #FFD58A, #F5A623, #F28C28 );
    background-size: 220% auto;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: bfTitleShimmer 7s linear infinite;
}


@keyframes bfTitleShimmer {
    to {
        background-position: 220% center;
    }
}


.bf-solutions-description {
    max-width: 700px;
    margin: 22px auto 0;
    color: var(--bf-text-muted);
    font-size: 14px;
    line-height: 1.95;
}


/* =====================================================
   08. INTRO HIGHLIGHTS
===================================================== */

.bf-solutions-highlights {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    margin-top: 32px;
}


.bf-highlight-item {
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
}


.bf-highlight-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    color: var(--bf-gold-light);
    background: linear-gradient( 145deg, rgba(242, 140, 40, 0.20), rgba(242, 140, 40, 0.04) );
    border: 1px solid rgba(242, 140, 40, 0.30);
    border-radius: 14px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.13);
    transition: transform 0.4s ease, background 0.4s ease;
}


.bf-highlight-item:hover .bf-highlight-icon {
    transform: translateY(-5px) rotateY(20deg);
    background: rgba(242, 140, 40, 0.24);
}


.bf-highlight-item strong {
    display: block;
    color: var(--bf-white);
    font-size: 14px;
    font-weight: 800;
}


.bf-highlight-item small {
    display: block;
    margin-top: 5px;
    color: var(--bf-text-muted);
    font-size: 14px;
}


.bf-highlight-divider {
    width: 1px;
    height: 35px;
    background: linear-gradient( to bottom, transparent, rgba(242, 140, 40, 0.6), transparent );
}


/* =====================================================
   09. PRIMARY CTA
===================================================== */

.bf-solutions-cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    min-height: 55px;
    margin-top: 35px;
    padding: 0 12px 0 25px;
    overflow: hidden;
    border: 1px solid var(--bf-saffron);
    border-radius: 50px;
    color: var(--bf-white) !important;
    background: linear-gradient( 115deg, #124577, #0B2E59 );
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18), 0 0 25px rgba(242, 140, 40, 0.06);
    font-size: 14px;
    font-weight: 800;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}


    .bf-solutions-cta::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: -100%;
        width: 60%;
        background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.16), transparent );
        transform: skewX(-25deg);
        transition: left 0.7s ease;
    }


    .bf-solutions-cta:hover::before {
        left: 150%;
    }


    .bf-solutions-cta:hover {
        transform: translateY(-4px);
        box-shadow: 0 17px 35px rgba(0, 0, 0, 0.22), 0 0 25px rgba(242, 140, 40, 0.15);
    }


.bf-cta-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 33px;
    height: 33px;
    color: var(--bf-navy-dark);
    background: linear-gradient( 135deg, var(--bf-gold-light), var(--bf-saffron) );
    border-radius: 50%;
    transition: transform 0.35s ease;
}


.bf-solutions-cta:hover .bf-cta-arrow {
    transform: translateX(4px);
}


.bf-solutions-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-top: 19px;
    color: #91A9C5;
    font-size: 14px;
    line-height: 1.7;
}


.bf-note-dot {
    width: 7px;
    height: 7px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--bf-saffron);
    box-shadow: 0 0 12px rgba(242, 140, 40, 0.6);
}


/* =====================================================
   10. SERVICES GRID
===================================================== */

.bf-services-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    perspective: 1400px;
}


/* =====================================================
   11. SERVICE CARD - BASE
===================================================== */

.bf-service-card {
    --card-index: 0;
    position: relative;
    isolation: isolate;
    min-width: 0;
    padding: 30px 25px 25px;
    overflow: hidden;
    border: 1px solid rgba(160, 190, 220, 0.17);
    border-radius: 23px;
    background: linear-gradient( 145deg, rgba(18, 59, 101, 0.94), rgba(7, 32, 62, 0.97) );
    box-shadow: 0 22px 45px rgba(0, 0, 0, 0.17), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    transform-style: preserve-3d;
    transform: perspective(1000px) translateY(35px) rotateX(0deg);
    opacity: 0;
    transition: border-color 0.4s ease, box-shadow 0.4s ease, background 0.4s ease, transform 0.18s ease;
    will-change: transform;
}


/* Animated orange top line */

.bf-card-topline {
    position: absolute;
    top: 0;
    left: 15%;
    width: 70%;
    height: 2px;
    background: linear-gradient( 90deg, transparent, var(--bf-saffron), var(--bf-gold-light), transparent );
    opacity: 0.65;
    transition: width 0.4s ease, opacity 0.4s ease;
}


.bf-service-card::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -100px;
    right: -100px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient( circle, rgba(242, 140, 40, 0.12), transparent 70% );
    opacity: 0.7;
    transition: transform 0.6s ease, opacity 0.6s ease;
}


.bf-service-card::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient( 125deg, rgba(255, 255, 255, 0.06), transparent 35%, transparent 70%, rgba(242, 140, 40, 0.04) );
    pointer-events: none;
}


/* Scroll reveal */

.bf-service-card.bf-visible {
    opacity: 1;
    transform: perspective(1000px) translateY(0) rotateX(0deg);
    transition: opacity 0.7s ease, transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.4s ease, box-shadow 0.4s ease, background 0.4s ease;
}


.bf-service-card.bf-visible {
    transition-delay: 0s;
}


    .bf-service-card.bf-visible:nth-child(1) {
        transition-delay: 0.05s;
    }


    .bf-service-card.bf-visible:nth-child(2) {
        transition-delay: 0.17s;
    }


    .bf-service-card.bf-visible:nth-child(3) {
        transition-delay: 0.29s;
    }


    .bf-service-card.bf-visible:nth-child(4) {
        transition-delay: 0.41s;
    }


.bf-service-card:hover {
    border-color: rgba(242, 140, 40, 0.75);
    background: linear-gradient( 145deg, rgba(22, 68, 116, 0.98), rgba(7, 32, 62, 0.99) );
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.28), 0 0 35px rgba(242, 140, 40, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.10);
}


    .bf-service-card:hover .bf-card-topline {
        left: 5%;
        width: 90%;
        opacity: 1;
    }


    .bf-service-card:hover::before {
        transform: scale(1.5) translate(-20px, 20px);
        opacity: 1;
    }


/* Card number */

.bf-card-number {
    position: absolute;
    top: 23px;
    right: 24px;
    color: rgba(255, 255, 255, 0.35);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1px;
    transform: translateZ(20px);
    transition: color 0.3s ease;
}


.bf-service-card:hover .bf-card-number {
    color: var(--bf-gold-light);
}


/* =====================================================
   12. 3D ICON PLATFORM
===================================================== */

.bf-card-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 12px 0 29px;
    perspective: 700px;
}


.bf-icon-platform {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 115px;
    height: 115px;
    transform-style: preserve-3d;
    animation: bfIconFloat 5s ease-in-out infinite;
}


.bf-card-business .bf-icon-platform {
    animation-delay: -1.1s;
}


.bf-card-financial .bf-icon-platform {
    animation-delay: -2.2s;
}


.bf-card-assistance .bf-icon-platform {
    animation-delay: -3.3s;
}


@keyframes bfIconFloat {
    0%, 100% {
        transform: translateY(0) rotateX(0deg) rotateY(-5deg);
    }

    50% {
        transform: translateY(-9px) rotateX(8deg) rotateY(8deg);
    }
}


/* 3D platform */

.bf-icon-platform::before {
    content: "";
    position: absolute;
    width: 88px;
    height: 88px;
    border-radius: 25px;
    background: linear-gradient( 145deg, #174B7D, #082344 );
    border: 1px solid rgba(242, 140, 40, 0.40);
    box-shadow: 0 15px 0 -5px #051A33, 0 20px 28px rgba(0, 0, 0, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.16);
    transform: rotate(-8deg) translateZ(-8px);
    transition: transform 0.5s ease, box-shadow 0.5s ease;
}


.bf-service-card:hover .bf-icon-platform::before {
    transform: rotate(0deg) translateZ(-8px);
    box-shadow: 0 12px 0 -4px #051A33, 0 23px 35px rgba(0, 0, 0, 0.35), 0 0 25px rgba(242, 140, 40, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.20);
}


/* Orbital ring */

.bf-icon-ring {
    position: absolute;
    inset: 0;
    border: 1px solid rgba(245, 166, 35, 0.35);
    border-radius: 50%;
    transform: rotateX(60deg) rotateZ(0deg);
    transition: transform 0.6s ease;
}


    .bf-icon-ring::after {
        content: "";
        position: absolute;
        top: 0;
        left: 50%;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--bf-gold-light);
        box-shadow: 0 0 12px rgba(245, 166, 35, 0.7);
        transform: translateX(-50%);
    }


.bf-service-card:hover .bf-icon-ring {
    transform: rotateX(60deg) rotateZ(70deg);
}


/* Inner glow */

.bf-icon-glow {
    position: absolute;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: rgba(242, 140, 40, 0.15);
    filter: blur(22px);
    transform: translateZ(4px);
}


/* Main icon */

.bf-service-icon {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 74px;
    height: 74px;
    border-radius: 21px;
    color: var(--bf-gold-light);
    font-size: 31px;
    background: linear-gradient( 145deg, rgba(242, 140, 40, 0.19), rgba(242, 140, 40, 0.04) );
    border: 1px solid rgba(242, 140, 40, 0.25);
    text-shadow: 0 0 20px rgba(245, 166, 35, 0.22);
    transform: translateZ(22px);
    transition: transform 0.5s ease, color 0.4s ease, text-shadow 0.4s ease;
}


.bf-service-card:hover .bf-service-icon {
    transform: translateZ(40px) rotateY(-8deg);
    color: #FFFFFF;
    text-shadow: 0 0 25px rgba(245, 166, 35, 0.6);
}


/* Floating mini orbs */

.bf-icon-orb {
    position: absolute;
    z-index: 3;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: linear-gradient( 135deg, #FFE3AA, #F28C28 );
    box-shadow: 0 0 12px rgba(242, 140, 40, 0.65), inset 0 1px 2px rgba(255, 255, 255, 0.6);
}


.bf-orb-a {
    top: 13px;
    right: 2px;
    animation: bfMiniOrbOne 4s ease-in-out infinite;
}


.bf-orb-b {
    left: 4px;
    bottom: 17px;
    width: 8px;
    height: 8px;
    animation: bfMiniOrbTwo 5s ease-in-out infinite;
}


@keyframes bfMiniOrbOne {
    0%, 100% {
        transform: translate3d(0, 0, 10px);
    }

    50% {
        transform: translate3d(5px, -7px, 20px);
    }
}


@keyframes bfMiniOrbTwo {
    0%, 100% {
        transform: translate3d(0, 0, 10px);
    }

    50% {
        transform: translate3d(-5px, 5px, 20px);
    }
}


/* =====================================================
   13. CARD CONTENT
===================================================== */

.bf-card-content {
    position: relative;
    z-index: 2;
    transform: translateZ(12px);
}


.bf-card-category {
    display: block;
    margin-bottom: 12px;
    color: var(--bf-saffron);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.6px;
    line-height: 1.6;
}


.bf-card-content h3 {
    margin: 0 0 13px;
    color: var(--bf-white);
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -0.5px;
    line-height: 1.35;
    transition: color 0.3s ease;
}


.bf-service-card:hover .bf-card-content h3 {
    color: var(--bf-gold-light);
}


.bf-card-content p {
    min-height: 105px;
    margin: 0;
    color: #AFC2DA;
    font-size: 14px;
    line-height: 1.95;
}


/* =====================================================
   14. EXPLORE MORE LINK
===================================================== */

.bf-card-link {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 23px;
    padding-top: 19px;
    border-top: 1px solid rgba(255, 255, 255, 0.10);
    color: var(--bf-white) !important;
    font-size: 14px;
    font-weight: 800;
    transition: color 0.3s ease;
}


.bf-link-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1px solid rgba(242, 140, 40, 0.35);
    color: var(--bf-gold-light);
    background: rgba(242, 140, 40, 0.07);
    transition: transform 0.35s ease, background 0.35s ease, color 0.35s ease;
}


.bf-card-link:hover {
    color: var(--bf-gold-light) !important;
}


    .bf-card-link:hover .bf-link-arrow {
        transform: translateX(5px) rotate(-8deg);
        color: var(--bf-navy-dark);
        background: var(--bf-saffron);
        border-color: var(--bf-saffron);
    }


/* =====================================================
   15. CARD DECORATION
===================================================== */

.bf-card-decoration {
    position: absolute;
    right: -35px;
    bottom: -50px;
    width: 125px;
    height: 125px;
    border: 1px solid rgba(242, 140, 40, 0.09);
    border-radius: 50%;
    pointer-events: none;
    transition: transform 0.6s ease, border-color 0.6s ease;
}


    .bf-card-decoration::before,
    .bf-card-decoration::after {
        content: "";
        position: absolute;
        border: 1px solid rgba(242, 140, 40, 0.08);
        border-radius: 50%;
    }


    .bf-card-decoration::before {
        inset: 12px;
    }


    .bf-card-decoration::after {
        inset: 25px;
    }


.bf-service-card:hover .bf-card-decoration {
    transform: scale(1.35) rotate(35deg);
    border-color: rgba(242, 140, 40, 0.25);
}


/* =====================================================
   16. BOTTOM TRUST STRIP
===================================================== */

.bf-solutions-bottom {
    display: flex;
    align-items: center;
    gap: 22px;
    margin-top: 42px;
    padding: 25px 30px;
    border: 1px solid rgba(242, 140, 40, 0.22);
    border-radius: 20px;
    background: linear-gradient( 110deg, rgba(20, 62, 104, 0.75), rgba(8, 35, 68, 0.85) );
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}


.bf-bottom-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    flex-shrink: 0;
    color: var(--bf-gold-light);
    background: rgba(242, 140, 40, 0.12);
    border: 1px solid rgba(242, 140, 40, 0.30);
    border-radius: 16px;
    font-size: 22px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.13);
}


.bf-bottom-content {
    flex: 1;
    min-width: 0;
}


    .bf-bottom-content strong {
        display: block;
        margin-bottom: 6px;
        color: var(--bf-white);
        font-size: 16px;
        font-weight: 800;
    }


    .bf-bottom-content p {
        margin: 0;
        color: var(--bf-text-muted);
        font-size: 14px;
        line-height: 1.8;
    }


.bf-bottom-link {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    flex-shrink: 0;
    color: var(--bf-gold-light) !important;
    font-size: 14px;
    font-weight: 800;
    transition: color 0.3s ease, transform 0.3s ease;
}


    .bf-bottom-link:hover {
        color: var(--bf-saffron) !important;
        transform: translateX(4px);
    }


/* =====================================================
   17. SCROLL REVEAL
===================================================== */

.bf-reveal {
    opacity: 0;
    transform: translateY(35px);
    transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}


    .bf-reveal.bf-visible {
        opacity: 1;
        transform: translateY(0);
    }


/* =====================================================
   18. LARGE TABLETS
===================================================== */

@media (max-width: 1200px) {

    .bf-solutions {
        padding: 95px 4% 75px;
    }

    .bf-services-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px;
    }

    .bf-service-card {
        padding: 30px;
    }

    .bf-card-content p {
        min-height: 75px;
    }

    .bf-card-visual {
        margin-top: 10px;
        margin-bottom: 24px;
    }
}


/* =====================================================
   19. TABLET
===================================================== */

@media (max-width: 768px) {

    .bf-solutions {
        padding: 80px 5% 65px;
    }

    .bf-solutions-intro {
        margin-bottom: 45px;
    }

    .bf-section-label {
        font-size: 10px;
        letter-spacing: 1.7px;
    }

    .bf-solutions-title {
        font-size: clamp(32px, 6vw, 45px);
        letter-spacing: -1px;
    }

    .bf-solutions-description {
        font-size: 14px;
    }

    .bf-solutions-highlights {
        gap: 20px;
    }

    .bf-highlight-item {
        gap: 9px;
    }

    .bf-highlight-icon {
        width: 40px;
        height: 40px;
    }

    .bf-highlight-item strong {
        font-size: 10px;
    }

    .bf-highlight-item small {
        font-size: 10px;
    }

    .bf-services-grid {
        gap: 18px;
    }

    .bf-service-card {
        padding: 25px 22px 22px;
        border-radius: 20px;
    }

    .bf-icon-platform {
        width: 105px;
        height: 105px;
    }

    .bf-card-content h3 {
        font-size: 19px;
    }

    .bf-card-content p {
        font-size: 12px;
        min-height: 100px;
    }

    .bf-solutions-bottom {
        padding: 22px;
        gap: 16px;
    }
}


/* =====================================================
   20. MOBILE
===================================================== */

@media (max-width: 560px) {

    .bf-solutions {
        padding: 70px 18px 55px;
    }

    .bf-solutions-intro {
        margin-bottom: 38px;
    }

    .bf-section-label {
        gap: 8px;
        font-size: 10px;
        letter-spacing: 1.3px;
    }

    .bf-label-icon {
        width: 31px;
        height: 31px;
        border-radius: 9px;
    }

    .bf-label-line {
        width: 22px;
    }

    .bf-solutions-title {
        font-size: clamp(30px, 8vw, 39px);
        line-height: 1.22;
    }

    .bf-title-highlight {
        margin-top: 4px;
    }

    .bf-solutions-description {
        margin-top: 17px;
        font-size: 12px;
        line-height: 1.85;
    }

    .bf-solutions-highlights {
        flex-direction: column;
        align-items: stretch;
        gap: 17px;
        max-width: 280px;
        margin: 25px auto 0;
    }

    .bf-highlight-item {
        justify-content: flex-start;
    }

    .bf-highlight-divider {
        display: none;
    }

    .bf-solutions-cta {
        min-height: 51px;
        margin-top: 28px;
        padding-left: 20px;
        gap: 13px;
        font-size: 12px;
    }

    .bf-solutions-note {
        align-items: flex-start;
        text-align: left;
        font-size: 10px;
    }

    .bf-services-grid {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .bf-service-card {
        padding: 27px 25px 23px;
        border-radius: 22px;
    }

    .bf-card-visual {
        margin-bottom: 25px;
    }

    .bf-icon-platform {
        width: 112px;
        height: 112px;
    }

    .bf-card-content h3 {
        font-size: 21px;
    }

    .bf-card-content p {
        min-height: auto;
        font-size: 12px;
        line-height: 1.85;
    }

    .bf-card-link {
        margin-top: 22px;
    }

    .bf-solutions-bottom {
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 16px;
        margin-top: 30px;
        padding: 21px 18px;
        border-radius: 17px;
    }

    .bf-bottom-icon {
        width: 46px;
        height: 46px;
        font-size: 19px;
    }

    .bf-bottom-content {
        flex: 1 1 calc(100% - 65px);
    }

        .bf-bottom-content strong {
            font-size: 12px;
            line-height: 1.6;
        }

        .bf-bottom-content p {
            font-size: 10px;
        }

    .bf-bottom-link {
        margin-left: 62px;
        font-size: 10px;
    }

    .bf-orbit-one {
        right: -250px;
    }

    .bf-orbit-two {
        left: -150px;
    }

    .bf-perspective-grid {
        background-size: 48px 48px;
        bottom: -20%;
    }
}


/* =====================================================
   21. EXTRA SMALL DEVICES
===================================================== */

@media (max-width: 360px) {

    .bf-solutions {
        padding-left: 14px;
        padding-right: 14px;
    }

    .bf-section-label {
        letter-spacing: 0.8px;
    }

    .bf-solutions-title {
        font-size: 29px;
    }

    .bf-service-card {
        padding: 23px 19px 20px;
    }

    .bf-card-content h3 {
        font-size: 19px;
    }
}


/* =====================================================
   22. REDUCED MOTION ACCESSIBILITY
===================================================== */

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

    .bf-solutions *,
    .bf-solutions *::before,
    .bf-solutions *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }

    .bf-reveal,
    .bf-service-card {
        opacity: 1 !important;
        transform: none !important;
    }
}













/* =========================================
   WHY CHOOSE BUBNA FINANCE
   LIGHT 3D PREMIUM THEME
========================================= */

:root {
    --wf-navy: #0B2E59;
    --wf-navy-dark: #082344;
    --wf-navy-light: #174777;
    --wf-saffron: #F28C28;
    --wf-amber: #F5A623;
    --wf-white: #FFFFFF;
    --wf-bg: #F8FBFF;
    --wf-bg-blue: #EEF5FD;
    --wf-text: #16365C;
    --wf-muted: #71829A;
    --wf-border: rgba(11, 46, 89, 0.10);
    --wf-orange-border: rgba(242, 140, 40, 0.28);
    --wf-shadow: 0 18px 50px rgba(11, 46, 89, 0.09);
}


/* =========================================
   01. MAIN SECTION
========================================= */

.wf-why-section {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 110px 5% 105px;
    background: radial-gradient( ellipse at 0% 20%, rgba(245, 166, 35, 0.12), transparent 32% ), radial-gradient( ellipse at 100% 80%, rgba(64, 142, 220, 0.12), transparent 35% ), linear-gradient( 135deg, #FFFFFF 0%, #F8FBFF 50%, #FFF9F1 100% );
    perspective: 1400px;
}


/* =========================================
   02. ANIMATED BACKGROUND
========================================= */

.wf-bg-scene {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    perspective: 1000px;
}


/* Perspective Grid */

.wf-bg-grid {
    position: absolute;
    left: -15%;
    right: -15%;
    bottom: -35%;
    height: 75%;
    background-image: linear-gradient( rgba(11, 46, 89, 0.055) 1px, transparent 1px ), linear-gradient( 90deg, rgba(11, 46, 89, 0.055) 1px, transparent 1px );
    background-size: 55px 55px;
    transform: perspective(550px) rotateX(62deg);
    transform-origin: center top;
    mask-image: linear-gradient( to bottom, transparent, black 30%, black 80%, transparent );
    animation: wfGridMove 18s linear infinite;
}


@keyframes wfGridMove {

    from {
        background-position: 0 0;
    }

    to {
        background-position: 0 110px;
    }
}


/* Background Orbs */

.wf-bg-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(2px);
    transform-style: preserve-3d;
    will-change: transform;
}


.wf-orb-one {
    width: 380px;
    height: 380px;
    top: -170px;
    right: 4%;
    background: radial-gradient( circle at 35% 35%, rgba(255, 255, 255, 0.95), rgba(245, 166, 35, 0.10) 45%, rgba(242, 140, 40, 0.035) 70%, transparent 75% );
    border: 1px solid rgba(242, 140, 40, 0.13);
    box-shadow: inset -15px -20px 40px rgba(242, 140, 40, 0.06), 0 0 100px rgba(245, 166, 35, 0.06);
    animation: wfOrbFloatOne 12s ease-in-out infinite;
}


.wf-orb-two {
    width: 300px;
    height: 300px;
    left: -150px;
    top: 35%;
    background: radial-gradient( circle at 35% 35%, rgba(255, 255, 255, 0.95), rgba(85, 158, 224, 0.12) 50%, transparent 75% );
    border: 1px solid rgba(11, 46, 89, 0.09);
    animation: wfOrbFloatTwo 14s ease-in-out infinite;
}


.wf-orb-three {
    width: 220px;
    height: 220px;
    right: 25%;
    bottom: -120px;
    background: radial-gradient( circle, rgba(245, 166, 35, 0.13), transparent 70% );
    animation: wfOrbFloatThree 10s ease-in-out infinite;
}


@keyframes wfOrbFloatOne {

    0%, 100% {
        transform: translate3d(0, 0, 0) rotateX(0deg);
    }

    50% {
        transform: translate3d(-35px, 45px, 70px) rotateX(12deg);
    }
}


@keyframes wfOrbFloatTwo {

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

    50% {
        transform: translate3d(45px, -30px, 60px);
    }
}


@keyframes wfOrbFloatThree {

    0%, 100% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    50% {
        transform: translate3d(-35px, -45px, 50px) scale(1.15);
    }
}


/* Floating 3D Shapes */

.wf-floating-shape {
    position: absolute;
    transform-style: preserve-3d;
    will-change: transform;
}


.wf-shape-one {
    width: 60px;
    height: 60px;
    top: 16%;
    left: 46%;
    border: 1px solid rgba(242, 140, 40, 0.35);
    border-radius: 15px;
    background: linear-gradient( 145deg, rgba(255, 255, 255, 0.7), rgba(242, 140, 40, 0.08) );
    box-shadow: 12px 12px 25px rgba(11, 46, 89, 0.05), inset 1px 1px 0 rgba(255, 255, 255, 0.9);
    animation: wfShapeRotateOne 12s ease-in-out infinite;
}


.wf-shape-two {
    width: 38px;
    height: 38px;
    right: 8%;
    top: 58%;
    border: 1px solid rgba(11, 46, 89, 0.16);
    border-radius: 11px;
    background: linear-gradient( 145deg, rgba(255, 255, 255, 0.95), rgba(85, 158, 224, 0.15) );
    box-shadow: 8px 8px 20px rgba(11, 46, 89, 0.08);
    animation: wfShapeRotateTwo 10s ease-in-out infinite;
}


.wf-shape-three {
    width: 23px;
    height: 23px;
    left: 7%;
    bottom: 15%;
    border-radius: 7px;
    background: linear-gradient( 135deg, var(--wf-amber), var(--wf-saffron) );
    box-shadow: 0 10px 25px rgba(242, 140, 40, 0.25);
    animation: wfShapeRotateThree 8s ease-in-out infinite;
}


@keyframes wfShapeRotateOne {

    0%, 100% {
        transform: translateY(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    }

    50% {
        transform: translateY(-35px) rotateX(55deg) rotateY(40deg) rotateZ(30deg);
    }
}


@keyframes wfShapeRotateTwo {

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

    50% {
        transform: rotateX(60deg) rotateY(45deg) translateY(-25px);
    }
}


@keyframes wfShapeRotateThree {

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

    50% {
        transform: translateY(-25px) rotate(180deg);
    }
}


/* Floating Particles */

.wf-particle {
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--wf-saffron);
    box-shadow: 0 0 12px rgba(242, 140, 40, 0.55);
    animation: wfParticleFloat 7s ease-in-out infinite;
}


.wf-particle-one {
    left: 30%;
    top: 15%;
}


.wf-particle-two {
    left: 52%;
    top: 68%;
    animation-delay: -2s;
}


.wf-particle-three {
    right: 12%;
    top: 22%;
    animation-delay: -4s;
}


.wf-particle-four {
    left: 6%;
    top: 70%;
    animation-delay: -1s;
}


@keyframes wfParticleFloat {

    0%, 100% {
        transform: translate3d(0, 0, 0) scale(1);
        opacity: 0.45;
    }

    50% {
        transform: translate3d(15px, -30px, 35px) scale(1.5);
        opacity: 1;
    }
}


/* =========================================
   03. MAIN CONTAINER
========================================= */

.wf-why-container {
    position: relative;
    max-width: 1450px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
    gap: 75px;
    align-items: center;
}


/* =========================================
   04. LEFT CONTENT
========================================= */

.wf-why-left {
    position: relative;
    min-width: 0;
    transform-style: preserve-3d;
}


/* Section Label */

.wf-section-label {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 27px;
    color: var(--wf-navy);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
}


.wf-label-icon {
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--wf-saffron);
    background: linear-gradient( 145deg, #FFFFFF, #FFF0DC );
    border: 1px solid rgba(242, 140, 40, 0.25);
    border-radius: 11px;
    box-shadow: 0 5px 14px rgba(242, 140, 40, 0.09);
}


.wf-label-line {
    width: 35px;
    height: 2px;
    background: linear-gradient( 90deg, var(--wf-saffron), transparent );
}


/* Main Heading */

.wf-why-heading {
    max-width: 600px;
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(42px, 4.4vw, 65px);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -1.8px;
    color: var(--wf-navy);
}


.wf-heading-highlight {
    position: relative;
    display: inline-block;
    color: var(--wf-saffron);
    background: linear-gradient( 115deg, #E97A14 0%, #F5A623 50%, #D96A0B 100% );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}


    .wf-heading-highlight::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: -5px;
        height: 3px;
        border-radius: 10px;
        background: linear-gradient( 90deg, var(--wf-saffron), rgba(242, 140, 40, 0) );
        transform-origin: left;
        animation: wfHeadingUnderline 2.5s ease-in-out infinite alternate;
    }


@keyframes wfHeadingUnderline {

    from {
        transform: scaleX(0.55);
    }

    to {
        transform: scaleX(1);
    }
}


/* Description */

.wf-why-description {
    max-width: 490px;
    margin-top: 27px;
    color: var(--wf-muted);
    font-size: 14px;
    line-height: 1.95;
}


/* =========================================
   05. TRUST HIGHLIGHTS
========================================= */

.wf-trust-highlights {
    display: flex;
    flex-direction: column;
    gap: 13px;
    margin-top: 26px;
}


.wf-trust-item {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--wf-text);
    font-size: 14px;
    font-weight: 700;
    transition: transform 0.3s ease, color 0.3s ease;
}


    .wf-trust-item:hover {
        color: var(--wf-saffron);
        transform: translateX(5px);
    }


.wf-trust-check {
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #FFFFFF;
    background: linear-gradient( 135deg, var(--wf-saffron), var(--wf-amber) );
    border-radius: 50%;
    box-shadow: 0 5px 12px rgba(242, 140, 40, 0.18);
    font-size: 14px;
}


/* =========================================
   06. 3D TRUST VISUAL
========================================= */

.wf-trust-visual {
    position: relative;
    width: 100%;
    max-width: 490px;
    height: 340px;
    margin: 32px auto 0;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1000px;
    transform-style: preserve-3d;
}


/* Glow */

.wf-visual-glow {
    position: absolute;
    width: 245px;
    height: 245px;
    border-radius: 50%;
    background: radial-gradient( circle, rgba(245, 166, 35, 0.20), rgba(242, 140, 40, 0.07) 45%, transparent 72% );
    filter: blur(8px);
    animation: wfVisualGlow 4s ease-in-out infinite;
}


@keyframes wfVisualGlow {

    0%, 100% {
        transform: scale(0.92);
        opacity: 0.65;
    }

    50% {
        transform: scale(1.16);
        opacity: 1;
    }
}


/* Orbit Rings */

.wf-visual-orbit {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(242, 140, 40, 0.28);
    transform-style: preserve-3d;
    pointer-events: none;
}


.wf-orbit-a {
    width: 265px;
    height: 265px;
    border-top-color: var(--wf-saffron);
    animation: wfOrbitSpinA 12s linear infinite;
}


.wf-orbit-b {
    width: 310px;
    height: 190px;
    border-color: rgba(11, 46, 89, 0.17);
    transform: rotateX(65deg);
    animation: wfOrbitSpinB 15s linear infinite;
}


.wf-orbit-c {
    width: 350px;
    height: 220px;
    border-color: rgba(245, 166, 35, 0.30);
    transform: rotateY(65deg) rotateX(15deg);
    animation: wfOrbitSpinC 18s linear infinite;
}


@keyframes wfOrbitSpinA {

    from {
        transform: rotateZ(0deg);
    }

    to {
        transform: rotateZ(360deg);
    }
}


@keyframes wfOrbitSpinB {

    from {
        transform: rotateX(65deg) rotateZ(0deg);
    }

    to {
        transform: rotateX(65deg) rotateZ(360deg);
    }
}


@keyframes wfOrbitSpinC {

    from {
        transform: rotateY(65deg) rotateX(15deg) rotateZ(0deg);
    }

    to {
        transform: rotateY(65deg) rotateX(15deg) rotateZ(-360deg);
    }
}


/* Central 3D Emblem */

.wf-visual-center {
    position: relative;
    z-index: 5;
    width: 205px;
    height: 205px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient( 145deg, #FFFFFF 5%, #FFF9EF 50%, #FCE8CD 100% );
    border: 1px solid rgba(242, 140, 40, 0.48);
    box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.7), 0 0 0 10px rgba(242, 140, 40, 0.14), 0 25px 45px rgba(11, 46, 89, 0.13), inset 0 5px 15px rgba(255, 255, 255, 0.95), inset 0 -8px 18px rgba(242, 140, 40, 0.08);
    transform-style: preserve-3d;
    animation: wfCenterFloat 5s ease-in-out infinite;
}


    .wf-visual-center::before {
        content: "";
        position: absolute;
        inset: 10px;
        border-radius: 50%;
        border: 1px dashed rgba(242, 140, 40, 0.40);
        animation: wfInnerRotate 24s linear infinite;
    }


    .wf-visual-center::after {
        content: "";
        position: absolute;
        inset: -13px;
        border-radius: 50%;
        border: 2px solid transparent;
        border-top-color: var(--wf-saffron);
        border-bottom-color: rgba(11, 46, 89, 0.22);
        animation: wfInnerRotate 9s linear infinite reverse;
    }


@keyframes wfCenterFloat {

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

    50% {
        transform: translateY(-12px) rotateX(5deg);
    }
}


@keyframes wfInnerRotate {

    to {
        transform: rotate(360deg);
    }
}


.wf-center-inner {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
}


.wf-center-shield {
    width: 62px;
    height: 62px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 11px;
    color: #FFFFFF;
    font-size: 28px;
    border-radius: 20px;
    background: linear-gradient( 145deg, #174777, #0B2E59 );
    box-shadow: 0 10px 18px rgba(11, 46, 89, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.35);
    transform: translateZ(25px);
    animation: wfShieldFloat 3s ease-in-out infinite;
}


@keyframes wfShieldFloat {

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

    50% {
        transform: translateZ(40px) translateY(-4px);
    }
}


.wf-center-title {
    color: var(--wf-navy);
    font-size: 17px;
    font-weight: 900;
    letter-spacing: -0.5px;
}


.wf-center-subtitle {
    margin-top: 5px;
    color: var(--wf-muted);
    font-size: 12px;
    font-weight: 600;
}


/* =========================================
   07. FLOATING ICONS
========================================= */

.wf-floating-icon {
    position: absolute;
    z-index: 8;
    min-width: 115px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 13px;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(242, 140, 40, 0.23);
    border-radius: 16px;
    box-shadow: 0 12px 30px rgba(11, 46, 89, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.95);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    transform-style: preserve-3d;
    animation: wfFloatingCard 4s ease-in-out infinite;
}


.wf-icon-3d {
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--wf-saffron);
    background: linear-gradient( 145deg, #FFF9EF, #FFE7C8 );
    border: 1px solid rgba(242, 140, 40, 0.20);
    border-radius: 11px;
    box-shadow: 0 5px 10px rgba(242, 140, 40, 0.10);
    font-size: 14px;
}


.wf-floating-icon > span {
    color: var(--wf-navy);
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}


.wf-icon-customer {
    top: 16px;
    left: 0;
    animation-delay: -1s;
}


.wf-icon-trust {
    right: -2px;
    top: 115px;
    animation-delay: -2s;
}


.wf-icon-growth {
    left: 10px;
    bottom: 20px;
    animation-delay: -3s;
}


@keyframes wfFloatingCard {

    0%, 100% {
        transform: translateY(0) translateZ(20px) rotateX(0deg);
    }

    50% {
        transform: translateY(-12px) translateZ(45px) rotateX(4deg);
    }
}


/* Orbit Nodes */

.wf-orbit-node {
    position: absolute;
    z-index: 7;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: radial-gradient( circle at 30% 30%, #FFFFFF, var(--wf-amber) 50%, var(--wf-saffron) );
    box-shadow: 0 0 0 5px rgba(242, 140, 40, 0.09), 0 0 20px rgba(242, 140, 40, 0.25);
    animation: wfNodePulse 2.5s ease-in-out infinite;
}


.wf-node-one {
    top: 63px;
    left: 29%;
}


.wf-node-two {
    right: 24%;
    bottom: 47px;
    animation-delay: -0.8s;
}


.wf-node-three {
    right: 19%;
    top: 55px;
    animation-delay: -1.5s;
}


@keyframes wfNodePulse {

    0%, 100% {
        transform: scale(0.85);
        opacity: 0.75;
    }

    50% {
        transform: scale(1.35);
        opacity: 1;
    }
}


/* =========================================
   08. BOTTOM NOTE
========================================= */

.wf-why-bottom-note {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 18px;
    padding: 13px 16px;
    background: rgba(255, 255, 255, 0.65);
    border: 1px solid rgba(11, 46, 89, 0.08);
    border-radius: 13px;
    box-shadow: 0 5px 20px rgba(11, 46, 89, 0.035);
}


.wf-note-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--wf-saffron);
    background: #FFF0DC;
    border-radius: 10px;
}


.wf-why-bottom-note p {
    color: var(--wf-muted);
    font-size: 14px;
    line-height: 1.7;
}


.wf-why-bottom-note strong {
    color: var(--wf-navy);
}


/* =========================================
   09. RIGHT CONTENT
========================================= */

.wf-why-right {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
    align-content: center;
}


.wf-right-heading {
    grid-column: 1 / -1;
    margin-bottom: 10px;
}


.wf-mini-label {
    display: inline-block;
    margin-bottom: 13px;
    color: var(--wf-saffron);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 2px;
}


.wf-right-heading h3 {
    max-width: 540px;
    color: var(--wf-navy);
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(27px, 2.5vw, 38px);
    line-height: 1.25;
    letter-spacing: -0.8px;
}


    .wf-right-heading h3 span {
        color: var(--wf-saffron);
    }


.wf-right-heading p {
    max-width: 520px;
    margin-top: 13px;
    color: var(--wf-muted);
    font-size: 14px;
    line-height: 1.8;
}


/* =========================================
   10. FEATURE CARDS
========================================= */

.wf-feature-card {
    --wf-card-rx: 0deg;
    --wf-card-ry: 0deg;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-width: 0;
    min-height: 265px;
    padding: 24px 22px 19px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 1px solid var(--wf-border);
    border-radius: 23px;
    background: linear-gradient( 145deg, rgba(255, 255, 255, 0.98), rgba(246, 250, 255, 0.94) );
    box-shadow: 0 12px 35px rgba(11, 46, 89, 0.055), inset 0 1px 0 rgba(255, 255, 255, 0.95);
    transform: perspective(1000px) rotateX(var(--wf-card-rx)) rotateY(var(--wf-card-ry)) translateZ(0);
    transform-style: preserve-3d;
    will-change: transform, box-shadow;
    transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.35s ease, box-shadow 0.35s ease, background 0.35s ease;
}


    /* Card Ambient Glow */

    .wf-feature-card::before {
        content: "";
        position: absolute;
        z-index: -1;
        width: 160px;
        height: 160px;
        right: -75px;
        top: -75px;
        border-radius: 50%;
        background: radial-gradient( circle, rgba(245, 166, 35, 0.18), transparent 70% );
        opacity: 0.65;
        transition: transform 0.5s ease, opacity 0.5s ease;
    }


    /* Bottom Gradient Accent */

    .wf-feature-card::after {
        content: "";
        position: absolute;
        left: 22px;
        right: 22px;
        bottom: 0;
        height: 3px;
        border-radius: 10px 10px 0 0;
        background: linear-gradient( 90deg, var(--wf-saffron), var(--wf-amber), transparent );
        transform: scaleX(0.15);
        transform-origin: left;
        transition: transform 0.4s ease;
    }


    .wf-feature-card:hover {
        border-color: rgba(242, 140, 40, 0.65);
        box-shadow: 0 25px 50px rgba(11, 46, 89, 0.12), 0 8px 25px rgba(242, 140, 40, 0.08), inset 0 1px 0 rgba(255, 255, 255, 1);
    }


        .wf-feature-card:hover::before {
            transform: scale(1.65);
            opacity: 1;
        }


        .wf-feature-card:hover::after {
            transform: scaleX(1);
        }


/* Card Header */

.wf-card-top {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}


.wf-card-icon {
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--wf-navy);
    background: linear-gradient( 145deg, #FFFFFF, #EAF2FC );
    border: 1px solid rgba(11, 46, 89, 0.10);
    border-radius: 17px;
    box-shadow: 0 8px 15px rgba(11, 46, 89, 0.07), inset 0 1px 0 #FFFFFF;
    font-size: 22px;
    transform: translateZ(25px);
    transition: color 0.35s ease, background 0.35s ease, transform 0.4s ease, box-shadow 0.35s ease;
}


.wf-feature-card:hover .wf-card-icon {
    color: #FFFFFF;
    background: linear-gradient( 135deg, var(--wf-saffron), var(--wf-amber) );
    box-shadow: 0 12px 22px rgba(242, 140, 40, 0.24);
    transform: translateZ(40px) rotate(-5deg) scale(1.06);
}


/* Large Number */

.wf-card-number {
    color: rgba(11, 46, 89, 0.075);
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 48px;
    font-weight: 800;
    line-height: 1;
    transform: translateZ(10px);
    transition: color 0.35s ease, transform 0.35s ease;
}


.wf-feature-card:hover .wf-card-number {
    color: rgba(242, 140, 40, 0.32);
    transform: translateZ(35px) translateY(-4px) rotate(-5deg);
}


/* Card Content */

.wf-card-content {
    position: relative;
    z-index: 2;
    margin-top: 22px;
    transform: translateZ(18px);
}


.wf-card-kicker {
    display: inline-block;
    margin-bottom: 9px;
    color: var(--wf-saffron);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1.5px;
}


.wf-card-content h4 {
    color: var(--wf-navy);
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -0.4px;
    transition: color 0.3s ease;
}


.wf-feature-card:hover .wf-card-content h4 {
    color: #174777;
}


.wf-card-content p {
    margin-top: 10px;
    color: var(--wf-muted);
    font-size: 14px;
    line-height: 1.8;
}


/* Card Footer */

.wf-card-bottom {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 21px;
    padding-top: 15px;
    border-top: 1px solid rgba(11, 46, 89, 0.075);
    color: var(--wf-muted);
    font-size: 13px;
    font-weight: 700;
    transform: translateZ(15px);
}


.wf-card-indicator {
    width: 7px;
    height: 7px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--wf-saffron);
    box-shadow: 0 0 0 4px rgba(242, 140, 40, 0.10);
}


.wf-card-bottom > i {
    margin-left: auto;
    color: var(--wf-navy);
    font-size: 12px;
    transition: transform 0.35s ease, color 0.35s ease;
}


.wf-feature-card:hover .wf-card-bottom > i {
    color: var(--wf-saffron);
    transform: translate(3px, -3px);
}


/* Shine Effect */

.wf-card-shine {
    position: absolute;
    z-index: 1;
    top: -50%;
    left: -100%;
    width: 65%;
    height: 200%;
    pointer-events: none;
    background: linear-gradient( 110deg, transparent, rgba(255, 255, 255, 0.7), transparent );
    transform: rotate(18deg);
    transition: left 0.8s ease;
}


.wf-feature-card:hover .wf-card-shine {
    left: 150%;
}


/* Individual Card Variations */

.wf-card-one {
    background: radial-gradient( circle at 100% 0%, rgba(245, 166, 35, 0.075), transparent 45% ), #FFFFFF;
}


.wf-card-two {
    background: radial-gradient( circle at 100% 0%, rgba(71, 144, 218, 0.09), transparent 45% ), #FFFFFF;
}


.wf-card-three {
    background: radial-gradient( circle at 100% 0%, rgba(242, 140, 40, 0.07), transparent 45% ), #FFFFFF;
}


.wf-card-four {
    background: radial-gradient( circle at 100% 0%, rgba(71, 144, 218, 0.08), transparent 45% ), #FFFFFF;
}


/* =========================================
   11. SUPPORT BANNER
========================================= */

.wf-support-banner {
    position: relative;
    grid-column: 1 / -1;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 5px;
    padding: 21px 20px;
    border: 1px solid rgba(242, 140, 40, 0.24);
    border-radius: 19px;
    background: linear-gradient( 110deg, rgba(255, 255, 255, 0.95), rgba(255, 246, 232, 0.92) );
    box-shadow: 0 12px 30px rgba(11, 46, 89, 0.055), inset 0 1px 0 #FFFFFF;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}


    .wf-support-banner::before {
        content: "";
        position: absolute;
        top: -70px;
        right: 40px;
        width: 140px;
        height: 140px;
        border-radius: 50%;
        border: 1px solid rgba(242, 140, 40, 0.18);
        box-shadow: 0 0 0 15px rgba(242, 140, 40, 0.025), 0 0 0 30px rgba(242, 140, 40, 0.02);
        pointer-events: none;
    }


    .wf-support-banner:hover {
        transform: translateY(-4px);
        box-shadow: 0 20px 40px rgba(11, 46, 89, 0.09), 0 8px 20px rgba(242, 140, 40, 0.06);
    }


.wf-support-icon {
    position: relative;
    z-index: 1;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #FFFFFF;
    background: linear-gradient( 145deg, var(--wf-navy-light), var(--wf-navy) );
    border-radius: 15px;
    box-shadow: 0 8px 16px rgba(11, 46, 89, 0.18);
    font-size: 19px;
}


.wf-support-text {
    position: relative;
    z-index: 1;
    flex: 1;
    min-width: 0;
}


    .wf-support-text h4 {
        color: var(--wf-navy);
        font-size: 14px;
        font-weight: 800;
        line-height: 1.5;
    }


    .wf-support-text p {
        margin-top: 4px;
        color: var(--wf-muted);
        font-size: 14px;
        line-height: 1.7;
    }


.wf-support-link {
    position: relative;
    z-index: 1;
    width: 43px;
    height: 43px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #FFFFFF;
    background: linear-gradient( 135deg, var(--wf-saffron), var(--wf-amber) );
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    box-shadow: 0 7px 15px rgba(242, 140, 40, 0.22);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}


    .wf-support-link:hover {
        transform: rotate(-35deg) scale(1.08);
        box-shadow: 0 10px 22px rgba(242, 140, 40, 0.32);
    }


/* =========================================
   12. SECTION BOTTOM LINE
========================================= */

.wf-section-bottom-line {
    position: absolute;
    bottom: 0;
    left: 5%;
    right: 5%;
    height: 1px;
    background: linear-gradient( 90deg, transparent, rgba(242, 140, 40, 0.4), rgba(11, 46, 89, 0.12), transparent );
}


/* =========================================
   13. SCROLL REVEAL ANIMATION
========================================= */

.wf-reveal {
    opacity: 0;
    transform: translateY(35px) perspective(1000px) rotateX(3deg);
    transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.2, 0.75, 0.25, 1);
}


    .wf-reveal.wf-visible {
        opacity: 1;
        transform: translateY(0) perspective(1000px) rotateX(0deg);
    }


.wf-card-one.wf-reveal {
    transition-delay: 0.05s;
}


.wf-card-two.wf-reveal {
    transition-delay: 0.16s;
}


.wf-card-three.wf-reveal {
    transition-delay: 0.27s;
}


.wf-card-four.wf-reveal {
    transition-delay: 0.38s;
}


/* =========================================
   14. LARGE LAPTOPS
========================================= */

@media (max-width: 1250px) {

    .wf-why-section {
        padding: 90px 4%;
    }

    .wf-why-container {
        gap: 45px;
    }

    .wf-feature-card {
        padding: 21px 18px 17px;
        min-height: 270px;
    }

    .wf-card-content h4 {
        font-size: 17px;
    }

    .wf-card-content p {
        font-size: 10px;
    }

    .wf-trust-visual {
        transform: scale(0.92);
        transform-origin: center center;
        width: 108%;
        margin-left: -4%;
    }
}


/* =========================================
   15. TABLET
========================================= */

@media (max-width: 1000px) {

    .wf-why-section {
        padding: 85px 5%;
    }

    .wf-why-container {
        grid-template-columns: 1fr;
        gap: 45px;
        max-width: 780px;
    }

    .wf-why-left {
        display: grid;
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }

    .wf-section-label {
        justify-content: center;
    }

    .wf-why-heading {
        max-width: 650px;
        font-size: clamp(43px, 6vw, 58px);
    }

    .wf-why-description {
        max-width: 610px;
        margin-top: 20px;
    }

    .wf-trust-highlights {
        width: 100%;
        max-width: 470px;
        align-items: flex-start;
        margin-top: 24px;
    }

    .wf-trust-visual {
        width: 100%;
        max-width: 480px;
        margin: 20px auto 0;
        transform: none;
    }

    .wf-why-bottom-note {
        width: 100%;
        max-width: 480px;
        justify-content: center;
        margin-top: 5px;
        text-align: left;
    }

    .wf-why-right {
        gap: 20px;
    }

    .wf-right-heading {
        text-align: center;
    }

        .wf-right-heading h3,
        .wf-right-heading p {
            margin-left: auto;
            margin-right: auto;
        }

    .wf-feature-card {
        min-height: 250px;
        padding: 24px 22px 19px;
    }

    .wf-card-content h4 {
        font-size: 19px;
    }

    .wf-card-content p {
        font-size: 12px;
    }
}


/* =========================================
   16. MOBILE
========================================= */

@media (max-width: 600px) {

    .wf-why-section {
        padding: 68px 20px 65px;
    }

    .wf-why-container {
        gap: 38px;
    }

    .wf-section-label {
        gap: 8px;
        margin-bottom: 22px;
        font-size: 10px;
        letter-spacing: 1.4px;
    }

    .wf-label-icon {
        width: 31px;
        height: 31px;
        border-radius: 9px;
    }

    .wf-label-line {
        width: 22px;
    }

    .wf-why-heading {
        font-size: clamp(37px, 10vw, 49px);
        line-height: 1.14;
        letter-spacing: -1.1px;
    }

    .wf-why-description {
        margin-top: 19px;
        font-size: 12px;
        line-height: 1.9;
    }

    .wf-trust-highlights {
        max-width: 340px;
        gap: 12px;
        margin-top: 21px;
    }

    .wf-trust-item {
        gap: 10px;
        font-size: 12px;
        text-align: left;
    }

    .wf-trust-check {
        width: 23px;
        height: 23px;
    }

    /* 3D visual */

    .wf-trust-visual {
        height: 285px;
        margin-top: 10px;
        transform: scale(0.91);
        transform-origin: center center;
        width: 110%;
        margin-left: -5%;
    }

    .wf-visual-center {
        width: 175px;
        height: 175px;
    }

    .wf-center-shield {
        width: 53px;
        height: 53px;
        font-size: 24px;
        border-radius: 17px;
    }

    .wf-center-title {
        font-size: 14px;
    }

    .wf-center-subtitle {
        font-size: 10px;
    }

    .wf-orbit-a {
        width: 225px;
        height: 225px;
    }

    .wf-orbit-b {
        width: 265px;
        height: 165px;
    }

    .wf-orbit-c {
        width: 290px;
        height: 190px;
    }

    .wf-floating-icon {
        min-width: 105px;
        gap: 7px;
        padding: 8px 9px;
        border-radius: 13px;
    }

    .wf-icon-3d {
        width: 29px;
        height: 29px;
        border-radius: 9px;
        font-size: 12px;
    }

    .wf-floating-icon > span {
        font-size: 10px;
    }

    .wf-icon-customer {
        top: 9px;
        left: 0;
    }

    .wf-icon-trust {
        top: 103px;
        right: -3px;
    }

    .wf-icon-growth {
        left: 1px;
        bottom: 9px;
    }

    .wf-node-one {
        top: 48px;
    }

    .wf-node-two {
        bottom: 35px;
    }

    .wf-node-three {
        top: 35px;
    }

    .wf-why-bottom-note {
        margin-top: 0;
        padding: 12px;
    }

        .wf-why-bottom-note p {
            font-size: 10px;
        }

    /* Right content */

    .wf-why-right {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .wf-right-heading {
        margin-bottom: 6px;
        text-align: left;
    }

    .wf-mini-label {
        font-size: 10px;
    }

    .wf-right-heading h3 {
        font-size: 30px;
    }

    .wf-right-heading p {
        font-size: 12px;
    }

    .wf-feature-card {
        min-height: 0;
        padding: 23px 21px 19px;
        border-radius: 20px;
    }

    .wf-card-icon {
        width: 49px;
        height: 49px;
        font-size: 20px;
        border-radius: 15px;
    }

    .wf-card-number {
        font-size: 43px;
    }

    .wf-card-content {
        margin-top: 20px;
    }

        .wf-card-content h4 {
            font-size: 18px;
        }

        .wf-card-content p {
            font-size: 12px;
        }

    .wf-card-bottom {
        margin-top: 18px;
        padding-top: 13px;
    }

    .wf-support-banner {
        gap: 11px;
        padding: 17px 14px;
        border-radius: 16px;
    }

    .wf-support-icon {
        width: 40px;
        height: 40px;
        border-radius: 12px;
        font-size: 16px;
    }

    .wf-support-text h4 {
        font-size: 10px;
    }

    .wf-support-text p {
        font-size: 10px;
    }

    .wf-support-link {
        width: 35px;
        height: 35px;
    }

    .wf-bg-grid {
        background-size: 38px 38px;
    }
}


/* =========================================
   17. EXTRA SMALL PHONES
========================================= */

@media (max-width: 380px) {

    .wf-why-section {
        padding: 58px 15px;
    }

    .wf-why-heading {
        font-size: 36px;
    }

    .wf-section-label {
        font-size: 8px;
        letter-spacing: 1px;
    }

    .wf-trust-visual {
        transform: scale(0.80);
        width: 125%;
        margin-left: -12.5%;
        margin-top: -5px;
        margin-bottom: -12px;
    }

    .wf-right-heading h3 {
        font-size: 27px;
    }

    .wf-feature-card {
        padding: 20px 17px 17px;
    }

    .wf-support-banner {
        flex-wrap: wrap;
    }

    .wf-support-text {
        flex: 1 1 150px;
    }
}


/* =========================================
   18. ACCESSIBILITY
========================================= */

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

    .wf-why-section *,
    .wf-why-section *::before,
    .wf-why-section *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .wf-reveal {
        opacity: 1;
        transform: none;
    }
}
.wf-trust-visual {
    transform: perspective(1000px) rotateX(var(--wf-visual-rotate-x, 0deg)) rotateY(var(--wf-visual-rotate-y, 0deg));
}

.wf-page-hidden *,
.wf-page-hidden *::before,
.wf-page-hidden *::after {
    animation-play-state: paused !important;
}
/* =========================================
   WHY CHOOSE SECTION — ICON FIX
========================================= */

.choose-icon {
    width: 66px;
    height: 66px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: linear-gradient( 145deg, #FFFFFF, #EAF2FB );
    border: 1px solid #DCE7F3;
    border-radius: 21px;
    box-shadow: 0 8px 20px rgba(11, 46, 89, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9);
    transition: transform 0.4s ease, background 0.4s ease, box-shadow 0.4s ease;
}

    .choose-icon i {
        display: inline-block !important;
        font-family: "Font Awesome 6 Free" !important;
        font-weight: 900 !important;
        font-size: 25px !important;
        line-height: 1 !important;
        color: #0B2E59 !important;
        opacity: 1 !important;
        visibility: visible !important;
        transition: color 0.4s ease, transform 0.4s ease;
    }

/* 3D hover animation */

.choose-card:hover .choose-icon {
    background: linear-gradient( 145deg, #FFF8EC, #FFE1B8 );
    border-color: #F28C28;
    transform: translateY(-5px) rotateY(12deg) rotateX(5deg);
    box-shadow: 0 14px 28px rgba(11, 46, 89, 0.13), 0 0 18px rgba(242, 140, 40, 0.14);
}

    .choose-card:hover .choose-icon i {
        color: #F28C28 !important;
        transform: scale(1.12);
    }

@media (max-width: 600px) {
    .choose-icon {
        width: 56px;
        height: 56px;
        border-radius: 17px;
    }

        .choose-icon i {
            font-size: 22px !important;
        }
}








/* =========================================
   HOW IT WORKS — FINANCIAL JOURNEY
   Theme: Navy + Saffron + White
========================================= */

.financial-journey {
    --journey-navy: #0B2E59;
    --journey-navy-dark: #061A33;
    --journey-blue: #123E70;
    --journey-orange: #F28C28;
    --journey-amber: #F5A623;
    --journey-white: #FFFFFF;
    --journey-muted: #B6C7DC;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 115px 5% 95px;
    color: var(--journey-white);
    background: radial-gradient( ellipse at 10% 5%, rgba(24, 83, 142, .42), transparent 36% ), radial-gradient( ellipse at 90% 85%, rgba(242, 140, 40, .11), transparent 35% ), linear-gradient( 135deg, #061A33 0%, #0B2E59 48%, #071E3A 100% );
}


/* =========================================
   BACKGROUND EFFECTS
========================================= */

.journey-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    perspective: 1000px;
}

.journey-grid {
    position: absolute;
    inset: -20%;
    opacity: .19;
    background-image: linear-gradient( rgba(255, 255, 255, .075) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255, 255, 255, .075) 1px, transparent 1px );
    background-size: 65px 65px;
    transform: perspective(700px) rotateX(58deg) scale(1.6);
    transform-origin: center center;
    animation: journeyGridMove 20s linear infinite;
}

@keyframes journeyGridMove {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 0 130px;
    }
}


/* Glowing Orbs */

.journey-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(2px);
    transform-style: preserve-3d;
    animation: journeyOrbFloat 9s ease-in-out infinite;
}

.journey-orb-one {
    top: 8%;
    left: -100px;
    width: 300px;
    height: 300px;
    background: radial-gradient( circle at 35% 30%, rgba(66, 139, 220, .30), rgba(11, 46, 89, .02) 70% );
    animation-delay: -2s;
}

.journey-orb-two {
    top: 35%;
    right: -100px;
    width: 370px;
    height: 370px;
    background: radial-gradient( circle at 35% 30%, rgba(242, 140, 40, .18), rgba(242, 140, 40, .01) 70% );
    animation-delay: -5s;
}

.journey-orb-three {
    bottom: -160px;
    left: 35%;
    width: 320px;
    height: 320px;
    background: radial-gradient( circle at 35% 30%, rgba(40, 112, 184, .20), transparent 70% );
    animation-delay: -3s;
}

@keyframes journeyOrbFloat {
    0%, 100% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    50% {
        transform: translate3d(25px, -30px, 35px) scale(1.08);
    }
}


/* 3D Orbit Rings */

.journey-ring {
    position: absolute;
    border: 1px solid rgba(242, 140, 40, .20);
    border-radius: 50%;
    transform-style: preserve-3d;
}

.journey-ring-one {
    top: 10%;
    right: 10%;
    width: 320px;
    height: 320px;
    transform: rotateX(68deg) rotateY(-15deg);
    box-shadow: 0 0 25px rgba(242, 140, 40, .04), inset 0 0 25px rgba(242, 140, 40, .04);
    animation: journeyRingOne 15s linear infinite;
}

.journey-ring-two {
    right: 5%;
    bottom: 5%;
    width: 450px;
    height: 450px;
    border-color: rgba(255, 255, 255, .09);
    transform: rotateX(65deg) rotateY(20deg);
    animation: journeyRingTwo 22s linear infinite;
}

@keyframes journeyRingOne {
    from {
        transform: rotateX(68deg) rotateY(-15deg) rotateZ(0);
    }

    to {
        transform: rotateX(68deg) rotateY(-15deg) rotateZ(360deg);
    }
}

@keyframes journeyRingTwo {
    from {
        transform: rotateX(65deg) rotateY(20deg) rotateZ(0);
    }

    to {
        transform: rotateX(65deg) rotateY(20deg) rotateZ(-360deg);
    }
}


/* Floating Particles */

.journey-particle {
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--journey-orange);
    box-shadow: 0 0 12px rgba(242, 140, 40, .75), 0 0 30px rgba(242, 140, 40, .20);
    animation: journeyParticleFloat 7s ease-in-out infinite;
}

.particle-one {
    top: 17%;
    left: 15%;
}

.particle-two {
    top: 30%;
    right: 17%;
    animation-delay: -2s;
}

.particle-three {
    bottom: 20%;
    left: 28%;
    animation-delay: -4s;
}

.particle-four {
    top: 65%;
    right: 8%;
    animation-delay: -1s;
}

.particle-five {
    top: 12%;
    left: 60%;
    animation-delay: -3s;
}

@keyframes journeyParticleFloat {
    0%, 100% {
        transform: translate3d(0, 0, 0) scale(.8);
        opacity: .45;
    }

    50% {
        transform: translate3d(15px, -25px, 35px) scale(1.5);
        opacity: 1;
    }
}


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

.journey-container {
    position: relative;
    z-index: 2;
    max-width: 1450px;
    margin: 0 auto;
}


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

.journey-heading {
    max-width: 800px;
    margin: 0 auto 45px;
    text-align: center;
    opacity: 0;
    transform: translateY(35px);
    transition: opacity .8s ease, transform .8s cubic-bezier(.2, .75, .25, 1);
}

.financial-journey.journey-visible .journey-heading {
    opacity: 1;
    transform: translateY(0);
}

.journey-eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 22px;
    color: var(--journey-amber);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2.5px;
    text-transform: uppercase;
}

.journey-eyebrow-icon {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--journey-orange);
    background: rgba(242, 140, 40, .12);
    border: 1px solid rgba(242, 140, 40, .35);
    border-radius: 12px;
    box-shadow: 0 0 22px rgba(242, 140, 40, .07);
    transform: rotate(-8deg);
    transition: transform .35s ease;
}

    .journey-eyebrow-icon:hover {
        transform: rotate(8deg) translateY(-3px);
    }

.journey-eyebrow-line {
    width: 35px;
    height: 2px;
    background: linear-gradient( 90deg, var(--journey-orange), transparent );
}

.journey-heading h2 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(35px, 4.4vw, 60px);
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -1.5px;
    color: #FFFFFF;
}

    .journey-heading h2 span {
        display: inline-block;
        color: var(--journey-orange);
        background: linear-gradient( 110deg, #F28C28, #FFD08A, #F5A623 );
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        background-size: 200% auto;
        animation: journeyTextShine 5s linear infinite;
    }

@keyframes journeyTextShine {
    to {
        background-position: 200% center;
    }
}

.journey-heading > p {
    max-width: 680px;
    margin: 19px auto 0;
    color: var(--journey-muted);
    font-size: 16px;
    line-height: 1.9;
}


/* =========================================
   HIGHLIGHT STRIP
========================================= */

.journey-highlight {
    position: relative;
    max-width: 780px;
    margin: 0 auto 75px;
    padding: 18px 23px;
    display: flex;
    align-items: center;
    gap: 16px;
    background: linear-gradient( 115deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .025) );
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 17px;
    box-shadow: 0 15px 45px rgba(0, 0, 0, .10), inset 0 1px 0 rgba(255, 255, 255, .07);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    transform-style: preserve-3d;
    transition: border-color .35s ease, transform .35s ease, box-shadow .35s ease;
}

    .journey-highlight:hover {
        transform: translateY(-4px) translateZ(12px);
        border-color: rgba(242, 140, 40, .45);
        box-shadow: 0 20px 45px rgba(0, 0, 0, .16), 0 0 25px rgba(242, 140, 40, .06);
    }

.journey-highlight-icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--journey-orange);
    background: rgba(242, 140, 40, .13);
    border: 1px solid rgba(242, 140, 40, .25);
    border-radius: 14px;
    font-size: 19px;
    transform: translateZ(15px);
}

.journey-highlight-content {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

    .journey-highlight-content strong {
        color: #FFFFFF;
        font-size: 16px;
        font-weight: 700;
    }

    .journey-highlight-content span {
        color: var(--journey-muted);
        font-size: 14px;
        line-height: 1.7;
    }

.journey-highlight-decoration {
    margin-left: auto;
    color: rgba(242, 140, 40, .65);
    font-size: 28px;
    transform: translateZ(12px) rotate(-8deg);
    animation: journeyTrendFloat 3s ease-in-out infinite;
}

@keyframes journeyTrendFloat {
    0%, 100% {
        transform: translateZ(12px) translateY(0) rotate(-8deg);
    }

    50% {
        transform: translateZ(20px) translateY(-5px) rotate(0);
    }
}


/* =========================================
   TIMELINE LAYOUT
========================================= */

.journey-timeline {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    perspective: 1200px;
}


/* Timeline Track */

.journey-track {
    position: absolute;
    top: 109px;
    left: 12.5%;
    right: 12.5%;
    height: 3px;
    z-index: 0;
    border-radius: 10px;
    background: rgba(255, 255, 255, .13);
}

.journey-track-base {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: rgba(255, 255, 255, .12);
}

.journey-track-progress {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient( 90deg, #F28C28, #FFD18A, #F5A623 );
    box-shadow: 0 0 12px rgba(242, 140, 40, .55), 0 0 25px rgba(242, 140, 40, .17);
    transition: width 1.8s cubic-bezier(.2, .8, .2, 1);
}


/* =========================================
   TIMELINE STEPS
========================================= */

.journey-step {
    position: relative;
    z-index: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    transform-style: preserve-3d;
    opacity: 0;
    transform: translateY(45px) rotateX(7deg);
    transition: opacity .75s ease, transform .75s cubic-bezier(.2, .75, .25, 1);
}

.financial-journey.journey-visible .journey-step {
    opacity: 1;
    transform: translateY(0) rotateX(0);
}

    .financial-journey.journey-visible .journey-step:nth-of-type(1) {
        transition-delay: .12s;
    }

    .financial-journey.journey-visible .journey-step:nth-of-type(2) {
        transition-delay: .28s;
    }

    .financial-journey.journey-visible .journey-step:nth-of-type(3) {
        transition-delay: .44s;
    }

    .financial-journey.journey-visible .journey-step:nth-of-type(4) {
        transition-delay: .60s;
    }


/* Step Top */

.journey-step-top {
    min-height: 33px;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.journey-step-label {
    color: var(--journey-orange);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.8px;
}

.journey-step-number {
    color: rgba(255, 255, 255, .14);
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 25px;
    font-weight: 700;
    transition: color .35s ease, transform .35s ease;
}

.journey-step:hover .journey-step-number {
    color: rgba(242, 140, 40, .65);
    transform: translateY(-3px) rotate(-4deg);
}


/* Timeline Nodes */

.journey-node {
    position: relative;
    width: 70px;
    height: 70px;
    margin: 0 0 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient( 145deg, #17477B, #082344 );
    border: 1px solid rgba(242, 140, 40, .45);
    box-shadow: 0 10px 0 rgba(3, 15, 30, .22), 0 16px 30px rgba(0, 0, 0, .20), inset 0 1px 1px rgba(255, 255, 255, .15);
    transform-style: preserve-3d;
    transition: transform .45s ease, box-shadow .45s ease, border-color .45s ease;
}

.journey-node-inner {
    width: 54px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--journey-orange);
    background: linear-gradient( 145deg, rgba(242, 140, 40, .20), rgba(242, 140, 40, .06) );
    border: 1px solid rgba(242, 140, 40, .24);
    font-size: 20px;
    transform: translateZ(12px);
    transition: color .35s ease, background .35s ease, transform .45s ease;
}

.journey-node-pulse {
    position: absolute;
    inset: -8px;
    border: 1px solid rgba(242, 140, 40, .30);
    border-radius: 50%;
    opacity: 0;
    transform: scale(.85);
    pointer-events: none;
}

.journey-step:hover .journey-node {
    transform: translateY(-7px) rotateX(12deg) rotateY(-10deg);
    border-color: var(--journey-orange);
    box-shadow: 0 14px 0 rgba(3, 15, 30, .20), 0 24px 40px rgba(0, 0, 0, .27), 0 0 25px rgba(242, 140, 40, .12);
}

.journey-step:hover .journey-node-inner {
    color: #FFFFFF;
    background: linear-gradient( 145deg, #F5A623, #F28C28 );
    /*transform: translateZ(18px) rotateY(12deg);*/
}

.financial-journey.journey-visible .journey-step:nth-of-type(1) .journey-node-pulse,
.financial-journey.journey-visible .journey-step:nth-of-type(2) .journey-node-pulse,
.financial-journey.journey-visible .journey-step:nth-of-type(3) .journey-node-pulse,
.financial-journey.journey-visible .journey-step:nth-of-type(4) .journey-node-pulse {
    animation: journeyNodePulse 2.8s ease-out infinite;
}

.financial-journey.journey-visible .journey-step:nth-of-type(2) .journey-node-pulse {
    animation-delay: .5s;
}

.financial-journey.journey-visible .journey-step:nth-of-type(3) .journey-node-pulse {
    animation-delay: 1s;
}

.financial-journey.journey-visible .journey-step:nth-of-type(4) .journey-node-pulse {
    animation-delay: 1.5s;
}

@keyframes journeyNodePulse {
    0% {
        opacity: .6;
        transform: scale(.85);
    }

    100% {
        opacity: 0;
        transform: scale(1.45);
    }
}


/* =========================================
   3D GLASS CARDS
========================================= */

.journey-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 275px;
    padding: 23px 20px 20px;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 19px;
    background: linear-gradient( 145deg, rgba(255, 255, 255, .105), rgba(255, 255, 255, .035) );
    box-shadow: 0 20px 40px rgba(0, 0, 0, .15), inset 0 1px 0 rgba(255, 255, 255, .08);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    transform-style: preserve-3d;
    transition: border-color .4s ease, box-shadow .4s ease, background .4s ease, transform .15s ease-out;
}

    .journey-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: -120%;
        width: 80%;
        height: 100%;
        z-index: -1;
        background: linear-gradient( 100deg, transparent, rgba(255, 255, 255, .075), transparent );
        transform: skewX(-20deg);
        transition: left .8s ease;
    }

    .journey-card::after {
        content: "";
        position: absolute;
        top: 0;
        left: 20px;
        right: 20px;
        height: 2px;
        background: linear-gradient( 90deg, transparent, var(--journey-orange), transparent );
        opacity: 0;
        transition: opacity .35s ease;
    }

.journey-step:hover .journey-card::before {
    left: 140%;
}

.journey-step:hover .journey-card::after {
    opacity: 1;
}

.journey-step:hover .journey-card {
    border-color: rgba(242, 140, 40, .45);
    background: linear-gradient( 145deg, rgba(20, 65, 111, .94), rgba(8, 32, 61, .96) );
    box-shadow: 0 28px 55px rgba(0, 0, 0, .26), 0 0 25px rgba(242, 140, 40, .07), inset 0 1px 0 rgba(255, 255, 255, .12);
}


/* Card Top */

.journey-card-top {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 25px;
    transform: translateZ(14px);
}

.journey-card-icon {
    width: 47px;
    height: 47px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--journey-orange);
    background: rgba(242, 140, 40, .13);
    border: 1px solid rgba(242, 140, 40, .26);
    border-radius: 14px;
    font-size: 18px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .08);
    transition: transform .4s ease, background .4s ease, color .4s ease;
}

.journey-step:hover .journey-card-icon {
    color: #FFFFFF;
    background: linear-gradient( 145deg, #F5A623, #F28C28 );
    transform: translateY(-4px) rotateY(15deg) rotateX(8deg);
}

.journey-card-index {
    color: rgba(255, 255, 255, .48);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
}


/* Card Text */

.journey-card h3 {
    position: relative;
    z-index: 1;
    margin-bottom: 12px;
    color: #FFFFFF;
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(19px, 2vw, 23px);
    font-weight: 700;
    line-height: 1.35;
    transform: translateZ(17px);
    transition: color .3s ease;
}

.journey-card p {
    position: relative;
    z-index: 1;
    margin: 0;
    color: #B6C7DC;
    font-size: 14px;
    line-height: 1.9;
    transform: translateZ(10px);
}


/* Card Divider */

.journey-card-divider {
    width: 100%;
    height: 1px;
    margin: auto 0 15px;
    padding-top: 17px;
    border-bottom: 1px solid rgba(255, 255, 255, .11);
}


/* Card Footer */

.journey-card-footer {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 9px;
    color: #E1EAF5;
    font-size: 12px;
    font-weight: 600;
    transform: translateZ(12px);
}

.journey-footer-dot {
    width: 7px;
    height: 7px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--journey-orange);
    box-shadow: 0 0 12px rgba(242, 140, 40, .55);
}


/* Oversized Background Icon */

.journey-card-watermark {
    position: absolute;
    right: -10px;
    bottom: 35px;
    z-index: 0;
    color: rgba(255, 255, 255, .035);
    font-size: 105px;
    transform: rotate(-12deg) translateZ(-5px);
    pointer-events: none;
    transition: color .4s ease, transform .5s ease;
}

.journey-step:hover .journey-card-watermark {
    color: rgba(242, 140, 40, .09);
    transform: rotate(0deg) translate(-7px, -5px) translateZ(0);
}


/* =========================================
   BOTTOM NOTE
========================================= */

.journey-bottom {
    margin-top: 55px;
    padding-top: 25px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    border-top: 1px solid rgba(255, 255, 255, .12);
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .7s ease .7s, transform .7s ease .7s;
}

.financial-journey.journey-visible .journey-bottom {
    opacity: 1;
    transform: translateY(0);
}

.journey-bottom-left {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.journey-bottom-icon {
    width: 35px;
    height: 35px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--journey-orange);
    background: rgba(242, 140, 40, .10);
    border: 1px solid rgba(242, 140, 40, .20);
    border-radius: 11px;
    font-size: 14px;
}

.journey-bottom-left p {
    max-width: 900px;
    margin: 0;
    color: var(--journey-muted);
    font-size: 14px;
    line-height: 1.9;
}

    .journey-bottom-left p strong {
        color: #FFFFFF;
    }

.journey-bottom-decoration {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
}

    .journey-bottom-decoration span {
        display: block;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--journey-orange);
        box-shadow: 0 0 12px rgba(242, 140, 40, .30);
    }

        .journey-bottom-decoration span:nth-child(2) {
            opacity: .55;
        }

        .journey-bottom-decoration span:nth-child(3) {
            opacity: .25;
        }


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

@media (max-width: 1100px) {

    .financial-journey {
        padding: 95px 4% 75px;
    }

    .journey-timeline {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 45px 25px;
    }

    .journey-track {
        display: none;
    }

    .journey-step-top {
        margin-bottom: 13px;
    }

    .journey-node {
        width: 64px;
        height: 64px;
        margin-bottom: 19px;
    }

    .journey-node-inner {
        width: 49px;
        height: 49px;
        font-size: 18px;
    }

    .journey-card {
        min-height: 250px;
    }

        .journey-card h3 {
            font-size: 22px;
        }

        .journey-card p {
            font-size: 12px;
        }
}


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

@media (max-width: 650px) {

    .financial-journey {
        padding: 75px 20px 55px;
    }

    .journey-heading {
        margin-bottom: 30px;
        text-align: left;
    }

    .journey-eyebrow {
        justify-content: flex-start;
        gap: 9px;
        font-size: 10px;
        letter-spacing: 1.6px;
    }

    .journey-eyebrow-icon {
        width: 32px;
        height: 32px;
        border-radius: 10px;
    }

    .journey-eyebrow-line {
        width: 23px;
    }

    .journey-heading h2 {
        font-size: clamp(33px, 8vw, 45px);
        line-height: 1.22;
        letter-spacing: -.8px;
    }

    .journey-heading > p {
        margin: 15px 0 0;
        font-size: 12px;
        line-height: 1.9;
    }

    .journey-highlight {
        margin-bottom: 45px;
        padding: 15px;
        gap: 12px;
        border-radius: 15px;
    }

    .journey-highlight-icon {
        width: 42px;
        height: 42px;
        font-size: 17px;
    }

    .journey-highlight-content strong {
        font-size: 12px;
    }

    .journey-highlight-content span {
        font-size: 10px;
    }

    .journey-highlight-decoration {
        font-size: 22px;
    }


    /* Vertical Timeline */

    .journey-timeline {
        display: flex;
        flex-direction: column;
        gap: 30px;
        padding-left: 0;
    }

    .journey-track {
        position: absolute;
        display: block;
        top: 48px;
        bottom: 70px;
        left: 30px;
        right: auto;
        width: 3px;
        height: auto;
        border-radius: 10px;
        background: rgba(255, 255, 255, .12);
    }

    .journey-track-base {
        width: 100%;
        height: 100%;
    }

    .journey-track-progress {
        width: 100%;
        height: 0;
        transition: height 1.8s cubic-bezier(.2, .8, .2, 1);
    }

    .journey-step {
        display: grid;
        grid-template-columns: 62px minmax(0, 1fr);
        column-gap: 15px;
        align-items: start;
        opacity: 0;
        transform: translateX(25px) rotateY(-4deg);
        transition: opacity .7s ease, transform .7s cubic-bezier(.2, .75, .25, 1);
    }

    .financial-journey.journey-visible .journey-step {
        opacity: 1;
        transform: translateX(0) rotateY(0);
    }

    .journey-step-top {
        grid-column: 2;
        grid-row: 1;
        min-height: 27px;
        margin: 0 0 10px;
    }

    .journey-step-label {
        font-size: 10px;
        letter-spacing: 1.5px;
    }

    .journey-step-number {
        font-size: 21px;
    }

    .journey-node {
        grid-column: 1;
        grid-row: 1 / span 2;
        width: 58px;
        height: 58px;
        margin: 0;
        justify-self: center;
        border-radius: 17px;
        transform: rotate(-5deg);
    }

    .journey-node-inner {
        width: 45px;
        height: 45px;
        border-radius: 13px;
        font-size: 17px;
        transform: translateZ(10px) rotate(5deg);
    }

    .journey-card {
        grid-column: 2;
        grid-row: 2;
        min-height: 0;
        padding: 18px 16px;
        border-radius: 16px;
    }

    .journey-card-top {
        margin-bottom: 17px;
    }

    .journey-card-icon {
        width: 41px;
        height: 41px;
        border-radius: 12px;
        font-size: 16px;
    }

    .journey-card h3 {
        margin-bottom: 9px;
        font-size: 20px;
    }

    .journey-card p {
        font-size: 12px;
        line-height: 1.85;
    }

    .journey-card-divider {
        margin: 15px 0 12px;
        padding-top: 0;
    }

    .journey-card-footer {
        font-size: 10px;
        line-height: 1.6;
    }

    .journey-card-watermark {
        right: -7px;
        bottom: 38px;
        font-size: 75px;
    }

    .journey-bottom {
        margin-top: 40px;
        padding-top: 22px;
        gap: 15px;
    }

    .journey-bottom-left {
        gap: 10px;
    }

    .journey-bottom-icon {
        width: 31px;
        height: 31px;
        border-radius: 9px;
        font-size: 12px;
    }

    .journey-bottom-left p {
        font-size: 10px;
    }

    .journey-bottom-decoration {
        display: none;
    }

    .journey-ring-one {
        width: 220px;
        height: 220px;
        right: -100px;
    }

    .journey-ring-two {
        width: 260px;
        height: 260px;
        right: -130px;
    }

    .journey-grid {
        background-size: 45px 45px;
    }
}


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

@media (max-width: 380px) {

    .financial-journey {
        padding-right: 14px;
        padding-left: 14px;
    }

    .journey-step {
        grid-template-columns: 48px minmax(0, 1fr);
        column-gap: 11px;
    }

    .journey-track {
        left: 22px;
    }

    .journey-node {
        width: 45px;
        height: 45px;
        border-radius: 13px;
    }

    .journey-node-inner {
        width: 35px;
        height: 35px;
        border-radius: 9px;
        font-size: 14px;
    }

    .journey-card {
        padding: 15px 13px;
    }

        .journey-card h3 {
            font-size: 18px;
        }

        .journey-card p {
            font-size: 10px;
        }

    .journey-card-icon {
        width: 37px;
        height: 37px;
    }

    .journey-card-watermark {
        font-size: 60px;
    }
}


/* =========================================
   ACCESSIBILITY
========================================= */

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

    .financial-journey *,
    .financial-journey *::before,
    .financial-journey *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }

    .journey-grid {
        animation: none;
    }
}








/* =========================================================
   BUBNA FINANCE — DIGITAL PARTNERS SECTION
   Theme: Light | Navy Blue | Saffron Gold
   Effects: 3D Cards | Animated Background | Floating Orbits
========================================================= */

.partner-section {
    --partner-navy: #0B2E59;
    --partner-navy-dark: #061D3A;
    --partner-blue: #164776;
    --partner-orange: #F28C28;
    --partner-gold: #F5B544;
    --partner-text: #183454;
    --partner-muted: #687B95;
    --partner-white: #FFFFFF;
    --partner-border: rgba(11, 46, 89, 0.10);
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 115px 0 100px;
    background: radial-gradient( ellipse at 8% 15%, rgba(255, 224, 184, 0.45), transparent 32% ), radial-gradient( ellipse at 92% 75%, rgba(193, 220, 250, 0.45), transparent 34% ), linear-gradient( 135deg, #FFFFFF 0%, #F8FAFD 48%, #FFF9F1 100% );
    color: var(--partner-text);
    perspective: 1400px;
    transform-style: preserve-3d;
}


/* =========================================================
   BACKGROUND LAYERS
========================================================= */

.partner-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    perspective: 1000px;
    transform-style: preserve-3d;
}


/* Animated grid */

.partner-bg-grid {
    position: absolute;
    inset: -35%;
    background-image: linear-gradient( rgba(11, 46, 89, 0.045) 1px, transparent 1px ), linear-gradient( 90deg, rgba(11, 46, 89, 0.045) 1px, transparent 1px );
    background-size: 58px 58px;
    opacity: 0.65;
    transform: perspective(800px) rotateX(55deg) rotateZ(-12deg) scale(1.5);
    transform-origin: center center;
    animation: partnerGridMove 22s linear infinite;
}


@keyframes partnerGridMove {
    0% {
        background-position: 0 0;
        transform: perspective(800px) rotateX(55deg) rotateZ(-12deg) translate3d(0, 0, 0) scale(1.5);
    }

    50% {
        background-position: 58px 58px;
        transform: perspective(800px) rotateX(55deg) rotateZ(-12deg) translate3d(0, -20px, 25px) scale(1.5);
    }

    100% {
        background-position: 116px 116px;
        transform: perspective(800px) rotateX(55deg) rotateZ(-12deg) translate3d(0, 0, 0) scale(1.5);
    }
}


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

.partner-glow {
    position: absolute;
    width: 380px;
    height: 380px;
    border-radius: 50%;
    filter: blur(75px);
    opacity: 0.36;
    transform: translateZ(0);
    will-change: transform;
}


.partner-glow-one {
    top: 3%;
    left: -180px;
    background: radial-gradient( circle, rgba(255, 174, 74, 0.55), rgba(255, 220, 176, 0.12) 60%, transparent 75% );
    animation: partnerGlowOne 12s ease-in-out infinite alternate;
}


.partner-glow-two {
    right: -180px;
    bottom: 0;
    background: radial-gradient( circle, rgba(111, 170, 239, 0.48), rgba(205, 228, 255, 0.12) 60%, transparent 75% );
    animation: partnerGlowTwo 14s ease-in-out infinite alternate;
}


@keyframes partnerGlowOne {
    0% {
        transform: translate3d(0, 0, 0) scale(0.85);
    }

    50% {
        transform: translate3d(100px, 90px, 80px) scale(1.15);
    }

    100% {
        transform: translate3d(40px, 170px, 20px) scale(1);
    }
}


@keyframes partnerGlowTwo {
    0% {
        transform: translate3d(0, 0, 0) scale(0.9);
    }

    50% {
        transform: translate3d(-100px, -80px, 70px) scale(1.2);
    }

    100% {
        transform: translate3d(-50px, -150px, 0) scale(0.95);
    }
}


/* =========================================================
   3D ORBITS
========================================================= */

.partner-orbit {
    position: absolute;
    border: 1px solid rgba(242, 140, 40, 0.24);
    border-radius: 50%;
    transform-style: preserve-3d;
    will-change: transform;
}


.partner-orbit-one {
    width: 520px;
    height: 520px;
    top: -240px;
    right: -100px;
    transform: perspective(900px) rotateX(65deg) rotateY(-20deg);
    animation: partnerOrbitOne 22s linear infinite;
}


.partner-orbit-two {
    width: 350px;
    height: 350px;
    bottom: -170px;
    left: -90px;
    border-color: rgba(11, 46, 89, 0.15);
    transform: perspective(900px) rotateX(65deg) rotateY(25deg);
    animation: partnerOrbitTwo 18s linear infinite;
}


    .partner-orbit-one::before,
    .partner-orbit-two::before {
        content: "";
        position: absolute;
        inset: 20px;
        border: 1px dashed rgba(242, 140, 40, 0.25);
        border-radius: inherit;
    }


    .partner-orbit-one::after,
    .partner-orbit-two::after {
        content: "";
        position: absolute;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: var(--partner-orange);
        box-shadow: 0 0 0 7px rgba(242, 140, 40, 0.10), 0 0 25px rgba(242, 140, 40, 0.55);
        top: 12%;
        left: 50%;
    }


@keyframes partnerOrbitOne {
    from {
        transform: perspective(900px) rotateX(65deg) rotateY(-20deg) rotateZ(0deg);
    }

    to {
        transform: perspective(900px) rotateX(65deg) rotateY(-20deg) rotateZ(360deg);
    }
}


@keyframes partnerOrbitTwo {
    from {
        transform: perspective(900px) rotateX(65deg) rotateY(25deg) rotateZ(360deg);
    }

    to {
        transform: perspective(900px) rotateX(65deg) rotateY(25deg) rotateZ(0deg);
    }
}


/* =========================================================
   FLOATING 3D SHAPES
========================================================= */

.partner-floating-shape {
    position: absolute;
    border: 1px solid rgba(242, 140, 40, 0.30);
    border-radius: 16px;
    background: linear-gradient( 145deg, rgba(255, 255, 255, 0.75), rgba(255, 226, 192, 0.12) );
    box-shadow: 10px 15px 35px rgba(11, 46, 89, 0.05), inset 0 0 20px rgba(255, 255, 255, 0.75);
    transform-style: preserve-3d;
    backdrop-filter: blur(5px);
    will-change: transform;
}


.shape-one {
    width: 68px;
    height: 68px;
    top: 20%;
    left: 4%;
    transform: rotateX(55deg) rotateY(35deg) rotateZ(35deg);
    animation: partnerShapeOne 8s ease-in-out infinite;
}


.shape-two {
    width: 48px;
    height: 48px;
    top: 12%;
    right: 15%;
    border-radius: 50%;
    background: linear-gradient( 135deg, rgba(255, 197, 113, 0.5), rgba(255, 255, 255, 0.9) );
    animation: partnerShapeTwo 7s ease-in-out infinite;
}


.shape-three {
    width: 75px;
    height: 75px;
    bottom: 14%;
    right: 5%;
    border-radius: 22px;
    transform: rotateX(55deg) rotateY(-30deg) rotateZ(25deg);
    animation: partnerShapeThree 10s ease-in-out infinite;
}


@keyframes partnerShapeOne {
    0%, 100% {
        transform: translate3d(0, 0, 20px) rotateX(55deg) rotateY(35deg) rotateZ(35deg);
    }

    50% {
        transform: translate3d(20px, -35px, 65px) rotateX(95deg) rotateY(80deg) rotateZ(120deg);
    }
}


@keyframes partnerShapeTwo {
    0%, 100% {
        transform: translate3d(0, 0, 20px) rotateY(0deg);
    }

    50% {
        transform: translate3d(-25px, 35px, 75px) rotateY(180deg);
    }
}


@keyframes partnerShapeThree {
    0%, 100% {
        transform: translate3d(0, 0, 10px) rotateX(55deg) rotateY(-30deg) rotateZ(25deg);
    }

    50% {
        transform: translate3d(-25px, -30px, 70px) rotateX(120deg) rotateY(70deg) rotateZ(95deg);
    }
}


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

.partner-container {
    position: relative;
    z-index: 2;
    width: min(1240px, calc(100% - 64px));
    margin-inline: auto;
}


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

.partner-heading {
    max-width: 850px;
    margin: 0 auto 65px;
    text-align: center;
    transform-style: preserve-3d;
}


.partner-eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 22px;
    color: var(--partner-navy);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2.5px;
    text-transform: uppercase;
}


.partner-eyebrow-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    color: var(--partner-orange);
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(242, 140, 40, 0.25);
    border-radius: 13px;
    box-shadow: 0 8px 20px rgba(11, 46, 89, 0.07), 0 0 18px rgba(242, 140, 40, 0.08);
    transform: translateZ(25px);
    animation: partnerIconFloat 4s ease-in-out infinite;
}


    .partner-eyebrow-icon svg {
        display: block;
        width: 19px;
        height: 19px;
    }


.partner-eyebrow-line {
    width: 38px;
    height: 2px;
    background: linear-gradient( 90deg, var(--partner-orange), rgba(242, 140, 40, 0.15) );
    border-radius: 5px;
}


.partner-heading h2 {
    margin: 0 auto 20px;
    max-width: 850px;
    color: var(--partner-navy-dark);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(35px, 4.5vw, 59px);
    font-weight: 700;
    line-height: 1.13;
    letter-spacing: -1.8px;
    text-wrap: balance;
}


    .partner-heading h2 span {
        display: inline;
        color: var(--partner-orange);
        background: linear-gradient( 100deg, #E77A16 0%, #F7AD40 48%, #D97712 100% );
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }


.partner-heading > p {
    max-width: 690px;
    margin: 0 auto;
    color: var(--partner-muted);
    font-size: 14px;
    line-height: 1.9;
}


/* =========================================================
   PARTNER CARDS GRID
========================================================= */

.partner-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 34px;
    align-items: stretch;
    perspective: 1400px;
    transform-style: preserve-3d;
}


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

.partner-card {
    --card-x: 0deg;
    --card-y: 0deg;
    position: relative;
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: 30px;
    overflow: hidden;
    border: 1px solid rgba(11, 46, 89, 0.10);
    border-radius: 30px;
    transform-style: preserve-3d;
    transform: perspective(1200px) rotateX(var(--card-x)) rotateY(var(--card-y)) translateZ(0);
    transition: transform 0.25s ease, box-shadow 0.4s ease, border-color 0.4s ease;
    box-shadow: 0 18px 45px rgba(11, 46, 89, 0.07), 0 3px 10px rgba(11, 46, 89, 0.025);
    will-change: transform;
}


/* Turrant — Navy card */

.partner-card-turrant {
    color: #FFFFFF;
    background: radial-gradient( circle at 85% 12%, rgba(72, 133, 195, 0.32), transparent 36% ), linear-gradient( 145deg, #123F70 0%, #0B2E59 55%, #061D3A 100% );
    border-color: rgba(242, 140, 40, 0.22);
    box-shadow: 0 22px 55px rgba(11, 46, 89, 0.17), inset 0 1px 0 rgba(255, 255, 255, 0.13);
}


/* KredSetu — White card */

.partner-card-kredsetu {
    color: var(--partner-text);
    background: radial-gradient( circle at 90% 5%, rgba(255, 221, 171, 0.42), transparent 35% ), linear-gradient( 145deg, #FFFFFF 0%, #FFFFFF 55%, #FFF9F1 100% );
    border-color: rgba(242, 140, 40, 0.17);
}


/* Animated light streak */

.partner-card::before {
    content: "";
    position: absolute;
    top: -100%;
    left: -70%;
    width: 55%;
    height: 300%;
    background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.16), transparent );
    transform: rotate(25deg) translateZ(35px);
    pointer-events: none;
    opacity: 0;
    transition: left 0.8s ease, opacity 0.35s ease;
}


.partner-card:hover::before {
    left: 130%;
    opacity: 1;
}


/* Card border glow */

.partner-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient( 135deg, rgba(242, 140, 40, 0.70), transparent 35%, transparent 65%, rgba(242, 140, 40, 0.45) );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}


.partner-card:hover::after {
    opacity: 1;
}


.partner-card:hover {
    border-color: rgba(242, 140, 40, 0.45);
    box-shadow: 0 35px 70px rgba(11, 46, 89, 0.16), 0 10px 28px rgba(242, 140, 40, 0.09);
    z-index: 3;
}


.partner-card-turrant:hover {
    box-shadow: 0 35px 75px rgba(11, 46, 89, 0.24), 0 10px 30px rgba(242, 140, 40, 0.10);
}


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

.partner-card-bg {
    position: absolute;
    width: 280px;
    height: 280px;
    right: -130px;
    top: 100px;
    border: 1px solid rgba(242, 140, 40, 0.16);
    border-radius: 50%;
    pointer-events: none;
    transform: translateZ(-10px);
    animation: partnerCardOrbit 22s linear infinite;
}


    .partner-card-bg::before,
    .partner-card-bg::after {
        content: "";
        position: absolute;
        inset: 22px;
        border: 1px dashed rgba(242, 140, 40, 0.15);
        border-radius: 50%;
    }


    .partner-card-bg::after {
        inset: 50px;
        border-style: solid;
        border-color: rgba(242, 140, 40, 0.11);
    }


@keyframes partnerCardOrbit {
    from {
        transform: translateZ(-10px) rotate(0deg);
    }

    to {
        transform: translateZ(-10px) rotate(360deg);
    }
}


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

.partner-card-top {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    transform: translateZ(25px);
}


.partner-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 13px;
    color: var(--partner-orange);
    background: rgba(242, 140, 40, 0.10);
    border: 1px solid rgba(242, 140, 40, 0.20);
    border-radius: 30px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.4px;
}


    .partner-label::before {
        content: "";
        width: 6px;
        height: 6px;
        flex-shrink: 0;
        border-radius: 50%;
        background: var(--partner-orange);
        box-shadow: 0 0 10px rgba(242, 140, 40, 0.65);
        animation: partnerPulse 2s ease-in-out infinite;
    }


.partner-card-turrant .partner-label {
    color: #FFD39A;
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.14);
}


.partner-number {
    color: rgba(242, 140, 40, 0.40);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 43px;
    font-weight: 700;
    line-height: 1;
    transition: transform 0.5s ease, color 0.5s ease;
    transform: translateZ(25px);
}


.partner-card-turrant .partner-number {
    color: rgba(255, 255, 255, 0.20);
}


.partner-card:hover .partner-number {
    color: var(--partner-orange);
    transform: translate3d(-5px, -5px, 30px) rotate(-5deg);
}


/* =========================================================
   PARTNER VISUAL / LOGO
========================================================= */

.partner-visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
    margin: 10px 0 15px;
    isolation: isolate;
    transform-style: preserve-3d;
    perspective: 800px;
}


/* Logo orbital rings */

.partner-visual-orbit {
    position: absolute;
    width: 175px;
    height: 175px;
    border: 1px solid rgba(242, 140, 40, 0.30);
    border-radius: 50%;
    transform-style: preserve-3d;
    pointer-events: none;
}


    .partner-visual-orbit.orbit-a {
        transform: rotateX(65deg) rotateY(15deg);
        animation: partnerLogoOrbitA 10s linear infinite;
    }


    .partner-visual-orbit.orbit-b {
        width: 145px;
        height: 145px;
        border-color: rgba(242, 140, 40, 0.20);
        transform: rotateX(35deg) rotateY(55deg);
        animation: partnerLogoOrbitB 13s linear infinite;
    }


    .partner-visual-orbit::before {
        content: "";
        position: absolute;
        width: 9px;
        height: 9px;
        top: 13%;
        left: 15%;
        border-radius: 50%;
        background: var(--partner-orange);
        box-shadow: 0 0 0 5px rgba(242, 140, 40, 0.12), 0 0 18px rgba(242, 140, 40, 0.65);
    }


    .partner-visual-orbit.orbit-b::before {
        top: auto;
        left: auto;
        right: 9%;
        bottom: 15%;
        width: 7px;
        height: 7px;
        background: var(--partner-gold);
    }


@keyframes partnerLogoOrbitA {
    from {
        transform: rotateX(65deg) rotateY(15deg) rotateZ(0deg);
    }

    to {
        transform: rotateX(65deg) rotateY(15deg) rotateZ(360deg);
    }
}


@keyframes partnerLogoOrbitB {
    from {
        transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
    }

    to {
        transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
    }
}


/* Outer halo */

.partner-logo-halo {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 148px;
    height: 148px;
    padding: 10px;
    border-radius: 50%;
    background: linear-gradient( 145deg, rgba(255, 255, 255, 0.95), rgba(255, 240, 217, 0.80) );
    border: 1px solid rgba(242, 140, 40, 0.42);
    box-shadow: 0 20px 35px rgba(11, 46, 89, 0.12), 0 0 0 8px rgba(255, 255, 255, 0.35), 0 0 45px rgba(242, 140, 40, 0.16), inset 0 0 18px rgba(242, 140, 40, 0.12);
    transform: translateZ(55px);
    transition: transform 0.6s cubic-bezier(.2, .8, .2, 1), box-shadow 0.5s ease;
    animation: partnerLogoFloat 4s ease-in-out infinite;
}


.partner-card:hover .partner-logo-halo {
    transform: translate3d(0, -8px, 80px) rotateY(8deg);
    box-shadow: 0 30px 45px rgba(11, 46, 89, 0.16), 0 0 0 10px rgba(255, 255, 255, 0.40), 0 0 55px rgba(242, 140, 40, 0.28);
}


/* Inner logo holder */

.partner-logo-inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 50%;
    background: #FFFFFF;
    border: 1px solid rgba(11, 46, 89, 0.08);
    box-shadow: inset 0 3px 10px rgba(11, 46, 89, 0.04);
}


/* Logo image */

.partner-logo {
    display: block;
    width: 80%;
    height: 80%;
    max-width: 110px;
    max-height: 110px;
    object-fit: contain;
    position: relative;
    z-index: 2;
    transform: translateZ(15px);
    filter: drop-shadow(0 5px 6px rgba(11, 46, 89, 0.08));
    transition: transform 0.55s ease, filter 0.55s ease;
}


.partner-card:hover .partner-logo {
    transform: translateZ(28px) scale(1.09);
    filter: drop-shadow(0 9px 12px rgba(11, 46, 89, 0.15));
}


/* Fallback logo */

.partner-logo-fallback {
    display: none;
    align-items: center;
    justify-content: center;
    position: absolute;
    inset: 0;
    color: var(--partner-navy);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 60px;
    font-weight: 700;
    background: linear-gradient( 135deg, #FFFFFF, #FFF0D9 );
    border-radius: 50%;
    text-shadow: 2px 3px 0 rgba(242, 140, 40, 0.20), 0 8px 20px rgba(11, 46, 89, 0.12);
}


/* Floating mini orbs */

.partner-mini-orb {
    position: absolute;
    display: block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: radial-gradient( circle at 30% 25%, #FFFFFF 0%, #FFD17D 35%, #F28C28 75%, #C96B0A 100% );
    box-shadow: 0 6px 12px rgba(242, 140, 40, 0.20), inset -2px -2px 4px rgba(160, 86, 10, 0.18);
    transform: translateZ(65px);
    pointer-events: none;
}


.mini-orb-one {
    top: 26px;
    right: calc(50% - 90px);
    animation: partnerMiniOrbOne 4s ease-in-out infinite;
}


.mini-orb-two {
    bottom: 25px;
    left: calc(50% - 95px);
    width: 11px;
    height: 11px;
    animation: partnerMiniOrbTwo 5s ease-in-out infinite;
}


@keyframes partnerMiniOrbOne {
    0%, 100% {
        transform: translate3d(0, 0, 45px);
    }

    50% {
        transform: translate3d(8px, -13px, 85px);
    }
}


@keyframes partnerMiniOrbTwo {
    0%, 100% {
        transform: translate3d(0, 0, 30px);
    }

    50% {
        transform: translate3d(-8px, 12px, 65px);
    }
}


@keyframes partnerLogoFloat {
    0%, 100% {
        transform: translate3d(0, 0, 55px);
    }

    50% {
        transform: translate3d(0, -7px, 65px);
    }
}


@keyframes partnerIconFloat {
    0%, 100% {
        transform: translateY(0) translateZ(25px);
    }

    50% {
        transform: translateY(-5px) translateZ(35px);
    }
}


/* =========================================================
   CARD CONTENT
========================================================= */

.partner-card-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    flex: 1;
    transform-style: preserve-3d;
}


.partner-name-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 16px;
    transform: translateZ(25px);
}


.partner-overline {
    display: block;
    margin-bottom: 8px;
    color: var(--partner-orange);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}


.partner-name-row h3 {
    margin: 0;
    color: var(--partner-text);
    font-size: 29px;
    font-weight: 800;
    letter-spacing: -0.8px;
    line-height: 1.2;
}


.partner-card-turrant .partner-name-row h3 {
    color: #FFFFFF;
}


.partner-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    flex-shrink: 0;
    color: var(--partner-orange);
    background: rgba(242, 140, 40, 0.10);
    border: 1px solid rgba(242, 140, 40, 0.20);
    border-radius: 15px;
    transform: translateZ(25px);
    transition: transform 0.45s ease, background 0.45s ease, color 0.45s ease;
}


    .partner-arrow svg {
        display: block;
        width: 21px;
        height: 21px;
    }


.partner-card-turrant .partner-arrow {
    color: #FFD39A;
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
}


.partner-card:hover .partner-arrow {
    color: #FFFFFF;
    background: var(--partner-orange);
    transform: translate3d(3px, -3px, 40px) rotate(8deg);
}


.partner-description {
    margin: 0 0 22px;
    color: var(--partner-muted);
    font-size: 14px;
    line-height: 1.9;
    transform: translateZ(18px);
}


.partner-card-turrant .partner-description {
    color: rgba(255, 255, 255, 0.77);
}


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

.partner-divider {
    width: 100%;
    height: 1px;
    margin: auto 0 20px;
    background: linear-gradient( 90deg, rgba(242, 140, 40, 0.55), rgba(11, 46, 89, 0.08), transparent );
}


.partner-card-turrant .partner-divider {
    background: linear-gradient( 90deg, rgba(242, 140, 40, 0.65), rgba(255, 255, 255, 0.17), transparent );
}


/* =========================================================
   PARTNER FEATURE
========================================================= */

.partner-feature {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
    color: var(--partner-text);
    font-size: 14px;
    font-weight: 700;
    transform: translateZ(20px);
}


.partner-card-turrant .partner-feature {
    color: rgba(255, 255, 255, 0.90);
}


.partner-feature-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    color: var(--partner-orange);
    background: rgba(242, 140, 40, 0.10);
    border: 1px solid rgba(242, 140, 40, 0.17);
    border-radius: 12px;
    transition: transform 0.4s ease, background 0.4s ease;
}


    .partner-feature-icon svg {
        display: block;
        width: 19px;
        height: 19px;
    }


.partner-card:hover .partner-feature-icon {
    transform: translateZ(30px) rotateY(180deg);
    background: rgba(242, 140, 40, 0.17);
}


.partner-card-turrant .partner-feature-icon {
    color: #FFD39A;
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.13);
}


/* =========================================================
   PARTNER LINK
========================================================= */

.partner-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-top: auto;
    padding: 15px 18px;
    color: #FFFFFF;
    background: linear-gradient( 100deg, #F28C28, #E77A16 );
    border: 1px solid rgba(242, 140, 40, 0.55);
    border-radius: 15px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.2px;
    box-shadow: 0 8px 18px rgba(242, 140, 40, 0.16);
    transform: translateZ(25px);
    transition: transform 0.4s ease, box-shadow 0.4s ease, background 0.4s ease;
}


.partner-card-kredsetu .partner-link {
    color: var(--partner-navy);
    background: rgba(255, 255, 255, 0.70);
    border-color: rgba(242, 140, 40, 0.40);
    box-shadow: 0 5px 15px rgba(11, 46, 89, 0.05);
}


.partner-link svg {
    display: block;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    transition: transform 0.35s ease;
}


.partner-link:hover {
    color: #FFFFFF;
    background: linear-gradient( 100deg, #D97712, #F28C28 );
    box-shadow: 0 15px 28px rgba(242, 140, 40, 0.25);
    transform: translate3d(0, -4px, 35px);
}


.partner-card-kredsetu .partner-link:hover {
    color: #FFFFFF;
}


.partner-link:hover svg {
    transform: translate(3px, -3px);
}


/* =========================================================
   BOTTOM CONNECTION STRIP
========================================================= */

.partner-bottom {
    position: relative;
    display: flex;
    align-items: center;
    gap: 22px;
    margin-top: 45px;
    padding: 27px 30px;
    overflow: hidden;
    border: 1px solid rgba(11, 46, 89, 0.10);
    border-radius: 23px;
    background: linear-gradient( 110deg, rgba(255, 255, 255, 0.96), rgba(255, 249, 241, 0.95) );
    box-shadow: 0 15px 40px rgba(11, 46, 89, 0.06), inset 0 1px 0 #FFFFFF;
    transform-style: preserve-3d;
    transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}


    .partner-bottom::before {
        content: "";
        position: absolute;
        top: 0;
        left: -100%;
        width: 60%;
        height: 100%;
        background: linear-gradient( 90deg, transparent, rgba(255, 207, 137, 0.20), transparent );
        transform: skewX(-20deg);
        animation: partnerBottomShine 8s ease-in-out infinite;
        pointer-events: none;
    }


@keyframes partnerBottomShine {
    0%, 20% {
        left: -100%;
    }

    60%, 100% {
        left: 150%;
    }
}


.partner-bottom:hover {
    border-color: rgba(242, 140, 40, 0.30);
    box-shadow: 0 24px 48px rgba(11, 46, 89, 0.09), 0 8px 24px rgba(242, 140, 40, 0.06);
    transform: translateY(-4px);
}


.partner-bottom-icon {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 55px;
    height: 55px;
    flex-shrink: 0;
    color: var(--partner-orange);
    background: linear-gradient( 145deg, #FFFFFF, #FFF0D9 );
    border: 1px solid rgba(242, 140, 40, 0.24);
    border-radius: 17px;
    box-shadow: 0 9px 20px rgba(11, 46, 89, 0.06), inset 0 1px 0 #FFFFFF;
    transform: translateZ(30px);
    transition: transform 0.45s ease;
}


    .partner-bottom-icon svg {
        display: block;
        width: 25px;
        height: 25px;
    }


.partner-bottom:hover .partner-bottom-icon {
    transform: translate3d(0, -4px, 45px) rotateY(180deg);
}


.partner-bottom-copy {
    position: relative;
    z-index: 1;
    flex: 1;
    min-width: 0;
    transform: translateZ(20px);
}


    .partner-bottom-copy h4 {
        margin: 0 0 7px;
        color: var(--partner-navy-dark);
        font-size: 17px;
        font-weight: 800;
        line-height: 1.5;
    }


    .partner-bottom-copy p {
        margin: 0;
        color: var(--partner-muted);
        font-size: 14px;
        line-height: 1.8;
    }


.partner-bottom-link {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-shrink: 0;
    padding: 14px 19px;
    color: #FFFFFF;
    background: linear-gradient( 110deg, var(--partner-navy), var(--partner-navy-dark) );
    border: 1px solid rgba(242, 140, 40, 0.65);
    border-radius: 13px;
    text-decoration: none;
    font-size: 12px;
    font-weight: 800;
    box-shadow: 0 7px 18px rgba(11, 46, 89, 0.12);
    transform: translateZ(25px);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}


    .partner-bottom-link svg {
        display: block;
        width: 19px;
        height: 19px;
        transition: transform 0.35s ease;
    }


    .partner-bottom-link:hover {
        transform: translate3d(0, -3px, 35px);
        box-shadow: 0 14px 25px rgba(11, 46, 89, 0.20), 0 4px 15px rgba(242, 140, 40, 0.12);
    }


        .partner-bottom-link:hover svg {
            transform: translateX(4px);
        }


/* =========================================================
   REVEAL ANIMATIONS
   JavaScript adds .partner-visible
========================================================= */

.partner-reveal {
    opacity: 0;
    transform: perspective(1000px) translate3d(0, 35px, -25px) rotateX(5deg);
    transition: opacity 0.8s ease, transform 0.9s cubic-bezier(.2, .8, .2, 1);
}


    .partner-reveal.partner-visible {
        opacity: 1;
        transform: perspective(1000px) translate3d(0, 0, 0) rotateX(0deg);
    }


.partner-card.partner-reveal {
    transition: opacity 0.8s ease, transform 0.9s cubic-bezier(.2, .8, .2, 1), box-shadow 0.4s ease, border-color 0.4s ease;
}


.partner-cards .partner-card:nth-child(2) {
    transition-delay: 0.15s;
}


/* =========================================================
   SMALL PULSE ANIMATION
========================================================= */

@keyframes partnerPulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.55;
        transform: scale(0.78);
    }
}


/* =========================================================
   RESPONSIVE — LAPTOP
========================================================= */

@media (max-width: 1100px) {

    .partner-section {
        padding: 95px 0 85px;
    }

    .partner-container {
        width: min(100% - 48px, 960px);
    }

    .partner-heading {
        margin-bottom: 50px;
    }

        .partner-heading h2 {
            font-size: clamp(36px, 5vw, 52px);
        }

    .partner-cards {
        gap: 24px;
    }

    .partner-card {
        padding: 25px;
        border-radius: 25px;
    }

    .partner-visual {
        height: 180px;
    }

    .partner-logo-halo {
        width: 135px;
        height: 135px;
    }

    .partner-visual-orbit {
        width: 160px;
        height: 160px;
    }

        .partner-visual-orbit.orbit-b {
            width: 130px;
            height: 130px;
        }

    .partner-bottom {
        margin-top: 35px;
    }
}


/* =========================================================
   RESPONSIVE — TABLET
========================================================= */

@media (max-width: 768px) {

    .partner-section {
        padding: 80px 0 70px;
    }

    .partner-container {
        width: calc(100% - 36px);
    }

    .partner-heading {
        margin-bottom: 40px;
    }

    .partner-eyebrow {
        gap: 9px;
        font-size: 10px;
        letter-spacing: 1.8px;
    }

    .partner-eyebrow-icon {
        width: 34px;
        height: 34px;
    }

    .partner-heading h2 {
        font-size: clamp(32px, 6vw, 45px);
        letter-spacing: -1px;
        line-height: 1.18;
    }

    .partner-heading > p {
        max-width: 580px;
        font-size: 14px;
        line-height: 1.8;
    }

    .partner-cards {
        grid-template-columns: 1fr;
        max-width: 560px;
        margin-inline: auto;
        gap: 25px;
    }

    .partner-card {
        padding: 27px;
    }

    .partner-visual {
        height: 190px;
    }

    .partner-logo-halo {
        width: 145px;
        height: 145px;
    }

    .partner-visual-orbit {
        width: 170px;
        height: 170px;
    }

        .partner-visual-orbit.orbit-b {
            width: 145px;
            height: 145px;
        }

    .partner-bottom {
        align-items: flex-start;
        gap: 17px;
        padding: 23px;
        flex-wrap: wrap;
    }

    .partner-bottom-copy {
        flex-basis: calc(100% - 80px);
    }

        .partner-bottom-copy h4 {
            font-size: 16px;
        }

    .partner-bottom-link {
        margin-left: 72px;
    }

    .partner-orbit-one {
        right: -280px;
    }

    .partner-orbit-two {
        left: -230px;
    }

    .partner-floating-shape {
        opacity: 0.65;
    }
}


/* =========================================================
   RESPONSIVE — MOBILE
========================================================= */

@media (max-width: 480px) {

    .partner-section {
        padding: 65px 0 60px;
    }

    .partner-container {
        width: calc(100% - 28px);
    }

    .partner-heading {
        margin-bottom: 32px;
    }

    .partner-eyebrow {
        flex-wrap: wrap;
        gap: 8px;
        font-size: 8px;
        letter-spacing: 1.2px;
    }

    .partner-eyebrow-icon {
        width: 30px;
        height: 30px;
        border-radius: 10px;
    }

        .partner-eyebrow-icon svg {
            width: 16px;
            height: 16px;
        }

    .partner-eyebrow-line {
        width: 22px;
    }

    .partner-heading h2 {
        margin-bottom: 15px;
        font-size: clamp(29px, 8vw, 37px);
        line-height: 1.18;
        letter-spacing: -0.7px;
    }

    .partner-heading > p {
        font-size: 12px;
        line-height: 1.8;
    }

    .partner-cards {
        gap: 20px;
    }

    .partner-card {
        padding: 21px;
        border-radius: 23px;
    }

    .partner-card-top {
        gap: 10px;
    }

    .partner-label {
        padding: 8px 10px;
        font-size: 8px;
        letter-spacing: 0.9px;
    }

    .partner-number {
        font-size: 35px;
    }

    .partner-visual {
        height: 165px;
        margin: 10px 0;
    }

    .partner-logo-halo {
        width: 125px;
        height: 125px;
    }

    .partner-visual-orbit {
        width: 150px;
        height: 150px;
    }

        .partner-visual-orbit.orbit-b {
            width: 125px;
            height: 125px;
        }

    .partner-logo-fallback {
        font-size: 49px;
    }

    .partner-name-row {
        margin-bottom: 12px;
    }

        .partner-name-row h3 {
            font-size: 25px;
        }

    .partner-overline {
        font-size: 8px;
        letter-spacing: 1.1px;
    }

    .partner-arrow {
        width: 39px;
        height: 39px;
        border-radius: 12px;
    }

    .partner-description {
        margin-bottom: 18px;
        font-size: 12px;
        line-height: 1.85;
    }

    .partner-divider {
        margin-bottom: 17px;
    }

    .partner-feature {
        gap: 10px;
        margin-bottom: 20px;
        font-size: 10px;
        line-height: 1.6;
    }

    .partner-feature-icon {
        width: 34px;
        height: 34px;
        border-radius: 10px;
    }

        .partner-feature-icon svg {
            width: 17px;
            height: 17px;
        }

    .partner-link {
        padding: 13px 15px;
        border-radius: 13px;
        font-size: 10px;
    }

        .partner-link svg {
            width: 18px;
            height: 18px;
        }

    .partner-bottom {
        gap: 13px;
        margin-top: 25px;
        padding: 19px;
        border-radius: 19px;
    }

    .partner-bottom-icon {
        width: 43px;
        height: 43px;
        border-radius: 13px;
    }

        .partner-bottom-icon svg {
            width: 21px;
            height: 21px;
        }

    .partner-bottom-copy {
        flex-basis: calc(100% - 60px);
    }

        .partner-bottom-copy h4 {
            font-size: 14px;
            line-height: 1.5;
        }

        .partner-bottom-copy p {
            font-size: 10px;
            line-height: 1.7;
        }

    .partner-bottom-link {
        width: 100%;
        margin: 4px 0 0;
        padding: 13px 16px;
        justify-content: space-between;
        border-radius: 12px;
    }

    .partner-glow {
        width: 250px;
        height: 250px;
        filter: blur(55px);
    }

    .partner-orbit-one {
        width: 300px;
        height: 300px;
        top: -120px;
        right: -220px;
    }

    .partner-orbit-two {
        width: 250px;
        height: 250px;
        bottom: 80px;
        left: -200px;
    }

    .shape-one {
        width: 42px;
        height: 42px;
        left: 1%;
    }

    .shape-two {
        width: 32px;
        height: 32px;
        right: 5%;
    }

    .shape-three {
        width: 45px;
        height: 45px;
        right: 1%;
    }

    .partner-bg-grid {
        background-size: 42px 42px;
        opacity: 0.4;
    }
}


/* =========================================================
   ACCESSIBILITY — REDUCED MOTION
========================================================= */

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

    .partner-section *,
    .partner-section *::before,
    .partner-section *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }

    .partner-reveal {
        opacity: 1;
        transform: none;
    }
}








/* =========================================================
   FINANCIAL AWARENESS — BUBNA FINANCE
   Dark Navy + Saffron | 3D Animated | Responsive
========================================================= */

.fa-awareness,
.fa-awareness * {
    box-sizing: border-box;
}

.fa-awareness {
    --fa-navy: #061A33;
    --fa-navy-light: #0B2E59;
    --fa-blue: #123D6C;
    --fa-orange: #F28C28;
    --fa-gold: #FFBB58;
    --fa-white: #FFFFFF;
    --fa-muted: #B7C8DE;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 115px 0 105px;
    background: radial-gradient( ellipse at 8% 8%, rgba(31, 92, 151, 0.28), transparent 34% ), radial-gradient( ellipse at 100% 85%, rgba(242, 140, 40, 0.12), transparent 32% ), linear-gradient( 125deg, #041329 0%, #071F3D 48%, #06172E 100% );
    color: var(--fa-white);
    font-family: "Outfit", "Inter", sans-serif;
}

    /* Prevent external CSS from distorting SVG icons */

    .fa-awareness svg {
        display: block;
        width: 100%;
        height: 100%;
    }

    .fa-awareness a {
        text-decoration: none;
    }

    .fa-awareness p,
    .fa-awareness h2,
    .fa-awareness h3,
    .fa-awareness h4 {
        margin-top: 0;
    }


/* =========================================================
   BACKGROUND SCENE
========================================================= */

.fa-scene {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    perspective: 1100px;
    transform-style: preserve-3d;
}

.fa-scene-grid {
    position: absolute;
    left: -25%;
    right: -25%;
    bottom: -26%;
    height: 72%;
    background-image: linear-gradient( rgba(101, 167, 224, 0.11) 1px, transparent 1px ), linear-gradient( 90deg, rgba(101, 167, 224, 0.11) 1px, transparent 1px );
    background-size: 54px 54px;
    transform: perspective(650px) rotateX(61deg) translateZ(-80px);
    transform-origin: center bottom;
    -webkit-mask-image: linear-gradient( to bottom, transparent 0%, rgba(0, 0, 0, 0.9) 38%, transparent 100% );
    mask-image: linear-gradient( to bottom, transparent 0%, rgba(0, 0, 0, 0.9) 38%, transparent 100% );
    animation: fa-grid-flow 15s linear infinite;
}

@keyframes fa-grid-flow {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 54px 108px;
    }
}


/* Ambient lighting */

.fa-light {
    position: absolute;
    border-radius: 50%;
    filter: blur(85px);
    opacity: 0.6;
    animation: fa-light-breathe 9s ease-in-out infinite alternate;
}

.fa-light-one {
    width: 380px;
    height: 380px;
    top: 2%;
    left: -140px;
    background: rgba(24, 99, 170, 0.35);
}

.fa-light-two {
    width: 430px;
    height: 430px;
    right: -140px;
    top: 22%;
    background: rgba(242, 140, 40, 0.15);
    animation-delay: -3s;
}

.fa-light-three {
    width: 320px;
    height: 320px;
    left: 40%;
    bottom: -180px;
    background: rgba(23, 89, 151, 0.25);
    animation-delay: -5s;
}

@keyframes fa-light-breathe {
    0% {
        transform: translate3d(-15px, 10px, 0) scale(0.9);
        opacity: 0.35;
    }

    100% {
        transform: translate3d(35px, -30px, 50px) scale(1.18);
        opacity: 0.72;
    }
}


/* 3D orbital rings */

.fa-orbit {
    position: absolute;
    border: 1px solid rgba(242, 140, 40, 0.19);
    border-radius: 50%;
    transform-style: preserve-3d;
}

.fa-orbit-one {
    width: 560px;
    height: 560px;
    right: -100px;
    top: 0;
    transform: rotateX(68deg) rotateZ(-25deg);
    animation: fa-orbit-rotate 24s linear infinite;
}

.fa-orbit-two {
    width: 390px;
    height: 390px;
    right: -20px;
    top: 100px;
    border-color: rgba(123, 180, 233, 0.2);
    transform: rotateX(65deg) rotateZ(35deg);
    animation: fa-orbit-reverse 19s linear infinite;
}

.fa-orbit-three {
    width: 260px;
    height: 260px;
    left: -150px;
    top: 32%;
    border-color: rgba(242, 140, 40, 0.12);
    transform: rotateX(70deg);
    animation: fa-orbit-reverse 28s linear infinite;
}

.fa-orbit-dot {
    position: absolute;
    width: 11px;
    height: 11px;
    top: 12%;
    left: 15%;
    border-radius: 50%;
    background: var(--fa-orange);
    box-shadow: 0 0 12px rgba(242, 140, 40, 0.9), 0 0 32px rgba(242, 140, 40, 0.55);
}

@keyframes fa-orbit-rotate {
    from {
        transform: rotateX(68deg) rotateZ(0deg);
    }

    to {
        transform: rotateX(68deg) rotateZ(360deg);
    }
}

@keyframes fa-orbit-reverse {
    from {
        transform: rotateX(65deg) rotateZ(360deg);
    }

    to {
        transform: rotateX(65deg) rotateZ(0deg);
    }
}


/* Floating 3D glass shapes */

.fa-glass-shape {
    position: absolute;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 28px;
    background: linear-gradient( 135deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.008) );
    box-shadow: inset 0 0 25px rgba(255, 255, 255, 0.025), 0 25px 80px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(3px);
    transform-style: preserve-3d;
}

.fa-shape-one {
    width: 90px;
    height: 90px;
    top: 15%;
    left: 46%;
    transform: rotate(35deg);
    animation: fa-cube-float 9s ease-in-out infinite;
}

.fa-shape-two {
    width: 60px;
    height: 60px;
    top: 63%;
    left: 4%;
    border-color: rgba(242, 140, 40, 0.3);
    transform: rotate(45deg);
    animation: fa-cube-float 7s ease-in-out infinite reverse;
}

.fa-shape-three {
    width: 120px;
    height: 120px;
    right: 5%;
    bottom: 9%;
    border-radius: 32px;
    transform: rotate(25deg);
    animation: fa-cube-float 11s ease-in-out infinite;
    animation-delay: -4s;
}

@keyframes fa-cube-float {
    0%, 100% {
        translate: 0 0;
        rotate: 0deg;
    }

    35% {
        translate: 12px -24px;
        rotate: 12deg;
    }

    70% {
        translate: -8px 10px;
        rotate: -8deg;
    }
}


/* Floating particles */

.fa-particle {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--fa-gold);
    box-shadow: 0 0 14px rgba(255, 187, 88, 0.85);
    animation: fa-particle-float 7s ease-in-out infinite;
}

.fa-particle-one {
    top: 16%;
    left: 27%;
}

.fa-particle-two {
    top: 39%;
    left: 53%;
    animation-delay: -2s;
}

.fa-particle-three {
    top: 74%;
    left: 34%;
    animation-delay: -4s;
}

.fa-particle-four {
    top: 27%;
    right: 9%;
    animation-delay: -1s;
}

.fa-particle-five {
    bottom: 13%;
    right: 34%;
    animation-delay: -3s;
}

@keyframes fa-particle-float {
    0%, 100% {
        transform: translate3d(0, 0, 0) scale(0.8);
        opacity: 0.35;
    }

    50% {
        transform: translate3d(12px, -32px, 50px) scale(1.5);
        opacity: 1;
    }
}


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

.fa-container {
    position: relative;
    z-index: 1;
    width: min(1280px, calc(100% - 70px));
    margin-inline: auto;
    display: grid;
    grid-template-columns: minmax(0, 0.91fr) minmax(0, 1.09fr);
    gap: clamp(55px, 7vw, 105px);
    align-items: start;
}


/* =========================================================
   LEFT CONTENT
========================================================= */

.fa-intro {
    position: sticky;
    top: 110px;
    padding-top: 15px;
}

.fa-eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 29px;
    color: var(--fa-gold);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2.5px;
}

.fa-eyebrow-icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border: 1px solid rgba(242, 140, 40, 0.35);
    border-radius: 13px;
    color: var(--fa-gold);
    background: linear-gradient( 145deg, rgba(242, 140, 40, 0.19), rgba(242, 140, 40, 0.035) );
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

    .fa-eyebrow-icon svg {
        width: 20px;
        height: 20px;
    }

.fa-eyebrow-line {
    width: 42px;
    height: 2px;
    margin-left: 4px;
    background: linear-gradient( 90deg, var(--fa-orange), transparent );
}


.fa-title {
    max-width: 610px;
    margin-bottom: 25px !important;
    color: #FFFFFF;
    font-size: clamp(44px, 4.5vw, 68px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -2.7px;
}

    .fa-title > span {
        display: block;
        color: var(--fa-orange);
        background: linear-gradient( 100deg, #F28C28 0%, #FFCA7B 45%, #F28C28 80% );
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        background-size: 200% auto;
        animation: fa-title-shimmer 6s linear infinite;
    }

@keyframes fa-title-shimmer {
    to {
        background-position: 200% center;
    }
}


.fa-description {
    max-width: 500px;
    margin-bottom: 34px !important;
    color: var(--fa-muted);
    font-size: 16px;
    line-height: 1.95;
}


/* Highlight items */

.fa-highlights {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 32px;
}

.fa-highlight {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 11px;
    min-width: 0;
    padding: 15px 12px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 17px;
    background: rgba(255, 255, 255, 0.035);
    transition: transform 0.4s ease, border-color 0.4s ease, background 0.4s ease;
}

    .fa-highlight:hover {
        transform: translateY(-7px);
        border-color: rgba(242, 140, 40, 0.45);
        background: rgba(242, 140, 40, 0.075);
    }

.fa-highlight-icon {
    display: grid;
    place-items: center;
    width: 39px;
    height: 39px;
    color: var(--fa-gold);
    border: 1px solid rgba(242, 140, 40, 0.25);
    border-radius: 12px;
    background: linear-gradient( 145deg, rgba(242, 140, 40, 0.2), rgba(242, 140, 40, 0.04) );
}

    .fa-highlight-icon svg {
        width: 20px;
        height: 20px;
    }

.fa-highlight strong,
.fa-highlight > div > span {
    display: block;
}

.fa-highlight strong {
    margin-bottom: 3px;
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 700;
}

.fa-highlight > div > span {
    color: #92A9C5;
    font-size: 14px;
    line-height: 1.5;
}


/* CTA */

.fa-cta {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    min-height: 59px;
    padding: 8px 10px 8px 23px;
    color: #FFFFFF !important;
    font-size: 14px;
    font-weight: 700;
    border: 1px solid rgba(242, 140, 40, 0.75);
    border-radius: 50px;
    background: linear-gradient( 115deg, #144476, #092443 );
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    transition: transform 0.35s ease, box-shadow 0.35s ease, background 0.35s ease;
}

    .fa-cta:hover {
        transform: translateY(-4px);
        background: linear-gradient( 115deg, #1A558C, #10335A );
        box-shadow: 0 18px 38px rgba(0, 0, 0, 0.27), 0 0 26px rgba(242, 140, 40, 0.15);
    }

.fa-cta-arrow {
    display: grid;
    place-items: center;
    width: 39px;
    height: 39px;
    flex: 0 0 39px;
    color: #061A33;
    border-radius: 50%;
    background: linear-gradient( 135deg, #FFD18A, #F28C28 );
    transition: transform 0.35s ease;
}

    .fa-cta-arrow svg {
        width: 19px;
        height: 19px;
    }

.fa-cta:hover .fa-cta-arrow {
    transform: rotate(-45deg);
}


.fa-note {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 23px;
    color: #91A8C3;
    font-size: 14px;
    line-height: 1.7;
}

.fa-note-dot {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 50%;
    background: var(--fa-orange);
    box-shadow: 0 0 13px rgba(242, 140, 40, 0.8);
}


/* =========================================================
   RIGHT CONTENT
========================================================= */

.fa-content {
    position: relative;
    min-width: 0;
    perspective: 1400px;
}

.fa-cards-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 25px;
}

.fa-section-index {
    display: inline-flex;
    align-items: center;
    min-height: 31px;
    padding: 0 12px;
    color: var(--fa-gold);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.8px;
    border: 1px solid rgba(242, 140, 40, 0.3);
    border-radius: 8px;
    background: rgba(242, 140, 40, 0.07);
}

.fa-cards-heading h3 {
    margin: 0 !important;
    color: #FFFFFF;
    font-size: clamp(22px, 2.3vw, 30px);
    font-weight: 750;
    line-height: 1.25;
    text-align: right;
    letter-spacing: -0.7px;
}

    .fa-cards-heading h3 span {
        color: var(--fa-gold);
    }


/* =========================================================
   3D CARDS
========================================================= */

.fa-card {
    --fa-card-glow-x: 50%;
    --fa-card-glow-y: 50%;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding: 24px 25px 18px;
    margin-bottom: 17px;
    border: 1px solid rgba(148, 182, 218, 0.2);
    border-radius: 23px;
    background: radial-gradient( circle at var(--fa-card-glow-x) var(--fa-card-glow-y), rgba(242, 140, 40, 0.12), transparent 45% ), linear-gradient( 125deg, rgba(17, 54, 92, 0.94), rgba(7, 29, 55, 0.96) );
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.075);
    transform-style: preserve-3d;
    will-change: transform;
    transition: border-color 0.45s ease, box-shadow 0.45s ease, background 0.45s ease;
}

    .fa-card::before {
        content: "";
        position: absolute;
        z-index: -1;
        inset: 0;
        opacity: 0;
        background: linear-gradient( 115deg, transparent 20%, rgba(255, 255, 255, 0.08) 45%, transparent 65% );
        transform: translateX(-100%);
        transition: transform 0.7s ease, opacity 0.4s ease;
    }

    .fa-card::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 0;
        height: 3px;
        background: linear-gradient( 90deg, var(--fa-orange), var(--fa-gold), transparent );
        transition: width 0.5s ease;
    }

    .fa-card:hover {
        border-color: rgba(242, 140, 40, 0.65);
        box-shadow: 0 30px 65px rgba(0, 0, 0, 0.28), 0 0 30px rgba(242, 140, 40, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    }

        .fa-card:hover::before {
            opacity: 1;
            transform: translateX(100%);
        }

        .fa-card:hover::after {
            width: 100%;
        }


/* Large background numbers */

.fa-card-watermark {
    position: absolute;
    z-index: -1;
    top: 10px;
    right: 19px;
    color: rgba(255, 255, 255, 0.045);
    font-family: Georgia, serif;
    font-size: 94px;
    font-weight: 700;
    line-height: 1;
    transform: translateZ(22px);
    transition: transform 0.5s ease, color 0.5s ease;
}

.fa-card:hover .fa-card-watermark {
    color: rgba(242, 140, 40, 0.12);
    transform: translate3d(-5px, -5px, 45px) rotate(-4deg);
}


/* Card top */

.fa-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 17px;
    transform: translateZ(28px);
}

.fa-card-icon {
    display: grid;
    place-items: center;
    width: 55px;
    height: 55px;
    flex: 0 0 55px;
    color: var(--fa-gold);
    border: 1px solid rgba(242, 140, 40, 0.32);
    border-radius: 17px;
    background: linear-gradient( 145deg, rgba(242, 140, 40, 0.2), rgba(242, 140, 40, 0.035) );
    box-shadow: 0 9px 25px rgba(0, 0, 0, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transition: transform 0.5s ease, box-shadow 0.5s ease, background 0.5s ease;
}

    .fa-card-icon svg {
        width: 26px;
        height: 26px;
    }

.fa-card:hover .fa-card-icon {
    transform: translate3d(0, -5px, 25px) rotateY(-12deg);
    background: linear-gradient( 145deg, rgba(242, 140, 40, 0.31), rgba(242, 140, 40, 0.09) );
    box-shadow: 0 15px 28px rgba(0, 0, 0, 0.2), 0 0 22px rgba(242, 140, 40, 0.12);
}

.fa-card-number {
    color: #9AB0CA;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
}


/* Card body */

.fa-card-body {
    position: relative;
    z-index: 1;
    transform: translateZ(20px);
}

.fa-card-kicker {
    display: inline-block;
    margin-bottom: 9px;
    color: var(--fa-gold);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.8px;
}

.fa-card-body h4 {
    margin-bottom: 10px !important;
    color: #FFFFFF;
    font-size: 22px;
    font-weight: 750;
    line-height: 1.35;
    letter-spacing: -0.45px;
    transition: color 0.3s ease;
}

.fa-card:hover .fa-card-body h4 {
    color: #FFD49A;
}

.fa-card-body p {
    max-width: 480px;
    margin-bottom: 20px !important;
    color: #AFC1D7;
    font-size: 14px;
    line-height: 1.85;
}


/* Card footer */

.fa-card-footer {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.09);
    color: #A9BCD3;
    font-size: 12px;
    font-weight: 600;
    transform: translateZ(15px);
}

.fa-card-footer-icon {
    display: grid;
    place-items: center;
    width: 25px;
    height: 25px;
    flex: 0 0 25px;
    color: var(--fa-gold);
    border-radius: 8px;
    background: rgba(242, 140, 40, 0.1);
}

    .fa-card-footer-icon svg {
        width: 16px;
        height: 16px;
    }

.fa-card-footer-line {
    height: 2px;
    flex: 1;
    border-radius: 5px;
    background: linear-gradient( 90deg, rgba(242, 140, 40, 0.65), rgba(242, 140, 40, 0.02) );
    transform: scaleX(0.4);
    transform-origin: left;
    transition: transform 0.45s ease;
}

.fa-card:hover .fa-card-footer-line {
    transform: scaleX(1);
}


/* Slight individual card offsets */

.fa-card-one {
    transform: translateX(0) rotateX(0deg);
}

.fa-card-two {
    transform: translateX(17px) rotateX(0deg);
}

.fa-card-three {
    transform: translateX(7px) rotateX(0deg);
}


/* =========================================================
   DISCLAIMER STRIP
========================================================= */

.fa-disclaimer {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    margin-top: 25px;
    padding: 17px 19px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.035);
    transition: border-color 0.35s ease, background 0.35s ease;
}

    .fa-disclaimer:hover {
        border-color: rgba(242, 140, 40, 0.28);
        background: rgba(242, 140, 40, 0.045);
    }

.fa-disclaimer-icon {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    color: var(--fa-gold);
    border-radius: 10px;
    background: rgba(242, 140, 40, 0.1);
}

    .fa-disclaimer-icon svg {
        width: 18px;
        height: 18px;
    }

.fa-disclaimer p {
    margin: 0 !important;
    color: #91A8C3;
    font-size: 14px;
    line-height: 1.8;
}


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

.fa-awareness .fa-reveal {
    opacity: 0;
    transform: translate3d(0, 35px, 0);
    transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.2, 0.75, 0.25, 1);
}

    .fa-awareness .fa-reveal.fa-visible {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }

.fa-awareness .fa-card-two.fa-reveal {
    transition-delay: 0.12s;
}

.fa-awareness .fa-card-three.fa-reveal {
    transition-delay: 0.22s;
}


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

.fa-bottom-edge {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient( 90deg, transparent, rgba(242, 140, 40, 0.65), rgba(125, 177, 225, 0.45), transparent );
}


/* =========================================================
   RESPONSIVE — LAPTOP
========================================================= */

@media (max-width: 1200px) {

    .fa-container {
        width: min(1100px, calc(100% - 50px));
        gap: 48px;
    }

    .fa-title {
        font-size: clamp(42px, 4.5vw, 58px);
    }

    .fa-card-two {
        transform: translateX(8px);
    }

    .fa-card-three {
        transform: translateX(3px);
    }
}


/* =========================================================
   RESPONSIVE — TABLET
========================================================= */

@media (max-width: 900px) {

    .fa-awareness {
        padding: 85px 0 80px;
    }

    .fa-container {
        grid-template-columns: 1fr;
        gap: 55px;
        width: min(760px, calc(100% - 44px));
    }

    .fa-intro {
        position: relative;
        top: auto;
        padding-top: 0;
    }

    .fa-title {
        max-width: 680px;
        font-size: clamp(44px, 7vw, 64px);
    }

    .fa-description {
        max-width: 620px;
    }

    .fa-highlights {
        max-width: 590px;
    }

    .fa-content {
        width: 100%;
    }

    .fa-card-two,
    .fa-card-three {
        transform: none;
    }

    .fa-card {
        margin-bottom: 18px;
    }

    .fa-orbit-one {
        right: -230px;
    }

    .fa-orbit-two {
        right: -160px;
    }

    .fa-shape-one {
        left: auto;
        right: 15%;
        top: 4%;
    }
}


/* =========================================================
   RESPONSIVE — MOBILE
========================================================= */

@media (max-width: 600px) {

    .fa-awareness {
        padding: 65px 0 60px;
    }

    .fa-container {
        width: calc(100% - 34px);
        gap: 42px;
    }

    .fa-eyebrow {
        flex-wrap: wrap;
        gap: 9px;
        margin-bottom: 24px;
        font-size: 10px;
        letter-spacing: 1.7px;
    }

    .fa-eyebrow-icon {
        width: 35px;
        height: 35px;
        flex-basis: 35px;
        border-radius: 11px;
    }

    .fa-eyebrow-line {
        width: 27px;
    }

    .fa-title {
        margin-bottom: 19px !important;
        font-size: clamp(39px, 10vw, 54px);
        line-height: 1.08;
        letter-spacing: -1.7px;
    }

    .fa-description {
        margin-bottom: 25px !important;
        font-size: 14px;
        line-height: 1.85;
    }

    .fa-highlights {
        gap: 8px;
        margin-bottom: 25px;
    }

    .fa-highlight {
        gap: 9px;
        padding: 12px 9px;
        border-radius: 13px;
    }

    .fa-highlight-icon {
        width: 34px;
        height: 34px;
        border-radius: 10px;
    }

        .fa-highlight-icon svg {
            width: 18px;
            height: 18px;
        }

    .fa-highlight strong {
        font-size: 10px;
    }

    .fa-highlight > div > span {
        font-size: 10px;
    }

    .fa-cta {
        width: 100%;
        gap: 12px;
        min-height: 56px;
        padding-left: 17px;
        font-size: 12px;
    }

    .fa-cta-arrow {
        width: 36px;
        height: 36px;
        flex-basis: 36px;
    }

    .fa-note {
        align-items: flex-start;
        font-size: 10px;
    }

    .fa-cards-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 13px;
        margin-bottom: 20px;
    }

        .fa-cards-heading h3 {
            text-align: left;
            font-size: 27px;
        }

    .fa-card {
        padding: 20px 18px 15px;
        border-radius: 19px;
        margin-bottom: 15px;
    }

    .fa-card-top {
        margin-bottom: 16px;
    }

    .fa-card-icon {
        width: 49px;
        height: 49px;
        flex-basis: 49px;
        border-radius: 15px;
    }

        .fa-card-icon svg {
            width: 23px;
            height: 23px;
        }

    .fa-card-watermark {
        top: 15px;
        right: 14px;
        font-size: 73px;
    }

    .fa-card-kicker {
        font-size: 8px;
        letter-spacing: 1.5px;
    }

    .fa-card-body h4 {
        font-size: 20px;
    }

    .fa-card-body p {
        font-size: 12px;
        line-height: 1.8;
        margin-bottom: 16px !important;
    }

    .fa-card-footer {
        gap: 8px;
        font-size: 10px;
    }

    .fa-card-footer-icon {
        width: 23px;
        height: 23px;
        flex-basis: 23px;
    }

    .fa-disclaimer {
        gap: 10px;
        padding: 14px;
        border-radius: 13px;
    }

        .fa-disclaimer p {
            font-size: 10px;
        }

    .fa-orbit-one {
        width: 340px;
        height: 340px;
        top: 18%;
        right: -230px;
    }

    .fa-orbit-two {
        width: 260px;
        height: 260px;
        top: 24%;
        right: -170px;
    }

    .fa-orbit-three {
        width: 200px;
        height: 200px;
    }

    .fa-shape-one {
        width: 55px;
        height: 55px;
        top: 5%;
        right: 8%;
    }

    .fa-shape-two {
        width: 42px;
        height: 42px;
        left: 2%;
    }

    .fa-shape-three {
        width: 65px;
        height: 65px;
        right: -15px;
    }
}


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

@media (max-width: 380px) {

    .fa-container {
        width: calc(100% - 26px);
    }

    .fa-title {
        font-size: 37px;
    }

    .fa-highlights {
        grid-template-columns: 1fr;
    }

    .fa-highlight {
        flex-direction: row;
        align-items: center;
        padding: 11px 12px;
    }

        .fa-highlight > div {
            display: flex;
            align-items: center;
            gap: 7px;
            flex-wrap: wrap;
        }

        .fa-highlight strong {
            margin: 0;
        }

    .fa-card-body h4 {
        font-size: 18px;
    }
}


/* =========================================================
   ACCESSIBILITY — REDUCED MOTION
========================================================= */

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

    .fa-awareness *,
    .fa-awareness *::before,
    .fa-awareness *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }

    .fa-awareness .fa-reveal {
        opacity: 1;
        transform: none;
    }
}










/* =========================================================
   RESPONSIBLE FINANCE
   Premium Light 3D Design
========================================================= */

.rf-section,
.rf-section * {
    box-sizing: border-box;
}

.rf-section {
    --rf-navy: #0B2E59;
    --rf-navy-dark: #082342;
    --rf-blue: #174777;
    --rf-orange: #F28C28;
    --rf-orange-light: #FFB85C;
    --rf-cream: #FFF9F1;
    --rf-text: #17385E;
    --rf-muted: #72839A;
    --rf-border: rgba(22, 67, 111, 0.12);
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 105px 0 95px;
    background: radial-gradient( ellipse at 5% 5%, rgba(255, 221, 179, 0.30), transparent 32% ), radial-gradient( ellipse at 94% 20%, rgba(190, 216, 255, 0.42), transparent 34% ), linear-gradient( 135deg, #FFFFFF 0%, #F8FAFE 48%, #FFF9F2 100% );
    color: var(--rf-text);
    font-family: "Outfit", "Inter", sans-serif;
}


/* =========================================================
   BACKGROUND EFFECTS
========================================================= */

.rf-background {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    perspective: 1000px;
}


/* Perspective grid */

.rf-bg-grid {
    position: absolute;
    width: 130%;
    height: 75%;
    left: -15%;
    bottom: -29%;
    opacity: 0.24;
    background-image: linear-gradient( rgba(11, 46, 89, 0.09) 1px, transparent 1px ), linear-gradient( 90deg, rgba(11, 46, 89, 0.09) 1px, transparent 1px );
    background-size: 55px 55px;
    transform: perspective(600px) rotateX(58deg);
    transform-origin: center top;
    mask-image: linear-gradient( to bottom, transparent, black 28%, transparent 95% );
    animation: rfGridDrift 18s linear infinite;
}


@keyframes rfGridDrift {

    from {
        background-position: 0 0;
    }

    to {
        background-position: 55px 110px;
    }
}


/* Soft glows */

.rf-bg-glow {
    position: absolute;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    filter: blur(75px);
    opacity: 0.42;
    animation: rfGlowBreath 9s ease-in-out infinite alternate;
}


.rf-glow-left {
    left: -230px;
    top: 10%;
    background: rgba(255, 185, 99, 0.32);
}


.rf-glow-right {
    right: -180px;
    bottom: 5%;
    background: rgba(130, 174, 255, 0.30);
    animation-delay: -4s;
}


@keyframes rfGlowBreath {

    0% {
        transform: scale(0.9);
        opacity: 0.24;
    }

    100% {
        transform: scale(1.16);
        opacity: 0.48;
    }
}


/* Floating 3D orbs */

.rf-bg-orb {
    position: absolute;
    border-radius: 50%;
    transform-style: preserve-3d;
    box-shadow: inset -10px -12px 25px rgba(11, 46, 89, 0.06), inset 7px 8px 18px rgba(255, 255, 255, 0.95), 0 18px 38px rgba(11, 46, 89, 0.08);
    animation: rfOrbFloat 9s ease-in-out infinite;
}


.rf-bg-orb-one {
    width: 75px;
    height: 75px;
    left: 6%;
    top: 18%;
    background: radial-gradient( circle at 30% 25%, #FFFFFF, #FFDDB5 40%, #F4A54C 100% );
}


.rf-bg-orb-two {
    width: 42px;
    height: 42px;
    left: 48%;
    top: 7%;
    background: radial-gradient( circle at 30% 25%, #FFFFFF, #E0EBFF 48%, #A5C5F7 );
    animation-delay: -3s;
}


.rf-bg-orb-three {
    width: 95px;
    height: 95px;
    right: 4%;
    bottom: 17%;
    background: radial-gradient( circle at 28% 25%, #FFFFFF, #F6D8B3 48%, #F0A24B );
    animation-delay: -5s;
}


@keyframes rfOrbFloat {

    0%, 100% {
        transform: translate3d(0, 0, 0) rotateX(0deg);
    }

    50% {
        transform: translate3d(0, -24px, 25px) rotateX(22deg);
    }
}


/* Decorative rings */

.rf-bg-ring {
    position: absolute;
    border: 1px solid rgba(242, 140, 40, 0.20);
    border-radius: 50%;
    transform-style: preserve-3d;
    animation: rfRingRotate 24s linear infinite;
}


.rf-bg-ring-one {
    width: 490px;
    height: 490px;
    top: -280px;
    right: 13%;
    transform: rotateX(65deg);
}


.rf-bg-ring-two {
    width: 340px;
    height: 340px;
    left: 34%;
    bottom: -220px;
    border-color: rgba(40, 105, 180, 0.16);
    animation-direction: reverse;
}


@keyframes rfRingRotate {

    from {
        rotate: 0deg;
    }

    to {
        rotate: 360deg;
    }
}


/* Floating cubes */

.rf-floating-cube {
    position: absolute;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(242, 140, 40, 0.30);
    border-radius: 7px;
    background: linear-gradient( 145deg, rgba(255, 255, 255, 0.8), rgba(255, 224, 189, 0.45) );
    box-shadow: 8px 10px 24px rgba(11, 46, 89, 0.06), inset 0 0 12px rgba(255, 255, 255, 0.9);
    transform-style: preserve-3d;
    animation: rfCubeFloat 8s ease-in-out infinite;
}


.rf-cube-one {
    right: 11%;
    top: 15%;
    rotate: 35deg;
}


.rf-cube-two {
    left: 44%;
    bottom: 12%;
    width: 23px;
    height: 23px;
    rotate: 45deg;
    animation-delay: -4s;
}


@keyframes rfCubeFloat {

    0%, 100% {
        transform: translate3d(0, 0, 0) rotateX(0deg) rotateY(0deg);
    }

    50% {
        transform: translate3d(-15px, -25px, 30px) rotateX(65deg) rotateY(45deg);
    }
}


.rf-bg-cross {
    position: absolute;
    color: rgba(242, 140, 40, 0.35);
    font-size: 35px;
    font-weight: 300;
    animation: rfCrossFloat 7s ease-in-out infinite;
}


.rf-cross-one {
    top: 22%;
    left: 47%;
}


.rf-cross-two {
    right: 6%;
    top: 60%;
    animation-delay: -3s;
}


@keyframes rfCrossFloat {

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

    50% {
        transform: translateY(-18px) rotate(90deg);
    }
}


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

.rf-container {
    width: min(1320px, calc(100% - 80px));
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
    align-items: center;
    gap: 65px;
    position: relative;
    z-index: 2;
}


/* =========================================================
   LEFT CONTENT
========================================================= */

.rf-content {
    min-width: 0;
    position: relative;
    z-index: 3;
}


.rf-eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 28px;
    color: var(--rf-navy);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2.2px;
}


.rf-eyebrow-icon {
    width: 43px;
    height: 43px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    color: var(--rf-orange);
    background: linear-gradient( 145deg, #FFFFFF, #FFF1DE );
    border: 1px solid rgba(242, 140, 40, 0.25);
    border-radius: 14px;
    box-shadow: 0 8px 20px rgba(242, 140, 40, 0.10), inset 0 1px 0 #FFFFFF;
    transform: translateZ(20px);
    animation: rfIconFloat 4s ease-in-out infinite;
}


    .rf-eyebrow-icon svg {
        width: 21px;
        height: 21px;
    }


@keyframes rfIconFloat {

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

    50% {
        transform: translateY(-4px) rotateY(12deg);
    }
}


.rf-eyebrow-line {
    width: 50px;
    height: 2px;
    margin-left: 3px;
    background: linear-gradient( 90deg, var(--rf-orange), rgba(242, 140, 40, 0) );
}


/* Main heading */

.rf-title {
    max-width: 650px;
    margin: 0 0 23px;
    color: var(--rf-navy-dark);
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(40px, 4.05vw, 60px);
    font-weight: 800;
    line-height: 1.09;
    letter-spacing: -1.8px;
}


    .rf-title span {
        display: block;
        color: var(--rf-orange);
        background: linear-gradient( 100deg, #E47A16 0%, #FFAD43 52%, #E98621 100% );
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        position: relative;
        width: fit-content;
        max-width: 100%;
    }


        .rf-title span::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: -7px;
            width: 0;
            height: 3px;
            border-radius: 5px;
            background: linear-gradient( 90deg, var(--rf-orange), rgba(242, 140, 40, 0) );
            transition: width 0.9s ease 0.4s;
        }


.rf-section.rf-active .rf-title span::after {
    width: 78%;
}


/* Description */

.rf-description {
    max-width: 590px;
    margin: 0 0 32px;
    color: var(--rf-muted);
    font-size: 16px;
    line-height: 1.9;
    font-weight: 400;
}


/* =========================================================
   HIGHLIGHT CARDS
========================================================= */

.rf-highlights {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 28px;
    perspective: 1200px;
}


.rf-highlight-card {
    min-width: 0;
    min-height: 193px;
    position: relative;
    overflow: hidden;
    padding: 19px 17px 22px;
    border-radius: 21px;
    border: 1px solid rgba(22, 67, 111, 0.12);
    background: linear-gradient( 145deg, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.78) );
    box-shadow: 0 12px 32px rgba(11, 46, 89, 0.055), inset 0 1px 0 rgba(255, 255, 255, 0.95);
    transform-style: preserve-3d;
    transition: transform 0.22s ease, box-shadow 0.35s ease, border-color 0.35s ease;
    will-change: transform;
}


    .rf-highlight-card::before {
        content: "";
        position: absolute;
        width: 130px;
        height: 130px;
        top: -65px;
        right: -60px;
        border-radius: 50%;
        background: radial-gradient( circle, rgba(255, 185, 95, 0.22), transparent 70% );
        transition: transform 0.45s ease;
    }


    .rf-highlight-card::after {
        content: "";
        position: absolute;
        width: 100%;
        height: 2px;
        bottom: 0;
        left: 0;
        background: linear-gradient( 90deg, var(--rf-orange), rgba(242, 140, 40, 0.04) );
        transform: scaleX(0.15);
        transform-origin: left;
        transition: transform 0.4s ease;
    }


    .rf-highlight-card:hover {
        border-color: rgba(242, 140, 40, 0.55);
        box-shadow: 0 22px 45px rgba(11, 46, 89, 0.10), 0 0 0 1px rgba(242, 140, 40, 0.06);
        z-index: 2;
    }


        .rf-highlight-card:hover::before {
            transform: scale(1.6) translate(-5px, 5px);
        }


        .rf-highlight-card:hover::after {
            transform: scaleX(1);
        }


.rf-highlight-icon {
    position: relative;
    z-index: 1;
    width: 49px;
    height: 49px;
    display: grid;
    place-items: center;
    margin-bottom: 17px;
    color: var(--rf-orange);
    border-radius: 16px;
    border: 1px solid rgba(242, 140, 40, 0.18);
    background: linear-gradient( 145deg, #FFFFFF, #FFF0DC );
    box-shadow: 0 8px 18px rgba(242, 140, 40, 0.09), inset 0 1px 0 #FFFFFF;
    transform: translateZ(22px);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}


    .rf-highlight-icon svg {
        width: 25px;
        height: 25px;
    }


.rf-highlight-card:hover .rf-highlight-icon {
    transform: translateZ(32px) rotateY(12deg) rotateX(6deg);
    box-shadow: 0 12px 25px rgba(242, 140, 40, 0.16);
}


.rf-highlight-number {
    position: absolute;
    top: 24px;
    right: 16px;
    color: rgba(11, 46, 89, 0.07);
    font-family: "Playfair Display", Georgia, serif;
    font-size: 31px;
    font-weight: 800;
    transform: translateZ(15px);
    transition: transform 0.4s ease, color 0.4s ease;
}


.rf-highlight-card:hover .rf-highlight-number {
    color: rgba(242, 140, 40, 0.22);
    transform: translate3d(-2px, -5px, 20px);
}


.rf-highlight-card h3 {
    position: relative;
    z-index: 1;
    margin: 0 0 8px;
    color: var(--rf-navy-dark);
    font-family: "Playfair Display", Georgia, serif;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.3;
    transform: translateZ(16px);
}


.rf-highlight-card p {
    position: relative;
    z-index: 1;
    margin: 0;
    color: var(--rf-muted);
    font-size: 14px;
    line-height: 1.7;
    transform: translateZ(12px);
}


.rf-highlight-bottom {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 38px;
    height: 3px;
    background: var(--rf-orange);
    border-radius: 0 4px 0 0;
}


/* =========================================================
   BUTTONS
========================================================= */

.rf-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 23px;
    margin-bottom: 28px;
}


.rf-primary-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    min-height: 57px;
    padding: 10px 11px 10px 25px;
    color: #FFFFFF;
    background: linear-gradient( 115deg, #F28C28, #FFAD45 );
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 15px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 800;
    box-shadow: 0 12px 25px rgba(242, 140, 40, 0.23), inset 0 1px 0 rgba(255, 255, 255, 0.4);
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}


    .rf-primary-btn:hover {
        transform: translateY(-4px);
        box-shadow: 0 18px 34px rgba(242, 140, 40, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.5);
    }


.rf-btn-arrow {
    width: 35px;
    height: 35px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    border-radius: 11px;
    color: var(--rf-navy);
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 3px 10px rgba(11, 46, 89, 0.08);
    transition: transform 0.3s ease;
}


    .rf-btn-arrow svg {
        width: 19px;
        height: 19px;
    }


.rf-primary-btn:hover .rf-btn-arrow {
    transform: translateX(3px);
}


.rf-trust-note {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--rf-navy);
    font-size: 14px;
    font-weight: 700;
}


.rf-trust-check {
    width: 25px;
    height: 25px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    color: #FFFFFF;
    background: var(--rf-navy);
    border-radius: 50%;
    box-shadow: 0 5px 12px rgba(11, 46, 89, 0.15);
}


    .rf-trust-check svg {
        width: 14px;
        height: 14px;
    }


/* Bottom note */

.rf-bottom-note {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 560px;
    padding: 14px 16px;
    border-radius: 14px;
    background: linear-gradient( 100deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.48) );
    border: 1px solid rgba(255, 255, 255, 0.92);
    box-shadow: 0 7px 22px rgba(11, 46, 89, 0.035);
}


.rf-bottom-note-icon {
    width: 31px;
    height: 31px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    color: var(--rf-orange);
    background: #FFF0DC;
    border-radius: 10px;
}


    .rf-bottom-note-icon svg {
        width: 19px;
        height: 19px;
    }


.rf-bottom-note p {
    margin: 0;
    color: var(--rf-muted);
    font-size: 14px;
    line-height: 1.65;
}


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

.rf-visual {
    min-width: 0;
    min-height: 650px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1500px;
    transform-style: preserve-3d;
    isolation: isolate;
}


/* Visual background */

.rf-visual-backdrop {
    position: absolute;
    width: 100%;
    height: 86%;
    left: 0;
    top: 7%;
    border-radius: 48% 52% 43% 57% / 48% 43% 57% 52%;
    background: radial-gradient( ellipse at 60% 30%, rgba(255, 255, 255, 0.98), rgba(255, 239, 217, 0.65) 42%, rgba(219, 232, 255, 0.45) 76%, rgba(255, 255, 255, 0.05) );
    filter: blur(2px);
    animation: rfBackdropMorph 13s ease-in-out infinite alternate;
    z-index: -2;
}


@keyframes rfBackdropMorph {

    0% {
        border-radius: 48% 52% 43% 57% / 48% 43% 57% 52%;
        transform: rotate(-3deg) scale(0.96);
    }

    100% {
        border-radius: 57% 43% 55% 45% / 43% 56% 44% 57%;
        transform: rotate(3deg) scale(1.04);
    }
}


/* Visual orbit rings */

.rf-visual-orbit {
    position: absolute;
    border: 1px solid rgba(242, 140, 40, 0.30);
    border-radius: 50%;
    transform-style: preserve-3d;
    pointer-events: none;
}


.rf-visual-orbit-one {
    width: 94%;
    height: 41%;
    left: 3%;
    top: 31%;
    transform: rotate(-24deg);
    animation: rfVisualOrbit 22s linear infinite;
}


.rf-visual-orbit-two {
    width: 80%;
    height: 60%;
    left: 10%;
    top: 20%;
    border-color: rgba(58, 119, 191, 0.18);
    transform: rotate(43deg);
    animation: rfVisualOrbit 30s linear infinite reverse;
}


@keyframes rfVisualOrbit {

    from {
        rotate: 0deg;
    }

    to {
        rotate: 360deg;
    }
}


/* Visual orbs */

.rf-visual-orb {
    position: absolute;
    z-index: 3;
    border-radius: 50%;
    background: radial-gradient( circle at 30% 25%, #FFFFFF 0%, #FFE0B5 32%, #F6A746 70%, #D97817 100% );
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: inset -7px -8px 12px rgba(170, 83, 5, 0.13), inset 4px 4px 10px rgba(255, 255, 255, 0.95), 0 12px 25px rgba(242, 140, 40, 0.20);
    animation: rfVisualOrbFloat 7s ease-in-out infinite;
}


.rf-visual-orb-one {
    width: 29px;
    height: 29px;
    top: 12%;
    left: 18%;
}


.rf-visual-orb-two {
    width: 47px;
    height: 47px;
    top: 19%;
    right: 10%;
    animation-delay: -2s;
}


.rf-visual-orb-three {
    width: 21px;
    height: 21px;
    bottom: 16%;
    left: 13%;
    animation-delay: -4s;
}


@keyframes rfVisualOrbFloat {

    0%, 100% {
        transform: translate3d(0, 0, 20px);
    }

    50% {
        transform: translate3d(0, -22px, 55px);
    }
}


/* =========================================================
   DOCUMENT SCENE
========================================================= */

.rf-document-scene {
    width: min(100%, 480px);
    position: relative;
    padding: 15px 8px 35px;
    transform-style: preserve-3d;
    animation: rfDocumentFloat 7s ease-in-out infinite;
}


@keyframes rfDocumentFloat {

    0%, 100% {
        transform: translateY(0) rotateX(1deg) rotateY(-1deg);
    }

    50% {
        transform: translateY(-10px) rotateX(-1deg) rotateY(1deg);
    }
}


.rf-document-shadow {
    position: absolute;
    left: 12%;
    right: 5%;
    bottom: 10px;
    height: 45px;
    border-radius: 50%;
    background: rgba(11, 46, 89, 0.16);
    filter: blur(22px);
    transform: translateZ(-45px) scale(0.9);
    animation: rfShadowPulse 7s ease-in-out infinite;
}


@keyframes rfShadowPulse {

    0%, 100% {
        transform: translateZ(-45px) scale(0.9);
        opacity: 0.55;
    }

    50% {
        transform: translateZ(-45px) scale(1.08);
        opacity: 0.30;
    }
}


/* Main document */

.rf-document-card {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 25px 25px 19px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.95);
    border-radius: 27px;
    background: linear-gradient( 150deg, rgba(255, 255, 255, 0.99), rgba(255, 255, 255, 0.96) 62%, rgba(255, 249, 239, 0.97) );
    box-shadow: 0 36px 65px rgba(11, 46, 89, 0.13), 0 14px 28px rgba(11, 46, 89, 0.07), inset 0 1px 0 #FFFFFF;
    transform-style: preserve-3d;
    transition: transform 0.22s ease, box-shadow 0.35s ease;
    will-change: transform;
}


    .rf-document-card::before {
        content: "";
        position: absolute;
        top: -110px;
        right: -110px;
        width: 230px;
        height: 230px;
        border-radius: 50%;
        background: radial-gradient( circle, rgba(255, 192, 112, 0.22), transparent 72% );
        pointer-events: none;
    }


    .rf-document-card::after {
        content: "";
        position: absolute;
        top: 0;
        left: -120%;
        width: 75%;
        height: 100%;
        transform: skewX(-18deg);
        background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.46), transparent );
        pointer-events: none;
        animation: rfDocumentShine 9s ease-in-out infinite;
    }


@keyframes rfDocumentShine {

    0%, 60% {
        left: -120%;
    }

    80%, 100% {
        left: 150%;
    }
}


/* Document header */

.rf-document-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 19px;
    border-bottom: 1px solid rgba(11, 46, 89, 0.09);
    transform: translateZ(14px);
}


.rf-document-brand {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--rf-navy);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1.4px;
}


.rf-document-brand-icon {
    width: 31px;
    height: 31px;
    display: grid;
    place-items: center;
    color: #FFFFFF;
    border-radius: 10px;
    background: linear-gradient( 140deg, var(--rf-orange), #FFB24B );
    box-shadow: 0 5px 12px rgba(242, 140, 40, 0.2);
}


    .rf-document-brand-icon svg {
        width: 18px;
        height: 18px;
    }


.rf-document-menu {
    display: flex;
    align-items: center;
    gap: 4px;
}


    .rf-document-menu i {
        display: block;
        width: 5px;
        height: 5px;
        background: #B3C0D1;
        border-radius: 50%;
    }


/* Document title */

.rf-document-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 23px 0 19px;
    transform: translateZ(19px);
}


.rf-document-kicker {
    display: block;
    margin-bottom: 6px;
    color: var(--rf-orange);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1.35px;
}


.rf-document-title-row h3 {
    margin: 0;
    color: var(--rf-navy-dark);
    font-family: "Playfair Display", Georgia, serif;
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -0.8px;
}


.rf-document-title-row p {
    margin: 5px 0 0;
    color: var(--rf-muted);
    font-size: 14px;
}


.rf-document-stamp {
    width: 51px;
    height: 51px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    color: var(--rf-orange);
    border-radius: 17px;
    border: 1px solid rgba(242, 140, 40, 0.19);
    background: linear-gradient( 145deg, #FFFFFF, #FFF1DD );
    box-shadow: 0 9px 18px rgba(242, 140, 40, 0.09);
}


    .rf-document-stamp svg {
        width: 26px;
        height: 26px;
    }


/* Progress */

.rf-progress-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 9px;
    color: var(--rf-muted);
    font-size: 12px;
    font-weight: 700;
}


    .rf-progress-info span:last-child {
        color: var(--rf-navy);
    }


.rf-progress-track {
    height: 5px;
    overflow: hidden;
    border-radius: 10px;
    background: #E9EEF6;
    margin-bottom: 17px;
}


    .rf-progress-track span {
        display: block;
        width: 0;
        height: 100%;
        border-radius: inherit;
        background: linear-gradient( 90deg, var(--rf-orange), #FFBD63 );
        box-shadow: 0 0 12px rgba(242, 140, 40, 0.25);
        transition: width 1.8s ease 0.6s;
    }


.rf-section.rf-active .rf-progress-track span {
    width: 78%;
}


/* Checklist */

.rf-checklist {
    position: relative;
}


.rf-check-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(11, 46, 89, 0.075);
    transform: translateZ(12px);
    transition: transform 0.3s ease, background 0.3s ease;
}


    .rf-check-row:last-child {
        border-bottom: none;
    }


    .rf-check-row:hover {
        transform: translate3d(5px, 0, 18px);
    }


.rf-check-box {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    color: #FFFFFF;
    background: linear-gradient( 140deg, #F28C28, #FFAE4D );
    border-radius: 9px;
    box-shadow: 0 5px 10px rgba(242, 140, 40, 0.17);
    transform: translateZ(12px);
}


    .rf-check-box svg {
        width: 17px;
        height: 17px;
    }


.rf-check-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}


    .rf-check-copy strong {
        color: var(--rf-navy);
        font-size: 14px;
        font-weight: 800;
    }


    .rf-check-copy span {
        color: var(--rf-muted);
        font-size: 12px;
    }


.rf-check-status {
    color: #A2B0C1;
    font-size: 12px;
    font-weight: 800;
}


/* =========================================================
   MINI FINANCIAL CHART
========================================================= */

.rf-document-chart {
    margin-top: 19px;
    padding: 16px 15px 12px;
    border: 1px solid rgba(11, 46, 89, 0.08);
    border-radius: 16px;
    background: linear-gradient( 140deg, rgba(244, 248, 255, 0.92), rgba(255, 250, 242, 0.92) );
    transform: translateZ(17px);
}


.rf-chart-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
}


    .rf-chart-heading > div {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }


    .rf-chart-heading strong {
        color: var(--rf-navy);
        font-size: 12px;
        font-weight: 900;
    }


    .rf-chart-heading span {
        color: var(--rf-muted);
        font-size: 12px;
    }


.rf-chart-badge {
    padding: 6px 8px;
    border-radius: 7px;
    color: var(--rf-orange) !important;
    background: #FFF0DB;
    font-size: 10px !important;
    font-weight: 900;
    letter-spacing: 0.7px;
}


.rf-chart-visual {
    display: flex;
    gap: 10px;
    height: 110px;
}


.rf-chart-y-labels {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0 0 3px;
    color: #9AA9BB;
    font-size: 8px;
}


.rf-chart-area {
    position: relative;
    flex: 1;
    overflow: hidden;
}


.rf-chart-gridline {
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(11, 46, 89, 0.08);
}


    .rf-chart-gridline:nth-child(1) {
        top: 0;
    }


    .rf-chart-gridline:nth-child(2) {
        top: 25%;
    }


    .rf-chart-gridline:nth-child(3) {
        top: 50%;
    }


    .rf-chart-gridline:nth-child(4) {
        top: 75%;
    }


.rf-chart-bars {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    gap: 8px;
    padding: 0 5px;
}


    .rf-chart-bars span {
        display: block;
        position: relative;
        flex: 1;
        max-width: 25px;
        height: var(--bar-height);
        border-radius: 5px 5px 2px 2px;
        background: linear-gradient( 180deg, #FFBD68, #F28C28 );
        box-shadow: 0 3px 8px rgba(242, 140, 40, 0.12);
        transform-origin: bottom;
        transform: scaleY(0.05);
        transition: transform 0.9s cubic-bezier(.2,.75,.3,1) var(--bar-delay);
    }


        .rf-chart-bars span:nth-child(2n) {
            background: linear-gradient( 180deg, #8FB8ED, #326DAF );
        }


.rf-section.rf-active .rf-chart-bars span {
    transform: scaleY(1);
}


.rf-chart-line {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
    filter: drop-shadow(0 2px 2px rgba(242, 140, 40, 0.13));
}


    .rf-chart-line path {
        stroke-dasharray: 500;
        stroke-dashoffset: 500;
        transition: stroke-dashoffset 2s ease 0.5s;
    }


.rf-section.rf-active .rf-chart-line path {
    stroke-dashoffset: 0;
}


.rf-chart-footer {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-top: 10px;
    color: var(--rf-muted);
    font-size: 10px;
    font-weight: 700;
}


/* Document footer */

.rf-document-footer {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 16px;
    padding-top: 13px;
    border-top: 1px solid rgba(11, 46, 89, 0.08);
    color: var(--rf-navy);
    font-size: 14px;
    font-weight: 800;
    transform: translateZ(15px);
}


.rf-document-footer-icon {
    width: 25px;
    height: 25px;
    display: grid;
    place-items: center;
    color: var(--rf-orange);
    background: #FFF0DC;
    border-radius: 8px;
}


    .rf-document-footer-icon svg {
        width: 15px;
        height: 15px;
    }


/* =========================================================
   FLOATING 3D CARDS
========================================================= */

.rf-floating-card {
    position: absolute;
    z-index: 5;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 235px;
    padding: 15px;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.95);
    background: linear-gradient( 140deg, rgba(255, 255, 255, 0.97), rgba(255, 255, 255, 0.84) );
    box-shadow: 0 17px 35px rgba(11, 46, 89, 0.13), inset 0 1px 0 #FFFFFF;
    backdrop-filter: blur(14px);
    transform-style: preserve-3d;
    animation: rfFloatingCardMotion 6s ease-in-out infinite;
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
}


.rf-floating-rate {
    top: 3%;
    left: -43%;
}


@keyframes rfFloatingCardMotion {

    0%, 100% {
        transform: translate3d(0, 0, 35px) rotateY(-5deg);
    }

    50% {
        transform: translate3d(0, -12px, 45px) rotateY(3deg);
    }
}


.rf-floating-icon {
    width: 37px;
    height: 37px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    color: #FFFFFF;
    border-radius: 12px;
    background: linear-gradient( 145deg, var(--rf-orange), #FFB34F );
    box-shadow: 0 6px 15px rgba(242, 140, 40, 0.22);
    transform: translateZ(20px);
}


    .rf-floating-icon svg {
        width: 20px;
        height: 20px;
    }


.rf-floating-card > div:last-child {
    min-width: 0;
}


    .rf-floating-card > div:last-child > span {
        display: block;
        margin-bottom: 5px;
        color: var(--rf-orange);
        font-size: 8px;
        font-weight: 900;
        letter-spacing: 1px;
    }


.rf-floating-card strong {
    display: block;
    color: var(--rf-navy);
    font-size: 12px;
    font-weight: 900;
}


.rf-floating-card p {
    margin: 5px 0 0;
    color: var(--rf-muted);
    font-size: 12px;
    line-height: 1.5;
}


/* Floating shield */

.rf-floating-shield {
    position: absolute;
    z-index: 4;
    right: 1%;
    bottom: 19%;
    width: 95px;
    height: 110px;
    display: grid;
    place-items: center;
    background: linear-gradient( 145deg, rgba(255, 255, 255, 0.98), rgba(255, 239, 215, 0.92) );
    border: 1px solid rgba(242, 140, 40, 0.35);
    clip-path: polygon( 50% 0%, 95% 17%, 89% 61%, 73% 82%, 50% 100%, 27% 82%, 11% 61%, 5% 17% );
    filter: drop-shadow(0 14px 17px rgba(11, 46, 89, 0.12));
    animation: rfShieldFloat 6s ease-in-out infinite;
}


.rf-shield-inner {
    width: 65px;
    height: 75px;
    display: grid;
    place-items: center;
    color: var(--rf-orange);
    background: linear-gradient( 145deg, #FFFFFF, #FFF0D9 );
    clip-path: polygon( 50% 0%, 95% 17%, 89% 61%, 73% 82%, 50% 100%, 27% 82%, 11% 61%, 5% 17% );
    transform: translateZ(18px);
}


    .rf-shield-inner svg {
        width: 31px;
        height: 31px;
    }


@keyframes rfShieldFloat {

    0%, 100% {
        transform: translateY(0) rotateY(-8deg) rotateX(4deg);
    }

    50% {
        transform: translateY(-14px) rotateY(10deg) rotateX(-3deg);
    }
}


/* Coins */

.rf-coin {
    position: absolute;
    z-index: 6;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #A86113;
    background: radial-gradient( circle at 30% 25%, #FFF4D5, #FFD27D 37%, #EBA03A 70%, #BD751F 100% );
    border: 3px solid #FFE7B8;
    box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.3), inset -5px -5px 8px rgba(131, 69, 9, 0.14), 0 12px 22px rgba(180, 106, 23, 0.18);
    transform-style: preserve-3d;
    animation: rfCoinFloat 5s ease-in-out infinite;
}


    .rf-coin span {
        font-family: Georgia, serif;
        font-size: 26px;
        font-weight: 900;
        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
    }


.rf-coin-one {
    width: 68px;
    height: 68px;
    left: 2%;
    bottom: 17%;
}


.rf-coin-two {
    width: 45px;
    height: 45px;
    right: 14%;
    top: 10%;
    animation-delay: -2.5s;
}


    .rf-coin-two span {
        font-size: 18px;
    }


@keyframes rfCoinFloat {

    0%, 100% {
        transform: translate3d(0, 0, 20px) rotateY(0deg);
    }

    50% {
        transform: translate3d(0, -14px, 45px) rotateY(35deg);
    }
}


/* Mini floating card */

.rf-mini-card {
    position: absolute;
    z-index: 6;
    right: -2%;
    top: 53%;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px 15px;
    border: 1px solid rgba(255, 255, 255, 0.95);
    border-radius: 16px;
    background: linear-gradient( 140deg, #FFFFFF, rgba(255, 255, 255, 0.86) );
    box-shadow: 0 14px 30px rgba(11, 46, 89, 0.11);
    backdrop-filter: blur(12px);
    animation: rfMiniCardFloat 7s ease-in-out infinite;
}


.rf-mini-card-icon {
    width: 35px;
    height: 35px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    color: var(--rf-orange);
    background: #FFF0DD;
    border-radius: 11px;
}


    .rf-mini-card-icon svg {
        width: 20px;
        height: 20px;
    }


.rf-mini-card > span:last-child {
    display: flex;
    flex-direction: column;
    gap: 4px;
}


.rf-mini-card strong {
    color: var(--rf-navy);
    font-size: 10px;
    font-weight: 900;
}


.rf-mini-card small {
    color: var(--rf-muted);
    font-size: 10px;
}


@keyframes rfMiniCardFloat {

    0%, 100% {
        transform: translate3d(0, 0, 32px);
    }

    50% {
        transform: translate3d(0, -9px, 42px);
    }
}


/* Visual caption */

.rf-visual-caption {
    position: absolute;
    left: 50%;
    bottom: -2px;
    display: flex;
    align-items: center;
    gap: 9px;
    width: max-content;
    max-width: 100%;
    color: var(--rf-muted);
    font-size: 14px;
    font-weight: 700;
    transform: translateX(-50%);
}


.rf-caption-dot {
    width: 7px;
    height: 7px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--rf-orange);
    box-shadow: 0 0 0 5px rgba(242, 140, 40, 0.11);
    animation: rfCaptionPulse 2s ease-in-out infinite;
}


@keyframes rfCaptionPulse {

    0%, 100% {
        box-shadow: 0 0 0 4px rgba(242, 140, 40, 0.10);
    }

    50% {
        box-shadow: 0 0 0 8px rgba(242, 140, 40, 0.02);
    }
}


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

.rf-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.85s ease, transform 0.85s cubic-bezier(.2,.75,.25,1);
}


    .rf-reveal.rf-visible {
        opacity: 1;
        transform: translateY(0);
    }


.rf-content.rf-reveal {
    transition-delay: 0.05s;
}


.rf-visual.rf-reveal {
    transition-delay: 0.20s;
}


.rf-highlight-card {
    opacity: 0;
    transform: translateY(25px) rotateX(7deg);
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(.2,.75,.25,1), border-color 0.35s ease, box-shadow 0.35s ease;
}


.rf-section.rf-active .rf-highlight-card {
    opacity: 1;
    transform: translateY(0) rotateX(0);
}


    .rf-section.rf-active .rf-highlight-card:nth-child(1) {
        transition-delay: 0.15s;
    }


    .rf-section.rf-active .rf-highlight-card:nth-child(2) {
        transition-delay: 0.30s;
    }


    .rf-section.rf-active .rf-highlight-card:nth-child(3) {
        transition-delay: 0.45s;
    }


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

.rf-bottom-wave {
    position: absolute;
    z-index: -1;
    left: -5%;
    bottom: -100px;
    width: 110%;
    height: 160px;
    border-radius: 50% 50% 0 0;
    border-top: 1px solid rgba(242, 140, 40, 0.16);
    background: linear-gradient( 180deg, rgba(255, 255, 255, 0.18), rgba(224, 235, 250, 0.30) );
    transform: rotate(-2deg);
}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width: 1500px) {

    .rf-container {
        width: min(1400px, calc(100% - 120px));
        gap: 85px;
    }

    .rf-title {
        font-size: 65px;
    }

    .rf-visual {
        min-height: 710px;
    }

    .rf-document-scene {
        width: 500px;
    }
}


/* =========================================================
   LAPTOP
========================================================= */

@media (max-width: 1200px) {

    .rf-section {
        padding: 85px 0;
    }

    .rf-container {
        width: calc(100% - 64px);
        gap: 38px;
    }

    .rf-title {
        font-size: clamp(38px, 4.4vw, 53px);
    }

    .rf-description {
        font-size: 14px;
    }

    .rf-highlights {
        gap: 10px;
    }

    .rf-highlight-card {
        padding: 17px 13px 20px;
        min-height: 185px;
    }

        .rf-highlight-card h3 {
            font-size: 16px;
        }

        .rf-highlight-card p {
            font-size: 11.5px;
        }

    .rf-visual {
        min-height: 620px;
    }

    .rf-document-scene {
        width: min(100%, 430px);
    }

    .rf-document-card {
        padding: 22px 20px 17px;
    }

    .rf-floating-rate {
        left: -4%;
    }

    .rf-mini-card {
        right: -2%;
    }
}


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

@media (max-width: 950px) {

    .rf-section {
        padding: 80px 0 90px;
    }

    .rf-container {
        width: calc(100% - 56px);
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .rf-content {
        max-width: 760px;
        margin: 0 auto;
        width: 100%;
    }

    .rf-title {
        max-width: 690px;
        font-size: clamp(42px, 6vw, 62px);
    }

    .rf-description {
        max-width: 690px;
    }

    .rf-highlights {
        gap: 16px;
    }

    .rf-highlight-card {
        min-height: 180px;
        padding: 20px 18px 22px;
    }

        .rf-highlight-card h3 {
            font-size: 18px;
        }

        .rf-highlight-card p {
            font-size: 12.5px;
        }

    .rf-visual {
        width: 100%;
        max-width: 680px;
        min-height: 700px;
        margin: 0 auto;
    }

    .rf-document-scene {
        width: min(100%, 465px);
    }

    .rf-floating-rate {
        left: 1%;
        top: 18%;
    }

    .rf-mini-card {
        right: 0;
        top: 55%;
    }

    .rf-floating-shield {
        right: 4%;
        bottom: 17%;
    }
}


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

@media (max-width: 600px) {

    .rf-section {
        padding: 62px 0 65px;
    }

    .rf-container {
        width: calc(100% - 36px);
        gap: 28px;
    }

    .rf-eyebrow {
        gap: 9px;
        margin-bottom: 22px;
        font-size: 10px;
        letter-spacing: 1.45px;
    }

    .rf-eyebrow-icon {
        width: 38px;
        height: 38px;
        border-radius: 12px;
    }

        .rf-eyebrow-icon svg {
            width: 19px;
            height: 19px;
        }

    .rf-eyebrow-line {
        width: 25px;
    }

    .rf-title {
        font-size: clamp(36px, 9.2vw, 48px);
        line-height: 1.12;
        letter-spacing: -1.2px;
        margin-bottom: 20px;
    }

    .rf-description {
        margin-bottom: 25px;
        font-size: 14px;
        line-height: 1.85;
    }

    .rf-highlights {
        grid-template-columns: 1fr;
        gap: 13px;
        margin-bottom: 25px;
    }

    .rf-highlight-card {
        min-height: auto;
        display: grid;
        grid-template-columns: 54px minmax(0, 1fr);
        grid-template-rows: auto auto;
        column-gap: 14px;
        padding: 17px;
        border-radius: 18px;
    }

    .rf-highlight-icon {
        grid-column: 1;
        grid-row: 1 / 3;
        width: 49px;
        height: 49px;
        margin: 0;
        align-self: center;
    }

    .rf-highlight-card h3 {
        grid-column: 2;
        grid-row: 1;
        align-self: end;
        margin: 0 0 5px;
        font-size: 17px;
    }

    .rf-highlight-card p {
        grid-column: 2;
        grid-row: 2;
        font-size: 12px;
        line-height: 1.65;
    }

    .rf-highlight-number {
        top: 12px;
        right: 13px;
        font-size: 24px;
    }

    .rf-actions {
        align-items: flex-start;
        flex-direction: column;
        gap: 17px;
        margin-bottom: 22px;
    }

    .rf-primary-btn {
        width: 100%;
        justify-content: space-between;
        min-height: 55px;
    }

    .rf-trust-note {
        font-size: 10px;
    }

    .rf-bottom-note {
        padding: 13px;
        align-items: flex-start;
    }

        .rf-bottom-note p {
            font-size: 10px;
        }

    /* Visual */

    .rf-visual {
        min-height: 590px;
        margin-top: 5px;
    }

    .rf-visual-backdrop {
        width: 115%;
        left: -7.5%;
        height: 80%;
        top: 10%;
    }

    .rf-visual-orbit-one {
        width: 110%;
        left: -5%;
    }

    .rf-visual-orbit-two {
        width: 100%;
        left: 0;
    }

    .rf-document-scene {
        width: min(100%, 410px);
        padding: 20px 0 30px;
    }

    .rf-document-card {
        padding: 20px 17px 16px;
        border-radius: 22px;
    }

    .rf-document-brand {
        font-size: 10px;
        letter-spacing: 1px;
    }

    .rf-document-title-row h3 {
        font-size: 28px;
    }

    .rf-document-title-row p {
        font-size: 10px;
    }

    .rf-document-stamp {
        width: 44px;
        height: 44px;
        border-radius: 14px;
    }

        .rf-document-stamp svg {
            width: 23px;
            height: 23px;
        }

    .rf-check-row {
        gap: 9px;
        padding: 11px 0;
    }

    .rf-check-box {
        width: 27px;
        height: 27px;
        border-radius: 8px;
    }

    .rf-check-copy strong {
        font-size: 10px;
    }

    .rf-check-copy span {
        font-size: 10px;
    }

    .rf-check-status {
        font-size: 10px;
    }

    .rf-document-chart {
        padding: 13px 11px 10px;
    }

    .rf-chart-visual {
        height: 90px;
    }

    .rf-chart-footer {
        font-size: 7px;
    }

    /* Floating elements */

    .rf-floating-rate {
        top: 4%;
        left: -1%;
        width: 200px;
        padding: 11px;
        border-radius: 14px;
    }

    .rf-floating-icon {
        width: 31px;
        height: 31px;
    }

        .rf-floating-icon svg {
            width: 17px;
            height: 17px;
        }

    .rf-floating-card > div:last-child > span {
        font-size: 7px;
    }

    .rf-floating-card strong {
        font-size: 10px;
    }

    .rf-floating-card p {
        font-size: 10px;
    }

    .rf-floating-shield {
        width: 70px;
        height: 83px;
        right: -1%;
        bottom: 13%;
    }

    .rf-shield-inner {
        width: 48px;
        height: 56px;
    }

        .rf-shield-inner svg {
            width: 25px;
            height: 25px;
        }

    .rf-coin-one {
        width: 48px;
        height: 48px;
        left: -1%;
        bottom: 12%;
    }

        .rf-coin-one span {
            font-size: 21px;
        }

    .rf-coin-two {
        width: 35px;
        height: 35px;
        right: 3%;
        top: 6%;
    }

        .rf-coin-two span {
            font-size: 14px;
        }

    .rf-mini-card {
        right: -1%;
        top: 64%;
        padding: 9px 11px;
        gap: 8px;
        border-radius: 13px;
    }

    .rf-mini-card-icon {
        width: 30px;
        height: 30px;
    }

    .rf-mini-card strong {
        font-size: 10px;
    }

    .rf-mini-card small {
        font-size: 8px;
    }

    .rf-visual-caption {
        bottom: -3px;
        font-size: 10px;
    }

    .rf-bg-orb-one {
        width: 48px;
        height: 48px;
    }

    .rf-bg-orb-two {
        width: 30px;
        height: 30px;
    }

    .rf-bg-orb-three {
        width: 55px;
        height: 55px;
    }
}


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

@media (max-width: 380px) {

    .rf-container {
        width: calc(100% - 28px);
    }

    .rf-title {
        font-size: 34px;
        letter-spacing: -1px;
    }

    .rf-eyebrow {
        font-size: 8px;
        letter-spacing: 1.1px;
    }

    .rf-visual {
        min-height: 535px;
    }

    .rf-document-card {
        padding: 17px 13px 14px;
    }

    .rf-document-title-row h3 {
        font-size: 25px;
    }

    .rf-document-kicker {
        font-size: 8px;
    }

    .rf-check-copy strong {
        font-size: 10px;
    }

    .rf-check-copy span {
        font-size: 8px;
    }

    .rf-floating-rate {
        width: 175px;
    }

    .rf-mini-card {
        top: 68%;
    }

    .rf-floating-shield {
        width: 58px;
        height: 70px;
    }

    .rf-shield-inner {
        width: 40px;
        height: 47px;
    }

    .rf-coin-one {
        width: 39px;
        height: 39px;
    }
}


/* =========================================================
   ACCESSIBILITY
========================================================= */

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

    .rf-section *,
    .rf-section *::before,
    .rf-section *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }

    .rf-reveal,
    .rf-highlight-card {
        opacity: 1 !important;
        transform: none !important;
    }

    .rf-chart-bars span {
        transform: scaleY(1) !important;
    }

    .rf-chart-line path {
        stroke-dashoffset: 0 !important;
    }
}









/* ==========================================
   BUBNA FINANCIAL SERVICES FAQ
   Dark Navy + Saffron + 3D Animation
========================================== */

.bubna-faq,
.bubna-faq * {
    box-sizing: border-box;
}

.bubna-faq {
    --faq-bg: #071426;
    --faq-bg-deep: #040B16;
    --faq-navy: #0B2340;
    --faq-saffron: #F28C28;
    --faq-gold: #FFB45E;
    --faq-white: #F8FAFF;
    --faq-muted: #A0AEC0;
    --faq-border: rgba(255, 255, 255, 0.09);
    position: relative;
    isolation: isolate;
    width: 100%;
    overflow: hidden;
    padding: 115px 0 75px;
    color: var(--faq-white);
    background: radial-gradient( ellipse at 8% 15%, rgba(242, 140, 40, 0.08), transparent 34% ), radial-gradient( ellipse at 90% 75%, rgba(29, 101, 175, 0.13), transparent 38% ), linear-gradient( 135deg, #08182D 0%, #061120 48%, #09182B 100% );
    font-family: "Outfit", "Inter", sans-serif;
}


/* ==========================================
   BACKGROUND SCENE
========================================== */

.faq-bg-scene {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    perspective: 1000px;
}


/* Animated Perspective Grid */

.faq-bg-grid {
    position: absolute;
    width: 150%;
    height: 750px;
    left: -25%;
    bottom: -380px;
    background-image: linear-gradient( rgba(242, 140, 40, 0.11) 1px, transparent 1px ), linear-gradient( 90deg, rgba(242, 140, 40, 0.11) 1px, transparent 1px );
    background-size: 58px 58px;
    transform: perspective(500px) rotateX(64deg);
    transform-origin: center top;
    -webkit-mask-image: linear-gradient( to bottom, transparent, #000 25%, #000 65%, transparent );
    mask-image: linear-gradient( to bottom, transparent, #000 25%, #000 65%, transparent );
    animation: faqGridMove 18s linear infinite;
    opacity: 0.48;
}


@keyframes faqGridMove {

    from {
        background-position: 0 0;
    }

    to {
        background-position: 0 116px;
    }
}


/* Background Glows */

.faq-glow {
    position: absolute;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.13;
    animation: faqGlowFloat 11s ease-in-out infinite alternate;
}


.faq-glow-one {
    top: 10%;
    left: -200px;
    background: #F28C28;
}


.faq-glow-two {
    right: -220px;
    bottom: 0;
    background: #1765A5;
    animation-delay: -5s;
}


@keyframes faqGlowFloat {

    from {
        transform: translate3d(0, 0, 0) scale(0.9);
    }

    to {
        transform: translate3d(70px, -45px, 0) scale(1.18);
    }
}


/* Floating 3D Orbs */

.faq-orb {
    position: absolute;
    border-radius: 50%;
    transform-style: preserve-3d;
    animation: faqOrbFloat 9s ease-in-out infinite;
}


.faq-orb-one {
    top: 14%;
    right: 8%;
    width: 100px;
    height: 100px;
    background: radial-gradient( circle at 30% 25%, rgba(255, 255, 255, 0.8), rgba(242, 140, 40, 0.65) 10%, rgba(242, 140, 40, 0.13) 40%, rgba(242, 140, 40, 0.02) 70% );
    border: 1px solid rgba(255, 180, 94, 0.2);
    box-shadow: inset -12px -14px 25px rgba(0, 0, 0, 0.3), 0 0 45px rgba(242, 140, 40, 0.08);
}


.faq-orb-two {
    left: 7%;
    bottom: 13%;
    width: 65px;
    height: 65px;
    background: radial-gradient( circle at 30% 25%, #9EC9F2, #286AA6 35%, rgba(14, 50, 89, 0.3) 75% );
    box-shadow: inset -10px -12px 20px rgba(0, 0, 0, 0.35), 0 15px 45px rgba(36, 106, 166, 0.18);
    animation-delay: -3s;
}


@keyframes faqOrbFloat {

    0%, 100% {
        transform: translate3d(0, 0, 0) rotateY(0deg);
    }

    50% {
        transform: translate3d(0, -25px, 25px) rotateY(35deg);
    }
}


/* Wireframe Rings */

.faq-wire-ring {
    position: absolute;
    width: 180px;
    height: 180px;
    border: 1px solid rgba(242, 140, 40, 0.19);
    border-radius: 50%;
    transform-style: preserve-3d;
    box-shadow: 0 0 25px rgba(242, 140, 40, 0.025), inset 0 0 20px rgba(242, 140, 40, 0.025);
}


.faq-ring-one {
    right: 16%;
    top: 35%;
    transform: rotateX(68deg) rotateZ(-20deg);
    animation: faqRingRotate 18s linear infinite;
}


.faq-ring-two {
    left: 18%;
    bottom: 5%;
    width: 115px;
    height: 115px;
    border-color: rgba(90, 164, 225, 0.17);
    transform: rotateX(70deg);
    animation: faqRingRotate 22s linear infinite reverse;
}


@keyframes faqRingRotate {

    from {
        rotate: 0deg;
    }

    to {
        rotate: 360deg;
    }
}


/* Floating 3D Cubes */

.faq-floating-cube {
    position: absolute;
    width: 42px;
    height: 42px;
    transform-style: preserve-3d;
    animation: faqCubeFloat 10s ease-in-out infinite;
}


    .faq-floating-cube span {
        position: absolute;
        inset: 0;
        border: 1px solid rgba(255, 180, 94, 0.5);
        background: rgba(242, 140, 40, 0.045);
        box-shadow: inset 0 0 14px rgba(242, 140, 40, 0.06);
    }


        .faq-floating-cube span:nth-child(1) {
            transform: translateZ(21px);
        }


        .faq-floating-cube span:nth-child(2) {
            transform: rotateY(180deg) translateZ(21px);
        }


        .faq-floating-cube span:nth-child(3) {
            transform: rotateY(90deg) translateZ(21px);
        }


        .faq-floating-cube span:nth-child(4) {
            transform: rotateY(-90deg) translateZ(21px);
        }


        .faq-floating-cube span:nth-child(5) {
            transform: rotateX(90deg) translateZ(21px);
        }


        .faq-floating-cube span:nth-child(6) {
            transform: rotateX(-90deg) translateZ(21px);
        }


.faq-cube-one {
    top: 28%;
    left: 5%;
    animation-duration: 13s;
}


.faq-cube-two {
    right: 5%;
    bottom: 20%;
    width: 28px;
    height: 28px;
    animation-delay: -4s;
}


    .faq-cube-two span:nth-child(1) {
        transform: translateZ(14px);
    }


    .faq-cube-two span:nth-child(2) {
        transform: rotateY(180deg) translateZ(14px);
    }


    .faq-cube-two span:nth-child(3) {
        transform: rotateY(90deg) translateZ(14px);
    }


    .faq-cube-two span:nth-child(4) {
        transform: rotateY(-90deg) translateZ(14px);
    }


    .faq-cube-two span:nth-child(5) {
        transform: rotateX(90deg) translateZ(14px);
    }


    .faq-cube-two span:nth-child(6) {
        transform: rotateX(-90deg) translateZ(14px);
    }


@keyframes faqCubeFloat {

    0%, 100% {
        transform: translate3d(0, 0, 0) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    }

    50% {
        transform: translate3d(15px, -25px, 35px) rotateX(45deg) rotateY(65deg) rotateZ(20deg);
    }
}


/* Floating Diamond */

.faq-floating-diamond {
    position: absolute;
    top: 55%;
    right: 12%;
    width: 26px;
    height: 26px;
    border: 1px solid rgba(255, 180, 94, 0.55);
    background: rgba(242, 140, 40, 0.09);
    box-shadow: 0 0 25px rgba(242, 140, 40, 0.13);
    transform: rotate(45deg) translateZ(50px);
    animation: faqDiamondFloat 7s ease-in-out infinite;
}


@keyframes faqDiamondFloat {

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

    50% {
        transform: translateY(-22px) rotate(135deg);
    }
}


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

.faq-container {
    position: relative;
    width: min(1240px, calc(100% - 48px));
    margin: 0 auto;
}


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

.faq-header {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    align-items: center;
    gap: 55px;
    margin-bottom: 85px;
}


.faq-heading-content {
    position: relative;
    z-index: 2;
}


.faq-eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 25px;
    color: var(--faq-gold);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 3px;
}


.faq-eyebrow-line {
    display: block;
    width: 34px;
    height: 2px;
    background: linear-gradient( 90deg, var(--faq-saffron), var(--faq-gold) );
    box-shadow: 0 0 12px rgba(242, 140, 40, 0.4);
}


.faq-eyebrow-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--faq-saffron);
    box-shadow: 0 0 10px var(--faq-saffron);
}


.faq-heading-content h2 {
    margin: 0;
    color: #FFFFFF;
    font-size: clamp(39px, 5vw, 66px);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -2px;
}


    .faq-heading-content h2 > span {
        display: block;
        color: var(--faq-saffron);
        text-shadow: 0 8px 35px rgba(242, 140, 40, 0.12);
    }


.faq-title-dot {
    color: #FFFFFF;
}


.faq-heading-content > p {
    max-width: 500px;
    margin: 24px 0 0;
    color: var(--faq-muted);
    font-size: 16px;
    line-height: 1.9;
}


/* ==========================================
   3D VISUAL
========================================== */

.faq-visual {
    position: relative;
    min-height: 350px;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1000px;
    transform-style: preserve-3d;
}


/* Visual Orbits */

.faq-visual-orbit {
    position: absolute;
    width: 290px;
    height: 290px;
    border: 1px solid rgba(242, 140, 40, 0.22);
    border-radius: 50%;
    transform-style: preserve-3d;
}


.faq-visual-orbit-one {
    transform: rotateX(65deg) rotateZ(-25deg);
    animation: faqVisualOrbitOne 14s linear infinite;
}


.faq-visual-orbit-two {
    width: 230px;
    height: 230px;
    border-color: rgba(255, 255, 255, 0.09);
    transform: rotateY(65deg) rotateX(15deg);
    animation: faqVisualOrbitTwo 17s linear infinite;
}


@keyframes faqVisualOrbitOne {

    from {
        rotate: 0deg;
    }

    to {
        rotate: 360deg;
    }
}


@keyframes faqVisualOrbitTwo {

    from {
        rotate: 0deg;
    }

    to {
        rotate: -360deg;
    }
}


/* Main Floating Card */

.faq-visual-card {
    position: relative;
    z-index: 2;
    width: 270px;
    min-height: 300px;
    padding: 24px;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 25px;
    background: linear-gradient( 145deg, rgba(23, 47, 75, 0.96), rgba(8, 22, 39, 0.97) );
    box-shadow: 0 35px 70px rgba(0, 0, 0, 0.34), inset 1px 1px 0 rgba(255, 255, 255, 0.09), inset -1px -1px 0 rgba(255, 255, 255, 0.02);
    transform-style: preserve-3d;
    transform: rotateY(-9deg) rotateX(5deg) translateZ(30px);
    animation: faqCardFloat 6s ease-in-out infinite;
    transition: transform 0.45s ease, box-shadow 0.45s ease;
}


@keyframes faqCardFloat {

    0%, 100% {
        transform: translateY(0) rotateY(-9deg) rotateX(5deg) translateZ(30px);
    }

    50% {
        transform: translateY(-13px) rotateY(4deg) rotateX(-2deg) translateZ(45px);
    }
}


.faq-visual-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}


.faq-visual-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--faq-saffron);
    border: 1px solid rgba(242, 140, 40, 0.25);
    border-radius: 13px;
    background: rgba(242, 140, 40, 0.1);
    box-shadow: 0 8px 22px rgba(242, 140, 40, 0.08);
}


    .faq-visual-icon svg {
        width: 25px;
        height: 25px;
    }


.faq-visual-status {
    color: #A7B7CA;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.2px;
}


.faq-visual-question-mark {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 140px;
    transform-style: preserve-3d;
}


    .faq-visual-question-mark > span {
        position: relative;
        z-index: 2;
        font-size: 120px;
        font-weight: 800;
        line-height: 1;
        color: var(--faq-saffron);
        background: linear-gradient( 145deg, #FFD5A3 0%, #F28C28 38%, #C85E0C 100% );
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        filter: drop-shadow(8px 12px 0 rgba(0, 0, 0, 0.15)) drop-shadow(0 8px 18px rgba(242, 140, 40, 0.2));
        transform: translateZ(40px);
        animation: faqQuestionFloat 4s ease-in-out infinite;
    }


@keyframes faqQuestionFloat {

    0%, 100% {
        transform: translateY(0) translateZ(40px) rotateY(-5deg);
    }

    50% {
        transform: translateY(-6px) translateZ(55px) rotateY(5deg);
    }
}


.faq-question-shadow {
    position: absolute;
    bottom: 12px;
    width: 95px;
    height: 17px;
    background: rgba(0, 0, 0, 0.45);
    border-radius: 50%;
    filter: blur(10px);
    transform: rotateX(65deg);
}


.faq-visual-lines {
    display: grid;
    gap: 8px;
    margin-top: 3px;
}


    .faq-visual-lines span {
        display: block;
        height: 5px;
        border-radius: 20px;
        background: rgba(255, 255, 255, 0.09);
    }


        .faq-visual-lines span:nth-child(1) {
            width: 100%;
        }


        .faq-visual-lines span:nth-child(2) {
            width: 77%;
        }


        .faq-visual-lines span:nth-child(3) {
            width: 55%;
        }


.faq-visual-bottom {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 23px;
    padding-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    color: #B8C6D8;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.2px;
}


.faq-visual-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--faq-saffron);
    box-shadow: 0 0 12px rgba(242, 140, 40, 0.6);
}


/* Floating Visual Badges */

.faq-float-badge {
    position: absolute;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 13px 15px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    background: rgba(13, 31, 52, 0.91);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    animation: faqBadgeFloat 5s ease-in-out infinite;
}


.faq-badge-top {
    top: 65px;
    right: -10px;
}


.faq-badge-bottom {
    bottom: 60px;
    left: -10px;
    animation-delay: -2.5s;
}


@keyframes faqBadgeFloat {

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

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


.faq-badge-symbol,
.faq-badge-check {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 10px;
}


.faq-badge-symbol {
    color: #081426;
    background: linear-gradient( 145deg, #FFD3A0, #F28C28 );
    font-size: 21px;
    font-weight: 800;
}


.faq-badge-check {
    color: var(--faq-saffron);
    background: rgba(242, 140, 40, 0.13);
    border: 1px solid rgba(242, 140, 40, 0.2);
}


    .faq-badge-check svg {
        width: 19px;
        height: 19px;
    }


.faq-float-badge strong,
.faq-float-badge small {
    display: block;
}


.faq-float-badge strong {
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}


.faq-float-badge small {
    margin-top: 4px;
    color: #9DADC0;
    font-size: 12px;
}


/* ==========================================
   FAQ BODY LAYOUT
========================================== */

.faq-body {
    display: grid;
    grid-template-columns: 0.75fr 1.25fr;
    gap: 55px;
    align-items: start;
}


/* ==========================================
   LEFT SIDE PANEL
========================================== */

.faq-side-panel {
    position: sticky;
    top: 100px;
    padding: 31px 27px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 22px;
    background: linear-gradient( 145deg, rgba(19, 40, 65, 0.93), rgba(8, 22, 39, 0.94) );
    box-shadow: 0 25px 55px rgba(0, 0, 0, 0.2), inset 1px 1px 0 rgba(255, 255, 255, 0.04);
    transform-style: preserve-3d;
    transition: transform 0.4s ease, border-color 0.4s ease;
}


    .faq-side-panel::before {
        content: "";
        position: absolute;
        top: -100px;
        right: -100px;
        width: 220px;
        height: 220px;
        border-radius: 50%;
        background: rgba(242, 140, 40, 0.07);
        filter: blur(40px);
        pointer-events: none;
    }


    .faq-side-panel::after {
        content: "";
        position: absolute;
        left: 0;
        top: 35px;
        bottom: 35px;
        width: 2px;
        background: linear-gradient( to bottom, transparent, var(--faq-saffron), transparent );
        opacity: 0.8;
    }


.faq-panel-number {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 11px;
    color: #A4B3C5;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
}


    .faq-panel-number > span:first-child {
        color: var(--faq-saffron);
        font-size: 12px;
    }


.faq-panel-number-line {
    width: 28px;
    height: 1px;
    background: rgba(242, 140, 40, 0.55);
}


.faq-side-panel h3 {
    position: relative;
    z-index: 1;
    margin: 31px 0 16px;
    color: #FFFFFF;
    font-size: clamp(25px, 2.3vw, 33px);
    line-height: 1.3;
    letter-spacing: -0.8px;
}


    .faq-side-panel h3 span {
        display: block;
        color: var(--faq-saffron);
    }


.faq-side-panel > p {
    position: relative;
    z-index: 1;
    margin: 0;
    color: var(--faq-muted);
    font-size: 14px;
    line-height: 1.9;
}


.faq-panel-divider {
    width: 100%;
    height: 1px;
    margin: 28px 0;
    background: linear-gradient( 90deg, rgba(242, 140, 40, 0.4), rgba(255, 255, 255, 0.06), transparent );
}


/* Panel Features */

.faq-panel-feature {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 22px;
}


.faq-feature-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 39px;
    height: 39px;
    color: var(--faq-saffron);
    border: 1px solid rgba(242, 140, 40, 0.19);
    border-radius: 12px;
    background: rgba(242, 140, 40, 0.075);
    transition: transform 0.35s ease, background 0.35s ease, box-shadow 0.35s ease;
}


    .faq-feature-icon svg {
        width: 20px;
        height: 20px;
    }


.faq-panel-feature:hover .faq-feature-icon {
    transform: translateY(-3px) rotateY(18deg) rotateX(12deg);
    background: rgba(242, 140, 40, 0.14);
    box-shadow: 0 8px 22px rgba(242, 140, 40, 0.09);
}


.faq-panel-feature strong {
    display: block;
    color: #F5F7FB;
    font-size: 14px;
    font-weight: 700;
}


.faq-panel-feature p {
    margin: 6px 0 0;
    color: #8F9FB3;
    font-size: 14px;
    line-height: 1.7;
}


.faq-panel-footer {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 32px;
    padding-top: 19px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    color: #A4B3C5;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1.6px;
}


.faq-footer-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--faq-saffron);
    box-shadow: 0 0 12px rgba(242, 140, 40, 0.5);
}


/* ==========================================
   ACCORDION
========================================== */

.faq-accordion {
    display: flex;
    flex-direction: column;
    gap: 13px;
    perspective: 1200px;
}


/* Individual Item */

.faq-item {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.085);
    border-radius: 15px;
    background: linear-gradient( 120deg, rgba(20, 39, 62, 0.82), rgba(11, 27, 46, 0.87) );
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.025);
    transform-style: preserve-3d;
    transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease, background 0.4s ease;
}


    /* Top Accent */

    .faq-item::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 0;
        height: 2px;
        background: linear-gradient( 90deg, var(--faq-saffron), var(--faq-gold), transparent );
        transition: width 0.45s ease;
        z-index: 2;
    }


    /* Saffron Side Light */

    .faq-item::after {
        content: "";
        position: absolute;
        top: 20%;
        bottom: 20%;
        left: 0;
        width: 2px;
        background: var(--faq-saffron);
        box-shadow: 0 0 14px rgba(242, 140, 40, 0.55);
        transform: scaleY(0);
        transform-origin: center;
        transition: transform 0.35s ease;
        z-index: 2;
    }


    .faq-item:hover {
        transform: translateY(-3px) translateZ(8px);
        border-color: rgba(242, 140, 40, 0.28);
        box-shadow: 0 15px 32px rgba(0, 0, 0, 0.19), inset 0 1px 0 rgba(255, 255, 255, 0.035);
    }


        .faq-item:hover::before,
        .faq-item.active::before {
            width: 100%;
        }


    .faq-item.active {
        border-color: rgba(242, 140, 40, 0.35);
        background: linear-gradient( 120deg, rgba(28, 47, 68, 0.96), rgba(12, 29, 49, 0.98) );
        box-shadow: 0 18px 40px rgba(0, 0, 0, 0.17), 0 0 25px rgba(242, 140, 40, 0.035), inset 0 1px 0 rgba(255, 255, 255, 0.045);
    }


        .faq-item.active::after {
            transform: scaleY(1);
        }


/* Question Button */

.faq-question {
    position: relative;
    z-index: 1;
    width: 100%;
    min-height: 78px;
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) 37px;
    align-items: center;
    gap: 15px;
    padding: 19px 23px;
    border: none;
    outline: none;
    text-align: left;
    color: #F3F6FB;
    background: transparent;
    cursor: pointer;
    font-family: inherit;
    -webkit-tap-highlight-color: transparent;
}


    .faq-question:focus-visible {
        outline: 2px solid var(--faq-saffron);
        outline-offset: -4px;
        border-radius: 12px;
    }


.faq-question-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 10px;
    color: #91A3B9;
    background: rgba(255, 255, 255, 0.025);
    font-size: 14px;
    font-weight: 700;
    transition: color 0.35s ease, background 0.35s ease, border-color 0.35s ease, transform 0.35s ease;
}


.faq-item.active .faq-question-number {
    color: #101B2A;
    border-color: transparent;
    background: linear-gradient( 145deg, #FFD2A0, #F28C28 );
    transform: translateZ(12px) rotate(-3deg);
    box-shadow: 0 5px 16px rgba(242, 140, 40, 0.12);
}


.faq-question-text {
    color: #E8EDF5;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.65;
    transition: color 0.3s ease;
}


.faq-item:hover .faq-question-text,
.faq-item.active .faq-question-text {
    color: #FFFFFF;
}


/* ==========================================
   SAFFRON ROTATING ACCORDION INDICATOR
========================================== */

.faq-toggle {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(242, 140, 40, 0.25);
    border-radius: 50%;
    color: var(--faq-saffron);
    background: rgba(242, 140, 40, 0.06);
    transform-style: preserve-3d;
    transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), color 0.35s ease, background 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}


    .faq-toggle span {
        position: absolute;
        display: block;
        width: 11px;
        height: 2px;
        border-radius: 10px;
        background: currentColor;
        transition: transform 0.4s ease, opacity 0.3s ease;
    }


        /* Horizontal Line */

        .faq-toggle span:first-child {
            transform: rotate(0deg);
        }


        /* Vertical Line */

        .faq-toggle span:last-child {
            transform: rotate(90deg);
        }


/* Active State */

.faq-item.active .faq-toggle {
    color: #101B2A;
    background: linear-gradient( 145deg, #FFD3A0, #F28C28 );
    border-color: transparent;
    transform: rotate(135deg) translateZ(8px);
    box-shadow: 0 5px 18px rgba(242, 140, 40, 0.19), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}


/* ==========================================
   SMOOTH ANSWER REVEAL
========================================== */

.faq-answer {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    visibility: hidden;
    transition: grid-template-rows 0.42s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.3s ease, visibility 0.3s ease;
}


.faq-answer-inner {
    overflow: hidden;
    min-height: 0;
}


    .faq-answer-inner p {
        margin: 0;
        padding: 0 70px 0 74px;
        color: #A9B7C8;
        font-size: 14px;
        line-height: 1.95;
        transform: translateY(-8px);
        transition: padding 0.4s ease, transform 0.4s ease, color 0.3s ease;
    }


/* Open State */

.faq-item.active .faq-answer {
    grid-template-rows: 1fr;
    opacity: 1;
    visibility: visible;
}


.faq-item.active .faq-answer-inner p {
    padding-top: 0;
    padding-bottom: 24px;
    transform: translateY(0);
    color: #AEBCCD;
}


/* ==========================================
   BOTTOM LINE
========================================== */

.faq-bottom-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-top: 75px;
}


    .faq-bottom-line > span {
        width: 65px;
        height: 1px;
        background: linear-gradient( 90deg, transparent, rgba(242, 140, 40, 0.55) );
    }


        .faq-bottom-line > span:last-child {
            transform: rotate(180deg);
        }


    .faq-bottom-line p {
        margin: 0;
        color: #8495A9;
        font-size: 14px;
        font-weight: 700;
        letter-spacing: 2px;
        text-align: center;
    }


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

.faq-heading-content,
.faq-visual,
.faq-side-panel,
.faq-accordion,
.faq-bottom-line {
    opacity: 0;
    animation: faqReveal 0.85s ease forwards;
}


.faq-heading-content {
    animation-delay: 0.1s;
}


.faq-visual {
    animation-delay: 0.22s;
}


.faq-side-panel {
    animation-delay: 0.25s;
}


.faq-accordion {
    animation-delay: 0.35s;
}


.faq-bottom-line {
    animation-delay: 0.5s;
}


@keyframes faqReveal {

    from {
        opacity: 0;
        transform: translateY(25px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ==========================================
   RESPONSIVE: LAPTOP
========================================== */

@media (max-width: 1100px) {

    .bubna-faq {
        padding: 95px 0 65px;
    }

    .faq-container {
        width: min(100% - 40px, 1000px);
    }

    .faq-header {
        gap: 25px;
        margin-bottom: 65px;
    }

    .faq-body {
        grid-template-columns: 0.78fr 1.22fr;
        gap: 28px;
    }

    .faq-side-panel {
        padding: 26px 22px;
    }

    .faq-question {
        grid-template-columns: 32px minmax(0, 1fr) 34px;
        gap: 12px;
        padding: 18px;
    }

    .faq-question-text {
        font-size: 14px;
    }

    .faq-answer-inner p {
        padding-right: 28px;
        padding-left: 62px;
    }

    .faq-item.active .faq-answer-inner p {
        padding-bottom: 22px;
    }

    .faq-badge-top {
        right: -5px;
    }

    .faq-badge-bottom {
        left: -5px;
    }
}


/* ==========================================
   RESPONSIVE: TABLET
========================================== */

@media (max-width: 850px) {

    .bubna-faq {
        padding: 80px 0 55px;
    }

    .faq-header {
        grid-template-columns: 1fr;
        gap: 25px;
        margin-bottom: 55px;
    }

    .faq-heading-content {
        max-width: 650px;
    }

        .faq-heading-content h2 {
            font-size: clamp(40px, 7vw, 58px);
        }

        .faq-heading-content > p {
            max-width: 580px;
        }

    .faq-visual {
        min-height: 350px;
        margin-top: 5px;
    }

    .faq-visual-card {
        width: 260px;
    }

    .faq-body {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .faq-side-panel {
        position: relative;
        top: auto;
        padding: 27px;
    }

        .faq-side-panel h3 {
            font-size: 31px;
        }

    .faq-panel-feature {
        max-width: 450px;
    }

    .faq-panel-footer {
        margin-top: 20px;
    }

    .faq-accordion {
        gap: 12px;
    }

    .faq-question {
        min-height: 76px;
        padding: 18px 22px;
    }

    .faq-question-text {
        font-size: 14px;
    }

    .faq-answer-inner p {
        padding-left: 72px;
        padding-right: 70px;
    }

    .faq-item.active .faq-answer-inner p {
        padding-bottom: 25px;
    }

    .faq-bottom-line {
        margin-top: 55px;
    }
}


/* ==========================================
   RESPONSIVE: MOBILE
========================================== */

@media (max-width: 600px) {

    .bubna-faq {
        padding: 70px 0 45px;
    }

    .faq-container {
        width: calc(100% - 32px);
    }

    .faq-eyebrow {
        gap: 9px;
        font-size: 10px;
        letter-spacing: 1.8px;
        margin-bottom: 20px;
    }

    .faq-eyebrow-line {
        width: 23px;
    }

    .faq-heading-content h2 {
        font-size: clamp(35px, 9vw, 47px);
        letter-spacing: -1.5px;
        line-height: 1.16;
    }

    .faq-heading-content > p {
        margin-top: 17px;
        font-size: 12px;
        line-height: 1.85;
    }

    .faq-header {
        gap: 18px;
        margin-bottom: 38px;
    }


    /* Compact 3D Visual */

    .faq-visual {
        min-height: 320px;
        margin: 0 -5px;
    }

    .faq-visual-card {
        width: 230px;
        min-height: 275px;
        padding: 20px;
        border-radius: 21px;
    }

    .faq-visual-icon {
        width: 38px;
        height: 38px;
    }

    .faq-visual-status {
        font-size: 7px;
    }

    .faq-visual-question-mark {
        height: 125px;
    }

        .faq-visual-question-mark > span {
            font-size: 105px;
        }

    .faq-visual-orbit-one {
        width: 250px;
        height: 250px;
    }

    .faq-visual-orbit-two {
        width: 200px;
        height: 200px;
    }

    .faq-float-badge {
        gap: 8px;
        padding: 10px;
    }

    .faq-badge-top {
        top: 13px;
        right: 0;
    }

    .faq-badge-bottom {
        left: 0;
        bottom: 12px;
    }

    .faq-badge-symbol,
    .faq-badge-check {
        width: 29px;
        height: 29px;
    }

    .faq-float-badge strong {
        font-size: 10px;
    }

    .faq-float-badge small {
        font-size: 8px;
    }


    /* Side Panel */

    .faq-side-panel {
        padding: 25px 22px;
        border-radius: 18px;
    }

        .faq-side-panel h3 {
            margin-top: 24px;
            font-size: 29px;
        }

        .faq-side-panel > p {
            font-size: 12px;
        }

    .faq-panel-divider {
        margin: 23px 0;
    }


    /* Accordion */

    .faq-accordion {
        gap: 10px;
    }

    .faq-item {
        border-radius: 13px;
    }

    .faq-question {
        grid-template-columns: 29px minmax(0, 1fr) 31px;
        gap: 10px;
        min-height: 73px;
        padding: 15px 12px;
    }

    .faq-question-number {
        width: 29px;
        height: 29px;
        font-size: 10px;
        border-radius: 8px;
    }

    .faq-question-text {
        font-size: 12px;
        line-height: 1.65;
    }

    .faq-toggle {
        width: 30px;
        height: 30px;
    }

        .faq-toggle span {
            width: 10px;
        }

    .faq-answer-inner p {
        padding-left: 51px;
        padding-right: 18px;
        font-size: 10px;
        line-height: 1.85;
    }

    .faq-item.active .faq-answer-inner p {
        padding-bottom: 20px;
    }

    .faq-bottom-line {
        gap: 10px;
        margin-top: 40px;
    }

        .faq-bottom-line > span {
            width: 24px;
        }

        .faq-bottom-line p {
            max-width: 240px;
            font-size: 8px;
            line-height: 1.8;
            letter-spacing: 1.2px;
        }


    /* Reduce Decorative Elements */

    .faq-orb-one {
        width: 65px;
        height: 65px;
        right: -10px;
    }

    .faq-orb-two {
        width: 42px;
        height: 42px;
        left: -5px;
    }

    .faq-ring-one {
        right: -80px;
    }

    .faq-ring-two {
        left: -50px;
    }

    .faq-cube-one {
        left: -10px;
        transform: scale(0.7);
    }

    .faq-cube-two {
        right: -5px;
    }

    .faq-floating-diamond {
        right: 4%;
    }
}


/* ==========================================
   RESPONSIVE: SMALL MOBILE
========================================== */

@media (max-width: 380px) {

    .faq-container {
        width: calc(100% - 24px);
    }

    .faq-heading-content h2 {
        font-size: 33px;
    }

    .faq-visual {
        min-height: 285px;
    }

    .faq-visual-card {
        width: 205px;
        min-height: 260px;
        padding: 17px;
    }

    .faq-visual-question-mark > span {
        font-size: 95px;
    }

    .faq-visual-orbit-one {
        width: 220px;
        height: 220px;
    }

    .faq-visual-orbit-two {
        width: 180px;
        height: 180px;
    }

    .faq-badge-top {
        right: -3px;
    }

    .faq-badge-bottom {
        left: -3px;
    }

    .faq-float-badge {
        padding: 8px;
    }

        .faq-float-badge strong {
            font-size: 8px;
        }

        .faq-float-badge small {
            font-size: 7px;
        }

    .faq-question {
        grid-template-columns: 25px minmax(0, 1fr) 27px;
        gap: 8px;
        padding: 14px 9px;
    }

    .faq-question-number {
        width: 25px;
        height: 25px;
        font-size: 8px;
    }

    .faq-question-text {
        font-size: 10px;
    }

    .faq-toggle {
        width: 27px;
        height: 27px;
    }

    .faq-answer-inner p {
        padding-left: 42px;
        padding-right: 14px;
        font-size: 10px;
    }
}


/* ==========================================
   ACCESSIBILITY: REDUCED MOTION
========================================== */

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

    .bubna-faq *,
    .bubna-faq *::before,
    .bubna-faq *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}








/* ==========================================
   BUBNA FINAL CTA SECTION
   LIGHT THEME + 3D ANIMATION
========================================== */

.bubna-final-cta,
.bubna-final-cta * {
    box-sizing: border-box;
}

.bubna-final-cta {
    --cta-navy: #0B2E59;
    --cta-navy-dark: #071D39;
    --cta-orange: #F28C28;
    --cta-gold: #FFB45E;
    --cta-text: #172B46;
    --cta-muted: #64748B;
    position: relative;
    isolation: isolate;
    width: 100%;
    padding: 100px 0;
    overflow: hidden;
    background: radial-gradient( ellipse at 0% 0%, rgba(242, 140, 40, 0.10), transparent 36% ), radial-gradient( ellipse at 100% 100%, rgba(11, 46, 89, 0.07), transparent 38% ), linear-gradient( 135deg, #FFFFFF 0%, #F8FAFD 48%, #FFF9F2 100% );
    font-family: "Outfit", "Inter", sans-serif;
}


/* ==========================================
   ANIMATED BACKGROUND
========================================== */

.cta-3d-background {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    perspective: 1000px;
}


/* Perspective Grid */

.cta-bg-grid {
    position: absolute;
    width: 150%;
    height: 500px;
    left: -25%;
    bottom: -340px;
    background-image: linear-gradient( rgba(11, 46, 89, 0.10) 1px, transparent 1px ), linear-gradient( 90deg, rgba(11, 46, 89, 0.10) 1px, transparent 1px );
    background-size: 55px 55px;
    transform: perspective(450px) rotateX(65deg);
    transform-origin: center top;
    -webkit-mask-image: linear-gradient( to bottom, transparent, #000 30%, #000 75%, transparent );
    mask-image: linear-gradient( to bottom, transparent, #000 30%, #000 75%, transparent );
    animation: ctaGridMove 18s linear infinite;
    opacity: 0.48;
}


@keyframes ctaGridMove {

    from {
        background-position: 0 0;
    }

    to {
        background-position: 0 110px;
    }
}


/* Soft Animated Glows */

.cta-bg-glow {
    position: absolute;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    filter: blur(95px);
    opacity: 0.22;
    animation: ctaGlowFloat 11s ease-in-out infinite alternate;
}


.cta-bg-glow-one {
    top: -210px;
    left: -150px;
    background: #FFD09B;
}


.cta-bg-glow-two {
    right: -170px;
    bottom: -220px;
    background: #A7C5E8;
    animation-delay: -5s;
}


@keyframes ctaGlowFloat {

    from {
        transform: translate3d(0, 0, 0) scale(0.9);
    }

    to {
        transform: translate3d(65px, -45px, 0) scale(1.15);
    }
}


/* ==========================================
   3D FLOATING ORBS
========================================== */

.cta-orb {
    position: absolute;
    border-radius: 50%;
    transform-style: preserve-3d;
    animation: ctaOrbFloat 8s ease-in-out infinite;
}


.cta-orb-one {
    top: 10%;
    left: 8%;
    width: 95px;
    height: 95px;
    background: radial-gradient( circle at 28% 25%, #FFFFFF 0%, #FFD9AE 12%, #F28C28 42%, rgba(242, 140, 40, 0.13) 72% );
    box-shadow: inset -10px -15px 25px rgba(128, 64, 10, 0.16), 0 25px 55px rgba(242, 140, 40, 0.13);
}


.cta-orb-two {
    right: 7%;
    bottom: 12%;
    width: 60px;
    height: 60px;
    background: radial-gradient( circle at 28% 25%, #FFFFFF 0%, #D8E8FA 16%, #7EA9D9 46%, #1D4B7D 78% );
    box-shadow: inset -8px -10px 20px rgba(0, 0, 0, 0.15), 0 20px 40px rgba(11, 46, 89, 0.12);
    animation-delay: -3s;
}


@keyframes ctaOrbFloat {

    0%, 100% {
        transform: translate3d(0, 0, 0) rotateY(0deg);
    }

    50% {
        transform: translate3d(12px, -24px, 35px) rotateY(35deg);
    }
}


/* ==========================================
   3D CUBES
========================================== */

.cta-cube {
    position: absolute;
    width: 42px;
    height: 42px;
    transform-style: preserve-3d;
    animation: ctaCubeFloat 12s ease-in-out infinite;
}


    .cta-cube span {
        position: absolute;
        inset: 0;
        border: 1px solid rgba(242, 140, 40, 0.42);
        background: rgba(242, 140, 40, 0.055);
        box-shadow: inset 0 0 12px rgba(242, 140, 40, 0.05);
    }


        .cta-cube span:nth-child(1) {
            transform: translateZ(21px);
        }

        .cta-cube span:nth-child(2) {
            transform: rotateY(180deg) translateZ(21px);
        }

        .cta-cube span:nth-child(3) {
            transform: rotateY(90deg) translateZ(21px);
        }

        .cta-cube span:nth-child(4) {
            transform: rotateY(-90deg) translateZ(21px);
        }

        .cta-cube span:nth-child(5) {
            transform: rotateX(90deg) translateZ(21px);
        }

        .cta-cube span:nth-child(6) {
            transform: rotateX(-90deg) translateZ(21px);
        }


.cta-cube-one {
    top: 35%;
    left: 3%;
}


.cta-cube-two {
    right: 4%;
    top: 17%;
    width: 28px;
    height: 28px;
    animation-delay: -5s;
}


    .cta-cube-two span:nth-child(1) {
        transform: translateZ(14px);
    }

    .cta-cube-two span:nth-child(2) {
        transform: rotateY(180deg) translateZ(14px);
    }

    .cta-cube-two span:nth-child(3) {
        transform: rotateY(90deg) translateZ(14px);
    }

    .cta-cube-two span:nth-child(4) {
        transform: rotateY(-90deg) translateZ(14px);
    }

    .cta-cube-two span:nth-child(5) {
        transform: rotateX(90deg) translateZ(14px);
    }

    .cta-cube-two span:nth-child(6) {
        transform: rotateX(-90deg) translateZ(14px);
    }


@keyframes ctaCubeFloat {

    0%, 100% {
        transform: translate3d(0, 0, 0) rotateX(0deg) rotateY(0deg);
    }

    50% {
        transform: translate3d(12px, -20px, 30px) rotateX(55deg) rotateY(65deg);
    }
}


/* ==========================================
   FINANCIAL GROWTH LINES
========================================== */

.cta-growth-lines {
    position: absolute;
    width: 100%;
    height: 100%;
    inset: 0;
    opacity: 0.8;
}


.cta-growth-path {
    fill: none;
    stroke: url(#ctaGrowthGradient);
    stroke-width: 1.6;
    stroke-dasharray: 8 12;
    animation: ctaLineFlow 20s linear infinite;
}


.cta-growth-path-one {
    stroke-width: 2;
}

.cta-growth-path-two {
    animation-delay: -5s;
    opacity: 0.65;
}

.cta-growth-path-three {
    animation-delay: -10s;
    opacity: 0.4;
}


@keyframes ctaLineFlow {

    from {
        stroke-dashoffset: 0;
    }

    to {
        stroke-dashoffset: -400;
    }
}


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

.cta-container {
    position: relative;
    width: min(1240px, calc(100% - 48px));
    margin: 0 auto;
    perspective: 1400px;
}


.cta-main-card {
    position: relative;
    display: grid;
    grid-template-columns: 1.08fr 0.92fr;
    align-items: center;
    gap: 45px;
    padding: 72px 65px 60px;
    overflow: hidden;
    border: 1px solid rgba(11, 46, 89, 0.10);
    border-radius: 30px;
    background: linear-gradient( 140deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.94) 54%, rgba(255, 248, 239, 0.96) 100% );
    box-shadow: 0 35px 90px rgba(11, 46, 89, 0.10), 0 10px 30px rgba(11, 46, 89, 0.04), inset 0 1px 0 #FFFFFF;
    transform-style: preserve-3d;
    animation: ctaCardEntrance 0.9s ease both;
    transition: border-color 0.4s ease, box-shadow 0.4s ease;
}


    .cta-main-card::before {
        content: "";
        position: absolute;
        width: 430px;
        height: 430px;
        top: -250px;
        right: 15%;
        border-radius: 50%;
        background: rgba(242, 140, 40, 0.07);
        filter: blur(45px);
        pointer-events: none;
    }


    .cta-main-card::after {
        content: "";
        position: absolute;
        right: -100px;
        bottom: -220px;
        width: 420px;
        height: 420px;
        border-radius: 50%;
        border: 1px solid rgba(11, 46, 89, 0.06);
        box-shadow: 0 0 0 25px rgba(11, 46, 89, 0.018), 0 0 0 50px rgba(11, 46, 89, 0.012);
        pointer-events: none;
    }


@keyframes ctaCardEntrance {

    from {
        opacity: 0;
        transform: translateY(30px) rotateX(3deg);
    }

    to {
        opacity: 1;
        transform: translateY(0) rotateX(0);
    }
}


/* Saffron Top Line */

.cta-card-top-line {
    position: absolute;
    top: 0;
    left: 8%;
    width: 84%;
    height: 2px;
    background: linear-gradient( 90deg, transparent, #F28C28, #FFD2A0, #F28C28, transparent );
    background-size: 200% 100%;
    animation: ctaTopLineFlow 6s linear infinite;
}


@keyframes ctaTopLineFlow {

    from {
        background-position: 100% 0;
    }

    to {
        background-position: -100% 0;
    }
}


/* ==========================================
   LEFT CONTENT
========================================== */

.cta-content {
    position: relative;
    z-index: 3;
    transform: translateZ(25px);
}


.cta-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 23px;
    color: var(--cta-orange);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2.3px;
}


.cta-eyebrow-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    color: var(--cta-orange);
    border: 1px solid rgba(242, 140, 40, 0.25);
    border-radius: 11px;
    background: linear-gradient( 145deg, #FFFFFF, #FFF3E5 );
    box-shadow: 0 6px 15px rgba(242, 140, 40, 0.09);
    transform-style: preserve-3d;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}


.cta-eyebrow:hover .cta-eyebrow-icon {
    transform: rotateY(25deg) rotateX(15deg) translateY(-2px);
    box-shadow: 0 10px 22px rgba(242, 140, 40, 0.14);
}


.cta-eyebrow-icon svg {
    width: 20px;
    height: 20px;
}


.cta-content h2 {
    max-width: 620px;
    margin: 0;
    color: var(--cta-navy);
    font-size: clamp(36px, 4.2vw, 54px);
    line-height: 1.15;
    font-weight: 750;
    letter-spacing: -1.8px;
}


    .cta-content h2 > span {
        display: block;
        color: var(--cta-orange);
        margin-top: 5px;
    }


.cta-heading-dot {
    color: var(--cta-navy);
}


.cta-description {
    max-width: 540px;
    margin: 23px 0 0;
    color: #66758A;
    font-size: 16px;
    line-height: 1.95;
}


/* ==========================================
   HIGHLIGHTS
========================================== */

.cta-highlights {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 20px;
    margin-top: 25px;
}


.cta-highlight {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #344963;
    font-size: 14px;
    font-weight: 600;
}


.cta-highlight-check {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    color: #B85C0B;
    border: 1px solid rgba(242, 140, 40, 0.27);
    border-radius: 50%;
    background: #FFF1DF;
    transition: transform 0.35s ease, background 0.35s ease;
}


    .cta-highlight-check svg {
        width: 13px;
        height: 13px;
    }


.cta-highlight:hover .cta-highlight-check {
    transform: rotateY(180deg) scale(1.08);
    background: #FFE2C0;
}


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

.cta-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-top: 35px;
    perspective: 800px;
}


.cta-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    min-height: 55px;
    padding: 0 22px;
    overflow: hidden;
    border-radius: 11px;
    text-decoration: none;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    transition: transform 0.35s ease, box-shadow 0.35s ease, background 0.35s ease, border-color 0.35s ease;
    transform-style: preserve-3d;
    -webkit-tap-highlight-color: transparent;
}


    .cta-btn:focus-visible {
        outline: 3px solid rgba(242, 140, 40, 0.55);
        outline-offset: 4px;
    }


/* Primary Button */

.cta-btn-primary {
    color: #FFFFFF;
    background: linear-gradient( 135deg, #0D3B70, #0B2E59 55%, #071F3D );
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 8px 0 #041A34, 0 14px 28px rgba(11, 46, 89, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.17);
    transform: translateY(-3px);
}


    .cta-btn-primary::before {
        content: "";
        position: absolute;
        top: -50%;
        left: -100%;
        width: 60%;
        height: 200%;
        background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.18), transparent );
        transform: rotate(25deg);
        transition: left 0.65s ease;
    }


    .cta-btn-primary:hover::before {
        left: 150%;
    }


    .cta-btn-primary:hover {
        transform: translateY(-6px) rotateX(5deg);
        box-shadow: 0 11px 0 #041A34, 0 23px 38px rgba(11, 46, 89, 0.23), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    }


    .cta-btn-primary:active {
        transform: translateY(2px);
        box-shadow: 0 2px 0 #041A34, 0 5px 12px rgba(11, 46, 89, 0.12);
    }


    .cta-btn-primary > span:first-child {
        position: relative;
        z-index: 1;
    }


/* Primary Arrow Icon */

.cta-btn-icon {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.09);
    transition: transform 0.35s ease, background 0.35s ease;
}


    .cta-btn-icon svg {
        width: 17px;
        height: 17px;
    }


.cta-btn-primary:hover .cta-btn-icon {
    transform: translateX(4px) translateZ(8px);
    background: rgba(255, 255, 255, 0.17);
}


/* Secondary Button */

.cta-btn-secondary {
    color: var(--cta-navy);
    background: linear-gradient( 145deg, #FFFFFF, #F8FAFD );
    border: 1px solid rgba(11, 46, 89, 0.15);
    box-shadow: 0 5px 0 #DDE5EF, 0 10px 22px rgba(11, 46, 89, 0.07), inset 0 1px 0 #FFFFFF;
    transform: translateY(-3px);
}


    .cta-btn-secondary:hover {
        color: #A9530A;
        border-color: rgba(242, 140, 40, 0.45);
        background: linear-gradient( 145deg, #FFFFFF, #FFF3E4 );
        transform: translateY(-6px) rotateX(5deg);
        box-shadow: 0 8px 0 #F1D5B8, 0 18px 32px rgba(242, 140, 40, 0.12);
    }


    .cta-btn-secondary:active {
        transform: translateY(2px);
        box-shadow: 0 2px 0 #F1D5B8, 0 5px 12px rgba(242, 140, 40, 0.08);
    }


.cta-secondary-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    color: #C56A18;
    border: 1px solid rgba(242, 140, 40, 0.22);
    border-radius: 8px;
    background: #FFF2E3;
    transition: transform 0.35s ease, background 0.35s ease;
}


    .cta-secondary-icon svg {
        width: 17px;
        height: 17px;
    }


.cta-btn-secondary:hover .cta-secondary-icon {
    transform: rotateY(180deg);
    background: #FFE5C7;
}


/* ==========================================
   RIGHT 3D FINANCIAL VISUAL
========================================== */

.cta-visual {
    position: relative;
    z-index: 2;
    min-height: 390px;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1100px;
    transform-style: preserve-3d;
}


/* 3D Orbits */

.cta-visual-orbit {
    position: absolute;
    width: 335px;
    height: 335px;
    border: 1px solid rgba(242, 140, 40, 0.23);
    border-radius: 50%;
    transform-style: preserve-3d;
}


.cta-orbit-one {
    transform: rotateX(65deg) rotateZ(-25deg);
    animation: ctaOrbitOne 17s linear infinite;
}


.cta-orbit-two {
    width: 265px;
    height: 265px;
    border-color: rgba(11, 46, 89, 0.12);
    transform: rotateY(65deg) rotateX(20deg);
    animation: ctaOrbitTwo 20s linear infinite;
}


@keyframes ctaOrbitOne {

    from {
        rotate: 0deg;
    }

    to {
        rotate: 360deg;
    }
}


@keyframes ctaOrbitTwo {

    from {
        rotate: 0deg;
    }

    to {
        rotate: -360deg;
    }
}


/* ==========================================
   GROWTH CARD
========================================== */

.cta-growth-card {
    position: relative;
    z-index: 3;
    width: min(100%, 345px);
    padding: 23px 22px 19px;
    border: 1px solid rgba(11, 46, 89, 0.10);
    border-radius: 22px;
    background: linear-gradient( 145deg, rgba(255, 255, 255, 0.98), rgba(255, 250, 243, 0.97) );
    box-shadow: 0 30px 65px rgba(11, 46, 89, 0.13), 0 10px 25px rgba(242, 140, 40, 0.05), inset 0 1px 0 #FFFFFF;
    transform-style: preserve-3d;
    transform: rotateY(-8deg) rotateX(5deg) translateZ(25px);
    animation: ctaGrowthCardFloat 6s ease-in-out infinite;
    transition: box-shadow 0.4s ease, border-color 0.4s ease;
}


@keyframes ctaGrowthCardFloat {

    0%, 100% {
        transform: translateY(0) rotateY(-8deg) rotateX(5deg) translateZ(25px);
    }

    50% {
        transform: translateY(-12px) rotateY(4deg) rotateX(-2deg) translateZ(40px);
    }
}


/* Card Header */

.cta-growth-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}


.cta-growth-card-label {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #51647C;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.3px;
}


.cta-live-dot {
    width: 7px;
    height: 7px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #F28C28;
    box-shadow: 0 0 0 4px rgba(242, 140, 40, 0.12);
    animation: ctaLivePulse 2s ease-in-out infinite;
}


@keyframes ctaLivePulse {

    0%, 100% {
        box-shadow: 0 0 0 3px rgba(242, 140, 40, 0.10);
    }

    50% {
        box-shadow: 0 0 0 7px rgba(242, 140, 40, 0.035);
    }
}


.cta-growth-menu {
    display: flex;
    gap: 3px;
    padding: 7px 8px;
    border-radius: 7px;
    background: #F1F4F8;
}


    .cta-growth-menu span {
        width: 3px;
        height: 3px;
        border-radius: 50%;
        background: #8090A4;
    }


/* ==========================================
   CHART
========================================== */

.cta-chart {
    position: relative;
    height: 195px;
    margin-top: 16px;
    overflow: hidden;
    border-radius: 12px;
    background: linear-gradient( 180deg, rgba(11, 46, 89, 0.015), rgba(242, 140, 40, 0.035) );
    transform-style: preserve-3d;
}


/* Horizontal Grid Lines */

.cta-chart-grid {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 16px 0;
}


    .cta-chart-grid span {
        display: block;
        width: 100%;
        height: 1px;
        background: rgba(11, 46, 89, 0.07);
    }


/* Chart Bars */

.cta-chart-bars {
    position: absolute;
    z-index: 1;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    gap: 8px;
    padding: 15px 15px 0;
}


.cta-bar-wrap {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    flex: 1;
    height: 100%;
    perspective: 400px;
}


.cta-bar {
    position: relative;
    width: 100%;
    max-width: 25px;
    border-radius: 5px 5px 0 0;
    transform-origin: bottom;
    transform-style: preserve-3d;
    box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.5), 5px 0 10px rgba(11, 46, 89, 0.035);
    animation: ctaBarRise 1.3s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}


    .cta-bar::after {
        content: "";
        position: absolute;
        top: 0;
        right: -5px;
        width: 5px;
        height: 100%;
        background: rgba(11, 46, 89, 0.12);
        transform: skewY(35deg);
        transform-origin: left top;
    }


.cta-bar-one {
    height: 30%;
    background: linear-gradient( 180deg, #F9C58F, #F28C28 );
    animation-delay: 0.1s;
}


.cta-bar-two {
    height: 42%;
    background: linear-gradient( 180deg, #B8CDE7, #6D91BC );
    animation-delay: 0.2s;
}


.cta-bar-three {
    height: 37%;
    background: linear-gradient( 180deg, #FFD2A1, #F4A253 );
    animation-delay: 0.3s;
}


.cta-bar-four {
    height: 57%;
    background: linear-gradient( 180deg, #8DB4E1, #315D91 );
    animation-delay: 0.4s;
}


.cta-bar-five {
    height: 72%;
    background: linear-gradient( 180deg, #FFC98E, #F28C28 );
    animation-delay: 0.5s;
}


.cta-bar-six {
    height: 91%;
    background: linear-gradient( 180deg, #0E467F, #0B2E59 );
    animation-delay: 0.6s;
}


@keyframes ctaBarRise {

    from {
        transform: scaleY(0);
        opacity: 0.3;
    }

    to {
        transform: scaleY(1);
        opacity: 1;
    }
}


/* Animated Growth Line */

.cta-chart-line {
    position: absolute;
    z-index: 2;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}


.cta-chart-path {
    fill: none;
    stroke: url(#ctaLineGradient);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 450;
    stroke-dashoffset: 450;
    filter: drop-shadow(0 3px 5px rgba(242, 140, 40, 0.18));
    animation: ctaDrawChart 2.2s 0.4s ease forwards;
}


@keyframes ctaDrawChart {

    to {
        stroke-dashoffset: 0;
    }
}


.cta-chart-point {
    fill: #F28C28;
    stroke: #FFFFFF;
    stroke-width: 3;
    transform-box: fill-box;
    transform-origin: center;
    animation: ctaPointPulse 2s ease-in-out infinite;
}


@keyframes ctaPointPulse {

    0%, 100% {
        transform: scale(0.85);
    }

    50% {
        transform: scale(1.2);
    }
}


/* Chart Labels */

.cta-chart-labels {
    display: flex;
    justify-content: space-between;
    gap: 5px;
    margin-top: 12px;
    color: #8996A7;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
}


/* Growth Card Footer */

.cta-growth-card-footer {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 19px;
    padding-top: 16px;
    border-top: 1px solid rgba(11, 46, 89, 0.08);
}


.cta-footer-symbol {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    color: #FFFFFF;
    border-radius: 11px;
    background: linear-gradient( 145deg, #F9B46C, #F28C28 );
    box-shadow: 0 6px 14px rgba(242, 140, 40, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}


    .cta-footer-symbol svg {
        width: 22px;
        height: 22px;
    }


.cta-growth-card-footer strong,
.cta-growth-card-footer span {
    display: block;
}


.cta-growth-card-footer strong {
    color: #183453;
    font-size: 12px;
    font-weight: 800;
}


.cta-growth-card-footer > div:last-child > span {
    margin-top: 4px;
    color: #8290A2;
    font-size: 12px;
}


/* ==========================================
   FLOATING 3D BADGES
========================================== */

.cta-floating-badge {
    position: absolute;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid rgba(11, 46, 89, 0.09);
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 15px 35px rgba(11, 46, 89, 0.11), inset 0 1px 0 #FFFFFF;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    transform-style: preserve-3d;
    animation: ctaBadgeFloat 5s ease-in-out infinite;
}


.cta-badge-target {
    top: 40px;
    right: -25px;
}


.cta-badge-progress {
    bottom: 38px;
    left: -25px;
    animation-delay: -2.5s;
}


@keyframes ctaBadgeFloat {

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

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


.cta-target-icon,
.cta-progress-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    flex-shrink: 0;
    color: #C46A1A;
    border: 1px solid rgba(242, 140, 40, 0.19);
    border-radius: 10px;
    background: #FFF2E3;
}


.cta-progress-icon {
    color: #0B2E59;
    border-color: rgba(11, 46, 89, 0.12);
    background: #EDF4FC;
}


    .cta-target-icon svg,
    .cta-progress-icon svg {
        width: 21px;
        height: 21px;
    }


.cta-floating-badge strong,
.cta-floating-badge span {
    display: block;
}


.cta-floating-badge strong {
    color: #173351;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}


.cta-floating-badge div:last-child > span {
    margin-top: 4px;
    color: #8A97A8;
    font-size: 12px;
    white-space: nowrap;
}


/* ==========================================
   BOTTOM DETAILS
========================================== */

.cta-card-bottom-line {
    position: absolute;
    z-index: 2;
    left: 65px;
    right: 65px;
    bottom: 24px;
    display: flex;
    align-items: center;
    gap: 15px;
}


.cta-bottom-line-left,
.cta-bottom-line-right {
    flex: 1;
    height: 1px;
    background: linear-gradient( 90deg, rgba(11, 46, 89, 0.04), rgba(11, 46, 89, 0.15) );
}


.cta-bottom-line-right {
    background: linear-gradient( 90deg, rgba(11, 46, 89, 0.15), rgba(11, 46, 89, 0.04) );
}


.cta-bottom-label {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #8592A3;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.5px;
    white-space: nowrap;
}


    .cta-bottom-label i {
        display: block;
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: #F28C28;
    }


/* ==========================================
   RESPONSIVE: LAPTOP
========================================== */

@media (max-width: 1100px) {

    .bubna-final-cta {
        padding: 80px 0;
    }

    .cta-container {
        width: min(100% - 40px, 1000px);
    }

    .cta-main-card {
        grid-template-columns: 1fr 0.9fr;
        gap: 25px;
        padding: 55px 38px 58px;
    }

    .cta-content h2 {
        font-size: clamp(34px, 4.1vw, 45px);
    }

    .cta-visual {
        min-height: 360px;
    }

    .cta-growth-card {
        width: min(100%, 310px);
        padding: 19px;
    }

    .cta-visual-orbit {
        width: 285px;
        height: 285px;
    }

    .cta-orbit-two {
        width: 230px;
        height: 230px;
    }

    .cta-badge-target {
        right: -5px;
    }

    .cta-badge-progress {
        left: -5px;
    }

    .cta-card-bottom-line {
        left: 38px;
        right: 38px;
    }
}


/* ==========================================
   RESPONSIVE: TABLET
========================================== */

@media (max-width: 850px) {

    .bubna-final-cta {
        padding: 70px 0;
    }

    .cta-main-card {
        grid-template-columns: 1fr;
        gap: 15px;
        padding: 48px 40px 65px;
    }

    .cta-content {
        max-width: 680px;
    }

        .cta-content h2 {
            max-width: 620px;
            font-size: clamp(38px, 6vw, 52px);
        }

    .cta-description {
        max-width: 600px;
    }

    .cta-visual {
        min-height: 390px;
        margin-top: 5px;
    }

    .cta-growth-card {
        width: min(100%, 345px);
    }

    .cta-visual-orbit {
        width: 330px;
        height: 330px;
    }

    .cta-orbit-two {
        width: 265px;
        height: 265px;
    }

    .cta-badge-target {
        right: max(0px, calc(50% - 220px));
    }

    .cta-badge-progress {
        left: max(0px, calc(50% - 220px));
    }

    .cta-card-bottom-line {
        left: 40px;
        right: 40px;
    }
}


/* ==========================================
   RESPONSIVE: MOBILE
========================================== */

@media (max-width: 600px) {

    .bubna-final-cta {
        padding: 55px 0;
    }

    .cta-container {
        width: calc(100% - 30px);
    }

    .cta-main-card {
        gap: 10px;
        padding: 35px 23px 65px;
        border-radius: 23px;
    }

    .cta-eyebrow {
        gap: 9px;
        margin-bottom: 20px;
        font-size: 8px;
        letter-spacing: 1.4px;
    }

    .cta-eyebrow-icon {
        width: 31px;
        height: 31px;
        flex-shrink: 0;
    }

        .cta-eyebrow-icon svg {
            width: 17px;
            height: 17px;
        }

    .cta-content h2 {
        font-size: clamp(31px, 8.5vw, 42px);
        letter-spacing: -1.2px;
        line-height: 1.19;
    }

        .cta-content h2 > span {
            margin-top: 5px;
        }

    .cta-description {
        margin-top: 17px;
        font-size: 12px;
        line-height: 1.9;
    }


    /* Highlights */

    .cta-highlights {
        flex-direction: column;
        gap: 11px;
        margin-top: 20px;
    }

    .cta-highlight {
        font-size: 10px;
    }


    /* Buttons Stack Vertically */

    .cta-actions {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
        margin-top: 27px;
    }

    .cta-btn {
        width: 100%;
        min-height: 54px;
        padding: 0 16px;
        justify-content: space-between;
        font-size: 12px;
    }

    .cta-btn-primary {
        transform: translateY(-2px);
    }

        .cta-btn-primary:hover,
        .cta-btn-secondary:hover {
            transform: translateY(-3px);
        }


    /* Mobile 3D Visual */

    .cta-visual {
        min-height: 350px;
        margin: 0 -10px;
    }

    .cta-growth-card {
        width: min(100%, 295px);
        padding: 17px;
        border-radius: 19px;
    }

    .cta-chart {
        height: 165px;
    }

    .cta-growth-card-label {
        font-size: 8px;
        letter-spacing: 1px;
    }

    .cta-chart-labels {
        font-size: 6px;
    }

    .cta-visual-orbit {
        width: 270px;
        height: 270px;
    }

    .cta-orbit-two {
        width: 220px;
        height: 220px;
    }


    /* Floating Badges */

    .cta-floating-badge {
        gap: 8px;
        padding: 9px 10px;
        border-radius: 11px;
    }

    .cta-badge-target {
        top: 22px;
        right: -1px;
    }

    .cta-badge-progress {
        left: -1px;
        bottom: 22px;
    }

    .cta-target-icon,
    .cta-progress-icon {
        width: 29px;
        height: 29px;
    }

        .cta-target-icon svg,
        .cta-progress-icon svg {
            width: 17px;
            height: 17px;
        }

    .cta-floating-badge strong {
        font-size: 10px;
    }

    .cta-floating-badge div:last-child > span {
        font-size: 7px;
    }


    /* Background Decorations */

    .cta-orb-one {
        width: 58px;
        height: 58px;
        left: -10px;
    }

    .cta-orb-two {
        width: 42px;
        height: 42px;
        right: -5px;
    }

    .cta-cube-one {
        left: -10px;
        transform: scale(0.7);
    }

    .cta-cube-two {
        right: -5px;
    }


    /* Bottom Detail */

    .cta-card-bottom-line {
        left: 20px;
        right: 20px;
        bottom: 23px;
        gap: 8px;
    }

    .cta-bottom-label {
        gap: 5px;
        font-size: 6px;
        letter-spacing: 0.8px;
    }

        .cta-bottom-label i {
            width: 3px;
            height: 3px;
        }
}


/* ==========================================
   RESPONSIVE: SMALL MOBILE
========================================== */

@media (max-width: 380px) {

    .cta-container {
        width: calc(100% - 22px);
    }

    .cta-main-card {
        padding: 30px 17px 60px;
    }

    .cta-content h2 {
        font-size: 30px;
        letter-spacing: -0.9px;
    }

    .cta-eyebrow {
        font-size: 7px;
        letter-spacing: 1px;
    }

    .cta-description {
        font-size: 10px;
    }

    .cta-visual {
        min-height: 320px;
    }

    .cta-growth-card {
        width: min(100%, 260px);
        padding: 15px;
    }

    .cta-chart {
        height: 145px;
    }

    .cta-visual-orbit {
        width: 235px;
        height: 235px;
    }

    .cta-orbit-two {
        width: 195px;
        height: 195px;
    }

    .cta-floating-badge {
        padding: 7px 8px;
    }

        .cta-floating-badge strong {
            font-size: 8px;
        }

        .cta-floating-badge div:last-child > span {
            font-size: 6px;
        }

    .cta-card-bottom-line {
        left: 13px;
        right: 13px;
        gap: 5px;
    }

    .cta-bottom-label {
        font-size: 5.5px;
        letter-spacing: 0.5px;
    }
}


/* ==========================================
   ACCESSIBILITY
========================================== */

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

    .bubna-final-cta *,
    .bubna-final-cta *::before,
    .bubna-final-cta *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}












/* =====================================================
   BUBNA FINANCIAL SERVICES — DARK 3D HERO
   Unique Prefix: bfx-
===================================================== */

.bfx-hero,
.bfx-hero * {
    box-sizing: border-box;
}

.bfx-hero {
    --bfx-navy: #071426;
    --bfx-navy-light: #102b4b;
    --bfx-blue: #1c5da8;
    --bfx-gold: #f2b84b;
    --bfx-gold-light: #ffe4a0;
    --bfx-white: #ffffff;
    --bfx-muted: #b4c1d3;
    position: relative;
    isolation: isolate;
    width: 100%;
    min-height: 570px;
    padding: 58px 0 54px;
    overflow: hidden;
    background: #071426;
    color: var(--bfx-white);
    font-family: "Plus Jakarta Sans", "Inter", sans-serif;
}


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

.bfx-bg-base {
    position: absolute;
    inset: 0;
    z-index: -5;
    background: radial-gradient( ellipse at 76% 40%, rgba(21, 76, 132, 0.28), transparent 38% ), radial-gradient( ellipse at 8% 10%, rgba(19, 53, 92, 0.42), transparent 35% ), linear-gradient( 115deg, #06101e 0%, #0a1a2f 48%, #071426 100% );
}


/* Animated background glows */

.bfx-bg-glow {
    position: absolute;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    filter: blur(100px);
    pointer-events: none;
    z-index: -4;
    opacity: 0.3;
    will-change: transform;
}

.bfx-glow-left {
    left: -200px;
    top: -200px;
    background: #174d85;
    animation: bfxGlowLeft 12s ease-in-out infinite alternate;
}

.bfx-glow-right {
    right: -160px;
    bottom: -220px;
    background: #b47a21;
    opacity: 0.17;
    animation: bfxGlowRight 14s ease-in-out infinite alternate;
}

@keyframes bfxGlowLeft {
    0% {
        transform: translate3d(0, 0, 0) scale(0.9);
    }

    100% {
        transform: translate3d(90px, 80px, 0) scale(1.2);
    }
}

@keyframes bfxGlowRight {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    100% {
        transform: translate3d(-90px, -70px, 0) scale(1.25);
    }
}


/* =====================================================
   3D PERSPECTIVE GRID
===================================================== */

.bfx-grid-wrap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -120px;
    height: 370px;
    overflow: hidden;
    z-index: -3;
    perspective: 500px;
    pointer-events: none;
    mask-image: linear-gradient( to bottom, transparent, rgba(0, 0, 0, 0.9) 30%, transparent 95% );
    -webkit-mask-image: linear-gradient( to bottom, transparent, rgba(0, 0, 0, 0.9) 30%, transparent 95% );
}

.bfx-grid-plane {
    position: absolute;
    left: -35%;
    top: -50%;
    width: 170%;
    height: 170%;
    transform: rotateX(63deg) translateY(-10px);
    transform-origin: center top;
    background-image: linear-gradient( rgba(79, 149, 220, 0.19) 1px, transparent 1px ), linear-gradient( 90deg, rgba(79, 149, 220, 0.19) 1px, transparent 1px );
    background-size: 48px 48px;
    animation: bfxGridMove 12s linear infinite;
}

@keyframes bfxGridMove {
    from {
        background-position: 0 0, 0 0;
    }

    to {
        background-position: 0 96px, 96px 0;
    }
}


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

.bfx-bg-orbit {
    position: absolute;
    border: 1px solid rgba(116, 165, 219, 0.13);
    border-radius: 50%;
    pointer-events: none;
    z-index: -2;
}

.bfx-bg-orbit-one {
    width: 620px;
    height: 620px;
    top: -390px;
    right: -160px;
    transform: rotateX(65deg) rotateZ(-20deg);
    animation: bfxBgOrbitOne 24s linear infinite;
}

.bfx-bg-orbit-two {
    width: 450px;
    height: 450px;
    bottom: -290px;
    left: 20%;
    transform: rotateX(65deg) rotateZ(30deg);
    border-color: rgba(242, 184, 75, 0.12);
    animation: bfxBgOrbitTwo 28s linear infinite reverse;
}

@keyframes bfxBgOrbitOne {
    from {
        transform: rotateX(65deg) rotateZ(0deg);
    }

    to {
        transform: rotateX(65deg) rotateZ(360deg);
    }
}

@keyframes bfxBgOrbitTwo {
    from {
        transform: rotateX(65deg) rotateZ(0deg);
    }

    to {
        transform: rotateX(65deg) rotateZ(360deg);
    }
}


/* =====================================================
   PARTICLES
===================================================== */

.bfx-particle-layer {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: -1;
}

.bfx-particle {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--bfx-gold-light);
    box-shadow: 0 0 8px rgba(242, 184, 75, 0.7), 0 0 18px rgba(242, 184, 75, 0.3);
    opacity: 0;
    animation: bfxParticleFloat var(--bfx-duration, 9s) ease-in-out infinite;
    animation-delay: var(--bfx-delay, 0s);
}

@keyframes bfxParticleFloat {
    0% {
        opacity: 0;
        transform: translate3d(0, 30px, 0) scale(0.5);
    }

    20% {
        opacity: 0.8;
    }

    70% {
        opacity: 0.5;
    }

    100% {
        opacity: 0;
        transform: translate3d(var(--bfx-drift, 20px), -160px, 0) scale(1.2);
    }
}


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

.bfx-bg-shape {
    position: absolute;
    pointer-events: none;
    z-index: -2;
    border: 1px solid rgba(255, 255, 255, 0.07);
    background: linear-gradient( 135deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0) );
    box-shadow: inset 0 0 25px rgba(255, 255, 255, 0.015), 0 15px 40px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(4px);
}

.bfx-shape-one {
    width: 72px;
    height: 72px;
    top: 14%;
    left: 45%;
    transform: rotate(35deg) skew(-5deg, -5deg);
    animation: bfxShapeFloat 8s ease-in-out infinite;
}

.bfx-shape-two {
    width: 40px;
    height: 40px;
    bottom: 15%;
    left: 7%;
    transform: rotate(45deg);
    animation: bfxShapeFloat 10s ease-in-out infinite reverse;
}

.bfx-shape-three {
    width: 28px;
    height: 28px;
    top: 25%;
    right: 6%;
    transform: rotate(45deg);
    border-color: rgba(242, 184, 75, 0.16);
    animation: bfxShapeFloat 7s ease-in-out infinite;
}

@keyframes bfxShapeFloat {
    0%, 100% {
        translate: 0 0;
        rotate: 0deg;
    }

    50% {
        translate: 0 -18px;
        rotate: 12deg;
    }
}


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

.bfx-container {
    position: relative;
    width: min(1240px, calc(100% - 64px));
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    align-items: center;
    gap: 28px;
    z-index: 2;
}


/* =====================================================
   LEFT CONTENT
===================================================== */

.bfx-content {
    position: relative;
    z-index: 3;
    min-width: 0;
    animation: bfxContentEnter 0.9s cubic-bezier(.2, .75, .25, 1) both;
}

@keyframes bfxContentEnter {
    from {
        opacity: 0;
        transform: translate3d(-30px, 12px, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}


/* Eyebrow */

.bfx-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    padding: 9px 14px;
    border: 1px solid rgba(242, 184, 75, 0.22);
    border-radius: 6px;
    background: rgba(242, 184, 75, 0.055);
    color: #e9c985;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.8px;
    line-height: 1.5;
    margin-bottom: 20px;
}

.bfx-status-dot {
    position: relative;
    width: 7px;
    height: 7px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--bfx-gold);
    box-shadow: 0 0 12px rgba(242, 184, 75, 0.65);
}

    .bfx-status-dot::after {
        content: "";
        position: absolute;
        inset: -4px;
        border: 1px solid rgba(242, 184, 75, 0.45);
        border-radius: 50%;
        animation: bfxDotPulse 2s ease-out infinite;
    }

@keyframes bfxDotPulse {
    0% {
        transform: scale(0.6);
        opacity: 1;
    }

    100% {
        transform: scale(1.8);
        opacity: 0;
    }
}


/* Main title */

.bfx-title {
    margin: 0;
    color: #ffffff;
    font-size: clamp(36px, 4vw, 54px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -2px;
    overflow-wrap: anywhere;
}

    .bfx-title > span {
        display: block;
        margin-top: 8px;
        font-size: clamp(25px, 3vw, 38px);
        line-height: 1.2;
        font-weight: 700;
        letter-spacing: -1.2px;
        color: var(--bfx-gold);
        background: linear-gradient( 100deg, #f5cc75 0%, #fff0c4 40%, #d99b31 80%, #f5cc75 100% );
        background-size: 200% auto;
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        animation: bfxTitleShine 7s linear infinite;
    }

@keyframes bfxTitleShine {
    to {
        background-position: 200% center;
    }
}


/* Company type */

.bfx-company-type {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 19px;
    color: #c4d0df;
    font-size: 12px;
    font-weight: 600;
}

.bfx-type-line {
    display: inline-block;
    width: 26px;
    height: 2px;
    flex-shrink: 0;
    background: var(--bfx-gold);
    border-radius: 5px;
}

.bfx-nbfc {
    padding: 4px 7px;
    border: 1px solid rgba(242, 184, 75, 0.25);
    border-radius: 4px;
    color: var(--bfx-gold);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.6px;
}


/* Description */

.bfx-description {
    max-width: 530px;
    margin: 19px 0 23px;
    color: var(--bfx-muted);
    font-size: 12px;
    line-height: 1.9;
    font-weight: 400;
}


/* =====================================================
   SERVICE LINKS
===================================================== */

.bfx-services {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-bottom: 25px;
}

.bfx-service {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 53px;
    padding: 10px 12px;
    border: 1px solid rgba(156, 184, 219, 0.15);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.035);
    color: #eaf0f7;
    text-decoration: none;
    transition: transform 0.3s ease, background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

    .bfx-service:hover {
        transform: translateY(-4px);
        border-color: rgba(242, 184, 75, 0.42);
        background: rgba(242, 184, 75, 0.075);
        box-shadow: 0 12px 25px rgba(0, 0, 0, 0.18);
        color: #ffffff;
    }

.bfx-service-icon {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border: 1px solid rgba(242, 184, 75, 0.2);
    border-radius: 6px;
    color: var(--bfx-gold);
    background: rgba(242, 184, 75, 0.075);
    transition: transform 0.3s ease, background 0.3s ease;
}

.bfx-service:hover .bfx-service-icon {
    transform: rotateY(180deg);
    background: rgba(242, 184, 75, 0.15);
}

.bfx-service-label {
    font-size: 10px;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
}

.bfx-service-arrow {
    margin-left: 1px;
    color: #7589a2;
    font-size: 10px;
    transition: transform 0.3s ease, color 0.3s ease;
}

.bfx-service:hover .bfx-service-arrow {
    color: var(--bfx-gold);
    transform: translate(2px, -2px);
}


/* =====================================================
   BUTTONS
===================================================== */

.bfx-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.bfx-btn {
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    min-height: 47px;
    padding: 0 19px;
    border-radius: 6px;
    text-decoration: none;
    font-size: 10px;
    font-weight: 800;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease, border-color 0.3s ease;
    overflow: hidden;
}

    .bfx-btn i {
        font-size: 10px;
        transition: transform 0.3s ease;
    }

    .bfx-btn:hover i {
        transform: translateX(4px);
    }

.bfx-btn-primary {
    color: #172033;
    background: linear-gradient( 120deg, #f5ce7d, #efb445 55%, #d9992e );
    border: 1px solid rgba(255, 230, 174, 0.45);
    box-shadow: 0 7px 20px rgba(206, 145, 39, 0.17), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

    .bfx-btn-primary::before {
        content: "";
        position: absolute;
        top: -80%;
        left: -100%;
        width: 55%;
        height: 250%;
        background: rgba(255, 255, 255, 0.35);
        transform: rotate(25deg);
        transition: left 0.6s ease;
    }

    .bfx-btn-primary:hover::before {
        left: 150%;
    }

    .bfx-btn-primary:hover {
        transform: translateY(-3px);
        box-shadow: 0 13px 28px rgba(206, 145, 39, 0.28), 0 0 20px rgba(242, 184, 75, 0.1);
        color: #101b2a;
    }

.bfx-btn-outline {
    color: #e7edf6;
    border: 1px solid rgba(178, 199, 226, 0.25);
    background: rgba(255, 255, 255, 0.025);
}

    .bfx-btn-outline:hover {
        transform: translateY(-3px);
        border-color: rgba(242, 184, 75, 0.55);
        background: rgba(242, 184, 75, 0.06);
        color: #ffffff;
    }


/* =====================================================
   TRUST ROW
===================================================== */

.bfx-trust-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    margin-top: 25px;
}

.bfx-trust-item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #b8c6d7;
    font-size: 10px;
    font-weight: 600;
}

.bfx-trust-icon {
    color: var(--bfx-gold);
    font-size: 12px;
}

.bfx-trust-separator {
    height: 15px;
    width: 1px;
    background: rgba(255, 255, 255, 0.18);
}


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

.bfx-visual {
    position: relative;
    isolation: isolate;
    min-width: 0;
    width: 100%;
    height: 425px;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1000px;
    transform-style: preserve-3d;
    animation: bfxVisualEnter 1s cubic-bezier(.2, .75, .25, 1) 0.12s both;
}

@keyframes bfxVisualEnter {
    from {
        opacity: 0;
        transform: translate3d(20px, 15px, 0) scale(0.96);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
}


/* Ambient glow */

.bfx-visual-aura {
    position: absolute;
    z-index: -2;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient( circle, rgba(37, 100, 167, 0.25) 0%, rgba(37, 100, 167, 0.09) 42%, transparent 72% );
    filter: blur(12px);
    animation: bfxAuraPulse 6s ease-in-out infinite alternate;
}

@keyframes bfxAuraPulse {
    from {
        transform: scale(0.85);
        opacity: 0.6;
    }

    to {
        transform: scale(1.2);
        opacity: 1;
    }
}


/* =====================================================
   ROTATING RINGS
===================================================== */

.bfx-ring {
    position: absolute;
    z-index: -1;
    left: 50%;
    top: 48%;
    border-radius: 50%;
    transform-style: preserve-3d;
    pointer-events: none;
}

.bfx-ring-outer {
    width: 350px;
    height: 350px;
    margin-left: -175px;
    margin-top: -175px;
    border: 1px solid rgba(242, 184, 75, 0.25);
    transform: rotateX(67deg) rotateZ(-20deg);
    box-shadow: 0 0 20px rgba(242, 184, 75, 0.025), inset 0 0 20px rgba(242, 184, 75, 0.02);
    animation: bfxRingOuter 18s linear infinite;
}

.bfx-ring-inner {
    width: 285px;
    height: 285px;
    margin-left: -142.5px;
    margin-top: -142.5px;
    border: 1px dashed rgba(115, 169, 224, 0.35);
    transform: rotateX(67deg) rotateZ(30deg);
    animation: bfxRingInner 25s linear infinite reverse;
}

@keyframes bfxRingOuter {
    from {
        transform: rotateX(67deg) rotateZ(0deg);
    }

    to {
        transform: rotateX(67deg) rotateZ(360deg);
    }
}

@keyframes bfxRingInner {
    from {
        transform: rotateX(67deg) rotateZ(0deg);
    }

    to {
        transform: rotateX(67deg) rotateZ(360deg);
    }
}


/* Orbit dots */

.bfx-orbit-dot {
    position: absolute;
    z-index: 1;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--bfx-gold);
    box-shadow: 0 0 10px rgba(242, 184, 75, 0.85), 0 0 22px rgba(242, 184, 75, 0.25);
}

.bfx-orbit-dot-one {
    top: 52px;
    right: 19%;
    animation: bfxDotFloatOne 5s ease-in-out infinite;
}

.bfx-orbit-dot-two {
    bottom: 82px;
    left: 12%;
    width: 6px;
    height: 6px;
    animation: bfxDotFloatTwo 6s ease-in-out infinite;
}

.bfx-orbit-dot-three {
    top: 95px;
    left: 19%;
    width: 5px;
    height: 5px;
    background: #80b9f4;
    box-shadow: 0 0 12px rgba(80, 164, 245, 0.8);
    animation: bfxDotFloatOne 7s ease-in-out infinite reverse;
}

@keyframes bfxDotFloatOne {
    0%, 100% {
        transform: translate3d(0, 0, 0);
    }

    50% {
        transform: translate3d(-8px, -14px, 0);
    }
}

@keyframes bfxDotFloatTwo {
    0%, 100% {
        transform: translate3d(0, 0, 0);
    }

    50% {
        transform: translate3d(10px, 12px, 0);
    }
}


/* =====================================================
   MAIN EMBLEM
===================================================== */

.bfx-emblem-scene {
    position: relative;
    z-index: 2;
    width: min(330px, 78%);
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transform-style: preserve-3d;
    will-change: transform;
    animation: bfxEmblemFloat 6s ease-in-out infinite;
}

@keyframes bfxEmblemFloat {
    0%, 100% {
        transform: translate3d(0, 0, 0);
    }

    50% {
        transform: translate3d(0, -10px, 0);
    }
}

.bfx-emblem-shadow {
    position: absolute;
    left: 12%;
    right: 12%;
    bottom: 0;
    height: 24px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.45);
    filter: blur(16px);
    transform: translateZ(-30px);
    animation: bfxShadowPulse 6s ease-in-out infinite;
}

@keyframes bfxShadowPulse {
    0%, 100% {
        transform: scaleX(1) translateZ(-30px);
        opacity: 0.55;
    }

    50% {
        transform: scaleX(0.78) translateZ(-30px);
        opacity: 0.3;
    }
}

.bfx-emblem-card {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transform-style: preserve-3d;
    will-change: transform;
    border: 1px solid rgba(255, 224, 163, 0.2);
    border-radius: 22px;
    background: linear-gradient( 145deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.015) 55%, rgba(242, 184, 75, 0.035) );
    box-shadow: 0 25px 65px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 -1px 0 rgba(242, 184, 75, 0.1);
    backdrop-filter: blur(8px);
    overflow: hidden;
    transition: transform 0.2s ease-out, box-shadow 0.3s ease;
}

    .bfx-emblem-card::before {
        content: "";
        position: absolute;
        inset: 10px;
        border: 1px solid rgba(242, 184, 75, 0.12);
        border-radius: 15px;
        pointer-events: none;
        transform: translateZ(12px);
    }

    .bfx-emblem-card::after {
        content: "";
        position: absolute;
        inset: auto 12% 0;
        height: 1px;
        background: linear-gradient( 90deg, transparent, rgba(242, 184, 75, 0.7), transparent );
        box-shadow: 0 0 18px rgba(242, 184, 75, 0.3);
    }

.bfx-emblem-image {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 17px;
    filter: drop-shadow(0 18px 20px rgba(0, 0, 0, 0.28));
    transform: translateZ(24px);
    user-select: none;
    pointer-events: none;
}


/* Light sweep */

.bfx-emblem-shine {
    position: absolute;
    z-index: 3;
    top: -70%;
    left: -100%;
    width: 60%;
    height: 250%;
    pointer-events: none;
    background: linear-gradient( 90deg, transparent, rgba(255, 235, 188, 0.09), rgba(255, 255, 255, 0.17), transparent );
    transform: rotate(24deg);
    animation: bfxEmblemShine 7s ease-in-out infinite;
}

@keyframes bfxEmblemShine {
    0%, 25% {
        left: -100%;
    }

    60%, 100% {
        left: 150%;
    }
}


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

.bfx-floating-card {
    position: absolute;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid rgba(174, 198, 228, 0.2);
    border-radius: 9px;
    background: linear-gradient( 135deg, rgba(22, 43, 68, 0.96), rgba(9, 24, 43, 0.95) );
    box-shadow: 0 16px 35px rgba(0, 0, 0, 0.27), inset 0 1px 0 rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(12px);
    transform-style: preserve-3d;
    transition: transform 0.35s ease, border-color 0.35s ease;
}

    .bfx-floating-card:hover {
        border-color: rgba(242, 184, 75, 0.5);
        transform: translateY(-5px) rotateX(3deg);
    }

.bfx-floating-top {
    top: 53px;
    right: 0;
    animation: bfxCardFloatTop 5s ease-in-out infinite;
}

.bfx-floating-bottom {
    bottom: 64px;
    left: -5px;
    animation: bfxCardFloatBottom 6s ease-in-out infinite;
}

@keyframes bfxCardFloatTop {
    0%, 100% {
        transform: translate3d(0, 0, 20px);
    }

    50% {
        transform: translate3d(0, -9px, 20px);
    }
}

@keyframes bfxCardFloatBottom {
    0%, 100% {
        transform: translate3d(0, 0, 25px);
    }

    50% {
        transform: translate3d(0, 8px, 25px);
    }
}

.bfx-floating-icon {
    display: grid;
    place-items: center;
    width: 35px;
    height: 35px;
    flex-shrink: 0;
    border-radius: 7px;
    font-size: 14px;
}

.bfx-floating-icon-gold {
    color: #f6c967;
    background: rgba(242, 184, 75, 0.13);
    border: 1px solid rgba(242, 184, 75, 0.16);
}

.bfx-floating-icon-blue {
    color: #8dc2ff;
    background: rgba(67, 145, 224, 0.14);
    border: 1px solid rgba(97, 166, 238, 0.17);
}

.bfx-floating-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

    .bfx-floating-content strong {
        color: #f6f8fc;
        font-size: 10px;
        line-height: 1.3;
        font-weight: 800;
        white-space: nowrap;
    }

    .bfx-floating-content small {
        color: #9eb0c6;
        font-size: 10px;
        line-height: 1.4;
        white-space: nowrap;
    }

.bfx-floating-check {
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    margin-left: 2px;
    flex-shrink: 0;
    color: #f5c967;
    border-radius: 50%;
    background: rgba(242, 184, 75, 0.13);
    font-size: 8px;
}


/* =====================================================
   3D COINS
===================================================== */

.bfx-coin {
    position: absolute;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #8e5c14;
    font-weight: 900;
    font-family: Arial, sans-serif;
    background: radial-gradient( circle at 32% 25%, #fff1b7 0%, #f6d77e 22%, #e6ad3f 52%, #b77920 78%, #f7d782 100% );
    border: 2px solid #e7bd62;
    box-shadow: inset 0 0 0 3px rgba(131, 82, 14, 0.15), inset 0 0 0 5px rgba(255, 242, 190, 0.3), 0 9px 0 #98621d, 0 17px 22px rgba(0, 0, 0, 0.28), 0 0 20px rgba(242, 184, 75, 0.12);
    transform-style: preserve-3d;
    animation: bfxCoinFloat 5s ease-in-out infinite;
}

    .bfx-coin span {
        font-size: 24px;
        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
    }

.bfx-coin-one {
    width: 48px;
    height: 48px;
    right: 8%;
    bottom: 32%;
    transform: rotateY(-22deg) rotateX(8deg);
}

.bfx-coin-two {
    width: 34px;
    height: 34px;
    left: 13%;
    top: 30%;
    animation-delay: -2.5s;
}

    .bfx-coin-two span {
        font-size: 17px;
    }

@keyframes bfxCoinFloat {
    0%, 100% {
        translate: 0 0;
    }

    50% {
        translate: 0 -12px;
    }
}


/* =====================================================
   BOTTOM 3D PLATFORM
===================================================== */

.bfx-platform {
    position: absolute;
    z-index: -1;
    left: 50%;
    bottom: 24px;
    width: 265px;
    height: 48px;
    transform: translateX(-50%) perspective(350px) rotateX(55deg);
    border-radius: 50%;
    border: 1px solid rgba(242, 184, 75, 0.4);
    background: linear-gradient( 90deg, rgba(242, 184, 75, 0.04), rgba(242, 184, 75, 0.18), rgba(242, 184, 75, 0.04) );
    box-shadow: 0 0 20px rgba(242, 184, 75, 0.09), inset 0 0 20px rgba(242, 184, 75, 0.05);
}

.bfx-platform-top {
    position: absolute;
    inset: 7px 18px;
    border: 1px dashed rgba(242, 184, 75, 0.27);
    border-radius: 50%;
}

.bfx-platform-light {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 150px;
    height: 1px;
    transform: translate(-50%, -50%);
    background: linear-gradient( 90deg, transparent, #f5c96b, transparent );
    box-shadow: 0 0 12px rgba(242, 184, 75, 0.6);
}


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

.bfx-visual-label {
    position: absolute;
    left: 50%;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    transform: translateX(-50%);
    color: #91a4bd;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
    white-space: nowrap;
}

.bfx-label-dot {
    width: 5px;
    height: 5px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--bfx-gold);
    box-shadow: 0 0 8px rgba(242, 184, 75, 0.7);
}


/* =====================================================
   BOTTOM EDGE
===================================================== */

.bfx-bottom-edge {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.07);
}

    .bfx-bottom-edge span {
        display: block;
        width: 25%;
        height: 100%;
        margin-left: -25%;
        background: linear-gradient( 90deg, transparent, #f2b84b, transparent );
        box-shadow: 0 0 15px rgba(242, 184, 75, 0.5);
        animation: bfxBottomLight 7s linear infinite;
    }

@keyframes bfxBottomLight {
    to {
        margin-left: 100%;
    }
}


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

@media (max-width: 1100px) {

    .bfx-hero {
        min-height: auto;
        padding: 48px 0;
    }

    .bfx-container {
        width: min(100% - 44px, 950px);
        grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
        gap: 10px;
    }

    .bfx-title {
        font-size: clamp(34px, 4.3vw, 46px);
        letter-spacing: -1.6px;
    }

        .bfx-title > span {
            font-size: clamp(25px, 3vw, 32px);
        }

    .bfx-description {
        font-size: 12px;
    }

    .bfx-services {
        gap: 7px;
    }

    .bfx-service {
        padding: 9px;
        gap: 7px;
    }

    .bfx-service-label {
        font-size: 10px;
    }

    .bfx-visual {
        height: 380px;
    }

    .bfx-emblem-scene {
        width: min(280px, 80%);
    }

    .bfx-ring-outer {
        width: 300px;
        height: 300px;
        margin-left: -150px;
        margin-top: -150px;
    }

    .bfx-ring-inner {
        width: 240px;
        height: 240px;
        margin-left: -120px;
        margin-top: -120px;
    }

    .bfx-floating-top {
        right: -2px;
        top: 42px;
    }

    .bfx-floating-bottom {
        left: -2px;
        bottom: 58px;
    }

    .bfx-floating-card {
        padding: 10px;
    }

    .bfx-floating-icon {
        width: 30px;
        height: 30px;
    }

    .bfx-coin-one {
        right: 5%;
    }
}


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

@media (max-width: 767px) {

    .bfx-hero {
        padding: 39px 0 35px;
        min-height: auto;
    }

    .bfx-container {
        width: calc(100% - 36px);
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .bfx-content {
        width: 100%;
    }

    .bfx-eyebrow {
        gap: 8px;
        padding: 8px 10px;
        margin-bottom: 17px;
        font-size: 10px;
        letter-spacing: 1.2px;
    }

    .bfx-title {
        font-size: clamp(34px, 7vw, 46px);
        line-height: 1.1;
        letter-spacing: -1.4px;
    }

        .bfx-title > span {
            margin-top: 7px;
            font-size: clamp(26px, 5.5vw, 34px);
            line-height: 1.2;
            letter-spacing: -0.8px;
        }

    .bfx-company-type {
        gap: 8px;
        margin-top: 16px;
        font-size: 10px;
    }

    .bfx-description {
        margin: 16px 0 19px;
        max-width: 560px;
        font-size: 12px;
        line-height: 1.85;
    }

    .bfx-services {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 7px;
        margin-bottom: 20px;
    }

    .bfx-service {
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 8px;
        min-height: 90px;
        padding: 10px;
    }

    .bfx-service-icon {
        width: 30px;
        height: 30px;
        font-size: 12px;
    }

    .bfx-service-label {
        white-space: normal;
        font-size: 10px;
        line-height: 1.4;
    }

    .bfx-service-arrow {
        position: absolute;
        top: 11px;
        right: 9px;
        font-size: 8px;
    }

    .bfx-actions {
        gap: 9px;
    }

    .bfx-btn {
        min-height: 44px;
        padding: 0 13px;
        gap: 10px;
        font-size: 10px;
    }

    .bfx-trust-row {
        margin-top: 19px;
        gap: 12px;
    }

    .bfx-trust-item {
        font-size: 10px;
        gap: 6px;
    }

    .bfx-trust-icon {
        font-size: 12px;
    }

    /* Visual becomes shorter on mobile */

    .bfx-visual {
        height: 340px;
        width: 100%;
        margin-top: 2px;
    }

    .bfx-emblem-scene {
        width: min(255px, 68vw);
    }

    .bfx-emblem-card {
        border-radius: 18px;
    }

    .bfx-emblem-image {
        padding: 13px;
    }

    .bfx-ring-outer {
        width: 280px;
        height: 280px;
        margin-left: -140px;
        margin-top: -140px;
    }

    .bfx-ring-inner {
        width: 225px;
        height: 225px;
        margin-left: -112.5px;
        margin-top: -112.5px;
    }

    .bfx-floating-top {
        top: 28px;
        right: 0;
    }

    .bfx-floating-bottom {
        bottom: 46px;
        left: 0;
    }

    .bfx-floating-card {
        gap: 8px;
        padding: 9px 10px;
    }

    .bfx-floating-icon {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }

    .bfx-floating-content strong {
        font-size: 10px;
    }

    .bfx-floating-content small {
        font-size: 8px;
    }

    .bfx-floating-check {
        width: 15px;
        height: 15px;
        font-size: 7px;
    }

    .bfx-coin-one {
        width: 38px;
        height: 38px;
        right: 9%;
        bottom: 31%;
    }

        .bfx-coin-one span {
            font-size: 20px;
        }

    .bfx-coin-two {
        width: 29px;
        height: 29px;
        left: 9%;
        top: 31%;
    }

        .bfx-coin-two span {
            font-size: 14px;
        }

    .bfx-platform {
        bottom: 22px;
        width: 230px;
    }

    .bfx-visual-label {
        bottom: 0;
        font-size: 8px;
        letter-spacing: 1.6px;
    }

    .bfx-bg-shape-one {
        left: 78%;
        top: 15%;
    }

    .bfx-bg-shape-two {
        bottom: 12%;
        left: 4%;
    }
}


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

@media (max-width: 420px) {

    .bfx-container {
        width: calc(100% - 28px);
    }

    .bfx-hero {
        padding-top: 32px;
        padding-bottom: 29px;
    }

    .bfx-title {
        font-size: 32px;
        letter-spacing: -1.2px;
    }

        .bfx-title > span {
            font-size: 25px;
        }

    .bfx-eyebrow {
        font-size: 8px;
        letter-spacing: 0.9px;
    }

    .bfx-description {
        font-size: 10px;
    }

    .bfx-services {
        gap: 6px;
    }

    .bfx-service {
        min-height: 84px;
        padding: 8px;
    }

    .bfx-service-label {
        font-size: 10px;
    }

    .bfx-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 9px;
    }

    .bfx-btn {
        width: 100%;
        justify-content: space-between;
        padding: 0 15px;
    }

    .bfx-trust-row {
        gap: 9px;
    }

    .bfx-trust-item {
        font-size: 8px;
    }

    .bfx-visual {
        height: 305px;
    }

    .bfx-emblem-scene {
        width: 220px;
        max-width: 65vw;
    }

    .bfx-ring-outer {
        width: 240px;
        height: 240px;
        margin-left: -120px;
        margin-top: -120px;
    }

    .bfx-ring-inner {
        width: 195px;
        height: 195px;
        margin-left: -97.5px;
        margin-top: -97.5px;
    }

    .bfx-floating-top {
        top: 22px;
        right: -2px;
    }

    .bfx-floating-bottom {
        bottom: 42px;
        left: -2px;
    }

    .bfx-floating-card {
        padding: 8px;
    }

    .bfx-floating-icon {
        width: 25px;
        height: 25px;
        font-size: 10px;
    }

    .bfx-floating-content strong {
        font-size: 8px;
    }

    .bfx-floating-content small {
        font-size: 7px;
    }

    .bfx-coin-one {
        right: 5%;
    }

    .bfx-coin-two {
        left: 5%;
    }

    .bfx-platform {
        width: 205px;
        bottom: 20px;
    }

    .bfx-visual-label {
        font-size: 7px;
        letter-spacing: 1.3px;
    }
}


/* =====================================================
   ACCESSIBILITY: REDUCE MOTION
===================================================== */

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

    .bfx-hero *,
    .bfx-hero *::before,
    .bfx-hero *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}