/* ============================================================
   LOOPMERCE - Homepage Phase 2 (index.html only)
   Sections that replace the old "workflow covered" + "tools talk"
   Components:
     · TransformationSection (.transform)  · BeforeAfterToggle (.ba-toggle)
     · FragmentedWorkflowVisual (.ba-viz--before)
     · ConnectedWorkflowVisual (.ba-viz--after)
     · CoreFeaturesSection (.bento-section) · BentoFeatureCard (.bento__card)
     · OrderWorkflow (.wf / .timeline)      · ProductScreenshotFrame (.shot-crop)
   Loaded AFTER style.css + hero.css. Does not touch hero/header/pricing.
   ============================================================ */

/* ---- shared ------------------------------------------------ */
.sec-wrap { max-width: 1240px; margin: 0 auto; padding: 0 24px; }
.sec-title { font-size: clamp(2rem, 1.6rem + 2.2vw, 3.5rem); line-height: 1.03; letter-spacing: -.03em; font-weight: 900; color: var(--ink); }
.sec-lead  { font-size: clamp(1rem, 1.1vw, 1.13rem); line-height: 1.6; color: var(--muted); }
.sec-head--center { max-width: 760px; margin: 0 auto; text-align: center; }
.sec-head--center .sec-title { margin: 18px 0 0; }
.sec-head--center .sec-lead { margin: 18px auto 0; max-width: 660px; }

/* ============================================================
   1) TRANSFORMATION - Before/After Loopmerce
   ============================================================ */
.transform {
  position: relative; overflow: hidden;
  padding: clamp(48px, 6vw, 84px) 0 clamp(88px, 11vw, 148px);   /* trimmed top so the strip flows straight in */
  background: transparent;   /* sits on the continuous sky→white fade - no hard edge under the strip */
}
.transform::before {  /* subtle radial glow */
  content: ""; position: absolute; z-index: 0; inset: 0; pointer-events: none;
  background:
    radial-gradient(60% 40% at 50% 0%, rgba(60,130,246,.08), transparent 70%),
    radial-gradient(40% 30% at 85% 12%, rgba(21,169,138,.06), transparent 70%);
}
.transform .sec-wrap { position: relative; z-index: 1; }

