/* ============================================
   GENMRKT — Main Stylesheet
   Generate Marketing website styles
   Design system: Alternating dark/light sections with warm/cool gradients
============================================ */

/* ============================================
   CSS VARIABLES
============================================ */
:root {
  /* Dark palette */
  --d-bg: #141422;
  --d-surface: #1d1d32;
  --d-surface-2: #252540;
  --d-border: #2a2a44;
  --d-text: #f8f6ff;
  --d-text-dim: #dddaf0;

  /* Light palette */
  --l-bg: #faf9f7;
  --l-surface: #ffffff;
  --l-border: #e4e2de;
  --l-text: #0a0a14;
  --l-text-dim: #6b6980;

  /* Accent colors: Electric Coral + Deep Indigo */
  --accent-1: #ff4d4d;
  --accent-2: #5b3cff;
  --gradient: linear-gradient(135deg, #ff4d4d, #ff8c42);
  --gradient-cool: linear-gradient(135deg, #5b3cff, #3c9dff);
  --gradient-mix: linear-gradient(135deg, #ff4d4d, #5b3cff);
  --glow-warm: rgba(255, 77, 77, 0.15);
  --glow-cool: rgba(91, 60, 255, 0.15);

  /* Typography */
  --font-display: 'Outfit', sans-serif;
  --font-body: 'Satoshi', sans-serif;

  /* Animation easing curves */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ============================================
   RESET & BASE STYLES
============================================ */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

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

a {
  color: inherit;
  text-decoration: none;
}

/* Container: max-width wrapper for content */
.container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 28px;
}

/* ============================================
   ANIMATIONS & REVEALS
   Scroll-triggered entrance animations
============================================ */

/* Fade up (default reveal) */
.reveal {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered delays for grid items */
.reveal-delay-1 { transition-delay: 0.12s; }
.reveal-delay-2 { transition-delay: 0.24s; }
.reveal-delay-3 { transition-delay: 0.36s; }
.reveal-delay-4 { transition-delay: 0.48s; }

/* Slide from left */
.reveal-left {
  opacity: 0;
  transform: translateX(-60px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}

/* Slide from right */
.reveal-right {
  opacity: 0;
  transform: translateX(60px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}

.reveal-left.visible,
.reveal-right.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Scale in */
.reveal-scale {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}
.reveal-scale.visible {
  opacity: 1;
  transform: scale(1);
}

/* ============================================
   NAVIGATION
   Fixed nav with glass-morphism on scroll
============================================ */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 20px 0;
  transition: all 0.4s;
}

/* Glass-morphism effect when scrolled */
.nav.scrolled {
  background: rgba(20, 20, 34, 0.9);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  padding: 14px 0;
  border-bottom: 1px solid var(--d-border);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Logo: GEN (white) + MRKT (gradient) */
.nav-logo {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.6rem;
  letter-spacing: -0.03em;
}

.nav-logo span {
  background: var(--gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Nav links */
.nav-links {
  display: flex;
  align-items: center;
  gap: 40px;
  list-style: none;
}

.nav-links a {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--d-text-dim);
  transition: color 0.3s;
}

.nav-links a:hover {
  color: var(--d-text);
}

/* CTA button in nav */
.nav-cta {
  background: var(--gradient) !important;
  color: #fff !important;
  padding: 11px 28px;
  border-radius: 100px;
  font-weight: 700;
  font-size: 0.85rem;
  transition: transform 0.3s var(--ease-spring), box-shadow 0.3s;
}

.nav-cta:hover {
  transform: scale(1.06);
  box-shadow: 0 8px 30px rgba(255, 77, 77, 0.3);
}

/* Mobile hamburger menu toggle */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  width: 32px;
  height: 22px;
  position: relative;
}

.nav-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--d-text);
  position: absolute;
  left: 0;
  transition: all 0.3s var(--ease-out);
}

.nav-toggle span:nth-child(1) { top: 0; }
.nav-toggle span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.nav-toggle span:nth-child(3) { bottom: 0; }

/* Animated hamburger → X */
.nav-toggle.active span:nth-child(1) {
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}
.nav-toggle.active span:nth-child(2) {
  opacity: 0;
}
.nav-toggle.active span:nth-child(3) {
  bottom: 50%;
  transform: translateY(50%) rotate(-45deg);
}

/* ============================================
   SERVICES DROPDOWN
   Desktop: hover dropdown | Mobile: accordion
============================================ */

/* Make the <li> the positioning anchor */
.nav-dropdown {
  position: relative;
}

/* Invisible bridge fills the gap between the link and the dropdown panel.
   Without this, moving the mouse down through the gap would end the hover
   state and close the dropdown before reaching it. */
.nav-dropdown::after {
  content: '';
  position: absolute;
  top: 100%;
  left: -16px;
  right: -16px;
  height: 16px; /* must be >= the gap set on .nav-dropdown-menu top */
}

/* Flex-align the link text + chevron */
.nav-dropdown-toggle {
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
}

/* Chevron rotates when dropdown is open */
.nav-chevron {
  transition: transform 0.25s var(--ease-out);
  flex-shrink: 0;
  opacity: 0.7;
}

.nav-dropdown:hover .nav-chevron {
  transform: rotate(180deg);
  opacity: 1;
}

/* Dropdown panel — invisible until hovered */
.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 12px); /* visual gap — covered by the ::after bridge above */
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  background: #1d1d32;
  border: 1px solid #2a2a44;
  border-radius: 16px;
  padding: 8px;
  min-width: 220px;
  list-style: none;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.04);
  z-index: 1000;
  /* Hidden by default, fades in on hover */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s var(--ease-out), transform 0.2s var(--ease-out), visibility 0.2s;
}

.nav-dropdown:hover .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
  transform: translateX(-50%) translateY(0);
}

