/* ==================================================
   STYLES COMMUNS MCi
   ================================================== */

:root{
  --blue-50:#f0f9ff;
  --blue-100:#e0f2fe;
  --blue-200:#bae6fd;
  --blue-600:#0ea5e9;
  --blue-700:#1e90ff;
  --blue-800:#2563eb;
  --fg:#0f172a;
  --muted:#475569;
  --line:#e5e7eb;
  --bg:#ffffff;
  --card:#ffffff;
  --shadow:0 8px 24px rgba(2,8,23,.08);
}

*{
  box-sizing:border-box;
}

html,
body{
  margin:0;
  padding:0;
  font-family:Inter,system-ui,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
  color:var(--fg);
  background:var(--bg);
}

a{
  color:inherit;
  text-decoration:none;
}

.container{
  max-width:1200px;
  margin:0 auto;
  padding:0 18px;
}

.btn,
.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 16px;
  border-radius:14px;
  background:var(--blue-800);
  color:#fff;
  font-weight:700;
  box-shadow:0 10px 24px rgba(37,99,235,.25);
  transition:background .2s ease, transform .2s ease;
}

.btn:hover,
.button:hover{
  background:var(--blue-700);
  transform:translateY(-2px);
}

.btn.secondary{
  background:var(--blue-600);
}

.section{
  padding:48px 0;
}

.section.alt{
  background:linear-gradient(180deg,#fff,var(--blue-50));
}

.eyebrow{
  margin-bottom:8px;
  color:var(--blue-800);
  font-size:12px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.subtitle{
  margin-top:6px;
  color:var(--muted);
}

.grid{
  display:grid;
  gap:18px;
}

.grid-2,
.grid-3{
  grid-template-columns:1fr;
}

.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:var(--shadow);
}

.card .h{
  padding:16px 18px;
  border-bottom:1px solid var(--line);
  font-weight:800;
}

.card .c{
  padding:16px 18px;
}

.list{
  margin:8px 0 0;
  padding-left:18px;
  color:var(--muted);
}

.input,
textarea{
  width:100%;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:14px;
  font:inherit;
}

textarea{
  min-height:120px;
}

.row{
  display:grid;
  gap:12px;
}

@media(min-width:900px){
  .row{
    grid-template-columns:1fr 1fr;
  }
}

@media(min-width:940px){
  .grid-2{
    grid-template-columns:repeat(2,1fr);
  }

  .grid-3{
    grid-template-columns:repeat(3,1fr);
  }
}