/* ============================================================
   Service sub-pages — shared components
   Loaded alongside main.css on the six service pages only.

   main.css stays the foundation (chrome, buttons, grids, FAQ).
   This file adds the accent token layer main.css never had, plus
   the components that only exist on service pages.

   House rules inherited from main.css:
     easing  cubic-bezier(.2, .8, .2, 1)
     radius  999px pill / 20px card / 16px frame / 14px button / 12px small
     ink     #0f172a  body #1f1d2b  muted #64748b  faint #94a3b8
   ============================================================ */

/* ---------- Accent token layer ----------
   Two declared values per page; every tint is derived from
   --accent-rgb so the component rules below are written once. */
.svc {
  --accent: #ff7f00;
  --accent-rgb: 255 127 0;
  --accent-dark: #e67200;
}

.svc-event-management {
  --accent: #ff7f00;
  --accent-rgb: 255 127 0;
  --accent-dark: #e67200;
}

.svc-digital-ticketing {
  --accent: #0ea5e9;
  --accent-rgb: 14 165 233;
  --accent-dark: #0284c7;
}

.svc-awards-management {
  --accent: #10b981;
  --accent-rgb: 16 185 129;
  --accent-dark: #059669;
}

.svc-branding-marketing {
  --accent: #7c3aed;
  --accent-rgb: 124 58 237;
  --accent-dark: #6d28d9;
}

.svc-audience-engagement {
  --accent: #0891b2;
  --accent-rgb: 8 145 178;
  --accent-dark: #0e7490;
}

.svc-event-support {
  --accent: #d97706;
  --accent-rgb: 217 119 6;
  --accent-dark: #b45309;
}

/* ============================================================
   Hero
   ============================================================ */
.svc-hero {
  position: relative;
  padding: 64px 0 20px;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 56px;
  align-items: center;
}

/* Accent aurora bleeding out from behind the hero */
.svc-hero-glow {
  position: absolute;
  inset: -18% -10% -30%;
  background:
    radial-gradient(ellipse 46% 52% at 22% 42%, rgb(var(--accent-rgb) / 0.20), transparent 68%),
    radial-gradient(ellipse 38% 44% at 78% 30%, rgb(var(--accent-rgb) / 0.12), transparent 70%);
  filter: blur(56px);
  z-index: -1;
  pointer-events: none;
}

.svc-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: #94a3b8;
  margin-bottom: 20px;
}

.svc-breadcrumb a {
  color: #64748b;
  text-decoration: none;
  transition: color 0.2s ease;
}

.svc-breadcrumb a:hover {
  color: var(--accent);
}

.svc-breadcrumb .sep {
  color: #cbd5e1;
}

.svc-breadcrumb [aria-current] {
  color: var(--accent);
  font-weight: 600;
}

.svc-eyebrow {
  display: inline-block;
  padding: 6px 16px;
  border-radius: 999px;
  background: rgb(var(--accent-rgb) / 0.10);
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 18px;
}

/* Inter, not Instrument Serif — the serif stays exclusive to the
   landing hero so it keeps its weight as the site's signature. */
.svc-hero-title {
  font-size: clamp(34px, 5.2vw, 60px);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.03em;
  color: #0f172a;
  margin: 0 0 18px;
  text-wrap: balance;
}

.svc-hero-title .accent {
  color: var(--accent);
}

.svc-hero-lead {
  font-size: 17px;
  line-height: 1.65;
  color: #475569;
  max-width: 540px;
  margin: 0 0 32px;
}

