/* =========================================================
   KRISHNA SOFTWARE SOLUTION
   GLOBAL DESIGN SYSTEM
========================================================= */

:root
{
    --primary: #2563eb;
    --primary-dark: #1d4ed8;

    --secondary: #0f172a;

    --text: #111827;
    --text-muted: #64748b;
    --background: #ffffff;
    --background-soft: #f8fafc;

    --border: #e5e7eb;

    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 24px;

    --shadow-sm:
        0 8px 30px rgba(15, 23, 42, .05);

    --shadow-md:
        0 20px 50px rgba(15, 23, 42, .08);

    --container-width: 1240px;
}


/* =========================================================
   BASE
========================================================= */

*
{

    box-sizing: border-box;
}

html
{
    scroll-behavior: smooth;
}

body
{
    margin: 0;

    font-family:
        'Inter',
        sans-serif;

    color: var(--text);

    background:
        var(--background);

    line-height: 1.6;

    -webkit-font-smoothing: antialiased;
}

img
{
    max-width: 100%;

    height: auto;
}

a
{
    color: inherit;

    text-decoration: none;
}

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


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

.container
{
    width: min(
        calc(100% - 40px),
        var(--container-width)
    );

    margin-inline: auto;
}


/* =========================================================
   NAVBAR
========================================================= */

.site-header
{
    position: sticky;

    top: 0;

    z-index: 1000;

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

    backdrop-filter:
        blur(18px);

    -webkit-backdrop-filter:
        blur(18px);

    border-bottom:
        1px solid rgba(15,23,42,.06);
}

.navbar
{
    min-height: 82px;

    padding: 12px 0;
}

.navbar-brand
{
    display: flex;

    align-items: center;

    gap: 12px;
}

.site-logo
{
    width: 48px;

    height: 48px;

    object-fit: contain;
}

.brand-content
{
    display: flex;

    flex-direction: column;

    line-height: 1.15;
}

.brand-name
{
    font-size: 17px;

    font-weight: 800;

    letter-spacing: -.3px;
}

.brand-tagline
{
    font-size: 11px;

    color: var(--text-muted);

    margin-top: 3px;
}


/* =========================================================
   NAV LINKS
========================================================= */

.navbar-nav
{
    gap: 4px;
}

.nav-link
{
    color: var(--text) !important;

    font-size: 14px;

    font-weight: 600;

    padding:
        10px 13px !important;

    border-radius:
        var(--radius-sm);

    transition:
        color .2s ease,
        background .2s ease;
}

.nav-link:hover,
.nav-link:focus
{
    color: var(--primary) !important;

    background:
        #eff6ff;
}


/* =========================================================
   DROPDOWN
========================================================= */

.dropdown-menu
{
    border:
        1px solid rgba(15,23,42,.06);

    border-radius:
        var(--radius-md);

    padding: 8px;

    min-width: 260px;

    box-shadow:
        var(--shadow-md);
}

.dropdown-item
{
    padding:
        11px 13px;

    border-radius:
        9px;

    font-size: 14px;

    font-weight: 500;
}

.dropdown-item:hover,
.dropdown-item:focus
{
    background:
        #eff6ff;

    color:
        var(--primary);
}


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

.btn-primary
{
    background:
        linear-gradient(
            135deg,
            var(--primary),
            #4f46e5
        );

    border: none;

    color: #fff;

    border-radius: 999px;

    padding:
        12px 21px;

    font-weight: 700;

    box-shadow:
        0 10px 25px rgba(37,99,235,.20);

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

.btn-primary:hover
{
    color: #fff;

    transform:
        translateY(-2px);

    box-shadow:
        0 15px 35px rgba(37,99,235,.28);
}

.nav-cta
{
    white-space: nowrap;
}


/* =========================================================
   FOOTER
========================================================= */

.site-footer
{
    background:
        var(--secondary);

    color:
        #cbd5e1;

    padding:
        80px 0 0;
}

.footer-grid
{
    display:
        grid;

    grid-template-columns:
        2fr 1fr 1fr 1fr;

    gap:
        50px;
}

.footer-brand img
{
    width:
        170px;

    margin-bottom:
        20px;
}

.footer-grid p
{
    max-width:
        420px;

    color:
        #94a3b8;
}

.footer-grid h3
{
    color:
        #fff;

    font-size:
        16px;

    margin-bottom:
        20px;
}

.footer-grid ul
{
    list-style:
        none;

    padding:
        0;

    margin:
        0;
}

.footer-grid li
{
    margin-bottom:
        12px;
}

.footer-grid a
{
    color:
        #94a3b8;

    transition:
        color .2s ease;
}

.footer-grid a:hover
{
    color:
        #fff;
}

.footer-bottom
{
    margin-top:
        60px;

    padding:
        24px 0;

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

    display:
        flex;

    justify-content:
        space-between;

    gap:
        20px;

    color:
        #64748b;

    font-size:
        13px;
}

.footer-bottom p
{
    margin:
        0;
}
/* =========================================================
   KSS HERO
========================================================= */

.kss-hero
{
    position: relative;

    overflow: hidden;

    padding:
        110px 0 120px;

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f8fbff 55%,
            #eef4ff 100%
        );
}

.kss-hero-background
{
    position: absolute;

    inset: 0;

    pointer-events: none;
}

.kss-hero-grid
{
    position: absolute;

    inset: 0;

    opacity: .35;

    background-image:
        linear-gradient(
            rgba(37,99,235,.06) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(37,99,235,.06) 1px,
            transparent 1px
        );

    background-size:
        60px 60px;

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

.kss-hero-orb
{
    position: absolute;

    border-radius: 50%;

    filter:
        blur(2px);
}

.kss-hero-orb-1
{
    width: 420px;

    height: 420px;

    right: -150px;

    top: -150px;

    background:
        rgba(37,99,235,.10);
}

.kss-hero-orb-2
{
    width: 280px;

    height: 280px;

    left: -120px;

    bottom: -120px;

    background:
        rgba(79,70,229,.08);
}


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

.kss-hero-content
{
    position: relative;

    z-index: 2;
}

.kss-section-tag
{
    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    padding:
        8px 14px;

    border-radius:
        999px;

    background:
        #eff6ff;

    color:
        var(--primary);

    font-size:
        13px;

    font-weight:
        700;

    margin-bottom:
        22px;
}

.kss-hero h1
{
    max-width:
        780px;

    margin:
        0;

    font-size:
        clamp(
            48px,
            6vw,
            78px
        );

    line-height:
        1.02;

    letter-spacing:
        -3.5px;

    font-weight:
        800;

    color:
        #0f172a;
}

.kss-hero-description
{
    max-width:
        680px;

    margin:
        28px 0 0;

    font-size:
        19px;

    line-height:
        1.8;

    color:
        #64748b;
}

.kss-hero-actions
{
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        14px;

    margin-top:
        34px;
}

.kss-btn-secondary
{
    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    padding:
        12px 21px;

    border:
        1px solid #cbd5e1;

    border-radius:
        999px;

    font-weight:
        700;

    background:
        #fff;

    transition:
        .2s ease;
}

.kss-btn-secondary:hover
{
    color:
        var(--primary);

    border-color:
        var(--primary);

    transform:
        translateY(-2px);
}

.kss-hero-platforms
{
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        18px;

    margin-top:
        32px;

    color:
        #64748b;

    font-size:
        13px;

    font-weight:
        600;
}

.kss-hero-platforms span
{
    display:
        inline-flex;

    align-items:
        center;

    gap:
        7px;
}


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

.kss-hero-visual
{
    position:
        relative;

    min-height:
        590px;
}

.kss-phone
{
    position:
        absolute;

    width:
        270px;

    height:
        540px;

    border:
        8px solid #111827;

    border-radius:
        42px;

    background:
        #0f172a;

    box-shadow:
        0 35px 80px rgba(15,23,42,.22);

    overflow:
        hidden;
}

.kss-phone-main
{
    right:
        70px;

    top:
        25px;

    z-index:
        3;

    transform:
        rotate(3deg);
}

.kss-phone-back
{
    right:
        220px;

    top:
        75px;

    z-index:
        2;

    opacity:
        .65;

    transform:
        rotate(-8deg) scale(.9);
}

.kss-phone-screen
{
    position:
        relative;

    width:
        100%;

    height:
        100%;

    padding:
        35px 18px;

    background:
        linear-gradient(
            180deg,
            #f8fbff,
            #eef4ff
        );
}

.kss-phone-notch
{
    position:
        absolute;

    z-index:
        5;

    width:
        90px;

    height:
        23px;

    top:
        7px;

    left:
        50%;

    transform:
        translateX(-50%);

    border-radius:
        20px;

    background:
        #111827;
}

.kss-app-header
{
    display:
        flex;

    justify-content:
        space-between;

    font-size:
        12px;

    font-weight:
        700;

    color:
        #0f172a;

    margin-bottom:
        25px;
}

.kss-app-card
{
    padding:
        22px;

    border-radius:
        20px;

    color:
        #fff;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #4f46e5
        );

    box-shadow:
        0 15px 30px rgba(37,99,235,.20);
}

.kss-app-card small,
.kss-app-card span
{
    display:
        block;

    opacity:
        .8;
}

.kss-app-card strong
{
    display:
        block;

    font-size:
        38px;

    margin:
        5px 0;
}

.kss-app-row
{
    display:
        grid;

    grid-template-columns:
        1fr 2fr .7fr;

    gap:
        8px;

    margin-top:
        18px;
}

.kss-app-row span
{
    height:
        13px;

    border-radius:
        5px;

    background:
        #dbeafe;
}


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

.kss-floating-card
{
    position:
        absolute;

    z-index:
        5;

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    padding:
        14px 17px;

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

    border-radius:
        16px;

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

    backdrop-filter:
        blur(14px);

    box-shadow:
        0 20px 50px rgba(15,23,42,.12);
}

.kss-floating-card i
{
    display:
        grid;

    place-items:
        center;

    width:
        40px;

    height:
        40px;

    border-radius:
        12px;

    color:
        var(--primary);

    background:
        #eff6ff;
}

.kss-floating-card strong,
.kss-floating-card small
{
    display:
        block;
}

.kss-floating-card strong
{
    font-size:
        12px;
}

.kss-floating-card small
{
    color:
        #64748b;

    font-size:
        10px;
}

.kss-floating-orders
{
    left:
        0;

    top:
        180px;

    animation:
        kssFloat 4s ease-in-out infinite;
}

.kss-floating-growth
{
    right:
        0;

    bottom:
        120px;

    animation:
        kssFloat 5s ease-in-out infinite reverse;
}

@keyframes kssFloat
{
    0%,
    100%
    {
        transform:
            translateY(0);
    }

    50%
    {
        transform:
            translateY(-12px);
    }
}
/* =========================================================
   SERVICE HERO
========================================================= */

.service-hero
{
    position:
        relative;

    overflow:
        hidden;

    padding:
        110px 0 100px;

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f8fbff 55%,
            #eef4ff 100%
        );
}


.service-hero-content
{
    position:
        relative;

    z-index:
        2;
}


.service-eyebrow,
.service-section-label
{
    display:
        inline-block;

    margin-bottom:
        18px;

    color:
        #2563eb;

    font-size:
        12px;

    font-weight:
        800;

    letter-spacing:
        1.5px;

    text-transform:
        uppercase;
}


.service-hero h1
{
    max-width:
        760px;

    margin:
        0;

    color:
        #0f172a;

    font-size:
        clamp(
            44px,
            6vw,
            72px
        );

    line-height:
        1.04;

    letter-spacing:
        -3px;

    font-weight:
        800;
}


.service-hero p
{
    max-width:
        680px;

    margin:
        28px 0 0;

    color:
        #64748b;

    font-size:
        18px;

    line-height:
        1.8;
}


.service-hero-actions
{
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        12px;

    margin-top:
        32px;
}


/* =========================================================
   SERVICE VISUAL
========================================================= */

.service-hero-visual
{
    min-height:
        440px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    position:
        relative;
}


.service-visual-card
{
    width:
        320px;

    min-height:
        360px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    padding:
        40px;

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

    border-radius:
        35px;

    background:
        linear-gradient(
            145deg,
            #2563eb,
            #4f46e5
        );

    color:
        #fff;

    text-align:
        center;

    box-shadow:
        0 35px 80px rgba(37,99,235,.22);

    transform:
        rotate(3deg);

    transition:
        transform .35s ease;
}


.service-visual-card:hover
{
    transform:
        rotate(0deg)
        translateY(-8px);
}


.service-visual-card i
{
    font-size:
        72px;

    margin-bottom:
        25px;
}


.service-visual-card span
{
    font-size:
        18px;

    font-weight:
        700;
}


.service-visual-card strong
{
    margin-top:
        10px;

    opacity:
        .75;

    font-size:
        13px;
}


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

.service-intro
{
    padding:
        100px 0;
}


.service-intro h2
{
    margin:
        0;

    color:
        #0f172a;

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

    letter-spacing:
        -2px;

    font-weight:
        800;
}


.service-intro p
{
    max-width:
        720px;

    margin:
        22px auto 0;

    color:
        #64748b;

    font-size:
        17px;

    line-height:
        1.8;
}


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

.service-cta
{
    padding:
        0 0 100px;
}


.service-cta-inner
{
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        30px;

    padding:
        55px;

    border-radius:
        28px;

    color:
        #fff;

    background:
        linear-gradient(
            135deg,
            #0f172a,
            #1e293b
        );
}


.service-cta-inner span
{
    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        1.5px;

    opacity:
        .65;
}


.service-cta-inner h2
{
    margin:
        10px 0 0;

    max-width:
        650px;

    font-size:
        clamp(
            28px,
            4vw,
            48px
        );

    line-height:
        1.1;

    letter-spacing:
        -1.5px;
}


@media (max-width: 767px)
{
    .service-hero
    {
        padding:
            70px 0;
    }

    .service-hero h1
    {
        font-size:
            42px;

        letter-spacing:
            -2px;
    }

    .service-hero-actions
    {
        flex-direction:
            column;
    }

    .service-hero-actions .btn
    {
        width:
            100%;
    }

    .service-hero-visual
    {
        min-height:
            380px;
    }

    .service-visual-card
    {
        width:
            280px;

        min-height:
            320px;
    }

    .service-cta-inner
    {
        flex-direction:
            column;

        align-items:
            flex-start;

        padding:
            35px 25px;
    }
}
/* =========================================================
   SERVICE PAGE
========================================================= */

:root {
    --ks-blue: #2563eb;
    --ks-blue-dark: #1d4ed8;
    --ks-text: #111827;
    --ks-muted: #64748b;
    --ks-border: #e2e8f0;
    --ks-light: #f8fafc;
    --ks-dark: #0f172a;
}


/* =========================================================
   BREADCRUMB
========================================================= */

.ks-breadcrumb-section {
    padding: 18px 0;
    border-bottom: 1px solid var(--ks-border);
    background: #fff;
}

.ks-breadcrumb-section .breadcrumb {
    font-size: 14px;
}

.ks-breadcrumb-section .breadcrumb-item a {
    color: var(--ks-blue);
    text-decoration: none;
}

.ks-breadcrumb-section
.breadcrumb-item.active {
    color: var(--ks-muted);
}


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

.ks-service-hero {
    position: relative;
    overflow: hidden;
    padding: 100px 0 90px;
    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f8fbff 55%,
            #eef5ff 100%
        );
}

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

.ks-hero-glow-one {
    width: 420px;
    height: 420px;
    top: -180px;
    right: -100px;
    background: rgba(37, 99, 235, 0.10);
}

.ks-hero-glow-two {
    width: 300px;
    height: 300px;
    bottom: -150px;
    left: -100px;
    background: rgba(59, 130, 246, 0.08);
}


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

.ks-service-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;

    color: var(--ks-blue);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.ks-eyebrow-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    border-radius: 10px;

    background: #eff6ff;
    color: var(--ks-blue);

    font-size: 18px;
}


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

.ks-service-title {
    max-width: 820px;
    margin: 0;

    color: var(--ks-text);

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

    line-height: 1.02;
    font-weight: 750;
    letter-spacing: -0.045em;
}

.ks-service-intro {
    max-width: 720px;
    margin: 28px 0 0;

    color: #475569;

    font-size: 19px;
    line-height: 1.7;
}


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

.ks-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 34px;
}

.ks-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    min-height: 52px;
    padding: 0 22px;

    border-radius: 10px;

    font-size: 15px;
    font-weight: 650;

    text-decoration: none;

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        background .2s ease,
        border-color .2s ease;
}

.ks-btn:hover {
    transform: translateY(-2px);
}

.ks-btn-primary {
    color: #fff;
    background: var(--ks-blue);
    box-shadow:
        0 12px 25px rgba(37, 99, 235, .18);
}

.ks-btn-primary:hover {
    color: #fff;
    background: var(--ks-blue-dark);
}

.ks-btn-outline {
    color: var(--ks-text);
    background: #fff;
    border: 1px solid var(--ks-border);
}

.ks-btn-outline:hover {
    color: var(--ks-blue);
    border-color: #bfdbfe;
}


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

.ks-hero-trust {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;

    margin-top: 48px;
}

.ks-trust-item {
    display: flex;
    flex-direction: column;

    padding: 0 24px;
}

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

.ks-trust-item strong {
    color: var(--ks-text);

    font-size: 21px;
    line-height: 1.2;
}

.ks-trust-item span {
    margin-top: 5px;

    color: var(--ks-muted);

    font-size: 13px;
}

.ks-trust-divider {
    width: 1px;
    background: var(--ks-border);
}


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

.ks-service-visual {
    position: relative;

    min-height: 500px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.ks-visual-orbit {
    position: absolute;

    border: 1px solid rgba(37, 99, 235, .12);

    border-radius: 50%;
}

.ks-visual-orbit.orbit-one {
    width: 420px;
    height: 420px;
}

.ks-visual-orbit.orbit-two {
    width: 330px;
    height: 330px;

    border-color: rgba(37, 99, 235, .18);
}


.ks-visual-card {
    position: relative;
    z-index: 2;

    width: min(100%, 390px);

    padding: 38px;

    border: 1px solid rgba(255,255,255,.8);
    border-radius: 24px;

    background:
        linear-gradient(
            145deg,
            #111827,
            #1e293b
        );

    color: #fff;

    box-shadow:
        0 30px 70px rgba(15, 23, 42, .22);
}

.ks-visual-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 64px;
    height: 64px;

    margin-bottom: 24px;

    border-radius: 18px;

    background: rgba(59,130,246,.18);
    color: #60a5fa;

    font-size: 28px;
}

.ks-visual-small {
    display: block;

    margin-bottom: 10px;

    color: #94a3b8;

    font-size: 12px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.ks-visual-card h2 {
    margin-bottom: 16px;

    font-size: 30px;
    line-height: 1.15;
    font-weight: 700;
}

.ks-visual-card p {
    margin: 0;

    color: #cbd5e1;

    font-size: 15px;
    line-height: 1.7;
}

.ks-visual-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;

    margin-top: 30px;
    padding-top: 20px;

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

.ks-visual-footer span {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    color: #e2e8f0;

    font-size: 12px;
    font-weight: 600;
}

.ks-visual-footer i {
    color: #60a5fa;
}


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

.ks-floating-card {
    position: absolute;
    z-index: 3;

    display: flex;
    align-items: center;
    gap: 12px;

    padding: 14px 18px;

    border: 1px solid var(--ks-border);
    border-radius: 14px;

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

    box-shadow:
        0 15px 40px rgba(15,23,42,.12);

    backdrop-filter: blur(10px);
}

.ks-floating-card i {
    color: var(--ks-blue);
    font-size: 20px;
}

.ks-floating-card div {
    display: flex;
    flex-direction: column;
}

.ks-floating-card strong {
    color: var(--ks-text);
    font-size: 14px;
}

.ks-floating-card span {
    color: var(--ks-muted);
    font-size: 11px;
}

.ks-floating-card-one {
    top: 60px;
    right: -15px;
}

.ks-floating-card-two {
    bottom: 55px;
    left: -25px;
}


/* =========================================================
   SECTION COMMON
========================================================= */

.ks-section-label {
    display: inline-block;

    margin-bottom: 14px;

    color: var(--ks-blue);

    font-size: 12px;
    font-weight: 750;

    letter-spacing: .12em;
    text-transform: uppercase;
}

.ks-section-title {
    margin: 0;

    color: var(--ks-text);

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

    line-height: 1.08;
    font-weight: 730;
    letter-spacing: -.035em;
}

.ks-section-title span {
    color: var(--ks-blue);
}

.ks-section-description {
    max-width: 760px;

    margin: 20px auto 0;

    color: var(--ks-muted);

    font-size: 17px;
    line-height: 1.75;
}


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

.ks-service-intro-section {
    padding: 110px 0;

    background: #fff;
}


/* =========================================================
   CAPABILITIES
========================================================= */

.ks-capabilities-section {
    padding: 110px 0;

    background: var(--ks-light);
}

.ks-section-side-text {
    max-width: 480px;

    margin-left: auto;

    color: var(--ks-muted);

    font-size: 16px;
    line-height: 1.75;
}

.ks-capability-card {
    position: relative;

    height: 100%;
    min-height: 310px;

    padding: 34px;

    border: 1px solid var(--ks-border);
    border-radius: 20px;

    background: #fff;

    overflow: hidden;

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

.ks-capability-card:hover {
    transform: translateY(-7px);

    border-color: #bfdbfe;

    box-shadow:
        0 22px 50px rgba(15,23,42,.09);
}

.ks-capability-number {
    position: absolute;

    top: 24px;
    right: 28px;

    color: #cbd5e1;

    font-size: 13px;
    font-weight: 700;
}

.ks-capability-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 58px;
    height: 58px;

    margin-bottom: 28px;

    border-radius: 15px;

    background: #eff6ff;
    color: var(--ks-blue);

    font-size: 24px;
}

.ks-capability-card h3 {
    margin-bottom: 12px;

    color: var(--ks-text);

    font-size: 22px;
    line-height: 1.25;
}

.ks-capability-card p {
    max-width: 330px;

    margin: 0;

    color: var(--ks-muted);

    font-size: 15px;
    line-height: 1.7;
}

.ks-card-arrow {
    position: absolute;

    right: 28px;
    bottom: 25px;

    color: #94a3b8;

    font-size: 18px;

    transition:
        color .2s ease,
        transform .2s ease;
}

.ks-capability-card:hover .ks-card-arrow {
    color: var(--ks-blue);

    transform: translate(3px, -3px);
}


/* =========================================================
   WHY US
========================================================= */

.ks-why-section {
    padding: 120px 0;

    background: #fff;
}

.ks-why-visual {
    position: relative;

    min-height: 450px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.ks-why-box {
    width: min(100%, 420px);

    padding: 44px;

    border-radius: 24px;

    background:
        linear-gradient(
            145deg,
            #eff6ff,
            #f8fafc
        );

    border: 1px solid #dbeafe;
}

.ks-why-box-label {
    color: var(--ks-blue);

    font-size: 12px;
    font-weight: 750;

    letter-spacing: .12em;
    text-transform: uppercase;
}

.ks-why-big-number {
    margin: 30px 0 10px;

    color: #bfdbfe;

    font-size: 80px;
    line-height: 1;

    font-weight: 800;
}

.ks-why-box h3 {
    margin-bottom: 14px;

    color: var(--ks-text);

    font-size: 30px;
}

.ks-why-box p {
    margin: 0;

    color: var(--ks-muted);

    line-height: 1.75;
}

.ks-why-mini {
    position: absolute;

    right: 0;
    bottom: 25px;

    display: flex;
    align-items: center;
    gap: 10px;

    padding: 14px 18px;

    border-radius: 12px;

    background: var(--ks-dark);
    color: #fff;

    box-shadow:
        0 18px 35px rgba(15,23,42,.18);
}

.ks-why-mini i {
    color: #60a5fa;
}

.ks-why-mini span {
    font-size: 13px;
    font-weight: 600;
}

.ks-benefit-list {
    margin-top: 35px;
}

.ks-benefit-item {
    display: flex;
    gap: 18px;

    padding: 20px 0;

    border-bottom: 1px solid var(--ks-border);
}

.ks-benefit-icon {
    flex: 0 0 46px;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 46px;
    height: 46px;

    border-radius: 12px;

    background: #eff6ff;
    color: var(--ks-blue);
}

.ks-benefit-item h4 {
    margin: 0 0 6px;

    color: var(--ks-text);

    font-size: 17px;
}

.ks-benefit-item p {
    margin: 0;

    color: var(--ks-muted);

    font-size: 14px;
    line-height: 1.65;
}


/* =========================================================
   PROCESS
========================================================= */

.ks-process-section {
    padding: 110px 0;

    background: var(--ks-light);
}

.ks-process-grid {
    display: grid;

    grid-template-columns:
        1fr
        70px
        1fr
        70px
        1fr
        70px
        1fr;

    align-items: center;

    margin-top: 55px;
}

.ks-process-item {
    text-align: center;
}

.ks-process-number {
    margin-bottom: 15px;

    color: #94a3b8;

    font-size: 12px;
    font-weight: 750;
}

.ks-process-item > i {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 64px;
    height: 64px;

    margin-bottom: 20px;

    border-radius: 18px;

    background: #fff;
    color: var(--ks-blue);

    box-shadow:
        0 10px 25px rgba(15,23,42,.06);

    font-size: 24px;
}

.ks-process-item h3 {
    margin-bottom: 8px;

    color: var(--ks-text);

    font-size: 20px;
}

.ks-process-item p {
    max-width: 210px;

    margin: 0 auto;

    color: var(--ks-muted);

    font-size: 14px;
    line-height: 1.65;
}

.ks-process-line {
    height: 1px;

    background:
        repeating-linear-gradient(
            to right,
            #cbd5e1 0,
            #cbd5e1 6px,
            transparent 6px,
            transparent 12px
        );
}


/* =========================================================
   INDUSTRIES
========================================================= */

.ks-industries-section {
    padding: 120px 0;

    background: #fff;
}

.ks-industry-tags {
    display: flex;
    flex-wrap: wrap;

    gap: 10px;

    margin-top: 30px;
}

.ks-industry-tags span {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 11px 15px;

    border: 1px solid var(--ks-border);
    border-radius: 50px;

    background: #fff;

    color: #475569;

    font-size: 13px;
    font-weight: 600;
}

.ks-industry-tags i {
    color: var(--ks-blue);
}

.ks-industry-panel {
    padding: 48px;

    border-radius: 24px;

    background: var(--ks-dark);

    color: #fff;

    box-shadow:
        0 25px 60px rgba(15,23,42,.16);
}

.ks-industry-panel-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 60px;
    height: 60px;

    margin-bottom: 25px;

    border-radius: 16px;

    background: rgba(59,130,246,.15);

    color: #60a5fa;

    font-size: 24px;
}

.ks-industry-panel h3 {
    margin-bottom: 18px;

    font-size: 30px;
    line-height: 1.2;
}

.ks-industry-panel p {
    margin-bottom: 25px;

    color: #cbd5e1;

    line-height: 1.75;
}

.ks-text-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    color: #93c5fd;

    font-weight: 650;
    text-decoration: none;
}

.ks-text-link:hover {
    color: #bfdbfe;
}


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

.ks-service-cta {
    position: relative;

    padding: 70px 0 110px;

    overflow: hidden;

    background: #fff;
}

.ks-cta-glow {
    position: absolute;

    width: 500px;
    height: 500px;

    left: 50%;
    top: 0;

    transform: translateX(-50%);

    border-radius: 50%;

    background: rgba(37,99,235,.08);

    filter: blur(50px);
}

.ks-cta-card {
    position: relative;

    padding: 60px;

    border-radius: 28px;

    background:
        linear-gradient(
            135deg,
            #172554,
            #1e3a8a
        );

    color: #fff;

    overflow: hidden;

    box-shadow:
        0 30px 70px rgba(30,64,175,.20);
}

.ks-cta-label {
    display: inline-block;

    margin-bottom: 15px;

    color: #93c5fd;

    font-size: 12px;
    font-weight: 750;

    letter-spacing: .12em;
}

.ks-cta-card h2 {
    margin: 0;

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

    line-height: 1.05;
    letter-spacing: -.035em;
}

.ks-cta-card h2 span {
    color: #93c5fd;
}

.ks-cta-card p {
    max-width: 650px;

    margin: 20px 0 0;

    color: #dbeafe;

    line-height: 1.7;
}

.ks-btn-light {
    color: var(--ks-dark);
    background: #fff;
}

.ks-btn-light:hover {
    color: var(--ks-dark);
    background: #eff6ff;
}


