/* ═══════════════════════════════════════════════
   Fireworks OEM Site — Shared Design System
   ═══════════════════════════════════════════════ */

:root {
  --bg: #0a0a0f;
  --bg2: #0d0d15;
  --card: #12121a;
  --card-hover: #181825;
  --border: #1e1e2e;
  --border-light: #2a2a3e;
  --gold: #f0a500;
  --gold-dim: #8b6914;
  --gold-bg: rgba(240,165,0,0.06);
  --red: #e63946;
  --red-dark: #9b1d25;
  --red-bg: rgba(230,57,70,0.06);
  --text: #e0e0e0;
  --text-dim: #8888a0;
  --text-muted: #5a5a70;
  --accent: #2a2a3a;
  --white: #ffffff;
  --radius: 12px;
  --radius-sm: 8px;
  --radius-lg: 16px;
  --shadow: 0 4px 20px rgba(0,0,0,0.3);
  --transition: all 0.25s ease;
}

* { margin:0; padding:0; box-sizing:border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

.container { max-width: 1100px; margin:0 auto; padding:0 24px; }

/* ── Typography ── */
h1,h2,h3,h4 { color:var(--white); line-height:1.3; }
h1 { font-size:clamp(2rem, 6vw, 3.8rem); font-weight:900; }
h2 { font-size:clamp(1.5rem, 3vw, 2.2rem); font-weight:800; }
h3 { font-size:1.25rem; font-weight:700; }

.section-label {
  text-align:center; font-size:12px; text-transform:uppercase; letter-spacing:3px;
  color:var(--gold); margin-bottom:12px;
}
.section-title { text-align:center; margin-bottom:16px; }
.section-desc {
  text-align:center; color:var(--text-dim); max-width:600px; margin:0 auto 60px; font-size:1rem;
}

/* ── Buttons ── */
.btn {
  display:inline-flex; align-items:center; gap:8px; padding:14px 32px;
  border-radius:var(--radius-sm); font-size:15px; font-weight:600; cursor:pointer;
  text-decoration:none; transition:var(--transition); border:none;
}
.btn-primary {
  background: linear-gradient(135deg, var(--red), var(--red-dark));
  color:#fff; box-shadow:0 4px 20px rgba(230,57,70,0.25);
}
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 6px 30px rgba(230,57,70,0.4); }
.btn-gold {
  background: linear-gradient(135deg, var(--gold), var(--gold-dim));
  color:var(--bg); box-shadow:0 4px 20px rgba(240,165,0,0.2);
}
.btn-gold:hover { transform:translateY(-2px); box-shadow:0 6px 30px rgba(240,165,0,0.35); }
.btn-outline {
  border:1.5px solid var(--gold-dim); color:var(--gold); background:transparent;
}
.btn-outline:hover { border-color:var(--gold); background:var(--gold-bg); }
.btn-sm { padding:8px 20px; font-size:13px; }

/* ── Navigation ── */
.nav {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  background:rgba(10,10,15,0.85); backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border); transition:var(--transition);
}
.nav .container { display:flex; align-items:center; justify-content:space-between; padding-top:16px; padding-bottom:16px; }
.nav-logo { font-size:1.2rem; font-weight:800; color:var(--white); text-decoration:none; display:flex; align-items:center; gap:8px; }
.nav-logo .logo-icon { font-size:1.5rem; }
.nav-links { display:flex; gap:32px; list-style:none; align-items:center; }
.nav-links a {
  color:var(--text-dim); text-decoration:none; font-size:0.9rem; font-weight:500;
  transition:var(--transition); position:relative;
}
.nav-links a:hover, .nav-links a.active { color:var(--gold); }
.nav-links a::after {
  content:''; position:absolute; bottom:-4px; left:0; right:0; height:2px;
  background:var(--gold); transform:scaleX(0); transition:transform 0.2s;
}
.nav-links a:hover::after, .nav-links a.active::after { transform:scaleX(1); }
.nav-cta { padding:8px 20px !important; border:1px solid var(--gold) !important; border-radius:50px !important; color:var(--gold) !important; }
.nav-cta:hover { background:var(--gold-bg) !important; }
.mobile-toggle { display:none; background:none; border:none; color:var(--text); font-size:1.5rem; cursor:pointer; }

