/* ============================================================
 全咖啡产业链低碳经济购物中心 — 全局样式 v2
 Design: Premium Dark · Glassmorphism · Data-First
 ============================================================ */

/* ---------- CSS Variables ---------- */
:root {
 /* Backgrounds — layered depth */
 --bg-0: #000000;
 --bg-1: #050505;
 --bg-2: #0a0b0d;
 --bg-3: #101113;
 --bg-glass: rgba(255, 255, 255, 0.03);
 --bg-glass-hover: rgba(255, 255, 255, 0.06);
 --bg-elevated: #16181c;

 /* Borders */
 --border-1: rgba(255, 255, 255, 0.06);
 --border-2: rgba(255, 255, 255, 0.1);
 --border-3: rgba(255, 255, 255, 0.16);

 /* Text */
 --text-1: #f5f6f7;
 --text-2: #a0a4a8;
 --text-3: #6b7075;
 --text-4: #3a3d42;

 /* Accents */
 --accent: #1d9bf0;
 --accent-hi: #4db8ff;
 --accent-lo: #0d7bc4;
 --accent-dim: rgba(29, 155, 240, 0.1);
 --accent-glow: rgba(29, 155, 240, 0.3);

 /* Low-carbon green */
 --green: #00e676;
 --green-hi: #69f0ae;
 --green-lo: #00b248;
 --green-dim: rgba(0, 230, 118, 0.08);
 --green-glow: rgba(0, 230, 118, 0.2);

 /* Amber */
 --amber: #ffb74d;
 --amber-dim: rgba(255, 183, 77, 0.08);

 /* Purple */
 --purple: #b388ff;
 --purple-dim: rgba(179, 136, 255, 0.08);

 /* Red */
 --red: #ff5252;
 --red-dim: rgba(255, 82, 82, 0.08);

 /* Radius */
 --r-sm: 8px;
 --r-md: 14px;
 --r-lg: 20px;
 --r-xl: 28px;

 /* Shadows */
 --shadow-sm: 0 2px 8px rgba(0,0,0,0.3);
 --shadow-md: 0 4px 24px rgba(0,0,0,0.4);
 --shadow-lg: 0 8px 40px rgba(0,0,0,0.5);
 --shadow-green: 0 0 40px rgba(0, 230, 118, 0.12);
 --shadow-blue: 0 0 40px rgba(29, 155, 240, 0.12);

 /* Typography */
 --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
 --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;

 /* Layout */
 --nav-h: 64px;
 --max-w: 1320px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
 font-family: var(--font-sans);
 background: var(--bg-0);
 color: var(--text-1);
 line-height: 1.6;
 min-height: 100vh;
 overflow-x: hidden;
 background-image:
 radial-gradient(ellipse 80% 50% at 50% -10%, rgba(0, 230, 118, 0.04), transparent),
 radial-gradient(ellipse 60% 40% at 80% 20%, rgba(29, 155, 240, 0.03), transparent);
}
a { color: var(--accent); text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--accent-hi); }
ul, ol { list-style: none; }
img { max-width: 100%; display: block; }
button { cursor: pointer; font-family: inherit; border: none; outline: none; background: none; color: inherit; }
input, textarea, select { font-family: inherit; outline: none; }

