/* ============================================
   NAITIK DIGITAL SERVICES Multi-page UI
   ============================================ */

:root {
  --bg: #ffffff;
  --bg-soft: #f7f8fa;
  --bg-cream: #fbf8f3;
  --bg-dark: #0f1724;
  --bg-deep: #0a1020;
  --ink: #0f1724;
  --ink-2: #2b3445;
  --muted: #5b6573;
  --muted-2: #8b94a3;
  --line: #e6e8ec;
  --line-2: #eef0f3;

  --brand: #ee3e2c;
  --brand-2: #ff7a2b;
  --accent: #1d7ed8;
  --accent-2: #3aa0ff;
  --success: #16a34a;
  --warn: #f59e0b;

  --shadow-sm: 0 1px 2px rgba(15, 23, 36, 0.06);
  --shadow-md: 0 8px 24px -8px rgba(15, 23, 36, 0.12), 0 2px 6px -2px rgba(15, 23, 36, 0.06);
  --shadow-lg: 0 24px 48px -16px rgba(15, 23, 36, 0.18), 0 6px 16px -6px rgba(15, 23, 36, 0.08);
  --shadow-xl: 0 40px 80px -24px rgba(15, 23, 36, 0.25), 0 10px 24px -8px rgba(15, 23, 36, 0.1);

  --radius: 14px;
  --radius-sm: 10px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --payment-banner-height: 70px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px; line-height: 1.6;
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  padding-top: var(--payment-banner-height);
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }

/* ============ Layout ============ */
.container { max-width: 1200px; margin: 0 auto; padding: 0 28px; }
.section { padding: 96px 0; }
.section-sm { padding: 64px 0; }
.section-dark { background: var(--bg-dark); color: #fff; }
.section-soft,
.section-cream { position: relative; overflow: hidden; }
.section-soft {
  background:
    linear-gradient(180deg, rgba(247,248,250,0.94), rgba(247,248,250,0.98)),
    var(--bg-soft);
}
.section-cream {
  background:
    linear-gradient(180deg, rgba(251,248,243,0.92), rgba(251,248,243,0.98)),
    var(--bg-cream);
}
.section-soft::before,
.section-cream::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.34;
  background-image:
    linear-gradient(30deg, transparent 47.8%, rgba(29,126,216,0.08) 48.5%, rgba(29,126,216,0.08) 51.5%, transparent 52.2%),
    linear-gradient(150deg, transparent 47.8%, rgba(238,62,44,0.055) 48.5%, rgba(238,62,44,0.055) 51.5%, transparent 52.2%),
    radial-gradient(circle at 25% 30%, rgba(238,62,44,0.12) 0 3px, transparent 4px),
    radial-gradient(circle at 75% 70%, rgba(29,126,216,0.13) 0 3px, transparent 4px);
  background-size: 260px 225px, 260px 225px, 260px 260px, 320px 320px;
  mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
}
.section-soft > .container,
.section-cream > .container { position: relative; z-index: 1; }

.eyebrow {
  display: inline-block;
  font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--brand);
  padding: 6px 12px; border-radius: 999px;
  background: rgba(238, 62, 44, 0.08);
  margin-bottom: 18px;
}

h1, h2, h3, h4, h5 { font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; line-height: 1.15; letter-spacing: -0.02em; font-weight: 700; }
.h1 { font-size: clamp(36px, 5vw, 56px); font-weight: 800; }
.h2 { font-size: clamp(28px, 3.6vw, 42px); font-weight: 700; }
.h3 { font-size: 22px; font-weight: 700; }
.h4 { font-size: 18px; font-weight: 600; }

.lead { color: var(--muted); font-size: 18px; max-width: 640px; text-wrap: pretty; }
.section-dark .lead { color: rgba(255,255,255,0.7); }

.sec-head { text-align: center; max-width: 720px; margin: 0 auto 56px; }
.sec-head .lead { margin: 14px auto 0; }
.sec-head.left { text-align: left; margin-left: 0; }
.sec-head.left .lead { margin-left: 0; }

/* ============ Buttons ============ */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 22px; border-radius: 10px;
  font-weight: 600; font-size: 15px;
  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  white-space: nowrap;
}
.btn svg { width: 16px; height: 16px; }
.wa-icon { color: currentColor; filter: brightness(0) invert(1); }
.btn .wa-icon { width: 18px; height: 18px; display: block; flex-shrink: 0; }
.btn-primary { background: var(--brand); color: #fff; box-shadow: 0 6px 14px -4px rgba(238, 62, 44, 0.4); }
.btn-primary:hover { background: #d33422; transform: translateY(-1px); box-shadow: 0 10px 18px -4px rgba(238, 62, 44, 0.5); }
.btn-secondary { background: #fff; color: var(--ink); border: 1px solid var(--line); }
.btn-secondary:hover { border-color: var(--ink-2); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: #1d2536; transform: translateY(-1px); }
.btn-wa { background: #25d366; color: #fff; box-shadow: 0 6px 14px -4px rgba(37, 211, 102, 0.4); }
.btn-wa:hover { background: #1eb058; transform: translateY(-1px); }
.btn-lg { padding: 15px 26px; font-size: 16px; }
.btn-block { width: 100%; justify-content: center; }

/* ============ Nav ============ */
.payment-pending-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10000;
  min-height: var(--payment-banner-height);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  background: #b91c1c;
  color: #fff;
  border-bottom: 4px solid #7f1d1d;
  box-shadow: 0 12px 32px rgba(127, 29, 29, 0.34);
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-size: clamp(28px, 4vw, 54px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
  text-transform: uppercase;
}

.nav {
  position: sticky; top: var(--payment-banner-height); z-index: 100;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(12px) saturate(160%); -webkit-backdrop-filter: blur(12px) saturate(160%);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 28px; max-width: 1280px; margin: 0 auto; gap: 24px;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark {
  width: 48px; height: 48px; border-radius: 12px;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 55%, var(--accent) 100%);
  color: #fff; display: grid; place-items: center;
  font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 14px; letter-spacing: 0.02em;
  box-shadow: 0 4px 10px -2px rgba(238,62,44,0.35);
}
.brand-logo-img {
  background: #fff;
  padding: 3px;
  overflow: hidden;
}
.brand-logo-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.brand-name { display: flex; flex-direction: column; line-height: 1.05; }
.brand-name strong { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 16px; letter-spacing: -0.01em; color: var(--ink); }
.brand-name span { font-size: 11px; color: var(--muted); letter-spacing: 0.12em; text-transform: uppercase; font-weight: 500; margin-top: 2px; }

.nav-links { display: flex; gap: 6px; align-items: center; }
.nav-links a {
  font-size: 14px; font-weight: 500; color: var(--ink-2);
  padding: 8px 14px; border-radius: 8px;
  transition: color 0.15s, background 0.15s;
}
.nav-links a:hover { color: var(--brand); background: rgba(238,62,44,0.06); }
.nav-links a.active { color: var(--brand); background: rgba(238,62,44,0.08); font-weight: 600; }

.nav-cta { display: flex; gap: 10px; align-items: center; }
.nav-toggle { display: none; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--line); align-items: center; justify-content: center; }

/* ============ Hero ============ */
.hero { position: relative; padding: 0; overflow: hidden; }
.hero-home {
  background:
    radial-gradient(980px 600px at 82% 8%, rgba(238,62,44,0.13), transparent 62%),
    radial-gradient(760px 520px at -12% 88%, rgba(29,126,216,0.11), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #fbf8f3 100%);
  border-bottom: 1px solid var(--line);
}
.hero-grain {
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0.34;
  background-image:
    radial-gradient(rgba(15,23,36,0.12) 1px, transparent 1px),
    radial-gradient(rgba(15,23,36,0.08) 1px, transparent 1px);
  background-size: 4px 4px, 7px 7px;
  background-position: 0 0, 2px 3px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.8), transparent 78%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.8), transparent 78%);
}
.hero-home::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image:
    linear-gradient(30deg, transparent 47.7%, rgba(29,126,216,0.11) 48.5%, rgba(29,126,216,0.11) 51.5%, transparent 52.3%),
    linear-gradient(150deg, transparent 47.7%, rgba(238,62,44,0.08) 48.5%, rgba(238,62,44,0.08) 51.5%, transparent 52.3%),
    radial-gradient(circle at 18% 20%, rgba(238,62,44,0.18) 0 3px, transparent 4px),
    radial-gradient(circle at 78% 36%, rgba(29,126,216,0.16) 0 3px, transparent 4px);
  background-size: 300px 260px, 300px 260px, 260px 260px, 340px 340px;
  background-position: -70px 18px, -70px 18px, 24px 18px, 120px 80px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.92), transparent 86%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.92), transparent 86%);
}
.hero-home::after {
  content: "";
  position: absolute;
  right: -120px;
  top: 18%;
  width: 520px;
  height: 520px;
  pointer-events: none;
  opacity: 0.18;
  background:
    radial-gradient(circle, transparent 0 44%, rgba(29,126,216,0.42) 45% 46%, transparent 47%),
    radial-gradient(circle at 50% 50%, rgba(238,62,44,0.26), transparent 62%);
  clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%);
}
.hero > .container,
.hero-home > .container { position: relative; z-index: 1; }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.94fr) minmax(460px, 1.06fr);
  gap: 76px;
  align-items: center;
  padding-top: 54px;
  padding-bottom: 74px;
  min-height: calc(100vh - 88px);
}
.hero-copy { max-width: 640px; }
.hero-meta {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 30px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.hero-meta > span {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px;
  border: 1px solid rgba(15,23,36,0.09);
  border-radius: 999px;
  background: rgba(255,255,255,0.68);
  box-shadow: var(--shadow-sm);
}
.hero-live { color: var(--ink); }
.hero-live span {
  width: 7px; height: 7px; border-radius: 999px;
  background: #25d366;
  box-shadow: 0 0 0 4px rgba(37,211,102,0.16);
  animation: heroPulse 1.8s ease-in-out infinite;
}
@keyframes heroPulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(37,211,102,0.16); }
  50% { box-shadow: 0 0 0 8px rgba(37,211,102,0.05); }
}
.hero-headline {
  margin: 0 0 26px;
  font-family: 'Sora', 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-size: clamp(42px, 4.85vw, 66px);
  line-height: 1.04;
  letter-spacing: -0.05em;
  font-weight: 800;
  text-wrap: balance;
}
.hero-headline span { display: block; }
.hero-headline em {
  font-style: normal;
  font-weight: 800;
  color: var(--brand);
  position: relative;
}
.hero-headline em::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0.07em;
  height: 0.16em;
  background: rgba(238,62,44,0.15);
  border-radius: 999px;
  z-index: -1;
}
.hero-subheadline {
  margin: -8px 0 22px;
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-size: clamp(18px, 2vw, 26px);
  line-height: 1.12;
  letter-spacing: -0.025em;
  font-weight: 700;
  color: var(--ink-2);
  text-wrap: balance;
}
.hero p.intro {
  font-size: 17.5px;
  line-height: 1.68;
  letter-spacing: -0.01em;
  color: var(--ink-2);
  max-width: 600px;
  margin-bottom: 32px;
  text-wrap: pretty;
}
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 44px; }
.hero-ctas .btn { border-radius: 999px; }
.hero-ctas .btn-wa {
  padding-left: 18px;
  padding-right: 24px;
  box-shadow: 0 18px 34px -18px rgba(37,211,102,0.78), 0 2px 0 #1eb058;
}
.hero-trust {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  max-width: 620px;
  list-style: none;
  padding: 24px 0 0;
  border-top: 1px solid rgba(15,23,36,0.18);
}
.trust-item { position: relative; padding: 0 18px 0 0; }
.trust-item + .trust-item { padding-left: 20px; }
.trust-item + .trust-item::before {
  content: "";
  position: absolute; left: 0; top: 4px; bottom: 4px;
  width: 1px; background: var(--line);
}
.trust-item .n {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
  font-size: 32px;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--ink);
}
.trust-item .l {
  font-size: 11px;
  color: var(--muted);
  margin-top: 8px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  line-height: 1.35;
}
.trust-item .n .accent { color: var(--brand); }

