/* ==========================================================
   82NAONNA — Brand Site
   Dark luxury · Ultra minimal · Cinematic
   ========================================================== */

:root {
  --black: #0a0a0a;
  --black-soft: #111111;
  --black-deep: #050505;
  --gold: #c9a961;
  --gold-soft: #b8985a;
  --gold-bright: #e4c87a;
  --white: #ffffff;
  --gray: #8a8a8a;
  --gray-dim: #555555;
  --line: rgba(255, 255, 255, 0.08);

  --font-en: "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-ko: "Pretendard", "Noto Sans KR", -apple-system, sans-serif;
  --font-serif: "Cormorant Garamond", "Noto Serif KR", "Noto Serif JP", serif;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background: var(--black);
  color: var(--white);
  font-family: var(--font-ko);
  font-weight: 300;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%; /* iOS: stop auto-zooming text on rotate */
  -webkit-tap-highlight-color: rgba(201, 169, 97, 0.18); /* gold tap flash */
  text-rendering: optimizeLegibility;
}

/* Interactive elements: min 44x44 touch target on coarse pointers */
@media (pointer: coarse) {
  a, button, [role="button"], [role="slider"] {
    min-height: 44px;
  }
}

img, video {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s var(--ease);
}

button {
  background: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
  font: inherit;
}

/* ============ LOADING ============ */
.loader {
  position: fixed;
  inset: 0;
  background: var(--black-deep);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: opacity 0.8s var(--ease), visibility 0.8s var(--ease);
}

.loader.hidden {
  opacity: 0;
  visibility: hidden;
}

/* Spotlight cone — tall elliptical pool of warm gold light descending
   from top-center onto the logo. Built as a separate element so we
   can blur it without affecting the sharp logo. */
.loader__beam {
  position: absolute;
  top: -10%;
  left: 50%;
  width: 120vmin;
  height: 130vmin;
  transform: translateX(-50%);
  background:
    radial-gradient(ellipse 28% 55% at 50% 35%,
      rgba(255, 220, 150, 0.22) 0%,
      rgba(201, 169, 97, 0.10) 35%,
      rgba(201, 169, 97, 0.03) 60%,
      transparent 75%);
  filter: blur(30px);
  pointer-events: none;
  opacity: 0;
  animation: loaderBeamIn 1.4s var(--ease) 0.1s forwards,
             loaderBeamPulse 3.2s ease-in-out 1.5s infinite;
}

.loader__logo {
  position: relative;
  width: 220px;
  max-width: 60vw;
  height: auto;
  opacity: 0;
  transform: scale(0.96);
  animation: fadeInLoader 1.2s var(--ease) 0.3s forwards;
  /* Warm gold glow to sell the spotlight catching the gilded mark */
  filter:
    drop-shadow(0 0 18px rgba(255, 220, 150, 0.35))
    drop-shadow(0 0 42px rgba(201, 169, 97, 0.25));
}

@keyframes fadeInLoader {
  to { opacity: 1; transform: scale(1); }
}

@keyframes loaderBeamIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes loaderBeamPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.78; }
}

/* ============ HEADER ============ */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 80px;
  padding: 0 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 1000;
  background: transparent;
  transition: background 0.4s var(--ease), border-color 0.4s var(--ease);
  border-bottom: 1px solid transparent;
}

.header.scrolled {
  background: rgba(10, 10, 10, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom-color: var(--line);
}

.header__logo img {
  height: 36px;
  width: auto;
  filter: brightness(0) invert(1);
  transition: filter 0.4s var(--ease);
}

.header__nav {
  display: flex;
  gap: 44px;
}

.header__nav a {
  font-family: var(--font-en);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
  position: relative;
  padding: 6px 0;
}

.header__nav a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--gold);
  transition: width 0.4s var(--ease);
}

.header__nav a:hover {
  color: var(--gold);
}

.header__nav a:hover::after {
  width: 100%;
}

/* ==== Language switcher ==== */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 24px;
  padding-left: 24px;
  border-left: 1px solid var(--line);
}

.lang-switch button {
  font-family: var(--font-en);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
  padding: 4px 2px;
  cursor: pointer;
  transition: color 0.3s var(--ease);
  background: transparent;
  border: none;
  position: relative;
}

.lang-switch button:hover {
  color: rgba(255, 255, 255, 0.8);
}

