/* ============================================================
   SerpUp Industries — self-contained stylesheet.
   Ships inside /industries/assets/ so this folder works correctly
   even uploaded on its own, without depending on the site's root
   assets/css/style.css being current.
   ============================================================ */

:root{
  --ind-ink: #16181B;
  --ind-ink-soft: #565B61;
  --ind-line: #D4D7DA;
  --ind-surface: #FAFAFB;
  --ind-accent: #2D4CE0;
  --ind-radius: 16px;
  --ind-shadow: 0 1px 2px rgba(20,22,25,.05), 0 20px 44px -20px rgba(20,22,25,.22);
  --ind-metal: linear-gradient(135deg, #FFFFFF 0%, #EAEBED 28%, #D7DADD 52%, #EDEEF0 76%, #FFFFFF 100%);
}

/* ---------- Modern industry card grid (index page) ---------- */
.ind-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:22px; }
.ind-card{
  position:relative;
  display:flex; flex-direction:column;
  background:var(--ind-surface);
  border:1px solid var(--ind-line);
  border-radius:var(--ind-radius);
  padding:28px 26px 26px;
  overflow:hidden;
  text-decoration:none;
  color:inherit;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.ind-card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:4px;
  background:var(--card-accent, var(--ind-accent));
  transform:scaleX(0); transform-origin:left;
  transition:transform .25s ease;
}
.ind-card:hover{ transform:translateY(-5px); box-shadow:var(--ind-shadow); border-color:transparent; }
.ind-card:hover::before{ transform:scaleX(1); }

.ind-icon{
  width:52px; height:52px; border-radius:14px;
  background:var(--card-tint, #E7EAFC);
  display:flex; align-items:center; justify-content:center; margin-bottom:18px;
  transition:transform .2s ease;
}
.ind-card:hover .ind-icon{ transform:scale(1.06); }
.ind-icon svg{ stroke:var(--card-accent, var(--ind-accent)); }

.ind-card h3{
  font-family:'Archivo', sans-serif; font-weight:800; font-size:19px;
  color:var(--ind-ink); margin-bottom:9px;
}
.ind-card p{ color:var(--ind-ink-soft); font-size:14.5px; line-height:1.6; margin-bottom:16px; }

.ind-searches{ margin-top:auto; padding-top:16px; border-top:1px solid var(--ind-line); }
.ind-searches .label{ font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--ind-ink-soft); margin-bottom:10px; display:block; }
.ind-example-chips{ display:flex; flex-wrap:wrap; gap:7px; margin-bottom:16px; }
.ind-example-chip{ font-size:12px; font-weight:600; padding:5px 11px; border-radius:999px; background:var(--card-tint, #E7EAFC); color:var(--card-accent, var(--ind-accent)); }

.ind-card-cta{
  display:inline-flex; align-items:center; gap:6px; font-size:13.5px; font-weight:800;
  color:var(--card-accent, var(--ind-accent));
}
.ind-card-cta svg{ transition:transform .15s; }
.ind-card:hover .ind-card-cta svg{ transform:translateX(3px); }

@media (max-width:900px){ .ind-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .ind-grid{ grid-template-columns:1fr; } }

/* ---------- Individual industry page hero visual ---------- */
.ind-hero-visual{
  display:flex; align-items:center; justify-content:center;
  background:var(--ind-metal); border:1px solid var(--ind-line); border-radius:22px;
  padding:36px; box-shadow:var(--ind-shadow); min-height:220px;
}
.ind-hero-visual svg{ width:120px; height:120px; stroke:var(--page-accent, var(--ind-accent)); }

/* ---------- Service cards on individual industry pages ---------- */
.ind-service-card{
  background:var(--ind-surface); border:1px solid var(--ind-line); border-radius:var(--ind-radius);
  padding:24px 22px; text-decoration:none; color:inherit; display:block;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.ind-service-card:hover{ transform:translateY(-3px); box-shadow:var(--ind-shadow); border-color:var(--page-accent, var(--ind-accent)); }
.ind-service-card h3{ font-family:'Archivo',sans-serif; font-weight:800; font-size:16.5px; margin-bottom:8px; color:var(--ind-ink); }
.ind-service-card p{ color:var(--ind-ink-soft); font-size:14px; margin-bottom:12px; }
.ind-service-card .go{ display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:800; color:var(--page-accent, var(--ind-accent)); }