/* ---------- Typography ---------- */
h1, h2, h3, h4, h5, h6 { font-weight: 700; line-height: 1.2; letter-spacing: -0.025em; }
.gradient-text {
 background: linear-gradient(135deg, var(--green-hi), var(--accent-hi));
 -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.gradient-green {
 background: linear-gradient(135deg, var(--green), var(--green-hi));
 -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.mono { font-family: var(--font-mono); }
.t2 { color: var(--text-2); }
.t3 { color: var(--text-3); }

/* ---------- Container ---------- */
.container { width: 100%; max-width: var(--max-w); margin: 0 auto; padding: 0 28px; }

/* ---------- Glass Card (core component) ---------- */
.glass {
 background: var(--bg-glass);
 backdrop-filter: blur(20px) saturate(140%);
 -webkit-backdrop-filter: blur(20px) saturate(140%);
 border: 1px solid var(--border-1);
 border-radius: var(--r-lg);
 transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.glass:hover {
 background: var(--bg-glass-hover);
 border-color: var(--border-2);
}
.glass-solid {
 background: var(--bg-2);
 border: 1px solid var(--border-1);
 border-radius: var(--r-lg);
 transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.glass-solid:hover {
 background: var(--bg-3);
 border-color: var(--border-2);
}

/* ---------- Navigation ---------- */
.nav {
 position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
 height: var(--nav-h);
 background: rgba(0, 0, 0, 0.7);
 backdrop-filter: blur(24px) saturate(160%);
 -webkit-backdrop-filter: blur(24px) saturate(160%);
 border-bottom: 1px solid var(--border-1);
}
.nav-inner {
 display: flex; align-items: center; justify-content: space-between;
 height: 100%; max-width: var(--max-w); margin: 0 auto; padding: 0 28px;
}
.nav-logo {
  display: flex; align-items: center; gap: 0;
  font-size: 2.25rem; font-weight: 900; line-height: 1;
  color: transparent;
  background: linear-gradient(135deg, var(--green), var(--accent-hi));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  text-transform: uppercase; letter-spacing: 0.08em;
  text-decoration: none; white-space: nowrap;
  transition: opacity 0.2s;
}
.nav-logo:hover { opacity: 0.85; }
.nav-logo span { background: inherit; -webkit-background-clip: inherit; background-clip: inherit; -webkit-text-fill-color: inherit; }
.nav-links { display: flex; align-items: center; gap: 2px; }
.nav-link {
 padding: 8px 16px; font-size: 0.875rem; font-weight: 500;
 color: var(--text-2); border-radius: 20px; transition: all 0.2s;
}
.nav-link:hover { color: var(--text-1); background: var(--bg-glass); }
.nav-link.active { color: var(--text-1); background: var(--accent-dim); }
.nav-dropdown { position: relative; }
.nav-dropdown-trigger {
 display: flex; align-items: center; gap: 4px;
 padding: 8px 16px; font-size: 0.875rem; font-weight: 500;
 color: var(--text-2); border-radius: 20px; transition: all 0.2s;
}
.nav-dropdown-trigger:hover { color: var(--text-1); background: var(--bg-glass); }
.nav-dropdown-trigger svg { width: 14px; height: 14px; transition: transform 0.2s; }
.nav-dropdown:hover .nav-dropdown-trigger svg { transform: rotate(180deg); }
.nav-dropdown-menu {
 position: absolute; top: calc(100% + 8px); left: 50%;
 transform: translateX(-50%) translateY(8px);
 background: rgba(16, 17, 19, 0.95);
 backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
 border: 1px solid var(--border-2); border-radius: var(--r-md);
 padding: 8px; min-width: 240px;
 opacity: 0; visibility: hidden; transition: all 0.2s;
 box-shadow: var(--shadow-lg);
}
.nav-dropdown:hover .nav-dropdown-menu {
 opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
.nav-dropdown-item {
 display: flex; align-items: center; gap: 8px;
 padding: 10px 14px; font-size: 0.85rem; color: var(--text-2);
 border-radius: var(--r-sm); transition: all 0.15s;
}
.nav-dropdown-item:hover { color: var(--text-1); background: var(--accent-dim); }
.nav-dropdown-item .badge {
 margin-left: auto; padding: 2px 8px; font-size: 0.65rem; font-weight: 700;
 color: var(--green); background: var(--green-dim); border-radius: 8px;
 text-transform: uppercase; letter-spacing: 0.04em;
}

/* ---------- Hero ---------- */
.hero { padding: 140px 0 60px; text-align: center; position: relative; overflow: hidden; }
.hero::before {
 content: ''; position: absolute; top: -100px; left: 50%; transform: translateX(-50%);
 width: 900px; height: 700px;
 background: radial-gradient(ellipse at center, rgba(0, 230, 118, 0.07) 0%, transparent 60%);
 pointer-events: none;
}
.hero::after {
 content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 200px;
 background: linear-gradient(to bottom, transparent, var(--bg-0));
 pointer-events: none;
}
.hero-badge {
 display: inline-flex; align-items: center; gap: 8px;
 padding: 7px 18px; font-size: 0.8rem; font-weight: 600;
 color: var(--green-hi); background: var(--green-dim);
 border: 1px solid rgba(0, 230, 118, 0.15);
 border-radius: 24px; margin-bottom: 28px;
}
.hero-badge-dot {
 width: 7px; height: 7px; background: var(--green); border-radius: 50%;
 box-shadow: 0 0 8px var(--green);
 animation: pulse-dot 2s infinite;
}
@keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
.hero h1 {
 font-size: 4rem; font-weight: 900; line-height: 1.08;
 letter-spacing: -0.035em; margin-bottom: 24px; max-width: 880px;
 margin-left: auto; margin-right: auto;
}
.hero-sub {
 font-size: 1.2rem; color: var(--text-2); max-width: 640px;
 margin: 0 auto 44px; line-height: 1.7;
}
.hero-cta { display: inline-flex; gap: 14px; }

/* ---------- Buttons ---------- */
.btn {
 display: inline-flex; align-items: center; justify-content: center; gap: 8px;
 padding: 13px 30px; font-size: 0.95rem; font-weight: 600;
 border-radius: 26px; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
 white-space: nowrap;
}
.btn-primary {
 background: linear-gradient(135deg, var(--accent), var(--accent-lo));
 color: #fff;
 box-shadow: 0 4px 20px rgba(29, 155, 240, 0.3);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 28px rgba(29, 155, 240, 0.4); color: #fff; }
.btn-green {
 background: linear-gradient(135deg, var(--green), var(--green-lo));
 color: #000;
 box-shadow: 0 4px 20px rgba(0, 230, 118, 0.25);
}
.btn-green:hover { transform: translateY(-1px); box-shadow: 0 6px 28px rgba(0, 230, 118, 0.35); color: #000; }
.btn-outline {
 background: var(--bg-glass); color: var(--text-1); border: 1px solid var(--border-2);
 backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.btn-outline:hover { background: var(--bg-glass-hover); border-color: var(--border-3); color: var(--text-1); }
.btn-sm { padding: 8px 18px; font-size: 0.85rem; }
.btn-lg { padding: 16px 38px; font-size: 1.05rem; }

/* ---------- Section ---------- */
.section { padding: 72px 0; }
.section-head {
 display: flex; align-items: flex-end; justify-content: space-between;
 margin-bottom: 40px; flex-wrap: wrap; gap: 16px;
}
.section-head h2 { font-size: 1.9rem; font-weight: 800; }
.section-head .sub { color: var(--text-3); font-size: 0.9rem; }
.section-eyebrow {
 font-size: 0.75rem; font-weight: 700; text-transform: uppercase;
 letter-spacing: 0.1em; color: var(--green); margin-bottom: 8px;
}

/* ---------- KPI Stats Row ---------- */
.kpi-row {
 display: grid; grid-template-columns: repeat(4, 1fr);
 gap: 14px; margin: 48px 0 32px;
}
.kpi {
 background: var(--bg-glass);
 backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
 border: 1px solid var(--border-1); border-radius: var(--r-md);
 padding: 24px 22px; transition: all 0.35s; position: relative; overflow: hidden;
}
.kpi::before {
 content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
 background: var(--kpi-color, var(--green)); opacity: 0.6;
}
.kpi:hover {
 border-color: var(--border-3); transform: translateY(-3px);
 box-shadow: var(--shadow-md);
}
.kpi-icon { font-size: 1.3rem; margin-bottom: 12px; }
.kpi-val {
 font-size: 2.2rem; font-weight: 900; font-family: var(--font-mono);
 letter-spacing: -0.03em; color: var(--kpi-color, var(--green));
}
.kpi-label {
 font-size: 0.78rem; color: var(--text-3); text-transform: uppercase;
 letter-spacing: 0.06em; margin-top: 2px;
}
.kpi-trend {
 font-size: 0.75rem; margin-top: 8px;
 display: flex; align-items: center; gap: 4px;
}
.kpi-trend.up { color: var(--green); }
.kpi-trend.neutral { color: var(--text-3); }

/* ---------- Carbon Journey (SVG pipeline) ---------- */
.journey {
 position: relative; padding: 40px 0; overflow-x: auto;
}
.journey-track {
 display: flex; align-items: center; justify-content: center;
 min-width: 1000px; position: relative;
}
.journey-node {
 display: flex; flex-direction: column; align-items: center; text-align: center;
 min-width: 100px; z-index: 2; position: relative;
}
.journey-node-orb {
 width: 56px; height: 56px; border-radius: 50%;
 display: flex; align-items: center; justify-content: center;
 font-size: 1.3rem;
 background: var(--bg-2); border: 1px solid var(--border-2);
 transition: all 0.35s;
}
.journey-node:hover .journey-node-orb {
 border-color: var(--green); box-shadow: 0 0 24px var(--green-glow);
 transform: scale(1.12);
}
.journey-node-label {
 font-size: 0.78rem; font-weight: 600; color: var(--text-1); margin-top: 10px;
}
.journey-node-carbon {
 font-size: 0.68rem; color: var(--green); font-family: var(--font-mono); margin-top: 2px;
}
.journey-line {
 flex: 1; height: 2px; min-width: 40px;
 background: linear-gradient(90deg, var(--green-lo), var(--green));
 opacity: 0.3; position: relative;
}
.journey-line::after {
 content: ''; position: absolute; right: -4px; top: -3px;
 width: 0; height: 0;
 border-left: 6px solid var(--green);
 border-top: 4px solid transparent;
 border-bottom: 4px solid transparent;
 opacity: 0.5;
}

/* ---------- Dashboard Panel ---------- */
.dash-panel {
 display: grid; grid-template-columns: 1.6fr 1fr;
 gap: 14px; margin-top: 32px;
}
.dash-panel-right { display: flex; flex-direction: column; gap: 14px; }
.panel {
 background: var(--bg-glass);
 backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
 border: 1px solid var(--border-1); border-radius: var(--r-lg);
 padding: 24px;
}
.panel-head {
 display: flex; align-items: center; justify-content: space-between;
 margin-bottom: 22px;
}
.panel-title { font-size: 0.95rem; font-weight: 700; }
.panel-badge {
 font-size: 0.68rem; padding: 3px 10px; border-radius: 10px;
 font-weight: 700; display: flex; align-items: center; gap: 5px;
}
.panel-badge.live { color: var(--green); background: var(--green-dim); }
.panel-badge.live::before {
 content: ''; width: 6px; height: 6px; border-radius: 50%;
 background: var(--green); animation: pulse-dot 2s infinite;
}

/* ---------- SVG Chart: Area Chart ---------- */
.area-chart { width: 100%; height: auto; }
.area-chart .grid line { stroke: var(--border-1); stroke-width: 1; }
.area-chart .axis text { font-size: 10px; fill: var(--text-3); font-family: var(--font-mono); }
.area-chart .area-fill { opacity: 0.15; }
.area-chart .line-stroke { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- SVG Chart: Donut ---------- */
.donut-wrap { display: flex; align-items: center; justify-content: center; gap: 28px; }
.donut { position: relative; width: 150px; height: 150px; }
.donut svg { transform: rotate(-90deg); }
.donut-center {
 position: absolute; inset: 0; display: flex; flex-direction: column;
 align-items: center; justify-content: center;
}
.donut-val { font-size: 1.6rem; font-weight: 900; font-family: var(--font-mono); }
.donut-label { font-size: 0.7rem; color: var(--text-3); }
.donut-legend { display: flex; flex-direction: column; gap: 8px; }
.donut-legend-item {
 display: flex; align-items: center; gap: 8px; font-size: 0.8rem; color: var(--text-2);
}
.donut-legend-dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }

/* ---------- Horizontal Bar List ---------- */
.hbar-list { display: flex; flex-direction: column; gap: 14px; }
.hbar-row { display: flex; align-items: center; gap: 12px; }
.hbar-label { width: 90px; font-size: 0.8rem; color: var(--text-2); text-align: right; flex-shrink: 0; }
.hbar-track {
 flex: 1; height: 26px; background: var(--bg-1); border-radius: 13px;
 overflow: hidden; position: relative; border: 1px solid var(--border-1);
}
.hbar-fill {
 height: 100%; border-radius: 13px; transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1);
 display: flex; align-items: center; justify-content: flex-end; padding-right: 10px;
 font-size: 0.72rem; font-weight: 700; color: rgba(255,255,255,0.95);
}
.hbar-fill.green { background: linear-gradient(90deg, var(--green-lo), var(--green)); }
.hbar-fill.blue { background: linear-gradient(90deg, var(--accent-lo), var(--accent)); }
.hbar-fill.amber { background: linear-gradient(90deg, #c68610, var(--amber)); }
.hbar-fill.purple { background: linear-gradient(90deg, #7c4dff, var(--purple)); }
.hbar-val {
 width: 56px; font-size: 0.8rem; font-weight: 700; font-family: var(--font-mono);
 text-align: left; flex-shrink: 0;
}

/* ---------- Module Cards Grid ---------- */
.module-grid {
 display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
}
.module-card {
 background: var(--bg-glass);
 backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
 border: 1px solid var(--border-1); border-radius: var(--r-lg);
 padding: 26px 22px; transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
 position: relative; overflow: hidden; text-decoration: none; color: inherit; display: block;
}
.module-card::before {
 content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
 background: var(--mc-color, var(--green)); opacity: 0; transition: opacity 0.3s;
}
.module-card::after {
 content: ''; position: absolute; bottom: -40px; right: -40px;
 width: 120px; height: 120px; border-radius: 50%;
 background: var(--mc-color, var(--green)); opacity: 0;
 filter: blur(40px); transition: opacity 0.4s;
}
.module-card:hover {
 border-color: var(--border-3); transform: translateY(-4px);
 box-shadow: var(--shadow-md);
}
.module-card:hover::before { opacity: 1; }
.module-card:hover::after { opacity: 0.06; }
.module-card-num {
 position: absolute; top: 18px; right: 20px;
 font-size: 2.5rem; font-weight: 900; font-family: var(--font-mono);
 color: var(--text-4); opacity: 0.4;
}
.module-card-icon {
 width: 44px; height: 44px; border-radius: 12px;
 display: flex; align-items: center; justify-content: center;
 font-size: 1.25rem; margin-bottom: 16px;
}
.module-card-icon.green { background: var(--green-dim); }
.module-card-icon.blue { background: var(--accent-dim); }
.module-card-icon.amber { background: var(--amber-dim); }
.module-card-icon.purple { background: var(--purple-dim); }
.module-card h3 { font-size: 1.05rem; margin-bottom: 8px; }
.module-card p { font-size: 0.83rem; color: var(--text-2); line-height: 1.5; margin-bottom: 16px; }
.module-card-meta {
 display: flex; gap: 14px; font-size: 0.72rem; color: var(--text-3);
 padding-top: 14px; border-top: 1px solid var(--border-1);
}
.module-card-tag {
 position: absolute; top: 18px; right: 60px;
 padding: 2px 10px; font-size: 0.65rem; font-weight: 700;
 color: var(--green); background: var(--green-dim); border-radius: 8px;
 text-transform: uppercase; letter-spacing: 0.04em;
}

/* ---------- Flywheel Cards ---------- */
.flywheel-grid {
 display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
}
.flywheel-card {
 background: var(--bg-glass);
 backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
 border: 1px solid var(--border-1); border-radius: var(--r-lg);
 padding: 28px; transition: all 0.35s; position: relative; overflow: hidden;
}
.flywheel-card:hover { border-color: var(--border-2); transform: translateY(-3px); }
.flywheel-card-icon {
 width: 48px; height: 48px; border-radius: 14px;
 display: flex; align-items: center; justify-content: center;
 font-size: 1.4rem; margin-bottom: 18px;
}
.flywheel-card h4 { font-size: 1.1rem; margin-bottom: 10px; }
.flywheel-card p { font-size: 0.85rem; color: var(--text-2); line-height: 1.6; }
.flywheel-chain {
 display: flex; flex-wrap: wrap; gap: 4px; margin-top: 16px;
 font-size: 0.72rem; font-family: var(--font-mono); color: var(--text-3);
}
.flywheel-chain span { color: var(--green); }
.flywheel-chain em { font-style: normal; color: var(--text-4); margin: 0 2px; }

/* ---------- News ---------- */
.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.news-card {
 background: var(--bg-glass);
 backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
 border: 1px solid var(--border-1); border-radius: var(--r-lg);
 padding: 24px; transition: all 0.3s; display: block; color: inherit; text-decoration: none;
}
.news-card:hover { background: var(--bg-glass-hover); border-color: var(--border-2); transform: translateY(-2px); }
.news-card-tag {
 display: inline-block; padding: 3px 10px; font-size: 0.68rem; font-weight: 700;
 border-radius: 8px; margin-bottom: 14px; text-transform: uppercase; letter-spacing: 0.04em;
}
.news-card-tag.tech { color: var(--accent); background: var(--accent-dim); }
.news-card-tag.carbon { color: var(--green); background: var(--green-dim); }
.news-card-tag.biz { color: var(--amber); background: var(--amber-dim); }
.news-card h4 { font-size: 1rem; margin-bottom: 8px; line-height: 1.4; }
.news-card p { font-size: 0.85rem; color: var(--text-2); line-height: 1.5; }
.news-card-date { font-size: 0.72rem; color: var(--text-4); margin-top: 14px; }

/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--border-1); padding: 56px 0 28px; background: var(--bg-1); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 36px; }
.footer-brand h3 { font-size: 1.1rem; margin-bottom: 12px; }
.footer-brand p { font-size: 0.85rem; color: var(--text-2); line-height: 1.6; }
.footer-col h4 { font-size: 0.78rem; font-weight: 700; margin-bottom: 14px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-3); }
.footer-col a { display: block; font-size: 0.85rem; color: var(--text-2); padding: 5px 0; transition: color 0.2s; }
.footer-col a:hover { color: var(--text-1); }
.footer-bottom {
 display: flex; align-items: center; justify-content: space-between;
 padding-top: 24px; border-top: 1px solid var(--border-1);
}
.footer-bottom p { font-size: 0.78rem; color: var(--text-4); }

/* ---------- Breadcrumb ---------- */
.breadcrumb {
 display: flex; align-items: center; gap: 8px;
 font-size: 0.8rem; color: var(--text-3); margin-bottom: 20px;
}
.breadcrumb a { color: var(--text-3); }
.breadcrumb a:hover { color: var(--text-1); }
.breadcrumb-sep { color: var(--text-4); }

/* ---------- Page Header ---------- */
.page-header {
 padding: 100px 0 40px; position: relative; overflow: hidden;
}
.page-header::before {
 content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
 width: 600px; height: 400px;
 background: radial-gradient(ellipse at center, var(--ph-glow, rgba(0, 230, 118, 0.06)), transparent 70%);
 pointer-events: none;
}
.page-header-content { text-align: center; position: relative; }
.page-header .module-icon {
 width: 72px; height: 72px; border-radius: 20px;
 display: flex; align-items: center; justify-content: center;
 font-size: 2rem; margin: 0 auto 20px;
}
.page-header h1 { font-size: 2.6rem; margin-bottom: 14px; }
.page-header .module-desc {
 font-size: 1rem; color: var(--text-2); max-width: 680px;
 margin: 0 auto; line-height: 1.7;
}

/* ---------- Feature Grid ---------- */
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.feature-card {
 background: var(--bg-glass);
 backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
 border: 1px solid var(--border-1); border-radius: var(--r-md);
 padding: 24px; transition: all 0.3s;
}
.feature-card:hover { background: var(--bg-glass-hover); border-color: var(--border-2); }
.feature-card-icon {
 width: 42px; height: 42px; border-radius: 12px;
 display: flex; align-items: center; justify-content: center;
 font-size: 1.15rem; margin-bottom: 16px;
}
.feature-card-icon.green { background: var(--green-dim); }
.feature-card-icon.blue { background: var(--accent-dim); }
.feature-card-icon.amber { background: var(--amber-dim); }
.feature-card h4 { font-size: 0.98rem; margin-bottom: 8px; }
.feature-card p { font-size: 0.85rem; color: var(--text-2); line-height: 1.5; }

/* ---------- Low Carbon Banner ---------- */
.lc-banner {
 background: linear-gradient(135deg, rgba(0, 230, 118, 0.06), rgba(0, 230, 118, 0.01));
 border: 1px solid rgba(0, 230, 118, 0.12);
 border-radius: var(--r-lg); padding: 32px; margin: 40px 0;
 position: relative; overflow: hidden;
}
.lc-banner::after {
 content: ''; position: absolute; right: -80px; top: -80px;
 width: 240px; height: 240px;
 background: radial-gradient(circle, rgba(0, 230, 118, 0.08), transparent 70%);
 pointer-events: none;
}
.lc-banner h3 { font-size: 1.25rem; margin-bottom: 8px; color: var(--green-hi); }
.lc-banner p { font-size: 0.9rem; color: var(--text-2); line-height: 1.6; max-width: 640px; }
.lc-banner ul { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 20px; }
.lc-banner ul li {
 display: flex; align-items: center; gap: 6px;
 font-size: 0.85rem; color: var(--green-hi);
}
.lc-banner ul li::before { content: ''; font-weight: 700; }

/* ---------- Data Table ---------- */
.table-wrap { overflow-x: auto; margin: 20px 0; border-radius: var(--r-md); border: 1px solid var(--border-1); }
.data-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.data-table th {
 text-align: left; padding: 14px 18px; font-weight: 700; color: var(--text-3);
 border-bottom: 1px solid var(--border-2); white-space: nowrap;
 font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em;
 background: var(--bg-1);
}
.data-table td { padding: 15px 18px; border-bottom: 1px solid var(--border-1); color: var(--text-1); }
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: var(--bg-glass); }
.data-table .hl { color: var(--green); font-weight: 700; font-family: var(--font-mono); }

/* ---------- Card Grids ---------- */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }

/* ---------- IP Curve Card ---------- */
.ip-card {
 background: var(--bg-glass);
 backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
 border: 1px solid var(--border-1); border-radius: var(--r-lg);
 overflow: hidden; transition: all 0.3s;
}
.ip-card:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: var(--shadow-blue); }
.ip-curve-preview {
 height: 140px; background: var(--bg-1); position: relative;
 display: flex; align-items: center; justify-content: center;
}
.ip-card-body { padding: 20px; }
.ip-card-body h4 { font-size: 0.98rem; margin-bottom: 6px; }
.ip-card-author { font-size: 0.78rem; color: var(--text-3); margin-bottom: 12px; }
.ip-card-meta { display: flex; gap: 14px; font-size: 0.72rem; color: var(--text-3); }
.ip-card-price { margin-top: 12px; font-size: 1.15rem; font-weight: 800; color: var(--accent); font-family: var(--font-mono); }
.ip-card-ce {
 display: inline-flex; align-items: center; gap: 4px;
 padding: 3px 9px; font-size: 0.68rem; font-weight: 700;
 color: var(--green); background: var(--green-dim); border-radius: 8px;
}

/* ---------- Crowdfunding Card ---------- */
.cf-card {
 background: var(--bg-glass);
 backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
 border: 1px solid var(--border-1); border-radius: var(--r-lg);
 padding: 24px; transition: all 0.3s;
}
.cf-card:hover { background: var(--bg-glass-hover); border-color: var(--border-2); transform: translateY(-3px); }
.cf-progress { margin: 16px 0; }
.cf-bar { height: 8px; background: var(--bg-1); border-radius: 4px; overflow: hidden; border: 1px solid var(--border-1); }
.cf-fill {
 height: 100%; background: linear-gradient(90deg, var(--green), var(--accent));
 border-radius: 4px; transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.cf-meta { display: flex; justify-content: space-between; margin-top: 8px; font-size: 0.8rem; }
.cf-meta span:first-child { font-weight: 700; font-family: var(--font-mono); }
.cf-meta span:last-child { color: var(--text-3); }
.cf-tags { display: flex; gap: 14px; font-size: 0.76rem; color: var(--text-3); margin-top: 4px; }

/* ---------- Storage Monitor ---------- */
.storage-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 24px; }
.storage-cell {
 background: var(--bg-glass);
 backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
 border: 1px solid var(--border-1); border-radius: var(--r-md);
 padding: 22px;
}
.storage-cell-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.storage-cell-label { font-size: 0.8rem; color: var(--text-2); }
.storage-cell-dot { width: 8px; height: 8px; border-radius: 50%; }
.storage-cell-dot.ok { background: var(--green); box-shadow: 0 0 8px var(--green); }
.storage-cell-dot.warn { background: var(--amber); box-shadow: 0 0 8px var(--amber); }
.storage-cell-val { font-size: 1.6rem; font-weight: 800; font-family: var(--font-mono); margin-bottom: 4px; }
.storage-cell-unit { font-size: 0.78rem; color: var(--text-3); }

/* ---------- Product Card ---------- */
.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.product-card {
 background: var(--bg-glass);
 backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
 border: 1px solid var(--border-1); border-radius: var(--r-lg);
 overflow: hidden; transition: all 0.3s;
}
.product-card:hover { border-color: var(--border-2); transform: translateY(-3px); box-shadow: var(--shadow-md); }
.product-img {
 height: 160px; background: var(--bg-1);
 display: flex; align-items: center; justify-content: center; font-size: 2.8rem;
}
.product-body { padding: 16px; }
.product-body h4 { font-size: 0.9rem; margin-bottom: 4px; }
.product-origin { font-size: 0.74rem; color: var(--text-3); margin-bottom: 10px; }
.product-carbon { display: flex; align-items: center; gap: 4px; font-size: 0.74rem; color: var(--green); margin-bottom: 10px; }
.product-price { font-size: 1.1rem; font-weight: 800; font-family: var(--font-mono); }

/* ---------- Carbon Footprint Breakdown ---------- */
.cf-breakdown {
 display: grid; grid-template-columns: repeat(5, 1fr); gap: 0;
 border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--border-1);
}
.cf-step {
 padding: 20px 16px; text-align: center; position: relative;
 border-right: 1px solid var(--border-1);
}
.cf-step:last-child { border-right: none; }
.cf-step-icon { font-size: 1.5rem; margin-bottom: 8px; }
.cf-step-label { font-size: 0.75rem; color: var(--text-3); margin-bottom: 6px; }
.cf-step-val { font-size: 1.1rem; font-weight: 800; font-family: var(--font-mono); }
.cf-step-val.green { color: var(--green); }
.cf-step-val.amber { color: var(--amber); }
.cf-step-val.red { color: var(--red); }

/* ---------- Mini Sparkline (SVG) ---------- */
.sparkline { width: 100%; height: 40px; }

/* ---------- Status Pill ---------- */
.pill {
 display: inline-flex; align-items: center; gap: 5px;
 padding: 3px 10px; font-size: 0.72rem; font-weight: 700;
 border-radius: 10px; text-transform: uppercase; letter-spacing: 0.03em;
}
.pill.green { color: var(--green); background: var(--green-dim); }
.pill.amber { color: var(--amber); background: var(--amber-dim); }
.pill.blue { color: var(--accent); background: var(--accent-dim); }
.pill.purple { color: var(--purple); background: var(--purple-dim); }
.pill.red { color: var(--red); background: var(--red-dim); }

/* ---------- Divider ---------- */
.divider { border: none; border-top: 1px solid var(--border-1); margin: 0; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
 .module-grid, .product-grid { grid-template-columns: repeat(2, 1fr); }
 .dash-panel, .news-grid, .feature-grid, .flywheel-grid { grid-template-columns: 1fr; }
 .kpi-row { grid-template-columns: repeat(2, 1fr); }
 .footer-grid { grid-template-columns: repeat(2, 1fr); }
 .cf-breakdown { grid-template-columns: repeat(3, 1fr); }
 .cf-step:nth-child(3) { border-right: none; }
 .hero h1 { font-size: 2.8rem; }
}
@media (max-width: 640px) {
 .module-grid, .product-grid, .news-grid, .feature-grid, .flywheel-grid,
 .kpi-row, .footer-grid, .storage-grid, .grid-2, .grid-3 { grid-template-columns: 1fr; }
 .cf-breakdown { grid-template-columns: repeat(2, 1fr); }
 .hero h1 { font-size: 2.2rem; }
 .hero-sub { font-size: 1rem; }
 .journey-track { min-width: 640px; }
}

/* ---------- Animations ---------- */
@keyframes fadeInUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideInRight { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } }
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }

.animate-in { animation: fadeInUp 0.7s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
.fade-in { animation: fadeIn 0.8s ease forwards; }
.d1 { animation-delay: 0.08s; }
.d2 { animation-delay: 0.16s; }
.d3 { animation-delay: 0.24s; }
.d4 { animation-delay: 0.32s; }
.d5 { animation-delay: 0.4s; }
.d6 { animation-delay: 0.48s; }
.d7 { animation-delay: 0.56s; }
.d8 { animation-delay: 0.64s; }

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg-0); }
::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-3); }

