/* ============================================================
   DESIGN TOKENS
   ------------------------------------------------------------
   Base palette. light-theme.css re-declares the tokens it needs to
   invert for the light pages and loads afterwards, so these values
   only take effect where the light theme stays silent.
   ============================================================ */
:root {
  --accent: #2A75BF;
  --border-accent: rgba(48, 130, 210, 0.35);
  --font-primary: 'Poppins', sans-serif;
  --gradient-accent: linear-gradient(135deg, #2A75BF 0%, #1D5CA0 100%);
  --radius: 10px;
  --radius-lg: 16px;
  --radius-md: 12px;
  --radius-sm: 6px;
  --radius-xl: 24px;
  /* Section spacing scale. Single source of truth for every `.section-py` /
     `.section-py-sm` band on the site.
     This used to be declared only inside the `max-width: 991px` and
     `max-width: 767px` media queries, so from 992px upwards `--section-py`
     did not exist at all. `padding: var(--section-py)` then became invalid at
     computed-value time and every section collapsed to 0px top and bottom
     padding, which is what let one section's content run into the next.
     Resolved: 1440px -> 100px, 1024px -> 82px, 768px -> 61px, 375px -> 48px. */
  --section-py: clamp(48px, 8vw, 100px);
  --section-py-sm: clamp(40px, 5vw, 60px);
  --shadow-accent: 0 0 30px rgba(48, 130, 210, 0.25);
  --text-white: #FFFFFF;
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: all 0.15s ease;
}

/* === RESET & BASE === */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}


html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}


body {
  font-family: var(--font-primary);
  background-color: var(--primary);
  color: var(--text);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* === TYPOGRAPHY === */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-primary);
  font-weight: 600;
  line-height: 1.25;
  color: var(--text-white);
  letter-spacing: -0.02em;
}


h1 { font-size: clamp(2.2rem, 5vw, 4rem); font-weight: 700; }

h2 { font-size: clamp(1.7rem, 3.5vw, 2.6rem); }

h3 { font-size: clamp(1.3rem, 2.5vw, 1.8rem); }

h4 { font-size: clamp(1.1rem, 2vw, 1.35rem); font-weight: 500; }

h5 { font-size: 1rem; }

h6 { font-size: 0.9rem; }


p { color: var(--text-muted); line-height: 1.8; }

a { text-decoration: none; color: var(--accent-light); transition: var(--transition-fast); }

a:hover { color: var(--accent-bright); }


.text-accent    { color: var(--accent-light) !important; }

.text-muted     { color: var(--text-muted) !important; }

.text-white     { color: var(--text-white) !important; }

.font-300       { font-weight: 300; }

.font-500       { font-weight: 500; }

.font-600       { font-weight: 600; }

.font-700       { font-weight: 700; }
/* === SECTION LAYOUT === */
.section-py { padding-top: var(--section-py); padding-bottom: var(--section-py); }

.section-py-sm { padding-top: var(--section-py-sm); padding-bottom: var(--section-py-sm); }

.section-dark   { background-color: var(--dark); }

.section-surface{ background-color: var(--secondary); }


.section-header { margin-bottom: clamp(28px, 4vw, 60px); }

.section-header.text-center { text-align: center; }


.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-light);
  margin-bottom: 14px;
}

.eyebrow::before {
  content: '';
  display: block;
  width: 24px;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
}

.eyebrow.no-line::before { display: none; }


.section-title {
  color: var(--text-white);
  margin-bottom: 16px;
}


.section-title span, .section-title mark {
  color: var(--accent-light);
  background: none;
}


.section-desc {
  color: var(--text-muted);
  font-size: 1rem;
  max-width: 600px;
  line-height: 1.8;
}

.section-desc.wide { max-width: 800px; }
/* === BUTTONS === */
.btn-qt {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 28px;
  border-radius: var(--radius);
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  /* A transparent 1px border rather than none: .btn-outline sets a real border
     while .btn-accent and the plain variant set none, so with `border: none`
     every outline button rendered 2px taller than the button beside it and
     button rows never lined up. The width is what affects layout, so pinning
     it here keeps every variant the same height and .btn-outline only has to
     choose the colour. */
  border: 1px solid transparent;
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}

.btn-qt::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.08);
  opacity: 0;
  transition: var(--transition-fast);
}

.btn-qt:hover::before { opacity: 1; }


.btn-accent {
  background: var(--gradient-accent);
  color: #ffffff;
  font-weight: 600;
  box-shadow: 0 4px 14px rgba(48, 130, 210, 0.25);
}

.btn-accent:hover {
  background: var(--accent-dark);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(48, 130, 210, 0.45);
}


.btn-outline {
  background: transparent;
  color: var(--text-white);
  border: 1px solid var(--border-light);
}

.btn-outline:hover {
  border-color: var(--accent);
  color: var(--accent-light);
  transform: translateY(-2px);
}


.btn-ghost {
  background: transparent;
  color: var(--accent-light);
  padding: 13px 0;
  border: none;
}

.btn-ghost:hover { color: var(--accent-bright); gap: 12px; }

.btn-ghost i { transition: var(--transition-fast); }


.btn-sm { padding: 9px 18px; font-size: 0.82rem; }

.btn-lg { padding: 16px 36px; font-size: 1rem; }
/* === CARDS === */
.qt-card {
  background: var(--gradient-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}

.qt-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--gradient-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
}

.qt-card:hover {
  border-color: var(--border-accent);
  transform: translateY(-4px);
  box-shadow: var(--shadow-accent);
}

.qt-card:hover::before { transform: scaleX(1); }
/* === FORMS === */
.qt-form-group { margin-bottom: 20px; }

.qt-label {
  display: block;
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 500;
  margin-bottom: 7px;
}

.qt-input, .qt-select, .qt-textarea {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--font-primary);
  font-size: 0.9rem;
  padding: 12px 16px;
  transition: var(--transition-fast);
  outline: none;
}

.qt-input::placeholder, .qt-textarea::placeholder { color: var(--text-subtle); }

.qt-input:focus, .qt-select:focus, .qt-textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.qt-select option { background: var(--surface); }

.qt-textarea { min-height: 130px; resize: vertical; }
/* === BADGE === */
.qt-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.badge-accent { background: var(--accent-glow); color: var(--accent-light); border: 1px solid var(--border-accent); }

.badge-muted  { background: var(--surface); color: var(--text-muted); border: 1px solid var(--border); }
/* ============================================================
   NAVBAR & FLOATING PILL HEADER
   ============================================================ */
.qt-header-wrapper {
  position: relative;
  z-index: 1050;
}


.qt-navbar {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 48px);
  max-width: 1180px;
  z-index: 1050;
  padding: 10px 24px;
  background: rgba(17, 42, 79, 0.72);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 9999px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
  transition: top 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              background-color 0.35s ease,
              border-color 0.35s ease,
              box-shadow 0.35s ease,
              padding 0.35s ease;
}
/* Scrolled state: Deeper contrast and elevation without stretching */
.qt-navbar.scrolled {
  top: 14px;
  background-color: rgba(17, 42, 79, 0.94);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border-color: rgba(48, 130, 210, 0.35);
  padding: 8px 24px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.65), 0 0 20px rgba(48, 130, 210, 0.15);
}


.qt-navbar .navbar-container {
  width: 100%;
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/* Brand Logo */
.qt-navbar .navbar-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 0;
  margin: 0;
  text-decoration: none;
}


.brand-logo-wrap {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}


.brand-icon-svg {
  width: 36px;
  height: 36px;
  filter: drop-shadow(0 0 10px rgba(48, 130, 210, 0.45));
  transition: transform 0.3s ease;
}


.qt-navbar .navbar-brand:hover .brand-icon-svg {
  transform: rotate(5deg) scale(1.05);
}


.brand-text-block {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}


.brand-main {
  font-family: 'Poppins', sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: #ffffff;
  letter-spacing: -0.01em;
}

.brand-sub {
  font-family: 'Poppins', sans-serif;
  font-size: 0.6rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.16em;
  margin-top: 1px;
  color: rgba(255, 255, 255, 0.7);
  opacity: 0.72;
}
/* Navigation Links — Poppins 400 Uppercase */
.qt-navbar .navbar-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 auto;
}


.qt-navbar .nav-link {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 400 !important;
  text-transform: uppercase !important;
  font-size: 0.84rem !important;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.82) !important;
  padding: 8px 16px !important;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  transition: color 0.25s ease;
}
/* Remove oval pill completely */
.qt-navbar .nav-link::before {
  display: none !important;
}


.qt-navbar .nav-link:hover {
  color: #ffffff !important;
  background: transparent !important;
}
/* Active & Hover: ONLY Underline */
.qt-navbar .nav-link.active {
  color: #ffffff !important;
  font-weight: 500 !important;
  background: transparent !important;
  border: none !important;
}


.qt-navbar .nav-link::after {
  content: '';
  position: absolute;
  bottom: 0px;
  left: 50%;
  width: 22px;
  height: 2.5px;
  background: var(--accent);
  border-radius: 9999px;
  transform: translateX(-50%) scaleX(0);
  opacity: 0;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.2s ease;
  box-shadow: 0 0 10px rgba(48, 130, 210, 0.7);
}


.qt-navbar .nav-link:hover::after,
.qt-navbar .nav-link.active::after {
  transform: translateX(-50%) scaleX(1);
  opacity: 1;
}
/* ============================================================
   CLEARLY VISIBLE ANIMATED CTA BUTTON (GET STARTED)
   ============================================================ */
.nav-cta-wrapper {
  display: flex;
  align-items: center;
}


.nav-cta-btn {
  background: var(--gradient-accent);
  color: #ffffff !important;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 10px 24px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 0 16px rgba(48, 130, 210, 0.45), 0 4px 12px rgba(0, 0, 0, 0.3);
  animation: ctaBreathPulse 3s infinite ease-in-out;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}
/* Periodic Light Shimmer Wave */
.nav-cta-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.5),
    transparent
  );
  transform: skewX(-25deg);
  animation: ctaShimmerWave 4.5s infinite ease-in-out;
  pointer-events: none;
}


@keyframes ctaShimmerWave {
  0% { left: -100%; }
  22%, 100% { left: 220%; }
}
/* Hover darkens instead of lightening: white on #4495E8 is only 3.13:1, which
   fails AA at this 0.82rem/600 size. Darkening keeps the whole ramp above
   4.5:1 - the base #2a75bf stop is 4.78:1 and this lighter-looking first stop
   would have been the failure - and still reads clearly against the base
   gradient on top of the lift and the stronger glow. */
