/* Components Stylesheet */

/* Preloader */
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--background);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 24px;
}

#preloader .loader-logo {
  font-family: var(--font-heading);
  font-size: 2.5rem;
  font-weight: 800;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: flex;
  align-items: center;
  gap: 12px;
}

#preloader .loader-bar-container {
  width: 200px;
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}

#preloader .loader-bar {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  border-radius: 2px;
}

/* Custom Cursor removed */
.custom-cursor,
.custom-cursor-glow {
  display: none !important;
}

/* Hide cursor elements on touch devices */
@media (hover: none) and (pointer: coarse) {

  .custom-cursor,
  .custom-cursor-glow {
    display: none !important;
  }
}

/* Timeline Components */
.timeline-section {
  overflow: visible;
  padding: 160px 0;
  background-color: var(--background);
}

.section-header {
  text-align: center;
  max-width: 600px;
  margin: 0 auto 100px auto;
}

.section-header h2 {
  font-size: 2.75rem;
  margin-bottom: 16px;
  letter-spacing: -0.02em;
}

.section-header p {
  color: var(--text-secondary);
}

.timeline-wrapper {
  position: relative;
  width: 100%;
  min-height: 560px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* SVG Connection Line */
.timeline-svg-container {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 120px;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 3;
}

.timeline-svg {
  width: 100%;
  height: 100%;
}

.timeline-line-bg {
  stroke: var(--border);
  stroke-width: 3px;
  fill: none;
}

.timeline-line-animated {
  stroke: url(#timeline-gradient);
  stroke-width: 4px;
  stroke-dasharray: 8 8;
  fill: none;
  animation: dash-flow 30s linear infinite;
  will-change: stroke-dashoffset;
}

@keyframes dash-flow {
  from {
    stroke-dashoffset: 0;
  }

  to {
    stroke-dashoffset: -1000;
  }
}

/* Timeline Navigation Container */
.timeline-navigation-container {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: 360px;
  padding-left: 60px;
}

/* Floating Featured Card */
.featured-card {
  position: absolute;
  top: -210px;
  left: 0;
  width: 270px;
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  padding: 12px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.08);
  z-index: 6;
  pointer-events: none;
  opacity: 0;
  transform: translateY(20px);
  will-change: transform, opacity;
  transition: opacity 0.3s ease, border-color 0.3s ease;
}

.featured-card.active {
  opacity: 1;
}

.featured-card-media {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  aspect-ratio: 16 / 10;
  margin-bottom: 10px;
  background: linear-gradient(135deg, rgba(108, 99, 255, 0.08), rgba(6, 182, 212, 0.08));
}

.featured-card-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transform: scale(1.03);
}

.featured-card-tag {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.72);
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  backdrop-filter: blur(12px);
}

.featured-card-copy {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.card-step {
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--primary);
  margin-bottom: 6px;
}

.card-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0;
}

.card-summary {
  margin: 0;
  color: var(--text-secondary);
  line-height: 1.55;
  font-size: 0.95rem;
}

/* Timeline Navigation Nodes */
.timeline-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  position: relative;
  z-index: 5;
  padding: 0 80px;
}

.timeline-node-wrapper {
  flex: 1;
  display: flex;
  justify-content: center;
}

.timeline-node {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--border);
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text-secondary);
  cursor: pointer;
  position: relative;
  z-index: 5;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), border-color 0.3s, color 0.3s, box-shadow 0.3s;
}

.timeline-node:hover {
  transform: scale(1.1);
  border-color: var(--primary);
  color: var(--primary);
}

.timeline-node.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #FFFFFF;
  box-shadow: 0 0 20px rgba(108, 99, 255, 0.4);
}


/* Timeline Split Layout and Side Info Panel */
.timeline-container-split {
  display: flex;
  gap: 60px;
  align-items: stretch;
  position: relative;
  width: 100%;
}

.timeline-left-column {
  flex: 1;
  min-width: 0;
}

.timeline-right-column {
  flex: 1.4;
  min-width: 340px;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  padding-top: 120px;
}

.side-info-panel {
  position: sticky;
  top: 180px;
  width: 100%;
  max-width: 440px;
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 24px;
  padding: 28px 24px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.08);
  opacity: 0;
  transform: translateX(40px) scale(0.95);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
  z-index: 10;
}

.side-info-panel.panel-visible {
  opacity: 1;
  transform: translateX(0) scale(1);
}

.panel-illustration-box {
  width: 100%;
  height: 150px;
  background: rgba(108, 99, 255, 0.03);
  border-radius: 16px;
  border: 1px dashed rgba(108, 99, 255, 0.15);
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  position: relative;
}

.panel-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 16px;
}

.panel-orb {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  filter: blur(8px);
  box-shadow: 0 0 30px rgba(108, 99, 255, 0.4);
  animation: orb-spin 10s linear infinite alternate;
  position: absolute;
  right: 28px;
  bottom: 28px;
  z-index: 2;
  mix-blend-mode: screen;
  pointer-events: none;
}

@keyframes orb-spin {
  0% {
    transform: scale(1) rotate(0deg);
    filter: blur(8px);
  }

  50% {
    transform: scale(1.2) rotate(180deg);
    filter: blur(12px);
  }

  100% {
    transform: scale(0.9) rotate(360deg);
    filter: blur(6px);
  }
}

.panel-side-title {
  font-family: var(--font-heading);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 16px;
}

.panel-side-desc {
  font-size: 0.95rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 24px;
}

.panel-side-list {
  padding-left: 20px;
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.panel-side-list li {
  margin-bottom: 8px;
}

.panel-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 8px;
  padding: 12px 18px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: #ffffff;
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 16px 30px rgba(108, 99, 255, 0.22);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.panel-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 34px rgba(108, 99, 255, 0.28);
}

/* Card translation base configuration */
.timeline-card {
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Mobile & Touch Layout Adjustments */
@media (max-width: 991px) {
  .timeline-container-split {
    flex-direction: column;
    gap: 40px;
  }

  .timeline-right-column {
    display: none;
    /* Hide side panel on mobile, display details nested if clicked */
  }

  .timeline-row {
    flex-direction: column;
    gap: 48px;
  }

  .timeline-navigation-container {
    margin-top: 360px;
  }

  .timeline-svg-container {
    display: none;
  }

  .featured-card {
    width: min(100%, 270px);
    top: -190px;
  }

  .featured-card-media {
    aspect-ratio: 15 / 9;
  }

  /* mobile accordion details */
  .card-details-data {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
  }

  .card-details-data .data-title {
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 8px;
  }

  .card-details-data .data-desc {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 12px;
  }

  .card-details-data .data-list {
    padding-left: 20px;
    font-size: 0.85rem;
    color: var(--text-secondary);
  }
}

/* ================= PREMIUM DARK & LIGHT GLASS THEME CONFIGURATION ================= */
.timeline-section {
  --background: transparent;
  --surface: rgba(15, 15, 26, 0.4);
  --primary: #a855f7;
  --primary-rgb: 168, 85, 247;
  --secondary: #3b82f6;
  --accent: #10b981;
  --success: #22C55E;
  --text: #FFFFFF;
  --text-secondary: #9ca3af;
  --border: rgba(255, 255, 255, 0.08);
  --glow: rgba(168, 85, 247, 0.18);

  --font-heading: 'Inter', sans-serif;
  --font-body: 'Inter', sans-serif;

  --transition-smooth: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  --transition-slow: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Glassmorphism for Panels and Cards */
.featured-card,
.side-info-panel {
  background: rgba(15, 15, 26, 0.6) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #FFFFFF !important;
}

.panel-side-title,
.card-title {
  color: #FFFFFF !important;
}

.timeline-node {
  background: rgba(15, 15, 26, 0.8) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #9ca3af !important;
}

.timeline-node:hover {
  border-color: var(--primary) !important;
  color: var(--primary) !important;
}

.timeline-node.active {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #FFFFFF !important;
  box-shadow: 0 0 25px rgba(168, 85, 247, 0.5) !important;
}

/* Badge Styles */
.timeline-section .badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(168, 85, 247, 0.08);
  border: 1px solid rgba(168, 85, 247, 0.15);
  border-radius: 50px;
  color: #c084fc;
  font-weight: 600;
  font-size: 0.85rem;
  margin-bottom: 24px;
  font-family: var(--font-heading);
}

.timeline-section .badge-dot {
  width: 6px;
  height: 6px;
  background-color: var(--accent);
  border-radius: 50%;
  animation: pulse-dot 2s infinite;
}

@keyframes pulse-dot {
  0% {
    transform: scale(0.9);
    opacity: 0.6;
  }

  50% {
    transform: scale(1.3);
    opacity: 1;
  }

  100% {
    transform: scale(0.9);
    opacity: 0.6;
  }
}

/* Light Theme Overrides */
html.light-theme .timeline-section {
  --background: #FEFDFC;
  --surface: #FEFDFC;
  --primary: #8263C8;
  --primary-rgb: 130, 99, 200;
  --secondary: #6E4DB5;
  --accent: #F2EEFB;
  --text: #1E1033;
  /* Dark violet */
  --text-secondary: #666666;
  --border: #EEEAF7;
}

html.light-theme .featured-card,
html.light-theme .side-info-panel {
  background: #FEFDFC !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border: 1px solid #EEEAF7 !important;
  color: #1E1033 !important;
}

html.light-theme .panel-side-title,
html.light-theme .card-title {
  color: #1E1033 !important;
}

html.light-theme .timeline-node {
  background: #F2EEFB !important;
  border-color: #EEEAF7 !important;
  color: #8263C8 !important;
}

html.light-theme .timeline-node:hover {
  background: #6E4DB5 !important;
  border-color: #6E4DB5 !important;
  color: #FEFDFC !important;
}

html.light-theme .timeline-node.active {
  background: #8263C8 !important;
  border-color: #8263C8 !important;
  color: #FEFDFC !important;
  box-shadow: 0 0 25px rgba(130, 99, 200, 0.4) !important;
}

html.light-theme .timeline-section .badge {
  background: #F2EEFB !important;
  border: 1px solid #EEEAF7 !important;
  color: #8263C8 !important;
}

#three-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1 !important;
  pointer-events: none;
  opacity: 0.35;
}

/* Header Light Theme Overrides */
/* Header Light Theme Overrides */
html.light-theme .glass-header h1 {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: #000000 !important;
  color: #000000 !important;
}

html.light-theme .logo-online-text {
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
}

html.light-theme .glass-header nav a,
html.light-theme .glass-header nav button,
html.light-theme .glass-header nav button span {
  color: #000000 !important;
}

html.light-theme .glass-header nav a:hover,
html.light-theme .glass-header nav button:hover,
html.light-theme .glass-header nav button:hover span {
  color: #6E4DB5 !important;
}

html.light-theme .glass-header nav #lang-toggle,
html.light-theme .glass-header nav #lang-toggle span {
  color: #000000 !important;
}

html.light-theme .glass-header nav #lang-toggle:hover,
html.light-theme .glass-header nav #lang-toggle:hover span {
  color: #6E4DB5 !important;
}

html.light-theme .glass-header nav svg {
  stroke: currentColor !important;
}

html.light-theme .glass-header {
  background: rgba(254, 253, 252, 0.8) !important;
  border-bottom: 1px solid #EEEAF7 !important;
}

/* Footer Default (Matte Dark Purple Theme) */
footer {
  background: linear-gradient(135deg, #161026 0%, #0d0918 100%) !important;
  border-top: 1px solid #2e224d !important;
}

/* Footer Light Theme Overrides (Matte Dark Purple Theme) */
html.light-theme footer {
  background: linear-gradient(135deg, #1c1530 0%, #110d21 100%) !important;
  border-top: 1px solid #3b2c61 !important;
}

html.light-theme footer h3 span,
html.light-theme footer h4 {
  color: #FFFFFF !important;
}

html.light-theme footer p,
html.light-theme footer a,
html.light-theme footer span {
  color: rgba(255, 255, 255, 0.85) !important;
}

html.light-theme footer a:hover {
  color: #FFFFFF !important;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.5) !important;
}

html.light-theme footer .border-t {
  border-color: rgba(255, 255, 255, 0.15) !important;
}

html.light-theme footer .bg-white\/5 {
  background-color: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}

/* Day/Light Theme White Text Conversion (Solid Dark Violet & Solid Gradient) */
html.light-theme :not(footer) .text-white:not(button):not(a):not([class*="btn"]):not([class*="pill"]):not([class*="badge"]),
html.light-theme :not(footer) h1.text-white,
html.light-theme :not(footer) h2.text-white,
html.light-theme :not(footer) h3.text-white,
html.light-theme :not(footer) h4.text-white,
html.light-theme :not(footer) span.text-white:not(button):not(a):not([class*="btn"]):not([class*="pill"]):not([class*="badge"]),
html.light-theme :not(footer) p.text-white,
html.light-theme :not(footer) .text-slate-100 {
  color: #1E1033 !important;
  /* solid deep dark purple */
  -webkit-text-stroke: 0 !important;
}

html.light-theme :not(footer) h2 span,
html.light-theme :not(footer) h2 em,
html.light-theme :not(footer) h3 span,
html.light-theme :not(footer) h3 em,
html.light-theme :not(footer) h4 span,
html.light-theme :not(footer) h4 em,
html.light-theme :not(footer) .text-transparent {
  background: linear-gradient(135deg, #6D28D9 0%, #3B82F6 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  -webkit-text-stroke: 0 !important;
}


/* ============================================================
   TECH STACK SECTION — PREMIUM GRADIENT REDESIGN
   ============================================================ */

.tech-section {
  position: relative;
  padding: 6.5rem 0;
  overflow: hidden;
  background: transparent;
}

/* Scattered dot texture overlay */
.tech-dot-texture {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 20px 20px;
  pointer-events: none;
  z-index: 1;
}

/* Faint background ambient glow behind card stack */
.tech-bg-glow {
  position: absolute;
  top: 50%;
  right: -5%;
  transform: translateY(-50%);
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.12) 0%, transparent 70%);
  pointer-events: none;
  z-index: 1;
}

/* Eyebrow Label */
.tech-eyebrow {
  display: inline-flex;
  align-items: center;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #a78bfa;
  /* Lavender-blue */
  margin-bottom: 1.25rem;
}

/* Heading Display */
.tech-heading {
  font-size: clamp(2.4rem, 5.5vw, 4.2rem);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.04em;
  color: #ffffff;
  /* white by default for dark canvas */
  margin-bottom: 1.5rem;
}

.tech-heading span {
  display: inline-block;
  background: linear-gradient(135deg, #a855f7 0%, #3b82f6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Body description text */
.tech-body {
  font-size: clamp(0.9rem, 2vw, 1.05rem);
  font-weight: 400;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.6);
  /* light gray for dark canvas */
  max-width: 460px;
  margin: 0 auto 2.25rem;
}

@media (min-width: 1024px) {
  .tech-body {
    margin-left: 0;
    margin-right: 0;
  }
}

/* Pill buttons below body */
.tech-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.65rem;
  margin-top: 1.5rem;
}

@media (min-width: 1024px) {
  .tech-pills {
    justify-content: flex-start;
  }
}

.tech-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 1rem;
  border-radius: 999px;
  background: #1E1033;
  /* Dark violet */
  color: #ffffff;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  box-shadow: 0 4px 12px rgba(30, 16, 51, 0.15);
  transition: transform 0.25s ease, background 0.25s ease;
}

