@font-face {
  font-family: "Nova Sans";
  src: url("../fonts/NovaSans-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Nova Sans";
  src: url("../fonts/NovaSans-Bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --page: #020607;
  --page-deep: #010405;
  --teal: #43c3bf;
  --teal-bright: #5bddd7;
  --white: #f4f7f7;
  --copy: #c5cecf;
  --muted: #93a1a2;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  background: var(--page-deep);
  color: var(--white);
  font-family: "Nova Sans", "DejaVu Sans", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

a:visited { color: inherit; }

.hero {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background: #010405;
}

.hero::after {
  position: absolute;
  z-index: -1;
  right: 0;
  bottom: -1px;
  left: 0;
  height: clamp(130px, 15vw, 210px);
  background: linear-gradient(180deg, transparent 0%, rgba(1, 4, 5, 0.36) 46%, #010405 100%);
  content: "";
  pointer-events: none;
}

.hero__media,
.hero__shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero__media {
  z-index: -3;
  object-fit: cover;
}

.hero__shade {
  z-index: -2;
  background:
    linear-gradient(90deg, rgba(1, 4, 5, 0.99) 0%, rgba(1, 4, 5, 0.91) 28%, rgba(1, 4, 5, 0.38) 52%, rgba(1, 4, 5, 0.02) 74%),
    linear-gradient(180deg, rgba(1, 4, 5, 0.75) 0%, transparent 28%, transparent 63%, rgba(1, 4, 5, 0.9) 100%);
}

.site-header {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 260px 1fr 180px;
  align-items: center;
  width: 100%;
  height: 82px;
  padding: 0 clamp(34px, 4.8vw, 70px);
  border-bottom: 1px solid rgba(132, 232, 226, 0.13);
  background: rgba(1, 4, 5, 0.64);
  backdrop-filter: blur(11px);
}

.brand {
  width: 220px;
}

.brand img {
  display: block;
  width: 100%;
  height: auto;
}

.nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(24px, 2.8vw, 43px);
}

.nav a {
  position: relative;
  padding: 32px 0 29px;
  color: #c7d1d2;
  font-size: 0.78rem;
  font-weight: 500;
}

.nav a.is-active {
  color: var(--teal-bright);
}

.nav a.is-active::after {
  position: absolute;
  right: 0;
  bottom: 13px;
  left: 0;
  height: 1px;
  background: var(--teal-bright);
  content: "";
}

.header-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 178px;
  height: 46px;
  padding: 0 18px 0 24px;
  border: 1px solid rgba(91, 221, 215, 0.62);
  border-radius: 4px;
  background: rgba(7, 17, 19, 0.5);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  transition: border-color 220ms ease, background-color 220ms ease, box-shadow 220ms ease;
}

.header-action:hover,
.header-action:focus-visible {
  border-color: rgba(91, 221, 215, 0.95);
  background: rgba(22, 79, 80, 0.28);
  box-shadow: 0 0 24px rgba(67, 195, 191, 0.12);
  outline: none;
}

.header-action svg,
.button svg {
  flex: 0 0 auto;
  width: 18px;
  fill: none;
  stroke: var(--teal-bright);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.45;
}

.hero__content {
  display: flex;
  align-items: center;
  min-height: calc(100svh - 82px);
  padding: 34px clamp(42px, 6.1vw, 88px) 70px;
}

.hero__content > div {
  position: relative;
  max-width: 560px;
  padding-left: 28px;
}

.hero__rule {
  width: 2px;
  height: 262px;
  background: rgba(91, 221, 215, 0.88);
}

.hero__eyebrow,
.hero__tagline {
  margin: 0;
  font-size: 0.63rem;
  font-weight: 600;
  letter-spacing: 0.22em;
}

.hero__eyebrow {
  color: var(--teal-bright);
}

.hero h1 {
  margin: 64px 0 34px;
  font-size: clamp(3.2rem, 4.3vw, 4rem);
  font-weight: 400;
  letter-spacing: -0.045em;
  line-height: 0.96;
  text-shadow: 0 4px 16px rgba(0, 0, 0, 0.7);
}

.hero h1 em {
  display: block;
  margin-top: 8px;
  color: var(--teal-bright);
  font-style: normal;
}

.hero__tagline {
  color: #b5c1c2;
}

.hero__actions {
  display: flex;
  gap: 14px;
  margin-top: 42px;
}

.button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 50px;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  transition: border-color 220ms ease, background-color 220ms ease, box-shadow 220ms ease, transform 220ms ease;
}

.button:hover,
.button:focus-visible {
  transform: translateY(-2px);
  outline: none;
}

.button--primary:hover,
.button--primary:focus-visible {
  border-color: rgba(91, 221, 215, 1);
  background: linear-gradient(135deg, rgba(72, 222, 215, 0.34), rgba(14, 95, 98, 0.22));
  box-shadow: 0 0 28px rgba(67, 195, 191, 0.15);
}

.button--secondary:hover,
.button--secondary:focus-visible {
  border-color: rgba(231, 241, 241, 0.5);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.035));
}

.button--primary {
  width: 205px;
  padding: 0 18px 0 22px;
  border: 1px solid rgba(91, 221, 215, 0.9);
  background: linear-gradient(135deg, rgba(72, 222, 215, 0.23), rgba(14, 95, 98, 0.16));
  box-shadow: 0 0 18px rgba(67, 195, 191, 0.08);
}

.button--secondary {
  width: 170px;
  padding: 0 17px 0 22px;
  border: 1px solid rgba(231, 241, 241, 0.3);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.02));
}

.hero__meta {
  position: absolute;
  bottom: 58px;
  left: clamp(42px, 6.1vw, 88px);
  margin: 0;
  color: rgba(204, 218, 219, 0.72);
  font-size: 0.59rem;
  font-weight: 700;
  letter-spacing: 0.2em;
}

.hero__scroll {
  position: absolute;
  right: clamp(42px, 6.1vw, 88px);
  bottom: 58px;
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 1px solid rgba(155, 229, 226, 0.25);
  border-radius: 50%;
  background: rgba(2, 9, 10, 0.54);
  transition: border-color 220ms ease, background-color 220ms ease, transform 220ms ease;
}

.hero__scroll svg {
  width: 19px;
  fill: none;
  stroke: var(--teal-bright);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.35;
}

.hero__scroll:hover,
.hero__scroll:focus-visible {
  transform: translateY(3px);
  border-color: rgba(91, 221, 215, 0.7);
  background: rgba(23, 91, 91, 0.2);
  outline: none;
}

/*
 * The page flows directly from the Hero into this section.
 * No border, card, image or hard background break is used.
 */
.why {
  position: relative;
  display: grid;
  min-height: 500px;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  margin-top: -1px;
  background:
    radial-gradient(760px 320px at 50% -15%, rgba(56, 193, 187, 0.055), transparent 72%),
    linear-gradient(180deg, #010405 0%, #020708 57%, #010608 100%);
}

.why__ambient {
  position: absolute;
  z-index: -1;
  top: 27%;
  left: 50%;
  width: min(76vw, 1050px);
  height: 230px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: rgba(43, 191, 184, 0.026);
  filter: blur(74px);
  pointer-events: none;
}

.why__content {
  width: min(100% - 48px, 980px);
  padding: 118px 0 124px;
  text-align: center;
}

.why h2 {
  margin: 0;
  color: var(--teal-bright);
  font-size: clamp(2.25rem, 3.05vw, 2.8rem);
  font-weight: 550;
  letter-spacing: -0.035em;
  line-height: 1.12;
  text-shadow: 0 0 24px rgba(67, 195, 191, 0.075);
}

.why p {
  max-width: 900px;
  margin: 32px auto 0;
  color: var(--copy);
  font-size: 1.04rem;
  font-weight: 400;
  letter-spacing: -0.012em;
  line-height: 1.78;
  text-align: center;
}

/*
 * Live HTML/CSS mirror-glass cards. The reference image is not used here:
 * reflections, neon edges and hover response are generated by the browser.
 */
.metrics {
  position: relative;
  display: grid;
  min-height: 570px;
  place-items: start center;
  overflow: hidden;
  isolation: isolate;
  padding: 24px clamp(34px, 5vw, 72px) 142px;
  background:
    radial-gradient(900px 360px at 50% 33%, rgba(118, 143, 145, 0.018), transparent 70%),
    linear-gradient(180deg, #010608 0%, #010609 45%, #010405 100%);
}

.metrics::before {
  position: absolute;
  z-index: -1;
  top: 68px;
  left: 50%;
  width: min(92vw, 1320px);
  height: 330px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: rgba(29, 177, 177, 0.024);
  filter: blur(72px);
  content: "";
  pointer-events: none;
}

.metrics__network {
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: 0.27;
  pointer-events: none;
}

.metrics__network svg {
  display: block;
  width: 100%;
  height: 100%;
}

.metrics__network path {
  fill: none;
  stroke: rgba(67, 195, 191, 0.27);
  stroke-width: 0.7;
}

.metrics__nodes {
  fill: var(--teal-bright);
  filter: drop-shadow(0 0 6px rgba(91, 221, 215, 0.55));
}

.metrics__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 1.55vw, 24px);
  width: min(100%, 1232px);
}

