/* ================================================================
 * CAPPES AI — Base Styles (Creator + Hero · Warm Dark)
 * Google Fonts loaded via <link> in HTML head
 * ================================================================ */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: 'DM Sans', 'Segoe UI', system-ui, sans-serif;
  font-family: var(--font-body);
  font-size: 1rem;
  font-size: var(--text-base);
  line-height: 1.6;
  line-height: var(--leading-normal);
  color: #FAF5F0;
  color: var(--color-text-primary);
  background-color: #14100C;
  background: var(--color-bg-deep);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: 'Outfit', 'Segoe UI', system-ui, sans-serif;
  font-family: var(--font-display);
  line-height: 1.1;
  line-height: var(--leading-tight);
  color: #FAF5F0;
  color: var(--color-text-primary);
}
h1 { font-size: clamp(2.2rem, 6vw, 3.75rem); font-weight: 800; letter-spacing: -0.04em; }
h2 { font-size: clamp(1.5rem, 3.5vw, 2rem); font-weight: 700; letter-spacing: -0.02em; }
h3 { font-size: 1.25rem; font-weight: 600; }

p { margin-bottom: 1rem; color: #B8A898; color: var(--color-text-secondary); }
strong { font-weight: 600; color: #FAF5F0; color: var(--color-text-primary); }

a { color: #F5A623; color: var(--color-primary-300); text-decoration: none; transition: color 150ms cubic-bezier(0.4,0,0.2,1); }
a:hover { color: #FBBF24; color: var(--color-accent-400); }

ul, ol { padding-left: 1.5rem; margin-bottom: 1rem; }
li { margin-bottom: 0.5rem; color: #B8A898; color: var(--color-text-secondary); }

img { max-width: 100%; height: auto; display: block; }

::selection { background: rgba(236,136,18,0.30); color: #FAF5F0; }
:focus-visible { outline: 2px solid #ec8812; outline-offset: 2px; border-radius: 4px; }

.skip-nav {
  position: absolute; top: -100%; left: 1rem;
  background: #ec8812; color: #0C0A08;
  padding: 0.5rem 1rem; border-radius: 0 0 8px 8px;
  z-index: 10000; font-weight: 600; font-size: 0.875rem;
}
.skip-nav:focus { top: 0; color: #0C0A08; }

.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.container { width: 100%; max-width: 1100px; margin: 0 auto; padding: 0 clamp(1.25rem, 5vw, 2.5rem); padding: 0 var(--section-padding-x); }
.container--narrow { max-width: 860px; }
.text-gradient { background: linear-gradient(135deg, #FBBF24 0%, #ec8812 50%, #fb923c 100%); background: var(--gradient-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }