/* ============================================================
   PHOENIX TECHNICAL SOLUTION — styles.css
   Typography System v2 — Fluid Clamp Scale | Spacious Layout
   Root: 17px → responsive | max-width: 1400px
============================================================ */

/* ── 0. CSS Custom Properties ─────────────────────────────── */
:root {
  /* Type Scale — fluid with clamp() */
  --text-xs:   clamp(0.75rem,  0.9vw,  0.875rem);
  --text-sm:   clamp(0.875rem, 1.0vw,  1rem);
  --text-base: clamp(1rem,     1.15vw, 1.125rem);
  --text-lg:   clamp(1.125rem, 1.3vw,  1.25rem);
  --text-xl:   clamp(1.25rem,  1.5vw,  1.5rem);
  --text-2xl:  clamp(1.5rem,   2vw,    1.875rem);
  --text-3xl:  clamp(1.875rem, 2.5vw,  2.25rem);
  --h3:        clamp(1.5rem,   3vw,    2rem);
  --h2:        clamp(2rem,     4vw,    3rem);
  --h1:        clamp(2.5rem,   5vw,    4rem);

  /* Spacing scale (8px base) */
  --sp-1:  0.5rem;    /* 8px  */
  --sp-2:  1rem;      /* 16px */
  --sp-3:  1.5rem;    /* 24px */
  --sp-4:  2rem;      /* 32px */
  --sp-5:  2.5rem;    /* 40px */
  --sp-6:  3rem;      /* 48px */
  --sp-8:  4rem;      /* 64px */
  --sp-10: 5rem;      /* 80px */
  --sp-14: 7rem;      /* 112px */

  /* Brand */
  --purple:    #6d1fa0;
  --purple-dk: #4a1070;
  --crimson:   #b6171e;
  --crimson-dk:#8c0f14;

  /* Radius */
  --r-sm:  0.75rem;
  --r-md:  1.125rem;
  --r-lg:  1.5rem;
  --r-xl:  1.875rem;
}

/* ── 1. Reset & Root ──────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: clamp(16px, 1.15vw, 18px);   /* fluid root — 16–18px */
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', sans-serif;
  font-size: var(--text-base);
  line-height: 1.75;
  letter-spacing: 0.01em;
  color: #2d3048;
  background: #fafafa;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }

::selection { background: rgba(109,31,160,0.15); color: #1a1c2e; }
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: #f5f5f7; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, var(--purple), var(--crimson));
  border-radius: 999px;
}

/* ── 2. Heading System ────────────────────────────────────── */
h1 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: var(--h1);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
h2 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: var(--h2);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
}
h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: var(--h3);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
h4 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: 1.35;
}

p { font-size: var(--text-base); line-height: 1.75; }

/* ── 3. Brand Utilities ───────────────────────────────────── */
.brand-gradient-text {
  background: linear-gradient(135deg, var(--purple) 0%, var(--crimson) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.brand-accent-line {
  width: 3.5rem; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, var(--purple), var(--crimson));
}

/* ── 4. Buttons ───────────────────────────────────────────── */
.btn-primary {
  display: inline-flex; align-items: center; gap: 0.625rem;
  padding: 0.875rem 2rem;
  border-radius: var(--r-sm);
  background: linear-gradient(135deg, var(--purple) 0%, var(--crimson) 100%);
  color: #fff; font-weight: 600; font-size: var(--text-base);
  font-family: 'Inter', sans-serif;
  text-decoration: none; cursor: pointer; border: none; white-space: nowrap;
  transition: opacity .25s, transform .25s, box-shadow .25s;
  box-shadow: 0 4px 20px rgba(109,31,160,.28);
}
.btn-primary:hover {
  opacity: .92; transform: translateY(-2px);
  box-shadow: 0 10px 32px rgba(109,31,160,.38);
}
.btn-primary:active { transform: translateY(0); }

.btn-outline {
  display: inline-flex; align-items: center; gap: 0.625rem;
  padding: 0.875rem 2rem; border-radius: var(--r-sm);
  background: transparent; color: #2d3048; font-weight: 600;
  font-size: var(--text-base); font-family: 'Inter', sans-serif;
  text-decoration: none; border: 1.5px solid #d4d4de; cursor: pointer; white-space: nowrap;
  transition: border-color .25s, color .25s, background .25s;
}
.btn-outline:hover {
  border-color: var(--purple); color: var(--purple);
  background: rgba(109,31,160,.04);
}

.btn-glass {
  display: inline-flex; align-items: center; gap: 0.625rem;
  padding: 0.875rem 2rem; border-radius: var(--r-sm);
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1.5px solid rgba(255,255,255,0.3);
  color: #fff; font-weight: 600; font-size: var(--text-base);
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background .25s, border-color .25s;
}
.btn-glass:hover { background: rgba(255,255,255,.25); border-color: rgba(255,255,255,.5); }

/* ── 5. Layout ────────────────────────────────────────────── */
/* Full-bleed container: 1400px max */
.container-wide {
  max-width: 87.5rem; /* 1400px */
  margin: 0 auto;
  padding: 0 var(--sp-5);
}
@media (min-width: 1024px) {
  .container-wide { padding: 0 var(--sp-8); }
}

/* Section spacing */
.section-pad {
  padding: var(--sp-10) 0;
}
@media (min-width: 1024px) {
  .section-pad { padding: var(--sp-14) 0; }
}

/* Section eyebrow pill */
.section-eyebrow {
  display: inline-flex; width: fit-content;
  font-size: var(--text-xs); font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  background: linear-gradient(135deg, rgba(109,31,160,.08), rgba(182,23,30,.08));
  border: 1px solid rgba(109,31,160,.15);
  padding: 0.375rem 1rem; border-radius: 999px; color: var(--purple);
}

/* Section heading block */
.section-header {
  margin-bottom: var(--sp-8);
}
.section-header .section-eyebrow {
  margin-bottom: var(--sp-2);
}
.section-header h2 {
  margin-bottom: var(--sp-2);
}
.section-header p {
  font-size: var(--text-lg);
  color: #5a5e7a;
  max-width: 42rem;
  line-height: 1.7;
}

/* ── 6. Navigation ────────────────────────────────────────── */
#navbar {
  background: transparent; border-bottom: 1px solid transparent;
  transition: background .35s, border-color .35s, box-shadow .35s;
}
#navbar.scrolled {
  background: rgba(250,250,250,0.96); backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom-color: #ebebf0; box-shadow: 0 2px 20px rgba(0,0,0,.06);
}
#navbar .inner { height: 4.75rem; } /* 76px */

