/* ==========================================================================
   Zinger marketing site — design system
   Warm, professional: cream ground, brand navy, Zippy-orange accents.
   ========================================================================== */

:root {
  --navy-900: #061837;
  --navy-800: #0a2455;
  --navy-700: #082c7f;   /* brand navy */
  --blue-600: #1656d6;
  --blue-500: #2f7df6;
  --sky-400: #4cc3ff;
  --orange-500: #f78e2a; /* Zippy scarf */
  --orange-600: #e97a12;
  --green-500: #1fab55;
  --cream: #faf7f2;
  --cream-2: #f2ecdf;
  --white: #ffffff;
  --ink: #1c2434;
  --muted: #5b6474;
  --line: #e6e0d4;
  --line-light: rgba(255, 255, 255, 0.14);

  --font-display: "Lora", Georgia, "Times New Roman", serif;
  --font-body: "Inter", "Segoe UI", -apple-system, Helvetica, Arial, sans-serif;

  --radius-lg: 22px;
  --radius-md: 14px;
  --radius-sm: 9px;
  --shadow-card: 0 10px 34px rgba(8, 44, 127, 0.10);
  --shadow-card-hover: 0 16px 44px rgba(8, 44, 127, 0.16);
  --container: 1140px;
}

/* Reset-ish */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: inline-block; }
a { color: var(--blue-600); text-decoration: none; }
a:hover { text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--font-display); color: var(--navy-700); line-height: 1.18; margin: 0 0 0.5em; font-weight: 600; }
p { margin: 0 0 1em; }
ul { margin: 0; padding: 0; list-style: none; }
address { font-style: normal; }

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

.d-none { display: none !important; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.01em;
  padding: 14px 28px;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
  text-align: center;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-orange {
  background: var(--orange-500);
  color: #fff;
  box-shadow: 0 8px 22px rgba(247, 142, 42, 0.35);
}
.btn-orange:hover { background: var(--orange-600); color: #fff; }

.btn-navy {
  background: var(--navy-700);
  color: #fff;
  box-shadow: 0 8px 22px rgba(8, 44, 127, 0.25);
}
.btn-navy:hover { background: var(--navy-800); color: #fff; }

.btn-ghost {
  background: transparent;
  color: var(--navy-700);
  border-color: rgba(8, 44, 127, 0.28);
}
.btn-ghost:hover { border-color: var(--navy-700); color: var(--navy-700); }

.btn-ghost-light {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.45);
}
.btn-ghost-light:hover { border-color: #fff; color: #fff; }

.btn-sm { padding: 9px 18px; font-size: 14px; }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(250, 247, 242, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.site-header.is-stuck {
  border-bottom-color: var(--line);
  box-shadow: 0 6px 24px rgba(8, 44, 127, 0.07);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 74px;
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand img { height: 40px; width: auto; }

/* Eight items now, so the gap tightens to keep the row on one line. */
.site-nav { display: flex; align-items: center; gap: 21px; }
.site-nav a {
  color: var(--ink);
  font-weight: 500;
  font-size: 15.5px;
  position: relative;
}
.site-nav a:hover { color: var(--navy-700); }
.site-nav a.is-active {
  color: var(--navy-700);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--orange-500);
  text-decoration-thickness: 2px;
  text-underline-offset: 8px;
}
.header-cta { flex-shrink: 0; }

.nav-toggle {
  display: none;
  background: none;
  border: 0;
  padding: 8px;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 24px;
  height: 2.5px;
  border-radius: 2px;
  background: var(--navy-700);
  margin: 5px 0;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  padding: 44px 0 72px;
  background:
    radial-gradient(900px 420px at 85% -10%, rgba(76, 195, 255, 0.16), transparent 60%),
    radial-gradient(700px 380px at -10% 20%, rgba(247, 142, 42, 0.12), transparent 55%),
    var(--cream);
}
/* Copy on the left with Zippy alongside it, then the video full width beneath.
   Keeping Zippy on the same row as the copy rather than on its own line lifts
   the video ~190px up the page. The video spans the container because that is
   what keeps it sharp - at half width it was downscaled 3.5x and looked soft. */
.hero .container {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 48px;
  align-items: center;
  text-align: left;
}

/* Positioning line, centred across the full width above the hero. */
.hero-kicker {
  grid-column: 1 / -1;
  margin: 0 0 16px;
  text-align: center;
  font-family: var(--font-body);
  font-size: clamp(15px, 1.5vw, 20px);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--navy-700);
  line-height: 1.4;
}
.hero-kicker .kicker-ai { color: var(--orange-600); }
.eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange-600);
  margin-bottom: 18px;
}
.hero h1 {
  font-size: clamp(36px, 4.4vw, 52px);
  font-weight: 700;
  margin-bottom: 16px;
}
.hero h1 .accent { color: var(--orange-500); display: block; }
.hero-copy { grid-column: 1; }
.hero-lede {
  font-size: 17.5px;
  color: var(--muted);
  max-width: 700px;
  margin: 0;
}
.hero-ctas {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  justify-content: flex-end;
}
.hero-note {
  margin-top: 18px;
  font-size: 14.5px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 8px;
}
.hero-note img { width: 30px; height: auto; }

.hero-visual { position: relative; grid-column: 1 / -1; width: 100%; margin-top: 26px; }

/* Narrow: stack the copy and Zippy, centred, with the video still full width. */
@media (max-width: 900px) {
  .hero .container { grid-template-columns: 1fr; text-align: center; }
  .hero-copy, .hero-ctas, .hero-visual { grid-column: 1; }
  .hero-lede { margin: 0 auto; max-width: 640px; }
  .hero-ctas { justify-content: center; margin-top: 26px; }
}
.screen-frame {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 70px rgba(8, 44, 127, 0.18);
  border: 1px solid rgba(8, 44, 127, 0.08);
  overflow: hidden;
}
.screen-frame .frame-bar {
  display: flex;
  gap: 6px;
  padding: 12px 16px;
  background: #eef2fb;
  border-bottom: 1px solid rgba(8, 44, 127, 0.08);
}
.screen-frame .frame-bar i {
  width: 10px; height: 10px; border-radius: 50%;
  background: #cdd7ef;
}
.screen-frame img { display: block; width: 100%; }

.hero-video {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 24px 70px rgba(8, 44, 127, 0.18);
  border: 1px solid rgba(8, 44, 127, 0.08);
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--navy-900);
}
.hero-video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
/* Secondary hero CTA: Zippy speaking his catchphrase, linking through to the
   Meet Zippy section. Sits in the hero copy column rather than overlaid on the
   hero video, where it would cover the player controls. The gap leaves room
   for the speech tail, which overhangs the bubble by 16px. */
