:root {
            --canvas: #f5f1ea;
            --canvas-bright: #fbfaf6;
            --ink: #111812;
            --ink-70: rgba(2, 2, 2, 0.7);
            --ink-48: rgba(5, 5, 5, 0.48);
            --line: rgba(0, 0, 0, 0.13);
            --moss: #E44E0A;
            --moss-deep: #B23A08;
            --lime: #FFB27A;
            --lime-soft: #FFDFC2;
            --amber: #ebae72;
            --blue: #6776d5;
            --serif: 'Plus Jakarta Sans', sans-serif;
            --sans: 'Inter', sans-serif;
            --nav-height: 82px;
            --ease-out: cubic-bezier(.16, 1, .3, 1);
            --ease-in-out: cubic-bezier(.65, 0, .35, 1);
            --section-padding: 100px;
            --radius-sm: 12px;
            --radius-md: 20px;
            --radius-lg: 28px;
            --radius-xl: 40px;
            --shadow-sm: 0 2px 8px rgba(0,0,0,0.04);
            --shadow-md: 0 8px 32px rgba(0,0,0,0.06);
            --shadow-lg: 0 20px 60px rgba(0,0,0,0.08);
            --shadow-glow: 0 8px 40px rgba(232,93,4,0.15);
            --shadow-xl: 0 30px 80px rgba(0,0,0,0.12);
            --font-heading: 'Plus Jakarta Sans', sans-serif;
            --font-body: 'Inter', sans-serif;
        }

        * { margin:0; padding:0; box-sizing:border-box; }
        html { scroll-behavior:smooth; overflow-x:hidden; max-width: 100%; }

        body {
            font-family: var(--sans);
            color: var(--ink);
            background: var(--canvas);
            line-height: 1.6;
            overflow-x: hidden;
            -webkit-font-smoothing: antialiased;
        }

        h1,h2,h3,h4,h5,h6 {
            font-family: var(--font-heading);
            font-weight: 700;
            letter-spacing: -0.02em;
            color: var(--ink);
        }

        a { text-decoration:none; color:inherit; }
        img { max-width:100%; height:auto; display:block; }

        /* ========== SCROLL PROGRESS ========== */
        .scroll-progress {
            position:fixed; top:0; left:0; height:3px;
            background: linear-gradient(90deg, #E44E0A, #FFB27A);
            z-index:10000; width:0%; transition:width 0.1s linear;
        }

        .skip-link {
            position:fixed; z-index:10001; left:1rem; top:-5rem;
            padding:.7rem 1rem; border-radius:4px;
            color:#fff; background:var(--ink);
            font-weight:600; transition:top .2s ease;
        }
        .skip-link:focus { top:1rem; }


        /* ========== HEADER - Same bg as hero ========== */
        .site-header {
            position:fixed; z-index:1000; top:0; right:0; left:0;
            background: transparent;
            transition: background .35s ease, border-color .35s ease, box-shadow .35s ease;
            padding:0 clamp(20px, 4vw, 60px);
            backdrop-filter: blur(20px) saturate(180%);
            -webkit-backdrop-filter: blur(20px) saturate(180%);
            transition: all 0.3s ease;
            height: var(--nav-height);
            display: flex;
            align-items: center;
        }

        .site-header.is-scrolled {
            border-bottom: 1px solid rgba(17, 24, 18, .09);
            background: rgba(250, 249, 245, .82);
            box-shadow: 0 8px 24px rgba(29, 37, 29, .05);
            backdrop-filter: blur(16px) saturate(130%);
            -webkit-backdrop-filter: blur(16px) saturate(130%);
        }

        .site-nav {
            max-width: 1400px;
            margin: 0 auto;
            padding: 16px 74px;
            display:flex; align-items:center; width:100%;
            /* gap: 28px; */
        }

        /* LOGO - Bigger & clearer */
        .brand {
                      /* Fixed width */
            display:flex; align-items:center;
            flex: 0 0 180px;
            justify-content: flex-start;
            flex:0 0 auto;
             /* max-width:300px; */
        }
        .brand img {
            display:block;
            width:auto; height:auto;
            max-width:100%; max-height:100px;
            object-fit:contain; object-position:left center;
        }

        /* Desktop nav */
        .desktop-navigation {
            display:flex; align-items:center;
            justify-content:center; flex:1;
            gap:20px; margin-left:auto;
        }

        .nav-cluster { display:flex; align-items:center; gap:4px; }

        .nav-item { position:relative; }

        .nav-link {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 10px 15px;
            border: none;
            background: transparent;
            font-family: var(--font-body) !important;
            font-size: 0.9rem;
            font-weight: 600;
            color: var(--text-primary);
            cursor: pointer;
            border-radius: 10px;
            transition: all 0.3s ease;
            white-space: nowrap;
            letter-spacing: -0.01em;
        }

        .nav-link:hover,
        .nav-link:focus-visible,
        .nav-item.is-open > .nav-link { color:var(--ink); }

        .nav-link--trigger { border-radius:9px; }
        .nav-item.is-open > .nav-link--trigger { background:rgba(17,24,18,.055); }

        .nav-link__chevron {
            width:6px; height:6px;
            margin:-3px 0 0 8px;
            border-right:1.5px solid currentColor;
            border-bottom:1.5px solid currentColor;
            transform:rotate(45deg);
            transition:transform .25s var(--ease-out);
        }
        .nav-item.is-open .nav-link__chevron {
            transform:rotate(225deg) translate(-1px,-1px);
        }

        .nav-cta {
            display:inline-flex; align-items:center;
            justify-content:center; gap:10px;
            min-height:48px; padding:0 18px;
            border-radius:10px;
            color:#f8faf4; background:var(--ink);
            font-size:13px; font-weight:700;
            letter-spacing:-.02em;
            border:1px solid transparent;
            transition:transform .35s var(--ease-out), box-shadow .35s ease, color .25s ease, background .25s ease;
        }

        .nav-cta span { color:var(--lime); font-size:17px; line-height:1; }
        .nav-cta:hover {
            color:#fff; background:var(--moss-deep);
            transform:translateY(-2px);
            box-shadow:0 7px 14px rgba(178,58,8,.2);
        }

        /* MEGA MENU */
        .mega-menu {
            position:absolute;
            top:calc(100% + 16px);
            left:-25px;
            display:grid;
            width:720px;
            padding:17px;
            border:1px solid rgba(17,24,18,.1);
            border-radius:18px;
            background:rgba(252,252,249,.96);
            box-shadow:0 24px 60px rgba(31,41,31,.16);
            backdrop-filter:blur(20px);
            opacity:0; visibility:hidden;
            transform:translateY(-8px) scale(.985);
            transform-origin:top left;
            transition:opacity .27s ease, visibility .27s ease, transform .36s var(--ease-out);
            pointer-events:none;
        }

        .mega-menu::before{
    content:"";
    position:absolute;
    top:-16px;
    left:0;
    width:100%;
    height:16px;
}
        .nav-item.is-open .mega-menu {
            opacity:1; visibility:visible;
            transform:translateY(0) scale(1);
            pointer-events:auto;
        }

        .mega-menu--products { grid-template-columns:3.16fr 1.82fr 2.25fr; gap:11px; width: 820px;}
        .mega-menu--solutions { grid-template-columns:1fr 1.36fr; gap:22px; width:650px; }
        .mega-menu--services { grid-template-columns:1fr 1.36fr; gap:22px; width:650px; }

        .mega-menu__intro {
            display:flex; flex-direction:column;
            width: 300px;
            min-height:300px; padding:22px;
            border-radius:12px;
            color:#f5f5ed;
            background:linear-gradient(145deg, #7a2b0a, #3d1504 75%);
            overflow:hidden; position:relative;
        }
        .mega-menu__intro::before {
            content:''; position:absolute;
            width:180px; height:180px;
            right:-78px; bottom:-88px;
            border:1px solid rgba(255,178,122,.32);
            border-radius:50%;
            box-shadow:0 0 0 26px rgba(255,178,122,.04), 0 0 0 52px rgba(255,178,122,.025);
            pointer-events:none;
        }
        .mega-menu__intro::after {
            content:''; position:absolute;
            width:7px; height:7px;
            right:50px; bottom:72px;
            background:var(--lime);
            border-radius:50%;
            box-shadow:28px 25px 0 rgba(255,178,122,.55), -25px 38px 0 rgba(235,174,114,.8);
            pointer-events:none;
        }
        .menu-kicker {
            position:relative; z-index:1;
            color:var(--lime); font-size:10px;
            font-weight:700; letter-spacing:.13em;
            text-transform:uppercase;
        }

        .mega-menu__intro .producth2 {
            position:relative; z-index:1;
            margin:21px 0 auto;
            font-size:31px; font-weight:500;
            line-height:1.3; letter-spacing:-.02em;
        }

           .mega-menu__intro h2 {
            position:relative; z-index:1;
            margin:21px 0 auto;
            font-size:22px; font-weight:500;
            line-height:1.2; letter-spacing:-.01em;
        }

        .menu-text-link {
            position:relative; z-index:1;
            display:inline-flex; align-items:center; gap:9px;
            width:max-content;
            color:rgba(255,255,255,.9);
            font-size:12px; font-weight:600;
        }
        .menu-text-link span { color:var(--lime); font-size:16px; }

        .mega-menu__navigation {
            display:flex; flex-direction:column;
            gap:4px; padding:6px 0;
            
            width: 250px;
        }
        .mega-category {
            
            display:flex; align-items:center; gap:9px;
            width:100%; padding:11px 8px;
            border:0; border-radius:8px;
            color: black; background:transparent;
            font-size:16px; font-weight:600;
            text-align:left; cursor:pointer;
            transition:color .2s ease, background .2s ease;
        }
        .mega-category span { color:var(--ink-48); font-size:13px; font-weight:700; }
        .mega-category:hover,
        .mega-category:focus-visible,
        .mega-category.is-active { color:var(--ink); background:#f4ece5; outline:none; }
        .mega-category.is-active span { color:var(--moss); }

        .mega-menu__detail {
            position:relative; min-height:250px;
            padding:6px 0 6px 5px;
            border-left:1px solid var(--line);
        }
        .mega-subnav {
            display:flex; flex-direction:column;
            gap:4px; height:100%;
        }
        .mega-subnav[hidden] { display:none; }
        .mega-subnav__label {
            margin:7px 12px 8px;
            color:var(--ink-48); font-size:10px;
            font-weight:700; letter-spacing:.1em;
            text-transform:uppercase;
        }
        .mega-subnav a {
            display:block; padding:11px 12px;
            border-radius:8px;
            transition:background .2s ease, transform .2s ease;
        }
        .mega-subnav a:hover,
        .mega-subnav a:focus-visible { background:#f0f1ea; transform:translateX(3px); outline:none; }
        .mega-subnav strong {
            display:block; color:var(--ink);
            font-size:14px; letter-spacing:-.02em;
        }
        .mega-subnav span {
            display:block; margin-top:4px;
            color:var(--ink-70); font-size:12px; line-height:1.4;
        }

        .solution-links,
        .service-links {
            display:grid;
            grid-template-columns:repeat(2, minmax(0,1fr));
            gap:8px; align-content:center;
        }
        .solution-links a,
        .service-links a {
            position:relative;
            display:flex; align-items:center; justify-content:space-between;
            min-height:74px; padding:16px;
            border:1px solid var(--line); border-radius:11px;
            color:var(--ink); font-size:13px; font-weight:600;
            overflow:hidden;
            transition:color .25s ease, border-color .25s ease, background .25s ease, transform .3s var(--ease-out);
        }
        .solution-links a::after,
        .service-links a::after {
            position:absolute; content:"";
            inset:auto -24px -35px auto;
            width:88px; height:88px;
            border-radius:50%;
            background:rgba(255,178,122,.55); filter:blur(4px);
            opacity:0; transform:scale(.3);
            transition:opacity .3s ease, transform .45s var(--ease-out);
        }
        .solution-links a:hover,
        .solution-links a:focus-visible,
        .service-links a:hover,
        .service-links a:focus-visible {
            border-color:rgba(228,78,10,.3);
            background:#fdefe4;
            transform:translateY(-3px);
            outline:none;
        }
        .solution-links a:hover::after,
        .solution-links a:focus-visible::after,
        .service-links a:hover::after,
        .service-links a:focus-visible::after { opacity:1; transform:scale(1); }
        .solution-links i { position:relative; z-index:1; color:var(--moss); font-size:17px; font-style:normal; }
        .service-links a { min-height:0; padding:16px; }

        /* MOBILE */
        .tablet-navigation,
        .mobile-menu-button,
        .mobile-navigation { display:none; }

        @media (max-width: 1149px) {
            .desktop-navigation { display:none; }
            .nav-cta { display:none; }
            .mobile-menu-button {
                display:flex;
                flex-direction:column;
                align-items:center; justify-content:center;
                width:44px; height:44px;
                margin-left:auto;
                gap:5px; padding:0;
                border:1px solid rgba(17,24,18,.12);
                border-radius:50%;
                background:rgba(255,255,255,.55);
                cursor:pointer;
                flex-shrink:0;
                z-index:1100;
            }
            .mobile-menu-button__bar {
                display:block;
                width:17px; height:1.5px;
                border-radius:1px;
                background:var(--ink);
                transition:transform .3s var(--ease-out), opacity .2s ease;
            }
            .mobile-menu-button.open .mobile-menu-button__bar:nth-child(1) {
                transform:translateY(6.5px) rotate(45deg);
            }
            .mobile-menu-button.open .mobile-menu-button__bar:nth-child(2) { opacity:0; }
            .mobile-menu-button.open .mobile-menu-button__bar:nth-child(3) {
                transform:translateY(-6.5px) rotate(-45deg);
            }
            .site-nav { min-height:70px; }
            .brand img { max-height:230px; max-width:230px; }
        }

        @media (max-width: 767px) {
            .site-header { padding:0 18px; }
            .site-nav { min-height:68px;padding: 16px 30px; }
            .brand img { max-height:160px; max-width:190px; }
        }



        /* Mobile navigation panel */
        .mobile-navigation {
            position:fixed; z-index:1050;
            inset:0;
            display:flex; flex-direction:column;
            min-height:100svh;
            padding:90px 20px 20px;
            color:#f8f8ef;
            background:#2b1108;
            clip-path:circle(0% at calc(100% - 42px) 42px);
            visibility:hidden;
            transition:clip-path .7s var(--ease-out), visibility 0s linear .7s;
            overflow-y:auto;
        }
        .mobile-navigation.is-open {
            clip-path:circle(155% at calc(100% - 42px) 42px);
            visibility:visible;
            transition:clip-path .7s var(--ease-out);
        }
        .mobile-navigation__close {
            position:absolute;
            top:20px; right:20px;
            display:grid;
            width:42px; height:42px;
            place-items:center; padding:0;
            border:1px solid rgba(255,255,255,.24);
            border-radius:50%;
            color:var(--lime); background:transparent;
            font-size:30px; font-weight:300;
            line-height:1; cursor:pointer;
            z-index:1;
        }
        .mobile-accordion { border-top:1px solid rgba(255,255,255,.18); }
        .mobile-accordion:last-of-type { border-bottom:1px solid rgba(255,255,255,.18); }
        .mobile-accordion summary {
            display:flex; align-items:center; justify-content:space-between;
            padding:17px 0;
            color:#fff;
            font-size:clamp(24px, 7vw, 35px);
            font-weight:500; letter-spacing:-.06em;
            list-style:none; cursor:pointer;
        }
        .mobile-accordion summary::-webkit-details-marker { display:none; }
        .mobile-accordion summary span { color:var(--lime); font-size:25px; font-weight:300; }
        .mobile-accordion[open] > summary span { transform:rotate(45deg); }
        .mobile-accordion__body {
            display:grid; gap:2px; padding:0 0 16px;
        }
        .mobile-accordion__body a {
            padding:8px 0;
            color:rgba(255,255,255,.76);
            font-size:14px; font-weight:600;
            letter-spacing:-.02em;
        }
        .mobile-navigation__secondary-links {
            display:flex; flex-wrap:wrap;
            gap:11px 22px; padding:18px 0;
        }
        .mobile-navigation__secondary-links a {
            color:rgba(255,255,255,.65);
            font-size:14px; font-weight:600;
        }
        .mobile-navigation__cta {
            display:flex; align-items:center; justify-content:space-between;
            min-height:58px; padding:0 20px;
            border-radius:10px;
            color:var(--ink); background:var(--lime);
            font-size:15px; font-weight:700;
            margin-top:auto;
        }


      
.mega-menu--internship {
    left: auto;
    right: 0;
    grid-template-columns: 1.05fr 1.1fr 1.45fr;
    gap: 16px;
    width: 920px;
    transform-origin: top right;
}

.mega-menu--internship .mega-menu__intro,
.mega-menu--internship .mega-menu__navigation {
    width: auto;
}

.mega-menu--internship .mega-menu__detail {
    min-height: 355px;
}

a.mega-category {
    text-decoration: none;
}

.mega-category--direct::after {
    content: "↗";
    margin-left: auto;
    color: var(--moss);
    font-size: 16px;
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity .2s ease, transform .2s ease;
}

.mega-category--direct:hover::after,
.mega-category--direct:focus-visible::after {
    opacity: 1;
    transform: translateX(0);
}

.mobile-accordion--internship .mobile-accordion__body p {
    margin: 14px 0 1px;
    color: var(--lime);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.mobile-accordion--internship .mobile-internship-overview {
    color: var(--lime);
}



       
        /* ========== SECTION BADGE Heor section ========== */
        .section-badge {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 10px 22px;
            background: #fff;
            border: 1px solid rgba(232,93,4,0.2);
            border-radius: 100px;
            font-size: 0.82rem;
            font-weight: 700;
            color: #E85D04;
            text-transform: uppercase;
            letter-spacing: 2px;
            margin-bottom: 1.5rem;
            box-shadow: 0 2px 12px rgba(232,93,4,0.06);
        }

 .section-badge::before {
            content: '';
            width: 8px; height: 8px;
            background: #E85D04;
            border-radius: 50%;
            box-shadow: 0 0 0 6px rgba(232,93,4,0.1);
        }

            @keyframes playPulse {
        0%   { box-shadow: 0 0 0 0 rgba(232,93,4,0.45); }
        70%  { box-shadow: 0 0 0 14px rgba(232,93,4,0); }
        100% { box-shadow: 0 0 0 0 rgba(232,93,4,0); }
    }
    .hero-play-btn {
        width: 58px;
        height: 58px;
        min-width: 58px;
        border-radius: 50%;
        background: #fff;
        border: 2px solid rgba(0,0,0,0.1);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #1A1A1A;
        font-size: 1rem;
        cursor: pointer;
        animation: playPulse 2.4s infinite;
    }
    .hero-play-btn i { margin-left: 3px; color: #E85D04; }

    .video-modal-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.75);
        z-index: 9999;
        align-items: center;
        justify-content: center;
        padding: 20px;
    }
    .video-modal-overlay.active { display: flex; }

    .video-modal-box {
        position: relative;
        width: 100%;
        max-width: 860px;
        aspect-ratio: 16/9;
        background: #000;
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    }
    .video-modal-box iframe {
        width: 100%;
        height: 100%;
        border: 0;
    }

    .video-modal-close {
        position: absolute;
        top: -46px;
        right: 0;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: #fff;
        border: none;
        cursor: pointer;
        font-size: 1rem;
        color: #1A1A1A;
    }


       

/* ============ PREMIUM HERO ============ */
/* ===================== HERO BASE ===================== */
.kg-premium-hero {
    --kg-orange: #e85d04;
    --kg-ink: #17130f;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 760px;
    padding: 105px 0 95px;
    background: linear-gradient(115deg, #f8f3eb 0%, #f5efe5 48%, #f6dcc4 100%);
}

.kg-premium-hero .container {
    z-index: 5;
}

/* ===================== ANIMATED BACKGROUND ===================== */
#kgThreeBg {
    position: absolute;
    z-index: 1;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    opacity: .95;
    pointer-events: none;
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.2) 30%, #000 68%, rgba(0,0,0,.65) 100%);
}

.kg-aurora {
    position: absolute;
    z-index: 0;
    pointer-events: none;
    filter: blur(26px);
}

.kg-aurora-one {
    top: -300px;
    right: -170px;
    width: 880px;
    height: 690px;
    opacity: .85;
    background:
        radial-gradient(ellipse at 43% 45%, rgba(232, 93, 4, .43), transparent 48%),
        linear-gradient(135deg, transparent 44%, rgba(255, 157, 78, .22));
    transform: rotate(-18deg);
    animation: kgAuroraOne 13s ease-in-out infinite alternate;
}

.kg-aurora-two {
    bottom: -410px;
    left: -280px;
    width: 820px;
    height: 650px;
    opacity: .8;
    background: radial-gradient(ellipse at center, rgba(255, 180, 90, .40), transparent 61%);
    animation: kgAuroraTwo 15s ease-in-out infinite alternate;
}

.kg-grid-overlay {
    position: absolute;
    z-index: 2;
    inset: 0;
    opacity: .34;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(45, 31, 19, .06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(45, 31, 19, .06) 1px, transparent 1px);
    background-size: 54px 54px;
    mask-image: linear-gradient(90deg, rgba(0,0,0,.5), transparent 35%, #000 70%, rgba(0,0,0,.28));
}

.kg-noise {
    position: absolute;
    z-index: 3;
    inset: 0;
    opacity: .035;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
}

/* ===================== LEFT CONTENT ===================== */
.kg-section-badge {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    padding: 11px 20px;
    margin-bottom: 1.65rem;
    color: var(--kg-orange);
    border: 1px solid rgba(232, 93, 4, .22);
    border-radius: 100px;
    background: rgba(255, 255, 255, .75);
    box-shadow: 0 5px 18px rgba(232, 93, 4, .06);
    font-size: .77rem;
    font-weight: 800;
    letter-spacing: .15em;
    text-transform: uppercase;
}

.kg-section-badge::before {
    width: 9px;
    height: 9px;
    content: "";
    border-radius: 50%;
    background: var(--kg-orange);
    box-shadow: 0 0 0 7px rgba(232, 93, 4, .11);
}

.kg-premium-title {
    /* margin: 0 0 1.6rem; */
    color: var(--kg-ink);
    font-family: var(--font-heading);
    font-size: clamp(2.8rem, 5vw, 4.1rem);
    font-weight: 800;
    line-height: 1.05; margin-bottom: 1.5rem;
    
    width: 100%; 
    max-width: 750px
   
}

.kg-premium-title span {
    color: var(--kg-orange);
     display: inline; 
}

.kg-premium-text {
    max-width: 535px;
    margin: 0 0 2.15rem;
    color: #625b54;
    font-size: 1.15rem;
    line-height: 1.75;
}

.kg-hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 13px;
}

.kg-play-btn {
    display: grid;
    width: 61px;
    height: 61px;
    padding: 0;
    place-items: center;
    cursor: pointer;
    border: 1px solid rgba(232, 93, 4, .24);
    border-radius: 50%;
    background: rgba(255, 255, 255, .86);
    box-shadow: 0 10px 24px rgba(35, 22, 12, .10);
    transition: transform .3s ease, background .3s ease;
}

.kg-play-btn:hover {
    background: #fff4ec;
    transform: translateY(-4px) scale(1.04);
}

.kg-play-btn span {
    width: 0;
    height: 0;
    margin-left: 4px;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 12px solid var(--kg-orange);
}

.kg-main-cta,
.kg-second-cta {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    padding: 16px 25px;
    border-radius: 14px;
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    transition: transform .3s ease, box-shadow .3s ease, background .3s ease;
}

.kg-main-cta {
    color: #fff;
    background: var(--kg-ink);
    box-shadow: 0 14px 28px rgba(20, 16, 12, .16);
}

.kg-main-cta:hover {
    color: #fff;
    background: var(--kg-orange);
    box-shadow: 0 17px 32px rgba(232, 93, 4, .25);
    transform: translateY(-3px);
}

.kg-second-cta {
    color: var(--kg-ink);
    border: 1px solid rgba(23, 19, 15, .14);
    background: rgba(255, 255, 255, .38);
}

.kg-second-cta:hover {
    color: var(--kg-orange);
    border-color: rgba(232, 93, 4, .42);
    transform: translateY(-3px);
}

/* ===================== RIGHT VISUAL ===================== */
.kg-erp-showcase {
    position: relative;
    width: min(100%, 575px);
    height: 570px;
    margin: auto;
    transform-style: preserve-3d;
    transition: transform .25s ease-out;
}

.kg-visual-frame-line {
    position: absolute;
    z-index: 1;
    top: 43px;
    left: 46px;
    width: 425px;
    height: 440px;
    border-top: 1px solid rgba(232, 93, 4, .46);
    border-left: 1px solid rgba(232, 93, 4, .46);
}

.kg-orange-block {
    position: absolute;
    z-index: 1;
    top: 105px;
    right: 5px;
    width: 102px;
    height: 110px;
    background: var(--kg-orange);
    opacity: .94;
}

.kg-side-caption {
    position: absolute;
    z-index: 2;
    top: 72px;
    left: 52px;
    display: flex;
    flex-direction: column;
    gap: 21px;
    color: #766e67;
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .16em;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

.kg-side-caption span:first-child {
    color: var(--kg-orange);
}

.kg-portrait {
    position: absolute;
    z-index: 3;
    top: 0;
    right: 48px;
    width: 372px;
    height: 515px;
    overflow: hidden;
    border-radius: 28px 104px 28px 104px;
    background: #bd8a64;
    box-shadow:
        0 38px 75px rgba(47, 29, 14, .25),
        inset 0 0 0 1px rgba(255,255,255,.55);
}

.kg-portrait::before {
    position: absolute;
    z-index: 4;
    inset: 12px;
    content: "";
    border: 1px solid rgba(255,255,255,.45);
    border-radius: 18px 94px 18px 94px;
    pointer-events: none;
}

.kg-portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 52% center;
    transform: scale(1.04);
    transition: transform 1.2s ease;
}

.kg-erp-showcase:hover .kg-portrait img {
    transform: scale(1.1);
}

.kg-portrait-gradient {
    position: absolute;
    z-index: 2;
    inset: 0;
    background:
        linear-gradient(180deg, transparent 34%, rgba(20, 15, 11, .83) 100%),
        linear-gradient(125deg, rgba(232, 93, 4, .26), transparent 42%);
}

.kg-portrait-copy {
    position: absolute;
    z-index: 5;
    bottom: 35px;
    left: 34px;
    color: #fff;
}

.kg-portrait-copy span {
    display: block;
    margin-bottom: 10px;
    color: #ffbd86;
    font-size: .64rem;
    font-weight: 800;
    letter-spacing: .15em;
}

.kg-portrait-copy strong {
    font-size: 1.88rem;
    font-weight: 700;
    line-height: 1.02;
}

.kg-scan-line {
    position: absolute;
    z-index: 4;
    top: -35%;
    left: 0;
    width: 100%;
    height: 38%;
    background: linear-gradient(to bottom, transparent, rgba(255, 180, 114, .26), transparent);
    mix-blend-mode: screen;
    animation: kgScan 6s ease-in-out infinite;
}

/* Dark information panel */
.kg-system-panel {
    position: absolute;
    z-index: 7;
    bottom: 0;
    left: 0;
    width: 318px;
    padding: 22px 24px 19px;
    overflow: hidden;
    color: #fff;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 18px;
    background: rgba(22, 20, 17, .96);
    box-shadow: 0 26px 48px rgba(31, 20, 12, .28);
    transform: translateZ(35px);
}

.kg-system-panel::after {
    position: absolute;
    top: -80px;
    right: -55px;
    width: 165px;
    height: 165px;
    content: "";
    border-radius: 50%;
    background: rgba(232, 93, 4, .20);
    filter: blur(34px);
}

.kg-system-top,
.kg-progress-label,
.kg-system-bottom {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.kg-system-top {
    color: rgba(255,255,255,.53);
    font-size: .59rem;
    font-weight: 800;
    letter-spacing: .09em;
}

.kg-system-top b {
    color: #ff9b57;
}

.kg-system-metric {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    gap: 5px;
    margin: 27px 0 20px;
}

.kg-system-metric strong {
    font-size: 4rem;
    font-weight: 800;
    line-height: .74;
    letter-spacing: -.08em;
}

.kg-system-metric small {
    margin-bottom: 4px;
    color: #ff9250;
    font-size: 1.35rem;
    font-weight: 800;
}

.kg-system-metric span {
    margin: 0 0 2px 9px;
    color: rgba(255,255,255,.64);
    font-size: .58rem;
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: .1em;
}

.kg-progress-line {
    position: relative;
    z-index: 1;
    height: 4px;
    overflow: hidden;
    border-radius: 8px;
    background: rgba(255,255,255,.15);
}

.kg-progress-line i {
    display: block;
    width: 86%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #e85d04, #ffc08b);
    animation: kgProgress 2.2s ease-out forwards;
}

.kg-progress-label {
    position: relative;
    z-index: 1;
    margin-top: 9px;
    color: rgba(255,255,255,.51);
    font-size: .53rem;
    font-weight: 800;
    letter-spacing: .07em;
}

.kg-progress-label b {
    color: #ffb27a;
}

.kg-system-bottom {
    position: relative;
    z-index: 1;
    margin-top: 18px;
    padding-top: 13px;
    color: rgba(255,255,255,.34);
    border-top: 1px solid rgba(255,255,255,.1);
    font-size: .58rem;
    font-weight: 800;
    letter-spacing: .08em;
}

.kg-system-bottom b {
    color: rgba(255,255,255,.68);
}

/* ===================== VIDEO MODAL ===================== */
.kg-video-modal {
    position: fixed;
    z-index: 9999;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 22px;
    background: rgba(0,0,0,.78);
}

.kg-video-modal.active {
    display: flex;
}

.kg-video-modal-box {
    position: relative;
    width: min(100%, 900px);
    aspect-ratio: 16 / 9;
    overflow: visible;
    border-radius: 16px;
    background: #000;
    box-shadow: 0 25px 80px rgba(0,0,0,.5);
}

.kg-video-modal-box iframe {
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 16px;
}

.kg-video-close {
    position: absolute;
    top: -48px;
    right: 0;
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    cursor: pointer;
    color: #17130f;
    border: 0;
    border-radius: 50%;
    background: #fff;
    font-size: 1.6rem;
    line-height: 1;
}

/* ===================== ANIMATIONS ===================== */
@keyframes kgAuroraOne {
    from { transform: rotate(-18deg) translate3d(0, 0, 0) scale(1); }
    to { transform: rotate(-10deg) translate3d(-58px, 62px, 0) scale(1.12); }
}

@keyframes kgAuroraTwo {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to { transform: translate3d(80px, -48px, 0) scale(1.17); }
}

@keyframes kgScan {
    0%, 18% {
        transform: translateY(-10%);
        opacity: 0;
    }
    31% { opacity: 1; }
    67% {
        transform: translateY(340%);
        opacity: .76;
    }
    81%, 100% {
        transform: translateY(385%);
        opacity: 0;
    }
}

@keyframes kgProgress {
    from { width: 0; }
    to { width: 86%; }
}

/* ===================== RESPONSIVE ===================== */
@media (max-width: 991.98px) {
    .kg-premium-hero {
        min-height: auto;
        padding: 78px 0 65px;
    }

    .kg-erp-showcase {
        margin-top: 14px;
    }
}

@media (max-width: 575.98px) {
    .kg-premium-title {
         font-size: clamp(2rem, 8vw, 2.5rem); /* More responsive font size */
        line-height: 1.2; /* Slightly increased for better readability */
        max-width: 100%; /* Ensure it uses full width on mobile */
        word-wrap: break-word; /* Allow words to break if needed */
    }

    .kg-premium-text {
        font-size: 1.03rem;
    }

    .kg-hero-actions {
        gap: 10px;
    }

    .kg-main-cta,
    .kg-second-cta {
        padding: 14px 17px;
        font-size: .9rem;
    }

    .kg-erp-showcase {
        width: 100%;
        height: 455px;
        transform: scale(.82);
        transform-origin: top center;
        margin-bottom: -82px;
    }

    .kg-portrait {
        right: 14px;
    }

    .kg-side-caption {
        left: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .kg-aurora,
    .kg-scan-line,
    .kg-progress-line i {
        animation: none !important;
    }
}


/* ************************************************************* */
        .section-heading {
            font-family: var(--font-heading);
            font-size: clamp(2.2rem, 4.5vw, 3.8rem);
            font-weight: 800;
            line-height: 1.1;
            margin-bottom: 1.25rem;
            color: #1A1A1A;
            letter-spacing: -0.04em;
        }
        .section-heading .highlight {
            background: linear-gradient(135deg, #E85D04, #F4A261);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .section-subtitle {
            font-size: 1.1rem;
            color: #4A4A4A;
            line-height: 1.7;
            max-width: 600px;
        }


        /* ========== REVEAL ========== */
        .reveal {
            opacity: 0;
            transform: translateY(40px);
            transition: all 0.8s cubic-bezier(0.4,0,0.2,1);
        }
        .reveal.active { opacity:1; transform:translateY(0); }
        .reveal-delay-1 { transition-delay:0.12s; }
        .reveal-delay-2 { transition-delay:0.24s; }
        .reveal-delay-3 { transition-delay:0.36s; }



        /* ========== TRUST SECTION - Premium design ========== */
        .trust-section {
            padding:var(--section-padding) 0;
            background:var(--canvas-bright);
            position:relative;
        }
        .trust-section::before {
            content:''; position:absolute;
            top:0; left:50%; transform:translateX(-50%);
            width:80%; height:1px;
            background:linear-gradient(90deg, transparent, rgba(228,78,10,.3), transparent);
        }
        .trust-header-block {
            display:flex; align-items:center; gap:3rem;
            margin-bottom:3rem; flex-wrap:wrap;
        }
        .trust-header-block .trust-ratings {
            display:flex; align-items:center; gap:1.5rem;
            flex-wrap:wrap;
        }
        .trust-ratings .trust-stat {
            text-align:center;
            padding:0 1.5rem;
            border-right:1px solid var(--line);
        }
        .trust-ratings .trust-stat:last-child { border-right:none; }
        .trust-stat .trust-stat-num {
            font-family:var(--serif);
            font-size:2.2rem; font-weight:800;
            color:var(--moss); line-height:1;
        }
        .trust-stat .trust-stat-label {
            font-size:0.8rem; color:var(--ink-70);
            font-weight:600; text-transform:uppercase;
            letter-spacing:1px; margin-top:0.25rem;
        }
        .trust-logos-row {
            display:flex; align-items:center; justify-content:center;
            gap:3rem; flex-wrap:wrap;
            padding:2.5rem 0;
            border-top:1px solid var(--line);
            border-bottom:1px solid var(--line);
        }
        .trust-logos-row .trust-logo-item {
            display:flex; align-items:center; gap:0.6rem;
            font-family:var(--serif);
            font-size:1.1rem; font-weight:700;
            color:var(--ink-70);
            transition:all .3s ease;
        }
        .trust-logos-row .trust-logo-item:hover { color:var(--moss); }
        .trust-logos-row .trust-logo-item i {
            font-size:1.5rem; color:var(--moss);
        }
        .trust-cards-row {
            display:grid;
            grid-template-columns:repeat(3,1fr);
            gap:1.5rem;
            margin-top:3rem;
        }
        .trust-card-premium {
            background:#fff;
            border-radius:var(--radius-lg);
            padding:2.5rem 2rem;
            border:1px solid var(--line);
            box-shadow:var(--shadow-sm);
            transition:all .4s var(--ease-out);
            position:relative;
            overflow:hidden;
        }
        .trust-card-premium:hover {
            transform:translateY(-8px);
            box-shadow:var(--shadow-xl);
            border-color:rgba(228,78,10,.25);
        }
        .trust-card-premium::before {
            content:''; position:absolute;
            top:0; left:0; right:0; height:4px;
            background:linear-gradient(90deg, var(--moss), var(--lime));
            transform:scaleX(0); transform-origin:left;
            transition:transform .6s var(--ease-out);
        }
        .trust-card-premium:hover::before { transform:scaleX(1); }
        .trust-card-premium .trust-card-icon {
            width:56px; height:56px;
            border-radius:16px;
            display:flex; align-items:center; justify-content:center;
            font-size:1.4rem; margin-bottom:1.25rem;
            transition:all .4s ease;
        }
        .trust-card-icon.coral { background:linear-gradient(135deg, rgba(228,78,10,.12), rgba(255,178,122,.18)); color:var(--moss); }
        .trust-card-icon.teal { background:linear-gradient(135deg, rgba(45,106,79,.12), rgba(45,106,79,.18)); color:#2D6A4F; }
        .trust-card-icon.purple { background:linear-gradient(135deg, rgba(103,118,213,.12), rgba(103,118,213,.18)); color:#6776d5; }
        .trust-card-premium:hover .trust-card-icon { transform:scale(1.1) rotate(-5deg); }
        .trust-card-premium h4 {
            font-family:var(--serif);
            font-size:1.25rem; font-weight:700;
            color:var(--ink); margin-bottom:0.5rem;
        }
        .trust-card-premium p {
            color:var(--ink-70); font-size:0.95rem;
            line-height:1.7; margin:0;
        }

        @media (max-width: 991px) {
            .trust-cards-row { grid-template-columns:1fr; max-width:500px; margin:2rem auto; }
            .trust-logos-row { gap:1.5rem; }
        }

        /* ========== SERVICES ========== */
        .services-section {
            padding:var(--section-padding) 0;
            background:var(--canvas);
        }
        .service-card-img {
            background:#fff;
            border-radius:var(--radius-lg);
            overflow:hidden;
            border:1px solid var(--line);
            box-shadow:var(--shadow-sm);
            transition:all .4s var(--ease-out);
            text-decoration:none; color:inherit;
            display:flex; flex-direction:column;
            height:100%;
        }
        .service-card-img:hover {
            transform:translateY(-8px);
            box-shadow:var(--shadow-xl);
        }
        .service-card-img .service-img-wrap {
            position:relative;
            aspect-ratio:16/11;
            overflow:hidden;
        }
        .service-card-img .service-img-wrap img {
            width:100%; height:100%;
            object-fit:cover;
            transition:transform .8s ease;
        }
        .service-card-img:hover .service-img-wrap img { transform:scale(1.06); }
        .service-card-img .service-img-wrap .service-img-label {
            position:absolute; top:12px; left:12px;
            padding:5px 12px;
            background:rgba(255,255,255,.92);
            backdrop-filter:blur(8px);
            border-radius:100px;
            font-size:0.68rem; font-weight:700;
            color:#E44E0A;
            text-transform:uppercase; letter-spacing:1px;
        }
        .service-card-img .service-card-body {
            padding:1.25rem; flex:1;
            display:flex; flex-direction:column;
        }
        .service-card-img .service-card-body .svc-top {
            display:flex; align-items:center;
            justify-content:space-between;
            margin-bottom:0.4rem;
        }
        .service-card-img .service-card-body h5 {
            font-family:var(--serif);
            font-size:1.2rem; font-weight:700;
            color:var(--ink); margin:0;
        }
        .service-card-img .service-card-body .service-arrow {
            width:34px; height:34px;
            border-radius:50%;
            background:rgba(228,78,10,.08);
            display:flex; align-items:center; justify-content:center;
            color:#E44E0A; font-size:0.8rem;
            transition:all .3s ease; flex-shrink:0;
        }
        .service-card-img:hover .service-card-body .service-arrow {
            background:#E44E0A; color:#fff;
        }
        .service-card-img .service-card-body .svc-desc {
            font-size:0.92rem; color:var(--ink-70);
            line-height:1.5; margin:0;
        }



        /* ========== PRICING ========== */
        /* .pricing-section {
            padding:var(--section-padding) 0;
            background:var(--canvas-bright);
        }
        .pricing-card-premium {
            background:#fff;
            border-radius:var(--radius-lg);
            padding:2.5rem 2rem;
            height:100%;
            border:1px solid var(--line);
            box-shadow:var(--shadow-sm);
            transition:all .4s var(--ease-out);
            display:flex; flex-direction:column;
            position:relative;
        }
        .pricing-card-premium:hover {
            transform:translateY(-8px);
            box-shadow:var(--shadow-xl);
        }
        .pricing-card-premium.featured {
            border:2px solid var(--moss);
            box-shadow:0 8px 40px rgba(228,78,10,.12);
            background:linear-gradient(180deg, #FFF9F5 0%, #fff 30%);
        }
        .pricing-badge {
            position:absolute; top:1.25rem; right:1.25rem;
            padding:6px 16px;
            background:linear-gradient(135deg, var(--moss), #D00000);
            color:#fff; border-radius:100px;
            font-size:0.7rem; font-weight:700;
            text-transform:uppercase; letter-spacing:1px;
        }
        .pricing-name {
            font-family:var(--serif);
            font-size:1.5rem; font-weight:700;
            color:var(--ink); margin-bottom:0.25rem;
        }
        .pricing-price {
            font-family:var(--serif);
            font-size:2.8rem; font-weight:800;
            color:var(--ink); line-height:1;
            margin-bottom:0.25rem;
        }
        .pricing-price span { font-size:1rem; font-weight:500; color:black; }
        .pricing-period { font-size:0.85rem; color:#d09200; margin-bottom:1.5rem; }
        .pricing-features {
            list-style:none; padding:0; margin:0 0 2rem; flex:1;
        }
        .pricing-features li {
            display:flex; align-items:flex-start; gap:0.6rem;
            padding:0.5rem 0;
            font-size:0.93rem; color:var(--ink-70);
            font-weight: 500;
            border-bottom:1px solid rgba(0,0,0,.04);
        }
        .pricing-features li i { color:#2D6A4F; margin-top:3px; font-size:0.75rem; flex-shrink:0; }
        .pricing-btn {
            display:block; width:100%; padding:0.95rem;
            border-radius:100px; font-weight:700; font-size:0.95rem;
            text-align:center; text-decoration:none;
            transition:all .3s ease; border:none; cursor:pointer;
            font-family:var(--serif);
        }
        .pricing-btn-primary { background:var(--ink); color:#fff; }
        .pricing-btn-primary:hover { background:var(--moss); color:#fff; transform:translateY(-2px); box-shadow:0 8px 25px rgba(228,78,10,.3); }
        .pricing-btn-outline { background:transparent; color:var(--ink); border:2px solid var(--line); }
        .pricing-btn-outline:hover { border-color:var(--moss); color:var(--moss); background:rgba(228,78,10,.03); } */




        /* ========== PORTFOLIO - Image fix + popup + responsive ========== */
        .portfolio-section {
            padding:var(--section-padding) 0;
            background:var(--canvas);
        }
        .portfolio-grid {
            display:grid;
            grid-template-columns:repeat(3, 1fr);
            gap:1.25rem;
        }
        .portfolio-item {
            position:relative;
            border-radius:var(--radius-md);
            overflow:hidden;
            cursor:pointer;
            box-shadow:var(--shadow-sm);
            transition:all .4s var(--ease-out);
            background:#fff;
        }
        .portfolio-item:hover {
            transform:translateY(-6px);
            box-shadow:var(--shadow-xl);
        }


        .portfolio-item .portfolio-img-wrap {
            position:relative;
            overflow:hidden;
            max-height: 240px;

        }
        .portfolio-item .portfolio-img-wrap img {
            width:100%;
            height:100%;
            object-fit:contain;
            display:block;
            transition:transform .8s ease;
        }


        .portfolio-item:hover .portfolio-img-wrap img { transform:scale(1.05); }
        .portfolio-item .portfolio-info {
            padding:1rem 1.25rem;
            display:flex; align-items:center;
            justify-content:space-between;
            gap:0.5rem;
        }
        .portfolio-item .portfolio-info h6 {
            font-family:var(--serif);
            font-size:0.95rem; font-weight:700;
            color:var(--ink); margin:0;
        }
        .portfolio-item .portfolio-info span {
            font-size:0.72rem; color:var(--moss);
            text-transform:uppercase; letter-spacing:1px;
            font-weight:600; flex-shrink:0;
        }
        .portfolio-item .portfolio-zoom-icon {
            position:absolute; top:12px; right:12px;
            width:36px; height:36px;
            border-radius:50%;
            background:rgba(255,255,255,.9);
            display:flex; align-items:center; justify-content:center;
            color:var(--moss); font-size:0.9rem;
            opacity:0; transition:opacity .3s ease;
        }
        .portfolio-item:hover .portfolio-zoom-icon { opacity:1; }

        /* Image Popup */
        .image-popup {
            position:fixed; z-index:9999;
            inset:0;
            background:rgba(0,0,0,.9);
            display:flex; align-items:center; justify-content:center;
            opacity:0; visibility:hidden;
            transition:all .3s ease;
            cursor:pointer;
        }
        .image-popup.open { opacity:1; visibility:visible; }
        .image-popup img {
            max-width:90vw; max-height:85vh;
            border-radius:16px;
            box-shadow:0 20px 60px rgba(0,0,0,.3);
        }
        .image-popup .popup-close {
            position:absolute; top:24px; right:24px;
            width:48px; height:48px;
            border-radius:50%;
            background:rgba(255,255,255,.15);
            border:1px solid rgba(255,255,255,.3);
            color:#fff; font-size:1.5rem;
            display:flex; align-items:center; justify-content:center;
            cursor:pointer; transition:all .3s ease;
        }
        .image-popup .popup-close:hover { background:rgba(255,255,255,.3); }

        @media (max-width: 991px) {
            .portfolio-grid { grid-template-columns:repeat(2, 1fr); }
        }
        @media (max-width: 576px) {
            .portfolio-grid { grid-template-columns:1fr; }
            .portfolio-item .portfolio-img-wrap img { height:220px; }
        }



        /* ========== TESTIMONIALS - Premium design + real images ========== */
        /* .testimonials-section {
            padding:var(--section-padding) 0;
            background:var(--canvas-bright);
            overflow:hidden;
        }
        .testimonial-scroll-track {
            display:flex; gap:1.5rem;
            width:max-content;
            animation:scrollTest 40s linear infinite;
            padding:0 clamp(24px, 4vw, 60px);
        }
        .testimonial-scroll-track:hover { animation-play-state:paused; }
        @keyframes scrollTest {
            0% { transform:translateX(0); }
            100% { transform:translateX(-50%); }
        }
        .testimonial-card-premium {
            background:#fff;
            border-radius:var(--radius-lg);
            padding:2rem;
            width:380px; flex-shrink:0;
            border:1px solid var(--line);
            box-shadow:var(--shadow-sm);
            transition:all .4s var(--ease-out);
        }
        .testimonial-card-premium:hover {
            transform:translateY(-8px);
            box-shadow:var(--shadow-xl);
            border-color:rgba(228,78,10,.2);
        }
        .testimonial-card-premium .testimonial-header {
            display:flex; align-items:center; gap:1rem;
            margin-bottom:1.25rem;
        }
        .testimonial-card-premium .testimonial-avatar-img {
            width:52px; height:52px;
            border-radius:50%;
            object-fit:cover;
            border:3px solid var(--lime-soft);
            flex-shrink:0;
        }
        .testimonial-card-premium .testimonial-header .testimonial-name {
            font-family:var(--serif);
            font-size:1rem; font-weight:700;
            color:var(--ink);
        }
        .testimonial-card-premium .testimonial-header .testimonial-role {
            font-size:0.85rem; color:var(--ink-48);
            font-weight: 600;
        }
        .testimonial-card-premium .testimonial-text {
            font-size:0.95rem; color:var(--ink-70);
            line-height:1.7; font-style:normal;
            position:relative; padding-left:1.5rem;
            font-weight: 600;
        }
        .testimonial-card-premium .testimonial-text::before {
            content:'"'; position:absolute;
            left:0; top:-8px;
            font-size:2.5rem; color:var(--moss);
            opacity:0.3; font-family:Georgia,serif;
            line-height:1;
        }
        .testimonial-card-premium .testimonial-stars {
            color:#f8b38b; font-size:0.95rem;
            margin-top:0.75rem;
            letter-spacing:2px;
        }

        @media (max-width: 768px) {
            .testimonial-card-premium { width:310px; padding:1.5rem; }
        } */


         .testimonials-section {
             padding:var(--section-padding) 0;
            background:var(--canvas-bright);
            overflow:hidden;
        }
        .testimonial-scroll-track {
            display:flex; gap:1.5rem;
            width:max-content;
            animation:scrollTest 45s linear infinite;
            padding:0 clamp(20px, 4vw, 60px);
        }
        .testimonial-scroll-track:hover { animation-play-state:paused; }
        @keyframes scrollTest {
            0% { transform:translateX(0); }
            100% { transform:translateX(-50%); }
        }
        .testimonial-card {
            background:#fff; border-radius:var(--radius-lg);
            padding:2rem; width:420px; flex-shrink:0;
            border:1px solid var(--line);
            box-shadow:var(--shadow-sm);
            transition:all .4s var(--ease-out);
        }
        .testimonial-card:hover {
            transform:translateY(-8px);
            box-shadow:var(--shadow-xl);
        }
        .testimonial-card .test-video {
            position:relative; border-radius:var(--radius-md);
            overflow:hidden; margin-bottom:1.25rem;
            aspect-ratio:16/9;
        }
        .testimonial-card .test-video iframe {
            width:100%; height:100%; border:none;
        }
        .testimonial-card .test-author {
            display:flex; align-items:center; gap:0.75rem;
            margin-bottom:0.75rem;
        }
        .testimonial-card .test-avatar {
            width:44px; height:44px; border-radius:50%;
            background:linear-gradient(135deg, var(--moss), var(--lime));
            display:flex; align-items:center; justify-content:center;
            font-weight:700; color:#fff; font-family:var(--font-heading);
            font-size:1rem; flex-shrink:0;
        }
        .testimonial-card .test-name {
            font-family:var(--font-heading);
            font-weight:700; color:var(--ink); font-size:0.95rem;
        }
        .testimonial-card .test-loc {
            font-size:0.78rem; color:var(--ink-48);
        }
        .testimonial-card .test-text {
            font-size:0.88rem; color:var(--ink-70);
            line-height:1.7; font-style:normal;
        }
        @media (max-width: 768px) {
            .testimonial-card { width:340px; padding:1.5rem; }
        }





           /* ========== REVEAL ========== */
        .reveal {
            opacity:0; transform:translateY(30px);
            transition:all 0.7s cubic-bezier(0.4,0,0.2,1);
        }
        .reveal.active { opacity:1; transform:translateY(0); }
        .reveal-delay-1 { transition-delay:0.12s; }
        .reveal-delay-2 { transition-delay:0.24s; }
        .reveal-delay-3 { transition-delay:0.36s; }
        .reveal-delay-4 { transition-delay:0.48s; }

        @media (max-width: 576px) {
            :root { --section-padding:60px; }
        }
        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after {
                animation-duration:.01ms !important;
                animation-iteration-count:1 !important;
                transition-duration:.01ms !important;
            }
            .reveal { opacity:1; transform:none; }
        }



        /* ========== FAQ ========== */
        .faq-section {
            padding:var(--section-padding) 0;
            background:var(--canvas);
        }
        .faq-accordion .accordion-item {
            border:1px solid var(--line);
            border-radius:16px !important;
            margin-bottom:0.75rem;
            overflow:hidden;
            background:#fff;
            box-shadow:var(--shadow-sm);
        }
        .faq-accordion .accordion-button {
            font-family:var(--serif);
            font-weight:700; font-size:1rem;
            padding:1.25rem 1.5rem;
            background:#fff; color:var(--ink);
            box-shadow:none !important;
            border-radius:16px !important;
        }
        .faq-accordion .accordion-button:not(.collapsed) {
            color:var(--moss); background:#FFF9F5;
        }
        .faq-accordion .accordion-body {
            padding:0 1.5rem 1.25rem;
            color:var(--ink-70); line-height:1.7;
            font-size:0.95rem;
        }

        /* ========== KNOWLEDGE ========== */
        .knowledge-section {
            padding:var(--section-padding) 0;
            background:var(--canvas-bright);
        }
        .knowledge-card {
            background:#fff; border-radius:var(--radius-lg);
            overflow:hidden; border:1px solid var(--line);
            box-shadow:var(--shadow-sm);
            transition:all .4s var(--ease-out);
            height:100%; display:flex; flex-direction:column;
        }
        .knowledge-card:hover {
            transform:translateY(-8px);
            box-shadow:var(--shadow-xl);
        }
        .knowledge-card .knowledge-img {
            position:relative; overflow:hidden;
        }
        .knowledge-card .knowledge-img img {
            width:100%; height:200px; object-fit:cover;
            transition:transform .8s ease;
        }
        .knowledge-card:hover .knowledge-img img { transform:scale(1.05); }
        .knowledge-card .knowledge-img .knowledge-tag {
            position:absolute; top:1rem; left:1rem;
            padding:5px 14px;
            background:rgba(255,255,255,.9);
            backdrop-filter:blur(8px);
            border-radius:100px;
            font-size:0.7rem; font-weight:700;
            color:var(--moss);
            text-transform:uppercase; letter-spacing:1px;
        }
        .knowledge-card .knowledge-body {
            padding:1.5rem; flex:1; display:flex; flex-direction:column;
        }
        .knowledge-card .knowledge-body .knowledge-meta {
            display:flex; gap:0.75rem; font-size:0.78rem;
            color:var(--ink-48); margin-bottom:0.75rem;
            flex-wrap:wrap;
        }
        .knowledge-card .knowledge-body h5 {
            font-family:var(--serif);
            font-size:1.1rem; font-weight:700;
            color:var(--ink); margin-bottom:0.5rem;
            line-height:1.4;
        }
        .knowledge-card .knowledge-body p {
            font-size:0.9rem; color:var(--ink-70);
            line-height:1.6; margin-bottom:1rem; flex:1;
        }
        .knowledge-link {
            font-weight:700; color:var(--moss);
            font-size:0.85rem;
            display:inline-flex; align-items:center; gap:0.4rem;
            text-decoration:none; transition:gap .3s ease;
            font-family:var(--serif);
        }
        .knowledge-link:hover { gap:0.7rem; color:var(--moss-deep); }

        /* ========== CTA ========== */
        .cta-form-section {
            padding:var(--section-padding) 0;
            background:var(--canvas);
        }
        .cta-form-card {
            background:linear-gradient(160deg, #1a0d06 0%, #3d1504 50%, #1a0d06 100%);
            border-radius:var(--radius-xl);
            padding:4rem;
            position:relative; overflow:hidden; color:#fff;
        }
        .cta-form-card::before {
            content:''; position:absolute;
            top:-30%; right:-15%;
            width:500px; height:500px;
            background:radial-gradient(circle, rgba(228,78,10,.25) 0%, transparent 70%);
            border-radius:50%; pointer-events:none;
        }
        .cta-form-title {
            font-family:var(--serif);
            font-size:clamp(2rem, 3.5vw, 3.2rem);
            font-weight:800; color:#fff;
            line-height:1.1; margin-bottom:1rem;
            position:relative; z-index:1;
        }
        .cta-form-subtitle {
            color:rgba(255,255,255,.7);
            font-size:1.05rem; margin-bottom:2rem;
            position:relative; z-index:1; line-height:1.6;
        }
        .form-input-premium {
            background:rgba(255,255,255,.1);
            border:1px solid rgba(255,255,255,.2);
            border-radius:14px;
            padding:0.95rem 1.25rem;
            color:#fff; font-size:0.95rem;
            transition:all .3s ease;
            width:100%; font-family:var(--sans);
        }
        .form-input-premium:focus {
            outline:none; border-color:#FFB27A;
            background:rgba(255,255,255,.18);
            box-shadow:0 0 0 4px rgba(255,178,122,.1);
        }
        .form-input-premium::placeholder { color:rgba(255,255,255,.4); }
        textarea.form-input-premium { min-height:130px; resize:vertical; }
        .form-label-premium {
            display:block;
            font-size:0.82rem; font-weight:600;
            color:rgba(255,255,255,.8);
            margin-bottom:0.5rem;
            text-transform:uppercase; letter-spacing:1.5px;
            font-family:var(--serif);
        }
        .btn-submit-premium {
            background:#FFB27A; color:var(--ink);
            padding:1rem 2.5rem; border-radius:14px;
            font-weight:700; font-size:1rem;
            border:none; cursor:pointer;
            transition:all .3s ease;
            display:inline-flex; align-items:center; gap:0.6rem;
            font-family:var(--serif);
        }
        .btn-submit-premium:hover {
            background:#fff;
            transform:translateY(-3px);
            box-shadow:0 12px 35px rgba(255,178,122,.35);
        }

        /* ========== FOOTER ========== */
        .footer-premium {
            background:#111812;
            color:rgba(255,255,255,.55);
            padding:60px 0 30px;
        }
        .footer-brand-name {
            /* font-family:var(--serif);
            font-size:1.5rem; font-weight:700; */
            color:#fff;
            display:flex; align-items:center; gap:0.5rem;
            margin-bottom:1rem;
            background-color: rgb(255, 253, 253);
            width: 200px;
            height: 60px;
            border-radius: 10px;
  
            justify-content: center;
        }

        .footer-brand-name img {
            /* font-family:var(--serif);
            font-size:1.5rem; font-weight:700; */
            height: 90px;
        }
        .footer-brand-name i { color:#FFB27A; }
        .footer-desc-text {
            color:rgba(255, 255, 255, 0.847);
            font-size:0.9rem; line-height:1.7;
            max-width:300px;
        }
        .footer-heading {
            font-family:var(--serif);
            font-size:0.85rem; font-weight:700;
            color:#fff; text-transform:uppercase;
            letter-spacing:1.5px; margin-bottom:1.25rem;
        }
        .footer-links-list {
            list-style:none; padding:0; margin:0;
        }
        .footer-links-list li { margin-bottom:0.5rem; }
        .footer-links-list a {
            color:rgba(255, 255, 255, 0.793);
            text-decoration:none; font-size:0.88rem;
            transition:all .3s ease;
            display:inline-flex; align-items:center; gap:0.4rem;
        }
        .footer-links-list a:hover {
            color:#FFB27A; padding-left:4px;
        }
        .footer-social-row {
            display:flex; gap:0.75rem; margin-top:1.5rem;
        }
        .footer-social-row a {
            width:40px; height:40px;
            border-radius: 50%;
            display:flex; align-items:center; justify-content:center;
            font-size:1.1rem; transition:all .3s ease;
            text-decoration:none;
        }
        .footer-social-row a.fb { background:#1877F2; color:#fff; }
        .footer-social-row a.ig { background:linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); color:#fff; }
        .footer-social-row a.yt {background-color: #FF0000; color: #FFFFFF; transition: transform 0.2s ease, background-color 0.2s ease; /* Official YouTube Red Color */font-size: 28px; text-decoration: none; transition: transform 0.2s ease-in-out, color 0.2s; }
        .footer-social-row a.li { background:#0A66C2; color:#fff; }
        .footer-social-row a:hover {
            transform:translateY(-4px);
            box-shadow:0 8px 20px rgba(0,0,0,.3);
        }
        .footer-bottom-bar {
            border-top:1px solid rgba(255,255,255,.08);
            margin-top:3rem; padding-top:1.5rem; text-align:center;
        }
        .footer-bottom-bar p {
            color:rgba(255, 255, 255, 0.886);
            font-size:0.82rem; margin:0;
        }

        /* View All Button */
        .btn-view-all {
            display:inline-flex; align-items:center; gap:8px;
            padding:14px 32px;
            background:var(--ink); color:#fff;
            border-radius:100px;
            font-weight:700; font-size:0.95rem;
            text-decoration:none;
            font-family:var(--serif);
            transition:all .3s ease;
        }
        .btn-view-all:hover {
            background:var(--moss); color:#fff;
            transform:translateY(-3px);
            box-shadow:0 10px 30px rgba(228,78,10,.3);
        }                                                                    

        @media (max-width: 768px) {
            :root { --section-padding:60px; }
            .cta-form-card { padding:2rem 1.25rem; }
            .trust-header-block { flex-direction:column; align-items:flex-start; gap:1.5rem; }
        }






/* AI CHAT BOT */


 :root {
        --chat-moss: #E44E0A;
        --chat-moss-deep: #B23A08;
        --chat-lime: #FFB27A;
        --chat-ink: #111812;
        --chat-bg: #fff;
        --chat-gray: #f5f1ea;
    }

    .ks-chat-fab {
        position: fixed;
        bottom: 28px;
        right: 28px;
        z-index: 99999;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background: var(--chat-moss);
        border: none;
        cursor: pointer;
        box-shadow: 0 8px 30px rgba(228, 78, 10, 0.35);
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        animation: ks-bounce 2s infinite;
    }
    .ks-chat-fab:hover {
        transform: scale(1.1);
        box-shadow: 0 12px 40px rgba(228, 78, 10, 0.5);
        background: var(--chat-moss-deep);
    }
    .ks-chat-fab svg { width: 28px; height: 28px; fill: #fff; }
    .ks-chat-fab .ks-notif-dot {
        position: absolute; top: 4px; right: 4px;
        width: 14px; height: 14px;
        background: #22c55e; border-radius: 50%;
        border: 2px solid #fff;
        animation: ks-pulse 2s infinite;
    }
    .ks-chat-fab .ks-unread-badge {
        position: absolute; top: -4px; right: -4px;
        width: 22px; height: 22px;
        background: #ef4444; color: #fff;
        border-radius: 50%; font-size: 0.7rem; font-weight: 700;
        display: flex; align-items: center; justify-content: center;
        border: 2px solid #fff; font-family: 'Inter', sans-serif;
    }
    @keyframes ks-bounce {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-6px); }
    }
    @keyframes ks-pulse {
        0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4); }
        50% { box-shadow: 0 0 0 10px rgba(34, 197, 94, 0); }
    }

    .ks-toast-container {
        position: fixed; bottom: 100px; right: 28px;
        z-index: 99998; display: flex;
        flex-direction: column; gap: 10px;
        pointer-events: none;
    }
    .ks-toast {
        background: #fff; border-radius: 16px;
        padding: 14px 18px;
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
        display: flex; align-items: center; gap: 12px;
        max-width: 320px;
        animation: ks-toastIn 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
        cursor: pointer; pointer-events: all;
        border: 1px solid rgba(0,0,0,0.06);
        transition: all 0.3s ease;
    }
    .ks-toast:hover {
        transform: translateX(-4px);
        box-shadow: 0 12px 35px rgba(0, 0, 0, 0.18);
        border-color: var(--chat-moss);
    }
    .ks-toast.ks-toast-out {
        animation: ks-toastOut 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    }
    @keyframes ks-toastIn {
        from { opacity: 0; transform: translateX(40px) scale(0.9); }
        to { opacity: 1; transform: translateX(0) scale(1); }
    }
    @keyframes ks-toastOut {
        from { opacity: 1; transform: translateX(0) scale(1); }
        to { opacity: 0; transform: translateX(60px) scale(0.85); }
    }
    .ks-toast .ks-toast-icon {
        width: 40px; height: 40px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--chat-moss), var(--chat-lime));
        display: flex; align-items: center; justify-content: center;
        font-size: 1.1rem; flex-shrink: 0; color: #fff;
    }
    .ks-toast .ks-toast-text { flex: 1; font-family: 'Inter', sans-serif; }
    .ks-toast .ks-toast-text strong {
        display: block; font-size: 0.82rem;
        color: var(--chat-ink); font-weight: 700; margin-bottom: 2px;
    }
    .ks-toast .ks-toast-text p {
        font-size: 0.75rem; color: #666; margin: 0; line-height: 1.3;
    }
    .ks-toast .ks-toast-close {
        width: 24px; height: 24px; border-radius: 50%;
        background: #f0f0f0; border: none; cursor: pointer;
        font-size: 0.9rem; display: flex; align-items: center; justify-content: center;
        color: #999; flex-shrink: 0; transition: all 0.2s ease;
    }
    .ks-toast .ks-toast-close:hover { background: #e0e0e0; color: #333; }

    .ks-chat-panel {
        position: fixed; bottom: 100px; right: 28px;
        z-index: 99997; width: 420px;
        max-width: calc(100vw - 56px); height: 580px;
        max-height: calc(100vh - 140px); background: var(--chat-bg);
        border-radius: 20px;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
        display: flex; flex-direction: column; overflow: hidden;
        transform: translateY(20px) scale(0.95);
        opacity: 0; visibility: hidden; pointer-events: none;
        transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .ks-chat-panel.open {
        transform: translateY(0) scale(1);
        opacity: 1; visibility: visible; pointer-events: all;
    }

    .ks-chat-header {
        background: linear-gradient(135deg, var(--chat-moss), var(--chat-moss-deep));
        padding: 16px 20px; display: flex; align-items: center;
        gap: 12px; color: #fff; flex-shrink: 0;
    }
    .ks-chat-avatar {
        width: 42px; height: 42px; border-radius: 50%;
        background: rgba(255, 255, 255, 0.2);
        display: flex; align-items: center; justify-content: center;
        font-size: 1.1rem; flex-shrink: 0;
    }
    .ks-chat-header-info { flex: 1; }
    .ks-chat-header-info h4 {
        font-family: 'Plus Jakarta Sans', sans-serif;
        font-size: 0.9rem; font-weight: 700; margin: 0;
        color: #fff; line-height: 1.2;
    }
    .ks-chat-header-info span {
        font-size: 0.7rem; opacity: 0.85;
        display: flex; align-items: center; gap: 5px;
    }
    .ks-chat-header-info span::before {
        content: ''; width: 7px; height: 7px;
        background: #22c55e; border-radius: 50%; display: inline-block;
    }
    .ks-chat-close {
        width: 32px; height: 32px; border-radius: 50%;
        background: rgba(255, 255, 255, 0.15); border: none;
        color: #fff; cursor: pointer; font-size: 1.2rem;
        display: flex; align-items: center; justify-content: center;
        transition: all 0.2s ease;
    }
    .ks-chat-close:hover { background: rgba(255, 255, 255, 0.3); }

    .ks-chat-body {
        flex: 1; overflow-y: auto; padding: 16px;
        display: flex; flex-direction: column; gap: 10px;
        background: #faf9f7;
    }
    .ks-chat-body::-webkit-scrollbar { width: 4px; }
    .ks-chat-body::-webkit-scrollbar-thumb { background: #ddd; border-radius: 10px; }

    .ks-msg {
        max-width: 85%; padding: 12px 16px;
        border-radius: 16px; font-size: 0.86rem;
        line-height: 1.5; animation: ks-msgIn 0.3s ease;
    }
    @keyframes ks-msgIn {
        from { opacity: 0; transform: translateY(8px); }
        to { opacity: 1; transform: translateY(0); }
    }
    .ks-msg.bot {
        align-self: flex-start; background: #fff;
        color: var(--chat-ink); border-bottom-left-radius: 4px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    }
    .ks-msg.user {
        align-self: flex-end; background: var(--chat-moss);
        color: #fff; border-bottom-right-radius: 4px;
    }
    .ks-msg .ks-time {
        font-size: 0.62rem; opacity: 0.5;
        margin-top: 4px; text-align: right;
    }

    .ks-quick-replies {
        display: flex; flex-wrap: wrap; gap: 6px;
        align-self: flex-start; max-width: 90%;
        animation: ks-msgIn 0.3s ease;
    }
    .ks-quick-btn {
        padding: 9px 16px; border-radius: 100px;
        font-size: 0.8rem; font-weight: 600; cursor: pointer;
        border: 1.5px solid var(--chat-moss);
        background: #fff; color: var(--chat-moss);
        transition: all 0.2s ease; white-space: nowrap;
        font-family: 'Inter', sans-serif;
    }
    .ks-quick-btn:hover { background: var(--chat-moss); color: #fff; }

    .ks-chat-input-area {
        padding: 14px 16px; border-top: 1px solid #eee;
        background: #fff; display: flex; gap: 8px;
        align-items: center; flex-shrink: 0;
    }
    .ks-chat-input {
        flex: 1; padding: 11px 16px;
        border: 1.5px solid #e5e5e5; border-radius: 100px;
        font-size: 0.86rem; outline: none;
        font-family: 'Inter', sans-serif; transition: all 0.2s ease;
        background: #faf9f7;
    }
    .ks-chat-input:focus {
        border-color: var(--chat-moss);
        box-shadow: 0 0 0 3px rgba(228, 78, 10, 0.06);
    }
    .ks-send-btn {
        width: 42px; height: 42px; border-radius: 50%;
        background: var(--chat-moss); border: none;
        cursor: pointer; color: #fff; font-size: 1rem;
        display: flex; align-items: center; justify-content: center;
        transition: all 0.2s ease; flex-shrink: 0;
    }
    .ks-send-btn:hover { background: var(--chat-moss-deep); transform: scale(1.05); }

    .ks-typing {
        align-self: flex-start; display: flex; gap: 4px;
        padding: 12px 16px; background: #fff;
        border-radius: 16px; border-bottom-left-radius: 4px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.04);
        animation: ks-msgIn 0.3s ease;
    }
    .ks-typing span {
        width: 7px; height: 7px; background: #ccc;
        border-radius: 50%; animation: ks-typing 1.4s infinite;
    }
    .ks-typing span:nth-child(2) { animation-delay: 0.2s; }
    .ks-typing span:nth-child(3) { animation-delay: 0.4s; }
    @keyframes ks-typing {
        0%, 60%, 100% { transform: translateY(0); background: #ccc; }
        30% { transform: translateY(-8px); background: var(--chat-moss); }
    }

    .ks-contact-row {
        display: flex; gap: 8px; flex-wrap: wrap;
        align-self: flex-start; animation: ks-msgIn 0.3s ease;
    }
    .ks-contact-btn {
        display: flex; align-items: center; gap: 6px;
        padding: 10px 16px; border-radius: 100px;
        font-size: 0.8rem; font-weight: 600;
        text-decoration: none; transition: all 0.2s ease;
        font-family: 'Inter', sans-serif;
    }
    .ks-contact-btn.whatsapp { background: #25D366; color: #fff; }
    .ks-contact-btn.whatsapp:hover { background: #1da851; transform: translateY(-2px); }
    .ks-contact-btn.email { background: var(--chat-ink); color: #fff; }
    .ks-contact-btn.email:hover { background: #333; transform: translateY(-2px); }

    @media (max-width: 480px) {
        .ks-chat-panel {
            bottom: 0; right: 0; left: 0;
            width: 100%; max-width: 100%;
            height: 100%; max-height: 100%; border-radius: 0;
        }
        .ks-chat-fab { bottom: 20px; right: 20px; }
        .ks-toast-container { bottom: 90px; right: 20px; }
        .ks-toast { max-width: 280px; padding: 12px 14px; }
    }



    
    /* about style  */
/* ========== PREMIUM ABOUT SECTION ========== */
.ks-about {
    --ks-navy: #15203b;
    --ks-text: #4f5b70;
    --ks-muted: #4f5b70;
    --ks-orange: #ff785d;
    --ks-orange-dark: #ed6045;
    --ks-light: #f6f8fc;
    --ks-border: #e8edf5;

    position: relative;
    overflow: hidden;
    padding: 100px 0;
    background: #ffffff;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.ks-about *,
.ks-about *::before,
.ks-about *::after {
    box-sizing: border-box;
}

.ks-about__orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(2px);
}

.ks-about__orb--one {
    top: -180px;
    left: -140px;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(255, 120, 93, 0.14) 0%, rgba(255, 120, 93, 0) 70%);
}

.ks-about__orb--two {
    right: -220px;
    bottom: -250px;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(67, 125, 255, 0.10) 0%, rgba(67, 125, 255, 0) 70%);
}

.ks-about__grid {
    position: absolute;
    top: 0;
    right: 0;
    width: 38%;
    height: 100%;
    opacity: 0.34;
    pointer-events: none;
    background-image: radial-gradient(#d8dee9 1px, transparent 1px);
    background-size: 20px 20px;
    mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 80%, transparent);
}

/* ---------- Left media card ---------- */
.ks-about__visual {
    position: relative;
    width: min(100%, 490px);
    min-height: 590px;
    margin: 0 auto;
    padding: 14px 30px 30px 0;
}

.ks-about__media-card {
    position: relative;
    height: 555px;
    overflow: hidden;
    isolation: isolate;
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 30px 30px 112px 30px;
    background: var(--ks-navy);
    box-shadow: 0 32px 65px rgba(21, 32, 59, 0.18);
}

.ks-about__media-card::before {
    content: "";
    position: absolute;
    z-index: 4;
    inset: 13px;
    border: 1px solid rgba(255, 255, 255, 0.30);
    border-radius: 21px 21px 99px 21px;
    pointer-events: none;
}

.ks-about__media-image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    transition: transform 0.8s ease;
}

.ks-about__media-card:hover .ks-about__media-image {
    transform: scale(1.055);
}

.ks-about__media-overlay {
    position: absolute;
    z-index: 1;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(13, 22, 44, 0.65) 0%, rgba(13, 22, 44, 0.03) 38%),
        linear-gradient(0deg, rgba(13, 22, 44, 0.96) 0%, rgba(13, 22, 44, 0.08) 56%);
}

.ks-about__media-top {
    position: absolute;
    z-index: 5;
    top: 34px;
    right: 36px;
    left: 36px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
}

.ks-about__media-top span:nth-child(2) {
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.48);
}

.ks-about__media-top i {
    color: #ffae9c;
    font-size: 11px;
}

.ks-about__play-btn {
    position: absolute;
    z-index: 6;
    top: 46%;
    left: 50%;
    width: 78px;
    height: 78px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(255, 255, 255, 0.75);
    border-radius: 50%;
    outline: 0;
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(12px);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.22);
    transition: transform 0.3s ease, background 0.3s ease;
}

.ks-about__play-btn::before {
    content: "";
    position: absolute;
    inset: -10px;
    border: 1px solid rgba(255, 255, 255, 0.42);
    border-radius: inherit;
    transition: all 0.3s ease;
}

.ks-about__play-btn:hover {
    background: var(--ks-orange);
    transform: translate(-50%, -50%) scale(1.08);
}

.ks-about__play-btn:hover::before {
    inset: -17px;
    opacity: 0;
}

.ks-about__play-btn i {
    margin-left: 4px;
    font-size: 20px;
}

.ks-about__media-content {
    position: absolute;
    z-index: 5;
    right: 28px;
    bottom: 28px;
    left: 28px;
    padding: 18px 20px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(14px);
}

.ks-about__logo-wrap img {
    display: block;
    width: auto;
    max-width: 190px;
    height: 42px;
    object-fit: contain;
    object-position: left center;
    filter: brightness(0) invert(1);
}

.ks-about__media-content p {
    margin: 8px 0 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.7px;
}

.ks-about__experience-card {
    position: absolute;
    z-index: 7;
    right: -5px;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 17px 19px;
    border: 1px solid rgba(255, 255, 255, 0.82);
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 18px 38px rgba(21, 32, 59, 0.16);
}

.ks-about__experience-number {
    color: var(--ks-orange);
    font-size: 35px;
    font-weight: 800;
    line-height: 1;
}

.ks-about__experience-number span {
    font-size: 21px;
}

.ks-about__experience-text {
    color: var(--ks-navy);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.38;
    letter-spacing: 0.55px;
    text-transform: uppercase;
}

.ks-about__mini-card {
    position: absolute;
    z-index: 7;
    top: 105px;
    left: -42px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 16px;
    border: 1px solid #edf0f5;
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 14px 30px rgba(21, 32, 59, 0.12);
}

.ks-about__mini-card > i {
    display: flex;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #fff0ec;
    color: var(--ks-orange);
    font-size: 14px;
}

.ks-about__mini-card strong,
.ks-about__mini-card span {
    display: block;
}

.ks-about__mini-card strong {
    color: var(--ks-navy);
    font-size: 16px;
    line-height: 1.1;
}

.ks-about__mini-card span {
    margin-top: 3px;
    color: var(--ks-muted);
    font-size: 12px;
    font-weight: 600;
}

/* ---------- Right content ---------- */
.ks-about__content {
    position: relative;
    max-width: 590px;
    padding-left: 25px;
}

.ks-about__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 18px;
    color: var(--ks-orange);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.ks-about__eyebrow-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ks-orange);
    box-shadow: 0 0 0 5px rgba(255, 120, 93, 0.12);
}

.ks-about__title {
    margin: 0;
    color: var(--ks-navy);
    font-size: clamp(34px, 3.25vw, 51px);
    font-weight: 800;
    line-height: 1.13;
    letter-spacing: -1.8px;
}

.ks-about__title span {
   background: linear-gradient(135deg, #E85D04, #F4A261);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
}

.ks-about__intro {
    max-width: 550px;
    margin: 22px 0 0;
    color: var(--ks-text);
    font-size: 16px;
    line-height: 1.85;
}

.ks-about__divider {
    width: 62px;
    height: 3px;
    margin: 28px 0;
    border-radius: 10px;
    background: linear-gradient(90deg, var(--ks-orange), #ffc0b1);
}

.ks-about__service-list {
    display: grid;
    gap: 19px;
}

.ks-about__service-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.ks-about__service-icon {
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: #f2f5fb;
    color: var(--ks-navy);
    font-size: 17px;
}

.ks-about__service-item h3 {
    margin: 0 0 4px;
    color: var(--ks-navy);
    font-size: 16px;
    font-weight: 750;
}

.ks-about__service-item p {
    margin: 0;
    color: var(--ks-muted);
    font-size: 14.5px;
    line-height: 1.65;
}

.ks-about__metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 31px;
    padding: 21px 0;
    border-top: 1px solid var(--ks-border);
    border-bottom: 1px solid var(--ks-border);
}

.ks-about__metric {
    position: relative;
    padding: 0 20px;
}

.ks-about__metric:first-child {
    padding-left: 0;
}

.ks-about__metric + .ks-about__metric::before {
    content: "";
    position: absolute;
    top: 6px;
    bottom: 6px;
    left: 0;
    width: 1px;
    background: var(--ks-border);
}

.ks-about__metric strong {
    display: block;
    color: var(--ks-navy);
    font-size: 27px;
    font-weight: 800;
    line-height: 1;
}

.ks-about__metric strong span {
    color: var(--ks-orange);
}

.ks-about__metric p {
    margin: 7px 0 0;
    color: var(--ks-muted);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.35px;
}

.ks-about__actions {
    display: flex;
    align-items: center;
    gap: 26px;
    margin-top: 31px;
}

.ks-about__cta {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    padding: 15px 23px;
    border-radius: 10px;
    background: var(--ks-navy);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 12px 25px rgba(21, 32, 59, 0.17);
    transition: all 0.3s ease;
}

.ks-about__cta:hover {
    transform: translateY(-3px);
    background: var(--ks-orange);
    color: #fff;
    box-shadow: 0 16px 30px rgba(255, 120, 93, 0.25);
}

.ks-about__cta i {
    font-size: 12px;
}

.ks-about__text-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--ks-navy);
    font-size: 14px;
    font-weight: 750;
    text-decoration: none;
    transition: color 0.25s ease;
}

.ks-about__text-link:hover {
    color: var(--ks-orange);
}

.ks-about__text-link i {
    font-size: 12px;
    transition: transform 0.25s ease;
}

.ks-about__text-link:hover i {
    transform: translateX(4px);
}

/* ---------- Video modal ---------- */
.ks-video-modal {
    position: fixed;
    z-index: 9999;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 25px;
    visibility: hidden;
    opacity: 0;
    background: rgba(7, 12, 26, 0.88);
    transition: opacity 0.35s ease, visibility 0.35s ease;
}

.ks-video-modal.active {
    visibility: visible;
    opacity: 1;
}

.ks-video-modal__box {
    position: relative;
    width: min(900px, 100%);
    aspect-ratio: 16 / 9;
    overflow: visible;
    transform: translateY(18px) scale(0.96);
    border-radius: 16px;
    background: #000;
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.5);
    transition: transform 0.35s ease;
}

.ks-video-modal.active .ks-video-modal__box {
    transform: translateY(0) scale(1);
}

.ks-video-modal__box iframe {
    width: 100%;
    height: 100%;
    display: block;
    border: 0;
    border-radius: 16px;
}

.ks-video-modal__close {
    position: absolute;
    top: -47px;
    right: 0;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: var(--ks-navy);
    cursor: pointer;
    transition: 0.25s ease;
}

.ks-video-modal__close:hover {
    transform: rotate(90deg);
    background: var(--ks-orange);
    color: #fff;
}

/* ---------- Existing entrance animation ---------- */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(35px);
    }

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

.animate-fade-in {
    opacity: 0;
    animation: fadeInUp 0.8s ease forwards;
}

.delay-1 { animation-delay: 0.12s; }
.delay-2 { animation-delay: 0.25s; }

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
    .ks-about {
        padding: 90px 0;
    }

    .ks-about__visual {
        width: min(100%, 480px);
        margin-bottom: 18px;
    }

    .ks-about__content {
        max-width: 680px;
        padding-left: 0;
        margin: 0 auto;
    }

    .ks-about__grid {
        width: 60%;
    }
}

@media (max-width: 576px) {
    .ks-about {
        padding: 70px 0;
    }

    .ks-about__visual {
        min-height: 444px;
        padding: 10px 14px 16px 0;
    }

    .ks-about__media-card {
        height: 415px;
        border-radius: 22px 22px 78px 22px;
    }

    .ks-about__media-card::before {
        inset: 9px;
        border-radius: 16px 16px 68px 16px;
    }

    .ks-about__media-top {
        top: 25px;
        right: 25px;
        left: 25px;
        font-size: 8px;
        letter-spacing: 1.3px;
    }

    .ks-about__play-btn {
        width: 62px;
        height: 62px;
    }

    .ks-about__play-btn i {
        font-size: 16px;
    }

    .ks-about__media-content {
        right: 18px;
        bottom: 18px;
        left: 18px;
        padding: 13px 15px;
    }

    .ks-about__logo-wrap img {
        height: 30px;
        max-width: 150px;
    }

    .ks-about__media-content p {
        font-size: 9px;
    }

    .ks-about__experience-card {
        right: 0;
        padding: 12px 13px;
    }

    .ks-about__experience-number {
        font-size: 26px;
    }

    .ks-about__experience-text {
        font-size: 9px;
    }

    .ks-about__mini-card {
        top: 75px;
        left: -8px;
        padding: 10px 12px;
    }

    .ks-about__mini-card > i {
        width: 29px;
        height: 29px;
        font-size: 12px;
    }

    .ks-about__title {
        font-size: 34px;
        letter-spacing: -1.2px;
    }

    .ks-about__intro {
        font-size: 14.5px;
    }

    .ks-about__service-item p {
        font-size: 12.5px;
    }

    .ks-about__metric {
        padding: 0 10px;
    }

    .ks-about__metric strong {
        font-size: 22px;
    }

    .ks-about__metric p {
        font-size: 9px;
    }

    .ks-about__actions {
        flex-wrap: wrap;
        gap: 18px;
    }

    .ks-video-modal {
        padding: 18px;
    }

    .ks-video-modal__close {
        top: -43px;
    }
}