.nav-cta-btn:hover {
  background: linear-gradient(135deg, #2a75bf 0%, #164a86 100%);
  color: #ffffff !important;
  transform: translateY(-2px) scale(1.035);
  box-shadow: 0 0 32px rgba(48, 130, 210, 0.85), 0 8px 22px rgba(0, 0, 0, 0.45);
}


.nav-cta-btn .bi-arrow-right {
  font-size: 1rem;
  font-weight: 700;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}


.nav-cta-btn:hover .bi-arrow-right {
  transform: translateX(4px);
}
/* Mobile Nav Toggle */
.qt-toggler {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-light);
  border-radius: 9999px;
  width: 44px;
  height: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  padding: 8px;
  transition: var(--transition-fast);
}


.qt-toggler:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--accent);
}


.qt-toggler span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text-white);
  border-radius: 2px;
  transition: var(--transition-fast);
}


.qt-toggler.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }

.qt-toggler.active span:nth-child(2) { opacity: 0; }

.qt-toggler.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }


@media (prefers-reduced-motion: reduce) {
  .hero-bg-slide { animation: none; opacity: 0; transform: none; }
  .hero-bg-slide:nth-child(1) { opacity: 1; }
}
/* Static / reduced motion: hold the first frame. The track keeps its full
   width, so every later frame stays clipped off to the right. */
.hero-section.hero-media-active.hero-media-static .hero-loop-track,
.hero-section.hero-media-static .hero-loop-track {
  animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .hero-section .hero-loop-track { animation: none !important; }
}
/* Subtle Vignette + Brand Overlay for Crisp Contrast and Readability
   (kept deliberately dark/opaque so hero text stays legible over every slide) */
.hero-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 75% 25%, rgba(17, 42, 79, 0.55) 0%, rgba(14, 16, 19, 0.94) 62%, rgba(10, 11, 13, 0.98) 100%),
    linear-gradient(180deg, rgba(14,16,19,0.55) 0%, rgba(14,16,19,0.35) 40%, rgba(14,16,19,0.85) 100%);
  pointer-events: none;
  z-index: 1;
}


.nm-hero-content {
  position: relative;
  z-index: 5;
  max-width: 1100px;
}
/* 3. Giant Title Block — Clean Unified Left Alignment */
.nm-hero-giant-block {
  margin-left: 0;
  margin-bottom: clamp(26px, 3.5vh, 36px);
}


.nm-giant-row-1 {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 28px);
  line-height: 0.9;
}


.nm-giant-row-2 {
  line-height: 0.9;
  margin-top: -4px;
}


.nm-giant-word {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(4rem, 7vw, 7.2rem);
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.04em;
  margin: 0;
  display: inline-block;
  animation: fadeInUp 0.7s ease 0.2s both;
}


@keyframes starRotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
/* Outer Spinning Ring with dual glowing nodes */
.nm-hero-1-social-border {
  width: 450px;
  height: 450px;
  border: 2px solid #3a4b66;
  border-radius: 50%;
  position: absolute;
  right: -225px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 0;
  animation: nm-hero-1-social-border 14s linear infinite;
  pointer-events: none;
}


.nm-hero-1-social-border::after {
  content: "";
  width: 18px;
  height: 18px;
  background: #3082D2;
  border-radius: 50%;
  box-shadow: 0 0 16px rgba(48, 130, 210, 0.95);
  position: absolute;
  left: -9px;
  top: calc(50% - 9px);
}


.nm-hero-1-social-border::before {
  content: "";
  width: 18px;
  height: 18px;
  background: #3082D2;
  border-radius: 50%;
  box-shadow: 0 0 16px rgba(48, 130, 210, 0.95);
  position: absolute;
  right: -9px;
  top: calc(50% - 9px);
}
@keyframes nm-hero-1-social-border {
  0% {
    transform: translateY(-50%) rotate(0deg);
  }
  100% {
    transform: translateY(-50%) rotate(360deg);
  }
}
/* Exact polar-centered anchor styling */
.nm-hero-1-social-link .link-elm {
  position: absolute;
  width: 40px;
  height: 40px;
  margin-right: -20px;
  margin-top: -20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 26px;
  text-decoration: none;
  line-height: 1;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s ease, text-shadow 0.2s ease;
  cursor: pointer;
  z-index: 3;
}


.nm-hero-1-social-link .link-elm:hover {
  transform: scale(1.28);
  color: #ffffff;
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.9);
}
/* Mobile Social Links */
.nm-hero-mobile-socials {
  display: flex;
  align-items: center;
  gap: 12px;
}


.mobile-soc-link {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid rgba(255, 255, 255, 0.15);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  text-decoration: none;
  font-size: 1.05rem;
  transition: all 0.25s ease;
}


.mobile-soc-link:hover {
  background: var(--accent);
  color: #ffffff;
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 0 16px rgba(48, 130, 210, 0.5);
}
/* ============================================================
   RIGHT CIRCULAR SOCIAL LINKS WHEEL (MATHEMATICALLY PERFECT)
   ============================================================ */
.nm-hero-1-social-position {
  position: absolute;
  right: -20px;
  top: 52%;
  transform: translateY(-50%);
  width: 200px;
  height: 420px;
  z-index: 15;
  pointer-events: auto;
}

/* 60px solid Bright Blue crescent arc */
.nm-hero-1-social-position::after {
  content: "";
  width: 380px;
  height: 380px;
  border-radius: 50%;
  border: 60px solid #3082D2;
  position: absolute;
  top: 50%;
  right: -190px;
  transform: translateY(-50%);
  z-index: 1;
  box-shadow: 0 0 45px rgba(48, 130, 210, 0.45);
  pointer-events: none;
}

/* Social link items container */
.nm-hero-1-social-link {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: auto;
}

/* 1. WhatsApp: theta = +65 deg */
.link-elm.soc-wa {
  right: 68px;
  top: calc(50% - 145px);
}

/* 2. X: theta = +35 deg */
.link-elm.soc-tw {
  right: 131px;
  top: calc(50% - 92px);
}

/* 3. LinkedIn: theta = 0 deg (apex center) */
.link-elm.soc-li {
  right: 160px;
  top: 50%;
}

/* 4. Instagram: theta = -35 deg */
.link-elm.soc-ig {
  right: 131px;
  top: calc(50% + 92px);
}

/* 5. Facebook: theta = -65 deg */
.link-elm.soc-fb {
  right: 68px;
  top: calc(50% + 145px);
}

/* Responsive Handling */
@media (max-width: 1200px) {
  .nm-hero-1-social-position {
    transform: translateY(-50%) scale(0.82);
    transform-origin: right center;
  }
}


@media (max-width: 991px) {
  .nm-hero-1-social-position {
    display: none;
  }
}

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

@keyframes float1 { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-12px);} }

@keyframes float2 { 0%,100%{transform:translateY(0);} 50%{transform:translateY(12px);} }
/* Mouse Wheel */
.mouse-wheel {
  width: 4px;
  height: 8px;
  background: #3082D2;
  border-radius: 4px;
  position: absolute;
  top: 7px;
  box-shadow: 0 0 10px #3082D2;
  animation: mouseWheelSlide 2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}


@keyframes mouseWheelSlide {
  0% {
    opacity: 0;
    transform: translateY(0);
  }
  25% {
    opacity: 1;
  }
  75% {
    opacity: 1;
    transform: translateY(14px);
  }
  100% {
    opacity: 0;
    transform: translateY(18px);
  }
}


@keyframes mouseChassisFloat {
  0%, 100% {
    transform: translateY(0);
    border-color: rgba(48, 130, 210, 0.7);
    box-shadow: 0 0 14px rgba(48, 130, 210, 0.25);
  }
  50% {
    transform: translateY(6px);
    border-color: #3082D2;
    box-shadow: 0 0 24px rgba(48, 130, 210, 0.55);
  }
}
/* Chevrons */
.mouse-chevrons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin-top: -2px;
}


.mouse-chevrons .chv-arrow {
  display: block;
  width: 7px;
  height: 7px;
  border-bottom: 2px solid #3082D2;
  border-right: 2px solid #3082D2;
  transform: rotate(45deg);
  opacity: 0.35;
  animation: chevronBounce 1.8s infinite;
}


.mouse-chevrons .chv-arrow:nth-child(2) {
  animation-delay: 0.22s;
  margin-top: -3px;
}


@keyframes chevronBounce {
  0%, 100% {
    opacity: 0.2;
    transform: rotate(45deg) translate(0, 0);
  }
  50% {
    opacity: 1;
    transform: rotate(45deg) translate(2px, 2px);
  }
}


@keyframes cursorFloatBadge {
  0%, 100% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(12px, -14px);
  }
}


@media (hover: none) {
  .hero-cursor-dot,
  .hero-cursor-ring {
    display: none !important;
  }
}
/* ============================================================
   PARTNERS / TRUST INFINITY STRIP
   ============================================================ */
.trust-section {
  padding: 42px 0;
  background: linear-gradient(180deg, rgba(17, 42, 79, 0.95) 0%, rgba(26, 28, 32, 0.85) 50%, rgba(17, 42, 79, 0.95) 100%);
  border-top: 1px solid rgba(48, 130, 210, 0.25);
  border-bottom: 1px solid rgba(48, 130, 210, 0.25);
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 10px 30px rgba(0, 0, 0, 0.35);
}

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

.trust-section::before {
  left: 0;
  background: linear-gradient(to right, #1A1C20 0%, rgba(26, 28, 32, 0) 100%);
}

.trust-section::after {
  right: 0;
  background: linear-gradient(to left, #1A1C20 0%, rgba(26, 28, 32, 0) 100%);
}

.trust-label-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 22px;
}

.trust-label {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent-light);
  margin-bottom: 0;
  text-align: center;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(48, 130, 210, 0.12);
  border: 1px solid rgba(48, 130, 210, 0.25);
  padding: 5px 16px;
  border-radius: 9999px;
}

.marquee-wrap {
  position: relative;
  width: 100%;
  overflow: hidden;
  display: flex;
}

