/* ============================================================
   QUANTUM TECH SOLUTIONZ — MAIN DESIGN SYSTEM
   Dark Futuristic Enterprise Technology
   ============================================================ */

/* === GOOGLE FONTS ===
   Loaded once via includes/header.php (Poppins 300–800, incl. the
   800 the hero display heading needs). Not re-imported here. */

/* === CSS CUSTOM PROPERTIES === */
:root {
  /* Core Palette */
  --primary:        #1A1C20;
  --secondary:      #112A4F;
  --surface:        #142238;
  --surface-2:      #182C48;
  --accent:         #2A75BF;
  --accent-dark:    #206AB6;
  --accent-light:   #549EEB;
  --accent-bright:  #8EC5FA;
  --accent-glow:    rgba(48, 130, 210, 0.22);
  --dark:           #141619;
  --darker:         #0E1013;
  --navy:           #112A4F;
  --charcoal:       #1A1C20;

  /* Text */
  --text:           #E2E8F0;
  --text-muted:     #94A3B8;
  --text-subtle:    #8B9AB4;
  --text-white:     #FFFFFF;

  /* Borders */
  --border:         rgba(255, 255, 255, 0.08);
  --border-light:   rgba(255, 255, 255, 0.14);
  --border-accent:  rgba(48, 130, 210, 0.35);

  /* Status */
  --success:        #3FB950;
  --warning:        #D29922;
  --danger:         #F85149;
  --info:           #3082D2;

  /* Gradients */
  --gradient-dark:  linear-gradient(135deg, #1A1C20 0%, #112A4F 100%);
  --gradient-hero:  linear-gradient(135deg, #1A1C20 0%, #112A4F 55%, #173B6B 100%);
  --gradient-accent:linear-gradient(135deg, #2A75BF 0%, #1D5CA0 100%);
  --gradient-card:  linear-gradient(145deg, rgba(20, 34, 56, 0.95) 0%, rgba(17, 42, 79, 0.85) 100%);

  /* Shadows */
  --shadow-sm:      0 2px 6px rgba(0,0,0,0.3);
  --shadow-md:      0 6px 20px rgba(0,0,0,0.4);
  --shadow-lg:      0 12px 40px rgba(0,0,0,0.5);
  --shadow-accent:  0 0 30px rgba(48, 130, 210, 0.25);
  --shadow-glow:    0 0 60px rgba(48, 130, 210, 0.15);

  /* Spacing */
  --section-py:     100px;
  --section-py-sm:  60px;

  /* Radius */
  --radius-sm:      6px;
  --radius:         10px;
  --radius-md:      12px;
  --radius-lg:      16px;
  --radius-xl:      24px;

  /* Typography */
  --font-primary:   'Poppins', sans-serif;

  /* Transitions */
  --transition:     all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast:all 0.15s ease;
  --transition-slow:all 0.5s 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: 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;
  border: none;
  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; }

/* Visible keyboard focus states — accessibility + a more polished, intentional feel */
a:focus-visible,
button:focus-visible,
.btn-qt:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent-light);
  outline-offset: 3px;
  border-radius: 4px;
}

/* === 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;
}

/* 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;
}

/* Subtle Glowing Breath Pulse Animation */
@keyframes ctaBreathPulse {
  0%, 100% {
    box-shadow: 0 0 14px rgba(48, 130, 210, 0.38), 0 4px 12px rgba(0, 0, 0, 0.3);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 26px rgba(48, 130, 210, 0.75), 0 4px 16px rgba(48, 130, 210, 0.35);
    transform: scale(1.025);
  }
}

/* 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 State */
.nav-cta-btn:hover {
  background: linear-gradient(135deg, #4495E8 0%, #2570C0 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); }

/* Mobile Menu Collapsed Styles */
@media (max-width: 991px) {
  /* Identical layout in top (static) and scrolled states — only visual props change */
  .qt-navbar {
    width: calc(100% - 24px);
    max-width: 1200px;
    top: 12px;
    padding: 8px 14px;
    border-radius: 999px;
  }
  .qt-navbar .navbar-container {
    flex-wrap: nowrap;
  }
  .qt-navbar.scrolled {
    width: calc(100% - 24px);
    max-width: 1200px;
    top: 12px;
    padding: 8px 14px;
    border-radius: 999px;
    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);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.65), 0 0 20px rgba(48, 130, 210, 0.15);
  }

  .qt-navbar .navbar-collapse {
    background: rgba(17, 42, 79, 0.98);
    backdrop-filter: blur(24px);
    border: 1px solid rgba(48, 130, 210, 0.25);
    padding: 24px;
    margin-top: 14px;
    border-radius: 24px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.7), 0 0 20px rgba(48, 130, 210, 0.1);
  }

  .qt-navbar .navbar-nav {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
  }

  .qt-navbar .nav-link {
    width: 100%;
    padding: 12px 14px !important;
    border-radius: 0 !important;
    justify-content: flex-start;
  }

  .qt-navbar .nav-link::after {
    left: 14px;
    right: auto;
    transform: scaleX(0);
    transform-origin: left center;
    width: 24px;
  }

  .qt-navbar .nav-link:hover::after,
  .qt-navbar .nav-link.active::after {
    transform: scaleX(1);
    opacity: 1;
  }

  .nav-cta-wrapper {
    margin-top: 18px;
    width: 100%;
  }

  .nav-cta-btn {
    width: 100%;
    justify-content: center;
  }
}

