/* ============================================================
   CM Tech Consulting — brand overrides for OLMO (demo-9)
   Aligned to the official Brand Standards Manual v1.0 (June 2026).
   Palette: Deep Velvet Violet #6C3483 · Electric Orchid #9B59B6 ·
            Neon Amethyst #AF7AC5 · Charcoal #111111 · Tech Gray #555555
   Type:    Headings/wordmark = Avenir Next (Montserrat fallback)
            Body/UI = Open Sans
   Loaded LAST so it wins over style.css / menu.css.
   ============================================================ */

:root{
  --cm-violet:#6C3483;   /* Deep Velvet Violet (primary)  */
  --cm-orchid:#9B59B6;   /* Electric Orchid (hover/accent) */
  --cm-amethyst:#AF7AC5; /* Neon Amethyst (tints)          */
  --cm-ink:#111111;      /* Solid Charcoal Black           */
  --cm-gray:#555555;     /* Tech Gray                      */
}

/* ---------- Typography (styleguide) ---------- */
body,
.p-sm,.p-md,.p-lg,.p-xl,
.wsmenu > .wsmenu-list > li > a,
input,textarea,select,button{
  font-family:'Open Sans','Segoe UI',system-ui,-apple-system,sans-serif;
}
h1,h2,h3,h4,h5,h6,
[class^="h1-"],[class^="h2-"],[class^="h3-"],[class^="h4-"],[class^="h5-"],[class^="h6-"],
.section-title h3,.statistic-number,.price{
  font-family:'Avenir Next LT Pro','Avenir Next',Montserrat,'Segoe UI',sans-serif;
  font-weight:700;
  letter-spacing:.2px;
  text-transform: uppercase;
}

.section-id {
    font-weight:700;
      text-transform: uppercase;
}

