/* ============================================
   Design tokens
============================================ */
:root {
  --bg: #08080c;
  --bg-2: #0e0e15;
  --surface: #12121c;
  --surface-2: #1a1a26;
  --line: rgba(255,255,255,0.08);
  --line-strong: rgba(255,255,255,0.14);

  --text: #ffffff;
  --text-2: #a8a8b8;
  --text-3: #6e6e80;

  --accent: #c8ff37;
  --accent-2: #a5e524;
  --accent-glow: rgba(200, 255, 55, 0.35);
  --indigo: #6366f1;
  --pink: #ec4899;
  --danger: #ef4444;

  --grad: linear-gradient(135deg, #c8ff37 0%, #6ee7b7 50%, #6366f1 100%);
  --grad-2: linear-gradient(135deg, #c8ff37 0%, #fde047 100%);

  --radius: 16px;
  --radius-sm: 10px;
  --radius-lg: 24px;

  --shadow: 0 20px 60px -20px rgba(0,0,0,0.6);
  --shadow-glow: 0 0 40px var(--accent-glow);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  --container: 1200px;
}

/* ============================================
   Base
============================================ */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
}

body {
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  cursor: default;
}

img, svg { display: block; max-width: 100%; }

h1, h2, h3, h4 {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0;
}

p { margin: 0; }

a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s var(--ease);
}

button {
  font-family: inherit;
  border: none;
  background: none;
  color: inherit;
  cursor: pointer;
}

input, select, textarea {
  font-family: inherit;
  font-size: 15px;
}

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

/* ============================================
   Animated background
============================================ */
.bg-mesh {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.5;
  animation: float 18s ease-in-out infinite;
}
.blob-1 {
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(200, 255, 55, 0.4), transparent 70%);
  top: -200px; left: -150px;
}
.blob-2 {
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.4), transparent 70%);
  top: 30%; right: -150px;
  animation-delay: -6s;
}
.blob-3 {
  width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(236, 72, 153, 0.25), transparent 70%);
  bottom: -300px; left: 30%;
  animation-delay: -12s;
}
@keyframes float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(80px, -60px) scale(1.1); }
  66% { transform: translate(-60px, 40px) scale(0.95); }
}
.grain {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.15 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.4;
  mix-blend-mode: overlay;
}

/* ============================================
   Scroll progress
============================================ */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: var(--grad);
  z-index: 1000;
  transition: width 0.05s linear;
  box-shadow: 0 0 12px var(--accent-glow);
}

/* ============================================
   Navigation
============================================ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 20px 0;
  transition: all 0.3s var(--ease);
}
.nav.scrolled {
  padding: 12px 0;
  background: rgba(8, 8, 12, 0.7);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.01em;
}
/* Skilled Axis SA monogram — bold letterforms above a thin axis line.
   The horizontal line + two end-tick markers evoke a coordinate axis
   ("Axis"), and the heavy SA glyphs convey precision craft ("Skilled"). */
.logo-mark {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 38px;
  padding: 0 10px 5px;
  background: var(--accent);
  color: #000;
  border-radius: 10px;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 800;
  font-size: 15px;
  line-height: 1;
  letter-spacing: -0.04em;
  box-shadow: 0 0 20px var(--accent-glow), inset 0 -1px 0 rgba(0,0,0,0.08);
  transition: transform 0.3s var(--ease);
}
/* Horizontal axis line beneath the SA letters */
.logo-mark::after {
  content: '';
  position: absolute;
  bottom: 5px;
  left: 8px;
  right: 8px;
  height: 1.6px;
  background: rgba(0,0,0,0.65);
  border-radius: 1px;
}
/* Two end-tick markers on the axis (like graph axis ticks) */
.logo-mark::before {
  content: '';
  position: absolute;
  bottom: 3px;
  left: 7px;
  width: 2px;
  height: 5px;
  background: rgba(0,0,0,0.65);
  border-radius: 1px;
  box-shadow: 24px 0 0 rgba(0,0,0,0.65);
}
.logo:hover .logo-mark {
  transform: rotate(-4deg) scale(1.06);
}
.logo:hover .logo-mark::before,
.logo:hover .logo-mark::after {
  background: rgba(0,0,0,0.85);
}
.logo-text .dot {
  color: var(--accent);
}
.nav-links {
  display: flex;
  gap: 4px;
  align-items: center;
}
.nav-links > a,
.nav-trigger {
  padding: 8px 12px;
  font-size: 14px;
  color: var(--text-2);
  font-weight: 500;
  border-radius: 8px;
  transition: all 0.2s var(--ease);
  position: relative;
  background: none;
  border: none;
  font-family: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* A menu item is a NAME, not a paragraph — it must never break across
     lines. Without this, "Write for Us" split into three stacked lines
     ("Write" / "for" / "Us") as soon as the bar ran short of room, which is
     exactly what happens once the menu grows. Reported 2026-08-04. */
  white-space: nowrap;
}
.nav-links > a:hover,
.nav-trigger:hover {
  color: var(--text);
  background: rgba(255,255,255,0.05);
}

/* ============================================
   Dropdown nav (Services)
============================================ */
.nav-item {
  position: relative;
}
.nav-item.has-dropdown::after {
  /* Invisible bridge so hover doesn't break across the gap */
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 18px;
}
.nav-chev {
  width: 12px;
  height: 12px;
  transition: transform 0.25s var(--ease);
  flex-shrink: 0;
}
.nav-item:hover .nav-chev,
.nav-item.open .nav-chev {
  transform: rotate(180deg);
  color: var(--accent);
}
.nav-item:hover .nav-trigger,
.nav-item.open .nav-trigger {
  color: var(--text);
  background: rgba(255,255,255,0.05);
}

.dropdown {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  min-width: 360px;
  background: rgba(14, 14, 22, 0.92);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  backdrop-filter: blur(24px) saturate(140%);
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  padding: 8px;
  box-shadow:
    0 24px 60px -12px rgba(0, 0, 0, 0.7),
    0 0 0 1px rgba(200, 255, 55, 0.04) inset,
    0 -1px 0 rgba(255, 255, 255, 0.04) inset;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0s linear 0.25s;
  z-index: 200;
}
.dropdown::before {
  content: '';
  position: absolute;
  top: -7px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 12px;
  height: 12px;
  background: rgba(14, 14, 22, 0.92);
  border-left: 1px solid var(--line-strong);
  border-top: 1px solid var(--line-strong);
  border-top-left-radius: 3px;
}
.nav-item:hover .dropdown,
.nav-item.open .dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0s linear 0s;
}

.dropdown-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 10px;
  transition: background 0.2s var(--ease);
  text-decoration: none;
}
.dropdown-item:hover {
  background: rgba(200, 255, 55, 0.08);
}
.dropdown-icon {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  background: rgba(200, 255, 55, 0.08);
  border: 1px solid rgba(200, 255, 55, 0.2);
  color: var(--accent);
  border-radius: 10px;
  transition: all 0.25s var(--ease);
}
.dropdown-icon svg {
  width: 18px;
  height: 18px;
}
.dropdown-item:hover .dropdown-icon {
  background: var(--accent);
  color: #000;
  border-color: var(--accent);
  box-shadow: 0 6px 18px -6px var(--accent-glow);
}
.dropdown-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.dropdown-text strong {
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.dropdown-text span {
  color: var(--text-3);
  font-size: 12px;
  line-height: 1.4;
}
.dropdown-footer {
  margin-top: 6px;
  padding: 12px 14px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  color: var(--text-3);
}
.dropdown-footer a {
  color: var(--accent);
  font-weight: 600;
  white-space: nowrap;
  transition: color 0.2s var(--ease);
}
.dropdown-footer a:hover { color: var(--accent-2); }

/* Mobile menu grouping for dropdown */
.mobile-group {
  display: flex;
  flex-direction: column;
  padding-bottom: 8px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--line);
}
.mobile-group-label {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  padding: 10px 0 4px;
}
.mobile-group a {
  padding: 10px 0 10px 14px !important;
  font-size: 16px !important;
  border-bottom: none !important;
  color: var(--text-2) !important;
  position: relative;
}
.mobile-group a::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 4px;
  height: 4px;
  background: var(--accent);
  border-radius: 50%;
  transform: translateY(-50%);
  opacity: 0.6;
}
.mobile-group a:hover { color: var(--text) !important; }

/* ============================================
   BLOG
============================================ */
.blog-hero { padding: 160px 0 60px; }

.blog-cat-nav {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 36px 0 0;
}
.blog-cat-link {
  padding: 10px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-2);
  transition: all 0.2s var(--ease);
}
.blog-cat-link:hover {
  background: var(--surface-2);
  color: var(--text);
  border-color: rgba(200,255,55,0.3);
}
.blog-cat-link.active {
  background: var(--accent);
  color: #000;
  border-color: var(--accent);
  box-shadow: 0 6px 20px -8px var(--accent-glow);
}

.blog-stats {
  display: flex;
  gap: 36px;
  flex-wrap: wrap;
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}
.blog-stat { display: flex; flex-direction: column; gap: 4px; }
.blog-stat strong {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.9rem;
  color: var(--accent);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
}
.blog-stat span { font-size: 0.82rem; color: var(--text-3); }

