/* ==========================================================================
   WEBTER, SEO Agency
   Design system + all page styles
   ========================================================================== */

/* --- 1. TOKENS ----------------------------------------------------------- */
:root {
  /* Brand */
  --navy-950: #07072a;
  --navy-990: #04041c;   /* footer only, one shade below the darkest section */
  --navy-900: #0a0a38;
  --navy-850: #0e0e40;
  --navy-800: #12124a;
  --navy-700: #1e1e63;
  --navy-600: #2b2b7d;

  --yellow: #efce00;
  --yellow-hi: #ffe01f;
  --yellow-dim: rgba(239, 206, 0, 0.12);

  --white: #ffffff;
  --slate-100: #e6e9f2;
  --slate-300: #a9b0c9;
  --slate-500: #767ea0;

  --green: #28c76f;

  /* Type */
  --font-head: "Plus Jakarta Sans", "Satoshi", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;

  /* Layout */
  --container: 1200px;
  --gutter: 24px;
  --section-y: 140px;
  --radius: 16px;
  --radius-sm: 10px;

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 250ms;
}

/* --- 2. RESET ------------------------------------------------------------ */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--slate-300);
  background: var(--navy-950);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
ul { list-style: none; }

::selection { background: var(--yellow); color: var(--navy-950); }

/* --- 3. TYPOGRAPHY ------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-head);
  color: var(--white);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

h1 { font-size: clamp(2.25rem, 5.2vw, 4.25rem); line-height: 1.05; }
h2 { font-size: clamp(1.75rem, 3.4vw, 2.75rem); }
h3 { font-size: 1.375rem; }
h4 { font-size: 1.0625rem; }

.eyebrow {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--yellow);
  margin-bottom: 18px;
  display: block;
}

.lead {
  font-size: 1.125rem;
  color: var(--slate-300);
  max-width: 620px;
}

.accent { color: var(--yellow); }

/* --- 4. LAYOUT ----------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

section { padding-block: var(--section-y); position: relative; }
.bg-900 { background: var(--navy-900); }
.bg-950 { background: var(--navy-950); }

.section-head { max-width: 720px; margin-bottom: 64px; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head p { margin-top: 18px; }
.section-head.center p { margin-inline: auto; }

/* Decorative background layers */
.grid-tex {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 40%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 40%, transparent 100%);
  pointer-events: none;
}

.glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  background: var(--yellow);
  opacity: 0.07;
}

/* --- 5. BUTTONS ---------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  padding: 14px 26px;
  border-radius: var(--radius-sm);
  transition: transform var(--dur) var(--ease),
              background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
  white-space: nowrap;
  min-height: 48px;
}

.btn-primary {
  background: var(--yellow);
  color: var(--navy-950);
  box-shadow: 0 6px 24px -8px rgba(239, 206, 0, 0.5);
}
.btn-primary:hover {
  background: var(--yellow-hi);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px -8px rgba(239, 206, 0, 0.6);
}

.btn-ghost {
  border: 1px solid var(--navy-700);
  color: var(--white);
  background: rgba(255, 255, 255, 0.02);
}
.btn-ghost:hover {
  border-color: rgba(239, 206, 0, 0.5);
  transform: translateY(-2px);
}

.btn-sm { padding: 10px 18px; font-size: 0.875rem; min-height: 40px; }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }
.btn-row.center { justify-content: center; }

.link-y {
  color: var(--yellow);
  font-weight: 600;
  font-size: 0.9375rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: gap var(--dur) var(--ease);
}
.link-y:hover { gap: 11px; }

/* --- 6. NAVBAR ----------------------------------------------------------- */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  height: 76px;
  z-index: 100;
  display: flex;
  align-items: center;
  transition: background-color 300ms var(--ease),
              border-color 300ms var(--ease),
              backdrop-filter 300ms var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(7, 7, 42, 0.82);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom-color: var(--navy-700);
}
.nav .container {
  display: flex;
  align-items: center;
  gap: 32px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.125rem;
  color: var(--white);
  letter-spacing: -0.01em;
  flex-shrink: 0;
}
.logo svg { width: 30px; height: 30px; }

.nav-links {
  display: flex;
  gap: 28px;
  margin-left: auto;
  align-items: center;
}
.nav-links a {
  font-size: 0.9375rem;
  color: var(--slate-300);
  position: relative;
  padding-block: 6px;
  transition: color var(--dur) var(--ease);
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 0;
  background: var(--yellow);
  transition: width var(--dur) var(--ease);
}
.nav-links a:hover { color: var(--white); }
.nav-links a:hover::after { width: 100%; }
.nav-links a.current { color: var(--white); }
.nav-links a.current::after { width: 100%; }

.nav-cta { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }

.burger {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  margin-left: auto;
}
.burger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--white);
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu {
  position: fixed;
  inset: 76px 0 0 0;
  background: var(--navy-950);
  z-index: 99;
  padding: 32px var(--gutter);
  display: none;
  flex-direction: column;
  gap: 4px;
}
.mobile-menu.open { display: flex; }
.mobile-menu a {
  font-family: var(--font-head);
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--white);
  padding-block: 16px;
  border-bottom: 1px solid var(--navy-800);
}
.mobile-menu .btn { margin-top: 24px; }

/* --- 7. HERO ------------------------------------------------------------- */
.hero {
  padding-top: 168px;
  padding-bottom: 110px;
  overflow: hidden;
}
.hero .glow {
  width: 720px;
  height: 620px;
  top: -140px;
  right: -180px;
  opacity: 0.09;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 64px;
  align-items: center;
  position: relative;
  z-index: 1;
}
.hero h1 { margin-bottom: 24px; }
.hero .lead { margin-bottom: 34px; }
.hero-micro {
  margin-top: 26px;
  font-size: 0.875rem;
  color: var(--slate-500);
  display: flex;
  align-items: center;
  gap: 8px;
}
.hero-micro svg { width: 16px; height: 16px; color: var(--yellow); flex-shrink: 0; }

/* Dashboard mockup */
.dash {
  background: var(--navy-800);
  border: 1px solid var(--navy-700);
  border-radius: 20px;
  padding: 22px;
  position: relative;
  transform: rotate(1.4deg);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.75),
              0 0 0 1px rgba(255, 255, 255, 0.03) inset;
}
.dash-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.dash-title { font-size: 0.875rem; color: var(--slate-100); font-weight: 600; }
.dash-live {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.6875rem;
  color: var(--yellow);
  font-weight: 600;
}
.dash-live i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--yellow);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}

.dash-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 18px;
}
.tile {
  background: var(--navy-850);
  border: 1px solid var(--navy-700);
  border-radius: 10px;
  padding: 12px 13px;
}
.tile span {
  display: block;
  font-size: 0.6875rem;
  color: var(--slate-500);
  margin-bottom: 5px;
}
.tile strong {
  font-family: var(--font-head);
  font-size: 1.125rem;
  color: var(--white);
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 5px;
}
.tile em {
  font-style: normal;
  font-size: 0.6875rem;
  color: var(--green);
  font-weight: 600;
}

.dash-chart {
  background: var(--navy-850);
  border: 1px solid var(--navy-700);
  border-radius: 12px;
  padding: 14px 12px 8px;
}
.dash-badge {
  position: absolute;
  top: -16px;
  right: -14px;
  background: var(--yellow);
  color: var(--navy-950);
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 0.8125rem;
  padding: 9px 15px;
  border-radius: 30px;
  box-shadow: 0 10px 26px -8px rgba(239, 206, 0, 0.6);
  transform: rotate(-3deg);
}

/* SVG chart shared */
.chart-line {
  fill: none;
  stroke: var(--yellow);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
}
.in-view .chart-line { animation: draw 1.6s var(--ease) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

.chart-fill { fill: url(#yfade); opacity: 0; }
.in-view .chart-fill { animation: fadein 1s var(--ease) 0.7s forwards; }
@keyframes fadein { to { opacity: 1; } }

.chart-grid { stroke: var(--navy-700); stroke-width: 1; }
.chart-base { fill: none; stroke: var(--navy-600); stroke-width: 2; stroke-dasharray: 5 5; }
.chart-dot { fill: var(--yellow); }
.chart-axis { fill: var(--slate-500); font-size: 9px; font-family: var(--font-body); }
.bar-before { fill: var(--navy-700); }
.bar-after { fill: var(--yellow); }
.in-view .bar-grow { transform-origin: bottom; animation: grow 800ms var(--ease) backwards; }
@keyframes grow { from { transform: scaleY(0); } }

/* --- 8. TRUST ------------------------------------------------------------ */
.trust { padding-block: 84px; }
.trust-line {
  text-align: center;
  font-size: 0.9375rem;
  color: var(--slate-500);
  margin-bottom: 34px;
}
.logo-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 56px;
  flex-wrap: wrap;
  margin-bottom: 72px;
}
.logo-ph {
  height: 26px;
  width: 108px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.09);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  color: var(--slate-500);
  text-transform: uppercase;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.logo-ph:hover { background: rgba(255, 255, 255, 0.16); color: var(--slate-300); }

.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}
.stat { text-align: center; padding-inline: 20px; }
.stat + .stat { border-left: 1px solid var(--navy-700); }
.stat b {
  display: block;
  font-family: var(--font-head);
  font-size: clamp(2.25rem, 4vw, 3.25rem);
  font-weight: 800;
  color: var(--yellow);
  line-height: 1;
  margin-bottom: 10px;
  letter-spacing: -0.03em;
}
.stat span { font-size: 0.9375rem; color: var(--slate-300); }

/* --- 9. BENTO SERVICES --------------------------------------------------- */
.bento {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.card {
  background: var(--navy-800);
  border: 1px solid var(--navy-700);
  border-radius: var(--radius);
  padding: 32px;
  position: relative;
  overflow: hidden;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
  display: flex;
  flex-direction: column;
}
.card:hover {
  transform: translateY(-4px);
  border-color: rgba(239, 206, 0, 0.42);
}
.card.wide { grid-column: span 2; }
.card-ico {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--yellow-dim);
  border: 1px solid rgba(239, 206, 0, 0.22);
  display: grid;
  place-items: center;
  margin-bottom: 22px;
  flex-shrink: 0;
}
.card-ico svg { width: 22px; height: 22px; stroke: var(--yellow); fill: none; stroke-width: 1.8; }
.card h3 { margin-bottom: 12px; font-size: 1.25rem; }
.card p { font-size: 0.9375rem; margin-bottom: 22px; flex-grow: 1; }
.card .link-y { margin-top: auto; align-self: flex-start; }

.card-viz {
  position: absolute;
  right: 24px;
  bottom: 24px;
  width: 168px;
  opacity: 0.55;
  pointer-events: none;
}
.card.wide p { max-width: 62%; }

/* --- 10. CASE STUDIES ---------------------------------------------------- */
.case {
  background: var(--navy-800);
  border: 1px solid var(--navy-700);
  border-radius: 20px;
  padding: 40px;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 44px;
  align-items: center;
}
.case + .case { margin-top: 24px; }
.tag {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--yellow);
  background: var(--yellow-dim);
  border: 1px solid rgba(239, 206, 0, 0.22);
  padding: 5px 12px;
  border-radius: 30px;
  margin-bottom: 18px;
}
.case h3 { font-size: 1.75rem; margin-bottom: 22px; }
.case dl { display: grid; gap: 14px; }
.case dt {
  font-weight: 700;
  color: var(--white);
  font-size: 0.875rem;
  margin-bottom: 3px;
}
.case dd { font-size: 0.9375rem; color: var(--slate-300); }
.case-chart {
  background: var(--navy-850);
  border: 1px solid var(--navy-700);
  border-radius: 14px;
  padding: 18px 16px 10px;
  position: relative;
}
.case-pill {
  position: absolute;
  top: 14px;
  right: 14px;
  background: rgba(40, 199, 111, 0.14);
  border: 1px solid rgba(40, 199, 111, 0.35);
  color: var(--green);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 4px 11px;
  border-radius: 30px;
}

/* --- 11. PROCESS --------------------------------------------------------- */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  position: relative;
}
.steps::before {
  content: "";
  position: absolute;
  top: 26px;
  left: 8%;
  right: 8%;
  height: 2px;
  background: var(--navy-700);
}
.steps::after {
  content: "";
  position: absolute;
  top: 26px;
  left: 8%;
  height: 2px;
  width: 0;
  background: var(--yellow);
  transition: width 1.6s var(--ease);
}
.steps.in-view::after { width: 84%; }
.step { position: relative; z-index: 1; }
.step i {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 2px solid var(--yellow);
  background: var(--navy-950);
  font-family: var(--font-head);
  font-style: normal;
  font-weight: 800;
  color: var(--yellow);
  font-size: 1rem;
  margin-bottom: 22px;
}
.step h3 { font-size: 1.1875rem; margin-bottom: 10px; }
.step p { font-size: 0.9375rem; max-width: 270px; }

/* --- 12. TESTIMONIALS ---------------------------------------------------- */
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.quote {
  background: var(--navy-800);
  border: 1px solid var(--navy-700);
  border-radius: var(--radius);
  padding: 32px;
  position: relative;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.quote:hover { transform: translateY(-4px); border-color: rgba(239, 206, 0, 0.42); }
.quote .mark {
  font-family: var(--font-head);
  font-size: 5rem;
  line-height: 0.6;
  color: var(--yellow);
  opacity: 0.16;
  margin-bottom: 6px;
  display: block;
}
.stars { display: flex; gap: 3px; margin-bottom: 16px; }
.stars svg { width: 15px; height: 15px; fill: var(--yellow); }
.quote p {
  color: var(--slate-100);
  font-size: 1.0625rem;
  line-height: 1.6;
  margin-bottom: 26px;
}
.who {
  display: flex;
  align-items: center;
  gap: 13px;
  border-top: 1px solid var(--navy-700);
  padding-top: 20px;
}
.avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--navy-700);
  display: grid;
  place-items: center;
  font-family: var(--font-head);
  font-weight: 800;
  color: var(--yellow);
  font-size: 0.9375rem;
  flex-shrink: 0;
}
.who b { display: block; color: var(--white); font-size: 0.9375rem; }
.who span { font-size: 0.8125rem; color: var(--slate-500); }

