:root{
  --ink:#111214; --paper:#fff; --mid:#8B8D94; --gold:#C2A43C; --wash:#F7F8FA;
}
*{box-sizing:border-box} html,body{height:100%} body{
  margin:0; font-family:Inter,system-ui,-apple-system,sans-serif;
  color:var(--ink); background:var(--paper);
}
.topbar{
  position:sticky; top:0; z-index:30; display:flex; align-items:center; justify-content:space-between;
  height:64px; padding:0 16px; background:rgba(255,255,255,.72); backdrop-filter:saturate(160%) blur(10px);
  border-bottom:1px solid rgba(0,0,0,.06);
}
.brand{display:flex; align-items:center; gap:10px; font-weight:700}
.brand .dot{width:8px;height:8px;border-radius:50%;background:var(--gold);display:inline-block}
.nav{display:flex; align-items:center; gap:12px}
.nav a{color:var(--ink); text-decoration:none; font-weight:600}
.btn{display:inline-block; padding:10px 16px; border-radius:12px; font-weight:700; background:var(--gold); color:#111; text-decoration:none}

.hero{display:grid; place-items:center; text-align:center; padding:80px 20px 40px; background:linear-gradient(180deg,#fff 0,var(--wash) 100%)}
.hero h1{font-size:clamp(36px,6vw,56px); letter-spacing:-.02em; margin:0 0 10px; opacity:0; transform:translateY(10px)}
.hero p{color:var(--mid); margin:0 0 16px; max-width:900px; opacity:0; transform:translateY(10px)}
.chips{display:flex; gap:8px; flex-wrap:wrap; justify-content:center}
.chips span{border:1px solid var(--gold); border-radius:999px; padding:6px 10px; background:#fff}

.panel{padding:40px 20px}
.panel h2{margin:0 auto 16px; max-width:1000px}
.cards{max-width:1100px; margin:0 auto; display:grid; gap:18px}
.cards.three{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.card{border:1px solid rgba(0,0,0,.08); border-radius:16px; background:#fff; box-shadow:0 6px 22px rgba(0,0,0,.06); padding:16px}
.metric .value{font-size:36px; font-weight:700}
.metric .meta{color:var(--mid)}
.beforeafter{max-width:1100px; margin:18px auto 0; display:grid; grid-template-columns:1fr 1fr; gap:16px}
.beforeafter h4{margin:.2rem 0 .6rem}
.bars{display:grid; gap:10px; align-content:center}
.bar{height:10px; background:#eee; border-radius:999px; overflow:hidden}
.bar span{display:block; height:100%; background:var(--gold); transform-origin:left; width:0%}
.op .big{font-size:28px; font-weight:800}
.good{color:#0a7d3b} .warn{color:#b26b00}
.note{max-width:1100px; margin:18px auto 0}
.deliver{max-width:1000px; margin:0 auto; display:grid; gap:12px}
.foot{padding:32px 20px; border-top:1px solid rgba(0,0,0,.06); text-align:center; color:var(--mid)}