.hero-bubble {
  display: inline-flex;
  align-items: flex-start;
  gap: 22px;
  cursor: pointer;
  text-decoration: none;
}
.hero-bubble .bubble {
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  border-radius: 16px;
  padding: 10px 16px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--navy-700);
  white-space: nowrap;
  display: grid;
  justify-items: center;
  text-align: center;
  line-height: 1.45;
  position: relative;
  margin-top: 20px;
  transition: border-color .25s ease, box-shadow .25s ease;
}
/* Speech tail pointing back at Zippy. Two stacked triangles: the outer one
   is the border colour, the inner one sits 1px in and paints the fill. */
.hero-bubble .bubble::before,
.hero-bubble .bubble::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 0;
  height: 0;
  border: 8px solid transparent;
  transform: translateY(-50%);
}
.hero-bubble .bubble::before {
  left: -16px;
  border-right-color: var(--line);
  transition: border-right-color .25s ease;
}
.hero-bubble .bubble::after {
  left: -15px;
  border-right-color: var(--white);
}
.hero-bubble .bubble .zing { color: var(--orange-600); }
/* Both captions share one grid cell, so the bubble keeps the width of the
   longer line and never resizes as they cross-fade. */
.hero-bubble .bubble-default,
.hero-bubble .bubble-hover {
  grid-area: 1 / 1;
  transition: opacity .25s ease;
}
.hero-bubble .bubble-hover { opacity: 0; }
.hero-bubble:hover .bubble-default,
.hero-bubble:focus-visible .bubble-default { opacity: 0; }
.hero-bubble:hover .bubble-hover,
.hero-bubble:focus-visible .bubble-hover { opacity: 1; }
.hero-bubble:hover .bubble,
.hero-bubble:focus-visible .bubble {
  border-color: var(--orange-500);
  box-shadow: 0 10px 24px rgba(247, 142, 42, 0.28);
}
.hero-bubble:hover .bubble::before,
.hero-bubble:focus-visible .bubble::before { border-right-color: var(--orange-500); }
.hero-bubble .zippy-figure {
  position: relative;
  flex: 0 0 auto;
  width: 150px;
  height: 162px;
  transition: transform .25s ease;
}
.hero-bubble .zippy-figure img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 10px 18px rgba(6, 24, 55, 0.25));
  transition: opacity .25s ease, filter .25s ease;
}
.hero-bubble .zippy-head { opacity: 0; }
.hero-bubble:hover .zippy-body,
.hero-bubble:focus-visible .zippy-body { opacity: 0; }
.hero-bubble:hover .zippy-head,
.hero-bubble:focus-visible .zippy-head { opacity: 1; }
.hero-bubble:hover .zippy-figure,
.hero-bubble:focus-visible .zippy-figure { transform: translateY(-6px); }
.hero-bubble:hover .zippy-figure img,
.hero-bubble:focus-visible .zippy-figure img {
  filter: drop-shadow(0 16px 24px rgba(6, 24, 55, 0.32));
}
.hero-bubble:focus-visible {
  outline: 2px solid var(--orange-500);
  outline-offset: 6px;
  border-radius: 16px;
}
@media (prefers-reduced-motion: reduce) {
  .hero-bubble:hover .zippy-figure,
  .hero-bubble:focus-visible .zippy-figure { transform: none; }
}

/* --------------------------------------------------------------------------
   Section scaffolding
   -------------------------------------------------------------------------- */
