/* ==========================================================================
   SUPER VIBRANT GRADIENT & HIGH-CONTRAST THEME (super-vibrant-theme.css)
   Rich colors, glowing gradients, 100% high-contrast readable text
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800;900&family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&family=Space+Grotesk:wght@500;600;700&display=swap');

:root {
  /* Super Vibrant Cyber Palette */
  --bg-deep: #070b19;
  --bg-card: rgba(15, 23, 42, 0.85);
  --bg-card-hover: rgba(22, 33, 62, 0.95);
  --border-neon-blue: rgba(56, 189, 248, 0.35);
  --border-neon-purple: rgba(168, 85, 247, 0.35);
  --border-neon-emerald: rgba(52, 211, 153, 0.35);

  /* Vivid Neon & Super Gradients */
  --grad-cyan-blue: linear-gradient(135deg, #00f2fe 0%, #4facfe 100%);
  --grad-purple-pink: linear-gradient(135deg, #a855f7 0%, #ec4899 100%);
  --grad-emerald-teal: linear-gradient(135deg, #10b981 0%, #06b6d4 100%);
  --grad-sunset: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
  --grad-neon-indigo: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #d946ef 100%);
  --grad-card-border: linear-gradient(135deg, rgba(56, 189, 248, 0.6), rgba(168, 85, 247, 0.6));

  /* High-Contrast Crisp Text Colors */
  --text-pure-white: #ffffff;
  --text-bright: #f8fafc;
  --text-highlight: #38bdf8;
  --text-sub: #cbd5e1;
  --text-sub-muted: #94a3b8;

  /* Glowing Shadows */
  --glow-cyan: 0 0 30px rgba(0, 242, 254, 0.35);
  --glow-purple: 0 0 30px rgba(168, 85, 247, 0.35);
  --glow-card: 0 10px 30px -5px rgba(0, 0, 0, 0.6), 0 0 20px rgba(56, 189, 248, 0.15);
}

/* Global Reset & Super Dark Rich Background */
body {
  background-color: var(--bg-deep) !important;
  color: var(--text-bright) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}

/* Ambient Radial Mesh & Glowing Gradients */
.grid-background {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background: 
    radial-gradient(circle at 10% 20%, rgba(99, 102, 241, 0.22) 0%, transparent 45%),
    radial-gradient(circle at 90% 15%, rgba(0, 242, 254, 0.20) 0%, transparent 40%),
    radial-gradient(circle at 50% 60%, rgba(168, 85, 247, 0.18) 0%, transparent 50%),
    radial-gradient(circle at 20% 85%, rgba(16, 185, 129, 0.15) 0%, transparent 45%),
    linear-gradient(to bottom, #070b19 0%, #0b1126 100%) !important;
}

/* ==========================================================================
   TYPOGRAPHY & GRADIENT HEADINGS (HIGH CONTRAST)
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Outfit', sans-serif !important;
  color: var(--text-pure-white) !important;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.section-title {
  font-size: clamp(2.2rem, 3.8vw, 3.2rem) !important;
  color: #ffffff !important;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
  margin-bottom: 0.8rem;
}

.section-subtitle {
  color: #94a3b8 !important;
  font-size: 1.15rem !important;
  max-width: 750px;
  margin: 0 auto;
  line-height: 1.6;
}

.section-tag {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  padding: 6px 18px !important;
  background: rgba(56, 189, 248, 0.12) !important;
  border: 1px solid rgba(56, 189, 248, 0.4) !important;
  border-radius: 9999px !important;
  color: #38bdf8 !important;
  font-family: 'Space Grotesk', monospace !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  box-shadow: 0 0 15px rgba(56, 189, 248, 0.2) !important;
  margin-bottom: 1rem;
}

.section-tag::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #00f2fe;
  box-shadow: 0 0 10px #00f2fe;
}

/* Super Vibrant Gradient Text */
.gradient-text {
  background: linear-gradient(135deg, #00f2fe 0%, #4facfe 40%, #a855f7 80%, #ec4899 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  display: inline-block;
  font-weight: 800;
}

/* ==========================================================================
   HERO SECTION - CRISP & VIBRANT
   ========================================================================== */
.custom-hero {
  position: relative;
  width: 100%;
  min-height: 92vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #050814 !important;
}

.custom-video-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.custom-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.45) contrast(1.15) saturate(1.2);
}

.custom-video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(7, 11, 25, 0.75) 0%, rgba(11, 17, 38, 0.6) 60%, rgba(7, 11, 25, 0.8) 100%) !important;
  z-index: 1;
}

.hero-flex-container {
  position: relative;
  z-index: 10;
  max-width: 1320px;
  width: 100%;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 50px;
  align-items: center;
}

.custom-hero-title {
  font-size: clamp(2.6rem, 4.8vw, 4.2rem) !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  color: #ffffff !important;
  margin-bottom: 1.25rem !important;
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.7);
}

