/* styles.css — the shared foundation for vitalconsulting.net.
 *
 * Everything in here was previously copied inline into every page, which is how
 * the footer quietly ended up three different widths. One file, one source of
 * truth, and the browser caches it once for the whole site instead of
 * re-downloading 11-33KB of identical CSS per page.
 *
 * Load order matters: pages link this in <head> BEFORE their own <style> block,
 * so any page-specific value still wins. That is deliberate — it let us adopt
 * this file without changing how a single page looks.
 *
 * The footer used to be three different widths because each page hard-coded its
 * own. It is one rule now: .footer-inner tracks --content-max, and each page
 * declares that once to match its own content column. The 16px brand was drift,
 * not a decision, so the baseline 18px applies everywhere.
 *
 * Page-specific CSS stays in the page. Only genuinely site-wide rules belong here.
 */

/* ── DESIGN TOKENS ── */
:root {
  --orange: #E55D29;
  --orange-hover: #CC5124;
  --orange-dim: rgba(229,93,41,0.12);
  --orange-border: rgba(229,93,41,0.35);
  --orange-glow: rgba(229,93,41,0.06);
  --blue: #185D89;
  --blue-dim: rgba(24,93,137,0.15);
  --blue-border: rgba(24,93,137,0.4);
  --blue-bright: #3E97D1;
  --bg:  #0D0D0F;
  --bg2: #111114;
  --bg3: #17171B;
  --bg4: #1E1E24;
  --bg5: #242429;
  --line: rgba(255,255,255,0.06);
  --line2: rgba(255,255,255,0.10);
  --text: #EEEEF2;
  --muted: #A8A8BC;
  --muted2: #6E6E82;
  --white: #ffffff;
  --green: #3DB87A;
  --red: #E05252;
  --amber: #E5A429;
  --font-d: 'Bebas Neue', sans-serif;
  --font-b: 'Outfit', sans-serif;
  --radius: 14px;
  --ease: cubic-bezier(0.4,0,0.2,1);

  /* Width of the page's main content column. The footer tracks this so it lines
     up under the content instead of floating at its own width. Pages whose column
     is not 1200px re-declare it on body: index 1200 (default), ai-visibility 1180,
     about/contact/services/llms-txt-generator 1100. */
  --content-max: 1200px;
}

/* ── RESET + BASE ── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-b);
  font-size: 16px;
  line-height: 1.65;
  overflow-x: hidden;
}

/* Film grain overlay, sitewide */
body::before {
  content:''; position:fixed; inset:0; z-index:1000; pointer-events:none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' 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;
}

/* ── NAV ── */
nav {
  position:relative; z-index:200;
  height:68px;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 48px;
  background:rgba(13,13,15,0.9);
  backdrop-filter:blur(24px);
  border-bottom:1px solid var(--line);
  transition:background 0.3s var(--ease);
}
nav.scrolled { background:rgba(13,13,15,0.98); }
.nav-logo { display:flex; align-items:center; text-decoration:none; }
.nav-logo-img { height:44px; width:auto; mix-blend-mode: lighten; }
.nav-links { display:flex; align-items:center; gap:4px; list-style:none; }
.nav-links a {
  color:var(--muted); text-decoration:none;
  font-size:15px; font-weight:500;
  padding:7px 14px; border-radius:8px;
  transition:color 0.2s, background 0.2s;
}
.nav-links a:hover { color:var(--text); background:var(--bg3); }
.nav-cta {
  background:var(--orange) !important;
  color:var(--white) !important;
  font-weight:600 !important;
  border-radius:8px !important;
}
.nav-cta:hover { background:var(--orange-hover) !important; }

/* Active nav item is CSS driven, not JS: pages set <body data-page="services">
   and the matching link lights up. No per page nav copies, and crawlers still
   see plain links. */
body[data-page="home"]     .nav-links a[href="/"],
body[data-page="services"] .nav-links a[href="services"],
body[data-page="tools"]    .nav-links a[href="tools"],
body[data-page="about"]    .nav-links a[href="about"],
body[data-page="contact"]  .nav-links a[href="contact"] { color:var(--text); }