/* Transparent state — white elements over hero */
#navbar:not(.scrolled) .nav-link { color: rgba(255,255,255,.8) !important; }
#navbar:not(.scrolled) .nav-link:hover { color: #fff !important; }
#navbar:not(.scrolled) .logo-text-main { color: #fff !important; }
#navbar:not(.scrolled) .logo-text-sub {
  background: linear-gradient(135deg,#e0a5ff,#ffb3b3);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
#navbar:not(.scrolled) .nav-call-link { color: rgba(255,255,255,.8) !important; }
#navbar:not(.scrolled) .nav-call-link:hover { color: #fff !important; }
#navbar:not(.scrolled) .ham-bar { background: rgba(255,255,255,.85); }

.logo-mark { transition: filter .3s; }
a:hover .logo-mark { filter: drop-shadow(0 0 6px rgba(109,31,160,.4)); }

.ham-bar {
  display: block; height: 2px; background: #2d3048; border-radius: 999px;
  transition: transform .3s, opacity .3s, width .3s, background .35s; width: 26px;
}
#hamburger-btn.open .ham-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
#hamburger-btn.open .ham-bar:nth-child(2) { opacity: 0; }
#hamburger-btn.open .ham-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); width: 26px; }

.mob-link {
  display: block; font-size: var(--text-lg); font-weight: 500; color: #2d3048;
  padding: 0.625rem 0; border-bottom: 1px solid #ebebf0;
  text-decoration: none; transition: color .2s;
}
.mob-link:hover { color: var(--purple); }

/* Active nav link — gradient underline pill */
.nav-link-active {
  color: var(--purple) !important;
  font-weight: 600 !important;
  position: relative;
}
.nav-link-active::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0; right: 0;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--purple), var(--crimson));
}
/* Keep visible even on transparent navbar */
#navbar:not(.scrolled) .nav-link-active {
  color: #fff !important;
}
#navbar:not(.scrolled) .nav-link-active::after {
  background: rgba(255,255,255,0.75);
}

/* Mobile active link */
.mob-link-active {
  color: var(--purple) !important;
  font-weight: 600 !important;
}

/* ── 7. Trust bar ─────────────────────────────────────────── */
.trust-item {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: var(--text-sm); font-weight: 600; color: #5a5e7a;
  letter-spacing: .01em; white-space: nowrap;
}

/* ── 8. Hero Slider ───────────────────────────────────────── */
.hero-slide {
  position: absolute; inset: 0; opacity: 0; transition: opacity 0.9s ease;
  z-index: 0; pointer-events: none;
}
.hero-slide.active { opacity: 1; z-index: 1; pointer-events: auto; }

.slide-overlay {
  position: absolute; inset: 0;
  background: 
    radial-gradient(circle at 50% 30%, rgba(109, 31, 160, 0.16) 0%, transparent 70%),
    linear-gradient(to bottom, rgba(13, 7, 24, 0.45) 0%, rgba(13, 7, 24, 0.75) 45%, rgba(8, 4, 15, 0.98) 100%);
  z-index: 2;
}

.slide-content {
  position: absolute; bottom: 9rem; left: 0; right: 0;
  z-index: 3; padding: 0 var(--sp-5); max-width: 60rem; margin: 0 auto;
  text-align: center;
}
.slide-content::before {
  content: '';
  position: absolute;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(32rem, 90vw);
  height: 18rem;
  background: radial-gradient(ellipse at center, rgba(156, 31, 173, 0.16) 0%, rgba(109, 31, 160, 0.05) 50%, transparent 75%);
  pointer-events: none;
  z-index: -1;
}
@media (max-width: 640px) { .slide-content { padding: 0 var(--sp-3); bottom: 11rem; } }

.slide-eyebrow {
  display: inline-block;
  font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  padding: 0.45rem 1.2rem; border-radius: 999px; margin-bottom: var(--sp-3);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.slide-h1 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: var(--h1);
  font-weight: 800; line-height: 1.08;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: var(--sp-2);
  letter-spacing: -0.03em;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.6), 0 2px 4px rgba(0, 0, 0, 0.4);
}
.slide-h1 span { color: #fff; }

.slide-sub {
  font-size: calc(var(--text-lg) * 1.05);
  color: rgba(255, 255, 255, 0.88); max-width: 38rem; margin: 0 auto;
  line-height: 1.65; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.65), 0 1px 3px rgba(0, 0, 0, 0.45);
}

.hero-nav-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 20; width: 3rem; height: 3rem; border-radius: 50%;
  background: rgba(255,255,255,.15); backdrop-filter: blur(12px);
  border: 1.5px solid rgba(255,255,255,.3); color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background .25s, border-color .25s, transform .25s;
}
.hero-nav-btn:hover {
  background: rgba(255,255,255,.28); border-color: rgba(255,255,255,.6);
  transform: translateY(-50%) scale(1.1);
}

.hero-dot {
  width: 0.55rem; height: 0.55rem; border-radius: 999px;
  background: rgba(255,255,255,.35); border: none; cursor: pointer;
  transition: background .3s, width .3s;
}
.hero-dot.active { background: #fff; width: 1.75rem; }

/* --- Hero Button Enhancements --- */
#hero .btn-primary {
  background: linear-gradient(135deg, #9c1fad 0%, #d946ef 55%, #b6171e 100%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 4px 20px rgba(156, 31, 173, 0.35), 0 0 0 1px rgba(156, 31, 173, 0.1);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

#hero .btn-primary:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 12px 35px rgba(217, 70, 239, 0.5), 0 0 25px rgba(156, 31, 173, 0.4);
}

#hero .btn-primary:active {
  transform: translateY(-1px) scale(0.99);
}

/* Arrow animation inside primary button */
#hero .btn-primary svg {
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

#hero .btn-primary:hover svg {
  transform: translateX(5px);
  animation: arrowPulse 1.2s ease-in-out infinite alternate;
}

@keyframes arrowPulse {
  0% { transform: translateX(5px) scale(1); }
  100% { transform: translateX(8px) scale(1.1); }
}

/* Refined Dark Glassmorphism for Secondary CTA */
#hero .btn-glass {
  background: rgba(15, 10, 25, 0.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

#hero .btn-glass:hover {
  background: rgba(15, 10, 25, 0.7);
  border-color: rgba(255, 255, 255, 0.35);
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

#hero .btn-glass:active {
  transform: translateY(-1px) scale(0.99);
}

/* ── 9. About ─────────────────────────────────────────────── */
.about-float-stat {
  position: absolute; top: 1.5rem; left: -1.25rem;
  background: #fff; border: 1px solid rgba(109,31,160,.15); border-radius: var(--r-md);
  padding: 1.1rem 1.4rem; box-shadow: 0 8px 32px rgba(109,31,160,.14);
  text-align: center;
}
@media (max-width: 640px) { .about-float-stat { left: 0.75rem; } }

.value-item {
  display: flex; align-items: flex-start; gap: 1rem;
  padding: 1rem 0; border-bottom: 1px solid #ebebf0;
}
.value-item:last-child { border-bottom: none; }
.value-icon {
  width: 2.5rem; height: 2.5rem; border-radius: 0.75rem;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}

/* ── 10. Services ─────────────────────────────────────────── */
.svc-card {
  position: relative; background: #fff; border: 1px solid #ebebf0;
  border-radius: var(--r-xl); overflow: hidden;
  transition: transform .35s, box-shadow .35s, border-color .35s;
}
.svc-card::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--purple), var(--crimson));
  transform: scaleX(0); transform-origin: left; transition: transform .35s;
}
.svc-card:hover::after { transform: scaleX(1); }
.svc-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 24px 56px rgba(109,31,160,.13);
  border-color: rgba(109,31,160,.18);
}