/* --- 13. FAQ ------------------------------------------------------------- */
.faq { max-width: 820px; margin-inline: auto; }
.faq-item { border-bottom: 1px solid var(--navy-700); }
.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  text-align: left;
  padding-block: 24px;
  font-family: var(--font-head);
  font-size: 1.1875rem;
  font-weight: 700;
  color: var(--white);
  transition: color var(--dur) var(--ease);
}
.faq-q:hover { color: var(--yellow); }
.faq-item.open .faq-q { color: var(--yellow); }
.faq-q i {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--navy-700);
  display: grid;
  place-items: center;
  position: relative;
  transition: transform 300ms var(--ease), border-color var(--dur) var(--ease);
}
.faq-q i::before,
.faq-q i::after {
  content: "";
  position: absolute;
  background: var(--yellow);
  border-radius: 2px;
}
.faq-q i::before { width: 12px; height: 2px; }
.faq-q i::after { width: 2px; height: 12px; }
.faq-item.open .faq-q i { transform: rotate(135deg); border-color: rgba(239, 206, 0, 0.5); }
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 320ms var(--ease);
}
.faq-a p { padding-bottom: 26px; font-size: 1rem; max-width: 700px; }
.faq-foot { text-align: center; margin-top: 44px; font-size: 0.9375rem; }

/* --- 14. FINAL CTA ------------------------------------------------------- */
.cta-band { padding-block: 160px; overflow: hidden; text-align: center; }
.cta-band .glow {
  width: 900px;
  height: 520px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.13;
}
.cta-inner { max-width: 780px; margin-inline: auto; position: relative; z-index: 1; }
.cta-inner h2 { margin-bottom: 22px; }
.cta-inner .lead { margin-inline: auto; margin-bottom: 34px; }
.cta-note {
  margin-top: 24px;
  font-size: 0.875rem;
  color: var(--slate-500);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.cta-note svg { width: 16px; height: 16px; color: var(--yellow); }

/* --- 15. FOOTER ---------------------------------------------------------- */
.footer {
  position: relative;
  background: var(--navy-990);
  padding-top: 84px;
}
/* thin gold hairline + soft bloom, separating the footer from the page */
.footer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg,
              transparent,
              rgba(239, 206, 0, 0.25) 16%,
              rgba(239, 206, 0, 0.85) 50%,
              rgba(239, 206, 0, 0.25) 84%,
              transparent);
}
.footer::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 130px;
  background: radial-gradient(58% 100% at 50% 0%,
              rgba(239, 206, 0, 0.085), transparent 72%);
  pointer-events: none;
}
.footer > .container { position: relative; }

.foot-grid {
  display: grid;
  grid-template-columns: 1.65fr 1fr 1.12fr 1fr 1.3fr;
  gap: 44px 36px;
  padding-bottom: 58px;
}

/* --- brand column --- */
.foot-brand .logo { margin-bottom: 20px; }
.foot-tag {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--slate-300);
  max-width: 270px;
}
.socials { display: flex; gap: 10px; margin-top: 24px; }
.socials a {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  border: 1px solid var(--navy-700);
  display: grid;
  place-items: center;
  color: var(--slate-300);
  transition: color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              background-color var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.socials a:hover {
  color: var(--navy-950);
  background: var(--yellow);
  border-color: var(--yellow);
  transform: translateY(-2px);
}
.socials svg { width: 17px; height: 17px; }

/* --- link columns --- */
.foot-col h4,
.foot-contact h4 {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--white);
  margin-bottom: 18px;
}
.foot-col h4::after,
.foot-contact h4::after {
  content: "";
  display: block;
  width: 18px;
  height: 2px;
  margin-top: 9px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--yellow), rgba(239, 206, 0, 0));
}
.foot-col li { margin-bottom: 10px; }
.foot-col a {
  font-size: 0.9375rem;
  color: var(--slate-300);
  transition: color var(--dur) var(--ease), padding-left var(--dur) var(--ease);
}
.foot-col a:hover { color: var(--yellow); padding-left: 4px; }

/* --- contact column --- */
.foot-contact { display: flex; flex-direction: column; align-items: flex-start; }
.foot-mail {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.9375rem;
  color: var(--slate-300);
  overflow-wrap: anywhere;
  transition: color var(--dur) var(--ease);
}
.foot-mail:hover { color: var(--yellow); }
.foot-mail svg { width: 17px; height: 17px; flex-shrink: 0; color: var(--yellow); }

.foot-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
  align-self: stretch;
  max-width: 240px;
}
.foot-actions .btn { width: 100%; white-space: normal; }
.foot-wa svg { width: 16px; height: 16px; flex-shrink: 0; color: #25d366; }
.foot-wa:hover svg { color: #3ce27c; }

/* --- bottom bar --- */
.foot-bar {
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  padding-block: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 0.8125rem;
  color: var(--slate-500);
}
.foot-bar a { color: var(--slate-500); transition: color var(--dur) var(--ease); }
.foot-bar a:hover { color: var(--yellow); }
.foot-bar nav { display: flex; gap: 24px; }

/* --- 16. WHATSAPP FLOAT -------------------------------------------------- */
.wa-float {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 90;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25d366;
  display: grid;
  place-items: center;
  box-shadow: 0 10px 30px -6px rgba(37, 211, 102, 0.5);
  transition: transform var(--dur) var(--ease);
}
.wa-float:hover { transform: scale(1.08); }
.wa-float svg { width: 29px; height: 29px; fill: #fff; }

/* --- 17. INNER PAGE HERO ------------------------------------------------- */
.page-hero {
  padding-top: 160px;
  padding-bottom: 56px;
  overflow: hidden;
  border-bottom: 1px solid var(--navy-800);
}
.page-hero .glow {
  width: 640px;
  height: 460px;
  top: -160px;
  right: -140px;
  opacity: 0.08;
}
.page-hero .inner { max-width: 800px; position: relative; z-index: 1; }
.page-hero h1 { font-size: clamp(2rem, 4.4vw, 3.5rem); margin-bottom: 22px; }
.page-hero .btn-row { margin-top: 32px; }

.crumbs {
  font-size: 0.8125rem;
  color: var(--slate-500);
  margin-bottom: 20px;
  display: flex;
  gap: 8px;
  align-items: center;
}
.crumbs a:hover { color: var(--yellow); }

/* Feature list (service pages) */
.feat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.feat {
  background: var(--navy-800);
  border: 1px solid var(--navy-700);
  border-radius: var(--radius);
  padding: 28px;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.feat:hover { border-color: rgba(239, 206, 0, 0.42); transform: translateY(-3px); }
.feat h3 { font-size: 1.125rem; margin-bottom: 10px; }
.feat p { font-size: 0.9375rem; }
.feat .num {
  font-family: var(--font-head);
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--yellow);
  letter-spacing: 0.08em;
  display: block;
  margin-bottom: 12px;
}

/* Deliverables list */
.check-list { display: grid; gap: 14px; }
.check-list li {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  font-size: 1rem;
}
.check-list svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 2px;
  stroke: var(--yellow);
  fill: none;
  stroke-width: 2.2;
}
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

/* Related services */
.rel-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.rel {
  background: var(--navy-800);
  border: 1px solid var(--navy-700);
  border-radius: var(--radius-sm);
  padding: 22px;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.rel:hover { border-color: rgba(239, 206, 0, 0.42); transform: translateY(-3px); }
.rel b {
  display: block;
  font-family: var(--font-head);
  color: var(--white);
  font-size: 1rem;
  margin-bottom: 7px;
}
.rel span { font-size: 0.8125rem; color: var(--slate-500); }

/* --- 18. SCROLL REVEAL --------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 500ms var(--ease), transform 500ms var(--ease);
}
.reveal.in-view { opacity: 1; transform: none; }

/* --- 19. RESPONSIVE ------------------------------------------------------ */
@media (max-width: 1024px) {
  :root { --section-y: 100px; }
  .hero-grid { grid-template-columns: 1fr; gap: 56px; }
  .dash { transform: none; }
  .case { grid-template-columns: 1fr; gap: 32px; padding: 32px; }
  .bento { grid-template-columns: repeat(2, 1fr); }
  .card.wide { grid-column: span 2; }
  .card.wide p { max-width: 100%; }
  .card-viz { display: none; }
  .steps { grid-template-columns: repeat(2, 1fr); gap: 40px 28px; }
  .steps::before, .steps::after { display: none; }
  .quotes { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .rel-grid { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 860px) {
  .nav-links, .nav-cta .btn-ghost { display: none; }
  .burger { display: flex; }
  .nav-cta { margin-left: auto; }
  .nav .container { gap: 12px; }
  .nav-cta .btn { padding: 9px 15px; font-size: 0.8125rem; min-height: 38px; }
}

@media (max-width: 720px) {
  :root { --section-y: 72px; --gutter: 20px; }
  body { font-size: 16px; }
  .hero { padding-top: 128px; padding-bottom: 72px; }
  .page-hero { padding-top: 120px; padding-bottom: 64px; }
  .section-head { margin-bottom: 40px; }
  .btn-row .btn { width: 100%; }
  .bento { grid-template-columns: 1fr; }
  .card.wide { grid-column: span 1; }
  .feat-grid { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr; gap: 32px; }
  .stat + .stat { border-left: none; border-top: 1px solid var(--navy-700); padding-top: 32px; }
  .steps { grid-template-columns: 1fr; gap: 32px; }
  .logo-strip { gap: 20px 32px; }
  .card, .quote, .feat { padding: 24px; }
  .case { padding: 24px; }
  .cta-band { padding-block: 96px; }
  .foot-grid { grid-template-columns: 1fr; }
  .rel-grid { grid-template-columns: 1fr; }
  .foot-bar { flex-direction: column; align-items: flex-start; }
  .wa-float { width: 52px; height: 52px; right: 16px; bottom: 16px; }
}

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

/* ==========================================================================
   20. HEADER UPDATE: logo image, Services dropdown
   ========================================================================== */
.logo img {
  height: 30px;
  width: auto;
  flex-shrink: 0;
}
.logo span { white-space: nowrap; }

.has-drop { position: relative; }

.drop-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9375rem;
  color: var(--slate-300);
  padding-block: 6px;
  position: relative;
  transition: color var(--dur) var(--ease);
}
.drop-toggle::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 0;
  background: var(--yellow);
  transition: width var(--dur) var(--ease);
}
.has-drop:hover .drop-toggle,
.has-drop.open .drop-toggle { color: var(--white); }
.has-drop:hover .drop-toggle::after,
.has-drop.open .drop-toggle::after { width: 100%; }
.drop-toggle.current { color: var(--white); }
.drop-toggle.current::after { width: 100%; }

.caret {
  width: 10px;
  height: 7px;
  transition: transform var(--dur) var(--ease);
}
.has-drop:hover .caret,
.has-drop.open .caret { transform: rotate(180deg); }

/* invisible bridge so the menu doesn't close when the cursor travels down */
.has-drop::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 16px;
}

.drop-menu {
  position: absolute;
  top: calc(100% + 16px);
  left: -16px;
  min-width: 310px;
  background: var(--navy-800);
  border: 1px solid var(--navy-700);
  border-radius: 14px;
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 200ms var(--ease), transform 200ms var(--ease), visibility 200ms;
  box-shadow: 0 26px 60px -18px rgba(0, 0, 0, 0.8);
  z-index: 10;
}
.has-drop:hover .drop-menu,
.has-drop.open .drop-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.drop-menu a {
  display: block;
  padding: 11px 14px;
  border-radius: 9px;
  transition: background-color var(--dur) var(--ease);
}
.drop-menu a::after { display: none; }
.drop-menu a b {
  display: block;
  font-family: var(--font-head);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 2px;
  transition: color var(--dur) var(--ease);
}
.drop-menu a span {
  font-size: 0.8125rem;
  color: var(--slate-500);
  line-height: 1.4;
}
.drop-menu a:hover { background: var(--navy-700); }
.drop-menu a:hover b { color: var(--yellow); }

/* Mobile menu sub-group */
.mobile-menu { overflow-y: auto; }
.mm-group { border-bottom: 1px solid var(--navy-800); }
.mm-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-head);
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--white);
  padding-block: 16px;
  text-align: left;
}
.mm-toggle .caret { width: 14px; height: 9px; color: var(--yellow); }
.mm-group.open .caret { transform: rotate(180deg); }
.mm-sub {
  max-height: 0;
  overflow: hidden;
  transition: max-height 300ms var(--ease);
}
.mm-sub a {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  color: var(--slate-300);
  padding: 12px 0 12px 18px;
  border-bottom: none;
  border-left: 2px solid var(--navy-700);
  margin-left: 4px;
}
.mm-sub a:last-child { padding-bottom: 20px; }

/* ==========================================================================
   21. MODALS: Book a Call / Free SEO Audit
   ========================================================================== */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(3, 3, 18, 0.74);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 240ms var(--ease), visibility 240ms;
  overflow-y: auto;
}
.modal-backdrop.open { opacity: 1; visibility: visible; }