.marquee-track {
  display: flex;
  align-items: center;
  animation: marqueeInfinity 32s linear infinite;
  gap: 28px;
  width: max-content;
  will-change: transform;
}

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

@keyframes marqueeInfinity {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.partner-logo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 180px;
  height: 58px;
  padding: 8px 24px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.35);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 1;
  filter: none;
  flex-shrink: 0;
}

.partner-logo-item:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--accent);
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 8px 25px rgba(48, 130, 210, 0.3);
}

.partner-logo-item img {
  max-height: 40px;
  max-width: 150px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
  transition: transform 0.3s ease;
}

.partner-logo-item:hover img {
  transform: scale(1.05);
}

.partner-logo-text {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-white);
  letter-spacing: 0.05em;
  white-space: nowrap;
}
/* ============================================================
   ABOUT PREVIEW
   ============================================================ */
.about-preview .about-image-wrap {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.about-preview .about-image-wrap img {
  width: 100%;
  border-radius: var(--radius-xl);
  border: 1px solid var(--border);
}

.about-preview .about-badge {
  position: absolute;
  bottom: -20px; right: -20px;
  background: var(--gradient-accent);
  color: #ffffff;
  border-radius: var(--radius-md);
  padding: 16px 20px;
  font-weight: 700;
  text-align: center;
  box-shadow: 0 10px 30px rgba(48, 130, 210, 0.35);
}

.about-preview .about-badge .num {
  font-size: 1.25rem;
  line-height: 1;
  display: block;
}

.about-preview .about-badge .label { font-size: 0.66rem; font-weight: 500; }


.about-features { display: flex; flex-direction: column; gap: 12px; margin: 28px 0; }

.about-feature-item {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text);
  font-size: 0.9rem;
}

.about-feature-item i { color: var(--accent); font-size: 1rem; }
/* About Info Cards Grid */
.about-cards-grid {
  margin: 24px 0 28px;
}

.about-info-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 16px 18px;
  height: 100%;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(12px);
}

.about-info-card:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(48, 130, 210, 0.4);
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.35), 0 0 20px rgba(48, 130, 210, 0.2);
}

.about-card-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: rgba(48, 130, 210, 0.12);
  border: 1px solid rgba(48, 130, 210, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  font-size: 1.2rem;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.about-info-card:hover .about-card-icon {
  transform: scale(1.08);
}

.about-card-content {
  flex: 1;
}

.about-card-title {
  font-size: 0.98rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 4px;
  letter-spacing: 0.02em;
}

.about-card-text {
  font-size: 0.84rem;
  color: var(--text-muted);
  line-height: 1.45;
  margin: 0;
}
/* ============================================================
   FOUNDER SECTION
   ============================================================ */
.founder-section { background: var(--dark); }

.founder-image-wrap {
  position: relative;
  display: inline-block;
  /* Definite width so the wrap is not shrink-to-fit. The old <img> got its
     380px from its 1024px intrinsic width being clamped; an icon element has
     no intrinsic width and would otherwise collapse to the glyph. */
  width: 100%;
  max-width: 380px;
}

.founder-image-wrap::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, var(--accent) 0%, transparent 60%);
  z-index: 0;
}

.founder-image-wrap img {
  position: relative;
  z-index: 1;
  border-radius: var(--radius-xl);
  width: 100%;
  max-width: 380px;
  display: block;
  object-fit: cover;
  aspect-ratio: 3/4;
  background: var(--surface);
}
/* Icon variant: stands in for the founder photo inside the same gradient
   frame. It keeps the 3/4 footprint and the 380px cap of the img above, so
   swapping the markup for this never shifts the surrounding layout.
   Scoped to .founder-image-wrap because the light theme paints every span
   inside .founder-section with --text, which would win on specificity. */
.founder-image-wrap .founder-icon {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 100%;
  max-width: 380px;
  aspect-ratio: 3/4;
  border-radius: var(--radius-xl);
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--accent);
  font-size: clamp(72px, 14vw, 128px);
  line-height: 1;
}

.founder-quote {
  border-left: 3px solid var(--accent);
  padding-left: 20px;
  margin: 24px 0;
  color: var(--text);
  font-size: 1rem;
  font-weight: 300;
  font-style: italic;
  line-height: 1.8;
}

.founder-social { display: flex; gap: 12px; margin-top: 24px; }

.founder-social a {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 0.9rem;
  transition: var(--transition-fast);
}

.founder-social a:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-glow);
}
/* ============================================================
   SERVICES SECTION
   ============================================================ */
.service-card {
  background: var(--gradient-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.service-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: var(--gradient-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
}

.service-card:hover {
  border-color: var(--border-accent);
  transform: translateY(-6px);
  box-shadow: 0 16px 48px rgba(0,0,0,0.5), var(--shadow-accent);
}

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

.service-card:hover .service-icon { background: var(--accent); color: #ffffff; }


.service-icon {
  width: 56px; height: 56px;
  background: var(--surface-2);
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
  color: var(--accent);
  margin-bottom: 20px;
  transition: var(--transition);
  flex-shrink: 0;
}

.service-num {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text-subtle);
  letter-spacing: 0.1em;
  margin-bottom: 12px;
  display: block;
}

.service-card h3 {
  font-size: 1.05rem;
  margin-bottom: 10px;
  color: var(--text-white);
}

.service-card p {
  font-size: 0.87rem;
  color: var(--text-muted);
  line-height: 1.7;
  flex-grow: 1;
  margin-bottom: 20px;
}

.service-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--accent-light);
  letter-spacing: 0.02em;
  margin-top: auto;
  transition: var(--transition-fast);
}

.service-link:hover { gap: 10px; color: var(--accent-bright); }


/* The home services band used to carry its own hardcoded 82px/86px vertical
   padding, which made it the one section on the site that ignored the spacing
   scale. That override is gone on purpose - `#services` now takes
   `padding: var(--section-py)` from `.section-py` like every other band.
   Its header keeps a tighter-than-default gap, but responsive instead of flat. */
#services .section-header {
  margin-bottom: clamp(28px, 3vw, 34px);
}

#services .eyebrow {
  margin-bottom: 14px;
}

#services .section-title {
  font-size: clamp(3rem, 3.6vw, 5rem);
  line-height: 1.02;
  letter-spacing: -0.06em;
  margin-bottom: 20px;
}

#services .title-underline {
  width: 62px;
  height: 3px;
  margin: 14px 0 26px;
}

#services .section-desc {
  font-size: clamp(1.08rem, 1.35vw, 1.26rem);
  line-height: 1.62;
  max-width: 760px;
  color: rgba(214, 224, 236, 0.92);
}

#services .btn-qt.btn-outline {
  min-width: 190px;
  justify-content: center;
  padding: 16px 22px;
  border-radius: 14px;
  border-color: rgba(153, 184, 230, 0.3);
  background: rgba(255,255,255,0.02);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03);
  font-size: 1.02rem;
}

#services .service-card {
  padding: 18px 18px 20px;
  border-radius: 18px;
  background: rgba(10, 22, 38, 0.28);
  border: 1px solid rgba(130, 168, 221, 0.14);
  box-shadow: none;
  min-height: 280px;
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

#services .service-card:hover {
  border-color: rgba(98, 165, 255, 0.45);
  transform: translateY(-4px);
  box-shadow: 0 18px 38px rgba(10, 18, 28, 0.28);
}

#services .service-icon {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: rgba(83, 141, 214, 0.08);
  border: 1px solid rgba(120, 170, 235, 0.2);
  margin-bottom: 14px;
  font-size: 1rem;
}

#services .service-num {
  margin-bottom: 12px;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
}

#services .service-card h3 {
  font-size: clamp(1.2rem, 1.7vw, 2rem);
  line-height: 1.3;
  letter-spacing: -0.04em;
  margin-bottom: 12px;
}

#services .service-card p {
  font-size: 1.02rem;
  line-height: 1.72;
  color: rgba(214, 226, 238, 0.8);
  margin-bottom: 16px;
}

#services .service-link {
  font-size: 0.92rem;
  letter-spacing: 0.02em;
}

@media (max-width: 767px) {
  #services .section-title {
    font-size: clamp(2.35rem, 8vw, 3.2rem);
  }
  #services .section-desc {
    font-size: 1rem;
  }
  #services .service-card {
    min-height: auto;
  }
}
/* Service image card variant */
.service-card-img {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4/3;
  background: var(--surface);
}

.service-card-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.service-card-img:hover img { transform: scale(1.08); }

.service-card-img .overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(8,12,16,0.95) 0%, transparent 60%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 24px;
}
/* ============================================================
   WHY QUANTUM TECH
   ============================================================ */
/* ============================================================
   WHY QUANTUM TECH
   ============================================================ */
.why-grid { 
  display: grid; 
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); 
  gap: 24px; 
}

.why-item {
  background: linear-gradient(145deg, rgba(20, 34, 56, 0.92), rgba(11, 22, 40, 0.97));
  border: 1px solid rgba(48, 130, 210, 0.25);
  border-radius: var(--radius-lg);
  padding: 30px 26px;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-align: left !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.why-item::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.why-item:hover {
  border-color: rgba(48, 130, 210, 0.6);
  transform: translateY(-6px);
  box-shadow: 0 18px 40px -10px rgba(0, 0, 0, 0.75), 0 0 26px -4px rgba(48, 130, 210, 0.35);
}

.why-item:hover::before {
  opacity: 1;
}

.why-item .icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(48, 130, 210, 0.2), rgba(17, 42, 79, 0.4));
  border: 1px solid rgba(48, 130, 210, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: var(--accent);
  margin-bottom: 20px;
  transition: all 0.4s ease;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
  flex-shrink: 0;
}

.why-item:hover .icon {
  color: #fff;
  background: linear-gradient(135deg, #3082D2, #1B5B9F);
  border-color: #3082D2;
  transform: scale(1.08) rotate(3deg);
  box-shadow: 0 0 20px rgba(48, 130, 210, 0.6);
}

.why-item h3 {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 10px;
  color: #ffffff;
  letter-spacing: 0.01em;
}

.why-item p { 
  font-size: 0.88rem; 
  color: var(--text-muted); 
  line-height: 1.7; 
  margin: 0; 
  flex-grow: 1;
}
/* ============================================================
   INDUSTRIES / SECTORS (MODERN ENTERPRISE)
   ============================================================ */
.industry-grid { 
  display: grid; 
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); 
  gap: 24px; 
}