/* ============================================================
/* ============================================================
   HERO SECTION (NIMO CREATIVE DARK-TECH THEME)
   ============================================================ */
.hero-section {
  position: relative;
  min-height: 100svh;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background-color: #1A1C20;
  padding-top: clamp(110px, 14vh, 150px);
  padding-bottom: clamp(44px, 7vh, 80px);
}

/* Texture Background (fine grain, sits above the slideshow) */
.hero-bg-texture {
  position: absolute;
  inset: 0;
  background: url('../images/h1-bg-img-1.webp') no-repeat center center / cover;
  opacity: 0.35;
  mix-blend-mode: luminosity;
  pointer-events: none;
  z-index: 0;
}

/* Auto-Scrolling Hero Background Slideshow */
.hero-bg-slideshow {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}
.hero-bg-slide {
  position: absolute;
  inset: -2%;
  width: 104%;
  height: 104%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  opacity: 0;
  animation: heroSlideCycle 28s infinite;
  will-change: opacity, transform;
}
.hero-bg-slide:nth-child(1) { background-image: url('../images/hero-bg-network.svg'); animation-delay: 0s; }
.hero-bg-slide:nth-child(2) { background-image: url('../images/hero-bg-circuit.svg'); animation-delay: 7s; }
.hero-bg-slide:nth-child(3) { background-image: url('../images/hero-bg-shield.svg'); animation-delay: 14s; }
.hero-bg-slide:nth-child(4) { background-image: url('../images/hero-bg-data.svg'); animation-delay: 21s; }

@keyframes heroSlideCycle {
  0%              { opacity: 0; transform: scale(1.12) translateX(0%); }
  4%, 21%         { opacity: 1; }
  25%             { opacity: 0; transform: scale(1.02) translateX(-2.5%); }
  100%            { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-bg-slide { animation: none; opacity: 0; transform: none; }
  .hero-bg-slide:nth-child(1) { opacity: 1; }
}

   /* ------------------------------------------------------------
   Admin-configured looping background layer.
   Activated from admin/hero-settings.php (hero-media-active): the
   3-4 uploaded photos ride a right-to-left track; overlay opacity
   drives the ::before gradient for text legibility.
   ------------------------------------------------------------ */
.hero-loop-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background-color: #0A1220;
  opacity: 0;
  transition: opacity 0.6s ease;
}

/* The photos sit on a horizontal track that slides right-to-left. The
   markup repeats the image list once, so there are 2N frames and the
   track is (2N x 100%) wide. --hero-loop-count, written inline by PHP,
   lets one rule size both the track and its frames for any N:
     track  = 2N x 100%
     frame  = 100% / 2N   ->  exactly 100% of the hero
   Translating the track -50% then covers N frames, i.e. precisely one
   pass of the list, so frame N+1 lands where frame 1 began. Nothing
   moves vertically and the join never crosses the visible area. */
.hero-section.hero-media-active .hero-loop-bg { opacity: 1; }

.hero-loop-track {
  display: flex;
  width: calc(var(--hero-loop-count, 2) * 2 * 100%);
  height: 100%;
  will-change: transform;
  animation: heroTrackRightToLeft var(--hero-anim-duration, 45s) linear infinite;
}
.hero-loop-item {
  flex: 0 0 calc(100% / (var(--hero-loop-count, 2) * 2));
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
@keyframes heroTrackRightToLeft {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
/* Cover fit (photos) — each frame fills the hero without letterboxing */
.hero-section.hero-media-active[data-hero-style="tile"] .hero-loop-item {
  background-size: 800px;
  background-repeat: repeat;
}
/* 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; }
}
/* A custom background is the base layer; the four-image crossfade loop
   still plays over it. Only the flat texture stands down, and the loop
   itself stops when the admin animation toggle is off. */
.hero-section.hero-media-active .hero-bg-texture { opacity: 0; }
.hero-section.hero-media-active.hero-media-static .hero-bg-slideshow { display: none; }
.hero-section.hero-media-active::before {
  opacity: var(--hero-overlay-opacity, 0.9);
}

/* 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;
}

/* 1. Top Sub-heading — Clean Unified Left Alignment */
.nm-hero-sub-title {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(2.2rem, 3.1vw, 3.2rem);
  font-weight: 700;
  color: #ffffff;
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin-bottom: 12px;
  margin-left: 0;
  animation: fadeInDown 0.7s ease both;
}

/* 2. Award Tag — Clean Unified Left Alignment */
.nm-hero-award-tag {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(0.9rem, 1vw, 1.1rem);
  font-weight: 600;
  color: var(--accent-light);
  letter-spacing: 0.02em;
  margin-left: 0;
  margin-bottom: 20px;
  display: inline-block;
  animation: fadeInDown 0.7s ease 0.1s both;
  text-shadow: 0 0 15px rgba(48, 130, 210, 0.45);
}

/* 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;
}

.nm-hero-star {
  color: var(--accent);
  font-size: clamp(2.4rem, 4.2vw, 3.8rem);
  line-height: 1;
  animation: starRotate 14s linear infinite;
  filter: drop-shadow(0 0 20px rgba(48, 130, 210, 0.85));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

@keyframes starRotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 4. Bottom Row: Video Play Button + Description + About Button */
.nm-hero-bottom-bar {
  margin-left: 0;
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.6vw, 36px);
  flex-wrap: wrap;
  animation: fadeInUp 0.7s ease 0.35s both;
}

/* Video Play Circle */
.nm-hero-plybtn {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  border: 2px solid rgba(255, 255, 255, 0.35);
  flex-shrink: 0;
  cursor: pointer;
  box-shadow: 0 4px 22px rgba(0, 0, 0, 0.65);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  background: #000000;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.nm-hero-plybtn:hover {
  border-color: var(--accent);
  transform: scale(1.08);
  box-shadow: 0 0 28px rgba(48, 130, 210, 0.65);
}

.plybtn-video-wrap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

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

.plybtn-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.38);
  color: #ffffff;
  font-size: 1.2rem;
  transition: all 0.3s ease;
  z-index: 2;
}

