/* ============================================================
   Total Materia — Integrator MLM component
   All selectors are namespaced (.tmi-*) and scoped under
   .tmi-root so nothing collides with the global theme / Bootstrap.
   ============================================================ */
.tmi-root{
  /* Brand */
  --tmi-red:        #E8455B;
  --tmi-red-dark:   #C9304A;
  --tmi-red-tint:   #FCEBEE;
  --tmi-blue:       #4E63D6;   /* Horizon */
  --tmi-blue-tint:  #ECEEFB;
  --tmi-logo-blue:  #5B9BD5;

  /* Neutrals */
  --tmi-ink:        #2A2A2E;
  --tmi-ink-soft:   #4A4A50;
  --tmi-muted:      #74747C;
  --tmi-line:       #E4E4E8;
  --tmi-line-soft:  #EFEFF2;

  /* Surfaces */
  --tmi-bg:         #FFFFFF;
  --tmi-bg-gray:    #F3F3F4;

  /* Shape */
  --tmi-radius:     14px;
  --tmi-radius-sm:  9px;
  --tmi-shadow-sm:  0 1px 3px rgba(20,20,30,.06), 0 6px 18px rgba(20,20,30,.05);
  --tmi-shadow-md:  0 4px 14px rgba(20,20,30,.08), 0 18px 40px rgba(20,20,30,.07);

  --tmi-maxw:       1160px;

  --tmi-font-head:  'Montserrat', system-ui, sans-serif;
  --tmi-font-body:  'Poppins', system-ui, sans-serif;

  font-family:var(--tmi-font-body);
  color:var(--tmi-ink);
  background:var(--tmi-bg);
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
}
.tmi-root *{ box-sizing:border-box; }
.tmi-root img{ max-width:100%; display:block; }
.tmi-root a{ color:inherit; text-decoration:none; }

.tmi-container{ width:100%; max-width:var(--tmi-maxw); margin:0 auto; padding:0 32px; }

/* ============================================================
   Section rhythm
   ============================================================ */
.tmi-section{ padding:84px 0; }
.tmi-section--gray{ background:var(--tmi-bg-gray); }
.tmi-section__head{ text-align:center; margin:0 auto 52px; max-width:760px; }
.tmi-section__title{
  font-family:var(--tmi-font-head);
  font-weight:400;
  font-size:34px;
  letter-spacing:.2px;
  color:var(--tmi-ink);
  margin:0 0 14px;
}
.tmi-section__sub{
  font-size:17px;
  color:var(--tmi-muted);
  margin:0;
  text-wrap:pretty;
}
.tmi-eyebrow{
  display:inline-block;
  font-family:var(--tmi-font-head);
  font-weight:600;
  font-size:12px;
  letter-spacing:2.4px;
  text-transform:uppercase;
  color:var(--tmi-red);
  margin-bottom:14px;
}

/* ============================================================
   Intro
   ============================================================ */
.tmi-intro{ text-align:center; padding:74px 0 72px; }
.tmi-intro__title{ font-family:var(--tmi-font-head); font-weight:500; font-size:36px; margin:0 0 18px; }
.tmi-intro__lead{ font-size:18px; color:var(--tmi-ink-soft); max-width:640px; margin:0 auto 40px; text-wrap:pretty; }
.tmi-intro__graphic-title{
  font-family:var(--tmi-font-head); font-weight:600; font-size:24px;
  color:var(--tmi-ink); margin:8px 0 28px;
}
.tmi-intro__graphic{ max-width:1000px; margin:0 auto 40px; }
.tmi-intro__graphic img{ width:100%; height:auto; }
.tmi-intro__foot{ font-size:16px; color:var(--tmi-muted); margin:0; }

/* ============================================================
   Why materials data matters
   ============================================================ */
