/* =============================================================
   MERU CHEM PVT. LTD. — SHARED STYLESHEET
   -------------------------------------------------------------
   One design system, both pages.
     · Tokens, primitives, header, footer   → used everywhere
     · Homepage components                  → index.html
     · Category components                  → industrial-chemicals.html
   Palette sampled from the logo artwork:
     Logo blue #234181 · Logo green #24572E
   ============================================================= */

/* =============================================================
   MERU CHEM — DESIGN SYSTEM
   -------------------------------------------------------------
   Palette sampled directly from the supplied logo artwork:
     Logo blue  #234181   Logo green #24572E
   Everything else is a tint / shade derived from those two so the
   whole site stays inside the mark's own colour world.
   ============================================================= */
:root{
  /* ---- Brand core (sampled from logo) ---- */
  --blue:          #234181;
  --green:         #24572E;

  /* ---- Derived interactive tints ---- */
  --blue-700:      #1A3167;
  --blue-500:      #2F58AC;
  --blue-300:      #7C9AE0;
  --blue-100:      #DCE5F8;
  --green-600:     #2E7040;
  --green-500:     #3B8F4E;
  --green-400:     #5AB06D;
  --green-100:     #DEF0E2;

  /* ---- Neutrals ---- */
  --ink:           #0B1426;   /* darkest surface — blue-cast black */
  --ink-2:         #101E3A;   /* raised dark surface */
  --graphite:      #1F2A3F;
  --slate:         #5A6B85;   /* body copy on light */
  --slate-2:       #8A99AF;   /* captions */
  --paper:         #F4F6FA;   /* page canvas */
  --mist:          #E7ECF4;   /* subtle fills */
  --white:         #FFFFFF;
  --line:          rgba(35,65,129,.14);
  --line-soft:     rgba(35,65,129,.08);
  --line-dark:     rgba(255,255,255,.12);

  /* ---- Gradients ---- */
  --grad-brand:    linear-gradient(118deg, var(--blue) 0%, var(--blue-500) 45%, var(--green-500) 100%);
  --grad-deep:     linear-gradient(160deg, #0B1426 0%, #16233E 100%);

  /* ---- Elevation (soft, wide, low-opacity) ---- */
  --sh-xs:  0 1px 2px rgba(11,20,38,.05);
  --sh-sm:  0 2px 10px rgba(11,20,38,.06);
  --sh-md:  0 10px 30px -12px rgba(11,20,38,.16);
  --sh-lg:  0 28px 64px -28px rgba(11,20,38,.28);
  --sh-xl:  0 44px 96px -40px rgba(11,20,38,.34);
  --sh-glow:0 24px 60px -26px rgba(35,65,129,.55);

  /* ---- Radius ---- */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 30px;
  --r-pill: 999px;

  /* ---- Rhythm ---- */
  --sp:      clamp(84px, 9vw, 148px);   /* section padding block */
  --gutter:  clamp(20px, 4.5vw, 56px);
  --maxw:    1320px;

  /* ---- Motion ---- */
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

/* ============ RESET ============ */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Instrument Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
ul{ margin:0; padding:0; list-style:none; }
:focus-visible{ outline:3px solid var(--green-400); outline-offset:3px; border-radius:4px; }

/* ============ TYPE SCALE ============
   Archivo's width axis is pushed out to ~112 on display sizes —
   the slightly expanded letterforms read like plant signage and
   drum stencilling, which is where this company actually lives. */
h1,h2,h3,h4,.display{
  font-family:"Archivo",Impact,"Arial Narrow",sans-serif;
  font-variation-settings:"wdth" 110,"wght" 700;
  line-height:1.04;
  letter-spacing:-.028em;
  margin:0;
  color:var(--ink);
}
.h-hero{ font-size:clamp(2.5rem,5.2vw,4.5rem); font-variation-settings:"wdth" 112,"wght" 750; line-height:1.0; }
.h-sec { font-size:clamp(2.1rem,4.2vw,3.5rem); }
.h-card{ font-size:clamp(1.18rem,1.5vw,1.42rem); font-variation-settings:"wdth" 104,"wght" 700; letter-spacing:-.018em; line-height:1.18; }
p{ margin:0 0 1.1em; }
p:last-child{ margin-bottom:0; }

.lead{ font-size:clamp(1.05rem,1.35vw,1.24rem); color:var(--slate); line-height:1.68; }
.muted{ color:var(--slate); }

/* Eyebrow — mono, tracked out, with a bead marker from the logo */
.eyebrow{
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:.7rem; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--blue-500);
  display:inline-flex; align-items:center; gap:.7em;
  margin:0 0 1.15rem;
}
.eyebrow::before{
  content:""; width:20px; height:7px; flex:none;
  background:
    radial-gradient(circle at 3.5px 3.5px, var(--green-500) 3.5px, transparent 3.6px),
    radial-gradient(circle at 12px 3.5px, var(--green-500) 2.2px, transparent 2.3px),
    radial-gradient(circle at 18px 3.5px, var(--green-500) 1.4px, transparent 1.5px);
}
.on-dark .eyebrow{ color:var(--green-400); }
.on-dark .eyebrow::before{
  background:
    radial-gradient(circle at 3.5px 3.5px, var(--green-400) 3.5px, transparent 3.6px),
    radial-gradient(circle at 12px 3.5px, var(--green-400) 2.2px, transparent 2.3px),
    radial-gradient(circle at 18px 3.5px, var(--green-400) 1.4px, transparent 1.5px);
}

/* Mono utility label — used on every spec chip */
.mono{ font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:.72rem; letter-spacing:.09em; }

/* ============ LAYOUT PRIMITIVES ============ */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding-block:var(--sp); position:relative; }
.section--tight{ padding-block:calc(var(--sp) * .62); }
.on-dark{ background:var(--ink); color:#E8EDF6; }
.on-dark h1,.on-dark h2,.on-dark h3,.on-dark h4{ color:#fff; }
.on-dark .lead,.on-dark .muted{ color:#A9B7CE; }

.sec-head{ max-width:760px; margin-bottom:clamp(46px,5vw,72px); }
.sec-head--split{
  max-width:none; display:grid; gap:clamp(20px,3vw,56px);
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  align-items:end;
}
@media(max-width:900px){ .sec-head--split{ grid-template-columns:1fr; align-items:start; } }

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.65em;
  padding:1.02em 1.85em; border-radius:var(--r-pill);
  font-weight:600; font-size:.94rem; letter-spacing:.005em;
  position:relative; overflow:hidden; isolation:isolate;
  transition:transform .4s var(--ease-out), box-shadow .4s var(--ease-out), background-color .3s, color .3s, border-color .3s;
  white-space:nowrap;
}
.btn svg{ transition:transform .45s var(--ease-out); }
.btn:hover svg{ transform:translateX(4px); }
.btn:active{ transform:translateY(1px) scale(.99); }

/* primary — brand gradient with a sheen that sweeps on hover */
.btn--primary{ background:var(--grad-brand); color:#fff; box-shadow:var(--sh-glow); }
.btn--primary::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(118deg, var(--green-600), var(--blue-500));
  opacity:0; transition:opacity .45s var(--ease);
}
.btn--primary:hover{ transform:translateY(-2px); box-shadow:0 30px 66px -26px rgba(35,65,129,.62); }
.btn--primary:hover::after{ opacity:1; }

/* ghost on light */
.btn--ghost{ border:1.5px solid var(--line); color:var(--ink); background:rgba(255,255,255,.6); }
.btn--ghost:hover{ border-color:var(--blue); background:#fff; transform:translateY(-2px); box-shadow:var(--sh-md); }

/* ghost on dark — glass */
.btn--glass{
  border:1.5px solid rgba(255,255,255,.24); color:#fff;
  background:rgba(255,255,255,.07);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
}
.btn--glass:hover{ background:rgba(255,255,255,.15); border-color:rgba(255,255,255,.45); transform:translateY(-2px); }

.btn--sm{ padding:.72em 1.3em; font-size:.85rem; }

/* text link with animated rule */
.link-arrow{
  display:inline-flex; align-items:center; gap:.55em;
  font-weight:600; font-size:.93rem; color:var(--blue);
  padding-bottom:3px; position:relative;
}
.link-arrow::after{
  content:""; position:absolute; left:0; bottom:0; height:1.5px; width:100%;
  background:currentColor; transform:scaleX(0); transform-origin:right;
  transition:transform .45s var(--ease-out);
}
.link-arrow:hover::after{ transform:scaleX(1); transform-origin:left; }
.link-arrow svg{ transition:transform .4s var(--ease-out); }
.link-arrow:hover svg{ transform:translateX(4px); }
.on-dark .link-arrow{ color:var(--green-400); }

/* ============ SPEC CHIP — the recurring data device ============ */
.chips{ display:flex; flex-wrap:wrap; gap:6px; }
.chip{
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:.66rem; letter-spacing:.07em; text-transform:uppercase;
  padding:.42em .72em; border-radius:6px;
  background:var(--mist); color:var(--blue-700);
  border:1px solid var(--line-soft);
  white-space:nowrap;
}
.chip--green{ background:var(--green-100); color:var(--green-600); border-color:rgba(36,87,46,.14); }
.on-dark .chip{ background:rgba(255,255,255,.07); color:#C3D1E8; border-color:var(--line-dark); }

/* =============================================================
   SIGNATURE MOTIF — "bead chain"
   The logo carries a cluster of connected spheres (a molecule
   schematic). It is lifted out here as a reusable rail / divider
   so the mark's DNA shows up throughout the page.
   ============================================================= */
.beadrail{
  position:absolute; top:0; bottom:0; left:calc(var(--gutter) * .34); width:26px;
  pointer-events:none; opacity:.5;
}
.beadrail svg{ height:100%; width:100%; }
@media(max-width:1180px){ .beadrail{ display:none; } }

/* =============================================================
   1 — STICKY HEADER  (contact strip + logo + nav + mega menu)
   ============================================================= */
.topstrip{
  background:var(--ink); color:#93A4BE;
  font-size:.775rem; letter-spacing:.01em;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.topstrip .wrap{ display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:42px; }
.topstrip-l,.topstrip-r{ display:flex; align-items:center; gap:26px; flex-wrap:wrap; }
.topstrip a{ display:inline-flex; align-items:center; gap:.5em; transition:color .25s; }
.topstrip a:hover{ color:#fff; }
.topstrip svg{ opacity:.75; }
.ts-badge{
  font-family:"IBM Plex Mono",monospace; font-size:.66rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--green-400); border:1px solid rgba(90,176,109,.3); border-radius:var(--r-pill);
  padding:.25em .8em;
}
@media(max-width:980px){ .topstrip-l .ts-hide, .topstrip-r .ts-hide{ display:none; } }
@media(max-width:640px){ .topstrip{ display:none; } }

.header{
  position:sticky; top:0; z-index:900;
  background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:blur(18px) saturate(1.6); backdrop-filter:blur(18px) saturate(1.6);
  border-bottom:1px solid var(--line-soft);
  transition:box-shadow .35s var(--ease), background-color .35s;
}
.header.is-stuck{ box-shadow:0 10px 34px -22px rgba(11,20,38,.4); background:rgba(255,255,255,.94); }
.header .wrap{ display:flex; align-items:center; gap:clamp(16px,2.4vw,40px); min-height:82px; }

/* --- Logo lockup: bead cluster + angular M/C mark, drawn in SVG --- */
.brand{ display:flex; align-items:center; gap:13px; flex:none; }
.brand-mark{ width:46px; height:46px; flex:none; }
.brand-name{ line-height:1; }
.brand-name b{
  display:block; font-family:"Archivo",sans-serif;
  font-variation-settings:"wdth" 108,"wght" 800;
  font-size:1.22rem; letter-spacing:-.02em; color:var(--ink);
}
.brand-name span{
  display:block; font-family:"IBM Plex Mono",monospace;
  font-size:.575rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--slate-2); margin-top:4px;
}

/* --- Primary nav --- */
.nav{ display:flex; align-items:center; gap:4px; margin-left:auto; }
.nav-item{ position:relative; }
.nav-link{
  display:inline-flex; align-items:center; gap:.4em;
  padding:.72em .95em; border-radius:var(--r-sm);
  font-size:.925rem; font-weight:500; color:var(--graphite);
  transition:color .25s, background-color .25s;
}
.nav-link:hover,.nav-item.is-open .nav-link{ color:var(--blue); background:rgba(35,65,129,.05); }
.nav-link .caret{ transition:transform .35s var(--ease); }
.nav-item.is-open .nav-link .caret{ transform:rotate(180deg); }
.header-cta{ margin-left:14px; flex:none; }

/* --- MEGA MENU --- */
.mega{
  position:absolute; top:calc(100% + 14px); left:50%; transform:translateX(-50%) translateY(-10px);
  width:min(980px, calc(100vw - 48px));
  background:rgba(255,255,255,.96);
  -webkit-backdrop-filter:blur(24px); backdrop-filter:blur(24px);
  border:1px solid var(--line-soft); border-radius:var(--r-lg);
  box-shadow:var(--sh-xl);
  padding:34px; opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .34s var(--ease), transform .34s var(--ease-out), visibility .34s;
}
.nav-item.is-open .mega{ opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0); }
.mega-grid{ display:grid; grid-template-columns:repeat(3,1fr) .92fr; gap:28px; }
.mega-col h5{
  font-family:"IBM Plex Mono",monospace; font-size:.66rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--slate-2);
  margin:0 0 14px; padding-bottom:10px; border-bottom:1px solid var(--line-soft);
}
.mega-list li + li{ margin-top:2px; }
.mega-list a{
  display:block; padding:.5em .7em; margin-left:-.7em; border-radius:var(--r-sm);
  font-size:.9rem; color:var(--graphite);
  transition:background-color .25s, color .25s, transform .3s var(--ease-out);
}
.mega-list a:hover{ background:var(--mist); color:var(--blue); transform:translateX(3px); }
.mega-list small{ display:block; font-size:.74rem; color:var(--slate-2); margin-top:1px; }
.mega-promo{
  background:var(--grad-brand); color:#fff; border-radius:var(--r-md);
  padding:24px; display:flex; flex-direction:column; justify-content:space-between; gap:18px;
}
.mega-promo h6{ font-family:"Archivo",sans-serif; font-variation-settings:"wdth" 104,"wght" 700; font-size:1.1rem; margin:0 0 8px; line-height:1.2; }
.mega-promo p{ font-size:.82rem; color:rgba(255,255,255,.82); margin:0; }
.mega-promo .btn{ background:#fff; color:var(--blue); width:100%; padding:.8em 1em; font-size:.85rem; box-shadow:none; }
.mega-promo .btn:hover{ background:#fff; transform:translateY(-2px); }
@media(max-width:1120px){ .nav,.header-cta{ display:none; } }

/* --- Mobile drawer --- */
.burger{ display:none; margin-left:auto; width:46px; height:46px; border-radius:var(--r-sm); align-items:center; justify-content:center; }
.burger span{ display:block; width:22px; height:1.8px; background:var(--ink); position:relative; transition:transform .35s var(--ease), background-color .2s; }
.burger span::before,.burger span::after{ content:""; position:absolute; left:0; width:22px; height:1.8px; background:var(--ink); transition:transform .35s var(--ease); }
.burger span::before{ top:-7px; } .burger span::after{ top:7px; }
.burger.is-active span{ background:transparent; }
.burger.is-active span::before{ transform:translateY(7px) rotate(45deg); }
.burger.is-active span::after{ transform:translateY(-7px) rotate(-45deg); }
@media(max-width:1120px){ .burger{ display:flex; } }

.drawer{
  position:fixed; inset:0 0 0 auto; width:min(420px,88vw); z-index:950;
  background:#fff; box-shadow:var(--sh-xl);
  transform:translateX(101%); transition:transform .48s var(--ease-out);
  overflow-y:auto; padding:26px var(--gutter) 60px;
}
.drawer.is-open{ transform:translateX(0); }
.drawer-scrim{ position:fixed; inset:0; z-index:940; background:rgba(11,20,38,.5); opacity:0; visibility:hidden; transition:opacity .4s, visibility .4s; -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); }
.drawer-scrim.is-open{ opacity:1; visibility:visible; }
.drawer-top{ display:flex; justify-content:flex-end; margin-bottom:18px; }
.drawer-close{ font-size:1.6rem; line-height:1; padding:6px 10px; color:var(--slate); }
.drawer nav > a,.acc-trigger{
  display:flex; align-items:center; justify-content:space-between; width:100%;
  padding:16px 0; border-bottom:1px solid var(--line-soft);
  font-family:"Archivo",sans-serif; font-variation-settings:"wdth" 104,"wght" 600;
  font-size:1.12rem; color:var(--ink); text-align:left;
}
.acc-panel{ max-height:0; overflow:hidden; transition:max-height .45s var(--ease-out); }
.acc-panel ul{ padding:10px 0 16px; }
.acc-panel a{ display:block; padding:9px 0 9px 16px; font-size:.93rem; color:var(--slate); border-left:2px solid var(--line); }
.acc-panel a:hover{ color:var(--blue); border-left-color:var(--green-500); }
.drawer .btn{ width:100%; margin-top:26px; }

/* =============================================================
   2 — HERO
   Industrial ground built entirely in CSS/SVG so the file opens
   offline: deep blue-black field, brand aurora, hex lattice
   (reactor / molecular sieve), drifting bead constellation.
   ============================================================= */
.hero{
  position:relative; background:var(--ink); color:#fff; overflow:hidden;
  padding-block:clamp(90px,10vw,146px) clamp(120px,12vw,180px);
  isolation:isolate;
}
.hero-bg{ position:absolute; inset:0; z-index:0; }
.hero-aurora{
  position:absolute; inset:-30% -10%;
  background:
    radial-gradient(46% 52% at 74% 22%, rgba(47,88,172,.62) 0%, transparent 62%),
    radial-gradient(38% 46% at 90% 66%, rgba(59,143,78,.42) 0%, transparent 64%),
    radial-gradient(52% 60% at 12% 82%, rgba(35,65,129,.44) 0%, transparent 66%);
  filter:blur(12px);
  animation:drift 26s ease-in-out infinite alternate;
}
@keyframes drift{
  from{ transform:translate3d(0,0,0) scale(1); }
  to  { transform:translate3d(-3%,2%,0) scale(1.08); }
}
.hero-lattice{
  position:absolute; inset:0; opacity:.22;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='68' height='118' viewBox='0 0 68 118'%3E%3Cg fill='none' stroke='%237C9AE0' stroke-width='1'%3E%3Cpath d='M34 2 L64 19.5 L64 54.5 L34 72 L4 54.5 L4 19.5 Z'/%3E%3Cpath d='M34 61 L64 78.5 L64 113.5 L34 131 L4 113.5 L4 78.5 Z'/%3E%3C/g%3E%3C/svg%3E");
  -webkit-mask-image:radial-gradient(72% 78% at 50% 44%, #000 12%, transparent 78%);
  mask-image:radial-gradient(72% 78% at 50% 44%, #000 12%, transparent 78%);
}
.hero-grain{
  position:absolute; inset:0; opacity:.28; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
.hero-fade{ position:absolute; left:0; right:0; bottom:0; height:38%; background:linear-gradient(to top, var(--ink), transparent); }

/* floating beads — the logo motif, alive */
.hero-beads{ position:absolute; inset:0; overflow:hidden; }
.bead{
  position:absolute; border-radius:50%;
  background:radial-gradient(circle at 32% 28%, var(--green-400), var(--green) 72%);
  box-shadow:0 0 30px rgba(90,176,109,.42);
  animation:float 12s ease-in-out infinite;
}
.bead.b-blue{ background:radial-gradient(circle at 32% 28%, var(--blue-300), var(--blue) 72%); box-shadow:0 0 30px rgba(124,154,224,.4); }
@keyframes float{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-24px) } }

.hero .wrap{ position:relative; z-index:2; }
.hero-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.62fr); gap:clamp(32px,5vw,80px); align-items:center; }
@media(max-width:1024px){ .hero-grid{ grid-template-columns:1fr; } }

.hero h1{ color:#fff; max-width:14ch; }
.hero h1 .accent{
  background:linear-gradient(96deg, var(--green-400), var(--blue-300));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-sub{ max-width:56ch; margin-top:28px; font-size:clamp(1.02rem,1.28vw,1.17rem); color:#AFBED5; line-height:1.72; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:40px; }

/* certification ribbon under the fold-line */
.hero-certs{
  display:flex; flex-wrap:wrap; align-items:center; gap:12px 26px;
  margin-top:52px; padding-top:26px; border-top:1px solid rgba(255,255,255,.12);
}
.hero-certs .mono{ color:#7D8FAB; text-transform:uppercase; letter-spacing:.18em; font-size:.63rem; }
.cert{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:"IBM Plex Mono",monospace; font-size:.73rem; letter-spacing:.08em;
  color:#CBD7EA;
}
.cert i{ width:6px; height:6px; border-radius:50%; background:var(--green-400); display:inline-block; }

/* --- Floating statistic cards (glassmorphism, used sparingly) --- */
.hero-stats{ display:grid; gap:16px; }
.statcard{
  background:rgba(255,255,255,.075);
  -webkit-backdrop-filter:blur(20px) saturate(1.4); backdrop-filter:blur(20px) saturate(1.4);
  border:1px solid rgba(255,255,255,.16);
  border-radius:var(--r-lg); padding:24px 26px;
  display:flex; align-items:center; gap:20px;
  box-shadow:0 24px 60px -34px rgba(0,0,0,.8);
  transition:transform .5s var(--ease-out), border-color .4s, background-color .4s;
  animation:hover-idle 7s ease-in-out infinite;
}
.statcard:nth-child(2){ margin-left:clamp(0px,3vw,42px); animation-delay:-2.4s; }
.statcard:nth-child(3){ animation-delay:-4.6s; }
.statcard:hover{ transform:translateY(-6px); border-color:rgba(90,176,109,.55); background:rgba(255,255,255,.12); }
@keyframes hover-idle{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-9px) } }
.statcard-num{
  font-family:"Archivo",sans-serif; font-variation-settings:"wdth" 108,"wght" 800;
  font-size:2.5rem; line-height:1; color:#fff; letter-spacing:-.03em;
}
.statcard-num sup{ font-size:.42em; vertical-align:super; color:var(--green-400); margin-left:2px; }
.statcard-txt{ font-size:.85rem; color:#AFBED5; line-height:1.45; }
.statcard-txt b{ display:block; color:#fff; font-weight:600; font-size:.9rem; margin-bottom:2px; }
.statcard-icon{
  width:46px; height:46px; flex:none; border-radius:13px;
  background:rgba(90,176,109,.16); border:1px solid rgba(90,176,109,.3);
  display:grid; place-items:center; color:var(--green-400);
}

/* running marquee of chemicals — a live "stock list" ticker */
.ticker{ background:var(--ink-2); border-top:1px solid rgba(255,255,255,.08); border-bottom:1px solid rgba(255,255,255,.08); overflow:hidden; padding:15px 0; }
.ticker-track{ display:flex; gap:56px; width:max-content; animation:slide 46s linear infinite; }
.ticker:hover .ticker-track{ animation-play-state:paused; }
@keyframes slide{ to{ transform:translateX(-50%); } }
.ticker span{
  font-family:"IBM Plex Mono",monospace; font-size:.74rem; letter-spacing:.16em;
  text-transform:uppercase; color:#8496B2; display:inline-flex; align-items:center; gap:.75em; white-space:nowrap;
}
.ticker span::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--green-500); }

/* =============================================================
   3 — COMPANY INTRODUCTION
   ============================================================= */
.intro-grid{
  display:grid; grid-template-columns:minmax(0,.88fr) minmax(0,1.02fr);
  gap:clamp(36px,5.5vw,84px); align-items:center;
}
@media(max-width:960px){ .intro-grid{ grid-template-columns:1fr; } }

/* Image placeholder — designed, not a grey box. Swap the .ph-media
   background for the final photograph. */
.ph-frame{ position:relative; }
.ph-media{
  aspect-ratio:4/4.6; border-radius:var(--r-xl); overflow:hidden; position:relative;
  background:
    radial-gradient(60% 50% at 24% 14%, rgba(47,88,172,.55), transparent 62%),
    radial-gradient(50% 45% at 84% 78%, rgba(59,143,78,.5), transparent 60%),
    linear-gradient(158deg, #16233E, #0B1426);
  box-shadow:var(--sh-lg);
}
.ph-media::after{
  content:""; position:absolute; inset:0; opacity:.3;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='54' height='94' viewBox='0 0 54 94'%3E%3Cg fill='none' stroke='%237C9AE0' stroke-width='.9'%3E%3Cpath d='M27 2 L51 16 L51 44 L27 58 L3 44 L3 16 Z'/%3E%3Cpath d='M27 48 L51 62 L51 90 L27 104 L3 90 L3 62 Z'/%3E%3C/g%3E%3C/svg%3E");
  -webkit-mask-image:linear-gradient(200deg,#000,transparent 70%); mask-image:linear-gradient(200deg,#000,transparent 70%);
}
.ph-label{
  position:absolute; left:22px; bottom:22px; z-index:2;
  font-family:"IBM Plex Mono",monospace; font-size:.63rem; letter-spacing:.16em;
  text-transform:uppercase; color:rgba(255,255,255,.62);
  border:1px dashed rgba(255,255,255,.3); border-radius:6px; padding:.5em .8em;
}
/* floating credential card overlapping the image */
.ph-card{
  position:absolute; right:-8%; bottom:9%; z-index:3;
  background:#fff; border-radius:var(--r-lg); padding:22px 26px;
  box-shadow:var(--sh-lg); border:1px solid var(--line-soft);
  display:flex; align-items:center; gap:18px; max-width:290px;
  transition:transform .5s var(--ease-out);
}
.ph-card:hover{ transform:translateY(-5px); }
.ph-card-num{
  font-family:"Archivo",sans-serif; font-variation-settings:"wdth" 108,"wght" 800;
  font-size:2.5rem; line-height:1; letter-spacing:-.03em;
  background:var(--grad-brand); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.ph-card p{ font-size:.8rem; color:var(--slate); line-height:1.42; margin:0; }
@media(max-width:960px){ .ph-card{ right:4%; } }
@media(max-width:520px){ .ph-card{ position:static; margin-top:-34px; margin-inline:16px; max-width:none; } }

/* key-figure row inside the intro copy */
.intro-figs{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin:38px 0 34px; }
.intro-fig{ padding:18px 0; border-top:2px solid var(--line); transition:border-color .4s; }
.intro-fig:hover{ border-top-color:var(--green-500); }
.intro-fig b{
  display:block; font-family:"Archivo",sans-serif; font-variation-settings:"wdth" 106,"wght" 800;
  font-size:1.85rem; letter-spacing:-.03em; color:var(--blue); line-height:1;
}
.intro-fig span{ font-size:.78rem; color:var(--slate); display:block; margin-top:7px; }
@media(max-width:560px){ .intro-figs{ grid-template-columns:1fr 1fr; } }

/* =============================================================
   4 — PRODUCT CATEGORIES
   Cards are styled after a chemical drum label: hairline frame,
   an index number, a colour band that fills on hover, and a
   monospaced spec footer.
   ============================================================= */
.cat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
@media(max-width:1180px){ .cat-grid{ grid-template-columns:repeat(3,1fr); } }
@media(max-width:860px){  .cat-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:540px){  .cat-grid{ grid-template-columns:1fr; } }

.cat{
  position:relative; background:#fff; border:1px solid var(--line-soft);
  border-radius:var(--r-lg); padding:30px 26px 26px; overflow:hidden;
  display:flex; flex-direction:column; gap:16px; min-height:294px;
  box-shadow:var(--sh-xs);
  transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out), border-color .4s;
}
.cat::before{ /* top band */
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--grad-brand); transform:scaleX(0); transform-origin:left;
  transition:transform .55s var(--ease-out);
}
.cat:hover{ transform:translateY(-8px); box-shadow:var(--sh-lg); border-color:transparent; }
.cat:hover::before{ transform:scaleX(1); }
.cat-idx{
  position:absolute; top:24px; right:24px;
  font-family:"IBM Plex Mono",monospace; font-size:.68rem; letter-spacing:.12em;
  color:var(--slate-2); transition:color .35s;
}
.cat:hover .cat-idx{ color:var(--green-500); }
.cat-ico{
  width:52px; height:52px; border-radius:15px; flex:none;
  background:linear-gradient(150deg, var(--blue-100), #fff);
  border:1px solid var(--line-soft);
  display:grid; place-items:center; color:var(--blue);
  transition:background .45s, color .45s, transform .5s var(--ease-out);
}
.cat:hover .cat-ico{ background:var(--grad-brand); color:#fff; transform:scale(1.05) rotate(-4deg); }
.cat p{ font-size:.875rem; color:var(--slate); line-height:1.6; flex:1; }
.cat-foot{ padding-top:16px; border-top:1px dashed var(--line); }

/* =============================================================
   5 — INDUSTRIES WE SERVE  (dark band, wide tiles)
   ============================================================= */
.ind-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
@media(max-width:900px){ .ind-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:560px){ .ind-grid{ grid-template-columns:1fr; } }
.ind{
  position:relative; padding:34px 30px 30px; border-radius:var(--r-lg);
  background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.1);
  overflow:hidden; transition:transform .5s var(--ease-out), background-color .45s, border-color .45s;
}
.ind::after{
  content:""; position:absolute; inset:0; opacity:0; transition:opacity .5s;
  background:radial-gradient(120% 100% at 0% 100%, rgba(59,143,78,.28), transparent 62%);
}
.ind:hover{ transform:translateY(-6px); background:rgba(255,255,255,.08); border-color:rgba(90,176,109,.4); }
.ind:hover::after{ opacity:1; }
.ind > *{ position:relative; z-index:1; }
.ind-ico{
  width:50px; height:50px; border-radius:14px; margin-bottom:22px;
  background:rgba(124,154,224,.14); border:1px solid rgba(124,154,224,.24);
  display:grid; place-items:center; color:var(--green-400);
  transition:transform .5s var(--ease-out);
}
.ind:hover .ind-ico{ transform:translateY(-3px) scale(1.06); }
.ind h3{ font-size:1.24rem; margin-bottom:10px; }
.ind p{ font-size:.855rem; color:#9FAEC6; line-height:1.6; margin-bottom:18px; }
.ind-list{ display:flex; flex-wrap:wrap; gap:6px; }

/* =============================================================
   6 — WHY CHOOSE MERU CHEM  (asymmetric: sticky claim + list)
   ============================================================= */
.why-grid{ display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); gap:clamp(34px,5vw,80px); align-items:start; }
@media(max-width:960px){ .why-grid{ grid-template-columns:1fr; } }
.why-aside{ position:sticky; top:120px; }
@media(max-width:960px){ .why-aside{ position:static; } }
.why-list{ display:grid; gap:2px; }
.why-item{
  display:grid; grid-template-columns:auto 1fr; gap:22px; align-items:start;
  padding:28px 26px; border-radius:var(--r-md); background:transparent;
  transition:background-color .45s var(--ease), transform .45s var(--ease-out), box-shadow .45s;
}
.why-item:hover{ background:#fff; transform:translateX(6px); box-shadow:var(--sh-md); }
.why-ico{
  width:46px; height:46px; border-radius:13px; flex:none; display:grid; place-items:center;
  background:var(--white); border:1px solid var(--line); color:var(--blue);
  box-shadow:var(--sh-xs); transition:background .45s, color .45s;
}
.why-item:hover .why-ico{ background:var(--grad-brand); color:#fff; border-color:transparent; }
.why-item h3{ font-size:1.14rem; margin-bottom:7px; }
.why-item p{ font-size:.885rem; color:var(--slate); line-height:1.62; margin:0; }

/* =============================================================
   7 — COMPANY STRENGTH  (animated counters on a deep band)
   ============================================================= */
.strength{ background:var(--ink); position:relative; overflow:hidden; }
.strength::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(48% 60% at 82% 12%, rgba(47,88,172,.4), transparent 66%),
    radial-gradient(40% 52% at 8% 88%, rgba(59,143,78,.3), transparent 66%);
}
.strength .wrap{ position:relative; z-index:1; }
.stat-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:2px; margin-top:clamp(40px,4vw,64px); }
@media(max-width:860px){ .stat-row{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:460px){ .stat-row{ grid-template-columns:1fr; } }
.stat{
  padding:38px 30px; border-left:1px solid rgba(255,255,255,.11);
  transition:background-color .5s;
}
.stat:first-child{ border-left:0; }
@media(max-width:860px){ .stat:nth-child(3){ border-left:0; } }
@media(max-width:460px){ .stat{ border-left:0; border-top:1px solid rgba(255,255,255,.11); } .stat:first-child{ border-top:0; } }
.stat:hover{ background:rgba(255,255,255,.04); }
.stat-num{
  font-family:"Archivo",sans-serif; font-variation-settings:"wdth" 112,"wght" 800;
  font-size:clamp(3rem,5.2vw,4.4rem); line-height:.94; letter-spacing:-.045em; color:#fff;
  display:flex; align-items:baseline; gap:2px;
}
.stat-num em{ font-style:normal; font-size:.44em; color:var(--green-400); }
.stat-label{ font-size:.9rem; color:#fff; font-weight:600; margin-top:16px; }
.stat-sub{ font-size:.8rem; color:#8B9BB6; margin-top:5px; line-height:1.5; }
/* thin progress hairline that fills when the counter runs */
.stat-bar{ height:2px; background:rgba(255,255,255,.13); margin-top:22px; overflow:hidden; border-radius:2px; }
.stat-bar i{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--blue-300),var(--green-400)); transition:width 1.8s var(--ease-out); }
.is-in .stat-bar i{ width:var(--fill,72%); }

/* =============================================================
   8 — FEATURED PRODUCTS  (spec-sheet cards)
   ============================================================= */
.prod-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
@media(max-width:980px){ .prod-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:620px){ .prod-grid{ grid-template-columns:1fr; } }
.prod{
  background:#fff; border:1px solid var(--line-soft); border-radius:var(--r-lg);
  overflow:hidden; box-shadow:var(--sh-xs);
  transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
  display:flex; flex-direction:column;
}
.prod:hover{ transform:translateY(-8px); box-shadow:var(--sh-lg); }
.prod-visual{
  height:172px; position:relative; overflow:hidden;
  background:linear-gradient(152deg,#16233E,#0B1426);
}
.prod-visual::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(66% 76% at 50% 108%, var(--glow, rgba(47,88,172,.72)), transparent 66%);
  transition:transform .7s var(--ease-out);
}
.prod:hover .prod-visual::before{ transform:scale(1.16); }
/* The texture changes with the state of matter — a liquid gets a
   meniscus ripple, a powder gets grain, a flake gets shards. */
.prod-visual::after{ content:""; position:absolute; inset:0; opacity:.3; }
.prod-visual--powder::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34'%3E%3Ccircle cx='7' cy='9' r='1.5' fill='%23A9C1F0'/%3E%3Ccircle cx='24' cy='5' r='1' fill='%23A9C1F0'/%3E%3Ccircle cx='18' cy='22' r='1.7' fill='%23A9C1F0'/%3E%3Ccircle cx='30' cy='28' r='1.1' fill='%23A9C1F0'/%3E%3Ccircle cx='4' cy='27' r='1.2' fill='%23A9C1F0'/%3E%3C/svg%3E");
}
.prod-visual--liquid::after{
  background:
    radial-gradient(120% 62% at 50% 128%, transparent 46%, rgba(169,193,240,.32) 47%, transparent 48.4%),
    radial-gradient(120% 62% at 50% 142%, transparent 46%, rgba(169,193,240,.24) 47%, transparent 48.4%),
    radial-gradient(120% 62% at 50% 156%, transparent 46%, rgba(169,193,240,.16) 47%, transparent 48.4%);
}
.prod-visual--flake::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='46'%3E%3Cg fill='none' stroke='%23A9C1F0' stroke-width='1'%3E%3Cpath d='M6 12 L15 7 L19 16 L9 20 Z'/%3E%3Cpath d='M27 25 L37 21 L41 31 L30 34 Z'/%3E%3Cpath d='M14 33 L22 31 L24 38 L16 40 Z'/%3E%3C/g%3E%3C/svg%3E");
}
/* fine vessel silhouette, barely there */
.prod-visual > .vessel{
  position:absolute; left:50%; bottom:-12%; transform:translateX(-50%);
  width:52%; height:112%; z-index:1; opacity:.3; color:#A9C1F0;
  transition:transform .7s var(--ease-out), opacity .5s;
}
.prod:hover .prod-visual > .vessel{ transform:translateX(-50%) translateY(-7px); opacity:.5; }
.prod-form{ /* the state-of-matter tag: flake / liquid / powder */
  position:absolute; top:16px; left:16px; z-index:2;
  font-family:"IBM Plex Mono",monospace; font-size:.62rem; letter-spacing:.15em; text-transform:uppercase;
  color:#fff; background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.22);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border-radius:var(--r-pill); padding:.42em .85em;
}
.prod-cas{
  position:absolute; right:16px; bottom:14px; z-index:2;
  font-family:"IBM Plex Mono",monospace; font-size:.66rem; letter-spacing:.08em; color:rgba(255,255,255,.6);
}
.prod-body{ padding:24px 26px 26px; display:flex; flex-direction:column; gap:14px; flex:1; }
.prod-body h3{ font-size:1.2rem; }
.prod-spec{ display:grid; gap:0; margin-top:2px; }
.prod-spec div{
  display:flex; justify-content:space-between; gap:14px;
  padding:9px 0; border-bottom:1px solid var(--line-soft);
  font-family:"IBM Plex Mono",monospace; font-size:.735rem; letter-spacing:.03em;
}
.prod-spec dt,.prod-spec span:first-child{ color:var(--slate-2); }
.prod-spec span:last-child{ color:var(--ink); font-weight:500; }
.prod-foot{ margin-top:auto; padding-top:6px; }

/* =============================================================
   9 — DISTRIBUTION NETWORK
   ============================================================= */
.net-grid{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(34px,5vw,72px); align-items:center; }
@media(max-width:960px){ .net-grid{ grid-template-columns:1fr; } }
.net-map{
  position:relative; aspect-ratio:16/11; border-radius:var(--r-xl); overflow:hidden;
  background:linear-gradient(160deg,#13213C,#0B1426);
  border:1px solid rgba(255,255,255,.1); box-shadow:var(--sh-lg);
}
.net-map svg{ position:absolute; inset:0; width:100%; height:100%; }
.node{ animation:pulse 3.4s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
.node:nth-child(2n){ animation-delay:-1.1s; }
.node:nth-child(3n){ animation-delay:-2.2s; }
@keyframes pulse{ 0%,100%{ opacity:.35; r:14 } 50%{ opacity:0; r:26 } }
.net-legend{
  position:absolute; left:20px; bottom:20px; z-index:2;
  display:flex; gap:18px; flex-wrap:wrap;
  font-family:"IBM Plex Mono",monospace; font-size:.63rem; letter-spacing:.1em; text-transform:uppercase; color:#93A4BE;
}
.net-legend i{ width:7px; height:7px; border-radius:50%; display:inline-block; margin-right:.55em; }
.net-list{ display:grid; gap:1px; margin-top:34px; }
.net-row{
  display:grid; grid-template-columns:auto 1fr auto; gap:20px; align-items:center;
  padding:19px 4px; border-bottom:1px solid var(--line-soft);
  transition:padding-left .4s var(--ease-out), background-color .4s;
}
.net-row:hover{ padding-left:14px; background:rgba(35,65,129,.03); }
.net-row .mono{ color:var(--slate-2); }
.net-row b{ font-family:"Archivo",sans-serif; font-variation-settings:"wdth" 104,"wght" 650; font-size:1.02rem; }
.net-row span:last-child{ font-size:.82rem; color:var(--slate); text-align:right; }

/* =============================================================
   10 — CTA BANNER
   ============================================================= */
.cta{
  position:relative; overflow:hidden; border-radius:var(--r-xl);
  background:var(--grad-brand); color:#fff;
  padding:clamp(46px,6vw,84px) clamp(28px,5vw,76px);
  box-shadow:var(--sh-xl);
}
.cta::before{
  content:""; position:absolute; inset:0; opacity:.2;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='68' height='118' viewBox='0 0 68 118'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1'%3E%3Cpath d='M34 2 L64 19.5 L64 54.5 L34 72 L4 54.5 L4 19.5 Z'/%3E%3Cpath d='M34 61 L64 78.5 L64 113.5 L34 131 L4 113.5 L4 78.5 Z'/%3E%3C/g%3E%3C/svg%3E");
  -webkit-mask-image:linear-gradient(100deg,transparent 34%,#000); mask-image:linear-gradient(100deg,transparent 34%,#000);
}
.cta-inner{ position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:clamp(26px,4vw,60px); align-items:center; }
@media(max-width:860px){ .cta-inner{ grid-template-columns:1fr; } }
.cta h2{ color:#fff; max-width:18ch; }
.cta p{ color:rgba(255,255,255,.84); max-width:52ch; margin-top:18px; font-size:1.03rem; }
.cta-actions{ display:flex; flex-direction:column; gap:12px; min-width:236px; }
.cta .btn--white{ background:#fff; color:var(--blue); box-shadow:0 20px 48px -20px rgba(0,0,0,.5); }
.cta .btn--white:hover{ transform:translateY(-2px); }
.cta-note{ font-family:"IBM Plex Mono",monospace; font-size:.68rem; letter-spacing:.1em; color:rgba(255,255,255,.66); text-align:center; }

/* =============================================================
   11 — FAQ
   ============================================================= */
.faq-grid{ display:grid; grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr); gap:clamp(30px,5vw,76px); align-items:start; }
@media(max-width:900px){ .faq-grid{ grid-template-columns:1fr; } }
.faq-list{ border-top:1px solid var(--line); }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-q{
  display:flex; align-items:flex-start; justify-content:space-between; gap:26px; width:100%;
  padding:26px 4px; text-align:left;
  font-family:"Archivo",sans-serif; font-variation-settings:"wdth" 104,"wght" 650;
  font-size:clamp(1.02rem,1.3vw,1.16rem); line-height:1.35; letter-spacing:-.012em;
  color:var(--ink); transition:color .3s;
}
.faq-q:hover{ color:var(--blue); }
.faq-sign{
  width:32px; height:32px; flex:none; border-radius:50%; border:1px solid var(--line);
  display:grid; place-items:center; position:relative; transition:background-color .4s, border-color .4s, transform .5s var(--ease-out);
}
.faq-sign::before,.faq-sign::after{ content:""; position:absolute; background:var(--blue); transition:transform .45s var(--ease-out), background-color .4s; }
.faq-sign::before{ width:12px; height:1.6px; }
.faq-sign::after{ width:1.6px; height:12px; }
.faq-item.is-open .faq-sign{ background:var(--grad-brand); border-color:transparent; transform:rotate(180deg); }
.faq-item.is-open .faq-sign::before,.faq-item.is-open .faq-sign::after{ background:#fff; }
.faq-item.is-open .faq-sign::after{ transform:scaleY(0); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .5s var(--ease-out); }
.faq-a p{ padding:0 60px 28px 4px; font-size:.93rem; color:var(--slate); line-height:1.72; }
.faq-help{
  background:#fff; border:1px solid var(--line-soft); border-radius:var(--r-lg);
  padding:30px; margin-top:32px; box-shadow:var(--sh-sm);
}
.faq-help h4{ font-size:1.08rem; margin-bottom:8px; }
.faq-help p{ font-size:.86rem; color:var(--slate); margin-bottom:18px; }

/* =============================================================
   12 — FOOTER
   ============================================================= */
.footer{ background:var(--ink); color:#98A8C0; padding-top:clamp(64px,7vw,104px); position:relative; overflow:hidden; }
.footer::before{
  content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(124,154,224,.5),rgba(90,176,109,.5),transparent);
}
.foot-top{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1.25fr; gap:clamp(26px,3.5vw,56px); padding-bottom:56px; }
@media(max-width:960px){ .foot-top{ grid-template-columns:1fr 1fr; } }
@media(max-width:560px){ .foot-top{ grid-template-columns:1fr; } }
.footer .brand-name b{ color:#fff; }
.footer .brand-name span{ color:#6F80A0; }
.foot-about p{ font-size:.87rem; line-height:1.72; margin-top:22px; max-width:38ch; }
.foot-col h5{
  font-family:"IBM Plex Mono",monospace; font-size:.66rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:#fff; margin:0 0 20px;
}
.foot-col li + li{ margin-top:11px; }
.foot-col a{ font-size:.885rem; transition:color .28s, padding-left .35s var(--ease-out); display:inline-block; }
.foot-col a:hover{ color:#fff; padding-left:5px; }
.foot-contact li{ display:flex; gap:12px; font-size:.875rem; line-height:1.6; }
.foot-contact li + li{ margin-top:18px; }
.foot-contact svg{ flex:none; margin-top:4px; color:var(--green-400); }
.foot-contact a:hover{ color:#fff; }
.foot-social{ display:flex; gap:10px; margin-top:26px; }
.foot-social a{
  width:38px; height:38px; border-radius:11px; display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.13); color:#98A8C0;
  transition:background-color .35s, color .35s, border-color .35s, transform .4s var(--ease-out);
}
.foot-social a:hover{ background:var(--grad-brand); color:#fff; border-color:transparent; transform:translateY(-3px); }
.foot-bar{
  border-top:1px solid rgba(255,255,255,.09); padding:26px 0 30px;
  display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;
  font-size:.79rem; color:#6F80A0;
}
.foot-bar nav{ display:flex; gap:24px; flex-wrap:wrap; }
.foot-bar a:hover{ color:#fff; }

/* ============ SCROLL REVEAL ============ */
[data-reveal]{ opacity:0; transform:translateY(26px); transition:opacity .85s var(--ease-out), transform .85s var(--ease-out); transition-delay:var(--d,0ms); }
[data-reveal].is-in{ opacity:1; transform:none; }

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  [data-reveal]{ opacity:1; transform:none; }
}


/* ============================================================================
   ============================================================================
   CATEGORY PAGE COMPONENTS
   Everything below is used by industrial-chemicals.html and any future
   product category page built on the same template.
   ============================================================================
   ============================================================================ */

/* =============================================================
   1 — CATEGORY HERO + BREADCRUMB
   Shorter than the homepage hero. Same industrial ground, but
   the headline gives way to a specification summary bar, because
   on a category page the buyer's first question is "what's in it".
   ============================================================= */
.cathero{
  position:relative; background:var(--ink); color:#fff; overflow:hidden; isolation:isolate;
  padding-block:clamp(30px,3.5vw,44px) clamp(74px,8vw,116px);
}
.cathero-bg{ position:absolute; inset:0; z-index:0; }
.cathero-aurora{
  position:absolute; inset:-30% -10%;
  background:
    radial-gradient(44% 54% at 78% 24%, rgba(47,88,172,.6) 0%, transparent 62%),
    radial-gradient(36% 44% at 92% 74%, rgba(59,143,78,.4) 0%, transparent 64%),
    radial-gradient(50% 58% at 10% 84%, rgba(35,65,129,.42) 0%, transparent 66%);
  filter:blur(12px); animation:drift 26s ease-in-out infinite alternate;
}
@keyframes drift{ from{ transform:translate3d(0,0,0) scale(1); } to{ transform:translate3d(-3%,2%,0) scale(1.08); } }
.cathero-lattice{
  position:absolute; inset:0; opacity:.2;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='68' height='118' viewBox='0 0 68 118'%3E%3Cg fill='none' stroke='%237C9AE0' stroke-width='1'%3E%3Cpath d='M34 2 L64 19.5 L64 54.5 L34 72 L4 54.5 L4 19.5 Z'/%3E%3Cpath d='M34 61 L64 78.5 L64 113.5 L34 131 L4 113.5 L4 78.5 Z'/%3E%3C/g%3E%3C/svg%3E");
  -webkit-mask-image:radial-gradient(70% 76% at 60% 46%, #000 10%, transparent 76%);
  mask-image:radial-gradient(70% 76% at 60% 46%, #000 10%, transparent 76%);
}
.cathero-fade{ position:absolute; left:0; right:0; bottom:0; height:40%; background:linear-gradient(to top, var(--ink), transparent); }
.cathero .wrap{ position:relative; z-index:2; }
.cathero .h-hero{ font-size:clamp(2.5rem,5.4vw,4.6rem); }

/* --- Breadcrumb --- */
.crumbs{
  display:flex; align-items:center; flex-wrap:wrap; gap:.5em;
  font-family:"IBM Plex Mono",monospace; font-size:.7rem; letter-spacing:.13em; text-transform:uppercase;
  color:#7D8FAB; margin-bottom:clamp(38px,5vw,64px);
}
.crumbs a{ transition:color .25s; }
.crumbs a:hover{ color:var(--green-400); }
.crumbs .sep{ opacity:.45; }
.crumbs [aria-current]{ color:#fff; }

.cathero-grid{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.68fr); gap:clamp(30px,5vw,72px); align-items:end; }
@media(max-width:960px){ .cathero-grid{ grid-template-columns:1fr; align-items:start; } }
.cathero h1{ color:#fff; max-width:13ch; }
.cathero-sub{ max-width:54ch; margin-top:26px; font-size:clamp(1rem,1.25vw,1.15rem); color:#AFBED5; line-height:1.72; }
.cathero-actions{ display:flex; flex-wrap:wrap; gap:13px; margin-top:36px; }

/* Specification summary — glass panel, mono rows */
.spec-panel{
  background:rgba(255,255,255,.075);
  -webkit-backdrop-filter:blur(20px) saturate(1.4); backdrop-
<truncated 16589 bytes>

NOTE: The output was truncated because it was too long. Use a more targeted query or a smaller range to get the information you need