.nm-hero-plybtn:hover .plybtn-overlay {
  background: rgba(48, 130, 210, 0.35);
  color: #ffffff;
  transform: scale(1.1);
}

/* Hero Description */
.nm-hero-desc {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(0.95rem, 1.05vw, 1.15rem);
  color: rgba(230, 237, 243, 0.88);
  max-width: 500px;
  line-height: 1.6;
  margin: 0;
  font-weight: 400;
}

/* About Our Agency Pill Button */
.nm-hero-agency-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 9999px;
  padding: 8px 22px 8px 8px;
  color: #ffffff;
  font-family: 'Poppins', sans-serif;
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

.nm-hero-agency-btn:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 0 26px rgba(48, 130, 210, 0.55);
}

.nm-agency-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--accent);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.95rem;
  transition: all 0.3s ease;
}

.nm-hero-agency-btn:hover .nm-agency-icon {
  background: #112A4F;
  color: #ffffff;
  transform: translateX(4px);
}

/* ============================================================
   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;
}

/* 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);
  }
}

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

/* 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);
}

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

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

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

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

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

/* 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);
}

/* 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;
  }
}
.hero-tech-orb {
  width: 420px; height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, rgba(48, 130, 210, 0.15), transparent 60%);
  border: 1px solid var(--border-accent);
  position: relative;
  animation: orbFloat 6s ease-in-out infinite;
}
@keyframes orbFloat {
  0%,100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-20px) rotate(2deg); }
}
.hero-tech-orb::before {
  content: '';
  position: absolute;
  inset: 20px;
  border-radius: 50%;
  border: 1px solid var(--border);
  animation: orbFloat 8s ease-in-out infinite reverse;
}
.hero-tech-orb::after {
  content: '';
  position: absolute;
  inset: 50px;
  border-radius: 50%;
  border: 1px dashed var(--border-accent);
  animation: orbRotate 20s linear infinite;
}
@keyframes orbRotate { to { transform: rotate(360deg); } }

.hero-floating-card {
  position: absolute;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  font-size: 0.82rem;
  color: var(--text-muted);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-md);
  white-space: nowrap;
}
.hero-floating-card .val {
  color: var(--accent);
  font-weight: 700;
  font-size: 1.1rem;
  display: block;
}
.hero-floating-card.card-1 {
  top: 10%; left: -10%;
  animation: float1 5s ease-in-out infinite;
}
.hero-floating-card.card-2 {
  bottom: 15%; right: -5%;
  animation: float2 6s ease-in-out infinite 1s;
}
.hero-floating-card.card-3 {
  top: 60%; left: -15%;
  animation: float1 7s ease-in-out infinite 2s;
}
@keyframes float1 { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-12px);} }
@keyframes float2 { 0%,100%{transform:translateY(0);} 50%{transform:translateY(12px);} }

/* ============================================================
   HERO ANIMATED MOUSE POINTER & SCROLL INDICATOR
   ============================================================ */
.hero-interactive-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.hero-scroll {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 10;
  animation: fadeInUp 1s ease 1s both;
}