/* =========================================================
   ERROR PAGE
========================================================= */

.ks-error-page {
    min-height: 70vh;

    display: flex;
    align-items: center;

    padding: 80px 0;

    background: var(--ks-light);
}

.ks-error-card {
    max-width: 650px;

    margin: auto;

    padding: 60px;

    text-align: center;

    border: 1px solid var(--ks-border);
    border-radius: 24px;

    background: #fff;

    box-shadow:
        0 20px 50px rgba(15,23,42,.07);
}

.ks-error-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 70px;
    height: 70px;

    margin: 0 auto 25px;

    border-radius: 20px;

    background: #eff6ff;
    color: var(--ks-blue);

    font-size: 28px;
}

.ks-error-card h1 {
    margin-bottom: 15px;

    color: var(--ks-text);

    font-size: 40px;
}

.ks-error-card p {
    margin-bottom: 30px;

    color: var(--ks-muted);

    line-height: 1.7;
}


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

@media (max-width: 991.98px) {

    .ks-service-hero {
        padding: 80px 0;
    }

    .ks-service-title {
        font-size: clamp(
            42px,
            8vw,
            60px
        );
    }

    .ks-service-visual {
        min-height: 430px;
        margin-top: 20px;
    }

    .ks-process-grid {

        grid-template-columns: 1fr 1fr;

        gap: 45px;
    }

    .ks-process-line {
        display: none;
    }

    .ks-why-section,
    .ks-industries-section,
    .ks-service-intro-section,
    .ks-capabilities-section {
        padding: 90px 0;
    }

    .ks-cta-card {
        padding: 45px;
    }

}


@media (max-width: 767.98px) {

    .ks-service-hero {
        padding: 65px 0;
    }

    .ks-service-title {
        font-size: 42px;
    }

    .ks-service-intro {
        font-size: 17px;
    }

    .ks-hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .ks-btn {
        width: 100%;
    }

    .ks-hero-trust {
        display: grid;

        grid-template-columns: 1fr 1fr;

        gap: 20px;
    }

    .ks-trust-item {
        padding: 0;
    }

    .ks-trust-divider {
        display: none;
    }

    .ks-service-visual {
        min-height: 380px;
    }

    .ks-visual-orbit {
        display: none;
    }

    .ks-visual-card {
        padding: 30px;
    }

    .ks-floating-card-one {
        right: 0;
        top: 25px;
    }

    .ks-floating-card-two {
        left: 0;
        bottom: 20px;
    }

    .ks-section-title {
        font-size: 36px;
    }

    .ks-section-side-text {
        margin-left: 0;
        margin-top: 20px;
    }

    .ks-capability-card {
        min-height: 280px;
    }

    .ks-why-visual {
        min-height: 400px;
    }

    .ks-why-box {
        padding: 32px;
    }

    .ks-why-big-number {
        font-size: 64px;
    }

    .ks-why-mini {
        right: 0;
    }

    .ks-process-grid {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .ks-process-item p {
        max-width: 300px;
    }

    .ks-industry-panel {
        padding: 35px;
    }

    .ks-cta-card {
        padding: 35px 28px;
    }

    .ks-error-card {
        padding: 40px 25px;
    }

}


@media (max-width: 575.98px) {

    .ks-service-title {
        font-size: 38px;
    }

    .ks-hero-trust {
        grid-template-columns: 1fr;
    }

    .ks-trust-item {
        padding-bottom: 15px;

        border-bottom: 1px solid var(--ks-border);
    }

    .ks-visual-footer {
        flex-direction: column;
        gap: 10px;
    }

}
/* =========================================================
   KS SERVICE PAGE
   Premium Service Experience
========================================================= */

.ks-service-page {
    --ks-service-accent: #2563eb;
    --ks-service-accent-soft: rgba(37, 99, 235, .10);
    --ks-service-dark: #0b1020;
    --ks-service-text: #111827;
    --ks-service-muted: #667085;
    --ks-service-border: rgba(15, 23, 42, .09);
    background: #fff;
    color: var(--ks-service-text);
}


/* =========================================================
   SERVICE ACCENTS
========================================================= */

.ks-service-mobile,
.ks-service-custom {
    --ks-service-accent: #2563eb;
    --ks-service-accent-soft: rgba(37, 99, 235, .10);
}

.ks-service-android {
    --ks-service-accent: #22c55e;
    --ks-service-accent-soft: rgba(34, 197, 94, .10);
}

.ks-service-ios {
    --ks-service-accent: #111827;
    --ks-service-accent-soft: rgba(17, 24, 39, .08);
}

.ks-service-flutter {
    --ks-service-accent: #0ea5e9;
    --ks-service-accent-soft: rgba(14, 165, 233, .10);
}

.ks-service-web {
    --ks-service-accent: #7c3aed;
    --ks-service-accent-soft: rgba(124, 58, 237, .10);
}


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

.ks-service-hero {
    position: relative;
    overflow: hidden;
    padding: 48px 0 90px;
    min-height: 720px;
    background:
        radial-gradient(
            circle at 80% 20%,
            var(--ks-service-accent-soft),
            transparent 34%
        ),
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f8fafc 100%
        );
}


.ks-service-hero-grid {
    position: absolute;
    inset: 0;
    opacity: .45;

    background-image:
        linear-gradient(
            rgba(15, 23, 42, .035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(15, 23, 42, .035) 1px,
            transparent 1px
        );

    background-size: 60px 60px;

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


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


.ks-service-orb-one {
    width: 320px;
    height: 320px;

    top: 140px;
    right: -100px;

    background:
        radial-gradient(
            circle,
            var(--ks-service-accent-soft),
            transparent 68%
        );

    animation: ksOrbFloat 8s ease-in-out infinite;
}


.ks-service-orb-two {
    width: 220px;
    height: 220px;

    bottom: -80px;
    left: -70px;

    background:
        radial-gradient(
            circle,
            var(--ks-service-accent-soft),
            transparent 70%
        );

    animation: ksOrbFloat 10s ease-in-out infinite reverse;
}


/* =========================================================
   BREADCRUMB
========================================================= */

.ks-breadcrumb {
    display: flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 50px;

    font-size: 14px;
    color: var(--ks-service-muted);
}


.ks-breadcrumb a {
    color: var(--ks-service-text);
    text-decoration: none;
    font-weight: 600;
}


.ks-breadcrumb a:hover {
    color: var(--ks-service-accent);
}


.ks-breadcrumb span:last-child {
    color: var(--ks-service-muted);
}


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

.ks-service-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    padding: 7px 13px 7px 7px;

    border: 1px solid var(--ks-service-border);

    border-radius: 999px;

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

    backdrop-filter: blur(14px);

    font-size: 14px;
    font-weight: 700;

    box-shadow:
        0 8px 30px rgba(15, 23, 42, .05);
}


.ks-eyebrow-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 32px;
    height: 32px;

    border-radius: 50%;

    background: var(--ks-service-accent);
    color: #fff;

    font-size: 15px;
}


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

.ks-service-title {
    max-width: 820px;

    margin: 24px 0 24px;

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

    line-height: .98;

    letter-spacing: -3px;

    font-weight: 800;

    color: #0b1020;
}


.ks-service-description {
    max-width: 720px;

    margin-bottom: 30px;

    font-size: 19px;
    line-height: 1.7;

    color: #667085;
}


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

.ks-service-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}


.ks-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    min-height: 54px;

    padding: 0 22px;

    border-radius: 999px;

    font-size: 15px;
    font-weight: 700;

    text-decoration: none;

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        background .25s ease;
}


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


.ks-btn-primary {
    color: #fff;

    background: var(--ks-service-accent);

    box-shadow:
        0 15px 35px
        var(--ks-service-accent-soft);
}


.ks-btn-primary:hover {
    color: #fff;

    box-shadow:
        0 20px 45px
        var(--ks-service-accent-soft);
}


.ks-btn-secondary {
    color: #111827;

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

    border: 1px solid var(--ks-service-border);
}


.ks-btn-secondary:hover {
    color: var(--ks-service-accent);

    border-color:
        var(--ks-service-accent);
}


/* =========================================================
   STATS
========================================================= */

.ks-service-stats {
    display: flex;
    flex-wrap: wrap;

    gap: 38px;

    margin-top: 42px;
}


.ks-service-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
}


.ks-service-stat strong {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -.5px;
}


.ks-service-stat span {
    font-size: 13px;
    color: var(--ks-service-muted);
}


/* =========================================================
   DEVICE STAGE
========================================================= */

.ks-device-stage {
    position: relative;

    min-height: 570px;

    display: flex;
    align-items: center;
    justify-content: center;
}


.ks-device-stage::before {
    content: "";

    position: absolute;

    width: 440px;
    height: 440px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            var(--ks-service-accent-soft),
            transparent 68%
        );

    animation: ksPulse 5s ease-in-out infinite;
}


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

.ks-phone {
    position: relative;
    z-index: 3;

    animation:
        ksDeviceFloat
        6s
        ease-in-out
        infinite;
}


.ks-phone-frame {
    position: relative;

    width: 285px;
    height: 565px;

    padding: 9px;

    border-radius: 43px;

    background:
        linear-gradient(
            145deg,
            #20232a,
            #050608
        );

    box-shadow:
        0 45px 80px rgba(15, 23, 42, .25),
        inset 0 0 0 1px rgba(255,255,255,.18);

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


.ks-phone-screen {
    position: relative;

    width: 100%;
    height: 100%;

    overflow: hidden;

    border-radius: 35px;

    background:
        linear-gradient(
            180deg,
            #f8fafc,
            #eef2ff
        );
}


.ks-phone-speaker {
    position: absolute;

    z-index: 10;

    top: 18px;
    left: 50%;

    width: 72px;
    height: 20px;

    transform: translateX(-50%);

    border-radius: 999px;

    background: #050608;
}


.ks-phone-status {
    display: flex;
    justify-content: space-between;

    padding: 20px 20px 10px;

    font-size: 10px;
    font-weight: 700;
}


.ks-phone-app {
    padding: 10px 18px 18px;
}


.ks-phone-app-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    font-size: 13px;
    font-weight: 800;
}


.ks-phone-greeting {
    display: flex;
    flex-direction: column;

    margin-top: 26px;
}


.ks-phone-greeting small {
    color: #667085;
    font-size: 11px;
}


.ks-phone-greeting strong {
    margin-top: 3px;
    font-size: 22px;
    letter-spacing: -.7px;
}


.ks-phone-main-card {
    display: flex;
    align-items: center;
    gap: 12px;

    margin-top: 20px;
    padding: 17px;

    border-radius: 22px;

    background:
        linear-gradient(
            135deg,
            var(--ks-service-accent),
            color-mix(
                in srgb,
                var(--ks-service-accent),
                #000 18%
            )
        );

    color: #fff;

    box-shadow:
        0 15px 30px
        var(--ks-service-accent-soft);
}


.ks-phone-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 40px;
    height: 40px;

    border-radius: 13px;

    background: rgba(255,255,255,.18);
}


.ks-phone-main-card small {
    display: block;

    opacity: .8;

    font-size: 9px;
}


.ks-phone-main-card strong {
    display: block;

    margin-top: 3px;

    font-size: 20px;
}


.ks-phone-mini-grid {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 10px;

    margin-top: 10px;
}


.ks-phone-mini-grid > div {
    display: flex;
    flex-direction: column;

    padding: 13px;

    border-radius: 17px;

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

    border: 1px solid rgba(15,23,42,.06);
}


.ks-phone-mini-grid i {
    margin-bottom: 9px;

    color: var(--ks-service-accent);
}


.ks-phone-mini-grid span {
    font-size: 9px;
    color: #667085;
}


.ks-phone-mini-grid strong {
    margin-top: 2px;

    font-size: 16px;
}


.ks-phone-chart {
    display: flex;
    align-items: end;

    gap: 5px;

    height: 90px;

    margin-top: 15px;

    padding: 15px;

    border-radius: 18px;

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

    border: 1px solid rgba(15,23,42,.06);
}


.ks-phone-chart div {
    flex: 1;

    border-radius: 8px 8px 3px 3px;

    background: var(--ks-service-accent);

    opacity: .75;

    animation: ksChart 2.8s ease-in-out infinite alternate;
}


.ks-phone-chart div:nth-child(1) {
    height: 30%;
}

.ks-phone-chart div:nth-child(2) {
    height: 48%;
    animation-delay: .1s;
}

.ks-phone-chart div:nth-child(3) {
    height: 38%;
    animation-delay: .2s;
}

.ks-phone-chart div:nth-child(4) {
    height: 70%;
    animation-delay: .3s;
}

.ks-phone-chart div:nth-child(5) {
    height: 55%;
    animation-delay: .4s;
}

.ks-phone-chart div:nth-child(6) {
    height: 80%;
    animation-delay: .5s;
}

.ks-phone-chart div:nth-child(7) {
    height: 67%;
    animation-delay: .6s;
}

.ks-phone-chart div:nth-child(8) {
    height: 92%;
    animation-delay: .7s;
}


.ks-phone-bottom {
    display: flex;
    align-items: center;
    justify-content: space-around;

    margin-top: 13px;

    padding: 10px;

    border-radius: 17px;

    background: rgba(255,255,255,.85);
}


.ks-phone-bottom span {
    color: #98a2b3;
}


.ks-phone-bottom span.active {
    color: var(--ks-service-accent);
}


/* =========================================================
   ANDROID / IOS / FLUTTER DIFFERENT FEEL
========================================================= */

.ks-phone-android .ks-phone-frame {
    border-radius: 28px;
}


.ks-phone-android .ks-phone-screen {
    border-radius: 21px;
}


.ks-phone-ios .ks-phone-frame {
    border-radius: 46px;
}


.ks-phone-flutter .ks-phone-frame {
    transform:
        perspective(1200px)
        rotateY(-6deg)
        rotateX(2deg)
}


/* =========================================================
   MACBOOK
========================================================= */

.ks-macbook {
    position: relative;

    z-index: 3;

    width: min(590px, 100%);

    animation:
        ksDeviceFloat
        6s
        ease-in-out
        infinite;
}


.ks-macbook-screen {
    position: relative;

    aspect-ratio: 16 / 10;

    padding: 10px;

    border-radius: 18px 18px 8px 8px;

    background:
        linear-gradient(
            145deg,
            #343943,
            #0b0d12
        );

    box-shadow:
        0 40px 80px rgba(15,23,42,.25),
        inset 0 0 0 1px rgba(255,255,255,.15);
}


.ks-browser-bar {
    display: flex;
    align-items: center;

    gap: 15px;

    height: 32px;

    padding: 0 12px;

    border-radius: 10px 10px 0 0;

    background: #f8fafc;
}


.ks-browser-dots {
    display: flex;
    gap: 5px;
}


.ks-browser-dots span {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #cbd5e1;
}


.ks-browser-address {
    flex: 1;

    height: 20px;

    display: flex;
    align-items: center;

    padding: 0 10px;

    border-radius: 6px;

    background: #eef2f6;

    font-size: 8px;
    color: #667085;
}


.ks-web-ui {
    display: flex;

    height: calc(100% - 32px);

    overflow: hidden;

    background: #f8fafc;
}


.ks-web-sidebar {
    width: 20%;

    padding: 16px 10px;

    background: #101828;
}


.ks-web-logo {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 30px;
    height: 30px;

    margin-bottom: 24px;

    border-radius: 9px;

    background: var(--ks-service-accent);

    color: #fff;

    font-size: 10px;
    font-weight: 800;
}


.ks-web-sidebar span {
    display: block;

    height: 7px;

    margin: 13px 3px;

    border-radius: 4px;

    background: rgba(255,255,255,.13);
}


.ks-web-content {
    flex: 1;

    padding: 20px;
}


.ks-web-nav {
    width: 45%;
    height: 7px;

    margin-left: auto;

    border-radius: 5px;

    background: #d0d5dd;
}


.ks-web-heading {
    width: 55%;
    height: 16px;

    margin-top: 28px;

    border-radius: 5px;

    background: #101828;
}


.ks-web-subheading {
    width: 75%;
    height: 7px;

    margin-top: 10px;

    border-radius: 4px;

    background: #d0d5dd;
}


.ks-web-cards {
    display: grid;

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

    gap: 9px;

    margin-top: 22px;
}


.ks-web-cards div {
    height: 65px;

    border-radius: 9px;

    background: #fff;

    border: 1px solid #eaecf0;

    box-shadow:
        0 5px 15px rgba(15,23,42,.04);
}


.ks-web-cards div::before {
    content: "";

    display: block;

    width: 24px;
    height: 24px;

    margin: 10px;

    border-radius: 7px;

    background: var(--ks-service-accent-soft);
}


.ks-web-chart {
    display: flex;

    align-items: end;

    gap: 7px;

    height: 95px;

    margin-top: 15px;

    padding: 12px;

    border-radius: 10px;

    background: #fff;

    border: 1px solid #eaecf0;
}


.ks-web-chart span {
    flex: 1;

    border-radius: 5px 5px 2px 2px;

    background: var(--ks-service-accent);

    opacity: .75;
}


.ks-web-chart span:nth-child(1) {
    height: 30%;
}

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

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

.ks-web-chart span:nth-child(4) {
    height: 72%;
}

.ks-web-chart span:nth-child(5) {
    height: 60%;
}

.ks-web-chart span:nth-child(6) {
    height: 90%;
}


.ks-macbook-base {
    position: relative;

    width: 108%;

    height: 15px;

    margin-left: -4%;

    border-radius:
        0 0 18px 18px;

    background:
        linear-gradient(
            180deg,
            #b9bdc5,
            #8f949d
        );

    box-shadow:
        0 18px 30px rgba(15,23,42,.15);
}


.ks-macbook-notch {
    position: absolute;

    left: 50%;

    top: 0;

    width: 24%;

    height: 5px;

    transform: translateX(-50%);

    border-radius:
        0 0 8px 8px;

    background: #9297a0;
}


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

.ks-floating-card {
    position: absolute;

    z-index: 6;

    display: flex;
    align-items: center;

    gap: 11px;

    padding: 13px 16px;

    border-radius: 16px;

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

    backdrop-filter:
        blur(18px);

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

    box-shadow:
        0 20px 45px rgba(15,23,42,.12);

    animation:
        ksFloatingCard
        5s
        ease-in-out
        infinite;
}


.ks-floating-card-top {
    top: 50px;
    right: -10px;
}


.ks-floating-card-bottom {
    bottom: 55px;
    left: -30px;

    animation-delay: 1.2s;
}


.ks-floating-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    border-radius: 12px;

    background:
        var(--ks-service-accent-soft);

    color:
        var(--ks-service-accent);
}


.ks-floating-card strong {
    display: block;

    font-size: 12px;
}


.ks-floating-card small {
    display: block;

    margin-top: 3px;

    font-size: 9px;

    color: #667085;
}


/* =========================================================
   TRUST STRIP
========================================================= */

.ks-service-trust {
    border-top:
        1px solid var(--ks-service-border);

    border-bottom:
        1px solid var(--ks-service-border);

    background: #fff;
}


.ks-trust-inner {
    display: flex;
    align-items: center;
    justify-content: center;

    flex-wrap: wrap;

    gap: 50px;

    padding: 23px 0;
}


.ks-trust-inner span {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    color: #667085;

    font-size: 13px;
    font-weight: 600;
}


.ks-trust-inner i {
    color: var(--ks-service-accent);
}


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

.ks-service-intro {
    padding: 120px 0 70px;
}


.ks-section-eyebrow {
    display: inline-block;

    margin-bottom: 14px;

    color: var(--ks-service-accent);

    font-size: 12px;

    letter-spacing: 1.7px;

    font-weight: 800;
}


.ks-section-title {
    margin: 0;

    font-size: clamp(
        38px,
        5vw,
        62px
    );

    line-height: 1;

    letter-spacing: -2.5px;

    font-weight: 800;
}


.ks-section-title span {
    display: block;

    color: #98a2b3;
}


.ks-section-description {
    max-width: 760px;

    margin:
        28px auto 0;

    font-size: 18px;

    line-height: 1.7;

    color: #667085;
}


/* =========================================================
   CAPABILITIES
========================================================= */

.ks-service-capabilities {
    padding: 70px 0 120px;

    background:
        linear-gradient(
            180deg,
            #fff,
            #f8fafc
        );
}


.ks-capabilities-intro {
    margin: 0;

    font-size: 16px;

    line-height: 1.7;

    color: #667085;
}


.ks-capability-card {
    position: relative;

    min-height: 330px;

    padding: 28px;

    overflow: hidden;

    border:
        1px solid var(--ks-service-border);

    border-radius: 24px;

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

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


.ks-capability-card:hover {
    transform: translateY(-8px);

    border-color:
        var(--ks-service-accent);

    box-shadow:
        0 25px 60px
        rgba(15,23,42,.10);
}


.ks-capability-number {
    position: absolute;

    top: 20px;
    right: 24px;

    font-size: 12px;

    font-weight: 700;

    color: #98a2b3;
}


.ks-capability-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 54px;
    height: 54px;

    margin-bottom: 70px;

    border-radius: 16px;

    background:
        var(--ks-service-accent-soft);

    color:
        var(--ks-service-accent);

    font-size: 21px;
}


.ks-capability-card h3 {
    margin-bottom: 12px;

    font-size: 22px;

    letter-spacing: -.6px;

    font-weight: 750;
}


.ks-capability-card p {
    margin: 0;

    max-width: 320px;

    color: #667085;

    font-size: 14px;

    line-height: 1.7;
}


.ks-capability-arrow {
    position: absolute;

    right: 25px;
    bottom: 25px;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    border-radius: 50%;

    background: #f2f4f7;

    transition:
        background .25s ease,
        color .25s ease,
        transform .25s ease;
}


.ks-capability-card:hover
.ks-capability-arrow {
    background: var(--ks-service-accent);
    color: #fff;

    transform: rotate(45deg);
}


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

.ks-service-cta {
    position: relative;

    overflow: hidden;

    padding: 100px 0;

    background: #0b1020;

    color: #fff;
}


.ks-cta-grid {
    position: absolute;
    inset: 0;

    opacity: .15;

    background-image:
        linear-gradient(
            rgba(255,255,255,.08) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.08) 1px,
            transparent 1px
        );

    background-size: 50px 50px;
}


.ks-cta-box {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 40px;

    padding: 55px;

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

    border-radius: 30px;

    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(255,255,255,.08),
            transparent 35%
        ),
        rgba(255,255,255,.04);

    backdrop-filter:
        blur(20px);
}


.ks-cta-box h2 {
    max-width: 720px;

    margin: 0 0 18px;

    font-size: clamp(
        38px,
        5vw,
        64px
    );

    line-height: 1;

    letter-spacing: -2.5px;
}


.ks-cta-box h2 span {
    color: #98a2b3;
}


.ks-cta-box p {
    max-width: 600px;

    margin: 0;

    color: #98a2b3;

    line-height: 1.7;
}


.ks-btn-light {
    background: #fff;
    color: #101828;

    min-width: 150px;
}


.ks-btn-light:hover {
    color: #101828;

    box-shadow:
        0 20px 50px rgba(0,0,0,.25);
}


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

@keyframes ksDeviceFloat {

    0%,
    100% {
        transform:
            translateY(0)
            perspective(1200px)
            rotateY(-9deg)
            rotateX(3deg);
    }

    50% {
        transform:
            translateY(-14px)
            perspective(1200px)
            rotateY(-7deg)
            rotateX(2deg);
    }

}


@keyframes ksFloatingCard {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }

}


@keyframes ksOrbFloat {

    0%,
    100% {
        transform:
            translate3d(0,0,0)
            scale(1);
    }

    50% {
        transform:
            translate3d(0,-25px,0)
            scale(1.06);
    }

}


@keyframes ksPulse {

    0%,
    100% {
        transform: scale(.95);
        opacity: .7;
    }

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

}


@keyframes ksChart {

    from {
        transform: scaleY(.85);
        transform-origin: bottom;
    }

    to {
        transform: scaleY(1.05);
        transform-origin: bottom;
    }

}


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

@media (max-width: 991.98px) {

    .ks-service-hero {
        padding-top: 30px;
        padding-bottom: 70px;
    }


    .ks-breadcrumb {
        margin-bottom: 35px;
    }


    .ks-service-title {
        letter-spacing: -2px;
    }


    .ks-device-stage {
        min-height: 600px;

        margin-top: 20px;
    }


    .ks-floating-card-top {
        right: 0;
    }


    .ks-floating-card-bottom {
        left: 0;
    }


    .ks-cta-box {
        flex-direction: column;

        align-items: flex-start;

        padding: 40px;
    }

}


@media (max-width: 767.98px) {

    .ks-service-hero {
        padding-top: 20px;
        padding-bottom: 55px;
    }


    .ks-service-title {
        font-size: 46px;

        letter-spacing: -1.8px;
    }


    .ks-service-description {
        font-size: 17px;
    }


    .ks-service-stats {
        gap: 25px;
    }


    .ks-service-stat strong {
        font-size: 20px;
    }


    .ks-device-stage {
        min-height: 520px;
    }


    .ks-phone-frame {
        width: 250px;
        height: 500px;
    }


    .ks-macbook {
        width: 94%;
    }


    .ks-floating-card {
        transform: scale(.88);
    }


    .ks-floating-card-top {
        top: 30px;
        right: -5px;
    }


    .ks-floating-card-bottom {
        bottom: 25px;
        left: -5px;
    }


    .ks-service-intro {
        padding: 80px 0 50px;
    }


    .ks-service-capabilities {
        padding: 50px 0 80px;
    }


    .ks-capability-card {
        min-height: 290px;
    }


    .ks-capability-icon {
        margin-bottom: 50px;
    }


    .ks-trust-inner {
        gap: 20px 30px;

        justify-content: flex-start;
    }


    .ks-cta-box {
        padding: 30px;
    }

}


@media (max-width: 480px) {

    .ks-breadcrumb {
        font-size: 12px;
        gap: 7px;
    }


    .ks-service-title {
        font-size: 40px;
    }


    .ks-service-actions {
        flex-direction: column;
        align-items: stretch;
    }


    .ks-btn {
        width: 100%;
    }


    .ks-device-stage {
        min-height: 470px;
    }


    .ks-phone-frame {
        width: 225px;
        height: 450px;

        border-radius: 35px;
    }


    .ks-phone-screen {
        border-radius: 28px;
    }


    .ks-floating-card {
        transform: scale(.75);
    }


    .ks-floating-card-top {
        right: -35px;
    }


    .ks-floating-card-bottom {
        left: -35px;
    }


    .ks-section-title {
        font-size: 42px;
    }

}


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

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

    .ks-service-page *,
    .ks-service-page *::before,
    .ks-service-page *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }

}
/* =========================================================
   HOMEPAGE HERO — IQ200
========================================================= */

.ks-home-hero
{
    position: relative;
    min-height: calc(100vh - 80px);

    display: flex;
    align-items: center;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(37,99,235,.10),
            transparent 35%
        ),
        radial-gradient(
            circle at 20% 80%,
            rgba(99,102,241,.08),
            transparent 35%
        ),
        #ffffff;

    padding: 110px 0 100px;
}


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

