:root {
      --carbon: #FFFFFF;
      --graphite: #F3F5F7;
      --surface: #FFFFFF;
      --mist: #EEF1F3;
      --paper: #11161B;
      --ink: #11161B;
      --mute: #5F6B76;
      --tech: #1478FF;
      --electric: #0B7FD4;
      --copper: #C56A28;
      --border-dark: rgba(12,24,36,0.10);
      --border-light: rgba(12,24,36,0.12);
      --header-h: 76px;
    }
    html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); }
    body {
      font-family: Manrope, sans-serif;
      background: #FFFFFF;
      color: #11161B;
      overflow-x: hidden;
    }
    h1, h2, h3, h4, .font-heading { font-family: "Space Grotesk", sans-serif; }
    .tech-label { font-family: "IBM Plex Mono", ui-monospace, monospace; letter-spacing: 0.14em; }
    ::selection { background: rgba(20,120,255,0.25); color: #11161B; }
    ::-webkit-scrollbar { width: 10px; height: 10px; }
    ::-webkit-scrollbar-track { background: #EEF1F3; }
    ::-webkit-scrollbar-thumb { background: #C5CED6; border: 2px solid #EEF1F3; }
    a, button, select { cursor: pointer; }
    *:focus-visible {
      outline: 2px solid var(--electric);
      outline-offset: 3px;
    }
    .skip-link {
      position: absolute; left: 1rem; top: -40px; z-index: 80;
      background: var(--tech); color: #fff; padding: 0.5rem 1rem;
    }
    .skip-link:focus { top: 0.75rem; }
    .eng-grid {
      background-image:
        linear-gradient(rgba(12,24,36,0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(12,24,36,0.05) 1px, transparent 1px);
      background-size: 48px 48px;
    }
    .eng-grid-light {
      background-image:
        linear-gradient(rgba(12,24,36,0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(12,24,36,0.06) 1px, transparent 1px);
      background-size: 48px 48px;
    }
    .grain::after {
      content: "";
      pointer-events: none;
      position: absolute; inset: 0;
      opacity: 0.028;
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.55'/></svg>");
      mix-blend-mode: multiply;
    }
    .nav-shell {
      transition: background 0.35s ease, backdrop-filter 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
      background: transparent;
      color: var(--ink);
    }
    .nav-shell.is-scrolled {
      background: #FFFFFF;
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border-color: rgba(12, 24, 36, 0.12);
      box-shadow: 0 10px 30px rgba(12, 24, 36, 0.08);
      color: var(--ink);
    }
    .nav-shell.is-scrolled a:not(.bg-tech) {
      color: inherit;
    }
    .power-line {
      stroke: var(--electric);
      stroke-width: 1.5;
      fill: none;
      stroke-dasharray: 6 10;
      animation: flow 8s linear infinite;
    }
    @keyframes flow { to { stroke-dashoffset: -160; } }
    .signal-pulse {
      animation: pulse 2.4s ease-in-out infinite;
    }
    @keyframes pulse {
      0%, 100% { opacity: 0.35; }
      50% { opacity: 1; }
    }
    .img-cover { object-fit: cover; width: 100%; height: 100%; }
    .clip-reveal { clip-path: inset(0 0 0 0); }
    .hover-mod:hover .hover-img { transform: scale(1.03); }
    .hover-mod .hover-img { transition: transform 0.5s ease; }
    .principle-card { position: relative; }
    .principle-glow {
      position: absolute; inset: -1px; pointer-events: none; opacity: 0;
      border: 1px solid transparent;
      border-radius: 12px;
      background: linear-gradient(var(--carbon), var(--carbon)) padding-box,
                  radial-gradient(240px circle at var(--mx,50%) var(--my,50%), rgba(20,120,255,0.85), transparent 55%) border-box;
      mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      mask-composite: exclude;
      -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      -webkit-mask-composite: xor;
      padding: 1px;
      transition: opacity 0.25s ease;
    }
    @media (hover: hover) and (pointer: fine) {
      .principle-card:hover .principle-glow { opacity: 1; }
    }
    .epc-track {
      background: linear-gradient(90deg, rgba(20,120,255,0.25), rgba(20,120,255,0.25));
      transform-origin: left center;
      transform: scaleX(0);
    }
    .modal-scrim { background: rgba(12, 24, 36, 0.35); }
    .arch-path {
      fill: none;
      stroke: rgba(20,120,255,0.35);
      stroke-width: 1.4;
    }
    .arch-flow {
      fill: none;
      stroke: #1478FF;
      stroke-width: 1.8;
      stroke-dasharray: 8 18;
      animation: flow 5.5s linear infinite;
      filter: drop-shadow(0 0 4px rgba(20,120,255,0.3));
    }
    .badge-light {
      background: #FFFFFF;
      color: var(--electric);
      border: 1px solid rgba(12,24,36,0.12);
    }
    [data-hero-reveal], [data-section-title], [data-service-card], [data-project-card],
    [data-process-step], [data-contact-reveal], [data-app-card], [data-principle] {
      visibility: visible;
    }
    @media (prefers-reduced-motion: reduce) {
      .power-line, .arch-flow, .signal-pulse { animation: none !important; }
      html { scroll-behavior: auto; }
    }
    @media (max-width: 767px) {
      .hover-mod:hover .hover-img { transform: none; }
    }