/* Individual dropdown links */
.nav-dropdown-menu li {
  list-style: none;
}

.nav-dropdown-menu a {
  display: block !important;
  padding: 10px 14px;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--d-text-dim) !important;
  border-radius: 10px;
  white-space: nowrap;
  transition: color 0.2s, background 0.2s;
}

.nav-dropdown-menu a:hover {
  color: var(--accent-1) !important;
  background: rgba(255, 77, 77, 0.08);
}

/* ============================================
   HERO — DARK SECTION WITH MASSIVE TYPE
   Animated gradient orbs + grid lines
============================================ */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  padding: 140px 0 100px;
}

/* Animated gradient orbs (floating background) */
.hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  pointer-events: none;
  animation: orbFloat 8s ease-in-out infinite alternate;
}

.hero-orb-1 {
  width: 600px;
  height: 600px;
  background: rgba(255, 77, 77, 0.12);
  top: -15%;
  right: -10%;
  animation-duration: 8s;
}

.hero-orb-2 {
  width: 500px;
  height: 500px;
  background: rgba(91, 60, 255, 0.1);
  bottom: -20%;
  left: -8%;
  animation-duration: 10s;
  animation-direction: alternate-reverse;
}

.hero-orb-3 {
  width: 300px;
  height: 300px;
  background: rgba(255, 140, 66, 0.08);
  top: 40%;
  right: 30%;
  animation-duration: 12s;
}

@keyframes orbFloat {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(30px, -40px) scale(1.15); }
}

/* Grid lines overlay */
.hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 77, 77, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(91, 60, 255, 0.03) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
}

.hero-content {
  position: relative;
  z-index: 2;
}

/* Hero tag pill (e.g., "Creative Marketing Agency") */
.hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--d-surface-2);
  border: 1px solid var(--d-border);
  padding: 10px 20px;
  border-radius: 100px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 36px;
  animation: tagSlide 0.8s var(--ease-out) 0.2s both;
}

.hero-tag .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-1);
  animation: dotPulse 2s ease-in-out infinite;
}

@keyframes dotPulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(255, 77, 77, 0.4); }
  50% { opacity: 0.6; box-shadow: 0 0 0 6px rgba(255, 77, 77, 0); }
}

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

/* Hero headline: massive, bold type */
.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 9vw, 7rem);
  font-weight: 900;
  line-height: 0.98;
  letter-spacing: -0.045em;
  margin-bottom: 32px;
  animation: headlineReveal 1s var(--ease-out) 0.4s both;
}

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

.hero h1 .line {
  display: block;
}

/* Gradient text for emphasized words */
.hero h1 .accent {
  background: var(--gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  position: relative;
}

/* Hero description */
.hero-description {
  font-size: 1.2rem;
  color: var(--d-text-dim);
  max-width: 500px;
  line-height: 1.7;
  margin-bottom: 44px;
  animation: descReveal 1s var(--ease-out) 0.6s both;
}

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

/* Hero action buttons */
.hero-actions {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
  animation: actionsReveal 1s var(--ease-out) 0.8s both;
}

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

/* Primary button: gradient background */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--gradient);
  color: #fff;
  padding: 18px 40px;
  border-radius: 100px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  border: none;
  cursor: pointer;
  transition: transform 0.3s var(--ease-spring), box-shadow 0.3s;
  position: relative;
  overflow: hidden;
}

.btn-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #ff8c42, #ff4d4d);
  opacity: 0;
  transition: opacity 0.3s;
}

.btn-primary:hover::before {
  opacity: 1;
}

.btn-primary:hover {
  transform: scale(1.05);
  box-shadow: 0 12px 40px rgba(255, 77, 77, 0.35);
}

.btn-primary span {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
}

.btn-primary svg {
  transition: transform 0.3s var(--ease-spring);
  position: relative;
  z-index: 1;
}

.btn-primary:hover svg {
  transform: translateX(4px);
}

/* Secondary button: outline style */
.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 18px 40px;
  border-radius: 100px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  border: 1px solid var(--d-border);
  color: var(--d-text);
  background: transparent;
  cursor: pointer;
  transition: border-color 0.3s, background 0.3s;
}

.btn-secondary:hover {
  border-color: var(--d-text-dim);
  background: var(--d-surface);
}

/* ============================================
   MARQUEE — SCROLLING TEXT STRIP
   Infinite horizontal scroll of service names
============================================ */
.marquee-section {
  padding: 20px 0;
  overflow: hidden;
  border-top: 1px solid var(--d-border);
  border-bottom: 1px solid var(--d-border);
}