/* Homepage hero visual */
.hero-showcase {
  position: relative;
  min-height: 570px;
  border-radius: 30px;
}
.hero-image {
  position: absolute;
  inset: 0;
  border-radius: 30px;
  overflow: hidden;
  background: var(--bg-soft);
  border: 1px solid rgba(15,23,36,0.10);
  box-shadow: 0 36px 72px -40px rgba(15,23,36,0.58), 0 12px 28px -20px rgba(15,23,36,0.28);
}
.hero-image::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(15,23,36,0.02) 0%, rgba(15,23,36,0.05) 44%, rgba(15,23,36,0.74) 100%),
    linear-gradient(90deg, rgba(15,23,36,0.34), transparent 54%);
}
.hero-image img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.8s ease;
}
.hero-showcase:hover .hero-image img { transform: scale(1.04); }
.hero-image-caption {
  position: absolute;
  left: 36px;
  right: 36px;
  bottom: 34px;
  color: #fff;
  z-index: 1;
}
.hero-image-caption span {
  display: block;
  margin-bottom: 8px;
  color: rgba(255,255,255,0.72);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.hero-image-caption strong {
  display: block;
  max-width: 520px;
  font-family: 'Sora', 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-weight: 800;
  font-size: clamp(24px, 2.45vw, 34px);
  line-height: 1.16;
  letter-spacing: -0.045em;
}
.hero-ticker {
  position: relative;
  z-index: 2;
  height: 48px;
  display: flex; align-items: center;
  overflow: hidden;
  background: var(--ink);
  color: #fff;
}
.ticker-track {
  display: flex; align-items: center;
  white-space: nowrap;
  animation: tickerScroll 48s linear infinite;
}
@keyframes tickerScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.tk-item {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 0 28px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.78);
  position: relative;
}
.tk-item strong { color: #fff; }
.tk-item:not(:first-child)::before {
  content: "";
  position: absolute; left: 0;
  width: 4px; height: 4px; border-radius: 999px;
  background: rgba(255,255,255,0.28);
}
.tk-dot {
  width: 7px; height: 7px; border-radius: 999px;
  background: rgba(255,255,255,0.45);
}
.tk-dot.live {
  background: #25d366;
  box-shadow: 0 0 0 4px rgba(37,211,102,0.2);
  animation: heroPulse 1.8s ease-in-out infinite;
}
/* Legacy hero photo collage */
.hero-photo {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: visible;
  aspect-ratio: 4/5;
}
.hero-photo .main {
  position: absolute; inset: 0;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
  background: #f0f0f0;
}
.hero-photo .main img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.8s ease;
}
.hero-photo:hover .main img { transform: scale(1.04); }
.hero-photo .badge-card {
  position: absolute;
  background: #fff;
  border-radius: 16px;
  padding: 14px 18px;
  box-shadow: var(--shadow-lg);
  display: flex; align-items: center; gap: 12px;
}
.hero-photo .badge-card.top-l { top: 30px; left: -22px; }
.hero-photo .badge-card.bottom-r { bottom: 30px; right: -22px; }
.hero-photo .badge-card .ic {
  width: 38px; height: 38px; border-radius: 10px;
  display: grid; place-items: center; flex-shrink: 0;
  background: rgba(22,163,74,0.12); color: var(--success);
}
.hero-photo .badge-card .ic.b { background: rgba(245,158,11,0.12); color: var(--warn); }
.hero-photo .badge-card .ic svg { width: 18px; height: 18px; }
.hero-photo .badge-card .t { font-size: 13px; font-weight: 700; color: var(--ink); line-height: 1.2; }
.hero-photo .badge-card .s { font-size: 11px; color: var(--muted); margin-top: 2px; }

/* Compact hero for inner pages */
.hero-compact {
  padding: 56px 0 68px;
  background:
    radial-gradient(760px 420px at 90% 0%, rgba(238,62,44,0.07), transparent 60%),
    radial-gradient(600px 380px at -8% 100%, rgba(29,126,216,0.07), transparent 56%),
    linear-gradient(180deg, #ffffff 0%, #fafbfc 100%);
  border-bottom: 1px solid var(--line);
}
.hero-compact h1 { font-size: clamp(32px, 4.4vw, 48px); margin-bottom: 16px; text-wrap: balance; }
.hero-compact .lead { margin-bottom: 0; }
.hero-compact .breadcrumb {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--muted); margin-bottom: 18px;
}
.hero-compact .breadcrumb a:hover { color: var(--brand); }
.hero-compact .breadcrumb svg { width: 12px; height: 12px; }
.hero-compact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr);
  gap: 48px;
  align-items: center;
}
.hero-visual {
  justify-self: end;
  width: min(100%, 380px);
}
.hero-visual img {
  width: 100%;
  height: auto;
}
.hero-visual-portrait {
  width: min(100%, 360px);
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: var(--bg-soft);
}
.hero-visual-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
.hero-visual-illustration {
  display: grid;
  place-items: center;
}

/* ============ Trust strip ============ */
.trust-strip {
  padding: 28px 0;
  background: var(--bg-soft);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.trust-strip-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.trust-strip .label { font-size: 13px; font-weight: 600; color: var(--muted); letter-spacing: 0.1em; text-transform: uppercase; }
.trust-pills { display: flex; gap: 12px; flex-wrap: wrap; }
.trust-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 999px;
  background: #fff; border: 1px solid var(--line);
  font-size: 13px; font-weight: 500; color: var(--ink-2);
}
.trust-pill svg { width: 14px; height: 14px; color: var(--brand); }

