/* ==========================================================================
   Self-hosted fonts (latin subset) — no Google round-trip, no swap flash.
   Metrics-matched fallbacks below keep the swap from moving the layout.
   ========================================================================== */
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/fonts/archivo-var.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 100 700; font-display: swap; src: url('/fonts/ibm-plex-sans-var.woff2') format('woff2'); }
@font-face { font-family: 'Archivo Fallback'; src: local('Arial'); size-adjust: 101%; ascent-override: 88%; descent-override: 21%; line-gap-override: 0%; }
@font-face { font-family: 'IBM Plex Sans Fallback'; src: local('Arial'); size-adjust: 100%; ascent-override: 102%; descent-override: 27%; line-gap-override: 0%; }

/* ==========================================================================
   Lead Gen AI Systems — Design System
   Single source of truth for index.html + every /case-studies/* page.

   Token architecture (see ui-ux-pro-max "design-system" skill):
     Primitive  -> raw brand values, never referenced directly outside :root
     Semantic   -> purpose-named aliases components actually use
     Component  -> a few component-specific overrides, kept minimal on
                   purpose since this is a small static site, not an app
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* ---- Primitive tokens ---- */
  --p-black-950: #141210;   /* warm near-black page */
  --p-black-900: #221F1B;   /* cards on the page */
  --p-black-band: #1D1A16;  /* alternate section band */
  --p-black-deep: #0C0B09;  /* contact + footer */
  --p-gold-500: #FFB700;
  --p-gold-600: #E0A100;
  --p-white-100: #F4EFE7;
  --p-gray-400: #A0978A;   /* 5.7:1 on the lightest surface (#221F1B), 6.5:1 on --bg */
  --p-gray-800: #322D27;
  --p-zinc-300: #CFC7BA;   /* 9.8:1 on the lightest surface */

  /* ---- Semantic tokens ---- */
  --bg: var(--p-black-950);
  --bg-surface: var(--p-black-900);
  --bg-band: var(--p-black-band);
  --bg-deep: var(--p-black-deep);
  --accent: var(--p-gold-500);
  --accent-strong: var(--p-gold-600);
  --on-accent: var(--p-black-950);
  --text: var(--p-white-100);
  --text-secondary: var(--p-zinc-300);
  --text-muted: var(--p-gray-400);
  --border: var(--p-gray-800);

  /* ---- Type scale ---- */
  --font-display: 'Archivo', 'Archivo Fallback', Arial, sans-serif;
  --font-body: 'IBM Plex Sans', 'IBM Plex Sans Fallback', Arial, sans-serif;

  /* ---- Spacing scale ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* ---- Radii ---- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-pill: 999px;

  /* ---- Content widths (component tokens) ---- */
  --width-wide: 1100px;   /* homepage sections */
  --width-copy: 760px;    /* long-form case-study body */
}
/* Screen sizes used site-wide: phone <=640px, tablet 641-1023px, laptop 1024-1599px, big screen >=1600px.
   Big screens get a wider content area and a slightly larger base size; everything sized in rem grows with it. */
@media (min-width: 1600px) { :root { --width-wide: 1280px; --width-copy: 800px; font-size: 17px; } }
@media (min-width: 2200px) { :root { --width-wide: 1440px; --width-copy: 860px; font-size: 18px; } }

html { scroll-behavior: smooth; overflow-x: clip; }  /* nothing may widen the page on phones (the logo marquee did) */

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; }
img { max-width: 100%; display: block; }
.display { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em; }

/* ==========================================================================
   Nav
   ========================================================================== */

nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 0.85rem 2rem;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  transition: background 0.3s, box-shadow 0.3s;
}
nav.scrolled {
  background: var(--bg-deep);
  box-shadow: 0 1px 0 var(--border), 0 10px 30px rgba(0, 0, 0, 0.35);
}
.nav-inner {
  max-width: var(--width-wide);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
}
.nav-logo {
  grid-column: 1;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-display); font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  justify-self: start;
  color: var(--text);
}
.nav-logo-icon { width: 22px; height: 22px; flex-shrink: 0; }
.nav-logo span { color: var(--accent); }
.nav-links {
  grid-column: 2;
  display: flex;
  gap: 2rem;
  align-items: center;
  justify-self: center;
  list-style: none;
  font-size: 0.9rem;
}
.nav-links a {
  text-decoration: none;
  color: var(--text-secondary);
  transition: color 0.2s;
}
.nav-links a:hover { color: var(--text); }
.nav-right {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.nav-cta {
  color: var(--on-accent);
  background: var(--accent);
  font-weight: 600;
  padding: 0.55rem 1.2rem;
  text-decoration: none;
  font-size: 0.85rem;
  border-radius: var(--radius-sm);
  transition: background 0.2s;
  white-space: nowrap;
}
.nav-cta:hover { background: var(--accent-strong); }
.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--border);
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text);
  border-radius: var(--radius-sm);
}
.nav-toggle svg { width: 18px; height: 18px; }

.nav-logo { padding: 0.6rem 0; }  /* 44px tap height */
.nav-menu-cta { display: none; }  /* the in-menu "Book a Call" only exists in the phone/tablet menu */
.nav-toggle line { transition: transform 0.2s, opacity 0.2s; transform-box: view-box; transform-origin: center; }

/* Phones and tablets (under 1024px): logo + menu button only; "Book a Call" lives inside the menu.
   The desktop links don't fit beside the logo until about 920px, so the menu covers every iPad held upright. */
