:root{
  --blue:#364a94;--blue2:#26366f;--yellow:#f6df33;--green:#6fac62;
  --green-light:#eaf4e7;--bg:#fbfcf8;--text:#252b3a;--muted:#72798a;
  --line:#e9ebf1;--white:#fff;--shadow:0 18px 50px rgba(54,74,148,.10);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--white);color:var(--text);font-family:Inter,Arial,sans-serif}
a{text-decoration:none;color:inherit}
button,select{font:inherit}
.topbar{height:82px;padding:0 6%;display:flex;align-items:center;justify-content:space-between;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);position:sticky;top:0;z-index:30;border-bottom:1px solid rgba(233,235,241,.8)}
.brand{display:flex;align-items:center;gap:10px;color:var(--blue)}
.brand small{display:block;font-size:9px;line-height:9px;text-transform:uppercase}
.brand strong{font-size:21px;line-height:20px}
.brand-mark{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:var(--blue);color:var(--yellow);font-weight:900;font-size:27px;transform:skew(-8deg)}
nav{display:flex;gap:28px;font-size:13px;font-weight:700;color:#49516a}
nav a:hover{color:var(--blue)}
.menu-btn{display:none;border:0;background:none;font-size:25px;color:var(--blue)}
.hero{min-height:610px;padding:80px 8%;display:flex;align-items:center;position:relative;overflow:hidden;background:linear-gradient(120deg,#fff 0%,#fff 54%,#f5f8f1 100%)}
.hero-copy{width:54%;position:relative;z-index:2}
.eyebrow,.section-kicker{font-size:12px;font-weight:800;letter-spacing:1.6px;color:var(--green)}
.hero h1{font-family:"Barlow Condensed",sans-serif;font-size:clamp(58px,7vw,92px);line-height:.86;letter-spacing:-2px;margin:18px 0 25px;color:var(--blue)}
.hero h1 span{color:var(--green)}
.hero p{max-width:540px;font-size:18px;line-height:1.65;color:var(--muted);margin-bottom:30px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:14px 22px;border-radius:999px;font-size:13px;font-weight:800;transition:.2s}
.btn:hover{transform:translateY(-2px)}
.btn.primary{background:var(--blue);color:white}
.btn.light{background:#f4f3e8;color:#303746}
.hero-art{position:absolute;right:5%;width:500px;height:500px}
.art-circle{position:absolute;inset:25px;border-radius:50%;background:var(--blue)}
.art-yellow{position:absolute;width:270px;height:115px;left:-10px;top:85px;background:var(--yellow);transform:skew(-27deg)}
.art-green{position:absolute;width:270px;height:115px;right:-20px;top:50px;background:var(--green);transform:skew(27deg)}
.art-seven{position:absolute;left:88px;top:55px;font-family:Arial;font-weight:900;font-size:420px;line-height:.9;color:transparent;-webkit-text-stroke:18px white;text-shadow:-31px 25px var(--yellow),31px -18px var(--green)}
.filters-wrap{background:#f5f6f2;padding:28px 0;border-bottom:1px solid var(--line)}
.section-shell{width:min(1180px,88%);margin:0 auto}
.filter-heading{display:flex;align-items:end;justify-content:space-between;margin-bottom:18px}
.filter-heading h2{margin:5px 0 0;font-size:24px;color:var(--blue)}
.reset{border:0;background:transparent;color:var(--blue);font-weight:800;font-size:12px;cursor:pointer}
.filters{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.filters label{font-size:11px;font-weight:800;color:#596073;text-transform:uppercase;letter-spacing:.5px}
.filters select{display:block;width:100%;margin-top:7px;border:1px solid #dfe2ea;border-radius:12px;background:white;padding:12px 13px;color:var(--text);outline:none}
.filters select:focus{border-color:var(--blue)}
.filter-status{font-size:11px;color:var(--muted);margin-top:10px}
section:not(.hero):not(.filters-wrap){padding:82px 0}
.section-heading{text-align:center;margin-bottom:42px}
.section-heading h2{font-size:38px;color:var(--blue);margin:8px 0 10px}
.section-heading p{color:var(--muted);margin:0;line-height:1.6}
.metric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.metric-card{padding:26px;border:1px solid var(--line);border-radius:22px;background:#fff;box-shadow:var(--shadow)}
.metric-icon{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:var(--green-light);color:var(--green);font-weight:900;margin-bottom:18px}
.metric-card span{display:block;color:var(--muted);font-size:13px}
.metric-card strong{display:block;color:var(--blue);font-size:36px;margin:7px 0 3px}
.metric-card small{font-size:11px;color:var(--muted)}
.soft-section{background:var(--bg)}
.chart-card{background:white;border:1px solid var(--line);border-radius:26px;padding:35px;box-shadow:var(--shadow)}
.chart-area{height:310px;display:flex;align-items:end;gap:clamp(15px,5vw,55px);padding:20px 20px 0;border-bottom:1px solid #dfe2e8}
.bar-wrap{height:100%;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;min-width:45px}
.bar{width:min(75px,75%);border-radius:13px 13px 0 0;background:var(--blue);position:relative;transition:.35s;min-height:8px}
.bar:hover{background:var(--green)}
.bar-value{position:absolute;top:-25px;left:0;width:100%;text-align:center;color:var(--blue);font-size:11px;font-weight:800}
.bar-label{padding:13px 0 12px;color:var(--muted);font-size:12px;font-weight:800}
.chart-legend{display:flex;justify-content:space-between;margin-top:18px;color:var(--muted);font-size:11px}
.dot{width:9px;height:9px;display:inline-block;border-radius:50%;margin-right:5px}.dot.blue{background:var(--blue)}
.highlight-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.employee{border:1px solid var(--line);border-radius:24px;padding:30px;text-align:center;background:white;box-shadow:0 12px 35px rgba(0,0,0,.04)}
.medal{font-size:38px;margin-bottom:12px}
.employee h3{margin:0;color:var(--blue);font-size:19px}
.employee p{color:var(--muted);font-size:12px;margin:8px 0}
.employee .quality{color:var(--green);font-weight:900;font-size:27px;margin-top:14px}
.dark-section{background:var(--blue);color:white}
.dark-heading h2{color:white}.dark-heading p{color:#dce2fb}.yellow{color:var(--yellow)}
.attention-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.attention-card{padding:26px;border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.08);border-radius:22px}
.attention-rank{font-size:12px;color:var(--yellow);font-weight:900;letter-spacing:1px}
.attention-card h3{font-size:17px;margin:10px 0 6px}
.attention-card p{font-size:12px;color:#dce2fb;line-height:1.55;margin:0}
.attention-count{font-size:28px;font-weight:900;color:var(--yellow);margin-top:16px}
.quality-message{background:#fff}
.message-box{text-align:center;max-width:820px}
.quote-mark{font-family:Georgia;font-size:70px;color:var(--yellow);line-height:.5}
.message-box h2{font-size:32px;color:var(--blue);margin:20px 0 10px}
.message-box p{color:var(--muted);line-height:1.7}
.message-accent{display:inline-block;margin-top:14px;color:var(--green);font-size:12px;font-weight:800}
footer{background:#202b59;color:white;padding:30px 0}.footer-inner{display:flex;justify-content:space-between;font-size:12px}.footer-inner span{color:#c7cce2}
.empty{padding:50px;text-align:center;color:var(--muted);background:white;border-radius:20px;border:1px dashed #d7dae2}
@media(max-width:950px){
  nav{display:none}.menu-btn{display:block}.hero-copy{width:100%}.hero-art{opacity:.13;right:-110px}
  .filters{grid-template-columns:repeat(2,1fr)}.metric-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:650px){
  .topbar{height:70px}.hero{min-height:610px;padding:65px 6%}.hero h1{font-size:58px}
  .section-shell{width:88%}.filters{grid-template-columns:1fr}.metric-grid,.highlight-grid,.attention-grid{grid-template-columns:1fr}
  section:not(.hero):not(.filters-wrap){padding:62px 0}.section-heading h2{font-size:31px}
  .chart-card{padding:18px}.chart-area{gap:10px;padding:25px 5px 0}.bar{width:70%}.chart-legend{display:block}.chart-legend span{display:block;margin-bottom:5px}
  .footer-inner{flex-direction:column;gap:8px;text-align:center}
}