.svc-img-wrap {
  position: relative; width: 100%; height: 14rem; overflow: hidden; background: #f5f5f7;
}
.svc-img {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  transition: transform .6s ease;
}
.svc-card:hover .svc-img { transform: scale(1.07); }

.svc-img-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(109,31,160,.38) 0%, transparent 65%);
  transition: opacity .3s;
}
.svc-card:hover .svc-img-overlay { opacity: 0.65; }

.svc-body { padding: 1.5rem 1.6rem 1.8rem; }
.svc-num {
  font-family: 'Space Grotesk', sans-serif;
  font-size: var(--text-xs); font-weight: 800;
  letter-spacing: .2em; text-transform: uppercase;
  color: #9da1b8; display: block; margin-bottom: 0.5rem;
}
.svc-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: var(--text-xl); font-weight: 700;
  color: #1a1c2e; margin-bottom: 0.875rem; line-height: 1.3;
  transition: color .25s;
}
.svc-card:hover .svc-title { color: var(--purple); }
.svc-list { list-style: none; }
.svc-list li {
  font-size: var(--text-sm); color: #7a7e96;
  padding: 0.45rem 0 0.45rem 1.25rem;
  position: relative; line-height: 1.55;
  border-bottom: 1px solid #f5f5f7;
}
.svc-list li:last-child { border-bottom: none; }
.svc-list li::before {
  content: '→'; position: absolute; left: 0;
  color: var(--crimson); font-size: var(--text-xs); font-weight: 700;
}

/* ── 11. Product Showcase ─────────────────────────────────── */
.showcase-card {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid #ebebf0; background: #f5f5f7;
  min-height: 15rem;
  transition: box-shadow .35s, transform .35s;
}
.showcase-card:hover { box-shadow: 0 20px 48px rgba(109,31,160,.13); transform: translateY(-5px); }

.showcase-img {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  min-height: 15rem; transition: transform .6s ease;
}
.showcase-card:hover .showcase-img { transform: scale(1.05); }

.showcase-caption {
  position: absolute; bottom: 0; left: 0; right: 0; padding: 1.5rem 1.5rem 1.2rem;
  background: linear-gradient(to top, rgba(20,6,36,.88) 0%, rgba(20,6,36,.5) 65%, transparent 100%);
}
.showcase-tag {
  display: inline-block; font-size: var(--text-xs); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.78);
  background: rgba(109,31,160,.6); border-radius: 999px;
  padding: 0.25rem 0.75rem; margin-bottom: 0.5rem;
}
.showcase-title {
  font-family: 'Space Grotesk', sans-serif; font-size: var(--text-xl);
  font-weight: 700; color: #fff; line-height: 1.3; margin-bottom: 0.35rem;
}
.showcase-sub { font-size: var(--text-sm); color: rgba(255,255,255,.68); line-height: 1.5; }

/* Small product grid cards */
.showcase-card-sm {
  background: #fff; border: 1px solid #ebebf0; border-radius: var(--r-lg); overflow: hidden;
  transition: box-shadow .3s, transform .3s, border-color .3s;
}
.showcase-card-sm:hover {
  box-shadow: 0 12px 32px rgba(109,31,160,.11);
  transform: translateY(-5px); border-color: rgba(109,31,160,.18);
}
.showcase-img-sm-wrap {
  position: relative;
  width: 100%; aspect-ratio: 1 / 1; overflow: hidden;
  background: #f9f9fb; display: flex; align-items: center; justify-content: center;
  padding: 1.25rem;
}
.showcase-img-sm {
  width: 100%; height: 100%; object-fit: contain; object-position: center;
  transition: transform .5s ease;
}
.showcase-card-sm:hover .showcase-img-sm { transform: scale(1.09); }
.showcase-card-sm .card-label {
  padding: 0.875rem 1.1rem 1rem;
}
.showcase-card-sm .card-label p:first-child {
  font-size: var(--text-base); font-weight: 600; color: #1a1c2e; line-height: 1.35;
}
.showcase-card-sm .card-label p:last-child {
  font-size: var(--text-sm); color: #9da1b8; margin-top: 0.25rem;
}