.ks-hero-grid
{
    position: absolute;

    inset: 0;

    background-image:
        linear-gradient(
            rgba(17,24,39,.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(17,24,39,.035) 1px,
            transparent 1px
        );

    background-size: 55px 55px;

    mask-image:
        radial-gradient(
            ellipse at center,
            black 30%,
            transparent 80%
        );

    pointer-events: none;
}


/* =========================================================
   GLOWS
========================================================= */

.ks-hero-glow
{
    position: absolute;

    width: 500px;
    height: 500px;

    border-radius: 50%;

    filter: blur(80px);

    opacity: .18;

    pointer-events: none;

    animation:
        ksHeroGlow 8s ease-in-out infinite alternate;
}

.ks-hero-glow-one
{
    background: #2563eb;

    top: -220px;
    right: -120px;
}

.ks-hero-glow-two
{
    background: #7c3aed;

    bottom: -250px;
    left: -180px;

    animation-delay: 2s;
}


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

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


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

.ks-hero-eyebrow
{
    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 8px 14px;

    border: 1px solid rgba(37,99,235,.15);

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

    backdrop-filter: blur(12px);

    border-radius: 999px;

    color: #475569;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: .13em;

    margin-bottom: 25px;

    animation:
        ksHeroFadeUp .8s ease both;
}


.ks-hero-status
{
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #22c55e;

    box-shadow:
        0 0 0 5px rgba(34,197,94,.10);

    animation:
        ksHeroPulse 2s infinite;
}


@keyframes ksHeroPulse
{
    0%,
    100%
    {
        box-shadow:
            0 0 0 5px rgba(34,197,94,.10);
    }

    50%
    {
        box-shadow:
            0 0 0 9px rgba(34,197,94,.02);
    }
}


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

.ks-hero-title
{
    max-width: 850px;

    margin: 0;

    color: #0f172a;

    font-size:
        clamp(
            48px,
            5.5vw,
            82px
        );

    line-height: 1.02;

    letter-spacing: -.055em;

    font-weight: 800;

    animation:
        ksHeroFadeUp .9s .08s ease both;
}


.ks-hero-gradient
{
    display: inline-block;

    background:
        linear-gradient(
            120deg,
            #2563eb,
            #4f46e5,
            #7c3aed,
            #2563eb
        );

    background-size: 300% auto;

    -webkit-background-clip: text;

    background-clip: text;

    color: transparent;

    animation:
        ksHeroGradient 7s linear infinite;
}


@keyframes ksHeroGradient
{
    to
    {
        background-position: 300% center;
    }
}


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

.ks-hero-description
{
    max-width: 690px;

    margin:
        30px 0 0;

    color: #64748b;

    font-size: 18px;

    line-height: 1.8;

    animation:
        ksHeroFadeUp .9s .16s ease both;
}


/* =========================================================
   SERVICE PILLS
========================================================= */

.ks-hero-services
{
    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    margin-top: 28px;

    animation:
        ksHeroFadeUp .9s .24s ease both;
}


.ks-hero-service
{
    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 9px 14px;

    border:
        1px solid
        rgba(15,23,42,.08);

    border-radius: 999px;

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

    color: #334155;

    font-size: 13px;

    font-weight: 600;

    text-decoration: none;

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


.ks-hero-service i
{
    color: #2563eb;
}


.ks-hero-service:hover
{
    transform: translateY(-4px);

    color: #2563eb;

    border-color:
        rgba(37,99,235,.22);

    box-shadow:
        0 12px 30px
        rgba(15,23,42,.08);
}


/* =========================================================
   ACTIONS
========================================================= */

.ks-hero-actions
{
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 22px;

    margin-top: 35px;

    animation:
        ksHeroFadeUp .9s .32s ease both;
}


.ks-hero-main-btn
{
    padding:
        15px 24px;

    border-radius: 14px;

    font-size: 15px;

    box-shadow:
        0 15px 35px
        rgba(37,99,235,.22);
}


.ks-hero-main-btn i
{
    transition:
        transform .3s ease;
}


.ks-hero-main-btn:hover i
{
    transform:
        translate(4px,-4px);
}


.ks-hero-secondary-btn
{
    display: inline-flex;

    align-items: center;

    gap: 12px;

    color: #334155;

    font-weight: 700;

    text-decoration: none;
}


.ks-hero-secondary-btn span
{
    display: flex;

    align-items: center;

    justify-content: center;

    width: 38px;
    height: 38px;

    border-radius: 50%;

    border: 1px solid #e2e8f0;

    transition:
        transform .3s ease,
        background .3s ease;
}


.ks-hero-secondary-btn:hover span
{
    transform: translateX(5px);

    background: #f8fafc;
}


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

.ks-hero-trust
{
    display: flex;

    align-items: center;

    gap: 22px;

    margin-top: 45px;

    animation:
        ksHeroFadeUp .9s .4s ease both;
}


.ks-hero-trust div:not(.ks-hero-trust-divider)
{
    display: flex;

    flex-direction: column;
}


.ks-hero-trust strong
{
    color: #0f172a;

    font-size: 17px;

    font-weight: 800;
}


.ks-hero-trust span
{
    color: #94a3b8;

    font-size: 11px;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: .08em;
}


.ks-hero-trust-divider
{
    width: 1px;

    height: 32px;

    background: #e2e8f0;
}


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

.ks-hero-visual
{
    position: relative;

    min-height: 620px;

    display: flex;

    align-items: center;

    justify-content: center;

    perspective: 1200px;
}


/* =========================================================
   ORBITS
========================================================= */

.ks-hero-orbit
{
    position: absolute;

    border:
        1px solid
        rgba(37,99,235,.10);

    border-radius: 50%;

    animation:
        ksHeroOrbit 20s linear infinite;
}


.ks-hero-orbit-one
{
    width: 600px;
    height: 600px;
}


.ks-hero-orbit-two
{
    width: 460px;
    height: 460px;

    animation-direction: reverse;

    animation-duration: 16s;
}


.ks-hero-orbit-three
{
    width: 330px;
    height: 330px;

    animation-duration: 12s;
}


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

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


/* =========================================================
   MAIN PRODUCT
========================================================= */

.ks-product-showcase
{
    position: relative;

    width: min(390px, 85vw);

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

    border-radius: 28px;

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

    backdrop-filter:
        blur(25px);

    box-shadow:
        0 40px 100px
        rgba(15,23,42,.16);

    overflow: hidden;

    z-index: 5;

    transform:
        rotateY(-5deg)
        rotateX(3deg);

    animation:
        ksProductFloat 6s ease-in-out infinite;
}


@keyframes ksProductFloat
{
    0%,
    100%
    {
        transform:
            translateY(0)
            rotateY(-5deg)
            rotateX(3deg);
    }

    50%
    {
        transform:
            translateY(-14px)
            rotateY(3deg)
            rotateX(0deg);
    }
}


/* =========================================================
   TOP BAR
========================================================= */

.ks-product-topbar
{
    display: flex;

    align-items: center;

    justify-content: space-between;

    padding:
        15px 18px;

    border-bottom:
        1px solid #eef2f7;
}


.ks-product-dots
{
    display: flex;

    gap: 5px;
}


.ks-product-dots span
{
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #cbd5e1;
}


.ks-product-status
{
    display: flex;

    align-items: center;

    gap: 6px;

    color: #64748b;

    font-size: 11px;

    font-weight: 700;
}


.ks-product-status span
{
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #22c55e;
}


/* =========================================================
   SCREEN
========================================================= */

.ks-product-screen
{
    padding: 25px;
}


.ks-product-header
{
    display: flex;

    align-items: center;

    justify-content: space-between;
}


.ks-product-header small
{
    display: block;

    color: #94a3b8;

    font-size: 8px;

    letter-spacing: .12em;

    font-weight: 800;
}


.ks-product-header strong
{
    display: block;

    margin-top: 5px;

    color: #0f172a;

    font-size: 16px;
}


.ks-product-avatar
{
    display: flex;

    align-items: center;

    justify-content: center;

    width: 40px;
    height: 40px;

    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #7c3aed
        );

    color: #fff;

    font-size: 12px;

    font-weight: 800;
}


/* =========================================================
   CHART
========================================================= */

.ks-product-chart
{
    position: relative;

    height: 150px;

    margin-top: 25px;

    padding:
        20px;

    border-radius: 18px;

    background:
        linear-gradient(
            180deg,
            #f8fafc,
            #ffffff
        );

    overflow: hidden;
}


.ks-chart-line
{
    position: absolute;

    left: 8%;

    right: 8%;

    bottom: 45px;

    height: 70px;

    border-top:
        3px solid #2563eb;

    border-radius: 50%;

    transform:
        rotate(-4deg);
}


.ks-chart-bars
{
    position: absolute;

    inset:
        20px;

    display: flex;

    align-items: end;

    gap: 12px;
}


.ks-chart-bars span
{
    flex: 1;

    border-radius:
        5px 5px 0 0;

    background:
        linear-gradient(
            to top,
            rgba(37,99,235,.08),
            rgba(37,99,235,.25)
        );

    animation:
        ksChartGrow 2.5s ease-in-out infinite alternate;
}


.ks-chart-bars span:nth-child(1)
{
    height: 30%;
}

.ks-chart-bars span:nth-child(2)
{
    height: 42%;
    animation-delay: .1s;
}

.ks-chart-bars span:nth-child(3)
{
    height: 38%;
    animation-delay: .2s;
}

.ks-chart-bars span:nth-child(4)
{
    height: 60%;
    animation-delay: .3s;
}

.ks-chart-bars span:nth-child(5)
{
    height: 72%;
    animation-delay: .4s;
}

.ks-chart-bars span:nth-child(6)
{
    height: 88%;
    animation-delay: .5s;
}


@keyframes ksChartGrow
{
    to
    {
        transform: scaleY(.72);
    }
}


/* =========================================================
   PRODUCT CARDS
========================================================= */

.ks-product-cards
{
    display: grid;

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

    gap: 10px;

    margin-top: 15px;
}


.ks-product-cards div
{
    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 7px;

    padding:
        14px 8px;

    border:
        1px solid #eef2f7;

    border-radius: 14px;

    background: #fff;

    color: #64748b;

    font-size: 10px;

    font-weight: 700;

    transition:
        transform .3s ease;
}


.ks-product-cards div:hover
{
    transform: translateY(-5px);
}


.ks-product-cards i
{
    color: #2563eb;

    font-size: 18px;
}


/* =========================================================
   PRODUCT FOOTER
========================================================= */

.ks-product-footer
{
    display: flex;

    justify-content: space-around;

    padding:
        15px;

    border-top:
        1px solid #eef2f7;

    color: #64748b;

    font-size: 9px;

    font-weight: 700;
}


.ks-product-footer span
{
    display: flex;

    align-items: center;

    gap: 5px;
}


.ks-product-footer i
{
    color: #2563eb;
}


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

.ks-floating-device
{
    position: absolute;

    z-index: 8;

    animation:
        ksFloatingDevice 5s ease-in-out infinite;
}


.ks-device-mobile
{
    left: -35px;

    bottom: 70px;
}


.ks-phone
{
    width: 125px;

    padding: 8px;

    border-radius: 24px;

    background:
        #111827;

    box-shadow:
        0 30px 60px
        rgba(15,23,42,.28);

    transform:
        rotate(-8deg);
}


.ks-phone-notch
{
    width: 42px;
    height: 7px;

    margin: 2px auto 10px;

    border-radius: 999px;

    background: #020617;
}


.ks-phone-content
{
    min-height: 190px;

    padding: 14px;

    border-radius: 17px;

    background:
        linear-gradient(
            145deg,
            #eff6ff,
            #ffffff
        );
}


.ks-phone-content small
{
    color: #64748b;

    font-size: 7px;

    font-weight: 800;
}


.ks-phone-content > strong
{
    display: block;

    margin-top: 5px;

    font-size: 16px;

    color: #0f172a;
}


.ks-phone-stat
{
    margin-top: 30px;
}


.ks-phone-stat span
{
    display: block;

    color: #94a3b8;

    font-size: 8px;
}


.ks-phone-stat strong
{
    display: block;

    color: #2563eb;

    font-size: 17px;
}


.ks-phone-progress
{
    height: 5px;

    margin-top: 10px;

    border-radius: 999px;

    background: #dbeafe;
}


.ks-phone-progress span
{
    display: block;

    width: 75%;

    height: 100%;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            #2563eb,
            #7c3aed
        );
}


.ks-phone-icons
{
    display: flex;

    justify-content: space-between;

    margin-top: 28px;

    color: #64748b;

    font-size: 12px;
}


@keyframes ksFloatingDevice
{
    0%,
    100%
    {
        transform:
            translateY(0);
    }

    50%
    {
        transform:
            translateY(-18px);
    }
}


/* =========================================================
   WEB CARD
========================================================= */

.ks-floating-web
{
    position: absolute;

    z-index: 9;

    right: -55px;

    top: 85px;

    display: flex;

    align-items: center;

    gap: 12px;

    padding:
        14px 16px;

    min-width: 220px;

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

    border-radius: 16px;

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

    backdrop-filter:
        blur(15px);

    box-shadow:
        0 20px 50px
        rgba(15,23,42,.12);

    animation:
        ksFloatingWeb 6s 1s ease-in-out infinite;
}


.ks-web-icon
{
    width: 40px;
    height: 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 12px;

    background: #eff6ff;

    color: #2563eb;

    font-size: 18px;
}


.ks-floating-web strong
{
    display: block;

    color: #0f172a;

    font-size: 11px;
}


.ks-floating-web span
{
    display: block;

    margin-top: 3px;

    color: #94a3b8;

    font-size: 9px;
}


.ks-floating-web > i
{
    margin-left: auto;

    color: #22c55e;

    font-size: 15px;
}


@keyframes ksFloatingWeb
{
    0%,
    100%
    {
        transform:
            translate(0,0);
    }

    50%
    {
        transform:
            translate(8px,-12px);
    }
}


/* =========================================================
   SECURITY CARD
========================================================= */

.ks-floating-security
{
    position: absolute;

    z-index: 8;

    right: -35px;

    bottom: 95px;

    display: flex;

    align-items: center;

    gap: 10px;

    padding:
        12px 15px;

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

    border-radius: 15px;

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

    backdrop-filter:
        blur(15px);

    box-shadow:
        0 20px 50px
        rgba(15,23,42,.10);

    animation:
        ksFloatingSecurity 5s 1.5s ease-in-out infinite;
}


.ks-security-icon
{
    width: 36px;
    height: 36px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 10px;

    background: #f0fdf4;

    color: #16a34a;
}


.ks-floating-security strong
{
    display: block;

    color: #0f172a;

    font-size: 10px;
}


.ks-floating-security span
{
    display: block;

    color: #94a3b8;

    font-size: 8px;

    margin-top: 2px;
}


@keyframes ksFloatingSecurity
{
    0%,
    100%
    {
        transform:
            translateY(0);
    }

    50%
    {
        transform:
            translateY(10px);
    }
}


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

.ks-hero-particle
{
    position: absolute;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #2563eb;

    box-shadow:
        0 0 20px
        rgba(37,99,235,.5);

    animation:
        ksParticle 4s ease-in-out infinite;
}


.particle-one
{
    top: 13%;
    left: 12%;
}

.particle-two
{
    top: 30%;
    right: 8%;

    animation-delay: 1s;
}

.particle-three
{
    bottom: 20%;
    left: 14%;

    animation-delay: 2s;
}

.particle-four
{
    bottom: 10%;
    right: 18%;

    animation-delay: 3s;
}


@keyframes ksParticle
{
    0%,
    100%
    {
        opacity: .35;

        transform:
            translateY(0)
            scale(1);
    }

    50%
    {
        opacity: 1;

        transform:
            translateY(-18px)
            scale(1.4);
    }
}


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

.ks-hero-scroll
{
    position: absolute;

    bottom: 25px;

    left: 50%;

    transform:
        translateX(-50%);

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 8px;

    color: #94a3b8;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: .16em;
}


.ks-hero-scroll i
{
    animation:
        ksScrollArrow 1.8s ease-in-out infinite;
}


@keyframes ksScrollArrow
{
    0%,
    100%
    {
        transform: translateY(0);
    }

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


/* =========================================================
   GENERAL ANIMATION
========================================================= */

@keyframes ksHeroFadeUp
{
    from
    {
        opacity: 0;

        transform:
            translateY(25px);
    }

    to
    {
        opacity: 1;

        transform:
            translateY(0);
    }
}


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

@media (max-width: 1199px)
{
    .ks-floating-web
    {
        right: -15px;
    }

    .ks-floating-security
    {
        right: 0;
    }

    .ks-device-mobile
    {
        left: 0;
    }
}


@media (max-width: 991px)
{
    .ks-home-hero
    {
        min-height: auto;

        padding:
            90px 0 120px;
    }

    .ks-hero-title
    {
        font-size:
            clamp(
                46px,
                9vw,
                68px
            );
    }

    .ks-hero-visual
    {
        min-height: 570px;

        margin-top: 20px;
    }
}


@media (max-width: 575px)
{
    .ks-home-hero
    {
        padding:
            70px 0 100px;
    }

    .ks-hero-eyebrow
    {
        font-size: 9px;
    }

    .ks-hero-title
    {
        font-size: 43px;

        letter-spacing: -.045em;
    }

    .ks-hero-description
    {
        font-size: 16px;
    }

    .ks-hero-services
    {
        gap: 7px;
    }

    .ks-hero-service
    {
        font-size: 11px;

        padding:
            8px 11px;
    }

    .ks-hero-actions
    {
        align-items: stretch;

        flex-direction: column;
    }

    .ks-hero-main-btn
    {
        text-align: center;
    }

    .ks-hero-trust
    {
        gap: 12px;
    }

    .ks-hero-trust strong
    {
        font-size: 14px;
    }

    .ks-hero-trust span
    {
        font-size: 8px;
    }

    .ks-hero-visual
    {
        min-height: 500px;

        transform:
            scale(.82);
    }

    .ks-product-showcase
    {
        width: 340px;
    }

    .ks-floating-web
    {
        right: -25px;
    }

    .ks-floating-security
    {
        right: -15px;
    }

    .ks-device-mobile
    {
        left: -15px;
    }

    .ks-hero-scroll
    {
        display: none;
    }
}


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

@media (prefers-reduced-motion: reduce)
{
    .ks-home-hero *,
    .ks-home-hero *::before,
    .ks-home-hero *::after
    {
        animation-duration: .01ms !important;

        animation-iteration-count: 1 !important;

        scroll-behavior: auto !important;
    }
}
/* =========================================================
   TRUST SECTION
========================================================= */

.skr-trust-section
{
    position: relative;

    overflow: hidden;

    padding: 110px 0 120px;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f8fafc 100%
        );
}


/* ---------------------------------------------------------
   Background Orbs
--------------------------------------------------------- */

.skr-trust-orb
{
    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    filter: blur(2px);

    opacity: .55;

    animation: skrTrustFloat 9s ease-in-out infinite;
}


.skr-trust-orb-one
{
    width: 320px;

    height: 320px;

    top: -180px;

    left: -120px;

    background:
        radial-gradient(
            circle,
            rgba(37, 99, 235, .12) 0%,
            rgba(37, 99, 235, 0) 70%
        );
}


.skr-trust-orb-two
{
    width: 420px;

    height: 420px;

    right: -200px;

    bottom: -220px;

    background:
        radial-gradient(
            circle,
            rgba(99, 102, 241, .10) 0%,
            rgba(99, 102, 241, 0) 70%
        );

    animation-delay: -4s;
}


/* ---------------------------------------------------------
   Eyebrow
--------------------------------------------------------- */

.skr-section-eyebrow
{
    display: inline-flex;

    align-items: center;

    gap: 9px;

    padding: 8px 14px;

    border: 1px solid rgba(37, 99, 235, .12);

    border-radius: 50px;

    background: rgba(37, 99, 235, .05);

    color: #2563eb;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: .12em;

    text-transform: uppercase;
}


.skr-eyebrow-dot
{
    width: 7px;

    height: 7px;

    border-radius: 50%;

    background: #2563eb;

    box-shadow:
        0 0 0 5px rgba(37, 99, 235, .10);

    animation: skrTrustPulse 2s ease-in-out infinite;
}


/* ---------------------------------------------------------
   Heading
--------------------------------------------------------- */

.skr-trust-title
{
    margin-top: 24px;

    margin-bottom: 20px;

    color: #0f172a;

    font-size: clamp(
        2.2rem,
        4vw,
        4rem
    );

    line-height: 1.08;

    font-weight: 800;

    letter-spacing: -.045em;
}


.skr-trust-title span
{
    display: inline-block;

    color: #2563eb;

    position: relative;
}


.skr-trust-title span::after
{
    content: "";

    position: absolute;

    left: 0;

    right: 0;

    bottom: -6px;

    height: 3px;

    border-radius: 10px;

    background:
        linear-gradient(
            90deg,
            #2563eb,
            #6366f1
        );

    transform: scaleX(.65);

    transform-origin: left;

    opacity: .65;
}


/* ---------------------------------------------------------
   Description
--------------------------------------------------------- */

.skr-trust-description
{
    max-width: 760px;

    margin: 0 auto;

    color: #64748b;

    font-size: 17px;

    line-height: 1.8;
}


/* ---------------------------------------------------------
   Trust Cards
--------------------------------------------------------- */

.skr-trust-card
{
    position: relative;

    height: 100%;

    padding: 30px;

    border: 1px solid rgba(15, 23, 42, .07);

    border-radius: 24px;

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

    box-shadow:
        0 10px 40px rgba(15, 23, 42, .045);

    backdrop-filter: blur(14px);

    -webkit-backdrop-filter: blur(14px);

    overflow: hidden;

    transition:
        transform .45s cubic-bezier(.2,.8,.2,1),
        box-shadow .45s ease,
        border-color .45s ease;
}


.skr-trust-card::before
{
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            135deg,
            rgba(37, 99, 235, .07),
            transparent 55%
        );

    opacity: 0;

    transition: opacity .4s ease;
}


.skr-trust-card::after
{
    content: "";

    position: absolute;

    width: 120px;

    height: 120px;

    top: -70px;

    right: -70px;

    border-radius: 50%;

    background: rgba(37, 99, 235, .07);

    transition:
        transform .5s ease,
        background .5s ease;
}


.skr-trust-card:hover
{
    transform: translateY(-10px);

    border-color:
        rgba(37, 99, 235, .18);

    box-shadow:
        0 25px 60px rgba(15, 23, 42, .10);
}


.skr-trust-card:hover::before
{
    opacity: 1;
}


.skr-trust-card:hover::after
{
    transform: scale(2.4);

    background:
        rgba(37, 99, 235, .045);
}


/* ---------------------------------------------------------
   Icon
--------------------------------------------------------- */

.skr-trust-icon
{
    position: relative;

    z-index: 2;

    width: 58px;

    height: 58px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 25px;

    border-radius: 18px;

    color: #2563eb;

    background:
        linear-gradient(
            135deg,
            rgba(37, 99, 235, .13),
            rgba(99, 102, 241, .08)
        );

    font-size: 25px;

    transition:
        transform .4s ease,
        background .4s ease;
}


.skr-trust-card:hover .skr-trust-icon
{
    transform:
        translateY(-3px)
        rotate(-4deg);

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #4f46e5
        );

    color: #ffffff;
}


/* ---------------------------------------------------------
   Card Content
--------------------------------------------------------- */

.skr-trust-card-content
{
    position: relative;

    z-index: 2;
}


.skr-trust-card h3
{
    margin-bottom: 12px;

    color: #0f172a;

    font-size: 20px;

    font-weight: 750;

    letter-spacing: -.02em;
}


.skr-trust-card p
{
    margin: 0;

    color: #64748b;

    font-size: 14px;

    line-height: 1.75;
}


/* ---------------------------------------------------------
   Arrow
--------------------------------------------------------- */

.skr-trust-arrow
{
    position: absolute;

    right: 25px;

    bottom: 25px;

    width: 38px;

    height: 38px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    color: #64748b;

    background: #f8fafc;

    transition:
        transform .4s ease,
        background .4s ease,
        color .4s ease;
}


.skr-trust-card:hover .skr-trust-arrow
{
    transform:
        translate(3px, -3px);

    color: #ffffff;

    background: #2563eb;
}


/* ---------------------------------------------------------
   Capability Strip
--------------------------------------------------------- */

.skr-trust-strip
{
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 25px;

    padding: 20px 25px;

    border: 1px solid rgba(15, 23, 42, .07);

    border-radius: 18px;

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

    box-shadow:
        0 8px 30px rgba(15, 23, 42, .04);

    backdrop-filter: blur(12px);

    -webkit-backdrop-filter: blur(12px);
}


.skr-trust-strip-item
{
    display: flex;

    align-items: center;

    gap: 9px;

    color: #475569;

    font-size: 13px;

    font-weight: 650;

    white-space: nowrap;
}


.skr-trust-strip-item i
{
    color: #2563eb;

    font-size: 17px;
}


.skr-trust-strip-divider
{
    width: 1px;

    height: 25px;

    background: #e2e8f0;
}


/* ---------------------------------------------------------
   Animations
--------------------------------------------------------- */

@keyframes skrTrustFloat
{
    0%,
    100%
    {
        transform: translate3d(0, 0, 0);
    }

    50%
    {
        transform: translate3d(
            0,
            25px,
            0
        );
    }
}


@keyframes skrTrustPulse
{
    0%,
    100%
    {
        transform: scale(1);

        opacity: 1;
    }

    50%
    {
        transform: scale(1.25);

        opacity: .65;
    }
}


/* ---------------------------------------------------------
   Responsive
--------------------------------------------------------- */

@media (max-width: 991.98px)
{
    .skr-trust-section
    {
        padding: 85px 0 95px;
    }


    .skr-trust-title
    {
        font-size: 2.6rem;
    }


    .skr-trust-strip
    {
        flex-wrap: wrap;

        gap: 15px 22px;
    }


    .skr-trust-strip-divider
    {
        display: none;
    }
}


@media (max-width: 575.98px)
{
    .skr-trust-section
    {
        padding: 70px 0 80px;
    }


    .skr-trust-title
    {
        font-size: 2.15rem;

        letter-spacing: -.035em;
    }


    .skr-trust-description
    {
        font-size: 15px;
    }


    .skr-trust-card
    {
        padding: 25px;

        border-radius: 20px;
    }


    .skr-trust-strip
    {
        align-items: flex-start;

        flex-direction: column;

        padding: 20px;
    }


    .skr-trust-strip-item
    {
        white-space: normal;
    }
}


/* ---------------------------------------------------------
   Reduced Motion Accessibility
--------------------------------------------------------- */

@media (prefers-reduced-motion: reduce)
{
    .skr-trust-orb,
    .skr-eyebrow-dot
    {
        animation: none;
    }


    .skr-trust-card,
    .skr-trust-icon,
    .skr-trust-arrow
    {
        transition: none;
    }
}

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

.skr-services-section
{
    position: relative;

    overflow: hidden;

    padding: 120px 0;

    background: #ffffff;
}


/* ---------------------------------------------------------
   Background
--------------------------------------------------------- */

.skr-services-bg-grid
{
    position: absolute;

    inset: 0;

    pointer-events: none;

    opacity: .35;

    background-image:
        linear-gradient(
            rgba(15, 23, 42, .035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(15, 23, 42, .035) 1px,
            transparent 1px
        );

    background-size: 70px 70px;

    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
        );
}


.skr-services-glow
{
    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    filter: blur(2px);

    animation:
        skrServicesGlow 10s ease-in-out infinite;
}


.skr-services-glow-one
{
    width: 420px;

    height: 420px;

    top: 10%;

    left: -250px;

    background:
        radial-gradient(
            circle,
            rgba(37, 99, 235, .09),
            transparent 70%
        );
}


.skr-services-glow-two
{
    width: 500px;

    height: 500px;

    right: -300px;

    bottom: 0;

    background:
        radial-gradient(
            circle,
            rgba(99, 102, 241, .08),
            transparent 70%
        );

    animation-delay: -5s;
}


/* ---------------------------------------------------------
   Header
--------------------------------------------------------- */

.skr-services-title
{
    margin-top: 24px;

    margin-bottom: 0;

    color: #0f172a;

    font-size: clamp(
        2.3rem,
        4vw,
        4rem
    );

    line-height: 1.08;

    font-weight: 800;

    letter-spacing: -.045em;
}


.skr-services-title span
{
    display: block;

    color: #2563eb;
}


.skr-services-intro
{
    max-width: 520px;

    margin-left: auto;

    margin-bottom: 0;

    color: #64748b;

    font-size: 16px;

    line-height: 1.8;
}


/* ---------------------------------------------------------
   Main Shell
--------------------------------------------------------- */

.skr-services-shell
{
    position: relative;

    display: grid;

    grid-template-columns:
        310px
        minmax(0, 1fr);

    margin-top: 65px;

    min-height: 620px;

    border: 1px solid #e5e7eb;

    border-radius: 30px;

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

    box-shadow:
        0 30px 100px rgba(15, 23, 42, .08);

    overflow: hidden;

    backdrop-filter: blur(20px);

    -webkit-backdrop-filter: blur(20px);
}


/* ---------------------------------------------------------
   Navigation
--------------------------------------------------------- */

.skr-services-nav
{
    display: flex;

    flex-direction: column;

    padding: 22px;

    background:
        #f8fafc;

    border-right: 1px solid #e5e7eb;
}


.skr-service-tab
{
    position: relative;

    width: 100%;

    display: flex;

    align-items: center;

    gap: 14px;

    padding: 18px 15px;

    margin-bottom: 8px;

    border: 1px solid transparent;

    border-radius: 18px;

    background: transparent;

    text-align: left;

    color: #475569;

    cursor: pointer;

    transition:
        background .35s ease,
        border-color .35s ease,
        transform .35s ease,
        color .35s ease;
}


.skr-service-tab:hover
{
    color: #0f172a;

    background: #ffffff;

    transform: translateX(3px);
}


