/* ==========================================================================
   JZARR TECH — Master Production Stylesheet
   Features: Outfit Geometric Display Typography, Real 3D Rotating Orbits, Clean UI
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800;900&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500;700&display=swap');

:root {
  /* Color System */
  --navy-dark: #07152f;
  --bg-primary: #ffffff;
  --bg-secondary: #f8fafc;
  --bg-soft: #f1f5ff;
  --bg-card: #ffffff;

  /* Text Colors */
  --text-primary: #07152f;
  --text-secondary: #475569;
  --text-muted: #94a3b8;

  /* Accents */
  --accent-purple: #6d35f2;
  --accent-purple-light: #8b5cf6;
  --accent-purple-glow: rgba(109, 53, 242, 0.28);
  --accent-blue: #3b82f6;
  --accent-cyan: #22d3ee;
  --accent-pink: #ec4899;

  /* Borders & Shadows */
  --border-light: #e2e8f0;
  --border-subtle: #edf2f7;
  --shadow-soft: 0 4px 25px rgba(7, 21, 47, 0.05);
  --shadow-card: 0 10px 30px rgba(7, 21, 47, 0.07);
  --shadow-hover: 0 16px 40px rgba(109, 53, 242, 0.14);

  /* Gradients */
  --grad-purple-blue: linear-gradient(135deg, #6d35f2 0%, #3b82f6 50%, #22d3ee 100%);
  --grad-purple-pink: linear-gradient(135deg, #6d35f2 0%, #ec4899 100%);
  --grad-heading-sheen: linear-gradient(135deg, #6d35f2 10%, #22d3ee 90%);

  /* Typography */
  --font-heading: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  background-color: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-sans);
  overflow-x: hidden;
}

body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.6;
  font-size: 15px;
  overflow-x: hidden;
  position: relative;
}

.container {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
}

a {
  color: inherit;
  text-decoration: none;
}

/* Ambient Clean Background */
.site-wrapper {
  position: relative;
  background: 
    radial-gradient(circle at 85% 15%, rgba(109, 53, 242, 0.05) 0%, transparent 50%),
    radial-gradient(circle at 10% 40%, rgba(34, 211, 238, 0.04) 0%, transparent 45%),
    radial-gradient(circle at 80% 70%, rgba(236, 72, 153, 0.04) 0%, transparent 50%);
  min-height: 100vh;
}

/* ── TYPOGRAPHY HEADINGS & LABELS ────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  letter-spacing: -0.03em;
}

.grad-text-purple-blue {
  background: var(--grad-heading-sheen);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  text-shadow: 0 0 40px rgba(109, 53, 242, 0.2);
}

.grad-text-purple-pink {
  background: var(--grad-purple-pink);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

.sec-tracker-light {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--accent-purple);
  letter-spacing: 0.16em;
  margin-bottom: 16px;
  text-transform: uppercase;
}
.sec-tracker-light .tracker-line {
  width: 28px;
  height: 1.5px;
  background: var(--accent-purple);
  opacity: 0.6;
}

.sec-title-light {
  font-family: var(--font-heading);
  font-size: clamp(34px, 4.2vw, 54px);
  font-weight: 900;
  line-height: 1.06;
  letter-spacing: -0.03em;
  color: var(--text-primary);
  margin-bottom: 18px;
  text-transform: uppercase;
}

.sec-desc-light {
  font-size: 15.5px;
  color: var(--text-secondary);
  line-height: 1.75;
  max-width: 500px;
  margin-bottom: 28px;
}

/* Pill Buttons */
.btn-navy-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #07152f;
  color: #ffffff;
  padding: 12px 28px;
  border-radius: 9999px;
  font-size: 14px;
  font-weight: 700;
  font-family: var(--font-heading);
  letter-spacing: -0.01em;
  border: 1px solid #07152f;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 18px rgba(7, 21, 47, 0.16);
}
.btn-navy-primary:hover {
  background: var(--accent-purple);
  border-color: var(--accent-purple);
  box-shadow: 0 8px 25px var(--accent-purple-glow);
  transform: translateY(-2px);
}

.btn-white-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #ffffff;
  color: var(--text-primary);
  padding: 12px 28px;
  border-radius: 9999px;
  font-size: 14px;
  font-weight: 700;
  font-family: var(--font-heading);
  letter-spacing: -0.01em;
  border: 1.5px solid #cbd5e1;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}
.btn-white-outline:hover {
  border-color: var(--accent-purple);
  color: var(--accent-purple);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(109, 53, 242, 0.12);
}

.btn-outline-navy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #ffffff;
  color: #07152f !important;
  padding: 12px 28px;
  border-radius: 9999px;
  font-size: 14px;
  font-weight: 700;
  font-family: var(--font-heading);
  letter-spacing: -0.01em;
  border: 1.5px solid #07152f;
  text-decoration: none !important;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 8px rgba(7, 21, 47, 0.05);
}
.btn-outline-navy:hover {
  border-color: var(--accent-purple, #6d35f2);
  color: var(--accent-purple, #6d35f2) !important;
  background: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(109, 53, 242, 0.16);
}

.subpage-hero-actions {
  margin-top: 26px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* ── 1. NAVBAR ───────────────────────────────────────────────────────────── */
.light-navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(226, 232, 240, 0.8);
  transition: all 0.3s ease;
}
.navbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 74px;
}
.brand-logo-wrap {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 17px;
  letter-spacing: 0.04em;
  color: var(--text-primary);
  text-decoration: none;
  line-height: 1;
  margin: 0;
  padding: 0;
}
.navbar-inner .brand-logo-wrap {
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
}
.site-main-logo-img {
  height: 52px;
  width: auto;
  object-fit: contain;
  display: block;
  transition: transform 0.25s ease;
}
.brand-logo-wrap:hover .site-main-logo-img {
  transform: scale(1.02);
}
.site-footer-logo-img {
  height: 90px;
  width: auto;
  object-fit: contain;
  display: block;
}
.footer-col-brand .brand-logo-wrap {
  margin-bottom: 18px;
}
.logo-badge-light {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--grad-purple-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  color: #ffffff;
  font-size: 18px;
  box-shadow: 0 4px 14px var(--accent-purple-glow);
}
.nav-menu-light {
  display: flex;
  align-items: center;
  gap: 32px;
  height: 100%;
}
.nav-item-link {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
  transition: color 0.2s ease;
  position: relative;
  padding: 6px 0;
}
.nav-item-link:hover, .nav-item-link.active {
  color: var(--text-primary);
}
.nav-item-link.active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--accent-purple);
  border-radius: 2px;
}

/* ── 2. HERO SECTION (REAL 3D ROTATING ORBIT) ────────────────────────────── */
.light-hero-section {
  min-height: auto;
  padding-top: 110px;
  padding-bottom: 30px;
  display: flex;
  align-items: center;
  position: relative;
  background: 
    radial-gradient(circle at 75% 40%, rgba(109, 53, 242, 0.08) 0%, transparent 60%),
    radial-gradient(circle at 25% 65%, rgba(34, 211, 238, 0.06) 0%, transparent 55%),
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  overflow: hidden;
}
.hero-grid-two-col {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: center;
  gap: 40px;
}
.hero-eyebrow-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(109, 53, 242, 0.06);
  border: 1px solid rgba(109, 53, 242, 0.15);
  padding: 6px 16px;
  border-radius: 9999px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--accent-purple);
  letter-spacing: 0.14em;
  margin-bottom: 24px;
}
.eyebrow-pulsing-dot {
  width: 6px;
  height: 6px;
  background: var(--accent-purple);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--accent-purple);
  animation: pulseDot 2s infinite ease-in-out;
}
@keyframes pulseDot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.6); opacity: 0.4; }
}

.hero-heading-huge {
  font-family: var(--font-heading);
  font-size: clamp(46px, 5.6vw, 78px);
  font-weight: 900;
  line-height: 1.01;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: var(--text-primary);
  margin-bottom: 24px;
}
.hero-lead-text {
  font-size: 16.5px;
  line-height: 1.75;
  color: var(--text-secondary);
  max-width: 490px;
  margin-bottom: 36px;
}
.hero-buttons-flex {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 26px;
}
.scroll-explore-light {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--text-muted);
}
.scroll-explore-light .scroll-line {
  width: 32px;
  height: 1px;
  background: var(--text-muted);
}

/* Full-Hero Ambient Background Particles Canvas */
.hero-bg-particles-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}
.light-hero-section .container {
  position: relative;
  z-index: 2;
}

/* Real 3D Orbit Stage (Zero Clipping, Expanded Viewport) */
.hero-3d-orbit-stage {
  position: relative;
  width: 100%;
  height: 480px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}
.hero-3d-canvas-wrap {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
  overflow: visible;
}
.hero-3d-canvas-wrap canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
  background: transparent !important;
}

/* Floating HTML Badges orbiting with 3D Depth */
.orbit-floating-badge {
  position: absolute;
  z-index: 10;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(226, 232, 240, 0.95);
  padding: 8px 18px;
  border-radius: 9999px;
  font-family: var(--font-heading);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-primary);
  box-shadow: 0 8px 24px rgba(7, 21, 47, 0.08);
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  transition: transform 0.2s ease-out;
}
.badge-orbit-tl { top: 8%; left: 6%; animation: floatY1 4.5s ease-in-out infinite; }
.badge-orbit-tr { top: 10%; right: 6%; animation: floatY2 5s ease-in-out infinite; }
.badge-orbit-bl { bottom: 12%; left: 6%; animation: floatY2 4.8s ease-in-out infinite; }
.badge-orbit-br { bottom: 10%; right: 8%; animation: floatY1 5.2s ease-in-out infinite; }

@keyframes floatY1 {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
@keyframes floatY2 {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(10px); }
}

/* ── 3. SECTION 02: TECHNOLOGY IS A SYSTEM (LIVE 3D ORBIT) ──────────────── */
.sec-system-light {
  padding: 50px 0 70px;
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
  position: relative;
  overflow: hidden;
}
.system-interactive-orbit-box {
  position: relative;
  width: 100%;
  max-width: 500px;
  height: 480px;
  margin: 0 auto;
}
.system-interactive-orbit-box canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

/* ── 4. SECTION 03: ABOUT JZARR TECH (HQ Split) ─────────────────────────── */
.sec-about-light {
  padding: 105px 0;
  position: relative;
}
.about-three-col-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr 0.45fr;
  align-items: center;
  gap: 40px;
}
.about-building-frame {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border-light);
}
.about-building-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.watch-story-badge {
  position: absolute;
  bottom: 18px;
  left: 18px;
  background: rgba(7, 21, 47, 0.8);
  backdrop-filter: blur(10px);
  color: #ffffff;
  padding: 9px 18px;
  border-radius: 9999px;
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ── 5. SECTION 04: WHAT WE BUILD (Capabilities Orbit) ──────────────────── */
.sec-capabilities-light {
  padding: 100px 0;
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
}
.capabilities-orbit-stage {
  position: relative;
  width: 100%;
  max-width: 500px;
  height: 460px;
  margin: 0 auto;
}
.capabilities-orbit-stage canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

/* ── 6. SECTION 05: TECHNOLOGY STACK ────────────────────────────────────── */
.sec-stack-light {
  padding: 100px 0;
  position: relative;
}
.stack-filter-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 36px;
}
.stack-tab-btn {
  background: #ffffff;
  border: 1px solid var(--border-light);
  padding: 9px 20px;
  border-radius: 9999px;
  font-family: var(--font-heading);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
}
.stack-tab-btn:hover, .stack-tab-btn.active {
  background: #07152f !important;
  border-color: #07152f !important;
  color: #ffffff !important;
  box-shadow: 0 4px 18px rgba(7, 21, 47, 0.25) !important;
}
.tech-cards-grid-light {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(124px, 1fr));
  gap: 16px;
}
.tech-card-item {
  background: #ffffff;
  border: 1px solid var(--border-light);
  border-radius: 16px;
  padding: 26px 14px;
  text-align: center;
  box-shadow: var(--shadow-soft);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.tech-card-item:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-hover);
  border-color: var(--accent-purple);
}
.tech-card-icon {
  font-size: 32px;
  margin-bottom: 12px;
}
.tech-card-name {
  font-family: var(--font-heading);
  font-size: 13.5px;
  font-weight: 800;
  color: var(--text-primary);
}

/* ── 7. SECTION 06: PROJECT SHOWCASE (Red Apple) ────────────────────────── */
.sec-projects-light {
  padding: 100px 0;
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-light);
}
.project-card-showcase-light {
  background: #ffffff;
  border: 1px solid var(--border-light);
  border-radius: 20px;
  padding: 36px;
  box-shadow: var(--shadow-card);
  display: grid;
  grid-template-columns: 1fr 0.18fr;
  gap: 28px;
  align-items: center;
}
.project-card-main-content img {
  width: 100%;
  border-radius: 12px;
  display: block;
  margin-top: 18px;
  margin-bottom: 22px;
}
.project-thumbnails-rail {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-left: 1px solid var(--border-light);
  padding-left: 20px;
}
.project-thumb-box {
  width: 56px;
  height: 40px;
  border-radius: 6px;
  background: var(--bg-soft);
  border: 1px solid var(--border-light);
  cursor: pointer;
  transition: all 0.2s ease;
}
.project-thumb-box.active, .project-thumb-box:hover {
  border-color: var(--accent-purple);
  box-shadow: 0 0 10px var(--accent-purple-glow);
}

/* ── 8. FINAL CTA STRIP ──────────────────────────────────────────────────── */
.final-cta-dark-strip {
  padding: 75px 0;
  background: #07152f url('../images/cta_banner_strip.jpg') no-repeat center center;
  background-size: cover;
  color: #ffffff;
  text-align: center;
  position: relative;
}
.final-cta-heading {
  font-family: var(--font-heading);
  font-size: clamp(34px, 4.5vw, 56px);
  font-weight: 900;
  line-height: 1.1;
  margin-bottom: 14px;
  color: #ffffff;
}
.final-cta-sub {
  font-size: 16px;
  color: #cbd5e1;
  margin-bottom: 32px;
}
.final-cta-btns {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.btn-cta-purple {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--grad-purple-blue);
  color: #ffffff;
  padding: 12px 30px;
  border-radius: 9999px;
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 4px 20px rgba(109, 53, 242, 0.4);
}
.btn-cta-purple:hover {
  filter: brightness(1.1);
  transform: translateY(-2px);
}
.btn-cta-outline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: #ffffff;
  padding: 12px 30px;
  border-radius: 9999px;
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 700;
  border: 1px solid rgba(255, 255, 255, 0.35);
}
.btn-cta-outline:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: #ffffff;
  transform: translateY(-2px);
}

/* ── 9. FOOTER ───────────────────────────────────────────────────────────── */
.light-footer {
  padding: 70px 0 35px 0;
  background: #ffffff;
  border-top: 1px solid var(--border-light);
}
.footer-main-flex {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}
.footer-nav-links-light {
  display: flex;
  gap: 28px;
  align-items: center;
}
.footer-contact-light {
  font-size: 13.5px;
  color: var(--text-secondary);
  line-height: 1.8;
}
.footer-bottom-bar-light {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 24px;
  border-top: 1px solid var(--border-light);
  font-size: 12.5px;
  color: var(--text-muted);
}

/* ── 10. SUBPAGE STYLING (About, Services, Portfolio, Tech, Contact) ─────── */
.subpage-hero-light {
  padding-top: 130px;
  padding-bottom: 60px;
  background: 
    radial-gradient(circle at 80% 20%, rgba(109, 53, 242, 0.05) 0%, transparent 50%),
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border-bottom: 1px solid var(--border-light);
}
.subpage-hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: center;
  gap: 40px;
}
.subpage-hero-title {
  font-family: var(--font-heading);
  font-size: clamp(38px, 4.8vw, 62px);
  font-weight: 900;
  line-height: 1.04;
  color: var(--text-primary);
  margin-bottom: 18px;
}
.subpage-hero-lead {
  font-size: 16.5px;
  color: var(--text-secondary);
  line-height: 1.75;
  max-width: 520px;
}
.subpage-hero-3d-box {
  width: 100%;
  height: 380px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.subpage-hero-3d-box canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

/* Mission & Vision Cards */
.mission-vision-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 40px;
}
.mv-card-light {
  background: #ffffff;
  border: 1px solid var(--border-light);
  border-radius: 18px;
  padding: 32px;
  box-shadow: var(--shadow-soft);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.mv-card-light:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
  border-color: var(--accent-purple);
}
.mv-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.mv-card-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--bg-soft);
  color: var(--accent-purple);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  border: 1px solid var(--border-light);
}
.mv-card-title {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 800;
  color: var(--text-primary);
}
.mv-card-desc {
  font-size: 14.5px;
  color: var(--text-secondary);
  line-height: 1.65;
}

/* Values Grid */
.sec-our-values {
  padding: 90px 0;
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
}
.values-grid-light {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 36px;
}
.value-card-light {
  background: #ffffff;
  border: 1px solid var(--border-light);
  border-radius: 18px;
  padding: 30px 20px;
  text-align: center;
  box-shadow: var(--shadow-soft);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.value-card-light:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-hover);
  border-color: var(--accent-purple);
}
.value-card-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--bg-soft);
  color: var(--accent-purple);
  margin: 0 auto 16px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  border: 1px solid var(--border-light);
}
.value-card-title {
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 8px;
}
.value-card-desc {
  font-size: 13.5px;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* Subpage Clean CTA Banner Card */
.sec-subpage-cta {
  padding: 90px 0;
}
.subpage-cta-card-box {
  background: #ffffff;
  border: 1px solid var(--border-light);
  border-radius: 22px;
  padding: 48px 54px;
  box-shadow: var(--shadow-card);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}
.subpage-cta-left h3 {
  font-family: var(--font-heading);
  font-size: clamp(26px, 3.2vw, 38px);
  font-weight: 900;
  color: var(--text-primary);
  margin-bottom: 10px;
}
.subpage-cta-left p {
  font-size: 15.5px;
  color: var(--text-secondary);
  margin-bottom: 24px;
}
.subpage-cta-right img {
  max-width: 140px;
  height: auto;
  animation: heroFloatSoft 5s ease-in-out infinite;
  filter: drop-shadow(0 12px 25px rgba(109, 53, 242, 0.15));
}

/* Core Services Grid */
.sec-core-services {
  padding: 90px 0;
}
.core-services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 36px;
}
.service-card-clean {
  background: #ffffff;
  border: 1px solid var(--border-light);
  border-radius: 18px;
  padding: 36px 30px;
  box-shadow: var(--shadow-soft);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.service-card-clean:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-hover);
  border-color: var(--accent-purple);
}
.service-card-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--bg-soft);
  color: var(--accent-purple);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin-bottom: 20px;
  border: 1px solid var(--border-light);
}
.service-card-title {
  font-family: var(--font-heading);
  font-size: 19px;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 10px;
}
.service-card-desc {
  font-size: 14.5px;
  color: var(--text-secondary);
  line-height: 1.65;
}

/* Portfolio More Projects */
.sec-more-projects {
  padding: 90px 0;
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-light);
}
.more-projects-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 36px;
}
.project-mini-card {
  background: #ffffff;
  border: 1px solid var(--border-light);
  border-radius: 18px;
  padding: 26px;
  box-shadow: var(--shadow-soft);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.project-mini-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-hover);
  border-color: var(--accent-purple);
}
.project-mini-type {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--accent-purple);
  letter-spacing: 0.1em;
  margin-bottom: 8px;
}
.project-mini-title {
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 14px;
}
.project-mini-tech {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.project-mini-tech span {
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  padding: 4px 10px;
  border-radius: 9999px;
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--text-secondary);
}

/* Contact Page Form */
.sec-contact-clean {
  padding: 90px 0;
}
.contact-clean-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: stretch;
}
.contact-info-card, .contact-form-card {
  background: #ffffff;
  border: 1px solid var(--border-light);
  border-radius: 22px;
  padding: 44px;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  height: 100%;
}
.contact-affiliation-wrap {
  margin-top: auto;
  padding-top: 24px;
  border-top: 1px solid var(--border-light);
}
.contact-item-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
  font-size: 15px;
  color: var(--text-secondary);
}
.contact-item-icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--bg-soft);
  color: var(--accent-purple);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  border: 1px solid var(--border-light);
}
.form-input-clean {
  width: 100%;
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  border-radius: 10px;
  padding: 14px 18px;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--text-primary);
  margin-bottom: 16px;
}
.form-input-clean:focus {
  outline: none;
  border-color: var(--accent-purple);
  background: #ffffff;
  box-shadow: 0 0 12px var(--accent-purple-glow);
}
.form-textarea-clean {
  width: 100%;
  height: 125px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  border-radius: 10px;
  padding: 14px 18px;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--text-primary);
  margin-bottom: 22px;
  resize: vertical;
}
.form-textarea-clean:focus {
  outline: none;
  border-color: var(--accent-purple);
  background: #ffffff;
  box-shadow: 0 0 12px var(--accent-purple-glow);
}

/* ── MASTER 4-COLUMN TECH FOOTER ─────────────────────────────────────────── */
.light-footer {
  background: #ffffff;
  border-top: 1px solid var(--border-light);
  padding: 80px 0 35px 0;
  position: relative;
  overflow: hidden;
}
.light-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 15%;
  right: 15%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-purple), var(--accent-cyan), transparent);
  opacity: 0.5;
}
.footer-grid-4col {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 48px;
  margin-bottom: 60px;
}
.footer-col-brand .footer-brand-tagline {
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 20px;
  max-width: 320px;
}
.footer-group-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 22px;
}
.footer-group-tag strong {
  color: var(--text-primary);
  font-weight: 800;
}
.footer-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  padding: 6px 14px;
  border-radius: 9999px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: #166534;
  letter-spacing: 0.06em;
}
.status-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 8px #22c55e;
  animation: pulse-dot 2s infinite ease-in-out;
}
.footer-col-heading {
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--text-primary);
  margin-bottom: 22px;
  text-transform: uppercase;
}
.footer-link-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.footer-link-list a {
  color: var(--text-secondary);
  font-size: 14px;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
}
.footer-link-list a:hover {
  color: var(--accent-purple);
  transform: translateX(4px);
}
.footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 18px;
}
.fci-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--bg-soft);
  color: var(--accent-purple);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
  border: 1px solid var(--border-light);
}
.fci-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-bottom: 2px;
}
.fci-value {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-primary);
  transition: color 0.2s ease;
}
.fci-value:hover {
  color: var(--accent-purple);
}
.footer-bottom-bar-light {
  padding-top: 30px;
  border-top: 1px solid var(--border-light);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 13px;
  color: var(--text-muted);
}
.footer-legal-links {
  display: flex;
  align-items: center;
  gap: 14px;
}
.footer-legal-links a {
  color: var(--text-secondary);
  transition: color 0.2s ease;
}
.footer-legal-links a:hover {
  color: var(--accent-purple);
}
.legal-sep {
  color: var(--border-light);
}