.industry-card {
  background: linear-gradient(145deg, rgba(20, 34, 56, 0.92), rgba(11, 22, 40, 0.97));
  border: 1px solid rgba(48, 130, 210, 0.25);
  border-radius: var(--radius-lg);
  padding: 28px 24px 24px;
  text-align: left !important;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: default;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.industry-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.industry-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top right, rgba(48, 130, 210, 0.15), transparent 70%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.industry-card:hover {
  border-color: rgba(48, 130, 210, 0.6);
  transform: translateY(-6px);
  box-shadow: 0 18px 40px -10px rgba(0, 0, 0, 0.75), 0 0 26px -4px rgba(48, 130, 210, 0.35);
}

.industry-card:hover::before,
.industry-card:hover::after {
  opacity: 1;
}

.industry-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.industry-icon {
  width: 50px; 
  height: 50px; 
  background: linear-gradient(135deg, rgba(48, 130, 210, 0.15), rgba(17, 42, 79, 0.35));
  border: 1px solid rgba(48, 130, 210, 0.25);
  border-radius: var(--radius-md);
  display: flex; 
  align-items: center; 
  justify-content: center;
  font-size: 1.3rem;
  color: var(--accent);
  margin: 0;
  transition: all 0.4s ease;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.industry-card:hover .industry-icon { 
  color: #fff; 
  background: linear-gradient(135deg, #3082D2, #1B5B9F);
  border-color: #3082D2;
  transform: scale(1.08) rotate(3deg);
  box-shadow: 0 0 20px rgba(48, 130, 210, 0.55);
}

.industry-badge-num {
  font-family: var(--font-mono, 'Space Grotesk', monospace);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.04);
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.industry-card:hover .industry-badge-num {
  color: var(--accent);
  border-color: rgba(48, 130, 210, 0.35);
}

.industry-card h3 {
  font-size: 1.05rem;
  font-weight: 600;
  color: #fff;
  margin: 0 0 8px;
  line-height: 1.35;
}

.industry-card p {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.65;
  margin: 0 0 16px;
  flex-grow: 1;
}

.industry-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.45);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 500;
}

.industry-card-footer i {
  font-size: 0.82rem;
  color: var(--accent);
  transition: transform 0.3s ease;
}

.industry-card:hover .industry-card-footer i {
  transform: translateX(4px);
}
/* ============================================================
   PROJECTS / PORTFOLIO
   ============================================================ */
.project-filters { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 36px; }

.filter-btn {
  padding: 8px 18px;
  border-radius: 20px;
  font-size: 0.82rem;
  font-weight: 500;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: var(--transition-fast);
  font-family: var(--font-primary);
}

.filter-btn:hover, .filter-btn.active {
  background: var(--accent);
  color: #ffffff;
  border-color: var(--accent);
  font-weight: 600;
}


.project-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  transition: var(--transition);
}

.project-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--border-light); }

.project-img {
  position: relative;
  aspect-ratio: 16/10;
  overflow: hidden;
  background: var(--surface-2);
}

.project-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }

.project-card:hover .project-img img { transform: scale(1.06); }

.project-img .project-category {
  position: absolute;
  top: 16px; left: 16px;
}

.project-body { padding: 24px; }

.project-body h3 { font-size: 1rem; margin-bottom: 8px; color: var(--text-white); }

.project-body p { font-size: 0.85rem; color: var(--text-muted); line-height: 1.6; margin-bottom: 16px; }

.project-meta { display: flex; align-items: center; justify-content: space-between; }

.project-tech { display: flex; gap: 6px; flex-wrap: wrap; }

.tech-tag {
  font-size: 0.7rem;
  padding: 2px 8px;
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--text-muted);
  border: 1px solid var(--border);
}
/* ============================================================
   STATISTICS / COUNTERS
   ============================================================ */
.stats-section {
  background: linear-gradient(135deg, var(--secondary) 0%, var(--dark) 100%);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}

.stats-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 0%, rgba(48, 130, 210, 0.1), transparent 60%);
}

.stat-card {
  text-align: center;
  padding: 26px 16px;
  border-right: 1px solid var(--border);
}

.stat-card:last-child { border-right: none; }

.stat-icon {
  font-size: 1.1rem;
  color: var(--accent-light);
  display: block;
  margin-bottom: 8px;
}

.stat-number {
  font-size: clamp(1.45rem, 2.2vw, 2rem);
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
  display: block;
  font-variant-numeric: tabular-nums;
}

.stat-label {
  font-size: 0.74rem;
  color: var(--text-muted);
  font-weight: 400;
  display: block;
  margin-top: 5px;
  letter-spacing: 0.03em;
}
/* ============================================================
   TESTIMONIALS
   ============================================================ */
.testimonial-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px;
  position: relative;
}

.testimonial-card::before {
  content: '\201C';
  font-size: 5rem;
  color: var(--accent);
  opacity: 0.2;
  position: absolute;
  top: 16px; left: 24px;
  font-family: Georgia, serif;
  line-height: 1;
}

.testimonial-stars { color: var(--accent); font-size: 0.85rem; margin-bottom: 16px; }

.testimonial-text {
  color: var(--text);
  font-size: 0.93rem;
  line-height: 1.8;
  margin-bottom: 24px;
  position: relative;
  z-index: 1;
}

.testimonial-author { display: flex; align-items: center; gap: 14px; }

.testimonial-avatar {
  width: 46px; height: 46px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--surface-2);
  border: 2px solid var(--border-accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
  color: var(--accent);
  font-weight: 600;
  flex-shrink: 0;
  overflow: hidden;
}

.testimonial-author-name { font-weight: 600; font-size: 0.9rem; color: var(--text-white); display: block; }

.testimonial-author-role { font-size: 0.78rem; color: var(--text-muted); display: block; }
/* Swiper custom */
.swiper-pagination-bullet { background: var(--border-light); }

.swiper-pagination-bullet-active { background: var(--accent); }

.swiper-button-next, .swiper-button-prev {
  color: var(--accent) !important;
  width: 44px !important; height: 44px !important;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 50%;
}

.swiper-button-next::after, .swiper-button-prev::after { font-size: 0.85rem !important; }
/* ============================================================
   TEAM & ORGANIZATIONAL LEADERSHIP TREE
   ============================================================ */
.team-card {
  background: linear-gradient(145deg, rgba(20, 26, 44, 0.8), rgba(11, 15, 26, 0.9));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  text-align: center;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.team-card:hover { 
  border-color: rgba(10, 163, 224, 0.5); 
  transform: translateY(-6px); 
  box-shadow: 0 16px 36px -10px rgba(0,0,0,0.6), 0 0 24px -6px rgba(10, 163, 224, 0.3);
}

.team-img-wrap {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--surface-2);
}

.team-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }

.team-card:hover .team-img-wrap img { transform: scale(1.06); }

.team-img-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 3rem;
  color: var(--accent);
  background: var(--surface-2);
}

.team-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(7, 10, 19, 0.9) 0%, rgba(7, 10, 19, 0.3) 60%, transparent 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 20px;
}

.team-card:hover .team-overlay { opacity: 1; }

.team-social { display: flex; gap: 10px; }

.team-social a {
  width: 38px; height: 38px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.9rem;
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.team-social a:hover { 
  background: var(--accent); 
  color: #ffffff; 
  border-color: var(--accent);
  transform: scale(1.1);
}

.team-body { padding: 22px 18px; }

.team-name { font-size: 1.05rem; font-weight: 600; color: #fff; margin-bottom: 4px; }

.team-role { font-size: 0.82rem; color: var(--accent); font-weight: 500; }
/* ------------------------------------------------------------
   ORGANIZATIONAL TEAM TREE HIERARCHY
   ------------------------------------------------------------ */
.org-team-tree-container {
  position: relative;
  max-width: 1120px;
  margin: 0 auto;
  padding: 10px 0 20px;
}

.tree-level {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  position: relative;
  z-index: 2;
}

.tree-level-root {
  margin-bottom: 0;
}

.tree-level-directors {
  gap: 60px;
}

.tree-level-leads {
  gap: 30px;
}


.tree-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
/* Tree Cards */
.tree-card {
  background: linear-gradient(145deg, rgba(20, 34, 56, 0.88), rgba(17, 42, 79, 0.95));
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 20px;
  padding: 22px 18px 20px;
  text-align: center;
  width: 260px;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
  box-shadow: 0 16px 36px -12px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.tree-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.tree-card:hover {
  transform: translateY(-8px);
  border-color: rgba(48, 130, 210, 0.6);
  box-shadow: 0 22px 48px -12px rgba(0, 0, 0, 0.75), 0 0 30px -6px rgba(48, 130, 210, 0.35);
}

.tree-card:hover::before {
  opacity: 1;
}
/* Apex (CEO) Card special styling */
.tree-card-apex {
  width: 290px;
  padding: 24px 20px 22px;
  border-color: rgba(48, 130, 210, 0.35);
  background: linear-gradient(145deg, rgba(20, 34, 56, 0.95), rgba(17, 42, 79, 0.98));
  box-shadow: 0 20px 45px -10px rgba(0, 0, 0, 0.7), 0 0 30px -10px rgba(48, 130, 210, 0.25);
}

.tree-card-apex::before {
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.8;
}

.tree-card-apex:hover {
  border-color: var(--accent);
  box-shadow: 0 26px 55px -10px rgba(0, 0, 0, 0.8), 0 0 40px -6px rgba(48, 130, 210, 0.4);
}
/* Tree Badges & Tags */
.tree-role-tag {
  display: inline-block;
  font-family: var(--font-mono, 'Space Grotesk', monospace);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-light);
  background: rgba(48, 130, 210, 0.12);
  border: 1px solid rgba(48, 130, 210, 0.25);
  padding: 4px 12px;
  border-radius: 20px;
  margin-bottom: 18px;
}

.tree-role-tag.tech {
  color: #549eeb;
  background: rgba(84, 158, 235, 0.12);
  border-color: rgba(84, 158, 235, 0.3);
}

.tree-role-tag.security {
  color: #ff7b72;
  background: rgba(255, 87, 87, 0.08);
  border-color: rgba(255, 87, 87, 0.25);
}
/* Tree Avatar Wrap */
.tree-avatar-wrap {
  width: 104px;
  height: 104px;
  margin: 0 auto 16px;
  border-radius: 50%;
  padding: 3.5px;
  background: linear-gradient(135deg, var(--accent), #1F67B0);
  position: relative;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
  transition: transform 0.4s ease;
}

.tree-card-apex .tree-avatar-wrap {
  width: 114px;
  height: 114px;
  padding: 4px;
  background: linear-gradient(135deg, var(--accent), #549eeb);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5), 0 0 20px rgba(48, 130, 210, 0.35);
}

.tree-card:hover .tree-avatar-wrap {
  transform: scale(1.06);
}

.tree-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  background: var(--surface-2);
  display: block;
}

.tree-avatar-placeholder {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  color: var(--accent);
}
/* Typography inside card */
.tree-member-name {
  font-size: 1.15rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 5px;
  line-height: 1.3;
}

.tree-card-apex .tree-member-name {
  font-size: 1.25rem;
}

.tree-member-desig {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--accent-light);
  margin-bottom: 0;
  line-height: 1.4;
}

.tree-member-meta {
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.55;
  margin: 0 0 16px;
  min-height: 38px;
}
/* Tree Social & Connect Actions */
.tree-social-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.tree-btn-connect {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.75);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  transition: all 0.3s ease;
  text-decoration: none;
}

.tree-btn-connect:hover {
  background: var(--accent);
  color: #ffffff;
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(48, 130, 210, 0.35);
}
/* ------------------------------------------------------------
   TREE BRANCHES & CONNECTORS (DESKTOP)
   ------------------------------------------------------------ */
.tree-stem-down {
  width: 2px;
  height: 36px;
  background: linear-gradient(to bottom, rgba(10, 163, 224, 0.9), rgba(10, 163, 224, 0.4));
  margin: 0 auto;
  position: relative;
}

.tree-stem-down::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #0aa3e0;
  box-shadow: 0 0 8px #0aa3e0;
}


