/* =====================================================
   CAREERS PAGE
   Uses existing:
   style.css
   industries.css

   No duplicate global styling.
====================================================== */


/* =====================================================
   HERO
====================================================== */

.krx-careers-hero {

  position: relative;

  overflow: hidden;

  padding: 0 0 105px;

  color: var(--krx-white);

  background:

    radial-gradient(
      circle at 82% 20%,
      rgba(0, 169, 165, 0.20),
      transparent 32%
    ),

    radial-gradient(
      circle at 15% 85%,
      rgba(247, 37, 95, 0.07),
      transparent 28%
    ),

    linear-gradient(
      135deg,
      var(--krx-teal-3) 0%,
      var(--krx-teal-2) 55%,
      var(--krx-dark) 100%
    );

}


.krx-careers-hero-glow {

  position: absolute;

  width: 520px;
  height: 520px;

  right: -220px;
  top: 70px;

  border-radius: 50%;

  border: 1px solid rgba(255,255,255,0.08);

  box-shadow:
    0 0 0 65px rgba(255,255,255,0.014),
    0 0 0 130px rgba(255,255,255,0.008);

  pointer-events: none;

}


/* =====================================================
   BREADCRUMB
====================================================== */

.krx-careers-breadcrumb {

  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 10px;

  padding-top: 32px;

  margin-bottom: 72px;

  font-size: 13px;

}


.krx-careers-breadcrumb a {

  color: rgba(255,255,255,0.55);

  text-decoration: none;

  transition: color 0.25s ease;

}


.krx-careers-breadcrumb a:hover {

  color: var(--krx-white);

}


.krx-careers-breadcrumb i {

  font-size: 9px;

  color: rgba(255,255,255,0.30);

}


.krx-careers-breadcrumb span {

  color: var(--krx-white);

}


/* =====================================================
   HERO COPY
====================================================== */

.krx-careers-eyebrow {

  display: flex;

  align-items: center;

  gap: 11px;

  margin-bottom: 22px;

  color: #73d8d5;

  font-size: 12px;

  font-weight: 700;

  letter-spacing: 0.14em;

  text-transform: uppercase;

}


.krx-careers-eyebrow > span {

  width: 30px;

  height: 1px;

  background: var(--krx-accent);

}


.krx-careers-hero h1 {

  max-width: 790px;

  margin: 0;

  font-size: clamp(52px, 6vw, 88px);

  line-height: 0.95;

  letter-spacing: -0.055em;

}


.krx-careers-hero h1 span {

  display: block;

  color: #73d8d5;

}


.krx-careers-hero-copy > p {

  max-width: 650px;

  margin: 32px 0 0;

  color: rgba(255,255,255,0.68);

  font-size: 17px;

  line-height: 1.8;

}


.krx-careers-hero-actions {

  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 28px;

  margin-top: 38px;

}


.krx-careers-secondary-link {

  display: inline-flex;

  align-items: center;

  gap: 9px;

  color: rgba(255,255,255,0.65);

  text-decoration: none;

  font-size: 14px;

  font-weight: 600;

  transition: color 0.25s ease;

}


.krx-careers-secondary-link:hover {

  color: var(--krx-white);

}


/* =====================================================
   HERO VISUAL
====================================================== */

.krx-careers-hero-visual {

  position: relative;

  min-height: 430px;

  display: flex;

  align-items: center;

  justify-content: center;

}


.krx-careers-orbit {

  position: absolute;

  border-radius: 50%;

  border: 1px solid rgba(255,255,255,0.12);

}


.orbit-one {

  width: 350px;

  height: 350px;

  transform: rotate(25deg);

}


.orbit-two {

  width: 255px;

  height: 255px;

  border-color: rgba(0,169,165,0.35);

  transform: rotate(-35deg);

}


.krx-careers-hero-core {

  position: relative;

  z-index: 3;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  width: 220px;

  height: 220px;

  border-radius: 50%;

  background:

    radial-gradient(
      circle at 35% 30%,
      rgba(0,169,165,0.95),
      var(--krx-teal-1) 65%,
      var(--krx-teal-3)
    );

  box-shadow:

    0 30px 80px rgba(0,0,0,0.28),

    inset 0 0 0 1px rgba(255,255,255,0.14);

  animation: krxCareerCoreFloat 6s ease-in-out infinite;

}