.svc-hero-ctas {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* Accent-tinted variant of .cta-primary from main.css */
.svc-cta-accent {
  background: linear-gradient(160deg,
      rgb(var(--accent-rgb) / 0.86) 0%,
      var(--accent) 45%,
      var(--accent-dark) 100%);
  box-shadow:
    0 4px 14px rgb(var(--accent-rgb) / 0.38),
    0 1px 3px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.svc-cta-accent:hover {
  box-shadow:
    0 8px 24px rgb(var(--accent-rgb) / 0.44),
    0 2px 6px rgba(0, 0, 0, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.svc-hero-ctas .cta-secondary {
  border-color: rgb(var(--accent-rgb) / 0.25);
}

.svc-hero-ctas .cta-secondary:hover {
  border-color: rgb(var(--accent-rgb) / 0.55);
}

/* ---------- Hero visual: the service icon on an accent plinth ---------- */
.svc-hero-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
}

.svc-hero-emblem {
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  background:
    linear-gradient(150deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.62));
  border: 1px solid rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 18px 44px rgb(var(--accent-rgb) / 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  animation: svcFloat 6s ease-in-out infinite;
}

.svc-hero-emblem svg {
  width: 84px;
  height: 84px;
}

/* Orbiting satellite chips carrying the key sub-capabilities */
.svc-orbit {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 15px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(0, 0, 0, 0.07);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08);
  font-size: 12.5px;
  font-weight: 600;
  color: #334155;
  white-space: nowrap;
  animation: svcFloat 5s ease-in-out infinite;
}

.svc-orbit::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}

.svc-orbit-1 { top: 8%;   left: -6%;  animation-delay: 0.4s; }
.svc-orbit-2 { top: 42%;  right: -8%; animation-delay: 1.2s; }
.svc-orbit-3 { bottom: 8%; left: 4%;  animation-delay: 2s; }

/* ============================================================
   Stats strip
   Reuses .stats-grid / .stat-card / .stat-value from main.css so
   the count-up observer in script.js picks them up for free.
   ============================================================ */
.svc-stats {
  padding: 30px 0 10px;
  max-width: 1000px;
  margin: 0 auto;
}

.svc-stats .stat-value {
  color: var(--accent);
}

/* ============================================================
   Section head — mirrors main.css .section-eyebrow/.section-title
   but left-alignable and accent-tinted.
   ============================================================ */
.svc-section {
  padding: 50px 0;
}

.svc-section-head {
  text-align: center;
  margin-bottom: 8px;
}

.svc-section-head .svc-eyebrow {
  margin-bottom: 16px;
}

/* ============================================================
   Capability cards
   Fresh classes rather than .feature-card, because that one binds
   its accent to :nth-child. The grid wrapper is still
   .features-grid so the staggered reveal comes free.
   ============================================================ */
.svc-card {
  position: relative;
  overflow: hidden;
  background: #ffffff;
  border-radius: 20px;
  border: 1px solid rgba(0, 0, 0, 0.09);
  padding: 32px 28px 28px;
  display: flex;
  flex-direction: column;
  text-align: left;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 4px 12px rgba(0, 0, 0, 0.06),
    0 16px 40px rgba(0, 0, 0, 0.05);
  transition:
    transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.35s ease,
    border-color 0.35s ease;
}

.svc-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 120px;
  background: linear-gradient(180deg, rgb(var(--accent-rgb) / 0.05) 0%, transparent 100%);
  pointer-events: none;
}

.svc-card:hover {
  transform: translateY(-8px);
  border-color: rgb(var(--accent-rgb) / 0.28);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 8px 20px rgb(var(--accent-rgb) / 0.12),
    0 24px 56px rgb(var(--accent-rgb) / 0.10);
}

.svc-card-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
  color: var(--accent);
  background: linear-gradient(135deg, rgb(var(--accent-rgb) / 0.14), rgb(var(--accent-rgb) / 0.06));
  border: 1px solid rgb(var(--accent-rgb) / 0.16);
  flex-shrink: 0;
  position: relative;
  z-index: 2;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.svc-card:hover .svc-card-icon {
  transform: scale(1.1) rotate(5deg);
  background: var(--accent);
  color: #fff;
  box-shadow: 0 10px 20px rgb(var(--accent-rgb) / 0.2);
}

.svc-card-title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #0f172a;
  margin: 0 0 10px;
  position: relative;
  z-index: 2;
}

.svc-card-desc {
  font-size: 14px;
  line-height: 1.7;
  color: #64748b;
  margin: 0;
  position: relative;
  z-index: 2;
}

/* ============================================================
   Deep-dive rows — the alternating zig-zag the landing page lacks
   ============================================================ */
.svc-deep {
  padding: 20px 0 30px;
}

.svc-deep-row {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
  padding: 46px 0;
}