.marquee-track {
  display: flex;
  gap: 24px;
  animation: marquee 25s linear infinite;
  width: max-content;
}

.marquee-item {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--d-text-dim);
  white-space: nowrap;
  padding: 0 24px;
  display: flex;
  align-items: center;
}

/* Gradient dot separator */
.marquee-item::after {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gradient);
  margin-left: 48px;
  flex-shrink: 0;
}

@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ============================================
   SECTIONS — LIGHT & DARK
   Base styles for alternating sections
============================================ */
.section-light {
  background: var(--l-bg);
  color: var(--l-text);
  padding: 120px 0;
}

.section-dark {
  background: var(--d-bg);
  color: var(--d-text);
  padding: 120px 0;
}

/* Section tag (small uppercase label) */
.section-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 18px;
}

.section-tag.warm {
  color: var(--accent-1);
}

.section-tag.cool {
  color: var(--accent-2);
}

/* Line before section tag */
.section-tag::before {
  content: '';
  width: 28px;
  height: 2px;
}

.section-tag.warm::before {
  background: var(--accent-1);
}

.section-tag.cool::before {
  background: var(--accent-2);
}

/* Section title (large, bold heading) */
.section-title {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4.5vw, 3.4rem);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin-bottom: 18px;
}

/* Section subtitle (description text) */
.section-subtitle {
  font-size: 1.08rem;
  line-height: 1.7;
  max-width: 520px;
}

.section-light .section-subtitle {
  color: var(--l-text-dim);
}

.section-dark .section-subtitle {
  color: var(--d-text-dim);
}

/* ============================================
   SERVICE CARDS — LIGHT SECTIONS
   Hoverable cards with gradient top borders
============================================ */
.services-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 56px;
}

.service-card {
  background: var(--l-surface);
  border: 1px solid var(--l-border);
  border-radius: 20px;
  padding: 44px;
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s;
  position: relative;
  overflow: hidden;
}

/* Gradient top border (appears on hover) */
.service-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  opacity: 0;
  transition: opacity 0.4s;
}

.service-card:nth-child(odd)::after {
  background: var(--gradient);
}

.service-card:nth-child(even)::after {
  background: var(--gradient-cool);
}

.service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.08);
}

.service-card:hover::after {
  opacity: 1;
}

/* Service icon */
.service-icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  margin-bottom: 24px;
  font-size: 1.5rem;
}

.icon-warm {
  background: var(--glow-warm);
}

.icon-cool {
  background: var(--glow-cool);
}

.service-card h3 {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--l-text);
  margin-bottom: 10px;
}

.service-card p {
  color: var(--l-text-dim);
  font-size: 0.95rem;
  line-height: 1.7;
  margin-bottom: 24px;
}

/* Service link (arrow link at bottom) */
.service-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 0.9rem;
  transition: gap 0.3s var(--ease-spring);
}

.link-warm {
  color: var(--accent-1);
}

.link-cool {
  color: var(--accent-2);
}

.service-link:hover {
  gap: 14px;
}

/* ============================================
   STAT CARDS — DARK SECTIONS
   Number + label cards with gradient text
============================================ */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.about-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 44px;
}

.stat-card {
  background: var(--d-surface);
  border: 1px solid var(--d-border);
  border-radius: 16px;
  padding: 28px;
  transition: border-color 0.3s, transform 0.3s var(--ease-out);
}

.stat-card:hover {
  border-color: rgba(255, 77, 77, 0.25);
  transform: translateY(-3px);
}

/* Stat number with gradient */
.stat-card .number {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 900;
  line-height: 1;
  margin-bottom: 6px;
  background: var(--gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.stat-card .label {
  font-size: 0.85rem;
  color: var(--d-text-dim);
}

/* About visual (quote box) */
.about-visual {
  position: relative;
}

.about-box {
  background: var(--d-surface);
  border: 1px solid var(--d-border);
  border-radius: 24px;
  padding: 52px;
  position: relative;
  overflow: hidden;
}

/* Gradient top border */
.about-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--gradient-mix);
}

/* Large decorative quote mark */
.about-box .big-quote {
  font-family: var(--font-display);
  font-size: 9rem;
  font-weight: 900;
  line-height: 0.8;
  position: absolute;
  top: 20px;
  left: 32px;
  background: var(--gradient-mix);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  opacity: 0.12;
}

.about-box blockquote {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.4;
  position: relative;
  z-index: 1;
}

.about-box .attribution {
  margin-top: 20px;
  font-size: 0.85rem;
  color: var(--d-text-dim);
}

/* Glow effect in corner */
.about-glow {
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  bottom: -60px;
  right: -60px;
  background: var(--accent-1);
  filter: blur(80px);
  opacity: 0.15;
}

/* ============================================
   PROCESS STEPS — LIGHT SECTIONS
   4-column grid with large counter numbers
============================================ */
.process-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 56px;
  counter-reset: step;
}

.process-step {
  padding: 40px 32px;
  position: relative;
  counter-increment: step;
  border-right: 1px solid var(--l-border);
  transition: background 0.3s;
}

.process-step:last-child {
  border-right: none;
}

.process-step:hover {
  background: var(--l-surface);
}

