/* =========================================================
   KIYA LEARNING | CODING CLASSES PAGE
   STATIC / MODERN / RESPONSIVE
   Theme: Orange + Black + Warm White
========================================================= */

:root{
    --kl-orange:#F4511E;
    --kl-orange-dark:#D83D10;
    --kl-orange-deep:#A92D0B;

    --kl-red:#FF6B5C;
    --kl-red-light:#FFF0EC;

    --kl-dark:#18191D;
    --kl-dark-2:#22242A;

    --kl-text:#303136;
    --kl-muted:#72747A;

    --kl-bg:#FFFFFF;
    --kl-soft:#FFF8F5;

    --kl-border:#EDE4E1;

    --kl-code:#0E0F13;
    --kl-code-light:#171920;

    --kl-shadow:
        0 20px 55px rgba(48,25,18,.10);

    --kl-shadow-sm:
        0 10px 30px rgba(48,25,18,.08);

    --kl-radius:24px;
    --kl-transition:.35s cubic-bezier(.2,.65,.25,1);
}

/* =========================================================
   RESET
========================================================= */

*{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    padding:0;
    font-family:"Poppins",sans-serif;
    color:var(--kl-text);
    background:#fff;
    font-size:14px;
    line-height:1.7;
    overflow-x:hidden;
}

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

a{
    text-decoration:none;
}

button,
input,
textarea,
select{
    font-family:inherit;
}

p{
    color:var(--kl-muted);
}

.kl-coding-page{
    width:100%;
    overflow:hidden;
    font-family:"Poppins",sans-serif;
}

.kl-coding-page *,
.kl-coding-page *::before,
.kl-coding-page *::after{
    box-sizing:border-box;
}

.kl-section{
    position:relative;
    padding:100px 0;
}

/* =========================================================
   COMMON TYPOGRAPHY
========================================================= */

.kl-section-kicker{
    display:inline-flex;
    align-items:center;
    gap:8px;
    color:var(--kl-orange);
    font-size:11px;
    line-height:1;
    font-weight:800;
    letter-spacing:1px;
    text-transform:uppercase;
}

.kl-section-kicker i{
    font-size:16px;
}

.kl-heading-center{
    max-width:850px;
    margin:0 auto;
    text-align:center;
}

.kl-heading-center h2,
.kl-section-title{
    margin:12px 0 16px;
    color:var(--kl-dark);
    font-size:clamp(31px,4vw,48px);
    line-height:1.16;
    letter-spacing:-1.6px;
    font-weight:800;
}

.kl-heading-center h2 span,
.kl-section-title span{
    color:var(--kl-orange);
}

.kl-heading-center > p,
.kl-section-text{
    max-width:730px;
    margin:0;
    color:var(--kl-muted);
    font-size:15px;
    line-height:1.85;
}

.kl-heading-center > p{
    margin-left:auto;
    margin-right:auto;
}

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

.kl-btn{
    min-height:54px;
    padding:14px 22px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    border-radius:12px;
    border:1px solid transparent;
    font-size:13px;
    line-height:1;
    font-weight:800;
    transition:var(--kl-transition);
    position:relative;
    overflow:hidden;
}

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

.kl-btn:hover::after{
    left:140%;
}

.kl-btn i{
    transition:transform .3s ease;
}

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

.kl-btn-primary{
    color:#fff;
    background:linear-gradient(135deg,var(--kl-orange),var(--kl-orange-dark));
    box-shadow:0 15px 32px rgba(244,81,30,.25);
}

.kl-btn-primary:hover{
    color:#fff;
    transform:translateY(-3px);
    box-shadow:0 20px 42px rgba(244,81,30,.34);
}

.kl-btn-outline{
    color:var(--kl-orange);
    background:#fff;
    border-color:rgba(244,81,30,.25);
}

.kl-btn-outline:hover{
    color:#fff;
    background:var(--kl-orange);
    border-color:var(--kl-orange);
    transform:translateY(-3px);
}

.kl-btn-white{
    color:var(--kl-dark);
    background:#fff;
    box-shadow:0 15px 35px rgba(0,0,0,.18);
}

.kl-btn-white:hover{
    color:var(--kl-orange-dark);
    transform:translateY(-3px);
}
/* =========================================================
   =========================================================
   01. CODING HERO SECTION
   =========================================================
========================================================= */

.kl-code-hero{

    position:relative;

    min-height:720px;

    display:flex;

    align-items:center;

    padding:75px 0 90px;

    color:#fff;

    background:#000;

    overflow:hidden;

    isolation:isolate;

}


/* =========================================================
   02. HERO BACKGROUND GLOW
========================================================= */

.kl-code-hero::before{

    content:"";

    position:absolute;

    inset:0;

    z-index:-3;

    background:

        radial-gradient(
            circle at 78% 25%,
            rgba(244,81,30,.18),
            transparent 27%
        ),

        radial-gradient(
            circle at 8% 85%,
            rgba(255,107,92,.08),
            transparent 24%
        );

}


/* =========================================================
   03. HERO ORANGE FLOATING GLOW
========================================================= */

.kl-code-hero::after{

    content:"";

    position:absolute;

    width:520px;

    height:520px;

    right:-260px;

    top:-250px;

    border-radius:50%;

    background:rgba(244,81,30,.08);

    filter:blur(8px);

    animation:klFloat 9s ease-in-out infinite;

    z-index:-2;

}


/* =========================================================
   04. HERO GRID BACKGROUND
========================================================= */

.kl-code-hero-bg{

    position:absolute;

    inset:0;

    z-index:-1;

    opacity:.28;

    background-image:

        linear-gradient(
            rgba(255,255,255,.045) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,.045) 1px,
            transparent 1px
        );

    background-size:55px 55px;

    mask-image:
        linear-gradient(
            to bottom,
            black 0%,
            transparent 95%
        );

}


/* =========================================================
   05. HERO LEFT CONTENT
========================================================= */

.kl-code-hero-content{

    max-width:760px;

    animation:
        klFadeUp .8s ease both;

}


/* =========================================================
   06. HERO KICKER
========================================================= */

.kl-code-hero .kl-section-kicker{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:7px 13px 7px 7px;

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

    border-radius:100px;

    color:rgba(255,255,255,.80);

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

    font-size:10px;

    font-weight:600;

    letter-spacing:.3px;

}


.kl-code-hero .kl-section-kicker i{

    width:29px;

    height:29px;

    display:grid;

    place-items:center;

    border-radius:50%;

    color:#fff;

    background:var(--kl-orange);

    font-size:14px;

}


/* =========================================================
   07. HERO MAIN HEADING
   DESKTOP HEADING = 33PX
========================================================= */

.kl-code-hero h1{

    margin:25px 0 22px;

    max-width:680px;

    color:#fff;

    font-size:33px !important;

    line-height:1.15;

    letter-spacing:-.8px;

    font-weight:800;

}


.kl-code-hero h1 span{

    color:var(--kl-orange);

}


/* =========================================================
   08. HERO DESCRIPTION
========================================================= */

.kl-hero-description{

    max-width:700px;

    margin:0 0 12px;

    color:rgba(255,255,255,.68);

    font-size:13px;

    line-height:1.8;

}


.kl-hero-description.small-text{

    color:rgba(255,255,255,.46);

    font-size:11.5px;

}


/* =========================================================
   09. HERO CTA BUTTONS
========================================================= */

.kl-hero-actions{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

    margin-top:30px;

}


.kl-code-hero .kl-btn{

    min-height:48px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    padding:12px 20px;

    border-radius:10px;

    font-size:11px;

    font-weight:700;

    transition:

        transform .3s ease,

        box-shadow .3s ease,

        background .3s ease,

        border-color .3s ease;

}


.kl-code-hero .kl-btn-primary{

    color:#fff;

    background:

        linear-gradient(
            135deg,
            var(--kl-orange),
            var(--kl-orange-dark)
        );

    border:1px solid var(--kl-orange);

    box-shadow:
        0 12px 30px
        rgba(244,81,30,.22);

}


