/* ============================================================
   SYNZON INDIA — Editorial Luxury + Clinical Precision
   Aesthetic: Aesop meets Vogue meets pharmaceutical elegance
   Static CSS · Zero Dependencies · Hostinger-Ready
   ============================================================ */

/* ======================== VARIABLES ========================= */
:root {
  /* Palette — refined, muted luxury */
  --primary:          #0A1628;
  --primary-rgb:      10,22,40;
  --primary-light:    #152742;
  --accent:           #00B37E;
  --accent-rgb:       0,179,126;
  --accent-dark:      #009B6E;
  --accent-glow:      rgba(0,179,126,.1);
  --gold:             #C4A265;
  --gold-rgb:         196,162,101;
  --gold-light:       #D4B87A;
  --cream:            #F5F0E8;

  /* Backgrounds */
  --bg:               #F8F6F1;
  --bg-alt:           #EFECE4;
  --bg-dark:          #0A1628;
  --bg-darker:        #060F1D;
  --bg-card:          #FFFFFF;

  /* Text */
  --text:             #1A1A2E;
  --text-secondary:   #5A6070;
  --text-tertiary:    #8B919F;
  --text-on-dark:     #E4E6EB;
  --text-on-dark-dim: #7F8A9D;

  /* Borders */
  --border:           #DDD9D0;
  --border-dark:      #1C2E4A;

  /* Typography — the heart of the aesthetic */
  --font-display:     'Cormorant Garamond', 'Georgia', serif;
  --font-heading:     'Syne', 'Helvetica Neue', sans-serif;
  --font-body:        'DM Sans', 'Helvetica Neue', sans-serif;
  --font-mono:        'JetBrains Mono', 'Fira Code', monospace;

  /* Layout */
  --section-py:       clamp(100px, 12vw, 160px);
  --container:        1320px;
  --gutter:           clamp(20px, 4vw, 56px);

  /* Easings — cinematic */
  --ease-out-expo:    cubic-bezier(.16,1,.3,1);
  --ease-out-quart:   cubic-bezier(.25,1,.5,1);
  --ease-in-out:      cubic-bezier(.65,0,.35,1);
  --ease-smooth:      cubic-bezier(.4,0,.2,1);

  /* Radius */
  --r-sm:  4px;
  --r-md:  10px;
  --r-lg:  16px;
  --r-xl:  24px;
  --r-full:9999px;
}

/* ========================= RESET ============================ */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 16px;
}
body {
  font-family: var(--font-body);
  color: var(--text);
  background: var(--bg);
  line-height: 1.75;
  overflow-x: hidden;
  position: relative;
}
img, video, svg { display:block; max-width:100%; height:auto; }
a { color:inherit; text-decoration:none; }
button { font:inherit; cursor:pointer; border:none; background:none; }
ul,ol { list-style:none; }
input,textarea,select { font:inherit; }
::selection { background:rgba(var(--gold-rgb),.2); color:var(--primary); }

/* ==================== GRAIN OVERLAY ========================= */
/* Subtle film grain for tactile depth */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  opacity: .028;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px 256px;
}

/* ==================== CUSTOM SCROLLBAR ====================== */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb {
  background: rgba(var(--primary-rgb),.18);
  border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(var(--primary-rgb),.35); }
html { scrollbar-width: thin; scrollbar-color: rgba(var(--primary-rgb),.18) var(--bg); }

/* ====================== TYPOGRAPHY ========================== */
h1,h2,h3,h4,h5,h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.12;
  color: var(--text);
  letter-spacing: -0.02em;
}
/* Display — editorial serif for the biggest headings */
.display, .hero h1 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.05;
}
.h1, h1 { font-size: clamp(2.8rem, 5.8vw, 5.5rem); }
.h2, h2 { font-size: clamp(2rem, 3.8vw, 3.2rem); }
.h3, h3 { font-size: clamp(1.5rem, 2.2vw, 2rem); }
.h4, h4 { font-size: clamp(1.2rem, 1.6vw, 1.4rem); }
.h5, h5 { font-size: 1.05rem; }
.h6, h6 { font-size: .9rem; }

.text-lg { font-size: clamp(1.05rem, 1.3vw, 1.2rem); }
.text-sm { font-size: .875rem; }
.text-xs { font-size: .75rem; }

