:root{
  --mskf-orange: #ff6600;
  --mskf-orange-2: #ff8a33;
  --mskf-dark: #1f2937;
  --muted: #6b7280;
  --card-bg: #ffffff;
  --max-width: 1200px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; margin:0; color:var(--mskf-dark); background:#f8fafc; -webkit-font-smoothing:antialiased;}
.wrap{max-width:var(--max-width); margin:0 auto; display:flex; align-items:center; justify-content:space-between; padding:10px;}
.site-header{position:fixed; top:0; left:0; right:0; background:linear-gradient(90deg,var(--mskf-orange),var(--mskf-orange-2)); box-shadow:0 4px 16px rgba(0,0,0,0.08); z-index:1000;}
.brand{display:flex; align-items:center; gap:12px; cursor:pointer;}
.logo{height:56px; display:block; object-fit:contain;}
.brand-text{color:#fff; line-height:1;}
.tagline{font-size:12px; color:rgba(255,255,255,0.95);}
.nav{display:flex; gap:12px;}
.nav a{color:#fff; text-decoration:none; margin-left:8px; font-weight:600; padding:8px;}
.container{max-width:var(--max-width); margin:120px auto 130px; padding:18px;}
.hero{background:linear-gradient(90deg, rgba(255,102,0,0.95), rgba(255,138,51,0.95)); color:#fff; padding:28px; border-radius:12px; box-shadow: 0 10px 30px rgba(255,102,0,0.06);}
.lead{font-size:1.05rem; color:rgba(255,255,255,0.95)}
.cards{display:flex; gap:16px; margin-top:18px;}
.card{background:var(--card-bg); padding:18px; border-radius:10px; box-shadow: 0 8px 24px rgba(15,23,42,0.06); flex:1;}
.site-footer{position:fixed; left:0; right:0; bottom:0; background:var(--mskf-dark); color:#fff; padding:10px 12px; text-align:center; font-size:14px;}
.btn{display:inline-block; padding:10px 14px; border-radius:8px; text-decoration:none; font-weight:700; cursor:pointer;}
.btn.primary{background:#fff; color:var(--mskf-orange);}
.btn.ghost{background:transparent; color:#fff; border:2px solid rgba(255,255,255,0.12);}
.form-control, input, textarea, select{width:100%; padding:10px; border-radius:8px; border:1px solid #e5e7eb; margin-top:8px;}
.alert{border-left:4px solid #dc3545; background:#fff; padding:12px;}
.ms-accordion{background:var(--mskf-orange); color:#fff; border:0; padding:12px; text-align:left; font-weight:800; cursor:pointer; width:100%; border-radius:8px;}
.ms-panel{display:none; background:#fff; padding:14px; border-radius:8px; margin-top:8px; color:var(--mskf-dark);}
.page-selector{display:flex; gap:8px; flex-wrap:wrap; align-items:center;}
.small-footer{font-size:12px; color:var(--muted); margin-top:8px}

/* MS subtle pictorial animation style (applies across pages) */
.msf-anim {
  width:100%;
  height:240px;
  border-radius:8px;
  background: linear-gradient(120deg, rgba(255,102,0,0.12), rgba(31,41,55,0.03));
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
}
.msf-anim .wave {
  position:absolute;
  width:200%;
  height:200%;
  left:-50%;
  top:-50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,102,0,0.12), transparent 20%), radial-gradient(circle at 70% 70%, rgba(31,41,55,0.03), transparent 20%);
  transform: rotate(15deg);
  opacity:0.9;
  transition: transform 1.2s ease-out;
}
.msf-anim:hover .wave { transform: rotate(0deg) scale(1.02); }

/* Responsive */
@media (max-width:900px){
  .cards{flex-direction:column;}
  .wrap{flex-direction:column; gap:8px; padding:12px;}
  .nav{flex-wrap:wrap; justify-content:center;}
  .msf-anim{height:160px;}
}