:root {
  --bg: #7a0c0c; /* 中国红 基底 */
  --card: #5c0a0a;
  --card-2: #4a0808;
  --fg: #fff5f2;
  --muted: #f9cfbf;
  --primary: #d61f1f; /* 正红 */
  --primary-2: #f0513b; /* 亮红 */
  --gold: #f5c04a; /* 锦金 */
  --ring: 6 80% 52%;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: "Inter", "Noto Sans SC", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
  color: var(--fg);
  background: radial-gradient(1200px 800px at 80% -10%, rgba(214,31,31,.22), transparent 60%),
              radial-gradient(900px 600px at -10% 10%, rgba(245,192,74,.12), transparent 60%),
              var(--bg);
  overflow-x: hidden;
}

.noise { position: fixed; inset: 0; pointer-events: none; background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23n)" opacity=".03"/></svg>'); opacity: .7; mix-blend-mode: overlay; }

.site-header {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 24px; backdrop-filter: saturate(140%) blur(10px);
  background: linear-gradient(0deg, transparent, rgba(90,10,10,.6));
  border-bottom: 1px solid rgba(245,192,74,.22);
}
.brand { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.brand .brand-text { font-weight: 800; letter-spacing: .08em; }
.logo { filter: drop-shadow(0 6px 16px rgba(214,31,31,.5)); }
.nav { display: flex; gap: 18px; }
.nav a { color: var(--muted); text-decoration: none; font-weight: 600; }
.nav a:hover { color: var(--fg); }

.hero { position: relative; min-height: calc(100dvh - 72px); display: grid; place-items: center; padding: 48px 16px 24px; }
.grid-bg { position: absolute; inset: 0; background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 80 80"><defs><pattern id="p" width="20" height="20" patternUnits="userSpaceOnUse"><path d="M0 0 H20 V20 H0 Z M0 0 L20 20 M20 0 L0 20" fill="none" stroke="%23f5c04a" stroke-opacity="0.12" stroke-width="0.8"/></pattern></defs><rect width="100%" height="100%" fill="url(%23p)"/></svg>'); background-size: 80px 80px; mask-image: radial-gradient(ellipse at center, black, transparent 65%); opacity: .7; }
.hero-inner { position: relative; text-align: center; max-width: 980px; margin: 0 auto; }
.title { margin: 0 0 12px; line-height: 1; }
.title-line { display: block; font-size: clamp(44px, 8vw, 120px); font-weight: 900; letter-spacing: .02em; }
.title-sub { display: block; margin-top: 6px; font-size: clamp(18px, 3.2vw, 28px); font-weight: 800; background: linear-gradient(90deg, #ffe7a8, #fff3cf); -webkit-background-clip: text; background-clip: text; color: transparent; letter-spacing: .08em; }
.tagline { margin: 0 auto 20px; color: var(--muted); font-size: clamp(14px, 2.2vw, 18px); max-width: 720px; }

.cta { display: inline-flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.btn { display: inline-flex; align-items: center; justify-content: center; padding: 12px 18px; border-radius: 12px; text-decoration: none; font-weight: 700; border: 1px solid transparent; transition: all .25s ease; }
.btn.primary { background: linear-gradient(135deg, var(--primary), var(--primary-2)); color: white; box-shadow: 0 10px 26px rgba(214,31,31,.35), 0 0 0 1px rgba(245,192,74,.25) inset; }
.btn.primary:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(214,31,31,.5), 0 0 0 1px rgba(245,192,74,.35) inset; }
.btn.ghost { background: transparent; color: var(--fg); border-color: rgba(245,192,74,.28); }
.btn.ghost:hover { background: rgba(245,192,74,.08); }

.cards { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; padding: 24px; max-width: 1200px; margin: 0 auto; }
.card { grid-column: span 12; background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.05)); border: 1px solid rgba(245,192,74,.22); border-radius: 16px; padding: 20px; box-shadow: inset 0 1px 0 rgba(245,192,74,.18), 0 20px 60px rgba(40,0,0,.35); }
.card h3 { margin: 6px 0 8px; font-size: 22px; }
.card p { margin: 0 0 12px; color: var(--muted); }
.card-pill { display: inline-block; font-size: 12px; padding: 6px 10px; border-radius: 999px; background: rgba(245,192,74,.15); border: 1px solid rgba(245,192,74,.4); color: #fff; }
.pill-red { background: rgba(214,31,31,.22); border-color: rgba(214,31,31,.5); }
.pill-gold { background: rgba(245,192,74,.22); border-color: rgba(245,192,74,.5); }
.card-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; padding: 8px 12px; border-radius: 10px; text-decoration: none; color: var(--fg); background: #3f0606; border: 1px solid rgba(245,192,74,.28); }
.chip:hover { border-color: rgba(245,192,74,.45); }

.about { padding: 20px 24px 8px; }
.about-inner { max-width: 900px; margin: 0 auto; background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.05)); border: 1px solid rgba(245,192,74,.22); border-radius: 16px; padding: 20px; box-shadow: inset 0 1px 0 rgba(245,192,74,.18), 0 20px 60px rgba(40,0,0,.35); }
.about h2 { margin: 4px 0 10px; }
.about p { margin: 0; color: var(--muted); }

.contact { padding: 10px 24px 24px; }
.contact-form { max-width: 900px; margin: 0 auto; display: grid; grid-template-columns: repeat(12,1fr); gap: 14px; background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.05)); border: 1px solid rgba(245,192,74,.22); border-radius: 16px; padding: 20px; box-shadow: inset 0 1px 0 rgba(245,192,74,.18), 0 20px 60px rgba(40,0,0,.35); }
.contact-form h2 { grid-column: span 12; margin: 0; }
.contact-form label { grid-column: span 12; display: grid; gap: 6px; }
.contact-form input, .contact-form textarea { width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(245,192,74,.28); background: #3a0707; color: var(--fg); outline: none; transition: border-color .2s ease, box-shadow .2s ease; }
.contact-form input:focus, .contact-form textarea:focus { border-color: rgba(245,192,74,.5); box-shadow: 0 0 0 4px rgba(214,31,31,.25); }
.contact-form .full { grid-column: span 12; }

.site-footer { text-align: center; color: var(--muted); padding: 24px; border-top: 1px solid rgba(245,192,74,.22); }

@media (min-width: 720px) {
  .cards .card { grid-column: span 4; }
  .contact-form label { grid-column: span 6; }
  .contact-form .full { grid-column: span 12; }
}

@media (prefers-reduced-motion: no-preference) {
  .title-line { animation: rise 900ms cubic-bezier(.2,.8,.2,1) both; }
  .title-sub { animation: fade 1000ms 120ms ease both; }
  .card { animation: float 1200ms ease both; }
}

@keyframes rise { from { transform: translateY(16px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes float { from { transform: translateY(10px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }