/* =====================================================================
   CMMC Solutions page — www.edcus.com
   Every class is prefixed "cmmc-" and every variable "--cmmc-" so nothing
   collides with /css/edc.css or Bootstrap. Load AFTER edc.css.
   ===================================================================== */

.cmmc-page {
  --cmmc-navy: #0A2540;
  --cmmc-ink: #2e375d;
  --cmmc-body: #425466;
  --cmmc-accent: #4165F5; 
  --cmmc-accent-or: #f9ba42;; 
  --cmmc-accent-dark: #2d27c4;
  --cmmc-bg: #F6F9FC;
  --cmmc-line: #E3E8EE;
  --cmmc-grad: linear-gradient(90deg, #1485FD 0%, #7851C7 100%);
  --cmmc-grad-dark: linear-gradient(110deg, #0A2540 0%, #19265f 55%, #3a2e86 100%);
  --cmmc-shadow: 0 2px 5px rgba(50, 50, 93, .08), 0 12px 32px rgba(50, 50, 93, .10);
  --cmmc-shadow-hover: 0 4px 10px rgba(50, 50, 93, .10), 0 20px 44px rgba(50, 50, 93, .16);
  --cmmc-ease: cubic-bezier(.22, .61, .36, 1);
  --cmmc-nav-offset: 120px;

  color: var(--cmmc-body);
  font-family: "Titillium Web", sans-serif;
  font-size: 1.1rem;
  line-height: 1.6;
}

/* edc.css sets li { margin-top: 1rem } globally — neutralize inside our lists */
.cmmc-page .cmmc-list > li { margin-top: 0; }
.cmmc-list { list-style: none; margin: 0; padding: 0; }

/* ---------- Shared type ---------- */
.cmmc-eyebrow {
  display: inline-block;
  margin-bottom: 1rem;
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cmmc-accent);
}
.cmmc-eyebrow-hero{
  display: inline-block;
  margin-bottom: 1rem;
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cmmc-navy);
}
.cmmc-eyebrow--pill {
  padding: .35rem 1rem;
  border: 1px solid rgba(65, 101, 245, .35);
  border-radius: 999px;
  background: var(--cmmc-accent-or);
}
.cmmc-h1 {
  margin: 0 auto 1.25rem;
  max-width: 880px;
  font-size: 3.3rem;
  font-weight: 600;
  line-height: 1.08;
  color: #fff;
  text-wrap: balance;
}
.cmmc-h2 {
  margin: 0 0 1.25rem;
  font-size: 2.5rem;
  font-weight: 600;
  line-height: 1.15;
  color: var(--cmmc-navy);
  text-wrap: balance;
}
.cmmc-h3 {
  margin: 0 0 .5rem;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--cmmc-navy);
}
.cmmc-lede {
  font-size: 1.25rem;
  line-height: 1.6;
  color: var(--cmmc-body);
  text-wrap: pretty;
}
.cmmc-text { margin: 0 0 1rem; text-wrap: pretty; }
.cmmc-text:last-child { margin-bottom: 0; }
.cmmc-strong { color: var(--cmmc-navy); font-weight: 700; }

/* ---------- Layout ---------- */
.cmmc-section { padding: 96px 0; }
.cmmc-section--tint { background: var(--cmmc-bg); }
.cmmc-section--tight-top { padding-top: 0; }
.cmmc-section-head { max-width: 760px; margin-bottom: 3rem; }
.cmmc-section-head--center { margin-left: auto; margin-right: auto; text-align: center; }

.cmmc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  align-items: center;
}
.cmmc-actions--center { justify-content: center; }

/* Arrow link (chevron slides on hover) */
.cmmc-arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--cmmc-accent);
  text-decoration: none;
}
.cmmc-arrow-link::after {
  content: "\203A";
  font-size: 1.2em;
  line-height: 1;
  transition: transform .15s var(--cmmc-ease);
}
.cmmc-arrow-link:hover { color: var(--cmmc-accent-dark); }
.cmmc-arrow-link:hover::after { transform: translateX(4px); }

