/* ===== Design tokens ===== */
:root {
  --copper: #B87333;
  --copper-bright: #D89456;
  --slate: #0E1419;
  --steel: #3A4A57;
  --mist: #F5F3F0;
  --green: #2FA66B;
  --ink: #14171A;
  --display: 'Space Grotesk', sans-serif;
  --body: 'Inter', sans-serif;
  --mono: 'IBM Plex Mono', monospace;
}

/* ===== Reset ===== */
* { margin: 0; padding: 0; box-sizing: border-box }

/* ===== Base ===== */
body { font-family: var(--body); color: var(--mist); background: var(--slate); line-height: 1.6; -webkit-font-smoothing: antialiased }
body.legal-page { line-height: 1.65 }

a { color: inherit; text-decoration: none }
body.legal-page .wrap a { color: var(--copper-bright) }
body.legal-page .wrap a:hover { text-decoration: underline }

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 28px }

/* ===== Nav ===== */
nav { display: flex; align-items: center; justify-content: space-between; padding: 22px 28px; max-width: 1080px; margin: 0 auto }

.logo { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 700; font-size: 21px; letter-spacing: -.5px; color: #fff }
.logomark { width: 28px; height: 28px; flex: 0 0 28px; animation: pulse 2.8s infinite }

@keyframes pulse {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(184,115,51,0)) }
  50% { filter: drop-shadow(0 0 6px rgba(184,115,51,.55)) }
}

