/* ==========================================================================
   Katal — clean, white, corporate chemical theme (Wanhua-style): full-bleed
   hero carousel, big count-up statistics, segment card tiles, and a filterable
   catalyst catalog — on white with a brand blue accent. Bricolage Grotesque
   display over Inter, JetBrains Mono for CAS numbers and spec readouts.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

:root {
	--bg:        oklch(99% 0.002 250);
	--bg-soft:   oklch(96.6% 0.005 250);
	--bg-blue:   oklch(97% 0.022 250);
	--surface:   #ffffff;

	--ink:       oklch(31% 0.028 258);
	--ink-soft:  oklch(46% 0.022 258);
	--ink-dim:   oklch(60% 0.016 258);

	--brand:      oklch(52% 0.17 253);
	--brand-deep: oklch(43% 0.16 256);
	--brand-soft: oklch(52% 0.17 253 / .1);
	--accent:     var(--brand);

	--line:      oklch(31% 0.02 258 / .14);
	--line-soft: oklch(31% 0.02 258 / .08);
	--shadow:       0 1px 3px oklch(45% 0.03 258 / .08), 0 10px 26px oklch(45% 0.03 258 / .07);
	--shadow-hover: 0 6px 16px oklch(45% 0.05 258 / .13), 0 22px 50px oklch(45% 0.05 258 / .11);

	--display: 'Bricolage Grotesque', -apple-system, 'Segoe UI', sans-serif;
	--body:    'Inter', -apple-system, 'Segoe UI', sans-serif;
	--mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;

	--fs-xs: .75rem; --fs-sm: .875rem; --fs-base: 1.05rem; --fs-md: 1.22rem;
	--fs-lg: 1.6rem; --fs-xl: 2.3rem;
	--fs-2xl: clamp(2.4rem, 4.8vw, 4rem);
	--fs-3xl: clamp(2.8rem, 6vw, 5.2rem);

	--radius: 8px; --radius-lg: 16px;
	--ease: cubic-bezier(.2,.7,.2,1);
	--container: 1280px;
	--gutter: clamp(20px, 4.5vw, 76px);
	--header-h: 76px;
	--sp-1: 8px; --sp-2: 14px; --sp-3: 24px; --sp-4: 40px; --sp-5: 66px; --sp-6: 104px; --sp-7: 150px;

	--c-flexible-foam: oklch(52% 0.16 152);
	--c-rigid-foam: oklch(52% 0.15 235);
	--c-low-odor: oklch(54% 0.15 135);
	--c-tertiary-amine: oklch(52% 0.2 300);
	--c-organotin: oklch(50% 0.14 258);
	--c-trimerization: oklch(56% 0.16 45);
	--c-additives: oklch(58% 0.13 80);
	--c-epoxy-curing: oklch(54% 0.2 350);
	--c-polyether: oklch(52% 0.11 205);

	--glass-rim: linear-gradient(135deg, oklch(100% 0 0 / .95) 0%, oklch(100% 0 0 / .1) 42%, oklch(74% 0.1 250 / .7) 100%);
	--glass-hl:  oklch(100% 0 0 / .8);
	--glass-glow: oklch(52% 0.17 253 / .16);
	--glass-glow-soft: oklch(52% 0.17 253 / .09);
	--glass-bg: oklch(99% 0.002 250 / .66);
}

html, body { background: var(--bg); color: var(--ink); }
body { margin: 0; font-family: var(--body); font-size: var(--fs-base); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; }

h1, h2, h3, h4 { font-family: var(--display); font-weight: 600; line-height: 1.05; margin: 0; letter-spacing: -0.02em; color: var(--ink); }
h1 { font-size: var(--fs-2xl); } h2 { font-size: var(--fs-xl); } h3 { font-size: var(--fs-lg); }
p { margin: 0 0 1.1em; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
::selection { background: var(--brand); color: #fff; }

.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: var(--sp-3); top: var(--sp-3); z-index: 999; background: var(--brand); color: #fff; padding: 10px 16px; border-radius: var(--radius); }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); }

/* Mono readout label */
.readout { font-family: var(--mono); font-size: var(--fs-xs); letter-spacing: .18em; text-transform: uppercase; color: var(--brand); font-weight: 500; display: inline-flex; align-items: center; gap: .7em; }
.readout::before { content: ''; width: 22px; height: 2px; background: var(--brand); border-radius: 2px; }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: .6em; font-family: var(--mono); font-size: var(--fs-sm); letter-spacing: .04em; font-weight: 500;
	padding: 13px 24px; border-radius: 999px; border: 1px solid var(--brand); background: var(--brand); color: #fff; cursor: pointer; transition: box-shadow .3s, transform .2s, background .3s, color .3s; }
