/* Auth'Afrik — styles.css */
/* Palette: warm earthy colors and an african motif accent */
:root{
  --bg:#447f3f;
  --accent:#1e6b00;
  --accent-2:#f0b67f;
  --text:#ffffff;
  --muted:#ffffff;
  --card:#dc7f1f;
  --pattern-opacity:0.06;
  --container:1100px;
  --radius:12px;
  font-size:16px;
}
*{box-sizing:border-box}
body{font-family:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial; margin:0; color:var(--text); background:var(--bg); -webkit-font-smoothing:antialiased;}
.container{max-width:var(--container); margin:0 auto; padding:1rem;}

.dersite-hea{background:linear-gradient(180deg, rgba(), rgba(0, 0, 0, 0.9)); color:rgb(255, 0, 0); position:sticky; top:0; z-index:50;}
.header-inner{display:flex; align-items:center; gap:1rem; padding:.75rem 1rem;}
.brand{display:flex; align-items:center; text-decoration:none; color:white;}
.logo{width:56px; height:56px; background:rgba(255,255,255,0.12); border-radius:8px; padding:8px; object-fit:contain; margin-right:.75rem;}
.brand-text h1{margin:0; font-size:1.125rem;}
.brand-text .slogan{margin:0; font-size:.8rem; opacity:.95}

.main-nav{margin-left:auto; display:flex; gap:1rem; align-items:center;}
.main-nav a{color:rgb(255, 255, 255); text-decoration:none; padding:.5rem .6rem; border-radius:8px;}
.main-nav a:hover{background:rgba(233, 7, 7, 0.08);}

.nav-toggle{display:none; background:transparent; border:none; color:rgb(255, 255, 255); font-size:1.25rem; margin-left:1rem}

/* Hero */
.hero{padding:4rem 0; color:rgb(255, 255, 255); background-size:cover; background-position:center; border-bottom:8px solid rgba(0,0,0,0.03);}
.hero-inner{max-width:720px; padding:3rem 1rem;}
.hero h2{font-size:2rem; margin:0 0 .5rem}
.hero p{margin:0 0 1rem; opacity:.95}
.btn{background:var(--accent); color:rgb(255, 255, 255); padding:.7rem 1rem; text-decoration:none; border-radius:10px; display:inline-block}

/* Intro */
.intro{padding:2.5rem 1rem; background:linear-gradient(90deg, rgba(124, 4, 4, 0.06), rgba(183,79,43,0.03)); border-radius:var(--radius); margin-top:1rem}
.quick-info{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:.5rem; margin-top:1rem; color:var(--muted)}

/* Services */
.services{padding:2.5rem 1rem}
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1rem; margin-top:1rem}
.card{background:var(--card); padding:1rem; border-radius:10px; box-shadow:0 6px 18px rgba(33,33,33,0.06)}

/* CTA */
.cta{padding:2.5rem 1rem; text-align:center; margin-top:1rem}

/* Footer */
.site-footer{background:#dc7f1f; padding:1.25rem 0; margin-top:2rem}
.footer-inner{display:grid; grid-template-columns:1fr 1fr 1fr; gap:1rem; align-items:start}
.site-footer a{color:var(--accent); text-decoration:none}
.copyright{text-align:center; font-size:.9rem; color:var(--muted); padding:.75rem 0}

/* Products */
.product-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1rem; margin-top:1rem}
.product img{width:100%; height:200px; object-fit:cover; border-radius:8px}

/* Contact */
.contact-page form{max-width:720px; margin:0 0 1rem; display:grid; gap:.6rem}
.contact-page label{display:flex; flex-direction:column; font-size:.95rem}
.contact-info{background:linear-gradient(90deg, rgba(183,79,43,0.05), rgba(156b46)); padding:1rem; border-radius:10px}

/* Responsive */
@media(max-width:900px){
  .main-nav{position:fixed; right:0; top:64px; background:linear-gradient(180deg, rgba(183,79,43,0.98), rgba(240,182,127,0.95)); width:220px; height:calc(100% - 64px); transform:translateX(100%); transition:transform .25s ease; flex-direction:column; padding:1rem;}
  .main-nav.open{transform:translateX(0)}
  .nav-toggle{display:block}
  .footer-inner{grid-template-columns:1fr}
}

/* African motif pattern using CSS background (subtle) */
body::after{
  content:"";
  position:fixed; inset:0; pointer-events:none; opacity:var(--pattern-opacity);
  background-image: url('../assets/images/pattern.png');
  background-repeat: repeat;
  z-index:0;
}