:root{
  --bg:#26262b;
  --bg2:#1b1b21;
  --gold:#E3B24B;
  --white:#ffffff;
  --muted:rgba(255,255,255,.64);
  --line:rgba(227,178,75,.26);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--white);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:980px;margin:0 auto;padding:0 clamp(18px,4vw,32px)}
a{color:var(--gold)}
img{max-width:100%}

header.site{
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;padding:20px 0;border-bottom:1px solid var(--line);
}
header.site a.brand{display:block;line-height:0}
header.site img{height:30px;width:auto;display:block}
nav{display:flex;gap:22px;flex-wrap:wrap}
nav a{
  color:var(--muted);text-decoration:none;font-size:12px;
  letter-spacing:.16em;text-transform:uppercase;font-weight:600;
}
nav a:hover,nav a[aria-current="page"]{color:var(--gold)}
nav a.lang{color:var(--gold);border-left:1px solid var(--line);padding-left:20px}

.hero{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:clamp(34px,6vw,68px) 0 clamp(26px,4vw,48px);
}
.hero img.mark{width:min(500px,84vw);height:auto;display:block}
h1{
  font-size:clamp(23px,3.2vw,36px);font-weight:800;letter-spacing:.01em;
  margin:30px 0 0;line-height:1.25;
}
.lede{color:var(--muted);font-size:clamp(15px,1.7vw,18px);max-width:58ch;margin:16px 0 0}

section{padding:clamp(28px,5vw,52px) 0;border-top:1px solid var(--line)}
h2{
  font-size:12px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--gold);font-weight:700;margin:0 0 22px;
}
.card{
  background:var(--bg2);border:1px solid var(--line);border-radius:14px;
  padding:22px 24px;
}
.card h3{margin:0 0 6px;font-size:19px;font-weight:700;letter-spacing:.01em}
.card p{margin:0;color:var(--muted);font-size:15px;max-width:62ch}
.badge{
  display:inline-block;font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);border:1px solid var(--line);border-radius:999px;
  padding:3px 10px;margin-bottom:14px;font-weight:700;
}
.grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
a.card{display:block;text-decoration:none;color:inherit;transition:border-color .15s ease}
a.card:hover{border-color:var(--gold)}
.card p.note{color:var(--gold);font-size:13px;margin-top:10px}

a.feature{display:block;text-decoration:none;color:inherit;background:var(--bg2);
  border:1px solid var(--line);border-radius:18px;overflow:hidden;transition:border-color .15s ease}
a.feature:hover{border-color:var(--gold)}
.feature-img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.feature-body{padding:clamp(20px,3vw,30px)}
.feature-title{font-size:clamp(24px,3.4vw,38px);font-weight:800;letter-spacing:.01em;
  text-transform:none;color:var(--white);margin:10px 0 8px}
.feature-body p{color:var(--muted);font-size:15px;max-width:62ch;margin:0}
.cta{display:inline-block;margin-top:18px;background:var(--gold);color:#26262b;
  font-weight:800;font-size:15px;padding:12px 24px;border-radius:999px}
.feature-note{display:block;margin-top:10px;color:var(--muted);font-size:13px}

.prose{max-width:72ch}
.prose p,.prose li{color:var(--muted);font-size:15px}
.prose h3{font-size:16px;margin:28px 0 6px;color:var(--white)}
.prose ul{padding-left:20px;margin:8px 0}
.todo{color:#ffc9c9;border-bottom:1px dashed rgba(255,201,201,.6)}

footer.site{
  border-top:1px solid var(--line);padding:24px 0 46px;color:var(--muted);
  font-size:13px;display:flex;gap:18px;flex-wrap:wrap;
  align-items:center;justify-content:space-between;
}
footer.site a{color:var(--muted);text-decoration:none}
footer.site a:hover{color:var(--gold)}
.foot-links{display:flex;gap:18px;flex-wrap:wrap}