.custom-hero-description {
  font-size: clamp(1.1rem, 1.8vw, 1.3rem) !important;
  color: #e2e8f0 !important;
  line-height: 1.75 !important;
  margin-bottom: 2.2rem !important;
  max-width: 680px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}

.hero-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: center;
}

.custom-hero-button.primary-btn {
  background: linear-gradient(135deg, #00f2fe 0%, #4facfe 50%, #6366f1 100%) !important;
  color: #ffffff !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  padding: 16px 36px !important;
  border-radius: 9999px !important;
  border: none !important;
  text-decoration: none;
  box-shadow: 0 0 25px rgba(0, 242, 254, 0.45) !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.custom-hero-button.primary-btn:hover {
  transform: translateY(-3px) scale(1.03) !important;
  box-shadow: 0 0 40px rgba(0, 242, 254, 0.7) !important;
}

.custom-hero-button.secondary-btn {
  background: rgba(15, 23, 42, 0.75) !important;
  color: #ffffff !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  padding: 16px 34px !important;
  border-radius: 9999px !important;
  border: 1.5px solid rgba(56, 189, 248, 0.5) !important;
  text-decoration: none;
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important;
  transition: all 0.3s ease !important;
}

.custom-hero-button.secondary-btn:hover {
  background: rgba(56, 189, 248, 0.15) !important;
  border-color: #00f2fe !important;
  color: #00f2fe !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 0 25px rgba(0, 242, 254, 0.3) !important;
}

/* ==========================================================================
   3D ROTATING CUBE STYLING - ISOLATED
   ========================================================================== */
.hero-cube-section {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 280px !important;
  position: relative !important;
  isolation: isolate !important;
}

.ethics-container {
  width: 240px !important;
  height: 240px !important;
  position: relative !important;
  perspective: 1200px !important;
  perspective-origin: 50% 50% !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

.cube {
  width: 100% !important;
  height: 100% !important;
  position: absolute !important;
  transform-style: preserve-3d !important;
}

.cube-face {
  position: absolute !important;
  width: 240px !important;
  height: 240px !important;
  background: rgba(15, 23, 42, 0.92) !important;
  border: 2px solid rgba(56, 189, 248, 0.6) !important;
  border-radius: 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 20px !important;
  box-shadow: 0 0 35px rgba(0, 242, 254, 0.25), inset 0 0 20px rgba(56, 189, 248, 0.15) !important;
  backdrop-filter: blur(12px) !important;
  user-select: none !important;
}

.cube-face img {
  width: 85% !important;
  height: 85% !important;
  object-fit: contain !important;
  filter: drop-shadow(0 0 15px rgba(56, 189, 248, 0.5));
}

/* ==========================================================================
   SERVICES & FEATURE CARDS (SUPER VIBRANT)
   ========================================================================== */
.features {
  padding: 100px 0 !important;
  max-width: 1320px;
  margin: 0 auto;
  padding-left: 24px !important;
  padding-right: 24px !important;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.feature-card {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.85) 0%, rgba(20, 30, 55, 0.9) 100%) !important;
  border: 1.5px solid rgba(56, 189, 248, 0.25) !important;
  border-radius: 24px !important;
  padding: 40px 32px !important;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  box-shadow: var(--glow-card) !important;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
  position: relative;
  overflow: hidden;
}

.feature-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: var(--grad-cyan-blue);
  opacity: 0.8;
  transition: height 0.3s ease;
}

.feature-card:hover::before {
  height: 6px;
}

.feature-card:nth-child(2)::before {
  background: var(--grad-purple-pink);
}

.feature-card:nth-child(3)::before {
  background: var(--grad-emerald-teal);
}

.feature-card:hover {
  transform: translateY(-8px) scale(1.02) !important;
  border-color: #38bdf8 !important;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6), 0 0 30px rgba(56, 189, 248, 0.35) !important;
}

.feature-card i {
  font-size: 2.2rem !important;
  color: #00f2fe !important;
  width: 60px;
  height: 60px;
  border-radius: 16px;
  background: rgba(0, 242, 254, 0.12) !important;
  border: 1px solid rgba(0, 242, 254, 0.3) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  box-shadow: 0 0 20px rgba(0, 242, 254, 0.25);
}

.feature-card:nth-child(2) i {
  color: #ec4899 !important;
  background: rgba(236, 72, 153, 0.12) !important;
  border-color: rgba(236, 72, 153, 0.3) !important;
  box-shadow: 0 0 20px rgba(236, 72, 153, 0.25);
}

.feature-card:nth-child(3) i {
  color: #10b981 !important;
  background: rgba(16, 185, 129, 0.12) !important;
  border-color: rgba(16, 185, 129, 0.3) !important;
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.25);
}

.feature-card h3 {
  font-size: 1.5rem !important;
  color: #ffffff !important;
  margin-bottom: 12px !important;
}

.feature-card p {
  color: #cbd5e1 !important;
  font-size: 1.02rem !important;
  line-height: 1.65 !important;
}

/* ==========================================================================
   PROJECTS & PORTFOLIO GRIDS (RICH DARK GLASS + GLOWING LOGOS)
   ========================================================================== */
