/* CSS Design System for E.R. Alcera Portfolio Template (v3 - Matte Red Theme) */

:root {
  /* Colors updated to metallic matte red color profiles */
  --background: 220 20% 7%;
  --foreground: 210 20% 92%;
  --card: 220 18% 10%;
  --card-foreground: 210 20% 92%;
  --popover: 220 18% 10%;
  --popover-foreground: 210 20% 92%;
  --primary: 355 75% 45%;               /* Matte Crimson Red */
  --primary-foreground: 210 20% 98%;    /* Crisp light text on red button */
  --secondary: 220 16% 16%;
  --secondary-foreground: 210 20% 82%;
  --muted: 220 14% 14%;
  --muted-foreground: 215 12% 50%;
  --accent: 355 75% 45%;                /* Matte Crimson Red */
  --accent-foreground: 210 20% 98%;
  --destructive: 0 84% 60%;
  --destructive-foreground: 210 40% 98%;
  --border: 220 14% 18%;
  --input: 220 14% 18%;
  --ring: 355 75% 45%;                  /* Matte Crimson Red */
  --radius: 0.5rem;
  --glow: 355 75% 45%;                  /* Matte Crimson Red */
  
  --surface: 220 16% 12%;
  --surface-hover: 220 16% 16%;
  --text-dim: 215 12% 45%;
  
  --gradient-primary: linear-gradient(135deg, hsl(355 75% 45%), hsl(15 85% 40%)); /* Red to rich coral gradient */
  --gradient-glow: linear-gradient(135deg, hsl(355 75% 45% / 0.15), hsl(15 85% 40% / 0.05));
  --shadow-glow: 0 0 30px hsl(355 75% 45% / 0.15);
  --shadow-glow-strong: 0 0 60px hsl(355 75% 45% / 0.25);
  
  /* Increased intensity glow properties for hover states */
  --shadow-hover-glow: 0 0 35px hsl(355 75% 45% / 0.35);

  /* Shared hover-glow transition speed — matches the Claude tech card,
     applied uniformly to every tech card and project/cert/training card */
  --glow-speed: 0.3s;
}

/* Resets & Base Styles */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border-color: hsl(var(--border));
}

html {
  scroll-behavior: smooth;
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: 'Space Grotesk', sans-serif;
}

body {
  min-height: 100vh;
  overflow-x: hidden;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  color: hsl(var(--foreground));
}

code, .font-mono {
  font-family: 'JetBrains Mono', monospace;
}

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

.container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.py-24 {
  padding-top: 6rem;
  padding-bottom: 6rem;
}

.hidden {
  display: none !important;
}

/* Scroll-triggered fade-in used across service, tech, project, cert,
   testimonial, and contact-link cards */
.fade-in-card {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in-card.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* Utilities */
.text-primary {
  color: hsl(var(--primary));
}

.text-foreground {
  color: hsl(var(--foreground));
}

.text-muted-foreground {
  color: hsl(var(--muted-foreground));
}

.text-gradient {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.glow-border {
  border: 1px solid hsl(var(--glow) / 0.2);
  box-shadow: var(--shadow-glow);
}

.grid-pattern {
  background-image: 
    linear-gradient(hsl(var(--border) / 0.3) 1px, transparent 1px),
    linear-gradient(90deg, hsl(var(--border) / 0.3) 1px, transparent 1px);
  background-size: 60px 60px;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  font-weight: 600;
  font-size: 0.875rem;
  transition: all 0.2s ease;
  cursor: pointer;
}

.btn-primary {
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  box-shadow: 0 4px 14px hsl(var(--primary) / 0.2);
}

.btn-primary:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

.btn-outline {
  background-color: transparent;
  border: 1px solid hsl(var(--border));
  color: hsl(var(--foreground));
}

.btn-outline:hover {
  border-color: hsl(var(--primary) / 0.5);
  background-color: hsl(var(--secondary) / 0.5);
}

/* Navbar */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 4rem;
  z-index: 50;
  background-color: hsl(var(--background) / 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid hsl(var(--border));
  transition: all 0.3s ease;
}

.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.logo {
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: -0.025em;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.nav-links a {
  font-size: 0.875rem;
  color: hsl(var(--muted-foreground));
  transition: color 0.2s ease;
}

.nav-links a:hover {
  color: hsl(var(--primary));
}

.nav-cta {
  display: inline-flex;
  align-self: flex-start;
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground)) !important;
  padding: 0.4rem 1.1rem;
  border-radius: 9999px;
  box-shadow: var(--shadow-glow);
  transition: all 0.3s ease;
}

.nav-cta:hover {
  box-shadow: var(--shadow-hover-glow);
  color: hsl(var(--primary-foreground)) !important;
  transform: translateY(-1px);
}

.menu-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: hsl(var(--foreground));
  cursor: pointer;
}

/* Mobile: hide inline links, show hamburger */
@media (max-width: 767px) {
  .nav-links {
    display: none;
  }
}

/* Tablet & laptop/desktop: show inline links, hide hamburger + any open mobile menu */
@media (min-width: 768px) {
  .menu-toggle {
    display: none;
  }
  .mobile-menu {
    display: none !important;
  }
}

/* Mobile Menu */
.mobile-menu {
  position: fixed;
  top: 4rem;
  left: 0;
  right: 0;
  background-color: hsl(var(--background));
  border-bottom: 1px solid hsl(var(--border));
  padding: 1.5rem;
  z-index: 49;
}

.mobile-menu-container {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.mobile-link {
  font-size: 0.95rem;
  color: hsl(var(--muted-foreground));
}

.mobile-link:hover {
  color: hsl(var(--primary));
}

/* Hero Section */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding-top: 6rem;
}

.hero-glow {
  position: absolute;
  top: 33%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background-color: hsl(var(--primary) / 0.05);
  filter: blur(120px);
  pointer-events: none;
}

.hero-container {
  text-align: center;
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.5rem;
}

.hero-image-col {
  width: 100%;
  display: flex;
  justify-content: center;
}