.hero-mouse-scroll {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-mouse-scroll:hover {
  transform: translateY(4px);
}

/* Mouse Chassis */
.mouse-chassis {
  width: 22px;
  height: 36px;
  border: 1.5px solid rgba(48, 130, 210, 0.7);
  border-radius: 9999px;
  position: relative;
  background: rgba(17, 42, 79, 0.65);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 0 12px rgba(48, 130, 210, 0.25);
  display: flex;
  justify-content: center;
  animation: mouseChassisFloat 2.8s ease-in-out infinite;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.hero-mouse-scroll:hover .mouse-chassis {
  border-color: #3082D2;
  box-shadow: 0 0 20px rgba(48, 130, 210, 0.6);
}

/* 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);
  }
}

/* Mouse Scroll Label */
.mouse-scroll-text {
  font-family: 'Poppins', sans-serif;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
  transition: color 0.3s ease;
}

.hero-mouse-scroll:hover .mouse-scroll-text {
  color: #3082D2;
}

/* 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);
  }
}

/* Floating Mouse Cursor Badge in Hero Visual */
.hero-floating-cursor {
  position: absolute;
  top: 22%;
  right: 6%;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  animation: cursorFloatBadge 4.8s ease-in-out infinite;
}

.hero-floating-cursor .cursor-svg {
  filter: drop-shadow(0 0 10px rgba(48, 130, 210, 0.85));
  transform: rotate(-8deg);
  flex-shrink: 0;
}

.hero-floating-cursor .cursor-badge {
  background: rgba(17, 42, 79, 0.85);
  border: 1px solid rgba(48, 130, 210, 0.65);
  color: #ffffff;
  font-family: 'Poppins', sans-serif;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  padding: 5px 12px;
  border-radius: 9999px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45), 0 0 14px rgba(48, 130, 210, 0.3);
  white-space: nowrap;
}

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

/* Hero Section Interactive Custom Cursor Pointer Follower */
.hero-cursor-dot {
  position: fixed;
  width: 7px;
  height: 7px;
  background: #3082D2;
  border-radius: 50%;
  pointer-events: none;
  z-index: 99999;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 8px #3082D2, 0 0 16px #3082D2;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.04s ease;
}

.hero-cursor-ring {
  position: fixed;
  width: 36px;
  height: 36px;
  border: 1.5px solid rgba(48, 130, 210, 0.75);
  border-radius: 50%;
  pointer-events: none;
  z-index: 99998;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 16px rgba(48, 130, 210, 0.25);
  opacity: 0;
  transition: width 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              height 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.25s ease,
              background-color 0.25s ease,
              opacity 0.25s ease;
}

.hero-cursor-ring.active-hover {
  width: 60px;
  height: 60px;
  border-color: #3082D2;
  background: rgba(48, 130, 210, 0.12);
  box-shadow: 0 0 28px rgba(48, 130, 210, 0.6);
}

@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); }

#services.section-py {
  padding-top: 82px;
  padding-bottom: 86px;
}
#services .section-header {
  margin-bottom: 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);
}

/* Active status pulse dot */
.tree-status-pulse {
  position: absolute;
  bottom: 4px;
  right: 6px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #00e5a3;
  border: 2.5px solid #0d1222;
  box-shadow: 0 0 10px #00e5a3;
  animation: pulseGlow 2.2s infinite ease-in-out;
}

/* 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: 30px; 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: 88px; 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) {
  .floating-whatsapp {
    width: 50px; height: 50px;
    font-size: 1.4rem;
    bottom: 78px; 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); }

.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; }

/* Prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   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) {
  :root { --section-py: 70px; }
  .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) {
  :root { --section-py: 56px; }
  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 { bottom: 20px; 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);
}

/* ============================================================
   PREMIUM SERVICE CARDS — home page #services section
   ============================================================ */
#services .service-card {
  padding: 26px 24px 22px !important;
  border-radius: 20px !important;
  background: linear-gradient(160deg, rgba(35, 52, 82, 0.96) 0%, rgba(19, 34, 60, 0.99) 55%, rgba(14, 26, 48, 1) 100%) !important;
  border: 1px solid rgba(84, 158, 235, 0.28) !important;
}

/* 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;
}

/* Description: poori text, no cut look */
#services .service-card p {
  font-size: 0.95rem !important;
  line-height: 1.7 !important;
  color: rgba(214, 226, 238, 0.85) !important;
  margin-bottom: 18px !important;
  overflow: visible;
  display: block;
}

/* 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;
}

/* Category tag */
#services-list .service-card .service-card-tag {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #9DC2F0;
  background: rgba(48,130,210,0.12);
  border: 1px solid rgba(84,158,235,0.35);
  border-radius: 999px;
  padding: 5px 12px;
  margin-bottom: 14px;
}

/* Title */
#services-list .service-card h3 {
  font-size: 1.3rem;
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: #EDF4FF;
  margin-bottom: 12px;
}

/* Description */
#services-list .service-card p {
  font-size: 0.945rem !important;
  line-height: 1.75 !important;
  color: rgba(214,226,238,0.8) !important;
  margin-bottom: 0 !important;
  overflow: visible;
  display: block;
}

