:root {
  --color-dark-bg: #0E2440;
  --color-light-bg: #ffffff;
  --color-red: #D21F3C;
  --color-black: #0B0B0C;
  --color-white: #ffffff;
  --color-accent: #f8b400;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  line-height: 1.6;
  background: var(--color-light-bg);
  color: var(--color-black);
}
a { color: inherit; }

/* Header */
.header { position: sticky; top: 0; z-index: 100; padding: .75rem 1rem; transition: background .2s ease; }
.header.on-dark { background: var(--color-dark-bg); }
.header.on-light { background: var(--color-light-bg); border-bottom: 1px solid rgba(0,0,0,.1); }

.container { max-width: 1100px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; white-space: nowrap; }
.brand-text { font-weight: 800; letter-spacing: .03em; color: var(--color-white); }
.header.on-light .brand-text { color: var(--color-black); }

.logo { display: none; vertical-align: middle; }
.header.on-dark .logo--on-dark { display: inline-block; }
.header.on-light .logo--on-light { display: inline-block; }

/* Nav */
.nav { display: flex; align-items: center; gap: .5rem; }
.nav-links { display: none; position: fixed; top: 56px; right: 0; width: 100%; max-width: 320px; height: calc(100vh - 56px); background: var(--color-light-bg); box-shadow: -8px 0 24px rgba(0,0,0,.15); padding: 1rem; }
.header.on-dark .nav-links { background: #122c52; color: var(--color-white); }
.nav-links.open { display: block; }
.nav-links a { display: block; padding: .75rem 0; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.08); }
.header.on-light .nav-links a { border-bottom-color: rgba(0,0,0,.08); }

/* Buttons */
.btn { border: 1px solid rgba(255,255,255,.25); background: transparent; color: var(--color-white); padding: .5rem .9rem; border-radius: .6rem; font-size: .95rem; cursor: pointer; }
.header.on-light .btn { color: var(--color-black); border-color: rgba(0,0,0,.25); }
.btn-pill { border-radius: 1.25rem; }

/* Hero */
.hero { padding: 4rem 1.5rem; text-align: center; background: var(--color-dark-bg); color: var(--color-white); }
.hero h1 { font-size: 2rem; margin: 0.5rem 0; }
.hero p { max-width: 680px; margin: 0.5rem auto 1.25rem; }

.btn-primary { background: var(--color-accent); color: #000; padding: .8rem 1.4rem; border: none; border-radius: .5rem; font-weight: 600; text-decoration: none; display: inline-block; }

/* Sections */
section { max-width: 900px; margin: 2rem auto; padding: 0 1rem; }
section h2 { font-size: 1.6rem; margin-bottom: 1rem; border-left: 5px solid var(--color-red); padding-left: .6rem; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap: 1rem; }
.card { border: 1px solid rgba(0,0,0,.08); border-radius: .8rem; padding: 1rem; background: #fff; }
.tag { display: inline-block; padding: .2rem .5rem; border-radius: .4rem; background: rgba(210,31,60,.1); color: #7a0d1d; font-size: .8rem; margin-bottom: .4rem; }

footer { text-align: center; padding: 1.5rem; font-size: .85rem; background: #f2f2f2; color: #555; margin-top: 2rem; }

/* Desktop nav */
@media (min-width: 820px) {
  .nav-links { position: static; display: flex; height: auto; width: auto; box-shadow: none; background: transparent; padding: 0; gap: .75rem; }
  .nav-links a { border: none; padding: 0; }
}