.skr-service-tab.active
{
    color: #0f172a;

    background: #ffffff;

    border-color:
        rgba(37, 99, 235, .12);

    box-shadow:
        0 10px 30px rgba(15, 23, 42, .06);

    transform: translateX(5px);
}


.skr-service-tab-icon
{
    flex: 0 0 46px;

    width: 46px;

    height: 46px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 14px;

    color: #64748b;

    background: #ffffff;

    font-size: 19px;

    transition:
        background .35s ease,
        color .35s ease,
        transform .35s ease;
}


.skr-service-tab.active
.skr-service-tab-icon
{
    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #4f46e5
        );

    transform: scale(1.05);
}


.skr-service-tab-content
{
    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: 4px;
}


.skr-service-tab-content strong
{
    font-size: 13px;

    line-height: 1.35;

    font-weight: 750;
}


.skr-service-tab-content small
{
    color: #94a3b8;

    font-size: 11px;

    line-height: 1.3;
}


.skr-service-tab-arrow
{
    margin-left: auto;

    opacity: 0;

    transform:
        translateX(-5px);

    transition:
        opacity .3s ease,
        transform .3s ease;
}


.skr-service-tab.active
.skr-service-tab-arrow
{
    opacity: 1;

    transform:
        translateX(0);

    color: #2563eb;
}


/* ---------------------------------------------------------
   Display
--------------------------------------------------------- */

.skr-services-display
{
    position: relative;

    min-width: 0;

    background: #ffffff;
}


.skr-service-panel
{
    display: none;

    height: 100%;

    padding: 65px;

    animation:
        skrServicePanelIn .55s
        cubic-bezier(.2,.8,.2,1);
}


.skr-service-panel.active
{
    display: block;
}


.skr-service-label
{
    display: inline-block;

    margin-bottom: 20px;

    color: #2563eb;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: .14em;
}


.skr-service-panel h3
{
    max-width: 570px;

    margin-bottom: 25px;

    color: #0f172a;

    font-size: clamp(
        2rem,
        3vw,
        3.2rem
    );

    line-height: 1.08;

    font-weight: 800;

    letter-spacing: -.045em;
}


.skr-service-description
{
    max-width: 600px;

    margin-bottom: 25px;

    color: #64748b;

    font-size: 15px;

    line-height: 1.85;
}


/* ---------------------------------------------------------
   Features
--------------------------------------------------------- */

.skr-service-features
{
    display: flex;

    flex-wrap: wrap;

    gap: 9px;

    margin-bottom: 30px;
}


.skr-service-features span
{
    display: inline-flex;

    align-items: center;

    gap: 7px;

    padding: 8px 12px;

    border: 1px solid #e2e8f0;

    border-radius: 50px;

    color: #475569;

    background: #f8fafc;

    font-size: 12px;

    font-weight: 650;
}


.skr-service-features i
{
    color: #2563eb;
}


/* ---------------------------------------------------------
   Buttons
--------------------------------------------------------- */

.skr-service-actions
{
    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 14px;
}


.skr-service-primary-btn
{
    display: inline-flex;

    align-items: center;

    gap: 12px;

    padding: 13px 19px;

    border-radius: 50px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #4f46e5
        );

    box-shadow:
        0 10px 25px rgba(37, 99, 235, .20);

    font-size: 13px;

    font-weight: 700;

    text-decoration: none;

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


.skr-service-primary-btn:hover
{
    color: #ffffff;

    transform:
        translateY(-3px);

    box-shadow:
        0 16px 35px rgba(37, 99, 235, .28);
}


.skr-service-secondary-btn
{
    padding: 12px 10px;

    color: #475569;

    font-size: 13px;

    font-weight: 700;

    text-decoration: none;

    transition: color .25s ease;
}


.skr-service-secondary-btn:hover
{
    color: #2563eb;
}


/* =========================================================
   MOBILE APP VISUAL
========================================================= */

.skr-service-visual
{
    position: relative;

    min-height: 450px;

    display: flex;

    align-items: center;

    justify-content: center;
}


.skr-device-glow
{
    position: absolute;

    width: 330px;

    height: 330px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(37, 99, 235, .16),
            transparent 68%
        );

    animation:
        skrVisualPulse 5s ease-in-out infinite;
}


.skr-phone
{
    position: relative;

    z-index: 3;

    width: 220px;

    height: 425px;

    padding: 8px;

    border: 7px solid #111827;

    border-radius: 36px;

    background: #111827;

    box-shadow:
        0 35px 80px rgba(15, 23, 42, .22);

    transform:
        rotate(5deg);

    animation:
        skrPhoneFloat 6s ease-in-out infinite;
}


.skr-phone-notch
{
    position: absolute;

    z-index: 5;

    top: 9px;

    left: 50%;

    width: 75px;

    height: 19px;

    border-radius: 20px;

    background: #111827;

    transform: translateX(-50%);
}


.skr-phone-screen
{
    height: 100%;

    padding: 24px 14px;

    overflow: hidden;

    border-radius: 25px;

    background:
        linear-gradient(
            180deg,
            #f8fafc,
            #eef4ff
        );
}


.skr-phone-status
{
    display: flex;

    justify-content: space-between;

    color: #64748b;

    font-size: 7px;

    font-weight: 700;
}


.skr-phone-header
{
    display: flex;

    justify-content: space-between;

    margin-top: 30px;

    color: #0f172a;

    font-size: 12px;

    font-weight: 800;
}


.skr-phone-card
{
    margin-top: 22px;

    padding: 16px;

    border-radius: 16px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #4f46e5
        );

    box-shadow:
        0 15px 30px rgba(37, 99, 235, .20);
}


.skr-phone-card small
{
    display: block;

    opacity: .75;

    font-size: 7px;
}


.skr-phone-card strong
{
    display: block;

    margin-top: 4px;

    font-size: 22px;
}


.skr-mini-chart
{
    display: flex;

    align-items: end;

    gap: 4px;

    height: 35px;

    margin-top: 12px;
}


.skr-mini-chart span
{
    flex: 1;

    border-radius: 5px 5px 2px 2px;

    background:
        rgba(255,255,255,.55);
}


.skr-mini-chart span:nth-child(1)
{
    height: 30%;
}


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


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


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


.skr-mini-chart span:nth-child(5)
{
    height: 55%;
}


.skr-mini-chart span:nth-child(6)
{
    height: 90%;
}


.skr-phone-row
{
    display: flex;

    justify-content: space-between;

    margin-top: 14px;

    padding: 10px;

    border-radius: 10px;

    background: #ffffff;

    color: #64748b;

    font-size: 8px;
}


.skr-phone-row strong
{
    color: #0f172a;
}


/* ---------------------------------------------------------
   Floating Badges
--------------------------------------------------------- */

.skr-floating-badge
{
    position: absolute;

    z-index: 5;

    display: flex;

    align-items: center;

    gap: 7px;

    padding: 9px 12px;

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

    border-radius: 50px;

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

    box-shadow:
        0 12px 30px rgba(15,23,42,.10);

    backdrop-filter: blur(12px);

    color: #334155;

    font-size: 10px;

    font-weight: 750;
}


.skr-floating-badge i
{
    color: #2563eb;

    font-size: 13px;
}


.skr-floating-badge-one
{
    top: 50px;

    right: 30px;

    animation:
        skrBadgeFloat 5s ease-in-out infinite;
}


.skr-floating-badge-two
{
    left: 10px;

    bottom: 95px;

    animation:
        skrBadgeFloat 6s ease-in-out infinite;

    animation-delay: -2s;
}


.skr-floating-badge-three
{
    right: 20px;

    bottom: 45px;

    animation:
        skrBadgeFloat 5.5s ease-in-out infinite;

    animation-delay: -3s;
}


/* =========================================================
   WEBSITE VISUAL
========================================================= */

.skr-web-visual
{
    perspective: 1200px;
}


.skr-browser
{
    position: relative;

    z-index: 3;

    width: min(520px, 100%);

    border: 1px solid #dbe3ef;

    border-radius: 18px;

    background: #ffffff;

    box-shadow:
        0 35px 80px rgba(15,23,42,.16);

    overflow: hidden;

    transform:
        rotateY(-7deg)
        rotateX(3deg);

    animation:
        skrBrowserFloat 7s ease-in-out infinite;
}


.skr-browser-bar
{
    display: flex;

    align-items: center;

    gap: 15px;

    padding: 11px 14px;

    border-bottom: 1px solid #e5e7eb;

    background: #f8fafc;
}


.skr-browser-dots
{
    display: flex;

    gap: 5px;
}


.skr-browser-dots span
{
    width: 7px;

    height: 7px;

    border-radius: 50%;

    background: #cbd5e1;
}


.skr-browser-address
{
    flex: 1;

    padding: 5px 10px;

    border-radius: 7px;

    background: #ffffff;

    color: #94a3b8;

    font-size: 7px;

    text-align: center;
}


.skr-browser-content
{
    min-height: 330px;

    padding: 25px;

    background:
        linear-gradient(
            135deg,
            #ffffff,
            #f1f5ff
        );
}


.skr-browser-nav
{
    display: flex;

    align-items: center;

    gap: 20px;

    color: #64748b;

    font-size: 8px;
}


.skr-browser-nav strong
{
    margin-right: auto;

    color: #2563eb;

    font-size: 13px;
}


.skr-browser-hero
{
    margin-top: 50px;
}


.skr-browser-hero small
{
    color: #2563eb;

    font-size: 7px;

    font-weight: 800;

    letter-spacing: .15em;
}


.skr-browser-hero strong
{
    display: block;

    margin-top: 10px;

    color: #0f172a;

    font-size: 36px;

    line-height: .95;

    letter-spacing: -.05em;
}


.skr-browser-line
{
    width: 110px;

    height: 5px;

    margin-top: 20px;

    border-radius: 10px;

    background:
        linear-gradient(
            90deg,
            #2563eb,
            #6366f1
        );
}


.skr-browser-cards
{
    display: flex;

    gap: 10px;

    margin-top: 30px;
}


.skr-browser-cards span
{
    flex: 1;

    height: 45px;

    border-radius: 8px;

    background: #ffffff;

    box-shadow:
        0 6px 20px rgba(15,23,42,.05);
}


.skr-floating-web-badge
{
    position: absolute;

    z-index: 5;

    right: 0;

    bottom: 40px;

    display: flex;

    align-items: center;

    gap: 8px;

    padding: 11px 15px;

    border-radius: 50px;

    background: #ffffff;

    box-shadow:
        0 15px 35px rgba(15,23,42,.12);

    color: #334155;

    font-size: 10px;

    font-weight: 750;

    animation:
        skrBadgeFloat 5s ease-in-out infinite;
}


.skr-floating-web-badge i
{
    color: #2563eb;

    font-size: 15px;
}


/* =========================================================
   WEB APPLICATION VISUAL
========================================================= */

.skr-webapp-visual
{
    perspective: 1000px;
}


.skr-dashboard-window
{
    display: flex;

    width: min(540px, 100%);

    min-height: 330px;

    border: 1px solid #dbe3ef;

    border-radius: 18px;

    background: #ffffff;

    box-shadow:
        0 35px 80px rgba(15,23,42,.14);

    overflow: hidden;

    transform:
        rotateY(-5deg)
        rotateX(3deg);

    animation:
        skrBrowserFloat 7s ease-in-out infinite;
}


.skr-dashboard-sidebar
{
    width: 65px;

    padding: 20px 13px;

    background: #0f172a;
}


.skr-dashboard-logo
{
    display: flex;

    align-items: center;

    justify-content: center;

    width: 38px;

    height: 38px;

    margin-bottom: 35px;

    border-radius: 11px;

    color: #ffffff;

    background: #2563eb;

    font-size: 15px;

    font-weight: 800;
}


.skr-dashboard-sidebar span
{
    display: block;

    width: 25px;

    height: 7px;

    margin: 20px auto;

    border-radius: 5px;

    background: #334155;
}


.skr-dashboard-main
{
    flex: 1;

    padding: 25px;

    background: #f8fafc;
}


.skr-dashboard-top
{
    display: flex;

    justify-content: space-between;

    align-items: center;

    color: #0f172a;

    font-size: 13px;
}


.skr-dashboard-top div
{
    width: 35px;

    height: 35px;

    border-radius: 50%;

    background: #e2e8f0;
}


.skr-dashboard-stats
{
    display: grid;

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

    gap: 12px;

    margin-top: 25px;
}


.skr-dashboard-stats div
{
    height: 75px;

    border: 1px solid #e2e8f0;

    border-radius: 12px;

    background: #ffffff;
}


.skr-dashboard-chart
{
    height: 140px;

    margin-top: 15px;

    padding: 20px;

    border: 1px solid #e2e8f0;

    border-radius: 12px;

    background: #ffffff;
}


.skr-chart-bars
{
    display: flex;

    align-items: end;

    gap: 12px;

    height: 100%;
}


.skr-chart-bars span
{
    flex: 1;

    border-radius: 4px 4px 0 0;

    background:
        linear-gradient(
            180deg,
            #2563eb,
            #93c5fd
        );

    animation:
        skrChartGrow 2s ease-out;
}


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


.skr-chart-bars span:nth-child(2)
{
    height: 55%;
}


.skr-chart-bars span:nth-child(3)
{
    height: 42%;
}


.skr-chart-bars span:nth-child(4)
{
    height: 72%;
}


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


.skr-chart-bars span:nth-child(6)
{
    height: 85%;
}


.skr-chart-bars span:nth-child(7)
{
    height: 95%;
}


.skr-floating-api
{
    position: absolute;

    right: 5px;

    bottom: 30px;

    padding: 10px 14px;

    border-radius: 50px;

    color: #334155;

    background: #ffffff;

    box-shadow:
        0 15px 35px rgba(15,23,42,.12);

    font-size: 10px;

    font-weight: 750;

    animation:
        skrBadgeFloat 5s ease-in-out infinite;
}


/* =========================================================
   BUSINESS SOFTWARE VISUAL
========================================================= */

.skr-software-visual
{
    min-height: 430px;
}


.skr-software-orbit
{
    position: absolute;

    width: 330px;

    height: 330px;

    border: 1px dashed rgba(37,99,235,.16);

    border-radius: 50%;
}


.orbit-one
{
    animation:
        skrOrbit 18s linear infinite;
}


.orbit-two
{
    width: 250px;

    height: 250px;

    animation:
        skrOrbitReverse 13s linear infinite;
}


.orbit-three
{
    width: 170px;

    height: 170px;

    animation:
        skrOrbit 9s linear infinite;
}


.skr-software-core
{
    position: absolute;

    z-index: 3;

    width: 100px;

    height: 100px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #4f46e5
        );

    box-shadow:
        0 20px 50px rgba(37,99,235,.30);

    font-size: 35px;

    animation:
        skrCorePulse 4s ease-in-out infinite;
}


.skr-software-node
{
    position: absolute;

    z-index: 5;

    width: 55px;

    height: 55px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid #e2e8f0;

    border-radius: 16px;

    color: #2563eb;

    background: #ffffff;

    box-shadow:
        0 12px 30px rgba(15,23,42,.10);

    font-size: 18px;

    animation:
        skrBadgeFloat 5s ease-in-out infinite;
}


.node-one
{
    top: 45px;

    left: 50px;
}


.node-two
{
    top: 40px;

    right: 40px;

    animation-delay: -2s;
}


.node-three
{
    bottom: 50px;

    left: 70px;

    animation-delay: -3s;
}


.node-four
{
    right: 65px;

    bottom: 55px;

    animation-delay: -1s;
}


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

.skr-services-bottom
{
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

    margin-top: 30px;

    padding: 30px 35px;

    border-radius: 22px;

    background:
        linear-gradient(
            135deg,
            #0f172a,
            #172554
        );

    color: #ffffff;

    box-shadow:
        0 25px 60px rgba(15,23,42,.14);
}


.skr-services-bottom span
{
    display: block;

    margin-bottom: 6px;

    color: #93c5fd;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: .12em;
}


.skr-services-bottom strong
{
    font-size: 19px;

    font-weight: 700;

    letter-spacing: -.02em;
}


.skr-services-cta
{
    display: inline-flex;

    align-items: center;

    gap: 10px;

    flex-shrink: 0;

    padding: 13px 20px;

    border-radius: 50px;

    color: #0f172a;

    background: #ffffff;

    font-size: 13px;

    font-weight: 750;

    text-decoration: none;

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


.skr-services-cta:hover
{
    color: #0f172a;

    transform: translateY(-3px);

    box-shadow:
        0 12px 30px rgba(255,255,255,.15);
}


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

@keyframes skrServicePanelIn
{
    from
    {
        opacity: 0;

        transform:
            translateY(18px)
            scale(.985);
    }

    to
    {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }
}


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

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


@keyframes skrBrowserFloat
{
    0%,
    100%
    {
        transform:
            rotateY(-7deg)
            rotateX(3deg)
            translateY(0);
    }

    50%
    {
        transform:
            rotateY(-5deg)
            rotateX(2deg)
            translateY(-10px);
    }
}


@keyframes skrBadgeFloat
{
    0%,
    100%
    {
        transform:
            translateY(0);
    }

    50%
    {
        transform:
            translateY(-10px);
    }
}


@keyframes skrVisualPulse
{
    0%,
    100%
    {
        transform: scale(1);

        opacity: .7;
    }

    50%
    {
        transform: scale(1.12);

        opacity: 1;
    }
}


@keyframes skrServicesGlow
{
    0%,
    100%
    {
        transform: translate(0, 0);
    }

    50%
    {
        transform: translate(30px, -20px);
    }
}


@keyframes skrChartGrow
{
    from
    {
        transform:
            scaleY(0);

        transform-origin:
            bottom;
    }

    to
    {
        transform:
            scaleY(1);

        transform-origin:
            bottom;
    }
}


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

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


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

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


@keyframes skrCorePulse
{
    0%,
    100%
    {
        transform: scale(1);

        box-shadow:
            0 20px 50px rgba(37,99,235,.30);
    }

    50%
    {
        transform: scale(1.06);

        box-shadow:
            0 25px 65px rgba(37,99,235,.40);
    }
}


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

@media (max-width: 1199.98px)
{
    .skr-services-shell
    {
        grid-template-columns:
            270px
            minmax(0, 1fr);
    }


    .skr-service-panel
    {
        padding: 45px;
    }
}


@media (max-width: 991.98px)
{
    .skr-services-section
    {
        padding: 90px 0;
    }


    .skr-services-title
    {
        font-size: 2.8rem;
    }


    .skr-services-intro
    {
        margin-left: 0;
    }


    .skr-services-shell
    {
        display: block;

        min-height: 0;
    }


    .skr-services-nav
    {
        display: grid;

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

        gap: 8px;

        border-right: 0;

        border-bottom: 1px solid #e5e7eb;
    }


    .skr-service-tab
    {
        margin-bottom: 0;
    }


    .skr-service-panel
    {
        padding: 45px 35px;
    }


    .skr-service-visual
    {
        min-height: 400px;

        margin-top: 20px;
    }


    .skr-services-bottom
    {
        flex-direction: column;

        align-items: flex-start;
    }
}


@media (max-width: 575.98px)
{
    .skr-services-section
    {
        padding: 70px 0;
    }


    .skr-services-title
    {
        font-size: 2.2rem;
    }


    .skr-services-shell
    {
        border-radius: 22px;
    }


    .skr-services-nav
    {
        grid-template-columns: 1fr;

        padding: 12px;
    }


    .skr-service-tab
    {
        padding: 13px;
    }


    .skr-service-tab-icon
    {
        width: 40px;

        height: 40px;

        flex-basis: 40px;
    }


    .skr-service-panel
    {
        padding: 35px 20px;
    }


    .skr-service-panel h3
    {
        font-size: 2rem;
    }


    .skr-service-description
    {
        font-size: 14px;
    }


    .skr-service-primary-btn
    {
        width: 100%;

        justify-content: center;

        text-align: center;
    }


    .skr-service-secondary-btn
    {
        padding-left: 5px;
    }


    .skr-service-visual
    {
        min-height: 330px;
    }


    .skr-phone
    {
        width: 170px;

        height: 330px;
    }


    .skr-floating-badge-one
    {
        top: 20px;

        right: 0;
    }


    .skr-floating-badge-two
    {
        left: 0;

        bottom: 55px;
    }


    .skr-floating-badge-three
    {
        right: 0;

        bottom: 20px;
    }


    .skr-browser-content
    {
        min-height: 250px;

        padding: 18px;
    }


    .skr-browser-hero
    {
        margin-top: 35px;
    }


    .skr-browser-hero strong
    {
        font-size: 28px;
    }


    .skr-dashboard-window
    {
        min-height: 260px;
    }


    .skr-dashboard-sidebar
    {
        width: 48px;

        padding: 15px 8px;
    }


    .skr-dashboard-logo
    {
        width: 32px;

        height: 32px;
    }


    .skr-dashboard-main
    {
        padding: 15px;
    }


    .skr-dashboard-stats
    {
        gap: 6px;
    }


    .skr-dashboard-chart
    {
        padding: 12px;
    }


    .skr-software-orbit
    {
        width: 260px;

        height: 260px;
    }


    .orbit-two
    {
        width: 195px;

        height: 195px;
    }


    .orbit-three
    {
        width: 135px;

        height: 135px;
    }


    .skr-software-core
    {
        width: 80px;

        height: 80px;

        font-size: 28px;
    }


    .skr-software-node
    {
        width: 45px;

        height: 45px;

        font-size: 15px;
    }


    .node-one
    {
        top: 25px;

        left: 25px;
    }


    .node-two
    {
        top: 25px;

        right: 20px;
    }


    .node-three
    {
        bottom: 30px;

        left: 35px;
    }


    .node-four
    {
        right: 30px;

        bottom: 30px;
    }


    .skr-services-bottom
    {
        padding: 25px;

        border-radius: 18px;
    }


    .skr-services-bottom strong
    {
        font-size: 16px;
    }


    .skr-services-cta
    {
        width: 100%;

        justify-content: center;
    }
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce)
{
    .skr-services-glow,
    .skr-phone,
    .skr-browser,
    .skr-dashboard-window,
    .skr-floating-badge,
    .skr-floating-web-badge,
    .skr-floating-api,
    .skr-software-orbit,
    .skr-software-core,
    .skr-software-node
    {
        animation: none !important;
    }


    .skr-service-panel
    {
        animation: none;
    }
}
/* =========================================================
   SOLUTIONS SECTION
========================================================= */

.kss-solutions-section
{
    position: relative;

    padding: 115px 0;

    background:
        linear-gradient(
            180deg,
            #f8fafc 0%,
            #ffffff 100%
        );

    overflow: hidden;
}


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

.kss-solutions-intro
{
    max-width: 520px;

    margin: 0 0 5px auto;

    color: #64748b;

    font-size: 16px;
    line-height: 1.8;
}


/* =========================================================
   SOLUTION CARD
========================================================= */

.kss-solution-card
{
    position: relative;

    height: 100%;

    padding: 34px;

    overflow: hidden;

    border: 1px solid #e5eaf1;
    border-radius: 26px;

    background: #ffffff;

    box-shadow:
        0 8px 35px rgba(15, 23, 42, .045);

    transition:
        transform .45s cubic-bezier(.2,.8,.2,1),
        box-shadow .45s ease,
        border-color .45s ease;
}

.kss-solution-card:hover
{
    transform: translateY(-8px);

    border-color: rgba(37, 99, 235, .22);

    box-shadow:
        0 25px 65px rgba(15, 23, 42, .10);
}


/* =========================================================
   LARGE CARD
========================================================= */

.kss-solution-large
{
    min-height: 290px;

    display: flex;
    flex-direction: column;
}


/* =========================================================
   NUMBER
========================================================= */

.kss-solution-number
{
    position: absolute;

    top: 25px;
    right: 30px;

    color: #e2e8f0;

    font-size: 42px;
    line-height: 1;

    font-weight: 900;

    letter-spacing: -2px;

    transition:
        color .4s ease,
        transform .4s ease;
}

.kss-solution-card:hover
.kss-solution-number
{
    color: #dbeafe;

    transform: translateY(-3px);
}


/* =========================================================
   ICON
========================================================= */

.kss-solution-icon
{
    width: 62px;
    height: 62px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 25px;

    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            #eff6ff,
            #eef2ff
        );

    color: #2563eb;

    font-size: 24px;

    transition:
        transform .45s ease,
        background .45s ease,
        color .45s ease;
}

.kss-solution-card:hover
.kss-solution-icon
{
    transform:
        rotate(-5deg)
        scale(1.06);

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #4f46e5
        );

    color: #ffffff;
}


/* =========================================================
   BODY
========================================================= */

.kss-solution-body
{
    position: relative;
    z-index: 2;
}

.kss-solution-body h3
{
    margin-bottom: 13px;

    color: #111827;

    font-size: 23px;
    line-height: 1.25;

    font-weight: 800;

    letter-spacing: -.5px;
}

.kss-solution-body p
{
    max-width: 620px;

    margin-bottom: 20px;

    color: #64748b;

    font-size: 14px;
    line-height: 1.75;
}


/* =========================================================
   TAGS
========================================================= */

.kss-solution-tags
{
    display: flex;
    flex-wrap: wrap;

    gap: 8px;
}

.kss-solution-tags span
{
    padding: 6px 11px;

    border: 1px solid #e8edf5;

    border-radius: 50px;

    background: #f8fafc;

    color: #64748b;

    font-size: 11px;
    font-weight: 700;

    transition:
        background .3s ease,
        color .3s ease,
        border-color .3s ease;
}

.kss-solution-card:hover
.kss-solution-tags span
{
    border-color: #dbeafe;

    background: #eff6ff;

    color: #2563eb;
}


/* =========================================================
   ARROW
========================================================= */

.kss-solution-arrow
{
    position: absolute;

    right: 30px;
    bottom: 28px;

    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid #e5eaf1;
    border-radius: 50%;

    color: #64748b;

    transition:
        transform .35s ease,
        background .35s ease,
        color .35s ease,
        border-color .35s ease;
}

.kss-solution-card:hover
.kss-solution-arrow
{
    transform: rotate(45deg);

    border-color: #2563eb;

    background: #2563eb;

    color: #ffffff;
}


/* =========================================================
   SMALL CARD LINK
========================================================= */

.kss-solution-link
{
    display: inline-flex;
    align-items: center;
    gap: 8px;

    color: #2563eb;

    font-size: 13px;
    font-weight: 800;

    text-decoration: none;

    transition: gap .3s ease;
}

.kss-solution-link:hover
{
    gap: 12px;

    color: #1d4ed8;
}


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

.kss-solutions-cta
{
    position: relative;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 30px;

    margin-top: 60px;

    padding: 35px 40px;

    overflow: hidden;

    border-radius: 26px;

    background:
        linear-gradient(
            110deg,
            #0f172a,
            #172554
        );

    box-shadow:
        0 20px 55px rgba(15, 23, 42, .16);
}

.kss-solutions-cta::after
{
    content: "";

    position: absolute;

    width: 260px;
    height: 260px;

    right: -100px;
    top: -140px;

    border-radius: 50%;

    background: rgba(59, 130, 246, .18);

    filter: blur(10px);
}

.kss-solutions-cta-content
{
    position: relative;
    z-index: 2;
}

.kss-solutions-cta-content span
{
    display: block;

    margin-bottom: 7px;

    color: #93c5fd;

    font-size: 13px;
    font-weight: 700;
}

.kss-solutions-cta-content h3
{
    margin: 0;

    color: #ffffff;

    font-size: 25px;
    line-height: 1.3;

    font-weight: 800;

    letter-spacing: -.5px;
}