.tech-pill:hover {
  transform: translateY(-1.5px);
  background: #2D184E;
}

/* --- Card Stack Column (Right) --- */
.tech-stack-column {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 480px;
  position: relative;
  z-index: 2;
}

.tech-stack-container {
  position: relative;
  width: 440px;
  height: 440px;
}

/* Overlaying rounded-square card */
.tech-card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 176px;
  height: 176px;
  border-radius: 28px;
  /* Deep indigo-violet gradient background */
  background: linear-gradient(135deg, #2D1B4E 0%, #1A1035 100%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  /* Soft purple glow shadow */
  box-shadow: 0 20px 45px rgba(139, 92, 246, 0.25);
  transform: translate(-50%, -50%) translate(var(--tx), var(--ty));
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease;
  cursor: default;
}

.tech-card:hover {
  transform: translate(-50%, -50%) translate(var(--tx), var(--ty)) scale(1.08) !important;
  border-color: rgba(139, 92, 246, 0.4);
  box-shadow: 0 28px 55px rgba(139, 92, 246, 0.4);
  z-index: 99 !important;
}

/* Logo icon monochrome look */
.tech-card__icon {
  height: 52px;
  width: auto;
  filter: brightness(0) invert(1);
  opacity: 0.45;
  transition: opacity 0.35s ease;
}

.tech-card:hover .tech-card__icon {
  opacity: 1;
}

/* Card label name */
.tech-card__name {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
  transition: color 0.35s ease;
}

.tech-card:hover .tech-card__name {
  color: #fff;
}

/* Overlapping Diagonal Fanning (Exact original pixel coordinates) */
.tech-card--1 {
  --tx: -96px;
  --ty: -96px;
  z-index: 10;
  opacity: 0.88;
}

.tech-card--2 {
  --tx: 144px;
  --ty: -144px;
  z-index: 40;
  opacity: 0.90;
}

.tech-card--3 {
  --tx: -48px;
  --ty: -16px;
  z-index: 20;
  opacity: 0.92;
}

.tech-card--4 {
  --tx: 16px;
  --ty: 48px;
  z-index: 30;
  opacity: 0.95;
}

.tech-card--5 {
  --tx: 80px;
  --ty: -48px;
  z-index: 35;
  opacity: 0.98;
}

.tech-card--6 {
  --tx: -192px;
  --ty: 80px;
  z-index: 50;
  opacity: 1.0;
}

/* Responsive adjustment for fanning cards */
@media (max-width: 640px) {
  .tech-stack-column {
    height: 380px;
  }

  .tech-stack-container {
    width: 320px;
    height: 320px;
  }

  .tech-card {
    width: 130px;
    height: 130px;
    border-radius: 20px;
  }

  .tech-card__icon {
    height: 36px;
  }

  /* Scale offsets on small screen */
  .tech-card--1 {
    --tx: -67px;
    --ty: -67px;
  }

  .tech-card--2 {
    --tx: 100px;
    --ty: -100px;
  }

  .tech-card--3 {
    --tx: -33px;
    --ty: -11px;
  }

  .tech-card--4 {
    --tx: 11px;
    --ty: 33px;
  }

  .tech-card--5 {
    --tx: 56px;
    --ty: -33px;
  }

  .tech-card--6 {
    --tx: -134px;
    --ty: 56px;
  }
}

/* --- Dark theme override for section background (keeps it transparent) --- */
html:not(.light-theme) .tech-section {
  background: transparent !important;
}

html:not(.light-theme) .tech-heading {
  color: #ffffff !important;
}

html:not(.light-theme) .tech-body {
  color: rgba(255, 255, 255, 0.6) !important;
}

html:not(.light-theme) .tech-pill {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

html:not(.light-theme) .tech-pill:hover {
  background: rgba(255, 255, 255, 0.12) !important;
}

html:not(.light-theme) .tech-dot-texture {
  background-image: radial-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px) !important;
}

/* --- Light theme overrides for transparent text contrast --- */
/* --- Light theme overrides for transparent text contrast --- */
html.light-theme .tech-section {
  background: transparent !important;
}

html.light-theme .tech-eyebrow {
  color: #6D5EF8 !important;
  text-transform: uppercase !important;
  letter-spacing: .12em !important;
  font-weight: 600 !important;
}

html.light-theme .tech-heading {
  color: #202343 !important;
}

html.light-theme .tech-heading span {
  background: linear-gradient(135deg, #6D28D9 0%, #3B82F6 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

html.light-theme .tech-body {
  color: #7F819C !important;
}

html.light-theme .tech-pill {
  background: #ECE8FF !important;
  color: #6D5EF8 !important;
  border: 1px solid rgba(109, 94, 248, 0.12) !important;
}

html.light-theme .tech-pill:hover {
  background: #6D5EF8 !important;
  color: #ffffff !important;
}

html.light-theme .tech-dot-texture {
  background-image: radial-gradient(rgba(109, 40, 217, 0.04) 1px, transparent 1px) !important;
}

html.light-theme .tech-card {
  background: linear-gradient(180deg,
      rgba(255, 255, 255, 0.78) 0%,
      rgba(246, 243, 255, 0.92) 100%) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border: 1px solid rgba(124, 99, 255, 0.12) !important;
  box-shadow:
    0 8px 20px rgba(97, 76, 220, 0.08),
    0 25px 60px rgba(97, 76, 220, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

html.light-theme .tech-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: radial-gradient(circle at top,
      rgba(122, 96, 255, 0.18),
      transparent 70%) !important;
  opacity: 0;
  transition: 0.4s;
  pointer-events: none;
}

html.light-theme .tech-card:hover::before {
  opacity: 1 !important;
}

html.light-theme .tech-card:hover {
  background: #ffffff !important;
  border: 1px solid rgba(124, 99, 255, 0.18) !important;
  transform: translate(-50%, -50%) translate(var(--tx), var(--ty)) scale(1.08) !important;
  box-shadow:
    0 25px 70px rgba(92, 82, 230, 0.18),
    0 12px 35px rgba(92, 82, 230, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}

html.light-theme .tech-card__icon {
  filter: brightness(0) !important;
  opacity: 0.55 !important;
}

html.light-theme .tech-card:hover .tech-card__icon {
  opacity: 1 !important;
}

html.light-theme .tech-card__name {
  color: #6B6E8D !important;
}

html.light-theme .tech-card:hover .tech-card__name {
  color: #202343 !important;
}



/* ============================================================
   SERVICES — PREMIUM CARD-ON-CANVAS
   Apple / Stripe inspired pricing card aesthetic
   ============================================================ */

/* --- Section wrapper --- */
.svc-section {
  padding: 6rem 0 7rem;
  position: relative;
  overflow: visible;
}

/* --- Outer canvas card (the #F5F5F5 container) --- */
.svc-outer-card {
  background: rgba(18, 14, 30, 0.78);
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(28px);
  padding: 2.5rem 2.5rem 2.5rem;
  box-shadow:
    0 40px 80px rgba(0, 0, 0, 0.35),
    0 1px 0 rgba(255, 255, 255, 0.06) inset;
}

/* --- Card header (centered serif heading) --- */
.svc-card-header {
  text-align: center;
  padding-bottom: 2rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.svc-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #a78bfa;
  margin-bottom: 1rem;
}

.svc-eyebrow::before,
.svc-eyebrow::after {
  content: '';
  display: block;
  width: 1.5rem;
  height: 1px;
  background: currentColor;
  opacity: 0.5;
}

.svc-display-heading {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 800;
  color: #ffffff;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0 0 0.75rem;
}

.svc-display-heading em {
  font-style: italic;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(167, 139, 250, 0.7);
}

.svc-display-sub {
  font-size: 0.9rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.4);
  max-width: 36rem;
  margin: 0 auto;
  line-height: 1.65;
}

/* ============================================================
   HERO PLAN CARD (Web Development)
   ============================================================ */
.svc-plan-hero {
  display: grid;
  grid-template-columns: 55% 45%;
  min-height: 220px;
  border-radius: 20px;
  overflow: hidden;
  text-decoration: none;
  position: relative;
  margin-bottom: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
  transition: transform 0.4s cubic-bezier(.16, 1, .3, 1), box-shadow 0.4s ease;
}

.svc-plan-hero:hover {
  transform: translateY(-3px) scale(1.005);
  box-shadow: 0 28px 60px rgba(130, 99, 200, 0.2);
}

/* Left text zone */
.svc-plan-hero__left {
  padding: 2rem 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
  position: relative;
  z-index: 2;
}

.svc-plan-hero__label {
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
  margin: 0 0 0.6rem;
}

.svc-plan-hero__title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.5rem, 2.8vw, 2.2rem);
  font-weight: 800;
  color: #fff;
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin: 0 0 1.25rem;
}

.svc-plan-hero__title em {
  font-style: italic;
  color: #c4b5fd;
}

/* Bullet list */
.svc-plan-hero__bullets {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.svc-plan-hero__bullets li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.74rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.55);
}

.svc-bullet-dot {
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(167, 139, 250, 0.8);
  flex-shrink: 0;
}

/* Right art zone: fluid ribbon / silk gradient */
.svc-plan-hero__art {
  position: relative;
  overflow: hidden;
  /* Base background for the art panel */
  background: linear-gradient(135deg, #7c3aed 0%, #4f46e5 35%, #0ea5e9 70%, #f472b6 100%);
}

/* Fluid silk ribbons built purely from CSS */
.svc-art-ribbon {
  position: absolute;
  border-radius: 60% 40% 55% 45% / 45% 55% 45% 55%;
  mix-blend-mode: screen;
  pointer-events: none;
}

.svc-art-ribbon--1 {
  width: 130%;
  height: 130%;
  top: -25%;
  left: -15%;
  background: linear-gradient(135deg, rgba(244, 114, 182, 0.7) 0%, rgba(139, 92, 246, 0.5) 50%, rgba(14, 165, 233, 0.6) 100%);
  animation: ribbonDrift 7s ease-in-out infinite alternate;
}

.svc-art-ribbon--2 {
  width: 110%;
  height: 110%;
  top: 10%;
  left: 5%;
  background: linear-gradient(225deg, rgba(251, 191, 36, 0.55) 0%, rgba(239, 68, 68, 0.5) 40%, rgba(109, 40, 217, 0.4) 100%);
  border-radius: 40% 60% 45% 55% / 55% 45% 60% 40%;
  animation: ribbonDrift 9s ease-in-out infinite alternate-reverse;
}

.svc-art-ribbon--3 {
  width: 90%;
  height: 90%;
  bottom: -10%;
  right: -10%;
  background: linear-gradient(45deg, rgba(16, 185, 129, 0.4) 0%, rgba(59, 130, 246, 0.6) 60%);
  border-radius: 50% 50% 40% 60% / 40% 60% 50% 50%;
  animation: ribbonDrift 11s ease-in-out infinite alternate;
}

.svc-art-ribbon--4 {
  width: 70%;
  height: 80%;
  top: 20%;
  left: 20%;
  background: radial-gradient(ellipse at 40% 40%, rgba(255, 255, 255, 0.18) 0%, transparent 70%);
  border-radius: 50%;
  filter: blur(4px);
}

.svc-art-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 60% 30%, rgba(255, 255, 255, 0.12) 0%, transparent 60%);
}

@keyframes ribbonDrift {
  from {
    transform: rotate(-8deg) scale(1) translate(0, 0);
  }

  to {
    transform: rotate(8deg) scale(1.1) translate(4%, 3%);
  }
}

/* ============================================================
   2×2 FEATURE GRID
   ============================================================ */
.svc-feat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* Base feature card */
.svc-feat-card {
  border-radius: 18px;
  overflow: hidden;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform 0.35s cubic-bezier(.16, 1, .3, 1), box-shadow 0.35s ease;
  min-height: 195px;
}

.svc-feat-card:hover {
  transform: translateY(-4px) scale(1.025);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.3);
}

/* Art area (upper ~65% of card) */
.svc-feat-card__art {
  flex: 1;
  position: relative;
  overflow: hidden;
  min-height: 120px;
}

