/* ══════════════════════════════════════════════
   FS-HomeApp — Hermes WebUI 架构
   默认：中文、亮色主题 · 无框架/无构建工具
   佛山小家电供应链数据基础设施
   ══════════════════════════════════════════════ */

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Light mode (default) — Hermes 暖金调 ── */
:root {
  --bg:#FEFCF7;--sidebar:#FAF7F0;--border:#E0D8C8;--border2:rgba(0,0,0,0.12);
  --text:#1A1610;--muted:#5C5344;--accent:#B8860B;--blue:#0288A8;--gold:#8B6508;--code-bg:#F5F0E5;
  --surface:#F3EEE3;--topbar-bg:rgba(250,247,240,.98);--main-bg:rgba(254,252,247,0.5);
  --focus-ring:rgba(184,134,11,.35);--focus-glow:rgba(184,134,11,.1);
  --input-bg:rgba(0,0,0,.03);--hover-bg:rgba(0,0,0,.05);
  --strong:#0F0D08;--em:#5C5344;--code-text:#8b4513;--code-inline-bg:rgba(0,0,0,.06);--pre-text:#1A1610;
  --accent-hover:#996F08;--accent-bg:rgba(184,134,11,0.08);--accent-bg-strong:rgba(184,134,11,0.15);--accent-text:#8B6508;
  --error:#C62828;--success:#3D8B40;--warning:#E68A00;--info:#0288A8;
  --radius-sm:4px;--radius-md:8px;--radius-card:12px;--radius-lg:16px;--radius-pill:999px;
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-6:24px;--space-8:32px;
  --font-size-xs:12px;--font-size-sm:14px;--font-size-md:16px;
  --font-ui:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,"PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  --font-mono:"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;
  --surface-subtle:rgba(0,0,0,.025);--surface-subtle-hover:rgba(0,0,0,.045);
  --border-subtle:rgba(0,0,0,.08);--border-muted:rgba(0,0,0,.12);
  --nav-shadow:0 1px 3px rgba(0,0,0,.06);
  --card-shadow:0 2px 8px rgba(0,0,0,.06);
  --card-shadow-hover:0 4px 16px rgba(0,0,0,.1);
  --section-gap:80px;
  font-family:var(--font-ui);font-size:15px;line-height:1.7;color:var(--text);background:var(--bg);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}

/* ── Dark mode (optional toggle) ── */
:root.dark {
  --bg:#0D0D1A;--sidebar:#141425;--border:#2A2A45;--border2:rgba(255,255,255,0.14);
  --text:#FFF8DC;--muted:#C0C0C0;--accent:#FFD700;--blue:#4DD0E1;--gold:#FFBF00;--code-bg:#1A1A2E;
  --surface:#1A1A2E;--topbar-bg:rgba(20,20,37,.98);--main-bg:rgba(13,13,26,0.5);
  --focus-ring:rgba(255,215,0,.35);--focus-glow:rgba(255,215,0,.08);
  --input-bg:rgba(255,255,255,.04);--hover-bg:rgba(255,255,255,.06);
  --strong:#fff;--em:#C0C0C0;--code-text:#f0c27f;--code-inline-bg:rgba(0,0,0,.35);--pre-text:#e2e8f0;
  --accent-hover:#FFBF00;--accent-bg:rgba(255,215,0,0.08);--accent-bg-strong:rgba(255,215,0,0.15);--accent-text:#FFD700;
  --error:#EF5350;--success:#4CAF50;--warning:#FFA726;--info:#4DD0E1;
  --surface-subtle:rgba(255,255,255,.025);--surface-subtle-hover:rgba(255,255,255,.045);
  --border-subtle:rgba(255,255,255,.075);--border-muted:rgba(255,255,255,.12);
  --nav-shadow:0 1px 3px rgba(0,0,0,.3);
  --card-shadow:0 2px 8px rgba(0,0,0,.3);
  --card-shadow-hover:0 4px 16px rgba(0,0,0,.45);
}