.hero-image-wrapper {
  position: relative;
  width: 100%;
  max-width: 320px;
  border-radius: 1rem;
  overflow: hidden;
  border: 2px solid hsl(var(--primary) / 0.5);
  box-shadow: 0 0 30px hsl(var(--primary) / 0.3);
  transition: transform 0.5s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.hero-image-wrapper:hover {
  transform: scale(1.02);
  border-color: hsl(var(--primary) / 0.8);
  box-shadow: 0 0 35px hsl(var(--primary) / 0.5);
}

.hero-image {
  display: block;
  width: 100%;
  height: auto;
}

@media (min-width: 900px) {
  .hero-container {
    display: grid;
    grid-template-columns: minmax(260px, 380px) minmax(0, 1fr);
    align-items: center;
    text-align: left;
    gap: 4rem;
  }

  .hero-image-col {
    width: auto;
    justify-content: flex-start;
  }

  .hero-image-wrapper {
    max-width: 340px;
  }

  .hero-content {
    min-width: 0;
  }

  .hero-heading {
    margin-top: 3rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .hero-desc {
    margin-left: 0;
    margin-right: 0;
    max-width: 100%;
  }

  .hero-buttons {
    justify-content: flex-start;
  }
}

@media (min-width: 1200px) {
  .hero-image-wrapper {
    max-width: 380px;
  }
}

.subtitle {
  font-size: 0.875rem;
  letter-spacing: 0.15em;
  margin-bottom: 1rem;
}

.role-flip {
  display: inline-block;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.role-flip.role-flip-out {
  opacity: 0;
  transform: translateY(4px);
}

@media (prefers-reduced-motion: reduce) {
  .role-flip {
    transition: none;
  }
}

.hero-title {
  font-size: 3rem;
  line-height: 1.1;
  letter-spacing: -0.025em;
  margin-bottom: 1.5rem;
}

.hero-desc {
  max-width: 42rem;
  margin: 0 auto 2rem;
  color: hsl(var(--muted-foreground));
  font-size: 1.125rem;
  line-height: 1.6;
}

.hero-buttons {
  display: flex;
  justify-content: center;
  gap: 1rem;
}

.scroll-indicator {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  animation: bounce 2s infinite;
}

.scroll-indicator a {
  color: hsl(var(--muted-foreground));
  transition: color 0.2s ease;
}

.scroll-indicator a:hover {
  color: hsl(var(--primary));
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translate(-50%, 0);
  }
  40% {
    transform: translate(-50%, -10px);
  }
  60% {
    transform: translate(-50%, -5px);
  }
}

/* Sections General */
.section-header {
  margin-bottom: 4rem;
}

.section-title {
  font-size: 2rem;
  margin-top: 0.5rem;
}

@media (min-width: 768px) {
  .hero-title {
    font-size: 4.5rem;
  }
  .section-title {
    font-size: 3rem;
  }
}

@media (min-width: 1024px) {
  .hero-title {
    font-size: 5.5rem;
  }
}

.section-subtitle {
  color: hsl(var(--muted-foreground));
  margin-top: 1rem;
  max-width: 42rem;
}

/* Services */
.services-grid {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .services-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.service-card {
  padding: 1.5rem;
  border-radius: 0.75rem;
  background-color: hsl(var(--surface));
  border: 1px solid hsl(var(--border));
  transition: all 0.3s ease;
}

/* v3 Update: Increased hover glow intensity on borders */
.service-card:hover {
  border-color: hsl(var(--glow) / 0.4);
  box-shadow: var(--shadow-hover-glow);
  transform: translateY(-2px);
}

.service-icon-wrapper {
  margin-bottom: 1rem;
}

.service-icon {
  color: hsl(var(--primary));
  transition: all 0.3s ease;
}

.service-card:hover .service-icon {
  filter: drop-shadow(0 0 8px hsl(var(--primary) / 0.5));
}

.service-card .service-title {
  font-size: 1.125rem;
  margin-bottom: 0.5rem;
}

.service-card .service-desc {
  color: hsl(var(--muted-foreground));
  font-size: 0.875rem;
  line-height: 1.5;
}

/* Tech Stack */
.tech-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

@media (min-width: 640px) {
  .tech-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 768px) {
  .tech-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 1024px) {
  .tech-grid {
    grid-template-columns: repeat(6, 1fr);
  }
}

.tech-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1.5rem;
  border-radius: 0.75rem;
  border: 1px solid hsl(var(--border));
  background-color: hsl(var(--surface));
  cursor: pointer;
  transition: border-color var(--glow-speed) ease, box-shadow var(--glow-speed) ease, transform var(--glow-speed) ease, background-color var(--glow-speed) ease;
}

/* v3 Update: Increased hover glow intensity on tech stack borders */
.tech-card:hover {
  border-color: var(--brand);
  box-shadow: 0 0 25px hsl(from var(--brand) h s l / 0.35);
  transform: translateY(-2px);
}

.tech-icon-mask {
  width: 3rem;
  height: 3rem;
  background-color: hsl(var(--muted-foreground) / 0.6);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  transition: background-color 0.3s ease;
}

.tech-card:hover .tech-icon-mask {
  background-color: var(--brand);
}

.tech-icon-svg {
  color: hsl(var(--muted-foreground) / 0.6);
  transition: color 0.3s ease;
}

.tech-card:hover .tech-icon-svg {
  color: var(--brand);
}

.tech-icon-fallback {
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.375rem;
  border: 1px solid hsl(var(--border));
  background-color: hsl(var(--background));
  font-family: monospace;
  font-weight: 700;
  font-size: 0.875rem;
  color: hsl(var(--muted-foreground));
  transition: all 0.3s ease;
}

.tech-card:hover .tech-icon-fallback {
  color: var(--brand);
  border-color: var(--brand);
}

.bg-hl {
  background-color: #1a2238;
}

.tech-logo-img {
  width: 3rem;
  height: 3rem;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.6;
  transition: filter 0.3s ease, opacity 0.3s ease;
}

.tech-card:hover .tech-logo-img {
  filter: grayscale(0%);
  opacity: 1;
}

.tech-name {
  font-size: 0.875rem;
  font-weight: 500;
}

/* Works Section */
.filter-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 2rem;
}

.filter-btn {
  background-color: hsl(var(--surface));
  color: hsl(var(--muted-foreground));
  border: 1px solid hsl(var(--border));
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-family: 'JetBrains Mono', monospace;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  cursor: pointer;
  transition: all 0.3s ease;
}

.filter-btn:hover {
  color: hsl(var(--primary));
  border-color: hsl(var(--primary) / 0.5);
}

.filter-btn.active {
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  border-color: hsl(var(--primary));
  box-shadow: var(--shadow-glow);
}

.projects-grid, .certifications-grid, .trainings-grid {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .projects-grid, .certifications-grid, .trainings-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .projects-grid, .certifications-grid, .trainings-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.project-card, .cert-card, .training-card {
  position: relative;
  border-radius: 0.75rem;
  border: 1px solid hsl(var(--border));
  background-color: hsl(var(--surface));
  overflow: hidden;
  transition: border-color var(--glow-speed) ease, box-shadow var(--glow-speed) ease, transform var(--glow-speed) ease;
  display: flex;
  flex-direction: column;
}

.project-card {
  cursor: pointer;
}

/* v3 Update: Increased hover glow intensity on project cards, cert cards, and training cards */
.project-card:hover, .cert-card:hover, .training-card:hover {
  border-color: hsl(var(--glow) / 0.4);
  box-shadow: var(--shadow-hover-glow);
  transform: translateY(-2px);
}

.absolute-featured {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 10;
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

.project-image-wrapper, .cert-image-wrapper, .training-image-wrapper {
  position: relative;
  height: 12rem;
  overflow: hidden;
  background-color: hsl(var(--background));
  cursor: pointer;
}

.project-img, .cert-img, .training-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.5s ease;
}

.cert-img, .training-img {
  object-position: top;
}

.project-card:hover .project-img,
.cert-card:hover .cert-img,
.training-card:hover .training-img {
  transform: scale(1.05);
}

.project-overlay, .cert-overlay, .training-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, hsl(var(--background) / 0.8) 0%, transparent 100%);
}

/* Project card hover-swipe image carousel */
.project-image-wrapper.has-carousel .carousel-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.45s ease;
}

.project-image-wrapper.has-carousel .carousel-slide.active {
  opacity: 1;
}

.carousel-dots {
  position: absolute;
  bottom: 0.6rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.35rem;
  z-index: 2;
}

.carousel-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: hsl(var(--foreground) / 0.4);
  box-shadow: 0 0 0 1px hsl(var(--background) / 0.5);
  transition: background 0.3s ease, transform 0.3s ease;
}

.carousel-dot.active {
  background: hsl(var(--primary));
  transform: scale(1.3);
}

.project-content, .cert-content, .training-content {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.project-card .category, .cert-card span, .training-card span {
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  color: hsl(var(--primary));
}

.project-card .project-title, .cert-card .cert-title, .training-card .training-title {
  font-size: 1.125rem;
  font-weight: 600;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  line-height: 1.3;
  transition: color 0.2s ease;
}

.project-card:hover .project-title,
.cert-card:hover .cert-title,
.training-card:hover .training-title {
  color: hsl(var(--primary));
}

.project-card .project-desc, .cert-card .cert-desc, .training-card .training-desc {
  color: hsl(var(--muted-foreground));
  font-size: 0.875rem;
  line-height: 1.5;
  margin-bottom: 1rem;
}

.project-card .project-desc {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 0.4rem;
}

.project-card .project-desc.expanded {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}

.see-more-btn {
  display: inline-block;
  background: none;
  border: none;
  padding: 0;
  margin: 0 0 1rem;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  color: hsl(var(--primary));
  cursor: pointer;
}

.see-more-btn:hover {
  text-decoration: underline;
}

.see-more-btn.is-hidden {
  display: none;
}

.project-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: auto;
}

.tag {
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  font-family: 'JetBrains Mono', monospace;
  border-radius: 0.25rem;
  background-color: hsl(var(--secondary));
  color: hsl(var(--secondary-foreground));
}

.demo-btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1rem;
}

.demo-btn-group .watch-demo-btn {
  margin-top: 0;
}

.watch-demo-btn {
  margin-top: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.375rem;
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border: none;
  cursor: pointer;
  width: fit-content;
  transition: opacity 0.2s ease;
}

.watch-demo-btn:hover {
  opacity: 0.9;
}

.play-icon {
  fill: currentColor;
}