/* Eyebrow labels — mono + uppercase = precision */
.eyebrow {
  font-family: var(--font-mono);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.eyebrow::before {
  content: '';
  width: 36px;
  height: 1px;
  background: var(--accent);
}

.text-gradient {
  background: linear-gradient(135deg, var(--accent), #00D4AA, var(--gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

p + p { margin-top: 1em; }

/* ======================= LAYOUT ============================= */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.container--narrow { max-width: 900px; }
.container--wide   { max-width: 1480px; }

section {
  padding: var(--section-py) 0;
  position: relative;
}
section.dark {
  background: var(--bg-dark);
  color: var(--text-on-dark);
}
section.dark h1,
section.dark h2,
section.dark h3,
section.dark h4,
section.dark h5 { color: #fff; }
section.dark .eyebrow { color: var(--gold); }
section.dark .eyebrow::before { background: var(--gold); }
section.alt { background: var(--bg-alt); }

.grid { display:grid; gap:32px; }

.text-center { text-align:center; }

.section-header {
  max-width: 680px;
  margin-bottom: 72px;
}
.section-header.centered {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.section-header .eyebrow { margin-bottom: 20px; }
.section-header h2 { margin-bottom: 20px; }
.section-header p {
  color: var(--text-secondary);
  font-size: 1.05rem;
  line-height: 1.85;
}
section.dark .section-header p { color: var(--text-on-dark-dim); }

/* Accent line under section headings */
.section-header h2::after {
  content: '';
  display: block;
  width: 40px;
  height: 2px;
  background: var(--gold);
  margin-top: 20px;
  border-radius: 1px;
}
.section-header.centered h2::after {
  margin-left: auto;
  margin-right: auto;
}

/* ==================== PRELOADER ============================= */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: var(--primary);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: opacity .8s var(--ease-out-expo), visibility .8s;
}
.preloader.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.preloader__logo {
  font-family: var(--font-display);
  font-size: 2.8rem;
  font-weight: 500;
  color: #fff;
  letter-spacing: .06em;
  margin-bottom: 40px;
  opacity: 0;
  transform: translateY(20px);
  animation: preloaderFadeIn .8s var(--ease-out-expo) .2s forwards;
}
.preloader__logo span { color: var(--gold); }
.preloader__bar {
  width: 160px;
  height: 1px;
  background: rgba(255,255,255,.08);
  overflow: hidden;
  opacity: 0;
  animation: preloaderFadeIn .6s var(--ease-out-expo) .5s forwards;
}
.preloader__bar-inner {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--gold), var(--accent));
  animation: preloaderBar 1.6s var(--ease-in-out) .6s forwards;
}
@keyframes preloaderFadeIn { to { opacity:1; transform:translateY(0); } }
@keyframes preloaderBar { to { width:100%; } }

/* ==================== NAVIGATION ============================ */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 24px 0;
  transition: all .6s var(--ease-out-expo);
}
.nav.scrolled {
  background: rgba(248,246,241,.88);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-bottom: 1px solid rgba(var(--primary-rgb),.06);
  padding: 16px 0;
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.nav__logo {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 600;
  color: #fff;
  letter-spacing: .04em;
  transition: color .4s;
  z-index: 1001;
}
.nav__logo span { color: var(--gold); transition: color .4s; }
.nav.scrolled .nav__logo { color: var(--text); }
.nav.light-hero .nav__logo { color: var(--text); }

.nav__links {
  display: flex;
  align-items: center;
  gap: 40px;
}
.nav__link {
  font-family: var(--font-body);
  font-size: .8rem;
  font-weight: 500;
  color: rgba(255,255,255,.6);
  transition: color .35s;
  position: relative;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.nav__link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--gold);
  transition: width .5s var(--ease-out-expo);
}
.nav__link:hover, .nav__link.active { color: #fff; }
.nav__link:hover::after, .nav__link.active::after { width: 100%; }

.nav.scrolled .nav__link { color: var(--text-tertiary); }
.nav.scrolled .nav__link:hover, .nav.scrolled .nav__link.active { color: var(--text); }
.nav.light-hero .nav__link { color: var(--text-tertiary); }
.nav.light-hero .nav__link:hover, .nav.light-hero .nav__link.active { color: var(--text); }

.nav__cta {
  font-family: var(--font-heading);
  font-size: .75rem;
  font-weight: 600;
  color: var(--primary);
  background: var(--gold);
  padding: 10px 26px;
  border-radius: var(--r-full);
  letter-spacing: .04em;
  text-transform: uppercase;
  transition: all .4s var(--ease-out-expo);
}
.nav__cta:hover {
  background: var(--gold-light);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(var(--gold-rgb),.3);
}

/* Hamburger */
.nav__hamburger {
  display: none;
  flex-direction: column;
  gap: 6px;
  width: 28px;
  z-index: 1001;
}
.nav__hamburger span {
  display: block;
  width: 100%;
  height: 1.5px;
  background: #fff;
  border-radius: 2px;
  transition: all .4s var(--ease-out-expo);
}
.nav.scrolled .nav__hamburger span,
.nav.light-hero .nav__hamburger span { background: var(--text); }
.nav__hamburger.open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav__hamburger.open span:nth-child(2) { opacity:0; transform:scaleX(0); }
.nav__hamburger.open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* Mobile nav */
.nav__mobile {
  position: fixed;
  inset: 0;
  background: var(--primary);
  z-index: 999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  opacity: 0;
  visibility: hidden;
  transition: all .5s var(--ease-out-expo);
}
.nav__mobile.open { opacity:1; visibility:visible; }
.nav__mobile a {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 500;
  color: rgba(255,255,255,.5);
  transition: color .3s, transform .5s var(--ease-out-expo);
  transform: translateY(24px);
  opacity: 0;
  letter-spacing: .02em;
}
.nav__mobile.open a { transform: translateY(0); opacity: 1; }
.nav__mobile.open a:nth-child(1) { transition-delay:.08s; }
.nav__mobile.open a:nth-child(2) { transition-delay:.14s; }
.nav__mobile.open a:nth-child(3) { transition-delay:.2s; }
.nav__mobile.open a:nth-child(4) { transition-delay:.26s; }
.nav__mobile.open a:nth-child(5) { transition-delay:.32s; }
.nav__mobile.open a:nth-child(6) { transition-delay:.38s; }
.nav__mobile a:hover { color:#fff; }

/* ====================== HERO ================================ */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  position: relative;
  background: var(--primary);
  overflow: hidden;
  padding-top: 100px;
}
.hero__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.hero__gradient {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 55% at 65% 35%, rgba(var(--accent-rgb),.07) 0%, transparent 70%),
    radial-gradient(ellipse 50% 70% at 25% 75%, rgba(var(--gold-rgb),.05) 0%, transparent 60%),
    linear-gradient(170deg, rgba(var(--primary-rgb),.9) 0%, var(--primary) 100%);
}
.hero__pattern {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.025) 1px, transparent 0);
  background-size: 56px 56px;
}