:root.dark .nav-cta,
:root.dark .btn-primary,
:root.dark .drawer-cta,
:root.dark .apply-form button {
  color:#1A1610;
}
:root.dark .nav-drawer .drawer-cta:hover { color:#1A1610; }
:root.dark .btn-outline { border-color:var(--border-muted);color:var(--text); }

/* ── Layout ── */
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; }

/* NAV */
.nav {
  position:sticky;top:0;z-index:100;
  background:var(--topbar-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border-subtle);box-shadow:var(--nav-shadow);
}
.nav-inner {
  max-width:1200px;margin:0 auto;padding:0 var(--space-6);
  display:flex;align-items:center;height:56px;gap:var(--space-4);
}
.nav-brand {
  font-size:18px;font-weight:700;color:var(--text);
  margin-right:auto;letter-spacing:-0.02em;
}
.nav-links { display:flex;align-items:center;gap:var(--space-4); }
.nav-links a:not(.nav-cta) {
  font-size:14px;font-weight:500;color:var(--muted);
  padding:6px 2px;transition:color .15s;
}
.nav-links a:not(.nav-cta):hover,.nav-links a:not(.nav-cta).active { color:var(--text); }
.nav-cta {
  display:inline-block;padding:8px 20px;
  background:var(--accent);color:#fff;font-size:14px;font-weight:600;
  border-radius:var(--radius-pill);transition:background .15s;
}
.nav-cta:hover { background:var(--accent-hover); }
.lang-btn,.theme-btn {
  background:none;border:1px solid var(--border-subtle);border-radius:var(--radius-sm);
  padding:4px 10px;cursor:pointer;font-size:13px;font-family:inherit;
  color:var(--muted);transition:all .15s;
}
.lang-btn:hover,.theme-btn:hover { color:var(--text);border-color:var(--border-muted); }
.lang-btn.active { color:var(--accent);border-color:var(--accent);font-weight:600; }

/* HERO */
.hero {
  padding:100px 0 80px;text-align:center;
  background:linear-gradient(180deg,var(--surface) 0%,var(--bg) 100%);
}
.hero-inner { max-width:800px;margin:0 auto;padding:0 var(--space-6); }
.hero-badge {
  display:inline-flex;align-items:center;gap:6px;
  background:var(--accent-bg);color:var(--accent-text);
  font-size:13px;font-weight:600;padding:6px 16px;border-radius:var(--radius-pill);
  margin-bottom:24px;
}
.hero-headline {
  font-size:clamp(32px,5vw,52px);font-weight:800;color:var(--strong);
  letter-spacing:-0.03em;line-height:1.1;margin-bottom:20px;
}
.hero-sub {
  font-size:clamp(16px,2vw,20px);color:var(--muted);
  max-width:640px;margin:0 auto 32px;line-height:1.6;
}
.hero-actions { display:flex;gap:12px;justify-content:center;flex-wrap:wrap; }