.lang-switch button.active {
  color: var(--gold);
}

.lang-switch__sep {
  color: var(--gray-dim);
  font-size: 11px;
  user-select: none;
}

/* Essence subtitle — keep English label in all languages as design element */
.subtitle-en {
  display: block;
  color: var(--gold);
  font-style: normal;
  font-family: var(--font-en);
  font-size: 13px;
  letter-spacing: 6px;
  /* Offset trailing letter-spacing for optical centering */
  padding-left: 6px;
  text-transform: uppercase;
  margin-top: 48px;
  font-weight: 400;
}

.header__burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  width: 28px;
  height: 18px;
  position: relative;
}

.header__burger span {
  width: 100%;
  height: 1px;
  background: var(--white);
  transition: transform 0.4s var(--ease), opacity 0.4s var(--ease);
}

.header__burger.open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.header__burger.open span:nth-child(2) { opacity: 0; }
.header__burger.open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ============ HERO ============ */
.hero {
  position: relative;
  width: 100%;
  min-height: 100vh;
  /* Use small-viewport-height on mobile browsers so the hero doesn't
     get partially hidden by the dynamic URL bar. Falls back to 100vh
     where svh isn't supported. */
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--black-deep);
}

.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.35;
  filter: contrast(1.1) brightness(0.8);
  z-index: 1;
  /* Solid fallback so the element box is never a blank white rectangle
     while the first frame is being decoded. No poster background-image
     here because combined with opacity: 0.35 it double-exposed over
     the video on desktop. */
  background-color: #000;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, transparent 0%, rgba(0,0,0,0.6) 70%, rgba(0,0,0,0.95) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0.8) 100%);
  z-index: 2;
}

.hero__particles {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.hero__inner {
  position: relative;
  z-index: 4;
  max-width: 1280px;
  width: 100%;
  padding: 0 48px;
  text-align: center;
}

.hero__eyebrow {
  font-family: var(--font-en);
  font-size: 11px;
  letter-spacing: 6px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 32px;
  opacity: 0;
  animation: fadeUp 1.2s var(--ease) 0.4s forwards;
}

.hero__title {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(40px, 6vw, 84px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--white);
  margin-bottom: 24px;
  opacity: 0;
  animation: fadeUp 1.2s var(--ease) 0.7s forwards;
}

.hero__title em {
  font-style: italic;
  color: var(--gold);
  font-weight: 300;
}

.hero__sub {
  font-family: var(--font-en);
  font-size: 14px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: 48px;
  opacity: 0;
  animation: fadeUp 1.2s var(--ease) 1s forwards;
}

.hero__brand {
  font-family: var(--font-en);
  font-size: 13px;
  letter-spacing: 8px;
  color: var(--white);
  opacity: 0;
  animation: fadeUp 1.2s var(--ease) 1.3s forwards;
}

/* Use the same centering strategy (margin: 0 auto on a 1px block)
   as .essence__ornament so the two vertical lines land on the
   exact same pixel column. Avoid flex + translateX(-50%) here —
   content-sized flex containers can round to sub-pixel positions. */
.hero__scroll {
  position: absolute;
  bottom: 40px;
  left: 0;
  right: 0;
  z-index: 5;
  text-align: center;
  opacity: 0;
  animation: fadeUp 1s var(--ease) 1.8s forwards;
  pointer-events: none;
}

.hero__scroll-line {
  display: block;
  width: 1px;
  height: 60px;
  margin: 0 auto 12px;
  background: linear-gradient(180deg, transparent, var(--gold));
  animation: scrollPulse 2.4s infinite;
}

.hero__scroll-text {
  display: block;
  font-family: var(--font-en);
  font-size: 10px;
  letter-spacing: 4px;
  /* Offset the trailing letter-spacing so the WORD appears optically
     centered under the line (letter-spacing adds space after the last
     letter, pushing the visual centroid left). */
  padding-left: 4px;
  text-transform: uppercase;
  color: var(--gray);
}

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

@keyframes scrollPulse {
  0%, 100% { opacity: 0.3; transform: scaleY(1); }
  50% { opacity: 1; transform: scaleY(1.2); }
}

/* ============ SECTION BASE ============ */
.section {
  padding: 160px 48px;
  position: relative;
}

.section__label {
  font-family: var(--font-en);
  font-size: 11px;
  letter-spacing: 6px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 32px;
}

.section__title {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(32px, 4vw, 56px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin-bottom: 24px;
  color: var(--white);
}

.section__title em {
  font-style: italic;
  color: var(--gold);
}

/* Korean fonts have no true italic — CJK browsers fake it with a
   mechanical slant that looks awkward. For titles whose accent word
   is Korean, opt out with .upright. Uses `em.upright` (not
   `.section__title em.upright`) because some of these titles sit
   inside plain h3s without the section__title class. */
em.upright {
  font-style: normal;
}

.section__lead {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.7);
  max-width: 640px;
  line-height: 1.8;
}

.container {
  max-width: 1280px;
  margin: 0 auto;
}

/* ============ SYSTEM SECTION ============ */
.system {
  background: var(--black);
  border-top: 1px solid var(--line);
}

.system__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 96px;
  align-items: center;
}