/* Caption (bottom strip with slight scrim) */
.svc-feat-card__caption {
  padding: 0.7rem 0.9rem 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  /* subtle dark scrim for readability */
  background: linear-gradient(to top, rgba(0, 0, 0, 0.35) 0%, transparent 100%);
}

.svc-feat-card__caption strong {
  font-size: 0.72rem;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.92);
  letter-spacing: 0.01em;
  display: block;
}

.svc-feat-card__caption span {
  font-size: 0.62rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.45;
  display: block;
}

/* ============================================================
   CARD 1: APP DEV — Red-pink, water-drop glossy spheres
   ============================================================ */
.svc-feat-card--app .svc-feat-card__art {
  background: linear-gradient(140deg, #ffb3ba 0%, #ff7096 40%, #e8305a 100%);
}

.svc-drop {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.svc-drop--1 {
  width: 85px;
  height: 85px;
  top: 18px;
  left: 22px;
  background: radial-gradient(circle at 32% 30%, rgba(255, 255, 255, 0.92) 0%, rgba(255, 150, 170, 0.55) 45%, rgba(220, 30, 70, 0.2) 100%);
  box-shadow: inset -8px -8px 22px rgba(180, 20, 50, 0.22), 0 12px 32px rgba(232, 48, 90, 0.4);
  animation: dropFloat 4s ease-in-out infinite alternate;
}

.svc-drop--2 {
  width: 52px;
  height: 52px;
  top: 12px;
  right: 25px;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.85) 0%, rgba(255, 130, 155, 0.5) 50%, rgba(220, 30, 70, 0.25) 100%);
  box-shadow: inset -5px -5px 12px rgba(180, 20, 50, 0.18), 0 8px 22px rgba(255, 112, 150, 0.35);
  animation: dropFloat 5.5s ease-in-out infinite alternate-reverse;
}

.svc-drop--3 {
  width: 28px;
  height: 28px;
  bottom: 25px;
  right: 48px;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.9), rgba(255, 155, 175, 0.55));
  box-shadow: 0 5px 14px rgba(232, 48, 90, 0.3);
  animation: dropFloat 3.5s ease-in-out infinite alternate;
}

@keyframes dropFloat {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(-9px);
  }
}

/* ============================================================
   CARD 2: MARKETING — Lavender, glass water-drop bubble
   ============================================================ */
.svc-feat-card--mkt .svc-feat-card__art {
  background: linear-gradient(140deg, #f0e8ff 0%, #c4b5fd 50%, #9d7df8 100%);
}

.svc-bubble {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.svc-bubble--lg {
  width: 78px;
  height: 78px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -55%);
  background: radial-gradient(circle at 35% 32%, rgba(255, 255, 255, 0.96) 0%, rgba(196, 181, 253, 0.65) 45%, rgba(109, 40, 217, 0.3) 100%);
  box-shadow: inset -8px -8px 20px rgba(109, 40, 217, 0.18), 0 14px 40px rgba(139, 92, 246, 0.5);
  animation: bubblePulse 4s ease-in-out infinite;
}

.svc-bubble--sm {
  width: 36px;
  height: 36px;
  bottom: 30px;
  right: 30px;
  background: radial-gradient(circle at 35% 32%, rgba(255, 255, 255, 0.9), rgba(196, 181, 253, 0.5));
  box-shadow: 0 6px 18px rgba(139, 92, 246, 0.35);
  animation: bubblePulse 6s ease-in-out infinite reverse;
}

.svc-ripple {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -55%);
  border-radius: 50%;
  border: 1.5px solid rgba(139, 92, 246, 0.3);
  pointer-events: none;
  animation: rippleGrow 3s ease-out infinite;
}

.svc-ripple--1 {
  width: 105px;
  height: 105px;
  animation-delay: 0s;
}

.svc-ripple--2 {
  width: 140px;
  height: 140px;
  animation-delay: 0.8s;
}

@keyframes rippleGrow {
  0% {
    transform: translate(-50%, -55%) scale(0.8);
    opacity: 0.5;
  }

  100% {
    transform: translate(-50%, -55%) scale(1.2);
    opacity: 0;
  }
}

@keyframes bubblePulse {

  0%,
  100% {
    transform: translate(-50%, -55%) scale(1);
  }

  50% {
    transform: translate(-50%, -60%) scale(1.04);
  }
}

/* ============================================================
   CARD 3: CUSTOM SOFTWARE — Lime green, silk wave texture
   ============================================================ */
.svc-feat-card--soft .svc-feat-card__art {
  background: linear-gradient(140deg, #ecfccb 0%, #a3e635 55%, #65a30d 100%);
}

.svc-silkwave {
  position: absolute;
  width: 220%;
  height: 90px;
  left: -60%;
  border-radius: 40%;
  pointer-events: none;
}

.svc-silkwave--1 {
  bottom: 25px;
  background: rgba(255, 255, 255, 0.42);
  animation: silkSway 5s ease-in-out infinite alternate;
}

.svc-silkwave--2 {
  bottom: 5px;
  background: rgba(255, 255, 255, 0.22);
  animation: silkSway 7s ease-in-out infinite alternate-reverse;
}

.svc-silkwave--3 {
  top: 0px;
  background: rgba(255, 255, 255, 0.12);
  height: 60px;
  animation: silkSway 9s ease-in-out infinite alternate;
}

@keyframes silkSway {
  from {
    transform: rotate(-3deg) translateX(0);
  }

  to {
    transform: rotate(3deg) translateX(8px);
  }
}

/* ============================================================
   CARD 4: MAINTENANCE — Blue, layered glass bubbles
   ============================================================ */
.svc-feat-card--main .svc-feat-card__art {
  background: linear-gradient(140deg, #dbeafe 0%, #93c5fd 50%, #3b82f6 100%);
}

.svc-gbubble {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.svc-gbubble--1 {
  width: 72px;
  height: 72px;
  top: 18px;
  left: 22px;
  background: radial-gradient(circle at 33% 30%, rgba(255, 255, 255, 0.95) 0%, rgba(147, 197, 253, 0.6) 45%, rgba(37, 99, 235, 0.25) 100%);
  box-shadow: inset -7px -7px 20px rgba(30, 80, 200, 0.2), 0 12px 30px rgba(59, 130, 246, 0.4);
  animation: dropFloat 4.5s ease-in-out infinite alternate;
}

.svc-gbubble--2 {
  width: 46px;
  height: 46px;
  top: 14px;
  right: 24px;
  background: radial-gradient(circle at 35% 32%, rgba(255, 255, 255, 0.88) 0%, rgba(96, 165, 250, 0.55) 50%, rgba(37, 99, 235, 0.25) 100%);
  box-shadow: inset -5px -5px 12px rgba(30, 64, 175, 0.18), 0 8px 20px rgba(96, 165, 250, 0.38);
  animation: dropFloat 6s ease-in-out infinite alternate-reverse;
}

.svc-gbubble--3 {
  width: 30px;
  height: 30px;
  bottom: 22px;
  right: 22px;
  background: radial-gradient(circle at 35% 32%, rgba(255, 255, 255, 0.88), rgba(147, 197, 253, 0.5));
  box-shadow: 0 5px 14px rgba(59, 130, 246, 0.3);
  animation: dropFloat 3s ease-in-out infinite alternate;
}

.svc-gbubble--4 {
  width: 20px;
  height: 20px;
  bottom: 35px;
  left: 60px;
  background: radial-gradient(circle at 35% 32%, rgba(255, 255, 255, 0.85), rgba(96, 165, 250, 0.45));
  box-shadow: 0 3px 10px rgba(59, 130, 246, 0.25);
  animation: dropFloat 5s ease-in-out infinite alternate-reverse;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .svc-plan-hero {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .svc-plan-hero__art {
    min-height: 180px;
  }
}

@media (max-width: 600px) {
  .svc-outer-card {
    padding: 1.5rem 1.25rem;
  }

  .svc-feat-grid {
    grid-template-columns: 1fr;
  }

  .svc-feat-card {
    min-height: 180px;
  }
}

/* ============================================================
   DAY / LIGHT THEME OVERRIDES
   ============================================================ */
html.light-theme .svc-outer-card {
  background: #F5F5F5 !important;
  border-color: rgba(130, 99, 200, 0.1) !important;
  box-shadow: 0 20px 60px rgba(130, 99, 200, 0.1), 0 1px 0 rgba(255, 255, 255, 0.8) inset !important;
}

html.light-theme .svc-card-header {
  border-bottom-color: rgba(130, 99, 200, 0.1) !important;
}

html.light-theme .svc-display-heading {
  color: #1E1033 !important;
}

html.light-theme .svc-display-heading em {
  background: linear-gradient(135deg, #6D28D9 0%, #3B82F6 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  -webkit-text-stroke: 0 !important;
}

html.light-theme .svc-display-sub {
  color: rgba(31, 31, 31, 0.5) !important;
}

html.light-theme .svc-eyebrow {
  color: #8263C8 !important;
}

html.light-theme .svc-plan-hero {
  background: rgba(255, 255, 255, 0.9) !important;
  border-color: rgba(130, 99, 200, 0.12) !important;
  box-shadow: 0 4px 20px rgba(130, 99, 200, 0.1);
}

html.light-theme .svc-plan-hero__label {
  color: #8263C8 !important;
}

html.light-theme .svc-plan-hero__title {
  color: #1E1033 !important;
}

html.light-theme .svc-plan-hero__title em {
  color: #8263C8 !important;
}

html.light-theme .svc-plan-hero__bullets li {
  color: #444 !important;
}

html.light-theme .svc-bullet-dot {
  background: #8263C8 !important;
}

html.light-theme .svc-feat-card {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

html.light-theme .svc-feat-card__caption strong {
  color: #1E1033 !important;
}

html.light-theme .svc-feat-card__caption span {
  color: rgba(31, 31, 31, 0.65) !important;
}

html.light-theme .svc-feat-card__caption {
  background: linear-gradient(to top, rgba(255, 255, 255, 0.5) 0%, transparent 100%) !important;
}

/* ============================================================
   HERO CTA BUTTON
   ============================================================ */
.svc-plan-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 1.25rem;
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  backdrop-filter: blur(8px);
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease, color 0.3s ease;
  width: fit-content;
}

.svc-plan-cta:hover {
  background: rgba(167, 139, 250, 0.2);
  border-color: rgba(167, 139, 250, 0.5);
  color: #fff;
  transform: translateX(3px);
}

.svc-plan-cta svg {
  transition: transform 0.3s ease;
}

.svc-plan-cta:hover svg {
  transform: translateX(3px);
}

/* ============================================================
   SMALL CARD BODY CONTENT — PREMIUM UPGRADE
   Matching hero card's Playfair Display + pill-button aesthetic
   ============================================================ */

/* Card base: reduce art height so body content has room to breathe */
.svc-feat-card__art {
  min-height: 160px !important;
  height: 160px !important;
  flex: none !important;
}

/* Body wrapper */
.svc-feat-card__body {
  padding: 1.2rem 1.3rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0;
  flex-shrink: 0;
  background: rgba(0, 0, 0, 0.18);
}

/* Eyebrow label — tiny uppercase, muted, matches hero */
.svc-feat-label {
  font-size: 0.52rem;
  font-weight: 800;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.3);
  margin: 0 0 0.55rem;
  font-family: 'Inter', sans-serif;
}

/* Big serif service title — Playfair Display, like the hero */
.svc-feat-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.05rem, 1.8vw, 1.35rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.025em;
  margin: 0 0 0.65rem;
  color: #fff;
}

.svc-feat-title em {
  font-style: italic;
}

/* Per-card italic color */
.svc-feat-card--app .svc-feat-title em {
  color: #fda4af;
}

.svc-feat-card--mkt .svc-feat-title em {
  color: #c4b5fd;
}

.svc-feat-card--soft .svc-feat-title em {
  color: #bef264;
}

.svc-feat-card--main .svc-feat-title em {
  color: #93c5fd;
}

/* Description text */
.svc-feat-desc {
  font-size: 0.72rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.45);
  line-height: 1.6;
  margin: 0 0 0.75rem;
  font-family: 'Inter', sans-serif;
}

/* Bullet divider */
.svc-feat-bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 0.75rem;
}

.svc-feat-bullets li {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.68rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.01em;
  font-family: 'Inter', sans-serif;
}

/* Bullet dots */
.svc-feat-dot {
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
}

.svc-feat-dot--app {
  background: #fb7185;
  box-shadow: 0 0 6px rgba(251, 113, 133, 0.7);
}

.svc-feat-dot--mkt {
  background: #a78bfa;
  box-shadow: 0 0 6px rgba(167, 139, 250, 0.7);
}

.svc-feat-dot--soft {
  background: #a3e635;
  box-shadow: 0 0 6px rgba(163, 230, 53, 0.7);
}

.svc-feat-dot--main {
  background: #60a5fa;
  box-shadow: 0 0 6px rgba(96, 165, 250, 0.7);
}

/* CTA Pill button — matching hero "Init project" style */
.svc-feat-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.48rem 1rem;
  border-radius: 999px;
  border: 1px solid;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  width: fit-content;
  backdrop-filter: blur(8px);
  transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  font-family: 'Inter', sans-serif;
}

.svc-feat-link span {
  transition: transform 0.25s ease;
  display: inline-block;
}

.svc-feat-link:hover span {
  transform: translateX(3px);
}

.svc-feat-link:hover {
  transform: translateY(-1px);
}

/* Per-card pill colors */
.svc-feat-link--app {
  color: #fda4af;
  border-color: rgba(253, 164, 175, 0.3);
  background: rgba(253, 164, 175, 0.06);
}

.svc-feat-link--app:hover {
  background: rgba(253, 164, 175, 0.14);
  border-color: rgba(253, 164, 175, 0.6);
  box-shadow: 0 8px 24px rgba(251, 113, 133, 0.2);
}