@media (max-width: 1023px) {
  nav { padding: 0.75rem 1.25rem; }
  .nav-inner { grid-template-columns: minmax(0, 1fr) auto; column-gap: 0.75rem; }
  .nav-right { grid-column: 2; }
  .nav-links, .nav-cta { display: none; }
  .nav-toggle { display: inline-flex; width: 44px; height: 44px; }
  nav.menu-open .nav-toggle line:nth-child(1) { transform: rotate(45deg) translateY(6px); }
  nav.menu-open .nav-toggle line:nth-child(2) { opacity: 0; }
  nav.menu-open .nav-toggle line:nth-child(3) { transform: rotate(-45deg) translateY(-6px); }
  nav.menu-open .nav-links {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%; left: 0; right: 0;
    justify-self: stretch;  /* the desktop rule centres the links; without this the open menu shrinks to a narrow column */
    max-height: calc(100dvh - 100%);
    overflow-y: auto;
    background: var(--bg-deep);
    border-bottom: 1px solid var(--border);
    padding: 0.5rem 1.25rem 1.5rem;
    gap: 0;
    align-items: stretch;  /* full-width rows, not words centred in the panel */
    font-size: 1.05rem;
  }
  nav.menu-open .nav-links a {
    display: block;
    padding: 0.9rem 0;  /* about 48px tall rows */
    border-bottom: 1px solid var(--border);
    color: var(--text);
  }
  nav.menu-open .nav-menu-cta { display: block; margin-top: 1.25rem; }
  nav.menu-open .nav-menu-cta a { border-bottom: none; text-align: center; color: var(--on-accent); padding: 0.95rem 1.5rem; }
  /* Dimmed page behind the open menu; a tap on it closes the menu (scripts.js) */
  nav.menu-open::after {
    content: ''; position: absolute; top: 100%; left: 0; right: 0; height: 100vh;
    background: rgba(12, 11, 9, 0.7); z-index: -1;
  }
}
@media (max-width: 640px) {
  nav { padding: 0.6rem 1rem; }
  .nav-logo { font-size: 0.95rem; letter-spacing: 0.03em; gap: 0.4rem; }
  .nav-logo-icon { width: 20px; height: 20px; }
}
html.menu-lock, html.menu-lock body { overflow: hidden; }

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-block;
  padding: 0.9rem 1.8rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  transition: transform 0.15s, background 0.15s, border-color 0.15s;
}
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-strong); transform: translateY(-1px); }
.btn-ghost { border: 1px solid var(--border); color: var(--text); }
.btn-ghost:hover { border-color: var(--accent); }
.btn-sm {
  display: inline-block;
  padding: 0.8rem 1.75rem;
  background: var(--accent);
  color: var(--on-accent);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.88rem;
  border-radius: var(--radius-sm);
  border: none;  /* <button class="btn-sm"> must not keep the browser's bevelled border or Arial font */
  font-family: inherit;
  cursor: pointer;
  transition: background 0.2s;
}
.btn-sm:hover { background: var(--accent-strong); }

/* ==========================================================================
   Layout primitives
   ========================================================================== */

section { padding: 7rem 2rem; max-width: var(--width-wide); margin: 0 auto; }

.case-section, .case-hero {
  max-width: var(--width-copy);
  margin: 0 auto;
  padding: 3rem 2rem;
  border-top: 1px solid var(--border);
}
.case-hero { border-top: none; padding-top: 7.5rem; padding-bottom: 2rem; }

h2 {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.9rem, 3.6vw, 2.75rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin-bottom: 2.5rem;
  max-width: 24ch;
  text-wrap: balance;
}
.case-section h2, .case-hero h2 {
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  letter-spacing: 0.01em;
  margin-bottom: 1.25rem;
  max-width: none;
}

/* ==========================================================================
   Section bands: alternate surfaces so each section reads as its own block
   (hero on the page colour, then System banded, and so on).
   Sections stay 1100px wide; the band paints edge to edge behind them.
   ========================================================================== */
#system, #work, #testimonials, #faq {
  background: var(--bg-band);
  box-shadow: 0 0 0 100vmax var(--bg-band);
  clip-path: inset(0 -100vmax);
}
#contact, footer {
  background: var(--bg-deep);
  box-shadow: 0 0 0 100vmax var(--bg-deep);
  clip-path: inset(0 -100vmax);
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  min-height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 3.5rem;
  padding-top: 9rem;
  padding-bottom: 4rem;
}
.hero-content { display: flex; flex-direction: column; align-items: center; max-width: min(100%, 62rem); }
/* Headline: always 3 lines, "Go-to-market systems / that fill your calendar / while you sleep." (Karl);
   the em-based width scales with the font, measured at 360 to 2560px */
.hero h1 { max-width: 12em; font-size: clamp(1.75rem, 5.6vw, 4.25rem); }
@media (max-width: 1023px) {
  .hero { padding-top: 8rem; }
}
h1 {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2.5rem, 5.6vw, 4.25rem);
  line-height: 1.02;
  letter-spacing: -0.028em;
  max-width: 18ch;
  margin-left: auto;
  margin-right: auto;
  text-wrap: balance;
}
h1 em { color: var(--accent); font-style: normal; }
.lede {
  margin-top: 1.25rem;
  max-width: 56ch;
  margin-left: auto;
  margin-right: auto;
  color: var(--text-secondary);
  font-size: 1.15rem;
}
.cta-row { margin-top: 1.75rem; display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; }

/* ==========================================================================
   Services grid
   ========================================================================== */

.grid-services {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}
.card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.75rem;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.card h3 { font-size: 1.1rem; margin-bottom: 0.75rem; font-weight: 600; }
.card p { color: var(--text-secondary); font-size: 0.95rem; }
.card-icon {
  width: 40px; height: 40px; border-radius: var(--radius-md);
  background: rgba(255, 183, 0, 0.1); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1rem;
}
.card-icon svg { width: 20px; height: 20px; }

/* ==========================================================================
   Logo marquee
   ========================================================================== */

.logo-cloud {
  width: 100%;
  padding: 2.25rem 0 0;
  border-top: 1px solid var(--border);
}
.logo-cloud-inner { max-width: var(--width-wide); margin: 0 auto; padding: 0 2rem; }
.logo-cloud-label {
  text-align: center;
  font-size: 0.9rem;
  color: var(--text-muted);
}
.logo-marquee-mask {
  max-width: 1000px;
  margin: 1.75rem auto 0;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 140px, #000 calc(100% - 140px), transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 140px, #000 calc(100% - 140px), transparent);
}
.logo-marquee-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: logo-marquee-scroll 36s linear infinite;
}
@keyframes logo-marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.logo-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0 2rem;
  flex-shrink: 0;
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 1rem;
  white-space: nowrap;
}
.logo-item img {
  box-sizing: border-box;
  width: 22px;
  height: 22px;
  object-fit: contain;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
}
.logo-cloud-badge {
  display: block;
  width: 72px;
  height: auto;
  margin: 1.75rem auto 0;
}