/* Featured post */
.blog-feature {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  background: var(--surface);
  border: 1px solid rgba(200,255,55,0.25);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all 0.35s var(--ease);
  position: relative;
  margin-bottom: 24px;
}
.blog-feature:hover {
  border-color: rgba(200,255,55,0.5);
  transform: translateY(-4px);
  box-shadow: 0 30px 80px -30px var(--accent-glow);
}
.blog-feature::before {
  content: 'Featured';
  position: absolute;
  top: 20px; left: 20px;
  z-index: 2;
  background: var(--accent);
  color: #000;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 6px;
  box-shadow: 0 6px 18px -6px var(--accent-glow);
}
.blog-feature-cover {
  min-height: 360px;
  background: linear-gradient(135deg, #c8ff37 0%, #6ee7b7 50%, #6366f1 100%);
  position: relative;
  overflow: hidden;
}
.blog-feature-body {
  padding: 56px 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.blog-feature-body h2 {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  margin: 14px 0 18px;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.blog-feature-body .excerpt {
  font-size: 1.02rem;
  color: var(--text-2);
  line-height: 1.6;
  margin-bottom: 28px;
}
@media (max-width: 900px) {
  .blog-feature { grid-template-columns: 1fr; }
  .blog-feature-cover { min-height: 220px; }
  .blog-feature-body { padding: 36px 28px; }
}

/* Category section */
.blog-cat-section { padding: 90px 0; border-top: 1px solid var(--line); scroll-margin-top: 100px; }
.blog-cat-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}
.blog-cat-head h2 {
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  gap: 12px;
}
.blog-cat-head h2 .cat-emoji {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  font-size: 1.4rem;
  flex-shrink: 0;
}
.cat-emoji.saas { background: rgba(0,212,255,0.12); border: 1px solid rgba(0,212,255,0.3); }
.cat-emoji.technology { background: rgba(200,255,55,0.12); border: 1px solid rgba(200,255,55,0.3); }
.cat-emoji.business { background: rgba(236,72,153,0.12); border: 1px solid rgba(236,72,153,0.3); }
.cat-emoji.apps { background: rgba(245,158,11,0.12); border: 1px solid rgba(245,158,11,0.3); }

.blog-cat-head .lead {
  color: var(--text-2);
  max-width: 480px;
  margin-top: 10px;
  font-size: 0.97rem;
}
.blog-cat-head-link {
  color: var(--accent);
  font-weight: 600;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: gap 0.2s var(--ease);
  white-space: nowrap;
}
.blog-cat-head-link:hover { gap: 12px; }

/* Blog grid */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  gap: 24px;
}

/* Blog card */
.blog-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: all 0.3s var(--ease);
  text-decoration: none;
}
.blog-card:hover {
  transform: translateY(-6px);
  border-color: var(--line-strong);
  background: var(--surface-2);
  box-shadow: 0 24px 48px -24px rgba(0,0,0,0.6);
}
.blog-card-cover {
  aspect-ratio: 16 / 10;
  position: relative;
  overflow: hidden;
}
.blog-card-cover .cover-art {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
}
.blog-card-cover::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.3) 100%);
  pointer-events: none;
}
.blog-card:hover .blog-card-cover { filter: brightness(1.1); }

