/* ==========================================================
   Integrations Page — Design System
   /public/assets/css/integrations.css
   ========================================================== */

:root {
  --intg-charcoal:    #404040;  /* dark bg option 1 — neutral */
  --intg-deep-navy:   #0a0f2e;  /* dark bg option 2 — rich/premium */
  --intg-blue:        #0033a0;  /* dark bg option 3 — brand blue (current hero) */
  --intg-near-black:  #111111;  /* dark bg option 4 — bold/high contrast */
  --intg-yellow:      #fdc100;
  --intg-yellow-lt:   #fdf3cd;
  --intg-blue-dk:     #002070;
  --intg-blue-lt:     #e6ecf9;
  --intg-border:      rgba(0, 0, 0, 0.08);

  /* Category colours — drawn from the Illuminate logo spectrum */
  --ic-ecommerce-color:  #00a650;  /* logo green */
  --ic-ecommerce-bg:     #e6f7ee;
  --ic-ecommerce-text:   #005c2b;

  --ic-erp-color:        #0033a0;  /* logo blue */
  --ic-erp-bg:           #e6ecf9;
  --ic-erp-text:         #00225a;

  --ic-accounting-color: #6f2da8;  /* logo purple */
  --ic-accounting-bg:    #f2eaf9;
  --ic-accounting-text:  #4a1d70;

  --ic-payments-color:   #00aeef;  /* logo cyan */
  --ic-payments-bg:      #e5f7fd;
  --ic-payments-text:    #005a7a;

  --ic-crm-color:        #e8192c;  /* logo red */
  --ic-crm-bg:           #fde9eb;
  --ic-crm-text:         #8c0f19;

  --ic-messaging-color:  #00897b;  /* green + cyan overlap — teal */
  --ic-messaging-bg:     #e5f5f3;
  --ic-messaging-text:   #00564e;

  --ic-warehouse-color:  #f97316;  /* red + yellow overlap — orange */
  --ic-warehouse-bg:     #fff3ea;
  --ic-warehouse-text:   #7c3900;

  --ic-carriers-color:   #fdc100;  /* brand yellow — 3PL & Carriers */
  --ic-carriers-bg:      #fdf3cd;
  --ic-carriers-text:    #7a5a00;

  --ic-analytics-color:  #4338ca;  /* blue + purple overlap — indigo */
  --ic-analytics-bg:     #edeaf9;
  --ic-analytics-text:   #2b2280;

  --ic-marketing-color:  #c026d3;  /* purple + red overlap — magenta */
  --ic-marketing-bg:     #f9e6fb;
  --ic-marketing-text:   #7a1885;

  --ic-workflow-color:   #0284c7;  /* cyan + blue overlap — sky blue */
  --ic-workflow-bg:      #e5f4fc;
  --ic-workflow-text:    #014f7a;

  --ic-iot-color:        #65a30d;  /* yellow + green overlap — lime */
  --ic-iot-bg:           #f0f7e5;
  --ic-iot-text:         #3a5c07;
}

/* .llm-summary — defined globally in custom.css */

/* ----------------------------------------------------------
   Page wrapper
   ---------------------------------------------------------- */
.intg-page section {
  padding-top: 64px;
  padding-bottom: 64px;
}

/* ----------------------------------------------------------
   Hero
   ---------------------------------------------------------- */
.intg-hero {
  background: var(--intg-deep-navy);
  color: #fff;
  padding: 80px 0;
  position: relative;
  overflow: hidden;
}

/* Particles canvas — full bleed behind content */
#intg-hero-particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}
#intg-hero-particles canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

/* Lift hero content above the canvas */
.intg-hero .container {
  position: relative;
  z-index: 1;
}

/* Buttons inside the hero — white primary, white outline secondary */
.intg-hero .btn-roundeded {
  background: #fff;
  color: var(--intg-deep-navy);
  border-color: #fff;
  font-weight: 700;
}
.intg-hero .btn-roundeded:hover {
  background: rgba(255,255,255,0.9);
  border-color: rgba(255,255,255,0.9);
  color: var(--intg-deep-navy);
}
.intg-hero .btn-outline-light {
  border-color: rgba(255,255,255,0.5);
  color: #fff;
}
.intg-hero .btn-outline-light:hover {
  background: rgba(255,255,255,0.1);
}

.intg-hero h1 {
  color: #fff;
  margin-bottom: 16px;
}

