:root {
     --white: #ffffff;
     --off-white: #f4f6ff;
     --blue: #1a56db;
     --blue-dark: #1240a8;
     --blue-light: #e8effe;
     --purple: #6c3fd6;
     --purple-dark: #4e2baa;
     --purple-light: #ede8fb;
     --purple-mid: #9b72f0;
     --ink: #0d1b3e;
     --muted: #6b7a99;
     --border: #d8dff5;
 }

 *,
 *::before,
 *::after {
     box-sizing: border-box;
     margin: 0;
     padding: 0
 }

 html {
     scroll-behavior: smooth
 }

 body {
     font-family: 'Sora', sans-serif;
     background: var(--white);
     color: var(--ink);
     overflow-x: hidden
 }

 /* NAV */
 .kyf-nav {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     z-index: 200;
     background: rgba(255, 255, 255, 0.94);
     backdrop-filter: blur(18px);
     border-bottom: 1.5px solid var(--border);
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 0 3.5rem;
     height: 68px;
 }

 .kyf-logo {
     font-weight: 800;
     font-size: 1.22rem;
     text-decoration: none;
     color: var(--ink);
     display: flex;
     align-items: center;
     gap: 3px
 }

 .kyf-logo .lk {
     color: var(--blue)
 }

 .kyf-logo .ly {
     color: var(--purple)
 }

 .kyf-logo .lf {
     color: var(--ink)
 }

 .kyf-nav ul {
     list-style: none;
     display: flex;
     align-items: center;
     gap: .3rem
 }

 .kyf-nav ul a {
     text-decoration: none;
     color: var(--muted);
     font-size: .88rem;
     font-weight: 500;
     padding: .5rem 1rem;
     border-radius: 6px;
     transition: all .2s
 }

 .kyf-nav ul a:hover,
 .kyf-nav ul a.active {
     color: var(--blue);
     background: var(--blue-light)
 }

 .kyf-nav ul a.nav-cta {
     background: var(--purple);
     color: white !important;
     font-weight: 600;
     padding: .55rem 1.3rem;
     border-radius: 8px
 }

 .kyf-nav ul a.nav-cta:hover {
     background: var(--purple-dark)
 }

 /* HERO */
 .hero {
     position: relative;
     height: 100vh;
     display: flex;
     align-items: center;
     overflow: hidden;
     padding-top: 68px
 }

 .slides {
     position: absolute;
     inset: 0
 }

 .slide {
     position: absolute;
     inset: 0;
     opacity: 0;
     transition: opacity 1.3s ease
 }

 .slide.active {
     opacity: 1
 }

 .slide-1 {
     background: linear-gradient(135deg, #e8effe 0%, #c8d9fc 40%, #ddd4f9 100%)
 }

 .slide-2 {
     background: linear-gradient(135deg, #f0ebff 0%, #d9cef9 40%, #c4d4fd 100%)
 }

 .slide-3 {
     background: linear-gradient(135deg, #e4f0ff 0%, #cce0ff 40%, #e0d5ff 100%)
 }

 .slide-4 {
     background: linear-gradient(135deg, #edf1ff 0%, #d6e4fb 40%, #e8dcfe 100%)
 }

 .slide-5 {
     background: linear-gradient(135deg, #f5f0ff 0%, #e0d3fd 40%, #ccdafd 100%)
 }

 .slide-shape {
     position: absolute;
     right: 0;
     top: 0;
     bottom: 0;
     width: 52%;
     clip-path: polygon(12% 0, 100% 0, 100% 100%, 0% 100%);
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .slide-1 .slide-shape {
     background: linear-gradient(145deg, #1a56db, #6c3fd6)
 }

 .slide-2 .slide-shape {
     background: linear-gradient(145deg, #6c3fd6, #1a56db)
 }

 .slide-3 .slide-shape {
     background: linear-gradient(145deg, #1240a8, #9b72f0)
 }

 .slide-4 .slide-shape {
     background: linear-gradient(145deg, #4e2baa, #1a56db)
 }

 .slide-5 .slide-shape {
     background: linear-gradient(145deg, #6c3fd6, #0e3fa8)
 }

 .slide-pic {
     position: absolute;
     right: 0;
     top: 0;
     bottom: 0;
     width: auto;
     opacity: .22;
     user-select: none;
     animation: floatY 5s ease-in-out infinite;
     clip-path: polygon(12% 0, 100% 0, 100% 100%, 0% 100%);
     display: flex;
     align-items: center;
     justify-content: center;
 }

 @keyframes floatY {

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

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

 .hero-content {
     position: relative;
     z-index: 10;
     padding: 0 3.5rem;
     max-width: 660px
 }

 .hero-eyebrow {
     display: inline-block;
     background: rgba(108, 63, 214, .12);
     color: var(--purple);
     font-size: .72rem;
     font-weight: 700;
     letter-spacing: 2.5px;
     text-transform: uppercase;
     padding: .35rem .9rem;
     border-radius: 20px;
     margin: 3.9rem, 0 1.3rem, 0;
     border: 1px solid rgba(108, 63, 214, .2)
 }

 .hero-title {
     font-family: 'Lora', serif;
     font-size: 4rem;
     font-weight: 600;
     line-height: 1.1;
     margin-bottom: 1.2rem;
     color: var(--ink)
 }

 .hero-title em {
     color: var(--blue);
     font-style: normal
 }

 .hero-title strong {
     color: var(--purple);
     font-weight: 600
 }

 .hero-sub {
     color: var(--muted);
     font-size: 1.05rem;
     line-height: 1.75;
     margin-bottom: 2.2rem;
     max-width: 480px
 }

 .hero-btns {
     display: flex;
     gap: 1rem;
     flex-wrap: wrap
 }

 .btn-blue {
     display: inline-flex;
     align-items: center;
     gap: .5rem;
     background: var(--blue);
     color: white;
     padding: .85rem 2rem;
     border-radius: 9px;
     font-family: 'Sora', sans-serif;
     font-size: .95rem;
     font-weight: 600;
     text-decoration: none;
     border: none;
     cursor: pointer;
     transition: all .2s;
     box-shadow: 0 4px 18px rgba(26, 86, 219, .25)
 }

 .btn-blue:hover {
     background: var(--blue-dark);
     transform: translateY(-2px)
 }

 .btn-outline {
     display: inline-flex;
     align-items: center;
     gap: .5rem;
     background: transparent;
     color: var(--purple);
     padding: .83rem 2rem;
     border-radius: 9px;
     border: 2px solid var(--purple);
     font-family: 'Sora', sans-serif;
     font-size: .95rem;
     font-weight: 600;
     text-decoration: none;
     cursor: pointer;
     transition: all .2s
 }

 .btn-outline:hover {
     background: var(--purple);
     color: white
 }

 .slide-dots {
     position: absolute;
     bottom: 4.5rem;
     left: 3.5rem;
     display: flex;
     gap: .6rem;
     z-index: 10
 }

 .dot {
     width: 24px;
     height: 3px;
     border-radius: 2px;
     background: rgba(13, 27, 62, .2);
     cursor: pointer;
     transition: all .3s
 }

 .dot.active {
     background: var(--blue);
     width: 44px
 }

 .slide-counter {
     position: absolute;
     bottom: 2.2rem;
     right: 3.5rem;
     font-size: .78rem;
     font-weight: 600;
     color: white;
     background: rgba(13, 27, 62, .3);
     backdrop-filter: blur(6px);
     padding: .35rem .9rem;
     border-radius: 20px;
     z-index: 10
 }

 .slide-occ-label {
     position: absolute;
     bottom: 5.5rem;
     right: 3.5rem;
     z-index: 10;
     text-align: right
 }

 .slide-occ-label span {
     display: block;
     font-size: .68rem;
     letter-spacing: 2px;
     text-transform: uppercase;
     color: rgba(255, 255, 255, .7);
     margin-bottom: .25rem
 }

 .slide-occ-label strong {
     font-size: 1.1rem;
     color: white;
     font-family: 'Lora', serif
 }

 /* STATS STRIP */
 .stats-strip {
     background: var(--ink);
     padding: 2rem 3.5rem;
     display: flex;
     gap: 3rem;
     flex-wrap: wrap;
     align-items: center
 }

 .stat {
     text-align: center;
     flex: 1;
     min-width: 120px
 }

 .stat-num {
     font-size: 2rem;
     font-weight: 800;
     color: var(--purple-mid)
 }

 .stat-label {
     font-size: .78rem;
     color: rgba(255, 255, 255, .55);
     margin-top: .2rem;
     letter-spacing: .5px
 }

 /* HOW IT WORKS */
 .how {
     padding: 6rem 3.5rem;
     background: var(--off-white)
 }

 .how-inner {
     max-width: 1100px;
     margin: 0 auto
 }

 .how-header {
     text-align: center;
     margin-bottom: 3.5rem
 }

 .steps {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 1.5rem
 }

 .step {
     background: white;
     border: 1.5px solid var(--border);
     border-radius: 16px;
     padding: 2rem;
     position: relative;
     overflow: hidden;
     transition: box-shadow .3s, transform .3s
 }

 .step:hover {
     box-shadow: 0 8px 36px rgba(108, 63, 214, .13);
     transform: translateY(-4px)
 }

 .step-num {
     font-size: 4rem;
     font-weight: 800;
     color: var(--border);
     line-height: 1;
     margin-bottom: 1rem
 }

 .step-icon {
     font-size: 2rem;
     margin-bottom: .8rem
 }

 .step h3 {
     font-size: 1.05rem;
     font-weight: 700;
     margin-bottom: .5rem;
     color: var(--ink)
 }

 .step p {
     font-size: .87rem;
     color: var(--muted);
     line-height: 1.7
 }

 .step-bar {
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     height: 3px
 }

 .step:nth-child(1) .step-bar {
     background: var(--blue)
 }

 .step:nth-child(2) .step-bar {
     background: var(--purple)
 }

 .step:nth-child(3) .step-bar {
     background: linear-gradient(90deg, var(--blue), var(--purple))
 }

 /* PILLARS PREVIEW */
 .pillars {
     padding: 6rem 3.5rem;
     background: white
 }

 .pillars-inner {
     max-width: 1100px;
     margin: 0 auto;
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 5rem;
     align-items: center
 }

 .pillar-cards {
     display: flex;
     flex-direction: column;
     gap: 1rem
 }

 .pillar-card {
     display: flex;
     gap: 1.2rem;
     align-items: flex-start;
     padding: 1.4rem;
     border-radius: 14px;
     border: 1.5px solid var(--border);
     transition: all .3s;
     cursor: default
 }

 .pillar-card:hover {
     border-color: var(--purple);
     box-shadow: 0 6px 24px rgba(108, 63, 214, .1)
 }

 .pillar-icon {
     width: 48px;
     height: 48px;
     border-radius: 10px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.4rem;
     flex-shrink: 0
 }

 .p-academic .pillar-icon {
     background: var(--blue-light)
 }

 .p-skill .pillar-icon {
     background: var(--purple-light)
 }

 .p-character .pillar-icon {
     background: linear-gradient(135deg, var(--blue-light), var(--purple-light))
 }

 .pillar-text h4 {
     font-size: .97rem;
     font-weight: 700;
     margin-bottom: .3rem
 }

 .pillar-text p {
     font-size: .83rem;
     color: var(--muted);
     line-height: 1.65
 }

 /* CTA BAND */
 .cta-band {
     background: linear-gradient(135deg, var(--blue) 0%, var(--purple) 100%);
     padding: 5rem 3.5rem;
     text-align: center
 }

 .cta-band h2 {
     font-family: 'Lora', serif;
     font-size: 2.5rem;
     color: white;
     margin-bottom: 1rem
 }

 .cta-band p {
     color: rgba(255, 255, 255, .8);
     font-size: 1rem;
     margin-bottom: 2rem
 }

 .btn-white {
     display: inline-flex;
     align-items: center;
     gap: .5rem;
     background: white;
     color: var(--purple);
     padding: .85rem 2rem;
     border-radius: 9px;
     font-family: 'Sora', sans-serif;
     font-size: .95rem;
     font-weight: 700;
     text-decoration: none;
     transition: all .2s;
     box-shadow: 0 4px 18px rgba(0, 0, 0, .15)
 }

 .btn-white:hover {
     transform: translateY(-2px);
     box-shadow: 0 8px 28px rgba(0, 0, 0, .2)
 }

 /* FOOTER */
 .kyf-footer {
     background: var(--ink);
     color: rgba(255, 255, 255, .5);
     padding: 2.5rem 3.5rem;
     display: flex;
     justify-content: space-between;
     align-items: center;
     flex-wrap: wrap;
     gap: 1rem
 }

 .kyf-footer .fl {
     font-size: 1.1rem;
     font-weight: 800;
     color: white
 }

 .kyf-footer .fl span {
     color: var(--purple-mid)
 }

 .kyf-footer p {
     font-size: .8rem
 }

 /* ANIMATION */
 @keyframes fadeUp {
     from {
         opacity: 0;
         transform: translateY(22px)
     }

     to {
         opacity: 1;
         transform: translateY(0)
     }
 }

 .hero-content>* {
     animation: fadeUp .7s ease both
 }

 .hero-content>*:nth-child(1) {
     animation-delay: .08s
 }

 .hero-content>*:nth-child(2) {
     animation-delay: .22s
 }

 .hero-content>*:nth-child(3) {
     animation-delay: .36s
 }

 .hero-content>*:nth-child(4) {
     animation-delay: .5s
 }

 .section-eyebrow {
     display: inline-block;
     font-size: .7rem;
     font-weight: 700;
     letter-spacing: 2.5px;
     text-transform: uppercase;
     margin-bottom: .9rem;
     padding: .3rem .9rem;
     border-radius: 20px
 }

 .eyebrow-blue {
     background: var(--blue-light);
     color: var(--blue)
 }

 .eyebrow-purple {
     background: var(--purple-light);
     color: var(--purple)
 }

 .section-title {
     font-family: 'Lora', serif;
     font-size: 2.4rem;
     font-weight: 600;
     line-height: 1.2;
     color: var(--ink);
     margin-bottom: .9rem
 }

 .section-sub {
     color: var(--muted);
     font-size: .97rem;
     line-height: 1.75;
     max-width: 520px
 }

 @media(max-width:860px) {
     .kyf-nav {
         padding: 0 1.4rem;
         display: grid;
     }

      .kyf-nav ul a {
        font-size: .55rem;
        font-weight: 500;
        padding: .2rem .3rem;
        border-radius: 6px;
    }

    .kyf-nav ul a.nav-cta {
        background: var(--purple);
        color: white !important;
        font-weight: 600;
        padding: .3rem 0.5rem;
        border-radius: 6px
    }


     .hero-content {
         padding: 0 1.5rem
     }

     .hero-title {
         font-size: 2.6rem
     }

     .steps {
         grid-template-columns: 1fr
     }

     .pillars-inner {
         grid-template-columns: 1fr;
         gap: 2.5rem
     }

     .stats-strip {
         gap: 1.5rem;
         padding: 2rem 1.5rem
     }

     .how,
     .pillars,
     .cta-band {
         padding: 4rem 1.5rem
     }

     .kyf-footer {
         flex-direction: column;
         text-align: center;
         padding: 2rem 1.5rem
     }

     .slide-shape {
         opacity: 0%;
         width: 40%;
         clip-path: polygon(20% 0, 100% 0, 100% 100%, 0% 100%)
     }

     .slide-dots,
     .slide-counter,
     .slide-occ-label {
         opacity: 0%;
     }
 }