/* Cuprum Metals website — design system
   Serif display (Fraunces) + sans body (Inter). Copper accent on warm paper. */

:root{
  --copper:#b5722f; --copper-2:#d98a3f; --copper-3:#8a5520;
  --ink:#15171c; --ink-2:#474d57; --ink-3:#6d7280;
  --paper:#f7f4ef; --card:#ffffff; --line:#e6e0d6; --line-2:#d8d1c4;
  --dark:#0e1014; --dark-2:#161a20; --dark-3:#22262e;
  --ok:#2f7d5b; --warn:#b5722f;
  --wrap:1080px; --radius:12px;
  --sans:'Inter',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --serif:'Fraunces',Georgia,'Times New Roman',serif;
}
html[data-theme="dark"]{
  --ink:#ece7de; --ink-2:#b3b8c0; --ink-3:#8d939d;
  --paper:#0e1014; --card:#161a20; --line:#252a33; --line-2:#2f353f;
  --dark:#0a0c0f; --dark-2:#12151b; --dark-3:#1d222b;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--paper);line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.08;letter-spacing:-.012em;margin:0 0 .5em}
p{margin:0 0 1em}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.skip{position:absolute;left:-9999px}
.kicker{font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--copper);font-weight:600;margin-bottom:12px}
.lede{font-size:18px;color:var(--ink-2);max-width:62ch}
.muted{color:var(--ink-3);font-size:13px}

