*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --blue-dark:  #0f3460;
  --blue-mid:   #1a56a0;
  --blue-light: #2a7de1;
  --blue-pale:  #e8f1fd;
  --teal:       #0e7f6e;
  --teal-pale:  #d1f5ef;
  --white:      #ffffff;
  --bg:         #f4f8ff;
  --text-main:  #1a1f36;
  --text-muted: #5a6478;
  --border:     #dce6f7;
  --radius:     12px;
  --shadow:     0 2px 12px rgba(15,52,96,0.08);
}

body { font-family:'Plus Jakarta Sans',Arial,sans-serif; background:var(--bg); color:var(--text-main); line-height:1.6; }

.skip-link { position:absolute; top:-100px; left:16px; background:var(--blue-dark); color:#fff; padding:8px 16px; border-radius:0 0 var(--radius) var(--radius); font-size:14px; text-decoration:none; z-index:999; transition:top 0.2s; }
.skip-link:focus { top:0; }

/* Header */
.site-header { background:var(--white); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:100; }
.nav-inner { max-width:1100px; margin:0 auto; padding:0 24px; height:62px; display:flex; align-items:center; justify-content:space-between; }
.logo { font-size:22px; font-weight:700; color:var(--blue-dark); letter-spacing:-0.5px; text-decoration:none; }
.logo span { color:var(--blue-light); }
.nav-links { display:flex; gap:4px; list-style:none; }
.nav-links a { text-decoration:none; font-size:14px; font-weight:500; color:var(--text-muted); padding:6px 14px; border-radius:8px; transition:background 0.2s,color 0.2s; }
.nav-links a:hover { background:var(--blue-pale); color:var(--blue-light); }

.container { max-width:1100px; margin:0 auto; padding:0 24px; }

/* Breadcrumb */
.breadcrumb-bar { background:var(--white); border-bottom:1px solid var(--border); padding:10px 0; }
.breadcrumb { list-style:none; display:flex; align-items:center; gap:6px; font-size:13px; color:var(--text-muted); }
.breadcrumb a { color:var(--blue-light); text-decoration:none; }
.breadcrumb a:hover { text-decoration:underline; }
.breadcrumb li[aria-current="page"] { color:var(--text-main); font-weight:500; }

/* Hero */
.page-hero { background:linear-gradient(135deg,var(--blue-dark) 0%,var(--blue-mid) 60%,var(--blue-light) 100%); color:var(--white); text-align:center; padding:52px 24px 44px; }
.page-hero h1 { font-size:clamp(26px,4vw,40px); font-weight:700; letter-spacing:-0.5px; margin-bottom:8px; }
.page-hero p  { font-size:16px; opacity:0.88; }

/* Sitemap layout */
.sitemap-section { padding:48px 0 72px; }
.sitemap-inner {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
  gap:24px;
  align-items:start;
}

/* Each group card */
.sitemap-group {
  background:var(--white); border:1px solid var(--border);
  border-radius:16px; padding:24px; box-shadow:var(--shadow);
}

.sitemap-group-header {
  display:flex; align-items:center; gap:12px; margin-bottom:20px;
  padding-bottom:14px; border-bottom:1px solid var(--border);
}
.sitemap-icon {
  width:40px; height:40px; border-radius:10px; flex-shrink:0;
  background:var(--blue-pale); color:var(--blue-light);
  display:flex; align-items:center; justify-content:center; font-size:17px;
}
.sitemap-icon.teal  { background:var(--teal-pale); color:var(--teal); }
.sitemap-icon.amber { background:#fef3c7; color:#d97706; }

.sitemap-group-header h2 { font-size:17px; font-weight:700; color:var(--blue-dark); }

.sitemap-group h3 {
  font-size:11px; font-weight:700; letter-spacing:1px;
  text-transform:uppercase; color:var(--text-muted);
  margin:16px 0 8px; padding-bottom:6px;
  border-bottom:1px solid var(--border);
}

/* Links */
.sitemap-list { list-style:none; display:flex; flex-direction:column; gap:2px; margin-bottom:4px; }
.sitemap-list a {
  display:flex; align-items:center; gap:10px;
  padding:8px 10px; border-radius:8px;
  font-size:14px; font-weight:500; color:var(--text-main);
  text-decoration:none; transition:background 0.15s, color 0.15s;
}
.sitemap-list a:hover { background:var(--blue-pale); color:var(--blue-light); }
.sitemap-list a i {
  color:var(--blue-light); width:16px; text-align:center;
  font-size:13px; flex-shrink:0;
}

/* Footer */
.site-footer { background:var(--blue-dark); color:rgba(255,255,255,0.7); padding:48px 0 0; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:32px; padding-bottom:40px; }
.footer-brand { font-size:20px; font-weight:700; color:#fff; margin-bottom:10px; }
.footer-text  { font-size:14px; line-height:1.6; max-width:220px; }
.footer-heading { font-size:11px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:rgba(255,255,255,0.5); margin-bottom:12px; }
.footer-links { list-style:none; display:flex; flex-direction:column; gap:8px; }
.footer-links a { color:rgba(255,255,255,0.7); text-decoration:none; font-size:13px; transition:color 0.2s; }
.footer-links a:hover { color:#fff; }
.footer-bottom { border-top:1px solid rgba(255,255,255,0.1); padding:20px 24px; }
.footer-meta  { font-size:13px; color:rgba(255,255,255,0.45); text-align:center; }

@media(max-width:900px){ .footer-grid { grid-template-columns:1fr 1fr; } }
@media(max-width:600px){ .sitemap-inner { grid-template-columns:1fr; } }
@media(max-width:540px){ .nav-links { display:none; } .footer-grid { grid-template-columns:1fr; } }