/* =====================================================
   PHARMACEUTICAL PAGE
   Uses common:
   - style.css
   - industries.css
====================================================== */


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

.pharma-breadcrumb {
  background: var(--krx-off-white);
  border-bottom: 1px solid var(--krx-border);
}

.pharma-breadcrumb-inner {
  min-height: 58px;
  display: flex;
  align-items: center;
  gap: 10px;

  font-size: 13px;
  color: var(--krx-muted);
}

.pharma-breadcrumb-inner a {
  color: var(--krx-muted);
  text-decoration: none;
  transition: color 0.25s ease;
}

.pharma-breadcrumb-inner a:hover {
  color: var(--krx-teal-1);
}

.pharma-breadcrumb-inner strong {
  color: #d1d1d1;
  font-weight: 600;
}

.pharma-breadcrumb-inner span {
  color: var(--krx-accent);
  font-size: 11px;
}


/* =====================================================
   COMMON PAGE ELEMENTS
====================================================== */

.section-padding {
  padding: 110px 0;
}

.section-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;

  margin-bottom: 18px;

  color: var(--krx-accent);

  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.section-kicker::before {
  content: "";
  width: 24px;
  height: 2px;

  background: var(--krx-accent);
}

.pharma-section-title {
  margin: 0;

  color: var(--krx-dark);

  font-size: clamp(36px, 4vw, 58px);
  line-height: 1.06;
  letter-spacing: -0.04em;
  font-weight: 700;
}


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

.pharma-hero {
  position: relative;
  overflow: hidden;

  min-height: 700px;

  display: flex;
  align-items: center;

  padding: 100px 0;

  background:
    radial-gradient(
      circle at 75% 40%,
      rgba(0, 169, 165, 0.16),
      transparent 32%
    ),
    linear-gradient(
      135deg,
      var(--krx-dark-2),
      var(--krx-teal-3)
    );

  color: var(--krx-white);
}

.pharma-hero::before {
  content: "";

  position: absolute;
  inset: 0;

  background-image:
    linear-gradient(
      rgba(255,255,255,0.025) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,0.025) 1px,
      transparent 1px
    );

  background-size: 60px 60px;

  mask-image: linear-gradient(
    to right,
    black,
    transparent 90%
  );

  pointer-events: none;
}

.pharma-hero-glow {
  position: absolute;

  width: 500px;
  height: 500px;

  right: -180px;
  top: 50%;

  transform: translateY(-50%);

  border-radius: 50%;

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

  filter: blur(20px);

  pointer-events: none;
}

.pharma-eyebrow {
  display: inline-flex;

  padding: 8px 13px;

  margin-bottom: 22px;

  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 50px;

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

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

  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.pharma-hero h1 {
  max-width: 650px;

  margin: 0 0 25px;

  color: var(--krx-white);

  font-size: clamp(46px, 5.7vw, 78px);
  line-height: 0.98;
  letter-spacing: -0.055em;
  font-weight: 700;
}

.pharma-hero h1 span {
  display: block;

  color: #8de1dc;
}

.pharma-hero-description {
  max-width: 590px;

  margin: 0;

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

  font-size: 17px;
  line-height: 1.75;
}

.pharma-hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 28px;

  margin-top: 35px;
}

.pharma-text-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;

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

  font-size: 14px;
  font-weight: 600;

  text-decoration: none;

  transition:
    color 0.25s ease,
    gap 0.25s ease;
}

.pharma-text-link:hover {
  color: var(--krx-white);
  gap: 13px;
}


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

.pharma-hero-visual {
  position: relative;

  min-height: 500px;

  display: flex;
  align-items: center;
  justify-content: center;
}

.pharma-orbit {
  position: absolute;

  border: 1px solid rgba(0,169,165,0.2);

  border-radius: 50%;

  pointer-events: none;
}

.pharma-orbit-one {
  width: 390px;
  height: 390px;

  animation: pharmaOrbit 18s linear infinite;
}

