:root{
  --ark-black:#070707;
  --ark-black-soft:#0d0d0f;
  --ark-panel:#121215;
  --ark-panel-2:#18181c;
  --ark-line:#2b2924;
  --ark-gold:#d4af37;
  --ark-gold-soft:#f0d889;
  --ark-gold-dark:#8f711d;
  --ark-text:#f6f1e7;
  --ark-muted:#aaa39a;
  --ark-success:#7fbd91;
  --ark-danger:#d98787;
  --ark-radius:20px;
  --ark-shadow:0 18px 60px rgba(0,0,0,.34);
  --ark-font:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

*{box-sizing:border-box}
html{background:var(--ark-black)}
body{
  margin:0;
  min-height:100vh;
  font-family:var(--ark-font);
  color:var(--ark-text);
  background:
    radial-gradient(circle at 82% -12%,rgba(212,175,55,.10),transparent 30%),
    linear-gradient(180deg,#090909 0%,#070707 55%,#050505 100%);
}
button,a{font:inherit}
::selection{background:rgba(212,175,55,.28);color:#fff}

.ark-brand{display:inline-flex;align-items:center;gap:10px;min-width:0}
.ark-mark{
  width:38px;height:38px;border:1px solid rgba(212,175,55,.48);border-radius:50%;
  display:grid;place-items:center;color:var(--ark-gold-soft);font-weight:900;letter-spacing:-.08em;
  box-shadow:inset 0 0 20px rgba(212,175,55,.06),0 0 24px rgba(212,175,55,.05);
}
.ark-brand-copy{display:grid;line-height:1.05}
.ark-brand-name{font-weight:900;letter-spacing:.16em;font-size:12px;color:var(--ark-gold-soft)}
.ark-brand-module{font-size:10px;color:var(--ark-muted);letter-spacing:.08em;margin-top:4px}

.ark-credit-shell{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ark-credit-card{
  min-width:220px;padding:10px 12px;border:1px solid rgba(212,175,55,.25);border-radius:14px;
  background:linear-gradient(180deg,rgba(212,175,55,.07),rgba(255,255,255,.015));
}
.ark-credit-row{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:11px}
.ark-credit-row strong{color:var(--ark-gold-soft)}
.ark-credit-bar{height:5px;border-radius:999px;background:#25231f;overflow:hidden;margin-top:8px}
.ark-credit-bar>span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--ark-gold-dark),var(--ark-gold-soft));border-radius:999px}

.ark-kicker{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ark-gold);font-weight:900}
.ark-muted{color:var(--ark-muted)}
.ark-gold{color:var(--ark-gold-soft)}

@media(max-width:700px){
  .ark-credit-card{min-width:0;width:100%}
  .ark-brand-name{font-size:11px}
}