/* ============ Services grid (cards w/ images) ============ */
.svc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.svc-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
  display: flex; flex-direction: column;
}
.svc-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: transparent; }
.svc-card .img {
  aspect-ratio: 16/9;
  background: var(--bg-soft);
  overflow: hidden;
  position: relative;
}
.svc-card .img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.6s ease;
}
.svc-card:hover .img img { transform: scale(1.05); }
.svc-card .img::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(15,23,36,0.45) 100%);
}
.svc-card .num {
  position: absolute; top: 16px; right: 16px;
  background: rgba(255,255,255,0.92); backdrop-filter: blur(6px);
  font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 13px; color: var(--ink);
  padding: 6px 10px; border-radius: 8px;
  z-index: 1;
}
.svc-card .body { padding: 26px 28px 28px; flex: 1; display: flex; flex-direction: column; }
.svc-ic { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 16px; }
.svc-ic svg { width: 22px; height: 22px; }
.svc-card.c1 .svc-ic { background: rgba(238,62,44,0.1); color: var(--brand); }
.svc-card.c2 .svc-ic { background: rgba(29,126,216,0.1); color: var(--accent); }
.svc-card.c3 .svc-ic { background: rgba(168,85,247,0.1); color: #a855f7; }
.svc-card.c4 .svc-ic { background: rgba(22,163,74,0.1); color: var(--success); }
.svc-card.c5 .svc-ic { background: rgba(14,165,233,0.1); color: #0ea5e9; }
.svc-card.c6 .svc-ic { background: rgba(234,88,12,0.1); color: #ea580c; }
.svc-card h3 { margin-bottom: 10px; }
.svc-card p { color: var(--muted); font-size: 15px; margin-bottom: 18px; }
.svc-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.svc-tags span {
  font-size: 13px; padding: 5px 12px; border-radius: 999px;
  background: var(--bg-soft); color: var(--ink-2); border: 1px solid var(--line);
}
.svc-card .link {
  margin-top: auto;
  font-size: 14px; font-weight: 600; color: var(--brand);
  display: inline-flex; align-items: center; gap: 6px;
  transition: gap 0.2s;
}
.svc-card .link svg { width: 14px; height: 14px; }
.svc-card:hover .link { gap: 10px; }

/* ============ Audience ============ */
.audience-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.audience-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  min-height: 260px;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.audience-card:hover { transform: translateY(-4px); border-color: var(--brand); box-shadow: var(--shadow-md); }
.audience-ic {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  margin-bottom: 22px;
  color: var(--brand);
  background: linear-gradient(135deg, rgba(238,62,44,0.1), rgba(29,126,216,0.1));
}
.audience-ic svg { width: 25px; height: 25px; }
.audience-card h3 { margin-bottom: 12px; font-size: 21px; }
.audience-card p { color: var(--muted); font-size: 15px; line-height: 1.65; text-wrap: pretty; }

/* ============================================================
   SERVICES PAGE — Redesign
   ============================================================ */

/* Hero quick-jump pills */
.svc-hero-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.svc-hero-pill {
  padding: 7px 16px; border-radius: 999px;
  font-size: 13px; font-weight: 600; color: var(--ink-2);
  background: #fff; border: 1px solid var(--line);
  text-decoration: none;
  transition: border-color 0.18s, color 0.18s, background 0.18s;
}
.svc-hero-pill:hover { background: var(--brand); color: #fff; border-color: var(--brand); }

/* Sticky service navigation */
.svc-nav-strip {
  position: sticky; top: calc(var(--payment-banner-height) + 76px); z-index: 30;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 2px 16px rgba(0,0,0,0.06);
}
.svc-nav-inner {
  display: flex; overflow-x: auto; scrollbar-width: none;
}
.svc-nav-inner::-webkit-scrollbar { display: none; }
.svc-nav-item {
  display: flex; align-items: center; gap: 7px;
  padding: 14px 22px;
  font-size: 13px; font-weight: 600; color: var(--muted);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  text-decoration: none;
  transition: color 0.18s, border-color 0.18s, background 0.18s;
}
.svc-nav-item:hover { color: var(--brand); border-bottom-color: rgba(238,62,44,0.3); background: rgba(238,62,44,0.03); }
.svc-nav-item.active { color: var(--brand); border-bottom-color: var(--brand); }
.svc-nav-num {
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
  background: var(--bg-soft); border-radius: 6px;
  padding: 2px 6px; color: var(--muted);
}

/* Individual service sections */
.svc-section { padding: 80px 0; border-bottom: 1px solid var(--line); scroll-margin-top: calc(var(--payment-banner-height) + 130px); }
.svc-section:last-of-type { border-bottom: none; }
.svc-section-soft,
.svc-section.svc-section-soft { background: var(--bg-soft); }

/* Service eyebrow colours */
.svc-eyebrow { }
.svc-eyebrow.c1 { background: rgba(238,62,44,0.08); color: var(--brand); }
.svc-eyebrow.c2 { background: rgba(29,126,216,0.08); color: var(--accent); }
.svc-eyebrow.c3 { background: rgba(168,85,247,0.08); color: #a855f7; }
.svc-eyebrow.c4 { background: rgba(22,163,74,0.08); color: var(--success); }
.svc-eyebrow.c5 { background: rgba(245,158,11,0.08); color: #d97706; }
.svc-eyebrow.c6 { background: rgba(14,165,233,0.08); color: #0ea5e9; }

/* Per-section feat-box icon color tinting */
#editing .svc-feat-box > svg,
#editing .feat-ic { background: rgba(238,62,44,0.08); color: var(--brand); }
#presentation .svc-feat-box > svg,
#presentation .feat-ic { background: rgba(29,126,216,0.08); color: var(--accent); }
#typing .svc-feat-box > svg,
#typing .feat-ic { background: rgba(168,85,247,0.08); color: #a855f7; }
#writing .svc-feat-box > svg,
#writing .feat-ic { background: rgba(22,163,74,0.08); color: var(--success); }
#growth .svc-feat-box > svg,
#growth .feat-ic { background: rgba(245,158,11,0.08); color: #d97706; }
#website .svc-feat-box > svg,
#website .feat-ic { background: rgba(14,165,233,0.08); color: #0ea5e9; }

/* Intro: image + text two-col */
.svc-intro {
  display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: flex-start;
  margin-bottom: 48px;
}
.svc-intro.reverse > .svc-intro-img { order: 2; }
.svc-intro.reverse > .svc-intro-text { order: 1; }
.svc-intro-img {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  aspect-ratio: 5/4; box-shadow: var(--shadow-lg);
}
.svc-intro-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.svc-intro-img:hover img { transform: scale(1.04); }
.svc-intro-img .chip {
  position: absolute; bottom: 18px; left: 18px;
  background: rgba(255,255,255,0.95); backdrop-filter: blur(8px);
  padding: 8px 14px; border-radius: 999px;
  font-size: 12px; font-weight: 700; color: var(--ink);
  letter-spacing: 0.04em; text-transform: uppercase; box-shadow: var(--shadow-sm);
}
.svc-intro-text .h2 { margin-bottom: 12px; }
.svc-intro-text > p { color: var(--muted); font-size: 16px; line-height: 1.7; margin-bottom: 24px; }

/* 2×2 feature boxes */
.svc-feat-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 28px; }
.svc-feat-box {
  display: flex; gap: 12px; align-items: flex-start;
  background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px;
  transition: border-color 0.18s, box-shadow 0.18s;
}
.svc-feat-box:hover { border-color: rgba(238,62,44,0.25); box-shadow: var(--shadow-sm); }
.svc-feat-box .feat-ic {
  width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
  display: grid; place-items: center;
  background: rgba(238,62,44,0.08); color: var(--brand);
}
.svc-feat-box .feat-ic svg { width: 17px; height: 17px; }
/* Legacy: direct svg child — rendered as icon container using padding */
.svc-feat-box > svg {
  width: 36px; height: 36px; box-sizing: border-box; padding: 9px;
  color: var(--brand); flex-shrink: 0;
  background: rgba(238,62,44,0.08); border-radius: 10px;
}
.svc-feat-box > div { display: flex; flex-direction: column; gap: 3px; }
.svc-feat-box strong { font-size: 13px; font-weight: 700; color: var(--ink); }
.svc-feat-box span { font-size: 12px; color: var(--muted); line-height: 1.5; }

/* Starting price + CTA row */
.svc-quote-cta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 4px; }
.svc-from-price { font-size: 14px; color: var(--muted); }
.svc-from-price strong { color: var(--ink); font-size: 22px; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; }

/* Image tools tag cloud (service 07) */
.svc-tools-tags {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 20px 0 4px;
}
.svc-tools-tags span {
  display: inline-block;
  padding: 5px 13px;
  background: #f3f4f8;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12px; font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.01em;
  transition: background 0.18s, border-color 0.18s, color 0.18s;
}
.svc-tools-tags span:hover {
  background: color-mix(in srgb, var(--brand) 8%, #fff);
  border-color: var(--brand);
  color: var(--brand);
}
.svc-tools-tag-more {
  display: inline-flex; align-items: center;
  padding: 5px 13px;
  background: var(--brand);
  border-radius: 999px;
  font-size: 12px; font-weight: 700;
  color: #fff; text-decoration: none;
  letter-spacing: 0.01em;
  transition: opacity 0.18s, transform 0.18s;
}
.svc-tools-tag-more:hover { opacity: 0.88; transform: translateX(2px); }

/* Package section heading */
.svc-pkgs {
  background: #fff; border-radius: 20px; padding: 36px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.svc-section-soft .svc-pkgs { background: #fff; }
.svc-pkgs-head { margin-bottom: 28px; }
.svc-pkgs-head .h3 { margin-bottom: 8px; }
.svc-pkgs-head p { color: var(--muted); font-size: 15px; }

/* Package cards grid */
.svc-pkg-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding-top: 18px; }
.svc-pkg-card {
  background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 24px;
  position: relative; display: flex; flex-direction: column; gap: 16px;
  transition: transform 0.22s, box-shadow 0.22s, border-color 0.22s;
}
.svc-pkg-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.svc-pkg-card.pkg-normal { border-top: 3px solid #9ca3af; }
.svc-pkg-card.pkg-pro { border-top: 3px solid var(--brand); box-shadow: 0 16px 40px -12px rgba(238,62,44,0.18); border-color: rgba(238,62,44,0.2); }
.svc-pkg-card.pkg-pro:hover { box-shadow: 0 24px 52px -12px rgba(238,62,44,0.28); }
.svc-pkg-card.pkg-advanced { border-top: 3px solid #7c3aed; }
.svc-pkg-popular {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--brand); color: #fff;
  padding: 4px 14px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  box-shadow: 0 4px 12px -2px rgba(238,62,44,0.4);
}
.svc-pkg-header { display: flex; flex-direction: column; gap: 8px; }
.svc-pkg-level { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.svc-pkg-price-row { display: flex; align-items: baseline; gap: 2px; }
.svc-pkg-cur { font-size: 20px; font-weight: 700; color: var(--ink-2); }
.svc-pkg-price { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 42px; font-weight: 800; color: var(--ink); line-height: 1; letter-spacing: -0.02em; }
.svc-pkg-desc { font-size: 13px; color: var(--muted); line-height: 1.5; }
.svc-pkg-list {
  list-style: none; display: flex; flex-direction: column; gap: 9px;
  padding: 16px 0; border-top: 1px solid var(--line); margin: 0;
}
.svc-pkg-list li { display: flex; gap: 9px; align-items: flex-start; font-size: 13px; color: var(--ink-2); }
.pkg-check { width: 16px; height: 16px; color: var(--success); flex-shrink: 0; margin-top: 1px; }
.svc-pkg-note {
  font-size: 12px; color: var(--muted); line-height: 1.55;
  padding: 10px 12px; background: var(--bg-soft); border-radius: 8px;
  border-left: 3px solid var(--line); margin-top: auto;
}
.svc-pkg-card.pkg-pro .svc-pkg-note { border-left-color: var(--brand); background: rgba(238,62,44,0.04); }
.svc-pkg-card.pkg-advanced .svc-pkg-note { border-left-color: #7c3aed; background: rgba(124,58,237,0.04); }

/* ============================================================
   PRICING PAGE — Redesign
   ============================================================ */

/* Full-width package grid (pricing page) */
.pricing-pkg-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px;
  align-items: stretch;
  padding-top: 20px;
}
/* Pricing page sections — clear scroll offset for anchored nav */
#editing-pricing, #presentation-pricing, #growth-pricing, #other-pricing {
  scroll-margin-top: 90px;
}
.pricing-pkg-card {
  background: #fff; border: 1px solid var(--line); border-radius: 22px;
  padding: 32px; display: flex; flex-direction: column; gap: 18px;
  position: relative;
  transition: transform 0.22s, box-shadow 0.22s, border-color 0.22s;
}
.pricing-pkg-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.pricing-pkg-card.pkg-normal { border-top: 4px solid #9ca3af; }
.pricing-pkg-card.pkg-pro   { border-top: 4px solid var(--brand); box-shadow: 0 16px 44px -12px rgba(238,62,44,0.22); border-color: rgba(238,62,44,0.18); }
.pricing-pkg-card.pkg-pro:hover { box-shadow: 0 28px 56px -12px rgba(238,62,44,0.32); }
.pricing-pkg-card.pkg-advanced { border-top: 4px solid #7c3aed; }
.pricing-pkg-popular-badge {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--brand); color: #fff;
  padding: 5px 16px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  box-shadow: 0 6px 14px -4px rgba(238,62,44,0.4);
  white-space: nowrap;
}
.pricing-pkg-header { display: flex; flex-direction: column; gap: 10px; }
.pricing-pkg-icon {
  width: 52px; height: 52px; border-radius: 14px;
  display: grid; place-items: center;
  background: var(--bg-soft); color: var(--muted);
}
.pricing-pkg-icon.pro { background: rgba(238,62,44,0.1); color: var(--brand); }
.pricing-pkg-icon.adv { background: rgba(124,58,237,0.1); color: #7c3aed; }
.pricing-pkg-icon svg { width: 24px; height: 24px; }
.pricing-pkg-tier { font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.pricing-pkg-price-row { display: flex; align-items: baseline; gap: 2px; }
.pricing-pkg-cur { font-size: 22px; font-weight: 700; color: var(--ink-2); }
.pricing-pkg-amount { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 52px; font-weight: 800; color: var(--ink); line-height: 1; letter-spacing: -0.03em; }
.pricing-pkg-tagline { font-size: 14px; color: var(--muted); line-height: 1.5; }
.pricing-pkg-list {
  list-style: none; display: flex; flex-direction: column; gap: 10px;
  padding: 18px 0; border-top: 1px solid var(--line); margin: 0; flex: 1;
}
.pricing-pkg-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--ink-2); }
.pricing-pkg-note {
  font-size: 13px; color: var(--muted); line-height: 1.55;
  padding: 12px 14px; background: var(--bg-soft); border-radius: 10px;
  border-left: 3px solid var(--line);
}
.pricing-pkg-card.pkg-pro .pricing-pkg-note { border-left-color: var(--brand); }
.pricing-pkg-card.pkg-advanced .pricing-pkg-note { border-left-color: #7c3aed; }

/* Other services grid */
.other-pricing-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.other-pricing-card {
  background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 28px;
  display: flex; flex-direction: column; gap: 12px;
  transition: transform 0.22s, box-shadow 0.22s, border-color 0.22s;
}
.other-pricing-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: rgba(238,62,44,0.2); }
.other-pricing-icon {
  width: 52px; height: 52px; border-radius: 14px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, rgba(238,62,44,0.1), rgba(29,126,216,0.08));
  color: var(--brand);
}
.other-pricing-icon svg { width: 24px; height: 24px; }
.other-pricing-label { font-size: 17px; font-weight: 700; color: var(--ink); margin-top: 4px; }
.other-pricing-amount { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 34px; font-weight: 800; color: var(--ink); line-height: 1; letter-spacing: -0.02em; }
.other-pricing-per { font-size: 13px; color: var(--muted); }
.other-pricing-points { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 7px; border-top: 1px solid var(--line); padding-top: 14px; }
.other-pricing-points li { font-size: 13px; color: var(--ink-2); padding-left: 18px; position: relative; line-height: 1.5; }
.other-pricing-points li::before { content: '✓'; position: absolute; left: 0; color: var(--success); font-weight: 700; font-size: 11px; top: 2px; }

/* Talk card (pricing page) */
.talk-card {
  display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center;
  background: linear-gradient(135deg, var(--bg-dark) 0%, #1d2a40 100%);
  color: #fff; border-radius: var(--radius-xl); padding: 48px 56px;
  position: relative; overflow: hidden;
}
.talk-card::before {
  content: ""; position: absolute; top: -60px; right: -60px;
  width: 300px; height: 300px; border-radius: 50%;
  background: radial-gradient(circle, rgba(238,62,44,0.18), transparent 65%);
  pointer-events: none;
}
.talk-card .eyebrow { background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.75); margin-bottom: 14px; }
.talk-card .h3 { color: #fff; margin-bottom: 12px; font-size: 26px; }
.talk-card p { color: rgba(255,255,255,0.65); font-size: 15px; line-height: 1.7; max-width: 520px; }
.talk-card-right { display: flex; flex-direction: column; gap: 12px; min-width: 230px; position: relative; z-index: 1; }

/* Service detail (services.html long form) — keep for backwards compat */
.svc-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; padding: 64px 0; border-bottom: 1px solid var(--line); }
.svc-detail:last-child { border-bottom: none; }
.svc-detail.reverse > :first-child { order: 2; }
.svc-detail .text .eyebrow { background: rgba(29,126,216,0.08); color: var(--accent); }
.svc-detail.c1 .text .eyebrow { background: rgba(238,62,44,0.08); color: var(--brand); }
.svc-detail.c3 .text .eyebrow { background: rgba(168,85,247,0.08); color: #a855f7; }
.svc-detail.c4 .text .eyebrow { background: rgba(22,163,74,0.08); color: var(--success); }
.svc-detail.c5 .text .eyebrow { background: rgba(14,165,233,0.08); color: #0ea5e9; }
.svc-detail h2 { margin-bottom: 14px; }
.svc-detail .text p { color: var(--muted); font-size: 17px; margin-bottom: 22px; max-width: 480px; }
.svc-detail .feat-list { list-style: none; display: flex; flex-direction: column; gap: 12px; margin-bottom: 28px; }
.svc-detail .feat-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; color: var(--ink-2); }
.svc-detail .feat-list svg { width: 20px; height: 20px; color: var(--success); flex-shrink: 0; margin-top: 1px; }
.svc-detail .photo {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 5/4;
  box-shadow: var(--shadow-lg);
}
.svc-detail .photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.svc-detail .photo:hover img { transform: scale(1.04); }
.svc-detail .photo .chip {
  position: absolute; bottom: 18px; left: 18px;
  background: rgba(255,255,255,0.95); backdrop-filter: blur(8px);
  padding: 8px 14px; border-radius: 999px;
  font-size: 12px; font-weight: 700; color: var(--ink);
  letter-spacing: 0.04em; text-transform: uppercase;
  box-shadow: var(--shadow-sm);
}

.service-packages {
  margin: 26px 0 16px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(180deg, #fff 0%, var(--bg-soft) 100%);
}
.service-packages-head {
  margin-bottom: 16px;
}
.service-packages-head .h3 {
  margin-bottom: 6px;
}
.service-packages-head p {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}
.service-packages-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.service-package-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.service-package-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.service-package-card.normal { border-top: 3px solid #6b7280; }
.service-package-card.pro { border-top: 3px solid var(--brand); }
.service-package-card.advanced { border-top: 3px solid #7c3aed; }
.service-package-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}
.service-package-tag {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.service-package-price {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 24px;
  font-weight: 800;
  line-height: 1;
  color: var(--ink);
}
.service-package-list {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}
.service-package-diff {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}
.service-package-diff strong {
  color: var(--ink);
}

/* ============ Why ============ */
.why-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.why-card {
  text-align: center;
  padding: 28px 20px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.why-card:hover { transform: translateY(-4px); border-color: var(--brand); box-shadow: var(--shadow-md); }
.why-ic {
  width: 52px; height: 52px; border-radius: 14px;
  display: grid; place-items: center; margin: 0 auto 16px;
  background: linear-gradient(135deg, rgba(238,62,44,0.1), rgba(29,126,216,0.1));
  color: var(--brand);
}
.why-ic svg { width: 24px; height: 24px; }
.why-card h4 { margin-bottom: 8px; font-size: 16px; }
.why-card p { font-size: 14px; color: var(--muted); line-height: 1.5; }

/* ============ Pricing ============ */
.tabs {
  display: inline-flex; gap: 4px;
  background: var(--bg-soft); border: 1px solid var(--line);
  padding: 4px; border-radius: 12px; margin: 0 auto 40px;
}
.tabs-wrap { display: flex; justify-content: center; }
.tab {
  padding: 10px 20px; border-radius: 9px;
  font-size: 14px; font-weight: 600; color: var(--muted);
  display: inline-flex; align-items: center; gap: 8px;
  transition: all 0.15s;
}
.tab svg { width: 16px; height: 16px; }
.tab:hover { color: var(--ink); }
.tab.active { background: #fff; color: var(--ink); box-shadow: var(--shadow-sm); }

.price-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 20px; }
.price-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px 28px;
  position: relative;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.price-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.price-card.popular { border-color: var(--brand); box-shadow: 0 20px 40px -16px rgba(238,62,44,0.2); }
.price-card.popular .pop-badge {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--brand); color: #fff;
  padding: 5px 14px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  box-shadow: 0 6px 14px -4px rgba(238,62,44,0.4);
}
.price-card .tier { font-size: 13px; font-weight: 600; color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; }
.price-card .price-row { display: flex; align-items: baseline; gap: 6px; margin: 12px 0 4px; }
.price-card .cur { font-size: 22px; font-weight: 600; color: var(--ink-2); }
.price-card .price { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 44px; color: var(--ink); line-height: 1; letter-spacing: -0.02em; }
.price-card .per { font-size: 14px; color: var(--muted); margin-bottom: 24px; }
.price-card ul { list-style: none; display: flex; flex-direction: column; gap: 12px; margin: 24px 0; padding: 24px 0; border-top: 1px solid var(--line); }
.price-card ul li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--ink-2); }
.price-card ul li svg { width: 18px; height: 18px; color: var(--success); flex-shrink: 0; margin-top: 1px; }

.single-services {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px;
  margin-top: 32px;
}
.single-services h4 { margin-bottom: 8px; }
.single-services .desc { color: var(--muted); font-size: 14px; margin-bottom: 24px; }
.ss-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.ss-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 16px;
  background: var(--bg-soft);
  border-radius: 10px;
  border: 1px solid transparent;
  transition: border-color 0.15s, background 0.15s;
}
.ss-item:hover { border-color: var(--brand); background: #fff; }
.ss-name { font-size: 14px; color: var(--ink-2); font-weight: 500; }
.ss-price { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 15px; color: var(--brand); }

/* ============ Process ============ */
.process { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; position: relative; }
.process::before {
  content: ""; position: absolute; top: 30px; left: 10%; right: 10%; height: 2px;
  background: repeating-linear-gradient(90deg, var(--line) 0 6px, transparent 6px 12px);
}
.proc-step { text-align: center; position: relative; z-index: 1; }
.proc-num {
  width: 60px; height: 60px; border-radius: 50%;
  background: #fff; border: 2px solid var(--line);
  color: var(--brand);
  display: grid; place-items: center; margin: 0 auto 16px;
  font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 18px;
  transition: all 0.2s;
}
.proc-step:hover .proc-num { border-color: var(--brand); background: var(--brand); color: #fff; transform: scale(1.05); }
.proc-step h4 { font-size: 16px; margin-bottom: 6px; }
.proc-step p { font-size: 14px; color: var(--muted); }
.home-process { grid-template-columns: repeat(4, 1fr); max-width: 980px; margin: 0 auto; }
.home-process::before { left: 13%; right: 13%; }

/* ============ Portfolio (legacy) ============ */
.portfolio-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.portfolio-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: inherit;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.portfolio-card:hover { transform: translateY(-4px); border-color: var(--brand); box-shadow: var(--shadow-md); }
.portfolio-img { aspect-ratio: 4 / 3; overflow: hidden; background: var(--bg-soft); }
.portfolio-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.55s ease; }
.portfolio-card:hover .portfolio-img img { transform: scale(1.04); }
.portfolio-body { padding: 24px; }
.portfolio-body span {
  display: inline-block;
  margin-bottom: 10px;
  color: var(--brand);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.portfolio-body h3 { font-size: 19px; margin-bottom: 10px; letter-spacing: -0.01em; }
.portfolio-body p { color: var(--muted); font-size: 14px; line-height: 1.6; text-wrap: pretty; }

/* ============ Work Samples — Proof Section ============ */
.ws-section {
  background: linear-gradient(180deg, var(--bg-cream) 0%, #fff 100%);
  position: relative;
  overflow: hidden;
}
.ws-section::before {
  content: "";
  position: absolute;
  top: -180px; right: -120px;
  width: 600px; height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(238,62,44,0.05) 0%, transparent 70%);
  pointer-events: none;
}
.ws-section::after {
  content: "";
  position: absolute;
  bottom: -100px; left: -80px;
  width: 400px; height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(29,126,216,0.05) 0%, transparent 70%);
  pointer-events: none;
}

/* Header split */
.ws-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}
.ws-header-text { flex: 1; min-width: 280px; }
.ws-header-text .eyebrow { margin-bottom: 14px; }
.ws-header-text .h2 { margin-bottom: 12px; }
.ws-header-text .lead { margin: 0; font-size: 17px; }

.ws-header-stats {
  display: flex;
  align-items: center;
  gap: 24px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 20px 28px;
  box-shadow: var(--shadow-md);
  flex-shrink: 0;
}
.ws-stat { text-align: center; }
.ws-stat-n {
  display: block;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
  font-size: 28px;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1;
}
.ws-stat-n.accent { color: var(--brand); }
.ws-stat-l {
  display: block;
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
  margin-top: 4px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.ws-stat-div {
  width: 1px;
  height: 36px;
  background: var(--line);
}

/* Filter tabs */
.ws-filter-wrap {
  margin-bottom: 36px;
}
.ws-filters {
  display: inline-flex;
  gap: 6px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 5px;
  box-shadow: var(--shadow-sm);
  flex-wrap: wrap;
}
.ws-filter {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  transition: all 0.2s ease;
  white-space: nowrap;
}
.ws-filter svg { width: 15px; height: 15px; flex-shrink: 0; }
.ws-filter:hover { color: var(--ink); background: var(--bg-soft); }
.ws-filter.active {
  background: var(--ink);
  color: #fff;
  box-shadow: 0 4px 12px -4px rgba(15,23,36,0.3);
}

/* Grid */
.ws-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 44px;
}
.ws-item {
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.ws-item.hidden {
  display: none;
}
.ws-item.fading {
  opacity: 0;
  transform: scale(0.96);
}

/* Card */
.ws-card {
  width: 100%;
  text-align: left;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  cursor: pointer;
}
.ws-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: transparent;
}

/* Image area */
.ws-card-img {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--bg-soft);
}
.ws-card-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.55s ease;
}
.ws-card:hover .ws-card-img img { transform: scale(1.05); }

/* Hover overlay */
.ws-card-overlay {
  position: absolute; inset: 0;
  background: rgba(15,23,36,0.5);
  display: grid; place-items: center;
  opacity: 0;
  transition: opacity 0.25s ease;
  backdrop-filter: blur(2px);
}
.ws-card:hover .ws-card-overlay { opacity: 1; }
.ws-overlay-zoom {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
  border: 2px solid rgba(255,255,255,0.6);
  display: grid; place-items: center;
  color: #fff;
  transform: scale(0.7);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.ws-card:hover .ws-overlay-zoom { transform: scale(1); }
.ws-overlay-zoom svg { width: 22px; height: 22px; }

/* Card body */
.ws-card-body {
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.ws-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.ws-badge {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
}
.ws-badge-editing   { background: rgba(238,62,44,0.1); color: var(--brand); }
.ws-badge-presentations { background: rgba(29,126,216,0.1); color: var(--accent); }
.ws-badge-documents { background: rgba(168,85,247,0.1); color: #a855f7; }
.ws-badge-growth    { background: rgba(22,163,74,0.1); color: var(--success); }

.ws-tool {
  font-size: 11px;
  color: var(--muted-2);
  font-weight: 500;
  letter-spacing: 0.04em;
}
.ws-card-body h3 {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
  line-height: 1.3;
  color: var(--ink);
}
.ws-card-body p {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
  margin-bottom: 16px;
  flex: 1;
  text-wrap: pretty;
}
.ws-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--line-2);
  margin-top: auto;
}
.ws-client {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
}
.ws-client svg { width: 13px; height: 13px; flex-shrink: 0; }
.ws-expand-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 700;
  color: var(--brand);
  transition: gap 0.2s;
}
.ws-expand-link svg { width: 12px; height: 12px; }
.ws-card:hover .ws-expand-link { gap: 7px; }

/* Bottom CTA bar */
.ws-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 22px 28px;
  box-shadow: var(--shadow-sm);
}
.ws-bottom-left p {
  font-size: 15px;
  color: var(--muted);
  font-weight: 500;
  margin: 0;
}
.ws-bottom-right {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* ============ LIGHTBOX ============ */
.ws-lightbox {
  position: fixed; inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.ws-lightbox[hidden] { display: none; }

.ws-lb-backdrop {
  position: absolute; inset: 0;
  background: rgba(10,16,32,0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
}

.ws-lb-panel {
  position: relative;
  z-index: 1;
  background: #fff;
  border-radius: 24px;
  overflow: hidden;
  width: 100%;
  max-width: 980px;
  max-height: 90vh;
  box-shadow: 0 60px 120px -20px rgba(10,16,32,0.5);
  animation: wsLbIn 0.35s cubic-bezier(0.34, 1.46, 0.64, 1);
}
@keyframes wsLbIn {
  from { opacity: 0; transform: scale(0.9) translateY(20px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.ws-lb-close {
  position: absolute;
  top: 16px; right: 16px;
  z-index: 10;
  width: 40px; height: 40px;
  border-radius: 10px;
  background: rgba(15,23,36,0.08);
  border: 1px solid rgba(15,23,36,0.08);
  color: var(--ink);
  display: grid; place-items: center;
  transition: background 0.15s, transform 0.15s;
}
.ws-lb-close:hover { background: rgba(238,62,44,0.1); color: var(--brand); transform: rotate(90deg); }
.ws-lb-close svg { width: 18px; height: 18px; }

.ws-lb-inner {
  display: grid;
  grid-template-columns: 1fr 340px;
  max-height: 90vh;
  overflow: hidden;
}

.ws-lb-image-wrap {
  background: var(--bg-dark);
  overflow: hidden;
  max-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ws-lb-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  max-height: 90vh;
}

.ws-lb-info {
  padding: 36px 32px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-height: 90vh;
}
.ws-lb-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(238,62,44,0.1);
  color: var(--brand);
}
.ws-lb-info h3 {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--ink);
  margin: 0;
}
.ws-lb-info p {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.7;
  text-wrap: pretty;
  margin: 0;
}
.ws-lb-meta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  background: var(--bg-soft);
  border-radius: 12px;
  border: 1px solid var(--line);
}
.ws-lb-meta-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--ink-2);
  font-weight: 500;
}
.ws-lb-meta-item svg {
  width: 16px; height: 16px;
  color: var(--brand);
  flex-shrink: 0;
}
.ws-lb-cta {
  margin-top: auto;
  font-size: 15px;
}
.ws-lb-cta svg { width: 18px; height: 18px; }

/* Lightbox nav arrows */
.ws-lb-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 44px; height: 44px;
  border-radius: 12px;
  background: rgba(255,255,255,0.92);
  border: 1px solid var(--line);
  color: var(--ink);
  display: grid; place-items: center;
  box-shadow: var(--shadow-md);
  transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
}
.ws-lb-nav:hover { background: #fff; box-shadow: var(--shadow-lg); transform: translateY(-50%) scale(1.06); }
.ws-lb-nav svg { width: 20px; height: 20px; }
.ws-lb-prev { left: 14px; }
.ws-lb-next { right: 14px; }


/* ============ Testimonials ============ */
.testi-slider { position: relative; }
.testi-grid {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding: 4px 2px 16px;
}
.testi-grid::-webkit-scrollbar { display: none; }
.testi {
  flex: 0 0 calc((100% - 40px) / 3);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  scroll-snap-align: start;
  transition: transform 0.2s, box-shadow 0.2s;
}
.testi:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.testi .stars { display: flex; gap: 2px; color: #f59e0b; margin-bottom: 16px; }
.testi .stars svg { width: 16px; height: 16px; }
.testi p { font-size: 15px; color: var(--ink-2); margin-bottom: 20px; line-height: 1.6; text-wrap: pretty; }
.testi .who { display: flex; align-items: center; gap: 12px; padding-top: 18px; border-top: 1px solid var(--line); }
.testi .av { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; overflow: hidden; }
.testi .av img { width: 100%; height: 100%; object-fit: cover; }
.testi .nm { font-weight: 600; font-size: 14px; }
.testi .rl { font-size: 13px; color: var(--muted); }
.testi-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 18px;
}
.testi-arrow {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.testi-arrow:hover { transform: translateY(-1px); border-color: var(--brand); box-shadow: var(--shadow-md); }
.testi-arrow:disabled { opacity: 0.45; cursor: default; transform: none; box-shadow: var(--shadow-sm); }
.testi-arrow svg { width: 18px; height: 18px; }
.testi-dots { display: flex; align-items: center; gap: 8px; }
.testi-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--line);
  transition: width 0.2s, background 0.2s;
}
.testi-dot.active { width: 24px; background: var(--brand); }

/* ============ FAQ ============ */
.faq-list { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.faq-item {
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  overflow: hidden; transition: border-color 0.15s, box-shadow 0.15s;
}
.faq-item:hover { border-color: var(--ink-2); }
.faq-item.open { border-color: var(--brand); box-shadow: var(--shadow-sm); }
.faq-q { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 20px 24px; cursor: pointer; }
.faq-q span { font-weight: 600; font-size: 16px; }
.faq-q .plus { width: 28px; height: 28px; border-radius: 8px; background: var(--bg-soft); display: grid; place-items: center; color: var(--ink-2); flex-shrink: 0; transition: transform 0.25s, background 0.15s, color 0.15s; }
.faq-q .plus svg { width: 14px; height: 14px; }
.faq-item.open .plus { transform: rotate(45deg); background: var(--brand); color: #fff; }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 0.35s ease, padding 0.25s ease; }
.faq-a-inner { padding: 0 24px 20px; color: var(--muted); font-size: 15px; line-height: 1.7; }
.faq-item.open .faq-a { max-height: 320px; }

/* ============ Home FAQ ============ */
.home-faq-section { overflow: hidden; }
.home-faq-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
  gap: 48px;
  align-items: start;
}
.home-faq-grid-single {
  grid-template-columns: minmax(0, 820px);
  justify-content: center;
}
.home-faq-grid .lead { margin: 12px 0 28px; }
.home-faq-list {
  max-width: none;
  margin: 0;
}
.insta-qr-card {
  position: sticky;
  top: 96px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.insta-qr-media {
  padding: 24px;
  background:
    radial-gradient(circle at 20% 12%, rgba(255, 214, 0, 0.42), transparent 34%),
    radial-gradient(circle at 92% 86%, rgba(225, 48, 108, 0.32), transparent 38%),
    linear-gradient(135deg, #ffcf21 0%, #ff7a2b 46%, #ff2f6d 100%);
}
.insta-qr-media img {
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
  border-radius: 18px;
  box-shadow: 0 28px 58px -32px rgba(15,23,36,0.55);
}
.insta-qr-body {
  padding: 28px;
}
.insta-qr-body .eyebrow {
  margin-bottom: 12px;
  background: rgba(238,62,44,0.08);
}
.insta-qr-body h3 { margin-bottom: 10px; }
.insta-qr-body p {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.7;
  margin-bottom: 22px;
}
.insta-qr-body p strong { color: var(--ink); }

.payment-card {
  position: sticky;
  top: 96px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.payment-card-media {
  padding: 24px;
  background:
    radial-gradient(circle at 18% 10%, rgba(37, 211, 102, 0.24), transparent 32%),
    radial-gradient(circle at 90% 88%, rgba(29, 126, 216, 0.22), transparent 36%),
    linear-gradient(135deg, #f7f8fa 0%, #ffffff 100%);
}
.payment-card-media img {
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
  border-radius: 18px;
  box-shadow: 0 28px 58px -32px rgba(15,23,36,0.55);
}
.payment-card-body { padding: 28px; }
.payment-card-body .eyebrow { margin-bottom: 12px; }
.payment-card-body h3 { margin-bottom: 10px; }
.payment-card-body p {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.7;
  margin-bottom: 22px;
}

/* ============ CTA banner ============ */
.cta-banner {
  background: linear-gradient(135deg, #ee3e2c 0%, #d33422 60%, #1d7ed8 130%);
  border-radius: 24px;
  padding: 56px 48px;
  color: #fff;
  display: grid; grid-template-columns: 1.4fr auto; gap: 32px; align-items: center;
  position: relative; overflow: hidden;
}
.cta-banner::before {
  content: ""; position: absolute; top: -30%; right: -10%;
  width: 400px; height: 400px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.15), transparent 60%);
}
.cta-banner h2 { color: #fff; margin-bottom: 12px; }
.cta-banner p { color: rgba(255,255,255,0.9); font-size: 17px; max-width: 540px; }
.cta-banner .cta-actions { display: flex; gap: 12px; flex-wrap: wrap; position: relative; z-index: 1; }
.cta-banner .btn-primary { background: #fff; color: var(--brand); box-shadow: 0 10px 24px -8px rgba(0,0,0,0.2); }
.cta-banner .btn-primary:hover { background: var(--ink); color: #fff; }
.cta-banner .btn-secondary { background: transparent; color: #fff; border-color: rgba(255,255,255,0.4); }
.cta-banner .btn-secondary:hover { background: rgba(255,255,255,0.1); border-color: #fff; }

/* ============ Contact ============ */
.contact-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 48px; align-items: start; }
.contact-channels { display: flex; flex-direction: column; gap: 12px; }
.cc-item {
  display: flex; align-items: center; gap: 16px;
  padding: 18px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.cc-item:hover { transform: translateX(4px); border-color: var(--brand); box-shadow: var(--shadow-sm); }
.cc-ic { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; flex-shrink: 0; color: #fff; }
.cc-ic svg { width: 20px; height: 20px; }
.cc-ic .wa-icon { width: 22px; height: 22px; display: block; }
.cc-ic.wa { background: #25d366; }
.cc-ic.call { background: var(--accent); }
.cc-ic.upi { background: var(--success); }
.cc-ic.ig { background: linear-gradient(135deg, #f09433, #dc2743, #bc1888); }
.cc-ic.yt { background: #ff0033; }
.cc-lbl { font-size: 12px; color: var(--muted); font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; }
.cc-val { font-weight: 600; font-size: 15px; margin-top: 2px; }

/* Online status card */
.online-status-card {
  padding: 18px 20px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.online-status-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.online-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: #22c55e; box-shadow: 0 0 0 4px rgba(34,197,94,0.18);
  flex-shrink: 0;
  animation: heroPulse 1.8s ease-in-out infinite;
}
.online-status-row strong { font-weight: 700; font-size: 14px; color: var(--ink); }
.online-status-card p { font-size: 13px; color: var(--muted); line-height: 1.55; margin: 0; }

.contact-form {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 32px;
  box-shadow: var(--shadow-md);
}
.contact-form h3 { margin-bottom: 6px; }
.contact-form .desc { color: var(--muted); font-size: 14px; margin-bottom: 24px; }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.field label { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.field input, .field select, .field textarea {
  width: 100%; padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  font: inherit; font-size: 15px; color: var(--ink);
  outline: none; transition: border-color 0.15s, box-shadow 0.15s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(238, 62, 44, 0.12);
}
.field textarea { resize: vertical; min-height: 110px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* ============ Stat row ============ */
.stat-row {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-md);
}
.stat-cell { padding: 32px 28px; text-align: center; border-right: 1px solid var(--line); }
.stat-cell:last-child { border-right: none; }
.stat-cell .num { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 40px; color: var(--ink); letter-spacing: -0.02em; line-height: 1; }
.stat-cell .num .a { color: var(--brand); }
.stat-cell .lbl { font-size: 13px; color: var(--muted); margin-top: 8px; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 600; }

/* ============================================================
   ALL TOOLS PAGE  —  v4 category-card layout
   ============================================================ */

/* ---- Search bar ---- */
.tools-search-wrap {
  display: flex; align-items: center; gap: 12px;
  background: #fff; border: 1.5px solid var(--line);
  border-radius: 14px; padding: 13px 18px;
  margin-top: 28px; box-shadow: var(--shadow-md);
  max-width: 640px;
  transition: border-color 0.18s, box-shadow 0.18s;
}
.tools-search-wrap:focus-within {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(238,62,44,0.10), var(--shadow-md);
}
.tools-search-wrap > svg { width: 18px; height: 18px; color: var(--muted); flex-shrink: 0; }
.tools-search {
  flex: 1; border: none; outline: none;
  font: inherit; font-size: 15px; color: var(--ink);
  background: transparent; min-width: 0;
}
.tools-search::placeholder { color: var(--muted-2); }
.tools-search-count {
  font-size: 12px; font-weight: 700; color: var(--muted);
  background: var(--bg-soft); border-radius: 20px;
  padding: 3px 11px; white-space: nowrap; flex-shrink: 0;
}

/* ---- Hero stats row ---- */
.tools-hero-inner {
  display: flex; align-items: flex-start;
  justify-content: space-between; gap: 48px; flex-wrap: wrap;
}
.tools-hero-copy { flex: 1; min-width: 280px; }
.tools-price-badge {
  display: inline-block; background: var(--brand); color: #fff;
  border-radius: 6px; padding: 1px 8px; font-size: 0.95em;
  font-weight: 800; letter-spacing: -0.01em;
}
.tools-hero-stats {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  flex-shrink: 0; align-self: center;
}
.th-stat {
  background: rgba(255,255,255,0.72); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.8);
  border-radius: 14px; padding: 14px 20px; text-align: center;
  box-shadow: var(--shadow-soft);
}
.th-stat-n {
  font-size: 22px; font-weight: 800; color: var(--brand);
  letter-spacing: -0.03em; line-height: 1; margin-bottom: 4px;
}
.th-stat-l {
  font-size: 11px; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.05em;
}

/* ---- Trust strip ---- */
.tools-trust-strip { background: var(--bg-dark); padding: 14px 0; }
.tools-trust-inner {
  display: flex; align-items: center; justify-content: center;
  gap: 32px; flex-wrap: wrap;
}
.tools-trust-item {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.7);
  letter-spacing: 0.06em; text-transform: uppercase;
}
.tools-trust-item svg { width: 15px; height: 15px; color: var(--brand); flex-shrink: 0; }

/* ---- Inline category filter pills (replaces sticky nav) ---- */
.tcat-filter-row {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-bottom: 36px;
}
.tcat-filter-pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 15px; border-radius: 999px;
  font-size: 13px; font-weight: 600;
  color: var(--ink-2);
  background: var(--nl, var(--bg-soft));
  border: 1.5px solid var(--nb, var(--line));
  text-decoration: none;
  transition: background 0.18s, color 0.18s, border-color 0.18s,
              box-shadow 0.2s, transform 0.2s;
}
.tcat-filter-pill svg { width: 14px; height: 14px; opacity: 0.7; flex-shrink: 0;
  transition: opacity 0.15s; }
.tcat-filter-pill:hover {
  background: var(--nc, var(--brand)); color: #fff;
  border-color: var(--nc, var(--brand));
  box-shadow: 0 6px 18px -6px color-mix(in srgb, var(--nc, var(--brand)) 55%, transparent);
  transform: translateY(-2px);
}
.tcat-filter-pill:hover svg { opacity: 1; }
.tcat-filter-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; border-radius: 999px; padding: 0 5px;
  font-size: 11px; font-weight: 700;
  background: rgba(0,0,0,0.08); color: inherit;
  transition: background 0.15s;
}
.tcat-filter-pill:hover .tcat-filter-count { background: rgba(255,255,255,0.25); }

/* ---- Tools body ---- */
.tools-body-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 52px 28px 56px;
}

/* ---- No results ---- */
.tools-empty {
  flex-direction: column; align-items: center; gap: 12px;
  padding: 80px 20px; text-align: center; color: var(--muted);
}
.tools-empty svg { width: 56px; height: 56px; color: var(--line); }
.tools-empty strong { font-size: 20px; font-weight: 700; color: var(--ink-2); }
.tools-empty span { font-size: 15px; }

/* ============================================================
   CATEGORY SECTION
   ============================================================ */
.tsc-section {
  margin-bottom: 64px;
  scroll-margin-top: 100px;
}

/* Section heading row */
.tsc-section-head {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 24px;
  padding-bottom: 18px;
  border-bottom: 2px solid var(--line);
  flex-wrap: wrap;
}
.tsc-section-icon {
  width: 46px; height: 46px; border-radius: 13px;
  display: grid; place-items: center; flex-shrink: 0;
  color: #fff;
}
.tsc-section-icon svg { width: 22px; height: 22px; }
.tsc-section-title {
  font-size: 20px; font-weight: 800; color: var(--ink);
  margin: 0; line-height: 1.25;
}
.tsc-section-meta {
  font-size: 13px; color: var(--muted); margin: 3px 0 0;
}
.tsc-section-hot {
  margin-left: auto; flex-shrink: 0;
  display: inline-flex; align-items: center;
  font-size: 11px; font-weight: 800; letter-spacing: 0.06em;
  background: #fff7ed; color: #c2410c;
  border: 1px solid #fed7aa; border-radius: 999px;
  padding: 4px 12px;
}

/* ============================================================
   TOOL CARD  — individual card per tool
   ============================================================ */
.tsc-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.tsc-card {
  display: flex; flex-direction: column;
  background: #fff;
  border: 1.5px solid var(--tc-border, var(--line));
  border-radius: 18px;
  overflow: hidden;
  text-decoration: none; color: inherit;
  transition: box-shadow 0.26s var(--ease-out-quart),
              transform 0.26s var(--ease-out-quart),
              border-color 0.2s;
}
.tsc-card:hover {
  box-shadow: 0 16px 40px -16px color-mix(in srgb, var(--tc-accent, var(--brand)) 50%, rgba(15,23,36,0.3));
  transform: translateY(-5px);
  border-color: var(--tc-accent, var(--brand));
}

/* Image placeholder */
.tsc-img {
  width: 100%; aspect-ratio: 16/9; overflow: hidden; flex-shrink: 0;
  background: #f4f6f9;
  position: relative;
}
.tsc-img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.4s var(--ease-out-quart);
  display: block;
}
.tsc-card:hover .tsc-img img { transform: scale(1.05); }

/* Card body */
.tsc-body {
  flex: 1; padding: 16px 18px 12px;
}
.tsc-cat-badge {
  display: inline-block;
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--tc-accent, var(--brand));
  background: var(--tc-light, #f8f9fb);
  border: 1px solid var(--tc-border, var(--line));
  border-radius: 999px; padding: 2px 10px;
  margin-bottom: 10px;
  white-space: nowrap; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis;
}
.tsc-name {
  font-size: 15px; font-weight: 800; color: var(--ink);
  line-height: 1.35; margin: 0 0 8px;
}
.tsc-desc {
  font-size: 13px; color: var(--muted); line-height: 1.6;
  margin: 0;
  display: -webkit-box; -webkit-line-clamp: 3;
  -webkit-box-orient: vertical; overflow: hidden;
}

/* Card footer */
.tsc-footer {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  padding: 12px 18px;
  background: var(--tc-light, #f8f9fb);
  border-top: 1px solid var(--tc-border, var(--line));
  transition: background 0.18s;
}
.tsc-card:hover .tsc-footer {
  background: var(--tc-accent, var(--brand));
}
.tsc-price-wrap {
  display: flex; align-items: baseline; gap: 4px; flex-shrink: 0;
}
.tsc-price {
  font-size: 18px; font-weight: 800;
  color: var(--tc-accent, var(--brand));
  letter-spacing: -0.02em; line-height: 1;
  transition: color 0.18s;
}
.tsc-card:hover .tsc-price { color: #fff; }
.tsc-per {
  font-size: 10px; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.04em;
  transition: color 0.18s;
}
.tsc-card:hover .tsc-per { color: rgba(255,255,255,0.7); }
.tsc-cta {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 700;
  color: var(--tc-accent, var(--brand));
  transition: color 0.18s;
}
.tsc-card:hover .tsc-cta { color: #fff; }
.tsc-arrow {
  transition: transform 0.18s;
}
.tsc-card:hover .tsc-arrow { transform: translateX(4px); }

/* ---- Responsive ---- */
@media (max-width: 1280px) {
  .tsc-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 960px) {
  .tsc-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}
@media (max-width: 540px) {
  .tsc-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .tsc-name { font-size: 13px; }
  .tsc-price { font-size: 15px; }
  .tsc-desc { display: none; }
  .tsc-section-title { font-size: 17px; }
  .tools-trust-inner { gap: 14px; justify-content: flex-start; }
  .tools-search-wrap { max-width: none; }
  .tools-body-wrap { padding: 36px 20px 48px; }
}
@media (max-width: 380px) {
  .tsc-grid { grid-template-columns: 1fr; }
}

/* No results */
.tools-empty {
  flex-direction: column; align-items: center; gap: 12px;
  padding: 80px 20px; text-align: center; color: var(--muted);
}
.tools-empty svg { width: 56px; height: 56px; color: var(--line); }
.tools-empty strong { font-size: 20px; font-weight: 700; color: var(--ink-2); }
.tools-empty span { font-size: 15px; }

/* ---- Masonry grid — 3 columns on desktop ---- */
.tcat-masonry {
  columns: 3;
  column-gap: 22px;
}

/* ============================================================
   CATEGORY CARD  — one card per category
   ============================================================ */
.tcat-card {
  break-inside: avoid;
  margin-bottom: 22px;
  background: #fff;
  border: 1.5px solid var(--c-border, var(--line));
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 2px 8px -4px rgba(15,23,36,0.07), 0 1px 3px -2px rgba(15,23,36,0.04);
  transition: box-shadow 0.25s var(--ease-out-quart), transform 0.25s var(--ease-out-quart);
  scroll-margin-top: calc(var(--payment-banner-height) + 130px);
}
.tcat-card:hover {
  box-shadow: 0 14px 36px -14px color-mix(in srgb, var(--c-accent, var(--brand)) 40%, rgba(15,23,36,0.3));
  transform: translateY(-3px);
}

/* Card header */
.tcat-card-hdr {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 18px 15px;
  background: var(--c-hdr, var(--brand));
  color: #fff;
  position: relative;
}
.tcat-card-hdr::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 3px;
  background: rgba(0,0,0,0.15);
}
.tcat-card-hdr-icon {
  width: 38px; height: 38px; border-radius: 10px;
  background: rgba(255,255,255,0.2);
  display: grid; place-items: center; flex-shrink: 0;
}
.tcat-card-hdr-icon svg { width: 18px; height: 18px; }
.tcat-card-hdr-info { flex: 1; min-width: 0; }
.tcat-card-hdr-title {
  font-size: 14.5px; font-weight: 800; letter-spacing: 0.01em;
  line-height: 1.3; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis;
}
.tcat-card-hdr-count {
  font-size: 11px; opacity: 0.75; font-weight: 600; margin-top: 1px;
}
.tcat-card-hot {
  display: inline-flex; align-items: center;
  font-size: 10px; font-weight: 800; letter-spacing: 0.06em;
  background: rgba(255,255,255,0.22); border-radius: 999px;
  padding: 3px 9px; white-space: nowrap; flex-shrink: 0;
}

/* Tool list */
.tcat-tool-list {
  list-style: none; margin: 0; padding: 8px 0;
}
.tcat-tool-item {}
.tcat-tool-link {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 18px;
  text-decoration: none; color: var(--ink-2);
  font-size: 13.5px; font-weight: 500;
  transition: background 0.14s, color 0.14s;
  border-bottom: 1px solid transparent;
}
.tcat-tool-link:hover {
  background: var(--c-light, #f8f9fb);
  color: var(--c-accent, var(--brand));
}
/* Separator between rows */
.tcat-tool-item + .tcat-tool-item .tcat-tool-link {
  border-top: 1px solid var(--line);
}
/* Dot bullet */
.tcat-tool-dot {
  width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
  background: var(--c-accent, var(--brand));
  opacity: 0.5;
  transition: opacity 0.14s, transform 0.14s;
}
.tcat-tool-link:hover .tcat-tool-dot { opacity: 1; transform: scale(1.4); }
/* Tool name */
.tcat-tool-name { flex: 1; line-height: 1.4; }
/* Price badge */
.tcat-tool-price {
  font-size: 12px; font-weight: 700;
  color: var(--c-accent, var(--brand));
  background: var(--c-light, #f8f9fb);
  border: 1px solid var(--c-border, var(--line));
  border-radius: 6px; padding: 2px 8px;
  white-space: nowrap; flex-shrink: 0;
  opacity: 0; transform: translateX(-4px);
  transition: opacity 0.15s, transform 0.15s;
}
.tcat-tool-link:hover .tcat-tool-price { opacity: 1; transform: translateX(0); }
/* Arrow */
.tcat-tool-arrow {
  flex-shrink: 0; color: var(--muted); opacity: 0;
  transition: opacity 0.14s, transform 0.14s;
}
.tcat-tool-link:hover .tcat-tool-arrow {
  opacity: 1; transform: translateX(3px);
  color: var(--c-accent, var(--brand));
}

/* Card footer */
.tcat-card-footer {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  background: var(--c-light, #f8f9fb);
  border-top: 1.5px solid var(--c-border, var(--line));
}
.tcat-card-price-info {
  display: flex; align-items: baseline; gap: 5px;
}
.tcat-card-price {
  font-size: 22px; font-weight: 800;
  color: var(--c-accent, var(--brand));
  letter-spacing: -0.03em; line-height: 1;
}
.tcat-card-price-label {
  font-size: 11px; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.tcat-card-order-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 18px; border-radius: 10px;
  font-size: 13px; font-weight: 700; color: #fff;
  background: var(--c-accent, var(--brand));
  text-decoration: none;
  box-shadow: 0 6px 18px -6px color-mix(in srgb, var(--c-accent, var(--brand)) 65%, transparent);
  transition: transform 0.22s var(--ease-out-quart), filter 0.2s, box-shadow 0.25s;
}
.tcat-card-order-btn:hover {
  transform: translateY(-2px); filter: brightness(1.06);
  box-shadow: 0 12px 26px -8px color-mix(in srgb, var(--c-accent, var(--brand)) 70%, transparent);
}

/* ---- Responsive ---- */
@media (max-width: 1200px) {
  .tcat-masonry { columns: 2; }
}
@media (max-width: 900px) {
  .tools-hero-stats { display: none; }
}
@media (max-width: 680px) {
  .tcat-masonry { columns: 1; }
  .tcat-card-footer { flex-direction: column; align-items: flex-start; gap: 10px; }
  .tcat-card-order-btn { width: 100%; justify-content: center; }
  .tools-trust-inner { gap: 14px; justify-content: flex-start; }
  .tools-search-wrap { max-width: none; }
  .tcat-filter-row { gap: 8px; }
  .tcat-filter-pill { font-size: 12px; padding: 7px 12px; }
}

/* ============ About story ============ */
.about-split { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.about-split h2 { margin-bottom: 18px; text-wrap: balance; }
.about-split p { color: var(--muted); font-size: 17px; margin-bottom: 16px; }
.about-photo {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  aspect-ratio: 4/5; box-shadow: var(--shadow-lg);
}
.about-photo img { width: 100%; height: 100%; object-fit: cover; }

/* About stat numbers */
.about-stats { display: flex; gap: 32px; margin-top: 28px; flex-wrap: wrap; }
.about-stat-n {
  font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 34px; line-height: 1;
  letter-spacing: -0.03em; margin-bottom: 4px;
}
.about-stat-l { font-size: 13px; color: var(--muted); font-weight: 500; letter-spacing: 0.04em; }
.about-stat-n.brand { color: var(--brand); }
.about-stat-n.accent { color: var(--accent); }
.about-stat-n.success { color: var(--success); }

/* ============ Footer ============ */
.footer { background: var(--bg-dark); color: rgba(255,255,255,0.7); padding: 64px 0 28px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 48px; }
.footer .brand-name strong { color: #fff; }
.footer .brand-name span { color: rgba(255,255,255,0.5); }
.footer .tag { margin-top: 16px; font-size: 14px; line-height: 1.7; max-width: 320px; }
.footer-socials { display: flex; gap: 10px; margin-top: 20px; }
.footer-socials a {
  width: 38px; height: 38px; border-radius: 10px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08);
  display: grid; place-items: center; color: rgba(255,255,255,0.7);
  transition: all 0.15s;
}
.footer-socials a:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
.footer-socials a svg { width: 16px; height: 16px; }
.footer-socials a .wa-icon { width: 17px; height: 17px; display: block; }
.footer-col h5 { color: #fff; font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 18px; }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-col ul a { color: rgba(255,255,255,0.65); font-size: 14px; transition: color 0.15s; }
.footer-col ul a:hover { color: #fff; }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.08);
  font-size: 13px; color: rgba(255,255,255,0.5); flex-wrap: wrap; gap: 12px;
}

/* ============ Floating ============ */
.floating {
  position: fixed; bottom: 24px; right: 24px; z-index: 80;
  display: flex; flex-direction: column; gap: 10px;
}
.floating a {
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center; color: #fff;
  box-shadow: 0 10px 24px -6px rgba(0,0,0,0.25);
  transition: transform 0.15s, box-shadow 0.15s;
}
.floating a:hover { transform: scale(1.08); }
.floating a.wa { background: #25d366; }
.floating a.call { background: var(--brand); }
.floating a svg { width: 22px; height: 22px; }
.floating a .wa-icon { width: 25px; height: 25px; display: block; }

/* ============ Payment popup ============ */
.payment-popup[hidden] { display: none; }
.payment-popup {
  position: fixed;
  inset: 0;
  z-index: 10001;
  display: grid;
  place-items: center;
  padding: 24px;
}
.payment-popup-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: rgba(15, 23, 36, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.payment-popup-card {
  position: relative;
  z-index: 1;
  width: min(92vw, 460px);
  max-height: min(88vh, 760px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: 16px;
  box-shadow: 0 34px 90px -30px rgba(0,0,0,0.72);
}
.payment-popup-card img {
  width: 100%;
  min-height: 0;
  object-fit: contain;
  background: #111827;
}
.payment-popup-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(255,255,255,0.94);
  color: #991b1b;
  box-shadow: 0 8px 20px rgba(0,0,0,0.22);
}
.payment-popup-close:hover {
  background: #fff;
  transform: scale(1.04);
}
.payment-popup-close svg {
  width: 20px;
  height: 20px;
}
.payment-popup-body {
  padding: 18px 22px 22px;
  text-align: center;
  border-top: 1px solid var(--line);
}
.payment-popup-body h2 {
  margin-bottom: 8px;
  font-size: 22px;
  letter-spacing: 0;
  color: #991b1b;
}
.payment-popup-body p {
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.55;
}

/* ============ Reveal ============ */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal.d2 { transition-delay: 0.08s; }
.reveal.d3 { transition-delay: 0.16s; }
.reveal.d4 { transition-delay: 0.24s; }
.reveal.d5 { transition-delay: 0.32s; }

/* ============ Responsive ============ */
@media (max-width: 1100px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(380px, 0.9fr); gap: 42px; padding-top: 50px; padding-bottom: 60px; }
  .hero-showcase { min-height: 510px; }
  .why-grid { grid-template-columns: repeat(3, 1fr); }
  .audience-grid, .portfolio-grid { grid-template-columns: repeat(2, 1fr); }
  .ws-grid { grid-template-columns: repeat(2, 1fr); }
  .ws-header { flex-direction: column; align-items: flex-start; }
  .ws-header-stats { width: 100%; justify-content: center; }
  .ss-grid { grid-template-columns: repeat(2, 1fr); }
  .service-packages-grid { grid-template-columns: 1fr 1fr; }
  .svc-pkg-cards { grid-template-columns: repeat(2, 1fr); }
  .pricing-pkg-grid { grid-template-columns: repeat(2, 1fr); }
  .other-pricing-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-row { grid-template-columns: repeat(2, 1fr); }
  .stat-cell:nth-child(2) { border-right: none; }
  .stat-cell:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}
@media (max-width: 880px) {
  :root { --payment-banner-height: 78px; }
  .nav-links { display: none; }
  .nav .brand-name { display: none; }
  .nav-toggle { display: inline-flex; }
  .nav-links.open {
    display: flex; flex-direction: column; gap: 0;
    position: absolute; top: 100%; left: 0; right: 0;
    background: #fff; border-bottom: 1px solid var(--line);
    padding: 8px 28px 16px; align-items: stretch;
  }
  .nav-links.open a { padding: 12px 4px; border-bottom: 1px solid var(--line-2); border-radius: 0; }
  .nav-cta .btn-secondary { display: none; }

  .section { padding: 64px 0; }
  .hero { padding: 48px 0 64px; }
  .hero-home { padding: 0; }
  .hero-grid { grid-template-columns: 1fr; gap: 42px; min-height: auto; padding-top: 48px; padding-bottom: 54px; }
  .hero-copy { max-width: none; }
  .hero-meta { margin-bottom: 22px; }
  .hero-showcase { min-height: 520px; }
  .hero-compact-grid { grid-template-columns: 1fr; gap: 28px; }
  .hero-visual { justify-self: start; width: min(100%, 320px); }
  .hero-visual-portrait { width: min(100%, 300px); }
  .hero-photo .badge-card.top-l { left: 12px; }
  .hero-photo .badge-card.bottom-r { right: 12px; }
  .svc-grid, .price-grid { grid-template-columns: 1fr; }
  .testi { flex-basis: calc((100% - 20px) / 2); }
  .svc-detail { grid-template-columns: 1fr; gap: 32px; padding: 48px 0; }
  .svc-detail.reverse > :first-child { order: 0; }
  .service-packages { padding: 16px; }
  .service-packages-grid { grid-template-columns: 1fr; }
  /* Services redesign responsive */
  .svc-intro { grid-template-columns: 1fr; gap: 28px; margin-bottom: 28px; }
  .svc-intro.reverse > .svc-intro-img { order: 0; }
  .svc-intro.reverse > .svc-intro-text { order: 0; }
  .svc-feat-row { grid-template-columns: 1fr; }
  .svc-pkg-cards { grid-template-columns: 1fr; }
  .svc-pkgs { padding: 24px 20px; }
  .svc-section { padding: 52px 0; scroll-margin-top: calc(var(--payment-banner-height) + 110px); }
  .pricing-pkg-grid { grid-template-columns: 1fr; }
  .other-pricing-grid { grid-template-columns: 1fr; }
  .talk-card { grid-template-columns: 1fr; gap: 24px; padding: 28px 24px; }
  .talk-card-right { min-width: unset; flex-direction: row; flex-wrap: wrap; }
  .svc-nav-strip { top: calc(var(--payment-banner-height) + 76px); }
  .why-grid { grid-template-columns: 1fr 1fr; }
  .process { grid-template-columns: 1fr; gap: 28px; }
  .home-process { grid-template-columns: 1fr; max-width: 520px; }
  .process::before { display: none; }
  .ss-grid { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; gap: 28px; }
  .home-faq-grid { grid-template-columns: 1fr; gap: 32px; }
  .insta-qr-card,
  .payment-card { position: relative; top: auto; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
  .cta-banner { grid-template-columns: 1fr; padding: 36px 28px; }
  .about-split { grid-template-columns: 1fr; gap: 32px; }
  .custom-quote-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .container { padding: 0 20px; }
  .trust-strip-inner { flex-direction: column; align-items: flex-start; }
  .stat-row { grid-template-columns: 1fr 1fr; }
  .ws-lb-inner { grid-template-columns: 1fr; }
  .ws-lb-image-wrap { max-height: 55vw; }
  .ws-lb-info { max-height: none; }
  .ws-lb-panel { overflow-y: auto; max-height: 92vh; }
  .ws-bottom { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 520px) {
  :root { --payment-banner-height: 82px; }
  .payment-pending-banner { padding: 12px 16px; font-size: clamp(26px, 10vw, 40px); }
  .payment-popup { padding: 14px; }
  .payment-popup-card { width: 100%; max-height: 86vh; border-radius: 12px; }
  .payment-popup-body { padding: 14px 16px 18px; }
  .payment-popup-body h2 { font-size: 19px; }
  .payment-popup-body p { font-size: 13px; }
  .svc-nav-strip { top: calc(var(--payment-banner-height) + 72px); }
  .svc-section { scroll-margin-top: calc(var(--payment-banner-height) + 104px); }
  .nav-inner { gap: 12px; padding: 12px 16px; }
  .nav-cta { gap: 8px; }
  .nav-cta .btn-primary { padding: 10px 12px !important; font-size: 13px !important; }
  .hero-grid { padding-top: 42px; padding-bottom: 42px; gap: 32px; }
  .hero-meta { gap: 8px; }
  .hero-meta > span { font-size: 10px; letter-spacing: 0.08em; }
  .hero-headline { font-size: clamp(34px, 9.8vw, 48px); letter-spacing: -0.045em; }
  .hero-trust {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    padding-top: 18px;
    max-width: none;
  }
  .trust-item,
  .trust-item + .trust-item { padding: 0 8px; }
  .trust-item:first-child { padding-left: 0; }
  .trust-item:last-child { padding-right: 0; }
  .trust-item + .trust-item::before { display: block; top: 2px; bottom: 2px; }
  .trust-item .n { font-size: clamp(24px, 9vw, 34px); letter-spacing: -0.05em; }
  .trust-item .l { font-size: 9px; line-height: 1.25; letter-spacing: 0.04em; margin-top: 7px; }
  .hero-badge { align-items: flex-start; border-radius: 14px; line-height: 1.35; }
  .hero-ctas { flex-direction: column; align-items: stretch; }
  .hero-ctas .btn { justify-content: center; }
  .hero-showcase { min-height: auto; display: grid; gap: 12px; padding: 0; border: 0; background: transparent; box-shadow: none; }
  .hero-showcase::before,
  .hero-showcase::after { display: none; }
  .hero-image {
    position: relative;
    inset: auto;
    width: 100%;
  }
  .hero-image { height: auto; aspect-ratio: 4/3; order: 1; border-radius: 22px; }
  .hero-image-caption { left: 16px; right: 16px; bottom: 16px; }
  .hero-image-caption strong { font-size: 20px; letter-spacing: -0.035em; }
  .hero-ticker { height: 42px; }
  .tk-item { padding: 0 18px; font-size: 10px; }
  .testi { flex-basis: 100%; }
  .audience-grid, .portfolio-grid { grid-template-columns: 1fr; }
  .ws-grid { grid-template-columns: 1fr; }
  .ws-header-stats { flex-wrap: wrap; gap: 16px; padding: 16px 20px; }
  .ws-stat-div { display: none; }
  .ws-filters { gap: 4px; }
  .ws-filter { padding: 8px 12px; font-size: 12px; }
  .ws-bottom-right { flex-direction: column; width: 100%; }
  .ws-bottom-right .btn { justify-content: center; }
  .audience-card { min-height: auto; padding: 24px; }
  .testi-controls { margin-top: 12px; }
  .footer-grid { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .insta-qr-media,
  .insta-qr-body,
  .payment-card-media,
  .payment-card-body { padding: 20px; }
  .custom-quote-grid { grid-template-columns: 1fr !important; }
  .stat-row { grid-template-columns: 1fr; }
  .stat-cell { border-right: none !important; border-bottom: 1px solid var(--line); }
  .stat-cell:last-child { border-bottom: none; }
}

/* ============================================================
   ✦ PREMIUM POLISH LAYER
   Elevates existing components in place. Same theme, same
   classes — richer depth, light, motion and micro-interactions.
   ============================================================ */

:root {
  /* Expressive easing curves */
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Signature gradients */
  --grad-brand:   linear-gradient(135deg, #ff6a4d 0%, var(--brand) 48%, #d8331f 100%);
  --grad-warm:    linear-gradient(120deg, var(--brand) 0%, var(--brand-2) 100%);
  --grad-cool:    linear-gradient(135deg, var(--brand) 0%, #b5365f 52%, var(--accent) 100%);
  --grad-ink:     linear-gradient(160deg, #141d2e 0%, #0b1220 100%);

  /* Layered, softer premium shadows */
  --shadow-soft:  0 2px 4px -2px rgba(15,23,36,0.06), 0 6px 16px -8px rgba(15,23,36,0.10);
  --shadow-float: 0 18px 40px -18px rgba(15,23,36,0.22), 0 8px 18px -12px rgba(15,23,36,0.12);
  --shadow-brand-glow: 0 18px 44px -16px rgba(238,62,44,0.42);
}

::selection { background: rgba(238,62,44,0.18); color: var(--ink); }

/* Refined scrollbar (non-essential, desktop) */
@media (pointer: fine) {
  * { scrollbar-width: thin; scrollbar-color: rgba(15,23,36,0.22) transparent; }
  *::-webkit-scrollbar { width: 10px; height: 10px; }
  *::-webkit-scrollbar-thumb {
    background: rgba(15,23,36,0.18);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: content-box;
  }
  *::-webkit-scrollbar-thumb:hover { background: rgba(238,62,44,0.45); background-clip: content-box; }
}

/* ---- Eyebrow: subtle gradient + hairline ---- */
.eyebrow {
  background: linear-gradient(135deg, rgba(238,62,44,0.12), rgba(29,126,216,0.08));
  border: 1px solid rgba(238,62,44,0.14);
  backdrop-filter: blur(4px);
}

/* ---- Buttons: living gradient + crisper depth ---- */
.btn { transition: transform 0.25s var(--ease-out-quart), box-shadow 0.3s var(--ease-out-quart), background-position 0.55s var(--ease-out-quart), background-color 0.2s, color 0.2s, border-color 0.2s; }
.btn-primary {
  background-image: var(--grad-brand);
  background-size: 200% 200%;
  background-position: 0% 50%;
  box-shadow: var(--shadow-brand-glow);
}
.btn-primary:hover {
  background-color: transparent;
  background-position: 100% 50%;
  transform: translateY(-2px);
  box-shadow: 0 24px 52px -16px rgba(238,62,44,0.58);
}
.btn-primary:active { transform: translateY(0); }
.btn-secondary { box-shadow: var(--shadow-soft); }
.btn-secondary:hover { border-color: var(--brand); color: var(--brand); }
.btn-wa { background-image: linear-gradient(135deg, #2ee06f 0%, #25d366 50%, #1eb058 100%); background-size: 200% 200%; background-position: 0% 50%; }
.btn-wa:hover { background-position: 100% 50%; transform: translateY(-2px); }

/* ---- Nav: deeper glass + animated link underline ---- */
.nav {
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border-bottom: 1px solid rgba(15,23,36,0.06);
}
.nav-links a { position: relative; }
.nav-links a::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px;
  height: 2px; border-radius: 999px; background: var(--grad-warm);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.32s var(--ease-out-expo);
}
.nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1); }
.brand-mark { transition: transform 0.4s var(--ease-spring), box-shadow 0.3s ease; }
.brand:hover .brand-mark { transform: rotate(-4deg) scale(1.05); box-shadow: 0 8px 18px -4px rgba(238,62,44,0.45); }

/* ---- Hero: richer accent on emphasised words ---- */
.hero-headline em::after {
  background: var(--grad-warm);
  opacity: 0.22;
  height: 0.22em;
}
.hero-image { box-shadow: 0 40px 80px -36px rgba(15,23,36,0.62), 0 14px 32px -22px rgba(15,23,36,0.34); }

/* ---- Shared card motion: smoother spring-out lift ---- */
.svc-card, .why-card, .audience-card, .tcard, .price-card,
.other-pricing-card, .pricing-pkg-card, .svc-pkg-card,
.portfolio-card, .ws-card, .testi, .cc-item, .faq-item, .svc-feat-box {
  transition-timing-function: var(--ease-out-quart);
}
.svc-card:hover, .ws-card:hover, .portfolio-card:hover {
  box-shadow: var(--shadow-float);
}
.why-card:hover, .audience-card:hover, .other-pricing-card:hover {
  box-shadow: 0 18px 40px -20px rgba(238,62,44,0.28);
}

/* ---- Service / pricing icon tiles: gradient + glow ---- */
.audience-ic, .why-ic, .other-pricing-icon {
  background: var(--grad-cool);
  color: #fff;
  box-shadow: 0 10px 22px -10px rgba(238,62,44,0.5);
}
.audience-card:hover .audience-ic, .why-card:hover .why-ic { transform: translateY(-2px) scale(1.04); transition: transform 0.3s var(--ease-spring); }

/* ---- Section eyebrow color tiles keep, but soften svc icons ---- */
.svc-ic { transition: transform 0.3s var(--ease-spring); }
.svc-card:hover .svc-ic { transform: scale(1.08) rotate(-3deg); }

/* ---- CTA banner: animated light sweep ---- */
.cta-banner { background: linear-gradient(135deg, #ee3e2c 0%, #d33422 55%, #1d7ed8 135%); }
.cta-banner::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.18) 48%, transparent 62%);
  transform: translateX(-120%);
  animation: ctaSweep 5.5s ease-in-out 1.2s infinite;
}
@keyframes ctaSweep { 0%, 62% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
.cta-banner .btn-primary { background-image: none; }

/* ---- FAQ: smoother open, accent rail ---- */
.faq-item { transition: border-color 0.2s, box-shadow 0.25s var(--ease-out-quart); }
.faq-item.open { box-shadow: 0 12px 30px -16px rgba(238,62,44,0.3); }
.faq-q .plus { transition: transform 0.3s var(--ease-spring), background 0.2s, color 0.2s; }

/* ---- Footer: gradient hairline + warmer surface ---- */
.footer { position: relative; background: var(--grad-ink); }
.footer::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--brand) 0%, var(--brand-2) 38%, var(--accent) 100%);
  opacity: 0.85;
}

/* ---- Floating action buttons: pulse ring ---- */
.floating a { position: relative; transition: transform 0.25s var(--ease-spring), box-shadow 0.25s ease; }
.floating a::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  box-shadow: 0 0 0 0 currentColor; opacity: 0.5;
  animation: floatPulse 2.6s ease-out infinite;
}
.floating a.wa { color: #25d366; }
.floating a.call { color: var(--brand); }
.floating a.wa .wa-icon, .floating a.call svg { position: relative; }
@keyframes floatPulse {
  0% { box-shadow: 0 0 0 0 currentColor; opacity: 0.45; }
  70%, 100% { box-shadow: 0 0 0 16px currentColor; opacity: 0; }
}

/* ---- Reveal: gentler premium curve ---- */
.reveal { transition: opacity 0.8s var(--ease-out-expo), transform 0.8s var(--ease-out-expo); }

/* ============================================================
   ✦ TOOLS PAGE — batch pricing presentation
   ============================================================ */

/* Category header restructured for batch price + order CTA */
.tcat-header {
  flex-wrap: wrap;
  align-items: center;
  border-bottom: none;
  padding: 18px 20px;
  border-radius: 18px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--c-bg, #fff) 70%, #fff), #fff);
  border: 1px solid color-mix(in srgb, var(--c-border, var(--line)) 30%, var(--line));
  box-shadow: var(--shadow-soft);
  position: relative;
  overflow: hidden;
}
.tcat-header::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
  background: var(--c-accent, var(--brand));
}
.tcat-title-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tcat-meta { letter-spacing: 0.01em; }

.tcat-buy {
  display: flex; align-items: center; gap: 16px; margin-left: auto;
  flex-wrap: wrap;
}
.tcat-price {
  display: flex; align-items: baseline; gap: 2px;
  font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800;
  font-size: 30px; line-height: 1; color: var(--ink); letter-spacing: -0.03em;
}
.tcat-price-cur { font-size: 18px; font-weight: 700; color: var(--ink-2); }
.tcat-price-per { font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600; color: var(--muted); letter-spacing: 0.02em; margin-left: 4px; }
.tcat-order {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 11px 18px; border-radius: 11px;
  font-size: 13.5px; font-weight: 700; color: #fff;
  background: var(--c-accent, var(--brand));
  box-shadow: 0 12px 26px -12px color-mix(in srgb, var(--c-accent, var(--brand)) 80%, transparent);
  transition: transform 0.25s var(--ease-out-quart), box-shadow 0.3s var(--ease-out-quart), filter 0.2s;
  white-space: nowrap;
}
.tcat-order svg { flex-shrink: 0; }
.tcat-order:hover { transform: translateY(-2px); filter: brightness(1.06); box-shadow: 0 18px 34px -12px color-mix(in srgb, var(--c-accent, var(--brand)) 75%, transparent); }

/* Tool cards: cleaner without per-tool price, accent-aware hover */
.tcard { transition: box-shadow 0.28s var(--ease-out-quart), transform 0.28s var(--ease-out-quart), border-color 0.2s; }
.tcard:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--c-accent, var(--brand)) 45%, transparent);
  box-shadow: 0 16px 34px -18px color-mix(in srgb, var(--c-accent, var(--brand)) 70%, rgba(15,23,36,0.5));
}
.tcard-included {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 600; color: var(--muted);
  letter-spacing: 0.01em;
}
.tcard-included svg { color: var(--success); flex-shrink: 0; }
.tcard:hover .tcard-included { color: var(--ink-2); }

@media (max-width: 640px) {
  .tcat-header { padding: 16px; }
  .tcat-buy { width: 100%; justify-content: space-between; gap: 10px; }
  .tcat-order { flex: 1; justify-content: center; }
}

/* ============================================================
   ✦ Accessibility — honour reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
  .cta-banner::after, .floating a::before { animation: none; display: none; }
}

/* ============================================================
   ✦ GLOBAL UTILITIES & LAST-MILE POLISH
   ============================================================ */

/* Brand colour utility — replaces all inline style="color:var(--brand)" */
.text-brand { color: var(--brand); }

/* Nav tools link — bold + brand highlight */
.nav-tools-link { font-weight: 700 !important; }

/* Footer hours — replaces inline style on li elements */
.footer-hours {
  color: rgba(255,255,255,0.48) !important;
  font-size: 13px;
}
.footer-hours:first-of-type { margin-top: 4px; }

/* ---- Inner page hero: richer gradient ---- */
.hero-compact {
  background: linear-gradient(160deg, #fff9f8 0%, #fff 50%, #f0f7ff 100%);
  border-bottom: 1px solid var(--line);
}

/* ---- Section headings: tighter balance ---- */
.sec-head { text-align: center; max-width: 640px; margin: 0 auto 48px; }
.sec-head .h2 { text-wrap: balance; margin-bottom: 12px; }
.sec-head .lead { color: var(--muted); }

/* ---- Why-grid cards: lift on hover ---- */
.why-card {
  transition: box-shadow 0.24s var(--ease-out-quart), transform 0.24s var(--ease-out-quart);
}
.why-card:hover {
  box-shadow: var(--shadow-float);
  transform: translateY(-4px);
}

/* ---- Process steps: number pulse ---- */
.proc-num {
  transition: color 0.2s, background 0.2s;
}
.proc-step:hover .proc-num {
  background: var(--brand); color: #fff;
}

/* ---- About stats: highlight numbers ---- */
.about-stat-n {
  font-size: 36px; font-weight: 800; line-height: 1;
  letter-spacing: -0.04em; margin-bottom: 4px;
}
.about-stat-n.brand  { color: var(--brand); }
.about-stat-n.accent { color: var(--accent); }
.about-stat-n.success{ color: var(--success); }
.about-stat-l { font-size: 13px; color: var(--muted); font-weight: 600; }
.about-stats  { display: flex; gap: 28px; flex-wrap: wrap; margin-top: 28px; }

/* ---- Contact channel cards: accent border on hover ---- */
.cc-item {
  transition: box-shadow 0.22s var(--ease-out-quart), transform 0.22s var(--ease-out-quart), border-color 0.2s;
}
.cc-item:hover { border-color: var(--brand); }

/* ---- Testimonials: quote mark decoration ---- */
.testi {
  position: relative;
}
.testi > p::before {
  content: '\201C';
  font-size: 3.5em; line-height: 0; vertical-align: -0.45em;
  color: var(--brand); opacity: 0.15; margin-right: 2px;
  font-family: Georgia, serif;
}

/* ---- Service feature boxes: icon background ---- */
.svc-feat-box > svg {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px;
  transition: background 0.2s, border-color 0.2s;
}
.svc-feat-box:hover > svg {
  background: rgba(238,62,44,0.08);
  border-color: rgba(238,62,44,0.2);
}

/* ---- Breadcrumb ---- */
.breadcrumb {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--muted); margin-bottom: 20px;
}
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--brand); }
.breadcrumb svg { width: 12px; height: 12px; }

/* ---- Eyebrow colour variants (keep backward compat) ---- */
.svc-eyebrow.c1 { background: rgba(238,62,44,0.08); color: var(--brand); }
.svc-eyebrow.c2 { background: rgba(29,126,216,0.09); color: var(--accent); }
.svc-eyebrow.c3 { background: rgba(22,163,74,0.09); color: var(--success); }
.svc-eyebrow.c4 { background: rgba(124,58,237,0.09); color: #7c3aed; }
.svc-eyebrow.c5 { background: rgba(2,132,199,0.09); color: #0284c7; }

/* ---- Pricing pkg card: price number refinement ---- */
.pkg-price-n {
  font-size: 40px; font-weight: 800; letter-spacing: -0.05em; line-height: 1;
  color: var(--ink);
}
.pkg-price-cur { font-size: 22px; font-weight: 700; color: var(--muted); }

/* ---- General responsive helpers ---- */
@media (max-width: 880px) {
  .about-split { grid-template-columns: 1fr; gap: 36px; }
  .about-photo { aspect-ratio: 16/9; }
  .tools-hero-stats { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 640px) {
  .tools-hero-stats { display: none; }
  .about-stats { gap: 20px; }
  .about-stat-n { font-size: 28px; }
  .sec-head { margin-bottom: 32px; }
  .tcat-nav { top: calc(var(--payment-banner-height) + 60px); }
}