/* ===== Layout utilities ===== */
.section { margin: 32px 0; }
.section .section-head { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:12px; }
.grid { display:grid; gap:16px; }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1024px){
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px){
  .grid-3 { grid-template-columns: 1fr; }
}
@media (max-width: 640px){
  .grid-4 { grid-template-columns: 1fr; }
}

/* Fluid auto-fit grids for card layouts */
.cas-grid-auto{
  display: grid;
  gap: var(--space-md, 16px);
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
}

.cas-grid-auto-sm{
  display: grid;
  gap: var(--space-md, 16px);
  grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
}

.cas-grid-auto-lg{
  display: grid;
  gap: var(--space-md, 16px);
  grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
}

/* Vertical stack with consistent spacing */
.cas-stack > * + *{
  margin-top: var(--stack-gap, var(--space-md, 16px));
}

/* ===== Trust bar ===== */
.trust { background: #000; border:1px solid #ffffff; border-radius:16px; padding:14px; }
.trust-logos { display:flex; gap:20px; flex-wrap:wrap; align-items:center; justify-content:center; opacity:.9; }
.trust-logos img { height:28px; filter: grayscale(100%) contrast(1.2); opacity:.85; }

/* ===== Solution cards ===== */
.solution { padding:30px; border-radius:14px; border:1px solid #ffffff; background:#000; transition:transform .15s, background .15s; }
.solution:hover { transform: translateY(-2px); background:#000; }
.solution h3 { margin:0 0 10px; font-size:18px; }
.solution p { margin:0; color:var(--muted); }
.solution .actions { margin-top:10px; display:flex; gap:8px; align-items:center; justify-content:center; }


/* Partners page – solution cards with CAS gradient border */
.partners-page .solution {
  position: relative;
  border-radius: 18px;

  /* thin gradient frame */
  border: 2px solid transparent;

  /* inner dark panel + outer gradient border */
  background:
    linear-gradient(180deg,#000,#000) padding-box,
    linear-gradient(
      135deg,
      var(--blue),
      #e7f1ff,
      var(--green),
      #f2ffe6,
      var(--blue)
    ) border-box;

  box-shadow: 0 18px 40px rgba(0,0,0,0.55);
}





/* ===== Industries ===== */
.badge-row { display:flex; gap:10px; flex-wrap:wrap; }
.badge { padding:8px 10px; border-radius:999px; border:1px solid #1b2430; background:#10171f; color:var(--text); font-size:13px; }

/* ===== Proof / KPI band ===== */
.kpis { display:flex; gap:16px; flex-wrap:wrap; }
.kpi-card { flex:1 1 200px; padding:16px; border-radius:14px; border:1px solid #1b2430; background:#0f151d; text-align:center; }
.kpi-card .num { font-size:24px; font-weight:700; }
.kpi-card .label { color:var(--muted); }

/* ===== Final CTA band ===== */
.cta-band { display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:18px; border-radius:16px; border: 2px solid var(--cas-silver-border); background: radial-gradient(900px 420px at 12% 0%, rgba(13,116,245,0.18), transparent 55%), radial-gradient(900px 420px at 92% 100%, rgba(89,224,11,0.18), transparent 55%), #070b10; box-shadow: 0 18px 34px rgba(0,0,0,0.65); }
.cta-band h3 { margin:0; font-size:20px; }
.cta-band p { margin:0; color:#ffffff; }
.cta-actions { display:flex; gap:10px; flex-wrap:wrap; }
.btn.ghost { background:transparent; border:1.5px solid rgba(255,255,255,.6); color: #ffffff; }





/* Accessibility focus for links-in-cards */
.solution a:focus-visible, .badge:focus-visible, .btn:focus-visible {
  outline:2px solid var(--blue); outline-offset:3px; border-radius:10px;
}

/*
  Main-page hero/top-section styling has been moved to:
  /assets/css/hero_main.css

  Removed from this file:
  - .hero--full shell rules
  - .hero--full .hero-inner rules
  - .hero--full h1 / p spacing rules
  - .hero--full mobile rules
  - .hero--full header fade rules
  - .hero--full .h1-sub rules
  - .btn.white.hero-btn rules
  - .btn.mid.hero-btn rules
  - .hero--full .hero-inner p .btn + .btn spacing rules

  This prevents components.css from fighting the new global hero system.
*/

/* Align to the same edges as header/hero */
.content-shell{
  max-width: var(--site-max);
  margin: -24px auto 40px;
  padding: 0 var(--gutter);
  overflow-x: hidden;
}

@media (max-width: 768px){
  .content-shell{
    margin-top: -16px;
    margin-bottom: 28px;
  }
}

/* The lifted panel */
.content-inner{
  background: linear-gradient(180deg,#000,#000);
  border: 1px solid #101822;
  border-radius: 18px;
  padding: 20px;
  /* Omni/radial-style lift: zero offset + blur + small spread */
  box-shadow:
    0 0 28px 6px rgba(0,0,0,0.28);
}

/* Optional: add a faint colored aura for brand feel */
@media (min-width: 900px){
  .content-inner{
    box-shadow:
      0 0 28px 6px rgba(0,0,0,0.28),
      0 0 60px 0 rgba(13,116,245,0.07);
  }
}

/* ===== Responsive CTA band ===== */
@media (max-width: 860px){
  .cta-band{
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .cta-band .cta-actions{
    margin-top: 10px;
  }
}

@media (max-width: 720px){
  .cta-band{
    gap: 12px;
    padding: 16px;
  }

  .cta-actions{
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .cta-actions .btn,
  .cta-actions a.btn,
  .cta-actions button.btn{
    width: auto;
    flex: 0 0 auto;
    align-self: flex-start;
    white-space: nowrap;
  }
}

/* ===== Responsive buttons ===== */
@media (max-width: 520px){
  .btn{
    min-height: var(--touch-min, 44px);
    padding: 12px 16px;
  }
}