/* ---------- Accent backgrounds ---------- */
.bg-skyblue{ background-color:var(--cm-violet) !important; }
.bg-tra-skyblue{ background:rgba(108,52,131,.08) !important; }
.bg-skyblue-gradient{ background:linear-gradient(100deg,#6C3483 0%,#9B59B6 55%,#AF7AC5 100%) !important; }
.bg-stateblue{ background-color:var(--cm-ink) !important; }

/* ---------- Buttons ---------- */
.btn-skyblue,
.scroll .btn-skyblue,
.white-color .btn-skyblue,
.skyblue-hover:hover,
.scroll .skyblue-hover:hover,
.white-color .skyblue-hover:hover{
  background-color:var(--cm-violet) !important;
  border-color:var(--cm-violet) !important;
  color:#fff !important;
}
.btn-skyblue:hover,
.tra-skyblue-hover:hover,
.scroll .tra-skyblue-hover:hover{
  background-color:var(--cm-orchid) !important;
  border-color:var(--cm-orchid) !important;
  color:#fff !important;
}
.btn-tra-grey:hover{
  background-color:var(--cm-violet) !important;
  border-color:var(--cm-violet) !important;
  color:#fff !important;
}
.tra-white-hover:hover{
  background-color:#fff !important;
  border-color:#fff !important;
  color:var(--cm-violet) !important;
}

/* ---------- Accent text / icons ---------- */
.skyblue-color,
.skyblue-color h2,.skyblue-color h3,.skyblue-color h4,.skyblue-color h5,
.skyblue-color span,
a.skyblue-color,
.statistic-number,
.cb-header{
  color:var(--cm-violet) !important;
}

/* feature icons + list ticks + quote marks */
.fbox-ico [class*="flaticon-"]{ color:var(--cm-violet) !important; }
.simple-list .list-item p::before,
ul.simple-list li p::before{ color:var(--cm-violet) !important; }
.review-1-ico [class*="flaticon-"]{ color:var(--cm-orchid) !important; }

/* ---------- Highlight badge / pricing / video buttons ---------- */
.highlight-badge.bg-skyblue{ background:var(--cm-violet) !important; }
.video-btn.bg-skyblue{ background-color:var(--cm-violet) !important; }

/* ---------- Navigation: readable over the LIGHT hero ---------- */
.tra-menu .wsmenu > .wsmenu-list > li > a{ color:#2a2f37 !important; }
.tra-menu .wsmenu > .wsmenu-list > li:hover > a,
.wsmenu > .wsmenu-list > li:hover > a{ color:var(--cm-violet) !important; }
.scroll .wsmenu > .wsmenu-list > li > a{ color:#2a2f37 !important; }
.scroll .wsmenu > .wsmenu-list > li:hover > a{ color:var(--cm-violet) !important; }
/* solid white sticky bar on scroll */
.wsmainfull.scroll{ background:#fff !important; box-shadow:0 4px 18px rgba(0,0,0,.07) !important; }
/* keep the header CTA button text white in every state (beats the nav-link colour rule) */
.tra-menu .wsmenu > .wsmenu-list > li > a.btn,
.tra-menu .wsmenu > .wsmenu-list > li:hover > a.btn,
.scroll .wsmenu > .wsmenu-list > li > a.btn,
.scroll .wsmenu > .wsmenu-list > li:hover > a.btn,
.wsmenu .btn.btn-skyblue{ color:#ffffff !important; }

/* ---------- Preloader dots ---------- */
.skyblue-loading #loading-center-absolute .object{
  background-color:var(--cm-violet) !important;
}

/* ---------- Logo sizing (SVG horizontal lockup, ~4.9:1) ---------- */
.desktoplogo img{ height:34px; width:auto; }
.smllogo img{ height:30px; width:auto; }
.footer-logo{ height:34px; width:auto; }

/* ---------- Misc accents ---------- */
::selection{ background:var(--cm-violet); color:#fff; }
a{ color:var(--cm-violet); }
a:hover{ color:var(--cm-orchid); }
.foo-links a,.bottom-footer-list a{ color:inherit; }
.foo-links a:hover,.bottom-footer-list a:hover{ color:var(--cm-violet); }
.footer-socials a:hover [class*="flaticon-"]{ color:var(--cm-violet) !important; }

/* platform / product card links */
.platform-link{ color:var(--cm-violet) !important; font-weight:700; }
.platform-link:hover{ color:var(--cm-orchid) !important; }

/* ---------- HERO: on-brand violet gradient (replaces the busy stock illustration) ---------- */
#hero-9{
  background:
    radial-gradient(115% 130% at 82% -10%, rgba(175,122,197,.55) 0%, rgba(175,122,197,0) 55%),
    linear-gradient(135deg, #5a2a6e 0%, #6C3483 42%, #4a2259 100%) !important;
  background-attachment: scroll !important;
  padding-top: 170px;
  padding-bottom: 40px;
}
.hero-9-txt{ padding-right:24px; }
.cm-eyebrow{
  display:inline-block; margin-bottom:18px;
  font-family:'Open Sans',sans-serif; font-weight:700; font-size:13px; letter-spacing:1.5px;
  text-transform:uppercase; color:#fff;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.35);
  padding:7px 16px; border-radius:999px;
}
@media (max-width:991px){ .cm-eyebrow{ margin-bottom:14px; } }
.hero-9-txt h2{ color:#ffffff !important; font-weight:700; line-height:1.16; }
.hero-9-txt p{ color:rgba(255,255,255,.9) !important; }
@media (max-width:991px){
  .hero-9-txt{ padding-right:0; margin-bottom:40px; text-align:center; }
  #hero-9{ padding-top:130px; }
}

/* ---------- HEADER: solid white bar always, so the colour logo + nav stay crisp ---------- */
.tra-menu .wsmainfull{
  background:#ffffff !important;
  box-shadow:0 2px 14px rgba(17,17,17,.07) !important;
  padding:10px 0 !important;
}
.tra-menu .wsmainfull.scroll{ padding:2px 0 !important; }

/* platform cards: left-aligned reads better than template's center */
#platforms .fbox-8{ text-align:left; }
#platforms .fbox-8 h5{ margin-bottom:12px; }

/* ---------- PRODUCTS: showcase cards for the SaaS we own & operate ---------- */
#products{
  background:linear-gradient(180deg,#faf7fc 0%, #ffffff 100%) !important;
}
#products .product-card{
  position:relative; height:100%; text-align:left;
  background:#ffffff; border:1px solid #ece6f0; border-radius:18px;
  padding:38px 32px 32px; overflow:hidden;
  box-shadow:0 12px 34px rgba(108,52,131,.08);
  transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease;
  display:flex; flex-direction:column;
}
#products .product-card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:5px;
  background:linear-gradient(90deg, var(--cm-violet), var(--cm-orchid));
  transform:scaleX(0); transform-origin:left; transition:transform .35s ease;
}
#products .product-card:hover{
  transform:translateY(-8px); border-color:#e2d3ec;
  box-shadow:0 26px 56px rgba(108,52,131,.20);
}
#products .product-card:hover::before{ transform:scaleX(1); }

/* gradient icon medallion */
#products .product-ico{
  width:74px; height:74px; border-radius:20px; margin-bottom:24px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--cm-violet) 0%, var(--cm-orchid) 100%);
  box-shadow:0 10px 22px rgba(108,52,131,.28);
  transition:transform .28s ease;
}
#products .product-card:hover .product-ico{ transform:rotate(-6deg) scale(1.06); }
#products .product-ico [class*="flaticon-"]{ font-size:34px; color:#ffffff; line-height:1; }
#products .product-ico [class*="flaticon-"]::before{ margin:0; font-size:34px; }

/* title row + badge */
#products .product-head{ display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-bottom:14px; }
#products .product-head h5{ margin:0; }
.product-badge{
  display:inline-block; font-family:'Open Sans',sans-serif; font-weight:700;
  font-size:10.5px; letter-spacing:1.1px; text-transform:uppercase;
  color:var(--cm-violet); background:rgba(175,122,197,.16);
  padding:5px 12px; border-radius:999px; white-space:nowrap;
}
.product-badge.is-emerging{ color:var(--cm-orchid); background:rgba(155,89,182,.13); }

#products .product-desc{ flex:1 1 auto; margin-bottom:18px; }

/* metric chips */
#products .product-stats{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:8px; }
#products .product-stats span{
  font-family:'Open Sans',sans-serif; font-size:12.5px; font-weight:600; color:#5a4763;
  background:#f4eef8; border:1px solid #ece1f2; border-radius:8px; padding:6px 11px;
}

