/* Shared Layout CSS for MoInspeksi static pages — matches homepage React styling */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#ffffff;
  --fg:hsl(215,25%,15%);
  --primary:hsl(222,100%,35%);
  --primary-fg:#ffffff;
  --muted:hsl(215,10%,46%);
  --card:#ffffff;
  --border:hsl(214,20%,90%);
  --accent:hsl(222,100%,35%);
  --section-alt:hsl(210,25%,97%);
  --wa:hsl(142,70%,45%);
  --wa-hover:hsl(142,70%,38%);
  --wa-fg:#ffffff;
  --radius:0.75rem;
}
body{font-family:'Plus Jakarta Sans',system-ui,sans-serif;color:var(--fg);background:var(--bg);line-height:1.7;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}

/* ===== Animations ===== */
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes pulseGlow{0%,100%{box-shadow:0 0 0 0 hsla(142,70%,45%,0.4)}50%{box-shadow:0 0 0 12px hsla(142,70%,45%,0)}}
.animate-fade-in{animation:fadeIn 0.5s ease-out both}

/* ===== Sticky Header (matches homepage) ===== */
.site-header{position:fixed;top:0;left:0;right:0;z-index:50;transition:all 0.3s;background:rgba(255,255,255,0.8);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.site-header.scrolled{background:rgba(255,255,255,0.95);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 4px 6px -1px rgba(0,0,0,0.1)}
.site-header .wrap{max-width:1200px;margin:0 auto;padding:0 1rem;display:flex;align-items:center;justify-content:space-between;height:4rem}
.site-header a.logo{display:flex;align-items:center;gap:0.5rem;font-size:1.125rem;font-weight:700;color:var(--primary);text-decoration:none}
.site-header a.logo img{height:2.25rem;width:2.25rem;object-fit:contain}
.site-header .nav-links{display:flex;gap:1.5rem;align-items:center}
.site-header .nav-links a{color:var(--muted);text-decoration:none;font-size:0.875rem;font-weight:500;transition:color 0.2s}
.site-header .nav-links a:hover{color:var(--primary)}
.site-header .btn-wa-header{display:inline-flex;align-items:center;gap:0.5rem;background:var(--wa);color:var(--wa-fg)!important;padding:0.5rem 0.75rem;border-radius:0.375rem;font-weight:600;font-size:0.875rem;box-shadow:0 4px 6px -1px rgba(0,0,0,0.1);transition:background 0.3s}
.site-header .btn-wa-header:hover{background:var(--wa-hover)}
.mobile-menu-btn{display:none;padding:0.5rem;background:none;border:none;cursor:pointer;color:var(--fg)}
.mobile-menu{display:none;background:var(--bg);border-top:1px solid var(--border);padding:1rem}
.mobile-menu.open{display:block}
.mobile-menu a{display:block;padding:0.5rem 0;font-size:0.875rem;font-weight:500;color:var(--muted)}
.mobile-menu a:hover{color:var(--primary)}
@media(max-width:768px){
  .site-header .nav-links a:not(.btn-wa-header){display:none}
  .mobile-menu-btn{display:block}
}
@media(max-width:640px){
  .site-header .btn-wa-header{display:none}
}

/* ===== Hero Banner ===== */
.hero-banner{position:relative;padding:6rem 0 3rem;overflow:hidden}
.hero-banner::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,hsla(222,100%,35%,0.05),transparent,hsla(222,100%,35%,0.05))}
.hero-banner .container{position:relative}
.hero-banner h1{font-size:clamp(1.75rem,4vw,2.5rem);font-weight:800;margin-bottom:0.75rem;color:var(--fg)}
.hero-banner p{font-size:1.05rem;color:var(--muted);max-width:600px;margin:0 auto}
.hero-banner.centered{text-align:center}

/* ===== Container & Content ===== */
.container{max-width:1200px;margin:0 auto;padding:0 1rem}
.content-section{padding:3rem 0}
.back-link{display:inline-block;margin:1.5rem 0;color:var(--primary);text-decoration:none;font-weight:600;font-size:0.9rem}
.back-link:hover{text-decoration:underline}

/* ===== CTA ===== */
.cta-btn{display:inline-flex;align-items:center;gap:0.5rem;background:var(--wa);color:var(--wa-fg);padding:0.85rem 2rem;border-radius:var(--radius);text-decoration:none;font-weight:700;font-size:1rem;transition:background 0.2s;box-shadow:0 10px 15px -3px rgba(0,0,0,0.1)}
.cta-btn:hover{background:var(--wa-hover)}

/* ===== Footer (matches homepage) ===== */
.site-footer{background:var(--primary);color:var(--primary-fg);padding:4rem 0 0}
.site-footer .wrap{max-width:1200px;margin:0 auto;padding:0 1rem}
.site-footer .footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:2rem;margin-bottom:2rem}
.site-footer h4{font-weight:700;margin-bottom:1rem;font-size:1rem}
.site-footer p,.site-footer a{font-size:0.875rem;color:rgba(255,255,255,0.8);text-decoration:none;line-height:1.6}
.site-footer a:hover{opacity:1;color:#fff}
.site-footer ul{list-style:none;padding:0}
.site-footer ul li{margin-bottom:0.5rem}
.site-footer .footer-bottom{border-top:1px solid rgba(255,255,255,0.1);padding:1rem 0;text-align:center;font-size:0.875rem;opacity:0.6}
.site-footer .social-links{display:flex;flex-wrap:wrap;gap:0.75rem;margin-top:0.75rem}
.site-footer .social-links a{background:rgba(255,255,255,0.1);padding:0.375rem 0.75rem;border-radius:9999px;font-size:0.8rem;display:flex;align-items:center;gap:0.35rem;transition:background 0.2s}
.site-footer .social-links a:hover{background:rgba(255,255,255,0.2)}
@media(max-width:768px){.site-footer .footer-grid{grid-template-columns:1fr 1fr}.site-footer .footer-grid>div:first-child{grid-column:1/-1}}
@media(max-width:480px){.site-footer .footer-grid{grid-template-columns:1fr}}

/* ===== Floating WA (matches homepage) ===== */
.floating-wa{position:fixed;bottom:1.5rem;right:1.5rem;z-index:50;display:flex;align-items:center;gap:0.5rem;background:var(--wa);color:var(--wa-fg);font-weight:600;padding:0.875rem 1.5rem;border-radius:0.75rem;text-decoration:none;font-size:0.875rem;box-shadow:0 20px 25px -5px rgba(0,0,0,0.1),0 0 0 0 hsla(142,70%,45%,0.4);animation:pulseGlow 2s infinite;transition:all 0.3s}
.floating-wa:hover{background:var(--wa-hover);transform:scale(1.05)}
@media(max-width:640px){.floating-wa{bottom:1rem;left:50%;right:auto;transform:translateX(-50%)}.floating-wa:hover{transform:translateX(-50%) scale(1.05)}}

.text-gradient{background:linear-gradient(to right,var(--primary),var(--accent));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

#lovable-badge{display:none!important}