/* Large gradient counter (01, 02, etc.) */
.process-step::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-display);
  font-size: 4rem;
  font-weight: 900;
  line-height: 1;
  display: block;
  margin-bottom: 20px;
  background: var(--gradient-mix);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  opacity: 0.2;
  transition: opacity 0.3s;
}

.process-step:hover::before {
  opacity: 0.5;
}

.process-step h3 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--l-text);
  margin-bottom: 8px;
}

.process-step p {
  font-size: 0.9rem;
  color: var(--l-text-dim);
  line-height: 1.6;
}

/* ============================================
   CTA SECTION — DARK WITH GLOW
   Call-to-action with gradient orb background
============================================ */
.cta-section {
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* Gradient orbs behind content */
.cta-orb-1 {
  position: absolute;
  width: 500px;
  height: 500px;
  background: rgba(255, 77, 77, 0.08);
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  filter: blur(100px);
  pointer-events: none;
}

.cta-orb-2 {
  position: absolute;
  width: 350px;
  height: 350px;
  background: rgba(91, 60, 255, 0.06);
  border-radius: 50%;
  top: 30%;
  left: 60%;
  transform: translate(-50%, -50%);
  filter: blur(80px);
  pointer-events: none;
}

.cta-section .section-title,
.cta-section .section-subtitle,
.cta-section .btn-primary {
  position: relative;
  z-index: 1;
}

.cta-section .section-title {
  max-width: 700px;
  margin: 0 auto 18px;
}

.cta-section .section-subtitle {
  max-width: 460px;
  margin: 0 auto 40px;
  color: var(--d-text-dim);
}

/* ============================================
   FOOTER — DARK
   4-column grid with links and contact info
============================================ */
footer {
  padding: 60px 0 32px;
  border-top: 1px solid var(--d-border);
}

.footer-top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 44px;
  border-bottom: 1px solid var(--d-border);
}

.footer-brand p {
  font-size: 0.9rem;
  color: var(--d-text-dim);
  line-height: 1.7;
  max-width: 280px;
  margin-top: 14px;
}

/* Social links */
.footer-socials {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

.footer-socials a {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--d-border);
  border-radius: 10px;
  color: var(--d-text-dim);
  font-size: 0.82rem;
  font-weight: 600;
  transition: all 0.3s;
}

.footer-socials a:hover {
  border-color: var(--accent-1);
  color: var(--accent-1);
  background: var(--glow-warm);
}

/* Footer column links */
.footer-col h4 {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 700;
  margin-bottom: 18px;
  color: var(--d-text);
}

.footer-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-col a {
  font-size: 0.88rem;
  color: var(--d-text-dim);
  transition: color 0.3s;
}

.footer-col a:hover {
  color: var(--accent-1);
}

/* Footer bottom bar */
.footer-bottom {
  display: flex;
  justify-content: space-between;
  padding-top: 24px;
  font-size: 0.78rem;
  color: var(--d-text-dim);
}

.footer-bottom a {
  color: var(--d-text-dim);
  transition: color 0.3s;
}

.footer-bottom a:hover {
  color: var(--d-text);
}

/* ============================================
   SERVICE HERO
   Simplified hero for service pages
============================================ */
.service-hero {
  min-height: 80vh;
  padding: 160px 0 100px;
}

.service-hero .hero-content {
  max-width: 800px;
}

/* ============================================
   PRICING CARDS
   Three-column pricing grid with featured card
============================================ */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 56px;
}

.pricing-card {
  background: var(--l-surface);
  border: 2px solid var(--l-border);
  border-radius: 20px;
  padding: 40px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s, border-color 0.4s;
}

.pricing-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
}

/* Featured/recommended card */
.pricing-card-featured {
  border-color: var(--accent-1);
  box-shadow: 0 8px 32px rgba(255, 77, 77, 0.12);
  transform: scale(1.05);
}

.pricing-card-featured:hover {
  transform: scale(1.05) translateY(-4px);
  box-shadow: 0 24px 64px rgba(255, 77, 77, 0.18);
}

/* Recommended badge */
.pricing-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--gradient);
  color: #fff;
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 6px 20px;
  border-radius: 100px;
}

.pricing-header {
  margin-bottom: 32px;
}

.pricing-header h3 {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--l-text);
  margin-bottom: 8px;
}

.pricing-desc {
  font-size: 0.9rem;
  color: var(--l-text-dim);
  line-height: 1.6;
}

.pricing-features {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 32px;
}

.pricing-feature {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.9rem;
  color: var(--l-text);
  line-height: 1.6;
}

.pricing-feature svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--accent-1);
}

/* Pricing buttons */
.btn-pricing {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 32px;
  border-radius: 100px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  border: 2px solid var(--l-border);
  color: var(--l-text);
  background: transparent;
  cursor: pointer;
  transition: all 0.3s var(--ease-out);
  width: 100%;
}

.btn-pricing:hover {
  border-color: var(--accent-1);
  color: var(--accent-1);
  background: var(--glow-warm);
}

.btn-pricing-featured {
  background: var(--gradient);
  color: #fff;
  border-color: transparent;
}