.system__copy h3 {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: 48px;
  line-height: 1.2;
  margin-bottom: 40px;
}

.system__steps {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 48px;
}

.system__step {
  display: flex;
  align-items: flex-start;
  gap: 28px;
  padding: 24px 0;
  border-top: 1px solid var(--line);
  transition: border-color 0.4s var(--ease);
}

.system__step.active {
  border-top-color: var(--gold);
}

.system__step-num {
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 3px;
  color: var(--gold);
  min-width: 60px;
  padding-top: 4px;
}

.system__step-body h4 {
  font-family: var(--font-en);
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.system__step-body p {
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  line-height: 1.7;
}

.system__visual {
  position: relative;
  height: 560px;
  border: 1px solid var(--line);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at center, #1a1a1a 0%, #050505 100%);
}

.system__visual svg {
  width: 100%;
  height: 100%;
}

/* Scalp cross-section animation */
.scalp-layer {
  stroke: var(--line);
  fill: none;
  stroke-width: 0.5;
}

.scalp-layer--accent {
  stroke: var(--gold);
  stroke-dasharray: 3 6;
  animation: dash 20s linear infinite;
}

@keyframes dash {
  to { stroke-dashoffset: -200; }
}

.particle {
  fill: var(--gold);
  animation: fallParticle 6s infinite ease-in;
}

@keyframes fallParticle {
  0% { transform: translateY(-20px); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translateY(300px); opacity: 0; }
}

/* ============ TECH / MACRO ============ */
.tech {
  background: var(--black-deep);
}

.tech__header {
  text-align: center;
  margin-bottom: 80px;
}

.tech__slides {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.tech__slide {
  position: relative;
  aspect-ratio: 3/4;
  overflow: hidden;
  background: #111;
  border: 1px solid var(--line);
}

.tech__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease), filter 1.2s var(--ease);
  filter: grayscale(0.3) contrast(1.1) brightness(0.7);
}

.tech__slide:hover img {
  transform: scale(1.05);
  filter: grayscale(0) contrast(1.15) brightness(0.85);
}

.tech__slide-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 32px;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.9));
}

.tech__slide-caption .num {
  font-family: var(--font-en);
  font-size: 11px;
  letter-spacing: 4px;
  color: var(--gold);
  margin-bottom: 12px;
  display: block;
}

.tech__slide-caption h4 {
  font-family: var(--font-en);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--white);
}

.tech__copy {
  margin-top: 100px;
  text-align: center;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.tech__copy p {
  font-family: var(--font-serif);
  font-size: 28px;
  font-style: italic;
  font-weight: 300;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 16px;
}

.tech__copy p:last-child {
  color: var(--gold);
}

/* ============ ESSENCE ============ */
.essence {
  background: var(--black);
  padding: 200px 48px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.essence::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(201, 169, 97, 0.04), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(201, 169, 97, 0.03), transparent 40%);
  pointer-events: none;
}

.essence__content {
  position: relative;
  z-index: 1;
  max-width: 900px;
  margin: 0 auto;
}

.essence__ornament {
  width: 1px;
  height: 80px;
  background: var(--gold);
  margin: 0 auto 48px;
}

.essence__title {
  font-family: var(--font-serif);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(36px, 4.5vw, 64px);
  line-height: 1.4;
  color: var(--white);
  margin-bottom: 48px;
  word-break: keep-all;
  text-wrap: balance;
}

/* Inline spans inside essence title are for i18n — don't restyle them.
   The design accent uses .subtitle-en explicitly. */