.tmi-why-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:22px;
}
.tmi-why-card{
  background:#fff; border:1px solid var(--tmi-line);
  border-radius:var(--tmi-radius); padding:26px 22px;
  box-shadow:0 1px 3px rgba(20,20,30,.05), 0 10px 28px rgba(232,69,91,.08);
  position:relative;
  transition:transform .18s, box-shadow .18s;
}
.tmi-why-card:hover{
  transform:translateY(-3px);
  box-shadow:0 2px 6px rgba(20,20,30,.06), 0 18px 40px rgba(232,69,91,.16);
}
.tmi-why-card__step{
  font-family:var(--tmi-font-head); font-weight:700; font-size:13px;
  color:var(--tmi-red); margin-bottom:10px; display:block;
}
.tmi-why-card h3{ font-family:var(--tmi-font-head); font-weight:600; font-size:17px; margin:0 0 10px; line-height:1.3; }
.tmi-why-card p{ margin:0; font-size:14.5px; color:var(--tmi-muted); }
.tmi-why-card strong{ color:var(--tmi-red); }

/* ============================================================
   Use-cases
   ============================================================ */
.tmi-uc-grid{
  display:grid; grid-template-columns:repeat(4,1fr);
  grid-template-rows:auto auto 1fr; gap:24px;
}
.tmi-uc{ display:grid; grid-row:span 3; grid-template-rows:subgrid; justify-items:center; }
.tmi-uc__head{
  width:100%;
  background:linear-gradient(135deg,var(--tmi-red),var(--tmi-red-dark));
  color:#fff; border-radius:var(--tmi-radius-sm) !important;
  padding:16px 18px; text-align:center;
  box-shadow:0 8px 18px rgba(201,48,74,.22);
}
.tmi-uc__head h3{ font-family:var(--tmi-font-head); font-weight:600; font-size:16px; margin:0 0 4px;color:white !important; }
.tmi-uc__head p{ margin:0; font-size:13px; opacity:.92; }
.tmi-uc__connector{ width:2px; height:26px; background:var(--tmi-line); position:relative; }
.tmi-uc__connector::after{
  content:""; position:absolute; bottom:-1px; left:50%; transform:translateX(-50%);
  border:5px solid transparent; border-top-color:var(--tmi-line);
}
.tmi-uc__body{
  width:100%;
  background:#fff; border:1px solid var(--tmi-line);
  border-radius:var(--tmi-radius-sm); padding:18px;
  font-size:14px; color:var(--tmi-ink-soft); text-align:center;
  box-shadow:var(--tmi-shadow-sm);
}

/* ============================================================
   Testimonials
   ============================================================ */
.tmi-quotes{ display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:1fr auto; gap:20px 34px; }
.tmi-quote{ display:grid; grid-row:span 2; grid-template-rows:subgrid; }
.tmi-quote__bubble{
  background:#fff; border:1px solid var(--tmi-line);
  border-radius:var(--tmi-radius); padding:26px 26px 28px;
  box-shadow:var(--tmi-shadow-md); position:relative;
}
.tmi-quote__bubble::after{
  content:""; position:absolute; left:48px; bottom:-15px;
  width:28px; height:28px; background:#fff;
  border-right:1px solid var(--tmi-line); border-bottom:1px solid var(--tmi-line);
  transform:rotate(45deg);
}
.tmi-quote__tag{
  font-family:var(--tmi-font-head); font-weight:700; font-size:12px;
  letter-spacing:1.5px; text-transform:uppercase; color:var(--tmi-red);
  margin-bottom:12px;
}
.tmi-quote__lead{ font-family:var(--tmi-font-head); font-weight:600; font-size:16px; margin:0 0 12px; color:var(--tmi-ink); }
.tmi-quote__text{ font-size:14.5px; color:var(--tmi-ink-soft); margin:0 0 18px; }
.tmi-quote__who{ font-size:13px; color:var(--tmi-muted); display:flex; align-items:center; gap:10px; margin-top:10px; padding-left:6px; align-self:end; }
.tmi-quote__avatar{
  width:34px; height:34px; border-radius:50%;
  background:linear-gradient(135deg,var(--tmi-red),var(--tmi-blue));
  flex:none;
}

/* ============================================================
   Diagram images (Solution Capabilities, Stronger Together)
   ============================================================ */
.tmi-diagram{ max-width:1000px; margin:0 auto; }
.tmi-diagram img{ width:100%; height:auto; }
.tmi-diagram--blend img{ mix-blend-mode:multiply; }

/* ============================================================
   Pricing tiers
   ============================================================ */
