/* =========================================================
   KRACKERZ INDUSTRIES
   COMMON INDUSTRIES CSS
   FMCG / 3PL / FURNITURE / CHEMICAL / ELECTRONICS / ETC.
========================================================= */


/* =========================================================
   01. ROOT / VARIABLES
========================================================= */

:root {

  --krx-teal-1: #075e63;
  --krx-teal-2: #064f54;
  --krx-teal-3: #043f44;

  --krx-accent: #00a9a5;
  --krx-pink: #f7255f;

  --krx-white: #ffffff;
  --krx-off-white: #f7faf9;
  --krx-soft-white: #eef5f4;

  --krx-dark: #082f33;
  --krx-dark-2: #06262a;

  --krx-text: #173d40;
  --krx-muted: #607678;

  --krx-border: rgba(7, 94, 99, 0.12);
  --krx-light-border: rgba(255, 255, 255, 0.14);

  --krx-radius-sm: 12px;
  --krx-radius-md: 20px;
  --krx-radius-lg: 28px;
  --krx-radius-xl: 36px;

  --krx-shadow-sm:
    0 10px 30px rgba(4, 63, 68, 0.07);

  --krx-shadow-md:
    0 20px 60px rgba(4, 63, 68, 0.11);

  --krx-shadow-lg:
    0 30px 90px rgba(4, 63, 68, 0.15);

}


/* =========================================================
   02. PAGE BASE
========================================================= */

.krx-industry-page {
  overflow-x: hidden;
  background: var(--krx-white);
  color: var(--krx-text);
}

.krx-industry-page *,
.krx-industry-page *::before,
.krx-industry-page *::after {
  box-sizing: border-box;
}

.krx-industry-page img {
  /* max-width: 100%; */
  /* height: auto; */
}

.krx-industry-page a {
  text-decoration: none;
}

.krx-industry-page section {
  position: relative;
}


/* =========================================================
   03. COMMON CONTAINER
========================================================= */

.krx-industry-page .container {
  position: relative;
  z-index: 2;
}


/* =========================================================
   04. HERO
========================================================= */

.krx-industry-hero {

  position: relative;

  min-height: min(860px, 100vh);

  display: flex;
  align-items: center;

  padding: 150px 0 110px;

  overflow: hidden;

  color: var(--krx-white);

  background:
    radial-gradient(
      circle at 12% 18%,
      rgba(0, 169, 165, 0.18),
      transparent 28%
    ),
    radial-gradient(
      circle at 88% 78%,
      rgba(247, 37, 95, 0.13),
      transparent 30%
    ),
    linear-gradient(
      135deg,
      var(--krx-teal-1) 0%,
      var(--krx-teal-2) 48%,
      var(--krx-teal-3) 100%
    );

}


/* subtle grid */

.krx-industry-hero-grid {

  position: absolute;

  inset: 0;

  pointer-events: none;

  opacity: 0.18;

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

  background-size: 70px 70px;

  mask-image:
    linear-gradient(
      to bottom,
      rgba(0,0,0,0.9),
      transparent 85%
    );

}


/* hero glow */

.krx-industry-hero-glow {

  position: absolute;

  width: 520px;
  height: 520px;

  top: -220px;
  right: -150px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(0, 169, 165, 0.28),
      transparent 68%
    );

  filter: blur(10px);

  pointer-events: none;

  animation:
    krxHeroGlow 8s ease-in-out infinite alternate;

}

@keyframes krxHeroGlow {

  from {
    transform: scale(0.95);
    opacity: 0.65;
  }

  to {
    transform: scale(1.08);
    opacity: 1;
  }

}


/* =========================================================
   05. BREADCRUMB
========================================================= */

.krx-industry-breadcrumb {

  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 9px;

  margin-bottom: 28px;

  font-size: 12px;

  letter-spacing: 0.04em;

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

}

.krx-industry-breadcrumb a {

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

  transition:
    color 0.25s ease;

}

.krx-industry-breadcrumb a:hover {
  color: var(--krx-white);
}