.section { padding: 88px 0; }
.section-head { max-width: 720px; margin: 0 auto 52px; text-align: center; }
.section-head h2 { font-size: clamp(30px, 3.6vw, 42px); }
.section-head p { color: var(--muted); font-size: 18px; }
.section-head.on-dark h2 { color: #fff; }
.section-head.on-dark p { color: rgba(255, 255, 255, 0.75); }

.section-alt { background: var(--white); }

/* --------------------------------------------------------------------------
   Clients strip (scrolling marquee)
   -------------------------------------------------------------------------- */
.clients-strip { padding: 34px 0 54px; }
.clients-title {
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 26px;
}
.clients-marquee {
  position: relative;
  overflow: hidden;
  padding: 10px 0;
}
.clients-marquee::before,
.clients-marquee::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 90px;
  z-index: 2;
  pointer-events: none;
}
.clients-marquee::before {
  left: 0;
  background: linear-gradient(90deg, var(--cream) 0%, rgba(250, 247, 242, 0) 100%);
}
.clients-marquee::after {
  right: 0;
  background: linear-gradient(270deg, var(--cream) 0%, rgba(250, 247, 242, 0) 100%);
}
.clients-track {
  display: flex;
  align-items: center;
  gap: 22px;
  width: max-content;
  animation: clients-scroll 36s linear infinite;
}
.clients-marquee:hover .clients-track { animation-play-state: paused; }
.client-logo {
  min-width: 210px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px 24px;
  border-radius: var(--radius-md);
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: 0 12px 30px rgba(8, 44, 127, 0.07);
}
.client-logo img {
  max-width: 150px;
  max-height: 52px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
.client-logo-large img { max-width: 176px; max-height: 64px; }
@keyframes clients-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .clients-track { animation: none; }
}
@media (max-width: 620px) {
  .client-logo { min-width: 160px; height: 82px; padding: 14px 18px; }
  .client-logo img { max-width: 116px; max-height: 40px; }
  .client-logo-large img { max-width: 132px; max-height: 48px; }
  .clients-marquee::before, .clients-marquee::after { width: 36px; }
}

/* --------------------------------------------------------------------------
   Zippy section
   -------------------------------------------------------------------------- */
.zippy-section {
  position: relative;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(800px 400px at 15% 0%, rgba(47, 125, 246, 0.35), transparent 60%),
    radial-gradient(700px 420px at 95% 100%, rgba(76, 195, 255, 0.18), transparent 55%),
    linear-gradient(160deg, var(--navy-800), var(--navy-900) 70%);
}
.zippy-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(247, 142, 42, 0.16);
  border: 1px solid rgba(247, 142, 42, 0.5);
  color: #ffc98c;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 7px 16px;
  border-radius: 999px;
  margin-bottom: 20px;
}
.zippy-grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: 56px;
  align-items: center;
}
.zippy-copy h2 {
  color: #fff;
  font-size: clamp(32px, 4vw, 46px);
  margin-bottom: 18px;
}
.zippy-copy h2 .zippy-name { color: var(--sky-400); }
.zippy-copy > p {
  color: rgba(255, 255, 255, 0.8);
  font-size: 18px;
  max-width: 520px;
}
.zippy-points { margin: 28px 0 32px; display: grid; gap: 16px; }
.zippy-points li { display: flex; gap: 14px; align-items: flex-start; }
.zippy-points .tick {
  flex-shrink: 0;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: rgba(76, 195, 255, 0.18);
  border: 1px solid rgba(76, 195, 255, 0.5);
  display: grid;
  place-items: center;
  margin-top: 2px;
}
.zippy-points .tick svg { width: 13px; height: 13px; stroke: var(--sky-400); }
.zippy-points strong { display: block; color: #fff; font-weight: 600; }
.zippy-points span.detail { color: rgba(255, 255, 255, 0.68); font-size: 15.5px; }

.zippy-traits { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 34px; }
.zippy-traits li {
  font-size: 13.5px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--line-light);
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.06);
}

.zippy-visual { position: relative; padding-top: 104px; }
.zippy-visual .zippy-hero-img {
  position: absolute;
  z-index: 0;
  top: -14px;
  right: 48px;
  width: 190px;
  filter: drop-shadow(0 16px 28px rgba(0, 0, 0, 0.45));
}

.proposal-card {
  background: var(--white);
  color: var(--ink);
  border-radius: var(--radius-lg);
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.4);
  padding: 26px 26px 22px;
  position: relative;
  z-index: 1;
}
.proposal-card .proposal-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 6px;
}
.proposal-card .proposal-top strong { font-size: 17px; color: var(--navy-700); }
.proposal-card .proposal-top .meta { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.proposal-card .proposal-items { margin: 12px 0 16px; display: grid; gap: 10px; }
.proposal-card .proposal-items li {
  display: flex;
  gap: 10px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink);
}
.proposal-card .proposal-items .dot {
  flex-shrink: 0;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--blue-500);
  margin-top: 7px;
}
.proposal-card .smart-note {
  font-size: 13px;
  color: var(--orange-600);
  background: rgba(247, 142, 42, 0.1);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  margin-bottom: 16px;
}
.proposal-card .proposal-actions { display: flex; gap: 10px; }
.proposal-card .chip-accept {
  background: var(--navy-700);
  color: #fff;
  border-radius: 999px;
  padding: 8px 22px;
  font-size: 14px;
  font-weight: 600;
  border: 0;
}
.proposal-card .chip-reject {
  background: transparent;
  color: var(--muted);
  border-radius: 999px;
  padding: 8px 18px;
  font-size: 14px;
  font-weight: 600;
  border: 1px solid var(--line);
}
.zippy-disclaimer {
  margin-top: 26px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.62);
  max-width: 380px;
}

/* --------------------------------------------------------------------------
   Video
   -------------------------------------------------------------------------- */
.video-shell {
  max-width: 880px;
  margin: 0 auto;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(8, 44, 127, 0.18);
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--navy-900);
}
.video-shell iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* --------------------------------------------------------------------------
   Feature rows
   -------------------------------------------------------------------------- */