/* 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;
  }
}

/* ============================================================
   HERO — PREMIUM / ART-DIRECTED TREATMENT
   Stripe / Linear / Webflow-grade finish. Brand palette is
   unchanged (dark navy + blue accent); only shades, gradients,
   depth and hierarchy are added.

   Layer stack (bottom → top):
     z0   .hero-loop-bg         admin artwork, colour-graded
     z0   .hero-bg-slideshow    fallback pattern, colour-graded
     z1   .hero-section::before cinematic gradient + admin dim
     z1   .hero-interactive-canvas
     z2   .hero-section::after  film grain + dot grid + base fade
     z5   .nm-hero-content      copy
     z15  social wheel          (deliberately untouched)
   ============================================================ */

/* The admin "overlay opacity" slider now nudges the fixed cinematic
   gradient instead of dimming the whole stack, so the art direction
   holds at every slider value: 0.5 → +0.00, 0.8 → +0.15, 1.0 → +0.25 */
.hero-section {
  --hero-dim: calc((var(--hero-overlay-opacity, 0.8) - 0.5) * 0.5);
}

/* Directional scrim. The copy now sits on the left, so the left edge
   keeps the full strength it had before (legible white type) while the
   right side opens up so the artwork / looping slideshow reads clearly.
   The full-width base fade at the bottom still lives in ::after. */
.hero-section::before,
.hero-section.hero-media-active::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 1;
  background:
    radial-gradient(ellipse 58% 72% at 18% 40%, rgba(30, 80, 180, 0.20), transparent 66%),
    linear-gradient(90deg,
      rgba(5, 10, 25, calc(0.80 + var(--hero-dim))) 0%,
      rgba(5, 10, 25, calc(0.70 + var(--hero-dim))) 30%,
      rgba(5, 10, 25, calc(0.40 + var(--hero-dim) * 0.5)) 52%,
      rgba(5, 10, 25, 0.10) 68%,
      rgba(5, 10, 25, 0.03) 82%,
      rgba(5, 10, 25, 0.01) 100%);
}

/* Film grain + fine dot grid + base fade. Sits above the artwork and
   overlay, below the copy, so flat photography reads as a designed
   surface. Grain is 5% monochrome noise, dots are 5% blue-white. */
.hero-section::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-image:
    linear-gradient(180deg, rgba(5, 10, 25, 0) 86%, rgba(11, 24, 44, 0.88) 95%, rgba(15, 30, 52, 1) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.05'/%3E%3C/svg%3E"),
    radial-gradient(rgba(178, 206, 255, 0.05) 1px, transparent 1.2px);
  background-size: 100% 100%, 180px 180px, 24px 24px;
}

/* Colour-grade the artwork (desaturate + blue-shifted) so it belongs to
   the brand rather than reading as a pasted photo. Kept bright enough to
   stay visible now that the right side of the scrim is open. */
.hero-section.hero-media-active .hero-loop-bg {
  opacity: 0.95;
  filter: saturate(0.9) brightness(1) contrast(1.05);
}
/* The four-image loop plays over the admin artwork, but only as a
   translucent layer — the uploaded photo must still read through it on
   the open right-hand side, otherwise the dark SVG art buries it. */
.hero-bg-slideshow {
  opacity: 0.4;
  filter: saturate(1.05) brightness(1.05);
}

/* Staggered reveal — one shared easing curve, opacity 0→1 with a
   20px rise. Delays run eyebrow → badge → heading → copy → CTAs. */
@keyframes nmHeroReveal {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes nmHeroFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-6px) rotate(10deg); }
}

/* Content column — left aligned, vertically centred, 850px */
.nm-hero-content {
  max-width: 850px;
  margin-left: 0;
  margin-right: auto;
  text-align: left;
  padding-left: 0;
  padding-right: 0;
}

/* 1. Eyebrow — deliberately small, uppercase and muted so it reads as
   a supporting label rather than competing with the heading. */
.nm-hero-sub-title {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(12.5px, 1.45vw, 15px);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.65);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.5;
  margin-bottom: 16px;
  max-width: 720px;
  margin-left: 0;
  margin-right: auto;
  text-align: left;
  animation: nmHeroReveal 0.6s ease-out 0.1s both;
}

/* 2. Award badge — glassmorphism pill */
.nm-hero-award-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 15px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #ffffff;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: none;
  text-shadow: none;
  margin-bottom: 20px;
  margin-left: 0;
  margin-right: auto;
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
  animation: nmHeroReveal 0.6s ease-out 0.2s both;
}
.nm-hero-award-tag i {
  font-size: 0.85em;
  color: var(--accent-light);
}

/* 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-star {
  font-size: clamp(1.4rem, 2.4vw, 2.3rem);
  color: var(--accent-light);
  filter: drop-shadow(0 0 14px rgba(59, 130, 246, 0.55));
  animation: nmHeroFloat 4s ease-in-out infinite;
}

/* 4. Description — constrained measure, never full-bleed */
.nm-hero-desc {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: normal;
  max-width: 520px;
  margin-left: 0;
  margin-right: auto;
  margin-bottom: 32px;
  text-align: left;
  animation: nmHeroReveal 0.6s ease-out 0.5s both;
}