.krx-industry-breadcrumb span {

  display: inline-flex;

  align-items: center;

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

  font-size: 10px;

}

.krx-industry-breadcrumb strong {

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

  font-weight: 600;

}


/* =========================================================
   06. EYEBROW
========================================================= */

.krx-industry-eyebrow {

  display: inline-flex;

  align-items: center;

  gap: 10px;

  margin-bottom: 20px;

  font-size: 11px;

  line-height: 1;

  letter-spacing: 0.18em;

  text-transform: uppercase;

  font-weight: 700;

  color: var(--krx-accent);

}

.krx-industry-eyebrow::before {

  content: "";

  width: 28px;
  height: 1px;

  background: currentColor;

  opacity: 0.7;

}


/* =========================================================
   07. HERO TYPOGRAPHY
========================================================= */

.krx-industry-title {

max-width: 780px;

margin: 0 0 28px;

font-size: clamp(48px, 6vw, 78px);

line-height: 0.98;

letter-spacing: -0.045em;

font-weight: 700;

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

.krx-industry-title span {

  display: block;

  color: #79d9d5;

}


/* =========================================================
   08. HERO LEAD
========================================================= */

.krx-industry-lead {

  max-width: 650px;

  margin: 0;

  font-size: 18px;

  line-height: 1.75;

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

}


/* =========================================================
   09. HERO ACTIONS
========================================================= */

.krx-industry-actions {

  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 26px;

  margin-top: 38px;

}


/* primary button */

.krx-industry-btn {

  display: inline-flex;

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

  gap: 12px;

  min-height: 54px;

  padding: 0 24px;

  border-radius: 999px;

  color: var(--krx-dark);

  background: var(--krx-white);

  font-size: 13px;

  font-weight: 700;

  letter-spacing: 0.01em;

  box-shadow:
    0 15px 35px rgba(0,0,0,0.12);

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

}

.krx-industry-btn i {

  transition:
    transform 0.3s ease;

}

.krx-industry-btn:hover {

  color: var(--krx-dark);

  transform: translateY(-3px);

  box-shadow:
    0 20px 45px rgba(0,0,0,0.18);

}

.krx-industry-btn:hover i {
  transform: translate(3px,-3px);
}


/* text link */

.krx-industry-text-link {

  display: inline-flex;

  align-items: center;

  gap: 10px;

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

  font-size: 13px;

  font-weight: 600;

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

}

.krx-industry-text-link:hover {

  color: var(--krx-white);

  gap: 14px;

}


/* =========================================================
   10. HERO VISUAL
========================================================= */

.krx-industry-hero-visual {

  position: relative;

  width: min(100%, 520px);

  aspect-ratio: 1 / 1;

  margin-left: auto;

  display: flex;

  align-items: center;

  justify-content: center;

}


/* central card */

.chemical-core {

  position: absolute;

  z-index: 5;

  width: 190px;
  min-height: 190px;

  padding: 28px 22px;

  border-radius: 50%;

  display: flex;

  flex-direction: column;

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

  text-align: center;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,0.16),
      rgba(255,255,255,0.06)
    );

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

  backdrop-filter: blur(18px);

  box-shadow:
    0 30px 70px rgba(0,0,0,0.18),
    inset 0 1px 0 rgba(255,255,255,0.15);

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

}

@keyframes krxCoreFloat {

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

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

}

.chemical-core-icon {

  width: 50px;
  height: 50px;

  margin-bottom: 14px;

  display: flex;

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

  border-radius: 16px;

  color: var(--krx-white);

  background:
    linear-gradient(
      135deg,
      rgba(0,169,165,0.8),
      rgba(0,169,165,0.25)
    );

  font-size: 22px;

}

.chemical-core strong {

  display: block;

  color: var(--krx-white);

  font-size: 16px;

  font-weight: 700;

}

.chemical-core span {

  margin-top: 5px;

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

  font-size: 10px;

  letter-spacing: 0.08em;

  text-transform: uppercase;

}


/* =========================================================
   11. HERO ORBITS
========================================================= */

