/* ============================================================
   GoGuru — shared site chrome (nav, footer, buttons, type)
   Used by /case, /about, /apply. Homepage keeps its own inline.
   ============================================================ */
:root {
  --wf-accent: var(--gg-accent);
  --wf-accent-fg: #FFFFFF;
  --wf-accent-hover: var(--gg-accent-hover);
  --wf-ph: rgba(255,255,255,0.04);
  --wf-ph-ink: rgba(255,255,255,0.16);
}
[data-theme="light"] {
  --wf-ph: rgba(10,10,10,0.04);
  --wf-ph-ink: rgba(10,10,10,0.16);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { overflow-x: hidden; }

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
::selection { background: var(--gg-fg); color: var(--gg-bg); }

/* Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }

/* ─── Shell ─── */
.wf-page { min-height: 100vh; }
.wf-container { max-width: 1200px; margin: 0 auto; padding: 0 var(--gg-space-6); }
@media (max-width: 720px) { .wf-container { padding: 0 var(--gg-space-5); } }

/* ─── Nav ─── */
.wf-nav {
  position: fixed; top: 0; left: 0; right: 0; height: 64px;
  z-index: 50; display: flex; align-items: center;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background var(--gg-duration-base) var(--gg-ease),
              backdrop-filter var(--gg-duration-base) var(--gg-ease),
              border-color var(--gg-duration-base) var(--gg-ease);
}
.wf-nav.is-scrolled {
  background: color-mix(in srgb, var(--gg-bg) 70%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  border-bottom-color: var(--gg-border);
}
.wf-nav-inner { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.wf-logo {
  font-family: var(--gg-font-display); font-weight: 500;
  font-size: var(--gg-text-md); letter-spacing: var(--gg-tracking-snug);
  color: var(--gg-fg);
  display: inline-flex; align-items: center; gap: 8px;
}
.wf-logo-mark { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; position: relative; }
.wf-logo-mark img { width: 100%; height: 100%; object-fit: contain; }
.wf-logo-mark .light-mark { display: none; }
.wf-logo-mark .dark-mark { display: block; }
[data-theme="light"] .wf-logo-mark .light-mark { display: block; }
[data-theme="light"] .wf-logo-mark .dark-mark { display: none; }

.wf-nav-links { display: flex; align-items: center; gap: var(--gg-space-6); }
.wf-nav-link {
  display: inline-block;
  height: 1.5em;
  line-height: 1.5;
  overflow: hidden;
  vertical-align: bottom;
  font-size: var(--gg-text-sm); color: var(--gg-fg-2);
  transition: color var(--gg-duration-fast) var(--gg-ease);
}
.wf-nav-link .roll {
  display: block;
  transition: transform 0.5s cubic-bezier(0.7, 0, 0.2, 1);
}
.wf-nav-link .roll > span {
  display: block;
  line-height: 1.5;
}
.wf-nav-link .roll-top    { color: var(--gg-fg-2); }
.wf-nav-link .roll-bottom { color: var(--gg-accent); }
.wf-nav-link:hover .roll { transform: translateY(-1.5em); }
.wf-nav-link.is-active { color: var(--gg-fg); }
.wf-nav-link.is-active .roll-top { color: var(--gg-fg); }
@media (prefers-reduced-motion: reduce) {
  .wf-nav-link .roll { transition: none; }
  .wf-nav-link:hover .roll { transform: none; }
}

.wf-theme-toggle {
  width: 32px; height: 32px; border-radius: var(--gg-radius-sm);
  border: 1px solid var(--gg-border); display: grid; place-items: center;
  color: var(--gg-fg-2);
  transition: color var(--gg-duration-fast) var(--gg-ease),
              border-color var(--gg-duration-fast) var(--gg-ease);
}
.wf-theme-toggle:hover { color: var(--gg-fg); border-color: var(--gg-border-strong); }

.wf-nav-toggle {
  display: none; width: 32px; height: 32px; border-radius: var(--gg-radius-sm);
  border: 1px solid var(--gg-border); background: transparent; color: var(--gg-fg-2);
  align-items: center; justify-content: center;
  transition: color var(--gg-duration-fast) var(--gg-ease), border-color var(--gg-duration-fast) var(--gg-ease);
}
.wf-nav-toggle:hover { color: var(--gg-fg); border-color: var(--gg-border-strong); }
.wf-nav-toggle .lucide { width: 18px; height: 18px; }
.wf-nav-mobile {
  position: fixed; top: 64px; left: 0; right: 0; z-index: 49;
  display: flex; flex-direction: column;
  padding: var(--gg-space-3) var(--gg-space-5) var(--gg-space-5);
  background: color-mix(in srgb, var(--gg-bg) 92%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%);
  border-bottom: 1px solid var(--gg-border);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity var(--gg-duration-base) var(--gg-ease), transform var(--gg-duration-base) var(--gg-ease), visibility 0s linear var(--gg-duration-base);
}
.wf-nav-mobile.is-open {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity var(--gg-duration-base) var(--gg-ease), transform var(--gg-duration-base) var(--gg-ease);
}
.wf-nav-mobile-link {
  padding: 14px 4px; font-size: var(--gg-text-md); color: var(--gg-fg-2);
  border-bottom: 1px solid var(--gg-border);
  transition: color var(--gg-duration-fast) var(--gg-ease);
}
.wf-nav-mobile-link:last-child { border-bottom: 0; }
.wf-nav-mobile-link:hover { color: var(--gg-fg); }
@media (min-width: 541px) { .wf-nav-mobile { display: none; } }
.wf-theme-toggle .lucide { width: 16px; height: 16px; }
[data-theme="dark"] .wf-theme-toggle .sun { display: block; }
[data-theme="dark"] .wf-theme-toggle .moon { display: none; }
[data-theme="light"] .wf-theme-toggle .sun { display: none; }
[data-theme="light"] .wf-theme-toggle .moon { display: block; }

/* ─── Buttons ─── */
.wf-btn {
  display: inline-flex; align-items: center; gap: var(--gg-space-2);
  padding: 12px 18px; font-size: var(--gg-text-sm); font-weight: 500;
  border-radius: var(--gg-radius-md);
  transition: background var(--gg-duration-fast) var(--gg-ease),
              border-color var(--gg-duration-fast) var(--gg-ease),
              transform var(--gg-duration-fast) var(--gg-ease),
              box-shadow var(--gg-duration-fast) var(--gg-ease);
}
.wf-btn .lucide { width: 16px; height: 16px; }
.wf-btn-primary {
  background: var(--wf-accent); color: var(--wf-accent-fg);
  border: 1px solid var(--wf-accent);
  box-shadow: 0 1px 0 0 rgba(255,255,255,0.12) inset,
              0 8px 24px -8px rgba(155,48,255,0.5);
}
.wf-btn-primary:hover {
  background: var(--wf-accent-hover); border-color: var(--wf-accent-hover);
  box-shadow: 0 1px 0 0 rgba(255,255,255,0.14) inset,
              0 10px 32px -8px rgba(155,48,255,0.65);
}
.wf-btn-primary:active { transform: translateY(1px); }
.wf-btn-ghost { background: transparent; color: var(--gg-fg); border: 1px solid var(--gg-border); }
.wf-btn-ghost:hover { border-color: var(--gg-border-strong); }
.wf-btn-lg { padding: 16px 24px; font-size: var(--gg-text-base); border-radius: var(--gg-radius-lg); }

/* ─── Type helpers ─── */
.wf-h1 {
  font-family: var(--gg-font-display); font-weight: 500;
  font-size: clamp(40px, 7vw, 88px); line-height: 1; letter-spacing: var(--gg-tracking-tight);
  margin: 0; color: var(--gg-fg);
}
.wf-h2 {
  font-family: var(--gg-font-display); font-weight: 500;
  font-size: clamp(32px, 4.5vw, 56px); line-height: 1.04; letter-spacing: var(--gg-tracking-tight);
  margin: 0; color: var(--gg-fg);
}
.wf-h3 {
  font-family: var(--gg-font-display); font-weight: 500;
  font-size: clamp(22px, 2.2vw, 28px); line-height: 1.15; letter-spacing: var(--gg-tracking-snug);
  margin: 0; color: var(--gg-fg);
}
.wf-eyebrow {
  font-family: var(--gg-font-mono); font-size: 12px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--gg-fg-3);
  display: inline-flex; align-items: center; gap: 8px;
}
.wf-eyebrow::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 999px;
  background: var(--gg-accent);
  display: inline-block;
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--gg-accent) 55%, transparent);
  animation: wf-eyebrow-pulse 2.6s ease-in-out infinite;
}
@keyframes wf-eyebrow-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 color-mix(in srgb, var(--gg-accent) 50%, transparent); }
  50%      { transform: scale(1.15); box-shadow: 0 0 0 6px color-mix(in srgb, var(--gg-accent) 0%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .wf-eyebrow::before { animation: none; }
}

/* ─── Page header (subnav, for inner pages) ─── */
.wf-page-header { padding: 160px 0 var(--gg-space-8) 0; position: relative; }
.wf-page-header-inner { display: flex; flex-direction: column; gap: var(--gg-space-5); max-width: 880px; }
.wf-back {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--gg-font-mono); font-size: 12px; letter-spacing: 0.05em;
  color: var(--gg-fg-3); transition: color var(--gg-duration-fast) var(--gg-ease);
  align-self: flex-start;
}
.wf-back:hover { color: var(--gg-fg); }
.wf-back .lucide { width: 14px; height: 14px; }