.kl-code-hero .kl-btn-primary:hover{

    color:#fff;

    transform:translateY(-3px);

    box-shadow:
        0 18px 38px
        rgba(244,81,30,.35);

}


.kl-code-hero .kl-btn-outline{

    color:#fff;

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

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

}


.kl-code-hero .kl-btn-outline:hover{

    color:#fff;

    background:rgba(244,81,30,.14);

    border-color:var(--kl-orange);

    transform:translateY(-3px);

}


/* =========================================================
   10. HERO TRUST FEATURES
========================================================= */

.kl-hero-trust{

    display:flex;

    flex-wrap:wrap;

    gap:24px;

    margin-top:38px;

}


.kl-trust-item{

    display:flex;

    align-items:center;

    gap:10px;

}


.kl-trust-item > i{

    width:41px;

    height:41px;

    flex:0 0 41px;

    display:grid;

    place-items:center;

    border-radius:11px;

    color:var(--kl-orange);

    background:
        rgba(244,81,30,.10);

    border:
        1px solid
        rgba(244,81,30,.18);

}


.kl-trust-item strong,
.kl-trust-item span{

    display:block;

}


.kl-trust-item strong{

    color:#fff;

    font-size:10px;

    font-weight:750;

}


.kl-trust-item span{

    margin-top:2px;

    color:rgba(255,255,255,.43);

    font-size:8.5px;

}


/* =========================================================
   11. HERO RIGHT IMAGE BOX
   ONLY IMAGE
========================================================= */

.kl-code-hero-image-box{

    position:relative;

    width:100%;

    min-height:500px;

    display:flex;

    align-items:center;

    justify-content:center;

    animation:
        klFadeScale .9s .12s ease both;

}


/* =========================================================
   12. HERO IMAGE
========================================================= */

.kl-code-hero-image{

    width:100%;

    max-width:500px;

    height:500px;

    object-fit:cover;

    object-position:center;

    display:block;

    border-radius:24px;

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

    box-shadow:
        0 35px 80px
        rgba(0,0,0,.55);

    transition:
        transform .6s
        cubic-bezier(.2,.65,.25,1),

        box-shadow .6s ease,

        filter .4s ease;

}


.kl-code-hero-image:hover{

    transform:
        translateY(-7px)
        scale(1.025);

    box-shadow:
        0 45px 95px
        rgba(0,0,0,.65);

    filter:saturate(1.05);

}


/* =========================================================
   13. REMOVE OLD CODE CARD ELEMENTS
========================================================= */

.kl-code-visual,
.kl-code-window,
.kl-code-lines,
.kl-code-circle,
.kl-window-top,
.kl-floating-badge{

    display:none !important;

}


/* =========================================================
   14. HERO ANIMATIONS
========================================================= */

@keyframes klFadeUp{

    from{

        opacity:0;

        transform:
            translateY(25px);

    }

    to{

        opacity:1;

        transform:
            translateY(0);

    }

}


@keyframes klFadeScale{

    from{

        opacity:0;

        transform:
            translateY(20px)
            scale(.97);

    }

    to{

        opacity:1;

        transform:
            translateY(0)
            scale(1);

    }

}


@keyframes klFloat{

    0%,
    100%{

        transform:
            translateY(0)
            scale(1);

    }

    50%{

        transform:
            translateY(20px)
            scale(1.05);

    }

}


/* =========================================================
   15. TABLET RESPONSIVE
   MAX WIDTH 991PX
========================================================= */

@media (max-width:991.98px){

    .kl-code-hero{

        min-height:auto;

        padding:
            70px
            0
            75px;

    }


    .kl-code-hero h1{

        font-size:33px !important;

    }


    .kl-code-hero-content{

        max-width:100%;

    }


    .kl-code-hero-image-box{

        min-height:auto;

        margin-top:15px;

    }


    .kl-code-hero-image{

        width:100%;

        max-width:520px;

        height:400px;

    }

}


/* =========================================================
   16. MOBILE RESPONSIVE
   MAX WIDTH 767PX
========================================================= */

@media (max-width:767.98px){

    .kl-code-hero{

        padding:
            55px
            0
            65px;

    }


    .kl-code-hero h1{

        font-size:33px !important;

        line-height:1.12;

        letter-spacing:-.6px;

    }


    .kl-hero-description{

        font-size:12px;

        line-height:1.75;

    }


    .kl-hero-description.small-text{

        font-size:10.5px;

    }


    .kl-hero-actions{

        flex-direction:column;

        width:100%;

    }


    .kl-code-hero .kl-btn{

        width:100%;

    }


    .kl-hero-trust{

        display:grid;

        grid-template-columns:1fr;

        gap:12px;

        margin-top:30px;

    }


    .kl-code-hero-image-box{

        min-height:auto;

        margin-top:15px;

    }


    .kl-code-hero-image{

        width:100%;

        max-width:100%;

        height:330px;

        border-radius:18px;

    }

}


/* =========================================================
   17. SMALL MOBILE
   MAX WIDTH 480PX
========================================================= */

@media (max-width:480px){

    .kl-code-hero{

        padding:
            45px
            0
            55px;

    }


    .kl-code-hero h1{

        font-size:33px !important;

    }


    .kl-code-hero .kl-section-kicker{

        font-size:9px;

    }


    .kl-code-hero .kl-section-kicker i{

        width:27px;

        height:27px;

        font-size:12px;

    }


    .kl-code-hero-image{

        height:280px;

        border-radius:16px;

    }

}


/* =========================================================
   18. REDUCED MOTION
========================================================= */

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

    .kl-code-hero-content,
    .kl-code-hero-image-box,
    .kl-code-hero::after{

        animation:none !important;

    }


    .kl-code-hero-image{

        transition:none !important;

    }

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

.kl-code-intro{
    background:#fff;
}

.kl-mini-feature{
    height:100%;
    padding:27px 23px;
    border:1px solid var(--kl-border);
    border-radius:18px;
    background:#fff;
    box-shadow:0 5px 20px rgba(48,25,18,.025);
    transition:var(--kl-transition);
}

.kl-mini-feature:hover{
    transform:translateY(-7px);
    border-color:rgba(244,81,30,.22);
    box-shadow:var(--kl-shadow-sm);
}

.kl-feature-icon{
    width:51px;
    height:51px;
    display:grid;
    place-items:center;
    margin-bottom:17px;
    border-radius:14px;
    color:var(--kl-orange);
    background:var(--kl-red-light);
    font-size:21px;
    transition:.3s ease;
}

.kl-mini-feature:hover .kl-feature-icon{
    color:#fff;
    background:var(--kl-orange);
    transform:rotate(-5deg);
}

.kl-mini-feature h3{
    margin:0 0 7px;
    color:var(--kl-dark);
    font-size:17px;
    font-weight:800;
}

.kl-mini-feature p{
    margin:0;
    font-size:12px;
    line-height:1.75;
}

/* =========================================================
   BENEFIT IMAGE / CONTENT
========================================================= */

.kl-code-benefit-section{
    background:var(--kl-soft);
}

.kl-image-card{
    position:relative;
    min-height:410px;
    overflow:hidden;
    border:1px solid var(--kl-border);
    border-radius:24px;
    background:#111;
    box-shadow:var(--kl-shadow);
}

.kl-image-card::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    background:linear-gradient(to top,rgba(0,0,0,.72),transparent 58%);
}

.kl-image-card img{
    width:100%;
    height:410px;
    object-fit:cover;
    transition:transform .7s ease;
}

.kl-image-card:hover img{
    transform:scale(1.05);
}

.kl-image-glow{
    position:absolute;
    z-index:0;
    width:180px;
    height:180px;
    right:-70px;
    top:-70px;
    border-radius:50%;
    background:rgba(244,81,30,.25);
    filter:blur(35px);
}

.kl-image-label{
    position:absolute;
    z-index:2;
    left:20px;
    
    bottom:20px;
    display:flex;
    align-items:center;
    gap:9px;
    padding:12px 14px;
    border-radius:12px;
    color:#fff;
    background:rgba(24,25,29,.88);
    backdrop-filter:blur(10px);
    font-size:11px;
    font-weight:750;
}

