/* ============================================
   ONE CLICK SOLUTIONS — Master Stylesheet
   Design: Dark-mode dominant, enterprise-grade
   ============================================ */

/* --- Preloader --- */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: #0a1628;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 2rem;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}

.preloader.loaded {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.preloader-logo {
  position: relative;
  width: 120px;
  height: 120px;
}

/* Outer rotating ring */
.preloader-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: #00a5a8;
  border-right-color: #2ec4d4;
  animation: preloaderSpin 1.2s linear infinite;
}

.preloader-ring-2 {
  position: absolute;
  inset: 12px;
  border-radius: 50%;
  border: 2px solid transparent;
  border-bottom-color: #3b7dd8;
  border-left-color: #1ec677;
  animation: preloaderSpin 1.8s linear infinite reverse;
}

.preloader-ring-3 {
  position: absolute;
  inset: 24px;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: #1ec677;
  border-right-color: #00a5a8;
  animation: preloaderSpin 1s linear infinite;
}

@keyframes preloaderSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Center logo icon */
.preloader-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  animation: preloaderPulse 1.5s ease-in-out infinite;
}

@keyframes preloaderPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.9; }
  50% { transform: translate(-50%, -50%) scale(1.1); opacity: 1; }
}

/* Brand text */
.preloader-text {
  font-family: 'Outfit', sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.02em;
  opacity: 0;
  animation: preloaderFadeIn 0.5s ease 0.3s forwards;
}

.preloader-text span {
  background: linear-gradient(135deg, #00a5a8, #2ec4d4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

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

/* Progress bar */
.preloader-progress {
  width: 180px;
  height: 3px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 3px;
  overflow: hidden;
  opacity: 0;
  animation: preloaderFadeIn 0.5s ease 0.5s forwards;
}

.preloader-progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #00a5a8, #1ec677, #2ec4d4);
  border-radius: 3px;
  transition: width 0.3s ease;
}

/* Floating particles around the loader */
.preloader-particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.preloader-particle {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  opacity: 0;
  animation: particleRise 2.5s ease-in-out infinite;
}

.preloader-particle:nth-child(1) {
  background: #00a5a8;
  left: 15%;
  bottom: -10px;
  animation-delay: 0s;
  animation-duration: 3s;
}

.preloader-particle:nth-child(2) {
  background: #2ec4d4;
  left: 35%;
  bottom: -10px;
  animation-delay: 0.5s;
  animation-duration: 2.5s;
}

.preloader-particle:nth-child(3) {
  background: #1ec677;
  left: 55%;
  bottom: -10px;
  animation-delay: 1s;
  animation-duration: 3.2s;
}

.preloader-particle:nth-child(4) {
  background: #3b7dd8;
  left: 75%;
  bottom: -10px;
  animation-delay: 1.5s;
  animation-duration: 2.8s;
}

.preloader-particle:nth-child(5) {
  background: #00a5a8;
  left: 90%;
  bottom: -10px;
  animation-delay: 0.8s;
  animation-duration: 3.5s;
}

@keyframes particleRise {
  0% {
    transform: translateY(0) scale(0);
    opacity: 0;
  }
  20% {
    opacity: 0.7;
    transform: translateY(-80px) scale(1);
  }
  80% {
    opacity: 0.3;
  }
  100% {
    transform: translateY(-400px) scale(0.5);
    opacity: 0;
  }
}

/* Glow backdrop */
.preloader-glow {
  position: absolute;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 165, 168, 0.12) 0%, transparent 70%);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -60%);
  animation: glowPulse 2s ease-in-out infinite;
}

@keyframes glowPulse {
  0%, 100% { transform: translate(-50%, -60%) scale(1); opacity: 0.5; }
  50% { transform: translate(-50%, -60%) scale(1.15); opacity: 0.8; }
}

/* --- CSS Custom Properties --- */
:root {
  /* Brand Colors */
  --navy: #0a1628;
  --navy-light: #0f1d32;
  --navy-mid: #132440;
  --teal: #00a5a8;
  --cyan: #2ec4d4;
  --blue: #3b7dd8;
  --green: #1ec677;
  --white: #ffffff;
  --gray-100: #f0f2f5;
  --gray-200: #e1e5eb;
  --gray-300: #c2c9d4;
  --gray-400: #8892a4;
  --gray-500: #5a6478;
  --gray-600: #3d465a;

  /* Surfaces */
  --surface-dark: #0a1628;
  --surface-card: rgba(15, 29, 50, 0.6);
  --surface-card-hover: rgba(15, 29, 50, 0.85);
  --surface-glass: rgba(10, 22, 40, 0.75);
  --glass-border: rgba(0, 165, 168, 0.15);
  --glass-border-hover: rgba(0, 165, 168, 0.35);

  /* Gradients */
  --gradient-cta: linear-gradient(135deg, var(--green), var(--teal));
  --gradient-accent: linear-gradient(135deg, var(--teal), var(--cyan));
  --gradient-blue: linear-gradient(135deg, var(--blue), var(--cyan));
  --gradient-hero: radial-gradient(ellipse at 20% 50%, rgba(0,165,168,0.15) 0%, transparent 50%),
                   radial-gradient(ellipse at 80% 20%, rgba(59,125,216,0.1) 0%, transparent 50%),
                   radial-gradient(ellipse at 60% 80%, rgba(30,198,119,0.08) 0%, transparent 50%);

  /* Typography */
  --font-heading: 'Outfit', sans-serif;
  --font-body: 'DM Sans', sans-serif;

  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;
  --space-5xl: 8rem;

  /* Layout */
  --max-width: 1280px;
  --nav-height: 72px;

  /* Borders */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.3);
  --shadow-glow-teal: 0 0 30px rgba(0, 165, 168, 0.2);
  --shadow-glow-green: 0 0 30px rgba(30, 198, 119, 0.2);

  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;
}

/* --- Reset & Base --- */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

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

body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  color: var(--gray-200);
  background-color: var(--navy);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

a {
  color: var(--cyan);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--teal);
}

ul, ol {
  list-style: none;
}

button {
  font-family: var(--font-body);
  cursor: pointer;
  border: none;
  outline: none;
  background: none;
}

input, textarea, select {
  font-family: var(--font-body);
  font-size: 1rem;
}

/* --- Typography --- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--white);
  line-height: 1.2;
  font-weight: 700;
}

h1 { font-size: clamp(2.25rem, 5vw, 3.5rem); font-weight: 800; }
h2 { font-size: clamp(1.75rem, 4vw, 2.75rem); }
h3 { font-size: clamp(1.25rem, 3vw, 1.75rem); }
h4 { font-size: clamp(1.1rem, 2.5vw, 1.35rem); font-weight: 600; }
h5 { font-size: 1.1rem; font-weight: 600; }
h6 { font-size: 0.95rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }

p {
  margin-bottom: var(--space-md);
  color: var(--gray-300);
}

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

.text-teal { color: var(--teal); }
.text-cyan { color: var(--cyan); }
.text-green { color: var(--green); }
.text-white { color: var(--white); }

.lead {
  font-size: 1.15rem;
  line-height: 1.7;
  color: var(--gray-300);
}

/* --- Layout --- */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

.section {
  padding: var(--space-4xl) 0;
}

.section-dark {
  background-color: var(--navy);
}

.section-darker {
  background-color: var(--surface-dark);
}

.section-alt {
  background-color: var(--navy-light);
}

.section-header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto var(--space-3xl);
}

.section-header h2 {
  margin-bottom: var(--space-md);
}

.section-header p {
  font-size: 1.1rem;
}

.section-label {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--teal);
  margin-bottom: var(--space-sm);
  padding: var(--space-xs) var(--space-md);
  background: rgba(0, 165, 168, 0.1);
  border: 1px solid rgba(0, 165, 168, 0.2);
  border-radius: var(--radius-full);
}

/* Mobile layout adjustments */
@media (max-width: 768px) {
  .container {
    padding: 0 var(--space-md);
  }

  .section {
    padding: var(--space-2xl) 0;
    position: relative;
  }

  .section-dark,
  .section-alt,
  .section-darker {
    position: relative;
  }

  .section-darker::before {
    content: '';
    position: absolute;
    top: 0;
    left: 5%;
    right: 5%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(59, 125, 216, 0.15), transparent);
  }

  .section-dark::before {
    content: '';
    position: absolute;
    top: 0;
    left: 5%;
    right: 5%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 165, 168, 0.15), transparent);
  }

  .section-alt::before {
    content: '';
    position: absolute;
    top: 0;
    left: 5%;
    right: 5%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(30, 198, 119, 0.12), transparent);
  }

  .section-header {
    margin-bottom: var(--space-xl);
    text-align: left;
  }

  .section-header h2 {
    font-size: 1.6rem;
    letter-spacing: -0.02em;
    line-height: 1.2;
  }

  .section-header p {
    font-size: 0.95rem;
    line-height: 1.6;
    opacity: 0.85;
  }

  .section-label {
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    padding: 5px 14px;
    background: linear-gradient(135deg, rgba(0, 165, 168, 0.12), rgba(46, 196, 212, 0.05));
    border-color: rgba(0, 165, 168, 0.2);
  }

  .btn {
    padding: 0.6rem 1.25rem;
    font-size: 0.85rem;
  }

  .btn-lg {
    padding: 0.75rem 1.5rem;
    font-size: 0.9rem;
  }
}

@media (max-width: 480px) {
  .container {
    padding: 0 var(--space-sm);
  }

  .section {
    padding: var(--space-xl) 0;
  }

  .section-header h2 {
    font-size: 1.3rem;
  }

  .section-header p {
    font-size: 0.85rem;
  }
}

/* --- Grid System --- */
.grid {
  display: grid;
  gap: var(--space-xl);
}

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

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

@media (max-width: 768px) {
  .grid-2, .grid-3, .grid-4 {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
}

@media (max-width: 360px) {
  .grid-3, .grid-4 {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
}

/* --- Navbar --- */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: var(--nav-height);
  background: var(--surface-glass);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--glass-border);
  transition: background var(--transition-normal), box-shadow var(--transition-normal);
}

.navbar.scrolled {
  background: rgba(10, 22, 40, 0.95);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
}

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

.nav-logo {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--white);
  text-decoration: none;
}

.nav-logo svg {
  width: 36px;
  height: 36px;
}

.nav-logo span {
  background: var(--gradient-accent);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.nav-links a {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--gray-300);
  text-decoration: none;
  padding: var(--space-xs) 0;
  position: relative;
  transition: color var(--transition-fast);
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--gradient-accent);
  transition: width var(--transition-normal);
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--white);
}

.nav-links a:hover::after,
.nav-links a.active::after {
  width: 100%;
}

/* Nav Dropdown */
.nav-dropdown {
  position: relative;
}

.nav-dropdown-trigger {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}

.nav-dropdown-trigger svg {
  width: 16px;
  height: 16px;
  transition: transform var(--transition-fast);
}

.nav-dropdown:hover .nav-dropdown-trigger svg {
  transform: rotate(180deg);
}

.nav-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 220px;
  background: var(--navy-light);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: var(--space-sm);
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-fast);
  box-shadow: var(--shadow-card);
}

.nav-dropdown:hover .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.nav-dropdown-menu a {
  display: block;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
}

.nav-dropdown-menu a:hover {
  background: rgba(0, 165, 168, 0.1);
}

.nav-dropdown-menu a::after {
  display: none;
}

/* Mobile Menu */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: var(--space-sm);
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: all var(--transition-normal);
}

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

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

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

.nav-cta {
  display: flex;
  align-items: center;
}

@media (max-width: 1024px) {
  .nav-links {
    position: fixed;
    top: var(--nav-height);
    right: -320px;
    width: 280px;
    height: calc(100vh - var(--nav-height));
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: var(--space-lg) var(--space-xl);
    background: var(--navy);
    border-left: 1px solid var(--glass-border);
    transition: right var(--transition-normal);
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 1001;
  }

  .nav-links.open {
    right: 0;
  }

  .nav-links > a,
  .nav-dropdown {
    width: 100%;
  }

  .nav-links a {
    width: 100%;
    padding: var(--space-md) 0;
    font-size: 1rem;
    border-bottom: 1px solid rgba(255,255,255,0.05);
  }

  .nav-links a::after {
    display: none;
  }

  .nav-dropdown-trigger {
    width: 100%;
    padding: var(--space-md) 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
  }

  .nav-dropdown-trigger svg {
    display: none;
  }

  .nav-dropdown-menu {
    display: none !important;
  }

  .nav-toggle {
    display: flex;
  }

  .nav-logo {
    font-size: 1.1rem;
  }

  .nav-logo svg {
    width: 30px;
    height: 30px;
  }
}

@media (max-width: 480px) {
  .nav-links {
    width: 260px;
    right: -280px;
    padding: var(--space-md) var(--space-lg);
  }

  .nav-cta .btn {
    padding: 0.5rem 1rem;
    font-size: 0.78rem;
  }

  .nav-logo {
    font-size: 0.95rem;
    gap: 0.35rem;
  }

  .nav-logo svg {
    width: 26px;
    height: 26px;
  }
}

/* Mobile overlay */
.nav-overlay {
  display: none;
  position: fixed;
  top: var(--nav-height);
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
}

.nav-overlay.active {
  display: block;
}

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: 0.75rem 1.75rem;
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
  transition: all var(--transition-normal);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}

.btn svg {
  width: 18px;
  height: 18px;
}

.btn-primary {
  background: var(--gradient-cta);
  color: var(--white);
  border: none;
  box-shadow: 0 4px 15px rgba(30, 198, 119, 0.25);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 25px rgba(30, 198, 119, 0.35);
  color: var(--white);
}

.btn-secondary {
  background: transparent;
  color: var(--teal);
  border: 1px solid var(--teal);
}

.btn-secondary:hover {
  background: rgba(0, 165, 168, 0.1);
  transform: translateY(-2px);
  color: var(--teal);
}

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

.btn-outline:hover {
  background: rgba(0, 165, 168, 0.1);
  transform: translateY(-2px);
  color: var(--teal);
}

.btn-outline-white {
  background: transparent;
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.btn-outline-white:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.4);
  color: var(--white);
}

.btn-sm {
  padding: 0.5rem 1.25rem;
  font-size: 0.85rem;
}

.btn-lg {
  padding: 1rem 2.25rem;
  font-size: 1.05rem;
}

/* --- Cards --- */
.card {
  background: var(--surface-card);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: var(--space-xl);
  transition: all var(--transition-normal);
  position: relative;
  overflow: hidden;
}

.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--gradient-accent);
  opacity: 0;
  transition: opacity var(--transition-normal);
}

.card:hover {
  background: var(--surface-card-hover);
  border-color: var(--glass-border-hover);
  transform: translateY(-4px);
  box-shadow: var(--shadow-glow-teal);
}

.card:hover::before {
  opacity: 1;
}

.card-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: rgba(0, 165, 168, 0.1);
  margin-bottom: var(--space-lg);
}

.card-icon svg {
  width: 24px;
  height: 24px;
  stroke: var(--teal);
}

.card-icon.green { background: rgba(30, 198, 119, 0.1); }
.card-icon.green svg { stroke: var(--green); }
.card-icon.blue { background: rgba(59, 125, 216, 0.1); }
.card-icon.blue svg { stroke: var(--blue); }
.card-icon.cyan { background: rgba(46, 196, 212, 0.1); }
.card-icon.cyan svg { stroke: var(--cyan); }

.card h3, .card h4 {
  margin-bottom: var(--space-sm);
}

.card p {
  font-size: 0.95rem;
  margin-bottom: var(--space-lg);
}

.card-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--teal);
  transition: gap var(--transition-fast);
}

.card-link:hover {
  gap: var(--space-sm);
  color: var(--cyan);
}

.card-link svg {
  width: 16px;
  height: 16px;
}

/* Card mobile adjustments */
@media (max-width: 768px) {
  .card {
    padding: var(--space-md);
    background: linear-gradient(145deg, rgba(15, 29, 50, 0.7), rgba(10, 22, 40, 0.5));
    border-color: rgba(0, 165, 168, 0.1);
    backdrop-filter: blur(8px);
  }

  .card::before {
    height: 2px;
    opacity: 0.5;
  }

  .card-icon {
    width: 36px;
    height: 36px;
    margin-bottom: var(--space-sm);
    border-radius: 8px;
    position: relative;
  }

  .card-icon svg {
    width: 18px;
    height: 18px;
  }

  .card h3 {
    font-size: 0.85rem;
    letter-spacing: -0.01em;
    line-height: 1.3;
  }

  .card h4 {
    font-size: 0.8rem;
    line-height: 1.3;
  }

  .card p {
    font-size: 0.7rem;
    margin-bottom: var(--space-sm);
    line-height: 1.45;
    color: var(--gray-400);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .card-link {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.01em;
  }

  .card-link svg {
    width: 12px;
    height: 12px;
  }
}

@media (max-width: 400px) {
  .card {
    padding: 10px;
  }

  .card-icon {
    width: 32px;
    height: 32px;
    margin-bottom: 6px;
  }

  .card-icon svg {
    width: 16px;
    height: 16px;
  }

  .card h3 {
    font-size: 0.78rem;
  }

  .card h4 {
    font-size: 0.72rem;
  }

  .card p {
    font-size: 0.65rem;
    -webkit-line-clamp: 2;
    line-height: 1.4;
    margin-bottom: 6px;
  }

  .card-link {
    font-size: 0.65rem;
  }
}

/* --- Hero (Homepage) --- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-top: var(--nav-height);
  background-color: var(--navy);
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.4;
  animation: orbFloat 8s ease-in-out infinite;
}

.hero-orb-1 {
  width: 500px;
  height: 500px;
  background: var(--teal);
  top: -10%;
  left: -5%;
  animation-delay: 0s;
}

.hero-orb-2 {
  width: 400px;
  height: 400px;
  background: var(--blue);
  top: 20%;
  right: -10%;
  animation-delay: -3s;
}

.hero-orb-3 {
  width: 350px;
  height: 350px;
  background: var(--green);
  bottom: -5%;
  left: 40%;
  animation-delay: -5s;
}

@keyframes orbFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(30px, -20px) scale(1.05); }
  66% { transform: translate(-20px, 20px) scale(0.95); }
}

.hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(rgba(0, 165, 168, 0.12) 1px, transparent 1px);
  background-size: 40px 40px;
  opacity: 0.5;
}

.hero .container {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3xl);
  align-items: center;
}

.hero-content {
  max-width: 600px;
}

.hero-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--teal);
  margin-bottom: var(--space-lg);
  padding: var(--space-xs) var(--space-md);
  background: rgba(0, 165, 168, 0.08);
  border: 1px solid rgba(0, 165, 168, 0.2);
  border-radius: var(--radius-full);
}

.hero-label svg {
  width: 16px;
  height: 16px;
}

.hero h1 {
  margin-bottom: var(--space-lg);
}

.hero .lead {
  margin-bottom: var(--space-2xl);
}

.hero-buttons {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.hero-visual {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- AI Wave Hub Interactive Graphic --- */
.ai-wave-hub {
  width: 100%;
  max-width: 500px;
  aspect-ratio: 1;
  position: relative;
  margin: 0 auto;
  animation: heroVisualIn 1s ease-out 0.3s both;
}

@keyframes heroVisualIn {
  from { opacity: 0; transform: scale(0.92); }
  to { opacity: 1; transform: scale(1); }
}

/* Ambient glow behind center */
.ai-hub-ambient {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 55%;
  height: 55%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,165,168,0.1) 0%, rgba(59,125,216,0.05) 40%, transparent 70%);
  pointer-events: none;
}

/* Connection lines SVG */
.ai-hub-lines {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Ripple container */
.ai-ripples {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}

/* Single ripple wave */
.ai-ripple {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 85%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2px solid var(--ripple-color, #00a5a8);
  box-shadow: 0 0 20px var(--ripple-color, rgba(0,165,168,0.3)),
              0 0 40px rgba(0,165,168,0.08);
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  animation: aiRippleExpand 1.8s ease-out var(--ripple-delay, 0s) forwards;
  pointer-events: none;
}

@keyframes aiRippleExpand {
  0% { transform: translate(-50%, -50%) scale(0); opacity: 0.6; }
  50% { opacity: 0.25; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}

/* --- Service Nodes --- */
.ai-node {
  --node-r: 0;
  --node-g: 165;
  --node-b: 168;
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: opacity 0.4s ease, transform 0.3s ease;
}

.ai-node[data-color="green"] { --node-r: 30; --node-g: 198; --node-b: 119; }
.ai-node[data-color="cyan"]  { --node-r: 46; --node-g: 196; --node-b: 212; }
.ai-node[data-color="blue"]  { --node-r: 59; --node-g: 125; --node-b: 216; }

.ai-node.dimmed {
  opacity: 0.25;
}

.ai-node-ring {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 2px solid rgba(var(--node-r), var(--node-g), var(--node-b), 0.3);
  background: rgba(10, 22, 40, 0.6);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s ease;
  position: relative;
}

.ai-node-ring::before {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1px solid transparent;
  transition: all 0.4s ease;
}

.ai-node-ring svg {
  width: 22px;
  height: 22px;
  color: rgba(var(--node-r), var(--node-g), var(--node-b), 0.7);
  transition: color 0.4s ease;
}

/* Hover glow */
.ai-node:hover .ai-node-ring {
  border-color: rgba(var(--node-r), var(--node-g), var(--node-b), 0.6);
  box-shadow: 0 0 20px rgba(var(--node-r), var(--node-g), var(--node-b), 0.2),
              0 0 40px rgba(var(--node-r), var(--node-g), var(--node-b), 0.08);
  background: rgba(var(--node-r), var(--node-g), var(--node-b), 0.06);
}

.ai-node:hover .ai-node-ring svg {
  color: rgb(var(--node-r), var(--node-g), var(--node-b));
}

/* Active glow */
.ai-node.active .ai-node-ring {
  border-color: rgb(var(--node-r), var(--node-g), var(--node-b));
  box-shadow: 0 0 25px rgba(var(--node-r), var(--node-g), var(--node-b), 0.4),
              0 0 50px rgba(var(--node-r), var(--node-g), var(--node-b), 0.15);
  background: rgba(var(--node-r), var(--node-g), var(--node-b), 0.1);
}

.ai-node.active .ai-node-ring::before {
  border-color: rgba(var(--node-r), var(--node-g), var(--node-b), 0.2);
}

.ai-node.active .ai-node-ring svg {
  color: rgb(var(--node-r), var(--node-g), var(--node-b));
}

/* Node label */
.ai-node-name {
  font-family: var(--font-heading);
  font-size: 0.65rem;
  font-weight: 700;
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: color 0.4s ease;
}

.ai-node:hover .ai-node-name,
.ai-node.active .ai-node-name {
  color: rgba(255,255,255,0.9);
}

/* Pulse when wave passes */
.ai-node.pulse .ai-node-ring {
  animation: aiNodePulse 0.6s ease-out;
}

@keyframes aiNodePulse {
  0% { box-shadow: 0 0 0 0 rgba(var(--node-r), var(--node-g), var(--node-b), 0.5); }
  100% { box-shadow: 0 0 25px rgba(var(--node-r), var(--node-g), var(--node-b), 0.2), 0 0 50px rgba(var(--node-r), var(--node-g), var(--node-b), 0.08); }
}

/* --- Center Hub --- */
.ai-hub {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  cursor: pointer;
}

.ai-hub-pulse {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 1px solid rgba(0,165,168,0.12);
  animation: aiHubPulse 3s ease-in-out infinite;
}

@keyframes aiHubPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.5; }
  50% { transform: translate(-50%, -50%) scale(1.2); opacity: 0.15; }
}

.ai-hub-outer-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 1px solid rgba(0,165,168,0.18);
  transition: all 0.4s ease;
}