/* 5. CTA row — equal-height pair, 16px apart, shared easing curve */
.nm-hero-cta-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 16px;
  animation: nmHeroReveal 0.6s ease-out 0.6s both;
}
.nm-hero-cta-row .nm-hero-agency-btn,
.nm-hero-cta-row .nm-hero-plybtn {
  flex-shrink: 0;
  height: 56px;
  border-radius: 12px;
  transition:
    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Primary — blue gradient with a coloured shadow for depth */
.nm-hero-agency-btn {
  padding: 0 32px 0 16px;
  background: linear-gradient(135deg, #1e40af, #2563eb);
  border: 1px solid transparent;
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
  box-shadow: 0 8px 24px rgba(37, 99, 235, 0.35);
}
.nm-hero-agency-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(37, 99, 235, 0.5);
}
.nm-hero-agency-btn .nm-agency-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.16);
  font-size: 0.85rem;
  transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.nm-hero-agency-btn:hover .nm-agency-icon {
  background: rgba(255, 255, 255, 0.26);
}

/* Secondary CTA — glassmorphism, lifts on hover without inverting */
.nm-hero-plybtn {
  width: auto;
  padding: 0 28px;
  gap: 12px;
  background: rgba(255, 255, 255, 0.06);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  box-shadow: none;
}
.nm-hero-plybtn .plybtn-video-wrap,
.nm-hero-plybtn .plybtn-overlay {
  display: none;
}
.nm-hero-plybtn .plybtn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  font-size: 0.7rem;
  transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.nm-hero-plybtn .plybtn-text {
  display: inline;
  font-family: 'Poppins', sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
  color: #ffffff;
  white-space: nowrap;
}
.nm-hero-plybtn:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.35);
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.3);
}
.nm-hero-plybtn:hover .plybtn-icon,
.nm-hero-plybtn:hover .plybtn-text {
  color: #ffffff;
}
.nm-hero-plybtn:hover .plybtn-icon {
  background: rgba(255, 255, 255, 0.16);
}

/* Social wheel stays visible on desktop (>=992px) as before */

/* Keep the left-aligned column clear of the social wheel in the
   992-1199px band, while still fitting the full heading on one line. */
@media (min-width: 992px) and (max-width: 1199px) {
  .nm-hero-content {
    max-width: 780px;
  }
  .nm-hero-desc {
    max-width: 500px;
  }
}

/* ------------------------------------------------------------
   Tablet ≤991px — same art direction, just a tighter measure
   ------------------------------------------------------------ */
@media (max-width: 991px) {
  .nm-hero-content {
    padding-left: 0;
  }
  .nm-hero-star {
    font-size: clamp(1.2rem, 3vw, 1.9rem);
  }
}

/* ------------------------------------------------------------
   Mobile ≤767px — stacked, full-width CTAs, tighter leading
   ------------------------------------------------------------ */
@media (max-width: 767px) {
  .hero-section {
    padding-bottom: 40px;
  }
  .nm-hero-content {
    max-width: 100%;
    padding-left: 22px;
    padding-right: 22px;
  }
  .nm-giant-row-1,
  .nm-giant-row-2 {
    gap: 8px;
  }
  .nm-giant-row-1 .nm-giant-word,
  .nm-giant-row-2 .nm-giant-word {
    line-height: 0.98;
  }
  .nm-hero-desc {
    font-size: 15px;
    max-width: 100%;
    margin-bottom: 28px;
  }
  .nm-hero-cta-row {
    gap: 12px;
  }
  .nm-hero-cta-row .nm-hero-plybtn,
  .nm-hero-cta-row .nm-hero-agency-btn {
    height: 52px;
    flex: 1 1 auto;
    justify-content: center;
  }
  .nm-hero-cta-row .nm-hero-agency-btn {
    padding: 0 20px 0 8px;
    font-size: 14px;
    letter-spacing: 0.01em;
  }
  .nm-hero-cta-row .nm-hero-agency-btn .nm-agency-icon {
    width: 32px;
    height: 32px;
    font-size: 0.8rem;
  }
  .nm-hero-cta-row .nm-hero-plybtn {
    padding: 0 18px;
    gap: 8px;
  }
  .nm-hero-cta-row .nm-hero-plybtn .plybtn-text {
    font-size: 14px;
  }
  .nm-hero-cta-row .nm-hero-plybtn .plybtn-icon {
    width: 26px;
    height: 26px;
    font-size: 0.62rem;
  }
}

/* Very narrow phones — trim the display size just enough to keep
   "Solutions" on a single line rather than breaking mid-word. */
@media (max-width: 374px) {
  .nm-giant-row-1 .nm-giant-word,
  .nm-giant-row-2 .nm-giant-word {
    font-size: 26px;
  }
}

/* Small phones — the asterisk is dropped so the heading keeps its
   impact and the line never wraps awkwardly. */
@media (max-width: 575px) {
  .nm-hero-star {
    display: none;
  }
}

