/*!
Theme Name: Growth Tycoon
Theme URI: https://growthtycoon.com
Author: Growth Tycoon
Author URI: https://growthtycoon.com
Description: A full-funnel digital marketing agency theme — dark editorial, acid-lime accents, mega-menu ready. Built on Underscores. Ships with a hand-coded front page covering services, the Tycoon Funnel, case studies, process, pricing, testimonials, and a mega footer.
Version: 1.0.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: growth-tycoon
Tags: agency, marketing, dark, mega-menu, one-page, custom-logo, custom-menu, featured-images
*/

/* =========================================================
   GROWTH TYCOON — design tokens & full theme styles
   ========================================================= */

:root {
  /* Brand palette */
  --ink-0:   #06080A;
  --ink-10:  #0B0E10;
  --ink-15:  #101316;
  --ink-20:  #161A1E;
  --ink-30:  #1F2429;
  --ink-40:  #2A3036;
  --ink-50:  #3A424A;
  --ink-60:  #5B6670;
  --ink-70:  #8C949D;
  --ink-80:  #B7BEC5;
  --ink-90:  #E2E5E8;
  --ink-95:  #F1EFE9;
  --ink-100: #FAF7EE;

  --lime-300: #DEFF7A;
  --lime-400: #C6FF3D;
  --lime-500: #A8E61F;
  --lime-600: #7FB10D;

  --gold-300: #F2D08A;
  --gold-400: #E8B872;
  --gold-500: #C99650;

  --rose-400: #FF6E6E;

  --font-display: "Instrument Serif", "Times New Roman", serif;
  --font-sans:    "Space Grotesk", "Inter", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 18px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  --shadow-1: 0 1px 0 rgba(255,255,255,0.04) inset, 0 12px 32px -16px rgba(0,0,0,0.6);
  --shadow-2: 0 1px 0 rgba(255,255,255,0.06) inset, 0 24px 60px -24px rgba(0,0,0,0.8);
  --shadow-lime: 0 0 0 1px rgba(198,255,61,0.3), 0 24px 60px -24px rgba(198,255,61,0.45);

  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-slow: 480ms;

  --container: 1280px;
  --gutter: 28px;
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-sans);
  background: var(--ink-10);
  color: var(--ink-95);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;
  font-size: 16px;
  overflow-x: hidden;
}

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

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
img { max-width: 100%; height: auto; display: block; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  position: relative;
  z-index: 1;
}

/* ---------- Typography ---------- */
.display {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 0.95;
  color: var(--ink-100);
}
.display em { font-style: italic; color: var(--lime-400); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-70);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.eyebrow::before {
  content: "";
  width: 6px; height: 6px;
  background: var(--lime-400);
  border-radius: 50%;
  display: inline-block;
}

/* ---------- Top bar ---------- */
.topbar {
  background: var(--ink-0);
  color: var(--ink-80);
  font-size: 12.5px;
  font-family: var(--font-mono);
  border-bottom: 1px solid var(--ink-40);
  position: relative;
  z-index: 60;
}
.topbar-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 36px;
}
.topbar-marquee {
  display: flex;
  gap: 28px;
  align-items: center;
  min-width: 0;
  overflow: hidden;
}
.topbar-marquee span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  flex-shrink: 0;
}
.topbar-marquee .dot { width: 6px; height: 6px; background: var(--lime-400); border-radius: 50%; animation: pulse 1.6s ease-out infinite; }
@keyframes pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(198,255,61,0.45); }
  50% { opacity: 0.8; box-shadow: 0 0 0 6px rgba(198,255,61,0); }
}
.topbar-actions { display: flex; gap: 24px; align-items: center; flex-shrink: 0; }
.topbar-actions a { white-space: nowrap; display: inline-flex; align-items: center; }
.topbar-actions a:hover { color: var(--lime-400); }

/* ---------- Site header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(11,14,16,0.78);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--ink-40);
}
.admin-bar .site-header { top: 32px; }
@media screen and (max-width: 782px) { .admin-bar .site-header { top: 46px; } }

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
  gap: 32px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  font-size: 24px;
  letter-spacing: -0.01em;
  color: var(--ink-100);
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1.1;
}
.brand > span:not(.brand-mark) { display: inline-block; white-space: nowrap; }
.brand-mark {
  width: 36px; height: 36px;
  background: var(--lime-400);
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: var(--ink-0);
  font-family: var(--font-display);
  font-weight: 700;
  font-style: italic;
  font-size: 22px;
  box-shadow: var(--shadow-lime);
  flex-shrink: 0;
}
.brand small {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-70);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  display: block;
  margin-top: -3px;
}

.primary-menu {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.primary-menu > li > a,
.primary-menu > li > button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink-90);
  border-radius: var(--radius-sm);
  transition: color var(--dur-fast), background var(--dur-fast);
  font-family: var(--font-sans);
  white-space: nowrap;
}
.primary-menu > li > a:hover,
.primary-menu > li > button:hover,
.primary-menu > li.open > button { color: var(--lime-400); background: var(--ink-15); }
.primary-menu .caret { width: 14px; height: 14px; transition: transform var(--dur-fast); }
.primary-menu li.open .caret { transform: rotate(180deg); }

.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 16px;
}
.nav-phone {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink-80);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.nav-phone:hover { color: var(--lime-400); }

/* Mobile menu toggle (Underscores compatible) */
.menu-toggle {
  display: none;
  background: var(--ink-20);
  border: 1px solid var(--ink-40);
  color: var(--ink-95);
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: 13px;
  cursor: pointer;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 22px;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 14.5px;
  line-height: 1;
  transition: all var(--dur-fast) var(--ease-out);
  border: 1px solid transparent;
  white-space: nowrap;
  cursor: pointer;
  font-family: var(--font-sans);
}
.btn-primary {
  background: var(--lime-400);
  color: var(--ink-0);
  box-shadow: var(--shadow-lime);
}
.btn-primary:hover { background: var(--lime-300); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); }