/* ── 12. Why Choose Us ────────────────────────────────────── */
.why-panel {
  background: linear-gradient(135deg, #4a1070, #8c0f14);
  border-radius: var(--r-xl); padding: 2.25rem; color: #fff;
  box-shadow: 0 24px 64px rgba(109,31,160,.22);
}
.why-panel-header { display: flex; align-items: center; gap: 1rem; }
.why-panel-badge {
  width: 3rem; height: 3rem; border-radius: 0.875rem;
  background: rgba(255,255,255,.15);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.why-metric-card {
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--r-md); padding: 1.25rem; text-align: center; transition: background .3s;
}
.why-metric-card:hover { background: rgba(255,255,255,.15); }
.why-metric-card .metric-val {
  font-family: 'Space Grotesk', sans-serif;
  font-size: var(--text-3xl); font-weight: 800;
  background: linear-gradient(135deg, #e0a5ff, #ffb3b3);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  line-height: 1.1;
}
.why-metric-card .metric-label { font-size: var(--text-xs); color: rgba(255,255,255,.55); margin-top: 0.35rem; }

.adv-item { display: flex; align-items: flex-start; gap: 0.875rem; font-size: var(--text-base); line-height: 1.65; }
.adv-check {
  width: 1.75rem; height: 1.75rem; border-radius: 0.5rem;
  background: rgba(109,31,160,.1); border: 1px solid rgba(109,31,160,.2);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 0.15rem;
}

/* ── 13. Process ──────────────────────────────────────────── */
.process-step-card {
  background: #fff; border: 1px solid #ebebf0; border-radius: var(--r-lg);
  padding: 2rem 1.6rem; text-align: center; transition: transform .3s, box-shadow .3s;
}
.process-step-card:hover { transform: translateY(-6px); box-shadow: 0 16px 40px rgba(109,31,160,.1); }
.ps-number {
  width: 3.5rem; height: 3.5rem; border-radius: 50%;
  background: linear-gradient(135deg, var(--purple), var(--crimson)); color: #fff;
  font-family: 'Space Grotesk', sans-serif; font-weight: 800; font-size: var(--text-xl);
  display: flex; align-items: center; justify-content: center; margin: 0 auto 1.25rem;
  box-shadow: 0 8px 22px rgba(109,31,160,.28); transition: transform .3s, box-shadow .3s;
}
.process-step-card:hover .ps-number { transform: scale(1.12); box-shadow: 0 12px 32px rgba(109,31,160,.38); }
.ps-title { font-family: 'Space Grotesk', sans-serif; font-size: var(--text-lg); font-weight: 700; color: #1a1c2e; margin-bottom: 0.75rem; line-height: 1.35; }
.ps-body { font-size: var(--text-base); color: #9da1b8; line-height: 1.65; }

/* ── 14. Industries ───────────────────────────────────────── */
.ind-card {
  background: #fff; border: 1px solid #ebebf0; border-radius: var(--r-lg);
  padding: 2rem 1.5rem; text-align: center;
  transition: transform .3s, box-shadow .3s, border-color .3s; cursor: default;
}
.ind-card:hover { transform: translateY(-7px); box-shadow: 0 16px 40px rgba(109,31,160,.11); border-color: rgba(109,31,160,.22); }
.ind-icon-wrap {
  width: 4rem; height: 4rem; border-radius: 1rem;
  background: linear-gradient(135deg, rgba(109,31,160,.08), rgba(182,23,30,.06));
  border: 1px solid rgba(109,31,160,.12);
  display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem;
  transition: transform .3s, background .3s;
}
.ind-card:hover .ind-icon-wrap { transform: scale(1.1); background: linear-gradient(135deg, rgba(109,31,160,.15), rgba(182,23,30,.12)); }
.ind-title { font-family: 'Space Grotesk', sans-serif; font-size: var(--text-lg); font-weight: 700; color: #1a1c2e; margin-bottom: 0.625rem; line-height: 1.3; transition: color .25s; }
.ind-card:hover .ind-title { color: var(--purple); }
.ind-body { font-size: var(--text-sm); color: #9da1b8; line-height: 1.6; }

/* ── 15. Testimonials ─────────────────────────────────────── */
.testi-card {
  background: #fff; border: 1px solid #ebebf0; border-radius: var(--r-xl); padding: 2.5rem;
  box-shadow: 0 8px 28px rgba(109,31,160,.07); max-width: 46rem; margin: 0 auto;
}
.testi-quote {
  font-family: 'Space Grotesk', sans-serif; font-size: 5rem; font-weight: 900; line-height: 1; margin-bottom: 0.75rem;
  background: linear-gradient(135deg, var(--purple), var(--crimson));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.testi-body { font-size: var(--text-lg); color: #5a5e7a; line-height: 1.75; margin-bottom: 1.5rem; }
.testi-author { display: flex; align-items: center; gap: 0.875rem; }
.testi-avatar {
  width: 3rem; height: 3rem; border-radius: 50%;
  background: linear-gradient(135deg, var(--purple), var(--crimson)); color: #fff;
  font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: var(--text-sm);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.testi-name { font-weight: 600; font-size: var(--text-base); color: #1a1c2e; }
.testi-company { font-size: var(--text-sm); color: #9da1b8; }
.testi-btn {
  width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 1.5px solid #d4d4de;
  background: #fff; color: #5a5e7a; display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: border-color .25s, color .25s, background .25s;
}
.testi-btn:hover { border-color: var(--purple); color: var(--purple); background: rgba(109,31,160,.04); }
.testi-dot {
  width: 0.55rem; height: 0.55rem; border-radius: 50%; border: none;
  background: #d4d4de; cursor: pointer; transition: background .25s, transform .25s;
}
.testi-dot.active { background: linear-gradient(135deg, var(--purple), var(--crimson)); transform: scale(1.35); }

/* ── 16. FAQ ──────────────────────────────────────────────── */
.faq-item {
  border: 1px solid #ebebf0; border-radius: var(--r-md);
  background: #fff; overflow: hidden; transition: box-shadow .2s;
}
.faq-item.open { box-shadow: 0 8px 24px rgba(109,31,160,.09); border-color: rgba(109,31,160,.22); }
.faq-question {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.3rem 1.5rem; background: none; border: none; cursor: pointer;
  font-family: 'Space Grotesk', sans-serif; font-weight: 600;
  font-size: var(--text-base); color: #1a1c2e; text-align: left; transition: color .2s;
}
.faq-question:hover { color: var(--purple); }
.faq-arrow { transition: transform .3s ease; color: #9da1b8; }
.faq-item.open .faq-arrow { transform: rotate(180deg); color: var(--purple); }
.faq-item.open .faq-question { color: var(--purple); }
.faq-answer {
  max-height: 0; overflow: hidden;
  transition: max-height .4s cubic-bezier(0.16,1,0.3,1), padding .3s;
  font-size: var(--text-base); color: #7a7e96; line-height: 1.75; padding: 0 1.5rem;
}
.faq-item.open .faq-answer { max-height: 20rem; padding: 0 1.5rem 1.25rem; }

/* ── 17. Contact ──────────────────────────────────────────── */
.contact-info-card {
  background: #fff; border: 1px solid #ebebf0; border-radius: var(--r-xl); padding: 1.75rem;
  box-shadow: 0 6px 20px rgba(109,31,160,.06);
}
.rep-avatar {
  width: 3.25rem; height: 3.25rem; border-radius: 50%;
  background: linear-gradient(135deg, var(--purple), var(--crimson)); color: #fff;
  font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: var(--text-lg);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.contact-row { display: flex; gap: 0.875rem; }
.contact-form {
  background: #fff; border: 1px solid #ebebf0; border-radius: var(--r-xl); padding: 2.5rem;
  box-shadow: 0 8px 32px rgba(109,31,160,.07);
}
.form-group { display: flex; flex-direction: column; gap: 0.375rem; }
.form-label {
  font-size: var(--text-xs); font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: #9da1b8;
}
.form-input {
  width: 100%; padding: 0.875rem 1rem; border-radius: 0.75rem;
  border: 1.5px solid #ebebf0; background: #fafafa;
  font-size: var(--text-base); font-family: 'Inter', sans-serif;
  color: #1a1c2e; outline: none;
  transition: border-color .25s, box-shadow .25s, background .25s; appearance: none;
}
.form-input::placeholder { color: #c0c4d8; }
.form-input:focus { border-color: var(--purple); background: #fff; box-shadow: 0 0 0 3px rgba(109,31,160,.1); }
.form-input.err { border-color: var(--crimson); box-shadow: 0 0 0 3px rgba(182,23,30,.1); }

/* Underline form inputs for contact card */
.form-group-line { display: flex; flex-direction: column; position: relative; }
.form-label-line {
  font-size: 0.75rem; font-weight: 600; color: #9da1b8;
  transition: color 0.3s; pointer-events: none;
}
.form-input-line {
  width: 100%; border: none; border-bottom: 2px solid #ebebf0;
  padding: 0.5rem 0; font-size: 1rem; color: #1a1c2e; font-family: 'Inter', sans-serif;
  background: transparent; outline: none; transition: border-color 0.3s;
  border-radius: 0;
}
.form-input-line::placeholder { color: #9da1b8; font-weight: 500; font-size: 0.95rem; }
.form-input-line:focus { border-bottom-color: var(--purple); }
.form-group-line:focus-within .form-label-line { color: var(--purple); }

/* ── 18. Footer ───────────────────────────────────────────── */
.footer-heading {
  font-family: 'Space Grotesk', sans-serif; font-size: var(--text-xs);
  font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255,255,255,.42); margin-bottom: 1.125rem;
}
.footer-link {
  display: block; font-size: var(--text-base);
  color: rgba(255,255,255,.52); text-decoration: none; transition: color .2s;
}
.footer-link:hover { color: rgba(255,255,255,.92); }
.footer-social-btn {
  width: 2.25rem; height: 2.25rem; border-radius: 0.55rem;
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.42); display: flex; align-items: center; justify-content: center;
  text-decoration: none; transition: color .2s, border-color .2s, background .2s;
}
.footer-social-btn:hover { color: #fff; border-color: rgba(255,255,255,.34); background: rgba(255,255,255,.09); }

/* ── 19. Scroll Reveal ────────────────────────────────────── */
.reveal {
  opacity: 0; transform: translateY(1.5rem);
  transition: opacity .7s cubic-bezier(0.16,1,0.3,1), transform .7s cubic-bezier(0.16,1,0.3,1);
}
.reveal.visible { opacity: 1; transform: none; }
.reveal:nth-child(2) { transition-delay: .08s; }
.reveal:nth-child(3) { transition-delay: .16s; }
.reveal:nth-child(4) { transition-delay: .24s; }
.reveal:nth-child(5) { transition-delay: .32s; }
.reveal:nth-child(6) { transition-delay: .40s; }

/* ── 20. Reduced motion ───────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ════════════════════════════════════════════════════════════
   21. MOBILE OPTIMIZATIONS  (max-width: 768px)
   Desktop layout (min-width: 1024px) is untouched.
   All changes scoped here — additive only.
════════════════════════════════════════════════════════════ */

/* ── Scrollbar hide utility (mobile carousels) ───────────── */
.scroll-snap-x {
  display: flex;
  overflow-x: auto;
  gap: 1rem;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 1rem; /* space for momentum scroll */
}
.scroll-snap-x::-webkit-scrollbar { display: none; }
.scroll-snap-x { scrollbar-width: none; -ms-overflow-style: none; }

.snap-card {
  flex: 0 0 80%;
  scroll-snap-align: start;
}

@media (max-width: 768px) {

  /* ── Container padding ─────────────────────────────────── */
  .container-wide {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  /* ── Section spacing ───────────────────────────────────── */
  .section-pad { padding: 3.5rem 0; }

  /* ── Section headers ───────────────────────────────────── */
  .section-header { margin-bottom: 2rem; }
  .section-header h2 { font-size: clamp(1.6rem, 6vw, 2.2rem); }
  .section-header p { font-size: 1rem; }

  /* ── Touch targets — all interactive elements min 44px ── */
  .btn-primary,
  .btn-outline,
  .btn-glass {
    min-height: 44px;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    width: 100%;
    justify-content: center;
  }

  .hero-nav-btn { width: 2.75rem; height: 2.75rem; }
  .testi-btn    { width: 2.75rem; height: 2.75rem; }

  /* ── Navbar (mobile) ───────────────────────────────────── */
  #navbar .inner { height: 3.75rem; }
  /* Ensure always a readable bg on mobile regardless of scroll */
  #navbar:not(.scrolled) {
    background: rgba(10, 5, 20, 0.45);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom-color: rgba(255,255,255,0.08);
  }

  /* ═══════════════════════════════════════════════════════════
     MOBILE HERO — Vertically centered, Apple/Stripe style
  ═══════════════════════════════════════════════════════════ */

  /* Hero height & flex layout */
  #hero {
    min-height: 90vh;
    min-height: 90svh;
  }

  /* Each slide becomes a flex column, centered */
  .hero-slide {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0;
  }

  /* Darker, stronger overlay for mobile readability */
  .slide-overlay {
    background: linear-gradient(
      to bottom,
      rgba(15, 8, 28, 0.45) 0%,
      rgba(12, 6, 22, 0.72) 55%,
      rgba(8, 4, 15, 0.98) 100%
    );
  }

  /* Content block: shifted upward, full width */
  .slide-content {
    position: absolute;
    bottom: auto;                    /* cancel desktop bottom positioning */
    top: 40%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    padding: 0 1.375rem;
    text-align: center;
    margin: 0 auto;
    max-width: 100%;
    /* Fade-in animation */
    animation: heroFadeUp 0.7s ease both;
  }

  @keyframes heroFadeUp {
    from { opacity: 0; transform: translateY(calc(-50% + 1.5rem)); }
    to   { opacity: 1; transform: translateY(-50%); }
  }

  /* Eyebrow pill — smaller on mobile */
  .slide-eyebrow {
    font-size: 0.65rem;
    letter-spacing: 0.12em;
    padding: 0.35rem 0.9rem;
    margin-bottom: 1.125rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.06);
  }

  /* H1 — bold and prominent */
  .slide-h1 {
    font-size: clamp(1.8rem, 7vw, 2.5rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.03em;
    margin-bottom: 1rem;
    color: #fff;
    text-shadow: 0 3px 15px rgba(0, 0, 0, 0.65), 0 1px 3px rgba(0, 0, 0, 0.4);
  }
  .slide-h1 br { display: none; }   /* remove forced line breaks */

  /* Subtitle — slimmer, max 2 lines */
  .slide-sub {
    font-size: 0.95rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.82);
    max-width: 26rem;
    margin: 0 auto;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6), 0 1px 2px rgba(0, 0, 0, 0.4);
  }

  /* ── Arrow buttons: hidden on mobile (swipe instead) ──── */
  #slider-prev,
  #slider-next {
    display: none;
  }

  /* ── Dots: repositioned and slightly larger touch targets */
  #hero .absolute.bottom-8 {
    bottom: 1.25rem;
    gap: 0.5rem;
  }
  .hero-dot {
    width: 0.5rem; height: 0.5rem;
    min-width: 44px; min-height: 44px;
    /* Large invisible tap region, small visual dot */
    background: clip-padding;
    padding: 1.1rem;
    border-radius: 50%;
    background-clip: content-box;
    background-color: rgba(255,255,255,0.35);
  }
  .hero-dot.active {
    background-color: #fff;
    width: 1.5rem;
    min-width: 44px;
    border-radius: 999px;
  }

  /* ── CTA bar — removed from separate floating div,
     integrated into slide-content via CSS reposition ─── */
  #hero .absolute.bottom-20 {
    /* Move CTA block below the centered text block */
    bottom: 6rem;
    top: auto;
    left: 0;
    right: 0;
    padding: 0 1.375rem;
  }
  #hero .absolute.bottom-20 .flex {
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    max-width: 22rem;
    margin: 0 auto;
  }

  /* Primary CTA — compact auto-width, gradient pill */
  #hero .btn-primary {
    width: auto !important;
    padding: 13px 32px;
    border-radius: 9px;
    font-size: 15px;
    font-weight: 600;
    min-height: 44px;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 6px 22px rgba(156, 31, 173, 0.42), 0 0 12px rgba(156, 31, 173, 0.2);
    flex-direction: row;
    white-space: nowrap;
  }

  /* Secondary / glass button — compact glassmorphism */
  #hero .btn-glass {
    width: auto !important;
    padding: 12px 30px;
    border-radius: 9px;
    font-size: 15px;
    font-weight: 500;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(15, 10, 25, 0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    min-height: 44px;
    justify-content: center;
    gap: 8px;
    flex-direction: row;
    white-space: nowrap;
    color: #fff;
  }

  /* ── Trust bar ─────────────────────────────────────────── */
  .trust-item { font-size: 0.8rem; }

  /* ── About section ─────────────────────────────────────── */
  #about .grid { gap: 2.5rem; }
  #about .h-\[480px\] { height: 280px; } /* shorter photo on mobile */

  .about-float-stat {
    top: 1rem; left: 0.75rem;
    padding: 0.75rem 1rem;
  }
  .about-float-stat div:first-child { font-size: 1.75rem; }

  /* ── Services — horizontal scroll carousel ─────────────── */
  #services .grid {
    display: flex;
    overflow-x: auto;
    gap: 1rem;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 1rem;
    /* Reach past container on mobile */
    margin-left: -1.25rem;
    margin-right: -1.25rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
  #services .grid::-webkit-scrollbar { display: none; }
  #services .grid .svc-card {
    flex: 0 0 82%;
    scroll-snap-align: start;
  }
  .svc-img-wrap { height: 11rem; }

  /* ── Why Us — stack ────────────────────────────────────── */
  #why-us .grid { gap: 2rem; }
  .why-panel { padding: 1.5rem; }
  .why-metric-card { padding: 1rem; }
  .why-metric-card .metric-val { font-size: 1.75rem; }

  /* ── Process — horizontal scroll carousel ──────────────── */
  #process .grid {
    display: flex;
    overflow-x: auto;
    gap: 1rem;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 1rem;
    margin-left: -1.25rem;
    margin-right: -1.25rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
  #process .grid::-webkit-scrollbar { display: none; }
  #process .grid .process-step-card {
    flex: 0 0 78%;
    scroll-snap-align: start;
  }
  /* Hide the desktop connector line on mobile */
  #process .hidden.lg\:block { display: none !important; }

  /* ── Industries — horizontal scroll carousel ────────────── */
  #industries .grid {
    display: flex;
    overflow-x: auto;
    gap: 1rem;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 1rem;
    margin-left: -1.25rem;
    margin-right: -1.25rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
  #industries .grid::-webkit-scrollbar { display: none; }
  #industries .grid .ind-card {
    flex: 0 0 72%;
    scroll-snap-align: start;
  }

  /* ── Product Showcase ──────────────────────────────────── */

  /* Feature top row — stacked */
  #showcase .grid.grid-cols-1.md\:grid-cols-3 {
    display: flex;
    overflow-x: auto;
    gap: 1rem;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 1rem;
    margin-left: -1.25rem;
    margin-right: -1.25rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
  #showcase .grid.grid-cols-1.md\:grid-cols-3::-webkit-scrollbar { display: none; }
  #showcase .grid.grid-cols-1.md\:grid-cols-3 > * {
    flex: 0 0 86%;
    scroll-snap-align: start;
    min-height: 260px;
  }
  /* Override md:col-span-2 on mobile — equal width */
  #showcase .md\:col-span-2 { flex: 0 0 86% !important; }

  .showcase-img { min-height: 260px; }

  /* Middle row (4-col) — horizontal scroll */
  #showcase .grid.grid-cols-2.md\:grid-cols-4 {
    display: flex;
    overflow-x: auto;
    gap: 1rem;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 1rem;
    margin-left: -1.25rem;
    margin-right: -1.25rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
  #showcase .grid.grid-cols-2.md\:grid-cols-4::-webkit-scrollbar { display: none; }
  #showcase .grid.grid-cols-2.md\:grid-cols-4 > * {
    flex: 0 0 48%;
    scroll-snap-align: start;
  }

  /* Row 3 (3-col sonicator etc) — horizontal scroll */
  #showcase .grid.grid-cols-1.sm\:grid-cols-3 {
    display: flex;
    overflow-x: auto;
    gap: 1rem;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 1rem;
    margin-left: -1.25rem;
    margin-right: -1.25rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
  #showcase .grid.grid-cols-1.sm\:grid-cols-3::-webkit-scrollbar { display: none; }
  #showcase .grid.grid-cols-1.sm\:grid-cols-3 > * {
    flex: 0 0 72%;
    scroll-snap-align: start;
  }

  /* ── Testimonials ──────────────────────────────────────── */
  .testi-card { padding: 1.5rem; }
  .testi-quote { font-size: 3rem; }
  .testi-body { font-size: 0.95rem; }

  /* ── FAQ ───────────────────────────────────────────────── */
  .faq-question { font-size: 0.9rem; padding: 1rem 1.25rem; }
  .faq-answer { font-size: 0.875rem; padding: 0 1.25rem; }
  .faq-item.open .faq-answer { padding: 0 1.25rem 1rem; }

  /* ── Contact ───────────────────────────────────────────── */
  .contact-form { padding: 1.5rem; }
  .contact-info-card { padding: 1.25rem; }

  /* Stacked contact grid */
  #contact .lg\:grid-cols-2 {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  /* ── Footer ────────────────────────────────────────────── */
  #footer .grid { gap: 2.5rem; }
  .footer-link { padding: 0.25rem 0; } /* easier tap targets */

  /* ── Scroll indicator dots (visual hint for carousels) ── */
  .carousel-hint {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    justify-content: center;
    margin-top: 0.75rem;
    font-size: 0.72rem;
    color: #9da1b8;
    font-weight: 500;
    letter-spacing: 0.04em;
  }
  .carousel-hint svg { width: 14px; height: 14px; opacity: 0.6; }

} /* end @media (max-width: 768px) */

/* ── Extra small (max-width: 480px) ─────────────────────── */
@media (max-width: 480px) {
  /* Hero: CTA bar lower, heading even larger for impact */
  #hero .absolute.bottom-20 { bottom: 5rem; padding: 0 1.125rem; }
  #hero .absolute.bottom-20 .flex { max-width: 100%; align-items: center; }
  #hero .btn-primary, #hero .btn-glass { width: auto !important; }
  .slide-h1 { font-size: clamp(1.65rem, 8vw, 2.1rem); }
  .slide-sub { font-size: 0.85rem; }

  /* Service cards slightly wider on tiny screens */
  #services .grid .svc-card { flex: 0 0 90%; }
  #process .grid .process-step-card { flex: 0 0 88%; }

  /* 1-card-wide for feature images */
  #showcase .grid.grid-cols-1.md\:grid-cols-3 > * { flex: 0 0 92%; }

  /* Product grid — 1 card at a time */
  #showcase .grid.grid-cols-2.md\:grid-cols-4 > * { flex: 0 0 72%; }
}

/* ============================================================
   22. INTERACTIVE SERVICE CARD POPUP SYSTEM
   ============================================================ */

/* --- Interactive Card Hover System --- */
.interactive-card {
  cursor: pointer;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
              box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
              border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.interactive-card:hover {
  transform: translateY(-8px) scale(1.02) !important;
  box-shadow: 0 20px 45px rgba(109, 31, 160, 0.2), 
              0 0 0 1px var(--purple), 
              0 0 20px rgba(109, 31, 160, 0.25) !important;
  border-color: var(--purple) !important;
}

.interactive-card:active {
  transform: translateY(-4px) scale(1.0) !important;
}

/* Ensure inner images transition smoothly */
.interactive-card .svc-img,
.interactive-card .showcase-img,
.interactive-card .showcase-img-sm {
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.interactive-card:hover .svc-img,
.interactive-card:hover .showcase-img {
  transform: scale(1.08) !important;
}

.interactive-card:hover .showcase-img-sm {
  transform: scale(1.12) !important;
}

/* --- Popup Overlay & Backdrop --- */
.popup-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(8, 4, 15, 0.65);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.popup-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

/* --- Popup Modal Container --- */
.popup-modal {
  position: relative;
  width: 100%;
  max-width: 860px;
  max-height: min(650px, 88vh); /* Keep the modal within the viewport height */
  background: rgba(15, 10, 25, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--r-xl);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  overflow: hidden;
  display: grid;
  grid-template-cols: 1.1fr 1.3fr;
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  color: #fff;
}

.popup-overlay.active .popup-modal {
  opacity: 1;
  transform: scale(1);
}

/* --- Close Button --- */
.popup-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 10;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.popup-close svg {
  width: 14px;
  height: 14px;
}

.popup-close:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff;
  transform: rotate(90deg);
}

/* --- Layout Elements --- */
.popup-left {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0; /* Let column size itself relative to grid */
  overflow: hidden;
}

.popup-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.popup-img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, transparent, rgba(15, 10, 25, 0.85) 95%), 
              linear-gradient(to top, rgba(15, 10, 25, 0.6), transparent);
}

