/**
 * SinoChemix main stylesheet. Plain hand-written CSS (no build step,
 * no Tailwind) reproducing the dark navy / cyan / emerald dense B2B
 * data-terminal aesthetic of the source React prototype.
 */

:root {
	--scx-bg: #060a14;
	--scx-bg-raised: #0a0f1d;
	--scx-bg-card: rgba(15, 23, 42, 0.8);
	--scx-bg-card-solid: #0e172a;
	--scx-bg-input: #020617;
	--scx-navy-950: #080d1a;
	--scx-navy-1000: #050811;
	--scx-footer-bg: #03060d;
	--scx-border: #1e293b;
	--scx-border-soft: rgba(30, 41, 59, 0.7);
	--scx-cyan: #22d3ee;
	--scx-cyan-400: #22d3ee;
	--scx-cyan-500: #06b6d4;
	--scx-blue-600: #2563eb;
	--scx-emerald: #10b981;
	--scx-emerald-400: #34d399;
	--scx-amber: #f59e0b;
	--scx-rose: #f43f5e;
	--scx-text: #f1f5f9;
	--scx-text-muted: #94a3b8;
	--scx-text-dim: #64748b;
	--scx-font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--scx-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', monospace;
	--scx-radius-sm: 8px;
	--scx-radius: 16px;
	--scx-radius-lg: 24px;
	--scx-max: 1280px;
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.scx-body {
	background: var(--scx-bg);
	color: var(--scx-text);
	font-family: var(--scx-font-sans);
	margin: 0;
	overflow-x: hidden;
	font-size: 16px;
	line-height: 1.55;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }
.scx-container { max-width: var(--scx-max); margin: 0 auto; padding: 0 1.25rem; }
@media (min-width: 640px) { .scx-container { padding: 0 1.5rem; } }
@media (min-width: 1024px) { .scx-container { padding: 0 2rem; } }

.scx-mono { font-family: var(--scx-font-mono); font-variant-numeric: tabular-nums; }
.scx-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Buttons ---------- */
.scx-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--scx-font-mono);
	font-size: 0.75rem;
	font-weight: 700;
	padding: 0.75rem 1.5rem;
	border-radius: 999px;
	border: 1px solid transparent;
	white-space: nowrap;
	transition: filter 0.2s ease, transform 0.2s ease, background 0.2s ease;
}
.scx-btn--primary {
	background: linear-gradient(135deg, var(--scx-cyan-400), var(--scx-blue-600));
	color: #051019;
	box-shadow: 0 10px 30px -10px rgba(34, 211, 238, 0.5);
}
.scx-btn--primary:hover { filter: brightness(1.1); }
.scx-btn--outline {
	background: rgba(2, 6, 23, 0.6);
	color: var(--scx-cyan);
	border-color: rgba(34, 211, 238, 0.4);
}
.scx-btn--outline:hover { background: #1e293b; }
.scx-btn--ghost {
	background: #1e293b;
	color: #e2e8f0;
	border-color: #334155;
}
.scx-btn--ghost:hover { background: #334155; }
.scx-btn--emerald {
	background: var(--scx-emerald-400);
	color: #052014;
	box-shadow: 0 10px 30px -10px rgba(16, 185, 129, 0.5);
}
.scx-btn--emerald:hover { filter: brightness(1.08); }
.scx-btn--sm { padding: 0.5rem 1rem; font-size: 0.7rem; }
.scx-btn--block { width: 100%; justify-content: center; }

/* ---------- Top ticker ---------- */
.scx-ticker {
	background: var(--scx-navy-1000);
	border-bottom: 1px solid var(--scx-border);
	font-family: var(--scx-font-mono);
	font-size: 0.6875rem;
	padding: 0.4rem 0;
	color: #cbd5e1;
}
.scx-ticker .scx-container { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.scx-ticker__scroll { display: flex; align-items: center; gap: 1.5rem; overflow-x: auto; scrollbar-width: none; }
.scx-ticker__scroll::-webkit-scrollbar { display: none; }
.scx-ticker__label { display: flex; align-items: center; gap: 0.375rem; color: var(--scx-cyan); font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.625rem; flex: none; }
.scx-ticker__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--scx-cyan); animation: scx-ping 1.6s cubic-bezier(0,0,0.2,1) infinite; }
.scx-ticker__item { display: flex; align-items: center; gap: 0.25rem; color: #94a3b8; flex: none; }
.scx-ticker__item strong.up { color: var(--scx-emerald-400); }
.scx-ticker__item strong.down { color: #fb7185; }
.scx-ticker__right { display: flex; align-items: center; gap: 1rem; flex: none; }
.scx-ticker__sep { color: #334155; }
.scx-ticker__safe { display: flex; align-items: center; gap: 0.25rem; color: var(--scx-emerald-400); }
.scx-ticker__phone { display: flex; align-items: center; gap: 0.25rem; }
@keyframes scx-ping { 75%, 100% { transform: scale(2); opacity: 0; } }
@media (max-width: 900px) { .scx-ticker { display: none; } }

/* ---------- Header ---------- */
.scx-header {
	position: sticky;
	top: 0;
	z-index: 40;
	background: rgba(8, 13, 26, 0.95);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border-bottom: 1px solid rgba(30, 41, 59, 0.9);
}
@media (min-width: 900px) { .scx-header { top: 28px; } }
.scx-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.9rem 0; }
.scx-brand { display: flex; align-items: center; gap: 0.75rem; }
.scx-brand__mark {
	width: 40px; height: 40px; border-radius: 12px;
	background: linear-gradient(135deg, var(--scx-cyan-400), #2563eb, #4338ca);
	display: flex; align-items: center; justify-content: center;
	color: #051019; box-shadow: 0 8px 20px -6px rgba(34,211,238,0.4);
	flex: none;
}
.scx-brand__name { font-weight: 800; font-size: 1.125rem; color: #fff; font-family: var(--scx-font-mono); display: flex; align-items: center; gap: 0.4rem; letter-spacing: -0.01em; }
.scx-brand__tag-badge { font-size: 0.6rem; padding: 0.15rem 0.4rem; border-radius: 4px; background: rgba(34,211,238,0.15); color: #67e8f9; border: 1px solid rgba(34,211,238,0.35); }
.scx-brand__sub { font-size: 0.65rem; color: #94a3b8; display: block; }

.scx-nav { display: none; align-items: center; gap: 1.7rem; font-size: 0.875rem; font-weight: 500; color: #cbd5e1; }
@media (min-width: 1100px) { .scx-nav { display: flex; } }
.scx-nav a { transition: color 0.2s; display: inline-flex; align-items: center; gap: 0.35rem; }
.scx-nav a:hover { color: #fff; }
.scx-nav a.is-active { color: var(--scx-cyan); font-weight: 700; }
.scx-nav a.is-active.scx-nav--esg { color: var(--scx-emerald-400); }
.scx-nav__cas-tag { font-size: 0.55rem; padding: 0.1rem 0.4rem; border-radius: 999px; background: rgba(34,211,238,0.15); color: #67e8f9; border: 1px solid rgba(34,211,238,0.35); font-family: var(--scx-font-mono); }
.scx-nav__esg-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--scx-emerald-400); animation: scx-pulse 2s ease-in-out infinite; }
@keyframes scx-pulse { 50% { opacity: 0.4; } }

.scx-header__actions { display: flex; align-items: center; gap: 0.5rem; }
.scx-icon-btn {
	padding: 0.5rem; border-radius: 12px; background: rgba(15,23,42,0.9); color: #cbd5e1;
	border: 1px solid var(--scx-border); display: inline-flex;
}
.scx-icon-btn:hover { color: #67e8f9; background: #1e293b; }
.scx-lang-switch { display: none; align-items: center; padding: 0.2rem; border-radius: 8px; background: #0f172a; border: 1px solid var(--scx-border); font-family: var(--scx-font-mono); font-size: 0.6875rem; }
@media (min-width: 640px) { .scx-lang-switch { display: flex; } }
.scx-lang-switch button { padding: 0.2rem 0.4rem; border-radius: 6px; background: none; border: none; color: #94a3b8; }
.scx-lang-switch button.is-active { background: rgba(34,211,238,0.15); color: #67e8f9; font-weight: 700; }
.scx-mobile-toggle { display: inline-flex; padding: 0.5rem; border-radius: 12px; background: #0f172a; border: 1px solid var(--scx-border); color: #cbd5e1; }
@media (min-width: 1100px) { .scx-mobile-toggle { display: none; } }
.scx-header__cta { display: none; }
@media (min-width: 520px) { .scx-header__cta { display: inline-flex; } }

.scx-mobile-menu { display: none; background: var(--scx-navy-950); border-top: 1px solid var(--scx-border); padding: 1rem 1.25rem 1.5rem; }
.scx-mobile-menu.is-open { display: block; }
.scx-mobile-menu nav { display: flex; flex-direction: column; gap: 0.4rem; font-size: 0.9rem; color: #cbd5e1; }
.scx-mobile-menu nav a { padding: 0.6rem 0; }
.scx-mobile-menu nav a.scx-esg-link { color: var(--scx-emerald-400); }
@media (min-width: 1100px) { .scx-mobile-menu { display: none !important; } }

/* ---------- Section shell ---------- */
.scx-section { padding: 4rem 0; }
.scx-section--tight { padding: 3.5rem 0; }
.scx-section__head { max-width: 44rem; margin: 0 auto 3rem; text-align: center; }
.scx-section__head--wide { max-width: none; text-align: left; margin-bottom: 2.5rem; }
.scx-eyebrow { font-family: var(--scx-font-mono); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--scx-cyan); }
.scx-eyebrow--emerald { color: var(--scx-emerald-400); }
.scx-section__title { font-size: 1.9rem; font-weight: 800; color: #fff; font-family: var(--scx-font-mono); margin: 0.4rem 0 0.75rem; line-height: 1.2; }
@media (min-width: 640px) { .scx-section__title { font-size: 2.4rem; } }
.scx-section__desc { font-size: 0.875rem; color: #94a3b8; line-height: 1.7; }

/* ---------- Glass card ---------- */
.scx-card {
	background: var(--scx-bg-card);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border: 1px solid rgba(34,211,238,0.15);
	border-radius: var(--scx-radius);
	box-shadow: 0 20px 40px -15px rgba(0,0,0,0.7);
	transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.scx-card:hover { border-color: rgba(34,211,238,0.35); box-shadow: 0 25px 50px -12px rgba(34,211,238,0.12); }
.scx-panel { background: rgba(15,23,42,0.85); border: 1px solid var(--scx-border); border-radius: var(--scx-radius-lg); padding: 2rem; position: relative; overflow: hidden; }
@media (min-width: 640px) { .scx-panel { padding: 3rem; } }

/* ---------- Hero ---------- */
.scx-hero { position: relative; min-height: 85vh; display: flex; align-items: center; justify-content: center; background: #020617; overflow: hidden; }
.scx-hero__slides { position: absolute; inset: 0; z-index: 0; }
.scx-hero__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.1s ease; }
.scx-hero__slide.is-active { opacity: 1; }
.scx-hero__slide img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.32); }
.scx-hero__gradient1 { position: absolute; inset: 0; background: linear-gradient(to top, var(--scx-navy-950) 0%, rgba(8,13,26,0.6) 55%, transparent 100%); }
.scx-hero__gradient2 { position: absolute; inset: 0; background: radial-gradient(ellipse at top, rgba(8,51,68,0.4), transparent 60%); }
.scx-hero__grid { position: absolute; inset: 0; background-image: linear-gradient(to right, rgba(30,41,59,0.08) 1px, transparent 1px), linear-gradient(to bottom, rgba(30,41,59,0.08) 1px, transparent 1px); background-size: 4rem 4rem; }
.scx-hero__content { position: relative; z-index: 10; max-width: 72rem; margin: 0 auto; padding: 5rem 1.25rem; text-align: center; }
.scx-hero__badges { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.75rem; margin-bottom: 1.5rem; }
.scx-hero__badge { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.4rem 1rem; border-radius: 999px; background: rgba(34,211,238,0.1); border: 1px solid rgba(34,211,238,0.3); color: #67e8f9; font-family: var(--scx-font-mono); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.scx-hero__title { font-size: 2.4rem; font-weight: 800; font-family: var(--scx-font-mono); color: #fff; line-height: 1.18; max-width: 56rem; margin: 0 auto; }
@media (min-width: 640px) { .scx-hero__title { font-size: 3.6rem; } }
@media (min-width: 1024px) { .scx-hero__title { font-size: 4.2rem; } }
.scx-hero__title-accent { background: linear-gradient(90deg, var(--scx-cyan-400), #60a5fa, var(--scx-emerald-400)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.scx-hero__desc { max-width: 44rem; margin: 1.5rem auto 0; font-size: 0.95rem; color: #cbd5e1; line-height: 1.7; }
.scx-hero__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem; margin-top: 1.75rem; }
.scx-hero__search { max-width: 42rem; margin: 2rem auto 0; }
.scx-hero__search-form { display: flex; align-items: center; padding: 0.5rem; border-radius: var(--scx-radius); background: rgba(15,23,42,0.9); border: 1px solid rgba(34,211,238,0.3); box-shadow: 0 20px 40px -20px rgba(0,0,0,0.8); }
.scx-hero__search-form input { flex: 1; background: transparent; border: none; color: #fff; padding: 0.6rem 0.5rem; font-size: 0.85rem; font-family: var(--scx-font-mono); }
.scx-hero__search-form input:focus { outline: none; }
.scx-hero__search-form input::placeholder { color: #64748b; }
.scx-hero__hotlinks { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.5rem; margin-top: 0.75rem; font-family: var(--scx-font-mono); font-size: 0.7rem; color: #94a3b8; }
.scx-hero__hotlinks button { padding: 0.25rem 0.6rem; border-radius: 6px; background: rgba(15,23,42,0.8); border: 1px solid var(--scx-border); color: #cbd5e1; }
.scx-hero__hotlinks button:hover { color: #67e8f9; border-color: rgba(34,211,238,0.5); }
.scx-hero__dots { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-top: 1.5rem; }
.scx-hero__dots button { height: 6px; width: 8px; border-radius: 999px; background: #334155; border: none; padding: 0; transition: all 0.3s; }
.scx-hero__dots button.is-active { width: 2rem; background: var(--scx-cyan-400); }
.scx-hero__stats { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1rem; margin-top: 2.5rem; max-width: 64rem; margin-left: auto; margin-right: auto; text-align: left; }
@media (min-width: 768px) { .scx-hero__stats { grid-template-columns: repeat(4, minmax(0,1fr)); } }

.scx-stat { padding: 1.1rem; border-radius: var(--scx-radius); background: rgba(15,23,42,0.6); border: 1px solid var(--scx-border); backdrop-filter: blur(6px); }
.scx-stat__label { font-family: var(--scx-font-mono); font-size: 0.68rem; font-weight: 700; color: var(--scx-cyan-400); display: block; margin-bottom: 0.25rem; }
.scx-stat__value { font-size: 1.6rem; font-weight: 800; font-family: var(--scx-font-mono); color: #fff; }
.scx-stat__unit { font-size: 0.8rem; font-weight: 400; color: #94a3b8; font-family: var(--scx-font-sans); }
.scx-stat__desc { font-size: 0.68rem; color: #94a3b8; margin-top: 0.2rem; display: block; }

/* ---------- Segment matrix ---------- */
.scx-segment-tabs { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.75rem; margin-bottom: 2.25rem; }
.scx-segment-tab {
	display: flex; align-items: center; gap: 0.5rem; padding: 0.8rem 1.1rem; border-radius: var(--scx-radius);
	font-size: 0.75rem; font-weight: 700; border: 1px solid var(--scx-border); background: rgba(2,6,23,0.6); color: #94a3b8;
}
.scx-segment-tab:hover { color: #e2e8f0; border-color: #475569; }
.scx-segment-tab.is-active { background: #0f172a; border-color: var(--scx-cyan-400); color: #fff; box-shadow: 0 10px 25px -10px rgba(8,51,68,0.7); }
.scx-segment-panel { display: none; }
.scx-segment-panel.is-active { display: block; }
.scx-segment-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: 2.5rem; align-items: center; }
@media (min-width: 1024px) { .scx-segment-grid { grid-template-columns: 7fr 5fr; } }
.scx-segment-tagpill { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0.75rem; border-radius: 999px; background: rgba(34,211,238,0.1); color: #67e8f9; font-family: var(--scx-font-mono); font-size: 0.7rem; font-weight: 700; border: 1px solid rgba(34,211,238,0.3); margin-bottom: 1rem; }
.scx-segment-panel h3 { font-size: 1.6rem; font-weight: 800; color: #fff; font-family: var(--scx-font-mono); margin: 0 0 0.75rem; }
.scx-segment-panel p.desc { font-size: 0.875rem; color: #cbd5e1; line-height: 1.7; margin: 0 0 1.25rem; }
.scx-segment-metrics { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 0.75rem; margin-bottom: 1.5rem; }
.scx-segment-metric { padding: 0.75rem; border-radius: 10px; background: rgba(2,6,23,0.6); border: 1px solid var(--scx-border); }
.scx-segment-metric span { display: block; font-size: 0.6rem; font-family: var(--scx-font-mono); color: #94a3b8; margin-bottom: 0.25rem; }
.scx-segment-metric strong { font-size: 0.85rem; font-family: var(--scx-font-mono); color: #67e8f9; font-weight: 700; }
.scx-segment-actions { display: flex; flex-wrap: wrap; gap: 1rem; }
.scx-segment-showcase { padding: 1.5rem; border-radius: var(--scx-radius); background: rgba(2,6,23,0.9); border: 1px solid rgba(34,211,238,0.3); box-shadow: 0 20px 40px -20px rgba(0,0,0,0.9); }
.scx-segment-showcase__img { position: relative; height: 12rem; border-radius: 14px; overflow: hidden; margin-bottom: 1rem; }
.scx-segment-showcase__img img { width: 100%; height: 100%; object-fit: cover; }
.scx-segment-showcase__cas { position: absolute; top: 0.75rem; left: 0.75rem; padding: 0.25rem 0.6rem; border-radius: 999px; background: rgba(2,6,23,0.9); color: #67e8f9; font-family: var(--scx-font-mono); font-size: 0.68rem; font-weight: 700; border: 1px solid rgba(34,211,238,0.4); }
.scx-segment-showcase__purity { position: absolute; bottom: 0.75rem; left: 0.75rem; padding: 0.15rem 0.6rem; border-radius: 999px; background: rgba(16,185,129,0.9); color: #052014; font-size: 0.62rem; font-weight: 700; }
.scx-segment-showcase__grade { font-size: 0.68rem; font-family: var(--scx-font-mono); color: var(--scx-emerald-400); display: block; margin-bottom: 0.2rem; }
.scx-segment-showcase h4 { font-size: 1.05rem; font-weight: 800; color: #fff; font-family: var(--scx-font-mono); margin: 0 0 0.4rem; }
.scx-segment-showcase p { font-size: 0.72rem; color: #94a3b8; line-height: 1.6; margin: 0; }
.scx-segment-showcase__feats { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--scx-border); display: flex; flex-direction: column; gap: 0.4rem; }
.scx-segment-showcase__feats .row { display: flex; align-items: flex-start; gap: 0.4rem; font-size: 0.68rem; color: #cbd5e1; }

/* ---------- Product grid / cards ---------- */
.scx-product-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: 1.75rem; }
@media (min-width: 720px) { .scx-product-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1080px) { .scx-product-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }

.scx-product-card { display: flex; flex-direction: column; overflow: hidden; }
.scx-product-card__media { position: relative; height: 13rem; overflow: hidden; background: #020617; }
.scx-product-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.scx-product-card:hover .scx-product-card__media img { transform: scale(1.05); }
.scx-product-card__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, var(--scx-bg-card-solid), transparent 55%); }
.scx-badge-cas { position: absolute; top: 0.75rem; left: 0.75rem; z-index: 2; padding: 0.3rem 0.6rem; border-radius: 999px; background: rgba(2,6,23,0.85); color: #67e8f9; border: 1px solid rgba(34,211,238,0.4); font-family: var(--scx-font-mono); font-size: 0.62rem; font-weight: 700; backdrop-filter: blur(6px); }
.scx-badge-purity { position: absolute; top: 0.75rem; right: 0.75rem; z-index: 2; padding: 0.15rem 0.5rem; border-radius: 999px; background: rgba(16,185,129,0.85); color: #052014; font-family: var(--scx-font-mono); font-size: 0.6rem; font-weight: 700; }
.scx-product-card__foot-strip { position: absolute; bottom: 0.75rem; left: 0.75rem; right: 0.75rem; z-index: 2; display: flex; align-items: center; justify-content: space-between; font-size: 0.68rem; color: #cbd5e1; font-family: var(--scx-font-mono); }
.scx-product-card__body { padding: 1.5rem; flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 1rem; }
.scx-product-card__grade { font-family: var(--scx-font-mono); font-size: 0.72rem; color: var(--scx-emerald-400); font-weight: 600; display: block; margin-bottom: 0.2rem; }
.scx-product-card__name { font-size: 1.05rem; font-weight: 800; color: #fff; font-family: var(--scx-font-mono); margin: 0; line-height: 1.35; }
.scx-product-card__desc { font-size: 0.75rem; color: #94a3b8; margin-top: 0.5rem; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.scx-product-card__specs { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid rgba(30,41,59,0.8); }
.scx-product-card__specs-label { font-size: 0.6rem; font-family: var(--scx-font-mono); color: #64748b; text-transform: uppercase; margin-bottom: 0.5rem; }
.scx-product-card__specs-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 0.5rem; }
.scx-product-card__spec { padding: 0.45rem; border-radius: 8px; background: rgba(2,6,23,0.6); border: 1px solid var(--scx-border); font-family: var(--scx-font-mono); font-size: 0.65rem; }
.scx-product-card__spec span { display: block; color: #94a3b8; font-size: 0.6rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scx-product-card__spec strong { color: #67e8f9; display: block; }
.scx-product-card__foot { padding-top: 1rem; border-top: 1px solid var(--scx-border); display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; }
.scx-product-card__foot .scx-btn { flex: none; }
.scx-apps { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.6rem; }
.scx-apps span { font-size: 0.62rem; background: #0f172a; color: #cbd5e1; padding: 0.15rem 0.5rem; border-radius: 6px; border: 1px solid var(--scx-border); }

/* ---------- Filter toolbar ---------- */
.scx-filter-toolbar { padding: 1.5rem; border-radius: var(--scx-radius-lg); background: rgba(15,23,42,0.8); border: 1px solid var(--scx-border); margin-bottom: 3rem; }
.scx-search-input { position: relative; }
.scx-search-input svg { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--scx-cyan-400); pointer-events: none; }
.scx-search-input input { width: 100%; padding: 0.9rem 3rem 0.9rem 2.8rem; border-radius: var(--scx-radius); background: var(--scx-bg-input); border: 1px solid #334155; color: #fff; font-family: var(--scx-font-mono); font-size: 0.8rem; }
.scx-search-input input:focus { outline: none; border-color: var(--scx-cyan-400); }
.scx-search-input input::placeholder { color: #64748b; }
.scx-search-input__clear { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); background: none; border: none; color: #94a3b8; font-family: var(--scx-font-mono); font-size: 0.7rem; }
.scx-filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 1rem; padding-top: 1rem; }
.scx-filter-row.bordered { border-top: 1px solid rgba(30,41,59,0.8); }
.scx-filter-row__label { font-size: 0.72rem; color: #94a3b8; font-family: var(--scx-font-mono); display: flex; align-items: center; gap: 0.3rem; margin-right: 0.3rem; }
.scx-pill { padding: 0.45rem 0.85rem; border-radius: 10px; font-size: 0.72rem; font-family: var(--scx-font-mono); background: var(--scx-bg-input); color: #94a3b8; border: 1px solid var(--scx-border); }
.scx-pill:hover { color: #fff; }
.scx-pill.is-active { background: rgba(34,211,238,0.15); color: #67e8f9; font-weight: 700; border-color: rgba(34,211,238,0.5); }
.scx-pill--emerald.is-active { background: rgba(16,185,129,0.15); color: #6ee7b7; border-color: rgba(16,185,129,0.4); }
select.scx-select { padding: 0.6rem 0.8rem; border-radius: var(--scx-radius); background: var(--scx-bg-input); border: 1px solid var(--scx-border); color: #e2e8f0; font-size: 0.75rem; font-family: var(--scx-font-mono); }

/* ---------- Bases section ---------- */
.scx-base-tabs { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0.75rem; margin-bottom: 2rem; }
@media (min-width: 640px) { .scx-base-tabs { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (min-width: 1024px) { .scx-base-tabs { grid-template-columns: repeat(5, minmax(0,1fr)); } }
.scx-base-tab { text-align: left; padding: 1rem; border-radius: var(--scx-radius); border: 1px solid rgba(30,41,59,0.8); background: rgba(2,6,23,0.7); color: #94a3b8; }
.scx-base-tab.is-active { background: #0f172a; border-color: var(--scx-cyan-400); box-shadow: 0 10px 25px -10px rgba(8,51,68,0.7); }
.scx-base-tab__country { font-size: 0.62rem; font-family: var(--scx-font-mono); color: var(--scx-cyan-400); font-weight: 700; display: block; margin-bottom: 0.25rem; }
.scx-base-tab__name { font-size: 0.72rem; font-weight: 700; font-family: var(--scx-font-mono); color: #cbd5e1; }
.scx-base-tab.is-active .scx-base-tab__name { color: #fff; }
.scx-base-tab__meta { display: flex; align-items: center; justify-content: space-between; margin-top: 0.5rem; font-size: 0.6rem; color: #64748b; font-family: var(--scx-font-mono); }
.scx-base-tab__meta .status { color: var(--scx-emerald-400); }

.scx-base-showcase { border-radius: var(--scx-radius-lg); background: rgba(15,23,42,0.9); border: 1px solid var(--scx-border); overflow: hidden; }
.scx-base-showcase__grid { display: grid; grid-template-columns: minmax(0,1fr); gap: 0; }
@media (min-width: 1024px) { .scx-base-showcase__grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 2.5rem; padding: 3rem; } }
.scx-base-showcase__media { position: relative; overflow: hidden; border-radius: var(--scx-radius); height: 20rem; }
@media (max-width: 1023px) { .scx-base-showcase__media { border-radius: 0; height: 16rem; } }
.scx-base-showcase__media img { width: 100%; height: 100%; object-fit: cover; }
.scx-base-showcase__loc { position: absolute; top: 1rem; left: 1rem; padding: 0.3rem 0.75rem; border-radius: 999px; background: rgba(2,6,23,0.9); color: #67e8f9; font-family: var(--scx-font-mono); font-size: 0.68rem; font-weight: 700; border: 1px solid rgba(34,211,238,0.4); }
.scx-tele-strip { position: absolute; bottom: 1rem; left: 1rem; right: 1rem; padding: 0.9rem; border-radius: var(--scx-radius-sm); background: rgba(2,6,23,0.92); border: 1px solid var(--scx-border); display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 0.5rem; text-align: center; font-family: var(--scx-font-mono); font-size: 0.68rem; }
.scx-tele-strip span { display: block; font-size: 0.58rem; color: #64748b; }
.scx-tele-strip strong { font-weight: 700; }
.scx-base-showcase__body { padding: 1.5rem; }
@media (min-width: 1024px) { .scx-base-showcase__body { padding: 0; } }
.scx-base-showcase__body h3 { font-size: 1.5rem; font-weight: 800; color: #fff; font-family: var(--scx-font-mono); margin: 0.5rem 0; }
.scx-base-showcase__body p.overview { font-size: 0.85rem; color: #cbd5e1; line-height: 1.7; }
.scx-base-kv { display: flex; align-items: center; justify-content: space-between; padding: 0.85rem; border-radius: var(--scx-radius-sm); background: rgba(2,6,23,0.7); border: 1px solid var(--scx-border); font-family: var(--scx-font-mono); font-size: 0.72rem; margin-top: 0.75rem; gap: 1rem; }
.scx-base-kv span { color: #94a3b8; }
.scx-base-kv strong { color: #67e8f9; text-align: right; }
.scx-units-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: 0.5rem; margin-top: 0.75rem; }
@media (min-width: 560px) { .scx-units-grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr); } }
.scx-unit-item { padding: 0.6rem; border-radius: 8px; background: rgba(2,6,23,0.4); border: 1px solid rgba(30,41,59,0.8); display: flex; align-items: center; gap: 0.5rem; font-size: 0.72rem; color: #cbd5e1; font-family: var(--scx-font-mono); }

/* ---------- R&D pillars / whitepapers ---------- */
.scx-pillars-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: 1.75rem; margin-bottom: 3rem; }
@media (min-width: 720px) { .scx-pillars-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (min-width: 720px) { .scx-pillars-grid--2col { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.scx-pillar-card { padding: 2rem; border-radius: var(--scx-radius-lg); background: rgba(15,23,42,0.8); border: 1px solid var(--scx-border); }
.scx-pillar-card:hover { border-color: rgba(34,211,238,0.4); }
.scx-pillar-icon { width: 3rem; height: 3rem; border-radius: var(--scx-radius); background: rgba(34,211,238,0.15); color: var(--scx-cyan-400); display: flex; align-items: center; justify-content: center; border: 1px solid rgba(34,211,238,0.3); margin-bottom: 1rem; }
.scx-pillar-card h3 { font-size: 1.15rem; font-weight: 800; color: #fff; font-family: var(--scx-font-mono); margin: 0 0 0.6rem; }
.scx-pillar-card p { font-size: 0.78rem; color: #94a3b8; line-height: 1.65; margin: 0; }
.scx-pillar-card .tag { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--scx-border); font-size: 0.72rem; font-family: var(--scx-font-mono); color: var(--scx-cyan-400); }

.scx-whitepaper-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: 1.5rem; }
@media (min-width: 720px) { .scx-whitepaper-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.scx-whitepaper-card { padding: 1.5rem; border-radius: var(--scx-radius); background: rgba(2,6,23,0.7); border: 1px solid var(--scx-border); display: flex; flex-direction: column; justify-content: space-between; gap: 1rem; }
.scx-whitepaper-card:hover { border-color: rgba(34,211,238,0.3); }
.scx-whitepaper-card .author { font-size: 0.68rem; color: #94a3b8; font-family: var(--scx-font-mono); display: block; margin-bottom: 0.5rem; }
.scx-whitepaper-card h4 { font-size: 0.85rem; font-weight: 700; color: #fff; line-height: 1.6; margin: 0; }
.scx-whitepaper-card .foot { display: flex; align-items: center; justify-content: space-between; padding-top: 1rem; border-top: 1px solid var(--scx-border); font-size: 0.68rem; color: #94a3b8; font-family: var(--scx-font-mono); }
.scx-whitepaper-card .foot a { color: var(--scx-cyan-400); font-weight: 700; display: flex; align-items: center; gap: 0.3rem; }

/* ---------- ESG ---------- */
.scx-esg-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: 1.75rem; margin-bottom: 3rem; }
@media (min-width: 720px) { .scx-esg-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.scx-esg-card { padding: 1.75rem; border-radius: var(--scx-radius-lg); background: rgba(15,23,42,0.8); border: 1px solid var(--scx-border); display: flex; flex-direction: column; justify-content: space-between; }
.scx-esg-card:hover { border-color: rgba(16,185,129,0.4); }
.scx-esg-card__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.scx-esg-card__year { font-size: 1.5rem; font-weight: 800; color: var(--scx-emerald-400); font-family: var(--scx-font-mono); }
.scx-esg-card__status { padding: 0.2rem 0.6rem; border-radius: 999px; font-size: 0.6rem; font-family: var(--scx-font-mono); font-weight: 700; background: rgba(16,185,129,0.15); color: #6ee7b7; border: 1px solid rgba(16,185,129,0.4); }
.scx-esg-card h3 { font-size: 1.05rem; font-weight: 800; color: #fff; font-family: var(--scx-font-mono); margin: 0 0 0.5rem; }
.scx-esg-card p { font-size: 0.78rem; color: #94a3b8; line-height: 1.65; margin: 0 0 1.25rem; }
.scx-esg-card__metrics { padding-top: 1rem; border-top: 1px solid var(--scx-border); display: flex; flex-direction: column; gap: 0.5rem; font-family: var(--scx-font-mono); font-size: 0.72rem; }
.scx-esg-card__metrics .row { display: flex; align-items: center; justify-content: space-between; }
.scx-esg-card__metrics .row span { color: #94a3b8; }
.scx-esg-card__metrics .row strong { color: #6ee7b7; font-weight: 700; }

.scx-circular-banner { padding: 2rem; border-radius: var(--scx-radius-lg); background: linear-gradient(90deg, #0f172a, rgba(6,78,59,0.2), #0f172a); border: 1px solid rgba(16,185,129,0.3); }
@media (min-width: 640px) { .scx-circular-banner { padding: 3rem; } }
.scx-circular-banner__grid { display: grid; grid-template-columns: minmax(0,1fr); gap: 2rem; align-items: center; }
@media (min-width: 1024px) { .scx-circular-banner__grid { grid-template-columns: 8fr 4fr; } }
.scx-circular-banner__tag { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0.75rem; border-radius: 999px; background: rgba(16,185,129,0.2); color: #6ee7b7; font-family: var(--scx-font-mono); font-size: 0.7rem; font-weight: 700; margin-bottom: 0.75rem; }
.scx-circular-banner h3 { font-size: 1.4rem; font-weight: 800; color: #fff; font-family: var(--scx-font-mono); margin: 0 0 0.75rem; }
.scx-circular-banner p { font-size: 0.85rem; color: #cbd5e1; line-height: 1.7; margin: 0 0 1rem; }
.scx-circular-metrics { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0.75rem; }
@media (min-width: 560px) { .scx-circular-metrics { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.scx-circular-metrics .metric { padding: 0.75rem; border-radius: 10px; background: rgba(2,6,23,0.6); border: 1px solid var(--scx-border); }
.scx-circular-metrics .metric span { display: block; font-size: 0.6rem; color: #64748b; font-family: var(--scx-font-mono); }
.scx-circular-metrics .metric strong { font-size: 0.82rem; font-family: var(--scx-font-mono); font-weight: 700; }

/* ---------- News / investor preview ---------- */
.scx-tab-switch { display: inline-flex; align-items: center; padding: 0.25rem; border-radius: var(--scx-radius); background: #0f172a; border: 1px solid var(--scx-border); font-family: var(--scx-font-mono); font-size: 0.72rem; }
.scx-tab-switch button { padding: 0.5rem 1rem; border-radius: 10px; background: none; border: none; color: #94a3b8; }
.scx-tab-switch button.is-active { background: rgba(34,211,238,0.15); color: #67e8f9; font-weight: 700; border: 1px solid rgba(34,211,238,0.4); }

.scx-news-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: 1.75rem; }
@media (min-width: 720px) { .scx-news-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.scx-news-card { padding: 1.5rem; border-radius: var(--scx-radius-lg); background: rgba(15,23,42,0.8); border: 1px solid var(--scx-border); display: flex; flex-direction: column; justify-content: space-between; gap: 1rem; }
.scx-news-card:hover { border-color: rgba(34,211,238,0.4); }
.scx-news-card__meta { display: flex; align-items: center; justify-content: space-between; font-size: 0.68rem; font-family: var(--scx-font-mono); }
.scx-news-card__cat { padding: 0.15rem 0.6rem; border-radius: 999px; background: rgba(34,211,238,0.1); color: #67e8f9; border: 1px solid rgba(34,211,238,0.3); }
.scx-news-card__date { color: #64748b; display: flex; align-items: center; gap: 0.25rem; }
.scx-news-card h3 { font-size: 0.95rem; font-weight: 800; color: #fff; font-family: var(--scx-font-mono); line-height: 1.5; margin: 0; }
.scx-news-card p { font-size: 0.75rem; color: #94a3b8; line-height: 1.6; margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.scx-news-card__foot { padding-top: 1rem; border-top: 1px solid var(--scx-border); display: flex; align-items: center; justify-content: space-between; font-size: 0.72rem; font-family: var(--scx-font-mono); color: var(--scx-cyan-400); }

.scx-financial-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: 1.25rem; }
@media (min-width: 560px) { .scx-financial-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1024px) { .scx-financial-grid { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.scx-financial-card { padding: 1.5rem; border-radius: var(--scx-radius-lg); background: rgba(15,23,42,0.8); border: 1px solid var(--scx-border); }
.scx-financial-card .label { font-size: 0.72rem; font-family: var(--scx-font-mono); color: #94a3b8; }
.scx-financial-card .val { font-size: 1.4rem; font-weight: 800; color: #fff; font-family: var(--scx-font-mono); margin: 0.35rem 0; }
.scx-financial-card .change { font-size: 0.68rem; font-family: var(--scx-font-mono); color: var(--scx-emerald-400); }

.scx-ticker-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: 1rem; }
@media (min-width: 560px) { .scx-ticker-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1024px) { .scx-ticker-grid { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.scx-ticker-card { padding: 1rem; border-radius: var(--scx-radius); background: rgba(2,6,23,0.8); border: 1px solid rgba(30,41,59,0.8); display: flex; align-items: center; justify-content: space-between; }
.scx-ticker-card .name { font-size: 0.72rem; font-weight: 700; color: #fff; display: block; font-family: var(--scx-font-mono); }
.scx-ticker-card .price { font-size: 1rem; font-weight: 800; color: #67e8f9; font-family: var(--scx-font-mono); display: block; margin-top: 0.25rem; }
.scx-ticker-card .chg { padding: 0.25rem 0.55rem; border-radius: 10px; font-size: 0.7rem; font-weight: 700; font-family: var(--scx-font-mono); }
.scx-ticker-card .chg.up { background: rgba(16,185,129,0.15); color: #34d399; }
.scx-ticker-card .chg.down { background: rgba(244,63,94,0.15); color: #fb7185; }

/* ---------- Footer ---------- */
.scx-footer { background: var(--scx-footer-bg); border-top: 1px solid rgba(30,41,59,0.8); color: #94a3b8; font-family: var(--scx-font-mono); font-size: 0.75rem; }
.scx-footer__banner { border-bottom: 1px solid rgba(30,41,59,0.6); background: rgba(2,6,23,0.4); padding: 2rem 0; }
.scx-footer__banner .scx-container { display: grid; grid-template-columns: minmax(0,1fr); gap: 1.5rem; }
@media (min-width: 640px) { .scx-footer__banner .scx-container { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1024px) { .scx-footer__banner .scx-container { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.scx-footer__banner-item { display: flex; align-items: center; gap: 0.75rem; }
.scx-footer__banner-icon { width: 2.5rem; height: 2.5rem; border-radius: var(--scx-radius); display: flex; align-items: center; justify-content: center; flex: none; border: 1px solid; }
.scx-footer__banner-item strong { color: #fff; font-weight: 700; display: block; font-size: 0.85rem; font-family: var(--scx-font-sans); }
.scx-footer__banner-item span.sub { font-size: 0.68rem; color: #64748b; font-family: var(--scx-font-sans); }

.scx-footer__main { padding: 4rem 0; display: grid; grid-template-columns: minmax(0,1fr); gap: 2.5rem; }
@media (min-width: 640px) { .scx-footer__main { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1024px) { .scx-footer__main { grid-template-columns: 2fr minmax(0,1fr) minmax(0,1fr) minmax(0,1fr); } }
.scx-footer__brand { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }
.scx-footer__brand-name { display: block; font-weight: 800; font-size: 1.1rem; color: #fff; }
.scx-footer__brand-sub { display: block; margin-top: 0.15rem; font-size: 0.68rem; color: #64748b; }
.scx-footer p.desc { font-size: 0.75rem; color: #94a3b8; line-height: 1.7; max-width: 24rem; font-family: var(--scx-font-sans); }
.scx-footer__addr { padding-top: 0.5rem; font-size: 0.68rem; color: #64748b; display: flex; flex-direction: column; gap: 0.3rem; }
.scx-footer h4 { color: #fff; font-weight: 700; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 0.75rem; }
.scx-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.scx-footer ul a:hover { color: var(--scx-cyan-400); }
.scx-footer__ticker-note { display: block; margin-top: 0.75rem; font-size: 0.62rem; color: #64748b; }
.scx-footer__bottom { border-top: 1px solid #0f172a; padding: 1.25rem 0; text-align: center; color: #475569; font-size: 0.68rem; }
.scx-footer__bottom .scx-container { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 0.75rem; }
@media (min-width: 640px) { .scx-footer__bottom .scx-container { flex-direction: row; } }
.scx-footer__bottom-links { display: flex; align-items: center; gap: 1rem; }

/* ---------- Modal (RFQ inquiry) ---------- */
.scx-modal { position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center; padding: 1rem; background: rgba(2,6,23,0.85); backdrop-filter: blur(8px); overflow-y: auto; }
.scx-modal.is-open { display: flex; }
.scx-modal__panel { position: relative; width: 100%; max-width: 40rem; background: #0f172a; border: 1px solid rgba(34,211,238,0.4); border-radius: var(--scx-radius-lg); box-shadow: 0 40px 80px -20px rgba(0,0,0,0.8); margin: 2rem 0; max-height: 90vh; display: flex; flex-direction: column; }
.scx-modal__head { padding: 1.5rem; border-bottom: 1px solid var(--scx-border); background: rgba(2,6,23,0.8); display: flex; align-items: center; justify-content: space-between; border-radius: var(--scx-radius-lg) var(--scx-radius-lg) 0 0; }
.scx-modal__head-inner { display: flex; align-items: center; gap: 0.75rem; }
.scx-modal__icon { width: 2.5rem; height: 2.5rem; border-radius: var(--scx-radius); background: rgba(34,211,238,0.15); color: var(--scx-cyan-400); display: flex; align-items: center; justify-content: center; flex: none; }
.scx-modal__eyebrow { font-size: 0.62rem; color: var(--scx-cyan-400); font-family: var(--scx-font-mono); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; }
.scx-modal__title { font-size: 1.15rem; font-weight: 800; color: #fff; font-family: var(--scx-font-mono); margin: 0; }
.scx-modal__close { padding: 0.5rem; border-radius: var(--scx-radius); background: #1e293b; color: #94a3b8; border: none; }
.scx-modal__body { padding: 1.5rem; overflow-y: auto; flex: 1; }
@media (min-width: 640px) { .scx-modal__body { padding: 2rem; } }

.scx-form__grid { display: grid; grid-template-columns: minmax(0,1fr); gap: 1rem; }
@media (min-width: 560px) { .scx-form__grid--2 { grid-template-columns: repeat(2, minmax(0,1fr)); } .scx-form__grid--3 { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.scx-form__label { font-size: 0.72rem; color: #94a3b8; font-family: var(--scx-font-mono); display: block; margin-bottom: 0.4rem; }
.scx-form__grid input[type=text], .scx-form__grid input[type=email], .scx-form__grid input[type=tel], .scx-form__grid select, .scx-form__grid textarea {
	width: 100%; padding: 0.65rem 0.85rem; border-radius: var(--scx-radius); background: #020617; border: 1px solid var(--scx-border); color: #fff; font-size: 0.75rem; font-family: var(--scx-font-mono);
}
.scx-form__grid input:focus, .scx-form__grid select:focus, .scx-form__grid textarea:focus { outline: none; border-color: var(--scx-cyan-400); }
.scx-inquiry-types { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0.5rem; }
@media (min-width: 560px) { .scx-inquiry-types { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.scx-inquiry-types button { padding: 0.6rem; border-radius: var(--scx-radius); font-size: 0.7rem; font-family: var(--scx-font-mono); text-align: center; border: 1px solid var(--scx-border); background: rgba(2,6,23,0.7); color: #94a3b8; }
.scx-inquiry-types button.is-active { background: rgba(34,211,238,0.15); border-color: var(--scx-cyan-400); color: #67e8f9; font-weight: 700; }
.scx-form__submit-row { padding-top: 0.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.scx-form__note { font-size: 0.62rem; color: #64748b; font-family: var(--scx-font-mono); display: flex; align-items: center; gap: 0.35rem; }
.scx-form__error { color: #fb7185; font-size: 0.75rem; margin-top: 0.75rem; display: none; }
.scx-form__success { display: none; text-align: center; padding: 1rem 0; }
.scx-form__success.is-visible { display: block; }
.scx-form.is-hidden { display: none; }
.scx-success-icon { width: 4rem; height: 4rem; border-radius: 50%; background: rgba(16,185,129,0.2); color: #34d399; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.25rem; border: 1px solid rgba(16,185,129,0.3); }
.scx-success-ticket { display: inline-block; padding: 0.3rem 0.8rem; border-radius: 999px; background: rgba(34,211,238,0.1); color: #67e8f9; border: 1px solid rgba(34,211,238,0.3); font-family: var(--scx-font-mono); font-size: 0.75rem; }

/* ---------- Page hero (subpages) ---------- */
.scx-page-hero { position: relative; padding: 4rem 0; border-bottom: 1px solid rgba(8,51,68,0.4); overflow: hidden; background: linear-gradient(to bottom, #091122, #070c18 60%, var(--scx-bg)); }
.scx-page-hero--esg { background: linear-gradient(to bottom, #061816, #060f12 60%, var(--scx-bg)); border-color: rgba(6,78,59,0.4); }
.scx-page-hero__glow { position: absolute; inset: 0; background: radial-gradient(circle at 30% 25%, rgba(6,182,212,0.12), transparent 60%); }
.scx-page-hero--esg .scx-page-hero__glow { background: radial-gradient(circle at 30% 25%, rgba(16,185,129,0.15), transparent 60%); }
.scx-breadcrumb { display: flex; align-items: center; gap: 0.5rem; font-size: 0.72rem; color: #94a3b8; font-family: var(--scx-font-mono); margin-bottom: 1rem; position: relative; z-index: 1; }
.scx-breadcrumb .current { color: #67e8f9; font-weight: 700; }
.scx-page-hero--esg .scx-breadcrumb .current { color: #6ee7b7; }
.scx-page-hero__row { display: flex; flex-direction: column; gap: 2rem; position: relative; z-index: 1; }
@media (min-width: 1024px) { .scx-page-hero__row { flex-direction: row; align-items: center; justify-content: space-between; } }
.scx-page-hero__tag { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0.75rem; border-radius: 999px; background: rgba(34,211,238,0.1); border: 1px solid rgba(34,211,238,0.3); color: #67e8f9; font-family: var(--scx-font-mono); font-size: 0.7rem; margin-bottom: 0.75rem; }
.scx-page-hero--esg .scx-page-hero__tag { background: rgba(16,185,129,0.1); border-color: rgba(16,185,129,0.3); color: #6ee7b7; }
.scx-page-hero h1 { font-size: 1.9rem; font-weight: 800; color: #fff; margin: 0; letter-spacing: -0.01em; }
@media (min-width: 640px) { .scx-page-hero h1 { font-size: 2.4rem; } }
.scx-page-hero p.lede { margin-top: 0.6rem; font-size: 0.95rem; color: #cbd5e1; max-width: 40rem; line-height: 1.7; }
.scx-page-hero__stats { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.scx-page-hero__stat { background: rgba(15,23,42,0.8); border: 1px solid var(--scx-border); border-radius: var(--scx-radius); padding: 0.85rem; font-family: var(--scx-font-mono); min-width: 9rem; }
.scx-page-hero__stat p.l { font-size: 0.68rem; color: #94a3b8; margin: 0; }
.scx-page-hero__stat p.v { font-size: 1.1rem; font-weight: 800; color: #67e8f9; margin: 0.15rem 0 0; }

/* ---------- Compare drawer ---------- */
.scx-compare-drawer { position: fixed; inset: 0; z-index: 90; display: none; align-items: flex-end; justify-content: center; padding: 1rem; background: rgba(0,0,0,0.7); backdrop-filter: blur(8px); }
.scx-compare-drawer.is-open { display: flex; }
@media (min-width: 640px) { .scx-compare-drawer { align-items: center; } }
.scx-compare-drawer__panel { background: #0a0f1d; border: 1px solid rgba(34,211,238,0.4); border-radius: var(--scx-radius-lg); padding: 1.5rem; width: 100%; max-width: 56rem; max-height: 85vh; overflow-y: auto; }
.scx-compare-drawer__head { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--scx-border); padding-bottom: 1rem; }
.scx-compare-grid { margin-top: 1.5rem; display: grid; grid-template-columns: minmax(0,1fr); gap: 1rem; }
@media (min-width: 640px) { .scx-compare-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.scx-compare-item { background: #020617; border: 1px solid var(--scx-border); padding: 1rem; border-radius: var(--scx-radius); position: relative; }

/* ---------- Certification strip ---------- */
.scx-cert-band { background: linear-gradient(90deg, #0f172a, #0a1122, #0f172a); border: 1px solid rgba(8,51,68,0.4); border-radius: var(--scx-radius-lg); padding: 2rem; }
.scx-cert-band__row { display: flex; flex-direction: column; gap: 2rem; align-items: center; justify-content: space-between; }
@media (min-width: 1024px) { .scx-cert-band__row { flex-direction: row; } }
.scx-cert-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1rem; width: 100%; }
@media (min-width: 640px) { .scx-cert-grid { grid-template-columns: repeat(4, minmax(0,1fr)); width: auto; } }
.scx-cert-item { background: rgba(2,6,23,0.8); border: 1px solid var(--scx-border); padding: 0.85rem; border-radius: var(--scx-radius); text-align: center; }
.scx-cert-item p.label { font-size: 0.72rem; font-weight: 700; color: #fff; font-family: var(--scx-font-mono); margin: 0.35rem 0 0.15rem; }
.scx-cert-item p.desc { font-size: 0.62rem; color: #94a3b8; margin: 0; }

/* ---------- Bases page detail tabs ---------- */
.scx-detail-tabs { background: #020617; border-bottom: 1px solid var(--scx-border); padding: 0 1.5rem; display: flex; align-items: center; gap: 1.5rem; overflow-x: auto; }
.scx-detail-tabs button { padding-bottom: 0.75rem; padding-top: 1rem; font-size: 0.72rem; font-family: var(--scx-font-mono); display: flex; align-items: center; gap: 0.5rem; border: none; background: none; border-bottom: 2px solid transparent; color: #94a3b8; white-space: nowrap; }
.scx-detail-tabs button.is-active { border-color: var(--scx-cyan-400); color: #67e8f9; font-weight: 700; }
.scx-detail-pane { display: none; padding: 1.5rem; }
@media (min-width: 640px) { .scx-detail-pane { padding: 2rem; } }
.scx-detail-pane.is-active { display: block; }
.scx-env-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: 1.5rem; }
@media (min-width: 720px) { .scx-env-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.scx-env-card { background: #020617; border: 1px solid var(--scx-border); padding: 1.25rem; border-radius: var(--scx-radius); font-family: var(--scx-font-mono); }
.scx-env-card p.l { font-size: 0.72rem; color: #94a3b8; margin: 0; }
.scx-env-card p.v { font-size: 1.5rem; font-weight: 800; margin: 0.25rem 0; }
.scx-env-card p.d { font-size: 0.68rem; color: #64748b; margin: 0; }

/* ---------- Patents (R&D page) ---------- */
.scx-patent-card { background: #020617; border: 1px solid rgba(30,41,59,0.8); border-radius: var(--scx-radius); padding: 1.25rem; margin-bottom: 1rem; font-family: var(--scx-font-mono); }
.scx-patent-card:hover { border-color: rgba(34,211,238,0.4); }
.scx-patent-card__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; font-size: 0.72rem; color: var(--scx-cyan-400); font-weight: 700; }
.scx-patent-card__head .date { font-size: 0.62rem; color: #94a3b8; background: #0f172a; padding: 0.15rem 0.5rem; border-radius: 6px; border: 1px solid var(--scx-border); }
.scx-patent-card h3 { font-family: var(--scx-font-sans); font-size: 0.9rem; font-weight: 700; color: #fff; margin: 0.5rem 0; }
.scx-patent-card p { font-family: var(--scx-font-sans); font-size: 0.75rem; color: #94a3b8; line-height: 1.6; margin: 0; }
.scx-patent-card__foot { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid rgba(30,41,59,0.6); display: flex; align-items: center; justify-content: space-between; font-size: 0.68rem; color: #64748b; flex-wrap: wrap; gap: 0.5rem; }
.scx-patent-card__foot .field { color: #67e8f9; background: rgba(8,51,68,0.6); padding: 0.15rem 0.5rem; border-radius: 6px; border: 1px solid rgba(34,211,238,0.3); }

/* ---------- ESG calculator ---------- */
.scx-lca { background: rgba(7,19,18,0.9); border: 1px solid rgba(16,185,129,0.3); border-radius: var(--scx-radius-lg); padding: 1.5rem; }
@media (min-width: 640px) { .scx-lca { padding: 2rem; } }
.scx-lca__row { display: flex; flex-direction: column; gap: 2rem; align-items: flex-start; }
@media (min-width: 1024px) { .scx-lca__row { flex-direction: row; align-items: center; } }
.scx-lca__slider { width: 100%; accent-color: #10b981; }
.scx-lca__output { background: #020617; border: 1px solid rgba(16,185,129,0.4); border-radius: var(--scx-radius); padding: 1.5rem; text-align: center; width: 100%; font-family: var(--scx-font-mono); }
@media (min-width: 1024px) { .scx-lca__output { width: 20rem; flex: none; } }
.scx-lca__output .figure { font-size: 2.3rem; font-weight: 800; color: #34d399; margin: 0.5rem 0; }
.scx-lca__output .figure span { font-size: 0.85rem; font-weight: 400; color: #94a3b8; }

/* ---------- Investor page ---------- */
.scx-stock-card { background: rgba(15,23,42,0.9); border: 1px solid var(--scx-border); border-radius: var(--scx-radius); padding: 1rem; font-family: var(--scx-font-mono); min-width: 11rem; }
.scx-stock-card .row1 { display: flex; align-items: center; justify-content: space-between; color: #94a3b8; font-size: 0.72rem; }
.scx-stock-card .sym { font-size: 0.62rem; color: var(--scx-cyan-400); font-weight: 700; }
.scx-stock-card .price { font-size: 1.4rem; font-weight: 800; color: #34d399; margin: 0.25rem 0; }
.scx-stock-card .chg { font-size: 0.68rem; color: #34d399; font-weight: 700; }

.scx-filing-tabs { display: flex; align-items: center; gap: 0.4rem; background: #020617; padding: 0.25rem; border-radius: var(--scx-radius); border: 1px solid var(--scx-border); font-family: var(--scx-font-mono); font-size: 0.72rem; flex-wrap: wrap; }
.scx-filing-tabs button { padding: 0.4rem 0.75rem; border-radius: 8px; background: none; border: none; color: #94a3b8; }
.scx-filing-tabs button.is-active { background: var(--scx-cyan-400); color: #051019; font-weight: 700; }
.scx-filing-list { margin-top: 1.5rem; display: flex; flex-direction: column; gap: 0.75rem; }
.scx-filing-item { background: #020617; border: 1px solid rgba(30,41,59,0.8); border-radius: var(--scx-radius); padding: 1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.scx-filing-item__left { display: flex; align-items: center; gap: 0.75rem; }
.scx-filing-item__icon { width: 2rem; height: 2rem; border-radius: 8px; background: rgba(34,211,238,0.1); border: 1px solid rgba(34,211,238,0.3); color: var(--scx-cyan-400); display: flex; align-items: center; justify-content: center; flex: none; }
.scx-filing-item h3 { font-size: 0.78rem; font-weight: 700; color: #e2e8f0; margin: 0; font-family: var(--scx-font-sans); }
.scx-filing-item p { font-size: 0.62rem; color: #64748b; margin: 0.2rem 0 0; font-family: var(--scx-font-mono); }
.scx-filing-item__right { display: flex; align-items: center; gap: 1rem; color: #94a3b8; font-size: 0.62rem; font-family: var(--scx-font-mono); }
.scx-filing-item__right button { padding: 0.5rem; border-radius: var(--scx-radius); background: #0f172a; color: #67e8f9; border: none; }

/* ---------- Utility ---------- */
.scx-empty-state { padding: 4rem 2rem; text-align: center; border-radius: var(--scx-radius-lg); background: rgba(15,23,42,0.4); border: 1px solid var(--scx-border); }
.scx-empty-state h3 { color: #e2e8f0; font-size: 1rem; margin: 1rem 0 0.5rem; }
.scx-empty-state p { color: #94a3b8; font-size: 0.8rem; max-width: 26rem; margin: 0 auto; }
.scx-results-meta { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; font-size: 0.72rem; color: #94a3b8; font-family: var(--scx-font-mono); flex-wrap: wrap; gap: 0.5rem; }

/* Standard page / 404 / search */
.scx-basic-page { padding: 4rem 0; min-height: 50vh; }
.scx-basic-page .entry-title { font-size: 2rem; font-weight: 800; color: #fff; margin-bottom: 1.5rem; }
.scx-basic-page .entry-content { color: #cbd5e1; font-size: 0.95rem; line-height: 1.8; }
.scx-basic-page .entry-content a { color: var(--scx-cyan-400); text-decoration: underline; }
.scx-basic-page .entry-content h2, .scx-basic-page .entry-content h3 { color: #fff; font-family: var(--scx-font-mono); }
.scx-searchform { display: flex; gap: 0.5rem; max-width: 32rem; }
.scx-searchform input[type=search] { flex: 1; padding: 0.75rem 1rem; border-radius: var(--scx-radius); background: var(--scx-bg-input); border: 1px solid var(--scx-border); color: #fff; }
.scx-search-results-list { display: flex; flex-direction: column; gap: 1.5rem; margin-top: 2rem; }
.scx-search-results-list article { padding-bottom: 1.5rem; border-bottom: 1px solid var(--scx-border); }
.scx-search-results-list h2 a { color: #fff; font-weight: 700; }
.scx-comments { margin-top: 3rem; }
.scx-comments .comment-list { list-style: none; margin: 0; padding: 0; }

.lg-row { display: flex; flex-direction: column; }
@media (min-width: 768px) { .lg-row { flex-direction: row; align-items: center; } }

@media (max-width: 400px) {
	.scx-hero__title { font-size: 1.9rem; }
	.scx-section__title { font-size: 1.5rem; }
}