:root{--bg:#050812;--panel:#0c1424;--text:#f3f7ff;--muted:#a7b3c7;--blue:#38bdf8;--violet:#8b5cf6;--line:rgba(148,163,184,.2)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:Arial,Helvetica,sans-serif}a{color:inherit;text-decoration:none}.hidden{display:none!important}.screen{min-height:100vh;position:relative;overflow:hidden;background:radial-gradient(ellipse at 50% 48%,#132b50 0%,#080f20 38%,#03050b 78%)}.welcome-screen{display:grid;place-items:center;text-align:center}.welcome-glow{position:absolute;width:70vw;height:70vw;border:1px solid rgba(56,189,248,.15);border-radius:50%;box-shadow:0 0 100px rgba(56,189,248,.12),inset 0 0 100px rgba(139,92,246,.1);animation:pulse 5s infinite alternate}.welcome-content{position:relative;padding:30px 20px}.eyebrow{color:var(--blue);font-size:.72rem;letter-spacing:.28em;font-weight:bold}.brand-mark{font-size:clamp(2.5rem,8vw,6rem);font-weight:900;letter-spacing:.12em;margin:25px 0;background:linear-gradient(90deg,#fff,#63d5ff,#a78bfa);color:transparent;background-clip:text}.brand-mark span,.logo span{color:var(--blue)}h1{font-size:clamp(2rem,6vw,4.8rem);line-height:1.02;margin:15px 0}h1 span,h2 span{color:var(--blue)}.tagline{color:#c4d4e9;letter-spacing:.2em}.primary-btn,.secondary-btn,.skip-btn{display:inline-flex;align-items:center;justify-content:center;gap:18px;border:0;padding:16px 24px;font-weight:800;letter-spacing:.1em;cursor:pointer}.primary-btn{color:#04101c;background:linear-gradient(100deg,#38bdf8,#8b5cf6);box-shadow:0 0 28px rgba(56,189,248,.25);border-radius:3px}.welcome-content .primary-btn{margin-top:35px}.small-note{color:#8292aa;font-size:.75rem;letter-spacing:.2em;margin-top:35px}.video-screen{display:grid;place-items:center;background:#000}.video-screen video{width:100%;height:100vh;object-fit:contain}.video-overlay{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:25px 5vw;pointer-events:none}.video-brand{font-weight:900;letter-spacing:.2em}.skip-btn{pointer-events:auto;background:rgba(5,10,20,.7);color:white;border:1px solid var(--line)}.video-help{position:absolute;bottom:15px;left:20px;color:#9aa9bf;font-size:.75rem;background:#0008;padding:8px}.site-header{height:76px;position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;padding:0 6vw;background:rgba(4,8,17,.88);backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}.logo{font-weight:900;letter-spacing:.12em;font-size:1.25rem}.site-header nav{display:flex;gap:28px;color:#c5d2e5;font-size:.9rem}.site-header nav a:hover{color:var(--blue)}.menu-toggle{display:none;background:none;color:white;border:0;font-size:1.5rem}.hero{min-height:680px;display:flex;align-items:center;justify-content:space-between;padding:80px 9vw;position:relative;overflow:hidden;background:radial-gradient(ellipse at 80% 45%,#132a4a 0%,transparent 45%)}.hero-copy{max-width:610px;position:relative;z-index:2}.hero h1{font-size:clamp(3.2rem,8vw,7rem);letter-spacing:-.06em}.hero-copy>p:not(.eyebrow){max-width:540px;color:var(--muted);font-size:1.1rem;line-height:1.8}.hero-actions{display:flex;gap:15px;flex-wrap:wrap;margin-top:32px}.link-btn{font-size:.8rem}.secondary-btn{border:1px solid var(--line);color:#dce9f8;background:transparent;font-size:.8rem}.hero-visual{width:min(38vw,430px);aspect-ratio:1;position:relative;display:grid;place-items:center}.tech-ring{position:absolute;border:1px solid rgba(56,189,248,.4);border-radius:50%;box-shadow:0 0 35px #38bdf822,inset 0 0 35px #8b5cf622}.ring-a{inset:3%;animation:spin 24s linear infinite}.ring-b{inset:16%;border-color:rgba(167,139,250,.5);animation:spin 18s linear infinite reverse}.core{width:42%;aspect-ratio:1;display:grid;place-items:center;border-radius:28%;font-size:4rem;font-weight:900;background:linear-gradient(145deg,#123e63,#21164d);box-shadow:0 0 70px #38bdf855;border:1px solid #6dd5ff88}.core span{color:var(--blue)}.floating-label{position:absolute;font-size:.65rem;letter-spacing:.18em;color:#bdeaff;background:#071426;border:1px solid #38bdf855;padding:10px 13px}.label-top{top:15%;right:-5%}.label-bottom{bottom:12%;left:-12%}.section{padding:110px 9vw}.section h2{font-size:clamp(2.2rem,5vw,4.2rem);max-width:850px;margin:15px 0}.section-lead{color:var(--muted);max-width:760px;line-height:1.8}.intro{background:#080e1a}.value-grid,.product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:45px}.value-grid article,.product-card{background:linear-gradient(145deg,#101d31,#09111f);border:1px solid var(--line);padding:25px;min-height:190px}.value-grid b,.card-number{color:var(--blue);letter-spacing:.15em;font-size:.8rem}.value-grid h3,.product-card h3{font-size:1.2rem}.value-grid p,.product-card p{color:var(--muted);line-height:1.7;font-size:.9rem}.products{background:#050812}.product-card{min-height:245px;transition:transform .25s,border-color .25s}.product-card:hover{transform:translateY(-6px);border-color:#38bdf899}.product-card a{display:inline-block;color:var(--blue);font-size:.82rem;margin-top:10px}.custom-cta{margin-top:35px;padding:30px;background:linear-gradient(100deg,#102c48,#211640);display:flex;align-items:center;justify-content:space-between;gap:20px}.custom-cta h3{font-size:1.7rem;margin:8px 0}.gallery{background:#080e1a}.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:35px}.gallery-tile{min-height:260px;display:flex;align-items:end;padding:22px;background:linear-gradient(145deg,#153c5a,#17102e 70%,#070b15);border:1px solid var(--line);position:relative;overflow:hidden}.gallery-tile:before{content:"";position:absolute;width:180px;height:180px;border:1px solid #69d5ff66;border-radius:50%;right:-30px;top:-30px;box-shadow:0 0 50px #38bdf833}.gallery-tile span{font-size:.8rem;letter-spacing:.15em;z-index:1}.contact form{max-width:760px;margin-top:35px;display:grid;gap:14px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}input,textarea{width:100%;padding:16px;background:#0c1627;border:1px solid var(--line);color:white;font:inherit;outline:none}input:focus,textarea:focus{border-color:var(--blue)}textarea{resize:vertical}.contact form button{justify-self:start}.form-note{color:#8292aa;font-size:.8rem;max-width:760px;line-height:1.6}footer{padding:40px 9vw;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:15px;flex-wrap:wrap;color:var(--muted)}footer p{font-size:.85rem}footer small{width:100%;font-size:.75rem}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{to{transform:scale(1.08);opacity:.55}}@media(max-width:900px){.value-grid,.product-grid{grid-template-columns:repeat(2,1fr)}.hero{padding:75px 7vw}.hero-visual{width:32vw}.site-header nav{gap:14px}}@media(max-width:680px){.site-header{height:66px}.menu-toggle{display:block}.site-header nav{display:none;position:absolute;top:66px;left:0;right:0;padding:20px;background:#07101f;flex-direction:column}.site-header nav.open{display:flex}.hero{min-height:700px;display:block;padding-top:85px}.hero-visual{width:70vw;margin:55px auto 0}.section{padding:75px 7vw}.value-grid,.product-grid,.gallery-grid,.form-row{grid-template-columns:1fr}.custom-cta{align-items:flex-start;flex-direction:column}.video-overlay{padding:15px}.video-help{max-width:80%}}

/* ===== KAILOTECH FUTURISTIC NAVIGATION ===== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 6%;
  background: rgba(5, 12, 10, 0.96);
  border-bottom: 1px solid rgba(0, 255, 150, 0.2);
  backdrop-filter: blur(18px);
}

.site-header .logo {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #ffffff;
  text-decoration: none;
  font-size: 25px;
  font-weight: 800;
  letter-spacing: 1px;
}

.site-header .logo img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  border-radius: 8px;
}

.logo-accent {
  color: #00e68a;
}

.site-header nav {
  display: flex;
  align-items: center;
  gap: 32px;
}

.site-header nav a {
  color: #d5e5dc;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  transition: 0.3s ease;
}

.site-header nav a:hover {
  color: #00ee91;
}

.site-header nav .nav-contact {
  padding: 12px 22px;
  border: 1px solid #00e68a;
  border-radius: 6px;
  color: #00ee91;
}

.site-header nav .nav-contact:hover {
  background: #00e68a;
  color: #06130d;
}

.site-header .menu-toggle {
  color: #00ee91;
  background: transparent;
  border: 1px solid #00e68a;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 22px;
  cursor: pointer;
}

@media (max-width: 768px) {
  .site-header {
    padding: 12px 5%;
  }

  .site-header .logo img {
    width: 40px;
    height: 40px;
  }

  .site-header nav {
    gap: 16px;
  }
}


/* ===== KAILOTECH LOGO: TOP CENTRE ===== */

.welcome-logo-wrap {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 22px;
}

.welcome-main-logo {
    display: block;
    width: 125px;
    height: 120px;
    object-fit: contain;
    object-position: center;
    background: #ffffff;
    border-radius: 10px;
    padding: 3px;
    box-shadow: 0 0 30px rgba(0, 200, 255, 0.2);
}

@media (max-width: 600px) {
    .welcome-main-logo {
        width: 100px;
        height: 95px;
    }

    .welcome-logo-wrap {
        margin-bottom: 15px;
    }
}


/* ===== KAILOTECH TECHNOLOGY BACKGROUND ===== */

#welcomeScreen {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #020906;
}

.welcome-bg-tech {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  overflow: hidden;
}

.welcome-bg-panel {
  position: relative;
  min-width: 0;
  overflow: hidden;
}

.welcome-bg-panel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .55;
  filter: saturate(.8);
  animation: techImageFloat 18s ease-in-out infinite alternate;
}

.welcome-bg-panel:nth-child(even) img {
  animation-delay: -7s;
}

.welcome-bg-panel span {
  position: absolute;
  bottom: 25px;
  left: 10px;
  right: 10px;
  text-align: center;
  color: #a5ffda;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  opacity: .8;
}

#welcomeScreen::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(2,9,6,.78), rgba(2,9,6,.35), rgba(2,9,6,.78)),
    linear-gradient(0deg, rgba(2,9,6,.85), rgba(2,9,6,.45), rgba(2,9,6,.85));
}

#welcomeScreen .welcome-content {
  position: relative;
  z-index: 2;
}

/* Subtle movement in background images */
@keyframes techImageFloat {
  from { transform: scale(1); }
  to { transform: scale(1.13); }
}

/* ===== LETTER-BY-LETTER WELCOME ANIMATION ===== */

#welcomeScreen .kailo-animated-letter {
  display: inline-block;
  opacity: 0;
  transform: translateY(35px) rotateX(75deg);
  animation: kailoLetterEntrance .65s cubic-bezier(.2,.8,.2,1) forwards;
  animation-delay: calc(var(--letter-index) * .055s + .2s);
}

@keyframes kailoLetterEntrance {
  to {
    opacity: 1;
    transform: translateY(0) rotateX(0);
  }
}

@media (max-width: 700px) {
  .welcome-bg-tech {
    grid-template-columns: repeat(2, 1fr);
  }

  .welcome-bg-panel span {
    font-size: 8px;
    letter-spacing: 1px;
  }
}


/* =====================================
   KAILOTECH PREMIUM HOMEPAGE HERO
===================================== */

.kailo-hero {
  position: relative;
  min-height: 690px;
  padding: 100px 7%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 55px;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 80% 50%, rgba(0, 230, 130, .10), transparent 45%),
    #050d09;
  color: #f3fff8;
}

.hero-background-glow {
  position: absolute;
  width: 500px;
  height: 500px;
  right: 10%;
  top: 10%;
  border-radius: 50%;
  background: rgba(0, 230, 130, .08);
  filter: blur(100px);
  pointer-events: none;
}

.kailo-hero-copy {
  position: relative;
  z-index: 2;
  max-width: 620px;
}

.kailo-hero-copy .eyebrow {
  color: #00ed91;
  letter-spacing: 4px;
  font-size: 12px;
  font-weight: 800;
}

.kailo-hero-copy h1 {
  color: #f2fff8;
  font-size: clamp(43px, 5.2vw, 76px);
  line-height: 1.08;
  font-weight: 900;
  letter-spacing: -2px;
  margin: 25px 0;
}

.kailo-hero-copy h1 span {
  color: #00ed91;
}

.hero-description {
  max-width: 490px;
  color: #a8c4b5;
  font-size: 17px;
  line-height: 1.8;
  margin-bottom: 30px;
}

.kailo-hero .hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-bottom: 45px;
}

.kailo-hero .primary-btn {
  background: #00ed91;
  color: #03120a;
  border: 1px solid #00ed91;
  text-decoration: none;
  padding: 16px 24px;
  border-radius: 5px;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 1px;
  transition: .3s ease;
}

.kailo-hero .primary-btn:hover {
  background: #ffffff;
  border-color: #ffffff;
  transform: translateY(-4px);
}

.kailo-hero .secondary-btn {
  color: #e8fff3;
  border: 1px solid rgba(0, 237, 145, .55);
  padding: 16px 24px;
  border-radius: 5px;
  text-decoration: none;
  font-weight: 700;
  font-size: 12px;
  transition: .3s ease;
}

.kailo-hero .secondary-btn:hover {
  background: rgba(0, 237, 145, .12);
  border-color: #00ed91;
}

.hero-stat-line {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  color: #6c9680;
  font-size: 10px;
  letter-spacing: 2px;
  font-weight: 700;
}

.kailo-hero-visual {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 570px;
  margin: auto;
}

.hero-image-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  transform: perspective(1000px) rotateY(-5deg);
}

.hero-tech-image {
  height: 220px;
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid rgba(0, 237, 145, .25);
  background: #102018;
}

.hero-tech-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .82;
  transition: transform .7s ease, opacity .4s ease;
}

.hero-tech-image:hover img {
  transform: scale(1.12);
  opacity: 1;
}

.hero-image-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 28px 13px 13px;
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  background: linear-gradient(transparent, rgba(0, 0, 0, .9));
}

.hero-image-caption span {
  color: #00ed91;
  margin-right: 6px;
}

.hero-floating-tag {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 18px;
  color: #a5d7bd;
  font-size: 10px;
  letter-spacing: 3px;
}

.hero-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #00ed91;
  box-shadow: 0 0 12px #00ed91;
  animation: heroPulse 1.5s infinite;
}

@keyframes heroPulse {
  50% { opacity: .3; transform: scale(.7); }
}

@media (max-width: 950px) {
  .kailo-hero {
    grid-template-columns: 1fr;
    padding: 75px 6%;
    gap: 45px;
  }

  .kailo-hero-copy {
    max-width: 100%;
  }

  .kailo-hero-visual {
    max-width: 650px;
  }
}

@media (max-width: 520px) {
  .kailo-hero {
    padding: 60px 5%;
  }

  .kailo-hero-copy h1 {
    font-size: 43px;
  }

  .hero-tech-image {
    height: 155px;
  }

  .hero-stat-line {
    gap: 12px;
    font-size: 9px;
  }
}


/* ===== KAILOTECH BRAND COLOUR STANDARD ===== */

:root {
  --kailo-bg: #020906;
  --kailo-dark: #06130c;
  --kailo-green: #00ed91;
  --kailo-accent: #00b968;
  --kailo-light: #b5ffdc;
}

.welcome-brand,
.welcome-brand span {
  color: var(--kailo-green) !important;
}

.welcome-enter-button button {
  background: var(--kailo-green) !important;
  color: #03120a !important;
}

.welcome-enter-button button:hover {
  background: #ffffff !important;
}

.welcome-screen {
  background-color: var(--kailo-bg) !important;
}

.logo-accent {
  color: var(--kailo-green) !important;
}

.site-header nav a:hover {
  color: var(--kailo-green) !important;
}


/* ===== KAILOTECH BRAND COLOUR STANDARD ===== */

:root {
  --kailo-bg: #020906;
  --kailo-dark: #06130c;
  --kailo-green: #00ed91;
  --kailo-accent: #00b968;
  --kailo-light: #b5ffdc;
}

.welcome-brand,
.welcome-brand span {
  color: var(--kailo-green) !important;
}

.welcome-enter-button button {
  background: var(--kailo-green) !important;
  color: #03120a !important;
}

.welcome-enter-button button:hover {
  background: #ffffff !important;
}

.welcome-screen {
  background-color: var(--kailo-bg) !important;
}

.logo-accent {
  color: var(--kailo-green) !important;
}

.site-header nav a:hover {
  color: var(--kailo-green) !important;
}


/* ===== KAILOTECH ABOUT SECTION ===== */

.kailo-about {
  padding: 110px 7%;
  background: #06130c;
  color: #f1fff7;
}

.about-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 65px;
}

.about-copy .eyebrow {
  color: #00ed91;
  letter-spacing: 4px;
  font-weight: 800;
  font-size: 12px;
}

.about-copy h2 {
  font-size: clamp(35px, 4vw, 55px);
  line-height: 1.15;
  margin: 22px 0;
}

.about-copy h2 span {
  color: #00ed91;
}

.about-copy .section-lead,
.about-description {
  color: #a9c5b5;
  font-size: 16px;
  line-height: 1.9;
}

.about-description {
  font-size: 14px;
  margin-bottom: 30px;
}

.about-visual {
  height: 420px;
  position: relative;
  overflow: hidden;
  border-radius: 15px;
  border: 1px solid rgba(0,237,145,.3);
}