.popup-right {
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0; /* Extremely critical: allows grid item to shrink below content height so it scrolls */
  overflow: hidden; /* Hide outer overflow, scroll internally */
}

/* Internal body scroll wrapper inside the right column */
.popup-right > div:first-child {
  overflow-y: auto;
  flex: 1;
  padding-right: 0.75rem;
  margin-bottom: 1.5rem;
  min-height: 0;
  
  /* Custom dark premium scrollbar */
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.15) rgba(255, 255, 255, 0.03);
}

.popup-right > div:first-child::-webkit-scrollbar {
  width: 6px;
}

.popup-right > div:first-child::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 10px;
}

.popup-right > div:first-child::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 10px;
}

.popup-right > div:first-child::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* --- Typography --- */
.popup-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: var(--text-2xl);
  font-weight: 700;
  margin-bottom: 0.75rem;
  background: linear-gradient(135deg, #e0a5ff 0%, #ffb3b3 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.25;
}

.popup-desc {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.65;
  margin-bottom: 1.25rem;
}

.popup-features-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 0.75rem;
}

.popup-features-list {
  list-style: none;
  margin-bottom: 1.25rem;
}

.popup-features-list li {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.85);
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
  line-height: 1.5;
}

.popup-features-list li::before {
  content: '✓';
  color: #ffb3b3;
  font-weight: bold;
  flex-shrink: 0;
  text-shadow: 0 0 8px rgba(255, 179, 179, 0.4);
}