.ai-hub-mid-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 1px solid rgba(46,196,212,0.15);
  transition: all 0.4s ease;
}

.ai-hub-core {
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(10,22,40,0.9);
  border: 1.5px solid rgba(0,165,168,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s ease;
}

.ai-hub-core svg {
  width: 32px;
  height: 32px;
}

.ai-hub:hover .ai-hub-core {
  border-color: #00a5a8;
  box-shadow: 0 0 30px rgba(0,165,168,0.3), 0 0 60px rgba(0,165,168,0.1);
}

.ai-hub:hover .ai-hub-outer-ring {
  border-color: rgba(0,165,168,0.35);
  box-shadow: 0 0 15px rgba(0,165,168,0.08);
}

.ai-hub:hover .ai-hub-mid-ring {
  border-color: rgba(46,196,212,0.3);
}

/* Click feedback */
.ai-hub.clicked .ai-hub-core {
  animation: aiHubClick 0.3s ease-out;
}

@keyframes aiHubClick {
  0% { transform: scale(1); }
  50% { transform: scale(0.88); }
  100% { transform: scale(1); }
}

/* Hub label */
.ai-hub-label {
  position: absolute;
  bottom: 2%;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-body);
  font-size: 0.68rem;
  color: rgba(90,100,120,0.5);
  letter-spacing: 0.05em;
  white-space: nowrap;
}

/* --- PriceJoule / Legacy AI Graphic (used by pricejoule.html) --- */
.ai-graphic {
  width: 100%;
  max-width: 500px;
  position: relative;
  animation: heroVisualIn 1s ease-out 0.3s both;
}

.ai-network {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 0 20px rgba(0, 165, 168, 0.15));
}

.ai-label {
  fill: var(--gray-400);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  text-anchor: middle;
  letter-spacing: 0.05em;
}

/* Floating tech / benefit badges */
.ai-badge {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--surface-card);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-full);
  font-family: var(--font-heading);
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--white);
  letter-spacing: 0.05em;
  backdrop-filter: blur(10px);
  animation: badgeFloat 4s ease-in-out infinite;
}

.ai-badge svg {
  width: 14px;
  height: 14px;
  stroke: var(--teal);
}

.ai-badge-1 {
  top: 5%;
  right: 5%;
  animation-delay: 0s;
}

.ai-badge-1 svg { stroke: var(--teal); }

.ai-badge-2 {
  bottom: 15%;
  left: 2%;
  animation-delay: -1.3s;
}

.ai-badge-2 svg { stroke: var(--green); }

.ai-badge-3 {
  bottom: 8%;
  right: 10%;
  animation-delay: -2.6s;
}

.ai-badge-3 svg { stroke: var(--cyan); }

.ai-badge-4 {
  top: 50%;
  left: -2%;
  animation-delay: -1s;
}

.ai-badge-4 svg { stroke: #5EB3FF; }

.ai-badge-5 {
  top: 30%;
  right: -3%;
  animation-delay: -3.5s;
}

.ai-badge-5 svg { stroke: #4A9CF5; }

@keyframes badgeFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* PriceJoule Trust Badge */
.pj-trust-badge {
  position: absolute;
  bottom: -8%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  background: rgba(10, 22, 40, 0.6);
  border: 1px solid rgba(74, 156, 245, 0.2);
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: 0.65rem;
  color: rgba(168, 216, 255, 0.7);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  backdrop-filter: blur(10px);
  white-space: nowrap;
  animation: trustFloat 5s ease-in-out infinite;
}

.pj-trust-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #1ec677;
  animation: trustPulse 2s ease-in-out infinite;
}

@keyframes trustPulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 4px rgba(30, 198, 119, 0.4); }
  50% { opacity: 0.5; box-shadow: 0 0 8px rgba(30, 198, 119, 0.6); }
}

@keyframes trustFloat {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-5px); }
}

/* Desktop: 2-column layout */
@media (max-width: 1024px) {
  .hero .container {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .hero-content {
    max-width: 100%;
  }
  .hero-buttons {
    justify-content: center;
  }
  .hero-visual {
    margin-top: var(--space-xl);
  }
  .ai-wave-hub {
    max-width: 400px;
  }
  .ai-graphic {
    max-width: 400px;
    margin: 0 auto;
  }
}

@media (max-width: 768px) {
  .hero {
    min-height: auto;
    padding-top: calc(var(--nav-height) + var(--space-xl));
    padding-bottom: var(--space-xl);
  }

  .hero::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--teal), var(--green), var(--cyan), transparent);
    opacity: 0.5;
  }

  .hero-content {
    text-align: left;
  }

  .hero .container {
    text-align: left;
  }

  .hero h1 {
    font-size: 2rem;
    margin-bottom: var(--space-md);
    line-height: 1.15;
    letter-spacing: -0.025em;
  }

  .hero .lead {
    font-size: 1rem;
    margin-bottom: var(--space-xl);
    line-height: 1.6;
    opacity: 0.85;
  }

  .hero-label {
    font-size: 0.78rem;
    margin-bottom: var(--space-lg);
    padding: 6px 14px;
    background: linear-gradient(135deg, rgba(0, 165, 168, 0.12), rgba(30, 198, 119, 0.06));
    border-color: rgba(0, 165, 168, 0.25);
    backdrop-filter: blur(10px);
  }

  .hero-label svg {
    width: 15px;
    height: 15px;
  }

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

  .hero-buttons .btn {
    width: auto;
    flex: none;
    min-width: 0;
    justify-content: center;
    padding: 0.8rem 1.5rem;
    font-size: 0.92rem;
    border-radius: var(--radius-sm);
  }

  .hero-buttons .btn-primary {
    box-shadow: 0 4px 20px rgba(30, 198, 119, 0.3);
  }

  .hero-buttons .btn svg {
    width: 16px;
    height: 16px;
  }

  .hero-orb-1 {
    width: 280px;
    height: 280px;
    opacity: 0.3;
  }

  .hero-orb-2 {
    width: 200px;
    height: 200px;
    opacity: 0.25;
  }

  .hero-orb-3 {
    width: 180px;
    height: 180px;
    opacity: 0.2;
  }

  .hero-grid {
    background-size: 30px 30px;
    opacity: 0.3;
  }

  .hero-visual {
    margin-top: var(--space-lg);
    position: relative;
  }

  .hero-visual::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 165, 168, 0.12), transparent 70%);
    pointer-events: none;
  }

  .ai-wave-hub {
    max-width: 280px;
  }

  .ai-node-ring {
    width: 42px;
    height: 42px;
  }

  .ai-node-ring svg {
    width: 16px;
    height: 16px;
  }

  .ai-node-name {
    font-size: 0.55rem;
  }

  .ai-hub-core {
    width: 40px;
    height: 40px;
  }

  .ai-hub-core svg {
    width: 26px;
    height: 26px;
  }

  .ai-hub-pulse {
    width: 80px;
    height: 80px;
  }

  .ai-hub-outer-ring {
    width: 65px;
    height: 65px;
  }

  .ai-hub-mid-ring {
    width: 52px;
    height: 52px;
  }

  .ai-hub-label {
    font-size: 0.58rem;
  }

  .ai-graphic {
    max-width: 260px;
    margin: 0 auto;
  }

  .ai-badge {
    padding: 5px 10px;
    font-size: 0.6rem;
    background: rgba(10, 22, 40, 0.85);
    border-color: rgba(0, 165, 168, 0.2);
    backdrop-filter: blur(12px);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
  }

  .ai-badge svg {
    width: 11px;
    height: 11px;
  }

  .ai-label {
    font-size: 9px;
  }

  .pj-trust-badge {
    font-size: 0.55rem;
    padding: 4px 12px;
    bottom: -10%;
  }
}

@media (max-width: 400px) {
  .ai-wave-hub {
    max-width: 220px;
  }

  .hero h1 {
    font-size: 1.7rem;
  }

  .hero .lead {
    font-size: 0.92rem;
  }

  .hero-buttons .btn {
    padding: 0.7rem 1.2rem;
    font-size: 0.85rem;
  }

  .ai-node-ring {
    width: 34px;
    height: 34px;
  }

  .ai-node-ring svg {
    width: 13px;
    height: 13px;
  }

  .ai-node-name {
    font-size: 0.5rem;
    gap: 4px;
  }

  .ai-hub-core {
    width: 34px;
    height: 34px;
  }

  .ai-hub-core svg {
    width: 22px;
    height: 22px;
  }

  .ai-hub-label {
    display: none;
  }

  .ai-graphic {
    max-width: 220px;
  }

  .ai-badge-1 { top: 0; right: 0; }
  .ai-badge-2 { bottom: 12%; left: 0; }
  .ai-badge-3 { bottom: 5%; right: 5%; }
  .ai-badge-4 { top: 40%; left: -5%; }
  .ai-badge-5 { top: 20%; right: -2%; }

  .hero-orb-1 {
    width: 180px;
    height: 180px;
    opacity: 0.2;
  }

  .hero-orb-2 {
    width: 140px;
    height: 140px;
    opacity: 0.15;
  }

  .hero-orb-3 {
    width: 120px;
    height: 120px;
    opacity: 0.15;
  }
}

/* --- PriceJoule Center Click Interaction --- */
.pj-center-click {
  cursor: pointer;
  transition: opacity 0.3s ease;
}

.pj-center-click:hover ~ .pj-center-bg,
.pj-center-click:hover + .pj-wave-container {
  filter: brightness(1.3);
}

/* Center cube scale on hover */
.pj-graphic:hover .pj-center-click {
  opacity: 1;
}

/* Orbit rings transition */
.pj-orbit {
  transition: stroke 0.8s ease, stroke-width 0.6s ease, opacity 0.6s ease;
}

/* Active state — color cycle on click */
.pj-graphic.pj-active .pj-orbit-outer {
  stroke: #1ec677;
  stroke-width: 1;
  opacity: 0.4;
}

.pj-graphic.pj-active .pj-orbit-mid {
  stroke: #7C5CFC;
  stroke-width: 1.2;
  opacity: 0.45;
}

.pj-graphic.pj-active .pj-orbit-inner {
  stroke: #2ec4d4;
  stroke-width: 1;
  opacity: 0.4;
}

/* Center glow pulse on click */
.pj-graphic.pj-active .pj-center-bg {
  stroke: #1ec677;
  stroke-width: 2.5;
}

/* Cube glow on click */
.pj-graphic.pj-active .pj-center-cube {
  filter: drop-shadow(0 0 12px rgba(74, 156, 245, 0.6));
}

/* Second color phase */
.pj-graphic.pj-phase-2 .pj-orbit-outer {
  stroke: #7C5CFC;
  opacity: 0.35;
}

.pj-graphic.pj-phase-2 .pj-orbit-mid {
  stroke: #1ec677;
  opacity: 0.4;
}

.pj-graphic.pj-phase-2 .pj-orbit-inner {
  stroke: #4A9CF5;
  opacity: 0.45;
}

.pj-graphic.pj-phase-2 .pj-center-bg {
  stroke: #7C5CFC;
}

/* Third color phase */
.pj-graphic.pj-phase-3 .pj-orbit-outer {
  stroke: #2ec4d4;
  opacity: 0.4;
}

.pj-graphic.pj-phase-3 .pj-orbit-mid {
  stroke: #4A9CF5;
  opacity: 0.45;
}

.pj-graphic.pj-phase-3 .pj-orbit-inner {
  stroke: #1ec677;
  opacity: 0.4;
}

.pj-graphic.pj-phase-3 .pj-center-bg {
  stroke: #2ec4d4;
}

/* --- PriceJoule Browser Dashboard Mockup --- */
.pj-browser {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(74, 156, 245, 0.1);
  background: #0d1b2e;
}

/* Browser Chrome Bar */
.pj-browser-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 16px;
  background: #1a2a42;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.pj-browser-dots {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.pj-dot-red { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; }
.pj-dot-yellow { width: 10px; height: 10px; border-radius: 50%; background: #febc2e; }
.pj-dot-green { width: 10px; height: 10px; border-radius: 50%; background: #28c840; }

.pj-browser-url {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  font-size: 0.7rem;
  color: #8899aa;
  font-family: var(--font-body);
}

/* App Content */
.pj-app {
  padding: 24px 28px 28px;
  background: linear-gradient(180deg, #0f1f35 0%, #0d1b2e 100%);
  position: relative;
  overflow: hidden;
}

/* Ambient glow sweep across dashboard */
.pj-app::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(74, 156, 245, 0.03), rgba(46, 196, 212, 0.04), transparent);
  animation: pjDashSweep 8s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

@keyframes pjDashSweep {
  0% { left: -60%; }
  50% { left: 100%; }
  100% { left: 100%; }
}

.pj-app-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
}

.pj-app-title h3 {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 2px;
}

.pj-app-subtitle {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.pj-app-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.pj-app-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #1ec677;
  box-shadow: 0 0 8px rgba(30, 198, 119, 0.5);
  animation: pjLivePulse 1.5s ease-in-out infinite;
}

@keyframes pjLivePulse {
  0%, 100% { box-shadow: 0 0 4px rgba(30, 198, 119, 0.3); transform: scale(1); }
  50% { box-shadow: 0 0 12px 4px rgba(30, 198, 119, 0.5); transform: scale(1.2); }
}

.pj-app-live-text {
  font-size: 0.7rem;
  font-weight: 600;
  color: #1ec677;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  animation: pjLiveTextGlow 2s ease-in-out infinite;
}

@keyframes pjLiveTextGlow {
  0%, 100% { text-shadow: 0 0 4px rgba(30, 198, 119, 0.2); }
  50% { text-shadow: 0 0 10px rgba(30, 198, 119, 0.4); }
}

/* KPI Cards */
.pj-app-kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 20px;
}

.pj-app-kpi {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: rgba(20, 35, 60, 0.6);
  border: 1px solid rgba(74, 156, 245, 0.1);
  border-radius: var(--radius-md);
  transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  overflow: hidden;
  animation: pjKpiSlideIn 0.6s ease-out both;
}

.pj-app-kpi:nth-child(1) { animation-delay: 0.2s; }
.pj-app-kpi:nth-child(2) { animation-delay: 0.4s; }
.pj-app-kpi:nth-child(3) { animation-delay: 0.6s; }

/* Shimmer sweep on KPI cards */
.pj-app-kpi::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(74, 156, 245, 0.06), transparent);
  animation: pjKpiShimmer 5s ease-in-out infinite;
  pointer-events: none;
}

.pj-app-kpi:nth-child(2)::after { animation-delay: 1.5s; }
.pj-app-kpi:nth-child(3)::after { animation-delay: 3s; }

.pj-app-kpi:hover {
  border-color: rgba(74, 156, 245, 0.25);
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(74, 156, 245, 0.1);
}

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

@keyframes pjKpiShimmer {
  0%, 100% { left: -100%; }
  50% { left: 100%; }
}

.pj-app-kpi-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.pj-app-kpi-icon.blue {
  background: rgba(74, 156, 245, 0.15);
  color: #4A9CF5;
  animation: pjIconPulse-blue 3s ease-in-out infinite;
}

.pj-app-kpi-icon.green {
  background: rgba(30, 198, 119, 0.15);
  color: #1ec677;
  animation: pjIconPulse-green 3s ease-in-out infinite 1s;
}

.pj-app-kpi-icon.purple {
  background: rgba(124, 92, 252, 0.15);
  color: #7C5CFC;
  animation: pjIconPulse-purple 3s ease-in-out infinite 2s;
}

@keyframes pjIconPulse-blue {
  0%, 100% { box-shadow: 0 0 0 0 rgba(74, 156, 245, 0); }
  50% { box-shadow: 0 0 12px 3px rgba(74, 156, 245, 0.2); }
}
@keyframes pjIconPulse-green {
  0%, 100% { box-shadow: 0 0 0 0 rgba(30, 198, 119, 0); }
  50% { box-shadow: 0 0 12px 3px rgba(30, 198, 119, 0.2); }
}
@keyframes pjIconPulse-purple {
  0%, 100% { box-shadow: 0 0 0 0 rgba(124, 92, 252, 0); }
  50% { box-shadow: 0 0 12px 3px rgba(124, 92, 252, 0.2); }
}

.pj-app-kpi-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pj-app-kpi-label {
  font-size: 0.65rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.pj-app-kpi-val {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--white);
  transition: text-shadow 0.3s ease;
}

.pj-app-kpi:hover .pj-app-kpi-val {
  text-shadow: 0 0 12px rgba(74, 156, 245, 0.3);
}

.pj-app-kpi-val small {
  font-size: 0.6rem;
  font-weight: 500;
  color: var(--text-muted);
}

.pj-app-kpi-badge {
  padding: 3px 8px;
  border-radius: 20px;
  font-size: 0.6rem;
  font-weight: 700;
  flex-shrink: 0;
}

.pj-app-kpi-badge.green {
  background: rgba(30, 198, 119, 0.12);
  color: #1ec677;
  animation: pjBadgePop 0.4s ease-out 1s both;
}

.pj-app-kpi-badge.blue {
  background: rgba(74, 156, 245, 0.12);
  color: #4A9CF5;
  animation: pjBadgePop 0.4s ease-out 1.2s both;
}

@keyframes pjBadgePop {
  0% { opacity: 0; transform: scale(0.5); }
  70% { transform: scale(1.15); }
  100% { opacity: 1; transform: scale(1); }
}

/* Chart Area */
.pj-app-chart-wrap {
  position: relative;
  background: rgba(20, 35, 60, 0.4);
  border: 1px solid rgba(74, 156, 245, 0.08);
  border-radius: var(--radius-md);
  padding: 16px;
  min-height: 220px;
  overflow: hidden;
  animation: pjChartFadeIn 0.8s ease-out 0.8s both;
}

/* Scanning line across chart */
.pj-app-chart-wrap::before {
  content: '';
  position: absolute;
  top: 0;
  left: -2px;
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, transparent, rgba(46, 196, 212, 0.6), transparent);
  box-shadow: 0 0 12px 4px rgba(46, 196, 212, 0.15);
  animation: pjChartScan 6s ease-in-out infinite;
  z-index: 1;
  pointer-events: none;
}

/* Subtle border glow pulse */
.pj-app-chart-wrap::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  border: 1px solid transparent;
  background: linear-gradient(135deg, rgba(74, 156, 245, 0.15), transparent 40%, transparent 60%, rgba(46, 196, 212, 0.15)) border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: pjBorderGlow 4s ease-in-out infinite;
  pointer-events: none;
}

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

@keyframes pjChartScan {
  0% { left: -2px; opacity: 0; }
  5% { opacity: 1; }
  50% { left: calc(100% + 2px); opacity: 1; }
  55% { opacity: 0; }
  100% { opacity: 0; left: calc(100% + 2px); }
}

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

.pj-app-chart {
  width: 100%;
  height: 180px;
}

.pj-app-chart svg {
  width: 100%;
  height: 100%;
}