.projects-section, .projects-preview {
  padding: 80px 0 !important;
  max-width: 1320px;
  margin: 0 auto;
  padding-left: 24px !important;
  padding-right: 24px !important;
}

/* Portfolio Main Tabs */
.portfolio-tabs {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 16px !important;
  margin: 35px auto 25px auto !important;
  padding: 0 16px !important;
  flex-wrap: wrap !important;
  max-width: 800px !important;
}

.portfolio-tabs .portfolio-tab-btn, .portfolio-tabs .tab-btn {
  background: rgba(15, 23, 42, 0.8) !important;
  border: 1.5px solid rgba(56, 189, 248, 0.25) !important;
  color: #94a3b8 !important;
  padding: 14px 32px !important;
  border-radius: 50px !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  backdrop-filter: blur(12px) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}

.portfolio-tabs .portfolio-tab-btn:hover, .portfolio-tabs .tab-btn:hover {
  border-color: #00f2fe !important;
  color: #ffffff !important;
  box-shadow: 0 4px 15px rgba(0, 242, 254, 0.25) !important;
  transform: none !important;
}

.portfolio-tabs .portfolio-tab-btn.active, .portfolio-tabs .tab-btn.active {
  background: linear-gradient(135deg, #00f2fe 0%, #4facfe 100%) !important;
  border-color: #00f2fe !important;
  color: #050b14 !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 20px rgba(0, 242, 254, 0.35) !important;
  transform: none !important;
}

.project-cards, .projects-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)) !important;
  gap: 30px !important;
  padding: 0 !important;
  margin-top: 30px !important;
}

.project-card, .projects-grid .project-card, .project-cards .project-card {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.9) 0%, rgba(20, 30, 55, 0.95) 100%) !important;
  border: 1.5px solid rgba(56, 189, 248, 0.22) !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4), 0 0 20px rgba(56, 189, 248, 0.1) !important;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
  position: relative !important;
  aspect-ratio: auto !important;
  height: auto !important;
  min-height: 480px !important;
}

.project-card:hover {
  transform: translateY(-8px) scale(1.02) !important;
  border-color: #00f2fe !important;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.7), 0 0 35px rgba(0, 242, 254, 0.3) !important;
}

.project-card img {
  width: 100% !important;
  height: 200px !important;
  object-fit: contain !important;
  padding: 24px !important;
  background: linear-gradient(135deg, rgba(11, 18, 38, 0.9) 0%, rgba(15, 23, 42, 0.98) 100%) !important;
  border-bottom: 1px solid rgba(56, 189, 248, 0.15) !important;
  transition: transform 0.4s ease !important;
  display: block !important;
}

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

.project-card .card-icon-preview {
  height: 200px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(135deg, rgba(11, 18, 38, 0.9) 0%, rgba(15, 23, 42, 0.98) 100%) !important;
  border-bottom: 1px solid rgba(56, 189, 248, 0.15) !important;
}