/* header */
.top{position:sticky;top:0;z-index:50;background:rgba(14,16,20,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--dark-3)}
.top .row{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:12px 24px;max-width:1240px;margin:0 auto}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--serif);font-weight:700;letter-spacing:.14em;font-size:13.5px;color:#f3ede4}
.brand img{width:26px;height:26px}
.brand b{color:var(--copper-2)}
.nav{display:flex;gap:20px;font-size:13px;color:#a9adb5;flex-wrap:wrap}
.nav a{padding:4px 0;border-bottom:2px solid transparent}
.nav a:hover{color:#fff}
.nav a.on{color:#fff;border-color:var(--copper-2)}
.tools{display:flex;align-items:center;gap:12px}
.tick{display:flex;align-items:center;gap:8px;font-size:12px;background:#191c22;border:1px solid #2a2f38;border-radius:999px;padding:5px 12px;color:#c7cbd2;white-space:nowrap}
.tick b{color:#fff;font-variant-numeric:tabular-nums}
.tick .up{color:#63d69d;font-weight:600}
.iconbtn{background:transparent;border:1px solid #2a2f38;border-radius:8px;color:#c7cbd2;width:34px;height:30px;cursor:pointer;font-size:13px}

/* hero */
.hero{position:relative;color:#f5f1e9;overflow:hidden;background:var(--dark)}
.hero .bg{position:absolute;inset:0;background-size:cover;background-position:center 62%;opacity:.55}
.hero .veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,12,15,.55) 0%,rgba(10,12,15,.72) 55%,rgba(10,12,15,.94) 100%)}
.hero .inner{position:relative;max-width:var(--wrap);margin:0 auto;padding:84px 24px 60px}
.eyebrow{font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--copper-2);font-weight:600;margin-bottom:16px}
.hero h1{font-size:clamp(32px,5.4vw,58px);max-width:19ch;color:#fdfaf4}
.hero h1 em{font-style:normal;color:var(--copper-2)}
.hero .lede{color:#cfccc4;font-size:18px;max-width:60ch}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin:26px 0 0}
.btn{padding:12px 22px;border-radius:9px;font-size:14px;font-weight:600;cursor:pointer;border:1px solid transparent;display:inline-block}
.btn.p{background:var(--copper);color:#fff}
.btn.p:hover{background:var(--copper-3)}
.btn.g{background:transparent;color:#ece7de;border-color:#3a3f48}
.btn.g:hover{border-color:#6b7078}

/* stat strip */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--dark-3);border:1px solid var(--dark-3);border-radius:12px;overflow:hidden;margin-top:40px}
.stat{background:rgba(20,23,29,.94);padding:16px 18px}
.stat .v{font-family:var(--serif);font-size:26px;color:#fff;line-height:1.1}
.stat .v small{font-size:13px;color:var(--copper-2);font-family:var(--sans);font-weight:500}
.stat .k{font-size:11px;color:#9aa0a8;letter-spacing:.05em;text-transform:uppercase;margin-top:5px}

/* live strip */
.live{background:var(--card);border-bottom:1px solid var(--line);padding:11px 0}
.live .row{display:flex;align-items:center;gap:20px;flex-wrap:wrap;font-size:12.5px;color:var(--ink-2);max-width:var(--wrap);margin:0 auto;padding:0 24px}
.live .lab{display:flex;align-items:center;gap:8px;font-weight:600;color:var(--ink)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px rgba(47,125,91,.18)}
.live b{font-variant-numeric:tabular-nums;color:var(--ink)}
.spark{margin-left:auto;display:flex;align-items:center;gap:10px}

/* sections */
section{padding:64px 0;border-bottom:1px solid var(--line)}
section.tight{padding:44px 0}
h2{font-size:clamp(24px,3.2vw,36px)}
.grid2{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px}
ul.clean{list-style:none;margin:0;padding:0}
ul.clean li{position:relative;padding:10px 0 10px 22px;font-size:14.5px;color:var(--ink-2);border-bottom:1px dashed var(--line)}
ul.clean li:last-child{border-bottom:none}
ul.clean li:before{content:"";position:absolute;left:2px;top:17px;width:7px;height:7px;border-radius:2px;background:var(--copper-2)}
figure{margin:0}
figure img,figure svg{width:100%;height:auto;border-radius:var(--radius);border:1px solid var(--line)}
figcaption{font-size:12px;color:var(--ink-3);margin-top:8px}
.imgpanel{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line)}

/* flow */
.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:8px}
.step{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px}
.step .s{font-family:var(--serif);font-size:20px;color:var(--copper)}
.step .t{font-weight:600;margin:6px 0 4px;font-size:14.5px}
.step .d{font-size:12.5px;color:var(--ink-3)}

/* neighbourhood */
.hood{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.hood .c{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px}
.hood .c .n{font-family:var(--serif);font-size:19px}
.hood .c .d{font-size:12.5px;color:var(--ink-3);margin-top:4px}
.hood .c .same{display:inline-block;margin-top:10px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--copper);border:1px solid var(--line-2);border-radius:999px;padding:3px 9px}

/* tag row */
.tags{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.tag{font-size:12px;padding:6px 12px;border-radius:999px;border:1px solid var(--line-2);color:var(--ink-2);background:var(--card)}

/* cta band */
.band{background:var(--dark);color:#ece7de;padding:48px 0}
.band h2{color:#fdfaf4}
.band p{color:#c3c0b8;max-width:60ch}

/* footer */
footer{background:var(--dark-2);color:#9aa0a8;padding:44px 0 26px;font-size:13px}
footer .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:24px;max-width:var(--wrap);margin:0 auto;padding:0 24px}
footer h4{font-family:var(--sans);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#c9cdd4;margin:0 0 12px}
footer a{display:block;padding:3px 0;color:#9aa0a8}
footer a:hover{color:#fff}
footer .legal{max-width:var(--wrap);margin:28px auto 0;padding:18px 24px 0;border-top:1px solid #23282f;color:#6d7280;font-size:11.5px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

@media(max-width:860px){
  .grid2{grid-template-columns:1fr;gap:26px}
  .grid3,.hood{grid-template-columns:1fr 1fr}
  .flow{grid-template-columns:1fr 1fr}
  .stats{grid-template-columns:1fr 1fr}
  .nav{display:none}
  footer .cols{grid-template-columns:1fr 1fr}
}
@media(max-width:520px){
  .grid3,.hood,.flow{grid-template-columns:1fr}
}