/* =========================================================================
   IMPACT365 — Design System
   Palette: white · charcoal · ESG green · soft orange highlight
   Modern corporate SaaS / community ecosystem aesthetic. Mobile-first.
   ========================================================================= */
:root{
  --green:#1f3b2c;        /* deep charcoal-green brand */
  --green-600:#2e6b4a;
  --green-500:#3a8c5f;
  --green-100:#e7f2ec;
  --orange:#f5933b;       /* soft orange highlight */
  --orange-100:#fdeedd;
  --charcoal:#26302c;
  --ink:#1c2622;
  --muted:#6b7a73;
  --line:#e6ebe8;
  --bg:#f5f7f6;
  --white:#ffffff;
  --ok:#1e8e54; --ok-bg:#e6f5ec;
  --warn:#b9791a; --warn-bg:#fdf1de;
  --bad:#c0392b; --bad-bg:#fbeae8;
  --info:#1f6f8b; --info-bg:#e6f1f4;
  --radius:14px; --radius-sm:9px;
  --shadow:0 1px 2px rgba(20,40,30,.05),0 8px 24px rgba(20,40,30,.06);
  --shadow-sm:0 1px 2px rgba(20,40,30,.06);
  --font:'Segoe UI',system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--font);color:var(--ink);background:var(--bg);line-height:1.55;font-size:15px}
a{color:var(--green-600);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;display:block}
h1,h2,h3,h4{line-height:1.25;color:var(--charcoal);font-weight:700}
h1{font-size:1.9rem}h2{font-size:1.4rem}h3{font-size:1.15rem}
.container{width:100%;max-width:1180px;margin:0 auto;padding:0 20px}
.muted{color:var(--muted)}
.small{font-size:.85rem}
.center{text-align:center}
.mt{margin-top:18px}.mb{margin-bottom:18px}.mt-lg{margin-top:36px}
.row{display:flex;flex-wrap:wrap;gap:20px}
.col{flex:1 1 0;min-width:240px}
.hide{display:none!important}
.text-right{text-align:right}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;justify-content:center;
  background:var(--green-600);color:#fff;border:none;border-radius:var(--radius-sm);
  padding:11px 20px;font-size:.95rem;font-weight:600;cursor:pointer;
  transition:.15s;font-family:inherit;text-decoration:none}