.tmi-tiers{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; align-items:stretch; }
.tmi-tier{
  background:#fff; border:1px solid var(--tmi-line);
  border-radius:var(--tmi-radius); padding:30px 28px 32px;
  box-shadow:var(--tmi-shadow-sm);
  display:flex; flex-direction:column;
  transition:transform .18s, box-shadow .18s;
}
.tmi-tier:hover{ transform:translateY(-4px); box-shadow:var(--tmi-shadow-md); }
.tmi-tier--featured{ border-color:var(--tmi-red); box-shadow:var(--tmi-shadow-md); }
.tmi-tier__badge{
  align-self:flex-start; background:var(--tmi-red-tint); color:var(--tmi-red-dark);
  font-family:var(--tmi-font-head); font-weight:600; font-size:11px; letter-spacing:1px;
  text-transform:uppercase; padding:5px 11px; border-radius:30px; margin-bottom:16px;
}
.tmi-tier__name{ font-family:var(--tmi-font-head); font-weight:600; font-size:20px; margin:0 0 6px; }
.tmi-tier__desc{ font-size:14px; color:var(--tmi-muted); margin:0 0 22px; min-height:40px; }
.tmi-tier__list{ list-style:none; margin:0 0 26px; padding:0; display:flex; flex-direction:column; gap:12px; flex:1; }
.tmi-tier__list li{ display:flex; gap:11px; align-items:flex-start; font-size:14.5px; color:var(--tmi-ink-soft); }
.tmi-tier__list svg{ width:17px; height:17px; flex:none; margin-top:2px; stroke:var(--tmi-red); fill:none; stroke-width:2; }
.tmi-tier__btn{
  display:block; text-align:center; font-family:var(--tmi-font-head); font-weight:600; font-size:14px;
  padding:12px; border-radius:8px; border:1.5px solid var(--tmi-red); color:var(--tmi-red);
  transition:background .15s,color .15s;
}
.tmi-tier__btn:hover{ background:var(--tmi-red); color:#fff; }
.tmi-tier--featured .tmi-tier__btn{ background:var(--tmi-red); color:#fff; }
.tmi-tier--featured .tmi-tier__btn:hover{ background:var(--tmi-red-dark); border-color:var(--tmi-red-dark); }

/* ============================================================
   See it in action — video
   ============================================================ */
.tmi-video-wrap{ max-width:760px; margin:0 auto; }
.tmi-video{
  position:relative; aspect-ratio:16/9; border-radius:var(--tmi-radius); overflow:hidden;
  background:radial-gradient(120% 130% at 30% 20%, #ff5a64, #b51e35 60%, #5c0e1c);
  box-shadow:var(--tmi-shadow-md); cursor:pointer;
  display:block;
}
.tmi-video__mesh{ position:absolute; inset:0; opacity:.5; mix-blend-mode:screen; }
.tmi-video__thumb{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.tmi-video--thumb::after{ content:""; position:absolute; inset:0; background:rgba(20,12,14,.18); transition:background .18s; }
.tmi-video--thumb:hover::after{ background:rgba(20,12,14,.30); }
.tmi-video__play{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:2;
  width:74px; height:74px; border-radius:50%;
  background:rgba(255,255,255,.92); display:flex; align-items:center; justify-content:center;
  transition:transform .18s;
}
.tmi-video:hover .tmi-video__play{ transform:translate(-50%,-50%) scale(1.08); }
.tmi-video__play svg{ width:26px; height:26px; fill:var(--tmi-red); margin-left:4px; }
.tmi-video__label{ position:absolute; left:22px; bottom:18px; z-index:2; color:#fff; font-family:var(--tmi-font-head); font-weight:600; font-size:15px; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:980px){
  .tmi-why-grid,.tmi-uc-grid,.tmi-tiers{ grid-template-columns:repeat(2,1fr); }
  .tmi-quotes{ grid-template-columns:1fr; grid-template-rows:none; gap:46px; }
  .tmi-quote{ display:block; }
}
@media (max-width:620px){
  .tmi-why-grid,.tmi-uc-grid,.tmi-tiers{ grid-template-columns:1fr; }
  .tmi-uc-grid{ grid-template-rows:none; }
  .tmi-uc{ display:block; }
}