.modal {
  background: var(--navy-900);
  border: 1px solid var(--navy-700);
  border-radius: 20px;
  width: 100%;
  max-width: 540px;
  padding: 32px;
  position: relative;
  transform: translateY(18px) scale(0.985);
  transition: transform 260ms var(--ease);
  box-shadow: 0 40px 90px -24px rgba(0, 0, 0, 0.8);
  margin: auto;
}
.modal-backdrop.open .modal { transform: none; }

.modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 6px;
}
.modal h3 { font-size: 1.5rem; }
.modal .modal-sub {
  font-size: 0.9375rem;
  color: var(--slate-300);
  margin-bottom: 26px;
}
.modal-close {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--navy-700);
  display: grid;
  place-items: center;
  color: var(--slate-300);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.modal-close:hover { color: var(--yellow); border-color: rgba(239, 206, 0, 0.5); }
.modal-close svg { width: 15px; height: 15px; }

/* Form fields */
.field { margin-bottom: 16px; }
.field label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--slate-100);
  margin-bottom: 7px;
}
.field label .req { color: var(--yellow); }
.field input,
.field select,
.field textarea {
  width: 100%;
  background: var(--navy-950);
  border: 1px solid var(--navy-700);
  border-radius: 10px;
  padding: 12px 14px;
  color: var(--white);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.field textarea { min-height: 108px; resize: vertical; line-height: 1.55; }
.field input::placeholder,
.field textarea::placeholder { color: var(--slate-500); }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--yellow);
  box-shadow: 0 0 0 3px rgba(239, 206, 0, 0.16);
}
.field select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23A9B0C9' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 8px;
  padding-right: 38px;
  cursor: pointer;
}
.field select option { background: var(--navy-900); color: var(--white); }
.field input[type="datetime-local"] { color-scheme: dark; }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.field .err {
  display: none;
  font-size: 0.75rem;
  color: #ff7a7a;
  margin-top: 6px;
}
.field.invalid input,
.field.invalid select,
.field.invalid textarea { border-color: #ff7a7a; }
.field.invalid .err { display: block; }

.modal form .btn { width: 100%; margin-top: 6px; }
.modal-note {
  font-size: 0.75rem;
  color: var(--slate-500);
  text-align: center;
  margin-top: 14px;
  line-height: 1.5;
}

/* Success state */
.modal-success { display: none; text-align: center; padding: 8px 0 4px; }
.modal.done .modal-form,
.modal.done .modal-head h3,
.modal.done .modal-sub { display: none; }
.modal.done .modal-success { display: block; }
.success-ico {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: var(--yellow-dim);
  border: 1px solid rgba(239, 206, 0, 0.3);
  display: grid;
  place-items: center;
  margin: 0 auto 22px;
}
.success-ico svg { width: 30px; height: 30px; stroke: var(--yellow); fill: none; stroke-width: 2.4; }
.modal-success h3 { font-size: 1.5rem; margin-bottom: 12px; }
.modal-success p { font-size: 0.9375rem; margin-bottom: 24px; }
.modal-success .btn { width: 100%; }
.wa-fallback { display: none; margin-bottom: 12px; }
.wa-fallback.show { display: block; }

@media (max-width: 720px) {
  .modal { padding: 24px; border-radius: 16px; }
  .modal-backdrop { padding: 14px; align-items: flex-start; }
  .field-row { grid-template-columns: 1fr; gap: 0; }
  .modal h3, .modal-success h3 { font-size: 1.25rem; }
}

/* ==========================================================================
   22. CONTACT METHOD TOGGLE + FORM STATES
   ========================================================================== */
.seg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  background: var(--navy-950);
  border: 1px solid var(--navy-700);
  border-radius: 12px;
  padding: 5px;
}
.field .seg label {
  display: block;
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  cursor: pointer;
  position: relative;
}
.seg input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.seg span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 8px;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--slate-300);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
  white-space: nowrap;
}
.seg span svg { width: 16px; height: 16px; flex-shrink: 0; }
.seg label:hover span { color: var(--white); }
.seg input:checked + span {
  background: var(--yellow);
  color: var(--navy-950);
}
.seg input:checked + span svg { color: var(--navy-950); }
.seg input:focus-visible + span {
  box-shadow: 0 0 0 3px rgba(239, 206, 0, 0.35);
}

/* Conditional field */
.field.is-hidden { display: none; }

/* Submit button working state */
.modal form .btn:disabled {
  opacity: 0.62;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Form-level error */
.form-error {
  display: none;
  font-size: 0.8125rem;
  color: #ff7a7a;
  text-align: center;
  margin-top: 12px;
  line-height: 1.5;
}
.form-error.show { display: block; }
.form-error a { color: var(--yellow); font-weight: 600; }

/* ==========================================================================
   23. HERO CHART: one-time page-load animation
   Scoped to the hero only. Overrides the generic .in-view chart rules so the
   scroll observer cannot re-trigger it; the .play class is added once by JS
   on page load and never removed.
   ========================================================================== */
.hero .dash-chart .chart-line {
  animation: none;
  stroke-dashoffset: 1000;
}
.hero .dash-chart .chart-fill {
  animation: none;
  opacity: 0;
}
.hero .dash-chart .chart-dot {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

.hero .dash-chart.play .chart-line {
  animation: draw 2200ms cubic-bezier(0.33, 0.9, 0.35, 1) forwards;
}
.hero .dash-chart.play .chart-fill {
  animation: fadein 1100ms var(--ease) 850ms forwards;
}
.hero .dash-chart.play .chart-dot {
  animation: dot-pop 520ms var(--ease) 2050ms forwards;
}

@keyframes dot-pop {
  from { opacity: 0; transform: scale(0.2); }
  60%  { opacity: 1; transform: scale(1.35); }
  to   { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .hero .dash-chart .chart-line { stroke-dashoffset: 0; }
  .hero .dash-chart .chart-fill,
  .hero .dash-chart .chart-dot { opacity: 1; }
}

/* ==========================================================================
   24. CLIENT LOGO STRIP
   Logos are normalised to a white silhouette so mixed-colour brand marks look
   uniform on the dark section; hover restores the original colour.
   If a logo file is missing, .no-logo swaps in a styled text wordmark.
   ========================================================================== */
.client {
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.client img {
  height: 100%;
  width: auto;
  max-width: 158px;
  object-fit: contain;
  filter: grayscale(1) brightness(0) invert(1);
  opacity: 0.5;
  transition: filter 300ms var(--ease), opacity 300ms var(--ease);
}
.client:hover img {
  filter: none;
  opacity: 1;
}

.client-name {
  display: none;
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--slate-500);
  white-space: nowrap;
  transition: color var(--dur) var(--ease);
}
.client:hover .client-name { color: var(--slate-100); }

.client.no-logo img { display: none; }
.client.no-logo .client-name { display: block; }

@media (max-width: 720px) {
  .client { height: 26px; }
  .client img { max-width: 118px; }
  .client-name { font-size: 0.875rem; }
}

/* ==========================================================================
   25. CASE STUDY CHARTS: slow one-time animation on scroll into view
   Scoped with `.case` so only the homepage case-study charts are affected;
   the service-page .case-chart visuals keep their existing behaviour.
   The `.play` class is added once by JS and never removed, so nothing replays.
   ========================================================================== */
.case .case-chart .chart-line {
  animation: none;
  stroke-dashoffset: 1000;
}
.case .case-chart .chart-fill {
  animation: none;
  opacity: 0;
}
.case .case-chart .chart-dot {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}
.case .case-chart .bar-grow {
  animation: none;
  transform: scaleY(0);
  transform-box: fill-box;
  transform-origin: bottom;
}

/* Line chart, a gradual 2.6s climb from Month 1 to Month 12 */
.case .case-chart.play .chart-line {
  animation: draw 2600ms cubic-bezier(0.32, 0.86, 0.36, 1) forwards;
}
.case .case-chart.play .chart-fill {
  animation: fadein 1300ms var(--ease) 950ms forwards;
}
.case .case-chart.play .chart-dot {
  animation: dot-pop 520ms var(--ease) 2450ms forwards;
}

/* Bar chart, bars rise one after another, Q1 through Q5.
   Per-bar animation-delay lives inline in the HTML (0ms to 1980ms). */
.case .case-chart.play .bar-grow {
  animation: bar-rise 720ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes bar-rise {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}

@media (prefers-reduced-motion: reduce) {
  .case .case-chart .chart-line { stroke-dashoffset: 0; }
  .case .case-chart .chart-fill,
  .case .case-chart .chart-dot { opacity: 1; }
  .case .case-chart .bar-grow { transform: scaleY(1); }
}

/* ==========================================================================
   26. FIVERR PROFILES SECTION
   Fiverr green is the dominant accent here so the band reads as distinct,
   while spacing, type and card geometry match the rest of the site.
   ========================================================================== */
:root {
  --fiverr: #1dbf73;
  --fiverr-dim: rgba(29, 191, 115, 0.12);
  --fiverr-line: rgba(29, 191, 115, 0.28);
}

.fiverr-sec {
  background: #0c0c33;
  border-top: 1px solid var(--navy-700);
  border-bottom: 1px solid var(--navy-700);
  overflow: hidden;
}
.fiverr-glow {
  position: absolute;
  width: 820px;
  height: 420px;
  top: -140px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
  filter: blur(110px);
  background: var(--fiverr);
  opacity: 0.1;
  pointer-events: none;
}
.fiverr-sec .container { position: relative; z-index: 1; }

/* Brand mark */
.fiverr-brand {
  display: flex;
  justify-content: center;
  margin-bottom: 28px;
}
.fiverr-brand img { height: 58px; width: auto; }
.fiverr-mark {
  display: none;
  font-family: var(--font-head);
  font-size: 3.25rem;
  font-weight: 800;
  letter-spacing: -0.045em;
  color: var(--white);
  line-height: 1;
}
.fiverr-mark i { color: var(--fiverr); font-style: normal; }
.fiverr-brand.no-logo img { display: none; }
.fiverr-brand.no-logo .fiverr-mark { display: block; }

.fiverr-sec .eyebrow { color: var(--fiverr); }

/* ---- Marquee ---- */
.fv-marquee {
  position: relative;
  overflow: hidden;
  margin-top: 60px;
  width: 100%;
  max-width: 1440px;        /* 4 cards x 360px pitch */
  margin-inline: auto;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
}
.fv-track {
  display: flex;
  width: max-content;
  animation: fv-scroll 62s linear infinite;
}
.fv-set { display: flex; }
.fv-marquee:hover .fv-track { animation-play-state: paused; }

@keyframes fv-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---- Profile card ---- */
.fv-card {
  flex: 0 0 auto;
  width: 340px;
  margin-right: 20px;
  background: var(--navy-800);
  border: 1px solid var(--navy-700);
  border-radius: var(--radius);
  padding: 28px;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.fv-card:hover {
  border-color: var(--fiverr-line);
  transform: translateY(-4px);
}

.fv-top {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 22px;
}
.fv-avatar {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.0625rem;
  color: #07211a;
  background: linear-gradient(145deg, var(--fiverr), var(--fiverr));
  box-shadow: 0 0 0 2px rgba(29, 191, 115, 0.22);
}
.fv-id b {
  display: block;
  font-family: var(--font-head);
  font-size: 1.1875rem;
  font-weight: 800;
  color: var(--white);
  letter-spacing: -0.01em;
  margin-bottom: 7px;
}

.fv-level {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--fiverr);
  background: var(--fiverr-dim);
  border: 1px solid var(--fiverr-line);
  padding: 4px 11px;
  border-radius: 30px;
  white-space: nowrap;
}
.fv-level svg { width: 13px; height: 13px; fill: var(--fiverr); }

.fv-rating {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--navy-700);
}
.fv-stars { display: flex; gap: 2px; }
.fv-stars svg { width: 15px; height: 15px; fill: var(--fiverr); }
.fv-rating b {
  font-family: var(--font-head);
  font-size: 1.0625rem;
  font-weight: 800;
  color: var(--white);
}

.fv-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  text-align: center;
}
.fv-stats dt {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--slate-500);
  margin-bottom: 7px;
}
.fv-stats dd {
  font-family: var(--font-head);
  font-size: 1.1875rem;
  font-weight: 800;
  color: var(--white);
  letter-spacing: -0.01em;
}
.fv-stats div + div { border-left: 1px solid var(--navy-700); }

.fv-note {
  text-align: center;
  margin-top: 40px;
  font-size: 0.8125rem;
  color: var(--slate-500);
}

@media (max-width: 720px) {
  .fv-card { width: 286px; margin-right: 16px; padding: 22px; }
  .fv-marquee { margin-top: 36px; }
  .fiverr-brand img { height: 42px; }
  .fiverr-mark { font-size: 2.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  .fv-track { animation: none; }
  .fv-marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .fv-set[aria-hidden="true"] { display: none; }
}

/* ==========================================================================
   27. GSC SCREENSHOT SHOWCASE (replaces the plain case-studies button)
   A fanned stack of browser-framed screenshots. Each card is rotated and
   overlapped; hovering straightens it, lifts it and brings it to the front.
   ========================================================================== */
.gsc-showcase {
  margin-top: 64px;
  text-align: center;
}
.gsc-head { max-width: 620px; margin: 0 auto 8px; }
.gsc-head h3 {
  font-size: clamp(1.375rem, 2.4vw, 1.75rem);
  margin-bottom: 12px;
}
.gsc-head p { font-size: 0.9375rem; }

.gsc-link { display: block; }

.gsc-fan {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding: 46px 0 26px;
}

.gsc-shot {
  position: relative;
  z-index: var(--z);
  flex: 0 0 auto;
  width: 250px;
  margin-inline: -28px;
  background: var(--navy-800);
  border: 1px solid var(--navy-700);
  border-radius: 12px;
  overflow: hidden;
  transform: rotate(var(--r)) translateY(var(--y));
  transform-origin: center bottom;
  box-shadow: 0 22px 48px -20px rgba(0, 0, 0, 0.85);
  transition: transform 340ms var(--ease), box-shadow 340ms var(--ease),
              border-color 340ms var(--ease);
}
.gsc-shot:hover {
  transform: rotate(0deg) translateY(-18px) scale(1.07);
  z-index: 30;
  border-color: rgba(239, 206, 0, 0.45);
  box-shadow: 0 34px 72px -18px rgba(0, 0, 0, 0.95);
}

/* Browser chrome */
.gsc-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--navy-850);
  border-bottom: 1px solid var(--navy-700);
}
.gsc-dots { display: flex; gap: 4px; flex-shrink: 0; }
.gsc-dots i { width: 7px; height: 7px; border-radius: 50%; display: block; }
.gsc-dots i:nth-child(1) { background: #ff5f57; }
.gsc-dots i:nth-child(2) { background: #febc2e; }
.gsc-dots i:nth-child(3) { background: #28c840; }
.gsc-url {
  flex: 1;
  min-width: 0;
  background: var(--navy-950);
  border: 1px solid var(--navy-700);
  border-radius: 20px;
  padding: 3px 9px;
  font-size: 8.5px;
  line-height: 1.4;
  color: var(--slate-500);
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Screenshot area */
.gsc-img {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--navy-850);
}
.gsc-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.gsc-ph {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px;
}
.gsc-ph svg { width: 78px; height: 42px; opacity: 0.65; }
.gsc-ph span {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--slate-500);
}
.gsc-img.no-logo img { display: none; }
.gsc-img.no-logo .gsc-ph { display: flex; }

/* Stat badge, matches the +214% / +87% pills used above */
.gsc-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(40, 199, 111, 0.16);
  border: 1px solid rgba(40, 199, 111, 0.4);
  color: var(--green);
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 30px;
  white-space: nowrap;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.gsc-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--yellow);
  transition: gap var(--dur) var(--ease);
}
.gsc-cta svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2.2; }
.gsc-link:hover .gsc-cta { gap: 14px; }