.btn-pricing-featured:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 24px rgba(255, 77, 77, 0.3);
  background: var(--gradient);
  border-color: transparent;
}

/* ============================================
   STEPS ROW
   Three-column step cards for process explanation
============================================ */
.steps-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 56px;
}

/* Four-column variant for 4-step processes */
.steps-row-4 {
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.step-card {
  background: var(--d-surface);
  border: 1px solid var(--d-border);
  border-radius: 20px;
  padding: 40px;
  transition: transform 0.3s var(--ease-out), border-color 0.3s;
}

.step-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 77, 77, 0.3);
}

.step-number {
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 900;
  line-height: 1;
  background: var(--gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 20px;
}

.step-card h3 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--d-text);
  margin-bottom: 12px;
}

.step-card p {
  font-size: 0.95rem;
  color: var(--d-text-dim);
  line-height: 1.7;
}

/* ============================================
   TESTIMONIALS GRID
   Client testimonials in 2x2 grid
============================================ */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 56px;
}

.testimonial-card {
  background: var(--l-surface);
  border: 1px solid var(--l-border);
  border-radius: 20px;
  padding: 40px;
  position: relative;
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s;
}

.testimonial-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
}

.testimonial-quote {
  font-family: var(--font-display);
  font-size: 6rem;
  font-weight: 900;
  line-height: 0.8;
  background: var(--gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  opacity: 0.15;
  position: absolute;
  top: 20px;
  left: 32px;
}

.testimonial-text {
  font-size: 1.05rem;
  color: var(--l-text);
  line-height: 1.7;
  margin-bottom: 24px;
  position: relative;
  z-index: 1;
}

.testimonial-author {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.testimonial-author strong {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--l-text);
}

.testimonial-author span {
  font-size: 0.85rem;
  color: var(--l-text-dim);
}

/* ============================================
   INSTRUCTIONAL DESIGN SERVICES GRID
   3-column grid for ID service offerings
============================================ */
.id-services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 56px;
}

.id-service-card {
  background: var(--l-surface);
  border: 1px solid var(--l-border);
  border-radius: 20px;
  padding: 32px;
  text-align: center;
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s, border-color 0.4s;
}

.id-service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
  border-color: var(--accent-1);
}

.id-service-icon {
  font-size: 3rem;
  margin-bottom: 20px;
  line-height: 1;
}

.id-service-card h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--l-text);
  margin-bottom: 12px;
}

.id-service-card p {
  font-size: 0.9rem;
  color: var(--l-text-dim);
  line-height: 1.6;
  margin: 0;
}

/* ============================================
   INTERACTIVE DEMO CONTAINER
   Fixed height container for course demo
============================================ */
.demo-container {
  max-width: 1100px;
  margin: 0 auto;
  height: 1100px;
  border-radius: 20px;
  background: var(--d-surface);
  overflow: hidden;
}

.demo-iframe {
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 20px;
}

/* ============================================
   ID PROCESS GRID
   4-column process cards for instructional design
============================================ */
.id-process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 56px;
}

.id-process-card {
  background: var(--l-surface);
  border: 1px solid var(--l-border);
  border-radius: 20px;
  padding: 32px;
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s;
}

.id-process-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
}

.id-process-number {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 900;
  line-height: 1;
  background: var(--gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 20px;
}

.id-process-card h3 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--l-text);
  margin-bottom: 12px;
}

.id-process-card p {
  font-size: 0.9rem;
  color: var(--l-text-dim);
  line-height: 1.6;
  margin: 0;
}

/* ============================================
   CONTACT FORM & INFO
   Two-column contact page layout
============================================ */
.contact-layout {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 64px;
  margin-top: 56px;
}

.contact-form-wrapper {
  background: var(--l-surface);
  border: 1px solid var(--l-border);
  border-radius: 20px;
  padding: 48px;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Hidden field for honeypot */
.hidden {
  display: none;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-group label {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--l-text);
}

.required {
  color: var(--accent-1);
}

.form-group input,
.form-group select,
.form-group textarea {
  font-family: var(--font-body);
  font-size: 0.95rem;
  padding: 14px 18px;
  border: 1px solid var(--l-border);
  border-radius: 12px;
  background: var(--l-bg);
  color: var(--l-text);
  transition: border-color 0.3s, box-shadow 0.3s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--accent-1);
  box-shadow: 0 0 0 3px rgba(255, 77, 77, 0.1);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: var(--l-text-dim);
}

.form-group textarea {
  resize: vertical;
  min-height: 140px;
}

.form-group select {
  cursor: pointer;
}

.btn-submit {
  margin-top: 8px;
}

/* Contact Info Column */
.contact-info {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.contact-info-header h3 {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--l-text);
  margin-bottom: 12px;
}

.contact-info-header p {
  font-size: 0.95rem;
  color: var(--l-text-dim);
  line-height: 1.7;
}

.contact-info-items {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.contact-info-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.contact-info-icon {
  width: 48px;
  height: 48px;
  min-width: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--glow-warm);
  border-radius: 12px;
  color: var(--accent-1);
}

.contact-info-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.contact-info-content strong {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--l-text);
}

.contact-info-content a,
.contact-info-content span {
  font-size: 0.95rem;
  color: var(--l-text-dim);
  transition: color 0.3s;
}