/* Floating Cards */
.pj-float-card {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: rgba(15, 28, 50, 0.88);
  border: 1px solid rgba(74, 156, 245, 0.2);
  border-radius: 12px;
  backdrop-filter: blur(14px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
  z-index: 2;
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.pj-float-card:hover {
  border-color: rgba(74, 156, 245, 0.4);
  box-shadow: 0 8px 40px rgba(74, 156, 245, 0.15), 0 0 20px rgba(46, 196, 212, 0.08);
}

.pj-float-ai {
  top: 8px;
  right: 12px;
  animation: floatAI 4s ease-in-out infinite, pjCardAppear 0.7s ease-out 1.2s both;
}

.pj-float-deal {
  bottom: 12px;
  left: 12px;
  animation: floatDeal 4.5s ease-in-out infinite, pjCardAppear 0.7s ease-out 1.6s both;
}

@keyframes floatAI {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@keyframes floatDeal {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@keyframes pjCardAppear {
  from { opacity: 0; transform: scale(0.85) translateY(10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.pj-float-card-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(124, 92, 252, 0.12);
  flex-shrink: 0;
}

.pj-float-card-icon.green {
  background: rgba(30, 198, 119, 0.12);
}

.pj-float-card-content {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.pj-float-card-title {
  font-size: 0.6rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.pj-float-card-value {
  font-size: 0.78rem;
  color: var(--white);
}

.pj-float-card-value strong {
  color: #1ec677;
  font-weight: 700;
  animation: pjValueGlow 2.5s ease-in-out infinite;
}

@keyframes pjValueGlow {
  0%, 100% { text-shadow: 0 0 4px rgba(30, 198, 119, 0.2); }
  50% { text-shadow: 0 0 12px rgba(30, 198, 119, 0.5); }
}

.pj-float-card-arrow {
  flex-shrink: 0;
}

/* Dashboard Responsive */
@media (max-width: 768px) {
  .pj-app {
    padding: 16px;
  }

  .pj-app-kpis {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .pj-app-title h3 {
    font-size: 1rem;
  }

  .pj-app-chart-wrap {
    min-height: 180px;
  }

  .pj-app-chart {
    height: 140px;
  }

  .pj-float-card {
    padding: 8px 12px;
  }

  .pj-float-card-title {
    font-size: 0.52rem;
  }

  .pj-float-card-value {
    font-size: 0.68rem;
  }

  .pj-float-ai {
    top: 4px;
    right: 4px;
  }

  .pj-float-deal {
    bottom: 4px;
    left: 4px;
  }

  .pj-float-card-icon {
    width: 24px;
    height: 24px;
  }

  .pj-float-card-icon svg {
    width: 12px;
    height: 12px;
  }

  .pj-browser-url span {
    font-size: 0.6rem;
  }
}

@media (max-width: 480px) {
  .pj-app {
    padding: 12px;
  }

  .pj-app-kpis {
    gap: 8px;
  }

  .pj-app-kpi {
    padding: 10px 12px;
  }

  .pj-app-kpi-icon {
    width: 30px;
    height: 30px;
  }

  .pj-app-kpi-val {
    font-size: 1rem;
  }

  .pj-app-chart {
    height: 120px;
  }

  .pj-float-card-arrow { display: none; }
}

/* --- PriceJoule Industry Tabs --- */
.pj-industry-tabs {
  display: flex;
  gap: 6px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: var(--space-2xl);
  padding: 6px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: var(--radius-lg);
  border: 1px solid var(--glass-border);
}

.pj-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.pj-tab:hover {
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.04);
}

.pj-tab.active {
  color: var(--white);
  background: rgba(74, 156, 245, 0.12);
  border-color: rgba(74, 156, 245, 0.25);
}

.pj-tab svg {
  opacity: 0.5;
  transition: opacity 0.3s ease;
}

.pj-tab.active svg,
.pj-tab:hover svg {
  opacity: 1;
}

/* Industry Panels */
.pj-industry-panel {
  display: none;
}

.pj-industry-panel.active {
  display: block;
  animation: panelFadeIn 0.4s ease-out;
}

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

/* Industry Hero Card */
.pj-industry-hero {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-2xl);
  align-items: center;
  padding: var(--space-2xl);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-2xl);
}

.pj-industry-badge {
  display: inline-block;
  padding: 4px 14px;
  background: rgba(74, 156, 245, 0.12);
  border: 1px solid rgba(74, 156, 245, 0.2);
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 600;
  color: #4A9CF5;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-md);
}

.pj-industry-hero-content h3 {
  font-family: var(--font-heading);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: var(--space-sm);
}

.pj-industry-hero-content p {
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: var(--space-lg);
  max-width: 560px;
}

/* Industry Stats Grid */
.pj-industry-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.pj-stat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 16px 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  transition: border-color 0.3s ease, transform 0.3s ease;
}

.pj-stat-card:hover {
  border-color: rgba(74, 156, 245, 0.3);
  transform: translateY(-2px);
}

.pj-stat-val {
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--cyan);
  line-height: 1.2;
}

.pj-stat-desc {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 4px;
}

/* Industry Features Section */
.pj-industry-features {
  margin-top: var(--space-lg);
}

.pj-industry-features > h4 {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--space-lg);
  text-align: center;
}

/* Industry Tabs Responsive */
@media (max-width: 1024px) {
  .pj-industry-hero {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .pj-industry-stats {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 768px) {
  .pj-industry-tabs {
    gap: 4px;
    padding: 4px;
  }

  .pj-tab {
    padding: 8px 12px;
    font-size: 0.75rem;
    gap: 5px;
  }

  .pj-tab svg {
    width: 14px;
    height: 14px;
  }

  .pj-industry-hero {
    padding: var(--space-lg);
  }

  .pj-industry-hero-content h3 {
    font-size: 1.4rem;
  }

  .pj-industry-stats {
    grid-template-columns: 1fr 1fr;
  }

  .pj-stat-val {
    font-size: 1.3rem;
  }
}

@media (max-width: 480px) {
  .pj-tab {
    padding: 6px 10px;
    font-size: 0.7rem;
  }

  .pj-tab svg {
    display: none;
  }

  .pj-industry-hero {
    padding: var(--space-md);
  }

  .pj-industry-hero-content h3 {
    font-size: 1.2rem;
  }

  .pj-stat-card {
    padding: 12px 8px;
  }

  .pj-stat-val {
    font-size: 1.1rem;
  }

  .pj-stat-desc {
    font-size: 0.65rem;
  }
}

/* --- Stats Bar --- */
.stats-bar {
  background: var(--navy-light);
  border-top: 1px solid var(--glass-border);
  border-bottom: 1px solid var(--glass-border);
  padding: var(--space-2xl) 0;
  position: relative;
  overflow: hidden;
}

/* Animated glow sweep across top border */
.stats-bar::after {
  content: '';
  position: absolute;
  top: -1px;
  left: -30%;
  width: 30%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #00a5a8, #2ec4d4, #1ec677, transparent);
  animation: statsSweep 4s ease-in-out infinite;
}

@keyframes statsSweep {
  0% { left: -30%; }
  100% { left: 100%; }
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-xl);
  text-align: center;
}

.stat-item {
  padding: var(--space-md);
  position: relative;
  border-radius: var(--radius-sm);
  transition: transform 0.4s ease, background 0.4s ease, box-shadow 0.4s ease;
}

.stat-item::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  width: 40px;
  height: 2px;
  background: linear-gradient(90deg, #00a5a8, #1ec677);
  border-radius: 2px;
  transition: transform 0.4s ease;
}

.stat-item:hover {
  transform: translateY(-4px);
  background: rgba(0, 165, 168, 0.04);
  box-shadow: 0 8px 30px rgba(0, 165, 168, 0.08);
}

.stat-item:hover::after {
  transform: translateX(-50%) scaleX(1);
}

.stat-number {
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 800;
  color: var(--white);
  margin-bottom: var(--space-xs);
  transition: text-shadow 0.4s ease;
}

.stat-item:hover .stat-number {
  text-shadow: 0 0 20px rgba(0, 165, 168, 0.3);
}

.stat-number .accent {
  color: var(--teal);
}

.stat-number .stat-counter {
  display: inline-block;
  animation: statCountPop 0.6s ease-out both;
}

@keyframes statCountPop {
  0% { opacity: 0; transform: scale(0.5) translateY(10px); }
  60% { transform: scale(1.05) translateY(-2px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

.stat-label {
  font-size: 0.85rem;
  color: var(--gray-400);
  font-weight: 500;
  transition: color 0.4s ease;
}

.stat-item:hover .stat-label {
  color: rgba(255, 255, 255, 0.7);
}

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

@media (max-width: 768px) {
  .stats-bar {
    padding: var(--space-lg) 0;
    background: linear-gradient(180deg, var(--navy-light), var(--navy));
    border-top: 1px solid rgba(0, 165, 168, 0.15);
    border-bottom: 1px solid rgba(0, 165, 168, 0.1);
    position: relative;
    overflow: hidden;
  }

  .stats-bar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--teal), transparent);
    opacity: 0.4;
  }

  .stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding-bottom: 0;
  }

  .stat-item {
    padding: 16px 10px;
    background: linear-gradient(145deg, rgba(15, 29, 50, 0.6), rgba(10, 22, 40, 0.4));
    border: 1px solid rgba(0, 165, 168, 0.1);
    border-radius: var(--radius-sm);
    position: relative;
  }

  .stat-item:nth-child(4),
  .stat-item:nth-child(5) {
    grid-column: span 1;
  }

  .stat-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 15%;
    right: 15%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--teal), transparent);
    opacity: 0.35;
  }

  .stat-number {
    font-size: 1.6rem;
    margin-bottom: 4px;
  }

  .stat-label {
    font-size: 0.72rem;
    letter-spacing: 0.02em;
    line-height: 1.3;
    opacity: 0.75;
  }
}

@media (max-width: 480px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .stat-item:last-child {
    grid-column: 1 / -1;
  }

  .stat-item {
    padding: 14px 10px;
  }

  .stat-number {
    font-size: 1.4rem;
  }

  .stat-label {
    font-size: 0.68rem;
  }
}

/* --- Page Hero (for subpages) --- */
.page-hero {
  padding: calc(var(--nav-height) + var(--space-4xl)) 0 var(--space-3xl);
  background: var(--navy);
  position: relative;
  overflow: hidden;
}

.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gradient-hero);
  opacity: 0.5;
}

.page-hero .container {
  position: relative;
  z-index: 1;
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: 0.85rem;
  color: var(--gray-400);
  margin-bottom: var(--space-lg);
}

.breadcrumb a {
  color: var(--gray-400);
}

.breadcrumb a:hover {
  color: var(--teal);
}

.breadcrumb .separator {
  color: var(--gray-500);
}

.page-hero h1 {
  margin-bottom: var(--space-md);
}

.page-hero .lead {
  max-width: 680px;
}

@media (max-width: 768px) {
  .page-hero {
    padding: calc(var(--nav-height) + var(--space-xl)) 0 var(--space-xl);
    position: relative;
  }

  .page-hero::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--teal), var(--cyan), transparent);
    opacity: 0.35;
  }

  .page-hero h1 {
    font-size: 1.45rem;
    letter-spacing: -0.02em;
  }

  .page-hero .lead {
    font-size: 0.88rem;
    opacity: 0.85;
    line-height: 1.55;
  }

  .breadcrumb {
    font-size: 0.72rem;
    margin-bottom: var(--space-md);
    opacity: 0.7;
  }
}

/* --- Compact Page Hero variant --- */
.page-hero--compact {
  padding-bottom: var(--space-xl);
}

@media (max-width: 768px) {
  .page-hero--compact {
    padding-bottom: var(--space-md);
  }
}

@media (max-width: 480px) {
  .page-hero {
    padding: calc(var(--nav-height) + var(--space-lg)) 0 var(--space-md);
  }

  .page-hero h1 {
    font-size: 1.25rem;
  }

  .page-hero .lead {
    font-size: 0.82rem;
  }
}

/* --- Balooning Hero --- */
.bal-hero {
  padding-bottom: var(--space-2xl);
}

.bal-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: var(--space-3xl);
  align-items: center;
}

.bal-hero-content {
  position: relative;
  z-index: 1;
}

.bal-hero-visual {
  position: relative;
}

.bal-anim {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 0 40px rgba(0, 165, 168, 0.08));
}

/* Drawing frame fade in */
.bal-anim-frame {
  animation: balFrameIn 0.8s ease-out 0.3s forwards;
}

/* Title bar */
.bal-anim-titlebar {
  animation: balFadeIn 0.5s ease 0.6s forwards;
}

.bal-anim-title {
  animation: balFadeIn 0.5s ease 0.8s forwards;
}

/* Left toolbar */
.bal-anim-toolbar {
  animation: balFadeIn 0.5s ease 0.7s forwards;
}

/* Drawing white background */
.bal-anim-drawing {
  animation: balFadeIn 0.4s ease 0.8s forwards;
}

/* Grid lines */
.bal-anim-grid {
  animation: balFadeIn 0.4s ease 0.9s forwards;
}

/* Part outlines */
.bal-anim-part {
  animation: balFadeIn 0.6s ease 1s forwards;
}

/* Dimension lines appear sequentially */
.bal-anim-dimline {
  stroke-dasharray: 500;
  stroke-dashoffset: 500;
}

.bal-anim-dimline-1 {
  animation: balDrawLine 0.8s ease 1.2s forwards, balFadeIn 0.3s ease 1.2s forwards;
}

.bal-anim-dimline-2 {
  animation: balDrawLine 0.8s ease 1.4s forwards, balFadeIn 0.3s ease 1.4s forwards;
}

.bal-anim-dimline-3 {
  animation: balDrawLine 0.8s ease 1.6s forwards, balFadeIn 0.3s ease 1.6s forwards;
}

.bal-anim-dimline-4 {
  animation: balDrawLine 0.8s ease 1.8s forwards, balFadeIn 0.3s ease 1.8s forwards;
}

/* Scan line sweeps down */
.bal-anim-scanline {
  animation: balScanSweep 2s ease-in-out 2s infinite;
}

/* Balloons pop in sequentially */
.bal-anim-balloon {
  opacity: 0;
  transform-origin: center;
}

.bal-anim-balloon-1 {
  animation: balBalloonPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 2.5s forwards;
}

.bal-anim-balloon-2 {
  animation: balBalloonPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 2.9s forwards;
}

.bal-anim-balloon-3 {
  animation: balBalloonPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 3.3s forwards;
}

.bal-anim-balloon-4 {
  animation: balBalloonPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 3.7s forwards;
}

.bal-anim-balloon-5 {
  animation: balBalloonPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 4.1s forwards;
}

.bal-anim-balloon-6 {
  animation: balBalloonPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 4.5s forwards;
}

/* Leader line from balloon 3 to popup */
.bal-anim-leader {
  animation: balFadeIn 0.3s ease 3.9s forwards;
}

/* Dimension popup on balloon 3 */
.bal-anim-popup {
  animation: balPopupIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 4.0s forwards;
}

/* Warning ring on Balloon 6 */
.bal-anim-ai-warn {
  animation: balFadeIn 0.4s ease 5.2s forwards;
}

/* Status bar */
.bal-anim-status {
  opacity: 0;
  animation: balFadeIn 0.5s ease 5.0s forwards;
}

/* === AI Suggestion Card (HTML overlay) === */
.bal-ai-card {
  position: absolute;
  bottom: 30px;
  right: 10px;
  width: 240px;
  background: #111827;
  border: 1px solid rgba(245, 158, 11, 0.5);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(245, 158, 11, 0.12), 0 0 0 1px rgba(245, 158, 11, 0.08);
  opacity: 0;
  transform: translateY(12px) scale(0.95);
  animation: balAICardIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 5.6s forwards;
  z-index: 10;
  font-family: 'DM Sans', sans-serif;
}

.bal-ai-card-header {
  background: #f59e0b;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 700;
  color: #141b2a;
  display: flex;
  align-items: center;
  gap: 6px;
  letter-spacing: 0.02em;
}

.bal-ai-card-header svg {
  flex-shrink: 0;
}

.bal-ai-card-body {
  padding: 14px;
}

.bal-ai-alert {
  font-size: 14px;
  font-weight: 700;
  color: #f59e0b;
  margin-bottom: 4px;
}

.bal-ai-desc {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.6);
  margin: 0 0 12px;
  line-height: 1.5;
}

.bal-ai-confidence {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}

.bal-ai-conf-label {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
  white-space: nowrap;
}

.bal-ai-bar-track {
  flex: 1;
  height: 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 3px;
  overflow: hidden;
}

.bal-ai-bar-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #f59e0b, #fbbf24);
  border-radius: 3px;
  animation: balAIBarFillHTML 1.2s ease 6.2s forwards;
}

.bal-ai-pct {
  font-size: 12px;
  font-weight: 700;
  color: #f59e0b;
  opacity: 0;
  animation: balFadeInHTML 0.3s ease 7.2s forwards;
  min-width: 28px;
  text-align: right;
}

.bal-ai-actions {
  display: flex;
  gap: 8px;
}

.bal-ai-btn {
  flex: 1;
  padding: 7px 0;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: opacity 0.2s;
}

.bal-ai-btn:hover {
  opacity: 0.85;
}

.bal-ai-btn-review {
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.35);
  color: #f59e0b;
}

.bal-ai-btn-accept {
  background: rgba(30, 198, 119, 0.12);
  border: 1px solid rgba(30, 198, 119, 0.35);
  color: #1ec677;
}

/* --- OneForge Hero SVG Animations --- */
.qk-anim-frame {
  animation: balFrameIn 0.8s ease-out 0.3s forwards;
}

.qk-anim-titlebar {
  animation: balFadeIn 0.5s ease 0.6s forwards;
}

.qk-anim-sidebar {
  animation: balFadeIn 0.5s ease 0.8s forwards;
}

.qk-anim-canvas {
  animation: balFadeIn 0.4s ease 1s forwards;
}

.qk-anim-comp {
  opacity: 0;
}

.qk-anim-comp-1 {
  animation: qkCompIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 1.4s forwards;
}

.qk-anim-comp-2 {
  animation: qkCompIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 2.0s forwards;
}

.qk-anim-comp-3 {
  animation: qkCompIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 2.6s forwards;
}

.qk-anim-comp-4 {
  animation: qkCompIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 3.2s forwards;
}

.qk-anim-cursor {
  animation: balFadeIn 0.3s ease 2.4s forwards;
}

.qk-anim-bottombar {
  animation: balFadeIn 0.5s ease 3.8s forwards;
}

.qk-anim-sparkles {
  animation: balFadeIn 0.5s ease 4.2s forwards;
}

@keyframes qkCompIn {
  0% { opacity: 0; transform: scale(0.85) translateY(8px); }
  70% { opacity: 1; transform: scale(1.03) translateY(-2px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

@media (max-width: 768px) {
  .qk-anim-comp-1 { animation-delay: 1s; }
  .qk-anim-comp-2 { animation-delay: 1.4s; }
  .qk-anim-comp-3 { animation-delay: 1.8s; }
  .qk-anim-comp-4 { animation-delay: 2.2s; }
  .qk-anim-bottombar { animation-delay: 2.6s; }
  .qk-anim-sparkles { animation-delay: 2.8s; }
}

/* Keyframes */
@keyframes balFrameIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

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

@keyframes balDrawLine {
  to { stroke-dashoffset: 0; }
}

@keyframes balScanSweep {
  0% { opacity: 0; transform: translateY(0); }
  10% { opacity: 0.8; }
  90% { opacity: 0.8; }
  100% { opacity: 0; transform: translateY(200px); }
}

@keyframes balBalloonPop {
  0% { opacity: 0; transform: scale(0); }
  70% { opacity: 1; transform: scale(1.15); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes balTypeIn {
  from { opacity: 0; transform: translateX(-5px); }
  to { opacity: 0.85; transform: translateX(0); }
}

@keyframes balPopupIn {
  0% { opacity: 0; transform: scale(0.8) translateY(5px); }
  70% { opacity: 1; transform: scale(1.03) translateY(-1px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes balAICardIn {
  0% { opacity: 0; transform: translateY(12px) scale(0.95); }
  70% { opacity: 1; transform: translateY(-3px) scale(1.02); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes balAIBarFillHTML {
  0% { width: 0; }
  100% { width: 94%; }
}

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

@media (max-width: 1024px) {
  .bal-hero-grid {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .bal-hero-visual {
    max-width: 560px;
    margin: 0 auto;
  }

  .bal-ai-card {
    width: 220px;
  }
}

@media (max-width: 768px) {
  .bal-hero {
    padding-bottom: var(--space-lg);
  }

  .bal-hero-grid {
    gap: var(--space-lg);
  }

  .bal-hero-visual {
    max-width: 400px;
  }

  /* Speed up animations on mobile */
  .bal-anim-toolbar { animation-delay: 0.4s; }
  .bal-anim-drawing { animation-delay: 0.5s; }
  .bal-anim-grid { animation-delay: 0.6s; }
  .bal-anim-balloon-1 { animation-delay: 1.5s; }
  .bal-anim-balloon-2 { animation-delay: 1.8s; }
  .bal-anim-balloon-3 { animation-delay: 2.1s; }
  .bal-anim-balloon-4 { animation-delay: 2.4s; }
  .bal-anim-balloon-5 { animation-delay: 2.7s; }
  .bal-anim-balloon-6 { animation-delay: 3.0s; }
  .bal-anim-leader { animation-delay: 2.5s; }
  .bal-anim-popup { animation-delay: 2.6s; }
  .bal-anim-ai-warn { animation-delay: 3.4s; }
  .bal-anim-status { animation-delay: 3.6s; }

  /* AI card responsive — stack below on mobile */
  .bal-ai-card {
    position: relative;
    bottom: auto;
    right: auto;
    width: 100%;
    margin-top: 12px;
    animation-delay: 3.8s;
  }

  .bal-ai-bar-fill {
    animation-delay: 4.2s;
  }

  .bal-ai-pct {
    animation-delay: 5.0s;
  }

  .bal-ai-card-header {
    font-size: 14px;
    padding: 10px 16px;
  }

  .bal-ai-card-body {
    padding: 16px;
  }

  .bal-ai-alert {
    font-size: 15px;
  }

  .bal-ai-desc {
    font-size: 13px;
  }

  .bal-ai-btn {
    padding: 8px 0;
    font-size: 13px;
  }
}

@media (max-width: 480px) {
  .bal-hero-visual {
    max-width: 100%;
  }

  .bal-ai-card {
    margin-top: 10px;
    border-radius: 8px;
  }

  .bal-ai-card-header {
    font-size: 13px;
    padding: 8px 12px;
  }

  .bal-ai-card-body {
    padding: 12px;
  }
}

/* --- PowerGridPro Hero --- */
.pgp-hero {
  padding-bottom: var(--space-2xl);
}

.pgp-dash-anim {
  width: 100%;
  max-width: 520px;
  height: auto;
  border-radius: var(--radius-md);
  filter: drop-shadow(0 8px 32px rgba(245, 158, 11, 0.08));
}

@media (max-width: 768px) {
  .pgp-dash-anim {
    max-width: 400px;
  }
}

@media (max-width: 480px) {
  .pgp-dash-anim {
    max-width: 100%;
  }
}

/* --- PowerGridPro Dashboard Preview --- */
.pgp-preview-grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: var(--space-3xl);
  align-items: center;
}

.pgp-preview-content h2 {
  font-size: 2rem;
  margin-bottom: var(--space-md);
}

.pgp-preview-content p {
  color: var(--gray-400);
  margin-bottom: var(--space-lg);
}

.pgp-preview-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-xl) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.pgp-preview-list li {
  position: relative;
  padding-left: 1.5rem;
  color: var(--gray-300);
  font-size: 0.95rem;
}

.pgp-preview-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--teal);
}

.pgp-preview-visual {
  perspective: 1000px;
}

.pgp-preview-visual .pj-browser {
  transform: rotateY(-6deg) rotateX(2deg);
  transition: transform 0.5s ease;
}

.pgp-preview-visual:hover .pj-browser {
  transform: rotateY(-2deg) rotateX(1deg);
}

.pgp-preview-grid--reverse {
  grid-template-columns: 1.3fr 1fr;
}

.pgp-preview-grid--reverse .pgp-preview-content {
  order: 2;
}

.pgp-preview-grid--reverse .pgp-preview-visual {
  order: 1;
}

.pgp-preview-grid--reverse .pgp-preview-visual .pj-browser {
  transform: rotateY(6deg) rotateX(2deg);
}

.pgp-preview-grid--reverse .pgp-preview-visual:hover .pj-browser {
  transform: rotateY(2deg) rotateX(1deg);
}

@media (max-width: 768px) {
  .pgp-preview-grid,
  .pgp-preview-grid--reverse {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .pgp-preview-grid--reverse .pgp-preview-content,
  .pgp-preview-grid--reverse .pgp-preview-visual {
    order: unset;
  }

  .pgp-preview-content h2 {
    font-size: 1.6rem;
  }

  .pgp-preview-visual .pj-browser,
  .pgp-preview-grid--reverse .pgp-preview-visual .pj-browser {
    transform: none;
  }

  .pgp-preview-visual:hover .pj-browser,
  .pgp-preview-grid--reverse .pgp-preview-visual:hover .pj-browser {
    transform: none;
  }
}

/* --- Service Detail Blocks (Alternating Layout) --- */
.service-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3xl);
  align-items: center;
  padding: var(--space-3xl) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.service-block:last-child {
  border-bottom: none;
}

.service-block:nth-child(even) {
  direction: rtl;
}

.service-block:nth-child(even) > * {
  direction: ltr;
}

.service-block-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4/3;
  background: var(--surface-card);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.service-block-visual svg {
  width: 80px;
  height: 80px;
  stroke: var(--teal);
  opacity: 0.6;
}

.service-block-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-lg);
}

.service-block-content h3 {
  margin-bottom: var(--space-md);
}

.service-block-content p {
  margin-bottom: var(--space-lg);
}

.feature-list {
  margin-bottom: var(--space-xl);
}

.feature-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-sm) 0;
  font-size: 0.95rem;
  color: var(--gray-300);
}

.feature-list li svg {
  width: 18px;
  height: 18px;
  stroke: var(--green);
  flex-shrink: 0;
  margin-top: 3px;
}

@media (max-width: 768px) {
  .service-block {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    padding: var(--space-xl) 0;
  }

  .service-block:nth-child(even) {
    direction: ltr;
  }

  .service-block-visual {
    aspect-ratio: 16/9;
  }

  .service-block-content h3 {
    font-size: 1.2rem;
  }

  .service-block-content p {
    font-size: 0.9rem;
  }

  .feature-list li {
    font-size: 0.85rem;
  }
}

/* --- Pricing Cards --- */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xl);
  align-items: start;
}

.pricing-card {
  background: var(--surface-card);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: var(--space-2xl);
  text-align: center;
  transition: all var(--transition-normal);
  position: relative;
}

.pricing-card.featured {
  border-color: var(--teal);
  box-shadow: var(--shadow-glow-teal);
  transform: scale(1.02);
}

.pricing-card.featured::before {
  content: 'Most Popular';
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  padding: var(--space-xs) var(--space-lg);
  background: var(--gradient-cta);
  color: var(--white);
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: var(--radius-full);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.pricing-card:hover {
  transform: translateY(-4px);
  border-color: var(--glass-border-hover);
}

.pricing-card.featured:hover {
  transform: scale(1.02) translateY(-4px);
}

.pricing-card h3 {
  margin-bottom: var(--space-sm);
}

.pricing-tier {
  font-size: 0.9rem;
  color: var(--teal);
  margin-bottom: var(--space-lg);
}

.pricing-features {
  text-align: left;
  margin-bottom: var(--space-xl);
}

.pricing-features li {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) 0;
  font-size: 0.9rem;
  color: var(--gray-300);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.pricing-features li:last-child {
  border-bottom: none;
}

.pricing-features li svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.pricing-features li svg.check {
  stroke: var(--green);
}

.pricing-features li svg.x {
  stroke: var(--gray-500);
}

@media (max-width: 1024px) {
  .pricing-grid {
    grid-template-columns: 1fr;
    max-width: 440px;
    margin: 0 auto;
  }
  .pricing-card.featured {
    transform: none;
  }
  .pricing-card.featured:hover {
    transform: translateY(-4px);
  }
}

/* --- Feature Comparison Table --- */
.comparison-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--space-2xl);
  font-size: 0.9rem;
}