.tree-stem-up {
  width: 2px;
  height: 36px;
  background: linear-gradient(to bottom, rgba(10, 163, 224, 0.4), rgba(10, 163, 224, 0.9));
  margin: 0 auto;
  position: relative;
}

.tree-stem-up::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #0aa3e0;
  box-shadow: 0 0 8px #0aa3e0;
}


.tree-connector-row {
  position: relative;
  height: 36px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.tree-crossbar {
  position: relative;
  height: 2px;
  background: linear-gradient(90deg, rgba(10, 163, 224, 0.05), rgba(10, 163, 224, 0.8) 15%, rgba(10, 163, 224, 0.8) 85%, rgba(10, 163, 224, 0.05));
}

.tree-connector-2col .tree-crossbar {
  width: 360px;
}

.tree-connector-3col .tree-crossbar {
  width: 660px;
}

.tree-crossbar::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #0aa3e0;
  box-shadow: 0 0 10px #0aa3e0;
}
/* ============================================================
   BLOG CARDS
   ============================================================ */
.blog-card {
  background: var(--gradient-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: var(--transition);
  height: 100%;
  display: flex;
  flex-direction: column;
}

.blog-card:hover { border-color: var(--border-light); transform: translateY(-4px); box-shadow: var(--shadow-lg); }

.blog-img {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--surface-2);
}

.blog-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }

.blog-card:hover .blog-img img { transform: scale(1.05); }

.blog-category-badge {
  position: absolute;
  top: 14px; left: 14px;
}

.blog-body {
  padding: 24px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.blog-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
  font-size: 0.78rem;
  color: var(--text-subtle);
}

.blog-meta i { color: var(--accent); }

.blog-body h3 {
  font-size: 1rem;
  margin-bottom: 10px;
  color: var(--text-white);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-body h3 a { color: inherit; }

.blog-body h3 a:hover { color: var(--accent-bright); }

.blog-excerpt {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.7;
  margin-bottom: 20px;
  flex-grow: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* ============================================================
   FINAL CTA
   ============================================================ */
.cta-section {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #1A1C20, #112A4F);
}

.cta-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(48, 130, 210, 0.12), transparent 70%);
}

.cta-section .cta-content { position: relative; z-index: 1; }

.cta-title {
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 700;
  color: var(--text-white);
  margin-bottom: 16px;
}
/* ============================================================
   CORPORATE EXCELLENCE
   ============================================================ */
.excellence-item {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 24px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--surface);
  transition: var(--transition);
}

.excellence-item:hover { border-color: var(--border-accent); }

.excellence-icon {
  width: 48px; height: 48px;
  background: var(--accent-glow);
  border: 1px solid var(--border-accent);
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem;
  color: var(--accent);
  flex-shrink: 0;
}

.excellence-item h3 { font-size: 0.95rem; margin-bottom: 6px; }

.excellence-item p { font-size: 0.85rem; margin: 0; }
/* ============================================================
   TECH CAPABILITIES (MODERN ENTERPRISE STACK)
   ============================================================ */
.tech-caps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 24px;
}

.tech-capability-card {
  background: linear-gradient(145deg, rgba(20, 34, 56, 0.92), rgba(11, 22, 40, 0.97));
  border: 1px solid rgba(48, 130, 210, 0.25);
  border-radius: var(--radius-lg);
  padding: 30px 26px 24px;
  text-align: left !important;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.tech-capability-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; width: 4px; height: 100%;
  background: linear-gradient(to bottom, var(--accent), #0aa3e0);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.tech-capability-card:hover {
  border-color: rgba(48, 130, 210, 0.6);
  transform: translateY(-6px);
  box-shadow: 0 20px 42px -15px rgba(0, 0, 0, 0.75), 0 0 26px -8px rgba(48, 130, 210, 0.35);
}

.tech-capability-card:hover::before {
  opacity: 1;
}

.tech-card-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

.tech-halo-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(48, 130, 210, 0.2), rgba(17, 42, 79, 0.3));
  border: 1px solid rgba(48, 130, 210, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: var(--accent);
  flex-shrink: 0;
  transition: all 0.4s ease;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}

.tech-capability-card:hover .tech-halo-icon {
  background: linear-gradient(135deg, #3082D2, #206AB6);
  color: #fff;
  transform: scale(1.06) rotate(-3deg);
  box-shadow: 0 0 22px rgba(48, 130, 210, 0.5);
}

.tech-card-header-text h3 {
  font-size: 1.1rem;
  font-weight: 600;
  color: #fff;
  margin: 0 0 3px;
  line-height: 1.3;
}

.tech-category-pill {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent-light);
}

.tech-card-desc {
  font-size: 0.83rem;
  color: var(--text-muted);
  line-height: 1.65;
  margin-bottom: 20px;
  flex-grow: 1;
}

.tech-badges-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

.tech-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 20px;
  font-size: 0.74rem;
  font-weight: 500;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.82);
  transition: all 0.25s ease;
}

.tech-chip i {
  font-size: 0.75rem;
  color: var(--accent);
}

.tech-capability-card:hover .tech-chip {
  background: rgba(10, 163, 224, 0.08);
  border-color: rgba(10, 163, 224, 0.22);
  color: #fff;
}

.tech-chip:hover {
  background: rgba(10, 163, 224, 0.2) !important;
  border-color: var(--accent) !important;
  transform: translateY(-2px);
}

.tech-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.72rem;
  color: var(--text-subtle);
}

.tech-readiness {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #00e5a3;
  font-weight: 500;
}

.tech-readiness .pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #00e5a3;
  box-shadow: 0 0 8px #00e5a3;
  animation: pulseGlow 2s infinite ease-in-out;
}
/* Backward compatibility for generic tech-grid */
.tech-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.tech-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px 16px;
  text-align: center;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}

.tech-item::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--accent-glow), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.tech-item:hover { border-color: var(--border-accent); }

.tech-item:hover::before { opacity: 1; }

.tech-item i {
  font-size: 1.6rem;
  color: var(--accent);
  display: block;
  margin-bottom: 10px;
}

.tech-item span {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-weight: 500;
  display: block;
}
/* ============================================================
   CONTACT SECTION
   ============================================================ */
.contact-info-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-bottom: 16px;
}

.contact-info-icon {
  width: 44px; height: 44px;
  background: var(--accent-glow);
  border: 1px solid var(--border-accent);
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  color: var(--accent);
  flex-shrink: 0;
}

.contact-info-item h3 {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-subtle);
  margin-bottom: 4px;
}

.contact-info-item p { font-size: 0.9rem; color: var(--text); margin: 0; }
/* ============================================================
   BREADCRUMB
   ============================================================ */
.qt-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.qt-breadcrumb a { color: var(--text-muted); }

.qt-breadcrumb a:hover { color: var(--accent-bright); }

.qt-breadcrumb .separator { color: var(--text-subtle); }

.qt-breadcrumb .current { color: var(--accent-light); font-weight: 500; }
/* ============================================================
   PAGE HERO (Inner Pages)
   ============================================================ */
.page-hero {
  padding: 160px 0 80px;
  background: var(--gradient-hero);
  position: relative;
  overflow: hidden;
}

.page-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(48,130,210,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(48,130,210,0.06) 1px, transparent 1px);
  background-size: 60px 60px;
}

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

.page-hero h1 { margin-bottom: 16px; }
/* ============================================================
   FOOTER
   ============================================================ */
.qt-footer {
  background: var(--dark);
  border-top: 1px solid var(--border);
  padding-top: 72px;
}

.footer-brand .logo {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text-white);
  margin-bottom: 16px;
  display: block;
}

.footer-brand .logo span { color: var(--accent); }

.footer-about {
  font-size: 0.87rem;
  color: var(--text-muted);
  line-height: 1.8;
  margin-bottom: 20px;
  max-width: 280px;
}

.footer-social { display: flex; gap: 10px; }

.footer-social a {
  width: 36px; height: 36px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted);
  font-size: 0.85rem;
  transition: var(--transition-fast);
}

.footer-social a:hover { background: var(--accent); color: #ffffff; border-color: var(--accent); }


.footer-heading {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-white);
  margin-bottom: 20px;
}

.footer-links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }

.footer-links li a {
  font-size: 0.87rem;
  color: var(--text-muted);
  transition: var(--transition-fast);
  display: flex; align-items: center; gap: 8px;
}

.footer-links li a::before {
  content: '';
  width: 0; height: 1px;
  background: var(--accent);
  transition: width 0.25s ease;
}

.footer-links li a:hover { color: var(--accent-bright); }