.kl-image-label i{
    color:var(--kl-orange);
    font-size:17px;
}

.kl-benefit-list{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:10px 20px;
    margin-top:25px;
}

.kl-benefit-item{
    display:flex;
    align-items:flex-start;
    gap:9px;
    padding:11px 12px;
    border:1px solid var(--kl-border);
    border-radius:11px;
    background:#fff;
    color:var(--kl-text);
    font-size:12px;
    font-weight:650;
    transition:.3s ease;
}

.kl-benefit-item:hover{
    transform:translateX(4px);
    border-color:rgba(244,81,30,.25);
    background:#fff;
}

.kl-benefit-item i{
    color:var(--kl-orange);
    margin-top:2px;
}

/* =========================================================
   WHY CODING / REASON CARDS
========================================================= */

.kl-why-coding{
    background:#fff;
}

.kl-reason-card{
    position:relative;
    height:100%;
    padding:31px 27px;
    overflow:hidden;
    border:1px solid var(--kl-border);
    border-radius:20px;
    background:#fff;
    transition:var(--kl-transition);
}

.kl-reason-card::after{
    content:"";
    position:absolute;
    width:120px;
    height:120px;
    right:-70px;
    bottom:-70px;
    border-radius:50%;
    background:rgba(244,81,30,.07);
    transition:.4s ease;
}

.kl-reason-card:hover{
    transform:translateY(-8px);
    border-color:rgba(244,81,30,.23);
    box-shadow:var(--kl-shadow);
}

.kl-reason-card:hover::after{
    transform:scale(1.5);
}

.kl-card-number{
    position:absolute;
    top:20px;
    right:22px;
    color:#d8d8da;
    font-size:11px;
    font-weight:800;
}

.kl-reason-icon{
    width:55px;
    height:55px;
    display:grid;
    place-items:center;
    margin-bottom:19px;
    border-radius:15px;
    color:var(--kl-orange);
    background:var(--kl-red-light);
    font-size:22px;
    transition:.3s ease;
}

.kl-reason-card:hover .kl-reason-icon{
    color:#fff;
    background:var(--kl-orange);
    transform:translateY(-3px) rotate(-4deg);
}

.kl-reason-card h3{
    margin:0 0 9px;
    color:var(--kl-dark);
    font-size:18px;
    line-height:1.35;
    font-weight:800;
}

.kl-reason-card p{
    margin:0;
    font-size:12px;
    line-height:1.8;
}

/* =========================================================
   LEVELS
========================================================= */

.kl-levels-section{
    background:var(--kl-soft);
}

.kl-level-card{
    position:relative;
    height:100%;
    padding:28px;
    overflow:hidden;
    border:1px solid var(--kl-border);
    border-radius:22px;
    background:#fff;
    box-shadow:0 7px 25px rgba(48,25,18,.035);
    transition:var(--kl-transition);
}

.kl-level-card:hover{
    transform:translateY(-8px);
    box-shadow:var(--kl-shadow);
    border-color:rgba(244,81,30,.25);
}

.kl-level-card.featured{
    border:1px solid rgba(244,81,30,.35);
    box-shadow:0 18px 45px rgba(244,81,30,.11);
}

.kl-level-card.featured::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:linear-gradient(145deg,rgba(244,81,30,.055),transparent 45%);
}

.kl-popular{
    position:absolute;
    top:0;
    right:0;
    padding:7px 13px;
    border-radius:0 0 0 12px;
    color:#fff;
    background:var(--kl-orange);
    font-size:9px;
    font-weight:800;
    letter-spacing:.4px;
    text-transform:uppercase;
}

.kl-level-top{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:15px;
}

.kl-level-tag{
    display:block;
    margin-bottom:7px;
    color:var(--kl-orange);
    font-size:9px;
    font-weight:800;
    letter-spacing:1px;
}

.kl-level-top h3{
    margin:0;
    color:var(--kl-dark);
    font-size:22px;
    line-height:1.2;
    font-weight:800;
}

.kl-level-icon{
    width:52px;
    height:52px;
    flex:0 0 52px;
    display:grid;
    place-items:center;
    border-radius:14px;
    color:var(--kl-orange);
    background:var(--kl-red-light);
    font-size:21px;
}

.kl-class-count{
    display:flex;
    align-items:baseline;
    gap:7px;
    margin:25px 0 8px;
}

.kl-class-count strong{
    color:var(--kl-dark);
    font-size:35px;
    line-height:1;
    font-weight:800;
}

.kl-class-count span{
    color:var(--kl-muted);
    font-size:11px;
}

.kl-level-card > p{
    min-height:62px;
    margin:0 0 18px;
    font-size:12px;
    line-height:1.75;
}

.kl-level-card ul{
    list-style:none;
    padding:0;
    margin:0;
    display:grid;
    gap:9px;
}

.kl-level-card li{
    display:flex;
    gap:8px;
    color:var(--kl-text);
    font-size:11px;
    font-weight:600;
}

.kl-level-card li i{
    color:var(--kl-orange);
    margin-top:2px;
}

.kl-certification{
    display:flex;
    align-items:center;
    gap:8px;
    margin-top:24px;
    padding-top:17px;
    border-top:1px solid var(--kl-border);
    color:var(--kl-muted);
    font-size:10px;
    font-weight:700;
}

.kl-certification i{
    color:var(--kl-orange);
    font-size:16px;
}

/* =========================================================
   SKILLS SECTION
========================================================= */

.kl-skills-section{
    background:#fff;
}

.kl-progress-list{
    display:grid;
    gap:19px;
    margin-top:30px;
}

.kl-progress-item > div:first-child{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:7px;
    color:var(--kl-text);
    font-size:11px;
    font-weight:700;
}

.kl-progress-item strong{
    color:var(--kl-orange);
}

.kl-progress{
    height:7px;
    overflow:hidden;
    border-radius:100px;
    background:#f0e8e5;
}

.kl-progress > span{
    display:block;
    height:100%;
    border-radius:inherit;
    background:linear-gradient(90deg,var(--kl-orange-dark),var(--kl-orange));
    transform-origin:left;
    animation:klProgress 1.2s ease both;
}

.kl-skill-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:15px;
}

.kl-skill-box{
    min-height:180px;
    padding:24px;
    border:1px solid var(--kl-border);
    border-radius:18px;
    background:#fff;
    transition:var(--kl-transition);
}

.kl-skill-box:hover{
    transform:translateY(-6px);
    border-color:rgba(244,81,30,.23);
    box-shadow:var(--kl-shadow-sm);
}

.kl-skill-box > i{
    display:block;
    margin-bottom:16px;
    color:var(--kl-orange);
    font-size:25px;
}

.kl-skill-box h3{
    margin:0 0 7px;
    color:var(--kl-dark);
    font-size:16px;
    font-weight:800;
}

.kl-skill-box p{
    margin:0;
    font-size:11px;
    line-height:1.75;
}

/* =========================================================
   STORY IMAGES - SAME STATIC IMAGE ONLY
========================================================= */

.kl-code-story{
    background:var(--kl-soft);
}

.kl-story-images{
    position:relative;
    min-height:460px;
}

.kl-story-main{
    position:absolute;
    left:0;
    top:0;
    width:84%;
    height:390px;
    overflow:hidden;
    border-radius:24px;
    border:1px solid var(--kl-border);
    box-shadow:var(--kl-shadow);
}

.kl-story-main img,
.kl-story-small img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .7s ease;
}

.kl-story-main:hover img,
.kl-story-small:hover img{
    transform:scale(1.05);
}

.kl-story-small{
    position:absolute;
    right:0;
    bottom:0;
    width:55%;
    height:220px;
    overflow:hidden;
    border:7px solid var(--kl-soft);
    border-radius:20px;
    box-shadow:0 18px 45px rgba(48,25,18,.16);
}

.kl-story-number{
    position:absolute;
    left:25px;
    bottom:35px;
    z-index:3;
    display:flex;
    align-items:center;
    gap:9px;
    padding:10px 13px;
    border-radius:10px;
    color:#fff;
    background:var(--kl-dark);
    box-shadow:0 12px 30px rgba(0,0,0,.2);
}