.pharma-orbit-two {
  width: 500px;
  height: 500px;

  border-color: rgba(255,255,255,0.08);

  animation: pharmaOrbitReverse 25s linear infinite;
}

@keyframes pharmaOrbit {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes pharmaOrbitReverse {
  from {
    transform: rotate(360deg);
  }

  to {
    transform: rotate(0deg);
  }
}

.pharma-hero-panel {
  position: relative;
  z-index: 3;

  width: 270px;
  min-height: 330px;

  padding: 28px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  border: 1px solid rgba(255,255,255,0.13);
  border-radius: var(--krx-radius-xl);

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,0.11),
      rgba(255,255,255,0.035)
    );

  box-shadow:
    0 35px 100px rgba(0,0,0,0.28);

  backdrop-filter: blur(18px);
}

.pharma-panel-top {
  position: absolute;

  top: 25px;
  left: 28px;
  right: 28px;

  display: flex;
  align-items: center;
  gap: 8px;

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

  font-size: 9px;
  letter-spacing: 0.12em;
  font-weight: 700;
}

.pharma-panel-dot {
  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: var(--krx-accent);

  box-shadow:
    0 0 0 5px rgba(0,169,165,0.1);
}

.pharma-capsule {
  width: 145px;
  height: 70px;

  display: flex;

  overflow: hidden;

  border-radius: 70px;

  transform: rotate(-32deg);

  box-shadow:
    0 25px 45px rgba(0,0,0,0.22);
}

.pharma-capsule-half {
  flex: 1;

  background: linear-gradient(
    135deg,
    #ffffff,
    #dcefed
  );
}

.pharma-capsule-half:last-child {
  background: linear-gradient(
    135deg,
    #00a9a5,
    #075e63
  );
}

.pharma-panel-lines {
  width: 130px;

  display: flex;
  flex-direction: column;
  gap: 7px;

  margin-top: 55px;
}

.pharma-panel-lines span {
  height: 4px;

  border-radius: 10px;

  background: rgba(255,255,255,0.13);
}

.pharma-panel-lines span:nth-child(2) {
  width: 75%;
}

.pharma-panel-lines span:nth-child(3) {
  width: 55%;
}


.pharma-floating-card {
  position: absolute;
  z-index: 4;

  display: flex;
  align-items: center;
  gap: 12px;

  padding: 13px 16px;

  border: 1px solid rgba(255,255,255,0.11);
  border-radius: 15px;

  background: rgba(8,47,51,0.78);

  box-shadow:
    0 20px 50px rgba(0,0,0,0.22);

  backdrop-filter: blur(15px);

  animation: pharmaFloat 5s ease-in-out infinite;
}

.pharma-floating-card i {
  width: 36px;
  height: 36px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 10px;

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

  color: #8de1dc;

  font-size: 17px;
}

.pharma-floating-card strong {
  display: block;

  color: var(--krx-white);

  font-size: 11px;
  font-weight: 600;
}

.pharma-floating-card small {
  display: block;

  margin-top: 2px;

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

  font-size: 9px;
}

.pharma-card-storage {
  top: 55px;
  left: 0;
}

.pharma-card-inventory {
  right: -5px;
  bottom: 65px;

  animation-delay: -2s;
}

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

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

.pharma-hero-badge {
  position: absolute;
  z-index: 4;

  left: 50%;
  bottom: 5px;

  transform: translateX(-50%);

  display: flex;
  align-items: center;
  gap: 8px;

  white-space: nowrap;

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

  font-size: 10px;
  letter-spacing: 0.03em;
}

.pharma-hero-badge i {
  color: var(--krx-accent);
}


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

.pharma-intro {
  background: var(--krx-white);
}

.pharma-intro-text {
  max-width: 520px;

  margin: 0;

  color: var(--krx-muted);

  font-size: 17px;
  line-height: 1.8;
}


/* =====================================================
   CHALLENGES
====================================================== */

.pharma-challenges {
  padding: 100px 0;

  background:
    linear-gradient(
      135deg,
      var(--krx-soft-white),
      var(--krx-off-white)
    );
}

