/* ============================================
   BASE — typography + atmosphere
   ============================================ */
:root {
  --navy-900: #000000;
  --navy-800: #0a0a0a;
  --sand-100: #F2EAD8;
  --gold:     #C9A961;
  --cyan:     #5BA3C7;
}

html, body { background: var(--navy-900); color: var(--sand-100); }
body { font-family: 'Geist', system-ui, sans-serif; font-feature-settings: 'ss01','ss02','cv11'; }

.font-display { font-family: 'Fraunces', Georgia, serif; font-optical-sizing: auto; font-variation-settings: "opsz" 144, "SOFT" 50; }

.noise::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.06 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay; opacity: .6;
}

.blob { position: absolute; border-radius: 9999px; filter: blur(80px); opacity: .35; pointer-events: none; }

.glass {
  background: linear-gradient(180deg, rgba(242,234,216,0.04) 0%, rgba(242,234,216,0.015) 100%);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(242,234,216,0.08);
}
.glass-strong {
  background: linear-gradient(180deg, rgba(242,234,216,0.06) 0%, rgba(242,234,216,0.025) 100%);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid rgba(242,234,216,0.10);
}

.nav-link { position: relative; }
.nav-link::after {
  content: ""; position: absolute; left: 0; bottom: -6px; height: 1px; width: 0;
  background: var(--gold); transition: width .35s ease;
}
.nav-link:hover::after, .nav-link.active::after { width: 100%; }

.btn-primary {
  background: var(--sand-100); color: #0A1628;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.btn-primary:hover {
  background: #fff; transform: translateY(-1px);
  box-shadow: 0 18px 40px -12px rgba(201,169,97,0.35);
}

.btn-ghost {
  border: 1px solid rgba(242,234,216,0.22); color: var(--sand-100);
  transition: border-color .25s ease, background .25s ease, transform .25s ease;
}
.btn-ghost:hover { border-color: var(--gold); background: rgba(201,169,97,0.06); transform: translateY(-1px); }

.eyebrow { display: inline-flex; align-items: center; gap: .6rem; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
.eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--gold); display: inline-block; }

.section-index { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .25em; color: rgba(242,234,216,0.45); }

.service-card { transition: transform .35s ease, border-color .35s ease, background .35s ease; }
.service-card:hover { transform: translateY(-4px); border-color: rgba(201,169,97,0.35); }
.service-card:hover .service-icon { color: var(--gold); }
.service-icon { transition: color .35s ease; color: var(--cyan); }

.filter-pill {
  transition: background .25s, color .25s, border-color .25s;
  border: 1px solid rgba(242,234,216,0.14);
}
.filter-pill.active { background: var(--sand-100); color: #0A1628; border-color: var(--sand-100); }

.portfolio-card { transition: transform .4s ease; }
.portfolio-card:hover { transform: translateY(-4px); }
.portfolio-card:hover .portfolio-thumb { transform: scale(1.03); }
.portfolio-thumb { transition: transform .6s cubic-bezier(.2,.7,.2,1); }

.process-line {
  background-image: linear-gradient(to right, rgba(201,169,97,0.4) 50%, transparent 0%);
  background-size: 10px 1px; background-repeat: repeat-x;
}

@keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.marquee-track { animation: marquee 38s linear infinite; }

@keyframes float-slow { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes float-med  { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.float-slow { animation: float-slow 7s ease-in-out infinite; }
.float-med  { animation: float-med 5s ease-in-out infinite; }

@keyframes wave { 0%,100% { transform: scaleY(0.4); } 50% { transform: scaleY(1); } }
.wave-bar { transform-origin: bottom; animation: wave 1.6s ease-in-out infinite; }

.reveal { opacity: 0; transform: translateY(20px); transition: opacity .8s ease, transform .8s ease; }
.reveal.in { opacity: 1; transform: none; }

.input {
  background: rgba(242,234,216,0.04);
  border: 1px solid rgba(242,234,216,0.12);
  color: var(--sand-100);
  transition: border-color .25s, background .25s;
}
.input::placeholder { color: rgba(242,234,216,0.38); }
.input:focus { outline: none; border-color: var(--gold); background: rgba(242,234,216,0.06); }

select.input {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%23C9A961' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; }

::selection { background: var(--gold); color: #0A1628; }