.footer-links li a:hover::before { width: 12px; }


.footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
  font-size: 0.87rem;
}

.footer-contact-item i { color: var(--accent); margin-top: 3px; font-size: 0.9rem; }

.footer-contact-item a { color: var(--text-muted); }

.footer-contact-item a:hover { color: var(--accent-bright); }

.footer-contact-item span { color: var(--text-muted); }


.footer-bottom {
  margin-top: 48px;
  padding: 20px 0;
  border-top: 1px solid var(--border);
}

.footer-bottom p { font-size: 0.82rem; color: var(--text-subtle); margin: 0; }

.footer-bottom a { color: var(--text-muted); }

.footer-bottom a:hover { color: var(--accent-bright); }
/* Newsletter */
.newsletter-form { display: flex; gap: 8px; margin-top: 16px; }

.newsletter-input {
  flex: 1;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--font-primary);
  font-size: 0.85rem;
  padding: 10px 14px;
  outline: none;
}

.newsletter-input::placeholder { color: var(--text-subtle); }

.newsletter-input:focus { border-color: var(--accent); }

.newsletter-btn {
  padding: 10px 16px;
  background: var(--accent);
  color: #ffffff;
  border: none;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  white-space: nowrap;
  transition: var(--transition-fast);
  font-family: var(--font-primary);
  box-shadow: 0 4px 12px rgba(48, 130, 210, 0.3);
}

.newsletter-btn:hover { background: var(--accent-dark); color: #ffffff; }
/* ============================================================
   BACK TO TOP
   ============================================================ */
.back-to-top {
  position: fixed;
  bottom: 20px; right: 30px;
  width: 44px; height: 44px;
  background: var(--accent);
  color: #ffffff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
  cursor: pointer;
  border: none;
  z-index: 999;
  opacity: 0;
  transform: translateY(20px);
  transition: var(--transition);
  box-shadow: 0 4px 16px rgba(48, 130, 210, 0.4);
}

.back-to-top.visible { opacity: 1; transform: translateY(0); }

.back-to-top:hover { background: var(--accent-dark); color: #ffffff; transform: translateY(-3px); }
/* ============================================================
   FLOATING WHATSAPP
   ============================================================ */
.floating-whatsapp {
  position: fixed;
  bottom: 72px; right: 30px;
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  background: #25d366;
  color: #ffffff;
  border-radius: 50%;
  font-size: 1.6rem;
  text-decoration: none;
  z-index: 998;
  box-shadow: 0 6px 22px rgba(37, 211, 102, 0.45);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease, background-color 0.3s ease;
}

.floating-whatsapp:hover {
  background: #1eb855;
  color: #ffffff;
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 10px 30px rgba(37, 211, 102, 0.6);
}

.floating-whatsapp::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(37, 211, 102, 0.55);
  animation: floatingWhatsappPulse 2.4s ease-out infinite;
}

.floating-whatsapp-label {
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%) translateX(8px);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.floating-whatsapp:hover .floating-whatsapp-label,
.floating-whatsapp:focus-visible .floating-whatsapp-label {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

@keyframes floatingWhatsappPulse {
  0%   { transform: scale(1); opacity: 0.7; }
  70%  { transform: scale(1.35); opacity: 0; }
  100% { transform: scale(1.35); opacity: 0; }
}

@media (max-width: 767px) {
  /* Stacked bottom-right: back-to-top (44px) sits at 16px, WhatsApp (52px)
     sits 12px above it -> 16 + 44 + 12 = 72px. Both stay under the navbar
     (z-index 1050) and above page content. */
  .floating-whatsapp {
    width: 52px; height: 52px;
    font-size: 1.45rem;
    bottom: 72px; right: 16px;
  }
  .floating-whatsapp-label { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .floating-whatsapp::before { animation: none; opacity: 0; }
  .floating-whatsapp { transition: none; }
}
/* ============================================================
   COOKIE NOTICE
   ============================================================ */
.cookie-notice {
  position: fixed;
  bottom: 20px; left: 20px;
  max-width: 380px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px 24px;
  z-index: 9999;
  box-shadow: var(--shadow-lg);
  transform: translateY(100px);
  opacity: 0;
  transition: all 0.4s ease;
}

.cookie-notice.show { transform: translateY(0); opacity: 1; }

.cookie-notice p { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 14px; }
/* ============================================================
   ANIMATIONS (Reveal)
   ============================================================ */
[data-aos] { opacity: 0; transform: translateY(30px); transition: opacity 0.6s ease, transform 0.6s ease; }

[data-aos].aos-animate { opacity: 1; transform: translateY(0); }

[data-aos="fade-left"] { transform: translateX(-30px); }

[data-aos="fade-left"].aos-animate { transform: translateX(0); }

[data-aos="fade-right"] { transform: translateX(30px); }

[data-aos="fade-right"].aos-animate { transform: translateX(0); }

[data-aos="zoom-in"] { transform: scale(0.9); }

[data-aos="zoom-in"].aos-animate { transform: scale(1); }

/* On narrow screens the column is nearly the full viewport width, so a 30px
   horizontal entry offset lands outside the viewport: the About columns were
   visible only as a left/right clipped flash until the reveal finished. Keep
   the vertical motion (which can never leave the box) and drop the sideways
   one below 992px, where the layout has already collapsed to one column. */
@media (max-width: 991px) {
  [data-aos="fade-left"],
  [data-aos="fade-right"] { transform: translateY(30px); }

  [data-aos="fade-left"].aos-animate,
  [data-aos="fade-right"].aos-animate { transform: translateY(0); }
}


.stagger-1 { transition-delay: 0.1s !important; }

.stagger-2 { transition-delay: 0.2s !important; }

.stagger-3 { transition-delay: 0.3s !important; }

.stagger-4 { transition-delay: 0.4s !important; }

.stagger-5 { transition-delay: 0.5s !important; }

.stagger-6 { transition-delay: 0.6s !important; }
/* Key animations */
@keyframes fadeInUp { from { opacity:0; transform:translateY(30px); } to { opacity:1; transform:translateY(0); } }

@keyframes fadeInDown { from { opacity:0; transform:translateY(-20px); } to { opacity:1; transform:translateY(0); } }

@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

@keyframes slideInLeft { from { opacity:0; transform:translateX(-40px); } to { opacity:1; transform:translateX(0); } }

@keyframes slideInRight { from { opacity:0; transform:translateX(40px); } to { opacity:1; transform:translateX(0); } }
/* ============================================================
   UTILITIES
   ============================================================ */
.divider { height: 1px; background: var(--border); margin: 0; }

.gap-8 { gap: 8px; }

.gap-12 { gap: 12px; }

.mt-auto { margin-top: auto; }

img { max-width: 100%; height: auto; }

.img-cover { width: 100%; height: 100%; object-fit: cover; }
/* Highlight line under section title */
.title-underline {
  width: 48px; height: 3px;
  background: var(--accent);
  border-radius: 2px;
  margin: 16px 0 24px;
}

.title-underline.center { margin: 16px auto 24px; }
/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1200px) {
  .industry-grid { grid-template-columns: repeat(3, 1fr); }
  .tech-caps-grid { grid-template-columns: repeat(2, 1fr); }
  .tree-card { width: 270px; padding: 24px 18px; }
  .tree-card-apex { width: 320px; }
  .tree-connector-2col .tree-crossbar { width: 330px; }
  .tree-connector-3col .tree-crossbar { width: 590px; }
}


@media (max-width: 991px) {
  

.hero-visual { display: none; }
  .industry-grid { grid-template-columns: repeat(2, 1fr); }
  .tech-caps-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-card { border-right: none; border-bottom: 1px solid var(--border); }
  .stat-card:last-child { border-bottom: none; }
  .about-preview .about-badge { bottom: -10px; right: -10px; }

  /* Tree mobile/tablet connected vertical timeline */
  .tree-connector-row { display: none; }
  .tree-stem-up, .tree-stem-down { display: none; }
  .tree-level { 
    flex-direction: column; 
    align-items: center; 
    gap: 20px; 
    margin-bottom: 20px; 
  }
  .tree-level-root, .tree-level-directors, .tree-level-leads { gap: 20px; }
  .tree-node { width: 100%; max-width: 380px; }
  .tree-card, .tree-card-apex { width: 100%; max-width: 380px; }
  .tree-node:not(:last-child)::after {
    content: '';
    width: 2px;
    height: 20px;
    background: linear-gradient(to bottom, #0aa3e0, rgba(10, 163, 224, 0.2));
    margin: 0 auto;
    display: block;
  }
}


@media (max-width: 767px) {
  h1 { font-size: 2.1rem; }
  h2 { font-size: 1.65rem; }
  .industry-grid { grid-template-columns: 1fr; }
  .tech-caps-grid { grid-template-columns: 1fr; }
  .why-grid { grid-template-columns: 1fr; }
  .hero-title { font-size: 2.2rem; }
  .hero-cta { flex-direction: column; align-items: flex-start; }
  .footer-brand .footer-about { max-width: 100%; }
  .cookie-notice { left: 10px; right: 10px; max-width: none; }
  .newsletter-form { flex-direction: column; }
  .project-filters { justify-content: center; }
  .back-to-top { width: 44px; height: 44px; bottom: 16px; right: 16px; }
}


@media (max-width: 480px) {
  .hero-title { font-size: 1.9rem; }
  .qt-card { padding: 24px 20px; }
  .tree-card, .tree-card-apex { padding: 20px 16px; border-radius: 18px; }
  .tree-avatar-wrap { width: 90px; height: 90px; }
  .tree-card-apex .tree-avatar-wrap { width: 98px; height: 98px; }
}


@media (min-width: 1400px) {
  .hero-tech-orb { width: 500px; height: 500px; }
}
/* ============================================================
   CERTIFICATION STRIP — About Us
   ============================================================ */
.cert-strip-card {
  display: flex;
  align-items: center;
  gap: 22px;
  background: linear-gradient(145deg, rgba(31, 46, 71, 0.95), rgba(17, 32, 56, 0.98));
  border: 1px solid rgba(84, 158, 235, 0.35);
  border-radius: 18px;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.45), 0 0 22px -6px rgba(48, 130, 210, 0.28);
  padding: 28px 26px;
  height: 100%;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s ease, box-shadow 0.3s ease;
}

.cert-strip-card:hover {
  transform: translateY(-4px);
  border-color: rgba(98, 165, 255, 0.55);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5), 0 0 30px -4px rgba(48, 130, 210, 0.45);
}

.cert-strip-logo {
  width: 74px;
  height: 74px;
  object-fit: contain;
  flex-shrink: 0;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.5));
}

