/* Industry page styles, scoped to .industries-page */

.industries-page{

  --industry-blue:#0868f5;

  --industry-navy:#101b55;

  color:var(--industry-navy);

  background:#fff;

  font-family:Inter,"Segoe UI",Arial,sans-serif;

  overflow:hidden;

}

.industries-page *{box-sizing:border-box}

.industries-container{width:min(1450px,calc(100% - 52px));margin-inline:auto}

/* ============================================================

   HERO

   ============================================================ */

.industries-hero{background:linear-gradient(110deg,#eff7ff 0%,#f8fbff 52%,#f1f4ff 100%)}

.industries-hero-inner{min-height:330px;display:grid;grid-template-columns:49% 51%;align-items:stretch}

.industries-hero-copy{padding:19px 0 18px 12px;z-index:1}

.industries-breadcrumb{display:flex;align-items:center;gap:9px;font-size:11px;margin-bottom:14px;color:#1c2b60}

.industries-breadcrumb a{color:inherit;text-decoration:none;transition:color .2s ease}

.industries-breadcrumb a:hover{color:var(--industry-blue)}

.industries-hero h1{

  font-size:clamp(36px,4vw,49px);

  line-height:1.01;letter-spacing:-1.6px;font-weight:850;

  margin:0 0 9px;

}

.industries-hero h1 span{color:#0870ff}

.industries-hero h2{font-size:16px;line-height:1.35;margin:0 0 8px;font-weight:750}

.industries-hero-copy>p{font-size:13px;line-height:1.43;margin:0;max-width:495px;color:#263766}

.industries-features{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:18px}

.industry-feature{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;font-size:10px;line-height:1.3}

.industry-feature svg{width:29px;height:29px;stroke-width:2.5}

.industry-feature span{font-size:9px}

.feature-pink svg{color:#f3158c}

.feature-blue svg{color:#0874ff}

.feature-green svg{color:#00b879}

.feature-orange svg{color:#ff9000}

.industries-hero-art{position:relative;min-height:330px;display:flex;align-items:center;justify-content:center}

.industries-hero-art img{width:100%;height:100%;max-height:330px;object-fit:cover;mix-blend-mode:multiply}

/* ============================================================

   CATALOGUE

   ============================================================ */

.industries-catalogue{padding-top:16px;padding-bottom:20px}

.industries-heading{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:14px}

.industries-heading h2{font-size:21px;letter-spacing:-.4px;margin:0 0 4px;font-weight:850}

.industries-heading p{font-size:11px;color:#3e4b73;margin:0}

.industries-search{

  width:250px;flex-shrink:0;

  display:flex;align-items:center;gap:8px;

  padding:9px 11px;border:1px solid #cbdcff;

  border-radius:11px;background:#fff;color:#153675;

  transition:border-color .25s ease, box-shadow .25s ease;

}

.industries-search:focus-within{border-color:#0874ff; box-shadow:0 0 0 4px rgba(8,116,255,.12)}

.industries-search input{min-width:0;width:100%;border:0;outline:0;background:transparent;font:inherit;font-size:11px;color:#101d55}

.industries-search button{

  border:0;background:transparent;color:#66769c;

  display:grid;place-items:center;cursor:pointer;

  transition:transform .25s ease, color .25s ease;

}

.industries-search button:hover{transform:rotate(90deg); color:#0874ff}

/* Card grid */

.industries-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;align-content:start}

.industries-grid > .industry-reveal{display:block;min-width:0}

.industries-grid > .industry-reveal .industry-card{width:100%;height:100%}

.industry-card{

  position:relative;min-height:120px;text-align:left;

  border:1px solid #dce7ff;border-radius:11px;

  padding:10px 10px 13px 14px;cursor:pointer;

  color:#0868f5;

  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;

}

.industry-card:hover{

  transform:translateY(-3px);

  box-shadow:0 12px 26px #254b9520;

  border-color:#82b2ff;

}

.industry-number{

  position:absolute;top:8px;left:8px;

  display:grid;place-items:center;

  width:21px;height:21px;border-radius:50%;

  font-size:10px;font-weight:800;

  background:#ffffffc7;color:#17255d;

}

.industry-card-icon{

  display:block;margin:1px 0 7px 13px;

  stroke-width:2.5;

  transition:transform .4s cubic-bezier(.34,1.56,.64,1);

}

.industry-card:hover .industry-card-icon{transform:scale(1.12) rotate(-6deg)}

.industry-card h3{font-size:11px;line-height:1.25;font-weight:850;margin:0 0 4px;color:#101d56;transition:color .25s ease}

.industry-card p{font-size:9.5px;line-height:1.35;color:#2c3b6c;margin:0}

.industry-card-arrow{

  position:absolute;right:7px;bottom:7px;

  width:17px;height:17px;display:grid;place-items:center;

  border-radius:50%;background:currentColor;

  transition:transform .3s ease;

}

.industry-card-arrow svg{color:#fff}

.industry-card:hover .industry-card-arrow{transform:translateX(3px)}

/* Tones */

.tone-blue{background:linear-gradient(135deg,#eaf4ff,#f8fcff);color:#0873ff}

.tone-pink{background:linear-gradient(135deg,#fff0f8,#fff9fc);color:#f21a8c}

.tone-green{background:linear-gradient(135deg,#eafff4,#f7fffb);color:#00b879}

.tone-orange{background:linear-gradient(135deg,#fff6e5,#fffdf7);color:#ff8c00}

.tone-purple{background:linear-gradient(135deg,#f5efff,#fcf9ff);color:#8427fa}

.tone-sky{background:linear-gradient(135deg,#eaf7ff,#f8fcff);color:#0876f9}

.industry-card.tone-blue:hover h3{color:#0873ff}

.industry-card.tone-pink:hover h3{color:#f21a8c}

.industry-card.tone-green:hover h3{color:#00b879}

.industry-card.tone-orange:hover h3{color:#ff8c00}

.industry-card.tone-purple:hover h3{color:#8427fa}

.industry-card.tone-sky:hover h3{color:#0876f9}

/* Empty state */

.industries-empty{

  grid-column:1/-1;

  display:grid;place-items:center;gap:8px;

  padding:36px 20px;

  border:1px dashed #cbd8f0;

  border-radius:14px;

  background:#f7faff;

  color:#3a4a72;

  text-align:center;

}

.industries-empty svg{color:#0874ff}

.industries-empty b{color:#101d56}

.industries-empty span{font-size:12px}

/* ============================================================

   MODAL

   ============================================================ */

.industry-modal-overlay{

  position:fixed;inset:0;z-index:200;

  display:grid;place-items:center;

  padding:24px;

  background:rgba(9,27,75,.55);

  backdrop-filter:blur(6px);

  -webkit-backdrop-filter:blur(6px);

  animation:industryOverlayIn .25s ease forwards;

}

@keyframes industryOverlayIn{from{opacity:0}to{opacity:1}}

.industry-modal{

  position:relative;

  width:min(960px,100%);

  max-height:calc(100vh - 48px);

  overflow-y:auto;

  background:#fff;

  border-radius:22px;

  border:1px solid #e0e8f7;

  box-shadow:0 30px 70px rgba(10,30,80,.28);

  padding:26px 26px 22px;

  animation:industryModalIn .35s cubic-bezier(.22,1,.36,1) forwards;

}

@keyframes industryModalIn{

  from{opacity:0;transform:translateY(20px) scale(.97)}

  to{opacity:1;transform:translateY(0) scale(1)}

}

/* Header */

.industry-modal-header{

  display:flex;align-items:flex-start;justify-content:space-between;

  gap:16px;padding-bottom:16px;

  border-bottom:1px solid #eef3fc;margin-bottom:20px;

}

.industry-modal-title-wrap{display:flex;align-items:center;gap:14px}

.industry-modal-number{

  display:grid;place-items:center;

  width:34px;height:34px;border-radius:50%;

  font-size:13px;font-weight:800;

  color:#0873ff;background:#dcebff;

  flex-shrink:0;

}

.industry-modal-icon{

  display:grid;place-items:center;

  width:46px;height:46px;border-radius:12px;

  background:#0874ff;color:#fff;

  flex-shrink:0;

  box-shadow:0 8px 20px rgba(8,116,255,.3);

}

.industry-modal-icon svg{width:24px;height:24px}

.industry-modal-eyebrow{

  font-size:10px;letter-spacing:2px;font-weight:800;

  color:#6b7aa3;margin:0 0 4px;

}

.industry-modal-header h2{

  font-size:clamp(18px,2vw,22px);

  line-height:1.25;letter-spacing:-.5px;

  margin:0;color:#0b1b4a;

}

.industry-modal-close{

  flex-shrink:0;

  width:36px;height:36px;

  display:grid;place-items:center;

  border:0;border-radius:10px;

  background:#f3f7ff;color:#21355e;

  cursor:pointer;

  transition:transform .25s ease, background .25s ease, color .25s ease;

}

.industry-modal-close:hover{

  transform:rotate(90deg);

  background:#e6efff;color:#0874ff;

}

/* Tone-aware header */

.industry-modal.tone-blue   .industry-modal-number{background:#dcebff;color:#0873ff}

.industry-modal.tone-blue   .industry-modal-icon{background:#0873ff;box-shadow:0 8px 20px rgba(8,115,255,.3)}

.industry-modal.tone-pink   .industry-modal-number{background:#ffe1ef;color:#c60b73}

.industry-modal.tone-pink   .industry-modal-icon{background:#f21a8c;box-shadow:0 8px 20px rgba(242,26,140,.3)}

.industry-modal.tone-green  .industry-modal-number{background:#d4fbe6;color:#008f5d}

.industry-modal.tone-green  .industry-modal-icon{background:#00b879;box-shadow:0 8px 20px rgba(0,184,121,.3)}

.industry-modal.tone-orange .industry-modal-number{background:#ffedc9;color:#a35a00}

.industry-modal.tone-orange .industry-modal-icon{background:#ff8c00;box-shadow:0 8px 20px rgba(255,140,0,.3)}

.industry-modal.tone-purple .industry-modal-number{background:#ebe0ff;color:#6f1ee0}

.industry-modal.tone-purple .industry-modal-icon{background:#8427fa;box-shadow:0 8px 20px rgba(132,39,250,.3)}

.industry-modal.tone-sky    .industry-modal-number{background:#dcefff;color:#0876f9}

.industry-modal.tone-sky    .industry-modal-icon{background:#0876f9;box-shadow:0 8px 20px rgba(8,118,249,.3)}

/* Body */

.industry-modal-body{

  display:grid;grid-template-columns:1.05fr 1fr;

  gap:22px;align-items:start;

}

.industry-modal-image{

  width:100%;height:150px;

  object-fit:cover;border-radius:12px;

  display:block;margin-bottom:14px;

}

/* Detail sections reused */

.industry-detail-section{display:flex;align-items:flex-start;gap:10px;margin:14px 0}

.industry-detail-section>svg{flex-shrink:0;color:#0874ff;stroke-width:2.5}

.industry-detail-section>div{min-width:0;flex:1}

.industry-detail-section h3{font-size:12px;font-weight:850;margin:0 0 6px;color:#111f58}

.industry-detail-section p{font-size:11.5px;line-height:1.55;color:#344574;margin:0}

.industry-tags{display:flex;flex-wrap:wrap;gap:5px}

.industry-tags span{

  padding:5px 8px;border-radius:5px;

  background:#eef4ff;color:#223b70;font-size:10px;line-height:1.2;

}

.industry-checklist{list-style:none;padding:0;margin:0;display:grid;gap:6px}

.industry-checklist li{

  display:flex;align-items:flex-start;gap:7px;

  color:#334574;font-size:11.5px;line-height:1.45;

  transition:color .2s ease, transform .2s ease;

}

.industry-checklist li:hover{color:#0874ff;transform:translateX(3px)}

.industry-checklist svg{width:14px;height:14px;color:#0bb878;flex-shrink:0;margin-top:1px}

.industry-cta-box{

  display:flex;gap:10px;padding:12px;

  border-radius:10px;background:#edf5ff;

  color:#0874ff;margin:15px 0;

}

.industry-cta-box>svg{flex-shrink:0;width:26px;height:26px}

.industry-cta-box b{display:block;font-size:12px;margin-bottom:4px;color:#111f58}

.industry-cta-box p{font-size:11.5px;line-height:1.5;color:#344574;margin:0}

/* Footer */

.industry-modal-footer{

  margin-top:22px;padding-top:18px;

  border-top:1px solid #eef3fc;

  display:flex;justify-content:flex-end;

}

.industry-get-started{

  display:inline-flex;align-items:center;justify-content:center;

  gap:8px;padding:12px 22px;border-radius:9px;

  background:#0866f5;color:#fff;text-decoration:none;

  font-size:12px;font-weight:800;

  position:relative;overflow:hidden;

  transition:transform .25s ease,box-shadow .25s ease,background .25s ease;

}

.industry-get-started::after{

  content:"";position:absolute;inset:0;

  background:radial-gradient(circle at center,rgba(255,255,255,.35),transparent 60%);

  opacity:0;transform:scale(.6);

  transition:opacity .4s ease,transform .4s ease;

  pointer-events:none;

}

.industry-get-started:hover::after{opacity:1;transform:scale(1.4)}

.industry-get-started:hover{

  transform:translateY(-2px);

  box-shadow:0 12px 26px rgba(8,102,245,.28);

}

.industry-get-started svg{transition:transform .3s ease}

.industry-get-started:hover svg{transform:translateX(4px)}

/* ============================================================

   WHY CHOOSE

   ============================================================ */

.industries-why{background:#f5f8ff;padding:13px 0;margin-top:24px}

.industries-why-inner{display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:14px;align-items:center}

.industries-why-inner>div{display:grid;grid-template-columns:25px 1fr;column-gap:7px;align-items:center}

.industries-why-inner .industries-why-title{display:block}

.industries-why-inner h2{font-size:14px;margin:0 0 4px}

.industries-why-inner p,

.industries-why-inner span{font-size:9px;line-height:1.35;color:#3d4d78;margin:0}

.industries-why-inner b{font-size:9px}

.industries-why-inner>div>svg{grid-row:span 2;color:#9a2cff;width:22px;height:22px}

.industries-why-inner>div:nth-child(3)>svg{color:#f3158c}

.industries-why-inner>div:nth-child(4)>svg{color:#0874ff}

.industries-why-inner>div:nth-child(5)>svg{color:#f3158c}

/* ============================================================

   ANIMATIONS

   ============================================================ */

.industry-reveal{

  opacity:0;transform:translateY(22px);

  transition:

    opacity .65s cubic-bezier(.22,1,.36,1),

    transform .65s cubic-bezier(.22,1,.36,1);

  will-change:opacity,transform;

}

.industry-reveal.is-visible{opacity:1;transform:translateY(0)}

/* Hero entrance */

.industries-hero-copy h1,

.industries-hero-copy h2,

.industries-hero-copy>p,

.industries-hero-copy .industries-features{

  opacity:0;transform:translateY(16px);

  animation:industryHeroFadeUp .9s cubic-bezier(.22,1,.36,1) forwards;

}

.industries-hero-copy h1{animation-delay:.05s}

.industries-hero-copy h2{animation-delay:.18s}

.industries-hero-copy>p{animation-delay:.32s}

.industries-hero-copy .industries-features{animation-delay:.46s}

@keyframes industryHeroFadeUp{to{opacity:1;transform:translateY(0)}}

.industries-hero-art{

  opacity:0;

  animation:industryVisualIn 1s cubic-bezier(.22,1,.36,1) .25s forwards;

}

@keyframes industryVisualIn{

  from{opacity:0;transform:translateX(28px) scale(.98)}

  to{opacity:1;transform:translateX(0) scale(1)}

}

/* Feature hover */

.industry-feature{transition:transform .25s ease}

.industry-feature:hover{transform:translateY(-4px)}

.industry-feature svg{transition:transform .3s ease}

.industry-feature:hover svg{transform:scale(1.15) rotate(-4deg)}

/* ============================================================

   RESPONSIVE

   ============================================================ */

@media(min-width:1250px){

  .industry-card{min-height:120px}

}

@media(max-width:1050px){

  .industries-grid{grid-template-columns:repeat(3,minmax(0,1fr))}

  .industries-why-inner{grid-template-columns:repeat(3,1fr)}

}

@media(max-width:900px){

  .industries-grid{grid-template-columns:repeat(3,minmax(0,1fr))}

}

@media(max-width:760px){

  .industries-container{width:calc(100% - 28px)}

  .industries-hero-inner{display:flex;flex-direction:column}

  .industries-hero-copy{padding:15px 0 8px}

  .industries-breadcrumb{font-size:10px;margin-bottom:12px}

  .industries-hero h1{font-size:36px;letter-spacing:-1px}

  .industries-hero h2{font-size:15px}

  .industries-hero-copy>p{font-size:12px}

  .industries-features{gap:5px;margin-top:15px}

  .industry-feature{font-size:9px}

  .industry-feature span{font-size:8px}

  .industry-feature svg{width:24px;height:24px}

  .industries-hero-art{height:210px;min-height:210px;margin:0 -10px}

  .industries-hero-art img{max-height:210px}

  .industries-heading{align-items:stretch;flex-direction:column;gap:11px}

  .industries-search{width:100%}

  .industries-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}

  .industry-card{min-height:123px;padding:11px 9px 12px 12px}

  .industry-card h3{font-size:10.5px}

  .industry-card p{font-size:9.5px}

  .industries-why-inner{grid-template-columns:repeat(2,1fr);gap:12px}

  .industries-why-inner .industries-why-title{grid-column:1/-1}

  /* Modal stacks */

  .industry-modal-overlay{padding:12px}

  .industry-modal{

    padding:20px 18px 18px;

    border-radius:18px;

    max-height:calc(100vh - 24px);

  }

  .industry-modal-body{grid-template-columns:1fr;gap:16px}

  .industry-modal-image{height:170px}

  .industry-modal-footer{justify-content:stretch}

  .industry-modal-footer .industry-get-started{width:100%}

}

@media(max-width:480px){

  .industries-hero h1{font-size:32px;letter-spacing:-.8px}

  .industries-hero h2{font-size:14px}

  .industries-hero-copy>p{font-size:11.5px}

  .industries-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}

  .industry-card{min-height:118px;padding:10px 8px 12px 11px}

  .industry-card h3{font-size:10px}

  .industry-card p{font-size:9px}

  .industry-modal-header h2{font-size:16px}

  .industry-modal-icon{width:40px;height:40px}

  .industry-modal-number{width:30px;height:30px;font-size:12px}

  .industry-modal-image{height:140px}

  .industry-checklist li{font-size:11px}

}

/* ============================================================

   REDUCED MOTION

   ============================================================ */

@media (prefers-reduced-motion:reduce){

  *,*::before,*::after{

    animation-duration:.001ms!important;

    animation-iteration-count:1!important;

    transition-duration:.001ms!important;

  }

  .industry-reveal{opacity:1;transform:none}

  .industry-modal-overlay,

  .industry-modal{animation:none}

  .industry-card:hover,

  .industry-feature:hover,

  .industry-get-started:hover{transform:none}

}

/* ============================================================

   LEGACY LAYOUT SAFETY (no longer used, kept to avoid

   breaking any cached selectors your build might still reference)

   ============================================================ */

.industries-layout,

.industry-detail,

.industry-detail-title,

.industry-detail-image,

.industry-show-details { display: none !important; }
/* ============================================================
   REFERENCE DESIGN OVERRIDES — Industries page
   Keeps the existing JSX class names and adds the right detail panel.
   ============================================================ */
.industries-page {
  --industry-blue: #0868f5;
  --industry-navy: #101b55;
  width: 100%;
  color: var(--industry-navy);
  background: #fff;
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  overflow: clip;
}

.industries-page * { box-sizing: border-box; }
.industries-container { width: min(1450px, calc(100% - 52px)); margin-inline: auto; }

.industries-hero { background: linear-gradient(110deg, #eff7ff 0%, #f8fbff 52%, #f1f4ff 100%); }
.industries-hero-inner { min-height: 330px; display: grid; grid-template-columns: 49% 51%; align-items: stretch; }
.industries-hero-copy { min-width: 0; padding: 19px 0 18px 12px; z-index: 1; }
.industries-hero-art { position: relative; min-width: 0; min-height: 330px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.industries-hero-art img { display: block; width: 100%; height: 100%; max-height: 330px; object-fit: cover; mix-blend-mode: multiply; }

/* Catalogue heading and search */
.industries-catalogue { padding-top: 16px; padding-bottom: 20px; }
.industries-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 14px; }
.industries-heading h2 { font-size: 21px; letter-spacing: -.4px; margin: 0 0 4px; font-weight: 850; }
.industries-heading p { font-size: 11px; line-height: 1.45; color: #3e4b73; margin: 0; }
.industries-search { width: 250px; min-height: 36px; flex-shrink: 0; display: flex; align-items: center; gap: 8px; padding: 8px 11px; border: 1px solid #cbdcff; border-radius: 11px; background: #fff; color: #153675; }
.industries-search input { min-width: 0; width: 100%; border: 0; outline: 0; background: transparent; font: inherit; font-size: 11px; color: #101d55; }

/* Main desktop layout: card grid on the left, details panel on the right */
.industries-workspace { display: grid; grid-template-columns: minmax(0, 1fr) 294px; gap: 12px; align-items: start; position: relative; }
.industries-grid { min-width: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; align-content: start; }
.industries-grid > .industry-reveal { display: block; min-width: 0; }
.industries-grid > .industry-reveal .industry-card { width: 100%; height: 100%; }
.industry-reveal { opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .55s ease; will-change: opacity, transform; }
.industry-reveal.is-visible { opacity: 1; transform: translateY(0); }

.industry-card { position: relative; display: block; width: 100%; min-width: 0; min-height: 120px; text-align: left; border: 1px solid #dce7ff; border-radius: 11px; padding: 10px 10px 13px 14px; cursor: pointer; color: #0868f5; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.industry-card:hover { transform: translateY(-3px); box-shadow: 0 12px 26px #254b9520; border-color: #82b2ff; }
.industry-card.is-selected { box-shadow: inset 0 0 0 1px currentColor, 0 5px 15px #254b9510; }
.industry-number { position: absolute; top: 8px; left: 8px; display: grid; place-items: center; width: 21px; height: 21px; border-radius: 50%; font-size: 10px; font-weight: 800; background: #ffffffc7; color: #17255d; }
.industry-card-icon { display: block; width: 31px; height: 31px; margin: 1px 0 7px 13px; stroke-width: 2.5; transition: transform .4s cubic-bezier(.34,1.56,.64,1); }
.industry-card:hover .industry-card-icon { transform: scale(1.12) rotate(-6deg); }
.industry-card h3 { font-size: 11px; line-height: 1.25; font-weight: 850; margin: 0 0 4px; color: #101d56; }
.industry-card p { font-size: 9.5px; line-height: 1.35; color: #2c3b6c; margin: 0; padding-right: 6px; }
.industry-card-arrow { position: absolute; right: 7px; bottom: 7px; width: 17px; height: 17px; display: grid; place-items: center; border-radius: 50%; background: currentColor; transition: transform .3s ease; }
.industry-card-arrow svg { color: #fff; }
.industry-card:hover .industry-card-arrow { transform: translateX(3px); }
.tone-blue { background: linear-gradient(135deg,#eaf4ff,#f8fcff); color: #0873ff; }
.tone-pink { background: linear-gradient(135deg,#fff0f8,#fff9fc); color: #f21a8c; }
.tone-green { background: linear-gradient(135deg,#eafff4,#f7fffb); color: #00b879; }
.tone-orange { background: linear-gradient(135deg,#fff6e5,#fffdf7); color: #ff8c00; }
.tone-purple { background: linear-gradient(135deg,#f5efff,#fcf9ff); color: #8427fa; }
.tone-sky { background: linear-gradient(135deg,#eaf7ff,#f8fcff); color: #0876f9; }
.industry-card h3 { color: #101d56; }
.industry-card.tone-blue:hover h3 { color: #0873ff; }
.industry-card.tone-pink:hover h3 { color: #f21a8c; }
.industry-card.tone-green:hover h3 { color: #008f5d; }
.industry-card.tone-orange:hover h3 { color: #b86600; }
.industry-card.tone-purple:hover h3 { color: #8427fa; }
.industry-card.tone-sky:hover h3 { color: #0876f9; }

/* Always-visible industry details panel */
.industry-detail-panel { position: sticky; top: 12px; z-index: 5; min-width: 0; max-height: calc(100vh - 24px); overflow-y: auto; padding: 14px 14px 15px; margin-top: -44px; border: 1px solid #d9e7ff; border-radius: 15px; background: #fff; box-shadow: 0 10px 30px rgba(18, 66, 145, .14); scrollbar-width: thin; scrollbar-color: #c8d9f6 transparent; }
.industry-detail-panel-header { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.industry-detail-panel-header .industry-modal-number { position: static; flex: 0 0 30px; width: 30px; height: 30px; font-size: 12px; background: #dcebff; color: #0873ff; }
.industry-detail-panel-header .industry-modal-icon { display: none; }
.industry-detail-panel-title { min-width: 0; flex: 1; }
.industry-modal-eyebrow { display: none; }
.industry-detail-panel-title h2 { margin: 0; color: #101d56; font-size: 14px; line-height: 1.25; font-weight: 850; }
.industry-detail-panel .industry-modal-image { display: block; width: 100%; height: 148px; object-fit: cover; border-radius: 10px; margin: 0 0 12px; }
.industry-detail-panel .industry-detail-section { display: flex; align-items: flex-start; gap: 9px; margin: 13px 0; }
.industry-detail-panel .industry-detail-section > svg { width: 24px; height: 24px; flex: 0 0 24px; color: #0874ff; stroke-width: 2.5; }
.industry-detail-panel .industry-detail-section > div { min-width: 0; flex: 1; }
.industry-detail-panel .industry-detail-section h3 { font-size: 11px; line-height: 1.3; font-weight: 850; margin: 0 0 5px; color: #111f58; }
.industry-detail-panel .industry-detail-section p { font-size: 10px; line-height: 1.45; color: #344574; margin: 0; }
.industry-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.industry-tags span { padding: 5px 7px; border-radius: 5px; background: #eef4ff; color: #223b70; font-size: 9px; line-height: 1.2; }
.industry-checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.industry-checklist li { display: flex; align-items: flex-start; gap: 5px; color: #334574; font-size: 9.5px; line-height: 1.35; }
.industry-checklist li > svg { width: 13px; height: 13px; color: #0bb878; flex: 0 0 13px; margin-top: 1px; }
.industry-cta-box { display: flex; align-items: flex-start; gap: 8px; padding: 10px; border-radius: 9px; background: #edf5ff; color: #0874ff; margin: 13px 0 10px; }
.industry-cta-box > svg { flex: 0 0 24px; width: 24px; height: 24px; }
.industry-cta-box b { display: block; font-size: 10px; margin-bottom: 3px; color: #111f58; }
.industry-cta-box p { font-size: 9px; line-height: 1.4; color: #344574; margin: 0; }
.industry-detail-panel .industry-get-started { display: flex; width: 100%; align-items: center; justify-content: center; gap: 8px; padding: 10px 14px; border-radius: 8px; background: #0866f5; color: #fff; text-decoration: none; font-size: 10px; font-weight: 800; }
.industry-detail-panel .industry-get-started:hover { box-shadow: 0 8px 20px rgba(8,102,245,.25); transform: translateY(-1px); }

.industries-empty { grid-column: 1 / -1; display: grid; place-items: center; gap: 8px; padding: 36px 20px; border: 1px dashed #cbd8f0; border-radius: 14px; background: #f7faff; color: #3a4a72; text-align: center; }
.industries-empty svg { color: #0874ff; }
.industries-empty b { color: #101d56; }
.industries-empty span { font-size: 12px; }

.industries-why { background: #f5f8ff; padding: 13px 0; margin-top: 24px; }
.industries-why-inner { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 14px; align-items: center; }
.industries-why-inner > div { display: grid; grid-template-columns: 25px 1fr; column-gap: 7px; align-items: center; }
.industries-why-inner .industries-why-title { display: block; }
.industries-why-inner h2 { font-size: 14px; margin: 0 0 4px; }
.industries-why-inner p, .industries-why-inner span { font-size: 9px; line-height: 1.35; color: #3d4d78; margin: 0; }
.industries-why-inner b { font-size: 9px; }
.industries-why-inner > div > svg { grid-row: span 2; color: #9a2cff; width: 22px; height: 22px; }
.industries-why-inner > div:nth-child(3) > svg { color: #f3158c; }
.industries-why-inner > div:nth-child(4) > svg { color: #0874ff; }
.industries-why-inner > div:nth-child(5) > svg { color: #f3158c; }

@media (min-width: 1250px) {
  .industry-card { min-height: 120px; }
  .industry-detail-panel { margin-top: -44px; }
}
@media (max-width: 1100px) {
  .industries-container { width: calc(100% - 40px); }
  .industries-workspace { grid-template-columns: minmax(0, 1fr) 285px; gap: 10px; }
  .industries-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
  .industry-card { padding: 10px 8px 13px 10px; min-height: 120px; }
  .industry-card h3 { font-size: 10.5px; }
  .industry-card p { font-size: 9px; }
  .industry-detail-panel { padding: 12px; }
  .industry-detail-panel .industry-modal-image { height: 140px; }
}
@media (max-width: 900px) {
  .industries-hero-inner { grid-template-columns: 48% 52%; }
  .industries-workspace { grid-template-columns: minmax(0, 1fr) 270px; }
  .industries-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .industry-detail-panel { margin-top: 0; position: sticky; top: 10px; }
  .industries-why-inner { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .industries-container { width: calc(100% - 28px); }
  .industries-hero-inner { display: flex; flex-direction: column; }
  .industries-hero-copy { padding: 15px 0 8px; }
  .industries-hero h1 { font-size: 36px; letter-spacing: -1px; }
  .industries-hero h2 { font-size: 15px; }
  .industries-hero-copy > p { font-size: 12px; }
  .industries-features { gap: 5px; margin-top: 15px; }
  .industry-feature { font-size: 9px; }
  .industry-feature span { font-size: 8px; }
  .industry-feature svg { width: 24px; height: 24px; }
  .industries-hero-art { height: 210px; min-height: 210px; margin: 0 -10px; }
  .industries-hero-art img { max-height: 210px; }
  .industries-heading { align-items: stretch; flex-direction: column; gap: 11px; }
  .industries-search { width: 100%; }
  .industries-workspace { display: flex; flex-direction: column; gap: 18px; }
  .industries-grid { width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .industry-card { min-height: 123px; padding: 11px 9px 12px 12px; }
  .industry-card h3 { font-size: 10.5px; }
  .industry-card p { font-size: 9.5px; }
  .industry-detail-panel { width: 100%; position: static; max-height: none; overflow: visible; margin-top: 0; padding: 15px; }
  .industry-detail-panel .industry-modal-image { height: 190px; }
  .industry-detail-panel .industry-detail-section h3 { font-size: 12px; }
  .industry-detail-panel .industry-detail-section p, .industry-checklist li { font-size: 11px; }
  .industry-tags span { font-size: 10px; }
  .industries-why-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .industries-why-inner .industries-why-title { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .industries-hero h1 { font-size: 32px; letter-spacing: -.8px; }
  .industries-hero h2 { font-size: 14px; }
  .industries-hero-copy > p { font-size: 11.5px; }
  .industries-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .industry-card { min-height: 118px; padding: 10px 8px 12px 11px; }
  .industry-card h3 { font-size: 10px; }
  .industry-card p { font-size: 9px; }
  .industry-detail-panel .industry-modal-image { height: 150px; }
  .industries-why-inner { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .industries-page *, .industries-page *::before, .industries-page *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .industry-reveal { opacity: 1; transform: none; }
}