/* ==========================================================================
   Work grid (homepage case-study preview cards)
   ========================================================================== */

.work-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));  /* minmax(0,…): long address-bar text can't push a card past the screen */
  gap: 1.5rem;
}
.work-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  cursor: pointer;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.75rem;
  text-decoration: none;
  transition: border-color 0.2s, transform 0.15s;
}
.work-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.work-card h3 {
  font-family: var(--font-display); font-weight: 800;
  font-size: 1.4rem;
  letter-spacing: -0.02em;
  line-height: 1.2;
  text-wrap: balance;
  margin: 0.15rem 0 0.35rem;
  color: var(--text);
}
.work-tag {
  display: inline-block;
  align-self: flex-start;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 0.22rem 0.65rem;
  margin-bottom: 0.9rem;
}
.work-card p { color: var(--text-secondary); font-size: 0.92rem; margin-bottom: 1.25rem; }
.work-cta {
  align-self: flex-start;
  margin-top: auto;
  font-size: 0.82rem; font-weight: 600; color: var(--accent);
  background: transparent; border: 1px solid var(--border);
  padding: 0.55rem 1.1rem; border-radius: var(--radius-sm);
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.work-card:hover .work-cta { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

/* ==========================================================================
   Win tag (pill) — used on featured stats site-wide
   ========================================================================== */

.win-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(255, 183, 0, 0.18);
  color: var(--accent);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.25rem 0.6rem;
  border-radius: var(--radius-pill);
  margin-bottom: 0.5rem;
}
.win-tag svg { width: 12px; height: 12px; flex-shrink: 0; }

/* Work-card stat — the actual proof, styled as the card's headline (leads
   the card, ahead of the site thumbnail below it), not a small pill buried
   under a screenshot. */
.work-stat {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  align-self: flex-start;
  font-family: var(--font-body); font-weight: 600;
  font-size: 0.82rem;
  line-height: 1.3;
  color: var(--accent);
  background: rgba(255, 183, 0, 0.1);
  border: 1px solid rgba(255, 183, 0, 0.32);
  border-radius: 999px;
  padding: 0.35rem 0.8rem 0.35rem 0.45rem;
  margin: 0.25rem 0 0.75rem;
}
.work-stat svg {
  width: 12px; height: 12px; flex-shrink: 0;
  background: rgba(255, 183, 0, 0.18);
  border-radius: 50%;
  padding: 4px;
  box-sizing: content-box;
}

/* ==========================================================================
   Case-study hero elements
   ========================================================================== */

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-bottom: 1.5rem;
}
.breadcrumb a { text-decoration: none; color: var(--text-muted); transition: color 0.2s; }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb span.current { color: var(--text); }

.proof-frame {
  display: block;
  border: 1px solid var(--border);
  overflow: hidden;
  text-decoration: none;
  margin-bottom: 1.25rem;
}
.proof-chrome {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.75rem;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
}
.proof-dots { display: flex; gap: 0.35rem; flex-shrink: 0; }
.proof-dots span { width: 9px; height: 9px; border-radius: 50%; display: block; }
.proof-dots span:nth-child(1) { background: #ff5f57; }
.proof-dots span:nth-child(2) { background: #febc2e; }
.proof-dots span:nth-child(3) { background: #28c840; }
.proof-url {
  flex: 1;
  background: var(--bg);
  border: 1px solid var(--border);
  font-size: 0.75rem;
  color: var(--text-muted);
  padding: 0.3rem 0.7rem;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.proof-image { width: 100%; display: block; }

.case-hero h1 {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2.2rem, 4.5vw, 3.2rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: 0.6rem;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}
.case-subheadline {
  font-size: 1.05rem;
  color: var(--text-secondary);
  max-width: 60ch;
  margin-bottom: 1rem;
}
.case-date-line {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}
.case-date-line svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--text-muted); }

.case-body p, .case-section p {
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.75;
  margin-bottom: 1.15rem;
}
.case-list { list-style: none; margin-top: 1rem; }
.case-list li {
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.7;
  padding-left: 1.4rem;
  position: relative;
  margin-bottom: 0.85rem;
}
.case-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.65rem;
  width: 6px;
  height: 6px;
  background: var(--accent);
}
.subsection-title {
  font-weight: 700;
  font-size: 1rem;
  color: var(--text);
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
}
.subsection-proof { width: 100%; display: block; }

/* Stat strip */
.stat-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--border);
  margin-bottom: 1.75rem;
}
.stat-cell { padding: 1.75rem 1.25rem; text-align: center; border-left: 1px solid var(--border); }
.stat-cell:first-child { border-left: none; }
.stat-cell .num {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  white-space: nowrap;
  color: var(--accent);
  line-height: 1;
  margin-bottom: 0.35rem;
}
.stat-cell .label { font-size: 0.75rem; color: var(--text-muted); }
@media (max-width: 640px) {
  .stat-strip { grid-template-columns: repeat(2, 1fr); }
  .stat-cell:nth-child(3) { border-left: none; }
  .stat-cell:nth-child(n+3) { border-top: 1px solid var(--border); }
}

/* Results teaser */
.results-teaser {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-top: 2px solid var(--accent);
  padding: 1.75rem 1.5rem 0.5rem;
  margin-top: 1.75rem;
}
.results-teaser-label {
  text-align: center;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.25rem;
}
.results-teaser .stat-strip { border: none; margin-bottom: 0; }
.results-teaser .stat-cell { padding: 0 1.25rem 1.5rem; }
@media (max-width: 640px) {
  .results-teaser .stat-cell:nth-child(n+3) { padding-top: 1.5rem; }
}
.results-teaser .stat-cell .num { font-size: clamp(1.4rem, 2.4vw, 1.9rem); color: var(--accent); }

