:root{
  --bg: #ffffff;
  --fg: #0d0d10;
  --muted: #6b7280;
  --purple: #6f3cff;
  --purple-600: #5b2eff;
  --purple-100: #f2efff;
  --border: #e5e7eb;
  --card: #ffffff;
  --shadow: 0 10px 30px rgba(0,0,0,.08);
}

*{ box-sizing: border-box; }
html, body{ height:100%; }
body{
  margin:0;
  font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji','Segoe UI Emoji', 'Segoe UI Symbol';
  color: var(--fg);
  background: var(--bg);
}

a{ color: var(--purple); text-decoration: none; }
a:hover{ text-decoration: underline; }

/* Header banner */
.site-header{
  position: relative;
  display:flex;
  align-items:center;
  gap: 1rem;
  padding: 1.25rem 1rem 4rem;
  background: linear-gradient(120deg, var(--purple), #a78bfa 60%);
  color: #fff;
  box-shadow: var(--shadow);
}
.brand h1{ margin:0; font-size: clamp(1.6rem, 2.8vw, 2.4rem); font-weight:700; letter-spacing: .3px; }
.brand .tag{ margin:.15rem 0 0; opacity:.9; }

/* Hamburger */
.hamburger{
  width: 44px; height: 44px; border-radius: 10px; border: 0; cursor: pointer;
  background: rgba(255,255,255,.15); backdrop-filter: blur(4px);
  display:inline-flex; align-items:center; justify-content:center; gap:4px; flex-direction:column;
}
.hamburger span{ width:20px; height:2px; background:#fff; display:block; border-radius:2px; }
.hamburger:focus{ outline: 2px solid #fff; outline-offset: 2px; }

/* Drawer / side pop-up nav */
.overlay{
  position: fixed; inset:0; background: rgba(0,0,0,.35);
  opacity:0; pointer-events:none; transition: opacity .25s ease;
}
.overlay.active{ opacity:1; pointer-events:auto; }

.drawer{
  position: fixed; inset:0 auto 0 0; width: 310px; max-width: 90vw;
  background: #0f1020; color:#fff; transform: translateX(-100%);
  transition: transform .3s ease; z-index: 50; display:flex; flex-direction:column;
}
.drawer.open{ transform: translateX(0); }
.drawer-close{
  align-self:flex-end; background:transparent; border:0; color:#fff; font-size: 32px; padding: .5rem .75rem; cursor:pointer;
}
.drawer-nav{ display:flex; flex-direction:column; padding: 0 1rem; gap: .25rem; }
.nav-link{
  display:block; padding: .9rem 1rem; border-radius: 12px; color:#fff; background: transparent;
}
.nav-link:hover{ background: rgba(255,255,255,.08); text-decoration: none; }
.drawer-foot{ margin-top:auto; padding: 1rem; border-top:1px solid rgba(255,255,255,.12); }
.badge{ display:inline-block; padding:.35rem .6rem; border-radius:999px; background: #fff; color:#0f1020; font-weight:600; }

/* Layout */
.container{ width:min(1120px, 92vw); margin: -3rem auto 3rem;padding-top: 50px; }
.card{
  background: var(--card); border:1px solid var(--border); border-radius: 18px; padding: 1.2rem 1.2rem;
  box-shadow: var(--shadow);
}
.hero{ display:grid; grid-template-columns: 1.3fr .9fr; gap: 1rem; align-items:center; padding-top: 100px;}
.hero h2{ margin: .2rem 0 .5rem; font-size: clamp(1.2rem, 2.4vw, 1.8rem); }
.cta-row{ display:flex; gap:.6rem; flex-wrap:wrap; margin-top:.8rem; }
.kpi{ background: var(--purple-100); color:#2b1b7b; padding:.8rem 1rem; border-radius: 14px; text-align:center; }
.kpi-num{ display:block; font-size: 1.2rem; font-weight:700; }
.kpi-label{ font-size:.8rem; opacity:.85; }

.grid-3{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1rem; }

/* Buttons */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.7rem 1rem; border-radius: 12px; border:1px solid var(--border); font-weight:600; cursor:pointer; text-decoration:none; }
.btn.primary{ background: var(--purple); color:#fff; border-color: transparent; }
.btn.primary:hover{ background: var(--purple-600); }
.btn.ghost{ background: transparent; }
.btn.ghost:hover{ border-color:#c7c9d1; }

/* Forms */
.form{ display:flex; flex-direction:column; gap:.9rem; }
.form-row{ display:flex; flex-direction:column; gap:.35rem; }
.form-grid-3{ display:grid; grid-template-columns: repeat(3, 1fr); gap: .9rem; }
.form-grid-2{ display:grid; grid-template-columns: repeat(2, 1fr); gap: .9rem; }
label{ font-weight:600; }
.req{ color: #ef4444; margin-left:.2rem; }
input[type="text"], input[type="number"], input[type="email"], input[type="tel"], select, textarea, input[type="file"]{
  width:100%; padding:.75rem .8rem; border-radius: 12px; border:1px solid var(--border); background:#fff;
}
.help{ margin:.35rem 0 0; color: var(--muted); font-size:.85rem; }
.checkbox{ display:flex; align-items:flex-start; gap:.6rem; }
.btn-row{ display:flex; gap:.6rem; flex-wrap:wrap; }
.status{ margin-top:.5rem; min-height: 1.25rem; }
.uploader legend{ font-weight:700; margin-bottom:.35rem; }

/* Table */
.table-wrap{ overflow:auto; }
.table{ width:100%; border-collapse: collapse; }
.table th, .table td{ text-align:left; padding:.7rem .6rem; border-bottom:1px solid var(--border); }
.table th{ background:#fafafa; position: sticky; top:0; }

/* Footer */
.site-footer{ margin: 2rem 0 0; padding:1rem 1rem 2rem; border-top:1px solid var(--border); background:#fff; }
.footer-inner{ width:min(1120px, 92vw); margin:0 auto; display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; }
.footer-links{ display:flex; gap:1rem; flex-wrap:wrap; }
.legal{ width:min(1120px, 92vw); margin:.8rem auto 0; color:var(--muted); }
.small{ font-size:.88rem; }
.muted{ color: var(--muted); }

/* Responsive */
@media (max-width: 900px){
  .hero{ grid-template-columns: 1fr; }
  .grid-3{ grid-template-columns: 1fr; }
  .form-grid-3{ grid-template-columns: 1fr; }
  .form-grid-2{ grid-template-columns: 1fr; }
}

.post-nav{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: .5rem;
  margin-top: 1rem;
}
.post-body p{ line-height: 1.75; }

/* Chatbot STEVE */
.steve-toggle{
  position:fixed;
  bottom:200px;
  right:1rem;
  background:var(--purple);
  color:#fff;
  border:0;
  border-radius:30px;
  padding:.6rem 1rem;
  cursor:pointer;
  box-shadow:var(--shadow);
  z-index:100;
}

.steve-window{
  position:fixed;
  bottom:4rem;
  right:1rem;
  width:280px;
  max-height:60vh;
  background:#fff;
  border:1px solid var(--border);
  border-radius:12px;
  box-shadow:var(--shadow);
  display:flex;
  flex-direction:column;
  transform:translateY(120%);
  transition:transform .3s ease;
  z-index:100;
}
.steve-window.open{ transform:translateY(0); }
.steve-header{
  background:var(--purple);
  color:#fff;
  padding:.5rem 1rem;
  border-radius:12px 12px 0 0;
  font-weight:600;
}
.steve-messages{ flex:1; padding:.5rem; overflow-y:auto; }
.steve-form{ display:flex; border-top:1px solid var(--border); }
.steve-form input{ flex:1; border:0; padding:.5rem; }
.steve-form button{ border:0; background:var(--purple); color:#fff; padding:.5rem 1rem; }
.msg{ margin:.4rem 0; }
.msg.user{ text-align:right; }
.msg.bot{ color:var(--purple); }