.kl-story-number strong{
    color:var(--kl-orange);
    font-size:18px;
}

.kl-story-number span{
    font-size:10px;
    font-weight:700;
}

.kl-check-content{
    display:grid;
    gap:11px;
    margin-top:25px;
}

.kl-check-content > div{
    display:flex;
    align-items:flex-start;
    gap:9px;
    color:var(--kl-text);
    font-size:12px;
    font-weight:650;
}

.kl-check-content i{
    color:var(--kl-orange);
    margin-top:3px;
}

/* =========================================================
   CREATIVITY
========================================================= */

.kl-creativity-section{
    background:#fff;
}

.kl-creativity-image{
    position:relative;
    overflow:hidden;
    min-height:390px;
    border-radius:24px;
    background:#111;
    box-shadow:var(--kl-shadow);
}

.kl-creativity-image > img{
    width:100%;
    height:390px;
    object-fit:cover;
    transition:transform .7s ease;
}

.kl-creativity-image:hover > img{
    transform:scale(1.05);
}

.kl-image-overlay-card{
    position:absolute;
    left:20px;
    right:20px;
    bottom:20px;
    display:flex;
    align-items:center;
    gap:12px;
    padding:13px 15px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:13px;
    color:#fff;
    background:rgba(24,25,29,.88);
    backdrop-filter:blur(10px);
}

.kl-image-overlay-card > i{
    width:39px;
    height:39px;
    display:grid;
    place-items:center;
    border-radius:10px;
    color:var(--kl-orange);
    background:rgba(244,81,30,.12);
}

.kl-image-overlay-card strong,
.kl-image-overlay-card span{
    display:block;
}

.kl-image-overlay-card strong{
    font-size:11px;
}

.kl-image-overlay-card span{
    color:rgba(255,255,255,.52);
    font-size:9px;
}

.kl-feature-points{
    display:grid;
    gap:12px;
    margin-top:25px;
}

.kl-feature-point{
    display:flex;
    align-items:center;
    gap:12px;
    padding:12px;
    border:1px solid var(--kl-border);
    border-radius:13px;
    transition:.3s ease;
}

.kl-feature-point:hover{
    transform:translateX(5px);
    border-color:rgba(244,81,30,.22);
    background:var(--kl-soft);
}

.kl-feature-point > span{
    width:43px;
    height:43px;
    flex:0 0 43px;
    display:grid;
    place-items:center;
    border-radius:11px;
    color:var(--kl-orange);
    background:var(--kl-red-light);
    font-size:18px;
}

.kl-feature-point h3{
    margin:0 0 2px;
    color:var(--kl-dark);
    font-size:14px;
    font-weight:800;
}

.kl-feature-point p{
    margin:0;
    font-size:10px;
}

/* =========================================================
   LEARNING CARDS
========================================================= */

.kl-learning-section{
    background:var(--kl-soft);
}

.kl-learning-card{
    position:relative;
    height:100%;
    padding:26px;
    border:1px solid var(--kl-border);
    border-radius:19px;
    background:#fff;
    transition:var(--kl-transition);
}

.kl-learning-card:hover{
    transform:translateY(-7px);
    border-color:rgba(244,81,30,.24);
    box-shadow:var(--kl-shadow-sm);
}

.kl-learning-icon{
    width:51px;
    height:51px;
    display:grid;
    place-items:center;
    margin-bottom:18px;
    border-radius:14px;
    color:var(--kl-orange);
    background:var(--kl-red-light);
    font-size:21px;
    transition:.3s ease;
}

.kl-learning-card:hover .kl-learning-icon{
    color:#fff;
    background:var(--kl-orange);
}

.kl-learning-card > span{
    position:absolute;
    top:24px;
    right:23px;
    color:#d9d6d4;
    font-size:10px;
    font-weight:800;
}

.kl-learning-card h3{
    margin:0 0 8px;
    color:var(--kl-dark);
    font-size:17px;
    line-height:1.35;
    font-weight:800;
}

.kl-learning-card p{
    min-height:55px;
    margin:0 0 17px;
    font-size:11px;
    line-height:1.75;
}

.kl-learning-card a{
    display:inline-flex;
    align-items:center;
    gap:6px;
    color:var(--kl-orange);
    font-size:10px;
    font-weight:800;
}

.kl-learning-card a i{
    transition:.25s ease;
}

.kl-learning-card a:hover i{
    transform:translateX(4px);
}

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

.kl-benefits-grid-section{
    background:#fff;
}

.kl-benefit-card{
    height:100%;
    padding:28px;
    border:1px solid var(--kl-border);
    border-radius:19px;
    background:#fff;
    transition:var(--kl-transition);
}

.kl-benefit-card:hover{
    transform:translateY(-7px);
    border-color:rgba(244,81,30,.24);
    box-shadow:var(--kl-shadow-sm);
}

.kl-benefit-card-icon{
    width:51px;
    height:51px;
    display:grid;
    place-items:center;
    margin-bottom:17px;
    border-radius:14px;
    color:var(--kl-orange);
    background:var(--kl-red-light);
    font-size:21px;
    transition:.3s ease;
}

.kl-benefit-card:hover .kl-benefit-card-icon{
    color:#fff;
    background:var(--kl-orange);
    transform:rotate(-5deg);
}

.kl-benefit-card h3{
    margin:0 0 8px;
    color:var(--kl-dark);
    font-size:17px;
    line-height:1.35;
    font-weight:800;
}

.kl-benefit-card p{
    margin:0;
    font-size:11px;
    line-height:1.8;
}

/* =========================================================
   JOURNEY
========================================================= */

.kl-journey-section{
    background:var(--kl-dark);
    color:#fff;
}

.kl-journey-section .kl-heading-center h2{
    color:#000000;
}

.kl-journey-section .kl-heading-center > p{
    color:rgba(255,255,255,.52);
}

.kl-journey{
    position:relative;
    max-width:1050px;
    margin:55px auto 0;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px;
}

.kl-journey::before{
    content:"";
    position:absolute;
    left:10%;
    right:10%;
    top:29px;
    height:1px;
    background:linear-gradient(90deg,transparent,var(--kl-orange),transparent);
}

.kl-journey-item{
    position:relative;
    z-index:1;
    padding:0 13px;
    text-align:center;
}

.kl-journey-number{
    width:58px;
    height:58px;
    margin:0 auto 20px;
    display:grid;
    place-items:center;
    border:2px solid var(--kl-orange);
    border-radius:50%;
    color:var(--kl-orange);
    background:var(--kl-dark);
    font-size:11px;
    font-weight:800;
    box-shadow:0 0 0 8px rgba(244,81,30,.05);
}

.kl-journey-content > span{
    color:var(--kl-orange);
    font-size:9px;
    font-weight:800;
    letter-spacing:1px;
}

.kl-journey-content h3{
    margin:6px 0 8px;
    color:#000000;
    font-size:16px;
    font-weight:800;
}

.kl-journey-content p{
    margin:0;
    color:rgba(255,255,255,.48);
    font-size:10px;
    line-height:1.75;
}

.kl-journey-item:hover .kl-journey-number{
    color:#fff;
    background:var(--kl-orange);
    animation:klPulse .8s ease;
}

/* =========================================================
   WHY KIYA / TERMINAL
========================================================= */

.kl-why-kiya{
    background:#fff;
}

.kl-why-list{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:11px 18px;
    margin-top:27px;
}

.kl-why-list > div{
    display:flex;
    align-items:flex-start;
    gap:8px;
    color:var(--kl-text);
    font-size:11px;
    font-weight:650;
}

.kl-why-list i{
    color:var(--kl-orange);
    font-size:15px;
}

.kl-code-terminal{
    overflow:hidden;
    border:1px solid #292c33;
    border-radius:20px;
    background:var(--kl-code);
    box-shadow:0 28px 65px rgba(14,15,19,.24);
    transition:var(--kl-transition);
}

.kl-code-terminal:hover{
    transform:translateY(-6px);
    box-shadow:0 35px 75px rgba(14,15,19,.30);
}