/* Floating orbs */
.hero__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: .12;
  animation: orbFloat 25s ease-in-out infinite;
}
.hero__orb--1 {
  width: 600px; height: 600px;
  background: var(--accent);
  top: -15%; right: -8%;
}
.hero__orb--2 {
  width: 450px; height: 450px;
  background: var(--gold);
  bottom: -15%; left: -8%;
  animation-delay: -8s;
}
.hero__orb--3 {
  width: 350px; height: 350px;
  background: #4A7BD9;
  top: 35%; left: 25%;
  animation-delay: -16s;
}
@keyframes orbFloat {
  0%,100% { transform: translate(0,0) scale(1); }
  33%     { transform: translate(40px,-40px) scale(1.06); }
  66%     { transform: translate(-25px,25px) scale(.94); }
}

.hero__content {
  position: relative;
  z-index: 2;
  max-width: 820px;
}
.hero__eyebrow {
  font-family: var(--font-mono);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 28px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.hero__eyebrow::before {
  content: '';
  width: 44px;
  height: 1px;
  background: var(--gold);
}
.hero h1 {
  color: #fff;
  margin-bottom: 28px;
  line-height: 1.02;
  font-size: clamp(3.2rem, 6.5vw, 6.5rem);
}
.hero h1 .accent {
  color: var(--accent);
  font-style: italic;
}
.hero__sub {
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  color: var(--text-on-dark-dim);
  line-height: 1.85;
  max-width: 540px;
  margin-bottom: 44px;
}
.hero__actions {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

/* Scroll indicator */
.hero__scroll {
  position: absolute;
  bottom: 44px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: rgba(255,255,255,.25);
  font-size: .65rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-family: var(--font-mono);
}
.hero__scroll-line {
  width: 1px;
  height: 52px;
  background: rgba(255,255,255,.1);
  position: relative;
  overflow: hidden;
}
.hero__scroll-line::after {
  content: '';
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--gold);
  animation: scrollLine 2.2s var(--ease-in-out) infinite;
}
@keyframes scrollLine {
  0%   { top:-100%; }
  100% { top:100%; }
}

.hero--short {
  min-height: 60vh;
  padding-top: 140px;
  padding-bottom: 80px;
}

/* ======================= BUTTONS ============================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-heading);
  font-size: .8rem;
  font-weight: 600;
  padding: 16px 38px;
  border-radius: var(--r-full);
  transition: all .45s var(--ease-out-expo);
  position: relative;
  overflow: hidden;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.98); }

.btn--primary {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 4px 16px rgba(var(--accent-rgb),.2);
}
.btn--primary:hover {
  background: var(--accent-dark);
  box-shadow: 0 10px 36px rgba(var(--accent-rgb),.3);
}

.btn--gold {
  background: var(--gold);
  color: var(--primary);
}
.btn--gold:hover {
  background: var(--gold-light);
  box-shadow: 0 10px 36px rgba(var(--gold-rgb),.3);
}

.btn--outline {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,.2);
}
.btn--outline:hover {
  border-color: rgba(255,255,255,.45);
  background: rgba(255,255,255,.04);
}
.btn--outline-dark {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
}
.btn--outline-dark:hover {
  border-color: var(--gold);
  color: var(--gold);
}

.btn--secondary {
  background: var(--primary);
  color: #fff;
}
.btn--secondary:hover {
  background: var(--primary-light);
  box-shadow: 0 10px 36px rgba(var(--primary-rgb),.25);
}

.btn--sm { padding: 10px 24px; font-size:.72rem; }
.btn--lg { padding: 18px 48px; font-size:.85rem; }

.btn--icon svg {
  width: 16px; height: 16px;
  transition: transform .35s var(--ease-out-expo);
}
.btn--icon:hover svg { transform: translateX(4px); }

/* =================== MARQUEE BAND =========================== */
.marquee {
  overflow: hidden;
  padding: 20px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  position: relative;
}
.marquee.dark {
  border-color: var(--border-dark);
  background: var(--bg-dark);
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: marqueeScroll 40s linear infinite;
}
.marquee:hover .marquee__track {
  animation-play-state: paused;
}
.marquee__item {
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 0 32px;
  white-space: nowrap;
  font-family: var(--font-heading);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.marquee.dark .marquee__item { color: var(--text-on-dark-dim); }
.marquee__item .dot {
  width: 4px;
  height: 4px;
  background: var(--gold);
  border-radius: 50%;
  flex-shrink: 0;
}
@keyframes marqueeScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* =================== BRAND INTRO ============================ */
.brand-intro {
  padding: var(--section-py) 0;
}
.brand-intro__grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 100px;
  align-items: center;
}
.brand-intro__text p {
  color: var(--text-secondary);
  font-size: 1.05rem;
  line-height: 1.9;
}
.brand-intro__text h2 { margin-bottom: 24px; }
.brand-intro__text .eyebrow { margin-bottom: 20px; }

/* Stats — refined glass cards */
.stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.stat {
  padding: 32px;
  background: rgba(255,255,255,.6);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(var(--primary-rgb),.06);
  border-radius: var(--r-lg);
  transition: all .5s var(--ease-out-expo);
  position: relative;
  overflow: hidden;
}
.stat::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--gold), var(--accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s var(--ease-out-expo);
}
.stat:hover::before { transform: scaleX(1); }
.stat:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 48px rgba(var(--primary-rgb),.06);
}
.stat__number {
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 500;
  color: var(--primary);
  line-height: 1;
  margin-bottom: 6px;
  letter-spacing: -0.02em;
}
.stat__number .accent { color: var(--accent); }
.stat__label {
  font-family: var(--font-mono);
  font-size: .7rem;
  color: var(--text-tertiary);
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* ================== PRODUCT CATEGORIES ====================== */
.categories__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.category-card {
  position: relative;
  padding: 40px 28px 36px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  transition: all .5s var(--ease-out-expo);
  overflow: hidden;
  cursor: pointer;
}
.category-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(var(--accent-rgb),.03), rgba(var(--gold-rgb),.03));
  opacity: 0;
  transition: opacity .4s;
}
.category-card:hover::before { opacity: 1; }
.category-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--gold), var(--accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s var(--ease-out-expo);
}
.category-card:hover::after { transform: scaleX(1); }
.category-card:hover {
  border-color: transparent;
  box-shadow: 0 20px 56px rgba(var(--primary-rgb),.07);
  transform: translateY(-6px);
}
.category-card__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--r-md);
  background: rgba(var(--gold-rgb),.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  transition: all .4s var(--ease-out-expo);
}
.category-card__icon svg { width:22px; height:22px; color:var(--gold); }
.category-card:hover .category-card__icon {
  background: var(--gold);
  transform: scale(1.05);
}
.category-card:hover .category-card__icon svg { color: var(--primary); }
.category-card__title {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}
.category-card__count {
  font-family: var(--font-mono);
  font-size: .7rem;
  color: var(--text-tertiary);
  margin-bottom: 20px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.category-card__arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: .7rem;
  font-weight: 500;
  color: var(--gold);
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateX(-8px);
  transition: all .4s var(--ease-out-expo);
}
.category-card:hover .category-card__arrow {
  opacity: 1;
  transform: translateX(0);
}