.essence__divider {
  width: 40px;
  height: 1px;
  background: var(--gold);
  margin: 0 auto;
}

/* ============ PRODUCT ============ */
.product {
  background: var(--black-deep);
  border-top: 1px solid var(--line);
}

.product__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 48px;
  margin-top: 80px;
}

.product__card {
  position: relative;
  background: #0d0d0d;
  border: 1px solid var(--line);
  padding: 80px 48px 56px;
  text-align: center;
  overflow: hidden;
  transition: border-color 0.5s var(--ease), transform 0.5s var(--ease);
}

.product__card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(201, 169, 97, 0.08), transparent 60%);
  opacity: 0;
  transition: opacity 0.6s var(--ease);
  pointer-events: none;
}

.product__card:hover {
  border-color: rgba(201, 169, 97, 0.4);
  transform: translateY(-6px);
}

.product__card:hover::before {
  opacity: 1;
}

.product__card:hover .product__card-img img {
  transform: scale(1.08);
}

.product__card-tag {
  font-family: var(--font-en);
  font-size: 10px;
  letter-spacing: 4px;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 24px;
}

.product__card-img {
  height: 380px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 40px;
  overflow: hidden;
}

.product__card-img img {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  object-fit: contain;
  transition: transform 1s var(--ease);
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.6));
}

.product__card-name {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: 30px;
  margin-bottom: 12px;
  color: var(--white);
}

.product__card-name em {
  font-style: italic;
  color: var(--gold);
}

.product__card-kr {
  font-size: 13px;
  color: var(--gray);
  letter-spacing: 2px;
  margin-bottom: 24px;
}

.product__card-desc {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.8;
  max-width: 340px;
  margin: 0 auto 32px;
}

.product__card-more {
  font-family: var(--font-en);
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--gold);
  cursor: pointer;
}

/* Ingredient accordion */
.ingredients {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.6s var(--ease);
  text-align: left;
}

.ingredients.open {
  max-height: 2000px;
}

.ingredients__inner {
  padding-top: 32px;
  margin-top: 32px;
  border-top: 1px solid var(--line);
}

.ingredients__title {
  font-family: var(--font-en);
  font-size: 10px;
  letter-spacing: 3px;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 16px;
}

.ingredients__list {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.9;
  word-break: keep-all;
}

/* ============ TRUST ============ */
.trust {
  background: var(--black);
  border-top: 1px solid var(--line);
}

.trust__grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 96px;
  align-items: center;
}

.trust__logos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}

.trust__logo {
  aspect-ratio: 1;
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  transition: border-color 0.4s var(--ease);
}

.trust__logo:hover {
  border-color: rgba(201, 169, 97, 0.3);
}

.trust__logo-placeholder {
  font-family: var(--font-en);
  font-size: 14px;
  letter-spacing: 3px;
  color: var(--gold);
  text-align: center;
  line-height: 1.6;
}

.trust__logo-placeholder span {
  display: block;
  font-size: 10px;
  color: var(--gray);
  margin-top: 6px;
  letter-spacing: 2px;
}

.trust__copy h3 {
  font-family: var(--font-serif);
  font-weight: 300;
  font-style: italic;
  font-size: 40px;
  line-height: 1.4;
  margin-bottom: 24px;
}

.trust__copy p {
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.8;
  margin-bottom: 16px;
  /* Keep Korean words from splitting mid-character, and let the
     browser rebalance the last line so a single "됩니다." doesn't
     dangle alone (text-wrap: pretty is a progressive enhancement). */
  word-break: keep-all;
  overflow-wrap: break-word;
  text-wrap: pretty;
  letter-spacing: -0.005em;
}

/* ============ REVIEWS ============ */
.reviews {
  background: var(--black-deep);
  border-top: 1px solid var(--line);
}

.reviews__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 80px;
}

.review {
  border: 1px solid var(--line);
  padding: 48px 36px;
  transition: border-color 0.4s var(--ease);
}

.review:hover {
  border-color: rgba(201, 169, 97, 0.25);
}

.review__quote {
  font-family: var(--font-serif);
  font-size: 40px;
  color: var(--gold);
  line-height: 1;
  margin-bottom: 24px;
}

.review__body {
  font-size: 15px;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 32px;
  word-break: keep-all;
}