.pharma-challenge-intro {
  height: 100%;

  padding: 35px;

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

  background:
    linear-gradient(
      145deg,
      var(--krx-teal-3),
      var(--krx-dark)
    );

  color: var(--krx-white);
}

.pharma-challenge-intro .section-kicker {
  color: #7eddd8;
}

.pharma-challenge-intro h2 {
  margin: 0 0 20px;

  color: var(--krx-white);

  font-size: clamp(34px, 4vw, 48px);
  line-height: 1.05;
  letter-spacing: -0.04em;
}

.pharma-challenge-intro p {
  margin: 0;

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

  line-height: 1.7;
}

.pharma-challenge-card {
  height: 100%;

  padding: 30px;

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

  background: var(--krx-white);

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}

.pharma-challenge-card:hover {
  transform: translateY(-6px);

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

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

.pharma-challenge-card > span {
  width: 48px;
  height: 48px;

  display: flex;
  align-items: center;
  justify-content: center;

  margin-bottom: 25px;

  border-radius: 14px;

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

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

  font-size: 20px;
}

.pharma-challenge-card h3 {
  margin: 0 0 10px;

  color: var(--krx-dark);

  font-size: 20px;
  letter-spacing: -0.02em;
}

.pharma-challenge-card p {
  margin: 0;

  color: var(--krx-muted);

  font-size: 14px;
  line-height: 1.7;
}


/* =====================================================
   SOLUTIONS
====================================================== */

.pharma-solutions {
  background: var(--krx-white);
}

.pharma-section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 50px;

  margin-bottom: 55px;
}

.pharma-section-heading > p {
  max-width: 430px;

  margin: 0;

  color: var(--krx-muted);

  font-size: 15px;
  line-height: 1.75;
}

.pharma-solution-card {
  position: relative;

  height: 100%;
  min-height: 300px;

  display: flex;
  flex-direction: column;

  padding: 30px;

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

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

  overflow: hidden;

  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease,
    background 0.35s ease;
}

.pharma-solution-card::after {
  content: "";

  position: absolute;

  width: 130px;
  height: 130px;

  right: -60px;
  bottom: -60px;

  border-radius: 50%;

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

  transition: transform 0.35s ease;
}

