/* =========================================================
      CAREERS PAGE (SCOPED) — same look/feel as your inner pages
    ========================================================= */
    .careers-page { font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }

    .careers-hero{
      background: linear-gradient(135deg, #0b1533 0%, #050b1d 100%);
      color:#fff;
      padding: 120px 0 80px;
      position: relative;
      overflow:hidden;
    }
    .careers-hero::before{
      content:"";
      position:absolute; inset:0;
      background:
        radial-gradient(circle at 20% 80%, rgba(30, 75, 184, 0.18) 0%, transparent 55%),
        radial-gradient(circle at 80% 20%, rgba(229, 57, 53, 0.12) 0%, transparent 55%);
      z-index:1;
    }
    .careers-hero .container{ position:relative; z-index:2; }
    .careers-hero h1{
      font-size: 3.2rem;
      font-weight: 800;
      line-height: 1.1;
      margin: 0 0 14px;
      background: linear-gradient(135deg, #fff 0%, #a7f3d0 100%);
      -webkit-background-clip:text;
      -webkit-text-fill-color:transparent;
      background-clip:text;
      letter-spacing:-.02em;
    }
    .careers-hero .subtitle{
      font-size: 1.15rem;
      color: rgba(255,255,255,.85);
      max-width: 760px;
      line-height: 1.7;
      margin-bottom: 26px;
    }
    .careers-badges{
      display:flex;
      flex-wrap:wrap;
      gap: 14px;
      margin: 18px 0 28px;
    }
    .careers-badge{
      display:flex; align-items:center; gap:10px;
      padding: 12px 16px;
      border-radius: 12px;
      background: rgba(255,255,255,.10);
      border: 1px solid rgba(255,255,255,.16);
      backdrop-filter: blur(10px);
      transition: .25s ease;
    }
    .careers-badge i{ color:#a7f3d0; }
    .careers-badge:hover{
      transform: translateY(-2px);
      background: rgba(30,75,184,.18);
      border-color: rgba(30,75,184,.4);
    }
    .careers-cta-row{
      display:flex; flex-wrap:wrap; gap:12px;
      margin-top: 6px;
    }
    .careers-btn{
      display:inline-flex; align-items:center; gap:10px;
      padding: 12px 18px;
      border-radius: 10px;
      text-decoration:none;
      font-weight: 700;
      transition: .25s ease;
      border: 1px solid transparent;
    }
    .careers-btn.primary{
      background: linear-gradient(135deg, #17479e 0%, #e11b22 100%);
      color:#fff;
      box-shadow: 0 10px 30px rgba(23,71,158,.30);
    }
    .careers-btn.primary:hover{
      transform: translateY(-2px);
      box-shadow: 0 16px 40px rgba(23,71,158,.40);
    }
    .careers-btn.ghost{
      background: transparent;
      color:#fff;
      border-color: rgba(255,255,255,.28);
    }
    .careers-btn.ghost:hover{
      background: rgba(255,255,255,.08);
      border-color: rgba(255,255,255,.45);
      transform: translateY(-2px);
    }

    /* Section base */
    .careers-section{ padding: 30px 0; }
    .careers-section.alt{ background: #f8fafc; }
    .careers-title{
      font-size: 2.3rem;
      font-weight: 800;
      color: #0f172a;
      letter-spacing:-.02em;
      margin-bottom: 10px;
      text-align:center;
    }
    .careers-subtitle{
      text-align:center;
      max-width: 880px;
      margin: 0 auto 34px;
      color: #475569;
      font-size: 1.05rem;
      line-height: 1.7;
    }

    /* Culture cards */
    .culture-grid{
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 18px;
      margin-top: 30px;
    }
    .culture-card{
      background:#fff;
      border: 1px solid #e2e8f0;
      border-radius: 18px;
      padding: 22px;
      box-shadow: 0 10px 28px rgba(2,6,23,.06);
      transition: .25s ease;
      height: 100%;
    }
    .culture-card:hover{
      transform: translateY(-6px);
      box-shadow: 0 20px 50px rgba(2,6,23,.10);
      border-color: rgba(23,71,158,.35);
    }
    .culture-icon{
      width: 54px; height: 54px;
      display:grid; place-items:center;
      border-radius: 16px;
      color:#fff;
      background: linear-gradient(135deg, #17479e 0%, #e11b22 100%);
      box-shadow: 0 14px 30px rgba(23,71,158,.25);
      margin-bottom: 12px;
      font-size: 20px;
    }
    .culture-card h3{
      font-size: 1.15rem;
      font-weight: 800;
      color:#0f172a;
      margin: 0 0 8px;
    }
    .culture-card p{ color:#64748b; margin:0; line-height:1.6; }

    /* Benefits */
    .benefits-wrap{
      margin-top: 26px;
      display:grid;
      grid-template-columns: 1.1fr .9fr;
      gap: 20px;
      align-items: stretch;
    }
    .benefits-card{
      background:#fff;
      border: 1px solid #e2e8f0;
      border-radius: 18px;
      padding: 24px;
      box-shadow: 0 10px 28px rgba(2,6,23,.06);
    }
    .benefits-list{
      display:grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 12px 14px;
      margin-top: 10px;
    }
    .benefit{
      display:flex; gap: 10px; align-items:flex-start;
      color:#475569;
      line-height:1.5;
      font-weight: 500;
    }
    .benefit i{
      margin-top: 3px;
      color:#17479e;
      background: rgba(23,71,158,.12);
      width: 22px; height: 22px;
      display:grid; place-items:center;
      border-radius: 999px;
      font-size: 12px;
      flex: 0 0 auto;
    }
    .benefits-side{
      background: linear-gradient(135deg, #0b1533 0%, #050b1d 100%);
      border-radius: 18px;
      padding: 24px;
      color:#fff;
      position:relative;
      overflow:hidden;
      box-shadow: 0 16px 50px rgba(2,6,23,.18);
    }
    .benefits-side::before{
      content:"";
      position:absolute; inset:0;
      background:
        radial-gradient(circle at 30% 70%, rgba(30, 75, 184, 0.24) 0%, transparent 50%),
        radial-gradient(circle at 80% 25%, rgba(229, 57, 53, 0.16) 0%, transparent 55%);
      opacity:.9;
    }
    .benefits-side > *{ position:relative; z-index:1; }
    .benefits-side h3{
      font-weight: 800;
      margin:0 0 8px;
      letter-spacing:-.02em;
    }
    .benefits-side p{ color: rgba(255,255,255,.85); margin:0 0 14px; line-height:1.6; }
    .side-pill{
      display:inline-flex; align-items:center; gap:8px;
      padding: 8px 12px;
      border-radius: 999px;
      background: rgba(255,255,255,.10);
      border: 1px solid rgba(255,255,255,.16);
      font-weight: 700;
      margin-top: 6px;
    }

    /* Open roles */
    .roles-top{
      display:flex;
      flex-wrap:wrap;
      align-items:end;
      justify-content:space-between;
      gap: 12px;
      margin-bottom: 16px;
    }
    .roles-filters{
      display:flex;
      gap: 10px;
      flex-wrap:wrap;
      align-items:center;
    }
    .role-search{
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 12px 14px;
      min-width: 280px;
      outline:none;
      transition:.2s ease;
    }
    .role-search:focus{ border-color: rgba(23,71,158,.5); box-shadow: 0 0 0 4px rgba(23,71,158,.10); }
    .role-select{
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 12px 14px;
      outline:none;
      background:#fff;
      transition:.2s ease;
    }
    .role-select:focus{ border-color: rgba(23,71,158,.5); box-shadow: 0 0 0 4px rgba(23,71,158,.10); }

    .roles-grid{
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 18px;
      margin-top: 18px;
    }
    .role-card{
      background:#fff;
      border:1px solid #e2e8f0;
      border-radius: 18px;
      padding: 20px;
      box-shadow: 0 10px 28px rgba(2,6,23,.06);
      transition:.25s ease;
      display:flex;
      flex-direction:column;
      gap: 12px;
      height:100%;
    }
    .role-card:hover{
      transform: translateY(-6px);
      box-shadow: 0 20px 55px rgba(2,6,23,.10);
      border-color: rgba(23,71,158,.35);
    }
    .role-meta{
      display:flex; flex-wrap:wrap;
      gap: 8px;
    }
    .chip{
      font-size: 12px;
      font-weight: 800;
      color:#17479e;
      background: rgba(23,71,158,.10);
      border: 1px solid rgba(23,71,158,.18);
      padding: 6px 10px;
      border-radius: 999px;
    }
    .role-card h3{
      font-size: 1.08rem;
      font-weight: 900;
      margin:0;
      color:#0f172a;
      letter-spacing:-.01em;
    }
    .role-card p{ color:#64748b; margin:0; line-height:1.6; }
    .role-apply{
      margin-top:auto;
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap: 10px;
    }
    .role-link{
      display:inline-flex; align-items:center; gap:10px;
      text-decoration:none;
      font-weight: 900;
      color:#0f172a;
      transition:.2s ease;
    }
    .role-link:hover{ color:#17479e; }
    .role-link i{ color:#17479e; }
    .role-mail{
      font-size: 12px;
      color:#64748b;
    }

    /* Process */
    .process-grid{
      display:grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
      margin-top: 26px;
    }
    .process-step{
      background:#fff;
      border: 1px solid #e2e8f0;
      border-radius: 18px;
      padding: 18px;
      box-shadow: 0 10px 28px rgba(2,6,23,.06);
      transition: .25s ease;
      height:100%;
    }
    .process-step:hover{
      transform: translateY(-6px);
      border-color: rgba(225,27,34,.25);
      box-shadow: 0 20px 50px rgba(2,6,23,.10);
    }
    .process-n{
      width: 34px; height: 34px;
      border-radius: 12px;
      display:grid; place-items:center;
      background: linear-gradient(135deg, #17479e 0%, #e11b22 100%);
      color:#fff; font-weight: 900;
      margin-bottom: 10px;
    }
    .process-step h4{
      font-weight: 900;
      color:#0f172a;
      margin: 0 0 6px;
      font-size: 1rem;
    }
    .process-step p{ margin:0; color:#64748b; line-height:1.6; font-size:.92rem; }

    /* Final CTA */
    .careers-final{
      padding: 40px 0;
      background: linear-gradient(135deg, #0b1533 0%, #050b1d 100%);
      color:#fff;
      text-align:center;
      position:relative;
      overflow:hidden;
    }
    .careers-final::before{
      content:"";
      position:absolute; inset:0;
      background:
        radial-gradient(circle at 25% 70%, rgba(30, 75, 184, 0.18) 0%, transparent 55%),
        radial-gradient(circle at 80% 30%, rgba(229, 57, 53, 0.14) 0%, transparent 60%);
    }
    .careers-final .container{ position:relative; z-index:1; }
    .careers-final h2{
      font-size: 2.4rem;
      font-weight: 900;
      margin:0 0 10px;
      letter-spacing:-.02em;
      color:#fff;
    }
    .careers-final p{
      max-width: 740px;
      margin:0 auto 18px;
      color: rgba(255,255,255,.85);
      line-height:1.7;
      font-size: 1.05rem;
    }

    /* Responsive */
    @media(max-width: 992px){
      .culture-grid{ grid-template-columns: 1fr; }
      .benefits-wrap{ grid-template-columns: 1fr; }
      .roles-grid{ grid-template-columns: 1fr; }
      .process-grid{ grid-template-columns: 1fr 1fr; }
      .careers-hero h1{ font-size: 2.4rem; }
    }
    @media(max-width: 600px){
      .process-grid{ grid-template-columns: 1fr; }
      .role-search{ min-width: 100%; width: 100%; }
    }


    /* Main Section - Dark Cyber Theme */
.careers-hero-3d {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, #0a0e17 0%, #1a1f2e 50%, #0a0e17 100%);
  overflow: hidden;
  perspective: 1000px;
}

/* 3D Background Layers */
.careers-hero-3d .bg-3d-container {
  position: absolute;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}

.careers-hero-3d .layer {
  position: absolute;
  width: 100%;
  height: 100%;
  background: 
    radial-gradient(circle at 20% 80%, rgba(0, 212, 255, 0.05) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(255, 0, 128, 0.05) 0%, transparent 50%);
  transform: translateZ(var(--depth, 0));
  animation: layersShift 20s infinite linear;
}

.careers-hero-3d .layer-1 {
  --depth: -500px;
  opacity: 0.1;
}

.careers-hero-3d .layer-2 {
  --depth: -300px;
  opacity: 0.2;
  background: 
    linear-gradient(45deg, transparent 30%, rgba(0, 212, 255, 0.03) 50%, transparent 70%);
}

.careers-hero-3d .layer-3 {
  --depth: -100px;
  opacity: 0.3;
  background: 
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(255, 0, 128, 0.02) 2px,
      rgba(255, 0, 128, 0.02) 4px
    );
}

.careers-hero-3d .layer-4 {
  --depth: 0px;
  opacity: 0.4;
  background: 
    radial-gradient(circle at center, rgba(0, 212, 255, 0.1) 0%, transparent 70%);
}

/* Glassmorphism Grid */
.careers-hero-3d .glass-grid {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.careers-hero-3d .grid-line {
  position: absolute;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(0, 212, 255, 0.1),
    transparent
  );
}

.careers-hero-3d .grid-line.horizontal {
  width: 100%;
  height: 1px;
  left: 0;
  animation: gridScan 3s infinite linear;
}

.careers-hero-3d .grid-line.horizontal:nth-child(1) {
  top: 25%;
  animation-delay: 0s;
}

.careers-hero-3d .grid-line.horizontal:nth-child(2) {
  top: 50%;
  animation-delay: -1s;
}

.careers-hero-3d .grid-line.horizontal:nth-child(3) {
  top: 75%;
  animation-delay: -2s;
}

.careers-hero-3d .grid-line.vertical {
  height: 100%;
  width: 1px;
  top: 0;
  animation: gridScanVertical 4s infinite linear;
}

.careers-hero-3d .grid-line.vertical:nth-child(4) {
  left: 25%;
  animation-delay: 0s;
}

.careers-hero-3d .grid-line.vertical:nth-child(5) {
  left: 50%;
  animation-delay: -1s;
}

.careers-hero-3d .grid-line.vertical:nth-child(6) {
  left: 75%;
  animation-delay: -2s;
}

/* Orbital System */
.careers-hero-3d .orbital-system {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 600px;
}

.careers-hero-3d .center-orb {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
}

.careers-hero-3d .orb-core {
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 30% 30%, #00d4ff, #0088ff);
  border-radius: 50%;
  filter: blur(2px);
  animation: orbPulse 4s infinite ease-in-out;
}

.careers-hero-3d .orb-glow {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(0, 212, 255, 0.2) 0%, transparent 70%);
  border-radius: 50%;
  animation: orbGlow 3s infinite alternate;
}

.careers-hero-3d .orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(0, 212, 255, 0.1);
  border-radius: 50%;
}

.careers-hero-3d .orbit-1 {
  width: 400px;
  height: 400px;
  animation: orbitSpin 20s infinite linear;
}

.careers-hero-3d .orbit-2 {
  width: 300px;
  height: 300px;
  animation: orbitSpin 15s infinite linear reverse;
}

.careers-hero-3d .orbit-3 {
  width: 500px;
  height: 500px;
  animation: orbitSpin 25s infinite linear;
}

.careers-hero-3d .satellite {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 60px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(5px);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #00d4ff;
  font-size: 1.5rem;
  border: 1px solid rgba(0, 212, 255, 0.3);
  transition: all 0.3s ease;
}

.careers-hero-3d .satellite:hover {
  background: rgba(0, 212, 255, 0.2);
  transform: translateX(-50%) scale(1.2);
  box-shadow: 0 0 30px rgba(0, 212, 255, 0.4);
}

/* Content Container */
.careers-hero-3d .container-3d {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.careers-hero-3d .hero-content-3d {
  position: relative;
  z-index: 20;
}

/* Tagline Animation */
.careers-hero-3d .tagline-wrapper {
  overflow: hidden;
  margin-bottom: 40px;
}

.careers-hero-3d .tagline-track {
  display: flex;
  width: max-content;
  animation: taglineScroll 20s infinite linear;
}

.careers-hero-3d .tagline-text {
  color: rgba(0, 212, 255, 0.5);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-right: 100px;
  white-space: nowrap;
}

/* 3D Title with Split Effect */
.careers-hero-3d .title-3d {
  font-size: clamp(3.5rem, 10vw, 6rem);
  font-weight: 900;
  line-height: 1;
  margin-bottom: 30px;
  transform-style: preserve-3d;
  perspective: 1000px;
}

.careers-hero-3d .title-word {
  display: inline-block;
  position: relative;
  margin-right: 20px;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.3);
  transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.careers-hero-3d .title-word::before {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 0%;
  height: 100%;
  color: #00d4ff;
  overflow: hidden;
  white-space: nowrap;
  transition: width 0.8s cubic-bezier(0.77, 0, 0.175, 1);
}

.careers-hero-3d .title-word:hover::before {
  width: 100%;
}

.careers-hero-3d .title-word:hover {
  transform: translateZ(50px) rotateX(20deg);
  -webkit-text-stroke: 1px #00d4ff;
}

/* Glitch Subtitle */
.careers-hero-3d .glitch-container {
  position: relative;
  margin-bottom: 60px;
}

.careers-hero-3d .subtitle-glitch {
  font-size: 1.5rem;
  color: rgba(255, 255, 255, 0.8);
  position: relative;
  display: inline-block;
}

.careers-hero-3d .subtitle-glitch::before,
.careers-hero-3d .subtitle-glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.8;
}

.careers-hero-3d .subtitle-glitch::before {
  color: #ff0080;
  animation: glitch-1 5s infinite linear alternate-reverse;
  clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%);
}

.careers-hero-3d .subtitle-glitch::after {
  color: #00ff88;
  animation: glitch-2 5s infinite linear alternate-reverse;
  clip-path: polygon(0 65%, 100% 65%, 100% 100%, 0 100%);
}

/* 3D Stats */
.careers-hero-3d .stats-3d {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 30px;
  margin: 60px 0;
}

.careers-hero-3d .stat-3d {
  position: relative;
  padding: 30px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 20px;
  backdrop-filter: blur(10px);
  transform-style: preserve-3d;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.careers-hero-3d .stat-3d:hover {
  transform: translateY(-10px) translateZ(20px);
  border-color: rgba(0, 212, 255, 0.3);
  box-shadow: 
    0 20px 40px rgba(0, 0, 0, 0.3),
    0 0 100px rgba(0, 212, 255, 0.1);
}

.careers-hero-3d .stat-visual {
  position: relative;
  width: 100px;
  height: 100px;
  margin: 0 auto 20px;
}

.careers-hero-3d .stat-progress {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: conic-gradient(#00d4ff var(--progress, 0%), transparent 0%);
  animation: statFill 2s ease-out forwards;
}

.careers-hero-3d .stat-icon-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #00d4ff;
  font-size: 1.5rem;
}

.careers-hero-3d .stat-info {
  text-align: center;
}

.careers-hero-3d .stat-number {
  font-size: 2.5rem;
  font-weight: 800;
  color: white;
  margin-bottom: 5px;
  background: linear-gradient(45deg, #00d4ff, #ff0080);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.careers-hero-3d .stat-desc {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 2px;
}

/* Morphing CTA Button */
.careers-hero-3d .cta-morph {
  display: flex;
  gap: 30px;
  align-items: center;
  margin: 50px 0;
  flex-wrap: wrap;
}

.careers-hero-3d .morph-btn {
  position: relative;
  background: linear-gradient(45deg, #00d4ff, #0088ff);
  border: none;
  padding: 20px 50px;
  border-radius: 15px;
  color: white;
  font-size: 1.2rem;
  font-weight: 600;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.careers-hero-3d .morph-btn:hover {
  transform: translateY(-5px) scale(1.05);
  box-shadow: 
    0 20px 40px rgba(0, 212, 255, 0.3),
    0 0 100px rgba(0, 212, 255, 0.2);
}

.careers-hero-3d .btn-text {
  display: block;
  transition: opacity 0.3s ease;
}

.careers-hero-3d .btn-hover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.careers-hero-3d .morph-btn:hover .btn-text {
  opacity: 0;
}

.careers-hero-3d .morph-btn:hover .btn-hover {
  opacity: 1;
  transform: translateY(0);
}

.careers-hero-3d .btn-shards {
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.careers-hero-3d .shard {
  position: absolute;
  width: 20px;
  height: 20px;
  background: white;
  opacity: 0;
  border-radius: 50%;
  animation: shardExplode 1s ease-out forwards;
  animation-play-state: paused;
}

.careers-hero-3d .morph-btn:hover .shard {
  animation-play-state: running;
}

/* Holographic Link */
.careers-hero-3d .link-holographic {
  position: relative;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  font-size: 1.1rem;
  padding: 15px 30px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.careers-hero-3d .link-holographic:hover {
  color: #00d4ff;
  border-color: rgba(0, 212, 255, 0.3);
  background: rgba(0, 212, 255, 0.05);
}

.careers-hero-3d .link-beam {
  position: absolute;
  top: 50%;
  left: -100%;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, #00d4ff, transparent);
  transform: translateY(-50%);
  transition: left 0.5s ease;
}

.careers-hero-3d .link-holographic:hover .link-beam {
  left: 100%;
}

/* Floating Tech Elements */
.careers-hero-3d .floating-tech {
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 5;
}

.careers-hero-3d .tech-element {
  position: absolute;
  width: 60px;
  height: 60px;
  animation: techFloat 20s infinite ease-in-out;
}

.careers-hero-3d .tech-inner {
  width: 100%;
  height: 100%;
  background: rgba(0, 212, 255, 0.1);
  border: 1px solid rgba(0, 212, 255, 0.3);
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #00d4ff;
  font-weight: 600;
  font-size: 0.9rem;
  backdrop-filter: blur(5px);
  transform-style: preserve-3d;
  transform: rotateX(45deg) rotateY(45deg);
  transition: all 0.3s ease;
}

.careers-hero-3d .tech-element:hover .tech-inner {
  transform: rotateX(0) rotateY(0) scale(1.2);
  background: rgba(0, 212, 255, 0.2);
  box-shadow: 0 0 30px rgba(0, 212, 255, 0.4);
}

/* 3D Breadcrumb */
.careers-hero-3d .breadcrumb-3d {
  margin: 40px 0;
}

.careers-hero-3d .crumb-path {
  display: flex;
  align-items: center;
  gap: 20px;
}

.careers-hero-3d .crumb {
  position: relative;
  padding: 12px 24px;
  border-radius: 10px;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  gap: 10px;
  transition: all 0.3s ease;
  transform-style: preserve-3d;
}

.careers-hero-3d .crumb:hover {
  transform: translateZ(20px);
  color: #00d4ff;
  border-color: rgba(0, 212, 255, 0.3);
  background: rgba(0, 212, 255, 0.05);
}

.careers-hero-3d .crumb-glow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at center, rgba(0, 212, 255, 0.1), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.careers-hero-3d .crumb:hover .crumb-glow {
  opacity: 1;
}

.careers-hero-3d .crumb-icon {
  font-size: 1.2rem;
}

.careers-hero-3d .crumb-active {
  color: #00d4ff;
  background: rgba(0, 212, 255, 0.1);
  border-color: rgba(0, 212, 255, 0.3);
}

.careers-hero-3d .active-pulse {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 120%;
  height: 120%;
  border: 2px solid rgba(0, 212, 255, 0.3);
  border-radius: 15px;
  animation: crumbPulse 2s infinite;
}

.careers-hero-3d .crumb-separator {
  position: relative;
  width: 40px;
  height: 2px;
}

.careers-hero-3d .separator-line {
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.1);
}

.careers-hero-3d .separator-dot {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 6px;
  height: 6px;
  background: #00d4ff;
  border-radius: 50%;
  animation: separatorBlink 1s infinite;
}

/* Particle Wave */
.careers-hero-3d .particle-wave {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 200px;
  background: linear-gradient(
    to top,
    rgba(0, 212, 255, 0.1),
    transparent
  );
  animation: waveMove 10s infinite linear;
}

/* Sound Visualizer */
.careers-hero-3d .sound-visualizer {
  position: absolute;
  bottom: 50px;
  right: 50px;
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 50px;
}

.careers-hero-3d .sound-bar {
  width: 4px;
  background: linear-gradient(to top, #00d4ff, #ff0080);
  border-radius: 2px;
  animation: soundVisualize 1.5s infinite ease-in-out;
}

.careers-hero-3d .sound-bar:nth-child(1) { height: 10px; animation-delay: 0s; }
.careers-hero-3d .sound-bar:nth-child(2) { height: 20px; animation-delay: -0.1s; }
.careers-hero-3d .sound-bar:nth-child(3) { height: 40px; animation-delay: -0.2s; }
.careers-hero-3d .sound-bar:nth-child(4) { height: 50px; animation-delay: -0.3s; }
.careers-hero-3d .sound-bar:nth-child(5) { height: 40px; animation-delay: -0.4s; }
.careers-hero-3d .sound-bar:nth-child(6) { height: 20px; animation-delay: -0.5s; }
.careers-hero-3d .sound-bar:nth-child(7) { height: 10px; animation-delay: -0.6s; }

/* === UNIQUE ANIMATIONS FOR THIS SECTION === */

@keyframes layersShift {
  0%, 100% {
    transform: translateZ(var(--depth)) rotateX(0) rotateY(0);
  }
  25% {
    transform: translateZ(var(--depth)) rotateX(10deg) rotateY(5deg);
  }
  50% {
    transform: translateZ(var(--depth)) rotateX(0) rotateY(10deg);
  }
  75% {
    transform: translateZ(var(--depth)) rotateX(-10deg) rotateY(5deg);
  }
}

@keyframes gridScan {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

@keyframes gridScanVertical {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(100%);
  }
}

@keyframes orbPulse {
  0%, 100% {
    transform: scale(1);
    filter: blur(2px);
  }
  50% {
    transform: scale(1.1);
    filter: blur(4px);
  }
}

@keyframes orbGlow {
  0% {
    transform: scale(1);
    opacity: 0.5;
  }
  100% {
    transform: scale(1.2);
    opacity: 0.8;
  }
}

@keyframes orbitSpin {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes taglineScroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

@keyframes glitch-1 {
  0%, 100% {
    transform: translate(0);
  }
  20% {
    transform: translate(-2px, 2px);
  }
  40% {
    transform: translate(-2px, -2px);
  }
  60% {
    transform: translate(2px, 2px);
  }
  80% {
    transform: translate(2px, -2px);
  }
}

@keyframes glitch-2 {
  0%, 100% {
    transform: translate(0);
  }
  10% {
    transform: translate(2px, -2px);
  }
  30% {
    transform: translate(-2px, 2px);
  }
  50% {
    transform: translate(2px, 2px);
  }
  70% {
    transform: translate(-2px, -2px);
  }
  90% {
    transform: translate(2px, -2px);
  }
}

@keyframes statFill {
  from {
    --progress: 0%;
  }
  to {
    --progress: var(--value);
  }
}

@keyframes shardExplode {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
  100% {
    opacity: 0;
    transform: 
      translate(var(--tx, 0), var(--ty, 0))
      scale(0);
  }
}

@keyframes techFloat {
  0%, 100% {
    transform: translate(0, 0) rotate(0deg);
  }
  25% {
    transform: translate(20px, -20px) rotate(90deg);
  }
  50% {
    transform: translate(0, -40px) rotate(180deg);
  }
  75% {
    transform: translate(-20px, -20px) rotate(270deg);
  }
}

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

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

@keyframes waveMove {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

@keyframes soundVisualize {
  0%, 100% {
    height: var(--base-height);
  }
  50% {
    height: calc(var(--base-height) * 1.5);
  }
}

/* Position Floating Elements */
.careers-hero-3d .element-1 { top: 20%; left: 10%; animation-delay: 0s; }
.careers-hero-3d .element-2 { top: 30%; right: 15%; animation-delay: -5s; }
.careers-hero-3d .element-3 { bottom: 30%; left: 20%; animation-delay: -10s; }
.careers-hero-3d .element-4 { bottom: 20%; right: 10%; animation-delay: -15s; }

/* Set Stat Progress Values */
.careers-hero-3d .stat-3d:nth-child(1) .stat-progress { --value: 85%; }
.careers-hero-3d .stat-3d:nth-child(2) .stat-progress { --value: 98%; }
.careers-hero-3d .stat-3d:nth-child(3) .stat-progress { --value: 100%; }

/* Set Shard Positions */
.careers-hero-3d .shard:nth-child(1) { --tx: -50px; --ty: -50px; top: 20%; left: 20%; }
.careers-hero-3d .shard:nth-child(2) { --tx: 50px; --ty: -50px; top: 20%; right: 20%; }
.careers-hero-3d .shard:nth-child(3) { --tx: -50px; --ty: 50px; bottom: 20%; left: 20%; }
.careers-hero-3d .shard:nth-child(4) { --tx: 50px; --ty: 50px; bottom: 20%; right: 20%; }
.careers-hero-3d .shard:nth-child(5) { --tx: 0; --ty: -100px; top: 0; left: 50%; }

/* Responsive */
@media (max-width: 992px) {
  .careers-hero-3d .orbital-system {
    width: 400px;
    height: 400px;
  }
  
  .careers-hero-3d .orbit-1 { width: 300px; height: 300px; }
  .careers-hero-3d .orbit-2 { width: 200px; height: 200px; }
  .careers-hero-3d .orbit-3 { width: 400px; height: 400px; }
  
  .careers-hero-3d .stats-3d {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .careers-hero-3d .orbital-system {
    display: none;
  }
  
  .careers-hero-3d .stats-3d {
    grid-template-columns: 1fr;
  }
  
  .careers-hero-3d .cta-morph {
    flex-direction: column;
    align-items: stretch;
  }
  
  .careers-hero-3d .sound-visualizer {
    display: none;
  }
}

@media (max-width: 480px) {
  .careers-hero-3d .title-3d {
    font-size: clamp(2.5rem, 8vw, 4rem);
  }
  
  .careers-hero-3d .crumb-path {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  
  .careers-hero-3d .crumb-separator {
    transform: rotate(90deg);
    width: 20px;
  }
}




/* Compact Careers Hero Section */
.careers-hero-compact {
  position: relative;
  min-height: 85vh;
  max-height: 900px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: #ffffff;
}

/* Brand Color Background */
.careers-hero-compact .hero-brand-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.careers-hero-compact .color-wave {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0.1;
  transform-origin: center;
  animation: brandWaveMove 20s infinite linear;
}

.careers-hero-compact .color-wave-1 {
  animation-delay: 0s;
  clip-path: polygon(0 0, 100% 0, 100% 30%, 0 50%);
}

.careers-hero-compact .color-wave-2 {
  animation-delay: -5s;
  clip-path: polygon(0 20%, 100% 40%, 100% 70%, 0 50%);
}

.careers-hero-compact .color-wave-3 {
  animation-delay: -10s;
  clip-path: polygon(0 50%, 100% 70%, 100% 100%, 0 80%);
}

.careers-hero-compact .brand-pattern {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: 
    radial-gradient(circle at 10% 20%, rgba(var(--brand-primary-rgb), 0.05) 0%, transparent 20%),
    radial-gradient(circle at 90% 80%, rgba(var(--brand-secondary-rgb), 0.05) 0%, transparent 20%),
    radial-gradient(circle at 50% 50%, rgba(var(--brand-accent-rgb), 0.03) 0%, transparent 30%);
}

/* Container Layout */
.careers-hero-compact .container-compact {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 40px;
  position: relative;
  z-index: 2;
}

.careers-hero-compact .hero-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

/* Left Content */
.careers-hero-compact .hero-left {
  padding-right: 40px;
}

/* Company Badge */
.careers-hero-compact .company-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: rgba(var(--brand-primary-rgb), 0.1);
  border: 1px solid rgba(var(--brand-primary-rgb), 0.2);
  padding: 12px 24px;
  border-radius: 50px;
  margin-bottom: 40px;
  backdrop-filter: blur(10px);
}

.careers-hero-compact .badge-icon {
  color: var(--brand-primary);
  animation: badgeFloat 3s infinite ease-in-out;
}

.careers-hero-compact .badge-text {
  color: var(--brand-primary);
  font-weight: 600;
  font-size: 1.1rem;
  letter-spacing: 1px;
}

.careers-hero-compact .badge-pulse {
  width: 8px;
  height: 8px;
  background: var(--brand-accent);
  border-radius: 50%;
  animation: badgePulse 2s infinite;
}

/* Main Title */
.careers-hero-compact .compact-title {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 24px;
}

.careers-hero-compact .title-gradient {
  display: block;
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.careers-hero-compact .title-solid {
  display: block;
  color: #1a1a1a;
}

/* Tagline */
.careers-hero-compact .compact-tagline {
  font-size: 1.25rem;
  color: #666;
  line-height: 1.6;
  margin-bottom: 40px;
  max-width: 500px;
}

.careers-hero-compact .highlight-word {
  position: relative;
  color: var(--brand-primary);
  font-weight: 600;
  padding: 0 2px;
}

.careers-hero-compact .highlight-word::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 0;
  width: 100%;
  height: 3px;
  background: rgba(var(--brand-primary-rgb), 0.2);
  border-radius: 2px;
  z-index: -1;
}

/* Compact Stats */
.careers-hero-compact .compact-stats {
  display: flex;
  gap: 30px;
  margin: 40px 0;
}

.careers-hero-compact .compact-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.careers-hero-compact .stat-circle {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 700;
  font-size: 1.5rem;
  animation: statPulse 3s infinite;
}

.careers-hero-compact .stat-label {
  color: #666;
  font-size: 0.9rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* CTA Buttons */
.careers-hero-compact .compact-cta {
  display: flex;
  gap: 20px;
  margin: 40px 0;
}

.careers-hero-compact .cta-primary {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
  color: white;
  padding: 16px 32px;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 600;
  font-size: 1.1rem;
  transition: all 0.3s ease;
  box-shadow: 0 10px 30px rgba(var(--brand-primary-rgb), 0.2);
}

.careers-hero-compact .cta-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 40px rgba(var(--brand-primary-rgb), 0.3);
  gap: 16px;
}

.careers-hero-compact .cta-secondary {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: white;
  color: var(--brand-primary);
  padding: 16px 32px;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 600;
  font-size: 1.1rem;
  border: 2px solid rgba(var(--brand-primary-rgb), 0.2);
  transition: all 0.3s ease;
}

.careers-hero-compact .cta-secondary:hover {
  background: rgba(var(--brand-primary-rgb), 0.05);
  border-color: var(--brand-primary);
  gap: 16px;
}

/* Quick Info */
.careers-hero-compact .quick-info {
  display: flex;
  gap: 24px;
  margin: 30px 0;
  flex-wrap: wrap;
}

.careers-hero-compact .info-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #666;
  font-size: 0.95rem;
  font-weight: 500;
}

.careers-hero-compact .info-item svg {
  color: var(--brand-primary);
  opacity: 0.7;
}

/* Compact Breadcrumb */
.careers-hero-compact .compact-breadcrumb {
  margin-top: 40px;
}

.careers-hero-compact .breadcrumb-list {
  display: flex;
  align-items: center;
  gap: 12px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.careers-hero-compact .breadcrumb-list a {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #666;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s ease;
}

.careers-hero-compact .breadcrumb-list a:hover {
  color: var(--brand-primary);
}

.careers-hero-compact .breadcrumb-list svg {
  width: 16px;
  height: 16px;
  opacity: 0.7;
}

.careers-hero-compact .separator {
  color: #ccc;
  font-weight: 300;
}

.careers-hero-compact .current {
  color: var(--brand-primary);
  font-weight: 600;
  position: relative;
  padding-left: 12px;
}

.careers-hero-compact .current::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 4px;
  background: var(--brand-primary);
  border-radius: 50%;
}

/* Right Image Slider */
.careers-hero-compact .hero-right {
  position: relative;
  height: 500px;
}

.careers-hero-compact .image-slider {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.1);
}

.careers-hero-compact .slider-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.careers-hero-compact .slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transform: translateX(100%);
  transition: all 0.8s cubic-bezier(0.77, 0, 0.175, 1);
}

.careers-hero-compact .slide.active {
  opacity: 1;
  transform: translateX(0);
}

.careers-hero-compact .slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 20px;
}

.careers-hero-compact .slide-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
  color: white;
  padding: 30px;
  border-radius: 0 0 20px 20px;
  transform: translateY(20px);
  opacity: 0;
  transition: all 0.5s ease 0.3s;
}

.careers-hero-compact .slide.active .slide-caption {
  transform: translateY(0);
  opacity: 1;
}

.careers-hero-compact .slide-caption h4 {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 8px;
}

.careers-hero-compact .slide-caption p {
  font-size: 1rem;
  opacity: 0.9;
}

/* Slider Controls */
.careers-hero-compact .slider-controls {
  position: absolute;
  bottom: 30px;
  right: 30px;
  display: flex;
  align-items: center;
  gap: 20px;
  z-index: 10;
}

.careers-hero-compact .slider-prev,
.careers-hero-compact .slider-next {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: white;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.careers-hero-compact .slider-prev:hover,
.careers-hero-compact .slider-next:hover {
  background: var(--brand-primary);
  color: white;
  transform: scale(1.1);
}

.careers-hero-compact .slider-dots {
  display: flex;
  gap: 8px;
}

.careers-hero-compact .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: all 0.3s ease;
}

.careers-hero-compact .dot.active {
  background: white;
  transform: scale(1.3);
}

.careers-hero-compact .dot:hover {
  background: white;
}

/* Auto-rotate Indicator */
.careers-hero-compact .auto-rotate {
  position: absolute;
  top: 30px;
  right: 30px;
  z-index: 10;
}

.careers-hero-compact .rotate-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.9);
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 0.9rem;
  color: var(--brand-primary);
  font-weight: 500;
  backdrop-filter: blur(10px);
  animation: rotatePulse 2s infinite;
}

.careers-hero-compact .rotate-indicator svg {
  animation: rotateIcon 4s infinite linear;
}

/* Scroll Indicator */
.careers-hero-compact .compact-scroll {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: #666;
  font-size: 0.9rem;
  font-weight: 500;
  z-index: 10;
  animation: scrollBounce 2s infinite;
}

.careers-hero-compact .scroll-arrow svg {
  color: var(--brand-primary);
}

/* === UNIQUE ANIMATIONS === */

@keyframes brandWaveMove {
  0% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-20px) rotate(1deg);
  }
  100% {
    transform: translateY(0) rotate(0deg);
  }
}

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

@keyframes badgePulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.2);
  }
}

@keyframes statPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 rgba(var(--brand-primary-rgb), 0.4);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(var(--brand-primary-rgb), 0.4);
  }
}

@keyframes rotatePulse {
  0%, 100% {
    opacity: 0.8;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
}

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

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

/* === BRAND COLOR VARIABLES === */
:root {
  /* Example brand colors - Replace with your actual logo colors */
  --brand-primary: #17479e;    /* Primary brand color */
  --brand-secondary: #7c3aed;  /* Secondary brand color */
  --brand-accent: #10b981;     /* Accent brand color */
  --brand-primary-rgb: 37, 99, 235;
  --brand-secondary-rgb: 124, 58, 237;
  --brand-accent-rgb: 16, 185, 129;
}

/* Responsive Design */
@media (max-width: 1200px) {
  .careers-hero-compact .hero-layout {
    gap: 60px;
  }
  
  .careers-hero-compact .hero-left {
    padding-right: 0;
  }
  
  .careers-hero-compact .hero-right {
    height: 450px;
  }
}

@media (max-width: 992px) {
  .careers-hero-compact .hero-layout {
    grid-template-columns: 1fr;
    gap: 60px;
  }
  
  .careers-hero-compact .hero-left {
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
  }
  
  .careers-hero-compact .compact-tagline {
    margin-left: auto;
    margin-right: auto;
  }
  
  .careers-hero-compact .compact-stats {
    justify-content: center;
  }
  
  .careers-hero-compact .compact-cta {
    justify-content: center;
  }
  
  .careers-hero-compact .quick-info {
    justify-content: center;
  }
  
  .careers-hero-compact .breadcrumb-list {
    justify-content: center;
  }
  
  .careers-hero-compact .hero-right {
    height: 400px;
    max-width: 600px;
    margin: 0 auto;
  }
}

@media (max-width: 768px) {
  .careers-hero-compact {
    min-height: auto;
    padding-top:300px;
  }

  .careers-hero-compact .hero-brand-bg {
 top:0px;
}
  
  .careers-hero-compact .container-compact {
    padding: 0 24px;
  }
  
  .careers-hero-compact .compact-title {
    font-size: clamp(2rem, 4vw, 3rem);
  }
  
  .careers-hero-compact .compact-stats {
    gap: 20px;
  }
  
  .careers-hero-compact .stat-circle {
    width: 60px;
    height: 60px;
    font-size: 1.2rem;
  }
  
  .careers-hero-compact .compact-cta {
    flex-direction: column;
    align-items: stretch;
  }
  
  .careers-hero-compact .hero-right {
    height: 350px;
  }
  
  .careers-hero-compact .slider-controls {
    bottom: 20px;
    right: 20px;
  }
}

@media (max-width: 480px) {
  .careers-hero-compact .compact-stats {
    flex-direction: column;
    align-items: center;
    gap: 30px;
  }
  
  .careers-hero-compact .compact-stat {
    flex-direction: row;
    gap: 20px;
  }
  
  .careers-hero-compact .stat-circle {
    width: 50px;
    height: 50px;
    font-size: 1rem;
  }
  
  .careers-hero-compact .hero-right {
    height: 300px;
  }
  
  .careers-hero-compact .auto-rotate {
    display: none;
  }
}
    

/* === SOLIDPRO BRAND COLOR VARIABLES === */
:root {
  /* Primary Color: #17479e */
  --brand-primary: #17479e;
  --brand-primary-rgb: 23, 71, 158;
  --brand-primary-hsl: 220, 75%, 35%;
  
  /* Secondary Color: #e11b22 */
  --brand-secondary: #e11b22;
  --brand-secondary-rgb: 225, 27, 34;
  --brand-secondary-hsl: 358, 79%, 49%;
  
  /* Generated Accent Colors */
  --brand-accent: #10b981; /* Kept for contrast */
  --brand-accent-rgb: 16, 185, 129;
}

/* Apply to the careers hero section */
.careers-hero-compact {
  /* Primary brand color applications */
  .color-wave-1 {
    background: #17479e !important; /* Solidpro Blue */
    opacity: 0.08;
  }
  
  .title-gradient {
    
    -webkit-background-clip: text;
    background-clip: text;
  }
  
  .company-badge,
  .badge-icon,
  .badge-text {
    color: #17479e !important;
  }
  
  .company-badge {
    background: rgba(23, 71, 158, 0.08) !important;
    border-color: rgba(23, 71, 158, 0.15) !important;
  }
  
  /* Secondary brand color applications */
  .color-wave-2 {
    background: #e11b22 !important; /* Solidpro Red */
    opacity: 0.06;
  }
  
  .badge-pulse,
  .highlight-word,
  .current {
    color: #e11b22 !important;
  }
  
  .highlight-word::after {
    background: rgba(225, 27, 34, 0.15) !important;
  }
  
  .stat-circle {
    background: linear-gradient(135deg, #17479e, #e11b22) !important;
  }
  
  /* CTA buttons with both colors */
  .cta-primary {
    background: linear-gradient(135deg, #17479e, #e11b22) !important;
    box-shadow: 0 10px 30px rgba(23, 71, 158, 0.25) !important;
  }
  
  .cta-primary:hover {
    box-shadow: 0 15px 40px rgba(225, 27, 34, 0.3) !important;
  }
  
  .cta-secondary {
    color: #17479e !important;
    border-color: rgba(23, 71, 158, 0.2) !important;
  }
  
  .cta-secondary:hover {
    background: rgba(23, 71, 158, 0.05) !important;
    border-color: #17479e !important;
  }
  
  /* Accent touches */
  .color-wave-3 {
    background: #10b981 !important;
    opacity: 0.05;
  }
}