.gsc-caption {
  margin-top: 14px;
  font-size: 0.75rem;
  color: var(--slate-500);
}

@media (max-width: 900px) {
  .gsc-fan {
    overflow-x: auto;
    justify-content: flex-start;
    gap: 14px;
    padding: 24px var(--gutter);
    -webkit-overflow-scrolling: touch;
  }
  .gsc-shot {
    width: 232px;
    margin-inline: 0;
    transform: none;
  }
  .gsc-shot:hover { transform: translateY(-6px); }
  .gsc-showcase { margin-top: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .gsc-shot, .gsc-shot:hover { transition: none; }
}

/* ==========================================================================
   28. REVIEWS SLIDER
   Same marquee mechanics and speed as the Fiverr strip. The .quote card
   design itself is unchanged; it just gets a fixed width inside the track.
   ========================================================================== */
.rv-marquee {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
}
.rv-track {
  display: flex;
  width: max-content;
  animation: rv-scroll 69s linear infinite;   /* 4000px set / 58px per sec */
  padding-block: 6px;
}
.rv-set { display: flex; align-items: stretch; }
.rv-marquee:hover .rv-track { animation-play-state: paused; }

@keyframes rv-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.rv-set .quote {
  flex: 0 0 auto;
  width: 380px;
  margin-right: 20px;
  display: flex;
  flex-direction: column;
}
.rv-set .quote p { flex-grow: 1; }

/* Circular photo inside the existing avatar chip */
.avatar { position: relative; overflow: hidden; }
.avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.avatar.no-logo img { display: none; }   /* falls back to the initials beneath */

@media (max-width: 720px) {
  .rv-set .quote { width: 300px; margin-right: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .rv-track { animation: none; }
  .rv-marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .rv-set[aria-hidden="true"] { display: none; }
}

/* The GSC showcase is now its own section, so it no longer needs the
   top margin it had when it sat at the foot of the results section.
   The heading is an <h2> now; keep the original size. */
#proof .gsc-showcase { margin-top: 0; }
.gsc-head h2 {
  font-size: clamp(1.375rem, 2.4vw, 1.75rem);
  margin-bottom: 12px;
}

/* ==========================================================================
   29. BRAND LOGO MARQUEE (trust bar)
   Pure CSS, GPU-friendly: only transform is animated.
   ========================================================================== */
.brand-marquee {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  /* vertical breathing room so the hover glow is not clipped by overflow:hidden.
     The negative margin cancels it, so the visual spacing is unchanged. */
  padding-block: 20px;
  margin-top: -20px;
  margin-bottom: 52px;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%);
}
.brand-track {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: brand-scroll 40s linear infinite;
}
.brand-set { display: flex; align-items: center; }
.brand-marquee:hover .brand-track { animation-play-state: paused; }

@keyframes brand-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.brand-item {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  /* Each logo now sits in its own chip: a hairline border and a tint barely
     lighter than the bg-900 section behind it. */
  padding: 13px 22px;
  margin-right: 18px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.075);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
              transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.brand-item:hover,
.brand-item:focus-visible {
  /* These logos are dark artwork, so revealing their real colours only works
     if the chip goes light underneath them. The gold glow moves onto the chip,
     where it is far more visible than a halo behind dark ink. */
  background: rgba(255, 255, 255, 0.94);
  border-color: rgba(239, 206, 0, 0.55);
  transform: translateY(-2px);
  box-shadow: 0 16px 34px -16px rgba(0, 0, 0, 0.85),
              0 0 24px -6px rgba(239, 206, 0, 0.4);
}
/* Without this the browser paints its own blue focus ring, which read as a
   stray box around one logo. */
.brand-item:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 3px;
}

.brand-item img {
  /* max-height + max-width (never a fixed height) so the aspect ratio is kept
     and every logo lands on the same 30px optical height. 300px is wide enough
     that the longest wordmark is no longer capped by width instead. */
  max-height: 30px;
  max-width: 300px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  transform: scale(1);
  transform-origin: center;
  /* These logos are dark artwork drawn for white backgrounds, so simply
     desaturating them left them almost invisible here. Inverting turns them
     into clean light monochrome; hover restores the real colours.
     Resting and hover use the SAME function list so the filter interpolates. */
  filter: grayscale(1) invert(1) brightness(0.95) drop-shadow(0 0 0 rgba(239, 206, 0, 0));
  opacity: 0.9;
  transition: filter 0.35s ease, opacity 0.35s ease, transform 0.35s ease;
}
.brand-item:hover img,
.brand-item:focus-visible img {
  filter: grayscale(0) invert(0) brightness(1) drop-shadow(0 0 14px rgba(239, 206, 0, 0.55));
  opacity: 1;
  transform: scale(1.06);
}

/* Text fallback until a logo file is dropped in */
.brand-name {
  display: none;
  font-family: var(--font-head);
  font-size: 0.9375rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--slate-500);
  white-space: nowrap;
  transform: scale(1);
  transition: color 0.35s ease, transform 0.35s ease;
}
.brand-item:hover .brand-name,
.brand-item:focus-visible .brand-name { color: var(--navy-950); }
.brand-item.no-logo img { display: none; }
.brand-item.no-logo .brand-name { display: block; }

/* Lockup: a mascot mark that is unreadable at 30px on its own, shown beside
   the brand name. Already light artwork, so it must not be inverted. */
.brand-item--lockup .brand-name { display: block; }
.brand-item--lockup img {
  filter: grayscale(1) invert(0) brightness(1.05) drop-shadow(0 0 0 rgba(239, 206, 0, 0));
}
.brand-item--lockup:hover img,
.brand-item--lockup:focus-visible img {
  filter: grayscale(0) invert(0) brightness(1.05) drop-shadow(0 0 14px rgba(239, 206, 0, 0.55));
}

@media (max-width: 720px) {
  .brand-marquee {
    padding-block: 16px;
    margin-top: -16px;
    margin-bottom: 36px;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 7%, #000 93%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, #000 7%, #000 93%, transparent 100%);
  }
  .brand-item { padding: 10px 16px; margin-right: 12px; gap: 9px; border-radius: 12px; }
  .brand-item img { max-height: 24px; max-width: 230px; }
  .brand-name { font-size: 0.8125rem; }
}

@media (prefers-reduced-motion: reduce) {
  .brand-track { animation: none; }
  .brand-marquee {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .brand-set[aria-hidden="true"] { display: none; }
}

/* ==========================================================================
   30. FIVERR PROFILES: static 3x2 grid (replaces the marquee)
   ========================================================================== */
.fv-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 56px;
}
.fv-grid .fv-card {
  position: relative;
  width: auto;
  margin-right: 0;
}

/* Fiverr avatar */
.fv-avatar {
  font-family: var(--font-head);
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: #ffffff;
  background: var(--fiverr);
  box-shadow: 0 0 0 3px rgba(29, 191, 115, 0.18);
}

/* Top performer ribbon, card 1 only */
.fv-top-badge {
  position: absolute;
  top: -10px;
  right: 18px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #07211a;
  background: linear-gradient(135deg, #ffe466, var(--yellow));
  padding: 5px 11px;
  border-radius: 30px;
  box-shadow: 0 6px 18px -6px rgba(239, 206, 0, 0.6);
  white-space: nowrap;
}
.fv-card.is-top { border-color: rgba(239, 206, 0, 0.42); }

/* Numbers count up, so lock the digit width to stop the layout jittering */
.fv-grid .fv-stats dd {
  font-size: 1.0625rem;
  font-variant-numeric: tabular-nums;
}
.fv-grid .fv-stats { gap: 6px; }
.fv-grid .fv-stats dt { font-size: 0.625rem; }

@media (max-width: 1024px) {
  .fv-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .fv-grid { grid-template-columns: 1fr; gap: 16px; margin-top: 36px; }
  .fv-grid .fv-card { padding: 22px; }
}

/* ==========================================================================
   31. SELLER PROFILE PAGE: reusable template
   Used by sellers/<name>/index.html. Every block here is content-agnostic,
   so a new seller page only needs different text and a different photo.
   ========================================================================== */
.fv-link { color: inherit; transition: color var(--dur) var(--ease); }
.fv-link:hover { color: var(--fiverr); }

.seller-hero {
  padding-top: 152px;
  padding-bottom: 72px;
  overflow: hidden;
  border-bottom: 1px solid var(--navy-800);
}
.seller-hero .glow {
  width: 660px; height: 460px; top: -180px; right: -140px;
  background: var(--fiverr); opacity: 0.09;
}
.seller-head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 34px;
}
.seller-photo {
  width: 148px;
  height: 148px;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
  background: var(--navy-800);
  box-shadow: 0 0 0 3px rgba(29, 191, 115, 0.35), 0 22px 50px -18px rgba(0, 0, 0, 0.8);
}
.seller-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 28%; display: block; }

.seller-id h1 { font-size: clamp(2rem, 4.2vw, 3rem); margin-bottom: 10px; }
.seller-sub {
  font-size: 1rem;
  color: var(--slate-300);
  margin-bottom: 16px;
}
.seller-sub b { color: var(--fiverr); font-weight: 700; }
.seller-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.seller-meta .fv-rating {
  border: none;
  padding: 0;
  margin: 0;
  gap: 8px;
}

/* Stats bar */
.seller-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 48px;
  position: relative;
  z-index: 1;
}
.seller-stat {
  background: var(--navy-800);
  border: 1px solid var(--navy-700);
  border-radius: var(--radius);
  padding: 26px 28px;
  text-align: center;
}
.seller-stat b {
  display: block;
  font-family: var(--font-head);
  font-size: clamp(1.75rem, 3.2vw, 2.375rem);
  font-weight: 800;
  color: var(--fiverr);
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 10px;
  font-variant-numeric: tabular-nums;
}
.seller-stat span { font-size: 0.875rem; color: var(--slate-300); }

/* Prose + highlight */
.seller-prose { max-width: 760px; }
.seller-prose p + p { margin-top: 18px; }

.seller-quote {
  max-width: 760px;
  margin-top: 34px;
  background: var(--fiverr-dim);
  border: 1px solid var(--fiverr-line);
  border-left: 3px solid var(--fiverr);
  border-radius: var(--radius);
  padding: 26px 30px;
}
.seller-quote p {
  font-size: 1.0625rem;
  color: var(--slate-100);
  line-height: 1.6;
}

/* Service tags */
.seller-tags { display: flex; flex-wrap: wrap; gap: 10px; }
.seller-tag {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--slate-100);
  background: var(--navy-800);
  border: 1px solid var(--navy-700);
  padding: 9px 16px;
  border-radius: 30px;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.seller-tag:hover { border-color: var(--fiverr-line); color: var(--fiverr); }

/* Security notice */
.seller-notice {
  display: flex;
  gap: 20px;
  max-width: 820px;
  background: linear-gradient(135deg, rgba(29, 191, 115, 0.08), rgba(239, 206, 0, 0.05));
  border: 1px solid var(--fiverr-line);
  border-radius: var(--radius);
  padding: 28px 30px;
}
.seller-notice-ico {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--fiverr-dim);
  border: 1px solid var(--fiverr-line);
  display: grid;
  place-items: center;
}
.seller-notice-ico svg { width: 22px; height: 22px; stroke: var(--fiverr); fill: none; stroke-width: 1.9; }
.seller-notice h3 { font-size: 1.125rem; margin-bottom: 10px; }
.seller-notice p { font-size: 0.9375rem; }

