@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Outfit:wght@300;400;500;600;700;800;900&display=swap');

 :root {
     --primary: #2563eb;
     --primary-light: #3b82f6;
     --primary-dark: #1d4ed8;
     --primary-50: #eff6ff;
     --primary-100: #dbeafe;
     --primary-200: #bfdbfe;
     --accent: #f59e0b;
     --accent-light: #fbbf24;
     --accent-dark: #d97706;
     --success: #10b981;
     --warning: #f59e0b;
     --danger: #ef4444;
     --white: #ffffff;
     --gray-50: #f8fafc;
     --gray-100: #f1f5f9;
     --gray-200: #e2e8f0;
     --gray-300: #cbd5e1;
     --gray-400: #94a3b8;
     --gray-500: #64748b;
     --gray-600: #475569;
     --gray-700: #334155;
     --gray-800: #1e293b;
     --gray-900: #0f172a;
     --gradient-primary: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
     --gradient-hero: linear-gradient(135deg, #0ea5e9 0%, #2563eb 50%, #7c3aed 100%);
     --gradient-warm: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
     --gradient-cool: linear-gradient(135deg, #06b6d4 0%, #3b82f6 100%);
     --gradient-sky: linear-gradient(180deg, #e0f2fe 0%, #ffffff 100%);
     --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
     --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
     --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.05);
     --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
     --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
     --shadow-glow: 0 0 30px rgba(37, 99, 235, 0.15);
     --glass-bg: rgba(255, 255, 255, 0.7);
     --glass-border: rgba(255, 255, 255, 0.5);
     --font-primary: 'Outfit', sans-serif;
     --font-body: 'Inter', sans-serif;
     --header-height: 72px;
     --container-max: 1280px;
     --radius-sm: 8px;
     --radius-md: 12px;
     --radius-lg: 16px;
     --radius-xl: 24px;
     --radius-full: 9999px;
     --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
     --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
     --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
     --transition-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
 }

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

 html {
     scroll-behavior: smooth;
     -webkit-text-size-adjust: 100%;
 }

 body {
     font-family: var(--font-body);
     font-size: 16px;
     line-height: 1.6;
     color: var(--gray-800);
     background: var(--gray-50);
     overflow-x: hidden;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
 }

 img {
     max-width: 100%;
     height: auto;
     display: block;
 }

 a {
     text-decoration: none;
     color: inherit;
     transition: color var(--transition-fast);
 }

 ul,
 ol {
     list-style: none;
 }

 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
     font-family: var(--font-primary);
     font-weight: 700;
     line-height: 1.2;
     color: var(--gray-900);
 }

 .container {
     width: 100%;
     max-width: var(--container-max);
     margin: 0 auto;
     padding: 0 24px;
 }

 .header {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     height: var(--header-height);
     background: rgba(255, 255, 255, 0.85);
     backdrop-filter: blur(20px) saturate(180%);
     -webkit-backdrop-filter: blur(20px) saturate(180%);
     border-bottom: 1px solid var(--gray-200);
     z-index: 1000;
     transition: all var(--transition-base);
 }

 .header.scrolled {
     box-shadow: var(--shadow-lg);
     background: rgba(255, 255, 255, 0.95);
 }

 .header__inner {
     display: flex;
     align-items: center;
     justify-content: space-between;
     height: 100%;
     max-width: var(--container-max);
     margin: 0 auto;
     padding: 0 24px;
 }

 .header__logo {
     display: flex;
     align-items: center;
     transition: transform var(--transition-spring);
 }

 .header__logo:hover {
     transform: scale(1.02);
 }

 .site-logo {
     height: 44px;
     width: auto;
     display: block;
     object-fit: contain;
 }

 .footer__logo {
     display: flex;
     align-items: center;
     margin-bottom: 20px;
 }

 .footer__logo .site-logo {
     height: 38px;
 }

 .nav {
     display: flex;
     align-items: center;
     gap: 4px;
 }

 .nav__item {
     position: relative;
 }

 .nav__link {
     display: flex;
     align-items: center;
     gap: 6px;
     padding: 8px 14px;
     font-family: var(--font-primary);
     font-size: 0.9rem;
     font-weight: 500;
     color: var(--gray-600);
     border-radius: var(--radius-sm);
     transition: all var(--transition-fast);
     white-space: nowrap;
 }

 .nav__link:hover,
 .nav__link.active {
     color: var(--primary);
     background: var(--primary-50);
 }

 .nav__link .arrow {
     font-size: 0.65rem;
     transition: transform var(--transition-fast);
 }

 .nav__item:hover .arrow {
     transform: rotate(180deg);
 }

 .nav__dropdown {
     position: absolute;
     top: calc(100% + 8px);
     left: 50%;
     transform: translateX(-50%) translateY(10px);
     min-width: 240px;
     background: var(--white);
     border: 1px solid var(--gray-200);
     border-radius: var(--radius-lg);
     box-shadow: var(--shadow-xl);
     padding: 8px;
     opacity: 0;
     visibility: hidden;
     transition: all var(--transition-base);
     z-index: 100;
 }

 .nav__item:hover .nav__dropdown {
     opacity: 1;
     visibility: visible;
     transform: translateX(-50%) translateY(0);
 }

 .nav__dropdown--right {
     left: auto;
     right: 0;
     transform: translateX(0) translateY(10px);
 }

 .nav__item:hover .nav__dropdown--right {
     transform: translateX(0) translateY(0);
 }

 .nav__dropdown-link {
     display: flex;
     align-items: center;
     gap: 12px;
     padding: 10px 14px;
     font-size: 0.88rem;
     font-weight: 500;
     color: var(--gray-700);
     border-radius: var(--radius-sm);
     transition: all var(--transition-fast);
 }

 .nav__dropdown-link:hover {
     background: var(--primary-50);
     color: var(--primary);
     transform: translateX(4px);
 }

 .nav__dropdown-link .icon {
     font-size: 1.2rem;
     width: 32px;
     height: 32px;
     display: flex;
     align-items: center;
     justify-content: center;
     background: var(--gray-100);
     border-radius: var(--radius-sm);
     transition: all var(--transition-fast);
 }

 .nav__dropdown-link:hover .icon {
     background: var(--primary-100);
 }

 .nav-toggle {
     display: none;
     flex-direction: column;
     gap: 5px;
     padding: 8px;
     background: none;
     border: none;
     cursor: pointer;
     z-index: 1001;
 }

 .nav-toggle span {
     width: 24px;
     height: 2.5px;
     background: var(--gray-700);
     border-radius: 2px;
     transition: all var(--transition-base);
     transform-origin: center;
 }

 .nav-toggle.open span:nth-child(1) {
     transform: rotate(45deg) translate(5px, 5px);
 }

 .nav-toggle.open span:nth-child(2) {
     opacity: 0;
 }

 .nav-toggle.open span:nth-child(3) {
     transform: rotate(-45deg) translate(5px, -5px);
 }

 .mobile-nav {
     position: fixed;
     top: var(--header-height);
     left: 0;
     right: 0;
     bottom: 0;
     background: var(--white);
     padding: 24px;
     overflow-y: auto;
     transform: translateX(100%);
     transition: transform var(--transition-slow);
     z-index: 999;
 }

 .mobile-nav.open {
     transform: translateX(0);
 }

 .mobile-nav__link {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 14px 16px;
     font-family: var(--font-primary);
     font-size: 1rem;
     font-weight: 500;
     color: var(--gray-700);
     border-radius: var(--radius-md);
     transition: all var(--transition-fast);
 }

 .mobile-nav__link:hover {
     background: var(--primary-50);
     color: var(--primary);
 }

 .mobile-nav__sub {
     padding-left: 24px;
     display: none;
 }

 .mobile-nav__sub.open {
     display: block;
 }

 .mobile-nav__sub-link {
     display: flex;
     align-items: center;
     gap: 10px;
     padding: 10px 16px;
     font-size: 0.92rem;
     color: var(--gray-600);
     border-radius: var(--radius-sm);
     transition: all var(--transition-fast);
 }

 .mobile-nav__sub-link:hover {
     background: var(--primary-50);
     color: var(--primary);
 }

 .hero {
     position: relative;
     padding: calc(var(--header-height) + 60px) 0 60px;
     background: var(--gradient-sky);
     overflow: hidden;
 }

 .hero::before {
     content: '';
     position: absolute;
     top: -50%;
     right: -20%;
     width: 600px;
     height: 600px;
     background: radial-gradient(circle, rgba(37, 99, 235, 0.08) 0%, transparent 70%);
     border-radius: 50%;
     animation: float 6s ease-in-out infinite;
 }

 .hero::after {
     content: '';
     position: absolute;
     bottom: -30%;
     left: -10%;
     width: 400px;
     height: 400px;
     background: radial-gradient(circle, rgba(124, 58, 237, 0.06) 0%, transparent 70%);
     border-radius: 50%;
     animation: float 8s ease-in-out infinite reverse;
 }

 @keyframes float {

     0%,
     100% {
         transform: translateY(0) scale(1);
     }

     50% {
         transform: translateY(-30px) scale(1.05);
     }
 }

 .hero__content {
     position: relative;
     z-index: 1;
     text-align: center;
     max-width: 800px;
     margin: 0 auto;
 }

 .hero__badge {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     padding: 6px 16px;
     background: var(--white);
     border: 1px solid var(--primary-200);
     border-radius: var(--radius-full);
     font-size: 0.85rem;
     font-weight: 600;
     color: var(--primary);
     margin-bottom: 20px;
     box-shadow: var(--shadow-sm);
     animation: fadeInDown 0.6s ease-out;
 }

 .hero__badge .pulse {
     width: 8px;
     height: 8px;
     background: var(--success);
     border-radius: 50%;
     animation: pulse 2s infinite;
 }

 @keyframes pulse {
     0% {
         box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4);
     }

     70% {
         box-shadow: 0 0 0 10px rgba(16, 185, 129, 0);
     }

     100% {
         box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
     }
 }

 .hero__title {
     font-size: clamp(2.2rem, 5vw, 3.5rem);
     font-weight: 900;
     margin-bottom: 16px;
     animation: fadeInUp 0.6s ease-out 0.1s both;
 }

 .hero__title .highlight {
     background: var(--gradient-primary);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
 }

 .hero__subtitle {
     font-size: clamp(1rem, 2vw, 1.2rem);
     color: var(--gray-500);
     max-width: 600px;
     margin: 0 auto 32px;
     animation: fadeInUp 0.6s ease-out 0.2s both;
 }

 @keyframes fadeInUp {
     from {
         opacity: 0;
         transform: translateY(20px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 @keyframes fadeInDown {
     from {
         opacity: 0;
         transform: translateY(-20px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 .map-container {
     position: relative;
     width: 100%;
     border-radius: var(--radius-xl);
     overflow: hidden;
     box-shadow: var(--shadow-2xl);
     border: 1px solid var(--gray-200);
     background: var(--white);
     animation: fadeInUp 0.8s ease-out 0.3s both;
 }

 .map-container iframe {
     width: 100%;
     height: 550px;
     border: none;
     display: block;
 }

 .map-controls {
     display: flex;
     align-items: center;
     gap: 8px;
     padding: 12px 20px;
     background: var(--white);
     border-top: 1px solid var(--gray-100);
     flex-wrap: wrap;
 }

 .map-control-btn {
     display: inline-flex;
     align-items: center;
     gap: 6px;
     padding: 8px 16px;
     font-family: var(--font-primary);
     font-size: 0.85rem;
     font-weight: 500;
     color: var(--gray-600);
     background: var(--gray-50);
     border: 1px solid var(--gray-200);
     border-radius: var(--radius-full);
     cursor: pointer;
     transition: all var(--transition-fast);
 }

 .map-control-btn:hover,
 .map-control-btn.active {
     color: var(--white);
     background: var(--primary);
     border-color: var(--primary);
     box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
 }

 .quick-nav {
     padding: 60px 0;
 }

 .quick-nav__grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
     gap: 16px;
 }

 .quick-nav__card {
     position: relative;
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 12px;
     padding: 24px 16px;
     background: var(--white);
     border: 1px solid var(--gray-200);
     border-radius: var(--radius-lg);
     text-align: center;
     cursor: pointer;
     transition: all var(--transition-base);
     overflow: hidden;
 }

 .quick-nav__card::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 3px;
     background: var(--gradient-primary);
     transform: scaleX(0);
     transition: transform var(--transition-base);
 }

 .quick-nav__card:hover {
     transform: translateY(-4px);
     box-shadow: var(--shadow-lg);
     border-color: var(--primary-200);
 }

 .quick-nav__card:hover::before {
     transform: scaleX(1);
 }

 .quick-nav__icon {
     width: 48px;
     height: 48px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.5rem;
     background: var(--primary-50);
     border-radius: var(--radius-md);
     transition: all var(--transition-base);
 }

 .quick-nav__card:hover .quick-nav__icon {
     background: var(--primary-100);
     transform: scale(1.1);
 }

 .quick-nav__label {
     font-family: var(--font-primary);
     font-size: 0.92rem;
     font-weight: 600;
     color: var(--gray-700);
 }

 .quick-nav__desc {
     font-size: 0.8rem;
     color: var(--gray-400);
 }

 .section {
     padding: 60px 0;
 }

 .section--alt {
     background: var(--white);
 }

 .section__header {
     text-align: center;
     margin-bottom: 40px;
 }

 .section__tag {
     display: inline-flex;
     align-items: center;
     gap: 6px;
     padding: 4px 12px;
     font-size: 0.8rem;
     font-weight: 600;
     color: var(--primary);
     background: var(--primary-50);
     border-radius: var(--radius-full);
     text-transform: uppercase;
     letter-spacing: 0.5px;
     margin-bottom: 12px;
 }

 .section__title {
     font-size: clamp(1.6rem, 3vw, 2.2rem);
     margin-bottom: 12px;
 }

 .section__subtitle {
     font-size: 1rem;
     color: var(--gray-500);
     max-width: 600px;
     margin: 0 auto;
 }

 .features-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
     gap: 24px;
 }

 .feature-card {
     padding: 32px;
     background: var(--white);
     border: 1px solid var(--gray-200);
     border-radius: var(--radius-lg);
     transition: all var(--transition-base);
 }

 .feature-card:hover {
     transform: translateY(-4px);
     box-shadow: var(--shadow-lg);
 }

 .feature-card__icon {
     width: 56px;
     height: 56px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.6rem;
     border-radius: var(--radius-md);
     margin-bottom: 16px;
 }

 .feature-card__icon--blue {
     background: #eff6ff;
     color: #2563eb;
 }

 .feature-card__icon--purple {
     background: #f5f3ff;
     color: #7c3aed;
 }

 .feature-card__icon--cyan {
     background: #ecfeff;
     color: #06b6d4;
 }

 .feature-card__icon--amber {
     background: #fffbeb;
     color: #d97706;
 }

 .feature-card__icon--green {
     background: #f0fdf4;
     color: #16a34a;
 }

 .feature-card__icon--red {
     background: #fef2f2;
     color: #ef4444;
 }

 .feature-card__title {
     font-size: 1.15rem;
     font-weight: 700;
     margin-bottom: 8px;
 }

 .feature-card__text {
     font-size: 0.92rem;
     color: var(--gray-500);
     line-height: 1.6;
 }

 .content-section {
     max-width: 900px;
     margin: 0 auto;
     padding: 40px 24px;
 }

 .content-section h2 {
     font-size: 1.6rem;
     margin: 32px 0 12px;
     padding-bottom: 8px;
     border-bottom: 2px solid var(--primary-100);
 }

 .content-section h3 {
     font-size: 1.2rem;
     margin: 24px 0 8px;
     color: var(--gray-700);
 }

 .content-section p {
     margin-bottom: 16px;
     color: var(--gray-600);
     line-height: 1.8;
 }

 .content-section ul,
 .content-section ol {
     margin-bottom: 16px;
     padding-left: 24px;
 }

 .content-section li {
     margin-bottom: 8px;
     color: var(--gray-600);
     list-style: disc;
 }

 .content-section ol li {
     list-style: decimal;
 }

 .faq-list {
     max-width: 800px;
     margin: 0 auto;
 }

 .faq-item {
     background: var(--white);
     border: 1px solid var(--gray-200);
     border-radius: var(--radius-md);
     margin-bottom: 12px;
     overflow: hidden;
     transition: all var(--transition-base);
 }

 .faq-item:hover {
     border-color: var(--primary-200);
 }

 .faq-question {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 18px 24px;
     font-family: var(--font-primary);
     font-size: 1rem;
     font-weight: 600;
     color: var(--gray-800);
     background: none;
     border: none;
     width: 100%;
     text-align: left;
     cursor: pointer;
     transition: all var(--transition-fast);
 }

 .faq-question:hover {
     color: var(--primary);
 }

 .faq-question .chevron {
     font-size: 0.8rem;
     transition: transform var(--transition-base);
     flex-shrink: 0;
     margin-left: 16px;
 }

 .faq-item.open .faq-question .chevron {
     transform: rotate(180deg);
 }

 .faq-answer {
     max-height: 0;
     overflow: hidden;
     transition: max-height var(--transition-slow);
 }

 .faq-answer__inner {
     padding: 0 24px 18px;
     color: var(--gray-600);
     line-height: 1.7;
     font-size: 0.95rem;
 }

 .footer {
     background: var(--gray-900);
     color: var(--gray-300);
     padding: 60px 0 0;
 }

 .footer__grid {
     display: grid;
     grid-template-columns: 2fr 1fr 1fr 1fr;
     gap: 40px;
     margin-bottom: 40px;
 }

 .footer__brand {
     max-width: 300px;
 }

 .footer__logo {
     font-family: var(--font-primary);
     font-size: 1.5rem;
     font-weight: 800;
     color: var(--white);
     margin-bottom: 12px;
     display: flex;
     align-items: center;
     gap: 10px;
 }

 .footer__logo-icon {
     width: 36px;
     height: 36px;
     background: var(--gradient-primary);
     border-radius: var(--radius-sm);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1rem;
 }

 .footer__desc {
     font-size: 0.9rem;
     line-height: 1.7;
     color: var(--gray-400);
 }

 .footer__heading {
     font-family: var(--font-primary);
     font-size: 0.9rem;
     font-weight: 700;
     color: var(--white);
     text-transform: uppercase;
     letter-spacing: 0.5px;
     margin-bottom: 16px;
 }

 .footer__list a {
     display: block;
     padding: 6px 0;
     font-size: 0.9rem;
     color: var(--gray-400);
     transition: all var(--transition-fast);
 }

 .footer__list a:hover {
     color: var(--white);
     transform: translateX(4px);
 }

 .footer__bottom {
     border-top: 1px solid rgba(255, 255, 255, 0.1);
     padding: 20px 0;
     display: flex;
     align-items: center;
     justify-content: space-between;
     font-size: 0.85rem;
     color: var(--gray-500);
 }

 .footer__social {
     display: flex;
     gap: 12px;
 }

 .footer__social a {
     width: 36px;
     height: 36px;
     display: flex;
     align-items: center;
     justify-content: center;
     background: rgba(255, 255, 255, 0.08);
     border-radius: var(--radius-sm);
     color: var(--gray-400);
     transition: all var(--transition-fast);
     font-size: 1.1rem;
 }

 .footer__social a:hover {
     background: var(--primary);
     color: var(--white);
     transform: translateY(-2px);
 }

 .page-content {
     padding-top: var(--header-height);
     min-height: 100vh;
 }

 .page-hero {
     padding: 60px 0 40px;
     background: var(--gradient-sky);
     text-align: center;
     position: relative;
     overflow: hidden;
 }

 .page-hero::before {
     content: '';
     position: absolute;
     top: 0;
     right: 0;
     width: 300px;
     height: 300px;
     background: radial-gradient(circle, rgba(37, 99, 235, 0.06) 0%, transparent 70%);
     border-radius: 50%;
 }

 .page-hero__icon {
     font-size: 3rem;
     margin-bottom: 16px;
     display: inline-block;
     animation: fadeInDown 0.5s ease-out;
 }

 .page-hero__title {
     font-size: clamp(1.8rem, 4vw, 2.5rem);
     margin-bottom: 12px;
     animation: fadeInUp 0.5s ease-out 0.1s both;
 }

 .page-hero__desc {
     font-size: 1.05rem;
     color: var(--gray-500);
     max-width: 600px;
     margin: 0 auto;
     animation: fadeInUp 0.5s ease-out 0.2s both;
 }

 .breadcrumb {
     display: flex;
     align-items: center;
     gap: 8px;
     padding: 16px 24px;
     font-size: 0.85rem;
     color: var(--gray-400);
 }

 .breadcrumb a {
     color: var(--primary);
 }

 .breadcrumb a:hover {
     text-decoration: underline;
 }

 .breadcrumb .sep {
     color: var(--gray-300);
 }

 .info-cards {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
     gap: 20px;
 }

 .info-card {
     background: var(--white);
     border: 1px solid var(--gray-200);
     border-radius: var(--radius-lg);
     overflow: hidden;
     transition: all var(--transition-base);
     cursor: pointer;
 }

 .info-card:hover {
     transform: translateY(-4px);
     box-shadow: var(--shadow-lg);
 }

 .info-card__img {
     width: 100%;
     height: 180px;
     object-fit: cover;
 }

 .info-card__body {
     padding: 20px;
 }

 .info-card__tag {
     display: inline-block;
     padding: 3px 10px;
     font-size: 0.75rem;
     font-weight: 600;
     color: var(--primary);
     background: var(--primary-50);
     border-radius: var(--radius-full);
     margin-bottom: 10px;
 }

 .info-card__title {
     font-size: 1.1rem;
     font-weight: 700;
     margin-bottom: 8px;
 }

 .info-card__text {
     font-size: 0.88rem;
     color: var(--gray-500);
     line-height: 1.6;
 }

 .data-table {
     width: 100%;
     border-collapse: separate;
     border-spacing: 0;
     border: 1px solid var(--gray-200);
     border-radius: var(--radius-md);
     overflow: hidden;
 }

 .data-table th {
     padding: 14px 20px;
     font-family: var(--font-primary);
     font-size: 0.85rem;
     font-weight: 600;
     text-align: left;
     color: var(--gray-600);
     background: var(--gray-50);
     border-bottom: 1px solid var(--gray-200);
 }

 .data-table td {
     padding: 12px 20px;
     font-size: 0.9rem;
     color: var(--gray-700);
     border-bottom: 1px solid var(--gray-100);
 }

 .data-table tr:last-child td {
     border-bottom: none;
 }

 .data-table tr:hover td {
     background: var(--primary-50);
 }

 .btn {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     padding: 12px 24px;
     font-family: var(--font-primary);
     font-size: 0.92rem;
     font-weight: 600;
     border: none;
     border-radius: var(--radius-full);
     cursor: pointer;
     transition: all var(--transition-fast);
 }

 .btn--primary {
     color: var(--white);
     background: var(--gradient-primary);
     box-shadow: 0 4px 15px rgba(37, 99, 235, 0.3);
 }

 .btn--primary:hover {
     transform: translateY(-2px);
     box-shadow: 0 6px 20px rgba(37, 99, 235, 0.4);
 }

 .btn--outline {
     color: var(--primary);
     background: transparent;
     border: 2px solid var(--primary-200);
 }

 .btn--outline:hover {
     background: var(--primary-50);
     border-color: var(--primary);
 }

 .scroll-top {
     position: fixed;
     bottom: 24px;
     right: 24px;
     width: 44px;
     height: 44px;
     display: flex;
     align-items: center;
     justify-content: center;
     background: var(--primary);
     color: var(--white);
     border-radius: var(--radius-full);
     border: none;
     cursor: pointer;
     box-shadow: var(--shadow-lg);
     opacity: 0;
     visibility: hidden;
     transform: translateY(10px);
     transition: all var(--transition-base);
     z-index: 999;
     font-size: 1.1rem;
 }

 .scroll-top.visible {
     opacity: 1;
     visibility: visible;
     transform: translateY(0);
 }

 .scroll-top:hover {
     background: var(--primary-dark);
     transform: translateY(-3px);
 }

 .page-loader {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: var(--white);
     display: flex;
     align-items: center;
     justify-content: center;
     z-index: 9999;
     transition: opacity 0.4s ease;
 }

 .page-loader.hidden {
     opacity: 0;
     pointer-events: none;
 }

 .loader-spinner {
     width: 40px;
     height: 40px;
     border: 3px solid var(--gray-200);
     border-top-color: var(--primary);
     border-radius: 50%;
     animation: spin 0.8s linear infinite;
 }

 @keyframes spin {
     to {
         transform: rotate(360deg);
     }
 }

 @media (max-width:1024px) {
     .nav {
         display: none;
     }

     .nav-toggle {
         display: flex;
     }

     .footer__grid {
         grid-template-columns: 1fr 1fr;
         gap: 32px;
     }

     .map-container iframe {
         height: 400px;
     }

     .windy-embed iframe {
         height: 450px;
     }

     .section {
         padding: 48px 0;
     }

     .quick-nav {
         padding: 48px 0;
     }

     .features-grid {
         grid-template-columns: repeat(2, 1fr);
     }
 }

 @media (max-width:768px) {
     :root {
         --header-height: 60px;
     }

     .header__inner {
         padding: 0 16px;
     }

     .header__logo {
         font-size: 1.25rem;
     }

     .header__logo-icon {
         width: 34px;
         height: 34px;
         font-size: 1rem;
     }

     .hero {
         padding: calc(var(--header-height) + 32px) 0 32px;
     }

     .hero__title {
         font-size: 1.8rem;
     }

     .hero__subtitle {
         font-size: 0.95rem;
         margin-bottom: 24px;
     }

     .hero::before {
         width: 300px;
         height: 300px;
         right: -30%;
     }

     .hero::after {
         width: 200px;
         height: 200px;
     }

     .footer__grid {
         grid-template-columns: 1fr;
         gap: 28px;
     }

     .footer__brand {
         max-width: 100%;
     }

     .footer {
         padding: 40px 0 0;
     }

     .footer__bottom {
         flex-direction: column;
         gap: 12px;
         text-align: center;
     }

     .quick-nav__grid {
         grid-template-columns: repeat(2, 1fr);
         gap: 10px;
     }

     .quick-nav__card {
         padding: 18px 12px;
         gap: 8px;
     }

     .quick-nav__icon {
         width: 40px;
         height: 40px;
         font-size: 1.25rem;
     }

     .quick-nav__label {
         font-size: 0.82rem;
     }

     .features-grid {
         grid-template-columns: 1fr;
         gap: 16px;
     }

     .feature-card {
         padding: 24px;
     }

     .map-container iframe,
     .windy-embed iframe {
         height: 350px;
     }

     .map-controls {
         justify-content: center;
         padding: 10px 12px;
     }

     .info-cards {
         grid-template-columns: 1fr;
     }

     .section {
         padding: 40px 0;
     }

     .section__header {
         margin-bottom: 28px;
     }

     .section__title {
         font-size: 1.5rem;
     }

     .page-hero {
         padding: 40px 0 28px;
     }

     .page-hero__icon {
         font-size: 2.5rem;
         margin-bottom: 12px;
     }

     .page-hero__title {
         font-size: 1.6rem;
     }

     .page-hero__desc {
         font-size: 0.95rem;
         padding: 0 8px;
     }

     .content-section {
         padding: 28px 16px;
     }

     .content-section h2 {
         font-size: 1.3rem;
         margin: 24px 0 10px;
     }

     .content-section h3 {
         font-size: 1.1rem;
         margin: 20px 0 8px;
     }

     .breadcrumb {
         padding: 12px 16px;
         font-size: 0.8rem;
         flex-wrap: wrap;
     }

     .data-table {
         display: block;
         overflow-x: auto;
         -webkit-overflow-scrolling: touch;
         font-size: 0.85rem;
     }

     .data-table th,
     .data-table td {
         padding: 10px 14px;
         white-space: nowrap;
     }

     .faq-question {
         padding: 14px 16px;
         font-size: 0.92rem;
     }

     .faq-answer__inner {
         padding: 0 16px 14px;
         font-size: 0.9rem;
     }

     .map-tabs {
         gap: 3px;
         padding: 6px;
         margin-bottom: 14px;
         scrollbar-width: none;
     }

     .map-tab {
         padding: 8px 14px;
         font-size: 0.82rem;
         gap: 4px;
     }

     .stats-bar {
         gap: 10px;
         padding: 12px 0;
     }

     .stat-item {
         padding: 10px 14px;
         gap: 8px;
     }

     .stat-item__value {
         font-size: 1.1rem;
     }

     .stat-item__label {
         font-size: 0.7rem;
     }

     .cookie-banner__inner {
         flex-direction: column;
         text-align: center;
     }

     .scroll-top {
         bottom: 16px;
         right: 16px;
         width: 40px;
         height: 40px;
         font-size: 1rem;
     }
 }

 @media (max-width:480px) {
     .container {
         padding: 0 12px;
     }

     .hero {
         padding: calc(var(--header-height) + 24px) 0 24px;
     }

     .hero__badge {
         font-size: 0.78rem;
         padding: 5px 12px;
         margin-bottom: 14px;
     }

     .hero__title {
         font-size: 1.5rem;
         margin-bottom: 10px;
     }

     .hero__subtitle {
         font-size: 0.88rem;
         margin-bottom: 20px;
     }

     .quick-nav__grid {
         grid-template-columns: 1fr 1fr;
         gap: 8px;
     }

     .quick-nav__card {
         padding: 14px 8px;
         gap: 6px;
     }

     .quick-nav__icon {
         width: 36px;
         height: 36px;
         font-size: 1.1rem;
     }

     .quick-nav__label {
         font-size: 0.78rem;
     }

     .map-container iframe,
     .windy-embed iframe {
         height: 300px;
     }

     .page-hero {
         padding: 32px 0 20px;
     }

     .page-hero__icon {
         font-size: 2rem;
     }

     .page-hero__title {
         font-size: 1.35rem;
     }

     .page-hero__desc {
         font-size: 0.88rem;
     }

     .content-section h2 {
         font-size: 1.15rem;
     }

     .content-section p {
         font-size: 0.9rem;
     }

     .content-section li {
         font-size: 0.9rem;
     }

     .footer__logo {
         font-size: 1.25rem;
     }

     .footer__heading {
         font-size: 0.85rem;
         margin-bottom: 12px;
     }

     .footer__list a {
         font-size: 0.85rem;
     }

     .section {
         padding: 32px 0;
     }

     .section__header {
         margin-bottom: 20px;
     }

     .section__title {
         font-size: 1.3rem;
     }

     .section__subtitle {
         font-size: 0.88rem;
     }

     .feature-card {
         padding: 20px;
     }

     .feature-card__title {
         font-size: 1.05rem;
     }

     .feature-card__text {
         font-size: 0.85rem;
     }

     .map-tab {
         padding: 7px 10px;
         font-size: 0.78rem;
     }
 }

 @media (max-width:360px) {
     .header__logo {
         font-size: 1.1rem;
         gap: 6px;
     }

     .header__logo-icon {
         width: 30px;
         height: 30px;
         font-size: 0.9rem;
     }

     .hero__title {
         font-size: 1.3rem;
     }

     .page-hero__title {
         font-size: 1.2rem;
     }

     .quick-nav__grid {
         gap: 6px;
     }

     .quick-nav__card {
         padding: 12px 6px;
     }

     .quick-nav__label {
         font-size: 0.72rem;
     }

     .map-container iframe,
     .windy-embed iframe {
         height: 260px;
     }
 }

 .mobile-nav {
     -ms-overflow-style: none;
     scrollbar-width: none;
 }

 .mobile-nav::-webkit-scrollbar {
     display: none;
 }

 .mobile-nav__link {
     cursor: pointer;
     -webkit-tap-highlight-color: transparent;
     user-select: none;
 }

 .mobile-nav__link .arrow {
     font-size: 0.7rem;
     transition: transform var(--transition-base);
     flex-shrink: 0;
 }

 .mobile-nav__sub {
     overflow: hidden;
     max-height: 0;
     transition: max-height var(--transition-slow) ease;
     display: block;
 }

 .mobile-nav__sub.open {
     max-height: 600px;
 }

 @media (max-width:1024px) {
     .mobile-nav__link {
         min-height: 48px;
         padding: 12px 16px;
     }

     .mobile-nav__sub-link {
         min-height: 44px;
         padding: 10px 16px;
     }
 }

 body.nav-open {
     overflow: hidden;
 }

 .fade-in {
     opacity: 0;
     transform: translateY(20px);
     transition: all 0.6s ease-out;
 }

 .fade-in.visible {
     opacity: 1;
     transform: translateY(0);
 }

 .slide-in-left {
     opacity: 0;
     transform: translateX(-30px);
     transition: all 0.6s ease-out;
 }

 .slide-in-left.visible {
     opacity: 1;
     transform: translateX(0);
 }

 .slide-in-right {
     opacity: 0;
     transform: translateX(30px);
     transition: all 0.6s ease-out;
 }

 .slide-in-right.visible {
     opacity: 1;
     transform: translateX(0);
 }

 .scale-in {
     opacity: 0;
     transform: scale(0.95);
     transition: all 0.5s ease-out;
 }

 .scale-in.visible {
     opacity: 1;
     transform: scale(1);
 }

 .cookie-banner {
     position: fixed;
     bottom: 0;
     left: 0;
     right: 0;
     background: var(--white);
     border-top: 1px solid var(--gray-200);
     box-shadow: var(--shadow-2xl);
     padding: 20px;
     z-index: 9998;
     transform: translateY(100%);
     transition: transform var(--transition-slow);
 }

 .cookie-banner.visible {
     transform: translateY(0);
 }

 .cookie-banner__inner {
     max-width: var(--container-max);
     margin: 0 auto;
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 24px;
 }

 .cookie-banner__text {
     font-size: 0.9rem;
     color: var(--gray-600);
 }

 .cookie-banner__actions {
     display: flex;
     gap: 12px;
     flex-shrink: 0;
 }

 .stats-bar {
     display: flex;
     gap: 24px;
     padding: 20px 0;
     justify-content: center;
     flex-wrap: wrap;
 }

 .stat-item {
     display: flex;
     align-items: center;
     gap: 12px;
     padding: 12px 20px;
     background: var(--white);
     border: 1px solid var(--gray-200);
     border-radius: var(--radius-md);
     transition: all var(--transition-fast);
 }

 .stat-item:hover {
     box-shadow: var(--shadow-md);
     border-color: var(--primary-200);
 }

 .stat-item__icon {
     font-size: 1.5rem;
 }

 .stat-item__value {
     font-family: var(--font-primary);
     font-size: 1.3rem;
     font-weight: 700;
     color: var(--gray-900);
 }

 .stat-item__label {
     font-size: 0.78rem;
     color: var(--gray-400);
     text-transform: uppercase;
     letter-spacing: 0.5px;
 }

 .windy-embed {
     position: relative;
     border-radius: var(--radius-xl);
     overflow: hidden;
     box-shadow: var(--shadow-2xl);
     border: 1px solid var(--gray-200);
 }

 .windy-embed iframe {
     width: 100%;
     height: 460px;
     border: none;
     display: block;
 }

 .map-tabs {
     display: flex;
     gap: 4px;
     padding: 8px;
     background: var(--gray-100);
     border-radius: var(--radius-lg);
     margin-bottom: 20px;
     overflow-x: auto;
     -webkit-overflow-scrolling: touch;
     scrollbar-width: none;
 }

 .map-tabs::-webkit-scrollbar {
     display: none;
 }

 .map-tab {
     display: inline-flex;
     align-items: center;
     gap: 6px;
     padding: 10px 18px;
     font-family: var(--font-primary);
     font-size: 0.88rem;
     font-weight: 500;
     color: var(--gray-600);
     background: transparent;
     border: none;
     border-radius: var(--radius-md);
     cursor: pointer;
     white-space: nowrap;
     transition: all var(--transition-fast);
     -webkit-tap-highlight-color: transparent;
 }

 .map-tab:hover {
     color: var(--gray-800);
     background: var(--white);
 }

 .turbo-progress-bar {
     height: 3px;
     background: var(--gradient-primary);
     box-shadow: 0 0 10px rgba(37, 99, 235, 0.5);
     z-index: 10001;
 }

 /* Ensure the page-loader doesn't flicker too much on fast transitions */
 .page-loader {
     transition: opacity 0.3s ease, visibility 0.3s ease;
 }