/* =========================================================
           KIDSECURE - GLOBAL VARIABLES
        ========================================================= */

        :root {
            --navy: #0E0526;
            --navy-2: #170A3D;
            --purple: #6C1FE0;
            --purple-2: #8A3CF2;
            --violet: #4A1AA8; 
            --blue: #2E8FF5;
            --cyan: #4FD8F5;
            --ink: #221546;
            --muted: #6E668E;
            --paper: #FBFAFE;
            --paper-2: #F3EFFC;
            --paper-ink: #221546;
            --paper-muted: #6E668E;

            --ks-purple: var(--purple);
            --ks-purple-dark: var(--violet);
            --ks-purple-light: var(--paper-2);
            --ks-blue: var(--blue);
            --ks-green: var(--cyan);
            --ks-orange: var(--purple-2);
            --ks-red: var(--purple-2);
            --ks-navy: var(--navy);
            --ks-text: var(--ink);
            --ks-muted: var(--muted);
            --ks-bg: var(--paper);
            --ks-white: #FFFFFF;
            --ks-border: var(--paper-2);
        }


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

        * {
            box-sizing: border-box;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            margin: 0;
            padding: 0;

            font-family:
                "Inter",
                "Segoe UI",
                Roboto,
                Helvetica,
                Arial,
                sans-serif;

            color: var(--ks-text);
            background:
                radial-gradient(
                    circle at 50% 25%,
                    #ffffff 0%,
                    #FBFAFE 55%,
                    #FBFAFE 100%
                );

            min-height: 100vh;
        }


        /* =========================================================
           NAVIGATION
        ========================================================= */

        .ks-navbar-wrapper {
            padding: 10px 20px 0;
            position: sticky;
            top: 0;
            z-index: 1050;
            height:15vh;
        }

        .ks-navbar {
            height: 10vh;
            background: rgba(255,255,255, 0.96);
            border: 1px solid rgba(108,31,224, 0.14);
            border-radius: 18px;
            box-shadow:
                0 5px 20px rgba(34,21,70, 0.055),
                0 1px 4px rgba(34,21,70, 0.035);
            padding: 6px 18px 6px 24px;
            transition:
                box-shadow 0.3s ease,
                transform 0.3s ease;
        }

        .ks-navbar:hover {
            box-shadow:
                0 8px 28px rgba(74,26,168, 0.08),
                0 2px 6px rgba(74,26,168, 0.04);
        }


        /* Logo */

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

            text-decoration: none;

            flex-shrink: 0;
        }

        .ks-logo img {
            width: 130px;
            height: auto;
            object-fit: contain;
        }


        /* Navigation links */

        .ks-nav-links {
            gap: 8px;
        }

        .ks-nav-link {
            position: relative;

            display: flex;
            align-items: center;

            min-height: 52px;

            padding: 0 15px !important;

            color: var(--ks-text) !important;

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

            text-decoration: none;

            transition:
                color 0.25s ease,
                transform 0.25s ease;
        }

        .ks-nav-link:hover {
            color: var(--ks-purple) !important;
        }

        .ks-nav-link.active {
            color: var(--ks-purple) !important;
        }

        .ks-nav-link.active::after {
            content: "";

            position: absolute;

            left: 17px;
            right: 17px;
            bottom: 2px;

            height: 3px;

            background: var(--ks-purple);

            border-radius: 20px;
        }


        /* Parent Login */

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

            min-width: 155px;
            height: 44px;

            border: none;
            border-radius: 12px;

            color: #ffffff;

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

            background:
                linear-gradient(
                    135deg,
                    #6C1FE0 0%,
                    #6C1FE0 100%
                );

            box-shadow:
                0 7px 16px rgba(108,31,224, 0.18);

            transition:
                transform 0.25s ease,
                box-shadow 0.25s ease;
        }

        .ks-login-btn:hover {
            color: #ffffff;

            transform: translateY(-2px);

            box-shadow:
                0 10px 22px rgba(108,31,224, 0.25);
        }

        .ks-login-btn i {
            font-size: 19px;
        }


        /* Mobile navigation */

        .ks-navbar-toggler {
            border: none;
            box-shadow: none !important;
            font-size: 26px;
            color: var(--ks-purple);
        }


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

        .ks-hero {
            position: relative;

            padding:
                20px
                7%
                50px;
            margin:0;
            overflow: hidden;
            background: #FBFAFE 100%;
            height:80vh;
        }

        .ks-hero-container {
            max-width: 1450px;
            margin: 0 auto;
        }


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

        .ks-hero-content {
            padding-top: 6px;
        }


        /* Small badge */

        .ks-hero-badge {
            display: inline-flex;
            align-items: center;
            gap: 10px;

            padding: 10px 17px;

            margin-bottom: 32px;

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

            border-radius: 30px;

            color: var(--ks-purple);

            font-size: 16px;
            font-weight: 650;
        }

        .ks-hero-badge i {
            font-size: 19px;
        }


        /* Main heading */

        .ks-hero-title {
            margin: 0 0 25px;

            max-width: 700px;

            color: var(--ks-navy);

            font-size: clamp(35px, 4.25vw, 45px);

            line-height: 1.18;

            font-weight: 700;

            letter-spacing: -2px;
        }

        .ks-hero-title .highlight {
            color: var(--ks-purple);
        }


        /* Description */

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

            margin-bottom: 38px;

            color: var(--ks-text);

            font-size: 16px;

            line-height: 1.62;

            font-weight: 400;
        }


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

        .ks-hero-actions {
            display: flex;
            align-items: center;
            gap: 25px;

            margin-bottom: 39px;
        }

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

            min-width: 330px;
            height: 74px;

            padding: 0 25px;

            border-radius: 18px;

            color: #ffffff;

            font-size: 17px;
            font-weight: 600;

            text-decoration: none;

            background:
                linear-gradient(
                    135deg,
                    #8A3CF2 0%,
                    #6C1FE0 100%
                );

            box-shadow:
                0 8px 18px rgba(108,31,224, 0.19);

            transition:
                transform 0.25s ease,
                box-shadow 0.25s ease;
        }

        .ks-trial-btn:hover {
            color: #ffffff;

            transform: translateY(-2px);

            box-shadow:
                0 12px 25px rgba(108,31,224, 0.26);
        }

        .ks-trial-btn .arrow {
            display: inline-flex;
            align-items: center;
            justify-content: center;

            width: 30px;
            height: 30px;

            border-radius: 50%;

            background: rgba(255,255,255,0.12);

            font-size: 20px;
        }


        /* Google Play */

        .ks-google-btn {
            display: flex;
            align-items: center;
            gap: 13px;

            min-width: 235px;
            height: 74px;

            padding: 0 24px;

            border-radius: 18px;

            background: #ffffff;

            border: 1px solid #F3EFFC;

            color: var(--ks-text);

            text-decoration: none;

            box-shadow:
                0 4px 14px rgba(34,21,70, 0.055);

            transition:
                transform 0.25s ease,
                box-shadow 0.25s ease;
        }

        .ks-google-btn:hover {
            color: var(--ks-text);

            transform: translateY(-2px);

            box-shadow:
                0 8px 20px rgba(34,21,70, 0.09);
        }

        .ks-google-btn img {
            width: 38px;
            height: 42px;

            object-fit: contain;
        }

        .ks-google-text {
            display: flex;
            flex-direction: column;

            line-height: 1.15;
        }

        .ks-google-text small {
            font-size: 13px;
            font-weight: 500;
        }

        .ks-google-text strong {
            margin-top: 4px;

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


        /* =========================================================
           QUICK BENEFITS
        ========================================================= */

        .ks-benefits {
            display: flex;
            align-items: center;
            gap: 48px;
        }

        .ks-benefit {
            display: flex;
            align-items: center;
            gap: 12px;

            white-space: nowrap;

            color: var(--ks-text);

            font-size: 17px;
            font-weight: 500;
        }

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

            width: 30px;
            height: 30px;

            border: 2px solid #8A3CF2;

            border-radius: 50%;

            color: var(--ks-purple);

            font-size: 17px;
        }


        /* =========================================================
           HERO RIGHT / ILLUSTRATION
        ========================================================= */

        .hero-visual {
    position: relative;
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
}

.hero-image {
    display: block;
    width: 100%;
    height: auto;
}