.btn:hover { background: var(--brand-deep); border-color: var(--brand-deep); box-shadow: 0 8px 22px var(--brand-soft); transform: translateY(-1px); }
.btn--ghost { background: oklch(99% 0.002 250 / .55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: var(--brand); border-color: oklch(52% 0.17 253 / .3);
	box-shadow: inset 0 1px 0 var(--glass-hl), inset 0 0 14px var(--glass-glow-soft); }
.btn--ghost:hover { background: var(--brand-soft); color: var(--brand-deep); box-shadow: inset 0 1px 0 var(--glass-hl), inset 0 0 20px var(--glass-glow); }
.btn--on-dark { background: #fff; color: var(--brand-deep); border-color: #fff; }
.btn--on-dark:hover { background: rgba(255,255,255,.9); color: var(--brand-deep); }
.btn--ghost-dark { background: rgba(255,255,255,.1); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #fff; border-color: rgba(255,255,255,.55);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.35); }
.btn--ghost-dark:hover { background: rgba(255,255,255,.2); color: #fff; border-color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.55); }

/* Panel / card */
.panel { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius-lg); box-shadow: var(--shadow); }

/* ==========================================================================
   Crystal glass — signature material: frosted panels with a light-catching
   gradient rim (glass edge) and a soft inset inner glow. Two tiers: full
   `.glass` frosts the backdrop (showcase panels — header, molecule/kinetics
   viz, dialog, rings) — used sparingly since backdrop-filter is not free.
   `.glass-edge` is the cheap rim+glow-only version for repeated grid cards.
   ========================================================================== */
.glass, .glass-edge {
	position: relative;
	box-shadow:
		inset 0 1px 0 var(--glass-hl),
		inset 0 -20px 32px -24px var(--glass-glow),
		inset 0 0 40px var(--glass-glow-soft),
		var(--shadow);
	transition: box-shadow .35s var(--ease), transform .3s var(--ease), background .35s;
}
.glass {
	background: var(--glass-bg);
	backdrop-filter: blur(20px) saturate(170%);
	-webkit-backdrop-filter: blur(20px) saturate(170%);
}
.glass:hover, .glass-edge:hover {
	box-shadow:
		inset 0 1px 0 var(--glass-hl),
		inset 0 -22px 38px -22px var(--glass-glow),
		inset 0 0 54px var(--glass-glow),
		var(--shadow-hover);
}
/* Light-catching rim — a 1px gradient ring masked to the border only. Placed
   on ::before by default; cat-card uses ::after (its ::before is the coloured
   application stripe) — see the catalog block below. */
.glass::before, .glass-edge::before {
	content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
	background: var(--glass-rim);
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor; mask-composite: exclude;
	pointer-events: none;
}
/* Ambient colour wash behind the glass card grids — a diffuse, painterly
   bleed of colour across the WHOLE section (not two isolated corner spots),
   so a frosted panel anywhere in the grid has something soft to catch and
   refract. Sizes are percentages of the section's own box, so the wash
   scales correctly even on a very tall section (24-card catalog) instead of
   leaving the lower half bare. Five overlapping, softly-clipped blobs blend
   into one continuous field rather than reading as separate dots. */
#industries, #catalog, #how, #sustainability, #news {
	background-image:
		radial-gradient(75% 60% at 8% 4%,   oklch(78% 0.13 238 / .38), oklch(78% 0.13 238 / .18) 35%, transparent 78%),
		radial-gradient(70% 55% at 95% 8%,  oklch(72% 0.15 268 / .34), oklch(72% 0.15 268 / .16) 35%, transparent 78%),
		radial-gradient(85% 65% at 50% 48%, oklch(74% 0.12 210 / .28), oklch(74% 0.12 210 / .13) 35%, transparent 80%),
		radial-gradient(70% 58% at 6% 94%,  oklch(70% 0.15 288 / .34), oklch(70% 0.15 288 / .16) 35%, transparent 78%),
		radial-gradient(72% 58% at 94% 96%, oklch(74% 0.13 248 / .32), oklch(74% 0.13 248 / .15) 35%, transparent 78%);
	background-repeat: no-repeat;
}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header { position: fixed; inset: 0 0 auto 0; z-index: 60; height: var(--header-h); display: flex; align-items: center; transition: background .35s, box-shadow .35s, color .35s; color: #fff; }
.site-header.is-solid { background: oklch(99% 0.002 250 / .74); backdrop-filter: blur(18px) saturate(170%); -webkit-backdrop-filter: blur(18px) saturate(170%); color: var(--ink);
	box-shadow:
		inset 0 1px 0 var(--glass-hl),
		inset 0 -14px 20px -18px var(--glass-glow),
		0 1px 0 var(--line-soft), 0 6px 24px oklch(45% 0.03 258 / .07); }
.header-inner { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.brand { display: inline-flex; align-items: center; gap: 11px; color: inherit; }
.brand__mark { width: 30px; height: 30px; color: var(--brand); }
.site-header:not(.is-solid) .brand__mark { color: #fff; }
.brand__name { font-family: var(--display); font-weight: 700; letter-spacing: .01em; font-size: 1.3rem; color: inherit; }
.brand__name span { color: var(--brand); }
.site-header:not(.is-solid) .brand__name span { color: #cfe0ff; }
.nav { display: flex; align-items: center; gap: var(--sp-3); }
.nav__list { display: flex; gap: var(--sp-3); list-style: none; margin: 0; padding: 0; font-family: var(--body); font-weight: 500; font-size: var(--fs-sm); }
.nav__list a { color: inherit; opacity: .92; transition: opacity .25s, color .25s; }
.nav__list a:hover { opacity: 1; color: var(--brand); }
.site-header:not(.is-solid) .nav__list a:hover { color: #fff; opacity: 1; }
.nav .btn { padding: 10px 18px; }
.site-header:not(.is-solid) .nav .btn { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.5); color: #fff; }
.site-header:not(.is-solid) .nav .btn:hover { background: #fff; color: var(--brand-deep); }
.nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 8px; }
.nav-toggle span { width: 24px; height: 2px; background: currentColor; border-radius: 2px; transition: .3s; }
.nav-scrim { position: fixed; inset: 0; background: oklch(30% 0.02 258 / .35); backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity .3s; z-index: 55; }
.nav-scrim.is-open { opacity: 1; pointer-events: auto; }

@media (max-width: 900px) {
	.nav-toggle { display: flex; }
	.nav { position: fixed; inset: 0 0 0 auto; width: min(80vw, 320px); flex-direction: column; align-items: flex-start; justify-content: center; gap: var(--sp-3); padding: var(--sp-5) var(--sp-4); background: #fff; color: var(--ink); box-shadow: var(--shadow-hover); transform: translateX(100%); transition: transform .4s var(--ease); z-index: 58; }
	.nav.is-open { transform: none; }
	.nav__list { flex-direction: column; gap: var(--sp-3); font-size: var(--fs-md); }
	.nav .btn { background: var(--brand); color: #fff; border-color: var(--brand); }
}

/* ==========================================================================
   Hero carousel
   ========================================================================== */
.hero-carousel { position: relative; height: 90vh; min-height: 580px; max-height: 900px; overflow: hidden; background: var(--brand-deep); }
.hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.1s var(--ease); }
.hero-slide.is-active { opacity: 1; }
.hero-slide__img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 7s linear; }
.hero-slide.is-active .hero-slide__img { transform: scale(1); }
.hero-slide::after { content: ''; position: absolute; inset: 0;
	background: linear-gradient(90deg, oklch(22% 0.05 258 / .78) 0%, oklch(22% 0.05 258 / .5) 40%, oklch(22% 0.05 258 / .15) 75%),
		linear-gradient(180deg, oklch(20% 0.05 258 / .55) 0, transparent 22%); }
.hero-content { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; }
.hero-content .container { width: 100%; }
.hero__tag { color: #bcd3ff; margin-bottom: var(--sp-3); }
.hero__tag.readout::before { background: #bcd3ff; }
.hero__title { font-size: var(--fs-3xl); font-weight: 700; letter-spacing: -0.03em; line-height: .98; max-width: 18ch; color: #fff; text-shadow: 0 2px 30px oklch(20% 0.05 258 / .4); }
.hero__title em { font-style: normal; color: #9ec6ff; }
.hero__sub { font-size: var(--fs-md); color: rgba(255,255,255,.9); max-width: 54ch; margin-top: var(--sp-3); line-height: 1.55; }
.hero__cta { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-4); }
.hero-dots { position: absolute; z-index: 3; bottom: var(--sp-4); left: 50%; transform: translateX(-50%); display: flex; gap: 10px; }
.hero-dot { width: 34px; height: 4px; border-radius: 4px; border: 0; background: rgba(255,255,255,.4); cursor: pointer; transition: background .3s; padding: 0; }
.hero-dot.is-active { background: #fff; }
@media (max-width: 640px) { .hero-carousel { height: 88vh; } }

/* ==========================================================================
   Stats band — "Innovation creates excellence"
   ========================================================================== */
.stats { background: var(--bg-blue); border-bottom: 1px solid var(--line-soft); }
.stats__inner { display: grid; grid-template-columns: 1.1fr 2fr; gap: var(--sp-5); align-items: center; padding-block: var(--sp-6); }
.stats__lead h2 { font-size: var(--fs-2xl); }
.stats__lead p { color: var(--ink-soft); margin-top: var(--sp-2); max-width: 34ch; }
.stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); }
.stat__n { font-family: var(--display); font-weight: 700; font-size: clamp(2.2rem, 4vw, 3.4rem); color: var(--brand); line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -0.03em; }
.stat__l { font-family: var(--body); font-size: var(--fs-sm); color: var(--ink-soft); margin-top: 10px; line-height: 1.35; }
@media (max-width: 900px) { .stats__inner { grid-template-columns: 1fr; gap: var(--sp-4); } .stats__grid { grid-template-columns: 1fr 1fr; gap: var(--sp-4); } }

/* ==========================================================================
   Sections
   ========================================================================== */
.section { padding-block: var(--sp-7); position: relative; }
.section--tight { padding-block: var(--sp-6); }
.section--soft { background: var(--bg-soft); }
.section-head { max-width: 64ch; margin-bottom: var(--sp-5); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head h2 { font-size: var(--fs-2xl); margin-top: var(--sp-2); }
.section-head p { color: var(--ink-soft); font-size: var(--fs-md); margin-top: var(--sp-2); }

/* ==========================================================================
   Segments — product/application card tiles (Wanhua "Products & Services")
   ========================================================================== */
.segments { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--sp-3); }
.seg-card { display: block; padding: var(--sp-4) var(--sp-3); background: oklch(99% 0.002 250 / .55); border: 1px solid transparent; border-radius: var(--radius-lg);
	box-shadow: inset 0 1px 0 var(--glass-hl), inset 0 -18px 28px -22px var(--glass-glow), inset 0 0 34px var(--glass-glow-soft), var(--shadow);
	transition: transform .3s var(--ease), box-shadow .3s, border-color .3s; position: relative; overflow: hidden; }
.seg-card::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: var(--glass-rim);
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.seg-card::after { content: ''; position: absolute; inset: auto 0 0 0; height: 3px; background: var(--chip, var(--brand)); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.seg-card:hover { transform: translateY(-5px); box-shadow: inset 0 1px 0 var(--glass-hl), inset 0 -20px 34px -20px var(--glass-glow), inset 0 0 46px var(--glass-glow), var(--shadow-hover); border-color: transparent; }
.seg-card:hover::after { transform: scaleX(1); }
.seg-card__ico { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: color-mix(in oklch, var(--chip, var(--brand)) 12%, white); color: var(--chip, var(--brand)); margin-bottom: var(--sp-3); }
.seg-card__ico svg { width: 22px; height: 22px; }
.seg-card__n { font-family: var(--display); font-weight: 600; font-size: var(--fs-md); }
.seg-card__d { color: var(--ink-dim); font-size: var(--fs-sm); margin-top: 8px; line-height: 1.45; }
.seg-card__more { display: inline-flex; margin-top: var(--sp-2); font-family: var(--mono); font-size: var(--fs-xs); letter-spacing: .06em; color: var(--brand); }

/* ==========================================================================
   Catalog — filter + datasheet cards
   ========================================================================== */
.catalog-bar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: var(--sp-4); align-items: center; }
.filter-chip { font-family: var(--body); font-weight: 500; font-size: var(--fs-sm); padding: 8px 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-soft); cursor: pointer; transition: border-color .25s, color .25s, background .25s, box-shadow .25s; }
.filter-chip:hover { border-color: var(--brand); color: var(--brand); }
.filter-chip.is-active { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: 0 6px 16px var(--brand-soft); }
.filter-count { margin-left: auto; font-family: var(--mono); font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-dim); }

.catalog { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--sp-3); }
.cat-card { position: relative; display: flex; flex-direction: column; padding: var(--sp-3); border: 1px solid transparent; border-radius: var(--radius-lg); background: oklch(99% 0.002 250 / .55);
	box-shadow: inset 0 1px 0 var(--glass-hl), inset 0 -18px 28px -22px var(--glass-glow), inset 0 0 34px var(--glass-glow-soft), var(--shadow);
	overflow: hidden; transition: border-color .3s, transform .3s, box-shadow .3s; }
.cat-card::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--chip, var(--brand)); z-index: 1; }
.cat-card::after { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: var(--glass-rim);
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.cat-card:hover { transform: translateY(-3px); box-shadow: inset 0 1px 0 var(--glass-hl), inset 0 -20px 34px -20px var(--glass-glow), inset 0 0 46px var(--glass-glow), var(--shadow-hover); }
.cat-card__top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: var(--sp-2); }
.cat-card__app { font-family: var(--mono); font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--chip, var(--brand)); font-weight: 500; display: inline-flex; align-items: center; gap: 7px; }
.cat-card__app::before { content: ''; width: 8px; height: 8px; border-radius: 2px; background: var(--chip, var(--brand)); }
.cat-card__cas { font-family: var(--mono); font-size: var(--fs-xs); color: var(--ink-dim); white-space: nowrap; }
.cat-card__title { font-size: var(--fs-md); line-height: 1.14; margin-bottom: 6px; }
.cat-card__title a:hover { color: var(--chip, var(--brand)); }
.cat-card__role { font-family: var(--mono); font-size: var(--fs-xs); color: var(--ink-soft); margin-bottom: var(--sp-2); }
.cat-card__desc { color: var(--ink-soft); font-size: var(--fs-sm); line-height: 1.5; margin-bottom: var(--sp-2); flex: 1; }
.cat-card__foot { display: flex; align-items: center; justify-content: space-between; font-family: var(--mono); font-size: var(--fs-xs); color: var(--ink-dim); border-top: 1px solid var(--line-soft); padding-top: var(--sp-2); }
.cat-card__foot a { color: var(--brand); }
.cat-card.is-hidden { display: none; }
.cat-card__badge { display: block; text-align: right; margin-bottom: 6px; font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--brand); font-weight: 500; }

/* ==========================================================================
   Molecular engineering — real-time GPU molecule + ambient reaction field
   ========================================================================== */
.molecular-field { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--bg-blue) 0%, var(--bg) 60%); }
#ktl-field { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; pointer-events: none; }
.molecular__inner { position: relative; z-index: 1; display: grid; grid-template-columns: .95fr 1.05fr; gap: var(--sp-5); align-items: center; }
.molecular__viz { position: relative; aspect-ratio: 4/3.1; border-radius: var(--radius-lg); overflow: hidden;
	background: var(--glass-bg); backdrop-filter: blur(20px) saturate(170%); -webkit-backdrop-filter: blur(20px) saturate(170%);
	box-shadow: inset 0 1px 0 var(--glass-hl), inset 0 -24px 40px -26px var(--glass-glow), inset 0 0 50px var(--glass-glow-soft), var(--shadow); }