.project-card .project-info, .project-info {
  padding: 24px 28px !important;
  display: flex !important;
  flex-direction: column !important;
  flex-grow: 1 !important;
  position: relative !important;
  background: transparent !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.project-card .project-info h3, .project-info h3 {
  position: static !important;
  background: none !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: 1.35rem !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  margin: 0 0 10px 0 !important;
  padding: 0 !important;
  text-align: left !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.project-card .project-info p, .project-info p {
  position: static !important;
  color: #94a3b8 !important;
  font-size: 0.96rem !important;
  line-height: 1.65 !important;
  margin: 0 0 20px 0 !important;
  flex-grow: 1 !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.project-tags {
  display: flex !important;
  gap: 8px !important;
  margin-bottom: 12px !important;
  flex-wrap: wrap !important;
}

.project-tag {
  font-family: 'Space Grotesk', monospace !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  padding: 3px 10px !important;
  border-radius: 6px !important;
  border: 1px solid !important;
  letter-spacing: 0.3px !important;
}

.project-tag-cyan {
  color: #00f2fe !important;
  background: rgba(0, 242, 254, 0.1) !important;
  border-color: rgba(0, 242, 254, 0.3) !important;
}

.project-tag-blue {
  color: #38bdf8 !important;
  background: rgba(56, 189, 248, 0.1) !important;
  border-color: rgba(56, 189, 248, 0.3) !important;
}

.project-tag-purple {
  color: #c084fc !important;
  background: rgba(192, 132, 252, 0.1) !important;
  border-color: rgba(192, 132, 252, 0.3) !important;
}

.project-tag-pink {
  color: #f472b6 !important;
  background: rgba(244, 114, 182, 0.1) !important;
  border-color: rgba(244, 114, 182, 0.3) !important;
}

.project-tag-green {
  color: #34d399 !important;
  background: rgba(52, 211, 153, 0.1) !important;
  border-color: rgba(52, 211, 153, 0.3) !important;
}

.project-tag-amber {
  color: #fbbf24 !important;
  background: rgba(251, 191, 36, 0.1) !important;
  border-color: rgba(251, 191, 36, 0.3) !important;
}

.view-project {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: #00f2fe !important;
  font-family: 'Space Grotesk', monospace !important;
  font-size: 0.92rem !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  margin-top: auto !important;
  transition: gap 0.25s ease, color 0.25s ease !important;
}

.view-project::after {
  content: '→';
  transition: transform 0.25s ease;
}

.view-project:hover {
  color: #ffffff !important;
  gap: 12px !important;
  text-shadow: 0 0 10px #00f2fe;
}

/* ==========================================================================
   AFFILIATE PARTNER SECTION (GLOWING VIBRANT BOX)
   ========================================================================== */
.affiliate-home-section {
  padding: 110px 0 !important;
  background: linear-gradient(180deg, rgba(7, 11, 25, 0.4) 0%, rgba(15, 23, 42, 0.8) 50%, rgba(7, 11, 25, 0.4) 100%) !important;
  border-top: 1px solid rgba(56, 189, 248, 0.15);
  border-bottom: 1px solid rgba(56, 189, 248, 0.15);
}

.affiliate-featured-card {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(24, 34, 64, 0.95) 100%) !important;
  border: 2px solid rgba(56, 189, 248, 0.4) !important;
  border-radius: 32px !important;
  padding: 60px 45px !important;
  max-width: 860px !important;
  margin: 40px auto 0 !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.7), 0 0 40px rgba(56, 189, 248, 0.2) !important;
}

/* ==========================================================================
   INTEGRATIONS SECTION
   ========================================================================== */
.integrations-section {
  padding: 110px 0 !important;
  max-width: 1320px;
  margin: 0 auto;
  padding-left: 24px !important;
  padding-right: 24px !important;
}

.integration-tabs {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 45px;
}

.integration-tab {
  padding: 12px 28px !important;
  background: rgba(15, 23, 42, 0.8) !important;
  border: 1.5px solid rgba(56, 189, 248, 0.3) !important;
  border-radius: 9999px !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: #cbd5e1 !important;
  cursor: pointer;
  transition: all 0.3s ease !important;
}

.integration-tab:hover {
  border-color: #00f2fe !important;
  color: #00f2fe !important;
  box-shadow: 0 0 15px rgba(0, 242, 254, 0.25) !important;
}

.integration-tab.active {
  background: linear-gradient(135deg, #00f2fe 0%, #4facfe 50%, #6366f1 100%) !important;
  border-color: transparent !important;
  color: #ffffff !important;
  box-shadow: 0 0 30px rgba(0, 242, 254, 0.5) !important;
}

.diagram-wrapper {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.92) 0%, rgba(20, 30, 55, 0.95) 100%) !important;
  border: 2px solid rgba(56, 189, 248, 0.3) !important;
  border-radius: 28px !important;
  padding: 40px !important;
  box-shadow: var(--glow-card) !important;
}

/* ==========================================================================
   CALL TO ACTION (CTA) SECTION
   ========================================================================== */
.cta-section {
  padding: 110px 0 !important;
  text-align: center;
  background: linear-gradient(135deg, rgba(7, 11, 25, 0.9) 0%, rgba(15, 23, 42, 0.95) 100%) !important;
  border-top: 1px solid rgba(56, 189, 248, 0.2);
}

.cta-title {
  font-size: clamp(2.4rem, 4vw, 3.4rem) !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  margin-bottom: 1.2rem !important;
  text-shadow: 0 4px 25px rgba(0, 0, 0, 0.7);
}

.cta-subtitle {
  font-size: 1.2rem !important;
  color: #cbd5e1 !important;
  margin-bottom: 2.8rem !important;
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}

.cta-buttons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 18px;
}