/* Honour the OS reduced-motion setting: content is simply present. */
@media (prefers-reduced-motion: reduce) {
  .nm-hero-sub-title,
  .nm-hero-award-tag,
  .nm-hero-giant-block,
  .nm-hero-desc,
  .nm-hero-cta-row {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .nm-hero-star {
    animation: none;
  }
}

/* ============================================================
   HERO — DIAGONAL COMMAND DECK
   ------------------------------------------------------------
   A single angled copy panel over the full-bleed background
   scene. The panel's slanted edge is cut with clip-path so the
   diagonal reads as part of the section's structure rather than
   a box dropped on top of the photo.

   The foreground media panel that used to sit in the right-hand
   column has been removed. Nothing occupies that space now: the
   3-4 admin-configured photos (hero_bg_images) ride a
   right-to-left track behind the copy, so the scene reads
   continuous across the full width.

   MOTION IS HORIZONTAL ONLY. The background keyframes below move
   the image right-to-left and never upward.

   The right edge reserves room for .nm-hero-1-social-position
   (200x420 crescent, right:-20px, z-index 15) at >=1200px.
   ============================================================ */

.nm-hero-diag {
  --nm-dx: 68px;
  --nm-rail: 0px;
  padding-top: clamp(112px, 13vh, 146px);
  padding-bottom: clamp(48px, 7vh, 84px);
}

.nm-hero-stage {
  max-width: 1160px;
  padding-right: var(--nm-rail);
}

.nm-hero-grid {
  --bs-gutter-x: 0;
  --bs-gutter-y: 0;
  position: relative;
  align-items: center;
}

/* ---- diagonal rules behind the panels ------------------------ */
.nm-hero-diag-lines {
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow: hidden;
  pointer-events: none;
}
.nm-hero-diag-line {
  position: absolute;
  top: -40%;
  height: 180%;
  width: 1px;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(96, 165, 250, 0.42) 28%,
    rgba(96, 165, 250, 0.16) 62%,
    transparent 100%);
  transform: rotate(-11deg);
}
/* Only the two rules on the copy side. The variants that used to sit at
   61% and 88% crossed the artwork and read as vertical streaks on it. */
.nm-hero-diag-line--1 { left: 4%;  opacity: 0.30; }
.nm-hero-diag-line--2 { left: 26%; opacity: 0.55; width: 2px; }

/* ---- columns ----------------------------------------------- */
@media (min-width: 992px) {
  .nm-hero-col--copy { flex: 0 0 55%; max-width: 55%; }
}

.nm-hero-col {
  display: flex;
  flex-direction: column;
}

/* ---- the two angled panels ---------------------------------- */
.nm-hero-panel {
  position: relative;
}

.nm-hero-panel--copy {
  padding: clamp(28px, 3.4vw, 46px) clamp(26px, 3.6vw, 52px) clamp(30px, 3.6vw, 48px) clamp(24px, 3vw, 44px);
  background:
    linear-gradient(158deg,
      rgba(13, 28, 54, 0.80) 0%,
      rgba(9, 18, 36, 0.62) 46%,
      rgba(7, 14, 28, 0.50) 100%);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  backdrop-filter: blur(16px) saturate(1.15);
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--nm-dx)) 100%, 0 100%);
}

/* Bright rule that traces the copy panel's slanted right edge. */
.nm-hero-panel--copy .nm-hero-panel-edge {
  position: absolute;
  top: 0;
  right: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg,
    rgba(96, 165, 250, 0) 0%,
    rgba(96, 165, 250, 0.85) 26%,
    rgba(147, 197, 253, 0.95) 62%,
    rgba(96, 165, 250, 0) 100%);
  box-shadow: 0 0 18px rgba(59, 130, 246, 0.55);
  transform: translateX(calc(-1 * var(--nm-dx) / 2));
  transform-origin: top right;
  /* the edge leans left going down, matching the clip exactly */
  rotate: 6.1deg;
  height: 118%;
  top: -9%;
}

/* ---- copy elements re-tuned for the panel ------------------- */
.nm-hero-panel--copy .nm-hero-sub-title,
.nm-hero-panel--copy .nm-hero-award-tag,
.nm-hero-panel--copy .nm-hero-giant-block,
.nm-hero-panel--copy .nm-hero-desc,
.nm-hero-panel--copy .nm-hero-cta-row {
  max-width: 100%;
  margin-right: 0;
}

.nm-hero-panel--copy .nm-hero-giant-block {
  margin-bottom: 22px;
}
.nm-hero-panel--copy .nm-hero-desc {
  max-width: 46ch;
  margin-bottom: 28px;
}
.nm-hero-panel--copy .nm-hero-award-tag {
  margin-bottom: 18px;
}

/* 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; }
}

/* ---- tablet: stack the media panel under the copy ---------- */
@media (max-width: 991px) {
  .nm-hero-diag {
    --nm-dx: 54px;
    padding-top: clamp(104px, 12vh, 128px);
  }
    .nm-hero-col--copy { order: 1; }
    .nm-hero-panel--copy {
      clip-path: polygon(0 0, 100% 0, calc(100% - var(--nm-dx)) 100%, 0 100%);
    }
  }

