:root {
    --primary: #2563eb;
    --secondary: #22c55e;
    --accent: #f97316;
    --dark: #0f172a;
    --muted: #64748b;
    --soft: #f8fafc;
}
* { box-sizing: border-box; }
body { font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--dark); background: #ffffff; }
.hero-section {
    min-height: 82vh;
    background: radial-gradient(circle at top left, rgba(34,197,94,.22), transparent 34%), radial-gradient(circle at 80% 20%, rgba(37,99,235,.24), transparent 28%), linear-gradient(135deg, #eff6ff 0%, #ffffff 50%, #f0fdf4 100%);
    position: relative;
    overflow: hidden;
}
.hero-section:after {
    content: "";
    position: absolute;
    width: 520px;
    height: 520px;
    border-radius: 999px;
    background: rgba(249,115,22,.12);
    right: -160px;
    bottom: -180px;
}
.navbar-glass { background: rgba(255,255,255,.82); backdrop-filter: blur(18px); border-bottom: 1px solid rgba(148,163,184,.18); }
.brand-icon, .brand-badge {
    width: 48px; height: 48px; border-radius: 16px;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--primary), var(--secondary)); color: #fff;
    box-shadow: 0 12px 30px rgba(37,99,235,.24);
}
.hero-title { font-size: clamp(2.2rem, 5vw, 4.8rem); line-height: 1.02; letter-spacing: -.055em; }
.hero-desc { font-size: 1.12rem; color: var(--muted); max-width: 650px; }
.stat-card, .article-card, .data-card, .role-card, .login-panel {
    background: #fff; border: 1px solid rgba(148,163,184,.18); border-radius: 26px;
    box-shadow: 0 20px 60px rgba(15,23,42,.08);
}
.stat-card { padding: 24px; height: 100%; transition: transform .2s ease; }
.stat-card:hover, .article-card:hover, .role-card:hover { transform: translateY(-4px); }
.stat-icon {
    width: 52px; height: 52px; border-radius: 18px; display: flex; align-items: center; justify-content: center;
    font-size: 1.35rem; color: #fff; margin-bottom: 16px;
}
.bg-grad-blue { background: linear-gradient(135deg, #2563eb, #38bdf8); }
.bg-grad-green { background: linear-gradient(135deg, #16a34a, #86efac); }
.bg-grad-orange { background: linear-gradient(135deg, #f97316, #facc15); }
.bg-grad-purple { background: linear-gradient(135deg, #7c3aed, #f0abfc); }
.section-title { font-weight: 800; letter-spacing: -.035em; }
.data-card { padding: 24px; overflow: hidden; }
.chart-wrap { min-height: 310px; position: relative; }
.article-card { overflow: hidden; height: 100%; transition: transform .2s ease; }
.article-cover { height: 190px; object-fit: cover; width: 100%; background: linear-gradient(135deg, #e0f2fe, #dcfce7); }
.article-body { padding: 22px; }
.footer { background: #0f172a; color: rgba(255,255,255,.78); }
.login-choice-body { min-height: 100vh; background: linear-gradient(135deg, #2563eb, #16a34a); }
.role-card { display: block; padding: 32px; color: #0f172a; min-height: 230px; }
.role-card i { font-size: 2.8rem; color: #2563eb; margin-bottom: 18px; }
.role-card h3 { font-weight: 800; }
.login-panel { width: min(100%, 460px); padding: 36px; }
.table-modern { border-radius: 18px; overflow: hidden; }
.table-modern thead { background: #eff6ff; }
@media (max-width: 768px) {
    .hero-section { min-height: auto; }
    .hero-title { font-size: 2.35rem; }
    .stat-card, .data-card, .login-panel, .role-card { border-radius: 20px; padding: 20px; }
    .chart-wrap { min-height: 260px; }
}