/* ============================================================
 B2B Dynamic Pricing + RWA/Stablecoin Platform Components
 ============================================================ */

/* ---------- 3-Tier Architecture Diagram (RWA crown) ---------- */
.arch-stack { display: flex; flex-direction: column; gap: 0; max-width: 720px; margin: 0 auto; }
.arch-tier {
 position: relative; padding: 26px 28px; border-radius: var(--r-lg);
 border: 1px solid var(--border-2); transition: all 0.35s;
}
.arch-tier:hover { transform: translateX(6px); border-color: var(--border-3); }
.arch-tier-num {
 position: absolute; top: 18px; right: 22px;
 font-size: 2.2rem; font-weight: 900; font-family: var(--font-mono);
 color: var(--text-4); opacity: 0.3;
}
.arch-tier-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 6px; }
.arch-tier h3 { font-size: 1.3rem; margin-bottom: 8px; }
.arch-tier p { font-size: 0.85rem; color: var(--text-2); line-height: 1.6; }
.arch-tier-meta { display: flex; gap: 18px; margin-top: 14px; flex-wrap: wrap; }
.arch-tier-meta span { font-size: 0.76rem; font-family: var(--font-mono); color: var(--text-3); }
.arch-connector {
 width: 2px; height: 28px; margin: 0 auto;
 background: linear-gradient(180deg, var(--border-3), transparent);
 position: relative;
}
.arch-connector::after {
 content: '↓'; position: absolute; bottom: -4px; left: 50%; transform: translateX(-50%);
 font-size: 0.8rem; color: var(--text-4);
}