.intg-hero .lead {
  color: rgba(255, 255, 255, 0.75);
  max-width: 540px;
}

.intg-hero-layout {
  display: flex;
  align-items: center;
  gap: 60px;
}

.intg-hero-left {
  flex: 1;
  min-width: 0;
}

.intg-hero-right {
  width: 380px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.intg-hero-how-pill {
  display: inline-block;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.65);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 20px;
  margin-bottom: 4px;
  width: fit-content;
}

.intg-hero-step {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 16px 18px;
}

.intg-hero-step-num {
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  line-height: 1;
  flex-shrink: 0;
  padding-top: 2px;
  opacity: 0.4;
}

.intg-hero-step-title {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 4px;
}

.intg-hero-step-body {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.6;
  margin: 0;
}

@media (max-width: 992px) {
  .intg-hero-layout {
    flex-direction: column;
    gap: 36px;
  }
  .intg-hero-right {
    width: 100%;
  }
}

.intg-hero-badge {
  display: inline-block;
  background: rgba(255,255,255,0.15);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 5px 14px;
  border-radius: 20px;
  margin-bottom: 20px;
  text-transform: uppercase;
}


/* ----------------------------------------------------------
   Section label pill
   ---------------------------------------------------------- */
.intg-section-label {
  display: inline-block;
  background: var(--intg-yellow-lt);
  color: #7a5a00;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 20px;
  margin-bottom: 12px;
}

/* ----------------------------------------------------------
   Real-time callout strip
   ---------------------------------------------------------- */
.intg-realtime {
  background: var(--intg-blue-lt);
  border-left: 4px solid var(--intg-blue);
  border-radius: 0 8px 8px 0;
  padding: 18px 24px;
  margin-bottom: 36px;
}

.intg-realtime-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--intg-charcoal);
  margin: 0 0 4px;
}

.intg-realtime-body {
  font-size: 14px;
  color: #555;
  margin: 0;
  line-height: 1.6;
}

/* ----------------------------------------------------------
   Main layout — grid + sidebar
   ---------------------------------------------------------- */
.intg-layout {
  display: flex;
  flex-direction: row;
  gap: 36px;
  align-items: flex-start;
}

.intg-grid-area {
  flex: 1;
  min-width: 0;
  order: 2;
}

/* ----------------------------------------------------------
   Left-side category filter sidebar
   ---------------------------------------------------------- */
.intg-filter-sidebar {
  width: 196px;
  flex-shrink: 0;
  order: 1;
  position: sticky;
  top: 100px;
}

.intg-filter-sidebar h6 {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #999;
  margin: 0 0 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(0,0,0,0.07);
}

.intg-filter-nav {
  list-style: none;
  padding: 0;
  margin: 0;
}

.intg-filter-nav li {
  margin-bottom: 1px;
}

.intg-filter-nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 10px;
  border-radius: 7px;
  font-size: 14px;
  color: #555;
  text-decoration: none;
  transition: background 0.12s, color 0.12s;
  line-height: 1.3;
}

.intg-filter-nav a:hover {
  background: #f4f4f4;
  color: var(--intg-charcoal);
  text-decoration: none;
}

.intg-filter-nav li.active a {
  background: var(--intg-blue-lt);
  color: var(--intg-blue);
  font-weight: 600;
}

.intg-filter-count {
  font-size: 12px;
  color: #ccc;
  font-weight: 400;
  flex-shrink: 0;
  margin-left: 6px;
}

.intg-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-right: 7px;
}

.intg-filter-nav li.active .intg-filter-count {
  color: var(--intg-blue);
  opacity: 0.6;
}

/* ----------------------------------------------------------
   Integration grid
   ---------------------------------------------------------- */
.intg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(172px, 1fr));
  gap: 10px;
}

/* ----------------------------------------------------------
   Compact integration card
   ---------------------------------------------------------- */
.intg-card {
  background: #fff;
  border: 1px solid var(--intg-border);
  border-radius: 10px;
  padding: 14px 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.intg-card:hover {
  border-color: rgba(0, 0, 0, 0.16);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.intg-card-custom {
  background: #f9f9f9;
  border-style: dashed;
}

/* Logo area */
.intg-logo-wrap {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,0.07);
  background: #fafafa;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

.intg-logo-img {
  width: 26px;
  height: 26px;
  object-fit: contain;
  display: block;
}

.intg-logo-fallback {
  font-size: 13px;
  font-weight: 700;
  color: var(--intg-charcoal);
  line-height: 1;
  text-transform: uppercase;
}

.intg-logo-icon {
  font-size: 15px;
  color: #666;
}

/* Card text */
.intg-card-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--intg-charcoal);
  margin: 0;
  line-height: 1.3;
}