/* Cover gradients per category */
.cover-saas      { background: linear-gradient(135deg, #00d4ff 0%, #7c3aed 100%); }
.cover-saas-2  { background: linear-gradient(135deg, #1e3a8a 0%, #06b6d4 100%); }
.cover-saas-3  { background: linear-gradient(135deg, #06b6d4 0%, #0e7490 50%, #1e40af 100%); }

.cover-technology   { background: linear-gradient(135deg, #84cc16 0%, #14b8a6 100%); }
.cover-technology-2 { background: linear-gradient(135deg, #c8ff37 0%, #059669 100%); }
.cover-technology-3 { background: linear-gradient(135deg, #064e3b 0%, #a3e635 100%); }

.cover-business   { background: linear-gradient(135deg, #ec4899 0%, #f97316 100%); }
.cover-business-2 { background: linear-gradient(135deg, #7c3aed 0%, #ec4899 100%); }
.cover-business-3 { background: linear-gradient(135deg, #be123c 0%, #9333ea 100%); }

.cover-apps    { background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%); }
.cover-apps-2 { background: linear-gradient(135deg, #fbbf24 0%, #f97316 100%); }
.cover-apps-3 { background: linear-gradient(135deg, #fb923c 0%, #dc2626 50%, #7c2d12 100%); }

.blog-card-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Category tags */
.blog-tag {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 14px;
  align-self: flex-start;
}
.blog-tag-saas { background: rgba(0, 212, 255, 0.12); color: #5cdfff; border: 1px solid rgba(0,212,255,0.3); }
.blog-tag-technology { background: rgba(200, 255, 55, 0.12); color: var(--accent); border: 1px solid rgba(200,255,55,0.3); }
.blog-tag-business { background: rgba(236, 72, 153, 0.12); color: #f472b6; border: 1px solid rgba(236,72,153,0.3); }
.blog-tag-apps { background: rgba(245, 158, 11, 0.12); color: #fbbf24; border: 1px solid rgba(245,158,11,0.3); }

.blog-card h3 {
  font-size: 1.2rem;
  margin-bottom: 10px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--text);
}
.blog-card:hover h3 { color: var(--accent); }
.blog-card-excerpt {
  color: var(--text-2);
  font-size: 0.93rem;
  line-height: 1.55;
  margin-bottom: 20px;
  flex: 1;
}
.blog-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 0.82rem;
  color: var(--text-3);
}
.blog-meta .avatar {
  width: 30px; height: 30px;
  font-size: 11px;
  flex-shrink: 0;
}
.blog-meta-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.blog-meta-text strong { color: var(--text-2); font-size: 0.85rem; font-weight: 600; }

/* Newsletter signup */
.newsletter-block {
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid rgba(200,255,55,0.2);
  border-radius: var(--radius-lg);
  padding: 60px 56px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.newsletter-block::before {
  content: '';
  position: absolute;
  top: -120px; right: -120px;
  width: 360px; height: 360px;
  background: radial-gradient(circle, rgba(200,255,55,0.2), transparent 70%);
  pointer-events: none;
}
.newsletter-block::after {
  content: '';
  position: absolute;
  bottom: -120px; left: -120px;
  width: 320px; height: 320px;
  background: radial-gradient(circle, rgba(99,102,241,0.18), transparent 70%);
  pointer-events: none;
}
.newsletter-block > * { position: relative; z-index: 1; }
.newsletter-block h2 {
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  margin-bottom: 14px;
  letter-spacing: -0.02em;
}
.newsletter-block p { color: var(--text-2); margin-bottom: 18px; line-height: 1.6; }
.newsletter-features {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 14px;
}
.newsletter-features li {
  list-style: none;
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 0.9rem;
  color: var(--text-2);
}
.newsletter-features li svg { width: 14px; height: 14px; color: var(--accent); flex-shrink: 0; }
.newsletter-form {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
}
.newsletter-form input {
  flex: 1;
  padding: 14px 18px;
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--text);
  font-size: 15px;
  transition: all 0.2s var(--ease);
}
.newsletter-form input::placeholder { color: var(--text-3); }
.newsletter-form input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-glow);
}
.newsletter-form button {
  padding: 14px 26px;
  background: var(--accent);
  color: #000;
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
  transition: all 0.2s var(--ease);
}
.newsletter-form button:hover {
  background: var(--accent-2);
  transform: translateY(-2px);
}
.newsletter-note {
  font-size: 0.78rem;
  color: var(--text-3);
}
@media (max-width: 900px) {
  .newsletter-block { grid-template-columns: 1fr; padding: 44px 28px; gap: 32px; }
  .newsletter-form { flex-direction: column; }
  .newsletter-form button { width: 100%; }
}
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 30px;
  padding: 6px;
}
.nav-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: all 0.3s var(--ease);
}
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu {
  display: none;
  flex-direction: column;
  gap: 8px;
  padding: 20px 24px;
  background: var(--bg);
  border-top: 1px solid var(--line);
}
.mobile-menu.open { display: flex; }
.mobile-menu a {
  padding: 12px 0;
  font-size: 18px;
  font-weight: 600;
  border-bottom: 1px solid var(--line);
}
.mobile-menu a:last-child { border-bottom: none; margin-top: 12px; justify-content: center; }

/* ============================================
   Buttons
============================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  font-family: inherit;
  font-weight: 600;
  font-size: 15px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.25s var(--ease);
  white-space: nowrap;
  letter-spacing: -0.01em;
  position: relative;
  overflow: hidden;
}
.btn-primary {
  background: var(--accent);
  color: #000;
  box-shadow: 0 8px 24px -8px var(--accent-glow), inset 0 -2px 0 rgba(0,0,0,0.08);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 40px -8px var(--accent-glow), inset 0 -2px 0 rgba(0,0,0,0.08);
}
.btn-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.5) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 0.6s var(--ease);
}
.btn-primary:hover::before { transform: translateX(100%); }
.btn-ghost {
  background: rgba(255,255,255,0.04);
  color: var(--text);
  border: 1px solid var(--line-strong);
  backdrop-filter: blur(10px);
}
.btn-ghost:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.25);
  transform: translateY(-2px);
}
.btn-sm { padding: 9px 16px; font-size: 13px; }
.btn-lg { padding: 16px 28px; font-size: 16px; }
.btn-block { width: 100%; }

/* ============================================
   HERO
============================================ */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 140px 0 80px;
  overflow: hidden;
}
.hero-inner {
  position: relative;
  z-index: 2;
  max-width: 980px;
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  background: rgba(200, 255, 55, 0.08);
  border: 1px solid rgba(200, 255, 55, 0.25);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  color: var(--accent);
  margin-bottom: 32px;
}
.pulse {
  width: 8px; height: 8px;
  background: var(--accent);
  border-radius: 50%;
  position: relative;
}
.pulse::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--accent);
  border-radius: 50%;
  animation: pulse 1.8s ease-out infinite;
}
@keyframes pulse {
  0% { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(3.5); opacity: 0; }
}

.hero-title {
  font-size: clamp(2.5rem, 7vw, 5.5rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
  margin-bottom: 28px;
  font-weight: 700;
}
.grad {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-block;
}
.underline-stroke {
  position: relative;
  display: inline-block;
}
.underline-stroke::after {
  content: '';
  position: absolute;
  left: -2%; right: -2%;
  bottom: 6%;
  height: 24%;
  background: var(--accent);
  z-index: -1;
  border-radius: 6px;
  transform: skewX(-6deg);
  opacity: 0.85;
}
.hero-sub {
  font-size: clamp(1rem, 1.5vw, 1.18rem);
  color: var(--text-2);
  max-width: 620px;
  margin-bottom: 40px;
  line-height: 1.6;
}
.hero-cta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 48px;
}
.hero-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--text-2);
  font-size: 14px;
}
.stars {
  display: inline-flex;
  gap: 2px;
  color: var(--accent);
}
.stars svg { width: 18px; height: 18px; }
.stars.sm svg { width: 14px; height: 14px; }

/* Hero visual */
.hero-visual {
  position: absolute;
  top: 50%;
  right: -180px;
  transform: translateY(-50%);
  width: 600px; height: 600px;
  z-index: 1;
  pointer-events: none;
}
.orb {
  position: absolute;
  inset: 30%;
  background: var(--grad);
  border-radius: 50%;
  filter: blur(40px);
  opacity: 0.5;
  animation: pulse-orb 6s ease-in-out infinite;
}
@keyframes pulse-orb {
  0%, 100% { transform: scale(1); opacity: 0.45; }
  50% { transform: scale(1.15); opacity: 0.65; }
}
.ring {
  position: absolute;
  border: 1.5px solid rgba(200, 255, 55, 0.2);
  border-radius: 50%;
  animation: rotate 30s linear infinite;
}
.r1 { inset: 20%; border-top-color: var(--accent); }
.r2 { inset: 10%; border-right-color: var(--indigo); animation-duration: 45s; animation-direction: reverse; }
.r3 { inset: 0; border-bottom-color: rgba(255,255,255,0.15); animation-duration: 60s; }
@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ============================================
   Marquee
============================================ */
.marquee-wrap {
  padding: 48px 0;
  border-block: 1px solid var(--line);
  background: rgba(255,255,255,0.015);
  overflow: hidden;
}
.marquee-label {
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 24px;
}
.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.marquee-track {
  display: inline-flex;
  align-items: center;
  gap: 48px;
  white-space: nowrap;
  animation: marquee 45s linear infinite;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: 22px;
  color: var(--text-2);
}
.marquee-track span:not(:nth-child(2n)) {
  color: var(--text);
}
.marquee-track span:nth-child(2n) { color: var(--accent); opacity: 0.5; }
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ============================================
   Section common
============================================ */
section { padding: 120px 0; position: relative; }
@media (max-width: 768px) { section { padding: 80px 0; } }

.section-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 64px;
}
.eyebrow {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 16px;
  padding: 6px 14px;
  border: 1px solid rgba(200, 255, 55, 0.3);
  border-radius: 999px;
}
.eyebrow-dark {
  color: #000;
  border-color: rgba(0,0,0,0.4);
}
.section-head h2 {
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  margin-bottom: 16px;
}
.section-head .lead {
  font-size: 1.1rem;
  color: var(--text-2);
}

/* ============================================
   Problem
============================================ */
.problem-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}
.problem-card {
  padding: 32px 28px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: all 0.3s var(--ease);
}
.problem-card:hover {
  transform: translateY(-4px);
  border-color: var(--line-strong);
  background: var(--surface-2);
}
.problem-icon {
  width: 48px; height: 48px;
  display: grid;
  place-items: center;
  background: rgba(200, 255, 55, 0.08);
  color: var(--accent);
  border-radius: 12px;
  margin-bottom: 20px;
}
.problem-icon svg { width: 22px; height: 22px; }
.problem-card h3 {
  font-size: 1.2rem;
  margin-bottom: 10px;
}
.problem-card p {
  color: var(--text-2);
  font-size: 0.95rem;
  line-height: 1.55;
}

/* ============================================
   Services
============================================ */
.service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
}
.service-card {
  position: relative;
  padding: 40px 36px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  transition: all 0.4s var(--ease);
  transform-style: preserve-3d;
  will-change: transform;
}
.service-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  padding: 1px;
  background: linear-gradient(135deg, transparent, rgba(200, 255, 55, 0.4), transparent 60%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}
.service-card:hover::before { opacity: 1; }
.service-card:hover {
  background: var(--surface-2);
  transform: translateY(-6px);
}
.service-card.featured {
  background: linear-gradient(180deg, rgba(200, 255, 55, 0.06), var(--surface));
  border-color: rgba(200, 255, 55, 0.2);
}
.ribbon {
  position: absolute;
  top: 16px; right: 16px;
  background: var(--accent);
  color: #000;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 6px;
}
.service-num {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-3);
  margin-bottom: 16px;
  letter-spacing: 0.1em;
}
.service-icon {
  width: 60px; height: 60px;
  display: grid;
  place-items: center;
  background: var(--accent);
  color: #000;
  border-radius: 14px;
  margin-bottom: 24px;
  box-shadow: 0 10px 30px -10px var(--accent-glow);
}
.service-icon svg { width: 28px; height: 28px; }
.service-card h3 {
  font-size: 1.6rem;
  margin-bottom: 14px;
}
.service-desc {
  color: var(--text-2);
  margin-bottom: 24px;
  font-size: 0.97rem;
  line-height: 1.6;
}
.service-list {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.service-list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 0.93rem;
  color: var(--text-2);
  line-height: 1.5;
}
.service-list svg {
  width: 16px; height: 16px;
  color: var(--accent);
  flex-shrink: 0;
  margin-top: 3px;
}
.service-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  gap: 16px;
  flex-wrap: wrap;
}
.price-from {
  font-size: 0.85rem;
  color: var(--text-3);
}
.price-from strong {
  color: var(--text);
  font-size: 1.05rem;
}
.service-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent);
  font-weight: 600;
  font-size: 14px;
  transition: gap 0.2s var(--ease);
}
.service-link:hover { gap: 12px; }

/* ============================================
   Process
============================================ */
.process-timeline {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
}
.process-line {
  position: absolute;
  left: 35px;
  top: 30px; bottom: 30px;
  width: 2px;
  background: linear-gradient(180deg, var(--accent), transparent);
}
.process-step {
  display: flex;
  gap: 32px;
  padding: 24px 0;
  align-items: flex-start;
}
.step-num {
  flex-shrink: 0;
  width: 72px; height: 72px;
  display: grid;
  place-items: center;
  background: var(--bg);
  border: 2px solid var(--accent);
  color: var(--accent);
  border-radius: 50%;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 1.4rem;
  position: relative;
  z-index: 2;
  transition: all 0.3s var(--ease);
}
.process-step:hover .step-num {
  background: var(--accent);
  color: #000;
  transform: scale(1.05);
  box-shadow: 0 0 30px var(--accent-glow);
}
.step-body {
  padding-top: 12px;
}
.step-body h3 {
  font-size: 1.4rem;
  margin-bottom: 10px;
}
.step-body p {
  color: var(--text-2);
  max-width: 580px;
}

/* ============================================
   Results / Stats
============================================ */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
  margin-bottom: 80px;
}
.stat {
  padding: 36px 28px;
  background: linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.stat::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--grad);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease);
}
.stat:hover::after { transform: scaleX(1); }
.stat-num {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  font-weight: 700;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1;
  margin-bottom: 12px;
}
.stat-label {
  color: var(--text-2);
  font-size: 0.95rem;
}

.case-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  gap: 24px;
}
.case-card {
  padding: 40px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  transition: all 0.3s var(--ease);
}
.case-card:hover {
  border-color: var(--line-strong);
  background: var(--surface-2);
  transform: translateY(-4px);
}
.case-tag {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
  font-weight: 600;
}
.case-card h3 {
  font-size: 1.5rem;
  margin-bottom: 16px;
  line-height: 1.2;
}
.case-card p {
  color: var(--text-2);
  font-style: italic;
  margin-bottom: 28px;
  padding-left: 16px;
  border-left: 3px solid var(--accent);
}
.case-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.case-stats div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.case-stats strong {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.5rem;
  color: var(--accent);
  font-weight: 700;
}
.case-stats span {
  font-size: 0.8rem;
  color: var(--text-3);
}

/* ============================================
   Differentiators
============================================ */
.strike {
  position: relative;
  color: var(--text-2);
}
.strike::after {
  content: '';
  position: absolute;
  left: -4%; right: -4%;
  top: 50%;
  height: 3px;
  background: var(--danger);
  transform: rotate(-2deg);
}
.compare-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
}
.compare-col {
  padding: 40px 36px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
}
.compare-bad {
  background: var(--surface);
  opacity: 0.85;
}
.compare-good {
  background: linear-gradient(180deg, rgba(200, 255, 55, 0.06), var(--surface));
  border-color: rgba(200, 255, 55, 0.25);
  box-shadow: 0 30px 80px -40px var(--accent-glow);
}
.compare-col h3 {
  font-size: 1.4rem;
  margin-bottom: 24px;
}
.compare-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.compare-col li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  color: var(--text-2);
  font-size: 0.97rem;
}
.compare-bad li { color: var(--text-3); }
.x, .check {
  flex-shrink: 0;
  width: 22px; height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-weight: 700;
  font-size: 12px;
  margin-top: 2px;
}
.x { background: rgba(239, 68, 68, 0.15); color: #fca5a5; }
.check { background: var(--accent); color: #000; }

/* ============================================
   About
============================================ */
.about-inner {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 80px;
  align-items: center;
}
@media (max-width: 900px) {
  .about-inner { grid-template-columns: 1fr; gap: 48px; }
}
.about-img {
  position: relative;
  aspect-ratio: 4/5;
  max-width: 420px;
}
.photo-frame {
  position: relative;
  width: 100%; height: 100%;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.photo-placeholder {
  width: 100%; height: 100%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--surface-2), var(--surface));
}
.photo-placeholder svg {
  width: 70%; height: auto;
}
.photo-deco {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  z-index: -1;
}
.photo-deco.d1 {
  width: 200px; height: 200px;
  background: var(--accent);
  top: -50px; left: -50px;
  opacity: 0.5;
}
.photo-deco.d2 {
  width: 250px; height: 250px;
  background: var(--indigo);
  bottom: -80px; right: -80px;
  opacity: 0.4;
}
.badge-floating {
  position: absolute;
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  padding: 14px 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  backdrop-filter: blur(20px);
  box-shadow: var(--shadow);
  animation: floatBadge 4s ease-in-out infinite;
}
.badge-floating strong {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.6rem;
  color: var(--accent);
}
.badge-floating span {
  font-size: 0.8rem;
  color: var(--text-2);
}
.b1 { top: 10%; left: -10%; }
.b2 { bottom: 12%; right: -12%; animation-delay: -2s; }
@keyframes floatBadge {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}
.about-text .eyebrow { margin-bottom: 18px; }
.about-text h2 {
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  margin-bottom: 22px;
}
.about-text p {
  color: var(--text-2);
  margin-bottom: 18px;
  line-height: 1.7;
}
.about-skills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 32px 0;
}
.skill-tag {
  padding: 8px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
  transition: all 0.2s var(--ease);
}
.skill-tag:hover {
  background: var(--accent);
  color: #000;
  border-color: var(--accent);
  transform: translateY(-2px);
}

/* ============================================
   Testimonials
============================================ */
.testi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}
.testi-card {
  padding: 32px 28px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: all 0.3s var(--ease);
  display: flex;
  flex-direction: column;
}
.testi-card:hover {
  transform: translateY(-4px);
  border-color: var(--line-strong);
  background: var(--surface-2);
}
.testi-card p {
  color: var(--text);
  font-size: 1rem;
  line-height: 1.6;
  margin: 16px 0 24px;
  flex: 1;
}
.testi-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  flex-shrink: 0;
}
.testi-meta strong {
  display: block;
  font-size: 0.95rem;
}
.testi-meta span {
  font-size: 0.82rem;
  color: var(--text-3);
}

