:root {
  --midnight: #121822;
  --porcelain: #FAFAF7;
  --copper: #B48A78;
  --slate: #2E3239;
}
* { box-sizing: border-box; }
html, body { margin:0; padding:0; background: var(--porcelain); color: var(--midnight); }
body { font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; line-height:1.6; }
.container { width: min(1100px, 92%); margin: 0 auto; }

/* Top nav */
.nav { position: sticky; top:0; backdrop-filter: blur(4px); background: rgba(250,250,247,.92); border-bottom: 1px solid rgba(18,24,34,.12); z-index:100; }
.nav-wrap { display:flex; align-items:center; justify-content:space-between; padding:.65rem 0; }
.brand img { height:34px; width:auto; display:block; }
.toplinks a { color: var(--midnight); text-decoration:none; margin-left:1rem; opacity:.9; }
.toplinks a:hover { opacity:1; }
.toplinks .cta { border:1px solid var(--midnight); padding:.4rem .7rem; border-radius:8px; }

/* Hero with subtle molecular grid */
.hero { position: relative; padding: 80px 0 64px; overflow: hidden; }
.hero::before {
  content:""; position:absolute; inset:0;
  background-image: radial-gradient(circle at 1px 1px, rgba(18,24,34,.12) 1px, transparent 1px);
  background-size:22px 22px; mask-image: linear-gradient(to bottom, black 55%, transparent 100%); opacity:.35;
}
.hero-wrap { position:relative; }
.hero h1 { font-family: 'Spectral', Georgia, serif; font-weight:600; letter-spacing:.5px; font-size: clamp(28px, 4vw, 44px); margin:0 0 .5rem; }
.hero .lead { font-size: clamp(16px, 1.8vw, 20px); max-width: 780px; opacity:.95; }
.primary { display:inline-block; margin-top:1rem; padding:.7rem 1.0rem; border:1px solid var(--midnight); border-radius:10px; text-decoration:none; color:var(--midnight); }
.primary:hover { background:white; }
.hero-accent { height:2px; width:min(880px, 90%); background: var(--copper); margin: 28px auto 0; border-radius:2px; }

/* Dividers */
.divider { height:1px; width:100%; }
.divider.copper { background: var(--copper); opacity:.9; }
.divider.gradient { background: linear-gradient(to right, transparent, var(--copper), transparent); opacity:.7; }
.divider.lattice {
  background-image: linear-gradient(135deg, rgba(18,24,34,.14) 25%, transparent 25%),
                    linear-gradient(225deg, rgba(18,24,34,.14) 25%, transparent 25%);
  background-size: 8px 8px; opacity:.25;
}

/* Sections */
.section { padding: 56px 0; }
.section.muted { background: rgba(255,255,255,.6); }
.two-col { display:grid; grid-template-columns: 1fr; gap: 1.75rem; }
@media (min-width: 900px) { .two-col { grid-template-columns: 1fr 1fr; } }

h2 { font-family: 'Spectral', Georgia, serif; font-weight:600; letter-spacing:.4px; margin:0 0 .5rem; }
h3 { font-family: 'Spectral', Georgia, serif; font-weight:600; margin:.25rem 0 .25rem; font-size:1.05rem; }

.card { background:white; border:1px solid rgba(18,24,34,.12); border-radius:14px; padding:1.1rem 1.2rem; box-shadow: 0 4px 18px rgba(0,0,0,.03); }
.checklist { list-style:none; padding:0; margin:.45rem 0 0; }
.checklist li::before { content:"• "; color: var(--copper); margin-right:.35rem; }

.grid-3 { display:grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 1rem; }
@media (min-width: 900px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }
.cap-card { background:white; border:1px solid rgba(18,24,34,.12); border-radius:14px; padding:1.1rem 1.2rem; box-shadow: 0 3px 16px rgba(0,0,0,.03); min-height: 160px; }

.bullets { padding-left:1.1rem; margin:.5rem 0 0; }
.signal { align-self:start; border-left: 3px solid var(--copper); padding-left:1.2rem; margin-top: 0.5rem; background: rgba(255, 255, 255, 0.5); border-radius: 8px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03); }
.signal-title { font-weight:600; letter-spacing:.4px; margin-bottom:0.5rem; }
.signal-list { list-style:none; margin:0.5rem 0 0; padding-left:0; line-height:1.8; }
.signal-list li::before { content:"✔ "; color: var(--copper); font-weight:600; }

/* About/Contact */
.contact a { color: var(--midnight); text-decoration: none; border-bottom:1px solid rgba(18,24,34,.2); }
.contact a:hover { border-bottom-color: var(--copper); }

/* Footer */
.footer { padding: 36px 0 48px; }
.fineprint { font-size:.9rem; opacity:.7; text-align:center; }

/* Micro-interactions */
.fade-logo { opacity: 0; transform: translateY(-2px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; }
body.loaded .fade-logo { opacity: 1; transform: translateY(0); }

.fade-hero { opacity: 0; transform: translateY(8px); transition: opacity 0.8s ease-out, transform 0.8s ease-out; }
body.loaded .fade-hero { opacity: 1; transform: translateY(0); transition-delay: 0.15s; }

/* CTA hover (copper fill) */
.primary {
  position: relative;
  color: var(--midnight);
  background: transparent;
  border: 1px solid var(--midnight);
  border-radius: 10px;
  padding: 0.7rem 1.0rem;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s ease, background 0.3s ease, border-color 0.3s ease;
}
.primary:hover { background: var(--copper); color: white; border-color: var(--copper); }
.primary:focus-visible, .primary:active {
  outline: none;
  box-shadow: 0 0 0 2px rgba(180,138,120,0.4);
}

/* Hover polish for capability cards */
@media (prefers-reduced-motion: no-preference) {
  .cap-card, .card { transition: transform .2s ease, box-shadow .2s ease; }
  .cap-card:hover { transform: translateY(-2px); box-shadow: 0 6px 24px rgba(0,0,0,.06); }
}