:root{
      --bg:#f3f7ff;
      --card:#ffffff;
      --border:#e5e7eb;
      --text:#111827;
      --muted:#6b7280;
      --shadow: 0 10px 30px rgba(17,24,39,.08);
      --radius:18px;
    }

    body{
      background: var(--bg);
      color: var(--text);
      font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
    }

    .navbar{
      background:#fff;
      border-bottom:1px solid var(--border);
    }

    .navbar-brand{
      font-weight: 800;
      letter-spacing:.06em;
    }

    .nav-link{ color:#374151 !important; }
    .nav-link.active, .nav-link:hover{ color:#111827 !important; }

    .hero{
      padding: 22px 12px 10px;
    }

    .hero h1{
      font-size: 1.55rem;
      font-weight: 800;
      margin: 0 0 8px;
    }

    .hero p{
      margin: 0;
      color: var(--muted);
      max-width: 780px;
      line-height: 1.6;
    }

    .cards-wrap{
      position: relative;
      padding: 10px 12px 24px;
    }

    /* خلفية زخرفية خفيفة مثل الصورة */
    .cards-wrap:before{
      content:"";
      position:absolute;
      inset: 0 0 auto 0;
      height: 240px;
      background: radial-gradient(closest-side at 20% 20%, rgba(59,130,246,.14), transparent 60%),
                  radial-gradient(closest-side at 80% 10%, rgba(34,197,94,.12), transparent 60%),
                  radial-gradient(closest-side at 70% 90%, rgba(99,102,241,.10), transparent 60%);
      pointer-events:none;
      opacity:.9;
    }

    .tool-grid{
      position: relative;
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 18px;
    }

    @media (max-width: 1400px){
      .tool-grid{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
    }

    @media (max-width: 1200px){
      .tool-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
    }

    @media (max-width: 900px){
      .tool-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }

    @media (max-width: 520px){
      .tool-grid{ grid-template-columns: 1fr; }
    }

    .tool-card{
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 22px 20px 20px;
      text-decoration: none;
      color: inherit;
      box-shadow: 0 1px 0 rgba(17,24,39,.04);
      transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
      min-height: 160px;
      position: relative;
      overflow: hidden;
    }

    .tool-card:hover{
      transform: translateY(-2px);
      box-shadow: var(--shadow);
      border-color: rgba(59,130,246,.25);
    }

    .tool-head{
      display:flex;
      align-items:flex-start;
      gap: 12px;
      margin-bottom: 10px;
    }

    .tool-icon{
      width: 44px;
      height: 44px;
      border-radius: 12px;
      display:flex;
      align-items:center;
      justify-content:center;
      color:#fff;
      font-weight:800;
      box-shadow: 0 10px 18px rgba(0,0,0,.08);
      flex: 0 0 44px;
    }

    .ic-blue{ background: linear-gradient(135deg, #60a5fa, #2563eb); }
    .ic-green{ background: linear-gradient(135deg, #34d399, #16a34a); }
    .ic-indigo{ background: linear-gradient(135deg, #a78bfa, #6366f1); }
    .ic-amber{ background: linear-gradient(135deg, #fbbf24, #f59e0b); }
    .ic-rose{ background: linear-gradient(135deg, #fb7185, #e11d48); }

    .tool-title{
      font-size: 1.05rem;
      font-weight: 800;
      margin: 0;
      line-height: 1.25;
    }

    .tool-desc{
      margin: 0;
      color: var(--muted);
      font-size: .9rem;
      line-height: 1.55;
    }

    .badge-new{
      position: absolute;
      top: 14px;
      right: 14px;
      background: rgba(59,130,246,.10);
      color: #2563eb;
      border: 1px solid rgba(59,130,246,.15);
      font-size: .72rem;
      font-weight: 700;
      padding: 4px 10px;
      border-radius: 999px;
    }

    footer{
      padding: 26px 0 20px;
      color: var(--muted);
      font-size: .9rem;
      text-align:center;
    }

    footer a{
      color: #374151;
      text-decoration: none;
      margin: 0 10px;
    }

    footer a:hover{ text-decoration: underline; }