/* ===== Variables ===== */
    :root{
      --bg: #FFFFFF;
      --fg: #10367A;
      --muted: #000000;
      --glass: rgba(255,255,255,.06);
      --stroke: rgba(0,0,0,.18);
      --card: rgba(255,255,255,.8);
      --accent: #FE5716;
      --accent-2: #10367A;
      --glow: 0 0 24px rgba(254,87,22,.35), 0 0 64px rgba(16,54,122,.25);
    }
    @media (prefers-color-scheme: light){
      :root{
        --bg:#f7f8fb; --fg:#0c0f14; --muted:#3a3f51;
        --glass:rgba(0,0,0,.04); --stroke:rgba(0,0,0,.08); --card:rgba(255,255,255,.7);
      }
    }
    
    .neo-steps{position:relative; padding:clamp(2rem,5vw,4rem) 1rem; background:
        radial-gradient(1200px 600px at 10% -10%, rgba(254,87,22,.09), transparent 60%),
        radial-gradient(1200px 600px at 90% 110%, rgba(16,54,122,.08), transparent 60%),
        var(--bg);
      overflow:hidden; isolation:isolate;}
    .neo-steps::before{
      content:""; position:absolute; inset:-20% -10%; background:
        linear-gradient(transparent 49%, rgba(0,0,0,.05) 50% 51%, transparent 52%),
        linear-gradient(90deg, transparent 49%, rgba(0,0,0,.05) 50% 51%, transparent 52%);
      background-size:42px 42px;
      mask: radial-gradient(60% 60% at 50% 50%, #000 20%, transparent 70%);
      pointer-events:none; z-index:0;
    }
    .neo-steps__inner{max-width:1100px; margin:0 auto; position:relative; z-index:1;}

    .neo-steps__header{text-align:center; margin-bottom:clamp(1.5rem,3vw,2.5rem);}
    .neo-steps__title{
      font-size:clamp(1.4rem, 1.1rem + 1.6vw, 2.2rem); font-weight:800; letter-spacing:.2px;
      background: linear-gradient(90deg, var(--fg), var(--accent));
      -webkit-background-clip:text; background-clip:text; color:transparent;
    }
    .neo-steps__subtitle{color:var(--muted); max-width:70ch; margin:.5rem auto 0;}

    .neo-steps__grid{list-style:none; margin:0; padding:0; display:grid; gap:clamp(14px,2vw,20px);
      grid-template-columns:repeat(4, minmax(0, 1fr));}
    @media (max-width:980px){ .neo-steps__grid{grid-template-columns:repeat(2,1fr);} }
    @media (max-width:560px){ .neo-steps__grid{grid-template-columns:1fr;} }

    .neo-step{
      position:relative; padding:20px 18px 22px; border-radius:20px; background:
        linear-gradient(180deg, var(--card), rgba(255,255,255,.02)), var(--glass);
      border:1px solid var(--stroke); box-shadow:0 10px 30px rgba(0,0,0,.15);
      backdrop-filter: blur(8px);
      transform-style:preserve-3d;
      transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .3s;
      animation: fadeUp .6s ease both;
      animation-delay: calc(var(--i) * .05s);
    }
    .neo-step::after{
      content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px;
      background: linear-gradient(120deg, rgba(254,87,22,.7), rgba(16,54,122,.6) 40%, transparent 60%);
      -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      -webkit-mask-composite: xor; mask-composite: exclude;
      opacity:.3; transition:opacity .3s;
    }
    .neo-step:hover{ transform: translateY(-6px) rotateX(2deg) rotateY(-2deg); box-shadow:var(--glow); }
    .neo-step:hover::after{ opacity:.6; }

    .neo-step__shine{
      position:absolute; inset:0; border-radius:inherit; pointer-events:none; background:
        radial-gradient(400px 120px at 20% -20%, rgba(254,87,22,.18), transparent 40%),
        radial-gradient(400px 120px at 120% 120%, rgba(16,54,122,.16), transparent 40%);
      mix-blend-mode: screen; opacity:.6;
    }
    .neo-step__index{
      position:absolute; top:14px; right:16px; font-weight:900; font-size:clamp(18px,2vw,22px);
      background: linear-gradient(180deg, var(--accent), var(--accent-2));
      -webkit-background-clip:text; background-clip:text; color:transparent;
      text-shadow:0 0 18px rgba(254,87,22,.35);
    }

    .neo-step__icon{width:64px; height:64px; display:grid; place-items:center; border-radius:16px; margin-bottom:12px; position:relative;}
    .neo-step__icon::before{
      content:""; position:absolute; inset:0; border-radius:inherit; background:
        radial-gradient(120px 120px at 30% 20%, rgba(254,87,22,.2), transparent 40%),
        linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.02));
      border:1px solid var(--stroke);
    }
    .neo-step__icon svg{width:32px; height:32px; filter: drop-shadow(0 2px 8px rgba(254,87,22,.25));}

    .neo-step__title{font-weight:800; font-size:clamp(1rem, .9rem + .5vw, 1.1rem); letter-spacing:.2px; margin:4px 0 6px;}
    .neo-step__desc{color:var(--muted); line-height:1.5;}

    .neo-steps__cta{display:flex; justify-content:center; margin-top:clamp(18px,3vw,28px);}
    .neo-button{
      display:inline-flex; align-items:center; gap:.6rem; padding:.9rem 1.2rem; font-weight:700; border-radius:14px;
      text-decoration:none; color:#0b0e11; background: linear-gradient(90deg, var(--accent), var(--accent-2));
      box-shadow:0 8px 24px rgba(254,87,22,.25); transition: transform .2s, box-shadow .2s;
    }
    .neo-button:hover{ transform: translateY(-2px); box-shadow: var(--glow); }
    .neo-button__arrow{transition: transform .2s;}
    .neo-button:hover .neo-button__arrow{ transform: translateX(4px); }

    @keyframes fadeUp {
      from { transform: translateY(16px); opacity:0; }
      to   { transform: translateY(0);   opacity:1; }
    }