/* Certifications (Specific Grid Layout) */
@media (min-width: 768px) {
  .certifications-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.cert-image-wrapper {
  height: 14rem;
}

/* Trainings */
.training-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.training-meta .date {
  color: hsl(var(--muted-foreground));
}

/* Contact Section */
.expect-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 32px;
  justify-content: center;
}

.expect-pill {
  display: flex;
  align-items: center;
  gap: 7px;
  background: hsl(var(--surface));
  border: 1px solid hsl(var(--border));
  border-radius: 40px;
  padding: 7px 14px;
  font-size: 13px;
  color: hsl(var(--muted-foreground));
}

.expect-pill svg {
  width: 14px;
  height: 14px;
  stroke: hsl(var(--primary));
  flex-shrink: 0;
}

.cal-wrapper {
  border: 1px solid hsl(var(--border));
  border-radius: 0.75rem;
  overflow: hidden;
  background: hsl(var(--surface));
  margin-bottom: 56px;
}

.cal-popup-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 64px 32px;
  gap: 12px;
}

.cal-popup-icon {
  width: 56px;
  height: 56px;
  border-radius: 1rem;
  background: hsl(var(--primary) / 0.1);
  border: 1px solid hsl(var(--primary) / 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}

.cal-popup-icon svg {
  width: 26px;
  height: 26px;
  stroke: hsl(var(--primary));
}

.cal-popup-title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
}

.cal-popup-sub {
  font-size: 15px;
  color: hsl(var(--muted-foreground));
  max-width: 380px;
  margin: 0 0 12px;
  line-height: 1.6;
}

.cal-popup-btn,
#contact-submit-btn {
  background: #7a1a24;
  background-image: linear-gradient(180deg, #8c1e2a 0%, #6b1520 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 2px 8px rgba(0,0,0,0.4);
  border: 1px solid #5a1018;
  color: #e8c8cb;
}

.cal-popup-btn:hover,
#contact-submit-btn:hover {
  background: #8c1e2a;
  background-image: linear-gradient(180deg, #9e2230 0%, #7a1a24 100%);
  opacity: 1;
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 4px 14px rgba(0,0,0,0.5);
}

.cal-popup-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  padding: 13px 28px;
}
  font-size: 12px;
  color: hsl(var(--muted-foreground));
  font-family: 'JetBrains Mono', monospace;
  margin: 4px 0 0;
}

.contact-divider {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 40px;
  color: hsl(var(--muted-foreground));
  font-size: 13px;
  font-family: 'JetBrains Mono', monospace;
}

.contact-divider::before,
.contact-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: hsl(var(--border));
}

.contact-reach-header {
  margin-bottom: 24px;
}

.contact-reach-header h3 {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 6px;
}

.contact-reach-header p {
  font-size: 15px;
  color: hsl(var(--muted-foreground));
}

.contact-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 40px;
}

.contact-card-link {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 20px;
  background: hsl(var(--surface));
  border: 1px solid hsl(var(--border));
  border-radius: 0.75rem;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.18s, box-shadow 0.18s, transform 0.14s;
}

.contact-card-link:hover {
  border-color: hsl(var(--primary) / 0.5);
  box-shadow: var(--shadow-hover-glow);
  transform: translateY(-2px);
}

.contact-card-icon {
  width: 40px;
  height: 40px;
  border-radius: 0.5rem;
  background: hsl(var(--background));
  border: 1px solid hsl(var(--border));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.contact-card-icon svg {
  width: 18px;
  height: 18px;
  stroke: hsl(var(--primary));
}

.contact-card-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: hsl(var(--muted-foreground));
  margin-bottom: 3px;
  font-family: 'JetBrains Mono', monospace;
}

.contact-card-value {
  font-size: 14px;
  font-weight: 500;
  color: hsl(var(--foreground));
  word-break: break-all;
}

.contact-card-hint {
  font-size: 12px;
  color: hsl(var(--muted-foreground));
  margin-top: 3px;
}

.message-form-box {
  background: hsl(var(--surface));
  border: 1px solid hsl(var(--border));
  border-radius: 0.75rem;
  padding: 32px;
}

.message-form-title {
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 6px;
}

.message-form-sub {
  font-size: 14px;
  color: hsl(var(--muted-foreground));
  margin-bottom: 24px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}

@media (max-width: 540px) {
  .form-row { grid-template-columns: 1fr; }
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-field-full {
  grid-column: 1 / -1;
}

.form-field label {
  font-size: 13px;
  font-weight: 500;
  color: hsl(var(--muted-foreground));
}

.form-field input,
.form-field textarea {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14px;
  color: hsl(var(--foreground));
  background: hsl(var(--background));
  border: 1px solid hsl(var(--border));
  border-radius: 0.5rem;
  padding: 10px 14px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  width: 100%;
  resize: none;
}

.form-field input::placeholder,
.form-field textarea::placeholder {
  color: hsl(var(--muted-foreground) / 0.6);
}

.form-field input:focus,
.form-field textarea:focus {
  border-color: hsl(var(--primary) / 0.6);
  box-shadow: 0 0 0 3px hsl(var(--primary) / 0.1);
}

.form-field textarea {
  min-height: 110px;
  line-height: 1.6;
}

.form-footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 20px;
}

.form-privacy-note {
  font-size: 12px;
  color: hsl(var(--muted-foreground));
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: 'JetBrains Mono', monospace;
}

.form-privacy-note svg {
  width: 13px;
  height: 13px;
  stroke: hsl(var(--muted-foreground));
}

.contact-spinner {
  width: 15px;
  height: 15px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  display: none;
  margin-left: 6px;
}

@keyframes spin { to { transform: rotate(360deg); } }

.contact-success-msg,
.contact-error-msg {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-radius: 0.5rem;
  font-size: 14px;
  margin-top: 16px;
}

.contact-success-msg {
  background: #ecfdf5;
  border: 1px solid #6ee7b7;
  color: #065f46;
}

.contact-success-msg svg {
  width: 18px; height: 18px;
  stroke: #059669;
  flex-shrink: 0;
}

.contact-error-msg {
  background: #fef2f2;
  border: 1px solid #fca5a5;
  color: #991b1b;
}

.contact-error-msg svg {
  width: 18px; height: 18px;
  stroke: #dc2626;
  flex-shrink: 0;
}

.contact-success-msg.show,
.contact-error-msg.show {
  display: flex;
}

/* Footer */
.footer {
  padding: 2rem 0;
  border-top: 1px solid hsl(var(--border));
  background-color: hsl(var(--background));
}

.footer-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

@media (min-width: 768px) {
  .footer-container {
    flex-direction: row;
  }
}

.copyright {
  font-size: 0.75rem;
  color: hsl(var(--muted-foreground));
}

/* Modal Overlay Styles */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: hsl(var(--background) / 0.9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 1rem;
  animation: fadeIn 0.24s cubic-bezier(0.16, 1, 0.32, 1) forwards;
}

/* ========================================= */
/* INTERACTIVE TIMELINE (HOW I WORK)         */
/* ========================================= */

:root {
  --hw-accent: #8B2020;
  --hw-accent-glow: rgba(139, 32, 32, 0.6);
  --hw-node-bg: hsl(var(--surface));
  --hw-track-bg: hsl(var(--border));
}

.hw-timeline-wrapper {
  position: relative;
  width: 100%;
  margin: 4rem 0;
  padding-top: 2rem;
  padding-bottom: 2rem;
  /* Horizontal scroll is only needed on narrow viewports (see media query below);
     on desktop, overflow-y must stay visible so scaled-up/glowing nodes aren't clipped */
  overflow-x: visible;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; 
}
.hw-timeline-wrapper::-webkit-scrollbar { display: none; }

.hw-track {
  position: absolute;
  /* .hw-track is positioned relative to .hw-timeline-wrapper's padding box,
     while .hw-nodes-container is pushed down by the wrapper's padding-top,
     so we add that offset back in to keep the track aligned with icon centers */
  top: calc(2rem + 40px); /* Aligns with center of icons */
  left: 5%;
  right: 5%;
  height: 2px;
  z-index: 0;
}

.hw-track-bg {
  position: absolute;
  inset: 0;
  background: var(--hw-track-bg);
  border-radius: 2px;
}

.hw-track-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0%;
  background: var(--hw-accent);
  box-shadow: 0 0 10px var(--hw-accent);
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 2px;
}