/* ============================================
   FAQ
============================================ */
.faq-list {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.faq-item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: all 0.3s var(--ease);
}
.faq-item[open] {
  background: var(--surface-2);
  border-color: rgba(200, 255, 55, 0.25);
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-weight: 600;
  font-size: 1.05rem;
  transition: color 0.2s;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--accent); }
.chev {
  width: 18px; height: 18px;
  flex-shrink: 0;
  transition: transform 0.3s var(--ease);
  color: var(--accent);
}
.faq-item[open] .chev { transform: rotate(180deg); }
.faq-item p {
  padding: 0 24px 22px;
  color: var(--text-2);
  line-height: 1.7;
  animation: fadeIn 0.3s var(--ease);
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ============================================
   CTA Band
============================================ */
.cta-band {
  position: relative;
  background: var(--accent);
  color: #000;
  overflow: hidden;
  padding: 100px 0;
  margin-top: 80px;
}
.cta-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.cta-blob {
  position: absolute;
  width: 400px; height: 400px;
  border-radius: 50%;
  background: rgba(255,255,255,0.4);
  filter: blur(60px);
  top: -100px; right: -100px;
  animation: float 14s ease-in-out infinite;
}
.cta-blob-2 {
  background: rgba(99, 102, 241, 0.3);
  top: auto; right: auto;
  bottom: -100px; left: -100px;
  width: 500px; height: 500px;
  animation-delay: -7s;
}
.cta-inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
@media (max-width: 900px) {
  .cta-inner { grid-template-columns: 1fr; gap: 40px; }
}
.cta-text h2 {
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  margin-bottom: 20px;
  color: #000;
}
.grad-dark {
  background: linear-gradient(135deg, #000 0%, #1e3a8a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.cta-text p {
  color: rgba(0,0,0,0.7);
  font-size: 1.1rem;
  margin-bottom: 32px;
  max-width: 520px;
}
.cta-points {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cta-points div {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  color: #000;
  font-size: 0.97rem;
}
.cta-points svg {
  width: 18px; height: 18px;
  padding: 4px;
  background: #000;
  color: var(--accent);
  border-radius: 50%;
  flex-shrink: 0;
}

.cta-form {
  background: #fff;
  padding: 36px;
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 80px -20px rgba(0,0,0,0.25);
  position: relative;
}
.cta-form h3 {
  font-size: 1.4rem;
  margin-bottom: 24px;
  color: #000;
}
.form-row {
  margin-bottom: 16px;
}
.form-row label {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.form-row span {
  font-size: 13px;
  font-weight: 600;
  color: #333;
}
.form-row input,
.form-row select {
  width: 100%;
  padding: 13px 16px;
  background: #f7f7f9;
  border: 1.5px solid transparent;
  border-radius: 10px;
  color: #000;
  font-size: 15px;
  transition: all 0.2s var(--ease);
}
.form-row input:focus,
.form-row select:focus {
  outline: none;
  background: #fff;
  border-color: var(--accent-2);
  box-shadow: 0 0 0 4px rgba(200, 255, 55, 0.2);
}
.form-row input::placeholder { color: #aaa; }
.form-row input.invalid,
.form-row select.invalid {
  border-color: var(--danger);
  background: #fef2f2;
}
.cta-form .btn-primary {
  background: #000;
  color: var(--accent);
  margin-top: 8px;
}
.cta-form .btn-primary:hover { background: #1a1a1a; }
.form-note {
  display: block;
  margin-top: 12px;
  text-align: center;
  font-size: 12px;
  color: #888;
}
.form-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 24px;
  background: rgba(200, 255, 55, 0.15);
  border-radius: 12px;
  margin-top: 12px;
  color: #000;
}
.form-success svg {
  width: 42px; height: 42px;
  color: #15803d;
  margin-bottom: 10px;
}
.form-success strong { font-size: 1.05rem; margin-bottom: 4px; }
.form-success span { font-size: 0.9rem; color: rgba(0,0,0,0.7); }

/* ============================================
   Footer
============================================ */
.footer {
  background: var(--bg);
  border-top: 1px solid var(--line);
  padding: 80px 0 24px;
}
.footer-inner {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.2fr;
  gap: 48px;
  margin-bottom: 64px;
}
@media (max-width: 768px) {
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-brand { grid-column: 1 / -1; }
}
.footer-brand p {
  color: var(--text-2);
  font-size: 0.93rem;
  max-width: 320px;
  margin-top: 16px;
  line-height: 1.6;
}
.footer-col h4 {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-3);
  margin-bottom: 18px;
}
.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer-col li a {
  color: var(--text-2);
  font-size: 0.93rem;
  transition: color 0.2s;
}
.footer-col li a:hover { color: var(--accent); }
.socials {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}
.socials a {
  width: 38px; height: 38px;
  display: grid;
  place-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--text-2);
  transition: all 0.2s var(--ease);
}
.socials a:hover {
  background: var(--accent);
  color: #000;
  border-color: var(--accent);
  transform: translateY(-3px);
}
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-size: 0.85rem;
  color: var(--text-3);
  flex-wrap: wrap;
  gap: 12px;
}

/* ============================================
   Service taglines (new)
============================================ */
.service-tagline {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 14px;
  letter-spacing: -0.01em;
}

/* ============================================
   QUALIFIER section (who this is / isn't for)
============================================ */
.qualify { padding-block: 120px; }
.qualify-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 24px;
}
.qualify-col {
  padding: 40px 36px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--surface);
  transition: all 0.3s var(--ease);
}
.qualify-col:hover { transform: translateY(-4px); }
.qualify-good {
  background: linear-gradient(180deg, rgba(200, 255, 55, 0.06), var(--surface));
  border-color: rgba(200, 255, 55, 0.22);
  box-shadow: 0 30px 80px -40px var(--accent-glow);
}
.qualify-bad { opacity: 0.92; }
.qualify-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 28px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
}
.q-icon {
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  font-weight: 700;
  font-size: 1.2rem;
  flex-shrink: 0;
}
.q-good {
  background: var(--accent);
  color: #000;
  box-shadow: 0 8px 24px -10px var(--accent-glow);
}
.q-bad {
  background: rgba(239, 68, 68, 0.15);
  color: #fca5a5;
}
.qualify-head h3 {
  font-size: 1.3rem;
  margin: 0;
}
.qualify-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.qualify-col li {
  font-size: 0.97rem;
  line-height: 1.55;
  color: var(--text-2);
  padding-left: 22px;
  position: relative;
}
.qualify-col li::before {
  content: '';
  position: absolute;
  left: 0; top: 10px;
  width: 8px; height: 8px;
  border-radius: 2px;
}
.qualify-good li::before { background: var(--accent); }
.qualify-bad li::before { background: var(--danger); opacity: 0.7; }
.qualify-col li strong { color: var(--text); }

/* ============================================
   DELIVERABLES grid
============================================ */
.deliverables { padding-block: 120px; }
.deliv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}
.deliv-card {
  padding: 32px 28px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: all 0.35s var(--ease);
  position: relative;
  overflow: hidden;
}
.deliv-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: radial-gradient(circle at 0% 0%, rgba(200, 255, 55, 0.08), transparent 50%);
  opacity: 0;
  transition: opacity 0.4s var(--ease);
  pointer-events: none;
}
.deliv-card:hover {
  border-color: rgba(200, 255, 55, 0.3);
  transform: translateY(-4px);
}
.deliv-card:hover::before { opacity: 1; }
.deliv-icon {
  width: 48px; height: 48px;
  display: grid;
  place-items: center;
  background: rgba(200, 255, 55, 0.1);
  color: var(--accent);
  border: 1px solid rgba(200, 255, 55, 0.25);
  border-radius: 12px;
  margin-bottom: 22px;
}
.deliv-icon svg { width: 22px; height: 22px; }
.deliv-card h3 {
  font-size: 1.15rem;
  margin-bottom: 12px;
}
.deliv-card p {
  color: var(--text-2);
  font-size: 0.93rem;
  line-height: 1.6;
}

/* ============================================
   PRICING
============================================ */
.pricing { padding-block: 120px; }
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 24px;
  align-items: stretch;
  margin-bottom: 48px;
}
.price-card {
  position: relative;
  padding: 40px 32px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  transition: all 0.4s var(--ease);
}
.price-card:hover {
  transform: translateY(-6px);
  background: var(--surface-2);
  border-color: var(--line-strong);
}
.price-featured {
  background: linear-gradient(180deg, rgba(200, 255, 55, 0.08), var(--surface));
  border-color: rgba(200, 255, 55, 0.35);
  box-shadow: 0 30px 80px -30px var(--accent-glow);
  transform: translateY(-12px);
}
.price-featured:hover { transform: translateY(-18px); }
.price-ribbon {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: #000;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 8px 24px -8px var(--accent-glow);
}
.price-tier {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--accent);
  margin-bottom: 16px;
}
.price-amount {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 12px;
}
.price-amount .amount {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 3rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.03em;
}
.price-featured .amount {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.price-amount .period {
  font-size: 0.95rem;
  color: var(--text-3);
  font-weight: 500;
}
.price-desc {
  color: var(--text-2);
  font-size: 0.93rem;
  margin-bottom: 28px;
  line-height: 1.55;
  min-height: 48px;
}
.price-list {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}
.price-list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 0.93rem;
  color: var(--text);
  line-height: 1.4;
}
.price-list li svg {
  width: 16px; height: 16px;
  color: var(--accent);
  flex-shrink: 0;
  margin-top: 2px;
}
.price-list li strong {
  color: var(--accent);
  font-weight: 700;
}
.price-list li em {
  color: var(--accent);
  font-style: normal;
  font-weight: 600;
  font-size: 0.82rem;
  background: rgba(200, 255, 55, 0.12);
  padding: 1px 6px;
  border-radius: 4px;
  margin-left: 4px;
}
.price-list li.muted {
  color: var(--text-3);
  text-decoration: line-through;
  text-decoration-color: rgba(255,255,255,0.15);
}
.price-list li.muted svg { color: var(--text-3); }