/* ── SUBPAGE HERO CYBER MOTION CANVAS & TELEMETRY ─────────────────────────── */
.subpage-hero-cyber {
  position: relative;
  padding: 110px 0 85px 0;
  background: 
    radial-gradient(circle at 85% 20%, rgba(109, 53, 242, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 15% 75%, rgba(34, 211, 238, 0.06) 0%, transparent 45%),
    #ffffff;
  border-bottom: 1px solid var(--border-light);
  overflow: hidden;
}
.subpage-cyber-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}
.subpage-hero-cyber .container {
  position: relative;
  z-index: 2;
}
.subpage-hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 48px;
  align-items: center;
}
.subpage-hero-title {
  font-family: var(--font-heading);
  font-size: clamp(38px, 4.5vw, 62px);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: var(--text-primary);
  margin-bottom: 18px;
  text-transform: uppercase;
}
.subpage-hero-lead {
  font-size: 16.5px;
  color: var(--text-secondary);
  line-height: 1.65;
  max-width: 580px;
  margin-bottom: 30px;
}
.subpage-hero-stats-row {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 24px;
}
.subpage-stat-badge {
  background: #ffffff;
  border: 1px solid var(--border-light);
  box-shadow: 0 4px 15px rgba(7, 21, 47, 0.04);
  padding: 10px 18px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.subpage-stat-badge strong {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 800;
  color: var(--accent-purple);
}
.subpage-stat-badge span {
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 600;
}

/* Subpage 3D Cyber Telemetry Console */
.subpage-hero-cyber-console {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(109, 53, 242, 0.22);
  border-radius: 20px;
  box-shadow: 0 20px 45px rgba(109, 53, 242, 0.12), 0 4px 16px rgba(7, 21, 47, 0.05);
  overflow: hidden;
  position: relative;
}
.cyber-console-header {
  background: #07152f;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cyber-dot-group {
  display: flex;
  gap: 6px;
}
.cyber-dot-group span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.dot-red { background: #ef4444; }
.dot-yellow { background: #f59e0b; }
.dot-green { background: #10b981; }
.cyber-console-title {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #94a3b8;
}
.cyber-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(34, 211, 238, 0.15);
  border: 1px solid #22d3ee;
  border-radius: 9999px;
  padding: 2px 8px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 800;
  color: #22d3ee;
  letter-spacing: 0.08em;
}
.badge-live-pulse {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #22d3ee;
  animation: pulse-dot 1.5s infinite;
}
.cyber-console-body {
  padding: 22px;
}
.cyber-console-3d-stage {
  width: 100%;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cyber-telemetry-rows {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: 14px;
  border-top: 1px solid var(--border-light);
  padding-top: 14px;
}
.cyber-stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
}
.stat-label {
  color: var(--text-muted);
  letter-spacing: 0.06em;
}
.stat-val {
  font-weight: 700;
  letter-spacing: 0.04em;
}
.highlight-cyan { color: #0284c7; }
.highlight-green { color: #16a34a; }
.highlight-purple { color: #6d35f2; }

/* ── DISTINCT SUBPAGE HERO CONSOLE THEMES (UNIQUE TO EACH PAGE) ───────────── */
/* Base Console Box */
.subpage-hero-unique-console {
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(18px);
  border: 1px solid rgba(109, 53, 242, 0.2);
  border-radius: 20px;
  box-shadow: 0 20px 48px rgba(7, 21, 47, 0.08), 0 4px 16px rgba(109, 53, 242, 0.06);
  overflow: hidden;
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.subpage-hero-unique-console:hover {
  box-shadow: 0 24px 56px rgba(109, 53, 242, 0.12), 0 6px 20px rgba(7, 21, 47, 0.08);
}
.unique-console-header {
  background: #07152f;
  padding: 13px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.unique-console-title {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #94a3b8;
}
.unique-console-body {
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* 1. ABOUT US: DNA MATRIX */
.hero-console-about { border-color: rgba(109, 53, 242, 0.25); }
.matrix-quad-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.matrix-quad-item {
  background: #f8fafc;
  border: 1px solid var(--border-light);
  border-radius: 14px;
  padding: 14px 16px;
  transition: all 0.2s ease;
}
.matrix-quad-item:hover {
  background: #ffffff;
  border-color: var(--accent-purple);
  box-shadow: 0 6px 16px rgba(109, 53, 242, 0.08);
  transform: translateY(-2px);
}
.matrix-quad-val {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 4px;
}
.matrix-quad-label {
  font-size: 11.5px;
  color: var(--text-secondary);
  font-weight: 600;
  line-height: 1.3;
}
.matrix-pods-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: rgba(7, 21, 47, 0.03);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  padding: 12px 16px;
}
.matrix-pod-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
}
.matrix-pod-name {
  color: var(--text-primary);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}
.matrix-pod-status {
  color: #16a34a;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.06em;
  background: rgba(22, 163, 74, 0.1);
  padding: 2px 7px;
  border-radius: 9999px;
}
.matrix-seal-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-muted);
  border-top: 1px dashed var(--border-light);
  padding-top: 12px;
}

/* 2. SERVICES: CAPABILITY RADAR */
.hero-console-services { border-color: rgba(34, 211, 238, 0.35); }
.capability-radar-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.radar-channel-item {
  background: #ffffff;
  border: 1px solid var(--border-light);
  border-radius: 14px;
  padding: 14px 16px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(7, 21, 47, 0.03);
}
.radar-channel-item::before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 4px;
}
.radar-channel-item.ch-dev::before { background: var(--accent-purple); }
.radar-channel-item.ch-ai::before { background: var(--accent-cyan); }
.radar-channel-item.ch-mkt::before { background: var(--accent-magenta); }
.radar-channel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.radar-channel-title {
  font-family: var(--font-heading);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-primary);
}
.radar-channel-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 9999px;
}
.radar-channel-tags {
  font-size: 11.5px;
  color: var(--text-secondary);
}
.radar-status-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 10.5px;
  background: #07152f;
  color: #94a3b8;
  padding: 10px 14px;
  border-radius: 10px;
}

/* 3. PORTFOLIO: SHIPMENT MONITOR */
.hero-console-portfolio { border-color: rgba(59, 130, 246, 0.3); }
.portfolio-shipment-monitor {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.port-ship-item {
  background: #f8fafc;
  border: 1px solid var(--border-light);
  border-radius: 12px;
  padding: 11px 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.2s ease;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.port-ship-item:hover {
  background: #ffffff;
  border-color: #3b82f6;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.08);
}
.port-ship-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.port-ship-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.port-ship-name {
  font-weight: 700;
  font-size: 13px;
  color: var(--text-primary);
}
.port-ship-cat {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
}
.port-ship-right {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  color: #16a34a;
  background: rgba(22, 163, 74, 0.1);
  padding: 2px 8px;
  border-radius: 9999px;
}
.port-summary-ribbon {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  background: #07152f;
  border-radius: 12px;
  padding: 12px 14px;
  text-align: center;
}
.port-ribbon-stat strong {
  display: block;
  font-family: var(--font-heading);
  font-size: 15px;
  color: #ffffff;
}
.port-ribbon-stat span {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: #94a3b8;
}

/* 4. TECHNOLOGY: ARCHITECTURE STACK */
.hero-console-tech { border-color: rgba(16, 185, 129, 0.3); }
.tech-layer-pipeline {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tech-layer-card {
  background: #ffffff;
  border: 1px solid var(--border-light);
  border-radius: 12px;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tech-layer-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.tech-layer-tier {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--accent-purple);
}
.tech-layer-label {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-primary);
}
.tech-layer-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.tech-layer-pill {
  font-family: var(--font-mono);
  font-size: 10px;
  background: #f1f5f9;
  color: #334155;
  padding: 2px 7px;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
}
.tech-layer-telemetry {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 10.5px;
  background: #f8fafc;
  border: 1px solid var(--border-light);
  border-radius: 10px;
  padding: 9px 14px;
}

/* 5. PROCESS: 5-STAGE PIPELINE */
.hero-console-process { border-color: rgba(245, 158, 11, 0.3); }
.process-pipeline-stepper {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.stepper-item {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #ffffff;
  border: 1px solid var(--border-light);
  border-radius: 12px;
  padding: 10px 15px;
  transition: all 0.2s ease;
}
.stepper-item.is-active {
  border-color: var(--accent-purple);
  background: rgba(109, 53, 242, 0.04);
}
.stepper-num {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 800;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #07152f;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.stepper-item.is-active .stepper-num {
  background: var(--accent-purple);
  box-shadow: 0 0 10px rgba(109, 53, 242, 0.4);
}
.stepper-text {
  flex: 1;
}
.stepper-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}
.stepper-sub {
  font-size: 11px;
  color: var(--text-secondary);
}
.stepper-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: #16a34a;
  background: rgba(22, 163, 74, 0.1);
  padding: 2px 7px;
  border-radius: 9999px;
}
.stepper-delivery-badge {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 10.5px;
  background: #07152f;
  color: #94a3b8;
  padding: 10px 14px;
  border-radius: 10px;
}

/* 6. CONTACT: ARCHITECT DISPATCH */
.hero-console-contact { border-color: rgba(109, 53, 242, 0.3); }
.contact-dispatch-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dispatch-item {
  background: #ffffff;
  border: 1px solid var(--border-light);
  border-radius: 12px;
  padding: 12px 16px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  transition: all 0.2s ease;
}
.dispatch-item:hover {
  border-color: var(--accent-purple);
  box-shadow: 0 4px 14px rgba(109, 53, 242, 0.08);
}
.dispatch-icon {
  font-size: 18px;
  line-height: 1;
  padding-top: 2px;
}
.dispatch-item strong {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 2px;
}
.dispatch-item p {
  font-size: 11.5px;
  color: var(--text-secondary);
  line-height: 1.4;
  margin: 0;
}
.dispatch-footer-ribbon {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 10.5px;
  background: #07152f;
  color: #94a3b8;
  padding: 10px 14px;
  border-radius: 10px;
}

/* ── ABOUT PAGE: OUR STORY ARCHITECTURAL LAYOUT ───────────────────────────── */
.sec-our-story {
  padding: 95px 0;
  background: #ffffff;
}
.story-layout-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 52px;
  align-items: center;
  margin-bottom: 70px;
}
.story-building-card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(7, 21, 47, 0.08);
  border: 1px solid var(--border-light);
}
.story-building-card img {
  width: 100%;
  height: 380px;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
.story-building-card:hover img {
  transform: scale(1.03);
}
.story-overlay-badge {
  position: absolute;
  bottom: 20px;
  left: 20px;
  right: 20px;
  background: rgba(7, 21, 47, 0.88);
  backdrop-filter: blur(12px);
  padding: 14px 20px;
  border-radius: 14px;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid rgba(255, 255, 255, 0.15);
}
.mission-vision-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}
.mv-card-light {
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  border-radius: 18px;
  padding: 34px;
  box-shadow: var(--shadow-soft);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}
.mv-card-light:hover {
  transform: translateY(-4px);
  border-color: var(--accent-purple);
  box-shadow: var(--shadow-hover);
}
.mv-card-light::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--grad-purple-blue);
}
.mv-card-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}
.mv-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #ffffff;
  border: 1px solid var(--border-light);
  color: var(--accent-purple);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  box-shadow: 0 4px 10px rgba(7, 21, 47, 0.05);
}
.mv-card-title {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 800;
  color: var(--text-primary);
}
.mv-card-desc {
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* ── ABOUT PAGE: VALUES ───────────────────────────────────────────────────── */
.sec-our-values {
  padding: 90px 0 35px 0;
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-light);
}
.values-grid-light {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 36px;
}
.value-card-light {
  background: #ffffff;
  border: 1px solid var(--border-light);
  border-radius: 18px;
  padding: 32px 26px;
  box-shadow: var(--shadow-soft);
  transition: all 0.3s ease;
}
.value-card-light:hover {
  transform: translateY(-5px);
  border-color: var(--accent-purple);
  box-shadow: var(--shadow-hover);
}
.value-card-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--bg-soft);
  color: var(--accent-purple);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin-bottom: 18px;
  border: 1px solid var(--border-light);
}
.value-card-title {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 8px;
}
.value-card-desc {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* ── INDUSTRIES WE EMPOWER SECTION ───────────────────────────────────────── */
.sec-industries-light {
  padding: 85px 0 45px 0;
  background: #ffffff;
  border-top: 1px solid var(--border-light);
  position: relative;
}

.industries-header-flex {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  margin-bottom: 44px;
  flex-wrap: wrap;
}

.industries-grid-modern {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-bottom: 36px;
}

.industry-card-modern {
  background: #ffffff;
  border: 1px solid var(--border-light);
  border-radius: 18px;
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 4px 18px rgba(7, 21, 47, 0.04);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}

.industry-card-modern::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--accent-purple), var(--accent-blue));
  opacity: 0;
  transition: opacity 0.3s ease;
}

.industry-card-modern:hover {
  transform: translateY(-5px);
  border-color: rgba(109, 53, 242, 0.35);
  box-shadow: 0 16px 36px rgba(109, 53, 242, 0.09);
}

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

.ind-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.ind-icon-wrap {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: rgba(109, 53, 242, 0.08);
  color: var(--accent-purple);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  transition: all 0.3s ease;
  border: 1px solid rgba(109, 53, 242, 0.12);
}

.industry-card-modern:hover .ind-icon-wrap {
  background: linear-gradient(135deg, var(--accent-purple), var(--accent-blue));
  color: #ffffff;
  border-color: transparent;
  transform: scale(1.05);
}

.ind-num-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  opacity: 0.65;
  letter-spacing: 0.04em;
}

.ind-title {
  font-family: var(--font-heading);
  font-size: 19px;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}

.ind-desc {
  font-size: 13.5px;
  color: var(--text-secondary);
  line-height: 1.55;
  margin-bottom: 16px;
  flex: 1;
}

.ind-pills-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 12px;
  border-top: 1px solid rgba(226, 232, 240, 0.7);
}

.ind-pill {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--text-primary);
  background: #f8fafc;
  border: 1px solid var(--border-light);
  padding: 3px 9px;
  border-radius: 6px;
  letter-spacing: 0.01em;
  transition: all 0.2s ease;
}

.industry-card-modern:hover .ind-pill {
  background: rgba(109, 53, 242, 0.06);
  border-color: rgba(109, 53, 242, 0.2);
  color: var(--accent-purple);
}

.industries-bottom-banner {
  background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
  border: 1px solid var(--border-light);
  border-radius: 16px;
  padding: 24px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  box-shadow: 0 4px 16px rgba(7, 21, 47, 0.03);
  flex-wrap: wrap;
}

.ibb-text-group h4 {
  font-family: var(--font-heading);
  font-size: 16.5px;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.ibb-text-group p {
  font-size: 13.5px;
  color: var(--text-secondary);
  margin: 0;
}

@media (max-width: 1024px) {
  .industries-grid-modern {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .industries-grid-modern {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important;
    gap: 16px !important;
    padding: 8px 18px 24px 18px !important;
    margin-left: -18px !important;
    margin-right: -18px !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }
  .industries-grid-modern::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }
  .industry-card-modern {
    flex: 0 0 280px !important;
    min-width: 280px !important;
    max-width: 82vw !important;
    scroll-snap-align: start !important;
    box-sizing: border-box !important;
    height: auto !important;
  }
  .industries-bottom-banner {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
    padding: 20px !important;
  }
}

/* ── SUBPAGE HIGH-CONTRAST CTA BOX ────────────────────────────────────────── */
.sec-subpage-cta {
  padding: 20px 0 65px 0;
  background: #ffffff;
}
.subpage-cta-card-box {
  background: #07152f;
  border: 1px solid rgba(109, 53, 242, 0.35);
  border-radius: 26px;
  padding: 65px 60px;
  position: relative;
  overflow: hidden;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  box-shadow: 0 24px 60px rgba(7, 21, 47, 0.25);
}
.subpage-cta-card-box::before {
  content: '';
  position: absolute;
  top: -120px;
  right: -100px;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(109, 53, 242, 0.45) 0%, transparent 70%);
  pointer-events: none;
}
.subpage-cta-card-box::after {
  content: '';
  position: absolute;
  bottom: -100px;
  left: 20%;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(34, 211, 238, 0.25) 0%, transparent 70%);
  pointer-events: none;
}
.subpage-cta-content {
  position: relative;
  z-index: 2;
  max-width: 620px;
}
.subpage-cta-heading {
  font-family: var(--font-heading);
  font-size: clamp(32px, 3.8vw, 48px);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: #ffffff;
  margin-bottom: 16px;
}
.subpage-cta-lead {
  font-size: 16px;
  color: #94a3b8;
  line-height: 1.6;
  margin-bottom: 30px;
}
.subpage-cta-btns {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.subpage-cta-stats {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 30px;
  border-radius: 18px;
  min-width: 260px;
}
.cta-metric-item {
  display: flex;
  align-items: center;
  gap: 12px;
}
.cta-metric-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22d3ee;
}
.cta-metric-text strong {
  display: block;
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 800;
  color: #ffffff;
}
.cta-metric-text span {
  font-size: 12px;
  color: #94a3b8;
  font-family: var(--font-mono);
}

@media (max-width: 992px) {
  .hero-grid-two-col, .two-col-grid, .about-three-col-grid, .subpage-hero-grid, .contact-clean-grid, .story-layout-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .footer-grid-4col {
    grid-template-columns: 1fr 1fr;
    gap: 36px;
  }
  .nav-menu-light {
    display: none;
  }
  .core-services-grid, .values-grid-light, .more-projects-grid {
    grid-template-columns: 1fr 1fr;
  }
  .mission-vision-grid {
    grid-template-columns: 1fr;
  }
  .project-card-showcase-light {
    grid-template-columns: 1fr;
  }
  .project-thumbnails-rail {
    display: none;
  }
  .subpage-cta-card-box {
    flex-direction: column;
    text-align: left;
    padding: 40px 30px;
  }
}

@media (max-width: 640px) {
  .core-services-grid, .values-grid-light, .more-projects-grid {
    grid-template-columns: 1fr;
  }
  .subpage-hero-stats-row {
    flex-direction: column;
  }
}

/* ==========================================================================
   JZARR TECH — Eye-Attractive Visual Overhaul for Sections 3, 4, 5, 6 & Footer
   ========================================================================== */

/* ── 3. SECTION 03: ABOUT JZARR TECH ARCHITECTURAL UPGRADE ────────────────── */
.sec-about-light {
  padding: 105px 0;
  background: 
    radial-gradient(circle at 10% 30%, rgba(109, 53, 242, 0.05) 0%, transparent 45%),
    radial-gradient(circle at 90% 70%, rgba(34, 211, 238, 0.05) 0%, transparent 45%),
    linear-gradient(180deg, #ffffff 0%, #f8fafc 50%, #ffffff 100%);
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
  position: relative;
}
.about-three-col-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr 0.85fr;
  gap: 36px;
  align-items: center;
}
.about-building-frame {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 20px 45px rgba(7, 21, 47, 0.1), 0 4px 14px rgba(109, 53, 242, 0.08);
  border: 1px solid rgba(109, 53, 242, 0.2);
}
.about-building-frame img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}
.about-building-frame:hover img {
  transform: scale(1.04);
}
.watch-story-badge {
  position: absolute;
  top: 20px;
  left: 20px;
  background: rgba(7, 21, 47, 0.85);
  backdrop-filter: blur(10px);
  padding: 8px 16px;
  border-radius: 9999px;
  color: #ffffff;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  letter-spacing: 0.06em;
}
.about-building-footer-tag {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(7, 21, 47, 0.92) 100%);
  padding: 30px 20px 16px 20px;
  color: #ffffff;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: 0.06em;
}
.about-metrics-pills-row {
  display: flex;
  gap: 14px;
  margin-top: 24px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.about-mini-metric {
  background: #ffffff;
  border: 1px solid var(--border-light);
  box-shadow: 0 4px 14px rgba(7, 21, 47, 0.04);
  padding: 8px 16px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.about-mini-metric strong {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 800;
  color: var(--accent-purple);
}
.about-mini-metric span {
  font-size: 11.5px;
  color: var(--text-secondary);
  font-weight: 600;
}
/* ── 3. SECTION 03: CORPORATE ECOSYSTEM ARCHITECTURE PANEL ─────────────── */
.group-tree-panel {
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(109, 53, 242, 0.2);
  border-radius: 26px;
  padding: 30px 28px;
  box-shadow: 0 22px 55px rgba(7, 21, 47, 0.08), 0 4px 18px rgba(109, 53, 242, 0.06);
  position: relative;
  overflow: hidden;
  transition: box-shadow 0.3s ease;
}
.group-tree-panel:hover {
  box-shadow: 0 26px 65px rgba(7, 21, 47, 0.11), 0 6px 24px rgba(109, 53, 242, 0.09);
}

/* Header */
.tree-header-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-light);
}
.tree-header-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--text-primary);
  text-transform: uppercase;
}
.tree-header-tag .sys-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 8px #22c55e;
  animation: pulse-dot 1.5s infinite;
}
.tree-header-badge {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  background: rgba(109, 53, 242, 0.08);
  color: var(--accent-purple);
  padding: 3px 9px;
  border-radius: 9999px;
  border: 1px solid rgba(109, 53, 242, 0.18);
}

/* Base Node Card */
.tree-node-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 15px 18px;
  border-radius: 16px;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

/* Level 1: Parent Holding Card */
.parent-holding-card {
  background: #f8fafc;
  border: 1px solid var(--border-light);
}
.parent-holding-card:hover {
  background: #ffffff;
  border-color: rgba(109, 53, 242, 0.35);
  box-shadow: 0 6px 18px rgba(7, 21, 47, 0.06);
  transform: translateY(-2px);
}

.node-emblem-box {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.emblem-holding {
  background: #ffffff;
  border: 1px solid var(--border-light);
  box-shadow: 0 2px 8px rgba(7, 21, 47, 0.05);
}
.holding-logo-img {
  height: 28px;
  width: auto;
  object-fit: contain;
}

.node-card-content {
  text-align: left;
  flex: 1;
}
.node-level-tag {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-bottom: 2px;
}
.node-title {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0 0 2px 0;
  line-height: 1.2;
}
.node-desc {
  font-size: 11.5px;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.35;
}
.node-status-pill {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 3px 9px;
  border-radius: 9999px;
  white-space: nowrap;
}
.parent-holding-card .node-status-pill {
  background: #e2e8f0;
  color: #475569;
}

/* High-Tech Architecture Bus Connector */
.tree-bus-connector {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 24px;
  position: relative;
}
.bus-line {
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, rgba(109, 53, 242, 0.5), rgba(34, 211, 238, 0.6));
}
.bus-dot {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22d3ee;
  box-shadow: 0 0 10px #22d3ee;
  animation: laserPulse 1.8s infinite ease-in-out;
}
.bus-arrow {
  font-size: 8px;
  color: #22d3ee;
  line-height: 1;
  margin-top: -3px;
}

/* Level 2: Flagship Division Card (JZARR TECH) */
.active-division-card {
  background: linear-gradient(135deg, #07152f 0%, #0c1e40 100%);
  border: 1px solid rgba(34, 211, 238, 0.4);
  box-shadow: 0 12px 30px rgba(7, 21, 47, 0.16), 0 0 20px rgba(109, 53, 242, 0.2);
}
.active-division-card:hover {
  transform: translateY(-2px);
  border-color: rgba(34, 211, 238, 0.7);
  box-shadow: 0 16px 36px rgba(7, 21, 47, 0.22), 0 0 28px rgba(34, 211, 238, 0.3);
}
.emblem-tech {
  background: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15), 0 0 16px rgba(34, 211, 238, 0.3);
}
.tech-logo-img {
  height: 32px;
  width: auto;
  object-fit: contain;
}
.active-division-card .node-level-tag {
  color: #22d3ee;
}
.active-division-card .node-title {
  color: #ffffff;
}
.active-division-card .node-desc {
  color: #94a3b8;
}
.pill-active {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, 0.3);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.pulse-dot-green {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #22c55e;
  animation: pulse-dot 1.5s infinite;
}

/* Level 3: 2x2 Bento Capability Matrix */
.tree-pillars-bento {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.pillar-card {
  background: #ffffff;
  border: 1px solid var(--border-light);
  border-radius: 14px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.pillar-card:hover {
  background: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(7, 21, 47, 0.06);
}
.pillar-software:hover { border-color: var(--accent-purple); }
.pillar-cloud:hover { border-color: #3b82f6; }
.pillar-ai:hover { border-color: #0284c7; }
.pillar-growth:hover { border-color: var(--accent-magenta); }

.pillar-icon-box {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.icon-purple {
  background: rgba(109, 53, 242, 0.1);
  color: var(--accent-purple);
}
.icon-blue {
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
}
.icon-cyan {
  background: rgba(34, 211, 238, 0.12);
  color: #0284c7;
}
.icon-pink {
  background: rgba(236, 72, 153, 0.12);
  color: var(--accent-magenta);
}
.pillar-info {
  display: flex;
  flex-direction: column;
}
.pillar-name {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
}
.pillar-tech {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* Bottom Governance & Assurance Footer */
.tree-governance-footer {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px dashed var(--border-light);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-muted);
}
.tree-governance-footer span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

@media (max-width: 520px) {
  .group-tree-panel {
    padding: 22px 16px;
  }
  .tree-pillars-bento {
    grid-template-columns: 1fr;
  }
  .tree-node-card {
    flex-direction: column;
    text-align: center;
  }
  .node-card-content {
    text-align: center;
  }
}

/* ── 4. SECTION 04: CAPABILITIES BENTO MATRIX ─────────────────────────────── */
.sec-capabilities-light {
  padding: 100px 0;
  background: #ffffff;
  position: relative;
}
.capabilities-matrix-layout {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 52px;
  align-items: center;
}
.cap-guarantee-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  padding: 8px 16px;
  border-radius: 9999px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  color: #166534;
  margin-top: 18px;
}
.capabilities-bento-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.bento-cap-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  border-radius: 18px;
  padding: 24px;
  box-shadow: var(--shadow-soft);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}
.bento-cap-card:hover {
  transform: translateY(-5px);
  border-color: var(--accent-purple);
  box-shadow: 0 16px 36px rgba(109, 53, 242, 0.12);
  background: #ffffff;
}
.bento-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.bento-icon-box {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  border: 1px solid var(--border-light);
}
.bento-badge {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}
.bento-card-title {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 8px;
}
.bento-card-desc {
  font-size: 13.5px;
  color: var(--text-secondary);
  line-height: 1.55;
  margin-bottom: 14px;
}
.bento-tech-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.bento-tech-tags span {
  background: #ffffff;
  border: 1px solid var(--border-light);
  padding: 3px 9px;
  border-radius: 9999px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-muted);
}

/* ── 5. SECTION 05: THE STACK CYBER TECH CARDS ───────────────────────────── */
.sec-stack-light {
  padding: 85px 0 35px 0;
  background: 
    radial-gradient(circle at 80% 25%, rgba(109, 53, 242, 0.05) 0%, transparent 45%),
    radial-gradient(circle at 20% 75%, rgba(34, 211, 238, 0.05) 0%, transparent 45%),
    var(--bg-secondary);
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
}
.tech-cards-grid-light {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
}
.tech-card-item {
  background: #ffffff;
  border: 1px solid var(--border-light);
  border-radius: 18px;
  padding: 26px 18px;
  text-align: center;
  box-shadow: 0 6px 20px rgba(7, 21, 47, 0.04);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.tech-card-item:hover {
  transform: translateY(-6px);
  border-color: var(--card-accent, var(--accent-purple));
  box-shadow: 0 16px 36px rgba(7, 21, 47, 0.08), 0 0 20px rgba(109, 53, 242, 0.15);
}
.tech-card-icon-aura {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-bottom: 14px;
  border: 1px solid var(--border-light);
  transition: transform 0.3s ease;
}
.tech-card-item:hover .tech-card-icon-aura {
  transform: scale(1.1);
}
.tech-card-name {
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.tech-card-sub {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 12px;
}
.tech-card-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--text-secondary);
  background: var(--bg-secondary);
  padding: 3px 10px;
  border-radius: 9999px;
  border: 1px solid var(--border-light);
}

/* ── 6. SECTION 06: MODERN ENTERPRISE WORK SHOWCASE ──────────────────────── */
.sec-projects-light {
  padding: 100px 0;
  background: #ffffff;
  position: relative;
}

/* Header */
.work-section-header {
  margin-bottom: 36px;
}
.work-header-flex {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}

/* Horizontal Filter Pills Navigation (Scrollbar-Free) */
.work-filter-tabs-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  background: #f8fafc;
  border: 1px solid var(--border-light);
  border-radius: 9999px;
  margin-bottom: 36px;
  overflow-x: auto;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}
.work-filter-tabs-bar::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}
.work-pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  border-radius: 9999px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font-heading);
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.work-pill-btn:hover {
  background: #ffffff;
  color: var(--text-primary);
  border-color: var(--border-light);
  box-shadow: 0 4px 12px rgba(7, 21, 47, 0.05);
}
.work-pill-btn.active {
  background: #ffffff;
  color: var(--text-primary);
  border-color: rgba(109, 53, 242, 0.35);
  box-shadow: 0 4px 16px rgba(109, 53, 242, 0.12);
}
.pill-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}
.pill-title {
  letter-spacing: -0.01em;
}
.pill-tag {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-muted);
  background: #f1f5f9;
  padding: 2px 7px;
  border-radius: 9999px;
}
.work-pill-btn.active .pill-tag {
  background: rgba(109, 53, 242, 0.08);
  color: var(--accent-purple);
}