.kss-solutions-cta-button
{
    position: relative;
    z-index: 2;

    display: inline-flex;
    align-items: center;
    gap: 10px;

    white-space: nowrap;

    padding: 14px 23px;

    border-radius: 50px;

    background: #ffffff;

    color: #111827;

    font-size: 13px;
    font-weight: 800;

    text-decoration: none;

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

.kss-solutions-cta-button:hover
{
    transform: translateY(-3px);

    color: #111827;

    box-shadow:
        0 12px 30px rgba(0, 0, 0, .20);
}


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

@media (max-width: 991px)
{
    .kss-solutions-section
    {
        padding: 85px 0;
    }

    .kss-solutions-intro
    {
        margin: 0;
    }

    .kss-solutions-cta
    {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 575px)
{
    .kss-solutions-section
    {
        padding: 65px 0;
    }

    .kss-solution-card
    {
        padding: 27px;

        border-radius: 22px;
    }

    .kss-solution-large
    {
        min-height: 0;
    }

    .kss-solution-number
    {
        font-size: 32px;
    }

    .kss-solution-body h3
    {
        font-size: 21px;
    }

    .kss-solutions-cta
    {
        padding: 28px;
        border-radius: 22px;
    }

    .kss-solutions-cta-content h3
    {
        font-size: 21px;
    }

    .kss-solutions-cta-button
    {
        width: 100%;

        justify-content: center;
    }
}
/* =========================================================
   INDUSTRIES SECTION
========================================================= */

.kss-industries-section
{
    position: relative;

    padding: 120px 0;

    background: #ffffff;

    overflow: hidden;
}


/* =========================================================
   INDUSTRIES PANEL
========================================================= */

.kss-industries-panel
{
    display: grid;

    grid-template-columns: 330px minmax(0, 1fr);

    min-height: 620px;

    overflow: hidden;

    border: 1px solid #e5eaf1;
    border-radius: 30px;

    background: #ffffff;

    box-shadow:
        0 25px 80px rgba(15, 23, 42, .07);
}


/* =========================================================
   LEFT NAVIGATION
========================================================= */

.kss-industries-navigation
{
    padding: 28px 18px;

    border-right: 1px solid #e8edf5;

    background:
        linear-gradient(
            180deg,
            #f8fafc,
            #ffffff
        );
}

.kss-industries-navigation-label
{
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0 12px 18px;

    color: #94a3b8;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.kss-industries-navigation-label i
{
    font-size: 14px;
}


/* =========================================================
   INDUSTRY TAB
========================================================= */

.kss-industry-tab
{
    position: relative;

    width: 100%;

    display: flex;
    align-items: center;

    gap: 13px;

    padding: 14px 12px;

    margin-bottom: 6px;

    border: 1px solid transparent;
    border-radius: 16px;

    background: transparent;

    color: #475569;

    text-align: left;

    cursor: pointer;

    transition:
        background .3s ease,
        border-color .3s ease,
        transform .3s ease,
        color .3s ease;
}

.kss-industry-tab:hover
{
    transform: translateX(3px);

    background: #f8fafc;

    color: #111827;
}

.kss-industry-tab.active
{
    border-color: #dbeafe;

    background: #eff6ff;

    color: #111827;

    box-shadow:
        0 8px 25px rgba(37, 99, 235, .07);
}


/* =========================================================
   TAB ICON
========================================================= */

.kss-industry-tab-icon
{
    flex: 0 0 auto;

    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 12px;

    background: #ffffff;

    color: #64748b;

    font-size: 17px;

    box-shadow:
        0 4px 15px rgba(15, 23, 42, .05);

    transition:
        background .3s ease,
        color .3s ease;
}

.kss-industry-tab.active
.kss-industry-tab-icon
{
    background: #2563eb;

    color: #ffffff;
}


/* =========================================================
   TAB CONTENT
========================================================= */

.kss-industry-tab-content
{
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 3px;
}

.kss-industry-tab-content strong
{
    color: inherit;

    font-size: 13px;
    font-weight: 800;
}

.kss-industry-tab-content small
{
    color: #94a3b8;

    font-size: 10px;

    line-height: 1.3;
}


/* =========================================================
   TAB ARROW
========================================================= */

.kss-industry-tab-arrow
{
    margin-left: auto;

    color: #cbd5e1;

    font-size: 14px;

    transition:
        transform .3s ease,
        color .3s ease;
}

.kss-industry-tab.active
.kss-industry-tab-arrow
{
    color: #2563eb;

    transform: translateX(3px);
}


/* =========================================================
   DISPLAY
========================================================= */

.kss-industries-display
{
    position: relative;

    min-width: 0;

    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(37, 99, 235, .08),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #ffffff,
            #f8fbff
        );
}


/* =========================================================
   INDUSTRY PANEL
========================================================= */

.kss-industry-panel
{
    position: absolute;

    inset: 0;

    display: flex;
    flex-direction: column;

    padding: 46px;

    opacity: 0;
    visibility: hidden;

    transform: translateX(25px);

    transition:
        opacity .45s ease,
        transform .45s ease,
        visibility .45s ease;
}

.kss-industry-panel.active
{
    position: relative;

    opacity: 1;
    visibility: visible;

    transform: translateX(0);
}


/* =========================================================
   BACKGROUND NUMBER
========================================================= */

.kss-industry-background-number
{
    position: absolute;

    right: 35px;
    top: 25px;

    color: #f1f5f9;

    font-size: 130px;
    line-height: 1;

    font-weight: 900;

    letter-spacing: -8px;

    pointer-events: none;
}


/* =========================================================
   TOP
========================================================= */

.kss-industry-display-top
{
    position: relative;
    z-index: 2;

    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 20px;
}

.kss-industry-display-badge
{
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 8px 12px;

    border: 1px solid #dbeafe;
    border-radius: 50px;

    background: #eff6ff;

    color: #2563eb;

    font-size: 11px;
    font-weight: 800;
}

.kss-industry-display-status
{
    display: inline-flex;
    align-items: center;
    gap: 7px;

    color: #64748b;

    font-size: 10px;
    font-weight: 700;
}

.kss-industry-display-status i
{
    color: #22c55e;

    font-size: 7px;
}


/* =========================================================
   DISPLAY CONTENT
========================================================= */

.kss-industry-display-content
{
    position: relative;
    z-index: 2;

    flex: 1;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        250px;

    align-items: center;

    gap: 35px;
}

.kss-industry-display-content h3
{
    margin-bottom: 18px;

    color: #111827;

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

    line-height: 1.05;

    font-weight: 850;

    letter-spacing: -2px;
}

.kss-industry-display-content p
{
    max-width: 590px;

    margin-bottom: 25px;

    color: #64748b;

    font-size: 15px;
    line-height: 1.85;
}


/* =========================================================
   DISPLAY LINK
========================================================= */

.kss-industry-display-link
{
    display: inline-flex;
    align-items: center;
    gap: 9px;

    padding: 13px 19px;

    border-radius: 50px;

    background: #111827;

    color: #ffffff;

    font-size: 12px;
    font-weight: 800;

    text-decoration: none;

    transition:
        transform .3s ease,
        background .3s ease;
}

.kss-industry-display-link:hover
{
    transform: translateY(-3px);

    background: #2563eb;

    color: #ffffff;
}


/* =========================================================
   INDUSTRY VISUAL
========================================================= */

.kss-industry-visual
{
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 230px;
}

.kss-industry-core
{
    width: 150px;
    height: 150px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid #dbeafe;
    border-radius: 42px;

    background:
        linear-gradient(
            135deg,
            #ffffff,
            #eff6ff
        );

    color: #2563eb;

    font-size: 55px;

    box-shadow:
        0 25px 60px rgba(37, 99, 235, .12);

    animation:
        kssIndustryFloat 4s ease-in-out infinite;
}

@keyframes kssIndustryFloat
{
    0%,
    100%
    {
        transform: translateY(0);
    }

    50%
    {
        transform: translateY(-10px);
    }
}


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

.kss-industry-orbit
{
    position: relative;

    width: 220px;
    height: 220px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.kss-industry-orbit::before,
.kss-industry-orbit::after
{
    content: "";

    position: absolute;

    border: 1px dashed #bfdbfe;

    border-radius: 50%;

    animation:
        kssOrbitSpin 14s linear infinite;
}

.kss-industry-orbit::before
{
    width: 190px;
    height: 190px;
}

.kss-industry-orbit::after
{
    width: 220px;
    height: 220px;

    opacity: .45;

    animation-duration: 20s;
    animation-direction: reverse;
}

.kss-orbit-dot
{
    position: absolute;

    width: 10px;
    height: 10px;

    border-radius: 50%;

    background: #2563eb;

    box-shadow:
        0 0 0 6px rgba(37, 99, 235, .08);
}

.dot-one
{
    top: 18px;
    left: 50%;

    transform: translateX(-50%);
}

.dot-two
{
    right: 17px;
    bottom: 50px;
}

.dot-three
{
    left: 20px;
    bottom: 52px;
}

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

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


/* =========================================================
   CAPABILITIES
========================================================= */

.kss-industry-capabilities
{
    position: relative;
    z-index: 2;

    display: flex;
    flex-wrap: wrap;

    gap: 9px;
}

.kss-industry-capabilities span
{
    display: inline-flex;
    align-items: center;
    gap: 7px;

    padding: 8px 12px;

    border: 1px solid #e5eaf1;
    border-radius: 50px;

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

    color: #64748b;

    font-size: 11px;
    font-weight: 700;

    backdrop-filter: blur(10px);
}

.kss-industry-capabilities i
{
    color: #2563eb;
}


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

.kss-industries-global
{
    display: flex;
    align-items: center;

    gap: 18px;

    margin-top: 32px;

    padding: 22px 26px;

    border: 1px solid #e5eaf1;
    border-radius: 20px;

    background: #ffffff;

    box-shadow:
        0 10px 35px rgba(15, 23, 42, .04);
}

.kss-industries-global-icon
{
    flex: 0 0 auto;

    width: 52px;
    height: 52px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 16px;

    background: #eff6ff;

    color: #2563eb;

    font-size: 22px;
}

.kss-industries-global div:not(.kss-industries-global-icon)
{
    display: flex;
    flex-direction: column;

    gap: 3px;
}

.kss-industries-global span
{
    color: #94a3b8;

    font-size: 11px;
    font-weight: 700;
}

.kss-industries-global strong
{
    color: #111827;

    font-size: 16px;
}

.kss-industries-global-link
{
    display: inline-flex;
    align-items: center;
    gap: 8px;

    margin-left: auto;

    color: #2563eb;

    font-size: 13px;
    font-weight: 800;

    text-decoration: none;

    white-space: nowrap;
}

.kss-industries-global-link:hover
{
    color: #1d4ed8;
}


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

@media (max-width: 991px)
{
    .kss-industries-section
    {
        padding: 85px 0;
    }

    .kss-industries-panel
    {
        grid-template-columns: 1fr;
    }

    .kss-industries-navigation
    {
        display: grid;

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

        gap: 6px;

        border-right: 0;
        border-bottom: 1px solid #e8edf5;
    }

    .kss-industries-navigation-label
    {
        grid-column: 1 / -1;
    }

    .kss-industry-tab
    {
        margin: 0;
    }

    .kss-industry-panel
    {
        padding: 35px;
    }

    .kss-industry-display-content
    {
        grid-template-columns: 1fr 180px;
    }

    .kss-industry-core
    {
        width: 125px;
        height: 125px;

        font-size: 45px;
    }

    .kss-industry-orbit
    {
        transform: scale(.8);
    }
}

@media (max-width: 767px)
{
    .kss-industries-section
    {
        padding: 70px 0;
    }

    .kss-industries-navigation
    {
        grid-template-columns: 1fr;
    }

    .kss-industry-tab
    {
        padding: 12px;
    }

    .kss-industry-display-content
    {
        grid-template-columns: 1fr;
    }

    .kss-industry-visual
    {
        display: none;
    }

    .kss-industry-display-content h3
    {
        font-size: 38px;
    }

    .kss-industry-background-number
    {
        font-size: 90px;
    }

    .kss-industries-global
    {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .kss-industries-global-link
    {
        width: 100%;
        margin-left: 0;
    }
}

@media (max-width: 575px)
{
    .kss-industries-panel
    {
        border-radius: 22px;
    }

    .kss-industry-panel
    {
        padding: 27px;
    }

    .kss-industry-display-top
    {
        align-items: flex-start;
        flex-direction: column;
    }

    .kss-industry-display-content h3
    {
        font-size: 32px;

        letter-spacing: -1px;
    }

    .kss-industry-display-content p
    {
        font-size: 14px;
    }

    .kss-industries-global
    {
        padding: 20px;
    }
}

/* ============================================================
   PREMIUM NAVBAR DROPDOWNS
============================================================ */

.services-menu,
.solutions-menu {

    border: 1px solid #e8edf6;

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

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    box-shadow:
        0 24px 70px rgba(30, 45, 80, 0.12),
        0 8px 24px rgba(30, 45, 80, 0.06);

    overflow: hidden;

    animation: navMenuIn .18s ease-out;
}


@keyframes navMenuIn {

    from {
        opacity: 0;
        transform: translateY(-7px) scale(.985);
    }

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

}


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

.services-menu {

    width: 430px;

    padding: 12px;

    border-radius: 20px;

}


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

.services-menu-header {

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 12px 12px 14px;

    margin-bottom: 2px;

}


.services-menu-header-icon {

    width: 42px;
    height: 42px;

    display: flex;

    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            #315cf5,
            #5578ff
        );

    color: #fff;

    font-size: 18px;

    box-shadow:
        0 8px 20px rgba(49, 92, 245, .20);

}


.services-menu-header > div:last-child {

    display: flex;

    flex-direction: column;

    gap: 2px;

}


.services-menu-header strong {

    font-size: 13px;

    font-weight: 700;

    color: #151a2a;

}


.services-menu-header span {

    font-size: 11px;

    color: #8a94a7;

}


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

.services-menu-item {

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 10px;

    border-radius: 12px;

    text-decoration: none;

    transition:
        background .2s ease,
        transform .2s ease;

}


.services-menu-item:hover {

    background: #f5f7ff;

    transform: translateX(2px);

}


/* ============================================================
   SERVICES ITEM ICON
============================================================ */

.services-item-icon {

    width: 36px;
    height: 36px;

    display: flex;

    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    border-radius: 10px;

    background: #f5f7fb;

    color: #64748b;

    font-size: 15px;

    transition:
        background .2s ease,
        color .2s ease;

}


.services-menu-item:hover .services-item-icon {

    background: #e9efff;

    color: #315cf5;

}


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

.services-item-content {

    display: flex;

    flex-direction: column;

    gap: 2px;

    flex: 1;

}


.services-item-content strong {

    font-size: 13px;

    line-height: 1.3;

    font-weight: 650;

    color: #202636;

}


.services-item-content small {

    font-size: 11px;

    line-height: 1.35;

    color: #8b95a7;

}


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

.services-item-arrow {

    color: #b8c0ce;

    font-size: 13px;

    opacity: 0;

    transform: translateX(-4px);

    transition:
        opacity .2s ease,
        transform .2s ease,
        color .2s ease;

}


.services-menu-item:hover .services-item-arrow {

    opacity: 1;

    transform: translateX(0);

    color: #315cf5;

}


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

.services-menu-footer {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

    margin-top: 8px;

    padding: 12px 13px;

    border-radius: 12px;

    background: #f6f8ff;

    border: 1px solid #e6ebff;

}


.services-menu-footer span {

    display: flex;

    align-items: center;

    gap: 7px;

    font-size: 11px;

    color: #697386;

}


.services-menu-footer span i {

    color: #315cf5;

}


.services-menu-footer a {

    display: inline-flex;

    align-items: center;

    gap: 5px;

    white-space: nowrap;

    font-size: 11px;

    font-weight: 700;

    color: #315cf5;

    text-decoration: none;

}


.services-menu-footer a i {

    transition: transform .2s ease;

}


.services-menu-footer a:hover i {

    transform: translateX(3px);

}


/* ============================================================
   SOLUTIONS MENU
============================================================ */

.solutions-menu {

    width: 390px;

    padding: 12px;

    border-radius: 20px;

}


/* ============================================================
   SOLUTIONS HEADER
============================================================ */

.solutions-menu-header {

    display: flex;

    align-items: center;

    gap: 11px;

    padding: 11px 12px 13px;

}


.solutions-menu-icon {

    width: 40px;
    height: 40px;

    display: flex;

    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    border-radius: 11px;

    background: #eef3ff;

    color: #315cf5;

}


.solutions-menu-header > span:last-child {

    display: flex;

    flex-direction: column;

    gap: 2px;

}


.solutions-menu-header strong {

    font-size: 13px;

    color: #151a2a;

}


.solutions-menu-header small {

    font-size: 11px;

    color: #8b95a7;

}


/* ============================================================
   SOLUTION ITEM
============================================================ */

.solutions-menu-item {

    display: flex;

    align-items: center;

    gap: 11px;

    padding: 9px 10px;

    border-radius: 11px;

    text-decoration: none;

    transition:
        background .2s ease,
        transform .2s ease;

}


.solutions-menu-item:hover {

    background: #f5f7ff;

    transform: translateX(2px);

}


/* ============================================================
   SOLUTION ICON
============================================================ */

.solutions-item-icon {

    width: 34px;
    height: 34px;

    display: flex;

    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    border-radius: 9px;

    background: #f6f8fb;

    color: #64748b;

    font-size: 14px;

}


.solutions-menu-item:hover .solutions-item-icon {

    background: #eaf0ff;

    color: #315cf5;

}


/* ============================================================
   SOLUTION CONTENT
============================================================ */

.solutions-item-content {

    display: flex;

    flex-direction: column;

    gap: 1px;

    flex: 1;

}


.solutions-item-content strong {

    font-size: 12px;

    font-weight: 650;

    color: #202636;

}


.solutions-item-content small {

    font-size: 10px;

    color: #8b95a7;

}


/* ============================================================
   SOLUTION ARROW
============================================================ */

.solutions-item-arrow {

    font-size: 12px;

    color: #b8c0ce;

    opacity: 0;

    transform: translateX(-3px);

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

}


.solutions-menu-item:hover .solutions-item-arrow {

    opacity: 1;

    transform: translateX(0);

    color: #315cf5;

}


/* ============================================================
   SOLUTIONS DIVIDER
============================================================ */

.solutions-menu-divider {

    height: 1px;

    margin: 6px 8px;

    background: #edf0f5;

}


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

.nav-cta {

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 7px;

}


.nav-cta i {

    font-size: 12px;

    transition: transform .2s ease;

}


.nav-cta:hover i {

    transform: translate(2px, -2px);

}


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

@media (max-width: 991.98px) {

    .services-menu,
    .solutions-menu {

        width: 100%;

        max-width: none;

        border-radius: 15px;

        box-shadow:
            0 15px 35px rgba(30,45,80,.10);

    }


    .services-menu-item,
    .solutions-menu-item {

        padding: 12px 10px;

    }


    .services-item-arrow,
    .solutions-item-arrow {

        opacity: 1;

        transform: none;

    }


    .services-menu-footer {

        align-items: flex-start;

        flex-direction: column;

    }

}
/* =========================================================
   KRISHNA SOFTWARE SOLUTION
   PREMIUM NAVBAR
   ========================================================= */

.ks-site-header {
    position: relative;
    z-index: 1050;
}


/* ---------------------------------------------------------
   Navbar
   --------------------------------------------------------- */

.ks-navbar {
    min-height: 78px;
    background: rgba(255, 255, 255, 0.96);
    border-bottom: 1px solid rgba(15, 23, 42, 0.07);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}


.ks-navbar-container {
    min-height: 78px;

    /*
     * VERY IMPORTANT:
     * Keep the desktop navbar in one horizontal row.
     */
    display: flex;
    align-items: center;
}


/* ---------------------------------------------------------
   Brand
   --------------------------------------------------------- */

.ks-navbar-brand {
    display: inline-flex !important;
    align-items: center;

    gap: 12px;

    margin: 0;
    padding: 0 !important;

    text-decoration: none;

    flex-shrink: 0;
}


.ks-brand-logo-wrap {
    width: 48px;
    height: 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;
}


.ks-brand-logo {
    width: 48px;
    height: 48px;

    object-fit: contain;

    display: block;
}


.ks-brand-content {
    display: flex;
    flex-direction: column;

    line-height: 1.1;
}


.ks-brand-name {
    color: #111827;

    font-size: 17px;
    font-weight: 750;

    letter-spacing: -0.35px;

    white-space: nowrap;
}


.ks-brand-tagline {
    margin-top: 5px;

    color: #8290a5;

    font-size: 11px;
    font-weight: 500;

    letter-spacing: 0.15px;

    white-space: nowrap;
}


/* ---------------------------------------------------------
   Desktop Navigation
   --------------------------------------------------------- */

.ks-navbar-collapse {
    /*
     * Do NOT make this a column on desktop.
     */
    flex-grow: 1;
}


.ks-navbar-nav {
    display: flex !important;

    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end;

    gap: 4px;

    margin-left: auto;

    width: auto;
}


.ks-navbar-nav > .nav-item {
    display: flex;
    align-items: center;
}


/* ---------------------------------------------------------
   Navigation Links
   --------------------------------------------------------- */

.ks-nav-link {
    position: relative;

    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    min-height: 44px;

    padding: 9px 12px !important;

    border-radius: 12px;

    color: #172033 !important;

    font-size: 14px;
    font-weight: 650;

    text-decoration: none;

    transition:
        color 0.22s ease,
        background-color 0.22s ease,
        transform 0.22s ease;
}


.ks-nav-link:hover {
    color: #315cf5 !important;

    background: rgba(49, 92, 245, 0.055);

    transform: translateY(-1px);
}


/* Active dropdown */

.ks-navbar-nav .show > .ks-nav-link {
    color: #315cf5 !important;

    background: rgba(49, 92, 245, 0.07);
}


/* ---------------------------------------------------------
   Dropdown Arrow
   --------------------------------------------------------- */

.ks-nav-link.dropdown-toggle::after {
    margin-left: 7px;

    vertical-align: middle;

    border: 0;

    content: "\f282";

    font-family: bootstrap-icons !important;
    font-size: 10px;

    transition: transform 0.25s ease;
}


.ks-navbar-nav .show > .dropdown-toggle::after {
    transform: rotate(180deg);
}


/* ---------------------------------------------------------
   Dropdown Menu
   --------------------------------------------------------- */

.ks-dropdown-menu {
    min-width: 320px;

    margin-top: 10px !important;
    padding: 10px;

    border: 1px solid rgba(15, 23, 42, 0.07);
    border-radius: 18px;

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

    box-shadow:
        0 20px 60px rgba(15, 23, 42, 0.12),
        0 4px 15px rgba(15, 23, 42, 0.05);

    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);

    transform-origin: top center;
}


/* Bootstrap show animation */

.ks-dropdown-menu.show {
    animation: ksDropdownReveal 0.22s ease both;
}


@keyframes ksDropdownReveal {

    from {
        opacity: 0;
        transform: translateY(-7px) scale(0.98);
    }

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

}


/* ---------------------------------------------------------
   Dropdown Items
   --------------------------------------------------------- */

.ks-dropdown-item {
    display: flex !important;
    align-items: center;

    gap: 12px;

    min-height: 58px;

    padding: 9px 10px !important;

    border-radius: 12px;

    color: #172033 !important;

    white-space: normal;

    transition:
        background-color 0.2s ease,
        transform 0.2s ease;
}


.ks-dropdown-item:hover {
    color: #172033 !important;

    background: #f5f7ff;

    transform: translateX(3px);
}


/* Icon */

.ks-dropdown-icon {
    width: 38px;
    height: 38px;

    flex: 0 0 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 11px;

    background: #eef2ff;

    color: #315cf5;

    font-size: 17px;

    transition:
        transform 0.25s ease,
        background-color 0.25s ease;
}


.ks-dropdown-item:hover .ks-dropdown-icon {
    background: #315cf5;
    color: #fff;

    transform: rotate(-4deg) scale(1.06);
}


/* Text */

.ks-dropdown-content {
    display: flex;
    flex-direction: column;

    min-width: 0;
}


.ks-dropdown-content strong {
    color: #182033;

    font-size: 14px;
    font-weight: 650;

    line-height: 1.25;
}


.ks-dropdown-content small {
    margin-top: 3px;

    color: #8a97aa;

    font-size: 11px;
    font-weight: 500;

    line-height: 1.25;
}


/* ---------------------------------------------------------
   CTA
   --------------------------------------------------------- */

.ks-nav-cta-item {
    margin-left: 12px;
}


.ks-nav-cta {
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    min-height: 48px;

    padding: 0 20px;

    border-radius: 25px;

    background: linear-gradient(
        135deg,
        #315cf5 0%,
        #3854e9 100%
    );

    color: #fff !important;

    font-size: 14px;
    font-weight: 700;

    text-decoration: none;

    box-shadow:
        0 10px 25px rgba(49, 92, 245, 0.22);

    overflow: hidden;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


.ks-nav-cta::before {
    content: "";

    position: absolute;

    top: 0;
    left: -120%;

    width: 80%;
    height: 100%;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.28),
        transparent
    );

    transform: skewX(-20deg);

    transition: left 0.55s ease;
}


.ks-nav-cta:hover {
    color: #fff !important;

    transform: translateY(-2px);

    box-shadow:
        0 14px 32px rgba(49, 92, 245, 0.30);
}


.ks-nav-cta:hover::before {
    left: 140%;
}


.ks-nav-cta i {
    font-size: 13px;

    transition: transform 0.25s ease;
}


.ks-nav-cta:hover i {
    transform: translate(2px, -2px);
}


/* ---------------------------------------------------------
   Mobile Toggle
   --------------------------------------------------------- */

.ks-navbar-toggler {
    width: 46px;
    height: 46px;

    padding: 0;

    margin-left: auto;

    display: none;

    align-items: center;
    justify-content: center;

    border: 1px solid #e3e8f1 !important;
    border-radius: 13px !important;

    background: #fff;

    box-shadow: 0 5px 18px rgba(15, 23, 42, 0.06);

    outline: none !important;
}


.ks-toggler-icon {
    width: 19px;
    height: 16px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
}


.ks-toggler-icon span {
    display: block;

    width: 100%;
    height: 2px;

    border-radius: 5px;

    background: #172033;

    transition:
        transform 0.25s ease,
        opacity 0.2s ease;
}


/* ---------------------------------------------------------
   Desktop Safety
   --------------------------------------------------------- */

@media (min-width: 992px) {

    .ks-navbar-collapse {
        display: flex !important;

        flex-basis: auto !important;

        flex-grow: 1 !important;
    }

    .ks-navbar-nav {
        flex-direction: row !important;
    }

    .ks-navbar-toggler {
        display: none !important;
    }

}


/* ---------------------------------------------------------
   Tablet / Mobile
   --------------------------------------------------------- */

@media (max-width: 991.98px) {

    .ks-navbar {
        min-height: 72px;
    }


    .ks-navbar-container {
        min-height: 72px;
        flex-wrap: wrap;
    }


    .ks-navbar-toggler {
        display: flex;
    }


    .ks-navbar-collapse {
        width: 100%;

        flex-basis: 100%;

        margin-top: 12px;

        padding: 10px 0 16px;
    }


    .ks-navbar-nav {
        width: 100%;

        display: flex !important;

        flex-direction: column !important;
        align-items: stretch !important;

        gap: 3px;

        margin: 0;
    }


    .ks-navbar-nav > .nav-item {
        width: 100%;

        display: block;
    }


    .ks-nav-link {
        width: 100%;

        justify-content: space-between;

        padding: 12px 14px !important;
    }


    .ks-nav-cta-item {
        margin: 8px 0 0;
    }


    .ks-nav-cta {
        width: 100%;
    }


    .ks-dropdown-menu {
        width: 100%;
        min-width: 0;

        margin-top: 4px !important;

        border-radius: 14px;

        box-shadow: none;

        background: #f8faff;
    }


    .ks-dropdown-item {
        min-height: 52px;
    }

}


/* ---------------------------------------------------------
   Small Mobile
   --------------------------------------------------------- */

@media (max-width: 575.98px) {

    .ks-navbar {
        min-height: 68px;
    }


    .ks-navbar-container {
        min-height: 68px;
    }


    .ks-brand-logo-wrap,
    .ks-brand-logo {
        width: 42px;
        height: 42px;
    }


    .ks-brand-name {
        font-size: 15px;
    }


    .ks-brand-tagline {
        font-size: 9px;
    }


    .ks-navbar-toggler {
        width: 42px;
        height: 42px;
    }

}


/* ---------------------------------------------------------
   Reduced Motion
   --------------------------------------------------------- */

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

    .ks-nav-link,
    .ks-nav-cta,
    .ks-dropdown-item,
    .ks-dropdown-icon,
    .ks-nav-cta i,
    .ks-nav-cta::before,
    .ks-dropdown-menu {
        transition: none !important;
        animation: none !important;
    }

}
/* =========================================================
   KSS SERVICE EXPERIENCE
   Premium Corporate Service Pages
========================================================= */

.kss-service-page {
    --kss-blue: #315bea;
    --kss-blue-dark: #2146d0;
    --kss-blue-soft: #eef3ff;
    --kss-ink: #101828;
    --kss-text: #52627a;
    --kss-muted: #8a97aa;
    --kss-border: #e7ebf2;
    --kss-surface: #ffffff;
    --kss-background: #f8faff;
    --kss-radius: 28px;

    position: relative;
    overflow: hidden;
    background: #fff;
    color: var(--kss-ink);
}


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

