/* ---------------------------------- */
      /* --- 1. Design System & Globals --- */
      /* ---------------------------------- */
      :root {
          /* A. Brand Foundations (Windows-inspired) */
          --clr-primary-400: #0078D4; /* Windows Blue */
          --clr-primary-500: #005A9E; /* Darker Blue for hover */
          --clr-secondary-400: #0078D4; /* Using primary for focus rings */
          --clr-neutral-100: #FFFFFF; /* White */
          --clr-neutral-200: #F2F2F2; /* Light Gray Background */
          --clr-neutral-700: #333333; /* Body Text */
          --clr-neutral-900: #1D1D1D; /* Headings */

          /* B. Spacing Scale (8-pt system) */
          --space-1: 0.25rem; /* 4px */
          --space-2: 0.5rem;  /* 8px */
          --space-3: 1rem;    /* 16px */
          --space-4: 1.5rem;  /* 24px */
          --space-5: 2rem;    /* 32px */
          --space-6: 3rem;    /* 48px */
          --space-7: 4rem;    /* 64px */

          /* C. Typography (Segoe UI Fallback) */
          --ff-heading: 'Segoe UI', 'Roboto', 'Helvetica Neue', sans-serif;
          --ff-body: 'Segoe UI', 'Roboto', 'Helvetica Neue', sans-serif;

          --fs-900: clamp(2.25rem, 5vw + 1rem, 3.75rem);
          --fs-800: 2.3rem;
          --fs-700: 2.0rem;
          --fs-600: 1.5rem;
          --fs-500: 1.2rem;
          --fs-400: 1rem;

          /* D. Component Styles (Sharp & Clean) */
          --border-radius-sm: 0.25rem; /* 4px - minimal rounding */
          --border-radius-md: 0.5rem;  /* 8px */
          --shadow-md: 0 2px 5px rgb(0 0 0 / 0.07);
          --shadow-lg: 0 5px 15px rgb(0 0 0 / 0.1);
          --transition-fast: 200ms cubic-bezier(.4,0,.2,1);
          --transition-medium: 350ms cubic-bezier(.4,0,.2,1);
      }

      /* ----------------------- */
      /* --- 2. Reset & Base --- */
      /* ----------------------- */
      *, *::before, *::after {
          box-sizing: border-box;
          margin: 0;
          padding: 0;
      }

      body {
          font-family: var(--ff-body);
          font-size: var(--fs-400);
          line-height: 1.6;
          color: var(--clr-neutral-700);
          background-color: var(--clr-neutral-100);
          -webkit-font-smoothing: antialiased;
      }

      h1, h2, h3{
          font-family: var(--ff-heading);
          font-weight: 700;
          color: var(--clr-neutral-900);
          line-height: 1.2;
      }

      h1 { font-size: var(--fs-900); }
      h2 { font-size: var(--fs-800); }
      h3 { font-size: var(--fs-700); }


      a {
          color: var(--clr-primary-400);
          text-decoration: none;
          transition: color var(--transition-fast);
      }

      a:hover, a:focus-visible {
          color: var(--clr-primary-500);
          text-decoration: underline;
      }

      img, svg {
          max-width: 100%;
          display: block;
      }

      :focus-visible {
          outline: 3px solid var(--clr-secondary-400);
          outline-offset: 2px;
          border-radius: var(--border-radius-sm);
      }
      
      main:focus { outline: none; }


      /* --------------------------- */
      /* --- 3. Utility Classes ---- */
      /* --------------------------- */
      .container {
          width: 90%;
          max-width: 70rem; /* approx 1120px */
          margin-inline: auto;
      }

      .section {
          padding-block: var(--space-7);
      }
      
      .section-title {
          text-align: center;
          margin-bottom: var(--space-6);
      }
      
      .section-title span {
          display: block;
          font-family: var(--ff-body);
          font-weight: 500;
          color: var(--clr-primary-400);
          margin-bottom: var(--space-2);
          text-transform: uppercase;
          letter-spacing: 0.5px;
      }

      .flow > * + * {
          margin-block-start: var(--space-3);
      }


      /* ------------------------------------- */
      /* --- 4. Header & Responsive Nav ---- */
      /* ------------------------------------- */
      .main-header {
          position: sticky;
          top: 0;
          z-index: 100;
          background-color: var(--clr-neutral-100);
          border-bottom: 1px solid color-mix(in srgb, var(--clr-neutral-900) 15%, transparent);
          padding-block: var(--space-3);
      }

      .nav-wrapper {
          display: flex;
          justify-content: space-between;
          align-items: center;
      }

      .logo {
          display: flex;
          align-items: center;
          gap: var(--space-2);
          font-family: var(--ff-heading);
          font-weight: 700;
          /* font-size: var(--fs-600); */
          color: var(--clr-neutral-900);
      }
      .logo:hover { text-decoration: none; color: var(--clr-primary-400); }
      
      .logo svg {
          width: 28px;
          height: 28px;
          color: var(--clr-primary-400);
      }

      .main-nav {
          display: flex;
          align-items: center;
          gap: var(--space-4);
      }

      .main-nav ul {
          display: flex;
          list-style: none;
          gap: var(--space-4);
      }
      
      .main-nav a {
          font-weight: 500;
          color: var(--clr-neutral-700);
      }
      
      /* Removed the animated underline for a cleaner look */

      .burger-menu {
          display: none;
          background: none;
          border: none;
          cursor: pointer;
          padding: var(--space-2);
          z-index: 1001;
      }
      
      .burger-menu .line {
          display: block;
          width: 24px;
          height: 3px;
          background-color: var(--clr-neutral-900);
          border-radius: 3px;
          transition: transform var(--transition-medium), opacity var(--transition-medium);
      }
      .burger-menu .line:not(:last-child) {
          margin-bottom: 5px;
      }

      /* Mobile Nav Styles */
      @media (max-width: 900px) {
          .main-nav ul {
              position: fixed;
              inset: 0;
              z-index: 1000;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              background-color: var(--clr-neutral-100);
              gap: var(--space-5);
              transform: translateX(100%);
              transition: transform var(--transition-medium);
          }

          body.nav-open .main-nav ul {
              transform: translateX(0);
          }
          
          .main-nav a {
              font-size: var(--fs-500);
          }

          .burger-menu {
              display: block;
          }

          body.nav-open .burger-menu .line1 {
              transform: translateY(8px) rotate(45deg);
          }
          body.nav-open .burger-menu .line2 {
              opacity: 0;
          }
          body.nav-open .burger-menu .line3 {
              transform: translateY(-8px) rotate(-45deg);
          }
      }


      /* -------------------- */
      /* --- 5. Sections ---- */
      /* -------------------- */
      
      /* --- Hero Section (UPDATED WITH ANIMATION) --- */
      .hero {
          text-align: center;
          padding-block: clamp(4rem, 10vh, 8rem);
          color: var(--clr-neutral-100);
          background: linear-gradient(-45deg, var(--clr-primary-500), var(--clr-primary-400), var(--clr-neutral-700), var(--clr-neutral-900));
          background-size: 400% 400%;
          animation: gradientAnimation 15s ease infinite;
      }

      @keyframes gradientAnimation {
          0% { background-position: 0% 50%; }
          50% { background-position: 100% 50%; }
          100% { background-position: 0% 50%; }
      }

      .hero h1 {
          max-width: 25ch;
          margin-inline: auto;
          color: var(--clr-neutral-100);
          text-shadow: 0 1px 3px rgba(0,0,0,0.3);
      }

      .hero p {
          max-width: 60ch;
          margin-inline: auto;
          font-size: var(--fs-500);
          margin-top: var(--space-4);
          margin-bottom: var(--space-5);
          color: var(--clr-neutral-100);
          text-shadow: 0 1px 2px rgba(0,0,0,0.2);
      }

      .btn {
          display: inline-block;
          padding: 0.75em 1.75em;
          border: 1px solid transparent;
          border-radius: var(--border-radius-sm);
          font-weight: 600;
          font-family: var(--ff-body);
          font-size: var(--fs-500);
          cursor: pointer;
          transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
      }

      .btn:hover, .btn:focus-visible {
          text-decoration: none;
      }

      .btn-primary {
          background-color: var(--clr-primary-400);
          color: white;
          border-color: var(--clr-primary-400);
      }
      .btn-primary:hover, .btn-primary:focus-visible {
          /* background-color: transparent; */
          color: var(--clr-neutral-100);
          border-color: var(--clr-neutral-100);
      }

      .btn-secondary {
          background-color: transparent;
          color: var(--clr-neutral-900);
          border-color: var(--clr-neutral-700);
      }
      .btn-secondary:hover, .btn-secondary:focus-visible {
          background-color: var(--clr-neutral-900);
          color: var(--clr-neutral-100);
      }

      /* --- About Section --- */
      #about .container {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: var(--space-6);
          align-items: center;
      }
      
      #about .about-image {
          width: 100%;
          aspect-ratio: 4 / 3;
          object-fit: cover;
          border-radius: var(--border-radius-md);
      }

      .stats-grid {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          gap: var(--space-4);
          margin-top: var(--space-5);
      }

      .stat-item .stat-number {
          font-size: var(--fs-600);
          font-weight: 700;
          color: var(--clr-primary-400);
      }
      
      /* --- Process Section --- */
      #process {
          background-color: var(--clr-neutral-200);
      }
      .process-grid {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
          gap: var(--space-6);
          margin-top: var(--space-6);
      }
      .process-step {
          text-align: center;
          padding: var(--space-4);
      }
      .process-step .step-number {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          width: 50px;
          height: 50px;
          border-radius: var(--border-radius-sm);
          border: 2px solid var(--clr-primary-400);
          color: var(--clr-primary-400);
          font-size: var(--fs-600);
          font-weight: 700;
          margin-bottom: var(--space-4);
          background-color: var(--clr-neutral-100);
      }
      
      /* --- Services Section --- */
      .services-grid {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
          gap: var(--space-5);
      }

      .service-card {
          background-color: var(--clr-neutral-100);
          border: 1px solid color-mix(in srgb, var(--clr-neutral-900) 15%, transparent);
          border-radius: var(--border-radius-md);
          padding: var(--space-5);
          transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
      }
      .service-card:hover, .service-card:focus-within {
          border-color: var(--clr-primary-400);
          box-shadow: var(--shadow-md);
      }

      .service-card .icon {
          display: inline-flex;
          padding: var(--space-3);
          background-color: color-mix(in srgb, var(--clr-primary-400) 15%, transparent);
          border-radius: var(--border-radius-sm);
          margin-bottom: var(--space-4);
          color: var(--clr-primary-400);
      }
      .service-card .icon svg { width: 32px; height: 32px; }

      /* --- Portfolio Section --- */
      #portfolio {
          background-color: var(--clr-neutral-200);
      }
      .portfolio-grid {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
          gap: var(--space-4);
      }
      .portfolio-item {
          position: relative;
          overflow: hidden;
          border-radius: var(--border-radius-md);
          box-shadow: var(--shadow-md);
          aspect-ratio: 4 / 3;
      }
      .portfolio-item img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          transition: transform var(--transition-medium);
      }
      .portfolio-item:hover img,
      .portfolio-item:focus-within img {
          transform: scale(1.05);
      }
      .portfolio-overlay {
          position: absolute;
          inset: 0;
          background: linear-gradient(to top, rgba(0,0,0,0.8) 10%, transparent 60%);
          display: flex;
          align-items: flex-end;
          padding: var(--space-4);
      }
      .portfolio-overlay h3 {
          color: white;
          font-size: calc(var(--fs-700) + 1px);
      }
      
      /* --- Testimonials Section --- */
      .testimonial-slider {
          position: relative;
          padding-inline: 50px; /* Space for nav buttons */
      }
      .testimonial-container {
          display: flex;
          overflow-x: scroll;
          scroll-snap-type: x mandatory;
          scroll-behavior: smooth;
          -webkit-overflow-scrolling: touch;
          scrollbar-width: none;
      }
      .testimonial-container::-webkit-scrollbar { display: none; }
      
      .testimonial-slide {
          flex: 0 0 100%;
          scroll-snap-align: start;
          padding: var(--space-5);
          max-width: 70ch;
          margin-inline: auto;
          text-align: center;
          justify-content: space-between;
          display: flex;
        flex-direction: column;
      }
      
      .testimonial-slide blockquote {
          font-size: var(--fs-600);
          font-style: italic;
          border: none;
      }
      
      .testimonial-slide .author {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: var(--space-3);
          margin-top: var(--space-4);
          margin-top: auto;
      }
      
      .author img {
          width: 50px;
          height: 50px;
          border-radius: var(--border-radius-sm);
          object-fit: cover;
      }
      
      .slider-nav {
          display: flex;
          justify-content: center;
          gap: var(--space-3);
          margin-top: var(--space-4);
      }
      
      .slider-dot {
          width: 12px;
          height: 12px;
          border-radius: 50%;
          background-color: var(--clr-neutral-700);
          opacity: 0.3;
          border: none;
          cursor: pointer;
          transition: opacity var(--transition-fast);
      }
      
      .slider-dot.active {
          opacity: 1;
          background-color: var(--clr-primary-400);
      }

      .slider-btn {
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          background: none;
          border: none;
          cursor: pointer;
          padding: var(--space-2);
          border-radius: 50%;
          transition: background-color var(--transition-fast);
      }
      .slider-btn:hover, .slider-btn:focus-visible {
          background-color: color-mix(in srgb, var(--clr-neutral-900) 10%, transparent);
      }
      .slider-btn svg {
          width: 24px;
          height: 24px;
          color: var(--clr-neutral-700);
      }
      #prev-slide { left: 0; }
      #next-slide { right: 0; }
      
      /* --- Pricing Section --- */
      #pricing {
          background-color: var(--clr-neutral-200);
      }
      .pricing-grid {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
          gap: var(--space-5);
          align-items: center;
      }
      .pricing-card {
          background-color: var(--clr-neutral-100);
          border-radius: var(--border-radius-md);
          padding: var(--space-5);
          border: 1px solid color-mix(in srgb, var(--clr-neutral-900) 15%, transparent);
          text-align: center;
      }
      .pricing-card.featured {
          border: 2px solid var(--clr-primary-400);
          transform: scale(1.05);
      }
      .pricing-card h3 {
          font-size: var(--fs-700);
      }
      .pricing-card .price {
          font-size: var(--fs-600);
          font-weight: 700;
          color: var(--clr-primary-400);
          margin-block: var(--space-3);
      }
      .pricing-card .price span {
          font-size: var(--fs-400);
          font-weight: 400;
          color: var(--clr-neutral-700);
      }
      .pricing-card ul {
          list-style: none;
          margin-block: var(--space-5);
          text-align: left;
      }
      .pricing-card li {
          margin-bottom: var(--space-3);
          display: flex;
          align-items: center;
          gap: var(--space-2);
      }
      .pricing-card li svg {
          color: var(--clr-primary-400);
          width: 20px;
          height: 20px;
          flex-shrink: 0;
      }

      /* --- FAQ Section (UPDATED FOR ANIMATION) --- */
      .faq-container {
          max-width: 50rem;
          margin-inline: auto;
          display: flex;
          flex-direction: column;
          gap: var(--space-3);
      }
      .faq-item details {
          background-color: var(--clr-neutral-100);
          border: 1px solid color-mix(in srgb, var(--clr-neutral-900) 15%, transparent);
          border-radius: var(--border-radius-sm);
      }
      .faq-item summary {
          font-weight: 600;
          cursor: pointer;
          list-style: none; /* Hide default marker */
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: var(--space-4);
      }
      .faq-item summary::-webkit-details-marker { display: none; }

      .faq-item summary::after {
          content: '+';
          font-size: var(--fs-700);
          transition: transform var(--transition-fast);
      }
      .faq-item details[open] summary::after {
          transform: rotate(45deg);
      }
      .faq-item .faq-answer {
          padding-inline: var(--space-4);
          overflow: hidden;
          transition: max-height 350ms ease-out, padding-bottom 350ms ease-out, opacity 300ms ease-out;
          max-height: 0;
          padding-bottom: 0;
          opacity: 0;
      }
      .faq-item details[open] .faq-answer {
          max-height: 30rem; /* Large enough for content */
          padding-bottom: var(--space-4);
          opacity: 1;
      }


      /* --- Contact Section --- */
      #contact {
          background-color: var(--clr-neutral-200);
      }
      #contact .container {
          max-width: 45rem;
          text-align: center;
      }
      
      #contact-form {
          display: flex;
          flex-direction: column;
          gap: var(--space-4);
          text-align: left;
      }
      
      .form-group {
          display: flex;
          flex-direction: column;
      }
      
      #contact-form label {
          margin-bottom: var(--space-2);
          font-weight: 500;
      }
      
      #contact-form input,
      #contact-form textarea {
          padding: var(--space-3);
          border: 1px solid color-mix(in srgb, var(--clr-neutral-900) 20%, transparent);
          border-radius: var(--border-radius-sm);
          font-family: var(--ff-body);
          font-size: var(--fs-400);
          background-color: var(--clr-neutral-100);
          color: var(--clr-neutral-900);
          max-width: 100%;
          min-width: 100%;
          max-height: 300px;
      }
      
      #contact-form input:focus,
      #contact-form textarea:focus {
          outline: 2px solid var(--clr-primary-400);
          outline-offset: 0;
      }
      
      .form-feedback {
          position: fixed;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%) scale(0.9);
          background: var(--clr-neutral-900);
          color: var(--clr-neutral-100);
          padding: var(--space-5) var(--space-6);
          border-radius: var(--border-radius-md);
          box-shadow: var(--shadow-lg);
          z-index: 1000;
          opacity: 0;
          visibility: hidden;
          transition: transform var(--transition-medium), opacity var(--transition-medium), visibility var(--transition-medium);
      }
      
      .form-feedback.show {
          transform: translate(-50%, -50%) scale(1);
          opacity: 1;
          visibility: visible;
      }

      /* --- Responsive Adjustments --- */
      @media (max-width: 900px) {
          #about .container {
              grid-template-columns: 1fr;
          }
      }
      
      @media (max-width: 768px) {
          h1 { font-size: var(--fs-900); }
          h2 { font-size: var(--fs-800); }
          .testimonial-slide{padding: 0;}
      }

      /* -------------------- */
      /* --- 6. Footer ------ */
      /* -------------------- */
      .main-footer {
          background-color: var(--clr-neutral-900);
          color: var(--clr-neutral-200);
          padding-block: var(--space-6);
      }

      .main-footer .container {
          display: flex;
          flex-direction: column;
          align-items: center;
          text-align: center;
      }
      
      .footer-nav {
          list-style: none;
          display: flex;
          flex-wrap: wrap;
          justify-content: center;
          gap: var(--space-4);
          margin-block: var(--space-5);
      }
      
      .footer-nav a {
          color: var(--clr-neutral-200);
          opacity: 0.8;
      }
      .footer-nav a:hover { opacity: 1; }
      
      .social-links {
          display: flex;
          gap: var(--space-4);
          margin-bottom: var(--space-5);
      }
      
      .social-links a {
          color: var(--clr-neutral-200);
          opacity: 0.8;
          transition: opacity var(--transition-fast), transform var(--transition-fast);
      }
      .social-links a:hover, .social-links a:focus-visible {
          opacity: 1;
          transform: scale(1.1);
      }
      
      .social-links svg { width: 24px; height: 24px; }
      
      .copyright {
          font-size: 0.9rem;
          opacity: 0.7;
      }

      .additional-content h2{
        margin-top: 3rem;
      }

      .additional-content h1{
        margin-top: 2rem;
      }

      .additional-content p:last-child{
        margin-bottom: 2rem;
      }

      .additional-content li{
        margin-left: 1.5rem;
      }

      .hero .btn-primary{
        border: 1px var(--clr-neutral-200) solid;
      }


    @media screen and (max-width: 800px) {
        .slider-nav{
            display: none;
        }
    }