/* ================= RESET ================= */
*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

/* ================= THEME ================= */
:root{
  --card-bg: rgba(255,255,255,0.95);
  --text-dark:#1e1e1e;
  --primary:#821818; /* maroon */
}

body{
  font-family:"Montserrat",sans-serif;
  color:#821818;
  overflow-x:hidden;
}

/* ================= IMAGE BG ================= */
.image-bg{
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}

.image-bg img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Overlay (light fade effect) */
.image-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.55); /* change to dark if needed */
}

.image-bg img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: slowZoom 20s infinite alternate ease-in-out;
}

@keyframes slowZoom{
  from{ transform: scale(1); }
  to{ transform: scale(1.1); }
}

/* ================= MSB BACKGROUND ================= */

.bg-title{
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 200px;
  font-weight: 800;
  letter-spacing: 25px;
  z-index: -1;
  pointer-events: none;

  background: linear-gradient(
      120deg,
      #8b1e1e,
      #6b0f0f,
      #2e0505,
      #8b1e1e
  );
  background-size: 300% 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  opacity: 0.12;
  animation: metallicMove 6s ease infinite alternate;
}

@keyframes metallicMove{
  0%{ background-position: 0% 50%; }
  100%{ background-position: 100% 50%; }
}

/* ================= HERO ================= */
.hero{
  padding:110px 20px 60px;
  display:flex;
  justify-content:center;
}

.hero > div{
  background: rgba(255,255,255,0.6);  /* transparent white */
  backdrop-filter: blur(10px);         /* glass blur effect */
  -webkit-backdrop-filter: blur(10px); /* for Safari */

  padding:40px 50px;
  border-radius:20px;
  max-width:750px;
  text-align:center;

  box-shadow:0 20px 40px rgba(0,0,0,0.2);
}

.hero h1{
  font-size:42px;
  margin-bottom:15px;
  color:#821818;
}

.hero p{
  line-height:1.7;
  color:#5a0f0f;
}

/* ================= DESIGN TIMELINE ================= */
.timeline{
  max-width:900px;
  margin:60px auto;
  padding:0 20px;
}

.step{
  background:var(--card-bg);
  color:var(--text-dark);
  padding:30px;
  border-radius:18px;
  margin-bottom:30px;
  border-left:6px solid var(--primary);
  box-shadow:0 20px 40px rgba(0,0,0,.2);
  opacity:0;
  transform:translateY(60px);
  transition:.8s ease;
}

.step.show{
  opacity:1;
  transform:translateY(0);
}

.step span{
  font-size:24px;
  color:var(--primary);
  font-weight:700;
}

.step h3{
  margin:6px 0 8px;
}

/* Hover Zoom Effect */
.timeline:hover .step{
  transform: scale(0.92);
  opacity: 0.6;
}

.timeline .step:hover{
  transform: scale(1.05);
  opacity: 1;
  z-index: 10;
}

/* ================= BACK ================= */
.back{
  text-align:center;
  margin-bottom:60px;
}
.back a{
  color:#5a0f0f;
  text-decoration:none;
  font-weight:600;
}
.back a:hover{
  color:#8b1e1e;
}

/* ================= MOBILE ================= */
@media(max-width:768px){
  .hero h1{
    font-size:32px;
  }
  .bg-title{
    font-size:100px;
    letter-spacing:12px;
  }
}


/* ================= MOBILE FIX (≤768px) ================= */
@media (max-width: 768px) {

  /* ===== BACKGROUND IMAGE ===== */
  .image-bg img {
    animation: none; /* disable zoom for performance */
  }

  .image-bg::after {
    background: rgba(0,0,0,0.65); /* slightly darker for readability */
  }

  /* ===== BIG MSB TEXT ===== */
  .bg-title {
    font-size: 80px;
    letter-spacing: 8px;
    opacity: 0.08;
  }

  /* ===== HERO ===== */
  .hero {
    padding: 60px 15px 30px;
  }

  .hero > div {
    padding: 25px 20px;
    border-radius: 15px;
  }

  .hero h1 {
    font-size: 26px;
  }

  .hero p {
    font-size: 14px;
    line-height: 1.6;
  }

  /* ===== TIMELINE ===== */
  .timeline {
    margin: 30px auto;
    padding: 0 15px;
  }

  .step {
    padding: 20px;
    margin-bottom: 20px;
  }

  .step span {
    font-size: 18px;
  }

  .step h3 {
    font-size: 18px;
  }

  .step p {
    font-size: 14px;
  }

  /* Disable hover zoom on mobile */
  .timeline:hover .step {
    transform: none;
    opacity: 1;
  }

  .timeline .step:hover {
    transform: none;
  }

  /* ===== BACK BUTTON ===== */
  .back a {
    font-size: 14px;
  }
}