:root {
      --brand-teal: #14B8A6;
      --brand-cyan: #06B6D4;
      --brand-blue: #3B82F6;
      --brand-gradient: linear-gradient(135deg, var(--brand-teal) 0%, var(--brand-cyan) 50%, var(--brand-blue) 100%);
      --brand-bg: #050B0F;
    }

    body {
      background-color: var(--brand-bg);
      color: #E2E8F0;
      font-family: "Inter", sans-serif;
      letter-spacing: -0.015em;
      line-height: 1.65;
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    /* Brand-consistent visible keyboard focus ring (layers on top of the existing
       focus:border-cyan-400/30 utility, which is too low-contrast to serve as the
       only focus indicator for keyboard users) */
    a:focus-visible,
    button:focus-visible,
    input:focus-visible,
    select:focus-visible,
    textarea:focus-visible,
    [tabindex]:focus-visible,
    [role="button"]:focus-visible {
      outline: 2px solid var(--brand-cyan) !important;
      outline-offset: 3px;
      border-radius: 4px;
    }

    /* Trionn Typography Hierarchy: Familjen Grotesk for Headings */
    h1, .h1 {
      font-family: 'Familjen Grotesk', sans-serif;
      letter-spacing: -0.055em;
      line-height: 0.92;
      text-transform: uppercase;
    }
    h2, .h2 {
      font-family: 'Familjen Grotesk', sans-serif;
      letter-spacing: -0.05em;
      line-height: 0.95;
      text-transform: uppercase;
    }
    h3, .h3 {
      font-family: 'Familjen Grotesk', sans-serif;
      letter-spacing: -0.035em;
      line-height: 1.1;
    }
    h4, .h4 {
      font-family: 'Familjen Grotesk', sans-serif;
      letter-spacing: -0.025em;
      line-height: 1.25;
    }

    /* Trionn Editorial Serif Numbers & Accents */
    .editorial-num {
      font-family: 'Instrument Serif', 'PP Editorial New', Georgia, serif;
      font-style: italic;
      letter-spacing: -0.04em;
      line-height: 0.88;
    }
    .editorial-italic {
      font-family: 'Instrument Serif', 'PP Editorial New', Georgia, serif;
      font-style: italic;
      letter-spacing: -0.02em;
    }

    /* Header Navbar Typography: Inter */
    .nav-item, nav button, #mobile-menu button {
      font-family: "Inter", sans-serif !important;
    }

    /* Trionn Monospace UI Tags & Buttons */
    .tag-mono {
      font-family: 'Martian Mono', monospace;
      font-size: 11px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      font-weight: 500;
    }
    .btn-mono {
      font-family: 'Martian Mono', monospace;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      font-weight: 600;
    }

    /* Trionn Architectural Hairline Crosshair Plus */
    .plus-crosshair {
      position: absolute;
      width: 13px;
      height: 13px;
      pointer-events: none;
      opacity: 0.35;
      transition: opacity 0.3s ease, transform 0.3s ease;
    }
    .group:hover .plus-crosshair {
      opacity: 0.85;
      transform: rotate(90deg);
    }

    ::selection {
      background: var(--brand-cyan);
      color: #000000;
    }

    /* Hollow Stroke Typography */
    .text-stroke {
      -webkit-text-stroke: 1.5px rgba(6, 182, 212, 0.35);
      color: transparent;
      transition: all 0.4s ease;
    }
    .text-stroke:hover {
      -webkit-text-stroke: 1.5px var(--brand-cyan);
      color: rgba(6, 182, 212, 0.12);
    }

    /* Cloud Production Brand Gradient Text & Surface Styling (matches logo) */
    .gradient-cloud-text {
      background: var(--brand-gradient);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .gradient-cloud-bg {
      background: var(--brand-gradient);
      color: #FFFFFF !important;
    }

    #main-header-bg {
      background: radial-gradient(ellipse 65% 120% at 10% 0%, rgba(20, 184, 166, 0.22) 0%, transparent 70%),
        radial-gradient(ellipse 60% 120% at 90% 0%, rgba(59, 130, 246, 0.20) 0%, transparent 70%),
        rgba(14, 27, 32, 0.85) !important;
      border-bottom-color: transparent !important;
      backdrop-filter: none !important;
    }

    #main-header-bg.is-scrolled {
      /* background:
        radial-gradient(ellipse 65% 120% at 10% 0%, rgba(20, 184, 166, 0.22) 0%, transparent 70%),
        radial-gradient(ellipse 60% 120% at 90% 0%, rgba(59, 130, 246, 0.20) 0%, transparent 70%),
        rgba(14, 27, 32, 0.85) !important; */
      background: radial-gradient(ellipse 65% 120% at 10% 0%, rgb(20 184 166 / 28%) 0%, #00000000 70%), radial-gradient(ellipse 60% 120% at 90% 0%, rgb(59 130 246 / 42%) 0%, #00000057 70%), rgb(14 27 32 / 76%) !important;  
      border-bottom-color: rgba(255, 255, 255, 0.08) !important;
      backdrop-filter: blur(20px) !important;
    }
    /* header */
    #main-header-bg{
          background-color: rgb(27 45 56);
    }
    #main-header-bg .text-neutral-300{
      letter-spacing: .1em;
      font-size: 17px;
      border: none;
    }
     #main-header-bg .nav-item{
      letter-spacing: .1em;
      font-size: 16px;
      color: #fff;
     }
     .text-neutral-300.leading-relaxed {
      font-size: 1rem;
      letter-spacing: .05em;
    }
    div .uppercase{
      letter-spacing: .03em;
    }
    p.font-normal{
      font-size: 1rem;
      letter-spacing: .05em;
    }
    #testimonial-text{
      font-size: 18px;
      letter-spacing: .08em;
    }
    p.text-neutral-600{
      letter-spacing: .05em;
    }
    p.text-neutral-700{
      letter-spacing: .05em;
    }
    a.tracking-\[-0\.03em\] {
      letter-spacing: 0.05em;
    }
    #what-we-do .gradient-cloud-text{
      color: #000;
        background: None;
    -webkit-background-clip: text;
    -webkit-text-fill-color: #000;
  }
    #search-wrap button{
      /* background-color: none; */
    }

    footer .text-xs {
      font-size: 0.9rem;
    }

    footer h4 + ul {
      font-family: "Inter", sans-serif;
    }

    /* Hero headline word-cycle (SMART / BETTER / FASTER) */
    .hero-cycle-word {
      display: inline-block;
      text-align: left;
      vertical-align: top;
      transition: opacity 0.9s ease, transform 0.9s ease;
    }
    .hero-cycle-word.is-swapping {
      opacity: 0;
      transform: translateY(0.12em);
    }

    /* Hero background tinted with logo's teal-cyan-blue gradient */
    .hero-brand-bg {
      background:
        radial-gradient(ellipse 65% 55% at 10% 0%, rgba(20, 184, 166, 0.40) 0%, transparent 65%),
        radial-gradient(ellipse 60% 50% at 90% 15%, rgba(59, 130, 246, 0.35) 0%, transparent 65%),
        radial-gradient(ellipse 55% 45% at 50% 100%, rgba(6, 182, 212, 0.30) 0%, transparent 65%),
        #0E1B20;
    }

    /* Subtle Brand-Tinted Ambient Highlights */
    .radial-glow-ambient, .radial-glow-ambient {
      background: radial-gradient(circle, rgba(6, 182, 212, 0.10) 0%, rgba(59, 130, 246, 0.05) 40%, transparent 70%);
    }

    /* Infinite Marquee */
    @keyframes marquee {
      0% { transform: translateX(0%); }
      100% { transform: translateX(-50%); }
    }
    .animate-marquee {
      display: flex;
      width: 200%;
      animation: marquee 45s linear infinite;
    }
    .animate-marquee:hover {
      animation-play-state: paused;
    }

    /* Our Promise circle: continuous breathing (closer/further) motion */
    @keyframes promiseBreathe {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.06); }
    }
    .promise-breathe {
      animation: promiseBreathe 3.5s ease-in-out infinite;
    }

    /* Production AI & Cloud Stack: individual tech cards */
    .stack-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      flex-shrink: 0;
      width: 150px;
      height: 130px;
      padding: 1.25rem 1rem;
      background: #FFF;
      border-radius: 1rem;
      box-shadow: 0 4px 14px rgba(0,0,0,0.08);
      font-family: 'JetBrains Mono', monospace;
      font-size: 1rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      color: #262626;
      text-align: center;
      white-space: normal;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .stack-card:hover {
      transform: translateY(-4px) scale(1.04);
      box-shadow: 0 10px 24px rgba(0,0,0,0.14);
    }
    .stack-card i,
    .stack-card svg {
      width: 34px;
      height: 34px;
      flex-shrink: 0;
      transition: transform 0.3s ease;
    }
    .stack-card:hover i,
    .stack-card:hover svg {
      transform: scale(1.12);
    }

    /* Trionn Button Dual-Underline Hover Effect */
    @keyframes trionnMarqueeAnim {
      0% { transform: translate3d(0, 0, 0); }
      100% { transform: translate3d(-50%, 0, 0); }
    }

    .vision-marquee-anim {
      display: flex;
      width: max-content;
      animation: trionnMarqueeAnim 45s linear infinite;
      will-change: transform;
    }

    .vision-marquee-anim:hover {
      animation-play-state: paused;
    }

    /* ── Hero Neural Network Brain ──────────────────────────────────────────
       An animated constellation of AI capability neurons connected by synapse
       paths with flowing data particles. Central hub radiates connections to
       each capability node (LLM, Voice, NLP, Vision, Gen AI, Edge ML).
       Pointer-parallax via --px/--py from main.js. */
    .nn-brain-scene {
      position: absolute;
      inset: 0;
      overflow: visible;
      isolation: isolate;
      background: transparent;
      pointer-events: none;
    }

    /* Blueprint grid — soft radial feathered circular grid, drifts slowly */
    .nn-brain-grid {
      position: absolute;
      inset: -15%;
      background-image:
        linear-gradient(to right, rgba(167, 139, 250, 0.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(167, 139, 250, 0.05) 1px, transparent 1px);
      background-size: 46px 46px;
      -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 15%, transparent 68%);
      mask-image: radial-gradient(circle at 50% 50%, #000 15%, transparent 68%);
      transform: translate3d(calc(var(--px, 0) * -12px), calc(var(--py, 0) * -12px), 0);
      animation: nnGridDrift 26s linear infinite;
      pointer-events: none;
    }

    /* Aurora glow — soft, centered radial lights that melt seamlessly into the background */
    .nn-brain-aurora {
      position: absolute;
      border-radius: 50%;
      filter: blur(80px);
      pointer-events: none;
    }
    .nn-brain-aurora-a {
      top: 12%;
      left: 14%;
      width: 54%;
      aspect-ratio: 1;
      background: radial-gradient(circle, rgba(167, 139, 250, 0.20) 0%, rgba(167, 139, 250, 0.05) 45%, transparent 70%);
      animation: nnAuroraDriftA 22s ease-in-out infinite alternate;
    }
    .nn-brain-aurora-b {
      bottom: 10%;
      right: 14%;
      width: 50%;
      aspect-ratio: 1;
      background: radial-gradient(circle, rgba(244, 114, 182, 0.16) 0%, rgba(244, 114, 182, 0.04) 45%, transparent 70%);
      animation: nnAuroraDriftB 27s ease-in-out infinite alternate;
    }

    /* Concentric decorative arcs — neural field rings (feathered outwards) */
    .nn-brain-arc {
      position: absolute;
      border-radius: 50%;
      border: 1px solid rgba(167, 139, 250, 0.08);
      pointer-events: none;
      -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 45%, transparent 85%);
      mask-image: radial-gradient(circle at 50% 50%, #000 45%, transparent 85%);
    }
    .nn-brain-arc-outer {
      top: 50%;
      left: 50%;
      width: 88%;
      aspect-ratio: 1;
      transform: translate3d(calc(-50% + var(--px, 0) * 7px), calc(-50% + var(--py, 0) * 7px), 0);
    }
    .nn-brain-arc-inner {
      top: 50%;
      left: 50%;
      width: 56%;
      aspect-ratio: 1;
      border-style: dashed;
      border-color: rgba(167, 139, 250, 0.12);
      transform: translate3d(calc(-50% + var(--px, 0) * 11px), calc(-50% + var(--py, 0) * 11px), 0);
      animation: nnOrbitSpin 90s linear infinite;
    }

    /* Synapse links between neurons — drawn by initNeuralBrain() in main.js */
    .nn-brain-synapses {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      overflow: visible;
      pointer-events: none;
    }
    .nn-synapse {
      fill: none;
      stroke: rgba(167, 139, 250, 0.35);
      stroke-width: 1;
      stroke-linecap: round;
      stroke-dasharray: 5 9;
      vector-effect: non-scaling-stroke;
      animation: nnSynapseFlow 11s linear infinite;
    }
    .nn-synapse-warm {
      stroke: rgba(244, 114, 182, 0.30);
      stroke-dasharray: 3 12;
      animation-duration: 16s;
    }
    .nn-synapse-cool {
      stroke: rgba(94, 234, 212, 0.30);
      animation-duration: 13s;
    }
    .nn-synapse-gold {
      stroke: rgba(251, 191, 36, 0.28);
      stroke-dasharray: 4 10;
      animation-duration: 14s;
    }
    .nn-synapse-mint {
      stroke: rgba(52, 211, 153, 0.28);
      stroke-dasharray: 3 11;
      animation-duration: 15s;
    }
    .nn-synapse-ice {
      stroke: rgba(147, 197, 253, 0.28);
      stroke-dasharray: 4 9;
      animation-duration: 12s;
    }
    .nn-brain-packet {
      fill: #C4B5FD;
      filter: drop-shadow(0 0 5px rgba(196, 181, 253, 0.95));
    }

    /* ── Panel container (frameless, open canvas) ─────────────────────────── */
    .nn-brain-panel {
      isolation: isolate;
    }

    /* Neuron index chip */
    .nn-neuron-index {
      position: absolute;
      top: -4px;
      right: -2px;
      z-index: 2;
      min-width: 20px;
      padding: 1px 4px 2px;
      border-radius: 5px;
      background: rgba(5, 11, 15, 0.85);
      border: 1px solid var(--accent-soft, rgba(167, 139, 250, 0.4));
      font-family: 'Martian Mono', monospace;
      font-size: 8px;
      letter-spacing: 0.06em;
      line-height: 1.35;
      text-align: center;
      color: var(--accent, #A78BFA);
      opacity: 0.9;
    }

    /* ── Neuron ── */
    .nn-neuron {
      position: absolute;
      left: var(--x, 50%);
      top: var(--y, 50%);
      width: 0;
      height: 0;
      z-index: 2;
      pointer-events: auto;
    }

    /* Neuron positions — multi-tier constellation */
    .nn-neuron-hub { --x: 50%; --y: 49%; }

    /* Outer tier (wide perimeter) */
    .nn-neuron-a { --x: 14%; --y: 17%; }   /* LLM Engine - Top Left */
    .nn-neuron-b { --x: 86%; --y: 17%; }   /* Voice AI - Top Right */
    .nn-neuron-c { --x: 15%; --y: 81%; }   /* NLP Engine - Bottom Left */
    .nn-neuron-d { --x: 85%; --y: 81%; }   /* Computer Vision - Bottom Right */
    .nn-neuron-e { --x: 8%;  --y: 49%; }   /* Gen AI - Far Left */
    .nn-neuron-f { --x: 92%; --y: 49%; }   /* Edge ML - Far Right */

    /* Inner tier (filling the middle space) */
    .nn-neuron-g { --x: 32%; --y: 32%; }   /* Voice Translator - Mid Top-Left */
    .nn-neuron-h { --x: 68%; --y: 32%; }   /* Autonomous Agents - Mid Top-Right */
    .nn-neuron-i { --x: 31%; --y: 67%; }   /* Neural RAG - Mid Bottom-Left */
    .nn-neuron-j { --x: 69%; --y: 67%; }   /* Model Tuning - Mid Bottom-Right */
    .nn-neuron-k { --x: 50%; --y: 17%; }   /* Deep Learning - Center Top */
    .nn-neuron-l { --x: 50%; --y: 81%; }   /* Realtime Inference - Center Bottom */

    /* Mobile: compact responsive layout */
    @media (max-width: 639px) {
      .nn-neuron-hub { --x: 50%; --y: 49%; }
      .nn-neuron-a { --x: 18%; --y: 16%; }
      .nn-neuron-b { --x: 82%; --y: 16%; }
      .nn-neuron-c { --x: 18%; --y: 82%; }
      .nn-neuron-d { --x: 82%; --y: 82%; }
      .nn-neuron-e { --x: 10%; --y: 49%; }
      .nn-neuron-f { --x: 90%; --y: 49%; }
      .nn-neuron-g { --x: 32%; --y: 32%; }
      .nn-neuron-h { --x: 68%; --y: 32%; }
      .nn-neuron-i { --x: 32%; --y: 66%; }
      .nn-neuron-j { --x: 68%; --y: 66%; }
      .nn-neuron-k { --x: 50%; --y: 18%; }
      .nn-neuron-l { --x: 50%; --y: 80%; }
      .nn-neuron-stage {
        width: clamp(46px, 12vw, 56px);
        height: clamp(46px, 12vw, 56px);
      }
      .nn-neuron-stage-hub {
        width: clamp(66px, 17vw, 84px);
        height: clamp(66px, 17vw, 84px);
      }
      .nn-neuron-tag {
        padding: 4px 8px;
      }
      .nn-neuron-label {
        font-size: 7.5px;
        letter-spacing: 0.06em;
      }
      .nn-telemetry-chip {
        display: none;
      }
    }
    .nn-neuron-anchor {
      position: absolute;
      left: 0;
      top: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      transform: translate(-50%, -50%);
      animation-timing-function: ease-in-out;
      animation-iteration-count: infinite;
      animation-duration: calc(19s * var(--d, 1));
      animation-delay: var(--fd, 0s);
      will-change: transform;
    }
    .nn-neuron-hub .nn-neuron-anchor { animation-name: nnNeuronDrift1; }
    .nn-neuron-a .nn-neuron-anchor   { animation-name: nnNeuronDrift1; }
    .nn-neuron-b .nn-neuron-anchor   { animation-name: nnNeuronDrift2; }
    .nn-neuron-c .nn-neuron-anchor   { animation-name: nnNeuronDrift3; }
    .nn-neuron-d .nn-neuron-anchor   { animation-name: nnNeuronDrift2; }
    .nn-neuron-e .nn-neuron-anchor   { animation-name: nnNeuronDrift3; }
    .nn-neuron-f .nn-neuron-anchor   { animation-name: nnNeuronDrift1; }
    .nn-neuron-g .nn-neuron-anchor   { animation-name: nnNeuronDrift2; }
    .nn-neuron-h .nn-neuron-anchor   { animation-name: nnNeuronDrift3; }
    .nn-neuron-i .nn-neuron-anchor   { animation-name: nnNeuronDrift1; }
    .nn-neuron-j .nn-neuron-anchor   { animation-name: nnNeuronDrift2; }
    .nn-neuron-k .nn-neuron-anchor   { animation-name: nnNeuronDrift3; }
    .nn-neuron-l .nn-neuron-anchor   { animation-name: nnNeuronDrift1; }

    /* Floating neural telemetry chips */
    .nn-telemetry-chip {
      position: absolute;
      left: var(--x);
      top: var(--y);
      transform: translate(-50%, -50%);
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 3px 8px;
      border-radius: 6px;
      background: rgba(5, 11, 15, 0.82);
      border: 1px solid rgba(167, 139, 250, 0.28);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      font-family: 'Martian Mono', monospace;
      font-size: 7.5px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: rgba(224, 220, 254, 0.82);
      white-space: nowrap;
      pointer-events: none;
      z-index: 1;
      animation: nnChipBreathe 6s ease-in-out infinite alternate;
      animation-delay: var(--cd, 0s);
    }
    .nn-telemetry-dot {
      width: 4px;
      height: 4px;
      border-radius: 50%;
    }
    @keyframes nnChipBreathe {
      0%   { opacity: 0.7; transform: translate(-50%, -50%) scale(0.97); }
      100% { opacity: 0.95; transform: translate(-50%, -50%) scale(1.03); }
    }

    /* Inner bob — keeps the glyph alive */
    .nn-neuron-float {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      animation: nnNeuronBob 7.5s ease-in-out infinite;
      animation-delay: var(--fd, 0s);
    }

    .nn-neuron-stage {
      position: relative;
      width: clamp(58px, 7vw, 80px);
      height: clamp(58px, 7vw, 80px);
      display: grid;
      place-items: center;
      animation: nnNeuronMaterialize 1.1s cubic-bezier(0.22, 0.8, 0.24, 1) both;
    }
    .nn-neuron-stage-hub {
      width: clamp(88px, 10.5vw, 122px);
      height: clamp(88px, 10.5vw, 122px);
    }

    /* Glow disc behind glyph */
    .nn-neuron-halo {
      position: absolute;
      inset: -22%;
      border-radius: 50%;
      background: radial-gradient(circle, var(--accent-soft, rgba(167, 139, 250, 0.35)) 0%, rgba(5, 11, 15, 0) 68%);
      filter: blur(14px);
      animation: nnHaloPulse 5.5s ease-in-out infinite;
      animation-delay: var(--fd, 0s);
    }
    .nn-neuron-hub .nn-neuron-halo {
      inset: -32%;
      filter: blur(22px);
      animation-duration: 4s;
    }

    /* Orbit rings — counter-rotating hairlines */
    .nn-neuron-orbit {
      position: absolute;
      inset: 2%;
      border-radius: 50%;
      border: 1px dashed var(--accent-soft, rgba(167, 139, 250, 0.35));
      opacity: 0.75;
      animation: nnOrbitSpin 16s linear infinite;
    }
    .nn-neuron-orbit-2 {
      inset: -8%;
      border-style: solid;
      border-color: rgba(148, 160, 220, 0.10);
      animation-duration: 26s;
      animation-direction: reverse;
    }
    .nn-neuron-orbit-3 {
      inset: -16%;
      border-style: dotted;
      border-color: rgba(167, 139, 250, 0.12);
      animation-duration: 38s;
    }

    /* Bolder rings for the WHAT WE DO service-card icons (light background) */
    .wwd-icon-box .nn-neuron-orbit {
      border-width: 2.5px;
      opacity: 1;
    }
    .wwd-icon-box .nn-neuron-orbit-2 {
      border-width: 2px;
      border-color: var(--accent-soft, rgba(167, 139, 250, 0.35));
      opacity: 0.6;
    }
    .wwd-icon-box .nn-neuron-halo {
      opacity: 0.9;
    }

    .nn-neuron-icon {
      position: relative;
      z-index: 1;
      width: 46%;
      height: 46%;
      color: var(--accent, #A78BFA);
      stroke-width: 1.1;
      filter: drop-shadow(0 0 10px var(--accent-soft, rgba(167, 139, 250, 0.45)));
      animation: nnIconBreathe 6s ease-in-out infinite;
      animation-delay: var(--fd, 0s);
    }
    .nn-neuron-hub .nn-neuron-icon {
      width: 42%;
      height: 42%;
      filter: drop-shadow(0 0 18px var(--accent-soft, rgba(167, 139, 250, 0.65)));
    }

    /* Frosted label pill */
    .nn-neuron-tag {
      position: relative;
      z-index: 1;
      padding: 6px 13px 7px;
      border-radius: 999px;
      background: linear-gradient(180deg, rgba(9, 12, 30, 0.72) 0%, rgba(5, 11, 15, 0.82) 100%);
      border: 1px solid var(--accent-soft, rgba(167, 139, 250, 0.35));
      box-shadow:
        0 0 0 1px rgba(5, 11, 15, 0.6),
        0 10px 26px -14px rgba(0, 0, 0, 0.9),
        0 0 18px -6px var(--accent-soft, rgba(167, 139, 250, 0.35));
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      white-space: nowrap;
      transition: transform 0.35s cubic-bezier(0.22, 0.8, 0.24, 1), box-shadow 0.35s ease;
    }
    .nn-neuron:hover .nn-neuron-tag {
      transform: translateY(-3px);
      box-shadow:
        0 0 0 1px rgba(5, 11, 15, 0.6),
        0 16px 30px -14px rgba(0, 0, 0, 0.95),
        0 0 26px -4px var(--accent-soft, rgba(167, 139, 250, 0.55));
    }
    .nn-neuron:hover .nn-neuron-icon {
      filter: drop-shadow(0 0 16px var(--accent-soft, rgba(167, 139, 250, 0.8)));
    }

    .nn-neuron-label {
      display: block;
      font-family: 'Martian Mono', monospace;
      font-size: 9px;
      line-height: 1.3;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      font-weight: 600;
      color: #ECFEFF;
      text-align: center;
      text-shadow: 0 1px 6px rgba(0, 0, 0, 0.85);
      pointer-events: none;
    }

    @keyframes nnGridDrift {
      from { background-position: 0 0; }
      to   { background-position: 46px 46px; }
    }
    @keyframes nnAuroraDriftA {
      from { transform: translate3d(0, 0, 0) scale(1); }
      to   { transform: translate3d(9%, 7%, 0) scale(1.14); }
    }
    @keyframes nnAuroraDriftB {
      from { transform: translate3d(0, 0, 0) scale(1.08); }
      to   { transform: translate3d(-8%, -6%, 0) scale(0.94); }
    }
    @keyframes nnSynapseFlow {
      to { stroke-dashoffset: -52; }
    }
    @keyframes nnNeuronDrift1 {
      0%, 100% { transform: translate(-50%, -50%) translate3d(0, 0, 0); }
      30%      { transform: translate(-50%, -50%) translate3d(-13px, 9px, 0); }
      62%      { transform: translate(-50%, -50%) translate3d(10px, -12px, 0); }
      82%      { transform: translate(-50%, -50%) translate3d(-4px, -4px, 0); }
    }
    @keyframes nnNeuronDrift2 {
      0%, 100% { transform: translate(-50%, -50%) translate3d(0, 0, 0); }
      26%      { transform: translate(-50%, -50%) translate3d(11px, 10px, 0); }
      58%      { transform: translate(-50%, -50%) translate3d(-12px, -8px, 0); }
      80%      { transform: translate(-50%, -50%) translate3d(3px, -5px, 0); }
    }
    @keyframes nnNeuronDrift3 {
      0%, 100% { transform: translate(-50%, -50%) translate3d(0, 0, 0); }
      28%      { transform: translate(-50%, -50%) translate3d(-9px, -11px, 0); }
      60%      { transform: translate(-50%, -50%) translate3d(14px, 6px, 0); }
      84%      { transform: translate(-50%, -50%) translate3d(-5px, 6px, 0); }
    }
    @keyframes nnNeuronBob {
      0%, 100% { transform: translateY(0); }
      50%      { transform: translateY(-7px); }
    }
    @keyframes nnNeuronMaterialize {
      from { opacity: 0; transform: scale(0.82) translateY(10px); }
      to   { opacity: 1; transform: scale(1) translateY(0); }
    }
    @keyframes nnHaloPulse {
      0%, 100% { opacity: 0.55; transform: scale(0.92); }
      50%      { opacity: 1;    transform: scale(1.06); }
    }
    @keyframes nnOrbitSpin {
      from { transform: rotate(0deg); }
      to   { transform: rotate(360deg); }
    }
    @keyframes nnIconBreathe {
      0%, 100% { transform: translateY(0) scale(1); }
      50%      { transform: translateY(-3px) scale(1.04); }
    }


    /* 3D Tilt container */
    .tilt-card {
      transform-style: preserve-3d;
      perspective: 1200px;
      transition: transform 0.25s ease-out, box-shadow 0.3s ease;
    }
    .tilt-card-inner {
      transition: transform 0.25s ease-out;
      transform-style: preserve-3d;
    }

    /* Service cards + showcase case-study cards: !important beats the inline
       transform the tilt script keeps writing on mousemove/mouseleave, so
       the lift still shows. */
    .services-col .group,
    .showcase-grid .group {
      transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    }
    .services-col .group:hover,
    .showcase-grid .group:hover {
      transform: translateY(-8px) !important;
      box-shadow: 0 20px 45px -15px rgba(0, 0, 0, 0.22);
    }

    /* Starburst badge */
    .starburst-badge {
      clip-path: polygon(50% 0%, 63% 13%, 80% 6%, 86% 23%, 100% 29%, 97% 47%, 100% 65%, 88% 74%, 84% 92%, 67% 89%, 55% 100%, 39% 92%, 24% 97%, 18% 81%, 2% 76%, 8% 59%, 0% 43%, 12% 31%, 9% 14%, 27% 15%, 36% 2%);
    }

    /* Animated Network Flight Data Pulse */
    @keyframes streamData {
      0% { stroke-dashoffset: 240; }
      100% { stroke-dashoffset: 0; }
    }
    .data-flow-line {
      stroke-dasharray: 8 16;
      animation: streamData 3s linear infinite;
    }

    /* Architectural Trionn-Grade Animations & Shading */
    @keyframes spinSlow {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }
    .animate-spin-slow {
      animation: spinSlow 22s linear infinite;
    }
    .hero-glow-ring {
      box-shadow: 0 0 35px rgba(0, 210, 211, 0.25), inset 0 0 15px rgba(0, 210, 211, 0.2);
    }

    /* Ambient Cyber Floating Pixel Cubes */
    .cyber-pixel {
      position: absolute;
      width: 10px;
      height: 10px;
      background: #FFFFFF;
      opacity: 0.45;
      pointer-events: none;
    }

    /* Custom Scrollbar */
    ::-webkit-scrollbar {
      width: 8px;
    }
    ::-webkit-scrollbar-track {
      background: var(--brand-bg);
    }
    ::-webkit-scrollbar-thumb {
      background: #272727;
      border-radius: 4px;
    }
    ::-webkit-scrollbar-thumb:hover {
      background: var(--brand-cyan);
    }
  
    /* Ultra-sleek frosted glass scrollbar for inspection panel */
    #track-record-inspect-content {
      scrollbar-width: thin;
      scrollbar-color: rgba(17, 17, 19, 0.15) transparent;
    }
    #track-record-inspect-content::-webkit-scrollbar {
      width: 5px;
    }
    #track-record-inspect-content::-webkit-scrollbar-track {
      background: transparent;
    }
    #track-record-inspect-content::-webkit-scrollbar-thumb {
      background: rgba(17, 17, 19, 0.16);
      border-radius: 9999px;
    }
    #track-record-inspect-content::-webkit-scrollbar-thumb:hover {
      background: rgba(17, 17, 19, 0.32);
    }

    /* Custom cursor effect disabled — using normal system cursor */
    .cp-cursor-dot,
    .cp-cursor-ring {
      display: none !important;
      position: fixed;
      top: 0;
      left: 0;
      border-radius: 9999px;
      pointer-events: none;
      z-index: 9999;
      opacity: 0;
      will-change: transform;
    }
    .cp-cursor-dot {
      width: 7px;
      height: 7px;
      margin: -3.5px 0 0 -3.5px;
      background: #FFFFFF;
      mix-blend-mode: difference;
      transition: opacity 0.2s ease, transform 0.15s ease;
    }
    .cp-cursor-ring {
      width: 34px;
      height: 34px;
      margin: -17px 0 0 -17px;
      border: 1.5px solid #FFFFFF;
      mix-blend-mode: difference;
      transition: width 0.25s ease, height 0.25s ease, margin 0.25s ease, opacity 0.2s ease, background-color 0.25s ease, border-color 0.25s ease, transform 0.15s ease;
    }
    .cp-cursor-dot.is-visible,
    .cp-cursor-ring.is-visible {
      opacity: 1;
    }
    .cp-cursor-dot.is-hidden {
      opacity: 0;
    }
    .cp-cursor-ring.is-active {
      transform: scale(0.85);
    }

    /* Page Preloader — minimal: a small spinner + label, simple fade-out when done */
    #cp-loader {
      position: fixed;
      inset: 0;
      z-index: 10000;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--brand-bg);
      transition: opacity 0.45s ease;
    }
    #cp-loader.cp-loader-hidden {
      opacity: 0;
      pointer-events: none;
    }
    .cp-loader-inner {
      display: flex;
      align-items: center;
      gap: 14px;
    }
    .cp-loader-spinner {
      width: 20px;
      height: 20px;
      border-radius: 9999px;
      border: 2px solid rgba(6, 182, 212, 0.18);
      border-top-color: var(--brand-cyan);
      flex-shrink: 0;
      animation: cpLoaderSpin 0.8s linear infinite;
    }
    @keyframes cpLoaderSpin {
      to { transform: rotate(360deg); }
    }
    .cp-loader-text {
      font-family: 'Familjen Grotesk', 'Inter', sans-serif;
      font-size: 15px;
      font-weight: 600;
      letter-spacing: 0.01em;
      color: #D8D8D8;
      display: inline-flex;
      align-items: baseline;
    }
    .cp-loader-dots span {
      display: inline-block;
      animation: cpLoaderDot 1.4s infinite;
      opacity: 0;
    }
    .cp-loader-dots span:nth-child(1) { animation-delay: 0s; }
    .cp-loader-dots span:nth-child(2) { animation-delay: 0.2s; }
    .cp-loader-dots span:nth-child(3) { animation-delay: 0.4s; }
    @keyframes cpLoaderDot {
      0%, 20% { opacity: 0; }
      50% { opacity: 1; }
      100% { opacity: 0; }
    }

    /* Respect OS-level reduced-motion preference: stop continuous/looping motion
       (marquees, floating, pulsing, spinning, the cursor-chase effect) and let the
       native cursor show. GSAP-driven entrance/scroll animations are sped up to
       near-instant via main.js. */
    @media (prefers-reduced-motion: reduce) {
      .animate-marquee,
      .vision-marquee-anim,
      .animate-float,
      .animate-float-delayed,
      .animate-pulse-glow,
      .animate-shimmer,
      .animate-spin-slow,
      .data-flow-line,
      .cp-loader-spinner,
      .cp-loader-dots span {
        animation: none !important;
      }

      .nn-neuron,
      .nn-neuron-anchor,
      .nn-neuron-float,
      .nn-neuron-halo,
      .nn-neuron-orbit,
      .nn-neuron-icon,
      .nn-brain-grid,
      .nn-brain-aurora,
      .nn-brain-arc,
      .nn-synapse {
        animation: none !important;
        opacity: 1 !important;
      }
      .nn-neuron-anchor {
        transform: translate(-50%, -50%) !important;
      }
      .nn-neuron-float {
        transform: none !important;
      }
      .nn-brain-grid,
      .nn-brain-aurora,
      .nn-brain-arc {
        transform: none !important;
      }
      .nn-brain-packet {
        display: none !important;
      }

      html, body, a, button, [onclick], .cursor-pointer, input, select, textarea, label, [role="button"] {
        cursor: auto !important;
      }
      .cp-cursor-dot,
      .cp-cursor-ring {
        display: none !important;
      }
    }