.contact-info-content a:hover {
  color: var(--accent-1);
}

/* Contact Social Links */
.contact-socials {
  padding-top: 24px;
  border-top: 1px solid var(--l-border);
}

.contact-socials-label {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--l-text-dim);
  margin-bottom: 16px;
}

.contact-socials-links {
  display: flex;
  gap: 12px;
}

.contact-socials-links a {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--l-border);
  border-radius: 12px;
  color: var(--l-text-dim);
  transition: all 0.3s;
}

.contact-socials-links a:hover {
  border-color: var(--accent-1);
  color: var(--accent-1);
  background: var(--glow-warm);
  transform: translateY(-2px);
}

/* ============================================
   SUCCESS PAGE
   Full-page success message after form submission
============================================ */
.success-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--d-bg);
  color: var(--d-text);
  padding: 60px 28px;
}

.success-content {
  text-align: center;
  max-width: 600px;
}

.success-icon {
  width: 100px;
  height: 100px;
  margin: 0 auto 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--glow-warm);
  border: 2px solid var(--accent-1);
  border-radius: 50%;
  color: var(--accent-1);
  animation: successPop 0.6s var(--ease-spring) forwards;
}

@keyframes successPop {
  0% { transform: scale(0); opacity: 0; }
  60% { transform: scale(1.15); }
  100% { transform: scale(1); opacity: 1; }
}

