/* =====================================================================
   KLIMAX DIGITAL — MAIN STYLESHEET
   Design tokens: dark cinematic base, cyan/violet duotone accent,
   Playfair Display (headings) / Inter (body) — premium editorial pairing.
   ===================================================================== */

:root{
  --bg:            #06070B;
  --bg-elevated:   #0B0D14;
  --surface:       #12151F;
  --surface-2:     #171B27;
  --border:        rgba(255,255,255,.08);
  --border-strong: rgba(255,255,255,.16);

  --text-1: #F4F6F9;
  --text-2: #AEB6C4;
  --text-3: #6C7688;

  /* Brand palette — sampled from the Klimax Digital logo mark */
  --cyan:   #1879FE;   /* primary brand blue (logo "K") */
  --violet: #438BDD;   /* secondary blue (logo ring, light-blue segment) */
  --gold:   #F6AB00;   /* logo ring — gold/amber segment */
  --green:  #52B259;   /* logo ring — green segment */
  --red:    #E03325;   /* logo ring — red segment */
  --white:  #FFFFFF;   /* primary CTA color */

  --grad-primary: linear-gradient(135deg, var(--cyan) 0%, var(--violet) 100%);
  --grad-radial:  radial-gradient(60% 60% at 50% 40%, rgba(24,121,254,.18) 0%, rgba(67,139,221,.10) 45%, rgba(6,7,11,0) 75%);

  --font-display: 'Playfair Display', Georgia, serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 26px;
  --radius-pill: 999px;

  --shadow-glow: 0 0 0 1px rgba(70,232,255,.12), 0 20px 60px -20px rgba(70,232,255,.25);
  --shadow-card: 0 20px 50px -25px rgba(0,0,0,.6);

  --ease-out: cubic-bezier(.16,1,.3,1);
  --container: 1200px;

  /* Extra tokens used by the light-themed component sections below
     (Services / Why Choose Us / How-it-Works / About / Results / FAQ) */
  --font-poppins: 'Inter', sans-serif;
  --font-serif-stack: 'Playfair Display', Georgia, serif;
  --card-hover-bg: #0B132B;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

body{
  margin:0;
  /* background:var(--bg); */
  color:var(--text-1);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; }

.kd-container{ max-width:var(--container); margin:0 auto; padding:0 24px; }

h1,h2,h3,h4{ font-family:var(--font-display); font-weight:700; line-height:1.12; margin:0; letter-spacing:-.01em; }
/* Blue italic headings use Playfair Display Italic */
h1 em, h2 em, .kd-refhero__content h1 em, .kd-gradient-text, .svc-gradient-text, .wcu-gradient-text, .ft-gradient-text,
.cx-gradient-heading, .faq-gradient-text {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 700;
}
.kd-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:12.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--cyan); margin-bottom:14px;
}
.kd-eyebrow::before{ content:''; width:18px; height:1px; background:var(--cyan); }

.kd-section{ padding:110px 0; position:relative; }
.kd-section--tight{ padding:70px 0; }
.kd-section-head{ max-width:640px; margin-bottom:56px; }
.kd-section-head p{ color:var(--text-2); font-size:17px; margin-top:16px; }
.kd-section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:2px solid var(--cyan); outline-offset:3px;
}

/* =====================================================================
   BUTTONS
   ===================================================================== */
.kd-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 30px; border-radius:var(--radius-pill);
  font-family:var(--font-body); font-weight:600; font-size:15px;
  border:1px solid transparent; cursor:pointer;
  transition:transform .3s var(--ease-out), box-shadow .3s var(--ease-out), background .3s;
  white-space:nowrap;
}
.kd-btn--primary{ background:var(--white); color:var(--bg); box-shadow:0 10px 30px -10px rgba(255,255,255,.3); }
.kd-btn--primary:hover{ transform:translateY(-2px); box-shadow:0 16px 40px -12px rgba(24,121,254,.55); }
.kd-btn--ghost{ background:transparent; border-color:var(--border-strong); color:var(--text-1); }
.kd-btn--ghost:hover{ border-color:var(--cyan); color:var(--cyan); transform:translateY(-2px); }
.kd-btn--sm{ padding:10px 20px; font-size:14px; }
.kd-btn--block{ width:100%; }

/* =====================================================================
   NAVIGATION
   ===================================================================== */
.kd-nav{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  padding:18px 0; background:rgba(6,7,11,.55); backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid transparent; transition:background .35s, border-color .35s, padding .35s;
}
.kd-nav.is-scrolled{ padding:12px 0; background:rgba(6,7,11,.85); border-color:var(--border); }
.kd-nav__inner{ max-width:var(--container); margin:0 auto; padding:0 24px; display:flex; align-items:center; justify-content:space-between; gap:24px; }

.kd-logo{ display:flex; align-items:center; gap:10px; font-family:'Playfair Display', Georgia, serif; font-weight:700; font-size:19px; }
.kd-logo__mark{
  width:34px; height:34px; border-radius:9px; display:grid; place-items:center;
  background:var(--grad-primary); color:#04060A; font-size:17px;
}
.kd-logo__text em{ font-style:normal; color:var(--cyan); }
.kd-logo-img{ height:32px; width:auto; display:block; }

.kd-nav__links{ display:flex; align-items:center; gap:34px; }
.kd-nav__links a{ font-size:14.5px; font-weight:500; color:var(--text-2); position:relative; padding:6px 0; transition:color .25s; }
.kd-nav__links a::after{ content:''; position:absolute; left:0; bottom:0; width:0; height:2px; background:var(--grad-primary); transition:width .3s var(--ease-out); }
.kd-nav__links a:hover, .kd-nav__links a.is-active{ color:var(--text-1); }
.kd-nav__links a:hover::after, .kd-nav__links a.is-active::after{ width:100%; }

.kd-burger{ display:none; flex-direction:column; gap:5px; background:none; border:none; padding:8px; cursor:pointer; }
.kd-burger span{ width:22px; height:2px; background:var(--text-1); transition:transform .3s, opacity .3s; }
.kd-burger.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.kd-burger.is-open span:nth-child(2){ opacity:0; }
.kd-burger.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.kd-nav__progress{ position:fixed; top:0; left:0; height:2px; width:0%; background:var(--grad-primary); z-index:1001; transition:width .1s linear; }

@media (max-width: 900px){
  .kd-nav__links{
    position:fixed; top:0; right:0; height:100vh; width:min(78vw,340px);
    background:var(--bg-elevated); flex-direction:column; justify-content:center; align-items:flex-start;
    padding:40px; gap:26px; transform:translateX(100%); transition:transform .4s var(--ease-out);
    border-left:1px solid var(--border);
  }
  .kd-nav__links.is-open{ transform:translateX(0); }
  .kd-nav__links a{ font-size:19px; }
  .kd-nav__cta{ display:none; }
  .kd-burger{ display:flex; }
}

/* =====================================================================
   HERO
   ===================================================================== */
.kd-hero{
  position:relative; padding:190px 0 130px; overflow:hidden;
  display:flex; align-items:center; min-height:92vh;
}
.kd-hero__bg{ position:absolute; inset:0; z-index:0; background:var(--grad-radial); }
.kd-hero__bg::before,.kd-hero__bg::after{
  content:''; position:absolute; width:520px; height:520px; border-radius:50%;
  filter:blur(110px); opacity:.35; animation:kd-float 16s ease-in-out infinite;
}
.kd-hero__bg::before{ background:var(--cyan); top:-160px; left:-120px; }
.kd-hero__bg::after{ background:var(--violet); bottom:-200px; right:-140px; animation-delay:-8s; }
@keyframes kd-float{
  0%,100%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(40px,-30px) scale(1.08); }
}
.kd-hero__grid{
  position:absolute; inset:0; z-index:0; opacity:.35;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(circle at 50% 30%, black, transparent 72%);
}

.kd-hero__inner{ position:relative; z-index:2; max-width:var(--container); margin:0 auto; padding:0 24px; display:grid; grid-template-columns:1.05fr .95fr; gap:60px; align-items:center; }
.kd-hero__badge{
  display:inline-flex; align-items:center; gap:9px; padding:8px 16px; border:1px solid var(--border-strong);
  border-radius:var(--radius-pill); font-size:13px; color:var(--text-2); margin-bottom:26px; background:rgba(255,255,255,.03);
}
.kd-hero__badge .dot{ width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 0 3px rgba(55,226,155,.2); animation:kd-pulse 2s infinite; }
@keyframes kd-pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.4; } }

.kd-hero h1{ font-size:clamp(42px,6.2vw,88px); font-weight:800; }
.kd-hero h1 .grad{ background:var(--grad-primary); -webkit-background-clip:text; background-clip:text; color:transparent; font-style:italic; }
.kd-hero p.lead{ color:var(--text-2); font-size:18px; max-width:520px; margin:24px 0 36px; }
.kd-hero__ctas{ display:flex; gap:16px; flex-wrap:wrap; margin-bottom:48px; }
.kd-hero__stats{ display:flex; gap:34px; flex-wrap:wrap; }
.kd-hero__stats div strong{ display:block; font-family:var(--font-display); font-size:26px; }
.kd-hero__stats div span{ font-size:13px; color:var(--text-3); }

/* Hero signature: animated growth panel */
.kd-growth-panel{
  position:relative; background:linear-gradient(180deg,var(--surface),var(--bg-elevated));
  border:1px solid var(--border); border-radius:var(--radius-lg); padding:28px;
  box-shadow:var(--shadow-glow); animation:kd-rise 1s var(--ease-out) both;
}
@keyframes kd-rise{ from{ opacity:0; transform:translateY(26px) scale(.98);} to{ opacity:1; transform:none; } }
.kd-growth-panel__top{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:22px; }
.kd-growth-panel__top span{ font-size:12.5px; color:var(--text-3); font-family:var(--font-mono); }
.kd-growth-panel__value{ font-family:var(--font-display); font-size:34px; margin-top:4px; }
.kd-growth-panel__delta{ display:inline-flex; align-items:center; gap:4px; color:var(--green); font-size:13px; font-family:var(--font-mono); background:rgba(55,226,155,.12); padding:4px 10px; border-radius:var(--radius-pill); }

.kd-bars{ display:flex; align-items:flex-end; gap:8px; height:120px; margin:18px 0 8px; }
.kd-bars i{ flex:1; border-radius:6px 6px 0 0; background:linear-gradient(180deg, var(--cyan), rgba(139,107,255,.35)); transform-origin:bottom; animation:kd-grow 1.4s var(--ease-out) both; opacity:.9; }
@keyframes kd-grow{ from{ transform:scaleY(0); } to{ transform:scaleY(1); } }
.kd-growth-panel__foot{ display:flex; justify-content:space-between; font-family:var(--font-mono); font-size:11.5px; color:var(--text-3); margin-top:10px; }

.kd-growth-panel__chips{ display:flex; gap:10px; margin-top:22px; flex-wrap:wrap; }
.kd-growth-panel__chips span{ font-size:12px; padding:7px 12px; border:1px solid var(--border); border-radius:var(--radius-pill); color:var(--text-2); }

@media (max-width:980px){
  .kd-hero{ padding:150px 0 90px; min-height:auto; }
  .kd-hero__inner{ grid-template-columns:1fr; }
}

/* =====================================================================
   MARQUEE / TRUST STRIP
   ===================================================================== */
.kd-marquee{ border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:22px 0; overflow:hidden; background:var(--bg-elevated); }
.kd-marquee--top{ padding-top:126px; border-top:none; }
.kd-marquee__label{ display:block; text-align:center; font-family:var(--font-mono); font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-3); }
.kd-marquee__track{ display:flex; gap:70px; width:max-content; animation:kd-scroll 26s linear infinite; }
.kd-marquee__track span{ font-family:var(--font-display); font-size:20px; color:var(--text-3); letter-spacing:.02em; white-space:nowrap; }
@keyframes kd-scroll{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }
@media (max-width:980px){ .kd-marquee--top{ padding-top:110px; } }

/* =====================================================================
   STATS STRIP
   ===================================================================== */
.kd-stats-strip{ display:grid; grid-template-columns:repeat(auto-fit, minmax(160px,1fr)); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:var(--radius-md); overflow:hidden; }
.kd-stats-strip div{ background:var(--bg-elevated); padding:30px 20px; text-align:center; }
.kd-stats-strip strong{ display:block; font-family:var(--font-display); font-size:30px; }
.kd-stats-strip strong .grad{ background:var(--grad-primary); -webkit-background-clip:text; background-clip:text; color:transparent; }
.kd-stats-strip span{ font-size:12.5px; color:var(--text-3); }
.kd-stat-delta{ display:inline-block; margin-top:6px; font-size:11.5px; font-family:var(--font-mono); color:var(--green); }
@media (max-width:900px){ .kd-stats-strip{ grid-template-columns:repeat(2,1fr);} }

/* Mini stats row (below testimonials) */
.kd-mini-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; max-width:760px; margin:50px auto 0; text-align:center; }
.kd-mini-stats strong{ display:block; font-family:var(--font-display); font-size:26px; }
.kd-mini-stats span{ font-size:12.5px; color:var(--text-3); }
@media (max-width:700px){ .kd-mini-stats{ grid-template-columns:1fr; gap:20px; } }

/* =====================================================================
   CARDS — services / features / values
   ===================================================================== */
.kd-grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.kd-grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
@media (max-width:980px){ .kd-grid-3, .kd-grid-2{ grid-template-columns:1fr; } }

.kd-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md);
  padding:32px; position:relative; overflow:hidden; transition:transform .4s var(--ease-out), border-color .4s, box-shadow .4s;
}
.kd-card::before{
  content:''; position:absolute; inset:0; opacity:0; transition:opacity .4s;
  background:radial-gradient(320px 160px at 20% 0%, rgba(70,232,255,.14), transparent 70%);
}
.kd-card:hover{ transform:translateY(-6px); border-color:var(--border-strong); box-shadow:var(--shadow-card); }
.kd-card:hover::before{ opacity:1; }
.kd-card__icon{
  width:52px; height:52px; border-radius:14px; display:grid; place-items:center; margin-bottom:22px;
  background:linear-gradient(135deg, rgba(70,232,255,.16), rgba(139,107,255,.16)); color:var(--cyan);
  border:1px solid var(--border);
}
.kd-card h3{ font-size:20px; margin-bottom:10px; }
.kd-card p{ color:var(--text-2); font-size:14.5px; margin:0 0 16px; }
.kd-card__link{ font-size:13.5px; font-weight:600; color:var(--cyan); display:inline-flex; align-items:center; gap:6px; }
.kd-card__link svg{ transition:transform .3s var(--ease-out); }
.kd-card:hover .kd-card__link svg{ transform:translateX(4px); }
.kd-card__tag{ position:absolute; top:24px; right:24px; font-family:var(--font-mono); font-size:11px; color:var(--text-3); }

/* =====================================================================
   HOW IT WORKS — steps
   ===================================================================== */
.kd-steps{ position:relative; display:grid; grid-template-columns:repeat(5,1fr); gap:20px; }
.kd-steps::before{ content:''; position:absolute; top:26px; left:6%; right:6%; height:1px; background:linear-gradient(90deg,transparent,var(--border-strong),transparent); }
.kd-step{ position:relative; text-align:left; }
.kd-step__num{
  width:52px; height:52px; border-radius:50%; background:var(--surface); border:1px solid var(--border-strong);
  display:grid; place-items:center; font-family:var(--font-mono); font-size:15px; color:var(--cyan); margin-bottom:20px; position:relative; z-index:1;
}
.kd-step h4{ font-size:16px; margin-bottom:8px; }
.kd-step p{ font-size:13.5px; color:var(--text-2); }
@media (max-width:980px){ .kd-steps{ grid-template-columns:1fr; } .kd-steps::before{ display:none; } }