.chemical-orbit {

  position: absolute;

  border-radius: 50%;

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

  pointer-events: none;

}

.chemical-orbit-one {

  width: 76%;
  height: 76%;

  animation:
    krxOrbit 18s linear infinite;

}

.chemical-orbit-two {

  width: 54%;
  height: 54%;

  border-style: dashed;

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

  animation:
    krxOrbitReverse 14s linear infinite;

}

@keyframes krxOrbit {

  to {
    transform: rotate(360deg);
  }

}

@keyframes krxOrbitReverse {

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

}


/* =========================================================
   12. HERO NODES
========================================================= */

.chemical-node {

  position: absolute;

  z-index: 6;

  min-width: 120px;

  padding: 12px 15px;

  display: flex;

  align-items: center;

  gap: 10px;

  border-radius: 14px;

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

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

  backdrop-filter: blur(12px);

  box-shadow:
    0 15px 40px rgba(0,0,0,0.13);

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

  font-size: 11px;

  font-weight: 600;

  transition:
    transform 0.35s ease,
    background 0.35s ease;

}

.chemical-node i {

  color: #79d9d5;

  font-size: 16px;

}

.chemical-node:hover {

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

  transform: translateY(-5px);

}

.chemical-node-one {

  top: 9%;
  left: 2%;

}

.chemical-node-two {

  top: 10%;
  right: 1%;

}

.chemical-node-three {

  bottom: 12%;
  left: 0;

}

.chemical-node-four {

  bottom: 10%;
  right: 0;

}


/* =========================================================
   13. COMMON SECTIONS
========================================================= */

.krx-industry-section {

  padding: 120px 0;

  background: var(--krx-white);

}

.krx-industry-dark-section {

  color: var(--krx-white);

  background:
    radial-gradient(
      circle at 85% 20%,
      rgba(0,169,165,0.13),
      transparent 30%
    ),
    linear-gradient(
      145deg,
      #073d42,
      #042f34
    );

}


/* =========================================================
   14. SECTION HEADING
========================================================= */

.krx-industry-heading {

margin: 0;

font-size: clamp(38px, 4vw, 58px);

line-height: 1.04;

letter-spacing: -0.04em;

font-weight: 700;

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

.krx-industry-dark-section
.krx-industry-heading {

  color: var(--krx-white);

}

.krx-industry-heading span {

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

}

.krx-industry-dark-section
.krx-industry-heading span {

  color: #79d9d5;

}


/* =========================================================
   15. SECTION DESCRIPTION
========================================================= */

.krx-industry-description {

  max-width: 650px;

  margin: 0;

  font-size: 16px;

  line-height: 1.8;

  color: var(--krx-muted);

}

.krx-industry-dark-section
.krx-industry-description {

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

}


/* =========================================================
   16. CHEMICAL INTRO
========================================================= */

.chemical-intro {

  background:
    radial-gradient(
      circle at 8% 20%,
      rgba(0,169,165,0.07),
      transparent 25%
    ),
    var(--krx-off-white);

}


/* =========================================================
   17. VALUE STRIP
========================================================= */

.chemical-value-strip {

  display: grid;

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

  margin-top: 75px;

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

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

}

.chemical-value-item {

  position: relative;

  padding: 32px 30px;

  min-height: 150px;

}

.chemical-value-item + .chemical-value-item {

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

}

.chemical-value-item span {

  display: block;

  margin-bottom: 18px;

  color: var(--krx-accent);

  font-size: 11px;

  font-weight: 700;

  letter-spacing: 0.12em;

}

.chemical-value-item strong {

  display: block;

  margin-bottom: 8px;

  color: var(--krx-dark);

  font-size: 18px;

}

.chemical-value-item small {

  color: var(--krx-muted);

  font-size: 13px;

}


/* =========================================================
   18. FLOW SECTION
========================================================= */

.chemical-flow-section {

  overflow: hidden;

}

.chemical-flow-glow {

  position: absolute;

  width: 500px;
  height: 500px;

  right: -250px;
  bottom: -250px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(247,37,95,0.1),
      transparent 68%
    );

  pointer-events: none;

}