/* Panels */
.work-showcase-panel {
  display: none;
}
.work-showcase-panel.active {
  display: block;
}

/* Showcase Master Card */
.work-showcase-card {
  background: #ffffff;
  border: 1px solid var(--border-light);
  border-radius: 26px;
  padding: 38px 42px;
  box-shadow: 0 20px 50px rgba(7, 21, 47, 0.06), 0 2px 10px rgba(7, 21, 47, 0.03);
  position: relative;
  overflow: hidden;
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

/* Ambient Brand Glows */
.work-showcase-card.aura-crimson {
  box-shadow: 0 22px 55px rgba(239, 68, 68, 0.08), 0 2px 10px rgba(7, 21, 47, 0.03);
}
.work-showcase-card.aura-blue {
  box-shadow: 0 22px 55px rgba(59, 130, 246, 0.09), 0 2px 10px rgba(7, 21, 47, 0.03);
}
.work-showcase-card.aura-purple {
  box-shadow: 0 22px 55px rgba(139, 92, 246, 0.1), 0 2px 10px rgba(7, 21, 47, 0.03);
}
.work-showcase-card.aura-amber {
  box-shadow: 0 22px 55px rgba(234, 179, 8, 0.09), 0 2px 10px rgba(7, 21, 47, 0.03);
}

/* Top Meta Bar */
.work-showcase-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border-light);
  margin-bottom: 32px;
}
.work-meta-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.work-live-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(34, 197, 94, 0.1);
  color: #16a34a;
  border: 1px solid rgba(34, 197, 94, 0.25);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 4px 11px;
  border-radius: 9999px;
}
.work-live-chip.chip-blue {
  background: rgba(59, 130, 246, 0.1);
  color: #2563eb;
  border-color: rgba(59, 130, 246, 0.25);
}
.work-live-chip.chip-purple {
  background: rgba(139, 92, 246, 0.1);
  color: #7c3aed;
  border-color: rgba(139, 92, 246, 0.25);
}
.work-live-chip.chip-amber {
  background: rgba(234, 179, 8, 0.1);
  color: #b45309;
  border-color: rgba(234, 179, 8, 0.25);
}
.status-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  animation: pulse-dot 1.5s infinite;
}
.work-category-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.08em;
}
.work-category-label.text-blue { color: #2563eb; }
.work-category-label.text-purple { color: #7c3aed; }
.work-category-label.text-amber { color: #b45309; }

.work-tags-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.w-tech-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: #475569;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  padding: 3px 9px;
  border-radius: 6px;
}

/* 2-Column Split Body */
.work-showcase-split {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 48px;
  align-items: center;
}

/* Left Details */
.work-project-title {
  font-family: var(--font-heading);
  font-size: 26px;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.25;
  margin-bottom: 14px;
}
.work-project-summary {
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 26px;
}

/* Metric Cards */
.work-metrics-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 26px;
}
.w-metric-box {
  background: #f8fafc;
  border: 1px solid var(--border-light);
  border-radius: 14px;
  padding: 14px 16px;
  text-align: left;
  transition: all 0.2s ease;
}
.w-metric-box:hover {
  background: #ffffff;
  border-color: var(--accent-purple);
  box-shadow: 0 4px 14px rgba(109, 53, 242, 0.08);
  transform: translateY(-2px);
}
.m-val {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.1;
  margin-bottom: 4px;
}
.m-lbl {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  line-height: 1.3;
}

/* Checklist */
.work-checklist {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-bottom: 30px;
}
.check-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  color: var(--text-primary);
  line-height: 1.45;
}
.chk-icon {
  font-weight: 800;
  color: #16a34a;
  background: rgba(22, 163, 74, 0.1);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  flex-shrink: 0;
  margin-top: 1px;
}

.work-cta-wrap {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

/* Right Device Mockup Frame */
.work-showcase-visual {
  position: relative;
}
.work-device-frame {
  background: #07152f;
  border-radius: 18px;
  padding: 10px;
  box-shadow: 0 24px 60px rgba(7, 21, 47, 0.16), 0 4px 16px rgba(7, 21, 47, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.work-device-frame:hover {
  transform: translateY(-4px);
  box-shadow: 0 30px 70px rgba(7, 21, 47, 0.22), 0 6px 20px rgba(7, 21, 47, 0.1);
}
.work-device-frame img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  display: block;
  object-fit: cover;
}

/* Responsive Breakpoints for Work Showcase */
@media (max-width: 991px) {
  .work-showcase-split {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .work-showcase-card {
    padding: 28px 24px;
  }
}
@media (max-width: 600px) {
  .work-metrics-strip {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
  .w-metric-box {
    padding: 10px 6px;
    text-align: center;
  }
  .w-metric-box .m-val {
    font-size: 16px;
  }
  .w-metric-box .m-lbl {
    font-size: 9px;
  }
  .work-project-title {
    font-size: 22px;
  }
  .work-showcase-top {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ── 7. PORTFOLIO PAGE: COMPREHENSIVE PRODUCTION SHOWCASE ─────────────────── */
.sec-portfolio-showcase {
  padding: 85px 0 25px 0;
  background: #ffffff;
  position: relative;
}

/* Header & Intro */
.port-section-header {
  margin-bottom: 34px;
}
.port-header-flex {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}

/* Horizontal Filter Pills Bar (Scrollbar-Free) */
.port-filter-tabs-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  background: #f8fafc;
  border: 1px solid var(--border-light);
  border-radius: 9999px;
  margin-bottom: 38px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.port-filter-tabs-bar::-webkit-scrollbar {
  display: none;
}
.port-pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  border-radius: 9999px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font-heading);
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.port-pill-btn:hover {
  background: #ffffff;
  color: var(--text-primary);
  border-color: var(--border-light);
  box-shadow: 0 4px 12px rgba(7, 21, 47, 0.05);
}
.port-pill-btn.active {
  background: #ffffff;
  color: var(--text-primary);
  border-color: rgba(109, 53, 242, 0.35);
  box-shadow: 0 4px 16px rgba(109, 53, 242, 0.12);
}
.port-pill-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}
.port-pill-tag {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-muted);
  background: #f1f5f9;
  padding: 2px 7px;
  border-radius: 9999px;
}
.port-pill-btn.active .port-pill-tag {
  background: rgba(109, 53, 242, 0.08);
  color: var(--accent-purple);
}

/* Master Spotlight Container & Panels */
.port-spotlight-panel {
  display: none;
}
.port-spotlight-panel.active {
  display: block;
}

/* Master Showcase Card */
.port-master-card {
  background: #ffffff;
  border: 1px solid var(--border-light);
  border-radius: 28px;
  padding: 40px 46px;
  box-shadow: 0 20px 50px rgba(7, 21, 47, 0.06), 0 2px 10px rgba(7, 21, 47, 0.03);
  position: relative;
  overflow: hidden;
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

/* Ambient Brand Glows */
.port-master-card.aura-redapple {
  box-shadow: 0 22px 55px rgba(239, 68, 68, 0.08), 0 2px 10px rgba(7, 21, 47, 0.03);
}
.port-master-card.aura-filers {
  box-shadow: 0 22px 55px rgba(59, 130, 246, 0.09), 0 2px 10px rgba(7, 21, 47, 0.03);
}
.port-master-card.aura-crm {
  box-shadow: 0 22px 55px rgba(139, 92, 246, 0.1), 0 2px 10px rgba(7, 21, 47, 0.03);
}
.port-master-card.aura-now {
  box-shadow: 0 22px 55px rgba(234, 179, 8, 0.09), 0 2px 10px rgba(7, 21, 47, 0.03);
}
.port-master-card.aura-elvify {
  box-shadow: 0 22px 55px rgba(236, 72, 153, 0.09), 0 2px 10px rgba(7, 21, 47, 0.03);
}

/* Card Top Metadata Bar */
.port-card-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border-light);
  margin-bottom: 32px;
}
.port-meta-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.port-status-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(34, 197, 94, 0.1);
  color: #16a34a;
  border: 1px solid rgba(34, 197, 94, 0.25);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 4px 11px;
  border-radius: 9999px;
}
.port-cat-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.08em;
}
.port-tags-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.port-tech-pill {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: #475569;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  padding: 3px 9px;
  border-radius: 6px;
}

/* 2-Column Split Body */
.port-card-split {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 48px;
  align-items: center;
}

/* Left Details Column */
.port-project-title {
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.25;
  margin-bottom: 14px;
}
.port-project-desc {
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.65;
  margin-bottom: 26px;
}

/* 4-Metric Grid */
.port-metrics-4grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 26px;
}
.port-m-card {
  background: #f8fafc;
  border: 1px solid var(--border-light);
  border-radius: 14px;
  padding: 14px 16px;
  text-align: left;
  transition: all 0.2s ease;
}
.port-m-card:hover {
  background: #ffffff;
  border-color: var(--accent-purple);
  box-shadow: 0 4px 14px rgba(109, 53, 242, 0.08);
  transform: translateY(-2px);
}
.port-m-val {
  display: block;
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.1;
  margin-bottom: 4px;
}
.port-m-lbl {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  line-height: 1.3;
}

/* Features Checklist */
.port-features-checklist {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-bottom: 30px;
}
.port-check-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  color: var(--text-primary);
  line-height: 1.45;
}
.port-chk-icon {
  font-weight: 800;
  color: #16a34a;
  background: rgba(22, 163, 74, 0.1);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  flex-shrink: 0;
  margin-top: 1px;
}

.port-actions-row {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
}

/* Right Device Mockup Frame */
.port-card-visual {
  position: relative;
}
.port-device-frame {
  background: #07152f;
  border-radius: 20px;
  padding: 10px;
  box-shadow: 0 24px 60px rgba(7, 21, 47, 0.16), 0 4px 16px rgba(7, 21, 47, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.port-device-frame:hover {
  transform: translateY(-4px);
  box-shadow: 0 30px 70px rgba(7, 21, 47, 0.22), 0 6px 20px rgba(7, 21, 47, 0.1);
}
.port-device-frame img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  display: block;
  object-fit: cover;
}
.port-frame-badge {
  position: absolute;
  bottom: 22px;
  right: 22px;
  background: rgba(7, 21, 47, 0.88);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 9999px;
  padding: 5px 14px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  color: #22d3ee;
}

/* Bottom Discovery Gallery (5 Mini-Cards Grid) */
.port-discovery-gallery {
  margin-top: 50px;
  margin-bottom: 50px;
}
.port-gallery-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 14px;
}
.port-gallery-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}
.port-gallery-card {
  background: #ffffff;
  border: 1px solid var(--border-light);
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
}
.port-gallery-card:hover {
  transform: translateY(-4px);
  border-color: var(--accent-purple);
  box-shadow: 0 12px 30px rgba(109, 53, 242, 0.12);
}
.port-gallery-card.active {
  border-color: var(--accent-purple);
  box-shadow: 0 12px 32px rgba(109, 53, 242, 0.18);
  background: #faf5ff;
}
.port-gallery-thumb {
  position: relative;
  height: 120px;
  overflow: hidden;
  background: #07152f;
}
.port-gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.port-gallery-card:hover .port-gallery-thumb img {
  transform: scale(1.06);
}
.port-gallery-body {
  padding: 14px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.port-gallery-badge-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.port-gallery-cat {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 9999px;
}
.port-gallery-stat {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 600;
  color: #16a34a;
}
.port-gallery-name {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0 0 4px 0;
  line-height: 1.25;
}
.port-gallery-desc {
  font-size: 11.5px;
  color: var(--text-secondary);
  line-height: 1.35;
  margin: 0 0 10px 0;
  flex: 1;
}
.port-gallery-link {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  color: var(--accent-purple);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: auto;
}

.port-gallery-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  color: #16a34a;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  padding: 3px 8px;
  border-radius: 9999px;
  text-decoration: none;
  transition: all 0.2s ease;
  margin-top: auto;
  cursor: pointer;
}
.port-gallery-live-badge:hover {
  background: #16a34a;
  color: #ffffff;
  border-color: #16a34a;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(22, 163, 74, 0.25);
}

.port-device-frame-link,
.work-device-frame-link {
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.port-device-frame-link:hover .port-frame-badge,
.work-device-frame-link:hover .port-frame-badge {
  background: #2563eb;
  color: #ffffff;
  border-color: #3b82f6;
  box-shadow: 0 0 16px rgba(37, 99, 235, 0.4);
}

/* Portfolio Responsive Breakpoints */
@media (max-width: 1100px) {
  .port-gallery-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 991px) {
  .port-card-split {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .port-master-card {
    padding: 24px 20px;
  }
}
@media (max-width: 768px) {
  /* Discovery Cards in Sleek Horizontal Touch-Scroll Carousel */
  .port-discovery-gallery {
    margin-top: 32px !important;
    margin-bottom: 32px !important;
  }
  .port-gallery-header {
    margin-bottom: 12px !important;
    gap: 8px !important;
  }
  .port-gallery-grid {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    gap: 14px !important;
    padding: 6px 4px 18px 4px !important;
    width: 100% !important;
    scroll-snap-type: x mandatory !important;
  }
  .port-gallery-grid::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }
  .port-gallery-card {
    flex: 0 0 250px !important;
    min-width: 250px !important;
    max-width: 78vw !important;
    scroll-snap-align: start !important;
    box-sizing: border-box !important;
    border-radius: 16px !important;
  }
  .port-gallery-thumb {
    height: 110px !important;
  }
  .port-gallery-body {
    padding: 12px 14px !important;
  }
  .port-gallery-name {
    font-size: 13.5px !important;
    margin-bottom: 4px !important;
  }
  .port-gallery-desc {
    font-size: 11px !important;
    line-height: 1.35 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    margin-bottom: 8px !important;
  }

  /* Master Spotlight Card Mobile Polish */
  .port-master-card {
    padding: 20px 14px !important;
    border-radius: 18px !important;
  }
  .port-card-top-bar {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
    margin-bottom: 16px !important;
  }
  .port-meta-left {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .port-tags-wrap {
    flex-wrap: wrap !important;
    gap: 5px !important;
  }
  .port-tech-pill {
    font-size: 9.5px !important;
    padding: 3px 8px !important;
  }
  .port-project-title {
    font-size: 18px !important;
    line-height: 1.3 !important;
    margin-bottom: 10px !important;
  }
  .port-project-desc {
    font-size: 12.5px !important;
    line-height: 1.55 !important;
    margin-bottom: 16px !important;
  }
  .port-metrics-4grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    margin-bottom: 16px !important;
  }
  .port-m-card {
    padding: 9px 6px !important;
    text-align: center !important;
  }
  .port-m-val {
    font-size: 16px !important;
    margin-bottom: 2px !important;
  }
  .port-m-lbl {
    font-size: 9px !important;
    line-height: 1.2 !important;
  }
  .port-features-checklist {
    gap: 6px !important;
    margin-bottom: 18px !important;
  }
  .port-check-item {
    font-size: 11.5px !important;
    line-height: 1.4 !important;
  }
  .port-actions-row {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 10px !important;
  }
  .port-actions-row a {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 12px 18px !important;
    font-size: 13.5px !important;
  }
  .port-device-frame {
    padding: 6px !important;
    border-radius: 14px !important;
  }
  .port-frame-badge {
    bottom: 12px !important;
    right: 12px !important;
    font-size: 9px !important;
    padding: 4px 10px !important;
  }

  /* Portfolio Hero Stats Ribbon on Mobile */
  .portfolio-hero-stats-strip {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    margin-top: 18px !important;
  }
  .port-stat-unit {
    padding: 10px 12px !important;
    border-radius: 10px !important;
  }
  .port-stat-unit strong {
    font-size: 17px !important;
  }
  .port-stat-unit span {
    font-size: 9px !important;
  }
}

@media (max-width: 1100px) {
  .about-three-col-grid {
    grid-template-columns: 1fr 1fr;
  }
  .capabilities-matrix-layout {
    grid-template-columns: 1fr;
  }
  .tech-cards-grid-light {
    grid-template-columns: repeat(3, 1fr);
  }
  .project-metrics-ribbon {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {
  .about-three-col-grid {
    grid-template-columns: 1fr;
  }
  .capabilities-bento-grid {
    grid-template-columns: 1fr;
  }
  .tech-cards-grid-light {
    grid-template-columns: 1fr 1fr;
  }
  .project-card-showcase-light {
    grid-template-columns: 1fr;
  }
  .project-thumbnails-rail {
    display: none;
  }
}

/* ── UPDATED SECTION 03 & 04 STYLES ─────────────────────────────────────── */
.about-two-col-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 50px;
  align-items: center;
}
.sec-services-homepage-light {
  padding: 100px 0;
  background: #ffffff;
}
.sec-services-header-box {
  margin-bottom: 36px;
}
/* ── NEW EXECUTIVE 4-COLUMN SERVICES TAB NAVIGATION ─────────────────── */
.services-category-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 36px;
  width: 100%;
}

.srv-cat-tab-btn {
  position: relative;
  background: #ffffff;
  border: 2px solid #cbd5e1;
  border-bottom: 4px solid #94a3b8; /* Tactile mechanical button depth */
  border-radius: 16px;
  padding: 16px 16px 12px;
  cursor: pointer !important;
  text-align: left;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 14px rgba(7, 21, 47, 0.05), 0 1px 3px rgba(7, 21, 47, 0.04);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  user-select: none;
}

.srv-cat-tab-btn * {
  cursor: pointer;
}

.srv-cat-tab-btn:hover {
  transform: translateY(-4px);
  border-color: #64748b;
  border-bottom-color: #475569;
  box-shadow: 0 14px 28px -4px rgba(7, 21, 47, 0.12), 0 2px 6px rgba(7, 21, 47, 0.06);
}

.srv-cat-tab-btn:active {
  transform: translateY(1px);
  border-bottom-width: 2px;
  box-shadow: 0 2px 6px rgba(7, 21, 47, 0.08);
}

/* Permanent Visible Top Glow / Accent Bar */
.srv-tab-glow-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  opacity: 0.85; /* Permanently visible for clear category identity */
  transition: all 0.25s ease;
}

.srv-cat-tab-btn:hover .srv-tab-glow-bar,
.srv-cat-tab-btn.active .srv-tab-glow-bar {
  opacity: 1;
  height: 5px;
}

.srv-tab-card-inner {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.srv-tab-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.srv-tab-index {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #64748b;
}

.srv-tab-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 9999px;
  background: rgba(100, 116, 139, 0.08);
  color: #64748b;
  transition: all 0.25s ease;
}

.srv-pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  display: inline-block;
}

.srv-tab-main {
  display: flex;
  align-items: center;
  gap: 12px;
}

.srv-tab-icon-wrap {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.25s ease;
}

.srv-icon-dev {
  background: rgba(109, 53, 242, 0.1);
  color: #6d35f2;
}

.srv-icon-ai {
  background: rgba(2, 132, 199, 0.1);
  color: #0284c7;
}

.srv-icon-mkt {
  background: rgba(219, 39, 119, 0.1);
  color: #db2777;
}

.srv-icon-brand {
  background: rgba(217, 119, 6, 0.1);
  color: #d97706;
}