.review__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  font-family: var(--font-en);
  font-size: 12.5px;
  letter-spacing: 1.8px;
  color: rgba(255, 255, 255, 0.78);
}

.review__meta strong {
  color: var(--gold);
  font-weight: 400;
}

/* ============ DRY NANO TECHNOLOGY BLOCK ============ */
.nano {
  margin-top: 140px;
  padding-top: 96px;
  border-top: 1px solid var(--line);
}

.nano__intro {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 80px;
}

.nano__eyebrow {
  font-family: var(--font-en);
  font-size: 11px;
  letter-spacing: 6px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 28px;
}

.nano__title {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.2;
  margin-bottom: 28px;
  color: var(--white);
  word-break: keep-all;
}

.nano__lead {
  font-size: 15px;
  line-height: 1.9;
  color: rgba(255, 255, 255, 0.7);
  word-break: keep-all;
}

.nano__grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: var(--line);
  border: 1px solid var(--line);
}

.nano__item {
  background: #0c0c0c;
  padding: 56px 40px;
  position: relative;
  transition: background 0.4s var(--ease);
}

.nano__item:hover {
  background: #111;
}

.nano__num {
  font-family: var(--font-en);
  font-size: 11px;
  letter-spacing: 4px;
  color: var(--gold);
  margin-bottom: 32px;
}

.nano__h {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 24px;
  margin-bottom: 16px;
  color: var(--white);
  word-break: keep-all;
}

.nano__p {
  font-size: 14px;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.62);
  word-break: keep-all;
}

@media (max-width: 1024px) {
  .nano__grid { grid-template-columns: 1fr; }
}

/* ============ RESULTS / BEFORE · AFTER ============ */
.results {
  background: var(--black);
  border-top: 1px solid var(--line);
}

.results__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 56px;
  margin-top: 40px;
}

.case {
  margin: 0;
  display: flex;
  flex-direction: column;
}

.compare {
  position: relative;
  width: 100%;
  aspect-ratio: 3/4;
  overflow: hidden;
  background: #111;
  border: 1px solid var(--line);
  user-select: none;
  -webkit-user-select: none;
}

.compare__stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.compare__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  filter: contrast(1.05) brightness(0.92);
  pointer-events: none;
}

.compare__clip {
  position: absolute;
  inset: 0;
  overflow: hidden;
  width: 50%;
  transition: width 0s;
  will-change: width;
}

.compare__clip .compare__img {
  /* The before image must stay anchored to the left edge of the stage,
     so as .compare__clip shrinks from the right, the image inside doesn't
     slide horizontally with it. We lock width & left to the stage. */
  width: var(--stage-w, 100%);
  left: 0;
  transform: translate(var(--before-tx, 0%), var(--before-ty, 0%)) scale(var(--before-scale, 1));
  transform-origin: var(--before-origin, center center);
}

.compare__stage > .compare__img--after {
  transform: translate(var(--after-tx, 0%), var(--after-ty, 0%)) scale(var(--after-scale, 1));
  transform-origin: var(--after-origin, center center);
}

.compare__handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 44px;
  margin-left: -22px;
  cursor: ew-resize;
  touch-action: none;
  outline: none;
  z-index: 3;
  will-change: left;
}

.compare__line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  margin-left: -0.5px;
  background: rgba(201, 169, 97, 0.85);
  box-shadow: 0 0 18px rgba(201, 169, 97, 0.35);
}

.compare__knob {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(10, 10, 10, 0.9);
  border: 1px solid var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: transform 0.25s var(--ease), background 0.25s var(--ease);
}

.compare__handle:hover .compare__knob,
.compare__handle:focus-visible .compare__knob {
  transform: translate(-50%, -50%) scale(1.1);
  background: rgba(201, 169, 97, 0.15);
}

.compare__tag {
  position: absolute;
  top: 20px;
  font-family: var(--font-en);
  font-size: 10px;
  letter-spacing: 4px;
  color: var(--white);
  background: rgba(10, 10, 10, 0.7);
  padding: 8px 14px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  z-index: 2;
  pointer-events: none;
}

.compare__tag--before {
  left: 20px;
}

.compare__tag--after {
  right: 20px;
  color: var(--gold);
  border-color: rgba(201, 169, 97, 0.4);
}

.case__meta {
  padding: 36px 4px 0;
}