.btn-ghost {
  background: transparent;
  color: var(--ink-95);
  border: 1px solid var(--ink-40);
}
.btn-ghost:hover { background: var(--ink-15); border-color: var(--ink-50); }

.btn-link {
  color: var(--lime-400);
  padding: 0;
  background: transparent;
}
.btn-link::after {
  content: "→";
  transition: transform var(--dur-fast);
  display: inline-block;
}
.btn-link:hover::after { transform: translateX(4px); }

.btn svg, .btn .lucide { width: 16px; height: 16px; }

/* ---------- Mega menu ---------- */
.mega-wrap {
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  pointer-events: none;
  z-index: 49;
}
.mega {
  background: var(--ink-15);
  border: 1px solid var(--ink-40);
  border-top: none;
  box-shadow: var(--shadow-2);
  max-width: var(--container);
  margin: 0 auto;
  padding: 32px 32px 24px;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  display: none;
  grid-template-columns: 1.1fr 1fr 1fr 1fr;
  gap: 36px;
  pointer-events: auto;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.mega.show {
  display: grid;
  opacity: 1;
  transform: translateY(0);
}
.mega-col h4 {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-70);
  margin: 0 0 16px;
}
.mega-link-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mega-link {
  display: flex;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  transition: background var(--dur-fast);
}
.mega-link:hover { background: var(--ink-20); }
.mega-link .icon {
  width: 36px; height: 36px;
  border-radius: 8px;
  background: var(--ink-20);
  display: grid; place-items: center;
  color: var(--lime-400);
  flex-shrink: 0;
  border: 1px solid var(--ink-40);
}
.mega-link:hover .icon { background: var(--ink-30); }
.mega-link .icon svg { width: 18px; height: 18px; }
.mega-link .text strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-95);
  margin-bottom: 2px;
}
.mega-link .text span {
  font-size: 12.5px;
  color: var(--ink-70);
  line-height: 1.4;
}

.mega-feature {
  background: var(--ink-20);
  border: 1px solid var(--ink-40);
  border-radius: var(--radius-md);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  overflow: hidden;
}
.mega-feature::after {
  content: "";
  position: absolute;
  top: -40px; right: -40px;
  width: 140px; height: 140px;
  background: radial-gradient(circle, var(--lime-400) 0%, transparent 70%);
  opacity: 0.18;
  pointer-events: none;
}
.mega-feature h5 {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.1;
  margin: 0;
  color: var(--ink-100);
}
.mega-feature p {
  font-size: 13px;
  color: var(--ink-80);
  margin: 0;
  line-height: 1.5;
}
.mega-feature .stats {
  display: flex;
  gap: 18px;
  margin-top: 4px;
}
.mega-feature .stats div { display: flex; flex-direction: column; }
.mega-feature .stats strong {
  font-family: var(--font-display);
  font-size: 26px;
  color: var(--lime-400);
  line-height: 1;
}
.mega-feature .stats span {
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--ink-70);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* ---------- Hero ---------- */
.hero {
  padding: 80px 0 120px;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
  pointer-events: none;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1fr 0.85fr;
  gap: 48px;
  align-items: end;
}
.hero h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(56px, 9vw, 132px);
  line-height: 0.92;
  letter-spacing: -0.03em;
  margin: 24px 0 36px;
  color: var(--ink-100);
}
.hero h1 em { font-style: italic; color: var(--lime-400); }
.hero h1 .strike { position: relative; color: var(--ink-60); margin-right: 0.15em; }
.hero h1 .strike::after {
  content: "";
  position: absolute;
  left: -2%; right: -2%;
  top: 52%; height: 6px;
  background: var(--rose-400);
  transform: rotate(-3deg);
  border-radius: 4px;
}
.hero-sub {
  font-size: 20px;
  color: var(--ink-80);
  max-width: 540px;
  line-height: 1.45;
  margin: 0 0 36px;
}
.hero-actions {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.hero-meta {
  display: flex;
  gap: 32px;
  margin-top: 56px;
  padding-top: 28px;
  border-top: 1px solid var(--ink-40);
  align-items: center;
}
.hero-meta .avatars { display: flex; }
.hero-meta .avatars span {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 2px solid var(--ink-10);
  margin-left: -10px;
  background-size: cover;
  background-position: center;
  background-color: var(--ink-30);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-95);
  display: grid; place-items: center;
  font-weight: 600;
}
.hero-meta .avatars span:first-child { margin-left: 0; }
.hero-meta .copy strong {
  display: block;
  font-size: 14px;
  color: var(--ink-95);
  margin-bottom: 2px;
}
.hero-meta .copy span {
  font-size: 12.5px;
  color: var(--ink-70);
  font-family: var(--font-mono);
}
.hero-meta .stars { color: var(--gold-400); font-size: 14px; letter-spacing: 2px; }

