/* ========== Independent Styles ========== */

    /* Carousel */
    .carousel-section {
      position: relative;
      margin-top: 70px;
      height: 85vh;
      min-height: 650px;
      overflow: hidden;
      border-radius: 0 0 40px 40px;
      box-shadow: 0 25px 50px -15px rgba(0,100,255,0.3);
    }

    .carousel-track {
      display: flex;
      width: 100%;
      height: 100%;
      transition: transform 1s cubic-bezier(0.25, 0.1, 0.15, 1);
    }

    .carousel-slide {
      flex: 0 0 100%;
      position: relative;
      overflow: hidden;
    }

    .carousel-slide img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      filter: brightness(0.8) saturate(1.5) hue-rotate(2deg);
      transform: scale(1.02);
      animation: slowZoom 20s infinite alternate;
    }

    @keyframes slowZoom {
      0% { transform: scale(1); }
      100% { transform: scale(1.1); }
    }

    .slide-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, rgba(255,255,255,0.8) 0%, rgba(200,230,255,0.5) 50%, transparent 100%);
      display: flex;
      align-items: center;
      padding: 0 10%;
    }

    .slide-content {
      max-width: 650px;
      color: #0a1a2f;
      opacity: 0;
      transform: translateX(-40px);
      transition: opacity 0.9s ease 0.2s, transform 0.9s ease 0.2s;
    }

    .slide-content.active-caption {
      opacity: 1;
      transform: translateX(0);
    }

    .slide-content h2 {
      font-size: 3.8rem;
      font-weight: 800;
      line-height: 1.1;
      margin-bottom: 1.5rem;
      background: linear-gradient(135deg, #0a1a2f, #0066cc);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .slide-content h2 i {
      font-style: normal;
      background: linear-gradient(135deg, #0066cc, #9f4cf0);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .slide-content p {
      font-size: 1.2rem;
      opacity: 0.8;
      margin-bottom: 2rem;
      color: #1e3347;
    }

    .carousel-btn {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background: rgba(255,255,255,0.3);
      backdrop-filter: blur(12px);
      border: 1px solid rgba(0,160,255,0.5);
      color: #0066cc;
      width: 60px;
      height: 60px;
      border-radius: 30px;
      font-size: 2rem;
      cursor: pointer;
      transition: 0.2s;
      z-index: 10;
      box-shadow: 0 0 15px rgba(0,160,255,0.3);
    }

    .carousel-btn:hover {
      background: white;
      border-color: #0066cc;
      box-shadow: 0 0 30px #00a0ff;
    }

    .prev { left: 30px; }
    .next { right: 30px; }

    .carousel-dots {
      position: absolute;
      bottom: 30px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      gap: 16px;
      z-index: 10;
    }

    .dot {
      width: 14px;
      height: 14px;
      border-radius: 20px;
      background: rgba(0,102,204,0.3);
      border: 1px solid #0066cc;
      transition: 0.3s;
      cursor: pointer;
    }

    .dot.active {
      width: 50px;
      background: #0066cc;
      box-shadow: 0 0 15px #00a0ff;
    }

    /* Core services cards */
    .services-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 2rem;
    }

    .service-card {
      background: rgba(255, 255, 255, 0.65);
      backdrop-filter: blur(10px);
      border-radius: 32px;
      padding: 2.2rem 1.8rem;
      box-shadow: 0 15px 35px rgba(0,100,200,0.1);
      transition: 0.4s;
      border: 1px solid rgba(0,160,255,0.3);
      position: relative;
      overflow: hidden;
    }

    .service-card::before {
      content: '';
      position: absolute;
      top: -2px;
      left: -2px;
      right: -2px;
      bottom: -2px;
      background: linear-gradient(45deg, #00a0ff, #9f4cf0, #00a0ff);
      border-radius: 34px;
      opacity: 0;
      transition: opacity 0.4s;
      z-index: -1;
    }

    .service-card:hover::before {
      opacity: 0.6;
    }

    .service-card:hover {
      transform: translateY(-8px) scale(1.02);
      box-shadow: 0 30px 50px rgba(0,160,255,0.4);
      border-color: transparent;
    }

    .service-icon {
      font-size: 2.8rem;
      background: linear-gradient(135deg, #0066cc, #9f4cf0);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      margin-bottom: 1.5rem;
    }

    .service-card h3 {
      font-size: 1.4rem;
      font-weight: 600;
      margin-bottom: 0.75rem;
      color: #0a1a2f;
    }

    .service-desc {
      color: #2c405c;
      font-size: 0.95rem;
      line-height: 1.6;
    }

    /* About us */
    .about-wrapper {
      display: flex;
      gap: 3rem;
      align-items: center;
      background: rgba(255,255,255,0.55);
      backdrop-filter: blur(10px);
      border-radius: 48px;
      padding: 2.5rem 3rem;
      border: 1px solid rgba(0,160,255,0.2);
      box-shadow: 0 20px 40px rgba(0,100,200,0.15);
    }

    .about-text p {
      margin-bottom: 1rem;
      font-size: 1.05rem;
    }

    .about-highlight {
      background: linear-gradient(135deg, #e0f0ff, #ffffff);
      padding: 0.2rem 1rem;
      border-radius: 40px;
      border-left: 4px solid #00a0ff;
      font-weight: 500;
    }

    /* Advantages */
    .advantages-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 2rem;
      text-align: center;
    }

    .adv-item {
      background: rgba(255,255,255,0.5);
      backdrop-filter: blur(6px);
      border-radius: 32px;
      padding: 2rem 1rem;
      border: 1px solid rgba(0,160,255,0.3);
      transition: 0.3s;
    }

    .adv-item i {
      font-size: 3rem;
      background: linear-gradient(135deg, #0066cc, #9f4cf0);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      margin-bottom: 1rem;
      display: inline-block;
      filter: drop-shadow(0 0 8px #00a0ff);
      animation: pulseGlow 3s infinite;
    }

    @keyframes pulseGlow {
      0% { filter: drop-shadow(0 0 5px #00a0ff); }
      50% { filter: drop-shadow(0 0 20px #9f4cf0); }
      100% { filter: drop-shadow(0 0 5px #00a0ff); }
    }

    .adv-item h4 {
      font-size: 1.3rem;
      color: #0a1a2f;
    }

    /* Process steps */
    .process-steps {
      display: flex;
      justify-content: space-between;
      margin: 3rem 0 2rem;
      position: relative;
    }

    .step {
      text-align: center;
      flex: 1;
      z-index: 2;
    }

    .step-icon {
      background: rgba(255,255,255,0.7);
      backdrop-filter: blur(10px);
      width: 90px;
      height: 90px;
      border-radius: 50%;
      margin: 0 auto 1rem;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 2.5rem;
      color: #0066cc;
      border: 2px solid rgba(0,160,255,0.6);
      box-shadow: 0 0 25px rgba(0,160,255,0.3);
      transition: 0.3s;
      animation: borderPulse 2s infinite;
    }

    @keyframes borderPulse {
      0% { border-color: rgba(0,160,255,0.6); box-shadow: 0 0 15px rgba(0,160,255,0.3); }
      50% { border-color: #9f4cf0; box-shadow: 0 0 35px #9f4cf0; }
      100% { border-color: rgba(0,160,255,0.6); box-shadow: 0 0 15px rgba(0,160,255,0.3); }
    }

    .process-animation {
      position: relative;
      height: 6px;
      background: rgba(0,102,204,0.2);
      border-radius: 6px;
      margin-top: -1rem;
      margin-bottom: 1.5rem;
      overflow: hidden;
    }

    .process-slider {
      width: 25%;
      height: 100%;
      background: linear-gradient(90deg, #00a0ff, #9f4cf0, #00a0ff);
      border-radius: 6px;
      position: absolute;
      left: 0;
      animation: slideProcess 4s infinite ease-in-out;
      background-size: 200% 100%;
      box-shadow: 0 0 20px #00a0ff;
    }

    @keyframes slideProcess {
      0% { left: 0%; width: 25%; }
      25% { left: 25%; width: 25%; }
      50% { left: 50%; width: 25%; }
      75% { left: 75%; width: 25%; }
      100% { left: 0%; width: 25%; }
    }

    /* Knowledge base */
    .knowledge-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 2rem;
    }

    .article-card {
      background: rgba(255,255,255,0.7);
      backdrop-filter: blur(10px);
      border-radius: 32px;
      overflow: hidden;
      border: 1px solid rgba(0,160,255,0.2);
      transition: 0.3s;
    }

    .article-card:hover {
      transform: scale(1.02);
      box-shadow: 0 30px 50px rgba(0,160,255,0.3);
    }

    .article-card img {
      width: 100%;
      height: 200px;
      object-fit: cover;
    }

    .article-info {
      padding: 1.5rem;
    }

    .article-info h4 a {
      color: #0a1a2f;
      text-decoration: none;
      font-weight: 600;
      font-size: 1.2rem;
      transition: 0.2s;
    }

    .article-info h4 a:hover {
      color: #0066cc;
    }

    /* Responsive */
    @media (max-width: 992px) {
      .services-grid, .advantages-grid, .knowledge-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }
    @media (max-width: 768px) {
      .navbar { padding: 0.8rem 1rem; }
      .nav-menu { gap: 1rem; font-size: 0.9rem; }
      .services-grid, .advantages-grid, .knowledge-grid {
        grid-template-columns: 1fr;
      }
      .slide-content h2 { font-size: 2.5rem; }
    }