/* =========================
FILE: site.css
Shared MBCC Finternet Ops™ styling (drop in root)
Then each HTML can: <link rel="stylesheet" href="site.css">
========================= */

:root{
  --red:#c1121f;
  --black:#0b0b0b;
  --gold:#d4af37;
  --gold2:#a8831e;
  --off:#f7f3e9;

  --muted: rgba(247,243,233,.72);
  --radius: 16px;
  --shadow: 0 12px 30px rgba(0,0,0,.55);
  --shadow2: 0 8px 18px rgba(0,0,0,.45);
  --max: 1120px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  color: var(--off);
  background: var(--black);
  overflow-x:hidden;
}
a{ color:inherit; text-decoration:none; }
.container{ width: min(var(--max), calc(100% - 48px)); margin: 0 auto; }

/* Background layers */
.bg{
  position:fixed; inset:0;
  background:
    radial-gradient(1200px 700px at 10% 10%, rgba(193,18,31,.22), transparent 55%),
    radial-gradient(900px 600px at 85% 20%, rgba(212,175,55,.09), transparent 55%),
    radial-gradient(900px 600px at 60% 85%, rgba(193,18,31,.16), transparent 55%),
    linear-gradient(180deg, rgba(11,11,11,.92), rgba(11,11,11,.98));
  z-index:-3;
}
.plaid{
  position:fixed; inset:-120px;
  background:
    repeating-linear-gradient(45deg,
      rgba(247,243,233,.05) 0px, rgba(247,243,233,.05) 2px,
      rgba(247,243,233,0) 2px, rgba(247,243,233,0) 18px),
    repeating-linear-gradient(-45deg,
      rgba(193,18,31,.06) 0px, rgba(193,18,31,.06) 2px,
      rgba(193,18,31,0) 2px, rgba(193,18,31,0) 18px);
  opacity:.55;
  z-index:-2;
  transform: rotate(-1.5deg);
}
.grain{
  position:fixed; inset:0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E");
  opacity:.12;
  mix-blend-mode: soft-light;
  z-index:-1;
  pointer-events:none;
}

/* Header / nav */
header{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(14px);
  background: rgba(11,11,11,.72);
  border-bottom: 1px solid rgba(212,175,55,.16);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 0;
  gap: 14px;
  flex-wrap:wrap;
}
.brand{ display:flex; align-items:center; gap:12px; }
.logo{
  width:42px; height:42px; border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(193,18,31,.95), rgba(193,18,31,.35)),
    repeating-linear-gradient(45deg, rgba(247,243,233,.14) 0px, rgba(247,243,233,.14) 2px, rgba(247,243,233,0) 2px, rgba(247,243,233,0) 10px);
  border: 1px solid rgba(212,175,55,.55);
  box-shadow: var(--shadow2);
}
.brand strong{ font-size: 13px; letter-spacing:.12em; text-transform:uppercase; }
.brand span{
  display:block; font-size: 12px; color: rgba(247,243,233,.68); margin-top:2px;
}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding: 11px 14px;
  border-radius: 14px;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .02em;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
  cursor:pointer;
  user-select:none;
  white-space:nowrap;
  border: 1px solid rgba(212,175,55,.22);
  background: rgba(247,243,233,.03);
  color: rgba(247,243,233,.86);
}
.btn:hover{
  transform: translateY(-1px);
  border-color: rgba(212,175,55,.45);
  background: rgba(247,243,233,.05);
}
.btn-primary{
  background: linear-gradient(135deg, rgba(212,175,55,.25), rgba(193,18,31,.12));
  border: 1px solid rgba(212,175,55,.75);
  box-shadow: 0 10px 24px rgba(0,0,0,.45);
}
.btn-primary:hover{
  border-color: rgba(212,175,55,.92);
  box-shadow: 0 14px 30px rgba(0,0,0,.55);
}

/* Typography blocks */
main{ padding: 34px 0 56px; }
.pill{
  display:inline-flex; gap:8px; align-items:center;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(212,175,55,.22);
  background: rgba(247,243,233,.03);
  color: rgba(247,243,233,.84);
  font-size: 12px;
  width: fit-content;
}
.dot{
  width:8px; height:8px; border-radius:999px;
  background: var(--gold);
  box-shadow: 0 0 0 4px rgba(212,175,55,.18);
}
h1{
  margin: 10px 0 8px;
  font-size: clamp(28px, 4.2vw, 46px);
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.lead{
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height:1.6;
  max-width: 95ch;
}

/* Cards / grids */
.grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
  margin-top: 16px;
}
.card{
  grid-column: span 4;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(247,243,233,.06), rgba(247,243,233,.03));
  border: 1px solid rgba(212,175,55,.16);
  box-shadow: var(--shadow2);
  padding: 16px;
  position:relative;
  overflow:hidden;
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
  min-height: 220px;
  display:flex;
  flex-direction:column;
}
.card:hover{
  transform: translateY(-2px);
  border-color: rgba(212,175,55,.34);
  background: linear-gradient(180deg, rgba(247,243,233,.08), rgba(247,243,233,.035));
}
.tag{
  display:inline-flex; gap:8px; align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(212,175,55,.22);
  background: rgba(11,11,11,.30);
  font-size: 11px;
  color: rgba(247,243,233,.82);
  width: fit-content;
}
.title{ margin: 10px 0 6px; font-size: 16px; font-weight: 950; letter-spacing: -.01em; }
.desc{ margin: 0; color: rgba(247,243,233,.74); font-size: 13px; line-height:1.6; }
.actions{ margin-top:auto; display:flex; gap:10px; flex-wrap:wrap; padding-top: 14px; }

/* Articles + banners */
article{
  margin-top: 18px;
  border-radius: 18px;
  background: rgba(247,243,233,.03);
  border: 1px solid rgba(212,175,55,.14);
  padding: 16px;
}
article h2{ margin:0 0 8px; font-size: 18px; font-weight: 950; letter-spacing:-.01em; }
article p{
  margin:0;
  color: rgba(247,243,233,.74);
  font-size: 13.5px;
  line-height:1.75;
  max-width: 95ch;
}
.banner{
  margin-top: 16px;
  border-radius: 16px;
  border: 1px dashed rgba(212,175,55,.28);
  background: rgba(247,243,233,.03);
  padding: 14px;
  color: rgba(247,243,233,.72);
  font-size: 12.5px;
  line-height:1.55;
}
.banner strong{ color: rgba(247,243,233,.92); }

/* Footer */
footer{
  padding: 18px 0 28px;
  border-top: 1px solid rgba(212,175,55,.14);
  color: rgba(247,243,233,.62);
  font-size: 12px;
  line-height: 1.6;
}
.foot{
  display:flex; justify-content:space-between; gap: 14px;
  flex-wrap:wrap; align-items:flex-start;
}

/* Responsive */
@media (max-width: 980px){
  .card{ grid-column: span 6; }
}
@media (max-width: 560px){
  .container{ width: calc(100% - 28px); }
  .card{ grid-column: span 12; }
  .btn{ width:100%; justify-content:center; }
}