/* ANG Noir — derived from Luxe Noir. See DESIGN.md for the contract. */
:root{
  --bg:#0c0c0e; --panel:#141417; --border:#2e2e34;
  --fg:#ece8e1; --muted:#a49e93; --dim:#6a665e;
  --gold:#d4ac68; --goldsoft:rgba(212,172,104,.15); --b1soft:rgba(212,172,104,.3);
  --chip:#17171b; --chipfg:#c4bdb0;
  --serif:"Fraunces",Georgia,serif; --sans:"Inter Tight",-apple-system,sans-serif;
  --maxw:1100px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  background:var(--bg); color:var(--fg);
  font-family:var(--sans); font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
  background-image:radial-gradient(ellipse 80% 50% at 50% -8%, rgba(212,172,104,.08), transparent 60%);
  background-repeat:no-repeat;
}
em{font-style:italic}

/* ---- nav ---- */
.nav{
  max-width:var(--maxw); margin:0 auto; padding:28px 24px;
  display:flex; align-items:center; gap:32px;
}
.brand{
  font-family:var(--serif); font-weight:600; font-size:19px;
  color:var(--fg); text-decoration:none; letter-spacing:-0.005em;
  display:flex; align-items:center; gap:10px;
}
.brand-dot{width:9px;height:9px;border-radius:50%;background:var(--gold);display:inline-block}
.brand-dot.small{width:7px;height:7px;margin-right:8px}
.nav-links{display:flex; gap:26px; margin-left:auto}
.nav-links a{
  color:var(--muted); text-decoration:none; font-size:13.5px; font-weight:500;
  transition:color .18s;
}
.nav-links a:hover,.nav-links a:focus-visible{color:var(--gold)}
.nav-cta{margin-left:4px}

/* ---- buttons ---- */
.btn{
  display:inline-block; padding:13px 26px; border-radius:26px;
  font-family:var(--sans); font-size:14px; font-weight:600;
  text-decoration:none; transition:background .18s,border-color .18s,box-shadow .18s,color .18s;
  border:1px solid transparent;
}
.btn:focus-visible{outline:2px solid var(--gold); outline-offset:2px}
.btn-primary{background:var(--gold); color:#0c0c0e}
.btn-primary:hover{background:#e0bd7f; box-shadow:0 0 24px rgba(212,172,104,.25)}
.btn-ghost{background:var(--chip); color:var(--chipfg); border-color:var(--border)}
.btn-ghost:hover{border-color:var(--b1soft); color:var(--fg)}
.nav .btn{padding:10px 20px; font-size:13px}

/* ---- hero ---- */
.hero{max-width:var(--maxw); margin:0 auto; padding:96px 24px 0}
.hero h1{
  font-family:var(--serif); font-weight:300; font-optical-sizing:auto;
  font-size:clamp(40px,6.5vw,64px); line-height:1.08; letter-spacing:-0.015em;
  max-width:840px; text-wrap:balance;
}
.hero h1 em,.footer-cta h2 em{color:var(--gold)}
.lead{
  font-size:17px; line-height:1.6; color:var(--muted);
  max-width:620px; margin-top:28px; text-wrap:pretty;
}
.cta-row{display:flex; gap:14px; margin-top:36px; flex-wrap:wrap}
.cta-row.center{justify-content:center}

/* ---- stats band ---- */
.stats{
  margin-top:72px; display:grid; grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--border); border-bottom:1px solid var(--border);
}
.stat{padding:28px 24px}
.stat + .stat{border-left:1px solid var(--border)}
.stat-value{font-family:var(--serif); font-weight:600; font-size:clamp(22px,3vw,30px); letter-spacing:-0.01em}
.stat-value em{color:var(--gold); font-weight:300}
.stat-label{
  margin-top:8px; font-size:10.5px; font-weight:500; letter-spacing:.18em;
  text-transform:uppercase; color:var(--dim);
}

/* ---- sections ---- */
.section{max-width:var(--maxw); margin:0 auto; padding:112px 24px 0}
.section-label{
  font-size:11px; font-weight:500; letter-spacing:.22em; text-transform:uppercase;
  color:var(--muted); margin-bottom:20px;
}
.section-label span{color:var(--gold)}
.section h2{
  font-family:var(--serif); font-weight:300; font-optical-sizing:auto;
  font-size:clamp(28px,4vw,38px); line-height:1.15; letter-spacing:-0.01em;
  max-width:720px; text-wrap:balance;
}
.section-intro{color:var(--muted); max-width:560px; margin-top:18px; font-size:16px; text-wrap:pretty}

.cols{
  display:grid; grid-template-columns:1fr 1fr; gap:40px; margin-top:36px;
  color:var(--muted); font-size:16px; line-height:1.65;
}
.cols p{text-wrap:pretty}

/* ---- cards ---- */
.card-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:44px;
}
.card{
  background:var(--panel); border:1px solid var(--border); border-radius:14px;
  padding:24px; transition:border-color .18s, box-shadow .18s;
}
.card:hover{border-color:var(--b1soft); box-shadow:0 0 20px rgba(212,172,104,.07)}
.card h3{
  font-family:var(--serif); font-weight:600; font-size:19px;
  letter-spacing:-0.005em; margin-bottom:10px;
}
.card p{color:var(--muted); font-size:14.5px; line-height:1.6; text-wrap:pretty}

