:root {
          /* --- CORE COLOR PALETTE (LIGHT MODE) --- */
          --color-primary-rgb: 0, 139, 242;
          /* GridCo Blue */
          --color-secondary-rgb: 112, 112, 112;
          /* Neutral Gray */
          --color-white: #FFFFFF;
          --color-black: #111111;

          /* --- Glassmorphism / Aero Effect Variables --- */
          --blur-radius: 12px;
          --background-glass-light: rgba(255, 255, 255, 0.75);
          --border-glass-light: rgba(var(--color-primary-rgb), 0.15);
          --shadow-glow-primary: 0 0 25px -5px rgba(var(--color-primary-rgb), 0.3);

          /* Semantic Tokens */
          --color-primary: rgb(var(--color-primary-rgb));
          --color-secondary: rgb(var(--color-secondary-rgb));
          --color-background: var(--color-white);
          --color-surface: rgba(var(--color-primary-rgb), 0.05);
          --color-text: #1a202c;
          --color-text-secondary: #707070;
          --color-border: rgba(var(--color-primary-rgb), 0.2);
          --color-btn-primary-text: var(--color-white);
          --color-focus-ring: rgba(var(--color-primary-rgb), 0.4);

          /* --- CORE DESIGN SYSTEM TOKENS --- */
          --font-family-base: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-size-base: 16px;
          --font-size-lg: 18px;
          --font-size-xl: 20px;
          --font-size-2xl: 24px;
          --font-size-3xl: 36px;
          --font-size-4xl: 48px;
          --font-weight-medium: 500;
          --font-weight-bold: 700;
          --line-height-tight: 1.2;
          --line-height-normal: 1.6;
          --letter-spacing-tight: -0.02em;
          --space-8: 8px;
          --space-12: 12px;
          --space-16: 16px;
          --space-24: 24px;
          --space-32: 32px;
          --space-64: 64px;
          --space-96: 96px;
          --radius-base: 8px;
          --radius-lg: 16px;
          --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
          --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
          --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.06), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
          --duration-normal: 250ms;
          --ease-standard: cubic-bezier(0.16, 1, 0.3, 1);
          --focus-ring: 0 0 0 3px var(--color-focus-ring);
        }

        html[data-color-scheme="dark"] {
          --color-primary-rgb: 0, 139, 242;
          --color-secondary-rgb: 136, 136, 136;

          --background-glass-dark: rgba(26, 26, 26, 0.7);
          --border-glass-dark: rgba(var(--color-primary-rgb), 0.25);
          --shadow-glow-primary: 0 0 25px -5px rgba(var(--color-primary-rgb), 0.35);

          --color-background: #111111;
          --color-surface: rgba(var(--color-primary-rgb), 0.1);
          --color-text: #e2e2e2;
          --color-text-secondary: #888888;
          --color-border: rgba(var(--color-primary-rgb), 0.3);
        }

        /* Base styles */
        html {
          font-family: var(--font-family-base);
          line-height: var(--line-height-normal);
          color: var(--color-text);
          background-color: var(--color-background);
          -webkit-font-smoothing: antialiased;
          box-sizing: border-box;
          scroll-behavior: smooth;
        }

        body {
          margin: 0;
          padding: 0;
          position: relative;
          overflow-x: hidden;
        }

        *,
        *::before,
        *::after {
          box-sizing: inherit;
        }

        /* Decorative background gradients */
        body::before {
          content: '';
          position: fixed;
          top: -10vh;
          left: -20vw;
          width: 60vw;
          height: 60vw;
          background: radial-gradient(circle, rgba(var(--color-primary-rgb), 0.1) 0%, rgba(var(--color-primary-rgb), 0) 70%);
          z-index: -1;
        }

        body::after {
          content: '';
          position: fixed;
          bottom: -20vh;
          right: -20vw;
          width: 70vw;
          height: 70vw;
          background: radial-gradient(circle, rgba(var(--color-primary-rgb), 0.08) 0%, rgba(var(--color-primary-rgb), 0) 65%);
          z-index: -1;
        }

        h1,
        h2,
        h3,
        h4 {
          margin: 0;
          font-weight: var(--font-weight-bold);
          line-height: var(--line-height-tight);
          color: var(--color-text);
          letter-spacing: var(--letter-spacing-tight);
        }

        h1 {
          font-size: var(--font-size-4xl);
        }

        h2 {
          font-size: var(--font-size-3xl);
        }

        h3 {
          font-size: var(--font-size-xl);
        }

        p {
          margin: 0 0 var(--space-16) 0;
          color: var(--color-text-secondary);
        }

        p:last-of-type {
          margin-bottom: 0;
        }

        a {
          color: var(--color-primary);
          text-decoration: none;
        }

        a:hover {
          opacity: 0.8;
        }

        .container {
          width: 100%;
          max-width: 1200px;
          margin: 0 auto;
          padding: 0 var(--space-24);
        }

        .section {
          padding: var(--space-96) 0;
        }

        .section-header {
          text-align: center;
          margin-bottom: var(--space-64);
          max-width: 700px;
          margin-left: auto;
          margin-right: auto;
        }

        .section-header h2 {
          margin-bottom: var(--space-16);
        }

        .section-header p {
          font-size: var(--font-size-lg);
        }

        /* Header & Navigation */
        .header {
          position: sticky;
          top: 0;
          left: 0;
          width: 100%;
          z-index: 1000;
        }

        .header-inner {
          background: var(--background-glass-light);
          border-bottom: 1px solid var(--border-glass-light);
          -webkit-backdrop-filter: blur(var(--blur-radius));
          backdrop-filter: blur(var(--blur-radius));
          box-shadow: var(--shadow-md);
        }

        .header .container {
          display: flex;
          align-items: center;
          justify-content: space-between;
          height: 60px;
        }

        html[data-color-scheme="dark"] .header-inner {
          background: var(--background-glass-dark);
          border-color: var(--border-glass-dark);
        }

        .nav-brand {
          font-size: var(--font-size-2xl);
          font-weight: var(--font-weight-bold);
        }

        .nav-brand span {
          color: var(--color-primary);
        }

        .nav-menu {
          display: flex;
          align-items: center;
        }

        .nav-list {
          display: flex;
          list-style: none;
          margin: 0;
          padding: 0;
          gap: var(--space-24);
        }

        .nav-link {
          color: var(--color-text);
          font-weight: var(--font-weight-medium);
        }

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

        #theme-toggle {
          background: none;
          border: none;
          cursor: pointer;
          color: var(--color-text);
          display: flex;
          padding: var(--space-8);
        }

        #theme-toggle svg {
          width: 20px;
          height: 20px;
        }

        #theme-toggle .sun-icon {
          display: none;
        }

        html[data-color-scheme="dark"] #theme-toggle .sun-icon {
          display: block;
        }

        html[data-color-scheme="dark"] #theme-toggle .moon-icon {
          display: none;
        }

        .nav-toggle {
          display: none;
          /* Hidden by default, shown on mobile */
          flex-direction: column;
          justify-content: center;
          align-items: center;
          width: 30px;
          height: 30px;
          cursor: pointer;
          gap: 5px;
          background: none;
          border: none;
        }

        .nav-toggle span {
          width: 25px;
          height: 2px;
          background: var(--color-text);
          border-radius: 2px;
        }

        .nav-toggle.is-active span:nth-child(1) {
          transform: translateY(7px) rotate(45deg);
        }

        .nav-toggle.is-active span:nth-child(2) {
          opacity: 0;
        }

        .nav-toggle.is-active span:nth-child(3) {
          transform: translateY(-7px) rotate(-45deg);
        }

        /* Mobile Navigation Overlay */
        .mobile-nav {
          position: fixed;
          top: 60px;
          /* Header height */
          left: -100%;
          width: 100%;
          height: calc(100% - 60px);
          background: rgba(255, 255, 255, 0.99);
          /* 99% opaque for light theme */
          -webkit-backdrop-filter: blur(24px);
          backdrop-filter: blur(24px);
          padding-top: var(--space-32);
          z-index: 999;
          /* Below header, above content */
        }

        .mobile-nav.is-active {
          left: 0;
        }

        html[data-color-scheme="dark"] .mobile-nav {
          background: rgba(17, 17, 17, 0.99);
          /* 99% opaque for dark theme */
        }

        .mobile-nav .nav-list {
          flex-direction: column;
          align-items: center;
          gap: var(--space-16);
        }

        .mobile-nav .nav-link {
          font-size: var(--font-size-xl);
        }

        /* Card */
        .card {
          background: var(--background-glass-light);
          border: 1px solid var(--border-glass-light);
          -webkit-backdrop-filter: blur(var(--blur-radius));
          backdrop-filter: blur(var(--blur-radius));
          padding: var(--space-24);
          border-radius: var(--radius-lg);
          box-shadow: var(--shadow-sm);
        }

        html[data-color-scheme="dark"] .card {
          background: var(--background-glass-dark);
          border-color: var(--border-glass-dark);
        }

        .card:hover {
          transform: translateY(-8px);
          box-shadow: var(--shadow-lg), var(--shadow-glow-primary);
        }

        /* Button */
        .btn {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          padding: var(--space-12) var(--space-24);
          border-radius: var(--radius-base);
          font-size: var(--font-size-base);
          font-weight: var(--font-weight-medium);
          cursor: pointer;
          border: 1px solid transparent;
        }

        .btn:hover {
          transform: scale(1.03) translateY(-2px);
          box-shadow: var(--shadow-md), var(--shadow-glow-primary);
        }

        .btn-primary {
          background: var(--color-primary);
          color: var(--color-btn-primary-text);
        }

        .btn-outline {
          background: transparent;
          border-color: var(--color-border);
          color: var(--color-text);
        }

        .btn-outline:hover {
          background-color: var(--color-surface);
          box-shadow: none;
        }

        /* Hero */
        .hero {
          text-align: center;
          padding-top: var(--space-64);
          padding-bottom: var(--space-96);
        }

        .hero-title {
          margin-bottom: var(--space-24);
        }

        .hero-subtitle {
          max-width: 700px;
          margin: 0 auto var(--space-32);
          font-size: var(--font-size-lg);
        }

        .hero-actions {
          display: flex;
          justify-content: center;
          gap: var(--space-16);
          flex-wrap: wrap;
          margin-top: var(--space-24);
        }

        /* Grid Layouts */
        .grid {
          display: grid;
          gap: var(--space-24);
        }

        .grid-fit-320 {
          grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
        }

        .grid-fit-250 {
          grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        }

        /* Company Card */
        .company-card {
          display: flex;
          flex-direction: column;
          height: 100%;
          text-align: left;
        }

        .company-card .card-body {
          flex-grow: 1;
        }

        .company-card .card-subtitle {
          color: var(--color-text-secondary);
          margin-bottom: var(--space-16);
        }

        .company-card .card-footer {
          margin-top: var(--space-24);
        }

        .service-tags {
          display: flex;
          flex-wrap: wrap;
          gap: var(--space-8);
          margin-top: var(--space-16);
        }

        .service-tag {
          background: var(--color-surface);
          color: var(--color-text-secondary);
          padding: 4px 10px;
          border-radius: 4px;
          font-size: 12px;
          font-weight: 500;
        }

        /* Solutions / Differentiators */
        .solution-pillar {
          text-align: center;
        }

        .pillar-icon svg {
          width: 40px;
          height: 40px;
          color: var(--color-primary);
          margin-bottom: var(--space-16);
        }

        /* Contact Form */
        .contact-content {
          grid-template-columns: 1fr 1fr;
          align-items: center;
        }

        .form-group {
          margin-bottom: var(--space-16);
        }

        .form-label {
          display: block;
          margin-bottom: var(--space-8);
          font-weight: var(--font-weight-medium);
          font-size: 14px;
        }

        .form-control {
          width: 100%;
          padding: var(--space-12);
          border-radius: var(--radius-base);
          border: 1px solid var(--color-border);
          background-color: var(--color-surface);
          color: var(--color-text);
          font-size: var(--font-size-base);
        }

        .form-control:focus {
          outline: none;
          border-color: var(--color-primary);
          box-shadow: var(--focus-ring);
        }

        textarea.form-control {
          min-height: 120px;
        }

        /* Footer */
        .footer {
          padding: var(--space-64) 0 var(--space-32);
          border-top: 1px solid var(--color-border);
          background: var(--color-surface);
        }

        .footer-content {
          display: grid;
          grid-template-columns: 1fr 2fr;
          gap: var(--space-64);
          margin-bottom: var(--space-32);
        }

        .footer-brand h3 {
          margin-bottom: var(--space-8);
        }

        .footer-links {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
          gap: var(--space-24);
        }

        .footer-links h4 {
          font-size: var(--font-size-base);
          margin-bottom: var(--space-12);
        }

        .footer-links ul {
          list-style: none;
          padding: 0;
          margin: 0;
        }

        .footer-links li {
          margin-bottom: var(--space-8);
        }

        .footer-links a {
          color: var(--color-text-secondary);
        }

        .footer-bottom {
          text-align: center;
          padding-top: var(--space-24);
          border-top: 1px solid var(--color-border);
          font-size: 14px;
          color: var(--color-text-secondary);
        }

        /* Mobile Styles */
        @media (max-width: 768px) {
          h1 {
            font-size: var(--font-size-3xl);
          }

          h2 {
            font-size: var(--font-size-2xl);
          }

          .section {
            padding: var(--space-64) 0;
          }

          /* Show the hamburger menu toggle */
          .nav-toggle {
            display: flex;
          }

          /* Hide the desktop navigation menu */
          .nav-menu {
            display: none;
          }

          .hero-actions .btn {
            width: 100%;
            max-width: 300px;
          }

          .contact-content {
            grid-template-columns: 1fr;
            gap: var(--space-32);
          }

          .footer-content {
            grid-template-columns: 1fr;
            gap: var(--space-32);
            text-align: center;
          }

          .footer-links {
            justify-items: center;
          }

          .nav-brand-link {
            display: flex;
            align-items: center;
            gap: var(--space-8);
            text-decoration: none;
          }

          .nav-logo-icon {
            height: 36px;
            width: auto;
          }

          .nav-logo-text {
            height: 24px;
            width: auto;
          }
        }


        .all-logo {
          width: 200px;
          /* fixed width */
          height: 40px;
          /* fixed height */
          object-fit: contain;
          /* keeps proportions */
          margin-bottom: 8px;
          /* spacing before subtitle */
          display: block;
        }