.kl-terminal-header{
    height:52px;
    display:flex;
    align-items:center;
    gap:13px;
    padding:0 18px;
    color:#777b84;
    background:var(--kl-code-light);
    border-bottom:1px solid rgba(255,255,255,.06);
    font:11px "Courier New",monospace;
}

.kl-terminal-header > span{
    flex:1;
}

.kl-terminal-dots{
    display:flex;
    gap:6px;
}

.kl-terminal-dots span{
    width:9px;
    height:9px;
    border-radius:50%;
    background:#4a4d54;
}

.kl-terminal-body{
    padding:27px 25px 30px;
    font:13px/1.8 "Courier New",monospace;
}

.kl-terminal-body p{
    margin:0;
    color:#d5d7dc;
}

.kl-terminal-body .indent{
    padding-left:28px;
}

.code-blue{
    color:#ff8a6f;
}

.code-red{
    color:#a7e8a2;
}

.terminal-success{
    display:flex;
    align-items:center;
    gap:8px;
    margin-top:20px;
    padding-top:15px;
    border-top:1px solid rgba(255,255,255,.07);
    color:#a7e8a2;
    font-size:11px;
}

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

.kl-faq-section{
    background:var(--kl-soft);
}

.kl-faq-wrapper{
    max-width:900px;
    margin:45px auto 0;
}

.kl-faq-wrapper .accordion{
    display:grid;
    gap:11px;
}

.kl-faq-wrapper .accordion-item{
    overflow:hidden;
    border:1px solid var(--kl-border);
    border-radius:15px !important;
    background:#fff;
}

.kl-faq-wrapper .accordion-button{
    padding:19px 21px;
    color:var(--kl-dark);
    background:#fff;
    box-shadow:none;
    font-size:13px;
    font-weight:750;
}

.kl-faq-wrapper .accordion-button:not(.collapsed){
    color:var(--kl-orange);
    background:#fff;
}

.kl-faq-wrapper .accordion-button:focus{
    box-shadow:none;
}

.kl-faq-wrapper .accordion-body{
    padding:0 21px 20px;
    color:var(--kl-muted);
    font-size:12px;
    line-height:1.85;
}

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

.kl-final-cta{
    position:relative;
    padding:70px 0;
    color:#fff;
    background:#000;
    overflow:hidden;
}

.kl-final-cta::before{
    content:"";
    position:absolute;
    width:480px;
    height:480px;
    right:-220px;
    top:-180px;
    border-radius:50%;
    background:rgba(244,81,30,.13);
    filter:blur(10px);
}

.kl-final-cta-inner{
    position:relative;
    display:flex;
    align-items:center;
    gap:24px;
}

.kl-final-icon{
    width:76px;
    height:76px;
    flex:0 0 76px;
    display:grid;
    place-items:center;
    border:1px solid rgba(244,81,30,.25);
    border-radius:20px;
    color:var(--kl-orange);
    background:rgba(244,81,30,.10);
    font-size:30px;
}

.kl-final-content{
    flex:1;
}

.kl-final-content > span{
    color:var(--kl-orange);
    font-size:10px;
    font-weight:800;
    letter-spacing:1px;
    text-transform:uppercase;
}

.kl-final-content h2{
    margin:6px 0 7px;
    color:#fff;
    font-size:clamp(25px,3.2vw,40px);
    line-height:1.2;
    letter-spacing:-1px;
    font-weight:800;
}

.kl-final-content h2 strong{
    color:var(--kl-orange);
}

.kl-final-content p{
    max-width:700px;
    margin:0;
    color:rgba(255,255,255,.50);
    font-size:12px;
    line-height:1.8;
}

.kl-final-action{
    flex:0 0 auto;
}

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

