:root {
  --bg: #0a0a0a;
  --panel: #121212;
  --panel-2: #1a1a1a;
  --text: #ffffff;
  --muted: #c2c2c2;
  --gold: #d4af37;
  --gold-dark: #b8921f;
  --border: rgba(255,255,255,0.1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  background: radial-gradient(circle at top, rgba(212,175,55,.12), transparent 35%), var(--bg);
  color: var(--text);
}

a { color: inherit; text-decoration: none; }
.container { width: min(1180px, calc(100% - 32px)); margin: 0 auto; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(8px);
  background: rgba(10,10,10,.88);
  border-bottom: 1px solid var(--border);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 0;
}
.brand-name {
  color: var(--gold);
  font-weight: 900;
  letter-spacing: .28em;
  font-size: 1.6rem;
}
.brand-sub {
  color: #d9d9d9;
  font-size: .72rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  margin-top: 4px;
}
.nav-links {
  display: flex;
  gap: 24px;
  color: #e6e6e6;
}
.nav-links a:hover { color: var(--gold); }

.btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 14px 22px;
  border-radius: 16px;
  font-weight: 700;
  transition: .2s ease;
  border: 1px solid transparent;
}
.btn-gold {
  background: var(--gold);
  color: #111;
}
.btn-gold:hover { background: var(--gold-dark); }
.btn-dark {
  border-color: rgba(255,255,255,.2);
  background: transparent;
  color: white;
}
.btn-dark:hover { background: rgba(255,255,255,.06); }
.full { width: 100%; }

.hero { padding: 60px 0 40px; }
.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 48px;
  align-items: center;
}
.eyebrow {
  display: inline-block;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(212,175,55,.35);
  background: rgba(212,175,55,.1);
  color: #f5de8a;
  font-size: .92rem;
}
.eyebrow.gold {
  text-transform: uppercase;
  letter-spacing: .26em;
  font-size: .76rem;
  font-weight: 700;
}
.hero h1 {
  margin: 18px 0;
  font-size: clamp(2.4rem, 5vw, 4.4rem);
  line-height: 1.05;
}
.hero h1 span { color: var(--gold); }
.hero-text, .section-head p, .about-grid p, .contact-wrap p {
  color: var(--muted);
  line-height: 1.8;
  font-size: 1.06rem;
}
.button-row { display: flex; gap: 14px; flex-wrap: wrap; margin: 28px 0; }
.highlight-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 14px;
  margin-top: 22px;
}
.highlight-card, .card, .stack-card, .contact-card {
  border: 1px solid var(--border);
  background: rgba(255,255,255,.05);
  border-radius: 22px;
}
.highlight-card {
  padding: 18px;
  color: #ececec;
}
.hero-panel {
  border: 1px solid rgba(212,175,55,.2);
  background: linear-gradient(145deg, #151515, #222);
  border-radius: 34px;
  padding: 24px;
  box-shadow: 0 20px 50px rgba(0,0,0,.34);
}
.panel-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.panel-brand { color: var(--gold); font-weight: 800; font-size: 1.1rem; }
.panel-sub { color: #b5b5b5; margin-top: 4px; }
.panel-badge {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(212,175,55,.15);
  color: var(--gold);
  font-weight: 900;
}
.focus-card, .mini-card, .note-card, .dark-panel, .gold-panel, .side-panel {
  border: 1px solid var(--border);
  border-radius: 26px;
}
.focus-card {
  margin-top: 20px;
  padding: 18px;
  background: rgba(255,255,255,.05);
}
.focus-label, .mini-label { color: #bcbcbc; font-size: .9rem; }
.focus-title, .mini-title { margin-top: 10px; font-size: 1.2rem; font-weight: 700; }
.mini-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 14px; margin-top: 14px; }
.mini-card { background: rgba(255,255,255,.05); padding: 18px; }
.note-card {
  margin-top: 14px;
  padding: 18px;
  background: rgba(212,175,55,.09);
  color: #ececec;
  line-height: 1.7;
}
.section { padding: 72px 0; }
.section-alt { background: rgba(255,255,255,.05); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.section-head { max-width: 760px; margin-bottom: 28px; }
.section-head h2, .about-grid h2, .contact-wrap h2 { font-size: clamp(2rem, 4vw, 3rem); margin: 10px 0 14px; }
.service-grid, .action-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 18px;
}
.card {
  padding: 24px;
  box-shadow: 0 10px 22px rgba(0,0,0,.14);
}
.card h3 { margin: 0 0 12px; font-size: 1.3rem; }
.card p { margin: 0; color: var(--muted); line-height: 1.8; }
.accent-card { background: rgba(212,175,55,.1); }
.about-grid, .capability-grid, .contact-wrap {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 28px;
  align-items: start;
}
.side-panel, .dark-panel {
  background: #101010;
  padding: 24px;
}
.side-panel h3, .dark-panel h3, .gold-panel h3 { margin-top: 0; font-size: 1.5rem; }
.stack-card { padding: 16px 18px; margin-top: 14px; color: #ededed; }
.gold-panel {
  background: rgba(212,175,55,.12);
  border-color: rgba(212,175,55,.25);
  padding: 24px;
}
.stack-card.dark { background: rgba(0,0,0,.22); }
.dark-panel ul {
  margin: 18px 0 0;
  padding-left: 20px;
  color: #ededed;
  line-height: 2;
}
.contact-section { padding-bottom: 90px; }
.contact-grid {
  display: grid;
  gap: 14px;
}
.contact-card { background: #101010; padding: 18px; }

@media (max-width: 980px) {
  .hero-grid, .about-grid, .capability-grid, .contact-wrap,
  .service-grid, .action-grid { grid-template-columns: 1fr 1fr; }
  .nav { flex-wrap: wrap; }
}
@media (max-width: 760px) {
  .nav-links { display: none; }
  .hero-grid, .about-grid, .capability-grid, .contact-wrap,
  .service-grid, .action-grid, .highlight-grid, .mini-grid { grid-template-columns: 1fr; }
  .hero { padding-top: 34px; }
}