.comparison-table thead th {
  padding: var(--space-md) var(--space-lg);
  text-align: center;
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--white);
  background: var(--navy-light);
  border-bottom: 2px solid var(--glass-border);
}

.comparison-table thead th:first-child {
  text-align: left;
}

.comparison-table tbody td {
  padding: var(--space-md) var(--space-lg);
  text-align: center;
  color: var(--gray-300);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.comparison-table tbody td:first-child {
  text-align: left;
  color: var(--white);
  font-weight: 500;
}

.comparison-table tbody tr:hover {
  background: rgba(0, 165, 168, 0.05);
}

.comparison-table .check-icon {
  color: var(--green);
  font-size: 1.1rem;
}

.comparison-table .x-icon {
  color: var(--gray-500);
}

/* --- Timeline --- */
.timeline {
  position: relative;
  padding: var(--space-xl) 0;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, var(--teal), var(--green));
  transform: translateX(-50%);
}

.timeline-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: var(--space-2xl);
  position: relative;
}

.timeline-item:nth-child(odd) {
  flex-direction: row;
  padding-right: calc(50% + var(--space-2xl));
}

.timeline-item:nth-child(even) {
  flex-direction: row-reverse;
  padding-left: calc(50% + var(--space-2xl));
}

.timeline-dot {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 16px;
  height: 16px;
  background: var(--teal);
  border: 3px solid var(--navy);
  border-radius: 50%;
  z-index: 1;
}

.timeline-content {
  background: var(--surface-card);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: var(--space-xl);
}

.timeline-year {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--teal);
  margin-bottom: var(--space-sm);
}

.timeline-content h4 {
  margin-bottom: var(--space-sm);
}

@media (max-width: 768px) {
  .timeline::before {
    left: 16px;
  }
  .timeline-item:nth-child(odd),
  .timeline-item:nth-child(even) {
    flex-direction: row;
    padding: 0 0 0 calc(32px + var(--space-md));
    margin-bottom: var(--space-lg);
  }
  .timeline-dot {
    left: 16px;
    width: 12px;
    height: 12px;
  }
  .timeline-content {
    padding: var(--space-lg);
  }
  .timeline-year {
    font-size: 0.95rem;
  }
  .timeline-content h4 {
    font-size: 1rem;
  }
  .timeline-content p {
    font-size: 0.85rem;
  }
}

/* --- Industry Grid --- */
/* --- Industry Cards (Enhanced) --- */
.industry-card {
  background: var(--surface-card);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: var(--space-xl);
  text-align: center;
  transition: all var(--transition-normal);
  cursor: default;
  position: relative;
  overflow: hidden;
}

/* Top accent line */
.industry-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--teal), var(--cyan));
  opacity: 0.4;
  transition: opacity var(--transition-normal);
}

.industry-card:hover {
  border-color: var(--glass-border-hover);
  background: var(--surface-card-hover);
  transform: translateY(-4px);
}

.industry-card:hover::before {
  opacity: 1;
}

/* Color cycling — accent lines */
.industry-card:nth-child(3n+2)::before {
  background: linear-gradient(90deg, var(--green), var(--teal));
}
.industry-card:nth-child(3n+3)::before {
  background: linear-gradient(90deg, var(--blue), var(--cyan));
}

/* Color cycling — hover glow */
.industry-card:nth-child(3n+1):hover {
  box-shadow: 0 0 30px rgba(0, 165, 168, 0.15);
}
.industry-card:nth-child(3n+2):hover {
  box-shadow: 0 0 30px rgba(30, 198, 119, 0.15);
}
.industry-card:nth-child(3n+3):hover {
  box-shadow: 0 0 30px rgba(59, 125, 216, 0.15);
}

/* Industry icon */
.industry-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto var(--space-md);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 165, 168, 0.1);
  border-radius: var(--radius-md);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.industry-icon svg {
  width: 28px;
  height: 28px;
  stroke: var(--teal);
  transition: stroke 0.3s ease;
}

/* Icon color cycling */
.industry-card:nth-child(3n+2) .industry-icon {
  background: rgba(30, 198, 119, 0.1);
}
.industry-card:nth-child(3n+2) .industry-icon svg {
  stroke: var(--green);
}
.industry-card:nth-child(3n+3) .industry-icon {
  background: rgba(59, 125, 216, 0.1);
}
.industry-card:nth-child(3n+3) .industry-icon svg {
  stroke: var(--blue);
}

/* Icon hover — scale + glow */
.industry-card:hover .industry-icon {
  transform: scale(1.1);
}
.industry-card:nth-child(3n+1):hover .industry-icon {
  box-shadow: 0 0 20px rgba(0, 165, 168, 0.2);
}
.industry-card:nth-child(3n+2):hover .industry-icon {
  box-shadow: 0 0 20px rgba(30, 198, 119, 0.2);
}
.industry-card:nth-child(3n+3):hover .industry-icon {
  box-shadow: 0 0 20px rgba(59, 125, 216, 0.2);
}

.industry-card h4 {
  font-size: 1rem;
  margin-bottom: var(--space-sm);
}

/* Description always visible */
.industry-card p {
  font-size: 0.85rem;
  color: var(--gray-400);
  line-height: 1.6;
  margin-top: var(--space-sm);
  margin-bottom: 0;
  transition: color var(--transition-normal);
}

.industry-card:hover p {
  color: var(--gray-300, rgba(255,255,255,0.65));
}

/* Industries stats — 4 columns */
.industries-stats .stats-grid {
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 768px) {
  .industry-card {
    padding: var(--space-lg);
  }

  .industry-icon {
    width: 42px;
    height: 42px;
  }

  .industry-icon svg {
    width: 22px;
    height: 22px;
  }

  .industry-card h4 {
    font-size: 0.85rem;
  }

  .industry-card p {
    font-size: 0.75rem;
    line-height: 1.5;
  }

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

/* --- Products Page — Tight hero --- */
#products {
  padding-top: var(--space-xl);
}

/* --- Products Page — Row Layout --- */
.products-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
  counter-reset: prod-count;
}

.prod-row {
  display: grid;
  grid-template-columns: 0.9fr 1fr;
  gap: var(--space-lg);
  background: var(--surface-card);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg) var(--space-xl);
  position: relative;
  overflow: hidden;
  transition: all var(--transition-normal);
  counter-increment: prod-count;
}

/* Subtle number watermark */
.prod-row::before {
  content: '0' counter(prod-count);
  position: absolute;
  top: var(--space-md);
  right: var(--space-lg);
  font-size: 3.5rem;
  font-weight: 800;
  font-family: 'Outfit', sans-serif;
  color: rgba(255,255,255,0.025);
  line-height: 1;
  pointer-events: none;
  z-index: 0;
}

.prod-row:hover {
  border-color: var(--glass-border-hover);
  box-shadow: 0 0 40px rgba(0,165,168,0.08);
}

.prod-row--reverse {
  grid-template-columns: 1fr 0.9fr;
  direction: rtl;
}

.prod-row--reverse > * {
  direction: ltr;
}

/* Visual panel */
.prod-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  padding: var(--space-md);
  position: relative;
  min-height: 240px;
}

.prod-visual svg {
  width: 100%;
  max-width: 300px;
}

.prod-visual--pj {
  background: linear-gradient(135deg, rgba(124,92,252,0.1) 0%, rgba(30,198,119,0.06) 100%);
  border: 1px solid rgba(124,92,252,0.15);
}

.prod-visual--bal {
  background: linear-gradient(135deg, rgba(46,196,212,0.1) 0%, rgba(74,156,245,0.06) 100%);
  border: 1px solid rgba(46,196,212,0.15);
}

.prod-visual--qk {
  background: linear-gradient(135deg, rgba(124,92,252,0.08) 0%, rgba(46,196,212,0.06) 100%);
  border: 1px solid rgba(124,92,252,0.12);
}

/* Content panel */
.prod-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-sm) 0;
  position: relative;
  z-index: 1;
}

.prod-badge {
  display: inline-block;
  width: fit-content;
  padding: 0.25rem 0.8rem;
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: 20px;
  margin-bottom: var(--space-sm);
}

.prod-badge--green {
  color: #1ec677;
  background: rgba(30,198,119,0.12);
  border: 1px solid rgba(30,198,119,0.25);
}

.prod-badge--cyan {
  color: #2ec4d4;
  background: rgba(46,196,212,0.12);
  border: 1px solid rgba(46,196,212,0.25);
}

.prod-badge--purple {
  color: #7C5CFC;
  background: rgba(124,92,252,0.12);
  border: 1px solid rgba(124,92,252,0.25);
}

.prod-badge--orange {
  color: #f59e0b;
  background: rgba(245,158,11,0.12);
  border: 1px solid rgba(245,158,11,0.25);
}

.prod-visual--pgp {
  background: linear-gradient(135deg, rgba(245,158,11,0.08) 0%, rgba(30,198,119,0.06) 100%);
  border: 1px solid rgba(245,158,11,0.12);
}

.prod-content h2 {
  font-size: 1.6rem;
  margin-bottom: 0.1rem;
  line-height: 1.2;
}

.prod-tagline {
  font-size: 0.95rem;
  color: var(--teal);
  font-weight: 500;
  margin-bottom: var(--space-sm);
}

.prod-desc {
  color: var(--text-muted);
  font-size: 0.88rem;
  line-height: 1.65;
  margin-bottom: var(--space-md);
}

/* Feature tags */
.prod-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: var(--space-md);
}

.prod-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  color: var(--text-body);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--glass-border);
  border-radius: 6px;
  padding: 0.3rem 0.6rem;
  transition: border-color 0.2s;
}

.prod-tag:hover {
  border-color: var(--glass-border-hover);
}

.prod-tag svg {
  width: 13px;
  height: 13px;
  stroke: var(--teal);
  flex-shrink: 0;
}

/* Actions */
.prod-actions {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
  .prod-row {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    padding: var(--space-lg);
  }

  .prod-row--reverse {
    grid-template-columns: 1fr;
    direction: ltr;
  }

  .prod-visual {
    min-height: 200px;
  }

  .prod-row::before {
    font-size: 3.5rem;
  }
}

@media (max-width: 768px) {
  #products {
    padding-top: var(--space-md);
  }

  .products-list {
    gap: var(--space-xl);
  }

  .prod-row {
    padding: var(--space-md);
    gap: var(--space-md);
  }

  .prod-content h2 {
    font-size: 1.6rem;
  }

  .prod-tagline {
    font-size: 0.85rem;
  }

  .prod-desc {
    font-size: 0.82rem;
  }

  .prod-visual {
    min-height: 160px;
    padding: var(--space-sm);
  }

  .prod-row::before {
    font-size: 2.5rem;
    top: var(--space-sm);
    right: var(--space-md);
  }
}

@media (max-width: 480px) {
  .prod-row {
    padding: var(--space-sm) var(--space-md);
  }

  .prod-content h2 {
    font-size: 1.4rem;
  }

  .prod-actions {
    flex-direction: column;
  }

  .prod-actions .btn {
    width: 100%;
    text-align: center;
  }

  .prod-tags {
    gap: 0.35rem;
  }

  .prod-tag {
    font-size: 0.72rem;
    padding: 0.3rem 0.55rem;
  }

  .prod-visual {
    min-height: 120px;
  }

  .prod-visual svg {
    max-width: 240px;
  }

  .prod-row::before {
    font-size: 2rem;
  }
}

/* --- Balooning Page — Comparison --- */
.bal-compare {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--space-lg);
  align-items: start;
}

/* VS Badge */
.bal-compare-vs {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  position: relative;
}

.bal-compare-vs span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(30, 198, 119, 0.15));
  border: 2px solid rgba(255, 255, 255, 0.1);
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 0.85rem;
  color: var(--white);
  letter-spacing: 0.05em;
  animation: balVsPulse 3s ease-in-out infinite;
}

@keyframes balVsPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.05), 0 0 20px rgba(46, 196, 212, 0.1); transform: scale(1); }
  50% { box-shadow: 0 0 0 10px rgba(255, 255, 255, 0), 0 0 30px rgba(46, 196, 212, 0.2); transform: scale(1.08); }
}

.bal-compare-col {
  background: var(--surface-card);
  border-radius: var(--radius-lg);
  padding: var(--space-2xl);
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.bal-compare-col:hover {
  transform: translateY(-4px);
}

.bal-compare-col--old:hover {
  box-shadow: 0 8px 30px rgba(239, 68, 68, 0.08);
}

.bal-compare-col--new:hover {
  box-shadow: 0 8px 30px rgba(30, 198, 119, 0.1);
}

.bal-compare-col::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
}

.bal-compare-col--old {
  border: 1px solid rgba(239, 68, 68, 0.2);
}

.bal-compare-col--old::before {
  background: linear-gradient(90deg, #ef4444, #f97316);
}

.bal-compare-col--new {
  border: 1px solid rgba(30, 198, 119, 0.25);
}

.bal-compare-col--new::before {
  background: linear-gradient(90deg, var(--teal), var(--green));
}

/* Shimmer sweep on new column */
.bal-compare-col--new::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(30, 198, 119, 0.04), transparent);
  animation: balNewShimmer 6s ease-in-out infinite;
  pointer-events: none;
}

@keyframes balNewShimmer {
  0%, 100% { left: -100%; }
  50% { left: 100%; }
}

.bal-compare-col h4 {
  margin-bottom: var(--space-lg);
  font-size: 1.1rem;
}

.bal-compare-col--old h4 {
  color: #f87171;
}

.bal-compare-col--new h4 {
  color: var(--green);
}

.bal-compare-col ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

/* Row-by-row staggered reveal */
.bal-compare-col li {
  position: relative;
  padding-left: 1.5rem;
  font-size: 0.9rem;
  color: var(--gray-300);
  line-height: 1.55;
  padding-top: 6px;
  padding-bottom: 6px;
  border-radius: 6px;
  transition: background 0.25s ease, transform 0.25s ease;
}

.bal-compare-col li.bal-row {
  opacity: 0;
  transform: translateX(-12px);
  animation: balRowReveal 0.4s ease-out forwards;
}

.bal-compare-col--new li.bal-row {
  transform: translateX(12px);
}

/* Stagger each row */
.bal-compare-col li[data-row="1"] { animation-delay: 0.1s; }
.bal-compare-col li[data-row="2"] { animation-delay: 0.18s; }
.bal-compare-col li[data-row="3"] { animation-delay: 0.26s; }
.bal-compare-col li[data-row="4"] { animation-delay: 0.34s; }
.bal-compare-col li[data-row="5"] { animation-delay: 0.42s; }
.bal-compare-col li[data-row="6"] { animation-delay: 0.5s; }
.bal-compare-col li[data-row="7"] { animation-delay: 0.58s; }
.bal-compare-col li[data-row="8"] { animation-delay: 0.66s; }
.bal-compare-col li[data-row="9"] { animation-delay: 0.74s; }
.bal-compare-col li[data-row="10"] { animation-delay: 0.82s; }
.bal-compare-col li[data-row="11"] { animation-delay: 0.9s; }
.bal-compare-col li[data-row="12"] { animation-delay: 0.98s; }

@keyframes balRowReveal {
  to { opacity: 1; transform: translateX(0); }
}

/* Row hover highlight */
.bal-compare-col--old li:hover {
  background: rgba(239, 68, 68, 0.06);
  transform: translateX(4px);
}

.bal-compare-col--new li:hover {
  background: rgba(30, 198, 119, 0.06);
  transform: translateX(4px);
}

.bal-compare-col li::before {
  position: absolute;
  left: 0;
  top: 0.4em;
  font-size: 0.85rem;
  transition: transform 0.25s ease;
}

.bal-compare-col li:hover::before {
  transform: scale(1.25);
}

.bal-compare-col--old li::before {
  content: '\2717';
  color: #f87171;
}

.bal-compare-col--new li::before {
  content: '\2713';
  color: var(--green);
}

@media (max-width: 768px) {
  .bal-compare {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  .bal-compare-vs {
    justify-self: center;
  }

  .bal-compare-vs span {
    width: 42px;
    height: 42px;
    font-size: 0.75rem;
  }

  .bal-compare-col {
    padding: var(--space-lg);
  }

  .bal-compare-col--new li.bal-row {
    transform: translateX(-12px);
  }
}

/* --- Balooning Page — Timeline Steps (Auto-Flow Animation) --- */
.bal-timeline {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-md);
  position: relative;
  padding: 40px 16px 0;
  overflow: visible;
}

/* Horizontal connecting track (dim background) */
.bal-timeline-track {
  position: absolute;
  top: 66px;
  left: calc(10% + 16px);
  right: calc(10% + 16px);
  height: 2px;
  background: rgba(0, 165, 168, 0.15);
  z-index: 0;
}

/* Animated glowing fill line — flows left to right, loops */
.bal-timeline-track::after {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  height: 4px;
  width: 0;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--teal), var(--cyan), var(--green));
  box-shadow: 0 0 12px rgba(0, 165, 168, 0.5), 0 0 4px rgba(46, 196, 212, 0.4);
}

/* When visible, start the flow animation */
.bal-timeline.tl-animate .bal-timeline-track::after {
  animation: tlTrackFlow 8s ease infinite;
}

.bal-tl-step {
  text-align: center;
  position: relative;
  z-index: 1;
}

/* Icon circle */
.bal-tl-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--surface-card);
  border: 2px solid rgba(0, 165, 168, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-sm);
  color: rgba(46, 196, 212, 0.5);
  transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  position: relative;
}

/* Outer pulse ring — hidden by default */
.bal-tl-icon::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid var(--cyan);
  opacity: 0;
  transform: scale(0.8);
  transition: all 0.5s ease;
}

/* Active step state — triggered by JS class */
.bal-tl-step.tl-active .bal-tl-icon {
  background: linear-gradient(135deg, var(--teal), var(--cyan));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 0 28px rgba(0, 165, 168, 0.45), 0 0 8px rgba(46, 196, 212, 0.3);
  transform: scale(1.12);
}

.bal-tl-step.tl-active .bal-tl-icon::before {
  opacity: 0.4;
  transform: scale(1);
  animation: tlPulseRing 1.5s ease-out infinite;
}

/* Completed step state — stays lit but smaller */
.bal-tl-step.tl-done .bal-tl-icon {
  background: linear-gradient(135deg, var(--teal), var(--cyan));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 0 16px rgba(0, 165, 168, 0.25);
  transform: scale(1);
}

/* Hover always works */
.bal-tl-step:hover .bal-tl-icon {
  box-shadow: 0 0 28px rgba(0, 165, 168, 0.4);
  transform: scale(1.1);
}

/* Step number */
.bal-tl-num {
  font-family: 'Outfit', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  background: linear-gradient(135deg, var(--teal), var(--cyan));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: var(--space-xs);
  letter-spacing: 0.05em;
  opacity: 0.5;
  transition: opacity 0.5s ease;
}

.bal-tl-step.tl-active .bal-tl-num,
.bal-tl-step.tl-done .bal-tl-num {
  opacity: 1;
}

.bal-tl-step h4 {
  font-size: 0.95rem;
  margin-bottom: var(--space-xs);
  line-height: 1.3;
  opacity: 0.6;
  transition: opacity 0.5s ease;
}

.bal-tl-step.tl-active h4,
.bal-tl-step.tl-done h4 {
  opacity: 1;
}

.bal-tl-step p {
  font-size: 0.82rem;
  color: var(--gray-400);
  line-height: 1.55;
  opacity: 0.4;
  transition: opacity 0.5s ease;
}

.bal-tl-step.tl-active p,
.bal-tl-step.tl-done p {
  opacity: 1;
}

/* Connector arrows between steps */
.bal-tl-step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 21px;
  right: calc(-1 * var(--space-md) / 2 - 3px);
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 6px solid var(--cyan);
  opacity: 0.15;
  transition: opacity 0.5s ease;
}

.bal-tl-step.tl-done:not(:last-child)::after {
  opacity: 0.7;
}

/* === Timeline Keyframes === */
@keyframes tlTrackFlow {
  0% { width: 0; opacity: 0.8; }
  60% { width: 100%; opacity: 1; }
  75% { width: 100%; opacity: 1; }
  100% { width: 100%; opacity: 0.3; }
}

@keyframes tlPulseRing {
  0% { opacity: 0.4; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.5); }
}

/* --- Timeline responsive: tablet 3+2 row --- */
@media (max-width: 1024px) {
  .bal-timeline {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg) var(--space-md);
    padding: 20px 0 0;
  }

  .bal-timeline-track {
    display: none;
  }

  .bal-tl-step:not(:last-child)::after {
    display: none;
  }

  /* On tablet/mobile, show all steps fully visible (no dim states) */
  .bal-tl-icon {
    border-color: var(--teal);
    color: var(--cyan);
  }

  .bal-tl-num,
  .bal-tl-step h4 {
    opacity: 1;
  }

  .bal-tl-step p {
    opacity: 0.8;
  }
}