/* ── MOBILE NAV (hamburger) ── */
.nav-toggle {
  display:none; width:42px; height:42px; flex-shrink:0;
  border:none; background:transparent; cursor:pointer;
  padding:9px; border-radius:9px;
  flex-direction:column; justify-content:center; gap:5px;
  transition:background 0.2s;
}
.nav-toggle:hover { background:var(--bg3); }
.nav-toggle span {
  display:block; width:100%; height:2px; border-radius:2px;
  background:var(--text);
  transition:transform 0.25s var(--ease), opacity 0.2s var(--ease);
}
nav.menu-open .nav-toggle span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
nav.menu-open .nav-toggle span:nth-child(2){ opacity:0; }
nav.menu-open .nav-toggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* The hamburger takes over at 940, not 760. Measured: the desktop links stop
   fitting and wrap to two and three lines inside the 68px bar at 931px and below,
   but the hamburger was not arriving until 760 — so ~170px of tablet and small
   laptop widths rendered a wrapped, overflowing nav. This is the only place the
   breakpoint exists; partials/nav-script.html reads the toggle's visibility
   rather than repeating the number. */
@media(max-width:940px){
  .nav-toggle { display:flex; }
  .nav-links {
    position:absolute; top:68px; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:rgba(13,13,15,0.98); backdrop-filter:blur(24px);
    border-bottom:1px solid var(--line2);
    padding:10px 20px 20px;
    transform:translateY(-12px); opacity:0; pointer-events:none;
    transition:transform 0.25s var(--ease), opacity 0.25s var(--ease);
    z-index:190;
  }
  nav.menu-open .nav-links { transform:translateY(0); opacity:1; pointer-events:auto; }
  .nav-links li { width:100%; }
  .nav-links a { display:block; width:100%; padding:13px 14px; font-size:15px; border-radius:10px; }
  .nav-links a.nav-cta { text-align:center; margin-top:8px; padding:14px; }
}

/* Gutters are a phone concern, not a "do the links fit" concern, so this stays
   at 760 rather than riding along with the hamburger above. */
@media(max-width:760px){
  nav { padding:0 20px; }
}

/* ── BUTTONS ── */
.btn-primary {
  display:inline-flex; align-items:center; gap:10px;
  background:var(--orange); color:var(--white);
  font-family:var(--font-b); font-size:15px; font-weight:600;
  padding:13px 28px; border-radius:10px;
  text-decoration:none; border:none; cursor:pointer;
  transition:background 0.2s, transform 0.15s;
  letter-spacing:0.01em;
}
.btn-primary:hover { background:var(--orange-hover); transform:translateY(-1px); }
.btn-primary svg { transition:transform 0.2s; }
.btn-primary:hover svg { transform:translateX(3px); }
.btn-ghost {
  display:inline-flex; align-items:center; gap:8px;
  color:var(--muted); font-size:14px; font-weight:500;
  text-decoration:none; transition:color 0.2s;
}
.btn-ghost:hover { color:var(--text); }

/* ── SECTION HEADINGS ── */
.section-tag {
  display:inline-flex; align-items:center; gap:10px;
  font-size:11px; font-weight:700; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--orange);
  margin-bottom:14px;
}
.section-tag::before {
  content:''; display:block; width:18px; height:2px;
  background:var(--orange); border-radius:2px;
}
.section-h2 {
  font-family:var(--font-d);
  font-size:clamp(34px, 4vw, 54px);
  color:var(--white); line-height:0.97;
  letter-spacing:0.02em; margin-bottom:14px;
}
.section-sub {
  font-size:16px; color:var(--muted);
  line-height:1.7; max-width:500px; margin-bottom:52px;
}

/* ── FOOTER ──
   One definition for every page. Width follows --content-max (set per page on
   body); everything else is fixed. If the footer ever looks misaligned under the
   content, the page's --content-max is wrong — do not add an override here. */
footer { padding:36px 48px; border-top:1px solid var(--line); }
.footer-inner {
  max-width:var(--content-max); margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:16px;
}
.footer-brand { font-family:var(--font-d); font-size:18px; color:var(--muted2); letter-spacing:0.06em; }
/* The wordmark is a link home. People try it before they scan the list. */
a.footer-brand { text-decoration:none; transition:color 0.2s; }
a.footer-brand:hover { color:var(--text); }
.footer-links { display:flex; gap:20px; list-style:none; }
.footer-links a { font-size:13px; color:var(--muted); text-decoration:none; transition:color 0.2s; }
.footer-links a:hover { color:var(--text); }
.footer-copy { font-size:12px; color:var(--muted2); }

@media(max-width:760px){
  footer { padding-left:22px; padding-right:22px; }
}

/* ── REVEAL ON SCROLL ── */
.reveal { opacity:0; transform:translateY(20px); transition:opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.reveal.in { opacity:1; transform:translateY(0); }
/* Safety net: content becomes visible even if the observer never fires. */
@keyframes revealFallback { to { opacity:1; transform:translateY(0); } }

@media (prefers-reduced-motion: reduce){
  .reveal { transition:none; }
}