.srv-tab-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.srv-tab-heading {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 800;
  color: var(--navy-dark, #07152f);
  margin: 0;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.srv-tab-sub {
  font-family: var(--font-body);
  font-size: 11.5px;
  color: #64748b;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── DIVISION BRAND VARIATIONS & ACTIVE STATES (HOMEPAGE) ── */

/* 1. DEV */
.srv-cat-tab-btn[data-cat="cat-dev"]:hover {
  border-color: #6d35f2;
  border-bottom-color: #6d35f2;
}
.srv-cat-tab-btn[data-cat="cat-dev"].active {
  background: #ffffff;
  border-color: #6d35f2 !important;
  border-bottom: 4px solid #6d35f2 !important;
  box-shadow: 0 16px 36px -6px rgba(109, 53, 242, 0.25), 0 0 0 1.5px #6d35f2 !important;
  transform: translateY(-2px);
}
.srv-cat-tab-btn[data-cat="cat-dev"].active .srv-tab-badge {
  background: rgba(109, 53, 242, 0.12);
  color: #6d35f2;
}
.srv-cat-tab-btn[data-cat="cat-dev"].active .sp-tab-btn-pill-active {
  background: #6d35f2;
  color: #ffffff;
  box-shadow: 0 2px 10px rgba(109, 53, 242, 0.4);
}
.srv-cat-tab-btn[data-cat="cat-dev"].active .sp-tab-hint-text {
  color: #6d35f2;
}

/* 2. AI */
.srv-cat-tab-btn[data-cat="cat-ai"]:hover {
  border-color: #0284c7;
  border-bottom-color: #0284c7;
}
.srv-cat-tab-btn[data-cat="cat-ai"].active {
  background: #ffffff;
  border-color: #0284c7 !important;
  border-bottom: 4px solid #0284c7 !important;
  box-shadow: 0 16px 36px -6px rgba(2, 132, 199, 0.25), 0 0 0 1.5px #0284c7 !important;
  transform: translateY(-2px);
}
.srv-cat-tab-btn[data-cat="cat-ai"].active .srv-tab-badge {
  background: rgba(2, 132, 199, 0.12);
  color: #0284c7;
}
.srv-cat-tab-btn[data-cat="cat-ai"].active .sp-tab-btn-pill-active {
  background: #0284c7;
  color: #ffffff;
  box-shadow: 0 2px 10px rgba(2, 132, 199, 0.4);
}
.srv-cat-tab-btn[data-cat="cat-ai"].active .sp-tab-hint-text {
  color: #0284c7;
}

/* 3. MARKETING */
.srv-cat-tab-btn[data-cat="cat-mkt"]:hover {
  border-color: #db2777;
  border-bottom-color: #db2777;
}
.srv-cat-tab-btn[data-cat="cat-mkt"].active {
  background: #ffffff;
  border-color: #db2777 !important;
  border-bottom: 4px solid #db2777 !important;
  box-shadow: 0 16px 36px -6px rgba(219, 39, 119, 0.25), 0 0 0 1.5px #db2777 !important;
  transform: translateY(-2px);
}
.srv-cat-tab-btn[data-cat="cat-mkt"].active .srv-tab-badge {
  background: rgba(219, 39, 119, 0.12);
  color: #db2777;
}
.srv-cat-tab-btn[data-cat="cat-mkt"].active .sp-tab-btn-pill-active {
  background: #db2777;
  color: #ffffff;
  box-shadow: 0 2px 10px rgba(219, 39, 119, 0.4);
}
.srv-cat-tab-btn[data-cat="cat-mkt"].active .sp-tab-hint-text {
  color: #db2777;
}

/* 4. BRAND */
.srv-cat-tab-btn[data-cat="cat-brand"]:hover {
  border-color: #d97706;
  border-bottom-color: #d97706;
}
.srv-cat-tab-btn[data-cat="cat-brand"].active {
  background: #ffffff;
  border-color: #d97706 !important;
  border-bottom: 4px solid #d97706 !important;
  box-shadow: 0 16px 36px -6px rgba(217, 119, 6, 0.25), 0 0 0 1.5px #d97706 !important;
  transform: translateY(-2px);
}
.srv-cat-tab-btn[data-cat="cat-brand"].active .srv-tab-badge {
  background: rgba(217, 119, 6, 0.12);
  color: #d97706;
}
.srv-cat-tab-btn[data-cat="cat-brand"].active .sp-tab-btn-pill-active {
  background: #d97706;
  color: #ffffff;
  box-shadow: 0 2px 10px rgba(217, 119, 6, 0.4);
}
.srv-cat-tab-btn[data-cat="cat-brand"].active .sp-tab-hint-text {
  color: #d97706;
}

.srv-cat-tab-btn.active .srv-pulse-dot {
  animation: srvPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes srvPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.3; transform: scale(0.7); }
}

/* Responsive grid transitions */
@media (max-width: 1100px) and (min-width: 769px) {
  .services-category-tabs {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
}
.services-category-block {
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  border-radius: 24px;
  padding: 36px;
  box-shadow: 0 10px 30px rgba(7, 21, 47, 0.03);
}
.category-banner-strip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 28px;
  flex-wrap: wrap;
  gap: 16px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border-light);
}
.cat-pill-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--accent-purple);
  border: 1px solid rgba(109, 53, 242, 0.25);
  background: #ffffff;
  padding: 4px 12px;
  border-radius: 9999px;
  margin-bottom: 8px;
}
.cat-strip-heading {
  font-family: var(--font-heading);
  font-size: 19px;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0;
}
.btn-view-cat-link {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--accent-purple);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: gap 0.2s ease;
}
.btn-view-cat-link:hover {
  gap: 10px;
}
.mobile-swipe-indicator {
  display: none;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--accent-purple);
  background: rgba(109, 53, 242, 0.08);
  border: 1px dashed rgba(109, 53, 242, 0.25);
  padding: 6px 14px;
  border-radius: 9999px;
  margin-bottom: 14px;
  text-align: center;
  letter-spacing: 0.06em;
}
@media (max-width: 992px) {
  .mobile-swipe-indicator {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 auto 16px auto;
  }
}
.services-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.service-bento-card {
  background: #ffffff;
  border: 1px solid var(--border-light);
  border-radius: 18px;
  padding: 26px;
  box-shadow: 0 4px 14px rgba(7, 21, 47, 0.03);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
}
.service-bento-card:hover {
  transform: translateY(-5px);
  border-color: var(--accent-purple);
  box-shadow: 0 16px 36px rgba(109, 53, 242, 0.12);
}
.srv-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.srv-icon-box {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  border: 1px solid var(--border-light);
}
.srv-num-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
}
.srv-card-title {
  font-family: var(--font-heading);
  font-size: 17.5px;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 8px;
}
.srv-card-desc {
  font-size: 13.5px;
  color: var(--text-secondary);
  line-height: 1.55;
  margin-bottom: 16px;
  flex-grow: 1;
}
.srv-pills-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 18px;
}
.srv-pills-list span {
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  padding: 3px 9px;
  border-radius: 9999px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
}
.srv-card-action {
  border-top: 1px solid var(--border-light);
  padding-top: 14px;
}
.srv-link-btn {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--accent-purple);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: gap 0.2s ease;
}
.srv-link-btn:hover {
  gap: 8px;
}
.closing-services-cta-banner {
  margin-top: 48px;
  background: #07152f;
  border: 1px solid rgba(109, 53, 242, 0.35);
  border-radius: 22px;
  padding: 44px 48px;
  box-shadow: 0 20px 50px rgba(7, 21, 47, 0.25);
  position: relative;
  overflow: hidden;
}
.closing-services-cta-banner::before {
  content: '';
  position: absolute;
  top: -80px;
  right: -80px;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(34, 211, 238, 0.3) 0%, transparent 70%);
  pointer-events: none;
}
.closing-cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 36px;
  position: relative;
  z-index: 2;
  flex-wrap: wrap;
}
.closing-cta-text-col {
  max-width: 650px;
}
.closing-cta-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--accent-cyan);
  display: block;
  margin-bottom: 8px;
}
.closing-cta-heading {
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 900;
  color: #ffffff;
  margin-bottom: 10px;
}
.closing-cta-desc {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.6;
  margin: 0;
}
.btn-cyan-glow-solid {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #ffffff;
  color: #07152f !important;
  padding: 13px 28px;
  border-radius: 9999px;
  font-size: 14px;
  font-weight: 700;
  font-family: var(--font-heading);
  letter-spacing: -0.01em;
  border: 1px solid #ffffff;
  text-decoration: none !important;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.2), 0 0 20px rgba(34, 211, 238, 0.25);
}
.btn-cyan-glow-solid:hover {
  background: var(--accent-cyan, #22d3ee);
  color: #07152f !important;
  border-color: var(--accent-cyan, #22d3ee);
  box-shadow: 0 8px 30px rgba(34, 211, 238, 0.55);
  transform: translateY(-2px);
}

@media (max-width: 1024px) {
  .services-cards-grid {
    grid-template-columns: 1fr 1fr;
  }
  .about-two-col-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 680px) {
  .services-cards-grid {
    grid-template-columns: 1fr;
  }
  .closing-services-cta-banner {
    padding: 30px 24px;
  }
  .closing-cta-btn-col {
    width: 100%;
  }
  .closing-cta-btn-col .btn-cyan-glow-solid {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
}

/* ── DISTINCT SUBPAGES HERO WIDGETS ─────────────────────────────────────── */
/* Services page domain ribbon */
.srv-hero-domains-ribbon {
  display: flex;
  gap: 12px;
  margin-top: 22px;
  flex-wrap: wrap;
}
.srv-hero-pill-tag {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid var(--border-light);
  padding: 8px 16px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 2px 10px rgba(7, 21, 47, 0.04);
  transition: all 0.25s ease;
}
.srv-hero-pill-tag:hover {
  border-color: var(--accent-purple);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(109, 53, 242, 0.15);
}
.srv-domain-icon {
  font-size: 16px;
}
.srv-domain-name {
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 800;
  color: var(--text-primary);
}
.srv-domain-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--accent-purple);
  background: rgba(109, 53, 242, 0.08);
  padding: 2px 8px;
  border-radius: 9999px;
}

/* About page DNA Box */
.about-hero-dna-box {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--border-light);
  border-radius: 16px;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 22px;
  box-shadow: 0 4px 16px rgba(7, 21, 47, 0.04);
}
.dna-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.dna-check {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(34, 211, 238, 0.15);
  color: #0284c7;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  flex-shrink: 0;
}
.dna-item strong {
  display: block;
  font-size: 13.5px;
  font-weight: 800;
  color: var(--text-primary);
}
.dna-item span {
  font-size: 12px;
  color: var(--text-secondary);
}

/* Portfolio Hero Stats Strip */
.portfolio-hero-stats-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--border-light);
  border-radius: 16px;
  padding: 16px;
  margin-top: 22px;
  box-shadow: 0 4px 16px rgba(7, 21, 47, 0.04);
}
.port-stat-unit strong {
  display: block;
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 900;
  color: var(--accent-purple);
}
.port-stat-unit span {
  font-size: 11px;
  color: var(--text-secondary);
  font-weight: 600;
}

/* Technology Hero Stack Chips */
.tech-hero-stack-chips {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 22px;
}
.tech-hero-chip {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-secondary);
  box-shadow: 0 2px 8px rgba(7, 21, 47, 0.04);
}
.tech-hero-chip strong {
  color: var(--text-primary);
  font-weight: 800;
}
.chip-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Process Hero Stepper */
.process-hero-stepper {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
  flex-wrap: wrap;
}
.proc-step-pill {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid var(--border-light);
  border-radius: 10px;
  padding: 6px 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.proc-step-pill.active {
  border-color: var(--accent-purple);
  background: #07152f;
  color: #ffffff;
}
.proc-step-pill.active .step-num {
  color: var(--accent-cyan);
}
.proc-step-pill.active .step-name {
  color: #ffffff;
}
.step-num {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  color: var(--accent-purple);
}
.step-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
}
.step-arrow {
  color: var(--text-muted);
  font-size: 12px;
}

/* Contact Hero Priority Box */
.contact-hero-priority-box {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--border-light);
  border-radius: 16px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 22px;
  box-shadow: 0 4px 16px rgba(7, 21, 47, 0.04);
}
.priority-channel-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.channel-icon {
  font-size: 18px;
  line-height: 1.2;
}
.priority-channel-row strong {
  display: block;
  font-size: 13.5px;
  font-weight: 800;
  color: var(--text-primary);
}
.priority-channel-row span {
  font-size: 12px;
  color: var(--text-secondary);
}

/* ── SERVICES FULL PAGE DETAIL SECTIONS ─────────────────────────────────── */
.sec-all-services-body {
  padding: 80px 0 30px 0;
  background: #ffffff;
}
.srv-cat-headline-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  border-left: 5px solid var(--accent-purple);
  border-radius: 18px;
  padding: 28px 32px;
  margin-bottom: 30px;
}
.srv-cat-kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--accent-purple);
  display: block;
  margin-bottom: 6px;
}
.srv-cat-title {
  font-family: var(--font-heading);
  font-size: 26px;
  font-weight: 900;
  color: var(--text-primary);
  margin-bottom: 6px;
}
.srv-cat-desc {
  font-size: 15px;
  color: var(--text-secondary);
  margin: 0;
}
.service-detail-item {
  background: #ffffff;
  border: 1px solid var(--border-light);
  border-radius: 20px;
  padding: 36px;
  margin-bottom: 24px;
  box-shadow: 0 4px 16px rgba(7, 21, 47, 0.03);
  transition: all 0.3s ease;
}
.service-detail-item:hover {
  border-color: var(--accent-purple);
  box-shadow: 0 16px 40px rgba(109, 53, 242, 0.08);
}
.srv-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 16px;
}
.srv-serial {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 800;
  color: var(--accent-purple);
  display: block;
  margin-bottom: 4px;
}
.srv-detail-title {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0;
}
.srv-detail-intro {
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.65;
  margin-bottom: 24px;
}
.srv-detail-scope-box {
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  border-radius: 14px;
  padding: 22px 26px;
}
.scope-box-title {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 800;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 14px;
}
.scope-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.scope-pill {
  font-size: 13.5px;
  color: var(--text-secondary);
  line-height: 1.45;
  position: relative;
  padding-left: 18px;
}
.scope-pill::before {
  content: '✦';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--accent-purple);
  font-size: 12px;
}
.scope-pill strong {
  color: var(--text-primary);
}

@media (max-width: 900px) {
  .scope-grid {
    grid-template-columns: 1fr;
  }
  .portfolio-hero-stats-strip {
    grid-template-columns: 1fr 1fr;
  }
  .tech-hero-stack-chips {
    grid-template-columns: 1fr;
  }
}

/* ── ORBIT CENTER LOGO OVERLAYS (GUARANTEED VISIBILITY) ───────────────────── */
.hero-3d-orbit-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-orbit-center-logo-overlay {
  display: none !important;
}
.hero-center-logo-img {
  width: 92px;
  height: 92px;
  object-fit: contain;
  filter: drop-shadow(0 4px 14px rgba(7, 21, 47, 0.22));
  animation: heroLogoFloat 4s ease-in-out infinite;
}
@keyframes heroLogoFloat {
  0%, 100% {
    transform: scale(1) translateY(0);
  }
  50% {
    transform: scale(1.06) translateY(-4px);
  }
}

.system-interactive-orbit-box {
  position: relative;
}
.system-orbit-center-logo-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 6;
  pointer-events: none;
  width: 106px;
  height: 106px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.98) 45%, rgba(245, 248, 255, 0.85) 70%, transparent 100%);
  box-shadow: 0 0 30px rgba(109, 53, 242, 0.25);
}
.system-center-logo-img {
  width: 74px;
  height: 74px;
  object-fit: contain;
  filter: drop-shadow(0 3px 10px rgba(7, 21, 47, 0.18));
}

/* ── SECTION 02 ENLARGED ORBIT & PERFECT ALIGNMENT ────────────────────────── */
#technology .hero-grid-two-col {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 40px;
  align-items: center;
}
.system-interactive-orbit-box {
  width: 100%;
  max-width: 640px;
  height: 620px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.system-orbit-center-logo-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 6;
  pointer-events: none;
  width: 130px;
  height: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.98) 45%, rgba(245, 248, 255, 0.88) 70%, transparent 100%);
  box-shadow: 0 0 35px rgba(109, 53, 242, 0.28), 0 0 15px rgba(34, 211, 238, 0.3);
}
.system-center-logo-img {
  width: 90px;
  height: 90px;
  object-fit: contain;
  filter: drop-shadow(0 3px 12px rgba(7, 21, 47, 0.2));
}

/* ── OVERFLOW / SECTION OUT FIXES ─────────────────────────────────────────── */
html, body, .site-wrapper {
  overflow-x: clip !important;
  max-width: 100vw !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.project-card-showcase-light {
  grid-template-columns: minmax(0, 1fr) 140px !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}
.project-card-main-content {
  min-width: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.project-metrics-ribbon {
  min-width: 0 !important;
  width: 100% !important;
}
.project-showcase-image-frame img {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
  object-fit: cover !important;
}
.about-two-col-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 40px;
  align-items: center;
  width: 100%;
  max-width: 100%;
}

/* ── SERVICES PAGE TABBED ULTRA-PREMIUM UI ────────────────────────────────── */
.sec-services-tabbed-section {
  padding: 60px 0 100px 0;
  background: #ffffff;
}
/* ── SERVICES PAGE: EXECUTIVE 4-COLUMN TAB NAVIGATION ──────────────── */
.services-page-tab-nav {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 36px;
  width: 100%;
}

@media (max-width: 1100px) and (min-width: 769px) {
  .services-page-tab-nav {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
}

/* ── DIRECTION GUIDANCE BAR ABOVE TABS ── */
.services-nav-action-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  background: #ffffff;
  border: 1.5px solid #cbd5e1;
  border-radius: 14px;
  padding: 10px 18px;
  margin-bottom: 18px;
  box-shadow: 0 2px 8px rgba(7, 21, 47, 0.04);
}

.snab-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.snab-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: linear-gradient(135deg, rgba(109, 53, 242, 0.12), rgba(37, 99, 235, 0.1));
  color: #6d35f2;
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid rgba(109, 53, 242, 0.22);
}

.snab-badge i {
  font-size: 11px;
  color: #6d35f2;
}

.snab-title {
  font-family: var(--font-body, sans-serif);
  font-size: 13px;
  font-weight: 600;
  color: #475569;
}

.snab-right {
  display: flex;
  align-items: center;
}

.snab-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono, monospace);
  font-size: 11.5px;
  font-weight: 700;
  color: #64748b;
}

.snab-pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
  display: inline-block;
  animation: spPulse 2s infinite;
}

/* ── PROMINENT, TACTILE CATEGORY BUTTON TABS ── */
.sp-cat-tab-btn {
  position: relative;
  background: #ffffff;
  border: 2px solid #cbd5e1;
  border-bottom: 4px solid #94a3b8; /* Tactile mechanical button depth */
  border-radius: 16px;
  padding: 16px 16px 12px;
  cursor: pointer !important;
  text-align: left;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 14px rgba(7, 21, 47, 0.05), 0 1px 3px rgba(7, 21, 47, 0.04);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  user-select: none;
}

.sp-cat-tab-btn * {
  cursor: pointer;
}

.sp-cat-tab-btn:hover {
  transform: translateY(-4px);
  border-color: #64748b;
  border-bottom-color: #475569;
  box-shadow: 0 14px 28px -4px rgba(7, 21, 47, 0.12), 0 2px 6px rgba(7, 21, 47, 0.06);
}

.sp-cat-tab-btn:active {
  transform: translateY(1px);
  border-bottom-width: 2px;
  box-shadow: 0 2px 6px rgba(7, 21, 47, 0.08);
}

/* Permanent Visible Top Glow / Accent Bar */
.sp-tab-glow-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  opacity: 0.85; /* Permanently visible so inactive tabs have clear category branding */
  transition: all 0.25s ease;
}

.sp-cat-tab-btn:hover .sp-tab-glow-bar,
.sp-cat-tab-btn.active .sp-tab-glow-bar {
  opacity: 1;
  height: 5px;
}

.sp-tab-card-inner {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.sp-tab-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.sp-tab-index {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #64748b;
}

.sp-tab-counter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 9999px;
  background: rgba(100, 116, 139, 0.08);
  color: #64748b;
  transition: all 0.25s ease;
  white-space: nowrap;
}

.sp-pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  display: inline-block;
}

.sp-tab-main-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sp-tab-icon-box {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.25s ease;
}

.sp-icon-dev {
  background: rgba(109, 53, 242, 0.1);
  color: #6d35f2;
}

.sp-icon-ai {
  background: rgba(2, 132, 199, 0.1);
  color: #0284c7;
}

.sp-icon-mkt {
  background: rgba(219, 39, 119, 0.1);
  color: #db2777;
}

.sp-icon-brand {
  background: rgba(217, 119, 6, 0.1);
  color: #d97706;
}

.sp-tab-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.sp-tab-label {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 800;
  color: var(--navy-dark, #07152f);
  margin: 0;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sp-tab-sub {
  font-family: var(--font-body);
  font-size: 11.5px;
  color: #64748b;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── TAB ACTION FOOTER STRIP ── */
.sp-tab-action-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 10px;
  margin-top: 4px;
  border-top: 1px solid rgba(226, 232, 240, 0.9);
  width: 100%;
}

.sp-tab-hint-text {
  font-family: var(--font-mono, monospace);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #94a3b8;
  transition: color 0.22s ease;
}

.sp-tab-btn-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-heading, sans-serif);
  font-size: 11.5px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  transition: all 0.22s ease;
}

/* Inactive Pill State */
.sp-tab-btn-pill-inactive {
  display: inline-flex;
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #cbd5e1;
}

.sp-cat-tab-btn:hover .sp-tab-btn-pill-inactive {
  background: #07152f;
  color: #ffffff;
  border-color: #07152f;
  box-shadow: 0 2px 8px rgba(7, 21, 47, 0.2);
}

.sp-cat-tab-btn:hover .sp-tab-btn-pill-inactive svg,
.srv-cat-tab-btn:hover .sp-tab-btn-pill-inactive svg {
  transform: translateX(3px);
  transition: transform 0.2s ease;
}

/* Active Pill State */
.sp-tab-btn-pill-active {
  display: none;
}

.sp-cat-tab-btn.active .sp-tab-btn-pill-inactive,
.srv-cat-tab-btn.active .sp-tab-btn-pill-inactive {
  display: none !important;
}

.sp-cat-tab-btn.active .sp-tab-btn-pill-active,
.srv-cat-tab-btn.active .sp-tab-btn-pill-active {
  display: inline-flex !important;
}

/* ── DIVISION BRAND VARIATIONS & ACTIVE STATES ── */

/* 1. DEV */
.sp-cat-tab-btn[data-target="sp-cat-dev"]:hover {
  border-color: #6d35f2;
  border-bottom-color: #6d35f2;
}
.sp-cat-tab-btn[data-target="sp-cat-dev"].active {
  background: #ffffff;
  border-color: #6d35f2 !important;
  border-bottom: 4px solid #6d35f2 !important;
  box-shadow: 0 16px 36px -6px rgba(109, 53, 242, 0.25), 0 0 0 1.5px #6d35f2 !important;
  transform: translateY(-2px);
}
.sp-cat-tab-btn[data-target="sp-cat-dev"].active .sp-tab-counter {
  background: rgba(109, 53, 242, 0.12);
  color: #6d35f2;
}
.sp-cat-tab-btn[data-target="sp-cat-dev"].active .sp-tab-btn-pill-active {
  background: #6d35f2;
  color: #ffffff;
  box-shadow: 0 2px 10px rgba(109, 53, 242, 0.4);
}
.sp-cat-tab-btn[data-target="sp-cat-dev"].active .sp-tab-hint-text {
  color: #6d35f2;
}

/* 2. AI */
.sp-cat-tab-btn[data-target="sp-cat-ai"]:hover {
  border-color: #0284c7;
  border-bottom-color: #0284c7;
}
.sp-cat-tab-btn[data-target="sp-cat-ai"].active {
  background: #ffffff;
  border-color: #0284c7 !important;
  border-bottom: 4px solid #0284c7 !important;
  box-shadow: 0 16px 36px -6px rgba(2, 132, 199, 0.25), 0 0 0 1.5px #0284c7 !important;
  transform: translateY(-2px);
}
.sp-cat-tab-btn[data-target="sp-cat-ai"].active .sp-tab-counter {
  background: rgba(2, 132, 199, 0.12);
  color: #0284c7;
}
.sp-cat-tab-btn[data-target="sp-cat-ai"].active .sp-tab-btn-pill-active {
  background: #0284c7;
  color: #ffffff;
  box-shadow: 0 2px 10px rgba(2, 132, 199, 0.4);
}
.sp-cat-tab-btn[data-target="sp-cat-ai"].active .sp-tab-hint-text {
  color: #0284c7;
}

/* 3. MARKETING */
.sp-cat-tab-btn[data-target="sp-cat-mkt"]:hover {
  border-color: #db2777;
  border-bottom-color: #db2777;
}
.sp-cat-tab-btn[data-target="sp-cat-mkt"].active {
  background: #ffffff;
  border-color: #db2777 !important;
  border-bottom: 4px solid #db2777 !important;
  box-shadow: 0 16px 36px -6px rgba(219, 39, 119, 0.25), 0 0 0 1.5px #db2777 !important;
  transform: translateY(-2px);
}
.sp-cat-tab-btn[data-target="sp-cat-mkt"].active .sp-tab-counter {
  background: rgba(219, 39, 119, 0.12);
  color: #db2777;
}
.sp-cat-tab-btn[data-target="sp-cat-mkt"].active .sp-tab-btn-pill-active {
  background: #db2777;
  color: #ffffff;
  box-shadow: 0 2px 10px rgba(219, 39, 119, 0.4);
}
.sp-cat-tab-btn[data-target="sp-cat-mkt"].active .sp-tab-hint-text {
  color: #db2777;
}

/* 4. BRAND */
.sp-cat-tab-btn[data-target="sp-cat-brand"]:hover {
  border-color: #d97706;
  border-bottom-color: #d97706;
}
.sp-cat-tab-btn[data-target="sp-cat-brand"].active {
  background: #ffffff;
  border-color: #d97706 !important;
  border-bottom: 4px solid #d97706 !important;
  box-shadow: 0 16px 36px -6px rgba(217, 119, 6, 0.25), 0 0 0 1.5px #d97706 !important;
  transform: translateY(-2px);
}
.sp-cat-tab-btn[data-target="sp-cat-brand"].active .sp-tab-counter {
  background: rgba(217, 119, 6, 0.12);
  color: #d97706;
}
.sp-cat-tab-btn[data-target="sp-cat-brand"].active .sp-tab-btn-pill-active {
  background: #d97706;
  color: #ffffff;
  box-shadow: 0 2px 10px rgba(217, 119, 6, 0.4);
}
.sp-cat-tab-btn[data-target="sp-cat-brand"].active .sp-tab-hint-text {
  color: #d97706;
}

.sp-cat-tab-btn.active .sp-pulse-dot {
  animation: spPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes spPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.3; transform: scale(0.7); }
}

/* Category Intro Banner */
.category-header-intro-banner {
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  border-left: 5px solid var(--accent-purple);
  border-radius: 20px;
  padding: 28px 36px;
  margin-bottom: 32px;
}
.cat-eyebrow-pill {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--accent-purple);
  display: block;
  margin-bottom: 6px;
}
.cat-panel-title {
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 900;
  color: var(--text-primary);
  margin-bottom: 6px;
}
.cat-panel-lead {
  font-size: 15.5px;
  color: var(--text-secondary);
  margin: 0;
}

/* Premium Services List Cards */
.premium-services-list {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.premium-service-card {
  background: #ffffff;
  border: 1px solid var(--border-light);
  border-radius: 24px;
  padding: 38px 40px;
  box-shadow: 0 8px 24px rgba(7, 21, 47, 0.04);
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 40px;
  align-items: center;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}
.premium-service-card:hover {
  transform: translateY(-5px);
  border-color: var(--card-glow, var(--accent-purple));
  box-shadow: 0 20px 50px rgba(7, 21, 47, 0.08), 0 0 25px rgba(109, 53, 242, 0.1);
}
.ps-card-left {
  display: flex;
  flex-direction: column;
}
.ps-card-top-tag {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.ps-serial {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 800;
  color: var(--accent-purple);
}
.ps-cat-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  background: var(--bg-secondary);
  padding: 2px 8px;
  border-radius: 9999px;
  border: 1px solid var(--border-light);
}
.ps-icon-and-title {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}
.ps-icon-aura {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
  border: 1px solid var(--border-light);
}
.ps-service-title {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 900;
  color: var(--text-primary);
  line-height: 1.25;
  margin: 0;
}
.ps-service-desc {
  font-size: 14.5px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 24px;
}
.ps-scope-box-inner {
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  border-radius: 18px;
  padding: 24px 26px;
}
.ps-scope-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--text-primary);
  margin-bottom: 16px;
}
.ps-scope-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-purple);
}
.ps-capabilities-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ps-cap-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  color: var(--text-secondary);
  line-height: 1.45;
}
.ps-cap-check {
  color: var(--accent-purple);
  font-weight: 900;
  font-size: 13px;
  line-height: 1.3;
  flex-shrink: 0;
}
.ps-cap-item strong {
  color: var(--text-primary);
}