/* Quote block */
.quote-block {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  padding: 1.75rem;
}
.quote-block p {
  font-size: 1.05rem;
  color: var(--text);
  line-height: 1.6;
  font-style: italic;
  margin-bottom: 1rem;
}
.quote-proof { display: block; max-width: 420px; width: 100%; border-radius: var(--radius-md); margin-bottom: 1rem; }
.quote-block cite { display: block; font-style: normal; font-size: 0.85rem; color: var(--text-muted); }

.disclaimer {
  font-size: 0.75rem;
  font-style: italic;
  color: var(--text-muted);
  max-width: 560px;
  line-height: 1.6;
}


/* Homepage proof/contact strip */
.proof {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 3rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
.proof p { color: var(--text-secondary); max-width: 42ch; }

/* ==========================================================================
   More Case Studies carousel
   ========================================================================== */

.related-case-card { display: block; border: 1px solid var(--border); text-decoration: none; transition: border-color 0.2s; }
.related-case-card:hover { border-color: var(--accent); }
.related-case-thumb { width: 100%; display: block; border-bottom: 1px solid var(--border); }
.related-case-body { padding: 1.5rem; }
.related-case-title {
  font-family: var(--font-display); font-weight: 800;
  font-size: 1.3rem;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0.25rem 0 0.6rem;
  color: var(--text);
}
.related-case-desc { color: var(--text-secondary); font-size: 0.88rem; line-height: 1.6; margin-bottom: 1rem; }
.related-case-cta {
  display: inline-block;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--on-accent);
  background: var(--accent);
  padding: 0.55rem 1.1rem;
  border-radius: var(--radius-sm);
  transition: background 0.2s;
}
.related-case-card:hover .related-case-cta { background: var(--accent-strong); }

.related-carousel { position: relative; overflow: hidden; }
.related-carousel-track { display: flex; transition: transform 0.5s ease; }
.related-carousel-track > .related-case-card { flex: 0 0 100%; }
.related-carousel-dots { display: flex; justify-content: center; margin-top: 0.5rem; }
.related-carousel-dot {
  width: 44px; height: 44px; display: grid; place-items: center;
  background: none; border: none; padding: 0; cursor: pointer;
}
.related-carousel-dot::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--border); transition: background 0.2s;
}
.related-carousel-dot.active::before { background: var(--accent); }

/* ==========================================================================
   Footer
   ========================================================================== */

footer {
  position: relative;
  padding: 3rem 2rem 2rem;
  max-width: var(--width-wide);
  margin: 0 auto;
  text-align: center;
}
footer p { font-size: 0.85rem; color: var(--text-muted); }
footer a { color: var(--text); text-decoration: none; }
footer a:hover { color: var(--accent); }
.footer-cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  text-align: left;
  margin-bottom: 2.5rem;
}
.footer-col { display: flex; flex-direction: column; gap: 0.7rem; }
.footer-col h4 { font-size: 0.85rem; color: var(--text); margin-bottom: 0.3rem; }
.footer-col a { font-size: 0.8rem; color: var(--text-muted); text-decoration: none; }
.footer-col a:hover { color: var(--accent); }
.footer-social { display: flex; gap: 0.6rem; margin-top: 0.2rem; }
.footer-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border: 1px solid var(--border); border-radius: 50%;
  color: var(--text-muted); transition: border-color 0.2s, color 0.2s;
}
.footer-social a:hover { border-color: var(--accent); color: var(--accent); }
.footer-social svg { width: 15px; height: 15px; fill: currentColor; }
.footer-bottom { border-top: 1px solid var(--border); padding-top: 1.5rem; }
.footer-legal { margin-top: 0.5rem; font-size: 0.78rem; }
.footer-legal a { color: var(--text-muted); text-decoration: none; }
.footer-legal a:hover { color: var(--accent); }

/* About / Founder section — photo on the left, copy on the right */
.about-grid {
  display: grid; grid-template-columns: 1fr 220px; gap: 2.5rem; align-items: start;
}
.about-photo { width: 100%; border-radius: var(--radius-md); display: block; grid-column: 2; grid-row: 1; }
.about-copy p { color: var(--text-secondary); font-size: 0.98rem; margin-bottom: 1rem; }
.about-copy p:last-child { margin-bottom: 0; }
.about-name { color: var(--text); font-weight: 600; }
@media (max-width: 640px) {
  .about-grid { grid-template-columns: 1fr; }
  .about-photo { max-width: 200px; margin: 0 auto; grid-column: auto; grid-row: auto; }
}

/* Service card tool-icon chips — icons only, no "Tools:" label */
.card-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: auto; padding-top: 1.1rem; }  /* pinned to the card's bottom-left */
.card-tools img { box-sizing: border-box; width: 20px; height: 20px; object-fit: contain; border-radius: var(--radius-sm); }

/* How It Works */
.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; }
.step-card { position: relative; }
.step-num {
  font-family: var(--font-display); font-weight: 800; font-size: 2.75rem; color: var(--accent);
  line-height: 1; margin-bottom: 0.75rem;
}
.step-card h3 { font-size: 1.05rem; margin-bottom: 0.6rem; font-weight: 600; }
.step-card p { color: var(--text-secondary); font-size: 0.92rem; }