.molecular__viz::after { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: var(--glass-rim); z-index: 2;
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
#ktl-molecule { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; }
#ktl-molecule:active { cursor: grabbing; }
.molecular__hint { position: absolute; left: var(--sp-2); bottom: var(--sp-2); z-index: 2; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-dim); background: color-mix(in oklch, var(--surface) 82%, transparent); padding: 6px 10px; border-radius: 999px; pointer-events: none; }
.molecular__viz.no-molecule #ktl-molecule, .molecular__viz.no-molecule .molecular__hint { display: none; }
.molecular__viz.no-molecule { display: grid; place-items: center; background: radial-gradient(90% 90% at 30% 20%, var(--brand-soft), transparent 70%); }
.molecular__viz.no-molecule::before { content: ''; width: 56%; height: 56%; background:
	radial-gradient(circle at 50% 50%, #2f6fd6 0 9%, transparent 9.5%),
	radial-gradient(circle at 22% 30%, #3a5fb8 0 6%, transparent 6.5%),
	radial-gradient(circle at 78% 30%, #c9ced8 0 6%, transparent 6.5%),
	radial-gradient(circle at 25% 75%, #c9ced8 0 6%, transparent 6.5%),
	radial-gradient(circle at 75% 75%, #e2624f 0 6%, transparent 6.5%);
	opacity: .85; }
.molecular__legend { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); margin-top: var(--sp-3); }
.molecular__legend span { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: var(--fs-xs); color: var(--ink-soft); }
.molecular__legend i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.molecular__lede { color: var(--ink-soft); font-size: var(--fs-md); }

/* ==========================================================================
   How catalysis works — kinetics diagram
   ========================================================================== */
.how { display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--sp-5); align-items: center; }
.how__viz { position: relative; border-radius: var(--radius-lg); padding: var(--sp-3);
	background: var(--glass-bg); backdrop-filter: blur(20px) saturate(170%); -webkit-backdrop-filter: blur(20px) saturate(170%);
	box-shadow: inset 0 1px 0 var(--glass-hl), inset 0 -24px 40px -26px var(--glass-glow), inset 0 0 50px var(--glass-glow-soft), var(--shadow); }
.how__viz::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: var(--glass-rim);
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.how__svg { width: 100%; height: auto; display: block; }
.how__lede { color: var(--ink-soft); font-size: var(--fs-md); }
.how__list { list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.how__list li { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; font-size: var(--fs-sm); color: var(--ink-soft); }
.how__list .k { font-family: var(--mono); font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--brand); font-weight: 500; padding-top: 2px; }
@media (max-width: 900px) { .how { grid-template-columns: 1fr; gap: var(--sp-4); } }

/* kinetics SVG (light) */
.k-axis path { stroke: var(--line); stroke-width: 1.3; }
.k-axis .k-arrow { fill: var(--ink-dim); stroke: none; }
.k-axis-label, .k-tick { font-family: var(--mono); fill: var(--ink-dim); font-size: 12px; letter-spacing: .04em; }
.k-tick { font-size: 11px; }
.k-tick--dim { fill: var(--ink-dim); }
.k-level { stroke: var(--line); stroke-width: 1.4; stroke-dasharray: 3 4; }
.k-ea { stroke: var(--ink-dim); stroke-width: 1; stroke-dasharray: 2 4; opacity: .5; }
.k-ea--cat { stroke: var(--brand); opacity: .7; }
.k-uncat { stroke: var(--ink-dim); stroke-width: 2.4; stroke-linecap: round; opacity: .8; }
.k-cat { stroke: var(--brand); stroke-width: 2.8; stroke-linecap: round; }
.k-dot-uncat { fill: var(--ink-dim); }
.k-dot-cat { fill: var(--brand); }
#ktl-uncat-p circle { opacity: .8; }

/* ==========================================================================
   Sustainability / compliance band — circular icons
   ========================================================================== */
.sustain { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); }
.sustain-item { text-align: center; }
.sustain-item__ring { position: relative; width: 92px; height: 92px; margin: 0 auto var(--sp-2); border-radius: 50%; display: grid; place-items: center; color: var(--brand);
	background: var(--glass-bg); backdrop-filter: blur(14px) saturate(170%); -webkit-backdrop-filter: blur(14px) saturate(170%);
	box-shadow: inset 0 1px 0 var(--glass-hl), inset 0 -10px 16px -10px var(--glass-glow), inset 0 0 24px var(--glass-glow-soft), var(--shadow); }
.sustain-item__ring::before { content: ''; position: absolute; inset: 0; border-radius: 50%; padding: 2px; background: var(--glass-rim);
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.sustain-item__ring svg { width: 38px; height: 38px; }
.sustain-item__k { font-family: var(--display); font-weight: 600; font-size: var(--fs-md); }
.sustain-item__d { color: var(--ink-dim); font-size: var(--fs-sm); margin-top: 6px; }
@media (max-width: 760px) { .sustain { grid-template-columns: 1fr 1fr; gap: var(--sp-4); } }

/* ==========================================================================
   About + figures
   ========================================================================== */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); align-items: start; }
.manifesto { max-width: 24ch; font-family: var(--display); font-size: var(--fs-xl); font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; }
.manifesto em { font-style: normal; color: var(--brand); }
.about-grid .prose { color: var(--ink-soft); display: flex; flex-direction: column; gap: var(--sp-2); max-width: 60ch; }
@media (max-width: 860px) { .about-grid { grid-template-columns: 1fr; gap: var(--sp-3); } }

/* News */
.news-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--sp-3); }
.news-card { position: relative; padding: var(--sp-3); border: 1px solid transparent; border-radius: var(--radius-lg); background: oklch(99% 0.002 250 / .55); overflow: hidden;
	box-shadow: inset 0 1px 0 var(--glass-hl), inset 0 -18px 28px -22px var(--glass-glow), inset 0 0 34px var(--glass-glow-soft), var(--shadow);
	transition: border-color .3s, transform .3s, box-shadow .3s; }