/* ================== QUALITY HIGHLIGHTS ====================== */
.quality-section { padding: var(--section-py) 0; }
.quality__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.quality-card {
  text-align: center;
  padding: 52px 28px;
  border-radius: var(--r-lg);
  border: 1px solid var(--border-dark);
  transition: all .5s var(--ease-out-expo);
  background: rgba(255,255,255,.02);
  position: relative;
  overflow: hidden;
}
.quality-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 0%, rgba(var(--gold-rgb),.06) 0%, transparent 60%);
  opacity: 0;
  transition: opacity .5s;
}
.quality-card:hover::before { opacity: 1; }
.quality-card:hover {
  border-color: rgba(var(--gold-rgb),.25);
  transform: translateY(-4px);
}
.quality-card__icon {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: rgba(var(--gold-rgb),.08);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
  transition: all .5s var(--ease-out-expo);
}
.quality-card__icon svg { width:28px; height:28px; color:var(--gold); }
.quality-card:hover .quality-card__icon {
  background: rgba(var(--gold-rgb),.15);
  transform: scale(1.08);
}
.quality-card__title {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 12px;
  color: #fff;
}
.quality-card__desc {
  font-size: .85rem;
  color: var(--text-on-dark-dim);
  line-height: 1.75;
}

/* =================== PROCESS SECTION ======================== */
.process__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  position: relative;
}
.process__line {
  position: absolute;
  top: 50px;
  left: 12.5%;
  right: 12.5%;
  height: 1px;
  background: var(--border);
}
.process__line-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--gold), var(--accent));
  transition: width 1.8s var(--ease-out-expo);
}
.process__line-fill.animate { width: 100%; }
.process-step {
  text-align: center;
  padding: 0 16px;
  position: relative;
}
.process-step__number {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 28px;
  font-family: var(--font-mono);
  font-size: .8rem;
  font-weight: 600;
  color: var(--primary);
  position: relative;
  z-index: 2;
  transition: all .5s var(--ease-out-expo);
  letter-spacing: .04em;
}
.process-step:hover .process-step__number {
  border-color: var(--gold);
  background: var(--gold);
  color: var(--primary);
}
.process-step__title {
  font-family: var(--font-heading);
  font-size: .95rem;
  font-weight: 600;
  margin-bottom: 10px;
}
.process-step__desc {
  font-size: .83rem;
  color: var(--text-secondary);
  line-height: 1.75;
}

