/* ---------- Base ---------- */
      *,
      *::before,
      *::after { box-sizing: border-box; }

      html { scroll-behavior: smooth; }

      body {
          margin: 0;
          font-family: var(--font-sans, 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
          color: var(--text-primary, #1e293b);
          background: var(--bg-primary, #ffffff);
          line-height: 1.6;
          -webkit-font-smoothing: antialiased;
      }

      a { color: var(--accent, #1e88e5); text-decoration: none; }
      a:hover { text-decoration: underline; }

      /* ---------- Accessibility & Focus States ---------- */
      .sr-only {
          position: absolute;
          width: 1px;
          height: 1px;
          padding: 0;
          margin: -1px;
          overflow: hidden;
          clip: rect(0, 0, 0, 0);
          white-space: nowrap;
          border-width: 0;
      }

      .skip-link {
          position: absolute;
          top: -100px;
          left: 16px;
          background: var(--color-navy, #0a192f);
          color: var(--color-white, #ffffff) !important;
          padding: 12px 20px;
          z-index: 9999;
          border-radius: var(--radius-md, 6px);
          font-weight: 600;
          font-size: 0.95rem;
          border: 2px solid var(--color-blue-400, #1e88e5);
          transition: top 0.2s ease;
          text-decoration: none;
      }
      .skip-link:focus {
          top: 16px;
          outline: 3px solid #60a5fa;
          outline-offset: 2px;
      }

      :focus-visible {
          outline: 2px solid var(--color-blue-400, #1e88e5);
          outline-offset: 3px;
      }

      @media (prefers-reduced-motion: reduce) {
          html { scroll-behavior: auto; }
          *, *::before, *::after {
              animation-duration: 0.01ms !important;
              animation-iteration-count: 1 !important;
              transition-duration: 0.01ms !important;
              scroll-behavior: auto !important;
          }
      }

      .container {
          width: 100%;
          max-width: 1180px;
          margin: 0 auto;
          padding: 0 24px;
      }

      code, .mono { font-family: var(--font-mono, 'JetBrains Mono', monospace); }

      /* ---------- Buttons ---------- */
      .btn {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          gap: 8px;
          padding: 12px 22px;
          border-radius: var(--radius-md, 6px);
          font-weight: 600;
          font-size: 0.95rem;
          border: 1px solid transparent;
          cursor: pointer;
          transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
          text-align: center;
      }
      .btn-primary {
          background: var(--color-blue-400, #1e88e5);
          color: var(--color-white, #ffffff) !important;
      }
      .btn-primary:hover {
          background: var(--color-blue-500, #1565c0);
          text-decoration: none;
          transform: translateY(-1px);
          box-shadow: 0 8px 20px rgba(21, 101, 192, 0.25);
      }
      .btn-ghost {
          background: transparent;
          color: var(--color-white, #ffffff);
          border-color: rgba(255, 255, 255, 0.35);
      }
      .btn-ghost:hover {
          background: rgba(255, 255, 255, 0.12);
          text-decoration: none;
      }
      .btn-outline {
          background: transparent;
          color: var(--color-navy, #0a192f);
          border-color: var(--border, #e2e8f0);
      }
      .btn-outline:hover {
          background: var(--bg-secondary, #f8fafc);
          text-decoration: none;
      }

      /* ---------- Header ---------- */
      .site-header {
          position: sticky;
          top: 0;
          z-index: 50;
          background: rgba(255, 255, 255, 0.92);
          backdrop-filter: saturate(180%) blur(12px);
          border-bottom: 1px solid var(--border, #e2e8f0);
      }
      .top-bar {
          border-bottom: 1px solid var(--border, #e2e8f0);
          background: rgba(255, 255, 255, 0.85);
      }
      .top-bar-inner {
          min-height: 34px;
          display: flex;
          align-items: center;
          justify-content: flex-end;
          gap: 18px;
          font-size: 0.82rem;
      }
      .top-bar a {
          color: var(--text-secondary, #64748b);
          font-weight: 500;
      }
      .top-bar a:hover {
          color: var(--color-navy, #0a192f);
          text-decoration: none;
      }
      .status-link {
          display: inline-flex;
          align-items: center;
          gap: 8px;
      }
      .status-dot {
          width: 8px;
          height: 8px;
          border-radius: 50%;
          background: #22c55e;
          box-shadow:
                  0 0 0 4px rgba(34, 197, 94, 0.14),
                  0 0 14px rgba(34, 197, 94, 0.75);
          flex-shrink: 0;
      }
      .status-link:hover .status-dot {
          box-shadow:
                  0 0 0 5px rgba(34, 197, 94, 0.18),
                  0 0 18px rgba(34, 197, 94, 0.9);
      }
      .nav {
          display: flex;
          align-items: center;
          justify-content: space-between;
          height: 68px;
      }
      .nav-logo { display: flex; align-items: center; }
      .nav-logo img { height: 38px; width: auto; }
      .nav-links {
          display: flex;
          gap: 28px;
          align-items: center;
      }
      .nav-links a {
          color: var(--text-secondary, #64748b);
          font-weight: 500;
          font-size: 0.95rem;
      }
      .nav-links a:hover {
          color: var(--color-navy, #0a192f);
          text-decoration: none;
      }
      @media (max-width: 768px) {
          .nav-links a:not(.btn) { display: none; }
          .top-bar-inner {
              justify-content: center;
          }
      }

      /* ---------- Hero ---------- */
      .hero {
          position: relative;
          background: linear-gradient(135deg, var(--color-navy, #0a192f) 0%, var(--color-blue-500, #1565c0) 100%);
          color: var(--color-white, #ffffff);
          overflow: hidden;
          padding: 80px 0 100px;
      }
      .hero::before {
          content: "";
          position: absolute;
          inset: 0;
          background-image:
                  radial-gradient(circle at 20% 20%, rgba(66, 165, 245, 0.25), transparent 40%),
                  radial-gradient(circle at 80% 60%, rgba(144, 202, 249, 0.18), transparent 45%);
          pointer-events: none;
      }
      .hero-inner {
          position: relative;
          display: grid;
          grid-template-columns: 1.05fr 0.95fr;
          gap: 48px;
          align-items: center;
      }
      @media (max-width: 960px) {
          .hero-inner { grid-template-columns: 1fr; }
      }
      .eyebrow {
          display: inline-flex;
          align-items: center;
          gap: 8px;
          font-family: var(--font-mono, monospace);
          font-size: 0.82rem;
          font-weight: 600;
          letter-spacing: 0.06em;
          text-transform: uppercase;
          color: var(--color-blue-200, #90caf9);
          background: rgba(255, 255, 255, 0.1);
          border: 1px solid rgba(255, 255, 255, 0.15);
          padding: 6px 14px;
          border-radius: var(--radius-full, 9999px);
          margin-bottom: 20px;
      }
      .eyebrow .badge-dot {
          width: 7px;
          height: 7px;
          border-radius: 50%;
          background: #60a5fa;
      }
      .hero h1 {
          font-size: clamp(2.25rem, 4.5vw, 3.5rem);
          line-height: 1.15;
          font-weight: 800;
          margin: 0 0 20px;
          letter-spacing: -0.02em;
      }
      .hero h1 .accent { color: var(--color-blue-300, #64b5f6); }
      .hero p.lede {
          font-size: 1.15rem;
          color: rgba(255, 255, 255, 0.88);
          max-width: 560px;
          margin: 0 0 32px;
          line-height: 1.65;
      }
      .hero-cta { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
      .hero-badges {
          margin-top: 28px;
          display: flex;
          flex-wrap: wrap;
          gap: 18px;
          font-size: 0.88rem;
          color: rgba(255, 255, 255, 0.75);
      }
      .hero-badge-item {
          display: inline-flex;
          align-items: center;
          gap: 6px;
      }
      .hero-badge-item svg {
          color: #86efac;
          flex-shrink: 0;
      }

      /* ---------- Interactive Code Showcase Card ---------- */
      .code-card {
          position: relative;
          background: rgba(10, 25, 47, 0.85);
          border: 1px solid rgba(255, 255, 255, 0.2);
          border-radius: var(--radius-lg, 12px);
          box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
          overflow: hidden;
          backdrop-filter: blur(12px);
      }
      .code-card-header {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 8px 12px;
          background: rgba(255, 255, 255, 0.06);
          border-bottom: 1px solid rgba(255, 255, 255, 0.12);
          gap: 10px;
          min-height: 48px;
      }
      .code-header-left {
          display: flex;
          align-items: center;
          gap: 8px;
          min-width: 0;
          flex: 1 1 auto;
          overflow: hidden;
      }
      .code-select-wrapper {
          position: relative;
          display: inline-flex;
          align-items: center;
          flex-shrink: 0;
      }
      .code-select {
          appearance: none;
          -webkit-appearance: none;
          background: rgba(255, 255, 255, 0.08);
          border: 1px solid rgba(255, 255, 255, 0.2);
          color: var(--color-white, #ffffff);
          font-family: var(--font-mono, monospace);
          font-size: 0.78rem;
          font-weight: 500;
          padding: 6px 26px 6px 10px;
          border-radius: var(--radius-sm, 6px);
          cursor: pointer;
          outline: none;
          transition: background 0.15s ease, border-color 0.15s ease;
      }
      .code-select:hover {
          background: rgba(255, 255, 255, 0.14);
          border-color: rgba(255, 255, 255, 0.32);
      }
      .code-select:focus-visible {
          outline: 2px solid #60a5fa;
          outline-offset: 1px;
      }
      .code-select-icon {
          position: absolute;
          right: 8px;
          pointer-events: none;
          color: rgba(255, 255, 255, 0.65);
      }
      .code-select option, .code-select optgroup {
          background: #0a192f;
          color: #ffffff;
      }
      .code-tabs {
          display: flex;
          align-items: center;
          gap: 3px;
          overflow-x: auto;
          white-space: nowrap;
          scrollbar-width: none;
          -webkit-overflow-scrolling: touch;
          flex: 1 1 auto;
          padding: 2px 0;
      }
      .code-tabs::-webkit-scrollbar { display: none; }
      .code-tab {
          background: transparent;
          border: 1px solid transparent;
          color: rgba(255, 255, 255, 0.65);
          font-family: var(--font-mono, monospace);
          font-size: 0.76rem;
          font-weight: 500;
          padding: 5px 9px;
          border-radius: var(--radius-sm, 5px);
          cursor: pointer;
          transition: all 0.15s ease;
          display: inline-flex;
          align-items: center;
          gap: 4px;
          white-space: nowrap;
          flex-shrink: 0;
      }
      .code-tab:hover {
          color: var(--color-white, #ffffff);
          background: rgba(255, 255, 255, 0.08);
      }
      .code-tab[aria-selected="true"] {
          color: var(--color-white, #ffffff);
          background: rgba(30, 136, 229, 0.35);
          border-color: rgba(66, 165, 245, 0.45);
      }
      .code-header-right {
          display: flex;
          align-items: center;
          gap: 8px;
          flex-shrink: 0;
      }
      .code-copy-btn {
          background: rgba(255, 255, 255, 0.08);
          border: 1px solid rgba(255, 255, 255, 0.15);
          color: rgba(255, 255, 255, 0.8);
          padding: 5px 10px;
          border-radius: var(--radius-sm, 5px);
          font-size: 0.75rem;
          font-family: var(--font-mono, monospace);
          cursor: pointer;
          display: inline-flex;
          align-items: center;
          gap: 6px;
          transition: background 0.15s ease, color 0.15s ease;
          flex-shrink: 0;
      }
      .code-copy-btn:hover {
          background: rgba(255, 255, 255, 0.15);
          color: var(--color-white, #ffffff);
      }
      @media (max-width: 640px) {
          .code-tabs {
              display: none;
          }
      }
      .code-panel {
          margin: 0;
          padding: 20px;
          color: rgba(255, 255, 255, 0.88);
          font-family: var(--font-mono, monospace);
          font-size: clamp(0.72rem, 1.1vw, 0.85rem);
          line-height: 1.65;
          overflow-x: auto;
      }
      .code-panel[hidden] { display: none; }
      .code-panel pre { margin: 0; }
      .code-kw { color: #f472b6; }
      .code-str { color: #86efac; }
      .code-fn { color: #60a5fa; }
      .code-comment { color: rgba(255, 255, 255, 0.45); }
      .code-key { color: #93c5fd; }
      .code-num { color: #fbbf24; }

      /* ---------- Section base ---------- */
      section.section {
          padding: 96px 0;
      }
      .section-heading {
          font-size: clamp(1.75rem, 3.5vw, 2.5rem);
          font-weight: 700;
          color: var(--color-navy, #0a192f);
          margin: 0 0 12px;
          letter-spacing: -0.01em;
      }
      .section-sub {
          color: var(--text-secondary, #64748b);
          font-size: 1.05rem;
          max-width: 680px;
          margin: 0 0 48px;
          line-height: 1.6;
      }

      /* ---------- AI Agent & Developer Section ---------- */
      .ai-architecture {
          background: var(--bg-secondary, #f8fafc);
          border-top: 1px solid var(--border, #e2e8f0);
          border-bottom: 1px solid var(--border, #e2e8f0);
      }
      .agent-grid {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 24px;
      }
      @media (max-width: 900px) { .agent-grid { grid-template-columns: 1fr; } }
      .agent-card {
          background: var(--bg-primary, #ffffff);
          border: 1px solid var(--border, #e2e8f0);
          border-radius: var(--radius-lg, 12px);
          padding: 28px;
          display: flex;
          flex-direction: column;
          transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
      }
      .agent-card:hover {
          transform: translateY(-2px);
          border-color: var(--color-blue-300, #64b5f6);
          box-shadow: 0 12px 28px rgba(21, 101, 192, 0.08);
      }
      .agent-badge {
          display: inline-block;
          font-family: var(--font-mono, monospace);
          font-size: 0.72rem;
          font-weight: 600;
          text-transform: uppercase;
          color: var(--color-blue-500, #1565c0);
          background: rgba(30, 136, 229, 0.1);
          padding: 4px 10px;
          border-radius: var(--radius-full, 9999px);
          margin-bottom: 16px;
          align-self: flex-start;
      }
      .agent-card h3 {
          margin: 0 0 10px;
          color: var(--color-navy, #0a192f);
          font-size: 1.2rem;
      }
      .agent-card p {
          margin: 0 0 16px;
          color: var(--text-secondary, #64748b);
          font-size: 0.95rem;
          flex: 1;
      }
      .agent-card code {
          background: var(--bg-secondary, #f8fafc);
          border: 1px solid var(--border, #e2e8f0);
          padding: 8px 12px;
          border-radius: var(--radius-sm, 4px);
          font-size: 0.82rem;
          color: var(--color-navy, #0a192f);
          display: block;
      }

      /* ---------- Features grid ---------- */
      .features {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 24px;
      }
      @media (max-width: 900px) { .features { grid-template-columns: repeat(2, 1fr); } }
      @media (max-width: 600px) { .features { grid-template-columns: 1fr; } }

      .feature {
          background: var(--bg-primary, #ffffff);
          border: 1px solid var(--border, #e2e8f0);
          border-radius: var(--radius-lg, 12px);
          padding: 28px;
          transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
      }
      .feature:hover {
          border-color: var(--color-blue-300, #64b5f6);
          transform: translateY(-2px);
          box-shadow: 0 12px 28px rgba(21, 101, 192, 0.08);
      }
      .feature-icon {
          width: 44px;
          height: 44px;
          border-radius: var(--radius-md, 6px);
          background: rgba(30, 136, 229, 0.1);
          color: var(--color-blue-400, #1e88e5);
          display: flex;
          align-items: center;
          justify-content: center;
          margin-bottom: 18px;
      }
      .feature h3 {
          margin: 0 0 8px;
          font-size: 1.15rem;
          color: var(--color-navy, #0a192f);
      }
      .feature p {
          margin: 0;
          color: var(--text-secondary, #64748b);
          font-size: 0.95rem;
      }

      /* ---------- Stats band ---------- */
      .stats {
          background: var(--bg-secondary, #f8fafc);
          border-top: 1px solid var(--border, #e2e8f0);
          border-bottom: 1px solid var(--border, #e2e8f0);
      }
      .stats-grid {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 24px;
          text-align: center;
      }
      @media (max-width: 720px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } }
      .stat .num {
          font-family: var(--font-mono, monospace);
          font-size: 2.25rem;
          font-weight: 700;
          color: var(--color-blue-500, #1565c0);
      }
      .stat .label {
          font-size: 0.9rem;
          color: var(--text-secondary, #64748b);
          margin-top: 4px;
      }

      /* ---------- About ---------- */
      .about {
          background:
                  radial-gradient(circle at 15% 20%, rgba(30, 136, 229, 0.08), transparent 34%),
                  linear-gradient(180deg, var(--bg-primary, #ffffff) 0%, var(--bg-secondary, #f8fafc) 100%);
      }
      .about-grid {
          display: grid;
          grid-template-columns: 0.95fr 1.05fr;
          gap: 48px;
          align-items: center;
      }
      @media (max-width: 900px) {
          .about-grid { grid-template-columns: 1fr; }
      }
      .experience-card {
          background: var(--color-navy, #0a192f);
          color: var(--color-white, #ffffff);
          border-radius: var(--radius-lg, 12px);
          padding: 40px;
          position: relative;
          overflow: hidden;
          box-shadow: 0 18px 40px rgba(21, 101, 192, 0.18);
      }
      .experience-card::before {
          content: "";
          position: absolute;
          inset: 0;
          background-image:
                  radial-gradient(circle at 20% 20%, rgba(66, 165, 245, 0.24), transparent 34%),
                  radial-gradient(circle at 90% 70%, rgba(144, 202, 249, 0.16), transparent 38%);
          pointer-events: none;
      }
      .experience-card > * {
          position: relative;
      }
      .experience-card .years {
          font-family: var(--font-mono, monospace);
          font-size: clamp(4rem, 10vw, 7rem);
          line-height: 0.9;
          font-weight: 800;
          color: var(--color-blue-300, #64b5f6);
          margin-bottom: 10px;
      }
      .experience-card h3 {
          font-size: clamp(1.35rem, 3vw, 2rem);
          line-height: 1.2;
          margin: 0 0 16px;
      }
      .experience-card p {
          color: rgba(255, 255, 255, 0.82);
          margin: 0;
      }
      .about-copy h2 {
          margin-bottom: 18px;
      }
      .about-copy p {
          color: var(--text-secondary, #64748b);
          margin: 0 0 18px;
          font-size: 1.02rem;
      }
      .experience-points {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          gap: 16px;
          margin-top: 28px;
      }
      @media (max-width: 600px) {
          .experience-points { grid-template-columns: 1fr; }
      }
      .experience-point {
          background: var(--bg-primary, #ffffff);
          border: 1px solid var(--border, #e2e8f0);
          border-radius: var(--radius-md, 6px);
          padding: 18px;
      }
      .experience-point strong {
          display: block;
          color: var(--color-navy, #0a192f);
          font-size: 1rem;
          margin-bottom: 4px;
      }
      .experience-point span {
          display: block;
          color: var(--text-secondary, #64748b);
          font-size: 0.92rem;
      }

      /* ---------- Pricing ---------- */
      .pricing-wrapper {
          position: relative;
      }
      .pricing-controls {
          display: flex;
          justify-content: flex-end;
          gap: 8px;
          margin-bottom: 16px;
      }
      .pricing-nav-btn {
          width: 38px;
          height: 38px;
          border-radius: 50%;
          border: 1px solid var(--border, #e2e8f0);
          background: var(--bg-primary, #ffffff);
          color: var(--color-navy, #0a192f);
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          transition: all 0.15s ease;
      }
      .pricing-nav-btn:hover {
          background: var(--bg-secondary, #f8fafc);
          border-color: var(--color-blue-400, #1e88e5);
      }
      .pricing {
          display: grid;
          grid-auto-flow: column;
          grid-auto-columns: minmax(280px, 1fr);
          gap: 24px;
          overflow-x: auto;
          overflow-y: visible;
          padding: 12px 4px 20px;
          margin: -12px -4px -20px;
          scroll-snap-type: x proximity;
          scroll-padding: 4px;
          -webkit-overflow-scrolling: touch;
          cursor: grab;
      }
      .pricing.dragging {
          cursor: grabbing;
          user-select: none;
      }
      .pricing::-webkit-scrollbar {
          height: 8px;
      }
      .pricing::-webkit-scrollbar-track {
          background: var(--bg-secondary, #f8fafc);
          border-radius: var(--radius-full, 9999px);
      }
      .pricing::-webkit-scrollbar-thumb {
          background: var(--color-blue-300, #64b5f6);
          border-radius: var(--radius-full, 9999px);
      }
      .pricing::-webkit-scrollbar-thumb:hover {
          background: var(--color-blue-400, #1e88e5);
      }
      @media (max-width: 900px) {
          .pricing {
              grid-auto-columns: minmax(280px, 86vw);
              max-width: none;
              margin: -12px -24px -20px;
              padding: 12px 24px 20px;
          }
      }
      .plan {
          background: var(--bg-primary, #ffffff);
          border: 1px solid var(--border, #e2e8f0);
          border-radius: var(--radius-lg, 12px);
          padding: 32px;
          display: flex;
          flex-direction: column;
          scroll-snap-align: start;
      }
      .plan.popular {
          border-color: var(--color-blue-400, #1e88e5);
          box-shadow: 0 12px 32px rgba(30, 136, 229, 0.15);
          position: relative;
      }
      .plan.popular::before {
          content: "Most Popular";
          position: absolute;
          top: -12px;
          left: 50%;
          transform: translateX(-50%);
          background: var(--color-blue-400, #1e88e5);
          color: var(--color-white, #ffffff);
          font-size: 0.75rem;
          font-weight: 600;
          padding: 4px 12px;
          border-radius: var(--radius-full, 9999px);
      }
      .plan h3 {
          margin: 0 0 6px;
          color: var(--color-navy, #0a192f);
          font-size: 1.25rem;
          font-weight: 700;
      }
      .plan .price {
          font-size: 2.25rem;
          font-weight: 800;
          color: var(--color-navy, #0a192f);
          margin: 8px 0 4px;
      }
      .plan .price small {
          font-size: 0.95rem;
          font-weight: 500;
          color: var(--text-muted, #94a3b8);
      }
      .plan ul {
          list-style: none;
          padding: 0;
          margin: 20px 0 24px;
          flex: 1;
      }
      .plan li {
          padding: 8px 0;
          color: var(--text-secondary, #64748b);
          font-size: 0.95rem;
          display: flex;
          gap: 10px;
          align-items: flex-start;
      }
      .plan li::before {
          content: "";
          width: 16px;
          height: 16px;
          border-radius: 50%;
          background: rgba(30, 136, 229, 0.12);
          display: inline-block;
          flex-shrink: 0;
          margin-top: 4px;
          background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='%231E88E5' stroke-width='2' d='M3 8.5l3 3 7-7'/></svg>");
          background-size: 12px;
          background-position: center;
          background-repeat: no-repeat;
      }

      /* ---------- CTA band ---------- */
      .cta-band {
          background: linear-gradient(135deg, var(--color-navy, #0a192f) 0%, var(--color-blue-500, #1565c0) 100%);
          color: var(--color-white, #ffffff);
          border-radius: var(--radius-lg, 12px);
          padding: 56px 32px;
          text-align: center;
          position: relative;
          overflow: hidden;
      }
      .cta-band h2 {
          font-size: clamp(1.75rem, 3vw, 2.35rem);
          margin: 0 0 14px;
          font-weight: 800;
      }
      .cta-band p {
          color: rgba(255, 255, 255, 0.85);
          max-width: 600px;
          margin: 0 auto 30px;
          font-size: 1.08rem;
      }

      /* ---------- Contact ---------- */
      .contact {
          background: var(--bg-secondary, #f8fafc);
          border-top: 1px solid var(--border, #e2e8f0);
      }
      .contact-grid {
          display: grid;
          grid-template-columns: 0.9fr 1.1fr;
          gap: 48px;
          align-items: start;
      }
      @media (max-width: 900px) {
          .contact-grid { grid-template-columns: 1fr; }
      }
      .contact-card {
          background: var(--bg-primary, #ffffff);
          border: 1px solid var(--border, #e2e8f0);
          border-radius: var(--radius-lg, 12px);
          padding: 32px;
      }
      .contact-card h3 {
          margin: 0 0 12px;
          color: var(--color-navy, #0a192f);
          font-size: 1.25rem;
      }
      .contact-card p {
          margin: 0 0 18px;
          color: var(--text-secondary, #64748b);
      }
      .contact-details {
          list-style: none;
          padding: 0;
          margin: 24px 0 0;
      }
      .contact-details li {
          color: var(--text-secondary, #64748b);
          margin-bottom: 14px;
      }
      .contact-details strong {
          display: block;
          color: var(--color-navy, #0a192f);
          font-size: 0.9rem;
          margin-bottom: 2px;
      }
      .contact-form {
          display: grid;
          gap: 18px;
      }
      .form-row {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          gap: 16px;
      }
      @media (max-width: 600px) {
          .form-row { grid-template-columns: 1fr; }
      }
      .form-field label {
          display: block;
          color: var(--color-navy, #0a192f);
          font-weight: 600;
          font-size: 0.9rem;
          margin-bottom: 6px;
      }
      .form-field input,
      .form-field textarea {
          width: 100%;
          border: 1px solid var(--border, #e2e8f0);
          border-radius: var(--radius-md, 6px);
          background: var(--bg-primary, #ffffff);
          color: var(--text-primary, #1e293b);
          font: inherit;
          padding: 12px 14px;
          outline: none;
          transition: border-color 0.15s ease, box-shadow 0.15s ease;
      }
      .form-field input:focus,
      .form-field textarea:focus {
          border-color: var(--color-blue-400, #1e88e5);
          box-shadow: 0 0 0 4px rgba(30, 136, 229, 0.12);
      }
      .form-field textarea {
          min-height: 140px;
          resize: vertical;
      }

      .form-note {
          color: var(--text-muted, #94a3b8);
          font-size: 0.88rem;
          margin: 0;
      }
      .contact-dialog {
          width: calc(100% - 48px);
          max-width: 480px;
          border: 1px solid var(--border, #e2e8f0);
          border-radius: var(--radius-lg, 12px);
          background: var(--bg-primary, #ffffff);
          color: var(--text-primary, #1e293b);
          box-shadow: 0 24px 60px rgba(10, 25, 47, 0.28);
          padding: 32px;
      }
      .contact-dialog::backdrop {
          background: rgba(10, 25, 47, 0.6);
          backdrop-filter: blur(6px);
      }
      .modal-icon {
          width: 48px;
          height: 48px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-bottom: 18px;
      }
      .modal-icon.success {
          color: #16a34a;
          background: rgba(34, 197, 94, 0.12);
      }
      .modal-icon.error {
          color: #dc2626;
          background: rgba(239, 68, 68, 0.12);
      }
      .contact-dialog h3 {
          margin: 0 0 10px;
          color: var(--color-navy, #0a192f);
          font-size: 1.35rem;
      }
      .contact-dialog p {
          margin: 0 0 24px;
          color: var(--text-secondary, #64748b);
      }
      .modal-actions {
          display: flex;
          justify-content: flex-end;
      }

      /* ---------- Footer ---------- */
      .site-footer {
          background: var(--color-navy, #0a192f);
          color: rgba(255, 255, 255, 0.7);
          padding: 56px 0 32px;
          font-size: 0.9rem;
      }
      .footer-grid {
          display: grid;
          grid-template-columns: 1.4fr repeat(3, 1fr);
          gap: 40px;
      }
      @media (max-width: 768px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
      @media (max-width: 500px) { .footer-grid { grid-template-columns: 1fr; } }
      .footer-grid h4 {
          color: var(--color-white, #ffffff);
          font-size: 0.85rem;
          text-transform: uppercase;
          letter-spacing: 0.06em;
          margin: 0 0 14px;
          font-weight: 600;
      }
      .footer-grid ul {
          list-style: none;
          padding: 0;
          margin: 0;
      }
      .footer-grid li { margin-bottom: 10px; }
      .footer-grid a {
          color: rgba(255, 255, 255, 0.75);
      }
      .footer-grid a:hover { color: var(--color-white, #ffffff); text-decoration: none; }

      .footer-bottom {
          margin-top: 40px;
          padding-top: 24px;
          border-top: 1px solid rgba(255, 255, 255, 0.12);
          display: flex;
          justify-content: space-between;
          flex-wrap: wrap;
          gap: 12px;
          color: rgba(255, 255, 255, 0.55);
      }

      /* ---------- Solution Pages & Subpage Layouts ---------- */
      .page-hero {
          background: linear-gradient(180deg, var(--color-navy, #0a192f) 0%, #0f2744 100%);
          color: var(--color-white, #ffffff);
          padding: 72px 0 64px;
          position: relative;
          overflow: hidden;
      }
      .page-hero::after {
          content: "";
          position: absolute;
          top: -120px;
          right: -120px;
          width: 480px;
          height: 480px;
          background: radial-gradient(circle, rgba(30, 136, 229, 0.22) 0%, rgba(10, 25, 47, 0) 70%);
          pointer-events: none;
      }
      .breadcrumb {
          display: flex;
          align-items: center;
          gap: 8px;
          margin-bottom: 24px;
          font-size: 0.88rem;
          color: rgba(255, 255, 255, 0.65);
      }
      .breadcrumb a {
          color: rgba(255, 255, 255, 0.85);
          text-decoration: none;
      }
      .breadcrumb a:hover {
          color: var(--color-blue-200, #90caf9);
          text-decoration: underline;
      }
      .breadcrumb-sep {
          color: rgba(255, 255, 255, 0.4);
      }
      .page-hero h1 {
          font-size: 2.85rem;
          line-height: 1.15;
          letter-spacing: -0.025em;
          margin: 12px 0 18px;
          color: var(--color-white, #ffffff);
          max-width: 900px;
      }
      @media (max-width: 768px) {
          .page-hero h1 { font-size: 2.2rem; }
      }
      .page-hero-subtitle {
          font-size: 1.2rem;
          color: rgba(255, 255, 255, 0.85);
          max-width: 780px;
          line-height: 1.6;
          margin: 0 0 32px;
      }
      .page-hero-actions {
          display: flex;
          flex-wrap: wrap;
          gap: 14px;
          margin-bottom: 40px;
      }
      .page-hero-stats {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
          gap: 18px;
          padding-top: 32px;
          border-top: 1px solid rgba(255, 255, 255, 0.12);
      }
      .page-stat-item {
          background: rgba(255, 255, 255, 0.04);
          border: 1px solid rgba(255, 255, 255, 0.08);
          border-radius: var(--radius-md, 8px);
          padding: 16px 20px;
      }
      .page-stat-val {
          font-size: 1.5rem;
          font-weight: 700;
          color: var(--color-blue-200, #90caf9);
          font-family: var(--font-mono, monospace);
      }
      .page-stat-lbl {
          font-size: 0.82rem;
          color: rgba(255, 255, 255, 0.7);
          margin-top: 4px;
      }

      .solution-section {
          padding: 80px 0;
      }
      .solution-section:nth-of-type(even) {
          background: var(--bg-secondary, #f8fafc);
      }
      .section-heading {
          max-width: 760px;
          margin: 0 auto 52px;
          text-align: center;
      }
      .section-heading.text-left {
          text-align: left;
          margin: 0 0 40px;
      }
      .section-heading h2 {
          font-size: 2.2rem;
          letter-spacing: -0.02em;
          color: var(--color-navy, #0a192f);
          margin: 10px 0 14px;
      }
      .section-heading p {
          font-size: 1.1rem;
          color: var(--text-secondary, #4b5563);
          line-height: 1.6;
          margin: 0;
      }

      .workflow-grid {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
          gap: 24px;
      }
      .workflow-card {
          background: var(--bg-primary, #ffffff);
          border: 1px solid var(--border, #e2e8f0);
          border-radius: var(--radius-lg, 12px);
          padding: 28px;
          position: relative;
          transition: transform 0.15s ease, box-shadow 0.15s ease;
      }
      .workflow-card:hover {
          transform: translateY(-2px);
          box-shadow: 0 12px 28px rgba(10, 25, 47, 0.08);
      }
      .workflow-num {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          width: 36px;
          height: 36px;
          border-radius: 50%;
          background: var(--color-navy, #0a192f);
          color: var(--color-white, #ffffff);
          font-weight: 700;
          font-size: 0.9rem;
          font-family: var(--font-mono, monospace);
          margin-bottom: 16px;
      }
      .workflow-card h3 {
          font-size: 1.25rem;
          color: var(--color-navy, #0a192f);
          margin: 0 0 10px;
      }
      .workflow-card p {
          font-size: 0.95rem;
          color: var(--text-secondary, #4b5563);
          margin: 0 0 16px;
          line-height: 1.55;
      }

      .callout-box {
          background: rgba(30, 136, 229, 0.08);
          border: 1px solid rgba(30, 136, 229, 0.25);
          border-radius: var(--radius-md, 8px);
          padding: 20px 24px;
          display: flex;
          gap: 16px;
          align-items: flex-start;
          margin: 32px 0;
      }
      .callout-box.dark {
          background: rgba(255, 255, 255, 0.05);
          border-color: rgba(255, 255, 255, 0.15);
          color: rgba(255, 255, 255, 0.9);
      }
      .callout-icon {
          color: var(--color-blue-400, #1e88e5);
          flex-shrink: 0;
          font-size: 1.4rem;
      }
      .callout-content {
          font-size: 0.95rem;
          line-height: 1.55;
      }
      .callout-content h4 {
          margin: 0 0 4px;
          color: var(--color-navy, #0a192f);
      }
      .callout-box.dark .callout-content h4 {
          color: var(--color-white, #ffffff);
      }

      .agent-grid-2col {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 32px;
          align-items: center;
      }
      @media (max-width: 900px) {
          .agent-grid-2col { grid-template-columns: 1fr; }
      }

      .comparison-table-wrapper {
          overflow-x: auto;
          background: var(--bg-primary, #ffffff);
          border: 1px solid var(--border, #e2e8f0);
          border-radius: var(--radius-lg, 12px);
          box-shadow: 0 4px 16px rgba(0,0,0,0.02);
      }
      .comparison-table {
          width: 100%;
          border-collapse: collapse;
          text-align: left;
          font-size: 0.95rem;
      }
      .comparison-table th,
      .comparison-table td {
          padding: 16px 20px;
          border-bottom: 1px solid var(--border, #e2e8f0);
      }
      .comparison-table th {
          background: var(--bg-secondary, #f8fafc);
          color: var(--color-navy, #0a192f);
          font-weight: 700;
      }
      .comparison-table tr:last-child td {
          border-bottom: none;
      }
      .comparison-table .highlight-col {
          background: rgba(30, 136, 229, 0.04);
          font-weight: 600;
          color: var(--color-blue-500, #1565c0);
      }