.btn {
  display:inline-flex;align-items:center;gap:6px;
  padding:12px 28px;border-radius:var(--radius-pill);
  font-size:15px;font-weight:600;font-family:inherit;
  cursor:pointer;border:none;transition:all .15s;
}
.btn-primary { background:var(--accent);color:#fff; }
.btn-primary:hover { background:var(--accent-hover); }
.btn-outline {
  background:transparent;color:var(--text);
  border:1.5px solid var(--border-muted);
}
.btn-outline:hover { border-color:var(--text); }

/* BADGE ROW */
.badge-row {
  display:flex;flex-wrap:wrap;gap:8px;justify-content:center;
  margin-bottom:28px;
}
.badge-row .badge-pill {
  font-size:12px;font-weight:600;padding:5px 14px;
  border-radius:var(--radius-pill);
  background:var(--accent-bg);color:var(--accent-text);
  border:1px solid var(--border-subtle);
}

/* SECTIONS */
.section { padding:var(--section-gap) 0; }
.section-alt { background:var(--surface); }
.section-inner { max-width:1200px;margin:0 auto;padding:0 var(--space-6); }
.section-title {
  font-size:clamp(24px,3.5vw,38px);font-weight:700;color:var(--strong);
  letter-spacing:-0.025em;text-align:center;margin-bottom:12px;
}
.section-subtitle {
  font-size:16px;color:var(--muted);text-align:center;
  max-width:600px;margin:0 auto 48px;
}

/* CARD GRIDS */
.grid-4 { display:grid;grid-template-columns:repeat(4,1fr);gap:20px; }
.grid-3 { display:grid;grid-template-columns:repeat(3,1fr);gap:20px; }
.grid-2 { display:grid;grid-template-columns:repeat(2,1fr);gap:20px; }

.card {
  background:var(--bg);border:1px solid var(--border-subtle);border-radius:var(--radius-card);
  padding:28px;box-shadow:var(--card-shadow);transition:all .2s;
}
.card:hover { box-shadow:var(--card-shadow-hover); }
.card h3 { font-size:17px;font-weight:600;color:var(--strong);margin-bottom:8px; }
.card p { font-size:14px;color:var(--muted);line-height:1.6; }
.card ul { list-style:none;padding:0;margin-top:12px; }
.card ul li {
  font-size:13px;color:var(--em);padding:4px 0 4px 18px;
  position:relative;line-height:1.5;
}
.card ul li::before {
  content:"";position:absolute;left:0;top:10px;
  width:5px;height:5px;border-radius:50%;background:var(--accent);
}

/* STATS ROW */
.stats-row {
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  background:var(--bg);border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg);overflow:hidden;margin-bottom:48px;
}
.stat-item { padding:32px 20px;text-align:center;border-right:1px solid var(--border-subtle); }
.stat-item:last-child { border-right:none; }
.stat-num {
  font-size:clamp(32px,4vw,48px);font-weight:800;color:var(--accent);
  letter-spacing:-0.03em;line-height:1;margin-bottom:6px;
}
.stat-label { font-size:14px;font-weight:600;color:var(--text);margin-bottom:2px; }
.stat-note { font-size:12px;color:var(--muted); }

/* TAGS */
.tag-cloud { display:flex;flex-wrap:wrap;gap:10px;justify-content:center; }
.tag-pill {
  font-size:13px;color:var(--em);
  background:var(--bg);border:1px solid var(--border-subtle);
  padding:6px 16px;border-radius:var(--radius-pill);
}

/* INTEGRATION 3-COL */
.int-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:20px; }
.int-card {
  background:var(--bg);border:1px solid var(--border-subtle);
  border-radius:var(--radius-card);padding:32px;box-shadow:var(--card-shadow);
}
.int-card h3 { font-size:18px;font-weight:600;color:var(--strong);margin-bottom:4px; }
.int-card .tag {
  display:block;font-size:12px;font-weight:500;color:var(--accent-text);margin-bottom:12px;
}
.int-card p { font-size:14px;color:var(--em);line-height:1.7; }

/* COMPARISON TABLE */
.comparison-table {
  width:100%;border-collapse:separate;border-spacing:0;
  border-radius:var(--radius-lg);overflow:hidden;
  border:1px solid var(--border-subtle);
  margin-top:20px;font-size:14px;
}
.comparison-table th {
  background:var(--accent-bg-strong);color:var(--strong);
  padding:16px 20px;text-align:left;font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.03em;
}
.comparison-table td {
  padding:14px 20px;border-top:1px solid var(--border-subtle);
  color:var(--em);background:var(--bg);
}
.comparison-table tr:last-child td:first-child { border-radius:0 0 0 var(--radius-lg); }
.comparison-table tr:last-child td:last-child { border-radius:0 0 var(--radius-lg) 0; }
.comparison-table .label { font-weight:600;color:var(--text); }
.comparison-table .check { color:var(--success);font-weight:700; }
.comparison-table .cross { color:var(--muted); }