.svc-deep-row.is-reversed .svc-deep-copy {
  order: 2;
}

.svc-deep-row.is-reversed .svc-deep-visual {
  order: 1;
}

.svc-deep-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}

.svc-deep-label::before {
  content: '';
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
}

.svc-deep-title {
  font-size: clamp(24px, 2.6vw, 30px);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: #0f172a;
  margin: 0 0 14px;
  text-wrap: balance;
}

.svc-deep-text {
  font-size: 15px;
  line-height: 1.75;
  color: #64748b;
  margin: 0 0 22px;
}

.svc-deep-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.svc-deep-list li {
  position: relative;
  padding-left: 30px;
  font-size: 14.5px;
  line-height: 1.6;
  color: #334155;
}

.svc-deep-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent);
}

/* White tick drawn with two borders, layered over the accent disc */
.svc-deep-list li::after {
  content: '';
  position: absolute;
  left: 6px;
  top: 7px;
  width: 8px;
  height: 4px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg);
}

/* ============================================================
   Mock UI — a small vocabulary of primitives the six pages
   compose differently. Everything is CSS/SVG; no new images.
   Wrapped in .browser-frame from main.css.
   ============================================================ */
.svc-deep-visual {
  position: relative;
}

.svc-deep-visual::before {
  content: '';
  position: absolute;
  inset: 12% -6% -10%;
  background: radial-gradient(ellipse 60% 55% at 50% 60%, rgb(var(--accent-rgb) / 0.16), transparent 70%);
  filter: blur(44px);
  z-index: -1;
  pointer-events: none;
}

.svc-deep-visual .browser-frame {
  box-shadow:
    0 10px 40px -10px rgba(0, 0, 0, 0.08),
    0 30px 70px -18px rgba(0, 0, 0, 0.14);
}

.svc-mock {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: #fff;
}

.svc-mock-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.svc-mock-title {
  font-size: 13.5px;
  font-weight: 700;
  color: #0f172a;
}

.svc-mock-sub {
  font-size: 11.5px;
  color: #94a3b8;
  font-weight: 500;
}

/* ---------- Status chips ---------- */
.svc-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  background: rgb(var(--accent-rgb) / 0.10);
  color: var(--accent);
  white-space: nowrap;
}

.svc-chip.is-live::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  animation: svcBlink 1.8s ease-in-out infinite;
}

.svc-chip.is-ok {
  background: rgba(18, 161, 80, 0.10);
  color: #12a150;
}

.svc-chip.is-warn {
  background: rgba(217, 119, 6, 0.12);
  color: #b45309;
}

.svc-chip.is-muted {
  background: rgba(100, 116, 139, 0.10);
  color: #64748b;
}

/* ---------- List rows ---------- */
.svc-mock-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border-radius: 12px;
  background: #f8f9fb;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.svc-mock-row.is-highlight {
  background: rgb(var(--accent-rgb) / 0.06);
  border-color: rgb(var(--accent-rgb) / 0.22);
}

.svc-mock-avatar {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11.5px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  flex-shrink: 0;
}

.svc-mock-rank {
  width: 22px;
  font-size: 12px;
  font-weight: 700;
  color: #94a3b8;
  flex-shrink: 0;
  text-align: center;
}

.svc-mock-name {
  flex: 1;
  min-width: 0;
  font-size: 12.5px;
  font-weight: 600;
  color: #1f1d2b;
}

/* block, or it shares a line with the name it is annotating */
.svc-mock-meta {
  display: block;
  font-size: 11px;
  color: #94a3b8;
  font-weight: 500;
  margin-top: 2px;
}

.svc-mock-value {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

/* ---------- Progress bars ---------- */
.svc-mock-bar {
  height: 7px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.07);
  overflow: hidden;
  flex: 1;
}

/* block, or width/height are ignored — these are spans inside a
   non-flex track, so they are not blockified by their parent */
.svc-mock-bar-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgb(var(--accent-rgb) / 0.75), var(--accent));
  transform-origin: left center;
  animation: svcBarGrow 1s cubic-bezier(0.2, 0.8, 0.2, 1) var(--d, 0s) both;
}