/* ---------- Reserve Composition Bars ---------- */
.reserve-list { display: flex; flex-direction: column; gap: 16px; }
.reserve-row { display: flex; flex-direction: column; gap: 6px; }
.reserve-row-head { display: flex; justify-content: space-between; align-items: center; font-size: 0.82rem; }
.reserve-row-label { color: var(--text-2); display: flex; align-items: center; gap: 8px; }
.reserve-row-val { font-family: var(--font-mono); font-weight: 700; }
.reserve-row-val.pct { font-size: 0.78rem; color: var(--text-3); margin-left: 8px; }
.reserve-track {
 height: 10px; background: var(--bg-1); border-radius: 6px; overflow: hidden;
 border: 1px solid var(--border-1);
}
.reserve-fill { height: 100%; border-radius: 6px; transition: width 1.4s cubic-bezier(0.4,0,0.2,1); }

/* ---------- Pool Depth Visualization ---------- */
.pool-depth { display: flex; align-items: flex-end; gap: 4px; height: 140px; padding: 0 8px; }
.pool-bar {
 flex: 1; min-width: 8px; border-radius: 4px 4px 0 0; transition: height 1s ease, opacity 0.3s;
 position: relative; cursor: default;
}
.pool-bar:hover { opacity: 0.8; }
.pool-axis { display: flex; justify-content: space-between; margin-top: 8px; font-size: 0.7rem; color: var(--text-4); font-family: var(--font-mono); }