/* CODE BLOCKS */
.code-block {
  background:var(--code-bg);border:1px solid var(--border-subtle);
  border-radius:var(--radius-md);padding:20px 24px;
  font-family:var(--font-mono);font-size:13px;line-height:1.6;
  overflow-x:auto;color:var(--pre-text);margin-bottom:20px;
}
.code-block .comment { color:var(--muted);font-style:italic; }
.code-block .cmd { color:var(--accent-text);font-weight:600; }
.code-block .str { color:var(--blue); }
.code-block .key { color:var(--text);font-weight:600; }

/* CTA */
.cta-section {
  background:var(--surface);text-align:center;padding:80px 0;
  border-top:1px solid var(--border-subtle);
}
.cta-section .section-inner { max-width:700px; }
.cta-title { font-size:clamp(24px,4vw,40px);font-weight:700;color:var(--strong);margin-bottom:12px; }
.cta-sub { font-size:16px;color:var(--muted);margin-bottom:28px; }

/* FOOTER */
.footer {
  background:var(--sidebar);padding:48px 0 24px;
  border-top:1px solid var(--border-subtle);
}
.footer-inner { max-width:1200px;margin:0 auto;padding:0 var(--space-6); }
.footer-grid { display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;margin-bottom:32px; }
.footer-brand h3 { font-size:16px;font-weight:700;color:var(--text);margin-bottom:8px; }
.footer-brand p { font-size:13px;color:var(--muted);line-height:1.6;max-width:300px; }
.footer-col h4 {
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--text);margin-bottom:14px;
}
.footer-col a {
  display:block;font-size:13px;color:var(--muted);padding:4px 0;transition:color .15s;
}
.footer-col a:hover { color:var(--text); }
.footer-meta { font-size:12px;color:var(--muted);text-align:center;border-top:1px solid var(--border-subtle);padding-top:24px; }

/* PAGE LAYOUT */
.page-layout { display:flex;max-width:1400px;margin:0 auto;min-height:calc(100vh - 56px); }
.page-sidebar {
  width:240px;flex-shrink:0;padding:32px 20px;
  border-right:1px solid var(--border-subtle);background:var(--sidebar);
  position:sticky;top:56px;height:calc(100vh - 56px);overflow-y:auto;
}
.sidebar-block { margin-bottom:24px; }
.sidebar-block h4 {
  font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;
  letter-spacing:.06em;margin-bottom:8px;
}
.sidebar-block a {
  display:block;font-size:13px;color:var(--muted);padding:5px 8px;border-radius:var(--radius-sm);
  transition:all .1s;
}
.sidebar-block a:hover { color:var(--text);background:var(--hover-bg); }
.sidebar-block a.active { color:var(--accent-text);background:var(--accent-bg);font-weight:600; }
.page-content {
  flex:1;padding:40px 56px;max-width:860px;background:var(--bg);
}
.page-content h1 {
  font-size:clamp(26px,3vw,36px);font-weight:700;color:var(--strong);
  letter-spacing:-0.025em;margin-bottom:12px;
}
.page-content .page-meta {
  font-size:14px;color:var(--muted);margin-bottom:24px;
  padding-bottom:16px;border-bottom:1px solid var(--border-subtle);
}
.page-content h2 {
  font-size:20px;font-weight:700;margin:36px 0 12px;color:var(--strong);
}
.page-content h3 {
  font-size:17px;font-weight:600;margin:24px 0 10px;color:var(--strong);
}
.page-content p { font-size:15px;color:var(--em);line-height:1.8;margin-bottom:14px; }
.page-content ul,.page-content ol { padding-left:24px;margin-bottom:14px; }
.page-content li { font-size:15px;color:var(--em);line-height:1.8;margin-bottom:4px; }
.page-content table { width:100%;border-collapse:collapse;margin-bottom:20px;font-size:14px; }
.page-content th,.page-content td {
  border:1px solid var(--border-subtle);padding:10px 14px;text-align:left;
}
.page-content th { background:var(--surface);font-weight:600;color:var(--text); }
.page-content td { color:var(--em); }
.page-content code {
  font-family:var(--font-mono);background:var(--code-inline-bg);
  padding:2px 6px;border-radius:4px;font-size:13px;color:var(--code-text);
}
.page-content pre code { background:none;padding:0; }