@keyframes klFadeUp{
    from{
        opacity:0;
        transform:translateY(24px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

@keyframes klFadeScale{
    from{
        opacity:0;
        transform:scale(.96);
    }
    to{
        opacity:1;
        transform:scale(1);
    }
}

@keyframes klFloat{
    0%,100%{transform:translate3d(0,0,0);}
    50%{transform:translate3d(0,18px,0);}
}

@keyframes klBadgeFloat{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(-8px);}
}

@keyframes klPulse{
    0%,100%{transform:scale(1);}
    50%{transform:scale(1.07);}
}

@keyframes klProgress{
    from{transform:scaleX(0);}
    to{transform:scaleX(1);}
}

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

@media (max-width:991.98px){

    .kl-section{
        padding:78px 0;
    }

    .kl-code-hero{
        min-height:auto;
        padding:65px 0 75px;
    }

    .kl-code-hero h1{
        font-size:56px;
    }

    .kl-code-hero-card{
        min-height:450px;
        margin-top:10px;
    }

    .kl-code-window{
        transform:none;
    }

    .kl-story-images{
        min-height:410px;
    }

    .kl-story-main{
        height:350px;
    }

    .kl-story-small{
        height:190px;
    }

    .kl-journey{
        grid-template-columns:repeat(2,1fr);
        row-gap:40px;
    }

    .kl-journey::before{
        display:none;
    }

    .kl-final-cta-inner{
        flex-wrap:wrap;
    }

    .kl-final-action{
        width:100%;
        padding-left:100px;
    }
}

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

@media (max-width:767.98px){

    .kl-section{
        padding:58px 0;
    }

    .kl-heading-center h2,
    .kl-section-title{
        font-size:32px;
        letter-spacing:-1px;
    }

    .kl-heading-center > p,
    .kl-section-text{
        font-size:13px;
        line-height:1.8;
    }

    .kl-code-hero{
        padding:45px 0 60px;
    }

    .kl-code-hero h1{
        margin-top:21px;
        font-size:42px;
        line-height:1.08;
        letter-spacing:-1.7px;
    }

    .kl-hero-description{
        font-size:13px;
        line-height:1.75;
    }

    .kl-hero-description.small-text{
        font-size:11px;
    }

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

    .kl-btn{
        width:100%;
    }

    .kl-hero-trust{
        display:grid;
        grid-template-columns:1fr;
        gap:11px;
        margin-top:27px;
    }

    .kl-code-hero-card{
        min-height:320px;
        margin-top:5px;
    }

    .kl-code-lines{
        padding:23px 13px 30px;
        font-size:10px;
        line-height:1.9;
    }

    .kl-code-lines > div{
        min-height:22px;
    }

    .kl-code-lines em{
        width:22px;
    }

    .kl-code-circle{
        width:70px;
        height:70px;
        right:-7px;
        bottom:-15px;
        font-size:23px;
    }

    .kl-floating-badge{
        padding:8px 10px;
        font-size:8px;
    }

    .kl-floating-badge i{
        font-size:14px;
    }

    .kl-floating-badge.badge-one{
        top:15px;
        left:-2px;
    }

    .kl-floating-badge.badge-two{
        right:-2px;
        bottom:30px;
    }

    .kl-benefit-list,
    .kl-skill-grid,
    .kl-why-list{
        grid-template-columns:1fr;
    }

    .kl-image-card,
    .kl-image-card img,
    .kl-creativity-image,
    .kl-creativity-image > img{
        min-height:280px;
        height:280px;
    }

    .kl-story-images{
        min-height:320px;
    }

    .kl-story-main{
        width:86%;
        height:270px;
    }

    .kl-story-small{
        width:56%;
        height:145px;
        border-width:5px;
    }

    .kl-story-number{
        left:12px;
        bottom:22px;
    }

    .kl-level-card{
        padding:23px;
    }

    .kl-level-card > p{
        min-height:auto;
    }

    .kl-journey{
        grid-template-columns:1fr;
        gap:24px;
        margin-top:40px;
    }

    .kl-journey-item{
        display:flex;
        align-items:flex-start;
        text-align:left;
        gap:15px;
        padding:0;
    }

    .kl-journey-number{
        width:48px;
        height:48px;
        flex:0 0 48px;
        margin:0;
    }

    .kl-journey-content h3{
        margin-top:3px;
    }

    .kl-terminal-body{
        padding:22px 15px 25px;
        font-size:10px;
    }

    .kl-final-cta-inner{
        display:block;
        text-align:center;
    }

    .kl-final-icon{
        margin:0 auto 20px;
    }

    .kl-final-content p{
        margin:0 auto;
    }

    .kl-final-action{
        width:auto;
        padding:0;
        margin-top:22px;
    }
}

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

@media (max-width:480px){

    .kl-code-hero h1{
        font-size:35px;
    }

    .kl-code-hero .kl-section-kicker{
        font-size:9px;
    }

    .kl-heading-center h2,
    .kl-section-title{
        font-size:29px;
    }

    .kl-code-hero-card{
        min-height:280px;
    }

    .kl-window-top{
        height:41px;
    }

    .kl-code-lines{
        padding:18px 8px 23px;
        font-size:8px;
    }

    .kl-code-lines em{
        width:18px;
    }

    .kl-image-card,
    .kl-image-card img,
    .kl-creativity-image,
    .kl-creativity-image > img{
        min-height:230px;
        height:230px;
    }

    .kl-image-label,
    .kl-image-overlay-card{
        left:10px;
        right:10px;
        bottom:10px;
    }

    .kl-feature-point{
        align-items:flex-start;
    }

    .kl-story-images{
        min-height:275px;
    }

    .kl-story-main{
        height:225px;
    }

    .kl-story-small{
        height:120px;
    }

    .kl-story-number{
        padding:8px 10px;
        bottom:15px;
    }

    .kl-story-number strong{
        font-size:15px;
    }

    .kl-story-number span{
        font-size:8px;
    }

    .kl-final-content h2{
        font-size:27px;
    }
}

/* =========================================================
   ACCESSIBILITY / REDUCED MOTION
========================================================= */

:focus-visible{
    outline:3px solid rgba(244,81,30,.35);
    outline-offset:3px;
}

@media (prefers-reduced-motion:reduce){
    html{
        scroll-behavior:auto;
    }

    *,
    *::before,
    *::after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
    }
}


/* =========================================================
   FINAL CODING HERO UPDATE
========================================================= */

:root{
    --kl-orange:#F4511E;
    --kl-orange-dark:#D83D10;
    --kl-orange-deep:#A92D0B;
    --kl-red:#FF6B5C;
    --kl-red-light:#FFF0EC;
    --kl-dark:#18191D;
    --kl-dark-2:#22242A;
    --kl-text:#303136;
    --kl-muted:#72747A;
    --kl-bg:#FFFFFF;
    --kl-soft:#FFF8F5;
    --kl-border:#EDE4E1;
    --kl-code:#0E0F13;
    --kl-code-light:#171920;
    --kl-shadow:0 20px 55px rgba(48,25,18,.10);
    --kl-shadow-sm:0 10px 30px rgba(48,25,18,.08);
}

.kl-code-page,
.kl-code-page *{
    font-family:"Poppins",sans-serif;
}

.kl-code-hero{
    position:relative;
    overflow:hidden;
    isolation:isolate;
    background:#000 !important;
    color:#fff;
}

.kl-code-hero-bg{
    position:absolute;
    inset:0;
    z-index:-1;
    background:
        radial-gradient(circle at 82% 30%,rgba(244,81,30,.16),transparent 28%),
        radial-gradient(circle at 8% 85%,rgba(255,107,92,.08),transparent 25%),
        #000;
}

.kl-code-hero-bg::after{
    content:"";
    position:absolute;
    inset:0;
    opacity:.28;
    background-image:
        linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
    background-size:48px 48px;
    mask-image:linear-gradient(to bottom,black,transparent);
}

.kl-code-hero-content{
    max-width:700px;
    animation:klCodeFadeUp .8s ease both;
}

.kl-code-hero-content h1{
    max-width:690px;
    margin:12px 0 22px;
    color:#fff;
    font-size:30px;
    line-height:1.08;
    letter-spacing:-2px;
    font-weight:800;
}

.kl-code-hero-content h1 span{
    color:var(--kl-orange);
}

.kl-section-kicker{
    font-size:10px !important;
    letter-spacing:1px;
}

.kl-hero-description{
    max-width:650px;
    color:rgba(255,255,255,.68) !important;
    font-size:14px !important;
    line-height:1.8;
}

.kl-hero-description.small-text{
    font-size:12.5px !important;
    color:rgba(255,255,255,.48) !important;
}

.kl-hero-actions{
    margin-top:27px;
}

.kl-btn{
    font-size:12px !important;
    min-height:50px;
}

.kl-hero-trust{
    margin-top:30px;
    gap:18px;
}

.kl-trust-item strong{
    color:#fff;
    font-size:11px !important;
}

.kl-trust-item span{
    color:rgba(255,255,255,.45);
    font-size:9px !important;
}

/* RIGHT SIDE IMAGE + SMALL HEADING */
.kl-code-hero-card{
    position:relative;
    width:100%;
    max-width:450px;
    margin-left:auto;
    padding:12px;
    border:1px solid rgba(255,255,255,.10);
    border-radius:22px;
    background:rgba(255,255,255,.035);
    box-shadow:0 30px 70px rgba(0,0,0,.50);
    animation:klCodeHeroImageIn .9s .12s ease both;
}

.kl-code-hero-image-wrap{
    position:relative;
    width:100%;
    height:350px;
    overflow:hidden;
    border-radius:16px;
    background:#111;
}

.kl-code-hero-image{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    display:block;
    transition:transform .7s cubic-bezier(.2,.65,.25,1);
}

.kl-code-hero-card:hover .kl-code-hero-image{
    transform:scale(1.04);
}

.kl-code-image-overlay{
    position:absolute;
    inset:0;
    display:flex;
    align-items:flex-end;
    padding:23px;
    background:linear-gradient(to top,rgba(0,0,0,.88),rgba(0,0,0,.30) 50%,rgba(0,0,0,.02));
}

.kl-code-image-content{
    max-width:290px;
}

.kl-code-image-content > span{
    display:inline-flex;
    align-items:center;
    gap:6px;
    margin-bottom:7px;
    color:var(--kl-orange);
    font-size:8px;
    font-weight:800;
    letter-spacing:1px;
}

.kl-code-image-content h2{
    margin:0 0 6px;
    color:#fff;
    font-size:25px !important;
    line-height:1.08;
    letter-spacing:-.5px;
    font-weight:800;
}

.kl-code-image-content h2 strong{
    color:var(--kl-orange);
}

.kl-code-image-content p{
    margin:0;
    color:rgba(255,255,255,.62);
    font-size:10px;
    line-height:1.6;
}

.kl-floating-badge{
    position:absolute;
    z-index:5;
    display:flex;
    align-items:center;
    gap:6px;
    padding:8px 10px !important;
    border:1px solid rgba(255,255,255,.12);
    border-radius:10px;
    color:#fff;
    background:rgba(24,25,29,.95);
    box-shadow:0 12px 28px rgba(0,0,0,.34);
    font-size:8px !important;
    font-weight:700;
    animation:klCodeBadgeFloat 5s ease-in-out infinite;
}

.kl-floating-badge i{
    color:var(--kl-orange);
    font-size:13px !important;
}

.kl-floating-badge.badge-one{
    top:25px;
    left:-15px;
}

.kl-floating-badge.badge-two{
    right:-15px;
    bottom:32px;
    animation-delay:-2s;
}

.kl-code-visual{
    display:none !important;
}

/* GLOBAL CARD HOVER */
.kl-level-card,
.kl-learning-card,
.kl-mini-feature,
.kl-benefit-card,
.kl-why-card,
.kl-contact-card{
    border-color:var(--kl-border);
    transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease;
}

.kl-level-card:hover,
.kl-learning-card:hover,
.kl-mini-feature:hover,
.kl-benefit-card:hover,
.kl-why-card:hover{
    transform:translateY(-6px);
    border-color:rgba(244,81,30,.28);
    box-shadow:var(--kl-shadow-sm);
}

/* RESPONSIVE */
@media (max-width:991.98px){
    .kl-code-hero-content h1{
        font-size:48px !important;
    }

    .kl-code-hero-card{
        max-width:540px;
        margin:20px auto 0;
    }

    .kl-code-hero-image-wrap{
        height:330px;
    }

    .kl-floating-badge.badge-one{
        left:6px;
    }

    .kl-floating-badge.badge-two{
        right:6px;
    }
}

@media (max-width:767.98px){
    .kl-code-hero-content h1{
        font-size:38px !important;
        line-height:1.1;
        letter-spacing:-1.2px;
    }

    .kl-hero-description{
        font-size:13px !important;
    }

    .kl-hero-description.small-text{
        font-size:11.5px !important;
    }

    .kl-hero-actions{
        display:flex;
        flex-direction:column;
    }

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

    .kl-hero-trust{
        display:grid;
        grid-template-columns:1fr;
        gap:10px;
    }

    .kl-code-hero-card{
        max-width:100%;
        padding:8px;
        border-radius:18px;
    }

    .kl-code-hero-image-wrap{
        height:285px;
        border-radius:13px;
    }

    .kl-code-image-overlay{
        padding:18px;
    }

    .kl-code-image-content h2{
        font-size:22px !important;
    }

    .kl-code-image-content p{
        font-size:9px;
    }

    .kl-floating-badge{
        padding:6px 8px !important;
        font-size:7.5px !important;
    }

    .kl-floating-badge.badge-one{
        top:15px;
        left:3px;
    }

    .kl-floating-badge.badge-two{
        right:3px;
        bottom:17px;
    }
}

@media (max-width:480px){
    .kl-code-hero-content h1{
        font-size:31px !important;
    }

    .kl-code-hero-image-wrap{
        height:235px;
    }

    .kl-code-image-content h2{
        font-size:20px !important;
    }

    .kl-code-image-content > span{
        font-size:7px;
    }
}

@keyframes klCodeFadeUp{
    from{opacity:0;transform:translateY(20px);}
    to{opacity:1;transform:translateY(0);}
}

@keyframes klCodeHeroImageIn{
    from{opacity:0;transform:translateY(18px) scale(.98);}
    to{opacity:1;transform:translateY(0) scale(1);}
}

@keyframes klCodeBadgeFloat{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(-6px);}
}