.pharma-solution-card:hover {
  transform: translateY(-8px);

  background: var(--krx-white);

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

.pharma-solution-card:hover::after {
  transform: scale(2);
}

.pharma-solution-featured {
  background:
    linear-gradient(
      145deg,
      var(--krx-teal-3),
      var(--krx-dark)
    );

  border-color: transparent;
}

.pharma-solution-icon {
  width: 52px;
  height: 52px;

  display: flex;
  align-items: center;
  justify-content: center;

  margin-bottom: 35px;

  border-radius: 15px;

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

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

  font-size: 22px;
}

.pharma-solution-featured .pharma-solution-icon {
  background: rgba(255,255,255,0.1);
  color: #8de1dc;
}

.pharma-solution-content {
  margin-top: auto;
}

.pharma-solution-content h3 {
  margin: 0 0 12px;

  color: var(--krx-dark);

  font-size: 22px;
  letter-spacing: -0.025em;
}

.pharma-solution-featured h3 {
  color: var(--krx-white);
}

.pharma-solution-content p {
  min-height: 72px;

  margin: 0 0 22px;

  color: var(--krx-muted);

  font-size: 14px;
  line-height: 1.7;
}

.pharma-solution-featured p {
  color: rgba(255,255,255,0.6);
}

.pharma-solution-content a {
  display: inline-flex;
  align-items: center;
  gap: 8px;

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

  font-size: 12px;
  font-weight: 700;

  text-decoration: none;

  transition: gap 0.25s ease;
}

.pharma-solution-featured a {
  color: #8de1dc;
}

.pharma-solution-content a:hover {
  gap: 13px;
}


/* =====================================================
   CAPABILITIES
====================================================== */

.pharma-capabilities {
  padding: 110px 0;

  background:
    linear-gradient(
      135deg,
      var(--krx-soft-white),
      var(--krx-off-white)
    );
}

.pharma-capability-visual {
  position: relative;

  min-height: 430px;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;

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

  background:
    radial-gradient(
      circle,
      rgba(0,169,165,0.16),
      transparent 55%
    ),
    var(--krx-dark);

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

.pharma-capability-circle {
  position: absolute;

  width: 300px;
  height: 300px;

  border: 1px solid rgba(0,169,165,0.2);

  border-radius: 50%;
}

.pharma-capability-circle::before,
.pharma-capability-circle::after {
  content: "";

  position: absolute;

  inset: 35px;

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

  border-radius: 50%;
}

.pharma-capability-circle::after {
  inset: 75px;

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

.pharma-capability-cross {
  position: absolute;

  width: 150px;
  height: 150px;
}

.pharma-capability-cross span {
  position: absolute;

  background: rgba(255,255,255,0.06);
}

.pharma-capability-cross span:first-child {
  width: 100%;
  height: 1px;

  top: 50%;
}

.pharma-capability-cross span:last-child {
  width: 1px;
  height: 100%;

  left: 50%;
}

.pharma-capability-box {
  position: relative;
  z-index: 2;

  width: 150px;
  height: 150px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 28px;

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

  backdrop-filter: blur(15px);

  text-align: center;
}

.pharma-capability-box i {
  margin-bottom: 10px;

  color: #8de1dc;

  font-size: 32px;
}

.pharma-capability-box strong {
  color: var(--krx-white);

  font-size: 14px;
}

.pharma-capability-box small {
  margin-top: 4px;

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

  font-size: 9px;
}

.pharma-capability-description {
  max-width: 620px;

  margin: 25px 0 30px;

  color: var(--krx-muted);

  font-size: 16px;
  line-height: 1.8;
}

.pharma-capability-list {
  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 18px;
}

.pharma-capability-item {
  display: flex;
  gap: 13px;
}

.pharma-capability-item > span {
  flex: 0 0 30px;

  width: 30px;
  height: 30px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

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

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

  font-size: 13px;
}

.pharma-capability-item strong {
  display: block;

  margin-bottom: 4px;

  color: var(--krx-dark);

  font-size: 14px;
}

.pharma-capability-item p {
  margin: 0;

  color: var(--krx-muted);

  font-size: 12px;
  line-height: 1.55;
}


/* =====================================================
   USE CASES
====================================================== */

.pharma-use-cases {
  background: var(--krx-white);
}

.pharma-use-heading {
  max-width: 700px;

  margin: 0 auto 55px;
}

.pharma-use-heading .pharma-section-title {
  margin-bottom: 20px;
}

.pharma-use-heading > p {
  margin: 0;

  color: var(--krx-muted);

  line-height: 1.75;
}

.pharma-use-card {
  min-height: 220px;

  padding: 30px;

  display: flex;
  flex-direction: column;
  justify-content: flex-end;

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

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

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

.pharma-use-card:hover {
  transform: translateY(-7px);

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

.pharma-use-card > i {
  margin-bottom: auto;

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

  font-size: 30px;
}

.pharma-use-card h3 {
  margin: 35px 0 6px;

  color: var(--krx-dark);

  font-size: 19px;
}

.pharma-use-card span {
  color: var(--krx-muted);

  font-size: 11px;
}


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

.pharma-cta {
  padding: 30px 0 110px;

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

.pharma-cta-inner {
  position: relative;

  overflow: hidden;

  padding: 65px;

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

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

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

.pharma-cta-inner::before {
  content: "";

  position: absolute;

  inset: 0;

  background:
    radial-gradient(
      circle at 85% 50%,
      rgba(0,169,165,0.2),
      transparent 35%
    );
}

.pharma-cta-glow {
  position: absolute;

  width: 220px;
  height: 220px;

  right: -80px;
  top: -80px;

  border: 1px solid rgba(0,169,165,0.18);

  border-radius: 50%;
}

.pharma-cta-inner .section-kicker {
  position: relative;

  color: #8de1dc;
}

.pharma-cta-inner h2 {
  position: relative;

  max-width: 750px;

  margin: 0 0 15px;

  color: var(--krx-white);

  font-size: clamp(34px, 4vw, 54px);
  line-height: 1.04;
  letter-spacing: -0.04em;
}

.pharma-cta-inner p {
  position: relative;

  max-width: 650px;

  margin: 0;

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

  font-size: 15px;
  line-height: 1.7;
}

.pharma-cta-inner .btn {
  position: relative;
}


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

@media (max-width: 1199px) {

  .pharma-hero {
    min-height: auto;
  }

  .pharma-card-storage {
    left: 10px;
  }

  .pharma-card-inventory {
    right: 0;
  }

}


@media (max-width: 991px) {

  .section-padding {
    padding: 80px 0;
  }

  .pharma-hero {
    padding: 80px 0;
  }

  .pharma-hero-visual {
    min-height: 450px;

    margin-top: 20px;
  }

  .pharma-section-heading {
    display: block;
  }

  .pharma-section-heading > p {
    margin-top: 25px;
  }

  .pharma-capability-visual {
    min-height: 380px;
  }

  .pharma-cta-inner {
    padding: 45px;
  }

}


@media (max-width: 767px) {

  .section-padding {
    padding: 65px 0;
  }

  .pharma-breadcrumb-inner {
    min-height: 52px;

    font-size: 11px;

    overflow-x: auto;
    white-space: nowrap;
  }

  .pharma-hero {
    padding: 65px 0;
  }

  .pharma-hero h1 {
    font-size: clamp(42px, 12vw, 60px);
  }

  .pharma-hero-description {
    font-size: 15px;
  }

  .pharma-hero-actions {
    align-items: flex-start;
    flex-direction: column;
    gap: 20px;
  }

  .pharma-hero-visual {
    min-height: 390px;
  }

  .pharma-orbit-one {
    width: 280px;
    height: 280px;
  }

  .pharma-orbit-two {
    width: 350px;
    height: 350px;
  }

  .pharma-hero-panel {
    width: 220px;
    min-height: 280px;
  }

  .pharma-floating-card {
    padding: 10px 12px;
  }

  .pharma-floating-card i {
    width: 30px;
    height: 30px;
  }

  .pharma-card-storage {
    top: 35px;
    left: 0;
  }

  .pharma-card-inventory {
    right: 0;
    bottom: 30px;
  }

  .pharma-hero-badge {
    display: none;
  }

  .pharma-challenges {
    padding: 65px 0;
  }

  .pharma-challenge-intro {
    padding: 30px;
  }

  .pharma-capability-list {
    grid-template-columns: 1fr;
  }

  .pharma-capability-visual {
    min-height: 320px;
  }

  .pharma-cta {
    padding-bottom: 65px;
  }

  .pharma-cta-inner {
    padding: 35px 25px;
  }

  .pharma-cta-inner .btn {
    margin-top: 20px;
  }

}


@media (max-width: 575px) {

  .pharma-hero-visual {
    min-height: 340px;
  }

  .pharma-orbit-one {
    width: 240px;
    height: 240px;
  }

  .pharma-orbit-two {
    width: 300px;
    height: 300px;
  }

  .pharma-hero-panel {
    width: 190px;
    min-height: 250px;
    padding: 20px;
  }

  .pharma-capsule {
    width: 110px;
    height: 54px;
  }

  .pharma-panel-lines {
    margin-top: 35px;
  }

  .pharma-floating-card {
    transform: scale(0.88);
  }

  .pharma-card-storage {
    left: -8px;
  }

  .pharma-card-inventory {
    right: -8px;
  }

  .pharma-challenge-card,
  .pharma-solution-card {
    padding: 25px;
  }

  .pharma-use-card {
    min-height: 190px;
  }

}