:root {
      --color-primary: #112340;
      --color-secondary: #30B2C8;
      --color-accent: #F09819;
      --color-bg: #FFFFFF;
      --color-footer: #112340;
      --color-neutral: #DFE4EA;
      --color-text: #1A202C;
      --font-heading: 'Montserrat', sans-serif;
      --font-body: 'Roboto', Arial, sans-serif;
    }
    html { scroll-behavior: smooth; }
    body {
      font-family: var(--font-body);
      color: var(--color-text);
      background-color: var(--color-bg);
      min-height: 100vh;
      font-size: 1rem;
    }
    h1, h2, h3, h4, h5, h6 {
      font-family: var(--font-heading);
      color: var(--color-primary);
    }
    .btn-primary, .btn-accent {
      font-family: var(--font-heading);
      font-weight: bold;
      border-radius: 32px;
      transition: background 0.2s;
    }
    .btn-primary {
      background: var(--color-primary);
      border: none;
      color: #fff;
    }
    .btn-primary:hover, .btn-primary:focus {
      background: #254777;
      color: #fff;
    }
    .btn-accent {
      background: var(--color-accent);
      color: #fff;
      border: none;
    }
    .btn-accent:hover, .btn-accent:focus {
      background: #f69539;
      color: #fff;
    }
    .btn-ghost {
      background: transparent;
      border: 2px solid var(--color-secondary);
      color: var(--color-secondary);
      border-radius: 32px;
      font-weight: bold;
    }
    .btn-ghost:hover {
      background: var(--color-secondary);
      color: #fff;
    }
    .navbar-custom {
      background: rgba(17,35,64,0.90);
      backdrop-filter: blur(2px);
      transition: background 0.2s;
    }
    .navbar-brand img {
      max-height: 48px;
    }
    .nav-link {
      font-family: var(--font-heading);
      color: #fff !important;
      font-weight: 600;
      letter-spacing: 0.02em;
      transition: color 0.2s;
    }
    .nav-link:focus, .nav-link.active {
      color: var(--color-accent) !important;
    }
    .nav-link:hover {
      color: var(--color-secondary) !important;
    }
    @media (max-width: 767.98px) {
      .navbar-custom {
        background: var(--color-primary);
      }
      .navbar-brand img { max-height: 40px; }
    }
    /* Hero Section */
    .hero-section {
      min-height: 80vh;
      background-size: cover;
      background-position: center;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .hero-overlay {
      background: linear-gradient(120deg, rgba(17,35,64,0.82) 50%, rgba(48,178,200,0.16) 100%);
      position: absolute;
      top: 0; left: 0; width: 100%; height: 100%;
      z-index: 1;
    }
    .hero-content {
      position: relative;
      z-index: 2;
      color: #fff;
      text-align: center;
      padding: 2rem;
      margin-top: 3.5rem;
    }
    .hero-content h1 { font-size: 2.6rem; }
    @media (min-width: 768px) { .hero-content h1 { font-size: 3.2rem; } }
    .hero-btns {
      gap: 1rem;
    }
    .hero-icon {
      vertical-align: middle;
      margin-left: 0.5rem;
      height: 32px;
      width: 32px;
      object-fit: contain;
    }
    /* About */
    #about { background: #F7FAFC; }
    .about-img {
      border-radius: 24px;
      box-shadow: 0 4px 24px rgba(17,35,64,0.08);
      width: 100%;
      max-width: 544px;
      aspect-ratio: 544/384;
      object-fit: cover;
    }
    /* Services */
    .service-icon {
      width: 96px; height: 96px;
      object-fit: cover;
      margin-bottom: 1rem;
      border-radius: 50%;
      background: var(--color-neutral);
    }
    /* Portfolio */
    #portfolio { background: #FBFBFB; }
    .portfolio-img {
      border-radius: 16px;
      width: 100%;
      min-width: 160px;
      min-height: 96px;
      object-fit: cover;
      transition: transform 0.15s, box-shadow 0.15s;
      cursor: pointer;
    }
    .portfolio-img:hover { transform: scale(1.02); box-shadow: 0 6px 24px rgba(17,35,64,0.12); }
    .portfolio-caption { font-size: 1.05rem; }
    /* Lightbox */
    .lightbox-backdrop {
      position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
      background: rgba(0,0,0,0.85);
      display: flex; align-items: center; justify-content: center;
      z-index: 1080; 
    }
    .lightbox-image {
      max-width: 90vw; max-height: 80vh; border-radius: 16px;
      box-shadow: 0 4px 32px #00000044;
      background: #fff;
    }
    .lightbox-close {
      position: absolute; top: 24px; right: 40px; font-size: 2.5rem;
      color: #fff; cursor: pointer; z-index: 1100;
    }
    /* Testimonials */
    .testimonial-slide {
      background: #F9FAFB;
      border-radius: 20px;
      padding: 2rem 1.2rem;
      margin: 0 1.2rem;
      text-align: center;
      min-height: 300px;
      box-shadow: 0 0px 8px rgba(17,35,64,0.04);
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .testimonial-avatar {
      width: 64px; height: 64px; border-radius: 50%; margin-bottom: 1rem; object-fit: cover; box-shadow: 0 2px 8px #0001;
    }
    .testimonial-company-logo {
      width: 48px; height: 48px; object-fit: contain;
      border-radius: 10px; margin-top: 0.5rem;
    }
    .testimonial-rating {
      color: var(--color-accent);
      font-size: 1.1rem;
    }
    /* Carousel controls */
    .carousel-control-prev-icon, .carousel-control-next-icon {
      background-color: var(--color-primary);
      border-radius: 20px;
      width: 2.2rem; height: 2.2rem;
    }
    /* Team Section */
    #team { background: #F0F4F8; }
    .team-card {
      background: #fff;
      border-radius: 20px;
      box-shadow: 0 8px 40px rgba(17,35,64,0.05);
      overflow: hidden;
      transition: box-shadow 0.15s;
      position: relative;
      text-align: center;
      margin-bottom: 2rem;
      cursor: pointer;
      min-height: 360px;
    }
    .team-card:hover { box-shadow: 0 16px 64px rgba(48,178,200,0.08); }
    .team-photo {
      width: 100%; height: 256px; object-fit: cover; background: var(--color-neutral);
    }
    .team-info {
      padding: 1.1rem 1rem;
      transition: background 0.27s;
    }
    .team-social {
      display: none;
      position: absolute;
      bottom: 12px; left: 50%;
      transform: translateX(-50%);
      z-index: 6;
      opacity: 0;
      transition: opacity 0.21s;
    }
    .team-card:hover .team-social, .team-card:focus .team-social {
      display: flex;
      opacity: 1;
    }
    .team-social a {
      width: 36px; height: 36px;
      display: inline-flex;
      justify-content: center; align-items: center;
      background: var(--color-secondary);
      border-radius: 50%;
      margin: 0 5px;
      color: #fff;
      transition: background 0.15s;
    }
    .team-social a:hover { background: var(--color-accent);}
    /* Contact & Form */
    .contact-form {
      background: #FFFFFF;
      border-radius: 2rem;
      box-shadow: 0 8px 48px rgba(17,35,64,0.10);
      padding: 2rem;
    }
    .form-label { font-weight: 600; color: var(--color-primary);}
    .form-control:focus { border-color: var(--color-secondary); }
    .contact-details {
      padding: 2rem;
      background: #F8F9FB;
      border-radius: 1.5rem;
      height: 100%;
      min-width: 260px;
    }
    .contact-map {
      border-radius: 1.2rem; width: 100%; object-fit: cover; margin-top: 1rem;
      box-shadow: 0 2px 16px #25477722;
    }
    @media (max-width: 991.98px) {
      .hero-content h1 { font-size: 2.1rem; }
      .team-photo { height: 192px; }
    }
    @media (max-width: 767.98px) {
      main, section, .container { padding-left: 0; padding-right: 0; }
      .hero-content { margin-top: 1.2rem; padding: 1rem 0.5rem; }
      .about-img { max-width: 100%; }
      .contact-form, .contact-details { border-radius: 1rem; padding: 1.1rem;}
      .team-photo { height: 160px; }
    }
    /* Footer */
    .site-footer {
      background: var(--color-footer);
      color: #fff;
      padding-top: 2.5rem;
      padding-bottom: 1.2rem;
    }
    .footer-logo img { max-height: 56px; object-fit: contain; border-radius: 10px;}
    .footer-link a {
      color: #fff;
      margin-bottom: 0.35rem;
      font-size: 1.05rem;
      text-decoration: none;
      transition: color 0.14s;
      font-family: var(--font-heading);
    }
    .footer-link a:hover { color: var(--color-accent);}
    .footer-social a {
      display: inline-block;
      width: 38px; height: 38px;
      margin-right: 10px;
      border-radius: 50%;
      background: #1A3348;
      display: flex; align-items: center; justify-content: center;
      transition: background 0.18s;
    }
    .footer-social a:hover { background: var(--color-accent);}
    .footer-social img {
      width: 60%; height: 60%; object-fit: contain;
    }
    .footer-newsletter input[type="email"] {
      border-radius: 32px 0 0 32px;
      border: none;
      padding-left: 1.3rem;
      min-width: 180px;
      font-size: 1rem;
    }
    .footer-newsletter .btn {
      border-radius: 0 32px 32px 0;
      background: var(--color-accent);
      color: #fff;
      border: none;
      font-family: var(--font-heading);
      font-weight: 600;
      padding: 0.6rem 1.2rem;
    }
    .footer-newsletter .btn:hover { background: #ffa654;}
    .footer-news-success { color: #fffa; font-weight: 510; padding-top: 0.7rem;}
    .back-to-top {
      position: fixed;
      right: 18px; bottom: 44px;
      background: var(--color-secondary);
      color: #fff;
      border: none;
      width: 52px;
      height: 52px;
      border-radius: 50%;
      font-size: 2rem;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 120;
      box-shadow: 0 2px 8px #1A334877;
      transition: background 0.17s;
      cursor: pointer;
      opacity: 0;
      visibility: hidden;
    }
    .back-to-top.show { opacity: 1; visibility: visible; }
    @media (max-width: 767.98px) {
      .site-footer .col-md-6, .site-footer .col-lg-5 { text-align: center !important;}
      .footer-logo { justify-content: center !important; }
    }
    /* Cookie Banner */
    .cookie-banner {
      position: fixed;
      bottom: 0; left: 0; width: 100vw;
      background: #172646;
      color: #fff;
      z-index: 9999;
      padding: 1.1rem 1.4rem 1rem 1.4rem;
      font-size: 1.06rem;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      box-shadow: 0 -2px 16px #0002;
    }
    .cookie-banner .btn {
      border-radius: 22px;
      margin-left: 1rem;
      font-size: 1.01rem;
      padding: 0.45rem 1.3rem;
      background: var(--color-accent);
      color: #fff;
      border: none;
      font-weight: bold;
    }
    .cookie-banner a { color: var(--color-secondary); text-decoration: underline;}
    /* Skip to Content */
    .skip-content-link {
      position: absolute;
      left: -1000px;
      top: 10px;
      background: var(--color-accent);
      color: #fff;
      padding: 0.6rem 1.1rem;
      z-index: 2000;
      font-weight: bold;
      border-radius: 6px;
      transition: left 0.18s;
    }
    .skip-content-link:focus { left: 14px;}