:root{ --brader-color:var(--primary); --brader-size:2; --brader-speed:8s; --brader-radius:24 }

.card-brader{ position:relative; border: 1px solid #ededf2; }
.card-brader .brader{ position:absolute; inset:0; pointer-events:none; border-radius:inherit; width: 100%; height:100%; }

.card-brader .brader rect{
  fill:transparent;
  stroke:var(--brader-color);
  stroke-width:var(--brader-size);
  vector-effect:non-scaling-stroke;
  stroke-dasharray:80 920;   /* طول الشرارة + الفراغ */
  animation:brader-run var(--brader-speed) linear infinite;
}

@keyframes brader-run{
  to{ stroke-dashoffset:-1000; }
}

/* تقليل الحركة */
@media (prefers-reduced-motion: reduce){
  .card-brader .brader rect{ animation:none }
}

.price-style{
    border: 2px dashed #1E3A8A;
    padding: 10px 20px;
    border-radius: 20px;
    gap: 10px;
}

.feature-box {
      background: #fff;
      border: 1px solid #e5e5e5;
      border-radius: 8px;
      padding: 40px 20px 20px;
      text-align: center;
      position: relative;
      transition: all 0.3s ease;
    }
    .feature-box:hover {
      box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    }
    .feature-icon {
      width: 70px;
      height: 70px;
      background: #fff;
      border: 1px solid #e5e5e5;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      top: -35px;
      left: 50%;
      transform: translateX(-50%);
    }
    .feature-title {
      font-weight: 600;
      font-size: 18px;
      margin-top: 20px;
    }
    .feature-text {
      color: #666;
      font-size: 14px;
      margin-top: 10px;
    }
    @media (max-width: 767px) {
      .feature-box { margin-top: 50px; }
    }
    
    :root{
      --brand:#1E3A8A;         /* dark teal for badges */
      --brand-200:#e9f2f6;     /* section bg */
      --card-bdr:#e6ecef;
      --text-muted:#5b6b75;
    }

    .howto-section{
      background: var(--brand-200);
      padding: 60px 0 90px;
      position: relative;
    }

    .howto-chip{
      display:inline-block;
      padding:.5rem 1.25rem;
      border:2px dashed #8aa7b1;
      border-radius:999px;
      font-weight:700;
      letter-spacing:.5px;
      background:#f7fbfd;
    }

    .howto-sub{
      color:#14313a;
      opacity:.85;
      font-weight:600;
    }

    .step-card{
      position:relative;
      background:#fff;
      border:1px solid var(--card-bdr);
      border-radius:14px;
      padding:34px 26px 30px;
      text-align:center;
      box-shadow:0 2px 0 rgba(0,0,0,.02);
      transition:transform .2s ease, box-shadow .2s ease;
      min-height:290px;
    }
    .step-card:hover{
      transform:translateY(-3px);
      box-shadow:0 14px 28px rgba(0,0,0,.08);
    }

    .step-badge{
      position:absolute;
      top:-50px;
      left:50%;
      transform:translateX(-50%);
      width:92px; height:92px;
      background:var(--brand);
      color:#fff;
      border-radius:50%;
      border:6px solid #fff;
      box-shadow:0 0 0 3px #d7e6ec;
      display:flex; align-items:center; justify-content:center;
      font-weight:800; font-size:26px;
    }

    .step-icon{
      font-size:52px;
      color:#7a9aa4;
      margin:18px 0 8px;
    }

    .step-title{
      font-weight:700;
      font-size:20px;
      color:#163740;
      margin-bottom:.5rem;
    }

    .step-text{
      color:var(--text-muted);
      font-size:15px;
      line-height:1.7;
      margin:0;
    }

    @media (max-width: 991.98px){
      .step-card{ margin-top:50px; }
    }