@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap');

 /* ── Page wrapper ───────────────────────────────────────── */
 .sitemap-page {
     font-family: 'DM Sans', sans-serif;
     background: #f5f7fa;
     min-height: 100vh;
     padding: 0 0 80px;
 }

 /* ── Hero banner ────────────────────────────────────────── */
 .sitemap-hero {
     background: linear-gradient(135deg, #0c2d48 0%, #145374 50%, #29b8e5 100%);
     padding: 64px 0 56px;
     text-align: center;
     position: relative;
     overflow: hidden;
 }

 .sitemap-hero::before {
     content: '';
     position: absolute;
     top: -40%;
     right: -10%;
     width: 500px;
     height: 500px;
     background: radial-gradient(circle, rgba(41, 184, 229, .15) 0%, transparent 70%);
     border-radius: 50%;
 }

 .sitemap-hero::after {
     content: '';
     position: absolute;
     bottom: -30%;
     left: -5%;
     width: 400px;
     height: 400px;
     background: radial-gradient(circle, rgba(41, 184, 229, .1) 0%, transparent 70%);
     border-radius: 50%;
 }

 .sitemap-hero h1 {
     font-size: 36px;
     font-weight: 700;
     color: #fff;
     margin: 0 0 10px;
     position: relative;
     z-index: 1;
 }

 .sitemap-hero p {
     font-size: 15px;
     color: rgba(255, 255, 255, .7);
     margin: 0;
     position: relative;
     z-index: 1;
 }

 /* ── Breadcrumb ─────────────────────────────────────────── */
 .sitemap-breadcrumb {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
     margin-top: 20px;
     font-size: 13px;
     position: relative;
     z-index: 1;
 }

 .sitemap-breadcrumb a {
     color: rgba(255, 255, 255, .6);
     text-decoration: none;
     transition: color .15s;
 }

 .sitemap-breadcrumb a:hover {
     color: #fff;
 }

 .sitemap-breadcrumb .sep {
     color: rgba(255, 255, 255, .3);
 }

 .sitemap-breadcrumb .current {
     color: #fff;
     font-weight: 600;
 }

 /* ── Container ──────────────────────────────────────────── */
 .sitemap-container {
     max-width: 1100px;
     margin: -32px auto 0;
     padding: 0 20px;
     position: relative;
     z-index: 2;
 }

 /* ── Section card ───────────────────────────────────────── */
 .sitemap-section {
     background: #fff;
     border-radius: 14px;
     border: 1px solid #e5e7eb;
     box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
     margin-bottom: 20px;
     overflow: hidden;
     transition: box-shadow .2s;
 }

 .sitemap-section:hover {
     box-shadow: 0 4px 20px rgba(0, 0, 0, .07);
 }

 /* Section header (toggle) */
 .sitemap-section-header {
     display: flex;
     align-items: center;
     gap: 14px;
     padding: 18px 24px;
     cursor: pointer;
     user-select: none;
     border: none;
     background: none;
     width: 100%;
     text-align: left;
     font-family: inherit;
     transition: background .15s;
 }

 .sitemap-section-header:hover {
     background: #f9fafb;
 }

 .sitemap-section-header .section-icon {
     width: 40px;
     height: 40px;
     border-radius: 10px;
     background: linear-gradient(135deg, #29b8e5, #1a8fb8);
     display: flex;
     align-items: center;
     justify-content: center;
     color: #fff;
     flex-shrink: 0;
 }

 .sitemap-section-header .section-icon svg {
     width: 20px;
     height: 20px;
 }

 .sitemap-section-header .section-title {
     font-size: 17px;
     font-weight: 700;
     color: #111827;
     flex: 1;
 }

 .sitemap-section-header .section-count {
     font-size: 12px;
     font-weight: 600;
     color: #29b8e5;
     background: #e8f7fc;
     padding: 3px 10px;
     border-radius: 20px;
 }

 .sitemap-section-header .section-chevron {
     width: 20px;
     height: 20px;
     color: #9ca3af;
     transition: transform .25s ease;
     flex-shrink: 0;
 }

 .sitemap-section.open .section-chevron {
     transform: rotate(180deg);
     color: #29b8e5;
 }

 /* Section body */
 .sitemap-section-body {
     display: none;
     border-top: 1px solid #f1f3f5;
     padding: 8px 24px 16px;
 }

 .sitemap-section.open .sitemap-section-body {
     display: block;
 }

 /* ── Direct link (no children) ──────────────────────────── */
 .sitemap-direct {
     background: #fff;
     border-radius: 14px;
     border: 1px solid #e5e7eb;
     box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
     margin-bottom: 20px;
     overflow: hidden;
     transition: box-shadow .2s;
 }

 .sitemap-direct:hover {
     box-shadow: 0 4px 20px rgba(0, 0, 0, .07);
 }

 .sitemap-direct a {
     display: flex;
     align-items: center;
     gap: 14px;
     padding: 18px 24px;
     text-decoration: none;
     transition: background .15s;
 }

 .sitemap-direct a:hover {
     background: #f9fafb;
 }

 .sitemap-direct .section-icon {
     width: 40px;
     height: 40px;
     border-radius: 10px;
     background: linear-gradient(135deg, #29b8e5, #1a8fb8);
     display: flex;
     align-items: center;
     justify-content: center;
     color: #fff;
     flex-shrink: 0;
 }

 .sitemap-direct .section-icon svg {
     width: 20px;
     height: 20px;
 }

 .sitemap-direct .section-title {
     font-size: 17px;
     font-weight: 700;
     color: #111827;
     flex: 1;
 }

 .sitemap-direct .link-arrow {
     width: 18px;
     height: 18px;
     color: #9ca3af;
     transition: transform .15s, color .15s;
 }

 .sitemap-direct a:hover .link-arrow {
     transform: translateX(3px);
     color: #29b8e5;
 }

 /* ── Link list ──────────────────────────────────────────── */
 .sitemap-links {
     list-style: none;
     padding: 0;
     margin: 0;
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
     gap: 0;
 }

 .sitemap-links li {
     border-bottom: 1px solid #f3f4f6;
 }

 .sitemap-links li:last-child {
     border-bottom: none;
 }

 .sitemap-links li a {
     display: flex;
     align-items: center;
     gap: 10px;
     padding: 12px 14px;
     color: #374151;
     text-decoration: none;
     font-size: 14px;
     font-weight: 500;
     border-radius: 8px;
     transition: all .15s;
 }

 .sitemap-links li a:hover {
     background: #e8f7fc;
     color: #29b8e5;
 }

 .sitemap-links li a::before {
     content: '';
     width: 6px;
     height: 6px;
     border-radius: 50%;
     background: #29b8e5;
     flex-shrink: 0;
     opacity: .5;
     transition: opacity .15s;
 }

 .sitemap-links li a:hover::before {
     opacity: 1;
 }

 /* ── Sub-section (collapsible within a section) ─────────── */
 .sitemap-subsection {
     margin: 8px 0;
     border: 1px solid #e5e7eb;
     border-radius: 10px;
     overflow: hidden;
 }

 .sitemap-subsection-header {
     display: flex;
     align-items: center;
     gap: 10px;
     padding: 12px 16px;
     cursor: pointer;
     user-select: none;
     border: none;
     background: #f9fafb;
     width: 100%;
     text-align: left;
     font-family: inherit;
     transition: background .15s;
 }

 .sitemap-subsection-header:hover {
     background: #e8f7fc;
 }

 .sitemap-subsection-header .sub-icon {
     width: 28px;
     height: 28px;
     border-radius: 7px;
     background: #e8f7fc;
     display: flex;
     align-items: center;
     justify-content: center;
     color: #29b8e5;
     flex-shrink: 0;
 }

 .sitemap-subsection-header .sub-icon svg {
     width: 14px;
     height: 14px;
 }

 .sitemap-subsection-header .sub-title {
     font-size: 14px;
     font-weight: 600;
     color: #374151;
     flex: 1;
 }

 .sitemap-subsection-header .sub-chevron {
     width: 16px;
     height: 16px;
     color: #9ca3af;
     transition: transform .25s ease;
 }

 .sitemap-subsection.open .sub-chevron {
     transform: rotate(180deg);
     color: #29b8e5;
 }

 .sitemap-subsection-body {
     display: none;
     padding: 4px 16px 12px;
     background: #fff;
 }

 .sitemap-subsection.open .sitemap-subsection-body {
     display: block;
 }

 .sitemap-subsection-body .sitemap-links {
     grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
 }

 /* ── Grid layout for top sections ───────────────────────── */
 .sitemap-grid {
     display: grid;
     grid-template-columns: 1fr;
     gap: 0;
 }

 /* ── Responsive ─────────────────────────────────────────── */
 @media (max-width: 640px) {
     .sitemap-hero {
         padding: 48px 20px 44px;
     }

     .sitemap-hero h1 {
         font-size: 26px;
     }

     .sitemap-container {
         padding: 0 12px;
     }

     .sitemap-section-header,
     .sitemap-direct a {
         padding: 14px 16px;
     }

     .sitemap-section-body {
         padding: 8px 16px 12px;
     }

     .sitemap-links {
         grid-template-columns: 1fr;
     }
 }