/*
Theme Name: Hello Elementor Child — Mobile2CRM
Theme URI: https://mobile2crm.com/
Description: Mobile2CRM brand design system — child of Hello Elementor. Holds the gradient/brand CSS so it survives caching and isn't stripped by importers.
Author: Mobile2CRM
Template: hello-elementor
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hello-elementor-child
*/

/* ============================================================
   MOBILE2CRM DESIGN SYSTEM — brand tokens
   ============================================================ */
:root{
  --m2c-indigo:#5B3FA0; --m2c-blue:#3C60A8; --m2c-blue-l:#4A6BC8;
  --m2c-orange:#F0843C; --m2c-orange-deep:#E4603C;
  --m2c-ink:#0A0910; --m2c-panel:#16121F; --m2c-panel-2:#1C1726;
  --m2c-on-dark:#F1EEF6; --m2c-on-dark-muted:#9A93AE;
  --m2c-paper:#FFFFFF; --m2c-paper-2:#F5F7FC; --m2c-line:#E6E8F0;
  --m2c-on-light:#1A1726; --m2c-on-light-muted:#6B6480;
  --m2c-grad:linear-gradient(115deg,#5B3FA0 0%,#4A6BC8 40%,#F0843C 100%);
  --m2c-grad-warm:linear-gradient(120deg,#F0843C,#E4603C);
}

/* ---- 1. Gradient headline highlight ----
   Heading widget: wrap words in <span class="m2c-hl">…</span> */
.m2c-hl{
  background:var(--m2c-grad);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;display:inline-block;
}
/* emphasis word (e.g. MiFID II) -> <span class="m2c-word">…</span> */
.m2c-word{
  background:var(--m2c-grad-warm);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;font-weight:700;
}

/* ---- 2. Primary action button ----
   Button widget: CSS Classes = m2c-btn */
.m2c-btn .elementor-button{
  background:var(--m2c-grad-warm);color:#1A0E06;border:none;
  box-shadow:0 8px 22px rgba(240,132,60,.22);
  transition:transform .15s ease, box-shadow .15s ease;
}
.m2c-btn .elementor-button:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 40px rgba(240,132,60,.38);
  color:#1A0E06;
}
/* secondary button: CSS Classes = m2c-btn-2 */
.m2c-btn-2 .elementor-button{
  background:transparent;color:var(--m2c-indigo);
  border:1.5px solid #D7CFEA;
}
.m2c-dark .m2c-btn-2 .elementor-button{color:#CDBEFB;border-color:rgba(255,255,255,.2)}

/* ---- 3. Eyebrow pill ----
   small Heading/Text widget: CSS Classes = m2c-eyebrow */
.m2c-eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-family:"Space Mono",monospace;font-size:12.5px;letter-spacing:.06em;
  text-transform:uppercase;color:#C9BBF0;
  border:1px solid rgba(255,255,255,.14);border-radius:100px;
  padding:7px 14px;background:rgba(255,255,255,.02);
}
.m2c-eyebrow::before{
  content:"";width:7px;height:7px;border-radius:50%;
  background:var(--m2c-orange);animation:m2c-pulse 2s infinite;
}

/* ---- 4. Surface helpers (apply to a Container) ----
   m2c-dark  = statement surface (hero, CTA, footer)
   m2c-light = content surface (default; here for completeness) */
.m2c-dark{
  background:
    radial-gradient(820px 500px at 90% -10%, rgba(240,132,60,.13), transparent 58%),
    radial-gradient(720px 560px at -8% 112%, rgba(91,63,160,.20), transparent 55%),
    var(--m2c-ink);
  color:var(--m2c-on-dark);
}
.m2c-dark .elementor-heading-title{color:var(--m2c-on-dark)}
.m2c-light{background:var(--m2c-paper);color:var(--m2c-on-light)}

/* microcopy under buttons: CSS Classes = m2c-micro */
.m2c-micro{font-family:"Space Mono",monospace;font-size:13.5px;color:var(--m2c-on-dark-muted)}

/* ---- 5. Value/feature icon tints ----
   Icon Box widgets: CSS Classes = m2c-ico-1 / m2c-ico-2 / m2c-ico-3 */
.m2c-ico-1 .elementor-icon{background:rgba(91,63,160,.12);color:#B49BF0}
.m2c-ico-2 .elementor-icon{background:rgba(60,96,168,.12);color:#8FAAF0}
.m2c-ico-3 .elementor-icon{background:rgba(240,132,60,.14);color:var(--m2c-orange-deep)}

/* ============================================================
   6. LIVE CALL CARD — full styles for the HTML-widget markup
   (markup in the implementation kit; no inline <style> needed)
   ============================================================ */
.m2cc-card{position:relative;max-width:440px;font-family:"Inter",sans-serif;
  background:linear-gradient(180deg,#16121F,#1C1726);border:1px solid rgba(255,255,255,.09);
  border-radius:18px;padding:24px;box-shadow:0 40px 80px rgba(0,0,0,.55);color:#F1EEF6;}
.m2cc-card *{box-sizing:border-box;}
.m2cc-card::before{content:"";position:absolute;inset:-1px;border-radius:18px;padding:1px;
  background:linear-gradient(115deg,#5B3FA0,#4A6BC8 40%,#F0843C);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;opacity:.7;}
.m2cc-head{display:flex;align-items:center;justify-content:space-between;
  padding-bottom:16px;margin-bottom:16px;border-bottom:1px solid rgba(255,255,255,.09);}
.m2cc-live{display:flex;align-items:center;gap:8px;font-family:"Space Mono",monospace;
  font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#F0843C;}
.m2cc-rec{width:8px;height:8px;border-radius:50%;background:#ff5d6c;display:inline-block;
  animation:m2c-pulse 1.4s infinite;}
.m2cc-src{font-family:"Space Mono",monospace;font-size:11.5px;color:#9A93AE;}
.m2cc-wave{display:flex;align-items:center;gap:3px;height:42px;margin-bottom:18px;}
.m2cc-wave i{flex:1;border-radius:3px;opacity:.9;animation:m2c-bar 1.1s ease-in-out infinite;}
.m2cc-wave i:nth-child(-n+5){background:#6A4BC0;}
.m2cc-wave i:nth-child(n+6):nth-child(-n+10){background:#4A6BC8;}
.m2cc-wave i:nth-child(n+11){background:#F0843C;}
.m2cc-party{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;}
.m2cc-num{font-family:"Space Mono",monospace;font-size:15px;color:#F1EEF6;}
.m2cc-name{font-size:13px;color:#9A93AE;margin-top:3px;}
.m2cc-dir{font-family:"Space Mono",monospace;font-size:12px;color:#1A0E06;
  background:linear-gradient(120deg,#F0843C,#E4603C);padding:5px 10px;border-radius:7px;font-weight:700;}
.m2cc-log{display:flex;flex-direction:column;gap:11px;}
.m2cc-row{display:flex;align-items:center;justify-content:space-between;
  font-family:"Space Mono",monospace;font-size:13px;color:#CFC8DD;
  opacity:0;transform:translateY(6px);animation:m2c-rowin .5s ease forwards;}
.m2cc-row:nth-child(1){animation-delay:.5s;}
.m2cc-row:nth-child(2){animation-delay:.9s;}
.m2cc-row:nth-child(3){animation-delay:1.3s;}
.m2cc-check{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;
  background:linear-gradient(120deg,#F0843C,#E4603C);color:#1A0E06;font-size:12px;font-weight:700;}

/* ---- animations ---- */
@keyframes m2c-pulse{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes m2c-bar{0%,100%{height:14%}50%{height:100%}}
@keyframes m2c-rowin{to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){
  .m2cc-card *,.m2c-eyebrow::before{animation:none!important}
  .m2cc-row{opacity:1;transform:none}
}