.krx-careers-hero-core i {

  margin-bottom: 14px;

  color: #8be4e1;

  font-size: 30px;

}


.krx-careers-hero-core span {

  color: rgba(255,255,255,0.62);

  font-size: 12px;

  letter-spacing: 0.08em;

  text-transform: uppercase;

}


.krx-careers-hero-core strong {

  margin: 3px 0;

  color: var(--krx-white);

  font-size: 27px;

  letter-spacing: -0.03em;

}


.krx-careers-float-card {

  position: absolute;

  z-index: 5;

  display: flex;

  align-items: center;

  gap: 10px;

  padding: 12px 17px;

  border: 1px solid rgba(255,255,255,0.12);

  border-radius: 50px;

  background: rgba(255,255,255,0.08);

  backdrop-filter: blur(10px);

  color: var(--krx-white);

  font-size: 13px;

}


.krx-careers-float-card i {

  color: #73d8d5;

}


.careers-float-top {

  top: 55px;

  right: 8px;

  animation: krxCareerFloat 5s ease-in-out infinite;

}


.careers-float-bottom {

  left: 15px;

  bottom: 45px;

  animation: krxCareerFloatReverse 5.5s ease-in-out infinite;

}


/* =====================================================
   INTRO
====================================================== */

.krx-careers-intro {

  padding: 120px 0;

  background: var(--krx-off-white);

}


.krx-careers-section-title {

  max-width: 650px;

  margin: 0;

  color: var(--krx-dark);

  font-size: clamp(40px, 4.5vw, 64px);

  line-height: 1.02;

  letter-spacing: -0.045em;

}


.krx-careers-section-title span {

  display: block;

  color: var(--krx-teal-1);

}


.krx-careers-intro-copy {

  max-width: 680px;

}


.krx-careers-intro-copy p {

  margin-bottom: 24px;

  color: var(--krx-muted);

  font-size: 16px;

  line-height: 1.85;

}


.krx-careers-intro-copy .krx-careers-lead {

  color: var(--krx-text);

  font-size: 20px;

  line-height: 1.65;

}


/* =====================================================
   OPPORTUNITY SECTION
====================================================== */

.krx-careers-opportunity-section {

padding: 120px 0;

background: radial-gradient(circle at 8% 12%, rgba(0, 169, 165, 0.075), transparent 24%), radial-gradient(circle at 92% 88%, rgba(247, 37, 95, 0.045), transparent 22%), #f3f7f7;

border-top: 1px solid rgba(7, 94, 99, 0.05);

border-bottom: 1px solid rgba(7, 94, 99, 0.05);
}


.krx-careers-section-note {

  max-width: 470px;

  margin: 0 0 5px auto;

  color: var(--krx-muted);

  font-size: 16px;

  line-height: 1.8;

}


/* =====================================================
   CAREER CARDS
====================================================== */

.krx-career-card {

  position: relative;

  min-height: 285px;

  padding: 34px;

  overflow: hidden;

  border: 1px solid var(--krx-border);

  border-radius: var(--krx-radius-md);

  background: var(--krx-white);

  transition:

    transform 0.35s ease,

    box-shadow 0.35s ease,

    border-color 0.35s ease;

}


.krx-career-card::after {

  content: "";

  position: absolute;

  left: 0;

  bottom: 0;

  width: 100%;

  height: 3px;

  background:

    linear-gradient(
      90deg,
      var(--krx-accent),
      var(--krx-teal-1)
    );

  transform: scaleX(0);

  transform-origin: left;

  transition: transform 0.35s ease;

}


.krx-career-card:hover {

  transform: translateY(-8px);

  border-color: rgba(0,169,165,0.28);

  box-shadow: var(--krx-shadow-md);

}


.krx-career-card:hover::after {

  transform: scaleX(1);

}


.krx-career-card-top {

  display: flex;

  align-items: flex-start;

  justify-content: space-between;

  margin-bottom: 42px;

}


.krx-career-card-top > i {

  color: var(--krx-muted);

  transition:
    transform 0.25s ease,
    color 0.25s ease;

}


.krx-career-card:hover .krx-career-card-top > i {

  color: var(--krx-accent);

  transform: translate(3px,-3px);

}