.hw-nodes-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  position: relative;
  z-index: 1;
  min-width: 800px; /* Forces layout stability on mobile swipe */
}

.hw-node {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  cursor: pointer;
  text-align: center;
}

.hw-node-core {
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: scale(1);
  transition: transform 0.2s 0.3s cubic-bezier(0, 0, 0.2, 1), 
              filter 0.2s 0.3s;
}

.hw-icon-box {
  width: 80px;
  height: 80px;
  border-radius: 12px;
  background: var(--hw-node-bg);
  border: 1px solid var(--hw-track-bg);
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  margin-bottom: 1rem;
  color: hsl(var(--muted-foreground));
  transition: border-color 0.2s 0.3s, box-shadow 0.2s 0.3s, color 0.2s 0.3s;
  z-index: 2;
}

.hw-icon-box svg {
  width: 32px;
  height: 32px;
  position: relative;
  z-index: 2;
}

.hw-label {
  font-size: 1rem;
  font-weight: 600;
  color: hsl(var(--foreground));
  margin-bottom: 0.5rem;
  font-family: 'Space Grotesk', sans-serif;
  transition: color 0.2s;
}

.hw-num {
  font-family: 'JetBrains Mono', monospace;
  color: hsl(var(--muted-foreground));
  font-size: 0.75rem;
  margin-right: 4px;
}

/* Deactivated Description State */
.hw-desc-box {
  width: 90%;
  max-width: 220px;
  height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(-10px);
  transition: opacity 0.2s 0s, transform 0.2s 0s, height 0.2s 0s;
}

.hw-desc-box p {
  font-size: 0.85rem;
  color: hsl(var(--muted-foreground));
  line-height: 1.5;
  margin: 0;
}

/* ========================================= */
/* ACTIVE STATES (The Sequence)              */
/* ========================================= */

/* Deactivation sequence (default): Desc exits (0s delay), then node scales down (0.3s delay) */
/* Activation sequence: Node scales up (0s delay), then desc enters (0.2s delay) */

.hw-node.is-active .hw-node-core {
  transform: scale(1.1);
  transition: transform 0.2s 0s cubic-bezier(0, 0, 0.2, 1);
}

.hw-node.is-active .hw-icon-box {
  border-color: var(--hw-accent);
  color: var(--hw-accent);
  box-shadow: 0 0 25px var(--hw-accent-glow);
  transition: border-color 0.2s 0s, box-shadow 0.2s 0s, color 0.2s 0s;
}

.hw-node.is-active .hw-label {
  color: var(--hw-accent);
}

.hw-node.is-active .hw-desc-box {
  height: auto;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.3s 0.2s, transform 0.3s 0.2s;
  padding-top: 0.5rem;
}

/* ========================================= */
/* SPECIFIC SVG ANIMATIONS                   */
/* ========================================= */

/* 1. Blueprint */
/* 50% Size increase specific to Blueprint node (120px), balancing margins to keep track alignment */
.hw-node[data-index="0"] .hw-icon-box {
  width: 120px;
  height: 120px;
  margin-top: -20px;
  margin-bottom: calc(1rem - 20px);
}
.hw-node[data-index="0"] .hw-icon-box svg {
  width: 100%;
  height: 100%;
}

/* Background Grid Sweep */
.bp-grid {
  clip-path: inset(0 0 0 0);
  opacity: 1;
}

/* Sequential Line Draw-in */
.bp-draw {
  stroke-dasharray: 360; /* Covers the 90x90 sheet perimeter */
  stroke-dashoffset: 0;
}

/* Staggered Tools Drop */
.bp-tool {
  opacity: 0;
  transform: translateY(-20px) scale(0.95);
  transition: opacity 0.3s, transform 0.3s;
}
.hw-node.is-active .bp-tool {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.hw-node.is-active .bp-ruler {
  transition: opacity 0.4s 0.7s, transform 0.4s 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hw-node.is-active .bp-compass {
  transition: opacity 0.4s 0.85s, transform 0.4s 0.85s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Ruler Motion: slides up and down once it has faded/dropped in */
.hw-node.is-active .bp-ruler-assembly {
  animation: bp-ruler-slide 1.8s ease-in-out infinite 1.1s;
}
@keyframes bp-ruler-slide {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* Compass Motion (Pivots from the needle point at 85,70) */
.bp-compass-assembly {
  transform-origin: 85px 70px;
  transition: transform 0.3s ease-out;
}
.hw-node.is-active .bp-compass-assembly {
  /* Motion begins exactly as the tool drops */
  animation: compass-sweep 2.5s infinite ease-in-out 1.25s;
}

/* Live drawn arc synced with compass pencil leg */
.bp-arc {
  stroke-dasharray: 16;
  stroke-dashoffset: 16;
  opacity: 0;
  transition: stroke-dashoffset 0.3s, opacity 0.3s;
}
.hw-node.is-active .bp-arc {
  opacity: 1;
  animation: arc-draw 2.5s infinite ease-in-out 1.25s;
}

/* Self-drawing Gear: traces itself in on hover, independent of the always-visible base drawing */
.bp-gear,
.bp-gear-hole {
  fill: none;
  stroke: currentColor;
  opacity: 0;
  transition: stroke-dashoffset 0.3s, opacity 0.3s;
}
.bp-gear {
  stroke-dasharray: 116;
  stroke-dashoffset: 116;
}
.bp-gear-hole {
  stroke-dasharray: 22;
  stroke-dashoffset: 22;
}
.hw-node.is-active .bp-gear {
  opacity: 1;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.9s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s;
}
.hw-node.is-active .bp-gear-hole {
  opacity: 1;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.5s 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s 0.4s;
}

@keyframes draw-in { to { stroke-dashoffset: 0; } }
@keyframes compass-sweep {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-30deg); } /* Pivots pencil upwards */
}
@keyframes arc-draw {
  0%, 100% { stroke-dashoffset: 16; }
  50% { stroke-dashoffset: 0; }
}
@keyframes ring-pulse-once {
  0% { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(1.3); opacity: 0; }
}

/* 2. Fabricate */
/* 50% Size increase matching Blueprint */
.hw-node[data-index="1"] .hw-icon-box {
  width: 120px;
  height: 120px;
  margin-top: -20px;
  margin-bottom: calc(1rem - 20px);
}
.hw-node[data-index="1"] .hw-icon-box svg {
  width: 100%;
  height: 100%;
}

/* Static Scene snaps in aggressively */
.fab-scene {
  opacity: 1;
  transform: scale(0.96);
  transform-origin: 60px 60px;
  transition: opacity 0.2s, transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.hw-node.is-active .fab-scene {
  opacity: 1;
  transform: scale(1);
}

/* Configured LED */
.chip-led {
  opacity: 0;
  transform: scale(0.5);
  transform-origin: 60px 60px;
  transition: opacity 0.2s, transform 0.2s;
}
.hw-node.is-active .chip-led {
  animation: fab-heat-pulse 2s infinite alternate ease-in-out 2.6s both;
}

/* The aggressive ignition flash and continuous erratic flicker */
.fab-arc-center {
  opacity: 0;
  transform: scale(0);
}
.fab-arc-center.point-1 { transform-origin: 35px 45px; }
.fab-arc-center.point-2 { transform-origin: 50px 35px; }
.fab-arc-center.point-3 { transform-origin: 85px 70px; }

.hw-node.is-active .fab-arc-center.point-1 {
  animation: fab-ignite 0.15s ease-out 0.4s both, fab-arc-flicker 0.08s 4 alternate 0.55s both, spark-fade 0.2s 0.8s forwards;
}
.hw-node.is-active .fab-arc-center.point-2 {
  animation: fab-ignite 0.15s ease-out 1.2s both, fab-arc-flicker 0.08s 4 alternate 1.35s both, spark-fade 0.2s 1.6s forwards;
}
.hw-node.is-active .fab-arc-center.point-3 {
  animation: fab-ignite 0.15s ease-out 2.0s both, fab-arc-flicker 0.08s 4 alternate 2.15s both, spark-fade 0.2s 2.4s forwards;
}
@keyframes spark-fade { to { opacity: 0; } }

/* Spark Mechanics */
.fab-spark {
  opacity: 0;
}
.fab-spark.point-1 { transform-origin: 35px 45px; }
.fab-spark.point-2 { transform-origin: 50px 35px; }
.fab-spark.point-3 { transform-origin: 85px 70px; }

.hw-node.is-active .fab-spark.point-1.s1 { animation: spark-shoot 0.4s cubic-bezier(0.2, 1, 0.3, 1) 0.4s forwards; --sx: -20px; --sy: -15px; }
.hw-node.is-active .fab-spark.point-1.s2 { animation: spark-shoot 0.45s cubic-bezier(0.2, 1, 0.3, 1) 0.45s forwards; --sx: -15px; --sy: 20px; }

.hw-node.is-active .fab-spark.point-2.s1 { animation: spark-shoot 0.4s cubic-bezier(0.2, 1, 0.3, 1) 1.2s forwards; --sx: -20px; --sy: -15px; }
.hw-node.is-active .fab-spark.point-2.s2 { animation: spark-shoot 0.45s cubic-bezier(0.2, 1, 0.3, 1) 1.25s forwards; --sx: 20px; --sy: 15px; }

.hw-node.is-active .fab-spark.point-3.s1 { animation: spark-shoot 0.4s cubic-bezier(0.2, 1, 0.3, 1) 2.0s forwards; --sx: 25px; --sy: -10px; }
.hw-node.is-active .fab-spark.point-3.s2 { animation: spark-shoot 0.45s cubic-bezier(0.2, 1, 0.3, 1) 2.05s forwards; --sx: -15px; --sy: 25px; }

/* Animated Lit Traces */
.chip-trace {
  fill: none;
  stroke: var(--hw-accent);
  stroke-dasharray: 25;
  stroke-dashoffset: 25;
  opacity: 0;
  transition: stroke-dashoffset 0.4s, opacity 0.4s;
}
.hw-node.is-active .chip-trace {
  opacity: 1;
  stroke-dashoffset: 0;
}
.hw-node.is-active .chip-trace.t1 { transition-delay: 0.4s; }
.hw-node.is-active .chip-trace.t2 { transition-delay: 1.2s; }
.hw-node.is-active .chip-trace.t3 { transition-delay: 2.0s; }

/* Soldering Iron Tool */
.solder-iron {
  opacity: 0;
  transform: translateY(-20px);
  transition: opacity 0.3s, transform 0.3s cubic-bezier(0.2, 1, 0.3, 1);
}
.hw-node.is-active .solder-iron {
  opacity: 1;
  transform: translateY(0);
}
.solder-iron-move {
  transform: translate(35px, 45px);
}
.hw-node.is-active .solder-iron-move {
  animation: iron-move 2.8s forwards;
}
@keyframes iron-move {
  0%, 30% { transform: translate(35px, 45px); }
  40%, 60% { transform: translate(50px, 35px); }
  70%, 90% { transform: translate(85px, 70px); }
  100% { transform: translate(110px, 10px); }
}

/* Sharp quick outer node glow pulse */
.hw-pulse-ring.sharp {
  position: absolute;
  inset: -1px;
  border-radius: 12px;
  border: 2px solid var(--hw-accent);
  opacity: 0;
}
.hw-node.is-active .hw-pulse-ring.sharp {
  animation: ring-pulse-sharp 0.4s cubic-bezier(0.1, 0.9, 0.2, 1) forwards;
}

@keyframes fab-ignite {
  0% { opacity: 0; transform: scale(0) rotate(0deg); }
  50% { opacity: 1; transform: scale(2.5) rotate(45deg); }
  100% { opacity: 1; transform: scale(1) rotate(90deg); }
}
@keyframes fab-arc-flicker {
  0% { opacity: 0.7; transform: scale(0.8) rotate(90deg); }
  100% { opacity: 1; transform: scale(1.2) rotate(100deg); }
}
@keyframes fab-heat-pulse {
  0% { opacity: 0; transform: scale(0.8); }
  10% { opacity: 0.15; transform: scale(1); }
  100% { opacity: 0.25; transform: scale(1.1); }
}
@keyframes spark-shoot {
  0% { opacity: 1; transform: translate(0, 0) scale(1); }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--sx), var(--sy)) scale(0); }
}
@keyframes ring-pulse-sharp {
  0% { transform: scale(1); opacity: 0.9; }
  100% { transform: scale(1.2); opacity: 0; }
}