/* SERVICE STATUS */
.status-badge {
  display:inline-flex;align-items:center;gap:8px;
  font-size:15px;font-weight:600;color:var(--success);
  background:rgba(61,139,64,.1);padding:10px 20px;border-radius:var(--radius-pill);margin-bottom:32px;
}
.status-badge::before {
  content:"";width:8px;height:8px;border-radius:50%;background:var(--success);
}
.status-item {
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 20px;background:var(--surface);border:1px solid var(--border-subtle);
  border-radius:var(--radius-card);margin-bottom:10px;
}
.status-item .name { font-weight:600;color:var(--text); }
.status-item .status { font-size:13px;color:var(--success);display:flex;align-items:center;gap:6px; }
.status-item .status::before { content:"";width:6px;height:6px;border-radius:50%;background:var(--success); }
.status-item .uptime { font-size:12px;color:var(--muted); }

/* PRICING */
.price-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:20px; }
.price-card {
  background:var(--bg);border:1px solid var(--border-subtle);border-radius:var(--radius-card);
  padding:28px;box-shadow:var(--card-shadow);
  border-top:3px solid transparent;display:flex;flex-direction:column;
}
.price-card.featured { border-top-color:var(--accent); }
.price-card .tier { font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.04em; }
.price-card.featured .tier { color:var(--accent-text); }
.price-card .price {
  font-size:clamp(28px,3vw,38px);font-weight:700;color:var(--strong);
  letter-spacing:-0.03em;margin:8px 0 4px;
}
.price-card.featured .price { color:var(--accent); }
.price-card .period { font-size:13px;color:var(--muted);margin-bottom:20px; }
.price-card ul { list-style:none;padding:0;flex:1; }
.price-card ul li {
  font-size:14px;color:var(--em);padding:5px 0 5px 20px;
  position:relative;line-height:1.5;
}
.price-card ul li::before { content:"\2713";position:absolute;left:0;font-weight:700;color:var(--accent-text); }
.price-card .btn { margin-top:auto; }

/* APPLY FORM */
.apply-form { max-width:480px;margin:24px 0; }
.apply-form label { display:block;font-size:14px;font-weight:600;color:var(--text);margin-bottom:6px; }
.apply-form input[type="email"] {
  width:100%;padding:12px 16px;border:1px solid var(--border-muted);
  border-radius:var(--radius-md);font-size:15px;font-family:inherit;
  background:var(--bg);color:var(--text);outline:none;transition:border-color .15s;
}
.apply-form input[type="email"]:focus { border-color:var(--accent); }
.apply-form .note { font-size:12px;color:var(--muted);margin:8px 0 16px; }
.apply-form button {
  width:100%;padding:12px;background:var(--accent);color:#fff;
  border:none;border-radius:var(--radius-md);font-size:15px;font-weight:600;cursor:pointer;
  transition:background .15s;
}
.apply-form button:hover { background:var(--accent-hover); }