.chemical-section-heading {

  max-width: 780px;

}


/* =========================================================
   19. FLOW
========================================================= */

.chemical-flow {

  position: relative;

  display: grid;

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

  gap: 22px;

  margin-top: 80px;

}

.chemical-flow-line {

  position: absolute;

  top: 43px;

  left: 8%;

  right: 8%;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(121,217,213,0.5),
      transparent
    );

}


.chemical-flow-step {

  position: relative;

  z-index: 2;

  text-align: center;

}


.chemical-flow-number {

  margin-bottom: 16px;

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

  font-size: 10px;

  font-weight: 700;

  letter-spacing: 0.14em;

}


.chemical-flow-icon {

  width: 86px;
  height: 86px;

  margin: 0 auto 22px;

  display: flex;

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

  border-radius: 50%;

  color: #79d9d5;

  background:
    linear-gradient(
      145deg,
      rgba(0,169,165,0.2),
      rgba(255,255,255,0.04)
    );

  border:
    1px solid rgba(121,217,213,0.25);

  box-shadow:
    0 15px 35px rgba(0,0,0,0.12);

  font-size: 23px;

  transition:
    transform 0.35s ease,
    background 0.35s ease;

}

.chemical-flow-step:hover
.chemical-flow-icon {

  transform: translateY(-7px);

  background:
    linear-gradient(
      145deg,
      rgba(0,169,165,0.35),
      rgba(255,255,255,0.08)
    );

}

.chemical-flow-step h3 {

  margin: 0 0 10px;

  color: var(--krx-white);

  font-size: 17px;

}

.chemical-flow-step p {

  max-width: 180px;

  margin: 0 auto;

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

  font-size: 12px;

  line-height: 1.65;

}


/* =========================================================
   20. CAPABILITIES
========================================================= */

.chemical-capabilities {

  background: var(--krx-white);

}


/* =========================================================
   21. INDUSTRY CARDS
========================================================= */

.krx-industry-card {

  position: relative;

  height: 100%;

  padding: 30px;

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

  background:
    linear-gradient(
      145deg,
      #ffffff,
      #f6faf9
    );

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

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

  overflow: hidden;

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

}

.krx-industry-card::after {

  content: "";

  position: absolute;

  width: 150px;
  height: 150px;

  right: -80px;
  bottom: -80px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(0,169,165,0.13),
      transparent 68%
    );

  pointer-events: none;

  transition:
    transform 0.4s ease;

}

.krx-industry-card:hover {

  transform: translateY(-8px);

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

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

}

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

  transform: scale(1.35);

}


/* =========================================================
   22. CARD TOP
========================================================= */

.krx-industry-card-top {

  display: flex;

  align-items: flex-start;

  justify-content: space-between;

  margin-bottom: 48px;

}

.krx-industry-card-number {

  color: rgba(7,94,99,0.35);

  font-size: 11px;

  font-weight: 700;

  letter-spacing: 0.12em;

}

.krx-industry-card-icon {

  width: 48px;
  height: 48px;

  display: flex;

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

  border-radius: 14px;

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

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

  font-size: 19px;

  transition:
    transform 0.35s ease;

}

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

  transform:
    rotate(-5deg) scale(1.05);

}


.krx-industry-card h3 {

  position: relative;

  margin: 0 0 12px;

  color: var(--krx-dark);

  font-size: 21px;

  letter-spacing: -0.02em;

}

.krx-industry-card p {

  position: relative;

  margin: 0;

  max-width: 310px;

  color: var(--krx-muted);

  font-size: 13px;

  line-height: 1.75;

}

.chemical-card-arrow {

  position: absolute;

  right: 28px;
  bottom: 25px;

  color: var(--krx-accent);

  font-size: 15px;

  opacity: 0;

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

  transition:
    opacity 0.3s ease,
    transform 0.3s ease;

}

.krx-industry-card:hover
.chemical-card-arrow {

  opacity: 1;

  transform:
    translate(0,0);

}