@media (max-width: 720px) {
  .seller-hero { padding-top: 116px; padding-bottom: 48px; }
  .seller-head { flex-direction: column; align-items: flex-start; gap: 22px; }
  .seller-photo { width: 112px; height: 112px; }
  .seller-stats { grid-template-columns: 1fr; gap: 14px; margin-top: 34px; }
  .seller-stat { padding: 20px; }
  .seller-notice { flex-direction: column; gap: 16px; padding: 22px; }
  .seller-quote { padding: 20px 22px; }
}

/* ==========================================================================
   32. SELLER PAGE: about layout, animated service tags, glass notice
   Reusable across every seller page; no per-seller CSS needed.
   ========================================================================== */

/* --- About: text beside the achievement callout --- */
.seller-about {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 48px;
  align-items: start;
  margin-top: 30px;
}
.seller-about .seller-prose { max-width: none; }

.seller-quote {
  margin-top: 0;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 46px -14px rgba(29, 191, 115, 0.45);
}
.seller-quote::before {
  content: "";
  position: absolute;
  width: 260px;
  height: 200px;
  top: -90px;
  right: -70px;
  border-radius: 50%;
  filter: blur(60px);
  background: var(--fiverr);
  opacity: 0.16;
  pointer-events: none;
}
.seller-quote .quote-label {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fiverr);
  margin-bottom: 14px;
}
.seller-quote .quote-label svg { width: 13px; height: 13px; fill: currentColor; }
.seller-quote p { position: relative; }

/* --- Service tags: icon + staggered reveal + hover glow --- */
.seller-tag {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  opacity: 0;
  transform: translateY(14px) scale(1);
  transition: opacity 460ms var(--ease), transform 460ms var(--ease),
              border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}
.seller-tag svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  stroke: var(--fiverr);
  fill: none;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 0.3s ease;
}
.seller-tags.in-view .seller-tag { opacity: 1; transform: translateY(0) scale(1); }
.seller-tags.in-view .seller-tag:nth-child(1) { transition-delay: 0ms; }
.seller-tags.in-view .seller-tag:nth-child(2) { transition-delay: 70ms; }
.seller-tags.in-view .seller-tag:nth-child(3) { transition-delay: 140ms; }
.seller-tags.in-view .seller-tag:nth-child(4) { transition-delay: 210ms; }
.seller-tags.in-view .seller-tag:nth-child(5) { transition-delay: 280ms; }
.seller-tags.in-view .seller-tag:nth-child(6) { transition-delay: 350ms; }
.seller-tags.in-view .seller-tag:nth-child(7) { transition-delay: 420ms; }
.seller-tags.in-view .seller-tag:nth-child(8) { transition-delay: 490ms; }
.seller-tags.in-view .seller-tag:nth-child(9)  { transition-delay: 560ms; }
.seller-tags.in-view .seller-tag:nth-child(10) { transition-delay: 630ms; }

.seller-tags.in-view .seller-tag:hover {
  transform: translateY(0) scale(1.08);
  color: var(--fiverr);
  border-color: var(--fiverr-line);
  box-shadow: 0 0 18px -2px rgba(29, 191, 115, 0.45);
  transition-delay: 0ms;
}

/* --- Security notice: glass panel with a pulsing shield --- */
.seller-notice {
  border-left: 3px solid var(--fiverr);
  background: linear-gradient(135deg, rgba(29, 191, 115, 0.1), rgba(18, 18, 74, 0.35));
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  border-right: 1px solid rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: 0 20px 50px -24px rgba(0, 0, 0, 0.8);
}
.seller-notice-ico { animation: shield-pulse 2.8s ease-in-out infinite; }

@keyframes shield-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(29, 191, 115, 0.34); }
  50%      { box-shadow: 0 0 0 10px rgba(29, 191, 115, 0); }
}

@media (max-width: 900px) {
  .seller-about { grid-template-columns: 1fr; gap: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .seller-tag { opacity: 1; transform: none; }
  .seller-notice-ico { animation: none; }
}

/* ==========================================================================
   33. SELLER PAGE: top disclaimer banner
   ========================================================================== */
/* The notice now sits inside the hero, directly under the stats row, so it
   reads as part of the profile block rather than a floating banner. */
.seller-hero .seller-notice {
  margin-top: 34px;
  position: relative;
  z-index: 1;
  max-width: none;
}

.seller-notice-body { flex: 1; min-width: 0; }

.notice-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.notice-title {
  font-family: var(--font-head);
  font-size: 1.1875rem;
  font-weight: 800;
  color: var(--white);
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.notice-brand { margin: 0; flex-shrink: 0; }
.notice-brand img { height: 26px; }
.notice-brand .fiverr-mark { font-size: 1.4375rem; }

.seller-notice .btn-row { margin-top: 20px; }
.seller-notice .btn svg { width: 17px; height: 17px; flex-shrink: 0; }

.btn-fv {
  background: var(--fiverr);
  color: #04170f;
  box-shadow: 0 6px 22px -8px rgba(29, 191, 115, 0.65);
}
.btn-fv:hover {
  background: #2ad684;
  transform: translateY(-2px);
  box-shadow: 0 12px 30px -8px rgba(29, 191, 115, 0.75);
}
.btn-fv svg { fill: currentColor; }

.notice-foot {
  margin-top: 14px;
  font-size: 0.8125rem;
  color: var(--slate-500);
}

@media (max-width: 720px) {
  .seller-hero .seller-notice { margin-top: 24px; }
  .notice-head { gap: 12px; }
  .notice-title { font-size: 1.0625rem; }
  .notice-brand img { height: 22px; }
  .notice-brand .fiverr-mark { font-size: 1.25rem; }
  .seller-notice .btn-row .btn { width: 100%; }
}

/* Seller page: stack the standout box beneath the bio instead of beside it */
.seller-about--stacked {
  display: block;
}
.seller-about--stacked .seller-quote {
  margin-top: 28px;
  max-width: 760px;
}

/* Lead paragraph above the service tags */
.seller-lead {
  max-width: 820px;
  margin-bottom: 30px;
  font-size: 1rem;
}
.seller-lead strong { color: var(--slate-100); font-weight: 700; }

/* ==========================================================================
   34. SELLER PAGE: "golden touch" variant
   Opt-in: add class="seller-gold" to <body>. Everything else on the seller
   template is untouched, so the other pages keep the green treatment.
   ========================================================================== */
.seller-gold .seller-hero .glow { background: var(--yellow); opacity: 0.1; }

.seller-gold .seller-photo {
  box-shadow: 0 0 0 3px rgba(239, 206, 0, 0.55),
              0 0 42px -6px rgba(239, 206, 0, 0.42),
              0 22px 50px -18px rgba(0, 0, 0, 0.8);
}
.seller-gold .seller-stat b { color: var(--yellow); }
.seller-gold .seller-stat {
  border-color: rgba(239, 206, 0, 0.22);
  background: linear-gradient(160deg, rgba(239, 206, 0, 0.05), var(--navy-800) 60%);
}
.seller-gold .seller-sub b { color: var(--yellow); }
.seller-gold .fv-stars svg { fill: var(--yellow); }
.seller-gold .seller-quote {
  border-left-color: var(--yellow);
  border-color: rgba(239, 206, 0, 0.28);
  background: rgba(239, 206, 0, 0.07);
  box-shadow: 0 0 46px -14px rgba(239, 206, 0, 0.4);
}
.seller-gold .seller-quote::before { background: var(--yellow); }
.seller-gold .seller-quote .quote-label { color: var(--yellow); }
.seller-gold .seller-tag svg { stroke: var(--yellow); }
.seller-gold .seller-tags.in-view .seller-tag:hover {
  color: var(--yellow);
  border-color: rgba(239, 206, 0, 0.5);
  box-shadow: 0 0 18px -2px rgba(239, 206, 0, 0.45);
}

/* Achievement badge with a slow gold shimmer */
.badge-gold {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: #2b2100;
  background: linear-gradient(135deg, #ffe97a, var(--yellow) 55%, #d9ac00);
  border: 1px solid rgba(255, 233, 122, 0.7);
  padding: 5px 12px;
  border-radius: 30px;
  box-shadow: 0 6px 20px -6px rgba(239, 206, 0, 0.65);
  white-space: nowrap;
}
.badge-gold svg { width: 13px; height: 13px; fill: currentColor; flex-shrink: 0; }
.badge-gold::after {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 45%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.75), transparent);
  animation: gold-shimmer 3.6s ease-in-out infinite;
}
@keyframes gold-shimmer {
  0%, 62%  { transform: translateX(0); }
  100%     { transform: translateX(420%); }
}

@media (prefers-reduced-motion: reduce) {
  .badge-gold::after { animation: none; opacity: 0; }
}

/* ==========================================================================
   35. GOLD ACCENTS: CEO shine + crown badge (scoped to .seller-gold only)
   ========================================================================== */
.seller-gold .gold-shine {
  font-weight: 800;
  color: var(--yellow);          /* fallback if background-clip:text is unsupported */
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .seller-gold .gold-shine {
    background: linear-gradient(100deg,
      #c99f00 18%, #ffe97a 40%, #fffbe0 50%, #ffe97a 60%, #c99f00 82%);
    background-size: 260% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: gold-text-shine 5s linear infinite;
  }
}
@keyframes gold-text-shine {
  from { background-position: 160% 0; }
  to   { background-position: -60% 0; }
}

/* Crown badge sits outside the clipped circle, so the photo needs a wrapper */
.seller-photo-wrap { position: relative; flex-shrink: 0; }

.seller-gold .crown-badge {
  position: absolute;
  top: -4px;
  left: -4px;
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #ffe97a, var(--yellow) 58%, #d9ac00);
  border: 2px solid var(--navy-950);
  animation: crown-glow 2.6s ease-in-out infinite;
}
.seller-gold .crown-badge svg { width: 19px; height: 19px; fill: #2b2100; }

@keyframes crown-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 206, 0, 0.5), 0 0 12px -2px rgba(239, 206, 0, 0.45); }
  50%      { box-shadow: 0 0 0 9px rgba(239, 206, 0, 0), 0 0 26px 2px rgba(239, 206, 0, 0.7); }
}

@media (max-width: 720px) {
  .seller-gold .crown-badge { width: 32px; height: 32px; }
  .seller-gold .crown-badge svg { width: 15px; height: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .seller-gold .gold-shine { animation: none; }
  .seller-gold .crown-badge { animation: none; }
}

/* ==========================================================================
   36. FIVERR CARDS: whole card is the link
   ========================================================================== */
.fv-grid .fv-card {
  display: block;
  cursor: pointer;
  color: inherit;
  text-decoration: none;
  transition: transform var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.fv-grid .fv-card:hover {
  transform: translateY(-6px) scale(1.015);
  border-color: rgba(29, 191, 115, 0.55);
  box-shadow: 0 22px 46px -20px rgba(0, 0, 0, 0.75),
              0 0 26px -6px rgba(29, 191, 115, 0.4);
}
.fv-grid .fv-card:focus-visible {
  outline: none;
  border-color: var(--fiverr);
  box-shadow: 0 0 0 3px rgba(29, 191, 115, 0.35);
}
/* the top performer keeps its gold edge, brightened on hover */
.fv-grid .fv-card.is-top:hover {
  border-color: rgba(239, 206, 0, 0.65);
  box-shadow: 0 22px 46px -20px rgba(0, 0, 0, 0.75),
              0 0 26px -6px rgba(239, 206, 0, 0.45);
}

@media (prefers-reduced-motion: reduce) {
  .fv-grid .fv-card:hover { transform: none; }
}

/* ==========================================================================
   37. MEET THE TEAM: compact cards, magnetic tilt, cursor spotlight
   Each card carries --accent (role colour) and --ink. JS writes --mx/--my
   (cursor position) and --rx/--ry (tilt) as the pointer moves.
   ========================================================================== */
.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;                 /* same in both directions */
  max-width: 980px;          /* 3 x 300 + 2 x 40 */
  margin-inline: auto;       /* centred inside .container, like every other section */
}

.team-card {
  --accent: var(--yellow);
  --ink: #241c00;
  --mx: 50%;
  --my: 50%;
  --rx: 0deg;
  --ry: 0deg;
  display: block;
  perspective: 900px;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 520ms var(--ease), transform 520ms var(--ease);
}
.team-grid.in-view .team-card { opacity: 1; transform: translateY(0); }
.team-grid.in-view .team-card:nth-child(1) { transition-delay: 0ms; }
.team-grid.in-view .team-card:nth-child(2) { transition-delay: 85ms; }
.team-grid.in-view .team-card:nth-child(3) { transition-delay: 170ms; }
.team-grid.in-view .team-card:nth-child(4) { transition-delay: 255ms; }
.team-grid.in-view .team-card:nth-child(5) { transition-delay: 340ms; }
.team-grid.in-view .team-card:nth-child(6) { transition-delay: 425ms; }

/* the tilting shell */
.team-inner {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--navy-800);
  border: 1px solid var(--navy-700);
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transform-style: preserve-3d;
  /* slow, slightly springy return to flat */
  transition: transform 520ms cubic-bezier(0.18, 1.3, 0.4, 1),
              border-color 300ms var(--ease),
              box-shadow 300ms var(--ease);
  box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.8);
}
/* while the pointer is moving, follow it almost instantly */
.team-card.is-tilting .team-inner { transition: transform 90ms linear,
              border-color 300ms var(--ease), box-shadow 300ms var(--ease); }

.team-card:hover .team-inner,
.team-card:focus-visible .team-inner {
  border-color: color-mix(in srgb, var(--accent) 60%, transparent);
  box-shadow: 0 22px 50px -20px rgba(0, 0, 0, 0.85),
              0 0 30px -6px color-mix(in srgb, var(--accent) 45%, transparent);
}
.team-card:focus-visible { outline: none; }