@media (max-width: 1050px) and (min-width: 769px) {
  .services-page-tab-nav {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
  }
  .premium-service-card {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  #technology .hero-grid-two-col {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .services-page-tab-nav {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    gap: 12px !important;
    padding: 6px 4px 16px 4px !important;
    margin-bottom: 24px !important;
    width: 100% !important;
    scroll-snap-type: x mandatory !important;
  }
  .services-page-tab-nav::-webkit-scrollbar {
    display: none !important;
  }
  .sp-cat-tab-btn {
    flex: 0 0 260px !important;
    white-space: normal !important;
    padding: 14px 16px !important;
    border-radius: 16px !important;
    scroll-snap-align: start !important;
  }
  .sp-tab-counter {
    display: inline-flex !important;
  }

  .category-header-intro-banner {
    padding: 16px 18px !important;
    border-radius: 16px !important;
    margin-bottom: 16px !important;
  }
  .cat-panel-title {
    font-size: 20px !important;
    line-height: 1.25 !important;
    margin-bottom: 4px !important;
  }
  .cat-panel-lead {
    font-size: 12.5px !important;
    line-height: 1.5 !important;
  }

  /* Services Cards in Sleek Horizontal Touch-Scroll Carousel */
  .premium-services-list {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    gap: 16px !important;
    padding: 6px 4px 22px 4px !important;
    width: 100% !important;
    scroll-snap-type: x mandatory !important;
    margin-bottom: 30px !important;
  }
  .premium-services-list::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  .premium-service-card {
    flex: 0 0 300px !important;
    min-width: 300px !important;
    max-width: 85vw !important;
    padding: 22px 18px !important;
    border-radius: 20px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    scroll-snap-align: start !important;
    box-sizing: border-box !important;
    background: #ffffff !important;
  }

  .ps-card-top-tag {
    margin-bottom: 8px !important;
  }
  .ps-icon-and-title {
    gap: 10px !important;
    margin-bottom: 10px !important;
  }
  .ps-icon-aura {
    width: 40px !important;
    height: 40px !important;
    font-size: 18px !important;
    border-radius: 12px !important;
  }
  .ps-service-title {
    font-size: 17px !important;
    line-height: 1.25 !important;
  }
  .ps-service-desc {
    font-size: 12.5px !important;
    line-height: 1.55 !important;
    margin-bottom: 14px !important;
  }
  .ps-card-left .btn-navy-primary {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 11px 18px !important;
    font-size: 13px !important;
  }

  .ps-scope-box-inner {
    padding: 14px 14px !important;
    border-radius: 14px !important;
  }
  .ps-scope-header {
    font-size: 10px !important;
    margin-bottom: 10px !important;
  }
  .ps-capabilities-grid {
    gap: 8px !important;
  }
  .ps-cap-item {
    font-size: 11.5px !important;
    line-height: 1.35 !important;
    gap: 8px !important;
  }
  .ps-cap-check {
    font-size: 11.5px !important;
  }
}

/* ── FLAGSHIP PROJECT SHOWCASE CARD (ATTRACTIVE & NO SIDE-BOX) ───────────── */
.flagship-project-card {
  background: #ffffff;
  border: 1px solid var(--border-light);
  border-radius: 28px;
  padding: 44px;
  box-shadow: 0 20px 60px rgba(7, 21, 47, 0.08), 0 4px 20px rgba(109, 53, 242, 0.04);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  transition: all 0.3s ease;
  position: relative;
}
.flagship-project-card:hover {
  box-shadow: 0 28px 70px rgba(7, 21, 47, 0.12), 0 8px 30px rgba(109, 53, 242, 0.08);
  border-color: rgba(109, 53, 242, 0.3);
}
.flagship-card-top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border-light);
}
.flagship-meta-left {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.flagship-status-badge {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  padding: 5px 14px;
  border-radius: 9999px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: #166534;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.flagship-category-tag {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 800;
  color: var(--accent-purple);
  letter-spacing: 0.08em;
}
.flagship-tags-right {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.f-tag {
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  padding: 4px 12px;
  border-radius: 9999px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
}
.flagship-heading-block {
  margin-bottom: 28px;
}
.flagship-project-title {
  font-family: var(--font-heading);
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 900;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  margin-bottom: 10px;
}
.flagship-project-desc {
  font-size: 16px;
  color: var(--text-secondary);
  line-height: 1.6;
  max-width: 860px;
  margin: 0;
}
.flagship-metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-bottom: 32px;
}
.f-metric-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  border-radius: 16px;
  padding: 20px 22px;
  position: relative;
  overflow: hidden;
  transition: all 0.25s ease;
}
.f-metric-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent-purple), var(--accent-cyan));
}
.f-metric-card:hover {
  transform: translateY(-3px);
  background: #ffffff;
  border-color: var(--accent-purple);
  box-shadow: 0 8px 25px rgba(109, 53, 242, 0.1);
}
.f-metric-val {
  display: block;
  font-family: var(--font-heading);
  font-size: 26px;
  font-weight: 900;
  color: #07152f;
  margin-bottom: 4px;
}
.f-metric-label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-secondary);
}
.flagship-mockup-stage {
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--border-light);
  box-shadow: 0 16px 40px rgba(7, 21, 47, 0.08);
  margin-bottom: 30px;
  background: #f8fafc;
}
.flagship-mockup-frame img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.flagship-mockup-stage:hover img {
  transform: scale(1.02);
}
.flagship-bottom-action-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  padding-top: 10px;
}
.flagship-features-pills {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.f-feat-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-primary);
}
.f-feat-pill span {
  color: #10b981;
  font-weight: 900;
  font-size: 14px;
}
.flagship-btns-wrap {
  display: flex;
  gap: 14px;
}

/* ── ALL ACTIVE FILTER BUTTONS MATCHING START PROJECT (NAVY #07152f) ─────── */
.stack-tab-btn:hover, .stack-tab-btn.active,
.portfolio-tab-btn:hover, .portfolio-tab-btn.active,
.portfolio-filter-btn:hover, .portfolio-filter-btn.active {
  background: #07152f !important;
  border-color: #07152f !important;
  color: #ffffff !important;
  box-shadow: 0 4px 18px rgba(7, 21, 47, 0.25) !important;
}

@media (max-width: 992px) {
  .flagship-metrics-grid {
    grid-template-columns: 1fr 1fr;
  }
  .flagship-project-card {
    padding: 30px 24px;
  }
}
@media (max-width: 600px) {
  .flagship-metrics-grid {
    grid-template-columns: 1fr;
  }
  .flagship-bottom-action-bar {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   HIGH-IMPACT EDITORIAL WORK SHOWCASE (CLEAN, NO SCROLLBAR, SINGLE NAV)
   ══════════════════════════════════════════════════════════════════════════ */

.work-section-header {
  margin-bottom: 24px;
}
.work-header-flex {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 20px;
}

/* Single Modern Pill Tab Bar (No Native Scrollbars Ever) */
.work-filter-tabs-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  overflow-x: auto;
  padding: 4px 2px 20px;
  margin-bottom: 24px;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
  -webkit-overflow-scrolling: touch;
}
.work-filter-tabs-bar::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
  width: 0;
  height: 0;
}

.work-pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: #ffffff;
  border: 1px solid var(--border-light);
  border-radius: 9999px;
  font-family: var(--font-heading);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 8px rgba(7, 21, 47, 0.04);
}
.work-pill-btn:hover {
  background: var(--bg-soft);
  border-color: var(--accent-purple);
  color: var(--accent-purple);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(109, 53, 242, 0.1);
}
.work-pill-btn.active {
  background: #07152f !important;
  border-color: #07152f !important;
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(7, 21, 47, 0.22) !important;
}
.pill-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.pill-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  background: var(--bg-secondary);
  color: var(--text-muted);
  padding: 2px 8px;
  border-radius: 999px;
  transition: all 0.2s ease;
}
.work-pill-btn.active .pill-tag {
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}

/* Panel Transitions */
.work-showcase-panel {
  display: none;
}
.work-showcase-panel.active {
  display: block;
  animation: workCardFade 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes workCardFade {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Master Card Container with Brand Ambient Auras */
.work-showcase-card {
  background: #ffffff;
  border: 1px solid var(--border-light);
  border-radius: 28px;
  padding: 38px 42px;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}
.work-showcase-card.aura-crimson {
  box-shadow: 0 20px 60px rgba(239, 68, 68, 0.08), 0 4px 20px rgba(7, 21, 47, 0.04);
}
.work-showcase-card.aura-blue {
  box-shadow: 0 20px 60px rgba(59, 130, 246, 0.08), 0 4px 20px rgba(7, 21, 47, 0.04);
}
.work-showcase-card.aura-purple {
  box-shadow: 0 20px 60px rgba(139, 92, 246, 0.08), 0 4px 20px rgba(7, 21, 47, 0.04);
}
.work-showcase-card.aura-amber {
  box-shadow: 0 20px 60px rgba(234, 179, 8, 0.08), 0 4px 20px rgba(7, 21, 47, 0.04);
}
.work-showcase-card:hover {
  border-color: rgba(109, 53, 242, 0.25);
}

/* Top Ribbon */
.work-showcase-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  padding-bottom: 20px;
  margin-bottom: 26px;
  border-bottom: 1px solid var(--border-light);
}
.work-meta-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.work-live-chip {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  padding: 4px 12px;
  border-radius: 9999px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: #166534;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.work-live-chip.chip-blue {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1d4ed8;
}
.work-live-chip.chip-purple {
  background: #f5f3ff;
  border-color: #ddd6fe;
  color: #6d28d9;
}
.work-live-chip.chip-amber {
  background: #fefce8;
  border-color: #fef08a;
  color: #854d0e;
}
.work-category-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  color: var(--accent-purple);
  letter-spacing: 0.08em;
}
.work-category-label.text-blue { color: #2563eb; }
.work-category-label.text-purple { color: #7c3aed; }
.work-category-label.text-amber { color: #b45309; }

.work-tags-wrap {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.w-tech-tag {
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  padding: 4px 11px;
  border-radius: 9999px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
}

/* Split Layout: Content Left | Mockup Right */
.work-showcase-split {
  display: grid;
  grid-template-columns: 1fr 1.12fr;
  gap: 40px;
  align-items: center;
}
.work-project-title {
  font-family: var(--font-heading);
  font-size: clamp(23px, 2.6vw, 30px);
  font-weight: 900;
  color: var(--text-primary);
  line-height: 1.22;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}
.work-project-summary {
  font-size: 14.5px;
  color: var(--text-secondary);
  line-height: 1.65;
  margin-bottom: 22px;
}

/* 3 Bold Metric Cards */
.work-metrics-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}
.w-metric-box {
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  border-radius: 14px;
  padding: 12px 14px;
  text-align: left;
  position: relative;
  overflow: hidden;
  transition: all 0.2s ease;
}
.w-metric-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2.5px;
  background: linear-gradient(90deg, var(--accent-purple), var(--accent-cyan));
}
.w-metric-box:hover {
  background: #ffffff;
  border-color: var(--accent-purple);
  transform: translateY(-2px);
}
.w-metric-box .m-val {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 900;
  color: #07152f;
  line-height: 1.15;
  margin-bottom: 2px;
}
.w-metric-box .m-lbl {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
}

/* Capabilities Checklist */
.work-checklist {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 26px;
}
.check-item {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.4;
}
.check-item .chk-icon {
  color: #10b981;
  font-weight: 900;
  font-size: 13.5px;
}

/* Right Device Mockup Frame */
.work-showcase-visual {
  display: flex;
  align-items: center;
  justify-content: center;
}
.work-device-frame {
  width: 100%;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--border-light);
  box-shadow: 0 16px 45px rgba(7, 21, 47, 0.08);
  background: #f8fafc;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.work-device-frame img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.work-device-frame:hover img {
  transform: scale(1.025);
}

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE NAVBAR & SITE-WIDE RESPONSIVE SYSTEM
   ══════════════════════════════════════════════════════════════════════════ */

.navbar-actions-wrap {
  display: flex;
  align-items: center;
  gap: 16px;
}
.mobile-menu-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--border-light);
  border-radius: 10px;
  width: 44px;
  height: 44px;
  padding: 10px;
  cursor: pointer;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  transition: all 0.25s ease;
  z-index: 10001;
}
.mobile-menu-toggle:hover {
  background: var(--bg-soft);
  border-color: var(--accent-purple);
}
.hamburger-bar {
  width: 22px;
  height: 2px;
  background: var(--text-primary);
  border-radius: 2px;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  transform-origin: center;
}
.mobile-menu-toggle.is-open .hamburger-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.mobile-menu-toggle.is-open .hamburger-bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.mobile-menu-toggle.is-open .hamburger-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ── MOBILE NAV DRAWER (OFF-CANVAS SLIDE FROM RIGHT) ──────────────────────── */
.mobile-drawer-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(7, 21, 47, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
  z-index: 99990;
}
.mobile-drawer-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.mobile-nav-drawer {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: auto !important;
  bottom: 0 !important;
  width: 320px !important;
  max-width: 86vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  background: #ffffff !important;
  box-shadow: 12px 0 45px rgba(7, 21, 47, 0.22) !important;
  z-index: 99999 !important;
  transform: translateX(-100%) !important;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  visibility: visible !important;
  opacity: 1 !important;
}
.mobile-nav-drawer.is-open {
  transform: translateX(0) !important;
}

.mobile-drawer-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 16px 20px !important;
  border-bottom: 1px solid var(--border-light) !important;
  background: #ffffff !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 10 !important;
}
.mobile-drawer-header .brand-logo-wrap {
  order: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
}
.mobile-drawer-header .brand-logo-wrap img,
.drawer-header-logo-img {
  height: 54px !important;
  width: auto !important;
  object-fit: contain !important;
  display: block !important;
}
.mobile-drawer-close {
  order: 2 !important;
  margin-left: auto !important;
  background: #f8fafc;
  border: 1px solid var(--border-light);
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  line-height: 1;
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.2s ease;
}
.mobile-drawer-close:hover {
  background: #07152f;
  color: #ffffff;
}

.mobile-drawer-inner {
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: space-between;
}
.mobile-drawer-tag {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  margin-bottom: 12px;
  padding-left: 4px;
}
.mobile-nav-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mobile-nav-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 16px;
  background: #f8fafc;
  border: 1px solid var(--border-light);
  border-radius: 14px;
  text-decoration: none;
  transition: all 0.22s ease;
}
.mobile-nav-item .mn-num {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
}
.mobile-nav-item .mn-text {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 800;
  color: var(--text-primary);
  flex: 1;
  margin-left: 12px;
}
.mobile-nav-item .mn-arrow {
  color: var(--text-muted);
  font-size: 16px;
  transition: transform 0.2s ease, color 0.2s ease;
}
.mobile-nav-item:hover, .mobile-nav-item.active {
  background: #ffffff;
  border-color: var(--accent-purple);
  box-shadow: 0 6px 20px rgba(109, 53, 242, 0.1);
  transform: translateX(4px);
}
.mobile-nav-item:hover .mn-text, .mobile-nav-item.active .mn-text {
  color: var(--accent-purple);
}
.mobile-nav-item:hover .mn-arrow, .mobile-nav-item.active .mn-arrow {
  color: var(--accent-purple);
  transform: translateX(3px);
}
.mobile-drawer-footer {
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid var(--border-light);
}
.mobile-drawer-contact-strip {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.md-contact-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-secondary);
}
.md-contact-row a {
  color: var(--text-primary);
  font-weight: 600;
  text-decoration: none;
}
.btn-block {
  display: flex !important;
  width: 100% !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 14px 20px !important;
}

/* ── WHATSAPP FLOATING ACTION BUTTON ──────────────────────────────────────── */
.whatsapp-float-btn {
  position: fixed;
  bottom: 26px;
  right: 26px;
  width: 60px;
  height: 60px;
  background: #25d366;
  color: #ffffff !important;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 25px rgba(37, 211, 102, 0.4), 0 2px 8px rgba(7, 21, 47, 0.15);
  z-index: 99980;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
}
.whatsapp-float-btn:hover {
  transform: scale(1.08) translateY(-3px);
  box-shadow: 0 14px 32px rgba(37, 211, 102, 0.5), 0 4px 12px rgba(7, 21, 47, 0.2);
  color: #ffffff !important;
}
.whatsapp-float-pulse {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid #25d366;
  animation: waPulse 2s infinite cubic-bezier(0.25, 0, 0, 1);
  pointer-events: none;
}
@keyframes waPulse {
  0% { transform: scale(1); opacity: 0.8; }
  70% { transform: scale(1.4); opacity: 0; }
  100% { transform: scale(1.4); opacity: 0; }
}
.whatsapp-float-tooltip {
  position: absolute;
  right: 72px;
  top: 50%;
  transform: translateY(-50%) translateX(10px);
  background: #07152f;
  color: #ffffff;
  font-family: var(--font-heading);
  font-size: 12.5px;
  font-weight: 700;
  padding: 7px 14px;
  border-radius: 9999px;
  white-space: nowrap;
  box-shadow: 0 8px 22px rgba(7, 21, 47, 0.2);
  opacity: 0;
  pointer-events: none;
  transition: all 0.25s ease;
}
.whatsapp-float-btn:hover .whatsapp-float-tooltip {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}
@media (max-width: 480px) {
  .whatsapp-float-btn {
    bottom: 20px;
    right: 20px;
    width: 52px;
    height: 52px;
  }
  .whatsapp-float-tooltip {
    display: none;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   MASTER RESPONSIVE SYSTEM (TABLET & MOBILE OPTIMIZED)
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 992px) {
  .nav-menu-light {
    display: none !important;
  }
  .navbar-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: 66px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    position: relative !important;
    width: 100% !important;
  }
  .navbar-actions-wrap {
    display: contents !important;
  }
  .mobile-menu-toggle {
    display: flex !important;
    order: 1 !important;
    flex-shrink: 0 !important;
    width: 38px !important;
    height: 38px !important;
    padding: 8px !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    border: 1px solid var(--border-light) !important;
    box-shadow: 0 2px 8px rgba(7, 21, 47, 0.05) !important;
  }
  .navbar-inner .brand-logo-wrap {
    order: 2 !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .navbar-inner .site-main-logo-img {
    height: 42px !important;
    width: auto !important;
  }
  .desktop-nav-cta {
    display: inline-flex !important;
    order: 3 !important;
    flex-shrink: 0 !important;
    padding: 7px 12px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    border-radius: 9999px !important;
    white-space: nowrap !important;
    gap: 4px !important;
    background: #07152f !important;
    color: #ffffff !important;
    border: 1.5px solid #07152f !important;
    box-shadow: 0 4px 14px rgba(7, 21, 47, 0.16) !important;
    text-decoration: none !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }
  .desktop-nav-cta:hover {
    background: var(--accent-purple) !important;
    border-color: var(--accent-purple) !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 18px rgba(109, 53, 242, 0.3) !important;
  }

  .container {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
  .light-hero-section {
    padding-top: 96px;
    padding-bottom: 24px;
  }
  .hero-heading-huge {
    font-size: clamp(32px, 8vw, 44px) !important;
    line-height: 1.08;
    margin-bottom: 16px;
  }
  .hero-lead-text {
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 24px;
  }
  .hero-buttons-flex {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    width: 100%;
  }
  .hero-buttons-flex .btn-navy-primary,
  .hero-buttons-flex .btn-white-outline,
  .hero-buttons-flex .btn-outline-navy,
  .subpage-hero-actions .btn-navy-primary,
  .subpage-hero-actions .btn-outline-navy {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
  .hero-3d-orbit-stage {
    height: 320px !important;
    max-width: 320px !important;
    margin: 0 auto;
  }
  .orbit-floating-badge {
    padding: 4px 10px;
    font-size: 10px;
  }
  .system-interactive-orbit-box {
    max-width: 320px !important;
    height: 320px !important;
  }
  #technology .hero-grid-two-col {
    grid-template-columns: 1fr;
    gap: 32px;
    text-align: center;
  }

  /* ── 1. SECTION 03: ABOUT JZARR TECH & CORPORATE TREE ── */
  .about-two-col-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .group-tree-panel {
    width: 100% !important;
    max-width: 100% !important;
    padding: 22px 16px !important;
    box-sizing: border-box !important;
  }
  .tree-node-card {
    padding: 14px 12px !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
  }
  .node-status-pill {
    margin-left: 0 !important;
    font-size: 9px !important;
    padding: 3px 8px !important;
  }
  .about-metrics-pills-row {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    margin-top: 20px !important;
  }
  .about-mini-metric {
    padding: 10px 4px !important;
    text-align: center !important;
    justify-content: center !important;
    border-radius: 10px !important;
  }
  .about-mini-metric strong {
    font-size: 16px !important;
  }
  .about-mini-metric span {
    font-size: 10px !important;
  }
  .tree-pillars-bento {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }

  /* ── 2. SECTION 04: SERVICES HORIZONTAL SWIPE CARDS & TABS ── */
  .services-category-tabs,
  .services-page-tab-nav {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    gap: 10px !important;
    padding: 6px 4px 14px 4px !important;
    margin-bottom: 24px !important;
    width: 100% !important;
    scroll-snap-type: x mandatory !important;
  }
  .services-category-tabs::-webkit-scrollbar,
  .services-page-tab-nav::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }
  .srv-cat-tab-btn {
    flex: 0 0 260px !important;
    white-space: normal !important;
    padding: 14px 16px !important;
    border-radius: 16px !important;
    scroll-snap-align: start !important;
  }
  .sp-cat-tab-btn {
    flex: 0 0 260px !important;
    white-space: normal !important;
    padding: 14px 16px !important;
    border-radius: 16px !important;
    scroll-snap-align: start !important;
  }
  .services-category-block {
    padding: 22px 14px !important;
    border-radius: 18px !important;
    overflow: hidden !important;
  }
  .category-banner-strip {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
    margin-bottom: 18px !important;
  }
  .cat-strip-heading {
    font-size: 18px !important;
    line-height: 1.3 !important;
  }

  /* Services Cards in Sleek Horizontal Touch-Scroll Carousel */
  .services-cards-grid {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    gap: 16px !important;
    padding: 8px 4px 20px 4px !important;
    width: 100% !important;
    scroll-snap-type: x mandatory !important;
  }
  .services-cards-grid::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }
  .service-bento-card {
    flex: 0 0 280px !important;
    min-width: 280px !important;
    max-width: 85vw !important;
    padding: 22px 18px !important;
    border-radius: 18px !important;
    scroll-snap-align: start !important;
    box-sizing: border-box !important;
    margin-bottom: 0 !important;
    background: #ffffff !important;
  }

  /* ── 3. SECTION 05: TECH STACK HORIZONTAL PILL SCROLL & CARDS ── */
  .stack-filter-tabs {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    gap: 8px !important;
    padding: 4px 4px 14px 4px !important;
    margin-bottom: 22px !important;
    width: 100% !important;
    scroll-snap-type: x mandatory !important;
  }
  .stack-filter-tabs::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }
  .stack-tab-btn {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    padding: 8px 16px !important;
    font-size: 11.5px !important;
    scroll-snap-align: start !important;
  }
  .tech-cards-grid-light {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    width: 100% !important;
  }
  .tech-card-item {
    padding: 16px 10px !important;
    border-radius: 14px !important;
  }
  .tech-card-icon-aura {
    width: 42px !important;
    height: 42px !important;
    font-size: 20px !important;
    margin-bottom: 8px !important;
  }
  .tech-card-name {
    font-size: 14.5px !important;
  }
  .tech-card-sub {
    font-size: 8.5px !important;
    margin-bottom: 8px !important;
  }
  .tech-card-status {
    font-size: 8.5px !important;
    padding: 2px 7px !important;
  }

  /* ── 4. SECTION 06: WORK SHOWCASE & 3-COL METRICS STRIP ── */
  .work-filter-tabs-bar {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    gap: 8px !important;
    padding: 6px 8px !important;
    max-width: 100% !important;
    width: 100% !important;
    scroll-snap-type: x mandatory !important;
  }
  .work-filter-tabs-bar::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }
  .w-filter-btn {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    font-size: 11.5px !important;
    padding: 7px 14px !important;
    scroll-snap-align: start !important;
  }
  .work-showcase-split {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .work-spotlight-card,
  .work-showcase-card {
    padding: 20px 14px !important;
    border-radius: 18px !important;
  }
  .work-project-title {
    font-size: 20px !important;
    line-height: 1.25 !important;
  }
  .work-project-summary {
    font-size: 13.5px !important;
    margin-bottom: 16px !important;
  }
  .work-metrics-strip {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
    margin-bottom: 18px !important;
    width: 100% !important;
  }
  .w-metric-box {
    padding: 9px 5px !important;
    text-align: center !important;
    border-radius: 10px !important;
  }
  .w-metric-box .m-val {
    font-size: 15px !important;
    line-height: 1.2 !important;
    margin-bottom: 2px !important;
  }
  .w-metric-box .m-lbl {
    font-size: 9px !important;
    line-height: 1.2 !important;
  }
  .work-checklist {
    gap: 6px !important;
    margin-bottom: 18px !important;
  }
  .check-item {
    font-size: 12.5px !important;
  }
  .work-gallery-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .work-header-flex {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
  }
  .capabilities-bento-grid {
    grid-template-columns: 1fr !important;
  }
  .bento-card-large, .bento-card-tall {
    grid-column: span 1 !important;
    grid-row: span 1 !important;
  }
  .stack-category-panel {
    grid-template-columns: 1fr !important;
  }

  /* ── 5. SUBPAGE CTA BOX & MODERN FOOTER ── */
  .subpage-cta-card-box {
    flex-direction: column !important;
    padding: 28px 18px !important;
    gap: 22px !important;
    border-radius: 20px !important;
    text-align: left !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .subpage-cta-heading {
    font-size: 22px !important;
    line-height: 1.25 !important;
    margin-bottom: 10px !important;
  }
  .subpage-cta-lead {
    font-size: 13.5px !important;
    margin-bottom: 18px !important;
  }
  .subpage-cta-btns {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
  }
  .subpage-cta-btns a {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
  }
  .subpage-cta-stats {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
    padding: 12px 8px !important;
    min-width: unset !important;
    width: 100% !important;
    box-sizing: border-box !important;
    border-radius: 14px !important;
  }
  .cta-metric-item {
    flex-direction: column !important;
    text-align: center !important;
    justify-content: center !important;
    gap: 2px !important;
  }
  .cta-metric-item .cta-metric-text {
    display: flex !important;
    flex-direction: column !important;
  }
  .cta-metric-item .cta-metric-dot {
    display: none !important;
  }
  .cta-metric-text strong {
    font-size: 15px !important;
  }
  .cta-metric-text span {
    font-size: 9.5px !important;
    line-height: 1.2 !important;
  }

  /* Footer 2-Column Links Grid */
  .light-footer, .site-footer-light {
    padding: 44px 0 24px 0 !important;
  }
  .footer-grid-4col {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 28px 16px !important;
    margin-bottom: 32px !important;
    width: 100% !important;
  }
  .footer-col-brand,
  .footer-col-contact {
    grid-column: span 2 !important;
  }
  .footer-col-links {
    grid-column: span 1 !important;
  }
  .footer-col-heading {
    font-size: 11.5px !important;
    margin-bottom: 12px !important;
    letter-spacing: 0.08em !important;
  }
  .footer-link-list li {
    margin-bottom: 8px !important;
  }
  .footer-link-list a {
    font-size: 12.5px !important;
  }
  .footer-bottom-bar-light,
  .footer-bottom-legal {
    flex-direction: column !important;
    text-align: center !important;
    align-items: center !important;
    gap: 14px !important;
    padding-top: 24px !important;
  }
  .footer-copyright-text {
    font-size: 12px !important;
    line-height: 1.5 !important;
    color: var(--text-muted) !important;
  }
  .footer-legal-links {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px 14px !important;
    font-size: 12px !important;
    line-height: 1.6 !important;
  }
  .footer-legal-links a {
    white-space: nowrap !important;
    padding: 2px 4px !important;
  }
  .legal-sep {
    display: inline-block !important;
    opacity: 0.5;
  }
}

@media (max-width: 480px) {
  .navbar-inner {
    height: 62px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .mobile-menu-toggle {
    width: 36px !important;
    height: 36px !important;
    padding: 7px !important;
    border-radius: 9px !important;
  }
  .navbar-inner .site-main-logo-img {
    height: 40px !important;
  }
  .desktop-nav-cta {
    padding: 6px 11px !important;
    font-size: 10.5px !important;
    gap: 3px !important;
  }
  .tree-pillars-bento {
    grid-template-columns: 1fr !important;
  }
  .node-emblem-box {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
  }
  .holding-logo-img,
  .tech-logo-img {
    max-height: 28px !important;
  }
  .node-title {
    font-size: 14.5px !important;
  }
  .node-desc {
    font-size: 11px !important;
  }
  .service-bento-card {
    flex: 0 0 260px !important;
    min-width: 260px !important;
    width: 260px !important;
  }
  .subpage-cta-stats {
    gap: 4px !important;
    padding: 10px 6px !important;
  }
  .cta-metric-text strong {
    font-size: 14px !important;
  }
  .cta-metric-text span {
    font-size: 8.5px !important;
  }
  .footer-grid-4col {
    grid-template-columns: 1fr 1fr !important;
    gap: 24px 12px !important;
  }
}

/* ── HOMEPAGE CLIENT TESTIMONIALS SECTION ─────────────────────────────────── */
.sec-testimonials-light {
  padding: 100px 0;
  background: #fbfcfe;
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
  position: relative;
  overflow: hidden;
}

.testimonials-header-wrap {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}

.testimonials-trust-badge-card {
  background: #ffffff;
  border: 1px solid rgba(109, 53, 242, 0.16);
  border-radius: 20px;
  padding: 24px 28px;
  box-shadow: 0 16px 36px rgba(7, 21, 47, 0.06);
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 380px;
  flex: 1 1 320px;
}

.trust-badge-rating-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.trust-stars-glow {
  color: #f59e0b;
  font-size: 20px;
  letter-spacing: 3px;
  text-shadow: 0 0 12px rgba(245, 158, 11, 0.4);
}
.trust-rating-score {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 800;
  color: var(--text-primary);
}

.trust-badge-meta strong {
  display: block;
  font-family: var(--font-heading);
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 2px;
}
.trust-badge-meta span {
  font-size: 12.5px;
  color: var(--text-secondary);
}

.trust-badge-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.trust-tag-pill {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--accent-purple);
  background: rgba(109, 53, 242, 0.07);
  padding: 3px 10px;
  border-radius: 9999px;
}

/* KPI Ribbon */
.testimonials-kpi-ribbon {
  background: #ffffff;
  border: 1px solid var(--border-light);
  border-radius: 16px;
  padding: 20px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 48px;
  box-shadow: 0 8px 24px rgba(7, 21, 47, 0.04);
}
.t-kpi-item {
  text-align: center;
  flex: 1;
}
.t-kpi-num {
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.1;
  margin-bottom: 4px;
}
.t-kpi-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.t-kpi-divider {
  width: 1px;
  height: 36px;
  background: var(--border-light);
}

/* Testimonials Carousel Stage & Floating Left/Right Arrows */
.testimonials-carousel-wrapper {
  position: relative;
  width: 100%;
  margin-bottom: 50px;
}

.t-nav-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.96);
  border: 1.5px solid var(--border-light);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  box-shadow: 0 10px 25px rgba(7, 21, 47, 0.12), 0 2px 6px rgba(0, 0, 0, 0.04);
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.t-nav-arrow:hover {
  background: var(--accent-purple);
  border-color: var(--accent-purple);
  color: #ffffff;
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 14px 30px rgba(109, 53, 242, 0.38);
}