.cta-button-primary {
  padding: 18px 42px !important;
  background: linear-gradient(135deg, #00f2fe 0%, #4facfe 50%, #6366f1 100%) !important;
  color: #ffffff !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  border-radius: 9999px !important;
  text-decoration: none !important;
  box-shadow: 0 0 30px rgba(0, 242, 254, 0.5) !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.cta-button-primary:hover {
  transform: translateY(-3px) scale(1.03) !important;
  box-shadow: 0 0 45px rgba(0, 242, 254, 0.75) !important;
}

.cta-button-secondary {
  padding: 18px 38px !important;
  background: rgba(15, 23, 42, 0.8) !important;
  border: 1.5px solid rgba(56, 189, 248, 0.5) !important;
  color: #ffffff !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  border-radius: 9999px !important;
  text-decoration: none !important;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease !important;
}

.cta-button-secondary:hover {
  background: rgba(56, 189, 248, 0.15) !important;
  border-color: #00f2fe !important;
  color: #00f2fe !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 0 25px rgba(0, 242, 254, 0.3) !important;
}

/* ==========================================================================
   RESPONSIVE ADJUSTMENTS
   ========================================================================== */
@media (max-width: 1024px) {
  .hero-flex-container {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 40px;
  }

  .custom-hero-description {
    margin-left: auto;
    margin-right: auto;
  }

  .hero-buttons {
    justify-content: center;
  }

  .features-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .projects-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ==========================================================================
   CROSS-PAGE UNIFIED UI & GLASSMORPHISM ENHANCEMENTS
   ========================================================================== */

/* Inner Page Hero Sections (About, Team, Careers, Contact, Services) */
.hero-section {
  position: relative;
  min-height: 380px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 120px 24px 60px !important;
  overflow: hidden;
  background: radial-gradient(circle at 50% 30%, rgba(14, 165, 233, 0.15) 0%, rgba(7, 11, 25, 0.95) 75%) !important;
  border-bottom: 1px solid rgba(56, 189, 248, 0.2);
}

.hero-section .hero-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.18;
  filter: blur(2px);
  z-index: 0;
  pointer-events: none;
}

.hero-section .hero-content {
  position: relative;
  z-index: 1;
  max-width: 860px;
  margin: 0 auto;
}

.hero-section .hero-content h1 {
  font-size: clamp(2.5rem, 4.5vw, 3.8rem) !important;
  font-weight: 800 !important;
  margin-bottom: 1rem !important;
  background: linear-gradient(135deg, #ffffff 0%, #38bdf8 60%, #818cf8 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: 0 4px 25px rgba(56, 189, 248, 0.35);
}

.hero-section .hero-content p {
  font-size: 1.15rem !important;
  line-height: 1.8 !important;
  color: #cbd5e1 !important;
  max-width: 760px;
  margin: 0 auto;
}

/* Mission & Values Section (About Page) */
.mission-section {
  padding: 90px 24px !important;
  background: transparent !important;
}

.mission-section .container {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 50px;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}

@media (max-width: 900px) {
  .mission-section .container {
    grid-template-columns: 1fr;
  }
}

.mission-content {
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(56, 189, 248, 0.35);
  border-radius: 24px;
  padding: 40px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 30px rgba(56, 189, 248, 0.15);
  backdrop-filter: blur(16px);
}

.mission-content h2 {
  font-size: 2.4rem;
  margin-bottom: 1.2rem;
  background: var(--grad-cyan-blue);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.mission-content p {
  color: #cbd5e1;
  font-size: 1.1rem;
  line-height: 1.8;
}

.mission-image img {
  width: 100%;
  border-radius: 24px;
  border: 1px solid rgba(168, 85, 247, 0.4);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 30px rgba(168, 85, 247, 0.2);
}

.values-section {
  padding: 80px 24px !important;
  text-align: center;
  max-width: 1280px;
  margin: 0 auto;
}

.values-section h2 {
  font-size: 2.6rem;
  margin-bottom: 40px;
  background: var(--grad-purple-pink);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 28px;
}

.value-card {
  background: rgba(15, 23, 42, 0.85) !important;
  border: 1px solid rgba(56, 189, 248, 0.25) !important;
  border-radius: 20px !important;
  padding: 36px 24px !important;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
  backdrop-filter: blur(12px);
}

.value-card:hover {
  transform: translateY(-8px) !important;
  border-color: #00f2fe !important;
  box-shadow: 0 20px 45px rgba(0, 242, 254, 0.3) !important;
}

.value-card i {
  font-size: 2.6rem !important;
  color: #00f2fe !important;
  margin-bottom: 18px !important;
  filter: drop-shadow(0 0 12px rgba(0, 242, 254, 0.6));
}

.value-card h3 {
  font-size: 1.35rem !important;
  color: #ffffff !important;
  margin-bottom: 12px !important;
}

.value-card p {
  color: #94a3b8 !important;
  font-size: 0.95rem !important;
  line-height: 1.6 !important;
}

/* Team Page Enhancements */
.leadership-section, .directors-section, .team-section {
  padding: 60px 24px !important;
  max-width: 1280px;
  margin: 0 auto;
}

.leadership-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 30px !important;
  margin-top: 30px !important;
  max-width: 1280px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.team-grid {
  display: none !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 30px !important;
  margin-top: 30px !important;
  max-width: 1280px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.team-grid.active {
  display: flex !important;
}

.leader-card, .team-card {
  flex: 0 1 320px !important;
  width: 100% !important;
  max-width: 340px !important;
  min-width: 280px !important;
  background: rgba(15, 23, 42, 0.9) !important;
  border: 1px solid rgba(56, 189, 248, 0.3) !important;
  border-radius: 22px !important;
  overflow: hidden !important;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5) !important;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
  backdrop-filter: blur(16px);
  display: flex !important;
  flex-direction: column !important;
}

.leader-card:hover, .team-card:hover {
  transform: translateY(-8px) scale(1.02) !important;
  border-color: #38bdf8 !important;
  box-shadow: 0 20px 50px rgba(56, 189, 248, 0.3) !important;
}

.leader-image, .member-image, .member-image1 {
  position: relative;
  height: 300px !important;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(11, 18, 38, 0.9), rgba(15, 23, 42, 0.95));
}

.leader-image img, .member-image img, .member-image1 img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: top center !important;
  transition: transform 0.5s ease;
}

.leader-card:hover .leader-image img, .team-card:hover .member-image img, .team-card:hover .member-image1 img {
  transform: scale(1.06);
}

.leader-info, .member-info {
  padding: 24px !important;
  display: flex !important;
  flex-direction: column !important;
  flex-grow: 1 !important;
}

.leader-info h3, .member-info h3 {
  font-size: 1.35rem !important;
  color: #ffffff !important;
  margin-bottom: 6px !important;
}

.leader-info .position, .member-info .position {
  font-family: 'Space Grotesk', monospace !important;
  color: #38bdf8 !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em;
  margin-bottom: 12px !important;
}

.member-quote {
  background: rgba(255, 255, 255, 0.04);
  border-left: 3px solid #38bdf8;
  padding: 10px 14px;
  border-radius: 0 8px 8px 0;
  margin-top: auto !important;
  font-size: 0.88rem;
  color: #cbd5e1;
  font-style: italic;
}

.department-tabs {
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 30px auto 40px auto !important;
  padding: 0 16px !important;
  flex-wrap: wrap !important;
  max-width: 960px !important;
  width: 100% !important;
}

.dept-tab-btn, .department-tabs .tab-btn, .department-tabs button {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: unset !important;
  max-width: fit-content !important;
  height: auto !important;
  min-height: unset !important;
  max-height: 48px !important;
  background: rgba(15, 23, 42, 0.85) !important;
  border: 1.5px solid rgba(56, 189, 248, 0.3) !important;
  color: #94a3b8 !important;
  padding: 10px 24px !important;
  border-radius: 9999px !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
  backdrop-filter: blur(12px) !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
  white-space: nowrap !important;
  transform: none !important;
}

.dept-tab-btn:hover, .department-tabs .tab-btn:hover, .department-tabs button:hover {
  border-color: #00f2fe !important;
  color: #ffffff !important;
  background: rgba(20, 32, 58, 0.9) !important;
  box-shadow: 0 4px 15px rgba(0, 242, 254, 0.25) !important;
  transform: translateY(-2px) !important;
}

.dept-tab-btn.active, .department-tabs .tab-btn.active, .department-tabs button.active {
  background: linear-gradient(135deg, #00f2fe 0%, #38bdf8 100%) !important;
  border-color: #00f2fe !important;
  color: #050b14 !important;
  font-weight: 700 !important;
  box-shadow: 0 0 25px rgba(0, 242, 254, 0.4) !important;
  transform: translateY(-2px) !important;
}

.team-filters {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 35px;
}

.team-filters .filter-btn {
  padding: 10px 22px !important;
  background: rgba(15, 23, 42, 0.8) !important;
  border: 1px solid rgba(56, 189, 248, 0.3) !important;
  border-radius: 9999px !important;
  color: #cbd5e1 !important;
  font-weight: 600 !important;
  cursor: pointer;
  transition: all 0.25s ease !important;
}

.team-filters .filter-btn.active, .team-filters .filter-btn:hover {
  background: linear-gradient(135deg, #00f2fe, #4facfe) !important;
  border-color: #00f2fe !important;
  color: #070b19 !important;
  font-weight: 700 !important;
  box-shadow: 0 0 20px rgba(0, 242, 254, 0.5) !important;
}

/* Careers Page Enhancements */
.careers-section, .benefits-section, .culture-section {
  padding: 60px 24px !important;
  max-width: 1280px;
  margin: 0 auto;
}

.job-grid, .benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 28px;
  margin-top: 30px;
}

.job-card, .benefit-card {
  background: rgba(15, 23, 42, 0.88) !important;
  border: 1px solid rgba(56, 189, 248, 0.3) !important;
  border-radius: 20px !important;
  padding: 30px !important;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5) !important;
  transition: all 0.3s ease !important;
  backdrop-filter: blur(14px);
}

.job-card:hover, .benefit-card:hover {
  transform: translateY(-6px) !important;
  border-color: #a855f7 !important;
  box-shadow: 0 20px 45px rgba(168, 85, 247, 0.3) !important;
}

.job-card h3 {
  font-size: 1.4rem !important;
  color: #ffffff !important;
  margin-bottom: 8px !important;
}

.job-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0;
}

.job-tags span {
  font-family: 'Space Grotesk', monospace;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.35);
  color: #38bdf8;
}