/* --- Meta / Support Box --- */
.popup-meta-box {
  padding: 0.875rem 1rem;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 1.5rem;
}

.popup-meta-title {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  tracking-wider;
  color: rgba(255, 255, 255, 0.45);
  letter-spacing: 0.1em;
}

.popup-meta-value {
  font-size: var(--text-sm);
  color: #e0a5ff;
  font-weight: 500;
  margin-top: 0.15rem;
}

/* --- CTA Action Buttons --- */
.popup-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.popup-btn-enquire {
  flex: 1 1 auto;
  background: linear-gradient(135deg, var(--purple) 0%, var(--crimson) 100%);
  color: #fff;
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  border-radius: var(--r-sm);
  text-align: center;
  border: none;
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: 0 4px 15px rgba(109, 31, 160, 0.3);
}

.popup-btn-enquire:hover {
  opacity: 0.95;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(109, 31, 160, 0.45);
}

.popup-btn-call {
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  border-radius: var(--r-sm);
  text-align: center;
  text-decoration: none;
  transition: all 0.3s;
}

.popup-btn-call:hover {
  border-color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.08);
  transform: translateY(-2px);
}

.popup-btn-wa {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: #25d366;
  color: #fff;
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  border-radius: var(--r-sm);
  text-align: center;
  text-decoration: none;
  border: none;
  transition: all 0.3s;
  box-shadow: 0 4px 15px rgba(37, 211, 102, 0.25);
}