.case__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 16px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--line);
}

.case__num {
  font-family: var(--font-en);
  font-size: 11px;
  letter-spacing: 4px;
  color: var(--gold);
}

.case__period {
  font-family: var(--font-en);
  font-size: 11px;
  letter-spacing: 3px;
  color: rgba(255, 255, 255, 0.7);
}

.case__title {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: 28px;
  margin-bottom: 6px;
  color: var(--white);
}

.case__range {
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--gray);
  margin-bottom: 20px;
}

.case__quote {
  margin: 0;
  padding: 20px 0 0;
  border-top: 1px solid var(--line);
  font-size: 14px;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.7);
  word-break: keep-all;
  font-style: italic;
  font-family: var(--font-serif);
}

.case__quote::before {
  content: "“";
  display: inline-block;
  color: var(--gold);
  font-size: 24px;
  line-height: 0;
  margin-right: 4px;
  vertical-align: -4px;
}

.results__disclaimer {
  margin-top: 72px;
  text-align: center;
  font-size: 12px;
  color: var(--gray);
  letter-spacing: 1px;
  line-height: 1.8;
  word-break: keep-all;
}

@media (max-width: 1024px) {
  .results__grid { grid-template-columns: 1fr; gap: 64px; }
}
/* Note: further mobile compare tweaks live in the main 768/480 blocks
   near the end of this file for easier scanning. */

/* ============ CTA ============ */
.cta {
  background: var(--black);
  padding: 180px 48px;
  text-align: center;
  position: relative;
  border-top: 1px solid var(--line);
}

.cta__title {
  font-family: var(--font-serif);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(40px, 5vw, 72px);
  line-height: 1.2;
  margin-bottom: 56px;
  color: var(--white);
}

.cta__title em {
  color: var(--gold);
  font-style: italic;
}

.cta__btns {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}

.cta__btn {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  padding: 22px 52px;
  border: 1px solid var(--gold);
  color: var(--gold);
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 4px;
  text-transform: uppercase;
  transition: all 0.5s var(--ease);
  position: relative;
  overflow: hidden;
}

.cta__btn--ghost {
  border-color: rgba(255, 255, 255, 0.4);
  color: rgba(255, 255, 255, 0.92);
}

.cta__btn--ghost::before {
  background: rgba(255, 255, 255, 0.95);
}

.cta__btn--ghost:hover {
  color: var(--black);
}

.cta__btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gold);
  transform: translateX(-100%);
  transition: transform 0.5s var(--ease);
  z-index: -1;
}

.cta__btn:hover {
  color: var(--black);
}

.cta__btn:hover::before {
  transform: translateX(0);
}

.cta__btn svg {
  width: 16px;
  height: 16px;
}

.cta__note {
  margin-top: 40px;
  font-family: var(--font-en);
  font-size: 11px;
  letter-spacing: 3px;
  color: var(--gray);
  text-transform: uppercase;
}

/* ============ FOOTER ============ */
.footer {
  background: var(--black-deep);
  padding: 80px 48px 48px;
  border-top: 1px solid var(--line);
}

.footer__top {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 64px;
  padding-bottom: 64px;
  border-bottom: 1px solid var(--line);
}

.footer__brand img {
  width: 140px;
  margin-bottom: 24px;
  filter: brightness(0) invert(1);
  opacity: 0.85;
}

.footer__brand p {
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--gray);
  line-height: 1.8;
}

.footer__col h5 {
  font-family: var(--font-en);
  font-size: 11px;
  letter-spacing: 3px;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 20px;
}

.footer__col ul {
  list-style: none;
}

.footer__col li {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 10px;
  line-height: 1.6;
}

.footer__col a:hover {
  color: var(--gold);
}

.footer__bottom {
  padding-top: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 1.8px;
  color: rgba(255, 255, 255, 0.7);
}

.footer__social {
  display: flex;
  gap: 24px;
}

.footer__credit {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.footer__credit a {
  color: var(--gold);
  letter-spacing: 1.5px;
  transition: opacity 0.25s var(--ease);
}

.footer__credit a:hover {
  opacity: 0.75;
}

/* ============ CURSOR FX (desktop only) ============ */
#cursor-fx {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 9999;
  /* Additive blending so overlapping particles glow gold brighter
     rather than muddy together. Dark page → gold pops; light elements
     → particles mostly vanish (acceptable for a luxury feel). */
  mix-blend-mode: screen;
}

