:root{
  --ink:#081421;
  --gold:#e1b32e;
  --paper:#f4f6f8;
  --danger:#b42318;
  --serif:"Cormorant Garamond",Georgia,serif;
  --sans:"Outfit",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--ink);color:#fff;min-height:100vh;line-height:1.5}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
img{max-width:100%;display:block}
.wrap{width:min(1120px,calc(100% - 40px));margin:0 auto}

.nav-bar{
  position:fixed;top:0;left:0;right:0;z-index:50;
  background:linear-gradient(180deg,rgba(8,20,33,.92),rgba(8,20,33,.35) 70%,transparent);
}
.nav{display:flex;align-items:center;justify-content:space-between;padding:18px 0}
.brand{display:flex;align-items:center;gap:10px;color:var(--gold);letter-spacing:.16em;font-size:13px;font-weight:700}
.brand img{width:34px;height:34px}
.nav-links{display:flex;gap:26px;align-items:center;font-size:13px;color:#e8e4d8}
.nav-links a:hover{color:var(--gold)}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  border:0;cursor:pointer;border-radius:999px;padding:12px 24px;
  font-weight:700;font-size:13px;letter-spacing:.04em;
}
.btn-gold{background:var(--gold);color:#081421}
.btn-ghost{background:transparent;color:#fff;border:1px solid rgba(225,179,46,.55)}

.hero{
  position:relative;min-height:100vh;display:grid;place-items:center;
  padding:110px 0 72px;text-align:center;overflow:hidden;
}
.hero-bg{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(8,20,33,.58) 0%,rgba(8,20,33,.72) 45%,rgba(8,20,33,.96) 100%),
    url("../assets/hero.jpg") center/cover no-repeat;
}
.hero-copy{position:relative;max-width:820px;margin:0 auto}
.hero h1{
  font-family:var(--serif);font-weight:500;font-size:clamp(40px,6.4vw,78px);
  line-height:.95;letter-spacing:-.03em;margin:0 0 20px;
}
.hero .lead{max-width:560px;margin:0 auto 28px;color:#d9d3c6;font-size:16px}
.hero-acts{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.login-url{margin-top:18px;font-size:14px;color:#c9c3b4}
.login-url a{color:var(--gold);text-decoration:underline;text-underline-offset:3px}
.hero-meta{
  margin-top:48px;display:flex;flex-wrap:wrap;gap:36px;justify-content:center;
  color:#cfc9ba;font-size:13px;
}
.hero-meta b{display:block;color:var(--gold);font-size:28px;font-family:var(--serif);font-weight:600}

.law{
  position:relative;z-index:1;
  border-top:1px solid rgba(225,179,46,.35);
  padding:16px 0 28px;color:#d5c9a4;font-size:13px;text-align:center;
}
.law .wrap{display:flex;flex-wrap:wrap;gap:10px 28px;justify-content:center}
.law b{color:var(--gold);margin-right:6px}

.section{padding:72px 0 96px}
.section h2{
  font-family:var(--serif);font-size:clamp(28px,4vw,44px);font-weight:500;
  line-height:1.08;margin:10px 0 14px;
}
.kicker{color:var(--gold);letter-spacing:.2em;text-transform:uppercase;font-size:11px;font-weight:700}
.lede{color:#c5d0da;max-width:520px;font-size:16px}
.grid-2{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.desk{
  border-radius:20px;overflow:hidden;min-height:320px;
  background:#ccc url("../assets/desk.jpg") center/cover no-repeat;
}

.modal{
  position:fixed;inset:0;z-index:80;display:none;place-items:center;
  background:rgba(8,20,33,.72);padding:24px;
}
.modal.open{display:grid}
.card{
  width:min(400px,100%);background:#fff;color:#0f2438;border-radius:20px;padding:28px;
}
.card h2{font-family:var(--serif);font-size:32px;font-weight:500;margin:4px 0 8px;color:#0f2438}
.hint{color:#5b6b7a;font-size:13px;margin-bottom:16px}
.roles{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px}
.role{
  border:1px solid #d5dde8;background:#f4f6f8;border-radius:10px;
  padding:10px;cursor:pointer;font-size:13px;font-weight:700;
}
.role.on{background:#081421;color:#fff;border-color:#081421}
label{display:block;font-size:12px;font-weight:700;margin:12px 0 6px}
input{
  width:100%;padding:12px 14px;border-radius:10px;border:1px solid #d5dde8;background:#f8fafc;
}
.err{color:var(--danger);font-size:13px;margin-top:10px;display:none}
.err.show{display:block}
.btn-block{width:100%}
.modal-close{margin-top:10px;width:100%;background:transparent;border:0;color:#5b6b7a;cursor:pointer;font-size:13px}

.foot{padding:0 0 28px;text-align:center;font-size:12px;color:#8a93a0}
.foot a{color:var(--gold)}

@media (max-width:900px){
  .nav-links a:not(.btn){display:none}
  .grid-2{grid-template-columns:1fr}
  .hero{min-height:100vh;padding-top:96px}
}