/* Contact Page Enhancements */
.contact-container {
  max-width: 1200px;
  margin: 60px auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 45px;
}

@media (max-width: 900px) {
  .contact-container {
    grid-template-columns: 1fr;
  }
}

.contact-info .info-card {
  background: rgba(15, 23, 42, 0.9) !important;
  border: 1px solid rgba(56, 189, 248, 0.3) !important;
  border-radius: 20px !important;
  padding: 30px !important;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5) !important;
  margin-bottom: 24px;
}

.contact-form-container {
  background: rgba(15, 23, 42, 0.92) !important;
  border: 1.5px solid rgba(56, 189, 248, 0.4) !important;
  border-radius: 24px !important;
  padding: 40px !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 30px rgba(56, 189, 248, 0.2) !important;
  backdrop-filter: blur(16px);
}

.form-group label {
  color: #f1f5f9 !important;
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 8px;
  display: block;
}

.form-group input, .form-group textarea, .form-group select {
  width: 100%;
  background: rgba(7, 11, 25, 0.8) !important;
  border: 1px solid rgba(56, 189, 248, 0.3) !important;
  border-radius: 12px !important;
  padding: 14px 18px !important;
  color: #ffffff !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 1rem !important;
  transition: all 0.25s ease !important;
}

.form-group input:focus, .form-group textarea:focus, .form-group select:focus {
  outline: none !important;
  border-color: #00f2fe !important;
  box-shadow: 0 0 20px rgba(0, 242, 254, 0.4) !important;
  background: rgba(11, 18, 38, 0.95) !important;
}

