/* ---- Hero callouts (HTML overlay: encircled glowing badges + connector lines) ---- */
    .hero .container { position: relative; }
    /* Brighten the homepage hero photo + lighten the dark overlays */
    .hero .hero-media img { filter: brightness(1.26) saturate(1.1) contrast(1.02); }
    .hero .hero-media::after {
      background: linear-gradient(100deg, rgba(10,28,52,.58) 0%, rgba(12,34,62,.40) 30%, rgba(14,40,72,.18) 55%, rgba(18,52,92,.03) 80%, rgba(18,52,92,0) 100%);
    }
    /* Soft right-side scrim so callouts stay legible over the bright sky */
    .hero-media::before {
      content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
      background: linear-gradient(270deg, rgba(6,18,36,.66) 0%, rgba(6,18,36,.5) 16%, rgba(6,18,36,.28) 34%, rgba(8,22,42,0) 52%);
    }
    .hero-flow {
      position: absolute; top: clamp(96px, 13vh, 150px); right: var(--gutter); z-index: 3;
      display: flex; flex-direction: column; gap: clamp(1.5rem, 3vw, 2.6rem); width: min(372px, 37vw);
    }
    .hf-item { display: flex; align-items: center; gap: .55rem; }
    /* SVG connector wires running from the rig out to each badge */
    .hf-wires { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
    .hf-w-base { fill: none; stroke: rgba(40,180,255,.55); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 4px rgba(30,170,250,.7)); }
    .hf-w-flow { fill: none; stroke: rgba(120,225,255,1); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 2.5 180; filter: drop-shadow(0 0 6px rgba(40,190,255,1)) drop-shadow(0 0 12px rgba(30,170,250,.85)); animation: hfFlow 3.6s linear infinite; }
    .hf-wire:nth-child(2) .hf-w-flow { animation-delay: 1.2s; }
    .hf-wire:nth-child(3) .hf-w-flow { animation-delay: 2.4s; }
    .hf-w-dot { fill: rgba(150,235,255,1); filter: drop-shadow(0 0 6px rgba(40,190,255,1)) drop-shadow(0 0 12px rgba(30,170,250,.9)); animation: hfDot 3s ease-in-out infinite; }
    @keyframes hfFlow { from { stroke-dashoffset: 182.5; } to { stroke-dashoffset: 0; } }
    @keyframes hfDot { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
    /* Thin, minimal double-ring circles (matching the reference mockup) */
    .hf-badge {
      position: relative; flex: 0 0 64px; width: 64px; height: 64px; border-radius: 50%;
      display: grid; place-items: center;
      background: rgba(20,120,190,.10);
      border: 1.5px solid rgba(90,210,255,.95);
      box-shadow: 0 0 12px rgba(40,190,255,.85), 0 0 26px rgba(30,170,250,.55), inset 0 0 12px rgba(60,200,255,.35);
      transition: transform .4s cubic-bezier(.34,1.56,.64,1), box-shadow .4s ease, border-color .4s ease;
    }
    .hf-badge svg { width: 26px; height: 26px; color: #aee9ff; filter: drop-shadow(0 0 5px rgba(40,190,255,.9)); }
    /* inner concentric ring */
    .hf-badge::before {
      content: ""; position: absolute; inset: 5px; border-radius: 50%;
      border: 1px solid rgba(120,225,255,.7); pointer-events: none;
    }
    /* soft expanding glow pulse */
    .hf-badge::after {
      content: ""; position: absolute; inset: -1px; border-radius: 50%;
      border: 1px solid rgba(90,210,255,.7); animation: hfPulse 3.2s ease-out infinite;
    }
    @keyframes hfPulse { 0% { transform: scale(1); opacity: .7; } 70%, 100% { transform: scale(1.6); opacity: 0; } }
    .hf-item:hover .hf-badge {
      transform: scale(1.07); border-color: #bdefff;
      box-shadow: 0 0 18px rgba(60,200,255,1), 0 0 38px rgba(40,190,255,.7), inset 0 0 16px rgba(80,210,255,.5);
    }
    .hf-text { flex: 1; min-width: 0; }
    .hf-text h3 {
      font-family: var(--font-head); font-weight: 700; font-size: .92rem; letter-spacing: .08em;
      text-transform: uppercase; color: #fff; margin: 0 0 .25rem;
      text-shadow: 0 1px 2px rgba(2,8,18,.95), 0 2px 12px rgba(4,14,28,.9), 0 0 22px rgba(4,14,28,.6);
    }
    .hf-text p { font-size: .8rem; line-height: 1.45; color: #eef5fb; margin: 0; max-width: none; text-shadow: 0 1px 2px rgba(2,8,18,.95), 0 2px 12px rgba(4,14,28,.9), 0 0 22px rgba(4,14,28,.55); }

    @media (prefers-reduced-motion: reduce) { .hf-badge, .hf-badge::after, .hf-w-flow, .hf-w-dot { animation: none; } .hf-w-flow { display: none; } }

    @media (max-width: 980px) {
      .hero-media::before { display: none; }
      .hero-inner { max-width: 100%; }
      .hero-flow { position: static; transform: none; width: 100%; margin-top: 2.5rem; margin-bottom: clamp(2.2rem, 7vw, 3rem); gap: 1.2rem; }
      .hf-wires { display: none; }
      .hf-item { gap: .95rem; }
    }
    @media (min-width: 601px) and (max-width: 980px) {
      .hero-flow { display: grid; grid-template-columns: repeat(3, 1fr); align-items: start; }
      .hf-item { flex-direction: column; text-align: center; gap: .7rem; }
    }
    @media (max-width: 600px) {
      .hero-flow {
        display: grid; grid-template-columns: 1fr; align-items: stretch;
        margin-top: 1.6rem; gap: 1rem;
      }
      .hf-item {
        flex-direction: row; text-align: left; align-items: center; gap: .9rem;
        background: rgba(10,28,52,.44); border: 1px solid rgba(90,210,255,.3);
        border-radius: 14px; padding: .75rem .9rem; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
      }
      .hf-badge { flex: 0 0 48px; width: 48px; height: 48px; }
      .hf-badge svg { width: 20px; height: 20px; }
      .hf-text h3 { font-size: .84rem; }
      .hf-text p { font-size: .84rem; }
    }