.svc-feat-link--mkt {
  color: #c4b5fd;
  border-color: rgba(196, 181, 253, 0.3);
  background: rgba(196, 181, 253, 0.06);
}

.svc-feat-link--mkt:hover {
  background: rgba(196, 181, 253, 0.14);
  border-color: rgba(196, 181, 253, 0.6);
  box-shadow: 0 8px 24px rgba(167, 139, 250, 0.2);
}

.svc-feat-link--soft {
  color: #bef264;
  border-color: rgba(190, 242, 100, 0.3);
  background: rgba(190, 242, 100, 0.06);
}

.svc-feat-link--soft:hover {
  background: rgba(190, 242, 100, 0.14);
  border-color: rgba(190, 242, 100, 0.6);
  box-shadow: 0 8px 24px rgba(163, 230, 53, 0.2);
}

.svc-feat-link--main {
  color: #93c5fd;
  border-color: rgba(147, 197, 253, 0.3);
  background: rgba(147, 197, 253, 0.06);
}

.svc-feat-link--main:hover {
  background: rgba(147, 197, 253, 0.14);
  border-color: rgba(147, 197, 253, 0.6);
  box-shadow: 0 8px 24px rgba(96, 165, 250, 0.2);
}

/* ============================================================
   LIGHT THEME OVERRIDES FOR CARD BODY
   ============================================================ */
html.light-theme .svc-feat-card__body {
  background: rgba(255, 255, 255, 0.55) !important;
}

html.light-theme .svc-feat-label {
  color: rgba(31, 31, 31, 0.35) !important;
}

html.light-theme .svc-feat-title {
  color: #1E1033 !important;
}

html.light-theme .svc-feat-card--app .svc-feat-title em {
  color: #e11d48 !important;
}

html.light-theme .svc-feat-card--mkt .svc-feat-title em {
  color: #7c3aed !important;
}

html.light-theme .svc-feat-card--soft .svc-feat-title em {
  color: #4d7c0f !important;
}

html.light-theme .svc-feat-card--main .svc-feat-title em {
  color: #1d4ed8 !important;
}

html.light-theme .svc-feat-desc {
  color: rgba(31, 31, 31, 0.55) !important;
}

html.light-theme .svc-feat-bullets {
  border-top-color: rgba(0, 0, 0, 0.07) !important;
}

html.light-theme .svc-feat-bullets li {
  color: rgba(31, 31, 31, 0.6) !important;
}

html.light-theme .svc-feat-dot--app {
  background: #e11d48 !important;
  box-shadow: 0 0 6px rgba(225, 29, 72, 0.4) !important;
}

html.light-theme .svc-feat-dot--mkt {
  background: #7c3aed !important;
  box-shadow: 0 0 6px rgba(124, 58, 237, 0.4) !important;
}

html.light-theme .svc-feat-dot--soft {
  background: #4d7c0f !important;
  box-shadow: 0 0 6px rgba(77, 124, 15, 0.4) !important;
}

html.light-theme .svc-feat-dot--main {
  background: #1d4ed8 !important;
  box-shadow: 0 0 6px rgba(29, 78, 216, 0.4) !important;
}

html.light-theme .svc-feat-link--app {
  color: #e11d48 !important;
  border-color: rgba(225, 29, 72, 0.3) !important;
  background: rgba(225, 29, 72, 0.05) !important;
}

html.light-theme .svc-feat-link--mkt {
  color: #7c3aed !important;
  border-color: rgba(124, 58, 237, 0.3) !important;
  background: rgba(124, 58, 237, 0.05) !important;
}

html.light-theme .svc-feat-link--soft {
  color: #4d7c0f !important;
  border-color: rgba(77, 124, 15, 0.3) !important;
  background: rgba(77, 124, 15, 0.05) !important;
}

html.light-theme .svc-feat-link--main {
  color: #1d4ed8 !important;
  border-color: rgba(29, 78, 216, 0.3) !important;
  background: rgba(29, 78, 216, 0.05) !important;
}

html.light-theme .svc-plan-cta {
  background: rgba(130, 99, 200, 0.08) !important;
  border-color: rgba(130, 99, 200, 0.25) !important;
  color: #8263C8 !important;
}

html.light-theme .svc-plan-cta:hover {
  background: rgba(130, 99, 200, 0.15) !important;
  border-color: #8263C8 !important;
  color: #6E4DB5 !important;
}


/* ============================================================
   TESTIMONIALS CAROUSEL — BOUTIQUE EDITORIAL STYLE
   ============================================================ */

.tstm-section {
  padding: 8rem 0 9rem;
  position: relative;
  overflow: hidden;
  background: transparent;
}

/* Botanical line art leaf SVGs */
.tstm-deco-leaf {
  position: absolute;
  pointer-events: none;
  z-index: 1;
  opacity: 0.12;
  color: #a78bfa;
}

.tstm-deco-leaf--top-right {
  top: -20px;
  right: -20px;
}

.tstm-deco-leaf--bottom-left {
  bottom: -20px;
  left: -20px;
}

/* Watercolor blobs bleeding in */
.tstm-watercolor {
  position: absolute;
  width: 450px;
  height: 450px;
  border-radius: 50%;
  filter: blur(100px);
  pointer-events: none;
  z-index: 1;
  opacity: 0.08;
}

.tstm-watercolor--left {
  bottom: -150px;
  left: -150px;
  background: #dc6e4c;
  /* Terracotta tone */
}

.tstm-watercolor--right {
  bottom: -100px;
  right: -150px;
  background: #e57c5a;
}

/* Section Header Typography */
.tstm-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: #e57c5a;
  /* Terracotta accent */
  margin-bottom: 1rem;
}

.tstm-eyebrow::before,
.tstm-eyebrow::after {
  content: '';
  display: block;
  width: 1.2rem;
  height: 1px;
  background: currentColor;
  opacity: 0.5;
}

.tstm-heading {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  font-weight: 800;
  color: #ffffff;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 1rem;
}

.tstm-heading em {
  font-style: italic;
  background: linear-gradient(135deg, #a855f7 0%, #3b82f6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  -webkit-text-stroke: 0;
}

.tstm-sub {
  font-size: clamp(0.72rem, 2.5vw, 1.05rem);
  font-weight: 300;
  color: rgba(255, 255, 255, 0.45);
  max-width: 100%;
  margin: 0 auto;
  line-height: 1.6;
  white-space: nowrap !important;
  letter-spacing: -0.01em;
}

.tstm-sub-bribe {
  color: rgba(255, 255, 255, 0.25);
  font-style: italic;
  font-size: 0.95rem;
}

/* --- Carousel Track System --- */
.tstm-carousel-container {
  position: relative;
  width: 100%;
  height: 480px;
  /* Base container height */
  margin: 2.5rem 0 1.5rem;
  perspective: 1200px;
}

.tstm-track {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  transform-style: preserve-3d;
}

/* Card base */
.tstm-card {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 720px;
  /* Fixed desktop slide width */
  max-width: calc(100vw - 32px);
  height: 380px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  padding: 2.5rem 3rem;
  display: grid;
  grid-template-columns: 58% 42%;
  gap: 1.5rem;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.25);
  transform-origin: center center;
  user-select: none;
  cursor: grab;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

.tstm-card:active {
  cursor: grabbing;
}

/* Left Column content */
.tstm-card__left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  z-index: 2;
}

.tstm-quote-mark {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 4.8rem;
  line-height: 1;
  color: rgba(229, 124, 90, 0.25);
  /* Warm terracotta opacity */
  position: absolute;
  top: -2.4rem;
  left: -0.6rem;
  pointer-events: none;
}

.tstm-quote-text {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.15rem;
  font-style: italic;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 1.25rem;
  position: relative;
  z-index: 3;
}

.tstm-author {
  margin-bottom: 1.25rem;
}

.tstm-author__name {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
  display: block;
  margin-bottom: 0.15rem;
}

.tstm-author__role {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.4);
}

.tstm-divider {
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.06);
  margin-bottom: 1.1rem;
}

.tstm-stat {
  font-size: 0.72rem;
  font-style: italic;
  color: rgba(255, 255, 255, 0.45);
  margin: 0 0 1.1rem;
}

.tstm-cta-link {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  color: #e57c5a;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  transition: gap 0.3s ease;
  width: fit-content;
}

.tstm-cta-link:hover {
  gap: 0.65rem;
}

.tstm-arrow {
  display: inline-block;
}

/* Right Column (Avatars & CSS Graphics) */
.tstm-card__right {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 2;
  border-left: 1px solid rgba(255, 255, 255, 0.04);
  padding-left: 1.5rem;
}

/* Profile area */
.tstm-profile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tstm-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 800;
  font-size: 1.3rem;
  color: #fff;
  border: 2px solid rgba(139, 92, 246, 0.4);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

.tstm-avatar img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #ffffff;
  padding: 6px;
  border-radius: 50%;
}

