/* ============================================================
   INTEGRATIONS PAGE — page-specific additions only.
   Reuses the site's existing .hero, .stats-band, .ftr-card,
   .industries-section, .faq-item, .tcard, .cta-section as-is.
   Everything below is new, prefixed .ig- to avoid collisions.
   ============================================================ */

.ig-page{padding-top:70px}

/* ── Hero network illustration ── */
.ig-hero{padding:28px 0 64px;position:relative;overflow:hidden;background:linear-gradient(160deg,#F8FAFF 0%,#EFF6FF 45%,#F5F3FF 100%)}
@media (max-width:767px){.ig-hero{padding:24px 0 36px}}
@media (max-width:399px){.ig-hero{padding:20px 0 28px}}
.ig-hero::before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 15% 25%,rgba(37,99,235,.08) 0%,transparent 50%),radial-gradient(circle at 85% 75%,rgba(124,58,237,.08) 0%,transparent 50%)}
.ig-hero-inner{max-width:1200px;margin:0 auto;padding:0 24px;position:relative;z-index:1;text-align:center}
.ig-hero-badge{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--blue-100);color:var(--blue-700);font-family:var(--font-display);font-size:12.5px;font-weight:700;padding:7px 16px;border-radius:100px;box-shadow:var(--shadow-sm);margin-bottom:24px}
.ig-hero-title{font-family:var(--font-display);font-size:clamp(28px,6vw,54px);font-weight:900;line-height:1.15;letter-spacing:-.03em;color:var(--gray-900);max-width:820px;margin:0 auto 20px}
.ig-hero-sub{font-size:clamp(14px,3.6vw,17px);color:var(--gray-500);line-height:1.7;max-width:640px;margin:0 auto 32px}
.ig-hero-cta{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;margin-bottom:56px}
.ig-hero-cta .btn{min-height:44px;box-sizing:border-box}
@media (max-width:480px){
  .ig-hero-cta{flex-direction:column;align-items:stretch;gap:12px}
  .ig-hero-cta .btn{width:100%;text-align:center;justify-content:center}
}

/* Animated connection network — pure CSS, no external images.
   Sizing is driven by CSS custom properties so JS (which computes the
   circular layout) and CSS (which sizes the hub/nodes) stay in sync
   from one source of truth per breakpoint. */
