/* spoke.css — Family B: industries hub, industry/[slug], use-cases, city/country spoke pages */
/* These pages use mostly inline styles. This file provides responsive grid classes only. */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@600;700;800;900&family=DM+Sans:wght@400;500;600&display=swap');

/* Industry hub grid classes */
.ind-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.ind-2col {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}
.ind-why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

/* Illustration float animation */
@keyframes ind-float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} }
@keyframes ind-fadein { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }
@keyframes ind-pop    { 0%{transform:scale(.6);opacity:0} 60%{transform:scale(1.1)} 100%{transform:scale(1);opacity:1} }
@keyframes ind-blink  { 0%,100%{opacity:1} 50%{opacity:.2} }

/* Spoke layout */
.ind-hero-illus {
  display: flex;
  align-items: center;
  gap: 3.5rem;
  flex-wrap: wrap;
}
.ind-hero-illus > * { flex: 1 1 340px; }

@media (max-width: 900px) {
  .ind-grid, .ind-why-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 640px) {
  .ind-grid, .ind-2col, .ind-why-grid { grid-template-columns: 1fr !important; }
  .ind-hero-illus { gap: 2rem; }
}