/* FAQ */
.faq-list { max-width: 760px; }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item summary {
  cursor: pointer; padding: 1.25rem 0; font-weight: 600; font-size: 1rem;
  color: var(--text); list-style: none; display: flex; justify-content: space-between;
  align-items: center; gap: 1rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+'; font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; color: var(--accent);
  flex-shrink: 0; transition: transform 0.2s;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { color: var(--text-secondary); font-size: 0.95rem; padding-bottom: 1.25rem; max-width: 65ch; }

/* Work-card cover image */
.work-card-image { width: 100%; aspect-ratio: 900 / 394; object-fit: cover; border-radius: var(--radius-md); margin-bottom: 1rem; border: 1px solid var(--border); }

/* ==========================================================================
   Responsive
   ========================================================================== */

/* Results: 3 cards. Big screens (1600px+, 1280px content): 3 columns. Tablet and laptop: one wide card per row,
   screenshot left and text right, so the third card is never left alone with an empty half beside it.
   (3 columns at MacBook width squeezed the tags and result pills onto two lines.) */
@media (min-width: 1600px) {
  .work-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .work-card { padding: 1.5rem; }
  .work-card h3 { font-size: 1.25rem; }
}
@media (min-width: 641px) and (max-width: 1599px) {
  .work-grid { grid-template-columns: minmax(0, 1fr); }
  .work-card { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr); column-gap: 1.75rem; align-content: start; }
  .work-card > .browser-frame { grid-column: 1; grid-row: 1 / span 6; align-self: start; margin-bottom: 0; }
  .work-card > :not(.browser-frame) { grid-column: 2; justify-self: start; }
  .work-card .work-cta { margin-top: 0.25rem; }
}

/* Tablet */
@media (max-width: 1023px) {
  section { padding: 5.5rem 2rem; }
  .steps-grid { gap: 1.25rem; }
  .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.25rem 1.5rem; }
  /* Touch: links get a 44px tap area */
  .footer-col { gap: 0; }
  .footer-col > a, .breadcrumb a, .footer-legal a { display: inline-block; padding: 0.75rem 0; }  /* text links only: the round LinkedIn icon keeps its centring */
}

/* Phone */
@media (max-width: 640px) {
  section { padding: 4.5rem 1.25rem; }
  .grid-services, .work-grid, .steps-grid { grid-template-columns: minmax(0, 1fr); }
  .steps-grid { gap: 2rem; }
  .proof { padding: 1.75rem; }
  .work-card { padding: 1.25rem; }
  .proof .cta-row { width: 100%; }
  .proof .btn { flex: 1 1 100%; text-align: center; }
}

/* ==========================================================================
   Legal pages (Privacy Policy, Terms of Service)
   ========================================================================== */
.legal-wrap { max-width: 760px; margin: 0 auto; padding: 9rem 1.5rem 5rem; }
.legal-wrap h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 4vw, 2.8rem); margin-bottom: 0.5rem; }
.legal-updated { color: var(--text-muted); font-size: 0.85rem; margin-bottom: 2.5rem; }
.legal-wrap h2 { font-family: var(--font-display); font-weight: 800; font-size: 1.4rem; margin: 2.25rem 0 0.75rem; letter-spacing: -0.02em; }
.legal-wrap p, .legal-wrap li { color: var(--text-secondary); font-size: 0.95rem; line-height: 1.7; }
.legal-wrap ul { padding-left: 1.25rem; margin-bottom: 1rem; }
.legal-wrap li { margin-bottom: 0.4rem; }
.legal-wrap a { color: var(--accent); }
.legal-note {
  background: var(--bg-surface); border: 1px solid var(--border); border-left: 3px solid var(--accent);
  padding: 1.25rem; margin-top: 3rem; font-size: 0.85rem; color: var(--text-muted);
}

/* ==========================================================================
   Service card mini-demos — small looping CSS animations that show what
   each engine actually does, instead of just describing it in prose.
   No real data anywhere (leads-demo uses obviously-fake names + blurred
   email placeholders, never real addresses).
   ========================================================================== */

.mini-demo {
  container-type: inline-size;
  height: 156px;  /* room for the AI SDR demo's label, bubble and tags without touching the edges */
  margin-bottom: 1.1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg);
  overflow: hidden;
  position: relative;
}

/* Lead Generation Engine — websites being scraped, leads landing in a live
   feed. Emails are obviously-fake placeholders (never a real address), not
   blurred — the fake domain itself is the tell, blur just looked broken. */
.leads-demo { display: flex; flex-direction: column; padding: 0.75rem 0.9rem; }
.scrape-label {
  display: flex; align-items: center; gap: 0.7rem; font-size: 0.7rem;
  color: var(--accent); font-weight: 600; letter-spacing: 0.03em;
  text-transform: uppercase; margin-bottom: 0.7rem; flex-shrink: 0;
}
.scrape-glass {
  width: 12px; height: 12px; border: 1.5px solid var(--accent); border-radius: 50%;
  position: relative; flex-shrink: 0; margin-right: 0.15rem;
  animation: scrape-scan 2.4s ease-in-out infinite;
}
.scrape-glass::after {
  content: ''; position: absolute; width: 5px; height: 1.5px; background: var(--accent);
  top: 11px; left: 9px; transform: rotate(45deg); transform-origin: left;
}
@keyframes scrape-scan { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(3px); } }
.scrape-word { transition: opacity 0.22s ease; }
.scrape-word.is-swapping { opacity: 0; }
.scrape-ellipsis span { animation: scrape-blink 1.4s ease-in-out infinite; }
.scrape-ellipsis span:nth-child(2) { animation-delay: 0.2s; }
.scrape-ellipsis span:nth-child(3) { animation-delay: 0.4s; }
@keyframes scrape-blink { 0%, 80%, 100% { opacity: 0.25; } 40% { opacity: 1; } }

