/* =========================================================
   Diverse Commerce — VERSION 2 styles (loaded only by index2.php).
   Uses the same brand tokens as style.css; all classes are v2-prefixed
   so version 1 is never affected.
   ========================================================= */

@keyframes v2fade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------- V2 Services — vertical accordion rail (image6) ---------- */
.v2-services-grid { margin-top: 44px; display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 900px) { .v2-services-grid { grid-template-columns: 0.9fr 1.1fr; align-items: start; } }
.v2-services-rail { display: flex; flex-direction: column; gap: 12px; }
.v2-service-tab {
  display: flex; align-items: center; gap: 16px;
  padding: 18px 20px; border-radius: 14px;
  border: 1px solid var(--brand-light); background: var(--brand-white);
  text-align: left; transition: all 0.25s ease;
}
.v2-service-tab:hover { transform: translateX(3px); border-color: rgba(103, 33, 223, 0.3); }
.v2-service-tab-num { flex-shrink: 0; width: 44px; font-family: var(--font-heading); font-size: 1.6rem; font-weight: 800; line-height: 1; color: var(--brand-light); }
.v2-service-tab-body { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.v2-service-tab-label { font-family: var(--font-heading); font-size: 1.15rem; font-weight: 700; color: var(--brand-charcoal); }
.v2-service-tab-headline { font-size: 0.85rem; color: var(--brand-muted); }
.v2-service-tab-icon { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 11px; background: rgba(103, 33, 223, 0.08); color: var(--brand-purple); }
.v2-service-tab-icon .icon { width: 20px; height: 20px; }
.v2-service-tab.is-active { border-color: transparent; background: linear-gradient(135deg, var(--brand-purple), var(--brand-purple-bright)); box-shadow: 0 18px 40px -18px rgba(103, 33, 223, 0.6); }
.v2-service-tab.is-active .v2-service-tab-num { color: rgba(255, 255, 255, 0.5); }
.v2-service-tab.is-active .v2-service-tab-label { color: #fff; }
.v2-service-tab.is-active .v2-service-tab-headline { color: rgba(255, 255, 255, 0.8); }
.v2-service-tab.is-active .v2-service-tab-icon { background: var(--brand-lime); color: var(--brand-purple-black); }
.v2-service-panel { border-radius: 20px; border: 1px solid var(--brand-light); background: var(--brand-white); padding: 30px 26px; box-shadow: 0 22px 60px -34px rgba(103, 33, 223, 0.4); animation: v2fade 0.4s var(--ease-out); }
.v2-service-panel[hidden] { display: none; }
.v2-service-panel-badge { font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.14em; color: var(--brand-purple); }
.v2-service-panel-headline { margin-top: 10px; font-family: var(--font-heading); font-size: 1.7rem; font-weight: 700; color: var(--brand-charcoal); }
.v2-service-panel-summary { margin-top: 10px; font-size: 1rem; line-height: 1.6; color: var(--brand-muted); }
.v2-service-items { margin-top: 22px; display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 560px) { .v2-service-items { grid-template-columns: 1fr 1fr; } }
.v2-service-item { display: flex; gap: 12px; padding: 16px; border-radius: 12px; background: var(--brand-off-white); border: 1px solid var(--brand-light); }
.v2-service-item-num { flex-shrink: 0; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 8px; background: rgba(103, 33, 223, 0.1); font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--brand-purple); }
.v2-service-item-title { font-family: var(--font-heading); font-weight: 700; font-size: 0.95rem; color: var(--brand-charcoal); }
.v2-service-item-detail { margin-top: 5px; font-size: 0.83rem; line-height: 1.5; color: var(--brand-muted); }

/* ---------- V2 Partnership — vertical numbered flow (image3) ---------- */
.v2-flow { position: relative; margin-top: 44px; display: flex; flex-direction: column; gap: 22px; }
.v2-flow::before { content: ""; position: absolute; left: 27px; top: 24px; bottom: 24px; width: 2px; background: linear-gradient(var(--brand-purple), var(--brand-lime)); opacity: 0.25; }
.v2-flow-step { position: relative; display: flex; gap: 18px; align-items: flex-start; }
.v2-flow-num { position: relative; z-index: 1; flex-shrink: 0; width: 56px; height: 56px; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-size: 1.5rem; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--brand-purple), var(--brand-purple-bright)); box-shadow: 0 14px 30px -14px rgba(103, 33, 223, 0.6); }
.v2-flow-card { flex: 1; border-radius: 16px; border: 1px solid var(--brand-light); background: var(--brand-white); padding: 22px 24px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); transition: transform 0.3s ease, box-shadow 0.3s ease; }
.v2-flow-step:hover .v2-flow-card { transform: translateY(-3px); box-shadow: 0 22px 48px -22px rgba(103, 33, 223, 0.3); }
.v2-flow-card-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.v2-flow-title { font-family: var(--font-heading); font-size: 1.25rem; font-weight: 700; color: var(--brand-charcoal); }
.v2-flow-note { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 11px; color: var(--brand-purple); }
.v2-flow-note-icon { width: 14px; height: 14px; }
.v2-flow-body { margin-top: 10px; font-size: 0.95rem; line-height: 1.6; color: var(--brand-muted); }
.v2-flow-tiles { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px; }
.v2-flow-tile { padding: 7px 13px; border-radius: 999px; background: var(--brand-off-white); border: 1px solid var(--brand-light); font-size: 0.8rem; color: var(--brand-charcoal); }
.v2-flow-cta { margin-top: 34px; text-align: center; }

