/* HPCMATE Design Tokens */
:root {
  /* Brand Colors */
  --color-black:       #000000;
  --color-near-black:  #1a1a1a;
  --color-white:       #ffffff;

  /* Accent - Default NVIDIA Green (changeable) */
  --color-accent:      #76b900;
  --color-accent-hover:#1eaedb;
  --color-accent-active:#007fff;

  /* Neutral Scale */
  --color-gray-300:    #a7a7a7;
  --color-gray-400:    #898989;
  --color-gray-500:    #757575;
  --color-gray-border: #5e5e5e;

  /* Semantic */
  --color-link-hover:  #3860be;
  --color-error:       #e52020;
  --color-success:     #3f8500;

  /* Typography */
  --font-primary:      'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-mono:         ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Sizing */
  --radius:            2px;
  --max-width:         1200px;
  --nav-height:        64px;

  /* Shadows */
  --shadow:            rgba(0, 0, 0, 0.3) 0px 0px 5px 0px;
}
/* CSS Reset */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-primary);
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-white);
  background: var(--color-black);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, video {
  max-width: 100%;
  height: auto;
  display: block;
}

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

ul, ol {
  list-style: none;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

input, textarea, select {
  font-family: inherit;
  font-size: inherit;
}
/* Navigation */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--nav-height);
  background: rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 1000;
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease;
}

.nav.scrolled {
  border-bottom-color: var(--color-gray-border);
}

.nav-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-logo {
  font-family: 'Impact', sans-serif;
  font-size: 28px;
  font-weight: 400;
  letter-spacing: 1px;
  color: #e4002b;
}

.nav-logo span {
  color: #e4002b;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
}

.nav-link {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-white);
  transition: color 0.2s ease;
}

.nav-link:hover {
  color: var(--color-link-hover);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.lang-toggle {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-gray-300);
  padding: 4px 8px;
  border: 1px solid var(--color-gray-border);
  border-radius: var(--radius);
  transition: all 0.2s ease;
}

.lang-toggle:hover {
  color: var(--color-white);
  border-color: var(--color-accent);
}

.lang-toggle.active {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

/* Hamburger */
.hamburger {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 10px;
  cursor: pointer;
  z-index: 1001;
}

.hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-white);
  transition: all 0.3s ease;
}

.hamburger.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.hamburger.active span:nth-child(2) {
  opacity: 0;
}

.hamburger.active span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* Mobile Menu */
.mobile-menu {
  display: none;
  position: fixed;
  top: var(--nav-height);
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.98);
  z-index: 999;
  flex-direction: column;
  padding: 48px 24px;
  gap: 24px;
  opacity: 0;
  transform: translateY(-20px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.mobile-menu.open {
  display: flex;
  opacity: 1;
  transform: translateY(0);
}

.mobile-menu .nav-link {
  font-size: 18px;
  text-align: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-gray-border);
}

.mobile-lang-toggle {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--color-gray-border);
}
/* Hero Section - Full-screen Video Carousel */
.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 600px;
  overflow: hidden;
}

.hero-slides {
  position: absolute;
  top: var(--nav-height);
  right: 0;
  bottom: 0;
  left: 0;
}

/* Dark fill for nav area behind transparent nav */
.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--nav-height);
  background: rgba(0, 0, 0, 0.85);
  z-index: 1;
  pointer-events: none;
}

.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1s ease;
}

.hero-slide.active {
  opacity: 1;
}

.hero-slide video {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: scale-down;
}

/* Gradient overlay on videos */
.hero-slide::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.3) 0%,
    rgba(0, 0, 0, 0.1) 40%,
    rgba(0, 0, 0, 0.4) 70%,
    rgba(0, 0, 0, 0.85) 100%
  );
}

.hero-content {
  position: absolute;
  bottom: 15%;
  left: 0;
  right: 0;
  z-index: 10;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

.hero-label {
  font-family: 'Impact', sans-serif;
  font-size: 20px;
  font-weight: 400;
  text-transform: uppercase;
  color: #e4002b;
  letter-spacing: 3px;
  margin-bottom: 16px;
  opacity: 0;
  transform: translateY(20px);
  animation: heroFadeUp 0.8s ease 0.3s forwards;
}

.hero-title {
  font-size: 48px;
  font-weight: 700;
  line-height: 1.15;
  color: #76b900;
  max-width: 800px;
  margin-bottom: 20px;
  opacity: 0;
  transform: translateY(20px);
  animation: heroFadeUp 0.8s ease 0.5s forwards;
}

.hero-subtitle {
  font-size: 18px;
  font-weight: 400;
  line-height: 1.67;
  color: #76b900;
  max-width: 600px;
  margin-bottom: 32px;
  opacity: 0;
  transform: translateY(20px);
  animation: heroFadeUp 0.8s ease 0.7s forwards;
}

.hero-cta {
  display: inline-block;
  padding: 11px 24px;
  font-size: 16px;
  font-weight: 700;
  color: var(--color-white);
  background: transparent;
  border: 2px solid var(--color-accent);
  border-radius: var(--radius);
  transition: all 0.2s ease;
  opacity: 0;
  transform: translateY(20px);
  animation: heroFadeUp 0.8s ease 0.9s forwards;
}

.hero-cta:hover {
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
}

/* Carousel Controls */
.carousel-controls {
  position: absolute;
  bottom: 5%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.carousel-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-gray-500);
  cursor: pointer;
  transition: all 0.3s ease;
  border: none;
  /* Fix: override CSS reset button styles to prevent 0x0 collapse */
  display: block;
  flex-shrink: 0;
  padding: 0;
  font-size: 0;
  line-height: 0;
  min-width: 14px;
  min-height: 14px;
  box-sizing: border-box;
}

.carousel-dot.active {
  background: #ffffff;
  transform: scale(1.2);
}

.carousel-dot:hover {
  background: var(--color-gray-300);
}

.carousel-arrows {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  z-index: 20;
  display: flex;
  justify-content: space-between;
  padding: 0 16px;
  pointer-events: none;
}

.carousel-arrow {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid var(--color-gray-border);
  border-radius: var(--radius);
  color: var(--color-white);
  font-size: 20px;
  cursor: pointer;
  pointer-events: all;
  transition: all 0.2s ease;
}

.carousel-arrow:hover {
  background: rgba(0, 0, 0, 0.8);
  border-color: var(--color-accent);
  color: var(--color-accent);
}

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

/* Fallback slide background */
.slide-bg {
  position: absolute;
  inset: 0;
  background: var(--color-near-black);
}

.slide-bg--1 {
  background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 50%, #0a0a0a 100%);
}

.slide-bg--2 {
  background: linear-gradient(135deg, #0a0a0a 0%, #0d1b2a 50%, #0a0a0a 100%);
}

.slide-bg--3 {
  background: linear-gradient(135deg, #0a0a0a 0%, #1a0a0a 50%, #0a0a0a 100%);
}
/* Shared Section Styles */
.section {
  padding: 80px 24px;
}

.section-inner {
  max-width: var(--max-width);
  margin: 0 auto;
}

.section-label {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-accent);
  letter-spacing: 2px;
  margin-bottom: 12px;
}

.section-title {
  font-size: 36px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-white);
  margin-bottom: 16px;
}

.section-desc {
  font-size: 18px;
  font-weight: 400;
  line-height: 1.67;
  color: var(--color-gray-300);
  max-width: 700px;
  margin-bottom: 48px;
}

/* Dark section (default) */
.section--dark {
  background: var(--color-black);
}

/* Light section */
.section--light {
  background: var(--color-white);
}

.section--light .section-title {
  color: var(--color-black);
}

.section--light .section-desc {
  color: var(--color-gray-500);
}

.section--light .section-label {
  color: var(--color-accent);
}

/* Section divider */
.section-divider {
  height: 1px;
  background: var(--color-gray-border);
  max-width: var(--max-width);
  margin: 0 auto;
}
/* Products - Bento Grid */
.products-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}



.product-card {
  background: var(--color-near-black);
  border: 1px solid var(--color-gray-border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
}

.product-card:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}

.product-card__image {
  height: 200px;
  background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  color: var(--color-accent);
  position: relative;
  overflow: hidden;
}