.leads-feed-mask {
  flex: 1; overflow: hidden;
  mask-image: linear-gradient(to bottom, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 8%, #000 92%, transparent);
}
.leads-track { display: flex; flex-direction: column; gap: 0.7rem; animation: leads-scroll 9s linear infinite; }
@keyframes leads-scroll { from { transform: translateY(0); } to { transform: translateY(-50%); } }
.lead-row {
  display: flex; align-items: center; gap: 0.5rem; font-size: 0.76rem; white-space: nowrap;
  opacity: 0; animation: lead-row-in 0.4s ease-out forwards;
}
.lead-row:nth-child(2) { animation-delay: 0.15s; }
.lead-row:nth-child(3) { animation-delay: 0.3s; }
.lead-row:nth-child(4) { animation-delay: 0.45s; }
.lead-row:nth-child(5) { animation-delay: 0.6s; }
.lead-row:nth-child(6) { animation-delay: 0.75s; }
@keyframes lead-row-in { from { opacity: 0; transform: translateX(-4px); } to { opacity: 1; transform: translateX(0); } }
.lead-name { color: var(--text); font-weight: 600; }
.lead-email { color: var(--text-muted); user-select: none; overflow: hidden; text-overflow: ellipsis; }
/* Verdict pill — same semantic colors used site-wide for verification
   status (green/amber/red), doubling as a quiet nod to the email
   verification layer behind the Lead Generation Engine. */
.lead-verdict {
  margin-left: auto; flex-shrink: 0; font-size: 0.6rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.03em;
  padding: 0.15rem 0.5rem; border-radius: 999px;
}
.lead-verdict.good { color: #22c55e; background: rgba(34, 197, 94, 0.15); }
.lead-verdict.risky { color: #f59e0b; background: rgba(245, 158, 11, 0.15); }
.lead-verdict.bad { color: #ef4444; background: rgba(239, 68, 68, 0.15); }


/* DFY Full Outbound Engine — pipeline nodes pulsing in sequence.
   Grid-based (not flex+space-between) so every node sits dead-center in an
   equal-width column — the connecting line and the traveling dot are both
   derived from that same column geometry, so nothing needs a guessed pixel
   offset and nothing can drift out of alignment. */
.pipeline-demo { display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; padding: 0 1.15rem; position: relative; z-index: 0; }
.pipeline-node {
  display: flex; flex-direction: column; align-items: center; gap: 0.45rem;
  font-size: 0.7rem; color: var(--text-muted); position: relative;  /* no z-index: lines, dots and travel dot share .pipeline-demo's stacking context */
}
/* Static connector: two half-segments per gap, each running from a node's
   own dot-center (top: 15px = half the 30px dot) out to the midpoint toward
   its neighbor — so the line always meets the dot exactly, whatever the
   card's rendered width. */
.pipeline-node:not(:first-child)::before {
  content: ''; position: absolute; top: 15px; right: 50%; width: 50%; height: 1px;
  background: var(--border); z-index: 0;
}
.pipeline-node:not(:last-child)::after {
  content: ''; position: absolute; top: 15px; left: 50%; width: 50%; height: 1px;
  background: var(--border); z-index: 0;
}
.pipeline-node-dot {
  width: 30px; height: 30px; border-radius: 50%; background: var(--bg);
  position: relative; z-index: 1;
  border: 1px solid var(--border); display: flex; align-items: center;
  justify-content: center; transition: none;
}
.pipeline-node-dot svg { width: 14px; height: 14px; color: inherit; }
.pipeline-node.active .pipeline-node-dot { animation: pipeline-pulse 4.8s ease-in-out infinite; }
.pipeline-node:nth-child(1) .pipeline-node-dot { animation-delay: 0s; }
.pipeline-node:nth-child(2) .pipeline-node-dot { animation-delay: 1.2s; }
.pipeline-node:nth-child(3) .pipeline-node-dot { animation-delay: 2.4s; }
.pipeline-node:nth-child(4) .pipeline-node-dot { animation-delay: 3.6s; }
/* Traveling dot per gap: each one only has to cross ITS OWN column (its own
   dot at left:50% to the next dot at left:150%, exact because the columns
   are equal width), and its delay reuses the exact same 1.2s spacing as the
   node pulses above — so it arrives precisely when the next node lights up,
   instead of a single dot racing the whole row on unrelated timing. */
.pipeline-travel-dot {
  position: absolute; top: 15px; left: 50%; width: 6px; height: 6px;
  margin: -3px 0 0 -3px; z-index: 2;  /* always in front of every connector line */
  border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 6px 1px rgba(255, 183, 0, 0.6);
  opacity: 0;
  animation: pipeline-segment-travel 4.8s linear infinite;
}
.pipeline-node:nth-child(1) .pipeline-travel-dot { animation-delay: 0s; }
.pipeline-node:nth-child(2) .pipeline-travel-dot { animation-delay: 1.2s; }
.pipeline-node:nth-child(3) .pipeline-travel-dot { animation-delay: 2.4s; }
@keyframes pipeline-segment-travel {
  0% { left: 50%; opacity: 1; }
  24.9% { left: 150%; opacity: 1; }
  25%, 100% { left: 150%; opacity: 0; }
}
@keyframes pipeline-pulse {
  0%, 8% { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 4px rgba(255, 183, 0, 0.15); }
  25%, 100% { background: var(--bg); border-color: var(--border); box-shadow: none; }
}

/* AI SDR Engine — a hook being AI-generated, typewriter effect */
.ai-demo { display: flex; flex-direction: column; justify-content: center; padding: 0 1.3rem; gap: 0.7rem; }
.ai-demo-label { display: flex; align-items: center; gap: 0.4rem; font-size: 0.68rem; color: var(--accent); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; }
.ai-demo-label::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
  animation: hero-hub-dot-pulse 1.4s ease-in-out infinite;
}
@keyframes hero-hub-dot-pulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } }
.ai-bubble {
  border: 1px solid var(--border); border-radius: 8px; background: var(--bg-surface);
  padding: 0.65rem 0.8rem;
  overflow: hidden;
}
.ai-typing {
  font-size: 0.78rem; color: var(--text-secondary); white-space: nowrap; overflow: hidden;
  border-right: 2px solid var(--accent); display: inline-block; max-width: 100%;
  vertical-align: bottom;
  animation: ai-caret 0.7s step-end infinite;
}
.ai-tags { display: flex; gap: 0.4rem; }
.ai-tag {
  font-size: 0.6rem; font-weight: 600; color: var(--text-muted);
  border: 1px solid var(--border); border-radius: 999px; padding: 0.2rem 0.55rem;
}
@keyframes ai-caret { 50% { border-color: transparent; } }

@media (prefers-reduced-motion: reduce) {
  .leads-track, .lead-row, .scrape-glass, .scrape-ellipsis span,
  .pipeline-node.active .pipeline-node-dot, .pipeline-track-dot, .ai-typing,
  .logo-marquee-track {
    animation: none !important;
  }
  .lead-row, .scrape-ellipsis span { opacity: 1; transform: none; }
  .ai-typing { border-right-color: transparent; }
}



/* DFY Mailbox Setup — a mock terminal verifying DNS records, deliberately
   a different visual language (monospace/code) from the node-flow
   pipeline used on the Full Outbound Engine card. */
.terminal-demo { padding: 0; background: #08080a; display: flex; flex-direction: column; }
.terminal-bar {
  display: flex; align-items: center; gap: 0.4rem; flex-shrink: 0;
  padding: 0.45rem 0.7rem; border-bottom: 1px solid var(--border);
}
.term-dot { width: 8px; height: 8px; border-radius: 50%; }
.term-dot.red { background: #ff5f57; }
.term-dot.yellow { background: #febc2e; }
.term-dot.green { background: #28c840; }
.terminal-body { padding: 0.9rem; flex: 1; display: flex; align-items: center; }
.term-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.8rem 1rem; width: 100%; }
.term-line {
  font-family: var(--font-body);
  font-size: 0.82rem; font-weight: 500; line-height: 1.3;
  display: flex; align-items: center; gap: 0.5rem;
  color: var(--text);
  opacity: 0; transform: translateY(4px);
  animation: term-line-in 0.4s ease-out forwards;
}
.term-line:nth-child(1) { animation-delay: 0.15s; }
.term-line:nth-child(2) { animation-delay: 0.75s; }
.term-line:nth-child(3) { animation-delay: 1.35s; }
.term-line:nth-child(4) { animation-delay: 1.95s; }
/* JS re-triggers these delays on a loop (see scripts.js) so the rows
   always land one-by-one, not all at once on the second pass. */
.term-check {
  width: 15px; height: 15px; border-radius: 50%; background: rgba(34, 197, 94, 0.15);
  color: #22c55e; display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.62rem; flex-shrink: 0;
}
@keyframes term-line-in { to { opacity: 1; transform: translateY(0); } }
@container (max-width: 360px) { .terminal-body { padding: 0.5rem 0.9rem; } .term-grid { grid-template-columns: 1fr; gap: 0.3rem; } .term-line { font-size: 0.75rem; } }

@media (prefers-reduced-motion: reduce) {
  .term-line { animation: none !important; opacity: 1; transform: none; }
}

/* ==========================================================================
   Browser-chrome frame for Results card images + rounding sharp panels
   ========================================================================== */
.browser-frame {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 1rem;
}
.browser-chrome {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.5rem 0.7rem;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.browser-dots { display: flex; gap: 0.35rem; flex-shrink: 0; }
.browser-dots span { width: 9px; height: 9px; border-radius: 50%; display: block; }
.browser-dots span:nth-child(1) { background: #ff5f57; }
.browser-dots span:nth-child(2) { background: #febc2e; }
.browser-dots span:nth-child(3) { background: #28c840; }
.browser-url {
  flex: 1; min-width: 0;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  color: var(--text-muted);
  padding: 0.28rem 0.6rem;
  text-align: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.work-card .browser-frame .work-card-image {
  border: none; border-radius: 0; margin-bottom: 0; display: block;
}

.proof-frame, .stat-strip, .results-teaser, .related-case-card { border-radius: var(--radius-md); overflow: hidden; }
.quote-block, .legal-note { border-radius: var(--radius-md); }
.proof-url { border-radius: var(--radius-sm); }

/* ==========================================================================
   The System — "LGAIS Lead Engine": tool logos orbiting a central hub.
   Original build, restored as its own section (not hero content).
   ========================================================================== */

#system { padding-bottom: 4.5rem; }
#system h2 { margin-bottom: 1.5rem; }
.system-visual { display: flex; align-items: center; justify-content: center; }

.orbit-visual { position: relative; width: 560px; height: 560px; margin: 0 auto; }

.orbit-hub {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 116px; height: 116px; border-radius: 26px;
  background: #0c0c10;  /* the LGAIS logo: black square, yellow bolt (assets/logo-512.png) */
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 1px rgba(255, 183, 0, 0.25), 0 0 60px rgba(255, 183, 0, 0.3);
  z-index: 3;
  animation: orbit-hub-breathe 3.4s ease-in-out infinite;
}
@keyframes orbit-hub-breathe {
  0%, 100% { box-shadow: 0 0 0 1px rgba(255, 183, 0, 0.25), 0 0 45px rgba(255, 183, 0, 0.25); }
  50% { box-shadow: 0 0 0 1px rgba(255, 183, 0, 0.35), 0 0 85px rgba(255, 183, 0, 0.45); }
}
.orbit-hub svg { width: 62px; height: 62px; }

/* "LGAIS Lead Engine" — boxed pill just below the hub */
.orbit-badge {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, 84px);
  z-index: 3;
  font-family: var(--font-display); font-weight: 800; font-size: 0.9rem; letter-spacing: -0.02em;
  color: var(--accent); white-space: nowrap;
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: var(--radius-pill); padding: 0.4rem 1rem;
}

.orbit-ring { position: absolute; inset: 0; animation: orbit-spin 34s linear infinite; }
@keyframes orbit-spin { to { transform: rotate(360deg); } }

/* One arm per app: the line and its icon live in the SAME rotated element,
   both keyed to that arm's own --radius, so the icon stays welded to the
   end of its line as the ring spins, and the lines are different lengths. */
.orbit-arm {
  position: absolute; top: 50%; left: 50%;
  width: var(--radius); height: 0;
  transform-origin: left center;
  transform: rotate(var(--angle));
}
.orbit-line {
  position: absolute; left: 0; top: 0; width: 100%; height: 1px;
  transform: translateY(-50%);
  background: linear-gradient(to right, rgba(255, 183, 0, 0.12), rgba(255, 183, 0, 0.5) 55%, rgba(255, 183, 0, 0.9));
}
.orbit-particle {
  position: absolute; top: 0; left: 100%; width: 5px; height: 5px;
  border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 6px 1px rgba(255, 183, 0, 0.7);
  transform: translate(-50%, -50%);
  animation: orbit-particle-flow 3s linear infinite;
  animation-delay: var(--sdelay, 0s);
}
@keyframes orbit-particle-flow {
  0% { left: 100%; opacity: 0; }
  12% { opacity: 1; }
  85% { opacity: 1; }
  100% { left: 0; opacity: 0; }
}
.orbit-node {
  position: absolute; left: 100%; top: 0;
  transform: translate(-50%, -50%) rotate(calc(-1 * var(--angle)));
}
.orbit-node-inner {
  position: relative; display: block;
  animation: orbit-counter 34s linear infinite;
}
@keyframes orbit-counter { to { transform: rotate(-360deg); } }
/* white rounded-square card holding the logo (not a circle) */
.orbit-chip {
  display: flex; align-items: center; justify-content: center;
  width: 58px; height: 58px; border-radius: 15px;
  background: var(--p-white-100);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
}
.orbit-icon { display: block; width: 34px; height: 34px; object-fit: contain; }
/* role label under each card — says what the tool does in the system */
.orbit-node-label {
  position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  font-size: 0.75rem; font-weight: 600; white-space: nowrap;
  color: var(--text-secondary);
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: var(--radius-pill); padding: 0.2rem 0.6rem;
}


/* The same 6 steps as a numbered list: visible on phones only (the circle is too small to read there),
   kept for screen readers on bigger screens, where the circle itself is decorative. */
.system-steps {
  list-style: none;
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
@media (max-width: 640px) {
  .system-visual { display: none; }
  .system-steps {
    position: relative; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal;
    display: grid; max-width: 320px; margin: 0 auto;
  }
  /* thin amber line joining the steps, running behind the logo cards */
  .system-steps::before {
    content: ''; position: absolute; left: 22px; top: 1.6rem; bottom: 1.6rem; width: 1px;
    background: linear-gradient(to bottom, rgba(255, 183, 0, 0.2), rgba(255, 183, 0, 0.7));
  }
  .system-steps li { display: flex; align-items: center; gap: 1rem; padding: 0.55rem 0; font-weight: 600; color: var(--text); }
  .system-steps .orbit-chip { position: relative; width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0; }
  .system-steps .orbit-icon { width: 26px; height: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .orbit-ring, .orbit-node-inner, .orbit-particle, .orbit-hub { animation: none !important; }
}

/* ==========================================================================
   2026-10-02 overhaul additions
   ========================================================================== */
/* Small amber section labels above each h2 (restored on Karl's request) */
.section-label, .eyebrow {
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 0.85rem;
}
.eyebrow { margin-bottom: 1.1rem; }

/* Hero: highlight the promise in amber text (a marker band read badly on the dark page) */
.hl { color: var(--accent); white-space: nowrap; }  /* the highlighted phrase never splits across lines */

/* Homepage section headings sit centred, matching the centred hero */
:is(#system, #services, #work, #how-it-works, #testimonials, #about, #faq, #contact) > :is(.section-label, h2) {
  text-align: center; margin-left: auto; margin-right: auto;
}
#faq .faq-list { margin: 0 auto; }

/* Testimonials: Marielle-style card (photo, name, role, quote, the real Slack screenshot) */
.testimonial-card {
  max-width: 760px; margin: 0 auto;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 2rem;
}
.testimonial-header { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 1.25rem; }
.testimonial-avatar { width: 48px; height: 48px; object-fit: contain; flex-shrink: 0; }
.testimonial-name { font-weight: 600; color: var(--text); }
.testimonial-role { font-size: 0.85rem; color: var(--text-muted); }
.testimonial-quote { font-size: 1.1rem; line-height: 1.6; color: var(--text-secondary); }
@media (max-width: 640px) { .testimonial-card { padding: 1.5rem; } }
/* Footer divider runs edge to edge like the footer band (the old border-top only spanned the 1100px box) */
footer::before {
  content: ''; position: absolute; top: 0; left: -100vmax; right: -100vmax;
  height: 1px; background: var(--border);
}
/* Proof-frame caption: the tool's icon + the real campaign name (no fake URL) */
.proof-source { display: flex; align-items: center; justify-content: center; gap: 0.45rem; color: var(--text-secondary); font-weight: 500; white-space: normal; line-height: 1.3; }
.proof-source img { width: 14px; height: 14px; border-radius: 3px; flex-shrink: 0; }

/* Tool pages: the FAQ is its own banded section and its heading is centred, like the homepage FAQ */
.tool-page .faq-section {
  margin-top: 5rem; padding: 5.5rem 0;
  background: var(--bg-band); box-shadow: 0 0 0 100vmax var(--bg-band); clip-path: inset(0 -100vmax);
}
.tool-page:has(> .faq-section:last-child) { padding-bottom: 0; }  /* band runs straight into the Contact band below */
.tool-page .faq-section > :is(.section-label, h2) { text-align: center; }
.tool-page .faq-section > h2, .tool-page .faq-list { margin-left: auto; margin-right: auto; }

/* Closing Contact section on case-study and tool pages: the same section as the homepage Contact,
   on the deepest colour so it runs into the footer */
section.cta-band { background: var(--bg-deep); box-shadow: 0 0 0 100vmax var(--bg-deep); clip-path: inset(0 -100vmax); }
.cta-band > :is(.section-label, h2) { text-align: center; margin-left: auto; margin-right: auto; }
.proof .cta-row { margin-top: 0; }

/* Footer brand column: the LGAIS logo with its wordmark, the Instantly partner badge under it.
   Phones and tablets: it runs across the top, the four link columns sit 2 x 2 below. */
.footer-cols { grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr)); }
.footer-brand { gap: 1.1rem; }
.footer-brand .footer-logo { display: inline-flex; align-self: flex-start; font-size: 1.05rem; color: var(--text); padding: 0.55rem 0; }  /* 44px tap height */
.footer-brand .footer-logo:hover { color: var(--text); }
.footer-badge { width: 64px; height: auto; }
@media (max-width: 1023px) {
  .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; gap: 1rem; }
}