.success-content h1 {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  font-weight: 900;
  line-height: 1.1;
  margin-bottom: 20px;
  background: var(--gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.success-content p {
  font-size: 1.15rem;
  color: var(--d-text-dim);
  line-height: 1.7;
  margin-bottom: 40px;
}

/* ============================================
   RESPONSIVE BREAKPOINTS
   Mobile and tablet layout adjustments
============================================ */

/* Tablet: 1024px and below */
@media (max-width: 1024px) {
  .services-grid {
    grid-template-columns: 1fr;
  }

  .about-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .process-steps {
    grid-template-columns: 1fr 1fr;
  }

  .process-step {
    border-bottom: 1px solid var(--l-border);
  }

  .footer-top {
    grid-template-columns: 1fr 1fr;
  }

  /* Pricing and testimonials adjust to 2 columns */
  .pricing-grid,
  .pricing-grid-dark {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .pricing-card-featured {
    transform: scale(1);
  }

  .pricing-card-featured:hover {
    transform: scale(1) translateY(-4px);
  }

  .steps-row,
  .steps-row-4 {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .testimonials-grid {
    grid-template-columns: 1fr;
  }

  .contact-layout {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  /* Instructional Design responsive */
  .id-services-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .id-process-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  /* Marketing Automation responsive */
  .automation-services-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .platforms-grid-major {
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
  }

  .platforms-grid-tools {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .checklist-container {
    grid-template-columns: 1fr;
  }

  /* Lead Gen Framework responsive */
  .leadgen-framework-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  /* Lead Gen Types responsive */
  .leadgen-types-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* Mobile menu dropdown — shown when JS adds .mobile-open */
.nav-links.mobile-open {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  position: fixed;
  top: 64px; /* height of nav bar */
  left: 0;
  right: 0;
  background: #141422;
  border-bottom: 1px solid var(--d-border);
  padding: 16px 24px 24px;
  z-index: 999;
  /* Slide-down animation */
  animation: mobileMenuSlide 0.25s var(--ease-out) both;
}

.nav-links.mobile-open li {
  width: 100%;
}

.nav-links.mobile-open a {
  display: block;
  padding: 14px 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--d-text);
  border-bottom: 1px solid var(--d-border);
}

.nav-links.mobile-open li:last-child a {
  border-bottom: none;
  margin-top: 8px;
}

/* Make the CTA button full-width in mobile menu */
.nav-links.mobile-open .nav-cta {
  display: block;
  text-align: center;
  width: 100%;
  box-sizing: border-box;
  padding: 14px 24px;
}

/* Services dropdown accordion in mobile menu */
.nav-links.mobile-open .nav-dropdown-toggle {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

/* Disable desktop hover dropdown inside mobile menu */
.nav-links.mobile-open .nav-dropdown:hover .nav-dropdown-menu {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: none;
}

/* Reset dropdown to static/accordion inside mobile menu */
.nav-links.mobile-open .nav-dropdown-menu {
  position: static;
  transform: none;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  min-width: 0;
  border-radius: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s var(--ease-out), opacity 0.25s var(--ease-out), visibility 0.25s;
}

/* Show accordion when .open class is added by JS */
.nav-links.mobile-open .nav-dropdown.open .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
  max-height: 300px;
}

.nav-links.mobile-open .nav-dropdown.open .nav-chevron {
  transform: rotate(180deg);
  opacity: 1;
}

/* Style the sub-links inside mobile accordion */
.nav-links.mobile-open .nav-dropdown-menu a {
  padding: 10px 0 10px 20px;
  font-size: 0.92rem;
  border-radius: 0;
  border-bottom: none;
  color: var(--d-text-dim) !important;
}

.nav-links.mobile-open .nav-dropdown-menu a:hover {
  color: var(--accent-1) !important;
  background: transparent;
}

.nav-links.mobile-open .nav-dropdown-menu li:last-child a {
  border-bottom: none;
  margin-top: 0;
}

@keyframes mobileMenuSlide {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Mobile: 768px and below */
@media (max-width: 768px) {
  /* Hide desktop nav links, show hamburger */
  .nav-links {
    display: none;
  }

  .nav-toggle {
    display: block;
  }

  /* Hero adjustments */
  .hero h1 {
    font-size: clamp(2.5rem, 10vw, 4rem);
  }

  .hero-actions {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Process steps stack vertically */
  .process-steps {
    grid-template-columns: 1fr;
  }

  .process-step {
    border-right: none;
  }

  /* Section padding reduction */
  .section-light,
  .section-dark {
    padding: 80px 0;
  }

  /* Footer stacks vertically */
  .footer-top {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }

  /* Service hero adjustments */
  .service-hero {
    min-height: 60vh;
    padding: 120px 0 80px;
  }

  /* Pricing cards stack */
  .pricing-grid,
  .pricing-grid-dark {
    gap: 16px;
  }

  .pricing-card {
    padding: 32px;
  }

  /* Steps stack */
  .steps-row,
  .steps-row-4 {
    gap: 20px;
  }

  .step-card {
    padding: 32px;
  }

  /* Testimonials stack */
  .testimonials-grid {
    gap: 20px;
  }

  .testimonial-card {
    padding: 32px;
  }

  .testimonial-quote {
    font-size: 4rem;
  }

  /* Contact page mobile adjustments */
  .contact-layout {
    gap: 40px;
  }

  .contact-form-wrapper {
    padding: 32px;
  }

  /* Instructional Design mobile adjustments */
  .id-services-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .id-service-card {
    padding: 28px;
  }

  .id-process-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .id-process-card {
    padding: 28px;
  }

  /* Marketing Automation mobile adjustments */
  .automation-services-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .automation-service-card {
    padding: 28px;
  }

  .platforms-grid-major {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .platforms-grid-tools {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .checklist-container {
    grid-template-columns: 1fr;
  }

  /* Lead Gen Framework mobile adjustments */
  .leadgen-framework-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .leadgen-framework-card {
    padding: 28px;
  }

  /* Lead Gen Types mobile adjustments */
  .leadgen-types-grid {
    gap: 16px;
  }

  .leadgen-type-card {
    padding: 32px;
  }
}

/* ============================================
   MARKETING AUTOMATION SERVICES GRID
   3-column grid for automation service cards
============================================ */
.automation-services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 56px;
}

.automation-service-card {
  background: var(--l-surface);
  border: 1px solid var(--l-border);
  border-radius: 20px;
  padding: 32px;
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s, border-color 0.4s;
}

.automation-service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
  border-color: var(--accent-1);
}

.automation-service-icon {
  font-size: 3rem;
  margin-bottom: 20px;
  line-height: 1;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
}

.automation-service-icon.icon-warm {
  background: var(--glow-warm);
}

.automation-service-icon.icon-cool {
  background: var(--glow-cool);
}

.automation-service-card h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--l-text);
  margin-bottom: 16px;
}

.automation-service-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.automation-service-list li {
  font-size: 0.9rem;
  color: var(--l-text-dim);
  line-height: 1.5;
  padding-left: 20px;
  position: relative;
}

.automation-service-list li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: var(--accent-1);
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1.3;
}

/* ============================================
   PLATFORMS SECTION
   Platform pills and tool badges
============================================ */
.platforms-section {
  max-width: 900px;
  margin: 0 auto;
}

.platforms-label {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--d-text-dim);
  text-align: center;
  margin-bottom: 24px;
}

.platforms-grid-major {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.platform-pill {
  background: var(--d-surface-2);
  border: 1px solid var(--d-border);
  border-radius: 100px;
  padding: 18px 28px;
  text-align: center;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--d-text);
  transition: border-color 0.3s, background 0.3s, transform 0.3s var(--ease-out);
}

.platform-pill:hover {
  border-color: var(--accent-1);
  background: var(--glow-warm);
  transform: translateY(-4px);
}

.platforms-grid-tools {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.platform-pill-small {
  background: var(--d-surface-2);
  border: 1px solid var(--d-border);
  border-radius: 100px;
  padding: 12px 20px;
  text-align: center;
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--d-text-dim);
  transition: border-color 0.3s, background 0.3s, color 0.3s, transform 0.3s var(--ease-out);
}

.platform-pill-small:hover {
  border-color: var(--accent-2);
  background: var(--glow-cool);
  color: var(--d-text);
  transform: translateY(-2px);
}

/* Light-themed platform pills for light sections */
.platform-pill-light {
  background: var(--l-surface);
  border: 1px solid var(--l-border);
  border-radius: 100px;
  padding: 18px 28px;
  text-align: center;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--l-text);
  transition: border-color 0.3s, background 0.3s, transform 0.3s var(--ease-out), box-shadow 0.3s;
}

.platform-pill-light:hover {
  border-color: var(--accent-1);
  background: var(--glow-warm);
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.06);
}

.platform-pill-small-light {
  background: var(--l-surface);
  border: 1px solid var(--l-border);
  border-radius: 100px;
  padding: 12px 20px;
  text-align: center;
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--l-text-dim);
  transition: border-color 0.3s, background 0.3s, color 0.3s, transform 0.3s var(--ease-out), box-shadow 0.3s;
}

.platform-pill-small-light:hover {
  border-color: var(--accent-2);
  background: var(--glow-cool);
  color: var(--l-text);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
}

/* ============================================
   PRICING DARK VARIANT
   Dark-themed pricing cards for dark sections
============================================ */
.pricing-grid-dark {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 56px;
}

.pricing-grid-dark .pricing-card {
  background: var(--d-surface);
  border: 2px solid var(--d-border);
  color: var(--d-text);
}

.pricing-grid-dark .pricing-card:hover {
  border-color: rgba(255, 77, 77, 0.3);
}

.pricing-grid-dark .pricing-header h3 {
  color: var(--d-text);
}

.pricing-grid-dark .pricing-desc {
  color: var(--d-text-dim);
}

.pricing-grid-dark .pricing-feature {
  color: var(--d-text);
}

/* ============================================
   PRICING BEST FOR
   "Best for" label in pricing cards
============================================ */
.pricing-best-for {
  font-size: 0.85rem;
  color: var(--l-text-dim);
  font-weight: 500;
  margin-bottom: 20px;
  padding-top: 12px;
  border-top: 1px solid var(--l-border);
}

/* ============================================
   CHECKLIST CONTAINER
   Who We Work With checklist styling
============================================ */
.checklist-container {
  max-width: 700px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.checklist-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px;
  background: var(--l-surface);
  border: 1px solid var(--l-border);
  border-radius: 16px;
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s, border-color 0.3s;
}

.checklist-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.06);
  border-color: var(--accent-1);
}