.cert-strip-icon {
  width: 74px;
  height: 74px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.1rem;
  flex-shrink: 0;
  background: rgba(48, 130, 210, 0.14);
  border: 1px solid rgba(84, 158, 235, 0.35);
  color: var(--accent-light);
}

.cert-strip-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-white);
  margin: 0 0 4px;
  line-height: 1.3;
}

.cert-strip-text {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin: 0 0 10px;
  line-height: 1.5;
}

.cert-strip-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #4ade80;
  background: rgba(74, 222, 128, 0.1);
  border: 1px solid rgba(74, 222, 128, 0.3);
  border-radius: 999px;
  padding: 4px 12px;
}

@media (max-width: 575px) {
  .cert-strip-card { flex-direction: column; align-items: flex-start; gap: 18px; padding: 24px 20px; }
}
/* ============================================================
   CARD HIGHLIGHTS — cards stand out from the rest of the page
   (brighter surface + accent border + soft blue glow)
   ============================================================ */
.qt-card,
.service-card,
.service-card-img,
.blog-card,
.project-card,
.team-card,
.testimonial-card,
.industry-card,
.tech-capability-card,
.about-info-card,
.tree-card,
.hero-floating-card,
.stat-card {
  background: linear-gradient(145deg, rgba(31, 46, 71, 0.95), rgba(17, 32, 56, 0.98)) !important;
  border: 1px solid rgba(84, 158, 235, 0.35) !important;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.45), 0 0 22px -6px rgba(48, 130, 210, 0.28);
}


#services .service-card {
  background: linear-gradient(145deg, rgba(31, 46, 71, 0.95), rgba(17, 32, 56, 0.98));
  border: 1px solid rgba(84, 158, 235, 0.35);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.45), 0 0 22px -6px rgba(48, 130, 210, 0.28);
}
/* Hover par glow aur strong */
.qt-card:hover,
.service-card:hover,
.blog-card:hover,
.project-card:hover,
.team-card:hover,
.testimonial-card:hover,
.industry-card:hover,
.tech-capability-card:hover,
.about-info-card:hover,
.tree-card:hover,
#services .service-card:hover {
  border-color: rgba(98, 165, 255, 0.55) !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5), 0 0 30px -4px rgba(48, 130, 210, 0.45);
}


.stat-card {
  border-radius: var(--radius-lg);
}

.stat-card:hover {
  border-color: rgba(98, 165, 255, 0.55);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5), 0 0 30px -4px rgba(48, 130, 210, 0.45);
}
/* Bada ghost number top-right */
#services .service-card .service-num {
  position: absolute;
  top: 16px;
  right: 20px;
  font-size: 2.6rem;
  font-weight: 800;
  font-family: var(--font-mono, 'Poppins', monospace);
  color: rgba(84, 158, 235, 0.16);
  letter-spacing: 0;
  margin: 0;
  line-height: 1;
  transition: color 0.3s ease;
}

#services .service-card:hover .service-num {
  color: rgba(98, 165, 255, 0.42);
}
/* Gradient icon tile with glow */
#services .service-card .service-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 52px!important;
  height: 52px !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, #3082D2, #1B5B9F) !important;
  border: 1px solid rgba(120, 170, 235, 0.45) !important;
  color: #ffffff !important;
  font-size: 1.35rem !important;
  margin-bottom: 18px !important;
  box-shadow: 0 8px 20px -6px rgba(48, 130, 210, 0.55);
}

#services .service-card .service-icon i {
  display: flex;
  align-items: center;
  line-height: 1;
}
/* Explore Solution: pill button */
#services .service-card .service-link {
  align-self: flex-start;
  padding: 9px 18px;
  border-radius: 999px;
  background: rgba(48, 130, 210, 0.12);
  border: 1px solid rgba(84, 158, 235, 0.35);
  font-size: 0.8rem;
  gap: 8px;
}

#services .service-card .service-link i {
  transition: transform 0.3s ease;
}

#services .service-card .service-link:hover {
  background: var(--accent);
  color: #ffffff;
  border-color: var(--accent);
  box-shadow: 0 8px 20px -6px rgba(48, 130, 210, 0.6);
}

#services .service-card .service-link:hover i {
  transform: translateX(3px);
}
/* Top shine line — hamesha halki, hover par poori */
#services .service-card::after {
  height: 3px;
  background: linear-gradient(90deg, transparent, rgba(98, 165, 255, 0.85), transparent);
  opacity: 0.35;
  transform: scaleX(0.35);
  transform-origin: left;
}

#services .service-card:hover::after {
  transform: scaleX(1);
  opacity: 1;
}
/* ============================================================
   SERVICES PAGE CARDS (#services-list) — redesigned enterprise cards
   ============================================================ */
#services-list .service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 28px 26px 20px;
  border-radius: 22px;
  overflow: hidden;
  background:
    radial-gradient(420px 220px at 85% -10%, rgba(48,130,210,0.18), transparent 60%),
    linear-gradient(160deg, rgba(38,58,94,0.97) 0%, rgba(20,36,64,0.99) 55%, rgba(13,24,45,1) 100%);
  border: 1px solid rgba(84,158,235,0.26);
  box-shadow: 0 14px 38px rgba(2,8,18,0.45), inset 0 1px 0 rgba(255,255,255,0.05);
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

#services-list .service-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 24px;
  right: 24px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #3082D2, transparent);
  opacity: 0.6;
}

#services-list .service-card::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, #3082D2, transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

#services-list .service-card:hover {
  transform: translateY(-6px);
  border-color: rgba(98,165,255,0.55);
  box-shadow: 0 22px 50px rgba(2,8,18,0.55), 0 0 40px -8px rgba(48,130,210,0.5);
}

#services-list .service-card:hover::after { opacity: 1; }
/* Top row: icon tile + ghost number */
#services-list .service-card .service-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

#services-list .service-card .service-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 54px !important;
  height: 54px !important;
  flex-shrink: 0;
  border-radius: 16px !important;
  background: linear-gradient(135deg, #3082D2, #1B5B9F) !important;
  border: 1px solid rgba(120,170,235,0.5) !important;
  color: #ffffff !important;
  font-size: 1.4rem !important;
  margin-bottom: 0 !important;
  box-shadow: 0 8px 22px -6px rgba(48,130,210,0.6);
}

#services-list .service-card .service-icon i {
  display: flex;
  align-items: center;
  line-height: 1;
}

#services-list .service-card .service-num {
  font-family: var(--font-mono, 'Poppins', monospace);
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1;
  color: rgba(98,165,255,0.14);
  margin: 0;
}
/* Feature highlights list (dashed divider) */
#services-list .service-card .service-feature-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
  border-top: 1px dashed rgba(120,170,235,0.22);
  margin-top: 16px;
  padding-top: 16px;
  margin-bottom: 20px;
}

#services-list .service-card .service-feature {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 0.83rem;
  line-height: 1.55;
  color: rgba(194,208,224,0.9);
}

#services-list .service-card .service-feature i {
  color: #38EF7D;
  font-size: 0.92rem;
  margin-top: 2px;
  flex-shrink: 0;
}
/* CTA row pinned to bottom */
#services-list .service-card .service-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  border-top: 1px solid rgba(120,170,235,0.16);
  padding-top: 14px;
  margin-top: auto !important;
  color: #7FB6F5;
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

#services-list .service-card .service-link .service-link-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(48,130,210,0.14);
  border: 1px solid rgba(84,158,235,0.35);
  color: #7FB6F5;
  transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

#services-list .service-card .service-link:hover {
  color: #ffffff;
}

#services-list .service-card .service-link:hover .service-link-arrow {
  background: var(--accent);
  border-color: var(--accent);
  color: #ffffff;
  transform: translateX(3px);
}
/* ============================================================
   CONTACT PAGE — EMAIL / TEXT WRAP FIX (no crop on small screens)
   ============================================================ */
.contact-info-item > div:last-child {
  min-width: 0;
  flex: 1 1 auto;
}

.contact-info-item p,
.contact-info-item p a {
  overflow-wrap: anywhere;
  word-break: break-word;
}
/* ============================================================
   HERO + NAVBAR MOBILE REFINEMENTS
   ============================================================ */
@media (max-width: 991px) {
  /* Giant title scales down and wraps safely so "Transformation" never overflows */
  .nm-giant-word {
    font-size: clamp(38px, 11vw, 64px);
    overflow-wrap: anywhere;
  }
  .nm-hero-star {
    font-size: clamp(1.6rem, 4.5vw, 2.4rem);
  }
}


@media (max-width: 575px) {
  .hero-section {
    padding-bottom: 40px;
  }
  .nm-giant-word {
    font-size: clamp(38px, 11vw, 56px);
  }
  .nm-giant-row-1 {
    gap: 12px;
  }
  .nm-hero-star {
    display: none;
  }
  .nm-hero-bottom-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }
  .nm-hero-plybtn {
    align-self: flex-start;
  }
  .nm-hero-desc {
    max-width: 100%;
  }
  .hero-scroll {
    bottom: 16px;
  }
}
/* 3. Hero heading — the single loudest element on the page.
   Sized down at the user's request: 8.2vw/104px read as overpowering
   against the rest of the page. 5.6vw/72px keeps it dominant while
   letting the supporting copy hold its own. */
.nm-hero-giant-block {
  margin-bottom: 24px;
  font-weight: inherit;
  animation: nmHeroReveal 0.6s ease-out 0.3s both;
}

.nm-giant-row-1,
.nm-giant-row-2 {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.1em;
}