.t-nav-arrow:active {
  transform: translateY(-50%) scale(0.95);
}

.t-nav-arrow.t-arrow-prev {
  left: -24px;
}

.t-nav-arrow.t-arrow-next {
  right: -24px;
}

@media (max-width: 1320px) and (min-width: 992px) {
  .t-nav-arrow.t-arrow-prev {
    left: -14px;
  }
  .t-nav-arrow.t-arrow-next {
    right: -14px;
  }
}

@media (max-width: 991px) and (min-width: 769px) {
  .t-nav-arrow.t-arrow-prev {
    left: -8px;
  }
  .t-nav-arrow.t-arrow-next {
    right: -8px;
  }
  .t-nav-arrow {
    width: 44px;
    height: 44px;
  }
}

@media (max-width: 768px) {
  .t-nav-arrow {
    display: none !important;
  }
}

/* Horizontal Scroll Track (Scrollbar completely hidden on Desktop & Mobile) */
.testimonials-cards-grid {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  gap: 24px;
  padding: 12px 6px 12px 6px;
  margin-bottom: 0;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none !important; /* Firefox */
  -ms-overflow-style: none !important; /* IE 10+ */
  cursor: grab;
  user-select: none;
}

.testimonials-cards-grid.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
}

.testimonials-cards-grid::-webkit-scrollbar {
  display: none !important; /* Chrome, Safari, Opera */
  width: 0 !important;
  height: 0 !important;
}

.testimonial-card {
  flex: 0 0 540px;
  min-width: 540px;
  max-width: 540px;
  background: #ffffff;
  border: 1px solid var(--border-light);
  border-radius: 20px;
  padding: 32px 30px;
  box-shadow: 0 10px 30px rgba(7, 21, 47, 0.04);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease;
  display: flex;
  flex-direction: column;
  position: relative;
  scroll-snap-align: start;
}

@media (max-width: 1200px) and (min-width: 769px) {
  .testimonial-card {
    flex: 0 0 460px;
    min-width: 460px;
    max-width: 460px;
  }
}
.testimonial-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 48px rgba(7, 21, 47, 0.09);
}

.testimonial-card.aura-border-red:hover { border-color: rgba(239, 68, 68, 0.4); }
.testimonial-card.aura-border-pink:hover { border-color: rgba(236, 72, 153, 0.4); }
.testimonial-card.aura-border-blue:hover { border-color: rgba(59, 130, 246, 0.4); }
.testimonial-card.aura-border-amber:hover { border-color: rgba(234, 179, 8, 0.4); }