.checklist-item svg {
  flex-shrink: 0;
  color: var(--accent-1);
  margin-top: 2px;
}

.checklist-item span {
  font-size: 1rem;
  color: var(--l-text);
  font-weight: 500;
  line-height: 1.5;
}

/* ============================================
   LEGAL PAGES
   Privacy Policy & Terms of Service content
============================================ */
.legal-content {
  max-width: 760px;
  margin: 0 auto;
}

.legal-intro {
  font-size: 1.1rem;
  color: var(--l-text-dim);
  line-height: 1.8;
  margin-bottom: 56px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--l-border);
}

.legal-section {
  margin-bottom: 48px;
}

.legal-section h2 {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--l-text);
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--l-border);
}

.legal-section p {
  font-size: 0.97rem;
  color: var(--l-text-dim);
  line-height: 1.8;
  margin-bottom: 14px;
}

.legal-section p:last-child {
  margin-bottom: 0;
}

.legal-section ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 16px 0;
  padding: 0;
}

.legal-section ul li {
  font-size: 0.97rem;
  color: var(--l-text-dim);
  line-height: 1.7;
  padding-left: 22px;
  position: relative;
}

.legal-section ul li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: var(--accent-1);
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1.5;
}

.legal-section a {
  color: var(--accent-1);
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: text-decoration-color 0.3s;
}

.legal-section a:hover {
  text-decoration-color: var(--accent-1);
}

.legal-section strong {
  color: var(--l-text);
  font-weight: 700;
}

.legal-contact {
  margin-top: 20px;
  padding: 24px 32px;
  background: var(--l-surface);
  border: 1px solid var(--l-border);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.legal-contact p {
  margin: 0;
}

/* ============================================
   LEAD GENERATION FRAMEWORK GRID
   3-column grid for 6-step process (displays as 3x2)
============================================ */
.leadgen-framework-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 56px;
}

.leadgen-framework-card {
  background: var(--l-surface);
  border: 1px solid var(--l-border);
  border-radius: 20px;
  padding: 32px;
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s, border-color 0.4s;
}

.leadgen-framework-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
  border-color: var(--accent-1);
}

.leadgen-framework-number {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 900;
  line-height: 1;
  background: var(--gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 20px;
}

.leadgen-framework-card h3 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--l-text);
  margin-bottom: 16px;
}

.leadgen-framework-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.leadgen-framework-list li {
  font-size: 0.9rem;
  color: var(--l-text-dim);
  line-height: 1.5;
  padding-left: 20px;
  position: relative;
}

.leadgen-framework-list li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: var(--accent-1);
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1.3;
}

/* ============================================
   LEAD GEN TYPES GRID
   2x2 grid for 4 types of lead generation
============================================ */
.leadgen-types-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 56px;
}

.leadgen-type-card {
  background: var(--d-surface);
  border: 1px solid var(--d-border);
  border-radius: 20px;
  padding: 40px;
  transition: transform 0.4s var(--ease-out), border-color 0.4s;
}

.leadgen-type-card:hover {
  transform: translateY(-6px);
  border-color: rgba(255, 77, 77, 0.3);
}

.leadgen-type-card h3 {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--d-text);
  margin-bottom: 12px;
}

.leadgen-type-card p {
  font-size: 0.95rem;
  color: var(--d-text-dim);
  line-height: 1.7;
  margin: 0;
}