.pricing-extra {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  max-width: 900px;
  margin: 0 auto;
}
@media (max-width: 700px) {
  .pricing-extra { grid-template-columns: 1fr; }
  .price-featured { transform: none; }
  .price-featured:hover { transform: translateY(-6px); }
}
.extra-card {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: all 0.3s var(--ease);
}
.extra-card:hover {
  border-color: rgba(200, 255, 55, 0.25);
  background: var(--surface-2);
}
.extra-icon {
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  background: rgba(200, 255, 55, 0.1);
  color: var(--accent);
  border-radius: 12px;
  flex-shrink: 0;
}
.extra-icon svg { width: 20px; height: 20px; }
.extra-card > div:not(.extra-icon) {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.extra-card strong {
  font-size: 0.97rem;
  margin-bottom: 2px;
}
.extra-card span {
  font-size: 0.83rem;
  color: var(--text-3);
}
.extra-link {
  color: var(--accent);
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
  transition: gap 0.2s var(--ease);
}
.extra-link:hover { color: var(--accent-2); }

/* ============================================
   GUARANTEES
============================================ */
.guarantees { padding-block: 120px; }
.guarantee-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}
.guarantee-card {
  padding: 36px 30px;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: all 0.35s var(--ease);
  position: relative;
  overflow: hidden;
}
.guarantee-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  padding: 1px;
  background: linear-gradient(135deg, rgba(200, 255, 55, 0.4), transparent 50%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}
.guarantee-card:hover {
  transform: translateY(-6px);
}
.guarantee-card:hover::after { opacity: 1; }
.g-icon {
  width: 56px; height: 56px;
  display: grid;
  place-items: center;
  background: var(--accent);
  color: #000;
  border-radius: 14px;
  margin-bottom: 22px;
  box-shadow: 0 10px 30px -10px var(--accent-glow);
}
.g-icon svg { width: 26px; height: 26px; }
.guarantee-card h3 {
  font-size: 1.15rem;
  margin-bottom: 12px;
  line-height: 1.25;
}
.guarantee-card p {
  color: var(--text-2);
  font-size: 0.93rem;
  line-height: 1.6;
}

/* ============================================
   Step time chip (process)
============================================ */
.step-time {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-3);
  letter-spacing: -0.01em;
  margin-left: 4px;
}

/* ============================================
   CTA band — extra copy bits
============================================ */
.cta-sub {
  color: rgba(0,0,0,0.65) !important;
  font-size: 0.97rem !important;
  margin-top: -12px !important;
}
.form-lede {
  color: #666;
  font-size: 0.88rem;
  margin: -16px 0 20px;
}

/* ============================================
   Footer extras
============================================ */
.footer-tag {
  margin-top: 14px !important;
  font-size: 0.82rem !important;
  color: var(--text-3) !important;
}

/* ============================================
   Lightweight intro animation (hero only, pure CSS)
   Everything else is always visible — no JS dependency.
============================================ */
.hero .reveal {
  opacity: 0;
  animation: fadeUp 0.7s var(--ease) forwards;
}
.hero .hero-badge { animation-delay: 0.05s; }
.hero .hero-title { animation-delay: 0.15s; }
.hero .hero-sub   { animation-delay: 0.3s; }
.hero .hero-cta   { animation-delay: 0.45s; }
.hero .hero-meta  { animation-delay: 0.6s; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .hero .reveal { opacity: 1; }
}

/* ============================================
   SUB-PAGES (services, method, results, pricing, faq)
============================================ */
.sub-hero {
  padding: 160px 0 80px;
  position: relative;
}
.sub-hero-inner { max-width: 880px; }
.breadcrumb {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  font-size: 13px;
  color: var(--text-3);
  margin-bottom: 28px;
  padding: 6px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
}
.breadcrumb a { color: var(--text-2); transition: color 0.2s; }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb-sep { color: var(--text-3); }
.breadcrumb-current { color: var(--text); font-weight: 500; }

.sub-hero h1 {
  font-size: clamp(2.2rem, 6vw, 4.5rem);
  margin-bottom: 24px;
  line-height: 1;
}
.sub-hero .lead {
  font-size: clamp(1rem, 1.4vw, 1.18rem);
  color: var(--text-2);
  max-width: 720px;
  margin-bottom: 36px;
  line-height: 1.6;
}
.price-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  background: rgba(200, 255, 55, 0.08);
  border: 1px solid rgba(200, 255, 55, 0.25);
  border-radius: 999px;
  margin-bottom: 32px;
  font-size: 14px;
  font-weight: 500;
  color: var(--accent);
}
.price-chip strong { color: #fff; }

.sub-section { padding: 80px 0; }
.sub-section + .sub-section { border-top: 1px solid var(--line); }
.sub-section h2 {
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  margin-bottom: 20px;
  letter-spacing: -0.02em;
}
.sub-section .lead {
  font-size: 1.05rem;
  color: var(--text-2);
  max-width: 680px;
  margin-bottom: 40px;
  line-height: 1.6;
}

/* Phase detail (compound method) */
.phase-detail {
  padding: 40px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  margin-bottom: 20px;
}
@media (max-width: 700px) { .phase-detail { padding: 28px 22px; } }
.phase-detail-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 22px;
}
.phase-detail-num {
  width: 56px; height: 56px;
  display: grid;
  place-items: center;
  background: var(--accent);
  color: #000;
  border-radius: 14px;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 1.4rem;
  flex-shrink: 0;
  box-shadow: 0 10px 30px -10px var(--accent-glow);
}
.phase-detail h3 { font-size: 1.5rem; margin-bottom: 4px; }
.phase-meta {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.85rem;
  color: var(--accent);
  letter-spacing: 0.05em;
}
.phase-detail-body { color: var(--text-2); line-height: 1.7; margin-bottom: 24px; }
.phase-detail-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 700px) { .phase-detail-list { grid-template-columns: 1fr; } }
.phase-detail-list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 0.93rem;
  color: var(--text);
}
.phase-detail-list li::before {
  content: '→';
  color: var(--accent);
  font-weight: 700;
  flex-shrink: 0;
}

/* Text + bullet two-col */
.text-block {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 64px;
  align-items: start;
}
@media (max-width: 900px) { .text-block { grid-template-columns: 1fr; gap: 32px; } }
.text-block p { color: var(--text-2); line-height: 1.7; margin-bottom: 16px; }
.bullet-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.bullet-list li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  color: var(--text);
  font-size: 0.97rem;
  line-height: 1.55;
}
.bullet-list li svg {
  width: 18px; height: 18px;
  color: var(--accent);
  flex-shrink: 0;
  margin-top: 3px;
}
.bullet-list strong { color: var(--text); }

/* Related cross-link cards */
.related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}
.related-card {
  display: flex;
  flex-direction: column;
  padding: 28px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: all 0.3s var(--ease);
}
.related-card:hover {
  background: var(--surface-2);
  border-color: rgba(200, 255, 55, 0.3);
  transform: translateY(-4px);
}
.related-card-tag {
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 14px;
}
.related-card h3 { font-size: 1.15rem; margin-bottom: 10px; }
.related-card p { font-size: 0.92rem; color: var(--text-2); margin-bottom: 18px; flex: 1; line-height: 1.55; }
.related-card-link {
  color: var(--accent);
  font-weight: 600;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* FAQ grouped categories */
.faq-category {
  margin: 60px 0 24px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.85rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  padding-left: 16px;
  border-left: 3px solid var(--accent);
}
.faq-list > .faq-category:first-of-type { margin-top: 0; }

/* Sub-page CTA band (no form, centered) */
.cta-sub-inner {
  position: relative;
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
}
.cta-sub-inner h2 {
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  color: #000;
  margin-bottom: 20px;
}
.cta-sub-inner p {
  color: rgba(0,0,0,0.75);
  font-size: 1.1rem;
  margin-bottom: 32px;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}
.cta-band-btn {
  background: #000 !important;
  color: var(--accent) !important;
  margin-bottom: 36px !important;
}
.cta-band-btn:hover { background: #1a1a1a !important; }
.cta-points-center {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
}
@media (max-width: 700px) {
  .cta-points-center { flex-direction: column; align-items: center; }
}

/* Stats mini grid */
.stats-big {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 56px;
}
.stat-mini {
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-align: center;
}
.stat-mini-num {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 4px;
  letter-spacing: -0.02em;
  line-height: 1;
}
.stat-mini-label { font-size: 0.82rem; color: var(--text-3); }

/* Case study detail */
.case-detail {
  padding: 48px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  margin-bottom: 24px;
}
@media (max-width: 700px) { .case-detail { padding: 32px 24px; } }
.case-detail-tag {
  display: inline-block;
  padding: 4px 12px;
  background: rgba(200, 255, 55, 0.1);
  border: 1px solid rgba(200, 255, 55, 0.25);
  border-radius: 6px;
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 16px;
}
.case-detail h3 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  margin-bottom: 20px;
  letter-spacing: -0.02em;
}
.case-detail-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-bottom: 32px;
}
@media (max-width: 768px) { .case-detail-body { grid-template-columns: 1fr; gap: 24px; } }
.case-block h4 {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 12px;
}
.case-block p { color: var(--text-2); font-size: 0.95rem; line-height: 1.6; }
.case-block ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.case-block li {
  padding-left: 18px;
  position: relative;
  color: var(--text-2);
  font-size: 0.95rem;
  line-height: 1.6;
}
.case-block li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--accent);
}
.case-results {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 16px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}
.case-results div { display: flex; flex-direction: column; gap: 4px; }
.case-results strong {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.6rem;
  color: var(--accent);
  font-weight: 700;
}
.case-results span { font-size: 0.78rem; color: var(--text-3); }

/* Pricing comparison table */
.compare-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 32px;
  background: var(--surface);
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
}
.compare-table th, .compare-table td {
  padding: 16px 18px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  font-size: 0.92rem;
}
.compare-table thead th {
  background: var(--surface-2);
  font-weight: 600;
  font-family: 'Space Grotesk', sans-serif;
}
.compare-table th.featured-col, .compare-table td.featured-col {
  background: rgba(200, 255, 55, 0.07);
}
.compare-table th.featured-col { color: var(--accent); }
.compare-table td:first-child { color: var(--text-2); font-weight: 500; }
.compare-table td.has-check { color: var(--accent); font-weight: 700; }
.compare-table td.has-cross { color: var(--text-3); }
.compare-table tr:last-child td { border-bottom: none; }
@media (max-width: 768px) {
  .compare-table { font-size: 0.82rem; }
  .compare-table th, .compare-table td { padding: 10px 8px; }
}

/* ============================================
   Responsive
============================================ */
/* THE MENU COLLAPSES WHEN IT RUNS OUT OF ROOM, NOT AT AN ARBITRARY WIDTH.
   Measured 2026-08-04: the full bar — logo, 9 menu items, Sign up, Sign in and
   the teardown button — genuinely needs 1259px. The hamburger used to wait
   until 900px, so on every ordinary laptop between those two figures the bar
   was squeezed and "Write for Us" broke into three stacked lines. We
   reported exactly that. Collapsing at 1260px is the fix; white-space:nowrap
   on the items above is the belt-and-braces so it can never happen again.
   Deliberately NOT merged into the 900px block below — those are page-layout
   rules for tablets and have nothing to do with the menu. */