.btn:hover{background:var(--green-500);text-decoration:none;transform:translateY(-1px)}
.btn:active{transform:none}
.btn-orange{background:var(--orange)}
.btn-orange:hover{background:#e8842a}
.btn-ghost{background:transparent;color:var(--green-600);border:1.5px solid var(--line)}
.btn-ghost:hover{background:var(--green-100)}
.btn-danger{background:var(--bad)}
.btn-danger:hover{background:#a93226}
.btn-sm{padding:7px 13px;font-size:.85rem}
.btn-block{width:100%}
.btn[disabled]{opacity:.55;cursor:not-allowed;transform:none}

/* ---------- Public header ---------- */
.site-header{background:var(--white);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}
.site-header .container{display:flex;align-items:center;justify-content:space-between;height:66px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.25rem;color:var(--green);letter-spacing:-.3px}
.brand .dot{width:13px;height:13px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 4px var(--orange-100)}
.brand:hover{text-decoration:none}
.nav{display:flex;align-items:center;gap:8px}
.nav a{color:var(--charcoal);padding:9px 13px;border-radius:8px;font-weight:500;font-size:.93rem}
.nav a:hover{background:var(--green-100);text-decoration:none}
.nav .btn{color:#fff}
.nav .btn.btn-ghost{color:var(--green-600)}
.menu-toggle{display:none;background:none;border:none;font-size:1.5rem;cursor:pointer;color:var(--charcoal)}

/* ---------- Hero ---------- */
.hero{background:linear-gradient(135deg,var(--green) 0%,var(--green-600) 60%,var(--green-500) 100%);
  color:#fff;padding:84px 0 92px;position:relative;overflow:hidden}
.hero:after{content:"";position:absolute;right:-120px;top:-120px;width:420px;height:420px;
  border-radius:50%;background:rgba(245,147,59,.16)}
.hero h1{color:#fff;font-size:2.8rem;max-width:760px;letter-spacing:-1px}
.hero p{font-size:1.18rem;opacity:.92;max-width:620px;margin-top:16px}
.hero .tag{display:inline-block;background:rgba(255,255,255,.14);padding:6px 15px;
  border-radius:999px;font-size:.82rem;font-weight:600;letter-spacing:.5px;margin-bottom:18px}
.hero .cta{margin-top:32px;display:flex;gap:14px;flex-wrap:wrap}
.hero .cta .btn-ghost{color:#fff;border-color:rgba(255,255,255,.5)}
.hero .cta .btn-ghost:hover{background:rgba(255,255,255,.12)}

/* ---------- Sections / cards ---------- */
.section{padding:60px 0}
.section-title{text-align:center;margin-bottom:40px}
.section-title h2{font-size:1.9rem}
.section-title p{color:var(--muted);margin-top:8px}
.grid{display:grid;gap:22px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);overflow:hidden}
.card-pad{padding:22px}
.card-body{padding:20px}
.card h3{margin-bottom:6px}
.feature{padding:26px;text-align:left}
.feature .ico{width:46px;height:46px;border-radius:12px;background:var(--green-100);
  color:var(--green-600);display:flex;align-items:center;justify-content:center;
  font-size:1.4rem;font-weight:800;margin-bottom:14px}

/* event / project cards */
.thumb{height:160px;background:var(--green-100);background-size:cover;background-position:center;
  display:flex;align-items:flex-end;color:#fff;position:relative}
.thumb .chip{position:absolute;top:12px;left:12px;background:rgba(15,31,23,.78);color:#fff;
  font-size:.74rem;font-weight:600;padding:5px 11px;border-radius:999px}
.meta{display:flex;flex-wrap:wrap;gap:14px;color:var(--muted);font-size:.85rem;margin:10px 0}
.meta span{display:flex;align-items:center;gap:5px}
.progress{height:8px;background:var(--green-100);border-radius:999px;overflow:hidden;margin:10px 0}
.progress>span{display:block;height:100%;background:var(--orange)}

/* ---------- Badges & alerts ---------- */
.badge{display:inline-block;padding:3px 10px;border-radius:999px;font-size:.74rem;font-weight:700;letter-spacing:.2px}
.badge-ok{background:var(--ok-bg);color:var(--ok)}
.badge-warn{background:var(--warn-bg);color:var(--warn)}
.badge-bad{background:var(--bad-bg);color:var(--bad)}
.badge-info{background:var(--info-bg);color:var(--info)}
.badge-muted{background:#eef1ef;color:var(--muted)}
.alert{padding:13px 16px;border-radius:var(--radius-sm);margin-bottom:16px;font-size:.92rem;border:1px solid transparent}
.alert-success{background:var(--ok-bg);color:var(--ok);border-color:#bfe3cd}
.alert-error{background:var(--bad-bg);color:var(--bad);border-color:#f1c9c4}
.alert-warning{background:var(--warn-bg);color:var(--warn);border-color:#f0d9af}
.alert-info{background:var(--info-bg);color:var(--info);border-color:#c5dde4}

/* ---------- Forms ---------- */
.form-group{margin-bottom:16px}
label{display:block;font-weight:600;font-size:.88rem;margin-bottom:6px;color:var(--charcoal)}
input,select,textarea{width:100%;padding:11px 13px;border:1.5px solid var(--line);
  border-radius:var(--radius-sm);font-family:inherit;font-size:.95rem;background:#fff;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--green-500);
  box-shadow:0 0 0 3px var(--green-100)}
textarea{min-height:120px;resize:vertical}
.form-hint{font-size:.8rem;color:var(--muted);margin-top:5px}
.auth-wrap{min-height:calc(100vh - 66px);display:flex;align-items:center;justify-content:center;padding:40px 16px}
.auth-card{width:100%;max-width:430px}
.auth-card .card-pad{padding:32px}

/* ---------- Tables ---------- */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:#fff}
table.data{width:100%;border-collapse:collapse;font-size:.9rem;min-width:560px}
table.data th,table.data td{padding:12px 15px;text-align:left;border-bottom:1px solid var(--line)}
table.data th{background:#fafbfb;font-weight:700;color:var(--charcoal);font-size:.8rem;
  text-transform:uppercase;letter-spacing:.4px}
table.data tr:last-child td{border-bottom:none}
table.data tr:hover td{background:#fafcfb}

/* ---------- Dashboard shell ---------- */
.dash{display:flex;min-height:100vh}
.sidebar{width:248px;background:var(--green);color:#cfe0d6;display:flex;flex-direction:column;
  position:fixed;inset:0 auto 0 0;z-index:60}
.sidebar .brand{color:#fff;padding:22px 22px;font-size:1.2rem}
.sidebar nav{flex:1;overflow-y:auto;padding:8px 12px}
.sidebar .grp{font-size:.7rem;text-transform:uppercase;letter-spacing:1px;color:#7fa890;
  padding:16px 12px 6px}
.sidebar a{display:flex;align-items:center;gap:11px;color:#cfe0d6;padding:10px 13px;
  border-radius:9px;font-size:.92rem;font-weight:500;margin-bottom:2px}
.sidebar a:hover{background:rgba(255,255,255,.08);color:#fff;text-decoration:none}
.sidebar a.active{background:var(--orange);color:#3a2207;font-weight:700}
.sidebar .foot{padding:14px 18px;border-top:1px solid rgba(255,255,255,.1);font-size:.8rem}
.main{flex:1;margin-left:248px;display:flex;flex-direction:column;min-width:0}
.topbar{background:#fff;border-bottom:1px solid var(--line);height:62px;display:flex;
  align-items:center;justify-content:space-between;padding:0 26px;position:sticky;top:0;z-index:40}
.topbar .pg{font-weight:700;color:var(--charcoal);font-size:1.05rem}
.topbar .right{display:flex;align-items:center;gap:16px}
.avatar{width:36px;height:36px;border-radius:50%;background:var(--green-100);color:var(--green-600);
  display:flex;align-items:center;justify-content:center;font-weight:700;overflow:hidden}
.bell{position:relative;color:var(--muted);font-size:1.15rem}
.bell .dot{position:absolute;top:-3px;right:-3px;background:var(--orange);color:#fff;
  font-size:.62rem;font-weight:700;min-width:16px;height:16px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;padding:0 4px}
.content{padding:28px 26px;flex:1}
.page-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;
  flex-wrap:wrap;margin-bottom:24px}
.page-head h1{font-size:1.55rem}
.page-head p{color:var(--muted);margin-top:4px}

/* stat tiles */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:26px}
.stat{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px;
  box-shadow:var(--shadow-sm)}
.stat .lbl{color:var(--muted);font-size:.82rem;font-weight:600;text-transform:uppercase;letter-spacing:.4px}
.stat .val{font-size:2rem;font-weight:800;color:var(--charcoal);margin-top:6px;line-height:1}
.stat .sub{font-size:.8rem;color:var(--muted);margin-top:6px}
.stat.accent{border-left:4px solid var(--orange)}

/* membership card */
.mcard{background:linear-gradient(125deg,var(--green) 0%,var(--green-600) 70%,var(--green-500) 100%);
  color:#fff;border-radius:18px;padding:28px;max-width:430px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.mcard:after{content:"";position:absolute;right:-60px;bottom:-60px;width:200px;height:200px;
  border-radius:50%;background:rgba(245,147,59,.22)}
.mcard .t{font-size:.8rem;letter-spacing:2px;opacity:.8;text-transform:uppercase}
.mcard .nm{font-size:1.5rem;font-weight:800;margin:14px 0 4px}
.mcard .no{font-family:'Courier New',monospace;letter-spacing:2px;font-size:1.05rem;opacity:.92}
.mcard .ft{display:flex;justify-content:space-between;margin-top:26px;font-size:.82rem;opacity:.9}
.mcard .qr{position:absolute;right:22px;top:22px;background:#fff;padding:6px;border-radius:8px;width:84px}

.qrbox{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px;
  display:inline-block;text-align:center}
.qrbox svg{width:220px;height:220px}

footer.site{background:var(--charcoal);color:#aebbb4;padding:40px 0;margin-top:60px;font-size:.9rem}
footer.site a{color:#cfe0d6}
footer.site .container{display:flex;justify-content:space-between;flex-wrap:wrap;gap:18px}

.pager{display:flex;align-items:center;gap:14px;justify-content:center;margin-top:26px}
.pager a{padding:8px 15px;border:1px solid var(--line);border-radius:8px;background:#fff}
.pager .pager-info{color:var(--muted);font-size:.88rem}

.empty{text-align:center;padding:54px 20px;color:var(--muted)}
.empty .ico{font-size:2.6rem;margin-bottom:10px}

.list-split{display:flex;justify-content:space-between;align-items:center;gap:14px;
  padding:14px 0;border-bottom:1px solid var(--line)}
.list-split:last-child{border-bottom:none}

/* ---------- Responsive ---------- */
@media(max-width:900px){
  .grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:repeat(2,1fr)}
  .hero h1{font-size:2.1rem}
}
@media(max-width:760px){
  .menu-toggle{display:block}
  .nav{position:absolute;top:66px;left:0;right:0;background:#fff;flex-direction:column;
    align-items:stretch;padding:12px;border-bottom:1px solid var(--line);display:none;gap:4px}
  .nav.open{display:flex}
  .nav a{padding:12px}
  .sidebar{transform:translateX(-100%);transition:.25s;width:240px}
  .sidebar.open{transform:translateX(0)}
  .main{margin-left:0}
  .menu-toggle.dash-toggle{display:block}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr}
  .hero h1{font-size:1.8rem}
  h1{font-size:1.5rem}
  .backdrop{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:55;display:none}
  .backdrop.show{display:block}
}
@media(max-width:480px){
  .stats{grid-template-columns:1fr}
  .hero{padding:54px 0 60px}
}
@media print{
  .site-header,.sidebar,.topbar,footer.site,.no-print{display:none!important}
  .main{margin:0}.content{padding:0}
  body{background:#fff}
}

/* =========================================================================
   Landing page interactions
   ========================================================================= */
.reveal{opacity:0;transform:translateY(26px);
  transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
.reveal .stat,.reveal .feature,.reveal .card{transition:transform .25s ease,box-shadow .25s ease}
.reveal.in .stat:hover,.reveal.in .feature:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.stat .val{transition:color .3s}

/* Hero rotating word */
.rotator{display:inline-block;color:var(--orange)}
.rotator-word{display:inline-block;transition:opacity .35s ease,transform .35s ease}
.rotator-word.out{opacity:0;transform:translateY(-12px)}

/* Scroll cue */
.scroll-cue{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);
  color:rgba(255,255,255,.7);font-size:1.8rem;line-height:1;text-decoration:none;
  animation:bounce 2s infinite}
.scroll-cue:hover{color:#fff;text-decoration:none}
@keyframes bounce{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(7px)}}

/* How-it-works stepper */
.stepper{max-width:920px;margin:0 auto}
.stepper-tabs{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:26px}
.stepper-tab{background:var(--green-100);color:var(--green-600);border:none;
  padding:10px 20px;border-radius:999px;font-weight:600;font-size:.92rem;
  cursor:pointer;font-family:inherit;transition:.18s}
.stepper-tab:hover{background:#d9ebe1}
.stepper-tab.active{background:var(--green-600);color:#fff;box-shadow:var(--shadow-sm)}
.stepper-panel{display:none}
.stepper-panel.active{display:block}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.step{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:22px;position:relative;animation:stepIn .5s both;animation-delay:var(--d,0ms)}
.step-no{width:38px;height:38px;border-radius:50%;background:var(--orange);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:800;margin-bottom:12px}
.step strong{display:block;margin-bottom:4px;color:var(--charcoal)}
.step:not(:last-child):after{content:"→";position:absolute;right:-13px;top:34px;
  color:var(--line);font-size:1.2rem;font-weight:700}
@keyframes stepIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* FAQ accordion */
.faq{display:flex;flex-direction:column;gap:10px}
.faq-item{background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden}
.faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:14px;
  background:none;border:none;padding:17px 20px;text-align:left;cursor:pointer;
  font-family:inherit;font-size:1rem;font-weight:600;color:var(--charcoal)}
.faq-q:hover{background:#fafcfb}
.faq-ic{flex:0 0 auto;width:24px;height:24px;border-radius:50%;background:var(--green-100);
  color:var(--green-600);display:flex;align-items:center;justify-content:center;
  font-weight:800;transition:transform .25s}
.faq-item.open .faq-ic{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease;padding:0 20px}
.faq-item.open .faq-a{max-height:320px;padding:0 20px 18px}
.faq-a p{color:var(--muted);margin:0}

@media(max-width:760px){
  .steps{grid-template-columns:1fr 1fr}
  .step:not(:last-child):after{display:none}
}
@media(max-width:480px){
  .steps{grid-template-columns:1fr}
  .stepper-tab{padding:9px 15px;font-size:.85rem}
}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .scroll-cue{animation:none}
  .step{animation:none}
  .rotator-word{transition:none}
  *{scroll-behavior:auto!important}
}