.product-card__image::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--color-accent);
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.product-card:hover .product-card__image::after {
  transform: scaleX(1);
}

.product-card__body {
  padding: 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.product-card__title {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-white);
  margin-bottom: 8px;
}

.product-card__desc {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.67;
  color: var(--color-gray-300);
  margin-bottom: 16px;
  flex: 1;
}

.product-card__specs {
  list-style: none;
  margin-bottom: 16px;
}

.product-card__specs li {
  font-size: 14px;
  color: var(--color-gray-400);
  padding: 4px 0;
  border-bottom: 1px solid rgba(94, 94, 94, 0.3);
}

.product-card__specs li:last-child {
  border-bottom: none;
}

.product-card__specs li strong {
  color: var(--color-gray-300);
  font-weight: 600;
}

.product-card__cta {
  display: none;
}

.product-card__cta:hover {
  background: var(--color-accent);
  color: var(--color-black);
}

/* Default product card (all same size, 4 cards in grid) */

/* Technologies Grid */
.tech-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.tech-card {
  background: var(--color-near-black);
  border: 1px solid var(--color-gray-border);
  border-radius: var(--radius);
  padding: 32px 24px;
  text-align: center;
  transition: all 0.3s ease;
}

.tech-card:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow);
}

.tech-card__icon {
  margin-bottom: 16px;
  color: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
}

.tech-card__icon .icon-svg {
  width: 64px;
  height: 64px;
}

/* --- Thermodynamics icon: chip + hover cooling effect --- */
.thermo-icon .chip-body {
  fill: #1a1a2e;
  stroke: #ff4422;
  stroke-width: 2.5;
  transition: stroke 0.7s ease, fill 0.7s ease;
}
.thermo-icon .pin {
  stroke: #ff4422;
  stroke-width: 1.8;
  transition: stroke 0.7s ease;
}
.thermo-icon .circuit {
  stroke: #ff6633;
  stroke-width: 1.5;
  fill: none;
  transition: stroke 0.7s ease;
}
.thermo-icon .heat {
  stroke: #ff5522;
  stroke-width: 2;
  stroke-linecap: round;
  fill: none;
  opacity: 1;
  transition: opacity 0.7s ease;
  animation: heat-shimmer 2.4s ease-in-out infinite;
}
/* Idle shimmer — staggered wave ripple (heat paths are path #1-5 in the svg) */
.thermo-icon .heat:nth-of-type(2) { animation-delay: 0.3s; }
.thermo-icon .heat:nth-of-type(3) { animation-delay: 0.6s; }
.thermo-icon .heat:nth-of-type(4) { animation-delay: 0.9s; }
.thermo-icon .heat:nth-of-type(5) { animation-delay: 1.2s; }

@keyframes heat-shimmer {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; }
}
.thermo-icon .coolant-pipe {
  stroke: #00ccff;
  stroke-width: 2.5;
  stroke-linecap: round;
  fill: none;
  opacity: 0;
  transition: opacity 0.7s ease;
}
.thermo-icon .coolant-flow {
  stroke: #00ccff;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 10 6;
  fill: none;
  opacity: 0;
  transition: opacity 0.7s ease;
}
.thermo-icon .coolant-drop {
  fill: #00ddff;
  opacity: 0;
  transition: opacity 0.5s ease;
}

/* Hover: cooling mode */
.tech-card:hover .thermo-icon .chip-body {
  stroke: #00ccff;
  fill: #0a1628;
}
.tech-card:hover .thermo-icon .pin {
  stroke: #00aadd;
}
.tech-card:hover .thermo-icon .circuit {
  stroke: #00ccff;
}
.tech-card:hover .thermo-icon .heat {
  opacity: 0;
  animation: none;
}
.tech-card:hover .thermo-icon .coolant-pipe {
  opacity: 0.7;
}
.tech-card:hover .thermo-icon .coolant-flow {
  opacity: 0.9;
  animation: coolant-move 0.8s linear infinite;
}
.tech-card:hover .thermo-icon .coolant-drop {
  opacity: 0.8;
}

@keyframes coolant-move {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: -16; }
}

/* --- Fluid Dynamics icon: pipe network + coolant flow --- */
.fluid-icon .pipe {
  stroke: #3a3f47;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  transition: stroke 0.6s ease;
}
.fluid-icon .pipe-junction {
  fill: #3a3f47;
  stroke: none;
  transition: fill 0.6s ease;
}
.fluid-icon .flow {
  stroke: #00ccff;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 8 10;
  fill: none;
  opacity: 0.5;
  animation: fluid-flow 2s linear infinite;
  transition: opacity 0.6s ease, stroke-width 0.6s ease;
}
.fluid-icon .vortex {
  fill: none;
  stroke: #00ccff;
  stroke-width: 1.5;
  opacity: 0.15;
  transition: opacity 0.6s ease;
  animation: vortex-spin 4s linear infinite;
}
.fluid-icon .drop {
  fill: #00ccff;
  opacity: 0.25;
  transition: opacity 0.4s ease;
  animation: drop-bounce 2.6s ease-in-out infinite;
}
/* Idle bounce stagger — drops are circle #6-8 (after 5 pipe-junctions) */
.fluid-icon .drop:nth-of-type(6) { animation-delay: 0s; }
.fluid-icon .drop:nth-of-type(7) { animation-delay: 0.6s; }
.fluid-icon .drop:nth-of-type(8) { animation-delay: 1.2s; }

/* Hover: fast flow mode */
.tech-card:hover .fluid-icon .pipe {
  stroke: #00aadd;
}
.tech-card:hover .fluid-icon .pipe-junction {
  fill: #00ccff;
}
.tech-card:hover .fluid-icon .flow {
  opacity: 1;
  stroke-width: 3.5;
  animation-duration: 0.5s;
}
.tech-card:hover .fluid-icon .vortex {
  opacity: 0.8;
  animation: vortex-spin 1.5s linear infinite;
}
.tech-card:hover .fluid-icon .drop {
  opacity: 0.7;
  animation: drop-bounce 1s ease-in-out infinite;
}

@keyframes fluid-flow {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: -36; }
}
@keyframes vortex-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes drop-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

/* === Hardware Icon (Exploded View → Assembly) === */
.hw-icon {
  overflow: visible;
}

/* Basic floating animation for exploded parts */
.hw-gpu {
  animation: hw-float-top 3s ease-in-out infinite;
}
.hw-ram1 {
  animation: hw-float-left 3s ease-in-out infinite;
}
.hw-ram2 {
  animation: hw-float-left 3s ease-in-out infinite 0.15s;
}
.hw-psu {
  animation: hw-float-right 3s ease-in-out infinite;
}
.hw-heatsink {
  animation: hw-float-bottom 3s ease-in-out infinite;
}
.hw-psu-light {
  animation: hw-blink 2s ease-in-out infinite;
}

@keyframes hw-float-top {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
@keyframes hw-float-left {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(-2px); }
}
@keyframes hw-float-right {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(2px); }
}
@keyframes hw-float-bottom {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(3px); }
}
@keyframes hw-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* Hover: Assembly - parts converge */
.tech-card:hover .hw-gpu {
  animation: hw-assemble-gpu 0.6s ease-out forwards;
}
.tech-card:hover .hw-ram1 {
  animation: hw-assemble-ram1 0.6s ease-out forwards;
}
.tech-card:hover .hw-ram2 {
  animation: hw-assemble-ram2 0.6s ease-out forwards;
}
.tech-card:hover .hw-psu {
  animation: hw-assemble-psu 0.6s ease-out forwards;
}
.tech-card:hover .hw-heatsink {
  animation: hw-assemble-heatsink 0.6s ease-out forwards;
}
.tech-card:hover .hw-psu-light {
  animation: none;
  fill: #4aff8a;
}
.tech-card:hover .hw-mobo {
  fill: #5a6a7a;
  stroke: #7a8a9a;
}
.tech-card:hover .hw-cpu {
  fill: #7a8a9a;
}
.tech-card:hover .hw-trace {
  stroke: #6a9aba;
}
.tech-card:hover .hw-connect {
  opacity: 1;
  animation: hw-dash-flow 0.5s linear infinite;
}
.tech-card:hover .hw-flash {
  animation: hw-flash-pop 0.6s ease-out forwards;
}

