:root {
      --brand-blue: #00377B; /* Signature Tigo Blue */
      --brand-blue-hover: #002554;
      --brand-slate: #374150;
      --brand-black: #000000;
      --brand-charcoal: #2d2d2d;
      --brand-light-gray: #dcdcdc;
      --bg-white: #ffffff;
      --bg-light: #f8f9fa;
      --bg-subtle: #f1f3f5;
      --bg-dark: #1a202c;
      --border-color: #e2e8f0;
      --text-dark: #1a202c;
      --text-muted: #64748b;
    }

    /* Core Styles & Typography */
    body {
      font-family: 'Noto Sans Sinhala', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background-color: var(--bg-white);
      color: var(--text-dark);
      overflow-x: hidden;
      line-height: 1.6;
    }

    h1, h2, h3, h4, h5, .brand-font {
      font-family: 'Space Grotesk', 'Noto Sans Sinhala', sans-serif;
      letter-spacing: -0.02em;
    }

    /* Top Announcement Bar */
    .top-announcement-bar {
      background-color: var(--brand-black);
      color: var(--bg-white);
      font-size: 0.85rem;
      padding: 6px 16px;
      text-align: center;
      font-weight: 600;
      border-bottom: 2px solid var(--brand-blue);
    }

    .top-announcement-bar .highlight {
      color: #3b82f6;
      font-weight: 800;
    }

    /* Minimalist Navbar Styles */
    .navbar {
      background-color: var(--bg-white);
      border-bottom: 1px solid var(--border-color);
      min-height: 3.5rem;
    }

    .navbar-brand .logo-text {
      font-size: 1.5rem;
      font-weight: 800;
      color: var(--brand-black);
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .brand-logo {
      display: block;
      width: 54px;
      height: 54px;
      object-fit: contain;
    }

    .logo-badge {
      background-color: var(--brand-blue);
      color: var(--bg-white);
      font-size: 0.75rem;
      padding: 2px 8px;
      border-radius: 4px;
      font-weight: 700;
    }

    /* Neo-Brutalist Light Cards */
    .neo-card {
      background: var(--bg-white);
      border: 1px solid var(--border-color);
      border-radius: 12px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
      transition: all 0.25s ease;
    }

    .neo-card:hover {
      border-color: var(--brand-blue);
      transform: translateY(-3px);
      box-shadow: 0 8px 30px rgba(0, 55, 123, 0.12);
    }

    .neo-box {
      border: 1px solid var(--border-color);
      border-radius: 12px;
      background: var(--bg-white);
    }

    /* Hero Section Specifics */
    .hero-title {
      font-size: 2.75rem;
      font-weight: 800;
      line-height: 1.25;
      color: var(--brand-black);
    }

    .text-blue {
      color: var(--brand-blue) !important;
    }

    .text-slate {
      color: var(--brand-slate) !important;
    }

    .text-gray {
      color: var(--text-muted) !important;
    }

    /* Custom Button Styles */
    .btn-blue {
      background-color: var(--brand-blue);
      color: #ffffff !important;
      font-weight: 700;
      border: none;
      border-radius: 8px;
      padding: 0.75rem 1.5rem;
      transition: background-color 0.2s ease, transform 0.15s ease;
    }

    .btn-blue:hover {
      background-color: var(--brand-blue-hover);
      color: #ffffff !important;
      transform: translateY(-1px);
    }

    .btn-outline {
      background-color: transparent;
      color: var(--brand-black) !important;
      font-weight: 700;
      border: 1px solid var(--brand-slate);
      border-radius: 8px;
      padding: 0.75rem 1.5rem;
      transition: all 0.2s ease;
    }

    .btn-outline:hover {
      background-color: var(--bg-subtle);
      border-color: var(--brand-black);
    }

    /* Logo Marquee Slider */
    .logo-marquee-container {
      overflow: hidden;
      white-space: nowrap;
      position: relative;
      background-color: var(--bg-dark);
      border-top: 1px solid var(--border-color);
      border-bottom: 1px solid var(--border-color);
      padding: 20px 0;
    }

    .trusted-by-label {
      color: var(--text-muted);
      font-size: 0.75rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-align: center;
      text-transform: uppercase;
      margin-bottom: 14px;
    }

    .logo-marquee-track {
      display: inline-flex;
      align-items: center;
      gap: 60px;
      animation: marqueeScroll 25s linear infinite;
    }

    .logo-marquee-container:hover .logo-marquee-track {
      animation-play-state: paused;
    }

    @keyframes marqueeScroll {
      0% { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }

    .client-logo-item {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 190px;
      height: 65px;
      opacity: 0.75;
      transition: opacity 0.2s ease;
    }

    .client-logo-item img {
      display: block;
      max-width: 190px;
      max-height: 65px;
      width: auto;
      height: auto;
      object-fit: contain;
    }

    .client-logo-item:hover {
      opacity: 1;
    }

    /* Technology Stack Strip */
    .tech-stack-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
      gap: 16px;
    }

    .tech-card {
      background-color: var(--bg-light);
      border: 1px solid var(--border-color);
      border-radius: 10px;
      padding: 16px;
      text-align: center;
      transition: all 0.2s ease;
    }

    .tech-card:hover {
      border-color: var(--brand-blue);
      background-color: var(--bg-white);
      transform: translateY(-2px);
    }

    .tech-icon {
      font-size: 2rem;
      margin-bottom: 8px;
    }

    /* Badge & Tag Styling */
    .badge-lk {
      display: inline-block;
      background-color: var(--bg-subtle);
      color: var(--brand-slate);
      border: 1px solid var(--border-color);
      font-size: 0.8rem;
      font-weight: 700;
      padding: 4px 12px;
      border-radius: 20px;
    }

    /* Streamlined Accordion Styling */
    .faq-item {
      border: 1px solid var(--border-color);
      border-radius: 8px;
      margin-bottom: 12px;
      background-color: var(--bg-white);
      overflow: hidden;
    }

    .faq-question {
      font-weight: 700;
      padding: 18px 20px;
      background-color: var(--bg-white);
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
      user-select: none;
    }

    .faq-answer {
      padding: 0 20px 18px 20px;
      color: var(--text-muted);
      font-size: 0.95rem;
    }

    /* Floating CTA Bar for Mobile */
    .floating-cta-bar {
      position: fixed;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 999;
      background: var(--brand-black);
      padding: 10px 20px;
      border-radius: 50px;
      box-shadow: 0 10px 25px rgba(0,0,0,0.25);
      display: flex;
      align-items: center;
      gap: 16px;
      width: max-content;
      max-width: 92vw;
    }

    .floating-cta-btn {
      color: #ffffff;
      font-size: 0.85rem;
      font-weight: 700;
      display: flex;
      align-items: center;
      gap: 6px;
      text-decoration: none;
    }

    /* Comparison Table Styling */
    .comparison-table {
      width: 100%;
      border-collapse: separate;
      border-spacing: 0;
    }

    .comparison-table th, 
    .comparison-table td {
      padding: 16px 20px;
      border-bottom: 1px solid var(--border-color);
      vertical-align: middle;
    }

    .comparison-table th {
      background-color: var(--bg-light);
      font-weight: 800;
      color: var(--brand-black);
    }

    /* Mobile Responsive Overrides */
    @media screen and (max-width: 768px) {
      html.has-navbar-fixed-top {
        padding-top: 0 !important;
      }

      .top-announcement-bar {
        font-size: 0.78rem !important;
        padding: 8px 12px !important;
      }

      .navbar {
        position: sticky !important;
        top: 0 !important;
      }

      .hero-section {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
      }

      .hero-title {
        font-size: 1.85rem !important;
        line-height: 1.3 !important;
      }

      .floating-cta-bar {
        bottom: 12px !important;
        justify-content: space-around;
        padding: 10px 16px !important;
        width: 92vw !important;
      }

      /* Stack Comparison Table into Cards on Mobile */
      .comparison-table, 
      .comparison-table tbody, 
      .comparison-table tr, 
      .comparison-table td {
        display: block;
        width: 100% !important;
      }

      .comparison-table thead {
        display: none;
      }

      .comparison-table tr {
        margin-bottom: 1.25rem;
        border: 1px solid var(--border-color);
        border-radius: 12px;
        background-color: var(--bg-white);
        overflow: hidden;
        box-shadow: 0 4px 10px rgba(0,0,0,0.03);
      }

      .comparison-table td {
        padding: 12px 16px !important;
        border-bottom: 1px solid var(--border-color);
        text-align: left !important;
      }

      .comparison-table td:first-child {
        background-color: var(--bg-subtle);
        font-weight: 700;
        font-size: 0.95rem;
        color: var(--brand-black);
        border-bottom: 2px solid var(--border-color);
      }

      .comparison-table td:nth-child(2)::before {
        content: "සාම්ප්‍රදායික සංවර්ධන මාදිලිය:";
        display: block;
        font-size: 0.72rem;
        color: var(--text-muted);
        font-weight: 700;
        margin-bottom: 4px;
      }

      .comparison-table td:nth-child(3) {
        background-color: rgba(0, 55, 123, 0.04) !important;
        border-bottom: none;
      }

      .comparison-table td:nth-child(3)::before {
        content: "39 WaaS කළමනාකෘත මාදිලිය:";
        display: block;
        font-size: 0.75rem;
        color: var(--brand-blue);
        font-weight: 800;
        margin-bottom: 4px;
      }

      .tech-stack-grid {
        grid-template-columns: repeat(3, 1fr);
      }
    }