/* ==================== GLOBAL REACH ========================== */
.reach__content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 100px;
  align-items: center;
}
.reach__stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 40px;
}
.reach__stat {
  padding: 24px;
  background: rgba(var(--accent-rgb),.04);
  border-radius: var(--r-md);
  border: 1px solid rgba(var(--accent-rgb),.08);
}
.reach__stat-number {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 500;
  color: var(--accent);
  margin-bottom: 4px;
}
.reach__stat-label {
  font-family: var(--font-mono);
  font-size: .68rem;
  color: var(--text-secondary);
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* ====================== CTA SECTION ========================= */
.cta-section {
  padding: var(--section-py) 0;
  text-align: center;
}
.cta-section__inner {
  max-width: 720px;
  margin: 0 auto;
}
.cta-section h2 {
  margin-bottom: 20px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.2rem, 4vw, 3.5rem);
}
.cta-section p {
  color: var(--text-on-dark-dim);
  font-size: 1.05rem;
  margin-bottom: 44px;
  line-height: 1.85;
}
.cta-section .hero__actions { justify-content: center; }

/* ======================= FOOTER ============================= */
.footer {
  background: var(--bg-darker);
  color: var(--text-on-dark-dim);
  padding: 88px 0 0;
}
.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: 48px;
  padding-bottom: 64px;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.footer__brand-name {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: 16px;
  letter-spacing: .04em;
}
.footer__brand-name span { color: var(--gold); }
.footer__brand p {
  font-size: .88rem;
  line-height: 1.85;
  max-width: 320px;
  margin-bottom: 28px;
}
.footer__social {
  display: flex;
  gap: 10px;
}
.footer__social a {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.08);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .4s var(--ease-out-expo);
}
.footer__social a:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--primary);
  transform: translateY(-2px);
}
.footer__social a svg { width:14px; height:14px; }