/* Hero KPI dashboard */
.hero-dash {
  background: var(--ink-15);
  border: 1px solid var(--ink-40);
  border-radius: var(--radius-lg);
  padding: 22px;
  position: relative;
  box-shadow: var(--shadow-2);
}
.hero-dash::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, rgba(198,255,61,0.25), transparent 40%);
  pointer-events: none;
  z-index: -1;
}
.dash-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.dash-head .tab { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-70); }
.dash-head .tab.active { color: var(--lime-400); }
.dash-head .tabs { display: flex; gap: 16px; }
.dash-head .more {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--ink-20);
  display: grid; place-items: center;
  color: var(--ink-80);
}
.dash-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 18px; }
.kpi {
  background: var(--ink-20);
  border: 1px solid var(--ink-40);
  border-radius: var(--radius-md);
  padding: 16px;
}
.kpi .label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-70);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.kpi .value {
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 1;
  color: var(--ink-100);
  margin-bottom: 6px;
}
.kpi .delta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--lime-400);
  font-family: var(--font-mono);
}
.kpi .delta.down { color: var(--rose-400); }
.dash-chart {
  background: var(--ink-20);
  border: 1px solid var(--ink-40);
  border-radius: var(--radius-md);
  padding: 16px 16px 10px;
  height: 180px;
  position: relative;
}
.dash-chart .chart-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
.dash-chart .chart-head strong { font-size: 13px; color: var(--ink-95); }
.dash-chart .chart-head span { font-family: var(--font-mono); font-size: 11px; color: var(--ink-70); }
.chart-svg { width: 100%; height: 130px; display: block; }

.dash-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-70);
}
.dash-footer .live { display: inline-flex; align-items: center; gap: 6px; color: var(--lime-400); }
.dash-footer .live::before {
  content: "";
  width: 6px; height: 6px;
  background: var(--lime-400);
  border-radius: 50%;
  animation: pulse 1.6s ease-out infinite;
}

/* ---------- Logo bar ---------- */
.logo-bar {
  padding: 32px 0;
  border-top: 1px solid var(--ink-40);
  border-bottom: 1px solid var(--ink-40);
  background: var(--ink-15);
  overflow: hidden;
  position: relative;
}
.logo-bar-inner {
  display: flex;
  align-items: center;
  gap: 32px;
  justify-content: space-between;
  flex-wrap: wrap;
}
.logo-bar-label {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-70);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  flex-shrink: 0;
}
.logo-strip {
  display: flex;
  gap: 56px;
  align-items: center;
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}
.logo-strip .logo {
  font-family: var(--font-display);
  font-size: 26px;
  font-style: italic;
  color: var(--ink-70);
  white-space: nowrap;
  flex-shrink: 0;
  transition: color var(--dur-fast);
}
.logo-strip .logo.sans {
  font-family: var(--font-sans);
  font-weight: 700;
  font-style: normal;
  letter-spacing: -0.02em;
}
.logo-strip .logo:hover { color: var(--ink-95); }

/* ---------- Section scaffold ---------- */
.gt-section { position: relative; padding: 120px 0; }
.section-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: end;
  margin-bottom: 64px;
}
.section-head h2 {
  font-family: var(--font-display);
  font-size: clamp(40px, 5.4vw, 80px);
  line-height: 1;
  letter-spacing: -0.025em;
  margin: 16px 0 0;
  color: var(--ink-100);
  font-weight: 400;
}
.section-head h2 em { font-style: italic; color: var(--lime-400); }
.section-head .lead {
  font-size: 18px;
  color: var(--ink-80);
  line-height: 1.5;
  max-width: 520px;
  margin: 0;
}

/* ---------- Services bento ---------- */
.services { background: var(--ink-10); }
.bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: minmax(200px, auto);
  gap: 16px;
}
.bento-card {
  background: var(--ink-15);
  border: 1px solid var(--ink-40);
  border-radius: var(--radius-lg);
  padding: 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  position: relative;
  overflow: hidden;
  transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base);
}
.bento-card:hover { transform: translateY(-4px); border-color: var(--ink-50); }
.bento-card .num {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-70);
  text-transform: uppercase;
  letter-spacing: 0.16em;
}
.bento-card h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 32px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--ink-100);
}
.bento-card h3 em { font-style: italic; color: var(--lime-400); }
.bento-card p { font-size: 14.5px; color: var(--ink-80); margin: 0; line-height: 1.55; }
.bento-card .tags { display: flex; flex-wrap: wrap; gap: 6px; }
.bento-card .tag {
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--ink-20);
  color: var(--ink-80);
  border: 1px solid var(--ink-40);
}
.bento-card .icon-lg {
  width: 56px; height: 56px;
  border-radius: var(--radius-md);
  background: var(--ink-20);
  border: 1px solid var(--ink-40);
  display: grid;
  place-items: center;
  color: var(--lime-400);
  margin-bottom: 4px;
}
.bento-card .icon-lg svg { width: 28px; height: 28px; }

