* { margin: 0; padding: 0; box-sizing: border-box; }
    body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
    button { cursor: pointer; }
    img { max-width: 100%; height: auto; }
    @keyframes fadeInUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
    @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
    @keyframes pulse { 0%,100% { opacity: .7; } 50% { opacity: 1; } }
    .fade-up { animation: fadeInUp .7s ease-out both; }
    .fade-up-d1 { animation: fadeInUp .7s ease-out .1s both; }
    .fade-up-d2 { animation: fadeInUp .7s ease-out .2s both; }
    .fade-up-d3 { animation: fadeInUp .7s ease-out .3s both; }
    .hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
    .hero-overlay { position: absolute; inset: 0; background: linear-gradient(170deg, rgba(15,23,42,.82) 0%, rgba(15,23,42,.65) 40%, rgba(10,37,64,.78) 100%); }
    .dim-card { position: relative; overflow: hidden; border-radius: 20px; min-height: 280px; cursor: pointer; transition: transform .3s, box-shadow .3s; }
    .dim-card:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(0,0,0,.15); }
    .dim-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
    .dim-card:hover img { transform: scale(1.05); }
    .dim-card .overlay { position: absolute; inset: 0; transition: opacity .3s; }
    .dim-card .content { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding: 28px; }
    .cat-card { position: relative; overflow: hidden; border-radius: 14px; aspect-ratio: 1; cursor: pointer; transition: transform .25s, box-shadow .25s; }
    .cat-card:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(0,0,0,.12); }
    .cat-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
    .cat-card:hover img { transform: scale(1.08); }
    .cat-card .cat-overlay { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10,15,30,.85) 0%, rgba(10,15,30,.45) 40%, rgba(10,15,30,.05) 70%); }
    .cat-card .cat-label { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; padding: 16px 8px; text-align: center; }
    .stat-card { background: white; border-radius: 16px; padding: 24px 16px; text-align: center; border: 1px solid #E2E8F0; transition: transform .2s; }
    .stat-card:hover { transform: translateY(-2px); }

    /* ─── WCAG AA: Focus visible ─── */
    *:focus-visible { outline: 3px solid #0077B6; outline-offset: 2px; border-radius: 4px; }
    button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid #0077B6; outline-offset: 2px; }
    /* ─── Skip navigation link (accessibility) ─── */
    .skip-link { position: absolute; top: -40px; left: 0; background: #0077B6; color: white; padding: 8px 16px; z-index: 10000; font-size: 14px; text-decoration: none; border-radius: 0 0 8px 0; }
    .skip-link:focus { top: 0; }
    /* body scroll lock class */
    body.scroll-locked { overflow: hidden !important; }
    /* ─── MOBILE-FIRST RESPONSIVE ─── */
    @media (max-width: 1024px) {
      .grid-3 { grid-template-columns: repeat(2, 1fr) !important; }
    }
    @media (max-width: 768px) {
      .nav-desktop { display: none !important; }
      .nav-mobile { display: flex !important; }
      h1 { font-size: 26px !important; }
      h2 { font-size: 22px !important; }
      .grid-3, .grid-4 { grid-template-columns: 1fr !important; }
      .hero-flex { flex-direction: column !important; text-align: center !important; }
      .hero-flex button { width: 100% !important; justify-content: center !important; }
      .profile-layout { grid-template-columns: 1fr !important; }
      .banner-flex { flex-direction: column !important; gap: 12px !important; }
      .banner-flex button { width: 100% !important; }
    }
    @media (max-width: 480px) {
      h1 { font-size: 22px !important; }
      h2 { font-size: 18px !important; }
      .province-grid { grid-template-columns: repeat(2, 1fr) !important; }
      .province-grid button { min-height: 48px !important; padding: 20px 12px !important; }
    }