/* ---------- 1. Hero ---------- */
.cmmc-hero {
  padding: calc(var(--cmmc-nav-offset) + 72px) 0 0;
  text-align: center;
  /*background: linear-gradient(360deg, #F6F9FC 35%, #4165F5 100%);*/
  background: linear-gradient(90deg, rgb(32, 173, 255) 0%, rgb(62, 104, 245) 47.115%, rgb(157, 101, 217) 100%);
}
.cmmc-hero .cmmc-lede { max-width: 760px; margin: 0 auto 2.25rem; color: #fff;}
.cmmc-trust-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 40px;
  margin-top: 64px;
  padding: 24px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.24);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--cmmc-ink);
}
.cmmc-trust-item { font-size: 1.5rem; display: inline-flex; align-items: center; gap: 10px; color:  var(--cmmc-accent-or);}
.cmmc-trust-item .bi { font-size: 2rem; color: var(--cmmc-accent-or); }
.cmmc-hero-foot { padding: 0 0 48px; font-size: 1rem; }
.cmmc-hero .cmmc-arrow-link{color: #fff;}

/* ---------- 2. Why CMMC matters ---------- */
.cmmc-countdown {
  position: relative;
  overflow: hidden;
  height: 100%;
  padding: 40px;
  border-radius: 20px;
  background: var(--cmmc-grad-dark);
  color: #fff;
  box-shadow: var(--cmmc-shadow);
}
.cmmc-countdown::after {
  content: "";
  position: absolute;
  right: -80px;
  bottom: -120px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(65, 101, 245, .55) 0%, rgba(65, 101, 245, 0) 70%);
  pointer-events: none;
}
.cmmc-countdown-label {
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #f9ba42;
}
.cmmc-countdown-date {
  margin: .5rem 0 1rem;
  font-size: 3.4rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.01em;
}
.cmmc-countdown-days {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 1.25rem;
  padding: .4rem 1rem;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  font-weight: 600;
}
.cmmc-countdown-num { font-size: 1.5rem; font-weight: 700; color: #f9ba42; }
.cmmc-countdown-text {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: 1.2rem;
  color: rgba(255, 255, 255, .88);
  text-wrap: pretty;
}

.cmmc-applies { margin-top: 80px; }
.cmmc-applies-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}
.cmmc-applies-item {
  padding: 28px 24px;
  border: 1px solid var(--cmmc-line);
  border-radius: 12px;
  background: #fff;
}
.cmmc-icon-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: 1.25rem;
  border-radius: 14px;
  background: linear-gradient(135deg, #394887 0%, #6d6af0 100%);
  color: #fff;
  font-size: 1.5rem;
}
.cmmc-applies-item .cmmc-text { font-size: 1.05rem; }
.cmmc-closing-line {
  margin: 48px 0 0;
  font-size: 1.5rem;
  font-weight: 600;
  text-align: center;
  color: var(--cmmc-navy);
}

/* ---------- 3. Product grid ---------- */
.cmmc-products {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}
.cmmc-product {
  --cmmc-product-color: var(--cmmc-accent);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 12px;
  background: #fff;
  box-shadow: var(--cmmc-shadow);
  transition: transform .2s var(--cmmc-ease), box-shadow .2s var(--cmmc-ease);
}
.cmmc-product:hover { transform: translateY(-4px); box-shadow: var(--cmmc-shadow-hover); }
.cmmc-product--featured { grid-column: span 2; }
.cmmc-product-bar { height: 6px; background: var(--cmmc-product-color); }
.cmmc-product-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 28px;
}
.cmmc-product-logo {
  display: flex;
  align-items: center;
  min-height: 44px;
  margin-bottom: 1rem;
}
.cmmc-product-logo img { max-height: 40px; max-width: 100%; }
.cmmc-product-name {
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--cmmc-product-color);
}
.cmmc-product-name sup { font-size: .55em; top: -.8em; }
.cmmc-product-desc { flex: 1; margin: 0 0 1.25rem; font-size: 1.05rem; text-wrap: pretty; }
.cmmc-product--featured .cmmc-product-desc { font-size: 1.2rem; max-width: 560px; }
.cmmc-product .cmmc-arrow-link { color: var(--cmmc-product-color); }
.cmmc-product .cmmc-arrow-link:hover { color: var(--cmmc-navy); }