.submit-btn {
  width: 100%;
  padding: 16px 28px !important;
  background: linear-gradient(135deg, #00f2fe 0%, #4facfe 50%, #6366f1 100%) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 12px !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  cursor: pointer;
  box-shadow: 0 0 25px rgba(0, 242, 254, 0.4) !important;
  transition: all 0.3s ease !important;
}

.submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 40px rgba(0, 242, 254, 0.7) !important;
}

/* Project Detail Pages Dark Glass Polish */
.project-overview {
  max-width: 1000px;
  margin: 40px auto !important;
  padding: 40px 30px !important;
  background: rgba(15, 23, 42, 0.85) !important;
  border: 1px solid rgba(56, 189, 248, 0.3) !important;
  border-radius: 24px !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5) !important;
  backdrop-filter: blur(16px);
}

.project-overview h2 {
  font-size: 2.5rem !important;
  background: var(--grad-cyan-blue) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  margin-bottom: 20px !important;
}

.project-overview p {
  color: #cbd5e1 !important;
  font-size: 1.15rem !important;
  line-height: 1.8 !important;
}

.single-project-hero {
  background: radial-gradient(circle at center, rgba(14, 165, 233, 0.15) 0%, rgba(7, 11, 25, 0.95) 80%) !important;
  border-bottom: 1px solid rgba(56, 189, 248, 0.2);
  height: 320px !important;
}

/* ==========================================================================
   COMPREHENSIVE MOBILE VIEW ALIGNMENT (ALL 33 PAGES)
   ========================================================================== */

/* Global Mobile View Safeguards */
html, body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}

