:root{
  --bg:#04140d;
  --bg-gradient: linear-gradient(135deg, #04140d 0%, #0c2418 55%, #1b0b0f 100%);
  --panel:#0e1c15;
  --panel-hover:#1b2c23;
  --text:#f1f5f9;
  --muted:#94a3b8;
  --border:rgba(148,163,184,.12);
  --accent:#009246;
  --accent-bright:#2dbf73;
  --accent2:#ce2b37;
  --accent3:#f3f4f6;
  --warn:#fbbf24;
  --ok:#009246;
  --bad:#f87171;
  --purple:#f3f4f6;
  --shadow: 0 20px 60px -15px rgba(0,0,0,.5), 0 0 1px rgba(255,255,255,.05);
  --shadow-lg: 0 25px 80px -20px rgba(0,146,70,.20), 0 0 1px rgba(255,255,255,.08);
  --glow: 0 0 20px rgba(0,146,70,.35);
  --radius:8px;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --sans: 'Inter', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  --maxw: 1200px;
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (prefers-color-scheme: light){
  :root{
    --bg:#f4faf6;
    --bg-gradient: linear-gradient(135deg, #f4faf6 0%, #e7f5ec 55%, #fff5f6 100%);
    --panel:#ffffff;
    --panel-hover:#edf7f0;
    --text:#0d1b14;
    --muted:#3f5a4a;
    --border:rgba(16,88,52,.16);
    --accent:#008c42;
    --accent-bright:#00a451;
    --accent2:#ce2b37;
    --accent3:#ce2b37;
    --shadow:0 12px 35px -18px rgba(0,78,42,.25), 0 0 1px rgba(0,0,0,.08);
    --shadow-lg:0 20px 50px -20px rgba(0,146,70,.28), 0 0 1px rgba(0,0,0,.08);
    --glow:0 0 16px rgba(0,146,70,.25);
  }
}

*{box-sizing:border-box; margin:0; padding:0;}

::-webkit-scrollbar{width:10px; height:10px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--accent),var(--accent2)); border-radius:5px; border:2px solid var(--bg)}
*{scrollbar-width:thin; scrollbar-color:var(--accent) var(--bg)}

html{scroll-behavior:smooth; font-size:16px}
body{
  margin:0;
  font-family:var(--sans);
  font-weight:400;
  background:var(--bg-gradient);
  background-attachment:fixed;
  color:var(--text);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  position:relative;
  overflow-x:hidden;
}
body::before{
  content:'';
  position:fixed;
  top:0; left:0;
  width:100%; height:100%;
  background:
    radial-gradient(circle at 15% 8%, rgba(0,146,70,.20), transparent 28%),
    radial-gradient(circle at 85% 50%, rgba(243,244,246,.16), transparent 26%),
    radial-gradient(circle at 50% 90%, rgba(206,43,55,.14), transparent 26%);
  pointer-events:none;
  z-index:0;
}

a{color:var(--accent-bright); text-decoration:none; transition:var(--transition)}
a:hover{text-decoration:underline; color:var(--accent2)}

.skip-link{position:absolute; top:-100px; left:16px; background:var(--panel); color:var(--text); border:1px solid var(--accent); padding:10px 14px; border-radius:6px; z-index:2001; font-size:12px}
.skip-link:focus{top:16px}

.container{max-width:var(--maxw); margin:0 auto; padding:0 24px; position:relative; z-index:1}

/* Progress bar */
.progress{position:fixed; top:0; left:0; height:3px; width:100%; background:transparent; z-index:1000}
.progress > div{height:100%; width:0%; background:linear-gradient(90deg,var(--accent),#f3f4f6,var(--accent2)); transition:width .2s ease; box-shadow:var(--glow)}

/* Header */
header{
  position:sticky; top:0; z-index:900;
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  background:color-mix(in srgb, var(--panel) 75%, transparent);
  border-bottom:1px solid var(--border);
  box-shadow:0 1px 3px rgba(0,0,0,.1);
  transition:var(--transition);
}
.topbar{display:flex; gap:20px; align-items:center; justify-content:space-between; padding:16px 0}
.brand{display:flex; gap:14px; align-items:center}
.logo{
  width:52px; height:52px;
  background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 24%, transparent), color-mix(in srgb, #f3f4f6 18%, transparent), color-mix(in srgb, var(--accent2) 20%, transparent));
  border:2px solid var(--border);
  border-radius:var(--radius);
  display:grid; place-items:center;
  color:var(--accent-bright);
  font-weight:900; font-family:var(--mono); font-size:15px; letter-spacing:1px;
  box-shadow:inset 0 0 30px rgba(0,146,70,.22), var(--shadow);
}
.brand h1{margin:0; font-size:19px; text-transform:uppercase; letter-spacing:.5px; font-weight:800; background:linear-gradient(90deg,var(--accent-bright),#f3f4f6,var(--accent2)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text}
.brand .sub{font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:2px; margin-top:4px; font-weight:600}

nav{display:flex; flex-wrap:wrap; gap:6px; justify-content:center; flex:1}
nav a{font-size:11px; text-transform:uppercase; letter-spacing:1px; padding:8px 12px; border-radius:6px; border:1px solid transparent; color:var(--muted); font-weight:600; transition:var(--transition)}
nav a:hover{color:var(--text); background:rgba(0,146,70,.10); border-color:var(--accent); text-decoration:none}
nav a.active{color:var(--accent2); border-color:rgba(206,43,55,.34); background:rgba(206,43,55,.08)}

/* Hero */
.hero{
  padding:80px 0 60px;
  text-align:center;
  position:relative;
}
.hero::before{
  content:'';
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:600px; height:600px;
  background:radial-gradient(circle, rgba(0,146,70,.14), rgba(243,244,246,.07) 42%, rgba(206,43,55,.10) 68%, transparent 78%);
  pointer-events:none;
}
.hero-badge{
  display:inline-flex; align-items:center; gap:8px;
  background:linear-gradient(90deg, rgba(0,146,70,.12), rgba(243,244,246,.14), rgba(206,43,55,.12));
  border:1px solid rgba(206,43,55,.22);
  padding:8px 20px; border-radius:50px;
  font-size:11px; font-weight:700; letter-spacing:2px; text-transform:uppercase;
  color:var(--accent-bright);
  margin-bottom:24px;
}
.hero h2{
  font-size:clamp(28px,4vw,48px);
  font-weight:900;
  letter-spacing:-0.5px;
  line-height:1.15;
  margin-bottom:16px;
  background:linear-gradient(135deg, var(--accent-bright) 20%, #f3f4f6 52%, var(--accent2) 82%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}
.hero p{font-size:16px; color:var(--muted); max-width:700px; margin:0 auto 28px; line-height:1.8}
.hero-pillars{display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:20px}
.hero-pillars span{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--panel);
  border:1px solid var(--border);
  padding:10px 18px;
  border-radius:50px;
  font-size:13px; font-weight:600;
  color:var(--text);
  transition:var(--transition);
}
.hero-pillars span:hover{border-color:var(--accent); transform:translateY(-2px); box-shadow:var(--shadow)}

/* Sections */
section{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:36px 32px;
  margin:24px auto;
  max-width:var(--maxw);
  position:relative;
  z-index:1;
  transition:var(--transition);
}
section:hover{border-color:rgba(148,163,184,.2)}
section::before{
  content:'';
  position:absolute; left:0; top:0; bottom:0;
  width:3px;
  background:linear-gradient(180deg, var(--accent), #f3f4f6 55%, var(--accent2));
  border-radius:6px 0 0 6px;
}

.section-header{display:flex; align-items:center; gap:12px; margin-bottom:24px; flex-wrap:wrap}
.section-header .icon{font-size:28px}
.section-header h2{font-size:22px; font-weight:800; text-transform:uppercase; letter-spacing:.8px; margin:0}
.section-header .tag{
  font-size:10px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase;
  background:linear-gradient(90deg, rgba(0,146,70,.10), rgba(243,244,246,.15), rgba(206,43,55,.10));
  color:var(--accent2);
  border:1px solid rgba(206,43,55,.22);
  padding:4px 12px; border-radius:50px;
  margin-left:auto;
}

h3{font-size:17px; font-weight:700; margin:24px 0 12px; color:var(--text); display:flex; align-items:center; gap:8px}
h3 .ico{font-size:18px}
h4{font-size:14px; font-weight:700; margin:16px 0 8px; color:var(--accent2); text-transform:uppercase; letter-spacing:.5px}

p, li{font-size:14.5px; color:var(--muted); line-height:1.8}
ul{margin:8px 0 16px 20px}
li{margin:5px 0}
li strong{color:var(--text)}

/* Cards Grid */
.cards{display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:16px; margin:16px 0}
.card{
  background:rgba(255,255,255,.03);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:24px 20px;
  transition:var(--transition);
  position:relative;
  overflow:hidden;
}
.card:hover{border-color:rgba(0,146,70,.30); transform:translateY(-2px); box-shadow:var(--shadow-lg)}
.card::after{
  content:'';
  position:absolute;
  top:0; left:0; right:0;
  height:2px;
  background:linear-gradient(90deg, var(--accent), var(--accent2));
  opacity:0;
  transition:opacity .3s;
}
.card:hover::after{opacity:1}
.card .card-icon{font-size:32px; margin-bottom:12px}
.card .card-title{font-size:15px; font-weight:700; color:var(--text); margin-bottom:8px}
.card .card-desc{font-size:13px; color:var(--muted); line-height:1.7}

/* Tables */
table{width:100%; border-collapse:collapse; margin:16px 0; font-size:13.5px; border-radius:var(--radius); overflow:hidden}
th,td{border:1px solid var(--border); padding:12px 14px; vertical-align:top; text-align:left}
th{background:rgba(255,255,255,.06); font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.5px; color:var(--text); font-weight:700}
td{color:var(--muted)}
tr:hover td{background:rgba(255,255,255,.02)}

/* Callouts */
.callout{
  border-left:4px solid var(--accent2);
  background:rgba(52,211,153,.06);
  padding:16px 20px;
  border-radius:0 var(--radius) var(--radius) 0;
  margin:16px 0;
  font-size:14px;
}
.callout.warn{border-left-color:var(--warn); background:rgba(251,191,36,.06)}
.callout.danger{border-left-color:var(--bad); background:rgba(248,113,113,.06)}
.callout.info{border-left-color:var(--accent3); background:rgba(96,165,250,.06)}
.callout.purple{border-left-color:var(--purple); background:rgba(167,139,250,.06)}
.callout strong{color:var(--text)}
.callout p{margin:4px 0}

/* Stat cards */
.stats{display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:14px; margin:16px 0}
.stat{
  background:rgba(255,255,255,.03);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:20px;
  text-align:center;
  transition:var(--transition);
}
.stat:hover{border-color:rgba(0,146,70,.28); transform:translateY(-1px)}
.stat .val{font-size:28px; font-weight:900; font-family:var(--mono); color:var(--accent-bright); margin-bottom:4px}
.stat .label{font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:1px; font-weight:600}

/* Flowchart / Org  */
.org-chart{display:flex; flex-direction:column; align-items:center; gap:0; margin:24px 0}
.org-level{display:flex; flex-wrap:wrap; gap:12px; justify-content:center; position:relative; padding:16px 0}
.org-level::before{content:''; position:absolute; top:0; left:50%; width:2px; height:16px; background:var(--border)}
.org-node{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:14px 20px;
  text-align:center;
  min-width:180px;
  transition:var(--transition);
}
.org-node:hover{border-color:var(--accent); box-shadow:var(--shadow)}
.org-node.hq{border-color:var(--accent); background:rgba(0,146,70,.08)}
.org-node .flag{font-size:24px; margin-bottom:6px}
.org-node .name{font-weight:700; font-size:13px; color:var(--text)}
.org-node .role{font-size:11px; color:var(--muted); margin-top:4px}
.org-connector{width:2px; height:24px; background:var(--border); margin:0 auto}

/* Details/Accordion */
details{
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px 20px;
  background:rgba(255,255,255,.02);
  margin:10px 0;
  transition:var(--transition);
}
details[open]{background:rgba(255,255,255,.04); border-color:rgba(148,163,184,.2)}
summary{cursor:pointer; font-weight:700; font-size:15px; color:var(--text); display:flex; align-items:center; gap:10px; list-style:none}
summary::-webkit-details-marker{display:none}
summary::before{content:'▸'; color:var(--accent); font-size:14px; transition:transform .2s}
details[open] summary::before{transform:rotate(90deg)}

/* Charts */
.chart-wrap{max-width:500px; margin:20px auto; position:relative}

/* Cols */
.cols{display:grid; grid-template-columns:1fr 1fr; gap:16px}
@media(max-width:768px){
  .cols{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr}
  .cards{grid-template-columns:1fr}
  .topbar{flex-direction:column; text-align:center}
  nav{justify-content:center}
  section{padding:24px 18px; margin:16px 12px}
  .hero{padding:50px 0 40px}
  .org-level{flex-direction:column; align-items:center}
}

/* Badge pills */
.pill{
  display:inline-block; padding:3px 10px; border-radius:50px;
  border:1px solid var(--border); background:rgba(255,255,255,.04);
  font-size:11px; color:var(--muted); font-family:var(--mono);
  text-transform:uppercase; letter-spacing:.5px;
}
.pill.ok{border-color:rgba(52,211,153,.3); color:var(--ok); background:rgba(52,211,153,.06)}
.pill.warn{border-color:rgba(251,191,36,.3); color:var(--warn); background:rgba(251,191,36,.06)}
.pill.danger{border-color:rgba(248,113,113,.3); color:var(--bad); background:rgba(248,113,113,.06)}
.pill.info{border-color:rgba(96,165,250,.3); color:var(--accent3); background:rgba(96,165,250,.06)}
.pill.purple{border-color:rgba(167,139,250,.3); color:var(--purple); background:rgba(167,139,250,.06)}

/* Footer */
footer{padding:40px 24px 60px; text-align:center; color:var(--muted); font-size:13px; position:relative; z-index:1}
footer .line{width:60px; height:2px; background:linear-gradient(90deg,var(--accent),var(--accent2)); margin:0 auto 20px; border-radius:2px}

/* Print */
@media print{
  body{background:#fff; color:#000}
  header,.progress,.skip-link{display:none}
  section{box-shadow:none; border:1px solid #ddd; break-inside:avoid}
  .hero{padding:30px 0}
}

/* Animations */
@keyframes fadeIn{from{opacity:0; transform:translateY(20px)} to{opacity:1; transform:translateY(0)}}
section{animation:fadeIn .5s ease both}
section:nth-child(2){animation-delay:.05s}
section:nth-child(3){animation-delay:.1s}
section:nth-child(4){animation-delay:.15s}

/* Highlight */
.hl{color:var(--accent-bright); font-weight:700}
.hl2{color:var(--accent2); font-weight:700}
.hl3{color:var(--accent3); font-weight:700}
.hl4{color:var(--purple); font-weight:700}