/* Touch / coarse-pointer devices don't have a meaningful cursor,
   and the RAF loop is wasted work there. */
@media (hover: none), (pointer: coarse) {
  #cursor-fx { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  #cursor-fx { display: none; }
}

/* ============ REVEAL ANIMATION ============ */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1.2s var(--ease), transform 1.2s var(--ease);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-delay-1 { transition-delay: 0.15s; }
.reveal-delay-2 { transition-delay: 0.3s; }
.reveal-delay-3 { transition-delay: 0.45s; }

/* ============ RESPONSIVE ============ */
@media (max-width: 1024px) {
  .header { padding: 0 24px; }
  .section { padding: 120px 24px; }
  .essence, .cta { padding: 140px 24px; }
  .system__grid, .trust__grid {
    grid-template-columns: 1fr;
    gap: 56px;
  }
  .system__visual { height: 420px; }
  .footer__top { grid-template-columns: 1fr 1fr; gap: 48px; }
}

@media (max-width: 768px) {
  .header { padding: 0 20px; height: 68px; }
  .header__logo img { height: 30px; }
  .header__nav {
    position: fixed;
    top: 68px;
    left: 0;
    right: 0;
    flex-direction: column;
    background: rgba(10, 10, 10, 0.98);
    backdrop-filter: blur(20px);
    padding: 32px 20px 40px;
    gap: 22px;
    transform: translateY(-120%);
    transition: transform 0.5s var(--ease);
    border-bottom: 1px solid var(--line);
    max-height: calc(100vh - 68px);
    overflow-y: auto;
  }
  .header__nav.open { transform: translateY(0); }
  .header__nav a {
    font-size: 15px;
    padding: 10px 0;
    text-align: center;
  }
  .header__burger { display: flex; }

  .lang-switch {
    margin: 20px 0 0;
    padding: 20px 0 0;
    border-left: none;
    border-top: 1px solid var(--line);
    width: 100%;
    justify-content: center;
    gap: 12px;
  }
  .lang-switch button {
    font-size: 13px;
    padding: 8px 10px;
    min-width: 44px;
  }

  /* Section rhythm tightened for touch-first reading */
  .section { padding: 80px 20px; }
  .essence, .cta { padding: 96px 20px; }
  .cta__title { margin-bottom: 40px; }
  .cta__btn { padding: 18px 36px; letter-spacing: 3px; gap: 14px; }

  /* Hero — keep cinematic feel but ensure nothing clips */
  .hero__inner { padding: 0 22px; }
  .hero__eyebrow { letter-spacing: 4px; font-size: 10px; margin-bottom: 24px; }
  .hero__title { font-size: clamp(32px, 10vw, 52px); line-height: 1.15; margin-bottom: 20px; word-break: keep-all; }
  .hero__sub { font-size: 12px; letter-spacing: 1.5px; margin-bottom: 36px; line-height: 1.7; word-break: keep-all; }
  .hero__brand { font-size: 11px; letter-spacing: 5px; }

  /* System */
  .system__step { gap: 16px; padding: 20px 0; }
  .system__step-num { min-width: 50px; font-size: 11px; }
  .system__step-body h4 { font-size: 16px; }
  .system__step-body p { font-size: 13px; }
  .system__visual { height: 360px; }

  /* Technology / Macro */
  .tech__slides { grid-template-columns: 1fr; gap: 14px; }
  .tech__slide-caption { padding: 24px; }
  .tech__copy { margin-top: 72px; }
  .tech__copy p { font-size: 19px; line-height: 1.55; }

  /* Nano block */
  .nano { margin-top: 96px; padding-top: 72px; }
  .nano__intro { margin-bottom: 56px; }
  .nano__item { padding: 40px 28px; }
  .nano__num { margin-bottom: 22px; }
  .nano__h { font-size: 21px; margin-bottom: 12px; }

  /* Product */
  .product__grid { grid-template-columns: 1fr; gap: 20px; }
  .product__card { padding: 48px 24px 36px; }
  .product__card-img { height: 260px; margin-bottom: 28px; }
  .product__card-name { font-size: 26px; }
  .product__card-desc { font-size: 13.5px; max-width: none; }
  .ingredients__list { font-size: 11.5px; line-height: 1.85; }

  /* Partnership */
  .trust__grid { gap: 48px; }
  .trust__logos { gap: 18px; }
  .trust__logo { padding: 24px; }
  .trust__logo-placeholder { font-size: 12px; letter-spacing: 2px; }
  .trust__logo-placeholder span { font-size: 9px; letter-spacing: 1.5px; }
  .trust__copy h3 { font-size: 28px; }

  /* Reviews */
  .reviews__grid { grid-template-columns: 1fr; gap: 16px; }
  .review { padding: 36px 28px; }
  .review__body { font-size: 14px; line-height: 1.75; }
  .review__meta { font-size: 10px; letter-spacing: 1.5px; }

  /* Results / Before · After */
  .compare { aspect-ratio: 4/5; }     /* less vertical on phones */
  .compare__handle { width: 56px; margin-left: -28px; }   /* wider hit area */
  .compare__knob { width: 48px; height: 48px; } /* meet 44px touch target */
  .compare__tag { font-size: 9px; letter-spacing: 2.5px; padding: 6px 10px; top: 14px; }
  .compare__tag--before { left: 14px; }
  .compare__tag--after { right: 14px; }
  .case__meta { padding-top: 28px; }
  .case__title { font-size: 22px; }
  .case__quote { font-size: 13px; line-height: 1.7; }
  .results__disclaimer { margin-top: 56px; font-size: 11px; }

  /* Footer */
  .footer { padding: 64px 20px 40px; }
  .footer__top { grid-template-columns: 1fr; gap: 40px; padding-bottom: 48px; }
  .footer__brand img { width: 120px; }
  .footer__bottom {
    flex-direction: column;
    gap: 14px;
    text-align: center;
    padding-top: 32px;
  }
  .footer__social { gap: 18px; flex-wrap: wrap; justify-content: center; }

  /* Essence titles on phones */
  .essence__title { font-size: clamp(24px, 6.2vw, 40px); letter-spacing: -0.015em; word-break: keep-all; }
  .subtitle-en { font-size: 11px; letter-spacing: 4px; margin-top: 36px; }
  .section__title { font-size: clamp(28px, 6.5vw, 42px); word-break: keep-all; }
  .section__lead { font-size: 14.5px; word-break: keep-all; }
  .section__label { font-size: 10px; letter-spacing: 4px; margin-bottom: 22px; }
}

