
:root{
  --bg:#08090a;
  --bg2:#111214;
  --panel:#151617;
  --text:#f4efe5;
  --muted:#bdb6aa;
  --gold:#c89b3c;
  --gold2:#e3bf6a;
  --line:#2b2a26;
  --max:1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: Georgia, "Times New Roman", serif;
  background:
    radial-gradient(circle at 50% 0%, rgba(200,155,60,.08), transparent 35%),
    linear-gradient(180deg,var(--bg),var(--bg2));
  color:var(--text);
  line-height:1.65;
}
a{color:var(--gold2);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
header{
  position:sticky;top:0;z-index:20;
  background:rgba(8,9,10,.96);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(10px);
}
.nav{
  min-height:80px;display:flex;align-items:center;justify-content:space-between;gap:24px
}
.brandline{display:flex;align-items:center;gap:14px}
.brandmark{width:48px;height:48px;border-radius:50%;display:block}
.brandtext{
  color:var(--text);letter-spacing:.09em;font-weight:700;font-size:.98rem
}
nav a{margin-left:22px;color:#ded8cd;font-size:.95rem}
.hero{padding:92px 0 74px}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center}
.kicker{
  color:var(--gold2);text-transform:uppercase;letter-spacing:.18em;
  font-size:.8rem;margin-bottom:14px
}
h1,h2,h3{line-height:1.15;margin-top:0}
h1{font-size:clamp(2.6rem,6vw,5.7rem);margin-bottom:22px;letter-spacing:-.02em}
h2{font-size:2rem;margin-bottom:16px}
p{color:#d6d0c6}
.lead{font-size:1.2rem;max-width:760px;color:#ddd6ca}
.hero-logo{
  width:min(100%,460px);display:block;margin:0 auto;
  filter:drop-shadow(0 20px 45px rgba(0,0,0,.55));
}
.cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}
.btn{
  display:inline-block;padding:12px 18px;border:1px solid var(--gold);
  color:var(--text);letter-spacing:.04em;background:rgba(200,155,60,.04)
}
.btn.alt{border-color:var(--line);color:#ddd5c7}
.section{padding:58px 0;border-top:1px solid var(--line)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{
  background:linear-gradient(180deg,#171819,#121314);
  border:1px solid var(--line);padding:26px;min-height:190px
}
.card h3{color:#f5eee0;margin-bottom:10px}
.small{font-size:.93rem;color:var(--muted)}
.api-box{
  background:#111214;border:1px solid var(--line);padding:28px;
  border-left:3px solid var(--gold)
}
.policy{max-width:860px;padding:72px 24px}
.policy h1{font-size:clamp(2.5rem,5vw,4.3rem)}
.policy h2{margin-top:38px;font-size:1.35rem;color:#f2eadb}
.notice{
  border-left:3px solid var(--gold);padding:14px 18px;background:#121314;margin:24px 0
}
.contact-card{max-width:700px}
footer{border-top:1px solid var(--line);padding:34px 0 48px;color:var(--muted)}
.footer-row{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
.footer-brand{display:flex;align-items:center;gap:10px}
.footer-brand img{width:30px;height:30px;border-radius:50%}
code{color:#ead8aa}
@media(max-width:820px){
  .hero-grid{grid-template-columns:1fr;gap:34px}
  .hero-logo{max-width:360px}
  .grid{grid-template-columns:1fr}
}
@media(max-width:700px){
  .nav{flex-direction:column;align-items:flex-start;padding:16px 0}
  nav a{margin:0 16px 0 0}
  .hero{padding:58px 0}
}
