/* Dark Professional Theme */
* {margin: 0;padding: 0;box-sizing: border-box;touch-action: manipulation;}
html {touch-action: manipulation;}
body {font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;line-height: 1.6;color: #e0e0e0;background: #0d0d0d;overflow-x: hidden;min-height: 100vh;display: flex;flex-direction: column;}
main {flex: 1;}
.header {position: fixed;top: 0;width: 100%;background: rgba(13, 13, 13, 0.95);backdrop-filter: blur(10px);box-shadow: 0 2px 20px rgba(0,212,255,0.1);z-index: 1000;padding: 20px 0;border-bottom: 1px solid rgba(0,212,255,0.1);}
.header-container {max-width: 1200px;margin: 0 auto;padding: 0 30px;display: flex;justify-content: space-between;align-items: center;gap: 20px;}
.navbar {max-width: 1200px;margin: 0 auto;padding: 0 30px;display: flex;justify-content: space-between;align-items: center;position: relative;z-index: 1001;}
.nav-container {max-width: 1200px;margin: 0 auto;padding: 0 30px;display: flex;justify-space: space-between;align-items: center;position: relative;z-index: 1001;}
.logo {font-size: 28px;font-weight: 800;background: linear-gradient(135deg, #00d4ff 0%, #0066ff 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text;text-decoration: none;transition: transform 0.3s;min-width: max-content;flex-shrink: 0;}
.logo a {color: inherit;text-decoration: none;}
.logo:hover {transform: scale(1.05);}
.nav-links {display: flex;flex: 1;justify-content: center;}
.nav-links ul {display: flex;flex-direction: row;gap: 30px;list-style: none;margin: 0;padding: 0;}
.nav-links li {display: inline-block;position: relative;}
.nav-links a {color: #b0b0b0;text-decoration: none;font-weight: 500;transition: color 0.3s;position: relative;white-space: nowrap;}
.nav-links a:hover {color: #00d4ff;}
.nav-links a::after {content: '';position: absolute;bottom: -5px;left: 0;width: 0;height: 2px;background: linear-gradient(135deg, #00d4ff 0%, #0066ff 100%);transition: width 0.3s;}
.nav-links a:hover::after {width: 100%;}
.nav-links .dropdown-menu {display: none;position: absolute;top: 100%;left: 0;background: #1a1a1a;min-width: 200px;list-style: none;padding: 8px 0;margin: 0;box-shadow: 0 4px 12px rgba(0,212,255,0.2);border-radius: 8px;z-index: 1000;border: 1px solid rgba(0,212,255,0.1);}
.nav-links li.has-dropdown {position: relative;}
.nav-links li.has-dropdown::before {content: '';position: absolute;top: 100%;left: 0;right: 0;height: 10px;background: transparent;z-index: 999;}
.nav-links li.has-dropdown > a::after {content: ' ▼';font-size: 10px;margin-left: 5px;}
.nav-links li.has-dropdown:hover > .dropdown-menu,.dropdown-menu:hover {display: block;}
.dropdown-menu li {padding: 0;display: block;}
.dropdown-menu a {display: block;padding: 10px 20px;color: #e0e0e0 !important;text-decoration: none;white-space: nowrap;}
.dropdown-menu a:hover {background: #2a2a2a;color: #00d4ff !important;}
.dropdown-menu a::after {display: none !important;}
.language-selector {position: relative;flex-shrink: 0;}
.lang-button {display: flex;align-items: center;gap: 8px;padding: 8px 16px;background: #1a1a1a;border: 1px solid rgba(0,212,255,0.2);border-radius: 8px;cursor: pointer;font-size: 14px;font-weight: 500;color: #b0b0b0;transition: all 0.3s;}
.lang-button:hover {border-color: #00d4ff;background: #2a2a2a;}
.globe-icon {font-size: 18px;}
.dropdown-arrow {font-size: 10px;transition: transform 0.3s;}
.lang-dropdown {position: absolute;top: 100%;right: 0;margin-top: 8px;background: #1a1a1a;border: 1px solid rgba(0,212,255,0.2);border-radius: 8px;box-shadow: 0 4px 12px rgba(0,0,0,0.3);min-width: 150px;display: none;flex-direction: column;z-index: 1001;}
.lang-dropdown.show {display: flex;}
.lang-option {padding: 12px 16px;color: #b0b0b0;text-decoration: none;transition: all 0.3s;border-bottom: 1px solid rgba(0,212,255,0.1);}
.lang-option:last-child {border-bottom: none;}
.lang-option:hover {background: #2a2a2a;color: #00d4ff;}
.lang-option.active {background: rgba(0,212,255,0.1);color: #00d4ff;font-weight: 600;}
.hamburger {display: none;flex-direction: column;cursor: pointer;gap: 6px;padding: 10px;border-radius: 8px;transition: background 0.3s;z-index: 1002;position: relative;flex-shrink: 0;}
.hamburger:active {background: rgba(0, 212, 255, 0.1);}
.hamburger span {width: 24px;height: 3px;background: #00d4ff;border-radius: 2px;transition: all 0.3s ease;display: block;}
.hamburger.active span:nth-child(1) {transform: rotate(45deg) translate(8px, 8px);}
.hamburger.active span:nth-child(2) {opacity: 0;}
.hamburger.active span:nth-child(3) {transform: rotate(-45deg) translate(7px, -7px);}
.mobile-menu {display: none;position: fixed;top: 70px;left: 0;width: 100%;height: calc(100vh - 70px);background: #0d0d0d;flex-direction: column;padding: 20px 0;max-height: 0;overflow: hidden;transition: max-height 0.3s ease;z-index: 999;box-shadow: 0 5px 15px rgba(0,212,255,0.1);border-top: 1px solid rgba(0,212,255,0.1);}
.mobile-menu.active {max-height: calc(100vh - 70px);}
.mobile-menu nav {width: 100%;}
.mobile-menu ul {list-style: none;margin: 0;padding: 0;}
.mobile-menu li {display: block;}
.mobile-menu a {padding: 15px 30px;color: #b0b0b0;text-decoration: none;font-weight: 500;border-bottom: 1px solid rgba(0,212,255,0.05);transition: all 0.3s;display: block;}
.mobile-menu a:hover,.mobile-menu a:active {background: #1a1a1a;color: #00d4ff;padding-left: 50px;}
.mobile-menu a:last-child {border-bottom: none;}
.mobile-menu ul ul {padding-left: 20px;}
.mobile-menu ul ul a {font-size: 14px;padding: 12px 30px;}
.cta-btn {padding: 12px 28px;background: linear-gradient(135deg, #00d4ff 0%, #0066ff 100%);color: white;border: none;border-radius: 8px;font-weight: 600;cursor: pointer;transition: all 0.3s;text-decoration: none;display: inline-block;}
.cta-btn:hover {transform: translateY(-2px);box-shadow: 0 8px 20px rgba(0, 212, 255, 0.3);}
.main-content {margin-top: 80px;min-height: calc(100vh - 80px);}
.container {max-width: 1200px;margin: 0 auto;padding: 0 30px;}
.hero-slider {position: relative;height: 100vh;margin-top: 80px;overflow: hidden;background: #000;}
.slides-container {position: relative;height: 100%;}
.slide {position: absolute;top: 0;left: 0;width: 100%;height: 100%;opacity: 0;transition: opacity 1s ease-in-out;display: flex;align-items: center;justify-content: center;}
.slide.active {opacity: 1;}
.slide-bg {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-size: cover;background-position: center;z-index: 1;}
.slide-overlay {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: linear-gradient(135deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 212, 255, 0.2) 100%);z-index: 2;}
.slide-content {position: relative;z-index: 3;text-align: center;color: white;max-width: 800px;padding: 0 20px;}
.slide-title {font-size: 64px;font-weight: 800;margin-bottom: 20px;line-height: 1.1;text-shadow: 0 4px 20px rgba(0,212,255,0.3);}
.slide-subtitle {font-size: 24px;margin-bottom: 40px;opacity: 0.95;line-height: 1.5;}
.slide-button {display: inline-block;padding: 16px 40px;background: linear-gradient(135deg, #00d4ff 0%, #0066ff 100%);color: white;text-decoration: none;border-radius: 12px;font-weight: 600;font-size: 18px;transition: all 0.3s;box-shadow: 0 10px 30px rgba(0, 212, 255, 0.4);}
.slide-button:hover {transform: translateY(-3px);box-shadow: 0 15px 40px rgba(0, 212, 255, 0.5);}
.slider-controls {position: absolute;bottom: 40px;left: 50%;transform: translateX(-50%);display: flex;gap: 20px;z-index: 4;}
.slider-prev,.slider-next {width: 50px;height: 50px;background: rgba(0, 212, 255, 0.2);backdrop-filter: blur(10px);border: 2px solid rgba(0, 212, 255, 0.3);border-radius: 50%;color: white;font-size: 24px;cursor: pointer;transition: all 0.3s;display: flex;align-items: center;justify-content: center;}
.slider-prev:hover,.slider-next:hover {background: rgba(0, 212, 255, 0.3);transform: scale(1.1);}
.slider-dots {position: absolute;bottom: 110px;left: 50%;transform: translateX(-50%);display: flex;gap: 12px;z-index: 4;}
.dot {width: 12px;height: 12px;border-radius: 50%;background: rgba(0, 212, 255, 0.4);border: none;cursor: pointer;transition: all 0.3s;}
.dot.active {background: #00d4ff;width: 40px;border-radius: 6px;}
.page-title {font-size: 48px;font-weight: 800;color: #e0e0e0;margin: 60px 0 40px;text-align: center;}
.content {max-width: 900px;margin: 0 auto;padding: 40px 0;line-height: 1.8;}
.content h2 {font-size: 32px;font-weight: 700;color: #e0e0e0;margin: 40px 0 20px;}
.content h3 {font-size: 24px;font-weight: 600;color: #d0d0d0;margin: 30px 0 15px;}
.content p {margin-bottom: 20px;color: #b0b0b0;}
.content ul,.content ol {margin: 20px 0;padding-left: 30px;}
.content li {margin-bottom: 10px;color: #b0b0b0;}
.content a {color: #00d4ff;text-decoration: none;transition: color 0.3s;}
.content a:hover {color: #00b8e6;text-decoration: underline;}
.content img {max-width: 100%;height: auto;border-radius: 12px;margin: 30px 0;box-shadow: 0 10px 30px rgba(0,212,255,0.2);}
.features-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));gap: 30px;margin: 60px 0;}
.feature-card {padding: 30px;background: #1a1a1a;border-radius: 16px;box-shadow: 0 4px 20px rgba(0,0,0,0.3);transition: all 0.3s;border: 1px solid rgba(0,212,255,0.1);}
.feature-card:hover {transform: translateY(-5px);box-shadow: 0 8px 30px rgba(0,212,255,0.2);border-color: rgba(0,212,255,0.3);}
.feature-icon {font-size: 40px;margin-bottom: 20px;display: block;}
.feature-card h3 {font-size: 20px;font-weight: 700;color: #e0e0e0;margin-bottom: 15px;}
.feature-card p {color: #b0b0b0;line-height: 1.6;}
.footer {background: #000;color: white;padding: 60px 0 30px;margin-top: 80px;border-top: 1px solid rgba(0,212,255,0.1);}
.footer-content {max-width: 1200px;margin: 0 auto;padding: 0 30px;}
.footer-grid {display: grid;grid-template-columns: repeat(4, 1fr);gap: 40px;margin-bottom: 40px;}
.footer-col h3 {font-size: 18px;font-weight: 700;margin-bottom: 20px;color: white;}
.footer-col p {color: #b0b0b0;margin-bottom: 15px;line-height: 1.6;}
.footer-col ul {list-style: none;}
.footer-col li {margin-bottom: 12px;}
.footer-col a {color: #b0b0b0;text-decoration: none;transition: color 0.3s;}
.footer-col a:hover {color: #00d4ff;}
.social-links {display: flex;gap: 15px;}
.social-links a {font-size: 24px;transition: transform 0.3s;}
.social-links a:hover {transform: scale(1.2);}
.footer-bottom {padding-top: 30px;border-top: 1px solid rgba(0,212,255,0.1);text-align: center;color: #b0b0b0;}
.badge-container {margin-top: 20px;}
.made-with-badge {display: inline-flex;align-items: center;gap: 8px;padding: 8px 16px;background: rgba(0, 212, 255, 0.1);border: 1px solid rgba(0, 212, 255, 0.2);border-radius: 8px;transition: all 0.3s;}
.made-with-badge:hover {background: rgba(0, 212, 255, 0.15);border-color: rgba(0, 212, 255, 0.3);transform: translateY(-2px);}
.badge-icon {font-size: 18px;}
.badge-text {font-size: 14px;color: #b0b0b0;}

/* Hero Simple for Featured Images */
.hero-simple {position: relative;height: 60vh;min-height: 400px;margin-top: 80px;overflow: hidden;display: flex;align-items: center;justify-content: center;}
.hero-simple .hero-bg {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-size: cover;background-position: center;z-index: 1;}
.hero-simple .hero-overlay {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: linear-gradient(135deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.4) 100%);z-index: 2;}
.hero-simple .hero-content {position: relative;z-index: 3;text-align: center;color: white;max-width: 800px;padding: 0 20px;}
.hero-simple .hero-content h1 {font-size: 48px;font-weight: 800;margin-bottom: 20px;text-shadow: 0 4px 20px rgba(0,0,0,0.5);}
.hero-simple .hero-subtitle {font-size: 20px;opacity: 0.95;text-shadow: 0 2px 10px rgba(0,0,0,0.5);}

@media (max-width: 992px) {
    .nav-links {display: none;}
    .hamburger {display: flex;}
    .mobile-menu {display: flex;}
    .footer-grid {grid-template-columns: repeat(2, 1fr);}
}
@media (max-width: 768px) {
    .header {padding: 15px 0;}
    .header-container,.nav-container {padding: 0 15px;}
    .logo {font-size: 24px;}
    .hero-slider {margin-top: 70px;height: 80vh;}
    .slide-title {font-size: 40px;}
    .slide-subtitle {font-size: 18px;}
    .page-title {font-size: 32px;margin: 40px 0 30px;}
    .content h2 {font-size: 28px;}
    .content h3 {font-size: 20px;}
    .features-grid {grid-template-columns: 1fr;gap: 20px;}
    .footer-grid {grid-template-columns: 1fr;gap: 30px;}
    .container {padding: 0 15px;
    .hero-simple {height: 50vh;min-height: 300px;margin-top: 70px;}
    .hero-simple .hero-content h1 {font-size: 32px;}
    .hero-simple .hero-subtitle {font-size: 16px;}
}
}
@media (max-width: 480px) {
    .slide-title {font-size: 32px;}
    .slide-subtitle {font-size: 16px;}
    .slide-button {padding: 12px 30px;font-size: 16px;}
}