.feature-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px;
  align-items: center;
  padding: 44px 0;
}
.feature-row + .feature-row { border-top: 1px solid var(--line); }
.feature-row .feature-copy h3 { font-size: 27px; margin-bottom: 14px; }
.feature-row .feature-copy p { color: var(--muted); font-size: 16.5px; max-width: 480px; }
.feature-row .feature-kicker {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--orange-600);
  margin-bottom: 10px;
}
.feature-shot {
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid rgba(8, 44, 127, 0.1);
  box-shadow: var(--shadow-card);
  background: var(--white);
}
.feature-shot img { display: block; width: 100%; }
.feature-row.flip .feature-copy { order: 2; }
.feature-row.flip .feature-media { order: 1; }
.feature-outcome {
  margin-top: 14px;
  padding: 10px 16px;
  border-left: 3px solid var(--orange-500);
  background: rgba(247, 142, 42, 0.07);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 14.5px;
  color: var(--ink);
  max-width: 460px;
}
.feature-outcome strong { color: var(--orange-600); font-weight: 700; }

/* --------------------------------------------------------------------------
   Guided lifecycle graphic (stepper + Zippy)
   -------------------------------------------------------------------------- */
.guided-graphic {
  display: flex;
  align-items: stretch;
  gap: 14px;
  background: var(--white);
  border: 1px solid rgba(8, 44, 127, 0.1);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: 24px 22px;
}
.gg-steps {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  padding-left: 4px;
}
.gg-steps::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 12px;
  bottom: 12px;
  width: 2px;
  background: var(--line);
}
.gg-step {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 0;
}
.gg-dot {
  position: relative;
  z-index: 1;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--cream);
  border: 2px solid var(--line);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.gg-dot svg { width: 12px; height: 12px; stroke: #fff; }
.gg-done .gg-dot { background: #2bb673; border-color: #2bb673; }
.gg-current .gg-dot {
  background: var(--orange-500);
  border-color: var(--orange-500);
  box-shadow: 0 0 0 5px rgba(247, 142, 42, 0.22);
}
.gg-name {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--muted);
}
.gg-done .gg-name { color: var(--ink); }
.gg-current .gg-name { color: var(--navy-700); font-weight: 700; }
.gg-now {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--orange-600);
  background: rgba(247, 142, 42, 0.12);
  border-radius: 999px;
  padding: 3px 10px;
}
.gg-gate {
  width: 9px;
  height: 9px;
  background: #2bb673;
  transform: rotate(45deg);
  border-radius: 2px;
  margin-left: auto;
  margin-right: 8px;
}
.gg-zippy {
  flex: 0 0 44%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}
.gg-bubble {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 14px 14px 14px 4px;
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--navy-700);
  line-height: 1.5;
}
.gg-zippy img {
  width: 150px;
  height: auto;
  filter: drop-shadow(0 10px 18px rgba(6, 24, 55, 0.18));
}
@media (max-width: 620px) {
  .gg-zippy { flex-basis: 40%; }
  .gg-zippy img { width: 110px; }
}

/* --------------------------------------------------------------------------
   Gantt <-> Kanban sync graphic (Sprintz)
   -------------------------------------------------------------------------- */