/* =========================================================================
   Problems — light treatment with a peak-chart graphic top-left
   White ground on purpose: the hero directly above is dark, and two dark
   bands back to back flattened the page.
   ========================================================================= */
/* Soft brand gradient rather than flat white, so the band still separates
   from the dark hero above without repeating it. */
.problems-stats {
  position: relative; overflow: hidden;
  background:
    radial-gradient(ellipse 62% 58% at 88% 6%, rgba(103, 33, 223, 0.13), transparent 62%),
    radial-gradient(ellipse 52% 46% at 4% 96%, rgba(197, 244, 61, 0.15), transparent 62%),
    linear-gradient(180deg, var(--brand-white) 0%, var(--brand-off-white) 100%);
}

/* Positioned against the container, so the chart's right edge lines up with
   the content grid instead of running to the section edge. */
.problems-stats .container { position: relative; }
.ps-graphic { position: absolute; top: 0; right: 18px; width: 560px; height: 340px; pointer-events: none; }
@media (min-width: 640px) { .ps-graphic { right: 24px; } }
@media (min-width: 1024px) { .ps-graphic { right: 32px; } }
.ps-chart { width: 100%; height: 100%; }
.ps-peak { fill: url(#psPeak); }
.ps-ridge { fill: none; stroke: var(--brand-purple); stroke-width: 2; stroke-linejoin: round; opacity: 0.35; }
.ps-base { stroke: var(--brand-purple); stroke-width: 1; opacity: 0.14; }
.ps-stem { stroke: var(--brand-purple); stroke-width: 1.5; stroke-dasharray: 4 5; opacity: 0.4; }
.ps-arrow { fill: var(--brand-purple); opacity: 0.55; }
.ps-node { fill: var(--brand-lime); stroke: var(--brand-purple); stroke-width: 1.5; }

/* Figures label each apex, low-contrast so the heading stays readable.
   dc-animations.css applies `.dc-bg * { position: absolute }` to everything
   inside a decoration layer, which collapses these flex boxes to zero size —
   the inner text has to be put back in normal flow explicitly. */
.ps-stat { position: absolute; display: flex; flex-direction: column; line-height: 1.2; }
.ps-stat strong,
.ps-stat em { position: static; }
.ps-chart { position: absolute; inset: 0; }
.ps-stat strong { font-family: var(--font-heading); font-size: 1.35rem; font-weight: 800; color: rgba(103, 33, 223, 0.34); }
.ps-stat em { margin-top: 2px; max-width: 7.5rem; font-style: normal; font-size: 0.66rem; color: rgba(105, 99, 112, 0.5); }
@media (max-width: 1023px) { .ps-graphic { display: none; } }

/* Narrower from the large breakpoint up, where the chart occupies the right
   of the container — keeps the copy clear of the figures. */
.ps-head { position: relative; z-index: 1; max-width: 44rem; }
@media (min-width: 1024px) { .ps-head { max-width: 36rem; } }
.ps-heading { margin-top: 18px; }
.ps-lead { margin-top: 20px; }

.ps-grid { position: relative; z-index: 1; margin-top: 48px; display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 560px) { .ps-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .ps-grid { grid-template-columns: repeat(4, 1fr); gap: 20px; } }

.ps-card {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; height: 100%;
  padding: 24px 22px; border-radius: 16px;
  border: 1px solid var(--brand-light); background: var(--brand-white);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.ps-card::before {
  content: ""; position: absolute; top: 0; left: 0; height: 3px; width: 0;
  background: linear-gradient(90deg, var(--brand-purple), var(--brand-lime));
  transition: width 0.4s ease;
}
.ps-card:hover { transform: translateY(-6px); border-color: rgba(103, 33, 223, 0.3); box-shadow: 0 26px 54px -24px rgba(103, 33, 223, 0.35); }
.ps-card:hover::before { width: 100%; }
.ps-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ps-card-chip {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 12px;
  background: linear-gradient(140deg, var(--brand-purple), var(--brand-purple-bright));
  color: #fff; box-shadow: 0 14px 28px -16px rgba(103, 33, 223, 0.8);
  transition: transform 0.3s ease;
}
.ps-card:hover .ps-card-chip { transform: translateY(-2px) rotate(-6deg); }
.ps-card-num { font-family: var(--font-mono); font-size: 12px; color: var(--brand-muted); }
.ps-card-title { margin-top: 20px; font-family: var(--font-heading); font-size: 1.02rem; font-weight: 700; line-height: 1.25; color: var(--brand-charcoal); }
.ps-card-desc { margin-top: 10px; font-size: 0.86rem; line-height: 1.6; color: var(--brand-muted); }

@media (prefers-reduced-motion: reduce) {
  .ps-card, .ps-card-chip { transition: none !important; }
}

/* =========================================================================
   About-model — operating model as a hub and spokes
   Eight numbered nodes ring a central core; four labels sit either side.
   Hovering a label lights its node, and vice versa (wired in v2.js).
   ========================================================================= */
.model-hub-head { max-width: 46rem; margin-inline: auto; text-align: center; }
.model-hub-heading { margin-inline: auto; }
.model-hub-lead { margin-inline: auto; }
.model-hub { margin-top: 40px; display: grid; grid-template-columns: 1fr; gap: 26px; align-items: center; }
@media (min-width: 1000px) { .model-hub { grid-template-columns: 1fr auto 1fr; gap: 30px; } }

.model-hub-col { display: grid; grid-template-columns: 1fr; gap: 26px; }
@media (min-width: 560px) and (max-width: 999px) { .model-hub-col { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .model-hub-col { gap: 34px; } }

/* Plain text spokes — no card, border or background, matching the reference. */
.model-hub-item { display: block; }
@media (min-width: 1000px) { .model-hub-col-left .model-hub-item { text-align: right; } }

.model-hub-item-label {
  display: block;
  font-family: var(--font-heading); font-weight: 700;
  font-size: 1.05rem; line-height: 1.3; letter-spacing: -0.01em;
  color: var(--brand-purple);
  transition: color 0.25s ease, transform 0.25s ease;
}
@media (min-width: 1200px) { .model-hub-item-label { font-size: 1.15rem; } }
.model-hub-item:hover .model-hub-item-label,
.model-hub-item.is-active .model-hub-item-label { color: var(--brand-purple-black); }

/* ---- The ring itself ---- */
.model-hub-ring {
  position: relative; justify-self: center;
  width: 260px; height: 260px;
}
@media (min-width: 560px) { .model-hub-ring { width: 300px; height: 300px; } }
@media (max-width: 999px) { .model-hub-ring { order: -1; } }

.model-hub-orbit { position: absolute; inset: 0; width: 100%; height: 100%; }
.model-hub-arc { fill: none; stroke-width: 4; stroke-linecap: round; }
.model-hub-arc-a, .model-hub-arc-c { stroke: var(--brand-purple); }
.model-hub-arc-b { stroke: var(--brand-lime-dark); }
.model-hub-arc-d { stroke: var(--brand-purple-black); }
.model-hub-tip-a, .model-hub-tip-c { fill: var(--brand-purple); }
.model-hub-tip-b { fill: var(--brand-lime-dark); }
.model-hub-tip-d { fill: var(--brand-purple-black); }

.model-hub-core {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  width: 118px; height: 118px; border-radius: 999px;
  background: linear-gradient(150deg, var(--brand-purple-black), var(--brand-purple-dark));
  box-shadow: 0 24px 54px -20px rgba(20, 13, 29, 0.8);
}
@media (min-width: 560px) { .model-hub-core { width: 136px; height: 136px; } }
.model-hub-core-chart { width: 62px; height: 38px; }
.model-hub-core-chart rect { fill: var(--brand-purple-bright); }
.model-hub-core-chart rect:nth-child(4) { fill: var(--brand-lime); }
.model-hub-core-line { fill: none; stroke: var(--brand-lime); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.model-hub-core-label { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); }

/* Nodes are placed by angle: rotate out to the radius, then counter-rotate
   so the number itself stays upright. */
.model-hub-node {
  position: absolute; top: 50%; left: 50%;
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 999px;
  font-family: var(--font-heading); font-size: 0.8rem; font-weight: 800;
  background: var(--brand-purple); color: #fff;
  box-shadow: 0 12px 26px -10px rgba(103, 33, 223, 0.7);
  transform: rotate(var(--a)) translate(115px) rotate(calc(var(--a) * -1));
  transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}
@media (min-width: 560px) { .model-hub-node { transform: rotate(var(--a)) translate(133px) rotate(calc(var(--a) * -1)); } }
.model-hub-node-alt { background: var(--brand-purple-black); }
.model-hub-node.is-active {
  background: var(--brand-lime); color: var(--brand-purple-black);
  box-shadow: 0 0 0 6px rgba(197, 244, 61, 0.25), 0 14px 30px -10px rgba(197, 244, 61, 0.9);
}

@media (prefers-reduced-motion: reduce) {
  .model-hub-item, .model-hub-node, .model-hub-item-icon { transition: none !important; }
}

/* =========================================================================
   About-model — illustration beside the copy
   The illustration carries its own labels (products, listings, orders,
   customer service, optimisation, operation), so nothing is overlaid on it.
   It leads on the left from the split breakpoint up; on narrow screens the
   copy comes first, which is the order it reads in the DOM.
   ========================================================================= */
.am-split { display: grid; grid-template-columns: 1fr; gap: 36px; align-items: center; }
@media (min-width: 1000px) { .am-split { grid-template-columns: 1fr 1fr; gap: 56px; } }

/* The shared .about-model-head is centred by style.css; in this split layout
   it sits in a column and reads left-aligned instead. */
.am-split-copy { max-width: none; margin-inline: 0; text-align: left; }
.am-split-copy .about-model-heading,
.am-split-copy .about-model-lead { margin-inline: 0; }
.am-split-copy .badge-row { justify-content: flex-start; }

.about-model-lead-2 { margin-top: 14px; font-size: 0.95rem; }

.am-figure { position: relative; display: flex; align-items: center; justify-content: center; }
@media (min-width: 1000px) { .am-figure { order: -1; } }

.am-figure img {
  position: relative; z-index: 1;
  width: 100%; max-width: 560px; height: auto;
  filter: drop-shadow(0 34px 60px rgba(20, 13, 29, 0.16));
}
@media (min-width: 1240px) { .am-figure img { max-width: 620px; } }

/* Purple wash behind the artwork, tying it to the rest of the page. */
.am-figure-glow {
  position: absolute; width: 74%; aspect-ratio: 1; border-radius: 999px;
  background: radial-gradient(circle, rgba(103, 33, 223, 0.28), transparent 70%);
  filter: blur(60px);
}

/* ---------- V2 Partnership — process steps around a centre device ---------- */
.v2-process-head { text-align: center; }
.v2-process-heading { margin-inline: auto; }
.v2-process-lead { margin-inline: auto; }

.v2-process { margin-top: 56px; display: grid; grid-template-columns: 1fr; gap: 44px; }
@media (min-width: 1080px) {
  .v2-process { grid-template-columns: 1fr 0.86fr 1fr; gap: 40px; align-items: center; margin-top: 64px; }
}

.v2-process-col { display: flex; flex-direction: column; gap: 40px; }
@media (min-width: 640px) and (max-width: 1079px) {
  .v2-process-col { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
}

.v2-process-step { position: relative; padding-left: 30px; }
/* Marker dot — sits on the outer edge of each column so the four steps
   frame the centre visual instead of all pointing the same way. */
.v2-process-step::before {
  content: ""; position: absolute; top: 12px; left: 0;
  width: 13px; height: 13px; border-radius: 999px;
  background: var(--brand-purple);
  box-shadow: 0 0 0 6px rgba(103, 33, 223, 0.1);
  transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}
.v2-process-step:hover::before { background: var(--brand-lime); box-shadow: 0 0 0 7px rgba(197, 244, 61, 0.22); transform: scale(1.1); }

@media (min-width: 1080px) {
  .v2-process-col-left .v2-process-step { padding-left: 0; padding-right: 30px; text-align: right; }
  .v2-process-col-left .v2-process-step::before { left: auto; right: 0; }
  .v2-process-col-left .v2-process-step-top { justify-content: flex-end; }
  .v2-process-col-left .v2-process-body { margin-left: auto; }
}

.v2-process-step-top { display: flex; align-items: center; gap: 14px; }
.v2-process-num {
  font-family: var(--font-heading); font-size: 3.4rem; font-weight: 800; line-height: 0.85;
  color: rgba(103, 33, 223, 0.16); letter-spacing: -0.02em; transition: color 0.3s ease;
}
.v2-process-step:hover .v2-process-num { color: rgba(103, 33, 223, 0.32); }
.v2-process-icon {
  display: flex; align-items: center; justify-content: center;
  width: 50px; height: 50px; border-radius: 14px;
  background: rgba(103, 33, 223, 0.08); color: var(--brand-purple);
  transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease;
}
.v2-process-icon .icon { width: 24px; height: 24px; }
.v2-process-step:hover .v2-process-icon { background: var(--brand-purple); color: #fff; transform: translateY(-3px) scale(1.06); }

.v2-process-title { margin-top: 16px; font-family: var(--font-heading); font-size: 1.2rem; font-weight: 700; color: var(--brand-charcoal); }
.v2-process-body { margin-top: 10px; max-width: 34rem; font-size: 0.9rem; line-height: 1.65; color: var(--brand-muted); }
@media (min-width: 1080px) { .v2-process-body { max-width: 22rem; } }

/* ---------- Centre device mockup ---------- */
.v2-process-visual { position: relative; display: flex; align-items: center; justify-content: center; min-height: 420px; padding: 20px 0; }
@media (min-width: 1080px) { .v2-process-visual { min-height: 560px; } }

.v2-device-glow { position: absolute; width: 320px; height: 320px; border-radius: 999px; background: radial-gradient(circle, rgba(103, 33, 223, 0.35), transparent 70%); filter: blur(60px); }
.v2-device-ring { position: absolute; width: 340px; height: 340px; border-radius: 999px; border: 1px dashed rgba(103, 33, 223, 0.18); animation: dc-rotate 46s linear infinite; }

.v2-device {
  position: relative; border-radius: 30px; padding: 8px;
  background: linear-gradient(160deg, #2c1c40, var(--brand-purple-black));
  box-shadow: 0 40px 90px -34px rgba(20, 13, 29, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
}
.v2-device-front { width: 232px; z-index: 2; }
.v2-device-back {
  position: absolute; width: 196px; z-index: 1;
  left: 50%; top: 50%; transform: translate(-86%, -54%) rotate(-8deg);
  opacity: 0.92;
}
@media (max-width: 519px) { .v2-device-back { display: none; } }

.v2-device-screen { border-radius: 24px; background: linear-gradient(170deg, #1d1329, #150e1f); padding: 16px 14px; overflow: hidden; }
.v2-device-cap { width: 46px; height: 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.16); margin: 0 auto 14px; }

.v2-device-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.v2-device-head-title { font-family: var(--font-heading); font-size: 0.8rem; font-weight: 700; color: #fff; }
.v2-device-live { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand-lime); }
.v2-device-live .status-dot { width: 6px; height: 6px; }

.v2-device-label { margin-top: 16px; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.45); }
.v2-device-figure { margin-top: 4px; font-family: var(--font-heading); font-size: 1.8rem; font-weight: 800; line-height: 1; color: #fff; }
.v2-device-chart { margin-top: 12px; width: 100%; height: 50px; }

.v2-device-eyebrow { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.45); margin-bottom: 10px; }

.v2-device-rows { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.v2-device-rows li,
.v2-device-tile { display: flex; align-items: center; gap: 9px; padding: 9px; border-radius: 11px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.07); }
.v2-device-tile { margin-bottom: 8px; }
.v2-device-row-icon,
.v2-device-tile-icon { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 8px; background: rgba(103, 33, 223, 0.45); color: #fff; }
.v2-device-row-icon .icon,
.v2-device-tile-icon .icon { width: 14px; height: 14px; }
.v2-device-row-bars,
.v2-device-bars { flex: 1; display: flex; flex-direction: column; gap: 5px; }
.v2-device-row-bars i,
.v2-device-bars i { display: block; height: 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.22); }
.v2-device-row-bars i:first-child,
.v2-device-bars i:first-child { background: rgba(255, 255, 255, 0.4); }
.v2-device-row-tick { flex-shrink: 0; display: flex; color: var(--brand-lime); }
.v2-device-row-tick .icon { width: 13px; height: 13px; }

.v2-device-badge {
  position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 14px; border-radius: 13px;
  background: rgba(255, 255, 255, 0.92); border: 1px solid var(--brand-light);
  box-shadow: 0 20px 46px -22px rgba(103, 33, 223, 0.5);
  backdrop-filter: blur(8px);
  animation: dc-float 7s ease-in-out infinite;
}
.v2-device-badge span { display: flex; flex-direction: column; line-height: 1.25; font-size: 0.7rem; color: var(--brand-muted); }
.v2-device-badge strong { font-family: var(--font-heading); font-size: 0.8rem; font-weight: 700; color: var(--brand-charcoal); }
.v2-device-badge-icon { width: 18px; height: 18px; color: var(--brand-purple); flex-shrink: 0; }
.v2-device-badge-top { top: 6%; right: 0; }
.v2-device-badge-bottom { bottom: 8%; left: 0; animation-delay: 2.2s; }
@media (min-width: 1080px) {
  .v2-device-badge-top { right: -14px; }
  .v2-device-badge-bottom { left: -14px; }
}

@media (prefers-reduced-motion: reduce) {
  .v2-device-ring,
  .v2-device-badge { animation: none !important; }
}

/* ---------- V2 Fit — own the business / your part (image17) ---------- */
.v2-fit-grid { margin-top: 20px; display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 900px) { .v2-fit-grid { grid-template-columns: 0.85fr 1.15fr; align-items: stretch; } }
.v2-fit-panel { display: flex; flex-direction: column; border-radius: 22px; padding: 34px 30px; color: #fff; background: linear-gradient(160deg, var(--brand-purple), var(--brand-purple-bright)); }
.v2-fit-panel-kicker { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 255, 255, 0.75); }
.v2-fit-panel-heading { margin-top: 16px; font-family: var(--font-heading); font-size: 2.1rem; font-weight: 800; line-height: 1.05; text-transform: uppercase; }
.v2-fit-panel-text { margin-top: 16px; font-size: 0.95rem; line-height: 1.6; color: rgba(255, 255, 255, 0.85); }
.v2-fit-panel-badge { margin-top: auto; align-self: flex-start; padding: 10px 18px; border-radius: 10px; background: var(--brand-lime); color: var(--brand-purple-black); font-family: var(--font-heading); font-weight: 700; font-size: 0.9rem; }
.v2-fit-panel-text + .v2-fit-panel-badge { margin-top: 28px; }
.v2-fit-list { border-radius: 22px; border: 1px solid var(--brand-light); background: var(--brand-white); padding: 8px; }
.v2-fit-list-label { padding: 14px 16px 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brand-muted); }
.v2-fit-row { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 14px; border-top: 1px solid var(--brand-light); transition: background 0.2s ease; }
.v2-fit-list-label + .v2-fit-row { border-top: 0; }
.v2-fit-row:hover { background: var(--brand-off-white); }
.v2-fit-row-num { flex-shrink: 0; font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--brand-purple); }
.v2-fit-row-body { flex: 1; }
.v2-fit-row-title { font-family: var(--font-heading); font-weight: 700; font-size: 1rem; color: var(--brand-charcoal); }
.v2-fit-row-detail { margin-top: 3px; font-size: 0.85rem; color: var(--brand-muted); }
.v2-fit-row-arrow { color: var(--brand-muted); display: flex; }
.v2-fit-row-arrow .icon { width: 16px; height: 16px; }
.v2-fit-notes { margin-top: 20px; display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 768px) { .v2-fit-notes { grid-template-columns: 1fr 1.4fr; } }
.v2-fit-note { padding: 22px 24px; border-radius: 16px; }
.v2-fit-note-light { border: 1px solid var(--brand-light); background: var(--brand-white); }
.v2-fit-note-dark { background: var(--brand-purple-black); color: #fff; }
.v2-fit-note-label { font-family: var(--font-heading); font-weight: 700; font-size: 1rem; color: var(--brand-charcoal); }
.v2-fit-note-dark .v2-fit-note-label { color: #fff; }
.v2-fit-note-text { margin-top: 8px; font-size: 0.88rem; line-height: 1.55; color: var(--brand-muted); }
.v2-fit-note-dark .v2-fit-note-text { color: rgba(255, 255, 255, 0.72); }
.v2-part { margin-top: 20px; border-radius: 22px; border: 1px solid var(--brand-light); background: var(--brand-white); padding: 30px 26px; }
.v2-part-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brand-purple); }
.v2-part-lead { margin-top: 6px; font-family: var(--font-heading); font-size: 1.3rem; font-weight: 700; color: var(--brand-charcoal); }
.v2-part-grid { margin-top: 24px; display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 768px) { .v2-part-grid { grid-template-columns: 1fr 1fr; gap: 40px; } }
.v2-part-col-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brand-muted); }
.v2-part-provide-row { margin-top: 14px; display: flex; gap: 12px; }
.v2-part-provide-num { flex-shrink: 0; width: 32px; height: 32px; border-radius: 9px; background: var(--brand-purple); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 12px; font-weight: 600; }
.v2-part-provide-title { font-family: var(--font-heading); font-weight: 700; font-size: 0.98rem; color: var(--brand-charcoal); }
.v2-part-provide-detail { margin-top: 3px; font-size: 0.85rem; color: var(--brand-muted); }
@media (min-width: 768px) { .v2-part-manage { border-left: 1px solid var(--brand-light); padding-left: 40px; } }
.v2-part-manage-heading { margin-top: 12px; font-family: var(--font-heading); font-size: 1.5rem; font-weight: 800; line-height: 1.1; text-transform: uppercase; color: var(--brand-charcoal); }
.v2-part-manage-text { margin-top: 12px; font-size: 0.92rem; line-height: 1.6; color: var(--brand-muted); }
.v2-part-manage-badge { display: inline-block; margin-top: 18px; padding: 9px 16px; border-radius: 8px; background: var(--brand-lime); color: var(--brand-purple-black); font-family: var(--font-heading); font-weight: 700; font-size: 0.88rem; }

/* ---------- V2 Pricing — two column (image1) ---------- */
.v2-pricing-grid { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: start; }
@media (min-width: 900px) { .v2-pricing-grid { grid-template-columns: 1fr 1.05fr; gap: 44px; } }
.v2-pricing-eyebrow { display: inline-block; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--brand-light); background: var(--brand-white); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brand-purple); }
.v2-pricing-intro .heading-lg { margin-top: 16px; }
.v2-plan-list { margin-top: 28px; display: flex; flex-direction: column; gap: 12px; }
/* Static fact rows — deliberately no hover, arrow or selected state, so they
   are not mistaken for selectable plan options. */
.v2-plan { display: flex; align-items: flex-start; gap: 13px; padding: 18px 20px; border-radius: 14px; border: 1px solid var(--brand-light); background: var(--brand-white); }
.v2-plan-name { font-family: var(--font-heading); font-weight: 700; font-size: 1rem; color: var(--brand-charcoal); }
.v2-plan-meta { margin-top: 3px; font-size: 0.82rem; color: var(--brand-muted); }
.v2-plan-mark { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; color: var(--brand-purple); }
.v2-plan-mark .icon { width: 20px; height: 20px; }
.v2-price-card { border-radius: 22px; border: 1px solid var(--brand-light); background: var(--brand-white); padding: 30px 28px; box-shadow: 0 30px 70px -36px rgba(103, 33, 223, 0.4); }
.v2-price-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.v2-price-card-title { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-heading); font-weight: 700; font-size: 1.1rem; color: var(--brand-charcoal); }
.v2-price-card-title-icon { width: 18px; height: 18px; color: var(--brand-purple); }
.v2-price-card-tag { padding: 6px 12px; border-radius: 999px; background: rgba(103, 33, 223, 0.1); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--brand-purple); }
.v2-price-value { margin-top: 18px; font-family: var(--font-heading); font-size: 3.4rem; font-weight: 800; line-height: 1; color: var(--brand-charcoal); }
.v2-price-period { font-size: 1rem; font-weight: 600; color: var(--brand-muted); margin-left: 6px; }
.v2-price-currencies { margin-top: 10px; font-size: 0.82rem; color: var(--brand-muted); }
.v2-price-cta { margin-top: 22px; display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 16px; border-radius: 12px; background: var(--brand-purple-black); color: #fff; font-family: var(--font-body); font-weight: 700; transition: background 0.2s ease, transform 0.2s ease; }
.v2-price-cta:hover { background: #241633; transform: translateY(-2px); }
.v2-price-divider { height: 1px; background: var(--brand-light); margin: 24px 0; }
.v2-price-list-label { font-family: var(--font-heading); font-weight: 700; font-size: 0.95rem; color: var(--brand-charcoal); }
.v2-price-list { margin-top: 14px; display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 520px) { .v2-price-list { grid-template-columns: 1fr 1fr; } }
.v2-price-list li { display: flex; align-items: center; gap: 8px; font-size: 0.86rem; color: var(--brand-charcoal); }
.v2-price-list-icon { flex-shrink: 0; width: 16px; height: 16px; color: var(--brand-purple); }
.v2-price-costs { margin-top: 24px; padding: 18px 20px; border-radius: 14px; background: var(--brand-off-white); border: 1px solid var(--brand-light); }
.v2-price-costs-label { display: flex; align-items: center; gap: 8px; font-family: var(--font-heading); font-weight: 700; font-size: 0.9rem; color: var(--brand-charcoal); }
.v2-price-costs-icon { width: 16px; height: 16px; color: var(--brand-purple); }
.v2-price-costs-note { margin-top: 8px; font-size: 0.82rem; line-height: 1.5; color: var(--brand-muted); }
.v2-price-costs-tags { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 7px; }
.v2-price-costs-tag { padding: 5px 11px; border-radius: 999px; background: var(--brand-white); border: 1px solid var(--brand-light); font-size: 0.76rem; color: var(--brand-muted); }

/* ---------- V2 CTA banner with image (image5) ---------- */
.v2-cta-banner { position: relative; overflow: hidden; border-radius: 26px; display: grid; grid-template-columns: 1fr; background: linear-gradient(135deg, var(--brand-purple), var(--brand-purple-bright)); box-shadow: 0 40px 90px -44px rgba(103, 33, 223, 0.7); }
@media (min-width: 820px) { .v2-cta-banner { grid-template-columns: 0.8fr 1.2fr; } }
.v2-cta-media { position: relative; min-height: 220px; }
.v2-cta-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.v2-cta-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(103, 33, 223, 0.15), rgba(103, 33, 223, 0.85)); }
@media (min-width: 820px) { .v2-cta-media::after { background: linear-gradient(90deg, rgba(103, 33, 223, 0) 30%, var(--brand-purple) 100%); } }
.v2-cta-copy { align-self: center; padding: 36px 30px; color: #fff; }
@media (min-width: 820px) { .v2-cta-copy { padding: 48px 44px; } }
.v2-cta-heading { font-family: var(--font-heading); font-size: 2rem; font-weight: 800; line-height: 1.1; }
.v2-cta-heading-lead { color: var(--brand-lime); }
.v2-cta-text { margin-top: 16px; max-width: 38rem; font-size: 1rem; line-height: 1.6; color: rgba(255, 255, 255, 0.85); }
.v2-cta-actions { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 14px; }
.v2-cta-btn-primary { background: var(--brand-white); color: var(--brand-purple-black); }
.v2-cta-btn-primary:hover { background: var(--brand-lime); transform: translateY(-2px); }
.v2-cta-btn-dark { background: var(--brand-purple-black); color: #fff; }
.v2-cta-btn-dark:hover { background: #241633; transform: translateY(-2px); }
.v2-cta-btn-icon { width: 16px; height: 16px; }

/* =========================================================================
   Operating cycle (#operating-cycle) — eight steps radiating from a hub
   Nodes sit every 45° from twelve o'clock, each on a spoke out of the core.
   Every step block is placed in the grid cell matching its node, so 01 sits
   above the hub, 03 and 07 line up with its centre, and 05 sits below.
   Hovering a step lights its node and spoke, and vice versa (wired in v2.js).
   ========================================================================= */
#operating-cycle .dc-blob { background: radial-gradient(circle, rgba(103, 33, 223, 0.3), transparent 70%); }
#operating-cycle .dc-blob-lime { background: radial-gradient(circle, rgba(197, 244, 61, 0.42), transparent 70%); }

.pcyc-head { max-width: 50rem; margin-inline: auto; text-align: center; }
.pcyc-heading { margin-inline: auto; }
.pcyc-lead { margin-top: 18px; margin-inline: auto; max-width: 44rem; }

/* Stacked below the radial breakpoint: ring first, then 01–08 in order. */
.pcyc { position: relative; z-index: 1; margin-top: 44px; display: grid; grid-template-columns: 1fr; gap: 30px; }
@media (min-width: 620px) and (max-width: 1039px) {
  .pcyc { grid-template-columns: 1fr 1fr; gap: 28px 32px; }
  .pcyc-ring { grid-column: 1 / -1; }
}
@media (min-width: 1040px) {
  .pcyc {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    grid-template-areas:
      ".  s01 ."
      "s08 ring s02"
      "s07 ring s03"
      "s06 ring s04"
      ".  s05 .";
    align-items: center;
    column-gap: 42px; row-gap: 26px;
  }
  .pcyc-ring { grid-area: ring; }
  .pcyc-item[data-pos="1"] { grid-area: s01; }
  .pcyc-item[data-pos="2"] { grid-area: s02; }
  .pcyc-item[data-pos="3"] { grid-area: s03; }
  .pcyc-item[data-pos="4"] { grid-area: s04; }
  .pcyc-item[data-pos="5"] { grid-area: s05; }
  .pcyc-item[data-pos="6"] { grid-area: s06; }
  .pcyc-item[data-pos="7"] { grid-area: s07; }
  .pcyc-item[data-pos="8"] { grid-area: s08; }

  /* Copy hugs the ring: right-hand steps run left-aligned, left-hand steps
     mirror them, and the steps above and below the hub centre on it. */
  .pcyc-item[data-pos="2"],
  .pcyc-item[data-pos="3"],
  .pcyc-item[data-pos="4"] { justify-self: start; text-align: left; }
  .pcyc-item[data-pos="6"],
  .pcyc-item[data-pos="7"],
  .pcyc-item[data-pos="8"] { justify-self: end; text-align: right; }
  .pcyc-item[data-pos="6"] .pcyc-item-num,
  .pcyc-item[data-pos="7"] .pcyc-item-num,
  .pcyc-item[data-pos="8"] .pcyc-item-num { flex-direction: row-reverse; }
  .pcyc-item[data-pos="6"] .pcyc-item-desc,
  .pcyc-item[data-pos="7"] .pcyc-item-desc,
  .pcyc-item[data-pos="8"] .pcyc-item-desc { margin-left: auto; }
  .pcyc-item[data-pos="1"],
  .pcyc-item[data-pos="5"] { justify-self: center; text-align: center; max-width: 30rem; }
  .pcyc-item[data-pos="1"] .pcyc-item-desc,
  .pcyc-item[data-pos="5"] .pcyc-item-desc { margin-inline: auto; }
}

.pcyc-item { position: relative; z-index: 1; }

.pcyc-item-num {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.16em; color: var(--brand-muted);
  transition: color 0.25s ease;
}
.pcyc-item-num::before { content: ""; width: 16px; height: 2px; border-radius: 2px; background: currentColor; opacity: 0.5; }

.pcyc-item-title {
  margin-top: 8px;
  font-family: var(--font-heading); font-weight: 800;
  font-size: 1.2rem; line-height: 1.2; letter-spacing: -0.015em;
  color: var(--brand-purple-black);
  transition: color 0.25s ease;
}
@media (min-width: 1240px) { .pcyc-item-title { font-size: 1.3rem; } }
.pcyc-item:nth-of-type(odd) .pcyc-item-title { color: var(--brand-purple); }
.pcyc-item:hover .pcyc-item-title,
.pcyc-item.is-active .pcyc-item-title { color: var(--brand-purple-bright); }
.pcyc-item:hover .pcyc-item-num,
.pcyc-item.is-active .pcyc-item-num { color: var(--brand-purple); }

.pcyc-item-desc { margin-top: 10px; max-width: 25rem; font-size: 0.9rem; line-height: 1.65; color: var(--brand-muted); }

/* ---- The hub ---- */
.pcyc-ring { position: relative; justify-self: center; width: 290px; height: 290px; }
@media (min-width: 560px) { .pcyc-ring { width: 340px; height: 340px; } }
@media (min-width: 1040px) { .pcyc-ring { width: 380px; height: 380px; } }
@media (min-width: 1240px) { .pcyc-ring { width: 430px; height: 430px; } }

.pcyc-orbit { position: absolute; inset: 0; width: 100%; height: 100%; }
.pcyc-track { fill: none; stroke: var(--brand-light); stroke-width: 1.2; }
.pcyc-spoke {
  stroke: var(--brand-purple-black); stroke-width: 2.4; stroke-linecap: round;
  opacity: 0.75; transition: stroke 0.25s ease, opacity 0.25s ease;
}
.pcyc-spoke.is-active { stroke: var(--brand-purple); opacity: 1; }

.pcyc-core {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
  width: 42%; height: 42%; border-radius: 999px;
  background: var(--brand-white);
  border: 1px solid var(--brand-light);
  box-shadow: 0 26px 56px -28px rgba(20, 13, 29, 0.5);
}
.pcyc-core-chart { width: 70%; max-width: 116px; height: auto; }

/* The hub keeps trading: bars rise and settle on a stagger while the trend
   line redraws itself over them. transform-box: fill-box puts each bar's
   origin on its own baseline, so they grow upward rather than from the
   viewBox corner. */
.pcyc-core-chart rect {
  fill: var(--brand-purple);
  transform-box: fill-box; transform-origin: 50% 100%;
  /* backwards: the staggered bars hold the 0% keyframe through their delay,
     so none of them start at full height and snap down. */
  animation: pcyc-bar 2.8s var(--ease-out) infinite backwards;
}
.pcyc-core-chart rect:nth-child(2) { animation-delay: 0.18s; }
.pcyc-core-chart rect:nth-child(3) { animation-delay: 0.36s; }
.pcyc-core-chart rect:nth-child(4) { fill: var(--brand-lime-dark); animation-delay: 0.54s; }
@keyframes pcyc-bar {
  0%, 100% { transform: scaleY(0.42); }
  45%, 70% { transform: scaleY(1); }
}

.pcyc-core-line {
  fill: none; stroke: var(--brand-purple-black); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 100; animation: pcyc-trend 2.8s ease-in-out infinite;
}
@keyframes pcyc-trend {
  0% { stroke-dashoffset: 100; opacity: 0; }
  12% { opacity: 1; }
  55% { stroke-dashoffset: 0; opacity: 1; }
  86% { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}
.pcyc-core-label { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brand-muted); }

/* Nodes rotate out to the track radius, then counter-rotate so the number
   itself stays upright. 78% of the ring radius matches the track circle. */
.pcyc-node {
  position: absolute; top: 50%; left: 50%;
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 999px;
  font-family: var(--font-heading); font-size: 0.8rem; font-weight: 800;
  background: var(--brand-purple); color: #fff;
  box-shadow: 0 14px 28px -12px rgba(103, 33, 223, 0.85);
  transform: rotate(var(--a)) translate(113px) rotate(calc(var(--a) * -1));
  transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}
/* Halo — the soft disc each node sits on. */
.pcyc-node::before {
  content: ""; position: absolute; inset: -13px; z-index: -1; border-radius: 999px;
  border: 1px solid var(--brand-light); background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 16px 34px -18px rgba(20, 13, 29, 0.45);
}
@media (min-width: 560px) { .pcyc-node { width: 46px; height: 46px; margin: -23px 0 0 -23px; font-size: 0.9rem; transform: rotate(var(--a)) translate(133px) rotate(calc(var(--a) * -1)); } }
@media (min-width: 1040px) { .pcyc-node { transform: rotate(var(--a)) translate(148px) rotate(calc(var(--a) * -1)); } }
@media (min-width: 1240px) { .pcyc-node { width: 52px; height: 52px; margin: -26px 0 0 -26px; font-size: 1rem; transform: rotate(var(--a)) translate(168px) rotate(calc(var(--a) * -1)); } }
.pcyc-node.is-active {
  background: var(--brand-lime); color: var(--brand-purple-black);
  box-shadow: 0 0 0 6px rgba(197, 244, 61, 0.25), 0 14px 30px -10px rgba(197, 244, 61, 0.9);
}

@media (prefers-reduced-motion: reduce) {
  .pcyc-node, .pcyc-item-title, .pcyc-item-num, .pcyc-spoke { transition: none !important; }
  .pcyc-core-chart rect, .pcyc-core-line { animation: none !important; }
}