.popup-btn-wa:hover {
  background: #20ba5a;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.4);
}

.popup-btn-wa svg {
  width: 16px;
  height: 16px;
}

/* --- Mobile Responsiveness --- */
@media (max-width: 768px) {
  .popup-overlay {
    padding: 1rem;
    overflow-y: auto;
  }
  
  .popup-modal {
    grid-template-cols: 1fr;
    max-height: calc(100vh - 2rem);
    max-width: 480px;
    border-radius: var(--r-lg);
  }
  
  .popup-left {
    min-height: 180px;
    height: 180px;
  }
  
  .popup-img-overlay {
    background: linear-gradient(to top, rgba(15, 10, 25, 0.85) 90%, transparent), 
                linear-gradient(to right, rgba(15, 10, 25, 0.4), transparent);
  }
  
  .popup-right {
    padding: 1.5rem;
    height: auto;
    max-height: calc(100vh - 2rem - 180px);
  }
  
  .popup-title {
    font-size: var(--text-xl);
    margin-bottom: 0.5rem;
  }
  
  .popup-desc {
    margin-bottom: 1rem;
  }
  
  .popup-features-list {
    margin-bottom: 1rem;
  }
  
  .popup-meta-box {
    margin-bottom: 1.25rem;
    padding: 0.75rem;
  }
  
  .popup-actions {
    flex-direction: column;
    gap: 0.5rem;
  }
  
  .popup-actions a, .popup-actions button {
    width: 100%;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* ── 22. UNIVERSAL INTERACTIVE CARD STYLING ───────────────── */
.interactive-card {
  cursor: pointer !important;
  position: relative;
}

/* Elegant glass interactive indicator tag */
.interactive-card .svc-img-wrap::after,
.interactive-card .showcase-img-sm-wrap::after,
.interactive-card .card-img-wrap::after,
.interactive-card.showcase-card::after {
  content: '🔍 View Details';
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  background: rgba(15, 22, 33, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.4rem 0.8rem;
  border-radius: 50px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  z-index: 10;
}

/* Position details pill for showcase cards at the top-right */
.interactive-card.showcase-card::after {
  bottom: auto;
  top: 1.5rem;
  right: 1.5rem;
}

.interactive-card:hover .svc-img-wrap::after,
.interactive-card:hover .showcase-img-sm-wrap::after,
.interactive-card:hover .card-img-wrap::after,
.interactive-card:hover.showcase-card::after {
  opacity: 1;
  transform: translateY(0);
}

/* Accent glow and borders on hover for interactive cards */
.interactive-card.svc-card:hover {
  border-color: rgba(109, 31, 160, 0.3) !important;
  box-shadow: 0 20px 48px rgba(109, 31, 160, 0.18), 0 0 0 1px rgba(109, 31, 160, 0.1) !important;
}

.interactive-card.showcase-card:hover {
  border-color: rgba(109, 31, 160, 0.3) !important;
  box-shadow: 0 20px 48px rgba(109, 31, 160, 0.18), 0 0 0 1px rgba(109, 31, 160, 0.1) !important;
}

.interactive-card.showcase-card-sm:hover {
  border-color: rgba(109, 31, 160, 0.3) !important;
  box-shadow: 0 16px 36px rgba(109, 31, 160, 0.15), 0 0 0 1px rgba(109, 31, 160, 0.1) !important;
}

.interactive-card.product-card:hover {
  border-color: rgba(109, 31, 160, 0.3) !important;
  box-shadow: 0 20px 48px rgba(109, 31, 160, 0.18), 0 0 0 1px rgba(109, 31, 160, 0.1) !important;
}

/* ── 23. Skip link & focus ────────────────────────────────── */
.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  z-index: 9999;
  padding: 0.75rem 1.25rem;
  background: var(--purple);
  color: #fff;
  font-weight: 600;
  border-radius: var(--r-sm);
  text-decoration: none;
}
.skip-link:focus {
  left: 1rem;
  top: 1rem;
}
:focus-visible {
  outline: 2px solid var(--purple);
  outline-offset: 2px;
}

/* ── 24. Sticky mobile CTA ─────────────────────────────────── */
.sticky-mobile-cta {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 45;
  padding: 0.65rem 1rem calc(0.65rem + env(safe-area-inset-bottom, 0px));
  background: rgba(250, 250, 250, 0.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid #ebebf0;
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.08);
  gap: 0.5rem;
}
@media (max-width: 1023px) {
  .sticky-mobile-cta { display: flex; }
  body.has-sticky-cta { padding-bottom: 4.5rem; }
}
.sticky-mobile-cta a {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 44px;
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: var(--r-sm);
  text-decoration: none;
  transition: transform 0.2s, opacity 0.2s;
}
.sticky-cta-call {
  background: #fff;
  color: var(--purple);
  border: 1.5px solid rgba(109, 31, 160, 0.25);
}
.sticky-cta-wa {
  background: #25d366;
  color: #fff;
}
.sticky-cta-quote {
  background: linear-gradient(135deg, var(--purple), var(--crimson));
  color: #fff;
}

/* ── 25. Form feedback ─────────────────────────────────────── */
.form-feedback {
  margin-top: 1rem;
  padding: 1rem 1.25rem;
  border-radius: var(--r-sm);
  font-size: var(--text-sm);
  font-weight: 500;
  text-align: center;
  border: 1px solid transparent;
}
.form-feedback--success {
  background: #ecfdf5;
  color: #047857;
  border-color: #a7f3d0;
}
.form-feedback--error {
  background: #fef2f2;
  color: #b91c1c;
  border-color: #fecaca;
}
.form-input.err,
.input-group input.err,
.input-group select.err,
.input-group textarea.err {
  border-color: #b6171e !important;
  box-shadow: 0 0 0 3px rgba(182, 23, 30, 0.12) !important;
}

/* ── 26. Industrial contact section ───────────────────────── */
.industrial-contact-section {
  padding: 7.5rem 1.25rem;
  background: #f6f8fb;
}
.industrial-contact-wrapper {
  max-width: 1200px;
  margin: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.08);
  background: #fff;
}
.industrial-contact-info {
  padding: 4.5rem 3.5rem;
  background: linear-gradient(135deg, #111827, #5d128c 55%, #d62828);
  color: #fff;
  position: relative;
}
.industrial-contact-info h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.15;
  margin-bottom: 1.25rem;
}
.industrial-contact-info h2 span { color: #fbbf24; }
.industrial-contact-info > p {
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.8;
  margin-bottom: 2rem;
}
.trust-points {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 2rem;
}
.trust-points .trust-item {
  padding: 0.5rem 1rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 0.875rem;
}
.contact-details { margin-top: 2rem; display: flex; flex-direction: column; gap: 1.5rem; }
.contact-detail { display: flex; gap: 1rem; align-items: flex-start; }
.icon-box {
  width: 3rem; height: 3rem; min-width: 3rem;
  border-radius: 1rem;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  font-size: 1.25rem;
}
.contact-detail h4 { margin-bottom: 0.35rem; font-size: 1rem; }
.contact-detail a, .contact-detail p {
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  line-height: 1.6;
}
.industrial-form-card { padding: 4.5rem 3.5rem; background: #fff; }
.form-heading .small-text {
  color: var(--purple);
  font-weight: 700;
  letter-spacing: 0.08em;
  font-size: 0.8rem;
  text-transform: uppercase;
}
.form-heading h3 {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
  color: #111827;
}
.form-heading p { color: #5b6475; line-height: 1.7; margin-bottom: 2rem; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.input-group { margin-bottom: 1.25rem; }
.input-group label {
  display: block;
  margin-bottom: 0.5rem;
  color: #111827;
  font-weight: 600;
  font-size: 0.9rem;
}
.input-group input,
.input-group select,
.input-group textarea {
  width: 100%;
  border: 1px solid #e5e7eb;
  border-radius: 1rem;
  padding: 0.9rem 1rem;
  font-size: 0.95rem;
  transition: border-color 0.25s, box-shadow 0.25s;
  background: #fff;
  outline: none;
  font-family: inherit;
}
.input-group input:focus,
.input-group select:focus,
.input-group textarea:focus {
  border-color: var(--purple);
  box-shadow: 0 0 0 4px rgba(109, 31, 160, 0.08);
}
.industrial-submit-btn {
  width: 100%;
  border: none;
  padding: 1rem;
  border-radius: 1rem;
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  transition: transform 0.3s, box-shadow 0.3s;
  background: linear-gradient(135deg, #5d128c, #d62828);
  box-shadow: 0 12px 32px rgba(93, 18, 140, 0.25);
  font-family: inherit;
}
.industrial-submit-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(93, 18, 140, 0.35);
}
.industrial-submit-btn:disabled { opacity: 0.7; cursor: not-allowed; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 1100px) {
  .industrial-contact-wrapper { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .industrial-contact-info,
  .industrial-form-card { padding: 2.5rem 1.5rem; }
  .form-grid { grid-template-columns: 1fr; }
}

/* ── 27. Legal pages ───────────────────────────────────────── */
.legal-prose h2 {
  font-size: var(--text-xl);
  margin: 2rem 0 0.75rem;
  color: #1a1c2e;
}
.legal-prose p, .legal-prose li {
  color: #5a5e7a;
  margin-bottom: 1rem;
  line-height: 1.75;
}
.legal-prose a { color: var(--purple); text-decoration: underline; }

/* ── 28. Hero image CLS ────────────────────────────────────── */
.hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}