/* FLP — Black & White Theme */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&family=Inter:wght@300;400;600&display=swap');

:root{
  --bg:#0a0a0a;
  --bg-soft:#121212;
  --fg:#ffffff;
  --muted:#bdbdbd;
  --accent:#ffffff;
  --card:#141414;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --radius: 18px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  line-height:1.6;
}

/* NAV */
.header{
  position:sticky; top:0; z-index:1000;
  backdrop-filter:saturate(180%) blur(12px);
  background:rgba(10,10,10,.7);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  max-width:1100px; margin:0 auto; padding:14px 20px;
}
.brand{
  display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--fg);
}
.brand .logo{
  width:38px; height:38px; border-radius:10px; background:#fff; color:#000;
  display:grid; place-items:center; font-weight:800; font-family:Poppins; box-shadow:var(--shadow);
}
.brand span{font-family:Poppins; font-weight:700; letter-spacing:.5px}

.menu a{
  color:var(--fg); text-decoration:none; margin-left:18px; padding:8px 12px; border-radius:12px;
  transition:transform .25s ease, background .25s ease, color .25s ease;
}
.menu a:hover{ background:#fff; color:#000; transform:translateY(-2px)}

/* HERO SLIDESHOW */
.slideshow{
  position:relative; height:72vh; max-height:800px; overflow:hidden;
}
.slide{
  position:absolute; inset:0; opacity:0; transition:opacity 800ms ease-in-out, transform 1200ms ease-in-out;
  transform:scale(1.04);
}
.slide.active{ opacity:1; transform:scale(1) }
.slide img{
  width:100%; height:100%; object-fit:cover; filter:grayscale(10%) contrast(1.05);
}
.caption{
  position:absolute; left:50%; bottom:8%; transform:translateX(-50%);
  background:rgba(0,0,0,.45); color:#fff; padding:12px 18px; border-radius:999px;
  font-family:Poppins; font-weight:600; letter-spacing:.3px; box-shadow:var(--shadow);
}

/* Controls */
.control{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,255,255,.45);
  display:grid; place-items:center; cursor:pointer; user-select:none;
  transition:background .2s ease, transform .2s ease, border-color .2s ease;
}
.control:hover{ background:rgba(255,255,255,.1); transform:translateY(-50%) scale(1.05); border-color:#fff }
.control.prev{ left:18px }
.control.next{ right:18px }

/* Dots */
.dots{ position:absolute; bottom:18px; left:50%; transform:translateX(-50%); display:flex; gap:10px }
.dot{
  width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.4); cursor:pointer;
  transition:transform .2s ease, background .2s ease;
}
.dot.active{ background:#fff; transform:scale(1.2) }

/* Sections */
.section{ padding:60px 20px }
.container{ max-width:1100px; margin:0 auto }

/* Cards */
.grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:22px }
.card{
  background:var(--card); border:1px solid rgba(255,255,255,.06); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:20px; transition:transform .25s ease, box-shadow .25s ease;
}
.card:hover{ transform:translateY(-4px) }

/* CTA Button */
.btn{
  appearance:none; border:none; border-radius:999px; padding:12px 18px; font-weight:600;
  background:#fff; color:#000; text-decoration:none; display:inline-block;
  transition:transform .25s ease, box-shadow .25s ease;
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 10px 22px rgba(255,255,255,.12) }

/* Footer */
footer{ border-top:1px solid rgba(255,255,255,.08); padding:26px 20px; color:var(--muted) }
footer .container{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; }

/* Brand logo image */
.brand img{
  width:40px; height:40px; object-fit:cover; border-radius:10px; box-shadow:var(--shadow);
  background:#fff;
}
.footer-logo{
  display:flex; align-items:center; gap:10px;
}
.footer-logo img{ width:26px; height:26px; border-radius:6px; object-fit:cover; background:#fff }
.footer-links { display:flex; gap:16px; flex-wrap:wrap }
.footer-links a{ color:var(--muted); text-decoration:none }
.footer-links a:hover{ color:#fff }
.main{ min-height:50vh }
.section h1,.section h2{ font-family:Poppins; margin:0 0 10px }
.lead{ color:#bdbdbd }
.table{
  width:100%; border-collapse:collapse; background:var(--card); border:1px solid rgba(255,255,255,.06);
  border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow);
}
.table th,.table td{ padding:14px; border-bottom:1px solid rgba(255,255,255,.06); text-align:left }
.badge{ padding:4px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.2); color:#bdbdbd; font-size:12px }
.breadcrumb{ color:#bdbdbd; margin-bottom:12px }
@media (max-width:720px){
  .nav{ padding:12px }
  .menu a{ margin-left:8px }
}