/* ---- mobile ------------------------------------------------ */
@media (max-width: 767px) {
  .nm-hero-diag {
    --nm-dx: 40px;
    padding-bottom: 40px;
  }
  .nm-hero-panel--copy {
    padding: 26px 22px 30px 20px;
  }
  .nm-hero-panel--copy .nm-hero-desc {
    max-width: 100%;
    margin-bottom: 24px;
  }
  .nm-hero-diag-line--1 { display: none; }
}

/* ---- short viewports (landscape phones, small laptops in a narrow
   window): the stacked hero runs taller than the screen, which pushes the
   CTA row down behind the fixed cookie notice. Tighten every vertical
   step so the primary button stays inside the first screen. ---------- */
@media (max-width: 767px) and (max-height: 780px) {
  .nm-hero-diag {
    padding-top: 86px;
    padding-bottom: 28px;
  }
  .nm-hero-panel--copy {
    padding: 18px 18px 22px 16px;
  }
  .nm-hero-panel--copy .nm-hero-award-tag {
    margin-bottom: 12px;
    padding: 6px 12px;
    font-size: 11px;
  }
  .nm-hero-panel--copy .nm-hero-giant-block {
    margin-bottom: 14px;
  }
  .nm-hero-panel--copy .nm-hero-desc {
    margin-bottom: 18px;
    font-size: 14px;
    line-height: 1.55;
  }
  .nm-hero-cta-row {
    gap: 10px;
  }
  .nm-hero-cta-row .nm-hero-plybtn,
  .nm-hero-cta-row .nm-hero-agency-btn {
    height: 46px;
  }
}

/* ---- very narrow phones ------------------------------------ */
@media (max-width: 374px) {
  .nm-hero-diag { --nm-dx: 30px; }
  .nm-hero-panel--copy { padding: 22px 18px 26px 16px; }
}

/* ---- background artwork: horizontal drift only -------------- */
@keyframes heroSlideCycle {
  0%              { opacity: 0; transform: translate3d(7%, 0, 0) scale(1.14); }
  4%, 21%         { opacity: 1; }
  25%             { opacity: 0; transform: translate3d(-7%, 0, 0) scale(1.06); }
  100%            { opacity: 0; }
}

/* ============================================================
   FIXED-BANNER SAFE AREA
   ------------------------------------------------------------
   The cookie notice is position:fixed to the bottom edge, so
   every pixel of its height lands on top of whatever the hero
   happens to render there. Two things follow: the banner gets
   slimmer on small screens, and the hero's own furniture moves
   out of the bottom strip.
   ============================================================ */

/* Trim the banner's chrome, not its message. 147px -> 111px. */
@media (max-width: 575px), (max-height: 820px) {
  .cookie-notice {
    bottom: 12px;
    padding: 13px 15px;
    border-radius: 10px;
  }
  .cookie-notice p {
    font-size: 0.78rem;
    line-height: 1.5;
    margin-bottom: 10px;
  }
  .cookie-notice .btn-qt.btn-sm {
    padding: 6px 15px;
    font-size: 0.78rem;
  }
}

/* Tablet / short desktop windows: the 2-column hero fits 100vh, which
   parks the CTA row in the same strip the banner occupies. */
@media (min-width: 768px) and (max-height: 820px) {
  .nm-hero-diag {
    padding-top: 96px;
    padding-bottom: 32px;
  }
  .nm-hero-panel--copy {
    padding: 22px 24px 24px 20px;
  }
  .nm-hero-panel--copy .nm-hero-award-tag { margin-bottom: 14px; }
  .nm-hero-panel--copy .nm-hero-giant-block { margin-bottom: 16px; }
  .nm-hero-panel--copy .nm-hero-desc { margin-bottom: 20px; }
}

/* ============================================================
   PHONE AND TABLET LAYOUT
   ------------------------------------------------------------
   On a 390x844 screen the copy panel is ~420px tall. Forcing the
   hero to 100dvh left roughly 425px of empty background split
   above and below it, so the content read as small and stranded.
   Below 768px the hero now hugs its own height: the heading is
   scaled up, the rhythm is tightened, and the social row stands
   in for the circular wheel, which is hidden under 1200px.
   ============================================================ */

.nm-hero-1-social-row { display: none; }

/* 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;
}

/* --- left column: headline + intro ----------------------------- */
.qt-process-title {
  font-size: clamp(2.1rem, 1.2rem + 3.2vw, 3.3rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0 0 1.25rem;
}
/* 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;
}

/* --- responsive -------------------------------------------------- */
/* Tablet: hold the two columns, pull the gutter and rhythm in. */
@media (max-width: 991px) {
  .qt-process-section { --qt-p-step-gap: 2rem; --qt-p-indent: 30px; }
  .qt-process-grid { column-gap: 2.25rem; }
  .qt-process-lede { font-size: 0.94rem; }
  .qt-process-step-title { font-size: 1rem; }
  .qt-process-step-desc { font-size: 0.9rem; }
}

/* 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); }
}