@media (max-width: 1260px) {
  .nav-links { display: none; }
  .nav-toggle { display: flex; }
}

@media (max-width: 900px) {
  .nav .btn-primary { display: none; }
  .nav.scrolled .btn-primary { display: none; }
  .hero-visual { display: none; }
  .badge-floating.b1 { left: 0; }
  .badge-floating.b2 { right: 0; }
  .process-line { left: 28px; }
  .step-num { width: 56px; height: 56px; font-size: 1.1rem; }
  .process-step { gap: 20px; }
}

@media (max-width: 480px) {
  .hero { padding: 120px 0 60px; }
  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn { width: 100%; }
  .case-stats { grid-template-columns: 1fr; gap: 12px; }
  .service-card, .compare-col { padding: 28px 24px; }
  .cta-form { padding: 24px; }
}

/* ==========================================================================
   ACCOUNTS — sign up, sign in, forgot password, my account
   Added 2026-08-04 with the real login system. Uses the same tokens as the
   rest of the site (--accent lime, --surface, Space Grotesk headings) so the
   account pages feel like part of Skilled Axis, not a bolted-on form.
   ========================================================================== */

/* The "Sign up" / "Sign in" / "My Account" links that auth.js drops into the nav */
.sa-auth-link {
  color: var(--text-2); font-size: 14px; font-weight: 500;
  text-decoration: none; white-space: nowrap;
  transition: color 0.2s var(--ease), background 0.2s var(--ease),
              border-color 0.2s var(--ease);
}
.sa-auth-link:hover { color: var(--accent); }

/* "Sign up" is the one a first-time visitor needs, so it is the one that
   looks like something to press. Uses the site's own lime accent — no new
   colour is introduced anywhere. */
.sa-auth-link.sa-auth-cta {
  color: var(--accent); font-weight: 600;
  padding: 7px 15px; border-radius: 999px;
  border: 1px solid rgba(200, 255, 55, 0.35);
  background: rgba(200, 255, 55, 0.07);
}
.sa-auth-link.sa-auth-cta:hover {
  background: rgba(200, 255, 55, 0.16);
  border-color: var(--accent);
}

/* Mobile menu version inherits the slide-out menu's own link styling; only
   the sign-up one is tinted, so it still reads as the primary action. */
.sa-auth-link-m.sa-auth-cta { color: var(--accent); }

/* ---- ONE LOOK FOR ALL THREE BUTTONS IN THE TOP BAR ----
   We decided on 2026-08-04 that "Sign in" and "Book a free teardown" to match
   the "Sign up" pill. Two faults were fixed at the same time:

   1. THE TEARDOWN BUTTON'S TEXT WAS CUT OFF. Measured: the button's box was
      34px wide while its own words needed 134px — flexbox was shrinking it to
      nothing and the text spilled out of it. `flex-shrink: 0` stops the bar
      from squashing a button below the size of what it says.
   2. Its solid lime fill made it shout next to everything else. It now wears
      the same quiet lime outline as Sign up.

   Scoped to `header` on purpose — the solid lime .btn-primary is used all over
   the rest of the site and must not change. */
header .btn-primary {
  flex-shrink: 0;
  background: rgba(200, 255, 55, 0.07);
  color: var(--accent);
  border: 1px solid rgba(200, 255, 55, 0.35);
  box-shadow: none;
}
header .btn-primary:hover {
  background: rgba(200, 255, 55, 0.16);
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: none;
}
/* Its label must never be squeezed either — that is what was clipping it. */
header .btn-primary span { white-space: nowrap; }

/* "Sign in" matches the same pill instead of being plain text. */
.sa-auth-link {
  padding: 7px 15px;
  border-radius: 999px;
  border: 1px solid rgba(200, 255, 55, 0.35);
  background: rgba(200, 255, 55, 0.07);
  color: var(--accent);
  font-weight: 600;
}
.sa-auth-link:hover {
  background: rgba(200, 255, 55, 0.16);
  border-color: var(--accent);
  color: var(--accent);
}

/* ON A PHONE the top bar holds the logo, the hamburger and ONE account link.
   Measured in the browser 2026-08-04: logo 147 + "Sign up" 83 + "Sign in" 45
   + hamburger 30, with the nav's normal 32px gaps and 24px side padding,
   needs 449px. A common phone gives 375. Even with the gaps tightened to 14
   and the text a shade smaller it still needs 385. So the narrow bar keeps
   the one a stranger needs — "Sign up" — and "Sign in" lives one tap away
   inside the menu, where both are listed in full. */
@media (max-width: 900px) {
  .nav-inner { gap: 14px; }
  .sa-auth-link { font-size: 13.5px; }
  /* Slightly taller than it needs to be on purpose: a thumb is a blunt
     instrument, and this is the one thing on a phone's top bar that a new
     visitor is meant to press. */
  .sa-auth-link.sa-auth-cta { padding: 8px 13px; }
  .nav-inner a.sa-auth-link:not(.sa-auth-cta):not(.sa-auth-me) { display: none; }
}

/* ---- show / hide the password ----
   People type passwords blind, and on a phone that is the commonest reason a
   sign-in fails twice and then gets given up on. auth.js puts one of these
   inside every password box on the site automatically. */
.sa-pw { position: relative; display: block; }
.sa-pw > input { padding-right: 48px !important; }
.sa-pw-toggle {
  position: absolute; top: 50%; right: 5px; transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; padding: 0;
  border-radius: var(--radius-sm); color: var(--text-3);
  transition: color 0.2s var(--ease), background 0.2s var(--ease);
}
.sa-pw-toggle:hover { color: var(--text); background: rgba(255, 255, 255, 0.06); }
.sa-pw-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sa-pw-toggle svg { width: 19px; height: 19px; display: block; }
/* One icon at a time: the open eye means "press to show", the struck-through
   eye means "press to hide again". */
.sa-pw-toggle .eye-off { display: none; }
.sa-pw-toggle[aria-pressed="true"] .eye-on { display: none; }
.sa-pw-toggle[aria-pressed="true"] .eye-off { display: block; }
.sa-pw-toggle[aria-pressed="true"] { color: var(--accent); }

/* ---- the centred card every account page is built on ---- */
.sa-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 120px 20px 60px;
}
.sa-card {
  width: 100%; max-width: 440px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 40px 36px;
  box-shadow: var(--shadow);
}
.sa-card.sa-wide { max-width: 680px; }

.sa-card h1 {
  font-family: 'Space Grotesk', sans-serif; font-weight: 700;
  font-size: 1.75rem; letter-spacing: -0.02em; margin: 0 0 10px;
}
.sa-sub { color: var(--text-2); font-size: 0.95rem; line-height: 1.6; margin: 0 0 28px; }

/* ---- form fields ---- */
.sa-field { margin-bottom: 18px; }
.sa-field label {
  display: block; font-size: 13px; font-weight: 600;
  margin-bottom: 7px; color: var(--text);
}
.sa-field input {
  width: 100%; padding: 13px 14px; font-size: 15px; font-family: inherit;
  background: var(--bg-2); color: var(--text);
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.sa-field input:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(200, 255, 55, 0.12);
}
.sa-field input::placeholder { color: var(--text-3); }
.sa-hint { font-size: 12.5px; color: var(--text-3); margin-top: 6px; line-height: 1.5; }

/* ---- messages ---- */
.sa-msg {
  padding: 12px 14px; border-radius: var(--radius-sm);
  font-size: 14px; line-height: 1.5; margin-bottom: 18px;
}
.sa-msg.err {
  background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.3);
  color: #fca5a5;
}
.sa-msg.ok {
  background: rgba(200, 255, 55, 0.08); border: 1px solid rgba(200, 255, 55, 0.28);
  color: var(--accent);
}
.sa-msg.warn {
  background: rgba(251, 191, 36, 0.1); border: 1px solid rgba(251, 191, 36, 0.3);
  color: #fcd34d;
}

.sa-foot {
  margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line);
  font-size: 14px; color: var(--text-2); text-align: center;
}
.sa-foot a { color: var(--accent); text-decoration: none; font-weight: 500; }
.sa-foot a:hover { text-decoration: underline; }
.sa-foot + .sa-foot { border-top: 0; margin-top: 10px; padding-top: 0; }

/* ---- My Account ---- */
.sa-credits {
  text-align: center; padding: 26px;
  background: linear-gradient(135deg, rgba(200,255,55,0.08), rgba(99,102,241,0.06));
  border: 1px solid rgba(200, 255, 55, 0.22);
  border-radius: var(--radius); margin-bottom: 26px;
}
.sa-credits .num {
  font-family: 'Space Grotesk', sans-serif; font-weight: 700;
  font-size: 3rem; line-height: 1; color: var(--accent);
  display: block; margin-bottom: 6px;
}
.sa-credits .lbl {
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-2); font-weight: 600;
}