.bento-card.b-hero {
  grid-column: span 4;
  grid-row: span 2;
  background:
    linear-gradient(155deg, rgba(198,255,61,0.06), transparent 60%),
    var(--ink-15);
}
.bento-card.b-hero h3 { font-size: 56px; }
.bento-card.b-hero .browser {
  background: var(--ink-20);
  border: 1px solid var(--ink-40);
  border-radius: var(--radius-md);
  padding: 14px;
  flex: 1;
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 240px;
}
.browser-bar { display: flex; gap: 6px; padding-bottom: 10px; border-bottom: 1px solid var(--ink-40); margin-bottom: 6px; }
.browser-bar span { width: 10px; height: 10px; border-radius: 50%; background: var(--ink-50); }
.browser-bar span:first-child { background: #FF6E6E; }
.browser-bar span:nth-child(2) { background: var(--gold-400); }
.browser-bar span:nth-child(3) { background: var(--lime-400); }
.browser-bar .url {
  flex: 1;
  background: var(--ink-15);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-70);
  padding: 4px 12px;
  margin-left: 12px;
  border: 1px solid var(--ink-40);
}
.skel { background: var(--ink-15); border-radius: 6px; border: 1px solid var(--ink-40); height: 14px; }
.skel.lime { background: var(--lime-400); border-color: var(--lime-400); height: 36px; border-radius: 18px; width: 140px; }
.skel.gold { background: var(--gold-400); border-color: var(--gold-400); }
.skel-row { display: flex; gap: 10px; }
.skel-row .skel { flex: 1; }
.skel-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; flex: 1; }
.skel-card { background: var(--ink-15); border: 1px solid var(--ink-40); border-radius: 8px; padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.skel-card .skel { height: 8px; }
.skel-card .skel.tall { height: 60px; }

.bento-card.b-seo { grid-column: span 2; grid-row: span 1; }
.bento-card.b-ppc { grid-column: span 2; grid-row: span 1; }
.bento-card.b-smm { grid-column: span 2; grid-row: span 1; }
.bento-card.b-auto { grid-column: span 3; }
.bento-card.b-content { grid-column: span 3; }

.seo-rank { display: flex; align-items: flex-end; gap: 8px; margin-top: 8px; height: 80px; }
.seo-rank .bar { flex: 1; background: var(--ink-20); border: 1px solid var(--ink-40); border-radius: 4px; }
.seo-rank .bar.lime { background: var(--lime-400); border-color: var(--lime-400); }
.seo-rank .bar.gold { background: var(--gold-400); border-color: var(--gold-400); }

.ppc-card {
  margin-top: 8px;
  padding: 10px 12px;
  background: var(--ink-20);
  border: 1px solid var(--ink-40);
  border-radius: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 12px;
}
.ppc-card .roas { color: var(--lime-400); font-weight: 600; }

.smm-icons { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.smm-icons .si {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--ink-20);
  border: 1px solid var(--ink-40);
  color: var(--ink-90);
  display: grid; place-items: center;
}
.smm-icons .si svg { width: 16px; height: 16px; }
.smm-icons .si.live { background: var(--lime-400); color: var(--ink-0); border-color: var(--lime-400); }

.auto-flow {
  margin-top: 12px;
  display: grid;
  grid-template-columns: 1fr 22px 1fr 22px 1fr;
  gap: 8px;
  align-items: center;
}
.auto-node {
  background: var(--ink-20);
  border: 1px solid var(--ink-40);
  border-radius: 8px;
  padding: 8px 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-90);
  text-align: center;
}
.auto-node.green { background: var(--lime-400); color: var(--ink-0); border-color: var(--lime-400); }
.auto-arrow { color: var(--ink-60); font-size: 14px; text-align: center; font-family: var(--font-mono); }

.content-preview { margin-top: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.content-tile {
  background: var(--ink-20);
  border: 1px solid var(--ink-40);
  border-radius: 8px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.content-tile .meta { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-70); }
.content-tile .title-skel { height: 8px; background: var(--ink-15); border-radius: 4px; border: 1px solid var(--ink-40); }
.content-tile .title-skel.short { width: 60%; }
.content-tile .pic { height: 40px; background: linear-gradient(135deg, var(--lime-400), var(--gold-400)); border-radius: 6px; }
.content-tile .pic.alt { background: linear-gradient(135deg, var(--gold-400), var(--rose-400)); }

/* ---------- Funnel ---------- */
.funnel { background: var(--ink-15); border-block: 1px solid var(--ink-40); }
.funnel-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  gap: 16px;
  align-items: stretch;
}
.funnel-step {
  background: var(--ink-20);
  border: 1px solid var(--ink-40);
  border-radius: var(--radius-md);
  padding: 24px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: all var(--dur-base) var(--ease-out);
}
.funnel-step:hover { background: var(--ink-30); border-color: var(--lime-400); transform: translateY(-4px); }
.funnel-step .step-num { position: absolute; top: 20px; right: 20px; font-family: var(--font-mono); font-size: 11px; color: var(--ink-70); }
.funnel-step h4 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 28px;
  margin: 32px 0 0;
  color: var(--ink-100);
  line-height: 1;
}
.funnel-step h4 em { font-style: italic; color: var(--lime-400); }
.funnel-step p { margin: 0; font-size: 13.5px; color: var(--ink-80); line-height: 1.5; }
.funnel-step ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.funnel-step li { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-80); display: flex; align-items: center; gap: 6px; }
.funnel-step li::before { content: ""; width: 5px; height: 5px; background: var(--lime-400); border-radius: 50%; flex-shrink: 0; }
.funnel-step .icon-md {
  width: 44px; height: 44px;
  background: var(--ink-15);
  border: 1px solid var(--ink-40);
  border-radius: 10px;
  display: grid; place-items: center;
  color: var(--lime-400);
}
.funnel-step .icon-md svg { width: 22px; height: 22px; }