.navlinks { display: flex; gap: 30px; font-size: 14px; color: #9fb0bd }
.navlinks a:hover { color: var(--copper-bright) }

.btn { background: var(--copper); color: #fff; padding: 11px 20px; border-radius: 8px; font-weight: 600; font-size: 14px; transition: .2s }
.btn:hover { background: var(--copper-bright) }

.navactions { display: flex; align-items: center; gap: 16px }

.langswitch { display: inline-flex; border: 1px solid var(--steel); border-radius: 8px; overflow: hidden }
.langswitch button { background: transparent; color: #9fb0bd; border: 0; padding: 8px 11px; font-family: var(--mono); font-size: 12px; font-weight: 500; cursor: pointer; transition: .18s; letter-spacing: .5px }
.langswitch button:hover { color: var(--copper-bright) }
.langswitch button.active { background: var(--copper); color: #fff }

/* ===== Hero ===== */
.hero { padding: 90px 0 80px; position: relative; overflow: hidden }
.hero:before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(900px 400px at 75% -10%, rgba(184,115,51,.16), transparent 60%);
}

.tag { font-family: var(--mono); font-size: 13px; color: var(--copper-bright); letter-spacing: 1px; text-transform: uppercase; margin-bottom: 22px; position: relative }

h1 { font-family: var(--display); font-weight: 700; font-size: clamp(38px,6vw,68px); line-height: 1.04; letter-spacing: -2px; position: relative }
body.legal-page h1 { font-size: clamp(34px,5vw,52px); line-height: normal; letter-spacing: -1.5px; color: #fff }

h1 .c { color: var(--copper) }

.sub { font-size: 20px; color: #aebcc8; max-width: 620px; margin: 26px 0 36px; position: relative }

.cta-row { display: flex; gap: 14px; position: relative; flex-wrap: wrap }

.btn-ghost { border: 1px solid var(--steel); padding: 11px 20px; border-radius: 8px; font-weight: 600; font-size: 14px; color: var(--mist); transition: .2s }
.btn-ghost:hover { border-color: var(--copper) }

/* ===== Status strip ===== */
.strip { display: flex; gap: 34px; flex-wrap: wrap; margin-top: 54px; padding-top: 30px; border-top: 1px solid #1d2731; position: relative }
.stat .n { font-family: var(--display); font-size: 30px; font-weight: 700; color: #fff }
.stat .l { font-size: 13px; color: #8294a1 }
.stat .n .live { color: var(--green); font-size: 15px; font-family: var(--mono); vertical-align: middle; margin-left: 6px }

/* ===== Sections ===== */
section.block { padding: 78px 0 }

.eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--copper); margin-bottom: 14px }

h2 { font-family: var(--display); font-weight: 600; font-size: 34px; letter-spacing: -1px; color: #fff; margin-bottom: 14px }
body.legal-page h2 { font-size: 20px; letter-spacing: normal; margin-bottom: 12px }

.lead { color: #aebcc8; max-width: 640px; margin-bottom: 40px }

.grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px }
.grid4 { grid-template-columns: repeat(4,1fr) }

.card { background: #121a22; border: 1px solid #1d2731; border-radius: 14px; padding: 30px 26px; transition: .25s }
.card:hover { border-color: var(--copper); transform: translateY(-3px) }
.card .k { font-family: var(--mono); font-size: 13px; color: var(--copper-bright); margin-bottom: 16px }
.card h3 { font-family: var(--display); font-size: 21px; font-weight: 600; color: #fff; margin-bottom: 10px }
.card p { font-size: 15px; color: #9fb0bd }

/* ===== Split layout ===== */
.light { background: var(--mist); color: var(--ink) }
.light h2 { color: var(--ink) }
.light .eyebrow { color: var(--copper) }
.light .lead { color: #4a5560 }

.split { display: grid; grid-template-columns: 1.1fr 1fr; gap: 50px; align-items: center }
.split ul { list-style: none; margin-top: 10px }
.split li { padding: 14px 0; border-bottom: 1px solid #e3ded7; display: flex; gap: 14px; align-items: flex-start }
.split li b { font-family: var(--display) }
.chk { color: var(--copper); font-weight: 700; font-family: var(--mono) }

.terminal { background: var(--slate); border-radius: 14px; padding: 24px; font-family: var(--mono); font-size: 13.5px; color: #cbd5dd; box-shadow: 0 30px 60px -20px rgba(14,20,25,.5) }
.terminal .bar { display: flex; gap: 7px; margin-bottom: 18px }
.terminal .bar i { width: 11px; height: 11px; border-radius: 50%; background: #2c3742 }
.terminal .ln { margin: 5px 0 }
.terminal .ok { color: var(--green) }
.terminal .cp { color: var(--copper-bright) }
.terminal .mut { color: #6b7a86 }

/* ===== Team ===== */
.person { display: flex; gap: 22px; align-items: center; background: #121a22; border: 1px solid #1d2731; border-radius: 14px; padding: 28px }
.avatar { flex: 0 0 84px; width: 84px; height: 84px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--display); font-weight: 700; font-size: 28px; color: #fff; background: linear-gradient(135deg,var(--copper),var(--copper-bright)); box-shadow: 0 0 0 5px rgba(184,115,51,.14) }
.avatar-img { object-fit: cover; flex: 0 0 96px; width: 96px; height: 96px }
.pinfo h3 { font-family: var(--display); font-size: 22px; font-weight: 600; color: #fff }
.pinfo .prole { font-size: 14px; color: #9fb0bd; margin-top: 4px }

/* ===== Claim band ===== */
.claim { text-align: center; padding: 90px 0; background: linear-gradient(180deg,#0E1419,#121a22) }
.claim h2 { font-size: clamp(30px,4.5vw,48px); letter-spacing: -1.5px; line-height: 1.12; max-width: 760px; margin: 0 auto }
.claim .c { color: var(--copper) }

/* ===== Footer ===== */
footer { padding: 60px 0 40px; border-top: 1px solid #1d2731 }

.fcols { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 30px }
footer .muted { color: #7a8a96; font-size: 14px }
footer a:hover { color: var(--copper-bright) }
.copy { margin-top: 40px; font-size: 13px; color: #5d6c78; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px }

body.legal-page footer .wrap a { color: inherit }
body.legal-page footer .wrap a:hover { text-decoration: none }
body.legal-page footer p { color: #7a8a96; font-size: 14px; margin-bottom: 0 }

/* ===== Legal page content ===== */
header.h { padding: 60px 0 30px; position: relative; overflow: hidden }
header.h:before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(900px 400px at 75% -10%, rgba(184,115,51,.16), transparent 60%);
}

.note { font-size: 14px; color: #8294a1; margin-top: 10px }

main { padding-bottom: 80px }

body.legal-page section { padding: 26px 0; border-top: 1px solid #1d2731 }

body.legal-page p { color: #c3cdd5; margin-bottom: 10px; font-size: 14.5px }

body.legal-page ul { list-style: none; margin: 8px 0 }
body.legal-page ul li { padding: 5px 0 5px 18px; position: relative; color: #c3cdd5; font-size: 14.5px }
body.legal-page ul li::before { content: "–"; position: absolute; left: 0; color: var(--copper) }

.small { font-size: 13.5px; color: #9fb0bd }

.callout { background: #1a1410; border: 1px solid #3a2a1a; border-radius: 10px; padding: 16px 18px; font-size: 13.5px; color: #d8c3aa; margin-top: 8px }

/* ===== Responsive ===== */
@media(max-width:980px) { .grid4 { grid-template-columns: repeat(2,1fr) } }

@media(max-width:820px) {
  .grid, .grid4 { grid-template-columns: 1fr }
  .split { grid-template-columns: 1fr }
  .navlinks { display: none }
}