.footer__col h5 {
  font-family: var(--font-heading);
  font-size: .75rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: 24px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.footer__col ul li { margin-bottom: 12px; }
.footer__col ul a {
  font-size: .85rem;
  color: var(--text-on-dark-dim);
  transition: color .3s, transform .35s;
  display: inline-block;
}
.footer__col ul a:hover { color: var(--gold); transform: translateX(4px); }

.footer__contact-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
  font-size: .85rem;
}
.footer__contact-item svg {
  width: 16px; height: 16px;
  color: var(--gold);
  flex-shrink: 0;
  margin-top: 3px;
}

.footer__bottom {
  padding: 24px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: .75rem;
  color: rgba(255,255,255,.25);
  font-family: var(--font-mono);
  letter-spacing: .04em;
}

/* Back to top */
.back-to-top {
  position: fixed;
  bottom: 32px;
  right: 32px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: all .5s var(--ease-out-expo);
  box-shadow: 0 4px 20px rgba(0,0,0,.15);
  border: 1px solid rgba(255,255,255,.06);
}
.back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.back-to-top:hover {
  background: var(--gold);
  color: var(--primary);
  transform: translateY(-3px);
}
.back-to-top svg { width:18px; height:18px; }

/* ====================== ABOUT PAGE ========================== */
.about-hero {
  padding-top: 180px;
  padding-bottom: 100px;
  background: var(--bg-alt);
  position: relative;
}
.about-hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--border);
}
.about-hero .section-header { max-width: 760px; }
.about-hero h1 {
  font-family: var(--font-display);
  font-weight: 500;
}

/* Values */
.values__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.value-card {
  padding: 44px 28px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  text-align: center;
  transition: all .5s var(--ease-out-expo);
  position: relative;
  overflow: hidden;
}
.value-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--gold), var(--accent));
  transform: scaleX(0);
  transition: transform .5s var(--ease-out-expo);
}
.value-card:hover::after { transform: scaleX(1); }
.value-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 56px rgba(var(--primary-rgb),.06);
  border-color: transparent;
}
.value-card__icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(var(--gold-rgb),.08);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 22px;
}
.value-card__icon svg { width:26px; height:26px; color:var(--gold); }
.value-card__title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1rem;
  margin-bottom: 12px;
}
.value-card__desc {
  font-size: .85rem;
  color: var(--text-secondary);
  line-height: 1.75;
}

/* Mission / Vision */
.mv__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.mv-card {
  padding: 52px 44px;
  border-radius: var(--r-lg);
  position: relative;
  overflow: hidden;
}
.mv-card--mission { background: var(--primary); color: #fff; }
.mv-card--vision { background: linear-gradient(135deg, var(--accent), #00D4AA); color: #fff; }
.mv-card__label {
  font-family: var(--font-mono);
  font-size: .65rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  opacity: .5;
  margin-bottom: 20px;
}
.mv-card__title {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 500;
  margin-bottom: 16px;
  color: #fff;
}
.mv-card__text { font-size: .95rem; line-height: 1.85; opacity: .8; }
.mv-card__decoration {
  position: absolute;
  right: -40px;
  bottom: -40px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 40px solid rgba(255,255,255,.04);
}

/* ==================== PRODUCTS PAGE ========================= */
.products-hero {
  padding-top: 180px;
  padding-bottom: 100px;
  background: var(--bg-alt);
}
.products-hero::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: var(--border);
}
.products-hero .section-header { max-width: 760px; }
.products-hero h1 { font-family: var(--font-display); font-weight: 500; }

/* Filter bar */
.filter-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 48px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--border);
}
.filter-btn {
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 500;
  padding: 10px 20px;
  border-radius: var(--r-full);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  transition: all .4s var(--ease-out-expo);
  cursor: pointer;
  background: transparent;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.filter-btn:hover { border-color: var(--gold); color: var(--gold); }
.filter-btn.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

/* Product cards */
.products__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.product-card {
  padding: 32px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  transition: all .5s var(--ease-out-expo);
  position: relative;
  overflow: hidden;
}
.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(var(--primary-rgb),.06);
  border-color: transparent;
}
.product-card__category {
  font-family: var(--font-mono);
  font-size: .62rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 12px;
}
.product-card__name {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 8px;
}
.product-card__sub {
  font-size: .8rem;
  color: var(--text-tertiary);
  margin-bottom: 16px;
}
.product-card__tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.product-card__tag {
  font-family: var(--font-mono);
  font-size: .6rem;
  padding: 5px 12px;
  border-radius: var(--r-full);
  background: var(--bg-alt);
  color: var(--text-secondary);
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.product-card__hover-line {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--gold), var(--accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s var(--ease-out-expo);
}
.product-card:hover .product-card__hover-line { transform: scaleX(1); }

/* ================== QUALITY PAGE ============================ */
.cert__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.cert-card {
  padding: 52px 36px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  text-align: center;
  transition: all .5s var(--ease-out-expo);
  position: relative;
  overflow: hidden;
}
.cert-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--gold), var(--accent));
  transform: scaleX(0);
  transition: transform .5s var(--ease-out-expo);
}
.cert-card:hover::after { transform: scaleX(1); }
.cert-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 56px rgba(var(--primary-rgb),.06);
  border-color: transparent;
}
.cert-card__badge {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: rgba(var(--gold-rgb),.08);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
}
.cert-card__badge svg { width:32px; height:32px; color:var(--gold); }
.cert-card__title {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 12px;
}
.cert-card__desc {
  font-size: .85rem;
  color: var(--text-secondary);
  line-height: 1.75;
}

