/* ═══════════════════════════════════════════════
   PROJECT MODE - Shared Design System
   Afrofuturist · Rich & Deep · Accessible
   ═══════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,700;0,9..144,900;1,9..144,300;1,9..144,700&family=Outfit:wght@300;400;500;600&display=swap');

/* ── TOKENS ───────────────────────────────────── */
:root {
  --espresso:          #1a1108;
  --bark:              #2c1f0e;
  --umber:             #3d2b14;
  --sand:              #c4a882;
  --cream:             #f0e8d8;
  --plum:              #7b3f8c;
  --plum-light:        #a855c7;
  --plum-glow:         rgba(123,63,140,0.25);
  --emerald:           #2d8c5e;
  --emerald-light:     #3db87a;
  --emerald-glow:      rgba(45,140,94,0.2);
  --gold:              #d4a847;
  --muted:             #9a8570;
  --border:            rgba(196,168,130,0.12);

  /* World colors */
  --job-ops:           #c75c2a;
  --job-ops-glow:      rgba(199,92,42,0.2);
  --career-moves:      #a855c7;
  --career-moves-glow: rgba(168,85,199,0.2);
  --edu-pivot:         #3db87a;
  --edu-pivot-glow:    rgba(61,184,122,0.2);
  --pm-toolkit:        #d4a847;
  --pm-toolkit-glow:   rgba(212,168,71,0.2);
}

/* ── RESET ────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* ── SCROLLBAR ────────────────────────────────── */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--bark); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--plum) 0%, var(--emerald) 100%);
  border-radius: 10px;
  border: 2px solid var(--bark);
}

/* ── BASE ─────────────────────────────────────── */
body {
  background: var(--espresso);
  color: var(--cream);
  font-family: 'Outfit', sans-serif;
  font-weight: 300;
  font-size: 15px;
  line-height: 1.6;
  overflow-x: hidden;
  cursor: none;
}

/* ── GRAIN OVERLAY ────────────────────────────── */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: 900;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  opacity: 0.35;
}

/* ── GRID OVERLAY ─────────────────────────────── */
body::after {
  content: '';
  position: fixed; inset: 0; z-index: 1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(196,168,130,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(196,168,130,0.03) 1px, transparent 1px);
  background-size: 48px 48px;
}

/* ── CURSOR ───────────────────────────────────── */
.cursor {
  position: fixed; width: 16px; height: 16px;
  border-radius: 50%; background: var(--plum-light);
  mix-blend-mode: screen; pointer-events: none;
  z-index: 9999; transform: translate(-50%,-50%);
  transition: transform 0.12s ease;
}
.cursor-ring {
  position: fixed; width: 36px; height: 36px;
  border-radius: 50%; border: 1.5px solid var(--emerald-light);
  pointer-events: none; z-index: 9998;
  transform: translate(-50%,-50%); opacity: 0.6;
  transition: width 0.25s, height 0.25s;
}

/* ── AMBIENT ORBS ─────────────────────────────── */
.orb {
  position: fixed; border-radius: 50%;
  pointer-events: none; z-index: 2;
  filter: blur(80px);
  animation: orb-drift 20s ease-in-out infinite alternate;
}
.orb-1 { width:400px;height:400px;background:var(--plum-glow);top:-100px;right:-100px; }
.orb-2 { width:300px;height:300px;background:var(--emerald-glow);bottom:10%;left:-50px;animation-delay:-7s;animation-duration:25s; }
.orb-3 { width:200px;height:200px;background:rgba(212,168,71,0.08);top:40%;right:20%;animation-delay:-14s;animation-duration:18s; }
@keyframes orb-drift {
  from { transform: translate(0,0) scale(1); }
  to   { transform: translate(30px,40px) scale(1.1); }
}

/* ── NAV ──────────────────────────────────────── */
nav {
  position: sticky; top: 0; z-index: 500;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.3rem 3.5rem;
  background: rgba(26,17,8,0.9);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
}
.nav-logo {
  font-family: 'Fraunces', serif; font-weight: 900;
  font-size: 1.2rem; color: var(--cream);
  text-decoration: none; display: flex; align-items: center; gap: 0.5rem;
}
.nav-flower {
  display: inline-block; color: var(--plum-light);
  animation: spin-slow 12s linear infinite;
}
@keyframes spin-slow { to { transform: rotate(360deg); } }