@media (prefers-reduced-motion:reduce){
    *,
    *::before,
    *::after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
    }
}


/* =========================================================
   =========================================================
   FINAL CODING PAGE OVERRIDE LAYER
   =========================================================
   Font: Poppins
   Theme: Orange / Black / Warm White
   Hero: Black
   Hero left: Content only
   Hero right: Image only
   Main heading: 33px
   =========================================================
========================================================= */


/* =========================================================
   01. ROOT / THEME VARIABLES
========================================================= */

:root{
    --kl-orange:#F4511E;
    --kl-orange-dark:#D83D10;
    --kl-orange-deep:#A92D0B;

    --kl-red:#FF6B5C;
    --kl-red-light:#FFF0EC;

    --kl-dark:#18191D;
    --kl-dark-2:#22242A;

    --kl-text:#303136;
    --kl-muted:#72747A;

    --kl-bg:#FFFFFF;
    --kl-soft:#FFF8F5;

    --kl-border:#EDE4E1;

    --kl-code:#0E0F13;
    --kl-code-light:#171920;

    --kl-shadow:0 20px 55px rgba(48,25,18,.10);
    --kl-shadow-sm:0 10px 30px rgba(48,25,18,.08);
}


/* =========================================================
   02. GLOBAL / FONT / IMAGE
========================================================= */

.kl-coding-page,
.kl-coding-page *{
    font-family:"Poppins",sans-serif;
}

.kl-coding-page{
    width:100%;
    overflow:hidden;
}

.kl-coding-page img{
    max-width:100%;
    display:block;
}


/* =========================================================
   03. COMMON SECTION HEADINGS
   Main section heading = 33px
========================================================= */

.kl-heading-center h2,
.kl-section-title,
.kl-benefit-title h2,
.kl-journey-title h2,
.kl-why-title h2,
.kl-block-title h2{
    font-size:33px !important;
    line-height:1.18;
    letter-spacing:-.8px;
    font-weight:800;
    color:var(--kl-dark);
}

.kl-heading-center h2 span,
.kl-section-title span,
.kl-benefit-title h2 span,
.kl-journey-title h2 span,
.kl-why-title h2 span,
.kl-block-title h2 span{
    color:var(--kl-orange);
}

.kl-section-kicker{
    color:var(--kl-orange);
}


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

.kl-btn{
    border-radius:12px;
    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease,
        background .3s ease;
}

.kl-btn-primary{
    color:#fff !important;
    background:linear-gradient(
        135deg,
        var(--kl-orange),
        var(--kl-orange-dark)
    );
    box-shadow:0 14px 30px rgba(244,81,30,.22);
}

.kl-btn-primary:hover{
    color:#fff !important;
    transform:translateY(-3px);
    box-shadow:0 18px 38px rgba(244,81,30,.34);
}

.kl-btn-outline,
.kl-btn-ghost{
    color:#fff !important;
    border:1px solid rgba(255,255,255,.20);
    background:rgba(255,255,255,.045);
}

.kl-btn-outline:hover,
.kl-btn-ghost:hover{
    color:#fff !important;
    border-color:var(--kl-orange);
    background:rgba(244,81,30,.10);
    transform:translateY(-3px);
}


/* =========================================================
   05. HERO SECTION — BLACK BACKGROUND
========================================================= */

.kl-code-hero{
    position:relative;
    overflow:hidden;
    isolation:isolate;
    min-height:620px;
    padding:85px 0;
    background:#000 !important;
    color:#fff;
}

.kl-code-hero-bg{
    position:absolute;
    inset:0;
    z-index:-1;
    background:
        radial-gradient(
            circle at 82% 28%,
            rgba(244,81,30,.16),
            transparent 28%
        ),
        radial-gradient(
            circle at 8% 85%,
            rgba(255,107,92,.08),
            transparent 25%
        ),
        #000;
}

.kl-code-hero-bg::after{
    content:"";
    position:absolute;
    inset:0;
    opacity:.22;
    background-image:
        linear-gradient(
            rgba(255,255,255,.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.035) 1px,
            transparent 1px
        );
    background-size:48px 48px;
    mask-image:linear-gradient(
        to bottom,
        black,
        transparent
    );
}


/* =========================================================
   06. HERO LEFT CONTENT
========================================================= */

.kl-code-hero-content{
    max-width:690px;
    animation:klHeroContentIn .8s ease both;
}

.kl-code-hero-content h1{
    margin:12px 0 20px;
    max-width:680px;
    color:#fff !important;
    font-size:33px !important;
    line-height:1.16;
    letter-spacing:-.8px;
    font-weight:800;
}

.kl-code-hero-content h1 span{
    color:var(--kl-orange);
}

.kl-hero-description{
    max-width:650px;
    margin-bottom:12px;
    color:rgba(255,255,255,.68) !important;
    font-size:13px !important;
    line-height:1.8;
}

.kl-hero-description.small-text{
    color:rgba(255,255,255,.48) !important;
    font-size:11.5px !important;
}

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


/* =========================================================
   07. HERO TRUST ITEMS
========================================================= */

.kl-hero-trust{
    display:flex;
    flex-wrap:wrap;
    gap:18px;
    margin-top:28px;
}

.kl-trust-item{
    display:flex;
    align-items:center;
    gap:9px;
}

.kl-trust-item > i{
    color:var(--kl-orange);
    font-size:18px;
}

.kl-trust-item strong{
    display:block;
    color:#fff;
    font-size:10px;
    font-weight:700;
}

.kl-trust-item span{
    display:block;
    margin-top:2px;
    color:rgba(255,255,255,.45);
    font-size:8.5px;
}


/* =========================================================
   08. HERO RIGHT — IMAGE ONLY
========================================================= */

.kl-code-hero-card{
    position:relative;
    width:100%;
    max-width:430px;
    margin-left:auto;
    padding:10px;
    border:1px solid rgba(255,255,255,.10);
    border-radius:22px;
    background:rgba(255,255,255,.035);
    box-shadow:0 28px 65px rgba(0,0,0,.48);
    animation:klHeroImageIn .9s .12s ease both;
}

