:root {
        --kk-navy: #111b44;
        --kk-yellow: #ffc400;
        --kk-ink: #111827;
        --kk-muted: #5f6575;
        --kk-paper: #fbfaf7;
        --kk-cream: #fff1a8;
        --kk-green: #5bb85b;
        --kk-sage: #9fbd57;
        --kk-teal: #61b293;
        --kk-blue: #5b72ad;
        --kk-aqua: #63a8b8;
        --kk-purple: #8668ad;
        --kk-border: rgba(17, 27, 68, .12);
      }

      * {
        box-sizing: border-box;
      }

      html {
        scroll-behavior: smooth;
      }

      body {
        margin: 0;
        color: var(--kk-ink);
        font-family: "Noto Sans", "Noto Sans Devanagari", "Noto Sans Kannada", Arial, sans-serif;
        background: var(--kk-paper);
        overflow-x: hidden;
      }

      .navbar {
        background: rgba(251, 250, 247, .92);
        border-bottom: 1px solid var(--kk-border);
        backdrop-filter: blur(14px);
      }

      .navbar-brand img {
        width: 126px;
        height: auto;
      }

      .nav-link {
        color: var(--kk-navy);
        font-weight: 700;
      }

      .btn-kk {
        min-height: 48px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 0;
        border-radius: 999px;
        color: var(--kk-navy);
        background: var(--kk-yellow);
        box-shadow: 0 14px 30px rgba(255, 196, 0, .24);
        font-weight: 900;
        line-height: 1;
        text-align: center;
      }

      .btn-kk:hover {
        color: var(--kk-navy);
        background: #ffcf2d;
      }

      .btn-outline-kk {
        min-height: 48px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        color: var(--kk-navy);
        border: 2px solid rgba(17, 27, 68, .22);
        background: rgba(255, 255, 255, .76);
        font-weight: 800;
        line-height: 1;
        text-align: center;
      }

      .play-badge {
        min-height: 58px;
        display: inline-flex;
        align-items: center;
        gap: 12px;
        padding: 9px 18px 9px 14px;
        border: 2px solid rgba(255, 255, 255, .88);
        border-radius: 12px;
        color: #fff;
        background: #0c0c0d;
        text-decoration: none;
        box-shadow: 0 18px 42px rgba(0, 0, 0, .28);
      }

      .play-badge:hover {
        color: #fff;
        background: #1a1a1d;
      }

      .play-badge svg {
        width: 34px;
        height: 34px;
        flex: 0 0 auto;
      }

      .play-badge small,
      .play-badge strong {
        display: block;
        line-height: 1.05;
      }

      .play-badge small {
        font-size: .68rem;
        font-weight: 700;
        letter-spacing: 0;
        text-transform: uppercase;
      }

      .play-badge strong {
        margin-top: 3px;
        font-size: 1.16rem;
        font-weight: 900;
      }

      .hero {
        position: relative;
        min-height: calc(100vh - 70px);
        padding: 120px 0 76px;
        overflow: hidden;
        background:
          linear-gradient(120deg, rgba(17, 27, 68, .86), rgba(17, 27, 68, .56)),
          url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1400' height='800' viewBox='0 0 1400 800'%3E%3Crect width='1400' height='800' fill='%23d8dde5'/%3E%3Cg opacity='.32'%3E%3Ccircle cx='162' cy='248' r='76' fill='%23ffffff'/%3E%3Ccircle cx='300' cy='320' r='98' fill='%23ffffff'/%3E%3Ccircle cx='468' cy='254' r='72' fill='%23ffffff'/%3E%3Ccircle cx='650' cy='340' r='106' fill='%23ffffff'/%3E%3Ccircle cx='835' cy='250' r='88' fill='%23ffffff'/%3E%3Ccircle cx='1045' cy='352' r='120' fill='%23ffffff'/%3E%3Ccircle cx='1220' cy='252' r='80' fill='%23ffffff'/%3E%3C/g%3E%3Cg opacity='.28' stroke='%23ffffff' stroke-width='22'%3E%3Cpath d='M0 510h1400'/%3E%3Cpath d='M0 610h1400'/%3E%3Cpath d='M0 710h1400'/%3E%3Cpath d='M210 800 430 470'/%3E%3Cpath d='M510 800 730 470'/%3E%3Cpath d='M810 800 1030 470'/%3E%3Cpath d='M1110 800 1330 470'/%3E%3C/g%3E%3C/svg%3E");
        background-size: cover;
        background-position: center;
      }

      .hero::after {
        position: absolute;
        inset: auto 0 0;
        height: 110px;
        content: "";
        background: linear-gradient(0deg, var(--kk-paper), rgba(251, 250, 247, 0));
      }

      .hero .container {
        position: relative;
        z-index: 1;
      }

      .eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 8px 14px;
        border-radius: 999px;
        color: var(--kk-navy);
        background: rgba(255, 196, 0, .94);
        font-size: .82rem;
        font-weight: 900;
        letter-spacing: 0;
        text-transform: uppercase;
      }

      .hero-title {
        margin: 22px 0 18px;
        color: #fff;
        font-size: clamp(3rem, 8vw, 7.2rem);
        line-height: .92;
        font-weight: 900;
      }

      .hero-copy {
        max-width: 650px;
        color: rgba(255, 255, 255, .9);
        font-size: clamp(1.05rem, 2vw, 1.36rem);
        line-height: 1.65;
      }

      .hero-stat {
        border-left: 5px solid var(--kk-yellow);
        color: #fff;
      }

      .hero-stat strong {
        color: var(--kk-yellow);
        font-size: clamp(2.4rem, 6vw, 5rem);
        line-height: 1;
      }

      .phone-wrap {
        display: flex;
        justify-content: center;
      }

      .phone {
        width: min(330px, 82vw);
        aspect-ratio: 9 / 18.7;
        padding: 18px;
        border: 11px solid #20242d;
        border-radius: 44px;
        background: #fffdf8;
        box-shadow: 0 32px 80px rgba(0, 0, 0, .33);
      }

      .phone-screen {
        position: relative;
        height: 100%;
        overflow: hidden;
        border-radius: 30px;
        background:
          radial-gradient(circle at 22% 8%, rgba(255, 196, 0, .26), transparent 28%),
          linear-gradient(180deg, #fffdf8, #f5f7ff);
      }

      .notch {
        width: 44%;
        height: 26px;
        margin: 0 auto;
        border-radius: 0 0 16px 16px;
        background: #20242d;
      }

      .phone-logo {
        width: 132px;
        margin: 24px auto 14px;
        display: block;
      }

      .translation-card {
        width: calc(100% - 32px);
        margin: 12px auto;
        overflow: hidden;
        border: 2px solid var(--kk-navy);
        border-radius: 16px;
        background: #fff;
        box-shadow: 0 12px 28px rgba(17, 27, 68, .1);
      }

      .translation-card div {
        padding: 12px 14px;
        text-align: center;
        font-size: 1.08rem;
        font-weight: 800;
      }

      .translation-card .kn {
        color: var(--kk-yellow);
        background: #0c0c0d;
        font-family: "Noto Sans Kannada", sans-serif;
      }

      .translation-card .hi {
        font-family: "Noto Sans Devanagari", sans-serif;
        background: #fff8df;
      }

      .phone-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        width: calc(100% - 32px);
        margin: 18px auto 0;
      }

      .phone-actions span {
        min-height: 54px;
        display: grid;
        place-items: center;
        border-radius: 16px;
        color: #fff;
        font-weight: 900;
      }

      .section-pad {
        padding: 84px 0;
      }

      .section-title {
        color: var(--kk-navy);
        font-size: clamp(2rem, 4.2vw, 4.2rem);
        line-height: 1;
        font-weight: 900;
      }

      .script-title {
        font-family: "Kalam", cursive;
        font-size: clamp(2rem, 5vw, 4.6rem);
        line-height: 1;
      }

      .lead-copy {
        color: var(--kk-muted);
        font-size: 1.12rem;
        line-height: 1.8;
      }

      .story-band {
        background: #fff;
        border-block: 1px solid var(--kk-border);
      }

      .pill-list {
        display: grid;
        gap: 18px;
      }

      .need-pill {
        display: grid;
        grid-template-columns: 58px 1fr;
        gap: 14px;
        align-items: center;
      }

      .need-icon {
        width: 58px;
        height: 58px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        color: #fff;
        font-weight: 900;
      }

      .need-text {
        min-height: 58px;
        display: flex;
        align-items: center;
        padding: 12px 22px;
        border-radius: 999px;
        background: #fff;
        box-shadow: inset 0 0 0 1px rgba(17, 27, 68, .08);
        font-weight: 700;
      }

      .need-panel {
        padding: 34px;
        border-radius: 8px;
        background: #e5e3dd;
      }

      .need-focus {
        min-height: 430px;
        display: grid;
        place-items: center;
        padding: 30px;
        border-radius: 8px;
        background:
          linear-gradient(135deg, rgba(17, 27, 68, .82), rgba(17, 27, 68, .2)),
          repeating-linear-gradient(45deg, rgba(255, 196, 0, .2) 0 20px, rgba(255,255,255,.2) 20px 40px);
      }

      .need-focus-inner {
        width: min(310px, 100%);
        aspect-ratio: 1;
        display: grid;
        place-items: center;
        border-radius: 50%;
        color: var(--kk-navy);
        background: rgba(255, 196, 0, .78);
        text-align: center;
        font-size: clamp(1.4rem, 3vw, 2.3rem);
        line-height: 1.28;
        font-weight: 900;
      }

      .features {
        background: #f3f1eb;
      }

      .cycle {
        position: relative;
        min-height: 560px;
      }

      .cycle-center {
        position: absolute;
        left: 50%;
        top: 50%;
        width: min(330px, 72vw);
        transform: translate(-50%, -50%);
      }

      .feature-node {
        position: absolute;
        width: 164px;
        min-height: 90px;
        display: grid;
        place-items: center;
        padding: 16px;
        border-radius: 18px;
        color: #fff;
        text-align: center;
        font-size: 1.25rem;
        font-weight: 900;
        box-shadow: 0 18px 35px rgba(17, 27, 68, .12);
      }

      .node-learn { left: 50%; top: 0; transform: translateX(-50%); background: var(--kk-sage); }
      .node-translate { right: 3%; top: 22%; background: var(--kk-green); }
      .node-pronounce { right: 3%; bottom: 20%; background: var(--kk-teal); }
      .node-meaning { left: 50%; bottom: 0; transform: translateX(-50%); background: var(--kk-aqua); }
      .node-usage { left: 3%; bottom: 20%; background: var(--kk-blue); }
      .node-practice { left: 3%; top: 22%; background: var(--kk-purple); }

      .feature-box {
        height: 100%;
        padding: 32px;
        border: 2px solid var(--kk-navy);
        border-radius: 8px;
        background: var(--kk-cream);
      }

      .feature-row {
        display: grid;
        grid-template-columns: 54px 1fr;
        gap: 14px;
        align-items: center;
        padding: 12px 0;
      }

      .feature-row + .feature-row {
        border-top: 1px dashed rgba(17, 27, 68, .32);
      }

      .feature-row .dot {
        width: 48px;
        height: 48px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        color: #fff;
        font-weight: 900;
      }

      .quote-band {
        background: #fff;
      }

      .transition-box {
        padding: 22px;
        border: 2px solid var(--kk-navy);
        border-radius: 8px;
        color: var(--kk-yellow);
        background: #5788c1;
        font-size: clamp(1.1rem, 2.4vw, 1.8rem);
        font-weight: 800;
      }

      .cta {
        color: #fff;
        background:
          linear-gradient(120deg, rgba(17, 27, 68, .95), rgba(17, 27, 68, .84)),
          radial-gradient(circle at 80% 20%, rgba(255, 196, 0, .5), transparent 30%);
      }

      footer {
        border-top: 1px solid var(--kk-border);
        background: #fff;
      }

      @media (max-width: 991.98px) {
        .hero {
          min-height: auto;
          padding-top: 106px;
        }

        .phone-wrap {
          margin-top: 36px;
        }

        .cycle {
          min-height: auto;
          display: grid;
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: 14px;
        }

        .cycle-center {
          position: static;
          grid-column: 1 / -1;
          width: 100%;
          transform: none;
          order: 3;
        }

        .feature-node {
          position: static;
          width: 100%;
          min-height: 76px;
          transform: none;
        }
      }

      @media (max-width: 575.98px) {
        .navbar-brand img {
          width: 104px;
        }

        .hero-title {
          font-size: clamp(2.55rem, 14vw, 4rem);
        }

        .section-pad {
          padding: 62px 0;
        }

        .need-panel,
        .feature-box {
          padding: 22px;
        }

        .need-pill {
          grid-template-columns: 46px 1fr;
          gap: 10px;
        }

        .need-icon {
          width: 46px;
          height: 46px;
        }

        .need-text {
          min-height: 50px;
          padding: 10px 15px;
          border-radius: 18px;
          font-size: .95rem;
        }

        .cycle {
          grid-template-columns: 1fr;
        }
      }
/* ===========================
   HERO SECTION
=========================== */
/* ==========================
   HERO
========================== */
.phone-wrap{
    display:flex;
    justify-content:center;
    align-items:center;
}

#heroSlider{
    width:100%;
    max-width:500px;
}

#heroSlider .carousel-item{
    text-align:center;
}

.hero-image{
    width:100%;
    max-width:420px;
    height:auto;
    display:block;
    margin:auto;
    transition:.4s;
}

.carousel-control-prev,
.carousel-control-next,
.carousel-indicators{
    display:none;
}

@media(max-width:991px){

.hero-image{
    max-width:320px;
}

}