/* =========================================================
   23. CONTROL SECTION
========================================================= */

.chemical-control-section {

  padding: 110px 0;

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

}

.chemical-control-panel {

  position: relative;

  padding: 75px;

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

  overflow: hidden;

  color: var(--krx-white);

  background:
    radial-gradient(
      circle at 85% 20%,
      rgba(0,169,165,0.24),
      transparent 30%
    ),
    radial-gradient(
      circle at 10% 90%,
      rgba(247,37,95,0.10),
      transparent 28%
    ),
    linear-gradient(
      135deg,
      #075e63,
      #043f44
    );

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

}

.chemical-control-panel::before {

  content: "";

  position: absolute;

  inset: 0;

  opacity: 0.12;

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

  background-size: 60px 60px;

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

}

.chemical-control-panel
.krx-industry-eyebrow {

  color: #79d9d5;

}

.chemical-control-panel h2 {

max-width: 600px;

margin: 0 0 25px;

font-size: clamp(38px, 4vw, 58px);

line-height: 1;

letter-spacing: -0.045em;
}

.chemical-control-panel h2 span {

  display: block;

  color: #79d9d5;

}

.chemical-control-panel p {

  max-width: 560px;

  margin: 0;

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

  font-size: 15px;

  line-height: 1.8;

}


/* light button */

.chemical-light-btn {

  margin-top: 32px;

  color: var(--krx-dark);

}


/* =========================================================
   24. CONTROL LIST
========================================================= */

.chemical-control-list {

  display: grid;

  gap: 12px;

}

.chemical-control-item {

  display: flex;

  align-items: center;

  gap: 18px;

  padding: 20px;

  border-radius: 18px;

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

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

  backdrop-filter: blur(10px);

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

}

.chemical-control-item:hover {

  transform: translateX(7px);

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

}

.chemical-control-icon {

  flex: 0 0 46px;

  width: 46px;
  height: 46px;

  display: flex;

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

  border-radius: 13px;

  color: #79d9d5;

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

  font-size: 18px;

}

.chemical-control-item strong {

  display: block;

  margin-bottom: 4px;

  color: var(--krx-white);

  font-size: 14px;

}

.chemical-control-item span {

  display: block;

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

  font-size: 11px;

  line-height: 1.5;

}


/* =========================================================
   25. APPLICATIONS
========================================================= */

.chemical-applications {

  background:
    radial-gradient(
      circle at 90% 20%,
      rgba(0,169,165,0.07),
      transparent 25%
    ),
    var(--krx-off-white);

}

.chemical-application-grid {

  display: grid;

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

  gap: 16px;

  margin-top: 65px;

}

.chemical-application-item {

  position: relative;

  min-height: 210px;

  padding: 25px;

  display: flex;

  flex-direction: column;

  justify-content: flex-end;

  border-radius: 20px;

  overflow: hidden;

  background: var(--krx-white);

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

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

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

}

.chemical-application-item::before {

  content: "";

  position: absolute;

  width: 130px;
  height: 130px;

  top: -55px;
  right: -45px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(0,169,165,0.16),
      transparent 68%
    );

}

.chemical-application-item:hover {

  transform: translateY(-8px);

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

}

.chemical-application-item > span {

  position: absolute;

  top: 22px;
  left: 24px;

  color: rgba(7,94,99,0.3);

  font-size: 10px;

  font-weight: 700;

  letter-spacing: 0.12em;

}

.chemical-application-item i {

  margin-bottom: 20px;

  color: var(--krx-accent);

  font-size: 27px;

}

.chemical-application-item strong {

  color: var(--krx-dark);

  font-size: 16px;

}


/* =========================================================
   26. CTA
========================================================= */

.krx-industry-cta {

  position: relative;

  padding: 35px 0 110px;

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

  overflow: hidden;

}

.krx-industry-cta-glow {

  position: absolute;

  width: 500px;
  height: 500px;

  right: -250px;
  bottom: -300px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(0,169,165,0.16),
      transparent 68%
    );

}