/* 3. Assemble */
/* 50% Size increase matching Blueprint & Fabricate */
.hw-node[data-index="2"] .hw-icon-box {
  width: 120px;
  height: 120px;
  margin-top: -20px;
  margin-bottom: calc(1rem - 20px);
}
.hw-node[data-index="2"] .hw-icon-box svg {
  width: 100%;
  height: 100%;
}

/* ==========================================
   ASSEMBLE STEP ANIMATIONS
   ========================================== */

/* 1. Inactive/Scattered State (Deactivation uses these staggered delays) */
.hw-svg-assemble .asm-torso {
  opacity: 1;
  transition: opacity 0.4s ease 0s;
}
.hw-svg-assemble .asm-head {
  transform: translate(0, -30px) rotate(-10deg);
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.3s, opacity 0.4s ease 0.3s;
}
.hw-svg-assemble .asm-arm-left {
  transform: translate(-30px, -10px) rotate(-15deg);
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.2s, opacity 0.3s ease 0.2s;
}
.hw-svg-assemble .asm-arm-right {
  transform: translate(30px, -10px) rotate(15deg);
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.1s, opacity 0.3s ease 0.1s;
}
.hw-svg-assemble .asm-tracks {
  transform: translate(0, 30px);
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0s, opacity 0.4s ease 0s;
}

/* 2. Active/Assembled State (Forward staggered timing) */
.hw-node.is-active .hw-svg-assemble .asm-torso {
  opacity: 1;
  transition: opacity 0.3s ease 0s;
}
.hw-node.is-active .hw-svg-assemble .asm-tracks {
  transform: translate(0, 0) rotate(0deg);
  opacity: 1;
  /* Arrives first */
  transition: transform 0.4s cubic-bezier(0.2, 1.2, 0.4, 1) 0s, opacity 0.3s ease 0s;
}
.hw-node.is-active .hw-svg-assemble .asm-head {
  transform: translate(0, 0) rotate(0deg);
  opacity: 1;
  /* Snap in easing */
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s, opacity 0.3s ease 0.15s;
}
.hw-node.is-active .hw-svg-assemble .asm-arm-left {
  transform: translate(0, 0) rotate(0deg);
  opacity: 1;
  /* Arm drop */
  transition: transform 0.4s cubic-bezier(0.2, 1.2, 0.4, 1) 0.3s, opacity 0.3s ease 0.3s;
}
.hw-node.is-active .hw-svg-assemble .asm-arm-right {
  transform: translate(0, 0) rotate(0deg);
  opacity: 1;
  /* Settles last */
  transition: transform 0.4s cubic-bezier(0.2, 1.2, 0.4, 1) 0.4s, opacity 0.3s ease 0.4s;
}

/* 3. Settle Wobble (Fires at 0.8s, right after last arm arrives) */
@keyframes assembleSettle {
  0%   { transform: rotate(0deg) scale(1); }
  25%  { transform: rotate(2deg) scale(0.98); }
  75%  { transform: rotate(-1.5deg) scale(1.02); }
  100% { transform: rotate(0deg) scale(1); }
}

/* 4. Continuous Idle Motion (Starts gracefully after settle) */
@keyframes assembleIdleVibration {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(0.5px, -0.5px); }
  20% { transform: translate(-0.5px, 0.5px); }
  30% { transform: translate(0px, 0.5px); }
  40% { transform: translate(0.5px, -0.5px); }
  50% { transform: translate(-0.5px, 0px); }
  60% { transform: translate(0.5px, 0.5px); }
  70% { transform: translate(0px, -0.5px); }
  80% { transform: translate(-0.5px, -0.5px); }
  90% { transform: translate(0.5px, 0px); }
}

.hw-node.is-active .asm-assembly {
  /* Chain the one-off wobble, then the infinite idle vibration */
  animation: assembleSettle 0.3s ease 0.8s 1 normal forwards,
             assembleIdleVibration 2s linear 1.1s infinite;
}

