.mkn-hero {
    width: 100%;
    max-width: 640px;
    min-width: 320px;
    aspect-ratio: 1 / 1;
    flex: 1 1 400px;
    margin: 0 auto;
  }
  .mkn-hero svg { width: 100%; height: 100%; display: block; overflow: visible; }
 
  .mkn-hero .mkn-grid-line { stroke: #1a3428; stroke-width: 1; }
  .mkn-hero .mkn-corner { stroke: #9fb3a8; stroke-width: 1.5; opacity: 0.35; fill: none; }
 
  .mkn-hero .mkn-spoke-line { stroke: #9fb3a8; stroke-width: 1.3; stroke-dasharray: 2 5; opacity: 0.3; }
  .mkn-hero .mkn-icon-line  { stroke: #d8ded9; stroke-width: 1.6; fill: none; opacity: 0.8; }
  .mkn-hero .mkn-label {
    fill: #d8ded9;
    font-family: -apple-system, "Segoe UI", sans-serif;
    font-size: 8.5px;
    letter-spacing: 0.08em;
    opacity: 0.5;
    text-anchor: middle;
  }
 
  /* shared 8s cycle drives the whole system */
 
  .mkn-hero .mkn-outer-ring {
    stroke: #9fb3a8; stroke-width: 1; stroke-dasharray: 1 9; opacity: 0.3; fill: none;
    transform-origin: 320px 320px;
    animation: mkn-counter-spin 40s linear infinite;
  }
  @keyframes mkn-counter-spin { to { transform: rotate(-360deg); } }
 
  .mkn-hero .mkn-sweep {
    transform-origin: 320px 320px;
    animation: mkn-sweep-rotate 20s linear infinite;
  }
  @keyframes mkn-sweep-rotate { to { transform: rotate(360deg); } }
  .mkn-hero .mkn-sweep-line { stroke: #f2b134; stroke-width: 1.5; opacity: 0.55; }
  .mkn-hero .mkn-sweep-tip  { fill: #f2b134; opacity: 0.85; filter: drop-shadow(0 0 5px #f2b134); }
 
  .mkn-hero .mkn-hub-hex { stroke: #d8ded9; stroke-width: 1.5; fill: #0d1f16; opacity: 0.9; }
  .mkn-hero .mkn-hub-pulse {
    fill: none; stroke: #17a34a; stroke-width: 2;
    transform-origin: 320px 320px;
    animation: mkn-hub-pulse 1.3333s linear infinite;
    animation-delay: 0.96s;
    animation-fill-mode: backwards;
  }
  @keyframes mkn-hub-pulse { 0% { r: 16; opacity: 0.7; } 100% { r: 46; opacity: 0; } }
 
  /* MAKIN flame mark at the core, echoing the real logo */
  .mkn-hero .mkn-flame { animation: mkn-flame-color 8s ease-in-out infinite; }
  .mkn-hero .mkn-flame path:nth-child(2) { animation: mkn-flame-color 8s ease-in-out infinite; animation-delay: -1.3s; }
  .mkn-hero .mkn-flame path:nth-child(3) { animation: mkn-flame-color 8s ease-in-out infinite; animation-delay: -2.6s; }
  @keyframes mkn-flame-color {
    0%, 100% { fill: #f2b134; }
    50%      { fill: #17a34a; }
  }
 
  /* animation-fill-mode: backwards is the key fix here — without it, any element
     with a positive animation-delay renders its raw, un-animated SVG attributes
     (r="16", full opacity) for the duration of the delay, which is the "yellow
     circles flash on load" bug. This makes it hold the first keyframe instead. */
  .mkn-hero .mkn-node-flash {
    fill: #f2b134;
    opacity: 0;
    animation: mkn-node-flash 8s linear infinite;
    animation-fill-mode: backwards;
  }
  @keyframes mkn-node-flash {
    0%, 6%, 100% { opacity: 0; r: 16; }
    2%           { opacity: 0.55; r: 26; }
  }
 
  .mkn-hero .mkn-spoke-traveler {
    opacity: 0;
    animation: mkn-spoke-travel 8s linear infinite;
    animation-fill-mode: backwards;
    filter: drop-shadow(0 0 4px currentColor);
    fill: #f2b134;
  }
  @keyframes mkn-spoke-travel {
    0%        { offset-distance: 0%;   opacity: 1; }
    12%       { offset-distance: 100%; opacity: 1; }
    14%, 100% { offset-distance: 100%; opacity: 0; }
  }
 
  .mkn-hero .mkn-n0 { animation-delay: 0s;      offset-path: path("M540,320   L370,320"); }
  .mkn-hero .mkn-n1 { animation-delay: 1.3333s; offset-path: path("M430,510.5 L345,363.3"); }
  .mkn-hero .mkn-n2 { animation-delay: 2.6667s; offset-path: path("M210,510.5 L295,363.3"); }
  .mkn-hero .mkn-n3 { animation-delay: 4s;      offset-path: path("M100,320   L270,320"); }
  .mkn-hero .mkn-n4 { animation-delay: 5.3333s; offset-path: path("M210,129.5 L295,276.7"); }
  .mkn-hero .mkn-n5 { animation-delay: 6.6667s; offset-path: path("M430,129.5 L345,276.7"); }
 
  .mkn-hero .mkn-f0 { animation-delay: 0s; }
  .mkn-hero .mkn-f1 { animation-delay: 1.3333s; }
  .mkn-hero .mkn-f2 { animation-delay: 2.6667s; }
  .mkn-hero .mkn-f3 { animation-delay: 4s; }
  .mkn-hero .mkn-f4 { animation-delay: 5.3333s; }
  .mkn-hero .mkn-f5 { animation-delay: 6.6667s; }
 
  /* drill bit (Oil & Gas node) gets a quick spin burst on its turn, then drifts
     slowly the rest of the loop so it lands back at 0/360deg exactly when the
     cycle repeats — no snap-back, no "stuck" look. */
  .mkn-hero .mkn-drill-icon {
    transform-origin: 540px 320px;
  }
 
  /* energy node: a clean bolt-in-circle that flickers/pulses on its turn
     instead of rotating (a spinning bolt reads as broken, not "energy") */
  .mkn-hero .mkn-energy-icon {
    transform-origin: 430px 510.5px;
    animation: mkn-energy-flicker 8s linear infinite;
  }
  @keyframes mkn-energy-flicker {
    0%, 15.5% { opacity: 0.8; transform: scale(1); }
    18%       { opacity: 1;   transform: scale(1.18); }
    23%       { opacity: 0.8; transform: scale(1); }
    100%      { opacity: 0.8; transform: scale(1); }
  }
 
  @media (prefers-reduced-motion: reduce) {
    .mkn-hero .mkn-outer-ring, .mkn-hero .mkn-sweep, .mkn-hero .mkn-hub-pulse,
    .mkn-hero .mkn-flame, .mkn-hero .mkn-flame path,
    .mkn-hero .mkn-node-flash, .mkn-hero .mkn-spoke-traveler,
    .mkn-hero .mkn-drill-icon, .mkn-hero .mkn-turbine-icon { animation: none; }
  }