:root {
  --bg: #07090f;
  --panel: #0d1119;
  --line: rgba(232, 228, 220, 0.1);
  --ink: #ece7de;
  --ink-muted: #9a938a;
  --ember: #f4a261;
  --ember-hot: #ff7a3d;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: radial-gradient(circle at 50% -10%, rgba(244,162,97,0.08), transparent 40%), var(--bg);
  color: var(--ink);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  line-height: 1.8;
}

.wrap { max-width: 860px; margin: 0 auto; padding: 56px 24px 96px; }
.crumb { font-size: 13px; color: var(--ink-muted); margin-bottom: 32px; }
.crumb a { color: var(--ember); text-decoration: none; }
.crumb a:hover { text-decoration: underline; }

.eyebrow { font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ember); margin-bottom: 12px; }
h1 { font-size: clamp(26px, 4vw, 38px); line-height: 1.3; margin-bottom: 16px; color: #fff; }
.lede { color: var(--ink-muted); font-size: 16px; margin-bottom: 40px; border-left: 3px solid var(--ember); padding-left: 16px; }
h2 { font-size: 22px; margin: 40px 0 16px; color: var(--ember); border-bottom: 1px solid var(--line); padding-bottom: 8px; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 16px; margin-bottom: 40px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 20px 24px; margin: 16px 0; }
.grid .card { margin: 0; }
.card-title { font-size: 17px; font-weight: 700; color: #fff; margin-bottom: 8px; display: flex; justify-content: space-between; align-items: center; }
.tag { font-size: 11px; padding: 2px 8px; border-radius: 4px; background: rgba(244,162,97,0.15); color: var(--ember); border: 1px solid rgba(244,162,97,0.3); }
.card-desc { font-size: 14px; color: #b0a89e; line-height: 1.7; }

.branch-list { font-size: 14px; color: #d4cece; background: rgba(0,0,0,0.35); padding: 14px 18px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.05); }
.branch-item { margin-bottom: 8px; }
.branch-item:last-child { margin-bottom: 0; }

.back-btn { display: inline-block; margin-top: 40px; padding: 10px 20px; background: var(--panel); border: 1px solid var(--ember); color: var(--ember); text-decoration: none; border-radius: 8px; font-size: 14px; transition: all 0.2s; }
.back-btn:hover { background: rgba(244,162,97,0.1); border-color: var(--ember-hot); }