.funnel-cta {
  margin-top: 48px;
  background: var(--ink-20);
  border: 1px solid var(--ink-40);
  border-radius: var(--radius-lg);
  padding: 28px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.funnel-cta strong { font-family: var(--font-display); font-size: 28px; font-weight: 400; color: var(--ink-100); }
.funnel-cta strong em { color: var(--lime-400); font-style: italic; }
.funnel-cta p { margin: 4px 0 0; color: var(--ink-80); font-size: 14.5px; }

/* ---------- Case studies ---------- */
.cases { background: var(--ink-10); }
.cases-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 20px; }
.case {
  background: var(--ink-15);
  border: 1px solid var(--ink-40);
  border-radius: var(--radius-lg);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  transition: all var(--dur-base) var(--ease-out);
  position: relative;
  overflow: hidden;
}
.case:hover { border-color: var(--lime-400); transform: translateY(-4px); }
.case-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-70);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.case h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 28px;
  line-height: 1.1;
  color: var(--ink-100);
  margin: 0;
  letter-spacing: -0.015em;
}
.case.feature h3 { font-size: 40px; }
.case-result {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid var(--ink-40);
}
.case-result .big {
  font-family: var(--font-display);
  font-size: 64px;
  line-height: 1;
  color: var(--lime-400);
  font-style: italic;
}
.case.feature .case-result .big { font-size: 96px; }
.case-result .unit {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink-80);
  line-height: 1.4;
  max-width: 160px;
}
.case .meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-70);
}
.case .meta .arrow {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--ink-20);
  display: grid; place-items: center;
  color: var(--ink-90);
  transition: all var(--dur-fast);
}
.case:hover .meta .arrow { background: var(--lime-400); color: var(--ink-0); transform: rotate(-45deg); }
.case-thumb {
  height: 160px;
  background: var(--ink-20);
  border: 1px solid var(--ink-40);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 36px;
  color: var(--ink-95);
  position: relative;
  overflow: hidden;
}
.case.feature .case-thumb { height: 220px; }
.case-thumb.tex-1 { background: repeating-linear-gradient(45deg, var(--ink-20), var(--ink-20) 16px, var(--ink-30) 16px, var(--ink-30) 18px); }
.case-thumb.tex-2 {
  background:
    radial-gradient(circle at 20% 20%, var(--lime-400) 0%, transparent 30%),
    radial-gradient(circle at 80% 60%, var(--gold-400) 0%, transparent 30%),
    var(--ink-20);
}
.case-thumb.tex-3 {
  background:
    linear-gradient(135deg, var(--ink-30) 25%, transparent 25%) -10px 0,
    linear-gradient(225deg, var(--ink-30) 25%, transparent 25%) -10px 0,
    var(--ink-20);
  background-size: 28px 28px;
}
.case-thumb .pill {
  position: absolute;
  bottom: 16px; left: 16px;
  background: var(--ink-0);
  color: var(--ink-95);
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--ink-40);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-style: normal;
}

/* ---------- Process ---------- */
.process { background: var(--ink-15); border-block: 1px solid var(--ink-40); }
.process-list { display: flex; flex-direction: column; border-top: 1px solid var(--ink-40); }
.process-row {
  display: grid;
  grid-template-columns: 100px 1.4fr 1fr 0.6fr;
  gap: 32px;
  padding: 36px 0;
  border-bottom: 1px solid var(--ink-40);
  align-items: center;
  transition: padding var(--dur-base) var(--ease-out);
  cursor: pointer;
}
.process-row:hover { padding-left: 16px; padding-right: 16px; }
.process-row .num {
  font-family: var(--font-display);
  font-size: 56px;
  color: var(--ink-60);
  font-style: italic;
  line-height: 1;
  transition: color var(--dur-base);
}
.process-row:hover .num { color: var(--lime-400); }
.process-row h4 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 32px;
  margin: 0;
  color: var(--ink-100);
  line-height: 1;
  letter-spacing: -0.015em;
}
.process-row p { margin: 0; font-size: 15px; color: var(--ink-80); line-height: 1.5; }
.process-row .week {
  text-align: right;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-70);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.process-row .week strong {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 28px;
  color: var(--ink-95);
  font-weight: 400;
  text-transform: none;
  letter-spacing: -0.01em;
  margin-top: 4px;
}