/* ---- steps ---- */
.steps{list-style:none; margin-top:44px}
.steps li{
  display:grid; grid-template-columns:80px 1fr; gap:24px;
  padding:32px 0; border-top:1px solid var(--border);
}
.steps li:last-child{border-bottom:1px solid var(--border)}
.step-num{
  font-family:var(--serif); font-weight:300; font-size:34px;
  color:var(--gold); line-height:1;
}
.steps h3{font-family:var(--serif); font-weight:600; font-size:19px; margin-bottom:8px}
.steps p{color:var(--muted); max-width:560px; font-size:15px; text-wrap:pretty}

/* ---- faq ---- */
.faq-list{margin-top:44px; border-bottom:1px solid var(--border)}
.faq-list details{border-top:1px solid var(--border)}
.faq-list summary{
  cursor:pointer; list-style:none; padding:22px 40px 22px 0;
  font-family:var(--serif); font-weight:600; font-size:17px;
  position:relative; transition:color .18s;
}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{
  content:""; position:absolute; right:4px; top:50%;
  width:12px; height:12px; transform:translateY(-50%);
  background:
    linear-gradient(var(--gold),var(--gold)) center/12px 1.5px no-repeat,
    linear-gradient(var(--gold),var(--gold)) center/1.5px 12px no-repeat;
  transition:transform .2s;
}
.faq-list details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq-list summary:hover{color:var(--gold)}
.faq-list details p{color:var(--muted); padding:0 40px 24px 0; max-width:680px; font-size:15px; line-height:1.65; text-wrap:pretty}

/* ---- footer cta ---- */
.footer-cta{text-align:center; padding-bottom:32px}
.footer-cta .section-label{justify-content:center}
.footer-cta h2{margin:0 auto}
.footer-cta .section-intro{margin-left:auto; margin-right:auto}
.footer-cta .cta-row{margin-top:36px}

.footer{
  max-width:var(--maxw); margin:80px auto 0; padding:28px 24px 40px;
  border-top:1px solid var(--border);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  color:var(--dim); font-size:12.5px;
}
.footer .brand-dot.small{vertical-align:middle}

/* ---- reveal ---- */
.reveal{opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease}
.reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1; transform:none; transition:none}}

/* ---- responsive ---- */
@media (max-width:900px){
  .card-grid{grid-template-columns:1fr 1fr}
  .cols{grid-template-columns:1fr; gap:20px}
}
@media (max-width:640px){
  .nav{padding:20px 20px; gap:16px}
  .nav-links{display:none}
  .nav-cta{margin-left:auto}
  .hero{padding-top:64px}
  .section{padding-top:80px}
  .card-grid,.card-grid.principles{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr}
  .stat + .stat{border-left:none; border-top:1px solid var(--border)}
  .steps li{grid-template-columns:56px 1fr; gap:16px; padding:24px 0}
  .step-num{font-size:26px}
}