.sa-rows { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.sa-row {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 15px 18px; border-bottom: 1px solid var(--line); font-size: 14.5px;
}
.sa-row:last-child { border-bottom: 0; }
.sa-row .k { color: var(--text-2); }
.sa-row .v { color: var(--text); font-weight: 500; text-align: right; word-break: break-word; }

.sa-badge {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em;
}
.sa-badge.yes { background: rgba(200,255,55,0.14); color: var(--accent); }
.sa-badge.no  { background: rgba(251,191,36,0.14); color: #fcd34d; }

@media (max-width: 520px) {
  .sa-card { padding: 30px 22px; }
  .sa-wrap { padding: 100px 16px 48px; }
  .sa-row { flex-direction: column; align-items: flex-start; gap: 4px; }
  .sa-row .v { text-align: left; }
}

/* ==========================================================================
   THE WORKING PAGES — where a signed-in customer actually runs an engine.
   Added 2026-08-04. Same tokens as everything else: lime --accent, --surface
   panels, Space Grotesk headings, Inter body. Nothing hard-coded, so changing
   a token in :root still restyles these pages with it.
   ========================================================================== */

.app-wrap { max-width: 1000px; margin: 0 auto; padding: 118px 20px 80px; }

/* ---- the bar that always shows what's left ---- */
.app-top {
  display: flex; justify-content: space-between; align-items: center;
  gap: 20px; flex-wrap: wrap; margin-bottom: 30px;
}
.app-top h1 {
  font-family: 'Space Grotesk', sans-serif; font-weight: 700;
  font-size: clamp(1.6rem, 3vw, 2.1rem); letter-spacing: -0.02em; margin: 0;
}
.app-top .sub { color: var(--text-2); font-size: 0.95rem; margin: 6px 0 0; }

.credit-chip {
  display: inline-flex; align-items: baseline; gap: 8px;
  padding: 10px 18px; border-radius: 999px;
  background: rgba(200, 255, 55, 0.08);
  border: 1px solid rgba(200, 255, 55, 0.28);
  white-space: nowrap;
}
.credit-chip b {
  font-family: 'Space Grotesk', sans-serif; font-size: 1.25rem;
  color: var(--accent); font-weight: 700;
}
.credit-chip span {
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-2); font-weight: 600;
}

/* ---- engine cards on the hub ---- */
.engine-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px;
}
.engine-card {
  display: block; text-decoration: none; color: inherit;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 26px 24px;
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.engine-card:hover { border-color: rgba(200,255,55,0.35); transform: translateY(-3px); }
.engine-card h3 {
  font-family: 'Space Grotesk', sans-serif; font-size: 1.12rem;
  margin: 0 0 8px; font-weight: 600;
}
.engine-card p { color: var(--text-2); font-size: 0.92rem; line-height: 1.6; margin: 0 0 14px; }
.engine-card .price {
  font-size: 12px; color: var(--accent); font-weight: 600;
  letter-spacing: 0.04em;
}
.engine-card.soon { opacity: 0.5; pointer-events: none; }
.engine-card.soon .price { color: var(--text-3); }

/* ---- the run panel ---- */
.panel {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 28px 26px; margin-bottom: 22px;
}
.panel h2 {
  font-family: 'Space Grotesk', sans-serif; font-size: 1.15rem;
  margin: 0 0 6px; font-weight: 600;
}
.panel .note { color: var(--text-2); font-size: 0.9rem; line-height: 1.6; margin: 0 0 18px; }

.panel textarea, .panel input[type="text"] {
  width: 100%; padding: 13px 14px; font-size: 15px;
  font-family: inherit; line-height: 1.6;
  background: var(--bg-2); color: var(--text);
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.panel textarea { min-height: 150px; resize: vertical; }
.panel textarea:focus, .panel input[type="text"]:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(200, 255, 55, 0.12);
}
.panel textarea::placeholder, .panel input::placeholder { color: var(--text-3); }

.run-row {
  display: flex; align-items: center; gap: 16px;
  flex-wrap: wrap; margin-top: 16px;
}
.cost-note { color: var(--text-2); font-size: 0.88rem; }
.cost-note b { color: var(--accent); }

/* ---- live progress ---- */
.progress {
  margin-top: 18px; padding: 16px 18px;
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--radius-sm); font-size: 0.92rem; color: var(--text-2);
}
.progress .bar {
  height: 6px; background: rgba(255,255,255,0.07);
  border-radius: 999px; overflow: hidden; margin-top: 10px;
}
.progress .bar i {
  display: block; height: 100%; width: 0%;
  background: var(--accent); border-radius: 999px;
  transition: width 0.4s var(--ease);
}

/* ---- results ---- */
.res-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
table.res { width: 100%; border-collapse: collapse; font-size: 0.9rem; min-width: 560px; }
table.res th {
  text-align: left; padding: 12px 14px; background: var(--bg-2);
  color: var(--text-2); font-weight: 600; font-size: 12px;
  letter-spacing: 0.06em; text-transform: uppercase;
  border-bottom: 1px solid var(--line); white-space: nowrap;
}
table.res td {
  padding: 12px 14px; border-bottom: 1px solid var(--line);
  color: var(--text); vertical-align: top;
}
table.res tr:last-child td { border-bottom: 0; }
table.res tr:hover td { background: rgba(255,255,255,0.02); }

