/* ====== RCC AI Holdings — base styles ====== */

:root {
  --cream: #EFE9DD;
  --cream-2: #E5DDCC;
  --cream-3: #D9CFB8;
  --ink: #0E0E0C;
  --ink-2: #1A1916;
  --ink-3: #2A2723;
  --rule: #1F1B17;
  --rule-soft: rgba(14, 14, 12, 0.12);
  --rule-softer: rgba(14, 14, 12, 0.06);
  --coral: #E8553A;
  --coral-deep: #C7421F;
  --coral-tint: #F2A78F;
  --moss: #4A5A3C;
  --gold: #B58A3E;
  --paper: #F5F0E5;
  --paper-warm: #EAE0CC;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--cream);
  color: var(--ink);
  font-family: 'Instrument Sans', 'Inter Tight', -apple-system, sans-serif;
  font-feature-settings: "ss01", "ss02", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.serif { font-family: 'Instrument Serif', 'Cormorant Garamond', Georgia, serif; font-weight: 400; }
.serif-italic { font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-weight: 400; }
.mono { font-family: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace; font-feature-settings: "ss02", "cv11"; }
.sans { font-family: 'Instrument Sans', 'Inter Tight', sans-serif; }

/* Eyebrow / labels */
.eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.55;
}
.eyebrow .dot {
  display: inline-block;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--coral);
  margin-right: 8px;
  transform: translateY(-1px);
  box-shadow: 0 0 0 3px rgba(232, 85, 58, 0.18);
}

.hl {
  color: var(--coral);
  font-style: italic;
  font-family: 'Instrument Serif', Georgia, serif;
  font-weight: 400;
  letter-spacing: -0.005em;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  background: var(--ink);
  color: var(--cream);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  border: 1px solid var(--ink);
  cursor: pointer;
  transition: transform 200ms cubic-bezier(.2,.7,.2,1), background 200ms;
  text-decoration: none;
}
.btn:hover { background: var(--coral); border-color: var(--coral); color: var(--cream); }
.btn:active { transform: scale(0.98); }
.btn .arr { transition: transform 220ms cubic-bezier(.2,.7,.2,1); }
.btn:hover .arr { transform: translateX(4px); }

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--rule);
}
.btn-ghost:hover { background: var(--ink); color: var(--cream); }

/* Rules */
.rule { height: 1px; background: var(--rule-soft); width: 100%; }
.rule-strong { height: 1px; background: var(--ink); width: 100%; opacity: 0.85; }

/* Number / index */
.idx {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--ink);
  opacity: 0.5;
}

/* Tag pill */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border: 1px solid var(--rule-soft);
  border-radius: 999px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  background: transparent;
}

/* Background variants */
.bg-cream { background: var(--cream); }
.bg-paper { background: var(--paper); }
.bg-warm { background: var(--paper-warm); }
.bg-ink { background: var(--ink); color: var(--cream); }

/* Grain texture overlay (very subtle) */
.grain { position: relative; }
.grain::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0.04;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.6 0'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>");
}

/* Reveal-on-scroll */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 800ms cubic-bezier(.2,.7,.2,1), transform 800ms cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal-stagger > * { opacity: 0; transform: translateY(14px); transition: opacity 700ms cubic-bezier(.2,.7,.2,1), transform 700ms cubic-bezier(.2,.7,.2,1); }
.reveal-stagger.in > *:nth-child(1) { transition-delay: 0ms; opacity: 1; transform: none; }
.reveal-stagger.in > *:nth-child(2) { transition-delay: 80ms; opacity: 1; transform: none; }
.reveal-stagger.in > *:nth-child(3) { transition-delay: 160ms; opacity: 1; transform: none; }
.reveal-stagger.in > *:nth-child(4) { transition-delay: 240ms; opacity: 1; transform: none; }
.reveal-stagger.in > *:nth-child(5) { transition-delay: 320ms; opacity: 1; transform: none; }
.reveal-stagger.in > *:nth-child(6) { transition-delay: 400ms; opacity: 1; transform: none; }
.reveal-stagger.in > *:nth-child(7) { transition-delay: 480ms; opacity: 1; transform: none; }

/* Marquee */
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.marquee-track { display: flex; gap: 60px; width: max-content; animation: marquee 38s linear infinite; }

/* Float */
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* Marker / underline draw */
.underline-coral {
  background: linear-gradient(transparent 62%, rgba(232, 85, 58, 0.32) 62%, rgba(232, 85, 58, 0.32) 92%, transparent 92%);
  padding: 0 2px;
}

/* Selection */
::selection { background: var(--coral); color: var(--cream); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}