/* ---------- Pricing ---------- */
.pricing { background: var(--ink-10); }
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.price-card {
  background: var(--ink-15);
  border: 1px solid var(--ink-40);
  border-radius: var(--radius-lg);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.price-card.featured {
  background: var(--ink-100);
  color: var(--ink-0);
  border-color: var(--lime-400);
  box-shadow: var(--shadow-lime);
  position: relative;
}
.price-card.featured .tag-line { color: var(--ink-0); }
.price-card.featured h3 { color: var(--ink-0); }
.price-card.featured .desc { color: var(--ink-15); }
.price-card.featured ul li { color: var(--ink-15); }
.price-card.featured ul li::before { color: var(--ink-0); background: var(--ink-0); }
.price-card.featured .price { color: var(--ink-0); }
.price-card.featured .price-meta { color: var(--ink-30); }
.price-card.featured .btn-ghost { border-color: var(--ink-30); color: var(--ink-0); }
.price-card.featured .btn-ghost:hover { background: var(--ink-0); color: var(--ink-100); }
.price-card.featured::before {
  content: "Most popular";
  position: absolute;
  top: -12px; left: 32px;
  background: var(--ink-0);
  color: var(--lime-400);
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--lime-400);
}
.tag-line { font-family: var(--font-mono); font-size: 11px; color: var(--ink-70); text-transform: uppercase; letter-spacing: 0.14em; }
.price-card h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 36px;
  margin: 0;
  color: var(--ink-100);
  line-height: 1;
  letter-spacing: -0.015em;
}
.price-card .desc { font-size: 14px; color: var(--ink-80); line-height: 1.5; margin: 0; }
.price-card .price-box { padding: 16px 0; border-block: 1px solid var(--ink-40); display: flex; align-items: baseline; gap: 10px; }
.price-card.featured .price-box { border-color: var(--ink-30); }
.price-card .price { font-family: var(--font-display); font-size: 56px; line-height: 1; color: var(--ink-100); }
.price-card .price-meta { font-family: var(--font-mono); font-size: 12px; color: var(--ink-70); }
.price-card ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.price-card ul li { font-size: 14px; color: var(--ink-90); display: flex; gap: 10px; align-items: flex-start; }
.price-card ul li::before {
  content: "✓";
  color: var(--lime-400);
  font-weight: 700;
  background: transparent !important;
  font-family: var(--font-sans);
  flex-shrink: 0;
  width: auto !important;
  height: auto !important;
}

/* ---------- Testimonials ---------- */
.testimonials { background: var(--ink-15); border-block: 1px solid var(--ink-40); }
.testi-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; }
.testi-main {
  background: var(--ink-20);
  border: 1px solid var(--ink-40);
  border-radius: var(--radius-lg);
  padding: 48px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 36px;
  position: relative;
}
.testi-main .quote {
  font-family: var(--font-display);
  font-size: 36px;
  line-height: 1.2;
  color: var(--ink-100);
  margin: 0;
  letter-spacing: -0.01em;
}
.testi-main .quote em { color: var(--lime-400); font-style: italic; }
.testi-main .qmark {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 120px;
  line-height: 1;
  color: var(--lime-400);
  position: absolute;
  top: 24px; right: 36px;
}
.testi-author { display: flex; align-items: center; gap: 14px; }
.testi-author .avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--gold-400);
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink-0);
  font-size: 22px;
  flex-shrink: 0;
}
.testi-author strong { display: block; font-size: 14.5px; color: var(--ink-95); }
.testi-author span { display: block; font-size: 12.5px; color: var(--ink-70); font-family: var(--font-mono); margin-top: 2px; }
.testi-small { display: flex; flex-direction: column; gap: 16px; }
.testi-card {
  background: var(--ink-20);
  border: 1px solid var(--ink-40);
  border-radius: var(--radius-md);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
}
.testi-card .stars { color: var(--gold-400); letter-spacing: 2px; }
.testi-card p { font-size: 15px; color: var(--ink-90); margin: 0; line-height: 1.5; }

