/* ==============================
   MMC cPanel theme styles
   - Amber / Stone palette
   - No external CSS frameworks (works anywhere)
   ============================== */
:root{
  --amber-50:#fffbeb;
  --amber-100:#fef3c7;
  --amber-200:#fde68a;
  --amber-300:#fcd34d;
  --amber-900:#78350f;
  --stone-50:#fafaf9;
  --stone-200:#e7e5e4;
  --stone-300:#d6d3d1;
  --stone-600:#57534e;
  --stone-700:#44403c;
  --stone-800:#292524;
  --brand-btn:#fde68a;
  --brand-btn-hover:#fcd34d;
}

/* Base / layout */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body.bg{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, 'Helvetica Neue', Arial;
  color:var(--stone-800);
  background:var(--stone-50)
}

/* Universal image safety */
img{max-width:100%; height:auto;}

/* Container */
.container{width:min(1100px,92%);margin:0 auto}

/* Header */
.site-header{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(180%) blur(6px);
  background:rgba(255,255,255,.9);
  border-bottom:1px solid var(--stone-200)
}
.header-inner{display:flex; align-items:center; justify-content:space-between; height:64px}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--stone-800)}
.brand-logo{height:40px; width:auto; border-radius:6px; max-height:40px}
.brand-top{font-size:12px; letter-spacing:.18em; color:#6b7280}
.brand-bottom{font-size:15px; font-weight:700; color:var(--stone-800)}
.nav{display:flex; gap:10px}
.nav-link{padding:.5rem .75rem; font-size:14px; color:#57534e; text-decoration:none}
.nav-link:hover{color:#111827}
.menu-btn{display:none; border:1px solid var(--stone-200); background:#fff; border-radius:8px; padding:.35rem .55rem}

/* Hero */
.hero{
  position:relative; overflow:hidden;
  background:linear-gradient(180deg, rgba(253,230,138,.35), transparent);
  padding:64px 0 42px
}
.hero-grid{display:grid; grid-template-columns:1fr; gap:28px}
@media (min-width: 860px){ .hero-grid{grid-template-columns:1fr 1fr; gap:40px} }
.hero-title{font-size:clamp(28px, 4vw, 40px); line-height:1.2; margin:0 0 10px}
.hero-sub{color:#57534e; margin:0 0 14px; max-width:48ch}
.tag-row{display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 0}
.tag{
  display:inline-flex; align-items:center;
  border:1px solid var(--amber-200);
  background:rgba(253,230,138,.6);
  padding:6px 10px; border-radius:999px;
  font-size:12px; color:var(--stone-800)
}
.cta-row{display:flex; gap:10px; margin-top:18px}
.btn{
  display:inline-block; background:var(--brand-btn); color:var(--stone-800);
  font-weight:700; padding:10px 14px; border-radius:999px; text-decoration:none
}
.btn:hover{background:var(--brand-btn-hover)}
.btn-outline{
  display:inline-block; border:1px solid var(--stone-300); color:var(--stone-800);
  padding:10px 14px; border-radius:999px; text-decoration:none
}
.btn-outline:hover{background:#f5f5f4}

/* Logo card */
.logo-card{
  border:1px solid var(--amber-200);
  background:rgba(253,230,138,.35);
  border-radius:22px; padding:18px;
  box-shadow:0 1px 3px rgba(0,0,0,.06);
  display:grid; place-items:center; aspect-ratio:4/3;
  max-height:320px;
}
.logo-card-img{
  max-width:100%;
  max-height:240px;
  object-fit:contain;
  opacity:.92
}
.logo-note{margin-top:8px; font-size:12px; color:#6b7280}

/* Sections */
.section{padding:46px 0}
.section-head{margin-bottom:18px}
.section-title{font-size:26px; color:var(--amber-900); margin:0 0 6px}
.section-sub{color:#57534e; margin:0}

/* Cards / grid */
.grid{display:grid; gap:14px; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr))}
.card{
  background:#fff; border:1px solid var(--amber-200);
  border-radius:18px; padding:16px;
  box-shadow:0 1px 3px rgba(0,0,0,.06);
  display:flex; flex-direction:column;
}
.card-title{margin:0 0 6px; font-size:18px; color:#111827}
.muted{color:#6b7280}
.sep{height:1px; background:var(--stone-200); margin:14px 0}
.mini-title{font-size:14px; font-weight:700; color:#111827}
.list{margin:8px 0 0; padding-left:18px}
.list li{margin:4px 0}

/* Team photo */
.photo{
  height:190px; border:1px solid var(--amber-200);
  border-radius:12px; background:#fff;
  display:grid; place-items:center; overflow:hidden
}
.photo-img{
  max-width:100%;
  max-height:180px;
  object-fit:contain;
  padding:8px
}

/* Contact */
.contact-grid{display:grid; grid-template-columns:1fr; gap:18px}
@media (min-width: 860px){ .contact-grid{grid-template-columns:1fr 1fr} }
.contact-form{
  background:#fff; border:1px solid var(--amber-200);
  border-radius:18px; padding:16px;
  box-shadow:0 1px 3px rgba(0,0,0,.06)
}
.lbl{display:block; margin:10px 0 6px; font-weight:600; color:#111827}
.inp{width:100%; border:1px solid var(--stone-300); border-radius:10px; padding:10px 12px; font:inherit}
.inp:focus{outline:none; border-color:var(--amber-200); box-shadow:0 0 0 3px rgba(253,230,138,.45)}
.mail-link{display:inline-block; margin-left:10px; font-size:14px; color:#374151}

/* Success / error message for AJAX form */
.form-msg{
  font-size:14px;
  margin-top:8px;
  font-weight:500;
}
.form-msg.success{ color:green; }
.form-msg.error{ color:red; }

/* Footer (clean style) */
.footer {
  border-top: 1px solid var(--stone-200);
  background: #fff;
  color: var(--stone-600);
}
.footer-inner {
  display:flex; flex-direction:column; gap:10px;
  align-items:center; justify-content:space-between; padding:16px 0
}
@media (min-width: 720px){ .footer-inner{flex-direction:row} }
.footer p { color: var(--stone-600); }
.footer-links{display:flex; gap:12px}
.footer-links a{
  text-decoration:none;
  color: var(--stone-600);
  font-weight:500;
}
.footer-links a:hover{color: var(--stone-800)}

/* WhatsApp floating bubble */
.wa-float{
  position:fixed; right:18px; bottom:18px;
  width:56px; height:56px; border-radius:50%;
  background:#25D366; display:grid; place-items:center;
  box-shadow:0 8px 18px rgba(0,0,0,.16)
}
.wa-float img{width:28px; height:28px}

/* Responsive nav: keep desktop links; hide mobile menu elements */
@media (max-width: 860px){
  .nav{display:none}
  .menu-btn{display:none}
}

/* ===== Scroll reveal animations ===== */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .6s ease, transform .6s ease;
    will-change: opacity, transform;
  }
  .reveal.in {
    opacity: 1;
    transform: none;
  }
  .reveal[data-delay="1"] { transition-delay: .08s; }
  .reveal[data-delay="2"] { transition-delay: .16s; }
  .reveal[data-delay="3"] { transition-delay: .24s; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; }
}