:root {
      --navy: #071225;
      --navy-2: #0b1830;
      --blue: #2563eb;
      --cyan: #22d3ee;
      --indigo: #6366f1;
      --line: rgba(148, 163, 184, .18);
    }
    html { scroll-behavior: smooth; }
    body {
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      color: #0f172a;
      background:
        radial-gradient(circle at top left, rgba(37,99,235,.08), transparent 30%),
        radial-gradient(circle at 85% 10%, rgba(34,211,238,.10), transparent 24%),
        linear-gradient(180deg, #ffffff 0%, #fbfcff 45%, #f7f9ff 100%);
    }
    .focus-ring:focus-visible { outline: 3px solid #93c5fd; outline-offset: 3px; }
    .glass {
      background: rgba(255,255,255,.72);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      border: 1px solid rgba(255,255,255,.55);
      box-shadow: 0 20px 60px rgba(15, 23, 42, .08);
    }
    .section-shell {
      position: relative;
      isolation: isolate;
    }
    .section-shell::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      background-image:
        linear-gradient(rgba(37,99,235,.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(37,99,235,.06) 1px, transparent 1px);
      background-size: 38px 38px;
      mask-image: linear-gradient(to bottom, rgba(0,0,0,.7), transparent 95%);
      opacity: .55;
      pointer-events: none;
    }
    .section-number {
      letter-spacing: .22em;
    }
    .service-card, .principle-card, .approach-step {
      transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease;
    }
    .service-card:hover, .principle-card:hover, .approach-step:hover {
      transform: translateY(-4px);
      box-shadow: 0 24px 60px rgba(15, 23, 42, .10);
    }
    .hero-orb {
      filter: blur(40px);
      opacity: .9;
    }
    .grid-line {
      background-image: linear-gradient(rgba(255,255,255,.18) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.18) 1px, transparent 1px);
      background-size: 24px 24px;
    }
    .hero-panel {
      background:
        radial-gradient(circle at 20% 20%, rgba(37,99,235,.28), transparent 35%),
        radial-gradient(circle at 80% 25%, rgba(34,211,238,.20), transparent 28%),
        linear-gradient(145deg, rgba(6,10,24,.98), rgba(15,23,42,.94));
      box-shadow: 0 30px 80px rgba(2, 6, 23, .28);
    }
    .tiny-chip {
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.06);
    }