.kl-code-hero-image{
    width:100%;
    height:360px;
    object-fit:cover;
    object-position:center;
    border-radius:15px;
    display:block;
    transition:
        transform .7s cubic-bezier(.2,.65,.25,1),
        filter .4s ease;
}

.kl-code-hero-card:hover .kl-code-hero-image{
    transform:scale(1.035);
    filter:saturate(1.05);
}


/* =========================================================
   09. REMOVE OLD HERO VISUALS
========================================================= */

.kl-code-visual,
.kl-code-window,
.kl-code-circle,
.kl-floating-badge{
    display:none !important;
}


/* =========================================================
   10. CODING LEVELS SECTION
========================================================= */

.kl-levels-section{
    background:#fff;
}

.kl-level-card{
    height:100%;
    border:1px solid var(--kl-border);
    border-radius:20px;
    background:#fff;
    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;
}

.kl-level-card:hover{
    transform:translateY(-7px);
    border-color:rgba(244,81,30,.30);
    box-shadow:var(--kl-shadow-sm);
}

.kl-level-tag{
    color:var(--kl-orange);
}


/* =========================================================
   11. WHAT STUDENTS LEARN
========================================================= */

.kl-learning-section{
    background:var(--kl-soft);
}

.kl-learning-card{
    height:100%;
    border:1px solid var(--kl-border);
    border-radius:18px;
    background:#fff;
    transition:
        transform .35s ease,
        box-shadow .35s ease;
}

.kl-learning-card:hover{
    transform:translateY(-6px);
    box-shadow:var(--kl-shadow-sm);
}

.kl-learning-card i{
    color:var(--kl-orange);
}


/* =========================================================
   12. BENEFITS SECTION
========================================================= */

.kl-benefit-section{
    background:#fff;
}

.kl-benefit-card{
    height:100%;
    border:1px solid var(--kl-border);
    border-radius:18px;
    background:#fff;
    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;
}

.kl-benefit-card:hover{
    transform:translateY(-6px);
    border-color:rgba(244,81,30,.30);
    box-shadow:var(--kl-shadow-sm);
}

.kl-benefit-card i{
    color:var(--kl-orange);
}


/* =========================================================
   13. LEARNING JOURNEY SECTION
========================================================= */

.kl-journey-section{
    background:var(--kl-soft);
}

.kl-journey-item{
    position:relative;
}

.kl-journey-item i{
    color:var(--kl-orange);
}


/* =========================================================
   14. WHY KIYA LEARNING SECTION
========================================================= */

.kl-why-section{
    background:#fff;
}

.kl-why-card{
    height:100%;
    border:1px solid var(--kl-border);
    border-radius:18px;
    background:#fff;
    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;
}

.kl-why-card:hover{
    transform:translateY(-6px);
    border-color:rgba(244,81,30,.30);
    box-shadow:var(--kl-shadow-sm);
}

.kl-why-card i{
    color:var(--kl-orange);
}


/* =========================================================
   15. CODE / TERMINAL SECTION
========================================================= */

.kl-code-terminal,
.kl-terminal,
.kl-code-box{
    background:var(--kl-code);
    border:1px solid rgba(255,255,255,.08);
    border-radius:18px;
}


/* =========================================================
   16. FAQ SECTION
========================================================= */

.kl-faq-section{
    background:var(--kl-soft);
}

.kl-faq-item{
    border:1px solid var(--kl-border);
    background:#fff;
    border-radius:14px;
    overflow:hidden;
}

.kl-faq-item + .kl-faq-item{
    margin-top:10px;
}


/* =========================================================
   17. FINAL CTA SECTION
========================================================= */

.kl-final-section,
.kl-final-cta{
    position:relative;
    overflow:hidden;
    background:#000;
    color:#fff;
}

.kl-final-section h2,
.kl-final-cta h2{
    font-size:33px !important;
    color:#fff;
    line-height:1.18;
}

.kl-final-section h2 span,
.kl-final-cta h2 span{
    color:var(--kl-orange);
}


/* =========================================================
   18. SOCIAL / CONTACT STRIP
========================================================= */

.kl-social-strip,
.kl-contact-strip{
    border-top:1px solid var(--kl-border);
    border-bottom:1px solid var(--kl-border);
}

.kl-social-strip a,
.kl-contact-strip a{
    transition:
        color .25s ease,
        transform .25s ease;
}

.kl-social-strip a:hover,
.kl-contact-strip a:hover{
    color:var(--kl-orange);
    transform:translateY(-2px);
}


/* =========================================================
   19. GENERAL HOVER EFFECTS
========================================================= */

.kl-mini-feature,
.kl-feature-card,
.kl-reason-card,
.kl-contact-card{
    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;
}

.kl-mini-feature:hover,
.kl-feature-card:hover,
.kl-reason-card:hover,
.kl-contact-card:hover{
    transform:translateY(-5px);
    box-shadow:var(--kl-shadow-sm);
    border-color:rgba(244,81,30,.25);
}


/* =========================================================
   20. LOAD ANIMATIONS
========================================================= */

@keyframes klHeroContentIn{
    from{
        opacity:0;
        transform:translateY(22px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

@keyframes klHeroImageIn{
    from{
        opacity:0;
        transform:translateY(18px) scale(.98);
    }
    to{
        opacity:1;
        transform:translateY(0) scale(1);
    }
}


/* =========================================================
   21. TABLET — MAX 991px
========================================================= */

@media (max-width:991.98px){

    .kl-code-hero{
        min-height:auto;
        padding:70px 0;
    }

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

    .kl-code-hero-content h1{
        font-size:33px !important;
    }

    .kl-code-hero-card{
        max-width:520px;
        margin:20px auto 0;
    }

    .kl-code-hero-image{
        height:330px;
    }

    .kl-heading-center h2,
    .kl-section-title,
    .kl-benefit-title h2,
    .kl-journey-title h2,
    .kl-why-title h2,
    .kl-block-title h2{
        font-size:33px !important;
    }
}


/* =========================================================
   22. MOBILE — MAX 767px
========================================================= */

@media (max-width:767.98px){

    .kl-section{
        padding:70px 0;
    }

    .kl-code-hero{
        padding:55px 0 65px;
    }

    .kl-code-hero-content h1{
        font-size:33px !important;
        line-height:1.13;
        letter-spacing:-.7px;
    }

    .kl-hero-description{
        font-size:12.5px !important;
    }

    .kl-hero-description.small-text{
        font-size:11px !important;
    }

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

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

    .kl-hero-trust{
        display:grid;
        grid-template-columns:1fr;
        gap:12px;
    }

    .kl-code-hero-card{
        max-width:100%;
        padding:8px;
        border-radius:18px;
    }

    .kl-code-hero-image{
        height:280px;
        border-radius:13px;
    }

    .kl-heading-center h2,
    .kl-section-title,
    .kl-benefit-title h2,
    .kl-journey-title h2,
    .kl-why-title h2,
    .kl-block-title h2{
        font-size:33px !important;
        letter-spacing:-.6px;
    }

    .kl-final-section h2,
    .kl-final-cta h2{
        font-size:33px !important;
    }
}


/* =========================================================
   23. SMALL MOBILE — MAX 480px
========================================================= */

@media (max-width:480px){

    .kl-code-hero{
        padding:45px 0 55px;
    }

    .kl-code-hero-content h1{
        font-size:33px !important;
    }

    .kl-code-hero-image{
        height:235px;
    }

    .kl-section{
        padding:60px 0;
    }

    .kl-heading-center h2,
    .kl-section-title,
    .kl-benefit-title h2,
    .kl-journey-title h2,
    .kl-why-title h2,
    .kl-block-title h2{
        font-size:33px !important;
    }
}


/* =========================================================
   24. ACCESSIBILITY / REDUCED MOTION
========================================================= */

:focus-visible{
    outline:3px solid rgba(244,81,30,.35);
    outline-offset:3px;
}

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

    html{
        scroll-behavior:auto;
    }

    *,
    *::before,
    *::after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
    }
}