/* Dubloons — public splash. Marble Gallery theme. tokens.css owns the
   palette, marble.css the stone, vitrine.css the cards, motion.css the
   reveals, skm-funnel.css the contact block. What is left here is the
   page shell: header, hero, sections, footer. */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body {
  font-family: var(--font-sans);
  background: var(--surface);
  color: var(--ink);
  line-height: 1.65;
}
.wrap { max-width: 1020px; margin: 0 auto; padding: 0 1.25rem; }
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-variation-settings: 'SOFT' 0, 'WONK' 0;
  letter-spacing: -0.005em;
}
h2 { font-size: 1.9rem; margin-bottom: 0.9rem; }
/* The brass fitting under a section title. marble.css draws it; this is
   only where it sits on this page. */
.rule-brass { max-width: 200px; margin: 0 0 1.6rem; }

/* Header */
.topbar { border-bottom: var(--hairline) solid var(--line); background: var(--surface-raised); }
.topbar-inner { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; }
.wordmark {
  font-family: var(--font-display); font-size: 1.35rem;
  letter-spacing: 0.16em; font-weight: 600;
  color: var(--ink); text-decoration: none;
}
.wordmark-mint { font-size: 0.58em; letter-spacing: 0.3em; color: var(--accent-ink); margin-left: 0.5em; vertical-align: middle; }
.topnav { display: flex; align-items: center; gap: 1.5rem; }
.topnav a { color: var(--ink); text-decoration: none; font-size: 0.95rem; }
.topnav a:hover { color: var(--accent-ink); }
/* Discreet admin entry in the footer — unadvertised, but still legible.
   Fading it with opacity put it at 2.6:1; discretion comes from the
   dotted underline and small size instead, not from low contrast. */
.foot-admin {
  color: var(--ink-muted);
  text-decoration: underline dotted;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.foot-admin:hover { color: var(--accent-ink); text-decoration-style: solid; }
/* A prominent footer link (Client portal) — reads as body ink so it clears
   AA on the raised footer in both themes; the default browser blue does not. */
.foot-link {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.foot-link:hover { color: var(--accent-ink); }

/* Buttons live in ui.css. .topnav a is more specific than .btn, so the
   CTA's label has to be restated or it inherits nav ink on brass. */
.topnav a.btn, .topnav a.btn:hover { color: var(--btn-ink); }

/* Hero — the coin on a marble floor receding into gallery shadow. The
   floor is decorative and full-bleed, so it sits outside .wrap and
   behind the content rather than under a max-width column. */
.hero { position: relative; isolation: isolate; overflow: hidden; }
.hero-floor { position: absolute; inset: 0; z-index: -1; opacity: 0.85; }
.hero-inner { text-align: center; padding: 4.5rem 1.25rem 3.5rem; }
.hero-emblem { position: relative; display: inline-block; margin-bottom: 2rem; }
.coin {
  display: block; width: 120px; height: 120px;
  filter: drop-shadow(0 6px 14px rgba(16,16,20,0.18));
  transition: transform var(--t-slow) var(--ease-out);
}
.hero-emblem:hover .coin { transform: scale(1.04); }
.coin-rim { fill: var(--ink); }
.coin-face { fill: var(--surface-raised); }
.keyhole { fill: var(--ink); }
/* One sheen crossing the struck face once the page has settled. */
.hero-emblem::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: linear-gradient(105deg, transparent 36%, var(--sheen-hi) 50%, transparent 64%);
  opacity: 0; pointer-events: none;
}
.anim .hero-emblem::after { animation: coin-sheen 1.8s var(--ease-out) 0.9s 1; }
@keyframes coin-sheen {
  0% { opacity: 0; transform: translateX(-35%); }
  35% { opacity: 1; }
  100% { opacity: 0; transform: translateX(35%); }
}
.hero h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); line-height: 1.12; }
.lede { max-width: 640px; margin: 1.5rem auto 2.2rem; font-size: 1.1rem; color: var(--ink-muted); }
.hero-cta { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* Vitrine grids — the cards themselves are vitrine.css */
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.25rem; padding-bottom: 3.5rem; }

/* How it works */
.how { background: var(--surface-sunken); border-top: var(--hairline) solid var(--line); border-bottom: var(--hairline) solid var(--line); padding: 3.5rem 0; }
.steps { position: relative; max-width: 720px; counter-reset: step; list-style: none; }
/* An engraved rail joining the numbered discs, faded out at both ends
   so it never runs past the first or last step. */
.steps::before {
  content: ''; position: absolute; left: 1.1rem; top: 1.9rem; bottom: 1.9rem;
  width: var(--hairline);
  background: linear-gradient(180deg, transparent, var(--line-strong) 12%, var(--line-strong) 88%, transparent);
}
.steps li { padding: 0.9rem 0 0.9rem 3.4rem; position: relative; counter-increment: step; border-bottom: var(--hairline) dotted var(--line-strong); }
.steps li:last-child { border-bottom: none; }
.steps li::before {
  content: counter(step); position: absolute; left: 0; top: 0.85rem;
  width: 2.2rem; height: 2.2rem; display: flex; align-items: center; justify-content: center;
  background: var(--accent); color: var(--on-accent); border-radius: 50%;
  font-family: var(--font-display); font-size: 0.95rem; font-weight: 600;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), var(--shadow-sm);
}

/* Services */
.services { padding: 3.5rem 1.25rem; }

/* Footer */
.footer { border-top: var(--hairline) solid var(--line); background: var(--surface-raised); }
.footer-inner { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; padding: 1.2rem 1.25rem 2rem; color: var(--ink-muted); font-size: 0.9rem; }
.foot-tag { font-family: var(--font-display); font-style: italic; }

@media (max-width: 640px) {
  .topnav a:not(.btn) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .anim .hero-emblem::after { animation: none; }
  .hero-emblem:hover .coin { transform: none; }
}