/* Custom avatar colors */
.tstm-avatar--vv {
  background: linear-gradient(135deg, #a78bfa, #7c3aed);
}

.tstm-avatar--ja {
  background: linear-gradient(135deg, #ff7096, #e8305a);
}

.tstm-avatar--ra {
  background: linear-gradient(135deg, #a3e635, #65a30d);
}

.tstm-avatar--aj {
  background: linear-gradient(135deg, #60a5fa, #2563eb);
}

.tstm-avatar--pj {
  background: linear-gradient(135deg, #fbbf24, #d97706);
}

.tstm-avatar--arj {
  background: linear-gradient(135deg, #38bdf8, #0369a1);
}

/* Role badge */
.tstm-role-badge {
  font-size: 0.52rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: #3f6212;
  /* Default olive green */
  color: #fff;
  padding: 0.22rem 0.65rem;
  border-radius: 999px;
  margin-top: -12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* Project mockup representation */
.tstm-proj-card {
  width: 100%;
  height: 180px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- MOCKUP GRAPHICS CSS --- */
.tstm-mock-dash {
  width: 80%;
  height: 75%;
  background: #121017;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 10px;
}

.tstm-mock-header {
  height: 6px;
  width: 40%;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 3px;
  margin-bottom: 12px;
}

.tstm-mock-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tstm-mock-bar {
  height: 8px;
  background: linear-gradient(90deg, #7c3aed, #a78bfa);
  border-radius: 4px;
}

.tstm-mock-bar--75 {
  width: 75%;
}

.tstm-mock-bar--45 {
  width: 45%;
  background: linear-gradient(90deg, #ec4899, #f43f5e);
}

.tstm-mock-bar--90 {
  width: 90%;
  background: linear-gradient(90deg, #10b981, #34d399);
}

.tstm-mock-web {
  width: 85%;
  height: 80%;
  background: #0f172a;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.tstm-mock-hero-art {
  flex: 1.2;
  background: linear-gradient(45deg, #1e1b4b, #311042);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tstm-mock-orb {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: radial-gradient(circle, #f472b6, transparent 70%);
}

.tstm-mock-lines {
  flex: 1;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.tstm-mock-line {
  height: 4px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 2px;
}

.tstm-mock-portal {
  width: 80%;
  height: 75%;
}

.tstm-mock-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  height: 100%;
}

.tstm-mock-tile {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 6px;
}

.tstm-mock-tile--1 {
  border-color: rgba(163, 230, 53, 0.3);
  background: rgba(163, 230, 53, 0.03);
}

.tstm-mock-tile--2 {
  border-color: rgba(96, 165, 250, 0.3);
  background: rgba(96, 165, 250, 0.03);
}

.tstm-mock-bcl {
  width: 80%;
  height: 75%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tstm-mock-pill {
  height: 12px;
  width: 60px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.tstm-mock-chart {
  flex: 1;
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.tstm-mock-bar-v {
  flex: 1;
  background: linear-gradient(to top, #3b82f6, #60a5fa);
  border-radius: 4px 4px 0 0;
}

.tstm-mock-map {
  width: 85%;
  height: 80%;
  background: #111827;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  position: relative;
  overflow: hidden;
}

.tstm-mock-pin {
  width: 10px;
  height: 10px;
  background: #ef4444;
  border-radius: 50%;
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 10px #ef4444;
}

.tstm-mock-pin::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: #ef4444;
}

.tstm-mock-road {
  background: rgba(255, 255, 255, 0.06);
  position: absolute;
}

.tstm-mock-road--h {
  width: 100%;
  height: 6px;
  top: 50%;
  left: 0;
}

.tstm-mock-road--v {
  width: 6px;
  height: 100%;
  top: 0;
  left: 45%;
}

.tstm-mock-store {
  width: 80%;
  height: 75%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.tstm-mock-shelf {
  height: 25px;
  border-bottom: 2px solid rgba(255, 255, 255, 0.1);
  display: flex;
  gap: 6px;
  align-items: flex-end;
  padding-bottom: 2px;
}

.tstm-mock-item {
  width: 12px;
  border-radius: 2px 2px 0 0;
  opacity: 0.8;
}

.tstm-mock-item.bg-rose-400 {
  height: 16px;
}

.tstm-mock-item.bg-amber-400 {
  height: 12px;
}

.tstm-mock-item.bg-teal-400 {
  height: 18px;
}

.tstm-mock-item.bg-blue-400 {
  height: 14px;
}

.tstm-mock-item.bg-indigo-400 {
  height: 16px;
}


/* --- Chevron Navigation Buttons --- */
.tstm-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #ffffff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2a2725;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  z-index: 10;
  transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.tstm-nav-btn:hover {
  transform: translateY(-50%) scale(1.08);
  background: #e57c5a;
  color: #fff;
}

.tstm-nav-btn--prev {
  left: 40px;
}

.tstm-nav-btn--next {
  right: 40px;
}

/* Hide arrows when carousel overflow is too tight */
@media (max-width: 900px) {
  .tstm-nav-btn {
    display: none !important;
  }
}

/* --- Pagination Dots --- */
.tstm-dots-container {
  display: flex;
  justify-content: center;
  width: 100%;
}

.tstm-dots {
  display: flex;
  gap: 8px;
}

.tstm-dot {
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.2);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: width 0.3s cubic-bezier(.16, 1, .3, 1), background-color 0.3s ease;
}

.tstm-dot.active {
  width: 28px;
  background: #e57c5a;
}


/* ============================================================
   RESPONSIVE LAYOUTS
   ============================================================ */

@media (max-width: 780px) {
  .tstm-carousel-container {
    height: auto;
    min-height: 480px;
  }

  .tstm-card {
    grid-template-columns: 1fr;
    height: auto;
    padding: 2rem 2rem;
    gap: 2rem;
  }

  .tstm-card__right {
    border-left: none;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-left: 0;
    padding-top: 1.5rem;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .tstm-proj-card {
    width: 60%;
    height: 110px;
  }

  .tstm-profile {
    flex-direction: row;
    gap: 12px;
  }

  .tstm-role-badge {
    margin-top: 0;
  }
}

@media (max-width: 480px) {
  .tstm-card__right {
    flex-direction: column;
    gap: 1.5rem;
    align-items: center;
  }

  .tstm-proj-card {
    width: 100%;
  }
}


/* ============================================================
   DAY / LIGHT THEME OVERRIDES
   ============================================================ */

html.light-theme .tstm-section {
  background: transparent !important;
}

html.light-theme .tstm-deco-leaf {
  color: #8263C8 !important;
  opacity: 0.07 !important;
}

html.light-theme .tstm-watercolor--left {
  background: #e57c5a !important;
}

html.light-theme .tstm-watercolor--right {
  background: #f0a285 !important;
}

html.light-theme .tstm-eyebrow {
  color: #dc6e4c !important;
}

html.light-theme .tstm-heading {
  color: #2a2725 !important;
}

html.light-theme .tstm-heading em {
  background: linear-gradient(135deg, #6D28D9 0%, #3B82F6 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  -webkit-text-stroke: 0 !important;
}

html.light-theme .tstm-sub {
  color: rgba(42, 39, 37, 0.65) !important;
}

html.light-theme .tstm-sub-bribe {
  color: rgba(42, 39, 37, 0.4) !important;
}

html.light-theme .tstm-card {
  background: #ffffff !important;
  border-color: rgba(130, 99, 200, 0.08) !important;
  box-shadow: 0 24px 50px rgba(130, 99, 200, 0.06);
}

html.light-theme .tstm-quote-mark {
  color: rgba(229, 124, 90, 0.16) !important;
}

html.light-theme .tstm-quote-text {
  color: #2a2725 !important;
}

html.light-theme .tstm-author__name {
  color: #2a2725 !important;
}

html.light-theme .tstm-author__role {
  color: rgba(42, 39, 37, 0.5) !important;
}

html.light-theme .tstm-divider {
  background: rgba(0, 0, 0, 0.06) !important;
}

html.light-theme .tstm-stat {
  color: rgba(42, 39, 37, 0.55) !important;
}

html.light-theme .tstm-cta-link {
  color: #dc6e4c !important;
}

html.light-theme .tstm-avatar {
  border-color: rgba(0, 0, 0, 0.05) !important;
}

html.light-theme .tstm-role-badge {
  background: #4d7c0f !important;
  /* olive green */
}

html.light-theme .tstm-proj-card {
  background: #FAF9F6 !important;
  border-color: rgba(0, 0, 0, 0.05) !important;
}

html.light-theme .tstm-mock-dash {
  background: #f1ede4 !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}

html.light-theme .tstm-mock-header {
  background: rgba(0, 0, 0, 0.12) !important;
}

html.light-theme .tstm-mock-line {
  background: rgba(0, 0, 0, 0.1) !important;
}

html.light-theme .tstm-mock-web {
  background: #f1ede4 !important;
  border-color: rgba(0, 0, 0, 0.07) !important;
}

html.light-theme .tstm-nav-btn {
  background: #ffffff !important;
  color: #2a2725 !important;
  box-shadow: 0 10px 24px rgba(130, 99, 200, 0.12) !important;
}

html.light-theme .tstm-nav-btn:hover {
  background: #dc6e4c !important;
  color: #fff !important;
}

html.light-theme .tstm-dot {
  background: rgba(130, 99, 200, 0.18) !important;
}

html.light-theme .tstm-dot.active {
  background: #dc6e4c !important;
}

/* ============================================================
   FAQ SECTION — ACCORDION REDESIGN
   ============================================================ */

.faq-section {
  position: relative;
  padding: 6.5rem 0;
  overflow: hidden;
  background: transparent;
}

/* Ambient background glow */
.faq-bg-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.04) 0%, transparent 70%);
  pointer-events: none;
  z-index: -1;
}

/* Header styling */
.faq-header {
  text-align: center;
  margin-bottom: 4.5rem;
}

.faq-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #c084fc;
  /* soft purple/fuchsia eyebrow */
  margin-bottom: 1.15rem;
}

.faq-eyebrow::before,
.faq-eyebrow::after {
  content: '';
  display: block;
  width: 1.2rem;
  height: 1px;
  background: currentColor;
  opacity: 0.5;
}

.faq-heading {
  font-size: clamp(2.4rem, 5.5vw, 4.2rem);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -0.04em;
  color: #ffffff;
  margin-bottom: 1.5rem;
}

.faq-heading span {
  display: inline-block;
  background: linear-gradient(135deg, #a855f7 0%, #3b82f6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.faq-desc {
  font-size: 1.05rem;
  font-weight: 300;
  color: #9ca3af;
  max-width: 38rem;
  margin: 0 auto;
  line-height: 1.65;
}

/* Accordion list container */
.faq-accordion {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  position: relative;
  z-index: 2;
}

/* Single FAQ item card */
.faq-item {
  position: relative;
  border-radius: 20px;
  background: rgba(15, 15, 26, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  overflow: hidden;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.faq-item:hover {
  transform: translateY(-1px);
}

.faq-item--purple:hover {
  border-color: rgba(168, 85, 247, 0.25);
  box-shadow: 0 12px 30px rgba(168, 85, 247, 0.04);
}

.faq-item--blue:hover {
  border-color: rgba(59, 130, 246, 0.25);
  box-shadow: 0 12px 30px rgba(59, 130, 246, 0.04);
}

/* Trigger block */
.faq-trigger {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 2rem;
  cursor: pointer;
  list-style: none;
  outline: none;
  user-select: none;
}

.faq-trigger::-webkit-details-marker {
  display: none;
}

/* Question text */
.faq-question {
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
  font-weight: 700;
  color: #ffffff;
  transition: color 0.3s ease;
}

.faq-trigger:hover .faq-question {
  color: #c084fc;
}

.faq-item--blue .faq-trigger:hover .faq-question {
  color: #93c5fd;
}

/* Toggle circle icon */
.faq-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.4);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
  flex-shrink: 0;
  margin-left: 1.2rem;
}

.faq-trigger:hover .faq-icon {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
}

/* Answer body */
.faq-body {
  padding: 0 2rem 1.75rem;
  /* Stagger reveal animation */
  animation: faq-reveal 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes faq-reveal {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Divider inside card */
.faq-divider {
  width: 100%;
  height: 1px;
  margin-bottom: 1.25rem;
}

.faq-divider--purple {
  background: linear-gradient(90deg, rgba(168, 85, 247, 0.25) 0%, transparent 100%);
}

.faq-divider--blue {
  background: linear-gradient(90deg, rgba(59, 130, 246, 0.25) 0%, transparent 100%);
}

/* Answer text formatting */
.faq-answer {
  font-size: 0.95rem;
  font-weight: 300;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.65);
}

/* Expanded state updates */
details[open] .faq-icon {
  transform: rotate(180deg);
  background: rgba(168, 85, 247, 0.1) !important;
  border-color: rgba(168, 85, 247, 0.3) !important;
  color: #c084fc !important;
}

details.faq-item--blue[open] .faq-icon {
  background: rgba(59, 130, 246, 0.1) !important;
  border-color: rgba(59, 130, 246, 0.3) !important;
  color: #93c5fd !important;
}

details[open] .faq-question {
  color: #c084fc !important;
}

details.faq-item--blue[open] .faq-question {
  color: #93c5fd !important;
}


/* ============================================================
   LIGHT THEME ACCORDION OVERRIDES
   ============================================================ */

html.light-theme .faq-heading {
  color: #1F1F1F !important;
}

html.light-theme .faq-desc {
  color: rgba(31, 31, 31, 0.65) !important;
}

html.light-theme .faq-item {
  background: #ffffff !important;
  border-color: #EEEAF7 !important;
  box-shadow: 0 8px 30px rgba(130, 99, 200, 0.04) !important;
}

html.light-theme .faq-item:hover {
  border-color: rgba(130, 99, 200, 0.2) !important;
  box-shadow: 0 12px 35px rgba(130, 99, 200, 0.08) !important;
}

html.light-theme .faq-question {
  color: #1F1F1F !important;
}

html.light-theme .faq-answer {
  color: rgba(31, 31, 31, 0.7) !important;
}

html.light-theme .faq-icon {
  background: #FAF9F6 !important;
  border-color: #EEEAF7 !important;
  color: rgba(31, 31, 31, 0.4) !important;
}

html.light-theme .faq-trigger:hover .faq-icon {
  color: #8263C8 !important;
  border-color: rgba(130, 99, 200, 0.3) !important;
}

html.light-theme .faq-trigger:hover .faq-question {
  color: #8263C8 !important;
}

html.light-theme .faq-divider--purple {
  background: linear-gradient(90deg, rgba(130, 99, 200, 0.15) 0%, transparent 100%) !important;
}

html.light-theme .faq-divider--blue {
  background: linear-gradient(90deg, rgba(59, 130, 246, 0.15) 0%, transparent 100%) !important;
}

html.light-theme details[open] .faq-icon {
  background: rgba(130, 99, 200, 0.08) !important;
  border-color: rgba(130, 99, 200, 0.25) !important;
  color: #8263C8 !important;
}

html.light-theme details[open] .faq-question {
  color: #8263C8 !important;
}

html.light-theme details.faq-item--blue[open] .faq-question {
  color: #2563eb !important;
}

/* Service Pages custom FAQ structure padding & alignment fixes */
.faq-item>button {
  padding-left: 2rem !important;
  padding-right: 2rem !important;
  transition: background 0.3s ease;
}

.faq-item>button:hover {
  background: rgba(255, 255, 255, 0.02);
}

html.light-theme .faq-item>button:hover {
  background: rgba(130, 99, 200, 0.03) !important;
}

.faq-item>div>p {
  padding-left: 2rem !important;
  padding-right: 2rem !important;
  padding-top: 0.5rem !important;
}

/* ============================================================
   SERVICE CAPABILITIES CTA CARD (PREMIUM & STUNNING)
   ============================================================ */
.service-cta-card {
  max-w-4xl mx-auto;
  border-radius: 28px !important;
  background: linear-gradient(135deg, rgba(20, 20, 35, 0.82) 0%, rgba(10, 10, 20, 0.96) 100%) !important;
  border: 1px solid rgba(139, 92, 246, 0.22) !important;
  box-shadow: 0 35px 80px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  backdrop-filter: blur(30px) !important;
  -webkit-backdrop-filter: blur(30px) !important;
  transition: border-color 0.4s ease, box-shadow 0.4s ease, transform 0.4s ease !important;
}

.service-cta-card:hover {
  border-color: rgba(139, 92, 246, 0.5) !important;
  box-shadow: 0 45px 95px rgba(139, 92, 246, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  transform: translateY(-3px);
}

/* Heading Fonts Contrast */
.service-cta-card h2 {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 900 !important;
  letter-spacing: -0.025em !important;
}

.service-cta-card h2 span {
  font-family: 'Playfair Display', serif !important;
  font-weight: 700 !important;
  font-style: italic !important;
  text-transform: none !important;
  /* Elegant Title Case / Italic */
}

/* Description Typography and Contrast */
.service-cta-card p {
  color: rgba(224, 224, 255, 0.75) !important;
  font-size: 1.05rem !important;
  font-weight: 400 !important;
  line-height: 1.75 !important;
  max-w: 32rem;
  margin-left: auto;
  margin-right: auto;
}

.service-cta-card p span {
  color: #a855f7 !important;
  font-weight: 600 !important;
}

/* Light Theme Styling overrides */
html.light-theme .service-cta-card {
  background: rgba(255, 255, 255, 0.96) !important;
  border-color: rgba(124, 58, 237, 0.22) !important;
  box-shadow: 0 30px 65px rgba(124, 58, 237, 0.06) !important;
}

html.light-theme .service-cta-card:hover {
  border-color: rgba(124, 58, 237, 0.5) !important;
  box-shadow: 0 40px 85px rgba(124, 58, 237, 0.12) !important;
}

html.light-theme .service-cta-card p {
  color: #334155 !important;
}

html.light-theme .service-cta-card p span {
  color: #7c3aed !important;
}

/* Buttons and Links styling inside CTA */
html.light-theme .service-cta-card a.bg-white,
html.light-theme .service-cta-card a[class*="bg-"] {
  background-color: #7c3aed !important;
  color: #ffffff !important;
  box-shadow: 0 8px 24px rgba(124, 58, 237, 0.25) !important;
}

html.light-theme .service-cta-card a.bg-white:hover,
html.light-theme .service-cta-card a[class*="bg-"]:hover {
  background-color: #6d28d9 !important;
  box-shadow: 0 12px 28px rgba(124, 58, 237, 0.4) !important;
}

/* Fix text buttons like REQUEST BLUEPRINT / REQUEST SYSTEM AUDIT */
html.light-theme .service-cta-card a:not([class*="bg-"]) {
  color: #334155 !important;
}

html.light-theme .service-cta-card a:not([class*="bg-"]):hover {
  color: #7c3aed !important;
}

/* ============================================================
   ISOMETRIC CONVEYOR BELT ILLUSTRATION PANEL
   ============================================================ */

.iso-card-panel {
  display: flex;
  flex-direction: column;
  border-radius: 28px;
  overflow: hidden;
  background: #ffffff;
  /* flat light panel by default */
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Graphic Panel (Soft light-blue gradient) */
.iso-graphic-panel {
  position: relative;
  width: 100%;
  height: 340px;
  background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);
  /* soft blue gradient */
  overflow: hidden;
}

/* Floating pill label top-left */
.iso-floating-pill {
  position: absolute;
  top: 24px;
  left: 24px;
  background: #ffffff;
  padding: 0.45rem 1rem;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: #0369a1;
  box-shadow: 0 6px 20px rgba(3, 105, 161, 0.12);
  z-index: 10;
}

/* Isometric projection canvas */
.iso-scene {
  position: relative;
  width: 100%;
  height: 100%;
}

/* Diagonal isometric path */
.iso-road {
  position: absolute;
  width: 2px;
  height: 480px;
  background: rgba(255, 255, 255, 0.55);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(55deg) skewX(25deg);
  box-shadow: 0 0 4px rgba(255, 255, 255, 0.4);
}

/* Intersection point node dot */
.iso-fork-node {
  position: absolute;
  top: 36%;
  left: 36%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 10px #ffffff;
  transform: translate(-50%, -50%);
  z-index: 4;
}

/* Ambient static graphics */
.iso-ambient-icon {
  position: absolute;
  font-size: 1rem;
  opacity: 0.25;
  pointer-events: none;
  user-select: none;
  z-index: 2;
}

.iso-ambient-icon--1 {
  top: 28%;
  left: 65%;
}

.iso-ambient-icon--2 {
  top: 72%;
  left: 32%;
}

/* Rotated fixed CTA button placed on road */
.iso-fixed-btn {
  position: absolute;
  top: 58%;
  left: 55%;
  transform: translate(-50%, -50%) rotate(-35deg) skew(-20deg);
  background: #ffffff;
  color: #0369a1;
  font-size: 0.65rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 0.55rem 1.25rem;
  border-radius: 999px;
  box-shadow: 0 10px 24px rgba(3, 105, 161, 0.15);
  white-space: nowrap;
  pointer-events: none;
  z-index: 6;
}

/* Anchored Highlighted Card */
.iso-anchored-card {
  position: absolute;
  top: 22%;
  left: 18%;
  width: 120px;
  height: 65px;
  background: #ffffff;
  border: 1.5px solid #a855f7;
  border-radius: 14px;
  padding: 10px;
  box-shadow: 0 14px 35px rgba(168, 85, 247, 0.22);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transform: rotate(-35deg) skew(-20deg);
  z-index: 5;
  pointer-events: none;
}

.iso-badge {
  position: absolute;
  top: -8px;
  left: -8px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #f43f5e;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  box-shadow: 0 4px 10px rgba(244, 63, 94, 0.4);
}

.iso-card-title-text {
  font-size: 0.62rem;
  font-weight: 800;
  color: #0f172a;
}

.iso-card-graph {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.iso-card-graph-bar {
  height: 3px;
  border-radius: 1.5px;
  background: #c084fc;
}

/* Document cards (Isometric layout + line elements) */
.iso-doc {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.iso-doc-line {
  height: 3px;
  border-radius: 1.5px;
  background: rgba(3, 105, 161, 0.15);
  width: 85%;
}

.iso-doc-line--short {
  width: 45%;
  background: rgba(3, 105, 161, 0.35);
}

/* Scrolling Cards along Conveyor Path */
.iso-scroll-card {
  position: absolute;
  width: 76px;
  height: 48px;
  background: #ffffff;
  border-radius: 8px;
  padding: 8px;
  box-shadow: 0 8px 20px rgba(3, 105, 161, 0.08);
  pointer-events: none;
  z-index: 3;
  opacity: 0;
}

/* True isometric perspective scroll along diagonal path */
@keyframes isoConveyorScroll {
  0% {
    top: 95%;
    left: 80%;
    transform: translate(-50%, -50%) rotate(-35deg) skew(-20deg) scale(1.15);
    opacity: 0;
  }

  12% {
    opacity: 0.95;
  }

  88% {
    opacity: 0.95;
  }

  100% {
    top: 15%;
    left: 20%;
    transform: translate(-50%, -50%) rotate(-35deg) skew(-20deg) scale(0.48);
    opacity: 0;
  }
}

/* Stagger scroll animation cards */
.iso-scroll-card--1 {
  animation: isoConveyorScroll 5s linear infinite;
  animation-delay: 0s;
}

.iso-scroll-card--2 {
  animation: isoConveyorScroll 5s linear infinite;
  animation-delay: 1.66s;
}

.iso-scroll-card--3 {
  animation: isoConveyorScroll 5s linear infinite;
  animation-delay: 3.33s;
}

/* Copy Panel details below graphic canvas */
.iso-copy-panel {
  padding: 2.25rem 2rem;
  background: #ffffff;
  border-top: 1px solid #e2e8f0;
  text-align: left;
}

.iso-headline {
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.4;
  color: #0f172a;
  /* bold dark text */
  margin-bottom: 0.5rem;
}

.iso-subtext {
  font-size: 0.92rem;
  font-weight: 400;
  color: #64748b;
  /* muted gray subtext */
}


/* --- Dark Mode and Layout Integration for Contact Section --- */
html:not(.light-theme) .iso-card-panel {
  background: #0f0f1a;
  border-color: rgba(255, 255, 255, 0.05);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5);
}

html:not(.light-theme) .iso-copy-panel {
  background: #0f0f1a;
  border-top-color: rgba(255, 255, 255, 0.06);
}

html:not(.light-theme) .iso-headline {
  color: #ffffff;
}

html:not(.light-theme) .iso-subtext {
  color: #94a3b8;
}

html:not(.light-theme) .iso-floating-pill {
  background: #1e1b4b;
  color: #a5f3fc;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

html:not(.light-theme) .iso-fixed-btn {
  background: #1e1b4b;
  color: #38bdf8;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
}

html:not(.light-theme) .iso-anchored-card {
  background: #1e1b4b;
  border-color: #a855f7;
  box-shadow: 0 14px 35px rgba(168, 85, 247, 0.35);
}

html:not(.light-theme) .iso-card-title-text {
  color: #ffffff;
}

html:not(.light-theme) .iso-scroll-card {
  background: #1e1b4b;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

html:not(.light-theme) .iso-doc-line {
  background: rgba(56, 189, 248, 0.15);
}

html:not(.light-theme) .iso-doc-line--short {
  background: rgba(56, 189, 248, 0.35);
}

html:not(.light-theme) .iso-graphic-panel {
  background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%);
}

html:not(.light-theme) .iso-road {
  background: rgba(255, 255, 255, 0.15);
}


/* ============================================================
   PREMIUM FOOTER REDESIGN
   ============================================================ */

footer.premium-footer {
  position: relative;
  margin-top: 5rem;
  padding-top: 6rem;
  padding-bottom: 3.5rem;
  overflow: hidden;
  background: linear-gradient(180deg, #2A1858 0%, #150C2E 100%) !important;
  border-top: 1px solid #3b2575 !important;
}

/* Subtle noise texture overlay */
footer.premium-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  opacity: 0.015;
  mix-blend-mode: overlay;
}

/* Ambient glow details */
.footer-glow {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 500px;
  height: 250px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.08) 0%, transparent 70%);
  pointer-events: none;
  z-index: 2;
}

/* Logo area styling */
.footer-logo-link {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
}

.footer-logo-link:hover .footer-logo-icon {
  transform: scale(1.08) rotate(5deg);
  filter: drop-shadow(0 0 10px rgba(167, 139, 250, 0.6));
}

.footer-logo-icon {
  width: 32px;
  height: 32px;
  color: #ffffff;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), filter 0.3s ease;
}

.footer-wordmark {
  font-family: 'Montserrat', 'Inter', sans-serif;
  font-size: 1.2rem;
  font-weight: 900;
  font-style: italic;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: #ffffff;
}

/* Tagline */
.footer-tagline {
  font-size: 0.88rem;
  font-weight: 300;
  line-height: 1.65;
  color: #9E8FC4;
  max-width: 18.5rem;
}

/* Operational status line styling */
.footer-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #9E8FC4;
  background: rgba(139, 92, 246, 0.08);
  padding: 0.35rem 0.75rem;
  border-radius: 6px;
  border: 1px solid rgba(139, 92, 246, 0.15);
  margin-top: 1rem;
}

.footer-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #8B5CF6;
  box-shadow: 0 0 8px #8B5CF6;
}

/* Operational status text hover */
.footer-mail-link {
  display: inline-flex;
  align-items: center;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #a78bfa;
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-mail-link span {
  display: inline-block;
  width: 28px;
  height: 1px;
  background: rgba(167, 139, 250, 0.35);
  margin-right: 0.75rem;
  transition: width 0.3s ease, background-color 0.3s ease;
}

.footer-mail-link:hover {
  color: #ffffff;
}

.footer-mail-link:hover span {
  width: 42px;
  background: #ffffff;
}

/* Column Header Labels */
.footer-column-header {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(167, 139, 250, 0.72) !important;
  display: flex;
  align-items: center;
  margin-bottom: 2rem;
}

.footer-column-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #8B5CF6;
  box-shadow: 0 0 6px #8B5CF6;
  margin-right: 0.75rem;
}

/* Footer link item layout */
.footer-link-item {
  margin-bottom: 1.15rem;
}

.footer-link {
  font-size: 0.85rem;
  font-weight: 500;
  color: #ffffff !important;
  text-decoration: none !important;
  transition: color 0.3s ease, transform 0.3s ease;
  display: inline-block;
  opacity: 0.85;
}

.footer-link:hover {
  color: #60A5FA !important;
  transform: translateX(4px);
  opacity: 1;
}

/* Social Hub Round-Square Containers */
.footer-social-link {
  display: flex;
  align-items: center;
  text-decoration: none !important;
  transition: opacity 0.3s ease;
}

.footer-social-icon-wrapper {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(139, 92, 246, 0.14) !important;
  border: 1px solid rgba(139, 92, 246, 0.22) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  margin-right: 0.85rem;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
}

.footer-social-link:hover .footer-social-icon-wrapper {
  transform: scale(1.08) translateY(-1px);
  background: rgba(139, 92, 246, 0.28) !important;
  border-color: rgba(139, 92, 246, 0.8) !important;
  box-shadow: 0 0 15px rgba(139, 92, 246, 0.5);
}

.footer-social-label {
  font-size: 0.85rem;
  font-weight: 500;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  opacity: 0.85;
  transition: color 0.3s ease, opacity 0.3s ease;
}

.footer-social-link:hover .footer-social-label {
  color: #60A5FA;
  opacity: 1;
}

/* Footer Bottom Bar layout */
.footer-bottom-bar {
  margin-top: 5rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .footer-bottom-bar {
    flex-direction: row;
    gap: 0;
  }
}

.footer-meta-left {
  display: flex;
  align-items: center;
}

.footer-meta-tag {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #9E8FC4;
  border-left: 2px solid rgba(139, 92, 246, 0.3);
  padding-left: 0.75rem;
  font-style: italic;
}

.footer-meta-clock {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 0.68rem;
  font-weight: 700;
  color: #a78bfa;
  background: rgba(255, 255, 255, 0.04);
  padding: 0.25rem 0.75rem;
  border-radius: 99px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  margin-left: 1rem;
}

.footer-meta-right {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #9E8FC4;
  text-align: center;
}

@media (min-width: 768px) {
  .footer-meta-right {
    text-align: right;
  }
}

.footer-meta-heart {
  color: #f43f5e;
  animation: pulse 1.5s infinite;
  display: inline-block;
  margin: 0 0.15rem;
}

.footer-meta-secure {
  color: #10b981;
  opacity: 0.85;
  margin-left: 0.5rem;
}

/* Light Theme overrides for the global premium footer */
/* We keep the footer dark & premium as requested, so no light override for background */
html.light-theme footer.premium-footer {
  background: linear-gradient(180deg, #23124d 0%, #0d0721 100%) !important;
  border-top: 1px solid #321c66 !important;
}

/* ==========================================================================
   PREMIUM BUTTON & INTERACTIVE ELEMENTS STYLING (DARK & LIGHT MODE ENHANCEMENTS)
   ========================================================================== */

/* Premium Glass Button (Base Styles) */
.btn-glass {
  background: rgba(255, 255, 255, 0.03) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.btn-glass:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(168, 85, 247, 0.4) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 25px rgba(168, 85, 247, 0.25) !important;
}

/* Day Theme overrides for Glass button (obsidian luxury black with glowing border) */
html.light-theme .btn-glass {
  background: #0b0b17 !important;
  border: 1.5px solid rgba(139, 92, 246, 0.4) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 24px rgba(11, 11, 23, 0.25) !important;
}

html.light-theme .btn-glass:hover {
  background: #6D5EF8 !important;
  border-color: #6D5EF8 !important;
  box-shadow: 0 12px 28px rgba(109, 94, 248, 0.35) !important;
  color: #ffffff !important;
}

/* Day Theme overrides for Join Network header button */
html.light-theme #portal-trigger {
  background: linear-gradient(135deg, #7c3aed 0%, #4f46e5 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 20px rgba(124, 58, 237, 0.25) !important;
}

html.light-theme #portal-trigger:hover {
  background: linear-gradient(135deg, #6d28d9 0%, #4338ca 100%) !important;
  box-shadow: 0 12px 28px rgba(124, 58, 237, 0.35) !important;
  color: #ffffff !important;
}

/* Day Theme overrides for Lock Configuration Spec button in product.php */
html.light-theme button[onclick*="submitConfigQuote"],
html.light-theme .view-section button.bg-purple-600 {
  background: linear-gradient(135deg, #7c3aed 0%, #4f46e5 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 20px rgba(124, 58, 237, 0.25) !important;
}

html.light-theme button[onclick*="submitConfigQuote"]:hover,
html.light-theme .view-section button.bg-purple-600:hover {
  background: linear-gradient(135deg, #6d28d9 0%, #4338ca 100%) !important;
  box-shadow: 0 12px 28px rgba(124, 58, 237, 0.35) !important;
  color: #ffffff !important;
}

/* Day Theme overrides for border-only buttons (like Marketing Calendar) */
html.light-theme a.border-white\/10,
html.light-theme button.border-white\/10,
html.light-theme a.border-white\/30,
html.light-theme button.border-white\/30 {
  border-color: #1e1033 !important;
  color: #1e1033 !important;
}

html.light-theme a.border-white\/10:hover,
html.light-theme button.border-white\/10:hover,
html.light-theme a.border-white\/30:hover,
html.light-theme button.border-white\/30:hover {
  background-color: rgba(109, 94, 248, 0.08) !important;
  border-color: #6D5EF8 !important;
  color: #6D5EF8 !important;
}

/* ==========================================================================
   GLOBAL LIGHT THEME BADGES & PILLS OVERRIDES (PRODUCT & SERVICE PAGES)
   ========================================================================== */

/* Neutral/Standard white/5 or white/10 badges */
html.light-theme .inline-flex.items-center.rounded-full,
html.light-theme .inline-flex.items-center.rounded-sm,
html.light-theme [class*="bg-white/5"].rounded-full,
html.light-theme [class*="bg-white/10"].rounded-full,
html.light-theme [class*="bg-white/5"].rounded-sm,
html.light-theme [class*="bg-white/10"].rounded-sm,
html.light-theme [class*="bg-white/"][class*="rounded-"] {
  background-color: rgba(139, 92, 246, 0.08) !important;
  border: 1px solid rgba(139, 92, 246, 0.25) !important;
  color: #1e1033 !important;
}

html.light-theme .inline-flex.items-center.rounded-full *,
html.light-theme .inline-flex.items-center.rounded-sm *,
html.light-theme [class*="bg-white/5"].rounded-full *,
html.light-theme [class*="bg-white/10"].rounded-full *,
html.light-theme [class*="bg-white/5"].rounded-sm *,
html.light-theme [class*="bg-white/10"].rounded-sm * {
  color: #1e1033 !important;
}

/* Red/Pink badge overrides */
html.light-theme [class*="bg-red-500/10"],
html.light-theme [class*="bg-red-500/20"]:not(button) {
  background-color: rgba(239, 68, 68, 0.12) !important;
  border: 1px solid rgba(239, 68, 68, 0.25) !important;
  color: #b91c1c !important;
}

html.light-theme [class*="bg-red-500/10"] *,
html.light-theme [class*="bg-red-500/20"]:not(button) * {
  color: #b91c1c !important;
}

/* Blue badge overrides */
html.light-theme [class*="bg-blue-500/10"],
html.light-theme [class*="bg-blue-500/20"]:not(button) {
  background-color: rgba(59, 130, 246, 0.12) !important;
  border: 1px solid rgba(59, 130, 246, 0.25) !important;
  color: #1d4ed8 !important;
}

html.light-theme [class*="bg-blue-500/10"] *,
html.light-theme [class*="bg-blue-500/20"]:not(button) * {
  color: #1d4ed8 !important;
}

/* Purple badge overrides */
html.light-theme [class*="bg-purple-500/10"],
html.light-theme [class*="bg-purple-500/20"]:not(button) {
  background-color: rgba(168, 85, 247, 0.12) !important;
  border: 1px solid rgba(168, 85, 247, 0.25) !important;
  color: #6d28d9 !important;
}

html.light-theme [class*="bg-purple-500/10"] *,
html.light-theme [class*="bg-purple-500/20"]:not(button) * {
  color: #6d28d9 !important;
}

/* Amber/Orange badge overrides */
html.light-theme [class*="bg-amber-500/10"],
html.light-theme [class*="bg-amber-500/20"]:not(button) {
  background-color: rgba(245, 158, 11, 0.12) !important;
  border: 1px solid rgba(245, 158, 11, 0.25) !important;
  color: #b45309 !important;
}

html.light-theme [class*="bg-amber-500/10"] *,
html.light-theme [class*="bg-amber-500/20"]:not(button) * {
  color: #b45309 !important;
}

/* Teal badge overrides */
html.light-theme [class*="bg-teal-500/10"],
html.light-theme [class*="bg-teal-500/20"]:not(button) {
  background-color: rgba(20, 184, 166, 0.12) !important;
  border: 1px solid rgba(20, 184, 166, 0.25) !important;
  color: #0f766e !important;
}

html.light-theme [class*="bg-teal-500/10"] *,
html.light-theme [class*="bg-teal-500/20"]:not(button) * {
  color: #0f766e !important;
}

/* Day/Light Theme Text Color Contrast Overrides to prevent washed out text */
html.light-theme .text-red-400,
html.light-theme [class*="text-red-400"] {
  color: #dc2626 !important;
}

html.light-theme .text-amber-400,
html.light-theme [class*="text-amber-400"] {
  color: #b45309 !important;
}

html.light-theme .text-blue-400,
html.light-theme [class*="text-blue-400"] {
  color: #2563eb !important;
}

html.light-theme .text-emerald-400,
html.light-theme [class*="text-emerald-400"] {
  color: #059669 !important;
}

html.light-theme .text-purple-400,
html.light-theme [class*="text-purple-400"] {
  color: #7c3aed !important;
}

/* ==========================================================================
   ACTIVE NAVIGATION PAGE INDICATOR (Underline with primary gradient)
   ========================================================================== */
.glass-header nav a,
.glass-header nav button {
  position: relative;
}

.glass-header nav a.nav-active::after,
.glass-header nav button.nav-active::after {
  content: "" !important;
  position: absolute !important;
  bottom: 2px !important;
  left: 15% !important;
  width: 70% !important;
  height: 2.5px !important;
  background: linear-gradient(90deg, #a855f7 0%, #6366f1 100%) !important;
  border-radius: 99px !important;
  box-shadow: 0 1px 8px rgba(168, 85, 247, 0.45) !important;
}

/* Color overrides to make active text stand out */
html:not(.light-theme) .glass-header nav a.nav-active,
html:not(.light-theme) .glass-header nav button.nav-active span {
  color: #ffffff !important;
}

html.light-theme .glass-header nav a.nav-active,
html.light-theme .glass-header nav button.nav-active span {
  color: #7c3aed !important;
  /* purple accent on light theme */
}

/* ==========================================================================
   OUR CORE VALUES REDESIGN (purple/indigo family card gradients and icons)
   ========================================================================== */

/* 1. Base Gradients (Light theme / Default original purple-indigo values) */
/* Innovation: #4C1D95 → #7C3AED */
html.light-theme .value-card--innovation .value-card-body {
  background: linear-gradient(180deg, #4C1D95 0%, #7C3AED 100%) !important;
}

/* Collaboration: #3730A3 → #6366F1 */
html.light-theme .value-card--collaboration .value-card-body {
  background: linear-gradient(180deg, #3730A3 0%, #6366F1 100%) !important;
}

/* Excellence: #5B21B6 → #A855F7 */
html.light-theme .value-card--excellence .value-card-body {
  background: linear-gradient(180deg, #5B21B6 0%, #A855F7 100%) !important;
}

/* Integrity: #1E3A8A → #3B82F6 */
html.light-theme .value-card--integrity .value-card-body {
  background: linear-gradient(180deg, #1E3A8A 0%, #3B82F6 100%) !important;
}

/* 2. Dark theme gradients (deepened and desaturated by ~15% to avoid harsh contrast) */
html:not(.light-theme) .value-card--innovation .value-card-body {
  background: linear-gradient(180deg, #32165f 0%, #6731cd 100%) !important;
}

html:not(.light-theme) .value-card--collaboration .value-card-body {
  background: linear-gradient(180deg, #2b267e 0%, #4e52ec 100%) !important;
}

html:not(.light-theme) .value-card--excellence .value-card-body {
  background: linear-gradient(180deg, #421d80 0%, #9642ec 100%) !important;
}

html:not(.light-theme) .value-card--integrity .value-card-body {
  background: linear-gradient(180deg, #182d62 0%, #2c6ee3 100%) !important;
}

/* Border transitions matching the cohesive gradients */
html.light-theme .value-card--innovation:hover .value-card-body {
  border-color: rgba(124, 58, 237, 0.5) !important;
}

html.light-theme .value-card--collaboration:hover .value-card-body {
  border-color: rgba(99, 102, 241, 0.5) !important;
}

html.light-theme .value-card--excellence:hover .value-card-body {
  border-color: rgba(168, 85, 247, 0.5) !important;
}

html.light-theme .value-card--integrity:hover .value-card-body {
  border-color: rgba(59, 130, 246, 0.5) !important;
}

html:not(.light-theme) .value-card--innovation:hover .value-card-body {
  border-color: rgba(103, 49, 205, 0.4) !important;
}

html:not(.light-theme) .value-card--collaboration:hover .value-card-body {
  border-color: rgba(78, 82, 236, 0.4) !important;
}

html:not(.light-theme) .value-card--excellence:hover .value-card-body {
  border-color: rgba(150, 66, 236, 0.4) !important;
}

html:not(.light-theme) .value-card--integrity:hover .value-card-body {
  border-color: rgba(44, 110, 227, 0.4) !important;
}

/* 3. Icon Glow & Outline Safety Styles (Switched by Theme) */
.value-card-icon-wrap {
  position: relative;
}

/* Background soft 8-10% opacity blurred glow directly behind every icon */
.value-card-icon-wrap::before {
  content: "" !important;
  position: absolute !important;
  top: 15% !important;
  left: 15% !important;
  width: 70% !important;
  height: 70% !important;
  border-radius: 50% !important;
  z-index: -1 !important;
  filter: blur(20px) !important;
  pointer-events: none !important;
  transition: all 0.3s ease-in-out !important;
}

/* NIGHT/DARK THEME GLOW: White glow behind white/off-white icons */
html:not(.light-theme) .value-card-icon-wrap::before {
  background: radial-gradient(circle, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 70%) !important;
  opacity: 0.1 !important;
  /* 8-10% opacity radial blur */
}

/* DAY/LIGHT THEME GLOW: No white glow / transparent behind black icons */
html.light-theme .value-card-icon-wrap::before {
  background: none !important;
  opacity: 0 !important;
}

/* 4. Unified Icon Colors and Outline Strokes (Switched by Theme) */

/* A. DAY/LIGHT THEME: All 4 icons render in black (native PNG color) + subtle dark outline safety stroke */
html.light-theme .value-card-item .value-card-icon-wrap img {
  filter: opacity(0.9) drop-shadow(1px 0 0 rgba(0, 0, 0, 0.15)) drop-shadow(-1px 0 0 rgba(0, 0, 0, 0.15)) drop-shadow(0 1px 0 rgba(0, 0, 0, 0.15)) drop-shadow(0 -1px 0 rgba(0, 0, 0, 0.15)) !important;
}

/* B. NIGHT/DARK THEME: All 4 icons render in white/off-white + light safety stroke */
html:not(.light-theme) .value-card-item .value-card-icon-wrap img {
  filter: invert(1) brightness(0.95) drop-shadow(1px 0 0 rgba(255, 255, 255, 0.15)) drop-shadow(-1px 0 0 rgba(255, 255, 255, 0.15)) drop-shadow(0 1px 0 rgba(255, 255, 255, 0.15)) drop-shadow(0 -1px 0 rgba(255, 255, 255, 0.15)) !important;
}

/* ==========================================================================
   GLOBAL TEXT CLIPPING PREVENTION FOR GRADIENT/ITALIC TEXT (bg-clip-text)
   ========================================================================== */
.bg-clip-text,
.text-transparent {
  padding-top: 0.15em !important;
  padding-bottom: 0.15em !important;
  padding-right: 0.25em !important;
  margin-top: -0.15em !important;
  margin-bottom: -0.15em !important;
  margin-right: -0.25em !important;
}

span.bg-clip-text,
span.text-transparent {
  display: inline-block !important;
  vertical-align: bottom !important;
}

/* ==========================================================================
   DAY THEME (html.light-theme) OVERRIDES FOR TESTIMONIALS & POLICY PAGES
   ========================================================================== */

/* 1. Testimonial Page & Cards */
.tstm-page-card {
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.tstm-page-card:hover {
  transform: translateY(-6px);
  border-color: rgba(139, 92, 246, 0.5);
  box-shadow: 0 30px 60px rgba(124, 58, 237, 0.2);
}

html.light-theme .tstm-page-card,
html.light-theme .card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 15px 35px rgba(15, 23, 42, 0.06) !important;
}

html.light-theme .tstm-page-card:hover,
html.light-theme .card:hover {
  border-color: rgba(124, 58, 237, 0.4) !important;
  box-shadow: 0 25px 50px rgba(124, 58, 237, 0.12) !important;
}

html.light-theme .tstm-page-card .tstm-name,
html.light-theme .card .font-bold.text-white,
html.light-theme .card p.font-bold {
  color: #0f172a !important;
}

html.light-theme .tstm-page-card .tstm-role,
html.light-theme .card .text-gray-400,
html.light-theme .card p.text-sm {
  color: #6d28d9 !important;
}

html.light-theme .tstm-page-card .tstm-text,
html.light-theme .card p.text-gray-300,
html.light-theme .card p.text-gray-400 {
  color: #334155 !important;
}

/* 2. Privacy Policy, Terms & Conditions, Cookie Policy Pages */
html.light-theme .glass-card {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.08) !important;
}

html.light-theme .glass-card h1,
html.light-theme .glass-card h2,
html.light-theme .glass-card h3,
html.light-theme .glass-card h4,
html.light-theme .glass-card p,
html.light-theme .glass-card li,
html.light-theme .glass-card span,
html.light-theme .glass-card div,
html.light-theme .glass-card strong,
html.light-theme .glass-card dt,
html.light-theme .glass-card dd,
html.light-theme .glass-card a {
  color: #1e293b !important;
}

html.light-theme .glass-card .text-gray-300,
html.light-theme .glass-card .text-gray-400,
html.light-theme .glass-card .text-gray-500,
html.light-theme .glass-card .text-white,
html.light-theme .glass-card .text-slate-300,
html.light-theme .glass-card .text-slate-400 {
  color: #334155 !important;
}

html.light-theme .glass-card .text-purple-400,
html.light-theme .glass-card .text-indigo-400,
html.light-theme .glass-card .text-purple-300 {
  color: #7c3aed !important;
}

html.light-theme .glass-card .text-green-400,
html.light-theme .glass-card .text-emerald-400,
html.light-theme .glass-card .text-teal-400 {
  color: #047857 !important;
}

html.light-theme .glass-card .text-blue-400,
html.light-theme .glass-card .text-sky-400,
html.light-theme .glass-card .text-cyan-400 {
  color: #1d4ed8 !important;
}

html.light-theme .glass-card .bg-white\/5,
html.light-theme .glass-card .bg-white\/10,
html.light-theme .glass-card .bg-white\/\[0\.02\],
html.light-theme .glass-card .bg-gray-800\/50,
html.light-theme .glass-card .bg-gray-900\/50,
html.light-theme .glass-card .bg-gray-800,
html.light-theme .glass-card .bg-slate-900 {
  background-color: #f1f5f9 !important;
  border-color: #e2e8f0 !important;
}

html.light-theme .glass-card .border-white\/10,
html.light-theme .glass-card .border-white\/20,
html.light-theme .glass-card .border-white\/5 {
  border-color: #cbd5e1 !important;
}

/* Legal Page Table & Accordion Day Theme Fixes */
html.light-theme table,
html.light-theme th,
html.light-theme td {
  color: #1e293b !important;
  border-color: #e2e8f0 !important;
}

html.light-theme th {
  background-color: #f1f5f9 !important;
  color: #0f172a !important;
}

/* ==========================================================================
   TESTIMONIAL PAGE VIBRANT REDESIGN & LIGHT THEME OVERRIDES
   ========================================================================== */

/* Filter Buttons */
.tstm-filter-btn {
  color: rgba(255, 255, 255, 0.7);
  background: transparent;
  border: 1px solid transparent;
}

.tstm-filter-btn:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
}

.tstm-filter-btn.active {
  color: #ffffff !important;
  background: linear-gradient(135deg, #7c3aed 0%, #4f46e5 100%) !important;
  box-shadow: 0 8px 20px rgba(124, 58, 237, 0.4);
}

/* Light Theme Overrides for Testimonial Page */
html.light-theme .tstm-hero-badge {
  color: #6d28d9 !important;
}

html.light-theme .tstm-hero-title {
  color: #1e1033 !important;
}

html.light-theme .tstm-hero-subtitle {
  color: #1e1033 !important;
}

html.light-theme .tstm-hero-desc {
  color: #334155 !important;
}

html.light-theme .tstm-stat-card {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.05) !important;
}

html.light-theme .tstm-stat-label {
  color: #475569 !important;
}

html.light-theme .tstm-filter-wrap {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.05) !important;
}

html.light-theme .tstm-filter-btn {
  color: #475569;
}

html.light-theme .tstm-filter-btn:hover {
  color: #0f172a;
  background: #f1f5f9;
}

html.light-theme .tstm-filter-btn.active {
  color: #ffffff !important;
  background: linear-gradient(135deg, #7c3aed 0%, #4f46e5 100%) !important;
}

html.light-theme .tstm-page-card {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 15px 35px rgba(15, 23, 42, 0.06) !important;
}

html.light-theme .tstm-page-card:hover {
  border-color: #7c3aed !important;
  box-shadow: 0 25px 50px rgba(124, 58, 237, 0.15) !important;
}

html.light-theme .tstm-name {
  color: #0f172a !important;
}

html.light-theme .tstm-role {
  color: #6d28d9 !important;
}

html.light-theme .tstm-text {
  color: #334155 !important;
}

/* Fix pale badge & pill text contrast in Day Theme */
html.light-theme .tstm-page-card [class*="text-purple-300"],
html.light-theme .tstm-page-card [class*="text-violet-300"] {
  color: #6d28d9 !important;
}

html.light-theme .tstm-page-card [class*="text-pink-300"],
html.light-theme .tstm-page-card [class*="text-rose-300"] {
  color: #be123c !important;
}

html.light-theme .tstm-page-card [class*="text-emerald-300"] {
  color: #047857 !important;
}

html.light-theme .tstm-page-card [class*="text-blue-300"] {
  color: #1d4ed8 !important;
}

html.light-theme .tstm-page-card [class*="text-amber-300"] {
  color: #b45309 !important;
}

html.light-theme .tstm-page-card [class*="text-sky-300"] {
  color: #0369a1 !important;
}

html.light-theme .tstm-page-card [class*="bg-"][class*="/10"],
html.light-theme .tstm-page-card [class*="bg-"][class*="/15"] {
  background-color: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
}

html.light-theme .tstm-footer {
  border-top-color: #e2e8f0 !important;
}

html.light-theme .tstm-cta-banner {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 25px 60px rgba(15, 23, 42, 0.08) !important;
}

html.light-theme .tstm-cta-title {
  color: #0f172a !important;
}

html.light-theme .tstm-cta-desc {
  color: #475569 !important;
}

/* ==========================================================================
   VIDEO HARDWARE ACCELERATION & PERFORMANCE BOOSTER
   ========================================================================== */
video,
.lazy-video {
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* ==========================================================================
   PORTFOLIO PAGE DAY THEME (html.light-theme) READABILITY FIX
   ========================================================================== */

/* 1. Portfolio Header in Day Theme */
html.light-theme .portfolio-header-sub {
  color: #6d28d9 !important;
  opacity: 0.9 !important;
}

html.light-theme .portfolio-header-title {
  color: #0f172a !important;
}

html.light-theme .portfolio-header-gradient {
  background: linear-gradient(135deg, #7c3aed 0%, #3b82f6 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

/* 2. Portfolio Card Overlay Text Readability Fix */
html.light-theme .portfolio-card,
html.light-theme .card-entry-reveal {
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.15) !important;
}

html.light-theme .portfolio-card h3,
html.light-theme .portfolio-card-title,
html.light-theme .card-entry-reveal h3,
html.light-theme .card-entry-reveal h3.text-white {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.95), 0 1px 4px rgba(0, 0, 0, 0.9) !important;
}

html.light-theme .card-entry-reveal .port-cat-text {
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.95), 0 0 14px rgba(0, 0, 0, 0.9) !important;
  filter: brightness(1.6) saturate(1.4) !important;
}

/* 3. Portfolio Modal Overlay Fix in Day Theme */
html.light-theme #detailModal h3,
html.light-theme #detailModal #m-title {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html.light-theme #detailModal p,
html.light-theme #detailModal #m-desc {
  color: #cbd5e1 !important;
}

/* Google Reviews Badge Day Theme Compatibility */
html.light-theme .google-reviews-badge {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 4px 15px rgba(15, 23, 42, 0.08) !important;
}

html.light-theme .google-reviews-badge .text-purple-300 {
  color: #6d28d9 !important;
}

html.light-theme .google-reviews-badge .text-gray-300 {
  color: #334155 !important;
  border-left-color: #cbd5e1 !important;
}

/* ==========================================================================
   SYSTEMATIC MULTI-DEVICE RESPONSIVE DESIGN SYSTEM OVERHAUL
   ========================================================================== */

/* 1. Global Horizontal Overflow Guard */
html,
body {
  max-width: 100% !important;
  overflow-x: hidden !important;
}

/* 2. Fluid Typography Rules */
.hero-fluid-title {
  font-size: clamp(2.5rem, 6vw + 1rem, 5.5rem) !important;
  line-height: 1.1 !important;
}

.section-fluid-heading {
  font-size: clamp(1.75rem, 4vw + 0.5rem, 3.25rem) !important;
  line-height: 1.2 !important;
}

.sub-fluid-heading {
  font-size: clamp(1rem, 2vw + 0.25rem, 1.35rem) !important;
}

/* 3. Touch Target Minimum Size (44x44px for touch interfaces) */
@media (pointer: coarse),
(hover: none) {

  button,
  a,
  input[type="submit"],
  input[type="button"],
  select,
  .btn-glass,
  .btn-premium-melt,
  #theme-toggle,
  #lang-toggle,
  #portal-trigger,
  #mobile-menu-button {
    min-height: 44px !important;
    min-width: 44px !important;
  }
}

/* 4. Touch Device Hover Guard */
@media (hover: none) {

  .hover\:-translate-y-3:hover,
  .hover\:-translate-y-2:hover,
  .hover\:-translate-y-1:hover,
  .hover\:-translate-y-0\.5:hover {
    transform: none !important;
  }
}

/* 5. Breakpoint Optimizations: Small Mobile (< 480px) */
@media (max-width: 479px) {
  .container {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  .svc-outer-card {
    padding: 1.25rem !important;
    border-radius: 1rem !important;
  }

  .svc-feat-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  .tstm-page-card,
  .glass-card {
    padding: 1.25rem !important;
  }

  /* Prevent decorative floating blur elements from overflowing */
  .blur-\[120px\],
  .blur-\[100px\],
  .blur-\[80px\] {
    max-width: 280px !important;
    max-height: 280px !important;
  }
}

/* 6. Breakpoint Optimizations: Mobile / Tablet (< 768px) */
@media (max-width: 767px) {
  .svc-plan-hero {
    flex-direction: column !important;
  }

  .svc-plan-hero__art {
    width: 100% !important;
    height: 220px !important;
  }

  .grid-cols-2,
  .grid-cols-3,
  .grid-cols-4 {
    grid-template-columns: 1fr !important;
  }
}

/* 7. Breakpoint Optimizations: Tablet / Small Laptop (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {

  .grid-cols-3,
  .grid-cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 991px) {

  /* Keep timeline step nodes horizontal on mobile & tablet */
  .timeline-row {
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 0 10px !important;
    gap: 0 !important;
  }

  .timeline-svg-container {
    display: block !important;
    height: 60px !important;
    top: 50% !important;
  }
}

/* 8. Dedicated Mobile Reflow (< 768px): Convert Absolute & Rotated Stacks to Vertical Flow */
@media (max-width: 767px) {

  /* Timeline & Featured Card Absolute-to-Relative Conversion */
  .timeline-navigation-container {
    margin-top: 2rem !important;
    padding-left: 0 !important;
    align-items: center !important;
  }

  .featured-card {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 1.5rem 0 !important;
    transform: none !important;
  }

  /* Reset all stacked/fanned card rotations to zero */
  [class*="rotate-"],
  .transform[class*="rotate"] {
    transform: none !important;
  }

  /* Reposition breakout badges inside card bounds */
  .breakout-badge,
  .badge-breakout {
    position: relative !important;
    top: 0 !important;
    right: 0 !important;
    margin-bottom: 0.5rem !important;
    display: inline-block !important;
  }

  /* Fixed pixel container overrides */
  [style*="width: 668px"],
  [style*="width: 460px"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Liquid blob containment */
  .liquid-blob {
    max-width: 260px !important;
    max-height: 260px !important;
    filter: blur(50px) !important;
  }

  /* What Our Clients Say Card Mobile Position & Subtitle Gap Fix */
  .tstm-carousel-container {
    height: auto !important;
    min-height: 380px !important;
    overflow: visible !important;
    margin-top: 10rem !important;
    padding-top: 3rem !important;
  }

  .tstm-sub {
    font-size: clamp(0.68rem, 3.2vw, 0.88rem) !important;
    white-space: nowrap !important;
    letter-spacing: -0.02em !important;
    margin-bottom: 2rem !important;
  }

  .tstm-card {
    height: auto !important;
    min-height: auto !important;
    padding: 1.25rem 1rem !important;
    gap: 0.75rem !important;
  }

  .tstm-quote-text {
    font-size: 0.92rem !important;
    line-height: 1.4 !important;
    margin-bottom: 0.5rem !important;
  }

  .tstm-quote-mark {
    font-size: 2.8rem !important;
    top: -0.5rem !important;
    left: -0.25rem !important;
  }

  .tstm-stat {
    margin-bottom: 0.5rem !important;
    font-size: 0.75rem !important;
  }

  .tstm-proj-card {
    display: none !important;
  }

  .tstm-card__right {
    padding-top: 0.5rem !important;
    border-top: none !important;
  }

  /* Our Core Values Card Image Alignment & Size Mobile Fix */
  .value-card-item {
    margin-top: 5rem !important;
  }

  .value-card-icon-wrap {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 190px !important;
    height: 190px !important;
    top: -85px !important;
    transform: none !important;
  }

  .value-card-body {
    height: auto !important;
    min-height: 220px !important;
    padding-top: 75px !important;
  }

  /* Disable and hide 3D overlapping card deck on mobile */
  .s-scene,
  .s-card-stack {
    display: none !important;
  }
}

/* Light Theme Override: Protocol Level_02 Text Color */
html.light-theme .protocol-level-02,
html.light-theme #support-tiers .text-red-400 {
  color: #000000 !important;
}