.t-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}
.t-stars {
  color: #f59e0b;
  font-size: 16px;
  letter-spacing: 2px;
}
.t-project-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  letter-spacing: 0.04em;
}
.badge-red { background: #fee2e2; color: #b91c1c; }
.badge-pink { background: #fdf2f8; color: #be185d; }
.badge-blue { background: #eff6ff; color: #1d4ed8; }
.badge-amber { background: #fefce8; color: #a16207; }

.pulse-dot-red, .pulse-dot-pink, .pulse-dot-blue, .pulse-dot-amber {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
}
.pulse-dot-red { background: #ef4444; box-shadow: 0 0 6px #ef4444; }
.pulse-dot-pink { background: #ec4899; box-shadow: 0 0 6px #ec4899; }
.pulse-dot-blue { background: #3b82f6; box-shadow: 0 0 6px #3b82f6; }
.pulse-dot-amber { background: #eab308; box-shadow: 0 0 6px #eab308; }

.t-quote-mark {
  font-family: Georgia, serif;
  font-size: 48px;
  line-height: 1;
  color: rgba(109, 53, 242, 0.18);
  margin-bottom: -10px;
  user-select: none;
}
.t-quote-text {
  font-size: 14.5px;
  line-height: 1.7;
  color: #334155;
  margin-bottom: 22px;
  font-weight: 450;
  flex: 1;
}

.t-metric-highlight {
  border-radius: 12px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
}
.highlight-red { background: #fef2f2; border: 1px solid #fee2e2; }
.highlight-pink { background: #fdf2f8; border: 1px solid #fce7f3; }
.highlight-blue { background: #eff6ff; border: 1px solid #dbeafe; }
.highlight-amber { background: #fefce8; border: 1px solid #fef08a; }

.t-m-val {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 800;
  flex-shrink: 0;
}
.highlight-red .t-m-val { color: #b91c1c; }
.highlight-pink .t-m-val { color: #be185d; }
.highlight-blue .t-m-val { color: #1d4ed8; }
.highlight-amber .t-m-val { color: #a16207; }

.t-m-txt {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
}

.t-client-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 18px;
  border-top: 1px solid var(--border-light);
}
.t-client-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 14px;
  color: #ffffff;
  flex-shrink: 0;
}
.avatar-red { background: linear-gradient(135deg, #ef4444, #b91c1c); }
.avatar-pink { background: linear-gradient(135deg, #ec4899, #be185d); }
.avatar-blue { background: linear-gradient(135deg, #3b82f6, #1d4ed8); }
.avatar-amber { background: linear-gradient(135deg, #f59e0b, #b45309); }

.t-client-info {
  display: flex;
  flex-direction: column;
}
.t-client-name {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0 0 2px 0;
}
.t-client-role {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 3px;
}
.t-company-link {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--accent-purple);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  transition: color 0.2s ease;
}
.t-company-link:hover {
  color: #4f1ec4;
  text-decoration: underline;
}
.t-company-static {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
}

/* Bottom CTA Strip */
.testimonials-bottom-cta {
  background: linear-gradient(135deg, #07152f 0%, #0d224d 100%);
  border-radius: 20px;
  padding: 36px 44px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  box-shadow: 0 20px 50px rgba(7, 21, 47, 0.16);
}
.t-bottom-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--accent-cyan);
  letter-spacing: 0.12em;
  display: block;
  margin-bottom: 6px;
}
.t-bottom-title {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 800;
  color: #ffffff;
  margin: 0;
}
.t-bottom-actions {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
}
.t-bottom-actions .btn-cta-purple {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--grad-purple-blue);
  color: #ffffff !important;
  padding: 13px 28px;
  border-radius: 9999px;
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 4px 20px rgba(109, 53, 242, 0.45);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}
.t-bottom-actions .btn-cta-purple:hover {
  filter: brightness(1.12);
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(109, 53, 242, 0.6);
}

.t-bottom-actions .btn-cta-outline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff !important;
  padding: 13px 28px;
  border-radius: 9999px;
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(8px);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}
.t-bottom-actions .btn-cta-outline:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: #ffffff;
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 255, 255, 0.18);
}

/* Responsive adjustments for Testimonials */
@media (max-width: 991px) {
  .sec-testimonials-light {
    padding: 64px 0 !important;
  }
  .testimonials-header-wrap {
    gap: 24px;
    margin-bottom: 28px;
  }
  .testimonials-trust-badge-card {
    max-width: 100%;
    flex: 1 1 100%;
  }
}

@media (max-width: 768px) {
  .sec-testimonials-light {
    padding: 44px 0 !important;
  }
  .testimonials-header-wrap {
    gap: 16px !important;
    margin-bottom: 20px !important;
  }
  .testimonials-header-wrap .sec-title-light {
    font-size: 24px !important;
    line-height: 1.25 !important;
    margin-bottom: 8px !important;
  }
  .testimonials-header-wrap .sec-desc-light {
    font-size: 13px !important;
    line-height: 1.55 !important;
    margin-bottom: 0 !important;
  }

  /* Compact Trust Badge on Mobile */
  .testimonials-trust-badge-card {
    padding: 14px 16px !important;
    border-radius: 14px !important;
    gap: 8px !important;
    box-shadow: 0 4px 16px rgba(7, 21, 47, 0.04) !important;
  }
  .trust-stars-glow {
    font-size: 16px !important;
    letter-spacing: 2px !important;
  }
  .trust-rating-score {
    font-size: 15px !important;
  }
  .trust-badge-meta strong {
    font-size: 13px !important;
  }
  .trust-badge-meta span {
    font-size: 11px !important;
  }
  .trust-badge-tags {
    gap: 5px !important;
    margin-top: 2px !important;
  }
  .trust-tag-pill {
    font-size: 9px !important;
    padding: 2px 8px !important;
  }

  /* Compact 2x2 KPI Ribbon on Mobile */
  .testimonials-kpi-ribbon {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px 12px !important;
    padding: 12px 14px !important;
    border-radius: 14px !important;
    margin-bottom: 22px !important;
    box-shadow: 0 4px 14px rgba(7, 21, 47, 0.03) !important;
  }
  .t-kpi-divider {
    display: none !important;
  }
  .t-kpi-item {
    flex: none !important;
    text-align: center !important;
  }
  .t-kpi-num {
    font-size: 20px !important;
    margin-bottom: 2px !important;
  }
  .t-kpi-label {
    font-size: 9.5px !important;
    letter-spacing: 0.02em !important;
  }

  /* Testimonials Cards in Sleek Horizontal Touch-Scroll Carousel */
  .testimonials-cards-grid {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    gap: 14px !important;
    padding: 6px 4px 16px 4px !important;
    width: 100% !important;
    scroll-snap-type: x mandatory !important;
    margin-bottom: 24px !important;
  }
  .testimonials-cards-grid::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }
  .testimonial-card {
    flex: 0 0 280px !important;
    min-width: 280px !important;
    max-width: 82vw !important;
    padding: 18px 16px !important;
    border-radius: 18px !important;
    scroll-snap-align: start !important;
    box-sizing: border-box !important;
  }
  .t-stars {
    font-size: 13px !important;
  }
  .t-project-badge {
    font-size: 9px !important;
    padding: 3px 8px !important;
  }
  .t-quote-mark {
    font-size: 32px !important;
    margin-bottom: -6px !important;
  }
  .t-quote-text {
    font-size: 12.5px !important;
    line-height: 1.55 !important;
    margin-bottom: 14px !important;
  }
  .t-metric-highlight {
    padding: 7px 10px !important;
    gap: 6px !important;
    margin-bottom: 14px !important;
    border-radius: 10px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  .t-m-val {
    font-size: 13.5px !important;
  }
  .t-m-txt {
    font-size: 9.5px !important;
  }
  .t-client-row {
    padding-top: 12px !important;
    gap: 10px !important;
  }
  .t-client-avatar {
    width: 38px !important;
    height: 38px !important;
    font-size: 12px !important;
  }
  .t-client-name {
    font-size: 13.5px !important;
  }
  .t-client-role {
    font-size: 11px !important;
  }
  .t-company-link {
    font-size: 10.5px !important;
  }

  /* Bottom CTA Mobile */
  .testimonials-bottom-cta {
    padding: 22px 18px !important;
    border-radius: 16px !important;
    gap: 16px !important;
  }
  .t-bottom-title {
    font-size: 18px !important;
    line-height: 1.3 !important;
  }
  .t-bottom-actions {
    width: 100% !important;
    flex-direction: column !important;
    gap: 10px !important;
  }
  .t-bottom-actions a {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 12px 18px !important;
    font-size: 13.5px !important;
  }
}

/* Mobile Touch Swipe Indicator Badge */
.mobile-swipe-guide {
  display: none;
}
@media (max-width: 768px) {
  .mobile-swipe-guide {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 700;
    color: var(--accent-purple);
    background: rgba(109, 53, 242, 0.07);
    border: 1px dashed rgba(109, 53, 242, 0.28);
    border-radius: 9999px;
    padding: 4px 12px;
    margin-bottom: 12px;
    letter-spacing: 0.02em;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   GLOBAL MOBILE SECTION SPACING & VERTICAL GAP OPTIMIZATION
   Eliminates excessive empty gaps (200px+) across all pages on mobile
   ══════════════════════════════════════════════════════════════════════════ */

.sec-services-cta-banner-wrap {
  padding: 0 0 70px 0;
  background: #ffffff;
}

@media (max-width: 991px) {
  .sec-about-light,
  .sec-services-homepage-light,
  .sec-capabilities-light,
  .sec-stack-light,
  .sec-projects-light,
  .sec-our-values,
  .sec-story-light,
  .sec-portfolio-showcase,
  .sec-contact-clean,
  .sec-all-services-body,
  .sec-system-status {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }
}

@media (max-width: 768px) {
  /* Tight, balanced vertical padding for all sections on mobile */
  .sec-about-light,
  .sec-services-homepage-light,
  .sec-capabilities-light,
  .sec-stack-light,
  .sec-projects-light,
  .sec-our-values,
  .sec-story-light,
  .sec-portfolio-showcase,
  .sec-contact-clean,
  .sec-all-services-body,
  .sec-system-status {
    padding-top: 36px !important;
    padding-bottom: 36px !important;
  }

  /* Subpage Hero & Home Hero */
  .subpage-hero-cyber {
    padding-top: 86px !important;
    padding-bottom: 32px !important;
  }
  .subpage-hero-lead {
    margin-bottom: 20px !important;
  }

  /* Services page specific spacing */
  .sec-services-tabbed-section {
    padding-top: 24px !important;
    padding-bottom: 16px !important;
  }
  .services-page-tab-nav {
    margin-bottom: 16px !important;
  }
  .premium-services-list {
    margin-bottom: 16px !important;
    padding-bottom: 16px !important;
  }
  .sec-services-cta-banner-wrap {
    padding-top: 0 !important;
    padding-bottom: 18px !important;
  }
  .closing-services-cta-banner {
    margin-top: 10px !important;
    margin-bottom: 0 !important;
    padding: 24px 18px !important;
    border-radius: 18px !important;
  }
  .closing-cta-tag {
    margin-bottom: 6px !important;
  }
  .closing-cta-heading {
    font-size: 20px !important;
    line-height: 1.25 !important;
    margin-bottom: 8px !important;
  }
  .closing-cta-desc {
    font-size: 13px !important;
    line-height: 1.55 !important;
    margin-bottom: 16px !important;
  }
  .closing-cta-inner {
    gap: 16px !important;
  }
  .closing-cta-btn-col,
  .closing-cta-btn-col a {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
  }

  /* Subpage High-Contrast CTA Box spacing */
  .sec-subpage-cta {
    padding-top: 18px !important;
    padding-bottom: 24px !important;
  }
  .subpage-cta-card-box {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 24px 18px !important;
    border-radius: 18px !important;
  }

  /* Footer spacing */
  .light-footer,
  .site-footer-light {
    padding-top: 32px !important;
    padding-bottom: 20px !important;
  }

  /* Content typography margin compressions */
  .sec-tracker-light {
    margin-bottom: 10px !important;
  }
  .sec-title-light {
    margin-bottom: 10px !important;
    font-size: clamp(24px, 6.5vw, 32px) !important;
    line-height: 1.2 !important;
  }
  .sec-desc-light {
    margin-bottom: 18px !important;
    font-size: 13.5px !important;
  }
  .sec-services-header-box {
    margin-bottom: 20px !important;
  }

  /* Values grid on About page */
  .values-grid-light {
    margin-top: 18px !important;
    gap: 12px !important;
  }
  .value-card-light {
    padding: 20px 16px !important;
    border-radius: 14px !important;
  }

  /* Story section on About page */
  .story-layout-grid {
    gap: 24px !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   404 ERROR PAGE STYLING (EXTERNALIZED)
   ══════════════════════════════════════════════════════════════════════════ */
.error-page-wrapper {
  min-height: calc(100vh - 74px);
  min-height: calc(100dvh - 74px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 86px 20px 30px 20px;
  background: 
    radial-gradient(circle at 15% 20%, rgba(109, 53, 242, 0.08) 0%, transparent 45%),
    radial-gradient(circle at 85% 80%, rgba(34, 211, 238, 0.08) 0%, transparent 45%),
    #ffffff;
  text-align: center;
  position: relative;
  box-sizing: border-box;
}
.error-card {
  max-width: 540px;
  width: 100%;
  background: #ffffff;
  border: 1px solid var(--border-light, rgba(7, 21, 47, 0.08));
  border-radius: 22px;
  padding: 30px 32px 28px 32px;
  box-shadow: 0 20px 50px rgba(7, 21, 47, 0.07), 0 4px 16px rgba(109, 53, 242, 0.04);
  position: relative;
}
.error-brand-logo {
  display: inline-block;
  margin-bottom: 14px;
}
.error-brand-logo img {
  height: 58px;
  width: auto;
  object-fit: contain;
}
.error-code-badge {
  display: inline-block;
  font-family: var(--font-mono, monospace);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--accent-purple, #6d35f2);
  background: rgba(109, 53, 242, 0.08);
  border: 1px solid rgba(109, 53, 242, 0.18);
  padding: 4px 12px;
  border-radius: 9999px;
  margin-bottom: 10px;
}
.error-big-num {
  font-family: var(--font-heading, sans-serif);
  font-size: clamp(52px, 8vw, 76px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.04em;
  background: linear-gradient(135deg, #07152f 0%, #6d35f2 50%, #22d3ee 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 8px;
}
.error-title {
  font-family: var(--font-heading, sans-serif);
  font-size: clamp(17px, 2.4vw, 21px);
  font-weight: 800;
  color: var(--text-primary, #07152f);
  margin-bottom: 8px;
  line-height: 1.25;
}
.error-lead {
  font-size: 13.5px;
  color: var(--text-secondary, #475569);
  line-height: 1.5;
  margin-bottom: 22px;
  max-width: 460px;
  margin-left: auto;
  margin-right: auto;
}
.error-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.btn-error-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #07152f;
  color: #ffffff !important;
  padding: 11px 24px;
  border-radius: 9999px;
  font-size: 13.5px;
  font-weight: 700;
  font-family: var(--font-heading, sans-serif);
  letter-spacing: -0.01em;
  text-decoration: none;
  border: 1.5px solid #07152f;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 18px rgba(7, 21, 47, 0.16);
}
.btn-error-primary:hover {
  background: var(--accent-purple, #6d35f2);
  border-color: var(--accent-purple, #6d35f2);
  box-shadow: 0 8px 25px rgba(109, 53, 242, 0.35);
  transform: translateY(-2px);
  color: #ffffff !important;
}
.btn-error-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #ffffff;
  color: #07152f !important;
  padding: 11px 24px;
  border-radius: 9999px;
  font-size: 13.5px;
  font-weight: 700;
  font-family: var(--font-heading, sans-serif);
  letter-spacing: -0.01em;
  text-decoration: none;
  border: 1.5px solid #cbd5e1;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}
.btn-error-secondary:hover {
  border-color: var(--accent-purple, #6d35f2);
  color: var(--accent-purple, #6d35f2) !important;
  background: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(109, 53, 242, 0.15);
}
@media (max-width: 500px) {
  .error-card {
    padding: 24px 18px;
    border-radius: 18px;
  }
  .error-actions {
    flex-direction: column;
    width: 100%;
    gap: 10px;
  }
  .btn-error-primary, .btn-error-secondary {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
  }
}

/* ── 22. LEGAL PAGES (Privacy Policy, Terms of Service, Disclaimer) ──────── */
.sec-legal-body {
  padding: 60px 0 80px 0;
  background: #ffffff;
}
.legal-container-grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 40px;
  align-items: flex-start;
}
.legal-nav-card {
  background: #ffffff;
  border: 1px solid var(--border-light);
  border-radius: 20px;
  padding: 24px;
  position: sticky;
  top: 100px;
  box-shadow: 0 4px 20px rgba(7, 21, 47, 0.04);
}
.legal-nav-title {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: 0.04em;
  margin-bottom: 14px;
  text-transform: uppercase;
}
.legal-nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.legal-nav-list a {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-secondary);
  padding: 8px 12px;
  border-radius: 10px;
  text-decoration: none;
  transition: all 0.2s ease;
}
.legal-nav-list a:hover {
  color: var(--accent-purple);
  background: rgba(109, 53, 242, 0.05);
}
.legal-content-card {
  background: #ffffff;
  border: 1px solid var(--border-light);
  border-radius: 24px;
  padding: 48px;
  box-shadow: 0 4px 25px rgba(7, 21, 47, 0.04);
}
.legal-block {
  margin-bottom: 40px;
}
.legal-block:last-child {
  margin-bottom: 0;
}
.legal-block-heading {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.legal-block-num {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent-purple);
  background: rgba(109, 53, 242, 0.08);
  padding: 4px 8px;
  border-radius: 6px;
  font-weight: 700;
}
.legal-block-text {
  font-size: 15px;
  line-height: 1.75;
  color: var(--text-secondary);
  margin-bottom: 14px;
}
.legal-block-list {
  list-style: none;
  padding: 0;
  margin: 0 0 16px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.legal-block-list li {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--text-secondary);
  position: relative;
  padding-left: 24px;
}
.legal-block-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--accent-purple);
  font-weight: 800;
}
.legal-contact-callout {
  background: #f8fafc;
  border: 1px solid var(--border-light);
  border-radius: 16px;
  padding: 24px;
  margin-top: 20px;
}
.legal-contact-callout p {
  margin: 4px 0;
  font-size: 14px;
  color: var(--text-secondary);
}

@media (max-width: 992px) {
  .legal-container-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .legal-nav-card {
    position: static;
  }
  .legal-content-card {
    padding: 28px 20px;
    border-radius: 18px;
  }
  .legal-block-heading {
    font-size: 19px;
  }
}

/* ==========================================================================
   HOMEPAGE 7-STEP ENGINEERING PROCESS TIMELINE (Zig-Zag & Mobile Workflow)
   ========================================================================== */
.sec-home-process {
  padding: 85px 0 95px;
  position: relative;
  background: linear-gradient(180deg, #ffffff 0%, rgba(248, 250, 255, 0.7) 50%, #ffffff 100%);
  overflow: hidden;
}

.home-process-header {
  margin-bottom: 55px;
}

.home-process-wrapper {
  position: relative;
  padding: 25px 0 35px;
  min-height: 300px;
}

/* SVG Zig-Zag Connector Line Container */
.home-process-zigzag-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 150px;
  pointer-events: none;
  z-index: 1;
}

.home-process-zigzag-svg {
  width: 100%;
  height: 100%;
  display: block;
}

.home-zigzag-animated-path {
  animation: homeZigzagFlow 30s linear infinite;
}

@keyframes homeZigzagFlow {
  from {
    stroke-dashoffset: 250;
  }
  to {
    stroke-dashoffset: 0;
  }
}

/* 7-Step Grid Layout */
.home-process-timeline {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 12px;
  position: relative;
  z-index: 2;
}

/* Staggered Alternating Heights for Wave Effect */
.home-step-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  cursor: pointer;
  padding: 8px 4px;
  border-radius: 18px;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.home-step-item.step-pos-top {
  margin-top: 0;
}

.home-step-item.step-pos-bottom {
  margin-top: 60px;
}

.home-step-item:hover {
  transform: translateY(-6px);
}

/* Node Styling */
.home-node-wrapper {
  position: relative;
  margin-bottom: 14px;
  z-index: 3;
}

.home-step-node {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 2.5px solid #6D35F2;
  color: #6D35F2;
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-shadow: 0 8px 24px rgba(109, 53, 242, 0.16), 0 0 0 4px rgba(255, 255, 255, 0.95);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.home-step-node .node-ripple {
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  opacity: 0.35;
  animation: nodePulse 2.8s cubic-bezier(0.25, 1, 0.5, 1) infinite;
  pointer-events: none;
}

@keyframes nodePulse {
  0% {
    transform: scale(1);
    opacity: 0.45;
  }
  100% {
    transform: scale(1.4);
    opacity: 0;
  }
}

/* Specific Node Colors */
.home-step-node.node-purple { border-color: #6D35F2; color: #6D35F2; box-shadow: 0 8px 22px rgba(109, 53, 242, 0.18), 0 0 0 4px #FFFFFF; }
.home-step-node.node-blue { border-color: #2563EB; color: #2563EB; box-shadow: 0 8px 22px rgba(37, 99, 235, 0.18), 0 0 0 4px #FFFFFF; }
.home-step-node.node-cyan { border-color: #06B6D4; color: #0891B2; box-shadow: 0 8px 22px rgba(6, 182, 212, 0.18), 0 0 0 4px #FFFFFF; }
.home-step-node.node-emerald { border-color: #10B981; color: #059669; box-shadow: 0 8px 22px rgba(16, 185, 129, 0.18), 0 0 0 4px #FFFFFF; }
.home-step-node.node-violet { border-color: #8B5CF6; color: #7C3AED; box-shadow: 0 8px 22px rgba(139, 92, 246, 0.18), 0 0 0 4px #FFFFFF; }
.home-step-node.node-amber { border-color: #F59E0B; color: #D97706; box-shadow: 0 8px 22px rgba(245, 158, 11, 0.18), 0 0 0 4px #FFFFFF; }
.home-step-node.node-pink { border-color: #EC4899; color: #DB2777; box-shadow: 0 8px 22px rgba(236, 72, 153, 0.18), 0 0 0 4px #FFFFFF; }

.home-step-item:hover .home-step-node {
  transform: scale(1.14);
  color: #FFFFFF !important;
}
.home-step-item:hover .home-step-node.node-purple { background: linear-gradient(135deg, #6D35F2, #8B5CF6); box-shadow: 0 12px 30px rgba(109, 53, 242, 0.45); }
.home-step-item:hover .home-step-node.node-blue { background: linear-gradient(135deg, #2563EB, #3B82F6); box-shadow: 0 12px 30px rgba(37, 99, 235, 0.45); }
.home-step-item:hover .home-step-node.node-cyan { background: linear-gradient(135deg, #0891B2, #06B6D4); box-shadow: 0 12px 30px rgba(6, 182, 212, 0.45); }
.home-step-item:hover .home-step-node.node-emerald { background: linear-gradient(135deg, #059669, #10B981); box-shadow: 0 12px 30px rgba(16, 185, 129, 0.45); }
.home-step-item:hover .home-step-node.node-violet { background: linear-gradient(135deg, #7C3AED, #A855F7); box-shadow: 0 12px 30px rgba(124, 58, 237, 0.45); }
.home-step-item:hover .home-step-node.node-amber { background: linear-gradient(135deg, #D97706, #F59E0B); box-shadow: 0 12px 30px rgba(245, 158, 11, 0.45); }
.home-step-item:hover .home-step-node.node-pink { background: linear-gradient(135deg, #DB2777, #F43F5E); box-shadow: 0 12px 30px rgba(219, 39, 119, 0.45); }

/* Step Body Card */
.home-step-body {
  background: #FFFFFF;
  border: 1px solid var(--border-light);
  border-radius: 16px;
  padding: 16px 12px;
  width: 100%;
  min-height: 155px;
  box-shadow: 0 4px 18px rgba(7, 21, 47, 0.04);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.home-step-item:hover .home-step-body {
  border-color: rgba(109, 53, 242, 0.3);
  box-shadow: 0 12px 32px rgba(109, 53, 242, 0.1);
  transform: translateY(-2px);
}

/* Icon Badges */
.step-icon-badge {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  transition: transform 0.25s ease;
}

.home-step-item:hover .step-icon-badge {
  transform: scale(1.08);
}

.step-icon-badge.icon-purple { background: rgba(109, 53, 242, 0.1); color: #6D35F2; }
.step-icon-badge.icon-blue { background: rgba(37, 99, 235, 0.1); color: #2563EB; }
.step-icon-badge.icon-cyan { background: rgba(6, 182, 212, 0.1); color: #0891B2; }
.step-icon-badge.icon-emerald { background: rgba(16, 185, 129, 0.1); color: #059669; }
.step-icon-badge.icon-violet { background: rgba(139, 92, 246, 0.1); color: #7C3AED; }
.step-icon-badge.icon-amber { background: rgba(245, 158, 11, 0.1); color: #D97706; }
.step-icon-badge.icon-pink { background: rgba(236, 72, 153, 0.1); color: #DB2777; }

.home-step-title {
  font-family: var(--font-heading);
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 6px;
  line-height: 1.25;
}

.home-step-desc {
  font-size: 0.74rem;
  color: var(--text-secondary);
  line-height: 1.45;
}

/* Hover Preview Popup (Desktop) */
.step-hover-preview {
  position: absolute;
  bottom: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(12px) scale(0.92);
  width: 220px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 100;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  filter: drop-shadow(0 16px 32px rgba(11, 22, 53, 0.18));
}

.home-step-item:hover .step-hover-preview {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0) scale(1);
}

.home-step-item:nth-child(1) .step-hover-preview {
  left: 10px;
  transform: translateY(12px) scale(0.92);
}
.home-step-item:nth-child(1):hover .step-hover-preview {
  transform: translateY(0) scale(1);
}

.home-step-item:nth-child(7) .step-hover-preview {
  left: auto;
  right: 10px;
  transform: translateY(12px) scale(0.92);
}
.home-step-item:nth-child(7):hover .step-hover-preview {
  transform: translateY(0) scale(1);
}

.preview-card-inner {
  background: #FFFFFF;
  border-radius: 14px;
  border: 1px solid rgba(226, 232, 240, 0.9);
  padding: 12px;
  position: relative;
  text-align: left;
}

.preview-card-inner::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 7px;
  border-style: solid;
  border-color: #FFFFFF transparent transparent transparent;
}

.home-step-item:nth-child(1) .preview-card-inner::after {
  left: 30px;
  transform: none;
}
.home-step-item:nth-child(7) .preview-card-inner::after {
  left: auto;
  right: 30px;
  transform: none;
}

.preview-badge {
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
  display: inline-block;
}

.preview-illustration {
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 6px;
  border: 1px solid #F1F5F9;
}

.preview-illustration .illus-svg {
  width: 100%;
  height: auto;
  display: block;
}

.preview-caption {
  font-size: 0.72rem;
  color: var(--text-secondary);
  line-height: 1.35;
  font-weight: 500;
}

/* ==========================================================================
   RESPONSIVE MODES (Tablet & Mobile: Seamless Image 1 Vertical Timeline)
   ========================================================================== */
@media (max-width: 1199px) and (min-width: 1024px) {
  .home-step-title {
    font-size: 0.82rem;
  }
  .home-step-desc {
    font-size: 0.7rem;
  }
  .home-step-body {
    padding: 14px 8px;
    min-height: 165px;
  }
}

@media (max-width: 1023px) {
  .home-process-zigzag-container {
    display: none;
  }
  
  .step-hover-preview {
    display: none;
  }

  .home-process-wrapper {
    padding: 10px 0;
  }

  .home-process-timeline {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 640px;
    margin: 0 auto;
    padding-left: 64px;
    position: relative;
  }

  /* Connected Vertical Timeline Line on Left (Image 1 Style) */
  .home-process-timeline::before {
    content: '';
    position: absolute;
    left: 24px;
    top: 25px;
    bottom: 25px;
    width: 3px;
    background: linear-gradient(180deg, #6D35F2 0%, #2563EB 20%, #06B6D4 40%, #10B981 60%, #8B5CF6 80%, #EC4899 100%);
    border-radius: 3px;
    z-index: 1;
  }

  .home-step-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    position: relative;
    width: 100%;
    margin-top: 0 !important;
    padding: 0;
  }

  .home-step-item:hover {
    transform: translateX(4px);
  }

  .home-node-wrapper {
    position: absolute;
    left: -64px;
    top: 50%;
    transform: translateY(-50%);
    margin-bottom: 0;
    z-index: 3;
  }

  .home-step-node {
    width: 48px;
    height: 48px;
    font-size: 0.88rem;
  }

  .home-step-body {
    flex-direction: row;
    align-items: center;
    text-align: left;
    padding: 16px 20px;
    gap: 16px;
    min-height: auto;
    border-radius: 16px;
    box-shadow: var(--shadow-soft);
  }

  .step-icon-badge {
    margin-bottom: 0;
    flex-shrink: 0;
    width: 42px;
    height: 42px;
  }

  .home-step-title {
    font-size: 1rem;
    margin-bottom: 3px;
  }

  .home-step-desc {
    font-size: 0.82rem;
    line-height: 1.45;
  }
}

@media (max-width: 576px) {
  .sec-home-process {
    padding: 60px 0 70px;
  }

  .home-process-timeline {
    padding-left: 52px;
    gap: 14px;
  }

  .home-process-timeline::before {
    left: 20px;
  }

  .home-node-wrapper {
    left: -52px;
  }

  .home-step-node {
    width: 40px;
    height: 40px;
    font-size: 0.82rem;
    box-shadow: 0 4px 12px rgba(109, 53, 242, 0.15), 0 0 0 3px #FFFFFF;
  }

  .home-step-body {
    padding: 14px 16px;
    gap: 12px;
  }

  .step-icon-badge {
    width: 36px;
    height: 36px;
  }

  .home-step-title {
    font-size: 0.94rem;
  }

  .home-step-desc {
    font-size: 0.78rem;
  }
}

/* ==========================================================================
   ELEVATED MODERN PORTFOLIO GRID & DEDICATED CASE STUDY SYSTEM
   ========================================================================== */

/* ── 1. PORTFOLIO MODERN GRID SECTION ── */
.sec-portfolio-modern {
  padding: 80px 0 100px;
  background: linear-gradient(180deg, #F8FAFC 0%, #FFFFFF 100%);
  position: relative;
}

.port-filter-bar-wrap {
  margin: 36px 0 44px;
}

.port-filter-tabs {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 8px;
  background: #FFFFFF;
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 9999px;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04);
  width: fit-content;
  max-width: 100%;
}

.port-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 9999px;
  font-family: var(--font-heading);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

.port-filter-pill:hover {
  color: var(--text-primary);
  background: #F1F5F9;
}

.port-filter-pill.active {
  background: #07152f !important;
  color: #FFFFFF !important;
  border-color: #07152f !important;
  box-shadow: 0 4px 14px rgba(7, 21, 47, 0.25) !important;
}

.port-filter-pill.active span {
  color: #FFFFFF !important;
}

.port-filter-pill.active .port-pill-dot {
  background: #22d3ee !important;
}

.port-filter-pill.active .port-pill-count {
  background: rgba(255, 255, 255, 0.22) !important;
  color: #FFFFFF !important;
}

/* 3-Column Modern Project Grid */
.port-modern-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

@media (max-width: 1100px) {
  .port-modern-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }
}

/* Mobile Horizontal Scroll Carousel */
@media (max-width: 768px) {
  .sec-portfolio-modern {
    padding: 45px 0 60px;
    overflow-x: clip;
  }

  .port-filter-bar-wrap {
    margin: 18px 0 20px;
  }

  .port-filter-tabs {
    border-radius: 14px;
    width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
    padding: 5px;
    gap: 6px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .port-filter-tabs::-webkit-scrollbar {
    display: none;
  }

  .port-filter-pill {
    padding: 7px 12px;
    font-size: 12px;
    flex-shrink: 0;
  }

  .port-mobile-scroll-hint {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 10px;
    padding-right: 4px;
  }

  .port-modern-grid {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 14px !important;
    padding: 6px 4px 18px 4px;
    scrollbar-width: thin;
    scrollbar-color: var(--accent-purple) #E2E8F0;
  }

  .port-modern-grid::-webkit-scrollbar {
    height: 5px;
  }

  .port-modern-grid::-webkit-scrollbar-track {
    background: #E2E8F0;
    border-radius: 9999px;
  }

  .port-modern-grid::-webkit-scrollbar-thumb {
    background: var(--accent-purple);
    border-radius: 9999px;
  }

  .port-project-card {
    flex: 0 0 82vw !important;
    max-width: 310px !important;
    min-width: 260px !important;
    scroll-snap-align: start;
    scroll-snap-stop: normal;
  }
}

.port-mobile-scroll-hint {
  display: none;
}

/* Project Card - Sleek & Compact */
.port-project-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 3px 14px rgba(15, 23, 42, 0.04);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease;
  position: relative;
}

.port-project-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 32px -10px rgba(15, 23, 42, 0.1);
  border-color: #CBD5E1;
}

/* Media Thumbnail */
.port-card-media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #0A192F;
}

.port-thumb-link {
  display: block;
  width: 100%;
  height: 100%;
}

.port-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.port-project-card:hover .port-thumb-img {
  transform: scale(1.04);
}

.port-card-status-chip {
  position: absolute;
  bottom: 10px;
  left: 10px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  background: rgba(10, 25, 47, 0.88);
  backdrop-filter: blur(8px);
  padding: 4px 8px;
  border-radius: 9999px;
  border: 1px solid;
  z-index: 2;
}

.port-card-cat-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(6px);
  color: var(--navy-dark);
  padding: 3px 8px;
  border-radius: 5px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  z-index: 2;
}

/* Card Content Body - Compact & Clean */
.port-card-content {
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.port-card-metric-highlight {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 8px;
}

.port-mh-val {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 800;
  color: var(--accent-purple);
}

.port-mh-lbl {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
}

.port-card-title {
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0 0 4px 0;
  line-height: 1.25;
}

.port-card-title a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

.port-card-title a:hover {
  color: var(--accent-purple);
}

.port-card-tagline {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--accent-blue);
  margin: 0 0 8px 0;
  line-height: 1.35;
}

.port-card-desc {
  font-family: var(--font-body);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-secondary);
  margin: 0 0 12px 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.port-card-tech-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 14px;
  margin-top: auto;
}

.port-card-tech-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  background: #F1F5F9;
  color: #475569;
  padding: 2px 7px;
  border-radius: 4px;
  border: 1px solid #E2E8F0;
}

.port-card-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 12px;
  border-top: 1px solid #F1F5F9;
  gap: 8px;
}

.port-btn-readmore {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 700;
  color: var(--navy-dark);
  text-decoration: none;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  padding: 6px 13px;
  border-radius: 9999px;
  transition: all 0.25s ease;
}

.port-btn-readmore:hover {
  background: var(--navy-dark);
  color: #FFFFFF;
  border-color: var(--navy-dark);
  transform: translateX(2px);
}

.port-btn-live {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: #16A34A;
  background: rgba(22, 163, 74, 0.08);
  border: 1px solid rgba(22, 163, 74, 0.2);
  padding: 5px 10px;
  border-radius: 9999px;
  text-decoration: none;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.port-btn-live:hover {
  background: #16A34A;
  color: #FFFFFF;
  border-color: #16A34A;
  box-shadow: 0 4px 10px rgba(22, 163, 74, 0.25);
}


/* ── 2. DEDICATED CASE STUDY DETAILS PAGE ── */
.case-study-page {
  background: #FFFFFF;
  color: var(--text-primary);
}

/* Breadcrumb */
.cs-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 22px;
  color: var(--text-muted);
}

.cs-breadcrumb a {
  color: var(--text-secondary);
  text-decoration: none;
  transition: color 0.2s ease;
}

.cs-breadcrumb a:hover {
  color: var(--accent-purple);
}

.cs-bc-sep {
  opacity: 0.4;
}

.cs-bc-current {
  color: var(--navy-dark);
  font-weight: 700;
}

/* Hero Section */
.cs-hero-section {
  padding: 40px 0 36px;
  background: linear-gradient(180deg, #F8FAFC 0%, #FFFFFF 100%);
  border-bottom: 1px solid #E2E8F0;
}

.cs-hero-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 36px;
  align-items: start;
}

@media (max-width: 992px) {
  .cs-hero-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

.cs-status-chip-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.cs-status-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 4px 10px;
  border-radius: 9999px;
  border: 1px solid;
  background: #FFFFFF;
}

.cs-cat-badge {
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--navy-dark);
  background: #E2E8F0;
  padding: 3px 9px;
  border-radius: 5px;
}

.cs-hero-title {
  font-family: var(--font-heading);
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 900;
  color: var(--navy-dark);
  line-height: 1.15;
  margin: 0 0 10px 0;
}

.cs-hero-tagline {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 700;
  color: var(--accent-purple);
  margin: 0 0 14px 0;
  line-height: 1.4;
}

.cs-hero-summary {
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--text-secondary);
  margin: 0 0 24px 0;
}

.cs-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.cs-primary-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Quick Facts Cyber Blueprint Box */
.cs-quickfacts-box {
  background: #0B132B;
  border: 1px solid #1E293B;
  border-radius: 16px;
  padding: 22px;
  box-shadow: 0 12px 30px rgba(11, 19, 43, 0.12);
}

.cs-qf-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.cs-qf-top-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  color: #38BDF8;
  letter-spacing: 0.08em;
}

.cs-qf-top-pill {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  background: rgba(56, 189, 248, 0.12);
  color: #38BDF8;
  border: 1px solid rgba(56, 189, 248, 0.25);
  padding: 2px 7px;
  border-radius: 4px;
}

.cs-qf-list {
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.cs-qf-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cs-qf-label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 600;
  color: #94A3B8;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.cs-qf-val {
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  color: #F1F5F9;
}

.cs-qf-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: #34D399;
  text-decoration: none;
  transition: color 0.2s ease;
}

.cs-qf-link:hover {
  text-decoration: underline;
  color: #6EE7B7;
}

/* Integrated Metrics Strip */
.cs-hero-metrics-strip {
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid #E2E8F0;
}

.cs-metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

@media (max-width: 860px) {
  .cs-metrics-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}

@media (max-width: 480px) {
  .cs-metrics-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .cs-metric-card {
    padding: 12px 8px;
  }
  .cs-metric-val {
    font-size: 20px;
  }
  .cs-metric-lbl {
    font-size: 11px;
  }
  .cs-metric-sub {
    font-size: 9.5px;
  }
}

.cs-metric-card {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 16px 14px;
  text-align: center;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.cs-metric-card:hover {
  transform: translateY(-2px);
  border-color: #CBD5E1;
}

.cs-metric-val {
  font-family: var(--font-mono);
  font-size: 26px;
  font-weight: 900;
  color: var(--accent-purple);
  margin-bottom: 5px;
  line-height: 1;
}

.cs-metric-lbl {
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 800;
  color: var(--navy-dark);
  margin-bottom: 2px;
}

.cs-metric-sub {
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--text-muted);
}

/* Multi-Image Interactive Gallery (Refined Sizing & Centered) */
.cs-gallery-section {
  padding: 60px 0;
  background: #F8FAFC;
  border-bottom: 1px solid #E2E8F0;
}

/* Master Showcase Side-by-Side Layout */
.cs-showcase-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 16px;
  align-items: start;
  margin-top: 24px;
  min-width: 0;
  max-width: 100%;
}

@media (max-width: 1024px) {
  .cs-showcase-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
}

.cs-viewer-frame {
  position: relative;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 50px -12px rgba(15, 23, 42, 0.22);
  background: #070D1E;
  display: flex;
  flex-direction: column;
}

/* Browser Chrome Toolbar */
.cs-viewer-toolbar {
  background: #0F172A;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  z-index: 2;
}

.cs-browser-dots {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.cs-browser-dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

.cs-browser-dots .dot-red { background: #EF4444; }
.cs-browser-dots .dot-yellow { background: #F59E0B; }
.cs-browser-dots .dot-green { background: #10B981; }

.cs-browser-address {
  flex: 1;
  max-width: 440px;
  margin: 0 auto;
  background: rgba(2, 6, 23, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  padding: 4px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.cs-address-lock {
  font-size: 10px;
  color: #10B981;
}

.cs-address-url {
  font-family: var(--font-mono);
  font-size: 11px;
  color: #94A3B8;
  letter-spacing: 0.02em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cs-toolbar-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  color: #34D399;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.35);
  border-radius: 9999px;
  padding: 3px 10px;
  text-decoration: none;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.cs-toolbar-live-badge:hover {
  background: rgba(16, 185, 129, 0.22);
  border-color: #34D399;
  color: #FFFFFF;
}

.cs-viewer-media-wrap {
  position: relative;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  aspect-ratio: 16 / 10.5;
  background: #070D1E;
  overflow: hidden;
  display: block;
}

#csMainImage {
  width: 100%;
  max-width: 100%;
  height: 100%;
  object-fit: contain;
  background: #070D1E;
  display: block;
  transition: opacity 0.2s ease;
}

.cs-viewer-overlay {
  background: #0B132B;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

@media (max-width: 768px) {
  .cs-gallery-section {
    padding: 32px 0 !important;
  }
  .cs-showcase-layout {
    gap: 12px !important;
    margin-top: 16px !important;
  }
  .cs-viewer-toolbar {
    padding: 8px 10px !important;
    gap: 8px !important;
  }
  .cs-browser-dots {
    gap: 4px !important;
  }
  .cs-browser-dots span {
    width: 7px !important;
    height: 7px !important;
  }
  .cs-browser-address {
    padding: 2px 8px !important;
    margin: 0 !important;
    max-width: 170px !important;
  }
  .cs-address-url {
    font-size: 9px !important;
  }
  .cs-toolbar-live-badge {
    font-size: 8.5px !important;
    padding: 2px 6px !important;
    white-space: nowrap !important;
  }
  .cs-viewer-media-wrap {
    aspect-ratio: 16 / 10 !important;
  }
  .cs-viewer-overlay {
    position: static !important;
    background: #0B132B !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding: 12px 14px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
  }
  .cs-viewer-tag {
    font-size: 9px !important;
    margin-bottom: 2px !important;
  }
  .cs-viewer-title {
    font-size: 14px !important;
    line-height: 1.3 !important;
    margin-bottom: 3px !important;
  }
  .cs-viewer-caption {
    font-size: 11px !important;
    line-height: 1.5 !important;
  }
  .cs-viewer-live-btn {
    margin-top: 6px !important;
    font-size: 10.5px !important;
    padding: 4px 10px !important;
  }
  .cs-gallery-sidebar {
    padding: 12px !important;
    border-radius: 14px !important;
  }
  .cs-thumb-col {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important;
    gap: 10px !important;
    padding-bottom: 6px !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }
  .cs-thumb-col::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }
  .cs-thumb-card {
    flex: 0 0 240px !important;
    min-width: 240px !important;
    max-width: 78vw !important;
    scroll-snap-align: start !important;
    padding: 8px 10px !important;
    gap: 10px !important;
    box-sizing: border-box !important;
  }
  .cs-thumb-preview {
    width: 54px !important;
    height: 40px !important;
    flex-shrink: 0 !important;
  }
  .cs-thumb-headline {
    font-size: 11.5px !important;
    line-height: 1.25 !important;
  }
  .cs-thumb-subtext {
    font-size: 10px !important;
  }
}

.cs-viewer-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: #38BDF8;
  letter-spacing: 0.08em;
  display: block;
  margin-bottom: 2px;
}

.cs-viewer-title {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 800;
  color: #FFFFFF;
  margin: 0 0 3px 0;
}

.cs-viewer-caption {
  font-family: var(--font-body);
  font-size: 12px;
  color: #94A3B8;
  margin: 0;
  max-width: 580px;
}

.cs-viewer-live-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-heading);
  font-size: 11.5px;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(8px);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 6px 14px;
  border-radius: 9999px;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.cs-viewer-live-btn:hover {
  background: #FFFFFF;
  color: var(--navy-dark);
}

/* Right Gallery Sidebar */
.cs-gallery-sidebar {
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04);
  min-width: 0;
  max-width: 100%;
}

.cs-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid #F1F5F9;
}

.cs-sidebar-title {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 800;
  color: var(--navy-dark);
  letter-spacing: 0.08em;
}

.cs-sidebar-count {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  color: var(--accent-purple);
  background: #FAF5FF;
  padding: 2px 7px;
  border-radius: 4px;
  border: 1px solid rgba(109, 53, 242, 0.15);
}

.cs-thumb-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: flex-start;
}

@media (min-width: 769px) and (max-width: 1024px) {
  .cs-thumb-col {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }
}

.cs-thumb-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: #F8FAFC;
  border: 1.5px solid #E2E8F0;
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  width: 100%;
}

.cs-thumb-card:hover {
  background: #FFFFFF;
  border-color: #CBD5E1;
  transform: translateX(3px);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05);
}

.cs-thumb-card.active {
  background: #FAF5FF;
  border-color: var(--accent-purple);
  box-shadow: 0 4px 14px rgba(109, 53, 242, 0.14);
}

.cs-thumb-preview {
  position: relative;
  width: 62px;
  height: 46px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
  background: #0B132B;
}

.cs-thumb-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cs-thumb-idx {
  position: absolute;
  top: 2px;
  left: 2px;
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 800;
  background: rgba(11, 19, 43, 0.85);
  color: #38BDF8;
  padding: 1px 4px;
  border-radius: 3px;
}

.cs-thumb-details {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  min-width: 0;
}

.cs-thumb-badge-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2px;
}

.cs-thumb-screen-tag {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 800;
  color: var(--accent-purple);
  letter-spacing: 0.05em;
}

.cs-thumb-card.active .cs-thumb-active-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-purple);
  box-shadow: 0 0 6px var(--accent-purple);
}

.cs-thumb-headline {
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 800;
  color: var(--navy-dark);
  margin: 0 0 2px 0;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cs-thumb-subtext {
  font-family: var(--font-body);
  font-size: 10.5px;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Challenge & Solution Section */
.cs-narrative-section {
  padding: 60px 0;
  background: #FFFFFF;
  border-bottom: 1px solid #E2E8F0;
}

.cs-narrative-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

@media (max-width: 860px) {
  .cs-narrative-grid {
    grid-template-columns: 1fr;
  }
}

.cs-narrative-card {
  padding: 26px;
  border-radius: 14px;
  border: 1px solid #E2E8F0;
  background: #FFFFFF;
  position: relative;
}

.cs-card-challenge {
  border-top: 3px solid #EF4444;
  box-shadow: 0 4px 18px rgba(239, 68, 68, 0.04);
}

.cs-card-solution {
  border-top: 3px solid #10B981;
  box-shadow: 0 4px 18px rgba(16, 185, 129, 0.04);
}

.cs-narrative-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}

.cs-narrative-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 800;
  flex-shrink: 0;
}

.icon-challenge {
  background: rgba(239, 68, 68, 0.1);
  color: #EF4444;
}

.icon-solution {
  background: rgba(16, 185, 129, 0.1);
  color: #10B981;
}

.cs-narrative-subtitle {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  display: block;
  margin-bottom: 3px;
}

.cs-narrative-title {
  font-family: var(--font-heading);
  font-size: 19px;
  font-weight: 800;
  color: var(--navy-dark);
  margin: 0;
  line-height: 1.25;
}

.cs-narrative-text {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.65;
  color: #475569;
  margin: 0;
}

/* Engineered Capabilities / Features */
.cs-features-section {
  padding: 60px 0;
  background: #F8FAFC;
  border-bottom: 1px solid #E2E8F0;
}

.cs-features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 32px;
}

@media (max-width: 992px) {
  .cs-features-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .cs-features-grid {
    grid-template-columns: 1fr;
  }
}

.cs-feature-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  padding: 22px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cs-feature-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px -6px rgba(15, 23, 42, 0.08);
  border-color: #CBD5E1;
}

.cs-feat-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.cs-feat-badge {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 800;
  color: var(--accent-purple);
  background: #FAF5FF;
  padding: 2px 7px;
  border-radius: 4px;
  border: 1px solid rgba(109, 53, 242, 0.15);
}

.cs-feat-icon-symbol {
  font-size: 20px;
}

.cs-feat-title {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 800;
  color: var(--navy-dark);
  margin: 0 0 6px 0;
  line-height: 1.3;
}

.cs-feat-desc {
  font-family: var(--font-body);
  font-size: 12.5px;
  line-height: 1.55;
  color: #64748B;
  margin: 0;
}

/* Tech Stack Section */
.cs-stack-section {
  padding: 60px 0;
  background: #FFFFFF;
  border-bottom: 1px solid #E2E8F0;
}

.cs-stack-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 30px;
}

@media (max-width: 992px) {
  .cs-stack-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 550px) {
  .cs-stack-grid {
    grid-template-columns: 1fr;
  }
}

.cs-stack-col {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  padding: 20px;
}

.cs-stack-layer-title {
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 800;
  color: var(--navy-dark);
  margin: 0 0 12px 0;
  padding-bottom: 8px;
  border-bottom: 1px solid #E2E8F0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.cs-stack-pills {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cs-tech-pill {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  background: #FFFFFF;
  color: #334155;
  padding: 5px 10px;
  border-radius: 6px;
  border: 1px solid #E2E8F0;
}

/* Quote Section */
.cs-quote-section {
  padding: 60px 0;
  background: #F8FAFC;
  border-bottom: 1px solid #E2E8F0;
}

.cs-quote-box {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  padding: 36px 40px;
  position: relative;
  max-width: 820px;
  margin: 0 auto;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
  text-align: center;
}

.cs-quote-stars {
  color: #F59E0B;
  font-size: 17px;
  letter-spacing: 3px;
  margin-bottom: 14px;
}

.cs-quote-body {
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.6;
  color: var(--navy-dark);
  margin: 0 0 20px 0;
  font-style: italic;
}

.cs-quote-author {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: left;
}

.cs-qa-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-purple), #2563EB);
  color: #FFFFFF;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}

.cs-qa-name {
  font-family: var(--font-heading);
  font-size: 14.5px;
  font-weight: 800;
  color: var(--navy-dark);
  display: block;
}

.cs-qa-role {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--text-muted);
}

/* Next Project Nav */
.cs-next-nav-section {
  padding: 50px 0 70px;
  background: #FFFFFF;
}

.cs-next-nav-card {
  background: #0A192F;
  border-radius: 16px;
  padding: 30px 36px;
  max-width: 860px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  color: #FFFFFF;
}

@media (max-width: 768px) {
  .cs-next-nav-card {
    flex-direction: column;
    align-items: flex-start;
    padding: 24px;
  }
}

.cs-next-hint {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  color: #38BDF8;
  letter-spacing: 0.08em;
  display: block;
  margin-bottom: 4px;
}

.cs-next-title {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 800;
  color: #FFFFFF;
  margin: 0 0 6px 0;
}

.cs-next-desc {
  font-family: var(--font-body);
  font-size: 13.5px;
  color: #94A3B8;
  margin: 0;
}

/* ── PREMIUM TEAM & DIRECTOR SECTION (ABOUT PAGE) ────────────────── */
.sec-our-team-premium {
  padding: 75px 0 90px;
  background: var(--bg-secondary, #f8fafc);
  background-image: 
    radial-gradient(circle at 12% 15%, rgba(109, 53, 242, 0.05) 0%, transparent 45%),
    radial-gradient(circle at 88% 85%, rgba(6, 182, 212, 0.05) 0%, transparent 45%);
  border-top: 1px solid var(--border-light, #e2e8f0);
  border-bottom: 1px solid var(--border-light, #e2e8f0);
  position: relative;
  scroll-margin-top: 130px;
}
.sec-our-team-premium::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(109, 53, 242, 0.25), transparent);
}

/* Header (Centered & Harmonious) */
.team-header-centered {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 46px;
}
.team-header-centered .sec-tracker-light {
  justify-content: center;
  margin-bottom: 12px;
}
.team-header-centered .sec-title-light {
  font-family: var(--font-heading);
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-primary, #07152f);
  margin-bottom: 14px;
  line-height: 1.25;
}
.team-header-centered .sec-desc-light {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-secondary, #64748b);
  margin: 0 auto;
}

/* ── DIRECTOR SPOTLIGHT FEATURE ───────────────────────── */
.director-spotlight-card {
  background: #ffffff;
  border: 1px solid var(--border-light, #e2e8f0);
  border-radius: 24px;
  padding: 32px;
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 40px;
  align-items: center;
  box-shadow: 0 14px 34px -10px rgba(15, 23, 42, 0.07);
  position: relative;
  overflow: hidden;
  margin-bottom: 56px;
  transition: all 0.35s ease;
}
.director-spotlight-card:hover {
  border-color: rgba(109, 53, 242, 0.3);
  box-shadow: 0 20px 45px -12px rgba(109, 53, 242, 0.12);
}
.director-media-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 18px;
  overflow: hidden;
  background: #0f172a;
  box-shadow: 0 8px 24px -6px rgba(15, 23, 42, 0.12);
}
.director-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.director-spotlight-card:hover .director-img {
  transform: scale(1.03);
}
.director-glass-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 13px;
  border-radius: 9999px;
  background: rgba(15, 23, 42, 0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #ffffff;
  z-index: 2;
}
.badge-pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 8px #22c55e;
  display: inline-block;
}
.director-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.director-meta-top {
  margin-bottom: 8px;
}
.director-tag-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 9999px;
  background: rgba(109, 53, 242, 0.08);
  color: #6d35f2;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.director-name {
  font-family: var(--font-heading);
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-primary, #07152f);
  margin: 0 0 4px 0;
  line-height: 1.2;
}
.director-title {
  font-family: var(--font-heading);
  font-size: 14.5px;
  font-weight: 700;
  color: #6d35f2;
  letter-spacing: 0.02em;
  margin-bottom: 18px;
}
.director-quote-box {
  background: #f8fafc;
  border-left: 3px solid #6d35f2;
  border-radius: 0 14px 14px 0;
  padding: 18px 22px;
  margin-bottom: 22px;
  border-top: 1px solid rgba(226, 232, 240, 0.7);
  border-right: 1px solid rgba(226, 232, 240, 0.7);
  border-bottom: 1px solid rgba(226, 232, 240, 0.7);
}
.director-bio {
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.75;
  color: #334155;
  margin: 0;
  font-style: normal;
}
.director-skills-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

/* ── SUBHEADING FOR CORE TEAM ───────────────────────── */
.team-core-header {
  margin-bottom: 28px;
  text-align: left;
}
.team-core-title {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text-primary, #07152f);
  margin-top: 6px;
  margin-bottom: 0;
}

/* ── 4 TEAM CARDS GRID ───────────────────────── */
.team-grid-4col {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.team-card-v2 {
  background: #ffffff;
  border: 1px solid var(--border-light, #e2e8f0);
  border-radius: 20px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 8px 20px -6px rgba(15, 23, 42, 0.04);
  box-sizing: border-box;
}
.team-card-v2:hover {
  transform: translateY(-5px);
  border-color: rgba(109, 53, 242, 0.3);
  box-shadow: 0 16px 32px -8px rgba(109, 53, 242, 0.1);
}
.team-card-media {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 14px;
  overflow: hidden;
  background: #0f172a;
}
.team-media-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.team-card-v2:hover .team-media-img {
  transform: scale(1.04);
}
.team-media-top {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 2;
  pointer-events: none;
}
.team-glass-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 9999px;
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #ffffff;
}
.team-pod-id {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.75);
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(8px);
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.team-card-body {
  padding: 16px 6px 4px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.team-name {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text-primary, #07152f);
  margin: 0 0 3px 0;
  line-height: 1.3;
}
.team-title {
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 700;
  color: #6d35f2;
  margin-bottom: 10px;
  line-height: 1.4;
}
.team-bio {
  font-family: var(--font-body);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-secondary, #64748b);
  margin-bottom: 14px;
}
.team-skill-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: auto;
  margin-bottom: 14px;
}
.team-tag-pill {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  background: #f8fafc;
  border: 1px solid var(--border-light, #e2e8f0);
  color: var(--text-secondary, #64748b);
  padding: 3px 8px;
  border-radius: 6px;
  transition: all 0.2s ease;
}
.team-card-v2:hover .team-tag-pill {
  border-color: rgba(109, 53, 242, 0.2);
  color: var(--text-primary, #07152f);
}
.team-card-footer {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-top: 10px;
  border-top: 1px dashed var(--border-light, #e2e8f0);
}
.team-pod-name {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted, #94a3b8);
}
.pod-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #6d35f2;
}

/* ── RESPONSIVE BREAKPOINTS ───────────────────────── */
@media (max-width: 1200px) {
  .director-spotlight-card {
    grid-template-columns: 320px 1fr;
    gap: 30px;
    padding: 24px;
  }
  .team-grid-4col {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}
@media (max-width: 860px) {
  .director-spotlight-card {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 22px;
  }
  .director-media-wrap {
    max-width: 360px;
    margin: 0 auto;
  }
  .director-content {
    text-align: left;
  }
  .director-name {
    font-size: 26px;
  }
  .team-header-centered .sec-title-light {
    font-size: 28px;
  }
}
@media (max-width: 580px) {
  .sec-our-team-premium {
    padding: 50px 0 60px;
  }
  .director-spotlight-card {
    padding: 16px;
    border-radius: 18px;
  }
  .director-quote-box {
    padding: 14px 16px;
  }
  .director-bio {
    font-size: 13.5px;
    line-height: 1.65;
  }
  .team-grid-4col {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .director-name {
    font-size: 24px;
  }
}




/* ── NAVBAR SERVICES MEGA DROPDOWN (DESKTOP) ───────────────────────── */
.nav-item-dropdown-wrap {
  position: static;
  display: inline-flex;
  align-items: center;
  height: 100%;
}
.nav-has-dropdown {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
}
.nav-dropdown-chevron {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  opacity: 0.7;
}
.nav-item-dropdown-wrap:hover .nav-dropdown-chevron {
  transform: rotate(180deg);
  opacity: 1;
}

/* Mega Dropdown Panel — Centered Horizontally on Screen */
.nav-mega-dropdown {
  position: absolute;
  top: 74px;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  width: 1140px;
  max-width: calc(100vw - 32px);
  background: #ffffff;
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: 22px;
  box-shadow: 0 32px 70px -15px rgba(7, 21, 47, 0.16), 0 0 0 1px rgba(109, 53, 242, 0.04);
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: all 0.24s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 1200;
  box-sizing: border-box;
}
/* Seamless hover bridge */
.nav-mega-dropdown::before {
  content: "";
  position: absolute;
  top: -18px;
  left: 0;
  right: 0;
  height: 18px;
  background: transparent;
}
.nav-item-dropdown-wrap:hover .nav-mega-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.mega-dropdown-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.mega-col {
  display: flex;
  flex-direction: column;
}
.mega-col-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding-bottom: 10px;
  margin-bottom: 8px;
  border-bottom: 1px solid #f1f5f9;
}
.mega-col-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
}
.mega-col-badge {
  margin-left: auto;
  font-size: 9.5px;
  background: #f1f5f9;
  padding: 2px 6px;
  border-radius: 4px;
  color: #64748b;
}
.mega-col-links {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mega-service-link {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 10px;
  border-radius: 12px;
  text-decoration: none;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  background: transparent;
}
.mega-service-link:hover {
  background: #f8fafc;
  transform: translateX(3px);
}
.msl-icon-box {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13.5px;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.mega-service-link:hover .msl-icon-box {
  transform: scale(1.1);
}
.msl-name {
  display: block;
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary, #07152f);
  line-height: 1.25;
  margin-bottom: 2px;
  transition: color 0.18s ease;
}
.mega-service-link:hover .msl-name {
  color: #6d35f2;
}
.msl-desc {
  display: block;
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--text-secondary, #64748b);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 175px;
}
.mega-dropdown-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px dashed var(--border-light, #e2e8f0);
}
.mdf-left {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-muted, #94a3b8);
}
.mdf-pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 8px #22c55e;
  display: inline-block;
}
.mdf-hub-link {
  font-family: var(--font-heading);
  font-size: 12.5px;
  font-weight: 700;
  color: #6d35f2;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: gap 0.2s ease, color 0.2s ease;
}
.mdf-hub-link:hover {
  color: #07152f;
  gap: 8px;
}

/* ── MOBILE DRAWER SERVICES ACCORDION ────────────────── */
.mobile-nav-services-group {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.mobile-nav-services-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.mobile-services-expander {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #64748b;
  transition: all 0.25s ease;
  margin-left: 8px;
}
.mobile-services-expander.active {
  transform: rotate(180deg);
  background: rgba(109, 53, 242, 0.1);
  color: #6d35f2;
  border-color: rgba(109, 53, 242, 0.2);
}
.mobile-services-subgrid {
  display: none;
  flex-direction: column;
  gap: 14px;
  padding: 14px 16px;
  background: #f8fafc;
  border-radius: 14px;
  border: 1px solid #e2e8f0;
  margin-top: 6px;
  margin-bottom: 10px;
}
.mobile-services-subgrid.open {
  display: flex;
}
.ms-cat-title {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: #6d35f2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.ms-sub-link {
  display: block;
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 600;
  color: #334155;
  text-decoration: none;
  padding: 3px 0;
  transition: color 0.18s ease;
}
.ms-sub-link:hover {
  color: #6d35f2;
  padding-left: 4px;
}

/* ── SERVICE DETAILS PAGE STYLES ────────────────────── */
.service-details-page {
  background: #ffffff;
}
.sd-hero-section {
  padding: 40px 0 70px;
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
  border-bottom: 1px solid var(--border-light, #e2e8f0);
}
.sd-hero-grid {
  display: grid;
  grid-template-columns: 1.25fr 0.9fr;
  gap: 46px;
  align-items: center;
}
.sd-meta-badges {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.sd-badge-division {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 14px;
  border-radius: 9999px;
  background: #ffffff;
  border: 1px solid;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.sd-pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
}
.sd-badge-status {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: 9999px;
  background: #fef08a;
  color: #854d0e;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
}
.sd-hero-title {
  font-family: var(--font-heading);
  font-size: 40px;
  font-weight: 800;
  color: var(--text-primary, #07152f);
  line-height: 1.18;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}
.sd-hero-lead {
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.72;
  color: #475569;
  margin-bottom: 28px;
  max-width: 640px;
}
.sd-hero-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.sd-hero-card {
  background: #ffffff;
  border: 1px solid var(--border-light, #e2e8f0);
  border-radius: 24px;
  padding: 28px;
  box-shadow: 0 20px 45px -12px rgba(15, 23, 42, 0.08);
}
.sd-spec-header {
  display: flex;
  align-items: center;
  gap: 16px;
}
.sd-spec-icon-wrap {
  width: 52px;
  height: 52px;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}
.sd-spec-category {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  color: #64748b;
  letter-spacing: 0.06em;
}
.sd-spec-title {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 800;
  color: var(--text-primary, #07152f);
  margin: 2px 0 0 0;
}
.sd-spec-divider {
  height: 1px;
  background: var(--border-light, #e2e8f0);
  margin: 20px 0;
}
.sd-metrics-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-bottom: 20px;
}
.sd-metric-item {
  background: #f8fafc;
  border: 1px solid var(--border-light, #e2e8f0);
  border-radius: 14px;
  padding: 12px 14px;
}
.sd-metric-val {
  font-family: var(--font-heading);
  font-size: 23px;
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 3px;
}
.sd-metric-label {
  font-family: var(--font-mono);
  font-size: 11px;
  color: #64748b;
  font-weight: 600;
}
.sd-spec-cta-strip {
  background: #07152f;
  border-radius: 16px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #ffffff;
}
.sd-spec-cta-text span {
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: #94a3b8;
}
.sd-spec-cta-text strong {
  display: block;
  font-family: var(--font-heading);
  font-size: 12.5px;
  color: #ffffff;
}
.sd-spec-cta-btn {
  background: #6d35f2;
  color: #ffffff;
  padding: 8px 14px;
  border-radius: 10px;
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.2s ease;
  white-space: nowrap;
}
.sd-spec-cta-btn:hover {
  background: #5824d6;
}

/* Section Common */
.sd-section {
  padding: 80px 0;
}
.sd-sec-header {
  margin-bottom: 42px;
}

/* Capabilities Grid */
.sd-caps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.sd-cap-card {
  background: #ffffff;
  border: 1px solid var(--border-light, #e2e8f0);
  border-radius: 20px;
  padding: 24px;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 8px 24px -8px rgba(15, 23, 42, 0.04);
}
.sd-cap-card:hover {
  transform: translateY(-5px);
  border-color: rgba(109, 53, 242, 0.35);
  box-shadow: 0 16px 36px -10px rgba(109, 53, 242, 0.1);
}
.sd-cap-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.sd-cap-number {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: #94a3b8;
}
.sd-cap-check-icon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(34, 197, 94, 0.12);
  color: #16a34a;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sd-cap-title {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 800;
  color: var(--text-primary, #07152f);
  margin: 0 0 8px 0;
  line-height: 1.3;
}
.sd-cap-desc {
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.6;
  color: #64748b;
  margin: 0;
}

/* Tech Stack Card */
.sd-tech-section {
  padding-top: 20px;
  padding-bottom: 60px;
}
.sd-tech-card {
  background: #07152f;
  border-radius: 24px;
  padding: 38px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  align-items: center;
  color: #ffffff;
}
.sd-tech-title {
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 800;
  color: #ffffff;
  margin: 10px 0 10px;
}
.sd-tech-desc {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.65;
  color: #94a3b8;
  margin: 0;
}
.sd-tech-chips-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.sd-tech-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #ffffff;
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 600;
}
.sd-tech-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
}

/* Process Steps */
.sd-process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.sd-process-step {
  background: #f8fafc;
  border: 1px solid var(--border-light, #e2e8f0);
  border-radius: 20px;
  padding: 24px;
}
.sd-step-num {
  font-family: var(--font-mono);
  font-size: 26px;
  font-weight: 800;
  color: #6d35f2;
  margin-bottom: 12px;
}
.sd-step-name {
  font-family: var(--font-heading);
  font-size: 16.5px;
  font-weight: 800;
  color: var(--text-primary, #07152f);
  margin: 0 0 8px;
}
.sd-step-desc {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.6;
  color: #64748b;
  margin: 0;
}

/* FAQ Accordion */
.sd-faq-accordion {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sd-faq-item {
  background: #ffffff;
  border: 1px solid var(--border-light, #e2e8f0);
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.2s ease;
}
.sd-faq-item.active {
  border-color: rgba(109, 53, 242, 0.35);
  box-shadow: 0 8px 24px -6px rgba(109, 53, 242, 0.08);
}
.sd-faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  background: none;
  border: none;
  text-align: left;
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary, #07152f);
  cursor: pointer;
  gap: 14px;
}
.sd-faq-toggle-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #64748b;
  flex-shrink: 0;
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.sd-faq-item.active .sd-faq-toggle-icon {
  transform: rotate(45deg);
  background: #6d35f2;
  color: #ffffff;
}
.sd-faq-answer {
  padding: 0 22px 20px;
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.7;
  color: #475569;
}
.sd-faq-answer p {
  margin: 0;
}

/* Nav Footer Bar */
.sd-nav-footer-section {
  padding: 26px 0;
  background: #f8fafc;
  border-top: 1px solid var(--border-light, #e2e8f0);
  border-bottom: 1px solid var(--border-light, #e2e8f0);
}
.sd-nav-footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.sd-nav-prev, .sd-nav-next {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: #07152f;
}
.sd-nav-arrow {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  transition: all 0.2s ease;
}
.sd-nav-prev:hover .sd-nav-arrow {
  background: #6d35f2;
  color: #ffffff;
  transform: translateX(-4px);
}
.sd-nav-next:hover .sd-nav-arrow {
  background: #6d35f2;
  color: #ffffff;
  transform: translateX(4px);
}
.sd-nav-sub {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  color: #64748b;
  text-transform: uppercase;
}
.sd-nav-title {
  display: block;
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 800;
  color: #07152f;
}
.sd-nav-hub-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: 9999px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  color: #07152f;
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.2s ease;
}
.sd-nav-hub-btn:hover {
  border-color: #6d35f2;
  color: #6d35f2;
}

/* Service Title Link on Main Page */
.ps-title-link {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}
.ps-title-link:hover {
  color: #6d35f2;
}

/* ── RESPONSIVE RULES ────────────────────────────────── */
@media (max-width: 1200px) {
  .nav-mega-dropdown {
    width: 980px;
  }
  .sd-caps-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 991px) {
  .nav-mega-dropdown {
    display: none !important;
  }
  .sd-hero-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .sd-tech-card {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 28px;
  }
  .sd-process-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .sd-hero-title {
    font-size: 30px;
  }
  .sd-caps-grid {
    grid-template-columns: 1fr;
  }
  .sd-process-grid {
    grid-template-columns: 1fr;
  }
  .sd-nav-footer-inner {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
  .sd-nav-prev, .sd-nav-next {
    justify-content: center;
  }
  .sd-nav-hub-btn {
    justify-content: center;
  }
}