/* =========================================================
   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);
    }
}