/* ---------- CTA banner ---------- */
.cta-banner {
  padding: 120px 0;
  background: var(--ink-100);
  color: var(--ink-0);
  position: relative;
  overflow: hidden;
}
.cta-banner .container { z-index: 2; }
.cta-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(0,0,0,0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0,0,0,0.04) 1px, transparent 1px);
  background-size: 80px 80px;
  pointer-events: none;
}
.cta-banner h2 {
  font-family: var(--font-display);
  font-size: clamp(60px, 9vw, 144px);
  line-height: 0.9;
  margin: 0 0 32px;
  color: var(--ink-0);
  letter-spacing: -0.03em;
  font-weight: 400;
  max-width: 1000px;
}
.cta-banner h2 em { font-style: italic; color: var(--lime-600); }
.cta-banner p { font-size: 19px; color: var(--ink-15); max-width: 600px; margin: 0 0 40px; line-height: 1.5; }
.cta-banner .btn-primary { background: var(--ink-0); color: var(--lime-400); box-shadow: none; font-size: 16px; padding: 18px 32px; }
.cta-banner .btn-primary:hover { background: var(--ink-15); }
.cta-banner .btn-ghost { border-color: var(--ink-30); color: var(--ink-0); font-size: 16px; padding: 18px 28px; }
.cta-banner .btn-ghost:hover { background: var(--ink-0); color: var(--ink-100); }
.cta-row { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.cta-meta {
  margin-top: 64px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  border-top: 1px solid rgba(0,0,0,0.12);
  padding-top: 36px;
}
.cta-meta-item strong { font-family: var(--font-display); font-size: 56px; color: var(--ink-0); line-height: 1; display: block; font-style: italic; }
.cta-meta-item span {
  font-size: 14px;
  color: var(--ink-30);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-top: 8px;
  display: block;
}

/* ---------- Site footer ---------- */
.site-footer { background: var(--ink-0); color: var(--ink-80); padding: 80px 0 32px; border-top: 1px solid var(--ink-40); }
.footer-hero {
  padding-bottom: 64px;
  border-bottom: 1px solid var(--ink-40);
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 32px;
  align-items: center;
}
.footer-hero h3 {
  font-family: var(--font-display);
  font-size: clamp(48px, 6vw, 88px);
  margin: 0;
  color: var(--ink-100);
  line-height: 0.95;
  letter-spacing: -0.03em;
  font-weight: 400;
}
.footer-hero h3 em { color: var(--lime-400); font-style: italic; }
.footer-hero form {
  background: var(--ink-15);
  border: 1px solid var(--ink-40);
  border-radius: var(--radius-pill);
  padding: 6px 6px 6px 22px;
  display: flex;
  gap: 8px;
  align-items: center;
  max-width: 100%;
}
.footer-hero form input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--ink-95);
  font-family: var(--font-sans);
  font-size: 14.5px;
  outline: none;
  padding: 8px 0;
}
.footer-hero form input::placeholder { color: var(--ink-70); }
.footer-hero form button {
  background: var(--lime-400);
  color: var(--ink-0);
  border-radius: var(--radius-pill);
  padding: 10px 18px;
  font-weight: 600;
  font-size: 13px;
  flex-shrink: 0;
  border: none;
  cursor: pointer;
  font-family: var(--font-sans);
}
.footer-hero form button:hover { background: var(--lime-300); }

.footer-cols { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 32px; padding: 56px 0; }
.footer-cols h5 {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-70);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  margin: 0 0 18px;
}
.footer-cols ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.footer-cols ul a {
  color: var(--ink-90);
  font-size: 14px;
  transition: color var(--dur-fast);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.footer-cols ul a:hover { color: var(--lime-400); }
.footer-cols ul a .tag { font-family: var(--font-mono); font-size: 10px; background: var(--lime-400); color: var(--ink-0); padding: 2px 6px; border-radius: var(--radius-pill); }
.footer-brand p { color: var(--ink-80); font-size: 14.5px; line-height: 1.55; max-width: 340px; margin: 16px 0 24px; }
.footer-social { display: flex; gap: 8px; }
.footer-social a {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--ink-15);
  border: 1px solid var(--ink-40);
  display: grid; place-items: center;
  color: var(--ink-90);
  transition: all var(--dur-fast);
}
.footer-social a:hover { background: var(--lime-400); color: var(--ink-0); border-color: var(--lime-400); }
.footer-social a svg { width: 16px; height: 16px; }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  padding-top: 32px;
  border-top: 1px solid var(--ink-40);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-70);
}
.footer-bottom ul { display: flex; gap: 24px; list-style: none; margin: 0; padding: 0; }
.footer-bottom ul a:hover { color: var(--lime-400); }

.footer-massive {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(40px, 11vw, 150px);
  line-height: 1;
  color: var(--ink-15);
  margin: 48px 0 0;
  text-align: center;
  letter-spacing: -0.03em;
  user-select: none;
  white-space: nowrap;
  overflow: hidden;
  max-width: 100%;
}

/* ---------- Generic page content (blog / inner pages) ---------- */
.entry-content,
.entry-summary,
.page-content {
  max-width: 760px;
  margin: 0 auto;
  padding: 80px 24px;
  color: var(--ink-90);
  font-size: 17px;
  line-height: 1.7;
}
.entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4,
.page-content h1, .page-content h2, .page-content h3, .page-content h4 {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--ink-100);
  letter-spacing: -0.02em;
  margin: 2em 0 0.6em;
  line-height: 1.1;
}
.entry-content h2, .page-content h2 { font-size: 40px; }
.entry-content h3, .page-content h3 { font-size: 28px; }
.entry-content a, .page-content a { color: var(--lime-400); text-decoration: underline; text-underline-offset: 4px; }
.entry-content blockquote, .page-content blockquote {
  border-left: 3px solid var(--lime-400);
  padding-left: 20px;
  margin: 32px 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 22px;
  color: var(--ink-95);
}
.entry-content code, .page-content code {
  background: var(--ink-15);
  border: 1px solid var(--ink-40);
  border-radius: 4px;
  padding: 2px 6px;
  font-family: var(--font-mono);
  font-size: 0.92em;
  color: var(--lime-300);
}
.entry-content pre, .page-content pre {
  background: var(--ink-15);
  border: 1px solid var(--ink-40);
  border-radius: var(--radius-md);
  padding: 20px;
  overflow: auto;
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-90);
}
.entry-title {
  font-family: var(--font-display);
  font-size: clamp(48px, 7vw, 88px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink-100);
  margin: 0 0 24px;
  font-weight: 400;
}
.entry-meta {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-70);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 32px;
}
.entry-meta a { color: var(--ink-90); }
.entry-meta a:hover { color: var(--lime-400); }
.page-header { padding: 80px 24px 0; max-width: 1200px; margin: 0 auto; }
article.post, article.page { padding-bottom: 40px; border-bottom: 1px solid var(--ink-40); }
article.post:last-child, article.page:last-child { border-bottom: none; }