#products .product-card .btn{ margin-top:24px; align-self:flex-start; }
#products .product-soon{
  display:inline-flex; align-items:center; gap:8px; margin-top:24px;
  font-family:'Open Sans',sans-serif; font-weight:700; font-size:13.5px; color:#8a7d93;
}
#products .product-soon::before{
  content:""; width:9px; height:9px; border-radius:50%;
  background:var(--cm-orchid); box-shadow:0 0 0 4px rgba(155,89,182,.18);
}

/* tech stack strip spacing */
#brands-2 .brands-title .p-lg{ line-height:2; margin-top:14px; }

/* ---------- AI SERVICES: full AI offering cards ---------- */
#ai-services{
  background:linear-gradient(180deg,#ffffff 0%, #faf7fc 100%) !important;
}
#ai-services .ai-card{
  position:relative; height:100%; text-align:left;
  background:#ffffff; border:1px solid #ece6f0; border-radius:18px;
  padding:32px 28px 28px; overflow:hidden;
  box-shadow:0 12px 34px rgba(108,52,131,.08);
  transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease;
  display:flex; flex-direction:column;
}
#ai-services .ai-card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:5px;
  background:linear-gradient(90deg, var(--cm-violet), var(--cm-orchid));
  transform:scaleX(0); transform-origin:left; transition:transform .35s ease;
}
#ai-services .ai-card:hover{
  transform:translateY(-8px); border-color:#e2d3ec;
  box-shadow:0 26px 56px rgba(108,52,131,.20);
}
#ai-services .ai-card:hover::before{ transform:scaleX(1); }

/* gradient medallion */
#ai-services .ai-ico{
  width:60px; height:60px; border-radius:16px; margin-bottom:20px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--cm-violet) 0%, var(--cm-orchid) 100%);
  box-shadow:0 10px 22px rgba(108,52,131,.28);
  transition:transform .28s ease;
}
#ai-services .ai-card:hover .ai-ico{ transform:rotate(-6deg) scale(1.06); }
#ai-services .ai-ico [class*="flaticon-"]{ font-size:28px; color:#ffffff; line-height:1; }
#ai-services .ai-ico [class*="flaticon-"]::before{ margin:0; font-size:28px; }

#ai-services .ai-card h5{ margin-bottom:12px; }
#ai-services .ai-desc{ flex:1 1 auto; margin-bottom:0; color:var(--cm-gray); }