.svc-mock-bar-fill.is-muted {
  background: linear-gradient(90deg, #cbd5e1, #94a3b8);
}

.svc-mock-barrow {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Short labels with no meta line — keep them on one line */
.svc-mock-barrow .svc-mock-name {
  flex: 0 0 84px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- Stat tiles ---------- */
.svc-mock-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.svc-mock-grid.cols-2 {
  grid-template-columns: repeat(2, 1fr);
}

.svc-mock-tile {
  padding: 13px 12px;
  border-radius: 12px;
  background: #f8f9fb;
  border: 1px solid rgba(0, 0, 0, 0.05);
  text-align: center;
}

.svc-mock-tile strong {
  display: block;
  font-size: 17px;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.svc-mock-tile span {
  display: block;
  margin-top: 3px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #94a3b8;
}

/* ---------- Pipeline / phase rail ---------- */
.svc-mock-rail {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 6px 2px 2px;
}

.svc-mock-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #94a3b8;
}

.svc-mock-step .bead {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 2px solid #cbd5e1;
  background: #fff;
}

.svc-mock-step.is-done {
  color: #12a150;
}

.svc-mock-step.is-done .bead {
  border-color: #12a150;
  background: #12a150;
}

.svc-mock-step.is-active {
  color: var(--accent);
}

.svc-mock-step.is-active .bead {
  border-color: var(--accent);
  background: var(--accent);
  box-shadow: 0 0 0 4px rgb(var(--accent-rgb) / 0.18);
}

.svc-mock-track {
  flex: 1;
  height: 2px;
  border-radius: 2px;
  background: #e2e8f0;
  margin: 0 6px 18px;
}

.svc-mock-track.is-done {
  background: #12a150;
}

/* ---------- QR block ---------- */
.svc-mock-qr {
  width: 74px;
  height: 74px;
  border-radius: 10px;
  flex-shrink: 0;
  background-color: #fff;
  background-image:
    linear-gradient(45deg, #0f172a 25%, transparent 25%, transparent 75%, #0f172a 75%),
    linear-gradient(45deg, #0f172a 25%, transparent 25%, transparent 75%, #0f172a 75%);
  background-size: 16px 16px;
  background-position: 0 0, 8px 8px;
  border: 3px solid #fff;
  outline: 1px solid rgba(0, 0, 0, 0.08);
}

/* ---------- Ticket stub ---------- */
.svc-mock-ticket {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgb(var(--accent-rgb) / 0.09), rgb(var(--accent-rgb) / 0.03));
  border: 1px dashed rgb(var(--accent-rgb) / 0.35);
}

.svc-mock-ticket-body {
  flex: 1;
  min-width: 0;
}

.svc-mock-ticket-title {
  font-size: 13.5px;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.01em;
}

.svc-mock-ticket-row {
  display: flex;
  gap: 16px;
  margin-top: 9px;
}

.svc-mock-ticket-row div {
  font-size: 10.5px;
  color: #94a3b8;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.svc-mock-ticket-row strong {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  font-weight: 700;
  color: #334155;
  text-transform: none;
  letter-spacing: 0;
}

/* ---------- Phone frame (USSD) ---------- */
.svc-mock-phone {
  width: 168px;
  margin: 0 auto;
  border-radius: 22px;
  background: #15131e;
  padding: 10px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22);
}

.svc-mock-phone-screen {
  border-radius: 14px;
  background: #f8f9fb;
  padding: 16px 13px;
  min-height: 168px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.svc-mock-phone-dial {
  font-family: monospace;
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: 0.02em;
}

.svc-mock-phone-line {
  font-size: 11.5px;
  line-height: 1.5;
  color: #475569;
}

.svc-mock-phone-line.is-accent {
  color: var(--accent);
  font-weight: 700;
}

.svc-mock-phone-reply {
  margin-top: auto;
  padding: 8px 10px;
  border-radius: 9px;
  background: rgb(var(--accent-rgb) / 0.10);
  border: 1px solid rgb(var(--accent-rgb) / 0.22);
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
}

/* ---------- Colour swatches ---------- */
.svc-mock-swatches {
  display: flex;
  gap: 8px;
}

.svc-mock-swatch {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  border: 2px solid #fff;
  outline: 1px solid rgba(0, 0, 0, 0.08);
}

.svc-mock-swatch.is-selected {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* ---------- Thumbnail mosaic ---------- */
.svc-mock-mosaic {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
}

.svc-mock-thumb {
  aspect-ratio: 1;
  border-radius: 9px;
  background: linear-gradient(135deg, rgb(var(--accent-rgb) / 0.28), rgb(var(--accent-rgb) / 0.08));
}

.svc-mock-thumb:nth-child(3n) {
  background: linear-gradient(135deg, rgba(100, 116, 139, 0.24), rgba(100, 116, 139, 0.07));
}

.svc-mock-thumb:nth-child(4n) {
  background: linear-gradient(135deg, rgb(var(--accent-rgb) / 0.16), rgba(100, 116, 139, 0.10));
}

.svc-mock-thumb.is-wide {
  grid-column: span 2;
  aspect-ratio: 2 / 1;
}

/* ---------- Gateway logo strip ---------- */
.svc-mock-gateways {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px;
  border-radius: 12px;
  background: #f8f9fb;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.svc-mock-gateways img {
  height: 22px;
  width: auto;
  max-width: 66px;
  object-fit: contain;
  opacity: 0.85;
}

/* ---------- Sparkline ---------- */
.svc-mock-spark {
  width: 100%;
  height: 74px;
  display: block;
}

.svc-mock-spark .line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.svc-mock-spark .area {
  fill: rgb(var(--accent-rgb) / 0.13);
  stroke: none;
}

/* ---------- Option / radio rows ---------- */
.svc-mock-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 11px;
  border: 1px solid rgba(0, 0, 0, 0.07);
  background: #fff;
  font-size: 12.5px;
  font-weight: 600;
  color: #334155;
}

.svc-mock-option::before {
  content: '';
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 2px solid #cbd5e1;
  flex-shrink: 0;
}

.svc-mock-option.is-picked {
  border-color: rgb(var(--accent-rgb) / 0.4);
  background: rgb(var(--accent-rgb) / 0.05);
  color: #0f172a;
}

.svc-mock-option.is-picked::before {
  border-color: var(--accent);
  border-width: 4.5px;
}

/* ============================================================
   How-it-works steps
   Wrapper stays .lifecycle-grid so the stagger comes free.
   ============================================================ */
.svc-step {
  position: relative;
  background: #ffffff;
  border-radius: 20px;
  border: 1px solid rgba(0, 0, 0, 0.09);
  padding: 32px 26px 26px;
  display: flex;
  flex-direction: column;
  text-align: left;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 4px 12px rgba(0, 0, 0, 0.06),
    0 16px 40px rgba(0, 0, 0, 0.05);
  transition:
    transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.35s ease,
    border-color 0.35s ease;
}

.svc-step:hover {
  transform: translateY(-8px);
  border-color: rgb(var(--accent-rgb) / 0.28);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 8px 20px rgb(var(--accent-rgb) / 0.12),
    0 24px 56px rgb(var(--accent-rgb) / 0.10);
}

.svc-step-number {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color: #fff;
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 18px;
  box-shadow: 0 6px 16px rgb(var(--accent-rgb) / 0.28);
}

.svc-step-phase {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}

.svc-step-title {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #0f172a;
  margin: 0 0 10px;
}

.svc-step-desc {
  font-size: 14px;
  line-height: 1.7;
  color: #64748b;
  margin: 0;
}

/* ============================================================
   FAQ accent overrides
   Class names must stay as main.css defines them — script.js
   queries .faq-item / .faq-trigger / .faq-content directly.
   ============================================================ */
.svc .faq {
  padding: 50px 0 40px;
}

.svc .faq-item.open {
  border-color: rgb(var(--accent-rgb) / 0.35);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 8px 20px rgb(var(--accent-rgb) / 0.10),
    0 20px 44px rgb(var(--accent-rgb) / 0.08);
}

.svc .faq-item.open .faq-chevron-wrap {
  background: rgb(var(--accent-rgb) / 0.12);
  color: var(--accent);
}

/* ============================================================
   Other services grid
   Each card re-declares --accent so the row shows all six
   brand colours at once — the token layer earning its keep.
   ============================================================ */
.svc-other-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 22px 20px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.09);
  text-decoration: none;
  text-align: left;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 4px 12px rgba(0, 0, 0, 0.05);
  transition:
    transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}

.svc-other-card:hover {
  transform: translateY(-5px);
  border-color: rgb(var(--accent-rgb) / 0.3);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 10px 26px rgb(var(--accent-rgb) / 0.14);
}

.svc-other-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--accent);
  background: linear-gradient(135deg, rgb(var(--accent-rgb) / 0.14), rgb(var(--accent-rgb) / 0.06));
  border: 1px solid rgb(var(--accent-rgb) / 0.16);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.svc-other-card:hover .svc-other-icon {
  background: var(--accent);
  color: #fff;
}

.svc-other-body {
  min-width: 0;
}

.svc-other-name {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.01em;
  margin-bottom: 5px;
}

.svc-other-name svg {
  opacity: 0;
  transform: translateX(-4px);
  transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  color: var(--accent);
}

.svc-other-card:hover .svc-other-name svg {
  opacity: 1;
  transform: translateX(0);
}

.svc-other-desc {
  font-size: 13px;
  line-height: 1.6;
  color: #64748b;
  margin: 0;
}

/* Per-card accent so the grid shows the whole palette */
.svc-other-card.to-event-management    { --accent:#ff7f00; --accent-rgb:255 127 0;  --accent-dark:#e67200; }
.svc-other-card.to-digital-ticketing   { --accent:#0ea5e9; --accent-rgb:14 165 233; --accent-dark:#0284c7; }
.svc-other-card.to-awards-management   { --accent:#10b981; --accent-rgb:16 185 129; --accent-dark:#059669; }
.svc-other-card.to-branding-marketing  { --accent:#7c3aed; --accent-rgb:124 58 237; --accent-dark:#6d28d9; }
.svc-other-card.to-audience-engagement { --accent:#0891b2; --accent-rgb:8 145 178;  --accent-dark:#0e7490; }
.svc-other-card.to-event-support       { --accent:#d97706; --accent-rgb:217 119 6;  --accent-dark:#b45309; }

/* ============================================================
   CTA band
   ============================================================ */
.svc-cta-section {
  padding: 30px 0 60px;
}

.svc-cta-band {
  position: relative;
  overflow: hidden;
  border-radius: 32px;
  padding: 60px 48px;
  text-align: center;
  background:
    radial-gradient(ellipse 70% 120% at 50% -20%, rgb(var(--accent-rgb) / 0.18), transparent 70%),
    linear-gradient(160deg, #ffffff 0%, #f6f7fa 100%);
  border: 1px solid rgb(var(--accent-rgb) / 0.22);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.03),
    0 20px 50px rgba(0, 0, 0, 0.07);
}

/* Accent hairline across the top edge */
.svc-cta-band::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg,
      transparent,
      rgb(var(--accent-rgb) / 0.55),
      var(--accent),
      rgb(var(--accent-rgb) / 0.55),
      transparent);
}

.svc-cta-title {
  font-size: clamp(26px, 3.4vw, 38px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: #0f172a;
  margin: 0 0 14px;
  text-wrap: balance;
}

.svc-cta-text {
  font-size: 15.5px;
  line-height: 1.65;
  color: #64748b;
  max-width: 540px;
  margin: 0 auto 30px;
}

.svc-cta-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.svc-cta-note {
  margin: 24px 0 0;
  font-size: 13px;
  color: #94a3b8;
}

/* ============================================================
   Animation
   ============================================================ */
@keyframes svcFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}

@keyframes svcBarGrow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@keyframes svcBlink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}

/* Hero entrance — mirrors the landing hero choreography in main.css
   rather than using the scroll-reveal, so nothing flashes above the fold. */
.svc-breadcrumb   { animation: fadeUp 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) 0s    both; }
.svc-hero-copy .svc-eyebrow    { animation: fadeUp 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) 0.06s both; }
.svc-hero-title   { animation: fadeUp 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) 0.12s both; }
.svc-hero-lead    { animation: fadeUp 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) 0.18s both; }
.svc-hero-ctas    { animation: fadeUp 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) 0.24s both; }
.svc-hero-visual  { animation: fadeUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.30s both; }