/* --- Timeline responsive: mobile vertical --- */
@media (max-width: 640px) {
  .bal-timeline {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg) var(--space-md);
    padding: 0;
  }

  .bal-tl-icon {
    width: 44px;
    height: 44px;
  }

  .bal-tl-icon svg {
    width: 18px;
    height: 18px;
  }

  .bal-tl-step h4 {
    font-size: 0.88rem;
  }

  .bal-tl-step p {
    font-size: 0.78rem;
  }

  /* Center the last (5th) step */
  .bal-tl-step:last-child {
    grid-column: 1 / -1;
    max-width: 200px;
    margin: 0 auto;
  }
}

/* --- Balooning Page — Roles Grid --- */
.bal-roles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
  max-width: 900px;
  margin: 0 auto;
}

.bal-role {
  background: var(--surface-card);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  transition: all var(--transition-normal);
  text-align: center;
}

.bal-role:hover {
  border-color: var(--glass-border-hover);
  background: var(--surface-card-hover);
  transform: translateY(-2px);
}

.bal-role h4 {
  font-size: 0.9rem;
  color: var(--teal);
  margin-bottom: var(--space-xs);
}

.bal-role p {
  font-size: 0.8rem;
  color: var(--gray-400);
  line-height: 1.5;
  margin: 0;
}

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

@media (max-width: 768px) {
  .bal-roles {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm);
  }

  .bal-role {
    padding: var(--space-md);
  }

  .bal-role h4 {
    font-size: 0.82rem;
  }

  .bal-role p {
    font-size: 0.75rem;
  }
}

@media (max-width: 480px) {
  .bal-roles {
    grid-template-columns: 1fr;
  }
}

/* --- 5-Column Grid --- */
.grid-5 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-lg);
}

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

@media (max-width: 768px) {
  .grid-5 {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
  }
}

@media (max-width: 480px) {
  .grid-5 {
    grid-template-columns: 1fr;
  }
}

/* --- Contact Page --- */

/* Quick Contact Bar */
.contact-quick-bar {
  padding: var(--space-xl) 0;
  background: var(--navy-light);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.quick-contact-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
}

.quick-contact-chip {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-lg);
  background: var(--surface-card);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: all var(--transition-normal);
}

.quick-contact-chip:hover {
  border-color: var(--glass-border-hover);
  background: var(--surface-card-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 165, 168, 0.1);
}

.quick-chip-icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(0, 165, 168, 0.15), rgba(46, 196, 212, 0.08));
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.quick-chip-icon svg {
  width: 22px;
  height: 22px;
  stroke: var(--teal);
}

.quick-chip-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.quick-chip-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--teal);
  margin-bottom: 2px;
}

.quick-chip-value {
  font-size: 0.9rem;
  color: var(--gray-200);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
}

/* Contact Section */
.contact-section {
  padding-top: var(--space-3xl);
  padding-bottom: var(--space-3xl);
}

.contact-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: var(--space-3xl);
  align-items: start;
}

/* Contact Form */
.contact-form-wrapper {
  background: var(--surface-card);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: var(--space-2xl);
}

.contact-form-header {
  margin-bottom: var(--space-xl);
}

.contact-form-header h2 {
  font-size: 1.5rem;
  margin-bottom: var(--space-sm);
}

.contact-form-header p {
  color: var(--gray-400);
  font-size: 0.9rem;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
}

.form-group {
  margin-bottom: var(--space-lg);
}

.form-group label {
  display: block;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--gray-200);
  margin-bottom: var(--space-sm);
}

.form-group label .required {
  color: var(--teal);
}

.form-control {
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: 0.95rem;
  font-family: var(--font-body);
  color: var(--white);
  background: var(--navy);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-control:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(0, 165, 168, 0.15);
}

.form-control::placeholder {
  color: var(--gray-500);
}

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

select.form-control {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238892a4' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  cursor: pointer;
}

.contact-submit-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 600;
  padding: 0.9rem 2rem;
}

/* Contact Info Side */
.contact-info-side {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.contact-info-card {
  background: var(--surface-card);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  overflow: hidden;
}

.contact-card-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.contact-card-header h3 {
  font-size: 1.1rem;
  color: var(--white);
  margin: 0;
}

.contact-detail-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  padding: var(--space-sm) 0;
}

.contact-detail-item + .contact-detail-item {
  margin-top: var(--space-sm);
  padding-top: var(--space-md);
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.contact-detail-icon {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(0, 165, 168, 0.12), rgba(46, 196, 212, 0.06));
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.contact-detail-icon svg {
  width: 18px;
  height: 18px;
  stroke: var(--teal);
}

.contact-detail-content h4 {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gray-400);
  margin-bottom: 4px;
}

.contact-detail-content p {
  font-size: 0.9rem;
  color: var(--gray-200);
  margin-bottom: 2px;
  line-height: 1.5;
}

.contact-detail-content .address-text {
  color: var(--gray-300);
  font-size: 0.85rem;
}

.contact-detail-content a {
  color: var(--gray-200);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.contact-detail-content a:hover {
  color: var(--teal);
}

.contact-badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 8px;
  background: rgba(0, 165, 168, 0.12);
  color: var(--teal);
  border-radius: 4px;
  vertical-align: middle;
  margin-left: 4px;
}

/* Singapore Flag */
.singapore-flag {
  display: inline-flex;
  align-items: center;
}

/* Business Hours Card */
.contact-hours-card {
  background: var(--surface-card);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
}

.hours-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.hours-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-sm) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.hours-row:last-child {
  border-bottom: none;
}

.hours-day {
  font-size: 0.85rem;
  color: var(--gray-300);
}

.hours-time {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--gray-200);
}

.hours-time.closed {
  color: var(--gray-500);
}

/* Map Section */
.contact-map-section {
  padding: var(--space-2xl) 0 var(--space-3xl);
  background: var(--navy);
}

.map-wrapper {
  background: var(--surface-card);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.map-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-lg) var(--space-xl);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.map-header-left {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.map-header-left h3 {
  font-size: 1rem;
  color: var(--white);
  margin: 0;
}

.map-directions-link {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--teal);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.map-directions-link:hover {
  color: var(--cyan);
}

.map-container {
  border-radius: 0;
  overflow: hidden;
}

.map-container iframe {
  width: 100%;
  height: 350px;
  border: none;
  display: block;
  filter: brightness(0.85) contrast(1.1);
}

/* Contact Page Responsive */
@media (max-width: 1024px) {
  .contact-grid {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
  }
}

@media (max-width: 768px) {
  .contact-grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .contact-section {
    padding-top: var(--space-xl);
    padding-bottom: var(--space-xl);
  }

  .quick-contact-bar {
    padding: var(--space-lg) 0;
  }

  .quick-contact-row {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-sm);
  }

  .quick-contact-chip {
    padding: var(--space-sm) var(--space-md);
    gap: var(--space-sm);
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }

  .quick-chip-icon {
    width: 34px;
    height: 34px;
  }

  .quick-chip-icon svg {
    width: 16px;
    height: 16px;
  }

  .quick-chip-value {
    font-size: 0.78rem;
    white-space: normal;
    word-break: break-all;
    overflow: visible;
    text-overflow: unset;
  }

  .form-row {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .contact-form-wrapper {
    padding: var(--space-lg);
  }

  .contact-form-header h2 {
    font-size: 1.2rem;
  }

  .contact-info-card,
  .contact-hours-card {
    padding: var(--space-md) var(--space-lg);
  }

  .map-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
  }

  .map-container iframe {
    height: 250px;
  }

  .contact-map-section {
    padding: var(--space-lg) 0 var(--space-2xl);
  }
}

@media (max-width: 480px) {
  .contact-form-wrapper {
    padding: var(--space-md);
  }

  .contact-info-card,
  .contact-hours-card {
    padding: var(--space-md);
  }

  .contact-detail-icon {
    width: 32px;
    height: 32px;
  }

  .contact-detail-icon svg {
    width: 16px;
    height: 16px;
  }

  .contact-detail-content h4 {
    font-size: 0.72rem;
  }

  .contact-detail-content p {
    font-size: 0.82rem;
  }

  .map-container iframe {
    height: 200px;
  }

  .quick-contact-row {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
  }

  .quick-contact-chip {
    flex-direction: row;
    align-items: center;
    padding: var(--space-sm) var(--space-md);
    gap: var(--space-md);
  }

  .quick-chip-icon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
  }

  .quick-chip-icon svg {
    width: 16px;
    height: 16px;
  }

  .quick-chip-label {
    font-size: 0.65rem;
  }

  .quick-chip-value {
    font-size: 0.8rem;
    white-space: normal;
    word-break: break-all;
    overflow: visible;
    text-overflow: unset;
  }
}

/* --- Client Logos --- */
.clients-section {
  padding: var(--space-2xl) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.clients-track {
  display: flex;
  gap: var(--space-3xl);
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.client-logo {
  height: 40px;
  opacity: 0.4;
  filter: grayscale(100%) brightness(2);
  transition: all var(--transition-normal);
}

.client-logo:hover {
  opacity: 0.8;
  filter: grayscale(0%) brightness(1);
}

/* --- Partner Showcase --- */
.partner-showcase {
  display: flex;
  justify-content: center;
  gap: var(--space-lg);
  flex-wrap: wrap;
}

.partner-card {
  background: #fff;
  border-radius: var(--radius-md);
  padding: var(--space-lg) var(--space-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 220px;
  height: 90px;
  transition: all var(--transition-normal);
}

.partner-card:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
  transform: translateY(-3px);
}

.partner-card img {
  max-width: 160px;
  max-height: 55px;
  object-fit: contain;
}

@media (max-width: 768px) {
  .partner-showcase {
    gap: var(--space-md);
  }

  .partner-card {
    width: 180px;
    height: 76px;
    padding: var(--space-md) var(--space-lg);
  }

  .partner-card img {
    max-width: 130px;
    max-height: 45px;
  }
}

@media (max-width: 640px) {
  .partner-showcase {
    gap: var(--space-sm);
  }

  .partner-card {
    width: 160px;
    height: 66px;
    padding: var(--space-sm) var(--space-md);
  }

  .partner-card img {
    max-width: 115px;
    max-height: 38px;
  }
}

@media (max-width: 400px) {
  .partner-card {
    width: 140px;
    height: 58px;
    padding: var(--space-xs) var(--space-sm);
  }

  .partner-card img {
    max-width: 100px;
    max-height: 34px;
  }
}

/* --- CTA Banner --- */
.cta-banner {
  padding: var(--space-4xl) 0;
  text-align: center;
  background: linear-gradient(135deg, rgba(0, 165, 168, 0.08) 0%, rgba(30, 198, 119, 0.08) 100%);
  border-top: 1px solid var(--glass-border);
  border-bottom: 1px solid var(--glass-border);
}

.cta-banner h2 {
  margin-bottom: var(--space-md);
}

.cta-banner p {
  font-size: 1.1rem;
  margin-bottom: var(--space-2xl);
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

.cta-banner-buttons {
  display: flex;
  justify-content: center;
  gap: var(--space-md);
  flex-wrap: wrap;
}

@media (max-width: 768px) {
  .cta-banner {
    padding: var(--space-2xl) var(--space-md);
    background: linear-gradient(135deg, rgba(0, 165, 168, 0.1) 0%, rgba(59, 125, 216, 0.06) 50%, rgba(30, 198, 119, 0.1) 100%);
    border-top: 1px solid rgba(0, 165, 168, 0.2);
    border-bottom: 1px solid rgba(30, 198, 119, 0.15);
    position: relative;
    overflow: hidden;
  }

  .cta-banner::before {
    content: '';
    position: absolute;
    top: -60%;
    left: -20%;
    width: 140%;
    height: 140%;
    background: radial-gradient(ellipse at center, rgba(0, 165, 168, 0.06), transparent 60%);
    pointer-events: none;
  }

  .cta-banner h2 {
    font-size: 1.5rem;
    letter-spacing: -0.02em;
  }

  .cta-banner p {
    font-size: 0.95rem;
    margin-bottom: var(--space-lg);
    opacity: 0.85;
  }

  .cta-banner-buttons {
    flex-direction: row;
    justify-content: center;
    gap: 12px;
  }

  .cta-banner-buttons .btn {
    width: auto;
    max-width: none;
    padding: 0.75rem 1.4rem;
    font-size: 0.9rem;
  }
}

@media (max-width: 480px) {
  .cta-banner {
    padding: var(--space-xl) var(--space-sm);
  }

  .cta-banner h2 {
    font-size: 1.25rem;
  }

  .cta-banner p {
    font-size: 0.85rem;
  }

  .cta-banner-buttons {
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }

  .cta-banner-buttons .btn {
    width: 100%;
    text-align: center;
    padding: 0.65rem 1rem;
    font-size: 0.85rem;
  }
}

/* --- Partners Section --- */
.partner-category {
  margin-bottom: var(--space-3xl);
}

.partner-category:last-child {
  margin-bottom: 0;
}

.partner-category h3 {
  margin-bottom: var(--space-xl);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--glass-border);
}

/* --- Footer --- */
.footer {
  background: var(--surface-dark);
  border-top: 1px solid var(--glass-border);
  padding: var(--space-4xl) 0 0;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: var(--space-3xl);
  padding-bottom: var(--space-3xl);
}

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

.footer-brand .nav-logo {
  margin-bottom: var(--space-md);
}

.footer-brand p {
  font-size: 0.9rem;
  color: var(--gray-400);
}

.footer-social {
  display: flex;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

.footer-social a {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-sm);
  color: var(--gray-400);
  transition: all var(--transition-fast);
}

.footer-social a:hover {
  background: rgba(0, 165, 168, 0.1);
  border-color: var(--teal);
  color: var(--teal);
}

.footer-social a svg {
  width: 18px;
  height: 18px;
}

.footer-column h5 {
  color: var(--white);
  margin-bottom: var(--space-lg);
  font-size: 0.95rem;
}

.footer-column ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.footer-column a {
  font-size: 0.88rem;
  color: var(--gray-400);
}

.footer-column a:hover {
  color: var(--teal);
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: var(--space-lg) 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.82rem;
  color: var(--gray-500);
}

@media (max-width: 1024px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {
  .footer {
    padding-top: var(--space-2xl);
  }

  .footer-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
  }

  .footer-brand {
    grid-column: 1 / -1;
  }

  .footer-brand {
    max-width: 100%;
  }

  .footer-brand p {
    font-size: 0.82rem;
  }

  .footer-column h5 {
    font-size: 0.85rem;
    margin-bottom: var(--space-md);
  }

  .footer-column a {
    font-size: 0.8rem;
  }

  .footer-bottom {
    flex-direction: column;
    gap: var(--space-sm);
    text-align: center;
    font-size: 0.75rem;
  }

  .footer-bottom p:nth-child(2) {
    display: none;
  }
}

@media (max-width: 400px) {
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
  }

  .footer-column:last-child {
    grid-column: 1 / -1;
  }
}

/* --- Utility Classes --- */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.mt-1 { margin-top: var(--space-md); }
.mt-2 { margin-top: var(--space-xl); }
.mt-3 { margin-top: var(--space-2xl); }
.mt-4 { margin-top: var(--space-3xl); }
.mb-1 { margin-bottom: var(--space-md); }
.mb-2 { margin-bottom: var(--space-xl); }
.mb-3 { margin-bottom: var(--space-2xl); }
.mb-4 { margin-bottom: var(--space-3xl); }

.flex { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-wrap { flex-wrap: wrap; }
.gap-1 { gap: var(--space-md); }
.gap-2 { gap: var(--space-xl); }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* --- CTA Buttons Row --- */
.cta-buttons-row {
  display: flex;
  justify-content: center;
  gap: var(--space-md);
  flex-wrap: wrap;
}

@media (max-width: 768px) {
  .cta-buttons-row {
    flex-direction: row;
    justify-content: center;
    gap: 8px;
  }

  .cta-buttons-row .btn {
    font-size: 0.78rem;
    padding: 0.6rem 1rem;
  }

  /* Better mobile section spacing */
  .mt-3 {
    margin-top: var(--space-xl);
  }
}

/* ================================================
   PriceJoule Services — Dashboard Cards
   ================================================ */

.pjs-dashboard-grid {
  gap: var(--space-xl);
}

.pjs-dash-card {
  background: var(--surface-card);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
  position: relative;
}

/* Ambient shimmer sweep on cards */
.pjs-dash-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(74,156,245,0.04), transparent);
  animation: pjsCardSweep 6s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

.pjs-dash-card:nth-child(2)::before { animation-delay: -1s; }
.pjs-dash-card:nth-child(3)::before { animation-delay: -2s; }
.pjs-dash-card:nth-child(4)::before { animation-delay: -3s; }
.pjs-dash-card:nth-child(5)::before { animation-delay: -4s; }
.pjs-dash-card:nth-child(6)::before { animation-delay: -5s; }

@keyframes pjsCardSweep {
  0%   { left: -100%; opacity: 0; }
  30%  { opacity: 1; }
  70%  { opacity: 1; }
  100% { left: 160%; opacity: 0; }
}

/* Top accent glow line */
.pjs-dash-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #4A9CF5, transparent);
  opacity: 0.3;
  transition: opacity 0.4s ease;
  z-index: 1;
}

.pjs-dash-card:hover::after {
  opacity: 0.8;
}