.ig-network{
  --orbit-radius: 240px;
  --orbit-hub: 76px;
  --orbit-node: 52px;
  --orbit-img: 28px;
  position:relative;
  max-width:760px;
  width:100%;
  margin:0 auto;
  height: calc(var(--orbit-radius) * 2 + var(--orbit-node) + 40px);
}
.ig-network-hub{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:var(--orbit-hub);height:var(--orbit-hub);background:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 12px 40px rgba(37,99,235,.35);z-index:3;padding:calc(var(--orbit-hub) * 0.12);box-sizing:border-box}
.ig-network-hub img{width:100%;height:100%;object-fit:contain;display:block}
.ig-network-hub::before{content:'';position:absolute;inset:-10px;border-radius:50%;border:2px solid rgba(37,99,235,.25);animation:igPulse 2.4s ease-in-out infinite}
@keyframes igPulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.5);opacity:0}}
.ig-node{position:absolute;width:var(--orbit-node);height:var(--orbit-node);background:#fff;border:1.5px solid var(--gray-100);border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:20px;box-shadow:var(--shadow-md);animation:igFloat 4s ease-in-out infinite;z-index:2;box-sizing:border-box}
.ig-node img{width:var(--orbit-img);height:var(--orbit-img);object-fit:contain;display:block}
@keyframes igFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* Tablet: smaller radius, icons, and center logo — orbit stays visible */
@media (max-width:1024px){
  .ig-network{--orbit-radius:170px;--orbit-hub:60px;--orbit-node:42px;--orbit-img:22px}
}
/* Mobile: fully optimized — small radius, guaranteed to fit within
   the viewport with no horizontal overflow, no overlap even with
   up to ~20 orbit logos (equal angular spacing scales automatically). */
@media (max-width:767px){
  .ig-network{--orbit-radius:128px;--orbit-hub:46px;--orbit-node:30px;--orbit-img:16px}
}
@media (max-width:399px){
  .ig-network{--orbit-radius:95px;--orbit-hub:40px;--orbit-node:26px;--orbit-img:14px}
}

/* ── Stats row (reuses grid-4 but with its own card treatment) ── */
.ig-stats-band{background:linear-gradient(160deg,#F0F7FF 0%,#EEF2FF 100%);border-top:1px solid #DBEAFE;border-bottom:1px solid #DBEAFE;padding:40px 0}
.ig-stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;max-width:1000px;margin:0 auto}
.ig-stat{background:#fff;border:1px solid #E0EAFF;border-radius:16px;padding:24px 16px;text-align:center;box-shadow:0 2px 8px rgba(37,99,235,.06)}
.ig-stat-val{font-family:var(--font-display);font-size:clamp(24px,3vw,32px);font-weight:900;background:linear-gradient(135deg,var(--blue-800),var(--blue-500));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1}
.ig-stat-lbl{font-size:12px;font-weight:700;color:var(--gray-500);letter-spacing:.04em;margin-top:8px}
@media (max-width:768px){.ig-stats-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.ig-stats-grid{grid-template-columns:1fr}}

.ig-industry-pills{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:28px}
.ig-industry-pill{background:#fff;border:1.5px solid var(--gray-200);border-radius:100px;padding:8px 18px;font-size:13px;font-weight:600;color:var(--gray-600)}

/* ── Search + category filters ── */
.ig-search-section{background:#fff;padding:56px 0 0;border-bottom:1px solid var(--gray-100)}
.ig-search-wrap{max-width:560px;margin:0 auto 24px;display:flex;align-items:center;gap:10px;background:var(--gray-50);border:1.5px solid var(--gray-200);border-radius:100px;padding:12px 22px;transition:border-color .2s,box-shadow .2s}
.ig-search-wrap:focus-within{border-color:var(--blue-400);box-shadow:0 0 0 4px rgba(37,99,235,.10);background:#fff}
.ig-search-icon{font-size:16px;color:var(--gray-400);flex-shrink:0}
.ig-search-input{border:none;outline:none;background:transparent;font-family:var(--font-body);font-size:15px;width:100%;color:var(--gray-800)}
.ig-search-input::placeholder{color:var(--gray-400)}
.ig-filters{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;padding-bottom:32px}
.ig-fchip{display:inline-flex;align-items:center;gap:6px;padding:8px 18px;border-radius:100px;border:1.5px solid var(--gray-200);background:#fff;color:var(--gray-600);font-family:var(--font-display);font-size:12.5px;font-weight:700;cursor:pointer;transition:all .2s var(--ease)}
.ig-fchip:hover{border-color:var(--blue-400);color:var(--blue-600)}
.ig-fchip.active{background:linear-gradient(135deg,var(--blue-700),var(--blue-600));border-color:transparent;color:#fff;box-shadow:0 6px 18px rgba(37,99,235,.26)}
.ig-fcnt{font-size:10.5px;padding:1px 7px;border-radius:100px;background:rgba(0,0,0,.06)}
.ig-fchip.active .ig-fcnt{background:rgba(255,255,255,.25)}

/* ── Integration cards ── */
.ig-cards-section{background:#fff;padding:44px 0 80px}
.ig-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.ig-card{background:#fff;border:1.5px solid var(--gray-100);border-radius:18px;padding:24px;display:flex;flex-direction:column;gap:12px;transition:transform .24s var(--ease),box-shadow .24s var(--ease),border-color .24s var(--ease);position:relative;overflow:hidden}
.ig-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--blue-600),#7C3AED);transform:scaleX(0);transform-origin:left;transition:transform .28s var(--ease)}
.ig-card:hover{transform:translateY(-5px);box-shadow:0 16px 40px rgba(37,99,235,.10);border-color:var(--blue-100)}
.ig-card:hover::before{transform:scaleX(1)}
.ig-card-head{display:flex;align-items:center;gap:12px}
.ig-logo{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:800;font-size:16px;color:#fff;flex-shrink:0}
.ig-card-name{font-family:var(--font-display);font-size:15.5px;font-weight:800;color:var(--gray-900);line-height:1.25}
.ig-card-cat{font-size:11px;font-weight:700;color:var(--gray-400);text-transform:uppercase;letter-spacing:.05em;margin-top:2px}
.ig-card-desc{font-size:13px;color:var(--gray-600);line-height:1.65;flex:1}
.ig-card-benefits{display:flex;flex-wrap:wrap;gap:6px}
.ig-benefit-tag{font-size:10.5px;font-weight:700;color:var(--blue-700);background:var(--blue-50);border-radius:100px;padding:3px 10px}
.ig-card-foot{display:flex;align-items:center;justify-content:space-between;margin-top:4px;padding-top:12px;border-top:1px solid var(--gray-100)}
.ig-avail{font-size:11px;color:var(--gray-400);font-weight:600}
.ig-avail-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#22C55E;margin-right:5px}
.ig-learn{font-size:12.5px;font-weight:700;color:var(--blue-600);cursor:pointer;display:inline-flex;align-items:center;gap:4px}
.ig-empty{grid-column:1/-1;text-align:center;padding:60px 24px;color:var(--gray-400)}
@media (max-width:1024px){.ig-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.ig-grid{grid-template-columns:1fr}}

/* ── Workflow diagram ── */
.ig-workflow-section{background:var(--gray-50);padding:72px 0}
.ig-workflow{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:0;max-width:1100px;margin:36px auto 0}
.ig-wf-step{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 10px;min-width:118px}
.ig-wf-icon{width:52px;height:52px;border-radius:14px;background:#fff;border:1.5px solid var(--gray-200);box-shadow:var(--shadow-sm);display:flex;align-items:center;justify-content:center;font-size:22px}
.ig-wf-label{font-size:12px;font-weight:700;color:var(--gray-700);text-align:center;white-space:nowrap}
.ig-wf-sub{font-size:10.5px;color:var(--gray-400);text-align:center}
.ig-wf-arrow{color:var(--blue-300);font-size:20px;flex-shrink:0}
@media (max-width:900px){.ig-workflow{flex-direction:column}.ig-wf-arrow{transform:rotate(90deg)}}

/* ── Integration matrix table ── */
.ig-matrix-section{background:#fff;padding:72px 0}
.ig-matrix-wrap{overflow-x:auto;border:1.5px solid var(--gray-100);border-radius:16px;box-shadow:var(--shadow-sm)}
.ig-matrix{width:100%;border-collapse:collapse;min-width:640px}
.ig-matrix th{background:var(--gray-50);font-family:var(--font-display);font-size:11.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--gray-500);padding:14px 16px;text-align:left;border-bottom:1.5px solid var(--gray-100)}
.ig-matrix th:not(:first-child){text-align:center}
.ig-matrix td{padding:13px 16px;font-size:13.5px;color:var(--gray-700);border-bottom:1px solid var(--gray-100)}
.ig-matrix td:not(:first-child){text-align:center}
.ig-matrix tr:last-child td{border-bottom:none}
.ig-matrix tr:hover td{background:var(--gray-50)}
.ig-mx-name{font-weight:700;color:var(--gray-900);display:flex;align-items:center;gap:8px}
.ig-mx-check{color:#22C55E;font-weight:800}
.ig-mx-dash{color:var(--gray-300)}
.ig-mx-status{display:inline-flex;font-size:10.5px;font-weight:800;padding:3px 10px;border-radius:100px;letter-spacing:.03em}
.ig-mx-live{background:#F0FDF4;color:#15803D}
.ig-mx-beta{background:#FFF7ED;color:#C2410C}

/* ── API section ── */
.ig-api-section{background:linear-gradient(160deg,#0B1223 0%,#111C36 100%);padding:72px 0;color:#fff}
.ig-api-section .section-header .eyebrow{color:#93C5FD;background:rgba(147,197,253,.12)}
.ig-api-section .section-header .section-title{color:#fff}
.ig-api-section .section-header .section-subtitle{color:rgba(255,255,255,.6)}
.ig-api-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.ig-api-card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10);border-radius:14px;padding:20px;text-align:center}
.ig-api-icon{font-size:24px;margin-bottom:10px}
.ig-api-name{font-family:var(--font-display);font-size:13px;font-weight:700;color:#fff}
@media (max-width:1024px){.ig-api-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.ig-api-grid{grid-template-columns:1fr}}

/* ── Footer CTA band ── */
.ig-footer-cta{background:var(--gray-50);padding:48px 0;text-align:center;border-top:1px solid var(--gray-100)}
.ig-footer-cta h3{font-family:var(--font-display);font-size:22px;font-weight:800;color:var(--gray-900);margin-bottom:8px}
.ig-footer-cta p{font-size:14.5px;color:var(--gray-500);max-width:520px;margin:0 auto 20px;line-height:1.65}