:root{
  --red: #B5121B;
  --gold: #A67C1B;
  --graphite: #3B3B3B;
  --green: #6ED96E;
  --gold-bright: #F4C542;
  --red-bright: #E53935;
  --bg: #ffffff;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:"Noto Sans","Segoe UI",system-ui,ui-sans-serif,Arial; background:var(--bg); color:var(--graphite);}
a{text-decoration:none;color:var(--red);}
.header{display:flex;align-items:center;gap:16px;padding:20px 28px;border-bottom:1px solid #eee;position:sticky;top:0;background:#fff;z-index:10}
.header img.logo{height:48px;width:auto}
.nav{margin-left:auto;display:flex;gap:16px}
.btn{padding:10px 16px;border-radius:12px;border:1px solid #ddd;background:#fff;color:var(--graphite);transition:.2s;cursor:pointer}
.btn.primary{background:var(--red);border-color:var(--red);color:#fff}
.btn.primary:hover{filter:brightness(0.95)}
.hero{padding:72px 28px;display:grid;grid-template-columns:1.2fr .8fr;gap:24px;align-items:center}
.hero .title{font-size:40px;font-weight:800;color:var(--red);line-height:1.2;margin:0 0 12px}
.hero .subtitle{font-size:18px;color:#555;margin:0 0 20px}
.hero .banner{border:1px solid #eee;border-radius:20px;padding:20px}
.kpis{display:flex;gap:16px;margin-top:12px;color:#666;font-size:14px}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{padding:6px 10px;border-radius:999px;background:#fafafa;border:1px solid #eee;font-size:13px}

.section{padding:20px 28px 60px}
.h2{font-size:24px;font-weight:800;margin:0 0 16px;color:var(--graphite)}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.card{border:1px solid #eee;border-radius:20px;padding:18px;background:#fff;box-shadow:0 8px 24px rgba(0,0,0,.04)}
.card .level{font-weight:900;letter-spacing:.02em}
.card.level1{border-color: var(--green)}
.card.level2{border-color: var(--gold-bright)}
.card.level3{border-color: var(--red-bright)}
.card h3{margin:6px 0 8px}
.card h4{margin:0;color:#777;font-weight:600}
.card ul{margin:12px 0 0 18px;line-height:1.5}
.footer{padding:28px;color:#888;border-top:1px solid #eee;font-size:13px;text-align:center}

.banner-bar{display:flex;gap:14px;align-items:stretch}
.banner-card{flex:1;border:1px solid #eee;border-radius:20px;padding:18px;position:relative}
.banner-card.level1{border-color:var(--green)}
.banner-card.level2{border-color:var(--gold-bright)}
.banner-card.level3{border-color:var(--red-bright)}
.arrow{align-self:center;font-weight:900;color:#bbb;font-size:28px;padding:0 2px}

.login{max-width:520px;margin:60px auto;padding:28px;border:1px solid #eee;border-radius:20px;box-shadow:0 10px 30px rgba(0,0,0,.05)}
.input{width:100%;padding:12px 14px;border:1px solid #ddd;border-radius:12px;margin:8px 0 14px;font-size:16px}

.grid9{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:16px}
.tile{padding:14px;border:1px dashed #e5e5e5;border-radius:16px;min-height:140px;display:flex;flex-direction:column;gap:6px;justify-content:center;align-items:center;background:#fff}
.tile.main{border-style:solid}
.tile.l1{border-color:var(--green)}
.tile.l2{border-color:var(--gold-bright)}
.tile.l3{border-color:var(--red-bright)}
.badge{padding:4px 10px;border-radius:999px;border:1px solid #eee;background:#fafafa;font-size:12px}

.progress{height:8px;background:#f2f2f2;border-radius:999px;overflow:hidden}
.progress-inner{height:100%;width:0%;background:var(--red);transition:width .5s;border-radius:999px}

.small{font-size:12px;color:#777}