:root{
  --brand:#4f46e5;
  --brand-700:#4338ca;
  --cyan:#06b6d4;
  --slate:#334155;
}
html{scroll-behavior:smooth}
:focus-visible{outline:3px solid var(--brand); outline-offset:2px}
.gradient-text{background:linear-gradient(90deg, var(--brand), var(--cyan)); -webkit-background-clip:text; background-clip:text; color:transparent}
.hero-bg{background:radial-gradient(1200px 400px at 100% -50%, rgba(79,70,229,.10), transparent), radial-gradient(800px 300px at -10% 120%, rgba(6,182,212,.10), transparent)}
.card{transition:transform .2s ease, box-shadow .2s ease}
.card:hover{transform:translateY(-4px); box-shadow:0 14px 38px rgba(2,6,23,.10)}
.badge{display:inline-block; padding:.25rem .6rem; border-radius:.5rem; background:#EEF2FF; color:#3730a3; font-weight:600; font-size:.75rem}
@keyframes fadeInUp{from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:translateY(0)}}
.aos{opacity:0; animation:fadeInUp .6s ease forwards}
@media (prefers-color-scheme: dark){ body{background:#0b1220; color:#e5e7eb} }
.meter-section {
    flex: 1;
    background-color: #ddd;
    font-size:3px;
}

.weak {
    background-color: #ff4d4d;
}

.medium {
    background-color: #ffd633;
}

.strong {
    background-color: #00b300;
}

.very-strong {
    background-color: #009900;
}