.news-card::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: var(--glass-rim);
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.news-card:hover { transform: translateY(-3px); box-shadow: inset 0 1px 0 var(--glass-hl), inset 0 -20px 34px -20px var(--glass-glow), inset 0 0 46px var(--glass-glow), var(--shadow-hover); }
.news-card time { font-family: var(--mono); font-size: var(--fs-xs); color: var(--brand); letter-spacing: .04em; }
.news-card h3 { font-size: var(--fs-md); margin: 10px 0 8px; line-height: 1.14; }
.news-card p { color: var(--ink-soft); font-size: var(--fs-sm); margin: 0; }

/* CTA */
.cta { background: linear-gradient(120deg, var(--brand-deep), var(--brand)); color: #fff; }
.cta .container { text-align: center; }
.cta h2 { font-size: var(--fs-2xl); max-width: 22ch; margin: var(--sp-2) auto var(--sp-3); color: #fff; }
.cta .readout { color: #cfe0ff; justify-content: center; }
.cta .readout::before { background: #cfe0ff; }
.cta .prose { color: rgba(255,255,255,.9); max-width: 54ch; margin-inline: auto; }
.cta__cta { display: flex; gap: var(--sp-2); justify-content: center; flex-wrap: wrap; margin-top: var(--sp-4); }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { padding-block: var(--sp-5) var(--sp-4); background: var(--bg-soft); border-top: 1px solid var(--line-soft); }
.footer-assure { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); padding-bottom: var(--sp-4); margin-bottom: var(--sp-4); border-bottom: 1px solid var(--line-soft); }
.assure { display: flex; align-items: center; gap: var(--sp-2); }
.assure__ico { width: 28px; height: 28px; flex: 0 0 auto; color: var(--brand); }
.assure div { display: flex; flex-direction: column; min-width: 0; }
.assure__k { font-family: var(--display); font-weight: 600; font-size: var(--fs-base); line-height: 1.15; }
.assure__v { font-family: var(--mono); font-size: var(--fs-xs); color: var(--ink-dim); margin-top: 3px; }
.footer-top { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.1fr; gap: var(--sp-4); padding-bottom: var(--sp-4); border-bottom: 1px solid var(--line-soft); }
.footer-brand__name { font-family: var(--display); font-weight: 700; font-size: 1.3rem; display: block; }
.footer-brand__est { display: block; font-family: var(--mono); font-size: var(--fs-xs); letter-spacing: .06em; text-transform: uppercase; color: var(--brand); margin-top: 6px; }
.footer-brand p { max-width: 42ch; margin-top: var(--sp-2); color: var(--ink-dim); font-size: var(--fs-sm); line-height: 1.55; }
.footer-nap { font-style: normal; margin-top: var(--sp-3); display: flex; flex-direction: column; gap: 4px; font-family: var(--mono); font-size: var(--fs-sm); color: var(--ink-soft); }
a.footer-nap__row:hover { color: var(--brand); }
.footer-col h4 { font-family: var(--mono); font-size: var(--fs-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--brand); margin: 0 0 var(--sp-2); }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5em; font-family: var(--body); font-size: var(--fs-sm); color: var(--ink-soft); }
.footer-col a:hover { color: var(--brand); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); padding-top: var(--sp-3); font-family: var(--mono); font-size: var(--fs-xs); color: var(--ink-dim); }
.footer-legal-nav { display: flex; gap: var(--sp-3); }
.footer-legal-nav a:hover { color: var(--brand); }
.footer-demo { opacity: .8; }
@media (max-width: 960px) { .footer-top { grid-template-columns: 1fr 1fr; } .footer-assure { grid-template-columns: 1fr 1fr; gap: var(--sp-3) var(--sp-4); } }
@media (max-width: 560px) { .footer-top { grid-template-columns: 1fr; } .footer-assure { grid-template-columns: 1fr; } .footer-bottom { justify-content: flex-start; } }

/* ==========================================================================
   Dialog
   ========================================================================== */
.inquiry-dialog { border: none; padding: 0; background: transparent; max-width: 540px; width: 92vw; }
.inquiry-dialog::backdrop { background: oklch(30% 0.03 258 / .45); backdrop-filter: blur(3px); }
.inquiry-dialog__panel { position: relative; border-radius: var(--radius-lg); padding: var(--sp-4);
	background: oklch(99% 0.002 250 / .82); backdrop-filter: blur(24px) saturate(170%); -webkit-backdrop-filter: blur(24px) saturate(170%);
	box-shadow: inset 0 1px 0 var(--glass-hl), inset 0 -26px 44px -28px var(--glass-glow), inset 0 0 56px var(--glass-glow-soft), var(--shadow-hover); }
.inquiry-dialog__panel::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: var(--glass-rim);
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.inquiry-dialog h3 { font-size: var(--fs-lg); }
.field { display: flex; flex-direction: column; gap: 4px; margin-bottom: var(--sp-2); }
.field label { font-family: var(--mono); font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-dim); }
.field input, .field textarea { font-family: var(--body); font-size: var(--fs-sm); padding: 11px 13px; background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--brand); background: #fff; }
.field--hp { position: absolute; left: -9999px; }
.form-actions { display: flex; gap: var(--sp-2); align-items: center; margin-top: var(--sp-3); }
.form-msg { font-family: var(--mono); font-size: var(--fs-sm); }
.form-msg--ok { color: var(--brand); } .form-msg--err { color: oklch(55% 0.2 25); }
.dialog-close { margin-left: auto; background: none; border: none; color: var(--ink-dim); font-size: 1.6rem; line-height: 1; cursor: pointer; }