.nm-giant-row-1 .nm-giant-word,
.nm-giant-row-2 .nm-giant-word {
  min-width: 0;
  font-size: clamp(28px, 5.6vw, 72px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 0.98;
  overflow-wrap: break-word;
}

.nm-giant-row-1 .nm-giant-word {
  color: #f8fafc;
  text-shadow: 0 4px 40px rgba(0, 0, 0, 0.4);
}

.nm-giant-row-2 .nm-giant-word {
  background: linear-gradient(135deg, #3b82f6, #60a5fa);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 4px 40px rgba(37, 99, 235, 0.35));
}

.nm-giant-row-2 {
  margin-top: -0.02em;
}


.nm-hero-grid {
  --bs-gutter-x: 0;
  --bs-gutter-y: 0;
  position: relative;
  align-items: center;
}
/* Reserve the social wheel's footprint. Measured from the rendered page:
   the clickable icon column starts at viewport-width-128 at <=1200px (the
   wheel is scaled 0.82 there) and at viewport-width-160 above that.
   Below 1200px the stage is viewport-width minus the gutters, so the panel
   edge lands much closer to the icons and needs the larger reserve. */
@media (min-width: 992px) and (max-width: 1199px) {
  .nm-hero-diag { --nm-rail: 146px; }
}

@media (min-width: 1200px) {
  .nm-hero-diag { --nm-rail: 130px; }
}
/* Matches the breakpoint where the circular wheel is switched off
   (see .nm-hero-1-social-position at max-width: 991px), so the two
   presentations never appear at the same time. */
@media (max-width: 991px) {
  .nm-hero-1-social-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid rgba(148, 197, 255, 0.16);
  }
  .nm-hero-1-social-row-label {
    flex: 0 0 auto;
    font-family: 'Poppins', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(219, 234, 254, 0.72);
  }
  .nm-hero-1-social-row-links {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
  }
  .nm-hero-1-social-row-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 44px keeps every target at the recommended touch minimum. */
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-size: 17px;
    color: #dbeafe;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(125, 211, 252, 0.34);
    transition: background 0.25s ease, border-color 0.25s ease,
                color 0.25s ease, transform 0.25s ease;
  }
  .nm-hero-1-social-row-links a:hover,
  .nm-hero-1-social-row-links a:focus-visible {
    background: rgba(125, 211, 252, 0.2);
    border-color: rgba(125, 211, 252, 0.75);
    color: #fff;
    transform: translateY(-2px);
  }
  .nm-hero-1-social-row-links .soc-wa:hover { color: #25d366; }
  .nm-hero-1-social-row-links .soc-tw:hover { color: #e7e9ea; }
  .nm-hero-1-social-row-links .soc-li:hover { color: #0a66c2; }
  .nm-hero-1-social-row-links .soc-ig:hover { color: #e1306c; }
  .nm-hero-1-social-row-links .soc-fb:hover { color: #1877f2; }
}


@media (max-width: 767px) {
  /* Hug the content instead of pinning to the viewport. The fixed nav is
     58px tall, so this leaves a comfortable gap under it. */
  .hero-section {
    min-height: auto;
    align-items: flex-start;
    padding-top: 0;
    padding-bottom: 0;
  }
  .nm-hero-diag {
    padding-top: 82px;
    padding-bottom: 46px;
  }
  /* Keep the panel clear of the nav's drop shadow. */
  .nm-hero-panel--copy {
    padding: 24px 20px 26px 18px;
  }
  .nm-giant-row-1 .nm-giant-word,
  .nm-giant-row-2 .nm-giant-word {
    font-size: clamp(30px, 8.6vw, 44px);
  }
  .nm-hero-panel--copy .nm-hero-sub-title { margin-bottom: 12px; }
  .nm-hero-panel--copy .nm-hero-award-tag { margin-bottom: 16px; }
  .nm-hero-panel--copy .nm-hero-giant-block { margin-bottom: 18px; }
  .nm-hero-panel--copy .nm-hero-desc { margin-bottom: 22px; }
  /* Buttons go full width so both targets clear 44px on a phone. */
  .nm-hero-cta-row {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .nm-hero-cta-row .nm-hero-plybtn,
  .nm-hero-cta-row .nm-hero-agency-btn {
    width: 100%;
    justify-content: center;
  }
  .nm-hero-1-social-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-top: 20px;
  }
}


@media (max-width: 374px) {
  .nm-hero-diag { padding-top: 74px; padding-bottom: 40px; }
  .nm-hero-panel--copy { padding: 20px 16px 22px 14px; }
  .nm-giant-row-1 .nm-giant-word,
  .nm-giant-row-2 .nm-giant-word { font-size: 29px; }
  .nm-hero-panel--copy .nm-hero-desc { font-size: 14px; margin-bottom: 20px; }
  /* Tighten the gap so five 44px targets still fit on one row. */
  .nm-hero-1-social-row-links { gap: 7px; }
  .nm-hero-1-social-row-links a { font-size: 16px; }
}
/* ============================================================
   PROCESS - service delivery timeline
   ------------------------------------------------------------
   Two-column band: a display "Process." headline plus the
   service-specific intro on the left (~45%), and a 4-step
   vertical timeline on the right. Every value is derived from an
   existing token, so the block themes itself - the light overlay
   swaps the tokens, not this CSS.

   Markup contract:
     section.qt-process-section > .container > .qt-process-grid
       .qt-process-intro  > h2.qt-process-title + p.qt-process-lede
       ol.qt-process-steps > li.qt-process-step
                               span.qt-process-dot
                               h3.qt-process-step-title
                               p.qt-process-step-desc

   Steps are authored per service; the visual is identical
   everywhere, so only the copy inside .qt-process-steps changes.
   ============================================================ */
.qt-process-section {
  /* Single place to retune the whole timeline. */
  --qt-p-dot: 14px;          /* marker diameter + rail centring unit */
  --qt-p-dot-top: 0.3rem;    /* marker offset from the step's top edge */
  --qt-p-indent: 34px;       /* text inset, clears the rail */
  --qt-p-step-gap: 2.4rem;   /* vertical rhythm between steps */
  --qt-p-rail: 2px;

  background: var(--primary);
  border-top: 1px solid var(--border);
}


.qt-process-grid {
  display: grid;
  /* 45/55 rather than Bootstrap twelfths - the spec asks for ~45%. */
  grid-template-columns: 45fr 55fr;
  column-gap: 3.5rem;
  align-items: start;
}
/* Only the full stop takes the accent, so the word still reads as one
   token while the dot echoes the timeline running beside it. */
.qt-process-title .qt-process-period { color: var(--accent); }


.qt-process-lede {
  color: var(--text-muted);
  font-size: 0.98rem;
  line-height: 1.85;
  max-width: 30rem;
  margin: 0;
}
/* --- right column: the timeline --------------------------------- */
.qt-process-steps {
  list-style: none;
  margin: 0;
  padding: 0;
}


.qt-process-step {
  position: relative;
  padding: 0 0 var(--qt-p-step-gap) var(--qt-p-indent);
}

.qt-process-step:last-child { padding-bottom: 0; }
/* One rail segment per step: it leaves this dot's centre and reaches
   into the next step, ending on the next dot's top edge so the four
   segments read as a single continuous stroke. */
.qt-process-step::before {
  content: '';
  position: absolute;
  left: calc((var(--qt-p-dot) - var(--qt-p-rail)) / 2);
  width: var(--qt-p-rail);
  top: calc(var(--qt-p-dot-top) + var(--qt-p-dot) / 2);
  bottom: calc(-1 * var(--qt-p-dot-top));
  background: var(--accent);
  border-radius: var(--qt-p-rail);
}

.qt-process-step:last-child::before { content: none; }


.qt-process-dot {
  position: absolute;
  left: 0;
  top: var(--qt-p-dot-top);
  width: var(--qt-p-dot);
  height: var(--qt-p-dot);
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-glow);
}
/* The closing step is the hand-off rather than work in flight, so it is
   hollowed out - that is what makes the timeline read as finished. */
.qt-process-step:last-child .qt-process-dot {
  background: var(--surface-2);
  border: 1px solid var(--border-light);
  box-shadow: none;
}


.qt-process-step-title {
  font-size: 1.06rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.005em;
  color: var(--text);
  margin: 0 0 0.45rem;
}


.qt-process-step-desc {
  color: var(--text-muted);
  font-size: 0.93rem;
  font-weight: 400;
  line-height: 1.75;
  max-width: 34rem;
  margin: 0;
}
/* Mobile: stack the intro above the timeline. The steps keep their
   rail and indent, so the dots stay in a single column. */
@media (max-width: 767px) {
  .qt-process-section { --qt-p-step-gap: 1.9rem; }
  .qt-process-grid {
    grid-template-columns: 1fr;
    row-gap: 2.5rem;
  }
  .qt-process-lede { max-width: none; }
}


@media (max-width: 575px) {
  .qt-process-section { --qt-p-dot: 12px; --qt-p-indent: 26px; }
  .qt-process-title { margin-bottom: 1rem; }
  .qt-process-step-desc { max-width: none; }
}
/* ============================================================
   NAVTTC COURSES AT KUST (training service page)
   Three course cards, each opening a Bootstrap modal with the
   case study. Colours come from tokens so the light theme
   repaints the whole block without extra overrides.
   ============================================================ */
.qt-course-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: var(--transition);
}

.qt-course-card:hover {
  border-color: var(--border-accent);
  transform: translateY(-4px);
  box-shadow: 0 18px 40px -18px rgba(42, 117, 191, 0.45);
}

.qt-course-icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: var(--radius);
  background: var(--accent-glow);
  border: 1px solid var(--border-accent);
  color: var(--accent);
  font-size: 1.5rem;
  margin-bottom: 18px;
}

.qt-course-title {
  font-size: 1.12rem;
  margin-bottom: 10px;
}

.qt-course-desc {
  font-size: 0.88rem;
  line-height: 1.78;
  color: var(--text-muted);
  margin-bottom: 22px;
}

.qt-course-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-glow);
  border: 1px solid var(--border-accent);
  border-radius: 999px;
  padding: 5px 12px;
  margin-bottom: 16px;
}

.qt-course-cta { margin-top: auto; justify-content: center; width: 100%; }
/* case-study modal */
.qt-cs-section { margin-bottom: 20px; }

.qt-cs-section:last-child { margin-bottom: 0; }

.qt-cs-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}

.qt-cs-text {
  font-size: 0.9rem;
  line-height: 1.8;
  color: var(--text-muted);
  margin: 0;
}

.qt-cs-list {
  margin: 0;
  padding-left: 20px;
  font-size: 0.9rem;
  line-height: 1.8;
  color: var(--text-muted);
}
/* case-study media (NAVTTC covers) */
.qt-cs-media {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  margin-bottom: 22px;
}

@media (max-width: 575px) {
  .qt-cs-media { border-radius: var(--radius); }
}