.metric-card {
  position: relative;
  display: flex;
  min-height: 386px;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  padding: 45px 30px 38px;
  border: 1px solid rgba(91, 221, 215, 0.48);
  border-radius: 24px;
  isolation: isolate;
  background:
    linear-gradient(138deg, rgba(238, 255, 255, 0.07) 0%, rgba(210, 220, 220, 0.016) 25%, transparent 48%),
    linear-gradient(158deg, rgba(18, 21, 22, 0.6), rgba(3, 5, 6, 0.9) 74%);
  box-shadow:
    0 22px 42px rgba(0, 0, 0, 0.58),
    0 0 11px rgba(67, 195, 191, 0.07),
    inset 0 1px 0 rgba(225, 255, 253, 0.16),
    inset 0 0 26px rgba(9, 58, 61, 0.12);
  -webkit-backdrop-filter: blur(18px) saturate(118%);
  backdrop-filter: blur(18px) saturate(118%);
  transition:
    transform 360ms cubic-bezier(0.2, 0.75, 0.22, 1),
    border-color 360ms ease,
    background-color 360ms ease,
    box-shadow 360ms ease;
}

.metric-card::before {
  position: absolute;
  z-index: -1;
  top: -32%;
  left: -72%;
  width: 94%;
  height: 150%;
  transform: rotate(17deg);
  background: linear-gradient(90deg, transparent, rgba(226, 255, 254, 0.09), rgba(106, 239, 233, 0.018), transparent);
  content: "";
  opacity: 0.75;
  transition: transform 620ms ease, opacity 360ms ease;
  pointer-events: none;
}

.metric-card::after {
  position: absolute;
  top: -1px;
  left: 16%;
  width: 46%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(222, 255, 253, 0.92), rgba(91, 221, 215, 0.18), transparent);
  box-shadow: 0 0 12px rgba(91, 221, 215, 0.28);
  content: "";
  pointer-events: none;
}

.metric-card:hover,
.metric-card:focus-visible {
  transform: translateY(-7px);
  border-color: rgba(91, 221, 215, 0.78);
  background-color: rgba(33, 172, 171, 0.075);
  box-shadow:
    0 28px 54px rgba(0, 0, 0, 0.64),
    0 0 24px rgba(67, 195, 191, 0.13),
    inset 0 1px 0 rgba(225, 255, 253, 0.24),
    inset 0 0 42px rgba(26, 143, 143, 0.075);
  outline: none;
}

.metric-card:hover::before,
.metric-card:focus-visible::before {
  transform: translateX(210%) rotate(17deg);
  opacity: 0.95;
}

.metric-card__icon {
  position: relative;
  display: grid;
  width: 64px;
  height: 64px;
  place-items: center;
  margin-bottom: 22px;
  color: var(--teal-bright);
}

.metric-card__icon::before {
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(91, 221, 215, 0.085), transparent 68%);
  filter: blur(5px);
  content: "";
}

.metric-card__icon svg {
  position: relative;
  width: 55px;
  height: 55px;
  overflow: visible;
  fill: rgba(91, 221, 215, 0.045);
  stroke: rgba(145, 245, 240, 0.9);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.35;
  filter:
    drop-shadow(0 0 3px rgba(91, 221, 215, 0.38))
    drop-shadow(0 0 10px rgba(20, 143, 145, 0.12));
  transition: filter 360ms ease, transform 360ms ease;
}

.metric-card .icon-fill {
  fill: rgba(91, 221, 215, 0.15);
  stroke: rgba(208, 255, 252, 0.72);
}

.metric-card:hover .metric-card__icon svg,
.metric-card:focus-visible .metric-card__icon svg {
  transform: translateY(-1px);
  filter:
    drop-shadow(0 0 5px rgba(91, 221, 215, 0.52))
    drop-shadow(0 0 15px rgba(20, 143, 145, 0.2));
}

.metric-card h3 {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  margin: 0;
  line-height: 1;
}

.metric-card h3 strong {
  color: var(--teal-bright);
  font-size: clamp(2.25rem, 2.8vw, 2.65rem);
  font-weight: 700;
  letter-spacing: -0.055em;
  text-shadow: 0 0 20px rgba(67, 195, 191, 0.12);
}

.metric-card h3 span {
  color: #d8e0e0;
  font-size: 0.96rem;
  font-weight: 400;
  letter-spacing: -0.015em;
}

.metric-card p {
  max-width: 236px;
  margin: 27px auto 0;
  color: rgba(204, 215, 216, 0.9);
  font-size: 0.96rem;
  font-weight: 400;
  letter-spacing: -0.014em;
  line-height: 1.68;
  text-align: center;
}

.product-intro {
  position: relative;
  min-height: clamp(430px, 33.333vw, 600px);
  overflow: hidden;
  isolation: isolate;
  background: #010405;
}

.product-intro__media,
.product-intro__shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.product-intro__media {
  z-index: -2;
  object-fit: cover;
  object-position: center;
}

.product-intro__shade {
  z-index: -1;
  background:
    linear-gradient(180deg, #010405 0%, rgba(1, 4, 5, 0.04) 12%, transparent 30%, rgba(1, 4, 5, 0.08) 78%, #010405 100%),
    linear-gradient(90deg, transparent 45%, rgba(1, 5, 7, 0.03) 62%, rgba(1, 5, 7, 0.22) 100%);
  pointer-events: none;
}

.product-intro__content {
  display: grid;
  width: 100%;
  min-height: clamp(430px, 33.333vw, 600px);
  place-items: center;
  padding-left: 50%;
  padding-right: clamp(34px, 5vw, 72px);
}

.product-intro h2 {
  margin: 0;
  color: var(--white);
  font-size: clamp(2.25rem, 3.05vw, 2.8rem);
  font-weight: 550;
  letter-spacing: -0.035em;
  line-height: 1.12;
  text-shadow: 0 4px 22px rgba(0, 0, 0, 0.82);
}

.product-categories {
  position: relative;
  min-height: 650px;
  overflow: hidden;
  isolation: isolate;
  margin-top: -1px;
  padding: 112px clamp(34px, 5vw, 72px) 120px;
  background: #010405;
}

.product-categories__background,
.product-categories__veil {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.product-categories__background {
  display: none;
}

.product-categories__veil {
  z-index: -2;
  background:
    radial-gradient(ellipse at center 54%, rgba(24, 184, 196, 0.025), transparent 54%),
    linear-gradient(180deg, #010405 0%, #010608 52%, #010405 100%);
  pointer-events: none;
}

.product-categories__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 1.55vw, 24px);
  width: min(100%, 1232px);
  margin: 0 auto;
}

.product-category {
  position: relative;
  display: grid;
  min-width: 0;
  grid-template-rows: 390px auto;
  align-items: end;
  padding: 0 0 24px;
  border: 1px solid transparent;
  border-radius: 22px;
  background: transparent;
  transition:
    transform 360ms cubic-bezier(0.2, 0.76, 0.22, 1),
    border-color 360ms ease,
    background-color 360ms ease,
    box-shadow 360ms ease;
}

.product-category:not(:first-child)::before {
  display: none;
}

.product-category::after {
  position: absolute;
  z-index: -1;
  right: 13%;
  bottom: 72px;
  left: 13%;
  height: 48px;
  border-radius: 50%;
  background: rgba(24, 198, 194, 0.1);
  filter: blur(24px);
  content: "";
  opacity: 0.3;
  transition: opacity 360ms ease, transform 360ms ease;
  pointer-events: none;
}

.product-category__visual {
  position: relative;
  display: grid;
  width: 100%;
  height: 390px;
  place-items: end center;
  perspective: 900px;
}

.product-category__frame {
  position: absolute;
  z-index: 0;
  inset: 32px 0 36px;
  overflow: hidden;
  border: 1px solid rgba(112, 233, 237, 0.54);
  border-radius: 20px;
  background:
    linear-gradient(132deg, rgba(222, 255, 255, 0.08), transparent 30%, rgba(26, 139, 151, 0.025) 68%, rgba(204, 253, 255, 0.045)),
    rgba(1, 9, 13, 0.19);
  box-shadow:
    0 24px 44px rgba(0, 0, 0, 0.22),
    0 0 9px rgba(60, 211, 218, 0.13),
    0 0 22px rgba(36, 183, 192, 0.07),
    inset 0 1px 0 rgba(229, 255, 254, 0.18),
    inset 0 -1px 0 rgba(23, 151, 160, 0.15);
  -webkit-backdrop-filter: blur(3px) saturate(115%);
  backdrop-filter: blur(3px) saturate(115%);
  transform: translateZ(-1px);
  transition: border-color 360ms ease, background-color 360ms ease, box-shadow 360ms ease;
  pointer-events: none;
}

.product-category__frame::before {
  position: absolute;
  top: -16%;
  left: -58%;
  width: 54%;
  height: 138%;
  transform: rotate(13deg);
  background: linear-gradient(90deg, transparent, rgba(234, 255, 255, 0.12), rgba(84, 223, 229, 0.018), transparent);
  content: "";
  transition: transform 650ms ease;
}

.product-category__frame::after {
  position: absolute;
  top: -1px;
  left: 18%;
  width: 45%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(227, 255, 255, 0.9), rgba(74, 222, 228, 0.2), transparent);
  box-shadow: 0 0 10px rgba(61, 218, 224, 0.34);
  content: "";
}