.cmmc-product--movestar { --cmmc-product-color: #f36810; }
.cmmc-product--agentlink { --cmmc-product-color: #38A040; }
.cmmc-product--easydps { --cmmc-product-color: #0099ff; }
.cmmc-product--easytariff { --cmmc-product-color: #1b6ec2; }
.cmmc-product--mobile { --cmmc-product-color: #1d62e5; }
.cmmc-product--gogistix { --cmmc-product-color: #19265f; }
.cmmc-product--merxed { --cmmc-product-color: #3348bc; }

/* ---------- 4. Supply chain ---------- */
.cmmc-pillars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
}
.cmmc-pillar { padding-top: 28px; border-top: 2px solid var(--cmmc-line); }
.cmmc-pillar .cmmc-text { font-size: 1.05rem; }

.cmmc-quote-band {
  padding: 88px 0;
  background: var(--cmmc-grad);
  color: #fff;
  text-align: center;
}
.cmmc-quote {
  max-width: 900px;
  margin: 0 auto 2.25rem;
  font-size: 2.2rem;
  font-weight: 600;
  line-height: 1.25;
  text-wrap: balance;
}
.cmmc-quote::before { content: "\201C"; }
.cmmc-quote::after { content: "\201D"; }

/* ---------- Agent banner ---------- */
.cmmc-agent-banner {
  padding: 40px 0;
  background: linear-gradient(90deg, #1B7122 0%, #38A040 55%, #2f8f6a 100%);
  color: #fff;
}
.cmmc-agent-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px 40px;
}
.cmmc-agent-logo {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  padding: 12px 20px;
  border-radius: 12px;
  background: #fff;
  font-size: 1.3rem;
  font-weight: 700;
  color: #38A040;
}
.cmmc-agent-logo img { max-height: 32px; }
.cmmc-agent-copy { flex: 1 1 420px; min-width: 0; }
.cmmc-agent-title { margin: 0 0 .35rem; font-size: 1.5rem; font-weight: 700; line-height: 1.25; color: #fff; }
.cmmc-agent-text { margin: 0; font-size: 1.05rem; color: rgba(255, 255, 255, .92); }

/* ---------- 5. FAQ ---------- */
#cmmc-faq { scroll-margin-top: var(--cmmc-nav-offset); }
.cmmc-faq-aside { position: sticky; top: calc(var(--cmmc-nav-offset) + 24px); }
.cmmc-updated { font-size: .95rem; color: var(--cmmc-body); }
.cmmc-faq .accordion-item {
  margin-bottom: 12px;
  overflow: hidden;
  border: 1px solid var(--cmmc-line);
  border-radius: 12px !important;
  background: #fff;
}
.cmmc-faq .accordion-button {
  gap: 16px;
  padding: 22px 24px;
  font-family: inherit;
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--cmmc-navy);
  background: #fff;
  box-shadow: none;
}
.cmmc-faq .accordion-button:not(.collapsed) { color: var(--cmmc-accent); background: #f4f6ff; }
.cmmc-faq .accordion-button:focus { box-shadow: 0 0 0 3px rgba(65, 101, 245, .18); }
.cmmc-faq-num { flex-shrink: 0; min-width: 1.6rem; font-weight: 700; color: var(--cmmc-accent); }
.cmmc-faq .accordion-body { padding: 4px 24px 24px 64px; font-size: 1.1rem; background: #f4f6ff; }
.cmmc-faq .accordion-body p { margin: 0 0 .75rem; text-wrap: pretty; }
.cmmc-faq .accordion-body p:last-child { margin-bottom: 0; }

/* ---------- 5B. Webinar ---------- */
.cmmc-webinar-thumb {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border: 1px solid #4165f5;
  border-radius: 20px;
  background: linear-gradient(90deg, rgba(65, 101, 245, 1) 0%, rgb(255, 156, 56) 100%);
  box-shadow: var(--cmmc-shadow);
  text-decoration: none;
}
.cmmc-webinar-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cmmc-webinar-play {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: #fff;
  color: var(--cmmc-accent);
  font-size: 2.4rem;
  box-shadow: 0 8px 24px rgba(10, 37, 64, .25);
  transition: transform .2s var(--cmmc-ease);
}
.cmmc-webinar-play .bi { margin-left: 4px; }
.cmmc-webinar-thumb:hover .cmmc-webinar-play { transform: translateY(-2px); }
.cmmc-webinar-meta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 1.75rem;
  font-weight: 600;
  color: var(--cmmc-ink);
}
.cmmc-webinar-meta .bi { color: var(--cmmc-accent); }

/* ---------- 6. Final CTA ---------- */
.cmmc-final {
  padding: 104px 0;
  background: var(--cmmc-grad-dark);
  color: #fff;
  text-align: center;
}
.cmmc-final .cmmc-h2 { color: #fff; }
.cmmc-final .cmmc-lede { max-width: 680px; margin: 0 auto 2.25rem; color: rgba(255, 255, 255, .88); }
.cmmc-final-note { margin: 1rem 0 2.25rem; font-size: .95rem; color: rgba(255, 255, 255, .72); }
.cmmc-final-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 32px;
}
.cmmc-final .cmmc-arrow-link { color: #fff; }
.cmmc-final .cmmc-arrow-link:hover { color: #f9ba42; }

.cmmc-disclaimer {
  padding: 40px 0 56px;
  border-top: 1px solid var(--cmmc-line);
  background: #fff;
}
.cmmc-disclaimer p {
  max-width: 960px;
  margin: 0 auto;
  font-size: .9rem;
  line-height: 1.6;
  color: #6b7c93;
}
.cmmc-disclaimer a { color: var(--cmmc-accent); }

/* ---------- Scroll reveal (added by cmmc.js) ---------- */
.cmmc-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .5s var(--cmmc-ease), transform .5s var(--cmmc-ease);
}
.cmmc-reveal.cmmc-is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .cmmc-reveal { opacity: 1; transform: none; transition: none; }
  .cmmc-product, .cmmc-arrow-link::after, .cmmc-webinar-play { transition: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1199.98px) {
  .cmmc-products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cmmc-applies-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 991.98px) {
  .cmmc-pillars { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .cmmc-faq-aside { position: static; margin-bottom: 2rem; }
  .cmmc-countdown { margin-top: 2rem; }
}
@media (max-width: 767.98px) {
  .cmmc-page { --cmmc-nav-offset: 0px; }
  .cmmc-section { padding: 64px 0; }
  .cmmc-hero { padding-top: 56px; }
  .cmmc-h1 { font-size: 2.3rem; }
  .cmmc-h2 { font-size: 1.9rem; }
  .cmmc-countdown { padding: 32px 24px; }
  .cmmc-countdown-date { font-size: 2.5rem; }
  .cmmc-products, .cmmc-applies-grid { grid-template-columns: minmax(0, 1fr); }
  .cmmc-product--featured { grid-column: auto; }
  .cmmc-quote { font-size: 1.6rem; }
  .cmmc-quote-band, .cmmc-final { padding: 72px 0; }
  .cmmc-faq .accordion-body { padding-left: 24px; }
}