/* INSIGHTS / ARTICLES */
.article-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:20px; }
.article-card {
  background:var(--bg);border:1px solid var(--border-subtle);border-radius:var(--radius-card);
  overflow:hidden;box-shadow:var(--card-shadow);transition:all .2s;
}
.article-card:hover { box-shadow:var(--card-shadow-hover); }
.article-card .meta { padding:20px 20px 16px; }
.article-card .tag {
  font-size:11px;font-weight:600;color:var(--accent-text);text-transform:uppercase;letter-spacing:.04em;
}
.article-card .date { font-size:12px;color:var(--muted);margin:2px 0 8px; }
.article-card h3 { font-size:16px;font-weight:600;color:var(--strong);margin-bottom:6px;line-height:1.35; }
.article-card p { font-size:13px;color:var(--em);line-height:1.6;margin-bottom:12px; }
.article-card .read-more { font-size:13px;font-weight:600;color:var(--accent-text); }

/* RESEARCH CENTER */
.rs-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:20px; }
.rs-grid-4 { display:grid;grid-template-columns:repeat(4,1fr);gap:20px; }
.rs-card {
  background:var(--bg);border:1px solid var(--border-subtle);border-radius:var(--radius-card);
  padding:32px;box-shadow:var(--card-shadow);
}
.rs-card .icon { margin-bottom:16px; }
.rs-card h3 { font-size:17px;font-weight:600;color:var(--strong);margin-bottom:10px; }
.rs-card p { font-size:14px;color:var(--muted);line-height:1.6;margin-bottom:12px; }
.rs-card ul { list-style:none;padding:0; }
.rs-card ul li {
  font-size:13px;color:var(--em);padding:4px 0 4px 16px;position:relative;line-height:1.5;
}
.rs-card ul li::before { content:"";position:absolute;left:0;top:10px;width:5px;height:5px;border-radius:50%;background:var(--accent); }

/* FIELD INTELLIGENCE */
.fi-category-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:16px; }
.fi-card {
  background:var(--bg);border:1px solid var(--border-subtle);border-radius:var(--radius-card);
  padding:24px;box-shadow:var(--card-shadow);
}
.fi-card h4 { font-size:15px;font-weight:600;color:var(--strong);margin-bottom:10px; }
.fi-card ul { list-style:none;padding:0; }
.fi-card ul li { font-size:13px;color:var(--em);padding:4px 0;line-height:1.5; }
.timeline { position:relative;padding-left:24px; }
.timeline::before {
  content:"";position:absolute;left:0;top:4px;bottom:4px;
  width:2px;background:var(--border-subtle);
}
.timeline-item { position:relative;padding:0 0 20px 20px; }
.timeline-item::before {
  content:"";position:absolute;left:-5px;top:5px;
  width:10px;height:10px;border-radius:50%;background:var(--accent);
}
.timeline-item .tl-date { font-size:12px;color:var(--muted);margin-bottom:2px; }
.timeline-item .tl-text { font-size:14px;color:var(--em);line-height:1.5; }

/* INDUSTRY ATLAS */
.atlas-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:20px; }
.atlas-card {
  background:var(--bg);border:1px solid var(--border-subtle);border-radius:var(--radius-card);
  padding:28px;box-shadow:var(--card-shadow);border-top:3px solid var(--accent);
}
.atlas-card h3 { font-size:16px;font-weight:600;color:var(--strong);margin-bottom:6px; }
.atlas-card .cluster-icon { font-size:28px;margin-bottom:10px; }
.atlas-card p { font-size:13px;color:var(--em);line-height:1.6; }
.atlas-card .stat-line {
  margin-top:12px;padding-top:12px;border-top:1px solid var(--border-subtle);
  font-size:13px;color:var(--muted);
}
.atlas-card .stat-line strong { color:var(--accent-text); }

/* DEMO SECTION */
.demo-card {
  background:var(--bg);border:1px solid var(--border-subtle);
  border-radius:var(--radius-card);padding:32px;box-shadow:var(--card-shadow);
  margin-bottom:24px;
}
.demo-card h3 { font-size:18px;font-weight:600;color:var(--strong);margin-bottom:12px; }
.demo-card p { font-size:14px;color:var(--em);line-height:1.7;margin-bottom:16px; }
.demo-card .demo-label {
  font-size:12px;font-weight:600;color:var(--accent-text);text-transform:uppercase;letter-spacing:.04em;
  margin-bottom:8px;
}

