/*!
Theme Name: KinderDesk
Theme URI: https://them.es/starter
Author: Vinayak Rajguru
Author URI: https://www.vinayak.me
Description: Theme Developed for Kinder Desk company.
Version: 3.7.4
Requires at least: 5.0
Tested up to: 6.9
Requires PHP: 7.2
License: GPL version 2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0
Tags: custom-background, custom-colors, featured-images, flexible-header, microformats, post-formats, rtl-language-support, theme-options, translation-ready, accessibility-ready
Text Domain: kinder-desk
*/
/*
 * ================================================================
 *  KINDER DESK — Shared Stylesheet
 *  Built on Bootstrap 5 | One CSS for all pages
 *
 *  TABLE OF CONTENTS
 *  -----------------
 *  1.  CSS Variables (Brand Tokens)
 *  2.  Base & Typography
 *  3.  Top Bar
 *  4.  Main Navbar
 *  5.  Page Hero (Homepage)
 *  6.  Page Banner (Internal pages — compact header)
 *  7.  Section Shared (tags, titles, subtitles)
 *  8.  Buttons
 *  9.  Trust Strip
 *  10. Service Cards
 *  11. Process Steps
 *  12. Tech Stack Section
 *  13. Why Us Section
 *  14. CTA Band
 *  15. Footer
 *  16. Floating CTAs (WhatsApp / Call)
 *  17. Animations & Scroll Reveal
 *  18. Responsive Overrides
 * ================================================================
 */


/* ================================================================
   1. CSS VARIABLES — Brand Tokens
   Used throughout: reference as var(--kd-primary) etc.
================================================================ */
:root {
  /* Brand Colors */
  --kd-primary:       #0080FF;
  --kd-primary-dark:  #0062CC;
  --kd-primary-light: #EBF4FF;
  --kd-secondary:     #1B1464;
  --kd-accent:        #FF9F1C;
  --kd-accent-light:  #FFF5E6;
  --kd-success:       #28C840;
  --kd-danger:        #FF5F57;
  --kd-white:         #FFFFFF;

  /* Backgrounds */
  --kd-bg-light:      #F7F9FC;
  --kd-bg-dark:       #080d2e;

  /* Borders */
  --kd-border:        #E4EAF2;

  /* Text */
  --kd-text-heading:  #1B1464;
  --kd-text-body:     #4A5568;
  --kd-text-muted:    #8898AA;

  /* Border Radius */
  --kd-radius-sm:     8px;
  --kd-radius-md:     14px;
  --kd-radius-lg:     20px;
  --kd-radius-pill:   100px;

  /* Shadows */
  --kd-shadow-card:   0 4px 24px rgba(0, 0, 0, 0.06);
  --kd-shadow-hover:  0 10px 40px rgba(0, 128, 255, 0.12);

  /* Transitions */
  --kd-transition:    all 0.25s ease;
}

/* Bootstrap */
.navbar .container-narrow{
	display: flex;
}
.container-narrow {
  width: 100%;
  max-width: 1140px;   /* choose your desired width */
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
  position: relative;
}
@media (max-width: 576px) {
  .container-narrow {
    padding-inline: 0.75rem;
  }
}

.kd-btn-cta{
  background: var(--kd-accent)
}


/* ================================================================
   2. BASE & TYPOGRAPHY
================================================================ */
html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Plus Jakarta Sans', 'DM Sans', sans-serif;
  color: var(--kd-text-body);
  background-color: var(--kd-white);
  -webkit-font-smoothing: antialiased;
}

a {
  text-decoration: none;
  transition: var(--kd-transition);
}

/* Emphasis text in headings — brand highlight color */
h1 em,
h2 em,
h3 em {
  color: var(--kd-primary);
  font-style: normal;
}

/* ----------------------
	NAVBAR TOP
-------------------------*/
.navbar-top{
  background-color: #1b1464;
}

.navbar-top .nav-link{
	color: #ffffff;
  font-size: 12px;
}

.navbar-top .nav-link:hover{
	color: #f3f3f3;
}


/* ----------------------
	MAIN MENU
-------------------------*/
.navbar {
  position: sticky;
  top: 0px;
  padding: 0px;
  border-bottom: 1px solid #f3f3f3;
  background-color: #ffffff;
  z-index: 99;
  box-shadow: 0 3px 10px #33333321;
}

.navbar-brand img {
    height: 44px;
    scale: 1.05;
    margin-top: 6px;
}

.navbar .container{ position: relative; }

.relative-navbar { position: relative; }

.nav-link{
  color: #2a2a2a;
}
.nav-link:active,
.nav-link:hover,
.nav-link:focus{
  color: #2a2a2a;
  outline: none;
}

.navbar-nav .nav-item .nav-link{
  border-bottom: 2px solid transparent;
  padding: 20px 20px;
  /* Create Smooth Hover Transition */
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.navbar-nav .nav-item .nav-link:hover{
	color: #1b1464;
  border-bottom: 2px solid #1b1464;
  box-sizing: border-box;
  /* Create Smooth Hover Transition */
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.dropdown{
  list-style: none;
  padding: 0;
  margin: 0;
  position: initial;
}

/* SECOND LEVEL MENUS */
/* SINGLE MENU SUB ITEM */
.dropdown-item.active, 
.dropdown-item:active, 
.dropdown-item:focus{
  color: #2a2a2a;
  outline: none;
  background-color: #ffffff;
}

.single-menu-item .dropdown-menu{
  display: flex;
  width: 100%;
  height: auto;
  padding: 35px 20px 35px 0px;
  position: absolute;
  left: 0;
  top: 100%;
  background: #fff;
  border-radius: 0 0 1.5rem 1.5rem;
  justify-content: space-between;
  display: none;
  box-shadow: 0 3px 10px #33333321;
  border: none;
  border: 1px solid #f3f3f3;
}

.single-menu-subitem .dropdown-item{
  font-weight: 500;
  padding: 10px 15px;
  border-radius: 0px 50px 50px 0px;
  /* Create Smooth Hover Transition */
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.single-menu-subitem .dropdown-item .bi { 
  font-size: 1.2rem; 
  position: relative; 
  top: 4px;
  display: inline-flex ;
}

.single-menu-subitem .dropdown-item:hover{
  /*background-color: #F4FAFD;*/
  background-color: #0080ff1f;
  border-radius: 0px 50px 50px 0px;
  /* Create Smooth Hover Transition */
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.dropdown:hover > .nav-link{
	color: #1b1464	;
  border-bottom: 2px solid #1b1464;
  box-sizing: border-box;
  /* Create Smooth Hover Transition */
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

/* MEGA MENU SUB ITEM - DROPDOWN */
.mega-menu-item .dropdown-menu{
  display: flex;
  width: 100%;
  height: auto;
  padding: 35px 20px 35px 20px;
  position: absolute;
  left: 0;
  top: 100%;
  background: #fff;
  border-radius: 0 0 1.5rem 1.5rem;
  justify-content: space-between;
  display: none;
  box-shadow: 0 3px 10px #33333321;
  border: none;
  border: 1px solid #f3f3f3;
}

.mega-menu-subitem .nav{
  display: inline;
  list-style: none;
  margin: 0px;
  padding: 0px;
}

.mega-menu-subitem .nav .nav-item{
	position: relative;
	overflow: hidden;
  display: inline-block;
  margin-right: 10px;
}

.mega-menu-subitem .nav .nav-item .dropdown-item{
  font-weight: 500;
  display: block;
  border: 1px solid #f3f3f3;
  border-radius: 10px;
  padding: 10px 20px;
  box-shadow: 0px 6px 10px 0px rgba(0, 0, 0, 0.04);
}

/* HOVER STATE INITIAL */
/* Mega Menu Content Section */
.menu-content-main{
  margin-top: 15px;
}

.mm-content-five .active{
	display: block !important;
}

.mm-wrap-content{
  background-color: #F4FAFD;
  height: 100%;
  padding: 25px 25px;
  padding-left: 0px;
}


/* JQUERY CSS for HOVER and CLICK */
/* Hide all menu contents by default */
.menu-content-main > div {
  display: none;
  transition: opacity 0.2s ease;
}

/* Show only active content */
.menu-content-main > div.active {
  display: block !important;
  opacity: 1;
}

/* Optional: highlight active menu item */
.mega-menu-subitem .nav .nav-item .dropdown-item:hover{
  /*background-color: #F4FAFD;*/
  background-color: #1b1464;
  color: #ffffff;
}
.mega-menu-subitem .dropdown-item.active {
  background-color: #1b1464;
  color: #ffffff;
  font-weight: 600;
}
/* Force hide all tabs */
.menu-content-main .mm-content-one,
.menu-content-main .mm-content-two,
.menu-content-main .mm-content-three,
.menu-content-main .mm-content-four,
.menu-content-main .mm-content-five {
  display: none;
}

/* Show only active tab */
.menu-content-main .active {
  display: block !important;
}

/*[class^="mm-content-"] {
  display: none;
}

[class^="mm-content-"].active {
  display: block;
}*/
/*.mm-content-one,
.mm-content-two,
.mm-content-three,
.mm-content-four,
.mm-content-five {
  display: none;
}

.mm-content-one.active,
.mm-content-two.active,
.mm-content-three.active,
.mm-content-four.active,
.mm-content-five.active {
  display: block;
}
*/

/*.mega-menu-subitem [class^="mm-content-"] {
  display: none;
}

.mega-menu-subitem .mm-content-one {
  display: block;
}*/

/* Show content on hover of corresponding menu item */
.mega-menu-subitem .nav .nav-item:nth-child(1):hover ~ .menu-content-main > div:nth-child(1),
.mega-menu-subitem .nav .nav-item:nth-child(2):hover ~ .menu-content-main > div:nth-child(2),
.mega-menu-subitem .nav .nav-item:nth-child(3):hover ~ .menu-content-main > div:nth-child(3) {
  display: block;
}

/* Hide first content when any other menu item is hovered */
.mega-menu-subitem .nav .nav-item:nth-child(2):hover ~ .menu-content-main > div:first-child,
.mega-menu-subitem .nav .nav-item:nth-child(3):hover ~ .menu-content-main > div:first-child {
  display: none;
}
/* HOVER LOGIC */

@media only screen and (min-width: 768px) {
  .navbar-nav .dropdown .dropdown-menu {
    /*display: block;*/
    margin-top: 0;
  }
  .navbar-nav .dropdown:hover > .dropdown-menu {
    display: block;
    margin-top: 0;
  }
}

/* // Mobile only */
@media screen and (max-width: 767px) {
  .navbar-toggler{
    width: 40px;
    height: 42px;
    border-radius: 15px;
    padding: 5px 5px;
    position: absolute;
    top: 10px;
    right: 10px;
  }
  .navbar-toggler:focus{
    outline: none;
    box-shadow: none;
  }

  .navbar-toggler .navbar-toggler-icon{
    width: 1em;
  }

  .navbar-nav{
    position: absolute;
    top: 60px;
    left: 0px;
    background: #ffffff;
    width: 100%;
    box-shadow: 0 5px 15px #33333321;
  }

  .dropdown-menu.show {
    display: block !important;
  }

  .single-menu-item .dropdown-menu {
    position: relative;
    width: 100%;
    height: auto;
    overflow: hidden;
    padding: 20px 20px;
    box-shadow: none;
    border-radius: 0px;
    background-color: #F4FAFD;
  }
  .mega-menu-item .dropdown-menu{
    display: flex;
    width: 100%;
    height: auto;
    padding: 35px 20px 35px 20px;
    position: relative;
    background: #fff;
    border-radius: 0 0 1.5rem 1.5rem;
    justify-content: space-between;
    display: none;
    box-shadow: 0 3px 10px #33333321;
    border: none;
    border: 1px solid #f3f3f3;
  }
}


@media (max-width: 860px) {
	.navbar-nav{
		position: absolute;
		top: 60px;
		left: 0px;
		background: #ffffff;
		width: 100%;
  		box-shadow: 0 5px 15px #33333321;
	}

	.navbar-nav .nav-item .nav-link{
		padding: 8px 20px;
	}

	.single-menu-item .dropdown-menu{
		position: relative;
	    width: 100%;
	    height: auto;
	    overflow: hidden;
	    padding: 20px 20px;
		box-shadow: none;
		border-radius: 0px;
		background-color: #F4FAFD;
	}

	.single-menu-item .dropdown-menu .show{
		display: block !important;
	}
	.dropdown-menu.show {
	  display: block !important;
	}
	.single-menu-item.dropdown-menu.show {
	  display: block !important;
	}
	.single-menu-item .dropdown-menu {
	}

	.single-menu-item .dropdown-menu .img-fluid{ displa: none; }

	/* MEGA MENU MOBILE */
	.mm-wrap-content{
		padding: 10px 0px;
		background-color: #1B1464;
		color: #ffffff;
	}

	.mega-menu-item .dropdown-menu{
		position: relative;
	    width: 100%;
	    height: auto;
	    overflow: hidden;
	    padding: 20px 20px;
		box-shadow: none;
		border-radius: 0px;
		background-color: #F4FAFD;
	}

	.mega-menu-subitem .nav .nav-item .dropdown-item,
	.single-menu-subitem{
		padding: 6px 14px;
		font-size: 13px;
	}

	.single-menu-subitem .dropdown-item{
		color: #ffffff;
		padding: 6px 15px;
	}

}

/* ================================================================
   5. PAGE HERO — Homepage only
   — Full-width dark gradient with SVG illustration
================================================================ */
.kd-hero {
  background: linear-gradient(145deg, #080d2e 0%, #0e1850 35%, #0a3276 70%, #0055b3 100%);
  padding: 104px 0 80px;
  position: relative;
  overflow: hidden;
}

/* Dot-grid texture overlay */
.kd-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 30px 30px;
  pointer-events: none;
}

/* Radial light blobs — decorative */
.kd-hero-glow-blue {
  position: absolute;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 128, 255, 0.18) 0%, transparent 70%);
  top: -80px;
  right: 10%;
  pointer-events: none;
}

.kd-hero-glow-amber {
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 159, 28, 0.10) 0%, transparent 70%);
  bottom: 40px;
  left: 5%;
  pointer-events: none;
}

/* Small "service category" badge above heading */
.kd-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(255, 159, 28, 0.13);
  border: 1px solid rgba(255, 159, 28, 0.30);
  color: var(--kd-accent);
  font-size: 12.5px;
  font-weight: 600;
  padding: 6px 15px;
  border-radius: var(--kd-radius-pill);
  margin-bottom: 22px;
  letter-spacing: 0.02em;
}

.kd-hero h1 {
  font-size: 48px;
  font-weight: 800;
  color: var(--kd-white);
  line-height: 1.13;
  margin-bottom: 20px;
}

.kd-hero-lead {
  font-size: 16.5px;
  color: rgba(255, 255, 255, 0.68);
  line-height: 1.75;
  margin-bottom: 36px;
  max-width: 470px;
}

/* Stat row below hero CTAs */
.kd-hero-stats {
  display: flex;
  gap: 36px;
  margin-top: 44px;
  padding-top: 36px;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
}

.kd-hero-stat-value {
  font-size: 28px;
  font-weight: 800;
  color: var(--kd-white);
  line-height: 1;
}

.kd-hero-stat-value sup {
  font-size: 16px;
  color: var(--kd-accent);
}

.kd-hero-stat-label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.45);
  margin-top: 4px;
  letter-spacing: 0.03em;
}


/* ================================================================
   6. PAGE BANNER — Internal pages (compact, no illustration)
   — Replaces full hero on About, Our Work, Services, etc.
================================================================ */
.kd-page-banner {
  background: linear-gradient(145deg, #080d2e 0%, #0e1850 35%, #0a3276 70%, #0055b3 100%);
  padding: 56px 0 52px;
  position: relative;
  overflow: hidden;
}

.kd-page-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
}

/* Right-side glow blob */
.kd-page-banner-glow {
  position: absolute;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 128, 255, 0.16) 0%, transparent 70%);
  top: -100px;
  right: 8%;
  pointer-events: none;
}

.kd-page-banner-inner {
  position: relative;
  z-index: 1;
}

/* Breadcrumb pill */
.kd-breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  padding: 5px 14px;
  border-radius: var(--kd-radius-pill);
  margin-bottom: 18px;
}

.kd-breadcrumb a,
.kd-breadcrumb span {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.50);
  font-weight: 500;
}

.kd-breadcrumb a:hover {
  color: var(--kd-white);
}

.kd-breadcrumb .kd-breadcrumb-sep {
  color: rgba(255, 255, 255, 0.25);
}

.kd-breadcrumb .kd-breadcrumb-current {
  color: var(--kd-accent);
  font-weight: 600;
}

.kd-page-banner h1 {
  font-size: 38px;
  font-weight: 800;
  color: var(--kd-white);
  line-height: 1.18;
  margin-bottom: 12px;
}

.kd-page-banner-subtitle {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.62);
  line-height: 1.75;
  max-width: 560px;
}

/* Stat pills row inside page banner */
.kd-banner-stats {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
  flex-wrap: wrap;
}

.kd-banner-stat {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.10);
  padding: 8px 16px;
  border-radius: var(--kd-radius-pill);
}

.kd-banner-stat-value {
  font-size: 16px;
  font-weight: 800;
  color: var(--kd-white);
}

.kd-banner-stat-label {
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.50);
}

/* Mobile Responsive */
@media (max-width: 576px) {
  .kd-banner-stat{
    padding: 2px 6px;
  }
  .kd-banner-stat-value{ font-size: 8px;}
  .kd-banner-stat-label{ font-size: 8px;}
}


/* ================================================================
   7. SECTION SHARED — Tags, Titles, Subtitles
   — Reusable across every section on every page
================================================================ */

/* Small pill label above section heading */
.kd-section-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--kd-primary-light);
  color: var(--kd-primary);
  font-size: 11.5px;
  font-weight: 700;
  padding: 5px 14px;
  border-radius: var(--kd-radius-pill);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 14px;
}

.kd-section-tag .kd-tag-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--kd-primary);
}

/* Variant: accent (amber) tag — used on dark backgrounds */
.kd-section-tag-accent {
  background: rgba(255, 159, 28, 0.14);
  color: var(--kd-accent);
}

.kd-section-tag-accent .kd-tag-dot {
  background: var(--kd-accent);
}

/* Variant: white tag — on very dark sections */
.kd-section-tag-white {
  background: rgba(255, 255, 255, 0.10);
  color: var(--kd-white);
}

.kd-section-tag-white .kd-tag-dot {
  background: var(--kd-white);
}

/* Section heading */
.kd-section-title {
  font-size: 36px;
  font-weight: 800;
  color: var(--kd-text-heading);
  line-height: 1.2;
  margin-bottom: 12px;
}

/* On dark backgrounds */
.kd-section-title-white {
  color: var(--kd-white);
}

.kd-section-title-white em {
  color: var(--kd-accent);
}

/* Section subtitle paragraph */
.kd-section-subtitle {
  font-size: 16px;
  color: var(--kd-text-body);
  line-height: 1.75;
  max-width: 580px;
}

.kd-section-subtitle-muted {
  color: rgba(255, 255, 255, 0.58);
}

/* Centered section header block */
.kd-section-header {
  text-align: center;
  margin-bottom: 60px;
}

.kd-section-header .kd-section-subtitle {
  margin: 0 auto;
}


/* ================================================================
   8. BUTTONS
   — Consistent set used across all pages
================================================================ */

/* Primary filled button — blue */
.kd-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: var(--kd-primary);
  color: var(--kd-white);
  font-weight: 700;
  font-size: 14.5px;
  padding: 12px 26px;
  border-radius: var(--kd-radius-pill);
  border: none;
  transition: var(--kd-transition);
  cursor: pointer;
}

.kd-btn-primary:hover {
  background-color: var(--kd-primary-dark);
  color: var(--kd-white);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 128, 255, 0.30);
}

/* Accent filled button — amber/orange */
.kd-btn-accent {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: var(--kd-accent);
  color: var(--kd-white);
  font-weight: 700;
  font-size: 14.5px;
  padding: 12px 26px;
  border-radius: var(--kd-radius-pill);
  border: none;
  transition: var(--kd-transition);
  cursor: pointer;
}

.kd-btn-accent:hover {
  background-color: #e8900f;
  color: var(--kd-white);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(255, 159, 28, 0.35);
}

/* White filled button — used on colored CTA bands */
.kd-btn-white {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: var(--kd-white);
  color: var(--kd-primary);
  font-weight: 700;
  font-size: 14.5px;
  padding: 12px 26px;
  border-radius: var(--kd-radius-pill);
  border: none;
  transition: var(--kd-transition);
  cursor: pointer;
}

.kd-btn-white:hover {
  color: var(--kd-primary);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}

/* Ghost button — outline on dark backgrounds */
.kd-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: var(--kd-white);
  font-weight: 600;
  font-size: 14.5px;
  padding: 12px 26px;
  border-radius: var(--kd-radius-pill);
  border: 1.5px solid rgba(255, 255, 255, 0.28);
  transition: var(--kd-transition);
  cursor: pointer;
}

.kd-btn-ghost:hover {
  border-color: rgba(255, 255, 255, 0.65);
  background: rgba(255, 255, 255, 0.06);
  color: var(--kd-white);
}

/* Outline button — primary border, transparent bg */
.kd-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: var(--kd-primary);
  font-weight: 700;
  font-size: 14px;
  padding: 11px 22px;
  border-radius: var(--kd-radius-pill);
  border: 2px solid var(--kd-primary);
  transition: var(--kd-transition);
  cursor: pointer;
}

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

/* Small button modifier — pair with any button class */
.kd-btn-sm {
  font-size: 12.5px;
  padding: 8px 18px;
}


/* ================================================================
   9. TRUST STRIP
   — "Trusted By" pill badges row below the hero
================================================================ */
.kd-trust-strip {
  background-color: var(--kd-white);
  border-bottom: 1px solid var(--kd-border);
  padding: 20px 0;
}

.kd-trust-label {
  font-size: 12px;
  color: var(--kd-text-muted);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-right: 8px;
  white-space: nowrap;
}

/* Individual category pill */
.kd-trust-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background-color: var(--kd-bg-light);
  border: 1px solid var(--kd-border);
  border-radius: var(--kd-radius-pill);
  padding: 6px 14px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--kd-text-heading);
}

/* Colored dot inside each trust pill */
.kd-trust-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}


/* ================================================================
   10. SERVICE CARDS
   — 3-col grid on homepage services section
================================================================ */
.kd-services-section {
  background-color: var(--kd-bg-light);
  padding: 96px 0;
}

.kd-service-card {
  background-color: var(--kd-white);
  border: 1.5px solid var(--kd-border);
  border-radius: var(--kd-radius-lg);
  padding: 32px 28px 28px;
  transition: var(--kd-transition);
  position: relative;
  overflow: hidden;
  height: 100%;
}

/* Animated top bar on hover */
.kd-service-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--kd-primary), #38a3ff);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.kd-service-card:hover {
  border-color: rgba(0, 128, 255, 0.30);
  box-shadow: var(--kd-shadow-hover);
  transform: translateY(-4px);
}

.kd-service-card:hover::after {
  transform: scaleX(1);
}

/* Icon box inside card */
.kd-service-icon {
  width: 56px;
  height: 56px;
  background-color: var(--kd-primary-light);
  border-radius: var(--kd-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
}

.kd-service-card h3 {
  font-size: 17px;
  font-weight: 700;
  color: var(--kd-text-heading);
  margin-bottom: 10px;
}

.kd-service-card p {
  font-size: 13.5px;
  color: var(--kd-text-body);
  line-height: 1.68;
}

/* "Learn more →" link at the bottom of the card */
.kd-service-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 18px;
  font-size: 13px;
  font-weight: 700;
  color: var(--kd-primary);
}

.kd-service-link svg {
  transition: transform 0.2s;
}

.kd-service-card:hover .kd-service-link svg {
  transform: translateX(3px);
}


/* ================================================================
   11. PROCESS STEPS
   — 5-step horizontal strip with connecting line
================================================================ */
.kd-process-section {
  background-color: var(--kd-white);
  padding: 96px 0;
}

/* Wrapper holds the steps row + the horizontal track line */
.kd-steps-wrapper {
  position: relative;
}

/* Horizontal connecting gradient line between steps */
.kd-steps-track {
  position: absolute;
  top: 65px; /* vertically centered on the circle */
  left: calc(10% + 36px);
  right: calc(10% + 36px);
  height: 2px;
  background: linear-gradient(90deg, var(--kd-primary) 0%, var(--kd-accent) 100%);
  border-radius: 2px;
}

.kd-step {
  text-align: center;
  padding: 0 8px;
}

.kd-step-circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin: 0 auto 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 800;
  border: 2.5px solid var(--kd-primary);
  background-color: var(--kd-white);
  color: var(--kd-primary);
  position: relative;
  z-index: 2;
  transition: var(--kd-transition);
}

/* Alternate filled circles for odd steps */
.kd-step:nth-child(odd) .kd-step-circle {
  background-color: var(--kd-primary);
  color: var(--kd-white);
}

.kd-step-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--kd-text-heading);
  margin-bottom: 7px;
}

.kd-step-desc {
  font-size: 12px;
  color: var(--kd-text-muted);
  line-height: 1.55;
}


/* ================================================================
   12. TECH STACK SECTION
   — Dark navy background, 6-col icon grid
================================================================ */
.kd-tech-section {
  background-color: var(--kd-secondary);
  padding: 96px 0;
  position: relative;
  overflow: hidden;
}

/* Dot-grid texture overlay on dark section */
.kd-tech-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
}

.kd-tech-item {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--kd-radius-md);
  padding: 22px 12px 18px;
  text-align: center;
  transition: var(--kd-transition);
  cursor: default;
}

.kd-tech-item:hover {
  background: rgba(0, 128, 255, 0.18);
  border-color: rgba(0, 128, 255, 0.40);
  transform: translateY(-3px);
}

.kd-tech-item-icon {
  display: block;
  margin: 0 auto 12px;
}

.kd-tech-item-label {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.70);
  display: block;
}


/* ================================================================
   13. WHY US SECTION
   — 2-col: benefit list (left) + SVG illustration (right)
================================================================ */
.kd-why-section {
  background-color: var(--kd-bg-light);
  padding: 96px 0;
}

/* Individual benefit item row */
.kd-why-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background-color: var(--kd-white);
  border: 1.5px solid var(--kd-border);
  border-radius: var(--kd-radius-md);
  padding: 20px;
  transition: var(--kd-transition);
}

.kd-why-item:hover {
  border-color: rgba(0, 128, 255, 0.25);
  box-shadow: var(--kd-shadow-card);
}

/* Square icon box in why item */
.kd-why-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  background-color: var(--kd-primary-light);
  border-radius: var(--kd-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}

.kd-why-body h4 {
  font-size: 15px;
  font-weight: 700;
  color: var(--kd-text-heading);
  margin-bottom: 4px;
}

.kd-why-body p {
  font-size: 13px;
  color: var(--kd-text-body);
  line-height: 1.6;
  margin: 0;
}


/* ================================================================
   14. CTA BAND
   — Full-width blue gradient section with centered CTA
================================================================ */
.kd-cta-band {
  background: linear-gradient(130deg, var(--kd-primary) 0%, #0055b8 60%, #0044a0 100%);
  padding: 88px 0;
  position: relative;
  overflow: hidden;
}

/* Dot-grid texture on CTA band */
.kd-cta-band::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 26px 26px;
  pointer-events: none;
}