/* ---------- Pricing Engine Flow ---------- */
.engine-flow {
 display: flex; align-items: stretch; gap: 0; flex-wrap: wrap;
}
.engine-step {
 flex: 1; min-width: 140px; padding: 20px 18px;
 background: var(--bg-glass); border: 1px solid var(--border-1);
 border-radius: var(--r-md); transition: all 0.3s; position: relative;
}
.engine-step:hover { background: var(--bg-glass-hover); border-color: var(--border-2); transform: translateY(-3px); }
.engine-step-icon { font-size: 1.3rem; margin-bottom: 10px; }
.engine-step h4 { font-size: 0.88rem; margin-bottom: 6px; }
.engine-step p { font-size: 0.76rem; color: var(--text-3); line-height: 1.45; }
.engine-arrow {
 display: flex; align-items: center; justify-content: center;
 width: 32px; color: var(--text-4); font-size: 1.1rem; flex-shrink: 0;
}

/* ---------- Contract Type Cards ---------- */
.contract-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.contract-card {
 background: var(--bg-glass); border: 1px solid var(--border-1);
 border-radius: var(--r-lg); padding: 28px 24px; transition: all 0.35s;
 position: relative; overflow: hidden;
}
.contract-card::before {
 content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
 background: var(--cc-color, var(--accent)); opacity: 0.7;
}
.contract-card:hover { border-color: var(--border-3); transform: translateY(-4px); box-shadow: var(--shadow-md); }
.contract-card-tag {
 display: inline-block; padding: 3px 10px; font-size: 0.66rem; font-weight: 700;
 border-radius: 8px; margin-bottom: 14px; text-transform: uppercase; letter-spacing: 0.04em;
}
.contract-card h3 { font-size: 1.15rem; margin-bottom: 8px; }
.contract-card p { font-size: 0.82rem; color: var(--text-2); line-height: 1.55; margin-bottom: 16px; }
.contract-card-terms { display: flex; flex-direction: column; gap: 8px; padding-top: 14px; border-top: 1px solid var(--border-1); }
.contract-card-terms div { display: flex; justify-content: space-between; font-size: 0.78rem; }
.contract-card-terms span:first-child { color: var(--text-3); }
.contract-card-terms span:last-child { font-family: var(--font-mono); font-weight: 600; }