.team-photo { position: absolute; inset: 0; }
.team-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;   /* photos are pre-cropped 3:4, face-centred */
  display: block;
}

/* cursor spotlight */
.team-spot {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 300ms var(--ease);
  background: radial-gradient(240px circle at var(--mx) var(--my),
              color-mix(in srgb, var(--accent) 34%, transparent),
              transparent 62%);
  mix-blend-mode: screen;
}
.team-card:hover .team-spot { opacity: 1; }

/* bottom info block */
.team-foot {
  position: absolute;
  inset: auto 0 0 0;
  padding: 18px 18px 18px;
  background: linear-gradient(to top,
              rgba(5, 5, 26, 0.96) 20%,
              rgba(5, 5, 26, 0.82) 60%,
              transparent);
  transform: translateZ(30px);
}
.team-foot h3 { font-size: 1.0625rem; letter-spacing: -0.01em; margin-bottom: 8px; }

.team-role {
  display: inline-block;
  max-width: 100%;              /* longer "Partner & ..." tags wrap instead of overflowing */
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  line-height: 1.4;
  text-align: center;
  text-transform: uppercase;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 42%, transparent);
  padding: 4px 9px;
  border-radius: 30px;
}

/* slides up on hover */
.team-extra {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(10px);
  transition: max-height 280ms var(--ease), opacity 280ms var(--ease),
              transform 280ms var(--ease);
}
.team-card:hover .team-extra,
.team-card:focus-visible .team-extra {
  max-height: 190px;
  opacity: 1;
  transform: translateY(0);
}
.team-extra-in { padding-top: 13px; }
.team-line {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--slate-100);
  margin-bottom: 11px;
}
.team-years {
  display: inline-block;
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--slate-300);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 4px 10px;
  border-radius: 30px;
  margin-bottom: 12px;
}
.team-cta {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.8125rem;
  font-weight: 800;
  color: var(--accent);
  padding-top: 11px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  transition: gap var(--dur) var(--ease);
}
.team-card:hover .team-cta { gap: 12px; }
.team-cta svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2.4; }

/* founder gold edge */
.team-card.is-founder .team-inner {
  border-color: rgba(239, 206, 0, 0.72);
  box-shadow: 0 0 0 1px rgba(239, 206, 0, 0.32),
              0 18px 40px -22px rgba(0, 0, 0, 0.8),
              0 0 30px -6px rgba(239, 206, 0, 0.42);
}
.team-card.is-founder:hover .team-inner,
.team-card.is-founder:focus-visible .team-inner {
  border-color: rgba(239, 206, 0, 0.95);
  box-shadow: 0 0 0 1px rgba(239, 206, 0, 0.5),
              0 22px 50px -20px rgba(0, 0, 0, 0.85),
              0 0 42px -4px rgba(239, 206, 0, 0.6);
}
.team-card.is-founder .team-foot {
  background: linear-gradient(to top,
              rgba(22, 17, 2, 0.96) 20%,
              rgba(10, 9, 26, 0.82) 60%,
              transparent);
}

@media (max-width: 1024px) { .team-grid { grid-template-columns: repeat(2, 1fr); max-width: 640px; gap: 32px; } }
@media (max-width: 720px)  { .team-grid { grid-template-columns: 1fr; max-width: 330px; gap: 24px; } }

/* touch devices: no tilt or spotlight, info panel is simply always open */
@media (hover: none) {
  .team-extra { max-height: 190px; opacity: 1; transform: none; }
  .team-spot { display: none; }
  .team-inner { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .team-card { opacity: 1; transform: none; }
  .team-inner { transform: none !important; transition: none; }
}

/* =========================================================================
   38. WHY WEBTER: two-column copy + animated team constellation
   ========================================================================= */

.why-sec { overflow: hidden; }

.why-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.22fr);   /* ~45 / 55 */
  gap: 72px;
  align-items: center;
}

.why-visual { min-width: 0; }

.why-copy h2 { max-width: 15ch; }
.why-copy p {
  margin-top: 20px;
  max-width: 560px;
  color: var(--slate-300);
  font-size: 1.0625rem;
  line-height: 1.75;
}
.why-cta { margin-top: 34px; }

/* ---- Stage ---------------------------------------------------------- */
.tc-stage {
  --zoom: 1;
  position: relative;
  width: 100%;
  max-width: 620px;
  margin-inline: auto;
  aspect-ratio: 640 / 600;
}

/* soft gold bloom behind the network so it reads as one object */
.tc-stage::before {
  content: "";
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background: radial-gradient(closest-side,
              rgba(239, 206, 0, 0.11),
              rgba(239, 206, 0, 0.04) 55%,
              transparent 78%);
  pointer-events: none;
}

/* ---- Connecting lines ------------------------------------------------ */
.tc-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.tc-web {
  filter: drop-shadow(0 0 5px rgba(239, 206, 0, 0.35));
  animation: tcBreathe 6.5s ease-in-out infinite;
}
.tc-web .tc-edge {
  stroke: rgba(239, 206, 0, 0.32);
  stroke-width: 1.1;
  stroke-linecap: round;
}

/* a short glint that travels along each line, "energy through the network" */
.tc-spark .tc-edge {
  stroke: var(--yellow-hi);
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-dasharray: 9 100;          /* pathLength="100" normalises every line */
  stroke-dashoffset: 9;
  filter: drop-shadow(0 0 6px rgba(255, 224, 31, 0.85));
  animation: tcFlow var(--sd, 7s) linear var(--sdl, 0s) infinite;
}

@keyframes tcBreathe {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}
@keyframes tcFlow {
  0%        { stroke-dashoffset: 9;    opacity: 0; }
  8%        { opacity: 1; }
  92%       { opacity: 1; }
  100%      { stroke-dashoffset: -100; opacity: 0; }
}

/* ---- Nodes ----------------------------------------------------------- */
.tc-node {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: calc(var(--d) * var(--zoom));
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
}

/* layer 1: the gentle float (own transform, so hover scale stays free) */
.tc-float {
  display: block;
  width: 100%;
  height: 100%;
  animation: tcFloat var(--dur, 7s) ease-in-out var(--delay, 0s) infinite;
  will-change: transform;
}
@keyframes tcFloat {
  0%, 100% { transform: translateY(calc(var(--amp, 6px) * -0.5)); }
  50%      { transform: translateY(calc(var(--amp, 6px) * 0.5)); }
}

/* layer 2: the visible disc */
.tc-orb {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  background: var(--navy-800);
  border: 1px solid rgba(239, 206, 0, 0.55);
  box-shadow:
    0 0 0 4px rgba(7, 7, 42, 0.92),
    0 0 16px -2px rgba(239, 206, 0, 0.42),
    0 12px 26px -14px rgba(0, 0, 0, 0.95);
  transition: transform 380ms cubic-bezier(0.2, 0.9, 0.3, 1.25),
              box-shadow 380ms ease,
              border-color 380ms ease;
}
.tc-orb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tc-node:hover { z-index: 3; }
.tc-node:hover .tc-orb {
  transform: scale(1.14);
  border-color: rgba(239, 206, 0, 0.98);
  box-shadow:
    0 0 0 4px rgba(7, 7, 42, 0.92),
    0 0 0 1px rgba(239, 206, 0, 0.45),
    0 0 30px -2px rgba(239, 206, 0, 0.78),
    0 16px 34px -14px rgba(0, 0, 0, 0.95);
}

/* the founder anchors the composition */
.tc-node.is-lead { z-index: 2; }
.tc-node.is-lead .tc-orb {
  border-width: 2px;
  border-color: rgba(239, 206, 0, 0.9);
  box-shadow:
    0 0 0 5px rgba(7, 7, 42, 0.94),
    0 0 0 1px rgba(239, 206, 0, 0.35),
    0 0 34px -4px rgba(239, 206, 0, 0.58),
    0 18px 40px -16px rgba(0, 0, 0, 0.95);
}
.tc-node.is-lead:hover .tc-orb {
  border-color: var(--yellow-hi);
  box-shadow:
    0 0 0 5px rgba(7, 7, 42, 0.94),
    0 0 0 1px rgba(239, 206, 0, 0.6),
    0 0 46px -2px rgba(239, 206, 0, 0.9),
    0 18px 40px -16px rgba(0, 0, 0, 0.95);
}

/* ---- Responsive ------------------------------------------------------ */
@media (max-width: 1024px) {
  .why-grid { grid-template-columns: 1fr; gap: 52px; }   /* text above graphic */
  .why-copy h2 { max-width: none; }
  .why-copy p { max-width: 68ch; }
  .tc-stage { max-width: 540px; }
}

/* mobile: drop the outer ring entirely and enlarge what remains */
@media (max-width: 720px) {
  .tc-stage {
    --zoom: 1.26;
    max-width: 360px;
    margin-block: -36px;
  }
  .tc-node.is-outer,
  .tc-lines .tc-edge-out { display: none; }
  .tc-stage::before { inset: 20%; }
  .why-cta { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .tc-float { animation: none; }
  .tc-web { animation: none; opacity: 0.85; }
  .tc-spark { display: none; }
  .tc-orb { transition: none; }
}

/* =========================================================================
   39. BACK TO TOP + FOOTER RESPONSIVE
   ========================================================================= */

.to-top {
  position: fixed;
  right: 27px;              /* centred over the 56px WhatsApp button at right:22px */
  bottom: 90px;             /* stacked above it, never overlaps */
  z-index: 89;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(10, 10, 56, 0.82);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(239, 206, 0, 0.42);
  color: var(--yellow);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px) scale(0.92);
  transition: opacity 320ms var(--ease),
              transform 320ms var(--ease),
              visibility 320ms var(--ease),
              background-color 220ms var(--ease),
              border-color 220ms var(--ease),
              color 220ms var(--ease),
              box-shadow 220ms var(--ease);
}
.to-top.is-on { opacity: 1; visibility: visible; transform: none; }
.to-top:hover {
  background: var(--yellow);
  border-color: var(--yellow);
  color: var(--navy-950);
  box-shadow: 0 12px 28px -8px rgba(239, 206, 0, 0.55);
}
.to-top:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 3px;
}
.to-top svg { width: 19px; height: 19px; }

/* footer columns collapse in stages so no row ever looks half-empty */
@media (max-width: 1100px) {
  .foot-grid { grid-template-columns: repeat(4, 1fr); gap: 40px 30px; }
  .foot-brand { grid-column: 1 / -1; }
  .foot-tag { max-width: 420px; }
}
@media (max-width: 860px) {
  .foot-grid { grid-template-columns: repeat(2, 1fr); gap: 36px 28px; }
}
@media (max-width: 720px) {
  .foot-grid { grid-template-columns: 1fr; gap: 32px; padding-bottom: 44px; }
  .foot-actions { max-width: none; }
  .foot-bar { flex-direction: column; align-items: flex-start; gap: 12px; }
  .to-top { right: 22px; bottom: 80px; width: 42px; height: 42px; }
  .to-top svg { width: 17px; height: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  .to-top { transition: opacity 1ms linear, visibility 1ms linear; transform: none; }
}

/* =========================================================================
   40. EIGHT-SERVICE NAV + INLINE PROSE LINKS
   ========================================================================= */

/* the dropdown now holds 8 services, two columns keeps it a sane height */
.drop-menu {
  min-width: 560px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
}
@media (max-width: 1000px) {
  .drop-menu { min-width: 460px; }
}

/* links written inside body copy (e.g. Off-Page SEO pointing at Link Building) */
.feat p a,
.lead a,
.check-list a,
.faq-a a {
  color: var(--yellow);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(239, 206, 0, 0.4);
  transition: text-decoration-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.feat p a:hover,
.lead a:hover,
.check-list a:hover,
.faq-a a:hover {
  color: var(--yellow-hi);
  text-decoration-color: var(--yellow-hi);
}

/* =========================================================================
   41. Q&A GRID: question-led blocks on service pages (reuses .feat cards)
   ========================================================================= */
.qa-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.qa-grid .feat h3 { font-size: 1.1875rem; }
@media (max-width: 900px) { .qa-grid { grid-template-columns: 1fr; } }

/* =========================================================================
   42. FAQ PAGE: visible question-and-answer blocks (reuses .feat cards)
   ========================================================================= */
.qa-list {
  display: grid;
  gap: 18px;
  max-width: 840px;
  margin-inline: auto;
}
.qa-list .feat h3 { font-size: 1.125rem; line-height: 1.4; }
.qa-list .feat p + p { margin-top: 14px; }

/* "See more frequently asked questions" under the homepage FAQ block */
.faq-more { margin-top: 34px; text-align: center; }

/* =========================================================================
   43. BRAND NODE + CO-FOUNDER TITLE
   ========================================================================= */

/* the constellation centre holds the brand mark, not a portrait. It fills the
   circle like the photos do; the yellow background doubles as the load-state
   fallback so the node is never an empty hole. */
.tc-node.is-brand .tc-orb { background: var(--yellow); }

/* co-founder title on each account page's sub-line */
.seller-title { color: var(--yellow); font-weight: 700; }

/* =========================================================================
   44. CASE STUDIES: index cards + individual case study page
   ========================================================================= */

.cs-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}
.cs-card {
  display: flex;
  flex-direction: column;
  background: var(--navy-800);
  border: 1px solid var(--navy-700);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.cs-card:not(.is-static):hover { border-color: rgba(239, 206, 0, 0.42); transform: translateY(-3px); }
.cs-card-shot { padding: 18px 18px 0; }
.cs-card-body { display: flex; flex-direction: column; flex: 1; padding: 20px 22px 22px; }
.cs-card-body h3 {
  font-size: 1.0625rem;
  line-height: 1.4;
  margin: 13px 0 15px;
  color: var(--white);
}
.cs-key {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.0625rem;
  color: var(--yellow);
  margin-top: auto;
}
.cs-more {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 15px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--slate-300);
  transition: color var(--dur) var(--ease), gap var(--dur) var(--ease);
}
.cs-more svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; }
.cs-card:hover .cs-more { color: var(--yellow); gap: 11px; }
.cs-soon {
  margin-top: 15px;
  font-size: 0.8125rem;
  color: var(--slate-500);
  font-style: italic;
}