.kss-service-hero {
    position: relative;
    min-height: 720px;
    display: flex;
    align-items: center;
    padding: 110px 0 100px;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 82% 42%,
            rgba(49, 91, 234, .10),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f8faff 100%
        );
}


.kss-service-grid {
    position: absolute;
    inset: 0;
    opacity: .5;
    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(49, 91, 234, .045) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(49, 91, 234, .045) 1px,
            transparent 1px
        );

    background-size: 56px 56px;

    mask-image: linear-gradient(
        to right,
        transparent,
        black 20%,
        black 75%,
        transparent
    );
}


.kss-service-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
    animation: kssServiceGlow 8s ease-in-out infinite;
}


.kss-service-glow-one {
    width: 280px;
    height: 280px;
    background: rgba(49, 91, 234, .12);
    top: 10%;
    right: 5%;
}


.kss-service-glow-two {
    width: 220px;
    height: 220px;
    background: rgba(99, 102, 241, .08);
    bottom: 5%;
    left: 20%;
    animation-delay: -3s;
}


@keyframes kssServiceGlow {

    0%,
    100% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    50% {
        transform: translate3d(0, -18px, 0) scale(1.08);
    }
}


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

.kss-service-hero-content {
    position: relative;
    z-index: 5;
    max-width: 700px;
}


.kss-service-eyebrow,
.kss-service-section-label {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    color: var(--kss-blue);

    font-size: 12px;
    font-weight: 800;

    letter-spacing: .16em;
    text-transform: uppercase;
}


.kss-service-eyebrow {
    padding: 9px 14px;

    border: 1px solid #dfe7ff;
    border-radius: 999px;

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

    box-shadow:
        0 8px 30px rgba(49, 91, 234, .06);

    animation: kssFadeUp .7s ease both;
}


.kss-service-eyebrow-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #28c76f;

    box-shadow:
        0 0 0 5px rgba(40, 199, 111, .10);

    animation: kssPulse 2s ease-in-out infinite;
}


@keyframes kssPulse {

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

    50% {
        transform: scale(.75);
        opacity: .6;
    }
}


.kss-service-title {
    max-width: 720px;

    margin: 22px 0 24px;

    font-size: clamp(
        46px,
        5vw,
        74px
    );

    line-height: 1.02;

    letter-spacing: -.055em;

    font-weight: 800;

    color: #101828;

    animation: kssFadeUp .8s .08s ease both;
}


.kss-service-description {
    max-width: 650px;

    margin: 0;

    color: var(--kss-text);

    font-size: 18px;
    line-height: 1.8;

    animation: kssFadeUp .8s .16s ease both;
}


.kss-service-tech-row {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;

    margin-top: 27px;

    animation: kssFadeUp .8s .24s ease both;
}


.kss-service-tech-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    padding: 8px 12px;

    border: 1px solid #e2e7f0;
    border-radius: 999px;

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

    color: #536174;

    font-size: 12px;
    font-weight: 700;

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


.kss-service-tech-pill i {
    color: var(--kss-blue);
}


.kss-service-tech-pill:hover {
    transform: translateY(-3px);

    border-color: #cdd9ff;

    box-shadow:
        0 10px 25px rgba(49,91,234,.08);
}


.kss-service-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;

    margin-top: 32px;

    animation: kssFadeUp .8s .32s ease both;
}


.kss-service-primary-btn,
.kss-service-secondary-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    min-height: 54px;

    padding: 0 23px;

    border-radius: 15px;

    font-size: 14px;
    font-weight: 750;

    text-decoration: none;

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


.kss-service-primary-btn {
    color: #fff;

    background:
        linear-gradient(
            135deg,
            #3865f1,
            #294ed9
        );

    box-shadow:
        0 14px 30px rgba(49,91,234,.25);
}


.kss-service-primary-btn:hover {
    color: #fff;

    transform: translateY(-4px);

    box-shadow:
        0 20px 38px rgba(49,91,234,.32);
}


.kss-service-primary-btn i {
    transition: transform .3s ease;
}


.kss-service-primary-btn:hover i {
    transform: translate(3px,-3px);
}


.kss-service-secondary-btn {
    color: #344054;

    border: 1px solid #dfe5ef;

    background: rgba(255,255,255,.8);
}


.kss-service-secondary-btn:hover {
    color: var(--kss-blue);

    transform: translateY(-3px);

    border-color: #cbd7fb;

    box-shadow:
        0 12px 30px rgba(16,24,40,.06);
}


.kss-service-trust-line {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;

    margin-top: 24px;

    color: #718096;

    font-size: 12px;
    font-weight: 650;

    animation: kssFadeUp .8s .4s ease both;
}


.kss-service-trust-line span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}


.kss-service-trust-line i {
    color: #22b573;
}


/* =========================================================
   HERO VISUAL STAGE
========================================================= */

.kss-service-stage {
    position: relative;

    width: 100%;
    min-height: 570px;

    display: flex;
    align-items: center;
    justify-content: center;
}


.kss-service-stage-orbit {
    position: absolute;

    border: 1px solid rgba(49,91,234,.11);

    border-radius: 50%;

    pointer-events: none;

    animation:
        kssOrbitFloat 7s ease-in-out infinite;
}


.kss-service-stage-orbit::before {
    content: "";

    position: absolute;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: var(--kss-blue);

    box-shadow:
        0 0 0 7px rgba(49,91,234,.08),
        0 0 25px rgba(49,91,234,.3);

    top: 12%;
    right: 8%;
}


.orbit-a {
    width: 470px;
    height: 470px;
}


.orbit-b {
    width: 350px;
    height: 350px;

    animation-delay: -2.5s;
}


@keyframes kssOrbitFloat {

    0%,
    100% {
        transform: scale(1) rotate(0);
    }

    50% {
        transform: scale(1.035) rotate(2deg);
    }
}


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

.kss-visual-mobile,
.kss-visual-website,
.kss-visual-webapp,
.kss-visual-software {
    position: relative;

    width: 100%;
    max-width: 560px;

    min-height: 510px;

    display: flex;
    align-items: center;
    justify-content: center;
}


.kss-phone {
    position: relative;

    width: 265px;
    height: 515px;

    padding: 10px;

    border: 7px solid #101827;

    border-radius: 44px;

    background: #101827;

    box-shadow:
        0 45px 80px rgba(15,23,42,.18),
        0 10px 25px rgba(49,91,234,.10);

    transform:
        rotate(4deg);

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

    z-index: 3;
}


.kss-phone-notch {
    position: absolute;

    z-index: 5;

    top: 8px;
    left: 50%;

    width: 92px;
    height: 23px;

    transform: translateX(-50%);

    border-radius: 999px;

    background: #101827;
}


.kss-phone-screen {
    width: 100%;
    height: 100%;

    padding: 35px 17px 18px;

    overflow: hidden;

    border-radius: 32px;

    background:
        linear-gradient(
            180deg,
            #f9fbff,
            #edf3ff
        );
}


.kss-app-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}


.kss-app-top small,
.kss-app-growth small {
    display: block;

    color: #8c98aa;

    font-size: 9px;
}


.kss-app-top strong {
    display: block;

    margin-top: 3px;

    font-size: 16px;
}


.kss-app-top > i {
    color: var(--kss-blue);

    font-size: 15px;
}


.kss-app-growth {
    margin-top: 22px;
    padding: 18px;

    border-radius: 20px;

    color: #fff;

    background:
        linear-gradient(
            145deg,
            #3a65f1,
            #284bd0
        );

    box-shadow:
        0 15px 28px rgba(49,91,234,.2);
}


.kss-app-growth strong {
    display: block;

    margin-top: 4px;

    font-size: 26px;
}


.kss-mini-chart {
    height: 45px;

    display: flex;
    align-items: end;
    gap: 4px;

    margin-top: 12px;
}


.kss-mini-chart span {
    flex: 1;

    border-radius: 4px 4px 2px 2px;

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

    animation:
        kssChartBounce 2.8s ease-in-out infinite;
}


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


.kss-mini-chart span:nth-child(2) {
    height: 48%;
    animation-delay: .1s;
}


.kss-mini-chart span:nth-child(3) {
    height: 43%;
    animation-delay: .2s;
}


.kss-mini-chart span:nth-child(4) {
    height: 67%;
    animation-delay: .3s;
}


.kss-mini-chart span:nth-child(5) {
    height: 57%;
    animation-delay: .4s;
}


.kss-mini-chart span:nth-child(6) {
    height: 84%;
    animation-delay: .5s;
}


@keyframes kssChartBounce {

    0%,
    100% {
        transform: scaleY(.9);
    }

    50% {
        transform: scaleY(1.08);
    }
}


.kss-app-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 9px;

    margin-top: 10px;
}


.kss-app-stats > div {
    padding: 13px;

    border: 1px solid #e2e8f3;

    border-radius: 15px;

    background: rgba(255,255,255,.85);
}


.kss-app-stats small {
    display: block;

    color: #8c98aa;

    font-size: 8px;
}


.kss-app-stats strong {
    display: block;

    margin-top: 4px;

    font-size: 15px;
}


.kss-app-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    margin-top: 12px;
    padding: 12px;

    border-radius: 13px;

    color: #fff;

    background: var(--kss-blue);

    font-size: 10px;
    font-weight: 700;
}


@keyframes kssPhoneFloat {

    0%,
    100% {
        transform: rotate(4deg) translateY(0);
    }

    50% {
        transform: rotate(2deg) translateY(-14px);
    }
}


/* =========================================================
   FLOATING CHIPS
========================================================= */

.kss-floating-chip {
    position: absolute;
    z-index: 10;

    display: flex;
    align-items: center;
    gap: 10px;

    min-width: 160px;

    padding: 12px 14px;

    border: 1px solid rgba(224,230,240,.95);

    border-radius: 16px;

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

    backdrop-filter: blur(16px);

    box-shadow:
        0 20px 45px rgba(16,24,40,.10);

    animation:
        kssChipFloat 4.5s ease-in-out infinite;
}


.kss-floating-chip > i {
    width: 34px;
    height: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 11px;

    color: var(--kss-blue);

    background: #edf2ff;
}


.kss-floating-chip strong {
    display: block;

    color: #1d2939;

    font-size: 11px;
}


.kss-floating-chip small {
    display: block;

    margin-top: 2px;

    color: #98a2b3;

    font-size: 9px;
}


.kss-status-dot {
    width: 7px;
    height: 7px;

    margin-left: auto;

    border-radius: 50%;

    background: #22c55e;

    box-shadow:
        0 0 0 4px rgba(34,197,94,.10);
}


@keyframes kssChipFloat {

    0%,
    100% {
        transform: translateY(0);
    }

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


.chip-mobile-one {
    left: 1%;
    bottom: 23%;
}


.chip-mobile-two {
    right: 1%;
    top: 17%;

    animation-delay: -1.5s;
}


.chip-mobile-three {
    right: 2%;
    bottom: 13%;

    animation-delay: -3s;
}


/* =========================================================
   WEBSITE VISUAL
========================================================= */

.kss-browser {
    position: relative;

    width: 500px;

    overflow: hidden;

    border: 1px solid #dfe5ef;

    border-radius: 22px;

    background: #fff;

    box-shadow:
        0 45px 80px rgba(16,24,40,.15);

    transform:
        perspective(1000px)
        rotateY(-4deg)
        rotateX(2deg);

    animation:
        kssBrowserFloat 6s ease-in-out infinite;
}


@keyframes kssBrowserFloat {

    0%,
    100% {
        transform:
            perspective(1000px)
            rotateY(-4deg)
            rotateX(2deg)
            translateY(0);
    }

    50% {
        transform:
            perspective(1000px)
            rotateY(-2deg)
            rotateX(1deg)
            translateY(-12px);
    }
}


.kss-browser-top,
.kss-software-top {
    height: 43px;

    display: flex;
    align-items: center;
    gap: 15px;

    padding: 0 15px;

    border-bottom: 1px solid #edf0f5;

    background: #fafbfc;
}


.kss-browser-dots {
    display: flex;
    gap: 5px;
}


.kss-browser-dots span {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #d8dee8;
}


.kss-browser-url {
    flex: 1;

    padding: 6px 13px;

    border-radius: 8px;

    background: #f0f3f7;

    color: #98a2b3;

    font-size: 9px;
}


.kss-browser-top > i {
    color: #98a2b3;

    font-size: 12px;
}


.kss-browser-content {
    min-height: 390px;

    padding: 22px;

    background:
        linear-gradient(
            135deg,
            #ffffff,
            #f4f7ff
        );
}


.kss-web-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;

    color: #344054;

    font-size: 8px;
}


.kss-web-nav strong {
    color: var(--kss-blue);

    font-size: 10px;
}


.kss-web-nav div {
    display: flex;
    gap: 14px;

    color: #8a97aa;
}


.kss-web-hero {
    max-width: 350px;

    margin-top: 50px;
}


.kss-web-hero small {
    color: var(--kss-blue);

    font-size: 8px;
    font-weight: 800;

    letter-spacing: .14em;
}


.kss-web-hero h3 {
    margin: 8px 0 10px;

    font-size: 31px;
    line-height: 1.05;

    letter-spacing: -.045em;
}


.kss-web-hero h3 span {
    color: var(--kss-blue);
}


.kss-web-hero p {
    margin: 0;

    color: #7b8798;

    font-size: 11px;
    line-height: 1.7;
}


.kss-web-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    margin-top: 18px;
    padding: 9px 13px;

    border-radius: 9px;

    color: #fff;

    background: var(--kss-blue);

    font-size: 9px;
    font-weight: 700;
}


.kss-web-cards {
    display: grid;
    grid-template-columns: repeat(3,1fr);

    gap: 8px;

    margin-top: 32px;
}


.kss-web-cards div {
    height: 50px;

    border: 1px solid #e5eaf2;

    border-radius: 11px;

    background: #fff;

    box-shadow: 0 8px 18px rgba(16,24,40,.04);

    animation:
        kssCardBreath 3.5s ease-in-out infinite;
}


.kss-web-cards div:nth-child(2) {
    animation-delay: -.7s;
}


.kss-web-cards div:nth-child(3) {
    animation-delay: -1.4s;
}


@keyframes kssCardBreath {

    0%,
    100% {
        transform: translateY(0);
    }

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


.chip-web-one {
    left: -1%;
    bottom: 17%;
}


.chip-web-two {
    right: -1%;
    top: 19%;

    animation-delay: -1.7s;
}


/* =========================================================
   WEB APPLICATION VISUAL
========================================================= */

.kss-dashboard {
    width: 510px;
    min-height: 365px;

    display: flex;

    overflow: hidden;

    border: 1px solid #dfe5ef;

    border-radius: 22px;

    background: #fff;

    box-shadow:
        0 45px 80px rgba(16,24,40,.14);

    transform:
        perspective(1000px)
        rotateY(-3deg);

    animation:
        kssDashboardFloat 5.5s ease-in-out infinite;
}


@keyframes kssDashboardFloat {

    0%,
    100% {
        transform:
            perspective(1000px)
            rotateY(-3deg)
            translateY(0);
    }

    50% {
        transform:
            perspective(1000px)
            rotateY(-1deg)
            translateY(-10px);
    }
}


.kss-dashboard-sidebar {
    width: 58px;

    padding: 15px 10px;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 13px;

    border-right: 1px solid #edf0f5;

    background: #fbfcff;
}


.kss-dashboard-logo {
    width: 30px;
    height: 30px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 9px;

    border-radius: 9px;

    color: #fff;

    background: var(--kss-blue);

    font-size: 9px;
    font-weight: 800;
}


.kss-dashboard-sidebar span {
    width: 30px;
    height: 30px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 9px;

    color: #9aa5b5;

    font-size: 13px;
}


.kss-dashboard-sidebar span.active {
    color: var(--kss-blue);

    background: #edf2ff;
}


.kss-dashboard-main {
    flex: 1;

    padding: 25px;

    background: #fff;
}


.kss-dashboard-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}


.kss-dashboard-header small {
    display: block;

    color: #98a2b3;

    font-size: 8px;
}


.kss-dashboard-header strong {
    display: block;

    margin-top: 4px;

    font-size: 15px;
}


.kss-dashboard-avatar {
    width: 30px;
    height: 30px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    color: var(--kss-blue);

    background: #edf2ff;

    font-size: 8px;
    font-weight: 800;
}


.kss-dashboard-metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 10px;

    margin-top: 24px;
}


.kss-dashboard-metrics > div {
    padding: 14px;

    border: 1px solid #e7ebf2;

    border-radius: 14px;

    background: #fbfcfe;
}


.kss-dashboard-metrics small {
    display: block;

    color: #98a2b3;

    font-size: 8px;
}


.kss-dashboard-metrics strong {
    display: block;

    margin-top: 5px;

    font-size: 20px;
}


.kss-dashboard-metrics span {
    display: inline-block;

    margin-top: 4px;

    color: #22a06b;

    font-size: 8px;
    font-weight: 700;
}


.kss-dashboard-chart {
    margin-top: 12px;

    padding: 17px;

    border: 1px solid #e7ebf2;

    border-radius: 15px;

    background: #fff;
}


.kss-chart-title {
    color: #667085;

    font-size: 9px;
    font-weight: 700;
}


.kss-chart-bars {
    height: 110px;

    display: flex;
    align-items: end;
    gap: 9px;

    margin-top: 13px;

    border-bottom: 1px solid #edf0f5;
}


.kss-chart-bars span {
    flex: 1;

    border-radius: 5px 5px 0 0;

    background:
        linear-gradient(
            180deg,
            #5b7df5,
            #315bea
        );

    transform-origin: bottom;

    animation:
        kssBarGrow 2.8s ease-in-out infinite alternate;
}


.kss-chart-bars span:nth-child(2) {
    animation-delay: -.2s;
}


.kss-chart-bars span:nth-child(3) {
    animation-delay: -.4s;
}


.kss-chart-bars span:nth-child(4) {
    animation-delay: -.6s;
}


.kss-chart-bars span:nth-child(5) {
    animation-delay: -.8s;
}


.kss-chart-bars span:nth-child(6) {
    animation-delay: -1s;
}


.kss-chart-bars span:nth-child(7) {
    animation-delay: -1.2s;
}


@keyframes kssBarGrow {

    from {
        transform: scaleY(.88);
    }

    to {
        transform: scaleY(1);
    }
}


.chip-app-one {
    left: -2%;
    bottom: 14%;
}


.chip-app-two {
    right: -2%;
    top: 14%;

    animation-delay: -1.8s;
}


/* =========================================================
   BUSINESS SOFTWARE VISUAL
========================================================= */

.kss-software-window {
    width: 530px;
    min-height: 380px;

    overflow: hidden;

    border: 1px solid #dfe5ef;

    border-radius: 21px;

    background: #fff;

    box-shadow:
        0 45px 80px rgba(16,24,40,.14);

    animation:
        kssSoftwareFloat 6s ease-in-out infinite;
}


@keyframes kssSoftwareFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-11px);
    }
}


.kss-software-top {
    justify-content: space-between;

    color: #667085;

    font-size: 10px;
}


.kss-software-top strong {
    flex: 1;

    font-size: 9px;
}


.kss-software-body {
    display: flex;

    min-height: 337px;
}


.kss-software-sidebar {
    width: 58px;

    padding: 17px 10px;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;

    border-right: 1px solid #edf0f5;

    background: #fbfcff;
}


.kss-software-sidebar strong {
    margin-bottom: 8px;

    color: var(--kss-blue);

    font-size: 9px;
}


.kss-software-sidebar span {
    width: 30px;
    height: 30px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 8px;

    color: #9aa5b5;

    font-size: 12px;
}


.kss-software-sidebar span.active {
    color: var(--kss-blue);

    background: #edf2ff;
}


.kss-software-content {
    flex: 1;

    padding: 22px;

    background: #fff;
}


.kss-software-heading {
    display: flex;
    justify-content: space-between;
}


.kss-software-heading small {
    display: block;

    color: #98a2b3;

    font-size: 8px;
}


.kss-software-heading strong {
    display: block;

    margin-top: 4px;

    font-size: 14px;
}


.kss-software-heading > span {
    height: fit-content;

    padding: 5px 8px;

    border-radius: 999px;

    color: #15905c;

    background: #eafaf2;

    font-size: 7px;
    font-weight: 800;
}


.kss-software-cards {
    display: grid;
    grid-template-columns: repeat(3,1fr);

    gap: 8px;

    margin-top: 22px;
}


.kss-software-cards > div {
    padding: 12px;

    border: 1px solid #e7ebf2;

    border-radius: 12px;

    background: #fbfcfe;
}


.kss-software-cards small {
    display: block;

    color: #98a2b3;

    font-size: 7px;
}


.kss-software-cards strong {
    display: block;

    margin-top: 5px;

    font-size: 13px;
}


.kss-software-cards span {
    display: block;

    margin-top: 4px;

    color: #22a06b;

    font-size: 7px;
    font-weight: 700;
}


.kss-software-table {
    margin-top: 10px;

    border: 1px solid #e7ebf2;

    border-radius: 12px;

    overflow: hidden;
}


.kss-software-table div {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 11px 13px;

    border-bottom: 1px solid #edf0f5;

    font-size: 8px;
}


.kss-software-table div:last-child {
    border-bottom: 0;
}


.kss-software-table span {
    color: #667085;
}


.kss-software-table strong {
    color: #22a06b;

    font-size: 7px;
}


.chip-software-one {
    left: -2%;
    bottom: 12%;
}


.chip-software-two {
    right: -1%;
    top: 16%;

    animation-delay: -1.5s;
}


/* =========================================================
   VALUE STRIP
========================================================= */

.kss-service-value-strip {
    position: relative;
    z-index: 5;

    padding: 0 0 35px;

    background: #f8faff;
}


.kss-service-value-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);

    overflow: hidden;

    border: 1px solid #e5eaf2;

    border-radius: 20px;

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

    box-shadow:
        0 20px 50px rgba(16,24,40,.05);
}


.kss-service-value-grid > div {
    position: relative;

    padding: 22px;

    border-right: 1px solid #e7ebf2;
}


.kss-service-value-grid > div:last-child {
    border-right: 0;
}


.kss-service-value-grid span {
    display: block;

    margin-bottom: 8px;

    color: var(--kss-blue);

    font-size: 10px;
    font-weight: 800;
}


.kss-service-value-grid strong {
    display: block;

    font-size: 13px;
}


.kss-service-value-grid small {
    display: block;

    margin-top: 6px;

    color: #8a97aa;

    font-size: 10px;
    line-height: 1.5;
}


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

.kss-service-intro {
    padding: 115px 0 75px;

    background: #fff;
}


.kss-service-section-title {
    max-width: 760px;

    margin: 12px 0 0;

    color: #101828;

    font-size: clamp(
        38px,
        4vw,
        58px
    );

    line-height: 1.06;

    letter-spacing: -.05em;

    font-weight: 800;
}


.kss-service-section-title span {
    color: var(--kss-blue);
}


.kss-service-section-description {
    color: #667085;

    font-size: 17px;

    line-height: 1.8;
}


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

.kss-service-features {
    padding: 80px 0 110px;

    background:
        linear-gradient(
            180deg,
            #f8faff,
            #fff
        );
}


.kss-service-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;

    gap: 50px;

    margin-bottom: 45px;
}


.kss-service-heading > p {
    max-width: 440px;

    margin: 0;

    color: #667085;

    font-size: 15px;
    line-height: 1.8;
}


.kss-service-feature-card {
    position: relative;

    min-height: 310px;

    padding: 31px;

    overflow: hidden;

    border: 1px solid #e5eaf2;

    border-radius: 24px;

    background: #fff;

    box-shadow:
        0 15px 40px rgba(16,24,40,.035);

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


.kss-service-feature-card::before {
    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    top: -100px;
    right: -90px;

    border-radius: 50%;

    background: #eef3ff;

    transition: transform .5s ease;
}


.kss-service-feature-card:hover {
    transform: translateY(-8px);

    border-color: #d6e0ff;

    box-shadow:
        0 28px 60px rgba(16,24,40,.09);
}


.kss-service-feature-card:hover::before {
    transform: scale(1.4);
}


.kss-service-feature-top {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: space-between;
}


.kss-service-feature-number {
    color: #dbe3f2;

    font-size: 48px;

    line-height: 1;

    font-weight: 800;

    letter-spacing: -.05em;
}


.kss-service-feature-icon {
    width: 52px;
    height: 52px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 16px;

    color: var(--kss-blue);

    background: #edf2ff;

    font-size: 21px;

    transition:
        transform .35s ease,
        background .35s ease;
}


.kss-service-feature-card:hover .kss-service-feature-icon {
    transform: rotate(-6deg) scale(1.08);

    color: #fff;

    background: var(--kss-blue);
}


.kss-service-feature-card h3 {
    position: relative;

    margin: 34px 0 12px;

    font-size: 21px;

    letter-spacing: -.025em;
}


.kss-service-feature-card p {
    position: relative;

    max-width: 520px;

    margin: 0;

    color: #697586;

    font-size: 14px;

    line-height: 1.75;
}


.kss-service-feature-arrow {
    position: absolute;

    right: 28px;
    bottom: 26px;

    width: 36px;
    height: 36px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid #e5eaf2;

    border-radius: 50%;

    color: #98a2b3;

    transition:
        transform .3s ease,
        color .3s ease,
        background .3s ease;
}


.kss-service-feature-card:hover .kss-service-feature-arrow {
    transform: translate(3px,-3px);

    color: #fff;

    background: var(--kss-blue);

    border-color: var(--kss-blue);
}


/* =========================================================
   INDUSTRIES
========================================================= */

.kss-service-industries {
    padding: 90px 0;

    background: #fff;
}


.kss-service-industry-panel {
    position: relative;

    padding: 65px;

    overflow: hidden;

    border: 1px solid #e2e8f2;

    border-radius: 30px;

    background:
        radial-gradient(
            circle at 90% 20%,
            rgba(49,91,234,.08),
            transparent 35%
        ),
        #f8faff;
}


.kss-service-industry-panel::after {
    content: "";

    position: absolute;

    width: 350px;
    height: 350px;

    right: -180px;
    bottom: -180px;

    border: 1px solid rgba(49,91,234,.10);

    border-radius: 50%;
}


.kss-service-industry-list {
    position: relative;
    z-index: 2;

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

    gap: 10px;
}


.kss-service-industry-item {
    display: flex;
    align-items: center;
    gap: 11px;

    padding: 14px 16px;

    border: 1px solid #e5eaf2;

    border-radius: 13px;

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

    color: #344054;

    font-size: 13px;
    font-weight: 650;

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}


.kss-service-industry-item:hover {
    transform: translateX(4px);

    box-shadow:
        0 10px 25px rgba(16,24,40,.06);
}


.kss-industry-check {
    width: 25px;
    height: 25px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 25px;

    border-radius: 50%;

    color: var(--kss-blue);

    background: #edf2ff;

    font-size: 11px;
}


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

.kss-service-final-cta {
    padding: 90px 0;

    background: #fff;
}


.kss-service-final-card {
    position: relative;

    overflow: hidden;

    padding: 70px;

    border-radius: 30px;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            #101828,
            #16244d
        );

    box-shadow:
        0 35px 80px rgba(16,24,40,.18);
}


.kss-service-final-glow {
    position: absolute;

    width: 430px;
    height: 430px;

    right: -150px;
    top: -220px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(73,110,255,.55),
            transparent 65%
        );

    filter: blur(8px);

    pointer-events: none;
}


.kss-service-final-card .kss-service-section-label {
    color: #8eacff;
}


.kss-service-final-card h2 {
    position: relative;

    max-width: 700px;

    margin: 14px 0;

    font-size: clamp(
        38px,
        4vw,
        56px
    );

    line-height: 1.05;

    letter-spacing: -.05em;
}


.kss-service-final-card h2 span {
    color: #6f91ff;
}


.kss-service-final-card p {
    position: relative;

    max-width: 650px;

    margin: 0;

    color: #b8c2d4;

    font-size: 15px;
    line-height: 1.8;
}


.kss-service-final-action {
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: flex-start;

    gap: 12px;
}


.kss-service-final-action small {
    color: #8d99ae;

    font-size: 11px;
}


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

.kss-service-other {
    padding: 90px 0 110px;

    background: #f8faff;
}