.krx-industry-cta-inner {

  position: relative;

  padding: 70px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 50px;

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

  overflow: hidden;

  color: var(--krx-white);

  background:
    radial-gradient(
      circle at 85% 20%,
      rgba(0,169,165,0.22),
      transparent 30%
    ),
    linear-gradient(
      135deg,
      #075e63,
      #043f44
    );

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

}

.krx-industry-cta-inner::after {

  content: "";

  position: absolute;

  width: 280px;
  height: 280px;

  right: -100px;
  bottom: -160px;

  border-radius: 50%;

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

}

.krx-industry-cta-inner h2 {

max-width: 760px;

margin: 0 0 18px;

font-size: clamp(38px, 4vw, 58px);

line-height: 1.02;

font-family: "Poppins", sans-serif;

font-weight: 700;

letter-spacing: -0.035em;
}

.krx-industry-cta-inner h2 span {

  display: block;

  color: #79d9d5;

}

.krx-industry-cta-inner p {

  max-width: 600px;

  margin: 0;

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

  font-size: 14px;

  line-height: 1.7;

}

.krx-industry-cta-inner
.krx-industry-eyebrow {

  color: #79d9d5;

}


.krx-industry-cta-btn {

  position: relative;

  z-index: 2;

  flex: 0 0 auto;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 12px;

  min-height: 56px;

  padding: 0 26px;

  border-radius: 999px;

  color: var(--krx-dark);

  background: var(--krx-white);

  font-size: 13px;

  font-weight: 700;

  white-space: nowrap;

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

}

.krx-industry-cta-btn:hover {

  color: var(--krx-dark);

  transform: translateY(-3px);

  box-shadow:
    0 18px 40px rgba(0,0,0,0.18);

}


/* =========================================================
   27. CHEMICAL PAGE MICRO DETAILS
========================================================= */

.chemical-page
.krx-industry-section
.krx-industry-eyebrow {

  color: var(--krx-accent);

}

.chemical-page
.krx-industry-dark-section
.krx-industry-eyebrow {

  color: #79d9d5;

}


/* =========================================================
   28. RESPONSIVE — LARGE TABLET
========================================================= */

@media (max-width: 1199px) {

  .krx-industry-hero {

    padding-top: 135px;

  }

  .krx-industry-title {

    font-size: clamp(
      44px,
      6vw,
      68px
    );

  }

  .chemical-control-panel {

    padding: 55px;

  }

  .chemical-application-grid {

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

  }

}


/* =========================================================
   29. RESPONSIVE — TABLET
========================================================= */

@media (max-width: 991px) {

  .krx-industry-hero {

    min-height: auto;

    padding:
      130px
      0
      90px;

  }

  .krx-industry-title {

    max-width: 700px;

  }

  .krx-industry-lead {

    max-width: 650px;

  }

  .krx-industry-hero-visual {

    width: min(
      100%,
      520px
    );

    margin:
      35px
      auto
      0;

  }

  .krx-industry-section {

    padding: 90px 0;

  }

  .chemical-flow {

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

    row-gap: 55px;

  }

  .chemical-flow-line {

    display: none;

  }

  .chemical-value-strip {

    grid-template-columns:
      1fr;

  }

  .chemical-value-item {

    min-height: auto;

  }

  .chemical-value-item
  + .chemical-value-item {

    border-left: 0;

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

  }

  .chemical-control-panel {

    padding: 50px;

  }

  .chemical-control-list {

    margin-top: 20px;

  }

  .chemical-application-grid {

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

  }

  .krx-industry-cta-inner {

    padding: 50px;

    flex-direction: column;

    align-items: flex-start;

  }

}


/* =========================================================
   30. RESPONSIVE — MOBILE
========================================================= */