/* ==========================================================================
   Inner templates
   ========================================================================== */
.page-hero { padding-top: calc(var(--header-h) + var(--sp-5)); padding-bottom: var(--sp-4); background: var(--bg-blue); border-bottom: 1px solid var(--line-soft); }
.page-hero h1 { font-size: var(--fs-2xl); max-width: 22ch; }
.page-hero .lede { font-family: var(--body); color: var(--ink-soft); max-width: 60ch; margin-top: var(--sp-2); }
.back-link { display: inline-flex; margin-bottom: var(--sp-3); }

.datasheet { padding-top: calc(var(--header-h) + var(--sp-5)); }
.datasheet__grid { display: grid; grid-template-columns: 1.3fr .7fr; gap: var(--sp-5); align-items: start; }
.datasheet__app { font-family: var(--mono); font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--chip, var(--brand)); font-weight: 500; }
.datasheet__title { font-size: var(--fs-2xl); margin: .1em 0 .3em; }
.datasheet__prose { color: var(--ink-soft); font-size: var(--fs-md); margin: var(--sp-3) 0; }
.spec { font-family: var(--mono); }
.spec__row { display: flex; justify-content: space-between; gap: var(--sp-3); padding: 13px 0; border-bottom: 1px solid var(--line-soft); }
.spec__row:first-child { border-top: 1px solid var(--line); }
.spec__row dt { font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-dim); }
.spec__row dd { margin: 0; color: var(--ink); text-align: right; font-weight: 500; }
.apps-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--sp-3); }
.apps-tags span { font-family: var(--mono); font-size: var(--fs-xs); padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-soft); background: var(--surface); }
.datasheet__cta { margin-top: var(--sp-4); }
@media (max-width: 860px) { .datasheet__grid { grid-template-columns: 1fr; } }