.kd-cta-band-inner {
  position: relative;
  z-index: 1;
}

.kd-cta-band h2 {
  font-size: 38px;
  font-weight: 800;
  color: var(--kd-white);
  margin-bottom: 14px;
  line-height: 1.2;
}

.kd-cta-band p {
  font-size: 17px;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 36px;
}


/* ================================================================
   15. FOOTER
================================================================ */
.kd-footer {
  background-color: var(--kd-white);
  border-top: 1px solid var(--kd-border);
  padding-top: 60px;
}

/* Light-blue CTA block inside footer */
.kd-footer-cta-block {
  background-color: var(--kd-primary-light);
  border-radius: var(--kd-radius-lg);
  padding: 48px 48px;
  margin-bottom: 56px;
}

.kd-footer-cta-block h2 {
  font-size: 26px;
  font-weight: 800;
  color: var(--kd-text-heading);
  margin-bottom: 10px;
}

.kd-footer-cta-block p {
  color: var(--kd-text-body);
  font-size: 15px;
  margin-bottom: 24px;
}

/* Footer nav column heading */
.kd-footer-nav-heading {
  font-size: 12px;
  font-weight: 700;
  color: var(--kd-text-heading);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 16px;
}

/* Footer nav link list */
.kd-footer-nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.kd-footer-nav-list a {
  color: var(--kd-text-body);
  font-size: 13.5px;
}

.kd-footer-nav-list a:hover {
  color: var(--kd-primary);
}

/* Social icon row */
.kd-footer-social {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

.kd-footer-social-link {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background-color: var(--kd-bg-light);
  border: 1px solid var(--kd-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--kd-text-muted);
  font-size: 14px;
  transition: var(--kd-transition);
}

.kd-footer-social-link:hover {
  background-color: var(--kd-primary);
  color: var(--kd-white);
  border-color: var(--kd-primary);
}

/* Divider row before copyright */
.kd-footer-bottom {
  border-top: 1px solid var(--kd-border);
  padding: 20px 0 24px;
  padding-bottom: 50px;
  margin-top: 40px;
}

.kd-footer-bottom p {
  font-size: 13px;
  color: var(--kd-text-muted);
  margin: 0;
}


/* ================================================================
   16. FLOATING CTAs — WhatsApp & Call buttons
   — Fixed to bottom-right corner on all pages
================================================================ */
.kd-floating-ctas {
  position: fixed;
  right: 22px;
  bottom: 32px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 1000;
}

/* Shared circular button style */
.kd-float-btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.22);
  transition: var(--kd-transition);
  position: relative;
  text-decoration: none;
}

.kd-float-btn:hover {
  transform: translateY(-3px) scale(1.07);
}

.kd-float-btn-whatsapp {
  background-color: #25D366;
}

.kd-float-btn-call {
  background-color: var(--kd-primary);
}

/* Tooltip label that appears on hover */
.kd-float-label {
  position: absolute;
  right: 62px;
  background-color: var(--kd-secondary);
  color: var(--kd-white);
  font-size: 11.5px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 7px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}

/* Tooltip arrow */
.kd-float-label::after {
  content: '';
  position: absolute;
  right: -6px;
  top: 50%;
  transform: translateY(-50%);
  border: 6px solid transparent;
  border-left-color: var(--kd-secondary);
  border-right: none;
}

.kd-float-btn:hover .kd-float-label {
  opacity: 1;
}

/* Mobile CTA bar — only on small screens */
.kd-mobile-cta-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
}

.kd-mobile-cta-bar a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 700;
  font-size: 14px;
  color: var(--kd-white);
  padding: 8px 0;
}

.kd-mobile-cta-call   { background-color: var(--kd-secondary); }
.kd-mobile-cta-email  { background-color: var(--kd-primary); }
.kd-mobile-cta-wa     { background-color: #25D366; }


/* ================================================================
   17. ANIMATIONS & SCROLL REVEAL
================================================================ */

/* Initial hidden state — JS adds .kd-visible on scroll */
.kd-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}

.kd-reveal.kd-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delay helpers for grid children */
.kd-stagger-1 { transition-delay: 0.05s; }
.kd-stagger-2 { transition-delay: 0.10s; }
.kd-stagger-3 { transition-delay: 0.15s; }
.kd-stagger-4 { transition-delay: 0.20s; }
.kd-stagger-5 { transition-delay: 0.25s; }
.kd-stagger-6 { transition-delay: 0.30s; }


/* ================================================================
   18. RESPONSIVE OVERRIDES
================================================================ */

/* Tablet — up to 991px */
@media (max-width: 991px) {
  .kd-hero h1         { font-size: 34px; }
  .kd-section-title   { font-size: 28px; }
  .kd-page-banner h1  { font-size: 28px; }
  .kd-cta-band h2     { font-size: 30px; }
  .kd-steps-track     { display: none; } /* hide line, steps stack to 2-col */
}

/* Mobile — up to 575px */
@media (max-width: 575px) {
  .kd-hero h1           { font-size: 28px; }
  .kd-page-banner h1    { font-size: 22px; }
  .kd-cta-band h2       { font-size: 24px; }
  .kd-hero-stats        { flex-wrap: wrap; gap: 20px; }
  .kd-footer-cta-block  { padding: 28px 20px; }
}


/* ================================================================
   19. ERP MODULES SECTION — GSAP scroll-driven animation
   Used on: Homepage (index.html)
   Reusable on: School ERP page, any service page

   LAYOUT CONCEPT (mirrors the original WordPress design):
   ─────────────────────────────────────────────────────
   .kd-erp-section        outer section wrapper
   └── .kd-erp-canvas     full-width stage, overflow:hidden
       ├── .kd-erp-phone  phone SVG — position:absolute, centred
       └── .kd-erp-row-*  rows of pill tiles stacked vertically
                          tiles sit left and right of the phone

   The canvas has enough padding-top/bottom so the phone
   visually overlaps every row.  Rows use justify-content:
   space-between so tiles naturally hug the left and right edges.

   ANIMATION (kd-main.js → initErpAnimation):
   ─────────────────────────────────────────────────────
   .kd-erp-box-left   → GSAP flies from x:-900 (row 1) to x:0
   .kd-erp-box-right  → GSAP flies from x:+900 to x:0
   .kd-erp-box-center → GSAP rises from y:120 to y:0
   .kd-erp-phone      → GSAP scales from 0.75 → 1, fades in

   MOBILE (≤767px):
   ─────────────────────────────────────────────────────
   Canvas switches to normal flow.  Phone shown at top.
   Rows become a 2-col wrapping pill grid.
================================================================ */

/* ── Section outer ── */
.kd-erp-section {
  padding: 80px 0 60px;
  background-color: var(--kd-white);
}

/* ── Full-width animation stage ── */
.kd-erp-canvas {
  position: relative;
  width: 100%;
  /* tall enough that 4 rows of tiles fit above/below the phone */
  min-height: 500px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
  padding: 20px 0;
}

/* ── Phone — absolutely centred in the canvas ── */
.kd-erp-phone {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  pointer-events: none;
}

.kd-erp-phone-svg {
  display: block;
  filter: drop-shadow(0 32px 64px rgba(0, 128, 255, 0.22));
}

/* ── Row — full width, tiles hug edges, phone in gap ── */
.kd-erp-row {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 40px;
  margin-bottom: 18px;
  /* Reserve centre space for the phone (240px wide + breathing room) */
  gap: 6px;
}

/* Invisible flex spacer that pushes tiles to far edges
   (one spacer per row sits where the phone is) */
.kd-erp-row-spacer {
  flex: 0 0 280px;   /* matches phone width + side margin */
  min-width: 280px;
}

/* ── Individual module pill tile ── */
.kd-erp-box {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 64px;
  padding: 0 22px;
  border-radius: var(--kd-radius-pill);
  border: 1.5px solid var(--kd-border);
  background-color: var(--kd-white);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
  font-size: 14px;
  font-weight: 600;
  color: var(--kd-text-heading);
  white-space: nowrap;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
  cursor: default;
}

.kd-erp-box:hover {
  border-color: var(--kd-primary);
  box-shadow: 0 6px 24px rgba(0, 128, 255, 0.13);
  transform: translateY(-2px);
}

/* Icon square inside pill */
.kd-erp-box-icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background-color: var(--kd-primary-light);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Colour variants */
.kd-erp-box-primary {
  border-color: rgba(0, 128, 255, 0.30);
  background-color: var(--kd-primary-light);
}
.kd-erp-box-primary .kd-erp-box-icon {
  background-color: rgba(0, 128, 255, 0.12);
}

.kd-erp-box-accent {
  border-color: rgba(255, 159, 28, 0.35);
  background-color: var(--kd-accent-light);
}
.kd-erp-box-accent .kd-erp-box-icon {
  background-color: rgba(255, 159, 28, 0.15);
}
.kd-erp-box-accent:hover {
  border-color: var(--kd-accent);
  box-shadow: 0 6px 24px rgba(255, 159, 28, 0.14);
}

/* ════════════════════════════════════════════
   MOBILE — ≤ 767px
   Switch to: phone on top, tiles in 2-col grid
════════════════════════════════════════════ */
@media (max-width: 767px) {

  .kd-erp-canvas {
    min-height: auto;
    overflow: visible;
    padding: 0 16px 20px;
    gap: 0;
  }

  /* Phone sits above the tile grid, centred, smaller */
  .kd-erp-phone {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1.3);
    display: flex;
    justify-content: center;
    margin: 0 auto 32px;
  }

  .kd-erp-phone-svg {
    width: 180px;
    height: auto;
  }

  /* Each row becomes a wrapping flex row */
  .kd-erp-row {
    flex-wrap: wrap;
    justify-content: center;
    padding: 0;
    gap: 10px;
    margin-bottom: 10px;
  }

  /* Hide Row 4 on Mobile as it extends the UI */
  .kd-erp-row-4 {
    display: none;
  }

  /* Hide the spacer — not needed on mobile */
  .kd-erp-row-spacer {
    display: none;
  }

  /* Compact pill size */
  .kd-erp-box {
    height: 35px;
    font-size: 12px;
    padding: 0 16px;
    gap: 8px;
    flex: 0 2 calc(50% - 10px);   /* 2 columns */
    justify-content: flex-start;
  }

  .kd-erp-box-icon {
    width: 28px;
    height: 28px;
    border-radius: 7px;
  }
}

/* Tablet only — 768–991px: tighter canvas, smaller phone */
@media (min-width: 768px) and (max-width: 991px) {
  .kd-erp-canvas { min-height: 720px; }
  .kd-erp-phone-svg { width: 180px; height: auto; }
  .kd-erp-row-spacer { flex: 0 0 210px; min-width: 210px; }
  .kd-erp-box { height: 58px; font-size: 13px; padding: 0 18px; }
  .kd-erp-row { padding: 0 20px; gap: 10px; margin-bottom: 14px; }
}


/* ================================================================
   20. BRAND BACKGROUND PATTERN
   ─────────────────────────────────────────────────────────────────
   One reusable pattern class for the whole site.
   Apply .kd-bg-pattern to any section instead of plain white
   or plain var(--kd-bg-light).

   Design:
   — A very subtle dot grid using the primary blue at 6% opacity
   — Works equally well on both #FFFFFF and #F7F9FC backgrounds
   — Reinforces the brand without competing with content
   — Pairs with a faint linear blush (top-left → bottom-right)
     in the brand blue so the page feels alive, not flat

   Usage examples:
     <section class="kd-bg-pattern"> ... </section>
     <div class="kd-bg-pattern kd-bg-pattern--dark"> ... </div>

   Variants:
   .kd-bg-pattern            default — white base + blue dots
   .kd-bg-pattern--soft      light-grey base + blue dots (sections)
   .kd-bg-pattern--dark      secondary navy base + white dots
================================================================ */

/* ── Default (white base) ── */
.kd-bg-pattern {
  background-color: var(--kd-white);
  background-image:
    radial-gradient(circle at 0% 0%, rgba(0,128,255,0.04) 0%, transparent 60%),
    radial-gradient(circle at 100% 100%, rgba(255,159,28,0.03) 0%, transparent 55%),
    radial-gradient(rgba(0,128,255,0.06) 1px, transparent 1px);
  background-size: auto, auto, 28px 28px;
  background-position: top left, bottom right, 0 0;
}

/* ── Soft (light-grey base, used for alternating sections) ── */
.kd-bg-pattern--soft {
  background-color: var(--kd-bg-light);
  background-image:
    radial-gradient(circle at 100% 0%, rgba(0,128,255,0.05) 0%, transparent 55%),
    radial-gradient(rgba(0,128,255,0.055) 1px, transparent 1px);
  background-size: auto, 28px 28px;
  background-position: top right, 0 0;
}

/* ── Dark (navy base, white dots — for dark sections) ── */
.kd-bg-pattern--dark {
  background-color: var(--kd-secondary);
  background-image:
    radial-gradient(circle at 20% 20%, rgba(0,128,255,0.12) 0%, transparent 50%),
    radial-gradient(rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: auto, 28px 28px;
  background-position: top left, 0 0;
}

/* =========================================================
   KD BRAND SURFACE
   ---------------------------------------------------------
   Reusable premium background system
   Inspired by modern SaaS + AI interfaces

   Features:
   - subtle engineering grid
   - directional energy lines
   - soft brand glow
   - scalable across all sections
   - works on light & dark surfaces
========================================================= */

.kd-surface {
  position: relative;
  isolation: isolate;
  overflow: hidden;

  background-color: #ffffff;

  /* layered visual system */
  background-image:

    /* top glow */
    radial-gradient(
      circle at top left,
      rgba(0, 128, 255, 0.10),
      transparent 38%
    ),

    /* bottom accent glow */
    radial-gradient(
      circle at bottom right,
      rgba(255, 159, 28, 0.08),
      transparent 34%
    ),

    /* diagonal directional lines */
    linear-gradient(
      135deg,
      rgba(0,128,255,0.03) 0%,
      rgba(0,128,255,0.03) 1px,
      transparent 1px,
      transparent 80px
    ),

    /* engineering grid */
    linear-gradient(
      rgba(0,128,255,0.035) 1px,
      transparent 1px
    ),

    linear-gradient(
      90deg,
      rgba(0,128,255,0.035) 1px,
      transparent 1px
    );

  background-size:
    auto,
    auto,
    80px 80px,
    32px 32px,
    32px 32px;

  background-position:
    top left,
    bottom right,
    0 0,
    0 0,
    0 0;
}


/* =========================================================
   Floating Glow Orbs
========================================================= */

.kd-surface::before,
.kd-surface::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
  z-index: -1;
  filter: blur(40px);
}

/* blue orb */
.kd-surface::before {
  width: 240px;
  height: 240px;
  top: -80px;
  right: -80px;

  background: rgba(0,128,255,0.12);
}

/* orange orb */
.kd-surface::after {
  width: 180px;
  height: 180px;
  bottom: -60px;
  left: -60px;

  background: rgba(255,159,28,0.10);
}


/* =========================================================
   SOFT SECTION VARIANT
========================================================= */

.kd-surface--soft {
  background-color: #f7f9fc;
}


/* =========================================================
   DARK VARIANT
========================================================= */

.kd-surface--dark {
  background-color: #081120;

  background-image:

    radial-gradient(
      circle at top left,
      rgba(0,128,255,0.16),
      transparent 35%
    ),

    radial-gradient(
      circle at bottom right,
      rgba(255,159,28,0.10),
      transparent 30%
    ),

    linear-gradient(
      135deg,
      rgba(255,255,255,0.025) 0%,
      rgba(255,255,255,0.025) 1px,
      transparent 1px,
      transparent 80px
    ),

    linear-gradient(
      rgba(255,255,255,0.03) 1px,
      transparent 1px
    ),

    linear-gradient(
      90deg,
      rgba(255,255,255,0.03) 1px,
      transparent 1px
    );
}


/* =========================================================
   KD AURORA SURFACE
   ---------------------------------------------------------
   Premium animated brand surface
========================================================= */

.kd-aurora {
  position: relative;
  overflow: hidden;
  isolation: isolate;

  background: #ffffff;
}


/* =========================================================
   AURORA BLOBS
========================================================= */

.kd-aurora::before,
.kd-aurora::after {
  content: "";

  position: absolute;

  width: 70vw;
  height: 70vw;

  border-radius: 50%;

  filter: blur(90px);

  opacity: 0.55;

  animation: kdFloat 18s ease-in-out infinite;
}


/* blue aurora */
.kd-aurora::before {
  top: -20%;
  left: -10%;

  background:
    radial-gradient(
      circle,
      rgba(0,128,255,0.24) 0%,
      transparent 70%
    );
}


/* orange aurora */
.kd-aurora::after {
  bottom: -30%;
  right: -10%;

  background:
    radial-gradient(
      circle,
      rgba(255,159,28,0.18) 0%,
      transparent 70%
    );

  animation-delay: -9s;
}


/* =========================================================
   MOTION
========================================================= */

@keyframes kdFloat {
  0% {
    transform: translate(0,0) scale(1);
  }

  25% {
    transform: translate(4%, -3%) scale(1.05);
  }

  50% {
    transform: translate(-3%, 4%) scale(0.96);
  }

  75% {
    transform: translate(3%, 2%) scale(1.02);
  }

  100% {
    transform: translate(0,0) scale(1);
  }
}


/* =========================================================
   KD FLOW WAVES
========================================================= */

.kd-flow-waves {
  position: relative;
  overflow: hidden;
  isolation: isolate;

  background:
    linear-gradient(
      180deg,
      /*#ffffff 0%,*/
      /*#f7f9fc 100%*/
    );

  padding: 120px 0;
}


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

.kd-flow-content {
  position: relative;
  z-index: 5;

  width: min(1200px, 90%);
  margin: auto;
}


/* =========================================================
   SVG
========================================================= */

.kd-flow-svg {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  z-index: -1;
}


/* =========================================================
   WAVES
========================================================= */

.kd-wave {
  fill: none;

  stroke-linecap: round;

  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}


/* ---------------------------------------------------------
   WAVE 1
--------------------------------------------------------- */

.kd-wave-1 {
  stroke:
    rgba(0, 128, 255, 0.18);

  stroke-width: 2;

  filter: blur(0.2px);

  animation:
    kdWaveFloat1 10s infinite;
}


/* ---------------------------------------------------------
   WAVE 2
--------------------------------------------------------- */

.kd-wave-2 {
  stroke:
    rgba(0, 128, 255, 0.10);

  stroke-width: 1.5;

  animation:
    kdWaveFloat2 18s infinite;
}


/* ---------------------------------------------------------
   WAVE 3
--------------------------------------------------------- */

.kd-wave-3 {
  stroke:
    rgba(255, 159, 28, 0.12);

  stroke-width: 2;

  animation:
    kdWaveFloat3 22s infinite;
}


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

@keyframes kdWaveFloat1 {
  0% {
    transform: translateX(0px) translateY(0px);
  }

  50% {
    transform: translateX(-20px) translateY(12px);
  }

  100% {
    transform: translateX(0px) translateY(0px);
  }
}


@keyframes kdWaveFloat2 {
  0% {
    transform: translateX(0px) translateY(0px);
  }

  50% {
    transform: translateX(25px) translateY(-10px);
  }

  100% {
    transform: translateX(0px) translateY(0px);
  }
}


@keyframes kdWaveFloat3 {
  0% {
    transform: translateX(0px) translateY(0px);
  }

  50% {
    transform: translateX(-15px) translateY(-14px);
  }

  100% {
    transform: translateX(0px) translateY(0px);
  }
}






/* BACKGROUND COLOR GRADIENT */
.kd-holographic {
  position: relative;
  overflow: hidden;
  isolation: isolate;

  background: #081120;
  padding: 120px 0;
}

.kd-holographic::before {
  content: "";

  position: absolute;
  inset: -30%;

  background:
    linear-gradient(
      120deg,
      rgba(0,128,255,0.22),
      rgba(255,0,180,0.14),
      rgba(0,255,200,0.14),
      rgba(255,159,28,0.14)
    );

  background-size: 300% 300%;

  mix-blend-mode: screen;

  filter: blur(80px);

  animation:
    kdHoloMove 18s ease infinite;
}

@keyframes kdHoloMove {
  0% {
    transform: rotate(0deg) scale(1);
    background-position: 0% 50%;
  }

  50% {
    transform: rotate(8deg) scale(1.08);
    background-position: 100% 50%;
  }

  100% {
    transform: rotate(0deg) scale(1);
    background-position: 0% 50%;
  }
}

.kd-content {
  position: relative;
  z-index: 5;
  width: min(1200px, 90%);
  margin: auto;
  color: white;
}





/* TOPOGRAPHC */
/*HTML:
<svg class="kd-topo-svg" viewBox="0 0 1440 900" preserveAspectRatio="none"> <path class="kd-topo-line" d="M0,200 C300,100 600,300 900,180 C1150,80 1300,250 1440,180" /> <path class="kd-topo-line delay-1" d="M0,320 C240,260 520,420 820,320 C1120,220 1260,420 1440,340" /> <path class="kd-topo-line delay-2" d="M0,520 C280,420 600,620 920,520 C1160,440 1300,620 1440,540" /> </svg>
*/
.kd-topographic {
  position: relative;
  overflow: hidden;

  background:
    linear-gradient(
      180deg,
      #ffffff,
      #f7f9fc
    );

  padding: 120px 0;
}

.kd-topo-svg {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;
}

.kd-topo-line {
  fill: none;

  stroke:
    rgba(0,128,255,0.16);

  stroke-width: 2;

  animation:
    kdTopoFloat 14s ease-in-out infinite;
}

.delay-1 {
  animation-delay: -5s;
}

.delay-2 {
  animation-delay: -9s;
}

@keyframes kdTopoFloat {
  0% {
    transform: translateY(0px);
  }

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

  100% {
    transform: translateY(0px);
  }
}