/* Optional Details: Track Scrolling & Blinking Light */
@keyframes trackScroll {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -8; } /* matches 4+4 */
}
.hw-node.is-active .track-path {
  animation: trackScroll 0.5s linear infinite;
  animation-delay: 1.1s;
}

@keyframes headLightBlink {
  0%, 40%, 100% { fill: var(--hw-accent); }
  20% { fill: hsl(var(--surface)); }
}
.hw-node.is-active .head-light {
  animation: headLightBlink 1.5s step-end infinite;
  animation-delay: 1.1s;
}

/* 5. Steady Glow (Overrides default pulse) */
.hw-pulse-ring.steady {
  animation: none !important;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.4s ease, transform 0.4s ease;
  background: radial-gradient(circle, hsl(var(--primary) / 0.15) 0%, transparent 70%);
}
.hw-node.is-active .hw-pulse-ring.steady {
  opacity: 1;
  transform: scale(1.1);
  /* Triggers cleanly right as the wobble happens */
  transition: opacity 0.3s ease 0.8s, transform 0.4s cubic-bezier(0.2, 1.2, 0.4, 1) 0.8s;
}

/* =========================================
   PROTOTYPE STEP (04) - QUALITY SCAN
   ========================================= */

/* 50% Size increase matching Blueprint, Fabricate & Assemble */
.hw-node[data-index="3"] .hw-icon-box {
  width: 120px;
  height: 120px;
  margin-top: -20px;
  margin-bottom: calc(1rem - 20px);
}

.hw-node[data-index="3"] .hw-icon-box svg {
  width: 100%;
  height: 100%;
}

.hw-svg-prototype {
  width: 100%;
  height: 100%;
}

/* Base Inactive States */
.pr-robot {
  opacity: 1;
  transition: opacity 0.4s ease;
}

.pr-scanner {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s ease;
}

.pr-part {
  /* This transition gracefully catches the color when the animation class is removed */
  transition: stroke 0.4s ease, filter 0.4s ease;
}

/* Active Entrances */
.hw-node.is-active .pr-robot {
  opacity: 1;
}

.hw-node.is-active .pr-scanner {
  opacity: 1;
  animation: pr-scan-sweep 2.5s linear infinite;
}

/* Scanner Movement (10px to 115px) */
@keyframes pr-scan-sweep {
  0% { transform: translateY(10px); opacity: 0; }
  10% { transform: translateY(10px); opacity: 1; }
  90% { transform: translateY(115px); opacity: 1; }
  100% { transform: translateY(115px); opacity: 0; }
}

/*
  Part Lighting - Mathematically timed to exactly match the scanner's Y-coordinate 
  taking into account the 1.4x scale of the robot parts natively in SVG.
  - Head crossed at ~18%
  - Torso crossed at ~54%
  - Arms crossed at ~53%
  - Tracks crossed at ~82%
*/