@keyframes hw-assemble-gpu {
  0% { transform: translateY(0); }
  100% { transform: translateY(12px); }
}
@keyframes hw-assemble-ram1 {
  0% { transform: translateX(0); }
  100% { transform: translateX(12px); }
}
@keyframes hw-assemble-ram2 {
  0% { transform: translateX(0); }
  100% { transform: translateX(6px); }
}
@keyframes hw-assemble-psu {
  0% { transform: translateX(0); }
  100% { transform: translateX(-12px); }
}
@keyframes hw-assemble-heatsink {
  0% { transform: translateY(0); }
  100% { transform: translateY(-14px); }
}
@keyframes hw-dash-flow {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: -4; }
}
@keyframes hw-flash-pop {
  0% { opacity: 0; r: 15; stroke-width: 4; }
  50% { opacity: 0.8; }
  100% { opacity: 0; r: 30; stroke-width: 0; }
}

/* === Software Icon (Stack Blocks) === */
.sw-icon {
  overflow: visible;
}

.sw-block {
  transition: fill 0.3s ease, stroke 0.3s ease;
}

/* Subtle idle glow on all blocks */
.sw-os { animation: sw-idle 4s ease-in-out infinite; }
.sw-fw { animation: sw-idle 4s ease-in-out infinite 0.5s; }
.sw-ai { animation: sw-idle 4s ease-in-out infinite 1s; }
.sw-ml { animation: sw-idle 4s ease-in-out infinite 1.5s; }
.sw-app { animation: sw-idle 4s ease-in-out infinite 2s; }
.sw-svc { animation: sw-idle 4s ease-in-out infinite 2.5s; }

@keyframes sw-idle {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.85; }
}

/* Hover: random-looking blink — staggered so 2-3 blink at a time */
.tech-card:hover .sw-os {
  animation: sw-blink-1 2s ease-in-out infinite;
}
.tech-card:hover .sw-fw {
  animation: sw-blink-2 2s ease-in-out infinite;
}
.tech-card:hover .sw-ai {
  animation: sw-blink-3 2s ease-in-out infinite;
}
.tech-card:hover .sw-ml {
  animation: sw-blink-1 2s ease-in-out infinite 0.3s;
}
.tech-card:hover .sw-app {
  animation: sw-blink-2 2s ease-in-out infinite 0.6s;
}
.tech-card:hover .sw-svc {
  animation: sw-blink-3 2s ease-in-out infinite 0.9s;
}

/* Blink pattern 1: flash at 0%, 40% */
@keyframes sw-blink-1 {
  0% { opacity: 1; filter: brightness(1); }
  5% { opacity: 0.4; filter: brightness(1.8); }
  10% { opacity: 1; filter: brightness(1); }
  40% { opacity: 1; filter: brightness(1); }
  45% { opacity: 0.3; filter: brightness(2); }
  50% { opacity: 1; filter: brightness(1); }
  100% { opacity: 1; filter: brightness(1); }
}

/* Blink pattern 2: flash at 15%, 60% */
@keyframes sw-blink-2 {
  15% { opacity: 1; filter: brightness(1); }
  20% { opacity: 0.4; filter: brightness(1.8); }
  25% { opacity: 1; filter: brightness(1); }
  60% { opacity: 1; filter: brightness(1); }
  65% { opacity: 0.3; filter: brightness(2); }
  70% { opacity: 1; filter: brightness(1); }
}

/* Blink pattern 3: flash at 25%, 75% */
@keyframes sw-blink-3 {
  25% { opacity: 1; filter: brightness(1); }
  30% { opacity: 0.4; filter: brightness(1.8); }
  35% { opacity: 1; filter: brightness(1); }
  75% { opacity: 1; filter: brightness(1); }
  80% { opacity: 0.3; filter: brightness(2); }
  85% { opacity: 1; filter: brightness(1); }
}

/* On hover, highlight blocks on flash */
.tech-card:hover .sw-os { fill: #3a4a7a; stroke: #6a8aff; }
.tech-card:hover .sw-fw { fill: #3a6a4a; stroke: #6affaa; }
.tech-card:hover .sw-ai { fill: #4a3a7a; stroke: #9a6aff; }
.tech-card:hover .sw-ml { fill: #3a4a6a; stroke: #6a9aff; }
.tech-card:hover .sw-app { fill: #6a4a3a; stroke: #ff9a6a; }
.tech-card:hover .sw-svc { fill: #4a6a3a; stroke: #9aff6a; }

.tech-card:hover .sw-arrow {
  opacity: 1;
  stroke: #4affaa;
}

.tech-card__title {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-white);
  margin-bottom: 8px;
}

.tech-card__desc {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-gray-400);
}
/* Contact Section */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
}

.contact-info {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.contact-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.contact-item__icon {
  font-size: 20px;
  color: var(--color-accent);
  margin-top: 2px;
  flex-shrink: 0;
}

.contact-item__label {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-gray-400);
  margin-bottom: 4px;
}

.contact-item__value {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-white);
}

.contact-item__value a {
  color: var(--color-white);
  transition: color 0.2s ease;
}

.contact-item__value a:hover {
  color: var(--color-accent);
}

/* Contact Form */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

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

.form-label {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-gray-400);
}

.form-input,
.form-textarea {
  padding: 10px 12px;
  font-size: 16px;
  color: var(--color-white);
  background: var(--color-near-black);
  border: 1px solid var(--color-gray-border);
  border-radius: var(--radius);
  transition: border-color 0.2s ease;
}

.form-input:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--color-accent);
}

.form-textarea {
  min-height: 120px;
  resize: vertical;
}

.form-submit {
  padding: 11px 24px;
  font-size: 16px;
  font-weight: 700;
  color: var(--color-black);
  background: var(--color-accent);
  border: 2px solid var(--color-accent);
  border-radius: var(--radius);
  transition: all 0.2s ease;
  align-self: flex-start;
}

.form-submit:hover {
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
  color: var(--color-white);
}

/* Map placeholder */
.contact-map {
  margin-top: 48px;
  height: 300px;
  background: var(--color-near-black);
  border: 1px solid var(--color-gray-border);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gray-500);
  font-size: 14px;
}
/* Footer */
.footer {
  background: var(--color-black);
  border-top: 1px solid var(--color-gray-border);
  padding: 48px 24px 24px;
}

.footer-inner {
  max-width: var(--max-width);
  margin: 0 auto;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 48px;
}

.footer-brand {
  max-width: 300px;
}

.footer-logo {
  font-family: 'Impact', sans-serif;
  font-size: 28px;
  font-weight: 400;
  letter-spacing: 1px;
  color: #e4002b;
  margin-bottom: 16px;
}

.footer-logo span {
  color: #e4002b;
}

.footer-tagline {
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-gray-500);
}

.footer-col__title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-white);
  margin-bottom: 16px;
}

.footer-col__link {
  display: block;
  font-size: 14px;
  color: var(--color-gray-400);
  padding: 4px 0;
  transition: color 0.2s ease;
}

.footer-col__link:hover {
  color: var(--color-accent);
}

