/* ============================================
   DSO Dark Theme — theme.css
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root {
  --dk: #060810;
  --dk2: #0b0d1f;
  --dk3: #11143a;
  --or: #FF8800;
  --or2: #e67a00;
  --wh: #ffffff;
  --wh8: rgba(255,255,255,.08);
  --wh12: rgba(255,255,255,.12);
  --tx: #c9cdd6;
  --tx2: #787e8f;
  --rd: 12px;
  --tr: .3s ease;
  --font-heading: 'Oswald', 'Arial Black', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --hdr-h: 96px; /* util-bar ~32px + nav ~64px */
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--tx);
  background-color: var(--dk);
  margin: 0;
  padding: 0;
  /* NO padding-top here — hero is designed to slide under the transparent fixed header */
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--or); text-decoration: none; transition: color var(--tr); }
a:hover { color: var(--or2); }
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 700; color: #fff; line-height: 1.2; margin: 0 0 1rem; }
h1 { font-size: clamp(2.2rem, 5vw, 4rem); }
h2 { font-size: clamp(1.8rem, 3.5vw, 2.8rem); }
h3 { font-size: clamp(1.3rem, 2.5vw, 1.8rem); }
p { margin: 0 0 1rem; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

/* ====================================
   BUTTONS
   ==================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-body); font-weight: 700; font-size: .9375rem;
  letter-spacing: .03em; padding: 14px 28px; border-radius: 8px;
  border: 2px solid transparent; cursor: pointer; text-decoration: none;
  transition: background var(--tr), color var(--tr), border-color var(--tr), transform var(--tr);
  white-space: nowrap; line-height: 1.4;
}
.btn-orange { background: var(--or); color: #000; border-color: var(--or); }
.btn-orange:hover { background: var(--or2); border-color: var(--or2); color: #000; transform: translateY(-2px); }
.btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,.1); }

/* ====================================
   HEADER — NO RULES HERE
   Header is 100% controlled by the template part inline CSS.
   Adding any .site-header or .dso-header-wrap rules here will conflict.
   ==================================== */

/* ====================================
   FOOTER
   ==================================== */
.site-footer { background: var(--dk2); border-top: 1px solid var(--wh12); }
.footer-main { padding: 64px 0 40px; }
.footer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; }
.footer-col h4 {
  font-family: var(--font-heading); font-size: 1rem; font-weight: 700;
  color: #fff; text-transform: uppercase; letter-spacing: .06em;
  margin: 0 0 16px; padding-bottom: 10px; border-bottom: 2px solid var(--or);
}
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin-bottom: 8px; }
.footer-col a { color: var(--tx2); font-size: .9rem; transition: color var(--tr); }
.footer-col a:hover { color: var(--or); }
.footer-col li:not(:has(a)) { color: var(--tx2); font-size: .9rem; }
.footer-col p { color: var(--tx2); font-size: .9rem; line-height: 1.6; margin: 0 0 8px; }
.footer-col p a { color: var(--or); font-weight: 600; }
.footer-bottom { border-top: 1px solid var(--wh8); padding: 20px 0; text-align: center; }
.footer-bottom p { color: var(--tx2); font-size: .82rem; margin: 0; }

@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 600px) { .footer-grid { grid-template-columns: 1fr; } }