.kss-service-other-card {
    position: relative;

    display: flex;
    align-items: center;
    gap: 18px;

    height: 100%;

    padding: 24px;

    border: 1px solid #e3e8f1;

    border-radius: 20px;

    color: #101828;

    background: #fff;

    text-decoration: none;

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


.kss-service-other-card:hover {
    color: #101828;

    transform: translateY(-6px);

    border-color: #d2ddff;

    box-shadow:
        0 20px 45px rgba(16,24,40,.08);
}


.kss-service-other-icon {
    width: 48px;
    height: 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 48px;

    border-radius: 14px;

    color: var(--kss-blue);

    background: #edf2ff;

    font-size: 19px;

    transition:
        transform .3s ease,
        background .3s ease;
}


.kss-service-other-card:hover .kss-service-other-icon {
    transform: rotate(-7deg);

    color: #fff;

    background: var(--kss-blue);
}


.kss-service-other-card small {
    color: #98a2b3;

    font-size: 8px;
    font-weight: 800;

    letter-spacing: .12em;
}


.kss-service-other-card h3 {
    margin: 4px 0 7px;

    font-size: 16px;

    letter-spacing: -.02em;
}


.kss-service-other-card span {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    color: var(--kss-blue);

    font-size: 11px;
    font-weight: 750;
}


.kss-service-other-card span i {
    transition: transform .25s ease;
}


.kss-service-other-card:hover span i {
    transform: translate(3px,-3px);
}


/* =========================================================
   404
========================================================= */

.kss-service-404 {
    min-height: 70vh;

    display: flex;
    align-items: center;

    padding: 100px 0;

    background: #f8faff;
}


.kss-service-404-card {
    max-width: 700px;

    margin: auto;

    padding: 70px;

    text-align: center;

    border: 1px solid #e3e8f1;

    border-radius: 30px;

    background: #fff;

    box-shadow:
        0 25px 70px rgba(16,24,40,.08);
}


.kss-service-404-number {
    color: var(--kss-blue);

    font-size: 14px;
    font-weight: 800;

    letter-spacing: .15em;
}


.kss-service-404-card h1 {
    margin: 12px 0;

    font-size: 46px;

    letter-spacing: -.045em;
}


.kss-service-404-card p {
    max-width: 550px;

    margin: 0 auto 28px;

    color: #667085;

    line-height: 1.8;
}


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

@keyframes kssFadeUp {

    from {
        opacity: 0;
        transform: translateY(18px);
    }

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


/* =========================================================
   REDUCED MOTION
========================================================= */

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

    .kss-service-page *,
    .kss-service-page *::before,
    .kss-service-page *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }

}


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

@media (max-width: 991.98px) {

    .kss-service-hero {
        padding: 80px 0 70px;
    }


    .kss-service-title {
        font-size: clamp(44px, 8vw, 64px);
    }


    .kss-service-stage {
        min-height: 520px;

        margin-top: 15px;
    }


    .kss-service-value-grid {
        grid-template-columns: repeat(2,1fr);
    }


    .kss-service-value-grid > div:nth-child(2) {
        border-right: 0;
    }


    .kss-service-value-grid > div:nth-child(-n+2) {
        border-bottom: 1px solid #e7ebf2;
    }


    .kss-service-heading {
        display: block;
    }


    .kss-service-heading > p {
        margin-top: 20px;
    }


    .kss-service-industry-panel {
        padding: 45px;
    }


    .kss-service-final-card {
        padding: 50px;
    }

}


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

@media (max-width: 767.98px) {

    .kss-service-hero {
        min-height: auto;

        padding: 65px 0 55px;
    }


    .kss-service-title {
        margin-top: 18px;

        font-size: clamp(
            39px,
            11vw,
            54px
        );
    }


    .kss-service-description {
        font-size: 16px;
    }


    .kss-service-actions {
        flex-direction: column;
    }


    .kss-service-primary-btn,
    .kss-service-secondary-btn {
        width: 100%;
    }


    .kss-service-trust-line {
        gap: 10px 15px;
    }


    .kss-service-stage {
        min-height: 470px;

        transform: scale(.9);

        margin-top: -10px;
        margin-bottom: -25px;
    }


    .kss-service-stage-orbit.orbit-a {
        width: 360px;
        height: 360px;
    }


    .kss-service-stage-orbit.orbit-b {
        width: 270px;
        height: 270px;
    }


    .kss-phone {
        width: 225px;
        height: 440px;
    }


    .kss-browser,
    .kss-dashboard,
    .kss-software-window {
        width: 440px;

        max-width: 92vw;
    }


    .kss-floating-chip {
        transform: scale(.82);
    }


    .chip-mobile-one,
    .chip-web-one,
    .chip-app-one,
    .chip-software-one {
        left: -5%;
    }


    .chip-mobile-two,
    .chip-web-two,
    .chip-app-two,
    .chip-software-two {
        right: -5%;
    }


    .kss-service-value-grid {
        grid-template-columns: 1fr;
    }


    .kss-service-value-grid > div {
        border-right: 0 !important;
        border-bottom: 1px solid #e7ebf2;
    }


    .kss-service-value-grid > div:last-child {
        border-bottom: 0;
    }


    .kss-service-intro {
        padding: 80px 0 55px;
    }


    .kss-service-section-title {
        font-size: 40px;
    }


    .kss-service-features {
        padding: 60px 0 75px;
    }


    .kss-service-feature-card {
        min-height: 280px;

        padding: 26px;
    }


    .kss-service-industry-panel {
        padding: 35px 24px;
    }


    .kss-service-industry-list {
        grid-template-columns: 1fr;
    }


    .kss-service-final-cta {
        padding: 65px 0;
    }


    .kss-service-final-card {
        padding: 40px 25px;
    }


    .kss-service-final-action {
        margin-top: 15px;
    }


    .kss-service-final-action .kss-service-primary-btn {
        width: auto;
    }


    .kss-service-other {
        padding: 65px 0 80px;
    }


    .kss-service-404-card {
        padding: 45px 25px;
    }

}


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

@media (max-width: 480px) {

    .kss-service-stage {
        transform: scale(.78);

        min-height: 405px;

        margin-left: -10%;
        margin-right: -10%;
    }


    .kss-service-tech-row {
        gap: 6px;
    }


    .kss-service-tech-pill {
        font-size: 10px;

        padding: 7px 9px;
    }


    .kss-service-section-title {
        font-size: 35px;
    }


    .kss-service-feature-number {
        font-size: 40px;
    }


    .kss-service-feature-card h3 {
        font-size: 19px;
    }

}
/* =========================================================
   KSS CONTACT PAGE
   Premium Digital Product Experience
========================================================= */

.kss-contact-page {
    position: relative;
    overflow: hidden;
    background: #ffffff;
    color: #101828;
}


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

.kss-contact-hero {
    position: relative;
    min-height: 760px;
    display: flex;
    align-items: center;
    padding: 100px 0 120px;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 82% 45%,
            rgba(62, 96, 255, 0.13),
            transparent 32%
        ),
        radial-gradient(
            circle at 12% 10%,
            rgba(93, 117, 255, 0.08),
            transparent 28%
        ),
        #f8faff;
}


.kss-contact-grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .55;

    background-image:
        linear-gradient(
            rgba(43, 84, 255, .045) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(43, 84, 255, .045) 1px,
            transparent 1px
        );

    background-size: 54px 54px;

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


.kss-contact-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    pointer-events: none;
}


.kss-contact-glow-one {
    width: 280px;
    height: 280px;
    background: rgba(45, 88, 255, .12);
    right: 4%;
    top: 12%;
}


.kss-contact-glow-two {
    width: 220px;
    height: 220px;
    background: rgba(104, 75, 255, .08);
    left: 4%;
    bottom: 8%;
}


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

.kss-contact-intro {
    position: relative;
    z-index: 3;
    max-width: 680px;
}


.kss-contact-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    padding: 9px 15px;

    border: 1px solid rgba(51, 91, 255, .16);
    border-radius: 999px;

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

    box-shadow:
        0 8px 30px rgba(25, 48, 110, .06);

    color: #53627c;

    font-size: 11px;
    font-weight: 800;
    letter-spacing: .16em;

    animation: kssContactFadeUp .8s ease both;
}


.kss-contact-eyebrow-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;

    box-shadow:
        0 0 0 5px rgba(34,197,94,.10);

    animation: kssContactPulse 2s infinite;
}


.kss-contact-title {
    margin: 28px 0 24px;

    font-size: clamp(48px, 5.2vw, 78px);
    line-height: .98;
    letter-spacing: -.055em;
    font-weight: 800;

    color: #101828;

    animation:
        kssContactFadeUp .8s .1s ease both;
}


.kss-contact-title > span {
    display: block;
    color: #667085;
}


.kss-contact-title strong {
    color: #3158f5;
    font-weight: 800;
}


.kss-contact-description {
    max-width: 620px;

    margin: 0;

    color: #667085;

    font-size: 18px;
    line-height: 1.75;

    animation:
        kssContactFadeUp .8s .2s ease both;
}


/* =========================================================
   DIRECT CONTACT
========================================================= */

.kss-contact-direct {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;

    margin-top: 36px;

    animation:
        kssContactFadeUp .8s .3s ease both;
}


.kss-contact-direct-card {
    position: relative;

    display: flex;
    align-items: center;
    gap: 12px;

    min-width: 275px;

    padding: 13px 16px;

    text-decoration: none;

    border: 1px solid #e5eaf3;
    border-radius: 15px;

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

    box-shadow:
        0 10px 35px rgba(16,24,40,.055);

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


.kss-contact-direct-card:hover {
    transform: translateY(-4px);

    border-color: rgba(49,88,245,.28);

    box-shadow:
        0 18px 45px rgba(37,69,180,.12);
}


.kss-contact-direct-icon {
    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    flex: 0 0 auto;

    border-radius: 12px;

    color: #3158f5;

    background:
        linear-gradient(
            135deg,
            #eef2ff,
            #f7f9ff
        );

    font-size: 17px;
}


.kss-contact-direct-content {
    min-width: 0;

    display: flex;
    flex-direction: column;
    gap: 2px;
}


.kss-contact-direct-content small {
    color: #98a2b3;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: .14em;
}


.kss-contact-direct-content strong {
    color: #1d2939;

    font-size: 13px;
    font-weight: 700;

    overflow-wrap: anywhere;
}


.kss-contact-direct-arrow {
    margin-left: auto;

    color: #98a2b3;

    transition:
        transform .3s ease,
        color .3s ease;
}


.kss-contact-direct-card:hover
.kss-contact-direct-arrow {
    color: #3158f5;
    transform: translate(3px,-3px);
}


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

.kss-contact-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;

    margin-top: 25px;

    animation:
        kssContactFadeUp .8s .4s ease both;
}


.kss-contact-trust-item {
    display: flex;
    align-items: center;
    gap: 7px;

    color: #667085;

    font-size: 12px;
    font-weight: 600;
}


.kss-contact-trust-item i {
    color: #3158f5;
    font-size: 14px;
}


/* =========================================================
   DIGITAL VISUAL
========================================================= */

.kss-contact-visual {
    position: relative;

    width: 100%;
    min-height: 610px;

    display: flex;
    align-items: center;
    justify-content: center;

    perspective: 1200px;
}


.kss-contact-orbit {
    position: absolute;

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

    border-radius: 50%;

    pointer-events: none;
}


.kss-contact-orbit-one {
    width: 560px;
    height: 560px;

    animation:
        kssContactOrbit 20s linear infinite;
}


.kss-contact-orbit-two {
    width: 430px;
    height: 430px;

    border-style: dashed;

    animation:
        kssContactOrbitReverse 26s linear infinite;
}


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

.kss-contact-phone {
    position: absolute;

    z-index: 5;

    width: 225px;
    height: 460px;

    padding: 9px;

    border-radius: 38px;

    background:
        linear-gradient(
            145deg,
            #202b44,
            #080f20
        );

    box-shadow:
        0 35px 80px rgba(16,24,40,.25),
        inset 0 1px 0 rgba(255,255,255,.18);

    transform:
        rotate(7deg)
        translateX(30px);

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

    transition:
        transform .5s ease;
}


.kss-contact-phone:hover {
    transform:
        rotate(2deg)
        translateX(30px)
        translateY(-8px);
}


.kss-contact-phone-notch {
    position: absolute;

    z-index: 10;

    width: 78px;
    height: 20px;

    top: 15px;
    left: 50%;

    transform: translateX(-50%);

    border-radius: 20px;

    background: #080f20;
}


.kss-contact-phone-screen {
    position: relative;

    width: 100%;
    height: 100%;

    padding: 30px 14px 12px;

    overflow: hidden;

    border-radius: 30px;

    background:
        linear-gradient(
            160deg,
            #f8faff,
            #eef3ff
        );
}


.kss-phone-status {
    display: flex;
    justify-content: space-between;

    color: #475467;

    font-size: 8px;
    font-weight: 700;
}


.kss-phone-status span:last-child {
    display: flex;
    gap: 4px;
}


.kss-phone-header {
    display: flex;
    align-items: center;
    gap: 8px;

    margin-top: 24px;
}


.kss-phone-avatar {
    width: 35px;
    height: 35px;

    display: grid;
    place-items: center;

    border-radius: 11px;

    background: #3158f5;
    color: #ffffff;

    font-size: 10px;
    font-weight: 800;
}


.kss-phone-header > span:nth-child(2) {
    display: flex;
    flex-direction: column;
    gap: 2px;

    flex: 1;
}


.kss-phone-header small {
    color: #98a2b3;
    font-size: 7px;
}


.kss-phone-header strong {
    color: #101828;
    font-size: 11px;
}


.kss-phone-header > i {
    color: #667085;
    font-size: 12px;
}


.kss-phone-chart {
    margin-top: 20px;

    padding: 14px;

    border-radius: 16px;

    background: #3158f5;

    box-shadow:
        0 15px 30px rgba(49,88,245,.22);
}


.kss-chart-label {
    display: flex;
    flex-direction: column;
    gap: 3px;
}


.kss-chart-label span {
    color: rgba(255,255,255,.65);
    font-size: 7px;
}


.kss-chart-label strong {
    color: #ffffff;
    font-size: 21px;
}


.kss-chart-bars {
    height: 80px;

    display: flex;
    align-items: flex-end;
    gap: 6px;

    margin-top: 14px;
}


.kss-chart-bars span {
    flex: 1;

    min-height: 10px;

    border-radius: 4px 4px 2px 2px;

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

    animation:
        kssChartBars 2.5s ease-in-out infinite alternate;
}


.kss-chart-bars span:last-child {
    background: #ffffff;
}


.kss-phone-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 8px;

    margin-top: 10px;
}


.kss-phone-stats > div {
    padding: 12px;

    border-radius: 13px;

    background: #ffffff;

    box-shadow:
        0 5px 18px rgba(16,24,40,.05);
}


.kss-phone-stats small {
    display: block;

    color: #98a2b3;

    font-size: 7px;
}


.kss-phone-stats strong {
    display: block;

    margin-top: 4px;

    color: #101828;

    font-size: 13px;
}


.kss-phone-nav {
    position: absolute;

    left: 14px;
    right: 14px;
    bottom: 10px;

    display: flex;
    justify-content: space-around;

    padding: 9px;

    border-radius: 14px;

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

    box-shadow:
        0 8px 20px rgba(16,24,40,.08);

    color: #98a2b3;

    font-size: 12px;
}


.kss-phone-nav i:first-child {
    color: #3158f5;
}


/* =========================================================
   BROWSER
========================================================= */

.kss-contact-browser {
    position: absolute;

    z-index: 3;

    width: 370px;

    left: 1%;
    top: 105px;

    overflow: hidden;

    border: 1px solid rgba(255,255,255,.75);
    border-radius: 18px;

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

    box-shadow:
        0 30px 70px rgba(16,24,40,.13);

    transform:
        rotate(-4deg)
        translateX(-20px);

    animation:
        kssContactBrowserFloat 6s ease-in-out infinite;
}


.kss-browser-top {
    height: 34px;

    display: flex;
    align-items: center;
    gap: 12px;

    padding: 0 12px;

    border-bottom: 1px solid #edf0f5;

    background: #f8f9fc;
}


.kss-browser-dots {
    display: flex;
    gap: 4px;
}


.kss-browser-dots span {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #cbd2df;
}


.kss-browser-address {
    flex: 1;

    padding: 4px 10px;

    border-radius: 5px;

    background: #ffffff;

    color: #98a2b3;

    text-align: center;

    font-size: 7px;
}


.kss-browser-content {
    padding: 20px;
}


.kss-browser-nav {
    display: flex;
    align-items: center;
    gap: 14px;
}


.kss-browser-nav strong {
    margin-right: auto;

    color: #101828;

    font-size: 10px;
}


.kss-browser-nav span {
    width: 30px;
    height: 4px;

    border-radius: 5px;

    background: #e4e9f2;
}


.kss-browser-hero {
    margin-top: 35px;

    padding: 25px;

    border-radius: 14px;

    background:
        linear-gradient(
            135deg,
            #eef2ff,
            #ffffff
        );
}


.kss-browser-hero small {
    color: #3158f5;

    font-size: 7px;
    font-weight: 800;
    letter-spacing: .12em;
}


.kss-browser-hero strong {
    display: block;

    max-width: 210px;

    margin-top: 8px;

    color: #101828;

    font-size: 25px;
    line-height: 1.05;
    letter-spacing: -.04em;
}


.kss-browser-hero em {
    color: #3158f5;
    font-style: normal;
}


.kss-browser-button {
    display: inline-flex;

    margin-top: 18px;
    padding: 7px 14px;

    border-radius: 7px;

    background: #3158f5;
    color: #ffffff;

    font-size: 7px;
    font-weight: 700;
}


.kss-browser-cards {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 8px;

    margin-top: 12px;
}


.kss-browser-cards span {
    height: 48px;

    border-radius: 9px;

    background: #f0f3f8;
}


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

.kss-contact-floating-card {
    position: absolute;

    z-index: 8;

    display: flex;
    align-items: center;
    gap: 10px;

    min-width: 215px;

    padding: 12px 14px;

    border: 1px solid rgba(255,255,255,.9);
    border-radius: 14px;

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

    backdrop-filter: blur(16px);

    box-shadow:
        0 20px 45px rgba(16,24,40,.12);

    animation:
        kssContactCardFloat 5s ease-in-out infinite;
}


.kss-floating-webapp {
    right: -2%;
    top: 135px;
}


.kss-floating-mobile {
    left: 0;
    bottom: 105px;

    animation-delay: -2s;
}


.kss-floating-icon {
    width: 37px;
    height: 37px;

    display: grid;
    place-items: center;

    border-radius: 10px;

    background: #eef2ff;
    color: #3158f5;

    font-size: 15px;
}


.kss-contact-floating-card > span:nth-child(2) {
    display: flex;
    flex-direction: column;
    gap: 2px;
}


.kss-contact-floating-card small {
    color: #98a2b3;

    font-size: 7px;
    font-weight: 800;
    letter-spacing: .08em;
}


.kss-contact-floating-card strong {
    color: #344054;

    font-size: 10px;
}


.kss-floating-check {
    margin-left: auto;

    color: #22c55e;

    font-size: 13px;
}


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

.kss-contact-particle {
    position: absolute;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #3158f5;

    box-shadow:
        0 0 0 7px rgba(49,88,245,.08);

    animation:
        kssContactParticle 4s ease-in-out infinite;
}


.particle-one {
    top: 8%;
    left: 47%;
}


.particle-two {
    top: 43%;
    right: 4%;
    animation-delay: -1s;
}


.particle-three {
    bottom: 18%;
    left: 20%;
    animation-delay: -2s;
}


.particle-four {
    bottom: 35%;
    right: 22%;
    animation-delay: -3s;
}


/* =========================================================
   START PROJECT
========================================================= */

.kss-contact-start {
    position: relative;

    padding: 115px 0;

    background: #ffffff;
}


.kss-contact-start-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;

    margin-bottom: 45px;
}


.kss-contact-section-label {
    display: block;

    margin-bottom: 14px;

    color: #3158f5;

    font-size: 11px;
    font-weight: 800;
    letter-spacing: .16em;
}


.kss-contact-start-header h2 {
    margin: 0;

    color: #101828;

    font-size: clamp(36px, 4vw, 56px);
    line-height: 1;
    letter-spacing: -.045em;
}


.kss-contact-start-header h2 span {
    color: #3158f5;
}


.kss-contact-start-header p {
    margin: 18px 0 0;

    color: #667085;

    font-size: 16px;
}


.kss-contact-step-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
}


.kss-contact-step-indicator span {
    width: 32px;
    height: 32px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: #f3f5f9;

    color: #98a2b3;

    font-size: 10px;
    font-weight: 800;
}


.kss-contact-step-indicator span:nth-child(even) {
    width: 25px;
    height: 1px;

    border-radius: 0;

    background: #e4e7ec;
}


.kss-contact-step-indicator .kss-step-active {
    background: #3158f5;
    color: #ffffff;

    box-shadow:
        0 8px 20px rgba(49,88,245,.22);
}


/* =========================================================
   FORM SHELL
========================================================= */

.kss-contact-form-shell {
    overflow: hidden;

    border: 1px solid #e7ebf2;
    border-radius: 26px;

    background: #ffffff;

    box-shadow:
        0 30px 90px rgba(16,24,40,.08);
}


.kss-contact-form {
    padding: 48px;
}


.kss-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}


.kss-form-group {
    margin-bottom: 24px;
}


.kss-form-group label {
    display: block;

    margin-bottom: 9px;

    color: #344054;

    font-size: 12px;
    font-weight: 700;
}


.kss-input-wrap {
    position: relative;
}


.kss-input-wrap > i {
    position: absolute;

    left: 16px;
    top: 50%;

    transform: translateY(-50%);

    color: #98a2b3;

    font-size: 15px;

    pointer-events: none;

    transition: color .25s ease;
}


.kss-input-wrap input,
.kss-input-wrap textarea {
    width: 100%;

    border: 1px solid #e4e7ec;
    border-radius: 12px;

    background: #fbfcfe;

    color: #101828;

    font-size: 14px;

    outline: none;

    transition:
        border-color .25s ease,
        box-shadow .25s ease,
        background .25s ease;
}


.kss-input-wrap input {
    height: 52px;

    padding: 0 16px 0 44px;
}


.kss-input-wrap textarea {
    min-height: 135px;

    padding: 16px 16px 16px 44px;

    resize: vertical;
}


.kss-input-wrap input::placeholder,
.kss-input-wrap textarea::placeholder {
    color: #b0b7c4;
}


.kss-input-wrap:focus-within > i {
    color: #3158f5;
}


.kss-input-wrap:focus-within input,
.kss-input-wrap:focus-within textarea {
    border-color: rgba(49,88,245,.55);

    background: #ffffff;

    box-shadow:
        0 0 0 4px rgba(49,88,245,.08);
}


/* =========================================================
   PROJECT OPTIONS
========================================================= */

.kss-project-options {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 10px;
}


.kss-project-option {
    position: relative;

    cursor: pointer;
}


.kss-project-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}


.kss-project-option > span {
    display: flex;
    align-items: center;
    gap: 10px;

    min-height: 70px;

    padding: 12px;

    border: 1px solid #e4e7ec;
    border-radius: 13px;

    background: #fbfcfe;

    transition:
        border-color .25s ease,
        background .25s ease,
        transform .25s ease,
        box-shadow .25s ease;
}


.kss-project-option > span > i {
    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    flex: 0 0 auto;

    border-radius: 10px;

    background: #f0f3ff;
    color: #3158f5;

    font-size: 15px;
}


.kss-project-option strong {
    display: block;

    color: #344054;

    font-size: 11px;
}


.kss-project-option small {
    display: block;

    margin-top: 3px;

    color: #98a2b3;

    font-size: 9px;
}


.kss-project-option:hover > span {
    transform: translateY(-2px);

    border-color: rgba(49,88,245,.30);

    box-shadow:
        0 10px 25px rgba(16,24,40,.06);
}


.kss-project-option input:checked + span {
    border-color: #3158f5;

    background:
        linear-gradient(
            135deg,
            #f1f4ff,
            #ffffff
        );

    box-shadow:
        0 10px 30px rgba(49,88,245,.10);
}


.kss-project-option input:checked + span > i {
    background: #3158f5;
    color: #ffffff;
}


/* =========================================================
   FORM FOOTER
========================================================= */

.kss-form-footer {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px;

    margin-top: 10px;
}


.kss-contact-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 18px;

    min-height: 54px;

    padding: 0 22px;

    border: 0;
    border-radius: 13px;

    background:
        linear-gradient(
            135deg,
            #3158f5,
            #4d6fff
        );

    color: #ffffff;

    font-size: 13px;
    font-weight: 700;

    cursor: pointer;

    box-shadow:
        0 14px 30px rgba(49,88,245,.22);

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


.kss-contact-submit i {
    transition: transform .3s ease;
}


.kss-contact-submit:hover {
    transform: translateY(-3px);

    box-shadow:
        0 20px 40px rgba(49,88,245,.30);
}


.kss-contact-submit:hover i {
    transform: translateX(5px);
}


.kss-form-note {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    color: #98a2b3;

    font-size: 10px;
}


.kss-form-note i {
    color: #22c55e;
    font-size: 13px;
}


/* =========================================================
   SIDE PANEL
========================================================= */

.kss-contact-side {
    position: relative;

    height: 100%;

    min-height: 650px;

    overflow: hidden;

    padding: 48px;

    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(91,117,255,.30),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            #111a35,
            #17234a 55%,
            #243e8e
        );

    color: #ffffff;
}


.kss-contact-side-orb {
    position: absolute;

    width: 360px;
    height: 360px;

    right: -180px;
    top: -100px;

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

    border-radius: 50%;

    box-shadow:
        0 0 0 60px rgba(255,255,255,.025),
        0 0 0 120px rgba(255,255,255,.018);

    animation:
        kssContactOrbit 18s linear infinite;
}


.kss-contact-side-label {
    position: relative;

    display: inline-block;

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

    font-size: 9px;
    font-weight: 800;
    letter-spacing: .16em;
}


.kss-contact-side h3 {
    position: relative;

    max-width: 400px;

    margin: 24px 0 18px;

    font-size: 38px;
    line-height: 1.04;
    letter-spacing: -.04em;
}


.kss-contact-side h3 span {
    color: #7f9aff;
}


.kss-contact-side > p {
    position: relative;

    max-width: 390px;

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

    font-size: 14px;
    line-height: 1.75;
}


/* =========================================================
   MINI PROCESS
========================================================= */

.kss-mini-process {
    position: relative;

    margin-top: 45px;
}


.kss-mini-process-item {
    display: flex;
    align-items: center;
    gap: 14px;
}


.kss-mini-process-item > span {
    width: 36px;
    height: 36px;

    display: grid;
    place-items: center;

    flex: 0 0 auto;

    border: 1px solid rgba(255,255,255,.15);
    border-radius: 50%;

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

    font-size: 9px;
    font-weight: 800;

    background: rgba(255,255,255,.06);
}


.kss-mini-process-item:first-child > span {
    border-color: rgba(126,154,255,.7);

    background: rgba(126,154,255,.15);

    color: #ffffff;
}


.kss-mini-process-item div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}


.kss-mini-process-item strong {
    color: #ffffff;

    font-size: 12px;
}


.kss-mini-process-item small {
    color: rgba(255,255,255,.48);

    font-size: 9px;
}


.kss-mini-process-line {
    width: 1px;
    height: 28px;

    margin-left: 18px;

    background:
        linear-gradient(
            to bottom,
            rgba(126,154,255,.6),
            rgba(255,255,255,.05)
        );
}


/* =========================================================
   SIDE BOTTOM
========================================================= */

.kss-contact-side-bottom {
    position: absolute;

    left: 48px;
    right: 48px;
    bottom: 42px;

    display: flex;
    align-items: center;
    gap: 12px;

    padding-top: 22px;

    border-top: 1px solid rgba(255,255,255,.10);
}


.kss-contact-side-bottom > i {
    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    border-radius: 11px;

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

    color: #9eb2ff;
}


.kss-contact-side-bottom span {
    display: flex;
    flex-direction: column;
    gap: 2px;
}


.kss-contact-side-bottom strong {
    font-size: 11px;
}


.kss-contact-side-bottom small {
    color: rgba(255,255,255,.48);

    font-size: 9px;
}


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

.kss-contact-bottom {
    padding: 0 0 110px;
}


.kss-contact-bottom-card {
    position: relative;

    display: flex;
    align-items: center;
    gap: 22px;

    padding: 35px 40px;

    overflow: hidden;

    border: 1px solid #e5eaf2;
    border-radius: 22px;

    background:
        linear-gradient(
            135deg,
            #f8faff,
            #ffffff
        );

    box-shadow:
        0 20px 60px rgba(16,24,40,.055);
}


