/* =====================================================================
   CREATIVE MINDS LAB - STANDARD TYPE & UI KIT
   Use this on ANY page (Elementor or not). Add the class in
   Elementor > widget > Advanced > CSS Classes. Nothing here changes a
   page unless you add a "cmlx-" class to an element.
   Source of truth = the landing page tokens (assets/css/landing.css :root).
   ===================================================================== */

:root{
  /* 1. FONTS (2 only) */
  --cml-font-head:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;  /* headings, buttons */
  --cml-font-body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;              /* paragraphs, labels */

  /* 2. TYPE SCALE */
  --cml-fs-h1:clamp(32px,4.2vw,56px);
  --cml-fs-h2:clamp(32px,4.2vw,56px);
  --cml-h2-md:clamp(26px,3.1vw,44px);   /* H2 in split 2-column rows */
  --cml-fs-h3:24px;
  --cml-fs-card-title:clamp(28px,2.4vw,34px);
  --cml-fs-p:16px;
  --cml-fs-min:14px;                    /* never go below this */
  --cml-h2-weight:800;

  /* 3. BUTTON */
  --cml-btn-size:14px;
  --cml-btn-weight:600;
  --cml-btn-height:52px;

  /* 4. BADGE / EYEBROW (small label above a heading) */
  --cml-badge-size:14px;
  --cml-badge-weight:700;
  --cml-badge-ls:.16em;
  --cml-badge-line:46px;
  --cml-badge-gap:14px;
  --cml-badge-blue:#4f86ff;

  /* 5. LAYOUT */
  --cml-container:1440px;

  /* 6. COLORS */
  --cml-bg:#040711;
  --cml-text:#ffffff;
  --cml-muted:#a9afc4;
  --cml-cyan:#2ee6ff;
  --cml-violet:#8b7cf6;
}

/* ---------- Container (Elementor: use on a Container / Section) ---------- */
.cmlx-container{width:min(var(--cml-container),96%);margin-left:auto;margin-right:auto}

/* ---------- Headings (put the class on the Heading widget, or its wrapper) ---------- */
.cmlx-h1, .cmlx-h1 :is(h1,h2,h3,h4,h5,h6,.elementor-heading-title){
  font-family:var(--cml-font-head);font-size:var(--cml-fs-h1);font-weight:var(--cml-h2-weight);line-height:1.1;letter-spacing:-.02em}
.cmlx-h2, .cmlx-h2 :is(h1,h2,h3,h4,h5,h6,.elementor-heading-title){
  font-family:var(--cml-font-head);font-size:var(--cml-fs-h2);font-weight:var(--cml-h2-weight);line-height:1.12;letter-spacing:-.02em}
.cmlx-h2-md, .cmlx-h2-md :is(h1,h2,h3,h4,h5,h6,.elementor-heading-title){
  font-family:var(--cml-font-head);font-size:var(--cml-h2-md);font-weight:var(--cml-h2-weight);line-height:1.12;letter-spacing:-.02em}
.cmlx-h3, .cmlx-h3 :is(h1,h2,h3,h4,h5,h6,.elementor-heading-title){
  font-family:var(--cml-font-head);font-size:var(--cml-fs-h3);font-weight:700;line-height:1.25}
.cmlx-card-title, .cmlx-card-title :is(h1,h2,h3,h4,h5,h6,.elementor-heading-title){
  font-family:var(--cml-font-head);font-size:var(--cml-fs-card-title);font-weight:800;line-height:1.15}

/* ---------- Paragraph / text ---------- */
.cmlx-p, .cmlx-p :is(p,.elementor-widget-container,.elementor-text-editor){
  font-family:var(--cml-font-body);font-size:var(--cml-fs-p);font-weight:400;line-height:1.6;color:var(--cml-muted)}
.cmlx-small, .cmlx-small :is(p,span){font-family:var(--cml-font-body);font-size:var(--cml-fs-min);line-height:1.5}

/* ---------- Badge / eyebrow ---------- */
.cmlx-badge, .cmlx-badge :is(span,p,div,.elementor-heading-title,.elementor-widget-container){
  font-family:var(--cml-font-body);font-size:var(--cml-badge-size);font-weight:var(--cml-badge-weight);
  letter-spacing:var(--cml-badge-ls);text-transform:uppercase;line-height:1.2;color:var(--cml-badge-blue)}
.cmlx-badge{display:inline-flex;align-items:center;gap:var(--cml-badge-gap);white-space:nowrap}
/* optional: add .cmlx-badge--line to get the fading line after the label (and .cmlx-badge--both for both sides) */
.cmlx-badge--line::after,.cmlx-badge--both::after{content:"";width:var(--cml-badge-line);height:1px;background:linear-gradient(90deg,currentColor,transparent)}
.cmlx-badge--both::before{content:"";width:var(--cml-badge-line);height:1px;background:linear-gradient(90deg,transparent,currentColor)}

/* ---------- Button (Elementor: Button widget > CSS Classes; or any <a>) ---------- */
.cmlx-btn, .cmlx-btn .elementor-button, a.cmlx-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;box-sizing:border-box;max-width:100%;
  height:var(--cml-btn-height);min-height:var(--cml-btn-height);padding:0 28px;border-radius:12px;
  font-family:var(--cml-font-body);font-size:var(--cml-btn-size);font-weight:var(--cml-btn-weight);line-height:1.2;
  text-decoration:none;cursor:pointer;border:1px solid transparent;transition:transform .2s,box-shadow .2s,background .2s}
.cmlx-btn--light, .cmlx-btn--light .elementor-button{background:#fff;color:#0a1245}
.cmlx-btn--ghost, .cmlx-btn--ghost .elementor-button{background:rgba(255,255,255,.04);color:#fff;border-color:rgba(130,150,255,.35)}
.cmlx-btn--grad, .cmlx-btn--grad .elementor-button{background:linear-gradient(90deg,#7047f6,#3d8ff2 55%,#1fe2e6);color:#fff}
.cmlx-btn:hover{transform:translateY(-2px)}

/* ---------- Gradient text (safe: sets its own fill, so a site-wide transparent-fill rule can't break it) ---------- */
.cmlx-grad, .cmlx-grad :is(span,b,.elementor-heading-title){
  background:linear-gradient(90deg,var(--cml-cyan),var(--cml-violet));-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent}

/* ---------- Dark section background helper ---------- */
.cmlx-dark{background:var(--cml-bg);color:var(--cml-text)}

/* ---------- Mobile ---------- */
@media (max-width:900px){
  :root{--cml-badge-line:24px;--cml-badge-gap:10px;--cml-badge-ls:.12em}
  .cmlx-btn,.cmlx-btn .elementor-button{width:100%}
}