.intg-card-body {
  font-size: 13px;
  color: #777;
  line-height: 1.6;
  margin: 0;
  flex: 1;
}

.intg-card-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 8px;
  width: fit-content;
  margin-top: 2px;
  /* default — overridden per category below */
  color: #7a5a00;
  background: var(--intg-yellow-lt);
}

/* ----------------------------------------------------------
   Per-category card styling
   top border accent + tag pill colour + logo wrap tint
   ---------------------------------------------------------- */
.ic-ecommerce  { border-top: 3px solid var(--ic-ecommerce-color); }
.ic-erp        { border-top: 3px solid var(--ic-erp-color); }
.ic-accounting { border-top: 3px solid var(--ic-accounting-color); }
.ic-payments   { border-top: 3px solid var(--ic-payments-color); }
.ic-crm        { border-top: 3px solid var(--ic-crm-color); }
.ic-messaging  { border-top: 3px solid var(--ic-messaging-color); }
.ic-warehouse  { border-top: 3px solid var(--ic-warehouse-color); }
.ic-carriers   { border-top: 3px solid var(--ic-carriers-color); }
.ic-analytics  { border-top: 3px solid var(--ic-analytics-color); }
.ic-marketing  { border-top: 3px solid var(--ic-marketing-color); }
.ic-workflow   { border-top: 3px solid var(--ic-workflow-color); }
.ic-iot        { border-top: 3px solid var(--ic-iot-color); }

/* Tag pills */
.ic-ecommerce  .intg-card-tag { background: var(--ic-ecommerce-bg);  color: var(--ic-ecommerce-text); }
.ic-erp        .intg-card-tag { background: var(--ic-erp-bg);        color: var(--ic-erp-text); }
.ic-accounting .intg-card-tag { background: var(--ic-accounting-bg); color: var(--ic-accounting-text); }
.ic-payments   .intg-card-tag { background: var(--ic-payments-bg);   color: var(--ic-payments-text); }
.ic-crm        .intg-card-tag { background: var(--ic-crm-bg);        color: var(--ic-crm-text); }
.ic-messaging  .intg-card-tag { background: var(--ic-messaging-bg);  color: var(--ic-messaging-text); }
.ic-warehouse  .intg-card-tag { background: var(--ic-warehouse-bg);  color: var(--ic-warehouse-text); }
.ic-carriers   .intg-card-tag { background: var(--ic-carriers-bg);   color: var(--ic-carriers-text); }
.ic-analytics  .intg-card-tag { background: var(--ic-analytics-bg);  color: var(--ic-analytics-text); }
.ic-marketing  .intg-card-tag { background: var(--ic-marketing-bg);  color: var(--ic-marketing-text); }
.ic-workflow   .intg-card-tag { background: var(--ic-workflow-bg);   color: var(--ic-workflow-text); }
.ic-iot        .intg-card-tag { background: var(--ic-iot-bg);        color: var(--ic-iot-text); }

/* Logo wrap — subtle tinted background per category */
.ic-ecommerce  .intg-logo-wrap { background: var(--ic-ecommerce-bg);  border-color: rgba(0,166,80,0.15); }
.ic-erp        .intg-logo-wrap { background: var(--ic-erp-bg);        border-color: rgba(0,51,160,0.15); }
.ic-accounting .intg-logo-wrap { background: var(--ic-accounting-bg); border-color: rgba(111,45,168,0.15); }
.ic-payments   .intg-logo-wrap { background: var(--ic-payments-bg);   border-color: rgba(0,174,239,0.15); }
.ic-crm        .intg-logo-wrap { background: var(--ic-crm-bg);        border-color: rgba(232,25,44,0.15); }
.ic-messaging  .intg-logo-wrap { background: var(--ic-messaging-bg);  border-color: rgba(0,137,123,0.15); }
.ic-warehouse  .intg-logo-wrap { background: var(--ic-warehouse-bg);  border-color: rgba(249,115,22,0.15); }
.ic-carriers   .intg-logo-wrap { background: var(--ic-carriers-bg);   border-color: rgba(253,193,0,0.2); }
.ic-analytics  .intg-logo-wrap { background: var(--ic-analytics-bg);  border-color: rgba(67,56,202,0.15); }
.ic-marketing  .intg-logo-wrap { background: var(--ic-marketing-bg);  border-color: rgba(192,38,211,0.15); }
.ic-workflow   .intg-logo-wrap { background: var(--ic-workflow-bg);   border-color: rgba(2,132,199,0.15); }
.ic-iot        .intg-logo-wrap { background: var(--ic-iot-bg);        border-color: rgba(101,163,13,0.15); }