/* Very small phones (<= 480px): tighten further */
@media (max-width: 480px) {
  .section { padding: 68px 18px; }
  .essence, .cta { padding: 80px 18px; }

  .hero__inner { padding: 0 20px; }
  .hero__title { font-size: clamp(28px, 11vw, 44px); }
  .hero__sub { font-size: 11.5px; }
  .hero__brand { font-size: 10px; letter-spacing: 4px; }

  .header { padding: 0 16px; }
  .header__logo img { height: 26px; }

  .cta__btn { padding: 16px 28px; font-size: 11px; letter-spacing: 2.5px; gap: 12px; }
  .cta__btn svg { width: 14px; height: 14px; }
  .cta__note { font-size: 10px; letter-spacing: 2.5px; }

  .system__visual { height: 300px; }
  .system__step-num { min-width: 44px; }

  .tech__slide-caption { padding: 20px; }
  .tech__slide-caption h4 { font-size: 14px; }

  .nano__item { padding: 32px 22px; }
  .nano__h { font-size: 19px; }
  .nano__p { font-size: 13px; }

  .product__card { padding: 40px 20px 32px; }
  .product__card-img { height: 220px; }
  .product__card-name { font-size: 23px; }

  .compare { aspect-ratio: 1/1; } /* square on narrowest screens */
  .compare__knob { width: 44px; height: 44px; }
  .compare__tag { font-size: 8.5px; padding: 5px 9px; }

  .review { padding: 28px 22px; }
  .review__quote { font-size: 32px; margin-bottom: 18px; }

  .footer { padding: 56px 18px 32px; }
  .footer__col h5 { font-size: 10px; letter-spacing: 2.5px; }
  .footer__col li { font-size: 12.5px; }
}

/* ============ UTILS ============ */
::selection {
  background: var(--gold);
  color: var(--black);
}

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--black-deep); }
::-webkit-scrollbar-thumb { background: var(--gray-dim); }
::-webkit-scrollbar-thumb:hover { background: var(--gold); }