/* ── Hero (shared) ── */
.hero {
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  text-align:center; position:relative; overflow:hidden; padding-top:80px;
  background: radial-gradient(ellipse at 50% 0%, var(--gold-bg) 0%, transparent 60%),
              radial-gradient(ellipse at 80% 100%, var(--red-bg) 0%, transparent 50%);
}
.hero::before {
  content:''; position:absolute; inset:0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='30' cy='30' r='0.3' fill='%23f0a50020'/%3E%3C/svg%3E");
  opacity:0.5;
}
.hero-sm {
  min-height:50vh; padding-top:120px; padding-bottom:60px;
}

.hero-content { position:relative; z-index:1; }
.hero-badge {
  display:inline-block; padding:6px 20px; border:1px solid var(--gold-dim);
  border-radius:50px; color:var(--gold); font-size:13px; letter-spacing:2px;
  margin-bottom:24px;
}
.hero-gradient {
  background: linear-gradient(135deg, var(--white) 0%, #ffd700 50%, var(--red) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.hero-sub { font-size:1.15rem; color:var(--text-dim); max-width:600px; margin:0 auto 32px; }
.hero-trust {
  display:flex; flex-wrap:wrap; justify-content:center; gap:12px 28px;
  margin-bottom:36px; font-size:13px; color:var(--text-dim);
}
.hero-trust span { display:flex; align-items:center; gap:6px; }
.hero-trust .dot { width:6px; height:6px; border-radius:50%; background:var(--gold); }
.hero-cta { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }

/* ── Stats bar ── */
.stats-bar {
  display:grid; grid-template-columns:repeat(4,1fr); gap:32px;
  max-width:800px; margin:0 auto; text-align:center;
}
.stat-num { font-size:2.2rem; font-weight:900; color:var(--gold); }
.stat-label { font-size:0.85rem; color:var(--text-dim); margin-top:4px; }

/* ── Section ── */
section { padding:100px 0; }
section.alt { background:var(--bg2); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }

/* ── Cards ── */
.card {
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  padding:32px 28px; transition:var(--transition);
}
.card:hover { border-color:var(--border-light); transform:translateY(-4px); box-shadow:var(--shadow); }

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

/* ── Tags / Badges ── */
.tag {
  display:inline-block; padding:4px 12px; border-radius:50px;
  font-size:11px; font-weight:600; letter-spacing:0.5px;
}
.tag-gold { background:var(--gold-bg); color:var(--gold); border:1px solid var(--gold-dim); }
.tag-red { background:var(--red-bg); color:var(--red); border:1px solid rgba(230,57,70,0.3); }

/* ── Footer ── */
footer {
  background:var(--bg2); border-top:1px solid var(--border);
  padding:60px 0 40px; color:var(--text-dim);
}
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:40px; margin-bottom:40px; }
.footer-col h4 { font-size:0.9rem; margin-bottom:16px; color:var(--white); text-transform:uppercase; letter-spacing:1px; }
.footer-col p, .footer-col a { font-size:0.85rem; color:var(--text-dim); text-decoration:none; display:block; margin-bottom:8px; }
.footer-col a:hover { color:var(--gold); }
.footer-bottom { padding-top:24px; border-top:1px solid var(--border); text-align:center; font-size:0.8rem; }

/* ── Utilities ── */
.text-center { text-align:center; }
.text-gold { color:var(--gold); }
.text-dim { color:var(--text-dim); }
.mt-1 { margin-top:8px; }
.mt-2 { margin-top:16px; }
.mt-3 { margin-top:24px; }
.mt-4 { margin-top:32px; }
.mt-6 { margin-top:48px; }
.mb-2 { margin-bottom:16px; }
.mb-4 { margin-bottom:32px; }
.mb-6 { margin-bottom:48px; }
.gap-4 { gap:24px; }

/* ── Responsive ── */
@media (max-width: 768px) {
  .nav-links { display:none; position:absolute; top:100%; left:0; right:0;
    background:rgba(10,10,15,0.98); backdrop-filter:blur(16px);
    flex-direction:column; padding:24px; border-bottom:1px solid var(--border);
  }
  .nav-links.open { display:flex; }
  .mobile-toggle { display:block; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns:1fr; }
  .stats-bar { grid-template-columns:repeat(2,1fr); }
  .footer-grid { grid-template-columns:1fr; gap:24px; }
  section { padding:60px 0; }
}

@media (max-width: 480px) {
  .hero-cta { flex-direction:column; align-items:center; }
  .stats-bar { grid-template-columns:1fr; }
}