.product-category__visual > img {
  position: relative;
  z-index: 2;
  display: block;
  width: 88%;
  height: 83%;
  margin-bottom: 26px;
  object-fit: contain;
  object-position: center bottom;
  filter:
    drop-shadow(0 20px 13px rgba(0, 0, 0, 0.54))
    drop-shadow(0 0 8px rgba(67, 195, 191, 0.08));
  transform: scale(0.88) translateZ(0);
  transform-origin: center bottom;
  transition: transform 430ms cubic-bezier(0.2, 0.76, 0.22, 1), filter 430ms ease;
}

.product-category--molecule .product-category__visual > img {
  width: 78%;
  height: 86%;
  transform: scale(0.89) translateZ(0);
}

.product-category--pellets .product-category__visual > img {
  width: 97%;
  height: 68%;
  margin-bottom: 31px;
  transform: scale(0.95) translateZ(0);
}

.product-category--additives .product-category__visual > img,
.product-category--lubricants .product-category__visual > img {
  width: 91%;
  height: 82%;
  transform: scale(0.89) translateZ(0);
}

.product-category__reflection {
  position: absolute;
  z-index: 1;
  right: 7%;
  bottom: -54px;
  left: 7%;
  height: 84px;
  overflow: hidden;
  opacity: 0.17;
  filter: blur(1.9px);
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.24) 48%, transparent 92%);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.24) 48%, transparent 92%);
  pointer-events: none;
}

.product-category__reflection img {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 390px;
  object-fit: contain;
  object-position: center bottom;
  transform: scaleY(-0.23);
  transform-origin: center bottom;
}

.product-category__reflection::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(67, 195, 191, 0.07), transparent 70%);
  content: "";
}

.product-category h3 {
  position: relative;
  z-index: 2;
  margin: 18px 0 0;
  color: #eef4f4;
  font-size: clamp(0.94rem, 1.15vw, 1.06rem);
  font-weight: 500;
  letter-spacing: -0.018em;
  line-height: 1.35;
  text-align: center;
  text-shadow: 0 3px 15px rgba(0, 0, 0, 0.86);
  transition: color 320ms ease, text-shadow 320ms ease;
}

.product-category:hover,
.product-category:focus-visible {
  transform: translateY(-7px);
  border-color: rgba(91, 221, 215, 0.23);
  background: linear-gradient(150deg, rgba(199, 255, 252, 0.045), rgba(23, 111, 111, 0.035) 55%, rgba(1, 4, 5, 0.03));
  box-shadow:
    0 24px 44px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(217, 255, 253, 0.08),
    0 0 24px rgba(45, 191, 186, 0.045);
  outline: none;
}

.product-category:hover .product-category__frame,
.product-category:focus-visible .product-category__frame {
  border-color: rgba(88, 230, 235, 0.78);
  background-color: rgba(18, 137, 150, 0.055);
  box-shadow:
    0 28px 50px rgba(0, 0, 0, 0.28),
    0 0 25px rgba(49, 211, 219, 0.16),
    inset 0 1px 0 rgba(229, 255, 254, 0.24),
    inset 0 -1px 0 rgba(25, 143, 142, 0.16);
}

.product-category:hover .product-category__frame::before,
.product-category:focus-visible .product-category__frame::before {
  transform: translateX(295%) rotate(13deg);
}

.product-category:hover::after,
.product-category:focus-visible::after {
  transform: scale(1.08);
  opacity: 0.58;
}

.product-category:hover .product-category__visual > img,
.product-category:focus-visible .product-category__visual > img {
  filter:
    drop-shadow(0 24px 18px rgba(0, 0, 0, 0.5))
    drop-shadow(0 0 13px rgba(71, 213, 207, 0.12));
  transform: scale(0.925) translateY(-4px) translateZ(0);
}

.product-category--pellets:hover .product-category__visual > img,
.product-category--pellets:focus-visible .product-category__visual > img {
  transform: scale(0.99) translateY(-4px) translateZ(0);
}

.product-category--additives:hover .product-category__visual > img,
.product-category--additives:focus-visible .product-category__visual > img,
.product-category--lubricants:hover .product-category__visual > img,
.product-category--lubricants:focus-visible .product-category__visual > img {
  transform: scale(0.93) translateY(-4px) translateZ(0);
}

.product-category:hover h3,
.product-category:focus-visible h3 {
  color: var(--teal-bright);
  text-shadow: 0 0 18px rgba(67, 195, 191, 0.15);
}

@media (max-width: 900px) {
  .site-header {
    grid-template-columns: 1fr auto;
  }

  .nav {
    display: none;
  }

  .header-action {
    width: 160px;
  }

  .why {
    min-height: 460px;
  }

  .metrics {
    padding-top: 20px;
  }

  .metrics__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: min(100%, 690px);
  }

  .product-intro,
  .product-intro__content {
    min-height: 430px;
  }

  .product-categories {
    padding-top: 86px;
    padding-bottom: 100px;
  }

  .product-categories__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: min(100%, 720px);
  }

  .product-category {
    grid-template-rows: 360px auto;
  }

  .product-category__visual {
    height: 360px;
  }

  .product-category:nth-child(3)::before {
    display: none;
  }
}