.sync-graphic {
  display: flex;
  align-items: stretch;
  gap: 10px;
  background: var(--white);
  border: 1px solid rgba(8, 44, 127, 0.1);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: 18px;
}
.sync-pane {
  flex: 1 1 0;
  min-width: 0;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
}
.sync-pane-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.g-timeline {
  display: flex;
  margin-left: 66px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 3px;
}
.g-timeline i {
  flex: 1;
  font-style: normal;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--muted);
  text-align: left;
}
.gantt-mini { display: grid; gap: 10px; }
.g-row { display: flex; align-items: center; height: 21px; }
.g-label {
  flex: 0 0 66px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 6px;
}
.g-track {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  height: 100%;
  background-image: repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 25%);
}
.g-bar {
  height: 12px;
  border-radius: 6px;
  position: relative;
  overflow: hidden;
}
.g-bar::after {
  content: "";
  position: absolute;
  inset: 0 40% 0 0;
  background: rgba(255, 255, 255, 0.28);
  border-radius: 6px 0 0 6px;
}
.gb1 { background: #2f7df6; }
.gb2 { background: #2ab5b0; }
.gb3 { background: #2bb673; }
.gb4 { background: #8a63d2; }
.g-linked { box-shadow: 0 0 0 2.5px var(--orange-500); }
.g-milestone {
  position: absolute;
  width: 9px; height: 9px;
  background: var(--orange-500);
  transform: rotate(45deg);
  border-radius: 2px;
}
.sync-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex: 0 0 auto;
  padding: 0 2px;
}
.sync-arrow {
  width: 40px;
  height: 17px;
  color: var(--orange-500);
  animation: sync-swap 4.5s ease-in-out infinite;
}
@keyframes sync-swap {
  0%   { transform: translateX(-3px) scaleX(1); opacity: 1; }
  34%  { transform: translateX(5px) scaleX(1); opacity: 1; }
  42%  { transform: translateX(5px) scaleX(1); opacity: 0; }
  50%  { transform: translateX(5px) scaleX(-1); opacity: 0; }
  58%  { transform: translateX(3px) scaleX(-1); opacity: 1; }
  92%  { transform: translateX(-5px) scaleX(-1); opacity: 1; }
  96%  { transform: translateX(-5px) scaleX(-1); opacity: 0; }
  98%  { transform: translateX(-3px) scaleX(1); opacity: 0; }
  100% { transform: translateX(-3px) scaleX(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .sync-arrow { animation: none; }
}
.sync-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
  line-height: 1.3;
}
.kanban-mini { display: flex; gap: 8px; }
.k-col {
  flex: 1 1 0;
  min-width: 0;
  background: rgba(8, 44, 127, 0.05);
  border-radius: 8px;
  padding: 7px;
}
.k-col:nth-child(2) { background: rgba(42, 181, 176, 0.1); }
.k-col-title {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 7px;
  white-space: nowrap;
  overflow: hidden;
}
.k-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 6px;
  min-height: 32px;
  margin-bottom: 6px;
  font-size: 10px;
  font-weight: 600;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 6px 7px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 1px 3px rgba(8, 44, 127, 0.08);
}
.k-tag { display: block; width: 18px; height: 4px; border-radius: 2px; }
.t-blue { background: #2f7df6; }
.t-teal { background: #2ab5b0; }
.t-green { background: #2bb673; }
.t-purple { background: #8a63d2; }
.k-line { display: block; height: 5px; border-radius: 3px; background: var(--line); }
.k-card.k-linked {
  border-color: var(--orange-500);
  box-shadow: 0 0 0 1.5px var(--orange-500), 0 1px 3px rgba(8, 44, 127, 0.08);
}
@media (max-width: 620px) {
  .sync-graphic { flex-direction: column; }
  .sync-link { flex-direction: row; gap: 8px; }
  .sync-arrow { transform: rotate(90deg); animation: none; }
}

/* --------------------------------------------------------------------------
   Platform journey (strategy -> value chevrons + Zippy span)
   -------------------------------------------------------------------------- */
.journey-steps {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-bottom: 18px;
}
.journey-step {
  position: relative;
  flex: 1 1 120px;
  max-width: 168px;
  padding: 16px 10px 16px 20px;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%, 16px 50%);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
}
.journey-step:first-child { clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%); border-radius: 8px 0 0 8px; padding-left: 12px; }
.journey-step small { display: block; font-size: 11px; font-weight: 500; letter-spacing: 0; text-transform: none; opacity: 0.85; margin-top: 3px; }
.journey-step.j1 { background: #1656d6; }
.journey-step.j2 { background: #2f7df6; }
.journey-step.j3 { background: #2f9be0; }
.journey-step.j4 { background: #2ab5b0; }
.journey-step.j5 { background: #2bb673; }
.journey-step.j6 { background: #3aa84e; }
.journey-step.j7 { background: var(--orange-500); }
.journey-zippy {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  max-width: 860px;
  margin: 0 auto;
  background: linear-gradient(120deg, var(--navy-800), var(--navy-900));
  border-radius: 999px;
  padding: 10px 26px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 15px;
  font-weight: 600;
}
.journey-zippy img { width: 46px; height: auto; }
.journey-zippy .zippy-name { color: var(--sky-400); }
.journey-caption {
  text-align: center;
  margin-top: 18px;
  font-family: var(--font-display);
  font-size: 19px;
  color: var(--navy-700);
}

/* --------------------------------------------------------------------------
   Zippy across the platform (role cards + how it works)
   -------------------------------------------------------------------------- */
.zippy-roles {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
  margin-bottom: 56px;
}
.role-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.role-card .role-tag {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.role-card .role-q {
  font-family: var(--font-display);
  font-size: 16.5px;
  font-weight: 600;
  color: var(--navy-700);
  line-height: 1.4;
  flex: 1;
}
.role-card .role-a {
  font-size: 13.5px;
  color: var(--muted);
  border-top: 1px solid var(--line);
  padding-top: 10px;
}
.role-card .role-a strong { color: var(--orange-600); }

.how-zippy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.hz-step {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 9px 18px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--navy-700);
  white-space: nowrap;
}
.hz-step.hz-human {
  background: var(--orange-500);
  border-color: var(--orange-600);
  color: #fff;
}
.hz-arrow { color: var(--muted); font-size: 15px; }
.how-zippy-note {
  text-align: center;
  margin-top: 16px;
  font-size: 14.5px;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   Value chain band
   -------------------------------------------------------------------------- */
.value-chain {
  background: linear-gradient(140deg, var(--navy-800), var(--navy-900));
  border-radius: var(--radius-lg);
  padding: 40px 36px;
  text-align: center;
}
.value-chain .vc-steps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.vc-step {
  color: rgba(255, 255, 255, 0.88);
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  white-space: nowrap;
}
.vc-step.vc-final {
  color: #fff;
  background: var(--orange-500);
  border-radius: 999px;
  padding: 8px 22px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
}
.vc-arrow { color: var(--sky-400); font-size: 17px; }

/* Persona mission line */
.persona-card .persona-mission {
  display: block;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  opacity: 0.85;
  margin-top: 4px;
}

/* --------------------------------------------------------------------------
   Two-pillar (Projects / Portfolio)
   -------------------------------------------------------------------------- */
.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.pillar {
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  padding: 40px 38px;
}
.pillar .pillar-tag {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.pillar.pillar-projects .pillar-tag { color: var(--blue-600); }
.pillar.pillar-portfolio .pillar-tag { color: var(--orange-600); }
.pillar.pillar-zippy {
  background: linear-gradient(165deg, #0d2f6e, var(--navy-900));
  border-color: rgba(76, 195, 255, 0.25);
}
.pillar.pillar-zippy .pillar-tag { color: var(--sky-400); }
.pillar.pillar-zippy h3 { color: #fff; }
.pillar.pillar-zippy .pillar-motto { color: rgba(255, 255, 255, 0.65); }
.pillar.pillar-zippy li { color: rgba(255, 255, 255, 0.88); }
.pillar-zippy li .tick { background: rgba(76, 195, 255, 0.16); }
.pillar-zippy li .tick svg { stroke: var(--sky-400); }
.pillar h3 { font-size: 26px; margin-bottom: 4px; }
.pillar .pillar-motto { color: var(--muted); font-style: italic; margin-bottom: 24px; }
.pillar ul { display: grid; gap: 13px; }
.pillar li { display: flex; gap: 12px; align-items: flex-start; font-size: 15.5px; }
.pillar li .tick {
  flex-shrink: 0;
  width: 22px; height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin-top: 2px;
}
.pillar-projects li .tick { background: rgba(47, 125, 246, 0.12); }
.pillar-portfolio li .tick { background: rgba(247, 142, 42, 0.14); }
.pillar li .tick svg { width: 11px; height: 11px; }
.pillar-projects li .tick svg { stroke: var(--blue-600); }
.pillar-portfolio li .tick svg { stroke: var(--orange-600); }

/* --------------------------------------------------------------------------
   Personas
   -------------------------------------------------------------------------- */
.personas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.persona-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.persona-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }
.persona-card header {
  padding: 22px 28px;
  color: #fff;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
}
.persona-card.p-leadership header { background: linear-gradient(135deg, var(--navy-700), var(--blue-600)); }
.persona-card.p-department header { background: linear-gradient(135deg, #0f5ea8, var(--sky-400)); }
.persona-card.p-lead header { background: linear-gradient(135deg, var(--orange-600), var(--orange-500)); }
.persona-card .persona-body { padding: 24px 28px 30px; }
.persona-card ul { display: grid; gap: 10px; }
.persona-card li {
  position: relative;
  padding-left: 22px;
  font-size: 15px;
  color: var(--ink);
}
.persona-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--cream-2);
  border: 2px solid var(--orange-500);
}
.persona-card.p-leadership li::before, .persona-card.p-department li::before { border-color: var(--blue-500); }

.value-strip {
  margin-top: 48px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.value-strip span {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--navy-700);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 9px 20px;
}

/* --------------------------------------------------------------------------
   Modules
   -------------------------------------------------------------------------- */
.modules {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.module-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  padding: 30px 30px 28px;
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.module-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }
.module-card .module-icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  margin-bottom: 18px;
  background: rgba(8, 44, 127, 0.07);
}
.module-card .module-icon svg { width: 26px; height: 26px; stroke: var(--navy-700); }
.module-card h3 { font-size: 21px; margin-bottom: 8px; }
.module-card p { color: var(--muted); font-size: 15px; margin-bottom: 0; }
.module-card .soon {
  position: absolute;
  top: 22px;
  right: 22px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--orange-600);
  background: rgba(247, 142, 42, 0.12);
  border: 1px solid rgba(247, 142, 42, 0.4);
  padding: 4px 12px;
  border-radius: 999px;
}

/* --------------------------------------------------------------------------
   Testimonials
   -------------------------------------------------------------------------- */
/* Testimonial carousel.
   A continuous ticker was considered and rejected: logos are recognised at a
   glance, but a 50-word quote sliding past is unreadable, and moving text needs
   a pause control to meet WCAG 2.2.2. This dwells on each pair instead — two
   cards per view, auto-advancing, pausing on hover/focus, and scroll-snapped so
   touch swipe works natively. Scales to any number of quotes. */
.tcarousel { position: relative; }
.tcarousel-track {
  display: flex;
  gap: 28px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.tcarousel-track::-webkit-scrollbar { display: none; }
.tcarousel-track:focus-visible { outline: 2px solid var(--orange-500); outline-offset: 6px; border-radius: var(--radius-md); }
.tcarousel-track > .testimonial-card {
  flex: 0 0 calc((100% - 28px) / 2);
  scroll-snap-align: start;
}

.tcarousel-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 26px;
}
.tcarousel-dots button {
  width: 9px; height: 9px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(8, 44, 127, 0.22);
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.tcarousel-dots button:hover { background: rgba(8, 44, 127, 0.42); }
.tcarousel-dots button[aria-current="true"] {
  background: var(--orange-500);
  transform: scale(1.35);
}
.tcarousel-dots button:focus-visible { outline: 2px solid var(--orange-500); outline-offset: 3px; }
.tcarousel-dots:empty { display: none; }

@media (max-width: 860px) {
  .tcarousel-track > .testimonial-card { flex: 0 0 100%; }
}
.testimonial-card {
  margin: 0;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 30px 30px 26px;
  display: flex;
  flex-direction: column;
}
.testimonial-card .quote-mark {
  font-family: var(--font-display);
  font-size: 64px;
  line-height: 0.6;
  color: var(--orange-500);
  display: block;
  margin-bottom: 16px;
}
.testimonial-card blockquote {
  margin: 0 0 20px;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 500;
  color: var(--navy-700);
  line-height: 1.6;
  flex: 1;
}
.testimonial-card figcaption {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--muted);
}
.testimonial-card figcaption span {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--orange-600);
}
@media (max-width: 1024px) {
}

/* --------------------------------------------------------------------------
   CTA band
   -------------------------------------------------------------------------- */
.cta-band {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(700px 320px at 90% 10%, rgba(76, 195, 255, 0.25), transparent 55%),
    linear-gradient(150deg, var(--navy-700), var(--navy-900));
  border-radius: var(--radius-lg);
  padding: 64px 60px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 40px;
  align-items: center;
}
.cta-band h2 { color: #fff; font-size: clamp(28px, 3.4vw, 38px); margin-bottom: 10px; }
.cta-band p { color: rgba(255, 255, 255, 0.78); font-size: 17px; margin-bottom: 0; max-width: 520px; }
.cta-band .cta-actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.cta-band .cta-zippy {
  position: absolute;
  right: 24px;
  bottom: -6px;
  width: 120px;
  opacity: 0.95;
  pointer-events: none;
}
@media (max-width: 900px) { .cta-band .cta-zippy { display: none; } }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--navy-900);
  color: rgba(255, 255, 255, 0.75);
  padding: 56px 0 0;
  margin-top: 88px;
}
.site-footer .footer-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 32px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--line-light);
}
.site-footer .footer-brand img { height: 38px; filter: brightness(0) invert(1); }
.site-footer .footer-tagline { margin-top: 12px; font-size: 14.5px; color: rgba(255, 255, 255, 0.55); }
.footer-links { display: flex; gap: 28px; flex-wrap: wrap; }
.footer-links a { color: rgba(255, 255, 255, 0.8); font-size: 15px; }
.footer-links a:hover { color: #fff; }
.footer-social { display: flex; gap: 14px; }
.footer-social a {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--line-light);
  display: grid;
  place-items: center;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.footer-social a:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.4); }
.footer-social svg { width: 17px; height: 17px; fill: #fff; }
.footer-bottom {
  padding: 20px 0;
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.5);
  text-align: center;
}

/* --------------------------------------------------------------------------
   Cookie notice
   -------------------------------------------------------------------------- */
.cookie-container {
  position: fixed;
  left: 20px;
  right: 20px;
  bottom: 20px;
  z-index: 90;
  max-width: 520px;
  margin: 0 auto;
  background: var(--navy-800);
  color: rgba(255, 255, 255, 0.85);
  border-radius: var(--radius-md);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
  padding: 22px 24px;
  display: none;
}
.cookie-container .cookie-text { font-size: 14px; margin-bottom: 14px; }
.cookie-container .agree { display: flex; flex-wrap: wrap; gap: 10px; }
.cookie-container a { color: var(--sky-400); }

/* --------------------------------------------------------------------------
   Inner pages (contact, legal, privacy)
   -------------------------------------------------------------------------- */
.page-hero {
  padding: 64px 0 48px;
  background:
    radial-gradient(700px 320px at 85% -20%, rgba(76, 195, 255, 0.14), transparent 60%),
    var(--cream);
  text-align: center;
}
.page-hero h1 { font-size: clamp(32px, 4vw, 46px); max-width: 800px; margin: 0 auto 12px; }
.page-hero p { color: var(--muted); font-size: 17px; max-width: 640px; margin: 0 auto; }

/* Contact */
.contact-section { padding: 64px 0 40px; }
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 56px;
  align-items: flex-start;
}
.contact-intro h1 { font-size: clamp(32px, 4vw, 44px); margin-bottom: 16px; }
.contact-intro p { color: var(--muted); font-size: 17px; max-width: 440px; }
.contact-zippy {
  margin-top: 36px;
  display: flex;
  align-items: flex-end;
  gap: 14px;
}
.contact-zippy img { width: 110px; filter: drop-shadow(0 10px 20px rgba(6, 24, 55, 0.2)); }
.contact-zippy .bubble {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 16px 16px 16px 4px;
  box-shadow: var(--shadow-card);
  padding: 12px 18px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--navy-700);
  margin-bottom: 22px;
}
.contact-form-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  padding: 38px 38px 34px;
}
.contact-form-card h2 {
  font-size: 22px;
  margin-bottom: 22px;
}
.form-group { margin-bottom: 16px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-control {
  width: 100%;
  font-family: var(--font-body);
  font-size: 15.5px;
  color: var(--ink);
  background: var(--cream);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.form-control:focus {
  outline: none;
  background: #fff;
  border-color: var(--blue-500);
  box-shadow: 0 0 0 3px rgba(47, 125, 246, 0.15);
}
select.form-control { appearance: none; background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235b6474' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 40px; }
textarea.form-control { min-height: 110px; resize: vertical; }
.error { display: block; color: #c0392b; font-size: 13px; margin-top: 6px; }
.success { display: block; color: var(--green-500); font-size: 14.5px; font-weight: 600; }
.form-status { text-align: center; padding: 0 0 8px; }
.form-status span { margin: 0 auto 12px; }
.form-check { display: flex; gap: 10px; align-items: flex-start; }
.form-check-input { margin-top: 5px; width: 16px; height: 16px; accent-color: var(--navy-700); flex-shrink: 0; }
.form-check-label { font-size: 13.5px; color: var(--muted); }
.submit-wrap { margin-top: 22px; }
.submit-wrap .btn { width: 100%; }

/* Confirm dialog (vanilla replacement for bootstrap modal) */
.zg-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(6, 24, 55, 0.55);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.zg-modal-backdrop.is-open { display: flex; }
.zg-modal {
  background: #fff;
  border-radius: var(--radius-md);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
  max-width: 420px;
  width: 100%;
  padding: 28px;
}
.zg-modal h3 { font-size: 20px; margin-bottom: 10px; }
.zg-modal p { color: var(--muted); font-size: 15.5px; }
.zg-modal .zg-modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }

/* Loader */
.loader-wrap { display: none; }
.loader-wrap.loader {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 110;
  background: rgba(250, 247, 242, 0.7);
  align-items: center;
  justify-content: center;
}
.loader-div {
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 4px solid rgba(8, 44, 127, 0.15);
  border-top-color: var(--navy-700);
  animation: zg-spin 0.8s linear infinite;
}
@keyframes zg-spin { to { transform: rotate(360deg); } }

/* Legal */
.legal-card {
  max-width: 760px;
  margin: 0 auto;
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  padding: 44px 46px;
}
.legal-card ol { padding-left: 22px; color: var(--ink); }
.legal-card ol li { margin-bottom: 12px; }

/* Privacy / policy text */
.policy-section { padding: 24px 0 40px; }
.policy-section .container { max-width: 820px; }
.policy-content { margin-bottom: 36px; }
.policy-content h2.headings {
  font-size: 22px;
  margin: 36px 0 14px;
}
.policy-content h3 { font-size: 18px; margin: 24px 0 10px; }
.policy-content p, .policy-content li { color: var(--ink); font-size: 16px; }
.policy-content ul, .policy-content ol { padding-left: 22px; margin-bottom: 1em; }
.policy-content ul li { list-style: disc; margin-bottom: 6px; }
.policy-content ol li { margin-bottom: 6px; }
.inner-banner {
  text-align: center;
  padding: 56px 24px 20px;
  max-width: 860px;
  margin: 0 auto;
}
.inner-banner .banner-title { font-size: clamp(26px, 3.4vw, 38px); }
.inner-banner p { color: var(--muted); font-size: 14.5px; }

/* --------------------------------------------------------------------------
   Reveal-on-scroll
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .zippy-grid { grid-template-columns: 1fr; gap: 48px; }
  .zippy-visual { max-width: 560px; margin: 0 auto; }
  .personas, .modules { grid-template-columns: 1fr 1fr; }
  .pillars { grid-template-columns: 1fr; max-width: 640px; margin: 0 auto; }
  .zippy-roles { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background: var(--cream);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 18px 40px rgba(8, 44, 127, 0.12);
    display: none;
    padding: 8px 0 12px;
  }
  .site-nav.is-open { display: flex; }
  .site-nav a { padding: 12px 24px; width: 100%; }
  .nav-toggle { display: block; }
  .header-cta { display: none; }

  .section { padding: 64px 0; }
  .feature-row { grid-template-columns: 1fr; gap: 28px; padding: 36px 0; }
  .feature-row.flip .feature-copy { order: 1; }
  .feature-row.flip .feature-media { order: 2; }
  .pillars { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; gap: 40px; }
  .cta-band { grid-template-columns: 1fr; padding: 44px 32px; }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  .personas, .modules { grid-template-columns: 1fr; }
  .zippy-roles { grid-template-columns: 1fr; }
  .journey-step { flex-basis: 44%; max-width: none; clip-path: none; border-radius: 8px; padding: 12px 8px; }
  .journey-step:first-child { clip-path: none; }
  .vc-step { white-space: normal; }
  .form-row { grid-template-columns: 1fr; }
  .hero { padding: 48px 0 72px; }
  .hero-bubble .bubble { font-size: 13px; padding: 8px 12px; margin-top: 18px; }
  .hero-bubble .zippy-figure { width: 112px; height: 121px; }
  .zippy-visual { padding-top: 74px; }
  .zippy-visual .zippy-hero-img { width: 140px; right: 24px; top: -8px; }
  .proposal-card { padding: 20px 18px; }
  .contact-form-card { padding: 26px 20px; }
  .legal-card { padding: 30px 22px; }
}

/* --------------------------------------------------------------------------
   Integrations wheel
   Hub-and-spoke: ZingerPM at the centre, connected systems around it. Arrow
   direction is real information, not decoration — a navy head at the hub means
   data is pulled IN, an orange head at the tile means it is pushed OUT, and
   Excel/CSV carry both because they import and export.
   -------------------------------------------------------------------------- */
.int-stage { display: flex; justify-content: center; margin-top: 8px; }
.int-wheel { width: 100%; max-width: 660px; height: auto; display: block; }

.int-hub { fill: var(--white); stroke: var(--navy-700); stroke-width: 2; }
.spoke { stroke: rgba(8, 44, 127, 0.20); stroke-width: 4; stroke-linecap: round; }

/* Tile carries each logo's own backdrop colour; the stroke keeps white-backed
   logos legible against the white section behind them. */
.int-tile { stroke: var(--line); stroke-width: 1.5; }
.int-word {
  font-family: var(--font-body);
  font-weight: 700;
  text-anchor: middle;
  letter-spacing: 0.01em;
}
.int-label {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  fill: var(--ink);
  text-anchor: middle;
}
.int-node { transition: transform .2s ease; transform-origin: center; transform-box: fill-box; }
.int-node:hover .int-tile { stroke: var(--navy-700); stroke-width: 2.5; }

/* Compact list — replaces the wheel where it would be too small to read */
.int-grid { display: none; }
.int-grid li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.int-chip {
  flex: 0 0 auto;
  width: 54px; height: 44px;
  border-radius: 10px;
  border: 1px solid var(--line);
  display: grid; place-items: center;
  overflow: hidden;
}
.int-chip img { width: 34px; height: 34px; object-fit: contain; }
.int-chip-name { font-weight: 600; color: var(--ink); font-size: 15.5px; }
.int-chip-name em {
  display: block;
  font-style: normal;
  font-weight: 500;
  font-size: 13.5px;
  color: var(--muted);
}

.int-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px 28px;
  margin-top: 26px;
  font-size: 14.5px;
  color: var(--muted);
}
.int-legend span { display: inline-flex; align-items: center; gap: 8px; }
/* Nominative-use notice: Zinger is not a partner of these vendors. */
.int-tm {
  flex-basis: 100%;
  display: block;
  text-align: center;
  max-width: 640px;
  margin: 10px auto 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
  opacity: 0.75;
}
.int-legend .int-note {
  flex-basis: 100%;
  justify-content: center;
  text-align: center;
  color: var(--muted);
  font-size: 14.5px;
  max-width: 620px;
  margin: 0 auto;
  display: block;
}

@media (max-width: 780px) {
  .int-stage { display: none; }
  .int-grid { display: block; max-width: 440px; margin: 0 auto; }
}