.posts-navigation a, .post-navigation a {
  color: var(--lime-400);
  font-family: var(--font-mono);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

/* ---------- WordPress utility classes ---------- */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px; width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  word-wrap: normal !important;
}
.screen-reader-text:focus {
  background-color: var(--ink-15);
  border-radius: 3px;
  box-shadow: 0 0 2px 2px rgba(0,0,0,0.6);
  clip: auto !important;
  clip-path: none;
  color: var(--lime-400);
  display: block;
  font-size: 14px;
  font-weight: 700;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
}
.alignleft { float: left; margin: 0 1.5em 1em 0; }
.alignright { float: right; margin: 0 0 1em 1.5em; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; margin-bottom: 1.5em; }
.wp-caption { max-width: 100%; margin-bottom: 1.5em; }
.wp-caption-text { font-family: var(--font-mono); font-size: 12px; color: var(--ink-70); text-align: center; margin-top: 8px; }
.sticky { display: block; }
.bypostauthor { display: block; }

/* ---------- Animations ---------- */
@keyframes draw {
  from { stroke-dashoffset: 1000; }
  to { stroke-dashoffset: 0; }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.reveal { animation: fadeUp 0.9s var(--ease-out) both; }
.reveal-delay-1 { animation-delay: 0.1s; }
.reveal-delay-2 { animation-delay: 0.2s; }
.reveal-delay-3 { animation-delay: 0.3s; }

/* ---------- Responsive ---------- */
@media (max-width: 1400px) {
  /* Hide redundant items as viewport narrows — keeps header from squeezing */
  .topbar-actions a:nth-child(2),
  .topbar-actions a:nth-child(3) { display: none; }
  .topbar-marquee span:nth-child(3) { display: none; }
  .nav-phone { display: none; }
  .primary-menu { gap: 0; }
  .primary-menu > li > a,
  .primary-menu > li > button { padding: 10px 10px; font-size: 14px; }
  .brand small { display: none; }
}
@media (max-width: 1200px) {
  .topbar-marquee span:nth-child(2) { display: none; }
  .nav-inner { gap: 16px; }
}
@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr; }
  .section-head { grid-template-columns: 1fr; }
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bento-card.b-hero { grid-column: span 2; grid-row: span 1; }
  .bento-card.b-hero h3 { font-size: 40px; }
  .bento-card.b-auto, .bento-card.b-content { grid-column: span 2; }
  .funnel-grid { grid-template-columns: repeat(2, 1fr); }
  .cases-grid { grid-template-columns: 1fr 1fr; }
  .case.feature { grid-column: span 2; }
  .pricing-grid { grid-template-columns: 1fr; }
  .testi-grid { grid-template-columns: 1fr; }
  .footer-cols { grid-template-columns: 1fr 1fr; }
  .footer-hero { grid-template-columns: 1fr; }
  .primary-menu { display: none; }
  .menu-toggle { display: inline-flex; }
  .main-navigation.toggled .primary-menu {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--ink-15);
    border-top: 1px solid var(--ink-40);
    border-bottom: 1px solid var(--ink-40);
    padding: 16px var(--gutter);
    gap: 4px;
  }
  .main-navigation.toggled .primary-menu > li > a,
  .main-navigation.toggled .primary-menu > li > button { width: 100%; justify-content: space-between; padding: 14px 16px; }
  .process-row { grid-template-columns: 60px 1fr; }
  .process-row p, .process-row .week { display: none; }
}
@media (max-width: 600px) {
  .topbar-marquee span:not(:first-child) { display: none; }
  .topbar-actions a:not(:last-child) { display: none; }
  .nav-phone { display: none; }
  .bento { grid-template-columns: 1fr; }
  .bento-card.b-hero, .bento-card.b-auto, .bento-card.b-content,
  .bento-card.b-seo, .bento-card.b-ppc, .bento-card.b-smm { grid-column: span 1; }
  .funnel-grid { grid-template-columns: 1fr; }
  .cases-grid { grid-template-columns: 1fr; }
  .case.feature { grid-column: span 1; }
  .cta-meta { grid-template-columns: 1fr; }
  .gt-section { padding: 80px 0; }
  .hero { padding: 48px 0 80px; }
  .testi-main { padding: 32px 24px; }
  .testi-main .quote { font-size: 26px; }
  .testi-main .qmark { font-size: 80px; }
  .funnel-cta { padding: 24px; }
  .funnel-cta strong { font-size: 22px; }
  .nav-inner { height: 64px; }
  .brand small { display: none; }
}