.footer-bottom {
  padding-top: 24px;
  border-top: 1px solid var(--color-gray-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer-copyright {
  font-size: 12px;
  color: var(--color-gray-500);
}

.footer-legal {
  display: flex;
  gap: 24px;
}

.footer-legal a {
  font-size: 12px;
  color: var(--color-gray-500);
  transition: color 0.2s ease;
}

.footer-legal a:hover {
  color: var(--color-accent);
}
/* Scroll Animations */
.fade-in {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

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

/* Stagger children */
.stagger > * {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.stagger.visible > *:nth-child(1) { transition-delay: 0ms; }
.stagger.visible > *:nth-child(2) { transition-delay: 100ms; }
.stagger.visible > *:nth-child(3) { transition-delay: 200ms; }
.stagger.visible > *:nth-child(4) { transition-delay: 300ms; }
.stagger.visible > *:nth-child(5) { transition-delay: 400ms; }
.stagger.visible > *:nth-child(6) { transition-delay: 500ms; }

.stagger.visible > * {
  opacity: 1;
  transform: translateY(0);
}

/* Scale in */
.scale-in {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.scale-in.visible {
  opacity: 1;
  transform: scale(1);
}

/* Kinetic text */
.kinetic-text {
  opacity: 0;
  transform: translateY(40px) rotateX(-15deg);
  transition: opacity 0.8s ease, transform 0.8s ease;
  transform-origin: center bottom;
}

.kinetic-text.visible {
  opacity: 1;
  transform: translateY(0) rotateX(0);
}
/* Responsive Breakpoints */

/* Large Tablet / Small Desktop (max-width: 1200px) */
@media (max-width: 1200px) {
  .hero-title {
    font-size: 42px;
  }

  .hero-subtitle {
    font-size: 17px;
  }
}

/* Tablet Landscape (max-width: 1024px) */
@media (max-width: 1024px) {
  .products-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .tech-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }

  .hero-title {
    font-size: 36px;
  }
}

/* Tablet Portrait (max-width: 768px) */
@media (max-width: 768px) {
  .section {
    padding: 48px 16px;
  }

  .section-title {
    font-size: 28px;
  }

  .section-desc {
    font-size: 16px;
    margin-bottom: 32px;
  }

  /* Nav */
  .nav-links {
    display: none;
  }

  .nav-actions .lang-toggle {
    display: none;
  }

  .hamburger {
    display: flex;
  }

  /* Hero */
  .hero-title {
    font-size: 28px;
  }

  .hero-subtitle {
    font-size: 15px;
  }

  .hero-content {
    bottom: 20%;
  }

  .carousel-arrows {
    display: none;
  }

  /* Products */
  .products-grid {
    grid-template-columns: 1fr;
  }

  /* Tech */
  .tech-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .tech-card {
    padding: 24px 16px;
  }

  /* Contact */
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  /* Footer */
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }
}

/* Mobile Landscape (short viewport) */
@media (max-width: 768px) and (orientation: landscape) {
  .hero {
    min-height: 400px;
  }

  .hero-content {
    bottom: 10%;
    padding: 0 16px;
  }

  .hero-title {
    font-size: 24px;
    margin-bottom: 12px;
  }

  .hero-subtitle {
    font-size: 14px;
    margin-bottom: 20px;
    max-width: 500px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .hero-label {
    font-size: 14px;
    margin-bottom: 8px;
  }

  .hero-cta {
    padding: 8px 16px;
    font-size: 13px;
  }

  .carousel-controls {
    bottom: 3%;
    gap: 12px;
  }

  .carousel-dot {
    width: 10px;
    height: 10px;
    min-width: 10px;
    min-height: 10px;
  }

  .section {
    padding: 32px 16px;
  }
}

/* Small Mobile (max-width: 480px) */
@media (max-width: 480px) {
  .hero-title {
    font-size: 24px;
  }

  .hero-subtitle {
    font-size: 14px;
  }

  .hero-content {
    bottom: 24%;
    padding: 0 16px;
  }

  .hero-label {
    font-size: 14px;
  }

  .hero-cta {
    padding: 8px 16px;
    font-size: 13px;
  }

  .carousel-controls {
    gap: 12px;
  }

  .carousel-dot {
    width: 10px;
    height: 10px;
    min-width: 10px;
    min-height: 10px;
  }

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

  .nav-logo {
    font-size: 18px;
  }

  .section-title {
    font-size: 24px;
  }

  .section-desc {
    font-size: 15px;
  }

  .section-label {
    font-size: 13px;
  }

  .product-card__body {
    padding: 16px 12px;
  }
}

/* Small Mobile Landscape (very short viewport) */
@media (max-width: 480px) and (orientation: landscape) {
  .hero {
    min-height: 320px;
  }

  .hero-content {
    bottom: 8%;
    padding: 0 12px;
  }

  .hero-title {
    font-size: 20px;
    margin-bottom: 8px;
  }

  .hero-subtitle {
    font-size: 12px;
    margin-bottom: 16px;
    max-width: 400px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .hero-label {
    font-size: 12px;
    margin-bottom: 6px;
  }

  .hero-cta {
    padding: 6px 12px;
    font-size: 12px;
  }

  .carousel-controls {
    bottom: 2%;
    gap: 8px;
  }

  .carousel-dot {
    width: 8px;
    height: 8px;
    min-width: 8px;
    min-height: 8px;
  }

  .section {
    padding: 24px 12px;
  }

  .section-title {
    font-size: 22px;
  }
}

/* Extra Small Mobile (max-width: 375px) */
@media (max-width: 375px) {
  .hero-title {
    font-size: 22px;
  }

  .hero-subtitle {
    font-size: 13px;
  }

  .hero-content {
    bottom: 25%;
    padding: 0 12px;
  }

  .hero-label {
    font-size: 13px;
    margin-bottom: 8px;
  }

  .hero-cta {
    padding: 8px 14px;
    font-size: 12px;
  }

  .carousel-dot {
    width: 8px;
    height: 8px;
    min-width: 8px;
    min-height: 8px;
  }

  .carousel-controls {
    gap: 10px;
  }

  .section {
    padding: 36px 12px;
  }

  .section-title {
    font-size: 22px;
  }

  .section-desc {
    font-size: 14px;
  }

  .nav-logo {
    font-size: 16px;
  }

  .tech-card {
    padding: 20px 12px;
  }

  .product-card__body {
    padding: 16px 12px;
  }
}

/* Tiny Mobile (max-width: 320px) */
@media (max-width: 320px) {
  .hero-title {
    font-size: 20px;
  }

  .hero-subtitle {
    font-size: 12px;
  }

  .hero-content {
    bottom: 26%;
    padding: 0 10px;
  }

  .hero-label {
    font-size: 12px;
  }

  .hero-cta {
    padding: 6px 12px;
    font-size: 11px;
  }

  .carousel-dot {
    width: 8px;
    height: 8px;
    min-width: 8px;
    min-height: 8px;
  }

  .carousel-controls {
    gap: 8px;
  }

  .section {
    padding: 28px 10px;
  }

  .section-title {
    font-size: 20px;
  }

  .section-desc {
    font-size: 13px;
  }

  .nav-logo {
    font-size: 14px;
  }

  .contact-grid {
    gap: 20px;
  }

  .footer-grid {
    gap: 16px;
  }
}

/* Touch device optimizations (larger tap targets) */
@media (hover: none) and (pointer: coarse) {
  .carousel-dot {
    width: 16px;
    height: 16px;
    min-width: 16px;
    min-height: 16px;
  }

  .carousel-controls {
    gap: 20px;
  }

  .nav-link {
    padding: 8px 0;
  }

  .lang-toggle {
    padding: 6px 10px;
  }

  .form-input,
  .form-textarea {
    font-size: 16px; /* Prevents iOS zoom on focus */
  }

  .product-card__cta {
    padding: 10px 20px;
  }
}

/* NOTE: prefers-reduced-motion override removed (2026-08-23, CEO decision) —
   site animations must always run for product demo. Re-add the block if
   accessibility compliance for reduced-motion users becomes a requirement. */

/* Dynamic viewport height (mobile browsers — accounts for address bar) */
@supports (height: 100dvh) {
  .hero {
    height: 100dvh;
    min-height: 600px;
  }
}

/* High DPI / Retina display optimizations */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .hero-slide::after {
    /* Sharper gradient on high-DPI screens */
    background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.3) 0%,
      rgba(0, 0, 0, 0.1) 40%,
      rgba(0, 0, 0, 0.4) 70%,
      rgba(0, 0, 0, 0.85) 100%
    );
  }
}

/* Foldable / large mobile screens */
@media (min-width: 481px) and (max-width: 768px) and (orientation: portrait) {
  .hero-title {
    font-size: 26px;
  }

  .hero-subtitle {
    font-size: 15px;
  }

  .tech-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ========================================
   GPGPU Server Card Icon Animation
   ======================================== */
.gpgpu-card-icon {
  width: 80px;
  height: 80px;
}

.gpgpu-die {
  fill: #4a5a7a;
  stroke: #6a8aaa;
  stroke-width: 1.5;
  animation: gpgpuPulse 3s ease-in-out infinite;
}

@keyframes gpgpuPulse {
  0%, 100% { fill: #4a5a7a; }
  50% { fill: #5a7a9a; }
}

.gpgpu-pin {
  stroke: #8ab4d4;
  stroke-width: 1.2;
  animation: gpgpuPinGlow 2s ease-in-out infinite alternate;
}

@keyframes gpgpuPinGlow {
  0% { stroke: #6a8aaa; }
  100% { stroke: #8ab4d4; }
}

.gpgpu-thermal-wave {
  stroke: #ff6b35;
  stroke-width: 1.5;
  stroke-linecap: round;
  animation: gpgpuHeat 1.5s ease-in-out infinite;
}

.gpgpu-thermal-wave:nth-child(2) {
  animation-delay: 0.5s;
}

@keyframes gpgpuHeat {
  0%, 100% { opacity: 0.4; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-3px); }
}

.gpgpu-liquid {
  stroke: #35b4ff;
  stroke-width: 1.5;
  stroke-linecap: round;
  animation: gpgpuFlow 3s ease-in-out infinite;
}

.gpgpu-drop {
  fill: #35b4ff;
  animation: gpgpuDropFlow 3s ease-in-out infinite;
}

.gpgpu-drop:nth-child(2) {
  animation-delay: 0.3s;
}
.gpgpu-drop:nth-child(3) {
  animation-delay: 0.6s;
}
.gpgpu-drop:nth-child(4) {
  animation-delay: 0.9s;
}
.gpgpu-drop:nth-child(5) {
  animation-delay: 1.2s;
}

@keyframes gpgpuFlow {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

@keyframes gpgpuDropFlow {
  0%, 100% { r: 1.5; opacity: 0.6; }
  50% { r: 2; opacity: 1; }
}

/* ========================================
   Micro Data Center Card Icon Animation
   ======================================== */
.mdc-card-icon {
  width: 80px;
  height: 80px;
}

.mdc-card-icon .rack-unit {
  animation: rackBreath 4s ease-in-out infinite;
}

.mdc-card-icon .rack-unit:nth-child(2) { animation-delay: 0.0s; }
.mdc-card-icon .rack-unit:nth-child(3) { animation-delay: 0.3s; }
.mdc-card-icon .rack-unit:nth-child(4) { animation-delay: 0.6s; }
.mdc-card-icon .rack-unit:nth-child(5) { animation-delay: 0.9s; }

@keyframes rackBreath {
  0%, 100% { opacity: 0.85; }
  50% { opacity: 1; }
}

.mdc-card-icon .rack-led {
  animation: ledBlink 2s ease-in-out infinite;
}

.mdc-card-icon .rack-led:nth-child(odd) { animation-delay: 0.0s; }
.mdc-card-icon .rack-led:nth-child(even) { animation-delay: 0.5s; }
.mdc-card-icon .rack-led:nth-child(2) { animation-delay: 0.2s; }
.mdc-card-icon .rack-led:nth-child(3) { animation-delay: 0.7s; }
.mdc-card-icon .rack-led:nth-child(4) { animation-delay: 0.4s; }
.mdc-card-icon .rack-led:nth-child(5) { animation-delay: 0.9s; }

@keyframes ledBlink {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

.mdc-card-icon .cool-air {
  stroke: #00e5ff;
  stroke-width: 0.5;
  stroke-dasharray: 2, 3;
  animation: coolAirFlow 2s linear infinite;
}

.mdc-card-icon .cool-air:nth-child(13) { animation-delay: 0s; }
.mdc-card-icon .cool-air:nth-child(14) { animation-delay: 0.5s; }
.mdc-card-icon .cool-air:nth-child(15) { animation-delay: 1s; }
.mdc-card-icon .cool-air:nth-child(16) { animation-delay: 1.5s; }

@keyframes coolAirFlow {
  0% { stroke-dashoffset: 0; opacity: 0.4; }
  50% { opacity: 0.9; }
  100% { stroke-dashoffset: -10; opacity: 0.4; }
}

.mdc-card-icon .frost {
  stroke: #6ac4ff;
  stroke-width: 0.8;
  animation: frostEffect 3s ease-in-out infinite;
}

.mdc-card-icon .frost:nth-child(17) { animation-delay: 0.0s; }
.mdc-card-icon .frost:nth-child(18) { animation-delay: 0.5s; }
.mdc-card-icon .frost:nth-child(19) { animation-delay: 1s; }
.mdc-card-icon .frost:nth-child(20) { animation-delay: 1.5s; }

@keyframes frostEffect {
  0%, 100% { opacity: 0.3; transform: translateX(0); }
  50% { opacity: 0.8; transform: translateX(2px); }
}

.mdc-card-icon .drive-bay {
  fill: #3a4a5a;
  stroke: #5a7a9a;
  animation: driveIdle 5s ease-in-out infinite;
}

.mdc-card-icon .drive-bay:nth-child(5) { animation-delay: 0.2s; }
.mdc-card-icon .drive-bay:nth-child(6) { animation-delay: 0.4s; }
.mdc-card-icon .drive-bay:nth-child(7) { animation-delay: 0.6s; }
.mdc-card-icon .drive-bay:nth-child(8) { animation-delay: 0.8s; }
.mdc-card-icon .drive-bay:nth-child(9) { animation-delay: 1.0s; }

@keyframes driveIdle {
  0%, 100% { fill: #3a4a5a; }
  50% { fill: #4a6a7a; }
}

.mdc-card-icon .server-card {
  fill: #3a5a6a;
  stroke: #5a8a9a;
  animation: cardActive 4s ease-in-out infinite;
}

.mdc-card-icon .server-card:nth-child(10) { animation-delay: 0.0s; }
.mdc-card-icon .server-card:nth-child(11) { animation-delay: 0.5s; }
.mdc-card-icon .server-card:nth-child(12) { animation-delay: 1.0s; }
.mdc-card-icon .server-card:nth-child(13) { animation-delay: 1.5s; }

@keyframes cardActive {
  0%, 100% { fill: #3a5a6a; }
  50% { fill: #4a7a8a; }
}

/* ========================================
   Direct-to-Chip (D2C) Liquid Cooling Icon
   ======================================== */

/* D2C Card Icon Container */
.d2c-card-icon {
  overflow: visible;
}

/* Cold plate glow */
.d2c-card-icon .d2c-block {
  stroke: #4a6a9a;
  stroke-width: 1.2;
  animation: d2cBlockGlow 3s ease-in-out infinite;
}

@keyframes d2cBlockGlow {
  0%, 100% { stroke: #4a6a9a; }
  50% { stroke: #6a8aba; }
}

/* Chip die */
.d2c-card-icon .d2c-die {
  fill: #3a4a6a;
  stroke: #5a7a9a;
}

/* Thermal interface — subtle heat glow */
.d2c-card-icon .d2c-thermal {
  fill: #ff6b35;
  animation: d2cThermalPulse 2s ease-in-out infinite;
}

@keyframes d2cThermalPulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.8; }
}

/* Coolant channels — flowing animation */
.d2c-card-icon .d2c-channel-in {
  stroke: #35b4ff;
  stroke-width: 0.8;
  stroke-dasharray: 2, 2;
  animation: d2cCoolantFlow 1.5s linear infinite;
}

.d2c-card-icon .d2c-channel-out {
  stroke: #ff6b35;
  stroke-width: 0.8;
  stroke-dasharray: 2, 2;
  animation: d2cCoolantFlow 1.5s linear infinite reverse;
}

@keyframes d2cCoolantFlow {
  0% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -8; }
}

/* Coolant flow arrows pulse */
.d2c-card-icon .d2c-arrow {
  animation: d2cArrowPulse 1.5s ease-in-out infinite;
}

.d2c-card-icon .d2c-arrow:nth-child(12) { animation-delay: 0s; }
.d2c-card-icon .d2c-arrow:nth-child(13) { animation-delay: 0.75s; }

@keyframes d2cArrowPulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

/* Heat rising from die */
.d2c-card-icon .d2c-heat1,
.d2c-card-icon .d2c-heat2,
.d2c-card-icon .d2c-heat3 {
  stroke: #ff6b35;
  stroke-width: 1;
  stroke-linecap: round;
  opacity: 0.5;
  animation: d2cHeatRise 2.5s ease-in-out infinite;
}

.d2c-card-icon .d2c-heat1 { animation-delay: 0s; }
.d2c-card-icon .d2c-heat2 { animation-delay: 0.8s; }
.d2c-card-icon .d2c-heat3 { animation-delay: 1.6s; }

@keyframes d2cHeatRise {
  0% { opacity: 0.2; transform: translateY(0); }
  50% { opacity: 0.7; }
  100% { opacity: 0.1; transform: translateY(4px); }
}

/* Heat absorption arrows */
.d2c-card-icon .d2c-absorb {
  stroke: #ff6b35;
  stroke-width: 0.8;
  animation: d2cAbsorbPulse 2s ease-in-out infinite;
}

.d2c-card-icon .d2c-absorb:nth-child(14) { animation-delay: 0.3s; }
.d2c-card-icon .d2c-absorb:nth-child(15) { animation-delay: 1.3s; }

@keyframes d2cAbsorbPulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

/* Coolant return loop */
.d2c-card-icon .d2c-loop {
  stroke: #35b4ff;
  stroke-width: 1;
  stroke-dasharray: 3, 3;
  animation: d2cCoolantLoop 3s linear infinite;
}

@keyframes d2cCoolantLoop {
  0% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -24; }
}

/* Return loop arrows */
.d2c-card-icon .d2c-loop-arrow {
  animation: d2cLoopArrow 3s linear infinite;
}

.d2c-card-icon .d2c-loop-arrow:nth-child(17) { animation-delay: 0s; }
.d2c-card-icon .d2c-loop-arrow:nth-child(18) { animation-delay: 1.5s; }

@keyframes d2cLoopArrow {
  0% { opacity: 0.3; }
  50% { opacity: 0.8; }
  100% { opacity: 0.3; }
}

/* IN/OUT port indicators */
.d2c-card-icon .d2c-port {
  rx: 1;
  animation: d2cPortBlink 3s ease-in-out infinite;
}

.d2c-card-icon .d2c-port:first-of-type { animation-delay: 0s; }
.d2c-card-icon .d2c-port:last-of-type { animation-delay: 1.5s; }

@keyframes d2cPortBlink {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

/* ========================================
   Software Solution (SW) Card Icon
   ======================================== */

/* Central hub glow */
.sw-solution-icon .sw-hub {
  stroke: #4a6a9a;
  animation: swHubPulse 3s ease-in-out infinite;
}

@keyframes swHubPulse {
  0%, 100% { stroke: #4a6a9a; r: 8; }
  50% { stroke: #6a8aba; r: 8.5; }
}

/* Connection lines flow */
.sw-solution-icon .sw-conn {
  stroke: #4a8aff;
  stroke-dasharray: 2, 2;
  animation: swConnFlow 2s linear infinite;
}

.sw-solution-icon .sw-conn:nth-child(6) { animation-delay: 0s; }
.sw-solution-icon .sw-conn:nth-child(7) { animation-delay: 0.5s; }
.sw-solution-icon .sw-conn:nth-child(8) { animation-delay: 1s; }
.sw-solution-icon .sw-conn:nth-child(9) { animation-delay: 1.5s; }

@keyframes swConnFlow {
  0% { stroke-dashoffset: 0; opacity: 0.4; }
  50% { opacity: 0.8; }
  100% { stroke-dashoffset: -8; opacity: 0.4; }
}

/* Node pulse */
.sw-solution-icon .sw-node {
  rx: 2;
  animation: swNodePulse 3s ease-in-out infinite;
}

.sw-solution-icon .sw-node-dls { animation-delay: 0s; }
.sw-solution-icon .sw-node-ais { animation-delay: 0.75s; }
.sw-solution-icon .sw-node-cux { animation-delay: 1.5s; }
.sw-solution-icon .sw-node-custom { animation-delay: 2.25s; }

@keyframes swNodePulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

/* Data transfer dots */
.sw-solution-icon .sw-dot {
  fill: #4a8aff;
  animation: swDotPulse 2s ease-in-out infinite;
}

.sw-solution-icon .sw-dot:nth-child(10) { animation-delay: 0s; }
.sw-solution-icon .sw-dot:nth-child(11) { animation-delay: 0.5s; }
.sw-solution-icon .sw-dot:nth-child(12) { animation-delay: 1s; }
.sw-solution-icon .sw-dot:nth-child(13) { animation-delay: 1.5s; }

@keyframes swDotPulse {
  0%, 100% { r: 1.5; opacity: 0.3; }
  50% { r: 2; opacity: 0.7; }
}

/* Expand arrows */
.sw-solution-icon .sw-expand {
  stroke: #4a8aff;
  stroke-width: 0.8;
  animation: swExpandPulse 3s ease-in-out infinite;
}

@keyframes swExpandPulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.9; }
}


/* ============================================
   Tech Competitiveness Section SVG Animations
   ============================================ */

/* Tech SVG base styles */
.tech-svg {
  width: 64px;
  height: 64px;
}

/* ===== CFD 시뮬레이션 SVG Animations ===== */
.tech-cfd-icon .cfd-mesh {
  opacity: 0.15;
  animation: cfdMeshPulse 4s ease-in-out infinite;
}

@keyframes cfdMeshPulse {
  0%, 100% { opacity: 0.15; }
  50% { opacity: 0.35; }
}

/* Flow streamlines animation */
.tech-cfd-icon .cfd-flow-1 {
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
  animation: cfdFlow1 3s ease-in-out infinite;
}

@keyframes cfdFlow1 {
  0% { stroke-dashoffset: 60; opacity: 0.4; }
  50% { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: -60; opacity: 0.4; }
}

.tech-cfd-icon .cfd-flow-2 {
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
  animation: cfdFlow2 3s ease-in-out infinite 0.5s;
}

@keyframes cfdFlow2 {
  0% { stroke-dashoffset: 60; opacity: 0.4; }
  50% { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: -60; opacity: 0.4; }
}

.tech-cfd-icon .cfd-flow-3 {
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
  animation: cfdFlow3 3s ease-in-out infinite 1s;
}

@keyframes cfdFlow3 {
  0% { stroke-dashoffset: 60; opacity: 0.4; }
  50% { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: -60; opacity: 0.4; }
}

/* Flow particles */
.tech-cfd-icon .cfd-particle-1 {
  animation: cfdParticleMove1 3s ease-in-out infinite;
}

@keyframes cfdParticleMove1 {
  0% { cx: 10; cy: 30; opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { cx: 70; cy: 30; opacity: 0; }
}

.tech-cfd-icon .cfd-particle-2 {
  animation: cfdParticleMove2 3s ease-in-out infinite 0.5s;
}

@keyframes cfdParticleMove2 {
  0% { cx: 10; cy: 40; opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { cx: 70; cy: 40; opacity: 0; }
}

.tech-cfd-icon .cfd-particle-3 {
  animation: cfdParticleMove3 3s ease-in-out infinite 1s;
}

@keyframes cfdParticleMove3 {
  0% { cx: 10; cy: 50; opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { cx: 70; cy: 50; opacity: 0; }
}

/* Heat map pulsing */
.tech-cfd-icon .cfd-hotspot {
  animation: cfdHeatPulse 2s ease-in-out infinite;
}

@keyframes cfdHeatPulse {
  0%, 100% { opacity: 0.15; r: 8; }
  50% { opacity: 0.35; r: 12; }
}

/* Velocity arrows pulse */
.tech-cfd-icon .cfd-arrow {
  animation: cfdArrowPulse 2s ease-in-out infinite;
}

@keyframes cfdArrowPulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.9; }
}


/* ===== 실험 검증 (QA) SVG Animations ===== */
.tech-qa-icon .qa-stage {
  animation: qaStageFade 3s ease-in-out infinite;
}

.tech-qa-icon .qa-stage-1 { animation-delay: 0s; }
.tech-qa-icon .qa-stage-2 { animation-delay: 0.3s; }
.tech-qa-icon .qa-stage-3 { animation-delay: 0.6s; }

@keyframes qaStageFade {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

/* QA arrows pulse */
.tech-qa-icon .qa-arrow {
  animation: qaArrowPulse 2s ease-in-out infinite;
}

@keyframes qaArrowPulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

/* Checkmarks appear sequentially */
.tech-qa-icon .qa-check-1 {
  stroke-dasharray: 15;
  stroke-dashoffset: 15;
  animation: qaCheck1 3s ease-in-out infinite;
}

@keyframes qaCheck1 {
  0%, 20% { stroke-dashoffset: 15; opacity: 0; }
  40%, 70% { stroke-dashoffset: 0; opacity: 1; }
  90%, 100% { stroke-dashoffset: 15; opacity: 0; }
}

.tech-qa-icon .qa-check-2 {
  stroke-dasharray: 15;
  stroke-dashoffset: 15;
  animation: qaCheck2 3s ease-in-out infinite 0.3s;
}

@keyframes qaCheck2 {
  0%, 20% { stroke-dashoffset: 15; opacity: 0; }
  40%, 70% { stroke-dashoffset: 0; opacity: 1; }
  90%, 100% { stroke-dashoffset: 15; opacity: 0; }
}

.tech-qa-icon .qa-check-3 {
  stroke-dasharray: 15;
  stroke-dashoffset: 15;
  animation: qaCheck3 3s ease-in-out infinite 0.6s;
}

@keyframes qaCheck3 {
  0%, 20% { stroke-dashoffset: 15; opacity: 0; }
  40%, 70% { stroke-dashoffset: 0; opacity: 1; }
  90%, 100% { stroke-dashoffset: 15; opacity: 0; }
}

/* Data flow dots pulse */
.tech-qa-icon .qa-dot {
  animation: qaDotPulse 2s ease-in-out infinite;
}

.tech-qa-icon .qa-dot-1 { animation-delay: 0s; }
.tech-qa-icon .qa-dot-2 { animation-delay: 0.3s; }
.tech-qa-icon .qa-dot-3 { animation-delay: 0.6s; }

@keyframes qaDotPulse {
  0%, 100% { r: 2; opacity: 0.3; }
  50% { r: 4; opacity: 0.8; }
}

/* 100% PASS text glow */
.tech-qa-icon .qa-report-text {
  animation: qaReportGlow 3s ease-in-out infinite 1s;
}

@keyframes qaReportGlow {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

/* Automation gear rotation */
.tech-qa-icon .qa-gear {
  animation: qaGearRotate 10s linear infinite;
  transform-origin: 40px 48px;
}

@keyframes qaGearRotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}


/* ===== 통합 설계 (Assembly) SVG Animations ===== */
.tech-assemble-icon .asm-gpu {
  animation: asmGpuDrop 3s ease-in-out infinite;
}

@keyframes asmGpuDrop {
  0%, 100% { transform: translateY(-40px); opacity: 0; }
  30%, 70% { transform: translateY(0); opacity: 1; }
}

.tech-assemble-icon .asm-ram-1 {
  animation: asmRamSlide1 3s ease-in-out infinite 0.2s;
}

@keyframes asmRamSlide1 {
  0%, 100% { transform: translateX(-30px); opacity: 0; }
  30%, 70% { transform: translateX(0); opacity: 1; }
}

.tech-assemble-icon .asm-ram-2 {
  animation: asmRamSlide2 3s ease-in-out infinite 0.3s;
}

@keyframes asmRamSlide2 {
  0%, 100% { transform: translateX(-30px); opacity: 0; }
  30%, 70% { transform: translateX(0); opacity: 1; }
}

.tech-assemble-icon .asm-coolant {
  animation: asmCoolantSlide 3s ease-in-out infinite 0.4s;
}

@keyframes asmCoolantSlide {
  0%, 100% { transform: translateX(30px); opacity: 0; }
  30%, 70% { transform: translateX(0); opacity: 1; }
}

/* Snap connection lines */
.tech-assemble-icon .asm-snap {
  animation: asmSnapPulse 3s ease-in-out infinite;
}

.tech-assemble-icon .asm-snap-1 { animation-delay: 0s; }
.tech-assemble-icon .asm-snap-2 { animation-delay: 0.2s; }
.tech-assemble-icon .asm-snap-3 { animation-delay: 0.4s; }

@keyframes asmSnapPulse {
  0%, 100% { opacity: 0.2; stroke-dashoffset: 20; }
  30%, 70% { opacity: 0.8; stroke-dashoffset: 0; }
}

/* Spark effects at snap points */
.tech-assemble-icon .asm-spark {
  animation: asmSparkFlash 3s ease-in-out infinite;
}

.tech-assemble-icon .asm-spark-1 { animation-delay: 0s; }
.tech-assemble-icon .asm-spark-2 { animation-delay: 0.2s; }
.tech-assemble-icon .asm-spark-3 { animation-delay: 0.4s; }

@keyframes asmSparkFlash {
  0%, 100% { opacity: 0; r: 1; }
  28% { opacity: 1; r: 3; }
  32% { opacity: 0.6; r: 2; }
  35% { opacity: 0; r: 1; }
}

/* Power ring on assembly complete */
.tech-assemble-icon .asm-power-ring {
  animation: asmPowerRing 3s ease-in-out infinite 0.5s;
}

@keyframes asmPowerRing {
  0%, 60% { opacity: 0; r: 30; }
  70% { opacity: 0.8; r: 34; }
  80%, 100% { opacity: 0; r: 36; }
}


/* ===== AI 제어 SVG Animations ===== */
.ai-grid {
  animation: aiGridPulse 4s ease-in-out infinite;
}

@keyframes aiGridPulse {
  0%, 100% { opacity: 0.15; }
  50% { opacity: 0.35; }
}

/* Bound lines pulse */
.ai-bound {
  animation: aiBoundPulse 2s ease-in-out infinite;
}

.ai-bound-top { animation-delay: 0s; }
.ai-bound-bot { animation-delay: 0.5s; }

@keyframes aiBoundPulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.7; }
}

/* AI graphs animate within bounds */
.ai-graph {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: aiGraphMove 6s ease-in-out infinite;
}

.ai-graph-1 { animation-delay: 0s; }
.ai-graph-2 { animation-delay: 1s; }
.ai-graph-3 { animation-delay: 2s; }

@keyframes aiGraphMove {
  0% { stroke-dashoffset: 100; opacity: 0; }
  20% { opacity: 0.7; }
  80% { opacity: 0.7; stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -100; opacity: 0; }
}

/* Data points pulse */
.ai-point {
  animation: aiPointPulse 3s ease-in-out infinite;
}

.ai-point-1 { animation-delay: 0s; }
.ai-point-2 { animation-delay: 1s; }
.ai-point-3 { animation-delay: 2s; }

@keyframes aiPointPulse {
  0%, 100% { r: 1.5; opacity: 0.4; }
  50% { r: 3; opacity: 1; }
}

/* AI brain rotation */
.ai-brain {
  animation: aiBrainRotate 8s linear infinite;
  transform-origin: 40px 40px;
}

@keyframes aiBrainRotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ========== Tech Competition Section - SVG Animations ========== */

/* CFD Simulation: flow streamlines + particles on mesh grid */
.cfd-mesh {
  animation: cfdMeshPulse 4s ease-in-out infinite;
}
@keyframes cfdMeshPulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.6; }
}

.cfd-flow {
  animation: cfdFlowSweep 3s linear infinite;
}
.cfd-flow-1 { animation-delay: 0s; }
.cfd-flow-2 { animation-delay: 1s; }
.cfd-flow-3 { animation-delay: 2s; }
@keyframes cfdFlowSweep {
  0% { stroke-dashoffset: 200; opacity: 0.3; }
  30% { opacity: 0.9; }
  70% { opacity: 0.9; }
  100% { stroke-dashoffset: -200; opacity: 0.3; }
}

.cfd-particle {
  animation: cfdParticleMove 2.5s linear infinite;
}
.cfd-particle-1 { animation-delay: 0s; }
.cfd-particle-2 { animation-delay: 0.8s; }
.cfd-particle-3 { animation-delay: 1.6s; }
@keyframes cfdParticleMove {
  0% { cx: 12; cy: 30; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { cx: 68; cy: 30; opacity: 0; }
}

.cfd-particle-2 { animation-name: cfdParticleMove2; }
@keyframes cfdParticleMove2 {
  0% { cx: 12; cy: 40; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { cx: 68; cy: 40; opacity: 0; }
}

.cfd-particle-3 { animation-name: cfdParticleMove3; }
@keyframes cfdParticleMove3 {
  0% { cx: 12; cy: 50; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { cx: 68; cy: 50; opacity: 0; }
}

.cfd-hotspot {
  animation: cfdHotspotPulse 2s ease-in-out infinite;
  transform-origin: 40px 40px;
}
.cfd-hotspot-1 { animation-delay: 0s; }
.cfd-hotspot-2 { animation-delay: 0.5s; }
.cfd-hotspot-3 { animation-delay: 1s; }
@keyframes cfdHotspotPulse {
  0%, 100% { opacity: 0.1; transform: scale(0.8); }
  50% { opacity: 0.4; transform: scale(1.2); }
}

.cfd-arrow {
  animation: cfdArrowMove 2s linear infinite;
}
.cfd-arrow:nth-child(1) { animation-delay: 0s; }
.cfd-arrow:nth-child(2) { animation-delay: 0.6s; }
.cfd-arrow:nth-child(3) { animation-delay: 1.2s; }
@keyframes cfdArrowMove {
  0% { transform: translateX(-5px); opacity: 0.3; }
  50% { opacity: 0.8; }
  100% { transform: translateX(5px); opacity: 0.3; }
}

/* Experimental QA: automated test pipeline with sequential checkmarks */
.qa-stage {
  animation: qaStagePulse 3s ease-in-out infinite;
}
.qa-stage-1 { animation-delay: 0s; }
.qa-stage-2 { animation-delay: 1s; }
.qa-stage-3 { animation-delay: 2s; }
@keyframes qaStagePulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

.qa-arrow {
  animation: qaArrowFlow 2s linear infinite;
}
.qa-arrow-1 { animation-delay: 0s; }
.qa-arrow-2 { animation-delay: 1s; }
@keyframes qaArrowFlow {
  0% { opacity: 0.2; stroke-dashoffset: 10; }
  50% { opacity: 0.8; }
  100% { opacity: 0.2; stroke-dashoffset: -10; }
}

.qa-check {
  animation: qaCheckAppear 3s ease-in-out infinite;
  stroke-dasharray: 20;
  stroke-dashoffset: 20;
}
.qa-check-1 { animation-delay: 0s; }
.qa-check-2 { animation-delay: 1s; }
.qa-check-3 { animation-delay: 2s; }
@keyframes qaCheckAppear {
  0%, 100% { stroke-dashoffset: 20; opacity: 0.3; }
  20% { stroke-dashoffset: 0; opacity: 1; }
  60% { stroke-dashoffset: 0; opacity: 1; }
  80% { stroke-dashoffset: 20; opacity: 0.3; }
}

.qa-dot {
  animation: qaDotFlow 3s ease-in-out infinite;
}
.qa-dot-1 { animation-delay: 0s; }
.qa-dot-2 { animation-delay: 1s; }
.qa-dot-3 { animation-delay: 2s; }
@keyframes qaDotFlow {
  0% { r: 1.5; opacity: 0.3; transform: translateY(3px); }
  50% { r: 3; opacity: 1; transform: translateY(0); }
  100% { r: 1.5; opacity: 0.3; transform: translateY(3px); }
}

.qa-report {
  animation: qaReportPulse 3s ease-in-out infinite;
}
@keyframes qaReportPulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

.qa-report-pass {
  animation: qaReportFill 3s ease-in-out infinite;
}
@keyframes qaReportFill {
  0% { width: 30; }
  50% { width: 52; }
  100% { width: 30; }
}

.qa-gear {
  animation: qaGearSpin 10s linear infinite;
  transform-origin: 40px 48px;
}
@keyframes qaGearSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Integrated Design: precision assembly with snap + spark */
.asm-base {
  animation: asmBaseGlow 3s ease-in-out infinite;
}
@keyframes asmBaseGlow {
  0%, 100% { stroke-opacity: 0.6; }
  50% { stroke-opacity: 1; }
}

.asm-gpu {
  animation: asmGPUSnap 3s ease-in-out infinite;
}
@keyframes asmGPUSnap {
  0% { transform: translateY(-5px); }
  50% { transform: translateY(0); }
  100% { transform: translateY(-5px); }
}

.asm-ram {
  animation: asmRAMSnap 3s ease-in-out infinite;
}
.asm-ram-1 { animation-delay: 0.3s; }
.asm-ram-2 { animation-delay: 0.6s; }
@keyframes asmRAMSnap {
  0% { transform: translateX(5px); }
  50% { transform: translateX(0); }
  100% { transform: translateX(5px); }
}

.asm-coolant {
  animation: asmCoolantSlide 3s ease-in-out infinite;
}
@keyframes asmCoolantSlide {
  0% { transform: translateX(-5px); }
  50% { transform: translateX(0); }
  100% { transform: translateX(-5px); }
}

.asm-snap {
  animation: asmSnapFlash 3s ease-in-out infinite;
}
.asm-snap-1 { animation-delay: 0s; }
.asm-snap-2 { animation-delay: 1s; }
.asm-snap-3 { animation-delay: 2s; }
@keyframes asmSnapFlash {
  0%, 100% { opacity: 0.2; stroke-dashoffset: 12; }
  30% { opacity: 0.8; stroke-dashoffset: 0; }
  60% { opacity: 0.8; stroke-dashoffset: 0; }
  80% { opacity: 0.2; stroke-dashoffset: 12; }
}

.asm-spark {
  animation: asmSparkBurst 3s ease-in-out infinite;
}
.asm-spark-1 { animation-delay: 0s; }
.asm-spark-2 { animation-delay: 1s; }
.asm-spark-3 { animation-delay: 2s; }
@keyframes asmSparkBurst {
  0%, 100% { r: 0; opacity: 0; }
  30% { r: 4; opacity: 1; }
  50% { r: 1; opacity: 0.8; }
  70% { r: 0; opacity: 0; }
}

.asm-power-ring {
  animation: asmPowerRingAppear 3s ease-in-out infinite;
}
@keyframes asmPowerRingAppear {
  0%, 100% { r: 28; opacity: 0; stroke-dasharray: 2,4; }
  30% { opacity: 0.8; }
  50% { r: 34; opacity: 0.3; stroke-dasharray: 1,6; }
  70% { opacity: 0; }
}

/* AI Control: bounded graph movement + data points + brain */
.ai-grid {
  animation: aiGridFade 4s ease-in-out infinite;
}
@keyframes aiGridFade {
  0%, 100% { opacity: 0.15; }
  50% { opacity: 0.35; }
}

.ai-bound {
  animation: aiBoundPulse 2s ease-in-out infinite;
}
.ai-bound-top { animation-delay: 0s; }
.ai-bound-bot { animation-delay: 1s; }
@keyframes aiBoundPulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.7; }
}

.ai-graph {
  animation: aiGraphSweep 4s ease-in-out infinite;
}
.ai-graph-1 { animation-delay: 0s; }
.ai-graph-2 { animation-delay: 1.3s; }
.ai-graph-3 { animation-delay: 2.6s; }
@keyframes aiGraphSweep {
  0% { stroke-dasharray: 0 200; stroke-dashoffset: 200; }
  20% { stroke-dasharray: 0 200; stroke-dashoffset: 200; }
  60% { stroke-dasharray: 150 200; stroke-dashoffset: 0; }
  90% { stroke-dasharray: 150 200; stroke-dashoffset: 0; }
  100% { stroke-dasharray: 0 200; stroke-dashoffset: -200; }
}

.ai-point {
  animation: aiPointGlow 4s ease-in-out infinite;
}
.ai-point-1 { animation-delay: 0s; }
.ai-point-2 { animation-delay: 1.3s; }
.ai-point-3 { animation-delay: 2.6s; }
@keyframes aiPointGlow {
  0%, 100% { r: 1.5; opacity: 0.3; }
  30% { r: 3; opacity: 1; }
  60% { r: 1.5; opacity: 0.3; }
}

.ai-brain {
  animation: aiBrainSpin 6s linear infinite;
  transform-origin: 40px 40px;
}
@keyframes aiBrainSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}