@media (max-width: 767px) {

  .krx-industry-hero {

    padding:
      115px
      0
      70px;

  }

  .krx-industry-breadcrumb {

    margin-bottom: 22px;

    font-size: 10px;

  }

  .krx-industry-title {

    font-size: clamp(
      40px,
      12vw,
      58px
    );

    line-height: 1;

  }

  .krx-industry-lead {

    font-size: 15px;

    line-height: 1.7;

  }

  .krx-industry-actions {

    align-items: flex-start;

    flex-direction: column;

    gap: 18px;

  }

  .krx-industry-btn {

    width: 100%;

  }

  .krx-industry-hero-visual {

    width: 100%;

    max-width: 420px;

    aspect-ratio: 1 / 1;

    margin-top: 25px;

  }

  .chemical-core {

    width: 155px;
    min-height: 155px;

    padding: 20px;

  }

  .chemical-core-icon {

    width: 42px;
    height: 42px;

    margin-bottom: 10px;

  }

  .chemical-core strong {

    font-size: 14px;

  }

  .chemical-node {

    min-width: auto;

    padding: 9px 11px;

    font-size: 9px;

  }

  .chemical-node i {

    font-size: 13px;

  }

  .chemical-node-one {

    top: 5%;
    left: 0;

  }

  .chemical-node-two {

    top: 5%;
    right: 0;

  }

  .chemical-node-three {

    bottom: 5%;
    left: 0;

  }

  .chemical-node-four {

    bottom: 5%;
    right: 0;

  }

  .krx-industry-section {

    padding: 75px 0;

  }

  .krx-industry-heading {

    font-size: clamp(
      34px,
      10vw,
      48px
    );

  }

  .krx-industry-description {

    font-size: 14px;

  }

  .chemical-value-strip {

    margin-top: 50px;

  }

  .chemical-value-item {

    padding:
      25px
      0;

  }

  .chemical-flow {

    grid-template-columns:
      1fr 1fr;

    gap: 45px 20px;

    margin-top: 55px;

  }

  .chemical-flow-icon {

    width: 70px;
    height: 70px;

    font-size: 19px;

  }

  .chemical-flow-step h3 {

    font-size: 15px;

  }

  .chemical-flow-step p {

    font-size: 11px;

  }

  .chemical-control-section {

    padding: 70px 0;

  }

  .chemical-control-panel {

    padding: 35px 25px;

    border-radius: 25px;

  }

  .chemical-control-panel h2 {

    font-size: 38px;

  }

  .chemical-control-item {

    padding: 15px;

  }

  .chemical-application-grid {

    grid-template-columns:
      1fr 1fr;

    gap: 12px;

    margin-top: 45px;

  }

  .chemical-application-item {

    min-height: 170px;

    padding: 20px;

  }

  .chemical-application-item i {

    font-size: 23px;

  }

  .krx-industry-cta {

    padding:
      20px
      0
      75px;

  }

  .krx-industry-cta-inner {

    padding: 35px 25px;

    border-radius: 25px;

  }

  .krx-industry-cta-inner h2 {

    font-size: 38px;

  }

  .krx-industry-cta-btn {

    width: 100%;

  }

}


/* =========================================================
   31. SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

  .krx-industry-hero {

    padding-top: 105px;

  }

  .krx-industry-title {

    font-size: 40px;

  }

  .krx-industry-hero-visual {

    margin-top: 15px;

  }

  .chemical-core {

    width: 135px;
    min-height: 135px;

  }

  .chemical-core-icon {

    width: 36px;
    height: 36px;

    font-size: 16px;

  }

  .chemical-core strong {

    font-size: 12px;

  }

  .chemical-core span {

    font-size: 8px;

  }

  .chemical-node {

    padding: 7px 9px;

    gap: 6px;

  }

  .chemical-node span {

    font-size: 8px;

  }

  .chemical-flow {

    grid-template-columns:
      1fr;

  }

  .chemical-flow-step {

    max-width: 270px;

    margin: auto;

  }

  .chemical-application-grid {

    grid-template-columns:
      1fr;

  }

  .chemical-application-item {

    min-height: 145px;

  }

}


/* =========================================================
   32. REDUCED MOTION
========================================================= */

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

  *,
  *::before,
  *::after {

    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;

  }

}