@media (max-width: 620px) {
  .site-header {
    height: 70px;
    padding: 0 20px;
  }

  .brand {
    width: 154px;
  }

  .header-action {
    width: auto;
    height: 40px;
    padding: 0 13px;
  }

  .header-action span {
    display: none;
  }

  .hero__content {
    min-height: calc(100svh - 70px);
    padding: 20px 24px 54px;
  }

  .hero__rule {
    height: 230px;
  }

  .hero__content > div {
    padding-left: 20px;
  }

  .hero h1 {
    margin-top: 46px;
    font-size: clamp(2.65rem, 13vw, 3.35rem);
  }

  .hero__actions {
    flex-direction: column;
  }

  .hero__meta {
    display: none;
  }

  .hero__scroll {
    right: 22px;
    bottom: 24px;
    width: 43px;
    height: 43px;
  }

  .button--primary,
  .button--secondary {
    width: min(100%, 220px);
  }

  .why {
    min-height: 430px;
  }

  .why__content {
    width: min(100% - 40px, 980px);
    padding: 88px 0 98px;
  }

  .why h2 {
    font-size: clamp(2rem, 10vw, 2.35rem);
  }

  .why p {
    margin-top: 26px;
    font-size: 1rem;
    line-height: 1.72;
  }

  .metrics {
    padding: 18px 20px 96px;
  }

  .metrics__grid {
    grid-template-columns: 1fr;
    width: min(100%, 390px);
    gap: 18px;
  }

  .metric-card {
    min-height: 356px;
    padding: 39px 27px 34px;
  }

  .product-intro {
    min-height: 470px;
  }

  .product-intro__media {
    object-position: 33% center;
  }

  .product-intro__shade {
    background:
      linear-gradient(180deg, #010405 0%, rgba(1, 4, 5, 0.02) 13%, transparent 30%, rgba(1, 4, 5, 0.28) 72%, #010405 100%),
      linear-gradient(0deg, rgba(1, 5, 7, 0.72), transparent 54%);
  }

  .product-intro__content {
    min-height: 470px;
    align-items: end;
    padding: 0 24px 66px;
  }

  .product-categories {
    padding: 66px 20px 82px;
  }

  .product-categories__grid {
    grid-template-columns: 1fr;
    width: min(100%, 390px);
    gap: 10px;
  }

  .product-category {
    grid-template-rows: 355px auto;
    padding-right: 14px;
    padding-left: 14px;
  }

  .product-category__visual {
    height: 355px;
  }

  .product-category::before {
    display: none;
  }
}

/* Mobile system v3 — shared by every NovaChemix page. */
@media (max-width: 900px) {
  html, body { width: 100%; max-width: 100%; overflow-x: clip; }
  img, video, svg { max-width: 100%; }
  .site-header {
    position: relative;
    z-index: 50;
    grid-template-columns: 1fr auto;
    height: 70px;
    padding: 0 20px;
    background: rgba(1, 6, 7, .92);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
  }
  .brand { width: clamp(154px, 46vw, 190px); }
  .site-header > .nav,
  .site-header > .header-action { display: none !important; }
  .mobile-menu-toggle { display: grid !important; }
  .mobile-nav { z-index: 49; }
  .mobile-nav a,
  .mobile-nav a:link,
  .mobile-nav a:visited {
    color: #d7e1e2 !important;
    -webkit-tap-highlight-color: rgba(91, 221, 215, .12);
  }
  .mobile-nav a:hover,
  .mobile-nav a:focus-visible,
  .mobile-nav a:active,
  .mobile-nav a.is-active,
  .mobile-nav a[aria-current="page"] {
    color: #65e4dd !important;
  }

  .button, .header-action, .product-hero__button, .solvents-hero__button {
    max-width: 100%;
    min-height: 46px;
  }

  .product-category,
  .product-category:visited,
  .product-category h3,
  .product-category:visited h3 { color: #eef4f4; }
  .product-category__visual > img,
  .product-category__reflection img {
    filter: drop-shadow(0 18px 15px rgba(0, 0, 0, .55)) drop-shadow(0 0 8px rgba(67, 195, 191, .1)) !important;
    mix-blend-mode: normal !important;
  }
  .product-category__frame {
    background: linear-gradient(135deg, rgba(220,255,255,.065), transparent 34%, rgba(29,126,135,.028) 72%), rgba(1,9,13,.24) !important;
  }

  .site-footer { overflow: hidden; }
  .site-footer__inner { width: 100%; }
  .site-footer__brand, .footer-column, .footer-contact { min-width: 0; }
}

@media (max-width: 620px) {
  body { min-width: 0; }

  .hero { min-height: auto !important; padding-top: 0; }
  .hero__media {
    position: relative;
    z-index: 0;
    inset: auto;
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    min-height: 0;
    max-height: none;
    object-fit: contain;
    object-position: center;
    background: #010405;
  }
  .hero__shade {
    top: 70px;
    height: min(64vw, 280px);
    min-height: 0;
    max-height: none;
    background: linear-gradient(180deg, transparent 55%, #010405 100%);
  }
  .hero__content {
    min-height: 0;
    padding: 46px 22px 78px;
    background: linear-gradient(180deg, #010405, #020708);
  }
  .hero__content > div { max-width: 100%; }
  .hero__eyebrow { font-size: .59rem; letter-spacing: .17em; }
  .hero h1 { margin: 22px 0 18px; font-size: clamp(2rem, 10vw, 2.65rem); line-height: 1.02; }
  .hero__tagline { font-size: .88rem; line-height: 1.65; }
  .hero__actions { width: 100%; gap: 12px; align-items: stretch; flex-direction: column; }
  .hero__actions .button { width: 100%; }
  .hero__meta { position: static; margin-top: 26px; line-height: 1.6; }

  .why { padding: 84px 22px 58px; }
  .why__inner { width: 100%; }
  .why h2 { font-size: clamp(1.9rem, 8.5vw, 2.45rem); }
  .why p { font-size: .9rem; line-height: 1.8; }

  .metrics { padding: 28px 20px 88px; }
  .metrics__grid { grid-template-columns: 1fr; gap: 16px; width: 100%; }
  .metric-card { min-height: 250px; padding: 30px 26px; }

  .product-intro { min-height: 300px; }
  .product-intro__media { height: 300px; object-fit: cover; object-position: 40% center !important; }
  .product-intro__content { min-height: 300px; padding: 0 22px 42px; }
  .product-intro h2 { font-size: clamp(2rem, 10vw, 2.75rem); }
  .product-categories { padding: 54px 18px 86px; }
  .product-categories__grid { width: 100%; max-width: 370px; gap: 22px; }
  .product-category { width: 100%; min-height: 350px; padding: 0 10px 22px; }
  .product-category__visual { height: 294px !important; }
  .product-category__frame { inset: 16px 0 24px; }
  .product-category__visual > img,
  .product-category--molecule .product-category__visual > img,
  .product-category--pellets .product-category__visual > img,
  .product-category--additives .product-category__visual > img,
  .product-category--lubricants .product-category__visual > img {
    top: 50%; left: 50%; width: 78%; height: 72%; margin: 0;
    object-fit: contain; object-position: center;
    transform: translate3d(-50%, -50%, 0) scale(.9) !important;
  }
  .product-category--pellets .product-category__visual > img { width: 90%; height: 62%; }
  .product-category h3 { margin-top: 14px; font-size: 1rem; }

  .jiyi__inner { width: calc(100% - 36px); padding: 54px 0 76px; }
  .jiyi__visual { height: 310px; }
  .jiyi__medallion { width: 250px; height: 250px; }
  .jiyi__reflection { width: 250px; }
  .jiyi__content { padding-top: 20px; }
  .jiyi__content h2 { font-size: clamp(1.85rem, 8vw, 2.35rem); }
  .jiyi__tags { gap: 8px; }

  .partners { min-height: 0; padding: 78px 20px; }
  .partners__row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 18px; margin-top: 44px; }
  .partners__row a { min-width: 0; }

  .site-footer { padding: 62px 22px 0; }
  .site-footer__inner { grid-template-columns: 1fr; gap: 40px; }
  .site-footer__bottom { height: auto; min-height: 112px; padding: 24px 0; }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* Mobile Home hero: preserve the complete 16:9 film frame instead of cropping it. */
@media (max-width: 620px) {
  .hero {
    min-height: auto;
    background:
      radial-gradient(circle at 72% 20%, rgba(44, 193, 188, .10), transparent 42%),
      #010405;
  }

  .hero__media {
    top: 70px;
    bottom: auto;
    width: 100%;
    height: 56.25vw;
    min-height: 202px;
    max-height: 244px;
    object-fit: contain;
    object-position: center center !important;
    background: #010405;
    transform: none !important;
    animation: none !important;
  }

  .hero__shade {
    top: 70px;
    bottom: auto;
    height: calc(56.25vw + 88px);
    min-height: 290px;
    max-height: 332px;
    background:
      linear-gradient(180deg, rgba(1,4,5,.08), transparent 58%, #010405 100%),
      linear-gradient(90deg, rgba(1,4,5,.24), transparent 38%, transparent 72%, rgba(1,4,5,.16));
    animation: none;
  }

  .hero__content {
    align-items: flex-start;
    min-height: auto;
    padding: calc(clamp(202px, 56.25vw, 244px) + 52px) 24px 82px;
  }

  .hero__rule { display: none; }
  .hero__content > div { width: 100%; padding-left: 0 !important; }
  .hero h1 { margin: 24px 0 22px; font-size: clamp(2.25rem, 11.5vw, 2.95rem); }
  .hero__actions { margin-top: 30px; }
  .hero__scroll { display: none; }

  .product-intro__media {
    object-fit: cover;
    object-position: center center !important;
  }

  .product-category {
    grid-template-rows: 285px auto !important;
  }

  .product-category__visual {
    width: 100%;
    height: 285px !important;
  }

  .product-category__visual > img {
    width: 100%;
    height: 100%;
    object-fit: contain !important;
    object-position: center !important;
    transform: translate3d(-50%, -50%, 0) scale(.86) !important;
  }
}

/* Home products — isolated mobile correction. */
@media (max-width: 620px) {
  .product-intro {
    min-height: 430px;
    background: #010405;
  }

  .product-intro__media {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 33% center !important;
    transform: none !important;
    animation: none !important;
  }

  .product-intro__content {
    min-height: 430px;
    padding: 0 24px 58px;
  }

  .product-categories {
    padding: 66px 20px 88px;
    background: #010405;
  }

  .product-categories__grid {
    grid-template-columns: 1fr;
    gap: 18px;
    width: min(100%, 380px);
  }

  .product-category {
    grid-template-rows: 300px auto !important;
    min-height: 354px;
    padding: 0 12px 22px;
  }

  .product-category__visual {
    position: relative;
    width: 100%;
    height: 300px !important;
  }

  .product-category__frame { inset: 18px 0 25px; }

  .product-category__visual > img,
  .product-category--molecule .product-category__visual > img,
  .product-category--pellets .product-category__visual > img,
  .product-category--additives .product-category__visual > img,
  .product-category--lubricants .product-category__visual > img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 84%;
    height: 76%;
    margin: 0;
    object-fit: contain !important;
    object-position: center !important;
    transform: translate3d(-50%, -50%, 0) scale(.88) !important;
    transform-origin: center !important;
  }

  .product-category__reflection {
    right: 10%;
    bottom: -7px;
    left: 10%;
    height: 50px;
  }

  .product-category__reflection img {
    width: 100%;
    height: 300px;
    object-fit: contain;
    object-position: center;
    transform: translateY(0) scaleY(-.17);
  }
}

/* Shared mobile navigation and final responsive image alignment */
.mobile-menu-toggle,
.mobile-nav {
  display: none;
}

@media (max-width: 900px) {
  .site-header {
    grid-template-columns: minmax(0, 1fr) auto auto !important;
    gap: 10px;
  }

  .mobile-menu-toggle {
    position: relative;
    z-index: 1002;
    display: inline-grid;
    width: 44px;
    height: 44px;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(82, 224, 216, .42);
    border-radius: 3px;
    background: linear-gradient(145deg, rgba(13, 42, 44, .72), rgba(2, 9, 11, .88));
    box-shadow: inset 0 0 18px rgba(72, 213, 207, .05), 0 0 18px rgba(37, 184, 180, .07);
    color: #70eee7;
    cursor: pointer;
  }

  .mobile-menu-toggle__lines,
  .mobile-menu-toggle__lines::before,
  .mobile-menu-toggle__lines::after {
    display: block;
    width: 18px;
    height: 1px;
    background: currentColor;
    box-shadow: 0 0 8px rgba(80, 227, 220, .45);
    content: "";
    transition: transform .28s ease, opacity .22s ease;
  }

  .mobile-menu-toggle__lines { position: relative; }
  .mobile-menu-toggle__lines::before { position: absolute; transform: translateY(-6px); }
  .mobile-menu-toggle__lines::after { position: absolute; transform: translateY(6px); }
  .mobile-menu-toggle[aria-expanded="true"] .mobile-menu-toggle__lines { background: transparent; box-shadow: none; }
  .mobile-menu-toggle[aria-expanded="true"] .mobile-menu-toggle__lines::before { transform: rotate(45deg); }
  .mobile-menu-toggle[aria-expanded="true"] .mobile-menu-toggle__lines::after { transform: rotate(-45deg); }

  .mobile-nav {
    position: fixed;
    z-index: 1000;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 104px 28px 42px;
    background:
      radial-gradient(circle at 82% 14%, rgba(39, 203, 197, .13), transparent 34%),
      linear-gradient(145deg, rgba(2, 10, 12, .985), rgba(0, 3, 5, .995));
    backdrop-filter: blur(20px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
    transition: opacity .28s ease, visibility .28s ease, transform .32s ease;
  }

  .mobile-nav.is-open { opacity: 1; visibility: visible; transform: none; }
  .mobile-nav::before {
    position: absolute;
    top: 70px;
    right: 28px;
    left: 28px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(79, 223, 216, .38), transparent);
    content: "";
  }

  .mobile-nav a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 68px;
    border-bottom: 1px solid rgba(135, 191, 192, .12);
    color: rgba(236, 245, 245, .86);
    font-size: clamp(1.1rem, 5.2vw, 1.45rem);
    letter-spacing: .08em;
    text-decoration: none;
    text-transform: uppercase;
  }

  .mobile-nav a::after { color: #53d8d2; font-size: 1.05rem; content: "↗"; }
  .mobile-nav a.is-active { color: #65e4dd; }
  body.mobile-menu-open { overflow: hidden; }

  .hero__media { object-position: 66% center; }
  .about-hero__media { object-position: 64% center; }
  .contact-hero__media { object-position: 62% center; }
  .product-hero__media,
  .solvents-hero__media { object-position: 66% center !important; }

  .product-category__visual,
  .product-section__media {
    display: grid;
    place-items: center;
    overflow: hidden;
  }

  .product-category__visual > img,
  .product-section__media > img {
    object-position: center center !important;
    transform-origin: center center !important;
  }
}

@media (max-width: 620px) {
  .site-header { padding-right: 16px !important; padding-left: 16px !important; gap: 8px; }
  .site-header .brand { width: min(42vw, 150px) !important; }
  .site-header .header-action { width: 42px !important; height: 42px !important; padding: 0 !important; }
  .site-header .header-action span { display: none !important; }
  .site-header .header-action svg { margin: auto; }
  .mobile-menu-toggle { width: 42px; height: 42px; }

  .hero__content > div,
  .about-hero__content > div,
  .solvents-hero__content > div { padding-left: 13px !important; }

  .product-section__media { aspect-ratio: 1.32 / 1; }
  .product-section__media > img { width: 100%; height: 100%; object-fit: contain; }
}

/* Product cards: precisely centred products with restrained industrial detail. */
.product-category__visual {
  place-items: center;
}

.product-category__frame {
  inset: 25px 0 32px;
  border-color: rgba(111, 226, 229, 0.5);
  background:
    radial-gradient(circle at 13px 13px, rgba(211, 251, 251, 0.46) 0 1px, rgba(48, 133, 137, 0.24) 1.5px 2.5px, transparent 3px),
    radial-gradient(circle at calc(100% - 13px) 13px, rgba(211, 251, 251, 0.4) 0 1px, rgba(48, 133, 137, 0.22) 1.5px 2.5px, transparent 3px),
    radial-gradient(circle at 13px calc(100% - 13px), rgba(211, 251, 251, 0.28) 0 1px, rgba(48, 133, 137, 0.16) 1.5px 2.5px, transparent 3px),
    radial-gradient(circle at calc(100% - 13px) calc(100% - 13px), rgba(211, 251, 251, 0.28) 0 1px, rgba(48, 133, 137, 0.16) 1.5px 2.5px, transparent 3px),
    repeating-linear-gradient(0deg, rgba(176, 231, 232, 0.018) 0 1px, transparent 1px 9px),
    linear-gradient(135deg, rgba(225, 255, 255, 0.09), transparent 27%, rgba(7, 20, 23, 0.22) 62%, rgba(57, 191, 196, 0.055)),
    rgba(2, 9, 11, 0.46);
  box-shadow:
    0 26px 48px rgba(0, 0, 0, 0.35),
    0 0 11px rgba(60, 211, 218, 0.11),
    inset 0 1px 0 rgba(232, 255, 255, 0.22),
    inset 0 -1px 0 rgba(30, 156, 162, 0.18),
    inset 18px 0 30px rgba(255, 255, 255, 0.012);
}

.product-category__visual::before {
  position: absolute;
  z-index: 1;
  right: 12%;
  bottom: 39px;
  left: 12%;
  height: 46px;
  border-top: 1px solid rgba(99, 216, 218, 0.18);
  border-radius: 50%;
  background:
    radial-gradient(ellipse, rgba(47, 211, 214, 0.16), rgba(9, 64, 68, 0.035) 52%, transparent 74%);
  box-shadow: 0 -6px 22px rgba(33, 195, 199, 0.04);
  content: "";
  filter: blur(0.3px);
  pointer-events: none;
}

.product-category__visual::after {
  position: absolute;
  z-index: 1;
  top: 45px;
  bottom: 49px;
  left: 50%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(100, 225, 226, 0.09) 32%, rgba(100, 225, 226, 0.035) 72%, transparent);
  box-shadow: -56px 0 0 rgba(100, 225, 226, 0.025), 56px 0 0 rgba(100, 225, 226, 0.025);
  content: "";
  pointer-events: none;
}

.product-category__visual > img {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  width: 84%;
  height: 80%;
  margin: 0;
  object-fit: contain;
  object-position: center;
  transform: translate3d(-50%, -50%, 0) scale(0.9);
  transform-origin: center;
}

.product-category--molecule .product-category__visual > img,
.product-category--pellets .product-category__visual > img,
.product-category--additives .product-category__visual > img,
.product-category--lubricants .product-category__visual > img {
  width: 84%;
  height: 80%;
  margin: 0;
  transform: translate3d(-50%, -50%, 0) scale(0.9);
}

.product-category__reflection {
  right: 9%;
  bottom: -13px;
  left: 9%;
  height: 63px;
  opacity: 0.14;
  filter: blur(2.3px);
}

.product-category__reflection img {
  width: 100%;
  height: 350px;
  object-position: center;
  transform: translateY(1px) scaleY(-0.2);
  transform-origin: center bottom;
}

.product-category:hover .product-category__visual > img,
.product-category:focus-visible .product-category__visual > img,
.product-category--pellets:hover .product-category__visual > img,
.product-category--pellets:focus-visible .product-category__visual > img,
.product-category--additives:hover .product-category__visual > img,
.product-category--additives:focus-visible .product-category__visual > img,
.product-category--lubricants:hover .product-category__visual > img,
.product-category--lubricants:focus-visible .product-category__visual > img {
  transform: translate3d(-50%, calc(-50% - 4px), 0) scale(0.94);
}

.product-category:hover .product-category__frame,
.product-category:focus-visible .product-category__frame {
  border-color: rgba(88, 230, 235, 0.82);
  box-shadow:
    0 30px 54px rgba(0, 0, 0, 0.38),
    0 0 27px rgba(49, 211, 219, 0.16),
    inset 0 1px 0 rgba(232, 255, 255, 0.28),
    inset 0 -1px 0 rgba(30, 156, 162, 0.2),
    inset 18px 0 32px rgba(255, 255, 255, 0.018);
}

@media (max-width: 900px) {
  .product-category__reflection img {
    height: 360px;
  }
}

@media (max-width: 620px) {
  .product-category__reflection img {
    height: 355px;
  }
}

/* ===== Final interactive Home sections and motion system ===== */
html,
body,
button,
input,
textarea,
select {
  font-family: "Nova Sans", "DejaVu Sans", Arial, sans-serif;
}

body {
  background: #010405;
}

main {
  overflow: hidden;
}

.cursor-ambient {
  position: fixed;
  z-index: 30;
  top: 0;
  left: 0;
  width: 430px;
  height: 430px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(53, 217, 220, 0.07), rgba(13, 107, 112, 0.025) 38%, transparent 70%);
  filter: blur(7px);
  opacity: 0;
  transform: translate3d(calc(var(--pointer-x, -500px) - 50%), calc(var(--pointer-y, -500px) - 50%), 0);
  transition: opacity 500ms ease;
  pointer-events: none;
  will-change: transform;
}

body.has-pointer .cursor-ambient {
  opacity: 1;
}

.site-header,
.nav a,
.button,
.product-category h3,
.section-eyebrow,
.jiyi h2,
.partners h2,
.site-footer {
  font-family: "Nova Sans", "DejaVu Sans", Arial, sans-serif;
}

.nav a {
  color: rgba(221, 230, 230, 0.78);
  letter-spacing: 0;
  transition: color 220ms ease, text-shadow 220ms ease;
}

.nav a::before {
  position: absolute;
  right: 50%;
  bottom: 13px;
  left: 50%;
  height: 1px;
  background: var(--teal-bright);
  box-shadow: 0 0 9px rgba(91, 221, 215, 0.55);
  content: "";
  transition: right 260ms ease, left 260ms ease;
}

.nav a:hover,
.nav a:focus-visible {
  color: var(--teal-bright);
  text-shadow: 0 0 14px rgba(91, 221, 215, 0.2);
  outline: none;
}

.nav a:hover::before,
.nav a:focus-visible::before {
  right: 0;
  left: 0;
}

.nav a.is-active::before {
  display: none;
}

.button,
.header-action {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.button::after,
.header-action::after,
.jiyi__button::after {
  position: absolute;
  z-index: -1;
  top: -70%;
  left: -46%;
  width: 32%;
  height: 240%;
  background: linear-gradient(90deg, transparent, rgba(235, 255, 255, 0.25), transparent);
  content: "";
  opacity: 0;
  transform: rotate(17deg);
  transition: transform 620ms ease, opacity 260ms ease;
  pointer-events: none;
}

.button:hover::after,
.button:focus-visible::after,
.header-action:hover::after,
.header-action:focus-visible::after,
.jiyi__button:hover::after,
.jiyi__button:focus-visible::after {
  opacity: 0.8;
  transform: translateX(510%) rotate(17deg);
}

.button svg,
.header-action svg {
  margin-left: 13px;
  transition: transform 230ms ease, filter 230ms ease;
}

.button:hover svg,
.button:focus-visible svg,
.header-action:hover svg,
.header-action:focus-visible svg {
  filter: drop-shadow(0 0 5px rgba(91, 221, 215, 0.6));
  transform: translateX(3px);
}

.hero__media {
  transform: scale(1.035) translate3d(0, var(--hero-shift, 0), 0);
  transform-origin: 68% center;
  animation: heroBreath 18s ease-in-out infinite alternate;
  will-change: transform;
}

.hero__shade {
  animation: heroShade 9s ease-in-out infinite alternate;
}

.hero__rule {
  box-shadow: 0 0 12px rgba(91, 221, 215, 0.32);
  transform-origin: bottom;
  animation: heroRuleIn 1.2s 180ms both cubic-bezier(0.2, 0.75, 0.2, 1);
}

.hero__eyebrow,
.hero h1,
.hero__tagline,
.hero__actions {
  animation: heroContentIn 920ms both cubic-bezier(0.2, 0.75, 0.2, 1);
}

.hero__eyebrow { animation-delay: 200ms; }
.hero h1 { animation-delay: 310ms; }
.hero__tagline { animation-delay: 430ms; }
.hero__actions { animation-delay: 540ms; }

.why,
.metrics,
.product-categories,
.jiyi,
.partners,
.site-footer {
  margin-top: -1px;
}

.why h2,
.product-intro h2,
.jiyi h2,
.partners h2 {
  font-weight: 700;
  letter-spacing: -0.035em;
}

.why__ambient {
  animation: ambientBreath 8s ease-in-out infinite alternate;
}

.metric-card {
  transform-style: preserve-3d;
}

.metric-card__icon {
  width: 58px;
  height: 58px;
  margin-bottom: 24px;
  border: 1px solid rgba(133, 243, 239, 0.18);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(227, 255, 255, 0.1), rgba(9, 25, 28, 0.08) 46%, rgba(71, 225, 222, 0.08)),
    rgba(3, 10, 12, 0.42);
  box-shadow:
    0 12px 24px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(235, 255, 255, 0.24),
    0 0 16px rgba(38, 205, 205, 0.08);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.metric-card__icon svg {
  width: 38px;
  height: 38px;
  stroke-width: 1.25;
}

.metric-card:hover .metric-card__icon,
.metric-card:focus-visible .metric-card__icon {
  border-color: rgba(133, 243, 239, 0.38);
  box-shadow:
    0 14px 28px rgba(0, 0, 0, 0.38),
    inset 0 1px 0 rgba(235, 255, 255, 0.3),
    0 0 24px rgba(48, 219, 218, 0.16);
}

.metric-card h3 strong {
  min-width: 1ch;
  font-variant-numeric: tabular-nums;
}

.product-intro__media {
  transform: scale(1.02);
  animation: productCinematicDrift 20s ease-in-out infinite alternate;
  will-change: transform;
}

.product-intro::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(106deg, transparent 42%, rgba(93, 238, 236, 0.09) 53%, transparent 65%);
  content: "";
  opacity: 0.3;
  transform: translateX(-70%);
  animation: productLightPass 11s 1s ease-in-out infinite;
  pointer-events: none;
}

.product-intro h2 {
  font-size: clamp(2.4rem, 3.3vw, 3.1rem);
  text-shadow: 0 5px 24px rgba(0, 0, 0, 0.84), 0 0 30px rgba(71, 211, 208, 0.08);
}

.product-categories {
  min-height: 600px;
  padding-top: 86px;
  padding-bottom: 105px;
}

.product-categories__grid {
  width: min(100%, 1160px);
}

.product-category {
  grid-template-rows: 350px auto;
}

.product-category__visual {
  height: 350px;
}

.product-category__reflection img {
  height: 350px;
}

.product-category__frame {
  inset: 27px 0 34px;
}

.product-category:hover,
.product-category:focus-visible {
  background: linear-gradient(150deg, rgba(199, 255, 252, 0.055), rgba(23, 111, 111, 0.045) 55%, rgba(1, 4, 5, 0.025));
}

.reveal-ready .reveal-item {
  opacity: 0;
  transform: translate3d(0, 30px, 0);
  transition: opacity 800ms ease, transform 850ms cubic-bezier(0.2, 0.75, 0.2, 1);
}

.reveal-ready .reveal-item.reveal-left {
  transform: translate3d(-38px, 0, 0);
}

.reveal-ready .reveal-item.reveal-right {
  transform: translate3d(38px, 0, 0);
}

.reveal-ready .reveal-item.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.section-eyebrow {
  margin: 0;
  color: var(--teal-bright);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.jiyi {
  position: relative;
  min-height: 680px;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 25% 48%, rgba(27, 197, 202, 0.12), transparent 31%),
    radial-gradient(circle at 30% 49%, rgba(202, 50, 64, 0.055), transparent 21%),
    linear-gradient(115deg, #02090b 0%, #010506 51%, #010405 100%);
}

.jiyi::before {
  position: absolute;
  z-index: -1;
  right: 0;
  bottom: 0;
  left: 0;
  height: 150px;
  background: linear-gradient(180deg, transparent, #010506);
  content: "";
}

.jiyi__ambient {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 48%;
  height: 100%;
  background:
    linear-gradient(90deg, transparent 9%, rgba(91, 221, 215, 0.035) 10%, transparent 11%),
    linear-gradient(90deg, transparent 23%, rgba(91, 221, 215, 0.025) 24%, transparent 25%);
  opacity: 0.8;
  filter: blur(0.5px);
}

.jiyi__inner {
  display: grid;
  grid-template-columns: 46% 54%;
  align-items: center;
  width: min(100% - 72px, 1320px);
  min-height: 680px;
  margin: 0 auto;
}

.jiyi__visual {
  position: relative;
  display: grid;
  height: 520px;
  place-items: center;
}

.jiyi__medallion {
  position: relative;
  display: grid;
  width: 390px;
  height: 390px;
  place-items: center;
  border: 14px solid rgba(70, 91, 94, 0.58);
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 24%, rgba(235, 255, 255, 0.14), transparent 27%),
    linear-gradient(145deg, rgba(117, 170, 175, 0.1), rgba(0, 6, 8, 0.72));
  box-shadow:
    0 30px 52px rgba(0, 0, 0, 0.66),
    inset 0 0 0 2px rgba(91, 221, 215, 0.22),
    inset 0 0 35px rgba(91, 221, 215, 0.05),
    0 0 42px rgba(28, 197, 202, 0.1);
}

.jiyi__medallion::before,
.jiyi__medallion::after {
  position: absolute;
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.jiyi__medallion::before {
  inset: -16px;
  border: 1px solid rgba(135, 243, 240, 0.21);
}

.jiyi__medallion::after {
  inset: 18px;
  border: 1px solid rgba(223, 255, 255, 0.11);
}

.jiyi__glass {
  position: absolute;
  inset: 18px;
  overflow: hidden;
  border-radius: 50%;
  background: linear-gradient(124deg, rgba(236, 255, 255, 0.12), transparent 27%, transparent 69%, rgba(55, 218, 218, 0.07));
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.jiyi__glass::before {
  position: absolute;
  top: -20%;
  left: -42%;
  width: 45%;
  height: 140%;
  background: linear-gradient(90deg, transparent, rgba(238, 255, 255, 0.16), transparent);
  content: "";
  transform: rotate(18deg);
  animation: glassSweep 7s 1.3s ease-in-out infinite;
}

.jiyi__medallion img {
  position: relative;
  z-index: 3;
  width: 68%;
  height: 68%;
  object-fit: contain;
  filter: drop-shadow(0 16px 24px rgba(0, 0, 0, 0.48));
}

.jiyi__halo {
  position: absolute;
  z-index: 4;
  inset: -20px;
  border-radius: 50%;
  pointer-events: none;
}

.jiyi__halo--soft {
  background: conic-gradient(from 20deg, transparent 0 61%, rgba(79, 246, 244, 0.06) 68%, rgba(73, 242, 241, 0.55) 77%, rgba(42, 197, 204, 0.13) 84%, transparent 92%);
  filter: blur(12px);
  opacity: 0.82;
  animation: haloSpin 10s linear infinite;
}

.jiyi__halo--sharp {
  inset: -10px;
  background: conic-gradient(from 20deg, transparent 0 65%, rgba(180, 255, 255, 0.08) 71%, rgba(83, 246, 244, 0.72) 78%, rgba(42, 197, 204, 0.08) 86%, transparent 93%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
  opacity: 0.88;
  animation: haloSpin 10s linear infinite;
}

.jiyi__reflection {
  position: absolute;
  bottom: 34px;
  left: 50%;
  width: 360px;
  height: 44px;
  border-radius: 50%;
  background: rgba(36, 220, 220, 0.17);
  filter: blur(18px);
  transform: translateX(-50%);
  animation: reflectionPulse 5s ease-in-out infinite alternate;
}

.jiyi__content {
  max-width: 660px;
  padding: 50px 0 50px clamp(26px, 5vw, 80px);
}

.jiyi h2 {
  margin: 30px 0 16px;
  color: #f0f5f5;
  font-size: clamp(2.45rem, 4vw, 3.45rem);
  line-height: 1.03;
}

.jiyi__lead {
  margin: 0;
  color: #bcc7c7;
  font-size: 1.06rem;
  line-height: 1.6;
}

.jiyi__copy {
  max-width: 620px;
  margin: 28px 0 0;
  color: #849294;
  font-size: 0.98rem;
  line-height: 1.78;
}

.jiyi__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
}

.jiyi__tags li {
  padding: 10px 18px;
  border: 1px solid rgba(82, 189, 190, 0.26);
  border-radius: 999px;
  background: rgba(6, 17, 19, 0.52);
  color: #a7b4b5;
  font-size: 0.73rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: border-color 250ms ease, color 250ms ease, background-color 250ms ease;
}

.jiyi__tags li:hover {
  border-color: rgba(91, 221, 215, 0.55);
  background: rgba(26, 112, 114, 0.15);
  color: #d8eeee;
}

.jiyi__button {
  display: flex;
  width: 292px;
  height: 58px;
  align-items: center;
  justify-content: space-between;
  margin-top: 38px;
  padding: 0 20px 0 26px;
  border: 1px solid rgba(49, 223, 224, 0.68);
  border-radius: 7px;
  background: linear-gradient(90deg, rgba(24, 203, 209, 0.16), rgba(9, 170, 179, 0.055));
  color: #f4ffff;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.075em;
  transition: transform 260ms ease, border-color 260ms ease, background-color 260ms ease, box-shadow 260ms ease;
}

.jiyi__button:hover,
.jiyi__button:focus-visible {
  border-color: rgba(92, 245, 244, 0.94);
  background-color: rgba(22, 126, 130, 0.13);
  box-shadow: 0 0 30px rgba(34, 212, 213, 0.12);
  transform: translateY(-2px);
  outline: none;
}

.partners {
  position: relative;
  min-height: 500px;
  overflow: hidden;
  isolation: isolate;
  padding: 84px 50px 82px;
  background:
    radial-gradient(ellipse at center 58%, rgba(23, 190, 197, 0.07), transparent 58%),
    linear-gradient(180deg, #010506, #010607 55%, #010506);
}

.partners::after {
  position: absolute;
  z-index: -1;
  right: 0;
  bottom: 0;
  left: 0;
  height: 90px;
  background: linear-gradient(180deg, transparent, #010506);
  content: "";
}

.partners__ambient {
  position: absolute;
  z-index: -1;
  top: 170px;
  left: 50%;
  width: min(1050px, 80vw);
  height: 120px;
  border-radius: 50%;
  background: rgba(36, 211, 214, 0.065);
  filter: blur(48px);
  transform: translateX(-50%);
  animation: partnersAmbient 7s ease-in-out infinite alternate;
}

.partners__heading {
  text-align: center;
}

.partners h2 {
  margin: 22px 0 17px;
  color: #f1f6f5;
  font-size: clamp(2.25rem, 3.4vw, 2.75rem);
}

.partners__heading > span {
  display: block;
  width: 46px;
  height: 2px;
  margin: 0 auto;
  border-radius: 2px;
  background: #35dadd;
  box-shadow: 0 0 12px rgba(53, 218, 221, 0.36);
}

.partners__network {
  position: absolute;
  right: 5%;
  bottom: 113px;
  left: 5%;
  height: 90px;
  opacity: 0.24;
  background:
    radial-gradient(circle at 5% 60%, #64efee 0 2px, transparent 3px),
    radial-gradient(circle at 18% 35%, #64efee 0 1px, transparent 2px),
    radial-gradient(circle at 34% 58%, #64efee 0 2px, transparent 3px),
    radial-gradient(circle at 52% 37%, #64efee 0 1px, transparent 2px),
    radial-gradient(circle at 70% 60%, #64efee 0 2px, transparent 3px),
    radial-gradient(circle at 86% 36%, #64efee 0 1px, transparent 2px),
    linear-gradient(10deg, transparent 49.7%, rgba(57, 213, 214, 0.24) 50%, transparent 50.3%);
  filter: blur(0.2px);
}

.partners__row {
  position: relative;
  display: grid;
  grid-template-columns: repeat(8, minmax(90px, 1fr));
  gap: clamp(16px, 2.2vw, 34px);
  align-items: center;
  width: min(100%, 1280px);
  margin: 88px auto 0;
}

.partners__row a {
  position: relative;
  display: grid;
  min-width: 0;
  height: 72px;
  place-items: center;
  outline: none;
}

.partners__row a::after {
  position: absolute;
  right: 18%;
  bottom: -3px;
  left: 18%;
  height: 9px;
  border-radius: 50%;
  background: rgba(44, 225, 222, 0.16);
  filter: blur(8px);
  content: "";
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 320ms ease, transform 320ms ease;
}

.partners__row img {
  display: block;
  width: 100%;
  height: 65px;
  object-fit: contain;
  opacity: 0.84;
  filter: grayscale(1) brightness(1.5);
  transition: opacity 320ms ease, filter 320ms ease, transform 320ms cubic-bezier(0.2, 0.75, 0.2, 1);
}

.partners__row a:hover img,
.partners__row a:focus-visible img {
  opacity: 1;
  filter: grayscale(1) brightness(1.2) sepia(0.35) saturate(6) hue-rotate(126deg) drop-shadow(0 0 8px rgba(67, 211, 209, 0.32));
  transform: translateY(-4px) scale(1.045);
}

.partners__row a:hover::after,
.partners__row a:focus-visible::after {
  opacity: 0.85;
  transform: scale(1);
}

.site-footer {
  position: relative;
  min-height: 520px;
  overflow: hidden;
  padding: 86px clamp(54px, 6vw, 92px) 0;
  isolation: isolate;
  background:
    radial-gradient(circle at 14% 4%, rgba(30, 189, 191, 0.075), transparent 28%),
    radial-gradient(circle at 84% 18%, rgba(21, 140, 145, 0.045), transparent 30%),
    linear-gradient(180deg, #010607 0%, #010405 45%, #010404 100%);
}

.site-footer__ambient {
  position: absolute;
  z-index: -1;
  top: -88px;
  left: 50%;
  width: min(980px, 82vw);
  height: 130px;
  border-radius: 50%;
  background: rgba(40, 220, 219, 0.09);
  filter: blur(54px);
  transform: translateX(-50%);
  pointer-events: none;
}

.site-footer__inner {
  display: grid;
  grid-template-columns: minmax(290px, 1.42fr) minmax(160px, 0.82fr) minmax(220px, 1fr) minmax(290px, 1.25fr);
  gap: 0;
  width: min(100%, 1280px);
  min-height: 280px;
  margin: 0 auto;
}

.site-footer__brand,
.footer-column,
.footer-contact {
  position: relative;
  padding: 0 44px;
}

.site-footer__brand { padding-left: 0; }
.footer-contact { padding-right: 0; }

.footer-column::before,
.footer-contact::before {
  position: absolute;
  top: 0;
  bottom: 8px;
  left: 0;
  width: 1px;
  background: linear-gradient(180deg, rgba(108, 200, 199, 0.24), rgba(108, 200, 199, 0.08));
  content: "";
}

.footer-logo {
  display: block;
  width: 242px;
  max-width: 100%;
}

.footer-logo img {
  display: block;
  width: 100%;
  height: auto;
}

.site-footer__tagline {
  margin: 28px 0 0;
  color: rgba(91, 221, 215, 0.76);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.site-footer__summary {
  max-width: 310px;
  margin: 15px 0 0;
  color: #aab5b6;
  font-size: 0.91rem;
  line-height: 1.75;
}

.footer-column h2,
.footer-contact h2 {
  margin: 2px 0 24px;
  color: var(--teal-bright);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.footer-column ul {
  display: grid;
  gap: 17px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-column a {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding-left: 15px;
  color: #bdc7c8;
  font-size: 0.89rem;
  transition: color 220ms ease, transform 220ms ease, text-shadow 220ms ease;
}

.footer-column a::before {
  position: absolute;
  left: 0;
  width: 5px;
  height: 5px;
  border-top: 1px solid var(--teal-bright);
  border-right: 1px solid var(--teal-bright);
  content: "";
  opacity: 0.72;
  transform: rotate(45deg);
}

.footer-column a:hover,
.footer-column a:focus-visible {
  color: var(--teal-bright);
  text-shadow: 0 0 14px rgba(67, 195, 191, 0.18);
  transform: translateX(3px);
  outline: none;
}

.footer-contact address {
  display: grid;
  gap: 19px;
  margin: 0;
  font-style: normal;
}

.contact-item {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 13px;
  align-items: start;
  color: #c9d1d1;
  font-size: 0.89rem;
  line-height: 1.55;
  transition: color 220ms ease;
}

.contact-item svg {
  width: 19px;
  height: 19px;
  margin-top: 1px;
  fill: none;
  stroke: var(--teal-bright);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.35;
  filter: drop-shadow(0 0 4px rgba(91, 221, 215, 0.2));
  transition: filter 220ms ease, transform 220ms ease;
}

.contact-item:hover,
.contact-item:focus-visible {
  color: var(--teal-bright);
  outline: none;
}

.contact-item:hover svg,
.contact-item:focus-visible svg {
  filter: drop-shadow(0 0 8px rgba(91, 221, 215, 0.55));
  transform: translateY(-1px);
}

.site-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(100%, 1280px);
  height: 92px;
  margin: 36px auto 0;
  border-top: 1px solid rgba(112, 185, 184, 0.16);
  color: #758284;
  font-size: 0.76rem;
}

.site-footer__bottom p { margin: 0; }

.site-footer__bottom nav {
  display: flex;
  align-items: center;
  gap: 18px;
}

.site-footer__bottom nav span {
  width: 1px;
  height: 14px;
  background: rgba(164, 208, 207, 0.24);
}

.site-footer__bottom a { transition: color 220ms ease; }
.site-footer__bottom a:hover,
.site-footer__bottom a:focus-visible { color: var(--teal-bright); outline: none; }

@keyframes heroBreath {
  from { transform: scale(1.035) translate3d(0, var(--hero-shift, 0), 0); }
  to { transform: scale(1.065) translate3d(-0.45%, var(--hero-shift, 0), 0); }
}

@keyframes heroShade {
  from { opacity: 0.96; }
  to { opacity: 1; }
}

@keyframes heroRuleIn {
  from { opacity: 0; transform: scaleY(0); }
  to { opacity: 1; transform: scaleY(1); }
}

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

@keyframes ambientBreath {
  from { opacity: 0.58; transform: translate3d(-1%, 0, 0) scale(0.97); }
  to { opacity: 0.86; transform: translate3d(1%, 0, 0) scale(1.04); }
}

@keyframes productCinematicDrift {
  from { transform: scale(1.02) translate3d(-0.3%, 0, 0); }
  to { transform: scale(1.065) translate3d(0.7%, -0.5%, 0); }
}

@keyframes productLightPass {
  0%, 70% { opacity: 0; transform: translateX(-72%); }
  80% { opacity: 0.28; }
  100% { opacity: 0; transform: translateX(72%); }
}

@keyframes haloSpin { to { transform: rotate(360deg); } }

@keyframes glassSweep {
  0%, 45% { opacity: 0; transform: translateX(0) rotate(18deg); }
  55% { opacity: 0.8; }
  75%, 100% { opacity: 0; transform: translateX(430%) rotate(18deg); }
}

@keyframes reflectionPulse {
  from { opacity: 0.45; transform: translateX(-50%) scaleX(0.94); }
  to { opacity: 0.78; transform: translateX(-50%) scaleX(1.04); }
}

@keyframes partnersAmbient {
  from { opacity: 0.55; transform: translateX(-50%) scaleX(0.94); }
  to { opacity: 0.9; transform: translateX(-50%) scaleX(1.05); }
}

@media (max-width: 1040px) {
  .jiyi__inner {
    grid-template-columns: 44% 56%;
  }

  .jiyi__medallion {
    width: 330px;
    height: 330px;
  }

  .partners__row {
    grid-template-columns: repeat(4, minmax(110px, 1fr));
    row-gap: 24px;
    margin-top: 58px;
  }

  .partners {
    min-height: 580px;
  }

  .site-footer__inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 52px;
  }

  .site-footer__brand,
  .footer-column,
  .footer-contact { padding: 0 34px; }
  .site-footer__brand,
  .footer-column:nth-of-type(2) { padding-left: 0; }
  .footer-column:nth-of-type(2)::before { display: none; }
  .site-footer__bottom { margin-top: 56px; }
}

@media (max-width: 760px) {
  .cursor-ambient { display: none; }

  .jiyi__inner {
    grid-template-columns: 1fr;
    width: min(100% - 40px, 600px);
    padding: 64px 0 88px;
  }

  .jiyi__visual {
    height: 380px;
  }

  .jiyi__medallion {
    width: 300px;
    height: 300px;
  }

  .jiyi__reflection { bottom: 14px; width: 300px; }

  .jiyi__content {
    max-width: 560px;
    padding: 32px 0 0;
    text-align: center;
  }

  .jiyi__tags { justify-content: center; }
  .jiyi__button { margin-right: auto; margin-left: auto; }

  .partners {
    padding-right: 24px;
    padding-left: 24px;
  }

  .partners__row {
    grid-template-columns: repeat(2, minmax(110px, 1fr));
    gap: 18px 28px;
    width: min(100%, 500px);
  }

  .site-footer {
    padding: 70px 24px 0;
  }

  .site-footer__inner {
    grid-template-columns: 1fr;
    gap: 46px;
  }

  .site-footer__brand,
  .footer-column,
  .footer-contact { padding: 0; }
  .footer-column::before,
  .footer-contact::before { display: none; }
  .footer-logo { width: 215px; }

  .site-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 14px;
    height: 118px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__media,
  .hero__shade,
  .hero__rule,
  .hero__eyebrow,
  .hero h1,
  .hero__tagline,
  .hero__actions,
  .why__ambient,
  .product-intro__media,
  .product-intro::after,
  .jiyi__halo,
  .jiyi__glass::before,
  .jiyi__reflection,
  .partners__ambient {
    animation: none !important;
  }

  .reveal-ready .reveal-item {
    opacity: 1;
    transform: none;
  }
}

/* Final mobile overrides — keep last in cascade. */
@media (max-width: 620px) {
  .hero { min-height: auto; }
  .hero__media {
    top: 70px;
    bottom: auto;
    width: 100%;
    height: 56.25vw;
    min-height: 202px;
    max-height: 244px;
    object-fit: contain;
    object-position: center !important;
    background: #010405;
    transform: none !important;
    animation: none !important;
  }
  .hero__shade {
    top: 70px;
    bottom: auto;
    height: calc(56.25vw + 88px);
    min-height: 290px;
    max-height: 332px;
  }
  .hero__content {
    align-items: flex-start;
    min-height: auto;
    padding: calc(clamp(202px, 56.25vw, 244px) + 52px) 24px 82px;
  }
  .hero__rule,.hero__scroll { display: none; }
  .hero__content > div { width: 100%; padding-left: 0 !important; }
  .hero h1 { margin: 24px 0 22px; font-size: clamp(2.25rem, 11.5vw, 2.95rem); }
  .product-intro { min-height: 430px; background: #010405; }
  .product-intro__media {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 33% center !important;
    transform: none !important;
    animation: none !important;
  }
  .product-intro__content { min-height: 430px; padding: 0 24px 58px; }
  .product-categories { padding: 66px 20px 88px; background: #010405; }
  .product-categories__grid { grid-template-columns: 1fr; gap: 18px; width: min(100%, 380px); }
  .product-category { grid-template-rows: 300px auto !important; min-height: 354px; padding: 0 12px 22px; }
  .product-category__visual { position: relative; width: 100%; height: 300px !important; }
  .product-category__frame { inset: 18px 0 25px; }
  .product-category__visual > img,
  .product-category--molecule .product-category__visual > img,
  .product-category--pellets .product-category__visual > img,
  .product-category--additives .product-category__visual > img,
  .product-category--lubricants .product-category__visual > img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 84%;
    height: 76%;
    margin: 0;
    object-fit: contain !important;
    object-position: center !important;
    transform: translate3d(-50%, -50%, 0) scale(.88) !important;
    transform-origin: center !important;
  }
  .product-category__reflection { right: 10%; bottom: -7px; left: 10%; height: 50px; }
  .product-category__reflection img {
    width: 100%;
    height: 300px;
    object-fit: contain;
    object-position: center;
    transform: translateY(0) scaleY(-.17);
  }
}