/* HAMBURGER */
.hamburger {
  display:none;background:none;border:none;cursor:pointer;
  padding:4px;margin-left:auto;z-index:101;
  width:32px;height:32px;position:relative;
}
.hamburger span {
  display:block;width:20px;height:2px;
  background:var(--text);border-radius:2px;
  position:absolute;left:6px;transition:all .25s;
}
.hamburger span:nth-child(1) { top:8px; }
.hamburger span:nth-child(2) { top:15px; }
.hamburger span:nth-child(3) { top:22px; }
.hamburger.open span:nth-child(1) { top:15px;transform:rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity:0; }
.hamburger.open span:nth-child(3) { top:15px;transform:rotate(-45deg); }

.nav-overlay {
  display:none;position:fixed;inset:0;z-index:98;
  background:rgba(0,0,0,.3);
}
.nav-drawer {
  display:none;position:fixed;top:56px;left:0;right:0;z-index:99;
  background:var(--bg);border-bottom:1px solid var(--border-subtle);
  box-shadow:0 8px 24px rgba(0,0,0,.12);
  padding:8px 0;max-height:calc(100vh - 56px);overflow-y:auto;
}
.nav-drawer.open { display:block; }
.nav-overlay.open { display:block; }
.nav-drawer a,.nav-drawer button {
  display:block;width:100%;text-align:left;
  padding:12px 20px;font-size:15px;font-weight:500;
  color:var(--text);background:none;border:none;
  font-family:inherit;cursor:pointer;
}
.nav-drawer a:hover,.nav-drawer button:hover { background:var(--hover-bg); }
.nav-drawer a.active { color:var(--accent-text);background:var(--accent-bg);font-weight:600; }
.nav-drawer .drawer-divider {
  height:1px;background:var(--border-subtle);margin:6px 16px;
}
.nav-drawer .drawer-cta {
  margin:8px 16px;padding:10px;text-align:center;
  background:var(--accent);color:#fff;border-radius:var(--radius-pill);font-weight:600;
}
.nav-drawer .drawer-cta:hover { background:var(--accent-hover);color:#fff; }

/* ── RESPONSIVE ── */
@media (max-width:1024px) {
  .grid-4,.price-grid,.rs-grid-4 { grid-template-columns:repeat(2,1fr); }
  .fi-category-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:900px) {
  .nav-inner { padding:0 var(--space-4);height:52px;gap:var(--space-3); }
  .hamburger { display:block; }
  .nav-links { display:none; }
  .hero { padding:60px 0 50px; }
  .section { padding:48px 0; }
  .grid-3,.article-grid,.rs-grid,.atlas-grid,.int-grid { grid-template-columns:repeat(2,1fr); }
  .page-layout { flex-direction:column; }
  .page-sidebar { width:100%;position:static;height:auto;border-right:none;border-bottom:1px solid var(--border-subtle);padding:20px var(--space-4); }
  .page-content { padding:24px var(--space-4); }
}
@media (max-width:640px) {
  .grid-4,.grid-3,.grid-2,.price-grid,.article-grid,.rs-grid,.rs-grid-4,.atlas-grid,.int-grid,.fi-category-grid { grid-template-columns:1fr; }
  .stats-row { grid-template-columns:repeat(2,1fr); }
  .stat-item:nth-child(2) { border-right:none; }
  .stat-item:nth-child(1),.stat-item:nth-child(2) { border-bottom:1px solid var(--border-subtle); }
  .footer-grid { grid-template-columns:1fr 1fr;gap:24px; }
  .hero-headline { font-size:28px; }
  .hero-actions { flex-direction:column;align-items:center; }
}