/* ---------- Flow Stepper (redemption / hedging) ---------- */
.stepper { display: flex; align-items: flex-start; gap: 0; flex-wrap: wrap; }
.step-item { flex: 1; min-width: 130px; text-align: center; position: relative; padding: 0 8px; }
.step-item:not(:last-child)::after {
 content: ''; position: absolute; top: 22px; right: -4px; width: calc(100% - 44px); height: 2px;
 background: linear-gradient(90deg, var(--border-2), var(--border-1));
}
.step-circle {
 width: 44px; height: 44px; border-radius: 50%; margin: 0 auto 12px;
 display: flex; align-items: center; justify-content: center;
 font-size: 1.1rem; font-weight: 700; font-family: var(--font-mono);
 border: 2px solid var(--border-2); background: var(--bg-2); position: relative; z-index: 2;
 transition: all 0.3s;
}
.step-item.active .step-circle { border-color: var(--green); color: var(--green); box-shadow: 0 0 16px var(--green-glow); }
.step-item.done .step-circle { border-color: var(--green); background: var(--green-dim); color: var(--green); }
.step-label { font-size: 0.82rem; font-weight: 600; margin-bottom: 4px; }
.step-desc { font-size: 0.72rem; color: var(--text-3); line-height: 1.4; }

/* ---------- Client Tier Badge ---------- */
.tier-badge {
 display: inline-flex; align-items: center; gap: 4px;
 padding: 2px 9px; font-size: 0.66rem; font-weight: 800;
 border-radius: 6px; text-transform: uppercase; letter-spacing: 0.05em;
}
.tier-badge.platinum { color: #e0e0e0; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); }
.tier-badge.gold { color: var(--amber); background: var(--amber-dim); }
.tier-badge.silver { color: #b0bec5; background: rgba(176,190,197,0.08); }
.tier-badge.bronze { color: #cd7f32; background: rgba(205,127,50,0.1); }

/* ---------- Token Stat Grid (RWA dashboard) ---------- */
.token-stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.token-stat {
 background: var(--bg-glass); border: 1px solid var(--border-1);
 border-radius: var(--r-md); padding: 20px; transition: all 0.3s;
}
.token-stat:hover { border-color: var(--border-2); }
.token-stat-label { font-size: 0.74rem; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 8px; }
.token-stat-val { font-size: 1.8rem; font-weight: 900; font-family: var(--font-mono); letter-spacing: -0.02em; }
.token-stat-sub { font-size: 0.74rem; color: var(--text-3); margin-top: 4px; }

/* ---------- Tag / Chip row ---------- */
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
 display: inline-flex; align-items: center; gap: 6px;
 padding: 6px 14px; font-size: 0.78rem; font-weight: 600;
 border-radius: 20px; border: 1px solid var(--border-2); color: var(--text-2);
 background: var(--bg-glass); transition: all 0.2s;
}
.chip:hover { border-color: var(--border-3); color: var(--text-1); }
.chip.green { color: var(--green); border-color: rgba(0,230,118,0.2); background: var(--green-dim); }
.chip.blue { color: var(--accent); border-color: rgba(29,155,240,0.2); background: var(--accent-dim); }
.chip.purple { color: var(--purple); border-color: rgba(179,136,255,0.2); background: var(--purple-dim); }
.chip.amber { color: var(--amber); border-color: rgba(255,183,77,0.2); background: var(--amber-dim); }

/* ---------- Peg Indicator ---------- */
.peg-indicator {
 display: inline-flex; align-items: center; gap: 8px;
 padding: 8px 16px; border-radius: var(--r-sm);
 font-family: var(--font-mono); font-weight: 700; font-size: 0.95rem;
}
.peg-indicator.stable { color: var(--green); background: var(--green-dim); border: 1px solid rgba(0,230,118,0.15); }
.peg-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; animation: pulse-dot 2s infinite; }

/* ---------- Responsive (financial) ---------- */
@media (max-width: 1024px) {
 .contract-grid, .token-stat-grid { grid-template-columns: 1fr; }
 .engine-flow { flex-direction: column; }
 .engine-arrow { transform: rotate(90deg); width: 100%; height: 24px; }
 .pool-depth { height: 100px; }
}
@media (max-width: 640px) {
 .stepper { flex-direction: column; align-items: center; gap: 20px; }
 .step-item:not(:last-child)::after { display: none; }
}

/* ============================================================
   JEBI ONE — Logo, i18n, Empty Icon, RTL, Contact Page Styles
   ============================================================ */

/* ---------- Footer Brand (match logo style) ---------- */
.footer-brand h3 {
  font-size: 1.5rem; font-weight: 900;
  text-transform: uppercase; letter-spacing: 0.06em;
  background: linear-gradient(135deg, var(--green), var(--accent-hi));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 12px;
}

/* ---------- Hide Empty Icon Containers (emojis removed) ---------- */
.kpi-icon:empty, .module-card-icon:empty, .feature-card-icon:empty,
.journey-node-orb:empty, .cf-step-icon:empty, .flywheel-card-icon:empty,
.product-img:empty, .module-icon:empty, .engine-step-icon:empty,
.ip-card-ce:empty, .lc-banner h3:empty, .reserve-row-label:empty,
.token-stat-sub:empty, .step-desc:empty, .step-label:empty,
.arch-tier-label:empty, .contract-card-tag:empty {
  display: none !important;
}
/* Collapse empty orbs in journey */
.journey-node-orb:empty { width: 0; height: 0; margin: 0; }
/* Collapse empty product images */
.product-img:empty { height: 80px; }

/* ---------- Language Switcher ---------- */
.lang-switcher {
  position: relative; display: flex; align-items: center;
  margin-left: 8px;
}
.lang-switcher-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 14px; font-size: 0.8rem; font-weight: 600;
  color: var(--text-2); border-radius: 20px;
  border: 1px solid var(--border-2); background: var(--bg-glass);
  transition: all 0.2s; cursor: pointer;
}
.lang-switcher-btn:hover { color: var(--text-1); border-color: var(--border-3); background: var(--bg-glass-hover); }
.lang-switcher-btn svg { width: 12px; height: 12px; transition: transform 0.2s; }
.lang-switcher.open .lang-switcher-btn svg { transform: rotate(180deg); }
.lang-switcher-menu {
  position: absolute; top: calc(100% + 8px); right: 0;
  background: rgba(16, 17, 19, 0.95);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--border-2); border-radius: var(--r-md);
  padding: 6px; min-width: 140px;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: all 0.2s; box-shadow: var(--shadow-lg); z-index: 1001;
}
.lang-switcher.open .lang-switcher-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.lang-option {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px; font-size: 0.82rem; color: var(--text-2);
  border-radius: var(--r-sm); cursor: pointer; transition: all 0.15s;
  width: 100%; text-align: left;
}
.lang-option:hover { color: var(--text-1); background: var(--accent-dim); }
.lang-option.active { color: var(--accent); background: var(--accent-dim); font-weight: 700; }
.lang-option-code { font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-4); }