.page-content { max-width: 74ch; margin-inline: auto; padding-block: var(--sp-5); }
.prose { color: var(--ink-soft); }
.prose a { color: var(--brand); }
.page-content.prose h2, .page-content.prose h3 { font-family: var(--display); color: var(--ink); margin: var(--sp-3) 0 var(--sp-2); }
.post-list { display: flex; flex-direction: column; gap: var(--sp-3); }
.post-list__item { border-bottom: 1px solid var(--line-soft); padding-bottom: var(--sp-3); }
.error-404 { text-align: center; padding-block: var(--sp-7); }
.error-404 .big { font-family: var(--display); font-weight: 700; font-size: clamp(5rem, 18vw, 12rem); color: var(--brand); line-height: .85; }
.searchform { display: flex; gap: var(--sp-2); }
.searchform input[type="search"] { flex: 1; font-family: var(--body); padding: 12px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; color: var(--ink); }
.comments-area { max-width: 74ch; margin: var(--sp-5) auto 0; padding-top: var(--sp-4); border-top: 1px solid var(--line-soft); }
.comment-list { list-style: none; margin: 0 0 var(--sp-4); padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.comment-list .children { list-style: none; margin: var(--sp-3) 0 0; padding-left: var(--sp-3); border-left: 1px solid var(--line-soft); }
.comment-respond input[type="text"], .comment-respond input[type="email"], .comment-respond input[type="url"], .comment-respond textarea { width: 100%; font-family: var(--body); padding: 11px 13px; margin-bottom: var(--sp-2); background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); }
.comment-respond label { font-family: var(--mono); font-size: var(--fs-xs); color: var(--ink-dim); }
.pagination { margin-top: var(--sp-5); font-family: var(--mono); }
.pagination .page-numbers { padding: 8px 13px; border: 1px solid var(--line); border-radius: var(--radius); margin-right: 6px; color: var(--ink-soft); }
.pagination .current { background: var(--brand); color: #fff; border-color: var(--brand); }

/* Reveal — directional */
.reveal { opacity: 0; transform: translateY(26px); }
.reveal--left { transform: translateX(-56px); }
.reveal--right { transform: translateX(56px); }
.reveal.is-in { opacity: 1; transform: none; transition: opacity .8s var(--ease), transform .9s var(--ease); }
@media (prefers-reduced-motion: reduce) { .reveal, .reveal--left, .reveal--right { opacity: 1 !important; transform: none !important; } }
#main { overflow-x: clip; }