/* Color-matched accent lines per card */
.pjs-dash-card:nth-child(1)::after,
.pjs-dash-card:nth-child(5)::after { background: linear-gradient(90deg, transparent, #4A9CF5, transparent); }
.pjs-dash-card:nth-child(2)::after,
.pjs-dash-card:nth-child(6)::after { background: linear-gradient(90deg, transparent, #1ec677, transparent); }
.pjs-dash-card:nth-child(3)::after { background: linear-gradient(90deg, transparent, #2ec4d4, transparent); }
.pjs-dash-card:nth-child(4)::after { background: linear-gradient(90deg, transparent, #a878ff, transparent); }

.pjs-dash-card:hover {
  transform: translateY(-6px);
  border-color: rgba(74,156,245,0.2);
  box-shadow: 0 16px 48px rgba(0,0,0,0.35), 0 0 40px rgba(74,156,245,0.08);
}

.pjs-dash-header {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-lg) var(--space-lg) 0;
}

.pjs-dash-icon {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.pjs-dash-card:hover .pjs-dash-icon {
  transform: scale(1.1);
}

.pjs-dash-card:hover .pjs-dash-icon.blue {
  box-shadow: 0 0 16px rgba(74,156,245,0.3);
}

.pjs-dash-card:hover .pjs-dash-icon.green {
  box-shadow: 0 0 16px rgba(30,198,119,0.3);
}

.pjs-dash-card:hover .pjs-dash-icon.cyan {
  box-shadow: 0 0 16px rgba(46,196,212,0.3);
}

.pjs-dash-card:hover .pjs-dash-icon.purple {
  box-shadow: 0 0 16px rgba(168,120,255,0.3);
}

.pjs-dash-icon svg {
  width: 20px;
  height: 20px;
}

.pjs-dash-icon.blue {
  background: rgba(74,156,245,0.12);
  color: #4A9CF5;
}

.pjs-dash-icon.green {
  background: rgba(30,198,119,0.12);
  color: #1ec677;
}

.pjs-dash-icon.cyan {
  background: rgba(46,196,212,0.12);
  color: #2ec4d4;
}

.pjs-dash-icon.purple {
  background: rgba(168,120,255,0.12);
  color: #a878ff;
}

.pjs-dash-header h4 {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
  margin: 0;
  line-height: 1.2;
}

.pjs-dash-subtitle {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.45);
}

.pjs-dash-body {
  padding: var(--space-lg);
}

/* --- Rate Table (T&M) --- */
.pjs-rate-table,
.pjs-expense-table {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.pjs-rate-header {
  display: grid;
  grid-template-columns: 1.5fr 0.6fr 0.8fr 0.8fr;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: rgba(255,255,255,0.03);
  border-radius: var(--radius-sm);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.4);
  font-weight: 600;
}

.pjs-rate-row {
  display: grid;
  grid-template-columns: 1.5fr 0.6fr 0.8fr 0.8fr;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid rgba(255,255,255,0.04);
  font-size: 0.85rem;
  color: rgba(255,255,255,0.7);
  align-items: center;
  transition: background 0.3s ease, transform 0.3s ease;
  animation: pjsRowSlideIn 0.5s ease both;
}

.pjs-rate-row:nth-child(2) { animation-delay: 0.1s; }
.pjs-rate-row:nth-child(3) { animation-delay: 0.2s; }
.pjs-rate-row:nth-child(4) { animation-delay: 0.3s; }
.pjs-rate-row:nth-child(5) { animation-delay: 0.4s; }

@keyframes pjsRowSlideIn {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: translateX(0); }
}

.pjs-rate-row:hover {
  background: rgba(255,255,255,0.03);
  transform: translateX(4px);
}

.pjs-role-name {
  color: rgba(255,255,255,0.9);
  font-weight: 500;
}

.pjs-amount {
  color: #4A9CF5;
  font-weight: 600;
  transition: text-shadow 0.3s ease;
}

.pjs-rate-row:hover .pjs-amount,
.pjs-retainer-row:hover .pjs-amount {
  text-shadow: 0 0 10px rgba(74,156,245,0.5);
}

.pjs-rate-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-md);
  margin-top: var(--space-sm);
  background: rgba(74,156,245,0.06);
  border-radius: var(--radius-sm);
  border: 1px solid rgba(74,156,245,0.1);
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(255,255,255,0.7);
}

.pjs-total {
  color: #4A9CF5;
  font-size: 1.1rem;
  font-weight: 700;
  animation: pjsTotalGlow 3s ease-in-out infinite;
}

@keyframes pjsTotalGlow {
  0%, 100% { text-shadow: 0 0 6px rgba(74,156,245,0.2); }
  50%      { text-shadow: 0 0 18px rgba(74,156,245,0.5); }
}

/* --- Milestone List (Fixed Price) --- */
.pjs-milestone-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.pjs-milestone {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pjs-milestone-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pjs-milestone-phase {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.8);
  font-weight: 500;
}

.pjs-milestone-pct {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.45);
  font-weight: 600;
}

.pjs-progress-bar {
  height: 6px;
  background: rgba(255,255,255,0.06);
  border-radius: 3px;
  overflow: hidden;
}

.pjs-progress-fill {
  height: 100%;
  background: #1ec677;
  border-radius: 3px;
  animation: pjsBarGrow 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes pjsBarGrow {
  from { transform: scaleX(0); transform-origin: left; }
  to   { transform: scaleX(1); transform-origin: left; }
}

.pjs-milestone:nth-child(1) .pjs-progress-fill { animation-delay: 0.2s; }
.pjs-milestone:nth-child(2) .pjs-progress-fill { animation-delay: 0.5s; }
.pjs-milestone:nth-child(3) .pjs-progress-fill { animation-delay: 0.8s; }
.pjs-milestone:nth-child(4) .pjs-progress-fill { animation-delay: 1.1s; }

.pjs-progress-fill.pjs-fill-active {
  background: linear-gradient(90deg, #4A9CF5, #2ec4d4);
  position: relative;
  overflow: hidden;
}

.pjs-progress-fill.pjs-fill-active::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  animation: pjsProgressSweep 2s ease-in-out infinite;
}

@keyframes pjsProgressSweep {
  0%   { left: -100%; }
  100% { left: 200%; }
}

.pjs-milestone-val {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.5);
  font-weight: 500;
  text-align: right;
}

/* --- Retainer Gauge --- */
.pjs-retainer-gauge {
  display: flex;
  gap: var(--space-xl);
  align-items: center;
}

.pjs-gauge-visual {
  position: relative;
  width: 120px;
  height: 120px;
  flex-shrink: 0;
}

.pjs-gauge-ring {
  width: 100%;
  height: 100%;
}

.pjs-gauge-ring circle:nth-child(2) {
  animation: pjsGaugeFill 1.8s cubic-bezier(0.4, 0, 0.2, 1) 0.3s both;
}

@keyframes pjsGaugeFill {
  from { stroke-dasharray: 0 314; }
  to   { stroke-dasharray: 235 314; }
}

.pjs-gauge-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.pjs-gauge-val {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 800;
  color: #2ec4d4;
  line-height: 1;
  animation: pjsGaugeValPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 1.5s both;
}

@keyframes pjsGaugeValPop {
  from { opacity: 0; transform: scale(0.5); }
  to   { opacity: 1; transform: scale(1); }
}

.pjs-gauge-label {
  font-size: 0.7rem;
  color: rgba(255,255,255,0.4);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.pjs-retainer-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pjs-retainer-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.6);
  padding: 4px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

.pjs-retainer-row .pjs-amount {
  color: #2ec4d4;
  font-weight: 600;
}

.pjs-retainer-row.pjs-overage {
  border-bottom: none;
  color: rgba(255,180,80,0.8);
}

.pjs-retainer-row.pjs-overage span:last-child {
  color: #ffb450;
  font-weight: 600;
  animation: pjsOveragePulse 2.5s ease-in-out infinite;
}

@keyframes pjsOveragePulse {
  0%, 100% { text-shadow: none; }
  50%      { text-shadow: 0 0 10px rgba(255,180,80,0.4); }
}

/* --- Utilization Chart --- */
.pjs-util-chart {
  position: relative;
}

.pjs-util-target {
  position: relative;
  margin-bottom: var(--space-sm);
  height: 1px;
}

.pjs-target-line {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: repeating-linear-gradient(90deg, rgba(255,180,80,0.5) 0, rgba(255,180,80,0.5) 6px, transparent 6px, transparent 12px);
  animation: pjsTargetFade 3s ease-in-out infinite;
}

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

.pjs-target-label {
  position: absolute;
  top: -10px;
  right: 0;
  font-size: 0.68rem;
  color: rgba(255,180,80,0.7);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.pjs-util-bars {
  display: flex;
  gap: var(--space-md);
  align-items: flex-end;
  height: 160px;
  padding-top: var(--space-md);
}

.pjs-util-bar-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  height: 100%;
}

.pjs-util-bar-wrap {
  flex: 1;
  width: 100%;
  max-width: 40px;
  display: flex;
  align-items: flex-end;
  position: relative;
}

.pjs-util-bar {
  width: 100%;
  border-radius: 4px 4px 0 0;
  position: relative;
  animation: pjsUtilGrow 1.2s cubic-bezier(0.4, 0, 0.2, 1) both;
  transform-origin: bottom;
}

.pjs-util-bar-group:nth-child(1) .pjs-util-bar { animation-delay: 0.15s; }
.pjs-util-bar-group:nth-child(2) .pjs-util-bar { animation-delay: 0.3s; }
.pjs-util-bar-group:nth-child(3) .pjs-util-bar { animation-delay: 0.45s; }
.pjs-util-bar-group:nth-child(4) .pjs-util-bar { animation-delay: 0.6s; }
.pjs-util-bar-group:nth-child(5) .pjs-util-bar { animation-delay: 0.75s; }

@keyframes pjsUtilGrow {
  from { transform: scaleY(0); opacity: 0; }
  to   { transform: scaleY(1); opacity: 1; }
}

/* Bar hover glow */
.pjs-util-bar-group:hover .pjs-bar-green {
  box-shadow: 0 0 16px rgba(30,198,119,0.3);
}

.pjs-util-bar-group:hover .pjs-bar-blue {
  box-shadow: 0 0 16px rgba(74,156,245,0.3);
}

.pjs-util-bar-group:hover .pjs-bar-warn {
  box-shadow: 0 0 16px rgba(255,124,67,0.3);
}

.pjs-util-bar.pjs-bar-green {
  background: linear-gradient(180deg, #1ec677, rgba(30,198,119,0.4));
}

.pjs-util-bar.pjs-bar-blue {
  background: linear-gradient(180deg, #4A9CF5, rgba(74,156,245,0.4));
}

.pjs-util-bar.pjs-bar-warn {
  background: linear-gradient(180deg, #ff7c43, rgba(255,124,67,0.4));
}

.pjs-util-name {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.5);
  white-space: nowrap;
}

.pjs-util-pct {
  font-size: 0.75rem;
  font-weight: 700;
  color: rgba(255,255,255,0.8);
}

/* --- Timeline (Milestone Billing) --- */
.pjs-timeline {
  position: relative;
  padding-left: 24px;
}

.pjs-timeline::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 4px;
  bottom: 4px;
  width: 2px;
  background: rgba(255,255,255,0.08);
  border-radius: 1px;
}

.pjs-timeline-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm) 0;
  animation: pjsTlSlideIn 0.5s ease both;
}

.pjs-timeline-item:nth-child(1) { animation-delay: 0.1s; }
.pjs-timeline-item:nth-child(2) { animation-delay: 0.25s; }
.pjs-timeline-item:nth-child(3) { animation-delay: 0.4s; }
.pjs-timeline-item:nth-child(4) { animation-delay: 0.55s; }
.pjs-timeline-item:nth-child(5) { animation-delay: 0.7s; }

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

.pjs-tl-dot {
  position: absolute;
  left: -20px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.15);
  background: var(--bg-primary);
}

.pjs-tl-done .pjs-tl-dot {
  border-color: #1ec677;
  background: #1ec677;
  box-shadow: 0 0 8px rgba(30,198,119,0.3);
}

.pjs-tl-active .pjs-tl-dot {
  border-color: #4A9CF5;
  background: #4A9CF5;
  box-shadow: 0 0 8px rgba(74,156,245,0.4);
  animation: pjsTlPulse 2s ease-in-out infinite;
}

@keyframes pjsTlPulse {
  0%, 100% { box-shadow: 0 0 8px rgba(74,156,245,0.4); }
  50% { box-shadow: 0 0 16px rgba(74,156,245,0.6); }
}

.pjs-tl-future .pjs-tl-dot {
  border-color: rgba(255,255,255,0.12);
  background: transparent;
}

.pjs-tl-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pjs-tl-title {
  font-size: 0.88rem;
  color: rgba(255,255,255,0.85);
  font-weight: 500;
}

.pjs-tl-meta {
  font-size: 0.76rem;
  color: rgba(255,255,255,0.4);
}

.pjs-tl-status {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 10px;
  border-radius: 20px;
  flex-shrink: 0;
}

.pjs-paid {
  background: rgba(30,198,119,0.12);
  color: #1ec677;
  animation: pjsBadgePop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.pjs-pending-status {
  background: rgba(74,156,245,0.12);
  color: #4A9CF5;
  animation: pjsPendingPulse 2s ease-in-out infinite;
}

@keyframes pjsPendingPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(74,156,245,0); }
  50%      { box-shadow: 0 0 12px 2px rgba(74,156,245,0.2); }
}

.pjs-upcoming {
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.35);
}

@keyframes pjsBadgePop {
  from { opacity: 0; transform: scale(0.6); }
  to   { opacity: 1; transform: scale(1); }
}

.pjs-timeline-item:nth-child(1) .pjs-tl-status { animation-delay: 0.3s; }
.pjs-timeline-item:nth-child(2) .pjs-tl-status { animation-delay: 0.5s; }
.pjs-timeline-item:nth-child(3) .pjs-tl-status { animation-delay: 0.7s; }

.pjs-tl-done .pjs-tl-title {
  color: rgba(255,255,255,0.6);
}

.pjs-tl-future .pjs-tl-title {
  color: rgba(255,255,255,0.4);
}

/* --- Expense Table --- */
.pjs-expense-row {
  display: grid;
  grid-template-columns: 1.5fr 0.7fr 0.5fr 0.7fr;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid rgba(255,255,255,0.04);
  font-size: 0.85rem;
  color: rgba(255,255,255,0.7);
  align-items: center;
  transition: background 0.3s ease, transform 0.3s ease;
  animation: pjsRowSlideIn 0.5s ease both;
}

.pjs-expense-row:nth-child(1) { animation-delay: 0.1s; }
.pjs-expense-row:nth-child(2) { animation-delay: 0.2s; }
.pjs-expense-row:nth-child(3) { animation-delay: 0.3s; }
.pjs-expense-row:nth-child(4) { animation-delay: 0.4s; }

.pjs-expense-row:hover {
  background: rgba(255,255,255,0.03);
  transform: translateX(4px);
}

.pjs-expense-cat {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,0.85);
  font-weight: 500;
}

.pjs-exp-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.pjs-exp-travel { background: #4A9CF5; box-shadow: 0 0 6px rgba(74,156,245,0.4); }
.pjs-exp-software { background: #a878ff; box-shadow: 0 0 6px rgba(168,120,255,0.4); }
.pjs-exp-infra { background: #2ec4d4; box-shadow: 0 0 6px rgba(46,196,212,0.4); }
.pjs-exp-misc { background: #1ec677; box-shadow: 0 0 6px rgba(30,198,119,0.4); }

.pjs-exp-dot {
  animation: pjsDotPulse 2.5s ease-in-out infinite;
}

.pjs-expense-row:nth-child(2) .pjs-exp-dot { animation-delay: -0.5s; }
.pjs-expense-row:nth-child(3) .pjs-exp-dot { animation-delay: -1s; }
.pjs-expense-row:nth-child(4) .pjs-exp-dot { animation-delay: -1.5s; }

@keyframes pjsDotPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.4); }
}

.pjs-expense-cost {
  color: rgba(255,255,255,0.5);
}

.pjs-expense-markup {
  color: #1ec677;
  font-weight: 600;
  font-size: 0.8rem;
  animation: pjsMarkupGlow 3s ease-in-out infinite;
}

@keyframes pjsMarkupGlow {
  0%, 100% { text-shadow: none; }
  50%      { text-shadow: 0 0 8px rgba(30,198,119,0.4); }
}

.pjs-expense-billed {
  color: #4A9CF5;
  font-weight: 600;
  text-align: right;
}

/* ================================================
   PriceJoule Manufacturing — Dashboard Components
   ================================================ */

/* --- Cost Roll-Up Horizontal Bars --- */
.pjm-cost-chart {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.pjm-bar-row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  animation: pjsRowSlideIn 0.5s ease both;
}

.pjm-bar-row:nth-child(1) { animation-delay: 0.15s; }
.pjm-bar-row:nth-child(2) { animation-delay: 0.3s; }
.pjm-bar-row:nth-child(3) { animation-delay: 0.45s; }
.pjm-bar-row:nth-child(4) { animation-delay: 0.6s; }

.pjm-bar-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.7);
  min-width: 90px;
  font-weight: 500;
}

.pjm-bar-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  animation: pjsDotPulse 2.5s ease-in-out infinite;
}

.pjm-bar-track {
  flex: 1;
  height: 14px;
  background: rgba(255,255,255,0.04);
  border-radius: 7px;
  overflow: hidden;
}

.pjm-bar-fill {
  height: 100%;
  border-radius: 7px;
  animation: pjsBarGrow 1.2s cubic-bezier(0.4, 0, 0.2, 1) both;
  position: relative;
  overflow: hidden;
}

.pjm-bar-row:nth-child(1) .pjm-bar-fill { animation-delay: 0.3s; }
.pjm-bar-row:nth-child(2) .pjm-bar-fill { animation-delay: 0.5s; }
.pjm-bar-row:nth-child(3) .pjm-bar-fill { animation-delay: 0.7s; }
.pjm-bar-row:nth-child(4) .pjm-bar-fill { animation-delay: 0.9s; }

/* Shimmer sweep on bars */
.pjm-bar-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
  animation: pjmBarShimmer 3s ease-in-out infinite;
}

@keyframes pjmBarShimmer {
  0%   { left: -100%; }
  50%  { left: 200%; }
  100% { left: 200%; }
}

.pjm-fill-material { background: linear-gradient(90deg, #2ec4d4, rgba(46,196,212,0.6)); }
.pjm-fill-labor    { background: linear-gradient(90deg, #1ec677, rgba(30,198,119,0.6)); }
.pjm-fill-overhead { background: linear-gradient(90deg, #ffb450, rgba(255,180,80,0.6)); }
.pjm-fill-margin   { background: linear-gradient(90deg, #a878ff, rgba(168,120,255,0.6)); }

.pjm-bar-val {
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(255,255,255,0.8);
  min-width: 55px;
  text-align: right;
  transition: text-shadow 0.3s ease;
}

.pjm-bar-row:hover .pjm-bar-val {
  text-shadow: 0 0 10px rgba(74,156,245,0.5);
  color: #fff;
}

.pjm-cost-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-md);
  margin-top: var(--space-sm);
  background: rgba(46,196,212,0.06);
  border-radius: var(--radius-sm);
  border: 1px solid rgba(46,196,212,0.1);
  font-size: 0.9rem;
  font-weight: 600;
  color: rgba(255,255,255,0.7);
  animation: pjsRowSlideIn 0.5s ease 0.8s both;
}

/* --- Variant Pricing Config --- */
.pjm-variant-config {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.pjm-config-row {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  animation: pjsRowSlideIn 0.5s ease both;
}

.pjm-config-row:nth-child(1) { animation-delay: 0.15s; }
.pjm-config-row:nth-child(2) { animation-delay: 0.3s; }
.pjm-config-row:nth-child(3) { animation-delay: 0.45s; }

.pjm-config-label {
  font-size: 0.88rem;
  font-weight: 600;
  color: rgba(255,255,255,0.7);
  min-width: 60px;
}

.pjm-config-options {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.pjm-opt {
  padding: 6px 16px;
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  font-weight: 500;
  color: rgba(255,255,255,0.45);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  cursor: default;
  transition: all 0.3s ease;
}

.pjm-opt:hover {
  border-color: rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.7);
}

.pjm-opt-active {
  color: #fff !important;
  font-weight: 600;
}

.pjm-opt-active.pjm-opt-blue {
  background: #4A9CF5;
  border-color: #4A9CF5;
  box-shadow: 0 0 12px rgba(74,156,245,0.3);
  animation: pjmOptPulse 2.5s ease-in-out infinite;
}

.pjm-opt-active.pjm-opt-teal {
  background: #2ec4d4;
  border-color: #2ec4d4;
  box-shadow: 0 0 12px rgba(46,196,212,0.3);
  animation: pjmOptPulse 2.5s ease-in-out infinite;
}

@keyframes pjmOptPulse {
  0%, 100% { box-shadow: 0 0 8px rgba(74,156,245,0.2); }
  50%      { box-shadow: 0 0 18px rgba(74,156,245,0.4); }
}

.pjm-variant-price {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  background: rgba(30,198,119,0.06);
  border-radius: var(--radius-sm);
  border: 1px solid rgba(30,198,119,0.12);
  font-size: 0.9rem;
  font-weight: 500;
  color: rgba(255,255,255,0.6);
  animation: pjsRowSlideIn 0.5s ease 0.6s both;
}

.pjm-price-val {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 800;
  color: #1ec677;
  animation: pjsTotalGlow 3s ease-in-out infinite;
}

/* --- Instant Quotes Card --- */
.pjs-dash-card:nth-child(3) .pjs-dash-body {
  display: flex;
  gap: var(--space-lg);
  align-items: center;
}

.pjm-quote-card {
  flex: 1;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-md);
  overflow: hidden;
  animation: pjsRowSlideIn 0.5s ease 0.2s both;
}

.pjm-quote-header {
  background: linear-gradient(135deg, #4A9CF5, #a878ff);
  padding: 8px var(--space-md);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #fff;
  text-align: center;
}

.pjm-quote-lines {
  padding: var(--space-sm);
}

.pjm-quote-line {
  display: flex;
  justify-content: space-between;
  padding: 5px var(--space-sm);
  font-size: 0.82rem;
  color: rgba(255,255,255,0.6);
  border-bottom: 1px solid rgba(255,255,255,0.03);
  animation: pjsRowSlideIn 0.4s ease both;
}

.pjm-quote-line:nth-child(1) { animation-delay: 0.3s; }
.pjm-quote-line:nth-child(2) { animation-delay: 0.4s; }
.pjm-quote-line:nth-child(3) { animation-delay: 0.5s; }
.pjm-quote-line:nth-child(4) { animation-delay: 0.6s; }
.pjm-quote-line:nth-child(5) { animation-delay: 0.7s; }

.pjm-quote-line span:last-child {
  font-weight: 600;
  color: rgba(255,255,255,0.8);
}

.pjm-quote-total-line {
  border-bottom: none;
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.08);
  font-weight: 700;
  color: rgba(255,255,255,0.9);
}

/* Speed Badge */
.pjm-speed-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  animation: pjsGaugeValPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.8s both;
}

.pjm-speed-ring {
  position: relative;
  width: 80px;
  height: 80px;
}

.pjm-speed-ring svg {
  width: 100%;
  height: 100%;
}

.pjm-speed-ring svg circle:nth-child(2) {
  animation: pjmRingDraw 1.5s cubic-bezier(0.4, 0, 0.2, 1) 0.5s both;
}

@keyframes pjmRingDraw {
  from { stroke-dasharray: 0 214; }
  to   { stroke-dasharray: 214 214; }
}

.pjm-speed-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  line-height: 1;
}

.pjm-speed-num {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-weight: 800;
  color: #1ec677;
}

.pjm-speed-unit {
  font-size: 0.65rem;
  color: #1ec677;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.pjm-speed-vs {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.4);
  font-style: italic;
}

/* --- Feature Cards with Bullet Points --- */
.pjm-feature-card {
  background: var(--surface-card);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
  position: relative;
}

.pjm-feature-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #2ec4d4, transparent);
  opacity: 0.25;
  transition: opacity 0.4s ease;
}

.pjm-feature-card:hover {
  transform: translateY(-4px);
  border-color: rgba(46,196,212,0.15);
  box-shadow: 0 12px 40px rgba(0,0,0,0.3), 0 0 30px rgba(46,196,212,0.06);
}

.pjm-feature-card:hover::before {
  opacity: 0.7;
}

.pjm-feature-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-md);
  color: #2ec4d4;
  transition: transform 0.35s ease;
}

.pjm-feature-icon svg {
  width: 28px;
  height: 28px;
}

.pjm-feature-card:hover .pjm-feature-icon {
  transform: scale(1.1);
}

.pjm-feature-card h4 {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 var(--space-sm);
}

.pjm-feature-card p {
  font-size: 0.88rem;
  color: rgba(255,255,255,0.55);
  line-height: 1.6;
  margin: 0 0 var(--space-md);
}

.pjm-feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pjm-feature-list li {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.6);
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: 4px;
}

.pjm-feature-list li::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  border: 1.5px solid #2ec4d4;
  flex-shrink: 0;
  animation: pjsDotPulse 2.5s ease-in-out infinite;
}

.pjm-feature-list li:nth-child(2)::before { animation-delay: -0.6s; }
.pjm-feature-list li:nth-child(3)::before { animation-delay: -1.2s; }

/* ================================================
   PriceJoule High-Tech & SaaS — Dashboard Components
   ================================================ */

/* --- Dashboard Grid --- */
.pjh-dashboard-grid {
  gap: var(--space-xl);
}

/* --- Card Title & Description below each dashboard --- */
.pjh-card-title {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  margin: var(--space-lg) 0 var(--space-xs);
}

.pjh-card-desc {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.5);
  line-height: 1.5;
  margin: 0;
}

/* --- Subscription Tiers --- */
.pjh-tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}

.pjh-tier {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-md);
  padding: var(--space-lg) var(--space-md);
  text-align: center;
  transition: all 0.4s ease;
  position: relative;
  animation: pjhTierSlide 0.6s ease both;
}

.pjh-tier:nth-child(1) { animation-delay: 0.15s; }
.pjh-tier:nth-child(2) { animation-delay: 0.3s; }
.pjh-tier:nth-child(3) { animation-delay: 0.45s; }

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

.pjh-tier:hover {
  transform: translateY(-4px);
  border-color: rgba(168,120,255,0.2);
  box-shadow: 0 8px 30px rgba(0,0,0,0.3);
}

.pjh-tier-featured {
  background: rgba(168,120,255,0.08);
  border-color: rgba(168,120,255,0.25);
  box-shadow: 0 0 20px rgba(168,120,255,0.08);
  animation: pjhTierSlide 0.6s ease 0.3s both, pjhFeaturedGlow 3s ease-in-out infinite 1s;
}

@keyframes pjhFeaturedGlow {
  0%, 100% { box-shadow: 0 0 15px rgba(168,120,255,0.06); }
  50%      { box-shadow: 0 0 30px rgba(168,120,255,0.15); }
}

.pjh-tier-badge {
  display: inline-block;
  background: linear-gradient(135deg, #a878ff, #7c4dff);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 3px 10px;
  border-radius: 20px;
  margin-bottom: var(--space-sm);
  animation: pjhBadgePop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.7s both;
}

@keyframes pjhBadgePop {
  from { opacity: 0; transform: scale(0.6); }
  to   { opacity: 1; transform: scale(1); }
}

.pjh-tier-name {
  font-size: 0.82rem;
  font-weight: 600;
  color: rgba(255,255,255,0.6);
  margin-bottom: var(--space-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.pjh-tier-price {
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 800;
  color: #fff;
  line-height: 1;
}

.pjh-dollar {
  font-size: 1.1rem;
  vertical-align: super;
  color: rgba(255,255,255,0.5);
  font-weight: 600;
}

.pjh-tier-period {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.35);
  margin-bottom: var(--space-sm);
}

.pjh-tier-users {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.45);
  padding-top: var(--space-xs);
  border-top: 1px solid rgba(255,255,255,0.06);
}

/* --- Usage Metering — Donut Chart --- */
.pjh-usage-gauge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  position: relative;
}

.pjh-donut {
  width: 140px;
  height: 140px;
}

.pjh-donut-fill {
  stroke-dasharray: 0 471;
  animation: pjhDonutDraw 2s cubic-bezier(0.4, 0, 0.2, 1) 0.5s forwards;
}

@keyframes pjhDonutDraw {
  from { stroke-dasharray: 0 471; }
  to   { stroke-dasharray: 353 471; }
}