@media (max-width: 768px) {
  /* Containers & Section Spacing */
  .container, 
  .mission-section .container, 
  .detail-container, 
  .case-study-container, 
  .terms-container, 
  .privacy-container,
  .story-container,
  .content-wrapper {
    padding-left: 18px !important;
    padding-right: 18px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  section {
    padding-top: 45px !important;
    padding-bottom: 45px !important;
  }

  .section-header {
    margin-bottom: 25px !important;
    padding: 0 8px !important;
    text-align: center !important;
  }

  .section-title, h2, .chapter-title {
    font-size: clamp(1.75rem, 5.5vw, 2.2rem) !important;
    line-height: 1.25 !important;
    margin-bottom: 12px !important;
    word-break: break-word !important;
    text-align: center !important;
  }

  .section-subtitle, .chapter-subtitle {
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
    text-align: center !important;
  }

  /* Mobile Navbar & Menu */
  .navbar {
    padding: 14px 18px !important;
  }

  .nav-links {
    display: none !important;
    flex-direction: column !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    width: 100% !important;
    background: rgba(11, 18, 38, 0.98) !important;
    border-bottom: 1px solid rgba(0, 242, 254, 0.3) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.8) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    padding: 20px 0 !important;
    gap: 6px !important;
    z-index: 1000 !important;
  }

  .nav-links.active {
    display: flex !important;
  }

  .nav-item {
    color: #e2e8f0 !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    padding: 12px 24px !important;
    text-align: center !important;
    display: block !important;
    transition: all 0.2s ease !important;
  }

  .nav-item:hover, .nav-item.active {
    color: #00f2fe !important;
    background: rgba(0, 242, 254, 0.08) !important;
  }

  .dropdown {
    width: 100% !important;
    text-align: center !important;
  }

  .dropdown-content {
    position: static !important;
    display: block !important;
    opacity: 1 !important;
    transform: none !important;
    background: rgba(15, 23, 42, 0.6) !important;
    border: none !important;
    border-radius: 8px !important;
    margin: 6px 20px !important;
    box-shadow: none !important;
    min-width: unset !important;
    padding: 6px 0 !important;
  }

  .dropdown-item {
    color: #94a3b8 !important;
    font-size: 0.92rem !important;
    padding: 10px 16px !important;
    text-align: center !important;
    border-left: none !important;
  }

  .dropdown-item:hover {
    color: #00f2fe !important;
    background: rgba(0, 242, 254, 0.1) !important;
    padding-left: 16px !important;
  }

  .menu-toggle {
    display: block !important;
    background: transparent !important;
    border: none !important;
    color: #00f2fe !important;
    font-size: 1.5rem !important;
    cursor: pointer !important;
    padding: 4px 8px !important;
  }

  /* Hero Sections */
  .hero-section, .cyber-hero, .hero, .single-project-hero {
    padding: 95px 18px 45px !important;
    min-height: auto !important;
    height: auto !important;
  }

  .hero-content h1, .cyber-hero-title, .hero-section h1, .hero h1 {
    font-size: clamp(1.9rem, 7vw, 2.6rem) !important;
    line-height: 1.25 !important;
    margin-bottom: 14px !important;
    word-break: break-word !important;
    text-align: center !important;
  }

  .hero-content p, .cyber-hero-subtitle, .hero-section p, .hero p {
    font-size: 0.98rem !important;
    line-height: 1.6 !important;
    padding: 0 4px !important;
    text-align: center !important;
  }

  .hero-buttons, .hero-cta-group, .cta-buttons {
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    gap: 12px !important;
    margin-top: 22px !important;
  }

  .hero-buttons a, .hero-buttons button, 
  .hero-cta-group a, .cta-buttons a, 
  .custom-hero-button, .cta-button {
    width: 100% !important;
    max-width: 320px !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 12px 20px !important;
    box-sizing: border-box !important;
  }

  /* Grid Layouts Stack into 1 Column */
  .projects-grid, 
  .project-cards, 
  .features-grid, 
  .services-grid, 
  .tech-grid, 
  .bento-grid, 
  .leadership-grid, 
  .team-grid, 
  .blog-grid, 
  .contact-grid, 
  .form-grid, 
  .values-grid,
  .testimonial-grid,
  .stats-grid {
    grid-template-columns: 1fr !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 20px !important;
    padding: 0 !important;
    width: 100% !important;
  }

  /* Cards fill 100% width with clean margins */
  .project-card, 
  .feature-card, 
  .service-card, 
  .leader-card, 
  .team-card, 
  .bento-item, 
  .bento-wide, 
  .bento-large, 
  .bento-medium, 
  .blog-card, 
  .value-card, 
  .testimonial-card,
  .case-card,
  .stat-card {
    width: 100% !important;
    max-width: 100% !important;
    grid-column: span 1 !important;
    grid-row: span 1 !important;
    margin: 0 !important;
    border-radius: 16px !important;
    box-sizing: border-box !important;
  }

  .project-card img, .card-icon-preview {
    height: 180px !important;
    width: 100% !important;
    object-fit: cover !important;
  }

  .leader-image, .member-image {
    height: 260px !important;
    width: 100% !important;
  }

  .leader-image img, .member-image img {
    height: 100% !important;
    width: 100% !important;
    object-fit: cover !important;
    object-position: top center !important;
  }

  /* Tabs & Filter Switchers */
  .portfolio-tabs, 
  .department-tabs, 
  .team-filters, 
  .filter-buttons, 
  .integration-tabs {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 340px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    gap: 8px !important;
    padding: 0 10px !important;
  }

  .portfolio-tabs .portfolio-tab-btn, 
  .portfolio-tabs .tab-btn, 
  .dept-tab-btn, 
  .department-tabs .tab-btn, 
  .filter-btn, 
  .integration-tab {
    width: 100% !important;
    max-width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 11px 18px !important;
    font-size: 0.92rem !important;
    white-space: normal !important;
    line-height: 1.35 !important;
    border-radius: 50px !important;
    box-sizing: border-box !important;
  }

  /* Micro Lists & Specs */
  .micro-list {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .spec-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* Forms & Inputs */
  .contact-form, .affiliate-form, .career-form, form {
    padding: 22px 16px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    border-radius: 16px !important;
  }

  input, select, textarea {
    font-size: 16px !important; /* Prevents iOS auto-zoom */
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Diagrams & Overflows */
  .architecture-flow, .diagram-container, .integration-diagram, .orbit-container {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    max-width: 100% !important;
    padding-bottom: 15px !important;
  }

  /* Project Overview / Detail Pages */
  .project-overview {
    padding: 24px 18px !important;
    margin: 25px auto !important;
    border-radius: 18px !important;
  }

  .project-overview h2 {
    font-size: 1.8rem !important;
    text-align: center !important;
  }

  .project-overview p {
    font-size: 1rem !important;
    line-height: 1.65 !important;
  }

  /* Footer Alignment */
  .footer, footer {
    padding: 40px 16px 20px !important;
  }

  .footer-grid, .footer-content {
    grid-template-columns: 1fr !important;
    display: flex !important;
    flex-direction: column !important;
    text-align: center !important;
    gap: 28px !important;
  }

  .footer-col, .footer-section {
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
  }

  .footer-links {
    align-items: center !important;
    text-align: center !important;
  }

  .social-links {
    justify-content: center !important;
  }
}