/* ─── Footer ─── */
.wf-section { padding: var(--gg-space-10) 0; position: relative; }
@media (max-width: 720px) { .wf-section { padding: var(--gg-space-9) 0; } }

.wf-footer {
  border-top: 1px solid var(--gg-border);
  padding: var(--gg-space-6) 0;
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--gg-font-mono); font-size: 12px;
  color: var(--gg-fg-3); letter-spacing: 0.04em;
}

/* ─── Mobile (≤540px) — global tightening ─── */
@media (max-width: 540px) {
  /* Nav: drop secondary links, compact the Apply button */
  .wf-nav-links { gap: var(--gg-space-3); }
  .wf-nav-links .wf-nav-link { display: none; }
  .wf-nav-toggle { display: inline-flex; }
  .wf-nav-links .wf-btn { padding: 9px 14px; font-size: 13px; }
  .wf-nav-links .wf-btn .lucide { display: none; }
  .wf-nav-links .wf-btn-primary {
    /* shorten label to "Apply" via overflow trick */
  }
  .wf-logo { font-size: 14px; gap: 6px; }
  .wf-logo-mark { width: 22px; height: 22px; }

  /* Footer: stack and gap */
  .wf-footer { flex-direction: column; gap: var(--gg-space-3); text-align: center; }

  /* Stamp out of the way on mobile (sits above modal CTA otherwise) */
  .wf-stamp { display: none; }

  /* Buttons get a bit more breathing room */
  .wf-btn-lg { padding: 14px 20px; font-size: 14px; }
}

/* ─── Stamp ─── */
.wf-stamp {
  position: fixed; bottom: 16px; left: 16px; z-index: 60;
  font-family: var(--gg-font-mono); font-size: 10px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--gg-fg-3);
  padding: 6px 10px; border: 1px solid var(--gg-border);
  border-radius: var(--gg-radius-pill);
  background: color-mix(in srgb, var(--gg-bg) 70%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}

/* ─── Reveals (basic — no GSAP needed for inner pages) ─── */
.wf-reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.7s var(--gg-ease), transform 0.7s var(--gg-ease); }
.wf-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .wf-reveal { opacity: 1; transform: none; transition: none; }
}

/* ─── Bottom CTA strip (used on all inner pages) ─── */
.wf-cta-strip {
  border-top: 1px solid var(--gg-border);
  border-bottom: 1px solid var(--gg-border);
  padding: var(--gg-space-9) 0;
  text-align: center;
}
.wf-cta-strip h2 { margin: 0 0 var(--gg-space-4) 0; }
.wf-cta-strip p { color: var(--gg-fg-2); margin: 0 auto var(--gg-space-6) auto; max-width: 480px; }