.tag {
  display: inline-block; padding: 3px 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; white-space: nowrap;
}
.tag.good { background: rgba(200,255,55,0.14); color: var(--accent); }
.tag.mid  { background: rgba(251,191,36,0.14); color: #fcd34d; }
.tag.bad  { background: rgba(239,68,68,0.13); color: #fca5a5; }
.tag.dim  { background: rgba(255,255,255,0.06); color: var(--text-2); }

.empty { text-align: center; padding: 44px 20px; color: var(--text-3); font-size: 0.95rem; }

@media (max-width: 620px) {
  .app-wrap { padding: 100px 16px 60px; }
  .panel { padding: 22px 18px; }
  .app-top { flex-direction: column; align-items: flex-start; }
}

/* HTML's own `hidden` attribute must always win.
   Found 2026-08-04: a "Stop" button stayed on screen while hidden, because
   .btn sets display:flex and that beats the browser's default [hidden] rule.
   Anything given `hidden` in markup or script is meant to be gone, so this
   says so once, globally, rather than per element. */
[hidden] { display: none !important; }

/* ==========================================================================
   BUY CREDITS — the two introductory packages
   Added 2026-08-04. Uses only the tokens already in this file: lime --accent
   for Basic, the amber that already marks premium tiers for Advanced.
   ========================================================================== */
.bc-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px;
  max-width: 860px; margin: 0 auto;
}
@media (max-width: 780px) { .bc-grid { grid-template-columns: 1fr; } }

.bc-card {
  position: relative;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 34px 30px;
  display: flex; flex-direction: column;
}
.bc-card.bc-featured {
  border-color: rgba(255, 210, 74, 0.4);
  background: linear-gradient(180deg, rgba(255, 210, 74, 0.06), var(--surface));
}
.bc-badge {
  position: absolute; top: -11px; left: 30px;
  background: linear-gradient(135deg, #ffe08a, #f5b301); color: #1a1200;
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 4px 12px; border-radius: 999px;
}
.bc-tier {
  font-family: 'Space Grotesk', sans-serif; font-weight: 700;
  font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-2); margin-bottom: 14px;
}
.bc-credits { display: flex; align-items: baseline; gap: 9px; margin-bottom: 10px; }
.bc-num {
  font-family: 'Space Grotesk', sans-serif; font-weight: 700;
  font-size: 3.1rem; line-height: 1; letter-spacing: -0.03em; color: var(--accent);
}
.bc-featured .bc-num { color: #ffd24a; }
.bc-unit { font-size: 15px; color: var(--text-2); font-weight: 500; }

.bc-price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.bc-now { font-size: 1.6rem; font-weight: 700; color: var(--text); font-family: 'Space Grotesk', sans-serif; }
.bc-intro { font-size: 12.5px; color: var(--text-3); }

.bc-desc { color: var(--text-2); font-size: 14.5px; line-height: 1.65; margin-bottom: 20px; }
.bc-list { list-style: none; padding: 0; margin: 0 0 26px; }
.bc-list li {
  position: relative; padding-left: 24px; margin-bottom: 10px;
  font-size: 14px; color: var(--text-2); line-height: 1.5;
}
.bc-list li::before {
  content: '✓'; position: absolute; left: 0; top: 0;
  color: var(--accent); font-weight: 700;
}
.bc-featured .bc-list li::before { color: #ffd24a; }
.bc-card .btn { margin-top: auto; }

.bc-foot-note {
  max-width: 860px; margin: 22px auto 0; text-align: center;
  font-size: 13px; color: var(--text-3); line-height: 1.6;
}

/* ---- how to pay ---- */
.bc-steps {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
  max-width: 980px; margin: 0 auto 40px;
}
@media (max-width: 860px) { .bc-steps { grid-template-columns: 1fr; } }
.bc-step { display: flex; gap: 16px; align-items: flex-start; }
.bc-step-num {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(200, 255, 55, 0.1); border: 1px solid rgba(200, 255, 55, 0.3);
  color: var(--accent); font-family: 'Space Grotesk', sans-serif; font-weight: 700;
}
.bc-step h3 { font-size: 1rem; margin: 6px 0 7px; }
.bc-step p { font-size: 14px; color: var(--text-2); line-height: 1.6; margin: 0; }

.bc-help {
  max-width: 720px; margin: 0 auto; text-align: center;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 34px 30px;
}
.bc-help h3 { font-size: 1.25rem; margin: 0 0 12px; }
.bc-help p { color: var(--text-2); font-size: 14.5px; line-height: 1.65; margin: 0 0 22px; }
.bc-help-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ---- a panel heading with buttons on the right ----
   Added 2026-08-05 for the Download CSV / Clear controls. Wraps on a phone so
   the buttons drop under the heading instead of squashing it. */
.panel-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 4px;
}
.panel-head h2 { margin: 0; }
.panel-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.panel-actions .btn:disabled { opacity: 0.45; cursor: default; }

/* The keyword picker beside the Remove button */
.clear-pick {
  padding: 8px 12px; font-size: 13px; font-family: inherit;
  background: var(--bg-2); color: var(--text);
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  max-width: 220px;
}
.clear-pick:disabled { opacity: 0.45; cursor: default; }

/* Deleting is the one action on this page that cannot be undone, so it is the
   one control that does not look like all the others. Red only on hover —
   a permanently red button becomes wallpaper and stops being a warning. */
.btn.danger:not(:disabled):hover {
  color: #fca5a5;
  border-color: rgba(239, 68, 68, 0.5);
  background: rgba(239, 68, 68, 0.1);
}
/* ON A PHONE the three controls cannot share one row. Measured 2026-08-05:
   flex made them 34px wide while "Download CSV" needs about 120, so the words
   spilled out of their own buttons — the same fault as the teardown button in
   the top bar. Download gets its own row; the picker and Remove share the next
   one, with the picker taking whatever is left. */
@media (max-width: 520px) {
  .panel-actions {
    width: 100%;
    display: grid; grid-template-columns: 1fr auto; gap: 8px;
  }
  .panel-actions .btn { white-space: nowrap; }
  .panel-actions .btn-row-own { grid-column: 1 / -1; }
  .clear-pick { max-width: none; width: 100%; }
}

/* ---- PAGE DEPTH TABLE (Prospect engines) ----
   The number a customer picks is NOT the real page depth — our mapping of
   2026-08-04 deliberately hides that. Depth 2 means 3 pages, 3 means 5, and so
   on. Only the left column is ever shown. */
.depth-table {
  margin: 18px 0 4px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.depth-row {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  font-size: 13.5px;
}
.depth-row:last-child { border-bottom: 0; }
.depth-row .d-name {
  font-family: 'Space Grotesk', sans-serif; font-weight: 600;
  color: var(--text); min-width: 74px; white-space: nowrap;
}
.depth-row .d-count { color: var(--text-2); }
.depth-row .d-count b { color: var(--accent); font-weight: 600; }
.depth-row.is-free { background: rgba(200, 255, 55, 0.05); }
.depth-row .d-tag {
  margin-left: auto; white-space: nowrap;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px;
  background: rgba(200, 255, 55, 0.14); color: var(--accent);
}
.depth-note { font-size: 12.5px; color: var(--text-3); margin: 8px 0 0; line-height: 1.5; }
@media (max-width: 480px) {
  .depth-row { flex-wrap: wrap; gap: 6px 12px; }
  .depth-row .d-tag { margin-left: 0; }
}

/* The WhatsApp number written out in full on the Buy Credits page. Bigger and
   brighter than the sentence around it — somebody scanning the page for "how
   do I contact them" should find it without reading. */
.bc-wa { margin-top: 10px; font-size: 14px; color: var(--text-3); }
.bc-wa a {
  color: var(--accent); font-weight: 600; font-size: 16px;
  text-decoration: none; white-space: nowrap; letter-spacing: 0.01em;
}
.bc-wa a:hover { text-decoration: underline; }

/* The "or" divider between Google and the ordinary form */
.sa-or {
  display: flex; align-items: center; gap: 14px;
  margin: 22px 0; color: var(--text-3); font-size: 12.5px;
}
.sa-or::before, .sa-or::after {
  content: ""; flex: 1; height: 1px; background: var(--line);
}


/* ==========================================================================
   OUTREACH KIT — the six-engine panel
   Moved here from index.html on 2026-08-05. It lived inside that one page,
   which is exactly why it only ever appeared on the home page: copying the
   markup elsewhere gave an unstyled list. we wanted it on every page
   three times before I found this.
   ========================================================================== */
/* Outreach Kit floating panel */
.outreach-kit {
  width: 250px; margin-top: 40px;
  background: rgba(19,19,26,0.93);
  border: 1px solid var(--line); border-radius: 18px;
  padding: 13px; display: flex; flex-direction: column; gap: 8px;
  backdrop-filter: blur(8px);
  box-shadow: 0 28px 70px -28px rgba(0,0,0,0.75);
}
@media (min-width: 1280px) {
  .outreach-kit {
    position: fixed; left: 22px; top: 8%; transform: none;
    margin-top: 0; z-index: 60;
    max-height: 86vh; overflow-y: auto;
  }
  /* make room on the left so the fixed Outreach Kit never overlaps the content */
  section .container { padding-left: max(24px, calc(316px - (100vw - 1200px) / 2)); }
}
.ok-head {
  text-align: center; font-family: 'Space Grotesk', sans-serif; font-weight: 800;
  font-size: 24px; line-height: 1; letter-spacing: -0.01em; white-space: nowrap;
  color: #0a0a0f; padding: 12px 8px; border-radius: 12px;
  background: var(--grad);
}
.ok-item {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 11px; border-radius: 11px;
  background: var(--bg); text-decoration: none;
  border: 2px solid var(--ok-dim);
  transition: transform 0.18s ease, background 0.18s ease;
  animation: okPulse 2.8s ease-in-out infinite;
}
.ok-item:hover { transform: translateX(4px); background: var(--surface-2); }
.ok-num {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 19px; font-weight: 800; color: var(--text-2);
  min-width: 16px; text-align: center;
}
.ok-text { display: flex; flex-direction: column; line-height: 1.2; }
.ok-text strong { color: var(--text); font-size: 13px; font-weight: 600; }
.ok-text > span { color: var(--text-3); font-size: 10.5px; line-height: 1.35; margin-top: 2px; }
.ok-elite {
  display: inline-block; vertical-align: middle; margin-left: 5px;
  font-size: 8.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: #1a1200; background: linear-gradient(135deg,#ffe08a,#f5b301);
  padding: 1px 6px; border-radius: 999px;
}

/* each rectangle pulses its OWN single colour, dim -> bright */
@keyframes okPulse {
  0%, 100% { border-color: var(--ok-dim);    box-shadow: 0 0 0 0 rgba(0,0,0,0); }
  50%      { border-color: var(--ok-bright); box-shadow: 0 0 16px -3px var(--ok-glow); }
}
.ok-item:nth-of-type(1) { --ok-dim: rgba(200,255,55,0.22);  --ok-bright: #c8ff37; --ok-glow: rgba(200,255,55,0.55);  animation-duration: 2.6s; animation-delay: 0s;    }
.ok-item:nth-of-type(2) { --ok-dim: rgba(255,210,74,0.26);  --ok-bright: #ffd24a; --ok-glow: rgba(255,210,74,0.55);  animation-duration: 3.3s; animation-delay: -0.9s; }
.ok-item:nth-of-type(3) { --ok-dim: rgba(192,132,252,0.22); --ok-bright: #c084fc; --ok-glow: rgba(192,132,252,0.55); animation-duration: 2.9s; animation-delay: -1.7s; }
.ok-item:nth-of-type(4) { --ok-dim: rgba(92,223,255,0.22);  --ok-bright: #5cdfff; --ok-glow: rgba(92,223,255,0.55);  animation-duration: 3.6s; animation-delay: -2.4s; }
.ok-item:nth-of-type(5) { --ok-dim: rgba(251,146,60,0.24);  --ok-bright: #fb923c; --ok-glow: rgba(251,146,60,0.55);  animation-duration: 3.0s; animation-delay: -1.2s; }
.ok-item:nth-of-type(6) { --ok-dim: rgba(244,114,182,0.26); --ok-bright: #f472b6; --ok-glow: rgba(244,114,182,0.55); animation-duration: 3.5s; animation-delay: -2.0s; }
@media (prefers-reduced-motion: reduce) {
  .ok-item { animation: none; border-color: var(--ok-bright); }
}

/* Below 1280px the kit stops being a fixed rail and joins the page flow at the
   end of <main>. Without this it sat hard against the left edge with 125px of
   dead space beside it on a phone — measured 2026-08-05. Centre it, give it
   room to breathe, and let it use the width available on a narrow screen. */
@media (max-width: 1279px) {
  .outreach-kit {
    margin: 48px auto 8px;
    width: min(340px, calc(100% - 40px));
  }
}

/* ==========================================================================
   EMAIL CRAWLER PAGE (app-crawler.html) — added 2026-08-05
   The crawler is the one engine that is NOT a web page: it is a program the
   customer downloads and runs. So this page has to do a job none of the other
   engine pages do — explain, reassure, and hand over a file.
   ========================================================================== */

.crawl-facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px; margin-top: 20px;
}
.crawl-fact {
  padding: 14px 16px; border: 1px solid var(--line);
  border-radius: var(--radius-sm); background: var(--bg-2);
}
.crawl-fact strong {
  display: block; font-family: 'Space Grotesk', sans-serif;
  font-size: 1.05rem; color: var(--accent); margin-bottom: 4px;
}
.crawl-fact span { font-size: 12.5px; color: var(--text-2); line-height: 1.45; }

.crawl-list { margin: 14px 0 0; padding-left: 20px; }
.crawl-list li { color: var(--text-2); font-size: 14.5px; line-height: 1.9; }
.crawl-list li b { color: var(--accent); font-weight: 600; }

/* The numbered steps for getting it running */
.crawl-step { display: flex; gap: 16px; align-items: flex-start; margin-top: 26px; }
.crawl-step:first-of-type { margin-top: 10px; }
.crawl-step h3 {
  font-family: 'Space Grotesk', sans-serif; font-size: 1.05rem;
  margin: 0 0 6px; color: var(--text);
}
.crawl-step .note { margin-bottom: 12px; }
.crawl-num {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 15px;
  color: var(--accent);
  background: rgba(200, 255, 55, 0.1);
  border: 1px solid rgba(200, 255, 55, 0.3);
}

/* The Google Drive virus-scan notice. Amber, not red: it is something to
   expect and click through, not something that has gone wrong. */
.crawl-warn {
  margin: 12px 0 0; padding: 11px 14px;
  border: 1px solid rgba(251, 191, 36, 0.3);
  background: rgba(251, 191, 36, 0.08);
  border-radius: var(--radius-sm);
  font-size: 13px; line-height: 1.6; color: #fcd34d;
}

@media (max-width: 520px) {
  .crawl-step { gap: 12px; }
  .crawl-num { width: 28px; height: 28px; font-size: 13px; }
  .crawl-step .btn { width: 100%; }
}

/* ---- "Get the crawler" download card (home page + tools page) ----
   Added 2026-08-05, replacing the live Apps Script crawler widget that ran on
   a personal Google account and could not serve more than one visitor at a
   time. The crawler is a download now, so these blocks sell it rather than
   run it. */
.ef-download-card {
  padding: 30px 28px;
  background: linear-gradient(180deg, rgba(200, 255, 55, 0.06), var(--surface));
  border: 1px solid rgba(200, 255, 55, 0.22);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.ef-download-card h3 {
  font-family: 'Space Grotesk', sans-serif; font-weight: 700;
  font-size: 1.3rem; margin: 0 0 10px;
}
.ef-download-card p {
  color: var(--text-2); font-size: 14.5px; line-height: 1.65; margin: 0 0 20px;
}
.ef-download-card .btn { margin-bottom: 4px; }
.ef-download-note {
  font-size: 12.5px !important; color: var(--text-3) !important;
  margin: 14px 0 0 !important; line-height: 1.55;
}
/* The tools page version is full width rather than a side column. */
.ef-download-wide { margin-top: 28px; }
.ef-download-wide .btn { display: inline-flex; }

/* "3 free checks left today" under the public validator results.
   The limit should SELL, not just refuse — so it names what is left and
   offers the way past it in the same breath. Added 2026-08-06. */
.pv-free-left {
  margin-top: 16px; padding: 11px 14px; text-align: center;
  border: 1px solid rgba(200, 255, 55, 0.22);
  background: rgba(200, 255, 55, 0.05);
  border-radius: var(--radius-sm);
  font-size: 13px; color: var(--text-2);
}
.pv-free-left a { color: var(--accent); font-weight: 600; text-decoration: none; }
.pv-free-left a:hover { text-decoration: underline; }

/* Running out of free checks is an invitation, not a fault.
   Red reads as "the site is broken"; this reads as "come in". The two public
   validator widgets share these, one class per page. Added 2026-08-06. */
.pv-home-status.invite,
.validator-status.invite {
  background: rgba(200, 255, 55, 0.08);
  border: 1px solid rgba(200, 255, 55, 0.3);
  color: var(--text);
}
.pv-home-status.invite a,
.validator-status.invite a {
  color: var(--accent); font-weight: 600;
  text-decoration: none; white-space: nowrap;
}
.pv-home-status.invite a:hover,
.validator-status.invite a:hover { text-decoration: underline; }