@media (max-width: 767px) {
    .hero-visual {
        max-width: 520px;
    }
}

        .ks-hero-visual {
            position: relative;

            min-height: 590px;

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


        /* Main illustration */

        .ks-main-illustration {
            position: relative;
            z-index: 3;

            width: 440px;
            max-width: 80%;

            height: auto;

            object-fit: contain;
        }


        /* =========================================================
           FEATURE ORBIT ITEMS
        ========================================================= */

        .ks-feature {
            position: absolute;
            z-index: 5;

            display: flex;
            align-items: flex-start;

            gap: 13px;

            max-width: 185px;
        }

        .ks-feature-icon {
            flex-shrink: 0;

            width: 64px;
            height: 64px;

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

            border-radius: 16px;

            color: #ffffff;

            font-size: 29px;

            box-shadow:
                0 8px 16px rgba(34,21,70, 0.12);
        }

        .ks-feature-text {
            padding-top: 3px;
        }

        .ks-feature-title {
            margin-bottom: 7px;

            color: var(--ks-navy);

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

            line-height: 1.25;
        }

        .ks-feature-description {
            margin: 0;

            color: var(--ks-text);

            font-size: 14px;

            line-height: 1.45;
        }


        /* Feature colours */

        .feature-screen-time {
            top: 35px;
            left: 17%;
        }

        .feature-screen-time .ks-feature-icon {
            background: linear-gradient(
                135deg,
                #8A3CF2,
                #6C1FE0
            );
        }


        .feature-location {
            top: 100px;
            right: -10%;
        }

        .feature-location .ks-feature-icon {
            background: #4FD8F5;
        }


        .feature-app-lock {
            top: 240px;
            left: 0;
        }

        .feature-app-lock .ks-feature-icon {
            background: #2E8FF5;
        }


        .feature-device-lock {
            top: 225px;
            right: -12%;
        }

        .feature-device-lock .ks-feature-icon {
            background: #8A3CF2;
        }


        .feature-sos {
            bottom: 85px;
            right: 4%;
        }

        .feature-sos .ks-feature-icon {
            background: #8A3CF2;
        }


        /* =========================================================
           DECORATIVE ORBIT
        ========================================================= */

        .ks-orbit {
            position: absolute;

            width: 510px;
            height: 510px;

            border-radius: 50%;

            border:
                1.5px dashed rgba(108,31,224, 0.55);

            transform: rotate(-15deg);

            opacity: 0.8;

            z-index: 1;
        }

        .ks-orbit::before {
            content: "";

            position: absolute;

            inset: 0;

            border-radius: 50%;

            border:
                1.5px dashed rgba(110,102,142, 0.25);

            transform: rotate(70deg);
        }


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

        @media (max-width: 1400px) {

            .ks-navbar-wrapper {
                padding-left: 25px;
                padding-right: 25px;
            }

            .ks-nav-link {
                padding-left: 11px !important;
                padding-right: 11px !important;
            }

            .ks-login-btn {
                min-width: 160px;
            }

            .ks-logo img {
                width: 220px;
            }

            .ks-feature {
                transform: scale(0.92);
            }
        }


        @media (max-width: 1199px) {

            .ks-navbar {
                border-radius: 20px;
            }

            .ks-navbar-wrapper {
                padding-left: 18px;
                padding-right: 18px;
            }

            .ks-logo img {
                width: 195px;
            }

            .ks-nav-link {
                font-size: 14px;
                padding-left: 8px !important;
                padding-right: 8px !important;
            }

            .ks-login-btn {
                min-width: 145px;
                height: 52px;
                font-size: 14px;
            }

            .ks-hero {
                padding-left: 5%;
                padding-right: 5%;
            }

            .ks-hero-title {
                font-size: 30px;
            }

            .ks-main-illustration {
                width: 470px;
            }

            .ks-feature {
                transform: scale(0.82);
            }
        }


        @media (max-width: 991px) {

            .ks-navbar {
                min-height: 78px;
            }

            .ks-nav-links {
                padding-top: 15px;
                padding-bottom: 15px;
            }

            .ks-nav-link {
                min-height: 48px;
            }

            .ks-nav-link.active::after {
                bottom: 0;
            }

            .ks-login-btn {
                margin-top: 10px;
            }

            .ks-hero {
                padding-top: 50px;
            }

            .ks-hero-content {
                text-align: center;
            }

            .ks-hero-badge {
                margin-bottom: 25px;
            }

            .ks-hero-title {
                margin-left: auto;
                margin-right: auto;
            }

            .ks-hero-description {
                margin-left: auto;
                margin-right: auto;
            }

            .ks-hero-actions {
                justify-content: center;
                flex-wrap: wrap;
            }

            .ks-benefits {
                justify-content: center;
                flex-wrap: wrap;
                gap: 20px 35px;
            }

            .ks-hero-visual {
                margin-top: 60px;
                min-height: 620px;
            }

            .ks-main-illustration {
                width: 500px;
            }

            .ks-feature {
                transform: scale(0.9);
            }

            .feature-screen-time {
                left: 8%;
            }

            .feature-location {
                right: 5%;
            }

            .feature-app-lock {
                left: 3%;
            }

            .feature-device-lock {
                right: 2%;
            }

            .feature-sos {
                right: 8%;
            }
        }


        @media (max-width: 767px) {

            .ks-navbar-wrapper {
                padding: 10px 12px 0;
            }

            .ks-navbar {
                padding: 10px 15px;
                border-radius: 18px;
            }

            .ks-logo img {
                width: 175px;
            }

            .ks-hero {
                padding:
                    45px
                    20px
                    40px;
            }

            .ks-hero-title {
                font-size: 40px;
                letter-spacing: -1px;
            }

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

            .ks-hero-actions {
                flex-direction: column;
                width: 100%;
                gap: 15px;
            }

            .ks-trial-btn,
            .ks-google-btn {
                width: 100%;
                min-width: 0;
            }

            .ks-benefits {
                flex-direction: column;
                align-items: flex-start;
                width: fit-content;
                margin: 0 auto;
            }

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

            .ks-main-illustration {
                width: 390px;
                max-width: 90%;
            }

            .ks-orbit {
                width: 360px;
                height: 360px;
            }

            .ks-feature {
                transform: scale(0.65);
            }

            .feature-screen-time {
                top: 20px;
                left: -10px;
            }

            .feature-location {
                top: 70px;
                right: -10px;
            }

            .feature-app-lock {
                top: 190px;
                left: -30px;
            }

            .feature-device-lock {
                top: 215px;
                right: -30px;
            }

            .feature-sos {
                bottom: 35px;
                right: -5px;
            }
        }

        /* =============================================================
   WHAT IS KIDSECURE
============================================================= */

.ks-about-section {
    position: relative;

    width: 100%;

    padding:
        20px
        5.5%
        20px;

    background:
        radial-gradient(
            circle at 65% 50%,
            #ffffff 0%,
            #FBFAFE 55%,
            #FBFAFE 100%
        );

    overflow: hidden;
}


.ks-about-container {
    max-width: 1500px;

    margin: 0 auto;
}


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

.ks-about-content {
    max-width: 700px;

    padding-left: 1%;
}


.ks-about-title {
    margin: 0;

    color: #0E0526;

    font-size: clamp(35px, 4.5vw, 45px);

    line-height: 1.15;

    font-weight: 700;

    letter-spacing: -2px;
}


.ks-about-highlight {
    color: #6C1FE0;

    background:
        linear-gradient(
            90deg,
            #6C1FE0 0%,
            #4FD8F5 100%
        );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}


/* Purple underline */

.ks-about-line {
    width: 88px;
    height: 5px;

    margin-top: 30px;
    margin-bottom: 38px;

    background: #6C1FE0;

    border-radius: 10px;
}


/* Body copy */

.ks-about-text {
    max-width: 650px;

    margin: 0 0 27px;

    color: #221546;

    font-size: 16px;

    line-height: 1.9;

    font-weight: 400;
}

.ks-about-text:last-child {
    margin-bottom: 0;
}


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

.ks-about-visual {
    position: relative;

    min-height: 650px;

    display: flex;

    align-items: center;

    justify-content: center;
}


/* Main phone */

.ks-about-phone {
    position: relative;
    z-index: 4;
    width: 300px;
    max-width: 68%;
    height: auto;
    object-fit: contain;
    filter:
        drop-shadow(
            0 18px 22px rgba(34,21,70, 0.12)
        );
}


/* Plant */

.ks-about-plant {
    position: absolute;

    z-index: 5;

    right: 4%;

    bottom: 5px;

    width: 145px;

    height: auto;

    object-fit: contain;
}


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

.ks-about-orbit {
    position: absolute;

    z-index: 1;

    width: 570px;
    height: 570px;

    border-radius: 50%;

    border:
        1.5px dashed rgba(138,60,242, 0.48);

    transform: rotate(-18deg);
}


.ks-about-orbit::before {
    content: "";

    position: absolute;

    inset: 0;

    border-radius: 50%;

    border:
        1.5px dashed rgba(110,102,142, 0.35);

    transform: rotate(72deg);
}


/* =============================================================
   FEATURE ICONS
============================================================= */

.ks-about-feature {
    position: absolute;

    z-index: 6;

    display: flex;

    align-items: center;

    justify-content: center;
}


.ks-about-feature-icon {
    width: 72px;
    height: 72px;

    display: flex;

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

    border-radius: 50%;

    color: #ffffff;

    font-size: 31px;

    box-shadow:
        0 8px 20px rgba(34,21,70, 0.12);
}


/* Shield */

.ks-about-shield {
    top: 12%;
    left: 14%;
}

.ks-about-shield .ks-about-feature-icon {
    background: #6C1FE0;

    box-shadow:
        0 0 0 14px rgba(108,31,224, 0.08),
        0 8px 20px rgba(34,21,70, 0.12);
}


/* Clock */

.ks-about-clock {
    top: 35%;
    left: 2%;
}

.ks-about-clock .ks-about-feature-icon {
    background: #2E8FF5;

    box-shadow:
        0 0 0 14px rgba(46,143,245, 0.08),
        0 8px 20px rgba(34,21,70, 0.12);
}


/* Location */

.ks-about-location {
    top: 58%;
    left: 1%;
}

.ks-about-location .ks-about-feature-icon {
    background: #4FD8F5;

    box-shadow:
        0 0 0 14px rgba(110,102,142, 0.08),
        0 8px 20px rgba(34,21,70, 0.12);
}


/* Lock */

.ks-about-lock {
    bottom: 13%;
    left: 10%;
}

.ks-about-lock .ks-about-feature-icon {
    background: #8A3CF2;

    box-shadow:
        0 0 0 14px rgba(110,102,142, 0.09),
        0 8px 20px rgba(34,21,70, 0.12);
}


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

@media (max-width: 1199px) {

    .ks-about-section {
        padding-left: 5%;
        padding-right: 5%;
    }

    .ks-about-title {
        font-size: 35px;
    }

    .ks-about-text {
        font-size: 17px;
    }

    .ks-about-phone {
        width: 340px;
    }

    .ks-about-orbit {
        width: 490px;
        height: 490px;
    }

    .ks-about-feature {
        transform: scale(0.85);
    }

    .ks-about-plant {
        width: 120px;
    }
}


@media (max-width: 991px) {

    .ks-about-section {
        padding-top: 60px;
        padding-bottom: 70px;
    }

    .ks-about-content {
        max-width: 750px;

        margin: 0 auto;

        text-align: center;
    }

    .ks-about-title {
        font-size: 50px;
    }

    .ks-about-line {
        margin-left: auto;
        margin-right: auto;
    }

    .ks-about-text {
        max-width: 700px;

        margin-left: auto;
        margin-right: auto;

        font-size: 18px;
    }

    .ks-about-visual {
        margin-top: 45px;

        min-height: 620px;
    }
}


@media (max-width: 767px) {

    .ks-about-section {
        padding:
            50px
            20px
            60px;
    }

    .ks-about-title {
        font-size: 40px;

        letter-spacing: -1px;
    }

    .ks-about-line {
        width: 70px;
        height: 4px;

        margin-top: 23px;
        margin-bottom: 30px;
    }

    .ks-about-text {
        font-size: 16px;

        line-height: 1.75;

        margin-bottom: 22px;
    }

    .ks-about-visual {
        min-height: 500px;
    }

    .ks-about-phone {
        width: 300px;
        max-width: 75%;
    }

    .ks-about-orbit {
        width: 350px;
        height: 350px;
    }

    .ks-about-feature {
        transform: scale(0.68);
    }

    .ks-about-shield {
        top: 9%;
        left: 0;
    }

    .ks-about-clock {
        top: 34%;
        left: -15px;
    }

    .ks-about-location {
        top: 56%;
        left: -15px;
    }

    .ks-about-lock {
        bottom: 10%;
        left: 0;
    }

    .ks-about-plant {
        width: 95px;
        right: 0;
        bottom: 0;
    }
}

/* =============================================================
   KIDSECURE MODES
============================================================= */

.ks-modes-section {
    width: 100%;

    margin-top: 85px;
    padding: 0 2% 20px;
}


/* =============================================================
   MODES HEADING
============================================================= */

.ks-modes-heading {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 28px;

    margin-bottom: 42px;
}

.ks-modes-heading h2 {
    margin: 0;

    color: #0E0526;

    font-size: 36px;

    line-height: 1.2;

    font-weight: 700;

    letter-spacing: -0.8px;
}


/* Decorative lines */

.ks-heading-decoration {
    display: flex;
    align-items: center;

    gap: 5px;

    width: 80px;
}

.ks-heading-decoration span {
    display: block;

    width: 55px;
    height: 2px;

    background: #8A3CF2;

    border-radius: 10px;
}

.ks-heading-decoration i {
    display: block;

    width: 6px;
    height: 6px;

    background: #8A3CF2;

    border-radius: 50%;
}

.ks-heading-decoration.left {
    justify-content: flex-end;
}


/* =============================================================
   MODE CARDS
============================================================= */

.ks-modes-row {
    max-width: 1370px;

    margin-left: auto;
    margin-right: auto;
}

.ks-mode-card {
    position: relative;

    height: 75vh;

    padding:
        28px
        48px
        35px;

    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;

    border-radius: 18px;

    background: #ffffff;

    border: 1px solid;

    overflow: hidden;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.ks-mode-card:hover {
    transform: translateY(-5px);

    box-shadow:
        0 14px 30px rgba(34,21,70, 0.09);
}


/* =============================================================
   CARD BACKGROUNDS
============================================================= */

.ks-parent-mode {
    background:
        linear-gradient(
            145deg,
            #FBFAFE 0%,
            #F3EFFC 100%
        );

    border-color: #F3EFFC;
}

.ks-kid-mode {
    background:
        linear-gradient(
            145deg,
            #FBFAFE 0%,
            #F3EFFC 100%
        );

    border-color: #F3EFFC;
}

.ks-web-mode {
    background:
        linear-gradient(
            145deg,
            #FBFAFE 0%,
            #F3EFFC 100%
        );

    border-color: #F3EFFC;
}


/* =============================================================
   TOP MODE ICON
============================================================= */

.ks-mode-icon-wrapper {
    width: 85px;
    height: 85px;

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

    margin-bottom: 20px;

    border-radius: 50%;

    background: rgba(255,255,255, 0.72);

    border: 1px solid;

    box-shadow:
        0 3px 10px rgba(34,21,70, 0.05);
}

.ks-parent-mode .ks-mode-icon-wrapper {
    border-color: #F3EFFC;
}

.ks-kid-mode .ks-mode-icon-wrapper {
    border-color: #F3EFFC;
}

.ks-web-mode .ks-mode-icon-wrapper {
    border-color: #F3EFFC;
}


.ks-mode-icon {
    width: 67px;
    height: 67px;

    object-fit: contain;
}


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

.ks-mode-title {
    margin: 0 0 17px;

    font-size: 25px;

    line-height: 1.25;

    font-weight: 700;
}

.ks-parent-mode .ks-mode-title {
    color: #6C1FE0;
}

.ks-kid-mode .ks-mode-title {
    color: #6E668E;
}

.ks-web-mode .ks-mode-title {
    color: #2E8FF5;
}


/* =============================================================
   CARD SUBTITLE
============================================================= */

.ks-mode-subtitle {
    min-height: 45px;
    width: 100%;

    margin: 0;

    color: #0E0526;

    font-size: 16px;

    line-height: 1.25;

    font-weight: 500;
}


/* =============================================================
   DIVIDER
============================================================= */

.ks-mode-divider {
    width: 78%;

    height: 1px;

    margin:
        25px
        auto
        20px;
}

.ks-parent-mode .ks-mode-divider {
    background: #8A3CF2;
}

.ks-kid-mode .ks-mode-divider {
    background: #4FD8F5;
}

.ks-web-mode .ks-mode-divider {
    background: #2E8FF5;
}


/* =============================================================
   SECONDARY ILLUSTRATION
============================================================= */

.ks-mode-illustration {
    height: 115px;

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

    margin-bottom: 10px;
}

.ks-mode-device {
    width: 125px;
    height: 105px;

    object-fit: contain;
}


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

.ks-mode-description {
    width: 100%;

    max-width: 300px;

    margin: 0 auto;

    color: #0E0526;

    text-align: left;

    font-size: 16px;

    line-height: 1.7;

    font-weight: 400;
}


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

@media (max-width: 1199px) {

    .ks-mode-card {
        padding-left: 30px;
        padding-right: 30px;

        min-height: 680px;
    }

    .ks-mode-description {
        font-size: 15px;
    }
}


@media (max-width: 991px) {

    .ks-modes-section {
        margin-top: 70px;
    }

    .ks-modes-heading {
        gap: 18px;
    }

    .ks-modes-heading h2 {
        font-size: 31px;
    }

    .ks-heading-decoration {
        width: 65px;
    }

    .ks-mode-card {
        min-height: auto;

        padding:
            35px
            45px
            40px;
    }

    .ks-mode-description {
        max-width: 500px;
    }
}


@media (max-width: 767px) {

    .ks-modes-section {
        margin-top: 55px;

        padding-left: 0;
        padding-right: 0;
    }

    .ks-modes-heading {
        gap: 10px;
    }

    .ks-modes-heading h2 {
        font-size: 26px;
    }

    .ks-heading-decoration {
        width: 35px;
    }

    .ks-heading-decoration span {
        width: 25px;
    }

    .ks-mode-card {
        border-radius: 16px;

        padding:
            30px
            25px
            35px;
    }

    .ks-mode-title {
        font-size: 24px;
    }

    .ks-mode-subtitle {
        font-size: 16px;
    }

    .ks-mode-description {
        font-size: 15px;
    }
}

/* =============================================================
   KEY CAPABILITIES + WHY PARENTS
============================================================= */

.ks-capabilities-section {
    width: 100%;

    max-width: 1500px;

    margin: 70px auto 0;

    padding: 0 2% 30px;
}


/* =============================================================
   OUTER PANELS
============================================================= */

.ks-capabilities-panel,
.ks-why-panel {

    height: 100%;

    padding: 28px 36px 32px;

    background: rgba(255,255,255, 0.92);

    border: 1px solid #F3EFFC;

    border-radius: 18px;

    box-shadow:
        0 4px 18px rgba(34,21,70, 0.045);
}


/* =============================================================
   PANEL HEADINGS
============================================================= */

.ks-panel-title {

    margin: 0 0 24px;

    color: #0E0526;

    font-size: 29px;

    line-height: 1.25;

    font-weight: 700;

    letter-spacing: -0.5px;
}


/* =============================================================
   CAPABILITY LIST
============================================================= */

.ks-capability-list {

    display: flex;

    flex-direction: column;

    gap: 10px;

    height:contain;
}


.ks-capability-item {

    height:70px;

    display: flex;

    align-items: center;

    gap: 20px;

    padding: 8px 14px;

    border: 1px solid #F3EFFC;

    border-radius: 17px;

    background: #FFFFFF;

    color: #0E0526;

    font-size: 18px;

    font-weight: 500;

    box-shadow:
        0 2px 7px rgba(34,21,70, 0.025);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.ks-capability-item:hover {

    transform: translateX(3px);

    box-shadow:
        0 5px 13px rgba(34,21,70, 0.07);
}


/* =============================================================
   CAPABILITY ICONS
============================================================= */

.ks-capability-icon {

    width: 55px;
    height: 55px;

    flex-shrink: 0;

    display: flex;

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

    border-radius: 17px;

    font-size: 32px;
}


/* Purple */

.capability-purple .ks-capability-icon {

    color: #6C1FE0;

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


/* Orange */

.capability-orange .ks-capability-icon {

    color: #8A3CF2;

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


/* Green */

.capability-green .ks-capability-icon {

    color: #4FD8F5;

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


/* Blue */

.capability-blue .ks-capability-icon {

    color: #2E8FF5;

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


/* Red */

.capability-red .ks-capability-icon {

    color: #8A3CF2;

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


/* SOS */

.ks-sos-icon {

    width: 40px;

    height: 40px;

    margin: 0;

    border-radius: 50%;

    background: #8A3CF2;

    color: #FFFFFF;

    font-size: 13px;

    font-weight: 700;

    box-shadow:
        0 2px 7px rgba(110,102,142, 0.2);
}


/* =============================================================
   WHY PARENTS LIST
============================================================= */

.ks-why-list {

    display: flex;

    flex-direction: column;

    gap: 15px;
}


.ks-why-item {

    height: 110px;

    display: flex;

    align-items: center;

    gap: 20px;

    padding: 14px 24px 14px 10px;

    border: 1px solid #F3EFFC;

    border-radius: 20px;

    background: #FFFFFF;

    box-shadow:
        0 2px 8px rgba(34,21,70, 0.025);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.ks-why-item:hover {

    transform: translateY(-2px);

    box-shadow:
        0 7px 16px rgba(34,21,70, 0.07);
}


/* =============================================================
   WHY ICON
============================================================= */

.ks-why-icon {

    width: 96px;
    height: 96px;

    flex-shrink: 0;

    display: flex;

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

    border-radius: 50%;

    font-size: 40px;
}


/* Green */

.why-green .ks-why-icon {

    color: #4FD8F5;

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


/* Purple */

.why-purple .ks-why-icon {

    color: #6C1FE0;

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


/* Blue */

.why-blue .ks-why-icon {

    color: #2E8FF5;

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


/* Orange */

.why-orange .ks-why-icon {

    color: #8A3CF2;

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


/* =============================================================
   WHY CONTENT
============================================================= */

.ks-why-content {

    flex: 1;
}


.ks-why-content h3 {
    margin: 0 0 8px;

    font-size: 22px;

    line-height: 1.3;

    font-weight: 600;
}


.ks-why-content p {

    margin: 0;

    color: #0E0526;

    font-size: 16px;

    line-height: 1.5;

    font-weight: 400;
}


/* Accent colours */

.why-green h3 {
    color: #4FD8F5;
}

.why-purple h3 {
    color: #6C1FE0;
}

.why-blue h3 {
    color: #2E8FF5;
}

.why-orange h3 {
    color: #8A3CF2;
}


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

@media (max-width: 1199px) {

    .ks-capabilities-panel,
    .ks-why-panel {
        padding-left: 25px;
        padding-right: 25px;
    }

    .ks-capability-item {
        gap: 22px;
        font-size: 17px;
    }

    .ks-why-item {
        gap: 20px;
    }

    .ks-why-icon {
        width: 82px;
        height: 82px;
        font-size: 34px;
    }

    .ks-why-content h3 {
        font-size: 20px;
    }

    .ks-why-content p {
        font-size: 15px;
    }
}


@media (max-width: 991px) {

    .ks-capabilities-section {
        margin-top: 60px;
    }

    .ks-capabilities-panel,
    .ks-why-panel {
        padding: 28px;
    }

    .ks-panel-title {
        font-size: 27px;
    }
}


@media (max-width: 767px) {

    .ks-capabilities-section {
        padding:
            0
            15px
            60px;
    }

    .ks-capabilities-panel,
    .ks-why-panel {
        padding: 22px 18px 25px;

        border-radius: 16px;
    }

    .ks-panel-title {
        font-size: 24px;

        margin-bottom: 20px;
    }

    .ks-capability-item {
        min-height: 65px;

        gap: 17px;

        font-size: 15px;

        padding-right: 10px;
    }

    .ks-capability-icon {
        width: 58px;
        height: 52px;

        border-radius: 14px;

        font-size: 25px;
    }

    .ks-why-list {
        gap: 12px;
    }

    .ks-why-item {
        min-height: 100px;

        gap: 15px;

        padding:
            10px
            12px
            10px
            7px;
    }

    .ks-why-icon {
        width: 67px;
        height: 67px;

        font-size: 28px;
    }

    .ks-why-content h3 {
        font-size: 17px;

        margin-bottom: 5px;
    }

    .ks-why-content p {
        font-size: 14px;

        line-height: 1.4;
    }
}

 /* =============================================================
    FEATURES SECTION
 ============================================================= */

.ks-features-section {

    position: relative;

    width: 100%;

    padding:
        20px
        5.5%
        20px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 75% 20%,
            #ffffff 0%,
            #FBFAFE 58%,
            #FBFAFE 100%
        );
}


.ks-features-container {

    max-width: 1450px;

    margin: 0 auto;

    position: relative;
}


/* =============================================================
   HEADER
============================================================= */

.ks-features-header {

    margin-bottom: 48px;
}


.ks-features-title {

    margin: 0;

    color: #0E0526;

    font-size: clamp(35px, 5vw, 45px);

    line-height: 1.05;

    font-weight: 700;

    letter-spacing: -2px;
}


.ks-features-line {

    width: 72px;

    height: 5px;

    margin-top: 24px;

    margin-bottom: 22px;

    background: #6C1FE0;

    border-radius: 10px;
}


.ks-features-subtitle {

    margin: 0;

    color: #221546;

    font-size: 18px;

    line-height: 1.5;

    font-weight: 400;
}


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

.ks-feature-grid {

    margin-left: 0;

    margin-right: 0;
}


/* =============================================================
   FEATURE CARD
============================================================= */

.ks-feature-card {

    height: 240px;

    display: flex;

    align-items: center;

    padding:
        20px
        24px;

    background:
        rgba(255,255,255, 0.94);

    border: 1px solid #F3EFFC;

    border-radius: 18px;

    box-shadow:
        0 3px 12px rgba(34,21,70, 0.045);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}


.ks-feature-card:hover {

    transform: translateY(-4px);

    box-shadow:
        0 10px 25px rgba(34,21,70, 0.08);
}


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

.ks-feature-visual {

    width: 30%;

    min-width: 145px;

    height: 190px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;
}


.ks-feature-image {

    width: 125px;

    max-width: 100%;

    height: 125px;

    object-fit: contain;
}


/* =============================================================
   CARD CONTENT
============================================================= */

.ks-feature-card-content {

    flex: 1;

    height: 100%;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    justify-content: flex-start;
}


.ks-feature-card-content h3 {

    margin: 0 0 13px;

    color: #0E0526;

    font-size: 19px;

    line-height: 1.25;

    font-weight: 700;
}


.ks-feature-card-content h3 span {

    font-weight: 700;
}


.ks-feature-card-content p {

    margin: 0 0 15px;

    max-width: 255px;

    color: #221546;

    font-size: 15px;

    line-height: 1.55;

    font-weight: 400;
}


/* =============================================================
   FEATURE TAG
============================================================= */

.ks-feature-tag {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    font-size: 16px;

    font-weight: 600;

    line-height: 1;
}


.ks-feature-tag i {

    font-size: 20px;
}


/* Purple */

.feature-tag-purple {

    color: #6C1FE0;
}


/* Green */

.feature-tag-green {

    color: #4FD8F5;
}


/* Blue */

.feature-tag-blue {

    color: #2E8FF5;
}


/* Orange */

.feature-tag-orange {

    color: #8A3CF2;
}


/* =============================================================
   DECORATIVE BACKGROUND
============================================================= */

.ks-features-section::after {

    content: "";

    position: absolute;

    width: 720px;

    height: 250px;

    right: -50px;

    top: 40px;

    border-radius: 50%;

    background:
        radial-gradient(
            ellipse,
            rgba(243,239,252, 0.55),
            rgba(255,255,255, 0)
        );

    pointer-events: none;

    z-index: 0;
}


.ks-features-container {

    z-index: 1;
}


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

@media (max-width: 1199px) {

    .ks-features-section {

        padding-left: 4%;
        padding-right: 4%;
    }

    .ks-feature-card {

        padding-left: 17px;
        padding-right: 17px;
    }

    .ks-feature-visual {

        min-width: 125px;
    }

    .ks-feature-image {

        width: 125px;
    }

    .ks-feature-card-content h3 {

        font-size: 17px;
    }

    .ks-feature-card-content p {

        font-size: 14px;
    }
}


@media (max-width: 991px) {

    .ks-features-section {

        padding-top: 60px;
    }

    .ks-features-title {

        font-size: 54px;
    }

    .ks-feature-card {

        min-height: 230px;
    }

    .ks-feature-visual {

        width: 38%;
    }
}


@media (max-width: 767px) {

    .ks-features-section {

        padding:
            50px
            20px
            60px;
    }

    .ks-features-title {

        font-size: 42px;

        letter-spacing: -1px;
    }

    .ks-features-line {

        width: 65px;

        height: 4px;

        margin-top: 20px;

        margin-bottom: 18px;
    }

    .ks-features-subtitle {

        font-size: 16px;
    }

    .ks-feature-card {

        min-height: 215px;

        padding: 16px;
    }

    .ks-feature-visual {

        min-width: 115px;

        width: 36%;

        height: 175px;
    }

    .ks-feature-image {

        width: 110px;

        height: 155px;
    }

    .ks-feature-card-content h3 {

        font-size: 17px;

        margin-bottom: 10px;
    }

    .ks-feature-card-content p {

        font-size: 13px;

        line-height: 1.45;

        margin-bottom: 12px;
    }

    .ks-feature-tag {

        font-size: 14px;
    }

    .ks-feature-tag i {

        font-size: 17px;
    }
}


@media (max-width: 480px) {

    .ks-feature-card {

        min-height: 200px;

        padding: 13px;
    }

    .ks-feature-visual {

        min-width: 95px;
    }

    .ks-feature-image {

        width: 95px;

        height: 140px;
    }

    .ks-feature-card-content h3 {

        font-size: 15px;
    }

    .ks-feature-card-content p {

        font-size: 12px;
    }

    .ks-feature-tag {

        font-size: 12px;
    }
}

.feature-tag-red {
    color: #8A3CF2;
}

 /* =============================================================
    PRICING SECTION
 ============================================================= */

.ks-pricing-section {

    position: relative;

    width: 100%;

    padding:
        20px
        5%
        20px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% 20%,
            #ffffff 0%,
            #FBFAFE 55%,
            #FBFAFE 100%
        );
}


/* Decorative background shapes */

.ks-pricing-section::before {

    content: "";

    position: absolute;

    width: 430px;
    height: 430px;

    left: -210px;
    top: -70px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(138,60,242, 0.06),
            rgba(138,60,242, 0)
        );

    pointer-events: none;
}


.ks-pricing-section::after {

    content: "";

    position: absolute;

    width: 430px;
    height: 430px;

    right: -220px;
    top: -60px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(138,60,242, 0.045),
            rgba(138,60,242, 0)
        );

    pointer-events: none;
}


.ks-pricing-container {

    position: relative;

    z-index: 1;

    max-width: 1450px;

    margin: 0 auto;
}


/* =============================================================
   HEADER
============================================================= */

.ks-pricing-header {

    text-align: center;

    margin-bottom: 22px;
}


.ks-pricing-title {

    margin: 0;

    color: #0E0526;

    font-size: clamp(35px, 5vw, 45px);

    line-height: 1.1;

    font-weight: 700;

    letter-spacing: -2px;
}


.ks-pricing-subtitle {

    margin: 8px 0 0;

    color: #6E668E;

    font-size: 19px;

    line-height: 1.5;

    font-weight: 500;
}


/* =============================================================
   TOP BENEFITS
============================================================= */

.ks-pricing-benefits {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 75px;

    margin-bottom: 22px;
}


.ks-pricing-benefit {

    display: flex;

    align-items: center;

    gap: 14px;
}


.ks-pricing-benefit-icon {

    width: 47px;
    height: 47px;

    display: flex;

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

    border-radius: 50%;

    font-size: 23px;
}


.ks-pricing-benefit-icon.pricing-purple {

    color: #6C1FE0;

    background: #F3EFFC;
}


.ks-pricing-benefit-icon.pricing-green {

    color: #4FD8F5;

    background: #F3EFFC;
}


.ks-pricing-benefit-icon.pricing-blue {

    color: #2E8FF5;

    background: #F3EFFC;
}


.ks-pricing-benefit strong {

    display: block;

    color: #0E0526;

    font-size: 16px;

    line-height: 1.3;

    font-weight: 700;
}


.ks-pricing-benefit span {

    display: block;

    margin-top: 2px;

    color: #221546;

    font-size: 13px;

    line-height: 1.3;
}


/* =============================================================
   PRICE CARDS
============================================================= */

.ks-pricing-cards {

    max-width: 1215px;

    margin:
        0 auto;
}


.ks-price-card {

    position: relative;

    height: 100%;

    min-height: 535px;

    display: flex;

    flex-direction: column;

    overflow: hidden;

    border-radius: 17px;

    background: #FFFFFF;

    border: 1px solid #F3EFFC;

    box-shadow:
        0 7px 22px rgba(34,21,70, 0.065);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}


.ks-price-card:hover {

    transform: translateY(-5px);

    box-shadow:
        0 13px 30px rgba(34,21,70, 0.10);
}


/* Premium emphasis */

.ks-premium-card {

    border:
        2px solid #6C1FE0;

    box-shadow:
        0 8px 25px rgba(108,31,224, 0.13);
}


/* =============================================================
   CARD HEADER
============================================================= */

.ks-price-card-header {

    min-height: 88px;

    display: flex;

    align-items: center;

    gap: 22px;

    padding:
        13px
        32px;

    background:
        linear-gradient(
            135deg,
            #FBFAFE,
            #F3EFFC
        );
}


.ks-price-card-icon {

    width: 59px;
    height: 59px;

    flex-shrink: 0;

    display: flex;

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

    border-radius: 50%;

    background: #FFFFFF;

    color: #6C1FE0;

    font-size: 28px;

    box-shadow:
        0 4px 10px rgba(34,21,70, 0.07);
}


.ks-price-card-header h3 {

    margin: 0 0 3px;

    color: #0E0526;

    font-size: 21px;

    line-height: 1.25;

    font-weight: 700;
}


.ks-price-card-header span {

    display: block;

    color: #6E668E;

    font-size: 14px;

    line-height: 1.3;
}


/* =============================================================
   BASIC HEADER
============================================================= */

.ks-basic-header {

    color: #FFFFFF;

    background:
        linear-gradient(
            135deg,
            #4FD8F5 0%,
            #4FD8F5 100%
        );
}


.ks-basic-header h3,
.ks-basic-header span {

    color: #FFFFFF;
}


.ks-basic-header .ks-price-card-icon {

    color: #4FD8F5;
}

.ks-how-it-works-section {
    padding: 96px 24px;
    background: var(--paper);
}

.ks-how-it-works-section .container {
    max-width: 980px;
}

.ks-section-title {
    margin-bottom: 32px;
    color: var(--ink);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    text-align: center;
}

.ks-how-it-works-section iframe {
    border: 0;
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(34, 21, 70, 0.16);
}

/* =============================================================
   PREMIUM HEADER
============================================================= */

.ks-premium-header {

    color: #FFFFFF;

    background:
        linear-gradient(
            135deg,
            #8A3CF2 0%,
            #6C1FE0 100%
        );
}


.ks-premium-header h3,
.ks-premium-header span {

    color: #FFFFFF;
}


.ks-premium-header .ks-price-card-icon {

    color: #6C1FE0;
}


/* =============================================================
   POPULAR RIBBON
============================================================= */

.ks-popular-ribbon {

    position: absolute;

    top: 0;
    right: 27px;

    z-index: 5;

    width: 64px;
    height: 73px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: flex-start;

    padding-top: 13px;

    color: #0E0526;

    background: #4FD8F5;

    clip-path:
        polygon(
            0 0,
            100% 0,
            100% 78%,
            50% 100%,
            0 78%
        );
}


.ks-popular-ribbon strong {

    font-size: 14px;

    line-height: 1.1;

    font-weight: 700;
}


.ks-popular-ribbon span {

    margin-top: 2px;

    font-size: 12px;

    line-height: 1.1;
}


/* =============================================================
   PRICE CONTENT
============================================================= */

.ks-price-content {

    text-align: center;

    padding:
        18px
        15px
        9px;
}


.ks-price {

    color: #6C1FE0;

    font-size: 32px;

    line-height: 1.15;

    font-weight: 700;
}


.ks-price small {

    font-size: 14px;

    font-weight: 600;

    color: #6E668E;
}


.ks-basic-card .ks-price {

    color: #4FD8F5;
}


.ks-premium-card .ks-price {

    color: #6C1FE0;
}


.ks-price-period {

    margin-top: 7px;

    color: #0E0526;

    font-size: 14px;

    line-height: 1.3;

    font-weight: 600;
}


.ks-price-divider {

    width: 82%;

    height: 1px;

    margin:
        0
        auto
        8px;

    background: #F3EFFC;
}


/* =============================================================
   FEATURES LIST
============================================================= */

.ks-price-features {

    flex: 1;

    margin: 0;

    padding:
        0
        35px;

    list-style: none;
}


.ks-price-features li {

    display: flex;

    align-items: center;

    gap: 9px;

    margin-bottom: 7px;

    color: #0E0526;

    font-size: 14px;

    line-height: 1.3;

    font-weight: 500;
}


.ks-price-features li i {

    font-size: 14px;

    flex-shrink: 0;
}


.ks-price-features li.included i {

    color: #4FD8F5;
}


.ks-price-features li.excluded i {

    color: #8A3CF2;
}


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

.ks-price-btn {

    min-height: 46px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin:
        9px
        38px
        20px;

    border-radius: 25px;

    text-decoration: none;

    font-size: 16px;

    font-weight: 600;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


.ks-price-btn:hover {

    transform: translateY(-2px);
}


/* Free */

.ks-free-btn {

    color: #6C1FE0;

    border: 1.5px solid #6C1FE0;

    background: #FFFFFF;
}


.ks-free-btn:hover {

    color: #6C1FE0;

    box-shadow:
        0 5px 13px rgba(108,31,224, 0.12);
}


/* Basic */

.ks-basic-btn {

    color: #FFFFFF;

    background:
        linear-gradient(
            135deg,
            #6E668E,
            #4FD8F5
        );

    box-shadow:
        0 5px 12px rgba(110,102,142, 0.15);
}


.ks-basic-btn:hover {

    color: #FFFFFF;

    box-shadow:
        0 8px 17px rgba(110,102,142, 0.22);
}


/* Premium */

.ks-premium-btn {

    color: #FFFFFF;

    background:
        linear-gradient(
            135deg,
            #8A3CF2,
            #4A1AA8
        );

    box-shadow:
        0 5px 13px rgba(108,31,224, 0.20);
}


.ks-premium-btn:hover {

    color: #FFFFFF;

    box-shadow:
        0 8px 18px rgba(108,31,224, 0.28);
}


/* =============================================================
   GUARANTEE STRIP
============================================================= */

.ks-pricing-guarantee {

    max-width: 1300px;

    min-height: 120px;

    display: flex;

    align-items: center;

    gap: 30px;

    margin:
        28px
        auto
        0;

    padding:
        18px
        30px;

    border-radius: 18px;

    background:
        linear-gradient(
            110deg,
            #F3EFFC,
            #FBFAFE
        );

    border: 1px solid #F3EFFC;
}


/* Main guarantee */

.ks-guarantee-main {

    flex: 1.4;

    display: flex;

    align-items: center;

    gap: 18px;
}


.ks-guarantee-icon {

    width: 65px;
    height: 65px;

    flex-shrink: 0;

    display: flex;

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

    border-radius: 50%;

    color: #FFFFFF;

    font-size: 31px;

    background:
        linear-gradient(
            135deg,
            #8A3CF2,
            #6C1FE0
        );

    box-shadow:
        0 5px 13px rgba(108,31,224, 0.15);
}


.ks-guarantee-main h3 {

    margin: 0 0 6px;

    color: #0E0526;

    font-size: 18px;

    line-height: 1.25;

    font-weight: 700;
}


.ks-guarantee-main p {

    max-width: 400px;

    margin: 0;

    color: #221546;

    font-size: 13px;

    line-height: 1.55;
}


/* Divider */

.ks-guarantee-divider {

    width: 1px;

    height: 68px;

    background: #F3EFFC;
}


/* Small guarantee items */

.ks-guarantee-item {

    flex: 1;

    display: flex;

    align-items: center;

    gap: 14px;
}


.ks-guarantee-small-icon {

    width: 59px;
    height: 59px;

    flex-shrink: 0;

    display: flex;

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

    border-radius: 50%;

    color: #6C1FE0;

    background: #FFFFFF;

    font-size: 25px;

    box-shadow:
        0 3px 10px rgba(34,21,70, 0.06);
}


.ks-guarantee-item strong {

    display: block;

    margin-bottom: 5px;

    color: #0E0526;

    font-size: 14px;

    line-height: 1.25;

    font-weight: 700;
}


.ks-guarantee-item span {

    display: block;

    color: #221546;

    font-size: 12px;

    line-height: 1.45;
}


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

@media (max-width: 1199px) {

    .ks-pricing-benefits {

        gap: 40px;
    }

    .ks-price-card-header {

        padding-left: 22px;
        padding-right: 22px;
    }

    .ks-price-features {

        padding-left: 24px;
        padding-right: 24px;
    }

    .ks-price-btn {

        margin-left: 25px;
        margin-right: 25px;
    }

    .ks-pricing-guarantee {

        gap: 20px;
        padding-left: 20px;
        padding-right: 20px;
    }
}


@media (max-width: 991px) {

    .ks-pricing-section {

        padding-top: 50px;
    }

    .ks-pricing-benefits {

        flex-wrap: wrap;

        gap: 20px 45px;

        margin-bottom: 30px;
    }

    .ks-price-card {

        min-height: 550px;
    }

    .ks-pricing-guarantee {

        flex-wrap: wrap;

        padding: 25px;
    }

    .ks-guarantee-main {

        flex-basis: 100%;
    }

    .ks-guarantee-divider {

        display: none;
    }

    .ks-guarantee-item {

        flex-basis: 29%;
    }
}


@media (max-width: 767px) {

    .ks-pricing-section {

        padding:
            45px
            18px
            60px;
    }

    .ks-pricing-title {

        font-size: 43px;

        letter-spacing: -1px;
    }

    .ks-pricing-subtitle {

        font-size: 16px;
    }

    .ks-pricing-benefits {

        align-items: flex-start;

        flex-direction: column;

        width: fit-content;

        margin-left: auto;
        margin-right: auto;

        gap: 15px;
    }

    .ks-price-card {

        min-height: 530px;
    }

    .ks-price-card-header {

        padding:
            14px
            20px;
    }

    .ks-price-features {

        padding-left: 30px;
        padding-right: 30px;
    }

    .ks-price-features li {

        font-size: 13px;
    }

    .ks-pricing-guarantee {

        flex-direction: column;

        align-items: flex-start;

        gap: 22px;

        margin-top: 25px;

        padding: 22px;
    }

    .ks-guarantee-main {

        width: 100%;
    }

    .ks-guarantee-item {

        width: 100%;
    }

    .ks-guarantee-divider {

        display: none;
    }
}


@media (max-width: 480px) {

    .ks-price-card-header {

        gap: 14px;
    }

    .ks-price-card-icon {

        width: 50px;
        height: 50px;

        font-size: 23px;
    }

    .ks-price-card-header h3 {

        font-size: 18px;
    }

    .ks-price {

        font-size: 29px;
    }

    .ks-popular-ribbon {

        right: 15px;
    }
}

 /* =============================================================
    FAQ SECTION
 ============================================================= */

.ks-faq-section {

    position: relative;

    width: 100%;

    padding:
        20px
        5.8%
        20px;

    background:
        radial-gradient(
            circle at 50% 20%,
            #ffffff 0%,
            #FBFAFE 60%,
            #FBFAFE 100%
        );

    overflow: hidden;
}


.ks-faq-container {

    max-width: 1450px;

    margin: 0 auto;
}


/* =============================================================
   FAQ HEADER
============================================================= */

.ks-faq-header {

    margin-bottom: 30px;
}


.ks-faq-title {

    margin: 0;

    color: #0E0526;

    font-size: clamp(37px, 5vw, 48px);

    line-height: 1.05;

    font-weight: 700;

    letter-spacing: -2px;
}


.ks-faq-line {

    width: 74px;

    height: 5px;

    margin-top: 20px;

    margin-bottom: 18px;

    background: #6C1FE0;

    border-radius: 10px;
}


.ks-faq-subtitle {

    margin: 0;

    color: #221546;

    font-size: 19px;

    line-height: 1.5;
}


/* =============================================================
   MAIN FAQ BOX
============================================================= */

.ks-faq-box {

    padding:
        22px
        24px
        25px;

    background: rgba(255,255,255, 0.94);

    border: 1px solid #F3EFFC;

    border-radius: 17px;

    box-shadow:
        0 5px 20px rgba(34,21,70, 0.055);
}


/* =============================================================
   FAQ ITEMS
============================================================= */

.ks-faq-item {

    margin-bottom: 7px;

    border:
        1px solid #F3EFFC !important;

    border-radius: 9px !important;

    overflow: hidden;

    background: #FFFFFF;
}


.ks-faq-item:last-child {

    margin-bottom: 0;
}


/* =============================================================
   QUESTION
============================================================= */

.ks-faq-question {

    min-height: 48px;

    padding:
        8px
        15px;

    color: #0E0526 !important;

    background: #FFFFFF !important;

    box-shadow: none !important;

    font-size: 17px;

    line-height: 1.35;

    font-weight: 600;
}


.ks-faq-question::after {

    width: 16px;
    height: 16px;

    margin-left: auto;

    background-size: 16px;

    filter:
        brightness(0)
        saturate(100%)
        invert(16%)
        sepia(20%)
        saturate(1200%)
        hue-rotate(200deg);
}


.ks-faq-question:not(.collapsed) {

    color: #0E0526 !important;

    background:
        linear-gradient(
            90deg,
            #F3EFFC,
            #FBFAFE
        ) !important;
}


.ks-faq-question:not(.collapsed)::after {

    filter:
        brightness(0)
        saturate(100%)
        invert(29%)
        sepia(91%)
        saturate(3000%)
        hue-rotate(250deg);
}


/* =============================================================
   NUMBER
============================================================= */

.ks-faq-number {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 34px;

    margin-right: 2px;

    color: #0E0526;

    font-size: 17px;

    font-weight: 700;
}


.ks-faq-question-text {

    flex: 1;
}


/* =============================================================
   ANSWER
============================================================= */

.ks-faq-answer {

    padding:
        15px
        56px
        17px;

    border-top: 1px solid #F3EFFC;

    color: #221546;

    background: #FFFFFF;

    font-size: 16px;

    line-height: 1.65;
}


.ks-faq-answer strong {

    color: #0E0526;

    font-weight: 700;
}


/* =============================================================
   VIEW ALL
============================================================= */

.ks-faq-more {

    display: flex;

    justify-content: center;

    margin-top: 23px;
}


.ks-faq-more-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    min-width: 170px;

    height: 46px;

    padding:
        0
        22px;

    border: 1.5px solid #6C1FE0;

    border-radius: 24px;

    color: #6C1FE0;

    background: #FFFFFF;

    font-size: 15px;

    font-weight: 600;

    cursor: pointer;

    transition:
        all 0.25s ease;
}


.ks-faq-more-btn:hover {

    color: #FFFFFF;

    background: #6C1FE0;

    transform: translateY(-2px);

    box-shadow:
        0 7px 16px rgba(108,31,224, 0.18);
}


.ks-faq-more-btn i {

    font-size: 17px;

    transition:
        transform 0.25s ease;
}


.ks-faq-more-btn:hover i {

    transform: translateX(3px);
}


/* =============================================================
   ALL FAQ MODAL
============================================================= */

.ks-all-faq-modal {

    overflow: hidden;

    border: 1px solid #F3EFFC;

    border-radius: 20px;

    background: #FBFAFE;

    box-shadow:
        0 25px 70px rgba(34,21,70, 0.20);
}


/* =============================================================
   MODAL HEADER
============================================================= */

.ks-all-faq-header {

    padding:
        23px
        30px;

    border-bottom: 1px solid #F3EFFC;

    background:
        linear-gradient(
            135deg,
            #FFFFFF,
            #F3EFFC
        );
}


.ks-all-faq-header .modal-title {

    margin: 0;

    color: #0E0526;

    font-size: 27px;

    font-weight: 700;
}


.ks-all-faq-header p {

    margin: 5px 0 0;

    color: #6E668E;

    font-size: 14px;
}


.ks-all-faq-header .btn-close {

    box-shadow: none !important;

    opacity: 0.7;
}


/* =============================================================
   SCROLLABLE MODAL CONTENT
============================================================= */

.ks-all-faq-body {

    padding:
        18px
        24px;

    max-height: 68vh;

    overflow-y: auto;

    scrollbar-width: thin;

    scrollbar-color:
        #8A3CF2
        #F3EFFC;
}


/* Chrome / Edge scrollbar */

.ks-all-faq-body::-webkit-scrollbar {

    width: 8px;
}


.ks-all-faq-body::-webkit-scrollbar-track {

    background: #F3EFFC;

    border-radius: 10px;
}


.ks-all-faq-body::-webkit-scrollbar-thumb {

    background: #8A3CF2;

    border-radius: 10px;
}


.ks-all-faq-body::-webkit-scrollbar-thumb:hover {

    background: #6C1FE0;
}


/* =============================================================
   MODAL FAQ ITEMS
============================================================= */

.ks-all-faq-accordion .accordion-item {

    margin-bottom: 8px;

    border:
        1px solid #F3EFFC;

    border-radius: 10px;

    overflow: hidden;

    background: #FFFFFF;
}


.ks-all-faq-accordion .accordion-button {

    min-height: 55px;

    padding:
        10px
        18px;

    color: #0E0526;

    background: #FFFFFF;

    box-shadow: none !important;

    font-size: 16px;

    line-height: 1.45;

    font-weight: 600;
}


.ks-all-faq-accordion .accordion-button:not(.collapsed) {

    color: #6C1FE0;

    background:
        linear-gradient(
            90deg,
            #FBFAFE,
            #FFFFFF
        );
}


.ks-all-faq-accordion .accordion-button::after {

    flex-shrink: 0;
}


.ks-modal-faq-number {

    min-width: 36px;

    margin-right: 5px;

    color: #6C1FE0;

    font-weight: 700;
}


.ks-all-faq-accordion .accordion-body {

    padding:
        16px
        60px
        20px;

    border-top: 1px solid #F3EFFC;

    color: #221546;

    background: #FFFFFF;

    font-size: 15px;

    line-height: 1.7;
}


.ks-all-faq-accordion .accordion-body a {

    color: #6C1FE0;

    font-weight: 600;

    text-decoration: none;
}


.ks-all-faq-accordion .accordion-body a:hover {

    text-decoration: underline;
}


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

.ks-all-faq-footer {

    justify-content: space-between;

    padding:
        14px
        24px;

    border-top: 1px solid #F3EFFC;

    background: #FFFFFF;
}


.ks-all-faq-footer span {

    color: #6E668E;

    font-size: 13px;
}


.ks-faq-close-btn {

    min-width: 80px;

    height: 36px;

    border: none;

    border-radius: 20px;

    color: #FFFFFF;

    background: #6C1FE0;

    font-size: 14px;

    font-weight: 600;

    cursor: pointer;
}


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

@media (max-width: 767px) {

    .ks-faq-section {

        padding:
            45px
            18px
            60px;
    }

    .ks-faq-title {

        font-size: 43px;

        letter-spacing: -1px;
    }

    .ks-faq-subtitle {

        font-size: 16px;
    }

    .ks-faq-box {

        padding:
            14px;
    }

    .ks-faq-question {

        min-height: 55px;

        padding:
            8px
            10px;

        font-size: 15px;
    }

    .ks-faq-number {

        min-width: 28px;

        font-size: 15px;
    }

    .ks-faq-answer {

        padding:
            14px
            20px;

        font-size: 14px;
    }

    .ks-all-faq-header {

        padding:
            20px;
    }

    .ks-all-faq-header .modal-title {

        font-size: 22px;
    }

    .ks-all-faq-body {

        max-height: 70vh;

        padding:
            12px;
    }

    .ks-all-faq-accordion .accordion-button {

        padding:
            10px
            12px;

        font-size: 14px;
    }

    .ks-all-faq-accordion .accordion-body {

        padding:
            14px
            18px;

        font-size: 14px;
    }
}

/* =============================================================
   FINAL CTA SECTION
============================================================= */

.ks-final-cta-section {

    width: 100%;

    padding:
        18px
        1.5%
        16px;

    background: #FFFFFF;
}


.ks-final-cta {

    position: relative;

    min-height: 485px;

    display: flex;

    align-items: center;

    overflow: hidden;

    border-radius: 25px;

    background:
        linear-gradient(
            110deg,
            #170A3D 0%,
            #4A1AA8 35%,
            #6C1FE0 68%,
            #8A3CF2 100%
        );

    box-shadow:
        0 8px 25px rgba(74,26,168, 0.12);
}


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

.ks-cta-content {

    position: relative;

    z-index: 3;

    width: 48%;

    padding-left: 7.2%;
}


.ks-cta-title {

    margin: 0 0 18px;

    color: #FFFFFF;

    font-size: clamp(42px, 4.2vw, 64px);

    line-height: 1.08;

    letter-spacing: -2px;

    font-weight: 700;
}


.ks-cta-title span {

    color: #4FD8F5;
}


.ks-cta-description {

    max-width: 570px;

    margin: 0 0 27px;

    color: #FFFFFF;

    font-size: 17px;

    line-height: 1.55;

    font-weight: 400;
}


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

.ks-cta-primary {

    width: 495px;

    max-width: 100%;

    min-height: 72px;

    display: flex;

    align-items: center;

    gap: 17px;

    padding:
        8px
        15px;

    border-radius: 11px;

    color: #6C1FE0;

    background: #FFFFFF;

    text-decoration: none;

    font-size: 22px;

    font-weight: 700;

    box-shadow:
        0 5px 15px rgba(34,21,70, 0.16);

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


.ks-cta-primary:hover {

    color: #6C1FE0;

    transform: translateY(-2px);

    box-shadow:
        0 9px 22px rgba(34,21,70, 0.25);
}


.ks-cta-icon {

    width: 53px;

    height: 53px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    border-radius: 50%;

    color: #6C1FE0;

    background: #F3EFFC;

    font-size: 23px;
}


.ks-cta-arrow {

    margin-left: auto;

    font-size: 30px;
}


/* =============================================================
   GOOGLE PLAY BUTTON
============================================================= */

.ks-cta-google {

    width: 495px;

    max-width: 100%;

    min-height: 69px;

    display: flex;

    align-items: center;

    gap: 18px;

    margin-top: 15px;

    padding:
        8px
        17px;

    border: 2px solid rgba(255,255,255,.9);

    border-radius: 11px;

    color: #FFFFFF;

    background: transparent;

    text-decoration: none;

    font-size: 20px;

    font-weight: 500;

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


.ks-cta-google:hover {

    color: #FFFFFF;

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

    transform: translateY(-2px);
}


.ks-google-icon {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 57px;

    font-size: 32px;
}


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

.ks-cta-visual {

    position: absolute;

    right: 1.5%;

    bottom: 0;

    width: 53%;

    height: 100%;

    display: flex;

    align-items: flex-end;

    justify-content: center;

    z-index: 2;
}


.ks-cta-family-image {

    width: 100%;

    max-width: 850px;

    height: auto;

    max-height: 100%;

    object-fit: contain;

    object-position: bottom center;
}


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

.ks-footer {

    width: 100%;

    padding:
        30px
        7.5%
        0;

    color: #FFFFFF;

    background:
        linear-gradient(
            135deg,
            #0E0526 0%,
            #170A3D 50%,
            #0E0526 100%
        );
}


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

.ks-footer-container {

    max-width: 1400px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        1.55fr
        1fr
        1fr
        1fr;
}


/* =============================================================
   BRAND
============================================================= */

.ks-footer-brand {

    padding-right: 50px;

    border-right:
        1px solid rgba(138,60,242, 0.32);
}


.ks-footer-logo {

    display: inline-block;

    text-decoration: none;
}


.ks-footer-logo img {

    width: 200px;

    height: auto;

    display: block;
}


.ks-footer-tagline {

    margin:
        12px
        0
        22px;

    color: #FFFFFF;

    font-size: 16px;

    line-height: 1.5;
}


/* =============================================================
   SOCIAL LINKS
============================================================= */

.ks-social-links {

    display: flex;

    align-items: center;

    gap: 17px;
}


.ks-social {

    width: 42px;

    height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    color: #FFFFFF;

    text-decoration: none;

    font-size: 20px;

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


.ks-social:hover {

    color: #FFFFFF;

    transform: translateY(-3px);

    opacity: .88;
}


.ks-social.facebook {

    background: #6E668E;
}


.ks-social.instagram {

    background:
        linear-gradient(
            135deg,
            #6C1FE0,
            #6E668E,
            #6E668E
        );
}


.ks-social.youtube {

    background: #6E668E;
}


.ks-social.email {

    background: #6C1FE0;
}


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

.ks-footer-column {

    min-height: 185px;

    padding:
        0
        45px;

    border-right:
        1px solid rgba(138,60,242, 0.32);
}


.ks-footer-column:last-child {

    border-right: none;
}


.ks-footer-column h3 {

    margin:
        0
        0
        18px;

    color: #FFFFFF;

    font-size: 18px;

    font-weight: 600;
}


.ks-footer-column ul {

    margin: 0;

    padding: 0;

    list-style: none;
}


.ks-footer-column li {

    margin-bottom: 10px;
}


.ks-footer-column a {

    color: #F3EFFC;

    text-decoration: none;

    font-size: 16px;

    transition:
        color .2s ease;
}


.ks-footer-column a:hover {

    color: #FFFFFF;
}


/* =============================================================
   COPYRIGHT
============================================================= */

.ks-footer-bottom {

    max-width: 1400px;

    margin:
        24px auto
        0;

    padding:
        13px
        0
        15px;

    border-top:
        1px solid rgba(138,60,242, 0.30);

    text-align: center;
}


.ks-footer-bottom p {

    margin: 0;

    color: #F3EFFC;

    font-size: 15px;
}


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

@media (max-width: 991px) {

    .ks-final-cta {

        min-height: auto;

        padding:
            55px
            45px;
    }


    .ks-cta-content {

        width: 60%;

        padding-left: 0;
    }


    .ks-cta-visual {

        width: 48%;

        opacity: .55;
    }


    .ks-footer {

        padding-left: 5%;

        padding-right: 5%;
    }


    .ks-footer-container {

        grid-template-columns:
            1.5fr 1fr 1fr;
    }


    .ks-footer-column:last-child {

        margin-top: 30px;
    }

}


@media (max-width: 767px) {

    /* CTA */

    .ks-final-cta-section {

        padding:
            12px;
    }


    .ks-final-cta {

        display: block;

        min-height: auto;

        padding:
            40px
            25px;

        border-radius: 20px;
    }


    .ks-cta-content {

        width: 100%;

        padding: 0;

        position: relative;

        z-index: 4;
    }


    .ks-cta-title {

        font-size: 40px;

        letter-spacing: -1px;
    }


    .ks-cta-description {

        font-size: 15px;
    }


    .ks-cta-primary {

        width: 100%;

        font-size: 17px;
    }


    .ks-cta-google {

        width: 100%;

        font-size: 16px;
    }


    .ks-cta-visual {

        position: relative;

        right: auto;

        width: 100%;

        height: 250px;

        margin-top: 25px;

        opacity: 1;
    }


    /* FOOTER */

    .ks-footer {

        padding:
            35px
            22px
            0;
    }


    .ks-footer-container {

        display: grid;

        grid-template-columns: 1fr;

        gap: 30px;
    }


    .ks-footer-brand {

        padding-right: 0;

        padding-bottom: 25px;

        border-right: none;

        border-bottom:
            1px solid rgba(138,60,242, 0.32);
    }


    .ks-footer-column {

        min-height: auto;

        padding:
            0 0 25px;

        border-right: none;

        border-bottom:
            1px solid rgba(138,60,242, 0.32);
    }


    .ks-footer-column:last-child {

        border-bottom: none;

        margin-top: 0;
    }


    .ks-footer-logo img {

        width: 205px;
    }

}

/* Feature illustrations replaced with lightweight Bootstrap Icons 
.ks-feature-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 150px;
}*/

.ks-feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 92px;
    height: 92px;
    font-size: 64px;
    line-height: 1;
    border-radius: 24px;
    background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(243,239,252,.9));
    box-shadow: 0 8px 22px rgba(74,26,168, .10);
}

.ks-icon-purple { color: #6C1FE0; }
.ks-icon-green  { color: #6E668E; }
.ks-icon-blue   { color: #2E8FF5; }
.ks-icon-orange { color: #6E668E; }
.ks-icon-red    { color: #6E668E; }

@media (max-width: 767.98px) {
    .ks-feature-visual {
        min-height: 125px;
    }

    .ks-feature-icon {
        width: 78px;
        height: 78px;
        font-size: 52px;
        border-radius: 20px;
    }
}

    

/* =============================================================
   FINAL UI REFINEMENTS
============================================================= */

/* 1. Sleek, compact navigation */
.ks-navbar-wrapper { padding-top: 7px; }
.ks-navbar { min-height: 48px; padding: 4px 14px 4px 18px; border-radius: 14px; }
.ks-logo img { width: 135px; }
.ks-nav-link { min-height: 40px; padding-left: 12px !important; padding-right: 12px !important; font-size: 14px; }
.ks-nav-link.active::after { bottom: 0; height: 2px; }
.ks-login-btn { min-width: 132px; height: 38px; border-radius: 10px; font-size: 14px; }
.ks-login-btn i { font-size: 17px; }

/* 2. Clean hero icon orbit and visible device-lock badge */
.ks-hero-visual { min-height: 560px; }
.ks-feature { align-items: center; max-width: 210px; }
.ks-feature-icon { width: 58px; height: 58px; border-radius: 15px; font-size: 27px; position: relative; }
.ks-device-lock-badge { position: absolute; right: -4px; bottom: -4px; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--purple-2); color: #fff; border: 2px solid #fff; font-size: 11px; }
.feature-screen-time { top: 62px; left: 12%; }
.feature-location { top: 95px; right: 5%; }
.feature-app-lock { top: 255px; left: 2%; }
.feature-device-lock { top: 280px; right: 2%; }
.feature-sos { bottom: 72px; right: 7%; }

/* 3. Standalone Modes section */
.ks-modes-section { margin-top: 0; padding: 20px 5.5% 20px; background: var(--paper);}
.ks-modes-row { max-width: 1370px; }

/* 5. Cleaner feature card alignment */
.ks-feature-card { min-height: 220px; padding: 22px 24px; gap: 24px; }
/* .ks-feature-visual { width: 112px; min-width: 112px; height: 150px; } */
.ks-feature-icon { width: 82px; height: 82px; font-size: 48px; border-radius: 20px; }
/* .ks-feature-card-content { min-width: 0; align-items: flex-start; justify-content: center; } */
.ks-feature-card-content h3 { margin-bottom: 10px; }
.ks-feature-card-content p { max-width: 100%; margin-bottom: 13px; }
.ks-feature-tag { margin-top: 2px; }

/* 8. Simplified footer */
.ks-footer { padding: 14px 5% 0; background: #0d3e57; }
.ks-footer-container { display: none !important; }
.ks-footer-simple { max-width: 1400px; min-height: 54px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.ks-footer-simple > * {
    margin-top: 0;
    margin-bottom: 0;
}
.ks-footer-simple .ks-footer-privacy {
    display: flex;
    align-items: center;
    gap: 4px;
    line-height: 1;
}

.ks-footer-simple .ks-footer-privacy p {
    margin: 0;
    line-height: 1;
}
.ks-footer-logo img { width: 125px; height: auto; }
.ks-footer-privacy { color: var(--paper-2); text-decoration: none; font-size: 14px; font-weight: 600; }
.ks-footer-privacy:hover { color: #fff; }
.ks-footer-company-link { color: #fff; }
.ks-footer-company-link:hover { color: #fff; }
.ks-footer-bottom { margin-top: 8px; padding: 8px 0 10px; border-top: 1px solid rgba(243,239,252,.18); }
.ks-footer-bottom p { color: var(--paper-2); font-size: 12px; }

@media (max-width: 1199px) {
    .ks-logo img { width: 135px; }
    .ks-login-btn { height: 38px; min-width: 132px; }
}
@media (max-width: 991px) {
    .ks-navbar { min-height: 54px; }
    .ks-navbar-toggler { font-size: 22px; }
    .ks-nav-links { padding-top: 8px; padding-bottom: 8px; }
    .ks-feature-card { gap: 18px; }
    .ks-feature-visual { width: 100px; min-width: 100px; }
}
@media (max-width: 767px) {
    .ks-footer { padding: 12px 18px 0; }
    .ks-footer-simple { min-height: 48px; }
    .ks-footer-logo img { width: 115px; }
    .ks-feature-card { gap: 14px; padding: 16px; }
    .ks-feature-visual { width: 90px; min-width: 90px; height: 135px; }
    .ks-feature-icon { width: 72px; height: 72px; font-size: 42px; }
}
#home,
#what-is-kidsecure,
#modes,
#features,
#pricing,
#faqs {
    scroll-margin-top: 100px;
}