.pjh-gauge-center {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 140px;
  height: 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.pjh-gauge-big {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 800;
  color: #fff;
  animation: pjhValPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 1.5s both;
}

.pjh-gauge-sub {
  font-size: 0.7rem;
  color: rgba(255,255,255,0.45);
  font-weight: 500;
}

@keyframes pjhValPop {
  from { opacity: 0; transform: scale(0.6); }
  to   { opacity: 1; transform: scale(1); }
}

.pjh-usage-labels {
  display: flex;
  gap: var(--space-lg);
  justify-content: center;
}

.pjh-usage-label {
  font-size: 0.72rem;
  font-weight: 600;
  opacity: 0;
  animation: pjhLabelFade 0.4s ease forwards;
}

.pjh-usage-label:nth-child(1) { animation-delay: 1.8s; }
.pjh-usage-label:nth-child(2) { animation-delay: 2s; }
.pjh-usage-label:nth-child(3) { animation-delay: 2.2s; }

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

.pjh-usage-rate {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  background: rgba(255,255,255,0.03);
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  color: rgba(255,255,255,0.5);
  animation: pjsRowSlideIn 0.5s ease 2.4s both;
}

.pjh-rate-val {
  font-weight: 700;
  color: #1ec677;
  font-family: var(--font-heading);
  font-size: 1rem;
}

.pjh-rate-val small {
  font-size: 0.7rem;
  font-weight: 500;
  color: rgba(255,255,255,0.4);
}

/* --- Feature Packages Matrix --- */
.pjh-feature-matrix {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.pjh-matrix-header {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  padding: var(--space-sm) var(--space-md);
  background: rgba(168,120,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.pjh-matrix-header span {
  font-size: 0.72rem;
  font-weight: 700;
  color: rgba(255,255,255,0.5);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.pjh-matrix-header span:first-child {
  text-align: left;
}

.pjh-col-active {
  color: #a878ff !important;
}

.pjh-matrix-row {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  padding: var(--space-xs) var(--space-md);
  border-bottom: 1px solid rgba(255,255,255,0.03);
  font-size: 0.8rem;
  transition: background 0.3s ease;
  opacity: 0;
  animation: pjhRowReveal 0.35s ease forwards;
}

.pjh-matrix-row:nth-child(2) { animation-delay: 0.1s; }
.pjh-matrix-row:nth-child(3) { animation-delay: 0.17s; }
.pjh-matrix-row:nth-child(4) { animation-delay: 0.24s; }
.pjh-matrix-row:nth-child(5) { animation-delay: 0.31s; }
.pjh-matrix-row:nth-child(6) { animation-delay: 0.38s; }
.pjh-matrix-row:nth-child(7) { animation-delay: 0.45s; }
.pjh-matrix-row:nth-child(8) { animation-delay: 0.52s; }

@keyframes pjhRowReveal {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}

.pjh-matrix-row:hover {
  background: rgba(255,255,255,0.02);
}

.pjh-matrix-row:last-child {
  border-bottom: none;
}

.pjh-matrix-row span {
  text-align: center;
  color: rgba(255,255,255,0.5);
}

.pjh-matrix-row span:first-child {
  text-align: left;
  color: rgba(255,255,255,0.7);
  font-weight: 500;
}

.pjh-check {
  color: #1ec677 !important;
  font-weight: 700;
  font-size: 0.95rem;
}

.pjh-dash {
  color: rgba(255,255,255,0.15) !important;
}

/* --- Hybrid Pricing Model --- */
.pjh-hybrid {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.pjh-hybrid-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-md);
  background: rgba(168,120,255,0.06);
  border-radius: var(--radius-sm);
  border: 1px solid rgba(168,120,255,0.1);
  animation: pjsRowSlideIn 0.5s ease 0.2s both;
}

.pjh-hybrid-label {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.6);
  font-weight: 500;
}

.pjh-hybrid-amount {
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-weight: 800;
  color: #fff;
  animation: pjhAmountGlow 3s ease-in-out infinite 1s;
}

@keyframes pjhAmountGlow {
  0%, 100% { text-shadow: none; }
  50%      { text-shadow: 0 0 15px rgba(168,120,255,0.4); }
}

.pjh-hybrid-bar {
  display: flex;
  height: 28px;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255,255,255,0.03);
}

.pjh-hybrid-seg {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 600;
  color: #fff;
  position: relative;
  overflow: hidden;
  animation: pjhBarGrow 1s cubic-bezier(0.4, 0, 0.2, 1) 0.5s both;
  transform-origin: left;
}

@keyframes pjhBarGrow {
  from { max-width: 0; opacity: 0; }
  to   { max-width: 100%; opacity: 1; }
}

.pjh-hybrid-seg::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  animation: pjmBarShimmer 3s ease-in-out infinite 1.5s;
}

.pjh-seg-base {
  background: linear-gradient(90deg, #a878ff, rgba(168,120,255,0.7));
}

.pjh-seg-usage {
  background: linear-gradient(90deg, rgba(74,156,245,0.7), #4A9CF5);
  animation-delay: 0.8s;
}

.pjh-hybrid-seg span {
  position: relative;
  z-index: 1;
  white-space: nowrap;
  text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.pjh-hybrid-components {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  justify-content: center;
}

.pjh-component {
  flex: 1;
  padding: var(--space-md);
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-sm);
  text-align: center;
  transition: all 0.3s ease;
  animation: pjhTierSlide 0.5s ease both;
}

.pjh-comp-base { animation-delay: 0.4s; }
.pjh-comp-usage { animation-delay: 0.6s; }

.pjh-component:hover {
  border-color: rgba(168,120,255,0.15);
  transform: translateY(-2px);
}

.pjh-comp-name {
  display: block;
  font-size: 0.75rem;
  color: rgba(255,255,255,0.5);
  margin-bottom: 4px;
}

.pjh-comp-price {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 800;
  color: #fff;
}

.pjh-comp-unit {
  display: block;
  font-size: 0.7rem;
  color: rgba(255,255,255,0.35);
}

.pjh-comp-plus {
  font-size: 1.3rem;
  font-weight: 700;
  color: rgba(255,255,255,0.2);
  flex-shrink: 0;
  animation: pjhPlusPulse 2.5s ease-in-out infinite;
}

@keyframes pjhPlusPulse {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50%      { opacity: 0.7; transform: scale(1.15); }
}

/* --- Freemium Conversion Funnel --- */
.pjh-funnel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  position: relative;
}

.pjh-funnel-svg {
  width: 100%;
  max-width: 260px;
  height: auto;
}

.pjh-funnel-labels {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pjh-funnel-row {
  display: flex;
  justify-content: space-between;
  padding: 3px var(--space-sm);
  font-size: 0.78rem;
  opacity: 0;
  animation: pjhRowReveal 0.4s ease forwards;
}

.pjh-funnel-row:nth-child(1) { animation-delay: 0.3s; }
.pjh-funnel-row:nth-child(2) { animation-delay: 0.45s; }
.pjh-funnel-row:nth-child(3) { animation-delay: 0.6s; }
.pjh-funnel-row:nth-child(4) { animation-delay: 0.75s; }

.pjh-funnel-row span:first-child {
  font-weight: 600;
}

.pjh-funnel-row span:last-child {
  color: rgba(255,255,255,0.7);
  font-weight: 600;
  font-family: var(--font-heading);
}

.pjh-conversion-badge {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-lg);
  background: rgba(30,198,119,0.06);
  border: 1px solid rgba(30,198,119,0.12);
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  color: rgba(255,255,255,0.5);
  animation: pjsRowSlideIn 0.5s ease 1s both;
}

.pjh-conv-rate {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 800;
  color: #1ec677;
  animation: pjhConvGlow 3s ease-in-out infinite 1.5s;
}

@keyframes pjhConvGlow {
  0%, 100% { text-shadow: none; }
  50%      { text-shadow: 0 0 12px rgba(30,198,119,0.5); }
}

/* --- Proration Engine --- */
.pjh-proration {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.pjh-proration-calc {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  animation: pjsRowSlideIn 0.5s ease 0.2s both;
}

.pjh-calc-header {
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(255,255,255,0.5);
  margin-bottom: var(--space-sm);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.pjh-calc-row {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.6);
  opacity: 0;
  animation: pjhRowReveal 0.4s ease forwards;
}

.pjh-calc-row:nth-child(2) { animation-delay: 0.4s; }
.pjh-calc-row:nth-child(3) { animation-delay: 0.55s; }

.pjh-calc-total {
  display: flex;
  justify-content: space-between;
  padding: var(--space-sm) 0 0;
  margin-top: var(--space-xs);
  border-top: 1px solid rgba(255,255,255,0.08);
  font-weight: 700;
  font-size: 0.9rem;
  color: rgba(255,255,255,0.8);
}

.pjh-due-amount {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 800;
  color: #a878ff;
  animation: pjhAmountGlow 3s ease-in-out infinite;
}

/* Plan Timeline */
.pjh-plan-timeline {
  animation: pjsRowSlideIn 0.5s ease 0.6s both;
}

.pjh-timeline-bar {
  display: flex;
  height: 28px;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255,255,255,0.03);
  margin-bottom: var(--space-sm);
}

.pjh-tl-seg {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 600;
  color: #fff;
  position: relative;
  overflow: hidden;
}

.pjh-tl-basic {
  background: linear-gradient(90deg, rgba(255,255,255,0.08), rgba(255,255,255,0.04));
  color: rgba(255,255,255,0.5);
}

.pjh-tl-pro {
  background: linear-gradient(90deg, rgba(168,120,255,0.5), #a878ff);
  animation: pjhProExpand 1.2s cubic-bezier(0.4, 0, 0.2, 1) 0.8s both;
}

@keyframes pjhProExpand {
  from { max-width: 0; opacity: 0; }
  to   { max-width: 100%; opacity: 1; }
}

.pjh-tl-pro::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  animation: pjmBarShimmer 3s ease-in-out infinite 2s;
}

.pjh-tl-seg span {
  position: relative;
  z-index: 1;
  white-space: nowrap;
}

.pjh-tl-dates {
  display: flex;
  justify-content: space-between;
  font-size: 0.72rem;
  color: rgba(255,255,255,0.35);
}

.pjh-tl-upgrade {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #a878ff;
  font-weight: 600;
}

.pjh-upgrade-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #a878ff;
  box-shadow: 0 0 8px rgba(168,120,255,0.5);
  animation: pjhUpgradePulse 1.5s ease-in-out infinite;
}

@keyframes pjhUpgradePulse {
  0%, 100% { box-shadow: 0 0 6px rgba(168,120,255,0.3); transform: scale(1); }
  50%      { box-shadow: 0 0 16px rgba(168,120,255,0.6); transform: scale(1.3); }
}

/* --- High-Tech Card Accent Lines (color-matched purple theme) --- */
.pjh-card::before {
  background: linear-gradient(90deg, transparent, #a878ff, transparent) !important;
}

.pjh-card:hover::before {
  opacity: 0.8 !important;
}

.pjh-card:hover {
  border-color: rgba(168,120,255,0.15) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.35), 0 0 25px rgba(168,120,255,0.06) !important;
}

/* ================================================
   PriceJoule Distribution — Dashboard Components
   ================================================ */

.pjd-dashboard-grid {
  gap: var(--space-xl);
}

/* --- Distribution Card Accent Lines (teal theme) --- */
.pjd-card::before {
  background: linear-gradient(90deg, transparent, #2ec4d4, transparent) !important;
}

.pjd-card:hover::before {
  opacity: 0.8 !important;
}

.pjd-card:hover {
  border-color: rgba(46,196,212,0.15) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.35), 0 0 25px rgba(46,196,212,0.06) !important;
}

/* --- Channel Hierarchy Tree --- */
.pjd-hierarchy {
  position: relative;
}

.pjd-margin-badge {
  position: absolute;
  top: 0;
  right: 0;
  background: rgba(30,198,119,0.08);
  border: 1px solid rgba(30,198,119,0.15);
  border-radius: var(--radius-sm);
  padding: 4px 12px;
  font-size: 0.75rem;
  color: rgba(255,255,255,0.5);
  animation: pjsRowSlideIn 0.5s ease 0.2s both;
}

.pjd-margin-badge strong {
  color: #1ec677;
  font-weight: 800;
  font-family: var(--font-heading);
  font-size: 0.95rem;
}

.pjd-tree-svg {
  width: 100%;
  height: auto;
  max-height: 260px;
}

/* SVG node animations */
.pjd-node {
  opacity: 0;
  animation: pjdNodeAppear 0.5s ease forwards;
}

.pjd-node-1 { animation-delay: 0.2s; }
.pjd-node-2 { animation-delay: 0.5s; }
.pjd-node-3 { animation-delay: 0.7s; }
.pjd-node-4 { animation-delay: 1s; }

@keyframes pjdNodeAppear {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --- Rebate Programs --- */
.pjd-rebate {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.pjd-rebate-tiers {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.pjd-rebate-row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  animation: pjsRowSlideIn 0.5s ease both;
}

.pjd-rebate-row:nth-child(1) { animation-delay: 0.15s; }
.pjd-rebate-row:nth-child(2) { animation-delay: 0.3s; }
.pjd-rebate-row:nth-child(3) { animation-delay: 0.45s; }
.pjd-rebate-row:nth-child(4) { animation-delay: 0.6s; }

.pjd-rebate-bar {
  height: 30px;
  background: linear-gradient(90deg, rgba(46,196,212,0.2), rgba(46,196,212,0.08));
  border-radius: 6px;
  display: flex;
  align-items: center;
  padding: 0 var(--space-sm);
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(255,255,255,0.6);
  position: relative;
  overflow: hidden;
  animation: pjdBarExpand 0.8s cubic-bezier(0.4, 0, 0.2, 1) both;
  transform-origin: left;
}

.pjd-rebate-row:nth-child(1) .pjd-rebate-bar { animation-delay: 0.3s; }
.pjd-rebate-row:nth-child(2) .pjd-rebate-bar { animation-delay: 0.5s; }
.pjd-rebate-row:nth-child(3) .pjd-rebate-bar { animation-delay: 0.7s; }
.pjd-rebate-row:nth-child(4) .pjd-rebate-bar { animation-delay: 0.9s; }

@keyframes pjdBarExpand {
  from { max-width: 0; opacity: 0; }
  to   { max-width: 100%; opacity: 1; }
}

.pjd-rebate-bar::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
  animation: pjmBarShimmer 3s ease-in-out infinite 1.5s;
}

.pjd-rebate-bar span {
  position: relative;
  z-index: 1;
  white-space: nowrap;
}

.pjd-rebate-current {
  background: linear-gradient(90deg, rgba(46,196,212,0.35), rgba(46,196,212,0.15));
  border: 1px solid rgba(46,196,212,0.25);
}

.pjd-rebate-pct {
  font-size: 0.85rem;
  font-weight: 700;
  color: rgba(255,255,255,0.5);
  min-width: 36px;
  padding: 4px 10px;
  border-radius: 20px;
  background: rgba(255,255,255,0.04);
  text-align: center;
}

.pjd-pct-active {
  color: #1ec677 !important;
  background: rgba(30,198,119,0.12);
  animation: pjdPctPulse 2.5s ease-in-out infinite;
}

@keyframes pjdPctPulse {
  0%, 100% { box-shadow: 0 0 6px rgba(30,198,119,0.1); }
  50%      { box-shadow: 0 0 16px rgba(30,198,119,0.3); }
}

.pjd-rebate-position {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-md);
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-sm);
  animation: pjsRowSlideIn 0.5s ease 1s both;
}

.pjd-rebate-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pjd-rebate-label {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.6);
  font-weight: 500;
}

.pjd-rebate-earning {
  font-size: 0.78rem;
  color: #2ec4d4;
}

.pjd-rebate-earning strong {
  color: #1ec677;
  font-weight: 700;
}

.pjd-rebate-next {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.pjd-next-label {
  font-size: 0.7rem;
  color: rgba(255,255,255,0.4);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.pjd-next-amount {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 800;
  color: #ffb450;
  animation: pjdNextGlow 3s ease-in-out infinite;
}

@keyframes pjdNextGlow {
  0%, 100% { text-shadow: none; }
  50%      { text-shadow: 0 0 12px rgba(255,180,80,0.4); }
}

.pjd-next-sub {
  font-size: 0.7rem;
  color: rgba(255,255,255,0.35);
}

/* --- Special Pricing Agreements --- */
.pjd-spa {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.pjd-spa-row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-sm);
  transition: all 0.3s ease;
  animation: pjsRowSlideIn 0.5s ease both;
}

.pjd-spa-row-1 { animation-delay: 0.2s; }
.pjd-spa-row-2 { animation-delay: 0.35s; }
.pjd-spa-row-3 { animation-delay: 0.5s; }

.pjd-spa-row:hover {
  background: rgba(255,255,255,0.05);
  transform: translateX(4px);
}

.pjd-spa-customer {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.pjd-spa-customer strong {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.85);
}

.pjd-spa-sku {
  font-size: 0.7rem;
  color: rgba(255,255,255,0.35);
}

.pjd-spa-prices {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.pjd-spa-list {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.35);
}

.pjd-spa-list s {
  color: rgba(255,255,255,0.25);
}

.pjd-spa-val {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.6);
}

.pjd-spa-val strong {
  color: #fff;
  font-weight: 700;
  font-family: var(--font-heading);
  font-size: 0.95rem;
}

.pjd-spa-discount {
  font-size: 0.78rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  min-width: 40px;
  text-align: center;
}

.pjd-disc-green {
  color: #1ec677;
  background: rgba(30,198,119,0.1);
}

.pjd-disc-blue {
  color: #4A9CF5;
  background: rgba(74,156,245,0.1);
}

.pjd-disc-orange {
  color: #ffb450;
  background: rgba(255,180,80,0.1);
}

.pjd-spa-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  animation: pjsDotPulse 2.5s ease-in-out infinite;
}

.pjd-dot-green  { background: #1ec677; box-shadow: 0 0 6px rgba(30,198,119,0.4); }
.pjd-dot-blue   { background: #4A9CF5; box-shadow: 0 0 6px rgba(74,156,245,0.4); }
.pjd-dot-orange { background: #ffb450; box-shadow: 0 0 6px rgba(255,180,80,0.4); }

.pjd-spa-row:nth-child(2) .pjd-spa-dot { animation-delay: -0.6s; }
.pjd-spa-row:nth-child(3) .pjd-spa-dot { animation-delay: -1.2s; }

.pjd-spa-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-sm) var(--space-md);
  background: rgba(46,196,212,0.04);
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  color: rgba(255,255,255,0.4);
  animation: pjsRowSlideIn 0.5s ease 0.7s both;
}

.pjd-spa-summary strong {
  color: rgba(255,255,255,0.7);
}

.pjd-spa-highlight {
  color: #2ec4d4 !important;
  font-weight: 600;
}

.pjd-spa-highlight strong {
  color: #2ec4d4 !important;
}

/* --- Price Protection --- */
.pjd-protection {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.pjd-protected-badge {
  text-align: center;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.5);
  padding: 5px 14px;
  background: rgba(30,198,119,0.06);
  border: 1px solid rgba(30,198,119,0.12);
  border-radius: 20px;
  display: inline-block;
  margin: 0 auto;
  animation: pjhBadgePop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s both;
}

.pjd-protected-badge strong {
  color: #1ec677;
  font-weight: 700;
}

.pjd-price-svg {
  width: 100%;
  height: auto;
}

/* Price line draw animation */
.pjd-price-line {
  animation: pjdLineDraw 2s ease 0.5s forwards;
}

@keyframes pjdLineDraw {
  to { stroke-dashoffset: 0; }
}

/* Point appear animations */
.pjd-point {
  opacity: 0;
  animation: pjdPointPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.pjd-point-1 { animation-delay: 0.3s; }
.pjd-point-2 { animation-delay: 1.2s; }
.pjd-point-3 { animation-delay: 1.8s; }

@keyframes pjdPointPop {
  from { opacity: 0; r: 0; }
  to   { opacity: 1; r: 6; }
}

/* Claim Status Bar */
.pjd-claim-status {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: rgba(255,255,255,0.03);
  border-radius: var(--radius-sm);
  animation: pjsRowSlideIn 0.5s ease 2s both;
}

.pjd-claim-label {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.5);
  font-weight: 500;
  white-space: nowrap;
}

.pjd-claim-bar {
  flex: 1;
  height: 8px;
  background: rgba(255,255,255,0.06);
  border-radius: 4px;
  overflow: hidden;
}

.pjd-claim-fill {
  height: 100%;
  background: linear-gradient(90deg, #1ec677, #2ec4d4);
  border-radius: 4px;
  animation: pjsBarGrow 1.5s cubic-bezier(0.4, 0, 0.2, 1) 2.2s both;
  transform-origin: left;
  position: relative;
}

.pjd-claim-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  animation: pjmBarShimmer 3s ease-in-out infinite 3.5s;
}

.pjd-claim-pct {
  font-size: 0.82rem;
  font-weight: 700;
  color: #1ec677;
  white-space: nowrap;
}

.pjd-claim-pct small {
  font-weight: 500;
  color: rgba(255,255,255,0.4);
  font-size: 0.72rem;
}

/* --- Volume Commitments --- */
.pjd-volume {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.pjd-volume-main {
  display: flex;
  gap: var(--space-lg);
  align-items: center;
}

.pjd-volume-chart {
  position: relative;
  width: 120px;
  height: 120px;
  flex-shrink: 0;
}

.pjd-vol-donut {
  width: 100%;
  height: 100%;
}

.pjd-vol-fill {
  stroke-dasharray: 0 377;
  animation: pjdVolDraw 2s cubic-bezier(0.4, 0, 0.2, 1) 0.5s forwards;
}

@keyframes pjdVolDraw {
  from { stroke-dasharray: 0 377; }
  to   { stroke-dasharray: 264 377; }
}

.pjd-vol-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.pjd-vol-pct {
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-weight: 800;
  color: #fff;
  line-height: 1;
  animation: pjhValPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 1.5s both;
}

.pjd-vol-sub {
  font-size: 0.65rem;
  color: rgba(255,255,255,0.4);
}

.pjd-volume-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.pjd-vol-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  animation: pjsRowSlideIn 0.5s ease both;
}

.pjd-vol-row:nth-child(1) { animation-delay: 0.6s; }
.pjd-vol-row:nth-child(3) { animation-delay: 0.8s; }
.pjd-vol-row:nth-child(4) { animation-delay: 1s; }

.pjd-vol-label {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.5);
}

.pjd-vol-val {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.95rem;
}

.pjd-vol-divider {
  height: 1px;
  background: rgba(255,255,255,0.06);
  margin: 2px 0;
}

/* Quarterly bars */
.pjd-quarterly {
  display: flex;
  gap: var(--space-md);
  justify-content: center;
  align-items: flex-end;
  height: 60px;
  padding-top: var(--space-sm);
  border-top: 1px solid rgba(255,255,255,0.04);
}

.pjd-q-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 1;
  height: 100%;
  justify-content: flex-end;
}

.pjd-q-fill {
  width: 100%;
  max-width: 30px;
  border-radius: 4px 4px 0 0;
  animation: pjdQBarGrow 0.8s cubic-bezier(0.4, 0, 0.2, 1) both;
  transform-origin: bottom;
}

