/* ── HumanoidRR Design System ───────────────────────────────────────────── */
/* Matches humanoidrr.com style.css exactly                                  */

@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@300;400;500;600&family=Barlow+Condensed:wght@400;600;700;800&display=swap');

:root {
  --gold:             #C9A84C;
  --gold-light:       #E8C97A;
  --gold-dark:        #9A7A2E;
  --black:            #0B1A3E;
  --dark:             #0D2050;
  --dark2:            #102460;
  --dark3:            #153070;
  --silver:           #B8BCC4;
  --white:            #F5F5F5;
  --text:             #CCCCCC;
  --enterprise:       #1A6B9A;
  --enterprise-light: #2189C4;
  --consumer:         #C9A84C;
  --success:          #4CAF50;
  --danger:           #E05252;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family: 'Barlow', sans-serif;
  background: var(--black);
  color: var(--text);
  overflow-x: hidden;
  min-height: 100vh;
}

/* ── Utilities ──────────────────────────────────────────────────────────── */
.container { max-width: 1200px; margin: 0 auto; }

.section-label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 12px;
}
.section-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 800;
  color: var(--white);
  text-transform: uppercase;
  letter-spacing: 2px;
  line-height: 1.1;
  margin-bottom: 16px;
}

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn-outline {
  padding: 10px 24px;
  border: 1px solid var(--gold);
  color: var(--gold);
  background: transparent;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s;
  display: inline-block;
}
.btn-outline:hover { background: var(--gold); color: var(--black); }

.btn-solid {
  padding: 10px 24px;
  background: var(--enterprise);
  color: white;
  border: 1px solid var(--enterprise);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s;
  display: inline-block;
}
.btn-solid:hover { background: var(--enterprise-light); }

.btn-gold {
  padding: 14px 32px;
  background: var(--gold);
  color: var(--black);
  border: none;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 15px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s;
  display: inline-block;
}
.btn-gold:hover { background: var(--gold-light); }
.btn-gold:disabled { background: var(--dark3); color: var(--silver); cursor: not-allowed; }

/* ── Forms ──────────────────────────────────────────────────────────────── */
.form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.form-group label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--silver);
}
.form-group input, .form-group select, .form-group textarea {
  background: var(--dark2);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--white);
  padding: 12px 16px;
  font-family: 'Barlow', sans-serif;
  font-size: 15px;
  outline: none;
  transition: border-color 0.2s;
  width: 100%;
}
.form-group input:focus, .form-group select:focus { border-color: var(--gold); }
.form-group input.error { border-color: var(--danger); }
.form-error {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--danger);
  margin-top: 4px;
  display: none;
}
.form-error.show { display: block; }

/* ── Sidebar block ──────────────────────────────────────────────────────── */
.sidebar-block {
  background: var(--dark2);
  padding: 24px;
  margin-bottom: 20px;
  border-left: 3px solid var(--gold);
}
.sidebar-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 12px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 16px;
}

/* ── Callout / info-notice ──────────────────────────────────────────────── */
.info-notice {
  background: rgba(201,168,76,0.06);
  border-left: 3px solid var(--gold);
  padding: 18px 22px;
  margin: 24px 0;
}
.info-notice p { font-size: 14px; color: var(--silver); line-height: 1.7; margin-bottom: 0; }
.info-notice.blue {
  background: rgba(26,107,154,0.08);
  border-left-color: var(--enterprise-light);
}
.info-notice.warn {
  background: rgba(240,165,0,0.08);
  border-left-color: #f0a500;
}

/* ── Animations ─────────────────────────────────────────────────────────── */
@keyframes fadeInDown { from { opacity:0; transform:translateY(-20px); } to { opacity:1; transform:translateY(0); } }
@keyframes fadeInUp   { from { opacity:0; transform:translateY(20px);  } to { opacity:1; transform:translateY(0); } }
@keyframes fadeIn     { from { opacity:0; }                              to { opacity:1; } }