/* ====== Page-specific styles (keeps your original vibe) ====== */
#ml-hero{
     /* https://www.pexels.com/photo/letter-blocks-247819/ */
    background: linear-gradient(0deg, rgba(0,16,80,0.75), rgba(0,16,80,0.75)),
                url('../../assets/learn.jpg') center/cover no-repeat;
    color:#DEEDF1; min-height:56vh; display:flex; align-items:center;
}
#ml-hero h1{ font: normal normal 600 60px/72px Lexend; font-size:2.6rem; margin:0; color:#DEEDF1; }
#ml-main{ background:#EAF9FF; padding:4rem 0 5rem; }

.section-head{ display:flex; align-items:center; gap:1rem; margin-bottom:1.25rem; }
.section-head h2{ margin:0; font: normal normal 500 60px/56px Lexend; font-size:2.1rem; color:var(--brand-light-blue); white-space:nowrap; }
.section-head .line{ flex:1; height:3px; background:var(--brand-light-blue); }

.card-soft{ background:var(--card-bg); border-radius:.4rem; padding:1.25rem; box-shadow:0 4px 12px var(--card-shadow); height:100%; }
.cap-title{ font: normal normal 700 14px/20px Muli; color:#082B6D; }
.cap-text{ font: normal normal 400 14px/22px Muli; color:#1A1A1A; }
.note{ font: normal normal 400 14px/22px Muli; color:#1A1A1A; opacity:.9; }

.badge-tech{ border:1px solid #bfe0ff; background:#f6fbff; border-radius:999px; padding:.35rem .7rem; margin:.25rem; display:inline-block; font:500 13px/18px Lexend; color:#082B6D; }

/* Architecture row: no wrap + horizontal scroll (prevents wrapping on phones) */
.arch{
    display:flex; align-items:stretch; gap:.75rem; overflow-x:auto;
    -webkit-overflow-scrolling:touch; padding-bottom:.25rem; scrollbar-width:thin;
}
.arch::-webkit-scrollbar{ height:8px; }
.arch::-webkit-scrollbar-thumb{ background:rgba(8,43,109,.25); border-radius:8px; }
.arch-box{
    flex:0 0 clamp(240px, 30vw, 360px);
    background:#F7FCFF; border:1px solid #bfe0ff; border-radius:.4rem; padding:.75rem;
}
.arch-box h6{ margin:0 0 .25rem 0; font:800 13px/1.2 Muli; color:#082B6D; }
.arch-arrow{ flex:0 0 auto; display:flex; align-items:center; justify-content:center; color:#082B6D; }
.arch-arrow i{ opacity:.6; font-size:1.1rem; }
@media (max-width:420px){ .arch-arrow{ display:none; } }

/* Simple metric tiles */
.metrics { display:grid; grid-template-columns: repeat(4, 1fr); gap:.75rem; }
.metric { background:#F6FBFF; border:1px dashed #bfe0ff; border-radius:.5rem; padding:1rem; text-align:center; }
.metric .big { font:800 16px/1 Lexend; color:#082B6D; }
.metric .lbl { font:600 12px/1.1 Muli; color:#164B79; text-transform:uppercase; margin-top:.25rem; }
@media (max-width: 991.98px){ .metrics { grid-template-columns: repeat(2, 1fr); } }

@media (max-width: 767.98px){
    #ml-hero{ min-height:48vh; }
    #ml-hero h1{ font-size:2rem; line-height:1.2; }
    .section-head h2{ font-size:1.6rem; }
}