.krx-career-icon {

  display: grid;

  place-items: center;

  width: 48px;

  height: 48px;

  border-radius: 14px;

  background: var(--krx-soft-white);

  color: var(--krx-teal-1);

  font-size: 20px;

  transition:
    background 0.3s ease,
    color 0.3s ease;

}


.krx-career-card:hover .krx-career-icon {

  background: var(--krx-teal-1);

  color: var(--krx-white);

}


.krx-career-card h3 {

  margin-bottom: 12px;

  color: var(--krx-dark);

  font-size: 23px;

  line-height: 1.2;

}


.krx-career-card p {

  max-width: 340px;

  margin: 0;

  color: var(--krx-muted);

  font-size: 14px;

  line-height: 1.75;

}


.krx-career-card-accent {

  background:

    linear-gradient(
      145deg,
      var(--krx-soft-white),
      var(--krx-white)
    );

}


/* =====================================================
   PRINCIPLES
====================================================== */

.krx-careers-principles {

  padding: 100px 0;

  background: var(--krx-off-white);

}


.krx-careers-principles-box {

  position: relative;

  overflow: hidden;

  padding: 75px;

  border-radius: var(--krx-radius-xl);

  color: var(--krx-white);

  background:

    radial-gradient(
      circle at 82% 20%,
      rgba(0,169,165,0.25),
      transparent 35%
    ),

    linear-gradient(
      135deg,
      var(--krx-teal-3),
      var(--krx-dark)
    );

  box-shadow: var(--krx-shadow-lg);

}


.krx-careers-principles-box h2 {

  max-width: 550px;

  margin: 0;

  font-size: clamp(40px, 4vw, 60px);

  line-height: 1.02;

  letter-spacing: -0.04em;

}


.krx-careers-principles-box h2 span {

  display: block;

  color: #73d8d5;

}


.krx-careers-principles-box > .row {

  position: relative;

  z-index: 2;

}


.krx-careers-principles-box > .row::after {

  content: "";

  position: absolute;

  width: 320px;

  height: 320px;

  right: -180px;

  bottom: -220px;

  border-radius: 50%;

  border: 1px solid rgba(255,255,255,0.08);

}


.krx-careers-principles-box > .row > .col-lg-5 > p {

  max-width: 480px;

  margin: 28px 0 0;

  color: rgba(255,255,255,0.62);

  font-size: 15px;

  line-height: 1.8;

}


.krx-careers-eyebrow-light {

  color: #73d8d5;

}


.krx-careers-principles-list {

  display: grid;

  gap: 24px;

}


.krx-careers-principle {

  display: flex;

  gap: 18px;

  padding-bottom: 24px;

  border-bottom: 1px solid rgba(255,255,255,0.12);

}


.krx-careers-principle:last-child {

  padding-bottom: 0;

  border-bottom: 0;

}


.krx-careers-principle > span {

  flex: 0 0 auto;

  display: grid;

  place-items: center;

  width: 38px;

  height: 38px;

  border-radius: 50%;

  background: rgba(0,169,165,0.18);

  color: #73d8d5;

}


.krx-careers-principle strong {

  display: block;

  margin-bottom: 5px;

  color: var(--krx-white);

  font-size: 17px;

}


.krx-careers-principle p {

  max-width: 400px;

  margin: 0;

  color: rgba(255,255,255,0.60);

  font-size: 14px;

  line-height: 1.7;

}


/* =====================================================
   OPPORTUNITIES
====================================================== */

.krx-careers-opportunities {

  padding: 120px 0;

  background: var(--krx-white);

}


.krx-career-opening {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 35px;

  padding: 38px;

  border: 1px solid var(--krx-border);

  border-radius: var(--krx-radius-lg);

  background: var(--krx-off-white);

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;

}


.krx-career-opening:hover {

  transform: translateY(-5px);

  box-shadow: var(--krx-shadow-sm);

}


.krx-career-opening-main {

  max-width: 680px;

}


.krx-career-opening-tag {

  display: inline-flex;

  padding: 7px 12px;

  margin-bottom: 15px;

  border-radius: 50px;

  background: rgba(0,169,165,0.09);

  color: var(--krx-teal-1);

  font-size: 11px;

  font-weight: 700;

  letter-spacing: 0.08em;

  text-transform: uppercase;

}