.kss-contact-bottom-card::after {
    content: "";

    position: absolute;

    width: 220px;
    height: 220px;

    right: -100px;
    top: -110px;

    border-radius: 50%;

    background: rgba(49,88,245,.06);
}


.kss-bottom-icon {
    width: 52px;
    height: 52px;

    display: grid;
    place-items: center;

    flex: 0 0 auto;

    border-radius: 15px;

    background: #3158f5;
    color: #ffffff;

    font-size: 20px;

    box-shadow:
        0 12px 25px rgba(49,88,245,.20);

    animation:
        kssContactPulse 3s infinite;
}


.kss-contact-bottom-card > div:nth-child(2) {
    flex: 1;
}


.kss-contact-bottom-card > div:nth-child(2) > span {
    color: #98a2b3;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: .14em;
}


.kss-contact-bottom-card h2 {
    margin: 5px 0 0;

    color: #101828;

    font-size: 24px;
    letter-spacing: -.03em;
}


.kss-bottom-email {
    position: relative;
    z-index: 2;

    display: inline-flex;
    align-items: center;
    gap: 10px;

    padding: 13px 18px;

    border-radius: 10px;

    background: #101828;
    color: #ffffff;

    text-decoration: none;

    font-size: 11px;
    font-weight: 700;

    transition:
        transform .3s ease,
        background .3s ease;
}


.kss-bottom-email:hover {
    transform: translateY(-2px);

    background: #3158f5;

    color: #ffffff;
}


.kss-bottom-email i {
    transition: transform .3s ease;
}


.kss-bottom-email:hover i {
    transform: translate(2px,-2px);
}


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

@keyframes kssContactFadeUp {

    from {
        opacity: 0;
        transform: translateY(24px);
    }

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

}


@keyframes kssContactPulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.08);
    }

}


@keyframes kssContactPhoneFloat {

    0%,
    100% {
        transform:
            rotate(7deg)
            translateX(30px)
            translateY(0);
    }

    50% {
        transform:
            rotate(5deg)
            translateX(30px)
            translateY(-14px);
    }

}


@keyframes kssContactBrowserFloat {

    0%,
    100% {
        transform:
            rotate(-4deg)
            translateX(-20px)
            translateY(0);
    }

    50% {
        transform:
            rotate(-2deg)
            translateX(-20px)
            translateY(-10px);
    }

}


@keyframes kssContactCardFloat {

    0%,
    100% {
        transform: translateY(0);
    }

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

}


@keyframes kssContactOrbit {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}


@keyframes kssContactOrbitReverse {

    from {
        transform: rotate(360deg);
    }

    to {
        transform: rotate(0deg);
    }

}


@keyframes kssContactParticle {

    0%,
    100% {
        transform: translate(0,0);
        opacity: .5;
    }

    50% {
        transform: translate(0,-16px);
        opacity: 1;
    }

}


@keyframes kssChartBars {

    from {
        opacity: .65;
        transform: scaleY(.88);
        transform-origin: bottom;
    }

    to {
        opacity: 1;
        transform: scaleY(1);
        transform-origin: bottom;
    }

}


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

@media (max-width: 1199px) {

    .kss-contact-visual {
        min-height: 560px;
    }

    .kss-contact-browser {
        width: 330px;
        left: -2%;
    }

    .kss-contact-phone {
        width: 205px;
        height: 420px;
    }

    .kss-floating-webapp {
        right: -5%;
    }

}


@media (max-width: 991px) {

    .kss-contact-hero {
        min-height: auto;

        padding:
            85px 0
            70px;
    }


    .kss-contact-intro {
        max-width: 760px;
        margin: 0 auto;
        text-align: center;
    }


    .kss-contact-description {
        margin-left: auto;
        margin-right: auto;
    }


    .kss-contact-direct,
    .kss-contact-trust {
        justify-content: center;
    }


    .kss-contact-visual {
        max-width: 650px;

        margin:
            30px auto
            0;
    }


    .kss-contact-start {
        padding: 80px 0;
    }


    .kss-contact-start-header {
        align-items: flex-start;
        flex-direction: column;
    }


    .kss-contact-form {
        padding: 35px;
    }


    .kss-contact-side {
        min-height: 520px;
    }


    .kss-contact-bottom-card {
        flex-wrap: wrap;
    }

}


@media (max-width: 767px) {

    .kss-contact-title {
        font-size: clamp(42px, 12vw, 60px);
    }


    .kss-contact-description {
        font-size: 16px;
    }


    .kss-contact-direct {
        flex-direction: column;
    }


    .kss-contact-direct-card {
        width: 100%;
        min-width: 0;
        text-align: left;
    }


    .kss-contact-visual {
        min-height: 500px;
        transform: scale(.86);
        transform-origin: center;
        margin-top: -10px;
        margin-bottom: -20px;
    }


    .kss-contact-browser {
        width: 290px;
        left: 0;
        top: 90px;
    }


    .kss-contact-phone {
        width: 185px;
        height: 380px;

        transform:
            rotate(7deg)
            translateX(25px);
    }


    .kss-contact-floating-card {
        min-width: 185px;
    }


    .kss-floating-webapp {
        right: -5%;
        top: 100px;
    }


    .kss-floating-mobile {
        left: -4%;
        bottom: 80px;
    }


    .kss-form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }


    .kss-project-options {
        grid-template-columns: 1fr;
    }


    .kss-contact-form {
        padding: 28px 22px;
    }


    .kss-contact-side {
        min-height: 570px;
        padding: 35px 25px;
    }


    .kss-contact-side h3 {
        font-size: 32px;
    }


    .kss-contact-side-bottom {
        left: 25px;
        right: 25px;
    }


    .kss-contact-bottom-card {
        padding: 28px 24px;
        align-items: flex-start;
    }


    .kss-contact-bottom-card h2 {
        font-size: 20px;
    }


    .kss-bottom-email {
        width: 100%;
        justify-content: center;
    }

}


@media (max-width: 480px) {

    .kss-contact-hero {
        padding-top: 65px;
    }


    .kss-contact-eyebrow {
        font-size: 9px;
    }


    .kss-contact-trust {
        gap: 12px 18px;
    }


    .kss-contact-visual {
        min-height: 430px;

        transform: scale(.70);
        margin:
            -35px
            auto
            -50px;
    }


    .kss-contact-start-header h2 {
        font-size: 38px;
    }


    .kss-contact-step-indicator {
        display: none;
    }


    .kss-contact-form-shell {
        border-radius: 18px;
    }


    .kss-form-footer {
        align-items: stretch;
        flex-direction: column;
    }


    .kss-contact-submit {
        width: 100%;
    }

}


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

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

    .kss-contact-page *,
    .kss-contact-page *::before,
    .kss-contact-page *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }

}
/* =========================================================
   KSS ABOUT PAGE
   Premium / Animated / Responsive
========================================================= */


/* =========================================================
   VARIABLES
========================================================= */

.kss-about-page {

    --about-dark: #07111f;
    --about-dark-2: #0b1728;
    --about-text: #182334;
    --about-muted: #687386;
    --about-border: rgba(15, 23, 42, .09);
    --about-primary: #2563eb;
    --about-primary-dark: #1746b0;
    --about-surface: #f7f9fc;
    --about-white: #ffffff;

    overflow: hidden;
}


/* =========================================================
   COMMON
========================================================= */

.kss-about-page a {
    text-decoration: none;
}

.kss-about-page p {
    line-height: 1.8;
}

.kss-about-section-label {

    display: flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 18px;
}

.kss-about-section-label::before {

    content: "";

    width: 28px;
    height: 2px;

    background: var(--about-primary);
}

.kss-about-section-label span {

    font-size: 12px;
    font-weight: 800;

    letter-spacing: .18em;

    color: var(--about-primary);
}

.kss-about-section-title {

    margin: 0;

    color: var(--about-text);

    font-size: clamp(34px, 4vw, 58px);

    font-weight: 800;

    line-height: 1.08;

    letter-spacing: -.04em;
}

.kss-about-section-title span {

    display: inline;

    background: linear-gradient(
        90deg,
        #2563eb,
        #7c3aed
    );

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

    -webkit-text-fill-color: transparent;
}


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

.kss-about-hero {

    position: relative;

    min-height: 760px;

    display: flex;
    align-items: center;

    background:
        radial-gradient(
            circle at 85% 25%,
            rgba(37, 99, 235, .18),
            transparent 30%
        ),
        radial-gradient(
            circle at 20% 80%,
            rgba(124, 58, 237, .12),
            transparent 30%
        ),
        var(--about-dark);

    color: #fff;

    overflow: hidden;
}

.min-vh-75 {
    min-height: 720px;
}


/* grid */

.kss-about-hero-grid {

    position: absolute;
    inset: 0;

    opacity: .25;

    background-image:
        linear-gradient(
            rgba(255,255,255,.05) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.05) 1px,
            transparent 1px
        );

    background-size: 70px 70px;

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


/* orbs */

.kss-about-orb {

    position: absolute;

    border-radius: 50%;

    filter: blur(1px);

    pointer-events: none;
}

.kss-about-orb-one {

    width: 420px;
    height: 420px;

    right: -160px;
    top: 90px;

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

    animation: aboutOrbFloat 8s ease-in-out infinite;
}

.kss-about-orb-two {

    width: 260px;
    height: 260px;

    left: -100px;
    bottom: 30px;

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

    animation: aboutOrbFloat 10s ease-in-out infinite reverse;
}


/* eyebrow */

.kss-about-eyebrow {

    display: inline-flex;
    align-items: center;
    gap: 10px;

    padding: 9px 15px;

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

    border-radius: 100px;

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

    backdrop-filter: blur(10px);

    font-size: 12px;
    font-weight: 700;

    letter-spacing: .04em;

    color: rgba(255,255,255,.82);
}

.kss-about-eyebrow-dot {

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #4ade80;

    box-shadow: 0 0 0 5px rgba(74,222,128,.1);

    animation: aboutPulse 2s infinite;
}


/* hero title */

.kss-about-hero-title {

    max-width: 850px;

    margin: 25px 0 22px;

    font-size: clamp(48px, 6vw, 86px);

    font-weight: 800;

    line-height: .99;

    letter-spacing: -.065em;
}

.kss-about-hero-title span {

    display: block;

    background: linear-gradient(
        90deg,
        #60a5fa,
        #a78bfa,
        #60a5fa
    );

    background-size: 200% auto;

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

    -webkit-text-fill-color: transparent;

    animation: aboutGradient 5s linear infinite;
}


/* hero description */

.kss-about-hero-description {

    max-width: 690px;

    margin-bottom: 32px;

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

    font-size: 18px;

    line-height: 1.8;
}


/* buttons */

.kss-about-hero-actions {

    display: flex;

    flex-wrap: wrap;

    gap: 13px;
}

.kss-about-btn {

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;

    min-height: 54px;

    padding: 0 23px;

    border-radius: 12px;

    font-size: 14px;
    font-weight: 700;

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

.kss-about-btn:hover {

    transform: translateY(-3px);
}

.kss-about-btn-primary {

    color: #fff;

    background: linear-gradient(
        135deg,
        #2563eb,
        #4f46e5
    );

    box-shadow:
        0 14px 35px rgba(37,99,235,.28);
}

.kss-about-btn-primary:hover {

    color: #fff;

    box-shadow:
        0 20px 45px rgba(37,99,235,.38);
}

.kss-about-btn-ghost {

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

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

    background: rgba(255,255,255,.04);
}

.kss-about-btn-ghost:hover {

    color: #fff;

    background: rgba(255,255,255,.09);
}


/* hero trust */

.kss-about-hero-trust {

    display: flex;
    align-items: center;

    margin-top: 42px;

    gap: 20px;
}

.kss-about-trust-item {

    display: flex;
    flex-direction: column;
}

.kss-about-trust-item strong {

    font-size: 18px;
    font-weight: 800;

    color: #fff;
}

.kss-about-trust-item span {

    font-size: 11px;

    color: rgba(255,255,255,.48);
}

.kss-about-trust-divider {

    width: 1px;
    height: 30px;

    background: rgba(255,255,255,.12);
}


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

.kss-about-hero-visual {

    position: relative;

    width: 100%;
    height: 570px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.kss-about-visual-glow {

    position: absolute;

    width: 330px;
    height: 330px;

    border-radius: 50%;

    background: rgba(37,99,235,.22);

    filter: blur(65px);

    animation: aboutGlow 5s ease-in-out infinite;
}


/* core */

.kss-about-core-orbit {

    position: relative;

    width: 290px;
    height: 290px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.kss-about-core-ring {

    position: absolute;

    inset: 0;

    border: 1px solid rgba(96,165,250,.18);

    border-radius: 50%;
}

.ring-one {

    transform: scale(1.05);

    animation: aboutRotate 18s linear infinite;
}

.ring-two {

    transform: scale(1.3);

    border-style: dashed;

    animation: aboutRotateReverse 24s linear infinite;
}

.ring-three {

    transform: scale(1.58);

    opacity: .45;

    animation: aboutRotate 30s linear infinite;
}

.kss-about-core {

    width: 145px;
    height: 145px;

    border-radius: 50%;

    padding: 1px;

    background: linear-gradient(
        135deg,
        #60a5fa,
        #7c3aed
    );

    box-shadow:
        0 0 80px rgba(37,99,235,.35);
}

.kss-about-core-inner {

    width: 100%;
    height: 100%;

    border-radius: inherit;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 7px;

    background: #091525;

    font-weight: 800;

    font-size: 16px;
}

.kss-about-core-inner i {

    font-size: 35px;

    color: #60a5fa;
}


/* floating cards */

.kss-about-floating-card {

    position: absolute;

    z-index: 5;

    display: flex;
    align-items: center;
    gap: 12px;

    padding: 13px 16px;

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

    border-radius: 14px;

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

    backdrop-filter: blur(18px);

    box-shadow: 0 20px 50px rgba(0,0,0,.2);

    animation: aboutCardFloat 5s ease-in-out infinite;
}

.kss-about-floating-card strong {

    display: block;

    font-size: 12px;
}

.kss-about-floating-card span {

    display: block;

    margin-top: 2px;

    font-size: 10px;

    color: rgba(255,255,255,.48);
}

.kss-about-card-icon {

    width: 38px;
    height: 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 10px;

    background: rgba(96,165,250,.12);

    color: #60a5fa;
}

.card-one {

    top: 70px;
    left: 0;
}

.card-two {

    right: -15px;
    top: 205px;

    animation-delay: -1.5s;
}

.card-three {

    left: 15px;
    bottom: 70px;

    animation-delay: -3s;
}


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

.kss-about-scroll-indicator {

    position: absolute;

    left: 50%;
    bottom: 28px;

    transform: translateX(-50%);

    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 7px;

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

    font-size: 10px;

    letter-spacing: .12em;

    text-transform: uppercase;
}

.kss-about-scroll-indicator i {

    animation: aboutBounce 1.8s infinite;
}


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

.kss-about-intro {

    padding: 125px 0;

    background: #fff;
}

.kss-about-intro-copy {

    color: var(--about-muted);

    font-size: 16px;
}

.kss-about-intro-copy .lead {

    color: var(--about-text);

    font-size: 25px;

    line-height: 1.45;
}


/* =========================================================
   CAPABILITIES
========================================================= */

.kss-about-capabilities {

    padding: 120px 0;

    background: var(--about-surface);
}

.kss-about-heading {

    max-width: 720px;

    margin: 0 auto 65px;
}

.kss-about-heading p {

    margin-top: 20px;

    color: var(--about-muted);
}


.kss-about-capability-card {

    position: relative;

    height: 100%;

    padding: 35px;

    border: 1px solid var(--about-border);

    border-radius: 22px;

    background: #fff;

    overflow: hidden;

    transition:
        transform .4s cubic-bezier(.2,.8,.2,1),
        box-shadow .4s ease,
        border-color .4s ease;
}

.kss-about-capability-card::before {

    content: "";

    position: absolute;

    width: 150px;
    height: 150px;

    right: -80px;
    top: -80px;

    border-radius: 50%;

    background: rgba(37,99,235,.06);

    transition: transform .5s ease;
}

.kss-about-capability-card:hover {

    transform: translateY(-10px);

    border-color: rgba(37,99,235,.2);

    box-shadow:
        0 25px 60px rgba(15,23,42,.09);
}

.kss-about-capability-card:hover::before {

    transform: scale(2);
}

.kss-about-capability-number {

    position: absolute;

    top: 25px;
    right: 28px;

    color: #dbe3ee;

    font-size: 12px;
    font-weight: 800;
}

.kss-about-capability-icon {

    width: 55px;
    height: 55px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 30px;

    border-radius: 15px;

    color: var(--about-primary);

    background: #eff6ff;

    font-size: 23px;

    transition:
        transform .4s ease,
        background .4s ease;
}

.kss-about-capability-card:hover
.kss-about-capability-icon {

    transform: rotate(-5deg) scale(1.08);

    background: var(--about-primary);

    color: #fff;
}

.kss-about-capability-card h3 {

    margin-bottom: 15px;

    color: var(--about-text);

    font-size: 21px;
    font-weight: 800;
}

.kss-about-capability-card p {

    min-height: 125px;

    color: var(--about-muted);

    font-size: 14px;
}

.kss-about-capability-card a {

    display: inline-flex;
    align-items: center;
    gap: 8px;

    color: var(--about-primary);

    font-size: 13px;
    font-weight: 800;
}

.kss-about-capability-card a i {

    transition: transform .3s ease;
}

.kss-about-capability-card:hover a i {

    transform: translate(3px,-3px);
}


/* =========================================================
   MANUFACTURING
========================================================= */

.kss-about-manufacturing {

    position: relative;

    padding: 130px 0;

    background: #fff;

    overflow: hidden;
}

.kss-about-manufacturing-pattern {

    position: absolute;

    width: 600px;
    height: 600px;

    right: -300px;
    top: -200px;

    border-radius: 50%;

    border: 1px solid rgba(37,99,235,.06);

    box-shadow:
        0 0 0 80px rgba(37,99,235,.025),
        0 0 0 160px rgba(37,99,235,.018);
}

.kss-about-manufacturing p {

    color: var(--about-muted);
}

.kss-about-manufacturing-lead {

    margin-top: 28px;

    color: var(--about-text) !important;

    font-size: 21px;

    font-weight: 600;

    line-height: 1.6 !important;
}

.kss-about-text-link {

    display: inline-flex;
    align-items: center;
    gap: 10px;

    margin-top: 15px;

    color: var(--about-primary);

    font-size: 14px;
    font-weight: 800;
}

.kss-about-text-link i {

    transition: transform .3s ease;
}

.kss-about-text-link:hover i {

    transform: translate(4px,-4px);
}


/* network */

.kss-about-network {

    position: relative;

    width: 470px;
    height: 470px;

    margin: auto;
}

.kss-about-network-node {

    position: absolute;

    z-index: 3;

    width: 105px;
    height: 105px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 6px;

    border: 1px solid rgba(37,99,235,.12);

    border-radius: 50%;

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

    box-shadow:
        0 15px 40px rgba(15,23,42,.08);

    color: var(--about-text);

    font-size: 11px;
    font-weight: 700;

    animation: aboutNodeFloat 4s ease-in-out infinite;
}

.kss-about-network-node i {

    color: var(--about-primary);

    font-size: 21px;
}

.node-center {

    width: 145px;
    height: 145px;

    left: 50%;
    top: 50%;

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

    background: linear-gradient(
        135deg,
        #eff6ff,
        #f5f3ff
    );

    border-color: rgba(37,99,235,.2);

    animation-delay: -.5s;
}

.node-center i {

    font-size: 29px;
}

.node-top {

    top: 5px;
    left: 50%;

    transform: translateX(-50%);
}

.node-right {

    right: 5px;
    top: 50%;

    transform: translateY(-50%);

    animation-delay: -1s;
}

.node-bottom {

    bottom: 5px;
    left: 50%;

    transform: translateX(-50%);

    animation-delay: -2s;
}

.node-left {

    left: 5px;
    top: 50%;

    transform: translateY(-50%);

    animation-delay: -3s;
}


/* network lines */

.kss-about-network-line {

    position: absolute;

    left: 50%;
    top: 50%;

    height: 1px;

    width: 160px;

    transform-origin: left center;

    background: linear-gradient(
        90deg,
        rgba(37,99,235,.3),
        rgba(37,99,235,.02)
    );
}

.line-a {
    transform: rotate(-90deg);
}

.line-b {
    transform: rotate(0deg);
}

.line-c {
    transform: rotate(90deg);
}

.line-d {
    transform: rotate(180deg);
}


/* =========================================================
   STATS
========================================================= */

.kss-about-stats {

    padding: 65px 0;

    background: var(--about-dark);
}

.kss-about-stats-wrapper {

    display: grid;

    grid-template-columns:
        1fr
        auto
        1fr
        auto
        1fr
        auto
        1fr;

    align-items: center;

    gap: 30px;
}

.kss-about-stat {

    text-align: center;
}

.kss-about-stat strong {

    display: block;

    color: #fff;

    font-size: 48px;

    font-weight: 800;

    line-height: 1;
}

.kss-about-stat strong span {

    color: #60a5fa;
}

.kss-about-stat p {

    margin: 10px 0 0;

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

    font-size: 12px;
}

.kss-about-stat-divider {

    width: 1px;
    height: 45px;

    background: rgba(255,255,255,.1);
}


/* =========================================================
   WHY
========================================================= */

.kss-about-why {

    padding: 130px 0;

    background: #fff;
}

.kss-about-why-intro {

    max-width: 400px;

    margin-top: 30px;

    color: var(--about-muted);

    font-size: 17px;
}

.kss-about-reasons {

    display: flex;
    flex-direction: column;

    gap: 10px;
}

.kss-about-reason {

    display: flex;

    gap: 22px;

    padding: 27px;

    border-radius: 18px;

    transition:
        background .3s ease,
        transform .3s ease;
}

.kss-about-reason:hover {

    background: var(--about-surface);

    transform: translateX(7px);
}

.kss-about-reason-icon {

    flex: 0 0 48px;

    width: 48px;
    height: 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 13px;

    background: #eff6ff;

    color: var(--about-primary);

    font-size: 19px;
}

.kss-about-reason h3 {

    margin-bottom: 7px;

    color: var(--about-text);

    font-size: 17px;
    font-weight: 800;
}

.kss-about-reason p {

    margin: 0;

    color: var(--about-muted);

    font-size: 13px;
}


/* =========================================================
   TRANSFORMATION
========================================================= */

.kss-about-transformation {

    padding: 0 0 130px;

    background: #fff;
}

.kss-about-transformation-box {

    position: relative;

    min-height: 520px;

    display: flex;
    align-items: center;

    padding: 80px;

    border-radius: 30px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 90% 20%,
            rgba(96,165,250,.18),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #07111f,
            #101b30
        );

    color: #fff;
}

.kss-about-transformation-content {

    position: relative;

    z-index: 2;

    max-width: 600px;
}

.kss-about-transformation-content
.kss-about-section-label span {

    color: #60a5fa;
}

.kss-about-transformation-content
.kss-about-section-label::before {

    background: #60a5fa;
}

.kss-about-transformation-content h2 {

    margin: 0 0 25px;

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

    line-height: 1.05;

    font-weight: 800;

    letter-spacing: -.05em;
}

.kss-about-transformation-content h2 span {

    color: #60a5fa;
}

.kss-about-transformation-content p {

    max-width: 580px;

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

    font-size: 16px;
}

.kss-about-btn-light {

    margin-top: 15px;

    color: #07111f;

    background: #fff;
}

.kss-about-btn-light:hover {

    color: #07111f;

    box-shadow:
        0 15px 35px rgba(0,0,0,.2);
}


/* transformation visual */

.kss-about-transformation-visual {

    position: absolute;

    right: 70px;
    top: 50%;

    width: 360px;
    height: 360px;

    transform: translateY(-50%);
}

.kss-about-data-orbit {

    position: relative;

    width: 100%;
    height: 100%;

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

    border-radius: 50%;

    animation: aboutRotate 25s linear infinite;
}

.kss-about-data-orbit::before,
.kss-about-data-orbit::after {

    content: "";

    position: absolute;

    inset: 45px;

    border: 1px dashed rgba(96,165,250,.15);

    border-radius: 50%;
}

.kss-about-data-orbit::after {

    inset: 95px;

    border-style: solid;
}

.data-core {

    position: absolute;

    left: 50%;
    top: 50%;

    width: 90px;
    height: 90px;

    display: flex;
    align-items: center;
    justify-content: center;

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

    border-radius: 50%;

    color: #60a5fa;

    background: #0b1728;

    border: 1px solid rgba(96,165,250,.25);

    box-shadow: 0 0 50px rgba(37,99,235,.25);

    font-size: 30px;

    animation: aboutCounterRotate 25s linear infinite;
}

.data-dot {

    position: absolute;

    width: 9px;
    height: 9px;

    border-radius: 50%;

    background: #60a5fa;

    box-shadow: 0 0 20px rgba(96,165,250,.8);
}

.dot-1 { top: 15%; left: 50%; }
.dot-2 { top: 50%; right: 8%; }
.dot-3 { bottom: 15%; left: 50%; }
.dot-4 { top: 50%; left: 8%; }
.dot-5 { top: 24%; right: 22%; }


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

.kss-about-cta {

    position: relative;

    padding: 125px 0;

    background: var(--about-surface);

    overflow: hidden;
}

.kss-about-cta-glow {

    position: absolute;

    width: 500px;
    height: 500px;

    left: 50%;
    top: 50%;

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

    border-radius: 50%;

    background: rgba(37,99,235,.07);

    filter: blur(70px);

    animation: aboutGlow 7s ease-in-out infinite;
}

.kss-about-cta h2 {

    position: relative;

    max-width: 800px;

    margin: 0 auto 22px;

    color: var(--about-text);

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

    line-height: 1.02;

    font-weight: 800;

    letter-spacing: -.055em;
}

.kss-about-cta h2 span {

    display: block;

    color: var(--about-primary);
}

.kss-about-cta p {

    position: relative;

    max-width: 570px;

    margin: 0 auto 30px;

    color: var(--about-muted);

    font-size: 16px;
}

.kss-about-btn-large {

    position: relative;

    min-height: 60px;

    padding: 0 30px;
}


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

@keyframes aboutPulse {

    0%,100% {
        box-shadow:
            0 0 0 5px rgba(74,222,128,.1);
    }

    50% {
        box-shadow:
            0 0 0 10px rgba(74,222,128,.02);
    }
}

@keyframes aboutGradient {

    to {
        background-position: 200% center;
    }
}

@keyframes aboutOrbFloat {

    0%,100% {
        transform: translateY(0) scale(1);
    }

    50% {
        transform: translateY(-20px) scale(1.03);
    }
}

@keyframes aboutGlow {

    0%,100% {
        transform: scale(.95);
        opacity: .7;
    }

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

@keyframes aboutRotate {

    from {
        transform: rotate(0deg);
    }

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

@keyframes aboutRotateReverse {

    from {
        transform: rotate(360deg);
    }

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

@keyframes aboutCounterRotate {

    from {
        transform: translate(-50%,-50%) rotate(0deg);
    }

    to {
        transform: translate(-50%,-50%) rotate(-360deg);
    }
}

@keyframes aboutCardFloat {

    0%,100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-12px);
    }
}

@keyframes aboutNodeFloat {

    0%,100% {
        margin-top: 0;
    }

    50% {
        margin-top: -7px;
    }
}

@keyframes aboutBounce {

    0%,100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(6px);
    }
}

@keyframes aboutFadeUp {

    from {
        opacity: 0;
        transform: translateY(25px);
    }

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

@keyframes aboutScaleIn {

    from {
        opacity: 0;
        transform: scale(.92);
    }

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


/* =========================================================
   INITIAL ANIMATION CLASSES
========================================================= */

.animate-fade-up {

    animation:
        aboutFadeUp .8s cubic-bezier(.2,.8,.2,1) both;
}

.animate-scale-in {

    animation:
        aboutScaleIn 1s cubic-bezier(.2,.8,.2,1) both;
}

.delay-1 {
    animation-delay: .12s;
}

.delay-2 {
    animation-delay: .24s;
}

.delay-3 {
    animation-delay: .36s;
}

.delay-4 {
    animation-delay: .48s;
}


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

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

    .kss-about-page *,
    .kss-about-page *::before,
    .kss-about-page *::after {

        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}