/* Big rounded container */
.ba {
  margin-top: clamp(34px, 4vw, 52px);
  background: linear-gradient(180deg, #FBFCFE 0%, #FFFFFF 100%);
  border: 1px solid var(--line);
  border-radius: clamp(22px, 2.4vw, 30px);
  box-shadow: 0 1px 2px rgba(16,24,48,.04), 0 24px 60px rgba(16,24,48,.08);
  padding: clamp(20px, 2.6vw, 34px);
}

/* Segmented control */
.ba-toggle {
  position: relative; display: inline-flex; margin: 0 auto clamp(22px,2.6vw,32px);
  left: 50%; transform: translateX(-50%);
  background: var(--wash); border: 1px solid var(--line-2); border-radius: 100px; padding: 5px;
}
.ba-toggle__thumb {
  position: absolute; top: 5px; bottom: 5px; left: 5px; width: calc(50% - 5px);
  border-radius: 100px; background: #fff;
  box-shadow: 0 1px 2px rgba(16,24,48,.06), 0 6px 16px rgba(16,24,48,.10);
  transition: transform .3s cubic-bezier(.2,.7,.2,1);
}
.ba-toggle[data-active="after"] .ba-toggle__thumb { transform: translateX(100%); }
.ba-tab {
  position: relative; z-index: 1; border: 0; background: transparent; cursor: pointer;
  font-family: inherit; font-weight: 650; font-size: .95rem; color: var(--muted);
  padding: 11px 26px; border-radius: 100px; min-width: 168px; transition: color .2s ease;
}
.ba-tab.is-active { color: var(--ink); }
.ba-tab:focus-visible { outline: 3px solid color-mix(in srgb, var(--blue) 45%, transparent); outline-offset: 2px; }

/* Panels (stacked so height stays stable → no dramatic jump) */
.ba-panels { display: grid; }
.ba-panel {
  grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateX(14px);
  transition: opacity .35s ease, transform .4s cubic-bezier(.2,.7,.2,1), visibility .35s;
}
.ba-panel.is-active { opacity: 1; visibility: visible; transform: none; }

.ba-grid { display: grid; grid-template-columns: 1.12fr .88fr; gap: clamp(24px, 3vw, 48px); align-items: center; }

/* Content column */
.ba-content h3 { font-size: clamp(1.35rem, 1.8vw, 1.7rem); letter-spacing: -.02em; margin-bottom: 16px; color: var(--ink); }
.ba-list { display: grid; gap: 12px; }
.ba-list li { display: flex; gap: 12px; align-items: flex-start; font-size: .98rem; color: var(--ink-2); line-height: 1.45; }
.ba-list li .mk { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; margin-top: 1px; }
.ba-list li .mk svg { width: 13px; height: 13px; }
.ba-list--after .mk { background: #E4F5EF; color: #11916F; }
.ba-list--before .mk { background: #FBE7E5; color: #CF5B52; }

.ba-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 24px; }
.ba-metric {
  background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 14px 14px;
  box-shadow: 0 1px 2px rgba(16,24,48,.04);
}
.ba-metric .mi { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-ink); margin-bottom: 9px; }
.ba-metric .mi svg { width: 15px; height: 15px; }
.ba-metric span { display: block; font-size: .82rem; font-weight: 650; color: var(--ink); line-height: 1.3; }

/* Visual - shared */
.ba-viz { position: relative; border-radius: 20px; min-height: 356px; overflow: hidden; padding: clamp(18px, 2.4vw, 30px); }

/* AFTER - connected */
.ba-viz--after {
  background: linear-gradient(160deg, #EAF2FE 0%, #F4FAFF 55%, #EFFaf6 100%);
  border: 1px solid #DCE8FB; display: flex; flex-direction: column; justify-content: center; gap: 22px;
}
.wf-title { font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-ink); text-align: center; }
.flow { display: flex; align-items: stretch; }
.stage {
  flex: 1 1 0; min-width: 0; background: #fff; border: 1px solid var(--line); border-radius: 14px;
  padding: 16px 12px; text-align: center; box-shadow: 0 1px 2px rgba(16,24,48,.05), 0 10px 24px rgba(16,24,48,.07);
}
.stage__ic { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; margin: 0 auto 10px; background: var(--accent-soft); }
.stage__ic img { width: 24px; height: 24px; }
.stage__t { font-size: .9rem; font-weight: 700; color: var(--ink); }
.stage__steps { margin-top: 8px; display: grid; gap: 5px; }
.stage__steps span { font-size: .72rem; color: var(--muted); background: var(--wash); border-radius: 6px; padding: 3px 6px; }
.stage--rep { --accent-soft: #E9EEF6; }
.stage--ship { --accent-soft: #EAF2FE; }
.stage--invoice { --accent-soft: #E4F5EF; }
.connector { flex: 0 0 30px; display: grid; place-items: center; color: #11916F; align-self: center; }
.connector svg { width: 22px; height: 22px; }
.flow-caption { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: .82rem; font-weight: 600; color: var(--accent-ink); }
.flow-caption .dot { width: 7px; height: 7px; border-radius: 50%; background: #11916F; }

/* BEFORE - fragmented */
.ba-viz--before { background: linear-gradient(170deg, #FBF3F2 0%, #F7F1F1 100%); border: 1px solid #F0E1DF; }
.ba-viz--before .broken { position: absolute; inset: 0; z-index: 0; }
.ba-viz--before .broken path { stroke: #E4B7B2; stroke-width: 2; stroke-dasharray: 4 7; fill: none; }
.portal {
  position: absolute; z-index: 1; display: flex; align-items: center; gap: 9px;
  background: #fff; border: 1px solid #EEDCDA; border-radius: 12px; padding: 10px 13px 10px 11px;
  box-shadow: 0 2px 6px rgba(120,60,55,.06), 0 12px 26px rgba(120,60,55,.08);
  font-size: .82rem; font-weight: 650; color: #6E5E5D; white-space: nowrap;
}
.portal .pico { width: 26px; height: 26px; border-radius: 8px; background: #F5E7E5; color: #C2635C; display: grid; place-items: center; }
.portal .pico svg { width: 15px; height: 15px; }
.portal .pdot { position: absolute; top: -5px; right: -5px; width: 15px; height: 15px; border-radius: 50%; background: #E4685F; border: 2px solid #fff; display: grid; place-items: center; }
.portal .pdot svg { width: 8px; height: 8px; color: #fff; }
.portal--1 { top: 7%;  left: 5%;  transform: rotate(-2deg); }
.portal--2 { top: 30%; left: 40%; transform: rotate(1.5deg); }
.portal--3 { top: 9%;  right: 6%; transform: rotate(2deg); }
.portal--4 { bottom: 20%; left: 9%; transform: rotate(1deg); }
.portal--5 { bottom: 9%; right: 10%; transform: rotate(-1.5deg); }

/* ============================================================
   2) CORE FEATURES - bento
   ============================================================ */
.bento-section {
  padding: clamp(88px, 11vw, 148px) 0;
  background: linear-gradient(180deg, #FFFFFF 0%, #F4F7FC 12%, #F3F6FC 100%);
}
.bento-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 28px;
  margin-bottom: clamp(30px, 4vw, 48px);
}
.bento-head__text { max-width: 640px; }
.bento-head__text .sec-title { margin: 16px 0 0; }
.bento-head__text .sec-lead { margin-top: 16px; }
.bento-head__cta { flex: 0 0 auto; }

.bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; }
.bento__card {
  position: relative; overflow: hidden; display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line); border-radius: clamp(20px, 1.8vw, 28px);
  padding: clamp(22px, 2vw, 30px);
  box-shadow: 0 1px 2px rgba(16,24,48,.04), 0 14px 34px rgba(16,24,48,.06);
  transition: transform .22s ease, box-shadow .24s ease, border-color .24s ease;
}
.bento__card:hover { transform: translateY(-3px); box-shadow: 0 2px 6px rgba(16,24,48,.05), 0 20px 44px rgba(16,24,48,.10); border-color: color-mix(in srgb, var(--accent, var(--blue)) 30%, var(--line)); }
.bento__eyebrow { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-ink); background: var(--accent-soft); padding: 5px 11px; border-radius: 100px; }
.bento__card h3 { font-size: clamp(1.2rem, 1.4vw, 1.45rem); letter-spacing: -.02em; margin: 14px 0 8px; color: var(--ink); }
.bento__card--1 h3 { font-size: clamp(1.4rem, 1.7vw, 1.75rem); }
.bento__card p { font-size: .96rem; line-height: 1.55; color: var(--muted); }
.bento__chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; }
.bento__chips span { font-size: .76rem; font-weight: 600; color: var(--ink-2); background: var(--wash); border: 1px solid var(--line-2); border-radius: 100px; padding: 5px 11px; }

/* accents per card */
.bento__card--1 { --accent: var(--blue);  --accent-ink: #1D5FCB; --accent-soft: #EAF2FE; }
.bento__card--2 { --accent: var(--navy);  --accent-ink: #16305A; --accent-soft: #E9EEF6; }
.bento__card--3 { --accent: var(--blue);  --accent-ink: #1D5FCB; --accent-soft: #EAF2FE; }
.bento__card--4 { --accent: var(--teal);  --accent-ink: #0E8A72; --accent-soft: #E4F5EF; }
.bento__card--5 { --accent: var(--navy);  --accent-ink: #16305A; --accent-soft: #E9EEF6; }
.bento__card--6 { --accent: var(--blue);  --accent-ink: #1D5FCB; --accent-soft: #EAF2FE; }

/* grid placement */
.bento__card--1 { grid-column: span 7; }
.bento__card--2 { grid-column: span 5; }
.bento__card--3 { grid-column: span 4; }
.bento__card--4 { grid-column: span 4; }
.bento__card--5 { grid-column: span 4; }
.bento__card--6 { grid-column: span 12; }

/* image-dominant cards: text on top, screenshot fills the rest */
.bento__card--1, .bento__card--2, .bento__card--4 { padding-bottom: 0; }
.bento__card--1 .bento__body, .bento__card--2 .bento__body, .bento__card--4 .bento__body { padding-bottom: clamp(18px, 1.6vw, 24px); }

/* ProductScreenshotFrame - real screenshot crops with fade mask */
.shot-crop {
  position: relative; margin-top: auto; border-top: 1px solid var(--line-2);
  border-radius: 14px 14px 0 0; overflow: hidden; background: #F7F9FD;
  -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 78%, transparent 100%);
}
.shot-crop img { display: block; width: 100%; height: 100%; object-fit: cover; }
.shot-crop--ship { aspect-ratio: 16 / 8.4; }
.shot-crop--ship img { object-position: left top; transform: scale(1.02); }
.shot-crop--rep { aspect-ratio: 16 / 9; }
.shot-crop--rep img { object-position: right top; transform: scale(1.4); transform-origin: right top; }
.shot-crop--invoice { aspect-ratio: 16 / 8.4; }
.shot-crop--invoice img { object-position: right top; transform: scale(1.18); transform-origin: right top; }

/* Card 3 - abstract shipping flow */
.mini { margin-top: 18px; display: grid; gap: 10px; }
.mini-row { display: flex; align-items: center; gap: 10px; }
.mini-node { flex: 1 1 0; display: flex; align-items: center; gap: 9px; background: var(--wash); border: 1px solid var(--line-2); border-radius: 11px; padding: 10px 12px; font-size: .82rem; font-weight: 600; color: var(--ink-2); }
.mini-node .mn-ic { width: 24px; height: 24px; border-radius: 7px; background: #EAF2FE; color: #1D5FCB; display: grid; place-items: center; flex: 0 0 auto; }
.mini-node .mn-ic svg { width: 14px; height: 14px; }
.mini-node--done { border-color: #CDE9DC; background: #F1FAF6; color: #0E8A72; }
.mini-arrow { align-self: center; color: var(--blue); display: grid; place-items: center; }
.mini-arrow svg { width: 18px; height: 18px; }
.label-shape { height: 46px; border-radius: 9px; border: 1.5px dashed #9EC0F2; background: repeating-linear-gradient(135deg,#EAF2FE,#EAF2FE 8px,#F4F8FE 8px,#F4F8FE 16px); display: flex; align-items: center; padding: 0 12px; gap: 8px; font-size: .78rem; font-weight: 650; color: #1D5FCB; }

/* Card 5 - timeline (OrderWorkflow) */
.timeline { margin-top: 18px; display: grid; gap: 0; }
.tl-item { position: relative; display: flex; gap: 12px; padding-bottom: 16px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before { content: ""; position: absolute; left: 10px; top: 22px; bottom: -2px; width: 2px; background: var(--line); }
.tl-item:last-child::before { display: none; }
.tl-dot { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 2px solid var(--accent, var(--navy)); display: grid; place-items: center; z-index: 1; }
.tl-dot span { width: 8px; height: 8px; border-radius: 50%; background: var(--accent, var(--navy)); }
.tl-item--done .tl-dot { background: #11916F; border-color: #11916F; }
.tl-item--done .tl-dot span { background: #fff; }
.tl-label { font-size: .9rem; font-weight: 600; color: var(--ink-2); padding-top: 1px; }

/* Card 6 - full-width connected workflow */
.bento__card--6 { background: linear-gradient(120deg, #EFF5FE 0%, #F6FAFF 46%, #EFFAF5 100%); }
.wf6 { display: grid; grid-template-columns: 1fr 1.4fr; gap: clamp(24px, 3vw, 48px); align-items: center; }
.wf6__copy h3 { margin-top: 12px; }
.wf6__flow { display: flex; align-items: center; }
.wf6__node { flex: 1 1 0; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 18px 14px; text-align: center; box-shadow: 0 1px 2px rgba(16,24,48,.05), 0 12px 26px rgba(16,24,48,.08); }
.wf6__node .wn-ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; margin: 0 auto 10px; background: var(--wash); }
.wf6__node .wn-ic img { width: 26px; height: 26px; }
.wf6__node .wn-t { font-size: .88rem; font-weight: 700; color: var(--ink); }
.wf6__node .wn-s { margin-top: 6px; display: inline-flex; align-items: center; gap: 5px; font-size: .72rem; font-weight: 600; color: #0E8A72; }
.wf6__node .wn-s .d { width: 6px; height: 6px; border-radius: 50%; background: #11916F; }
.wf6__conn { flex: 0 0 34px; display: grid; place-items: center; color: var(--blue); }
.wf6__conn svg { width: 22px; height: 22px; }

/* ---- reveal stagger ---------------------------------------- */
.bento__card.reveal { transition-duration: .6s; }
.bento__card--1.reveal { transition-delay: .0s; }
.bento__card--2.reveal { transition-delay: .06s; }
.bento__card--3.reveal { transition-delay: .12s; }
.bento__card--4.reveal { transition-delay: .16s; }
.bento__card--5.reveal { transition-delay: .2s; }
.bento__card--6.reveal { transition-delay: .1s; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 980px) {
  .ba-grid { grid-template-columns: 1fr; }
  .ba-viz { min-height: 300px; }
  .bento-head { flex-direction: column; align-items: flex-start; }
  .bento { grid-template-columns: repeat(6, 1fr); }
  .bento__card--1, .bento__card--2 { grid-column: span 6; }
  .bento__card--3, .bento__card--4, .bento__card--5 { grid-column: span 2; }
  .bento__card--6 { grid-column: span 6; }
  .wf6 { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  .ba-tab { min-width: 0; flex: 1; padding: 11px 14px; }
  .ba-toggle { display: flex; width: 100%; left: 0; transform: none; }
  .ba-metrics { grid-template-columns: 1fr; }
  /* fragmented visual → stack instead of absolute overlap */
  .ba-viz--before { display: flex; flex-wrap: wrap; gap: 10px; align-content: center; }
  .ba-viz--before .broken { display: none; }
  .portal { position: static; transform: none !important; flex: 1 1 44%; justify-content: center; }
  .flow { flex-direction: column; gap: 4px; }
  .connector { flex: 0 0 auto; transform: rotate(90deg); padding: 2px 0; }

  .bento { grid-template-columns: 1fr; gap: 16px; }
  .bento__card { grid-column: 1 / -1 !important; }
  .wf6__flow { flex-direction: column; }
  .wf6__conn { transform: rotate(90deg); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ba-panel { transition: none; }
  .ba-toggle__thumb { transition: none; }
  .bento__card { transition: none; }
}

/* ============================================================
   PHASE 3 - Founder · Integrations · Reviews
   ============================================================ */
.lp-sec { position: relative; padding: clamp(84px, 10.5vw, 146px) 0; }
.lp-head { max-width: 660px; }
.lp-head .sec-title { margin: 16px 0 0; }
.lp-head .sec-lead { margin-top: 16px; }

/* ---------- FOUNDER / TRUST ---------- */
.founder { background: #fff; }
.founder__grid { display: grid; grid-template-columns: .92fr 1.08fr; gap: clamp(22px, 2.4vw, 38px); align-items: stretch; margin-top: clamp(30px,3.4vw,48px); }

.founder__story {
  position: relative; overflow: hidden; display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: clamp(22px, 2.2vw, 28px);
  background: linear-gradient(158deg, #ECF3FD 0%, #F6FAFF 58%, #EFFAF6 100%);
  padding: clamp(26px, 2.6vw, 40px);
}
.founder__story .eyebrow { align-self: flex-start; }
.founder__story .sec-title { font-size: clamp(1.75rem, 1.3rem + 1.7vw, 2.6rem); }
.founder__miniflow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: clamp(24px,2.6vw,34px); }
.founder__chip { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--line); border-radius: 100px; padding: 8px 14px; font-size: .82rem; font-weight: 650; color: var(--ink-2); box-shadow: 0 1px 2px rgba(16,24,48,.05); }
.founder__chip .d { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; }
.founder__chip .d svg { width: 13px; height: 13px; }
.founder__chip--rep .d { background: #E9EEF6; color: #16305A; }
.founder__chip--ship .d { background: #EAF2FE; color: #1D5FCB; }
.founder__chip--inv .d { background: #E4F5EF; color: #0E8A72; }
.founder__arrow { color: var(--blue); display: grid; place-items: center; }
.founder__arrow svg { width: 16px; height: 16px; }
.founder__by { display: flex; align-items: center; gap: 13px; margin-top: auto; padding-top: 24px; }
.founder__by::before { content: ""; position: absolute; }
.founder__mark { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: #fff; border: 1px solid var(--line); flex: 0 0 auto; }
.founder__mark img { width: 27px; height: 27px; }
.founder__by-t strong { display: block; font-size: .92rem; color: var(--ink); }
.founder__by-t span { font-size: .82rem; color: var(--muted); }
.founder__by { border-top: 1px solid color-mix(in srgb, var(--line) 65%, transparent); }

.founder__trust { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 1.4vw, 18px); }
.tcard { position: relative; background: #fff; border: 1px solid var(--line); border-radius: clamp(16px, 1.6vw, 20px); padding: clamp(20px, 1.8vw, 26px); box-shadow: 0 1px 2px rgba(16,24,48,.04), 0 12px 30px rgba(16,24,48,.05); transition: transform .2s ease, box-shadow .22s ease, border-color .22s ease; }
.tcard:hover { transform: translateY(-2px); box-shadow: 0 2px 6px rgba(16,24,48,.05), 0 18px 40px rgba(16,24,48,.09); border-color: color-mix(in srgb, var(--accent) 28%, var(--line)); }
.tcard__ic { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-ink); margin-bottom: 15px; }
.tcard__ic svg { width: 23px; height: 23px; }
.tcard h3 { font-size: 1.06rem; letter-spacing: -.01em; margin-bottom: 7px; color: var(--ink); }
.tcard p { font-size: .9rem; line-height: 1.5; color: var(--muted); }
.tcard--wide { grid-column: 1 / -1; display: flex; align-items: center; gap: 18px; }
.tcard--wide .tcard__ic { margin-bottom: 0; flex: 0 0 auto; }
.tcard--wide h3 { margin-bottom: 4px; }
.tcard--1 { --accent: var(--blue); --accent-ink: #1D5FCB; --accent-soft: #EAF2FE; }
.tcard--2 { --accent: var(--navy); --accent-ink: #16305A; --accent-soft: #E9EEF6; }
.tcard--3 { --accent: var(--teal); --accent-ink: #0E8A72; --accent-soft: #E4F5EF; }
.tcard--4 { --accent: var(--blue); --accent-ink: #1D5FCB; --accent-soft: #EAF2FE; }
.tcard--wide { --accent: var(--navy); --accent-ink: #16305A; --accent-soft: #E9EEF6; }

/* ---------- INTEGRATIONS ---------- */
.intg { background: linear-gradient(180deg, #FFFFFF 0%, #F3F6FC 26%, #F1F5FC 100%); }
.intg__grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(28px, 3.4vw, 56px); align-items: center; margin-top: clamp(28px,3vw,44px); }
.intg__labels { display: grid; gap: 11px; margin-top: 24px; }
.intg__label { display: inline-flex; align-items: center; gap: 11px; font-size: .95rem; font-weight: 600; color: var(--ink-2); }
.intg__label .li { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-ink); flex: 0 0 auto; }
.intg__label .li svg { width: 15px; height: 15px; }

.intg__board { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: clamp(22px, 2.2vw, 30px); background: #fff; padding: clamp(26px, 2.6vw, 40px); box-shadow: 0 1px 2px rgba(16,24,48,.04), 0 24px 56px rgba(16,24,48,.08); }
.intg__board::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 50% at 50% -6%, rgba(60,130,246,.10), transparent 70%); pointer-events: none; }
.intg__hub { position: relative; display: flex; justify-content: center; }
.intg__hub .hchip { display: inline-flex; align-items: center; gap: 9px; background: linear-gradient(180deg, #fff, var(--wash)); border: 1px solid var(--line); border-radius: 100px; padding: 9px 17px; font-weight: 700; font-size: .9rem; color: var(--ink); box-shadow: 0 1px 2px rgba(16,24,48,.05), 0 8px 20px rgba(16,24,48,.09); }
.intg__hub .hchip img { width: 22px; height: 22px; }
.intg__spine { position: relative; height: 28px; }
.intg__spine::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: linear-gradient(180deg, var(--blue), color-mix(in srgb, var(--blue) 30%, var(--line))); transform: translateX(-50%); transform-origin: top; }
.reveal.in .intg__spine::before, .intg__spine::before { animation: none; }
.intg__slots { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(10px, 1vw, 15px); }
.intg__slots::before { content: ""; position: absolute; top: 30px; left: 6%; right: 6%; height: 2px; background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--blue) 35%, var(--line)) 0 7px, transparent 7px 15px); z-index: 0; }
.intg-slot { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 12px; background: var(--wash); border: 1px solid var(--line-2); border-radius: 16px; padding: clamp(16px, 1.5vw, 22px) 10px 14px; transition: transform .2s ease, box-shadow .22s ease, background .22s ease; }
.intg-slot::before { content: ""; position: absolute; top: -8px; left: 50%; width: 9px; height: 9px; border-radius: 50%; background: #fff; border: 2px solid var(--blue); transform: translateX(-50%); }
.intg-slot:hover { transform: translateY(-3px); background: #fff; box-shadow: 0 12px 28px rgba(16,24,48,.08); }
.intg-slot img { height: 30px; width: auto; opacity: .72; filter: grayscale(1); }
.intg-slot .cap { font-size: .72rem; font-weight: 650; color: var(--muted); }

/* ---------- REVIEWS / PROOF ---------- */
.reviews { background: linear-gradient(180deg, #F1F5FC 0%, #F4F7FC 100%); }
.reviews__note { font-size: .84rem; color: var(--muted); margin-top: 14px; }
.reviews__grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(16px, 1.6vw, 22px); margin-top: clamp(28px, 3vw, 44px); align-items: stretch; }
.reviews__right { display: grid; gap: clamp(16px, 1.6vw, 22px); }
.quote { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: clamp(18px, 1.8vw, 24px); padding: clamp(24px, 2.2vw, 34px); box-shadow: 0 1px 2px rgba(16,24,48,.04), 0 14px 34px rgba(16,24,48,.06); transition: transform .2s ease, box-shadow .22s ease; --accent: var(--blue); --accent-ink: #1D5FCB; --accent-soft: #EAF2FE; }
.quote:hover { transform: translateY(-3px); box-shadow: 0 2px 6px rgba(16,24,48,.05), 0 22px 48px rgba(16,24,48,.10); }
.quote__mark { font-family: Georgia, "Times New Roman", serif; font-size: 3rem; line-height: .6; height: 24px; color: var(--accent); opacity: .28; }
.quote p { font-size: clamp(1rem, 1.05vw, 1.12rem); line-height: 1.55; color: var(--ink-2); }
.quote--featured { --accent: var(--navy); --accent-ink: #16305A; --accent-soft: #E9EEF6; }
.quote--featured p { font-size: clamp(1.14rem, 1.4vw, 1.5rem); line-height: 1.45; color: var(--ink); font-weight: 500; letter-spacing: -.01em; }
.quote--teal { --accent: var(--teal); --accent-ink: #0E8A72; --accent-soft: #E4F5EF; }
.quote__by { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 22px; }
.quote__av { width: 42px; height: 42px; border-radius: 12px; background: var(--accent-soft); color: var(--accent-ink); display: grid; place-items: center; flex: 0 0 auto; }
.quote__av svg { width: 21px; height: 21px; }
.quote__by-t strong { display: block; font-size: .9rem; color: var(--ink); }
.quote__by-t span { font-size: .8rem; color: var(--muted); }
.quote__ph { position: absolute; top: 16px; right: 16px; font-size: .62rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); background: var(--wash); border: 1px solid var(--line-2); padding: 4px 9px; border-radius: 100px; }

.reviews__proof { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(12px, 1.2vw, 16px); margin-top: clamp(16px, 1.6vw, 22px); }
.pblock { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: clamp(16px, 1.4vw, 20px); box-shadow: 0 1px 2px rgba(16,24,48,.04); transition: transform .2s ease, box-shadow .22s ease; }
.pblock:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(16,24,48,.07); }
.pblock .pi { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: #EAF2FE; color: #1D5FCB; margin-bottom: 12px; }
.pblock .pi svg { width: 16px; height: 16px; }
.pblock span { font-size: .86rem; font-weight: 650; color: var(--ink); line-height: 1.35; }

/* ---------- reveal stagger (reuse shared .reveal) ---------- */
.founder__trust .tcard.reveal:nth-child(1) { transition-delay: .0s; }
.founder__trust .tcard.reveal:nth-child(2) { transition-delay: .06s; }
.founder__trust .tcard.reveal:nth-child(3) { transition-delay: .12s; }
.founder__trust .tcard.reveal:nth-child(4) { transition-delay: .18s; }
.founder__trust .tcard.reveal:nth-child(5) { transition-delay: .22s; }
.intg-slot.reveal:nth-child(1){transition-delay:.04s;} .intg-slot.reveal:nth-child(2){transition-delay:.1s;} .intg-slot.reveal:nth-child(3){transition-delay:.16s;} .intg-slot.reveal:nth-child(4){transition-delay:.22s;} .intg-slot.reveal:nth-child(5){transition-delay:.28s;}

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  .founder__grid { grid-template-columns: 1fr; }
  .intg__grid { grid-template-columns: 1fr; }
  .reviews__grid { grid-template-columns: 1fr; }
  .reviews__proof { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
  .founder__trust { grid-template-columns: 1fr; }
  .tcard--wide { flex-direction: row; }
  .intg__slots { grid-template-columns: repeat(2, 1fr); }
  .intg__slots::before { display: none; }
  .intg-slot::before { display: none; }
  .reviews__proof { grid-template-columns: 1fr; }
}

/* ============================================================
   INTEGRATIONS v2 - radial orbit composition
   Components: IntegrationsSection · IntegrationOrbit · IntegrationNode · IntegrationLogo
   Node geometry lives in per-node CSS custom properties (--x/--y/--node/--lh/--lw/--fl…)
   so the whole orbit scales via --nscale for tablet + collapses to a grid on mobile.
   ============================================================ */
.intg2 { position: relative; overflow: hidden; background: linear-gradient(180deg, #E9F1FC 0%, #F1F7FE 44%, #F4F7FC 100%); }
.intg2__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.intg2__haze { position: absolute; left: 0; right: 0; bottom: -6%; height: 44%;
  background:
    radial-gradient(58% 100% at 50% 100%, rgba(255,255,255,.85), transparent 72%),
    radial-gradient(40% 90% at 18% 100%, rgba(201,224,250,.5), transparent 72%),
    radial-gradient(40% 90% at 82% 100%, rgba(201,224,250,.5), transparent 72%);
  filter: blur(4px); }
.intg2 .sec-wrap { position: relative; z-index: 1; }
.intg2__head { max-width: 700px; margin: 0 auto; text-align: center; }
.intg2__head .sec-title { margin: 16px auto 0; }
.intg2__head .sec-lead { margin: 16px auto 0; max-width: 620px; }
.intg2__cta { margin-top: 28px; }

.intg-orbit { --nscale: 1; position: relative; width: 100%; max-width: 1120px; margin: clamp(24px, 3.4vw, 52px) auto 0; aspect-ratio: 1.5 / 1; }

/* faint curved orbit rings + central glow */
.intg-orbit__rings { position: absolute; inset: 0; z-index: 0; }
.ring { position: absolute; left: 50%; top: 50%; aspect-ratio: 1; border-radius: 50%; border: 1.5px dashed rgba(44,123,240,.18); }
.ring--1 { width: 40%; }
.ring--2 { width: 66%; border-color: rgba(44,123,240,.12); }
.intg-orbit__glow { position: absolute; left: 50%; top: 50%; width: 360px; height: 360px; transform: translate(-50%,-50%); border-radius: 50%; background: radial-gradient(circle, rgba(60,130,246,.22), transparent 66%); filter: blur(18px); z-index: 0; }

/* surrounding nodes (IntegrationNode) */
.intg-node { position: absolute; left: var(--x); top: var(--y);
  width: calc(var(--node) * var(--nscale) * 1px); height: calc(var(--node) * var(--nscale) * 1px);
  aspect-ratio: 1 / 1;
  transform: translate(-50%,-50%); z-index: 2; }
.intg-node__float { width: 100%; height: 100%; }
.intg-node__inner { width: 100%; height: 100%; aspect-ratio: 1 / 1; box-sizing: border-box; border-radius: 50%; background: #fff; border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(16,24,48,.05), 0 14px 30px rgba(16,24,48,.10);
  display: grid; place-items: center; transition: transform .22s ease, box-shadow .22s ease; }
.intg-node__inner img { height: calc(var(--lh) * var(--nscale) * 1px); width: auto; max-width: calc(var(--lw) * var(--nscale) * 1px); object-fit: contain; display: block; }
.intg-node:hover { z-index: 6; }
.intg-node:hover .intg-node__inner { transform: translateY(-5px); box-shadow: 0 2px 6px rgba(16,24,48,.06), 0 24px 46px rgba(16,24,48,.16); }

/* central Loopmerce node */
.intg-center { position: absolute; left: 50%; top: 50%; width: clamp(132px, 12vw, 158px); height: clamp(132px, 12vw, 158px); transform: translate(-50%,-50%); z-index: 3; }
.intg-center__float { width: 100%; height: 100%; }
.intg-center__inner { width: 100%; height: 100%; border-radius: 50%;
  background: radial-gradient(120% 120% at 30% 24%, #2C4E8C 0%, #16305A 56%, #0F2246 100%);
  display: grid; place-items: center;
  box-shadow: 0 0 0 9px rgba(60,130,246,.09), 0 0 46px rgba(60,130,246,.4), 0 16px 40px rgba(22,48,90,.34), inset 0 1px 0 rgba(255,255,255,.14); }
.intg-center__inner img { width: 48%; height: auto; }
.intg-center__cap { position: absolute; left: 50%; top: 61%; transform: translateX(-50%); text-align: center; width: min(360px, 62%); z-index: 3; }
.intg-center__cap strong { display: block; font-size: 1.04rem; color: var(--ink); letter-spacing: -.01em; }
.intg-center__cap span { display: block; margin-top: 7px; font-size: .86rem; color: var(--muted); line-height: 1.45; }

/* ---- motion: entrance (one-shot on enter), float, ring spin, hover, tab-pause ----
   Reduced-motion safe: nodes are visible by default; the hidden start state + reveal
   animations only exist when motion is welcome, so nothing can get stuck invisible. */
.intg-orbit.in .intg-node,
.intg-orbit.in .intg-center,
.intg-orbit.in .intg-center__cap { opacity: 1; }

@media (prefers-reduced-motion: no-preference) {
  .intg-orbit .intg-node,
  .intg-orbit .intg-center,
  .intg-orbit .intg-center__cap { opacity: 0; }
  .intg-orbit .intg-center__inner { transform: scale(.72); }

  .intg-orbit.in .intg-node { animation: intgFade .55s ease var(--fdelay, 0s) forwards; }
  .intg-orbit.in .intg-center { animation: intgFade .6s ease forwards; }
  .intg-orbit.in .intg-center__cap { animation: intgFade .6s ease .3s forwards; }
  .intg-orbit.in .intg-center__inner { animation: intgPop .7s cubic-bezier(.2,.7,.2,1) forwards; }

  .intg-orbit.in .intg-node__float { animation: nodeFloat var(--fd, 8s) ease-in-out var(--fdelay, 0s) infinite; }
  .intg-orbit.in .intg-center__float { animation: nodeFloat 9.5s ease-in-out infinite; }
  .intg-orbit.in .ring--1 { animation: ringSpin 150s linear infinite; }
  .intg-orbit.in .ring--2 { animation: ringSpin 210s linear infinite reverse; }
}
.intg-orbit.is-paused .intg-node__float,
.intg-orbit.is-paused .intg-center__float,
.intg-orbit.is-paused .ring { animation-play-state: paused; }
@keyframes intgFade { to { opacity: 1; } }
@keyframes intgPop { from { transform: scale(.72); } to { transform: scale(1); } }
@keyframes nodeFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(calc(var(--fl, -8) * 1px)); } }
@keyframes ringSpin { from { transform: translate(-50%,-50%) rotate(0); } to { transform: translate(-50%,-50%) rotate(360deg); } }

/* ---- responsive ---- */
@media (max-width: 1024px) { .intg-orbit { --nscale: .84; max-width: 820px; } }
@media (max-width: 760px) {
  .intg-orbit { --nscale: 1; aspect-ratio: auto; display: flex; flex-direction: column; align-items: center; gap: 20px; max-width: 460px; }
  .intg-orbit__rings, .intg-orbit__glow { display: none; }
  .intg-center { position: static; transform: none; order: -2; }
  .intg-center__cap { position: static; transform: none; order: -1; width: 100%; }
  .intg-orbit__nodes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; width: 100%; order: 0; }
  .intg-node { position: static; left: auto; top: auto; transform: none; width: 100%; height: auto; }
  .intg-node__inner { width: 100%; aspect-ratio: 1; height: auto; max-width: 96px; margin: 0 auto; }
}
@media (min-width: 761px) { .intg-orbit__nodes { display: contents; } }