@keyframes pr-light-head {
  0%, 10%, 26%, 100% { stroke: currentColor; filter: none; }
  18% { stroke: #10b981; filter: drop-shadow(0 0 5px #10b981); } /* Green Pass */
}

@keyframes pr-light-torso {
  0%, 46%, 62%, 100% { stroke: currentColor; filter: none; }
  54% { stroke: #10b981; filter: drop-shadow(0 0 5px #10b981); } /* Green Pass */
}

@keyframes pr-light-arm-l {
  0%, 45%, 61%, 100% { stroke: currentColor; filter: none; }
  53% { stroke: #10b981; filter: drop-shadow(0 0 5px #10b981); } /* Green Pass */
}

@keyframes pr-light-arm-r {
  0%, 45%, 61%, 100% { stroke: currentColor; filter: none; }
  53% { stroke: #ef4444; filter: drop-shadow(0 0 5px #ef4444); } /* Red Fail */
}

@keyframes pr-light-tracks {
  0%, 74%, 90%, 100% { stroke: currentColor; filter: none; }
  82% { stroke: #10b981; filter: drop-shadow(0 0 5px #10b981); } /* Green Pass */
}

/* Attach the synced animations */
.hw-node.is-active .pr-head { animation: pr-light-head 2.5s linear infinite; }
.hw-node.is-active .pr-torso { animation: pr-light-torso 2.5s linear infinite; }
.hw-node.is-active .pr-arm-l { animation: pr-light-arm-l 2.5s linear infinite; }
.hw-node.is-active .pr-arm-r { animation: pr-light-arm-r 2.5s linear infinite; }
.hw-node.is-active .pr-tracks { animation: pr-light-tracks 2.5s linear infinite; }

/* Crosshairs animations */
.pr-crosshair {
  opacity: 0;
  stroke: currentColor;
}
.p-head { transform-origin: 60px 21px; }
.p-torso { transform-origin: 60px 68px; }
.p-arm-l { transform-origin: 32px 66px; }
.p-arm-r { transform-origin: 88px 66px; }
.p-tracks { transform-origin: 60px 105px; }

@keyframes pr-crosshair-head {
  0%, 10%, 26%, 100% { opacity: 0; transform: scale(0.5) rotate(0deg); stroke: currentColor; }
  18% { opacity: 1; transform: scale(1.2) rotate(90deg); stroke: #0ea5e9; }
}
@keyframes pr-crosshair-torso {
  0%, 46%, 62%, 100% { opacity: 0; transform: scale(0.5) rotate(0deg); stroke: currentColor; }
  54% { opacity: 1; transform: scale(1.2) rotate(90deg); stroke: #0ea5e9; }
}
@keyframes pr-crosshair-arm {
  0%, 45%, 61%, 100% { opacity: 0; transform: scale(0.5) rotate(0deg); stroke: currentColor; }
  53% { opacity: 1; transform: scale(1.2) rotate(90deg); stroke: #0ea5e9; }
}
@keyframes pr-crosshair-tracks {
  0%, 74%, 90%, 100% { opacity: 0; transform: scale(0.5) rotate(0deg); stroke: currentColor; }
  82% { opacity: 1; transform: scale(1.2) rotate(90deg); stroke: #0ea5e9; }
}

.hw-node.is-active .p-head { animation: pr-crosshair-head 2.5s linear infinite; }
.hw-node.is-active .p-torso { animation: pr-crosshair-torso 2.5s linear infinite; }
.hw-node.is-active .p-arm-l { animation: pr-crosshair-arm 2.5s linear infinite; }
.hw-node.is-active .p-arm-r { animation: pr-crosshair-arm 2.5s linear infinite; }
.hw-node.is-active .p-tracks { animation: pr-crosshair-tracks 2.5s linear infinite; }

/* Node's background pulse ring, positioned to overlay the icon box */
.hw-pulse-ring.sync { position: absolute; inset: -1px; border-radius: 12px; }

/* Sync the node's background pulse with the torso scan */
@keyframes pr-pulse-sync {
  0%, 35%, 65%, 100% { transform: scale(1); opacity: 0; }
  50% { transform: scale(1.5); opacity: 0.8; background-color: var(--primary); }
}

.hw-node.is-active .hw-pulse-ring.sync {
  animation: pr-pulse-sync 2.5s linear infinite;
}

/* =========================================
   5. TEST DRIVE STEP - LIVE PERFORMANCE
   ========================================= */

/* 50% Size increase matching other completed steps */
.hw-node[data-index="4"] .hw-icon-box {
  width: 120px;
  height: 120px;
  margin-top: -20px;
  margin-bottom: calc(1rem - 20px);
}

.hw-node[data-index="4"] .hw-icon-box svg {
  width: 100%;
  height: 100%;
}

/* --- Background Robot Styles (Resting) --- */
.td-robot {
  opacity: 1; /* Fully visible at rest, matching other steps */
  transform-origin: 50px 87px; /* pivot near the track base for a rocking feel */
  transition: opacity 0.4s ease;
}

.td-tracks { transform-origin: 50px 81px; }

/* Continuous tread scroll on the dashed overlay, only while active */
.td-track-tread {
  stroke-dasharray: 4 4;
}

/* Roller wheels spin — dashed stroke + moving dashoffset reads as rotation */
/* Eyes blink on an occasional cycle, not continuously */
.td-eye {
  transform-box: fill-box;
  transform-origin: center;
}
.hw-node.is-active .td-eye:nth-of-type(2) {
  animation-delay: 0.06s; /* eyes blink a hair apart, feels less robotic-perfect */
}

/* Arms sway gently at the shoulder while the unit runs, out of phase L/R */
.td-arm-l {
  transform-origin: 27px 41px;
}
.td-arm-r {
  transform-origin: 73px 41px;
}

/* --- Foreground Gauge Styles (Resting) --- */
.td-gauge-group {
  /* Pushes gauge up slightly in the foreground */
  transform: translateY(2px);
}

.td-needle-sweep {
  transform-origin: 0 0; /* Pivots from center of the translate group */
  transform: rotate(15deg); /* Low/Resting position */
  /* Clean reverse sweep on deactivation mirroring entrance timing */
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.td-needle-jitter {
  transform-origin: 0 0;
}

.td-pivot-pin {
  fill: var(--hw-accent);
}

/* Remove generic pulse ring to allow the synced needle glow */
.hw-node[data-index="4"] .hw-pulse-ring {
  display: none !important;
}

/* Custom Deactivation Glow (Syncs with needle falling back to 0) */
.hw-node[data-index="4"] .hw-icon-box {
  transition: border-color 0.6s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.6s cubic-bezier(0.4, 0, 0.2, 1),
              color 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- Active Sequence --- */

/* 1. Gentle rock + bob loop instead of a leg-swing walk cycle */
.hw-node.is-active .td-robot {
  animation: td-robot-rock 1.1s ease-in-out infinite;
}
.hw-node.is-active .td-track-tread {
  animation: td-track-scroll 0.5s linear infinite;
}

/* Roller wheels spin — dashed stroke + moving dashoffset reads as rotation */
.hw-node.is-active .td-roller {
  animation: td-roller-spin 0.5s linear infinite;
}

/* Eyes blink on an occasional cycle, not continuously */
.hw-node.is-active .td-eye {
  animation: td-eye-blink 3.2s ease-in-out infinite;
}

/* Arms sway gently at the shoulder while the unit runs, out of phase L/R */
.hw-node.is-active .td-arm-l {
  animation: td-arm-sway-l 1.4s ease-in-out infinite;
}
.hw-node.is-active .td-arm-r {
  animation: td-arm-sway-r 1.4s ease-in-out infinite;
  animation-delay: -0.7s; /* offset so arms don't move in lockstep */
}

/* 2. Needle Sweep Entrance */
.hw-node.is-active .td-needle-sweep {
  transform: rotate(165deg); /* High performance reading */
  /* Overshoot wobble/settle */
  transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 3. Live Needle Jitter */
.hw-node.is-active .td-needle-jitter {
  /* Continuous micro-movement, only kicks in once the sweep has settled */
  animation: td-needle-micro-jitter 0.12s infinite alternate ease-in-out;
  animation-delay: 0.8s;
}

/* 4. Glow Intensity Synced to Needle */
.hw-node[data-index="4"].is-active .hw-icon-box {
  border-color: var(--hw-accent);
  /* Brightens intensely matching the 0.8s settle curve */
  box-shadow: 0 0 25px var(--hw-accent-glow);
  transition: border-color 0.8s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.8s cubic-bezier(0.34, 1.56, 0.64, 1),
              color 0.2s;
}

/* --- Keyframes --- */
@keyframes td-robot-rock {
  0%   { transform: translateY(0)      rotate(0deg); }
  25%  { transform: translateY(-2px)   rotate(-1.2deg); }
  50%  { transform: translateY(-3.5px) rotate(0deg); }
  75%  { transform: translateY(-2px)   rotate(1.2deg); }
  100% { transform: translateY(0)      rotate(0deg); }
}
@keyframes td-track-scroll {
  0%   { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -8; }
}
@keyframes td-roller-spin {
  0%   { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -8.6; } /* one full lap of the 2 / 2.3 dash pattern */
}
@keyframes td-eye-blink {
  0%, 90%, 100% { transform: scaleY(1); }
  93%           { transform: scaleY(0.1); }
  96%           { transform: scaleY(1); }
}
@keyframes td-arm-sway-l {
  0%, 100% { transform: rotate(-3deg); }
  50%      { transform: rotate(3deg); }
}
@keyframes td-arm-sway-r {
  0%, 100% { transform: rotate(3deg); }
  50%      { transform: rotate(-3deg); }
}
@keyframes td-needle-micro-jitter {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(3deg); }
}

/* ==========================================
   DEPLOYMENT NODE (STEP 6)
   ========================================== */

/* 50% Size increase matching the other completed steps */
.hw-node[data-index="5"] .hw-icon-box {
  width: 120px;
  height: 120px;
  margin-top: -20px;
  margin-bottom: calc(1rem - 20px);
}

.hw-node[data-index="5"] .hw-icon-box svg {
  width: 100%;
  height: 100%;
}

.hw-svg-deployment {
  --deploy-accent: #10b981;
}

/* ---------- Robot assembly ---------- */

.dep-assembly {
  transform: scale(0.6);
  transform-origin: 60px 60px;
}

/* Eyes: both blink together on a slow, natural cycle (only while active) */
.dep-eye-blink {
  transform-box: fill-box;
  transform-origin: center;
}
.hw-node.is-active .dep-eye-blink {
  animation: depEyeBlink 4s ease-in-out infinite;
}

/* Left arm: rotates POSITIVE (clockwise on screen) from the shoulder,
   which swings the hanging hand out toward the LEFT screen. Taps, then resets. */
.dep-arm-left {
  transform-origin: 32px 49px;
}
.hw-node.is-active .dep-arm-left {
  animation: depArmTapLeft 1.8s infinite;
}

/* Right arm: held in a raised, steady contact position against the right
   screen (not swiping) — a soft idle wobble keeps it from looking frozen. */
.dep-arm-right {
  transform-origin: 88px 49px;
}
.hw-node.is-active .dep-arm-right {
  animation: depArmHoldRight 3.2s ease-in-out infinite;
}

/* ---------- Caterpillar tracks: continuous rolling (only while active) ---------- */

/* Dashed tread outline scrolls around the loop */
.dep-track-path {
  stroke-dasharray: 5 3;
}
.hw-node.is-active .dep-track-path {
  animation: depTrackRoll 1.2s linear infinite;
}

/* Each wheel spins in place, with a spoke so the rotation actually reads */
.dep-track-wheel {
  transform-box: fill-box;
  transform-origin: center;
}
.hw-node.is-active .dep-track-wheel {
  animation: depWheelSpin 1.2s linear infinite;
}

/* ---------- Screens (hidden at rest, fade in on hover) ---------- */

.dep-panel-left,
.dep-panel-right {
  opacity: 0;
  transition: opacity 0.3s;
}
.hw-node.is-active .dep-panel-left {
  opacity: 1;
  transition: opacity 0.3s 0.1s;
}
.hw-node.is-active .dep-panel-right {
  opacity: 1;
  transition: opacity 0.3s 0.2s;
}

.dep-panel-frame {
  filter: drop-shadow(0 0 3px rgba(16, 185, 129, 0.55));
}

.dep-code-line {
  opacity: 0;
}
.hw-node.is-active .dep-code-line {
  animation: depCodeScroll 3.6s linear infinite;
}
.hw-node.is-active .dep-code-line:nth-child(1) { animation-delay: 0s; }
.hw-node.is-active .dep-code-line:nth-child(2) { animation-delay: -0.72s; }
.hw-node.is-active .dep-code-line:nth-child(3) { animation-delay: -1.44s; }
.hw-node.is-active .dep-code-line:nth-child(4) { animation-delay: -2.16s; }
.hw-node.is-active .dep-code-line:nth-child(5) { animation-delay: -2.88s; }

/* Left screen: tap ripple, synced to left-arm contact window (30%-42%) */
.dep-tap-ripple-left {
  transform-origin: 13px 84px;
}
.hw-node.is-active .dep-tap-ripple-left {
  animation: depTapRippleLeft 1.8s infinite;
}

/* Right screen: steady soft glow at the point of continuous contact */
.dep-contact-glow-right {
  transform-box: fill-box;
  transform-origin: center;
}
.hw-node.is-active .dep-contact-glow-right {
  animation: depContactPulse 3.2s ease-in-out infinite;
}

/* ---------- LIVE badge (hidden at rest, fades in last) ---------- */

.dep-live-badge {
  opacity: 0;
  transition: opacity 0.3s;
}
.hw-node.is-active .dep-live-badge {
  opacity: 1;
  transition: opacity 0.3s 0.3s;
}

.dep-live-dot {
  opacity: 0;
}
.hw-node.is-active .dep-live-dot {
  opacity: 1;
  animation: depLiveBlink 1.8s ease-in-out infinite;
}

/* ---------- Rising +$ signs (background, behind the robot; only while active) ---------- */

.dep-money-sign {
  opacity: 0;
}
.hw-node.is-active .dep-money-sign {
  animation: depMoneyRise 5s linear infinite;
}
.hw-node.is-active .dep-money-sign:nth-child(1) { animation-delay: 0s; }
.hw-node.is-active .dep-money-sign:nth-child(2) { animation-delay: -1.25s; }
.hw-node.is-active .dep-money-sign:nth-child(3) { animation-delay: -2.5s; }
.hw-node.is-active .dep-money-sign:nth-child(4) { animation-delay: -3.75s; }

/* --- Keyframes --- */
@keyframes depEyeBlink {
  0%, 92%, 100% { transform: scaleY(1); }
  95%           { transform: scaleY(0.1); }
}
@keyframes depArmTapLeft {
  0%   { transform: rotate(0deg);   animation-timing-function: ease-out; }
  30%  { transform: rotate(30deg);  animation-timing-function: linear; }
  42%  { transform: rotate(30deg);  animation-timing-function: ease-in; }
  65%  { transform: rotate(0deg);   animation-timing-function: linear; }
  100% { transform: rotate(0deg); }
}
@keyframes depArmHoldRight {
  0%, 100% { transform: rotate(-32deg); }
  50%      { transform: rotate(-30deg); }
}
@keyframes depTrackRoll {
  to { stroke-dashoffset: -32px; }
}
@keyframes depWheelSpin {
  to { transform: rotate(360deg); }
}
@keyframes depCodeScroll {
  0%   { transform: translateY(0); opacity: 0; }
  8%   { opacity: 0.9; }
  80%  { opacity: 0.9; }
  100% { transform: translateY(-64px); opacity: 0; }
}
@keyframes depTapRippleLeft {
  0%, 28%  { transform: scale(0.3); opacity: 0; animation-timing-function: ease-out; }
  34%      { transform: scale(0.6); opacity: 0.9; }
  55%      { transform: scale(1.8); opacity: 0; }
  100%     { opacity: 0; }
}
@keyframes depContactPulse {
  0%, 100% { transform: scale(1);    opacity: 0.55; }
  50%      { transform: scale(1.25); opacity: 0.9; }
}
@keyframes depLiveBlink {
  0%, 45%  { opacity: 1; }
  70%      { opacity: 0.2; }
  100%     { opacity: 1; }
}
@keyframes depMoneyRise {
  0%   { transform: translateY(0); opacity: 0; }
  10%  { opacity: 0.65; }
  82%  { opacity: 0.65; }
  100% { transform: translateY(-86px); opacity: 0; }
}

@media (max-width: 1024px) {
  .hw-timeline-wrapper {
    padding: 2rem 1rem;
    /* .hw-nodes-container has min-width: 800px, so narrow viewports need
       horizontal scrolling; keep it clipped only on the x-axis. */
    overflow-x: auto;
    overflow-y: visible;
  }
}

/* ===================== TESTIMONIALS SECTION ===================== */
.testimonial-wrapper {
  max-width: 46rem;
  margin: 0 auto;
  position: relative;
}

.testimonial-card {
  padding: 2.5rem 2rem;
  border-radius: 1rem;
  background-color: hsl(var(--surface));
  border: 1px solid hsl(var(--border));
  text-align: center;
  position: relative;
  min-height: 280px;
  display: grid;
  align-items: center;
  justify-items: center;
}

@media (min-width: 768px) {
  .testimonial-card {
    padding: 3rem 4rem;
  }
}

.testimonial-quote-icon {
  width: 32px;
  height: 32px;
  color: hsl(var(--primary) / 0.35);
  margin-bottom: 1rem;
}

.testimonial-slide {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.testimonial-slide.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  animation: testimonialFade 0.5s ease;
}

@keyframes testimonialFade {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.testimonial-quote {
  font-size: 1.125rem;
  line-height: 1.6;
  color: hsl(var(--foreground));
  margin-bottom: 1.75rem;
  font-weight: 500;
}

@media (min-width: 768px) {
  .testimonial-quote {
    font-size: 1.25rem;
  }
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.testimonial-avatar {
  width: 44px;
  height: 44px;
  border-radius: 9999px;
  background: var(--gradient-primary);
  color: hsl(var(--primary-foreground));
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: 0.875rem;
  flex-shrink: 0;
}

.testimonial-author-info {
  text-align: left;
}

.testimonial-author-name {
  font-weight: 600;
  font-size: 0.9375rem;
  color: hsl(var(--foreground));
}

.testimonial-author-role {
  font-size: 0.8125rem;
  color: hsl(var(--muted-foreground));
}

.testimonial-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 9999px;
  background-color: hsl(var(--surface));
  border: 1px solid hsl(var(--border));
  color: hsl(var(--foreground));
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 2;
}

.testimonial-nav-btn:hover {
  border-color: hsl(var(--primary) / 0.5);
  color: hsl(var(--primary));
}

.testimonial-nav-btn.prev { left: -12px; }
.testimonial-nav-btn.next { right: -12px; }

@media (min-width: 768px) {
  .testimonial-nav-btn.prev { left: -52px; }
  .testimonial-nav-btn.next { right: -52px; }
}

.testimonial-dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
}

.testimonial-dot {
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background-color: hsl(var(--border));
  border: none;
  cursor: pointer;
  padding: 0;
  transition: all 0.25s ease;
}

.testimonial-dot.active {
  background-color: hsl(var(--primary));
  width: 22px;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.modal-close-btn {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  background: none;
  border: none;
  color: hsl(var(--foreground) / 0.7);
  cursor: pointer;
  transition: color 0.2s ease;
}

.modal-close-btn:hover {
  color: hsl(var(--foreground));
}

.modal-content-card {
  max-width: 56rem;
  width: 100%;
  max-height: 90vh;
  border-radius: 0.75rem;
  border: 1px solid hsl(var(--border));
  background-color: hsl(var(--surface));
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: scaleIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes scaleIn {
  from { transform: scale(0.95); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.modal-media-container {
  position: relative;
  width: 100%;
  background-color: hsl(var(--background));
}

.modal-media-container img {
  width: 100%;
  max-height: 55vh;
  object-fit: contain;
  display: block;
}

/* Modal image carousel (multi-image projects) */
.modal-carousel {
  position: relative;
}

.modal-carousel img {
  width: 100%;
  max-height: 55vh;
  object-fit: contain;
  display: block;
}

.modal-carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: hsl(var(--background) / 0.75);
  border: 1px solid hsl(var(--border));
  color: hsl(var(--foreground));
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
  z-index: 3;
}

.modal-carousel-btn:hover {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground, 0 0% 100%));
  transform: translateY(-50%) scale(1.08);
}

.modal-carousel-prev {
  left: 0.75rem;
}

.modal-carousel-next {
  right: 0.75rem;
}

.modal-carousel-dots {
  position: absolute;
  bottom: 0.85rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.4rem;
  z-index: 3;
}

.modal-carousel-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: hsl(var(--background) / 0.9);
  box-shadow: 0 0 0 1px hsl(var(--border));
  cursor: pointer;
  transition: background 0.3s ease, transform 0.3s ease;
}

.modal-carousel-dot.active {
  background: hsl(var(--primary));
  transform: scale(1.3);
}

/* video 16:9 ratio wrapper */
.video-ratio-wrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  width: 100%;
}

.video-ratio-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.modal-info-details {
  padding: 1.5rem;
  overflow-y: auto;
  border-top: 1px solid hsl(var(--border));
}

.modal-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.modal-info-details .modal-title {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}

.modal-info-details .modal-desc {
  font-size: 0.875rem;
  line-height: 1.6;
  margin-bottom: 1rem;
}

.modal-tags-container {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Custom transitions and utility overrides */
.hover\:glow-border:hover {
  border: 1px solid hsl(var(--glow) / 0.4);
  box-shadow: var(--shadow-hover-glow);
}