/* ============================================================
       ABOUT US — page-specific styles
       Shared tokens, navbar, banner, footer → kd-style.css
    ============================================================ */

    /* ── Story section ── */
    .kd-story-section { padding: 88px 0; background-color: var(--kd-white); }
    .kd-story-lead { font-size: 18px; font-weight: 600; color: var(--kd-text-heading); line-height: 1.6; margin-bottom: 20px; }
    .kd-story-body { font-size: 15px; color: var(--kd-text-body); line-height: 1.85; }
    .kd-story-body p { margin-bottom: 16px; }

    .kd-about-stats { display: flex; gap: 32px; flex-wrap: wrap; margin-top: 36px; padding-top: 32px; border-top: 1px solid var(--kd-border); }
    .kd-about-stat-val { font-size: 34px; font-weight: 800; color: var(--kd-primary); line-height: 1; }
    .kd-about-stat-val sup { font-size: 16px; color: var(--kd-accent); }
    .kd-about-stat-label { font-size: 12.5px; color: var(--kd-text-muted); margin-top: 5px; font-weight: 500; }

    @media (max-width: 575px) {
      .kd-about-stats .kd-about-stat-val { font-size: 20px; }
      .kd-about-stats .kd-about-stat-label { font-size: 10px; }
    }

    /* ── Mission / Vision / Values ── */
    .kd-mvv-section { padding: 88px 0; background-color: var(--kd-bg-light); }
    .kd-mvv-card { background-color: var(--kd-white); border: 1.5px solid var(--kd-border); border-radius: var(--kd-radius-lg); padding: 36px 28px; height: 100%; transition: var(--kd-transition); position: relative; overflow: hidden; }
    .kd-mvv-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; border-radius: var(--kd-radius-lg) 0 0 var(--kd-radius-lg); }
    .kd-mvv-card-mission::before { background-color: var(--kd-primary); }
    .kd-mvv-card-vision::before  { background-color: var(--kd-accent); }
    .kd-mvv-card-values::before  { background-color: var(--kd-success); }
    .kd-mvv-card:hover { transform: translateY(-4px); box-shadow: var(--kd-shadow-hover); }
    .kd-mvv-icon { width: 52px; height: 52px; border-radius: var(--kd-radius-sm); display: flex; align-items: center; justify-content: center; margin-bottom: 20px; }
    .kd-mvv-card h3 { font-size: 20px; font-weight: 800; color: var(--kd-text-heading); margin-bottom: 12px; }
    .kd-mvv-card p { font-size: 14px; color: var(--kd-text-body); line-height: 1.75; margin: 0; }

    /* ── Journey Timeline ── */
    .kd-journey-section { padding: 88px 0; background-color: var(--kd-white); overflow: hidden; }
    .kd-timeline { position: relative; max-width: 760px; margin: 0 auto; }
    .kd-timeline::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: linear-gradient(to bottom, var(--kd-primary), var(--kd-accent)); transform: translateX(-50%); }
    .kd-timeline-item { position: relative; width: 50%; padding-bottom: 52px; }
    .kd-timeline-item:nth-child(odd)  { left: 0; padding-right: 52px; text-align: right; }
    .kd-timeline-item:nth-child(even) { left: 50%; padding-left: 52px; text-align: left; }
    .kd-timeline-dot { position: absolute; top: 4px; width: 16px; height: 16px; border-radius: 50%; background-color: var(--kd-white); border: 3px solid var(--kd-primary); transition: var(--kd-transition); }
    .kd-timeline-item:nth-child(odd)  .kd-timeline-dot { right: -8px; }
    .kd-timeline-item:nth-child(even) .kd-timeline-dot { left: -8px; }
    .kd-timeline-item:hover .kd-timeline-dot { background-color: var(--kd-primary); transform: scale(1.3); }
    .kd-timeline-year  { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--kd-primary); margin-bottom: 6px; }
    .kd-timeline-title { font-size: 16px; font-weight: 700; color: var(--kd-text-heading); margin-bottom: 6px; }
    .kd-timeline-desc  { font-size: 13px; color: var(--kd-text-muted); line-height: 1.65; }

    /* Mobile: single-column timeline */
    @media (max-width: 767px) {
      .kd-timeline::before { left: 16px; }
      .kd-timeline-item,
      .kd-timeline-item:nth-child(even),
      .kd-timeline-item:nth-child(odd)  { width: 100%; left: 0; padding-left: 44px; padding-right: 0; text-align: left; }
      .kd-timeline-item:nth-child(odd)  .kd-timeline-dot,
      .kd-timeline-item:nth-child(even) .kd-timeline-dot { left: 8px; right: auto; }
    }

    /* ── Core Values ── */
    .kd-values-section { padding: 88px 0; background-color: var(--kd-bg-light); }
    .kd-value-item { display: flex; gap: 16px; align-items: flex-start; padding: 22px; background-color: var(--kd-white); border: 1.5px solid var(--kd-border); border-radius: var(--kd-radius-md); transition: var(--kd-transition); height: 100%; }
    .kd-value-item:hover { border-color: rgba(0,128,255,0.25); box-shadow: var(--kd-shadow-card); }
    .kd-value-icon { width: 44px; height: 44px; border-radius: var(--kd-radius-sm); background-color: var(--kd-primary-light); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .kd-value-item h4 { font-size: 15px; font-weight: 700; color: var(--kd-text-heading); margin-bottom: 5px; }
    .kd-value-item p  { font-size: 13px; color: var(--kd-text-body); line-height: 1.65; margin: 0; }

    /* ── Team ── */
    .kd-team-section { padding: 88px 0; background-color: var(--kd-white); }
    .kd-team-card { background-color: var(--kd-bg-light); border: 1.5px solid var(--kd-border); border-radius: var(--kd-radius-lg); padding: 28px 22px; text-align: center; transition: var(--kd-transition); }
    .kd-team-card:hover { border-color: rgba(0,128,255,0.25); box-shadow: var(--kd-shadow-card); transform: translateY(-3px); }
    .kd-team-avatar { width: 80px; height: 80px; border-radius: 50%; margin: 0 auto 16px; display: flex; align-items: center; justify-content: center; font-size: 28px; font-weight: 800; color: var(--kd-white); }
    .kd-team-name { font-size: 16px; font-weight: 700; color: var(--kd-text-heading); margin-bottom: 4px; }
    .kd-team-role { font-size: 13px; color: var(--kd-primary); font-weight: 600; margin-bottom: 10px; }
    .kd-team-bio  { font-size: 13px; color: var(--kd-text-muted); line-height: 1.65; }


/* ============================================================
       OUR WORK PAGE — page-specific styles
       Shared tokens, navbar, banner, footer -> kd-style.css
    ============================================================ */

    /* Alternating section backgrounds */
    .kd-portfolio-section { padding: 80px 0; background-color: var(--kd-bg-light); }
    .kd-portfolio-section:nth-child(even) { background-color: var(--kd-white); }

    /* Category heading row */
    .kd-cat-heading { display:flex; align-items:center; gap:16px; margin-bottom:40px; }
    .kd-cat-icon { width:52px; height:52px; border-radius:var(--kd-radius-md); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
    .kd-cat-heading h2 { font-size:26px; font-weight:800; color:var(--kd-text-heading); margin:0; }
    .kd-cat-heading p { font-size:14px; color:var(--kd-text-muted); margin:4px 0 0; }
    .kd-cat-count { margin-left:auto; font-size:12px; font-weight:700; color:var(--kd-text-muted); white-space:nowrap; padding:4px 12px; border-radius:var(--kd-radius-pill); border:1.5px solid var(--kd-border); }

    /* Project card */
    .kd-proj-card { background-color:var(--kd-white); border:1.5px solid var(--kd-border); border-radius:var(--kd-radius-lg); overflow:hidden; transition:var(--kd-transition); height:100%; }
    .kd-proj-card:hover { transform:translateY(-4px); box-shadow:var(--kd-shadow-hover); border-color:rgba(0,128,255,0.25); }
    .kd-proj-thumb { width:100%; height:188px; overflow:hidden; background-color:var(--kd-bg-light); }
    .kd-proj-thumb svg { width:100%; height:100%; }
    .kd-proj-body { padding:20px 20px 18px; }
    .kd-proj-meta { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
    .kd-proj-tag { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; padding:3px 10px; border-radius:var(--kd-radius-pill); }
    .kd-tag-website { background-color:var(--kd-primary-light); color:var(--kd-primary); }
    .kd-tag-erp     { background-color:rgba(27,20,100,0.08); color:var(--kd-secondary); }
    .kd-tag-app     { background-color:rgba(40,200,64,0.10); color:#16a34a; }
    .kd-tag-seo     { background-color:var(--kd-accent-light); color:#c17800; }
    .kd-tag-landing { background-color:rgba(139,92,246,0.08); color:#6d28d9; }
    .kd-proj-year  { font-size:12px; font-weight:600; color:var(--kd-text-muted); }
    .kd-proj-body h3 { font-size:15.5px; font-weight:700; color:var(--kd-text-heading); margin-bottom:6px; line-height:1.35; }
    .kd-proj-body p  { font-size:13px; color:var(--kd-text-body); line-height:1.65; margin-bottom:14px; }
    .kd-proj-techs  { display:flex; flex-wrap:wrap; gap:5px; margin-bottom:14px; }
    .kd-proj-tech   { font-size:11px; font-weight:600; color:var(--kd-text-muted); background-color:var(--kd-bg-light); border:1px solid var(--kd-border); border-radius:6px; padding:2px 8px; }
    .kd-proj-foot   { display:flex; align-items:center; justify-content:space-between; padding-top:12px; border-top:1px solid var(--kd-border); }
    .kd-proj-loc    { font-size:12px; color:var(--kd-text-muted); display:flex; align-items:center; gap:4px; }
    .kd-proj-link   { font-size:13px; font-weight:700; color:var(--kd-primary); display:inline-flex; align-items:center; gap:4px; transition:gap 0.2s; }
    .kd-proj-card:hover .kd-proj-link { gap:7px; }

    /* Featured horizontal card */
    .kd-proj-featured { display:flex; flex-direction:row; }
    .kd-proj-featured .kd-proj-thumb { width:400px; height:auto; min-height:260px; flex-shrink:0; }
    .kd-proj-featured .kd-proj-body  { display:flex; flex-direction:column; justify-content:center; padding:32px 36px; }
    .kd-proj-featured h3 { font-size:20px; margin-bottom:10px; }
    .kd-featured-badge { display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; color:var(--kd-accent); background-color:var(--kd-accent-light); border-radius:var(--kd-radius-pill); padding:3px 10px; margin-bottom:12px; }
    @media(max-width:767px) {
      .kd-proj-featured { flex-direction:column; }
      .kd-proj-featured .kd-proj-thumb { width:100%; height:200px; min-height:unset; }
    }

    /* Stats band */
    .kd-stats-band { background-color:var(--kd-secondary); padding:64px 0; position:relative; overflow:hidden; }
    .kd-stats-band::before { content:''; position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,0.03) 1px,transparent 1px); background-size:28px 28px; pointer-events:none; }
    .kd-stat-cell { text-align:center; padding:16px; position:relative; }
    .kd-stat-cell:not(:last-child)::after { content:''; position:absolute; right:0; top:15%; bottom:15%; width:1px; background-color:rgba(255,255,255,0.10); }
    .kd-stat-val { font-size:42px; font-weight:800; color:var(--kd-white); line-height:1; }
    .kd-stat-val sup { font-size:20px; color:var(--kd-accent); }
    .kd-stat-lbl { font-size:13px; color:rgba(255,255,255,0.45); margin-top:8px; font-weight:500; }
    @media(max-width:767px) { .kd-stat-cell::after { display:none; } }

/* === PAGE-SPECIFIC === */

    /*
     * ============================================================
     *  NON-EDUCATIONAL CLIENTS — page-specific styles
     *  Shared tokens, navbar, banner, footer → kd-style.css
     *  Project card system reused from our-work.html
     * ============================================================
     */

    /* ── Industry sections alternate bg ── */
    .kd-industry-section {
      padding: 80px 0;
      background-color: var(--kd-bg-light);
    }
    .kd-industry-section:nth-child(even) {
      background-color: var(--kd-white);
    }

    /* ── Industry category heading — same pattern as Our Work ── */
    .kd-category-heading {
      display: flex;
      align-items: center;
      gap: 16px;
      margin-bottom: 40px;
    }
    .kd-category-icon {
      width: 52px;
      height: 52px;
      border-radius: var(--kd-radius-md);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .kd-category-heading h2 {
      font-size: 26px;
      font-weight: 800;
      color: var(--kd-text-heading);
      margin: 0;
    }
    .kd-category-heading p {
      font-size: 14px;
      color: var(--kd-text-muted);
      margin: 4px 0 0;
    }
    .kd-category-count {
      margin-left: auto;
      font-size: 12px;
      font-weight: 700;
      color: var(--kd-text-muted);
      white-space: nowrap;
      padding: 4px 12px;
      border-radius: var(--kd-radius-pill);
      border: 1.5px solid var(--kd-border);
    }

    /* ── Project card (same as our-work.html) ── */
    .kd-proj-card {
      background-color: var(--kd-white);
      border: 1.5px solid var(--kd-border);
      border-radius: var(--kd-radius-lg);
      overflow: hidden;
      transition: var(--kd-transition);
      height: 100%;
    }
    .kd-proj-card:hover {
      transform: translateY(-4px);
      box-shadow: var(--kd-shadow-hover);
      border-color: rgba(0,128,255,0.25);
    }
    .kd-proj-thumb {
      width: 100%;
      height: 188px;
      overflow: hidden;
      background-color: var(--kd-bg-light);
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .kd-proj-thumb svg { width: 100%; height: 100%; }
    .kd-proj-body { padding: 20px 20px 18px; }
    .kd-proj-meta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 10px;
    }
    .kd-proj-tag {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      padding: 3px 10px;
      border-radius: var(--kd-radius-pill);
    }

    /* Industry tag colour variants */
    .kd-proj-tag-food     { background-color: #FFF1EB; color: #c2440f; }
    .kd-proj-tag-health   { background-color: rgba(40,200,64,0.10); color: #16a34a; }
    .kd-proj-tag-startup  { background-color: var(--kd-primary-light); color: var(--kd-primary); }
    .kd-proj-tag-ngo      { background-color: rgba(255,95,87,0.10); color: #c0392b; }
    .kd-proj-tag-realty   { background-color: rgba(27,20,100,0.07); color: var(--kd-secondary); }
    .kd-proj-tag-fitness  { background-color: var(--kd-accent-light); color: #c17800; }
    .kd-proj-tag-retail   { background-color: rgba(109,40,217,0.08); color: #6d28d9; }
    .kd-proj-tag-salon    { background-color: rgba(219,39,119,0.08); color: #be185d; }

    .kd-proj-year { font-size: 12px; font-weight: 600; color: var(--kd-text-muted); }
    .kd-proj-body h3 { font-size: 15.5px; font-weight: 700; color: var(--kd-text-heading); margin-bottom: 6px; line-height: 1.35; }
    .kd-proj-body p  { font-size: 13px; color: var(--kd-text-body); line-height: 1.65; margin-bottom: 14px; }
    .kd-proj-techs  { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 14px; }
    .kd-proj-tech   { font-size: 11px; font-weight: 600; color: var(--kd-text-muted); background-color: var(--kd-bg-light); border: 1px solid var(--kd-border); border-radius: 6px; padding: 2px 8px; }
    .kd-proj-foot   { display: flex; align-items: center; justify-content: space-between; padding-top: 12px; border-top: 1px solid var(--kd-border); }
    .kd-proj-location { font-size: 12px; color: var(--kd-text-muted); display: flex; align-items: center; gap: 4px; }
    .kd-proj-link   { font-size: 13px; font-weight: 700; color: var(--kd-primary); display: inline-flex; align-items: center; gap: 4px; transition: gap 0.2s ease; }
    .kd-proj-card:hover .kd-proj-link { gap: 7px; }

    /* Featured horizontal card */
    .kd-proj-card-featured { display: flex; flex-direction: row; }
    .kd-proj-card-featured .kd-proj-thumb { width: 400px; height: auto; min-height: 260px; flex-shrink: 0; }
    .kd-proj-card-featured .kd-proj-body { display: flex; flex-direction: column; justify-content: center; padding: 32px 36px; }
    .kd-proj-card-featured h3 { font-size: 20px; margin-bottom: 10px; }
    .kd-featured-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; color: var(--kd-accent); background-color: var(--kd-accent-light); border-radius: var(--kd-radius-pill); padding: 3px 10px; margin-bottom: 12px; }

    @media (max-width: 767px) {
      .kd-proj-card-featured { flex-direction: column; }
      .kd-proj-card-featured .kd-proj-thumb { width: 100%; height: 200px; min-height: unset; }
    }

    /* ── Stats band ── */
    .kd-work-stats-band {
      background-color: var(--kd-secondary);
      padding: 64px 0;
      position: relative;
      overflow: hidden;
    }
    .kd-work-stats-band::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image: radial-gradient(rgba(255,255,255,0.03) 1px, transparent 1px);
      background-size: 28px 28px;
      pointer-events: none;
    }
    .kd-work-stat-item { text-align: center; padding: 16px; position: relative; }
    .kd-work-stat-item:not(:last-child)::after { content: ''; position: absolute; right: 0; top: 15%; bottom: 15%; width: 1px; background-color: rgba(255,255,255,0.10); }
    .kd-work-stat-val { font-size: 42px; font-weight: 800; color: var(--kd-white); line-height: 1; }
    .kd-work-stat-val sup { font-size: 20px; color: var(--kd-accent); }
    .kd-work-stat-label { font-size: 13px; color: rgba(255,255,255,0.45); margin-top: 8px; font-weight: 500; }

    /* ── Why section — 2-col: benefits + illustration ── */
    .kd-why-noneduc {
      padding: 88px 0;
      background-color: var(--kd-bg-light);
    }

    @media (max-width: 767px) {
      .kd-work-stat-item::after { display: none; }
    }
  


    /* ============================================================
       PAGE-SPECIFIC STYLES
    ============================================================ */

    /* ── Rating summary band ── */
    .kd-rating-band {
      background-color: var(--kd-white);
      border-bottom: 1px solid var(--kd-border);
      padding: 28px 0;
    }

    .kd-rating-total {
      display: flex;
      align-items: center;
      gap: 14px;
    }

    .kd-rating-number {
      font-size: 52px;
      font-weight: 800;
      color: var(--kd-text-heading);
      line-height: 1;
    }

    .kd-rating-stars {
      display: flex;
      gap: 3px;
      color: #f59e0b;
      font-size: 22px;
      line-height: 1;
    }

    .kd-rating-meta {
      font-size: 13px;
      color: var(--kd-text-muted);
      margin-top: 4px;
    }

    /* Divider between rating and platform logos */
    .kd-rating-divider {
      width: 1px;
      height: 52px;
      background-color: var(--kd-border);
      flex-shrink: 0;
    }

    /* Platform badge (Google, Facebook etc.) */
    .kd-platform-badge {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 16px;
      border: 1.5px solid var(--kd-border);
      border-radius: var(--kd-radius-md);
      transition: var(--kd-transition);
    }

    .kd-platform-badge:hover {
      border-color: rgba(0,128,255,0.3);
      box-shadow: var(--kd-shadow-card);
    }

    .kd-platform-name {
      font-size: 13px;
      font-weight: 700;
      color: var(--kd-text-heading);
    }

    .kd-platform-stars {
      font-size: 12px;
      color: #f59e0b;
      letter-spacing: 1px;
    }

    .kd-platform-count {
      font-size: 11px;
      color: var(--kd-text-muted);
      margin-top: 1px;
    }

    /* ── Featured quote ── */
    .kd-featured-quote-section {
      padding: 80px 0;
    }

    .kd-featured-quote-card {
      background: linear-gradient(135deg, var(--kd-secondary) 0%, #0d2460 60%, #0a3272 100%);
      border-radius: var(--kd-radius-lg);
      padding: 56px 64px;
      position: relative;
      overflow: hidden;
    }

    /* Dot pattern overlay on the dark card */
    .kd-featured-quote-card::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image: radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px);
      background-size: 24px 24px;
      pointer-events: none;
    }

    /* Decorative large quotation mark */
    .kd-quote-mark-bg {
      position: absolute;
      top: -20px;
      right: 40px;
      font-size: 280px;
      line-height: 1;
      color: rgba(255,255,255,0.04);
      font-family: Georgia, serif;
      pointer-events: none;
      user-select: none;
    }

    .kd-featured-quote-text {
      font-size: 22px;
      font-weight: 600;
      color: var(--kd-white);
      line-height: 1.65;
      font-style: italic;
      position: relative;
      z-index: 1;
      margin-bottom: 32px;
      max-width: 780px;
    }

    .kd-featured-quote-author {
      display: flex;
      align-items: center;
      gap: 16px;
      position: relative;
      z-index: 1;
    }

    .kd-featured-avatar {
      width: 56px;
      height: 56px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      font-weight: 800;
      color: var(--kd-white);
      flex-shrink: 0;
      border: 2px solid rgba(255,255,255,0.2);
    }

    .kd-featured-name {
      font-size: 16px;
      font-weight: 700;
      color: var(--kd-white);
    }

    .kd-featured-role {
      font-size: 13px;
      color: rgba(255,255,255,0.55);
      margin-top: 2px;
    }

    .kd-featured-stars {
      margin-left: auto;
      color: #f59e0b;
      font-size: 18px;
      letter-spacing: 2px;
    }

    @media (max-width: 767px) {
      .kd-featured-quote-card { padding: 36px 28px; }
      .kd-featured-quote-text { font-size: 17px; }
      .kd-featured-stars { display: none; }
    }

    /* ── Testimonial grid cards ── */
    .kd-testi-grid-section {
      padding: 24px 0 88px;
    }

    .kd-testi-card {
      background-color: var(--kd-white);
      border: 1.5px solid var(--kd-border);
      border-radius: var(--kd-radius-lg);
      padding: 28px 26px 24px;
      height: 100%;
      transition: var(--kd-transition);
      position: relative;
      display: flex;
      flex-direction: column;
    }

    .kd-testi-card:hover {
      transform: translateY(-4px);
      border-color: rgba(0,128,255,0.22);
      box-shadow: var(--kd-shadow-hover);
    }

    /* Service type accent dot on top-left corner */
    .kd-testi-card::before {
      content: '';
      position: absolute;
      top: 0; left: 24px;
      width: 36px; height: 3px;
      border-radius: 0 0 4px 4px;
    }

    .kd-testi-card-website::before  { background-color: var(--kd-primary); }
    .kd-testi-card-erp::before      { background-color: var(--kd-secondary); }
    .kd-testi-card-app::before      { background-color: var(--kd-success); }
    .kd-testi-card-seo::before      { background-color: var(--kd-accent); }

    /* Opening quote symbol */
    .kd-testi-quote-icon {
      font-size: 42px;
      line-height: 1;
      color: var(--kd-primary-light);
      font-family: Georgia, serif;
      font-weight: 700;
      margin-bottom: 10px;
      display: block;
    }

    .kd-testi-card-erp    .kd-testi-quote-icon { color: rgba(27,20,100,0.12); }
    .kd-testi-card-app    .kd-testi-quote-icon { color: rgba(40,200,64,0.15); }
    .kd-testi-card-seo    .kd-testi-quote-icon { color: var(--kd-accent-light); }

    .kd-testi-text {
      font-size: 14px;
      color: var(--kd-text-body);
      line-height: 1.78;
      font-style: italic;
      flex: 1;
      margin-bottom: 22px;
    }

    /* Author row */
    .kd-testi-author {
      display: flex;
      align-items: center;
      gap: 12px;
      padding-top: 18px;
      border-top: 1px solid var(--kd-border);
    }

    .kd-testi-avatar {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-weight: 800;
      color: var(--kd-white);
      flex-shrink: 0;
    }

    .kd-testi-name {
      font-size: 14px;
      font-weight: 700;
      color: var(--kd-text-heading);
      line-height: 1.2;
    }

    .kd-testi-role {
      font-size: 12px;
      color: var(--kd-text-muted);
      margin-top: 2px;
    }

    .kd-testi-stars {
      margin-left: auto;
      font-size: 12px;
      color: #f59e0b;
      letter-spacing: 1px;
      flex-shrink: 0;
    }

    /* Service tag on top-right of card */
    .kd-testi-service-tag {
      position: absolute;
      top: 18px;
      right: 20px;
      font-size: 10.5px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      padding: 2px 8px;
      border-radius: var(--kd-radius-pill);
    }

    .kd-testi-card-website .kd-testi-service-tag { background-color: var(--kd-primary-light); color: var(--kd-primary); }
    .kd-testi-card-erp     .kd-testi-service-tag { background-color: rgba(27,20,100,0.08); color: var(--kd-secondary); }
    .kd-testi-card-app     .kd-testi-service-tag { background-color: rgba(40,200,64,0.10); color: #16a34a; }
    .kd-testi-card-seo     .kd-testi-service-tag { background-color: var(--kd-accent-light); color: #c17800; }

    /* ── Video testimonials row ── */
    .kd-video-section {
      padding: 88px 0;
    }

    .kd-video-card {
      background-color: var(--kd-white);
      border: 1.5px solid var(--kd-border);
      border-radius: var(--kd-radius-lg);
      overflow: hidden;
      transition: var(--kd-transition);
    }

    .kd-video-card:hover {
      transform: translateY(-3px);
      box-shadow: var(--kd-shadow-card);
    }

    /* SVG thumbnail placeholder replacing a real video thumbnail */
    .kd-video-thumb {
      width: 100%;
      height: 200px;
      position: relative;
      overflow: hidden;
    }

    .kd-video-thumb svg {
      width: 100%;
      height: 100%;
    }

    .kd-video-body {
      padding: 18px 20px;
    }

    .kd-video-name {
      font-size: 14.5px;
      font-weight: 700;
      color: var(--kd-text-heading);
      margin-bottom: 3px;
    }

    .kd-video-role {
      font-size: 12.5px;
      color: var(--kd-text-muted);
    }

    /* ── Stats band ── */
    .kd-testi-stats-band {
      padding: 72px 0;
    }

    .kd-testi-stat-item {
      text-align: center;
      padding: 28px 20px;
      border-radius: var(--kd-radius-lg);
      background-color: rgba(255,255,255,0.6);
      border: 1.5px solid var(--kd-border);
    }

    .kd-testi-stat-val {
      font-size: 44px;
      font-weight: 800;
      color: var(--kd-primary);
      line-height: 1;
    }

    .kd-testi-stat-val sup {
      font-size: 20px;
      color: var(--kd-accent);
    }

    .kd-testi-stat-label {
      font-size: 13px;
      color: var(--kd-text-muted);
      margin-top: 8px;
      font-weight: 500;
    }

    .kd-testi-stat-icon {
      font-size: 26px;
      margin-bottom: 12px;
    }

    /* ── Leave a review CTA strip ── */
    .kd-review-cta-strip {
      padding: 56px 0;
      background-color: var(--kd-white);
      border-top: 1px solid var(--kd-border);
      border-bottom: 1px solid var(--kd-border);
    }

    .kd-review-platform-btn {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 12px 24px;
      border-radius: var(--kd-radius-pill);
      border: 2px solid var(--kd-border);
      font-size: 14px;
      font-weight: 700;
      color: var(--kd-text-heading);
      background-color: var(--kd-white);
      transition: var(--kd-transition);
      text-decoration: none;
    }

    .kd-review-platform-btn:hover {
      border-color: var(--kd-primary);
      color: var(--kd-primary);
      box-shadow: var(--kd-shadow-card);
      transform: translateY(-2px);
    }

    /* Responsive */
    @media (max-width: 575px) {
      .kd-rating-divider { display: none; }
    }


    /* ============================================================
       WEB DEVELOPMENT SERVICE PAGE — page-specific styles
    ============================================================ */

    /* ── Service type cards ── */
    .kd-service-type-section {
      padding: 88px 0;
    }

    .kd-stype-card {
      background-color: var(--kd-white);
      border: 1.5px solid var(--kd-border);
      border-radius: var(--kd-radius-lg);
      padding: 30px 26px 26px;
      height: 100%;
      transition: var(--kd-transition);
      position: relative;
      overflow: hidden;
    }

    /* Animated colour bar on hover */
    .kd-stype-card::after {
      content: '';
      position: absolute;
      bottom: 0; left: 0; right: 0;
      height: 3px;
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.3s ease;
    }

    .kd-stype-card-blue::after   { background: var(--kd-primary); }
    .kd-stype-card-navy::after   { background: var(--kd-secondary); }
    .kd-stype-card-green::after  { background: var(--kd-success); }
    .kd-stype-card-amber::after  { background: var(--kd-accent); }
    .kd-stype-card-purple::after { background: #7c3aed; }
    .kd-stype-card-teal::after   { background: #0891b2; }

    .kd-stype-card:hover {
      transform: translateY(-5px);
      box-shadow: var(--kd-shadow-hover);
      border-color: rgba(0,128,255,0.22);
    }

    .kd-stype-card:hover::after { transform: scaleX(1); }

    .kd-stype-icon {
      width: 54px;
      height: 54px;
      border-radius: var(--kd-radius-md);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 18px;
    }

    .kd-stype-card h3 {
      font-size: 17px;
      font-weight: 700;
      color: var(--kd-text-heading);
      margin-bottom: 10px;
    }

    .kd-stype-card p {
      font-size: 13.5px;
      color: var(--kd-text-body);
      line-height: 1.7;
      margin-bottom: 18px;
    }

    /* Bullet feature list inside service card */
    .kd-stype-list {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: 7px;
    }

    .kd-stype-list li {
      font-size: 13px;
      color: var(--kd-text-body);
      display: flex;
      align-items: flex-start;
      gap: 8px;
    }

    .kd-stype-list li::before {
      content: '';
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background-color: var(--kd-primary-light);
      background-image: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 5l2 2 4-4' stroke='%230080FF' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: center;
      flex-shrink: 0;
      margin-top: 2px;
    }

    /* ── Featured Service — GSAP animation section ── */
    .kd-featured-service {
      padding: 88px 0;
    }

    /* The animation canvas — browser mockup centred, features fly in */
    .kd-feat-canvas {
      position: relative;
      width: 100%;
      min-height: 680px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 0;
      padding: 20px 0;
    }

    .kd-feat-browser {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      z-index: 10;
      pointer-events: none;
    }

    .kd-feat-browser svg {
      filter: drop-shadow(0 28px 56px rgba(0,128,255,0.20));
    }

    /* Feature pill rows — same pattern as ERP module rows */
    .kd-feat-row {
      position: relative;
      z-index: 5;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 30px;
      margin-bottom: 16px;
      gap: 12px;
    }

    .kd-feat-spacer {
      flex: 0 0 300px;
      min-width: 300px;
    }

    .kd-feat-pill {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      height: 60px;
      padding: 0 22px;
      border-radius: var(--kd-radius-pill);
      border: 1.5px solid var(--kd-border);
      background-color: var(--kd-white);
      box-shadow: 0 4px 16px rgba(0,0,0,0.05);
      font-size: 14px;
      font-weight: 600;
      color: var(--kd-text-heading);
      white-space: nowrap;
      transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s;
    }

    .kd-feat-pill:hover {
      border-color: var(--kd-primary);
      box-shadow: 0 6px 24px rgba(0,128,255,0.13);
      transform: translateY(-2px);
    }

    .kd-feat-pill-icon {
      width: 32px;
      height: 32px;
      border-radius: 8px;
      background-color: var(--kd-primary-light);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    /* Tint variants */
    .kd-feat-pill-accent {
      border-color: rgba(255,159,28,0.35);
      background-color: var(--kd-accent-light);
    }
    .kd-feat-pill-accent .kd-feat-pill-icon { background-color: rgba(255,159,28,0.15); }

    .kd-feat-pill-navy {
      border-color: rgba(27,20,100,0.20);
      background-color: rgba(27,20,100,0.04);
    }
    .kd-feat-pill-navy .kd-feat-pill-icon { background-color: rgba(27,20,100,0.08); }

    /* Mobile: stack to 2-col grid */
    @media (max-width: 767px) {
      .kd-feat-canvas { min-height: auto; overflow: visible; padding: 0 0 20px; }
      .kd-feat-browser { position: relative; left: auto; top: auto; transform: none; display: flex; justify-content: center; margin: 0 auto 32px; }
      .kd-feat-browser svg { width: 200px; height: auto; }
      .kd-feat-row { flex-wrap: wrap; justify-content: center; padding: 0; gap: 10px; }
      .kd-feat-spacer { display: none; }
      .kd-feat-pill { height: 52px; font-size: 12.5px; padding: 0 16px; flex: 0 1 calc(50% - 10px); justify-content: flex-start; }
      .kd-feat-pill-icon { width: 26px; height: 26px; border-radius: 6px; }
    }

    @media (min-width: 768px) and (max-width: 991px) {
      .kd-feat-canvas { min-height: 560px; }
      .kd-feat-browser svg { width: 200px; height: auto; }
      .kd-feat-spacer { flex: 0 0 230px; min-width: 230px; }
    }

    /* ── Pricing section ── */
    .kd-pricing-section {
      padding: 88px 0;
    }

    .kd-price-card {
      background-color: var(--kd-white);
      border: 1.5px solid var(--kd-border);
      border-radius: var(--kd-radius-lg);
      padding: 36px 30px 30px;
      height: 100%;
      transition: var(--kd-transition);
      position: relative;
    }

    .kd-price-card:hover {
      transform: translateY(-5px);
      box-shadow: var(--kd-shadow-hover);
    }

    /* Popular badge on middle card */
    .kd-price-card-popular {
      border-color: var(--kd-primary);
      box-shadow: 0 0 0 1px var(--kd-primary);
    }

    .kd-popular-badge {
      position: absolute;
      top: -14px;
      left: 50%;
      transform: translateX(-50%);
      background: linear-gradient(90deg, var(--kd-primary), #38a3ff);
      color: var(--kd-white);
      font-size: 11px;
      font-weight: 700;
      padding: 4px 16px;
      border-radius: var(--kd-radius-pill);
      white-space: nowrap;
      letter-spacing: 0.04em;
    }

    .kd-price-tier {
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--kd-text-muted);
      margin-bottom: 8px;
    }

    .kd-price-name {
      font-size: 22px;
      font-weight: 800;
      color: var(--kd-text-heading);
      margin-bottom: 4px;
    }

    .kd-price-desc {
      font-size: 13px;
      color: var(--kd-text-muted);
      margin-bottom: 24px;
      line-height: 1.6;
    }

    .kd-price-amount {
      font-size: 38px;
      font-weight: 800;
      color: var(--kd-primary);
      line-height: 1;
      margin-bottom: 6px;
    }

    .kd-price-amount sup {
      font-size: 20px;
      vertical-align: top;
      margin-top: 8px;
    }

    .kd-price-note {
      font-size: 12px;
      color: var(--kd-text-muted);
      margin-bottom: 28px;
    }

    .kd-price-divider {
      border: none;
      border-top: 1px solid var(--kd-border);
      margin-bottom: 24px;
    }

    .kd-price-features {
      list-style: none;
      padding: 0;
      margin: 0 0 28px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .kd-price-features li {
      font-size: 13.5px;
      color: var(--kd-text-body);
      display: flex;
      align-items: flex-start;
      gap: 9px;
    }

    .kd-price-features li .kd-check {
      color: var(--kd-success);
      font-size: 15px;
      flex-shrink: 0;
      margin-top: 1px;
    }

    .kd-price-features li .kd-dash {
      color: var(--kd-text-muted);
      font-size: 15px;
      flex-shrink: 0;
    }

    .kd-price-features li .kd-feat-text-muted {
      color: var(--kd-text-muted);
    }

    /* ── FAQ section ── */
    .kd-faq-section {
      padding: 88px 0;
    }

    .kd-faq-accordion .accordion-button {
      font-size: 15px;
      font-weight: 600;
      color: var(--kd-text-heading);
      background-color: var(--kd-white);
      padding: 20px 24px;
      border-radius: var(--kd-radius-md) !important;
      box-shadow: none !important;
    }

    .kd-faq-accordion .accordion-button:not(.collapsed) {
      color: var(--kd-primary);
      background-color: var(--kd-primary-light);
    }

    .kd-faq-accordion .accordion-button::after {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%230080FF' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
    }

    .kd-faq-accordion .accordion-item {
      border: 1.5px solid var(--kd-border);
      border-radius: var(--kd-radius-md) !important;
      overflow: hidden;
      margin-bottom: 12px;
      background-color: var(--kd-white);
    }

    .kd-faq-accordion .accordion-body {
      font-size: 14px;
      color: var(--kd-text-body);
      line-height: 1.75;
      padding: 4px 24px 20px;
      background-color: var(--kd-white);
    }


    /* ============================================================
       MOBILE APP PAGE — page-specific styles
    ============================================================ */

    /* ─────────────────────────────────────────
       1. INTERACTIVE PHONE DEMO
       Tab bar switches the screen content.
       Phone stays fixed; only the inner screen
       content fades/slides between tabs.
    ───────────────────────────────────────── */
    .kd-demo-section {
      padding: 96px 0;
      overflow: hidden;
    }

    /* Tab pill bar */
    .kd-demo-tabs {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-bottom: 48px;
    }

    .kd-demo-tab {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 10px 20px;
      border-radius: var(--kd-radius-pill);
      border: 1.5px solid var(--kd-border);
      background-color: var(--kd-white);
      font-size: 13.5px;
      font-weight: 600;
      color: var(--kd-text-heading);
      cursor: pointer;
      transition: var(--kd-transition);
      user-select: none;
    }

    .kd-demo-tab:hover {
      border-color: var(--kd-primary);
      color: var(--kd-primary);
    }

    .kd-demo-tab.active {
      background-color: var(--kd-primary);
      border-color: var(--kd-primary);
      color: var(--kd-white);
      box-shadow: 0 6px 20px rgba(0,128,255,0.30);
    }

    .kd-demo-tab-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background-color: currentColor;
      opacity: 0.5;
      flex-shrink: 0;
    }

    .kd-demo-tab.active .kd-demo-tab-dot {
      background-color: var(--kd-accent);
      opacity: 1;
    }

    /* Phone shell — static wrapper */
    .kd-demo-phone-wrap {
      position: relative;
      width: 280px;
      margin: 0 auto;
      flex-shrink: 0;
    }

    /* Screen content panes — one visible at a time */
    .kd-demo-screen {
      position: absolute;
      top: 54px; left: 14px;
      width: 252px;
      border-radius: 0 0 28px 28px;
      overflow: hidden;
      opacity: 0;
      transform: translateY(10px);
      transition: opacity 0.35s ease, transform 0.35s ease;
      pointer-events: none;
    }

    .kd-demo-screen.active {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
    }

    .kd-demo-screen svg {
      display: block;
      width: 100%;
    }

    /* Description panel — right side */
    .kd-demo-desc {
      padding: 16px 0;
    }

    .kd-demo-desc-panel {
      display: none;
    }

    .kd-demo-desc-panel.active {
      display: block;
      animation: kd-fadein 0.35s ease forwards;
    }

    @keyframes kd-fadein {
      from { opacity: 0; transform: translateY(8px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    .kd-demo-desc h3 {
      font-size: 26px;
      font-weight: 800;
      color: var(--kd-text-heading);
      margin-bottom: 12px;
      line-height: 1.2;
    }

    .kd-demo-desc p {
      font-size: 15px;
      color: var(--kd-text-body);
      line-height: 1.78;
      margin-bottom: 24px;
    }

    /* Feature checklist inside description */
    .kd-demo-checklist {
      list-style: none;
      padding: 0;
      margin: 0 0 28px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .kd-demo-checklist li {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      font-size: 14px;
      color: var(--kd-text-body);
    }

    .kd-demo-checklist li::before {
      content: '';
      flex-shrink: 0;
      width: 20px; height: 20px;
      border-radius: 50%;
      background: var(--kd-primary-light);
      background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 6l3 3 5-5' stroke='%230080FF' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: center;
      margin-top: 1px;
    }

    /* Stat pills below the checklist */
    .kd-demo-stat-row {
      display: flex;
      gap: 14px;
      flex-wrap: wrap;
    }

    .kd-demo-stat-pill {
      background-color: var(--kd-bg-light);
      border: 1.5px solid var(--kd-border);
      border-radius: var(--kd-radius-md);
      padding: 12px 18px;
      text-align: center;
      min-width: 100px;
    }

    .kd-demo-stat-val {
      font-size: 22px;
      font-weight: 800;
      color: var(--kd-primary);
      line-height: 1;
    }

    .kd-demo-stat-label {
      font-size: 11px;
      color: var(--kd-text-muted);
      margin-top: 4px;
    }

    /* ─────────────────────────────────────────
       2. HORIZONTAL FEATURE STRIP
       A side-scrolling reel of feature cards.
       Desktop: snapping scroll.
       Mobile: touch scroll.
       A progress indicator shows position.
    ───────────────────────────────────────── */
    .kd-hscroll-section {
      padding: 96px 0 80px;
      overflow: hidden;
    }

    /* Outer container — clips overflow */
    .kd-hscroll-track-wrap {
      position: relative;
      overflow: hidden;
    }

    /* The scrollable row */
    .kd-hscroll-track {
      display: flex;
      gap: 20px;
      overflow-x: auto;
      padding: 8px 24px 24px;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none; /* Firefox */
    }

    .kd-hscroll-track::-webkit-scrollbar { display: none; }

    /* Individual feature card */
    .kd-hcard {
      flex: 0 0 300px;
      scroll-snap-align: start;
      background-color: var(--kd-white);
      border: 1.5px solid var(--kd-border);
      border-radius: var(--kd-radius-lg);
      padding: 28px 24px;
      transition: var(--kd-transition);
      position: relative;
      overflow: hidden;
    }

    .kd-hcard:hover {
      transform: translateY(-4px);
      box-shadow: var(--kd-shadow-hover);
      border-color: rgba(0,128,255,0.25);
    }

    /* Large background number — decorative */
    .kd-hcard-num {
      position: absolute;
      top: -12px;
      right: 14px;
      font-size: 80px;
      font-weight: 800;
      color: var(--kd-primary-light);
      line-height: 1;
      user-select: none;
      pointer-events: none;
    }

    .kd-hcard-icon {
      width: 52px;
      height: 52px;
      border-radius: var(--kd-radius-md);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 18px;
      position: relative;
      z-index: 1;
    }

    .kd-hcard h3 {
      font-size: 17px;
      font-weight: 700;
      color: var(--kd-text-heading);
      margin-bottom: 10px;
      position: relative;
      z-index: 1;
    }

    .kd-hcard p {
      font-size: 13.5px;
      color: var(--kd-text-body);
      line-height: 1.7;
      margin: 0;
      position: relative;
      z-index: 1;
    }

    /* Scroll progress indicator */
    .kd-hscroll-progress {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      margin-top: 20px;
    }

    .kd-hscroll-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background-color: var(--kd-border);
      transition: all 0.25s ease;
      cursor: pointer;
    }

    .kd-hscroll-dot.active {
      width: 24px;
      border-radius: 4px;
      background-color: var(--kd-primary);
    }

    /* Arrow nav buttons */
    .kd-hscroll-nav {
      display: flex;
      gap: 10px;
      justify-content: flex-end;
      margin-bottom: 16px;
    }

    .kd-hscroll-btn {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      border: 1.5px solid var(--kd-border);
      background-color: var(--kd-white);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: var(--kd-transition);
      color: var(--kd-text-heading);
      font-size: 16px;
    }

    .kd-hscroll-btn:hover {
      background-color: var(--kd-primary);
      border-color: var(--kd-primary);
      color: var(--kd-white);
    }

    /* ─────────────────────────────────────────
       3. COMPARISON TABLE
       App vs WhatsApp vs Paper Register.
       Makes the value prop unmistakably clear.
    ───────────────────────────────────────── */
    .kd-compare-section {
      padding: 96px 0;
    }

    .kd-compare-table-wrap {
      overflow-x: auto;
      border-radius: var(--kd-radius-lg);
      border: 1.5px solid var(--kd-border);
      box-shadow: var(--kd-shadow-card);
    }

    .kd-compare-table {
      width: 100%;
      min-width: 680px;
      border-collapse: collapse;
    }

    /* Header row */
    .kd-compare-table thead tr {
      background-color: var(--kd-bg-light);
    }

    .kd-compare-table th {
      padding: 20px 22px;
      font-size: 13.5px;
      font-weight: 700;
      text-align: left;
      border-bottom: 1.5px solid var(--kd-border);
    }

    /* Highlighted "Our App" column header */
    .kd-compare-table .kd-col-app {
      background-color: var(--kd-primary);
      color: var(--kd-white);
      text-align: center;
    }

    .kd-compare-table .kd-col-app-badge {
      display: inline-block;
      background-color: var(--kd-accent);
      color: var(--kd-white);
      font-size: 9px;
      font-weight: 700;
      padding: 2px 7px;
      border-radius: var(--kd-radius-pill);
      margin-left: 6px;
      vertical-align: middle;
      letter-spacing: 0.04em;
    }

    .kd-compare-table .kd-col-others {
      color: var(--kd-text-muted);
      text-align: center;
    }

    /* Body rows */
    .kd-compare-table tbody tr {
      border-bottom: 1px solid var(--kd-border);
      transition: background-color 0.15s ease;
    }

    .kd-compare-table tbody tr:last-child {
      border-bottom: none;
    }

    .kd-compare-table tbody tr:hover {
      background-color: var(--kd-bg-light);
    }

    .kd-compare-table td {
      padding: 16px 22px;
      font-size: 13.5px;
      color: var(--kd-text-body);
      vertical-align: middle;
    }

    /* Feature label cell */
    .kd-compare-table .kd-td-feature {
      font-weight: 600;
      color: var(--kd-text-heading);
      border-right: 1px solid var(--kd-border);
    }

    /* App column cells — soft blue tint */
    .kd-compare-table .kd-td-app {
      background-color: var(--kd-primary-light);
      text-align: center;
      font-weight: 600;
      color: var(--kd-primary);
      border-left: 1.5px solid rgba(0,128,255,0.15);
      border-right: 1.5px solid rgba(0,128,255,0.15);
    }

    .kd-compare-table .kd-td-others {
      text-align: center;
      color: var(--kd-text-muted);
    }

    /* Yes / No / Partial icons */
    .kd-cmp-yes   { color: var(--kd-success); font-size: 17px; }
    .kd-cmp-no    { color: var(--kd-danger);  font-size: 17px; }
    .kd-cmp-part  { color: var(--kd-accent);  font-size: 17px; }

    /* ─────────────────────────────────────────
       4. APP DOWNLOAD STRIP
       Animated CTA strip with store badges.
    ───────────────────────────────────────── */
    .kd-app-download-strip {
      padding: 64px 0;
      background: linear-gradient(130deg, var(--kd-secondary) 0%, #0d2460 60%, #0a3272 100%);
      position: relative;
      overflow: hidden;
    }

    .kd-app-download-strip::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image: radial-gradient(rgba(255,255,255,0.03) 1px, transparent 1px);
      background-size: 24px 24px;
      pointer-events: none;
    }

    .kd-store-btn {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      background-color: rgba(255,255,255,0.10);
      border: 1.5px solid rgba(255,255,255,0.20);
      border-radius: var(--kd-radius-md);
      padding: 12px 22px;
      transition: var(--kd-transition);
      text-decoration: none;
    }

    .kd-store-btn:hover {
      background-color: rgba(255,255,255,0.18);
      border-color: rgba(255,255,255,0.40);
      transform: translateY(-2px);
    }

    .kd-store-label-sub {
      font-size: 10px;
      color: rgba(255,255,255,0.60);
      letter-spacing: 0.04em;
      display: block;
    }

    .kd-store-label-main {
      font-size: 17px;
      font-weight: 700;
      color: var(--kd-white);
      display: block;
      line-height: 1.1;
    }

    /* ─────────────────────────────────────────
       5. FLOATING PHONE HERO
       Used in page banner area to override
       the standard banner right-side area.
    ───────────────────────────────────────── */
    .kd-app-hero-phones {
      position: relative;
      height: 340px;
      display: flex;
      align-items: flex-end;
      justify-content: center;
    }

    /* Back phone — slightly offset */
    .kd-app-hero-phone-back {
      position: absolute;
      left: 50%;
      bottom: 0;
      transform: translateX(-70%) rotate(-12deg);
      z-index: 1;
      filter: drop-shadow(0 20px 40px rgba(0,0,0,0.35));
      opacity: 0.85;
    }

    /* Front phone — centre */
    .kd-app-hero-phone-front {
      position: relative;
      z-index: 2;
      filter: drop-shadow(0 24px 48px rgba(0,128,255,0.35));
      transform: translateX(20%);
    }





    /* ===== SCHOOL ERP PAGE — page-specific ===== */

    /* Stat band */
    .kd-erp-stat-band { padding:64px 0; background:var(--kd-secondary); position:relative; overflow:hidden; }
    .kd-erp-stat-band::before { content:''; position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,0.03) 1px,transparent 1px); background-size:28px 28px; pointer-events:none; }
    .kd-erp-stat-item { text-align:center; padding:16px; position:relative; }
    .kd-erp-stat-item:not(:last-child)::after { content:''; position:absolute; right:0; top:20%; bottom:20%; width:1px; background:rgba(255,255,255,0.08); }
    .kd-erp-stat-num { font-size:42px; font-weight:800; color:var(--kd-white); line-height:1; }
    .kd-erp-stat-num sup { font-size:20px; color:var(--kd-accent); }
    .kd-erp-stat-label { font-size:13px; color:rgba(255,255,255,0.4); margin-top:8px; font-weight:500; }

    /* Module deep-dive cards */
    .kd-modules-section { padding:96px 0; }
    .kd-module-card { background:var(--kd-white); border:1.5px solid var(--kd-border); border-radius:var(--kd-radius-lg); overflow:hidden; height:100%; transition:var(--kd-transition); }
    .kd-module-card:hover { transform:translateY(-4px); box-shadow:var(--kd-shadow-hover); border-color:rgba(0,128,255,0.22); }
    .kd-module-screen { width:100%; height:200px; overflow:hidden; background:#0a1830; display:flex; align-items:center; justify-content:center; }
    .kd-module-screen svg { width:100%; height:100%; }
    .kd-module-body { padding:22px 20px; }
    .kd-module-tag { font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; padding:3px 10px; border-radius:var(--kd-radius-pill); margin-bottom:10px; display:inline-block; }
    .kd-module-card h3 { font-size:17px; font-weight:700; color:var(--kd-text-heading); margin-bottom:8px; }
    .kd-module-card p { font-size:13px; color:var(--kd-text-body); line-height:1.7; margin-bottom:14px; }
    .kd-module-features { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:6px; }
    .kd-module-features li { font-size:12.5px; color:var(--kd-text-body); display:flex; align-items:flex-start; gap:7px; }
    .kd-module-features li::before { content:"→"; color:var(--kd-primary); font-weight:700; flex-shrink:0; font-size:12px; }

    /* ERP Live Demo Tabs */
    .kd-erp-demo-section { padding:96px 0; }
    .kd-erp-demo-tabs { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:36px; }
    .kd-erp-demo-tab { display:inline-flex; align-items:center; gap:8px; padding:10px 20px; border-radius:var(--kd-radius-pill); border:1.5px solid var(--kd-border); background:var(--kd-white); font-size:13.5px; font-weight:600; color:var(--kd-text-heading); cursor:pointer; transition:var(--kd-transition); user-select:none; }
    .kd-erp-demo-tab:hover { border-color:var(--kd-primary); color:var(--kd-primary); }
    .kd-erp-demo-tab.active { background:var(--kd-primary); border-color:var(--kd-primary); color:white; box-shadow:0 6px 20px rgba(0,128,255,0.28); }
    .kd-erp-browser-shell { background:#0c1a40; border-radius:var(--kd-radius-lg); overflow:hidden; box-shadow:0 24px 64px rgba(0,0,0,0.20); }
    .kd-erp-browser-bar { background:#04080f; padding:12px 18px; display:flex; align-items:center; gap:12px; border-bottom:1px solid rgba(255,255,255,0.06); }
    .kd-erp-browser-dots { display:flex; gap:6px; }
    .kd-erp-browser-dots span { width:11px; height:11px; border-radius:50%; }
    .kd-erp-browser-url { flex:1; background:rgba(255,255,255,0.07); border-radius:6px; padding:5px 12px; font-size:11.5px; color:rgba(255,255,255,0.3); font-family:monospace; }
    .kd-erp-screen { width:100%; display:none; }
    .kd-erp-screen.active { display:block; animation:kd-fadein 0.3s ease; }
    .kd-erp-screen svg { display:block; width:100%; }
    @keyframes kd-fadein { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }

    /* Before / After ERP */
    .kd-ba-erp-section { padding:96px 0; }
    .kd-ba-erp-grid { display:grid; grid-template-columns:1fr 60px 1fr; gap:0; align-items:start; }
    .kd-ba-erp-header { text-align:center; padding:14px 20px; border-radius:var(--kd-radius-md) var(--kd-radius-md) 0 0; font-size:13px; font-weight:700; }
    .kd-ba-erp-header-bad { background:rgba(255,95,87,0.10); color:#FF5F57; border:1.5px solid rgba(255,95,87,0.2); border-bottom:none; }
    .kd-ba-erp-header-good { background:rgba(40,200,64,0.10); color:#28C840; border:1.5px solid rgba(40,200,64,0.2); border-bottom:none; }
    .kd-ba-erp-vs { display:flex; align-items:center; justify-content:center; padding-top:52px; }
    .kd-ba-erp-vs-badge { background:var(--kd-secondary); color:white; font-size:11px; font-weight:800; padding:6px 10px; border-radius:8px; letter-spacing:.04em; }
    .kd-ba-erp-rows-bad, .kd-ba-erp-rows-good { border:1.5px solid var(--kd-border); border-radius:0 0 var(--kd-radius-md) var(--kd-radius-md); }
    .kd-ba-erp-rows-bad { border-color:rgba(255,95,87,0.18); }
    .kd-ba-erp-rows-good { border-color:rgba(40,200,64,0.18); }
    .kd-ba-erp-row { display:flex; align-items:flex-start; gap:12px; padding:16px 18px; border-bottom:1px solid var(--kd-border); }
    .kd-ba-erp-rows-bad .kd-ba-erp-row { border-color:rgba(255,95,87,0.08); }
    .kd-ba-erp-rows-good .kd-ba-erp-row { border-color:rgba(40,200,64,0.08); }
    .kd-ba-erp-row:last-child { border-bottom:none; }
    .kd-ba-erp-row-icon { font-size:20px; flex-shrink:0; margin-top:1px; }
    .kd-ba-erp-row-topic { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; margin-bottom:3px; }
    .kd-ba-erp-rows-bad .kd-ba-erp-row-topic { color:#FF5F57; }
    .kd-ba-erp-rows-good .kd-ba-erp-row-topic { color:#28C840; }
    .kd-ba-erp-row-text { font-size:13px; color:var(--kd-text-body); line-height:1.6; }
    @media (max-width:767px) {
      .kd-ba-erp-grid { grid-template-columns:1fr; gap:24px; }
      .kd-ba-erp-vs { padding:0; }
    }

    /* All modules section */
    .kd-erp-modules-full { padding:96px 0; }

    /* Implementation packages */
    .kd-erp-packages-section { padding:96px 0; }
    .kd-erp-pkg-card { background:var(--kd-white); border:1.5px solid var(--kd-border); border-radius:var(--kd-radius-lg); padding:32px 26px 28px; height:100%; display:flex; flex-direction:column; transition:var(--kd-transition); position:relative; }
    .kd-erp-pkg-card:hover { transform:translateY(-5px); box-shadow:var(--kd-shadow-hover); }
    .kd-erp-pkg-popular { border-color:var(--kd-primary); box-shadow:0 0 0 1px var(--kd-primary); }
    .kd-erp-pkg-badge { position:absolute; top:-14px; left:50%; transform:translateX(-50%); background:linear-gradient(90deg,var(--kd-primary),#38a3ff); color:white; font-size:11px; font-weight:700; padding:4px 16px; border-radius:var(--kd-radius-pill); white-space:nowrap; }
    .kd-erp-pkg-tier { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--kd-text-muted); margin-bottom:5px; }
    .kd-erp-pkg-name { font-size:22px; font-weight:800; color:var(--kd-text-heading); margin-bottom:6px; }
    .kd-erp-pkg-desc { font-size:13px; color:var(--kd-text-muted); margin-bottom:20px; line-height:1.55; }
    .kd-erp-pkg-price { font-size:14px; color:var(--kd-text-muted); margin-bottom:4px; }
    .kd-erp-pkg-price strong { font-size:28px; font-weight:800; color:var(--kd-primary); }
    .kd-erp-pkg-note { font-size:11.5px; color:var(--kd-text-muted); margin-bottom:24px; }
    .kd-erp-pkg-modules { background:var(--kd-bg-light); border-radius:var(--kd-radius-md); padding:14px 16px; margin-bottom:20px; }
    .kd-erp-pkg-modules-label { font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--kd-text-muted); margin-bottom:8px; }
    .kd-erp-pkg-module-tags { display:flex; flex-wrap:wrap; gap:6px; }
    .kd-erp-pkg-module-tag { font-size:11px; font-weight:600; padding:3px 9px; border-radius:6px; background:white; border:1px solid var(--kd-border); color:var(--kd-text-heading); }
    .kd-erp-pkg-features { list-style:none; padding:0; margin:0 0 auto; display:flex; flex-direction:column; gap:8px; padding-bottom:24px; }
    .kd-erp-pkg-features li { font-size:13px; color:var(--kd-text-body); display:flex; align-items:flex-start; gap:8px; }
    .kd-pkg-check { color:var(--kd-success); font-size:14px; flex-shrink:0; margin-top:1px; }
    .kd-pkg-dash { color:var(--kd-text-muted); font-size:14px; flex-shrink:0; }
    .kd-pkg-muted { color:var(--kd-text-muted); }

    /* FAQ */
    .kd-faq-section { padding:96px 0; }
    .kd-faq-accordion .accordion-button { font-size:15px; font-weight:600; color:var(--kd-text-heading); background:var(--kd-white); padding:20px 24px; border-radius:var(--kd-radius-md) !important; box-shadow:none !important; }
    .kd-faq-accordion .accordion-button:not(.collapsed) { color:var(--kd-primary); background:var(--kd-primary-light); }
    .kd-faq-accordion .accordion-button::after { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%230080FF' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E"); }
    .kd-faq-accordion .accordion-item { border:1.5px solid var(--kd-border); border-radius:var(--kd-radius-md) !important; overflow:hidden; margin-bottom:12px; background:var(--kd-white); }
    .kd-faq-accordion .accordion-body { font-size:14px; color:var(--kd-text-body); line-height:1.78; padding:4px 24px 20px; }
  
    /* ─── IMPLEMENTATION TIMELINE ─── */
    .kd-impl-section { padding: 96px 0; overflow: hidden; }

    .kd-impl-track-wrap {
      position: relative;
      margin-top: 56px;
    }

    /* Horizontal progress line */
    .kd-impl-track-wrap::before {
      content: '';
      position: absolute;
      top: 48px;
      left: 0; right: 0;
      height: 3px;
      background: linear-gradient(90deg, var(--kd-primary), var(--kd-accent));
      border-radius: 2px;
      z-index: 0;
    }

    .kd-impl-steps {
      display: grid;
      grid-template-columns: repeat(8, 1fr);
      gap: 0;
      position: relative;
      z-index: 1;
    }

    .kd-impl-step {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      padding: 0 8px;
      cursor: default;
    }

    /* Circle node on the line */
    .kd-impl-node {
      width: 36px; height: 36px;
      border-radius: 50%;
      border: 3px solid var(--kd-primary);
      background: var(--kd-white);
      display: flex; align-items: center; justify-content: center;
      font-size: 13px; font-weight: 800;
      color: var(--kd-primary);
      margin-bottom: 16px;
      position: relative; z-index: 2;
      transition: var(--kd-transition);
      flex-shrink: 0;
    }

    .kd-impl-step:hover .kd-impl-node {
      background: var(--kd-primary);
      color: white;
      transform: scale(1.15);
      box-shadow: 0 0 0 6px rgba(0,128,255,0.15);
    }

    /* Milestone card below node */
    .kd-impl-card {
      background: var(--kd-white);
      border: 1.5px solid var(--kd-border);
      border-radius: var(--kd-radius-md);
      padding: 16px 12px;
      width: 100%;
      transition: var(--kd-transition);
      min-height: 120px;
    }

    .kd-impl-step:hover .kd-impl-card {
      border-color: rgba(0,128,255,0.25);
      box-shadow: 0 8px 24px rgba(0,128,255,0.10);
      transform: translateY(-4px);
    }

    .kd-impl-week {
      font-size: 9.5px; font-weight: 700;
      text-transform: uppercase; letter-spacing: .06em;
      color: var(--kd-primary); margin-bottom: 5px;
    }

    .kd-impl-title {
      font-size: 12.5px; font-weight: 700;
      color: var(--kd-text-heading); margin-bottom: 6px; line-height: 1.3;
    }

    .kd-impl-desc {
      font-size: 11px; color: var(--kd-text-muted);
      line-height: 1.55;
    }

    /* Colour variants for nodes */
    .kd-impl-step-done .kd-impl-node  { background: var(--kd-primary); color: white; border-color: var(--kd-primary); }
    .kd-impl-step-live .kd-impl-node  { background: var(--kd-accent); color: white; border-color: var(--kd-accent); }

    .kd-impl-step-done .kd-impl-card  { background: var(--kd-primary-light); border-color: rgba(0,128,255,0.18); }
    .kd-impl-step-live .kd-impl-card  { background: var(--kd-accent-light); border-color: rgba(255,159,28,0.25); }
    .kd-impl-step-live .kd-impl-week  { color: var(--kd-accent); }

    @media (max-width: 991px) {
      .kd-impl-steps { grid-template-columns: repeat(4, 1fr); row-gap: 48px; }
      .kd-impl-track-wrap::before { display: none; }
    }

    @media (max-width: 575px) {
      .kd-impl-steps { grid-template-columns: repeat(2, 1fr); row-gap: 24px; }
    }


    /* ─── ROLE BASED ACCESS TABS ─── */
    .kd-roles-section { padding: 96px 0; }

    .kd-role-tabs {
      display: flex; gap: 0;
      border: 1.5px solid var(--kd-border);
      border-radius: var(--kd-radius-lg);
      overflow: hidden;
      margin-bottom: 40px;
    }

    .kd-role-tab {
      flex: 1; padding: 16px 12px;
      text-align: center; cursor: pointer;
      border-right: 1px solid var(--kd-border);
      background: var(--kd-white);
      transition: var(--kd-transition); user-select: none;
    }

    .kd-role-tab:last-child { border-right: none; }

    .kd-role-tab:hover { background: var(--kd-bg-light); }

    .kd-role-tab.active {
      background: var(--kd-primary);
      color: white;
    }

    .kd-role-tab-icon { font-size: 22px; margin-bottom: 6px; display: block; }

    .kd-role-tab-label {
      font-size: 13px; font-weight: 700;
      color: var(--kd-text-heading);
    }

    .kd-role-tab.active .kd-role-tab-label { color: white; }

    .kd-role-tab-sub {
      font-size: 11px; color: var(--kd-text-muted);
      margin-top: 2px;
    }

    .kd-role-tab.active .kd-role-tab-sub { color: rgba(255,255,255,0.65); }

    /* Role panel */
    .kd-role-panel { display: none; }
    .kd-role-panel.active {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 32px;
      align-items: start;
      animation: kd-fadein 0.3s ease;
    }

    @keyframes kd-fadein {
      from { opacity:0; transform:translateY(8px); }
      to   { opacity:1; transform:translateY(0); }
    }

    .kd-role-info h3 {
      font-size: 24px; font-weight: 800;
      color: var(--kd-text-heading); margin-bottom: 10px;
    }

    .kd-role-info p {
      font-size: 14px; color: var(--kd-text-body);
      line-height: 1.75; margin-bottom: 24px;
    }

    /* Permission list */
    .kd-role-perms {
      display: flex; flex-direction: column; gap: 10px;
    }

    .kd-role-perm {
      display: flex; align-items: center; gap: 12px;
      padding: 12px 16px;
      background: var(--kd-white);
      border: 1.5px solid var(--kd-border);
      border-radius: var(--kd-radius-md);
      font-size: 13.5px; color: var(--kd-text-body);
      transition: var(--kd-transition);
    }

    .kd-role-perm:hover {
      border-color: rgba(0,128,255,0.2);
      box-shadow: var(--kd-shadow-card);
    }

    .kd-role-perm-icon {
      font-size: 18px; flex-shrink: 0;
    }

    .kd-role-perm-badge {
      margin-left: auto; flex-shrink: 0;
      font-size: 10px; font-weight: 700;
      padding: 2px 8px; border-radius: var(--kd-radius-pill);
    }

    .kd-perm-full    { background: rgba(40,200,64,0.12); color: #28C840; }
    .kd-perm-view    { background: var(--kd-primary-light); color: var(--kd-primary); }
    .kd-perm-limited { background: var(--kd-accent-light); color: #c17800; }

    /* Role mockup card */
    .kd-role-mockup {
      background: var(--kd-secondary);
      border-radius: var(--kd-radius-lg);
      overflow: hidden;
      box-shadow: 0 20px 48px rgba(0,0,0,0.18);
    }

    .kd-role-mockup-bar {
      background: rgba(0,0,0,0.25);
      padding: 10px 16px;
      display: flex; align-items: center; gap: 10px;
      border-bottom: 1px solid rgba(255,255,255,0.06);
    }

    .kd-role-mockup-dots { display:flex; gap:5px; }
    .kd-role-mockup-dots span { width:10px; height:10px; border-radius:50%; }

    .kd-role-mockup-title {
      font-size: 11px; font-weight: 600;
      color: rgba(255,255,255,0.35);
      flex: 1; text-align: center;
    }

    .kd-role-mockup-body { padding: 20px; }

    @media (max-width: 767px) {
      .kd-role-panel.active { grid-template-columns: 1fr; }
      .kd-role-tabs { flex-wrap: wrap; }
      .kd-role-tab { flex: 0 0 50%; border-bottom: 1px solid var(--kd-border); }
    }


    /* ─── SCHOOL TYPES TICKER ─── */
    .kd-school-ticker-section {
      padding: 56px 0;
      background: var(--kd-secondary);
      overflow: hidden;
      position: relative;
    }

    .kd-school-ticker-section::before,
    .kd-school-ticker-section::after {
      content: '';
      position: absolute; top: 0; bottom: 0; width: 140px; z-index: 2; pointer-events: none;
    }

    .kd-school-ticker-section::before { left: 0; background: linear-gradient(to right, var(--kd-secondary), transparent); }
    .kd-school-ticker-section::after  { right: 0; background: linear-gradient(to left, var(--kd-secondary), transparent); }

    .kd-school-ticker-label {
      text-align: center;
      font-size: 12px; font-weight: 700;
      text-transform: uppercase; letter-spacing: .08em;
      color: rgba(255,255,255,0.3);
      margin-bottom: 20px;
    }

    .kd-school-track {
      display: flex; gap: 16px;
      animation: kd-ticker-scroll 36s linear infinite;
      width: max-content;
    }

    .kd-school-track:hover { animation-play-state: paused; }

    @keyframes kd-ticker-scroll {
      from { transform: translateX(0); }
      to   { transform: translateX(-50%); }
    }

    .kd-school-pill {
      display: inline-flex; align-items: center; gap: 10px;
      background: rgba(255,255,255,0.07);
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: var(--kd-radius-pill);
      padding: 10px 20px; white-space: nowrap; flex-shrink: 0;
    }

    .kd-school-pill-icon { font-size: 18px; }

    .kd-school-pill-name {
      font-size: 13px; font-weight: 700;
      color: rgba(255,255,255,0.75);
    }

    .kd-school-pill-board {
      font-size: 10.5px; font-weight: 700;
      padding: 2px 8px; border-radius: var(--kd-radius-pill);
    }

    .kd-board-cbse   { background: rgba(0,128,255,0.2); color: #61a8ff; }
    .kd-board-icse   { background: rgba(255,159,28,0.2); color: #FF9F1C; }
    .kd-board-ib     { background: rgba(40,200,64,0.2); color: #28C840; }
    .kd-board-ssc    { background: rgba(124,58,237,0.2); color: #a78bfa; }
    .kd-board-igcse  { background: rgba(8,145,178,0.2); color: #67e8f9; }
    .kd-board-play   { background: rgba(255,95,87,0.2); color: #ff8b86; }


    /* ─── WHY NOT GENERIC ERP ─── */
    .kd-why-erp-section { padding: 96px 0; }

    .kd-erp-compare-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      margin-top: 48px;
    }

    .kd-erp-compare-card {
      border-radius: var(--kd-radius-lg);
      overflow: hidden;
      border: 1.5px solid var(--kd-border);
      transition: var(--kd-transition);
    }

    .kd-erp-compare-card:hover {
      transform: translateY(-4px);
      box-shadow: var(--kd-shadow-hover);
    }

    .kd-erp-compare-top {
      padding: 28px 24px 22px;
      background: #fff8f8;
      border-bottom: 1px solid rgba(255,95,87,0.10);
    }

    .kd-erp-compare-top-label {
      font-size: 10px; font-weight: 700;
      text-transform: uppercase; letter-spacing: .06em;
      color: #FF5F57; margin-bottom: 8px;
    }

    .kd-erp-compare-icon { font-size: 32px; margin-bottom: 12px; display: block; }

    .kd-erp-compare-problem {
      font-size: 15px; font-weight: 700;
      color: var(--kd-text-heading); margin-bottom: 8px;
    }

    .kd-erp-compare-problem-desc {
      font-size: 13px; color: var(--kd-text-muted);
      line-height: 1.65; margin: 0;
    }

    .kd-erp-compare-bottom {
      padding: 22px 24px;
      background: #f6fff8;
      border-top: 1px solid rgba(40,200,64,0.10);
    }

    .kd-erp-compare-bottom-label {
      font-size: 10px; font-weight: 700;
      text-transform: uppercase; letter-spacing: .06em;
      color: #28C840; margin-bottom: 8px;
    }

    .kd-erp-compare-solution {
      font-size: 15px; font-weight: 700;
      color: var(--kd-text-heading); margin-bottom: 8px;
    }

    .kd-erp-compare-solution-desc {
      font-size: 13px; color: var(--kd-text-body);
      line-height: 1.65; margin: 0;
    }

    @media (max-width: 991px) { .kd-erp-compare-grid { grid-template-columns: 1fr 1fr; } }
    @media (max-width: 575px) { .kd-erp-compare-grid { grid-template-columns: 1fr; } }




    /* ============================================================
       SEO SERVICE PAGE — page-specific styles
    ============================================================ */

    /* ──────────────────────────────────────────
       NEW #1: KEYWORD RANKINGS TICKER
       Continuous marquee of keyword pills with
       Google-style position badges.
       Never used anywhere on the site before.
    ────────────────────────────────────────── */
    .kd-ticker-section {
      background-color: var(--kd-secondary);
      padding: 22px 0;
      overflow: hidden;
      position: relative;
    }

    /* Fade masks on left and right edges */
    .kd-ticker-section::before,
    .kd-ticker-section::after {
      content: '';
      position: absolute;
      top: 0; bottom: 0;
      width: 120px;
      z-index: 2;
      pointer-events: none;
    }

    .kd-ticker-section::before {
      left: 0;
      background: linear-gradient(to right, var(--kd-secondary), transparent);
    }

    .kd-ticker-section::after {
      right: 0;
      background: linear-gradient(to left, var(--kd-secondary), transparent);
    }

    /* The scrolling track */
    .kd-ticker-track {
      display: flex;
      gap: 20px;
      animation: kd-ticker-scroll 32s linear infinite;
      width: max-content;
    }

    /* Pause on hover */
    .kd-ticker-track:hover {
      animation-play-state: paused;
    }

    @keyframes kd-ticker-scroll {
      from { transform: translateX(0); }
      to   { transform: translateX(-50%); }
    }

    /* Individual keyword pill */
    .kd-ticker-pill {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: rgba(255,255,255,0.07);
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: var(--kd-radius-pill);
      padding: 8px 18px;
      white-space: nowrap;
      flex-shrink: 0;
    }

    .kd-ticker-keyword {
      font-size: 13px;
      font-weight: 600;
      color: rgba(255,255,255,0.75);
    }

    /* Position badge — #1, #2, #3 etc */
    .kd-ticker-pos {
      font-size: 11px;
      font-weight: 800;
      padding: 2px 8px;
      border-radius: var(--kd-radius-pill);
      letter-spacing: 0.02em;
    }

    .kd-pos-1 { background: #28C840; color: white; }
    .kd-pos-2 { background: var(--kd-primary); color: white; }
    .kd-pos-3 { background: var(--kd-accent); color: white; }
    .kd-pos-top { background: rgba(40,200,64,0.2); color: #28C840; border: 1px solid rgba(40,200,64,0.3); }


    /* ──────────────────────────────────────────
       NEW #2: BEFORE / AFTER SEO REVEAL
       A drag divider slider that reveals a
       "Before" Google SERP vs an "After" SERP.
       Pure CSS clip + JS drag = no library.
    ────────────────────────────────────────── */
    .kd-ba-section {
      padding: 96px 0;
    }

    /* The reveal stage */
    .kd-ba-stage {
      position: relative;
      width: 100%;
      max-width: 820px;
      margin: 0 auto;
      border-radius: var(--kd-radius-lg);
      overflow: hidden;
      box-shadow: 0 20px 60px rgba(0,0,0,0.15);
      user-select: none;
      cursor: ew-resize;
    }

    /* "After" image fills the stage */
    .kd-ba-after {
      display: block;
      width: 100%;
    }

    /* "Before" image clips from the left */
    .kd-ba-before-wrap {
      position: absolute;
      top: 0; left: 0; bottom: 0;
      width: 40%; /* JS updates this */
      overflow: hidden;
    }

    .kd-ba-before {
      display: block;
      width: 100%;   /* JS overrides with exact px on load and resize */
      max-width: none;
      flex-shrink: 0;
    }

    /* Drag handle line */
    .kd-ba-handle {
      position: absolute;
      top: 0; bottom: 0;
      left: 40%; /* JS updates */
      width: 3px;
      background: var(--kd-white);
      box-shadow: 0 0 12px rgba(0,0,0,0.4);
      z-index: 10;
      transform: translateX(-50%);
    }

    /* Circle on the handle */
    .kd-ba-handle::after {
      content: '⟷';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: var(--kd-white);
      color: var(--kd-primary);
      font-size: 18px;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 16px rgba(0,0,0,0.25);
      line-height: 44px;
      text-align: center;
    }

    /* Labels */
    .kd-ba-label {
      position: absolute;
      bottom: 18px;
      padding: 5px 14px;
      border-radius: var(--kd-radius-pill);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      pointer-events: none;
    }

    .kd-ba-label-before {
      left: 18px;
      background: rgba(255,95,87,0.9);
      color: white;
    }

    .kd-ba-label-after {
      right: 18px;
      background: rgba(40,200,64,0.9);
      color: white;
    }

    /* Hint text below the slider */
    .kd-ba-hint {
      text-align: center;
      margin-top: 14px;
      font-size: 13px;
      color: var(--kd-text-muted);
    }

    .kd-ba-hint i { color: var(--kd-primary); }

    /* .kd-ba-before width is set by JS — no static override needed */


    /* ──────────────────────────────────────────
       NEW #3: SEO DASHBOARD METRICS STRIP
       Styled like a live analytics dashboard —
       makes the results feel real and specific.
    ────────────────────────────────────────── */
    .kd-dashboard-section {
      padding: 96px 0;
    }

    /* Dark "dashboard" card that houses the metrics */
    .kd-dashboard-card {
      background: var(--kd-secondary);
      border-radius: var(--kd-radius-lg);
      padding: 40px;
      position: relative;
      overflow: hidden;
    }

    .kd-dashboard-card::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image: radial-gradient(rgba(255,255,255,0.03) 1px, transparent 1px);
      background-size: 24px 24px;
      pointer-events: none;
    }

    /* Top bar of the "app" */
    .kd-dashboard-topbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 32px;
      position: relative;
      z-index: 1;
    }

    .kd-dashboard-title {
      font-size: 14px;
      font-weight: 700;
      color: rgba(255,255,255,0.7);
    }

    .kd-dashboard-period {
      font-size: 12px;
      font-weight: 600;
      color: rgba(255,255,255,0.35);
      background: rgba(255,255,255,0.07);
      padding: 4px 12px;
      border-radius: var(--kd-radius-pill);
    }

    /* Metric grid inside the dashboard */
    .kd-dashboard-metrics {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
      position: relative;
      z-index: 1;
      margin-bottom: 32px;
    }

    .kd-metric-cell {
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.09);
      border-radius: var(--kd-radius-md);
      padding: 20px 16px;
      text-align: center;
    }

    .kd-metric-val {
      font-size: 32px;
      font-weight: 800;
      color: var(--kd-white);
      line-height: 1;
      margin-bottom: 6px;
    }

    .kd-metric-val sup { font-size: 16px; color: var(--kd-accent); }

    .kd-metric-change {
      font-size: 11px;
      font-weight: 700;
      padding: 2px 8px;
      border-radius: var(--kd-radius-pill);
      display: inline-block;
      margin-bottom: 6px;
    }

    .kd-metric-change-up   { background: rgba(40,200,64,0.2); color: #28C840; }
    .kd-metric-change-down { background: rgba(255,95,87,0.2); color: #FF5F57; }

    .kd-metric-label {
      font-size: 11.5px;
      color: rgba(255,255,255,0.38);
      font-weight: 500;
    }

    /* Mini chart inside the dashboard */
    .kd-dashboard-chart {
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.07);
      border-radius: var(--kd-radius-md);
      padding: 20px;
      position: relative;
      z-index: 1;
    }

    .kd-dashboard-chart-label {
      font-size: 12px;
      font-weight: 600;
      color: rgba(255,255,255,0.35);
      margin-bottom: 16px;
    }

    /* Keyword rank table inside the dashboard */
    .kd-rank-table {
      width: 100%;
      border-collapse: collapse;
      position: relative;
      z-index: 1;
    }

    .kd-rank-table th {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: rgba(255,255,255,0.30);
      padding: 0 0 12px;
      text-align: left;
    }

    .kd-rank-table td {
      font-size: 13px;
      color: rgba(255,255,255,0.65);
      padding: 10px 0;
      border-top: 1px solid rgba(255,255,255,0.06);
    }

    .kd-rank-table .kd-rank-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 28px;
      border-radius: 8px;
      font-size: 12px;
      font-weight: 800;
    }

    .kd-rank-1  { background: rgba(40,200,64,0.25); color: #28C840; }
    .kd-rank-2  { background: rgba(0,128,255,0.25); color: #0080FF; }
    .kd-rank-3  { background: rgba(255,159,28,0.25); color: #FF9F1C; }
    .kd-rank-hi { background: rgba(40,200,64,0.15); color: #28C840; font-size: 11px; }

    .kd-rank-trend-up   { color: #28C840; font-size: 12px; font-weight: 700; }
    .kd-rank-trend-down { color: #FF5F57; font-size: 12px; }

    @media (max-width: 767px) {
      .kd-dashboard-metrics { grid-template-columns: repeat(2, 1fr); }
      .kd-dashboard-card { padding: 24px 16px; }
    }


    /* ──────────────────────────────────────────
       SEO SERVICES GRID — what we actually do
    ────────────────────────────────────────── */
    .kd-seo-services-section {
      padding: 96px 0;
    }

    .kd-seo-card {
      background: var(--kd-white);
      border: 1.5px solid var(--kd-border);
      border-radius: var(--kd-radius-lg);
      padding: 30px 26px 26px;
      height: 100%;
      transition: var(--kd-transition);
      position: relative;
      overflow: hidden;
    }

    .kd-seo-card::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 3px;
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.3s ease;
    }

    .kd-seo-card-green::before  { background: var(--kd-success); }
    .kd-seo-card-blue::before   { background: var(--kd-primary); }
    .kd-seo-card-amber::before  { background: var(--kd-accent); }
    .kd-seo-card-navy::before   { background: var(--kd-secondary); }
    .kd-seo-card-purple::before { background: #7c3aed; }
    .kd-seo-card-teal::before   { background: #0891b2; }

    .kd-seo-card:hover {
      transform: translateY(-5px);
      box-shadow: var(--kd-shadow-hover);
      border-color: rgba(0,128,255,0.22);
    }

    .kd-seo-card:hover::before { transform: scaleX(1); }

    .kd-seo-icon {
      width: 54px;
      height: 54px;
      border-radius: var(--kd-radius-md);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 18px;
    }

    .kd-seo-card h3 {
      font-size: 17px;
      font-weight: 700;
      color: var(--kd-text-heading);
      margin-bottom: 10px;
    }

    .kd-seo-card p {
      font-size: 13.5px;
      color: var(--kd-text-body);
      line-height: 1.7;
      margin-bottom: 16px;
    }

    .kd-seo-deliverables {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: 7px;
    }

    .kd-seo-deliverables li {
      font-size: 12.5px;
      color: var(--kd-text-body);
      display: flex;
      align-items: flex-start;
      gap: 7px;
    }

    .kd-seo-deliverables li::before {
      content: '→';
      color: var(--kd-primary);
      font-weight: 700;
      flex-shrink: 0;
      margin-top: 1px;
    }


    /* ──────────────────────────────────────────
       RESULTS PROOF STRIP
       Stat cards on the brand pattern bg
    ────────────────────────────────────────── */
    .kd-seo-results-band {
      padding: 80px 0;
    }

    .kd-result-card {
      background: var(--kd-white);
      border: 1.5px solid var(--kd-border);
      border-radius: var(--kd-radius-lg);
      padding: 28px 22px;
      text-align: center;
      transition: var(--kd-transition);
    }

    .kd-result-card:hover {
      transform: translateY(-3px);
      box-shadow: var(--kd-shadow-card);
    }

    .kd-result-emoji { font-size: 32px; margin-bottom: 12px; display: block; }

    .kd-result-val {
      font-size: 42px;
      font-weight: 800;
      color: var(--kd-primary);
      line-height: 1;
    }

    .kd-result-val sup { font-size: 20px; color: var(--kd-accent); }

    .kd-result-desc {
      font-size: 13px;
      color: var(--kd-text-muted);
      margin-top: 8px;
      line-height: 1.55;
    }


    /* ──────────────────────────────────────────
       FAQ — same accordion style as web-dev page
    ────────────────────────────────────────── */
    .kd-faq-section { padding: 96px 0; }

    .kd-faq-accordion .accordion-button {
      font-size: 15px; font-weight: 600;
      color: var(--kd-text-heading);
      background-color: var(--kd-white);
      padding: 20px 24px;
      border-radius: var(--kd-radius-md) !important;
      box-shadow: none !important;
    }

    .kd-faq-accordion .accordion-button:not(.collapsed) {
      color: var(--kd-primary);
      background-color: var(--kd-primary-light);
    }

    .kd-faq-accordion .accordion-button::after {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%230080FF' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
    }

    .kd-faq-accordion .accordion-item {
      border: 1.5px solid var(--kd-border);
      border-radius: var(--kd-radius-md) !important;
      overflow: hidden;
      margin-bottom: 12px;
      background-color: var(--kd-white);
    }

    .kd-faq-accordion .accordion-body {
      font-size: 14px; color: var(--kd-text-body);
      line-height: 1.78;
      padding: 4px 24px 20px;
    }










    /* ============================================================
       WEB HOSTING PAGE — page-specific styles
    ============================================================ */

    /* ── Feature cards (what's included in hosting) ── */
    .kd-hosting-features-section { padding: 88px 0; }

    .kd-hosting-feature-card {
      background: var(--kd-white);
      border: 1.5px solid var(--kd-border);
      border-radius: var(--kd-radius-lg);
      padding: 28px 24px;
      height: 100%;
      transition: var(--kd-transition);
      position: relative;
      overflow: hidden;
    }

    .kd-hosting-feature-card::after {
      content: '';
      position: absolute;
      bottom: 0; left: 0; right: 0; height: 3px;
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.3s ease;
    }

    .kd-hf-blue::after   { background: var(--kd-primary); }
    .kd-hf-green::after  { background: var(--kd-success); }
    .kd-hf-amber::after  { background: var(--kd-accent); }
    .kd-hf-navy::after   { background: var(--kd-secondary); }
    .kd-hf-purple::after { background: #7c3aed; }
    .kd-hf-teal::after   { background: #0891b2; }

    .kd-hosting-feature-card:hover { transform: translateY(-5px); box-shadow: var(--kd-shadow-hover); border-color: rgba(0,128,255,0.22); }
    .kd-hosting-feature-card:hover::after { transform: scaleX(1); }

    .kd-hf-icon {
      width: 52px; height: 52px; border-radius: var(--kd-radius-md);
      display: flex; align-items: center; justify-content: center;
      margin-bottom: 18px;
    }

    .kd-hosting-feature-card h3 { font-size: 17px; font-weight: 700; color: var(--kd-text-heading); margin-bottom: 10px; }
    .kd-hosting-feature-card p  { font-size: 13.5px; color: var(--kd-text-body); line-height: 1.7; margin: 0; }


    /* ─────────────────────────────────────────
       NEW #1 — SERVER LOCATION MAP
       SVG India outline with glowing datacenter
       pins. Hover pin = JS tooltip appears.
       Visual trust signal — "India servers".
    ───────────────────────────────────────── */
    .kd-map-section { padding: 96px 0; }

    /* Map wrapper */
    .kd-server-map-wrap {
      position: relative;
      width: 100%;
      max-width: 560px;
      margin: 0 auto;
    }

    /* Pin group */
    .kd-map-pin {
      position: absolute;
      transform: translate(-50%, -100%);
      cursor: pointer;
      z-index: 10;
    }

    /* Pin dot */
    .kd-map-pin-dot {
      width: 18px; height: 18px; border-radius: 50%;
      background: var(--kd-primary);
      border: 3px solid white;
      box-shadow: 0 0 0 4px rgba(0,128,255,0.25);
      margin: 0 auto;
      animation: kd-pin-pulse 2.5s ease-in-out infinite;
      position: relative; z-index: 2;
      transition: transform 0.2s ease;
    }

    .kd-map-pin:hover .kd-map-pin-dot { transform: scale(1.25); }

    @keyframes kd-pin-pulse {
      0%, 100% { box-shadow: 0 0 0 4px rgba(0,128,255,0.25); }
      50%       { box-shadow: 0 0 0 10px rgba(0,128,255,0); }
    }

    /* Tooltip */
    .kd-map-tooltip {
      position: absolute;
      bottom: calc(100% + 10px);
      left: 50%; transform: translateX(-50%);
      background: var(--kd-secondary);
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: var(--kd-radius-md);
      padding: 10px 14px;
      white-space: nowrap;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.2s ease, transform 0.2s ease;
      transform: translateX(-50%) translateY(4px);
      z-index: 20;
    }

    .kd-map-pin:hover .kd-map-tooltip {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
    }

    /* Arrow below tooltip */
    .kd-map-tooltip::after {
      content: '';
      position: absolute;
      top: 100%; left: 50%; transform: translateX(-50%);
      border: 6px solid transparent;
      border-top-color: var(--kd-secondary);
    }

    .kd-map-tooltip-city {
      font-size: 12px; font-weight: 800; color: white;
      margin-bottom: 3px;
    }

    .kd-map-tooltip-spec {
      font-size: 11px; color: rgba(255,255,255,0.55);
      line-height: 1.4;
    }

    /* Primary datacenter — larger, accent colour */
    .kd-map-pin-primary .kd-map-pin-dot {
      width: 22px; height: 22px;
      background: var(--kd-accent);
      box-shadow: 0 0 0 5px rgba(255,159,28,0.25);
    }

    @keyframes kd-pin-pulse-accent {
      0%, 100% { box-shadow: 0 0 0 5px rgba(255,159,28,0.25); }
      50%       { box-shadow: 0 0 0 12px rgba(255,159,28,0); }
    }

    .kd-map-pin-primary .kd-map-pin-dot { animation: kd-pin-pulse-accent 2.5s ease-in-out infinite; }

    /* Server stat pills beside the map */
    .kd-server-stats {
      display: flex; flex-direction: column; gap: 14px;
    }

    .kd-server-stat-item {
      display: flex; align-items: center; gap: 14px;
      padding: 16px 18px;
      background: var(--kd-white);
      border: 1.5px solid var(--kd-border);
      border-radius: var(--kd-radius-md);
      transition: var(--kd-transition);
    }

    .kd-server-stat-item:hover {
      border-color: rgba(0,128,255,0.22);
      box-shadow: var(--kd-shadow-card);
    }

    .kd-server-stat-icon {
      width: 42px; height: 42px; border-radius: var(--kd-radius-sm);
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }

    .kd-server-stat-val {
      font-size: 20px; font-weight: 800; color: var(--kd-primary);
      line-height: 1;
    }

    .kd-server-stat-label {
      font-size: 12px; color: var(--kd-text-muted);
      margin-top: 2px; font-weight: 500;
    }


    /* ─────────────────────────────────────────
       NEW #2 — SPEED TEST VISUALISER
       Animated horizontal bar chart comparing
       load times across hosting types.
       Bars animate on scroll via GSAP.
       Unique data-viz not on any other page.
    ───────────────────────────────────────── */
    .kd-speed-section { padding: 96px 0; }

    .kd-speed-chart {
      background: var(--kd-secondary);
      border-radius: var(--kd-radius-lg);
      padding: 40px;
      position: relative;
      overflow: hidden;
    }

    .kd-speed-chart::before {
      content: '';
      position: absolute; inset: 0;
      background-image: radial-gradient(rgba(255,255,255,0.03) 1px, transparent 1px);
      background-size: 24px 24px;
      pointer-events: none;
    }

    .kd-speed-chart-header {
      display: flex; align-items: center; justify-content: space-between;
      margin-bottom: 32px; position: relative; z-index: 1;
    }

    .kd-speed-chart-title {
      font-size: 15px; font-weight: 700;
      color: rgba(255,255,255,0.70);
    }

    .kd-speed-chart-unit {
      font-size: 12px; color: rgba(255,255,255,0.35);
      background: rgba(255,255,255,0.07);
      padding: 3px 10px; border-radius: var(--kd-radius-pill);
    }

    /* Bar rows */
    .kd-speed-bars {
      display: flex; flex-direction: column; gap: 20px;
      position: relative; z-index: 1;
      margin-bottom: 32px;
    }

    .kd-speed-bar-row {
      display: flex; align-items: center; gap: 14px;
    }

    .kd-speed-bar-label {
      font-size: 12.5px; font-weight: 600;
      color: rgba(255,255,255,0.55);
      width: 180px; flex-shrink: 0;
    }

    .kd-speed-bar-track {
      flex: 1; height: 28px;
      background: rgba(255,255,255,0.07);
      border-radius: 14px;
      overflow: hidden;
      position: relative;
    }

    .kd-speed-bar-fill {
      height: 100%; border-radius: 14px;
      width: 0;              /* starts at 0 — GSAP animates to target */
      display: flex; align-items: center;
      padding-left: 12px;
      font-size: 11.5px; font-weight: 700; color: white;
      white-space: nowrap;
      transition: width 0s;  /* GSAP handles this */
    }

    /* Colour per bar */
    .kd-bar-bad  { background: linear-gradient(90deg, #FF5F57, #e84040); }
    .kd-bar-mid  { background: linear-gradient(90deg, #FF9F1C, #e8900f); }
    .kd-bar-good { background: linear-gradient(90deg, var(--kd-primary), #38a3ff); }
    .kd-bar-best { background: linear-gradient(90deg, #28C840, #0f8a2a); }

    .kd-speed-bar-time {
      font-size: 13px; font-weight: 800;
      width: 56px; flex-shrink: 0; text-align: right;
    }

    /* Callout below chart */
    .kd-speed-callout {
      display: flex; gap: 16px; align-items: flex-start;
      background: rgba(40,200,64,0.10);
      border: 1px solid rgba(40,200,64,0.25);
      border-radius: var(--kd-radius-md);
      padding: 16px 18px;
      position: relative; z-index: 1;
    }

    .kd-speed-callout-icon { font-size: 20px; flex-shrink: 0; margin-top: 1px; }

    .kd-speed-callout p {
      font-size: 13px; color: rgba(255,255,255,0.65);
      line-height: 1.65; margin: 0;
    }

    .kd-speed-callout strong { color: #28C840; }

    @media (max-width: 575px) {
      .kd-speed-bar-label { width: 110px; font-size: 11px; }
      .kd-speed-bar-time  { width: 42px; font-size: 12px; }
      .kd-speed-chart     { padding: 22px 16px; }
    }


    /* ── Hosting plan cards ── */
    .kd-hosting-plans-section { padding: 96px 0; }

    .kd-host-plan-card {
      background: var(--kd-white);
      border: 1.5px solid var(--kd-border);
      border-radius: var(--kd-radius-lg);
      padding: 32px 26px 28px;
      height: 100%; display: flex; flex-direction: column;
      transition: var(--kd-transition); position: relative;
    }

    .kd-host-plan-card:hover { transform: translateY(-5px); box-shadow: var(--kd-shadow-hover); }

    .kd-host-plan-popular {
      border-color: var(--kd-primary);
      box-shadow: 0 0 0 1px var(--kd-primary);
    }

    .kd-host-popular-badge {
      position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
      background: linear-gradient(90deg, var(--kd-primary), #38a3ff);
      color: white; font-size: 11px; font-weight: 700;
      padding: 4px 16px; border-radius: var(--kd-radius-pill); white-space: nowrap;
    }

    .kd-host-plan-tier  { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--kd-text-muted); margin-bottom: 5px; }
    .kd-host-plan-name  { font-size: 22px; font-weight: 800; color: var(--kd-text-heading); margin-bottom: 4px; }
    .kd-host-plan-tag   { font-size: 13px; color: var(--kd-text-muted); margin-bottom: 22px; line-height: 1.55; }
    .kd-host-plan-price { font-size: 36px; font-weight: 800; color: var(--kd-primary); line-height: 1; }
    .kd-host-plan-price sup { font-size: 18px; vertical-align: top; margin-top: 7px; }
    .kd-host-plan-note  { font-size: 12px; color: var(--kd-text-muted); margin-top: 4px; margin-bottom: 24px; }

    /* Tech spec grid — storage, bandwidth, SSL etc */
    .kd-host-specs {
      display: grid; grid-template-columns: 1fr 1fr;
      gap: 10px; margin-bottom: 20px;
    }

    .kd-host-spec-cell {
      background: var(--kd-bg-light);
      border: 1px solid var(--kd-border);
      border-radius: var(--kd-radius-sm);
      padding: 10px 12px;
    }

    .kd-host-spec-val   { font-size: 15px; font-weight: 800; color: var(--kd-text-heading); line-height: 1; }
    .kd-host-spec-label { font-size: 11px; color: var(--kd-text-muted); margin-top: 3px; font-weight: 500; }

    /* Feature checklist */
    .kd-host-features {
      list-style: none; padding: 0;
      margin: 0 0 auto;
      display: flex; flex-direction: column; gap: 8px;
      padding-top: 16px; padding-bottom: 24px;
      border-top: 1px solid var(--kd-border);
    }

    .kd-host-features li {
      font-size: 13px; color: var(--kd-text-body);
      display: flex; align-items: flex-start; gap: 8px;
    }

    .kd-hf-check { color: var(--kd-success); font-size: 14px; flex-shrink: 0; margin-top: 1px; }
    .kd-hf-dash  { color: var(--kd-text-muted); font-size: 14px; flex-shrink: 0; }
    .kd-hf-muted { color: var(--kd-text-muted); }


    /* ── SLA strip (reused style inline) ── */
    .kd-host-sla-strip {
      padding: 56px 0;
      border-top: 1px solid var(--kd-border);
      border-bottom: 1px solid var(--kd-border);
    }

    .kd-host-sla-item { text-align: center; padding: 12px 16px; }
    .kd-host-sla-val  { font-size: 34px; font-weight: 800; color: var(--kd-primary); line-height: 1; }
    .kd-host-sla-val sup { font-size: 16px; color: var(--kd-accent); }
    .kd-host-sla-label { font-size: 12.5px; color: var(--kd-text-muted); margin-top: 6px; font-weight: 500; }


    /* ── FAQ ── */
    .kd-faq-section { padding: 88px 0; }

    .kd-faq-accordion .accordion-button {
      font-size: 15px; font-weight: 600;
      color: var(--kd-text-heading);
      background: var(--kd-white); padding: 20px 24px;
      border-radius: var(--kd-radius-md) !important;
      box-shadow: none !important;
    }

    .kd-faq-accordion .accordion-button:not(.collapsed) {
      color: var(--kd-primary); background: var(--kd-primary-light);
    }

    .kd-faq-accordion .accordion-button::after {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%230080FF' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
    }

    .kd-faq-accordion .accordion-item {
      border: 1.5px solid var(--kd-border);
      border-radius: var(--kd-radius-md) !important;
      overflow: hidden; margin-bottom: 12px;
      background: var(--kd-white);
    }

    .kd-faq-accordion .accordion-body {
      font-size: 14px; color: var(--kd-text-body);
      line-height: 1.78; padding: 4px 24px 20px;
    }
  
    /* ─────────────────────────────────────────
       MIGRATION PROCESS SECTION
    ───────────────────────────────────────── */
    .kd-migration-section { padding: 96px 0; }

    .kd-migration-steps {
      display: grid;
      grid-template-columns: 1fr 48px 1fr 48px 1fr;
      align-items: center;
      gap: 0;
      margin-top: 56px;
    }

    .kd-migration-step {
      background: var(--kd-white);
      border: 1.5px solid var(--kd-border);
      border-radius: var(--kd-radius-lg);
      padding: 32px 24px;
      text-align: center;
      transition: var(--kd-transition);
      position: relative;
    }

    .kd-migration-step:hover {
      transform: translateY(-4px);
      box-shadow: var(--kd-shadow-hover);
      border-color: rgba(0,128,255,0.22);
    }

    .kd-migration-arrow {
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--kd-primary);
      font-size: 22px;
      opacity: 0.4;
    }

    .kd-migration-step-num {
      width: 40px; height: 40px;
      border-radius: 50%;
      background: var(--kd-primary);
      color: white;
      font-size: 16px;
      font-weight: 800;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 16px;
    }

    .kd-migration-step-title {
      font-size: 16px;
      font-weight: 700;
      color: var(--kd-text-heading);
      margin-bottom: 8px;
    }

    .kd-migration-step-desc {
      font-size: 13px;
      color: var(--kd-text-body);
      line-height: 1.65;
      margin-bottom: 16px;
    }

    .kd-migration-step-time {
      font-size: 11.5px;
      font-weight: 700;
      padding: 4px 12px;
      border-radius: var(--kd-radius-pill);
      background: var(--kd-primary-light);
      color: var(--kd-primary);
      display: inline-block;
    }

    /* Bottom "you do nothing" strip */
    .kd-migration-promise {
      margin-top: 40px;
      background: linear-gradient(135deg, var(--kd-secondary), #0d2460);
      border-radius: var(--kd-radius-lg);
      padding: 28px 36px;
      display: flex;
      align-items: center;
      gap: 20px;
      position: relative;
      overflow: hidden;
    }

    .kd-migration-promise::before {
      content: '';
      position: absolute; inset: 0;
      background-image: radial-gradient(rgba(255,255,255,0.03) 1px, transparent 1px);
      background-size: 22px 22px;
      pointer-events: none;
    }

    .kd-migration-promise-icon { font-size: 36px; flex-shrink: 0; position: relative; z-index: 1; }

    .kd-migration-promise-text { position: relative; z-index: 1; }

    .kd-migration-promise-text h4 {
      font-size: 17px;
      font-weight: 800;
      color: white;
      margin-bottom: 4px;
    }

    .kd-migration-promise-text p {
      font-size: 13.5px;
      color: rgba(255,255,255,0.6);
      margin: 0;
      line-height: 1.6;
    }

    @media (max-width: 767px) {
      .kd-migration-steps {
        grid-template-columns: 1fr;
        gap: 12px;
      }
      .kd-migration-arrow { transform: rotate(90deg); }
      .kd-migration-promise { flex-direction: column; text-align: center; padding: 24px 20px; }
    }


    /* ─────────────────────────────────────────
       CONTROL PANEL PREVIEW
    ───────────────────────────────────────── */
    .kd-cpanel-section { padding: 96px 0; }

    /* The dark dashboard card */
    .kd-cpanel-card {
      background: #08111f;
      border-radius: var(--kd-radius-lg);
      overflow: hidden;
      box-shadow: 0 28px 72px rgba(0,0,0,0.22);
    }

    /* macOS-style toolbar */
    .kd-cpanel-toolbar {
      background: #04080f;
      padding: 12px 20px;
      display: flex;
      align-items: center;
      gap: 12px;
      border-bottom: 1px solid rgba(255,255,255,0.06);
    }

    .kd-cpanel-dots { display: flex; gap: 6px; }
    .kd-cpanel-dots span {
      width: 12px; height: 12px; border-radius: 50%;
    }

    .kd-cpanel-tabs {
      display: flex;
      gap: 4px;
      flex: 1;
      justify-content: center;
    }

    .kd-cpanel-tab {
      font-size: 11.5px;
      font-weight: 600;
      color: rgba(255,255,255,0.35);
      padding: 5px 14px;
      border-radius: 6px;
      cursor: default;
      transition: all 0.2s;
    }

    .kd-cpanel-tab.active {
      background: rgba(0,128,255,0.15);
      color: rgba(0,128,255,0.9);
    }

    /* Panel body */
    .kd-cpanel-body {
      display: grid;
      grid-template-columns: 200px 1fr;
      min-height: 420px;
    }

    /* Sidebar */
    .kd-cpanel-sidebar {
      background: rgba(255,255,255,0.02);
      border-right: 1px solid rgba(255,255,255,0.05);
      padding: 20px 0;
    }

    .kd-cpanel-nav-group {
      padding: 0 8px;
      margin-bottom: 16px;
    }

    .kd-cpanel-nav-label {
      font-size: 9.5px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: rgba(255,255,255,0.2);
      padding: 0 10px;
      margin-bottom: 6px;
    }

    .kd-cpanel-nav-item {
      display: flex;
      align-items: center;
      gap: 9px;
      padding: 8px 10px;
      border-radius: 7px;
      font-size: 12.5px;
      color: rgba(255,255,255,0.45);
      cursor: default;
      transition: all 0.15s;
    }

    .kd-cpanel-nav-item.active {
      background: rgba(0,128,255,0.12);
      color: rgba(0,128,255,0.9);
    }

    .kd-cpanel-nav-item.active .kd-cpanel-nav-dot {
      background: var(--kd-primary);
    }

    .kd-cpanel-nav-dot {
      width: 6px; height: 6px; border-radius: 50%;
      background: rgba(255,255,255,0.15);
      flex-shrink: 0;
    }

    /* Main content */
    .kd-cpanel-main { padding: 28px; overflow: hidden; }

    /* Domain + SSL status strip */
    .kd-cpanel-domain-strip {
      display: flex;
      align-items: center;
      gap: 12px;
      background: rgba(40,200,64,0.06);
      border: 1px solid rgba(40,200,64,0.15);
      border-radius: var(--kd-radius-md);
      padding: 12px 16px;
      margin-bottom: 24px;
    }

    .kd-cpanel-ssl-badge {
      background: rgba(40,200,64,0.15);
      color: #28C840;
      font-size: 11px;
      font-weight: 700;
      padding: 3px 10px;
      border-radius: var(--kd-radius-pill);
      flex-shrink: 0;
    }

    .kd-cpanel-domain-name {
      font-size: 13.5px;
      font-weight: 600;
      color: rgba(255,255,255,0.75);
      flex: 1;
    }

    .kd-cpanel-ssl-expiry {
      font-size: 11px;
      color: rgba(255,255,255,0.3);
    }

    /* Stats row inside panel */
    .kd-cpanel-stats {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 12px;
      margin-bottom: 24px;
    }

    .kd-cpanel-stat {
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.07);
      border-radius: var(--kd-radius-md);
      padding: 14px 12px;
      text-align: center;
    }

    .kd-cpanel-stat-val {
      font-size: 20px;
      font-weight: 800;
      color: white;
      line-height: 1;
    }

    .kd-cpanel-stat-val.green { color: #28C840; }
    .kd-cpanel-stat-val.blue  { color: #0080FF; }
    .kd-cpanel-stat-val.amber { color: #FF9F1C; }

    .kd-cpanel-stat-label {
      font-size: 10px;
      color: rgba(255,255,255,0.3);
      margin-top: 4px;
    }

    /* Disk usage donut + file list */
    .kd-cpanel-lower {
      display: grid;
      grid-template-columns: 160px 1fr;
      gap: 18px;
    }

    .kd-cpanel-donut-wrap {
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: var(--kd-radius-md);
      padding: 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }

    .kd-cpanel-donut-label {
      font-size: 10.5px;
      color: rgba(255,255,255,0.3);
      text-align: center;
    }

    .kd-cpanel-file-list {
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: var(--kd-radius-md);
      overflow: hidden;
    }

    .kd-cpanel-file-header {
      background: rgba(255,255,255,0.04);
      padding: 8px 14px;
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: rgba(255,255,255,0.25);
      display: grid;
      grid-template-columns: 1fr 80px 70px;
      gap: 8px;
    }

    .kd-cpanel-file-row {
      padding: 9px 14px;
      font-size: 12px;
      color: rgba(255,255,255,0.55);
      display: grid;
      grid-template-columns: 1fr 80px 70px;
      gap: 8px;
      border-top: 1px solid rgba(255,255,255,0.04);
      align-items: center;
    }

    .kd-cpanel-file-row:hover { background: rgba(255,255,255,0.03); }

    .kd-cpanel-file-name {
      display: flex;
      align-items: center;
      gap: 7px;
    }

    .kd-cpanel-file-icon { font-size: 13px; }

    .kd-cpanel-file-size { color: rgba(255,255,255,0.3); font-size: 11px; }

    .kd-cpanel-file-status {
      font-size: 10.5px;
      font-weight: 700;
      padding: 2px 8px;
      border-radius: var(--kd-radius-pill);
    }

    .kd-file-ok      { background: rgba(40,200,64,0.12); color: #28C840; }
    .kd-file-backup  { background: rgba(0,128,255,0.12); color: #0080FF; }
    .kd-file-active  { background: rgba(255,159,28,0.12); color: #FF9F1C; }

    @media (max-width: 991px) {
      .kd-cpanel-body         { grid-template-columns: 1fr; }
      .kd-cpanel-sidebar      { display: none; }
      .kd-cpanel-stats        { grid-template-columns: repeat(2, 1fr); }
      .kd-cpanel-lower        { grid-template-columns: 1fr; }
      .kd-cpanel-donut-wrap   { flex-direction: row; padding: 12px 16px; }
    }


    /* ─────────────────────────────────────────
       WHY NOT GENERIC HOSTING — 4 scenario cards
    ───────────────────────────────────────── */
    .kd-why-not-section { padding: 96px 0; }

    .kd-scenario-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 20px;
    }

    .kd-scenario-card {
      border-radius: var(--kd-radius-lg);
      overflow: hidden;
      border: 1.5px solid var(--kd-border);
      transition: var(--kd-transition);
    }

    .kd-scenario-card:hover {
      transform: translateY(-3px);
      box-shadow: var(--kd-shadow-hover);
    }

    /* Top — the PROBLEM (red tint) */
    .kd-scenario-top {
      background: #fff8f8;
      border-bottom: 1px solid rgba(255,95,87,0.12);
      padding: 20px 22px;
    }

    .kd-scenario-label-bad {
      font-size: 10.5px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: #FF5F57;
      margin-bottom: 8px;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .kd-scenario-problem {
      font-size: 14px;
      font-weight: 700;
      color: var(--kd-text-heading);
      margin-bottom: 6px;
    }

    .kd-scenario-problem-desc {
      font-size: 13px;
      color: var(--kd-text-muted);
      line-height: 1.6;
      margin: 0;
    }

    /* Bottom — the SOLUTION (green tint) */
    .kd-scenario-bottom {
      background: #f6fff8;
      border-top: 1px solid rgba(40,200,64,0.12);
      padding: 20px 22px;
    }

    .kd-scenario-label-good {
      font-size: 10.5px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: #28C840;
      margin-bottom: 8px;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .kd-scenario-solution {
      font-size: 14px;
      font-weight: 700;
      color: var(--kd-text-heading);
      margin-bottom: 6px;
    }

    .kd-scenario-solution-desc {
      font-size: 13px;
      color: var(--kd-text-body);
      line-height: 1.6;
      margin: 0;
    }

    @media (max-width: 767px) {
      .kd-scenario-grid { grid-template-columns: 1fr; }
    }















    /* ============================================================
       WEBSITE MAINTENANCE / AMC PAGE — page-specific styles
    ============================================================ */

    /* ─────────────────────────────────────────
       NEW #1: LIVE UPTIME MONITOR
       Dark dashboard card showing simulated
       server status — pulsing green dots,
       response times, uptime sparkline.
       Immediately communicates "we watch your
       site 24/7" without saying a word.
    ───────────────────────────────────────── */
    .kd-monitor-section {
      padding: 96px 0;
    }

    /* Outer dark card */
    .kd-monitor-card {
      background: var(--kd-secondary);
      border-radius: var(--kd-radius-lg);
      overflow: hidden;
      box-shadow: 0 24px 64px rgba(0,0,0,0.20);
      position: relative;
    }

    .kd-monitor-card::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image: radial-gradient(rgba(255,255,255,0.03) 1px, transparent 1px);
      background-size: 24px 24px;
      pointer-events: none;
    }

    /* Top toolbar of the "app" */
    .kd-monitor-toolbar {
      background: rgba(0,0,0,0.25);
      padding: 14px 24px;
      display: flex;
      align-items: center;
      gap: 14px;
      border-bottom: 1px solid rgba(255,255,255,0.07);
      position: relative;
      z-index: 1;
    }

    .kd-monitor-traffic-lights {
      display: flex;
      gap: 6px;
    }

    .kd-monitor-traffic-lights span {
      width: 12px;
      height: 12px;
      border-radius: 50%;
    }

    .kd-monitor-toolbar-title {
      font-size: 13px;
      font-weight: 600;
      color: rgba(255,255,255,0.50);
      flex: 1;
      text-align: center;
    }

    /* Live pulse badge */
    .kd-monitor-live {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 11px;
      font-weight: 700;
      color: #28C840;
      background: rgba(40,200,64,0.12);
      border: 1px solid rgba(40,200,64,0.25);
      padding: 4px 10px;
      border-radius: var(--kd-radius-pill);
    }

    /* Pulsing dot */
    .kd-pulse-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #28C840;
      animation: kd-pulse 2s ease-in-out infinite;
    }

    @keyframes kd-pulse {
      0%, 100% { opacity: 1; transform: scale(1); }
      50%       { opacity: 0.5; transform: scale(0.75); }
    }

    /* Monitor body */
    .kd-monitor-body {
      padding: 28px;
      position: relative;
      z-index: 1;
    }

    /* Summary row — 4 big stat cells */
    .kd-monitor-summary {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 14px;
      margin-bottom: 28px;
    }

    .kd-monitor-stat {
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: var(--kd-radius-md);
      padding: 18px 16px;
      text-align: center;
    }

    .kd-monitor-stat-val {
      font-size: 28px;
      font-weight: 800;
      color: var(--kd-white);
      line-height: 1;
    }

    .kd-monitor-stat-val.green { color: #28C840; }
    .kd-monitor-stat-val.amber { color: #FF9F1C; }
    .kd-monitor-stat-val.blue  { color: #0080FF; }

    .kd-monitor-stat-label {
      font-size: 11px;
      color: rgba(255,255,255,0.35);
      margin-top: 6px;
      font-weight: 500;
    }

    /* Site status list */
    .kd-monitor-sites {
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-bottom: 24px;
    }

    .kd-monitor-site-row {
      display: flex;
      align-items: center;
      gap: 14px;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: var(--kd-radius-md);
      padding: 12px 16px;
    }

    /* Status indicator dot */
    .kd-status-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      flex-shrink: 0;
    }
    .kd-status-dot-up   { background: #28C840; box-shadow: 0 0 6px rgba(40,200,64,0.5); }
    .kd-status-dot-warn { background: #FF9F1C; box-shadow: 0 0 6px rgba(255,159,28,0.5); }

    .kd-monitor-site-name {
      font-size: 13px;
      font-weight: 600;
      color: rgba(255,255,255,0.75);
      flex: 1;
      min-width: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .kd-monitor-site-status {
      font-size: 11px;
      font-weight: 700;
      padding: 3px 9px;
      border-radius: var(--kd-radius-pill);
    }

    .kd-site-up   { background: rgba(40,200,64,0.15); color: #28C840; }
    .kd-site-warn { background: rgba(255,159,28,0.15); color: #FF9F1C; }

    .kd-monitor-response {
      font-size: 12px;
      color: rgba(255,255,255,0.35);
      width: 72px;
      text-align: right;
      flex-shrink: 0;
    }

    /* Mini sparkline bars */
    .kd-sparkline {
      display: flex;
      align-items: flex-end;
      gap: 2px;
      height: 20px;
      width: 60px;
      flex-shrink: 0;
    }

    .kd-sparkline-bar {
      flex: 1;
      border-radius: 2px;
      background: rgba(40,200,64,0.5);
    }

    .kd-sparkline-bar.warn { background: rgba(255,159,28,0.6); }

    /* Uptime chart */
    .kd-monitor-chart-label {
      font-size: 11px;
      color: rgba(255,255,255,0.3);
      margin-bottom: 8px;
    }

    @media (max-width: 767px) {
      .kd-monitor-summary    { grid-template-columns: repeat(2, 1fr); }
      .kd-monitor-body       { padding: 16px; }
      .kd-sparkline          { display: none; }
    }


    /* ─────────────────────────────────────────
       NEW #2: HORROR STORY — what breaks
       without maintenance. Red warning cards
       with consequence copy. Fear-of-loss
       framing. New visual language on this site.
    ───────────────────────────────────────── */
    .kd-horror-section {
      padding: 96px 0;
    }

    /* The outer "alert" container */
    .kd-horror-banner {
      background: #1a0505;
      border: 1.5px solid rgba(255,95,87,0.25);
      border-radius: var(--kd-radius-lg);
      padding: 36px 40px;
      margin-bottom: 48px;
      position: relative;
      overflow: hidden;
    }

    .kd-horror-banner::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image: radial-gradient(rgba(255,95,87,0.04) 1px, transparent 1px);
      background-size: 22px 22px;
      pointer-events: none;
    }

    .kd-horror-banner-icon {
      font-size: 40px;
      margin-bottom: 12px;
      display: block;
    }

    .kd-horror-banner h3 {
      font-size: 22px;
      font-weight: 800;
      color: #FF5F57;
      margin-bottom: 10px;
    }

    .kd-horror-banner p {
      font-size: 15px;
      color: rgba(255,255,255,0.60);
      line-height: 1.75;
      max-width: 640px;
      margin: 0;
    }

    /* The 6 consequence cards */
    .kd-horror-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 18px;
    }

    .kd-horror-card {
      background: var(--kd-white);
      border: 1.5px solid var(--kd-border);
      border-left: 4px solid #FF5F57;
      border-radius: var(--kd-radius-md);
      padding: 22px 20px;
      transition: var(--kd-transition);
      position: relative;
    }

    .kd-horror-card:hover {
      border-color: rgba(255,95,87,0.40);
      box-shadow: 0 8px 28px rgba(255,95,87,0.08);
      transform: translateY(-2px);
    }

    .kd-horror-card-icon {
      font-size: 26px;
      margin-bottom: 12px;
      display: block;
    }

    .kd-horror-card h4 {
      font-size: 15px;
      font-weight: 700;
      color: var(--kd-text-heading);
      margin-bottom: 6px;
    }

    .kd-horror-card p {
      font-size: 13px;
      color: var(--kd-text-body);
      line-height: 1.65;
      margin: 0;
    }

    .kd-horror-card-stat {
      display: inline-block;
      margin-top: 10px;
      font-size: 11px;
      font-weight: 700;
      color: #FF5F57;
      background: rgba(255,95,87,0.08);
      padding: 3px 10px;
      border-radius: var(--kd-radius-pill);
    }

    /* Transition card — "with AMC" flip */
    .kd-horror-vs-row {
      display: flex;
      align-items: center;
      gap: 16px;
      margin-top: 40px;
    }

    .kd-horror-vs-divider {
      flex: 1;
      height: 1.5px;
      background: linear-gradient(90deg, #FF5F57, var(--kd-border), #28C840);
    }

    .kd-horror-vs-badge {
      font-size: 13px;
      font-weight: 800;
      color: var(--kd-text-muted);
      white-space: nowrap;
    }

    @media (max-width: 767px) {
      .kd-horror-grid  { grid-template-columns: 1fr 1fr; }
      .kd-horror-banner { padding: 24px 20px; }
    }

    @media (max-width: 480px) {
      .kd-horror-grid  { grid-template-columns: 1fr; }
    }


    /* ─────────────────────────────────────────
       NEW #3: AMC PLAN CARDS
       Vertical plan cards with a visual
       "coverage bar" showing what each tier
       covers. Different from the pricing cards
       on the web dev page.
    ───────────────────────────────────────── */
    .kd-amc-section {
      padding: 96px 0;
    }

    .kd-amc-card {
      background: var(--kd-white);
      border: 1.5px solid var(--kd-border);
      border-radius: var(--kd-radius-lg);
      padding: 32px 26px 28px;
      height: 100%;
      transition: var(--kd-transition);
      position: relative;
      display: flex;
      flex-direction: column;
    }

    .kd-amc-card:hover {
      transform: translateY(-5px);
      box-shadow: var(--kd-shadow-hover);
    }

    /* Popular plan */
    .kd-amc-card-popular {
      border-color: var(--kd-primary);
      box-shadow: 0 0 0 1px var(--kd-primary);
    }

    .kd-amc-popular-badge {
      position: absolute;
      top: -14px;
      left: 50%;
      transform: translateX(-50%);
      background: linear-gradient(90deg, var(--kd-primary), #38a3ff);
      color: var(--kd-white);
      font-size: 11px;
      font-weight: 700;
      padding: 4px 16px;
      border-radius: var(--kd-radius-pill);
      white-space: nowrap;
    }

    .kd-amc-tier {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--kd-text-muted);
      margin-bottom: 6px;
    }

    .kd-amc-name {
      font-size: 21px;
      font-weight: 800;
      color: var(--kd-text-heading);
      margin-bottom: 4px;
    }

    .kd-amc-tagline {
      font-size: 13px;
      color: var(--kd-text-muted);
      margin-bottom: 22px;
      line-height: 1.55;
    }

    .kd-amc-price {
      font-size: 36px;
      font-weight: 800;
      color: var(--kd-primary);
      line-height: 1;
    }

    .kd-amc-price sup { font-size: 18px; vertical-align: top; margin-top: 7px; }

    .kd-amc-price-note {
      font-size: 12px;
      color: var(--kd-text-muted);
      margin-bottom: 24px;
      margin-top: 4px;
    }

    /* Coverage bar — visual representation of what's included */
    .kd-amc-coverage {
      margin-bottom: 24px;
    }

    .kd-amc-coverage-label {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--kd-text-muted);
      margin-bottom: 10px;
    }

    .kd-amc-coverage-bar {
      height: 6px;
      background: var(--kd-border);
      border-radius: 3px;
      overflow: hidden;
      margin-bottom: 5px;
    }

    .kd-amc-coverage-fill {
      height: 100%;
      border-radius: 3px;
      background: linear-gradient(90deg, var(--kd-primary), #38a3ff);
      transition: width 1s ease;
    }

    .kd-amc-coverage-pct {
      font-size: 11px;
      color: var(--kd-primary);
      font-weight: 700;
    }

    /* Feature list */
    .kd-amc-features {
      list-style: none;
      padding: 0;
      margin: 0 0 auto;
      display: flex;
      flex-direction: column;
      gap: 9px;
      padding-bottom: 24px;
    }

    .kd-amc-features li {
      font-size: 13.5px;
      color: var(--kd-text-body);
      display: flex;
      align-items: flex-start;
      gap: 9px;
      line-height: 1.45;
    }

    .kd-amc-check {
      color: var(--kd-success);
      font-size: 15px;
      flex-shrink: 0;
      margin-top: 1px;
    }

    .kd-amc-dash {
      color: var(--kd-text-muted);
      font-size: 15px;
      flex-shrink: 0;
    }

    .kd-amc-muted { color: var(--kd-text-muted); }


    /* ─────────────────────────────────────────
       WHAT'S INCLUDED — 2-col icon-text grid
    ───────────────────────────────────────── */
    .kd-included-section {
      padding: 96px 0;
    }

    .kd-included-item {
      display: flex;
      gap: 16px;
      align-items: flex-start;
      padding: 22px 20px;
      background: var(--kd-white);
      border: 1.5px solid var(--kd-border);
      border-radius: var(--kd-radius-md);
      transition: var(--kd-transition);
      height: 100%;
    }

    .kd-included-item:hover {
      border-color: rgba(0,128,255,0.22);
      box-shadow: var(--kd-shadow-card);
    }

    .kd-included-icon {
      width: 46px;
      height: 46px;
      border-radius: var(--kd-radius-sm);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .kd-included-item h4 {
      font-size: 15px;
      font-weight: 700;
      color: var(--kd-text-heading);
      margin-bottom: 5px;
    }

    .kd-included-item p {
      font-size: 13px;
      color: var(--kd-text-body);
      line-height: 1.65;
      margin: 0;
    }


    /* ─────────────────────────────────────────
       SLA GUARANTEE STRIP
       A commitment row that builds trust.
    ───────────────────────────────────────── */
    .kd-sla-strip {
      padding: 56px 0;
      border-top: 1px solid var(--kd-border);
      border-bottom: 1px solid var(--kd-border);
    }

    .kd-sla-item {
      text-align: center;
      padding: 12px 16px;
    }

    .kd-sla-value {
      font-size: 36px;
      font-weight: 800;
      color: var(--kd-primary);
      line-height: 1;
    }

    .kd-sla-value sup { font-size: 16px; color: var(--kd-accent); }

    .kd-sla-label {
      font-size: 12.5px;
      color: var(--kd-text-muted);
      margin-top: 6px;
      font-weight: 500;
    }


    /* ─────────────────────────────────────────
       FAQ
    ───────────────────────────────────────── */
    .kd-faq-section { padding: 96px 0; }

    .kd-faq-accordion .accordion-button {
      font-size: 15px; font-weight: 600;
      color: var(--kd-text-heading);
      background-color: var(--kd-white);
      padding: 20px 24px;
      border-radius: var(--kd-radius-md) !important;
      box-shadow: none !important;
    }

    .kd-faq-accordion .accordion-button:not(.collapsed) {
      color: var(--kd-primary);
      background-color: var(--kd-primary-light);
    }

    .kd-faq-accordion .accordion-button::after {
      background-image: url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'16\' height=\'16\' fill=\'%230080FF\' viewBox=\'0 0 16 16\'%3E%3Cpath d=\'M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z\'/%3E%3C/svg%3E");
    }

    .kd-faq-accordion .accordion-item {
      border: 1.5px solid var(--kd-border);
      border-radius: var(--kd-radius-md) !important;
      overflow: hidden;
      margin-bottom: 12px;
      background-color: var(--kd-white);
    }

    .kd-faq-accordion .accordion-body {
      font-size: 14px; color: var(--kd-text-body);
      line-height: 1.78; padding: 4px 24px 20px;
    }
  
    /* ─────────────────────────────────────────
       SECTION A: MONTHLY MAINTENANCE TIMELINE
    ───────────────────────────────────────── */
    /* ── TIMELINE SECTION ── */
    .kd-timeline-section { padding: 96px 0; }

    .kd-mtl-month-bar {
      display: flex; align-items: center; justify-content: space-between;
      flex-wrap: wrap; gap: 12px;
      background: var(--kd-white); border: 1.5px solid var(--kd-border);
      border-radius: var(--kd-radius-md); padding: 14px 22px; margin-bottom: 32px;
    }
    .kd-mtl-month-label { font-size: 13.5px; font-weight: 700; color: var(--kd-text-heading); }
    .kd-mtl-month-weeks { display: flex; gap: 8px; }
    .kd-mtl-week-pill {
      font-size: 11.5px; font-weight: 600; padding: 4px 12px;
      border-radius: var(--kd-radius-pill);
      background: var(--kd-bg-light); color: var(--kd-text-muted); border: 1px solid var(--kd-border);
    }
    .kd-mtl-week-pill-active { background: var(--kd-primary); color: var(--kd-white); border-color: var(--kd-primary); }

    /* Grid — simple flex column, gap between cards */
    .kd-mtl-grid { display: flex; flex-direction: column; gap: 0; }

    /* Row card */
    .kd-mtl-row {
      display: flex; align-items: flex-start; gap: 0;
      background: var(--kd-white); border: 1.5px solid var(--kd-border);
      border-radius: var(--kd-radius-md); margin-bottom: 0;
      transition: var(--kd-transition); overflow: visible;
    }
    .kd-mtl-row:hover { border-color: rgba(0,128,255,0.22); box-shadow: var(--kd-shadow-card); }

    /* Left accent strip — coloured bar, also carries the connector dot */
    .kd-mtl-icon-col {
      flex-shrink: 0;
      width: 6px;
      border-radius: var(--kd-radius-md) 0 0 var(--kd-radius-md);
      background: var(--kd-primary);
      align-self: stretch;
    }

    /* Icon box — sits inside the row after the strip */
    .kd-mtl-icon-wrap {
      flex-shrink: 0;
      width: 64px;
      display: flex;
      align-items: flex-start;
      justify-content: center;
      padding-top: 22px;
    }
    .kd-mtl-icon {
      width: 42px; height: 42px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      border: 2px solid var(--kd-border); background: var(--kd-white);
    }

    /* Add a gap between rows — the "connector" is just spacing */
    .kd-mtl-row + .kd-mtl-row { margin-top: 10px; }

    .kd-mtl-content { flex: 1; min-width: 0; padding: 22px 20px 22px 0; }

    .kd-mtl-week-tag {
      display: inline-block; font-size: 10.5px; font-weight: 700;
      text-transform: uppercase; letter-spacing: 0.06em;
      color: var(--kd-primary); background: var(--kd-primary-light);
      padding: 2px 9px; border-radius: var(--kd-radius-pill); margin-bottom: 6px;
    }
    .kd-mtl-title { font-size: 15.5px; font-weight: 700; color: var(--kd-text-heading); margin-bottom: 6px; }
    .kd-mtl-desc  { font-size: 13px; color: var(--kd-text-body); line-height: 1.65; margin-bottom: 12px; }
    .kd-mtl-tags  { display: flex; flex-wrap: wrap; gap: 6px; }
    .kd-mtl-tag {
      font-size: 11px; font-weight: 600; color: var(--kd-text-muted);
      background: var(--kd-bg-light); border: 1px solid var(--kd-border);
      border-radius: 6px; padding: 2px 8px;
    }

    .kd-mtl-status {
      flex-shrink: 0; font-size: 11.5px; font-weight: 700;
      padding: 4px 12px; border-radius: var(--kd-radius-pill);
      align-self: flex-start; margin: 22px 20px 0 0;
    }
    .kd-mtl-status-done   { background: rgba(40,200,64,0.12); color: #28C840; border: 1px solid rgba(40,200,64,0.25); }
    .kd-mtl-status-active { background: var(--kd-primary); color: var(--kd-white); animation: kd-pulse-btn 2s ease-in-out infinite; }

    @keyframes kd-pulse-btn {
      0%, 100% { box-shadow: 0 0 0 0 rgba(0,128,255,0.4); }
      50%       { box-shadow: 0 0 0 6px rgba(0,128,255,0); }
    }

    /* Colour variants for the left strip */
    .kd-mtl-row-blue   .kd-mtl-icon-col { background: var(--kd-primary); }
    .kd-mtl-row-green  .kd-mtl-icon-col { background: var(--kd-success); }
    .kd-mtl-row-amber  .kd-mtl-icon-col { background: var(--kd-accent); }
    .kd-mtl-row-purple .kd-mtl-icon-col { background: #7c3aed; }
    .kd-mtl-row-teal   .kd-mtl-icon-col { background: #0891b2; }

    /* GSAP — rows start visible; GSAP animates from offset */
    .kd-mtl-from-left, .kd-mtl-from-right { opacity: 1; }

    @media (max-width: 767px) {
      .kd-mtl-icon-wrap { width: 48px; }
      .kd-mtl-icon      { width: 34px; height: 34px; }
      .kd-mtl-status    { display: none; }
    }

    .kd-incident-section {
      padding: 96px 0;
      background-color: var(--kd-white);
    }

    .kd-incident-trigger {
      font-family: var(--kd-font, sans-serif);
    }

    /* The board of steps */
    .kd-incident-board {
      display: flex;
      flex-direction: column;
      gap: 0;
    }

    /* Individual step */
    .kd-incident-step {
      display: flex; align-items: flex-start; gap: 16px;
      padding: 18px 20px;
      background: var(--kd-bg-light); border: 1.5px solid var(--kd-border);
      border-radius: var(--kd-radius-md); transition: all 0.4s ease;
      opacity: 1;
    }
    /* Only dim while simulation is running */
    .kd-incident-board.running .kd-incident-step[data-state="idle"] {
      opacity: 0.3;
    }

    /* Active step */
    .kd-incident-step[data-state="active"] {
      opacity: 1;
      background: var(--kd-white);
      border-color: var(--kd-primary);
      box-shadow: 0 4px 20px rgba(0,128,255,0.10);
    }

    /* Done step */
    .kd-incident-step[data-state="done"] {
      opacity: 1;
      background: var(--kd-white);
      border-color: rgba(40,200,64,0.30);
    }

    /* Step icon circles */
    .kd-incident-step-icon {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .kd-iicon-red   { background: rgba(255,95,87,0.12); color: #FF5F57; }
    .kd-iicon-amber { background: rgba(255,159,28,0.12); color: #FF9F1C; }
    .kd-iicon-blue  { background: var(--kd-primary-light); color: var(--kd-primary); }
    .kd-iicon-green { background: rgba(40,200,64,0.12); color: #28C840; }

    .kd-incident-step-body { flex: 1; }

    .kd-incident-step-time {
      font-size: 11px;
      font-weight: 700;
      color: var(--kd-primary);
      text-transform: uppercase;
      letter-spacing: 0.06em;
      margin-bottom: 3px;
    }

    .kd-incident-step-title {
      font-size: 14.5px;
      font-weight: 700;
      color: var(--kd-text-heading);
      margin-bottom: 4px;
    }

    .kd-incident-step-desc {
      font-size: 12.5px;
      color: var(--kd-text-muted);
      line-height: 1.6;
    }

    /* Status badge on each step */
    .kd-incident-step-badge {
      flex-shrink: 0;
      font-size: 11px;
      font-weight: 700;
      padding: 4px 10px;
      border-radius: var(--kd-radius-pill);
      background: var(--kd-bg-light);
      color: var(--kd-text-muted);
      border: 1px solid var(--kd-border);
      align-self: flex-start;
      transition: all 0.4s ease;
      white-space: nowrap;
    }

    .kd-incident-step[data-state="active"] .kd-incident-step-badge {
      background: var(--kd-primary);
      color: var(--kd-white);
      border-color: var(--kd-primary);
    }

    .kd-incident-step[data-state="done"] .kd-incident-step-badge {
      background: rgba(40,200,64,0.12);
      color: #28C840;
      border-color: rgba(40,200,64,0.25);
    }

    .kd-ibadge-green { /* final step when done */ }

    /* Connector line between steps */
    .kd-incident-connector {
      width: 2px;
      height: 14px;
      background: var(--kd-border);
      margin-left: 38px;
      border-radius: 1px;
      transition: background 0.4s ease;
    }

    .kd-incident-connector.active {
      background: var(--kd-primary);
    }

    .kd-incident-connector.done {
      background: #28C840;
    }


    /* ─────────────────────────────────────────
       SECTION C: CLIENT TRUST WALL
    ───────────────────────────────────────── */
    .kd-trust-wall-section {
      padding: 96px 0;
    }

    /* Masonry-like 3-col grid */
    .kd-trust-wall-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 18px;
    }

    /* Individual tile */
    .kd-trust-tile {
      background: var(--kd-white);
      border: 1.5px solid var(--kd-border);
      border-radius: var(--kd-radius-lg);
      padding: 24px 22px 20px;
      transition: var(--kd-transition);
      display: flex;
      flex-direction: column;
      position: relative;
    }

    .kd-trust-tile:hover {
      transform: translateY(-3px);
      border-color: rgba(0,128,255,0.22);
      box-shadow: var(--kd-shadow-card);
    }

    /* Large tiles span 2 columns */
    .kd-trust-tile-lg {
      grid-column: span 2;
    }

    /* Decorative quote mark */
    .kd-trust-tile-quote {
      font-size: 48px;
      line-height: 1;
      color: var(--kd-primary-light);
      font-family: Georgia, serif;
      font-weight: 700;
      margin-bottom: 8px;
    }

    .kd-trust-tile p {
      font-size: 13.5px;
      color: var(--kd-text-body);
      line-height: 1.75;
      font-style: italic;
      flex: 1;
      margin-bottom: 18px;
    }

    /* Author row */
    .kd-trust-tile-author {
      display: flex;
      align-items: center;
      gap: 10px;
      padding-top: 14px;
      border-top: 1px solid var(--kd-border);
    }

    .kd-trust-tile-avatar {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: 800;
      color: var(--kd-white);
      flex-shrink: 0;
    }

    .kd-trust-tile-name {
      font-size: 13.5px;
      font-weight: 700;
      color: var(--kd-text-heading);
      line-height: 1.2;
    }

    .kd-trust-tile-role {
      font-size: 11.5px;
      color: var(--kd-text-muted);
      margin-top: 1px;
    }

    /* Plan badge — top-right corner */
    .kd-trust-tile-plan {
      margin-left: auto;
      font-size: 10.5px;
      font-weight: 700;
      color: var(--kd-primary);
      background: var(--kd-primary-light);
      padding: 3px 9px;
      border-radius: var(--kd-radius-pill);
      white-space: nowrap;
      flex-shrink: 0;
    }

    @media (max-width: 991px) {
      .kd-trust-wall-grid { grid-template-columns: 1fr 1fr; }
      .kd-trust-tile-lg { grid-column: span 2; }
    }

    @media (max-width: 575px) {
      .kd-trust-wall-grid { grid-template-columns: 1fr; }
      .kd-trust-tile-lg { grid-column: span 1; }
    }










    /* ============================================================
       CONTACT PAGE — page-specific styles
    ============================================================ */

    /* ── Contact hero ── */
    .kd-contact-hero {
      padding: 80px 0 64px;
      background: var(--kd-secondary);
      position: relative; overflow: hidden;
    }
    .kd-contact-hero::before {
      content: ''; position: absolute; inset: 0;
      background-image: radial-gradient(rgba(255,255,255,0.03) 1px, transparent 1px);
      background-size: 28px 28px; pointer-events: none;
    }
    .kd-contact-hero-glow {
      position: absolute; top: -120px; right: -80px;
      width: 500px; height: 500px; border-radius: 50%;
      background: radial-gradient(circle, rgba(0,128,255,0.12) 0%, transparent 70%);
      pointer-events: none;
    }
    .kd-contact-hero h1 {
      font-size: clamp(32px, 5vw, 52px);
      font-weight: 800; color: white; line-height: 1.15;
      margin-bottom: 16px;
    }
    .kd-contact-hero h1 em { color: var(--kd-accent); font-style: normal; }
    .kd-contact-hero p {
      font-size: 16px; color: rgba(255,255,255,0.60);
      line-height: 1.75; max-width: 540px;
      margin-bottom: 36px;
    }

    /* Dual CTA row in hero */
    .kd-contact-hero-ctas {
      display: flex; flex-wrap: wrap; gap: 14px;
    }

    /* WhatsApp CTA — always the most accessible option */
    .kd-contact-wa-btn {
      display: inline-flex; align-items: center; gap: 10px;
      background: #25D366; color: white;
      font-size: 15px; font-weight: 700;
      padding: 14px 28px; border-radius: var(--kd-radius-pill);
      text-decoration: none;
      box-shadow: 0 8px 28px rgba(37,211,102,0.35);
      transition: var(--kd-transition);
    }
    .kd-contact-wa-btn:hover {
      background: #1db954; color: white;
      transform: translateY(-2px);
      box-shadow: 0 12px 36px rgba(37,211,102,0.40);
    }

    /* Call CTA */
    .kd-contact-call-btn {
      display: inline-flex; align-items: center; gap: 10px;
      background: rgba(255,255,255,0.10);
      border: 1.5px solid rgba(255,255,255,0.20);
      color: white; font-size: 15px; font-weight: 600;
      padding: 14px 28px; border-radius: var(--kd-radius-pill);
      text-decoration: none; transition: var(--kd-transition);
    }
    .kd-contact-call-btn:hover {
      background: rgba(255,255,255,0.18); color: white;
      border-color: rgba(255,255,255,0.40);
      transform: translateY(-2px);
    }

    /* Hero trust pills */
    .kd-contact-trust-pills {
      display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px;
    }
    .kd-contact-trust-pill {
      display: inline-flex; align-items: center; gap: 7px;
      font-size: 12.5px; font-weight: 600;
      color: rgba(255,255,255,0.55);
      background: rgba(255,255,255,0.07);
      border: 1px solid rgba(255,255,255,0.12);
      padding: 5px 14px; border-radius: var(--kd-radius-pill);
    }
    .kd-contact-trust-pill-dot {
      width: 7px; height: 7px; border-radius: 50%; background: #28C840;
    }

    /* ── Pre-form objection strip ── */
    .kd-objection-strip {
      background: var(--kd-bg-light);
      border-bottom: 1px solid var(--kd-border);
      padding: 28px 0;
    }
    .kd-objection-item {
      display: flex; align-items: flex-start; gap: 12px;
      padding: 0 20px;
    }
    .kd-objection-item:not(:last-child) {
      border-right: 1px solid var(--kd-border);
    }
    .kd-objection-icon {
      width: 36px; height: 36px; border-radius: 50%;
      background: var(--kd-primary-light);
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .kd-objection-q {
      font-size: 13px; font-weight: 700;
      color: var(--kd-text-heading); margin-bottom: 3px;
    }
    .kd-objection-a {
      font-size: 12.5px; color: var(--kd-text-muted); line-height: 1.5;
    }

    /* ── Main form section ── */
    .kd-contact-form-section { padding: 88px 0; }

    /* Form card */
    .kd-form-card {
      background: var(--kd-white);
      border: 1.5px solid var(--kd-border);
      border-radius: var(--kd-radius-lg);
      padding: 44px 40px;
      box-shadow: 0 8px 32px rgba(0,0,0,0.07);
    }

    .kd-form-card h2 {
      font-size: 24px; font-weight: 800;
      color: var(--kd-text-heading); margin-bottom: 6px;
    }

    .kd-form-card .kd-form-subtitle {
      font-size: 14px; color: var(--kd-text-muted);
      margin-bottom: 32px; line-height: 1.6;
    }

    /* Form fields */
    .kd-form-group { margin-bottom: 20px; }

    .kd-form-label {
      display: block; font-size: 13px; font-weight: 700;
      color: var(--kd-text-heading); margin-bottom: 7px;
    }
    .kd-form-label .kd-required { color: var(--kd-accent); margin-left: 2px; }

    .kd-form-input,
    .kd-form-select,
    .kd-form-textarea {
      width: 100%;
      padding: 13px 16px;
      font-family: var(--kd-font-body, sans-serif);
      font-size: 14px;
      color: var(--kd-text-heading);
      background: var(--kd-white);
      border: 1.5px solid var(--kd-border);
      border-radius: var(--kd-radius-md);
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
      outline: none;
      appearance: none;
    }

    .kd-form-input:focus,
    .kd-form-select:focus,
    .kd-form-textarea:focus {
      border-color: var(--kd-primary);
      box-shadow: 0 0 0 4px rgba(0,128,255,0.10);
    }

    .kd-form-input::placeholder,
    .kd-form-textarea::placeholder {
      color: var(--kd-text-muted); opacity: 0.7;
    }

    /* Select arrow */
    .kd-form-select-wrap { position: relative; }
    .kd-form-select-wrap::after {
      content: '';
      position: absolute; right: 14px; top: 50%;
      transform: translateY(-50%);
      width: 0; height: 0;
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      border-top: 6px solid var(--kd-text-muted);
      pointer-events: none;
    }
    .kd-form-select { padding-right: 36px; cursor: pointer; }

    .kd-form-textarea { resize: vertical; min-height: 110px; }

    /* Service checkboxes — pill style */
    .kd-service-pills {
      display: flex; flex-wrap: wrap; gap: 8px;
      margin-top: 2px;
    }

    .kd-service-pill-label {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 8px 16px;
      border: 1.5px solid var(--kd-border);
      border-radius: var(--kd-radius-pill);
      font-size: 13px; font-weight: 600;
      color: var(--kd-text-heading);
      cursor: pointer; user-select: none;
      transition: var(--kd-transition);
    }

    .kd-service-pill-label:hover {
      border-color: var(--kd-primary);
      color: var(--kd-primary);
    }

    .kd-service-pill-input {
      position: absolute; opacity: 0; width: 0; height: 0;
    }

    .kd-service-pill-input:checked + .kd-service-pill-label {
      background: var(--kd-primary);
      border-color: var(--kd-primary);
      color: white;
    }

    /* Submit button */
    .kd-form-submit {
      width: 100%; padding: 16px;
      background: linear-gradient(135deg, var(--kd-primary), #1a8fff);
      color: white; font-size: 16px; font-weight: 700;
      border: none; border-radius: var(--kd-radius-pill);
      cursor: pointer; transition: var(--kd-transition);
      display: flex; align-items: center; justify-content: center; gap: 10px;
      box-shadow: 0 8px 24px rgba(0,128,255,0.30);
    }
    .kd-form-submit:hover {
      transform: translateY(-2px);
      box-shadow: 0 12px 32px rgba(0,128,255,0.38);
    }
    .kd-form-submit:active { transform: translateY(0); }

    /* Privacy note below submit */
    .kd-form-privacy {
      text-align: center; margin-top: 14px;
      font-size: 12px; color: var(--kd-text-muted); line-height: 1.55;
    }

    /* Success state */
    .kd-form-success {
      display: none;
      text-align: center;
      padding: 48px 32px;
    }
    .kd-form-success-icon { font-size: 56px; margin-bottom: 16px; }
    .kd-form-success h3 { font-size: 22px; font-weight: 800; color: var(--kd-text-heading); margin-bottom: 8px; }
    .kd-form-success p { font-size: 14px; color: var(--kd-text-muted); line-height: 1.7; }

    /* ── Trust sidebar ── */
    .kd-contact-trust-sidebar {
      display: flex; flex-direction: column; gap: 20px;
    }

    /* Response promise card */
    .kd-response-card {
      background: var(--kd-secondary);
      border-radius: var(--kd-radius-lg);
      padding: 28px 24px;
      position: relative; overflow: hidden;
    }
    .kd-response-card::before {
      content: ''; position: absolute; inset: 0;
      background-image: radial-gradient(rgba(255,255,255,0.03) 1px, transparent 1px);
      background-size: 22px 22px; pointer-events: none;
    }
    .kd-response-card-label {
      font-size: 11px; font-weight: 700;
      text-transform: uppercase; letter-spacing: .06em;
      color: rgba(255,255,255,0.35); margin-bottom: 12px;
      position: relative; z-index: 1;
    }
    .kd-response-time {
      font-size: 44px; font-weight: 800;
      color: #28C840; line-height: 1;
      margin-bottom: 6px; position: relative; z-index: 1;
    }
    .kd-response-time sub { font-size: 16px; color: rgba(255,255,255,0.5); }
    .kd-response-desc {
      font-size: 13px; color: rgba(255,255,255,0.55);
      line-height: 1.6; position: relative; z-index: 1;
    }

    /* Rating card */
    .kd-rating-card {
      background: var(--kd-white);
      border: 1.5px solid var(--kd-border);
      border-radius: var(--kd-radius-lg);
      padding: 22px;
      display: flex; align-items: center; gap: 16px;
    }
    .kd-rating-big {
      font-size: 40px; font-weight: 800;
      color: var(--kd-primary); line-height: 1;
    }
    .kd-rating-stars { color: #FFB800; font-size: 18px; margin-bottom: 4px; }
    .kd-rating-source { font-size: 12px; color: var(--kd-text-muted); }

    /* Testimonial pull quote */
    .kd-pullquote {
      background: var(--kd-primary-light);
      border: 1.5px solid rgba(0,128,255,0.18);
      border-left: 4px solid var(--kd-primary);
      border-radius: var(--kd-radius-md);
      padding: 22px 20px;
    }
    .kd-pullquote-text {
      font-size: 14px; font-style: italic;
      color: var(--kd-text-heading); line-height: 1.7;
      margin-bottom: 14px;
    }
    .kd-pullquote-author {
      display: flex; align-items: center; gap: 10px;
    }
    .kd-pullquote-avatar {
      width: 36px; height: 36px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 12px; font-weight: 800; color: white;
      flex-shrink: 0;
    }
    .kd-pullquote-name { font-size: 13px; font-weight: 700; color: var(--kd-text-heading); }
    .kd-pullquote-role { font-size: 11.5px; color: var(--kd-text-muted); }

    /* School count strip */
    .kd-school-count-strip {
      background: var(--kd-white);
      border: 1.5px solid var(--kd-border);
      border-radius: var(--kd-radius-md);
      padding: 18px 20px;
      display: flex; align-items: center; gap: 14px;
    }
    .kd-school-count-num {
      font-size: 32px; font-weight: 800;
      color: var(--kd-primary); line-height: 1; flex-shrink: 0;
    }
    .kd-school-count-label {
      font-size: 13px; color: var(--kd-text-muted); line-height: 1.5;
    }

    /* ── What happens next ── */
    .kd-next-section { padding: 88px 0; }

    .kd-next-steps {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
      margin-top: 48px;
    }

    .kd-next-step {
      background: var(--kd-white);
      border: 1.5px solid var(--kd-border);
      border-radius: var(--kd-radius-lg);
      padding: 32px 26px;
      text-align: center;
      position: relative;
      overflow: hidden;
      transition: var(--kd-transition);
    }

    .kd-next-step:hover {
      transform: translateY(-4px);
      box-shadow: var(--kd-shadow-hover);
      border-color: rgba(0,128,255,0.22);
    }

    /* Subtle number watermark */
    .kd-next-step-watermark {
      position: absolute; top: -16px; right: 14px;
      font-size: 88px; font-weight: 800;
      color: var(--kd-primary-light);
      line-height: 1; user-select: none;
      pointer-events: none;
    }

    .kd-next-step-icon {
      width: 64px; height: 64px;
      border-radius: 50%;
      background: var(--kd-primary);
      display: flex; align-items: center; justify-content: center;
      margin: 0 auto 20px;
      box-shadow: 0 8px 24px rgba(0,128,255,0.25);
      font-size: 26px;
      position: relative; z-index: 1;
    }

    .kd-next-step h3 {
      font-size: 18px; font-weight: 800;
      color: var(--kd-text-heading);
      margin-bottom: 10px; position: relative; z-index: 1;
    }

    .kd-next-step p {
      font-size: 13.5px; color: var(--kd-text-body);
      line-height: 1.7; margin-bottom: 16px;
      position: relative; z-index: 1;
    }

    .kd-next-step-time {
      font-size: 12px; font-weight: 700;
      color: var(--kd-primary); background: var(--kd-primary-light);
      padding: 4px 14px; border-radius: var(--kd-radius-pill);
      display: inline-block; position: relative; z-index: 1;
    }

    /* Connector arrows between steps */
    .kd-next-connector {
      display: flex; align-items: center; justify-content: center;
      color: var(--kd-primary); font-size: 22px; opacity: 0.35;
      position: relative; z-index: 1;
    }

    @media (max-width: 767px) {
      .kd-next-steps { grid-template-columns: 1fr; }
      .kd-form-card { padding: 28px 20px; }
    }


    /* ── Contact methods grid ── */
    .kd-contact-methods-section { padding: 88px 0; }

    .kd-contact-methods-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
    }

    .kd-contact-method-card {
      background: var(--kd-white);
      border: 1.5px solid var(--kd-border);
      border-radius: var(--kd-radius-lg);
      padding: 28px 20px;
      text-align: center;
      text-decoration: none;
      display: flex; flex-direction: column;
      align-items: center; gap: 12px;
      transition: var(--kd-transition);
      position: relative; overflow: hidden;
    }

    .kd-contact-method-card::after {
      content: ''; position: absolute;
      bottom: 0; left: 0; right: 0; height: 3px;
      transform: scaleX(0); transform-origin: left;
      transition: transform 0.3s ease;
    }

    .kd-cm-whatsapp::after  { background: #25D366; }
    .kd-cm-call::after       { background: var(--kd-primary); }
    .kd-cm-email::after      { background: var(--kd-accent); }
    .kd-cm-office::after     { background: var(--kd-secondary); }

    .kd-contact-method-card:hover {
      transform: translateY(-5px);
      box-shadow: var(--kd-shadow-hover);
    }
    .kd-contact-method-card:hover::after { transform: scaleX(1); }

    .kd-cm-icon-circle {
      width: 56px; height: 56px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 24px;
    }

    .kd-cm-label {
      font-size: 11px; font-weight: 700;
      text-transform: uppercase; letter-spacing: .06em;
      color: var(--kd-text-muted);
    }

    .kd-cm-value {
      font-size: 15px; font-weight: 700;
      color: var(--kd-text-heading); line-height: 1.3;
    }

    .kd-cm-note {
      font-size: 12px; color: var(--kd-text-muted);
    }

    .kd-cm-badge {
      font-size: 11px; font-weight: 700;
      padding: 3px 10px; border-radius: var(--kd-radius-pill);
    }

    @media (max-width: 767px) {
      .kd-contact-methods-grid { grid-template-columns: 1fr 1fr; }
      .kd-objection-item { border-right: none; border-bottom: 1px solid var(--kd-border); padding-bottom: 20px; }
    }

    @media (max-width: 480px) {
      .kd-contact-methods-grid { grid-template-columns: 1fr; }
    }








/*  404 Page */
/* ── DOT GRID BACKGROUND ── */
    .kd-404-section {
      width: 100%;
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
      padding: 60px 24px;
      background-color: var(--kd-secondary);
      background-image: radial-gradient(rgba(255,255,255,0.045) 1px, transparent 1px);
      background-size: 28px 28px;
    }

    /* Ambient glow blobs */
    .kd-404-glow {
      position: absolute;
      border-radius: 50%;
      pointer-events: none;
      filter: blur(80px);
    }

    .kd-404-glow-1 {
      width: 500px; height: 500px;
      top: -140px; right: -100px;
      background: radial-gradient(circle, rgba(0,128,255,0.18) 0%, transparent 70%);
    }

    .kd-404-glow-2 {
      width: 360px; height: 360px;
      bottom: -100px; left: -80px;
      background: radial-gradient(circle, rgba(27,20,100,0.40) 0%, transparent 70%);
    }

    .kd-404-glow-3 {
      width: 240px; height: 240px;
      top: 40%; left: 20%;
      background: radial-gradient(circle, rgba(255,159,28,0.08) 0%, transparent 70%);
    }

    /* ── INNER LAYOUT ── */
    .kd-404-inner {
      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      max-width: 680px;
      width: 100%;
    }

    /* ── LOGO ── */
    .kd-404-logo {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      text-decoration: none;
      margin-bottom: 48px;
      opacity: 0;
      animation: kd-fadein-up 0.6s ease 0.1s forwards;
    }

    .kd-404-logo-mark {
      width: 36px; height: 36px; border-radius: 9px;
      background: var(--kd-primary);
      display: flex; align-items: center; justify-content: center;
      font-size: 13px; font-weight: 800; color: white;
      letter-spacing: -0.5px;
    }

    .kd-404-logo-text {
      font-size: 20px; font-weight: 800;
      color: var(--kd-white);
    }

    .kd-404-logo-text span { color: var(--kd-primary); }

    /* ── ILLUSTRATION ── */
    .kd-404-illustration {
      width: 100%;
      max-width: 460px;
      margin-bottom: 40px;
      opacity: 0;
      animation: kd-fadein-up 0.7s ease 0.2s forwards;
    }

    /* ── 404 NUMBER ── */
    .kd-404-number {
      font-size: clamp(80px, 18vw, 140px);
      font-weight: 800;
      line-height: 1;
      letter-spacing: -4px;
      color: transparent;
      -webkit-text-stroke: 2px rgba(255,255,255,0.12);
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      pointer-events: none;
      user-select: none;
      white-space: nowrap;
    }

    /* ── HEADING ── */
    .kd-404-heading {
      font-size: clamp(24px, 5vw, 36px);
      font-weight: 800;
      color: var(--kd-white);
      line-height: 1.2;
      margin-bottom: 14px;
      opacity: 0;
      animation: kd-fadein-up 0.7s ease 0.35s forwards;
    }

    .kd-404-heading em {
      font-style: normal;
      color: var(--kd-accent);
    }

    /* ── SUBTEXT ── */
    .kd-404-sub {
      font-size: 16px;
      color: rgba(255,255,255,0.50);
      line-height: 1.7;
      max-width: 480px;
      margin-bottom: 36px;
      opacity: 0;
      animation: kd-fadein-up 0.7s ease 0.45s forwards;
    }

    /* ── CTAs ── */
    .kd-404-ctas {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      justify-content: center;
      margin-bottom: 48px;
      opacity: 0;
      animation: kd-fadein-up 0.7s ease 0.55s forwards;
    }

    .kd-btn-home {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: var(--kd-primary);
      color: white;
      font-size: 15px;
      font-weight: 700;
      padding: 14px 28px;
      border-radius: var(--kd-radius-pill);
      text-decoration: none;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
      box-shadow: 0 8px 24px rgba(0,128,255,0.32);
    }

    .kd-btn-home:hover {
      transform: translateY(-2px);
      box-shadow: 0 12px 32px rgba(0,128,255,0.42);
      color: white;
    }

    .kd-btn-wa {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: rgba(255,255,255,0.08);
      border: 1.5px solid rgba(255,255,255,0.15);
      color: rgba(255,255,255,0.80);
      font-size: 15px;
      font-weight: 600;
      padding: 14px 28px;
      border-radius: var(--kd-radius-pill);
      text-decoration: none;
      transition: background 0.2s ease, border-color 0.2s ease;
    }

    .kd-btn-wa:hover {
      background: rgba(255,255,255,0.14);
      border-color: rgba(255,255,255,0.30);
      color: white;
    }

    /* ── QUICK LINKS ── */
    .kd-404-links-label {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: rgba(255,255,255,0.25);
      margin-bottom: 14px;
      opacity: 0;
      animation: kd-fadein-up 0.7s ease 0.65s forwards;
    }

    .kd-404-links {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      justify-content: center;
      opacity: 0;
      animation: kd-fadein-up 0.7s ease 0.72s forwards;
    }

    .kd-404-link {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 8px 16px;
      border: 1px solid rgba(255,255,255,0.10);
      border-radius: var(--kd-radius-pill);
      background: rgba(255,255,255,0.05);
      color: rgba(255,255,255,0.55);
      font-size: 13px;
      font-weight: 600;
      text-decoration: none;
      transition: background 0.2s, border-color 0.2s, color 0.2s;
    }

    .kd-404-link:hover {
      background: rgba(0,128,255,0.15);
      border-color: rgba(0,128,255,0.35);
      color: rgba(0,128,255,0.95);
    }

    .kd-404-link-icon {
      font-size: 15px;
      opacity: 0.8;
    }

    /* ── ANIMATIONS ── */
    @keyframes kd-fadein-up {
      from { opacity: 0; transform: translateY(20px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    @keyframes kd-float {
      0%, 100% { transform: translateY(0px); }
      50%       { transform: translateY(-12px); }
    }

    @keyframes kd-spin-slow {
      from { transform: rotate(0deg); }
      to   { transform: rotate(360deg); }
    }

    @keyframes kd-dash {
      0%   { stroke-dashoffset: 800; }
      100% { stroke-dashoffset: 0; }
    }

    @keyframes kd-blink {
      0%, 100% { opacity: 1; }
      50%       { opacity: 0.3; }
    }

    /* Float the whole illustration */
    .kd-404-illustration svg {
      animation: kd-float 5s ease-in-out infinite;
    }

    /* Spin the orbit ring */
    .kd-orbit-ring {
      transform-origin: 230px 200px;
      animation: kd-spin-slow 12s linear infinite;
    }

    /* Draw the dashed search path */
    .kd-search-path {
      stroke-dasharray: 800;
      animation: kd-dash 2s ease 0.8s forwards;
    }

    /* Blink the cursor on the address bar */
    .kd-cursor-blink {
      animation: kd-blink 1.1s ease-in-out infinite;
    }

    /* Responsive */
    @media (max-width: 480px) {
      .kd-404-ctas { flex-direction: column; align-items: center; }
      .kd-btn-home, .kd-btn-wa { width: 100%; justify-content: center; }
    }






    /*. Page Not Found  */
    /* ── SECTION SHELL ── */
    .kd-cs-section {
      width: 100%;
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
      padding: 60px 24px;
      background-color: var(--kd-secondary);
      background-image: radial-gradient(rgba(255,255,255,0.045) 1px, transparent 1px);
      background-size: 28px 28px;
    }

    /* Ambient glows */
    .kd-cs-glow {
      position: absolute;
      border-radius: 50%;
      pointer-events: none;
      filter: blur(90px);
    }
    .kd-cs-glow-1 {
      width: 520px; height: 520px;
      top: -160px; left: -100px;
      background: radial-gradient(circle, rgba(0,128,255,0.16) 0%, transparent 70%);
    }
    .kd-cs-glow-2 {
      width: 380px; height: 380px;
      bottom: -120px; right: -80px;
      background: radial-gradient(circle, rgba(255,159,28,0.10) 0%, transparent 70%);
    }
    .kd-cs-glow-3 {
      width: 260px; height: 260px;
      top: 55%; right: 20%;
      background: radial-gradient(circle, rgba(40,200,64,0.06) 0%, transparent 70%);
    }

    /* ── INNER ── */
    .kd-cs-inner {
      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      max-width: 700px;
      width: 100%;
    }

    /* ── LOGO ── */
    .kd-cs-logo {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      text-decoration: none;
      margin-bottom: 44px;
      opacity: 0;
      animation: kd-fadein-up 0.6s ease 0.1s forwards;
    }
    .kd-cs-logo-mark {
      width: 36px; height: 36px; border-radius: 9px;
      background: var(--kd-primary);
      display: flex; align-items: center; justify-content: center;
      font-size: 13px; font-weight: 800; color: white;
    }
    .kd-cs-logo-text {
      font-size: 20px; font-weight: 800; color: var(--kd-white);
    }
    .kd-cs-logo-text span { color: var(--kd-primary); }

    /* ── ILLUSTRATION ── */
    .kd-cs-illustration {
      width: 100%;
      max-width: 500px;
      margin-bottom: 40px;
      opacity: 0;
      animation: kd-fadein-up 0.7s ease 0.2s forwards;
    }

    /* Float the whole SVG */
    .kd-cs-illustration svg {
      animation: kd-float 6s ease-in-out infinite;
    }

    /* Spin the large orbit ring */
    .kd-orbit-outer {
      transform-origin: 250px 180px;
      animation: kd-spin-ccw 18s linear infinite;
    }

    /* Counter-spin small ring */
    .kd-orbit-inner {
      transform-origin: 250px 180px;
      animation: kd-spin-cw 10s linear infinite;
    }

    /* Pulse ring on the school building */
    .kd-pulse-ring {
      animation: kd-pulse-ring 2.8s ease-out infinite;
      transform-origin: 250px 178px;
    }

    /* Progress bar fill */
    .kd-progress-fill {
      animation: kd-progress-grow 3s ease 1.2s forwards;
    }

    /* Blink cursor on label -->
    .kd-cursor {
      animation: kd-blink 1.1s ease-in-out infinite;
    }

    /* ── TEXT ── */
    .kd-cs-eyebrow {
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.10em;
      color: var(--kd-accent);
      margin-bottom: 14px;
      display: flex;
      align-items: center;
      gap: 8px;
      opacity: 0;
      animation: kd-fadein-up 0.7s ease 0.38s forwards;
    }
    .kd-cs-eyebrow-dot {
      width: 7px; height: 7px; border-radius: 50%;
      background: var(--kd-accent);
      animation: kd-pulse-dot 2s ease-in-out infinite;
    }

    .kd-cs-heading {
      font-size: clamp(26px, 5vw, 44px);
      font-weight: 800;
      color: var(--kd-white);
      line-height: 1.15;
      margin-bottom: 16px;
      opacity: 0;
      animation: kd-fadein-up 0.7s ease 0.48s forwards;
    }
    .kd-cs-heading em {
      font-style: normal;
      color: var(--kd-accent);
    }

    .kd-cs-sub {
      font-size: 16px;
      color: rgba(255,255,255,0.50);
      line-height: 1.75;
      max-width: 500px;
      margin-bottom: 40px;
      opacity: 0;
      animation: kd-fadein-up 0.7s ease 0.56s forwards;
    }

    /* ── PROGRESS BAR ── */
    .kd-cs-progress-wrap {
      width: 100%;
      max-width: 420px;
      margin-bottom: 40px;
      opacity: 0;
      animation: kd-fadein-up 0.7s ease 0.64s forwards;
    }
    .kd-cs-progress-label {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;
    }
    .kd-cs-progress-text {
      font-size: 12.5px;
      font-weight: 700;
      color: rgba(255,255,255,0.40);
      letter-spacing: 0.04em;
    }
    .kd-cs-progress-pct {
      font-size: 13px;
      font-weight: 800;
      color: var(--kd-accent);
    }
    .kd-cs-progress-track {
      height: 6px;
      background: rgba(255,255,255,0.08);
      border-radius: 100px;
      overflow: hidden;
    }
    .kd-cs-progress-bar {
      height: 100%;
      width: 0;
      border-radius: 100px;
      background: linear-gradient(90deg, var(--kd-primary), var(--kd-accent));
      animation: kd-progress-grow 2.4s cubic-bezier(0.22,1,0.36,1) 1s forwards;
    }

    /* Build phase pills -->
    .kd-cs-phases {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      justify-content: center;
      margin-top: 16px;
    }
    .kd-cs-phase {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 5px 14px;
      border-radius: var(--kd-radius-pill);
      font-size: 12px;
      font-weight: 600;
    }
    .kd-cs-phase--done {
      background: rgba(40,200,64,0.12);
      border: 1px solid rgba(40,200,64,0.25);
      color: var(--kd-success);
    }
    .kd-cs-phase--active {
      background: rgba(255,159,28,0.15);
      border: 1px solid rgba(255,159,28,0.35);
      color: var(--kd-accent);
    }
    .kd-cs-phase--pending {
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.10);
      color: rgba(255,255,255,0.30);
    }
    .kd-cs-phase-dot {
      width: 6px; height: 6px; border-radius: 50%;
    }
    .kd-cs-phase--done   .kd-cs-phase-dot { background: var(--kd-success); }
    .kd-cs-phase--active .kd-cs-phase-dot {
      background: var(--kd-accent);
      animation: kd-pulse-dot 1.8s ease-in-out infinite;
    }
    .kd-cs-phase--pending .kd-cs-phase-dot { background: rgba(255,255,255,0.2); }

    /* ── NOTIFY FORM ── */
    .kd-cs-notify {
      width: 100%;
      max-width: 440px;
      margin-bottom: 36px;
      opacity: 0;
      animation: kd-fadein-up 0.7s ease 0.72s forwards;
    }
    .kd-cs-notify-label {
      font-size: 13px;
      color: rgba(255,255,255,0.35);
      margin-bottom: 12px;
    }
    .kd-cs-notify-row {
      display: flex;
      gap: 8px;
    }
    .kd-cs-notify-input {
      flex: 1;
      padding: 13px 18px;
      background: rgba(255,255,255,0.07);
      border: 1.5px solid rgba(255,255,255,0.12);
      border-radius: var(--kd-radius-pill);
      color: white;
      font-size: 14px;
      font-family: inherit;
      outline: none;
      transition: border-color 0.2s;
    }
    .kd-cs-notify-input::placeholder { color: rgba(255,255,255,0.30); }
    .kd-cs-notify-input:focus {
      border-color: rgba(0,128,255,0.55);
      box-shadow: 0 0 0 4px rgba(0,128,255,0.10);
    }
    .kd-cs-notify-btn {
      padding: 13px 22px;
      background: var(--kd-primary);
      color: white;
      font-size: 14px;
      font-weight: 700;
      border: none;
      border-radius: var(--kd-radius-pill);
      cursor: pointer;
      font-family: inherit;
      transition: transform 0.2s, box-shadow 0.2s;
      box-shadow: 0 6px 20px rgba(0,128,255,0.28);
      white-space: nowrap;
    }
    .kd-cs-notify-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 28px rgba(0,128,255,0.38);
    }
    /* Success state */
    .kd-cs-notify-success {
      display: none;
      align-items: center;
      gap: 10px;
      padding: 14px 20px;
      background: rgba(40,200,64,0.12);
      border: 1px solid rgba(40,200,64,0.25);
      border-radius: var(--kd-radius-pill);
      font-size: 13.5px;
      font-weight: 600;
      color: var(--kd-success);
    }

    /* ── CTAs ── */
    .kd-cs-ctas {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      justify-content: center;
      opacity: 0;
      animation: kd-fadein-up 0.7s ease 0.80s forwards;
    }
    .kd-btn-home {
      display: inline-flex; align-items: center; gap: 8px;
      background: rgba(255,255,255,0.08);
      border: 1.5px solid rgba(255,255,255,0.15);
      color: rgba(255,255,255,0.80);
      font-size: 14px; font-weight: 600;
      padding: 12px 24px;
      border-radius: var(--kd-radius-pill);
      text-decoration: none;
      transition: background 0.2s, border-color 0.2s, color 0.2s;
    }
    .kd-btn-home:hover {
      background: rgba(255,255,255,0.14);
      border-color: rgba(255,255,255,0.30);
      color: white;
    }
    .kd-btn-wa {
      display: inline-flex; align-items: center; gap: 8px;
      background: #25D366; color: white;
      font-size: 14px; font-weight: 700;
      padding: 12px 24px;
      border-radius: var(--kd-radius-pill);
      text-decoration: none;
      box-shadow: 0 6px 20px rgba(37,211,102,0.28);
      transition: transform 0.2s, box-shadow 0.2s;
    }
    .kd-btn-wa:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 28px rgba(37,211,102,0.38);
      color: white;
    }

    /* ── KEYFRAMES ── */
    @keyframes kd-fadein-up {
      from { opacity: 0; transform: translateY(20px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes kd-float {
      0%, 100% { transform: translateY(0px); }
      50%       { transform: translateY(-10px); }
    }
    @keyframes kd-spin-ccw {
      from { transform: rotate(0deg); }
      to   { transform: rotate(-360deg); }
    }
    @keyframes kd-spin-cw {
      from { transform: rotate(0deg); }
      to   { transform: rotate(360deg); }
    }
    @keyframes kd-pulse-ring {
      0%   { transform: scale(1);   opacity: 0.5; }
      70%  { transform: scale(1.5); opacity: 0; }
      100% { transform: scale(1.5); opacity: 0; }
    }
    @keyframes kd-pulse-dot {
      0%, 100% { opacity: 1; transform: scale(1); }
      50%       { opacity: 0.4; transform: scale(0.7); }
    }
    @keyframes kd-progress-grow {
      from { width: 0; }
      to   { width: 72%; }
    }
    @keyframes kd-blink {
      0%, 100% { opacity: 1; }
      50%       { opacity: 0; }
    }

    /* ── RESPONSIVE ── */
    @media (max-width: 480px) {
      .kd-cs-notify-row { flex-direction: column; }
      .kd-cs-notify-btn { width: 100%; justify-content: center; }
      .kd-cs-ctas { flex-direction: column; align-items: center; }
      .kd-btn-home, .kd-btn-wa { width: 100%; justify-content: center; }
    }