/* Filter sidebar — active state uses category colour */
#intg-filter li[data-cat="ecommerce"].active  a { background: var(--ic-ecommerce-bg);  color: var(--ic-ecommerce-text); }
#intg-filter li[data-cat="erp"].active         a { background: var(--ic-erp-bg);        color: var(--ic-erp-text); }
#intg-filter li[data-cat="accounting"].active  a { background: var(--ic-accounting-bg); color: var(--ic-accounting-text); }
#intg-filter li[data-cat="payments"].active    a { background: var(--ic-payments-bg);   color: var(--ic-payments-text); }
#intg-filter li[data-cat="crm"].active         a { background: var(--ic-crm-bg);        color: var(--ic-crm-text); }
#intg-filter li[data-cat="messaging"].active   a { background: var(--ic-messaging-bg);  color: var(--ic-messaging-text); }
#intg-filter li[data-cat="warehouse"].active   a { background: var(--ic-warehouse-bg);  color: var(--ic-warehouse-text); }
#intg-filter li[data-cat="carriers"].active    a { background: var(--ic-carriers-bg);   color: var(--ic-carriers-text); }
#intg-filter li[data-cat="analytics"].active   a { background: var(--ic-analytics-bg);  color: var(--ic-analytics-text); }
#intg-filter li[data-cat="marketing"].active   a { background: var(--ic-marketing-bg);  color: var(--ic-marketing-text); }
#intg-filter li[data-cat="workflow"].active    a { background: var(--ic-workflow-bg);   color: var(--ic-workflow-text); }
#intg-filter li[data-cat="iot"].active         a { background: var(--ic-iot-bg);        color: var(--ic-iot-text); }

/* ----------------------------------------------------------
   How it works — three-step strip
   ---------------------------------------------------------- */
.intg-how-section {
  background: #f7f7f7;
}

.intg-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 32px;
}

.intg-step {
  background: #fff;
  border: 1px solid var(--intg-border);
  border-radius: 10px;
  padding: 24px 20px;
}

.intg-step-num {
  font-size: 28px;
  font-weight: 700;
  color: var(--intg-yellow);
  line-height: 1;
  margin-bottom: 12px;
}

.intg-step-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--intg-charcoal);
  margin: 0 0 8px;
}

.intg-step-body {
  font-size: 13px;
  color: #666;
  line-height: 1.6;
  margin: 0;
}

/* ----------------------------------------------------------
   CTA
   ---------------------------------------------------------- */
.intg-cta {
  background: var(--intg-blue);
  color: #fff;
  text-align: center;
}

.intg-cta h2 {
  color: #fff;
  margin-bottom: 16px;
  font-weight: 400;
}

.intg-cta .lead {
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 28px;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

.intg-cta .btn-roundeded {
  background: #fff;
  color: var(--intg-blue);
  border-color: #fff;
  font-weight: 700;
  margin: 0 8px 8px;
}

.intg-cta .btn-roundeded:hover {
  background: rgba(255,255,255,0.9);
  border-color: rgba(255,255,255,0.9);
}

/* ----------------------------------------------------------
   Responsive
   ---------------------------------------------------------- */
@media (max-width: 992px) {
  .intg-layout {
    flex-direction: column;
  }

  .intg-filter-sidebar {
    width: 100%;
    position: static;
    order: -1;
  }

  .intg-filter-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }

  .intg-filter-nav li {
    margin-bottom: 0;
  }

  .intg-filter-nav a {
    padding: 5px 12px;
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 20px;
    font-size: 12px;
  }

  .intg-filter-count {
    display: none;
  }

  .intg-steps {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .intg-grid {
    grid-template-columns: 1fr 1fr;
  }
}