/* Quality timeline */
.timeline {
  position: relative;
  padding-left: 44px;
  max-width: 700px;
}
.timeline::before {
  content: '';
  position: absolute;
  left: 16px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--border);
}
.timeline__item {
  position: relative;
  padding-bottom: 48px;
}
.timeline__item:last-child { padding-bottom: 0; }
.timeline__dot {
  position: absolute;
  left: -36px;
  top: 4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--gold);
  z-index: 1;
}
.timeline__title {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 8px;
}
.timeline__text {
  font-size: .88rem;
  color: var(--text-secondary);
  line-height: 1.75;
}

/* =================== CONTACT PAGE =========================== */
.contact-section { padding: var(--section-py) 0; }
.contact__grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 100px;
  align-items: start;
}
.contact__info h3 { margin-bottom: 16px; }
.contact__info > p {
  color: var(--text-secondary);
  margin-bottom: 40px;
  line-height: 1.85;
}
.contact__details {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-bottom: 40px;
}
.contact__detail {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.contact__detail-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--r-md);
  background: rgba(var(--gold-rgb),.08);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.contact__detail-icon svg { width:20px; height:20px; color:var(--gold); }
.contact__detail h5 { font-size: .85rem; font-weight: 600; margin-bottom: 4px; }
.contact__detail p { font-size: .88rem; color: var(--text-secondary); }
.contact__detail a { color: var(--accent); transition: color .3s; }
.contact__detail a:hover { color: var(--accent-dark); }