/* ---- browser frame + breathing glow ---- */
.cs-shot {
  background: var(--navy-850);
  border: 1px solid var(--navy-700);
  border-radius: 11px;
  overflow: hidden;
  animation: cs-breathe 5.6s ease-in-out var(--gd, 0s) infinite;
}
.cs-shot .gsc-url { font-size: 9px; }
.cs-shot img { display: block; width: 100%; height: auto; }   /* whole screenshot, never cropped */

@keyframes cs-breathe {
  0%, 100% {
    box-shadow: 0 0 0 1px rgba(239, 206, 0, 0.12),
                0 0 16px -6px rgba(239, 206, 0, 0.24),
                0 18px 40px -24px rgba(0, 0, 0, 0.85);
  }
  50% {
    box-shadow: 0 0 0 1px rgba(239, 206, 0, 0.44),
                0 0 42px -4px rgba(239, 206, 0, 0.5),
                0 18px 40px -24px rgba(0, 0, 0, 0.85);
  }
}

/* ---- individual case study page ---- */
.cs-detail {
  background: var(--navy-800);
  border: 1px solid var(--navy-700);
  border-radius: 20px;
  padding: 36px;
}
.cs-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 14px;
  padding-bottom: 26px;
  margin-bottom: 32px;
  border-bottom: 1px solid var(--navy-700);
}
.cs-stats b {
  display: block;
  font-family: var(--font-head);
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--yellow);
  line-height: 1.1;
}
.cs-stats span { display: block; margin-top: 5px; font-size: 0.8125rem; color: var(--slate-500); }

.cs-single { display: grid; gap: 34px; }
.cs-single-shot { max-width: 900px; margin-inline: auto; width: 100%; }
.cs-single-prose { max-width: 760px; margin-inline: auto; }
.cs-single-prose h2 {
  font-size: 1.375rem;
  margin-top: 30px;
  margin-bottom: 12px;
}
.cs-single-prose h2:first-child { margin-top: 0; }
.cs-single-prose p { font-size: 1rem; line-height: 1.75; color: var(--slate-300); }
.cs-note { margin-top: 12px; font-size: 0.8125rem; color: var(--slate-500); text-align: center; }
.page-hero .tag { margin-bottom: 18px; }

@media (max-width: 1024px) { .cs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) {
  .cs-grid { grid-template-columns: 1fr; }
  .cs-detail { padding: 22px; }
  .cs-stats { grid-template-columns: repeat(2, 1fr); }
  .cs-single-prose h2 { font-size: 1.1875rem; }
}
@media (prefers-reduced-motion: reduce) {
  .cs-shot { animation: none; box-shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.85); }
}

/* =========================================================================
   45. GARDENING CASE STUDY: scoped to body.cs-study only
   ========================================================================= */

.cs-study .cs-hero .inner { max-width: none; }
.cs-study .cs-hero { padding-bottom: 64px; }

.cs-study .cs-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin-bottom: 22px;
}
.cs-study .cs-period {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 30px;
  border: 1px solid var(--navy-700);
  background: rgba(18, 18, 74, 0.55);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--slate-300);
}
.cs-study .cs-period svg { width: 15px; height: 15px; color: var(--yellow); flex-shrink: 0; }
.cs-study .cs-hero h1 { max-width: 20ch; }
.cs-study .cs-hero .lead { max-width: 760px; }

/* ---- hero screenshot: fades and scales in once, then breathes ---- */
.cs-study .cs-shot-hero {
  margin-top: 42px;
  border-radius: 14px;
  opacity: 0;
  transform: scale(0.965) translateY(14px);
  animation: csShotIn 900ms cubic-bezier(0.22, 1, 0.36, 1) 160ms forwards,
             cs-breathe 5.6s ease-in-out 1.1s infinite;
}
@keyframes csShotIn {
  to { opacity: 1; transform: none; }
}
.cs-study .cs-shot-hero .gsc-url { font-size: 11px; }
.cs-study .cs-note { margin-top: 12px; font-size: 0.8125rem; color: var(--slate-500); }
.cs-study .cs-shot-hero + .cs-note { max-width: none; }

/* ---- the four real figures ---- */
.cs-study .cs-stats-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 40px;
}
.cs-study .cs-stat {
  background: var(--navy-800);
  border: 1px solid var(--navy-700);
  border-radius: var(--radius);
  padding: 22px;
}
.cs-study .cs-stat-ico {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--yellow-dim);
  color: var(--yellow);
  margin-bottom: 14px;
}
.cs-study .cs-stat-ico svg { width: 18px; height: 18px; }
.cs-study .cs-stat b {
  display: block;
  font-family: var(--font-head);
  font-size: clamp(1.5rem, 2.6vw, 1.875rem);
  font-weight: 800;
  color: var(--white);
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.cs-study .cs-stat span { display: block; margin-top: 6px; font-size: 0.8125rem; color: var(--slate-500); }

/* ---- sticky jump nav ---- */
.cs-study .cs-toc {
  position: sticky;
  top: 76px;
  z-index: 40;
  background: rgba(7, 7, 42, 0.9);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-block: 1px solid var(--navy-800);
}
.cs-study .cs-toc .container {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-block: 10px;
}
.cs-study .cs-toc .container::-webkit-scrollbar { display: none; }
.cs-study .cs-toc a {
  flex: 0 0 auto;
  padding: 8px 15px;
  border-radius: 30px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--slate-300);
  white-space: nowrap;
  transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.cs-study .cs-toc a:hover { color: var(--yellow); background: var(--yellow-dim); }
.cs-study [id] { scroll-margin-top: 134px; }

/* ---- the trend illustration, drawn once on scroll ---- */
.cs-study .cs-curve {
  background: var(--navy-800);
  border: 1px solid var(--navy-700);
  border-radius: var(--radius);
  padding: 26px 26px 20px;
}
.cs-study .cs-curve svg { display: block; width: 100%; height: auto; }

/* the shared .in-view chart rules would fire this early and at the wrong speed,
   so they are neutralised here and replaced by the .is-drawn sequence below */
.cs-study .cs-curve.in-view .chart-line,
.cs-study .cs-curve.in-view .chart-fill { animation: none; }

.cs-study .cs-curve .chart-line {
  fill: none;
  stroke: var(--yellow);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1000;      /* path carries pathLength="1000" */
  stroke-dashoffset: 1000;
  filter: drop-shadow(0 0 10px rgba(239, 206, 0, 0.35));   /* the soft glow, unchanged */
}
/* the global .chart-fill rule points at #yfade, which does not exist on this page */
.cs-study .cs-curve .chart-fill { fill: url(#csFade); opacity: 0; }

.cs-study .cs-curve-dot {
  fill: var(--yellow);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}
.cs-study .cs-curve-halo {
  fill: none;
  stroke: var(--yellow);
  stroke-width: 2;
  opacity: 0;
}

/* --- drawn once, when the section first scrolls into view --- */
.cs-study .cs-curve.is-drawn .chart-line {
  animation: csDraw 1.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.cs-study .cs-curve.is-drawn .chart-fill {
  animation: fadein 900ms var(--ease) 800ms forwards;
}
/* the dot lands exactly as the line reaches it, then breathes */
.cs-study .cs-curve.is-drawn .cs-curve-dot {
  animation: csDotIn 420ms cubic-bezier(0.2, 1.5, 0.4, 1) 1.66s forwards,
             csDotPulse 2.4s ease-in-out 2.08s infinite;
}
.cs-study .cs-curve.is-drawn .cs-curve-halo {
  animation: csHalo 2.4s ease-out 2.08s infinite;
}

@keyframes csDraw    { to { stroke-dashoffset: 0; } }
@keyframes csDotIn   { from { opacity: 0; transform: scale(0.3); } to { opacity: 1; transform: scale(1); } }
@keyframes csDotPulse {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(239, 206, 0, 0.55)); }
  50%      { filter: drop-shadow(0 0 13px rgba(239, 206, 0, 0.95)); }
}
@keyframes csHalo {
  0%   { r: 6;  opacity: 0.55; }
  100% { r: 20; opacity: 0; }
}
.cs-study .cs-curve .cs-note { text-align: center; max-width: 62ch; margin-inline: auto; }

/* ---- challenge / strategy / result, joined by one line ---- */
.cs-study .cs-steps { position: relative; }
.cs-study .cs-steps::before {
  content: "";
  position: absolute;
  left: 27px;
  top: 24px;
  bottom: 24px;
  width: 2px;
  background: linear-gradient(180deg,
              rgba(239, 206, 0, 0.55), rgba(239, 206, 0, 0.28) 60%, rgba(239, 206, 0, 0));
}
.cs-study .cs-step { position: relative; display: flex; gap: 26px; padding-bottom: 44px; }
.cs-study .cs-step:last-child { padding-bottom: 0; }
.cs-study .cs-step-mark { position: relative; z-index: 1; flex-shrink: 0; text-align: center; }
.cs-study .cs-step-ico {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--navy-900);
  border: 1px solid rgba(239, 206, 0, 0.42);
  color: var(--yellow);
  box-shadow: 0 0 0 6px var(--navy-900), 0 0 24px -8px rgba(239, 206, 0, 0.5);
}
.cs-study .cs-step-ico svg { width: 24px; height: 24px; }
.cs-study .cs-step-num {
  display: block;
  margin-bottom: 10px;
  font-family: var(--font-head);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--slate-500);
}
.cs-study .cs-step-body { padding-top: 4px; }
.cs-study .cs-step-body h2 { font-size: clamp(1.25rem, 2.4vw, 1.625rem); margin-bottom: 12px; }
.cs-study .cs-step-body p { font-size: 1rem; line-height: 1.75; color: var(--slate-300); max-width: 72ch; }

/* ---- service link cards ---- */
.cs-study .cs-link-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.cs-study .cs-link-card {
  display: flex;
  flex-direction: column;
  background: var(--navy-800);
  border: 1px solid var(--navy-700);
  border-radius: var(--radius);
  padding: 26px;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.cs-study .cs-link-card:hover {
  border-color: rgba(239, 206, 0, 0.5);
  transform: translateY(-3px);
  box-shadow: 0 0 34px -12px rgba(239, 206, 0, 0.45);
}
.cs-study .cs-link-ico {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: var(--yellow-dim);
  color: var(--yellow);
  margin-bottom: 16px;
  transition: background-color var(--dur) var(--ease);
}
.cs-study .cs-link-card:hover .cs-link-ico { background: rgba(239, 206, 0, 0.24); }
.cs-study .cs-link-ico svg { width: 20px; height: 20px; }
.cs-study .cs-link-card h3 { font-size: 1.0625rem; color: var(--white); margin-bottom: 10px; }
.cs-study .cs-link-card p { font-size: 0.9375rem; line-height: 1.65; color: var(--slate-300); margin-bottom: 18px; }
.cs-study .cs-link-go {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: auto;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--slate-300);
  transition: color var(--dur) var(--ease), gap var(--dur) var(--ease);
}
.cs-study .cs-link-go svg { width: 15px; height: 15px; }
.cs-study .cs-link-card:hover .cs-link-go { color: var(--yellow); gap: 11px; }

/* ---- back to the portfolio ---- */
.cs-study .cs-back {
  background: var(--navy-800);
  border: 1px solid var(--navy-700);
  border-radius: 20px;
  padding: 34px 38px;
}
.cs-study .cs-back-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}
.cs-study .cs-back h2 { font-size: clamp(1.125rem, 2.2vw, 1.5rem); margin-bottom: 10px; max-width: 24ch; }
.cs-study .cs-back p { font-size: 0.9375rem; color: var(--slate-300); }
.cs-study .cs-back-go {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex-shrink: 0;
  font-weight: 700;
  color: var(--yellow);
  transition: gap var(--dur) var(--ease);
}
.cs-study .cs-back-go svg { width: 17px; height: 17px; }
.cs-study .cs-back-go:hover { gap: 14px; }

/* ---- the six preview chips ---- */
.cs-study .cs-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 30px;
  padding-top: 28px;
  border-top: 1px solid var(--navy-700);
}
.cs-study .cs-chip {
  opacity: 0;
  transform: translateY(14px);
}
.cs-study .cs-chips.is-in .cs-chip {
  animation: csChipIn 560ms cubic-bezier(0.22, 1, 0.36, 1) calc(var(--i) * 90ms) forwards;
}
@keyframes csChipIn { to { opacity: 1; transform: none; } }

.cs-study .cs-chip-in {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 16px 9px 11px;
  border-radius: 999px;
  background: rgba(13, 13, 61, 0.75);
  border: 1px solid var(--navy-700);
  white-space: nowrap;
  transition: transform 260ms var(--ease), border-color 260ms var(--ease),
              box-shadow 260ms var(--ease), background-color 260ms var(--ease);
}
.cs-study .cs-chip-in:hover {
  transform: scale(1.045);
  background: rgba(18, 18, 74, 0.9);
  border-color: rgba(239, 206, 0, 0.55);
  box-shadow: 0 0 26px -8px rgba(239, 206, 0, 0.55);
}
.cs-study .cs-chip-ico {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--yellow-dim);
  color: var(--yellow);
  flex-shrink: 0;
}
.cs-study .cs-chip-ico svg { width: 15px; height: 15px; }
.cs-study .cs-chip-name { font-size: 0.8125rem; color: var(--slate-300); }
.cs-study .cs-chip-name::after {
  content: "\00b7";
  margin: 0 2px 0 8px;
  color: var(--navy-600);
}
.cs-study .cs-chip-stat {
  font-family: var(--font-head);
  font-size: 0.8125rem;
  font-weight: 800;
  color: var(--yellow);
}