.about-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s ease;
}

.about-visual:hover img {
  transform: scale(1.08);
}

.about-image-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 35px 25px 22px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  background: linear-gradient(transparent, rgba(0,0,0,.9));
}

.about-image-label span {
  color: #00ed91;
  font-size: 11px;
  letter-spacing: 3px;
}

.about-image-label strong {
  font-size: 19px;
  color: white;
}

.about-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 75px;
}

.about-feature {
  padding: 30px;
  border: 1px solid rgba(0,237,145,.2);
  border-radius: 10px;
  background: #0a1c12;
  transition: .35s ease;
}

.about-feature:hover {
  transform: translateY(-7px);
  border-color: #00ed91;
  background: #0d2518;
}

.about-feature span {
  color: #00ed91;
  font-size: 13px;
  font-weight: 800;
}

.about-feature h3 {
  color: #ffffff;
  font-size: 19px;
  letter-spacing: 2px;
  margin: 16px 0 10px;
}

.about-feature p {
  color: #a9c5b5;
  line-height: 1.7;
  font-size: 14px;
}

@media (max-width: 800px) {
  .about-layout {
    grid-template-columns: 1fr;
    gap: 35px;
  }

  .about-visual {
    height: 300px;
  }

  .about-feature-grid {
    grid-template-columns: 1fr;
    margin-top: 45px;
  }
}



/* KAILOTECH FULL SCREEN INTRO VIDEO FIX */

.video-screen {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    height: 100dvh !important;
    background: #000 !important;
    z-index: 99999 !important;
    overflow: hidden !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.video-screen.hidden {
    display: none !important;
}

.video-screen video {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    background: #000 !important;
}

.video-overlay {
    position: absolute !important;
    inset: 0 !important;
    z-index: 5 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    padding: 30px !important;
    pointer-events: none !important;
}

.video-brand,
.skip-btn {
    pointer-events: auto !important;
}

.skip-btn {
    cursor: pointer !important;
    padding: 12px 22px !important;
    border: 1px solid #fff !important;
    border-radius: 30px !important;
    background: rgba(0,0,0,.65) !important;
    color: white !important;
}

.video-brand {
    color: white !important;
    font-size: 24px !important;
    font-weight: bold !important;
    letter-spacing: 4px !important;
}


/* KAILOTECH FULLSCREEN CINEMATIC INTRO */
.video-screen {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #000 !important;
    z-index: 999999 !important;
}

.video-screen video {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    background: #000 !important;
}

.video-overlay .skip-btn,
#skipVideoButton {
    display: none !important;
}

.video-help {
    display: none !important;
}

/* BLUR GEMINI LOGO - BOTTOM RIGHT CORNER */
.video-screen::after {
    content: "";
    position: absolute;
    right: 18px;
    bottom: 18px;
    width: 170px;
    height: 100px;
    z-index: 10;
    pointer-events: none;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    background: rgba(0, 0, 0, 0.18);
    border-radius: 8px;
}

/* KAILOTECH ROYAL LUXURY LEFT NAVIGATION */
#menuToggle {
    position: fixed !important;
    top: 28px !important;
    left: 25px !important;
    right: auto !important;
    z-index: 100002 !important;
    cursor: pointer !important;
}

#mainNav {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 290px !important;
    height: 100vh !important;
    height: 100dvh !important;
    padding: 100px 30px 35px !important;
    background: #171827 !important;
    z-index: 100001 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 24px !important;
    overflow-y: auto !important;
    transform: translateX(-105%) !important;
    visibility: hidden !important;
    transition: transform .35s ease, visibility .35s ease !important;
    box-shadow: 12px 0 35px rgba(0,0,0,.25) !important;
}

#mainNav.open {
    transform: translateX(0) !important;
    visibility: visible !important;
}

#mainNav a {
    display: block !important;
    width: 100% !important;
    padding: 10px 0 !important;
    background: transparent !important;
    border: none !important;
    text-decoration: none !important;
    font-size: 21px !important;
    font-weight: 600 !important;
    letter-spacing: 1px !important;
    transition: .25s ease !important;
}

#mainNav a:nth-child(1) { color: #D4AF37 !important; }
#mainNav a:nth-child(2) { color: #E6C7A6 !important; }
#mainNav a:nth-child(3) { color: #C5A3FF !important; }
#mainNav a:nth-child(4) { color: #8CB9D9 !important; }
#mainNav a:nth-child(5) { color: #F2E6D0 !important; }

#mainNav a:hover {
    transform: translateX(8px) !important;
    text-shadow: 0 0 14px currentColor !important;
}

#mainNav a::before,
#mainNav a::after {
    content: none !important;
}

@media (max-width: 600px) {
    #mainNav {
        width: min(290px, 82vw) !important;
    }
}

/* FINAL KAILOTECH HEADER NAVIGATION POSITION */
.site-header {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
}

#menuToggle {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    order: -1 !important;
    flex: 0 0 44px !important;
    width: 44px !important;
    height: 44px !important;
    margin: 0 18px 0 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    cursor: pointer !important;
    z-index: 100002 !important;
}

#menuToggle::before {
    content: "" !important;
    display: block !important;
    width: 25px !important;
    height: 19px !important;
    background: linear-gradient(
        to bottom,
        #D4AF37 0 2px,
        transparent 2px 8px,
        #D4AF37 8px 10px,
        transparent 10px 17px,
        #D4AF37 17px 19px
    ) !important;
}

.site-header .logo {
    order: 0 !important;
}

.site-header #mainNav {
    order: 1 !important;
}

/* KAILOTECH HOMEPAGE VIDEO BANNER */
.kailo-hero {
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate;
}

.home-video-background {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
}

.home-video-background video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.home-video-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(5, 10, 25, 0.88),
        rgba(5, 10, 25, 0.48),
        rgba(5, 10, 25, 0.30)
    );
}

.kailo-hero .hero-copy,
.kailo-hero .kailo-hero-visual {
    position: relative;
    z-index: 1;
}
/* FINAL FIX - REMOVE ALL RIGHT SIDE HOMEPAGE IMAGES */
#home .kailo-hero-visual,
#home .hero-image-grid,
#home .hero-tech-image,
#home .hero-image-one,
#home .hero-image-two,
#home .hero-image-three,
#home .hero-image-four,
#home .hero-floating-tag,
#home .hero-image-caption {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
}

/* MAKE HOMEPAGE VIDEO FULL WIDTH */
#home.kailo-hero {
    display: flex !important;
    position: relative !important;
    width: 100% !important;
    height: 460px !important;
    min-height: 460px !important;
    max-height: 460px !important;
    overflow: hidden !important;
    align-items: center !important;
}

#home .home-video-background {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 0 !important;
}

#home .home-video-background video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
}

#home .hero-copy {
    position: relative !important;
    z-index: 2 !important;
    width: 100% !important;
    max-width: 900px !important;
}

#home h1 {
    color: white !important;
}

#home h1 span {
    color: #e3bd62 !important;
}