/* ============================================================
   Responsive
   Breakpoints match main.css: 1024 / 900 / 768 / 640 / 480
   ============================================================ */
@media (max-width: 1024px) {
  .svc-hero {
    gap: 36px;
  }

  .svc-hero-emblem {
    width: 168px;
    height: 168px;
    border-radius: 38px;
  }

  .svc-hero-emblem svg {
    width: 70px;
    height: 70px;
  }

  .svc-deep-row {
    gap: 40px;
  }
}

@media (max-width: 900px) {
  .svc-hero {
    grid-template-columns: 1fr;
    padding: 40px 0 12px;
    text-align: center;
  }

  .svc-hero-lead {
    margin-left: auto;
    margin-right: auto;
  }

  .svc-hero-ctas,
  .svc-breadcrumb {
    justify-content: center;
  }

  /* Content first on a phone — the emblem is decorative, and putting it
     above the breadcrumb pushes the headline below the fold. */
  .svc-hero-visual {
    min-height: 210px;
    margin-top: 8px;
  }

  .svc-hero-emblem {
    width: 132px;
    height: 132px;
    border-radius: 32px;
  }

  .svc-hero-emblem svg {
    width: 56px;
    height: 56px;
  }

  /* Satellites crowd the emblem once it is centred */
  .svc-orbit-3 {
    display: none;
  }

  .svc-orbit-1 { left: 2%; }
  .svc-orbit-2 { right: 2%; }

  /* Visual always follows the copy, whichever way the row alternates */
  .svc-deep-row,
  .svc-deep-row.is-reversed {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 34px 0;
  }

  .svc-deep-row .svc-deep-copy,
  .svc-deep-row.is-reversed .svc-deep-copy {
    order: 1;
  }

  .svc-deep-row .svc-deep-visual,
  .svc-deep-row.is-reversed .svc-deep-visual {
    order: 2;
  }
}