/* Contact form */
.contact-form {
  padding: 52px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  position: relative;
  overflow: hidden;
}
.contact-form::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--gold), var(--accent));
}
.contact-form h4 { margin-bottom: 8px; }
.contact-form > p {
  color: var(--text-secondary);
  font-size: .88rem;
  margin-bottom: 36px;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.form-group { margin-bottom: 18px; }
.form-group label {
  display: block;
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 8px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 14px 18px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-size: .88rem;
  color: var(--text);
  background: var(--bg);
  transition: all .35s;
  outline: none;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(var(--gold-rgb),.08);
}
.form-group textarea { resize: vertical; min-height: 120px; }
.form-group select { cursor: pointer; appearance: none; }
.form-submit { margin-top: 8px; }

/* ================== ANIMATION CLASSES ======================= */
.reveal {
  opacity: 0;
  transform: translateY(48px);
  transition: opacity .9s var(--ease-out-expo), transform .9s var(--ease-out-expo);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal--left {
  opacity: 0;
  transform: translateX(-48px);
  transition: opacity .9s var(--ease-out-expo), transform .9s var(--ease-out-expo);
}
.reveal--left.visible {
  opacity: 1;
  transform: translateX(0);
}
.reveal--right {
  opacity: 0;
  transform: translateX(48px);
  transition: opacity .9s var(--ease-out-expo), transform .9s var(--ease-out-expo);
}
.reveal--right.visible {
  opacity: 1;
  transform: translateX(0);
}
.reveal--scale {
  opacity: 0;
  transform: scale(.92);
  transition: opacity .9s var(--ease-out-expo), transform .9s var(--ease-out-expo);
}
.reveal--scale.visible {
  opacity: 1;
  transform: scale(1);
}

/* Stagger children */
.stagger-children > * {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .7s var(--ease-out-expo), transform .7s var(--ease-out-expo);
}
.stagger-children.visible > *:nth-child(1)  { transition-delay:.06s; }
.stagger-children.visible > *:nth-child(2)  { transition-delay:.12s; }
.stagger-children.visible > *:nth-child(3)  { transition-delay:.18s; }
.stagger-children.visible > *:nth-child(4)  { transition-delay:.24s; }
.stagger-children.visible > *:nth-child(5)  { transition-delay:.30s; }
.stagger-children.visible > *:nth-child(6)  { transition-delay:.36s; }
.stagger-children.visible > *:nth-child(7)  { transition-delay:.42s; }
.stagger-children.visible > *:nth-child(8)  { transition-delay:.48s; }
.stagger-children.visible > *:nth-child(9)  { transition-delay:.54s; }
.stagger-children.visible > *:nth-child(10) { transition-delay:.60s; }
.stagger-children.visible > * {
  opacity: 1;
  transform: translateY(0);
}

/* Counter */
.counter { font-variant-numeric: tabular-nums; }

/* Cursor glow */
.cursor-glow {
  position: fixed;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--gold-rgb),.04) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
  transform: translate(-50%, -50%);
  transition: left .6s ease, top .6s ease, opacity .6s ease;
  opacity: 0;
}
.cursor-glow.visible { opacity: 1; }

/* ==================== RESPONSIVE ============================ */
@media (max-width: 1024px) {
  .categories__grid { grid-template-columns: repeat(2, 1fr); }
  .quality__grid { grid-template-columns: repeat(2, 1fr); }
  .process__grid { grid-template-columns: repeat(2, 1fr); gap:40px; }
  .process__line { display:none; }
  .brand-intro__grid { grid-template-columns: 1fr; gap:56px; }
  .reach__content { grid-template-columns: 1fr; gap:56px; }
  .footer__grid { grid-template-columns: repeat(2, 1fr); }
  .contact__grid { grid-template-columns: 1fr; gap:56px; }
  .cert__grid { grid-template-columns: repeat(2, 1fr); }
  .products__grid { grid-template-columns: repeat(2, 1fr); }
  .mv__grid { grid-template-columns: 1fr; }
  .values__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .nav__links { display:none; }
  .nav__hamburger { display:flex; }

  .hero { padding-top: 80px; }
  .hero__actions { flex-direction:column; align-items:flex-start; }
  .hero__scroll { display:none; }

  .categories__grid { grid-template-columns: 1fr; }
  .quality__grid { grid-template-columns: 1fr; }
  .products__grid { grid-template-columns: 1fr; }
  .process__grid { grid-template-columns: 1fr; }
  .cert__grid { grid-template-columns: 1fr; }
  .values__grid { grid-template-columns: 1fr; }

  .stats { grid-template-columns: repeat(2, 1fr); gap:12px; }
  .stat { padding: 24px; }
  .stat__number { font-size: 2.2rem; }

  .footer__grid { grid-template-columns: 1fr; gap:28px; }
  .footer__bottom { flex-direction:column; gap:12px; text-align:center; }

  .form-row { grid-template-columns: 1fr; }
  .contact-form { padding: 32px 24px; }

  .filter-bar { gap:6px; }
  .filter-btn { padding:8px 14px; }

  .reach__stats { grid-template-columns: 1fr 1fr; }
  .mv-card { padding: 36px 28px; }
  .section-header { margin-bottom: 48px; }
  .about-hero, .products-hero { padding-top: 140px; }

  .marquee__item { font-size:.65rem; gap:20px; padding:0 20px; }
}

@media (max-width: 480px) {
  .stats { grid-template-columns: 1fr 1fr; }
  .stat__number { font-size: 1.8rem; }
  .reach__stats { grid-template-columns: 1fr; }
  .btn { width:100%; text-align:center; }
  .btn--sm { width:auto; }
}

/* =============== UTILITY: Reduced Motion ==================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal, .reveal--left, .reveal--right, .reveal--scale {
    opacity: 1 !important; transform: none !important;
  }
  .stagger-children > * {
    opacity: 1 !important; transform: none !important;
  }
  .marquee__track { animation: none !important; }
}

.page-content { opacity:1; transition: opacity .3s ease; }