.nav-links { display: flex; gap: 2.5rem; align-items: center; }
.nav-links a {
  font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted); text-decoration: none; transition: color 0.2s;
  font-weight: 400;
}
.nav-links a:hover,
.nav-links a.active { color: var(--cream); }
.nav-links a.active { border-bottom: 1px solid var(--plum-light); padding-bottom: 2px; }

.nav-cta {
  background: var(--plum); color: var(--cream) !important;
  padding: 0.6rem 1.5rem; border: 2px solid var(--plum);
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  font-weight: 500 !important;
}
.nav-cta:hover {
  background: transparent !important;
  color: var(--plum-light) !important;
  border-color: var(--plum-light) !important;
}

/* ── FOOTER ───────────────────────────────────── */
footer {
  padding: 2rem 3.5rem;
  border-top: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: center;
  position: relative; z-index: 10;
  flex-wrap: wrap; gap: 1rem;
}
.footer-logo {
  font-family: 'Fraunces', serif; font-weight: 700; font-size: 1rem;
  color: var(--cream); text-decoration: none;
  display: flex; align-items: center; gap: 0.4rem;
}
.footer-logo span {
  color: var(--plum-light);
  animation: spin-slow 10s linear infinite;
  display: inline-block;
}
.footer-links { display: flex; gap: 2rem; flex-wrap: wrap; }
.footer-links a {
  font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted); text-decoration: none; transition: color 0.2s;
}
.footer-links a:hover { color: var(--cream); }
.footer-copy { font-size: 0.72rem; color: var(--muted); opacity: 0.6; }

/* ── SECTION UTILITIES ────────────────────────── */
.section-label {
  font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--plum-light); font-weight: 500;
  display: flex; align-items: center; gap: 0.8rem; margin-bottom: 1.2rem;
}
.section-label::after {
  content: ''; flex: 1; max-width: 3rem; height: 1px;
  background: linear-gradient(90deg, rgba(168,85,199,0.5), transparent);
}
.section-title {
  font-family: 'Fraunces', serif;
  font-size: clamp(2rem, 3.5vw, 3.5rem);
  font-weight: 700; line-height: 1.05;
}
.section-title em { font-style: italic; font-weight: 300; color: var(--plum-light); }

/* ── BUTTONS ──────────────────────────────────── */
.btn-plum {
  background: var(--plum); color: var(--cream);
  padding: 1rem 2.2rem; font-family: 'Outfit', sans-serif;
  font-size: 0.85rem; font-weight: 500; letter-spacing: 0.08em;
  text-transform: uppercase; text-decoration: none;
  display: inline-block; border: 2px solid var(--plum);
  transition: background 0.25s, color 0.25s, border-color 0.25s, transform 0.2s;
}
.btn-plum:hover {
  background: transparent; color: var(--plum-light);
  border-color: var(--plum-light); transform: translateY(-2px);
}
.btn-emerald {
  background: transparent; color: var(--emerald-light);
  padding: 1rem 2.2rem; font-family: 'Outfit', sans-serif;
  font-size: 0.85rem; font-weight: 500; letter-spacing: 0.08em;
  text-transform: uppercase; text-decoration: none;
  display: inline-flex; align-items: center; gap: 0.6rem;
  border: 2px solid var(--emerald);
  transition: background 0.25s, color 0.25s;
}
.btn-emerald:hover { background: var(--emerald); color: var(--espresso); }

/* ── ANIMATIONS ───────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-up { animation: fadeUp 0.6s ease both; }
.fade-up-1 { animation: fadeUp 0.6s ease 0.1s both; }
.fade-up-2 { animation: fadeUp 0.6s ease 0.2s both; }
.fade-up-3 { animation: fadeUp 0.6s ease 0.3s both; }

/* ── ACCESSIBILITY ────────────────────────────── */
a:focus-visible, button:focus-visible,
input:focus-visible, textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--plum-light);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .orb, .nav-flower, .footer-logo span { animation: none; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ── RESPONSIVE ───────────────────────────────── */
@media (max-width: 768px) {
  nav { padding: 1rem 1.5rem; }
  .nav-links { gap: 1.2rem; }
  .nav-links a { font-size: 0.72rem; }
  footer { padding: 1.5rem; flex-direction: column; align-items: flex-start; gap: 1.2rem; }
}
@media (max-width: 480px) {
  .nav-links .nav-hide-mobile { display: none; }
}