/* =====================================================================
   ANALYTICS / FEATURES PANEL
   ===================================================================== */
.kd-features{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.kd-features__list{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:32px; }
.kd-feat{ display:flex; gap:12px; align-items:flex-start; }
.kd-feat__ico{ width:34px; height:34px; flex:none; border-radius:10px; background:var(--surface-2); border:1px solid var(--border); display:grid; place-items:center; color:var(--cyan); }
.kd-feat__ico--blue{ color:var(--cyan); }
.kd-feat__ico--gold{ color:var(--gold); }
.kd-feat__ico--green{ color:var(--green); }
.kd-feat__ico--red{ color:var(--red); }
.kd-feat strong{ display:block; font-size:14.5px; }
.kd-feat span{ font-size:12.5px; color:var(--text-3); }
@media (max-width:980px){ .kd-features{ grid-template-columns:1fr; } .kd-features__list{ grid-template-columns:1fr 1fr; } }

/* =====================================================================
   TESTIMONIALS — auto-scrolling row
   ===================================================================== */
.kd-testi-track-wrap{ overflow:hidden; mask-image:linear-gradient(90deg,transparent,black 6%,black 94%,transparent); }
.kd-testi-track{ display:flex; gap:22px; width:max-content; animation:kd-scroll 42s linear infinite; }
.kd-testi-track:hover{ animation-play-state:paused; }
.kd-testi{ width:340px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:26px; flex:none; }
.kd-testi p{ font-size:14.5px; color:var(--text-2); margin:0 0 20px; }
.kd-testi__who{ display:flex; align-items:center; gap:12px; }
.kd-testi__avatar{ width:38px; height:38px; border-radius:50%; background:var(--grad-primary); display:grid; place-items:center; font-family:var(--font-display); font-weight:700; color:#04060A; font-size:14px; }
.kd-testi__who strong{ display:block; font-size:13.5px; }
.kd-testi__who span{ font-size:12px; color:var(--text-3); }

/* =====================================================================
   FAQ — accordion
   ===================================================================== */
.kd-faq{ max-width:760px; }
.kd-faq-item{ border-bottom:1px solid var(--border); }
.kd-faq-q{
  width:100%; background:none; border:none; color:var(--text-1); text-align:left;
  padding:22px 0; font-family:var(--font-display); font-size:17px; font-weight:600;
  display:flex; justify-content:space-between; align-items:center; gap:20px; cursor:pointer;
}
.kd-faq-q .plus{ flex:none; width:26px; height:26px; border-radius:50%; border:1px solid var(--border-strong); display:grid; place-items:center; position:relative; transition:transform .35s var(--ease-out); }
.kd-faq-q .plus::before,.kd-faq-q .plus::after{ content:''; position:absolute; background:var(--text-2); }
.kd-faq-q .plus::before{ width:10px; height:1.5px; }
.kd-faq-q .plus::after{ width:1.5px; height:10px; transition:transform .3s; }
.kd-faq-item.is-open .kd-faq-q .plus::after{ transform:scaleY(0); }
.kd-faq-item.is-open .kd-faq-q .plus{ transform:rotate(180deg); border-color:var(--cyan); }
.kd-faq-a{ max-height:0; overflow:hidden; transition:max-height .4s var(--ease-out); }
.kd-faq-a p{ padding:0 0 22px; color:var(--text-2); font-size:14.5px; max-width:640px; }

.kd-faq-assist{
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  margin-top:34px; max-width:760px; padding:28px 30px; border-radius:var(--radius-md);
  background:var(--surface); border:1px solid var(--border);
}
.kd-faq-assist h4{ font-size:16px; margin-bottom:6px; }
.kd-faq-assist p{ font-size:13.5px; color:var(--text-2); margin:0; max-width:420px; }

/* =====================================================================
   CTA BAND
   ===================================================================== */
.kd-cta-band{
  position:relative; border-radius:var(--radius-lg); padding:70px 50px; text-align:center; overflow:hidden;
  background:linear-gradient(180deg,var(--surface),var(--bg-elevated)); border:1px solid var(--border);
}
.kd-cta-band::before{ content:''; position:absolute; inset:-2px; background:var(--grad-radial); opacity:.6; z-index:0; }
.kd-cta-band > *{ position:relative; z-index:1; }
.kd-cta-band h2{ font-size:clamp(28px,3.4vw,42px); margin-bottom:16px; }
.kd-cta-band p{ color:var(--text-2); max-width:520px; margin:0 auto 32px; }
.kd-cta-band__ctas{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-bottom:26px; }
.kd-cta-band__note{ font-size:12.5px; color:var(--text-3); font-family:var(--font-mono); }

/* =====================================================================
   CONTACT FORM
   ===================================================================== */
.kd-contact-wrap{ display:grid; grid-template-columns:.85fr 1.15fr; gap:50px; align-items:start; }
@media (max-width:980px){ .kd-contact-wrap{ grid-template-columns:1fr; } }

.kd-form-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:38px; box-shadow:var(--shadow-card); }
.kd-form-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media (max-width:560px){ .kd-form-row{ grid-template-columns:1fr; } }

.kd-field{ margin-bottom:20px; }
.kd-field label{ display:block; font-size:13px; color:var(--text-2); margin-bottom:8px; }
.kd-field label .req{ color:var(--cyan); }
.kd-field .kd-input,
.kd-field select.kd-input{
  width:100%; background:var(--bg-elevated); border:1px solid var(--border-strong); color:var(--text-1);
  padding:13px 15px; border-radius:var(--radius-sm); font-size:14.5px; font-family:var(--font-body);
  transition:border-color .25s, box-shadow .25s;
}
.kd-field .kd-input:focus{ border-color:var(--cyan); box-shadow:0 0 0 3px rgba(70,232,255,.15); outline:none; }
.kd-phone-row{ display:grid; grid-template-columns:110px 1fr; gap:10px; }
textarea.kd-input{ resize:vertical; min-height:120px; }
.kd-field small.err{ display:none; color:#FF6B6B; font-size:12px; margin-top:6px; }
.kd-field.is-invalid .kd-input{ border-color:#FF6B6B; }
.kd-field.is-invalid small.err{ display:block; }

.kd-form-status{ margin-top:6px; font-size:13.5px; }
.kd-form-status.is-error{ color:#FF6B6B; }
.kd-form-status.is-loading{ color:var(--text-2); }

.kd-contact-side{ position:sticky; top:110px; display:flex; flex-direction:column; gap:20px; }
@media (max-width:980px){ .kd-contact-side{ position:static; top:auto; } }
.kd-contact-info{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:26px; display:flex; gap:16px; align-items:flex-start; }
.kd-contact-info .ico{ width:44px; height:44px; border-radius:12px; background:linear-gradient(135deg, rgba(70,232,255,.16), rgba(139,107,255,.16)); display:grid; place-items:center; color:var(--cyan); flex:none; }
.kd-contact-info strong{ display:block; margin-bottom:4px; }
.kd-contact-info span, .kd-contact-info a{ font-size:13.5px; color:var(--text-2); }
.kd-contact-info div > a{ display:block; margin-top:2px; }

/* =====================================================================
   WHATSAPP FLOAT BUTTON
   ===================================================================== */
.kd-whatsapp{
  position:fixed; right:24px; bottom:24px; z-index:900;
  width:60px; height:60px; border-radius:50%; background:#25D366; color:#04150C;
  display:grid; place-items:center; box-shadow:0 12px 30px -8px rgba(37,211,102,.6);
  animation:kd-wa-pulse 2.4s infinite;
}
@keyframes kd-wa-pulse{
  0%{ box-shadow:0 0 0 0 rgba(37,211,102,.55), 0 12px 30px -8px rgba(37,211,102,.6); }
  70%{ box-shadow:0 0 0 14px rgba(37,211,102,0), 0 12px 30px -8px rgba(37,211,102,.6); }
  100%{ box-shadow:0 0 0 0 rgba(37,211,102,0), 0 12px 30px -8px rgba(37,211,102,.6); }
}

/* =====================================================================
   MODAL (thank you)
   ===================================================================== */
.kd-modal{ position:fixed; inset:0; z-index:1200; display:none; align-items:center; justify-content:center; padding:20px; }
.kd-modal.is-open{ display:flex; }
.kd-modal__backdrop{ position:absolute; inset:0; background:rgba(5,6,10,.72); backdrop-filter:blur(6px); animation:kd-fade .3s; }
.kd-modal__card{
  position:relative; z-index:1; width:100%; max-width:420px; background:var(--surface);
  border:1px solid var(--border-strong); border-radius:var(--radius-lg); padding:44px 32px 34px; text-align:center;
  animation:kd-modal-in .4s var(--ease-out); box-shadow:var(--shadow-glow);
}
@keyframes kd-fade{ from{ opacity:0;} to{ opacity:1;} }
@keyframes kd-modal-in{ from{ opacity:0; transform:translateY(20px) scale(.96);} to{ opacity:1; transform:none;} }
.kd-modal__close{ position:absolute; top:16px; right:18px; background:none; border:none; color:var(--text-3); font-size:22px; cursor:pointer; }
.kd-modal__icon{ margin:0 auto 18px; width:72px; height:72px; border-radius:50%; background:rgba(55,226,155,.12); display:grid; place-items:center; }
.kd-modal__icon svg circle{ stroke:var(--green); stroke-width:2; stroke-dasharray:160; stroke-dashoffset:160; animation:kd-circle .6s var(--ease-out) forwards; }
.kd-modal__icon svg path{ stroke:var(--green); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:40; stroke-dashoffset:40; animation:kd-check .4s var(--ease-out) .5s forwards; }
@keyframes kd-circle{ to{ stroke-dashoffset:0; } }
@keyframes kd-check{ to{ stroke-dashoffset:0; } }
.kd-modal__card h3{ font-size:22px; margin-bottom:10px; }
.kd-modal__card p{ color:var(--text-2); font-size:14.5px; margin-bottom:26px; }

/* =====================================================================
   WHATSAPP NUMBER-PICKER POPUP
   ===================================================================== */
.kd-modal__icon--wa{ background:rgba(37,211,102,.12); }
.kd-wa-options{ display:flex; flex-direction:column; gap:12px; }
.kd-wa-option{
  display:flex; align-items:center; gap:12px; padding:14px 16px;
  background:var(--bg-elevated); border:1px solid var(--border-strong); border-radius:var(--radius-sm);
  color:var(--text-1); font-family:var(--font-mono); font-size:15px; letter-spacing:.02em;
  transition:border-color .25s, background .25s, transform .2s;
}
.kd-wa-option:hover{ border-color:#25D366; background:rgba(37,211,102,.08); transform:translateY(-1px); color:var(--text-1); }
.kd-wa-option__ico{ width:34px; height:34px; border-radius:50%; background:rgba(37,211,102,.14); display:grid; place-items:center; flex:none; }
.kd-wa-option__num{ font-weight:600; }

/* =====================================================================
   PAGE HERO (About / Services / Contact top banner)
   ===================================================================== */
.kd-page-hero{ position:relative; padding:170px 0 90px; overflow:hidden; }
.kd-page-hero__bg{ position:absolute; inset:0; background:var(--grad-radial); z-index:0; }
.kd-page-hero__inner{ position:relative; z-index:1; max-width:760px; }
.kd-breadcrumb{ font-size:13px; color:var(--text-3); margin-bottom:18px; font-family:var(--font-mono); }
.kd-breadcrumb span{ color:var(--cyan); }
.kd-page-hero h1{ font-size:clamp(32px,4.6vw,52px); }
.kd-page-hero p{ color:var(--text-2); font-size:17px; margin-top:18px; max-width:600px; }

/* =====================================================================
   SCROLL REVEAL
   ===================================================================== */
[data-reveal]{ opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease-out), transform .8s var(--ease-out); }
[data-reveal].is-visible{ opacity:1; transform:none; }
[data-reveal="fade"]{ transform:none; }
[data-reveal="left"]{ transform:translateX(-32px); }
[data-reveal="left"].is-visible{ transform:none; }
[data-reveal="right"]{ transform:translateX(32px); }
[data-reveal="right"].is-visible{ transform:none; }
[data-reveal="scale"]{ transform:scale(.94); }
[data-reveal="scale"].is-visible{ transform:none; }
[data-reveal-group] > *{ transition-delay:calc(var(--i, 0) * 90ms); }

/* =====================================================================
   VALUES / MISSION (About page)
   ===================================================================== */
.kd-split{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
@media (max-width:980px){ .kd-split{ grid-template-columns:1fr; } }
.kd-split-visual{
  position:relative; aspect-ratio:1/1; border-radius:var(--radius-lg); border:1px solid var(--border);
  background:linear-gradient(160deg,var(--surface),var(--bg-elevated)); overflow:hidden; display:grid; place-items:center;
}
.kd-split-visual::before{ content:''; position:absolute; inset:0; background:var(--grad-radial); }
.kd-split-visual .kd-ring{ position:relative; width:62%; aspect-ratio:1/1; border-radius:50%; border:1px dashed var(--border-strong); display:grid; place-items:center; animation:kd-spin 24s linear infinite; }
.kd-split-visual .kd-ring::before{ content:''; position:absolute; top:-5px; left:50%; width:10px; height:10px; margin-left:-5px; border-radius:50%; background:var(--cyan); box-shadow:0 0 14px var(--cyan); }
.kd-split-visual .kd-core{ width:42%; aspect-ratio:1/1; border-radius:50%; background:var(--grad-primary); display:grid; place-items:center; font-family:var(--font-display); font-weight:700; color:#04060A; font-size:15px; text-align:center; box-shadow:0 0 60px -10px rgba(70,232,255,.6); }
@keyframes kd-spin{ to{ transform:rotate(360deg); } }

.kd-list-check{ display:grid; gap:14px; margin-top:26px; }
.kd-list-check li{ display:flex; align-items:flex-start; gap:12px; font-size:14.5px; color:var(--text-2); }
.kd-list-check li svg{ flex:none; margin-top:2px; color:var(--cyan); }

.kd-mv-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
@media (max-width:700px){
  .kd-mv-grid{ grid-template-columns:1fr; }
  .kd-mv-card__num{ font-size:90px; }
}

.kd-mv-card{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  border:none;
  border-radius:26px;
  padding:40px 36px 36px;
}
.kd-mv-card--blue{
  background:linear-gradient(135deg,#2f63f6 0%,#1743c9 100%);
}
.kd-mv-card--dark{
  background:linear-gradient(160deg,#161c29 0%,#05070c 100%);
}
.kd-mv-card__num{
  position:absolute;
  top:-14px; right:20px;
  z-index:0;
  font-family:var(--font-display);
  font-weight:800;
  font-size:120px;
  line-height:1;
  letter-spacing:-.03em;
  color:rgba(255,255,255,.08);
  pointer-events:none;
  user-select:none;
}
.kd-mv-card__icon{
  position:relative; z-index:1;
  width:52px; height:52px;
  border-radius:14px;
  display:grid; place-items:center;
  margin-bottom:28px;
  background:rgba(255,255,255,.16);
  color:#fff;
}
.kd-mv-card h3{
  position:relative; z-index:1;
  display:flex; align-items:center; gap:16px;
  font-size:25px;
  color:#fff;
  margin-bottom:14px;
}
.kd-mv-card__rule{ flex:1; max-width:64px; height:1px; background:rgba(255,255,255,.32); }
.kd-mv-card p{
  position:relative; z-index:1;
  color:rgba(255,255,255,.78);
  font-size:14.5px;
  line-height:1.75;
  max-width:420px;
}

/* =====================================================================
   FOOTER
   ===================================================================== */
.kd-footer{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(120% 180% at 12% 0%, rgba(24,121,254,.18) 0%, rgba(24,121,254,0) 46%),
    radial-gradient(100% 160% at 100% 0%, rgba(67,139,221,.14) 0%, rgba(67,139,221,0) 50%),
    linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg) 100%);
  border-top:1px solid var(--border);
  padding:80px 0 0;
  margin-top:60px;
}
.kd-footer::before{
  content:'';
  position:absolute; top:0; left:0; right:0; height:2px;
  background:var(--grad-primary);
  opacity:.55;
}
.kd-footer__grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.1fr; gap:40px; padding-bottom:50px; }
@media (max-width:900px){ .kd-footer__grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .kd-footer__grid{ grid-template-columns:1fr 1fr; gap:28px 20px; } .kd-footer__brand{ grid-column:1 / -1; } }
.kd-footer__brand p{ color:var(--text-3); font-size:13.5px; margin:18px 0 20px; max-width:280px; }
.kd-logo--footer{ font-size:18px; }
.kd-logo-img--footer{ height:38px; }
.kd-footer__social{ display:flex; gap:10px; }
.kd-footer__social a{ width:36px; height:36px; border:1px solid var(--border); border-radius:50%; display:grid; place-items:center; font-size:11px; font-family:var(--font-mono); color:var(--text-2); transition:.25s; }
.kd-footer__social a:hover{ border-color:var(--cyan); color:var(--cyan); }
.kd-footer__col h4{ font-size:14px; margin-bottom:18px; color:var(--text-1); }
.kd-footer__col a, .kd-footer__addr{ display:block; color:var(--text-3); font-size:13.5px; margin-bottom:12px; transition:color .25s; }
.kd-footer__col a:hover{ color:var(--cyan); }
.kd-footer__support{
  color:var(--cyan) !important; font-weight:700; background:rgba(70,232,255,.1);
  border:1px solid rgba(70,232,255,.35); border-radius:8px; padding:8px 12px;
  display:inline-flex !important; flex-wrap:wrap; gap:4px; align-items:center;
}
.kd-footer__support:hover{ background:rgba(70,232,255,.18); color:var(--cyan) !important; }
.kd-footer__support-label{ font-weight:600; text-transform:uppercase; font-size:11px; letter-spacing:.04em; opacity:.85; }
.kd-footer__bottom{ width:100%; border-top:1px solid var(--border); padding:22px 24px; display:flex; justify-content:center; align-items:center; text-align:center; flex-wrap:wrap; gap:10px; font-size:12.5px; color:var(--text-3); box-sizing:border-box; }

/* =====================================================================
   MISC UTILITIES
   ===================================================================== */
.kd-mt-0{ margin-top:0 !important; }
.text-center{ text-align:center; }
.kd-badge-row{ display:flex; gap:10px; flex-wrap:wrap; }


/* =====================================================================
   HOME REFERENCE HERO — light editorial hero matching supplied layout
   ===================================================================== */
body.kd-home-reference{
  background:var(--bg);
}

.kd-refhero{
  --hero-blue:#4d94ff;
  --hero-deep:#2777f3;
  --hero-orange:#ff7518;
  position:relative;
  min-height:100vh;
  padding:142px 24px 88px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:#fff;
  color:#111217;
  isolation:isolate;
}
.kd-refhero__grid{
  position:absolute;
  inset:0;
  z-index:-3;
  background-image:
    linear-gradient(rgba(36,84,144,.052) 1px,transparent 1px),
    linear-gradient(90deg,rgba(36,84,144,.052) 1px,transparent 1px);
  background-size:40px 40px;
}
.kd-refhero__wash{
  position:absolute;
  inset:0;
  z-index:-2;
  background:
    radial-gradient(58% 68% at 9% 32%,rgba(99,157,255,.14),transparent 67%),
    radial-gradient(52% 62% at 82% 32%,rgba(255,178,130,.12),transparent 66%),
    radial-gradient(45% 58% at 28% 80%,rgba(110,215,164,.11),transparent 68%),
    radial-gradient(45% 58% at 88% 82%,rgba(173,133,255,.11),transparent 68%);
}
.kd-refhero::after{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:-1;
  background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.03));
}
.kd-refhero__content{
  width:min(680px,100%);
  margin:0 auto;
  text-align:center;
  position:relative;
  z-index:3;
}
.kd-refhero__badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:24px;
  padding:6px 14px;
  border:1px solid rgba(74,144,245,.24);
  border-radius:999px;
  background:rgba(239,247,255,.88);
  color:#3a7ee8;
  font-family:var(--font-body);
  font-size:10px;
  line-height:1;
  font-weight:800;
  letter-spacing:.03em;
  box-shadow:0 4px 14px rgba(40,120,240,.05);
}
.kd-refhero__badge span{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#5ca0ff;
  box-shadow:0 0 0 3px rgba(92,160,255,.12);
}
.kd-refhero h1{
  margin:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  color:#0b0c0f;
  font-family:'Playfair Display', Georgia, serif;
  font-size:clamp(48px,5.25vw,78px);
  font-weight:800;
  line-height:1.05;
  letter-spacing:-.02em;
}
.kd-refhero h1 span,
.kd-refhero h1 em{ display:block; }
.kd-refhero h1 em{
  margin:7px 0 4px;
  font-weight:700;
  font-style:italic;
  background:linear-gradient(90deg,#55a1ff 0%,#8892b8 46%,#ff7817 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.kd-refhero__content > p{
  max-width:590px;
  margin:26px auto 22px;
  color:#707b8c;
  font-size:14px;
  line-height:1.65;
  font-weight:500;
}
.kd-refhero__content > p strong{ color:#20252d; font-weight:600; }
.kd-refhero__actions{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:28px;
}
.kd-refhero__btn{
  min-height:43px;
  padding:0 18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  transition:transform .25s var(--ease-out),box-shadow .25s var(--ease-out),border-color .25s;
}
.kd-refhero__btn:hover{ transform:translateY(-2px); }
.kd-refhero__btn--primary{
  background:var(--hero-deep);
  color:#fff;
  box-shadow:0 8px 18px rgba(39,119,243,.25);
}
.kd-refhero__btn--primary:hover{ box-shadow:0 12px 24px rgba(39,119,243,.32); }
.kd-refhero__btn--secondary{
  background:rgba(255,255,255,.86);
  color:#12151b;
  border:1px solid rgba(27,42,65,.14);
  box-shadow:0 4px 12px rgba(28,59,104,.04);
}
.kd-refhero__btn--secondary:hover{ border-color:rgba(39,119,243,.35); }
.kd-refhero__stats{
  width:min(460px,100%);
  margin:0 auto;
  padding-top:24px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid rgba(32,69,119,.08);
}
.kd-refhero__stats div{ padding:0 16px; position:relative; }
.kd-refhero__stats div+div::before{
  content:'';
  position:absolute;
  left:0;
  top:8px;
  bottom:8px;
  width:1px;
  background:rgba(32,69,119,.08);
}
.kd-refhero__stats strong{
  display:block;
  color:#2777f3;
  font-family:var(--font-body);
  font-size:25px;
  line-height:1.1;
  letter-spacing:-.04em;
}
.kd-refhero__stats span{
  display:block;
  margin-top:3px;
  color:#99a3b2;
  font-size:9px;
  line-height:1.35;
  font-weight:600;
}
.kd-refhero__scroll{
  position:absolute;
  bottom:14px;
  left:50%;
  transform:translateX(-50%);
  color:#929bab;
  font-size:8px;
  font-weight:700;
  letter-spacing:.12em;
}
.kd-refhero__dots i{
  position:absolute;
  left:var(--x);
  top:var(--y);
  width:4px;
  height:4px;
  border-radius:50%;
  background:var(--d);
  opacity:.9;
  box-shadow:0 0 12px color-mix(in srgb,var(--d) 36%,transparent);
}
.kd-refhero__platform{
  position:absolute;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:5px;
  animation:kd-platform-float 5.5s ease-in-out infinite;
}
.kd-refhero__platform-box{
  width:52px;
  height:52px;
  border-radius:16px;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.88);
  border:1px solid rgba(255,255,255,.92);
  box-shadow:0 12px 30px rgba(53,79,117,.08),inset 0 0 0 1px rgba(35,62,102,.025);
  backdrop-filter:blur(10px);
}
.kd-refhero__platform small{
  color:#8c96a8;
  font-size:7px;
  line-height:1;
  font-weight:800;
  letter-spacing:.12em;
}
.kd-refhero__platform--google{ left:3.4%; top:12.5%; animation-delay:-1s; }
.kd-refhero__platform--tiktok{ left:1.3%; top:53.5%; animation-delay:-3.4s; }
.kd-refhero__platform--shopify{ left:9.4%; bottom:11%; animation-delay:-2.1s; }
.kd-refhero__platform--meta{ right:3.7%; top:22.5%; animation-delay:-4.2s; }
.kd-refhero__platform--amazon{ right:1.6%; top:40.5%; animation-delay:-.8s; }
.kd-refhero__platform--snapchat{ right:3.1%; bottom:22%; animation-delay:-2.7s; }
@keyframes kd-platform-float{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-7px); }
}
.kd-brand-g{
  font-family:Arial,sans-serif;
  font-size:22px;
  font-weight:800;
  background:conic-gradient(from 45deg,#4285f4 0 25%,#34a853 0 45%,#fbbc05 0 70%,#ea4335 0 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.kd-brand-note{ color:#111; font-size:25px; font-weight:800; transform:rotate(-8deg); }
.kd-refhero__platform-box--shopify{ background:#f4fae9; }
.kd-brand-shopify{ color:#7ab55c; font-family:Georgia,serif; font-size:22px; font-weight:800; font-style:italic; }
.kd-brand-meta{ width:23px; height:23px; border-radius:50%; display:grid; place-items:center; background:#2b80f7; color:#fff; font-family:Arial,sans-serif; font-size:20px; font-weight:800; }
.kd-refhero__platform-box--amazon{ background:#fff9f1; }
.kd-brand-amazon{ color:#171717; font-family:Arial,sans-serif; font-size:24px; font-weight:700; position:relative; top:-1px; }
.kd-brand-amazon::after{ content:''; position:absolute; width:18px; height:6px; border-bottom:2px solid #f29a24; border-radius:50%; left:0; bottom:-2px; transform:rotate(6deg); }
.kd-refhero__platform-box--snapchat{ background:#fffde5; }
.kd-brand-snap{ width:23px; height:23px; display:grid; place-items:center; border-radius:8px; background:#fffc00; color:#050505; font-size:13px; box-shadow:inset 0 0 0 1.5px #111; }

@media (max-width:980px){
  .kd-refhero{ min-height:860px; padding-top:130px; }
  .kd-refhero__platform--google{ left:5%; top:14%; }
  .kd-refhero__platform--meta{ right:5%; top:18%; }
  .kd-refhero__platform--tiktok{ left:3%; top:56%; }
  .kd-refhero__platform--amazon{ right:3%; top:52%; }
  .kd-refhero__platform--shopify{ left:7%; bottom:8%; }
  .kd-refhero__platform--snapchat{ right:7%; bottom:11%; }
}
@media (max-width:700px){
  .kd-refhero{ min-height:760px; padding:118px 18px 74px; }
  .kd-refhero h1{ font-size:clamp(44px,13vw,61px); }
  .kd-refhero__badge{ font-size:8.5px; padding:6px 10px; margin-bottom:18px; }
  .kd-refhero__content > p{ font-size:13px; padding:0 12px; }
  .kd-refhero__platform-box{ width:42px; height:42px; border-radius:13px; }
  .kd-refhero__platform small{ display:none; }
  .kd-refhero__platform--google{ left:2%; top:16%; }
  .kd-refhero__platform--meta{ right:2%; top:17%; }
  .kd-refhero__platform--tiktok{ left:1%; top:60%; }
  .kd-refhero__platform--amazon{ right:1%; top:59%; }
  .kd-refhero__platform--shopify{ left:5%; bottom:6%; }
  .kd-refhero__platform--snapchat{ right:5%; bottom:7%; }
  .kd-refhero__stats{ width:100%; }
  .kd-refhero__stats div{ padding:0 7px; }
  .kd-refhero__stats strong{ font-size:22px; }
  .kd-refhero__actions{ gap:9px; }
  .kd-refhero__btn{ min-height:41px; padding:0 15px; }
}
@media (max-width:460px){
  .kd-refhero{ min-height:735px; }
  .kd-refhero__platform--shopify,.kd-refhero__platform--snapchat{ display:none; }
  .kd-refhero__platform-box{ width:38px; height:38px; }
  .kd-refhero__platform--google{ left:1%; top:18%; }
  .kd-refhero__platform--meta{ right:1%; top:20%; }
  .kd-refhero__platform--tiktok{ left:1%; top:63%; }
  .kd-refhero__platform--amazon{ right:1%; top:62%; }
}


/* =========================================
   KLIMAX LOGO + COUNTER SECTION
   ========================================= */

.klimax-counter-section {
  width: 100vw !important;
  position: relative !important;
  left: 50% !important;
  right: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  background: #0D1B3E !important;
  padding: 65px 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  font-family: 'Inter', sans-serif !important;
}

.klimax-counter-section *,
.klimax-counter-section *::before,
.klimax-counter-section *::after {
  box-sizing: border-box;
}


/* CONTAINER */

.klimax-counter-section .counter-container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 16px;
}


/* =========================================
   LOGO MARQUEE
   ========================================= */

.klimax-counter-section .dark-marquee-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
  display: flex;
  margin-bottom: 48px;
}


/* LEFT FADE */

.klimax-counter-section .dark-marquee-fade-left {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100px;
  z-index: 10;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    #0D1B3E 0%,
    rgba(13, 27, 62, 0) 100%
  );
}


/* RIGHT FADE */

.klimax-counter-section .dark-marquee-fade-right {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100px;
  z-index: 10;
  pointer-events: none;
  background: linear-gradient(
    270deg,
    #0D1B3E 0%,
    rgba(13, 27, 62, 0) 100%
  );
}


/* MOVING TRACK */

.klimax-counter-section .dark-marquee-track {
  display: flex;
  align-items: center;
  gap: 24px;
	padding-top:10px;
  flex-shrink: 0;
  min-width: max-content;
  animation: klimaxLogoScroll 22s linear infinite;
}


/* PAUSE ON HOVER */

.klimax-counter-section .dark-marquee-wrapper:hover .dark-marquee-track {
  animation-play-state: paused;
}


/* ANIMATION */

@keyframes klimaxLogoScroll {

  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }

}


/* =========================================
   LOGO CARDS
   ========================================= */

.klimax-counter-section .highlight-logo-card {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;

  width: 150px;
  height: 56px;

  padding: 12px 28px;

  background: #ffffff;

  border: 1px solid rgba(255,255,255,0.12);

  border-radius: 30px;

  box-shadow:
    0 4px 20px rgba(0,0,0,0.20);

  transition:
    transform 0.3s ease,
    background 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}


/* LOGO HOVER */

.klimax-counter-section .highlight-logo-card:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.35);

  transform:
    translateY(-3px)
    scale(1.04);

  box-shadow:
    0 8px 25px rgba(66,133,244,0.25);
}


/* LOGO IMAGE */

.klimax-counter-section .highlight-logo-card img {
  display: block !important;

  width: auto !important;
  max-width: 95px !important;

  height: 24px !important;
  max-height: 26px !important;

  object-fit: contain !important;

  filter:
    drop-shadow(
      0 2px 8px rgba(0,0,0,0.30)
    );
}


/* =========================================
   COUNTER GLASS BOX
   ========================================= */

.klimax-counter-section .counter-glass-box {
  width: 100%;

  background: rgba(255,255,255,0.03);

  border:
    1px solid rgba(255,255,255,0.08);

  border-radius: 24px;

  overflow: hidden;
}


/* COUNTER FLEX */

.klimax-counter-section .counter-flex-wrapper {
  display: flex;
  flex-direction: column;
}


/* =========================================
   COUNTER ITEM
   ========================================= */

.klimax-counter-section .counter-item {
  flex: 1;

  padding: 40px 32px;

  text-align: center;

  position: relative;

  border-bottom:
    1px solid rgba(255,255,255,0.08);

  transition:
    transform 0.3s ease,
    background 0.3s ease;
}


/* LAST MOBILE ITEM */

.klimax-counter-section .counter-item:last-child {
  border-bottom: none;
}


/* HOVER */

.klimax-counter-section .counter-item:hover {
  background: rgba(255,255,255,0.02);

  transform:
    translateY(-2px);
}


/* =========================================
   COUNTER BAR
   ========================================= */

.klimax-counter-section .counter-bar {
  width: 48px;
  height: 2px;

  margin:
    0 auto 24px;

  border-radius: 999px;
}


/* =========================================
   COUNTER NUMBER
   ========================================= */

.klimax-counter-section .counter-number {
  font-family: 'Inter', system-ui, sans-serif !important;

  font-size: 48px !important;

  font-weight: 900 !important;

  line-height: 1 !important;

  margin-bottom: 8px !important;
}


/* =========================================
   COUNTER LABEL
   ========================================= */

.klimax-counter-section .counter-label {
  color:
    rgba(255,255,255,0.5) !important;

  font-size: 14px !important;

  font-weight: 500 !important;

  letter-spacing: 0.05em !important;

  text-transform: uppercase !important;

  margin: 0 !important;
}


/* =========================================
   COLORS
   ========================================= */

.klimax-counter-section .metric-blue .counter-bar {
  background: rgb(21,101,216);
}

.klimax-counter-section .metric-blue .counter-number {
  color: rgb(21,101,216);

  text-shadow:
    0 0 40px rgba(21,101,216,0.314);
}


.klimax-counter-section .metric-green .counter-bar {
  background: rgb(52,168,83);
}

.klimax-counter-section .metric-green .counter-number {
  color: rgb(52,168,83);

  text-shadow:
    0 0 40px rgba(52,168,83,0.314);
}


.klimax-counter-section .metric-sky .counter-bar {
  background: rgb(66,133,244);
}

.klimax-counter-section .metric-sky .counter-number {
  color: rgb(66,133,244);

  text-shadow:
    0 0 40px rgba(66,133,244,0.314);
}


.klimax-counter-section .metric-yellow .counter-bar {
  background: rgb(251,188,4);
}

.klimax-counter-section .metric-yellow .counter-number {
  color: rgb(251,188,4);

  text-shadow:
    0 0 40px rgba(251,188,4,0.314);
}


.klimax-counter-section .metric-red .counter-bar {
  background: rgb(234,67,53);
}

.klimax-counter-section .metric-red .counter-number {
  color: rgb(234,67,53);

  text-shadow:
    0 0 40px rgba(234,67,53,0.314);
}


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

@media (min-width: 640px) {

  .klimax-counter-section .counter-container {
    padding-left: 24px;
    padding-right: 24px;
  }

}


/* =========================================
   DESKTOP
   ========================================= */

@media (min-width: 768px) {

  .klimax-counter-section .counter-flex-wrapper {
    flex-direction: row;
  }

  .klimax-counter-section .counter-item {
    border-bottom: none;

    border-right:
      1px solid rgba(255,255,255,0.08);
  }

  .klimax-counter-section .counter-item:last-child {
    border-right: none;
  }

}


@media (min-width: 1024px) {

  .klimax-counter-section .counter-container {
    padding-left: 32px;
    padding-right: 32px;
  }

}


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

@media (max-width: 767px) {

  .klimax-counter-section {
    padding:
      40px 0 !important;
  }

  .klimax-counter-section .dark-marquee-wrapper {
    margin-bottom: 32px;
  }

  .klimax-counter-section .dark-marquee-track {
    gap: 14px;

    animation-duration: 18s;
  }

  .klimax-counter-section .highlight-logo-card {
    width: 125px;
    height: 50px;

    padding:
      10px 20px;
  }

  .klimax-counter-section .highlight-logo-card img {
    max-width: 80px !important;
    height: 22px !important;
  }

  .klimax-counter-section .counter-item {
    padding:
      30px 20px;
  }

  .klimax-counter-section .counter-number {
    font-size: 40px !important;
  }

  .klimax-counter-section .counter-label {
    font-size: 12px !important;
  }

  .klimax-counter-section .counter-glass-box {
    border-radius: 18px;
  }

}


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

@media (max-width: 480px) {

  .klimax-counter-section {
    padding:
      30px 0 !important;
  }

  .klimax-counter-section .counter-container {
    padding-left: 12px;
    padding-right: 12px;
  }

  .klimax-counter-section .highlight-logo-card {
    width: 115px;
    height: 48px;
  }

  .klimax-counter-section .counter-number {
    font-size: 36px !important;
  }

}

/* =====================================================================
   HOME PAGE — SUPPLEMENTARY SECTION STYLES
   (migrated out of inline <style> blocks in index.php so every rule
   lives in this one stylesheet, per section below.)
   ===================================================================== */


/* --------- SERVICES (home page) --------- */

/* --- Google Fonts Import --- */

    /* --- Font Stack & Root Variables --- */

    /* --- Section Global --- */
    .svc-section {
      position: relative;
      padding: 6rem 1.5rem;
      background-color: #ffffff;
      font-family: var(--font-poppins);
    }

    .svc-container {
      max-width: 1280px;
      margin: 0 auto;
    }

    /* --- Header Styling --- */
    .svc-section-header {
      text-align: center;
      margin-bottom: 4rem;
    }

    .svc-badge {
      display: inline-block;
      padding: 0.5rem 1.25rem;
      background-color: rgba(21, 101, 216, 0.08);
      color: #1565D8;
      font-size: 0.875rem;
      font-weight: 600;
      border-radius: 9999px;
      margin-bottom: 1rem;
    }

    /* Title Font: Playfair Display / 48px */
    .svc-title {
      font-family: var(--font-serif-stack);
      font-size: 48px;
      font-weight: 700;
      color: #0D1B3E;
      margin-bottom: 1rem;
      line-height: 1.2;
    }

    .svc-gradient-text {
      background: linear-gradient(135deg, #1565D8 0%, #4285F4 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .svc-subtitle {
      color: #64748b;
      font-size: 1.125rem;
      max-width: 44rem;
      margin: 0 auto;
      line-height: 1.7;
    }

    /* --- Grid --- */
    .svc-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 2rem;
    }

    @media (min-width: 768px) {
      .svc-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (min-width: 1024px) {
      .svc-grid {
        grid-template-columns: repeat(3, 1fr);
      }
    }

    /* --- Service Card Styles --- */
    .svc-card {
      position: relative;
      background-color: #ffffff;
      border-radius: 1.25rem;
      padding: 2.25rem 2rem;
      border: 1px solid #e2e8f0;
      cursor: pointer;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      transition: background-color 0.4s ease, transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease;
    }

    .svc-card-content {
      position: relative;
      z-index: 3;
      display: flex;
      flex-direction: column;
      height: 100%;
    }

    .svc-card-top {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      margin-bottom: 1.75rem;
    }

    /* Icon Box & Zoom Effect */
    .svc-icon-box {
      width: 4.25rem;
      height: 4.25rem;
      border-radius: 1.25rem;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15);
      transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .svc-icon {
      color: #ffffff;
    }

    .svc-dark-icon {
      color: #0D1B3E;
    }

    .svc-tag {
      font-size: 0.75rem;
      font-weight: 700;
      padding: 0.35rem 0.85rem;
      border-radius: 9999px;
      border: 1px solid;
      margin-top: 0.25rem;
    }

    .svc-card h3 {
      font-family: var(--font-serif-stack);
      font-size: 1.35rem;
      font-weight: 700;
      color: #0D1B3E;
      margin-bottom: 0.85rem;
      transition: color 0.4s ease;
    }

    .svc-card p {
      color: #64748b;
      font-size: 0.925rem;
      line-height: 1.65;
      margin-bottom: 1.75rem;
      flex-grow: 1;
      transition: color 0.4s ease;
    }

    .svc-learn-more {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      font-size: 0.875rem;
      font-weight: 600;
      transition: gap 0.3s ease;
    }

    /* --- CARD HOVER STATE EFFECTS --- */
    .svc-card:hover {
      background-color: var(--card-hover-bg);
      /* Dark background shift on card hover */
      transform: translateY(-10px) scale(1.02);
      box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.4);
    }

    .svc-card:hover h3 {
      color: #ffffff;
    }

    .svc-card:hover p {
      color: #94a3b8;
    }

    /* Icon Scale-up on Card Hover */
    .svc-card:hover .svc-icon-box {
      transform: scale(1.18) translateY(-4px);
    }

    .svc-card:hover .svc-learn-more {
      gap: 0.85rem;
    }

    /* --- PARTICLES (Per Card Inside Container) --- */
    .svc-particles-container {
      position: absolute;
      inset: 0;
      pointer-events: none;
      opacity: 0;
      z-index: 1;
      overflow: hidden;
      transition: opacity 0.4s ease;
    }

    /* Particles visible only when card is hovered */
    .svc-card:hover .svc-particles-container {
      opacity: 1;
    }

    .svc-particle {
      position: absolute;
      top: -15px;
      background: radial-gradient(circle, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 70%);
      border-radius: 50%;
      animation: moveTopToBottom linear infinite;
    }

    /* Particle Positions & Durations */
    .svc-particle:nth-child(1) {
      left: 15%;
      width: 6px;
      height: 6px;
      animation-duration: 2.5s;
      animation-delay: 0s;
    }

    .svc-particle:nth-child(2) {
      left: 35%;
      width: 10px;
      height: 10px;
      animation-duration: 3.5s;
      animation-delay: 0.4s;
    }

    .svc-particle:nth-child(3) {
      left: 55%;
      width: 5px;
      height: 5px;
      animation-duration: 2.2s;
      animation-delay: 0.8s;
    }

    .svc-particle:nth-child(4) {
      left: 75%;
      width: 8px;
      height: 8px;
      animation-duration: 3s;
      animation-delay: 0.2s;
    }

    .svc-particle:nth-child(5) {
      left: 90%;
      width: 7px;
      height: 7px;
      animation-duration: 2.8s;
      animation-delay: 0.6s;
    }

    /* Top to Bottom Particle Fall Animation */
    @keyframes moveTopToBottom {
      0% {
        transform: translateY(0px) scale(0.6);
        opacity: 0;
      }

      30% {
        opacity: 0.9;
      }

      80% {
        opacity: 0.9;
      }

      100% {
        transform: translateY(350px) scale(1.2);
        opacity: 0;
      }
    }

    /* Glow Borders and Background Shading */
    .svc-card-glow-bg {
      position: absolute;
      inset: 0;
      opacity: 0;
      transition: opacity 0.4s ease;
      pointer-events: none;
      z-index: 2;
    }

    .svc-card-border-glow {
      position: absolute;
      inset: 0;
      border-radius: 1.25rem;
      border: 2px solid transparent;
      opacity: 0;
      transition: opacity 0.4s ease;
      pointer-events: none;
      z-index: 4;
    }

    .svc-card:hover .svc-card-glow-bg {
      opacity: 0.15;
    }

    .svc-card:hover .svc-card-border-glow {
      opacity: 1;
    }

    /* --- Card Themes & Specific Colors --- */
    .svc-theme-blue .svc-icon-box {
      background: linear-gradient(135deg, #4285F4, #1565D8);
    }

    .svc-theme-blue .svc-card-glow-bg {
      background: linear-gradient(135deg, #4285F4, #1565D8);
    }

    .svc-theme-blue .svc-tag {
      color: #1565D8;
      border-color: rgba(21, 101, 216, 0.25);
      background: rgba(21, 101, 216, 0.08);
    }

    .svc-theme-blue .svc-learn-more {
      color: #1565D8;
    }

    .svc-theme-blue .svc-card-border-glow {
      border-color: #1565D8;
      box-shadow: inset 0 0 15px rgba(21, 101, 216, 0.3);
    }

    .svc-theme-dark-blue .svc-icon-box {
      background: linear-gradient(135deg, #1565D8, #0D47A1);
    }

    .svc-theme-dark-blue .svc-card-glow-bg {
      background: linear-gradient(135deg, #1565D8, #0D47A1);
    }

    .svc-theme-dark-blue .svc-tag {
      color: #1565D8;
      border-color: rgba(21, 101, 216, 0.25);
      background: rgba(21, 101, 216, 0.08);
    }

    .svc-theme-dark-blue .svc-learn-more {
      color: #1565D8;
    }

    .svc-theme-dark-blue .svc-card-border-glow {
      border-color: #1565D8;
      box-shadow: inset 0 0 15px rgba(21, 101, 216, 0.3);
    }

    .svc-theme-green .svc-icon-box {
      background: linear-gradient(135deg, #34A853, #1B7A3E);
    }

    .svc-theme-green .svc-card-glow-bg {
      background: linear-gradient(135deg, #34A853, #1B7A3E);
    }

    .svc-theme-green .svc-tag {
      color: #34A853;
      border-color: rgba(52, 168, 83, 0.25);
      background: rgba(52, 168, 83, 0.08);
    }

    .svc-theme-green .svc-learn-more {
      color: #34A853;
    }

    .svc-theme-green .svc-card-border-glow {
      border-color: #34A853;
      box-shadow: inset 0 0 15px rgba(52, 168, 83, 0.3);
    }

    .svc-theme-yellow .svc-icon-box {
      background: linear-gradient(135deg, #FBBC04, #E6A800);
    }

    .svc-theme-yellow .svc-card-glow-bg {
      background: linear-gradient(135deg, #FBBC04, #E6A800);
    }

    .svc-theme-yellow .svc-tag {
      color: #E6A800;
      border-color: rgba(230, 168, 0, 0.25);
      background: rgba(230, 168, 0, 0.08);
    }

    .svc-theme-yellow .svc-learn-more {
      color: #E6A800;
    }

    .svc-theme-yellow .svc-card-border-glow {
      border-color: #E6A800;
      box-shadow: inset 0 0 15px rgba(230, 168, 0, 0.3);
    }

    .svc-theme-red .svc-icon-box {
      background: linear-gradient(135deg, #EA4335, #B71C1C);
    }

    .svc-theme-red .svc-card-glow-bg {
      background: linear-gradient(135deg, #EA4335, #B71C1C);
    }

    .svc-theme-red .svc-tag {
      color: #EA4335;
      border-color: rgba(234, 67, 53, 0.25);
      background: rgba(234, 67, 53, 0.08);
    }

    .svc-theme-red .svc-learn-more {
      color: #EA4335;
    }

    .svc-theme-red .svc-card-border-glow {
      border-color: #EA4335;
      box-shadow: inset 0 0 15px rgba(234, 67, 53, 0.3);
    }

    .svc-theme-sky-blue .svc-icon-box {
      background: linear-gradient(135deg, #4285F4, #1565D8);
    }

    .svc-theme-sky-blue .svc-card-glow-bg {
      background: linear-gradient(135deg, #4285F4, #1565D8);
    }

    .svc-theme-sky-blue .svc-tag {
      color: #4285F4;
      border-color: rgba(66, 133, 244, 0.25);
      background: rgba(66, 133, 244, 0.08);
    }

    .svc-theme-sky-blue .svc-learn-more {
      color: #4285F4;
    }

    .svc-theme-sky-blue .svc-card-border-glow {
      border-color: #4285F4;
      box-shadow: inset 0 0 15px rgba(66, 133, 244, 0.3);
    }


/* --------- WHY CHOOSE US (home page) --------- */

/* --- FULL WIDTH BREAKOUT FIX --- */
.wcu-section {
  position: relative;
  background-color: #0D1B3E; /* Premium Dark Navy */
  padding: 6rem 1.5rem;
  font-family: 'Inter', sans-serif;
  overflow: hidden;
  box-sizing: border-box;

  /* YE CODE WHITE SPACES KO HATA KE FULL SCREEN KAREGA */
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(-50vw + 50%) !important;
  margin-right: calc(-50vw + 50%) !important;
}

.wcu-section *, 
.wcu-section *::before, 
.wcu-section *::after {
  box-sizing: border-box;
}

.wcu-container {
  max-width: 1280px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

/* Background Glow Orbs */
.wcu-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  pointer-events: none;
  z-index: 1;
}

.wcu-orb-1 {
  top: 20%;
  left: 15%;
  width: 22rem;
  height: 22rem;
  background: rgba(21, 101, 216, 0.15);
}

.wcu-orb-2 {
  bottom: 20%;
  right: 15%;
  width: 22rem;
  height: 22rem;
  background: rgba(66, 133, 244, 0.15);
}

/* Header Typography */
.wcu-header {
  text-align: center;
  margin-bottom: 4rem;
}

.wcu-badge {
  display: inline-block;
  padding: 0.5rem 1.25rem;
  background-color: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  margin-bottom: 1rem;
}

.wcu-title {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 48px;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 1rem 0;
  line-height: 1.2;
}

.wcu-gradient-text {
  background: linear-gradient(90deg, #4285F4, #60A5FA);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.wcu-subtitle {
  color: #94a3b8;
  font-size: 1.125rem;
  max-width: 42rem;
  margin: 0 auto;
  line-height: 1.7;
}

/* Isolated Grid */
.wcu-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
}

@media (min-width: 768px) {
  .wcu-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .wcu-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Dark Glassmorphism Cards */
.wcu-card {
  position: relative;
  background-color: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 1.25rem;
  padding: 2.25rem 2rem;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.wcu-card-content {
  position: relative;
  z-index: 3;
}

.wcu-accent-line {
  position: absolute;
  top: 0; 
  left: 0; 
  right: 0;
  height: 2px;
  opacity: 0.6;
  transition: opacity 0.3s ease;
  z-index: 4;
}

.wcu-icon-box {
  width: 3.75rem;
  height: 3.75rem;
  border-radius: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.wcu-icon {
  color: #ffffff;
}

/* Heading Inside Cards (Playfair Display) */
.wcu-card h3 {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 0.85rem 0;
}

.wcu-card p {
  color: #94a3b8;
  font-size: 0.9rem;
  line-height: 1.65;
  margin: 0;
}

/* --- CARD HOVER EFFECTS --- */
.wcu-card:hover {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.25);
  transform: translateY(-8px) scale(1.015);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
}

.wcu-card:hover .wcu-accent-line { opacity: 1; }
.wcu-card:hover .wcu-icon-box { transform: scale(1.15); }

/* --- PARTICLES ANIMATION (Top to Bottom) --- */
.wcu-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  z-index: 2;
  overflow: hidden;
  transition: opacity 0.4s ease;
}

.wcu-card:hover .wcu-particles {
  opacity: 1;
}

.wcu-particle {
  position: absolute;
  top: -15px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 70%);
  border-radius: 50%;
  animation: wcuMoveTopToBottom linear infinite;
}

.wcu-particle:nth-child(1) { left: 15%; width: 5px; height: 5px; animation-duration: 2.2s; animation-delay: 0s; }
.wcu-particle:nth-child(2) { left: 35%; width: 8px; height: 8px; animation-duration: 3.2s; animation-delay: 0.3s; }
.wcu-particle:nth-child(3) { left: 55%; width: 4px; height: 4px; animation-duration: 2s; animation-delay: 0.7s; }
.wcu-particle:nth-child(4) { left: 75%; width: 7px; height: 7px; animation-duration: 2.8s; animation-delay: 0.2s; }
.wcu-particle:nth-child(5) { left: 90%; width: 6px; height: 6px; animation-duration: 2.5s; animation-delay: 0.5s; }

@keyframes wcuMoveTopToBottom {
  0% { transform: translateY(0px) scale(0.6); opacity: 0; }
  30% { opacity: 0.8; }
  80% { opacity: 0.8; }
  100% { transform: translateY(320px) scale(1.2); opacity: 0; }
}

/* Color Themes */
.wcu-theme-blue .wcu-accent-line { background: linear-gradient(90deg, #1565D8, transparent); }
.wcu-theme-blue .wcu-icon-box { background: linear-gradient(135deg, #1565D8, #0F4FC0); box-shadow: 0 8px 24px rgba(21, 101, 216, 0.3); }

.wcu-theme-green .wcu-accent-line { background: linear-gradient(90deg, #34A853, transparent); }
.wcu-theme-green .wcu-icon-box { background: linear-gradient(135deg, #34A853, #2A9041); box-shadow: 0 8px 24px rgba(52, 168, 83, 0.3); }

.wcu-theme-sky .wcu-accent-line { background: linear-gradient(90deg, #4285F4, transparent); }
.wcu-theme-sky .wcu-icon-box { background: linear-gradient(135deg, #4285F4, #1565D8); box-shadow: 0 8px 24px rgba(66, 133, 244, 0.3); }

.wcu-theme-gold .wcu-accent-line { background: linear-gradient(90deg, #FBBC04, transparent); }
.wcu-theme-gold .wcu-icon-box { background: linear-gradient(135deg, #FBBC04, #E6A800); box-shadow: 0 8px 24px rgba(251, 188, 4, 0.3); }

.wcu-theme-red .wcu-accent-line { background: linear-gradient(90deg, #EA4335, transparent); }
.wcu-theme-red .wcu-icon-box { background: linear-gradient(135deg, #EA4335, #C5352A); box-shadow: 0 8px 24px rgba(234, 67, 53, 0.3); }

.wcu-theme-brand .wcu-accent-line { background: linear-gradient(90deg, #4285F4, transparent); }
.wcu-theme-brand .wcu-icon-box { background: linear-gradient(135deg, #1565D8, #4285F4); box-shadow: 0 8px 24px rgba(66, 133, 244, 0.3); }


/* --------- FEATURES / HOW IT WORKS (home page) --------- */

/* FULL-WIDTH BREAKOUT FIX */
  .ft-dark-section {
    position: relative;
    /* background-color: #0D1B3E; */
    padding: 6rem 1.5rem;
    font-family: 'Inter', sans-serif;
    color: #ffffff;
    
    /* Pure screen me extend karne ke liye Magic Lines */
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: 50% !important;
    transform: translateX(-50%) !important;
    box-sizing: border-box;
    overflow: hidden;
  }

  .ft-dark-section *, 
  .ft-dark-section *::before, 
  .ft-dark-section *::after {
    box-sizing: border-box;
  }

  /* Ambient Glows */
  .ft-glow-1 {
    position: absolute;
    top: 25%;
    right: 0;
    width: 24rem;
    height: 24rem;
    background: rgba(21, 101, 216, 0.15);
    border-radius: 50%;
    filter: blur(90px);
    pointer-events: none;
  }

  .ft-glow-2 {
    position: absolute;
    bottom: 20%;
    left: 0;
    width: 20rem;
    height: 20rem;
    background: rgba(66, 133, 244, 0.1);
    border-radius: 50%;
    filter: blur(90px);
    pointer-events: none;
  }

  /* Content Inner Container */
  .ft-container {
    max-width: 80rem; /* 1280px */
    margin: 0 auto;
    position: relative;
    z-index: 5;
    width: 100%;
  }

  /* Header */
  .ft-header {
    text-align: center;
    margin-bottom: 4rem;
  }

  .ft-badge {
    display: inline-block;
    padding: 0.5rem 1.25rem;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #93C5FD;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 9999px;
    margin-bottom: 1rem;
    backdrop-filter: blur(8px);
  }

  .ft-title {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 2.75rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 1rem 0;
    line-height: 1.2;
  }

  .ft-gradient-text {
    background: linear-gradient(90deg, #4285F4, #60A5FA);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .ft-subtitle {
    color: rgba(255, 255, 255, 0.6);
    font-size: 1.125rem;
    max-width: 38rem;
    margin: 0 auto;
    line-height: 1.6;
  }

  /* Main Grid Layout */
  .ft-layout-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3.5rem;
    align-items: center;
  }

  @media (min-width: 1024px) {
    .ft-layout-grid {
      grid-template-columns: 1.05fr 1fr;
    }
  }

  /* Dashboard Left Card */
  .ft-big-card-wrapper {
    position: relative;
  }

  .ft-big-card-glow {
    position: absolute;
    inset: -1.25rem;
    background: linear-gradient(135deg, rgba(21, 101, 216, 0.25), rgba(66, 133, 244, 0.15));
    border-radius: 1.75rem;
    filter: blur(30px);
    z-index: 1;
  }

  .ft-big-card {
    position: relative;
    z-index: 2;
    background: #060E22;
    border-radius: 1.25rem;
    padding: 1.75rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 0 80px rgba(21, 101, 216, 0.2);
  }

  .ft-dash-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
  }

  .ft-dash-dots {
    display: flex;
    gap: 0.35rem;
  }

  .ft-dot {
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
  }

  .ft-dot-red { background-color: #F87171; }
  .ft-dot-yellow { background-color: #FBBF24; }
  .ft-dot-green { background-color: #34D399; }

  .ft-revenue-box {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 0.85rem;
    padding: 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
  }

  .ft-rev-val {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 2.25rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0.25rem 0;
  }

  .ft-rev-badge {
    color: #34A853;
    font-size: 0.875rem;
    font-weight: 600;
  }

  .ft-metrics-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    margin-bottom: 1rem;
  }

  .ft-metric-card {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 0.85rem;
    padding: 0.85rem;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.08);
  }

  .ft-metric-val {
    font-size: 1.125rem;
    font-weight: 700;
    color: #4285F4;
    margin: 0;
  }

  .ft-metric-val.purple { color: #C084FC; }

  .ft-chart-box {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 0.85rem;
    padding: 1.25rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
  }

  .ft-bars-wrapper {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    height: 4.5rem;
    margin-top: 0.75rem;
  }

  .ft-bar {
    flex: 1;
    border-radius: 3px;
  }

  .ft-bar-muted { background: rgba(255, 255, 255, 0.15); }
  .ft-bar-glow-mid { background: rgba(21, 101, 216, 0.5); }
  .ft-bar-glow-high { background: #1565D8; box-shadow: 0 0 12px rgba(21, 101, 216, 0.6); }

  .ft-days-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 0.5rem;
  }

  .ft-day-txt {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.35);
    flex: 1;
    text-align: center;
  }

  /* Right Side 8 Cards Grid */
  .ft-cards-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.85rem;
  }

  @media (max-width: 500px) {
    .ft-cards-grid { grid-template-columns: 1fr; }
  }

  .ft-small-card {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.85rem;
    padding: 0.85rem 1rem;
    transition: all 0.3s ease;
  }

  .ft-small-card:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(21, 101, 216, 0.5);
    transform: translateY(-2px);
  }

  .ft-icon-box {
    width: 2.25rem;
    height: 2.25rem;
    background: linear-gradient(135deg, #1565D8, #4285F4);
    border-radius: 0.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .ft-icon-box svg {
    width: 1.1rem;
    height: 1.1rem;
    color: #ffffff;
  }

  .ft-card-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: #ffffff;
    margin: 0;
  }

  .ft-card-sub {
    font-size: 0.725rem;
    color: rgba(255, 255, 255, 0.45);
    margin: 0;
  }

  /* Scroll Reveal State */
  .ft-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s ease, transform 0.7s ease;
  }

  .ft-reveal.ft-active {
    opacity: 1 !important;
    transform: translateY(0) !important;
  }

  .ft-small-card {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease, background 0.3s;
  }

  .ft-cards-grid.ft-active .ft-small-card {
    opacity: 1 !important;
    transform: translateY(0) !important;
  }

  /* Stagger Delay */
  .ft-cards-grid.ft-active .ft-small-card:nth-child(1) { transition-delay: 0.1s; }
  .ft-cards-grid.ft-active .ft-small-card:nth-child(2) { transition-delay: 0.15s; }
  .ft-cards-grid.ft-active .ft-small-card:nth-child(3) { transition-delay: 0.2s; }
  .ft-cards-grid.ft-active .ft-small-card:nth-child(4) { transition-delay: 0.25s; }
  .ft-cards-grid.ft-active .ft-small-card:nth-child(5) { transition-delay: 0.3s; }
  .ft-cards-grid.ft-active .ft-small-card:nth-child(6) { transition-delay: 0.35s; }
  .ft-cards-grid.ft-active .ft-small-card:nth-child(7) { transition-delay: 0.4s; }
  .ft-cards-grid.ft-active .ft-small-card:nth-child(8) { transition-delay: 0.45s; }


/* --------- ABOUT TEASER (home page) --------- */

/* Section Container Setup */
    .cx-about-wrapper {
      width: 100vw !important;
      position: relative !important;
      left: 50% !important;
      right: 50% !important;
      margin-left: -50vw !important;
      margin-right: -50vw !important;
      background-color: #f8fafc !important; /* Premium Light Theme */
      color: #0D1B3E;
      font-family: 'Inter', sans-serif !important;
      padding: 80px 20px;
      box-sizing: border-box !important;
      overflow: hidden !important;
    }

    /* Titles use Playfair Display */
    .cx-about-wrapper h1,
    .cx-about-wrapper h2,
    .cx-about-wrapper h3 {
      font-family: 'Inter', system-ui, sans-serif !important;
    }

    /* Paragraphs & General Body Text (Playfair Display, CENTER ALIGNED) */
    .cx-about-wrapper p,
    .cx-about-wrapper div,
    .cx-about-wrapper span:not(.cx-gradient-heading) {
      font-family: 'Inter', sans-serif !important;
    }

    .cx-about-wrapper p {
      font-size: 14px !important;
      line-height: 1.65 !important;
      color: #4a5568 !important;
      margin: 0 !important;
      font-weight: 400 !important;
      text-align: center !important; /* Center Aligned Paragraphs */
    }

    /* Light Blueprint Grid Background */
    .cx-blueprint-grid {
      position: absolute;
      inset: 0;
      background-size: 40px 40px;
      background-image: 
        linear-gradient(to right, rgba(21, 101, 216, 0.04) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(21, 101, 216, 0.04) 1px, transparent 1px);
      pointer-events: none;
    }

    /* Canvas Particles Overlay */
    #cxParticleCanvas {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 1;
    }

    /* Inner Layout Container */
    .cx-main-container {
      position: relative;
      z-index: 2;
      max-width: 1280px;
      margin: 0 auto;
    }

    /* Center Header Block */
    .cx-header-block {
      text-align: center;
      margin-bottom: 40px;
    }

    .cx-pre-title {
      display: inline-block;
      padding: 6px 20px;
      background: rgba(21, 101, 216, 0.08);
      color: #1565D8;
      border: 1px solid rgba(21, 101, 216, 0.2);
      border-radius: 9999px;
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      margin-bottom: 14px;
      font-family: 'Inter', sans-serif !important;
    }

    /* Primary Title (Playfair Display) */
    .cx-header-block h2 {
      font-size: 44px !important;
      font-weight: 700 !important;
      letter-spacing: -0.5px;
      color: #0D1B3E !important;
      margin: 0 0 16px 0;
      font-family: 'Inter', system-ui, sans-serif !important;
    }

    /* Gradient Span Styling */
    .cx-header-block h2 span.cx-gradient-heading {
      background: linear-gradient(135deg, #1565D8 0%, #4285F4 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      font-family: 'Inter', system-ui, sans-serif !important;
    }

    /* Sub-description in Header (Playfair Display, Centered) */
    .cx-header-block .cx-sub-desc {
      max-width: 780px;
      margin: 0 auto;
      font-size: 15px !important;
      line-height: 1.7 !important;
      color: #4a5568 !important;
      font-family: 'Inter', sans-serif !important;
      text-align: center !important;
    }

    /* Main Architecture Grid Layout */
    .cx-architecture-grid {
      position: relative;
      display: grid;
      grid-template-columns: 1fr 280px 1fr;
      gap: 32px;
      align-items: center;
      margin-top: 40px;
    }

    @media (max-width: 1024px) {
      .cx-architecture-grid {
        grid-template-columns: 1fr;
      }
    }

    .cx-side-column {
      display: flex;
      flex-direction: column;
      gap: 32px;
    }

    /* Glassmorphic Cards Styling (Centered Content Flex Setup) */
    .cx-glass-pillar {
      position: relative;
      background: rgba(255, 255, 255, 0.88);
      backdrop-filter: blur(12px);
      border-radius: 20px;
      padding: 30px 24px;
      border: 1px solid rgba(226, 232, 240, 0.9);
      box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.05);
      transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      align-items: center; /* Centering Card Content */
      text-align: center;   /* Centering Text */
    }

    /* Inner Mesh Pattern */
    .cx-glass-pillar::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image: radial-gradient(rgba(13, 27, 62, 0.08) 1px, transparent 1px);
      background-size: 16px 16px;
      opacity: 0.5;
      pointer-events: none;
    }

    .cx-glass-pillar h3 {
      font-size: 20px !important;
      font-weight: 700 !important;
      color: #0D1B3E !important;
      margin-bottom: 10px !important;
      position: relative;
      z-index: 1;
      text-align: center !important;
      font-family: 'Inter', system-ui, sans-serif !important;
    }

    /* Icon Box Setup */
    .cx-icon-wrapper {
      width: 54px;
      height: 54px;
      border-radius: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 18px;
      transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); /* Bouncy Popup Curve */
    }

    .cx-icon-wrapper svg {
      width: 26px;
      height: 26px;
      stroke: currentColor;
      fill: none;
      stroke-width: 2;
    }

    /* --- HOVER EFFECTS: ICON POPUP & CARD BACKGROUND COLOR CHANGE --- */
    
    .cx-glass-pillar:hover {
      transform: translateY(-8px);
    }

    /* 1. BLUE CARD HOVER */
    #pillar-left-1 { border-left: 5px solid #0052FF; }
    #pillar-left-1 .cx-icon-wrapper { background: rgba(0, 82, 255, 0.1); color: #0052FF; }
    #pillar-left-1:hover { 
      background: linear-gradient(145deg, #ffffff 0%, #edf4ff 100%);
      box-shadow: 0 20px 35px -10px rgba(0, 82, 255, 0.25); 
      border-color: #0052FF; 
    }

    /* 2. RED CARD HOVER */
    #pillar-left-2 { border-left: 5px solid #FF3B30; }
    #pillar-left-2 .cx-icon-wrapper { background: rgba(255, 59, 48, 0.1); color: #FF3B30; }
    #pillar-left-2:hover { 
      background: linear-gradient(145deg, #ffffff 0%, #fff0f0 100%);
      box-shadow: 0 20px 35px -10px rgba(255, 59, 48, 0.25); 
      border-color: #FF3B30; 
    }

    /* 3. GREEN CARD HOVER */
    #pillar-right-1 { border-left: 5px solid #34C759; }
    #pillar-right-1 .cx-icon-wrapper { background: rgba(52, 199, 89, 0.1); color: #34C759; }
    #pillar-right-1:hover { 
      background: linear-gradient(145deg, #ffffff 0%, #edfaf0 100%);
      box-shadow: 0 20px 35px -10px rgba(52, 199, 89, 0.25); 
      border-color: #34C759; 
    }

    /* 4. YELLOW CARD HOVER */
    #pillar-right-2 { border-left: 5px solid #FFCC00; }
    #pillar-right-2 .cx-icon-wrapper { background: rgba(255, 204, 0, 0.15); color: #D4A000; }
    #pillar-right-2:hover { 
      background: linear-gradient(145deg, #ffffff 0%, #fffdf0 100%);
      box-shadow: 0 20px 35px -10px rgba(255, 204, 0, 0.3); 
      border-color: #FFCC00; 
    }

    /* ICON POP-UP ANIMATION ON HOVER */
    .cx-glass-pillar:hover .cx-icon-wrapper {
      transform: scale(1.25) translateY(-6px); /* Icon Pops Up */
      box-shadow: 0 8px 20px rgba(0,0,0,0.1);
    }

    /* Center Brand Pod Area */
    .cx-kinetic-center-engine {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 220px;
    }

    .cx-brand-pod {
      position: relative;
      z-index: 5;
      padding: 24px 28px;
      background: #ffffff;
      border-radius: 24px;
      border: 2px solid rgba(21, 101, 216, 0.2);
      box-shadow: 0 15px 35px -10px rgba(21, 101, 216, 0.12);
      text-align: center;
      transition: all 0.4s ease;
    }

    .cx-brand-pod:hover {
      transform: scale(1.08);
      box-shadow: 0 20px 45px -10px rgba(21, 101, 216, 0.25);
      border-color: rgba(21, 101, 216, 0.5);
    }

    .cx-brand-pod .brand-title {
      font-size: 22px;
      font-weight: 700;
      color: #0D1B3E;
      margin-bottom: 4px;
      font-family: 'Inter', system-ui, sans-serif !important;
    }

    .cx-brand-pod .brand-subtitle {
      font-size: 12px;
      color: #1565D8;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 1px;
      font-family: 'Inter', sans-serif !important;
    }

    /* SVG Network Lines Overlay */
    .cx-network-svg-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 1;
    }

    .cx-vector-wire {
      fill: none;
      stroke-width: 2;
      stroke-dasharray: 6 6;
      opacity: 0.4;
    }

    /* Dynamic Infinite Pulse Flow Animation */
    .cx-wire-pulse {
      fill: none;
      stroke-width: 3.5;
      stroke-linecap: round;
      stroke-dasharray: 30 250;
      animation: infinitePulseFlow 2.8s linear infinite;
    }

    @keyframes infinitePulseFlow {
      0% { stroke-dashoffset: 280; }
      100% { stroke-dashoffset: -280; }
    }


/* --------- RESULTS / PERFORMANCE STRIP (home page) --------- */

/* Full Width & Strict Isolation Fix */
    .perf-isolated-wrapper {
      all: initial !important;
      display: block !important;
      width: 100vw !important;
      position: relative !important;
      left: 50% !important;
      right: 50% !important;
      margin-left: -50vw !important;
      margin-right: -50vw !important;
      box-sizing: border-box !important;
      background-color: #0D1B3E !important;
      color: #ffffff !important;
      font-family: 'Inter', sans-serif !important;
      font-size: 18px !important;
      margin-top: 0 !important;
      margin-bottom: 0 !important;
      padding: 0 !important;
      border: none !important;
      outline: none !important;
      box-shadow: none !important;
    }

    .perf-isolated-wrapper *, 
    .perf-isolated-wrapper *::before, 
    .perf-isolated-wrapper *::after {
      box-sizing: border-box !important;
    }

    .perf-isolated-section {
      width: 100% !important;
      padding: 80px 20px !important;
      background-color: #0D1B3E !important;
      position: relative !important;
      overflow: hidden !important;
      margin: 0 !important;
      border: none !important;
    }

    .perf-container {
      max-width: 1200px !important;
      margin: 0 auto !important;
      position: relative !important;
      z-index: 2 !important;
      width: 100% !important;
    }

    /* Typography */
    .perf-isolated-wrapper h2 {
      font-family: 'Inter', system-ui, sans-serif !important;
      font-size: 44px !important;
      line-height: 1.2 !important;
      font-weight: 700 !important;
      color: #ffffff !important;
      margin: 0 0 16px 0 !important;
      text-align: center !important;
    }

    .perf-isolated-wrapper h3 {
      font-family: 'Inter', system-ui, sans-serif !important;
      font-size: 24px !important;
      font-weight: 700 !important;
      color: #ffffff !important;
      margin: 0 !important;
    }

    .perf-isolated-wrapper p {
      font-family: 'Inter', sans-serif !important;
      font-size: 18px !important;
      color: rgba(255, 255, 255, 0.6) !important;
      margin: 0 !important;
    }

    /* Header Section */
    .perf-header {
      text-align: center !important;
      margin-bottom: 64px !important;
    }

    .perf-badge {
      display: inline-block !important;
      padding: 8px 16px !important;
      background: rgba(255, 255, 255, 0.1) !important;
      color: #4285F4 !important;
      font-size: 14px !important;
      font-weight: 600 !important;
      border-radius: 9999px !important;
      margin-bottom: 16px !important;
      border: 1px solid rgba(255, 255, 255, 0.2) !important;
    }

    /* Grid Layouts */
    .perf-grid-4 {
      display: grid !important;
      grid-template-columns: repeat(4, 1fr) !important;
      gap: 24px !important;
      margin-bottom: 48px !important;
    }

    @media (max-width: 1024px) {
      .perf-grid-4 {
        grid-template-columns: repeat(2, 1fr) !important;
      }
    }
    @media (max-width: 640px) {
      .perf-grid-4 {
        grid-template-columns: 1fr !important;
      }
    }

    /* KPI Cards */
    .perf-card {
      background: rgba(255, 255, 255, 0.05) !important;
      backdrop-filter: blur(8px) !important;
      border-radius: 16px !important;
      padding: 24px !important;
      border: 1px solid rgba(255, 255, 255, 0.1) !important;
      position: relative !important;
      overflow: hidden !important;
    }

    .perf-card-num {
      font-family: 'Inter', system-ui, sans-serif !important;
      font-size: 36px !important;
      font-weight: 700 !important;
      color: #ffffff !important;
      margin-bottom: 4px !important;
    }

    .perf-tag {
      display: inline-block !important;
      font-size: 12px !important;
      font-weight: 600 !important;
      color: #34A853 !important;
      background: rgba(52, 168, 83, 0.1) !important;
      padding: 2px 8px !important;
      border-radius: 9999px !important;
      border: 1px solid rgba(52, 168, 83, 0.2) !important;
      margin-top: 8px !important;
    }

    /* Bottom Dashboard Card */
    .perf-dash-card {
      background: rgba(255, 255, 255, 0.05) !important;
      backdrop-filter: blur(8px) !important;
      border-radius: 16px !important;
      padding: 32px !important;
      border: 1px solid rgba(255, 255, 255, 0.1) !important;
      display: grid !important;
      grid-template-columns: 1fr 2fr !important;
      gap: 32px !important;
      align-items: center !important;
    }

    @media (max-width: 1024px) {
      .perf-dash-card {
        grid-template-columns: 1fr !important;
      }
    }

    .perf-circles-wrapper {
      display: flex !important;
      justify-content: space-around !important;
      gap: 20px !important;
      flex-wrap: wrap !important;
    }

    .perf-circle-box {
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
    }

    /* Bar Chart */
    .perf-chart-area {
      display: flex !important;
      align-items: flex-end !important;
      gap: 8px !important;
      height: 144px !important;
      position: relative !important;
    }

    .perf-bar-col {
      flex: 1 !important;
      height: 100% !important;
      display: flex !important;
      align-items: flex-end !important;
    }

    .perf-bar {
      width: 100% !important;
      border-radius: 4px 4px 0 0 !important;
      background: rgba(255, 255, 255, 0.15) !important;
      transform-origin: bottom !important;
      transform: scaleY(0);
      transition: transform 1s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .perf-bar.active-bar {
      background: #1565D8 !important;
    }

    .perf-months {
      display: flex !important;
      justify-content: space-between !important;
      margin-top: 8px !important;
    }

    .perf-months span {
      flex: 1 !important;
      text-align: center !important;
      font-size: 12px !important;
      color: rgba(255, 255, 255, 0.3) !important;
    }

    /* Scroll Reveal */
    .perf-isolated-wrapper .reveal {
      opacity: 0;
      transform: translateY(30px);
      transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .perf-isolated-wrapper .reveal.active {
      opacity: 1;
      transform: translateY(0);
    }
    .perf-isolated-wrapper .reveal.active .perf-bar {
      transform: scaleY(1);
    }

    .circle-progress {
      transition: stroke-dashoffset 1.8s ease-out;
    }


/* --------- FAQ (home page) --------- */

/* Section Container Setup (Pure White Background) */
    .klimax-faq-wrapper {
      width: 100vw !important;
      position: relative !important;
      left: 50% !important;
      right: 50% !important;
      margin-left: -50vw !important;
      margin-right: -50vw !important;
      background-color: #ffffff !important;
      color: #0D1B3E;
      font-family: 'Inter', sans-serif !important;
      padding: 90px 0;
      box-sizing: border-box !important;
      overflow: hidden !important;
    }

    .klimax-faq-wrapper * {
      box-sizing: border-box;
    }

    /* Typography Settings */
    .klimax-faq-wrapper h1,
    .klimax-faq-wrapper h2,
    .klimax-faq-wrapper h3,
    .klimax-faq-wrapper h4 {
      font-family: 'Inter', system-ui, sans-serif !important;
    }

    .klimax-faq-wrapper p,
    .klimax-faq-wrapper span,
    .klimax-faq-wrapper div,
    .klimax-faq-wrapper button {
      font-family: 'Inter', sans-serif !important;
    }

    /* Container */
    .faq-main-container {
      max-width: 1320px;
      margin: 0 auto;
      padding: 0 24px;
      position: relative;
      z-index: 2;
    }

    /* Grid Layout: Left & Right Columns */
    .faq-grid-layout {
      display: grid;
      grid-template-columns: 1fr;
      gap: 48px;
      align-items: start;
    }

    @media (min-width: 992px) {
      .faq-grid-layout {
        grid-template-columns: 0.9fr 1.1fr;
        gap: 60px;
      }
    }

    /* LEFT SIDE STYLES */
    .faq-left-col {
      display: flex;
      flex-direction: column;
      gap: 24px;
    }

    .faq-pre-title {
      display: inline-block;
      align-self: flex-start;
      padding: 6px 18px;
      background: rgba(21, 101, 216, 0.08);
      color: #1565D8;
      border: 1px solid rgba(21, 101, 216, 0.2);
      border-radius: 9999px;
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 1.5px;
      text-transform: uppercase;
    }

    .faq-left-col h2 {
      font-size: 42px !important;
      line-height: 1.2 !important;
      font-weight: 700 !important;
      color: #0D1B3E !important;
      margin: 0 !important;
    }

    .faq-gradient-text {
      background: linear-gradient(135deg, #1565D8 0%, #4285F4 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      font-family: 'Inter', system-ui, sans-serif !important;
    }

    .faq-desc-text {
      font-size: 15px !important;
      line-height: 1.7 !important;
      color: #4a5568 !important;
      margin: 0 !important;
    }

    /* Dark Highlight Card (Left Side) */
    .faq-dark-card {
      background: #0B132B;
      border-radius: 20px;
      padding: 32px;
      color: #ffffff;
      position: relative;
      overflow: hidden;
      box-shadow: 0 20px 40px rgba(11, 19, 43, 0.15);
      border: 1px solid rgba(255, 255, 255, 0.1);
      margin-top: 10px;
    }

    .faq-dark-card::before {
      content: '';
      position: absolute;
      top: -50%;
      right: -50%;
      width: 200px;
      height: 200px;
      background: radial-gradient(circle, rgba(21, 101, 216, 0.35) 0%, transparent 70%);
      pointer-events: none;
    }

    .faq-dark-card h3 {
      font-size: 22px !important;
      color: #ffffff !important;
      margin: 0 0 10px 0 !important;
    }

    .faq-dark-card p {
      font-size: 13.5px !important;
      color: #a0aec0 !important;
      line-height: 1.6 !important;
      margin-bottom: 20px !important;
    }

    .faq-dark-btn {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: #1565D8;
      color: #ffffff !important;
      padding: 12px 24px;
      border-radius: 12px;
      font-size: 14px;
      font-weight: 600;
      text-decoration: none;
      transition: all 0.3s ease;
      box-shadow: 0 8px 20px rgba(21, 101, 216, 0.3);
    }

    .faq-dark-btn:hover {
      background: #0d47a1;
      transform: translateY(-2px);
      box-shadow: 0 12px 25px rgba(21, 101, 216, 0.4);
    }

    /* RIGHT SIDE STYLES (FAQs) */
    .faq-right-col {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    /* FAQ Item Card */
    .faq-item {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 16px;
      overflow: hidden;
      transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
      position: relative;
    }

    /* Accordion Button */
    .faq-trigger {
      width: 100%;
      padding: 20px 24px;
      background: transparent;
      border: none;
      display: flex;
      align-items: center;
      justify-content: space-between;
      text-align: left;
      cursor: pointer;
      gap: 16px;
    }

    .faq-question {
      font-size: 16px;
      font-weight: 600;
      color: #0D1B3E;
      transition: color 0.3s ease;
    }

    .faq-icon {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: #ffffff;
      border: 1px solid #cbd5e1;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: all 0.3s ease;
      color: #0D1B3E;
    }

    .faq-icon svg {
      width: 14px;
      height: 14px;
      fill: currentColor;
      transition: transform 0.3s ease;
    }

    /* Accordion Answer Collapse/Expand */
    .faq-content {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.4s cubic-bezier(0, 1, 0, 1), padding 0.3s ease;
      padding: 0 24px;
    }

    .faq-answer {
      font-size: 14px !important;
      line-height: 1.7 !important;
      color: #4a5568 !important;
      padding-bottom: 20px;
    }

    /* OPEN STATE */
    .faq-item.active .faq-content {
      max-height: 300px;
      transition: max-height 0.4s cubic-bezier(0.5, 0, 0.1, 1), padding 0.3s ease;
    }

    .faq-item.active .faq-icon svg {
      transform: rotate(180deg);
    }

    /* ================= DIFFERENT HOVER COLOR EFFECTS ================= */

    /* FAQ 1: Vibrant Royal Blue */
    .faq-item-1:hover, .faq-item-1.active {
      border-color: #1565D8;
      box-shadow: 0 10px 25px -5px rgba(21, 101, 216, 0.15);
      background: #ffffff;
    }
    .faq-item-1:hover .faq-question, .faq-item-1.active .faq-question { color: #1565D8; }
    .faq-item-1:hover .faq-icon, .faq-item-1.active .faq-icon { background: #1565D8; color: #fff; border-color: #1565D8; }

    /* FAQ 2: Purple / Indigo Accent */
    .faq-item-2:hover, .faq-item-2.active {
      border-color: #7c3aed;
      box-shadow: 0 10px 25px -5px rgba(124, 58, 237, 0.15);
      background: #ffffff;
    }
    .faq-item-2:hover .faq-question, .faq-item-2.active .faq-question { color: #7c3aed; }
    .faq-item-2:hover .faq-icon, .faq-item-2.active .faq-icon { background: #7c3aed; color: #fff; border-color: #7c3aed; }

    /* FAQ 3: Emerald Green Accent */
    .faq-item-3:hover, .faq-item-3.active {
      border-color: #10b981;
      box-shadow: 0 10px 25px -5px rgba(16, 185, 129, 0.15);
      background: #ffffff;
    }
    .faq-item-3:hover .faq-question, .faq-item-3.active .faq-question { color: #059669; }
    .faq-item-3:hover .faq-icon, .faq-item-3.active .faq-icon { background: #10b981; color: #fff; border-color: #10b981; }

    /* FAQ 4: Rose / Crimson Pink Accent */
    .faq-item-4:hover, .faq-item-4.active {
      border-color: #f43f5e;
      box-shadow: 0 10px 25px -5px rgba(244, 63, 94, 0.15);
      background: #ffffff;
    }
    .faq-item-4:hover .faq-question, .faq-item-4.active .faq-question { color: #e11d48; }
    .faq-item-4:hover .faq-icon, .faq-item-4.active .faq-icon { background: #f43f5e; color: #fff; border-color: #f43f5e; }

    /* FAQ 5: Vibrant Amber / Orange Accent */
    .faq-item-5:hover, .faq-item-5.active {
      border-color: #f59e0b;
      box-shadow: 0 10px 25px -5px rgba(245, 158, 11, 0.15);
      background: #ffffff;
    }
    .faq-item-5:hover .faq-question, .faq-item-5.active .faq-question { color: #d97706; }
    .faq-item-5:hover .faq-icon, .faq-item-5.active .faq-icon { background: #f59e0b; color: #fff; border-color: #f59e0b; }

    /* FAQ 6: Electric Cyan / Teal Accent */
    .faq-item-6:hover, .faq-item-6.active {
      border-color: #06b6d4;
      box-shadow: 0 10px 25px -5px rgba(6, 182, 212, 0.15);
      background: #ffffff;
    }
    .faq-item-6:hover .faq-question, .faq-item-6.active .faq-question { color: #0891b2; }
    .faq-item-6:hover .faq-icon, .faq-item-6.active .faq-icon { background: #06b6d4; color: #fff; border-color: #06b6d4; }



/* =====================================================================
   2026 VISUAL UPDATE — dark home hero + alternating inner-page sections
   ===================================================================== */

/* Home hero: retain the editorial layout while shifting the canvas to
   Klimax's premium navy treatment. */
body.kd-home-reference .kd-refhero{
  background:#08142F;
  color:#F7FAFF;
}
body.kd-home-reference .kd-refhero__grid{
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
}
body.kd-home-reference .kd-refhero__wash{
  background:
    radial-gradient(58% 68% at 9% 32%,rgba(77,148,255,.25),transparent 67%),
    radial-gradient(52% 62% at 82% 32%,rgba(255,117,24,.15),transparent 66%),
    radial-gradient(45% 58% at 28% 80%,rgba(82,178,89,.14),transparent 68%),
    radial-gradient(45% 58% at 88% 82%,rgba(67,139,221,.18),transparent 68%);
}
body.kd-home-reference .kd-refhero::after{
  background:linear-gradient(180deg,rgba(8,20,47,.12),rgba(3,9,24,.35));
}
body.kd-home-reference .kd-refhero h1{ color:#FFFFFF; }
body.kd-home-reference .kd-refhero__content > p{ color:#B8C4D8; }
body.kd-home-reference .kd-refhero__content > p strong{ color:#F7FAFF; }
body.kd-home-reference .kd-refhero__badge{
  background:rgba(22,56,112,.46);
  border-color:rgba(97,161,255,.34);
  color:#8EBBFF;
  box-shadow:0 8px 26px rgba(0,0,0,.12);
}
body.kd-home-reference .kd-refhero__btn--secondary{
  background:rgba(255,255,255,.08);
  color:#FFFFFF;
  border-color:rgba(255,255,255,.18);
  box-shadow:none;
  backdrop-filter:blur(10px);
}
body.kd-home-reference .kd-refhero__btn--secondary:hover{
  border-color:rgba(111,169,255,.62);
  background:rgba(255,255,255,.12);
}
body.kd-home-reference .kd-refhero__stats{ border-top-color:rgba(255,255,255,.12); }
body.kd-home-reference .kd-refhero__stats div+div::before{ background:rgba(255,255,255,.10); }
body.kd-home-reference .kd-refhero__stats strong{ color:#72A9FF; }
body.kd-home-reference .kd-refhero__stats span,
body.kd-home-reference .kd-refhero__scroll,
body.kd-home-reference .kd-refhero__platform small{ color:#91A0B8; }

/* Page heroes stay dark so the first content section can start the
   light/dark alternating rhythm consistently. */
.kd-page-hero{
  background:#08142F;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.kd-page-hero__bg{
  background:
    radial-gradient(55% 80% at 18% 35%,rgba(24,121,254,.20),transparent 68%),
    radial-gradient(45% 70% at 86% 40%,rgba(67,139,221,.12),transparent 70%);
}

/* Reusable alternating section themes for About / Services / Contact. */
.kd-alt-dark{
  background:#0D1B3E;
  color:#F7FAFF;
}
.kd-alt-light{
  background:#F7F9FC;
  color:#111827;
  --border:rgba(13,27,62,.10);
  --border-strong:rgba(13,27,62,.18);
  --text-1:#111827;
  --text-2:#556176;
  --text-3:#7C8799;
  --surface:#FFFFFF;
  --surface-2:#EEF3F9;
  --bg-elevated:#F0F4F9;
  --shadow-card:0 18px 48px -30px rgba(13,27,62,.35);
}
.kd-alt-light .kd-card,
.kd-alt-light .kd-contact-info,
.kd-alt-light .kd-form-card{
  background:#FFFFFF;
  border-color:rgba(13,27,62,.10);
  box-shadow:0 18px 48px -34px rgba(13,27,62,.32);
}
.kd-alt-light .kd-card::before{
  background:radial-gradient(320px 160px at 20% 0%,rgba(24,121,254,.10),transparent 70%);
}
.kd-alt-light .kd-card:hover{
  border-color:rgba(24,121,254,.28);
  box-shadow:0 22px 54px -30px rgba(13,27,62,.34);
}
.kd-alt-light .kd-card__icon,
.kd-alt-light .kd-contact-info .ico{
  background:linear-gradient(135deg,rgba(24,121,254,.11),rgba(67,139,221,.09));
  border-color:rgba(24,121,254,.10);
}
.kd-alt-light .kd-split-visual{
  background:linear-gradient(160deg,#FFFFFF,#EEF3F9);
  border-color:rgba(13,27,62,.10);
}
.kd-alt-light .kd-split-visual::before{
  background:radial-gradient(55% 55% at 50% 45%,rgba(24,121,254,.14),rgba(255,255,255,0) 72%);
}
.kd-alt-light .kd-split-visual .kd-ring{ border-color:rgba(13,27,62,.20); }
.kd-alt-light .kd-form-card h2,
.kd-alt-light .kd-contact-info strong{ color:#111827; }
.kd-alt-light .kd-field .kd-input,
.kd-alt-light .kd-field select.kd-input{
  background:#F7F9FC;
  color:#111827;
  border-color:rgba(13,27,62,.16);
}
.kd-alt-light .kd-field .kd-input::placeholder{ color:#8A94A6; }
.kd-alt-light .kd-field select.kd-input option{ background:#FFFFFF; color:#111827; }
.kd-alt-light .kd-btn--ghost{
  color:#111827;
  border-color:rgba(13,27,62,.18);
}
.kd-alt-light .kd-btn--ghost:hover{ color:var(--cyan); border-color:var(--cyan); }
.kd-form-card .kd-btn--primary{
  background:var(--cyan);
  color:#FFFFFF;
  box-shadow:0 10px 26px -10px rgba(24,121,254,.5);
}
.kd-form-card .kd-btn--primary:hover{
  background:#1565D8;
  transform:translateY(-2px);
  box-shadow:0 16px 40px -12px rgba(24,121,254,.6);
}
.kd-alt-light .kd-cta-band{
  background:linear-gradient(145deg,#FFFFFF,#EFF4FA);
  border-color:rgba(13,27,62,.10);
  box-shadow:0 20px 60px -40px rgba(13,27,62,.40);
}
.kd-alt-light .kd-cta-band::before{ opacity:.32; }
.kd-alt-light .kd-cta-band h2{ color:#111827; }
.kd-alt-light .kd-cta-band p{ color:#556176; }
.kd-alt-light .kd-cta-band .kd-btn--primary{
  background:#1565D8;
  color:#FFFFFF;
  box-shadow:0 10px 26px -10px rgba(21,101,216,.48);
}
.kd-alt-dark .kd-card{
  background:rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.10);
}
.kd-alt-dark .kd-card__icon{
  background:linear-gradient(135deg,rgba(24,121,254,.20),rgba(67,139,221,.16));
  border-color:rgba(255,255,255,.08);
}
.kd-alt-dark .kd-step__num{
  background:#10244D;
  border-color:rgba(255,255,255,.14);
}
.kd-steps--four{ grid-template-columns:repeat(4,1fr); }
.kd-trust-band{ padding:18px 0; }
.kd-trust-band .kd-marquee{
  margin:0;
  background:transparent;
  border-color:rgba(255,255,255,.09);
}

@media (max-width:980px){
  .kd-steps--four{ grid-template-columns:1fr; }
}

/* =====================================================================
   PLAYFAIR DISPLAY — TYPOGRAPHY REFINEMENTS
   Adjust letter-spacing & weights for serif display face
   ===================================================================== */

/* All headings: reduce tight negative tracking used for sans-serif */
h1,h2,h3,h4{
  letter-spacing: -.01em;
}

/* Hero heading is already overridden above; ensure all h2 section titles look great */
.svc-title,
.wcu-title,
.ft-title,
.faq-left-col h2,
.cx-header-block h2,
.perf-header h2,
.kd-section-head h2,
.kd-cta-band h2{
  font-family: 'Playfair Display', Georgia, serif;
  letter-spacing: -.015em;
  line-height: 1.15;
}

/* Italic gradient headings — Playfair Display Italic */
.svc-gradient-text,
.wcu-gradient-text,
.ft-gradient-text,
.cx-gradient-heading,
.faq-gradient-text,
h1 em, h2 em{
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 700;
}

/* Card h3 use Playfair Display */
.svc-card h3,
.wcu-card h3,
.cx-glass-pillar h3,
.faq-dark-card h3,
.ft-big-card h3{
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.1rem;
  letter-spacing: -.01em;
}

/* Body text / labels use Inter */
p, span, li, a, label, input, textarea, select, button{
  font-family: 'Inter', system-ui, sans-serif;
}

/* =====================================================================
   PERFORMANCE — content-visibility for off-screen sections
   ===================================================================== */
.klimax-counter-section,
.svc-section,
.wcu-section,
.ft-dark-section,
.cx-about-wrapper,
.perf-isolated-wrapper,
.kd-section,
.klimax-faq-wrapper{
  content-visibility: auto;
  contain-intrinsic-size: 0 600px;
}

/* =====================================================================
   MOBILE RESPONSIVENESS — Comprehensive fixes for all screen sizes
   ===================================================================== */

/* --- Global container fix --- */
@media (max-width: 768px) {
  .kd-container,
  .svc-container,
  .wcu-container,
  .ft-container,
  .cx-main-container,
  .perf-container,
  .faq-main-container{
    padding: 0 16px;
  }

  h1{ font-size: clamp(32px, 9vw, 52px) !important; }
  h2{ font-size: clamp(26px, 7vw, 40px) !important; }
  h3{ font-size: 1rem !important; }

  .kd-section { padding: 64px 0; }
  .kd-section--tight { padding: 44px 0; }
}

/* --- Hero section mobile --- */
@media (max-width: 768px) {
  .kd-refhero__content{
    padding: 80px 20px 60px;
    text-align: center;
  }
  .kd-refhero__badge{ font-size: 10px; }
  .kd-refhero__actions{
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }
  .kd-refhero__btn{
    width: 100%;
    justify-content: center;
  }
  .kd-refhero__stats{
    flex-direction: column;
    gap: 16px;
    align-items: center;
  }
  .kd-refhero__platform{
    display: none;
  }
}

/* --- Services grid mobile --- */
@media (max-width: 768px) {
  .svc-grid{
    grid-template-columns: 1fr !important;
    gap: 16px;
  }
  .svc-section-header{ text-align: center; }
  .svc-subtitle{ font-size: 15px; }
}
@media (min-width: 600px) and (max-width: 1023px) {
  .svc-grid{
    grid-template-columns: 1fr 1fr !important;
  }
}

/* --- Why Choose Us grid mobile --- */
@media (max-width: 768px) {
  .wcu-grid{
    grid-template-columns: 1fr !important;
    gap: 14px;
  }
  .wcu-header{ text-align: center; }
}
@media (min-width: 600px) and (max-width: 1023px) {
  .wcu-grid{
    grid-template-columns: 1fr 1fr !important;
  }
}

/* --- About architecture grid mobile --- */
@media (max-width: 900px) {
  .cx-architecture-grid{
    flex-direction: column !important;
    align-items: center;
    gap: 24px;
  }
  .cx-network-svg-overlay{ display: none; }
  .cx-side-column{
    flex-direction: row;
    gap: 14px;
    width: 100%;
  }
  .cx-glass-pillar{ flex: 1; }
}
@media (max-width: 560px) {
  .cx-side-column{
    flex-direction: column;
  }
  .cx-kinetic-center-engine{ width: 100%; }
  .cx-header-block{ text-align: center; }
  .cx-header-block p br{ display: none; }
}

/* --- Performance results grid mobile --- */
@media (max-width: 768px) {
  .perf-grid-4{
    grid-template-columns: 1fr 1fr !important;
    gap: 12px;
  }
  .perf-dash-card{
    flex-direction: column !important;
    gap: 24px;
  }
  .perf-circles-wrapper{
    justify-content: center;
    flex-wrap: wrap;
  }
  .perf-header{ text-align: center; }
}
@media (max-width: 420px) {
  .perf-grid-4{
    grid-template-columns: 1fr !important;
  }
}

/* --- FAQ grid mobile --- */
@media (max-width: 900px) {
  .faq-grid-layout{
    grid-template-columns: 1fr !important;
    gap: 32px;
  }
  .faq-dark-card{ display: none; }
}

/* --- Counter section mobile --- */
@media (max-width: 768px) {
  .counter-flex-wrapper{
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
  }
  .counter-item{
    flex: 0 0 calc(50% - 10px);
    text-align: center;
  }
}

/* --- Testimonials --- */
@media (max-width: 768px) {
  .kd-testi{
    min-width: 280px !important;
    max-width: 280px !important;
  }
}

/* --- CTA band mobile --- */
@media (max-width: 640px) {
  .kd-cta-band__ctas{
    flex-direction: column;
    gap: 12px;
    width: 100%;
  }
  .kd-cta-band__ctas a{
    width: 100%;
    justify-content: center;
    text-align: center;
  }
  .kd-cta-band{ padding: 40px 24px !important; }
}

/* --- Navigation mobile refinements --- */
@media (max-width: 768px) {
  .kd-nav__inner{
    padding: 0 16px;
  }
  .kd-logo-img{
    max-height: 36px;
  }
}

/* --- Features section mobile --- */
@media (max-width: 900px) {
  .ft-layout-grid{
    grid-template-columns: 1fr !important;
  }
  .ft-big-card-wrapper{
    max-width: 480px;
    margin: 0 auto;
  }
  .ft-cards-grid{
    grid-template-columns: 1fr 1fr !important;
  }
  .ft-header{ text-align: center; }
}
@media (max-width: 480px) {
  .ft-cards-grid{
    grid-template-columns: 1fr !important;
  }
}

/* --- img lazy loading placeholder --- */
img[loading="lazy"]{
  background: rgba(255,255,255,.04);
}

/* --- Touch target minimum size --- */
@media (max-width: 768px) {
  a, button{
    min-height: 44px;
    min-width: 44px;
  }
  .kd-nav__links a{
    min-height: 48px;
    display: flex;
    align-items: center;
  }
}

/* --- Safe area for notched phones --- */
@supports (padding: env(safe-area-inset-left)) {
  .kd-nav__inner,
  .kd-container,
  .svc-container{
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }
}

/* =====================================================================
   SERVICE CARDS — BRAND LOGO ICON BOXES
   Rounded square icon containers matching platform brand colors
   ===================================================================== */

.svc-brand-icon-box {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
}

/* Google — white background, colourful logo */
.svc-brand-google {
  background: #ffffff;
  border: 1.5px solid rgba(66,133,244,0.18);
}

/* Meta — blue gradient matching Meta brand */
/* .svc-brand-meta {
  background: linear-gradient(135deg, #0064E0 0%, #0081FB 100%);
} */

/* Bing — white with subtle blue border */
.svc-brand-bing {
  background: #ffffff;
  border: 1.5px solid rgba(0,120,212,0.2);
}

/* Snapchat — Snapchat yellow */
.svc-brand-snapchat {
  background: #FFFC00;
  border: 1.5px solid rgba(0,0,0,0.08);
}

/* TikTok — deep black matching TikTok branding */
.svc-brand-tiktok {
  background: #010101;
}

/* Amazon — dark navy matching Amazon Ads */
.svc-brand-amazon {
  background: #232F3E;
}

/* Override old .svc-icon-box sizing where needed */
.svc-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

@media (max-width: 480px) {
  .svc-brand-icon-box {
    width: 48px;
    height: 48px;
    border-radius: 12px;
  }
}


/* =====================================================================
   BLOG (home "Latest Blogs" section, /blogs/ listing, single blog page)
   Added separately. All classes start with "kd-blog-", so the rest of
   the website styling is not affected.
   ===================================================================== */
.kd-blog-section{ content-visibility:visible; }
.kd-blog-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; }
@media (max-width:980px){ .kd-blog-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:640px){ .kd-blog-grid{ grid-template-columns:1fr; } }

.kd-blog-card{
  display:flex; flex-direction:column; background:#FFFFFF; border:1px solid rgba(13,27,62,.10);
  border-radius:var(--radius-md); overflow:hidden; box-shadow:0 18px 48px -34px rgba(13,27,62,.32);
  transition:transform .4s var(--ease-out), box-shadow .4s, border-color .4s;
}
.kd-blog-card:hover{ transform:translateY(-6px); border-color:rgba(24,121,254,.28); box-shadow:0 26px 60px -30px rgba(13,27,62,.38); }
.kd-blog-card__media{ position:relative; display:block; aspect-ratio:16/9; overflow:hidden; background:linear-gradient(135deg,#0D1B3E,#1879FE); }
.kd-blog-card__media img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease-out); }
.kd-blog-card:hover .kd-blog-card__media img{ transform:scale(1.05); }
.kd-blog-card__placeholder{
  position:absolute; inset:0; display:grid; place-items:center; padding:20px; text-align:center;
  color:#FFFFFF; font-family:var(--font-display); font-size:22px; font-weight:700;
}
.kd-blog-card__cat{
  position:absolute; left:14px; top:14px; padding:5px 12px; border-radius:var(--radius-pill);
  background:rgba(255,255,255,.94); color:#0D1B3E; font-size:11.5px; font-weight:600; letter-spacing:.02em;
}
.kd-blog-card__body{ display:flex; flex-direction:column; flex:1; padding:24px 24px 26px; }
.kd-blog-card__meta{ display:flex; flex-wrap:wrap; gap:8px; font-size:12.5px; color:#7C8799; margin-bottom:12px; }
.kd-blog-card__title{ font-size:21px; line-height:1.3; margin:0 0 12px; color:#111827; }
.kd-blog-card__title a{ color:inherit; transition:color .3s; }
.kd-blog-card__title a:hover{ color:var(--cyan); }
.kd-blog-card__excerpt{ color:#556176; font-size:14.5px; line-height:1.65; margin:0 0 20px; flex:1; }
.kd-blog-card__link{ display:inline-flex; align-items:center; gap:6px; font-size:13.5px; font-weight:600; color:var(--cyan); align-self:flex-start; }
.kd-blog-card__link svg{ transition:transform .3s var(--ease-out); }
.kd-blog-card:hover .kd-blog-card__link svg{ transform:translateX(4px); }

/* Home section header with "View All" button */
.kd-blog-home__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:56px; }
.kd-blog-home__head .kd-section-head{ margin-bottom:0; }
.kd-blog-home__all{ flex-shrink:0; }
@media (max-width:768px){
  .kd-blog-home__head{ flex-direction:column; align-items:flex-start; margin-bottom:36px; }
}

/* Pagination + empty state */
.kd-blog-pagination{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:56px; }
.kd-blog-pagination a{
  min-width:44px; height:44px; padding:0 14px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:var(--radius-pill); border:1px solid rgba(13,27,62,.16); color:#111827; font-weight:600; font-size:14px; background:#FFFFFF;
  transition:border-color .3s, color .3s, background .3s;
}
.kd-blog-pagination a:hover{ border-color:var(--cyan); color:var(--cyan); }
.kd-blog-pagination a.is-active{ background:var(--cyan); border-color:var(--cyan); color:#FFFFFF; }
.kd-blog-empty{ text-align:center; padding:40px 0; }
.kd-blog-empty p{ color:#556176; margin-top:12px; }

/* Single blog */
.kd-blog-hero .kd-page-hero__inner{ max-width:860px; }
.kd-blog-hero h1{ font-size:clamp(30px,4.2vw,48px); }
.kd-blog-hero .kd-breadcrumb a{ color:inherit; }
.kd-blog-hero .kd-breadcrumb a:hover{ color:var(--text-1); }
.kd-blog-hero__meta{ display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; color:var(--text-2); font-size:14px; }
.kd-blog-single{ padding-top:70px; }
.kd-blog-article{ max-width:800px; margin:0 auto; }
.kd-blog-article__cover{ margin:0 0 40px; border-radius:var(--radius-lg); overflow:hidden; box-shadow:0 24px 60px -34px rgba(13,27,62,.45); }
.kd-blog-article__cover img{ width:100%; height:auto; }

.kd-blog-content{ color:#2B3445; font-size:17.5px; line-height:1.8; overflow-wrap:break-word; }
.kd-blog-content > *:first-child{ margin-top:0; }
.kd-blog-content p{ margin:0 0 22px; }
.kd-blog-content h2{ font-size:clamp(24px,3vw,32px); margin:44px 0 16px; color:#111827; }
.kd-blog-content h3{ font-size:clamp(20px,2.4vw,24px); margin:34px 0 12px; color:#111827; }
.kd-blog-content h4{ font-size:19px; margin:28px 0 10px; color:#111827; }
.kd-blog-content a{ color:var(--cyan); text-decoration:underline; text-underline-offset:3px; }
.kd-blog-content ul, .kd-blog-content ol{ margin:0 0 22px; padding-left:24px; }
.kd-blog-content ul{ list-style:disc; }
.kd-blog-content ol{ list-style:decimal; }
.kd-blog-content ol li[data-list="bullet"]{ list-style-type:disc; }
.kd-blog-content li{ margin-bottom:8px; }
.kd-blog-content blockquote{
  margin:30px 0; padding:18px 24px; border-left:4px solid var(--cyan); background:#EEF3F9;
  border-radius:0 var(--radius-sm) var(--radius-sm) 0; font-style:italic; color:#111827;
}
.kd-blog-content img{ border-radius:var(--radius-md); margin:28px auto; height:auto; }
.kd-blog-content pre, .kd-blog-content code{ font-family:var(--font-mono); font-size:14px; }
.kd-blog-content pre{ background:#0D1B3E; color:#F7FAFF; padding:18px 20px; border-radius:var(--radius-sm); overflow-x:auto; margin:0 0 22px; }
.kd-blog-content hr{ border:0; border-top:1px solid rgba(13,27,62,.12); margin:36px 0; }
.kd-blog-content table{ width:100%; border-collapse:collapse; margin:0 0 22px; display:block; overflow-x:auto; }
.kd-blog-content th, .kd-blog-content td{ border:1px solid rgba(13,27,62,.14); padding:10px 12px; text-align:left; }
.kd-blog-content iframe{ width:100%; aspect-ratio:16/9; height:auto; border:0; border-radius:var(--radius-md); margin:28px 0; }

.kd-blog-share{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:44px; padding-top:28px;
  border-top:1px solid rgba(13,27,62,.10); color:#111827; font-size:14px;
}
.kd-blog-share strong{ margin-right:6px; }
.kd-blog-share a{
  padding:7px 16px; border-radius:var(--radius-pill); border:1px solid rgba(13,27,62,.16); color:#111827;
  font-weight:600; font-size:13px; transition:border-color .3s, color .3s;
}
.kd-blog-share a:hover{ border-color:var(--cyan); color:var(--cyan); }
.kd-blog-back{ display:inline-block; margin-top:28px; color:var(--cyan); font-weight:600; font-size:14.5px; }
.kd-blog-related{ padding-top:0; }

@media (max-width:768px){
  .kd-blog-content{ font-size:16.5px; }
  .kd-blog-card__title{ font-size:19px !important; }
  .kd-blog-single{ padding-top:44px; }
}
.kd-blog-content .ql-align-center{ text-align:center; }
.kd-blog-content .ql-align-right{ text-align:right; }
.kd-blog-content .ql-align-justify{ text-align:justify; }
.kd-blog-content .ql-indent-1{ padding-left:2em; }
.kd-blog-content .ql-indent-2{ padding-left:4em; }
@media (max-width:768px){
  .kd-blog-content h3{ font-size:20px !important; }
  .kd-blog-content h4{ font-size:18px !important; }
}
.kd-blog-section .kd-section-head h2{ font-size:clamp(30px,4vw,46px); color:#111827; }
.kd-blog-card__title{ font-family:var(--font-display); }