@media (max-width: 768px) {
  .svc-section,
  .svc-deep {
    padding: 40px 0;
  }

  .svc-stats {
    padding: 20px 0 6px;
  }

  .svc-card,
  .svc-step {
    padding: 26px 22px 22px;
  }

  .svc-cta-band {
    padding: 44px 26px;
    border-radius: 26px;
  }

  .svc-mock-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .svc-hero-title {
    font-size: clamp(28px, 8vw, 40px);
  }

  .svc-hero-lead {
    font-size: 15.5px;
  }

  .svc-hero-ctas {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .svc-hero-ctas .cta-primary,
  .svc-hero-ctas .cta-secondary {
    width: 100%;
  }

  .svc-cta-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .svc-cta-actions .cta-primary,
  .svc-cta-actions .cta-secondary,
  .svc-cta-actions .btn {
    width: 100%;
  }

  .svc-other-card {
    padding: 18px 16px;
  }
}

@media (max-width: 480px) {
  .svc-orbit {
    font-size: 11.5px;
    padding: 7px 12px;
  }

  .svc-mock {
    padding: 15px;
  }

  .svc-mock-grid {
    grid-template-columns: 1fr;
  }

  .svc-mock-barrow .svc-mock-name {
    flex-basis: 66px;
    font-size: 11.5px;
  }

  .svc-cta-band {
    padding: 36px 20px;
    border-radius: 22px;
  }
}

/* ============================================================
   Reduced motion
   main.css only covers .reveal and the landing hero, so the
   animations introduced here are switched off explicitly.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .svc-hero-emblem,
  .svc-orbit,
  .svc-chip.is-live::before {
    animation: none;
  }

  .svc-breadcrumb,
  .svc-hero-copy .svc-eyebrow,
  .svc-hero-title,
  .svc-hero-lead,
  .svc-hero-ctas,
  .svc-hero-visual {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .svc-mock-bar-fill {
    animation: none;
    transform: none;
  }

  .svc-card,
  .svc-step,
  .svc-other-card {
    transition: none;
  }
}