.pjd-q-bar:nth-child(1) .pjd-q-fill { animation-delay: 1.2s; }
.pjd-q-bar:nth-child(2) .pjd-q-fill { animation-delay: 1.4s; }
.pjd-q-bar:nth-child(3) .pjd-q-fill { animation-delay: 1.6s; }
.pjd-q-bar:nth-child(4) .pjd-q-fill { animation-delay: 1.8s; }

@keyframes pjdQBarGrow {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}

.pjd-q-filled {
  background: linear-gradient(180deg, #1ec677, rgba(30,198,119,0.5));
}

.pjd-q-partial {
  background: linear-gradient(180deg, #ffb450, rgba(255,180,80,0.5));
}

.pjd-q-empty {
  background: rgba(255,255,255,0.06);
  min-height: 4px;
  border: 1px dashed rgba(255,255,255,0.1);
}

.pjd-q-bar span {
  font-size: 0.68rem;
  color: rgba(255,255,255,0.35);
  font-weight: 500;
}

/* --- Deal Registration Pipeline --- */
.pjd-deal {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.pjd-deal-info {
  display: flex;
  gap: var(--space-md);
}

.pjd-deal-stat {
  flex: 1;
  padding: var(--space-sm) var(--space-md);
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-sm);
  text-align: center;
  animation: pjhTierSlide 0.5s ease both;
}

.pjd-deal-stat:nth-child(1) { animation-delay: 0.2s; }
.pjd-deal-stat:nth-child(2) { animation-delay: 0.35s; }

.pjd-deal-label {
  display: block;
  font-size: 0.7rem;
  color: rgba(255,255,255,0.4);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}

.pjd-deal-val {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 800;
  line-height: 1.2;
}

.pjd-deal-sub {
  display: block;
  font-size: 0.68rem;
  color: rgba(255,255,255,0.35);
}

/* Pipeline bars */
.pjd-pipeline {
  display: flex;
  align-items: flex-end;
  gap: var(--space-xs);
  height: 120px;
  padding-bottom: var(--space-lg);
}

.pjd-pipe-stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  height: 100%;
  justify-content: flex-end;
}

.pjd-pipe-bar {
  width: 100%;
  border-radius: 6px 6px 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  position: relative;
  overflow: hidden;
  animation: pjdQBarGrow 0.8s cubic-bezier(0.4, 0, 0.2, 1) both;
  transform-origin: bottom;
}

.pjd-pipe-stage:nth-child(1) .pjd-pipe-bar { animation-delay: 0.5s; }
.pjd-pipe-stage:nth-child(3) .pjd-pipe-bar { animation-delay: 0.7s; }
.pjd-pipe-stage:nth-child(5) .pjd-pipe-bar { animation-delay: 0.9s; }
.pjd-pipe-stage:nth-child(7) .pjd-pipe-bar { animation-delay: 1.1s; }

.pjd-pipe-bar::after {
  content: '';
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(255,255,255,0.15), transparent);
  animation: pjdPipeShimmer 3s ease-in-out infinite 2s;
}

@keyframes pjdPipeShimmer {
  0%   { top: -100%; }
  50%  { top: 200%; }
  100% { top: 200%; }
}

.pjd-pipe-registered { background: linear-gradient(180deg, #4A9CF5, rgba(74,156,245,0.5)); }
.pjd-pipe-qualified  { background: linear-gradient(180deg, #2ec4d4, rgba(46,196,212,0.5)); }
.pjd-pipe-approved   { background: linear-gradient(180deg, #a878ff, rgba(168,120,255,0.5)); }
.pjd-pipe-won        { background: linear-gradient(180deg, #1ec677, rgba(30,198,119,0.5)); }

.pjd-pipe-num {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 800;
  color: #fff;
  position: relative;
  z-index: 1;
}

.pjd-pipe-amount {
  font-size: 0.65rem;
  font-weight: 600;
  color: rgba(255,255,255,0.7);
  position: relative;
  z-index: 1;
}

.pjd-pipe-label {
  font-size: 0.68rem;
  color: rgba(255,255,255,0.5);
  font-weight: 500;
}

.pjd-pipe-rate {
  font-size: 0.65rem;
  color: rgba(255,255,255,0.3);
}

.pjd-pipe-arrow {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  width: 20px;
  margin-bottom: var(--space-xl);
}

.pjd-pipe-arrow svg {
  width: 20px;
  height: 12px;
}

/* ================================================
   PriceJoule Chemical & Commodity — Dashboard Components
   ================================================ */

.pjc-dashboard-grid {
  gap: var(--space-xl);
}

/* --- Chemical Card Accent Lines (amber/orange theme) --- */
.pjc-card::before {
  background: linear-gradient(90deg, transparent, #ffb450, transparent) !important;
}

.pjc-card:hover::before {
  opacity: 0.8 !important;
}

.pjc-card:hover {
  border-color: rgba(255,180,80,0.15) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.35), 0 0 25px rgba(255,180,80,0.06) !important;
}

/* --- Price Index Feed --- */
.pjc-index-feed {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.pjc-feed-main {
  display: flex;
  gap: var(--space-md);
}

.pjc-index-cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  flex: 1;
}

.pjc-idx-card {
  padding: var(--space-sm) var(--space-md);
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-sm);
  animation: pjsRowSlideIn 0.5s ease both;
}

.pjc-idx-card:nth-child(1) { animation-delay: 0.15s; }
.pjc-idx-card:nth-child(2) { animation-delay: 0.3s; }
.pjc-idx-card:nth-child(3) { animation-delay: 0.45s; }

.pjc-idx-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 2px;
}

.pjc-idx-badge {
  font-size: 0.62rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.04em;
}

.pjc-badge-wti  { background: rgba(255,180,80,0.15); color: #ffb450; }
.pjc-badge-ng   { background: rgba(255,87,87,0.15); color: #ff5757; }
.pjc-badge-eth  { background: rgba(46,196,212,0.15); color: #2ec4d4; }

.pjc-idx-name {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.45);
}

.pjc-idx-price {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.1;
}

.pjc-idx-meta {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.pjc-idx-unit {
  font-size: 0.7rem;
  color: rgba(255,255,255,0.35);
}

.pjc-idx-change {
  font-size: 0.75rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 4px;
}

.pjc-change-up   { color: #1ec677; }
.pjc-change-down { color: #ff5757; }

.pjc-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #1ec677;
  display: inline-block;
  animation: pjcLivePulse 1.5s ease-in-out infinite;
}

@keyframes pjcLivePulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 4px rgba(30,198,119,0.4); }
  50%      { opacity: 0.4; box-shadow: 0 0 8px rgba(30,198,119,0.6); }
}

/* Mini chart */
.pjc-mini-chart {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 100px;
}

.pjc-chart-label {
  font-size: 0.68rem;
  color: rgba(255,255,255,0.35);
  text-align: center;
}

.pjc-trend-svg {
  width: 100%;
  height: auto;
}

.pjc-trend-line {
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  animation: pjcTrendDraw 2s ease 0.6s forwards;
}

@keyframes pjcTrendDraw {
  to { stroke-dashoffset: 0; }
}

.pjc-trend-dot {
  opacity: 0;
  animation: pjdPointPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 2.5s forwards;
}

.pjc-live-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 0.7rem;
  font-weight: 700;
  color: #1ec677;
}

.pjc-live-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #1ec677;
  animation: pjcLivePulse 1.5s ease-in-out infinite;
}

/* --- Formula Pricing --- */
.pjc-formula {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.pjc-formula-bar {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: rgba(46,196,212,0.06);
  border: 1px solid rgba(46,196,212,0.12);
  border-radius: var(--radius-sm);
  animation: pjsRowSlideIn 0.5s ease 0.2s both;
}

.pjc-formula-label {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.5);
  white-space: nowrap;
}

.pjc-formula-expr {
  font-size: 0.82rem;
  font-weight: 600;
  color: rgba(255,255,255,0.8);
  font-family: var(--font-heading);
}

.pjc-formula-rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.pjc-formula-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xs) var(--space-sm);
  border-bottom: 1px solid rgba(255,255,255,0.03);
  font-size: 0.82rem;
  animation: pjsRowSlideIn 0.5s ease both;
}

.pjc-formula-row:nth-child(1) { animation-delay: 0.35s; }
.pjc-formula-row:nth-child(2) { animation-delay: 0.5s; }
.pjc-formula-row:nth-child(3) { animation-delay: 0.65s; }
.pjc-formula-row:nth-child(4) { animation-delay: 0.8s; }

.pjc-f-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  animation: pjsDotPulse 2.5s ease-in-out infinite;
}

.pjc-formula-row:nth-child(2) .pjc-f-dot { animation-delay: -0.5s; }
.pjc-formula-row:nth-child(3) .pjc-f-dot { animation-delay: -1s; }
.pjc-formula-row:nth-child(4) .pjc-f-dot { animation-delay: -1.5s; }

.pjc-f-name {
  flex: 1;
  color: rgba(255,255,255,0.6);
  font-weight: 500;
}

.pjc-f-val {
  color: rgba(255,255,255,0.7);
  font-weight: 600;
  min-width: 50px;
  text-align: right;
}

.pjc-f-mult {
  color: rgba(255,255,255,0.3);
  font-size: 0.75rem;
  min-width: 24px;
  text-align: center;
}

.pjc-f-result {
  color: #fff;
  font-weight: 700;
  font-family: var(--font-heading);
  min-width: 55px;
  text-align: right;
}

.pjc-formula-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-sm) var(--space-md);
  border-top: 1px solid rgba(255,255,255,0.08);
  font-size: 0.9rem;
  color: rgba(255,255,255,0.6);
  animation: pjsRowSlideIn 0.5s ease 1s both;
}

.pjc-total-val {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  font-weight: 800;
  color: #1ec677;
  animation: pjhConvGlow 3s ease-in-out infinite 1.5s;
}

/* --- Contract Management --- */
.pjc-contract {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.pjc-quarter-timeline {
  display: flex;
  gap: var(--space-sm);
  align-items: flex-start;
}

.pjc-qt-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  animation: pjhTierSlide 0.5s ease both;
}

.pjc-qt-item:nth-child(1) { animation-delay: 0.2s; }
.pjc-qt-item:nth-child(2) { animation-delay: 0.4s; }
.pjc-qt-item:nth-child(3) { animation-delay: 0.6s; }
.pjc-qt-item:nth-child(4) { animation-delay: 0.8s; }

.pjc-qt-box {
  padding: var(--space-sm) var(--space-xs);
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-sm);
  text-align: center;
  width: 100%;
  transition: all 0.3s ease;
}

.pjc-qt-box:hover {
  transform: translateY(-2px);
  border-color: rgba(255,255,255,0.15);
}

.pjc-qt-price {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 800;
  color: #fff;
}

.pjc-qt-label {
  display: block;
  font-size: 0.65rem;
  color: rgba(255,255,255,0.35);
}

.pjc-qt-change {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
}

.pjc-qt-change-up {
  color: #1ec677;
}

.pjc-qt-current {
  border-color: rgba(255,180,80,0.3);
  background: rgba(255,180,80,0.06);
  box-shadow: 0 0 12px rgba(255,180,80,0.08);
}

.pjc-qt-tbd {
  border-style: dashed;
  border-color: rgba(255,255,255,0.12);
}

.pjc-qt-tbd .pjc-qt-price {
  color: rgba(255,255,255,0.4);
  font-size: 0.85rem;
}

.pjc-qt-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #1ec677;
}

.pjc-qt-dot-active {
  background: #ffb450;
  box-shadow: 0 0 8px rgba(255,180,80,0.5);
  animation: pjhUpgradePulse 1.5s ease-in-out infinite;
}

.pjc-qt-dot-pending {
  background: rgba(255,255,255,0.15);
  border: 1px dashed rgba(255,255,255,0.2);
  animation: pjcPendingSpin 4s linear infinite;
}

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

.pjc-qt-period {
  font-size: 0.68rem;
  color: rgba(255,255,255,0.35);
}

/* Contract info bar */
.pjc-contract-info {
  display: flex;
  gap: var(--space-sm);
  animation: pjsRowSlideIn 0.5s ease 1s both;
}

.pjc-ci-item {
  flex: 1;
  padding: var(--space-xs) var(--space-sm);
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-sm);
  text-align: center;
}

.pjc-ci-label {
  display: block;
  font-size: 0.65rem;
  color: rgba(255,255,255,0.35);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 2px;
}

.pjc-ci-val {
  display: block;
  font-size: 0.75rem;
  color: rgba(255,255,255,0.7);
  font-weight: 600;
}

.pjc-ci-status {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  color: #1ec677;
  background: rgba(30,198,119,0.1);
  padding: 2px 10px;
  border-radius: 12px;
}

/* --- Spot vs Contract Chart --- */
.pjc-spot {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.pjc-spot-svg {
  width: 100%;
  height: auto;
}

.pjc-spot-line {
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
  animation: pjcTrendDraw 2.5s ease 0.3s forwards;
}

.pjc-contract-line {
  stroke-dasharray: 6 4;
  opacity: 0;
  animation: pjcLineAppear 0.8s ease 0.5s forwards;
}

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

.pjc-spot-stats {
  display: flex;
  gap: var(--space-md);
  justify-content: center;
}

.pjc-spot-stat {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  background: rgba(255,255,255,0.03);
  border-radius: var(--radius-sm);
  animation: pjhTierSlide 0.5s ease both;
}

.pjc-spot-stat:nth-child(1) { animation-delay: 0.6s; }
.pjc-spot-stat:nth-child(2) { animation-delay: 0.75s; }
.pjc-spot-stat:nth-child(3) { animation-delay: 0.9s; }

.pjc-spot-label {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.4);
}

.pjc-spot-val {
  font-family: var(--font-heading);
  font-size: 0.88rem;
  font-weight: 700;
  color: #fff;
}

.pjc-savings {
  color: #1ec677 !important;
  animation: pjhConvGlow 3s ease-in-out infinite;
}

/* --- Surcharge Management --- */
.pjc-surcharge {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.pjc-surcharge-main {
  display: flex;
  gap: var(--space-md);
}

.pjc-surcharge-items {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.pjc-sc-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm);
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-sm);
  animation: pjsRowSlideIn 0.5s ease both;
}

.pjc-sc-item:nth-child(1) { animation-delay: 0.2s; }
.pjc-sc-item:nth-child(2) { animation-delay: 0.35s; }
.pjc-sc-item:nth-child(3) { animation-delay: 0.5s; }

.pjc-sc-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  animation: pjsDotPulse 2.5s ease-in-out infinite;
}

.pjc-sc-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.pjc-sc-info strong {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.8);
}

.pjc-sc-info span {
  font-size: 0.68rem;
  color: rgba(255,255,255,0.35);
}

.pjc-sc-pct {
  font-size: 0.82rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 4px;
  min-width: 50px;
  text-align: center;
}

.pjc-sc-up      { color: #1ec677; background: rgba(30,198,119,0.1); }
.pjc-sc-neutral { color: rgba(255,255,255,0.5); background: rgba(255,255,255,0.04); }

/* Current indices */
.pjc-current-indices {
  min-width: 90px;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  animation: pjsRowSlideIn 0.5s ease 0.7s both;
}

.pjc-ci-head {
  font-size: 0.7rem;
  color: rgba(255,255,255,0.4);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.pjc-index-row {
  display: flex;
  align-items: center;
  gap: 4px;
}

.pjc-ir-label {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.4);
  min-width: 45px;
}

.pjc-ir-val {
  font-family: var(--font-heading);
  font-size: 0.88rem;
  font-weight: 700;
}

.pjc-ir-arrow {
  font-size: 0.6rem;
}

.pjc-arrow-up { color: #ff5757; }

/* Final price bar */
.pjc-final-price {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  color: rgba(255,255,255,0.5);
  animation: pjsRowSlideIn 0.5s ease 0.9s both;
}

.pjc-final-badge {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  position: relative;
}

.pjc-auto-tag {
  font-size: 0.6rem;
  font-weight: 700;
  color: #1ec677;
  background: rgba(30,198,119,0.1);
  padding: 1px 6px;
  border-radius: 8px;
  letter-spacing: 0.04em;
}

.pjc-final-label {
  font-size: 0.68rem;
  color: rgba(255,255,255,0.4);
}

.pjc-final-val {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 800;
  color: #ffb450;
  animation: pjdNextGlow 3s ease-in-out infinite;
}

/* --- Regional Pricing --- */
.pjc-regional {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.pjc-region-map {
  position: relative;
  min-height: 130px;
}

.pjc-region-svg {
  width: 100%;
  height: auto;
  position: absolute;
  top: 0;
  left: 0;
}

.pjc-region-cards {
  position: relative;
  display: flex;
  justify-content: space-between;
  padding-top: 40px;
  gap: var(--space-sm);
}

.pjc-region-card {
  flex: 1;
  text-align: center;
  padding: var(--space-sm);
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-sm);
  animation: pjhTierSlide 0.5s ease both;
}

.pjc-rc-americas { animation-delay: 0.3s; border-color: rgba(74,156,245,0.2); }
.pjc-rc-emea     { animation-delay: 0.5s; border-color: rgba(168,120,255,0.2); }
.pjc-rc-apac     { animation-delay: 0.7s; border-color: rgba(30,198,119,0.2); }

.pjc-region-card strong {
  display: block;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.7);
  margin-bottom: 2px;
}

.pjc-rc-price {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 800;
}

.pjc-rc-sub {
  display: block;
  font-size: 0.65rem;
  color: rgba(255,255,255,0.3);
}

/* Currency bar */
.pjc-currency-bar {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-sm);
  animation: pjsRowSlideIn 0.5s ease 1s both;
}

.pjc-cur-label {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.4);
  white-space: nowrap;
}

.pjc-cur-rates {
  display: flex;
  gap: var(--space-md);
  flex: 1;
  font-size: 0.75rem;
  color: rgba(255,255,255,0.55);
}

.pjc-cur-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  animation: pjcPendingSpin 6s linear infinite;
}

/* --- PJS Responsive --- */
@media (max-width: 1024px) {
  .pjs-dashboard-grid,
  .pjm-dashboard-grid,
  .pjh-dashboard-grid,
  .pjd-dashboard-grid,
  .pjc-dashboard-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .pjs-rate-header,
  .pjs-rate-row {
    grid-template-columns: 1fr 0.5fr 0.7fr 0.7fr;
    font-size: 0.75rem;
    padding: var(--space-xs) var(--space-sm);
  }

  .pjs-expense-row {
    grid-template-columns: 1fr 0.6fr 0.4fr 0.6fr;
    font-size: 0.75rem;
    padding: var(--space-xs) var(--space-sm);
  }

  .pjs-retainer-gauge {
    flex-direction: column;
    gap: var(--space-lg);
  }

  .pjs-util-bars {
    height: 120px;
    gap: var(--space-sm);
  }

  .pjs-util-name {
    font-size: 0.62rem;
  }

  .pjs-dash-header {
    padding: var(--space-md) var(--space-md) 0;
  }

  .pjs-dash-body {
    padding: var(--space-md);
  }

  /* Manufacturing mobile */
  .pjm-bar-label {
    min-width: 70px;
    font-size: 0.75rem;
  }

  .pjm-config-row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-sm);
  }

  .pjm-config-label {
    min-width: auto;
  }

  .pjs-dash-card:nth-child(3) .pjs-dash-body {
    flex-direction: column;
  }

  .pjm-speed-badge {
    flex-direction: row;
    gap: var(--space-md);
  }

  .pjm-speed-ring {
    width: 60px;
    height: 60px;
  }

  .pjm-feature-card {
    padding: var(--space-lg);
  }

  /* High-Tech mobile */
  .pjh-tiers {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
  }

  .pjh-tier {
    padding: var(--space-md);
  }

  .pjh-tier-price {
    font-size: 1.5rem;
  }

  .pjh-donut {
    width: 110px;
    height: 110px;
  }

  .pjh-gauge-center {
    width: 110px;
    height: 110px;
  }

  .pjh-gauge-big {
    font-size: 1.2rem;
  }

  .pjh-usage-labels {
    gap: var(--space-md);
  }

  .pjh-matrix-header,
  .pjh-matrix-row {
    grid-template-columns: 1.2fr repeat(3, 0.8fr);
    font-size: 0.72rem;
    padding: var(--space-xs) var(--space-sm);
  }

  .pjh-hybrid-components {
    flex-direction: column;
    gap: var(--space-sm);
  }

  .pjh-comp-plus {
    display: none;
  }

  .pjh-hybrid-amount {
    font-size: 1.3rem;
  }

  .pjh-hybrid-seg {
    font-size: 0.65rem;
  }

  .pjh-funnel-svg {
    max-width: 200px;
  }

  .pjh-tl-seg {
    font-size: 0.65rem;
  }

  /* Distribution mobile */
  .pjd-volume-main {
    flex-direction: column;
    gap: var(--space-md);
  }

  .pjd-volume-chart {
    width: 100px;
    height: 100px;
  }

  .pjd-vol-pct {
    font-size: 1.3rem;
  }

  .pjd-spa-row {
    flex-wrap: wrap;
    gap: var(--space-sm);
  }

  .pjd-spa-summary {
    flex-direction: column;
    gap: var(--space-xs);
    text-align: center;
  }

  .pjd-pipeline {
    height: 100px;
  }

  .pjd-pipe-arrow {
    display: none;
  }

  .pjd-pipe-num {
    font-size: 0.9rem;
  }

  .pjd-deal-info {
    flex-direction: column;
  }

  .pjd-rebate-position {
    flex-direction: column;
    gap: var(--space-sm);
    text-align: center;
  }

  .pjd-rebate-next {
    align-items: center;
  }

  .pjd-claim-status {
    flex-wrap: wrap;
    gap: var(--space-sm);
  }

  /* Chemical mobile */
  .pjc-feed-main {
    flex-direction: column;
  }

  .pjc-idx-price {
    font-size: 1.1rem;
  }

  .pjc-formula-row {
    flex-wrap: wrap;
    gap: 4px;
  }

  .pjc-f-name {
    min-width: 100%;
  }

  .pjc-quarter-timeline {
    flex-wrap: wrap;
  }

  .pjc-qt-item {
    min-width: 45%;
  }

  .pjc-qt-price {
    font-size: 0.82rem;
  }

  .pjc-contract-info {
    flex-direction: column;
  }

  .pjc-spot-stats {
    flex-wrap: wrap;
    gap: var(--space-sm);
  }

  .pjc-surcharge-main {
    flex-direction: column;
  }

  .pjc-region-cards {
    flex-direction: column;
    gap: var(--space-sm);
  }

  .pjc-region-svg {
    display: none;
  }

  .pjc-region-map {
    min-height: auto;
  }

  .pjc-region-cards {
    padding-top: 0;
  }

  .pjc-currency-bar {
    flex-wrap: wrap;
    gap: var(--space-sm);
  }

  .pjc-cur-rates {
    flex-wrap: wrap;
    gap: var(--space-sm);
  }

  .pjc-final-price {
    flex-wrap: wrap;
    gap: var(--space-sm);
    justify-content: center;
    text-align: center;
  }
}