/* ---------- Language Selection Modal ---------- */
.lang-modal-overlay {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}
.lang-modal-overlay.active { opacity: 1; visibility: visible; }
.lang-modal {
  background: linear-gradient(145deg, var(--bg-2), var(--bg-3));
  border: 1px solid var(--border-2); border-radius: 20px;
  padding: 48px 44px 36px; width: 440px; max-width: 90vw;
  box-shadow: 0 24px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.04);
  transform: translateY(24px) scale(0.96);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.lang-modal-overlay.active .lang-modal { transform: translateY(0) scale(1); }
.lang-modal-header { text-align: center; margin-bottom: 36px; }
.lang-modal-logo {
  font-size: 2rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.1em;
  background: linear-gradient(135deg, var(--green), var(--accent));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  margin-bottom: 8px;
}
.lang-modal-subtitle { font-size: 0.9rem; color: var(--text-3); }
.lang-modal-options { display: flex; flex-direction: column; gap: 12px; }
.lang-modal-option {
  display: flex; align-items: center; gap: 16px;
  background: var(--bg-glass); border: 1px solid var(--border-1); border-radius: 14px;
  padding: 18px 22px; cursor: pointer; transition: all 0.25s;
  font-family: inherit; color: var(--text-1); text-align: left;
}
.lang-modal-option:hover {
  background: var(--bg-glass-hover); border-color: var(--accent);
  transform: translateX(4px); box-shadow: 0 4px 24px rgba(29, 155, 240, 0.12);
}
html[dir="rtl"] .lang-modal-option { text-align: right; transform: none; }
html[dir="rtl"] .lang-modal-option:hover { transform: translateX(-4px); }
.lang-modal-option-flag {
  width: 48px; height: 48px; min-width: 48px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; font-weight: 800;
  background: var(--accent-dim); color: var(--accent);
  border: 1px solid var(--border-2);
}
.lang-modal-option:nth-child(1) .lang-modal-option-flag { background: rgba(29, 155, 240, 0.12); color: #1d9bf0; }
.lang-modal-option:nth-child(2) .lang-modal-option-flag { background: rgba(0, 230, 118, 0.12); color: var(--green); }
.lang-modal-option:nth-child(3) .lang-modal-option-flag { background: rgba(168, 85, 247, 0.12); color: #a855f7; }
.lang-modal-option-text { display: flex; flex-direction: column; gap: 2px; }
.lang-modal-option-name { font-size: 1rem; font-weight: 600; color: var(--text-1); }
.lang-modal-option-native { font-size: 0.85rem; color: var(--text-3); }
.lang-modal-footer { text-align: center; margin-top: 24px; }
.lang-modal-skip {
  background: none; border: none; cursor: pointer;
  font-size: 0.8rem; color: var(--text-4); text-decoration: underline;
  font-family: inherit; transition: color 0.2s;
}
.lang-modal-skip:hover { color: var(--text-2); }

/* ---------- RTL Support (Arabic) ---------- */
html[dir="rtl"] body { direction: rtl; text-align: right; }
html[dir="rtl"] .nav-inner { flex-direction: row-reverse; }
html[dir="rtl"] .nav-links { flex-direction: row-reverse; }
html[dir="rtl"] .section-head { flex-direction: row-reverse; }
html[dir="rtl"] .footer-grid { direction: rtl; }
html[dir="rtl"] .footer-bottom { flex-direction: row-reverse; }
html[dir="rtl"] .breadcrumb { flex-direction: row-reverse; }
html[dir="rtl"] .hbar-row { flex-direction: row-reverse; }
html[dir="rtl"] .hbar-label { text-align: left; }
html[dir="rtl"] .data-table th, html[dir="rtl"] .data-table td { text-align: right; }
html[dir="rtl"] .panel-head { flex-direction: row-reverse; }
html[dir="rtl"] .hero { text-align: center; }
html[dir="rtl"] .page-header-content { text-align: center; }

/* ---------- Contact Page ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.contact-card {
  background: var(--bg-glass); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border-1); border-radius: var(--r-lg);
  padding: 32px; transition: all 0.35s;
}
.contact-card:hover { border-color: var(--border-3); transform: translateY(-3px); box-shadow: var(--shadow-md); }
.contact-card h3 { font-size: 1.2rem; margin-bottom: 8px; }
.contact-card .contact-label { font-size: 0.75rem; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px; }
.contact-card .contact-value { font-size: 1.1rem; font-weight: 700; font-family: var(--font-mono); color: var(--accent); margin-bottom: 16px; word-break: break-all; }
.contact-card .contact-desc { font-size: 0.85rem; color: var(--text-2); line-height: 1.6; }
.contact-card .contact-channel { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px; font-size: 0.75rem; font-weight: 700; border-radius: 12px; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 16px; }
.contact-card .contact-channel.green { color: var(--green); background: var(--green-dim); }
.contact-card .contact-channel.blue { color: var(--accent); background: var(--accent-dim); }
.contact-card .contact-channel.amber { color: var(--amber); background: var(--amber-dim); }

/* ---------- About Page ---------- */
.about-stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.about-timeline { display: flex; flex-direction: column; gap: 0; max-width: 720px; margin: 0 auto; }
.about-timeline-item { display: flex; gap: 20px; padding: 20px 0; border-bottom: 1px solid var(--border-1); }
.about-timeline-item:last-child { border-bottom: none; }
.about-timeline-year { font-size: 1.5rem; font-weight: 900; font-family: var(--font-mono); color: var(--green); min-width: 80px; }
.about-timeline-content h4 { font-size: 1rem; margin-bottom: 6px; }
.about-timeline-content p { font-size: 0.85rem; color: var(--text-2); line-height: 1.6; }

/* ---------- Methodology Page ---------- */
.method-step { display: flex; gap: 20px; padding: 24px; background: var(--bg-glass); border: 1px solid var(--border-1); border-radius: var(--r-md); margin-bottom: 14px; transition: all 0.3s; }
.method-step:hover { border-color: var(--border-2); }
.method-step-num { width: 48px; height: 48px; border-radius: 50%; background: var(--green-dim); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; font-weight: 900; font-family: var(--font-mono); color: var(--green); flex-shrink: 0; }
.method-step h4 { font-size: 1rem; margin-bottom: 6px; }
.method-step p { font-size: 0.85rem; color: var(--text-2); line-height: 1.6; }

/* ---------- Join Platform Page ---------- */
.join-role-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.join-role-card { background: var(--bg-glass); border: 1px solid var(--border-1); border-radius: var(--r-lg); padding: 28px 24px; transition: all 0.35s; position: relative; overflow: hidden; }
.join-role-card:hover { border-color: var(--border-3); transform: translateY(-4px); box-shadow: var(--shadow-md); }
.join-role-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--mc-color, var(--green)); opacity: 0.7; }
.join-role-card h3 { font-size: 1.15rem; margin-bottom: 10px; }
.join-role-card p { font-size: 0.85rem; color: var(--text-2); line-height: 1.6; margin-bottom: 16px; }
.join-role-card ul { display: flex; flex-direction: column; gap: 8px; }
.join-role-card ul li { font-size: 0.82rem; color: var(--text-2); display: flex; align-items: flex-start; gap: 6px; }
.join-role-card ul li::before { content: '> '; color: var(--green); font-weight: 700; }

/* ---------- Nav height adjustment for larger logo ---------- */
:root { --nav-h: 72px; }

/* ---------- Nav overflow handling ---------- */
.nav-links { flex-wrap: nowrap; }
@media (max-width: 1024px) {
  .nav-links .nav-dropdown { display: none; }
  .nav-logo { font-size: 1.5rem; }
}
@media (max-width: 640px) {
  .nav-logo { font-size: 1.25rem; }
  .nav-links { gap: 0; }
  .nav-link { padding: 6px 10px; font-size: 0.78rem; }
}