<style>
:root {
  --navy:#172535; --orange:#FD6A3C; --pale-gray:#F2F2F2; --white:#FFFFFF;
  --lt-blue:#A1C5D3; --med-gray:#A5A5A5; --med-navy:#3F5E9D; --pale-blue:#DAEDF5;
  --teal:#70BEB4; --soft-org:#F9B872; --soft-navy:#21325E; --soft-blue:#96C2DB;
  --soft-pale:#E5EDF1; --soft-gray:#b9bdc1;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
body{font-family:'Barlow',sans-serif;background:linear-gradient(180deg,#f4f7f9 0%,#ffffff 280px);color:#172535;min-height:100vh;}
header{background:#ffffff;border-top:6px solid var(--orange);border-bottom:1px solid rgba(23,37,53,.08);padding:24px 40px 20px;position:sticky;top:0;z-index:10;backdrop-filter:saturate(140%) blur(6px);box-shadow:0 8px 22px rgba(23,37,53,.06);overflow:hidden;}
header::before{content:'';position:absolute;right:-90px;top:-110px;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,rgba(253,106,60,.08) 0%,rgba(253,106,60,0) 72%);pointer-events:none;}
.header-inner{max-width:1400px;margin:0 auto;display:flex;align-items:center;gap:24px;}
.logo-wrap{display:flex;align-items:center;justify-content:center;min-width:190px;}
.nccer-logo{width:180px;height:auto;display:block;}
.logo-mark{display:none;}
.header-text h1{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:34px;letter-spacing:.2px;line-height:1;color:#172535;text-transform:uppercase;}
.header-text p{font-size:12px;color:#3F5E9D;margin-top:7px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;}
.page{max-width:1400px;margin:0 auto;padding:34px 32px 60px;}
.filter-bar{background:#ffffff;border-radius:18px;padding:20px 24px;margin-bottom:28px;display:flex;align-items:center;gap:24px;flex-wrap:wrap;border:1px solid rgba(23,37,53,.08);box-shadow:0 14px 32px rgba(23,37,53,.07);}
.filter-label{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:13px;letter-spacing:2px;text-transform:uppercase;color:var(--orange);white-space:nowrap;}
.filter-group{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.filter-group label{font-size:12px;color:#526172;font-weight:700;text-transform:uppercase;letter-spacing:1px;}
.filter-group select{background:#f7f9fb;border:1px solid rgba(23,37,53,.14);color:#172535;padding:10px 34px 10px 14px;border-radius:10px;font-family:'Barlow',sans-serif;font-size:13px;cursor:pointer;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%233F5E9D' d='M6 8L0 0h12z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;min-width:170px;}
.filter-group select:focus{outline:none;border-color:var(--orange);}
.filter-group select option{background:#ffffff;color:#172535;}
.btn-reset{background:#172535;border:1px solid #172535;color:#ffffff;padding:10px 18px;border-radius:999px;font-family:'Barlow',sans-serif;font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;cursor:pointer;transition:all .2s;margin-left:auto;}
.btn-reset:hover{background:#21325E;border-color:#21325E;}
#filter-info{font-size:12px;color:#66788a;margin-left:8px;font-style:italic;}
.metrics-row{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-bottom:36px;}
.metric-card{background:#ffffff;border-radius:18px;padding:22px 18px;border:1px solid rgba(23,37,53,.08);position:relative;overflow:hidden;transition:transform .2s;box-shadow:0 14px 30px rgba(23,37,53,.06);}
.metric-card:hover{transform:translateY(-2px);}
.metric-card::before{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;}
.metric-card.c1::before{background:var(--orange);}
.metric-card.c2::before{background:var(--teal);}
.metric-card.c3::before{background:var(--lt-blue);}
.metric-card.c4::before{background:#9DD869;}
.metric-card.c5::before{background:#3F5E9D;}
.metric-val{font-family:'Barlow Condensed',sans-serif;font-size:42px;font-weight:800;line-height:1;letter-spacing:-1px;}
.metric-card.c1 .metric-val{color:var(--orange);}
.metric-card.c2 .metric-val{color:var(--teal);}
.metric-card.c3 .metric-val{color:var(--lt-blue);}
.metric-card.c4 .metric-val{color:#9DD869;}
.metric-card.c5 .metric-val{color:#3F5E9D;}
.metric-lbl{font-size:11px;color:#5f7082;text-transform:uppercase;letter-spacing:1px;margin-top:7px;line-height:1.4;font-weight:700;}
.hyp-section{background:#ffffff;border-radius:22px;padding:28px 32px;margin-bottom:24px;border:1px solid rgba(23,37,53,.08);position:relative;overflow:hidden;box-shadow:0 18px 36px rgba(23,37,53,.07);}
.hyp-section::before{content:'';position:absolute;top:0;left:0;bottom:0;width:5px;border-radius:14px 0 0 14px;}
.hyp-section.h1::before{background:var(--orange);}
.hyp-section.h2::before{background:var(--teal);}
.hyp-section.h3::before{background:var(--lt-blue);}
.hyp-section.h4::before{background:#9DD869;}
.hyp-section.h5::before{background:#3F5E9D;}
.hyp-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:24px;gap:16px;}
.hyp-id{font-family:'Barlow Condensed',sans-serif;font-size:13px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--med-gray);margin-bottom:4px;}
.hyp-title{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:24px;color:#172535;line-height:1.15;max-width:800px;}
.badge{flex-shrink:0;padding:6px 16px;border-radius:20px;font-family:'Barlow Condensed',sans-serif;font-size:13px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;white-space:nowrap;}
.badge.supported{background:rgba(112,190,180,.2);color:var(--teal);border:1px solid var(--teal);}
.badge.not-supported{background:rgba(165,165,165,.15);color:var(--soft-gray);border:1px solid var(--soft-gray);}
.badge.partial{background:rgba(249,184,114,.2);color:var(--soft-org);border:1px solid var(--soft-org);}
.hyp-charts{display:grid;gap:20px;}
.hyp-charts.two-col{grid-template-columns:1fr 1fr;}
.chart-box{background:linear-gradient(180deg,#f9fbfc 0%,#f2f6f8 100%);border-radius:18px;padding:18px 20px;border:1px solid rgba(23,37,53,.05);}
.chart-box h4{font-family:'Barlow Condensed',sans-serif;font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:1.3px;color:#3F5E9D;margin-bottom:14px;}
.chart-container{position:relative;height:220px;}
.chart-container.tall{height:280px;}
.stat-pills{display:none !important;}
.stat-pill{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:6px;padding:6px 14px;font-size:12px;color:var(--soft-gray);display:flex;align-items:center;gap:6px;}
.stat-pill b{color:var(--white);font-weight:600;}
.stat-pill.highlight{border-color:rgba(112,190,180,.4);}
.stat-pill.highlight b{color:var(--teal);}
.insight-box{background:linear-gradient(180deg,#fff8f4 0%,#ffffff 100%);border-left:4px solid var(--orange);border-radius:0 14px 14px 0;padding:16px 18px;margin-top:18px;font-size:14px;color:#314252;line-height:1.7;}
#h5-insight{background:linear-gradient(180deg,rgba(63,94,157,.16) 0%,#ffffff 100%);border-left-color:#3F5E9D;}
.insight-box.teal{background:linear-gradient(180deg,rgba(112,190,180,.16) 0%,#ffffff 100%);border-left-color:var(--teal);}
.insight-box.blue{background:linear-gradient(180deg,rgba(157,216,105,.18) 0%,#ffffff 100%);border-left-color:#9DD869;}
.insight-box.amber{background:linear-gradient(180deg,rgba(161,197,211,.18) 0%,#ffffff 100%);border-left-color:var(--lt-blue);}
.tab-nav{display:flex;gap:2px;background:#eef3f7;border:1px solid rgba(23,37,53,.08);border-radius:10px;padding:4px;margin-bottom:16px;width:fit-content;box-shadow:inset 0 1px 0 rgba(255,255,255,.8);}
.tab-btn{background:transparent;border:none;color:var(--soft-gray);padding:7px 18px;border-radius:6px;font-family:'Barlow',sans-serif;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:1px;cursor:pointer;transition:all .2s;}
.tab-btn.active{background:var(--med-navy);color:var(--white);}
.tab-btn:hover:not(.active){color:var(--navy);}
.tab-panel{display:none;}
.tab-panel.active{display:block;}
footer{text-align:center;padding:24px;font-size:11px;color:#718396;letter-spacing:1px;text-transform:uppercase;border-top:1px solid rgba(23,37,53,.08);margin-top:24px;}
@media(max-width:1100px){.metrics-row{grid-template-columns:repeat(3,1fr);}}
@media(max-width:800px){.metrics-row{grid-template-columns:repeat(2,1fr);}.hyp-charts.two-col{grid-template-columns:1fr;}.page{padding:20px 16px 40px;}header{padding:16px 18px 14px;position:relative;}.header-inner{align-items:flex-start;flex-direction:column;gap:12px;}.logo-wrap{min-width:auto;}.nccer-logo{width:150px;}.hyp-title{font-size:21px;}}
</style>