.krx-career-opening h3 {

  margin-bottom: 10px;

  color: var(--krx-dark);

  font-size: 27px;

  letter-spacing: -0.025em;

}


.krx-career-opening p {

  max-width: 610px;

  margin: 0;

  color: var(--krx-muted);

  font-size: 14px;

  line-height: 1.75;

}


/* =====================================================
   CTA
====================================================== */

.krx-careers-cta {

padding: 110px 0;

background: radial-gradient(circle at 8% 12%, rgba(0, 169, 165, 0.075), transparent 24%), radial-gradient(circle at 92% 88%, rgba(247, 37, 95, 0.045), transparent 22%), #f3f7f7;

border-top: 1px solid rgba(7, 94, 99, 0.05);

border-bottom: 1px solid rgba(7, 94, 99, 0.05);
}


.krx-careers-cta-inner {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 40px;

  padding: 65px 0;

  border-top: 1px solid var(--krx-border);

  border-bottom: 1px solid var(--krx-border);

}


.krx-careers-cta-inner h2 {

  max-width: 760px;

  margin: 0;

  color: var(--krx-dark);

  font-size: clamp(40px, 4.5vw, 62px);

  line-height: 1.04;

  letter-spacing: -0.045em;

}


.krx-careers-cta-inner h2 span {

  color: var(--krx-teal-1);

}


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

@keyframes krxCareerCoreFloat {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }

}


@keyframes krxCareerFloat {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-9px);
  }

}


@keyframes krxCareerFloatReverse {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(9px);
  }

}


/* =====================================================
   RESPONSIVE
====================================================== */

@media (max-width: 991px) {

  .krx-careers-hero {

    padding-bottom: 80px;

  }


  .krx-careers-breadcrumb {

    margin-bottom: 55px;

  }


  .krx-careers-hero-visual {

    min-height: 370px;

    margin-top: 15px;

  }


  .krx-careers-section-note {

    margin-left: 0;

  }


  .krx-careers-principles-box {

    padding: 55px;

  }


  .krx-career-opening {

    align-items: flex-start;

    flex-direction: column;

  }


  .krx-careers-cta-inner {

    align-items: flex-start;

    flex-direction: column;

  }

}


@media (max-width: 767px) {

  .krx-careers-hero {

    padding-bottom: 65px;

  }


  .krx-careers-breadcrumb {

    padding-top: 24px;

    margin-bottom: 45px;

  }


  .krx-careers-hero h1 {

    font-size: clamp(46px, 13vw, 68px);

  }


  .krx-careers-hero-copy > p {

    font-size: 15px;

  }


  .krx-careers-hero-actions {

    align-items: flex-start;

    flex-direction: column;

    gap: 20px;

  }


  .krx-careers-hero-visual {

    min-height: 330px;

  }


  .orbit-one {

    width: 290px;

    height: 290px;

  }


  .orbit-two {

    width: 215px;

    height: 215px;

  }


  .krx-careers-hero-core {

    width: 185px;

    height: 185px;

  }


  .krx-careers-intro,
  .krx-careers-opportunity-section,
  .krx-careers-opportunities {

    padding: 75px 0;

  }


  .krx-careers-section-title {

    font-size: 42px;

  }


  .krx-career-card {

    min-height: 250px;

    padding: 28px;

  }


  .krx-careers-principles {

    padding: 70px 0;

  }


  .krx-careers-principles-box {

    padding: 40px 25px;

    border-radius: var(--krx-radius-lg);

  }


  .krx-careers-principles-box h2 {

    font-size: 40px;

  }


  .krx-career-opening {

    padding: 28px 22px;

  }


  .krx-careers-cta {

    padding: 70px 0;

  }


  .krx-careers-cta-inner {

    padding: 45px 0;

  }


  .krx-careers-cta-inner h2 {

    font-size: 40px;

  }

}


@media (max-width: 480px) {

  .krx-careers-float-card {

    padding: 10px 13px;

    font-size: 12px;

  }


  .careers-float-top {

    right: 0;

  }


  .careers-float-bottom {

    left: 0;

  }

}


/* =====================================================
   REDUCED MOTION
====================================================== */

@media (prefers-reduced-motion: reduce) {

  .krx-careers-hero-core,
  .krx-careers-float-card {

    animation: none;

  }

}