@media(max-width:700px) {
    #home.kailo-hero {
        height: 400px !important;
        min-height: 400px !important;
        max-height: 400px !important;
    }
}
/* KAILOTECH HOMEPAGE CONTENT BELOW VIDEO */
.kailo-below-video {
    padding: 85px 7%;
    background: #071b18;
    color: #f5f8f6;
}
.kailo-section-heading {
    max-width: 760px;
    margin: 0 auto 45px;
    text-align: center;
}
.kailo-eyebrow {
    color: #b8a05a;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 3px;
    margin-bottom: 14px;
}
.kailo-section-heading h2,
.kailo-bottom-cta h2 {
    font-size: clamp(30px, 4vw, 48px);
    line-height: 1.15;
    margin: 0 0 17px;
    color: #ffffff;
}
.kailo-section-heading h2 span,
.kailo-bottom-cta h2 span {
    color: #d9bd70;
}
.kailo-section-heading > p:last-child,
.kailo-bottom-cta > div > p:last-child {
    color: #b8c9c3;
    line-height: 1.8;
}
.kailo-about-strip {
    max-width: 1150px;
    margin: 0 auto 90px;
    padding: 38px;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 35px;
    align-items: center;
    background: linear-gradient(135deg, #103c32, #102923);
    border: 1px solid rgba(217,189,112,.25);
    border-radius: 18px;
}
.kailo-about-strip h3 {
    font-size: 29px;
    margin: 0 0 14px;
    color: #fff;
}
.kailo-about-strip p {
    color: #c1d2cc;
    line-height: 1.8;
}
.kailo-about-highlight {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    color: #e8d18f;
    font-size: 14px;
    font-weight: 800;
    text-align: center;
}
.kailo-about-highlight strong {
    color: #fff;
    font-size: 24px;
}
.kailo-expertise-heading {
    margin-bottom: 38px;
}
.kailo-expertise-grid {
    max-width: 1200px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
}
.kailo-expertise-card {
    overflow: hidden;
    background: #102923;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 15px;
    transition: transform .25s ease, border-color .25s ease;
}
.kailo-expertise-card:hover {
    transform: translateY(-7px);
    border-color: #d9bd70;
}
.kailo-expertise-card img {
    display: block;
    width: 100%;
    height: 205px;
    object-fit: cover;
}
.kailo-card-content {
    padding: 23px 20px 25px;
}
.kailo-card-content span {
    color: #d9bd70;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
}
.kailo-card-content h3 {
    color: #fff;
    font-size: 20px;
    margin: 13px 0 10px;
}
.kailo-card-content p {
    color: #b8c9c3;
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
}
.kailo-more-btn {
    display: inline-block;
    margin-top: 15px;
    padding: 13px 20px;
    border-radius: 5px;
    background: #d9bd70;
    color: #102923 !important;
    text-decoration: none;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1px;
}
.kailo-bottom-cta {
    max-width: 1150px;
    margin: 90px auto 0;
    padding: 38px;
    border-radius: 16px;
    border: 1px solid rgba(217,189,112,.3);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 25px;
}
.kailo-bottom-cta h2 {
    font-size: clamp(27px, 3vw, 38px);
}
.kailo-bottom-cta .kailo-more-btn {
    white-space: nowrap;
}
@media(max-width: 950px) {
    .kailo-expertise-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media(max-width: 650px) {
    .kailo-below-video { padding: 60px 5%; }
    .kailo-about-strip { grid-template-columns: 1fr; padding: 25px; }
    .kailo-expertise-grid { grid-template-columns: 1fr; }
    .kailo-expertise-card img { height: 220px; }
    .kailo-bottom-cta { flex-direction: column; align-items: flex-start; padding: 25px; }
}


/* KAILOTECH OFFICIAL ABOUT PAGE START */
.ko-about-video{position:relative;height:440px;overflow:hidden;background:#071b18;color:#fff}
.ko-about-video video{width:100%;height:100%;object-fit:cover;display:block}
.ko-about-video-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,18,15,.85),rgba(3,18,15,.18))}
.ko-about-video-text{position:absolute;left:8%;top:50%;transform:translateY(-50%);z-index:2}
.ko-about-video-text>p:first-child,.ko-label{color:#d9bd70;font-size:12px;font-weight:800;letter-spacing:2.5px}
.ko-about-video-text h1{font-size:clamp(38px,6vw,68px);line-height:1.12;color:#fff;margin:16px 0}
.ko-about-video-text h1 span{color:#e4c879}
.ko-about-video-text h3{color:#fff;font-weight:400}
.ko-about-intro,.ko-values,.ko-services{padding:75px 8%;background:#0b211c;color:#fff}
.ko-about-heading,.ko-section-title{text-align:center;margin:0 auto 35px;max-width:800px}
.ko-about-heading h2,.ko-section-title h2{font-size:clamp(30px,4vw,45px);color:#fff;margin:12px 0}
.ko-about-heading h2 span,.ko-section-title h2 span,.ko-customers h2 span{color:#d9bd70}
.ko-about-intro>p:not(.ko-lead){max-width:950px;margin:18px auto;color:#c3d2cc;line-height:1.9}
.ko-lead{max-width:950px;margin:0 auto;color:#fff;font-size:20px;line-height:1.8;text-align:center}
.ko-company-facts{padding:35px 7%;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;background:#10372e}
.ko-company-facts div{text-align:center}
.ko-company-facts span{display:block;color:#d9bd70;font-size:11px;letter-spacing:1.5px;margin-bottom:10px}
.ko-company-facts strong{color:#fff;font-size:15px}
.ko-purpose{padding:75px 8%;display:grid;grid-template-columns:repeat(2,1fr);gap:25px;background:#071b18}
.ko-purpose-card{padding:35px;background:#10372e;border:1px solid rgba(217,189,112,.25);border-radius:14px;color:#fff}
.ko-purpose-card h2{font-size:27px;color:#fff}
.ko-purpose-card>p:last-child{color:#c3d2cc;line-height:1.9}
.ko-values{background:#071b18}
.ko-value-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:17px;max-width:1200px;margin:auto}
.ko-value-grid article{padding:24px;background:#102923;border:1px solid rgba(255,255,255,.1);border-radius:12px}
.ko-value-grid b,.ko-domain-grid>div,.ko-service-grid>div{color:#d9bd70}
.ko-value-grid h3{color:#fff;margin:13px 0}
.ko-value-grid p{color:#bdcec7;line-height:1.7;font-size:14px}
.ko-divisions,.ko-domains{padding:75px 7%;background:#0b211c;color:#fff}
.ko-division-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;max-width:1250px;margin:auto}
.ko-division-card{background:#102923;border-radius:13px;overflow:hidden;border:1px solid rgba(255,255,255,.1)}
.ko-division-card img{width:100%;height:210px;object-fit:cover;display:block}
.ko-division-card>div{padding:22px}
.ko-division-card span{font-size:10px;letter-spacing:1px;color:#d9bd70}
.ko-division-card h3{color:#fff;font-size:19px}
.ko-division-card p{color:#bdcec7;line-height:1.7;font-size:14px}
.ko-domains{background:#071b18}
.ko-domain-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;max-width:1200px;margin:auto}
.ko-domain-grid>div{padding:22px;background:#102923;border-radius:10px;font-size:13px}
.ko-domain-grid strong{display:block;color:#fff;font-size:16px;margin:12px 0}
.ko-domain-grid p{color:#bdcec7;line-height:1.7;margin:0}
.ko-services{background:#0b211c}
.ko-service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;max-width:1200px;margin:auto}
.ko-service-grid>div{padding:19px;background:#102923;border:1px solid rgba(255,255,255,.08);border-radius:9px;font-size:12px}
.ko-service-grid strong{display:block;color:#fff;font-size:14px;margin-top:8px}
.ko-customers{padding:75px 8%;display:grid;grid-template-columns:.8fr 1.2fr;gap:45px;background:#071b18;color:#fff}
.ko-customers h2{font-size:36px}
.ko-customers p{color:#bdcec7;line-height:1.8}
.ko-customer-list>div{padding:17px 0;border-bottom:1px solid rgba(255,255,255,.13)}
.ko-customer-list strong{color:#d9bd70}
.ko-idea{padding:75px 7%;text-align:center;background:#0b211c;color:#fff}
.ko-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin:40px auto;max-width:1250px;text-align:left}
.ko-steps>div{padding:20px;background:#102923;border-radius:10px}
.ko-steps b{display:block;color:#d9bd70;margin-bottom:15px}
.ko-steps strong{color:#fff}
.ko-steps p{color:#bdcec7;font-size:13px;line-height:1.7}
.ko-gold-button{display:inline-block;margin-top:18px;padding:14px 23px;border-radius:5px;background:#d9bd70;color:#102923!important;text-decoration:none;font-weight:800;font-size:12px;letter-spacing:1px}
.ko-about-cta{padding:75px 7%;text-align:center;background:linear-gradient(120deg,#10382e,#071b18);color:#fff}
.ko-about-cta h2{font-size:clamp(30px,4vw,45px);color:#fff}
.ko-about-cta>p:not(.ko-label){color:#bdcec7;line-height:1.8}
@media(max-width:950px){.ko-value-grid,.ko-domain-grid{grid-template-columns:repeat(2,1fr)}.ko-steps{grid-template-columns:repeat(2,1fr)}.ko-company-facts{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.ko-about-video{height:340px}.ko-about-video-text{left:6%;right:5%}.ko-purpose,.ko-customers{grid-template-columns:1fr}.ko-division-grid,.ko-service-grid{grid-template-columns:1fr}.ko-value-grid,.ko-domain-grid{grid-template-columns:1fr}.ko-steps{grid-template-columns:1fr}.ko-about-intro,.ko-values,.ko-services,.ko-divisions,.ko-domains,.ko-customers,.ko-idea{padding:55px 6%}}
/* KAILOTECH OFFICIAL ABOUT PAGE END */
/* KAILOTECH MODERN ABOUT PAGE DESIGN */
body:has(.ko-about-video) {
    background: #06120f;
    color: #f4f7f3;
}

body:has(.ko-about-video) .ko-about-video {
    position: relative;
    min-height: 540px;
    overflow: hidden;
    background: #06120f;
}

body:has(.ko-about-video) .ko-about-video-text h1 {
    color: #ffffff !important;
    font-weight: 900;
    letter-spacing: 2px;
    text-shadow: 0 5px 25px rgba(0,0,0,.6);
}

body:has(.ko-about-video) .ko-about-video-text h1 span {
    background: linear-gradient(90deg, #b7f36b, #e6c45c, #ffffff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    display: inline-block;
}

body:has(.ko-about-video) .ko-about-video-text p {
    color: #b9f477 !important;
    letter-spacing: 5px;
    font-weight: 800;
}

body:has(.ko-about-video) .ko-about-video-text h3 {
    color: #f1d477 !important;
}

/* Modern section panels */
body:has(.ko-about-video) main > section:not(.ko-about-video) {
    position: relative;
    overflow: hidden;
    margin: 45px auto;
    padding: clamp(28px, 5vw, 65px);
    width: min(92%, 1250px);
    border: 1px solid rgba(183,243,107,.22);
    border-radius: 24px;
    background:
        radial-gradient(circle at 90% 10%, rgba(183,243,107,.10), transparent 32%),
        linear-gradient(135deg, #10251d, #091711 75%);
    box-shadow: 0 18px 55px rgba(0,0,0,.25);
}

body:has(.ko-about-video) main > section:not(.ko-about-video)::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, #a9e85c, #e8c75e, transparent);
}

body:has(.ko-about-video) main > section:not(.ko-about-video) h2 {
    color: #c6f477;
    font-size: clamp(26px, 4vw, 38px);
    font-weight: 850;
    letter-spacing: .5px;
}

body:has(.ko-about-video) main > section:not(.ko-about-video) h3 {
    color: #f0d276;
}

body:has(.ko-about-video) main > section:not(.ko-about-video) p,
body:has(.ko-about-video) main > section:not(.ko-about-video) li {
    color: #d5e2d9;
    line-height: 1.85;
}

/* Hover effects for content cards */
body:has(.ko-about-video) main article,
body:has(.ko-about-video) main .ko-about-card,
body:has(.ko-about-video) main .ko-value-card,
body:has(.ko-about-video) main .ko-division-card {
    transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}

body:has(.ko-about-video) main article:hover,
body:has(.ko-about-video) main .ko-about-card:hover,
body:has(.ko-about-video) main .ko-value-card:hover,
body:has(.ko-about-video) main .ko-division-card:hover {
    transform: translateY(-8px);
    border-color: #b7f36b;
    box-shadow: 0 15px 35px rgba(157,220,91,.13);
}

/* Scroll reveal animation */
body:has(.ko-about-video) .ko-reveal-left,
body:has(.ko-about-video) .ko-reveal-right {
    opacity: 0;
    transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1);
}

body:has(.ko-about-video) .ko-reveal-left {
    transform: translateX(-90px);
}

body:has(.ko-about-video) .ko-reveal-right {
    transform: translateX(90px);
}

body:has(.ko-about-video) .ko-reveal-visible {
    opacity: 1;
    transform: translateX(0);
}

@media (max-width: 700px) {
    body:has(.ko-about-video) .ko-about-video {
        min-height: 420px;
    }

    body:has(.ko-about-video) main > section:not(.ko-about-video) {
        width: 94%;
        padding: 25px 20px;
        margin: 25px auto;
        border-radius: 17px;
    }

    body:has(.ko-about-video) .ko-reveal-left {
        transform: translateX(-35px);
    }

    body:has(.ko-about-video) .ko-reveal-right {
        transform: translateX(35px);
    }
}

/* KAILOTECH MULTI-COLOUR PREMIUM ABOUT DESIGN */

/* Colourful About page background */
body:has(.ko-about-video) {
    background:
        radial-gradient(ellipse at 10% 15%, rgba(0,190,255,.12), transparent 35%),
        radial-gradient(ellipse at 90% 40%, rgba(160,80,255,.13), transparent 35%),
        radial-gradient(ellipse at 50% 90%, rgba(255,170,60,.10), transparent 40%),
        #07120f;
}

/* Colourful video heading */
body:has(.ko-about-video) .ko-about-video-text h1 span {
    background: linear-gradient(
        90deg,
        #58dcff,
        #b58aff,
        #ffbd65,
        #f5dc70,
        #8ff0a7
    ) !important;
    background-size: 250% auto !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    animation: kailoColourFlow 6s linear infinite;
}

@keyframes kailoColourFlow {
    to { background-position: 250% center; }
}

/* Alternating colourful section borders and backgrounds */
body:has(.ko-about-video) main > section:not(.ko-about-video):nth-of-type(2) {
    border-color: rgba(75,205,255,.55);
    background: linear-gradient(135deg, rgba(13,67,88,.75), #0b191b 75%);
}

body:has(.ko-about-video) main > section:not(.ko-about-video):nth-of-type(3) {
    border-color: rgba(178,125,255,.55);
    background: linear-gradient(135deg, rgba(65,37,94,.72), #15101f 75%);
}

body:has(.ko-about-video) main > section:not(.ko-about-video):nth-of-type(4) {
    border-color: rgba(255,177,92,.55);
    background: linear-gradient(135deg, rgba(92,53,24,.70), #1c1510 75%);
}

body:has(.ko-about-video) main > section:not(.ko-about-video):nth-of-type(5) {
    border-color: rgba(255,218,105,.55);
    background: linear-gradient(135deg, rgba(87,73,25,.65), #19180e 75%);
}

body:has(.ko-about-video) main > section:not(.ko-about-video):nth-of-type(6) {
    border-color: rgba(104,232,160,.55);
    background: linear-gradient(135deg, rgba(20,82,57,.70), #0c1a14 75%);
}

/* Colourful section headings */
body:has(.ko-about-video) main > section:not(.ko-about-video) h2 {
    background: linear-gradient(90deg, #62dcff, #c49aff, #ffbd70);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    display: inline-block;
}

/* Colourful subheadings */
body:has(.ko-about-video) main > section:not(.ko-about-video) h3 {
    color: #ffc875;
}

/* Colourful content cards */
body:has(.ko-about-video) main article,
body:has(.ko-about-video) main .ko-about-card,
body:has(.ko-about-video) main .ko-value-card,
body:has(.ko-about-video) main .ko-division-card {
    border: 1px solid rgba(103,205,255,.35);
    border-radius: 17px;
    background: linear-gradient(145deg, rgba(24,55,65,.85), rgba(24,23,49,.88));
    box-shadow: 0 10px 28px rgba(0,0,0,.22);
}

body:has(.ko-about-video) main article:nth-child(3n+2),
body:has(.ko-about-video) main .ko-about-card:nth-child(3n+2),
body:has(.ko-about-video) main .ko-value-card:nth-child(3n+2),
body:has(.ko-about-video) main .ko-division-card:nth-child(3n+2) {
    border-color: rgba(191,139,255,.55);
    background: linear-gradient(145deg, rgba(69,40,91,.75), rgba(26,20,45,.9));
}

body:has(.ko-about-video) main article:nth-child(3n),
body:has(.ko-about-video) main .ko-about-card:nth-child(3n),
body:has(.ko-about-video) main .ko-value-card:nth-child(3n),
body:has(.ko-about-video) main .ko-division-card:nth-child(3n) {
    border-color: rgba(255,181,100,.5);
    background: linear-gradient(145deg, rgba(89,55,29,.72), rgba(34,24,17,.9));
}

/* Colourful card hover */
body:has(.ko-about-video) main article:hover,
body:has(.ko-about-video) main .ko-about-card:hover,
body:has(.ko-about-video) main .ko-value-card:hover,
body:has(.ko-about-video) main .ko-division-card:hover {
    transform: translateY(-9px) scale(1.015);
    border-color: #65dcff;
    box-shadow: 0 15px 38px rgba(76,190,255,.22);
}

/* Colourful buttons */
body:has(.ko-about-video) main a,
body:has(.ko-about-video) main button {
    transition: all .3s ease;
}

body:has(.ko-about-video) main a:hover,
body:has(.ko-about-video) main button:hover {
    filter: brightness(1.2);
}

/* Colourful lists */
body:has(.ko-about-video) main > section:not(.ko-about-video) li::marker {
    color: #69dfff;
}

/* Decorative colourful glow */
body:has(.ko-about-video) main > section:not(.ko-about-video)::after {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    right: -80px;
    bottom: -90px;
    border-radius: 50%;
    background: rgba(117,111,255,.12);
    filter: blur(35px);
    pointer-events: none;
}

@media (max-width: 700px) {
    body:has(.ko-about-video) main > section:not(.ko-about-video) {
        background-color: #101c20;
    }
}


/* KAILOTECH COLOURFUL IMAGE SHOWCASE */
body:has(.ko-about-video) {
    background:
        radial-gradient(ellipse at 5% 25%, rgba(0,185,255,.20), transparent 35%),
        radial-gradient(ellipse at 95% 50%, rgba(170,70,255,.20), transparent 35%),
        radial-gradient(ellipse at 50% 95%, rgba(255,112,70,.13), transparent 40%),
        #080d20 !important;
}

body:has(.ko-about-video) .ko-about-video-text h1 span {
    background: linear-gradient(100deg,#00e5ff,#8b7bff,#ff67b3,#ffb44f,#a4ff7a) !important;
    background-size: 300% 300% !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    animation: kailoRainbowText 7s ease infinite;
}

@keyframes kailoRainbowText {
    0%,100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* Technology showcase heading */
.kailo-tech-showcase {
    width: min(94%, 1250px);
    margin: 65px auto;
    padding: 55px clamp(15px, 3vw, 35px);
    border-radius: 30px;
    background: linear-gradient(135deg,#111d3a,#21143d 55%,#102c3c);
    border: 1px solid rgba(133,175,255,.35);
    box-shadow: 0 25px 70px rgba(0,0,0,.35);
}

.kailo-showcase-heading {
    text-align: center;
    margin-bottom: 38px;
}

.kailo-showcase-heading > span {
    color: #48e6ef;
    font-weight: 800;
    letter-spacing: 5px;
    font-size: 12px;
}

.kailo-showcase-heading h2 {
    color: white !important;
    font-size: clamp(27px,5vw,48px);
    font-weight: 900;
    margin: 15px 0;
}

.kailo-showcase-heading h2 em {
    font-style: normal;
    background: linear-gradient(90deg,#47dfff,#bd86ff,#ff8dbb);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
}

.kailo-showcase-heading p {
    color: #c4cbe7 !important;
}

/* Image gallery */
.kailo-image-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    grid-auto-rows: 260px;
    gap: 19px;
}

.kailo-image-card {
    position: relative;
    min-width: 0;
    overflow: hidden;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,.18);
    background: #171c37;
    isolation: isolate;
    transition: transform .4s ease, box-shadow .4s ease;
}

.kailo-image-card.kailo-image-large {
    grid-column: span 2;
    grid-row: span 1;
}

.kailo-image-card.kailo-image-wide {
    grid-column: span 2;
}

.kailo-image-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .7s ease;
}

.kailo-image-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(0deg,rgba(5,8,25,.95),rgba(5,8,25,.05) 75%);
}

.kailo-image-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 45px rgba(94,105,255,.25);
}

.kailo-image-card:hover img {
    transform: scale(1.09);
}

.kailo-image-caption {
    position: absolute;
    z-index: 2;
    left: 22px;
    right: 15px;
    bottom: 20px;
}

.kailo-image-caption span {
    color: #62e9f3;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 2px;
}

.kailo-image-caption h3 {
    color: white !important;
    font-size: clamp(18px,2.5vw,26px);
    margin: 7px 0;
}

.kailo-image-caption p {
    color: #d6d9ed !important;
    margin: 0;
    font-size: 13px;
}

.kailo-showcase-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 17px;
    margin-top: 35px;
    color: #fff;
    font-weight: 900;
    letter-spacing: 3px;
}

.kailo-showcase-footer b {
    color: #ff9bcb;
}

/* More vivid About Us content panels */
body:has(.ko-about-video) main > section:not(.ko-about-video):not(#kailo-tech-showcase) {
    background: linear-gradient(135deg,rgba(18,40,75,.96),rgba(37,20,65,.96),rgba(12,48,59,.96)) !important;
    border: 1px solid rgba(107,191,255,.42) !important;
    box-shadow: 0 18px 50px rgba(0,0,0,.28);
}

body:has(.ko-about-video) main > section:not(.ko-about-video) h2 {
    background: linear-gradient(90deg,#50e5ff,#c18aff,#ff9bcb,#ffc76b) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
}

body:has(.ko-about-video) main > section:not(.ko-about-video) h3 {
    color: #ffc875 !important;
}

@media(max-width:750px) {
    .kailo-tech-showcase {
        padding: 35px 15px;
        margin: 35px auto;
    }

    .kailo-image-grid {
        grid-template-columns: 1fr 1fr;
        grid-auto-rows: 210px;
        gap: 12px;
    }

    .kailo-image-card.kailo-image-large,
    .kailo-image-card.kailo-image-wide {
        grid-column: span 2;
    }

    .kailo-image-caption {
        left: 13px;
        bottom: 13px;
    }
}

@media(max-width:420px) {
    .kailo-image-grid {
        grid-template-columns: 1fr;
    }

    .kailo-image-card.kailo-image-large,
    .kailo-image-card.kailo-image-wide {
        grid-column: span 1;
    }
}

/* ==========================================
   KAILOTECH WOW HOMEPAGE DESIGN
========================================== */

body:has(#home.kailo-hero) {
    background: #080b19;
}

/* Cinematic hero */
#home.kailo-hero {
    min-height: 690px !important;
    height: min(760px, 88vh) !important;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    background: #080b19 !important;
    isolation: isolate;
}

#home .home-video-background {
    position: absolute !important;
    inset: 0 !important;
    z-index: -2 !important;
}

#home .home-video-background video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    filter: saturate(1.15) contrast(1.08);
}

#home .home-video-shade {
    position: absolute !important;
    inset: 0 !important;
    background:
        linear-gradient(90deg,rgba(5,8,24,.96),rgba(7,10,29,.78) 48%,rgba(10,8,30,.25)),
        linear-gradient(0deg,rgba(7,8,23,.7),transparent 60%) !important;
}

#home.kailo-hero::before {
    content: "";
    position: absolute;
    z-index: -1;
    width: 520px;
    height: 520px;
    right: -120px;
    top: 5%;
    border-radius: 50%;
    background: radial-gradient(circle,rgba(111,72,255,.34),rgba(0,205,255,.08) 48%,transparent 70%);
    filter: blur(18px);
    animation: kwhGlow 8s ease-in-out infinite alternate;
}

@keyframes kwhGlow {
    from { transform: translateY(-25px) scale(.9); }
    to { transform: translateY(35px) scale(1.15); }
}

#home .kailo-hero-copy {
    position: relative;
    z-index: 3;
    width: min(850px, 90%) !important;
    max-width: 850px !important;
    padding: 80px 6vw !important;
}

#home .eyebrow {
    color: #66e9ff !important;
    letter-spacing: 5px !important;
    font-size: 12px !important;
    font-weight: 900 !important;
}

#home .hero-copy h1,
#home h1 {
    color: #fff !important;
    font-size: clamp(48px, 7.5vw, 100px) !important;
    font-weight: 950 !important;
    line-height: .98 !important;
    letter-spacing: -3px !important;
    text-shadow: 0 8px 40px rgba(0,0,0,.35);
}

#home .hero-copy h1 span,
#home h1 span {
    background: linear-gradient(95deg,#42e8ff,#8d82ff,#f27bd8,#ffb45d) !important;
    background-size: 250% auto !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    animation: kwhTextFlow 7s linear infinite;
}

@keyframes kwhTextFlow {
    to { background-position: 250% center; }
}

#home .hero-description {
    max-width: 620px;
    color: #e1e6fa !important;
    font-size: clamp(15px,1.5vw,19px) !important;
    line-height: 1.8 !important;
}

#home .hero-actions {
    gap: 15px !important;
    margin-top: 30px !important;
}

#home .hero-actions a {
    border-radius: 50px !important;
    padding: 16px 25px !important;
    font-weight: 850 !important;
    letter-spacing: .5px;
    transition: transform .3s ease, box-shadow .3s ease !important;
}

#home .hero-actions a:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 12px 35px rgba(82,190,255,.35);
}

#home .primary-btn {
    background: linear-gradient(100deg,#04c9ed,#7965ff,#b65bff) !important;
    color: #fff !important;
    border: 0 !important;
}

#home .secondary-btn {
    background: rgba(255,255,255,.08) !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,.45) !important;
    backdrop-filter: blur(12px);
}

/* New homepage experience */
#kailo-home-experience {
    overflow: hidden;
    padding: 100px max(5%,calc((100% - 1250px)/2));
    color: #fff;
    background:
        radial-gradient(ellipse at 5% 10%,rgba(0,197,255,.16),transparent 30%),
        radial-gradient(ellipse at 95% 35%,rgba(160,70,255,.18),transparent 32%),
        radial-gradient(ellipse at 50% 95%,rgba(255,90,160,.10),transparent 35%),
        #080b19;
}

.kwh-intro {
    max-width: 850px;
    margin: 0 auto 55px;
    text-align: center;
}

.kwh-kicker,
.kwh-journey-heading > span,
.kwh-statement > span,
.kwh-final-cta > span {
    color: #61e5f3;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 4px;
}

.kwh-intro h2,
.kwh-journey-heading h2 {
    color: #fff;
    font-size: clamp(34px,5.5vw,66px);
    font-weight: 950;
    line-height: 1.05;
    margin: 18px 0;
    letter-spacing: -2px;
}

.kwh-intro h2 span,
.kwh-journey-heading h2 em {
    font-style: normal;
    background: linear-gradient(90deg,#47e5ff,#a17cff,#ff80c8,#ffbd68);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.kwh-intro p,
.kwh-journey-heading p {
    color: #bfc8e1;
    font-size: 16px;
    line-height: 1.8;
    max-width: 680px;
    margin: 0 auto;
}

/* Image cards */
.kwh-feature-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    grid-auto-rows: 300px;
    gap: 20px;
}

.kwh-feature {
    position: relative;
    overflow: hidden;
    border-radius: 24px;
    border: 1px solid rgba(255,255,255,.18);
    background: #171b35;
    isolation: isolate;
    min-width: 0;
    transition: transform .45s ease, box-shadow .45s ease;
}

.kwh-feature-tall {
    grid-row: span 2;
}

.kwh-feature-wide {
    grid-column: span 2;
}

.kwh-feature img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .8s ease;
    z-index: -2;
}

.kwh-feature-overlay {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(0deg,rgba(5,7,23,.97),rgba(5,7,23,.05) 85%);
}

.kwh-feature:hover {
    transform: translateY(-9px);
    box-shadow: 0 22px 55px rgba(92,104,255,.25);
}

.kwh-feature:hover img {
    transform: scale(1.09);
}

.kwh-feature-content {
    position: absolute;
    left: 25px;
    right: 20px;
    bottom: 25px;
}

.kwh-feature-content span {
    color: #61e5f3;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 2px;
}

.kwh-feature-content h3 {
    color: white;
    font-size: clamp(20px,2.4vw,30px);
    font-weight: 950;
    margin: 9px 0;
}

.kwh-feature-content p {
    color: #d5d9ed;
    font-size: 13px;
    line-height: 1.6;
}

.kwh-feature-content a {
    display: inline-block;
    margin-top: 12px;
    color: #fff;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 1px;
    text-decoration: none;
    border-bottom: 1px solid #65e6f3;
    padding-bottom: 5px;
}

/* Big statement */
.kwh-statement {
    text-align: center;
    padding: 100px 20px;
    margin: 90px 0;
    border-radius: 30px;
    border: 1px solid rgba(163,128,255,.35);
    background:
        radial-gradient(circle at 50% 0%,rgba(119,84,255,.25),transparent 65%),
        linear-gradient(135deg,#171438,#101e3b,#19122f);
}

.kwh-statement h2,
.kwh-final-cta h2 {
    font-size: clamp(35px,6vw,72px);
    font-weight: 950;
    line-height: 1.08;
    color: white;
    margin: 20px 0;
}

.kwh-statement h2 em,
.kwh-final-cta h2 em {
    font-style: normal;
    background: linear-gradient(90deg,#4de6ff,#a88bff,#ff80c8,#ffbd68);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.kwh-statement a,
.kwh-final-cta a {
    display: inline-block;
    margin-top: 18px;
    padding: 16px 28px;
    border-radius: 40px;
    color: white;
    font-size: 12px;
    font-weight: 900;
    text-decoration: none;
    background: linear-gradient(100deg,#05c8e8,#7866ff,#b65bff);
    box-shadow: 0 10px 35px rgba(96,104,255,.25);
    transition: transform .3s ease;
}

.kwh-statement a:hover,
.kwh-final-cta a:hover {
    transform: translateY(-5px);
}

/* Idea to reality process */
.kwh-journey {
    padding: 20px 0 70px;
}

.kwh-journey-heading {
    text-align: center;
    margin-bottom: 45px;
}

.kwh-steps {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 17px;
}

.kwh-step {
    position: relative;
    padding: 28px 22px;
    min-height: 245px;
    border-radius: 20px;
    border: 1px solid rgba(100,210,255,.28);
    background: linear-gradient(145deg,rgba(23,47,83,.9),rgba(29,22,59,.92));
    transition: transform .35s ease, border-color .35s ease;
}

.kwh-step:nth-child(2) {
    background: linear-gradient(145deg,rgba(61,36,93,.9),rgba(29,22,59,.92));
    border-color: rgba(184,131,255,.4);
}

.kwh-step:nth-child(3) {
    background: linear-gradient(145deg,rgba(89,48,62,.9),rgba(40,22,48,.92));
    border-color: rgba(255,130,171,.4);
}

.kwh-step:nth-child(4) {
    background: linear-gradient(145deg,rgba(87,62,34,.9),rgba(39,29,30,.92));
    border-color: rgba(255,194,100,.4);
}

.kwh-step:hover {
    transform: translateY(-8px);
    border-color: #5ee6ff;
}

.kwh-step > span {
    color: #74eaff;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 2px;
}

.kwh-step-icon {
    font-size: 32px;
    margin: 20px 0;
    color: #ff9ed7;
}

.kwh-step h3 {
    color: white;
    font-size: 17px;
    font-weight: 900;
}

.kwh-step p {
    color: #c7cde0;
    font-size: 13px;
    line-height: 1.7;
}

/* Final call to action */
.kwh-final-cta {
    text-align: center;
    padding: 85px 20px;
    border-radius: 30px;
    background:
        radial-gradient(ellipse at 15% 20%,rgba(0,210,255,.2),transparent 40%),
        radial-gradient(ellipse at 85% 80%,rgba(220,70,255,.2),transparent 40%),
        linear-gradient(135deg,#101a37,#21133a);
    border: 1px solid rgba(255,255,255,.2);
}

/* Reveal effects */
.kwh-from-left,
.kwh-from-right {
    opacity: 0;
    transition: opacity .85s ease, transform .85s cubic-bezier(.2,.7,.2,1);
}

.kwh-from-left {
    transform: translateX(-65px);
}

.kwh-from-right {
    transform: translateX(65px);
}

.kwh-visible {
    opacity: 1;
    transform: translateX(0);
}

@media(max-width:850px) {
    #home.kailo-hero {
        min-height: 620px !important;
        height: 75vh !important;
    }

    .kwh-feature-grid {
        grid-template-columns: 1fr 1fr;
        grid-auto-rows: 250px;
    }

    .kwh-feature-tall {
        grid-row: span 1;
    }

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

@media(max-width:560px) {
    #home.kailo-hero {
        min-height: 590px !important;
        height: auto !important;
    }

    #home .kailo-hero-copy {
        padding: 65px 22px !important;
        width: 100% !important;
    }

    #home .hero-copy h1,
    #home h1 {
        font-size: clamp(43px,12vw,65px) !important;
        letter-spacing: -2px !important;
    }

    #kailo-home-experience {
        padding: 65px 16px;
    }

    .kwh-feature-grid {
        grid-template-columns: 1fr;
        grid-auto-rows: 270px;
    }

    .kwh-feature-tall,
    .kwh-feature-wide {
        grid-column: span 1;
        grid-row: span 1;
    }

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

    .kwh-statement {
        padding: 65px 15px;
        margin: 55px 0;
    }

    .kwh-final-cta {
        padding: 60px 15px;
    }
}


/* KAILOTECH PREMIUM ABOUT US REDESIGN */
body.kailo-premium-about {
    background: #080b18 !important;
    color: #f5f7ff;
}

body.kailo-premium-about main {
    background:
        radial-gradient(ellipse at 10% 20%, rgba(46, 91, 210, .13), transparent 38%),
        radial-gradient(ellipse at 90% 60%, rgba(137, 61, 205, .13), transparent 40%),
        #080b18;
}

body.kailo-premium-about .ko-about-video {
    position: relative;
    min-height: 570px;
    overflow: hidden;
    isolation: isolate;
    background: #080b18;
}

body.kailo-premium-about .ko-about-video video {
    width: 100%;
    height: 100%;
    min-height: 570px;
    object-fit: cover;
}

body.kailo-premium-about .ko-about-video::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
        90deg,
        rgba(5, 8, 23, .78),
        rgba(5, 8, 23, .18),
        rgba(5, 8, 23, .55)
    );
}

body.kailo-premium-about .ko-about-video-text {
    z-index: 2;
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 30px;
}

body.kailo-premium-about .ko-about-video-text h1 {
    color: white;
    font-size: clamp(38px, 7vw, 82px);
    line-height: 1.08;
    letter-spacing: -2px;
    text-shadow: 0 0 35px rgba(75, 135, 255, .35);
}

body.kailo-premium-about .ko-about-video-text h1 span {
    background: linear-gradient(90deg, #54c8ff, #a78bfa, #f4cf72);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

body.kailo-premium-about .ko-about-video-text p {
    color: #77d7ff;
    letter-spacing: 4px;
    font-weight: 800;
}

body.kailo-premium-about .ka-premium-section {
    position: relative;
    max-width: 1250px;
    width: calc(100% - 40px);
    margin: 38px auto;
    padding: clamp(28px, 5vw, 65px);
    overflow: hidden;
    border: 1px solid rgba(130, 160, 255, .18);
    border-radius: 26px;
    background: linear-gradient(
        135deg,
        rgba(21, 31, 62, .92),
        rgba(15, 13, 37, .96)
    );
    box-shadow: 0 18px 60px rgba(0, 0, 0, .25);
    transition: border-color .35s ease, transform .35s ease;
}

body.kailo-premium-about .ka-premium-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 8%;
    width: 84%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #55caff, #a78bfa, #f4cf72, transparent);
}

body.kailo-premium-about .ka-premium-section:hover {
    border-color: rgba(95, 190, 255, .48);
}

body.kailo-premium-about .ka-premium-section h2,
body.kailo-premium-about .ka-premium-section h3 {
    color: #f7f8ff;
}

body.kailo-premium-about .ka-premium-section p,
body.kailo-premium-about .ka-premium-section li {
    color: #c2cce3;
    line-height: 1.8;
}

body.kailo-premium-about .ka-premium-section h2 {
    font-size: clamp(27px, 4vw, 43px);
    letter-spacing: -.8px;
}

body.kailo-premium-about .ka-premium-section h2::after {
    content: "";
    display: block;
    width: 75px;
    height: 4px;
    margin-top: 13px;
    border-radius: 5px;
    background: linear-gradient(90deg, #54c8ff, #a78bfa, #f4cf72);
}

body.kailo-premium-about .ka-premium-card {
    border: 1px solid rgba(116, 164, 255, .2);
    border-radius: 19px;
    padding: 22px;
    background: linear-gradient(145deg, rgba(37, 51, 91, .78), rgba(20, 20, 48, .88));
    box-shadow: 0 10px 30px rgba(0, 0, 0, .2);
    transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}

body.kailo-premium-about .ka-premium-card:hover {
    transform: translateY(-9px);
    border-color: #66cfff;
    box-shadow: 0 15px 38px rgba(65, 139, 255, .2);
}

body.kailo-premium-about .ka-premium-section img {
    border-radius: 16px;
}

body.kailo-premium-about .ka-premium-section a {
    transition: .25s ease;
}

body.kailo-premium-about .ka-premium-section a:hover {
    filter: brightness(1.15);
}

body.kailo-premium-about .ka-premium-section,
body.kailo-premium-about .ka-premium-card {
    opacity: 0;
    transform: translateY(28px);
    transition:
        opacity .7s ease,
        transform .7s ease,
        border-color .35s ease,
        box-shadow .35s ease;
}

body.kailo-premium-about .ka-premium-section.ka-premium-visible,
body.kailo-premium-about .ka-premium-card.ka-premium-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 700px) {
    body.kailo-premium-about .ko-about-video,
    body.kailo-premium-about .ko-about-video video {
        min-height: 420px;
    }

    body.kailo-premium-about .ka-premium-section {
        width: calc(100% - 24px);
        margin: 22px auto;
        padding: 25px 19px;
        border-radius: 19px;
    }

    body.kailo-premium-about .ko-about-video-text h1 {
        letter-spacing: -1px;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.kailo-premium-about *,
    body.kailo-premium-about *::before,
    body.kailo-premium-about *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

/* ==========================================
   KAILOTECH ABOUT US - TRENDING 2026 DESIGN
   ========================================== */

body.kailo-premium-about {
    --ka-blue: #48caff;
    --ka-purple: #a78bfa;
    --ka-gold: #f5cf72;
    --ka-panel: rgba(16, 23, 48, .88);
    background: #070a16 !important;
    overflow-x: hidden;
}

/* Ambient background lighting */
body.kailo-premium-about main {
    position: relative;
    isolation: isolate;
    background:
        radial-gradient(ellipse at 8% 18%, rgba(39, 119, 255, .15), transparent 32%),
        radial-gradient(ellipse at 92% 42%, rgba(143, 73, 255, .14), transparent 34%),
        radial-gradient(ellipse at 50% 85%, rgba(0, 205, 210, .08), transparent 36%),
        #070a16 !important;
}

body.kailo-premium-about main::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: .16;
    background-image:
        linear-gradient(rgba(120, 160, 255, .13) 1px, transparent 1px),
        linear-gradient(90deg, rgba(120, 160, 255, .13) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: linear-gradient(to bottom, black, transparent 90%);
}

/* Modern video hero */
body.kailo-premium-about .ko-about-video {
    min-height: min(720px, 85vh);
    border-bottom: 1px solid rgba(105, 173, 255, .25);
}

body.kailo-premium-about .ko-about-video video {
    min-height: min(720px, 85vh);
    filter: saturate(1.15) contrast(1.08);
}

body.kailo-premium-about .ko-about-video::after {
    background:
        linear-gradient(90deg, rgba(4, 7, 19, .82), rgba(4, 7, 19, .12) 65%, rgba(4, 7, 19, .5)),
        linear-gradient(0deg, #070a16 0%, transparent 35%);
}

body.kailo-premium-about .ko-about-video-text {
    align-items: flex-start;
    text-align: left;
    padding: clamp(25px, 9vw, 130px);
}

body.kailo-premium-about .ko-about-video-text p {
    display: inline-block;
    padding: 10px 17px;
    border: 1px solid rgba(83, 204, 255, .45);
    border-radius: 40px;
    background: rgba(17, 36, 75, .55);
    backdrop-filter: blur(12px);
    font-size: 12px;
    letter-spacing: 3px;
}

body.kailo-premium-about .ko-about-video-text h1 {
    max-width: 850px;
    font-size: clamp(43px, 8vw, 100px);
    line-height: .99;
    font-weight: 900;
    letter-spacing: -3px;
    text-shadow: 0 8px 40px rgba(0, 0, 0, .3);
}

body.kailo-premium-about .ko-about-video-text h3 {
    color: #d7e4ff;
    font-size: clamp(17px, 2vw, 25px);
    margin-top: 15px;
}

/* Main section layout */
body.kailo-premium-about .ka-trending-section {
    width: min(1240px, calc(100% - 48px));
    margin: 65px auto;
    padding: clamp(28px, 5vw, 72px);
    border: 1px solid rgba(133, 164, 255, .16);
    border-radius: 30px;
    background:
        linear-gradient(135deg, rgba(22, 32, 65, .9), rgba(12, 15, 34, .94));
    box-shadow:
        0 25px 80px rgba(0, 0, 0, .25),
        inset 0 1px 0 rgba(255, 255, 255, .045);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

body.kailo-premium-about .ka-trending-section::before {
    content: "KAILOTECH  /  " attr(data-section-number);
    display: inline-block;
    margin-bottom: 20px;
    padding: 8px 13px;
    border: 1px solid rgba(82, 192, 255, .3);
    border-radius: 30px;
    color: #73d8ff;
    background: rgba(40, 119, 220, .09);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
}

body.kailo-premium-about .ka-gradient-heading {
    max-width: 850px;
    font-size: clamp(30px, 4.5vw, 52px) !important;
    font-weight: 900 !important;
    letter-spacing: -1.6px;
    line-height: 1.12;
    background: linear-gradient(100deg, #ffffff 8%, #6bd5ff 48%, #b69aff 78%, #f5d47d);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
}

body.kailo-premium-about .ka-gradient-heading::after {
    width: 100px !important;
    height: 4px !important;
    margin-top: 19px !important;
    background: linear-gradient(90deg, #48caff, #a78bfa, #f5cf72) !important;
    box-shadow: 0 0 20px rgba(72, 202, 255, .35);
}

body.kailo-premium-about .ka-modern-subheading {
    color: #a9ddff !important;
    font-size: clamp(18px, 2vw, 24px);
    font-weight: 750;
}

body.kailo-premium-about .ka-trending-section p,
body.kailo-premium-about .ka-trending-section li {
    color: #c3cee5 !important;
    font-size: 15px;
    line-height: 1.9;
}

/* Bento-style cards */
body.kailo-premium-about .ka-trending-section .ka-premium-card {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(121, 165, 255, .2);
    border-radius: 22px;
    background:
        linear-gradient(145deg, rgba(36, 54, 99, .78), rgba(17, 21, 49, .96));
    box-shadow: 0 14px 38px rgba(0, 0, 0, .2);
    backdrop-filter: blur(12px);
    transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}

body.kailo-premium-about .ka-trending-section .ka-premium-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 10%;
    width: 80%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #48caff, #a78bfa, transparent);
    opacity: .8;
}

body.kailo-premium-about .ka-trending-section .ka-premium-card:hover {
    transform: translateY(-10px) scale(1.015);
    border-color: rgba(91, 207, 255, .75);
    box-shadow: 0 22px 55px rgba(49, 128, 255, .17);
}

body.kailo-premium-about .ka-trending-section .ka-premium-card h3 {
    color: #ffffff !important;
}

/* Images */
body.kailo-premium-about .ka-modern-image {
    display: block;
    width: 100%;
    max-width: 100%;
    border-radius: 18px;
    object-fit: cover;
    filter: saturate(1.1);
    transition: transform .6s ease, filter .6s ease;
}

body.kailo-premium-about .ka-trending-section .ka-premium-card:hover .ka-modern-image {
    transform: scale(1.035);
    filter: saturate(1.3);
}

/* Buttons */
body.kailo-premium-about .ka-trending-section a,
body.kailo-premium-about .ka-trending-section button {
    border-radius: 40px;
    transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}

body.kailo-premium-about .ka-trending-section a:hover,
body.kailo-premium-about .ka-trending-section button:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(72, 160, 255, .25);
}

/* Lists */
body.kailo-premium-about .ka-trending-section li::marker {
    color: #64d4ff;
}

/* Reveal animation */
body.kailo-premium-about .ka-trending-section.ka-premium-visible {
    animation: ka-section-arrive .8s cubic-bezier(.2, .7, .2, 1) both;
}

@keyframes ka-section-arrive {
    from { filter: blur(5px); }
    to { filter: blur(0); }
}

/* Footer */
body.kailo-premium-about footer {
    border-top: 1px solid rgba(111, 160, 255, .2);
    background: #060914;
}

/* Responsive layout */
@media (max-width: 760px) {
    body.kailo-premium-about .ko-about-video,
    body.kailo-premium-about .ko-about-video video {
        min-height: 490px;
    }

    body.kailo-premium-about .ko-about-video-text {
        padding: 25px;
        align-items: center;
        text-align: center;
    }

    body.kailo-premium-about .ko-about-video-text h1 {
        font-size: clamp(39px, 12vw, 65px);
        letter-spacing: -1.5px;
    }

    body.kailo-premium-about .ka-trending-section {
        width: calc(100% - 24px);
        margin: 28px auto;
        padding: 25px 19px;
        border-radius: 21px;
    }

    body.kailo-premium-about .ka-gradient-heading {
        font-size: clamp(27px, 8vw, 38px) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.kailo-premium-about .ka-trending-section,
    body.kailo-premium-about .ka-premium-card,
    body.kailo-premium-about .ka-modern-image {
        animation: none !important;
        transition: none !important;
    }
}

/* KAILOTECH ABOUT BANNER - TEXT VISIBILITY AND DESIGN FIX */

body.kailo-premium-about .ko-about-video {
    position: relative !important;
    min-height: 720px !important;
    height: 82vh !important;
    max-height: 900px !important;
    overflow: hidden !important;
    isolation: isolate !important;
    background: #070a16 !important;
}

body.kailo-premium-about .ko-about-video video {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    z-index: 0 !important;
}

/* Dark cinematic overlay */
body.kailo-premium-about .ko-about-video::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    pointer-events: none !important;
    background:
        linear-gradient(90deg, rgba(3, 7, 22, .88), rgba(5, 10, 29, .42) 65%, rgba(5, 8, 23, .28)),
        linear-gradient(0deg, #070a16 0%, transparent 30%, rgba(4, 8, 22, .2) 100%) !important;
}

/* Keep all banner text visible and above the video */
body.kailo-premium-about .ko-about-video-text {
    position: absolute !important;
    inset: 0 !important;
    z-index: 5 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    text-align: left !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    box-sizing: border-box !important;
    padding: 150px clamp(25px, 9vw, 130px) 75px !important;
    overflow: visible !important;
}

/* Attractive welcome label */
body.kailo-premium-about .ko-about-video-text p {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: fit-content !important;
    max-width: 100% !important;
    margin: 0 0 25px !important;
    padding: 12px 21px !important;
    border: 1px solid rgba(83, 204, 255, .55) !important;
    border-radius: 50px !important;
    color: #80ddff !important;
    background: rgba(15, 35, 75, .66) !important;
    box-shadow: 0 0 30px rgba(61, 169, 255, .16) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: 3px !important;
    line-height: 1.5 !important;
}

/* Main heading - prevent clipping */
body.kailo-premium-about .ko-about-video-text h1 {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    max-width: 1000px !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 5px 0 12px !important;
    overflow: visible !important;
    color: #ffffff !important;
    font-size: clamp(42px, 7.5vw, 96px) !important;
    font-weight: 950 !important;
    line-height: 1.13 !important;
    letter-spacing: -2.5px !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    text-shadow: 0 8px 35px rgba(0, 0, 0, .5) !important;
}

/* Gradient innovation text */
body.kailo-premium-about .ko-about-video-text h1 span {
    display: inline-block !important;
    padding: 3px 0 8px !important;
    overflow: visible !important;
    background: linear-gradient(
        95deg,
        #55d6ff 0%,
        #8d9dff 42%,
        #c39aff 70%,
        #f5d47d 100%
    ) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    filter: drop-shadow(0 5px 16px rgba(88, 140, 255, .2));
}

/* Supporting tagline */
body.kailo-premium-about .ko-about-video-text h3 {
    display: block !important;
    max-width: 650px !important;
    margin: 15px 0 0 !important;
    padding: 0 !important;
    color: #e2edff !important;
    font-size: clamp(17px, 2.1vw, 25px) !important;
    font-weight: 500 !important;
    line-height: 1.6 !important;
    letter-spacing: .5px !important;
}

/* Decorative glowing lights */
body.kailo-premium-about .ko-about-video-text::before {
    content: "" !important;
    position: absolute !important;
    z-index: -1 !important;
    left: 8% !important;
    top: 25% !important;
    width: 330px !important;
    height: 330px !important;
    border-radius: 50% !important;
    background: rgba(45, 120, 255, .15) !important;
    filter: blur(85px) !important;
    pointer-events: none !important;
}

body.kailo-premium-about .ko-about-video-text::after {
    content: "" !important;
    position: absolute !important;
    z-index: -1 !important;
    left: 40% !important;
    bottom: 8% !important;
    width: 250px !important;
    height: 250px !important;
    border-radius: 50% !important;
    background: rgba(147, 77, 255, .12) !important;
    filter: blur(80px) !important;
    pointer-events: none !important;
}

/* Mobile adjustment */
@media (max-width: 700px) {
    body.kailo-premium-about .ko-about-video {
        min-height: 600px !important;
        height: 75vh !important;
    }

    body.kailo-premium-about .ko-about-video-text {
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
        padding: 125px 22px 55px !important;
    }

    body.kailo-premium-about .ko-about-video-text p {
        margin-bottom: 20px !important;
        font-size: 10px !important;
        letter-spacing: 2px !important;
    }

    body.kailo-premium-about .ko-about-video-text h1 {
        font-size: clamp(39px, 11vw, 65px) !important;
        line-height: 1.17 !important;
        letter-spacing: -1.5px !important;
    }

    body.kailo-premium-about .ko-about-video-text h3 {
        font-size: 17px !important;
    }
}


/* KAILOTECH ABOUT US - DEFINITIVE HEADING REPAIR */

body.kailo-premium-about .ko-about-video {
    height: 760px !important;
    min-height: 760px !important;
    max-height: none !important;
    overflow: visible !important;
    position: relative !important;
}

body.kailo-premium-about .ko-about-video-text {
    position: absolute !important;
    inset: 0 !important;
    z-index: 50 !important;
    width: 100% !important;
    height: 100% !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    padding: 170px 8vw 65px !important;
    overflow: visible !important;
    text-align: left !important;
}

body.kailo-premium-about .ko-about-video-text h1.ka-repaired-heading {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 5px !important;
    width: 100% !important;
    max-width: 1100px !important;
    height: auto !important;
    max-height: none !important;
    margin: 15px 0 !important;
    padding: 12px 0 18px !important;
    overflow: visible !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: clamp(48px, 8vw, 100px) !important;
    font-weight: 950 !important;
    line-height: 1.18 !important;
    letter-spacing: -2px !important;
    white-space: normal !important;
    text-shadow: 0 5px 30px rgba(0,0,0,.55) !important;
}

body.kailo-premium-about .ko-about-video-text h1 .ka-heading-first {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background: none !important;
    font-size: 1em !important;
    line-height: 1.2 !important;
    padding: 0 0 5px !important;
    text-shadow: 0 0 25px rgba(70, 180, 255, .25) !important;
}

body.kailo-premium-about .ko-about-video-text h1 .ka-heading-second {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    color: #69cfff !important;
    background: linear-gradient(90deg, #55d6ff, #a78bfa, #f5d47d) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    font-size: 1em !important;
    line-height: 1.2 !important;
    padding: 0 0 7px !important;
    filter: drop-shadow(0 5px 15px rgba(70, 130, 255, .22));
}

body.kailo-premium-about .ko-about-video-text p {
    position: relative !important;
    z-index: 51 !important;
    margin-bottom: 15px !important;
}

body.kailo-premium-about .ko-about-video-text h3 {
    position: relative !important;
    z-index: 51 !important;
    margin-top: 12px !important;
}

@media(max-width: 700px) {
    body.kailo-premium-about .ko-about-video {
        height: 650px !important;
        min-height: 650px !important;
    }

    body.kailo-premium-about .ko-about-video-text {
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        padding: 145px 20px 50px !important;
    }

    body.kailo-premium-about .ko-about-video-text h1.ka-repaired-heading {
        align-items: center !important;
        font-size: clamp(38px, 10.5vw, 65px) !important;
        letter-spacing: -1.5px !important;
        line-height: 1.22 !important;
    }
}


/* FINAL FIX: MOVE ABOUT US HEADING DOWN INSIDE VIDEO */

body.kailo-premium-about .ko-about-video {
    position: relative !important;
    height: 780px !important;
    min-height: 780px !important;
    overflow: hidden !important;
}

body.kailo-premium-about .ko-about-video-text {
    position: absolute !important;
    inset: 0 !important;
    z-index: 100 !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    padding: 245px 8vw 55px !important;
    overflow: visible !important;
    text-align: left !important;
}

body.kailo-premium-about .ko-about-video-text p {
    margin: 0 0 15px !important;
    position: relative !important;
    z-index: 101 !important;
}

body.kailo-premium-about .ko-about-video-text h1,
body.kailo-premium-about .ko-about-video-text h1.ka-repaired-heading {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    transform: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: 1000px !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 8px 0 12px !important;
    overflow: visible !important;
    font-size: clamp(42px, 6.5vw, 78px) !important;
    line-height: 1.25 !important;
    letter-spacing: -1.5px !important;
    white-space: normal !important;
    text-align: left !important;
}

body.kailo-premium-about .ko-about-video-text h1 .ka-heading-first,
body.kailo-premium-about .ko-about-video-text h1 .ka-heading-second {
    display: block !important;
    position: relative !important;
    top: 0 !important;
    transform: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: auto !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 5px 0 !important;
    margin: 0 !important;
    line-height: 1.25 !important;
    white-space: normal !important;
}

body.kailo-premium-about .ko-about-video-text h1 .ka-heading-first {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background: none !important;
}

body.kailo-premium-about .ko-about-video-text h1 .ka-heading-second {
    background: linear-gradient(90deg, #55d6ff, #a78bfa, #f5d47d) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

body.kailo-premium-about .ko-about-video-text h3 {
    margin-top: 12px !important;
    position: relative !important;
    z-index: 101 !important;
}

/* Mobile position correction */
@media(max-width: 700px) {
    body.kailo-premium-about .ko-about-video {
        height: 690px !important;
        min-height: 690px !important;
    }

    body.kailo-premium-about .ko-about-video-text {
        align-items: center !important;
        justify-content: flex-start !important;
        text-align: center !important;
        padding: 215px 20px 45px !important;
    }

    body.kailo-premium-about .ko-about-video-text h1,
    body.kailo-premium-about .ko-about-video-text h1.ka-repaired-heading {
        align-items: center !important;
        text-align: center !important;
        font-size: clamp(37px, 9vw, 58px) !important;
        line-height: 1.3 !important;
    }

    body.kailo-premium-about .ko-about-video-text h3 {
        text-align: center !important;
    }
}


/* DIRECT HTML BANNER REPAIR - COMPLETE HEADING VISIBILITY */

body.kailo-premium-about .ko-about-video.ka-about-banner-fixed,
.ko-about-video.ka-about-banner-fixed {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 900px !important;
    min-height: 900px !important;
    max-height: none !important;
    overflow: hidden !important;
    isolation: isolate !important;
}

.ko-about-video.ka-about-banner-fixed video {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    object-fit: cover !important;
    z-index: 0 !important;
}

.ko-about-video.ka-about-banner-fixed .ka-about-text-fixed {
    position: absolute !important;
    top: 260px !important;
    left: 8% !important;
    right: 8% !important;
    bottom: auto !important;
    inset: 260px 8% auto !important;
    transform: none !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    box-sizing: border-box !important;
    padding: 0 0 35px !important;
    margin: 0 !important;
    overflow: visible !important;
    text-align: left !important;
    z-index: 100 !important;
}

.ko-about-video.ka-about-banner-fixed .ka-about-text-fixed p {
    display: block !important;
    position: relative !important;
    margin: 0 0 22px !important;
    padding: 11px 20px !important;
    color: #83ddff !important;
    background: rgba(12, 29, 66, .85) !important;
    border: 1px solid rgba(83, 204, 255, .65) !important;
    border-radius: 40px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: 3px !important;
    line-height: 1.5 !important;
    z-index: 101 !important;
}

.ko-about-video.ka-about-banner-fixed h1.ka-repaired-heading {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    max-width: 1100px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 12px 0 18px !important;
    overflow: visible !important;
    color: white !important;
    font-size: clamp(45px, 7vw, 88px) !important;
    font-weight: 950 !important;
    line-height: 1.3 !important;
    letter-spacing: -2px !important;
    white-space: normal !important;
    text-align: left !important;
}

.ko-about-video.ka-about-banner-fixed h1 .ka-heading-first {
    display: block !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 8px 0 !important;
    overflow: visible !important;
    color: #ffffff !important;
    background: none !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 1em !important;
    line-height: 1.3 !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.ko-about-video.ka-about-banner-fixed h1 .ka-heading-second {
    display: block !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 8px 0 !important;
    overflow: visible !important;
    background: linear-gradient(90deg, #55d6ff, #a78bfa, #f5d47d) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    font-size: 1em !important;
    line-height: 1.3 !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.ko-about-video.ka-about-banner-fixed .ka-about-text-fixed h3 {
    position: relative !important;
    margin: 18px 0 0 !important;
    padding: 0 !important;
    color: #e2edff !important;
    font-size: clamp(17px, 2vw, 25px) !important;
    line-height: 1.6 !important;
    z-index: 101 !important;
}

@media(max-width: 700px) {
    .ko-about-video.ka-about-banner-fixed {
        height: 720px !important;
        min-height: 720px !important;
    }

    .ko-about-video.ka-about-banner-fixed .ka-about-text-fixed {
        top: 230px !important;
        left: 20px !important;
        right: 20px !important;
        inset: 230px 20px auto !important;
        align-items: center !important;
        text-align: center !important;
    }

    .ko-about-video.ka-about-banner-fixed h1.ka-repaired-heading {
        align-items: center !important;
        font-size: clamp(36px, 9vw, 58px) !important;
        line-height: 1.3 !important;
        letter-spacing: -1px !important;
        text-align: center !important;
    }

    .ko-about-video.ka-about-banner-fixed .ka-about-text-fixed h3 {
        text-align: center !important;
    }
}


/* =====================================
   KAILOTECH SERVICES - PREMIUM DESIGN
   ===================================== */

body.kailo-services-page {
    background: #070a16 !important;
    color: #f5f7ff;
    overflow-x: hidden;
}

body.kailo-services-page main {
    background:
        radial-gradient(ellipse at 10% 15%, rgba(44, 119, 255, .13), transparent 35%),
        radial-gradient(ellipse at 90% 45%, rgba(145, 71, 255, .12), transparent 35%),
        #070a16;
}

body.kailo-services-page .ks-hero {
    min-height: 680px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    padding: 100px 8%;
    isolation: isolate;
    background:
        linear-gradient(110deg, rgba(5, 9, 25, .98), rgba(11, 18, 46, .85)),
        #080d20;
}

body.kailo-services-page .ks-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: .16;
    background-image:
        linear-gradient(rgba(103, 157, 255, .2) 1px, transparent 1px),
        linear-gradient(90deg, rgba(103, 157, 255, .2) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: linear-gradient(90deg, black, transparent);
}

body.kailo-services-page .ks-hero-content {
    max-width: 760px;
    position: relative;
    z-index: 3;
}

body.kailo-services-page .ks-eyebrow,
body.kailo-services-page .ks-intro-label {
    color: #65d3ff;
    font-size: 11px;
    font-weight: 850;
    letter-spacing: 3px;
    margin-bottom: 22px;
}

body.kailo-services-page .ks-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 11px 17px;
    border: 1px solid rgba(89, 197, 255, .4);
    border-radius: 40px;
    background: rgba(23, 51, 99, .48);
    backdrop-filter: blur(12px);
}

body.kailo-services-page .ks-eyebrow span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #61e5b0;
    box-shadow: 0 0 15px #61e5b0;
}

body.kailo-services-page .ks-hero h1 {
    color: #fff;
    font-size: clamp(44px, 7.5vw, 88px);
    line-height: 1.05;
    font-weight: 950;
    letter-spacing: -3px;
    margin: 20px 0;
}

body.kailo-services-page .ks-hero h1 span,
body.kailo-services-page .ks-intro h2 span,
body.kailo-services-page .ks-section-heading h2 span,
body.kailo-services-page .ks-process h2 span,
body.kailo-services-page .ks-final-cta h2 span {
    background: linear-gradient(95deg, #55d6ff, #a78bfa, #f5d47d);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

body.kailo-services-page .ks-hero-content > p {
    max-width: 650px;
    color: #c5d0e8;
    font-size: 17px;
    line-height: 1.85;
}

body.kailo-services-page .ks-hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 32px;
}

body.kailo-services-page .ks-primary-btn,
body.kailo-services-page .ks-outline-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 0 23px;
    border-radius: 40px;
    text-decoration: none;
    font-size: 11px;
    font-weight: 850;
    letter-spacing: 1px;
    transition: .3s ease;
}

body.kailo-services-page .ks-primary-btn {
    color: #07101e;
    background: linear-gradient(100deg, #55d6ff, #a78bfa);
    box-shadow: 0 8px 30px rgba(83, 179, 255, .2);
}

body.kailo-services-page .ks-outline-btn {
    color: #e6edff;
    border: 1px solid rgba(155, 181, 255, .4);
    background: rgba(255, 255, 255, .035);
}

body.kailo-services-page .ks-primary-btn:hover,
body.kailo-services-page .ks-outline-btn:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 35px rgba(83, 179, 255, .25);
}

body.kailo-services-page .ks-hero-note {
    margin-top: 45px;
    color: #8797b9;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

body.kailo-services-page .ks-hero-note i {
    display: inline-block;
    width: 5px;
    height: 5px;
    margin: 0 12px 2px;
    border-radius: 50%;
    background: #65d3ff;
}

body.kailo-services-page .ks-hero-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(75px);
    pointer-events: none;
    z-index: -1;
}

body.kailo-services-page .ks-glow-one {
    width: 420px;
    height: 420px;
    right: 5%;
    top: 10%;
    background: rgba(43, 121, 255, .22);
}

body.kailo-services-page .ks-glow-two {
    width: 300px;
    height: 300px;
    right: 22%;
    bottom: -15%;
    background: rgba(155, 77, 255, .18);
}

body.kailo-services-page .ks-hero-decoration {
    position: absolute;
    right: 8%;
    top: 50%;
    width: 340px;
    height: 340px;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
}

body.kailo-services-page .ks-orbit {
    position: absolute;
    border: 1px solid rgba(104, 193, 255, .3);
    border-radius: 50%;
    box-shadow: 0 0 40px rgba(64, 153, 255, .08);
}

body.kailo-services-page .ks-orbit-one {
    width: 310px;
    height: 310px;
    transform: rotateX(65deg) rotate(-25deg);
    animation: ks-spin 16s linear infinite;
}

body.kailo-services-page .ks-orbit-two {
    width: 240px;
    height: 240px;
    transform: rotateX(65deg) rotate(40deg);
    border-color: rgba(181, 132, 255, .4);
    animation: ks-spin 12s linear infinite reverse;
}

body.kailo-services-page .ks-orbit-core {
    display: grid;
    place-items: center;
    width: 110px;
    height: 110px;
    border-radius: 30px;
    color: white;
    font-size: 65px;
    font-weight: 950;
    background: linear-gradient(145deg, #2a8dff, #8154e8);
    box-shadow: 0 0 65px rgba(80, 137, 255, .45);
    transform: rotate(-8deg);
}

body.kailo-services-page .ks-floating-label {
    position: absolute;
    padding: 10px 15px;
    border: 1px solid rgba(111, 186, 255, .3);
    border-radius: 30px;
    color: #bdeaff;
    background: rgba(14, 26, 57, .85);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 2px;
    backdrop-filter: blur(10px);
}

body.kailo-services-page .ks-label-one { top: 35px; left: 0; }
body.kailo-services-page .ks-label-two { bottom: 35px; right: 0; }

@keyframes ks-spin {
    to { rotate: 360deg; }
}

/* Introduction */
body.kailo-services-page .ks-intro {
    max-width: 1000px;
    margin: 0 auto;
    padding: 100px 25px 60px;
    text-align: center;
}

body.kailo-services-page .ks-intro h2,
body.kailo-services-page .ks-process h2 {
    color: #fff;
    font-size: clamp(28px, 4.5vw, 48px);
    line-height: 1.2;
    font-weight: 900;
}

body.kailo-services-page .ks-intro > p {
    max-width: 780px;
    margin: 20px auto 0;
    color: #aebbd5;
    line-height: 1.9;
    font-size: 15px;
}

/* Services */
body.kailo-services-page .ks-services-section {
    max-width: 1320px;
    margin: 0 auto;
    padding: 65px 28px 100px;
    scroll-margin-top: 90px;
}

body.kailo-services-page .ks-section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 38px;
}

body.kailo-services-page .ks-section-heading h2 {
    margin: 0;
    color: white;
    font-size: clamp(30px, 4vw, 46px);
    font-weight: 900;
}

body.kailo-services-page .ks-section-heading > p {
    max-width: 360px;
    color: #9eacc8;
    line-height: 1.7;
    font-size: 14px;
}

body.kailo-services-page .ks-service-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

body.kailo-services-page .ks-service-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 265px;
    padding: 27px;
    overflow: hidden;
    border: 1px solid rgba(123, 159, 237, .2);
    border-radius: 23px;
    background: linear-gradient(145deg, rgba(25, 38, 75, .88), rgba(12, 17, 39, .97));
    box-shadow: 0 15px 40px rgba(0, 0, 0, .18);
    transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}

body.kailo-services-page .ks-service-card::after {
    content: "";
    position: absolute;
    width: 160px;
    height: 160px;
    right: -90px;
    top: -90px;
    border-radius: 50%;
    background: rgba(75, 153, 255, .14);
    filter: blur(25px);
    transition: .4s ease;
}

body.kailo-services-page .ks-service-card:hover {
    transform: translateY(-9px);
    border-color: rgba(90, 204, 255, .75);
    box-shadow: 0 22px 55px rgba(45, 118, 255, .15);
}

body.kailo-services-page .ks-service-card:hover::after {
    transform: scale(2);
}

body.kailo-services-page .ks-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 22px;
}

body.kailo-services-page .ks-number {
    color: #6fcfff;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 2px;
}

body.kailo-services-page .ks-icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border: 1px solid rgba(116, 173, 255, .25);
    border-radius: 16px;
    background: rgba(76, 115, 210, .14);
    font-size: 25px;
}

body.kailo-services-page .ks-service-card h3 {
    color: #f6f8ff;
    font-size: 19px;
    line-height: 1.35;
    margin: 0 0 12px;
}

body.kailo-services-page .ks-service-card p {
    color: #aebbd4;
    font-size: 13px;
    line-height: 1.8;
    margin: 0 0 22px;
}

body.kailo-services-page .ks-service-card a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid rgba(143, 170, 228, .14);
    color: #76d8ff;
    text-decoration: none;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 1px;
}

body.kailo-services-page .ks-service-card a span {
    font-size: 18px;
    transition: transform .25s ease;
}

body.kailo-services-page .ks-service-card a:hover span {
    transform: translate(4px, -4px);
}

body.kailo-services-page .ks-featured-card {
    border-color: rgba(187, 143, 255, .42);
    background: linear-gradient(145deg, rgba(63, 42, 105, .55), rgba(14, 18, 43, .96));
}

/* Development process */
body.kailo-services-page .ks-process {
    margin: 25px 28px 90px;
    padding: 75px 35px;
    text-align: center;
    border: 1px solid rgba(113, 164, 255, .2);
    border-radius: 30px;
    background: linear-gradient(120deg, rgba(20, 36, 76, .8), rgba(31, 20, 64, .8));
}

body.kailo-services-page .ks-process-description {
    color: #afbdd7;
    line-height: 1.8;
}

body.kailo-services-page .ks-process-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    max-width: 1100px;
    margin: 50px auto 0;
    gap: 20px;
}

body.kailo-services-page .ks-process-step {
    padding: 25px 16px;
    border: 1px solid rgba(121, 167, 255, .2);
    border-radius: 20px;
    background: rgba(8, 15, 37, .55);
}

body.kailo-services-page .ks-process-step > span {
    color: #69d2ff;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 2px;
}

body.kailo-services-page .ks-process-step > div {
    margin: 15px 0;
    font-size: 35px;
}

body.kailo-services-page .ks-process-step h3 {
    color: white;
    font-size: 16px;
}

body.kailo-services-page .ks-process-step p {
    color: #aab8d2;
    font-size: 12px;
    line-height: 1.7;
}

/* Final call to action */
body.kailo-services-page .ks-final-cta {
    position: relative;
    overflow: hidden;
    margin: 0 auto 80px;
    padding: 85px 25px;
    max-width: 1250px;
    text-align: center;
    border: 1px solid rgba(130, 161, 255, .22);
    border-radius: 30px;
    background: linear-gradient(120deg, #121e43, #241744);
}

body.kailo-services-page .ks-final-cta h2 {
    color: white;
    font-size: clamp(37px, 6vw, 65px);
    line-height: 1.1;
    font-weight: 950;
}

body.kailo-services-page .ks-final-cta > p {
    color: #c1cce2;
    line-height: 1.8;
}

body.kailo-services-page .ks-final-cta .ks-hero-buttons {
    justify-content: center;
}

body.kailo-services-page .ks-cta-orb {
    position: absolute;
    width: 240px;
    height: 240px;
    top: -120px;
    right: 10%;
    border-radius: 50%;
    background: rgba(78, 151, 255, .2);
    filter: blur(60px);
    pointer-events: none;
}

/* Responsive */
@media(max-width: 950px) {
    body.kailo-services-page .ks-hero-decoration {
        opacity: .35;
        right: -80px;
    }

    body.kailo-services-page .ks-service-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.kailo-services-page .ks-process-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media(max-width: 650px) {
    body.kailo-services-page .ks-hero {
        min-height: 650px;
        padding: 95px 23px 65px;
    }

    body.kailo-services-page .ks-hero h1 {
        font-size: clamp(40px, 11vw, 60px);
        letter-spacing: -1.5px;
    }

    body.kailo-services-page .ks-hero-decoration {
        opacity: .13;
        right: -140px;
    }

    body.kailo-services-page .ks-hero-note {
        line-height: 2.2;
    }

    body.kailo-services-page .ks-intro {
        padding: 70px 22px 35px;
    }

    body.kailo-services-page .ks-services-section {
        padding: 45px 16px 65px;
    }

    body.kailo-services-page .ks-section-heading {
        display: block;
    }

    body.kailo-services-page .ks-service-grid {
        grid-template-columns: 1fr;
    }

    body.kailo-services-page .ks-service-card {
        min-height: 235px;
    }

    body.kailo-services-page .ks-process {
        margin: 15px 12px 55px;
        padding: 55px 16px;
    }

    body.kailo-services-page .ks-process-grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    body.kailo-services-page .ks-final-cta {
        margin: 0 12px 50px;
        padding: 60px 18px;
    }

    body.kailo-services-page .ks-hero-buttons {
        flex-direction: column;
        align-items: stretch;
    }
}

@media(prefers-reduced-motion: reduce) {
    body.kailo-services-page *,
    body.kailo-services-page *::before,
    body.kailo-services-page *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

/* KAILOTECH EXPANDABLE SERVICE CATALOGUE */
body.kailo-services-page .ks-price-notice {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin: 25px 0 28px;
    padding: 20px 23px;
    border: 1px solid rgba(93, 190, 255, .28);
    border-radius: 17px;
    background: linear-gradient(110deg, rgba(34, 92, 157, .18), rgba(110, 72, 174, .12));
}
body.kailo-services-page .ks-price-notice strong {
    color: #6ed6ff;
    font-size: 12px;
    letter-spacing: 2px;
}
body.kailo-services-page .ks-price-notice span {
    color: #b9c6df;
    font-size: 13px;
    line-height: 1.7;
}
body.kailo-services-page .ks-category-list {
    display: grid;
    gap: 14px;
}
body.kailo-services-page .ks-category {
    border: 1px solid rgba(119, 159, 232, .22);
    border-radius: 19px;
    overflow: hidden;
    background: linear-gradient(120deg, rgba(23, 36, 73, .9), rgba(13, 19, 43, .96));
    transition: border-color .25s ease, box-shadow .25s ease;
}
body.kailo-services-page .ks-category[open] {
    border-color: rgba(91, 202, 255, .65);
    box-shadow: 0 15px 40px rgba(37, 116, 240, .12);
}
body.kailo-services-page .ks-category summary {
    display: grid;
    grid-template-columns: 38px 48px minmax(0, 1fr) auto 25px;
    align-items: center;
    gap: 15px;
    min-height: 88px;
    padding: 17px 23px;
    cursor: pointer;
    list-style: none;
}
body.kailo-services-page .ks-category summary::-webkit-details-marker {
    display: none;
}
body.kailo-services-page .ks-cat-number {
    color: #69d5ff;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 1px;
}
body.kailo-services-page .ks-cat-icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border: 1px solid rgba(115, 168, 255, .25);
    border-radius: 14px;
    background: rgba(77, 120, 218, .15);
    font-size: 23px;
}
body.kailo-services-page .ks-cat-name {
    color: #f4f7ff;
    font-size: 17px;
    font-weight: 800;
}
body.kailo-services-page .ks-cat-hint {
    color: #8fa8d2;
    font-size: 11px;
}
body.kailo-services-page .ks-cat-arrow {
    display: grid;
    place-items: center;
    width: 27px;
    height: 27px;
    border: 1px solid rgba(115, 168, 255, .35);
    border-radius: 50%;
    color: #78d8ff;
    font-size: 20px;
    transition: transform .25s ease;
}
body.kailo-services-page .ks-category[open] .ks-cat-arrow {
    transform: rotate(45deg);
}
body.kailo-services-page .ks-option-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    padding: 4px 18px 20px;
    border-top: 1px solid rgba(125, 159, 225, .15);
}
body.kailo-services-page .ks-option {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    padding: 20px;
    margin-top: 15px;
    border: 1px solid rgba(124, 164, 241, .18);
    border-radius: 16px;
    background: rgba(5, 12, 31, .58);
}
body.kailo-services-page .ks-option h4 {
    margin: 0 0 10px;
    color: #f5f7ff;
    font-size: 16px;
    line-height: 1.45;
}
body.kailo-services-page .ks-option p {
    color: #adbbd5;
    font-size: 12px;
    line-height: 1.75;
    margin: 0 0 12px;
}
body.kailo-services-page .ks-features {
    color: #78cce9;
    font-size: 11px;
    line-height: 1.8;
    margin-bottom: 15px;
}
body.kailo-services-page .ks-option > strong {
    margin-top: auto;
    color: #f5d47d;
    font-size: 21px;
    font-weight: 900;
    padding: 10px 0;
}
body.kailo-services-page .ks-option > a {
    display: inline-block;
    margin-top: 8px;
    padding: 10px 15px;
    border: 1px solid rgba(91, 202, 255, .35);
    border-radius: 30px;
    color: #80dfff;
    font-size: 11px;
    font-weight: 800;
    text-decoration: none;
    transition: .25s ease;
}
body.kailo-services-page .ks-option > a:hover {
    color: #07101e;
    background: #73d8ff;
}
body.kailo-services-page .ks-pricing-terms {
    margin-top: 30px;
    padding: 24px;
    border: 1px solid rgba(245, 207, 114, .25);
    border-radius: 18px;
    background: rgba(76, 59, 25, .12);
}
body.kailo-services-page .ks-pricing-terms h3 {
    color: #f5d47d;
    font-size: 17px;
}
body.kailo-services-page .ks-pricing-terms li {
    color: #b9c6dc;
    font-size: 12px;
    line-height: 1.9;
    margin-bottom: 5px;
}
@media(max-width: 850px) {
    body.kailo-services-page .ks-option-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media(max-width: 600px) {
    body.kailo-services-page .ks-category summary {
        grid-template-columns: 27px 40px minmax(0, 1fr) 25px;
        gap: 9px;
        padding: 14px 12px;
    }
    body.kailo-services-page .ks-cat-icon {
        width: 38px;
        height: 38px;
        font-size: 20px;
    }
    body.kailo-services-page .ks-cat-name {
        font-size: 13px;
    }
    body.kailo-services-page .ks-cat-hint {
        display: none;
    }
    body.kailo-services-page .ks-option-grid {
        grid-template-columns: 1fr;
        padding: 4px 12px 15px;
    }
    body.kailo-services-page .ks-option {
        padding: 17px;
    }
}


/* ==========================================
   KAILOTECH PREMIUM SERVICES DESIGN
========================================== */

body:has(.kp-services-hero) {
    background: #07111f;
    color: #f5f8ff;
}

.kp-services-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 590px;
    padding: 105px 7% 75px;
    display: flex;
    align-items: center;
    background:
        linear-gradient(90deg, rgba(3,10,25,.97) 0%, rgba(5,16,38,.88) 55%, rgba(5,15,35,.48) 100%),
        url("https://images.unsplash.com/photo-1518770660439-4636190af475?auto=format&fit=crop&w=2000&q=85") center/cover no-repeat;
}

.kp-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(circle at 80% 40%, rgba(0,190,255,.22), transparent 35%),
        linear-gradient(120deg, transparent, rgba(75,40,180,.12));
}

.kp-hero-content {
    position: relative;
    z-index: 2;
    width: min(760px, 100%);
}

.kp-hero-label {
    display: inline-block;
    color: #55e5ff;
    font-size: 12px;
    letter-spacing: 3px;
    font-weight: 800;
    margin-bottom: 22px;
}

.kp-hero-content h1 {
    color: white;
    font-size: clamp(38px, 6vw, 76px);
    line-height: 1.08;
    letter-spacing: -2px;
    font-weight: 900;
    margin: 0 0 22px;
}

.kp-hero-content h1 span {
    background: linear-gradient(90deg,#35e5ff,#7589ff,#c18aff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.kp-hero-content > p {
    max-width: 620px;
    color: #c4d2e8;
    font-size: 17px;
    line-height: 1.8;
}

.kp-hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 32px;
}

.kp-primary-btn,
.kp-outline-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 15px 25px;
    border-radius: 9px;
    text-decoration: none;
    font-weight: 800;
    transition: .3s ease;
}

.kp-primary-btn {
    color: #07111f;
    background: linear-gradient(100deg,#36e5ff,#8295ff);
    box-shadow: 0 8px 30px rgba(43,190,255,.22);
}

.kp-outline-btn {
    color: white;
    border: 1px solid rgba(255,255,255,.4);
    background: rgba(255,255,255,.06);
}

.kp-primary-btn:hover,
.kp-outline-btn:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 35px rgba(44,180,255,.25);
}

.kp-hero-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 45px;
    margin-top: 48px;
}

.kp-hero-stats div {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.kp-hero-stats strong {
    font-size: 28px;
    color: #56e5ff;
}

.kp-hero-stats small {
    color: #c0cee1;
    font-size: 12px;
}

.kp-hero-decoration {
    position: absolute;
    right: 8%;
    top: 15%;
    width: 300px;
    height: 350px;
    pointer-events: none;
}

.kp-glow-circle {
    position: absolute;
    width: 260px;
    height: 260px;
    top: 35px;
    border-radius: 50%;
    border: 1px solid rgba(75,220,255,.4);
    box-shadow: 0 0 70px rgba(40,170,255,.18), inset 0 0 60px rgba(100,90,255,.15);
}

.kp-floating-tag {
    position: absolute;
    top: 65px;
    right: -15px;
    padding: 13px 18px;
    color: white;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
    border: 1px solid rgba(90,210,255,.4);
    border-radius: 9px;
    background: rgba(10,30,60,.85);
    backdrop-filter: blur(12px);
}

.kp-tag-two {
    top: 230px;
    right: 20px;
}

/* Catalogue background */
.ks-detailed-catalogue,
.ks-services-section {
    background: #07111f;
    color: #f5f8ff;
    padding: 75px 6%;
}

.ks-detailed-catalogue h2,
.ks-services-section h2 {
    color: white;
}

/* Expandable category cards */
.ks-category {
    position: relative;
    overflow: hidden;
    margin: 18px 0;
    border: 1px solid rgba(119,166,220,.2);
    border-radius: 16px;
    background: linear-gradient(135deg,#111f35,#0b172a);
    box-shadow: 0 8px 25px rgba(0,0,0,.15);
    transition: .3s ease;
}

.ks-category:hover {
    border-color: rgba(50,210,255,.65);
    transform: translateY(-3px);
    box-shadow: 0 15px 35px rgba(0,150,255,.12);
}

.ks-category summary {
    position: relative;
    min-height: 100px;
    padding: 25px 65px 25px 115px;
    display: flex;
    align-items: center;
    cursor: pointer;
    color: #fff;
    font-size: 19px;
    font-weight: 800;
    list-style: none;
}

.ks-category summary::-webkit-details-marker {
    display: none;
}

.ks-category summary::before {
    content: "";
    position: absolute;
    left: 24px;
    top: 50%;
    transform: translateY(-50%);
    width: 70px;
    height: 70px;
    border-radius: 12px;
    background-size: cover;
    background-position: center;
    border: 1px solid rgba(90,210,255,.35);
    box-shadow: 0 5px 20px rgba(0,0,0,.3);
}

.ks-category summary::after {
    content: "+";
    position: absolute;
    right: 25px;
    top: 50%;
    transform: translateY(-50%);
    color: #52e4ff;
    font-size: 28px;
}

.ks-category[open] summary::after {
    content: "−";
}

/* Service category image thumbnails */
.ks-category:nth-child(1) summary::before {
    background-image: url("https://images.unsplash.com/photo-1555066931-4365d14bab8c?w=300&q=80");
}
.ks-category:nth-child(2) summary::before {
    background-image: url("https://images.unsplash.com/photo-1677442136019-21780ecad995?w=300&q=80");
}
.ks-category:nth-child(3) summary::before {
    background-image: url("https://images.unsplash.com/photo-1518770660439-4636190af475?w=300&q=80");
}
.ks-category:nth-child(4) summary::before {
    background-image: url("https://images.unsplash.com/photo-1485827404703-89b55fcc595e?w=300&q=80");
}
.ks-category:nth-child(5) summary::before {
    background-image: url("https://images.unsplash.com/photo-1535223289827-42f1e9919769?w=300&q=80");
}
.ks-category:nth-child(6) summary::before {
    background-image: url("https://images.unsplash.com/photo-1498050108023-c5249f4df085?w=300&q=80");
}
.ks-category:nth-child(7) summary::before {
    background-image: url("https://images.unsplash.com/photo-1512941937669-90a1b58e7e9c?w=300&q=80");
}
.ks-category:nth-child(8) summary::before {
    background-image: url("https://images.unsplash.com/photo-1519389950473-47ba0277781c?w=300&q=80");
}
.ks-category:nth-child(9) summary::before {
    background-image: url("https://images.unsplash.com/photo-1516321318423-f06f85e504b3?w=300&q=80");
}
.ks-category:nth-child(10) summary::before {
    background-image: url("https://images.unsplash.com/photo-1581091226825-a6a2a5aee158?w=300&q=80");
}
.ks-category:nth-child(11) summary::before {
    background-image: url("https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?w=300&q=80");
}
.ks-category:nth-child(12) summary::before {
    background-image: url("https://images.unsplash.com/photo-1524178232363-1fb2b075b655?w=300&q=80");
}
.ks-category:nth-child(13) summary::before {
    background-image: url("https://images.unsplash.com/photo-1516321318423-f06f85e504b3?w=300&q=80");
}
.ks-category:nth-child(14) summary::before {
    background-image: url("https://images.unsplash.com/photo-1531482615713-2afd69097998?w=300&q=80");
}
.ks-category:nth-child(15) summary::before {
    background-image: url("https://images.unsplash.com/photo-1521737711867-e3b97375f902?w=300&q=80");
}

/* Inner package content */
.ks-category > *:not(summary) {
    color: #d3e0f2;
}

.ks-category[open] {
    border-color: rgba(58,208,255,.55);
}

.ks-category .ks-package,
.ks-category .ks-service-card,
.ks-category .ks-option {
    border: 1px solid rgba(120,160,210,.2);
    border-radius: 12px;
    background: rgba(255,255,255,.045);
    transition: .25s ease;
}

.ks-category .ks-package:hover,
.ks-category .ks-service-card:hover,
.ks-category .ks-option:hover {
    background: rgba(55,150,255,.1);
    border-color: rgba(75,210,255,.5);
}

.ks-category a[href*="contact"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 11px 19px;
    margin: 8px 0;
    border-radius: 8px;
    background: linear-gradient(100deg,#27d8f5,#777bff);
    color: #07111f !important;
    font-weight: 800;
    text-decoration: none;
    transition: .25s ease;
}

.ks-category a[href*="contact"]:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 22px rgba(55,180,255,.25);
}

/* General catalogue text */
.ks-category p,
.ks-category li {
    color: #c5d4e9;
    line-height: 1.7;
}

.ks-category strong {
    color: #61e4ff;
}

/* Mobile layout */
@media(max-width:850px) {
    .kp-hero-decoration {
        opacity: .35;
        right: -90px;
    }
}

@media(max-width:600px) {
    .kp-services-hero {
        min-height: 560px;
        padding: 85px 22px 55px;
    }

    .kp-hero-content h1 {
        font-size: 39px;
        letter-spacing: -1px;
    }

    .kp-hero-content > p {
        font-size: 15px;
    }

    .kp-hero-stats {
        gap: 20px;
    }

    .kp-hero-stats strong {
        font-size: 22px;
    }

    .kp-hero-decoration {
        display: none;
    }

    .ks-detailed-catalogue,
    .ks-services-section {
        padding: 45px 17px;
    }

    .ks-category summary {
        padding: 20px 43px 20px 82px;
        min-height: 82px;
        font-size: 15px;
    }

    .ks-category summary::before {
        left: 13px;
        width: 55px;
        height: 55px;
    }

    .ks-category summary::after {
        right: 13px;
        font-size: 22px;
    }
}

/* ===== KAILOTECH PREMIUM GALLERY ===== */
.kg-gallery {
  padding-top: 55px;
  background:
    radial-gradient(ellipse at 12% 8%, rgba(56,189,248,.12), transparent 34%),
    radial-gradient(ellipse at 90% 35%, rgba(139,92,246,.10), transparent 35%),
    #050812;
}
.kg-hero {
  min-height: 470px;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
  gap: 45px;
  padding: 45px 0 85px;
}
.kg-hero-copy { max-width: 650px; }
.kg-hero-copy h1 {
  font-size: clamp(3rem, 6.5vw, 6rem);
  line-height: 1.02;
  letter-spacing: -.055em;
  margin: 20px 0;
}
.kg-hero-copy h1 span,
.kg-heading h2 span,
.kg-bottom-cta h2 span { color: var(--blue); }
.kg-hero-copy > p:not(.eyebrow) {
  color: var(--muted);
  line-height: 1.9;
  max-width: 550px;
  margin-bottom: 30px;
}
.kg-hero-visual {
  position: relative;
  min-height: 360px;
  border: 1px solid rgba(56,189,248,.35);
  padding: 12px;
  background: linear-gradient(145deg,#102b46,#111027);
  box-shadow: 0 25px 80px rgba(0,0,0,.4),0 0 45px rgba(56,189,248,.12);
}
.kg-hero-visual img {
  width: 100%;
  height: 390px;
  display: block;
  object-fit: cover;
}
.kg-floating-label {
  position: absolute;
  bottom: 28px;
  left: -20px;
  background: #071426;
  border: 1px solid #38bdf8;
  padding: 13px 18px;
  color: #bdeaff;
  font-size: .7rem;
  letter-spacing: .16em;
  font-weight: 800;
}
.kg-heading { text-align: center; margin: 15px auto 35px; }
.kg-heading h2 { margin: 12px auto; }
.kg-heading > p:last-child { color: var(--muted); }
.kg-filters {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 35px 0;
}
.kg-filter {
  padding: 12px 19px;
  border: 1px solid rgba(148,163,184,.25);
  color: #cbd5e1;
  background: #0b1423;
  cursor: pointer;
  font-weight: 700;
  border-radius: 3px;
  transition: .25s ease;
}
.kg-filter:hover,
.kg-filter.active {
  color: #04101c;
  border-color: var(--blue);
  background: linear-gradient(100deg,#38bdf8,#8b5cf6);
}
.kg-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 22px;
}
.kg-card {
  min-width: 0;
  overflow: hidden;
  background: linear-gradient(145deg,#101d31,#080e1a);
  border: 1px solid rgba(148,163,184,.19);
  transition: transform .3s ease,border-color .3s ease,box-shadow .3s ease;
}
.kg-card:hover {
  transform: translateY(-8px);
  border-color: rgba(56,189,248,.7);
  box-shadow: 0 18px 45px rgba(0,0,0,.35);
}
.kg-card[hidden] { display: none !important; }
.kg-image { height: 235px; position: relative; overflow: hidden; }
.kg-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s ease;
}
.kg-card:hover .kg-image img { transform: scale(1.07); }
.kg-number {
  position: absolute;
  top: 14px;
  left: 14px;
  background: rgba(4,10,20,.82);
  color: #8be0ff;
  border: 1px solid rgba(56,189,248,.5);
  padding: 7px 10px;
  font-size: .75rem;
  font-weight: 800;
}
.kg-card-info { padding: 23px; }
.kg-card-info > span {
  color: var(--blue);
  font-size: .65rem;
  letter-spacing: .16em;
  font-weight: 800;
}
.kg-card-info h3 { margin: 11px 0; font-size: 1.2rem; }
.kg-card-info p { color: var(--muted); font-size: .88rem; line-height: 1.7; margin-bottom: 0; }
.kg-bottom-cta {
  margin-top: 75px;
  padding: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 25px;
  flex-wrap: wrap;
  border: 1px solid rgba(56,189,248,.25);
  background: linear-gradient(110deg,#102b46,#17112f);
}
.kg-bottom-cta h2 { font-size: clamp(1.8rem,4vw,3rem); margin: 12px 0; }
.kg-bottom-cta p:not(.eyebrow) { color: var(--muted); }

@media(max-width:900px) {
  .kg-hero { grid-template-columns: 1fr; }
  .kg-hero-visual { max-width: 650px; width: 100%; }
  .kg-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media(max-width:600px) {
  .kg-gallery { padding-top: 35px; }
  .kg-hero { padding: 25px 0 55px; gap: 30px; }
  .kg-hero-visual { min-height: 250px; }
  .kg-hero-visual img { height: 260px; }
  .kg-floating-label { left: 5px; bottom: 20px; }
  .kg-grid { grid-template-columns: 1fr; }
  .kg-image { height: 240px; }
  .kg-bottom-cta { padding: 25px; }
}

/* ===== KAILOTECH GALLERY VIDEO - PREMIUM REDESIGN ===== */

.kg-gallery-video {
  position: relative;
  width: 100%;
  height: clamp(300px, 38vw, 490px);
  min-height: 300px;
  overflow: hidden;
  isolation: isolate;
  background: #030914;
  border-bottom: 1px solid rgba(56,189,248,.35);
}

.kg-gallery-video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 48%;
}

.kg-gallery-video-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(2,8,20,.88) 0%, rgba(2,8,20,.48) 52%, rgba(2,8,20,.12) 100%),
    linear-gradient(0deg, rgba(2,8,20,.48), transparent 55%);
}

.kg-gallery-video-content {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: clamp(24px, 8vw, 110px);
  right: 24px;
  transform: translateY(-50%);
  max-width: 760px;
  padding: 26px 30px;
  border-left: 3px solid #38bdf8;
  background: linear-gradient(90deg, rgba(3,12,28,.58), rgba(3,12,28,0));
  backdrop-filter: blur(2px);
}

.kg-gallery-video-content p {
  margin: 0 0 12px;
  color: #67d8ff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .24em;
  text-transform: uppercase;
}

.kg-gallery-video-content h1 {
  margin: 0 0 14px;
  color: #fff;
  font-size: clamp(34px, 5.2vw, 68px);
  line-height: 1.04;
  font-weight: 900;
  letter-spacing: -.045em;
  text-shadow: 0 4px 24px rgba(0,0,0,.35);
}

.kg-gallery-video-content h1 span {
  color: #38bdf8;
}

.kg-gallery-video-content h3 {
  margin: 0;
  color: #e2edf8;
  font-size: clamp(13px, 1.5vw, 17px);
  font-weight: 400;
  letter-spacing: .06em;
  line-height: 1.6;
}

.kg-video-scroll {
  position: absolute;
  z-index: 2;
  right: 7%;
  bottom: 22px;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .2em;
  text-shadow: 0 2px 8px #000;
}

@media (max-width: 768px) {
  .kg-gallery-video {
    height: 340px;
    min-height: 340px;
  }

  .kg-gallery-video video {
    object-position: center center;
  }

  .kg-gallery-video-content {
    left: 20px;
    right: 20px;
    padding: 18px 20px;
  }

  .kg-gallery-video-content h1 {
    font-size: clamp(32px, 8vw, 48px);
  }

  .kg-gallery-video-content p {
    font-size: 10px;
    letter-spacing: .16em;
  }

  .kg-video-scroll {
    right: 20px;
    bottom: 14px;
  }
}

@media (max-width: 420px) {
  .kg-gallery-video {
    height: 300px;
    min-height: 300px;
  }

  .kg-gallery-video-content {
    left: 14px;
    right: 14px;
    padding: 14px 16px;
  }
}

/* ===== KAILOTECH FUTURISTIC GALLERY VFX ===== */

.kg-gallery {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 12% 15%, rgba(0,180,255,.16), transparent 35%),
    radial-gradient(ellipse at 88% 42%, rgba(132,56,255,.15), transparent 38%),
    linear-gradient(145deg, #030712, #071329 55%, #030712) !important;
}

.kg-gallery::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(56,189,248,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56,189,248,.055) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
  animation: kgGridDrift 25s linear infinite;
}

.kg-gallery::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  width: 65%;
  height: 420px;
  top: 12%;
  left: 18%;
  border-radius: 50%;
  background: rgba(0,153,255,.12);
  filter: blur(100px);
  animation: kgEnergyPulse 7s ease-in-out infinite alternate;
}

@keyframes kgGridDrift {
  from { background-position: 0 0; }
  to { background-position: 42px 42px; }
}

@keyframes kgEnergyPulse {
  from { transform: translate(-7%, -4%) scale(.85); opacity: .45; }
  to { transform: translate(9%, 8%) scale(1.15); opacity: .9; }
}

/* Gallery content stays above background effects */
.kg-gallery > * {
  position: relative;
}

/* Futuristic heading effects */
.kg-gallery h2 {
  color: #f5fbff;
  text-shadow: 0 0 18px rgba(56,189,248,.3);
}

.kg-gallery h2 span {
  background: linear-gradient(90deg, #38bdf8, #a78bfa, #22d3ee, #38bdf8);
  background-size: 250% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: kgNeonText 5s linear infinite;
}

@keyframes kgNeonText {
  to { background-position: 250% center; }
}

/* Project cards: glass and neon */
.kg-gallery [data-category]:not(button):not(a) {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(90,190,255,.22);
  background: rgba(8,20,42,.78);
  box-shadow: 0 12px 35px rgba(0,0,0,.28);
  transform-style: preserve-3d;
  transition:
    transform .25s ease,
    border-color .3s ease,
    box-shadow .3s ease,
    opacity .6s ease;
}

.kg-gallery [data-category]:not(button):not(a)::before {
  content: "";
  position: absolute;
  z-index: 5;
  inset: -1px;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(
    115deg,
    transparent 15%,
    rgba(56,189,248,.2) 42%,
    rgba(167,139,250,.32) 50%,
    transparent 75%
  );
  transform: translateX(-120%);
}

.kg-gallery [data-category]:not(button):not(a):hover {
  border-color: rgba(56,189,248,.85);
  box-shadow:
    0 0 0 1px rgba(56,189,248,.18),
    0 0 28px rgba(0,160,255,.24),
    0 24px 55px rgba(0,0,0,.45);
}

.kg-gallery [data-category]:not(button):not(a):hover::before {
  opacity: 1;
  animation: kgCardShine .9s ease;
}

@keyframes kgCardShine {
  to { transform: translateX(120%); }
}

/* Image zoom and cinematic colour */
.kg-gallery [data-category]:not(button):not(a) img {
  transition: transform .7s cubic-bezier(.2,.8,.2,1), filter .5s ease;
  filter: saturate(1.08);
}

.kg-gallery [data-category]:not(button):not(a):hover img {
  transform: scale(1.09);
  filter: saturate(1.35) contrast(1.08);
}

/* Filter controls */
.kg-gallery button,
.kg-gallery .kg-filter {
  transition: all .25s ease;
}

.kg-gallery button:hover,
.kg-gallery .kg-filter:hover {
  border-color: #38bdf8 !important;
  box-shadow: 0 0 18px rgba(56,189,248,.28);
  transform: translateY(-2px);
}

/* Scroll reveal */
.kg-vfx-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .75s ease, transform .75s ease;
}

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

/* Cursor-following light */
.kg-vfx-cursor {
  position: fixed;
  z-index: 9990;
  width: 280px;
  height: 280px;
  left: 0;
  top: 0;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle, rgba(0,174,255,.13), rgba(125,75,255,.055) 40%, transparent 70%);
  transform: translate(-50%, -50%);
  transition: opacity .25s ease;
}

@media (hover: hover) and (pointer: fine) {
  body.kg-vfx-active .kg-vfx-cursor { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .kg-gallery::before,
  .kg-gallery::after,
  .kg-gallery h2 span {
    animation: none !important;
  }

  .kg-vfx-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@media(max-width:700px) {
  .kg-vfx-cursor { display: none; }
  .kg-gallery::before { background-size: 30px 30px; }
}

/* =====================================================
   KAILOTECH CONTACT PAGE - FUTURISTIC PREMIUM DESIGN
===================================================== */

.kc-contact {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 95px 8vw 35px !important;
  background:
    radial-gradient(ellipse at 12% 12%,rgba(0,155,255,.17),transparent 34%),
    radial-gradient(ellipse at 88% 42%,rgba(135,70,255,.15),transparent 38%),
    linear-gradient(145deg,#030712,#09152b 55%,#030712) !important;
}

.kc-contact-grid {
  position: absolute;
  z-index: -2;
  inset: 0;
  pointer-events: none;
  opacity: .28;
  background-image:
    linear-gradient(rgba(56,189,248,.09) 1px,transparent 1px),
    linear-gradient(90deg,rgba(56,189,248,.09) 1px,transparent 1px);
  background-size: 45px 45px;
  mask-image: linear-gradient(to bottom,transparent,black 18%,black 80%,transparent);
  animation: kcGridMove 25s linear infinite;
}

@keyframes kcGridMove {
  to { background-position: 45px 45px; }
}

.kc-contact-orb {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(75px);
  animation: kcOrbFloat 9s ease-in-out infinite alternate;
}

.kc-orb-one {
  width: 300px;
  height: 300px;
  top: 8%;
  right: -100px;
  background: rgba(0,145,255,.2);
}

.kc-orb-two {
  width: 260px;
  height: 260px;
  top: 48%;
  left: -120px;
  background: rgba(128,65,255,.17);
  animation-delay: -4s;
}

@keyframes kcOrbFloat {
  to { transform: translate(35px,45px) scale(1.15); }
}

/* Contact hero */
.kc-contact-hero {
  position: relative;
  max-width: 1050px;
  margin: 0 auto 85px;
  padding: 25px 0;
}

.kc-contact-eyebrow {
  color: #62d5ff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .28em;
}

.kc-contact-hero h1 {
  margin: 25px 0;
  color: #fff;
  font-size: clamp(3rem,8vw,7rem);
  font-weight: 950;
  line-height: .98;
  letter-spacing: -.065em;
  text-shadow: 0 8px 40px rgba(0,0,0,.3);
}

.kc-contact-hero h1 span {
  background: linear-gradient(90deg,#38bdf8,#a78bfa,#4de1ff);
  background-size: 200% auto;
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
  animation: kcTextFlow 5s linear infinite;
}

@keyframes kcTextFlow {
  to { background-position: 200% center; }
}

.kc-contact-intro {
  max-width: 600px;
  color: #b7c8df;
  font-size: 16px;
  line-height: 1.9;
}

.kc-contact-cta {
  display: inline-flex;
  align-items: center;
  gap: 30px;
  margin-top: 24px;
  padding: 16px 22px;
  color: #06101e;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .13em;
  background: linear-gradient(100deg,#38bdf8,#a78bfa);
  box-shadow: 0 0 30px rgba(56,189,248,.22);
  transition: transform .25s,box-shadow .25s;
}

.kc-contact-cta:hover {
  transform: translateY(-4px);
  box-shadow: 0 0 42px rgba(56,189,248,.4);
}

.kc-contact-cta span { font-size: 20px; }

/* Main layout */
.kc-contact-layout {
  display: grid;
  grid-template-columns: .88fr 1.12fr;
  align-items: start;
  gap: clamp(35px,6vw,85px);
  max-width: 1250px;
  margin: 0 auto;
}

.kc-contact-heading > span,
.kc-form-top > div > span {
  color: #50caff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .2em;
}

.kc-contact-heading h2,
.kc-form-top h2 {
  margin: 15px 0;
  color: #fff;
  font-size: clamp(2rem,3.5vw,3.2rem);
  line-height: 1.1;
  letter-spacing: -.045em;
}

.kc-contact-heading h2 span,
.kc-form-top h2 span { color: #56cfff; }

.kc-contact-heading > p,
.kc-form-description {
  color: #a6b8d1;
  line-height: 1.8;
  font-size: 14px;
}

.kc-contact-card {
  display: flex;
  align-items: center;
  gap: 18px;
  position: relative;
  margin-top: 17px;
  padding: 22px 18px;
  color: #fff;
  background: linear-gradient(125deg,rgba(17,39,68,.83),rgba(9,17,36,.8));
  border: 1px solid rgba(89,185,255,.2);
  backdrop-filter: blur(15px);
  transition: transform .3s,border-color .3s,box-shadow .3s;
}

.kc-contact-card:hover {
  transform: translateX(7px);
  border-color: rgba(56,189,248,.8);
  box-shadow: 0 0 30px rgba(56,189,248,.12);
}

.kc-contact-static { cursor: default; }
.kc-contact-static:hover { transform: none; }

.kc-contact-icon {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  color: #6bd8ff;
  font-size: 24px;
  background: rgba(56,189,248,.1);
  border: 1px solid rgba(56,189,248,.32);
}

.kc-contact-card small {
  color: #61d3ff;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .18em;
}

.kc-contact-card h3 {
  margin: 6px 0;
  color: #fff;
  font-size: 15px;
}

.kc-contact-card p {
  margin: 0;
  color: #a9bdd4;
  font-size: 12px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.kc-card-arrow {
  margin-left: auto;
  color: #62d5ff;
  font-size: 21px;
}

.kc-contact-promise {
  margin-top: 28px;
  color: #8ca5c2;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
}

.kc-contact-promise span { color: #61d3ff; }

/* Glass enquiry form */
.kc-contact-form-panel {
  padding: clamp(23px,3.5vw,42px);
  background: linear-gradient(145deg,rgba(15,31,56,.94),rgba(5,13,29,.94));
  border: 1px solid rgba(89,185,255,.28);
  box-shadow: 0 25px 80px rgba(0,0,0,.35),inset 0 1px rgba(255,255,255,.06);
  backdrop-filter: blur(20px);
  position: relative;
}

.kc-contact-form-panel::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg,transparent,#38bdf8,#a78bfa,transparent);
}

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

.kc-form-top h2 { font-size: clamp(2rem,3.2vw,2.8rem); }

.kc-form-number {
  padding: 9px 12px;
  color: #63d3ff;
  font-size: 11px;
  border: 1px solid rgba(56,189,248,.35);
}

.kc-form-description { margin: 0 0 28px; }

.kc-contact-form {
  display: grid;
  gap: 20px;
  margin: 0 !important;
  max-width: none !important;
}

.kc-contact-form label {
  display: grid;
  gap: 9px;
  min-width: 0;
}

.kc-contact-form label > span {
  color: #9bb5d1;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .16em;
}

.kc-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}

.kc-contact-form input,
.kc-contact-form textarea {
  width: 100%;
  min-width: 0;
  padding: 15px 16px;
  color: #f4f9ff;
  font-size: 13px;
  background: rgba(2,9,21,.68);
  border: 1px solid rgba(118,157,198,.23);
  outline: none;
  transition: border-color .25s,box-shadow .25s,background .25s;
}

.kc-contact-form input::placeholder,
.kc-contact-form textarea::placeholder {
  color: #687f9c;
}

.kc-contact-form input:focus,
.kc-contact-form textarea:focus {
  border-color: #38bdf8;
  background: rgba(5,19,38,.95);
  box-shadow: 0 0 0 3px rgba(56,189,248,.1),0 0 22px rgba(56,189,248,.08);
}

.kc-contact-form textarea {
  resize: vertical;
  min-height: 125px;
}

.kc-submit-btn {
  display: flex !important;
  width: 100%;
  align-items: center;
  justify-content: space-between !important;
  gap: 15px;
  padding: 18px 21px !important;
  color: #04101d !important;
  background: linear-gradient(100deg,#38bdf8,#a78bfa) !important;
  border: 0 !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: .12em;
  cursor: pointer;
  transition: transform .25s,box-shadow .25s;
}

.kc-submit-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 35px rgba(56,189,248,.24);
}

.kc-submit-arrow { font-size: 21px; }

.kc-contact-form .form-note {
  margin: -5px 0 0;
  color: #8197b2;
  font-size: 11px;
  line-height: 1.7;
}

.kc-contact-bottom {
  max-width: 1250px;
  margin: 85px auto 0;
  padding-top: 20px;
  border-top: 1px solid rgba(107,170,220,.18);
  display: flex;
  justify-content: space-between;
  gap: 15px;
  color: #6f89a8;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .15em;
}

@media(max-width:900px) {
  .kc-contact { padding-left: 6vw !important; padding-right: 6vw !important; }
  .kc-contact-layout { grid-template-columns: 1fr; gap: 45px; }
  .kc-contact-information { max-width: 700px; }
}

@media(max-width:600px) {
  .kc-contact { padding: 65px 6vw 28px !important; }
  .kc-contact-hero { margin-bottom: 55px; }
  .kc-contact-hero h1 { font-size: clamp(2.7rem,12vw,4.5rem); }
  .kc-contact-intro { font-size: 14px; }
  .kc-form-row { grid-template-columns: 1fr; }
  .kc-contact-card { padding: 17px 13px; gap: 12px; }
  .kc-contact-icon { flex-basis: 42px; width: 42px; height: 42px; }
  .kc-contact-form-panel { padding: 22px 16px; }
  .kc-contact-bottom { margin-top: 55px; flex-direction: column; }
}

@media(prefers-reduced-motion:reduce) {
  .kc-contact-grid,
  .kc-contact-orb,
  .kc-contact-hero h1 span { animation: none !important; }
}

/* ===== KAILOTECH CONTACT VFX UPGRADE ===== */

.kc-contact {
  --kc-cyan: #38d9ff;
  --kc-purple: #a78bfa;
}

/* Hero animated underline */
.kc-contact-hero {
  animation: kcHeroAppear 1s ease both;
}

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

.kc-contact-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border: 1px solid rgba(56,217,255,.3);
  background: rgba(56,189,248,.07);
  box-shadow: 0 0 25px rgba(56,189,248,.08);
}

.kc-contact-hero h1 {
  text-wrap: balance;
}

.kc-contact-hero h1 span {
  filter: drop-shadow(0 0 18px rgba(56,189,248,.22));
}

/* Animated light line */
.kc-contact-hero::after {
  content: "";
  display: block;
  width: min(420px,80%);
  height: 2px;
  margin-top: 32px;
  background: linear-gradient(90deg,#38bdf8,#a78bfa,transparent);
  background-size: 200% 100%;
  animation: kcLineFlow 4s linear infinite;
}

@keyframes kcLineFlow {
  to { background-position: 200% 0; }
}

/* Contact cards */
.kc-contact-card {
  transform-style: preserve-3d;
  border-radius: 5px;
}

.kc-contact-card:not(.kc-contact-static)::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 0;
  background: linear-gradient(90deg,#38bdf8,#a78bfa);
  transition: width .4s ease;
}

.kc-contact-card:not(.kc-contact-static):hover::after {
  width: 100%;
}

.kc-contact-icon {
  border-radius: 12px;
  box-shadow: 0 0 22px rgba(56,189,248,.08);
  transition: transform .35s,box-shadow .35s;
}

.kc-contact-card:hover .kc-contact-icon {
  transform: translateZ(15px) rotate(-7deg) scale(1.08);
  box-shadow: 0 0 28px rgba(56,189,248,.25);
}

/* Form animated border */
.kc-contact-form-panel {
  border-radius: 8px;
  overflow: hidden;
}

.kc-contact-form-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(120deg,transparent,rgba(56,189,248,.09),transparent);
  background-size: 200% 100%;
  animation: kcPanelShimmer 8s linear infinite;
}

@keyframes kcPanelShimmer {
  to { background-position: 200% 0; }
}

.kc-form-top {
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(120,180,230,.16);
}

.kc-form-number {
  border-radius: 4px;
  box-shadow: 0 0 18px rgba(56,189,248,.12);
}

/* Input polish */
.kc-contact-form input,
.kc-contact-form textarea {
  border-radius: 5px;
  transition: all .25s ease;
}

.kc-contact-form input:hover,
.kc-contact-form textarea:hover {
  border-color: rgba(56,189,248,.55);
}

.kc-contact-form input:focus,
.kc-contact-form textarea:focus {
  transform: translateY(-1px);
}

/* Premium animated submit button */
.kc-submit-btn {
  position: relative;
  overflow: hidden;
  border-radius: 5px;
}

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

.kc-submit-btn:hover::before {
  left: 150%;
}

.kc-submit-btn > span {
  position: relative;
  z-index: 1;
}

.kc-submit-arrow {
  transition: transform .3s ease;
}

.kc-submit-btn:hover .kc-submit-arrow {
  transform: translate(4px,-4px);
}

/* Background decorative rings */
.kc-contact-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 240px;
  height: 240px;
  right: 2%;
  top: -30px;
  border: 1px solid rgba(56,189,248,.14);
  border-radius: 50%;
  box-shadow:
    0 0 0 22px rgba(56,189,248,.025),
    0 0 0 48px rgba(167,139,250,.025),
    inset 0 0 45px rgba(56,189,248,.08);
  animation: kcRingRotate 25s linear infinite;
  pointer-events: none;
}

@keyframes kcRingRotate {
  to { transform: rotate(360deg); }
}

/* Bottom signature */
.kc-contact-bottom {
  position: relative;
}

.kc-contact-bottom span:last-child {
  color: #60cfff;
}

/* Mobile refinements */
@media(max-width:600px) {
  .kc-contact-hero::before {
    width: 145px;
    height: 145px;
    right: -25px;
    top: -30px;
    opacity: .55;
  }

  .kc-contact-eyebrow {
    font-size: 9px;
    letter-spacing: .16em;
  }

  .kc-contact-card:hover {
    transform: translateY(-3px);
  }

  .kc-contact-hero::after {
    margin-top: 23px;
  }
}

@media(prefers-reduced-motion:reduce) {
  .kc-contact-hero,
  .kc-contact-hero::before,
  .kc-contact-hero::after,
  .kc-contact-form-panel::after,
  .kc-submit-btn::before {
    animation: none !important;
    transition: none !important;
  }
}

/* Contact scroll reveal */
.kc-premium-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s ease,transform .7s ease;
}

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

@media(prefers-reduced-motion:reduce) {
  .kc-premium-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* KAILOTECH CONTACT PAGE TOP VIDEO */
.kc-contact-video {
    position: relative;
    width: 100%;
    height: clamp(320px, 43vw, 570px);
    min-height: 320px;
    overflow: hidden;
    isolation: isolate;
    background: #050b16;
}
.kc-contact-video video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.kc-contact-video-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(3,8,20,.88), rgba(3,8,20,.35)),
                linear-gradient(0deg, rgba(3,8,20,.65), transparent 65%);
}
.kc-contact-video-content {
    position: absolute;
    z-index: 2;
    left: clamp(22px, 8vw, 110px);
    right: 22px;
    top: 50%;
    transform: translateY(-50%);
    max-width: 850px;
    color: #fff;
}
.kc-contact-video-content span {
    color: #50dcff;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .2em;
}
.kc-contact-video-content h1 {
    margin: 18px 0;
    font-size: clamp(2rem, 5.5vw, 4.8rem);
    line-height: 1.05;
    font-weight: 900;
}
.kc-contact-video-content h1 strong {
    color: #54dfff;
    text-shadow: 0 0 25px rgba(40,190,255,.35);
}
.kc-contact-video-content p {
    color: #d6e8f7;
    font-size: clamp(.95rem, 1.5vw, 1.15rem);
}
@media (max-width: 600px) {
    .kc-contact-video {
        height: 340px;
        min-height: 340px;
    }
    .kc-contact-video-content h1 {
        font-size: clamp(2rem, 9vw, 3rem);
    }
}

/* KAILOTECH GLOBAL LOCATION MARKER REMOVAL */
.map-marker,
.map-pin,
.location-marker,
.location-pin,
.marker-icon,
.pin-icon,
.fa-map-marker,
.fa-map-marker-alt,
.fa-location-dot,
.fa-location-pin,
.fa-map-pin,
.lucide-map-pin,
.lucide-map-pinned,
[data-lucide="map-pin"],
[data-lucide="map-pinned"],
[data-icon="map-marker"],
[data-icon="map-pin"],
i[class*="map-marker"],
i[class*="map-pin"],
svg[class*="map-marker"],
svg[class*="map-pin"] {
    display: none !important;
    visibility: hidden !important;
}

/* KAILOTECH GLOBAL LOCATION MARKER REMOVAL */
.map-marker,
.map-pin,
.location-marker,
.location-pin,
.marker-icon,
.pin-icon,
.fa-map-marker,
.fa-map-marker-alt,
.fa-location-dot,
.fa-location-pin,
.fa-map-pin,
.lucide-map-pin,
.lucide-map-pinned,
[data-lucide="map-pin"],
[data-lucide="map-pinned"],
[data-icon="map-marker"],
[data-icon="map-pin"],
i[class*="map-marker"],
i[class*="map-pin"],
svg[class*="map-marker"],
svg[class*="map-pin"] {
    display: none !important;
    visibility: hidden !important;
}

/* KAILOTECH SERVICES TOP VIDEO */
.ks-services-video {
    position: relative;
    width: 100%;
    height: clamp(320px, 42vw, 540px);
    min-height: 320px;
    overflow: hidden;
    isolation: isolate;
    background: #050b16;
}
.ks-services-video video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.ks-services-video-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(3,8,20,.88), rgba(3,8,20,.3)),
        linear-gradient(0deg, rgba(3,8,20,.65), transparent 70%);
}
.ks-services-video-content {
    position: absolute;
    z-index: 2;
    left: clamp(22px, 8vw, 110px);
    right: 22px;
    top: 50%;
    transform: translateY(-50%);
    max-width: 900px;
    color: #fff;
}
.ks-services-video-content span {
    color: #50dcff;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .2em;
}
.ks-services-video-content h1 {
    margin: 18px 0;
    font-size: clamp(2rem, 5.5vw, 4.8rem);
    line-height: 1.05;
    font-weight: 900;
}
.ks-services-video-content h1 strong {
    color: #54dfff;
    text-shadow: 0 0 25px rgba(40,190,255,.4);
}
.ks-services-video-content p {
    color: #d6e8f7;
    font-size: clamp(.95rem, 1.5vw, 1.15rem);
}
@media(max-width:600px) {
    .ks-services-video {
        height: 340px;
        min-height: 340px;
    }
    .ks-services-video-content h1 {
        font-size: clamp(2rem, 9vw, 3rem);
    }
}