/* ---- closing CTA: slow glow sweep across the top edge ---- */
.cs-study .cs-cta { position: relative; overflow: hidden; }
.cs-study .cs-cta::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(239, 206, 0, 0.9), transparent);
  background-size: 46% 100%;
  background-repeat: no-repeat;
  animation: csSweep 7s ease-in-out infinite;
}
@keyframes csSweep {
  0%   { background-position: -50% 0; }
  100% { background-position: 150% 0; }
}
.cs-study .cs-cta .cta-inner {
  position: relative;
  border-radius: 24px;
  padding: 40px 32px;
  animation: csCtaGlow 6s ease-in-out infinite;
}
@keyframes csCtaGlow {
  0%, 100% { box-shadow: 0 0 0 1px rgba(239, 206, 0, 0.1), 0 0 40px -20px rgba(239, 206, 0, 0.3); }
  50%      { box-shadow: 0 0 0 1px rgba(239, 206, 0, 0.28), 0 0 90px -18px rgba(239, 206, 0, 0.5); }
}

/* ---- searchable country picker (booking form on this page) ---- */
.cs-study .combo { position: relative; }
.cs-study .combo-native { display: none; }
.cs-study .combo-list {
  position: absolute;
  z-index: 20;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: 240px;
  overflow-y: auto;
  background: var(--navy-850);
  border: 1px solid var(--navy-700);
  border-radius: 12px;
  padding: 6px;
  box-shadow: 0 24px 50px -18px rgba(0, 0, 0, 0.85);
  display: none;
}
.cs-study .combo.open .combo-list { display: block; }
.cs-study .combo-list li {
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 0.9375rem;
  color: var(--slate-300);
  cursor: pointer;
}
.cs-study .combo-list li:hover, .cs-study .combo-list li.on { background: var(--yellow-dim); color: var(--yellow); }
.cs-study .combo-none { color: var(--slate-500); cursor: default; }
.cs-study .opt {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--slate-500);
}

/* ---- responsive ---- */
@media (max-width: 1024px) {
  .cs-study .cs-stats-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cs-study .cs-link-grid { grid-template-columns: 1fr; }
  .cs-study .cs-back-top { flex-direction: column; align-items: flex-start; gap: 20px; }
}
@media (max-width: 720px) {
  .cs-study .cs-hero { padding-bottom: 48px; }
  .cs-study .cs-shot-hero { margin-top: 30px; }
  .cs-study .cs-stats-row { gap: 12px; margin-top: 30px; }
  .cs-study .cs-stat { padding: 16px; }
  .cs-study .cs-stat-ico { width: 30px; height: 30px; margin-bottom: 10px; }
  .cs-study .cs-curve { padding: 18px 14px 12px; }
  .cs-study .cs-step { gap: 16px; padding-bottom: 34px; }
  .cs-study .cs-steps::before { left: 21px; }
  .cs-study .cs-step-ico { width: 44px; height: 44px; }
  .cs-study .cs-step-ico svg { width: 20px; height: 20px; }
  .cs-study .cs-back { padding: 24px; }
  /* one chip is wider than a phone screen, so they become full-width rows */
  .cs-study .cs-chips { flex-direction: column; gap: 8px; margin-top: 24px; padding-top: 22px; }
  .cs-study .cs-chip { width: 100%; }
  .cs-study .cs-chip-in {
    width: 100%;
    padding: 11px 14px;
    gap: 8px;
    row-gap: 3px;
    flex-wrap: wrap;
    white-space: normal;
    border-radius: 16px;
  }
  .cs-study .cs-chip-name, .cs-study .cs-chip-stat { font-size: 0.75rem; }
  .cs-study .cs-chip-name::after { display: none; }
  .cs-study .cs-chip-stat { flex-basis: 100%; padding-left: 30px; }
  .cs-study .cs-chip-ico { width: 22px; height: 22px; }
  .cs-study .cs-chip-ico svg { width: 13px; height: 13px; }
  .cs-study .cs-cta .cta-inner { padding: 28px 20px; }
  .cs-study .cs-toc { top: 68px; }
  .cs-study [id] { scroll-margin-top: 118px; }
}

@media (prefers-reduced-motion: reduce) {
  .cs-study .cs-shot-hero { opacity: 1; transform: none; animation: none; }
  .cs-study .cs-curve .chart-line { stroke-dashoffset: 0; animation: none; }
  .cs-study .cs-curve .chart-fill, .cs-study .cs-curve-dot { opacity: 1; animation: none; }
  .cs-study .cs-curve-dot { transform: none; }
  .cs-study .cs-curve-halo { animation: none; opacity: 0; }
  .cs-study .cs-cta::before, .cs-study .cs-cta .cta-inner { animation: none; }
  .cs-study .cs-chip { opacity: 1; transform: none; animation: none; }
  .cs-study .cs-chip-in:hover { transform: none; }
}

/* =========================================================================
   46. FIVERR EARNINGS PROOF: seller pages
   Green glow by default; Mohsin's page (body.seller-gold) turns it gold.
   ========================================================================= */

.fv-proof-wrap {
  --fv-glow: 29, 191, 115;              /* Fiverr green */
  margin-top: 34px;
  position: relative;
  z-index: 1;
}
.seller-gold .fv-proof-wrap { --fv-glow: 239, 206, 0; }   /* Mohsin: gold */

.fv-proof-label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 14px;
  padding: 6px 14px 6px 11px;
  border-radius: 30px;
  background: rgba(var(--fv-glow), 0.12);
  border: 1px solid rgba(var(--fv-glow), 0.4);
  color: rgb(var(--fv-glow));
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.fv-proof-label svg { width: 15px; height: 15px; flex-shrink: 0; }

/* same browser-window frame as the case study screenshots */
.fv-proof {
  background: var(--navy-850);
  border: 1px solid rgba(var(--fv-glow), 0.45);
  border-radius: 12px;
  overflow: hidden;
  opacity: 0;
  transform: scale(0.965) translateY(14px);
}
.fv-proof .gsc-url { font-size: 10px; }
.fv-proof img { display: block; width: 100%; height: auto; }

/* fades and scales in the first time it scrolls into view, then breathes */
.fv-proof-wrap.in-view .fv-proof {
  animation: csShotIn 900ms cubic-bezier(0.22, 1, 0.36, 1) 120ms forwards,
             fvBreathe 5.6s ease-in-out 1.1s infinite;
}
@keyframes fvBreathe {
  0%, 100% {
    box-shadow: 0 0 0 1px rgba(var(--fv-glow), 0.14),
                0 0 18px -6px rgba(var(--fv-glow), 0.26),
                0 18px 40px -24px rgba(0, 0, 0, 0.85);
  }
  50% {
    box-shadow: 0 0 0 1px rgba(var(--fv-glow), 0.46),
                0 0 46px -4px rgba(var(--fv-glow), 0.5),
                0 18px 40px -24px rgba(0, 0, 0, 0.85);
  }
}

.fv-proof-note { margin-top: 12px; font-size: 0.8125rem; color: var(--slate-500); }

@media (max-width: 720px) {
  .fv-proof-wrap { margin-top: 26px; }
  .fv-proof-label { font-size: 0.6875rem; padding: 5px 12px 5px 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .fv-proof { opacity: 1; transform: none; }
  .fv-proof-wrap.in-view .fv-proof {
    animation: none;
    box-shadow: 0 0 26px -8px rgba(var(--fv-glow), 0.4);
  }
}

/* ==========================================================================
   47. FIVERR PROFILE CARDS: light "floating card" treatment
   Scoped to .fv-grid on purpose: the six seller pages reuse .fv-level,
   .fv-rating and .fv-stars on a dark hero and must not inherit any of this.
   Every green below is Fiverr's brand green, #1DBF73 (= var(--fiverr)).
   ========================================================================== */
.fv-grid {
  --fvc-bg:   #ffffff;
  --fvc-line: #e4e5e7;   /* Fiverr's own hairline grey */
  --fvc-ink:  #0e0e34;   /* seller name + figures: near-black navy */
  --fvc-mid:  #62646a;   /* labels + review count: medium grey, 5.6:1 on white */
  --fvc-deep: #0a6e42;   /* deep green for small text, 6.3:1, brand green is 2.4:1 */
}

.fv-grid .fv-card {
  background: var(--fvc-bg);
  border: 1px solid var(--fvc-line);
  box-shadow: 0 20px 44px -20px rgba(0, 0, 0, 0.8),
              0 6px 14px -8px rgba(0, 0, 0, 0.5);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.fv-grid .fv-card:hover {
  transform: translateY(-6px);
  border-color: var(--fiverr);
  box-shadow: 0 28px 56px -20px rgba(0, 0, 0, 0.85),
              0 12px 30px -14px rgba(29, 191, 115, 0.55);
}
.fv-grid .fv-card.is-top { border-color: rgba(239, 206, 0, 0.85); }

/* Text recoloured for a light card */
.fv-grid .fv-id b       { color: var(--fvc-ink); }
.fv-grid .fv-stats dt   { color: var(--fvc-mid); }
.fv-grid .fv-stats dd   { color: var(--fvc-ink); }
.fv-grid .fv-stats div + div { border-left-color: var(--fvc-line); }
.fv-grid .fv-rating     { border-bottom-color: var(--fvc-line); gap: 8px; }
.fv-grid .fv-rating b   { color: var(--fvc-ink); }
.fv-grid .fv-rev {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--fvc-mid);
  font-variant-numeric: tabular-nums;
}

/* Avatar keeps the solid brand green and gains a ring that reads on white */
.fv-grid .fv-avatar {
  position: relative;
  background: var(--fiverr);
  box-shadow: 0 0 0 3px rgba(29, 191, 115, 0.16);
}

/* Online status dot, bottom-right of the avatar, with a soft pulse */
.fv-grid .fv-avatar::after {
  content: "";
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--fiverr);
  border: 2.5px solid var(--fvc-bg);
  animation: fv-online 2.4s ease-out infinite;
}
@keyframes fv-online {
  0%        { box-shadow: 0 0 0 0 rgba(29, 191, 115, 0.6); }
  70%, 100% { box-shadow: 0 0 0 7px rgba(29, 191, 115, 0); }
}

/* Level badge: green seal, deep-green label, pale green pill */
.fv-grid .fv-level {
  color: var(--fvc-deep);
  background: rgba(29, 191, 115, 0.1);
  border-color: rgba(29, 191, 115, 0.38);
  padding: 4px 10px 4px 8px;
}
.fv-grid .fv-level svg { width: 15px; height: 15px; fill: var(--fiverr); }

@media (max-width: 720px) {
  .fv-grid .fv-card { box-shadow: 0 14px 30px -16px rgba(0, 0, 0, 0.8); }
}
@media (prefers-reduced-motion: reduce) {
  .fv-grid .fv-avatar::after { animation: none; }
}

/* ==========================================================================
   48. #results, real GSC screenshots in place of the drawn charts
   Reuses the .cs-shot browser frame from the case study pages. The top margin
   drops the screenshot below the floating .case-pill, so the badge keeps its
   existing styling and still reads against the dark card instead of sitting
   on top of a white screenshot.
   ========================================================================== */
.case-chart .case-shot { margin-top: 30px; }   /* badge bottom sits at 41px */

/* ==========================================================================
   49. #results, each case card links through to its full case study
   The <a> is a real, focusable link; its ::after stretches over the whole
   card so the entire card is clickable without nesting anything in an <a>.
   ========================================================================== */
.case { position: relative; }

.case-more {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 22px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--slate-300);
  transition: color var(--dur) var(--ease), gap var(--dur) var(--ease);
}
.case-more svg { width: 15px; height: 15px; flex-shrink: 0; }
.case-more::after { content: ""; position: absolute; inset: 0; border-radius: 20px; }

.case { transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease),
                    box-shadow var(--dur) var(--ease); }
.case:hover {
  border-color: rgba(239, 206, 0, 0.4);
  transform: translateY(-3px);
  box-shadow: 0 22px 44px -24px rgba(0, 0, 0, 0.9);
}
.case:hover .case-more { color: var(--yellow); gap: 11px; }
.case:focus-within { border-color: rgba(239, 206, 0, 0.4); }
.case-more:focus-visible::after { outline: 2px solid var(--yellow); outline-offset: 4px; }

@media (prefers-reduced-motion: reduce) {
  .case:hover { transform: none; }
}

/* ==========================================================================
   50. HERO-TO-SECTION SPACING
   A page hero ends with a short button row, then the next section added a
   full 140px of its own top padding on top of the hero's bottom padding.
   That left ~229px of empty, grid-textured space framed by the hero's bottom
   border, which read as an empty box. Only this one junction is tightened;
   section-to-section rhythm everywhere else is untouched.
   ========================================================================== */
.page-hero + section,
.seller-hero + section { padding-top: 88px; }

@media (max-width: 1024px) {
  .page-hero + section,
  .seller-hero + section { padding-top: 72px; }
}
@media (max-width: 720px) {
  .page-hero { padding-bottom: 40px; }
  .page-hero + section,
  .seller-hero + section { padding-top: 56px; }
}